/* CI4U Corporate Design - Fundament. EINZIGE Quelle fuer Farben, Schriften, Masse (Standard "Werkbank" seit 23.10.2026, vorher "Waermer").
 *
 * Werte geprueft mit cd-recherche/B-werkzeug/kontrast.py (liest DIESE Datei, prueft alle @-Bloecke).
 * Aufbau:
 *   1. Schriften (@font-face, lokal, OFL-1.1)
 *   2. Grundwerte (Rohfarben, Skalen) - nie direkt in Komponenten verwenden
 *   3. Rollen HELL     (Block-Markierung @hell fuer das Pruefskript)
 *   4. Rollen DUNKEL   (@dunkel; per prefers-color-scheme ODER data-theme="dark")
 *   5. Masse: Typo, Abstaende, Radien, Linien, Schatten, Dichte, Bewegung, Fokus (mit Rollen-Massen fuer die Varianten)
 *   6. Varianten (data-variante="..."): waermer (bisheriger Standard), mutig (alt), schild, tresen - DESIGN-RUNDE.md.
 *      Jede Variante = ein Block Farben hell (@variante-NAME), optional dunkel (@variante-NAME-dunkel) und ein Block Masse.
 *      Umschalten nur im Staging (static/js/variante.js, ?v=NAME); ohne Attribut gilt "Werkbank" (Standard seit 23.10.2026).
 *   7. Hoher Kontrast (data-kontrast="hoch"; @kontrast-hell / @kontrast-dunkel)
 *
 * Farbregeln (Kurzform):
 *   Violett  = Handeln und Entschieden (Knopf, Link, "bestaetigt" mit Haken/Kuerzel, durchgezogener Rand)
 *   Orange   = nur "Die KI schlaegt vor" (gestrichelter Rand + Wort "Vorschlag") und das Logo
 *   Gruen    = NUR Frist in Ordnung (kein Gruen fuer "Erfolg", Erfolg = violett "bestaetigt")
 *   Gelb/Rot = Frist bald/ueberfaellig; dieselben Familien fuer Warnung/Fehler, aber immer mit Wort + Form
 *   Blau gibt es nicht (Info = neutral).
 */

/* ---------- 1. Schriften ---------- */
/* Fira Sans / Fira Mono: SIL OFL 1.1, Carrois Apostrophe / Mozilla (Quelle: github.com/mozilla/Fira, Dateien via fontsource v18).
   latin = Deutsch komplett (Umlaute, ß, „“, €); latin-ext laedt nur bei Bedarf (z. B. Namen wie Łukasz, Çelik). */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/fira-sans/latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/fira-sans/latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/fira-sans/latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/fira-sans/latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/fira-sans/latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/fira-sans/latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fira Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/fira-mono/latin-400-normal.woff2) format("woff2"); }

/* ---------- 2. Grundwerte ---------- */
:root {
  /* Logo (gemessen an etc/branding/logo/logo-light.png; Briefing nannte #5030F8/#F86828, Abstand dE 0.8/1.5 = nicht sichtbar) */
  --logo-violett: #5530F9;
  --logo-violett-dunkelgrund: #8B7BFF;   /* aus logo-dark.png */
  --logo-orange: #FF6B2B;

  /* Neutrale "Graphit": OKLCH-Farbton 285 (vom Violett), Buntheit steigt zum Dunklen hin -> Tinte statt Grau */
  --n-0:   #FFFFFF;
  --n-25:  #FCFBF9;
  --n-50:  #F6F3EF;
  --n-75:  #F1EDE7;   /* Tresen: Grund */
  --n-100: #ECE7E1;
  --n-150: #EAE5DE;   /* Werkbank: Grund */
  --n-175: #E8E6E1;   /* Schild: Grund (etwas kuehler) */
  --n-200: #DDD6CE;
  --n-250: #D2CBC2;   /* Haarlinie auf grauem Grund */
  --n-300: #C2B9AF;
  --n-400: #9A9087;
  --n-500: #7A7168;
  --n-550: #6F665E;   /* Feldrand auf grauem Grund (>= 3:1 auf n-150/n-175/n-75) */
  --n-600: #5F5750;
  --n-650: #5A524B;   /* Hilfstext auf grauem Grund (>= 4.5:1) */
  --n-700: #46403B;
  --n-800: #2E2A28;
  --n-850: #2A2420;   /* Tresen: warme Tinte */
  --n-900: #211D1F;   /* Tinte */
  /* Dunkle Neutrale (fast unbunt, bewusst KEIN "Deep-Space-Violett") */
  --d-0:   #121217;
  --d-25:  #0E0E12;
  --d-50:  #1B1B21;
  --d-100: #24242C;
  --d-200: #3C3C46;
  --d-400: #6E6E7C;
  --d-600: #AFB0BC;
  --d-900: #EEEEF4;

  /* Violett (Farbton 279-290) */
  --v-50:  #F5F4FE;
  --v-100: #E9E6FE;
  --v-200: #D1CEFE;
  --v-500: var(--logo-violett);
  --v-600: #4526CE;
  --v-700: #371FA8;
  --v-800: #27117A;
  --v-tinte: #1D1948;    /* Tinten-Violett (mutig, schild) */
  --v-d-fill: #201F34;   /* bewusst wenig bunt: kein Violett-Leuchten im Dunkeln */

  /* Orange (Farbton 40-50) */
  --o-50:  #FEF5F0;
  --o-100: #FFE5D9;
  --o-500: var(--logo-orange);
  --o-600: #E4560F;   /* Linie "Vorschlag" auf Weiss >= 3:1 */
  --o-700: #BD4510;   /* Schrift "Vorschlag" auf Weiss >= 4.5:1; auf grauem Grund auch die Linie */
  --o-d:   #FE9652;   /* Farbton 52: weiter weg vom Frist-Rot */
  --o-d-fill: #3D2013;

  /* Fristen-Ampel (Farbtoene bewusst weit weg von Orange 41 und Violett 280: Gruen 152, Gelb 88, Rot 27) */
  --g-500: #198044;  --g-700: #17552E;  --g-50: #E0F7E5;
  --y-400: #F4BF1B;  --y-700: #64470E;  --y-50: #FFF3D0;  --y-rand: #7E5D1D;
  --r-500: #BE2323;  --r-700: #941617;  --r-50: #FEEBEA;
  --g-d: #54C57A; --g-d-fill: #16321F;
  --y-d: #F7C747; --y-d-fill: #392C0C;
  --r-d: #F56B76; --r-d-fill: #4B1D20;   /* Farbton 18 */

  /* Hoher Kontrast: reines Schwarz/Weiss, Violett nur dunkel genug (>= 7:1) */
  --k-weiss: #FFFFFF; --k-schwarz: #000000; --k-grau-1: #F0F0F0; --k-grau-2: #E0E0E0; --k-grau-3: #1A1A1A; --k-grau-4: #595959;
  --k-grau-5: #A6A6A6; --k-grau-6: #2E2E2E; --k-grau-7: #E6E6E6;
  --k-violett: #2A12A8; --k-violett-dunkel: #1B0B7A; --k-violett-hell: #C9C1FF; --k-orange: #8A2E00; --k-orange-hell: #FFB38A;
}

/* ---------- 3. Rollen HELL ---------- */
/* @hell */
:root {
  color-scheme: light;
  --c-bg: var(--n-150);     /* Grund ist Weiss (Papier), Gliederung ueber Linien, nicht ueber Flaechen */
  --c-surface: var(--n-0);
  --c-surface-2: var(--n-50);    /* Tabellenkopf, Seitenleiste, Zebra */
  --c-surface-3: var(--n-200);   /* gedrueckt/ausgewaehlt neutral */
  --c-text:          var(--n-900);
  --c-text-muted: var(--n-650);
  --c-line: var(--n-250);   /* Haarlinie, rein gliedernd (keine 3:1-Pflicht) */
  --c-line-strong: var(--n-550);   /* Eingabefeld-Rand, Tabellen-Abschluss: >= 3:1 */
  --c-accent:        var(--v-500);   /* Hauptknopf-Flaeche */
  --c-accent-hover:  var(--v-600);
  --c-on-accent:     var(--n-0);
  --c-link:          var(--v-600);
  --c-focus:         var(--v-500);
  --c-focus-gap:     var(--n-0);

  --c-vorschlag-line: var(--o-700);   /* gestrichelt */
  --c-vorschlag-text:  var(--o-700);
  --c-vorschlag-fill:  var(--n-0);     /* Vorschlag bleibt auf Weiss - Orange nur als Linie und Wort */
  --c-entschieden-line: var(--v-500);  /* durchgezogen */
  --c-entschieden-text: var(--v-700);
  --c-entschieden-fill: var(--v-50);

  --c-frist-ok:       var(--g-500);  --c-frist-ok-text:   var(--g-700); --c-frist-ok-fill:   var(--g-50);
  --c-frist-bald:     var(--y-400);  --c-frist-bald-text: var(--y-700); --c-frist-bald-fill: var(--y-50); --c-frist-bald-rand: var(--y-rand);
  --c-frist-ueber:    var(--r-500);  --c-frist-ueber-text: var(--r-700); --c-frist-ueber-fill: var(--r-50);
  --c-fehler:        var(--r-500);  --c-fehler-text:  var(--r-700);  --c-fehler-fill:  var(--r-50);
  --c-warnung:       var(--y-rand); --c-warnung-text: var(--y-700);  --c-warnung-fill: var(--y-50);
  --c-info:          var(--n-500);  --c-info-text:    var(--n-700);  --c-info-fill:    var(--n-50);

  /* Flaechenhierarchie der Website: Hinweiszeile, Kopfband, Blatt (Dokument/Karte), Datenband, Schlussband, Fuss */
  --c-hinweis: var(--d-0);    --c-hinweis-text: var(--d-600);
  --c-band: var(--d-50);     /* Kopfband Website/App */
  --c-band-text: var(--d-900);
  --c-band-line: var(--d-200);
  --c-band-akzent: var(--logo-violett-dunkelgrund);   /* Strich unter dem aktiven Menuepunkt */
  --c-blatt: var(--n-0);     /* Blatt = Dokument, Bildschirm, Karte: liegt auf dem Grund */
  --c-blatt-line: var(--n-250);
  --c-blatt-marke: var(--n-900);   /* Eckmarken (nur Werkbank) */
  --c-tag-fill: var(--n-0);     /* Kennzeichen auf Bildern ("KI-generiert") */
  --c-daten: var(--n-0);    --c-daten-text: var(--n-900); --c-daten-line: var(--n-250); --c-daten-haken: var(--v-700);
  --c-signal-flaeche: var(--n-900);   /* grosse Hervorhebungsflaeche (Website): Claim, Schlussband */
  --c-signal-text: var(--n-0);
  --c-signal-accent: var(--logo-violett-dunkelgrund);   --c-signal-on-accent: var(--d-0);   /* Hauptknopf auf der Signalflaeche */
  --c-fuss: var(--n-200);     --c-fuss-text: var(--n-900); --c-fuss-muted: var(--n-650); --c-fuss-line: var(--n-300); --c-fuss-kante: var(--n-900);
  --c-fuss-accent: var(--v-500);   --c-fuss-on-accent: var(--n-0);
  --logo-hell: none; --logo-dunkel: block;   /* welches Logo auf dem Kopfband liegt */
}
/* @ende */

/* ---------- 4. Rollen DUNKEL ---------- */
/* @dunkel */
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg:            var(--d-0);
  --c-surface:       var(--d-50);
  --c-surface-2:     var(--d-100);
  --c-surface-3:     var(--d-200);
  --c-text:          var(--d-900);
  --c-text-muted:    var(--d-600);
  --c-line:          var(--d-200);
  --c-line-strong:   var(--d-400);
  --c-accent:        var(--logo-violett-dunkelgrund);   /* heller Knopf mit dunkler Schrift */
  --c-accent-hover:  var(--v-200);
  --c-on-accent:     var(--d-0);
  --c-link:          var(--logo-violett-dunkelgrund);
  --c-focus:         var(--logo-violett-dunkelgrund);
  --c-focus-gap:     var(--d-0);
  --c-vorschlag-line: var(--o-d);  --c-vorschlag-text: var(--o-d);  --c-vorschlag-fill: var(--d-50);
  --c-entschieden-line: var(--logo-violett-dunkelgrund); --c-entschieden-text: var(--v-200); --c-entschieden-fill: var(--v-d-fill);
  --c-frist-ok:   var(--g-d); --c-frist-ok-text:   var(--g-d); --c-frist-ok-fill:   var(--g-d-fill);
  --c-frist-bald: var(--y-d); --c-frist-bald-text: var(--y-d); --c-frist-bald-fill: var(--y-d-fill); --c-frist-bald-rand: var(--y-d);
  --c-frist-ueber: var(--r-d); --c-frist-ueber-text: var(--r-d); --c-frist-ueber-fill: var(--r-d-fill);
  --c-fehler:  var(--r-d); --c-fehler-text:  var(--r-d); --c-fehler-fill:  var(--r-d-fill);
  --c-warnung: var(--y-d); --c-warnung-text: var(--y-d); --c-warnung-fill: var(--y-d-fill);
  --c-info:    var(--d-600); --c-info-text:  var(--d-900); --c-info-fill:  var(--d-100);
  --c-hinweis: var(--d-25); --c-hinweis-text: var(--d-600);
  --c-band: var(--d-25); --c-band-text: var(--d-900); --c-band-line: var(--d-200); --c-band-akzent: var(--logo-violett-dunkelgrund);
  --c-blatt: var(--d-50); --c-blatt-line: var(--d-400); --c-blatt-marke: var(--d-900); --c-tag-fill: var(--d-50);
  --c-daten: var(--d-100); --c-daten-text: var(--d-900); --c-daten-line: var(--d-400); --c-daten-haken: var(--v-200);
  --c-signal-flaeche: var(--d-50); --c-signal-text: var(--d-900); --c-signal-accent: var(--logo-violett-dunkelgrund); --c-signal-on-accent: var(--d-0);
  --c-fuss: var(--d-100); --c-fuss-text: var(--d-900); --c-fuss-muted: var(--d-600); --c-fuss-line: var(--d-200); --c-fuss-kante: var(--d-900);
  --c-fuss-accent: var(--logo-violett-dunkelgrund); --c-fuss-on-accent: var(--d-0);
  --logo-hell: none; --logo-dunkel: block;
}
/* @ende */
/* Gleiche Werte fuer "System = dunkel", solange niemand ausdruecklich hell gewaehlt hat */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: var(--d-0); --c-surface: var(--d-50); --c-surface-2: var(--d-100); --c-surface-3: var(--d-200);
    --c-text: var(--d-900); --c-text-muted: var(--d-600); --c-line: var(--d-200); --c-line-strong: var(--d-400);
    --c-accent: var(--logo-violett-dunkelgrund); --c-accent-hover: var(--v-200); --c-on-accent: var(--d-0);
    --c-link: var(--logo-violett-dunkelgrund); --c-focus: var(--logo-violett-dunkelgrund); --c-focus-gap: var(--d-0);
    --c-vorschlag-line: var(--o-d); --c-vorschlag-text: var(--o-d); --c-vorschlag-fill: var(--d-50);
    --c-entschieden-line: var(--logo-violett-dunkelgrund); --c-entschieden-text: var(--v-200); --c-entschieden-fill: var(--v-d-fill);
    --c-frist-ok: var(--g-d); --c-frist-ok-text: var(--g-d); --c-frist-ok-fill: var(--g-d-fill);
    --c-frist-bald: var(--y-d); --c-frist-bald-text: var(--y-d); --c-frist-bald-fill: var(--y-d-fill); --c-frist-bald-rand: var(--y-d);
    --c-frist-ueber: var(--r-d); --c-frist-ueber-text: var(--r-d); --c-frist-ueber-fill: var(--r-d-fill);
    --c-fehler: var(--r-d); --c-fehler-text: var(--r-d); --c-fehler-fill: var(--r-d-fill);
    --c-warnung: var(--y-d); --c-warnung-text: var(--y-d); --c-warnung-fill: var(--y-d-fill);
    --c-info: var(--d-600); --c-info-text: var(--d-900); --c-info-fill: var(--d-100);
    --c-hinweis: var(--d-25); --c-hinweis-text: var(--d-600);
    --c-band: var(--d-25); --c-band-text: var(--d-900); --c-band-line: var(--d-200); --c-band-akzent: var(--logo-violett-dunkelgrund);
    --c-blatt: var(--d-50); --c-blatt-line: var(--d-400); --c-blatt-marke: var(--d-900); --c-tag-fill: var(--d-50);
    --c-daten: var(--d-100); --c-daten-text: var(--d-900); --c-daten-line: var(--d-400); --c-daten-haken: var(--v-200);
    --c-signal-flaeche: var(--d-50); --c-signal-text: var(--d-900); --c-signal-accent: var(--logo-violett-dunkelgrund); --c-signal-on-accent: var(--d-0);
    --c-fuss: var(--d-100); --c-fuss-text: var(--d-900); --c-fuss-muted: var(--d-600); --c-fuss-line: var(--d-200); --c-fuss-kante: var(--d-900);
    --c-fuss-accent: var(--logo-violett-dunkelgrund); --c-fuss-on-accent: var(--d-0);
    --logo-hell: none; --logo-dunkel: block;
  }
}

/* ---------- 5. Masse ---------- */
:root {
  /* Schrift: EINE Familie fuer alles; Zahlen tabellarisch; Mono nur fuer Chargen-/Belegnummern */
  --font-text:  "Fira Sans", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-head:  var(--font-text);
  --font-mono:  "Fira Mono", "Cascadia Mono", "Noto Sans Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  --fw-text: 400; --fw-medium: 500; --fw-strong: 600; --fw-head: 700;

  /* Groessen (Verhaeltnis ca. 1,25). Fliesstext 18 px, kleinste Schrift 15 px (nur Fussnoten/Hinweise) */
  --fs-xs:  0.9375rem;  /* 15 */
  --fs-sm:  1rem;       /* 16 - UI-Beschriftung, Tabellen */
  --fs-md:  1.125rem;   /* 18 - Fliesstext */
  --fs-lg:  1.375rem;   /* 22 - H4 / Kartentitel */
  --fs-xl:  1.75rem;    /* 28 - H3 */
  --fs-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.25rem);  /* 28-36 - H2 */
  --fs-3xl: clamp(2.125rem, 1.3rem + 3.6vw, 3.5rem);  /* 34-56 - H1; Ueberschriften immer mit hyphens:auto + lang="de" (Komposita wie "Rueckverfolgbarkeit" sprengen sonst 390 px) */
  --lh-text: 1.55; --lh-ui: 1.35; --lh-head: 1.12;
  --measure: 66ch;     /* Zeilenlaenge Fliesstext */
  --tracking-head: -0.01em;
  /* Rollen-Masse fuer Seitentitel (Varianten setzen sie um) */
  --fs-hero: clamp(2.5rem, 1.5rem + 4.5vw, 4.25rem); --lh-hero: 1.02; --tracking-hero: -0.025em; --fw-hero: 700;
  --fs-kopf: clamp(2rem, 1.3rem + 2.8vw, 3rem);   /* H1 auf Unterseiten */
  --fs-fuss-spruch: var(--fs-2xl);

  /* Abstaende: 4er-Basis, in der Praxis 8er-Schritte */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --s-abschnitt: var(--s-8);   /* Abstand zwischen Abschnitten (Dichte) */
  --s-blatt: var(--s-5);       /* Innenabstand von Blaettern */
  --band-h: 76px;

  /* Radien: kantig wie Formular/Beleg, nicht "SaaS-rund" */
  --r-1: 4px;  /* Abzeichen, Tabellenzellen */
  --r-2: 6px;  /* Knoepfe, Eingabefelder */
  --r-3: 10px;  /* Dialoge, schwebende Menues */
  --r-rund: 999px;  /* nur Ampel-Punkt und Kuerzel-Stempel */
  --r-blatt: 4px;  /* Dokument/Karte */
  --r-chip: 6px; /* Link-Chips */
  --r-bild: 6px;    /* Fotos, Bildschirmfotos */

  /* Linien */
  --b-haar: 1px; --b-regel: 2px; --b-fokus: 3px;
  --b-vorschlag: 2px dashed var(--c-vorschlag-line);
  --b-entschieden: 2px solid var(--c-entschieden-line);
  --b-blatt: var(--b-haar);       /* Rand eines Blattes */
  --b-blatt-unten: var(--b-haar); /* Abschlusslinie eines Blattes (Schild: dicker) */
  --b-eckmarke: 2px;              /* Eckmarken an Blaettern (Werkbank: 2px) */
  --eckmarke: 14px;
  --band-kante: 0px;              /* farbige Kante oben am Kopfband (Schild) */

  /* Schatten: genau einer fuer Schwebendes (Menue, Dialog); Blatt-Schatten nur in der Variante Tresen (Papier auf dem Tresen) */
  --shadow-float: 0 8px 24px rgb(25 23 46 / 0.16), 0 1px 3px rgb(25 23 46 / 0.12);
  --shadow-blatt: none;

  /* Dichte / Touch */
  --hit: 48px;        /* Standard Tablet/Backstube */
  --hit-min: 44px;    /* Untergrenze (WCAG 2.5.5 AAA), dichte Desktop-Tabellen (ERP) */
  --field-h: 48px;

  /* Bewegung */
  --t-kurz: 120ms; --t-mittel: 200ms; --ease: cubic-bezier(.2, 0, 0, 1);
  --t-druck: 420ms; --t-druck-start: 200ms; --t-druck-schritt: 260ms;   /* der eine Bewegungsmoment: ein Dokument "druckt" seine Zeilen */

  /* Fokus: dicker Ring mit Abstand, auf jedem Grund sichtbar */
  --focus-ring: var(--b-fokus) solid var(--c-focus);
  --focus-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-kurz: 0ms; --t-mittel: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ---------- 6. Varianten ---------- */
/* 6a. "mutig" (alt, nur hell): Tinte sichtbar violett, Kopfband in Tinte, Orange darf grosse Flaechen tragen. Nicht Teil des Handbuchs. */
/* @variante-mutig */
:root[data-variante="mutig"]:not([data-theme="dark"]) {
  --c-text:          var(--v-tinte);
  --c-band:          var(--v-tinte);
  --c-band-text:     var(--n-0);
  --c-band-line:     var(--v-tinte);
  --c-band-akzent:   var(--logo-orange);
  --c-signal-flaeche: var(--logo-orange);
  --c-signal-text:   var(--v-tinte);
  --c-signal-accent: var(--v-tinte); --c-signal-on-accent: var(--n-0);
  --c-surface-2:     var(--v-50);
  --c-line:          var(--v-200);
  --logo-hell: none; --logo-dunkel: block;
}
/* @ende */

/* 6b. "Waermer" (Standard bis 23.10.2026): weisser Grund, Gliederung ueber Linien, weisses Kopfband mit Hell-Logo, Radien 6/10/18.
   Bleibt als waehlbare Alternative (?v=waermer); die Werkbank-Werte sind seit der Entscheidung vom 23.10.2026 die Basis (Abschnitte 3-5). */
/* @variante-waermer */
:root[data-variante="waermer"]:not([data-theme="dark"]) {
  --c-bg: var(--n-0);
  --c-surface: var(--n-0);
  --c-surface-2: var(--n-50);
  --c-surface-3: var(--n-100);
  --c-text-muted: var(--n-600);
  --c-line: var(--n-200);
  --c-line-strong: var(--n-500);
  --c-vorschlag-line: var(--o-600);
  --c-hinweis: var(--n-50);
  --c-hinweis-text: var(--n-600);
  --c-band: var(--n-0);
  --c-band-text: var(--n-900);
  --c-band-line: var(--n-200);
  --c-band-akzent: var(--v-500);
  --c-blatt: var(--n-0);
  --c-blatt-line: var(--n-500);
  --c-blatt-marke: var(--n-900);
  --c-tag-fill: var(--n-0);
  --c-daten: var(--n-50);
  --c-daten-text: var(--n-900);
  --c-daten-line: var(--n-500);
  --c-daten-haken: var(--v-700);
  --c-signal-flaeche: var(--n-50);
  --c-signal-text: var(--n-900);
  --c-signal-accent: var(--v-500);
  --c-signal-on-accent: var(--n-0);
  --c-fuss: var(--n-0);
  --c-fuss-text: var(--n-900);
  --c-fuss-muted: var(--n-600);
  --c-fuss-line: var(--n-200);
  --c-fuss-kante: var(--n-900);
  --c-fuss-accent: var(--v-500);
  --c-fuss-on-accent: var(--n-0);
  --logo-hell: block;
  --logo-dunkel: none;
}
/* @ende */
/* @variante-waermer-dunkel */
:root[data-variante="waermer"][data-theme="dark"] {
  --c-hinweis: var(--d-100);
  --c-hinweis-text: var(--d-600);
  --c-band: var(--d-50);
  --c-band-line: var(--d-200);
  --c-fuss: var(--d-50);
  --c-fuss-kante: var(--d-400);
  --c-signal-flaeche: var(--d-100);
}
/* @ende */
:root[data-variante="waermer"] {
  --fs-hero: var(--fs-3xl);
  --lh-hero: var(--lh-head);
  --tracking-hero: var(--tracking-head);
  --fw-hero: var(--fw-head);
  --fs-kopf: var(--fs-2xl);
  --fs-fuss-spruch: var(--fs-xl);
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 18px;
  --r-blatt: var(--r-1);
  --r-chip: var(--r-rund);
  --r-bild: var(--r-3);
  --b-blatt: var(--b-haar);
  --b-eckmarke: 0px;
  --eckmarke: 12px;
  --s-abschnitt: var(--s-7);
  --s-blatt: var(--s-4);
}

/* 6c. "Schild" - Gross, flach, eindeutig: wie die Beschilderung in Halle und Laden; Farbe als Flaeche, nicht als Deko.
   Wahlspruch: "Auf einen Blick." Grund helles Grau, Kopfband weiss mit violetter Kante, Datenband in Tinte, Schlussband in Violett, Ecken scharf, Schrift sehr gross. */
/* @variante-schild */
:root[data-variante="schild"]:not([data-theme="dark"]) {
  --c-bg:            var(--n-175);
  --c-surface:       var(--n-0);
  --c-surface-2:     var(--n-50);
  --c-surface-3:     var(--n-200);
  --c-text:          var(--v-tinte);
  --c-text-muted:    var(--n-650);
  --c-line:          var(--n-250);
  --c-line-strong:   var(--n-550);
  --c-vorschlag-line: var(--o-700);
  --c-hinweis:       var(--n-0);     --c-hinweis-text: var(--n-600);
  --c-band:          var(--n-0);     --c-band-text: var(--v-tinte); --c-band-line: var(--n-250); --c-band-akzent: var(--v-500);
  --c-blatt:         var(--n-0);     --c-blatt-line: var(--v-tinte); --c-blatt-marke: var(--v-tinte); --c-tag-fill: var(--n-0);
  --c-daten:         var(--n-0);     --c-daten-text: var(--v-tinte); --c-daten-line: var(--n-250); --c-daten-haken: var(--v-700);
  --c-signal-flaeche: var(--v-500);  --c-signal-text: var(--n-0); --c-signal-accent: var(--n-0); --c-signal-on-accent: var(--v-700);
  --c-fuss:          var(--v-tinte); --c-fuss-text: var(--n-0); --c-fuss-muted: var(--d-600); --c-fuss-line: var(--d-400); --c-fuss-kante: var(--v-tinte);
  --c-fuss-accent:   var(--n-0);     --c-fuss-on-accent: var(--v-700);
  --logo-hell: block; --logo-dunkel: none;
}
/* @ende */
/* @variante-schild-dunkel */
:root[data-variante="schild"][data-theme="dark"] {
  --c-hinweis: var(--d-100); --c-hinweis-text: var(--d-600); --c-band: var(--d-50); --c-band-line: var(--d-200); --c-fuss: var(--d-50); --c-fuss-kante: var(--d-400); --c-signal-flaeche: var(--d-100);   /* Basis-Dunkel ohne Werkbank-Abweichungen */
  --c-band-line: var(--d-200);
  --c-daten: var(--d-100);
  --c-signal-flaeche: var(--logo-violett-dunkelgrund); --c-signal-text: var(--d-0); --c-signal-accent: var(--d-0); --c-signal-on-accent: var(--d-900);
  --c-fuss: var(--d-25); --c-fuss-kante: var(--d-25);
}
/* @ende */
:root[data-variante="schild"] {
  --fs-hero: clamp(2.75rem, 1.5rem + 5.6vw, 5rem);     /* 44-80 */
  --lh-hero: 0.98; --tracking-hero: -0.03em; --fw-hero: 700;
  --fs-2xl: clamp(2rem, 1.3rem + 2.8vw, 2.75rem);
  --fs-kopf: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  --fs-fuss-spruch: var(--fs-2xl);
  --r-1: 2px; --r-2: 2px; --r-3: 4px; --r-blatt: 0px; --r-chip: 2px; --r-bild: 2px;
  --b-blatt: 0px; --b-blatt-unten: 3px; --b-eckmarke: 0px;
  --band-kante: 6px;
  --s-abschnitt: var(--s-8); --s-blatt: var(--s-5);
}

/* 6d. "Tresen" - Freundlich wie der Tresen im Laden: warmes Grau, weiche Ecken, weisse Blaetter mit Stempel.
   Wahlspruch: "Schwarz auf weiss." Grund warmes Hellgrau, Blaetter mit leichtem Papierschatten statt Rand, Radien weich, Schrift ruhig (600). */
/* @variante-tresen */
:root[data-variante="tresen"]:not([data-theme="dark"]) {
  --c-bg:            var(--n-75);
  --c-surface:       var(--n-0);
  --c-surface-2:     var(--n-25);
  --c-surface-3:     var(--n-150);
  --c-text:          var(--n-850);
  --c-text-muted:    var(--n-650);
  --c-line:          var(--n-250);
  --c-line-strong:   var(--n-550);
  --c-vorschlag-line: var(--o-700);
  --c-hinweis:       var(--n-150);   --c-hinweis-text: var(--n-650);
  --c-band:          var(--n-0);     --c-band-text: var(--n-850); --c-band-line: var(--n-250); --c-band-akzent: var(--v-500);
  --c-blatt:         var(--n-0);     --c-blatt-line: var(--n-250); --c-blatt-marke: var(--n-850); --c-tag-fill: var(--n-0);
  --c-daten:         var(--n-0);     --c-daten-text: var(--n-850); --c-daten-line: var(--n-250); --c-daten-haken: var(--v-700);
  --c-signal-flaeche: var(--v-100);  --c-signal-text: var(--v-800); --c-signal-accent: var(--v-500); --c-signal-on-accent: var(--n-0);
  --c-fuss:          var(--n-150);   --c-fuss-text: var(--n-850); --c-fuss-muted: var(--n-650); --c-fuss-line: var(--n-300); --c-fuss-kante: var(--n-150);
  --c-fuss-accent:   var(--v-500);   --c-fuss-on-accent: var(--n-0);
  --logo-hell: block; --logo-dunkel: none;
}
/* @ende */
/* @variante-tresen-dunkel */
:root[data-variante="tresen"][data-theme="dark"] {
  --c-hinweis: var(--d-100); --c-hinweis-text: var(--d-600); --c-band: var(--d-50); --c-band-line: var(--d-200); --c-fuss: var(--d-50); --c-fuss-kante: var(--d-400); --c-signal-flaeche: var(--d-100);   /* Basis-Dunkel ohne Werkbank-Abweichungen */
  --c-fuss: var(--d-100); --c-fuss-kante: var(--d-100);
  --c-signal-flaeche: var(--v-d-fill); --c-signal-text: var(--v-200);
}
/* @ende */
:root[data-variante="tresen"] {
  --fs-hero: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);  /* 36-60 */
  --lh-hero: 1.08; --tracking-hero: -0.015em; --fw-hero: 600;
  --fs-kopf: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  --r-1: 8px; --r-2: 12px; --r-3: 20px; --r-blatt: 14px; --r-chip: var(--r-rund); --r-bild: 14px;
  --b-blatt: 0px; --b-eckmarke: 0px;
  --shadow-blatt: 0 1px 2px rgb(42 36 32 / 0.06), 0 10px 30px -18px rgb(42 36 32 / 0.35);
  --s-abschnitt: var(--s-8); --s-blatt: var(--s-5);
}

/* 6e. WOW-Durchgang (DESIGN-WOW.md), alle auf der Werkbank-Basis; Bausteine in static/css/wow.css (nur Staging).
   wow1 "Schichtplan": Farben wie Werkbank, Strecke mit Uhrzeit-Etiketten.  wow2 "Plakat": grosse Schrift, scharfe Ecken, Fotos hart angeschnitten.
   wow3 "Beweis": Farben wie Werkbank, Rechenbeispiel als Herzstueck. */
/* @variante-wow1 */
:root[data-variante="wow1"]:not([data-theme="dark"]) {
  --c-surface-2: var(--n-50);
}
/* @ende */
:root[data-variante="wow1"] { --s-abschnitt: var(--s-8); }
/* @variante-wow2 */
:root[data-variante="wow2"]:not([data-theme="dark"]) {
  --c-surface-2: var(--n-50);
}
/* @ende */
:root[data-variante="wow2"] {
  --fs-hero: clamp(3rem, 1.6rem + 7vw, 6.75rem);      /* 48-108 */
  --lh-hero: 0.92; --tracking-hero: -0.04em; --fw-hero: 700;
  --fs-2xl: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);
  --fs-kopf: clamp(2.5rem, 1.5rem + 4.5vw, 4.5rem);
  --fs-fuss-spruch: var(--fs-3xl);
  --r-1: 0px; --r-2: 2px; --r-3: 4px; --r-blatt: 0px; --r-chip: 0px; --r-bild: 0px;
  --b-eckmarke: 0px; --b-blatt-unten: 3px;
  --s-abschnitt: var(--s-9);
}
/* @variante-wow3 */
:root[data-variante="wow3"]:not([data-theme="dark"]) {
  --c-surface-2: var(--n-50);
}
/* @ende */
:root[data-variante="wow3"] { --s-abschnitt: var(--s-8); }

/* ---------- 7. Hoher Kontrast (data-kontrast="hoch") ---------- */
/* reines Schwarz/Weiss, kraeftige Linien, unterstrichene Links; gilt fuer alle Varianten (gleiche Spezifitaet, spaeter in der Datei) */
/* @kontrast-hell */
:root[data-kontrast="hoch"][data-theme="light"] {
  --c-bg: var(--k-weiss); --c-surface: var(--k-weiss); --c-surface-2: var(--k-grau-1); --c-surface-3: var(--k-grau-2);
  --c-text: var(--k-schwarz); --c-text-muted: var(--k-grau-3); --c-line: var(--k-grau-4); --c-line-strong: var(--k-schwarz);
  --c-link: var(--k-violett); --c-accent: var(--k-violett); --c-accent-hover: var(--k-violett-dunkel); --c-on-accent: var(--k-weiss); --c-focus: var(--k-schwarz);
  --c-vorschlag-line: var(--k-orange); --c-vorschlag-text: var(--k-orange); --c-vorschlag-fill: var(--k-weiss);
  --c-entschieden-line: var(--k-violett); --c-entschieden-text: var(--k-violett); --c-entschieden-fill: var(--k-weiss);
  --c-hinweis: var(--k-grau-1); --c-hinweis-text: var(--k-schwarz);
  --c-band: var(--k-weiss); --c-band-text: var(--k-schwarz); --c-band-line: var(--k-schwarz); --c-band-akzent: var(--k-violett);
  --c-blatt: var(--k-weiss); --c-blatt-line: var(--k-schwarz); --c-blatt-marke: var(--k-schwarz); --c-tag-fill: var(--k-weiss);
  --c-daten: var(--k-grau-1); --c-daten-text: var(--k-schwarz); --c-daten-line: var(--k-schwarz); --c-daten-haken: var(--k-violett);
  --c-signal-flaeche: var(--k-grau-1); --c-signal-text: var(--k-schwarz); --c-signal-accent: var(--k-violett); --c-signal-on-accent: var(--k-weiss);
  --c-fuss: var(--k-weiss); --c-fuss-text: var(--k-schwarz); --c-fuss-muted: var(--k-grau-3); --c-fuss-line: var(--k-schwarz); --c-fuss-kante: var(--k-schwarz);
  --c-fuss-accent: var(--k-violett); --c-fuss-on-accent: var(--k-weiss);
  --logo-hell: block; --logo-dunkel: none;
  --shadow-blatt: none;
}
/* @ende */
/* @kontrast-dunkel */
:root[data-kontrast="hoch"][data-theme="dark"] {
  --c-bg: var(--k-schwarz); --c-surface: var(--k-schwarz); --c-surface-2: var(--k-grau-3); --c-surface-3: var(--k-grau-6);
  --c-text: var(--k-weiss); --c-text-muted: var(--k-grau-7); --c-line: var(--k-grau-5); --c-line-strong: var(--k-weiss);
  --c-link: var(--k-violett-hell); --c-accent: var(--k-violett-hell); --c-accent-hover: var(--k-weiss); --c-on-accent: var(--k-schwarz); --c-focus: var(--k-weiss);
  --c-vorschlag-line: var(--k-orange-hell); --c-vorschlag-text: var(--k-orange-hell); --c-vorschlag-fill: var(--k-schwarz);
  --c-entschieden-line: var(--k-violett-hell); --c-entschieden-text: var(--k-violett-hell); --c-entschieden-fill: var(--k-schwarz);
  --c-hinweis: var(--k-grau-3); --c-hinweis-text: var(--k-weiss);
  --c-band: var(--k-schwarz); --c-band-text: var(--k-weiss); --c-band-line: var(--k-weiss); --c-band-akzent: var(--k-violett-hell);
  --c-blatt: var(--k-schwarz); --c-blatt-line: var(--k-weiss); --c-blatt-marke: var(--k-weiss); --c-tag-fill: var(--k-schwarz);
  --c-daten: var(--k-grau-3); --c-daten-text: var(--k-weiss); --c-daten-line: var(--k-weiss); --c-daten-haken: var(--k-violett-hell);
  --c-signal-flaeche: var(--k-grau-3); --c-signal-text: var(--k-weiss); --c-signal-accent: var(--k-violett-hell); --c-signal-on-accent: var(--k-schwarz);
  --c-fuss: var(--k-schwarz); --c-fuss-text: var(--k-weiss); --c-fuss-muted: var(--k-grau-7); --c-fuss-line: var(--k-weiss); --c-fuss-kante: var(--k-weiss);
  --c-fuss-accent: var(--k-violett-hell); --c-fuss-on-accent: var(--k-schwarz);
  --logo-hell: none; --logo-dunkel: block;
  --shadow-blatt: none;
}
/* @ende */

/* ---------- 8. Datenvisualisierung (seit 23.10.2026, Live-Demo) ---------- */
/* Eigener, abgegrenzter Abschnitt: Rollen fuer Diagramme und Karte. Bestehende Rollen (Abschnitte 3-7) bleiben unveraendert.
 * Regeln (dataviz-Methode): Farbe tut genau eine Arbeit -
 *   Reihe 1 = Violett (Ist, gemessen, "so war es" - passt zum Abgezeichnet-System: entschieden = violett durchgezogen),
 *   Prognose = bestehendes Vorschlag-Orange gestrichelt + Wort (keine eigene Rolle),
 *   Reihe 2/3 = Petrol-Blau / Ocker nur fuer weitere Datenreihen (nie fuer UI-Info; "Blau gibt es nicht" gilt fuer die Oberflaeche),
 *   Status bleibt bei Frist-/Warn-/Fehlerfarben mit Form + Wort. Magnituden (Heatmap) = eine Farbe (Reihe 1) hell->dunkel.
 * Geprueft (Validator des dataviz-Skills, alle Paare, Machado 2009): hell auf #FFFFFF/#EAE5DE und dunkel auf #1B1B21 bestehen
 *   Helligkeitsband, Buntheit, Farbfehlsichtigkeit (dE >= 12) und Kontrast >= 3:1; Hoher Kontrast: dE >= 9.9, Kontrast >= 4.5:1.
 * Text traegt nie die Reihenfarbe (Beschriftungen in Textfarben, Marke daneben). */
:root {
  --dv-petrol: #0E7FA6;  --dv-petrol-d: #1FA3B5;  --dv-petrol-k: #005A75;  --dv-petrol-kd: #19B0D0;
  --dv-ocker:  #9A6B00;  --dv-ocker-d:  #B5822A;  --dv-ocker-k:  #5C3D00;  --dv-ocker-kd:  #F5B921;
  --dv-wasser: #4F8FBF;  --dv-wasser-d: #5B98C2;  --dv-wasser-k: #0050A0;  --dv-wasser-kd: #8AC4FF;
}
/* @daten-hell */
:root {
  --c-daten-1: var(--v-500);         /* Hauptreihe (Ist, Umsatz, Absatz): Linie, Flaeche (12 %), Marker, Balken; 6.6:1 auf Blatt */
  --c-daten-2: var(--dv-petrol);     /* zweite Reihe: 4.6:1 */
  --c-daten-3: var(--dv-ocker);      /* dritte Reihe: 4.7:1 */
  --c-daten-marker-ring: var(--n-0); /* Ring um Marker in Blattfarbe */
  --c-gitter: var(--n-200);          /* Gitterlinie, Haarlinie, rein gliedernd */
  --c-achse: var(--n-400);           /* Grundlinie/Achse: 3.1:1 */
  --c-achse-text: var(--n-650);      /* Achsenbeschriftung >= 4.5:1 */
  --c-heute: var(--n-900);           /* Trennlinie Ist/Prognose ("Heute") */
  --c-karte-land: var(--n-50);       /* Landflaeche auf dem Blatt */
  --c-karte-grenze: var(--n-300);    /* Kreisgrenzen */
  --c-karte-wasser: var(--dv-wasser);/* Rhein, Erft, Niers: 3.2:1 auf Land */
  --c-karte-strasse: var(--n-500);   /* Autobahnen: 4.3:1 auf Land */
  --c-karte-ort: var(--n-650);       /* Ortsnamen */
}
/* @ende */
/* @daten-dunkel */
:root[data-theme="dark"] {
  --c-daten-1: var(--logo-violett-dunkelgrund); --c-daten-2: var(--dv-petrol-d); --c-daten-3: var(--dv-ocker-d);
  --c-daten-marker-ring: var(--d-50);
  --c-gitter: var(--d-200); --c-achse: var(--d-400); --c-achse-text: var(--d-600); --c-heute: var(--d-900);
  --c-karte-land: var(--d-100); --c-karte-grenze: var(--d-400); --c-karte-wasser: var(--dv-wasser-d); --c-karte-strasse: var(--d-600); --c-karte-ort: var(--d-600);
}
/* @ende */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-daten-1: var(--logo-violett-dunkelgrund); --c-daten-2: var(--dv-petrol-d); --c-daten-3: var(--dv-ocker-d);
    --c-daten-marker-ring: var(--d-50);
    --c-gitter: var(--d-200); --c-achse: var(--d-400); --c-achse-text: var(--d-600); --c-heute: var(--d-900);
    --c-karte-land: var(--d-100); --c-karte-grenze: var(--d-400); --c-karte-wasser: var(--dv-wasser-d); --c-karte-strasse: var(--d-600); --c-karte-ort: var(--d-600);
  }
}
/* @daten-kontrast-hell */
:root[data-kontrast="hoch"][data-theme="light"] {
  --c-daten-1: var(--k-violett); --c-daten-2: var(--dv-petrol-k); --c-daten-3: var(--dv-ocker-k);
  --c-daten-marker-ring: var(--k-weiss);
  --c-gitter: var(--k-grau-5); --c-achse: var(--k-schwarz); --c-achse-text: var(--k-schwarz); --c-heute: var(--k-schwarz);
  --c-karte-land: var(--k-weiss); --c-karte-grenze: var(--k-grau-4); --c-karte-wasser: var(--dv-wasser-k); --c-karte-strasse: var(--k-schwarz); --c-karte-ort: var(--k-schwarz);
}
/* @ende */
/* @daten-kontrast-dunkel */
:root[data-kontrast="hoch"][data-theme="dark"] {
  --c-daten-1: var(--k-violett-hell); --c-daten-2: var(--dv-petrol-kd); --c-daten-3: var(--dv-ocker-kd);
  --c-daten-marker-ring: var(--k-schwarz);
  --c-gitter: var(--k-grau-4); --c-achse: var(--k-weiss); --c-achse-text: var(--k-weiss); --c-heute: var(--k-weiss);
  --c-karte-land: var(--k-schwarz); --c-karte-grenze: var(--k-grau-5); --c-karte-wasser: var(--dv-wasser-kd); --c-karte-strasse: var(--k-weiss); --c-karte-ort: var(--k-weiss);
}
/* @ende */