/* NF Mentoring · Basis V2 (Shell und Bausteine)
   Grundlage: tokens.css; Bausteine und Klassennamen laut DESIGN.md V2 §3 (Referenz-CSS: freigegebener Hero-Prototyp
   .archive/v2-design-rev1/proto-hero.html). Enthält nur seitenweite Bausteine und die Shell (Header, Sticky-CTA,
   Footer, Video-Gate, Rechtsseiten). Section-Styles liegen in src/sections/NN-<name>.css unter .s-NN-<name>.
   Entfallen gegenüber V1: Filmkorn, Seitenzeitleiste, Eyebrow-Regel, eckige Versal-Buttons mit Linienpfeil.

   Motion-Vertrag (für alle Section-Autoren):
   - Ohne JS, bei reduced-motion und wenn GSAP fehlt (html.is-static) steht alles lesbar im Fluss.
   - Startzustände nur über transform / clip-path, nur innerhalb von
       @media (prefers-reduced-motion: no-preference) and (scripting: enabled) { html:not(.is-static) … }
     und das Element trägt data-motion (oder data-reveal). Die Regeln am Dateiende neutralisieren jeden Startzustand,
     sobald keine Motion läuft. Sicherheitsnetz: startet core.js nicht (html bekommt weder is-motion noch is-static),
     blendet nf-failsafe alles nach 3 s ein. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--nf-white-pure);   /* Rev. 5 (farbwelt-rev5 N9, §2.5): Umgebung und Überscroll weiß */
  color-scheme: light;
  /* Fokus nie unter Header oder Sticky-CTA (WCAG 2.4.11) */
  scroll-padding-top: calc(var(--header-h) + 24px);
  scroll-padding-bottom: 104px;
}
body {
  margin: 0;
  min-height: 100svh;
  background: var(--nf-white-pure);
  color: var(--text);   /* bleibt (Falle F5): Inhalte stehen in Theme-Sections */
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, address { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
main { display: block; position: relative; }
::selection { background: var(--nf-wine); color: var(--nf-cream); }
/* Rev. 7 (V11-A): auf Oliv und Rot wäre die rote Auswahl unsichtbar (Hintergrund = Fläche): Weiß mit dunklem Text.
   Helle Kacheln/Karten in dunklen Flächen (data-theme white/grey/olive-light) bekommen die Standard-Auswahl zurück. */
[data-theme="olive"]::selection, [data-theme="olive"] ::selection { background: var(--nf-white-pure); color: var(--nf-olive-deep); }
[data-theme="red"]::selection, [data-theme="red"] ::selection { background: var(--nf-white-pure); color: var(--nf-red-night); }
:is([data-theme="olive"], [data-theme="red"]) :is([data-theme="white"], [data-theme="grey"], [data-theme="olive-light"]) ::selection,
:is([data-theme="olive"], [data-theme="red"]) :is([data-theme="white"], [data-theme="grey"], [data-theme="olive-light"])::selection { background: var(--nf-wine); color: var(--nf-cream); }
:focus-visible { outline: 2px solid var(--focus-ring, var(--nf-red-light)); outline-offset: 3px; }

/* Scroll-Sperre (V11-A, natives Scrollen statt Lenis, bauplan v11 §3 P2): solange ein modaler Dialog (Lupe, Hero-Film,
   04-Galerie, Funnel) oder das Mobilmenü offen ist, scrollt die Seite dahinter nicht (Rad und Touch). Früher sperrte nur
   Lenis (html.lenis-stopped). Innere Scroller behalten ihr overscroll-behavior: contain. funnel.css (html.is-funnel-open) und
   frag-widget.css (html.fw-sperre) sperren zusätzlich selbst. scrollbar-gutter hält die Breite, damit nichts springt. */
html:has(dialog[open]), html:has(.site-header.is-menu-open) { overflow: hidden; scrollbar-gutter: stable; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-y); background: var(--bg-image, none) var(--bg); color: var(--text); }
/* Kopf-Fuß (Rev. 5 K2, Vorgaben E7): der Kopf jeder Seite (erste Section in main mit data-theme="white", also Startseite
   .s-01-hero und die 18 Unterseiten-Köpfe, alle mit .raster) läuft unten über --kopf-fade-h (160/240 px) von Weiß nach
   --kopf-fade-end aus. Endfarbe folgt der nächsten Section: Standard grey-100 (Folge weiß: die Kante bleibt sichtbar), vor Grau
   grey-50, vor olive-light #EEEFEB, vor olive/red #CBD5DF (Rev. 7); ohne :has()-Support bleibt der Standard. Artikel (01-text
   ohne .raster) und Rechtsseiten (main.legal) trifft die Regel nicht. Spezifität (0,3,1) schlägt das --bg-image: none des Themes white. */
main > .raster:first-child[data-theme="white"] { --kopf-fade-end: var(--nf-grey-100); --bg-image: var(--nf-grad-kopf-hell); }
main > .raster:first-child[data-theme="white"]:has(+ [data-theme="grey"]) { --kopf-fade-end: var(--nf-grey-50); }
/* Rev. 7 (V11-A): olive-light ist wieder eigene Fläche (Ende = erster Stopp #EEEFEB); vor olive und red läuft der Kopf in
   #CBD5DF aus, danach harte Kante auf die dunkle Fläche wie bei Webflow (Hero weiß mit grauem Fuß, dann Oliv). */
main > .raster:first-child[data-theme="white"]:has(+ [data-theme="olive-light"]) { --kopf-fade-end: var(--nf-olive-light); }
main > .raster:first-child[data-theme="white"]:has(+ [data-theme="olive"]),
main > .raster:first-child[data-theme="white"]:has(+ [data-theme="red"]) { --kopf-fade-end: var(--nf-kopf-fuss); }
/* FW5-FIX1 F1: Seiten mit nur einer Section in main (/404, /danke, /strategiesession): danach folgt außerhalb von main
   der Footer, den :has(+ …) nicht sieht. Kopf ist zugleich letztes Kind, also Ende in der Footer-Fläche (Rev. 6: grey-100). */
main > .raster:first-child:last-child[data-theme="white"] { --kopf-fade-end: var(--nf-footer-bg); }
/* Rev. 5 §2.5 (Falle F7): html ist light; dunkle Dialoge behalten dunkle native Controls und Scrollleisten
   (FW5-FIX1 F2: Galerie-Dialog der Startseite 04). V9-FX1: der Funnel ist seit Rev. 6 weiß, also helle Controls. */
.lupe, .consent__card, .s-04-inhalte__galerie { color-scheme: dark; }
.fn { color-scheme: light; }

/* Raster-Hintergrund (DESIGN §2.3): Pseudo-Element hinter dem Inhalt, zum Rand ausgeblendet. Revision 3: Textur nur auf
   Bordeaux; auf Oliv und Hell blendet --raster-on (tokens.css) es aus, ohne dass das Markup geändert werden muss. */
.raster { position: relative; isolation: isolate; }
.raster::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--nf-raster-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--nf-raster-line) 1px, transparent 1px);
  background-size: var(--nf-raster-size) var(--nf-raster-size);
  background-position: calc(50% + var(--nf-raster-size) / 2) 0;
  -webkit-mask-image: var(--nf-raster-mask);
  mask-image: var(--nf-raster-mask);
  opacity: var(--raster-on, 1);
}

/* ---------- Typografie (DESIGN §2.5): normale Schreibung, genau ein Akzentwort je Überschrift ---------- */
.h1 { margin: 0; color: var(--text); font: 800 var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--tracking-h1); text-wrap: balance; }
.h2 { margin: 0; color: var(--text); font: 800 var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--tracking-h2); text-wrap: balance; }
.h3 { margin: 0; color: var(--text); font: 800 var(--fs-h3)/var(--lh-h3) var(--font-sans); }
.lead { margin: 0; color: var(--text-soft); font-size: var(--fs-lead); line-height: var(--lh-lead); text-wrap: pretty; }
.accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(1em * var(--accent-scale));
  letter-spacing: 0;
  color: var(--accent-text, var(--nf-red-light));
}
.tnum { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Pille (Kicker): nur im Hero und höchstens in jedem zweiten Abschnitt. Farben aus den Rollen --pill-* (rot nur auf
   Bordeaux, auf Oliv weiß, auf Hell olive-deep; farbwelt.md §4) ---------- */
.pill {
  display: inline-flex; align-items: center;
  min-height: 32px;
  margin: 0;
  padding: 7px 14px 6px;
  border: 1px solid var(--pill-line);
  border-radius: var(--radius-pill);
  background: var(--pill-bg);
  color: var(--pill-text);
  font: 800 var(--fs-micro)/1.3 var(--font-sans);   /* 1,3: bricht eine Pille um (Funnel-Start 390 px), stehen die Zeilen nicht gequetscht; einzeilig bleibt die Höhe (min-height) */
  letter-spacing: var(--tracking-pill-sm);
  text-transform: uppercase;
}
@media (min-width: 480px) {
  .pill { min-height: 34px; padding: 7px 16px 6px; font-size: var(--fs-pill); letter-spacing: var(--tracking-pill); }
}
/* V10-D1 (Adrian 01.10.: „Mentoring für Versicherungsvermittler viel zu groß“; mass-start-01, mass-sub1-04, mass-sub2-08):
   unter 600 px ist jede Pille der kleine Kicker wie im Hero (keine Versalien, 12 px/600, 26 px hoch), ab 600 px unverändert.
   600 statt 700: Nunito Sans liegt nur in 400/600/800 vor. */
@media (max-width: 599px) {
  .pill {
    min-height: 26px;
    padding: 4px 11px;
    font-size: var(--fs-micro); font-weight: 600; line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: none;
  }
}

/* ---------- Buttons: primär (Pfeil im Innenkreis .btn__icon), sekundär, klein; Textlink mit Pfeil ---------- */
.btn {
  --btn-h: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: var(--btn-h);
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 800 var(--fs-btn)/1.2 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-press) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
/* V9-FX1 (mob-marke-12, mob-produkte-18): wo ein Knopf schmal umbrechen darf, ausgewogen statt Waise („… ob es / passt“) */
@media (max-width: 400px) { .btn { text-wrap: balance; } }
.btn:focus-visible { outline: 2px solid var(--focus-ring, var(--nf-red-light)); outline-offset: 3px; }
/* Rot ist die einzige Handlungsfarbe. Rev. 7 (V11-A): Webflow-Verlauf #AE1D2B nach #480C12, Label Weiß (6,98–15,71:1), Hover
   #B01627 nach #77111B. Rollen --btn1-* (tokens.css), auf red invers (Weiß, Text #AE1D2B). --btn-edge: 2-px-Kante Weiß auf
   olive/red (Knopf gegen Fläche sonst unter 3:1, WCAG 1.4.11). Rückfall = Standard-Rotverlauf. */
.btn-primary { padding-right: 8px; color: var(--btn1-text, var(--nf-white-pure)); background: var(--btn1-bg, var(--nf-wine) var(--nf-grad-btn)); box-shadow: var(--btn-edge, 0 0 0 0 transparent), var(--nf-shadow-btn); }
.btn__icon {
  display: grid; place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--nf-tint-icon);
  transition: transform var(--dur-ui) var(--ease-out);
}
.btn__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Sekundär: auf Bordeaux Creme-Kontur, auf Oliv Weiß, auf Hell Oliv-Kontur 1,5 px (Rollen --btn2-*) */
.btn-secondary { color: var(--btn2-text); background: transparent; border-width: var(--btn2-line-w, 1px); border-color: var(--btn2-line); }
.btn--sm { --btn-h: 44px; gap: 10px; padding: 0 20px; font-size: var(--fs-small); }
.btn-primary.btn--sm { padding-right: 20px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { color: var(--btn1-hover-text, var(--nf-white-pure)); background: var(--btn1-hover-bg, var(--nf-red-hover) var(--nf-grad-btn-hover)); box-shadow: var(--btn-edge, 0 0 0 0 transparent), var(--nf-shadow-btn-hover); }
  .btn-primary:hover .btn__icon { transform: translateX(3px); }
  .btn-secondary:hover { border-color: var(--btn2-hover-line); background: var(--btn2-hover-bg); color: var(--btn2-hover-text); }
}
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--text);
  font-weight: 800;
  font-size: var(--fs-btn);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-out);
}
.link-arrow span { text-wrap: balance; padding-bottom: 2px; background: linear-gradient(var(--link-line, currentColor), var(--link-line, currentColor)) 0 100% / 100% 1px no-repeat; }
.link-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-ui) var(--ease-out); }
.link-arrow:focus-visible { outline: 2px solid var(--focus-ring, var(--nf-red-light)); outline-offset: 3px; border-radius: 6px; }
/* V10-D1: bricht das Label mobil um, stand der Pfeil bis zu 104 px rechts neben dem letzten Wort (Flex-Kind nimmt die volle
   Breite). Unter 600 px läuft der Pfeil inline mit; nowrap am Link verbietet nur den Umbruch zwischen letztem Wort und Pfeil. */
@media (max-width: 599px) {
  .link-arrow { display: inline-block; padding-block: 10px; line-height: 24px; white-space: nowrap; text-wrap-style: balance; }
  .link-arrow span { white-space: normal; }
  .link-arrow svg { display: inline-block; margin-left: 8px; vertical-align: -3px; }
}
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { color: var(--accent-text, var(--nf-red-light)); }
  .link-arrow:hover svg { transform: translateY(2px); }
}

/* ---------- Haken-Liste ---------- */
.checks { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.checks li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: start;
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.5;
}
/* Rev. 5 (farbwelt-rev5 L1/L2, Vorgaben E5/E6): Haken sind keine Handlung und nicht rot. Scheibe/Zeichen aus den Theme-Rollen
   --nr-bg/--nr-text (Hell: Oliv-Scheibe, weißes Zeichen 5,84:1; dunkles Oliv: helle Scheibe, Zeichen olive-deep 11,44:1).
   --haken-bg/--haken-text sind Schalter für später und werden bewusst nirgends gesetzt (eine Zeile dreht die Farbe zurück). */
.checks__icon {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  margin-top: -2px;
  border-radius: var(--radius-pill);
  background: var(--haken-bg, var(--nr-bg));
  box-shadow: var(--ring-check, var(--nf-ring-red));
}
.checks__icon svg { width: 18px; height: 18px; fill: none; stroke: var(--haken-text, var(--nr-text)); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Kennzahl und Kennzahlenleiste (.stats--compact für schmale Spalten) ---------- */
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0;
  list-style: none;
  border: 1px solid var(--stats-line, var(--nf-line));
  border-radius: var(--radius-md);
  background: var(--stats-bg, var(--nf-tint-stats));
  box-shadow: var(--stats-shadow, var(--nf-highlight));
}
.stat { display: grid; align-content: start; gap: 6px; padding: clamp(16px, 2vw, 24px) clamp(16px, 2.2vw, 28px); }
.stat:nth-child(even) { border-left: 1px solid var(--hairline, var(--nf-line)); }
.stat:nth-child(n+3) { border-top: 1px solid var(--hairline, var(--nf-line)); }
.stat__value {
  color: var(--stat-value, var(--text));
  font: 800 var(--fs-stat)/1 var(--font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.stat__value em { font-style: normal; color: var(--stat-plus, var(--nf-red-light)); }   /* Ziffer auf Hell oliv, „+“ wine (farbwelt.md §4) */
.stat__label { color: var(--text-soft, var(--nf-text-soft)); font-size: var(--fs-small); line-height: 1.35; }
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat:nth-child(n+3) { border-top: 0; }
  .stat + .stat { border-left: 1px solid var(--hairline, var(--nf-line)); }
}
.stats--compact .stat { gap: 5px; padding: 16px 18px 15px; }
.stats--compact .stat__value { font-size: var(--fs-stat-compact); }
.stats--compact .stat__label { font-size: var(--fs-caption); }
/* V10-D1: bei 320/360 px lief „12.000+“ in die Nachbarzelle (/blog kompakt 16 bzw. 3 px über die Linie, /uber-uns 2 px ins
   Polster): schmaleres Polster, kompakte Werte schrumpfen mit der Breite (320 px: 26 → 21 px, 360 px: 23 px) */
@media (max-width: 359px) { .stat { padding-inline: 12px; } }
@media (max-width: 399px) {
  .stats--compact .stat { padding-inline: 10px; }
  .stats--compact .stat__value { font-size: min(var(--fs-stat-compact), 6.5vw); }
}

/* ---------- Bildrahmen (Doppelrand) für echte Bilder, Grafiken und Videos ---------- */
.frame {
  position: relative;
  margin: 0;
  padding: var(--frame-pad);
  border: 1px solid var(--surface-card-line, var(--nf-line));
  border-radius: var(--radius-lg);
  background: var(--frame-bg, var(--nf-grad-frame));
  box-shadow: var(--shadow-media);
}
.frame__media { display: block; width: 100%; height: auto; border-radius: calc(var(--radius-lg) - var(--frame-pad)); }
.frame--sm { --radius-lg: 20px; --frame-pad: 6px; box-shadow: var(--shadow-card); }
.frame figcaption, .frame__caption { margin-top: 10px; color: var(--text-mute); font-size: var(--fs-small); }
.frame > .consent { border-radius: calc(var(--radius-lg) - var(--frame-pad)); }

/* ---------- Video-Rahmen mit Play-Knopf im Zwei-Klick-Gate (RULES → Recht) ----------
   Markup: <div class="consent" data-consent-src="…" data-consent-provider="wistia|vimeo|youtube" data-consent-title="…"
             [data-consent-dauer="2:24"] [data-consent-verb="Film ansehen"]><img class="consent__poster" …></div>
   core.js fügt die Bedienung aus <template id="nf-consent-template"> ein (src/shell/consent.html).
   R6-H (29.09.): ein Play-Bauteil für alle Poster. Ganze Fläche klickbar, sichtbar ein runder Knopf (Wein-Verlauf, Dreieck
   creme 38 %, cremefarbener Ring 3 px) auf einem Radial-Scrim, der den Ring auf jedem Poster über 3 : 1 hebt, dazu die
   Pille „Video ansehen · 2:24“ unten links. V7 (Adrian 01.10.: „Playbutton nicht in der Mitte“): Knopf immer exakt mittig,
   keine Versätze je Film und keine Klemme mehr; auf kleinen Postern schrumpft er stufenlos (@container unten).
   Nie per display:none verstecken. */
.consent {
  --consent-ratio: 1.7778;   /* Breite / Höhe; Sections dürfen überschreiben */
  --play-size: clamp(72px, 7vw, 96px);
  --play-x: 50%;             /* Knopfmitte im Poster */
  --play-y: 50%;
  --play-ring: 0 0 0 3px var(--nf-cream), 0 0 0 10px rgb(174 29 43 / 0.3), 0 14px 34px -4px rgb(5 5 6 / 0.65);
  --play-ring-hover: 0 0 0 3px var(--nf-cream), 0 0 0 15px rgb(174 29 43 / 0.26), 0 18px 40px -4px rgb(5 5 6 / 0.7);
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  border-radius: calc(var(--radius-lg) - var(--frame-pad));
  background: var(--nf-ink-0);
  color: var(--nf-cream);
}
.consent__poster, .consent > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Höhe über Padding statt aspect-ratio: aspect-ratio würde die min-height der Consent-Karte in die Breite übertragen */
.consent::after { content: ""; display: block; padding-top: calc(100% / var(--consent-ratio)); }
/* --play-top ist nur noch ein Alias für die Postermitte (V7: die frühere Klemme über der Pille schob den Knopf auf Postern
   unter 341 px Breite nach oben); Scrim und Knopf lesen ihn weiter */
.consent__ui { --play-top: var(--play-y); position: absolute; inset: 0; z-index: 2; }
/* Scrim nur um den Knopf (Durchmesser etwa 2,6 × Knopf), das übrige Poster bleibt unverdeckt */
.consent__ui::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--play-x) var(--play-top), rgb(5 5 6 / 0.5) calc(var(--play-size) * 0.5), rgb(5 5 6 / 0.26) calc(var(--play-size) * 0.85), rgb(5 5 6 / 0) calc(var(--play-size) * 1.3));
  pointer-events: none;
}
.consent__play {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--nf-cream);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.consent__play:focus-visible { outline: none; }
.consent__knopf {
  position: absolute; left: var(--play-x); top: var(--play-top);
  display: grid; place-items: center;
  width: var(--play-size);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--nf-wine) var(--nf-grad-btn);
  box-shadow: var(--play-ring);
  translate: -50% -50%;
  transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.consent__knopf svg { width: 38%; height: auto; margin-left: 7%; fill: currentColor; }
.consent__play:active .consent__knopf { transform: scale(0.95); transition-duration: var(--dur-press); }
.consent__play:focus-visible .consent__knopf { outline: 2px solid var(--nf-cream); outline-offset: 6px; }
.consent__label {
  position: absolute;
  left: clamp(10px, 1.6vw, 16px); bottom: clamp(10px, 1.6vw, 16px);
  z-index: 2;
  display: block;
  max-width: calc(100% - 20px);
  overflow: hidden;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgb(241 237 232 / 0.18);
  border-radius: var(--radius-pill);
  background: rgb(5 5 6 / 0.72);
  color: var(--nf-cream);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}
/* Kleine Poster (16:9 unter 340 px Breite): Knopf bleibt exakt mittig, schrumpft stufenlos (72 px bei 313 px Breite, 44 px
   Minimum), die Pille wird kompakter, damit sie den Knopf nicht berührt (Messung /tmp/nf-v7/ergebnis-play-knopf-messung.json) */
@container (max-width: 340px) {
  .consent__ui { --play-size: clamp(44px, 23cqi, 72px); }
  .consent__label { left: 8px; bottom: 8px; padding: 5px 11px; font-size: 0.75rem; }
}
.consent__card {
  position: absolute; inset: 0; z-index: 3;
  display: grid; align-content: center; gap: 12px;
  padding: clamp(16px, 3vw, 32px);
  background: var(--scrim-card, var(--nf-scrim-card));   /* auf Bordeaux bordeaux-getönt, sonst neutral (--nf-scrim-neutral) */
  color: var(--nf-text-soft);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.98);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
}
.consent[data-state="ask"] .consent__card { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.consent[data-state="ask"] .consent__play, .consent[data-state="ask"] .consent__label { opacity: 0; visibility: hidden; }
.consent__head { display: flex; align-items: center; gap: 10px; padding-right: 36px; color: var(--nf-cream); font-size: var(--fs-body); font-weight: 800; }
.consent__head svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.consent__text a { color: var(--consent-link, var(--nf-red-light)); }   /* auf Bordeaux red-light wie bisher, sonst Creme */
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.consent__remember { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--fs-caption); cursor: pointer; }
.consent__remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--nf-wine); }
.consent__close {
  position: absolute; top: 8px; right: 8px;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0; border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--nf-text-soft);
}
.consent__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.consent iframe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; background: var(--nf-ink-0); }
.consent[data-state="playing"] .consent__ui { opacity: 0; visibility: hidden; }
@container (max-width: 560px) {
  .consent__card { gap: 8px; padding: 16px 18px; font-size: var(--fs-caption); overflow: auto; }
}
/* reduced-motion: Karte samt Inhalt sofort sichtbar. Die globale Regel überblendet dort auch visibility; sonst ist
   „Video laden“ im Moment des Fokussprungs noch hidden und der Fokus fällt auf body */
@media (prefers-reduced-motion: reduce) {
  .consent .consent__card, .consent .consent__card * { transition-duration: 0s; transition-delay: 0s; }
}
/* Die Karte braucht mehr Höhe als ein kleines Poster: wächst erst nach dem Klick (nutzerausgelöst, kein CLS) */
.consent[data-state="ask"] { min-height: 17.5rem; }
/* Ohne JS kein Gate: Titel und Hinweis unten auf einem Verlauf statt leerer Fläche */
@media (scripting: none) {
  .consent::before {
    content: attr(data-consent-title) " · Video mit aktiviertem JavaScript ansehen";
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: flex-end;
    padding: 16px;
    background: linear-gradient(180deg, rgb(5 5 6 / 0) 45%, rgb(5 5 6 / 0.7) 100%);
    color: var(--nf-cream);
    font-size: var(--fs-caption);
    font-weight: 600;
    pointer-events: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .consent__play:hover .consent__knopf { transform: scale(1.06); box-shadow: var(--play-ring-hover); }
  .consent__close:hover { color: var(--nf-cream); background: rgb(241 237 232 / 0.06); }
}

/* ---------- Bewertung (5,0 · Sterne in Creme · Quelle) ---------- */
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; color: var(--text-soft); font-size: var(--fs-small); line-height: 1.3; }
.rating__score { color: var(--text); font-size: var(--fs-body); font-weight: 800; }
.rating__stars { display: inline-flex; gap: 3px; color: var(--text); }   /* Creme auf Bordeaux, Weiß auf Oliv, Tinte auf Hell */
.rating__stars svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- Karte dunkel / hell (Doppelrand: Bild sitzt 8 px im Kartenrand) ---------- */
.card {
  display: flex; flex-direction: column;
  padding: var(--frame-pad);
  border: 1px solid var(--nf-line);
  border-radius: var(--radius-md);
  background: var(--nf-grad-card);
  color: var(--nf-text);
  box-shadow: var(--nf-highlight), var(--nf-shadow-card);
  transition: border-color var(--dur-ui) var(--ease-out);
}
.card--light { border-color: var(--nf-line-on-light); background: var(--nf-white); color: var(--nf-ink); box-shadow: 0 20px 50px -30px rgb(45 9 18 / 0.35); }
.card__media { overflow: hidden; margin: 0; border-radius: calc(var(--radius-md) - var(--frame-pad)); aspect-ratio: 16 / 10; background: var(--nf-ink-0); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 14px 14px; }
.card__title { margin: 0; color: var(--nf-text); font: 800 var(--fs-h3)/var(--lh-h3) var(--font-sans); }
.card__text { margin: 0; color: var(--nf-text-soft); font-size: var(--fs-body); line-height: 1.55; }
.card__gain {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--nf-line);
  color: var(--nf-text);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.card__gain strong { color: var(--nf-red-light); font-weight: 800; }
.card__gain-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--nf-wine) var(--nf-grad-btn); }
.card__gain-icon svg { width: 12px; height: 12px; fill: none; stroke: var(--nf-cream); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.card--light .card__title, .card--light .card__gain { color: var(--nf-ink); }
.card--light .card__text { color: var(--nf-graphite); }
.card--light .card__gain { border-top-color: var(--nf-line-on-light); }
.card--light .card__gain strong { color: var(--nf-wine); }
@media (min-width: 768px) { .card__media { aspect-ratio: 4 / 3; } }   /* mobil 16:10 */
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--nf-line-strong); }
  .card:hover .card__media img { transform: scale(1.03); }
}

/* ---------- Abschnittskopf ---------- */
.section-head { display: grid; justify-items: start; gap: 16px; max-width: 46rem; margin-bottom: var(--section-head-gap); }
.section-head--center { justify-items: center; margin-inline: auto; text-align: center; }

/* ---------- Akkordeon (details/summary, ohne JS funktionsfähig) ---------- */
.accordion { display: grid; gap: 10px; }
.accordion__item {
  border: 1px solid var(--acc-line);
  border-radius: var(--radius-sm);
  background: var(--acc-bg);
  box-shadow: var(--acc-shadow);
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.accordion__item[open] { border-color: var(--acc-open-line); background: var(--acc-open-bg); }
.accordion__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px;
  padding: 14px 18px;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:focus-visible { outline: 2px solid var(--focus-ring, var(--nf-red-light)); outline-offset: 2px; border-radius: var(--radius-sm); }
.accordion__icon {
  display: grid; place-items: center;
  flex: none;
  width: 28px; height: 28px;
  border: 1px solid var(--acc-icon-line);
  border-radius: var(--radius-pill);
  transition: transform var(--dur-ui) var(--ease-spring);
}
.accordion__icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.accordion__item[open] .accordion__icon { transform: rotate(45deg); }
.accordion__panel { max-width: var(--maxw-text); padding: 0 18px 18px; color: var(--text-soft); }
@media (hover: hover) and (pointer: fine) { .accordion__item:not([open]):hover { border-color: var(--acc-open-line); } }
/* FE-2 M8: weiches Öffnen (Höhe über ::details-content + interpolate-size, Inhalt opacity + y 6 px). Ohne Unterstützung
   oder mit reduced-motion springt die Höhe wie bisher; das Icon dreht wie bisher. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .accordion__item { interpolate-size: allow-keywords; }
  .accordion__item::details-content {
    block-size: 0; overflow-y: clip;
    transition: block-size 260ms var(--ease-spring), content-visibility 260ms allow-discrete;
  }
  .accordion__item[open]::details-content { block-size: auto; }
  .accordion__panel { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
  .accordion__item:not([open]) .accordion__panel { opacity: 0; transform: translateY(6px); }
}

/* ---------- Vergleichsspalten: links gedämpft, rechts hervorgehoben ---------- */
.compare { display: grid; gap: var(--col-gap); }
.compare__col { padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--compare-off-bg); }
.compare__col--with { border-color: var(--compare-with-line); background: var(--surface-card); box-shadow: var(--shadow-media); }
.compare__head { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--text); font: 800 var(--fs-h3)/1.3 var(--font-sans); }
.compare__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }   /* gleiche Anzahl und Reihenfolge links/rechts */
.compare__col:not(.compare__col--with) .compare__list { color: var(--text-mute); }
@media (min-width: 900px) { .compare { grid-template-columns: 1fr 1fr; } }

/* ---------- Schritt-Anzeige ---------- */
.steps { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps__item { position: relative; display: grid; align-content: start; gap: 10px; padding-top: 0; padding-left: 64px; min-height: 44px; }
.steps__num {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--nr-bg);
  color: var(--nr-text);
  font-weight: 800;
  box-shadow: var(--nr-ring);
}
.steps__item:not(:last-child)::after {   /* mobil: senkrechte Linie links */
  content: "";
  position: absolute; top: 52px; left: 22px; bottom: -24px;
  width: 1px;
  background: linear-gradient(180deg, var(--line), transparent);
}
.steps__title { margin: 0; color: var(--text); font: 800 var(--fs-h3)/1.3 var(--font-sans); text-wrap: balance; }   /* V9-FX1: keine Waisen („… / ein“) */
.steps__text { margin: 0; color: var(--text-soft, var(--nf-text-soft)); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
  .steps__item { padding-top: 64px; padding-left: 0; }
  /* Nebeneinander: Titel oben, Texte aller Schritte einer Reihe auf gemeinsamer Linie. Jeder Schritt (Titel + Text) belegt zwei
     Zeilen des Rasters (Subgrid), die Titelzeile richtet sich nach dem längsten Titel; ohne Subgrid bleibt align-content: start
     (Slice V5-FX2, vorher bis 29 px Versatz). */
  @supports (grid-template-rows: subgrid) {
    .steps__item { grid-row: span 2; grid-template-rows: subgrid; row-gap: 10px; }
  }
  .steps__item:not(:last-child)::after { top: 22px; left: 60px; right: -12px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
}

/* ---------- Flächen (Revision 3, farbwelt.md §2): Die Bausteine oben lesen nur Rollen-Variablen aus tokens.css
   (--pill-*, --nr-*, --stat-*, --btn2-*, --ring-check, --zr-*, --focus-ring, --surface-card, --shadow-card, --shadow-media,
   --scrim-card …). Jedes Theme setzt sie selbst, auch eine dunkle Karte in einer hellen Section (CTA-Karte 09). Die früheren
   Creme-Varianten und :is(bordeaux, bordeaux-2, ink)-Listen entfallen; Bordeaux und Creme behalten ihre Werte. ---------- */

/* ---------- Revision 2: Zeichnungen, Stationen, Originale (DESIGN.md §3 Rev. 2 und §4.4; Referenz proto-erklaer.html) ----------
   Die Zeichnung selbst (svg.zeichnung mit den Klassen z-*) stylt src/zeichnungen/zeichnung.css, das build.mjs vor die
   Section-Styles in sections.css setzt. Einbinden im Section-HTML: <!-- @zeichnung name -->. Aufbau beim Eintritt
   übernimmt core.js (NF.zeichnung) für jedes svg.zeichnung; ohne JS und bei reduced-motion steht sie fertig da.
   Farben der Zeichnung folgen dem data-theme des Abschnitts (--z-* je Theme in tokens.css: hell auf white/grey/olive-light/cream,
   oliv auf olive, dunkler Satz auf bordeaux/ink). */
.zeichnung-rahmen {
  position: relative;
  margin: 0;
  padding: 10px 10px 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--zr-bg);
  box-shadow: var(--zr-shadow);
}

/* Stationen: <ol class="stationen"> aus <li class="station">, die Reihenfolge ist der Ablauf.
   1 Spalte < 640 px (Pfeil ↓ darunter), 2 Spalten 640–1023 px (ohne Pfeile), 3 Spalten ab 1024 px (Pfeil → im Abstand).
   <li class="station">
     <div class="zeichnung-rahmen"><!-- @zeichnung name -->[Pfeil --quer][a.station__original]</div>
     <div class="station__text"><div class="station__kopf"><span class="station__nr" aria-hidden="true">1</span>
       <h3 class="station__titel">…</h3></div><p class="station__satz">…</p></div>
     [Pfeil --ab]
   </li> */
.stationen {
  --station-gap: 48px;
  display: grid;
  gap: 56px var(--station-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .stationen { --station-gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stationen { --station-gap: 48px; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.station { position: relative; display: grid; align-content: start; min-width: 0; }
.station__text { display: grid; gap: 6px; margin-top: 20px; }
.station:has(.station__original) .station__text { margin-top: 30px; }   /* Platz für das Original am Rahmen */
.station__kopf { display: flex; align-items: baseline; gap: 10px; }
.station__nr {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 30px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--nr-bg);
  color: var(--nr-text);
  font: 800 0.75rem/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  transform: translateY(-2px);
}
.station__titel { margin: 0; color: var(--text); font: 800 var(--fs-h3)/var(--lh-h3) var(--font-sans); text-wrap: balance; }
.station__satz { margin: 0; color: var(--text-soft); line-height: 1.55; text-wrap: pretty; }   /* ≤ 85 Zeichen = 2 Zeilen bei 1440 */

/* Original am Rahmen: <a class="station__original" href="…-1200.webp" data-lupe><img …><span class="station__lupe">…</span></a>
   object-position je Bild per Klasse in der Section-CSS, nie inline (CSP) */
.station__original {
  position: absolute;
  right: 14px;
  bottom: -26px;
  z-index: 2;
  display: block;
  width: clamp(112px, 40%, 156px);
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--raised-bg);
  box-shadow: var(--raised-shadow);
  transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.station__original img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.station__original:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.station__lupe {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--nr-bg);
  color: var(--nr-text);
  box-shadow: 0 0 0 3px var(--bg);
}
.station__lupe svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (max-width: 639px) { .station__original { width: 116px; bottom: -22px; } }
@media (hover: hover) and (pointer: fine) {
  .station__original:hover { transform: translateY(-2px); }
}

/* Pfeil zwischen Stationen (rot, 2,5 px, aria-hidden). --quer steht im .zeichnung-rahmen und zeigt ab 1024 px im
   Spaltenabstand auf Rahmenmitte nach rechts (nicht nach jeder 3. Station); --ab steht in der .station und zeigt
   unter 640 px nach unten (nicht nach der letzten). Markup:
   <span class="station__pfeil station__pfeil--quer" aria-hidden="true"><svg viewBox="0 0 48 16"><path d="M2 8h43M38 2l7 6-7 6"/></svg></span>
   <span class="station__pfeil station__pfeil--ab" aria-hidden="true"><svg viewBox="0 0 16 40"><path d="M8 2v35M2 31l6 7 6-7"/></svg></span> */
.station__pfeil { position: absolute; display: none; color: var(--pfeil, var(--z-akzent)); pointer-events: none; }   /* Rev. 7: Rolle --pfeil (olive #EEEFEB, red Weiß) */
.station__pfeil svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: var(--z-pfeil); stroke-linecap: round; stroke-linejoin: round; }
.station__pfeil path { vector-effect: non-scaling-stroke; }
.station__pfeil--quer { top: 50%; left: calc(100% + 6px); width: calc(var(--station-gap) - 12px); height: 16px; margin-top: -8px; }
.station__pfeil--ab { top: calc(100% + 10px); left: 50%; width: 14px; height: 36px; margin-left: -7px; }
@media (max-width: 639px) { .station:not(:last-child) > .station__pfeil--ab { display: block; } }
@media (min-width: 1024px) { .station:not(:last-child):not(:nth-child(3n)) .station__pfeil--quer { display: block; } }

/* Bild-Vergrößerung: <dialog class="lupe"> baut core.js (NF.lupe) für jeden a[data-lupe]; ohne JS öffnet der Link die Datei.
   Rev. 6 (V9-A0): Fenster neutral dunkel (--nf-dialog-*), kein Oliv mehr, auch der Hero-Film-Dialog (.lupe.s-01-hero__dialog).
   Die Rollen für Inhalte im Fenster (Medienrahmen, Consent-Karte, Text) setzt .lupe selbst, damit es gleich aussieht, ob das
   Markup data-theme="olive", ein helles Theme oder gar keins trägt (Spezifität gleich, base.css kommt nach tokens.css). */
.lupe {
  --text: var(--nf-white-pure);   --text-soft: rgb(255 255 255 / 0.78);   --text-mute: rgb(255 255 255 / 0.64);
  --hairline: var(--nf-dialog-line);   --accent-text: var(--nf-white-pure);   --focus-ring: var(--nf-white-pure);
  --frame-bg: rgb(255 255 255 / 0.04);   --shadow-media: none;
  --scrim-card: var(--nf-scrim-neutral);   --consent-link: var(--nf-cream);
  --nf-text: var(--nf-cream);   --nf-text-soft: rgb(241 237 232 / 0.78);   --nf-text-mute: rgb(241 237 232 / 0.62);
  --raster-on: 0;
  width: min(92vw, 760px);
  max-width: none;
  max-height: 92dvh;
  margin: auto;
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--nf-dialog-line);
  border-radius: var(--radius-lg);
  background: var(--nf-dialog-bg);
  color: var(--text);
  box-shadow: var(--nf-dialog-highlight), var(--nf-dialog-shadow);
}
.lupe::backdrop { background: var(--nf-backdrop); }
/* V9-FX1: das Bild-Fenster (core.js setzt .lupe--bild und die Maße des Vorschaubilds) schmiegt sich an das Format,
   Hochformat ohne breite dunkle Ränder; der Film-Dialog im Kopf (.lupe.s-01-hero__dialog) behält die feste Breite */
.lupe--bild { width: fit-content; max-width: min(92vw, 760px); }
/* Hochformat (Superplayer 700 × 1315, Hall of Fame) passt ganz in die Höhe; Querformat füllt die Breite */
.lupe__bild { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(92dvh - 18px); margin-inline: auto; border-radius: calc(var(--radius-lg) - 8px); }
.lupe__schliessen {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--nf-dialog-btn-line);
  border-radius: var(--radius-pill);
  background: var(--nf-dialog-glass);   /* Rev. 6: neutral statt Oliv-Glas */
  color: var(--nf-white-pure);
  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);
}
.lupe__schliessen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lupe__schliessen:active { transform: scale(0.97); }
.lupe__schliessen:focus-visible { outline: 2px solid var(--nf-white-pure); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .lupe__schliessen:hover { border-color: rgb(255 255 255 / 0.5); background-color: rgb(8 8 10 / 0.86); } }
@media (prefers-reduced-motion: no-preference) {
  .lupe[open] { animation: nf-lupe var(--dur-ui) var(--ease-out); }
  .lupe[open]::backdrop { animation: nf-lupe-grund var(--dur-ui) var(--ease-out); }
}
@keyframes nf-lupe { from { opacity: 0; transform: scale(0.98); } }
@keyframes nf-lupe-grund { from { opacity: 0; } }

/* Freisteller mit Alpha (.objekt): kein Rahmen, nie beschnitten; auf Bordeaux roter Glow, auf Oliv Oliv-Licht (--nf-glow-olive),
   auf Hell zarte Bodenellipse (Rollen --objekt-* in tokens.css) */
.objekt { position: relative; margin: 0; isolation: isolate; }
.objekt img { display: block; width: 100%; height: auto; }
.objekt::before { content: ""; position: absolute; inset: var(--objekt-inset); height: var(--objekt-h); z-index: -1; border-radius: 50%; background: var(--objekt-bg); pointer-events: none; }

/* Geräterahmen für echte Plattform-Screens (.geraet > img), Screens unbeschnitten */
.geraet {
  margin: 0;
  padding: 10px 10px 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--nf-ink-2), var(--nf-ink));
  box-shadow: inset 0 0 0 1px rgb(241 237 232 / 0.12), var(--nf-shadow-card);
}
.geraet img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* CTA-Karte (09, /marketingmastermind 02): <div class="cta-karte raster" data-theme="grey|white">. Rev. 6 (V9-A0): helle Karte.
   Fläche aus dem eigenen Theme (--bg), Haarlinie --hairline (grey: grey-100, white: line-soft), weicher Schatten statt
   --nf-shadow-lift; das Raster blendet --raster-on auf Hell aus. Regel für das Markup: Karte auf weißer Section → grey,
   Karte auf grauer Section → white (sonst Grau auf Grau). Dunkle Themes (olive, bordeaux) funktionieren weiter als Rückfall. */
.cta-karte {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 56px);
  background: var(--bg-image, none) var(--bg);
  color: var(--text);   /* Rev. 5 (Falle F6): Rolle statt Primitive */
  box-shadow: 0 0 0 1px var(--hairline), var(--nf-shadow-soft);
}

/* ---------- Zeilen-Masken (NF.splitLines) ----------
   Oben .12em (Umlautpunkte), unten .2em (Playfair-Unterlängen); negative Ränder halten das Layout identisch. */
.line { display: block; overflow: hidden; padding: .12em 0 .2em; margin: -.12em 0 -.2em; }
.line__inner { display: block; }

/* ---------- Hilfsklassen ---------- */
.sr-only, .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: 16px; z-index: var(--z-skip);
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  background: var(--nf-cream); color: var(--nf-ink);
  font-size: var(--fs-small); font-weight: 800;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform var(--dur-ui) var(--ease-out);
}
/* Fokus zweifarbig (V7-FIX-R1): Ring Weiß innen, olive-deep außen (13,2:1 zueinander). Auf Oliv trägt der weiße Ring (≥ 9:1),
   auf weißen Köpfen (Rechtsseiten, Artikel) die dunkle Kante (13,2:1); wine hatte auf Oliv nur 1,89:1 */
.skip-link:focus-visible { transform: none; outline: 2px solid var(--nf-white-pure); outline-offset: 0; box-shadow: 0 0 0 4px var(--nf-olive-deep); }
.icon { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header (Rev. 5, farbwelt-rev5 §1.1 N1–N10): vollbreite, fixe, deckend weiße Leiste, in jedem Zustand gleich
   (oben, kompakt, über jeder Fläche, Minimal-Kopf, ohne JS, reduzierte Bewegung/Transparenz). Kein Glas, kein Blur, kein
   Radius, keine Flächenmessung. Logo = genau eine Datei (dunkle Fassung logo-nf). Navigation ab 900 px in der Leiste,
   darunter Menü-Knopf mit Panel. Die Leiste fängt Klicks selbst ab (pointer-events wie Standard, Falle F8). ---------- */
.site-header {
  --focus-ring: var(--nf-wine);                    /* 6,98:1 auf Weiß */
  --nf-shadow-btn: var(--nf-shadow-btn-hell);   --nf-shadow-btn-hover: var(--nf-shadow-btn-hell-hover);   /* roter CTA ohne rosa Hof */
  position: fixed; inset: var(--header-top) 0 auto;
  z-index: var(--z-header);
  background: var(--nf-white-pure);
  color: var(--nf-ink);
}
.site-header__bar {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  height: var(--header-bar);
}
.site-header__logo { display: grid; align-items: center; min-height: 44px; flex: none; border-radius: 8px; }   /* Tippfläche ≥ 44 px */
.site-header__logo img { width: auto; height: 34px; }
.site-header__cta { margin-left: auto; }
@media (min-width: 900px) {
  .site-header__bar { gap: 8px; }
  .site-header__logo img { height: 40px; }
  .site-header__cta { margin-left: 12px; }
}

/* ---------- Navigation (Slice V5-P0, Plan „Navigation live (exakt)“): Produkte ▾ · Wissen · Ergebnisse · Über uns · Blog
   Markup aus build.mjs (src/shell/nav.json). Ab 900 px in der Leiste mit Mega-Menü (weiß, Kacheln mit Bild), darunter Panel
   hinter dem Menü-Knopf. core.js: .is-open am Produkte-Eintrag (Hover, Klick, Tastatur, Esc), .is-menu-open am Header
   (Fokusfalle, Esc). Ohne JS: Mega-Menü per :hover/:focus-within, Mobilpanel entfällt (Seiten stehen im Footer). ---------- */
.site-nav { display: none; }
.site-nav__list, .site-nav__kacheln { margin: 0; padding: 0; list-style: none; }
.site-nav__list { display: flex; align-items: center; gap: 2px; }
.site-nav__item { position: relative; }
.site-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px;
  border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--nf-graphite);   /* Rev. 5 N5: 9,74:1 auf der Leiste */
  font: 600 var(--fs-nav)/1.2 var(--font-sans);
  text-decoration: none; cursor: pointer;
  transition: color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.site-nav__link:focus-visible, .site-nav__kachel:focus-visible, .site-header__menu:focus-visible { outline: 2px solid var(--focus-ring, var(--nf-wine)); outline-offset: 2px; }
/* aktiv: Tinte auf Oliv-Tönung mit 2-px-Oliv-Unterstrich (N5; kein Rot, kein Weiß auf Weiß), 17,99:1 */
.site-nav__link[aria-current="page"], .site-nav__link.is-active, .site-nav__item--drop.is-active > .site-nav__link {
  color: var(--nf-ink); background: var(--nf-tint-olive);
  text-decoration: underline; text-decoration-color: var(--nf-olive); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.site-nav__chevron { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
.site-nav__drop-btn[aria-expanded="true"] .site-nav__chevron { transform: rotate(180deg); }
/* Kacheln einer Reihe gleich hoch (V7-FIX-R1): Zeile streckt die li, die li streckt den Link */
.site-nav__kacheln { align-items: stretch; }
.site-nav__kacheln > li { display: grid; }
.site-nav__kachel { display: grid; align-content: start; gap: 4px; padding: 8px; border-radius: 16px; color: var(--nf-ink); background: var(--nf-grey-50); text-decoration: none; transition: background-color var(--dur-ui) var(--ease-out); }
.site-nav__kachel-bild { width: 100%; height: auto; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: 12px; object-fit: cover; background: var(--nf-grey-100); }   /* Rev. 6: Platzhalter grau statt olive-deep */
.site-nav__kachel-titel { font-weight: 800; font-size: 1rem; line-height: 1.25; }
.site-nav__kachel-text { color: var(--nf-graphite); font-size: var(--fs-small); line-height: 1.4; }
.site-nav__kachel[aria-current="page"] .site-nav__kachel-titel { color: var(--nf-wine); }

/* Menü-Knopf (unter 900 px): zwei Striche in Tinte, offen ein X */
.site-header__menu {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; margin-left: -6px; padding: 0;
  border: 1px solid var(--nf-line-soft-strong); border-radius: 50%;
  background: transparent; color: var(--nf-ink); cursor: pointer;
}
.site-header__menu-icon { position: relative; width: 18px; height: 12px; }
.site-header__menu-icon span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 200ms var(--ease-out), top 200ms var(--ease-out); }
.site-header__menu-icon span:first-child { top: 1px; }
.site-header__menu-icon span:last-child { top: 9px; }
.site-header__menu[aria-expanded="true"] .site-header__menu-icon span:first-child { top: 5px; transform: rotate(45deg); }
.site-header__menu[aria-expanded="true"] .site-header__menu-icon span:last-child { top: 5px; transform: rotate(-45deg); }
@media (scripting: none) { .site-header__menu { display: none; } }

/* Mobil offen (N8 + Vorgaben E4): Panel bündig unter der Leiste, über die volle Bildschirmbreite (der .container hat den
   Gutter als Außenabstand), nur unten gerundet. Kein Spalt zwischen Leiste und Panel, keine Seitenstreifen über dunklen Flächen. */
@media (max-width: 899.98px) {
  .site-header.is-menu-open .site-nav {
    display: block;
    position: absolute; top: 100%; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter));
    max-height: calc(100svh - var(--header-h) - 12px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px calc(var(--gutter) - 8px) 16px;
    border-top: 1px solid var(--nf-grey-100); border-radius: 0 0 24px 24px;
    background: var(--nf-white-pure);
    box-shadow: var(--nf-shadow-lift);
  }
  .site-nav__list { flex-direction: column; align-items: stretch; }
  .site-nav__link { justify-content: space-between; width: 100%; min-height: 48px; padding: 0 16px; color: var(--nf-ink); font-size: 1.0625rem; }
  .site-nav__mega { display: none; padding: 4px 6px 10px; }
  .site-nav__item--drop.is-open .site-nav__mega { display: block; }
  .site-nav__kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: no-preference) {
  .site-header.is-menu-open .site-nav { animation: site-nav-in 200ms var(--ease-out); }
  @keyframes site-nav-in { from { opacity: 0; transform: translateY(-6px); } }
}

@media (min-width: 900px) {
  .site-header__menu { display: none; }
  .site-nav { display: block; margin-left: auto; }
  .site-nav__mega {
    position: absolute; top: calc(100% + 14px); left: 50%;
    width: max-content; padding: 10px;
    border-radius: 24px;
    background: var(--nf-white-pure); color: var(--nf-ink);   /* Weiß, Kacheln grey-50 */
    box-shadow: 0 28px 60px -28px rgb(8 8 10 / 0.6), 0 0 0 1px var(--nf-line-soft);
    opacity: 0; visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
  }
  .site-nav__mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }   /* Hover-Brücke zur Leiste */
  .site-nav__item--drop.is-open .site-nav__mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s; }
  .site-nav__kacheln { display: grid; grid-auto-flow: column; grid-auto-columns: 196px; gap: 6px; }
}
@media (scripting: none) and (min-width: 900px) {
  .site-nav__item--drop:hover .site-nav__mega, .site-nav__item--drop:focus-within .site-nav__mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: none; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .site-nav__link:hover { color: var(--nf-ink); background: rgb(51 56 63 / 0.06); }   /* Rev. 6: neutral statt olive-getönt */
  .site-nav__kachel:hover { background: var(--nf-grey-100); }
}
@media (hover: hover) and (pointer: fine) {
  .site-header__menu:hover { border-color: var(--nf-grey-500); }
}
/* core.js: is-ready (nach dem ersten Zustand), is-compact (ab 80 px), is-hidden (runterscrollen, nur mit Motion).
   Farbe und Fläche bleiben in jedem Zustand gleich; nur kompakt trägt die Leiste eine Haarlinie (N3, Ninos Randfarbe). */
.site-header.is-ready { transition: transform 320ms var(--ease-spring), box-shadow var(--dur-ui) var(--ease-out); }
.site-header.is-compact { box-shadow: 0 1px 0 var(--nf-grey-100); }
/* V7-FIX-R1: 48 statt 8 px über den Rand hinaus, damit der Schatten des roten Header-CTA (--nf-shadow-btn) beim Ausblenden
   nicht als rötlicher Streifen in den oberen Bildschirmrand blutet. */
.site-header.is-hidden:not(:focus-within) { transform: translate3d(0, calc(-100% - var(--header-top) - 48px), 0); }

/* ---------- Sticky-CTA mobil: Pille unten, erscheint nach dem Hero, weicht Stopp-Zonen (Footer) ---------- */
.sticky-cta {
  --nf-shadow-btn: var(--nf-shadow-btn-hell);   --nf-shadow-btn-hover: var(--nf-shadow-btn-hell-hover);   /* Rev. 5 (E8): kein rosa Hof über Hell */
  position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  transform: translate3d(0, calc(100% + 32px), 0);
  visibility: hidden;
  transition: transform 240ms var(--ease-spring), visibility 0s linear 240ms;
}
.sticky-cta.is-visible { transform: none; visibility: visible; transition: transform 240ms var(--ease-spring), visibility 0s; }
/* Rotverlauf wie jeder Primärknopf, dazu 2-px-Kante Weiß (Rev. 7: über #5B695E 5,79:1, über #AE1D2B 6,98:1; die alte 1-px-Kante
   Weiß 40 % hatte auf dem Oliv-Lichtpunkt nur 2,29:1). Die Pille liegt außerhalb jeder Section und bleibt immer rot. */
.sticky-cta .btn-primary { width: 100%; justify-content: space-between; padding-left: 24px; box-shadow: 0 0 0 2px var(--nf-white-pure), var(--nf-shadow-btn); }
/* FE-2 ST-11: mobil flacher und näher am Rand (56 → 48 px, Rand 16 → 12 px); Label und Verhalten unverändert */
.sticky-cta { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
.sticky-cta .btn-primary { --btn-h: 48px; padding-left: 22px; padding-right: 6px; }
.sticky-cta .btn__icon { width: 36px; height: 36px; }
@media (min-width: 1024px) { .sticky-cta { display: none; } }
/* V10-M2 verbundener Einstieg: frag-widget.js ersetzt den Link (Rückfall ohne JS/Widget) durch den Knopf .sticky-cta__wahl,
   der eine Auswahl öffnet (Check oder Frage, Stile in frag-widget.css). Chevron statt Pfeil, dreht offen um 180°;
   der Zusatz „Check oder Frage“ erst ab 360 px (bei 320 px passt er nicht einzeilig neben Label und Icon). */
.sticky-cta__zusatz { margin-left: auto; margin-right: 10px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 359.98px) { .sticky-cta__zusatz { display: none; } }
.sticky-cta__wahl .btn__icon svg { transition: transform var(--dur-ui) var(--ease-out); }
.sticky-cta__wahl[aria-expanded="true"] .btn__icon svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .sticky-cta__wahl .btn__icon svg { transition: none; } }

/* ---------- Footer: Marke, Kontakt, Standorte, Recht, CTA (Inhalt wie V1). Rev. 6 (V9-A0): eigene helle Stufe
   data-theme="footer" (grey-100, tokens.css) mit Haarlinie oben, damit er sich von einer weißen wie von einer grauen letzten
   Section absetzt. Logo = echte Datei logo-nf (Schriftzug schwarz). Links: nur a:not(.btn), sonst überschreibt die Linkfarbe
   den roten CTA. ---------- */
.site-footer {
  position: relative;
  padding-block: clamp(72px, 8vw, 120px) max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  background: var(--bg-image, none) var(--bg);
  color: var(--text);
}
.site-footer a:not(.btn) { color: var(--text-soft); }
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px var(--col-gap); }
.site-footer__logo { width: auto; height: 64px; }
.site-footer__claim {
  margin-top: 28px;
  color: var(--text);
  font: 800 var(--fs-h2)/var(--lh-h2) var(--font-sans);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
}
.site-footer__sub { max-width: 40ch; margin-top: 14px; color: var(--text-soft); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.site-footer__cta { margin-top: 28px; }
/* Rev. 6 (V9-A0): mobil volle Breite wie das Schluss-Band; unter 400 px darf das Label umbrechen (320 px lief der Knopf 19 px über) */
@media (max-width: 599px) { .site-footer__cta { width: 100%; } }
/* V10-D1 (mass-start-12, mass-sub2-04): mobil kürzer (bei 390 px 1707 px = zwei Bildschirme). Seiten und Rechtliches
   zweispaltig (Tippziel bleibt 44 px, lange Labels brechen ausgeglichen um), Luft zwischen den Gruppen 48 → 32 px,
   oben 72 → 48 px, Logo 64 → 48 px. */
@media (max-width: 599px) {
  .site-footer { padding-top: 48px; }
  .site-footer__inner { row-gap: 32px; }
  .site-footer__logo { height: 48px; }
  .site-footer__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .site-footer__link > span { text-wrap: balance; }
  .site-footer__list .site-footer__link { align-items: flex-start; padding-top: 8px; }   /* erste Zeilen beider Spalten auf einer Höhe */
}
@media (max-width: 400px) { .site-footer__cta { white-space: normal; } .site-footer__micro { text-wrap: balance; } }
.site-footer__label { margin-bottom: 14px; color: var(--text-mute); font-size: var(--fs-small); font-weight: 600; }
.site-footer__company { color: var(--text); font-weight: 800; }
.site-footer__places { display: grid; gap: 20px; margin-top: 16px; }
.site-footer__mail { margin-top: 20px; }
.site-footer__place { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; color: var(--text-soft); line-height: 1.5; }
.site-footer__place .icon { margin-top: 2px; color: var(--nf-olive); }   /* Oliv als Icon-Akzent (Rot-Budget G5), 4,91:1 auf grey-100 */
/* V9-FX1 (mob-marke-06): Telefon- und Mail-Icon stehen vor einem 44-px-Link mit mittigem Text, also mittig statt oben */
.site-footer__place > .icon:has(+ .site-footer__link) { align-self: center; margin-top: 0; }
.site-footer__place strong { display: block; color: var(--text); font-weight: 600; }
.site-footer__list { display: grid; }
.site-footer__link {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 44px; min-height: 44px;   /* Tap-Ziel 44 × 44 auch für kurze Links (Blog, AGB) */
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-out);
}
.site-footer__link .icon { width: 16px; height: 16px; color: var(--text-mute); }
.site-footer__link > span {
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-ui) var(--ease-out);
}
.site-footer__base {
  display: grid; gap: 12px;
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  color: var(--text-mute);
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.site-footer__note { max-width: 60ch; }
.site-footer__top {
  display: inline-flex; align-items: center; gap: 8px;
  justify-self: start;
  min-height: 44px;
  color: var(--text-soft);
  font-weight: 800;
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-out);
}
.site-footer__top::after {
  content: "";
  width: 8px; height: 8px;
  margin-top: 4px;
  border-top: 1.8px solid currentColor;
  border-left: 1.8px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer a.site-footer__link:hover, .site-footer a.site-footer__top:hover { color: var(--text); }
  .site-footer__link:hover > span { background-size: 100% 1px; }
  .site-footer__top:hover::after { transform: translateY(-2px) rotate(45deg); }
}
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__contact { grid-column: 1 / 5; grid-row: 2 / span 2; }
  .site-footer__pages { grid-column: 5 / -1; grid-row: 2; }
  .site-footer__legal { grid-column: 5 / -1; grid-row: 3; }
  .site-footer__logo { height: 72px; }
  .site-footer__places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__base { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 40px; }
}
/* V9-FX1 (desk-start-10): 768–1023 Kontakt über die volle Breite, darunter Seiten | Rechtliches gleich breit (vorher links
   unten rund 340 px leer neben den gestapelten Spalten) */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer__contact { grid-column: 1 / -1; grid-row: 2; }
  .site-footer__pages { grid-column: 1 / 4; grid-row: 3; }
  .site-footer__legal { grid-column: 4 / -1; grid-row: 3; }
}
/* V9-FX1 (desk-start-21, desk-rest-06, dp-19): 1024–1199 Marke oben über die volle Breite, darunter drei Spalten, damit
   „Vertriebsprozess Masterclass“ und „Cookie-Einstellungen“ einzeilig bleiben; ab 1200 vier Spalten mit gleichen Abständen. */
@media (min-width: 1024px) {
  .site-footer__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__pages { grid-column: 1 / 5; grid-row: 2; }
  .site-footer__contact { grid-column: 5 / 10; grid-row: 2; }
  .site-footer__legal { grid-column: 10 / -1; grid-row: 2; }
  .site-footer__places { grid-template-columns: minmax(0, 1fr); }
  .site-footer__note { max-width: none; }
}
@media (min-width: 1200px) {
  .site-footer__brand { grid-column: 1 / 5; }
  .site-footer__pages { grid-column: 5 / 8; grid-row: auto; padding-top: 8px; }
  .site-footer__contact { grid-column: 8 / 11; grid-row: auto; padding-top: 8px; }
  .site-footer__legal { grid-column: 11 / -1; grid-row: auto; padding-top: 8px; }
  .site-footer__list .site-footer__link { white-space: nowrap; }
}

/* ---------- Rechtsseiten (src/shell/legal.html): schlicht, hell ---------- */
.legal { padding-block: calc(var(--header-h) + clamp(56px, 7vw, 104px)) var(--section-y); background: var(--bg-image, none) var(--bg); color: var(--text); }
.legal__inner { max-width: 76ch; }
.legal h1 { margin-bottom: 40px; font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.625rem); line-height: 1.08; letter-spacing: var(--tracking-h1); }
/* V9-FX1 (mob-artikel-02): „Datenschutzerklärung“ ist bei 34 px 343 px breit, Spalte bei 320/360 nur 288/328 px.
   Nur schmal verkleinern (keine Silbentrennung in H1), ab 430 px und Desktop unverändert. */
@media (max-width: 479px) { .legal h1 { font-size: clamp(1.625rem, 8.4vw, 2.125rem); } }
.legal h2 { margin: 2.2em 0 .6em; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; }
.legal h3, .legal h4 { margin: 1.8em 0 .5em; font-size: 1.0625rem; line-height: 1.3; }
/* V10-D1 (mob-5-04): mobil kein hängendes Einzelwort; ab 1024 px bleibt der Umbruch wie bisher (Desktop unverändert) */
@media (max-width: 1023px) { .legal h1, .legal h2, .legal h3, .legal h4 { text-wrap: balance; } }
.legal p, .legal ul, .legal ol, .legal blockquote { margin: 0 0 1em; color: var(--text-soft); }
.legal ul, .legal ol { padding-left: 1.25em; }
.legal li + li { margin-top: .35em; }
.legal a { color: var(--nf-wine); overflow-wrap: anywhere; }
.legal blockquote { padding-left: 18px; box-shadow: inset 1px 0 0 var(--line); }
.legal hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--hairline); }
.legal code { font-size: .88em; overflow-wrap: anywhere; }
.legal__meta { margin-top: 48px; color: var(--text-mute); font-size: var(--fs-small); }
.legal__notice {
  display: grid; gap: 12px;
  margin: 0 0 40px;
  padding: 24px 26px;
  border: 1px solid var(--nf-grey-100);
  border-radius: var(--radius-md);
  background: var(--nf-grey-50);
  box-shadow: inset 3px 0 0 var(--nf-olive);   /* Rev. 6: Kasten grau, Oliv nur als feine Linie links (Rot-Budget G5) */
}
.legal__notice strong { color: var(--nf-ink); font-weight: 800; }
.legal__reset { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); }

/* ---------- Unterseiten (Slice V5-P0): Vorlage „artikel“ (Markdown, Brotkrumen, Inhaltsverzeichnis) ---------- */
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 28px; padding: 0; list-style: none; color: var(--text-mute); font-size: var(--fs-small); }
.breadcrumb__list a { display: inline-block; padding-block: 11px; margin-block: -11px; }   /* V9-FX1 (mob-artikel-12): Tippziel 41 px ohne Zeilenverschiebung */
.breadcrumb__list li + li::before { content: "›"; margin-right: 8px; color: var(--text-mute); }
.breadcrumb__list a { color: var(--text-soft); text-underline-offset: 3px; }
.breadcrumb__list [aria-current="page"] { color: var(--text); }
.artikel { padding-block: calc(var(--header-h) + clamp(40px, 6vw, 88px)) var(--section-y); background: var(--bg-image, none) var(--bg); color: var(--text); }
.artikel__inner { max-width: 76ch; }
.artikel__titel { margin: 0; font: 800 clamp(2rem, 1.4rem + 2.4vw, 3.25rem)/1.1 var(--font-sans); letter-spacing: var(--tracking-h1); text-wrap: balance; }
.artikel__meta { margin: 16px 0 0; color: var(--text-mute); font-size: var(--fs-small); }
.artikel__toc { margin: 32px 0 8px; padding: 20px 24px; border-radius: 20px; background: var(--surface-sunken); }   /* auf white: grey-50 */
.artikel__toc-titel { margin: 0 0 8px; font-weight: 800; }
.artikel__toc ol { margin: 0; padding-left: 1.25em; }
.artikel__toc li + li { margin-top: .35em; }
.artikel__toc a, .artikel__text a { color: var(--nf-wine); text-underline-offset: 3px; overflow-wrap: anywhere; }
.artikel__text h2 { margin: 2.2em 0 .6em; font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem); line-height: 1.2; letter-spacing: -0.01em; scroll-margin-top: calc(var(--header-h) + 24px); }
.artikel__text h3 { margin: 1.8em 0 .5em; font-size: 1.25rem; line-height: 1.3; }
.artikel__text h4 { margin: 1.6em 0 .4em; font-size: 1.0625rem; line-height: 1.35; }
.artikel__text p, .artikel__text ul, .artikel__text ol, .artikel__text blockquote { margin: 0 0 1em; color: var(--text-soft); line-height: 1.7; }
.artikel__text ul, .artikel__text ol { padding-left: 1.25em; }
.artikel__text li + li { margin-top: .35em; }
.artikel__text blockquote { padding-left: 18px; box-shadow: inset 2px 0 0 var(--nf-olive); }
.legal__reset p { margin-bottom: 16px; }
.legal__reset [data-consent-reset-status] { min-height: 1.5em; margin-top: 12px; font-size: var(--fs-small); }
.legal .btn-ghost { color: var(--text); border-color: var(--nf-line-on-light); }   /* .btn-secondary liest --btn2-* (Oliv-Kontur auf white) */

/* ---------- Motion-Gate ---------- */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-motion):not(.is-static) :is([data-motion], [data-reveal]) { animation: nf-failsafe .8s var(--ease-out) 3s forwards; }
}
@keyframes nf-failsafe {
  to { transform: none; translate: none; scale: none; rotate: none; clip-path: none; opacity: 1; visibility: visible; }
}
html.is-static :is([data-motion], [data-reveal]), html.is-static .line__inner {
  transform: none !important; translate: none !important; scale: none !important; rotate: none !important;
  clip-path: none !important; opacity: 1 !important; visibility: visible !important;
}
/* Zeichnungen: ohne Motion immer fertig (NF.zeichnung setzt Startzustände nur im Motion-Kontext; das hier ist das Netz) */
html.is-static .zeichnung [data-z-schritt] { opacity: 1 !important; }
html.is-static .zeichnung .z-zieht { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
/* V10-B: Netz für Folge/Setzen/Strich (Startzustand gibt es nur unter .ein-bereit, das setzt nur core.js im Motion-Kontext) */
html.is-static .ein-bereit :is([data-ein-item], [data-ein-setzen]), html.is-static .ein-bereit[data-ein~="selbst"] {
  opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important;
}
html.is-static .steps.ein-bereit .steps__item::after { transform: none !important; }

/* ---------- V10-B: Folge · Setzen · Strich (core.js ein(), Bauplan bewegung §3 Muster 2-4) ----------
   Startzustand hängt an .ein-bereit (setzt nur core.js, nur für Container unterhalb des ersten Bilds), nie am Attribut:
   ohne JS, bei reduced-motion und im ersten Bild bleibt alles sichtbar, ein Failsafe ist nicht nötig. translate/scale statt
   transform, damit transform-Regeln der Bausteine und GSAP unberührt bleiben. core.js nimmt .ein-bereit 1,6 s nach dem
   Eintritt wieder weg; danach gelten die eigenen Übergänge der Bausteine.
   V10-P: Übergänge nur unter .ein-bereit.is-ein, also nur beim Einblenden. Vorher hingen sie schon an .ein-bereit: ein
   Container, der beim Laden zwischen 80 % und 100 % der Bildschirmhöhe stand, blendete sichtbar aus, bevor er wieder kam.
   Der Startzustand gilt jetzt sofort, ohne Übergang. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .ein-bereit.is-ein [data-ein-item],
  .ein-bereit.is-ein[data-ein~="selbst"] {
    transition: opacity var(--ein-dur) var(--ease-out) calc(var(--ein-i, 0) * var(--ein-step)),
                translate var(--ein-dur) var(--ease-out) calc(var(--ein-i, 0) * var(--ein-step));
  }
  .ein-bereit:not(.is-ein) [data-ein-item],
  .ein-bereit:not(.is-ein)[data-ein~="selbst"] { opacity: 0; translate: 0 var(--ein-y); }
  .ein-bereit.is-ein [data-ein-setzen] {
    transition: opacity var(--ein-setzen-dur) var(--ease-out) calc(var(--ein-i, 0) * var(--ein-step) + 140ms),
                scale var(--ein-setzen-dur) var(--ease-out) calc(var(--ein-i, 0) * var(--ein-step) + 140ms);
  }
  .ein-bereit:not(.is-ein) [data-ein-setzen] { opacity: 0.35; scale: 0.6; }
  /* V10-P: mobil wartet ein Eintrag unter 90 % der Bildschirmhöhe auf seinen eigenen Eintritt (core.js .ein-warten) */
  .ein-bereit [data-ein-item].ein-warten { opacity: 0; translate: 0 var(--ein-y); }
  .ein-bereit :is([data-ein-setzen].ein-warten, .ein-warten [data-ein-setzen]) { opacity: 0.35; scale: 0.6; }
  .steps[data-ein].ein-bereit .steps__item.ein-warten::after { transform: scaleY(0); }
  /* Strich: Schrittlinie der .steps (mobil senkrecht, ab 900 px waagerecht) */
  .steps[data-ein].ein-bereit .steps__item::after { transform-origin: 50% 0; }
  .steps[data-ein].ein-bereit.is-ein .steps__item::after {
    transition: transform var(--ein-strich-dur) var(--ease-in-out) calc(var(--ein-i, 0) * var(--ein-step) + 300ms);
  }
  .steps[data-ein].ein-bereit:not(.is-ein) .steps__item::after { transform: scaleY(0); }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .steps[data-ein].ein-bereit .steps__item::after { transform-origin: 0 50%; }
  .steps[data-ein].ein-bereit:not(.is-ein) .steps__item::after,
  .steps[data-ein].ein-bereit .steps__item.ein-warten::after { transform: scaleX(0); }
}

/* ---------- reduced-motion: alles lesbar und statisch, nur Farbe/Opacity ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color, outline-color, box-shadow, visibility !important;
  }
  :is([data-motion], [data-reveal]), .line__inner {
    transform: none !important; translate: none !important; scale: none !important; rotate: none !important;
    clip-path: none !important; opacity: 1 !important; visibility: visible !important;
  }
  .site-header.is-hidden:not(:focus-within) { transform: none; }
  .zeichnung [data-z-schritt] { opacity: 1 !important; }
  .zeichnung .z-zieht { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .ein-bereit :is([data-ein-item], [data-ein-setzen]), .ein-bereit[data-ein~="selbst"] {
    opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important;
  }
  .steps.ein-bereit .steps__item::after { transform: none !important; }
}

/* ---------- Druck ---------- */
/* ---------- FE-2 M4: Druck-Feedback auf Touch (Touch kennt kein Hover). `scale` statt `transform`, damit GSAP-Reste im
   Inline-Transform nicht kollidieren. reduced-motion: nur der Schatten wechselt. ---------- */
@media (hover: none) and (pointer: coarse) {
  .station, .frame, .card, .cta-karte, .accordion__summary, .compare__col--with, .wisch-karte {
    transition: scale 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .station:active, .frame:active, .card:active, .cta-karte:active, .compare__col--with:active, .wisch-karte:active { scale: 0.98; box-shadow: var(--nf-shadow-lift); transition-duration: 120ms; }
  .accordion__summary:active { scale: 0.98; transition-duration: 120ms; }
}
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .station:active, .frame:active, .card:active, .cta-karte:active, .compare__col--with:active, .wisch-karte:active, .accordion__summary:active { scale: none; }
}

/* ---------- FE-2 M5: Wischreihen mit Fokus-Karte (core.js setzt .is-wisch am Scroller und .is-aktiv an der eingerasteten Karte;
   nur mobil unter dem Motion-Gate). V10-B Ankunft: Karten, die noch nie eingerastet sind, stehen auf --wisch-unseen (.75, nicht
   „ausgegraut“; Fließtext #444 bleibt damit über 4,5:1) und werden mit .is-gesehen hell. Kein translate an der Karte: das
   animiert der Anstupser (WAAPI). ---------- */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .is-wisch .wisch-karte { transition: scale 240ms var(--ease-out), box-shadow 240ms var(--ease-out); transform-origin: 50% 50%; }
  .is-wisch .wisch-karte.is-gesehen { transition: scale 240ms var(--ease-out), box-shadow 240ms var(--ease-out), opacity 420ms var(--ease-out); }   /* V10-P: Deckkraft gleitet nur beim Hellwerden */
  .is-wisch .wisch-karte:not(.is-aktiv) { scale: 0.97; }
  .is-wisch .wisch-karte:not(.is-gesehen) { opacity: var(--wisch-unseen); }
}

@media print {
  .skip-link, .site-header, .sticky-cta, .consent__ui, .consent iframe, .consent::before, .raster::before { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  [data-theme] {
    --bg: #fff; --text: #000; --text-soft: #222; --text-mute: #555; --hairline: #bbb; --accent-text: #000;
    background: #fff !important; color: #000 !important;
  }
  :is([data-motion], [data-reveal]), .line__inner { transform: none !important; clip-path: none !important; opacity: 1 !important; visibility: visible !important; }
  .site-footer { background: #fff !important; }
  .site-footer__logo { content: url("../assets/brand/logo-nf.png"); }
  .btn, .btn-primary, .btn-secondary { background: none !important; color: #000 !important; box-shadow: inset 0 0 0 1px #000 !important; }
  a[href^="http"]:not(.btn)::after { content: " (" attr(href) ")"; font-size: .8em; }
  section, figure, .frame, .stat, .card, .station, .zeichnung-rahmen { break-inside: avoid; }
  .zeichnung [data-z-schritt] { opacity: 1 !important; }
  .zeichnung .z-zieht { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .ein-bereit :is([data-ein-item], [data-ein-setzen]), .ein-bereit[data-ein~="selbst"], .wisch-karte { opacity: 1 !important; translate: none !important; scale: none !important; }
  .steps.ein-bereit .steps__item::after { transform: none !important; }
}