/* NF Mentoring · sections.css
   Build-Output von build.mjs – nicht von Hand ändern. Quellen: src/zeichnungen/zeichnung.css, danach
   src/sections/NN-<name>.css in dieser Reihenfolge.
   */

/* ── 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/sections/01-hero.css ── */
/* 01-hero „Spiegel“ · Namensraum .s-01-hero (V3-H, Briefing .jarvis-run/briefings/v3-H-hero.md)
   Basis ist der Endzustand „Mit NF Mentoring“ (Ebene B, Zitat, Level-Chip). data-state="alltag|level" an der Bühne schaltet
   per CSS um (reduced-motion, ohne Zeitleiste). Im Motion-Modus setzt 01-hero.js Inline-Werte (GSAP), die gewinnen.
   Text steht ab dem ersten Paint (keine Masken, kein data-motion): die H1 ist das LCP-Element.
   Bausteine (.pill .h1 .accent .lead .checks .btn .rating .lupe .frame .consent) aus base.css.
   V3-H2 (Plan R4.5): mehr Luft unter dem Menü und in der CTA-Zone, Vertrauensleiste (Kennzahlen, Google, Logo-Laufband)
   statt der Kennzahlenleiste, rote Übergangslinie (.s-01-hero__faden, Pfad aus 02-problem.js). */

.s-01-hero {
  --s-01-hero-pad-top: calc(var(--header-h) + 24px);
  --s-01-hero-pad-bottom: 48px;
  --s-01-hero-col-gap: clamp(40px, 4.4vw, 72px);
  /* Rev. 5 (farbwelt-rev5.md K4): Zeichnung im Satz des Themes „white“ (Linie 4,41:1, Weg --nf-red 6,89:1), wie in 02 und 04;
     der eigene Oliv-Satz entfällt. Nur der Weg bleibt etwas kräftiger als der Standard. */
  --z-strich-weg: 2.75px;
  position: relative;
  isolation: isolate;
  overflow: clip;              /* V11-B: clip statt hidden, sonst klebt das Fokus-Fenster nicht (kein Scroll-Container) */
  min-height: calc(100svh - 48px);
  padding: var(--s-01-hero-pad-top) 0 var(--s-01-hero-pad-bottom);
  background: var(--bg-image, none) var(--bg);   /* Rev. 5: Weiß; den grauen Fuß-Verlauf setzt base.css (Kopf-Regel, K2) */
  color: var(--text);
}

/* ---------- Raster: mobil und Tablet eine Spalte (Lesereihenfolge laut Briefing §6) ---------- */
.s-01-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "pill" "title" "sub" "btn" "stage" "checks" "trust";
}
.s-01-hero__pill { grid-area: pill; justify-self: start; margin-bottom: 12px; white-space: nowrap; }
.s-01-hero__title {
  grid-area: title;
  font-size: clamp(30px, 8.6vw, 34px);
  line-height: 1.16;
  text-wrap: nowrap;
}
/* Zeilen inline mit <br>: die H1 bleibt ein Textblock und damit das LCP-Element (Block-Zeilen wären einzelne Kandidaten) */
.s-01-hero__line { white-space: nowrap; }
.s-01-hero__sub { grid-area: sub; max-width: 46ch; margin-top: 14px; }
.s-01-hero__checks { grid-area: checks; margin-top: 24px; }
.s-01-hero__checks .checks__icon { transform-origin: 50% 50%; }
.s-01-hero__cta { display: contents; }
/* CTA und Microcopy als Paar: die Microcopy steht direkt unter dem Knopf, bündig mit dessen linker Kante */
.s-01-hero__action { grid-area: btn; display: grid; justify-items: start; row-gap: 10px; margin-top: 22px; }
.s-01-hero__micro { margin: 0; padding-left: 4px; color: var(--text-mute); font-size: var(--fs-small); line-height: 1.3; }
.s-01-hero__stage { grid-area: stage; position: relative; margin-top: 22px; }

/* ---------- Film-Chip (Nebenweg zum Video), seit V3-H2 in der Tab-Leiste der Bühne: die CTA-Zone bleibt frei ---------- */
.s-01-hero__film {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px;
  margin: 0;
  padding: 0 8px 0 0;
  border: 0;
  border-radius: 16px;
  background: none;
  color: var(--text);
  font: 800 var(--fs-small)/1.3 var(--font-sans);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.s-01-hero__film[hidden] { display: none; }
/* Mit Skript: Platz ab dem ersten Paint reservieren, 01-hero.js blendet den Chip ein (kein Layout-Sprung) */
@media (scripting: enabled) { .s-01-hero__film[hidden] { display: inline-flex; visibility: hidden; } }
.s-01-hero__film-thumb {
  position: relative;
  flex: none;
  width: 48px; height: 48px;
  overflow: hidden;
  border: 1px solid var(--nf-line-soft-strong);
  border-radius: 12px;
  box-shadow: var(--nf-shadow-soft);
}
.s-01-hero__film-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* roter Play-Punkt, exakt mittig im Thumb (V7-FIX-R1: vorher Eck-Abzeichen unten rechts, 9 px aus der Mitte); Dreieck bei 64 %:
   Schwerpunkt knapp links der Mitte wie beim großen Play-Knopf (optisch mittig) */
.s-01-hero__film-thumb::after {
  content: "";
  position: absolute; inset: 0;
  margin: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--nf-wine) no-repeat 64% 50% / 9px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M0 0v10l9-5z' fill='%23F1EDE8'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85);
}
/* Titel zweizeilig, darunter „Film · 2:12“: drei Zeilen in den bisherigen 48 px (R6-H, Maße wie vorher) */
.s-01-hero__film-text { display: grid; max-width: 19ch; font-size: var(--fs-caption); line-height: 1.18; }
.s-01-hero__film-meta { margin-top: 1px; color: var(--text-soft); font-size: 0.75rem; font-weight: 600; line-height: 1.2; }
.s-01-hero__film:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .s-01-hero__film:hover .s-01-hero__film-text { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
}

/* ---------- Bühne: Tabs, Szene (kein Kasten), Bildzeile ---------- */
.s-01-hero__tabbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 52px; }
.s-01-hero__tabs {
  display: inline-flex; gap: 4px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--nf-grey-100);
}
.s-01-hero__tabs[hidden] { display: none; }
.s-01-hero__tab {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--nf-grey-700);
  font: 800 var(--fs-small)/1 var(--font-sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Rev. 5 (§2.4): Spur grey-100, aktiv Weiß/Tinte (20,01:1), inaktiv grey-700 (6,79:1); ein Zustand, keine Handlung, also nicht rot */
.s-01-hero__tab[aria-pressed="true"] { background: var(--nf-white-pure); color: var(--nf-ink); box-shadow: var(--nf-shadow-soft); }
.s-01-hero__tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.s-01-hero__scene { position: relative; margin-top: 8px; aspect-ratio: 660 / 440; }
/* Rev. 5 (K4): kein Leuchten hinter dem Raum und kein Glühen auf Weg, „Du“ und Fahne; die Zeichnung steht konturscharf auf Weiß */
.s-01-hero__layer { position: relative; }
.s-01-hero__layer--b { position: absolute; inset: 0; }
.s-01-hero__scene .s-01-hero__hop { opacity: 0; }

/* Scan-Linie beim Wechsel (nur transform/opacity, 01-hero.js) */
.s-01-hero__scanclip {
  position: absolute; inset: -4% 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.s-01-hero__scan {
  position: absolute; left: -15%; top: 50%;
  width: 130%; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgb(180 18 30 / 0), var(--nf-red) 50%, rgb(180 18 30 / 0));
  box-shadow: 0 0 10px 2px rgb(180 18 30 / 0.25);
  opacity: 0;
  pointer-events: none;
}

/* Chips: Unterkante = Marke minus 5,9 % der Höhe, zentriert; Stations-Chips nach außen an den Raumrand geschoben */
.s-01-hero__chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--nf-line-soft-strong);
  border-radius: var(--radius-pill);
  background: var(--nf-white-pure);
  box-shadow: var(--nf-shadow-soft);
  color: var(--text);
  font: 800 var(--fs-caption)/1 var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -100%);
}
.s-01-hero__chip--du::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nf-red); }
/* Rev. 5 (§2.4): Chips weiß mit Haarlinie und weichem Schatten; rot bleibt nur der „Du“-Punkt, ohne Schein */
.s-01-hero__chip--akquise { left: 24.5%; top: 23.4%; }
.s-01-hero__chip--gespraech { left: 70%; top: 29.3%; }
.s-01-hero__chip--abschluss { left: 80%; top: 60%; }
.s-01-hero__chip--nacharbeit { left: 22%; top: 55%; }
.s-01-hero__chip--du-a { left: 44.7%; top: 38.5%; }
.s-01-hero__chip--du-b { left: 41.5%; top: 6.2%; transform: translate(-100%, -50%); }

/* Bildzeile: Alltag-Zeile und Zitat als Stapel in derselben Zelle (Höhe = höherer Block, kein CLS) */
.s-01-hero__caption {
  display: grid;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.s-01-hero__cap { grid-area: 1 / 1; margin: 0; }
.s-01-hero__cap--a { color: var(--text); font-size: var(--fs-lead); line-height: 1.4; }
.s-01-hero__cap--a strong { font-weight: 800; }
.s-01-hero__quote { margin: 0; }
.s-01-hero__quote p { margin: 0; color: var(--text); font: italic 400 17px/1.42 var(--font-serif); }
.s-01-hero__quote-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; color: var(--text-mute); font-size: var(--fs-caption); }
.s-01-hero__quote-foot .rating__stars svg { width: 12px; height: 12px; }

/* Zustände (Basis = level); Inline-GSAP-Werte gewinnen im Motion-Modus */
.s-01-hero__layer--a,
.s-01-hero__chip--st,
.s-01-hero__chip--du-a,
.s-01-hero__cap--a { opacity: 0; }
.s-01-hero__stage[data-state="alltag"] :is(.s-01-hero__layer--a, .s-01-hero__chip--st, .s-01-hero__chip--du-a, .s-01-hero__cap--a) { opacity: 1; }
.s-01-hero__stage[data-state="alltag"] :is(.s-01-hero__layer--b, .s-01-hero__chip--du-b, .s-01-hero__cap--q) { opacity: 0; }
.s-01-hero__stage :is(.s-01-hero__layer, .s-01-hero__chip, .s-01-hero__cap) { transition: none; }

/* ---------- Vertrauensleiste: Kennzahlen + Google, darunter bzw. daneben das Logo-Laufband ----------
   Die Leiste liegt über der roten Übergangslinie (z-index 2 gegen 1): die Linie verschwindet hinter ihr und erscheint darunter
   wieder. Rev. 5 (§2.4): deckend Weiß mit Rand grey-100 und weichem Schatten; deckend bleibt Pflicht (V7-FIX-R1: als Glas lief
   die Linie sichtbar quer über „Hunderte Berater …“ und die Logos). */
.s-01-hero__trust {
  grid-area: trust;
  position: relative; z-index: 2;
  display: grid;
  margin-top: 32px;
  border: 1px solid var(--nf-grey-100);
  border-radius: var(--radius-md);
  background: var(--nf-white-pure);
  box-shadow: var(--nf-shadow-soft);
}
.s-01-hero__proofs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0;
  list-style: none;
}
.s-01-hero__proof { display: grid; align-content: start; gap: 4px; padding: 16px 18px 15px; }
.s-01-hero__proof + .s-01-hero__proof { border-left: 1px solid var(--hairline); }
.s-01-hero__proof--google { grid-column: 1 / -1; border-top: 1px solid var(--hairline); }
.s-01-hero__proofs .s-01-hero__proof--google { border-left: 0; }
.s-01-hero__num {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text);
  font: 800 var(--fs-stat-compact)/1 var(--font-sans);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.s-01-hero__num em { margin-left: -8px; font-style: normal; color: var(--accent-text, var(--nf-red-light)); }
.s-01-hero__num .rating__stars svg { width: 15px; height: 15px; }
.s-01-hero__label { color: var(--text-soft); font-size: var(--fs-caption); line-height: 1.35; }

.s-01-hero__logos { min-width: 0; padding: 16px 0 18px; border-top: 1px solid var(--hairline); }
.s-01-hero__logos-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; }
.s-01-hero__logos-title { margin: 0; color: var(--text-soft); font-size: var(--fs-caption); font-weight: 600; line-height: 1.35; }
.s-01-hero__marquee-toggle {
  flex: none;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 1px solid var(--nf-line-soft-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}
.s-01-hero__marquee-toggle[hidden] { display: none; }
.s-01-hero__marquee-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.s-01-hero__icon-play { display: none; fill: currentColor; stroke-width: 1.5; }
.s-01-hero__marquee-toggle[aria-pressed="true"] .s-01-hero__icon-play { display: inline; }
.s-01-hero__marquee-toggle[aria-pressed="true"] .s-01-hero__icon-pause { display: none; }
.s-01-hero__marquee-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Laufband: zwei identische Reihen, -50 % ist nahtlos; Ränder weich ausgeblendet. Nur transform. */
.s-01-hero__marquee {
  --s-01-hero-logo-h: 29px;
  --s-01-hero-logo-gap: 40px;
  margin-top: 14px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.s-01-hero__marquee-inner { display: flex; width: max-content; animation: s-01-hero-marquee 56s linear infinite; }
.s-01-hero__track {
  display: flex; align-items: center; flex: none;
  gap: var(--s-01-hero-logo-gap);
  margin: 0; padding: 0 var(--s-01-hero-logo-gap) 0 0;
  list-style: none;
}
.s-01-hero__logo { flex: none; display: flex; align-items: center; height: calc(var(--s-01-hero-logo-h) * 1.5); }
/* gleiche optische Höhe: Grundhöhe × Faktor je Seitenverhältnis (--k); Form und Proportion bleiben (width: auto) */
.s-01-hero__logo img {
  display: block;
  width: auto;
  height: calc(var(--s-01-hero-logo-h) * var(--k, 1));
  /* Rev. 5 (Vorgaben E1): graustufig und abgedunkelt auf Weiß, alle 12 Logos mit derselben Regel (DVAG, Debeka sonst < 3:1) */
  filter: grayscale(1) brightness(0.6);
  opacity: 0.9;
}
.s-01-hero__logo--allianz { --k: 0.95; }
.s-01-hero__logo--ergo { --k: 0.9; }
.s-01-hero__logo--debeka { --k: 1.02; }
.s-01-hero__logo--dvag { --k: 1.1; }
.s-01-hero__logo--signal-iduna { --k: 0.81; }
.s-01-hero__logo--continentale { --k: 1.5; }
.s-01-hero__logo--bonnfinanz { --k: 0.83; }
.s-01-hero__logo--telis-finanz { --k: 0.8; }
.s-01-hero__logo--versicherungskammer-bayern { --k: 1.24; }
.s-01-hero__logo--saarland { --k: 0.97; }
.s-01-hero__logo--aok { --k: 1.02; }
.s-01-hero__logo--finanzstarter { --k: 0.86; }
.s-01-hero__marquee.is-paused .s-01-hero__marquee-inner { animation-play-state: paused; }
/* V10-M1: Hover-Pause nur mit Maus (auf Touch bliebe :hover nach dem Tippen hängen und das Band stünde) */
@media (hover: hover) and (pointer: fine) {
  .s-01-hero__marquee:hover .s-01-hero__marquee-inner { animation-play-state: paused; }
}
@keyframes s-01-hero-marquee { to { transform: translate3d(-50%, 0, 0); } }
/* reduzierte Bewegung: stehendes Raster, keine Kopie, kein Knopf (01-hero.js zeigt ihn nur im Motion-Modus) */
@media (prefers-reduced-motion: reduce) {
  .s-01-hero__marquee { -webkit-mask-image: none; mask-image: none; }
  .s-01-hero__marquee-inner { display: block; width: auto; animation: none; }
  .s-01-hero__track { flex-wrap: wrap; justify-content: center; row-gap: 6px; column-gap: 28px; padding: 0 18px; }
  .s-01-hero__track--copy { display: none; }
}

/* ---------- Übergangslinie in 02: Pfad in px (02-problem.js), unter der Vertrauensleiste, über der Bühne ---------- */
.s-01-hero__faden {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.s-01-hero__faden-pfad {
  fill: none;
  stroke: var(--nf-red);            /* wie der rote Weg der Bühne und der Faden in 02 (02-problem.css): die Naht bleibt unsichtbar */
  stroke-width: 2.75px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgb(180 18 30 / 0.45));
}

@media (min-width: 600px) {
  .s-01-hero__proofs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-01-hero__proof--google { grid-column: auto; border-top: 0; }
  .s-01-hero__proofs .s-01-hero__proof--google { border-left: 1px solid var(--hairline); }
}
@media (max-width: 599px) {
  .s-01-hero__chip--st { display: none; }
  .s-01-hero__chip { padding: 4px 8px; font-size: 12px; }   /* FE-2: Beschriftungen ≥ 12 px */
  .s-01-hero__marquee { --s-01-hero-logo-h: 24px; --s-01-hero-logo-gap: 32px; }
}

/* V10-M3: der Haupt-CTA ist mobil nicht mehr über die volle Breite gezogen (Regeln unten im V10-M3-Block) */
@media (max-width: 479px) {
  .s-01-hero__cap--a { font-size: var(--fs-body); }
  .s-01-hero__quote p { font-size: 16px; }
}

/* Tablet: eine Spalte, Bühne begrenzt */
@media (min-width: 600px) and (max-width: 1023px) {
  .s-01-hero__stage { max-width: 640px; }
  .s-01-hero__title { font-size: clamp(34px, 6vw, 48px); }
}

/* ---------- Desktop: Text links, Bühne rechts ab Höhe der Pille, Vertrauensleiste über die volle Breite ----------
   Luft unter dem Menü: 56–84 px zwischen Header-Pille und Kicker-Pille (vorher 33–38 px), bei niedrigen Fenstern 44 px. */
@media (min-width: 1024px) {
  .s-01-hero {
    --s-01-hero-pad-top: calc(var(--header-h) + clamp(56px, 5.2vw, 84px));
    --s-01-hero-pad-bottom: 56px;
  }
  .s-01-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-rows: auto auto auto auto auto 1fr auto;
    grid-template-areas:
      "pill stage"
      "title stage"
      "sub stage"
      "checks stage"
      "cta stage"
      ". stage"
      "trust trust";
    column-gap: var(--s-01-hero-col-gap);
  }
  .s-01-hero__pill { margin-bottom: 24px; }
  .s-01-hero__title { font-size: clamp(2.125rem, 4vw, 3.625rem); line-height: 1.08; }
  .s-01-hero__sub { margin-top: 22px; }
  .s-01-hero__checks { margin-top: 24px; }
  /* CTA-Zone: nur Knopf und direkt darunter die Microcopy (Film-Chip sitzt in der Tab-Leiste der Bühne) */
  .s-01-hero__cta { grid-area: cta; display: block; margin-top: 34px; }
  .s-01-hero__action { margin-top: 0; }
  .s-01-hero__stage { margin-top: 0; }
  .s-01-hero__tabbar { min-height: 44px; }
  .s-01-hero__tab { min-height: 36px; }
  .s-01-hero__cap--a { font-size: 20px; }
  .s-01-hero__quote p { font-size: 18px; }
  .s-01-hero__chip { font-size: var(--fs-caption); }
  .s-01-hero__grid { position: static; }

  .s-01-hero__trust {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    margin-top: 44px;
  }
  .s-01-hero__proofs { grid-template-columns: repeat(3, auto); }
  .s-01-hero__proof { padding: 18px clamp(18px, 1.8vw, 28px); }
  .s-01-hero__logos { align-self: stretch; display: grid; align-content: center; padding: 14px 0; border-top: 0; border-left: 1px solid var(--hairline); }
  .s-01-hero__logos-head { padding: 0 22px 0 26px; }
  .s-01-hero__marquee { margin-top: 10px; }
}
/* 1024–1279: Kennzahlen und Laufband untereinander */
@media (min-width: 1024px) and (max-width: 1279px) {
  .s-01-hero__trust { grid-template-columns: minmax(0, 1fr); }
  .s-01-hero__logos { border-left: 0; border-top: 1px solid var(--hairline); }
}
/* Niedrige Desktop-Fenster (1366×768, 1280×720): etwas enger, Text bleibt gleich groß, die Bühne wird kleiner */
@media (min-width: 1024px) and (max-height: 800px) {
  .s-01-hero { --s-01-hero-pad-top: calc(var(--header-h) + 44px); }
  .s-01-hero__pill { margin-bottom: 20px; }
  .s-01-hero__sub { margin-top: 18px; }
  .s-01-hero__checks { margin-top: 18px; }
  .s-01-hero__cta { margin-top: 26px; }
  .s-01-hero__stage { justify-self: end; width: min(100%, calc((100svh - 250px) * 1.28)); }
  .s-01-hero__trust { margin-top: 36px; }
}

/* Video-Dialog (Zwei-Klick-Gate im Dialog). Rev. 6 (V9-A1): kein data-theme="olive" mehr am Dialog; Fenster, Rahmen und
   Abdunkler kommen neutral aus .lupe (base.css, Schnitt A0), die Rollen innen erbt er vom Kopf (white). */
.s-01-hero__dialog { width: min(92vw, 960px); padding: 52px 10px 10px; }
.s-01-hero__film-frame { margin: 0; }
/* V10-M3: ein Schließen-Knopf je Dialog. Das X der Einwilligungskarte (base.css) setzt die Karte nur zurück; im Dialog schließt
   .lupe__schliessen (bzw. Esc) alles. Der Titel ist ab 600 px nur für Screenreader da (aria-labelledby), mobil steht er sichtbar
   in der Kopfzeile (V10-M3-Block unten). */
.s-01-hero__dialog .consent__close { display: none; }
.s-01-hero__dialog-titel {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Titelbild bleibt während der Einwilligung sichtbar: Karte als Verlauf, Text unten auf fast deckendem Grund (R6-H).
   Schmale Dialoge (Container < 600 px) behalten die volle Deckung aus base.css. Rev. 4: neutral (--nf-scrim-neutral) statt bordeaux-getönt. */
@container (min-width: 600px) {
  .s-01-hero__dialog .consent__card {
    align-content: end;
    background: linear-gradient(180deg, rgb(14 19 16 / 0.1) 0%, rgb(14 19 16 / 0.45) 32%, rgb(14 19 16 / 0.92) 56%, rgb(14 19 16 / 0.95) 100%);
  }
}

/* ---------- Motion-Gate: Bühne erst sichtbar, wenn 01-hero.js die Startzustände gesetzt hat (.is-live);
   fällt das Skript aus, erscheint nach 1,6 s der fertige Endzustand ---------- */
@keyframes s-01-hero-failsafe { to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .s-01-hero__scene { opacity: 0; animation: s-01-hero-failsafe 1ms linear 1.6s forwards; }
  html:not(.is-static) .s-01-hero__scene.is-live { opacity: 1; animation: none; }
}

/* FE-2 ST-09 (b): mobil Kennzahlen als eine Reihe mit drei Spalten (Google-Sterne unter der 5,0). Haken, Zitat, Texte unverändert.
   V10-M1 (Adrian 01.10.: „Warum bewegen sich Mobile im Hero die Logos nicht?“): die Wisch-Fassung ist zurückgenommen, das
   Laufband läuft unter 1024 px wie am Desktop (zwei Reihen, -50 %, Masken-Ränder aus der Grundregel, Pause-Knopf sichtbar). */
@media (max-width: 599px) {
  /* Spalte der Google-Bewertung breiter: Labels überall zweizeilig (vorher 1/2/3 Zeilen bei 390 px) */
  .s-01-hero__proofs { grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.95fr) minmax(0, 1.3fr); }
  .s-01-hero__proof { padding: 14px 8px 13px 10px; }
  .s-01-hero__proof:first-child { padding-left: 16px; }
  .s-01-hero__proof--google { grid-column: auto; border-top: 0; }
  .s-01-hero__proofs .s-01-hero__proof--google { border-left: 1px solid var(--hairline); }
  .s-01-hero__num { font-size: 1.5rem; }
  .s-01-hero__label { font-size: 13px; line-height: 1.3; }
  .s-01-hero__proof--google .s-01-hero__num { flex-wrap: wrap; row-gap: 4px; }
  .s-01-hero__proof--google .s-01-hero__num .rating__stars svg { width: 12px; height: 12px; }
  /* Tempo wie am Desktop (dort 1708 px in 56 s = 30,5 px/s): eine Reihe ist mobil rund 1430 px breit, 44 s ≈ 32 px/s */
  .s-01-hero__marquee-inner { animation-duration: 44s; }
}
@media (max-width: 359px) {
  .s-01-hero__label { font-size: 12px; }
}
@media (max-width: 1023px) {
  /* Pause-Knopf: sichtbar 32 px, Tippfläche 44 px über eine unsichtbare Pseudo-Fläche */
  .s-01-hero__marquee-toggle { position: relative; }
  .s-01-hero__marquee-toggle::before { content: ""; position: absolute; inset: -7px; }   /* ab Innenkante: 30 + 2 × 7 = 44 px */
}
/* V9-FX1 (mob-start-09): stehende Logo-Wolke unter 380 px als 2 × 6-Raster (vorher 2/2/2/2/3/1 bzw. 3/3/2/3/1 mit
   „FinanzStarter“ allein); drei Spalten tragen nicht, Telis/Signal Iduna/Bonnfinanz sind breiter als 88–101 px */
@media (max-width: 379px) and (prefers-reduced-motion: reduce) {
  .s-01-hero__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
  .s-01-hero__track--copy { display: none; }   /* V10-D1 (mob-1-01): die Grid-Regel oben holte die Kopie-Reihe zurück */
}

/* V10-M1 (Adrian 01.10.: „Mentoring für Versicherungsvermittler viel zu groß, das muss viel kleiner sein“): unter 600 px ist die
   Pille ein ruhiger kleiner Kicker ohne Versalien (bei 390 px 336 → 232 px breit, 32 → 26 px hoch), einzeilig bis 320 px.
   Ab 600 px bleibt sie wie am Desktop. */
@media (max-width: 599px) {
  .s-01-hero__pill {
    min-height: 26px;
    margin-bottom: 10px;
    padding: 4px 11px;
    font-size: 12px; font-weight: 600; line-height: 1.2;   /* 600 statt 700: Nunito Sans liegt nur in 400/600/800 vor (700 → 800, 249 px) */
    letter-spacing: 0.01em;
    text-transform: none;
  }
  /* Tab-Leiste und Film-Chip kompakter gegenüber der Zeichnung (Leiste 52 → 46 px, Thumb 48 → 44 px); Tippziel bleibt 44 px */
  .s-01-hero__tabbar { min-height: 0; row-gap: 12px; }
  .s-01-hero__tabs { padding: 2px; gap: 2px; }
  .s-01-hero__tab { position: relative; min-height: 40px; padding: 0 14px; font-size: 13px; }
  .s-01-hero__tab::after { content: ""; position: absolute; inset: -2px 0; }
  .s-01-hero__film { min-height: 44px; gap: 10px; }
  .s-01-hero__film-thumb { width: 44px; height: 44px; border-radius: 11px; }
  .s-01-hero__film-thumb::after { width: 18px; height: 18px; background-size: 8px 9px; }
  .s-01-hero__film-text { font-size: 13px; }
  /* „Du als Unternehmer“ links neben der Fahne berührte bei 360–390 px Fahne und Wandlinie: mobil steht der Chip wie die
     Stations-Chips mittig über der Fahne (Szene etwas tiefer, damit er Abstand zum Film-Chip hält; 01-hero.js setzt dasselbe) */
  .s-01-hero__scene { margin-top: 24px; }
  .s-01-hero__chip--du-b { top: 3%; transform: translate(-50%, -100%); }
}

/* V10-M3 (Adrian 01.10. 23:24: „Der ‚Jetzt herausfinden, ob es passt‘ ist im Hero viel, viel zu groß … darf auf gar keinen Fall
   länger sein als ‚Dein Alltag‘ und ‚Mit NF Mentoring‘ unten gemeinsam“ / „Mentoring für Versicherungsvermittler ist immer noch
   zu lang“ / Film-Dialog „zwei X-Button … nicht perfekt integriert“). Alles nur unter 600 px; ab 600 px bleibt es wie bisher,
   außer dass der Dialog auch dort nur ein X zeigt. Die Stufen < 360 / < 340 px aus V9-A1 entfallen: mit 14 px passt der Knopf
   ab 320 px einzeilig. */
@media (max-width: 599px) {
  /* Knopf und Tab-Leiste teilen eine Breite (gemeinsame linke und rechte Kante). Text 208 px bei 14 px/800, Tab-Leiste 241 px:
     min-width statt fester Breite, damit ein breiterer Rückfall-Font den Text nicht aus dem Knopf schiebt */
  .s-01-hero { --s-01-hero-duo-w: 241px; }
  .s-01-hero__btn {
    --btn-h: 46px;
    min-width: var(--s-01-hero-duo-w);
    gap: 0;
    padding: 0 14px;
    font-size: 14px;
    white-space: nowrap;
  }
  .s-01-hero__btn .btn__icon { display: none; }
  .s-01-hero__tabs { min-width: var(--s-01-hero-duo-w); }
  .s-01-hero__tab { flex: 1 1 auto; }

  /* Pille: „Für Versicherungsvermittler“ (aus „Mentoring für …“, ohne doppelten Text im DOM; capitalize hebt nur das f an) */
  .s-01-hero__pill-lang { display: none; }
  .s-01-hero__pill-fuer { text-transform: capitalize; }

  /* Film-Dialog randnah: Kopfzeile (Titel links, X rechts) über dem Video, ein Kasten weniger. Fenster 28 px Radius,
     8 px Innenabstand, Video 20 px Radius (28 − 8, konzentrisch); Rahmen und Karte decken sich */
  .s-01-hero__dialog { width: calc(100vw - 16px); padding: 0 8px 8px; }
  .s-01-hero__dialog-kopf { display: flex; align-items: center; gap: 12px; min-height: 52px; margin-right: -4px; padding-left: 10px; }
  .s-01-hero__dialog-titel {
    position: static;
    display: grid;
    width: auto; height: auto; min-width: 0;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    color: var(--text);
    font: 800 13px/1.25 var(--font-sans);
  }
  .s-01-hero__dialog-dauer { color: var(--text-mute); font-size: 12px; font-weight: 600; }
  .s-01-hero__dialog .lupe__schliessen { position: relative; top: auto; right: auto; flex: none; margin-left: auto; }
  .s-01-hero__film-frame { padding: 0; border: 0; border-radius: 20px; background: none; }
  .s-01-hero__film-frame > .consent { border-radius: 20px; }
  .s-01-hero__dialog .consent__head { padding-right: 0; }
  /* Einwilligung: die Karte bestimmt die Höhe (mindestens 16:9 der Videobreite), nichts wird abgeschnitten; nach „Video laden“
     gilt wieder das 16:9-Maß aus base.css (::after) */
  .s-01-hero__dialog .consent[data-state="ask"] { min-height: 0; }
  .s-01-hero__dialog .consent[data-state="ask"]::after { display: none; }
  .s-01-hero__dialog .consent[data-state="ask"] .consent__ui { position: relative; }
  .s-01-hero__dialog .consent[data-state="ask"] .consent__card { position: relative; min-height: calc((100vw - 34px) * 0.5625); overflow: visible; }
}

/* ---------- V11-B Fokus-Einstieg (Nino 02.10., Webflow-Vorbild; bauplan v11 §2) ----------
   Track .s-01-hero__fokus (100svh + 0,8 × Lauf) mit klebendem Fenster .s-01-hero__fenster (100svh): das Fenster klebt 0,8 × Lauf
   und löst sich dann nativ (Phase 0,80–1,00 = normaler Scroll, der Abholungsblock schiebt von unten herein). 01-hero.js legt
   einen ScrollTrigger (scrub: true, Länge = Lauf, kein Pin) auf den Track und bewegt nur transform/opacity von Pille, H1, Lead
   und CTA-Paar. Basis (reduced-motion, ohne JS, html.is-static, Höhe < 560 px): alle Hüllen display: contents = das Raster oben.
   Vorzustände nur unter dem Gate; --s-01-hero-f1 ist die CSS-Näherung der Fokus-1-Pose (JS rechnet sie genau nach), damit die
   H1 (LCP) ab dem ersten Paint dort steht, wo die Zeitleiste sie hinsetzt. Failsafe wie oben: ohne GSAP nach 1,6 s alles
   sichtbar, Track auf Basishöhe. Flächen nur aus Rollen (--kopf-fade-end aus base.css), keine neuen Farbwerte. */
.s-01-hero__fokus,
.s-01-hero__fenster,
.s-01-hero__abholung { display: contents; }
@keyframes s-01-hero-failsafe-weg { to { opacity: 1; transform: none; } }
@keyframes s-01-hero-failsafe-track { to { height: 100svh; } }
@keyframes s-01-hero-failsafe-haken { to { max-height: 30em; margin-top: 24px; overflow: visible; visibility: visible; } }

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) and (min-height: 560px) {
  html:not(.is-static) .s-01-hero {
    --s-01-hero-lauf: 120svh;   /* mobil und Tablet 1,2 svh; ab 1024 px siehe unten */
    --s-01-hero-f1: 92px;       /* ≈ halbe Höhe von Lead + CTA-Paar (390 px) */
    padding-top: 0;
  }
  html:not(.is-static) .s-01-hero__grid { display: block; }
  html:not(.is-static) .s-01-hero__fokus {
    display: block;
    position: relative;
    height: calc(100svh + 0.8 * var(--s-01-hero-lauf));
    animation: s-01-hero-failsafe-track 1ms linear 1.6s forwards;
  }
  html:not(.is-static) .s-01-hero__fenster {
    position: sticky; top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "pill" "title" "sub" "checks" "btn";
    align-content: center;
    height: 100svh;
    padding: calc(var(--header-h) + 8px) 0 28px;
  }
  /* Fenster-Fuß wie bei Webflow: die unteren 30 % laufen von Weiß in den Kopf-Fuß-Ton (randlos über die volle Breite) */
  html:not(.is-static) .s-01-hero__fenster::after {
    content: "";
    position: absolute; z-index: -1;
    left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 0;
    height: 30%;
    background: linear-gradient(180deg, transparent, var(--kopf-fade-end, var(--nf-grey-100)));
    pointer-events: none;
  }
  /* Abholungsblock: oben derselbe Ton zurück nach Weiß (keine Kante unter dem Fenster), dann Bühne, Haken, Vertrauensleiste */
  html:not(.is-static) .s-01-hero__abholung {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "checks" "trust";
    padding-top: 20px;
  }
  html:not(.is-static) .s-01-hero__abholung::before {
    content: "";
    position: absolute; z-index: -1;
    left: calc(50% - 50vw); right: calc(50% - 50vw); top: 0;
    height: min(22svh, 190px);
    background: linear-gradient(180deg, var(--kopf-fade-end, var(--nf-grey-100)), transparent);
    pointer-events: none;
  }
  html:not(.is-static) .s-01-hero__abholung .s-01-hero__stage { margin-top: 0; }
  /* V11-B2: die Haken stehen im Quelltext im Fenster. Mobil und bei Höhe < 760 hängt 01-hero.js sie vor die Bühne (Bereich
     „checks“ des Abholungsblocks, Stand B); bis dahin nehmen sie im Fenster keinen Platz ein, sonst spränge die H1 beim
     Umhängen. Failsafe ohne Skript: nach 1,6 s stehen sie im Fenster (max-height statt display: none, denn auf display: none
     läuft keine Animation). Ab 1024 × 760 gehören sie zu Fokus 2 (Block unten). */
  html:not(.is-static) .s-01-hero__fenster .s-01-hero__checks {
    max-height: 0; margin-top: 0;
    overflow: hidden; visibility: hidden;
    animation: s-01-hero-failsafe-haken 1ms linear 1.6s forwards;
  }

  /* Vorzustände (Fokus 1): Pille + H1 mittig, Lead und CTA-Paar unsichtbar darunter; nie .btn selbst transformieren */
  html:not(.is-static) .s-01-hero__pill { transform: translateY(var(--s-01-hero-f1)); }
  html:not(.is-static) .s-01-hero__title { transform: translateY(var(--s-01-hero-f1)) scale(1.06); transform-origin: 0 50%; }   /* links bündig mit Pille und Lead */
  html:not(.is-static) .s-01-hero__sub,
  html:not(.is-static) .s-01-hero__action { opacity: 0; transform: translateY(calc(var(--s-01-hero-f1) + 40px)); }
  html:not(.is-static) :is(.s-01-hero__pill, .s-01-hero__title, .s-01-hero__sub, .s-01-hero__action) {
    animation: s-01-hero-failsafe-weg 1ms linear 1.6s forwards;
  }
  html:not(.is-static) .s-01-hero.is-fokus-live :is(.s-01-hero__fokus, .s-01-hero__pill, .s-01-hero__title, .s-01-hero__sub, .s-01-hero__action) { animation: none; }
  /* Fokus 1: das noch unsichtbare CTA-Paar fängt keine Klicks (01-hero.js setzt .is-f1 nach Fortschritt) */
  html:not(.is-static) .s-01-hero__fenster.is-f1 .s-01-hero__action { pointer-events: none; }
}
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) and (min-height: 560px) and (min-width: 1024px) {
  html:not(.is-static) .s-01-hero { --s-01-hero-lauf: 100svh; --s-01-hero-f1: 104px; }
  /* Fokus-Block als mittige Spalte, Text bündig links (wie Webflow); Breite = breiteste Zeile */
  html:not(.is-static) .s-01-hero__fenster {
    grid-template-columns: minmax(0, max-content);
    grid-template-areas: "pill" "title" "sub" "cta";
    justify-content: center;
  }
  html:not(.is-static) .s-01-hero__title { transform: translateY(var(--s-01-hero-f1)) scale(1.12); }
  html:not(.is-static) .s-01-hero__abholung {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-rows: auto auto;
    grid-template-areas: "checks stage" "trust trust";
    column-gap: var(--s-01-hero-col-gap);
    padding-top: 40px;
  }
  html:not(.is-static) .s-01-hero__abholung .s-01-hero__checks { align-self: center; margin-top: 0; font-size: var(--fs-lead); }
}
/* Lauf 1,5 svh erst ab 1024 × 640 (bauplan §2), darunter 1,0 svh */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) and (min-height: 640px) and (min-width: 1024px) {
  html:not(.is-static) .s-01-hero { --s-01-hero-lauf: 150svh; }
}
/* V11-B2 (Brain-Befund 02.10.: links nur die Haken in viel Weiß): ab 1024 × 760 ist Fokus 2 = H1 + Lead + Haken + CTA wie im
   ursprünglichen Hero-Stapel; die Haken kommen mit dem Lead (01-hero.js, je Zeile leicht gestaffelt). Der Abholungsblock ist dann
   nur Bühne + Vertrauensleiste: die Bühne mittig, höchstens 1120 px breit und so hoch, dass Tab-Leiste, Zeichnung und
   Bildzeile mit Luft in ein Fenster passen (Zeichnung im Seitenverhältnis 3:2, nur Breite/Höhe, kein Transform; 1440 × 900:
   900 px statt 632 px in der rechten Spalte).
   --s-01-hero-f1 = halbe Höhe von Lead + Haken + CTA-Paar (gemessen 1440 × 900). Darunter (Höhe < 760) bleibt der Stand B. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) and (min-width: 1024px) and (min-height: 760px) {
  html:not(.is-static) .s-01-hero { --s-01-hero-f1: 166px; }
  html:not(.is-static) .s-01-hero__fenster { grid-template-areas: "pill" "title" "sub" "checks" "cta"; }
  html:not(.is-static) .s-01-hero__fenster .s-01-hero__checks {
    max-height: none; margin-top: clamp(18px, 2.6svh, 24px);
    overflow: visible; visibility: visible;
    animation: none;
  }
  html:not(.is-static) .s-01-hero__fenster .s-01-hero__checks > li {
    opacity: 0;
    transform: translateY(calc(var(--s-01-hero-f1) + 40px));
    animation: s-01-hero-failsafe-weg 1ms linear 1.6s forwards;
  }
  html:not(.is-static) .s-01-hero.is-fokus-live .s-01-hero__checks > li { animation: none; }
  html:not(.is-static) .s-01-hero__abholung {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "stage" "trust";
  }
  html:not(.is-static) .s-01-hero__abholung .s-01-hero__stage {
    justify-self: center;
    width: min(100%, 1120px, calc((100svh - 300px) * 1.5));
  }
  /* Bildzeile: Zitat und Alltag-Zeile füllen die linke Bühnenhälfte, die Haarlinie bleibt über der ganzen Bühnenbreite. Seit
     V11-B3 führt 02-problem.js route() den roten Faden links an der Bühne vorbei (die B2-Notlösung „Texte enden 24 px vor der
     Schiene“ entfällt); ist links kein Platz, nutzt er die leere rechte Hälfte. Zeilenumbrüche wie vorher (1024–2560 gemessen). */
  html:not(.is-static) .s-01-hero__abholung .s-01-hero__cap { max-width: 50%; }
  /* Fokus 2 reicht hier tiefer: der Fenster-Fuß setzt erst nach gut einem Drittel seiner Höhe ein, damit die Microcopy
     (--text-mute) auf hellem Grund bleibt (gemessen 4,54:1 ohne, gut 5:1 mit Verzögerung) */
  html:not(.is-static) .s-01-hero__fenster::after { background: linear-gradient(180deg, transparent 35%, var(--kopf-fade-end, var(--nf-grey-100))); }
}
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) and (min-width: 1024px) and (min-height: 760px) and (max-height: 800px) {
  html:not(.is-static) .s-01-hero { --s-01-hero-f1: 157px; }   /* engere Abstände (Block „Niedrige Desktop-Fenster“) */
}

/* ── src/sections/02-problem.css ── */
/* 02-problem · Namensraum .s-02-problem
   DESIGN.md Revision 2 §5, Fläche Rev. 6 (V9-A1): Grau (data-theme="grey"), Zeichnungen auf weißen Karten (Rollen --zr-*).
   Budget ≤ 1,6 Bildschirmhöhen am Desktop.
   Bausteine aus base.css: .section .section-head .h2 .accent .lead .stationen .station* .zeichnung-rahmen .station__pfeil.
   Hier nur: Raster des Abschnitts, das Dreieck des Kreislaufs (ab 640 px), die zwei Bogenpfeile zurück zum Anfang,
   der Rückpfeil mobil, die Problemzeilen und die Überleitung.
   < 640 px: Kopf · Stationen untereinander (Pfeil ↓, nach der dritten ↺) · Probleme · Überleitung
   640–1023: wie mobil, Stationen als Dreieck · ≥ 1024: links Kopf und Probleme, rechts das Dreieck
   V3-H2 (Plan R4.5): Agentur im Kopf entfällt; oben eine Kante im Isometrie-Winkel (30°) als Band in der Farbe am Unterrand
   des Heros (::before, clip-path, ohne Layoutwirkung); die rote Übergangslinie (.s-02-problem__faden) setzt 02-problem.js.
   Rev. 5 (farbwelt-rev5.md §3.1): das Band setzt das Ende des grauen Kopf-Fußes fort (--kopf-fade-end aus base.css).
   V11-C (Farbwelt Rev. 7, bauplan v11 §1): Fläche olive (Oliv-Verlauf, Lichtpunkt rechts oben am Kreislauf, mobil als hohe
   Ellipse oben), Zeichnungen auf weißen Kacheln (data-theme="white" im HTML). Pfeile, Bögen und Rückpfeil lesen die Rolle
   --pfeil der Section (hell auf Oliv), Kreuze --kreuz, der Hinweis-Balken --line. Das Faden-Teilstück in 02 ist weiß mit
   rotem Schatten (das Hero-Teilstück bleibt rot); die Kante oben trägt die Endfarbe des Kopf-Fußes. */

/* ---------- Isometrische Kante: links bündig, dann 30° nach unten, rechts um --kante-d tiefer ----------
   X1 = --s-02-problem-kante-x, Tiefe D = --s-02-problem-kante-d, Lauf = D × √3 (tan 30°). 02-problem.js richtet X1 an der
   Linie aus und setzt D so, dass die Schräge genau an der ersten Station endet; ohne JS gelten die Werte hier. */
.s-02-problem {
  --s-02-problem-kante-x: calc(100% - 9px - 69px);
  --s-02-problem-kante-d: 40px;
  --oliv-pos: 70% 45%;
  /* Pfeil-Farbe der Section einmal hier auflösen: Bögen und Pfeil → stehen im Markup in den weißen Kacheln, liegen aber
     sichtbar auf der Oliv-Fläche; ohne diese Variable erbten sie das --pfeil/--z-akzent der Kachel (Rot auf Oliv) */
  --s-02-problem-pfeil: var(--pfeil, var(--z-akzent));
}
/* mobil: Box hoch und schmal, daher die hohe Ellipse mit dem Lichtpunkt oben (bauplan v11 §1, --nf-grad-olive-hoch) */
@media (max-width: 767px) {
  .s-02-problem { --oliv-pos: 50% 25%; --bg-image: var(--nf-grad-olive-hoch, var(--nf-grad-olive)); }
}
/* 2 px Überlappung nach oben: die Abschnittskante liegt oft auf einem Bruchteil-Pixel, sonst scheint Weiß als Naht durch */
.s-02-problem::before {
  content: "";
  position: absolute; left: 0; top: -2px; right: 0; z-index: 0;
  height: calc(var(--s-02-problem-kante-d) + 2px);
  background: var(--kopf-fade-end, var(--nf-kopf-fuss, var(--bg)));   /* V11-C: Endfarbe des Kopf-Fußes (vor Oliv #CBD5DF), die Kante setzt ihn fort */
  clip-path: polygon(var(--s-02-problem-kante-x) 0, 100% 0, 100% 100%, calc(var(--s-02-problem-kante-x) + var(--s-02-problem-kante-d) * 1.7320508) 100%, var(--s-02-problem-kante-x) 2px);
  pointer-events: none;
}
.s-02-problem__faden {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.s-02-problem__faden-pfad {
  fill: none;
  stroke: var(--nf-white-pure);   /* V11-C: weiß auf Oliv (Rot nur 1,2–1,9:1), der rote Schatten hält die Verbindung zum Hero */
  stroke-width: 2.75px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgb(72 12 18 / 0.55));
}
/* Ziel an der ersten Station: weißer Punkt mit Hof (V11-C, vorher rot), erscheint wenn die Linie ankommt (.is-angekommen) */
.s-02-problem__faden-ziel {
  fill: var(--nf-white-pure);
  stroke: rgb(255 255 255 / 0.22);
  stroke-width: 8px;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.s-02-problem.is-angekommen .s-02-problem__faden-ziel { opacity: 1; transform: scale(1); }
.s-02-problem:not(.has-faden) .s-02-problem__faden { display: none; }

.s-02-problem__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "kreis" "probleme" "ueberleitung";
}
.s-02-problem__kopf { grid-area: kopf; margin-bottom: 0; }
.s-02-problem__kreis { grid-area: kreis; position: relative; margin-top: 28px; }
.s-02-problem__probleme { grid-area: probleme; }
.s-02-problem__ueberleitung { grid-area: ueberleitung; }

/* Stationen mobil: Vignetten 264 px breit, mittig, etwas enger gestapelt als der Baustein */
.s-02-problem__stationen { row-gap: 50px; }
.s-02-problem__station { justify-self: center; width: min(100%, 286px); }
.s-02-problem__station .station__text { margin-top: 14px; }

/* Bogenpfeile des Dreiecks (erst ab 640 px sichtbar): Linie aus zwei Rändern mit runder Ecke, Spitze als SVG */
.s-02-problem__bogen {
  position: absolute;
  display: none;
  border: 0 solid var(--s-02-problem-pfeil);
  color: var(--s-02-problem-pfeil);
  pointer-events: none;
}
/* Pfeile → und ↓ zwischen den Stationen (base.css .station__pfeil) in der Pfeil-Farbe der Section */
.s-02-problem .station__pfeil { color: var(--s-02-problem-pfeil); }
.s-02-problem__bogen svg {
  position: absolute;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--z-pfeil);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s-02-problem__bogen path { vector-effect: non-scaling-stroke; }

/* Rückpfeil ↺ mobil unter der dritten Station: der Kreislauf beginnt von vorn */
.s-02-problem__zurueck { display: block; width: 36px; height: 36px; margin: 10px auto 0; color: var(--s-02-problem-pfeil); }
.s-02-problem__zurueck svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--z-pfeil); stroke-linecap: round; stroke-linejoin: round; }
.s-02-problem__zurueck path { vector-effect: non-scaling-stroke; }

/* Drei Probleme: Kreuz im Kreis (1 px Rand), Titel, Text */
.s-02-problem__probleme {
  display: grid;
  gap: 22px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.s-02-problem__problem {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 6px;
  align-items: start;
}
.s-02-problem__kreuz {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border: 1px solid var(--kreuz, var(--text-mute));
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--kreuz, var(--text-soft));   /* Kreuz nie rot: Rot heißt „so geht's“ (farbwelt.md §4); V11-C: Rolle statt Grau */
}
.s-02-problem__kreuz svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.s-02-problem__titel { margin: 0; color: var(--text); font: 800 var(--fs-h3)/var(--lh-h3) var(--font-sans); text-wrap: balance; }
.s-02-problem__text { margin: 0; max-width: 52ch; color: var(--text-soft); line-height: 1.6; text-wrap: pretty; }

/* Überleitung in Abschnitt 03 */
.s-02-problem__ueberleitung {
  max-width: 46ch;
  margin: 36px 0 0;
  padding-left: 18px;
  border-left: var(--z-pfeil) solid var(--line);   /* Hinweis-Balken (Rot-Budget G5); V11-C: Rolle, auf Oliv hell */
  color: var(--text);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ab 640 px: Dreieck. Oben 1 → 2 (Pfeil im Spaltenabstand), unten mittig 3; 2 → 3 und 3 → 1 als Bogen */
@media (min-width: 640px) {
  .s-02-problem__stationen {
    --station-gap: clamp(56px, 7vw, 80px);
    --s-02-problem-zeile: 44px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-02-problem-zeile) var(--station-gap);
  }
  .s-02-problem__station { width: auto; justify-self: stretch; }
  .s-02-problem__station .station__text { margin-top: 20px; }
  .s-02-problem__station--du { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--station-gap)) / 2); }
  .s-02-problem__station--kunden .station__pfeil--quer { display: block; }
  .s-02-problem__station .station__pfeil--ab,
  .s-02-problem__zurueck { display: none; }
  /* V9-A1: senkrechte Linie genau unter der Kartenmitte von 1 bzw. 2 (Rahmen von 3 + halber Spaltenabstand); vorher fest
     52 px breit und damit 20–25 px neben der Mitte */
  .s-02-problem__bogen { display: block; top: calc(8px - var(--s-02-problem-zeile)); bottom: 50%; width: calc(var(--station-gap) / 2 - 8px); }
  /* 2 → 3: unter „Mehr Nacharbeit“ herunter, dann nach links in den Rahmen von 3 */
  .s-02-problem__bogen--rein {
    left: calc(100% + 8px);
    border-width: 0 var(--z-pfeil) var(--z-pfeil) 0;
    border-bottom-right-radius: 20px;
  }
  .s-02-problem__bogen--rein svg { left: -5px; bottom: calc(-7px - var(--z-pfeil) / 2); width: 12px; height: 14px; }
  /* 3 → 1: aus dem Rahmen von 3 nach links, dann hinauf unter „Mehr Kunden“ */
  .s-02-problem__bogen--raus {
    right: calc(100% + 8px);
    border-width: 0 0 var(--z-pfeil) var(--z-pfeil);
    border-bottom-left-radius: 20px;
  }
  .s-02-problem__bogen--raus svg { top: -4px; left: calc(-7px - var(--z-pfeil) / 2); width: 14px; height: 12px; }
}

/* ab 1024 px: zwei Spalten; der Kreislauf beginnt rechts oben, direkt unter der Kante, dort landet die rote Linie */
@media (min-width: 1024px) {
  .s-02-problem {
    --s-02-problem-kante-x: 48.4%;
    --s-02-problem-kante-d: 64px;
    padding-top: calc(var(--section-y) + 16px);
  }
  .s-02-problem__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "kopf kreis"
      "probleme kreis"
      ". ueberleitung";
    column-gap: clamp(40px, 5vw, 88px);
  }
  .s-02-problem__kopf { align-self: start; }
  .s-02-problem__kreis { margin-top: 0; }
  .s-02-problem__probleme { align-self: start; margin-top: 36px; }
  .s-02-problem__ueberleitung { margin-top: 36px; }
}

/* Eintritt der Problemzeilen und der Überleitung (02-problem.js): Startzustand nur unter dem Motion-Gate,
   nur transform und clip-path; dieselben Werte stehen als „from“ im fromTo() der JS-Datei. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .s-02-problem [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* FE-2 ST-02 (entschlacken-ux.md §3.1): mobil Kreislauf kompakt in drei Spalten (Zeichnung ≈ 105 px, Titel darunter, kleine
   Pfeile), Station-Sätze nur visuell ausgeblendet (die Problemtexte darunter sagen dasselbe; Screenreader lesen sie weiter).
   Ab 640 px unverändert. */
@media (max-width: 639px) {
  .s-02-problem__stationen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
  .s-02-problem__station { justify-self: stretch; width: auto; }
  .s-02-problem__station .zeichnung-rahmen { padding: 4px 4px 2px; border-radius: 14px; }
  .s-02-problem__station .station__text { margin-top: 10px; }
  .s-02-problem__station .station__kopf { flex-direction: column; align-items: flex-start; gap: 6px; }
  .s-02-problem__station .station__nr { transform: none; }
  .s-02-problem__station .station__titel { font-size: 0.9375rem; line-height: 1.25; }
  .s-02-problem__station:not(:last-child) > .station__pfeil--ab { top: 46px; left: calc(100% + 5px); width: 8px; height: 16px; margin: 0; transform: rotate(-90deg); }
  .s-02-problem__zurueck { width: 30px; height: 30px; margin-top: 8px; }
}

/* V10-B Kreislauf mobil (Bauplan bewegung §5.9): beim Eintritt werden die Nummern nacheinander gesetzt, die Pfeile zeichnen sich
   in Leserichtung (clip-path am svg, der Span trägt schon rotate(-90deg)), der Rückpfeil schließt den Kreis. Startzustand nur unter
   .ein-bereit (core.js ein(), data-ein="mobil" am Kreis), sonst steht alles. Übergänge hängen an .is-ein, weil core.js .ein-bereit
   nach 1,6 s abnimmt und der Ablauf 2,3 s dauert. */
@media (max-width: 639px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .s-02-problem__kreis.is-ein .station__nr { transition: opacity var(--ein-setzen-dur) var(--ease-out), scale var(--ein-setzen-dur) var(--ease-out); }
  .s-02-problem__kreis.is-ein .s-02-problem__station--kunden .station__nr { transition-delay: 140ms; }
  .s-02-problem__kreis.is-ein .s-02-problem__station--nacharbeit .station__nr { transition-delay: 820ms; }
  .s-02-problem__kreis.is-ein .s-02-problem__station--du .station__nr { transition-delay: 1420ms; }
  .s-02-problem__kreis.ein-bereit:not(.is-ein) .station__pfeil--ab svg { clip-path: inset(-4px -4px 100% -4px); }
  .s-02-problem__kreis.is-ein .station__pfeil--ab svg { clip-path: inset(-4px); transition: clip-path var(--ein-strich-dur) var(--ease-in-out) 500ms; }
  .s-02-problem__kreis.is-ein .s-02-problem__station--nacharbeit > .station__pfeil--ab svg { transition-delay: 1100ms; }
  .s-02-problem__kreis.ein-bereit:not(.is-ein) .s-02-problem__zurueck svg { rotate: -140deg; opacity: 0; }
  .s-02-problem__kreis.is-ein .s-02-problem__zurueck svg { transition: rotate 600ms var(--ease-out) 1700ms, opacity 600ms var(--ease-out) 1700ms; }
}

/* ── src/sections/03-leistung.css ── */
/* 03-leistung · Namensraum .s-03-leistung
   DESIGN.md Revision 2 §5 (Muster proto-erklaer.html), Budget ≤ 4 Bildschirmhöhen Desktop, ≤ 6 mobil. Fläche nach Revision 3
   Rev. 6 (V9-A1): Weiß (data-theme="white"), Zeichnungsrahmen als graue Kacheln (Rollen --zr-*, --surface-*),
   „Das heißt für dich“ grau mit Oliv-Balken, Aufzählungspunkte und Wisch-Punkte oliv (Rot-Budget G5).
   Bausteine aus base.css: .section .section-head .pill .h2 .accent .stationen .station* .zeichnung-rahmen
   .station__original .station__lupe .station__pfeil. Hier nur die Tafel (Zeichnung + echtes Bild), die Größen der
   Bilder (≥ 180 px, Live-Call ≥ 320 px, Regel V2-B), die Marken in den Zeichnungen, die Call-Liste und „Das heißt für dich“.
   < 768 px (S1, R4.3): Stationen als wischbare Reihe (scroll-snap, eine Tafel + Anschnitt, Punkte), Reihe bis an den
             Bildschirmrand; < 640 px Zeichnung volle Breite, Bild 148 px unten rechts am Rahmen, Live-Call-Bild volle
             Breite unter der Zeichnung (≥ 320 px)
   640–1279: Tafel mit Zeichnung links und Bild rechts; 768–1023 Stationen untereinander (max. 760 px)
   ≥ 1280:   zwei Spalten × drei Reihen, Tafeln einer Reihe gleich hoch (subgrid), Pfeil → nach jeder linken Station
   V11-C (Farbwelt Rev. 7): bleibt white, die Fläche ist jetzt der zarte Weiß-Verlauf des Themes (tokens.css). */

.s-03-leistung__stationen { --orig-w: 152px; row-gap: 64px; }   /* Bild ≥ 140 px (152 − Rahmen 2 × 5) */

/* Tafel: Zeichnung und Bild. Mobil liegt das Bild wie im Baustein unten rechts am Rahmen */
.s-03-leistung__tafel { display: grid; align-items: center; }
.s-03-leistung__zeichnung { position: relative; min-width: 0; }
.s-03-leistung .s-03-leistung__original { width: var(--orig-w); }
.s-03-leistung .s-03-leistung__original img { aspect-ratio: auto; object-fit: fill; }

/* Live-Call: Ausschnitt auf die Galerie, damit die Gesichter groß genug sind (Bild 125 %, Mitte) */
.s-03-leistung__ausschnitt { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 8px; }
.s-03-leistung .s-03-leistung__ausschnitt img { position: absolute; top: 50%; left: 52.5%;   /* V9-A1: Kachelgitter liegt bei x 5–91 % des Bilds, so links und rechts gleich angeschnitten */ width: 125%; max-width: none; height: auto; aspect-ratio: 1 / 1; border-radius: 0; transform: translate(-50%, -50%); }
.s-03-leistung .s-03-leistung__station--calls .s-03-leistung__original { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 8px; }

/* Marken in der Zeichnung (HTML, nie im SVG): 13 px 800, roter Punkt 8 px */
.s-03-leistung__marke {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font: 800 0.8125rem/1 var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
}
.s-03-leistung__marke::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pfeil, var(--z-akzent)); flex: none; }   /* V11-C: Rolle --pfeil (auf Hell = --z-akzent) */
.s-03-leistung__marke--fahrplan { top: 30%; left: 60%; }
.s-03-leistung__marke--module { top: 60%; left: 4%; }
.s-03-leistung__marke--abgabe { top: 18%; left: 6%; }
.s-03-leistung__marke--feedback { top: 72%; left: 58%; }
.s-03-leistung__marke--livecall { top: 8%; left: 6%; }
.s-03-leistung__marke--du { top: 15%; left: 72%; }
.s-03-leistung__marke--rund { top: 18%; left: 14%; }
.s-03-leistung__marke--sprache { top: 30%; left: 60%; }
.s-03-leistung__marke--event { top: 8%; left: 64%; }
.s-03-leistung__marke--figur { top: 66%; left: 19%; }

/* Text: Satz, Call-Liste, „Das heißt für dich“ */
.s-03-leistung .s-03-leistung__station .station__text { align-content: start; }
.s-03-leistung__calls { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--text-soft); line-height: 1.5; }
.s-03-leistung__calls li { position: relative; padding-left: 16px; }
.s-03-leistung__calls li::before { content: ""; position: absolute; top: 0.62em; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--nf-olive); }
.s-03-leistung__calls strong { color: var(--text); font-weight: 800; }
.s-03-leistung__fazit {
  margin: 6px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--nf-olive);
  border-radius: 0 8px 8px 0;
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-wrap: pretty;
}
.s-03-leistung__fazit strong { color: var(--nf-olive-deep); font-weight: 800; }
/* Mobil ist das Fazit Fließtext (DESIGN.md §8: Text ≥ 16 px); ab 640 px bleibt es die kleine Zeile unter der Station */
@media (max-width: 639px) { .s-03-leistung__fazit { font-size: var(--fs-body); } }

/* Mobil (V9-FX1, mob-start-01): Live-Call-Karte so hoch wie die übrigen. Das Foto ist hier das Hauptbild im Format der
   Zeichnungen (360 : 280, mind. 300 px breit, Gesichter größer als vorher), die Zeichnung samt Marken liegt klein unten
   rechts am Rahmen, also genau umgekehrt wie bei den anderen fünf Tafeln (vorher Zeichnung + Foto gestapelt, ~200 px höher). */
@media (max-width: 639px) {
  .s-03-leistung__marke { font-size: 0.75rem; }
  .s-03-leistung__marke--feedback { top: 80%; left: 6%; }   /* rechts unten liegt mobil das Bild */
  .s-03-leistung .s-03-leistung__station--calls .s-03-leistung__original { order: -1; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  .s-03-leistung__station--calls .s-03-leistung__ausschnitt { aspect-ratio: 360 / 280; }
  .s-03-leistung__station--calls .s-03-leistung__original .station__lupe { top: 8px; right: 8px; bottom: auto; box-shadow: none; }
  .s-03-leistung__station--calls .s-03-leistung__zeichnung {
    position: absolute; right: 14px; bottom: -22px; z-index: 2;
    width: 150px; padding: 4px;   /* V10-D1 (mass-start-04): 128 → 150 px, Marken 10 → 12 px */
    border: 1px solid var(--hairline); border-radius: var(--radius-sm);
    background: var(--raised-bg); box-shadow: var(--raised-shadow);
  }
  .s-03-leistung__station--calls .s-03-leistung__marke { gap: 4px; font-size: 0.75rem; }
  .s-03-leistung__station--calls .s-03-leistung__marke::before { width: 6px; height: 6px; }
}

/* ab 640 px: Tafel mit Zeichnung links, Bild rechts */
@media (min-width: 640px) {
  .s-03-leistung__stationen { --orig-w: clamp(196px, 26vw, 236px); grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
  .s-03-leistung__tafel { grid-template-columns: minmax(0, 1fr) var(--orig-w); column-gap: 14px; padding: 12px 14px 12px 10px; }
  .s-03-leistung__station--calls .s-03-leistung__tafel { grid-template-columns: minmax(0, 1fr) clamp(320px, 23.6vw, 340px); }
  .s-03-leistung .s-03-leistung__original { position: relative; right: auto; bottom: auto; width: auto; margin: 0; }
  .s-03-leistung .s-03-leistung__station .station__text { margin-top: 20px; }
  .s-03-leistung .s-03-leistung__station .station__lupe { right: -6px; bottom: -6px; }
}

@media (min-width: 1280px) {
  .s-03-leistung__stationen {
    --station-gap: 48px;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    row-gap: 56px;
  }
  /* Tafeln einer Reihe gleich hoch: jede Station belegt zwei Zeilen des Rasters (Tafel, Text) */
  @supports (grid-template-rows: subgrid) {
    .s-03-leistung__stationen { grid-template-rows: repeat(6, auto); row-gap: 0; }
    .s-03-leistung__station { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
    .s-03-leistung__station:nth-child(n + 3) { margin-top: 56px; }
    .s-03-leistung__tafel { height: 100%; }
  }
}

/* 1024–1279: zwei Spalten, Tafel gestapelt wie mobil (Bild 196 px unten rechts am Rahmen, Live-Call-Bild volle
   Breite unter der Zeichnung), damit der Abschnitt auch bei Tablet quer und kleinen Laptops unter 4 Bildschirmhöhen bleibt */
@media (min-width: 1024px) and (max-width: 1279px) {
  .s-03-leistung__stationen { --station-gap: 40px; --orig-w: 196px; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--station-gap); row-gap: 64px; }
  .s-03-leistung__tafel,
  .s-03-leistung__station--calls .s-03-leistung__tafel { grid-template-columns: minmax(0, 1fr); padding: 10px 10px 6px; }
  .s-03-leistung .s-03-leistung__original { position: absolute; right: 14px; bottom: -26px; width: var(--orig-w); }
  .s-03-leistung .s-03-leistung__station--calls .s-03-leistung__original { position: relative; right: auto; bottom: auto; width: 100%; margin: 8px 0 4px; }
  .s-03-leistung .s-03-leistung__station .station__text { margin-top: 34px; }
  .s-03-leistung .s-03-leistung__station--calls .station__text { margin-top: 20px; }
  .s-03-leistung .station:not(:last-child) > .station__pfeil--ab { display: none; }
  .s-03-leistung__marke--feedback { top: 80%; left: 6%; }
  /* V9-A1 Symmetrie: Tafeln einer Reihe gleich hoch wie ab 1280 px (die Live-Call-Tafel war ~200 px höher als „Aufgaben“) */
  @supports (grid-template-rows: subgrid) {
    .s-03-leistung__stationen { grid-template-rows: repeat(6, auto); row-gap: 0; }
    .s-03-leistung__station { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
    .s-03-leistung__station:nth-child(n + 3) { margin-top: 64px; }
    .s-03-leistung__tafel { height: 100%; }
  }
}

/* V9-FX1 (desk-start-04): 1024–1279 stehen die Tafeln gestapelt wie mobil; die Live-Call-Tafel war dort 628 statt 348 px hoch
   und streckte „Aufgaben“ in derselben Reihe mit. Gleiche kompakte Fassung wie mobil: Foto als Hauptbild, Zeichnung klein
   unten rechts am Rahmen (so breit wie die Bilder der anderen Tafeln). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .s-03-leistung .s-03-leistung__station--calls .s-03-leistung__original { order: -1; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  .s-03-leistung__station--calls .s-03-leistung__ausschnitt { aspect-ratio: 360 / 280; }
  .s-03-leistung__station--calls .s-03-leistung__original .station__lupe { top: 8px; right: 8px; bottom: auto; box-shadow: none; }
  .s-03-leistung__station--calls .s-03-leistung__zeichnung {
    position: absolute; right: 14px; bottom: -26px; z-index: 2;
    width: var(--orig-w); padding: 4px;
    border: 1px solid var(--hairline); border-radius: var(--radius-sm);
    background: var(--raised-bg); box-shadow: var(--raised-shadow);
  }
  .s-03-leistung .s-03-leistung__station--calls .station__text { margin-top: 34px; }
  .s-03-leistung__station--calls .s-03-leistung__marke { gap: 4px; font-size: 0.6875rem; }
  .s-03-leistung__station--calls .s-03-leistung__marke::before { width: 6px; height: 6px; }
}

/* Pfeile: base.css zeigt --quer ab 1024 px nach jeder Station außer der 3. (Raster 3 × 2). 03 steht ab 1024 px im
   Raster 2 × 3: Pfeil nur nach der linken Station jeder Reihe (1→2, 3→4, 5→6), zwischen den Reihen führt die
   Nummerierung. Die Einblend-Regel braucht dieselbe Spezifität wie die Ausblend-Regel und steht danach (V2-I: vorher
   gewann die Ausblend-Regel, sichtbar war nur 3→4). */
@media (min-width: 1024px) {
  .s-03-leistung .station:not(:last-child):not(:nth-child(3n)) .station__pfeil--quer { display: none; }
  .s-03-leistung .station:nth-child(odd):not(:last-child) .station__pfeil--quer { display: block; }
}
/* V9-A1: nur bis 1023 px (eine Spalte); vorher überstimmte diese Regel das Ausblenden im Raster 2 × 3 bei 1024–1279 px,
   dort zeigten ↓-Pfeile von 02 auf 04 und unter 05 ins Leere */
@media (min-width: 640px) and (max-width: 1023px) {
  .s-03-leistung .station:not(:last-child) > .station__pfeil--ab { display: block; top: calc(100% + 14px); }
}
@media (min-width: 1280px) {
  .s-03-leistung .station:not(:last-child) > .station__pfeil--ab { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .s-03-leistung .s-03-leistung__original:hover { transform: translateY(-2px); }
}

/* Punkte der mobilen Reihe: nur < 768 px und mit JS (03-leistung.js setzt aria-current); Ziel 30 px, Punkt 8 px */
.s-03-leistung__punkte { display: none; }
.s-03-leistung__punkt {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
}
.s-03-leistung__punkt::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgb(38 51 42 / 0.55);
  transition: width var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.s-03-leistung__punkt[aria-current="true"]::before { width: 22px; background: var(--nf-olive-deep); }   /* aktiv olive-deep (farbwelt.md §4) */
.s-03-leistung__punkt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

/* < 768 px: wischbare Reihe. Der Scroller hat keinen Innenabstand (100cqw = volle Breite), den Rand trägt die Liste
   (max-content), damit die letzte Tafel ganz einrastet. Tafel = volle Breite − 20 px (höchstens 560 px), damit die
   nächste anschneidet und das Live-Call-Bild ≥ 320 px bleibt. Pfeile ↓ entfallen, die Nummern führen. */
@media (max-width: 767px) {
  .s-03-leistung__scroller {
    position: relative;
    container-type: inline-size;
    margin-inline: calc(-1 * var(--gutter));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .s-03-leistung__scroller::-webkit-scrollbar { display: none; }
  .s-03-leistung__scroller:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-md); }
  .s-03-leistung .s-03-leistung__stationen {   /* doppelte Klasse: base.css ol[class] { padding: 0 } */
    display: flex;
    gap: 12px;
    width: max-content;
    max-width: none;
    margin: 0;
    padding: 4px var(--gutter) 6px;
  }
  .s-03-leistung__station { flex: 0 0 min(560px, calc(100cqw - 2 * var(--gutter) - 20px)); scroll-snap-align: start; }
  /* V10-P: die Reihe ist so hoch wie die höchste Tafel und bleibt es beim Wischen (vorher folgte die Höhe per JS der
     sichtbaren Tafel, der Abschnitt sprang bis 127 px); jede Tafel behält ihre eigene Höhe, unter kurzen bleibt Weiß */
  @media (scripting: enabled) {
    .s-03-leistung__scroller { overflow-y: hidden; }
    .s-03-leistung .s-03-leistung__stationen { align-items: flex-start; }
  }
  .s-03-leistung .station:not(:last-child) > .station__pfeil--ab { display: none; }
  .s-03-leistung .s-03-leistung__station--calls .s-03-leistung__tafel { padding: 6px 6px 4px; }
  /* Punkte über der Reihe (die Live-Call-Tafel bestimmt die Höhe; darunter stünden sie bei kurzen Tafeln weit ab) */
  .s-03-leistung__punkte { display: flex; gap: 2px; margin: -18px 0 8px -4px; }
}
@media (max-width: 767px) and (scripting: none) {
  .s-03-leistung__scroller { scrollbar-width: thin; scrollbar-color: rgb(38 51 42 / 0.35) transparent; }
  .s-03-leistung__scroller::-webkit-scrollbar { display: initial; }
  .s-03-leistung__punkte { display: none; }
}

/* Eintritt der Stationstexte (03-leistung.js): Startzustand nur unter dem Motion-Gate, nur transform und clip-path;
   dieselben Werte stehen als „from“ im fromTo() der JS-Datei. Die Zeichnungen baut core.js selbst auf. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .s-03-leistung [data-motion] {
    transform: translate3d(0, 16px, 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* FE-2: Punkte mobil mit 44-px-Trefferfläche (vorher 30 px); die sichtbaren Punkte bleiben 8 px, die Reihe rückt nach links,
   damit der erste Punkt an der Textkante bleibt. Fokus-Karte der Wischreihe per data-wisch (core.js, M5). */
@media (max-width: 767px) {
  .s-03-leistung__punkt { width: 44px; height: 44px; }
  .s-03-leistung__punkte { gap: 0; margin: -24px 0 2px -18px; }
}

/* ── src/sections/04-inhalte.css ── */
/* 04-inhalte · Namensraum .s-04-inhalte
   DESIGN.md Revision 2 §5: keine Pille, Budget ≤ 2,6 Bildschirmhöhen Desktop. Fläche nach Revision 3 (farbwelt.md §3.1/§4):
   Rev. 6 (V9-A1): Grau (data-theme="grey"), der Bauplan steht als weiße Karte darauf (Standbild und 3D-Szene haben
   Papierweiß eingebacken); Nummern, aktive Bauphase und Leiste oliv (aktiv olive-deep mit Weiß), Rot nur im Laptop-Weg.
   Bausteine aus base.css: .section .section-head .h2 .accent .lead. Hier: Raster, Szene (Standbild + Canvas aus
   04-inhalte.js), Raumnummern, Liste der Bauphasen mit aktivem Eintrag, mobile Leiste, Laptop mit echtem Screen.
   < 1024: Kopf · Szene (6 : 5, nicht sticky) · [mit JS: Leiste + aktive Bauphase | ohne: ganze Liste] · Laptop
   < 1024 mit .has-buehne (V10-A2, 04-inhalte.js, nur 3D-fähige Geräte): Szene 4 : 3 klebt oben (sticky, top 8 px, kein Pin),
           alle sechs Bauphasen kompakt darunter, ohne Leiste; die Bauphase an der Linie unter der Bühne ist aktiv
   ≥ 1024: links die Szene (quadratisch, sticky unter dem Header für die Höhe der Liste), rechts Liste und Laptop
   V11-C (Farbwelt Rev. 7, bauplan v11 §1): Fläche olive-light (Verlauf 165°, Hell-Oliv nach #E7ECF0). Die Szene trägt
   data-theme="white" und bleibt flach reinweiß mit Haarlinie und weichem Schatten (Papierweiß im Standbild, keine Naht).
   Lupen-Ring liest weiter --bg (#EEEFEB, sitzt auf dem Laptop, nicht auf der Fläche). Mobile Sticky-Bühne: --bg wich zum
   Verlaufsende #E7ECF0 um 1,03:1 ab (an der Unterkante sichtbar), daher Mittelton und weicher Auslauf (Regel unten). */

.s-04-inhalte { --h-winkel: 165deg; }

.s-04-inhalte__kopf { max-width: none; }
.s-04-inhalte__raster { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.s-04-inhalte__buehne { min-width: 0; }

/* Szene: Standbild als Grundzustand, darüber das Canvas, sobald es gezeichnet hat (.is-3d) */
.s-04-inhalte__szene {
  position: relative; width: 100%; max-width: 620px; margin-inline: auto; aspect-ratio: 6 / 5;
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-lg);
  background: var(--nf-white-pure);   /* V11-C: flach reinweiß wie das Papierweiß des Standbilds (white-Kachel wäre #F5F6F7) */
  box-shadow: var(--nf-shadow-soft);
}
.s-04-inhalte__standbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 420ms var(--ease-out); }
.s-04-inhalte__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 420ms var(--ease-out); }
.s-04-inhalte__szene.is-3d .s-04-inhalte__gl { opacity: 1; }
.s-04-inhalte__szene.is-3d .s-04-inhalte__standbild { opacity: 0; }

/* Raumnummern (nur mit 3D; Position setzt das JS nach jedem Frame) */
.s-04-inhalte__marke {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--nf-line-soft-strong);
  border-radius: 50%;
  background: var(--nf-white-pure);
  color: var(--text);
  font: 800 0.8125rem/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 14px -8px rgb(38 51 42 / 0.45);
  pointer-events: none;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.s-04-inhalte__szene.is-3d .s-04-inhalte__marke.is-shown { display: grid; }
.s-04-inhalte__marke.is-active { border-color: transparent; background: var(--nf-olive-deep); color: var(--nf-white-pure); }

/* Leiste (mobil, nur mit JS): sechs Knöpfe, waagerecht wischbar */
.s-04-inhalte__leiste { display: none; }
@media (max-width: 1023px) {
.s-04-inhalte.is-live .s-04-inhalte__leiste {
  display: flex;
  gap: 8px;
  margin: 4px calc(-1 * var(--gutter)) 0;
  padding: 4px var(--gutter) 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.s-04-inhalte.is-live .s-04-inhalte__leiste::-webkit-scrollbar { display: none; }
}
.s-04-inhalte__knopf {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 8px;
  border: 1px solid var(--nf-line-soft-strong);
  border-radius: var(--radius-pill);
  background: var(--nf-white-pure);
  color: var(--text);
  font: 800 0.875rem/1 var(--font-sans);
  white-space: nowrap;
  scroll-snap-align: start;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.s-04-inhalte__knopf-nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nf-tint-olive); color: var(--nf-olive-deep); font-variant-numeric: tabular-nums; }
.s-04-inhalte__knopf[aria-pressed="true"] { border-color: transparent; background: var(--nf-olive-deep); color: var(--nf-white-pure); }
.s-04-inhalte__knopf[aria-pressed="true"] .s-04-inhalte__knopf-nr { background: rgb(255 255 255 / 0.16); color: var(--nf-white-pure); }
.s-04-inhalte__knopf:focus-visible, .s-04-inhalte__wahl:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.s-04-inhalte__knopf:active { transform: scale(0.97); }

/* Liste der Bauphasen */
.s-04-inhalte__liste { min-width: 0; }
.s-04-inhalte__phasen { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.s-04-inhalte__phase {
  padding: 12px 16px 16px 14px;
  border-left: 3px solid var(--nf-line-soft-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.s-04-inhalte__phase[aria-current] { border-left-color: var(--nf-olive-deep); background: var(--surface-card); }   /* Kachel grey-50 wie auf white üblich, ohne Schatten */
.s-04-inhalte__titel { margin: 0; }
.s-04-inhalte__wahl {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: 800 var(--fs-h3)/var(--lh-h3) var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.s-04-inhalte__nr {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--nf-olive);
  border-radius: 50%;
  color: var(--nf-olive-deep);
  font: 800 0.9375rem/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  transition: background-color 320ms var(--ease-out), color 320ms var(--ease-out);
}
.s-04-inhalte__phase[aria-current] .s-04-inhalte__nr { border-color: transparent; background: var(--nf-olive-deep); color: var(--nf-white-pure); }
.s-04-inhalte__trenner { display: none; }
.s-04-inhalte__satz { margin: 4px 0 0 44px; color: var(--text-soft); line-height: 1.55; text-wrap: pretty; }
.s-04-inhalte__themen { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 44px; padding: 0; list-style: none; }
.s-04-inhalte__themen li {
  padding: 6px 10px 5px;
  border: 1px solid var(--nf-line-soft-strong);
  border-radius: var(--radius-pill);
  background: var(--nf-white-pure);
  color: var(--text);
  font: 600 0.8125rem/1.25 var(--font-sans);
}
.s-04-inhalte__notiz { margin: 10px 0 0 44px; color: var(--text-mute); font-size: var(--fs-small); line-height: 1.5; }

/* Mobil mit JS: nur die aktive Bauphase (die Leiste darüber wählt) */
@media (max-width: 1023px) {
  .s-04-inhalte.is-live:not(.has-buehne) .s-04-inhalte__phase:not([aria-current]) { display: none; }
  .s-04-inhalte.is-live:not(.has-buehne) .s-04-inhalte__phase { border-left-color: var(--nf-olive-deep); }
}

/* V10-A2 · Mobil „Bühne klebt, Liste schaltet“ (bewegung-bauplan.md §3 Muster 6, §5.1 Variante A). Nur mit .has-buehne,
   also nie ohne JS, bei reduced-motion oder auf Geräten ohne 3D. Das Raster wird Block (Sticky-Vorfahre ohne Grid-Fläche);
   die Bühne trägt den Grund des Abschnitts, damit die Liste nicht durchscheint, und liegt unter dem Header (--z-header 30).
   Alle Karten behalten Satz und Chips, damit sich beim Wechsel keine Höhe ändert (sonst springt die Liste). */
@media (max-width: 1023px) {
  .s-04-inhalte.has-buehne .s-04-inhalte__raster { display: block; }
  .s-04-inhalte.has-buehne .s-04-inhalte__buehne {
    position: sticky;
    top: 8px;
    z-index: 3;
    margin-inline: calc(-1 * var(--gutter));
    padding: 8px var(--gutter) 10px;
    background: var(--bg);
    /* V11-C: die Fläche ist ein Verlauf (#EEEFEB nach #E7ECF0), die Bühne wandert darin: Mittelton beider Stopps (Abweichung
       höchstens 1,015:1) und unten 12 px Auslauf statt harter Kante, die Liste taucht weich darunter ab */
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 50%, var(--nf-grey-100)) calc(100% - 12px), transparent);
    margin-bottom: var(--s04-ende, 0px);
  }
  .s-04-inhalte.has-buehne .s-04-inhalte__szene { width: min(100%, calc(30svh * 4 / 3)); aspect-ratio: 4 / 3; }
  .s-04-inhalte.has-buehne .s-04-inhalte__leiste { display: none; }
  /* V10-P: Bühne klebt nur über den sechs Bauphasen, nicht über dem Laptop. --s04-ende (04-inhalte.js) = Abstand vom
     Ende der Bauphasen bis zum Rasterende; die Bühne trägt ihn als margin-bottom (sticky hält den Rand im Raster, löst
     sich also am Listenende), die Liste zieht ihn als negativen margin-top ab. Die Ränder fallen zusammen (12 px wie
     vorher), der Fluss bleibt gleich: kein HTML-Umbau, kein Layoutsprung, Desktop unberührt. */
  .s-04-inhalte.has-buehne .s-04-inhalte__liste { margin-top: calc(12px - var(--s04-ende, 0px)); }
  .s-04-inhalte.has-buehne .s-04-inhalte__phasen { grid-template-columns: minmax(0, 1fr); gap: 3px; }   /* minmax: sonst weitet die Chip-Reihe die Spalte */
  .s-04-inhalte.has-buehne .s-04-inhalte__phase {
    min-width: 0;
    padding: 6px 12px 8px;
    scale: 0.97;
    transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out), scale 320ms var(--ease-out);
  }
  .s-04-inhalte.has-buehne .s-04-inhalte__phase[aria-current] { scale: 1; }
  .s-04-inhalte.has-buehne .s-04-inhalte__satz { margin-top: 0; line-height: 1.5; }
  /* Chips einzeilig (Höhenbudget ≤ 2,4 Bildschirmhöhen): die Reihe läuft bis an die Kartenkante und ist waagerecht
     wischbar; was nicht passt, blendet am rechten Rand aus (Maske, keine Bewegung) */
  .s-04-inhalte.has-buehne .s-04-inhalte__themen {
    flex-wrap: nowrap;
    gap: 5px;
    margin: 8px -12px 0 0;
    padding-right: 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .s-04-inhalte.has-buehne .s-04-inhalte__themen::-webkit-scrollbar { display: none; }
  .s-04-inhalte.has-buehne .s-04-inhalte__themen li { flex: none; padding: 4px 9px 3px; font-size: 0.75rem; white-space: nowrap; }
  .s-04-inhalte.has-buehne .s-04-inhalte__notiz { margin-top: 8px; }
  .s-04-inhalte.has-buehne .s-04-inhalte__geraet { margin-top: 20px; }
}
@media (max-width: 639px) {
  .s-04-inhalte__satz, .s-04-inhalte__themen, .s-04-inhalte__notiz { margin-left: 0; }
  .s-04-inhalte__phase { padding: 12px 12px 14px; }
}

/* Laptop mit echtem Plattform-Screen: Rezept aus src/zeichnungen/README.md (Ecken 161.1/30.4 … 283.2/177.6) */
.s-04-inhalte__geraet { margin: 28px auto 0; max-width: 560px; }
.s-04-inhalte__laptop { position: relative; display: block; color: inherit; }
.s-04-inhalte__laptop .zeichnung { display: block; width: 100%; height: auto; }
.s-04-inhalte__screen {
  position: absolute;
  top: 10.857%;
  left: 44.75%;
  width: 33.917%;
  height: 27.393%;
  object-fit: fill;
  transform: skewY(30deg);
  transform-origin: 0 0;
}
.s-04-inhalte__lupe {
  position: absolute;
  top: 58%;
  left: 76%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--nr-bg);   /* wie .station__lupe: oliv auf Hell (Rot-Budget G5) */
  color: var(--nr-text);
  box-shadow: 0 0 0 3px var(--bg);
}
.s-04-inhalte__lupe svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.s-04-inhalte__laptop:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-md); }
.s-04-inhalte__unterzeile { margin-top: -6px; color: var(--text-mute); font-size: var(--fs-small); text-align: center; }

@media (hover: hover) and (pointer: fine) {
  .s-04-inhalte__wahl:hover .s-04-inhalte__nr { background: var(--nf-tint-olive); }
  .s-04-inhalte__phase[aria-current] .s-04-inhalte__wahl:hover .s-04-inhalte__nr { background: var(--nf-olive-deep); }
  .s-04-inhalte__knopf:hover { border-color: var(--nf-olive); }
}

@media (min-width: 1024px) {
  .s-04-inhalte__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 4.5vw, 72px); align-items: start; }
  .s-04-inhalte__buehne { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
  .s-04-inhalte__szene { max-width: min(100%, calc(100svh - var(--header-h) - 64px)); aspect-ratio: 1 / 1; }
  .s-04-inhalte__liste { padding-top: 4px; }
  .s-04-inhalte__geraet { margin-top: 24px; max-width: none; }
}
/* 1024–1279 px: Listen-Spalte breiter, damit der echte Plattform-Screen im Laptop ≥ 180 px bleibt (Screen = 33,917 %
   der Laptopbreite; bei 1:1 wären es 150 px bei 1024). Ab 1280 px reicht die halbe Breite. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .s-04-inhalte__raster { grid-template-columns: minmax(0, 0.64fr) minmax(0, 1fr); }
}

/* Mobil: Laptop größer als die Spalte, links angeschnitten, damit der echte Screen ≥ 140 px breit bleibt
   (Screen = 33,917 % der Laptopbreite, linke Kante bei 44,75 %; der Screen steht mittig in der Spalte) */
@media (max-width: 639px) {
  /* V9-FX1 (mob-start-05): die Figur reicht bis an den Bildschirmrand, so liegt der Anschnitt am Rand statt als harte
     Kante in der Spalte, und die Pille „7 Bilder“ bleibt auch bei 320 px ganz sichtbar; die Unterzeile rückt zurück */
  .s-04-inhalte__geraet { overflow: hidden; margin-inline: calc(-1 * var(--gutter)); }
  .s-04-inhalte__unterzeile { padding-inline: var(--gutter); }
  .s-04-inhalte__laptop { width: 440px; margin-left: calc((100% - 149px) / 2 - 197px); }
}

/* Der echte Screen erscheint mit dem Aufbau des Laptops (core.js: .is-bereit ohne .is-sichtbar = noch versteckt) */
.s-04-inhalte__screen { transition: opacity 420ms var(--ease-out) 360ms; }
.s-04-inhalte__laptop .zeichnung.is-bereit:not(.is-sichtbar) ~ .s-04-inhalte__screen { opacity: 0; transition: none; }

/* ───── R6-G · Galerie „Ein Blick in die Lernplattform“ ─────
   Badge am Laptop: bleibt der runde 32-px-Knopf an derselben Stelle; mit gebundener Galerie (.is-galerie, 04-inhalte.js)
   wächst er nach rechts zur Pille „7 Bilder“. Ohne JS bleibt er rund (der Link öffnet dann nur die Bilddatei). */
.s-04-inhalte__lupe-zahl { display: none; }
.s-04-inhalte__geraet.is-galerie .s-04-inhalte__lupe { display: inline-flex; gap: 6px; width: auto; padding: 0 12px 0 9px; font: 800 0.8125rem/1 var(--font-sans); white-space: nowrap; }
.s-04-inhalte__geraet.is-galerie .s-04-inhalte__lupe-zahl { display: inline; }

/* Dialog: Desktop Karte min(96vw, 1200px) mit fester Bühne (kein Springen zwischen Quadrat, Quer- und Hochformat),
   Pfeile links/rechts neben der Bühne, Zähler oben rechts, Unterschrift unter der Bühne. ≤ 639 px Vollbild mit
   Safe-Area, Pfeile und Zähler in der unteren Zeile. Farben aus den --nf-Token. Rev. 6 (V9-A1): Fenster neutral dunkel
   (ink-2, kein Oliv-Stich), Abdunkler neutral; die Screens sind dunkle Bilder und brauchen den dunklen Grund. */
.s-04-inhalte__galerie {
  width: min(96vw, 1200px);
  max-width: none;
  max-height: 96dvh;
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius-lg);
  background: var(--nf-ink-2);
  color: var(--nf-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 32px 80px -24px rgb(8 8 10 / 0.6);
}
.s-04-inhalte__galerie::backdrop { background: rgb(8 8 10 / 0.8); }
/* Klickt man in den Dialog (Bild, Fläche), fokussiert Chrome den Dialog selbst; er ist kein Bedienelement, also kein Ring */
.s-04-inhalte__galerie:focus-visible { outline: none; }
.s-04-inhalte__galerie-rahmen {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 60px;
  grid-template-areas: "titel titel titel" "zurueck buehne weiter" ". text .";
  align-items: center;
  padding: 16px 0 18px;
}
.s-04-inhalte__galerie-titel { grid-area: titel; min-height: 44px; margin: 0 0 12px; padding: 0 128px 0 60px; display: flex; align-items: center; color: var(--nf-text); font: 800 1rem/1.3 var(--font-sans); }
.s-04-inhalte__galerie-zahl {
  grid-area: titel;
  justify-self: end;
  align-self: start;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0 72px 12px 0;
  color: var(--nf-text-soft);
  font: 700 0.9375rem/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.s-04-inhalte__galerie-zu { top: 16px; right: 16px; }
.s-04-inhalte__galerie-buehne {
  grid-area: buehne;
  position: relative;
  height: min(74dvh, 760px, calc(96dvh - 170px));
  min-height: 200px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: rgb(5 5 6 / 0.34);
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}
.s-04-inhalte__galerie-bild { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.s-04-inhalte__galerie-text {
  grid-area: text;
  min-height: 3em;
  margin: 14px 0 0;
  color: var(--nf-text-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.s-04-inhalte__galerie-name { color: var(--nf-text); font-weight: 800; }
.s-04-inhalte__galerie-name::after { content: " ·"; color: var(--nf-text-mute); font-weight: 400; }
.s-04-inhalte__galerie-pfeil,
.s-04-inhalte__galerie-lupe {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--nf-line-strong);
  border-radius: var(--radius-pill);
  background: rgb(241 237 232 / 0.06);
  color: var(--nf-cream);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.s-04-inhalte__galerie-pfeil { justify-self: center; }
.s-04-inhalte__galerie-pfeil--zurueck { grid-area: zurueck; }
.s-04-inhalte__galerie-pfeil--weiter { grid-area: weiter; }
.s-04-inhalte__galerie-pfeil svg, .s-04-inhalte__galerie-lupe svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-04-inhalte__galerie-pfeil:active, .s-04-inhalte__galerie-lupe:active { transform: scale(0.97); }
.s-04-inhalte__galerie-pfeil:focus-visible, .s-04-inhalte__galerie-lupe:focus-visible { outline: 2px solid var(--nf-text); outline-offset: 3px; }   /* hell auf ink-2 (V7-FIX-R1, Rev. 6 ohne Oliv) */
@media (hover: hover) and (pointer: fine) {
  .s-04-inhalte__galerie-pfeil:hover { border-color: rgb(241 237 232 / 0.4); background-color: rgb(241 237 232 / 0.12); }
}
/* Zoom (nur ≤ 639 px): Tippen aufs Bild oder der Lupen-Knopf (liegt als Geschwister über der Bühne, scrollt nicht mit)
   zeigt es größer, die Bühne scrollt dann in beide Richtungen (Breite/Höhe setzt das JS per CSSOM); Wischen blättert nur
   ohne Zoom. */
.s-04-inhalte__galerie-lupe { display: none; grid-area: buehne; justify-self: end; align-self: end; z-index: 1; margin: 0 10px 10px 0; background: rgb(24 24 24 / 0.78); }
/* gedrückt = Zustand, keine Handlung: neutral Weiß mit Tinte, nicht rot (Rot-Budget G5, V7-FIX-R1) */
.s-04-inhalte__galerie-lupe[aria-pressed="true"] { border-color: transparent; background: var(--nf-white-pure); color: var(--nf-ink); }
.s-04-inhalte__galerie-buehne.is-zoom { overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
.s-04-inhalte__galerie-buehne.is-zoom { display: grid; }
.s-04-inhalte__galerie-buehne.is-zoom .s-04-inhalte__galerie-bild { max-width: none; max-height: none; margin: auto; object-fit: fill; }
/* Lädt ein Bild noch, bleibt die Bühne leer statt das vorige Bild unter der neuen Unterschrift zu zeigen */
.s-04-inhalte__galerie-bild.is-laedt { opacity: 0; }

/* Wechsel: neues Bild kommt 28 px aus der Blätterrichtung (nur ohne reduced-motion; Wischen folgt dem Finger per CSSOM) */
@media (prefers-reduced-motion: no-preference) {
  .s-04-inhalte__galerie[open] { animation: s-04-inhalte-galerie-auf var(--dur-ui) var(--ease-out); }
  .s-04-inhalte__galerie[open]::backdrop { animation: s-04-inhalte-galerie-grund var(--dur-ui) var(--ease-out); }
  .s-04-inhalte__galerie-bild.is-rein-weiter { animation: s-04-inhalte-galerie-weiter 240ms var(--ease-out); }
  .s-04-inhalte__galerie-bild.is-rein-zurueck { animation: s-04-inhalte-galerie-zurueck 240ms var(--ease-out); }
  .s-04-inhalte__galerie-bild.is-schnappen { transition: transform 200ms var(--ease-out); }
}
@keyframes s-04-inhalte-galerie-auf { from { opacity: 0; transform: scale(0.98); } }
@keyframes s-04-inhalte-galerie-grund { from { opacity: 0; } }
@keyframes s-04-inhalte-galerie-weiter { from { opacity: 0; transform: translateX(28px); } }
@keyframes s-04-inhalte-galerie-zurueck { from { opacity: 0; transform: translateX(-28px); } }

@media (max-width: 639px) {
  .s-04-inhalte__galerie {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .s-04-inhalte__galerie-rahmen {
    height: 100%;
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "titel titel titel" "buehne buehne buehne" "text text text" "zurueck zahl weiter";
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .s-04-inhalte__galerie-titel { margin-bottom: 10px; padding: 0 56px 0 4px; font-size: 0.9375rem; }
  .s-04-inhalte__galerie-zu { top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
  .s-04-inhalte__galerie-buehne { height: auto; min-height: 0; align-self: stretch; border-radius: var(--radius-sm); }
  .s-04-inhalte__galerie-text { min-height: 4.5em; margin-top: 12px; padding: 0 4px; font-size: 0.875rem; }
  .s-04-inhalte__galerie-zahl { grid-area: zahl; justify-self: center; align-self: center; margin: 8px 0 0; }
  .s-04-inhalte__galerie-pfeil { margin-top: 8px; }
  .s-04-inhalte__galerie-lupe { display: grid; }
}

/* ── src/sections/05-ergebnisse.css ── */
/* 05-ergebnisse · Namensraum .s-05-ergebnisse · Teaser für /ergebnisse (Slice V5-PL)
   V9 / Farbwelt Revision 6: Fläche white (data-theme="white"), keine Oliv-Fläche, kein Glas. Rahmen der Poster und Superplayer-Karten
   weiß mit Haarlinie und weichem Schatten, Hinweis und Zitatkarte graue Kacheln, Oliv nur an Pfeilen, Punkten und Pause-Knopf. S1 (Plan-Revision 4, R4.3): Ziel ≤ 2,6 Bildschirmhöhen am Desktop, ≤ 4 mobil.
   Bausteine aus base.css: .section .section-head .pill .h2 .accent .lead .frame .frame--sm .consent .rating .zeichnung-rahmen
   .visually-hidden .link-arrow. Hier nur: Kopf mit Treppe und Marken, Video-Slider (Play-Bauteil aus base.css), waagerechte
   Superplayer-Reihe mit scroll-snap, Steuerung (Zähler, Punkte, Pfeile, Pause), Hinweis, Google-Block, Link auf /ergebnisse.
   Video-Slider: mobil 1 Karte + Anschnitt (Reihe bis an den Bildschirmrand), ab 768 px genau 2 Karten.
   < 768 px: alles untereinander · ab 768 px Google-Block quer (Bewertung | Zitat) · ab 1024 px Kopf zweispaltig ·
   ab 1280 px Google-Block (Restbreite) neben dem Link. Die Hall of Fame steht auf /ergebnisse (.pg-ergebnisse-03-superplayer).
   Farben nur über die Rollen des Themes white (text, hairline, surface-card, btn2, focus-ring); Rot nur in der Zeichnung und am Play-Knopf. */

/* V11-C (Farbwelt Rev. 7, Regel 1 + 6): bleibt Weiß (Adrian 01.10.), nur ganz zart ins Hellgrau der Referenz auslaufend;
   flacher Rückfall wäre --bg-image: none. Poster, Play-Knopf, Rahmen und Superplayer unberührt. */
.s-05-ergebnisse { --bg-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 78%, #F5F6F7 100%); }
.s-05-ergebnisse { --s05-gap: 16px; --s05-punkt: var(--nf-olive); --s05-schatten: 0 1px 2px rgb(8 8 10 / .05), 0 6px 14px -6px rgb(8 8 10 / .16); }   /* neutral, reicht 8 px zur Seite, 14 px nach unten */
/* inaktiver Punkt: Oliv zu 80 % auf Weiß (3,76:1), der aktive ist breit und olive-deep */
@supports (color: color-mix(in srgb, red, blue)) {
  .s-05-ergebnisse { --s05-punkt: color-mix(in srgb, var(--nf-olive) 80%, var(--nf-white-pure)); }
}

/* Rahmen der Video-Poster und Superplayer-Karten (die Bilder selbst bleiben dunkel): weiße Karte mit Haarlinie, weicher Schatten,
   Radius 20 px wie die Karten der Seite (Bild innen 14 px). Doppelte Klasse schlägt .frame--sm (Radius 20, Rand 6) aus base.css. */
.s-05-ergebnisse .frame {
  --radius-lg: var(--radius-md);
  --frame-pad: 6px;
  border: 1px solid var(--nf-grey-100);
  background: var(--nf-white-pure);
  box-shadow: var(--s05-schatten);
}

/* Kopf: Pille, H2, Lead · Treppe mit den Marken „Start“ und „Heute“ */
.s-05-ergebnisse__kopf { display: grid; gap: 24px; margin-bottom: var(--section-head-gap); }
.s-05-ergebnisse__head { margin-bottom: 0; }
.s-05-ergebnisse__treppe { justify-self: center; width: min(100%, 360px); }
.s-05-ergebnisse__treppe-bild { position: relative; }
.s-05-ergebnisse__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;
}
.s-05-ergebnisse__marke::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--pfeil, var(--z-akzent));   /* V11-C: Rolle --pfeil (auf Hell = --z-akzent) */
  box-shadow: 0 0 0 3px var(--z-akzent-flaeche);   /* Ring in der hellen Akzentfläche statt Glow (Rot-Budget G5) */
}
/* Anfang des Weges vor der untersten Stufe (107.5 | 205.9 von 360 × 280): Text links vom Punkt */
.s-05-ergebnisse__marke--start { left: 29.86%; top: 73.54%; flex-direction: row-reverse; transform: translate(calc(-100% + 4px), -50%); }
/* Spitze der Fahne (248 | 36.6): Text links vom Punkt, die Fahne weht nach rechts */
.s-05-ergebnisse__marke--heute { left: 68.89%; top: 13.07%; flex-direction: row-reverse; transform: translate(calc(-100% + 4px), -50%); }

/* Video-Slider: der Scroller hat keinen Innenabstand (100cqw = seine volle Breite), den Rand trägt die Liste
   (max-content), damit die letzte Karte vollständig einrastet. Scrollbar nur ohne JS sichtbar (dann ohne Steuerung). */
.s-05-ergebnisse__vslider { --s05-rand: var(--gutter); --s05-vgap: 12px; }
.s-05-ergebnisse__vscroller {
  position: relative;
  container-type: inline-size;
  margin-inline: calc(-1 * var(--s05-rand));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--s05-rand);
  scrollbar-width: thin;
  scrollbar-color: var(--nf-olive) transparent;
}
@media (scripting: enabled) {
  .s-05-ergebnisse__vscroller { scrollbar-width: none; }
  .s-05-ergebnisse__vscroller::-webkit-scrollbar { display: none; }
}
.s-05-ergebnisse__vscroller: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 */
.s-05-ergebnisse .s-05-ergebnisse__videos {
  display: flex;
  gap: var(--s05-vgap);
  width: max-content;
  margin: 0;
  padding: 4px var(--s05-rand) 6px;
  list-style: none;
}
.s-05-ergebnisse__video {
  display: grid;
  flex: 0 0 calc(100cqw - 2 * var(--s05-rand) - 24px);
  align-content: start;
  gap: 16px;
  min-width: 0;
  scroll-snap-align: start;
}
/* Poster 16 : 9 wie der Wistia-Player (kein Balken nach dem Start); Ausschnitt weit oben (die Stills sind 3 : 2), damit Köpfe Luft behalten */
.s-05-ergebnisse__poster { --consent-ratio: 1.7778; }
.s-05-ergebnisse__poster .consent__poster { object-position: 50% 8%; }
.s-05-ergebnisse__video:nth-child(2) .s-05-ergebnisse__poster .consent__poster { object-position: 50% 0%; }   /* Stöhrmann: Haaransatz liegt nahe am Bildrand */
.s-05-ergebnisse__vtext { display: grid; gap: 10px; }   /* Text auf der Achse der Karte (und der Überschrift) */
.s-05-ergebnisse__wer { display: grid; justify-items: start; gap: 2px; margin: 0; line-height: 1.35; }   /* V9-A1: Firma immer eigene Zeile, sonst springen Titel/Zitat je nach Namenslänge (768: 21 px Versatz) */
.s-05-ergebnisse__name { color: var(--text); font-weight: 800; }
.s-05-ergebnisse__firma { color: var(--text-mute); font-size: var(--fs-small); }
.s-05-ergebnisse__ergebnis {
  margin: 0;
  color: var(--text);
  font: 800 clamp(1.25rem, 1.05rem + .6vw, 1.5rem)/1.2 var(--font-sans);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.s-05-ergebnisse__zitat { margin: 0; }
.s-05-ergebnisse__zitat p,
.s-05-ergebnisse__stimme 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;
}
/* Superplayer-Reihe: Kopf mit Pfeilknöpfen, Scroller mit Einrasten */
.s-05-ergebnisse__sp { margin-top: clamp(48px, 4.5vw, 64px); }
.s-05-ergebnisse__sp-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; }
.s-05-ergebnisse__sp-text { display: grid; gap: 8px; max-width: 46rem; }
.s-05-ergebnisse__h3 { margin: 0; color: var(--text); font: 800 var(--fs-h3)/var(--lh-h3) var(--font-sans); text-wrap: balance; }
.s-05-ergebnisse__pfeile { display: flex; gap: 10px; }
.s-05-ergebnisse__pfeil {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--btn2-line);
  border-radius: var(--radius-pill);
  background: var(--nf-white-pure);
  color: var(--btn2-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);
}
.s-05-ergebnisse__pfeil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-05-ergebnisse__pfeil:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.s-05-ergebnisse__pfeil[aria-disabled="true"] { opacity: .38; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .s-05-ergebnisse__pfeil:not([aria-disabled="true"]):hover { border-color: var(--btn2-hover-line); background: var(--btn2-hover-bg); color: var(--btn2-hover-text); }
}
@media (scripting: none) { .s-05-ergebnisse__pfeile, .s-05-ergebnisse__steuerung { display: none; } }

/* Steuerung des Video-Sliders: Zähler „1–2 von 4“, Punkte (24 px Ziel, Punkt 8 px, aktiv 22 px), Pfeile rechts */
.s-05-ergebnisse__steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.s-05-ergebnisse__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;
}
.s-05-ergebnisse__punkte { display: flex; gap: 2px; }
.s-05-ergebnisse__punkt {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
}
.s-05-ergebnisse__punkt::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--s05-punkt);
  transition: width var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.s-05-ergebnisse__punkt[aria-current="true"]::before { width: 22px; background: var(--nf-olive-deep); }
.s-05-ergebnisse__punkt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.s-05-ergebnisse__steuerung .s-05-ergebnisse__pfeile { margin-left: auto; }

/* Pause-/Play-Knopf des Superplayer-Laufs (WCAG 2.2.2): nur sichtbar, solange der Lauf verfügbar ist (JS entfernt hidden) */
.s-05-ergebnisse__lauf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 13px;
  border: 1.5px solid var(--btn2-line);
  border-radius: var(--radius-pill);
  background: var(--nf-white-pure);
  color: var(--btn2-text);
  font: 700 var(--fs-small)/1 var(--font-sans);
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.s-05-ergebnisse__lauf svg { flex: none; width: 16px; height: 16px; }
.s-05-ergebnisse__lauf-pause { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.s-05-ergebnisse__lauf-play { display: none; fill: currentColor; }
.s-05-ergebnisse__lauf.is-pausiert .s-05-ergebnisse__lauf-pause { display: none; }
.s-05-ergebnisse__lauf.is-pausiert .s-05-ergebnisse__lauf-play { display: block; }
.s-05-ergebnisse__lauf:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .s-05-ergebnisse__lauf:hover { border-color: var(--btn2-hover-line); background: var(--btn2-hover-bg); color: var(--btn2-hover-text); }
}

.s-05-ergebnisse__scroller {
  margin: -8px -8px -12px;   /* hebt den Innenabstand der Reihe auf: Karten stehen auf den Achsen des Containers, der Schatten wird nicht abgeschnitten (unten bleiben 8 px) */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--nf-olive) transparent;
  border-radius: calc(var(--radius-md) + 8px);
}
.s-05-ergebnisse__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 */
.s-05-ergebnisse .s-05-ergebnisse__reihe {
  display: flex;
  gap: var(--s05-gap);
  margin: 0;
  padding: 8px 8px 20px;
  list-style: none;
}
/* mobil 1,3 Karten sichtbar, ab 640 px 3,3, ab 1024 px 5; Karten nie breiter als 320 px (nativ 700 px) */
.s-05-ergebnisse__karte {
  flex: 0 0 min(320px, calc((100% - var(--s05-gap)) / 1.3));
  min-width: 0;
  scroll-snap-align: start;
}
.s-05-ergebnisse__scroller--sp { position: relative; }
.s-05-ergebnisse__bild { display: block; color: inherit; text-decoration: none; cursor: zoom-in; }
.s-05-ergebnisse__bild:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.s-05-ergebnisse__bild .frame__media { transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .s-05-ergebnisse__bild:hover { border-color: var(--btn2-line); }
}

/* Hinweis direkt unter den Ergebnissen, gut lesbar */
.s-05-ergebnisse__hinweis {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 10px 0 0;   /* + 8 px Schattenraum unter der Reihe = 18 px Abstand */
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--nf-grey-100);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
}
.s-05-ergebnisse__hinweis svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--nf-olive); stroke-width: 1.8; stroke-linecap: round; }

/* Unten: Google-Zitat mit Quelle (V6 FE-3: ohne Bewertungszeile) · Link „Alle Ergebnisse ansehen“ (sekundär, kein zweiter Primär-CTA) */
.s-05-ergebnisse__unten { display: grid; gap: 20px var(--col-gap); margin-top: clamp(40px, 4vw, 56px); }
.s-05-ergebnisse__google {
  display: grid;
  align-content: start;
  gap: 14px;
  margin: 0;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.s-05-ergebnisse__stimme { margin: 0; }
.s-05-ergebnisse__quelle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; line-height: 1.35; }
.s-05-ergebnisse__mehr { justify-self: start; margin: 0 0 0 -4px; }
@media (hover: hover) and (pointer: fine) {
  .s-05-ergebnisse__mehr .link-arrow:hover svg { transform: translateX(3px); }
}

@media (min-width: 640px) {
  .s-05-ergebnisse__karte { flex-basis: min(320px, calc((100% - 3 * var(--s05-gap)) / 3.3)); }
}

@media (min-width: 768px) {
  .s-05-ergebnisse__vslider { --s05-rand: 16px; --s05-vgap: var(--col-gap); }
  .s-05-ergebnisse__video { flex-basis: calc((100cqw - 2 * var(--s05-rand) - var(--s05-vgap)) / 2); }
  .s-05-ergebnisse__google { row-gap: 12px; }
}

@media (min-width: 1024px) {
  .s-05-ergebnisse__kopf {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: clamp(40px, 5vw, 88px);
  }
  .s-05-ergebnisse__treppe { justify-self: end; width: clamp(280px, 22vw, 320px); }
  .s-05-ergebnisse__karte { flex-basis: min(320px, calc((100% - 4 * var(--s05-gap)) / 5)); }
}

/* ab 1280 px: Google-Block nimmt die Restbreite (Zitat 3 Zeilen), der Link steht rechts daneben, senkrecht mittig;
   darunter stehen beide untereinander, sonst wird das Zitat 5-zeilig */
@media (min-width: 1280px) {
  .s-05-ergebnisse__unten { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(32px, 4vw, 64px); }
  .s-05-ergebnisse__mehr { margin: 0 -4px 0 0; white-space: nowrap; }
}

/* 1024–1279 px: vier statt fünf Superplayer je Ansicht, damit jede Karte ≥ 180 px breit bleibt */
@media (min-width: 1024px) and (max-width: 1279px) {
  .s-05-ergebnisse__karte { flex-basis: calc((100% - 3 * var(--s05-gap)) / 4); }
}

/* Eintritt (05-ergebnisse.js): Startzustand nur unter dem Motion-Gate, nur transform und clip-path;
   dieselben Werte stehen als „from“ im fromTo() der JS-Datei. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .s-05-ergebnisse [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* FE-2 ST-03 + Copy §3.3 Punkt 3: mobil ohne Treppe-Deko (Desktop behält sie), ohne Pfeile und ohne Zähler „1–2 von 4“
   (Wischen und Punkte bleiben); Superplayer zuerst drei Karten, „Weitere ansehen“ zeigt den Rest in derselben Reihe. */
@media (max-width: 1023px) {
  .s-05-ergebnisse__treppe, .s-05-ergebnisse__pfeile, .s-05-ergebnisse__zaehler { display: none; }
  .s-05-ergebnisse__sp.is-gekuerzt .s-05-ergebnisse__karte:nth-child(n+4) { display: none; }
  .s-05-ergebnisse__mehr { margin-top: 16px; }
  /* V9-FX1 (mob-start-08): Tippziel 44 px wie die Punkte in 03 (vorher 30 px mit 2 px Abstand); Zähler ist aus, der erste
     Punkt (22 px in 44 px Ziel) steht auf der Achse */
  .s-05-ergebnisse__punkte { gap: 0; margin-left: -11px; }
  .s-05-ergebnisse__punkt { width: 44px; height: 44px; }
}
/* V6 FE-3: nur der Knopf „Weitere ansehen“ (in __sp) ist ab 1024 px aus; der Link „Alle Ergebnisse ansehen“ (p.__mehr in __unten)
   trägt dieselbe Klasse und blieb sonst am Desktop unsichtbar. */
@media (min-width: 1024px) { .s-05-ergebnisse__sp .s-05-ergebnisse__mehr { display: none; } }
/* der Knopf „Weitere ansehen“ hat einen Rand und steht auf der Achse (der -4px-Ausgleich gilt nur dem Textlink) */
.s-05-ergebnisse__sp .s-05-ergebnisse__mehr { margin-left: 0; margin-top: 8px; }   /* + 8 px Schattenraum unter der Reihe = 16 px */

/* ── src/sections/06-vergleich.css ── */
/* 06-vergleich · Namensraum .s-06-vergleich
   DESIGN.md Revision 2 §5, keine Pille, Budget ≤ 2 Bildschirmhöhen am Desktop. Fläche nach Revision 3 (farbwelt.md §3.1):
   Grau (data-theme="grey"), Apple-Vergleich: „Ohne“ transparent mit Haarlinie, „Mit“ als weiße Karte mit weichem Schatten
   (Rollen --compare-*, --surface-card, --shadow-media aus tokens.css). Kreuze grau, Preis-Symbole oliv, Haken bleiben rot.
   Bausteine aus base.css: .section .section-head .h2 .accent .compare .compare__col(--with) .compare__head .compare__list
   .checks__icon .zeichnung-rahmen .sr-only.
   < 900 px: Spalten untereinander, Zeichnung volle Spaltenbreite · ≥ 900 px: zwei Spalten, Zeilen per subgrid gleich hoch
   · ≥ 1024 px: Preismodell zweispaltig (Kopf | drei Punkte).
   V11-C (Farbwelt Rev. 7, bauplan v11 §1): Fläche olive-light, Verlauf gespiegelt (195°); Kreuze über die Rolle --kreuz
   (auf Hell grey-700, 4,62 → 7,5:1), Marke am Weg über --pfeil. */

.s-06-vergleich { --h-winkel: 195deg; }

.s-06-vergleich__kopf { margin-bottom: var(--section-head-gap); }

/* Spalten: Farben aus base.css (.compare über Rollen); „Ohne“ mit etwas kräftigerer Haarlinie, damit die Spalte auf Grau steht */
.s-06-vergleich .s-06-vergleich__col {
  display: grid;
  align-content: start;
}
.s-06-vergleich .s-06-vergleich__col--ohne { border-color: var(--nf-line-soft-strong); box-shadow: none; }
.s-06-vergleich__head { margin: 0 0 16px; }
.s-06-vergleich .s-06-vergleich__col--ohne .s-06-vergleich__liste { color: var(--text-mute); }
.s-06-vergleich .s-06-vergleich__col--mit .s-06-vergleich__liste { color: var(--text); }
.s-06-vergleich__punkt {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);   /* = Haken-Scheibe (Rev. 5: 28 px), Kreuz gleich groß */
  column-gap: 14px;
  align-items: start;
  line-height: 1.5;
  text-wrap: pretty;
}
.s-06-vergleich__icon { margin-top: -1px; }
.s-06-vergleich__icon--kreuz {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--kreuz, var(--nf-grey-700));
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--kreuz, var(--nf-grey-700));   /* Kreuz nie rot: Rot heißt „so geht's“ (farbwelt.md §4) */
}
.s-06-vergleich__icon--kreuz svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Zeichnung über jeder Spalte: derselbe Raum, Marke „Dein Ablauf“ am Anfang des roten Weges (59.5 | 223.9 von 480 × 400) */
.s-06-vergleich__bild { justify-self: center; width: min(100%, 500px); margin: 0 0 22px; }
.s-06-vergleich__zeichnung { position: relative; }
.s-06-vergleich__marke {
  position: absolute;
  left: 12.4%;
  top: 55.98%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px 0 0;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .86);
  color: var(--text);
  font: 800 .8125rem/1.7 var(--font-sans);
  letter-spacing: .02em;
  white-space: nowrap;
  transform: translate(-4px, -50%);
  pointer-events: none;
}
.s-06-vergleich__marke::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--pfeil, var(--z-akzent));   /* V11-C: Rolle --pfeil (auf Hell = --z-akzent) */
  box-shadow: 0 0 0 3px rgb(180 18 30 / .16);
}

.s-06-vergleich__hinweis { margin: 16px 0 0; color: var(--text-mute); font-size: var(--fs-small); line-height: 1.5; }

/* Preismodell: weiße Karte, Kopf und drei Punkte mit Symbol (ohne Preisangabe) */
.s-06-vergleich__preis {
  display: grid;
  gap: 24px var(--col-gap);
  margin-top: clamp(40px, 4.5vw, 64px);
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.s-06-vergleich__preis-kopf { display: grid; align-content: start; gap: 8px; }
.s-06-vergleich__preis-titel { margin: 0; color: var(--text); font: 800 var(--fs-h3)/var(--lh-h3) var(--font-sans); text-wrap: balance; }
.s-06-vergleich__preis-lead { margin: 0; color: var(--text-soft); line-height: 1.55; text-wrap: pretty; }
.s-06-vergleich__preis-liste { display: grid; gap: 20px var(--col-gap); margin: 0; padding: 0; list-style: none; }
.s-06-vergleich__preis-punkt { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; align-content: start; }
.s-06-vergleich__preis-punkt p { margin: 0; color: var(--text-soft); line-height: 1.55; text-wrap: pretty; }
.s-06-vergleich__preis-name { display: block; margin-bottom: 2px; color: var(--text); font-weight: 800; }
.s-06-vergleich__preis-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--nr-bg);   /* Symbole oliv (Rot-Budget G5) */
  box-shadow: 0 0 0 4px var(--nf-tint-olive);
  color: var(--nr-text);
}
.s-06-vergleich__preis-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 640px) {
  .s-06-vergleich__preis-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-06-vergleich__preis-punkt { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
}

/* ab 900 px: Zeilen links und rechts gleich hoch (Zeichnung, Kopf, vier Punkte als gemeinsame Zeilen) */
@media (min-width: 900px) {
  .s-06-vergleich__compare { row-gap: 0; }
  .s-06-vergleich .s-06-vergleich__col { grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  .s-06-vergleich .s-06-vergleich__liste { grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px; }
}

@media (min-width: 1024px) {
  .s-06-vergleich__preis { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
}

/* Eintritt des Preisblocks (06-vergleich.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) .s-06-vergleich [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* FE-2 ST-06: mobil flachere Zeichnung (Rahmen ≈ 170 statt 260 px hoch), damit Ohne/Mit und die Preis-Punkte näher
   zusammenrücken; Preis-Punkte enger. Marke „Dein Ablauf“ bleibt am Wegeanfang (Prozent-Position skaliert mit). */
@media (max-width: 639px) {
  .s-06-vergleich__bild { width: min(100%, 204px); margin-bottom: 16px; padding: 6px 6px 4px; }
  .s-06-vergleich__marke { font-size: 0.75rem; gap: 5px; padding-right: 7px; }
  .s-06-vergleich__marke::before { width: 7px; height: 7px; }
  .s-06-vergleich__preis-liste { gap: 16px; }
}

/* V9-FX1 (desk-start-20): bei 1024–1149 px (und 640–699 px) brechen „Keine Upfront-Summe“ und „Funktioniert wie Netflix“
   zweizeilig, „Monatlich kündbar“ nicht; zwei Zeilen Platz für alle drei Namen, damit die Beschreibungen auf einer Höhe beginnen */
@media (min-width: 640px) and (max-width: 699px), (min-width: 1024px) and (max-width: 1149px) {
  .s-06-vergleich__preis-name { min-height: calc(2 * 1.55em); }
}

/* ── src/sections/07-nino.css ── */
/* 07-nino · Namensraum .s-07-nino · Teaser für /ninofischlein (Slice V5-PL)
   DESIGN.md Revision 2 §5, Fläche Rev. 6 (V9-A1): white, Klasse raster bleibt (--raster-on ist auf Hell 0), Pille ja.
   Nach PL nur noch der Kopf (etwa 1,2 Bildschirmhöhen am Desktop). Farben nur über Rollen des Themes.
   Bausteine aus base.css: .section .raster .pill .h2 .accent .lead .frame .frame__media .stats .stats--compact .stat
   .link-arrow. Hier nur: Raster des Kopfes (Foto neben Text) und der Abstand des Links „Mehr über Nino“.
   Zeitleiste, Team, Imagefilm und Partnerzeile stehen auf /ninofischlein bzw. /uber-uns (eigene Namensräume).
   V11-C (Farbwelt Rev. 7, bauplan v11 §1): Fläche olive, Oliv-Verlauf der Referenz mit Lichtpunkt links beim Foto, mobil als
   hohe Ellipse oben. Text weiß, Kennzahlen-Plus, Akzentwort, Link und Rahmen aus den olive-Rollen (0 Hartwerte). */

.s-07-nino { overflow: hidden; --oliv-pos: 40% 50%; }
@media (max-width: 767px) {
  .s-07-nino { --oliv-pos: 50% 30%; --bg-image: var(--nf-grad-olive-hoch, var(--nf-grad-olive)); }
}

/* ---------- Kopf: mobil gestapelt (H2 · Foto · Text · Zahlen; Pille entfällt seit V6 FE-3), ab 1024 px Foto links neben dem Text ---------- */
.s-07-nino__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "foto" "lead" "mission" "zitat" "zahlen" "mehr";
}
.s-07-nino__title { grid-area: title; max-width: 20em; }
.s-07-nino__foto { grid-area: foto; justify-self: start; width: min(58vw, 220px); margin: 24px 0 0; }
.s-07-nino__lead { grid-area: lead; max-width: 52ch; margin-top: 24px; }
.s-07-nino__mission {
  grid-area: mission;
  max-width: 52ch;
  margin: 14px 0 0;
  color: var(--text);
  font-weight: 600;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Zitat: Linie links wie die Überleitung in 02 (Linie aus --line, Rot ist Akzent und nicht Linie), kein Akzentwort im Fließtext */
.s-07-nino__zitat {
  grid-area: zitat;
  max-width: 52ch;
  margin: 22px 0 0;
  padding-left: 18px;
  border-left: var(--z-pfeil) solid var(--line);
}
.s-07-nino__zitat-text { margin: 0; }
.s-07-nino__zitat-text p { margin: 0; color: var(--text); font-size: var(--fs-body); line-height: 1.55; text-wrap: pretty; }
.s-07-nino__zitat-name { margin-top: 6px; color: var(--text-mute); font-size: var(--fs-small); }

/* Kennzahlen: mobil drei Zeilen (Wert neben Bezeichnung), ab 640 px drei Spalten */
.s-07-nino__zahlen { grid-area: zahlen; margin-top: 28px; }
.s-07-nino__zahlen-titel {
  margin: 0 0 10px;
  color: var(--text-soft);
  font: 800 var(--fs-small)/1.3 var(--font-sans);
}
.s-07-nino .s-07-nino__stats { grid-template-columns: minmax(0, 1fr); }
.s-07-nino__stats .stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 18px;
  border-top: 0;
  border-left: 0;
}
.s-07-nino__stats .stat + .stat { border-top: 1px solid var(--hairline); }

/* Sekundärer Link zur Personenseite (kein zweiter Primär-CTA); Pfeil zeigt nach rechts, also Hover nach rechts */
.s-07-nino__mehr { grid-area: mehr; justify-self: start; margin: 22px 0 0 -4px; }
@media (hover: hover) and (pointer: fine) {
  .s-07-nino__mehr .link-arrow:hover svg { transform: translateX(3px); }
}

@media (min-width: 640px) {
  .s-07-nino .s-07-nino__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-07-nino__stats .stat { display: grid; align-content: start; gap: 5px; padding: 16px 18px 15px; }
  .s-07-nino__stats .stat + .stat { border-top: 0; border-left: 1px solid var(--hairline); }
}

@media (min-width: 1024px) {
  .s-07-nino__intro {
    grid-template-columns: clamp(300px, 25vw, 360px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto 1fr;
    grid-template-areas:
      "foto title"
      "foto lead"
      "foto mission"
      "foto zitat"
      "foto zahlen"
      "foto mehr";
    column-gap: clamp(48px, 5.5vw, 96px);
    align-items: start;
  }
  .s-07-nino__foto { width: 100%; margin: 0; }
  .s-07-nino__lead { margin-top: 22px; }
  .s-07-nino__zahlen { max-width: 640px; margin-top: 30px; }
}

/* Eintritt (07-nino.js): Startzustände nur unter dem Motion-Gate, nur transform und clip-path; dieselben Werte
   stehen als „from“ im fromTo() der JS-Datei. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .s-07-nino [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* FE-2 ST-08: mobil die drei Kennzahlen in einer Reihe (3 Spalten) statt untereinander; ruhigerer Abschluss, das Zählen
   springt nicht mehr in der Zeile. Werte/Labels unverändert. */
@media (max-width: 639px) {
  .s-07-nino .s-07-nino__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-07-nino__stats .stat { display: grid; align-content: start; gap: 4px; padding: 14px 10px 13px; }
  .s-07-nino__stats .stat + .stat { border-top: 0; border-left: 1px solid var(--hairline); }
  .s-07-nino__stats .stat__value { font-size: 1.375rem; white-space: nowrap; }
}
/* V9-FX1 (mob-start-10): bei 320 ragte „12.000+“ bis 4 px an die Trennlinie und „aktive Kunden“ brach zweizeilig.
   V10-D1: „aktive Kunden“ (83 px) brach in der 79-px-Zelle weiter zweizeilig; erste Spalte etwas breiter, Polster 6 px */
@media (max-width: 340px) {
  .s-07-nino .s-07-nino__stats { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr) minmax(0, 1fr); }
  .s-07-nino__stats .stat { padding-inline: 6px; }
  .s-07-nino__stats .stat__value { font-size: 1.25rem; }
}

/* V9-FX1 (desk-start-02): 640–1023 Foto links neben Titel, Text und Zitat (vorher klein und allein unter der H2 mit
   360–480 px Leere daneben); Kennzahlen und Link darunter über die volle Breite */
@media (min-width: 640px) and (max-width: 1023px) {
  .s-07-nino__intro {
    grid-template-columns: clamp(200px, 32%, 280px) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-areas:
      "foto title"
      "foto lead"
      "foto mission"
      "foto zitat"
      "zahlen zahlen"
      "mehr mehr";
    column-gap: 32px;
    align-items: start;
  }
  .s-07-nino__foto { width: 100%; margin: 0; }
  .s-07-nino__lead { margin-top: 18px; }
}

/* ── src/sections/08-community.css ── */
/* 08-community · Namensraum .s-08-community · Teaser für /uber-uns#events (Slice V5-PL)
   DESIGN.md Revision 2 §5, Fläche seit V9 (Revision 6): grey (vorher olive-light), keine Pille. Nach PL etwa eine
   Bildschirmhöhe am Desktop. Farben nur über Rollen des Themes (bg, text*, hairline, surface-card*, shadow-card, nr-*, focus-ring),
   keine harten Töne, kein Oliv als Fläche. Auf Grau: weißer Bildrahmen mit Haarlinie (grey-100) und weichem Schatten.
   Bausteine aus base.css: .section .h2 .accent .lead .frame .frame__media .station__lupe .link-arrow; die Lupe
   (a[data-lupe]) verdrahtet core.js. Hier nur: Raster, Textblock, Zuschnitt des Eventfotos, Bildunterschrift, Link.
   < 1024 px: Kopf · Foto · Link
   ≥ 1024 px: 12 Spalten, links Kopf und Link (5 Spalten), rechts das Foto (6 Spalten), senkrecht mittig.
   V11-C (Farbwelt Rev. 7, bauplan v11 §1): Fläche olive-light; eigener Dreistopp-Verlauf aus den Primitiven (Hell-Oliv,
   Hellgrau 55 %, Weiß): der helle Auslauf macht den Schnitt in das Rot von 09 kontraststark.
   V6 FE-3 (ST-07): Block „NF Live Mentoring Days“ entfällt hier, Text steht auf /uber-uns 05-events.
   Zeichnung community-saal, Aftermovie, weitere Fotos und Blöcke stehen auf /uber-uns (.pg-uber-uns-05-events). */

.s-08-community {
  --h-winkel: 165deg;
  --bg-image: linear-gradient(var(--h-winkel), var(--nf-olive-light) 0%, var(--nf-grey-50) 55%, var(--nf-white-pure) 100%);
}

.s-08-community { overflow: hidden; }

.s-08-community__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "foto" "mehr";
}
.s-08-community__kopf { grid-area: kopf; display: grid; gap: 16px; max-width: 40rem; }

/* Eventfoto: gerahmt (weiße Karte auf Grau: Haarlinie + weicher Schatten aus den Rollen), per Klick groß (Lupe aus base.css/core.js) */
.s-08-community__foto { grid-area: foto; min-width: 0; margin: 28px 0 0; }
.s-08-community__lupe-link { display: block; color: inherit; box-shadow: var(--shadow-card); }
.s-08-community__lupe-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.s-08-community__lupe-link .station__lupe { top: 12px; right: 12px; bottom: auto; box-shadow: 0 0 0 3px var(--surface-card); }
@media (hover: hover) and (pointer: fine) {
  .s-08-community__lupe-link { transition: transform var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); }
  .s-08-community__lupe-link:hover { transform: translateY(-2px); border-color: var(--nf-line-soft-strong); box-shadow: var(--shadow-media); }
}
/* Zuschnitt (V9 A1-K0708): Das Original ist fast quadratisch (800 × 826 px). Nino (Mann im hellen Sakko) steht rechts der Mitte,
   sein Kopf liegt bei 22 bis 31 % der Bildhöhe, die Schuhe enden bei 84 %. 5 : 4 beschneidet nur oben und unten, nie seitlich;
   mit 50 % vertikal beginnt der Ausschnitt bei 11 % der Bildhöhe: rund 11 % Rahmenhöhe Luft über dem Haar, Schuhe noch drin.
   Das Seitenverhältnis gilt bei jeder Breite, also sitzt der Kopf überall an derselben relativen Stelle (vorher 4 : 3 bei 85 %:
   der Ausschnitt begann bei 23 %, das Haar war oben abgeschnitten). */
.s-08-community__bild { aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 50%; }
.s-08-community__caption { margin-top: 8px; color: var(--text-mute); font-size: var(--fs-small); line-height: 1.4; }

/* Sekundärer Link zu Events und Standorten auf /uber-uns (kein zweiter Primär-CTA) */
.s-08-community__mehr { grid-area: mehr; justify-self: start; margin: 20px 0 0 -4px; }
@media (hover: hover) and (pointer: fine) {
  .s-08-community__mehr .link-arrow:hover svg { transform: translateX(3px); }
}

@media (min-width: 1024px) {
  /* Zeilen: Puffer · Kopf · Link · Puffer; das Foto geht über alle vier und steht mittig, damit der Textblock auf derselben
     Mittelachse sitzt wie das Foto (vorher klebte der Text oben am Fotorand und unten links blieb ein Loch). */
  .s-08-community__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: none;
    column-gap: var(--col-gap);
  }
  .s-08-community__kopf { grid-column: 1 / 6; grid-row: 2; align-self: end; }
  .s-08-community__mehr { grid-column: 1 / 6; grid-row: 3; align-self: start; margin-top: 28px; }
  .s-08-community__foto { grid-column: 7 / 13; grid-row: 1 / 5; align-self: center; margin: 0; }
}
/* 1024 bis 1179 px: in 5 Spalten bricht die Überschrift „Community-/Gruppen“ am Bindestrich; 6 Spalten tragen „Community-Gruppen“
   in einer Zeile (wie ab 1180), der Lead bleibt so schmal wie zuvor, damit zum Foto Luft bleibt. */
@media (min-width: 1024px) and (max-width: 1179px) {
  .s-08-community__kopf { grid-column: 1 / 7; }
  .s-08-community__lead { max-width: 24em; }
}

/* Eintritt (08-community.js): Startzustände nur unter dem Motion-Gate, nur transform und clip-path; dieselben Werte
   stehen als „from“ im fromTo() der JS-Datei. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .s-08-community [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* V10-B (Bauplan §5.7): mobil wird die Lupe gesetzt, wenn das Foto hereinkommt (core.js ein(): data-ein="mobil" an der figure,
   data-ein-setzen an der Lupe, Setzen dauert 140 + 420 ms), danach pulsiert sie genau einmal (600 ms, scale 1 → 1.15 → 1):
   am Handy gibt es kein Hover, der Puls zeigt „antippen zum Vergrößern“. Nur scale am Lupen-Kreis, nie transform am Link
   (Fokusrahmen, Hover-Lift am Desktop). Nur unter dem Motion-Gate, nur < 1024 px; ohne JS/reduced: kein Puls, Lupe steht. */
@keyframes s-08-community-lupe-puls {
  0%, 100% { scale: 1; }
  45% { scale: 1.15; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .s-08-community__foto.is-ein .station__lupe {
    animation: s-08-community-lupe-puls 600ms var(--ease-in-out) 620ms 1;   /* ohne fill: während der Wartezeit läuft das Setzen (scale-Übergang) */
  }
}

/* ── src/sections/09-weg.css ── */
/* 09-weg · Namensraum .s-09-weg
   DESIGN.md Revision 2 §5, Budget ≤ 2 Bildschirmhöhen am Desktop. Fläche nach Revision 3 (farbwelt.md §3.1): Weiß
   (data-theme="white"), Zeichnungen auf Kacheln; die CTA-Karte ist seit Rev. 6 (V9-A1) hell (data-theme="grey").
   Bausteine aus base.css: .section .section-head(--center) .pill .h2 .accent .lead .stationen .station* .zeichnung-rahmen
   .station__pfeil .cta-karte .raster .checks .frame(--sm) .btn .btn-primary .rating.
   Hier nur: Abstände und Breiten der Stationen, das Raster der CTA-Karte, Kreuz-Liste, großer CTA, Microcopy, Google-Zeile.
   < 640 px: Kopf · Stationen untereinander (Pfeil ↓) · Karte einspaltig (Für dich · Nicht für dich · Nino · CTA · Google)
   640–1023: Stationen 1 → 2, darunter 3 mittig · Karte: zwei Listen nebeneinander, darunter Nino und CTA
   ≥ 1024: drei Stationen in einer Reihe (Pfeile →) · Karte dreispaltig, rechts Nino mit CTA
   V11-C (Farbwelt Rev. 7, bauplan v11 §1): Fläche red (Rot-Verlauf, Rotkern mobil tiefer hinter der Karte), Zeichnungen auf
   weißen Kacheln, CTA-Karte white. Pfeile und ihr Strich lesen --pfeil der Section (Weiß auf Rot), Nummern --nr-* (weiße
   Scheibe, rote Ziffer). Die Kreuze liegen in der weißen Karte und bleiben grau. */

.s-09-weg {
  --rot-pos: 50% 58%;
  /* Pfeil-Farbe der Section einmal hier auflösen: die Pfeile → stehen im Markup in den weißen Kacheln, liegen aber sichtbar
     auf Rot; ohne diese Variable erbten sie das Rot der Kachel */
  --s-09-weg-pfeil: var(--pfeil, var(--z-akzent));
}
.s-09-weg .station__pfeil { color: var(--s-09-weg-pfeil); }
@media (max-width: 767px) { .s-09-weg { --rot-pos: 50% 70%; } }

/* Zentrierter Lead: ausgeglichene Zeilen statt „ob / es passt.“ */
.s-09-weg__kopf .lead { text-wrap: balance; }

/* Stationen mobil: Vignetten 264 px breit, mittig (wie 02) */
.s-09-weg__stationen { row-gap: 50px; }
.s-09-weg__station { justify-self: center; width: min(100%, 286px); }
.s-09-weg__station .station__text { margin-top: 14px; }
.s-09-weg__am-stueck { white-space: nowrap; }   /* „1:1-Termin“ nicht am Bindestrich trennen */

@media (min-width: 640px) {
  .s-09-weg__station { width: auto; justify-self: stretch; }
  .s-09-weg__station .station__text { margin-top: 20px; }
}
/* Tablet: V9-A1 drei Spalten wie am Desktop (vorher 2 + 1, die dritte allein mittig darunter und ohne Pfeil 2 → 3);
   Pfeile 1 → 2 → 3 im Spaltenabstand */
@media (min-width: 640px) and (max-width: 1023px) {
  .s-09-weg__stationen { --station-gap: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-09-weg__station:not(:last-child) .station__pfeil--quer { display: block; }
}

/* ---------- CTA-Karte (Bordeaux mit Raster auf Weiß) ---------- */
.s-09-weg__karte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px var(--col-gap);
  margin-top: clamp(56px, 6vw, 88px);
}
.s-09-weg__karte > * { position: relative; }   /* über dem Raster (.raster::before, z-index −1 im isolierten Kontext) */

.s-09-weg__liste-titel { margin: 0 0 18px; color: var(--text); font: 800 var(--fs-h3)/var(--lh-h3) var(--font-sans); }
.s-09-weg__liste li { color: var(--text); line-height: 1.5; text-wrap: pretty; }

/* „Nicht für dich“: Kreis mit 1-px-Rand statt Rot (DESIGN §3, wie .compare), Text gedämpft */
.s-09-weg__kreuze { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.s-09-weg__kreuze li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);   /* = Haken-Scheibe der Liste daneben (Rev. 5: 28 px) */
  column-gap: 14px;
  align-items: start;
  color: var(--text-soft);
}
.s-09-weg__kreuz {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -2px;   /* wie .checks__icon: Kreis- und Scheibenmitte auf derselben Höhe */
  border: 1px solid var(--nf-grey-500);   /* V10-D1 (mass-start-06): --nf-line-strong (Creme 18 %) war auf grey-50 unsichtbar; wie 02/06 */
  border-radius: var(--radius-pill);
  color: var(--nf-grey-700);
}
.s-09-weg__kreuz svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Abschluss: Nino (echtes Bild, gerahmt) · großer CTA · Microcopy · Google-Zeile */
.s-09-weg__abschluss { display: grid; justify-items: start; gap: 22px; }
.s-09-weg__nino { width: min(100%, 420px); }
/* Rev. 6 (V9-A1): die Karte ist hell (data-theme="grey") im weißen Abschnitt; sie setzt alle Rollen (tokens.css) selbst,
   .frame, .checks__icon und .pill stehen darin in der hellen Fassung; das Raster blendet --raster-on: 0 aus. */
.s-09-weg__aktion { display: grid; justify-items: stretch; gap: 10px; width: min(100%, 420px); }
.s-09-weg__cta {
  --btn-h: 64px;
  width: 100%;
  justify-content: space-between;
  gap: 10px;
  padding-left: 22px;
  font-size: var(--fs-body);
}
.s-09-weg__micro { margin: 0; color: var(--text-soft); font-size: var(--fs-small); text-align: center; }
.s-09-weg__google { display: grid; justify-items: center; gap: 6px; width: min(100%, 420px); text-align: center; }
.s-09-weg__google .rating { justify-content: center; }

@media (min-width: 640px) {
  .s-09-weg__karte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-09-weg__abschluss {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 20px var(--col-gap);
    padding-top: 32px;
    border-top: 1px solid var(--hairline);
  }
  .s-09-weg__nino { grid-row: 1 / span 2; }
  .s-09-weg__cta { padding-left: 28px; font-size: 1.0625rem; }
}

/* V9-A1: drei Spalten erst ab 1280 px; bei 1024–1279 brachen „Für dich / Nicht für dich“ in Zeilen aus ein bis zwei
   Wörtern (Spalten ≈ 200 px), dort gilt das Raster ab 640 px (zwei Listen, darunter Foto | CTA) */
@media (min-width: 1280px) {
  .s-09-weg__karte {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 392px);   /* V9-A1: 348 → 392, der CTA (331 px) ragte 33 px über die Spalte */
    column-gap: clamp(32px, 3.4vw, 56px);
    align-items: start;
  }
  .s-09-weg__abschluss {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 0 0 0 clamp(32px, 3.4vw, 56px);
    border-top: 0;
    border-left: 1px solid var(--hairline);
  }
  .s-09-weg__nino { grid-row: auto; width: 100%; }
  .s-09-weg__aktion { width: 100%; }
}

/* Eintritt der drei Karten-Spalten (09-weg.js): Startzustand nur unter dem Motion-Gate, nur transform und clip-path;
   dieselben Werte stehen als „from“ im fromTo() der JS-Datei. Die Zeichnungen baut core.js auf (NF.zeichnung). */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .s-09-weg [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* FE-2 ST-01 (entschlacken-ux.md §3.1) + Copy §3.3 Punkt 6: mobil die drei Schritte als kompakte Zeilen (Mini-Zeichnung
   96 px links, Nummer, Titel und Satz rechts; seit V10-B wieder mit kurzem Pfeil ↓) und „Für dich / Nicht für dich“ enger
   gesetzt. Text unverändert, ab 640 px unverändert. */
@media (max-width: 639px) {
  /* V10-B (Bauplan §5.3): Reihenabstand 14 → 28 px für den kurzen roten Pfeil ↓ unter der Mini-Kachel (Mitte 48 px) */
  .s-09-weg__stationen { row-gap: 28px; }
  .s-09-weg__station { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-items: center; justify-self: stretch; width: 100%; }
  .s-09-weg__station .zeichnung-rahmen { padding: 4px 4px 2px; border-radius: 14px; }
  .s-09-weg__station .station__text { gap: 4px; margin-top: 0; }
  .s-09-weg__station .station__titel { font-size: 1.0625rem; }
  .s-09-weg__station .station__satz { font-size: 0.9375rem; line-height: 1.5; }
  .s-09-weg__station.station:not(:last-child) > .station__pfeil--ab { display: block; left: 48px; top: calc(100% + 4px); width: 12px; height: 20px; margin-left: -6px; }
  .s-09-weg__karte { gap: 28px; margin-top: 40px; }
  .s-09-weg__liste-titel { margin-bottom: 12px; }
  .s-09-weg__liste li { font-size: 0.9375rem; }
  .s-09-weg__kreuze { gap: 10px; }
}

/* V9-A1 Symmetrie mobil: der CTA (nowrap, 315 px) war breiter als die Kartenspalte (240 px bei 320, 280 bei 360, 307 bei 390);
   Foto, Button und Microcopy standen rechts über den Innenabstand hinaus, bei 320 px schnitt die Karte (overflow: hidden)
   den Button ab. Jetzt: Spalte darf nicht über die Karte wachsen, etwas weniger Innenabstand, Button-Text bricht nur im
   Notfall (320 px) ausgewogen um; bis 374 px eine Stufe kleiner, damit er bei 360 px einzeilig bleibt. */
@media (max-width: 479px) {
  .s-09-weg__karte { padding-inline: 18px; }
}
@media (max-width: 639px) {
  .s-09-weg__abschluss { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .s-09-weg__nino, .s-09-weg__aktion, .s-09-weg__google { width: 100%; min-width: 0; }
}
/* 640–899: CTA-Spalte ≈ 310 px (Prüfer desk-start-06: Knopf 331 px ragte bis 10 px an den Kartenrand) */
@media (max-width: 899px) {
  .s-09-weg__aktion { min-width: 0; }
  .s-09-weg__cta { padding-left: 18px; white-space: normal; text-wrap: balance; line-height: 1.25; }
}
@media (max-width: 374px), (min-width: 640px) and (max-width: 899px) {
  .s-09-weg__cta { gap: 8px; font-size: 0.9375rem; }
}

/* V10-B Strich (Bauplan §3 Muster 4): mobil zeichnet sich der Pfeil ↓ jeder Station von oben nach unten, nachdem ihre
   Mini-Zeichnung steht (700 ms, passend zum 770-ms-Takt der Zeichnung). .ein-bereit setzt nur core.js ein(), je Station
   (data-ein="mobil"), daher erscheinen die Pfeile in Lesereihenfolge. Nur transform; der Pfad zeichnet mit
   vector-effect: non-scaling-stroke (base.css), die Strichstärke bleibt beim Skalieren gleich. Ohne JS/reduced: steht. */
@media (max-width: 639px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .s-09-weg__station.ein-bereit > .station__pfeil--ab { transform-origin: 50% 0; }
  .s-09-weg__station.ein-bereit:not(.is-ein) > .station__pfeil--ab { transform: scaleY(0); }
  /* Übergang erst mit .is-ein: beim Setzen von .ein-bereit (Seitenstart) springt der Pfeil sofort auf 0, statt 1,2 s lang
     sichtbar zu schrumpfen (gemessen: wer schnell hinscrollt, sah sonst einen halben Pfeil, der 700 ms stehen blieb) */
  .s-09-weg__station.ein-bereit.is-ein > .station__pfeil--ab { transition: transform var(--ein-strich-dur) var(--ease-in-out) 700ms; }
}
@media print { .s-09-weg__station > .station__pfeil--ab { transform: none !important; } }

/* ── src/sections/10-faq.css ── */
/* 10-faq · Namensraum .s-10-faq
   DESIGN.md Revision 2 §5, Fläche seit Revision 3 (farbwelt.md §2.2 Nr. 8): grey (hell, data-theme="grey"), die Karte „Frag mich alles“
   ist seit Rev. 5 eine weiße Karte auf der grauen Fläche (data-theme="white" am Kartenelement). Keine Zeichnung, keine Bilder. Bausteine aus base.css:
   .section .h2 .accent .accordion* .btn .btn-primary .btn-secondary .btn--sm .sr-only.
   Hier: Raster (mobil H2 · Fragen · Karte · CTA; ≥ 1024 links H2 und CTA, rechts Fragen und Karte in einer Spalte), „Weitere Fragen“,
   die Karte „Frag mich alles“ (Doppelrand: Schale mit Fläche und Rand des Themes, Kern als Kachel), Lade- und Antwortzustände,
   weiches Aufklappen per CSS (::details-content, nur wo unterstützt und nur mit Motion). */

.s-10-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "liste" "cta";   /* V9-FX1: die Karte (.s-10-faq__ki) steht in der Fragen-Spalte */
  row-gap: 0;
}
.s-10-faq__kopf { grid-area: kopf; max-width: 36rem; margin-bottom: var(--section-head-gap); }
.s-10-faq__liste { grid-area: liste; min-width: 0; }
.s-10-faq__cta { grid-area: cta; display: grid; justify-items: start; gap: 14px; margin-top: 40px; }

.s-10-faq__item .accordion__summary { line-height: 1.4; }
.s-10-faq__item .accordion__panel p { margin: 0; line-height: 1.6; text-wrap: pretty; }

.s-10-faq__bruecke { margin: 0; max-width: 32ch; color: var(--text); font-size: var(--fs-lead); font-weight: 600; line-height: 1.45; text-wrap: pretty; }
.s-10-faq__micro { margin: -4px 0 0; color: var(--text-mute); font-size: var(--fs-small); }

/* ---------- Weitere Fragen (details um die übrigen fünf) ---------- */
.s-10-faq__mehr { margin-top: 10px; }
.s-10-faq__mehr-knopf {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px;
  padding: 0 8px 0 18px;
  border: var(--btn2-line-w, 1px) solid var(--btn2-line);
  border-radius: var(--radius-pill);
  color: var(--btn2-text);
  font-size: var(--fs-small);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.s-10-faq__mehr-knopf::-webkit-details-marker { display: none; }
.s-10-faq__mehr-knopf:active { transform: scale(0.97); }
.s-10-faq__mehr-knopf:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.s-10-faq__mehr-auf { display: none; }
.s-10-faq__mehr[open] .s-10-faq__mehr-zu { display: none; }
.s-10-faq__mehr[open] .s-10-faq__mehr-auf { display: inline; }
.s-10-faq__mehr[open] .s-10-faq__mehr-zahl { display: none; }
.s-10-faq__mehr-zahl {
  display: grid; place-items: center;
  min-width: 26px; height: 26px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--nf-tint-olive);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
}
.s-10-faq__mehr-icon { display: grid; place-items: center; width: 32px; height: 32px; transition: transform var(--dur-ui) var(--ease-spring); }
.s-10-faq__mehr-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-10-faq__mehr[open] .s-10-faq__mehr-icon { transform: rotate(180deg); }
.s-10-faq__rest { margin-top: 10px; }
@media (hover: hover) and (pointer: fine) {
  .s-10-faq__mehr-knopf:hover { border-color: var(--btn2-hover-line); background: var(--btn2-hover-bg); color: var(--btn2-hover-text); }
  .s-10-faq__mehr-knopf:hover .s-10-faq__mehr-zahl { background: rgb(255 255 255 / 0.16); }
}

/* ---------- Karte „Frag mich alles“ ---------- */
.s-10-faq__frag {   /* V9-E: weiße Karte auf Grau (Rev. 6), Haarlinie + weicher Schatten, steht mit JS offen */
  display: grid; gap: 18px;
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--nf-grey-100);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  color: var(--text);
  box-shadow: var(--nf-shadow-soft);
}
.s-10-faq__frag[hidden] { display: none; }
.s-10-faq__frag-kopf { display: grid; gap: 8px; }
.s-10-faq__frag-titel { margin: 0; color: var(--text); font: 800 var(--fs-h3)/var(--lh-h3) var(--font-sans); }
.s-10-faq__frag-titel .accent { padding-right: 0.08em; }
.s-10-faq__frag-intro { margin: 0; max-width: 52ch; color: var(--text-soft); line-height: 1.55; text-wrap: pretty; }

.s-10-faq__form { display: grid; gap: 10px; margin: 0; }
.s-10-faq__label { color: var(--text); font-size: var(--fs-small); font-weight: 800; }
.s-10-faq__feld { display: grid; gap: 10px; }
.s-10-faq__eingabe {
  display: block;
  width: 100%;
  min-height: 56px;
  max-height: 160px;
  padding: 15px 18px;
  border: 1px solid var(--nf-grey-100);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: 1rem;           /* ≥ 16 px: iOS zoomt beim Fokus nicht */
  line-height: 1.5;
  resize: none;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.s-10-faq__eingabe::placeholder { color: var(--text-mute); opacity: 1; }
.s-10-faq__eingabe:focus-visible { outline: 2px solid var(--nf-olive); outline-offset: 2px; border-color: transparent; background: #FFFFFF; }
.s-10-faq__eingabe:hover { border-color: var(--nf-grey-500); }

/* Beispiel-Fragen als Chips (aus den FAQ-Fragen), verschwinden nach der ersten Frage */
.s-10-faq__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s-10-faq__chips[hidden] { display: none; }
.s-10-faq__chip {
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--nf-grey-100); border-radius: var(--radius-pill);
  background: var(--nf-grey-50); color: var(--text);
  font: 600 var(--fs-small)/1.3 var(--font-sans); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.s-10-faq__chip:active { transform: scale(0.97); }
.s-10-faq__chip:focus-visible { outline: 2px solid var(--nf-olive); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .s-10-faq__chip:hover { border-color: var(--nf-olive); } }
.s-10-faq__eingabe:disabled { opacity: 0.7; }
.s-10-faq__senden { justify-self: stretch; }
.s-10-faq__senden[aria-disabled="true"] { cursor: progress; opacity: 0.72; }

.s-10-faq__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.s-10-faq__hinweis { margin: 0; max-width: 54ch; color: var(--text-mute); font-size: var(--fs-caption); line-height: 1.45; }
.s-10-faq__hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.s-10-faq__zaehler { flex: none; margin: 0; color: var(--text-mute); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.s-10-faq__zaehler.is-voll { color: var(--text); font-weight: 800; }   /* auf Oliv nicht rot (farbwelt.md §0 G5, Rot als Text fällt durch) */

@media (min-width: 640px) {
  .s-10-faq__feld { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .s-10-faq__senden { justify-self: auto; min-height: 56px; padding-right: 8px; }
  .s-10-faq__eingabe { min-height: 56px; }
}

/* Antwortbereich: leer → laden (drei Zeilen als Platzhalter) → antwort. Nur transform/opacity bewegen sich. */
.s-10-faq__antwort { display: grid; gap: 18px; }
.s-10-faq__antwort[data-state="leer"] { display: none; }
.s-10-faq__laden { display: none; gap: 10px; padding: 4px 0; }
.s-10-faq__antwort[data-state="laden"] .s-10-faq__laden { display: grid; }
.s-10-faq__antwort[data-state="laden"] .s-10-faq__ausgabe {   /* bleibt im Barrierebaum (aria-live), nur unsichtbar */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap;
}
.s-10-faq__antwort { position: relative; }
.s-10-faq__laden span { display: block; height: 12px; border-radius: var(--radius-pill); background: var(--hairline); }
.s-10-faq__laden span:nth-child(2) { width: 88%; }
.s-10-faq__laden span:nth-child(3) { width: 56%; }

.s-10-faq__ausgabe {
  padding: 18px 20px;
  border-left: 2px solid var(--nf-olive);   /* Oliv als feine Linie (Rev. 6) */
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-sunken);
}
.s-10-faq__quelle { margin: 0 0 6px; color: var(--text-mute); font-size: var(--fs-caption); font-weight: 800; }
.s-10-faq__quelle:empty { display: none; }
.s-10-faq__text { margin: 0; max-width: var(--maxw-text); color: var(--text); line-height: 1.6; text-wrap: pretty; white-space: pre-line; }
.s-10-faq__weiter {   /* Pitch-Karte: dezent nach der ersten Antwort, hervorgehoben ab der zweiten bzw. bei cta */
  display: grid; justify-items: start; gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--nf-grey-100);
  border-radius: var(--radius-sm);
  background: var(--nf-grey-50);
}
.s-10-faq__weiter[hidden] { display: none; }
.s-10-faq__weiter.is-stark { border-color: var(--nf-olive); background: #FFFFFF; box-shadow: var(--nf-shadow-soft); }
.s-10-faq__weiter-text { margin: 0; color: var(--text); font-weight: 600; line-height: 1.45; text-wrap: pretty; }

@media (max-width: 479.98px) {
  .s-10-faq__weiter-knopf { width: 100%; justify-content: space-between; gap: 10px; padding-left: 22px; font-size: var(--fs-small); }
  .s-10-faq__weiter-knopf .btn__icon { width: 36px; height: 36px; }
  .s-10-faq__meta { flex-direction: column; gap: 6px; }
}

@media (min-width: 1024px) {
  .s-10-faq__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "kopf liste"
      "cta liste";
    column-gap: clamp(40px, 5vw, 88px);
  }
  .s-10-faq__kopf { margin-bottom: 0; }
  .s-10-faq__cta { align-self: start; margin-top: 32px; }
}

/* Weiches Aufklappen ohne JS: ::details-content (Chromium 131+, Safari 18.4+), sonst springt die Antwort wie gewohnt auf */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .s-10-faq__liste { interpolate-size: allow-keywords; }
    .s-10-faq__item::details-content,
    .s-10-faq__mehr::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 240ms var(--ease-out), content-visibility 240ms allow-discrete;
    }
    .s-10-faq__item[open]::details-content,
    .s-10-faq__mehr[open]::details-content { block-size: auto; }
  }
}

/* Bewegung nur mit Motion: Platzhalterzeilen pulsieren (opacity), die Antwort blendet leicht von unten ein */
@media (prefers-reduced-motion: no-preference) {
  .s-10-faq__antwort[data-state="laden"] .s-10-faq__laden span { animation: s-10-faq-puls 1.1s var(--ease-out) infinite alternate; }
  .s-10-faq__laden span:nth-child(2) { animation-delay: 120ms; }
  .s-10-faq__laden span:nth-child(3) { animation-delay: 240ms; }
  .s-10-faq__antwort[data-state="antwort"] .s-10-faq__ausgabe,
  .s-10-faq__weiter:not([hidden]) {
    animation: s-10-faq-ein 320ms var(--ease-out) both;
  }
  .s-10-faq__weiter:not([hidden]) { animation-delay: 80ms; }
}
@keyframes s-10-faq-puls { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes s-10-faq-ein { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }

/* Eintritt von Überschrift und CTA (10-faq.js): Startzustand nur unter dem Motion-Gate, nur transform und clip-path;
   dieselben Werte stehen als „from“ im fromTo() der JS-Datei. Fragen und Karte bewegen sich nicht (bleiben bedienbar). */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .s-10-faq [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* FE-2 ST-04: eigener Bereich für „Frag mich alles“, seit V9-FX1 in der Fragen-Spalte direkt unter den Fragen (alle Breiten);
   die Button-Zeile nimmt die volle Breite, die Karte öffnet an derselben Stelle. */
.s-10-faq__ki { min-width: 0; margin-top: clamp(28px, 4vw, 40px); }
@media (min-width: 1024px) { .s-10-faq__ki { margin-top: 28px; } }
.s-10-faq__ki .s-10-faq__frag { margin-top: 0; }
@media (max-width: 1023px) { .s-10-faq__cta { margin-top: 32px; } }
/* V9-FX1 (desk-start-14): volle Breite nur mobil; 640–1023 bleibt der Knopf so breit wie sein Label (vorher 699-px-Pille) */
@media (max-width: 639px) {
  .s-10-faq__cta { justify-items: stretch; }
  .s-10-faq__knopf { width: 100%; }
}
/* V9-FX1 (mob-start-04): der Platzhalter bricht bei ≤ 400 px zweizeilig, das Feld zeigt beide Zeilen ganz */
@media (max-width: 400px) { .s-10-faq__eingabe { min-height: 80px; } }