/* NF Mentoring · Design-Tokens V2
   Quelle: .archive/v2-design-rev1/design-tokens.css (DESIGN.md V2 §2) und der freigegebene Hero-Prototyp
   (proto-hero.html, Freigabe Adrian 29.09.2026 13:26). Marke laut RULES.md → Brand, keine neuen Markenfarben.
   Bestehende Namen (--nf-…, --fs-…, --space-…) behalten ihre Bedeutung; neue Werte tragen neue Namen.
   Section-CSS liest nur diese Variablen. Rev. 4 (01.10.2026): Bühne ist dunkles Oliv, Bordeaux nur noch Rückfall (siehe unten).
   Rev. 6 (V9-A0, 01.10.2026, „nur Weiß und Grau“): olive-light rendert wie grey, Footer eigene Stufe (data-theme="footer"),
   Dialoge neutral dunkel (--nf-dialog-*, --nf-backdrop); olive bleibt als Rückfall definiert, Oliv nur noch Akzent.
   Rev. 7 (V11-A, 02.10.2026): Verläufe, red, olive-light eigen, Webflow 1:1. Jede Fläche ist ein leichter Verlauf (--bg-image),
   --bg bleibt die flache Kopie (helle Themes: erster Stopp, dunkle: Mittelwert). Themes white, grey, olive-light (wieder eigene
   Fläche #EEEFEB), olive (Webflow-Radial #5B695E nach #26332A), red (neu, #AE1D2B über #77111B nach #480C12), footer (eigener
   Verlauf #E7ECF0 nach #CBD5DF). Neue Rollen --pfeil, --kreuz, --btn1-bg, --btn1-text, --btn1-hover-bg, --btn1-hover-text.
   Primärknopf Webflow-Verlauf #AE1D2B nach #480C12, Hover #B01627 nach #77111B, Label Weiß. Steuer-Variablen der Verläufe:
   --oliv-pos, --rot-pos, --h-winkel (Standardwerte als Rückfall im Verlauf, siehe Rev.-7-Block). Nur Werte aus ninofischlein.webflow.io. */

@font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* ── 1. Marke (RULES.md, exakt, unverändert) ─────────────────────────── */
  --nf-red: #B4121E;
  --nf-red-deep: #8E1622;
  --nf-wine: #AE1D2B;          /* Primärrot der Live-Seite (key1): Buttons, Haken, Play */
  --nf-logo-red: #A91A2A;
  --nf-red-soft: #B83E3D;
  --nf-bordeaux: #2D0912;      /* V2: Hauptfläche der Seite */
  --nf-bordeaux-2: #1F070E;    /* V2: zweite Fläche, Karten-Unterkante, Footer-Übergang */
  --nf-ink: #08080A;
  --nf-ink-0: #050506;
  --nf-ink-2: #181818;
  --nf-cream: #F1EDE8;
  --nf-cream-2: #F5F0E8;
  --nf-light: #F3F3F3;
  --nf-white: #FBFBFB;
  --nf-graphite: #444444;

  /* ── 2. Mischungen (nur aus Markenfarben) ────────────────────────────── */
  --nf-red-light: #C66A68;     /* 75 % red-soft + 25 % cream: Akzentwort, Links auf Dunkel (≥ 4,5:1 auf allen Dunkelflächen) */
  --nf-bordeaux-3: #3C0B15;    /* 88 % bordeaux + 12 % wine: angehobene Karte (Oberkante des Verlaufs) */
  --nf-wine-hover: #BB2A37;    /* 90 % wine + 10 % cream: Button-Hover */
  --nf-glass: rgb(31 7 14 / 0.74);          /* Header-Glas (bordeaux-2) */
  --nf-glass-strong: rgb(31 7 14 / 0.86);   /* Header-Glas nach 80 px Scroll */
  --nf-scrim-card: rgb(20 5 10 / 0.9);      /* Consent-Karte über dem Poster */

  /* Text auf Dunkel (Creme mit Deckkraft; Kontrast gegen bordeaux) */
  --nf-text: var(--nf-cream);                    /* 15,5:1 */
  --nf-text-soft: rgb(241 237 232 / 0.78);       /* ≈ 9,6:1  Fließtext */
  --nf-text-mute: rgb(241 237 232 / 0.62);       /* ≈ 6,4:1  Labels, Fußnoten (nie kleiner als 12 px) */
  /* Text auf Hell (cream/cream-2) */
  --nf-text-on-light: var(--nf-ink);             /* 17,6:1 */
  --nf-text-on-light-soft: var(--nf-graphite);   /* 8,4:1 */
  --nf-accent-on-light: var(--nf-wine);          /* 6,0:1 */

  /* Linien und Ränder */
  --nf-line: rgb(241 237 232 / 0.10);            /* Standardrand Karte/Bildrahmen auf Dunkel */
  --nf-line-strong: rgb(241 237 232 / 0.18);     /* Hover, Sekundär-Button */
  --nf-line-red: rgb(174 29 43 / 0.9);           /* Pillen-Rand (wie live) */
  --nf-line-on-light: rgb(8 8 10 / 0.10);
  --nf-highlight: inset 0 1px 0 rgb(241 237 232 / 0.08);   /* Lichtkante oben an Karten */

  /* Raster-Textur (DESIGN §2.3; live gemessen: 48 px Teilung, sehr schwach) */
  --nf-raster-size: 48px;
  --nf-raster-line: rgb(241 237 232 / 0.045);
  --nf-raster-mask: radial-gradient(ellipse 90% 75% at 50% 30%, #000 35%, transparent 100%);

  /* Glow und Schatten (immer rot- oder tintengetönt, nie reines Schwarz) */
  --nf-glow-red: radial-gradient(closest-side, rgb(174 29 43 / 0.34), rgb(174 29 43 / 0) 100%);
  --nf-shadow-card: 0 24px 60px -28px rgb(5 5 6 / 0.75);
  --nf-shadow-media: 0 40px 100px -30px rgb(174 29 43 / 0.45), 0 20px 50px -20px rgb(5 5 6 / 0.8);
  --nf-shadow-btn: 0 12px 30px -12px rgb(72 12 18 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.16);         /* Rev. 7: Tint #480C12 (Verlaufsende) */
  --nf-shadow-btn-hover: 0 16px 36px -12px rgb(72 12 18 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.2);
  --nf-shadow-header: 0 18px 40px -22px rgb(5 5 6 / 0.9);
  --nf-ring-red: 0 0 0 4px rgb(174 29 43 / 0.16);           /* Haken-Kreis */
  --nf-ring-play: 0 0 0 10px rgb(174 29 43 / 0.24), 0 18px 40px -12px rgb(5 5 6 / 0.7);
  --nf-ring-play-hover: 0 0 0 16px rgb(174 29 43 / 0.2), 0 22px 44px -12px rgb(5 5 6 / 0.75);

  /* Flächen-Verläufe */
  --nf-grad-card: linear-gradient(180deg, var(--nf-bordeaux-3) 0%, var(--nf-bordeaux-2) 100%);
  --nf-grad-btn: linear-gradient(180deg, #AE1D2B 0%, #480C12 100%);          /* Rev. 7: Webflow .button (vorher Ende red-deep) */
  --nf-grad-btn-hover: linear-gradient(180deg, #B01627 0%, #77111B 100%);    /* Rev. 7: Hover als Verlauf, Werte aus den Webflow-Verlaufsenden */
  --nf-grad-section-fade: linear-gradient(180deg, var(--nf-bordeaux) 0%, var(--nf-bordeaux-2) 100%);
  --nf-grad-frame: linear-gradient(180deg, rgb(241 237 232 / 0.07), rgb(241 237 232 / 0.02));
  --nf-tint-pill: rgb(174 29 43 / 0.14);
  --nf-tint-stats: rgb(8 8 10 / 0.3);
  --nf-tint-icon: rgb(241 237 232 / 0.14);       /* Innenkreis des Pfeils im Button */

  /* ── 3. Typografie ───────────────────────────────────────────────────── */
  --font-sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;   /* nur Italic 400, nur Akzentwort */

  /* Skala V2 (normale Schreibung, keine Versalien außer Pille). 390 px → 1440 px */
  --fs-h1: clamp(2.125rem, 1.25rem + 3.2vw, 3.625rem);     /* 34 → 58 px */
  --fs-h2: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);        /* 28 → 44 px */
  --fs-h3: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem);  /* 19 → 23 px */
  --fs-lead: clamp(1.0625rem, 0.99rem + 0.3vw, 1.25rem);   /* 17 → 20 px */
  --fs-body: clamp(1rem, 0.975rem + 0.1vw, 1.0625rem);     /* 16 → 17 px */
  --fs-small: 0.875rem;                                    /* 14 px */
  --fs-caption: 0.8125rem;                                 /* 13 px: Video-Beschriftung, kompakte Labels */
  --fs-micro: 0.75rem;                                     /* 12 px, Minimum */
  --fs-pill: 0.8125rem;                                    /* 13 px, Versalien */
  --fs-stat: clamp(1.875rem, 1.3rem + 1.9vw, 2.875rem);    /* 30 → 46 px */
  --fs-stat-compact: clamp(1.625rem, 1.2rem + 1vw, 2rem);  /* 26 → 32 px */
  --fs-btn: 1rem;                                          /* 16 px; klein 14 px */
  --fs-nav: 0.9375rem;                                     /* 15 px */
  --lh-h1: 1.08;  --lh-h2: 1.12;  --lh-h3: 1.3;  --lh-lead: 1.55;  --lh-body: 1.62;
  --tracking-h1: -0.022em;
  --tracking-h2: -0.016em;
  --tracking-pill: 0.08em;
  --tracking-pill-sm: 0.05em;
  --accent-scale: 1.04;        /* Playfair-Italic optisch an Nunito 800 angleichen */

  /* ── 4. Abstände und Layout ──────────────────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; --space-12: 200px;
  --maxw: 1280px;                              /* Inhaltsbreite */
  --maxw-text: 62ch;
  --gutter: clamp(16px, 4.5vw, 64px);          /* 390 → 17,5 px · 360 → 16 px */
  --col-gap: clamp(16px, 2.2vw, 32px);
  --section-y: clamp(48px, 7.5vw, 112px);      /* V2 kürzer als V1 (104–200); mobil 48 px (FE-2 ST-12), ab 854 px wie bisher */
  --section-head-gap: clamp(32px, 4vw, 56px);  /* Abschnittskopf → Inhalt */
  --header-top: 0px;                           /* Rev. 5: vollbreite Leiste ohne Abstand zur Oberkante (farbwelt-rev5 N4) */
  --header-bar: 64px;                          /* Höhe der weißen Leiste; ab 900 px 72 px */
  --header-h: 64px;                            /* = Leistenhöhe (Hero-Abstand, scroll-padding-top); ab 900 px 72 px */

  /* ── 5. Formen (eine Regel: Interaktives = Pille, Karten 20, Medien 28/20) ── */
  --radius-sm: 12px;           /* Chips, kleine Bilder, Akkordeon-Zeile */
  --radius-md: 20px;           /* Karten, Bild-Innenkante */
  --radius-lg: 28px;           /* Medien-Rahmen außen (28 − 8 Rahmen = 20 innen) */
  --radius-pill: 999px;        /* Buttons, Pillen, Header */
  --frame-pad: 8px;            /* Doppelrand: Abstand Außenrahmen → Bild */

  /* ── 6. Bewegung ─────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* Eintritte, Hover */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* Bewegung im Bild */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);    /* Akkordeon, Sticky-CTA */
  --dur-press: 140ms;  --dur-ui: 220ms;  --dur-reveal: 700ms;  --dur-frame: 900ms;  --stagger: 60ms;
  --reveal-y: 16px;
  --reveal-frame-y: 24px;
  --reveal-frame-scale: 0.985;
  --reveal-frame-clip: 6%;
  /* V10-B: Folge, Setzen, Strich, Ankunft (base.css; core.js ein() und wischreihen()) */
  --ein-y: 14px;  --ein-dur: 600ms;  --ein-step: 70ms;
  --ein-setzen-dur: 420ms;  --ein-strich-dur: 520ms;
  --wisch-unseen: 0.75;

  /* ── 7. Ebenen ───────────────────────────────────────────────────────── */
  --z-header: 30;  --z-sticky: 40;  --z-consent: 70;  --z-skip: 80;

  /* ── 8. Zeichnungs-System (Revision 2, DESIGN.md §4; Quelle design-tokens.css §8) ─────────
     Standard = heller Satz (Creme-Fläche, wie das Vorbild 02-bauplan V1); der dunkle Satz steht bei den Flächen-Themes.
     Die SVG tragen nur Klassen (z-linie, z-flaeche-1 …), Farben kommen nur von hier und aus src/zeichnungen/zeichnung.css
     (gleiche Werte). Nicht verwechseln mit den Ebenen --z-header usw. oben. */
  --z-linie: #716F6E;                    /* ink #08080A zu 55 % auf cream #F1EDE8: Kontur (4,29:1) */
  --z-linie-zart: #B0ADAA;               /* ink zu 28 %: Grundriss, Maßketten, Kacheln */
  --z-flaeche-1: #FBFBFB;                /* oben: white */
  --z-flaeche-2: #EDE8E1;                /* links: cream-2 mit 7 % ink */
  --z-flaeche-3: #DFDBD7;                /* rechts: cream mit 16 % ink */
  --z-boden: #F5F0E8;                    /* Bodenplatte: cream-2 */
  --z-akzent: #B4121E;                   /* roter Weg, rote Kante (--nf-red, 5,92:1 auf cream) */
  --z-akzent-flaeche: #ECD7D1;           /* zartrote Fläche: wine zu 12 % auf cream-2 */
  --z-durch: 0.26;                       /* roter Weg hinter Wänden (z-weg-durch) */
  --z-strich: 1.5px;                     /* eine Linienstärke, vector-effect: non-scaling-stroke */
  --z-strich-weg: 2.25px;                /* roter Weg, 1,5-fach */
  --z-pfeil: 2.5px;                      /* Pfeile zwischen Stationen (.station__pfeil) */
  --z-dauer: 1400ms;                     /* Aufbau je Zeichnung höchstens 1,4 s (NF.zeichnung, DESIGN §7) */

  /* ── V1-Namen (DESIGN V2 §7: dürfen bleiben, werden nicht mehr benutzt) ── */
  --fs-eyebrow: var(--fs-micro);
  --fs-h4: var(--fs-h3);
  --fs-mega: var(--fs-h1);
  --fs-cta: var(--fs-small);
  --lh-mega: var(--lh-h1);
  --tracking-display: var(--tracking-h1);
  --tracking-caps: var(--tracking-pill);
  --tracking-cta: var(--tracking-pill);
  --radius-0: 0;  --radius-1: 2px;  --radius-2: 4px;
  --rule-w: 36px;
  --line-w: 1px;
  --z-grain: 60;
}

/* ── Revision 3 · V2 Farbwelt (AD-V2-FARBWELT, 30.09.2026) ───────────────────────────────────────────
   Oliv und Grau stammen aus Ninos eigener Website (ninofischlein.webflow.io, CSS gemessen am 30.09.: --dark-green #26332a,
   --light-green #5b695e, Flächen #5c685e/#eeefeb/#f5f6f7, Graus #33383f/#495158/#626a72, Rand #e7ecf0).
   Adrian hat sie als Sekundärfarben freigegeben („Grau, Rot, Oliv, Weiß“). Rot, Fonts und Logo bleiben unverändert (RULES.md).
   Mischungen werden kanalweise in sRGB gerechnet und gerundet, wie in Abschnitt 2 (Beispiel: bordeaux-3).
   Die Kontrastwerte stehen im Kommentar, die ganze Tabelle in farbwelt.md §6.
   Diesen Block in site/css/tokens.css ans Ende von :root (nach §8) setzen, die Theme-Blöcke nach den bestehenden Themes. */
:root {
  /* 1b. Sekundärfarben aus der Referenz (exakt) */
  --nf-olive: #5C685E;            /* Oliv-Fläche der Referenz. Bei uns: Kennzahl-Ziffern, Nummer-Pille, Sekundär-Rand (5,84:1 auf Weiß) */
  --nf-olive-deep: #26332A;       /* dunkles Oliv (--dark-green): Fläche „olive“, Pillentext und Labels auf Hell (13,2:1 auf Weiß) */
  --nf-olive-mid: #5B695E;        /* Lichtquelle (--light-green): nur im Glow hinter Medien, nie direkt hinter Text */
  --nf-olive-light: #EEEFEB;      /* Hell-Oliv: Fläche „olive-light“, Footer, Nummer-Pille auf Oliv */
  --nf-grey-900: #33383F;         /* Grau dunkel: Tönung der Zeichnungslinien auf „grey“ */
  --nf-grey-700: #495158;         /* Grau mittel: Icons, starke Trennlinien (7,5:1 auf grey-50) */
  --nf-grey-500: #626A72;         /* Grau hell: Labels und Fußnoten auf Hell (5,49 Weiß · 5,08 grey-50 · 4,75 olive-light) */
  --nf-grey-100: #E7ECF0;         /* Rand der Referenz: Haarlinie auf „grey“ */
  --nf-grey-50: #F5F6F7;          /* Fläche „grey“ und Kachel auf „white“ */
  --nf-white-pure: #FFFFFF;       /* reines Weiß der Referenz: Fläche „white“, Karten auf grey/olive-light (--nf-white #FBFBFB bleibt) */

  /* 2b. Mischungen */
  --nf-olive-glow: #3E4B41;       /* 45 % olive-mid + 55 % olive-deep: hellster Punkt des Oliv-Verlaufs. Grenze für Text: Weiß 68 % = 5,28:1 */
  --nf-olive-deep-2: #202A24;     /* 80 % olive-deep + 20 % ink: früheres Verlaufsende. Rev. 7: nicht mehr im Verlauf, nur Rückfall */
  --nf-red-pale: #D28D8A;         /* 55 % red-soft + 45 % cream: roter Weg der Zeichnungen auf Oliv, NUR Grafik (3,12–4,98:1) */
  /* --nf-grad-olive steht seit Rev. 7 im Block „Verläufe mit Steuer-Variablen“ unten (Webflow 1:1) */
  --nf-glow-olive: radial-gradient(closest-side, rgb(91 105 94 / 0.55), rgb(91 105 94 / 0) 100%);   /* hinter dem wichtigsten Bild, nie hinter Text */

  /* Text, Linien, Glas auf Oliv (Weiß wie die Referenz; Werte gegen den Lichtpunkt #3E4B41, schlechtester Fall) */
  --nf-on-olive: #FFFFFF;                         /* 9,18:1 (Fläche #26332A: 13,21:1) */
  --nf-on-olive-soft: rgb(255 255 255 / 0.8);     /* 6,59:1 Fließtext; auf Glas-Karte 5,66:1 */
  --nf-on-olive-mute: rgb(255 255 255 / 0.68);    /* 5,28:1 Labels ≥ 12 px; auf Glas-Karte 4,61:1 */
  --nf-line-olive: rgb(255 255 255 / 0.12);       /* Kartenrand, Haarlinie */
  --nf-line-olive-strong: rgb(255 255 255 / 0.5); /* Sekundär-Button-Rand (3,65:1 auf dem Lichtpunkt) */
  --nf-glass-card: rgb(255 255 255 / 0.06);       /* Glas-Karte: nur Deckkraft, KEIN backdrop-filter (scrollt) */
  --nf-highlight-olive: inset 0 1px 0 rgb(255 255 255 / 0.1);
  --nf-shadow-olive: 0 24px 60px -30px rgb(10 16 12 / 0.7);
  --nf-glass-olive: rgb(38 51 42 / 0.74);         /* Header-Glas über Oliv */
  --nf-glass-olive-strong: rgb(38 51 42 / 0.86);

  /* Linien, Schatten auf Hell (nie reines Schwarz). Rev. 6 (V9-A0): grey-900-getönt (51 56 63) statt olive-deep (38 51 42),
     passend zur kühlen Grau-Fläche; gleiche Deckkraft, optisch fast gleich, aber ohne Grünstich */
  --nf-line-soft: rgb(51 56 63 / 0.08);           /* Haarlinie auf white */
  --nf-line-soft-strong: rgb(51 56 63 / 0.16);    /* Hover, Akkordeon offen */
  --nf-shadow-soft: 0 1px 2px rgb(51 56 63 / 0.05), 0 12px 32px -14px rgb(51 56 63 / 0.16);   /* weiße Karte, Apple-weich */
  --nf-shadow-lift: 0 2px 6px rgb(51 56 63 / 0.06), 0 28px 60px -24px rgb(51 56 63 / 0.24);   /* Medien, :hover/:active */
  --nf-tint-olive: rgb(92 104 94 / 0.08);         /* Pillenfläche auf Hell */
  --nf-line-olive-pill: rgb(92 104 94 / 0.35);    /* Pillenrand auf Hell */
  --nf-glass-light: rgb(255 255 255 / 0.78);      /* Header-Glas über Hell (Nav-Text ink 19,4:1) */
  --nf-glass-light-strong: rgb(255 255 255 / 0.9);
  --nf-scrim-neutral: rgb(12 12 14 / 0.9);        /* Consent-Karte außerhalb von Bordeaux (cream darauf ≥ 12,4:1). Rev. 6: ohne Grünstich (vorher 14 19 16) */
  /* Rev. 6 (V9-A0): Dialoge (Lupe, Hero-Film, Galerie) neutral dunkel statt olive-deep-2, Abdunkler neutral.
     Text/Icons darauf Weiß bzw. Creme (#181818: Weiß 17,4:1, Creme 78 % ≈ 11:1). */
  --nf-backdrop: rgb(8 8 10 / 0.72);              /* ::backdrop hinter Dialogen */
  --nf-dialog-bg: var(--nf-ink-2);                /* Fenster um Bild/Video */
  --nf-dialog-line: rgb(255 255 255 / 0.1);       /* Fensterrand */
  --nf-dialog-highlight: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --nf-dialog-shadow: 0 40px 100px -30px rgb(5 5 6 / 0.7);
  --nf-dialog-glass: rgb(8 8 10 / 0.72);          /* Schließen-/Pfeil-Knopf über dem Bild (Weiß darauf ≥ 12:1 auf jedem Motiv) */
  --nf-dialog-btn-line: rgb(255 255 255 / 0.24);
  /* Rev. 6 (V9-A0): Footer-Stufe, setzt sich von Weiß und grey-50 ab (Referenz-Randfarbe grey-100) */
  --nf-footer-bg: var(--nf-grey-100);             /* #E7ECF0: ink 17,1 · graphite 8,2 · grey-700 6,7 · wine 5,9:1 */
  --nf-footer-line: rgb(51 56 63 / 0.14);         /* grey-900 zu 14 %: Haarlinie oben und über der Fußzeile */
  /* Rev. 5 (farbwelt-rev5 §2.1) */
  --kopf-fade-h: 160px;                            /* Länge des Kopf-Fußes mobil; ab 900 px 240 px (@media unten), feste Pixel */
  --nf-shadow-btn-hell: 0 8px 20px -10px rgb(72 12 18 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.16);     /* Rotbutton auf Weiß: zarter Hof (Rev. 7: Tint #480C12) */
  --nf-shadow-btn-hell-hover: 0 12px 26px -10px rgb(72 12 18 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.2);
  --nf-ring-check-hell: 0 0 0 4px rgb(92 104 94 / 0.12);                                                  /* Haken-Ring auf Hell */
}

/* ── Revision 7 · V11-A „Dynamik“ (02.10.2026, bauplan v11 §1b) ─────────────────────────────────────────────────
   Werte 1:1 aus ninofischlein.webflow.io (shared CSS, gemessen 02.10.): Oliv-Radial var(--light-green) nach var(--dark-green),
   Button linear-gradient(#AE1D2B, #480C12), Verlaufsenden #77111B/#B01627, Flächen #FFFFFF/#F5F6F7/#EEEFEB, Rand #E7ECF0,
   Grau sehr hell #CBD5DF. Keine anderen Flächenwerte. Kontraste WCAG 2.x, gerechnet an hellstem und dunkelstem Stopp. */
:root {
  --nf-red-night: #480C12;        /* Webflow: Ende des Button-/Rot-Verlaufs. Weiß darauf 15,71:1 */
  --nf-red-mid: #77111B;          /* Webflow: Ende des Event-Radials, Mitte der Rot-Fläche. Weiß 11,17:1 */
  --nf-red-hover: #B01627;        /* Webflow: heller Hover-Stopp. Weiß 7,02:1 */
  --nf-kopf-fuss: #CBD5DF;        /* Webflow „Grau sehr hell“: Kopf-Fuß-Ende vor dunklen Flächen, Footer-Ende */
  /* Statische Verläufe (keine Steuer-Variablen, darum an :root aufgelöst) */
  --nf-grad-white: linear-gradient(180deg, #FFFFFF 0%, #F5F6F7 100%);       /* Stufe 1,08:1, Verlauf statt Kante */
  --nf-grad-grey: linear-gradient(180deg, #F5F6F7 0%, #EEEFEB 100%);        /* Stufe 1,07:1 */
  --nf-grad-footer: linear-gradient(180deg, #E7ECF0 0%, #CBD5DF 100%);      /* Footer: oben = Kopf-Fuß-Ende der Einzelseiten */
}
/* Verläufe mit Steuer-Variablen: an jeder Theme-Fläche neu deklariert, weil Custom Properties mit var() dort aufgelöst werden,
   wo sie deklariert sind. Nur an :root stünde --oliv-pos usw. einer Section nie im Verlauf. Standardwerte = Rückfall im var():
   --oliv-pos 50% 50% (Kreis) bzw. 50% 25% (hohe Ellipse mobil), --rot-pos 50% 58%, --h-winkel 165deg (gespiegelt 195deg).
   Eine Section setzt nur die Steuer-Variable an sich selbst, z. B. .s-07-nino { --oliv-pos: 40% 50%; }. */
:root, [data-theme] {
  --nf-grad-olive: radial-gradient(circle at var(--oliv-pos, 50% 50%), #5B695E 0%, #26332A 100%);
  --nf-grad-olive-hoch: radial-gradient(ellipse 140% 45% at var(--oliv-pos, 50% 25%), #5B695E 0%, #26332A 100%);
  --nf-grad-olive-light: linear-gradient(var(--h-winkel, 165deg), #EEEFEB 0%, #E7ECF0 100%);
  --nf-grad-red: radial-gradient(ellipse 75% 65% at var(--rot-pos, 50% 58%), #AE1D2B 0%, #77111B 55%, #480C12 100%);
}
/* Kopf-Fuß-Verlauf (Rev. 5 K2, Vorgaben E7): Weiß, die unteren --kopf-fade-h nach --kopf-fade-end (Standard grey-100).
   Zusätzlich an jeder white-Fläche deklariert: Custom Properties mit var() lösen dort auf, wo sie deklariert sind. Nur an
   :root bliebe die Endfarbe immer grey-100, auch wenn base.css am Kopf --kopf-fade-end je Folge-Section setzt. */
:root, [data-theme="white"] {
  --nf-grad-kopf-hell: linear-gradient(180deg, var(--nf-white-pure) calc(100% - var(--kopf-fade-h)), var(--kopf-fade-end, var(--nf-grey-100)) 100%);
}

@media (min-width: 900px) {
  :root { --header-top: 0px; --header-bar: 72px; --header-h: 72px; --kopf-fade-h: 240px; }   /* Rev. 5: Leiste 72 px, Kopf-Fuß 240 px */
}

/* Flächen-Themes: jede Section trägt data-theme. Rev. 4 (kopf-funnel.md §1.1 G1): Kopf, Schluss-CTA und Funnel sind „olive“;
   „bordeaux“ setzt keine Section mehr, das Theme bleibt als Rückfall stehen (ebenso :root als Standard ohne Theme). */
:root,
[data-theme="bordeaux"], [data-theme="bordeaux-2"], [data-theme="ink"], [data-theme="cinema"], [data-theme="ink-2"] {
  --text: var(--nf-text);
  --text-soft: var(--nf-text-soft);
  --text-mute: var(--nf-text-mute);
  --hairline: var(--nf-line);
  --accent-text: var(--nf-red-light);
  --line: var(--nf-wine);
}
:root                     { --bg: var(--nf-bordeaux);   --bg-2: var(--nf-bordeaux-2); }
[data-theme="bordeaux"]   { --bg: var(--nf-bordeaux);   --bg-2: var(--nf-bordeaux-2); }
[data-theme="bordeaux-2"] { --bg: var(--nf-bordeaux-2); --bg-2: var(--nf-ink); }
[data-theme="ink"]        { --bg: var(--nf-ink);        --bg-2: var(--nf-ink-2); }
[data-theme="cinema"]     { --bg: var(--nf-ink-0);      --bg-2: var(--nf-ink); }       /* V1-Name, wie ink */
[data-theme="ink-2"]      { --bg: var(--nf-ink-2);      --bg-2: var(--nf-ink); }       /* V1-Name */
/* Zeichnungs-System, dunkler Satz (Revision 2): Flächen aus bordeaux/bordeaux-2 mit Creme aufgehellt */
[data-theme="bordeaux"], [data-theme="bordeaux-2"], [data-theme="ink"], [data-theme="cinema"], [data-theme="ink-2"] {
  --z-linie: #B6A9A8;                    /* cream zu 70 % auf bordeaux (7,96:1) */
  --z-linie-zart: #6C5256;               /* cream zu 32 % */
  --z-flaeche-1: #4C2D34;                /* bordeaux + 16 % cream */
  --z-flaeche-2: #3F1D25;                /* bordeaux + 9 % cream */
  --z-flaeche-3: #30191F;                /* bordeaux-2 + 8 % cream */
  --z-boden: #33101A;                    /* bordeaux + 3,5 % cream */
  --z-akzent: var(--nf-red-light);       /* #C66A68, 4,88:1 auf bordeaux */
  --z-akzent-flaeche: #4B0C16;           /* red zu 22 % auf bordeaux */
  --z-durch: 0.4;
}
[data-theme="ink"], [data-theme="cinema"], [data-theme="ink-2"] { --z-linie: #ABA8A5; --z-linie-zart: #535151; }   /* cream zu 70 % / 32 % auf ink */

/* Helle Papierfläche (Revision 2): Erklär-Abschnitte mit Zeichnung (02, 03, 04, 06, 09) und Rechtsseiten.
   Creme wie das Vorbild (#F1EDE8), Karten und Rahmen darauf --nf-white. cream-2 bleibt die wärmere Variante. */
[data-theme="cream"], [data-theme="cream-2"] {
  --bg: var(--nf-cream);
  --bg-2: var(--nf-cream-2);
  --z-linie: #716F6E;  --z-linie-zart: #B0ADAA;  --z-durch: 0.26;
  --z-flaeche-1: #FBFBFB;  --z-flaeche-2: #EDE8E1;  --z-flaeche-3: #DFDBD7;  --z-boden: #F5F0E8;
  --z-akzent: var(--nf-red);  --z-akzent-flaeche: #ECD7D1;
  --text: var(--nf-text-on-light);
  --text-soft: var(--nf-text-on-light-soft);
  --text-mute: rgb(8 8 10 / 0.62);
  --hairline: var(--nf-line-on-light);
  --accent-text: var(--nf-accent-on-light);
  --line: var(--nf-wine);
}
[data-theme="cream-2"] { --bg: var(--nf-cream-2); --bg-2: var(--nf-cream); }

/* ── Semantische Schicht: Bausteine lesen nur noch diese Rollen, nicht mehr [data-theme="cream"] ──────────────
   Bestehende Themes bekommen ihre heutigen Werte (keine sichtbare Änderung an Bordeaux/Creme). */
:root,
[data-theme="bordeaux"], [data-theme="bordeaux-2"], [data-theme="ink"], [data-theme="cinema"], [data-theme="ink-2"] {
  --bg-image: none;
  --surface-card: var(--nf-grad-card);   --surface-card-line: var(--nf-line);   --surface-sunken: rgb(8 8 10 / 0.3);
  --shadow-card: var(--nf-highlight), var(--nf-shadow-card);   --shadow-media: var(--nf-highlight), var(--nf-shadow-media);
  --pill-text: var(--nf-cream);   --pill-bg: var(--nf-tint-pill);   --pill-line: var(--nf-line-red);
  --nr-bg: var(--nf-wine) var(--nf-grad-btn);   --nr-text: var(--nf-cream);
  --stat-value: var(--text);   --stat-plus: var(--nf-red-light);
  --btn2-text: var(--nf-cream);   --btn2-line: var(--nf-line-strong);   --btn2-hover-bg: rgb(241 237 232 / 0.06);   --btn2-hover-text: var(--nf-cream);
  --focus-ring: var(--nf-red-light);   --ring-check: var(--nf-ring-red);   --btn-edge: 0 0 0 0 transparent;
  --zr-bg: rgb(8 8 10 / 0.22);   --zr-shadow: var(--nf-highlight);
  --scrim-card: var(--nf-scrim-card);   --raster-on: 1;
  /* Rev. 7: neue Rollen (Standard = bisheriges Verhalten; base.css liest sie mit demselben Rückfall) */
  --pfeil: var(--z-akzent);   --kreuz: var(--nf-text-mute);
  --btn1-bg: var(--nf-wine) var(--nf-grad-btn);   --btn1-text: var(--nf-white-pure);
  --btn1-hover-bg: var(--nf-red-hover) var(--nf-grad-btn-hover);   --btn1-hover-text: var(--nf-white-pure);
}
[data-theme="cream"], [data-theme="cream-2"] {
  --bg-image: none;
  --surface-card: var(--nf-white);   --surface-card-line: var(--nf-line-on-light);   --surface-sunken: rgb(174 29 43 / 0.06);
  --shadow-card: 0 24px 60px -30px rgb(45 9 18 / 0.35);   --shadow-media: 0 24px 60px -30px rgb(45 9 18 / 0.35);
  --pill-text: var(--nf-wine);   --pill-bg: rgb(174 29 43 / 0.06);   --pill-line: var(--nf-line-red);
  --nr-bg: var(--nf-wine) var(--nf-grad-btn);   --nr-text: var(--nf-cream);
  --stat-value: var(--text);   --stat-plus: var(--nf-wine);
  --btn2-text: var(--nf-ink);   --btn2-line: var(--nf-line-on-light);   --btn2-hover-bg: rgb(8 8 10 / 0.04);   --btn2-hover-text: var(--nf-ink);
  --focus-ring: var(--nf-wine);   --ring-check: 0 0 0 4px rgb(174 29 43 / 0.1);   --btn-edge: 0 0 0 0 transparent;
  --zr-bg: rgb(251 251 251 / 0.42);   --zr-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
  --scrim-card: var(--nf-scrim-neutral);   --raster-on: 0;
  --pfeil: var(--z-akzent);   --kreuz: var(--nf-graphite);
  --btn1-bg: var(--nf-wine) var(--nf-grad-btn);   --btn1-text: var(--nf-white-pure);
  --btn1-hover-bg: var(--nf-red-hover) var(--nf-grad-btn-hover);   --btn1-hover-text: var(--nf-white-pure);
}

/* ── Flächen-Themes Rev. 7 (V11-A): jedes Theme setzt ALLE Rollen selbst (Custom Properties erben, Rückfall wäre Bordeaux) ── */

/* olive: dunkle Bühne, Webflow-Radial 1:1 (#5B695E Mitte nach #26332A Rand, .dark.olive). Der hellste Punkt liegt hinter dem
   Text, darum alle Werte gegen #5B695E (schlechtester Fall) gerechnet, in Klammern gegen #26332A. --bg #3E4B41 = Mitte für
   flache Leser (Ringe, Kanten). Zeichnungen: Kacheln bekommen data-theme="white" (Weg Rot auf Weiß 6,98:1). */
[data-theme="olive"] {
  --bg: var(--nf-olive-glow);   --bg-2: var(--nf-olive-deep);   --bg-image: var(--nf-grad-olive);
  color-scheme: dark;   --raster-on: 0;
  --text: var(--nf-white-pure);   --text-soft: rgb(255 255 255 / 0.92);   --text-mute: rgb(255 255 255 / 0.88);   /* 5,79 / 5,20 / 4,93:1 (13,21 / 11,46 / 10,6) */
  --hairline: var(--nf-line-olive);
  --accent-text: var(--nf-white-pure);    /* Akzentwort nur über Playfair Italic; Rot als Text fällt auf Oliv durch (1,19–1,89:1) */
  --line: rgb(255 255 255 / 0.6);         /* Verbindungslinien 3,23:1 (40 % hatten 2,29:1) */
  --surface-card: rgb(255 255 255 / 0.04);   --surface-card-line: rgb(255 255 255 / 0.16);   --surface-sunken: rgb(10 16 12 / 0.28);   /* Glas 4 %: Weiß 88 % darauf 4,53:1 */
  --shadow-card: var(--nf-highlight-olive), var(--nf-shadow-olive);   --shadow-media: var(--nf-highlight-olive), var(--nf-shadow-olive);
  --pill-text: var(--nf-white-pure);   --pill-bg: rgb(255 255 255 / 0.1);   --pill-line: rgb(255 255 255 / 0.4);          /* Text 5,0:1 auf Pille */
  --nr-bg: var(--nf-olive-light);   --nr-text: var(--nf-olive-deep);                                                     /* 11,44:1; Scheibe 5,01:1 zur Fläche */
  --stat-value: var(--nf-white-pure);   --stat-plus: rgb(255 255 255 / 0.86);                                          /* 4,79:1, große Ziffern */
  --btn2-text: var(--nf-white-pure);   --btn2-line: rgb(255 255 255 / 0.7);   --btn2-hover-bg: rgb(255 255 255 / 0.12);   --btn2-hover-text: var(--nf-white-pure);   /* Rand 3,79:1 */
  --focus-ring: var(--nf-white-pure);                                                                                  /* 5,79:1 */
  --ring-check: 0 0 0 4px rgb(255 255 255 / 0.14);
  --btn-edge: 0 0 0 2px var(--nf-white-pure);       /* Rotknopf gegen Oliv nur 1,20–2,71:1, Weiß-Kante 5,79:1 (WCAG 1.4.11) */
  --nf-shadow-btn: 0 12px 30px -12px rgb(72 12 18 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.16);
  --nf-shadow-btn-hover: 0 16px 36px -12px rgb(72 12 18 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.2);
  --zr-bg: rgb(10 16 12 / 0.24);   --zr-shadow: var(--nf-highlight-olive);
  --scrim-card: var(--nf-scrim-neutral);
  --pfeil: var(--nf-olive-light);   --kreuz: var(--nf-kopf-fuss);                                                        /* 5,01:1 / 3,89:1 am hellsten Punkt */
  --btn1-bg: var(--nf-wine) var(--nf-grad-btn);   --btn1-text: var(--nf-white-pure);                                     /* Weiß 6,98–15,71:1 */
  --btn1-hover-bg: var(--nf-red-hover) var(--nf-grad-btn-hover);   --btn1-hover-text: var(--nf-white-pure);
  /* Zeichnungen, dunkler Oliv-Satz (nur Rückfall ohne weiße Kachel; Formel wie Bordeaux) */
  --z-linie: #B2B7B1;  --z-linie-zart: #666F68;
  --z-flaeche-1: #465149;  --z-flaeche-2: #38443B;  --z-flaeche-3: #303A34;  --z-boden: #2D3A31;
  --z-akzent: var(--nf-red-pale);  --z-akzent-flaeche: #452C27;  --z-durch: 0.4;
}
/* Rev. 4 (kopf-funnel.md §3.1): Primitive im Oliv-Kontext. Fängt var(--nf-line|grad-card|glow-red|text…) in Section-CSS ab.
   Custom Properties mit var() werden dort aufgelöst, wo sie deklariert sind; deshalb werden die Primitive selbst überschrieben,
   nicht ihre Bausteine (--nf-bordeaux-3 …). Die Bordeaux-Werte in :root und das Theme „bordeaux“ bleiben als Rückfall stehen. */
[data-theme="olive"] {
  --nf-text: var(--nf-white-pure);  --nf-text-soft: rgb(255 255 255 / 0.92);  --nf-text-mute: rgb(255 255 255 / 0.88);
  --nf-on-olive-soft: rgb(255 255 255 / 0.92);  --nf-on-olive-mute: rgb(255 255 255 / 0.88);
  --nf-line: var(--nf-line-olive);  --nf-line-strong: rgb(255 255 255 / 0.24);
  --nf-highlight: var(--nf-highlight-olive);
  --nf-glass-card: rgb(255 255 255 / 0.04);
  --nf-grad-card: linear-gradient(180deg, rgb(255 255 255 / 0.07) 0%, rgb(255 255 255 / 0.03) 100%);   /* Glas statt Bordeaux-Karte */
  --nf-shadow-card: var(--nf-shadow-olive);  --nf-shadow-media: var(--nf-shadow-olive);
  --nf-glow-red: var(--nf-glow-olive);           /* .objekt-Fallbacks der Freebie-Köpfe */
  --nf-scrim-card: var(--nf-scrim-neutral);
  --nf-tint-pill: rgb(255 255 255 / 0.1);  --nf-line-red: rgb(255 255 255 / 0.4);
  --nf-ring-red: 0 0 0 4px rgb(255 255 255 / 0.14);
  --nf-red-light: var(--nf-white-pure);          /* Rev. 7: .card__gain strong und Rückfälle (#C66A68 hätte 2,1:1) */
}

/* red (Rev. 7, neu): Webflow-Rot als Fläche, Radial #AE1D2B Mitte, #77111B bei 55 %, #480C12 Rand. --bg #77111B (Mitte für
   flache Leser). Werte gegen #AE1D2B (hellster Stopp), in Klammern gegen #480C12. Nie rote Schrift oder roter Knopf auf Rot:
   Primärknopf invers (Weiß nach #EEEFEB, Text #AE1D2B), Akzentwort weiß kursiv. Zeichnungen auf weißen Kacheln. */
[data-theme="red"] {
  --bg: var(--nf-red-mid);   --bg-2: var(--nf-red-night);   --bg-image: var(--nf-grad-red);
  color-scheme: dark;   --raster-on: 0;
  --text: var(--nf-white-pure);   --text-soft: rgb(255 255 255 / 0.9);   --text-mute: rgb(255 255 255 / 0.85);   /* 6,98 / 5,87 / 5,39:1 (15,71 / 13,0 / 11,56) */
  --hairline: rgb(255 255 255 / 0.24);   --accent-text: var(--nf-white-pure);
  --line: rgb(255 255 255 / 0.6);                                                                                         /* 3,36:1 */
  --surface-card: rgb(255 255 255 / 0.08);   --surface-card-line: rgb(255 255 255 / 0.2);   --surface-sunken: rgb(72 12 18 / 0.35);   /* Weiß 85 % auf Glas 4,87:1 */
  --shadow-card: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 24px 60px -30px rgb(72 12 18 / 0.6);
  --shadow-media: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 24px 60px -30px rgb(72 12 18 / 0.6);
  --pill-text: var(--nf-white-pure);   --pill-bg: rgb(255 255 255 / 0.12);   --pill-line: rgb(255 255 255 / 0.4);
  --nr-bg: var(--nf-white-pure);   --nr-text: var(--nf-wine);                                                           /* 6,98:1 */
  --stat-value: var(--nf-white-pure);   --stat-plus: rgb(255 255 255 / 0.85);
  --btn2-text: var(--nf-white-pure);   --btn2-line: rgb(255 255 255 / 0.7);   --btn2-hover-bg: rgb(255 255 255 / 0.12);   --btn2-hover-text: var(--nf-white-pure);   /* Rand 4,07:1 */
  --focus-ring: var(--nf-white-pure);   --ring-check: 0 0 0 4px rgb(255 255 255 / 0.18);
  --btn-edge: 0 0 0 2px var(--nf-white-pure);
  --nf-shadow-btn: 0 12px 30px -12px rgb(72 12 18 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.16);
  --nf-shadow-btn-hover: 0 16px 36px -12px rgb(72 12 18 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.2);
  --scrim-card: var(--nf-scrim-neutral);
  --pfeil: var(--nf-white-pure);   --kreuz: rgb(255 255 255 / 0.86);                                                    /* 6,98 / 5,48:1 */
  /* Primärknopf invers: Fläche 6,04–6,98:1 gegen #AE1D2B, Text #AE1D2B 6,04–6,98:1, Hover Text #480C12 13,21–14,52:1 */
  --btn1-bg: var(--nf-white-pure) linear-gradient(180deg, #FFFFFF 0%, #EEEFEB 100%);   --btn1-text: var(--nf-wine);
  --btn1-hover-bg: var(--nf-grey-50) linear-gradient(180deg, #F5F6F7 0%, #E7ECF0 100%);   --btn1-hover-text: var(--nf-red-night);
  /* Zeichnungen: keine neuen z-Sätze. Rahmen weiß (--zr-bg) mit dem hellen grey-Satz, Weg bleibt Rot auf Weiß */
  --zr-bg: var(--nf-white-pure);   --zr-shadow: var(--nf-shadow-soft);
  --z-linie: #707379;  --z-linie-zart: #B2B4B8;
  --z-flaeche-1: #FFFFFF;  --z-flaeche-2: #F0F1F3;  --z-flaeche-3: #E3E4E6;  --z-boden: #FAFBFB;
  --z-akzent: var(--nf-red);  --z-akzent-flaeche: #EEE1E3;  --z-durch: 0.26;
}
/* Primitiv-Remap im Rot-Kontext (wie olive): Section-CSS, die Primitive liest, bekommt helle bzw. neutrale Werte */
[data-theme="red"] {
  --nf-text: var(--nf-white-pure);  --nf-text-soft: rgb(255 255 255 / 0.9);  --nf-text-mute: rgb(255 255 255 / 0.85);
  --nf-line: rgb(255 255 255 / 0.2);  --nf-line-strong: rgb(255 255 255 / 0.3);
  --nf-highlight: inset 0 1px 0 rgb(255 255 255 / 0.1);
  --nf-glass-card: rgb(255 255 255 / 0.08);
  --nf-grad-card: linear-gradient(180deg, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0.05) 100%);
  --nf-shadow-card: 0 24px 60px -30px rgb(72 12 18 / 0.6);  --nf-shadow-media: 0 24px 60px -30px rgb(72 12 18 / 0.6);
  --nf-glow-red: radial-gradient(closest-side, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 100%);   /* helles Glow, Rot auf Rot unsichtbar */
  --nf-scrim-card: var(--nf-scrim-neutral);
  --nf-tint-pill: rgb(255 255 255 / 0.12);  --nf-line-red: rgb(255 255 255 / 0.4);
  --nf-ring-red: 0 0 0 4px rgb(255 255 255 / 0.18);
  --nf-red-light: var(--nf-white-pure);
  --nf-tint-icon: rgb(174 29 43 / 0.1);          /* Pfeil-Kreis im inversen (weißen) Primärknopf */
}

/* white: Weiß-Verlauf #FFFFFF nach #F5F6F7, Kacheln/Karten #F5F6F7 mit Haarlinie #E7ECF0 (verschwinden sonst am Verlaufsende). */
[data-theme="white"] {
  --bg: var(--nf-white-pure);   --bg-2: var(--nf-grey-50);   --bg-image: var(--nf-grad-white);
  color-scheme: light;   --raster-on: 0;
  --text: var(--nf-ink);   --text-soft: var(--nf-graphite);   --text-mute: var(--nf-grey-500);           /* 20,01 / 9,74 / 5,49:1 (18,49 / 9,0 / 5,08) */
  --hairline: var(--nf-line-soft);   --accent-text: var(--nf-wine);   --line: var(--nf-olive);           /* wine 6,98 (6,45):1 */
  --surface-card: var(--nf-grey-50);   --surface-card-line: var(--nf-grey-100);   --surface-sunken: var(--nf-grey-50);
  --shadow-card: none;   --shadow-media: var(--nf-shadow-lift);
  --pill-text: var(--nf-olive-deep);   --pill-bg: var(--nf-tint-olive);   --pill-line: var(--nf-line-olive-pill);   /* 11,87:1 */
  --nr-bg: var(--nf-olive);   --nr-text: var(--nf-white-pure);                                         /* 5,84:1 */
  --stat-value: var(--nf-olive);   --stat-plus: var(--nf-wine);                                          /* 5,84:1 */
  --btn2-text: var(--nf-olive-deep);   --btn2-line: var(--nf-olive);   --btn2-hover-bg: var(--nf-olive-deep);   --btn2-hover-text: var(--nf-white-pure);
  --focus-ring: var(--nf-wine);   --ring-check: var(--nf-ring-check-hell);   --btn-edge: 0 0 0 0 transparent;   /* Rev. 5: Haken-Ring Oliv */
  --nf-shadow-btn: var(--nf-shadow-btn-hell);   --nf-shadow-btn-hover: var(--nf-shadow-btn-hell-hover);         /* Rev. 5: kein rosa Hof auf Hell */
  --zr-bg: var(--nf-grey-50);   --zr-shadow: none;
  --scrim-card: var(--nf-scrim-neutral);
  --pfeil: var(--z-akzent);   --kreuz: var(--nf-grey-700);                                                 /* 8,07 (7,46):1 */
  --btn1-bg: var(--nf-wine) var(--nf-grad-btn);   --btn1-text: var(--nf-white-pure);
  --btn1-hover-bg: var(--nf-red-hover) var(--nf-grad-btn-hover);   --btn1-hover-text: var(--nf-white-pure);
  --z-linie: #787879;  --z-linie-zart: #BBBBBB;                                     /* 4,41:1 / 1,92:1 */
  --z-flaeche-1: #FFFFFF;  --z-flaeche-2: #FAFAFA;  --z-flaeche-3: #ECECED;  --z-boden: #F5F6F7;
  --z-akzent: var(--nf-red);  --z-akzent-flaeche: #F7EAEB;  --z-durch: 0.26;        /* red 6,89:1 */
}

/* grey: Grau-Verlauf #F5F6F7 nach #EEEFEB, weiße Karten mit Haarlinie #E7ECF0 und weichem Schatten. */
[data-theme="grey"], [data-theme="footer"] {
  --bg: var(--nf-grey-50);   --bg-2: var(--nf-white-pure);   --bg-image: var(--nf-grad-grey);
  color-scheme: light;   --raster-on: 0;
  --text: var(--nf-ink);   --text-soft: var(--nf-graphite);   --text-mute: var(--nf-grey-500);           /* 18,49 / 9,00 / 5,08:1 (17,33 / 8,43 / 4,75) */
  --hairline: var(--nf-grey-100);   --accent-text: var(--nf-wine);   --line: var(--nf-olive);            /* wine 6,45 (6,04):1 */
  --surface-card: var(--nf-white-pure);   --surface-card-line: var(--nf-grey-100);   --surface-sunken: var(--nf-white-pure);
  --shadow-card: var(--nf-shadow-soft);   --shadow-media: var(--nf-shadow-lift);
  --pill-text: var(--nf-olive-deep);   --pill-bg: var(--nf-tint-olive);   --pill-line: var(--nf-line-olive-pill);   /* 11,01:1 */
  --nr-bg: var(--nf-olive);   --nr-text: var(--nf-white-pure);
  --stat-value: var(--nf-olive);   --stat-plus: var(--nf-wine);                                          /* 5,40 (5,05):1 */
  --btn2-text: var(--nf-olive-deep);   --btn2-line: var(--nf-olive);   --btn2-hover-bg: var(--nf-olive-deep);   --btn2-hover-text: var(--nf-white-pure);
  --focus-ring: var(--nf-wine);   --ring-check: var(--nf-ring-check-hell);   --btn-edge: 0 0 0 0 transparent;   /* Rev. 5: Haken-Ring Oliv */
  --nf-shadow-btn: var(--nf-shadow-btn-hell);   --nf-shadow-btn-hover: var(--nf-shadow-btn-hell-hover);         /* Rev. 5: kein rosa Hof auf Hell */
  --zr-bg: var(--nf-white-pure);   --zr-shadow: var(--nf-shadow-soft);
  --scrim-card: var(--nf-scrim-neutral);
  --pfeil: var(--z-akzent);   --kreuz: var(--nf-grey-700);                                                 /* 7,46 (6,99):1 */
  --btn1-bg: var(--nf-wine) var(--nf-grad-btn);   --btn1-text: var(--nf-white-pure);
  --btn1-hover-bg: var(--nf-red-hover) var(--nf-grad-btn-hover);   --btn1-hover-text: var(--nf-white-pure);
  --z-linie: #707379;  --z-linie-zart: #B2B4B8;                                     /* 4,39:1 / 1,92:1, Tönung grey-900 */
  --z-flaeche-1: #FFFFFF;  --z-flaeche-2: #F0F1F3;  --z-flaeche-3: #E3E4E6;  --z-boden: #FAFBFB;
  --z-akzent: var(--nf-red);  --z-akzent-flaeche: #EEE1E3;  --z-durch: 0.26;        /* red 6,37:1 */
}
/* footer: eigene Stufe unter jeder Seite, Verlauf #E7ECF0 nach #CBD5DF ausdrücklich gesetzt (sonst erbte er den grey-Verlauf
   aus der gemeinsamen Rollenliste). --bg #D9E0E7 = Mitte. Labels grey-700 (5,43:1 auf #CBD5DF; grey-500 hätte 3,69:1). */
[data-theme="footer"] {
  --bg: #D9E0E7;   --bg-2: var(--nf-white-pure);   --bg-image: var(--nf-grad-footer);
  --text-mute: var(--nf-grey-700);                                                                       /* 6,79 (5,43):1; ink 16,82 (13,46); graphite 8,19 (6,55) */
  --hairline: var(--nf-footer-line);   --surface-card-line: var(--nf-footer-line);
}

/* olive-light (Rev. 7: wieder eigene Fläche, Ninos „Klarer Anspruch“): Verlauf #EEEFEB nach #E7ECF0 (Winkel --h-winkel),
   weiße Karten mit weichem Schatten, eigener Zeichnungssatz (olive-deep-getönt). Vorlage: Block aus 1fe5b70 (Rev. 3). */
[data-theme="olive-light"] {
  --bg: var(--nf-olive-light);   --bg-2: var(--nf-white-pure);   --bg-image: var(--nf-grad-olive-light);
  color-scheme: light;   --raster-on: 0;
  --text: var(--nf-ink);   --text-soft: var(--nf-graphite);   --text-mute: var(--nf-grey-500);           /* 17,33 / 8,43 / 4,75:1 (16,82 / 8,19 / 4,62); Labels ≥ 13 px */
  --hairline: var(--nf-line-soft);   --accent-text: var(--nf-wine);   --line: var(--nf-olive);           /* wine 6,04 (5,86):1 */
  --surface-card: var(--nf-white-pure);   --surface-card-line: var(--nf-grey-100);   --surface-sunken: var(--nf-grey-50);
  --shadow-card: var(--nf-shadow-soft);   --shadow-media: var(--nf-shadow-lift);
  --pill-text: var(--nf-olive-deep);   --pill-bg: var(--nf-tint-olive);   --pill-line: var(--nf-line-olive-pill);   /* 11,44 (11,11):1 */
  --nr-bg: var(--nf-olive);   --nr-text: var(--nf-white-pure);                                         /* 5,84:1 */
  --stat-value: var(--nf-olive);   --stat-plus: var(--nf-wine);                                          /* 5,05 (4,91):1 */
  --btn2-text: var(--nf-olive-deep);   --btn2-line: var(--nf-olive);   --btn2-hover-bg: var(--nf-olive-deep);   --btn2-hover-text: var(--nf-white-pure);
  --focus-ring: var(--nf-wine);   --ring-check: var(--nf-ring-check-hell);   --btn-edge: 0 0 0 0 transparent;
  --nf-shadow-btn: var(--nf-shadow-btn-hell);   --nf-shadow-btn-hover: var(--nf-shadow-btn-hell-hover);
  --zr-bg: var(--nf-white-pure);   --zr-shadow: var(--nf-shadow-soft);
  --scrim-card: var(--nf-scrim-neutral);
  --pfeil: var(--z-akzent);   --kreuz: var(--nf-grey-700);                                                 /* 6,99 (6,79):1 */
  --btn1-bg: var(--nf-wine) var(--nf-grad-btn);   --btn1-text: var(--nf-white-pure);
  --btn1-hover-bg: var(--nf-red-hover) var(--nf-grad-btn-hover);   --btn1-hover-text: var(--nf-white-pure);
  /* Zeichnungen: gleiche Helligkeitsabstände wie der freigegebene Creme-Satz, Tönung olive-deep */
  --z-linie: #68716A;  --z-linie-zart: #AAAFAA;                                     /* 4,37:1 / 1,93:1 */
  --z-flaeche-1: #FFFFFF;  --z-flaeche-2: #E9EAE6;  --z-flaeche-3: #DBDED9;  --z-boden: #F2F3F0;
  --z-akzent: var(--nf-red);  --z-akzent-flaeche: #E7DAD7;  --z-durch: 0.26;        /* red 5,97:1 */
}

/* ── Ergänzung FE-1a (Umsetzung farbwelt.md §2.1/§4): weitere Rollen, damit base.css ohne Theme-Listen auskommt ──────
   Jedes Theme setzt alle Rollen selbst, weil Custom Properties erben (sonst übernähme eine dunkle Karte in einer hellen
   Section deren Werte). Bordeaux und Creme behalten die bisherigen Werte der Bausteine aus base.css.
   frame-bg: Medienrahmen · stats-bg/-line/-shadow: Kennzahlenleiste · acc-bg/-line/-open-bg/-open-line/-shadow/-icon-line:
   Akkordeon-Zeile · nr-ring: Ring um Schritt-Nummern · btn2-line-w/-hover-line: Sekundär-Button · link-line: Unterstrich
   des Pfeil-Links · raised-bg/-shadow: kleines Original am Zeichnungsrahmen · objekt-inset/-h/-bg: Glow bzw. Bodenellipse
   unter Freistellern · compare-off-bg/-with-line: Vergleichsspalten · consent-link: Link in der Consent-Karte (auf dem
   neutralen Scrim über hellem Poster hätte red-light nur 3,9:1, Creme 12,4:1). */
:root,
[data-theme="bordeaux"], [data-theme="bordeaux-2"], [data-theme="ink"], [data-theme="cinema"], [data-theme="ink-2"] {
  --frame-bg: var(--nf-grad-frame);
  --stats-bg: var(--nf-tint-stats);   --stats-line: var(--hairline);   --stats-shadow: var(--nf-highlight);
  --acc-bg: rgb(241 237 232 / 0.03);   --acc-line: var(--nf-line);   --acc-open-bg: rgb(241 237 232 / 0.05);   --acc-open-line: var(--nf-line-strong);
  --acc-shadow: none;   --acc-icon-line: var(--nf-line-strong);
  --nr-ring: 0 0 0 6px rgb(174 29 43 / 0.16);
  --btn2-line-w: 1px;   --btn2-hover-line: rgb(241 237 232 / 0.4);
  --link-line: currentColor;
  --raised-bg: var(--nf-grad-card);   --raised-shadow: var(--nf-highlight), var(--nf-shadow-card);
  --objekt-inset: 30% -10% -4%;   --objekt-h: auto;   --objekt-bg: var(--nf-glow-red);
  --compare-off-bg: rgb(8 8 10 / 0.35);   --compare-with-line: rgb(174 29 43 / 0.6);
  --consent-link: var(--nf-red-light);
}
[data-theme="cream"], [data-theme="cream-2"] {
  --frame-bg: var(--nf-white);
  --stats-bg: var(--nf-white);   --stats-line: var(--nf-line-on-light);   --stats-shadow: 0 24px 60px -30px rgb(45 9 18 / 0.35);
  --acc-bg: var(--nf-white);   --acc-line: var(--nf-line-on-light);   --acc-open-bg: var(--nf-white);   --acc-open-line: var(--nf-line-on-light);
  --acc-shadow: none;   --acc-icon-line: var(--nf-line-strong);
  --nr-ring: 0 0 0 6px rgb(174 29 43 / 0.16);
  --btn2-line-w: 1px;   --btn2-hover-line: rgb(8 8 10 / 0.3);
  --link-line: currentColor;
  --raised-bg: var(--nf-white);   --raised-shadow: 0 14px 30px -14px rgb(45 9 18 / 0.45);
  --objekt-inset: auto 4% -4%;   --objekt-h: 16%;   --objekt-bg: radial-gradient(closest-side, rgb(8 8 10 / 0.10), rgb(8 8 10 / 0));
  --compare-off-bg: rgb(8 8 10 / 0.35);   --compare-with-line: rgb(174 29 43 / 0.6);
  --consent-link: var(--nf-cream);
}
[data-theme="olive"] {
  --frame-bg: var(--nf-glass-card);
  --stats-bg: var(--nf-glass-card);   --stats-line: var(--nf-line-olive);   --stats-shadow: var(--nf-highlight-olive), var(--nf-shadow-olive);
  --acc-bg: var(--nf-glass-card);   --acc-line: var(--nf-line-olive);   --acc-open-bg: rgb(255 255 255 / 0.08);   --acc-open-line: rgb(255 255 255 / 0.22);
  --acc-shadow: var(--nf-highlight-olive);   --acc-icon-line: rgb(255 255 255 / 0.3);
  --nr-ring: 0 0 0 6px rgb(255 255 255 / 0.1);
  --btn2-line-w: 1px;   --btn2-hover-line: rgb(255 255 255 / 0.8);
  --link-line: rgb(255 255 255 / 0.6);
  --raised-bg: var(--nf-olive-glow);   --raised-shadow: var(--nf-highlight-olive), var(--nf-shadow-olive);
  --objekt-inset: 30% -10% -4%;   --objekt-h: auto;   --objekt-bg: var(--nf-glow-olive);
  --compare-off-bg: rgb(10 16 12 / 0.24);   --compare-with-line: rgb(255 255 255 / 0.22);
  --consent-link: var(--nf-cream);
}
[data-theme="red"] {
  --frame-bg: rgb(255 255 255 / 0.08);
  --stats-bg: rgb(255 255 255 / 0.08);   --stats-line: rgb(255 255 255 / 0.2);   --stats-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 24px 60px -30px rgb(72 12 18 / 0.6);
  --acc-bg: rgb(255 255 255 / 0.08);   --acc-line: rgb(255 255 255 / 0.2);   --acc-open-bg: rgb(255 255 255 / 0.12);   --acc-open-line: rgb(255 255 255 / 0.3);
  --acc-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1);   --acc-icon-line: rgb(255 255 255 / 0.4);
  --nr-ring: 0 0 0 6px rgb(255 255 255 / 0.14);
  --btn2-line-w: 1px;   --btn2-hover-line: var(--nf-white-pure);
  --link-line: rgb(255 255 255 / 0.7);
  --raised-bg: var(--nf-red-mid);   --raised-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 24px 60px -30px rgb(72 12 18 / 0.6);
  --objekt-inset: 30% -10% -4%;   --objekt-h: auto;   --objekt-bg: radial-gradient(closest-side, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 100%);
  --compare-off-bg: rgb(72 12 18 / 0.3);   --compare-with-line: rgb(255 255 255 / 0.22);
  --consent-link: var(--nf-cream);
}
[data-theme="olive-light"], [data-theme="white"], [data-theme="grey"], [data-theme="footer"] {
  --frame-bg: var(--surface-card);
  --stats-bg: var(--surface-card);   --stats-line: var(--surface-card-line);   --stats-shadow: var(--shadow-card);
  --acc-bg: var(--surface-card);   --acc-line: var(--surface-card-line);   --acc-open-bg: var(--surface-card);   --acc-open-line: var(--nf-line-olive-pill);
  --acc-shadow: var(--shadow-card);   --acc-icon-line: var(--nf-line-soft-strong);
  --nr-ring: 0 0 0 6px var(--nf-tint-olive);
  --btn2-line-w: 1.5px;   --btn2-hover-line: var(--nf-olive-deep);
  --link-line: var(--nf-line-soft-strong);
  --raised-bg: var(--nf-white-pure);   --raised-shadow: 0 14px 30px -14px rgb(51 56 63 / 0.32);
  --objekt-inset: auto 4% -4%;   --objekt-h: 16%;   --objekt-bg: radial-gradient(closest-side, rgb(51 56 63 / 0.10), rgb(51 56 63 / 0));
  --compare-off-bg: transparent;   --compare-with-line: var(--nf-line-olive-pill);
  --consent-link: var(--nf-cream);
}


/* Breakpoints (Media Queries, nicht als Variablen nutzbar): Basis 360/390 · pill 480 · md 768 · nav 900 · lg 1024 · xl 1440 */