/* === Contags Scroll Cards – Layout === */
.ctg-sc-wrap{
  --cols-desktop: 4;        /* Karten pro Reihe auf Desktop */
  --cols-tablet: 2;
  --cols-mobile: 1;
  --gap: 24px;              /* Abstand zwischen Karten */
  --card-radius: 20px;
  --card-bg: #F5EEE9;
  --image-ratio: 16/9;      /* Bild-Seitenverhältnis */
  --accent: #ff7a00;        /* Orange (Indikator) */
  --track: #eee;            /* Track-Farbe unter dem Balken */
  --indicator-h: 4px;
  --indicator-w: 120px;     /* fixe Balkenbreite (optional proportional) */
  --indicator-radius: 999px;
  --start-gap: 200px;       /* Sichtbarer freier Bereich links bei scrollLeft:0 */
  position: relative;
  display: grid;
  row-gap: 16px;
  overflow: visible;
}

/* Scroll-Container – sichtbare Scrollbar, Startlücke links über padding-left */
.ctg-sc-scroll{
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  overflow-x: auto;         /* Scrollbar sichtbar lassen */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-left: var(--start-gap);
  padding-bottom: 12px;     /* Platz für Indikator */
  cursor: grab;
  -webkit-user-drag: none;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge Legacy */
}

.ctg-sc-scroll::-webkit-scrollbar {
  display: none;       /* Chrome, Safari */
  height: 0;
  width: 0;
}

/* Karten */
.ctg-sc-card{
  flex: 0 0 calc((100% - (var(--gap) * (var(--cols-desktop) - 1))) / var(--cols-desktop));
  background: var(--card-bg);
  border-radius: var(--card-radius);
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.ctg-sc-figure{
  aspect-ratio: var(--image-ratio);
  margin: 0;
  width: 100%;
  overflow: hidden;
}
.ctg-sc-figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none; /* verhindert Markieren beim Drag */
}

.ctg-sc-body{ padding: 16px 20px 18px; }
.ctg-sc-title{
  margin: 0 0 6px 0;
  font-size: 1.125rem;
  line-height: 1.25;
  color: #cc2f2f;  /* steps-Rot – bei Bedarf als Control ausgeben */
  font-weight: 400; /* normal */
  text-align: center;
}
.ctg-sc-sub{
  margin: 0;
  font-size: .95rem;
  color: #555;
  text-align: center;
}

/* Indikator-Zeile */
.ctg-sc-indicator{
  position: relative;
  height: var(--indicator-h);
  background: var(--track);
  border-radius: var(--indicator-radius);
  overflow: hidden;
  cursor: pointer;
}
.ctg-sc-indicator .bar{
  position: absolute;
  left: 0;
  top: 0; height: 100%;
  width: var(--indicator-w);
  background: var(--accent);
  border-radius: var(--indicator-radius);
  will-change: left, width;
  transition: left .08s linear, width .08s linear;
  cursor: grab;
}
.ctg-sc-indicator .bar.is-dragging,
.ctg-sc-indicator .bar:active{
  cursor: grabbing;
}

/* Responsiv: Tablet 2, Mobil 1 Karte sichtbar */
@media (max-width: 1024px){
  .ctg-sc-card{ flex-basis: calc((100% - (var(--gap) * (var(--cols-tablet) - 1))) / var(--cols-tablet)); }
}
@media (max-width: 680px){
  .ctg-sc-card{ flex-basis: calc((100% - (var(--gap) * (var(--cols-mobile) - 1))) / var(--cols-mobile)); }
}

/* Während Drag globale Selektion ausschalten */
.ctg-sc-noselect, .ctg-sc-noselect *{
  -webkit-user-select: none !important;
  user-select: none !important;
}
.ctg-sc-scroll.is-dragging{ cursor: grabbing; }