/* NF Mentoring · pages/ergebnisse.css · Build-Output von build.mjs – nicht von Hand ändern. Quellen: src/pages/ergebnisse/, src/blocks/. */

/* ── src/zeichnungen/zeichnung.css ── */
/* Zeichnungs-System: Farben und Strich der Isometrie-Zeichnungen (src/zeichnungen/NAME.svg).
   Die SVG tragen keine Farben, nur Klassen. Werte sind Markenfarben aus RULES.md oder Mischungen daraus.
   Hell ist Standard (wie das Vorbild, Bauplan V1). Dunkel gilt unter data-theme bordeaux, bordeaux-2 und ink.
   Linienfarben sind deckend vorgemischt (Tinte zu 55 % auf Creme), damit sich Kanten, die zweimal
   gezeichnet werden, nicht verdunkeln. */

:root,
[data-theme="cream"] {
  --z-strich: 1.5px;                /* eine Linienstärke für alle Konturen */
  --z-strich-weg: 2.25px;           /* roter Weg wie der rote Faden im Vorbild, 1,5-fach */
  --z-linie: #716F6E;               /* ink #08080A zu 55 % auf cream #F1EDE8 */
  --z-linie-zart: #B0ADAA;          /* ink zu 28 %: Grundriss, Maßketten, Zeilen */
  --z-flaeche-1: #FBFBFB;           /* oben: white */
  --z-flaeche-2: #EDE8E1;           /* links: cream-2 mit 7 % ink (V1 TONE_WALL) */
  --z-flaeche-3: #DFDBD7;           /* rechts: cream mit 16 % ink (V1 TONE_WALL) */
  --z-boden: #F5F0E8;               /* Bodenfläche: cream-2 wie die Grundplatte im Vorbild */
  --z-akzent: #B4121E;              /* red */
  --z-akzent-flaeche: #ECD7D1;      /* wine #AE1D2B zu 12 % auf cream-2 */
  --z-durch: 0.26;                  /* roter Weg hinter Wänden, wie das Röntgenbild im Vorbild */
}

[data-theme="bordeaux"],
[data-theme="bordeaux-2"],
[data-theme="ink"] {
  --z-linie: #B6A9A8;               /* cream zu 70 % auf bordeaux #2D0912 */
  --z-linie-zart: #6C5256;          /* cream zu 32 % */
  --z-flaeche-1: #4C2D34;           /* oben: bordeaux mit 16 % cream */
  --z-flaeche-2: #3F1D25;           /* links: bordeaux mit 9 % cream */
  --z-flaeche-3: #30191F;           /* rechts: bordeaux-2 #1F070E mit 8 % cream */
  --z-boden: #33101A;               /* bordeaux mit 3,5 % cream */
  --z-akzent: #C66A68;              /* red-light (75 % red-soft + 25 % cream) für Linien */
  --z-akzent-flaeche: #4B0C16;      /* red #B4121E zu 22 % auf bordeaux */
  --z-durch: 0.4;
}

[data-theme="ink"] {
  --z-linie: #ABA8A5;               /* cream zu 70 % auf ink #08080A */
  --z-linie-zart: #535151;
}

/* Grundwerte: Füllung und Strich kommen nur aus den Klassen */
.zeichnung {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: none;
  stroke-width: var(--z-strich);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zeichnung :where(path, circle, ellipse) { vector-effect: non-scaling-stroke; }

.zeichnung .z-linie { stroke: var(--z-linie); }
.zeichnung .z-linie-zart { stroke: var(--z-linie-zart); }
.zeichnung .z-akzent { stroke: var(--z-akzent); }
.zeichnung .z-weg { stroke: var(--z-akzent); stroke-width: var(--z-strich-weg); }
.zeichnung .z-weg-durch { opacity: var(--z-durch); }
.zeichnung .z-flaeche-1 { fill: var(--z-flaeche-1); }
.zeichnung .z-flaeche-2 { fill: var(--z-flaeche-2); }
.zeichnung .z-flaeche-3 { fill: var(--z-flaeche-3); }
.zeichnung .z-boden { fill: var(--z-boden); }
.zeichnung .z-akzent-flaeche { fill: var(--z-akzent-flaeche); }
.zeichnung .z-punkt { fill: var(--z-akzent); }

/* Aufbau beim Eintritt: steuert allein core.js (NF.zeichnung, DESIGN.md §7). Es entfernt pathLength, misst die Linien
   in px und setzt .is-bereit/.is-sichtbar; die Zustände stehen in site/css/base.css. Ohne Skript und mit reduzierter
   Bewegung steht die Zeichnung fertig da. (Die früheren [data-z-aufbau]/[pathLength]-Regeln setzte kein Skript mehr;
   pathLength schneidet bei Maßstab ≠ 1 die Wegenden ab, deshalb entfernt, V2-I.) */

/* ── src/blocks/cta-band.css ── */
/* Baustein cta-band · Namensraum .b-cta-band (Slice V5-P0). Steht in einer Section mit data-theme (Farben über --text …).
   Rev. 6 (V9-A0): ruhiger, symmetrischer Schlussblock auf white oder grey: zentriert, höchstens 640 px breit, Text 36rem,
   gleiche Abstände (die Section liefert oben/unten --section-y), Knopf einzeilig mit Microcopy darunter, mobil volle Breite.
   Keine eigene Fläche, kein Verlauf, kein Raster: Hintergrund, Schrift (--text/--text-soft/--text-mute ≥ 4,5:1) und der zarte
   Rotschein des Knopfs (--nf-shadow-btn-hell) kommen aus dem Theme der Section.
   V11-C (Farbwelt Rev. 7, bauplan v11 §1/§4): Schluss-CTA auf data-theme="red" (Rot-Verlauf); der Primärknopf liest --btn1-*
   und steht dort invers (weiß mit rotem Text, 6,98:1), Microcopy --text-mute (Weiß 85 %, 5,39:1 am hellsten Stopp #AE1D2B).
   Variante, wenn die Section davor dunkel ist (olive/red, nie zwei dunkle Flächen nacheinander): dieselbe Section mit
   data-theme="olive-light" (Knopf Rot-Verlauf, Microcopy grey-500 4,62:1 am Verlaufsende); der Baustein selbst bleibt
   gleich: die Section in src/pages wählt das Attribut (Regel: Vorgänger-Section olive oder red → olive-light, sonst red). */
.b-cta-band { display: grid; justify-items: center; gap: 16px; width: 100%; max-width: 40rem; margin-inline: auto; text-align: center; }
.b-cta-band__titel { max-width: 100%; }
.b-cta-band__text { max-width: 36rem; }
.b-cta-band__aktion { display: grid; justify-items: center; gap: 12px; margin-top: 12px; }
.b-cta-band__cta { white-space: nowrap; }
.b-cta-band__micro { margin: 0; color: var(--text-mute); }
@media (max-width: 599px) {
  .b-cta-band__aktion { justify-items: stretch; width: 100%; }
  .b-cta-band__cta { width: 100%; }
}
@media (max-width: 400px) { .b-cta-band__cta { white-space: normal; } .b-cta-band__cta, .b-cta-band__micro { text-wrap: balance; } }   /* V9-FX1 (mob-freebies-05): keine Waise „passt“/„unverbindlich“ */

/* ── src/pages/ergebnisse/01-kopf.css ── */
/* /ergebnisse · 01-kopf · Namensraum .pg-ergebnisse-01-kopf (Slice V5-PE)
   Oliv (Farbwelt Rev. 4, Raster-Klasse bleibt). Mobil gestapelt (Pille · H1 · Lead · CTA · Treppe), ab 1024 px Text links (7 Spalten), Zeichnung
   rechts (5 Spalten). Marken „Start“/„Heute“ an denselben Stellen wie in 05-ergebnisse der Startseite (Anteile der
   Zeichnung 360 × 280). Bausteine aus base.css: .section .raster .pill .h1 .accent .lead .btn .zeichnung-rahmen. */
.pg-ergebnisse-01-kopf { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 88px)); overflow: hidden; }
.pg-ergebnisse-01-kopf__grid { display: grid; gap: 40px; }
.pg-ergebnisse-01-kopf__text { display: grid; justify-items: start; align-content: center; }
.pg-ergebnisse-01-kopf__pill { margin-bottom: 18px; }
.pg-ergebnisse-01-kopf__title { max-width: 14em; }
.pg-ergebnisse-01-kopf__lead { max-width: 40ch; margin-top: 22px; }
.pg-ergebnisse-01-kopf__aktion { display: grid; justify-items: start; gap: 12px; margin-top: 32px; }
.pg-ergebnisse-01-kopf__micro { margin: 0; }
.pg-ergebnisse-01-kopf__treppe { justify-self: center; width: min(100%, 360px); margin: 0; }
.pg-ergebnisse-01-kopf__treppe-bild { position: relative; }
.pg-ergebnisse-01-kopf__marke {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font: 800 .8125rem/1 var(--font-sans);
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
}
.pg-ergebnisse-01-kopf__marke::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--z-akzent);
  box-shadow: 0 0 0 3px var(--nf-line-soft-strong);
}
.pg-ergebnisse-01-kopf__marke--start { left: 29.86%; top: 73.54%; flex-direction: row-reverse; transform: translate(calc(-100% + 4px), -50%); }
.pg-ergebnisse-01-kopf__marke--heute { left: 68.89%; top: 13.07%; flex-direction: row-reverse; transform: translate(calc(-100% + 4px), -50%); }

@media (max-width: 400px) {
  .pg-ergebnisse-01-kopf__aktion .btn { white-space: normal; text-align: left; }
}

@media (min-width: 1024px) {
  .pg-ergebnisse-01-kopf__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(48px, 5.5vw, 96px);
    align-items: center;
  }
  .pg-ergebnisse-01-kopf__treppe { justify-self: end; width: clamp(300px, 26vw, 380px); }
}

/* V10-C: „Start“ und „Heute“ erscheinen im Takt der Treppe (core: .is-bereit = wartet, .is-sichtbar = läuft, beides weg =
   fertig, dann stehen die Marken). Ohne JS, bei reduced-motion und html.is-static setzt core keine Klasse: alles steht. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .pg-ergebnisse-01-kopf__treppe-bild .zeichnung.is-bereit:not(.is-sichtbar) ~ .pg-ergebnisse-01-kopf__marke { opacity: 0; }
  .pg-ergebnisse-01-kopf__treppe-bild .zeichnung.is-sichtbar ~ .pg-ergebnisse-01-kopf__marke { transition: opacity 300ms var(--ease-out) 100ms; }
  .pg-ergebnisse-01-kopf__treppe-bild .zeichnung.is-sichtbar ~ .pg-ergebnisse-01-kopf__marke--heute { transition-delay: 1.3s; }
}

/* Eintritt (01-kopf.js): Startzustand nur unter dem Motion-Gate, nur transform und clip-path */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-ergebnisse-01-kopf [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/ergebnisse/02-videos.css ── */
/* /ergebnisse · 02-videos · Namensraum .pg-ergebnisse-02-videos (Slice V5-PE)
   Fläche white (farbwelt.md §3.2, vorher Creme). Video-Slider nach dem Muster von 05-ergebnisse der Startseite: der Scroller hat keinen Innenabstand (100cqw = volle
   Breite), den Rand trägt die Liste, damit die letzte Karte vollständig einrastet. Mobil 1 Karte mit Anschnitt, ab 768 px
   genau 2. Steuerung (Zähler, Punkte, Pfeile) ohne JS ausgeblendet, dann bleibt die Scrollleiste. Farben über die Rollen der hellen Themes; Ergebnis-Zeile und aktive Punkte oliv, Rot nur Play und Akzentwort (G5/G6). */
.pg-ergebnisse-02-videos { --pe-rand: var(--gutter); --pe-gap: 12px; }
.pg-ergebnisse-02-videos__head { max-width: 46rem; }

.pg-ergebnisse-02-videos__scroller {
  position: relative;
  container-type: inline-size;
  margin-inline: calc(-1 * var(--pe-rand));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pe-rand);
  scrollbar-width: thin;
  scrollbar-color: rgb(38 51 42 / .3) transparent;
}
@media (scripting: enabled) {
  .pg-ergebnisse-02-videos__scroller { scrollbar-width: none; }
  .pg-ergebnisse-02-videos__scroller::-webkit-scrollbar { display: none; }
}
.pg-ergebnisse-02-videos__scroller:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-md); }
/* doppelte Klasse: base.css setzt ul[class] { padding: 0 } mit höherer Spezifität */
.pg-ergebnisse-02-videos .pg-ergebnisse-02-videos__videos {
  display: flex;
  gap: var(--pe-gap);
  width: max-content;
  margin: 0;
  padding: 4px var(--pe-rand) 8px;
  list-style: none;
}
.pg-ergebnisse-02-videos__video {
  display: grid;
  flex: 0 0 calc(100cqw - 2 * var(--pe-rand) - 24px);
  align-content: start;
  gap: 16px;
  min-width: 0;
  scroll-snap-align: start;
}
/* Poster 16 : 9 wie der Wistia-Player; Ausschnitt etwas über der Mitte, Köpfe bleiben frei */
.pg-ergebnisse-02-videos__poster { --consent-ratio: 1.7778; }
.pg-ergebnisse-02-videos__poster .consent__poster { object-position: 50% 35%; }
/* V10-D2 (mob-2-01): Felix Wagner mit Haaransatz (Ausschnitt oben bündig). Bei Francesco Bisignano lag der Play-Knopf auf dem
   Gesicht; das 3:2-Bild füllt den 16:9-Rahmen in der Breite und lässt sich waagerecht nicht verschieben, deshalb sitzt dort der
   Knopf rechts über dem unscharfen Gegenüber. Mobil (bis 767 px) ist der Knopf 56 statt 72 px groß (die ganze Fläche bleibt Tippziel). */
.pg-ergebnisse-02-videos__poster--oben .consent__poster { object-position: 50% 0%; }
.consent.pg-ergebnisse-02-videos__poster--knopf-rechts { --play-x: 76%; }
@media (max-width: 767px) {
  .pg-ergebnisse-02-videos__poster .consent__ui { --play-size: 56px; }   /* auf .consent__ui, dort setzt base.css die Größe per Container-Abfrage */
}
.pg-ergebnisse-02-videos__vtext { display: grid; gap: 8px; padding-inline: 4px; }
/* V9-FX2 (mob-marke-17): Firma immer unter dem Namen (vorher daneben, wo sie passte): der Ergebnistitel springt beim Wischen nicht mehr um 20 px */
.pg-ergebnisse-02-videos__wer { display: grid; gap: 2px; margin: 0; font: inherit; line-height: 1.35; }
.pg-ergebnisse-02-videos__name { color: var(--text); font-weight: 800; }
.pg-ergebnisse-02-videos__firma { color: var(--text-mute); font-size: var(--fs-small); font-weight: 600; }
.pg-ergebnisse-02-videos__ergebnis {
  margin: 0;
  color: var(--stat-value);   /* Ergebnis als Kennzahl: Oliv auf Hell (G6) */
  font: 800 clamp(1.25rem, 1.05rem + .6vw, 1.5rem)/1.2 var(--font-sans);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.pg-ergebnisse-02-videos__zitat { margin: 0; }
.pg-ergebnisse-02-videos__zitat p {
  margin: 0;
  color: var(--text-soft);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Steuerung: Zähler „1–2 von 8“, Punkte (30 px Ziel, Punkt 8 px, aktiv 22 px), Pfeile rechts (44 px) */
.pg-ergebnisse-02-videos__steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.pg-ergebnisse-02-videos__zaehler {
  margin: 0;
  min-width: 5.5em;
  color: var(--text-soft);
  font: 700 var(--fs-small)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.pg-ergebnisse-02-videos__punkte { display: flex; flex-wrap: wrap; gap: 2px; }
.pg-ergebnisse-02-videos__punkt {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
}
.pg-ergebnisse-02-videos__punkt::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgb(38 51 42 / .3);
  transition: width var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.pg-ergebnisse-02-videos__punkt[aria-current="true"]::before { width: 22px; background: var(--nf-olive-deep); }   /* aktiv olive-deep (farbwelt.md §4) */
.pg-ergebnisse-02-videos__punkt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.pg-ergebnisse-02-videos__pfeile { display: flex; gap: 10px; margin-left: auto; }
.pg-ergebnisse-02-videos__pfeil {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--nf-line-olive-pill);
  border-radius: var(--radius-pill);
  background: var(--nf-white-pure);
  color: var(--nf-olive-deep);
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out), transform 160ms var(--ease-out);
}
.pg-ergebnisse-02-videos__pfeil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-ergebnisse-02-videos__pfeil:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.pg-ergebnisse-02-videos__pfeil:active:not([aria-disabled="true"]) { transform: scale(.96); }
.pg-ergebnisse-02-videos__pfeil[aria-disabled="true"] { opacity: .38; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .pg-ergebnisse-02-videos__pfeil:not([aria-disabled="true"]):hover { border-color: var(--nf-olive); }
}
@media (scripting: none) { .pg-ergebnisse-02-videos__steuerung { display: none; } }

/* Pflichthinweis direkt unter den Videos, gut lesbar */
.pg-ergebnisse-02-videos__hinweis {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 18px 0 0;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
}
.pg-ergebnisse-02-videos__hinweis svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--nf-olive); stroke-width: 1.8; stroke-linecap: round; }

@media (min-width: 768px) {
  .pg-ergebnisse-02-videos { --pe-rand: 16px; --pe-gap: var(--col-gap); }
  .pg-ergebnisse-02-videos__video { flex-basis: calc((100cqw - 2 * var(--pe-rand) - var(--pe-gap)) / 2); }
}

/* Eintritt (02-videos.js): Startzustand nur unter dem Motion-Gate, nur transform und clip-path */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-ergebnisse-02-videos [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/ergebnisse/03-superplayer.css ── */
/* /ergebnisse · 03-superplayer · Namensraum .pg-ergebnisse-03-superplayer (Slice V5-PE)
   Fläche grey (farbwelt-rev5 §3.2, vorher olive bzw. Bordeaux-2; Farben nur über Rollen). Superplayer-Reihe und Hall of Fame nach dem Muster von 05-ergebnisse der Startseite: Kopf mit Pfeilknöpfen,
   waagerechte Reihe mit scroll-snap. Superplayer mobil 1,3 Karten, ab 640 px 3,3, ab 1024 px 5 (1024–1279 px: 4), nie
   breiter als 320 px. Stories mobil ≥ 150 px, ab 640 px ≥ 180 px, ab 1024 px 6 nebeneinander, einheitlich 3 : 5. */
.pg-ergebnisse-03-superplayer { --pe-gap: 16px; }
.pg-ergebnisse-03-superplayer__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; }
.pg-ergebnisse-03-superplayer__text { display: grid; gap: 12px; max-width: 46rem; }
.pg-ergebnisse-03-superplayer__text .h2, .pg-ergebnisse-03-superplayer__text .lead { margin: 0; }
.pg-ergebnisse-03-superplayer__h3 { margin: 0; color: var(--text); font: 800 var(--fs-h3)/var(--lh-h3) var(--font-sans); text-wrap: balance; }
.pg-ergebnisse-03-superplayer__caption { margin: 0; color: var(--text-soft); font-size: var(--fs-body); line-height: 1.5; text-wrap: pretty; }
.pg-ergebnisse-03-superplayer__pfeile { display: flex; gap: 10px; }
.pg-ergebnisse-03-superplayer__pfeil {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--btn2-line);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out), transform 160ms var(--ease-out);
}
.pg-ergebnisse-03-superplayer__pfeil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-ergebnisse-03-superplayer__pfeil:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.pg-ergebnisse-03-superplayer__pfeil:active:not([aria-disabled="true"]) { transform: scale(.96); }
.pg-ergebnisse-03-superplayer__pfeil[aria-disabled="true"] { opacity: .38; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .pg-ergebnisse-03-superplayer__pfeil:not([aria-disabled="true"]):hover { border-color: var(--btn2-hover-line); background: var(--btn2-hover-bg); }
}
@media (scripting: none) { .pg-ergebnisse-03-superplayer__pfeile { display: none; } }

.pg-ergebnisse-03-superplayer__scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgb(92 104 94 / 0.55) transparent;   /* FW5-FIX1 F6: Daumen auf grey sichtbar (line-soft-strong nur 1,34:1) */
  border-radius: var(--radius-md);
}
.pg-ergebnisse-03-superplayer__scroller:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
/* doppelte Klasse: base.css setzt ul[class] { padding: 0 } mit höherer Spezifität */
.pg-ergebnisse-03-superplayer .pg-ergebnisse-03-superplayer__reihe,
.pg-ergebnisse-03-superplayer .pg-ergebnisse-03-superplayer__stories {
  display: flex;
  gap: var(--pe-gap);
  margin: 0;
  padding: 2px 2px 14px;
  list-style: none;
}
.pg-ergebnisse-03-superplayer__karte { flex: 0 0 min(320px, calc((100% - var(--pe-gap)) / 1.3)); min-width: 0; scroll-snap-align: start; }
.pg-ergebnisse-03-superplayer__bild { display: block; color: inherit; text-decoration: none; cursor: zoom-in; }
.pg-ergebnisse-03-superplayer__bild:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .pg-ergebnisse-03-superplayer__bild:hover { border-color: var(--btn2-line); }
}

.pg-ergebnisse-03-superplayer__hinweis {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 18px 0 0;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--nf-line-soft-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
}
.pg-ergebnisse-03-superplayer__hinweis svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; }

.pg-ergebnisse-03-superplayer__hof { margin-top: clamp(48px, 5vw, 72px); }
.pg-ergebnisse-03-superplayer__kopf--hof { margin-bottom: 20px; }
.pg-ergebnisse-03-superplayer__kopf--hof .pg-ergebnisse-03-superplayer__text { gap: 8px; }
.pg-ergebnisse-03-superplayer__story { flex: 0 0 max(150px, calc((100% - var(--pe-gap)) / 2.15)); min-width: 0; scroll-snap-align: start; }
.pg-ergebnisse-03-superplayer__story-bild { aspect-ratio: 3 / 5; object-fit: cover; object-position: 50% 50%; }
.pg-ergebnisse-03-superplayer__story-bild--links { object-position: 0% 50%; }
.pg-ergebnisse-03-superplayer__story-bild--unten { object-position: 50% 100%; }

@media (min-width: 640px) {
  .pg-ergebnisse-03-superplayer__karte { flex-basis: min(320px, calc((100% - 3 * var(--pe-gap)) / 3.3)); }
  .pg-ergebnisse-03-superplayer__story { flex-basis: max(180px, calc((100% - 3 * var(--pe-gap)) / 4)); }
}
@media (min-width: 1024px) {
  .pg-ergebnisse-03-superplayer__karte { flex-basis: min(320px, calc((100% - 4 * var(--pe-gap)) / 5)); }
  .pg-ergebnisse-03-superplayer__story { flex-basis: calc((100% - 5 * var(--pe-gap)) / 6); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .pg-ergebnisse-03-superplayer__karte { flex-basis: calc((100% - 3 * var(--pe-gap)) / 4); }
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-ergebnisse-03-superplayer [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/ergebnisse/04-stimmen.css ── */
/* /ergebnisse · 04-stimmen · Namensraum .pg-ergebnisse-04-stimmen (Slice V5-PE)
   Fläche grey (farbwelt.md §3.2, vorher Creme): weiße Karten mit Haarlinie und weichem Schatten (Rollen). Drei Loft-Stimmen als Standbild mit Zitat (kein Play-Symbol, keine Klickfläche): mobil gestapelt, ab 1024 px links
   eine große Karte (Felix Schmidt), rechts zwei kompakte Karten mit Bild links. Darunter Pflichthinweis und die
   Google-Karte (Wert links, zwei Zitate rechts). Bausteine aus base.css: .section-head .h2 .accent .frame .rating.
   FE-3 (S1-13): bis 767 px sind die drei Loft-Stimmen eine waagerecht wischbare Reihe (scroll-snap, Karten 84 %, 640 bis 767 px 60 %,
   Muster 1:1 aus /vpmc 07-stimmen `__reihe`; core.js macht mit [data-wisch] die Fokus-Karte), Reihenfolge Felix, Robert, Maik.
   Der Pflichthinweis (.__hinweis) steht außerhalb der Reihe direkt darunter; die Kopie in der Felix-Karte (.__hinweis-karte) entfällt dort,
   weil der Hinweis unter der Reihe jetzt im selben Bildschirm steht. 768 bis 1023 px Raster 2 Spalten, ab 1024 px Bento. */
.pg-ergebnisse-04-stimmen__head { max-width: 50rem; }
.pg-ergebnisse-04-stimmen .pg-ergebnisse-04-stimmen__raster {
  display: grid;
  grid-auto-columns: 84%;
  grid-auto-flow: column;
  gap: 12px;
  margin: 0 calc(var(--gutter, 20px) * -1);
  padding: 0 var(--gutter, 20px) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter, 20px);
  scrollbar-width: none;
}
.pg-ergebnisse-04-stimmen__raster::-webkit-scrollbar { display: none; }
.pg-ergebnisse-04-stimmen__raster:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.pg-ergebnisse-04-stimmen__stimme {
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: 16px;
  margin: 0;
  padding: 12px 12px 22px;
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.pg-ergebnisse-04-stimmen__frame { box-shadow: none; }
.pg-ergebnisse-04-stimmen__bild { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; }
.pg-ergebnisse-04-stimmen__zitat { margin: 0; padding-inline: 8px; }
.pg-ergebnisse-04-stimmen__zitat p,
.pg-ergebnisse-04-stimmen__g-zitat blockquote p {
  margin: 0;
  color: var(--text);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.pg-ergebnisse-04-stimmen__stimme--gross .pg-ergebnisse-04-stimmen__zitat p { font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem); line-height: 1.45; }
/* V10-D2 (mob-2-02): unter 1024 px (dort gibt es kein Bento mit großer Karte) gleiche Zitatgröße auf allen Karten; in der
   Wischreihe bis 767 px teilen die Karten per subgrid die Zeilen Bild, Zitat, Name: die Namen stehen auf einer Linie. */
@media (max-width: 1023px) {
  .pg-ergebnisse-04-stimmen__stimme--gross .pg-ergebnisse-04-stimmen__zitat p { font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.5; }
}
@media (max-width: 767px) {
  .pg-ergebnisse-04-stimmen .pg-ergebnisse-04-stimmen__raster { grid-template-rows: auto auto auto; }
  .pg-ergebnisse-04-stimmen__stimme { grid-row: span 3; grid-template-rows: subgrid; }
}
.pg-ergebnisse-04-stimmen__wer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; padding-inline: 8px; line-height: 1.35; }
.pg-ergebnisse-04-stimmen__name { color: var(--text); font-weight: 800; }
.pg-ergebnisse-04-stimmen__rolle { color: var(--text-mute); font-size: var(--fs-small); font-weight: 600; }

.pg-ergebnisse-04-stimmen__hinweis {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 14px 0 0;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
}
.pg-ergebnisse-04-stimmen__hinweis svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--nf-olive); stroke-width: 1.8; stroke-linecap: round; }
/* V5-FX: bis 639 px stand derselbe Hinweis zusätzlich in der Felix-Schmidt-Karte unter dem Namen. Seit FE-3 ist diese Kopie auf allen
   Breiten ausgeblendet (bis 767 px steht die Reihe da und der Hinweis direkt darunter im selben Bildschirm, ab 768 px war sie ohnehin
   aus); das Element bleibt unverändert im DOM. */
.pg-ergebnisse-04-stimmen__hinweis-karte { display: none; }

.pg-ergebnisse-04-stimmen__google {
  display: grid;
  gap: 24px;
  margin-top: clamp(40px, 4vw, 56px);
  padding: clamp(22px, 2.6vw, 36px);
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.pg-ergebnisse-04-stimmen__rating { align-content: start; gap: 6px 12px; color: var(--text-soft); }
.pg-ergebnisse-04-stimmen__score { color: var(--text); font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); line-height: 1; letter-spacing: -.02em; }
/* Sterne: base.css färbt sie über --text (Tinte auf Hell, farbwelt.md §4: Rot nur für Handlung) */
.pg-ergebnisse-04-stimmen__anzahl { flex-basis: 100%; color: var(--text); font-weight: 600; }
.pg-ergebnisse-04-stimmen__g-zitat { display: grid; align-content: start; gap: 12px; margin: 0; }
.pg-ergebnisse-04-stimmen__g-zitat blockquote { margin: 0; }
.pg-ergebnisse-04-stimmen__g-zitat .pg-ergebnisse-04-stimmen__wer { padding-inline: 0; }

@media (min-width: 640px) {
  .pg-ergebnisse-04-stimmen .pg-ergebnisse-04-stimmen__raster { grid-auto-columns: 60%; }
}
@media (min-width: 768px) {
  .pg-ergebnisse-04-stimmen .pg-ergebnisse-04-stimmen__raster {
    grid-auto-columns: auto;
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .pg-ergebnisse-04-stimmen__stimme { scroll-snap-align: none; }
  .pg-ergebnisse-04-stimmen__hinweis { margin-top: 18px; }
}
/* V9-FX2 (desk-rest-01): das Bento ab 1024 ließ bei 1024–1150 px rechts eine 149-px-Zitatspalte (8–9 Zeilen) und in der großen
   Karte bis 284 px Leerfläche. Deshalb das Tablet-Raster (große Karte volle Breite, zwei kleine nebeneinander) bis 1199 px,
   Bento erst ab 1200. (desk-rest-16) In der Zweierreihe stehen Name und Rolle beider Karten untereinander am Kartenboden. */
@media (min-width: 768px) and (max-width: 1199px) {
  .pg-ergebnisse-04-stimmen__stimme--gross { grid-column: 1 / -1; }
  .pg-ergebnisse-04-stimmen__stimme:not(.pg-ergebnisse-04-stimmen__stimme--gross) { grid-template-rows: auto 1fr auto; }
  .pg-ergebnisse-04-stimmen__stimme:not(.pg-ergebnisse-04-stimmen__stimme--gross) .pg-ergebnisse-04-stimmen__wer { align-self: end; flex-direction: column; align-items: flex-start; }
}
/* große Karte volle Breite bei 1024–1199: Bild 2:1 statt 16:10 (sonst bis 650 px hoch); Kopf bleibt mit Luft im Bild */
@media (min-width: 1024px) and (max-width: 1199px) {
  .pg-ergebnisse-04-stimmen__stimme--gross .pg-ergebnisse-04-stimmen__bild { aspect-ratio: 2 / 1; object-position: 50% 20%; }
}
@media (min-width: 1024px) {
  .pg-ergebnisse-04-stimmen__google { grid-template-columns: minmax(0, 3fr) minmax(0, 4.5fr) minmax(0, 4.5fr); column-gap: var(--col-gap); }
}
@media (min-width: 1200px) {
  .pg-ergebnisse-04-stimmen .pg-ergebnisse-04-stimmen__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; column-gap: var(--col-gap); }
  .pg-ergebnisse-04-stimmen__stimme--gross { grid-row: 1 / span 2; }
  .pg-ergebnisse-04-stimmen__stimme:not(.pg-ergebnisse-04-stimmen__stimme--gross) {
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 18px;
    row-gap: 12px;
    padding: 12px 18px 12px 12px;
  }
  .pg-ergebnisse-04-stimmen__stimme:not(.pg-ergebnisse-04-stimmen__stimme--gross) .pg-ergebnisse-04-stimmen__frame { grid-row: 1 / span 2; align-self: start; }
  .pg-ergebnisse-04-stimmen__stimme:not(.pg-ergebnisse-04-stimmen__stimme--gross) .pg-ergebnisse-04-stimmen__bild { aspect-ratio: 4 / 5; object-position: 50% 40%; }
  .pg-ergebnisse-04-stimmen__stimme:not(.pg-ergebnisse-04-stimmen__stimme--gross) .pg-ergebnisse-04-stimmen__zitat { padding: 6px 0 0; }
  .pg-ergebnisse-04-stimmen__stimme:not(.pg-ergebnisse-04-stimmen__stimme--gross) .pg-ergebnisse-04-stimmen__wer { align-self: end; padding: 0 0 6px; }
  /* V9-FX2 (bild-a-04): Robert sitzt im Querformat rechts der Mitte; im Hochformat-Ausschnitt waren Schulter und Arm abgeschnitten */
  .pg-ergebnisse-04-stimmen__stimme:not(.pg-ergebnisse-04-stimmen__stimme--gross) .pg-ergebnisse-04-stimmen__bild--robert { object-position: 72% 40%; }
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-ergebnisse-04-stimmen [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* V11-D Rhythmus Rev. 7: zweite Hell-Oliv-Fläche der Seite, Verlauf gespiegelt (bauplan §4) */
.pg-ergebnisse-04-stimmen { --h-winkel: 195deg; }