/* OneQrew v7 — Element 03 Kartengrid (standard-grid-cards).

   Umsetzung der Design-Vorgabe "taifun-element-05-gridcards.html"
   (Datei-Nummerierung des Anwenders, entspricht Systemelement 03). Vier
   Flaechenvarianten, Spaltenzahl 2/3/4 (+1 ohne Vorgabe-Deckung), drei
   Kartentypen, aufgespannte Verknuepfung statt Link-Wrapper, natives
   Wischen statt Glide-Slider unter 620px. Aenderungen immer auch in
   kartengrid.min.css.

   Farbwerte kommen aus der Theme-Palette. --oq-farbe-text-leise und
   --oq-farbe-linie stehen nicht global in kern.css, deshalb lokal
   berechnet, wie bei abschluss.css/stage.css. */

.oq-v7 .oq-kartengrid {
  /* Masse ohne Skalen-Aequivalent, siehe Vorgabe */
  --oq-kartengrid-breite: 1320px;
  --oq-kartengrid-innen-block: clamp(72px, 9vw, 132px);
  --oq-kartengrid-innen-inline: clamp(20px, 4vw, 56px);
  --oq-kartengrid-bild-radius: var(--oq-radius-gross);

  --oq-farbe-text-leise: color-mix(in oklab, var(--oq-farbe-text) 74%, var(--oq-farbe-flaeche));
  --oq-farbe-linie: color-mix(in oklab, var(--oq-farbe-text) 18%, var(--oq-farbe-flaeche));
  --oq-kartengrid-pfeil-linie: color-mix(in oklab, var(--oq-farbe-text) 32%, var(--oq-farbe-flaeche));

  /* Kartenflaeche weiss/weiss-Grundfall: leicht abgesetzt von der eigenen
     Flaeche, nicht komplett gleich — sonst verschwimmt die Kartenkontur. */
  --oq-kartengrid-karte: color-mix(in oklab, var(--oq-farbe-flaeche) 94%, var(--oq-farbe-text));
  --oq-kartengrid-karte-hover: color-mix(in oklab, var(--oq-farbe-flaeche) 90%, var(--oq-farbe-text));

  position: relative;
  container-type: inline-size;
  background: var(--oq-farbe-flaeche);
  color: var(--oq-farbe-text);
  padding-block: var(--oq-kartengrid-innen-block);
}

.oq-v7 .oq-kartengrid__in {
  max-width: var(--oq-kartengrid-breite);
  margin-inline: auto;
  padding-inline: var(--oq-kartengrid-innen-inline);
}

.oq-v7 .oq-kartengrid__kopf {
  max-width: 56ch;
  margin-bottom: clamp(30px, 4vw, 52px);
}

.oq-v7 .oq-kartengrid--mitte .oq-kartengrid__kopf {
  margin-inline: auto;
  text-align: center;
}

/* Legacy Grid Card (src/blocks/grid-card/grid-card.v7.twig): keine eigene
   Vorgabe, die 56ch-Begrenzung oben ist standard-grid-cards' Intro-Text
   vorbehalten und wirkte hier unbalanciert schmal neben dem Kartenraster. */
.oq-v7 .oq-kartengrid--kopf-voll .oq-kartengrid__kopf {
  max-width: none;
}

/* Eigener Wrapper statt __kopf: die Beleg-Zeile braucht keinen eigenen
   grossen Abstand nach unten (das Trustsignal bringt aus kern.css bereits
   einen oberen Rand mit), sonst verdoppelt sich die Luecke zum Raster. */
.oq-v7 .oq-kartengrid__trust {
  max-width: 56ch;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.oq-v7 .oq-kartengrid--mitte .oq-kartengrid__trust {
  margin-inline: auto;
}

.oq-v7 .oq-kartengrid--mitte .oq-kartengrid__trust .oq-inhalt__trust {
  justify-content: center;
}

/* --- Die vier Flaechenrollen --------------------------------------------
   variant-dark(-alt)     dunkler Grund im Ton der Marke ("main", Vorgabe-
                          Grundfall) — Karte: --oq-farbe-dunkel-kachel, die
                          dafuer vorgesehene abgesetzte Kachel (heller als
                          der Grund, nicht dunkler).
   variant-branded(-alt)  Markenflaeche — Karte: vertiefte Marke (dunkler).
   variant-neutral(-alt)  gedeckte Flaeche — Karte: --oq-farbe-flaeche-hell
                          (Weiss), unabhaengig von der getoenten Flaeche.
   variant-white(-alt)    Grundflaeche, deshalb nur die Basisregel oben.
   variant-accent(-alt)   laeuft wie branded auf der Akzentflaeche, analog
                          zu stage.css. */
.oq-v7 .oq-kartengrid.variant-dark,
.oq-v7 .oq-kartengrid.variant-dark-alt {
  --oq-farbe-flaeche: var(--oq-farbe-dunkel);
  --oq-farbe-text: var(--oq-farbe-dunkel-text);
  --oq-kartengrid-karte: var(--oq-farbe-dunkel-kachel);
  --oq-kartengrid-karte-hover: color-mix(in oklab, var(--oq-farbe-dunkel-kachel) 92%, var(--oq-farbe-dunkel-text));
}

.oq-v7 .oq-kartengrid.variant-dark-alt {
  --oq-farbe-flaeche: var(--oq-farbe-dunkel-alt);
}

.oq-v7 .oq-kartengrid.variant-neutral,
.oq-v7 .oq-kartengrid.variant-neutral-alt {
  --oq-farbe-flaeche: var(--oq-farbe-flaeche-alt);
  --oq-kartengrid-karte: var(--oq-farbe-flaeche-hell, #fff);
  --oq-kartengrid-karte-hover: color-mix(in oklab, var(--oq-farbe-flaeche-hell) 94%, var(--oq-farbe-text));
}

.oq-v7 .oq-kartengrid.variant-branded,
.oq-v7 .oq-kartengrid.variant-branded-alt {
  --oq-farbe-flaeche: var(--oq-farbe-marke);
  --oq-farbe-text: var(--oq-farbe-marke-kontrast);
  --oq-kartengrid-karte: color-mix(in oklab, var(--oq-farbe-marke) 65%, var(--oq-farbe-dunkel));
  --oq-kartengrid-karte-hover: color-mix(in oklab, var(--oq-farbe-marke) 75%, var(--oq-farbe-dunkel));
}

.oq-v7 .oq-kartengrid.variant-accent,
.oq-v7 .oq-kartengrid.variant-accent-alt {
  --oq-farbe-flaeche: var(--oq-farbe-akzent);
  --oq-farbe-text: var(--oq-farbe-akzent-kontrast);
  --oq-kartengrid-karte: color-mix(in oklab, var(--oq-farbe-akzent) 65%, var(--oq-farbe-dunkel));
  --oq-kartengrid-karte-hover: color-mix(in oklab, var(--oq-farbe-akzent) 75%, var(--oq-farbe-dunkel));
}

/* Die Marke als Dachzeilen-/Tag-/Fuss-Farbe (--oq-farbe-marke-text faellt
   auf --oq-farbe-marke zurueck) wuerde auf der eigenen Flaeche verschwinden
   — derselbe Umschrieb wie stage.css auf .oq-stage.variant-branded
   .oq-stage__raster. Fuer variant-dark braucht es ihn nicht, siehe
   tokens.md, "Die vier Flaechenrollen". */
.oq-v7 .oq-kartengrid.variant-branded .oq-kartengrid__in,
.oq-v7 .oq-kartengrid.variant-branded-alt .oq-kartengrid__in,
.oq-v7 .oq-kartengrid.variant-accent .oq-kartengrid__in,
.oq-v7 .oq-kartengrid.variant-accent-alt .oq-kartengrid__in {
  --oq-farbe-marke: var(--oq-farbe-text);
  --oq-farbe-marke-kontrast: var(--oq-farbe-flaeche);
}

/* --- Das Raster ----------------------------------------------------------
   Basisfall (kein Modifier, "3"): 3 Spalten, Bildformat 16:10 — Vorgabe. */
.oq-v7 .oq-kartengrid__karten {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.oq-v7 .oq-kartengrid__karten .oq-kartengrid__bild {
  aspect-ratio: 16 / 10;
}

.oq-v7 .oq-kartengrid--s1 .oq-kartengrid__karten {
  grid-template-columns: minmax(0, 1fr);
}

.oq-v7 .oq-kartengrid--s2 .oq-kartengrid__karten {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oq-v7 .oq-kartengrid--s2 .oq-kartengrid__karten .oq-kartengrid__bild {
  aspect-ratio: 16 / 9;
}

.oq-v7 .oq-kartengrid--s4 .oq-kartengrid__karten {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.oq-v7 .oq-kartengrid--s4 .oq-kartengrid__karten .oq-kartengrid__bild {
  aspect-ratio: 4 / 3;
}

/* --- Die Karte -------------------------------------------------------------
   Ganze Karte klickbar ueber die aufgespannte Verknuepfung: der Link liegt
   auf der Ueberschrift, sein ::after deckt die Karte ab. Der Fokusring
   sitzt ueber :focus-within auf der ganzen Karte, deshalb keiner auf dem
   Link selbst — sonst staenden zwei ineinander. */
.oq-v7 .oq-kartengrid__karte {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--oq-kartengrid-karte);
  border: 1px solid var(--oq-farbe-linie);
  border-radius: var(--oq-radius-gross);
  overflow: hidden;
  padding: clamp(12px, 1.4vw, 16px);
  transition: background-color var(--oq-transition), border-color var(--oq-transition);
}

.oq-v7 .oq-kartengrid__karte:hover {
  background: var(--oq-kartengrid-karte-hover);
}

.oq-v7 .oq-kartengrid__karte:focus-within {
  outline: var(--oq-focus-width) solid var(--oq-focus-ring);
  outline-offset: var(--oq-focus-offset);
}

.oq-v7 .oq-kartengrid__titel a {
  text-decoration: none;
  color: inherit;
}

.oq-v7 .oq-kartengrid__titel a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.oq-v7 .oq-kartengrid__titel a:focus-visible {
  outline: 0;
}

.oq-v7 .oq-kartengrid__bild {
  position: relative;
  background: var(--oq-farbe-flaeche-alt, var(--oq-farbe-flaeche));
  border-radius: calc(var(--oq-kartengrid-bild-radius) - 6px);
  overflow: hidden;
}

.oq-v7 .oq-kartengrid__bild-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease-in-out;
}

.oq-v7 .oq-kartengrid__karte:hover .oq-kartengrid__bild-img,
.oq-v7 .oq-kartengrid__karte:hover picture.oq-kartengrid__bild-img {
  transform: scale(1.03);
}

/* --- Imagify-Kompatibilitaet ------------------------------------------------
   Dieselbe Absicherung wie stage.css/text-media.css: Imagify laeuft live im
   "<picture>-Tags"-Modus und wrappt ein nacktes <img>, verschiebt dabei
   Klasse und style-Attribut (inkl. object-position-Fokuspunkt) aufs
   <picture>. Diese Regeln lesen die verschobene Klasse zurueck und geben
   die Eigenschaften an das innere <img> weiter — object-position wird
   explizit vererbt, da custom properties das nicht automatisch tun. */
.oq-v7 picture.oq-kartengrid__bild-img {
  display: block;
  width: 100%;
  height: 100%;
}

.oq-v7 picture.oq-kartengrid__bild-img > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: inherit;
}

.oq-v7 .oq-kartengrid__leib {
  display: flex;
  flex-direction: column;
  gap: var(--oq-space-2xs);
  padding: clamp(14px, 1.6vw, 18px) clamp(6px, 0.8vw, 8px) clamp(6px, 0.8vw, 8px);
  flex: 1;
}

.oq-v7 .oq-kartengrid__karte--ohne-bild .oq-kartengrid__leib {
  padding-top: clamp(22px, 2.4vw, 28px);
}

.oq-v7 .oq-kartengrid__meta {
  display: flex;
  align-items: center;
  gap: var(--oq-space-2xs);
  flex-wrap: wrap;
  font-size: .84rem;
  color: var(--oq-farbe-text-leise);
}

.oq-v7 .oq-kartengrid__tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  background: color-mix(in oklab, var(--oq-farbe-marke-text, var(--oq-farbe-marke)) 16%, transparent);
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  padding: 4px 10px;
  border-radius: var(--oq-radius-klein);
}

.oq-v7 .oq-kartengrid__nr {
  display: block;
  padding: clamp(22px, 2.4vw, 28px) clamp(18px, 2vw, 24px) 0;
  font-family: var(--oq-schrift-mono);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--oq-farbe-text) 32%, transparent);
}

.oq-v7 .oq-kartengrid__titel {
  font-family: var(--oq-schrift-display);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.oq-v7 .oq-kartengrid__text {
  font-size: .95rem;
  color: var(--oq-farbe-text-leise);
}

.oq-v7 .oq-kartengrid__fuss {
  margin-top: auto;
  padding-top: var(--oq-space-2xs);
  display: flex;
  align-items: center;
  gap: var(--oq-space-2xs);
  font-size: .94rem;
  font-weight: 650;
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  pointer-events: none;
}

.oq-v7 .oq-kartengrid__pfeil {
  width: 16px;
  height: 9px;
  flex: none;
  position: relative;
  transition: transform .3s ease-in-out;
}

.oq-v7 .oq-kartengrid__pfeil::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.oq-v7 .oq-kartengrid__pfeil::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1px;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.oq-v7 .oq-kartengrid__karte:hover .oq-kartengrid__pfeil {
  transform: translateX(5px);
}

/* --- Logokarte -------------------------------------------------------------
   Logofeld immer weiss, unabhaengig von der Flaechenvariante — Partnerlogos
   liegen fast nie als helle Fassung vor. Feste Mindesthoehe, damit
   unterschiedlich hohe Logos nicht springen. */
.oq-v7 .oq-kartengrid__karte--logo .oq-kartengrid__bild {
  aspect-ratio: auto;
  min-height: 132px;
  display: grid;
  place-items: center;
  padding: clamp(24px, 3vw, 36px);
  background: var(--oq-farbe-flaeche-hell, #fff);
}

.oq-v7 .oq-kartengrid__karte--logo .oq-kartengrid__bild-img {
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 107px;
  object-fit: contain;
}

/* Imagify-Kompatibilitaet Logokarte, siehe Begruendung oben. */
.oq-v7 .oq-kartengrid__karte--logo picture.oq-kartengrid__bild-img {
  display: block;
  width: auto;
  height: auto;
}

.oq-v7 .oq-kartengrid__karte--logo picture.oq-kartengrid__bild-img > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 107px;
  object-fit: contain;
}

.oq-v7 .oq-kartengrid__karte--logo .oq-kartengrid__leib {
  padding-top: var(--oq-space-s);
}

/* --- Wischleiste (Hinweiszeile, nur sichtbar unter 620px) ------------------ */
.oq-v7 .oq-kartengrid__wisch-hinweis {
  display: none;
}

/* --- Umbrueche -------------------------------------------------------------
   Reihenfolge wichtig: s4 kollabiert zuerst (1040px), dann der Basisfall/
   s2 (820px), erst darunter die Wischleiste (620px) fuer alle Varianten. */
@container (max-width: 1040px) {
  .oq-v7 .oq-kartengrid--s4 .oq-kartengrid__karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Bewusst KEIN aspect-ratio-Wechsel hier: dieselbe --s4-Instanz sprang beim
     Kollabieren auf 2 Spalten von 4/3 auf 16/10 und wieder zurueck beim
     Aufklappen — reines Breakpoint-Flackern, keine Vorgabe-Deckung (die
     Vorgabe unterscheidet Verhaeltnisse nur nach gewaehlter Spaltenzahl, nicht
     nach responsivem Kollaps derselben Auswahl). 4/3 bleibt fuer --s4 jetzt
     bei jeder Breite gleich. */
}

@container (max-width: 820px) {
  .oq-v7 .oq-kartengrid__karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oq-v7 .oq-kartengrid--s2 .oq-kartengrid__karten {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (max-width: 620px) {
  .oq-v7 .oq-kartengrid__karten {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--oq-kartengrid-innen-inline);
    margin-inline: calc(var(--oq-kartengrid-innen-inline) * -1);
    padding-inline: var(--oq-kartengrid-innen-inline);
    padding-bottom: 6px;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }

  .oq-v7 .oq-kartengrid__karten > .oq-kartengrid__karte {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  .oq-v7 .oq-kartengrid__karte:hover {
    background: var(--oq-kartengrid-karte);
  }

  .oq-v7 .oq-kartengrid__karte:hover .oq-kartengrid__bild-img,
  .oq-v7 .oq-kartengrid__karte:hover picture.oq-kartengrid__bild-img {
    transform: none;
  }

  .oq-v7 .oq-kartengrid__wisch-hinweis {
    display: block;
    height: 2px;
    margin-top: var(--oq-space-s);
    border-radius: 1px;
    background: color-mix(in oklab, var(--oq-farbe-text) 16%, transparent);
  }

  .oq-v7 .oq-kartengrid__kopf {
    margin-bottom: 26px;
  }
}

/* ============================================================================
   Content Slider (card-slider, slider-small) — Element 20, nach Vorgabe
   "taifun-element-20-slider.html". Gebaut auf nativem Scrollen mit
   scroll-snap, wie schon die Wischleiste des Kartenrasters oben. Die Pfeile
   sind eine Zugabe: Wischen, Tastatur (tabindex + Pfeiltasten des Browsers)
   und Bildlaufleiste funktionieren auch ohne dist/js/v7-slider.js. Siehe
   docs/superpowers/specs/2026-08-20-v7-content-slider-design.md. */

.oq-v7 .oq-kartengrid__bahn {
  display: flex;
  gap: clamp(14px, 1.8vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--oq-kartengrid-innen-inline);
  margin-inline: calc(var(--oq-kartengrid-innen-inline) * -1);
  padding-inline: var(--oq-kartengrid-innen-inline);
  padding-block: 4px 10px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.oq-v7 .oq-kartengrid__bahn:focus-visible {
  outline: var(--oq-focus-width) solid var(--oq-focus-ring);
  outline-offset: -2px;
  border-radius: var(--oq-radius-mittel);
}

.oq-v7 .oq-kartengrid__bahn > * {
  scroll-snap-align: start;
  flex: 0 0 var(--oq-kartengrid-folie, 340px);
}

.oq-v7 .oq-kartengrid--zwei .oq-kartengrid__bahn {
  --oq-kartengrid-folie: calc((100% - clamp(14px, 1.8vw, 22px)) / 2);
}

.oq-v7 .oq-kartengrid--eins .oq-kartengrid__bahn {
  --oq-kartengrid-folie: 100%;
}

/* --- Steuerzeile: Pfeile, Fortschritt/Punkte, Zaehler --------------------- */
.oq-v7 .oq-kartengrid__steuer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.oq-v7 .oq-kartengrid__pfeil-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--oq-radius-akt, var(--oq-radius-mittel));
  flex: none;
  cursor: pointer;
  background: transparent;
  border: 1.5px solid var(--oq-kartengrid-pfeil-linie);
  color: var(--oq-farbe-text);
  display: grid;
  place-items: center;
  transition: border-color var(--oq-transition), background-color var(--oq-transition);
}

.oq-v7 .oq-kartengrid__pfeil-btn:hover:not(:disabled) {
  border-color: var(--oq-farbe-text);
  background: var(--oq-kartengrid-karte);
}

.oq-v7 .oq-kartengrid__pfeil-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.oq-v7 .oq-kartengrid__pfeil-btn i {
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  margin-left: -3px;
}

.oq-v7 .oq-kartengrid__pfeil-btn--zurueck i {
  transform: rotate(-135deg);
  margin-left: 3px;
}

.oq-v7 .oq-kartengrid__fortschritt {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--oq-farbe-text) 14%, transparent);
  position: relative;
  overflow: hidden;
}

.oq-v7 .oq-kartengrid__fortschritt span {
  position: absolute;
  inset-block: 0;
  left: 0;
  border-radius: 2px;
  background: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  transition: transform 0.25s ease, width 0.25s ease;
}

.oq-v7 .oq-kartengrid__zaehler {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--oq-farbe-text-leise);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 5.5ch;
  text-align: right;
}

.oq-v7 .oq-kartengrid__punkte {
  display: flex;
  gap: 8px;
  flex: 1;
}

.oq-v7 .oq-kartengrid__punkte button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: var(--oq-radius-klein);
  flex: none;
}

.oq-v7 .oq-kartengrid__punkte button::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--oq-farbe-text) 26%, transparent);
  transition: background-color 0.2s ease, width 0.2s ease;
}

.oq-v7 .oq-kartengrid__punkte button[aria-current="true"]::before {
  background: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  width: 26px;
  border-radius: 2px;
}

/* --- Folie: Galerie/Header-Content (slider-small) ------------------------- */
.oq-v7 .oq-kartengrid__schau {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oq-v7 .oq-kartengrid__schau-bild {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--oq-radius-gross);
  background: var(--oq-kartengrid-karte);
  display: block;
}

/* Slider Small (Bild-Folie): das 16:9-Mass oben greift live nicht, weil
   components/elements/image.twig ein inline `style="aspect-ratio: <breite> /
   <hoehe>"` aus der echten Bilddatei ausgibt (Zeile 11) — das schlaegt eine
   Klassenregel ohne !important, egal wie die Quelle zugeschnitten ist. Ohne
   Bremse zieht ein hochformatiges/grosses Bild die ganze Folie auf seine
   eigene Hoehe, "klein" bleibt dann nur der Name. Ueber den Block-Wrapper
   `.wp-block-oneqrew-slider-small` skopiert statt ueber `--eins`, weil
   media-slider-simple denselben Modifier UND dieselben
   __schau/__schau-bild-Klassen traegt (Element 20, siehe
   docs/superpowers/specs/2026-08-20-v7-content-slider-design.md). Fuer
   media-slider-simple der gleiche Fix unten ueber
   `.wp-block-oneqrew-media-slider-simple`, damit beide Bloecke eine feste
   Folienhoehe kriegen, ohne sich gegenseitig zu beeinflussen. `picture`-
   Variante mit, falls Imagify das nackte <img> live wrappt (siehe
   .oq-kartengrid__bild-img oben). */
.wp-block-oneqrew-slider-small .oq-kartengrid__schau-bild,
.wp-block-oneqrew-slider-small picture.oq-kartengrid__schau-bild {
  aspect-ratio: 16 / 9 !important;
  max-height: 420px;
}

.wp-block-oneqrew-slider-small picture.oq-kartengrid__schau-bild {
  display: block;
  width: 100%;
}

.wp-block-oneqrew-slider-small picture.oq-kartengrid__schau-bild > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover;
}

/* Media Slider Simple (Element 20, gleicher __schau-bild-Aufbau wie oben):
   analoger Fix, aber ueber `.wp-block-oneqrew-media-slider-simple` skopiert,
   damit slider-small unberuehrt bleibt. */
.wp-block-oneqrew-media-slider-simple .oq-kartengrid__schau-bild,
.wp-block-oneqrew-media-slider-simple picture.oq-kartengrid__schau-bild {
  aspect-ratio: 16 / 9 !important;
  max-height: 420px;
}

.wp-block-oneqrew-media-slider-simple picture.oq-kartengrid__schau-bild {
  display: block;
  width: 100%;
}

.wp-block-oneqrew-media-slider-simple picture.oq-kartengrid__schau-bild > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover;
}

.oq-v7 .oq-kartengrid__schau figcaption {
  font-size: 0.94rem;
  color: var(--oq-farbe-text-leise);
  max-width: 70ch;
}

.oq-v7 .oq-kartengrid__schau figcaption b {
  color: var(--oq-farbe-text);
  font-weight: 650;
  display: block;
  margin-bottom: 2px;
}

.oq-v7 .oq-kartengrid__schau .oq-inhalt__btn {
  align-self: flex-start;
}

/* --- Folie: Stimme (card-slider, Kundenstimmen) --------------------------- */
.oq-v7 .oq-kartengrid__stimme {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--oq-kartengrid-karte);
  border: 1px solid var(--oq-farbe-linie);
  border-radius: var(--oq-radius-gross);
  padding: clamp(22px, 2.6vw, 32px);
}

.oq-v7 .oq-kartengrid__stimme-tag {
  align-self: flex-start;
}

.oq-v7 .oq-kartengrid__stimme blockquote {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.45;
  font-weight: 450;
}

.oq-v7 .oq-kartengrid__stimme-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--oq-radius-mittel);
  overflow: hidden;
  background: var(--oq-farbe-flaeche-alt, var(--oq-farbe-flaeche));
}

.oq-v7 .oq-kartengrid__stimme-video video,
.oq-v7 .oq-kartengrid__stimme-video iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.oq-v7 .oq-kartengrid__stimme-fuss {
  /* Eigener Container-Query-Kontext fuers KI-Label (ki-kennzeichnung.css,
     @container max-width: 400px), siehe kennzahlen.css fuer die vollstaendige
     Begruendung. Unbedenklich hier: .oq-kartengrid__bahn > * hat einen
     definiten flex-basis (var(--oq-kartengrid-folie, 340px)), die Karte ist
     also nicht content-bemessen, und .stimme-fuss streckt sich per Default-
     Stretch der Spalten-Flex-Eltern (.oq-kartengrid__stimme) auf die volle
     Kartenbreite — kein Kollaps-Risiko. Das Avatarbild (50x50px) sitzt in
     dieser Reihe deutlich unter der 400px-Schwelle. */
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 13px;
  container-type: inline-size;
}

.oq-v7 .oq-kartengrid__stimme-bild {
  width: 50px;
  height: 50px;
  border-radius: var(--oq-radius-mittel);
  object-fit: cover;
  flex: none;
  aspect-ratio: 1;
}

.oq-v7 .oq-kartengrid__stimme-wer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.96rem;
}

.oq-v7 .oq-kartengrid__stimme-wer b {
  font-weight: 650;
}

.oq-v7 .oq-kartengrid__stimme-wer span {
  color: var(--oq-farbe-text-leise);
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: no-preference) {
  .oq-v7 .oq-kartengrid__bahn {
    scroll-behavior: smooth;
  }
}

@container (max-width: 620px) {
  .oq-v7 .oq-kartengrid--zwei .oq-kartengrid__bahn,
  .oq-v7 .oq-kartengrid--drei .oq-kartengrid__bahn {
    --oq-kartengrid-folie: 84%;
  }

  .oq-v7 .oq-kartengrid__steuer .oq-kartengrid__pfeil-btn {
    display: none;
  }
}

/* --- Team-Karte (team-grid-cards) -----------------------------------------
   Eigene Kartenform: Person statt Inhalts-Karte. Nutzt Bild/Leib/Titel/Text
   aus der Standardkarte weiter, ergaenzt Rolle, Kontakt und Social-Links. */
.oq-v7 .oq-kartengrid__team-rolle {
  color: var(--oq-farbe-text-leise);
  font-size: 0.92rem;
  font-weight: 600;
  margin-top: 2px;
}

.oq-v7 .oq-kartengrid__team-kontakt {
  list-style: none;
  display: grid;
  gap: 2px;
  margin-top: var(--oq-space-2xs);
  font-size: 0.9rem;
}

.oq-v7 .oq-kartengrid__team-kontakt a {
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  text-decoration: none;
}

.oq-v7 .oq-kartengrid__team-sozial {
  display: flex;
  gap: 6px;
  margin-top: var(--oq-space-s);
}

.oq-v7 .oq-kartengrid__team-sozial a {
  width: 36px;
  height: 36px;
  border-radius: var(--oq-radius-klein);
  display: grid;
  place-items: center;
  color: var(--oq-farbe-text-leise);
  background: color-mix(in oklab, var(--oq-farbe-text) 8%, transparent);
  transition: color var(--oq-transition), background-color var(--oq-transition);
}

.oq-v7 .oq-kartengrid__team-sozial a:hover {
  color: var(--oq-farbe-marke-text, var(--oq-farbe-marke));
  background: color-mix(in oklab, var(--oq-farbe-text) 14%, transparent);
}

/* --- Video-Einbettung im Slider (media-slider-simple) --------------------- */
.oq-v7 .oq-kartengrid__schau-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.oq-v7 .oq-kartengrid__schau-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}