/* ═══════════════════════════════════════════════════════════════════════════
   kern.css – die EINE Quelle für Farben, Schriften, Grundrundungen und Tempo
   von brandmediale one. Gilt für die Agentur-Website (portal-app) und das
   Cockpit (web-app) sowie das Kundenportal (portal-app, Scope .bm-portal).
   Angelegt in Welle C1, Website und Kundenportal angeschlossen in Welle Z0-B
   (beide 27.09.2026). Die App-Schichten übersetzen nur noch:
     Cockpit:  web-app/src/index.css   (--c-*, --cg-*, --viz-* → --kern-*)
     Website:  website/src/site/design/tokens.css (--bm-* → --kern-*)
     Kundenportal: portal-app/src/portal-design/tokens.css
               (Kopie seit Welle B0; Portal-Brücke portal.css → --bm-*)

   UMSTELLEN: nur die mit »QUELLE« markierten Zeilen ändern – alles andere
   (Abstufungen, Kanalformen, Glow) rechnet sich daraus ab. Anleitung: README.md.

   Kanalformen (--kern-…-rgb) für die Tailwind-Anbindungen `rgb(var(--x) / a)`:
   per relativer Farbsyntax aus der Hex-Angabe abgeleitet, KEINE Zahlen pflegen.
   Nur so verwenden: rgb(var(--kern-…-rgb)) oder rgb(var(--kern-…-rgb) / 0.5).
   Browser: Chrome/Edge ≥ 119, Safari ≥ 18, Firefox ≥ 128 (wie die Website).
   ═══════════════════════════════════════════════════════════════════════════ */
@import './schriften.css';

/* @kern-tokens:anfang – ERZEUGT aus design/tokens/tokens.json durch design/tokens/bauen.mjs.
   Nicht hier ändern: Wert in tokens.json ändern, dann `node design/tokens/bauen.mjs`.
   »QUELLE« markiert die Grundwerte, alles andere rechnet sich daraus ab. */
:root {
  /* ── Signal ─────────────────────────────────────────────────────────────── */
  --kern-signal: #fe575a; /* QUELLE Signalfarbe Koralle (Vorgabe Alexander 27.09.2026) – HELLE Signalfarbe: Schrift darauf dunkel (--kern-zweit, 6,21:1; Weiß hätte nur 3,12:1). Als Fläche/Form auf Hell: 3,12:1 Weiß, 2,84 Grund, 3,05 Sand, 2,83 Rosé, 2,53 Kachel-Sand → Bedeutungstragendes auf Hell über -kontur */
  --kern-signal-pol: #ff7d6b; /* QUELLE zweiter Pol des Signalverlaufs: helleres Koralle (dunkle Schrift darauf 7,76:1) */
  --kern-zweit: #070b24; /* QUELLE Zweitfarbe, sehr dunkles Mitternachtsblau (Anmerkung 208f71d6: „den dunkellila Ton in einen Midnightblue-Ton drehen, fast schwarz"; davor Pflaume #250719): Sekundärknöpfe, Schrift auf Signal */
  --kern-nacht: #02030d; /* QUELLE Mitternachtsblau: Gegenpol zur Koralle, Grund der dunklen Flächen */
  --kern-signal-verlauf: linear-gradient(100deg, var(--kern-signal), var(--kern-signal-pol)); /* Verlauf Koralle → helles Koralle für Primärknöpfe, Leisten, große Flächen; Text darauf --kern-signal-text (6,21 bis 7,76:1) */
  --kern-signal-hell: color-mix(in srgb, var(--kern-signal) 84%, white); /* ≈ #fe7274 · Hover auf Signal: helle Signalfarbe, deshalb aufhellen (Schrift darauf 7,28:1) */
  --kern-signal-licht: color-mix(in srgb, var(--kern-signal) 78%, white); /* ≈ #fe7c7e · Akzenttext/Icons/Linien AUF DUNKEL (8,23:1 Nacht, 7,82 Karte dunkel, 7,77 Zweitfarbe); auf Hell nur 2,27:1 → dort nie als Text oder Bedeutungsträger */
  --kern-signal-zart: #fcf1f2; /* QUELLE ruhige Signalfläche auf Hell mit dunkler Schrift (Vorgabe Alexander 27.09.2026) */
  --kern-signal-dunkel: color-mix(in srgb, var(--kern-signal) 50%, black); /* ≈ #7f2c2d · Schrift/Icons auf Hell: 9,16:1 Weiß, 8,32 Grund, 8,94 Sand, 8,29 Rosé, 7,43 Kachel-Sand */
  --kern-signal-tief: color-mix(in srgb, var(--kern-signal) 58%, black); /* ≈ #933234 · Akzenttext/Icons auf Hell: 7,61:1 Weiß, 6,91 Grund, 7,42 Sand, 6,88 Rosé, 6,17 Kachel-Sand */
  --kern-signal-glow: color-mix(in srgb, var(--kern-signal) 40%, transparent); /* Schein unter dem Primärknopf im Hover (dekorativ) */
  --kern-signal-schleier: color-mix(in srgb, var(--kern-text-invers) 26%, transparent); /* SCHALTER Hover-Schleier ÜBER Signal/Verlauf (Pseudo-Element, Deckkraft animieren): helle Signalfarbe → aufhellen mit --kern-text-invers (Schrift auf dem aufgehellten Signal 8,12:1, auf dem aufgehellten Pol 9,80:1); satte/dunkle Signalfarbe → var(--kern-dunkel) eintragen. P1-I: vorher Gegenfarbe der Schrift, die die Koralle vergraute */
  --kern-signal-verlauf-hover: linear-gradient(var(--kern-signal-schleier), var(--kern-signal-schleier)), var(--kern-signal-verlauf); /* statischer Hover-Verlauf (zwei Ebenen) für Stellen ohne Pseudo-Element */
  --kern-signal-kontur: color-mix(in srgb, var(--kern-signal) 70%, black); /* ≈ #b23d3f · SCHALTER Signal, das auf Hell ≥ 3:1 erreicht: 5,79:1 Weiß, 5,26 Grund, 5,65 Sand, 5,24 Rosé, 4,70 Kachel-Sand. Kontur der Signal-Knöpfe, bedeutungstragende Markierungslinien auf Hell, auch als Akzenttext zulässig */
  --kern-signal-kreis: var(--kern-signal); /* SCHALTER ruhender Kreis der Kreis-Punkt-Pille auf Hell (Tinte liegt darüber): helle Signalfarbe → var(--kern-signal) (Tinte darauf 6,10:1; Kreis zum Grund 2,84:1, Schmuck – den Knopf trägt die Schrift); mittlere/dunkle → var(--kern-signal-licht) */
  --kern-signal-text: var(--kern-zweit); /* Text auf Signal und auf dem Verlauf: dunkel (Zweitfarbe, 6,21:1), weil die Signalfarbe hell ist */

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --kern-text: #0f1011; /* QUELLE Tinte: Überschriften, Primärtext */
  --kern-text-leise: #6b737b; /* QUELLE Fließtext grau, kühl (Cockpit): 4,81:1 Weiß, 4,37 Grund, 4,70 Sand, 4,36 Rosé, 3,91 Kachel-Sand → Website nimmt --kern-text-warm-leise */
  --kern-text-faint: #6e767e; /* QUELLE leiser Text der alten Schicht, kühl: 4,61:1 Weiß, 4,19 Grund, 4,50 Sand, 4,17 Rosé, 3,74 Kachel-Sand → Website nimmt --kern-text-warm-leise */
  --kern-text-zart: #99a1ab; /* QUELLE nur dekorativ, kühl: 2,61:1 Weiß, 2,37 Grund, 2,55 Sand, 2,36 Rosé, 2,12 Kachel-Sand → Website nimmt --kern-text-warm-zart */
  --kern-text-tag: #585e65; /* QUELLE Chip-Text auf Kachel (Cockpit), Sekundärtext: 6,55:1 Weiß, 5,95 Grund, 6,40 Sand, 5,93 Rosé, 5,32 Kachel-Sand → Website nimmt --kern-text-warm-tag */
  --kern-text-invers: #ffffff; /* QUELLE Text auf Dunkel */
  --kern-text-invers-leise: color-mix(in srgb, var(--kern-text-invers) 64%, transparent); /* 8,29:1 Nacht, 8,16 Karte dunkel, 8,11 Zweitfarbe */
  --kern-text-invers-ruhig: #d4dde7; /* QUELLE Fließtext auf Dunkel, kühl (Cockpit): 14,98:1 Nacht, 14,23 Karte dunkel, 14,13 Zweitfarbe – Website nimmt --kern-text-invers-warm */

  /* ── Warme Töne der Website (P1-I, 27.09.2026) – alle ABGELEITET aus Tinte
        und Sand; das Cockpit liest sie im hellen Modus seit ADM-D (30.09.2026) ebenso.
        Kontraste gemessen (scripts/.p1i-kontrast.mjs, Tabelle docs/qa/p1-i.md). */
  --kern-text-warm-tag: color-mix(in srgb, var(--kern-text) 64%, var(--kern-linie-sand)); /* ≈ #59544d · Chip-/Sekundärtext: 7,49:1 Weiß, 6,80 Grund, 7,31 Sand, 6,78 Rosé, 6,08 Kachel-Sand */
  --kern-text-warm-leise: color-mix(in srgb, var(--kern-text) 56%, var(--kern-linie-sand)); /* ≈ #6a635a · Fließtext: 5,92:1 Weiß, 5,37 Grund, 5,78 Sand, 5,36 Rosé, 4,80 Kachel-Sand */
  --kern-text-warm-zart: color-mix(in srgb, var(--kern-text) 40%, var(--kern-linie-sand)); /* ≈ #8b8175 · nur dekorativ, große Schrift (≥ 24 px) und Grafik, kein Lesetext: 3,81:1 Weiß, 3,46 Grund, 3,72 Sand, 3,45 Rosé, 3,09 Kachel-Sand */
  --kern-text-invers-warm: var(--kern-bg-warm); /* #faf3ea · Fließtext auf Dunkel: 18,67:1 Nacht, 17,74 Karte dunkel, 17,62 Zweitfarbe */
  --kern-text-invers-warm-leise: color-mix(in srgb, var(--kern-bg-warm) 68%, transparent); /* leiser Text auf Dunkel: 8,54:1 Nacht, 8,36 Karte dunkel, 8,32 Zweitfarbe */
  --kern-linie-feld: var(--kern-text-warm-zart); /* Feldrand, Grenze von Bedienelementen auf Hell: 3,81:1 Weiß, 3,46 Grund, 3,72 Sand, 3,45 Rosé, 3,09 Kachel-Sand */
  --kern-linie-invers-warm: color-mix(in srgb, var(--kern-bg-warm) 18%, transparent); /* Trennlinie auf Dunkel, dekorativ: 1,53:1 Nacht, 1,60 Karte dunkel, 1,60 Zweitfarbe */
  --kern-linie-invers-stark: color-mix(in srgb, var(--kern-bg-warm) 40%, transparent); /* Grenze von Bedienelementen auf Dunkel: 3,46:1 Nacht, 3,53 Karte dunkel, 3,52 Zweitfarbe */
  /* Fokusrahmen (P3-I, 27.09.2026) – ABGELEITET, keine QUELLE. Je Fläche ein
     Wert, mindestens 3:1 zur angrenzenden Fläche (WCAG 1.4.11, 2.4.7). */
  --kern-fokus: var(--kern-text); /* Fokusrahmen auf Hell: 19,05:1 Weiß, 17,30 Grund, 18,59 Sand, 17,24 Rosé, 15,46 Kachel-Sand */
  --kern-fokus-invers: var(--kern-text-invers); /* Fokusrahmen auf Dunkel: 20,56:1 Nacht, 20,17 Dunkel, 19,54 Karte dunkel, 19,40 Zweitfarbe (Tinte hätte dort 1,02 bis 1,08:1) */
  --kern-fokus-signal: var(--kern-signal-text); /* Fokusrahmen auf Signal und Verlauf: dunkel, 6,21:1 Signal, 7,76 Pol, 7,27 Hover-Ton (Weiß hätte 2,50 bis 3,12:1) */
  --kern-schatten-tief: color-mix(in srgb, var(--kern-zweit) 60%, var(--kern-text)); /* ≈ #0a0d1c · Schattenton der Website aus Zweitfarbe und Tinte (statt des helleren Blaugrau --kern-schatten-farbe) */

  /* ── Verlauf »Farbspiel« (P2-I, 27.09.2026) – VORSCHLAG nach
        docs/plan-corporate-design.md 4.1 und 6a. Nichts davon ist eine QUELLE
        von Alexander; Pfirsich und die Stopps werden an den Bildproben
        nachgestellt. Die Tiefe ist Mitternachtsblau (--kern-zweit), NICHT
        Pflaume (Anmerkung 208f71d6). Kontraste gerechnet entlang des Verlaufs
        (201 Punkte, Mischung in sRGB wie der Browser). Die Prozentangaben
        meinen die Lage auf der Verlaufslinie. ── */
  --kern-pfirsich: #ffb27a; /* VORSCHLAG Pfirsich, heller Pol der warmen Reihe. Schrift darauf dunkel: Zweitfarbe 11,00:1, Tinte 10,79; Weiß nur 1,76 → nie helle Schrift. Als Fläche zum Grund 1,60:1, zu Rosé 1,60, zur Koralle 1,77 (Schmuck); auf Nacht 11,65:1, auf Zweitfarbe 11,00 */
  --kern-verlauf-morgen: linear-gradient(100deg, var(--kern-bg-rose) 0%, var(--kern-pfirsich) 55%, var(--kern-signal) 100%); /* VORSCHLAG hell: Rosé → Pfirsich → Koralle. Schrift DUNKEL über die ganze Länge: Zweitfarbe 17,56:1 (0 %) · 11,00 (55 %) · 6,21 (100 %, kleinster Wert); Tinte 17,24 · 10,79 · 6,10. Weiß höchstens 3,12:1 → nicht zulässig. Knöpfe darauf: nur »Dunkel« und »Weiß« (wie auf Signalflächen) */
  --kern-verlauf-morgen-text: var(--kern-zweit); /* Schrift auf dem Morgen-Verlauf: mindestens 6,21:1 */
  --kern-verlauf-abend: linear-gradient(160deg, var(--kern-pfirsich) 0%, var(--kern-signal) 38%, var(--kern-zweit) 100%); /* VORSCHLAG Pfirsich → Koralle → Mitternachtsblau als Tiefe. KEINE Schriftfarbe trägt über die ganze Länge: helle Schrift (Weiß) ≥ 4,5:1 erst ab 50,5 % (große Schrift ≥ 3:1 ab 35 %), am Ende 19,40:1; dunkle Schrift (Zweitfarbe) ≥ 4,5:1 nur bis 48,5 % (11,00 bei 0 %, 6,21 bei 38 %). Zwischen 48,5 und 50,5 % steht kein Text. Regel: Text in die Tiefe (unteres bzw. hinteres Drittel) und hell, oder in den warmen Anfang und dunkel */
  --kern-verlauf-abend-text: var(--kern-text-invers); /* Schrift in der Tiefe des Abend-Verlaufs (ab 50,5 %): 4,5 bis 19,40:1; warmes Hell (--kern-text-invers-warm) erst ab 53,5 % */
  --kern-verlauf-abend-text-warm: var(--kern-zweit); /* Schrift im warmen Anfang des Abend-Verlaufs (bis 48,5 %): 11,00 bis 4,5:1 */
  --kern-schleier-bild: linear-gradient(to top, color-mix(in srgb, var(--kern-nacht) 86%, transparent) 0%, color-mix(in srgb, var(--kern-nacht) 82%, transparent) 40%, transparent 100%); /* VORSCHLAG Schleier für HELLE Schrift über Bildern, Text in den unteren 40 %. Schlechtester Fall (weißes Bild darunter): bei 82 % Deckung Weiß 13,04:1, warmes Hell 11,84, Signal-licht 5,22; bei 86 % 14,98 · 13,61 · 6,00. Unter 78 % Deckung fällt Signal-licht unter 4,5:1 */
  --kern-schleier-bild-hell: linear-gradient(to top, color-mix(in srgb, var(--kern-bg-warm) 90%, transparent) 0%, color-mix(in srgb, var(--kern-bg-warm) 86%, transparent) 40%, transparent 100%); /* VORSCHLAG Schleier für DUNKLE Schrift über Bildern, Text in den unteren 40 %. Schlechtester Fall (schwarzes Bild darunter): bei 86 % Deckung Zweitfarbe 12,80:1, Tinte 12,57; bei 90 % 14,08 · 13,82 */

  /* ── Flächen ────────────────────────────────────────────────────────────── */
  --kern-bg: #ffffff; /* QUELLE Grund, Karten */
  --kern-bg-warm: #faf3ea; /* QUELLE Grund der hellen Seiten der Website (Anmerkung ac238f4b; davor #f5e6d6, #fcfaf6); zu Weiß 1,10:1 */
  --kern-bg-alt: #f3f7fe; /* QUELLE ruhige Fläche (Karten der Website, Cockpit-Grund) */
  --kern-bg-kuehl: #f6fafd; /* QUELLE Wechselsektionen, Formularfelder (Cockpit) */
  --kern-bg-rose: var(--kern-signal-zart); /* Wechselsektionen, Feldgrund der Website: #fcf1f2; zum Grund 1,00:1 */
  --kern-bg-sand: #fefcf8; /* Karten der Website: eine Stufe heller als der Grund (1,07:1) – an den Grund #faf3ea angepasst (P1-I) */
  --kern-kachel-sand: #f1e6d7; /* Kacheln, Chips der Website: eine Stufe dunkler als der Grund (1,12:1; zur Karte 1,20:1) – angepasst (P1-I) */
  --kern-linie-sand: #ddcdb8; /* starke Linie der Website, Schmuck: 1,56:1 Weiß, 1,41 Grund, 1,52 Sand, 1,41 Rosé, 1,26 Kachel-Sand – angepasst (P1-I) */
  --kern-linie-sand-zart: #e9dccb; /* Standardlinie der Website, Schmuck: 1,35:1 Weiß, 1,23 Grund, 1,32 Sand, 1,22 Rosé, 1,09 Kachel-Sand – angepasst (P1-I) */
  --kern-kachel: #e7ecf3; /* QUELLE Kacheln, Chips, zarte Linie */

  /* ── Dunkeltöne ─────────────────────────────────────────────────────────── */
  --kern-dunkel: #040614; /* QUELLE Grundton Dunkel (Mitternachtsblau, eine Stufe heller): Footer, Cockpit-Leiste; zu Nacht 1,02:1 */
  --kern-flaeche-dunkel: var(--kern-nacht); /* dunkle Sektionen/Hero, Cockpit-Grund dunkel: Mitternachtsblau */
  --kern-karte-dunkel: #080b1c; /* QUELLE Karte auf Dunkel (Website); zu Nacht 1,05:1 – Abgrenzung über Linie */
  --kern-dunkel-erhaben: color-mix(in srgb, var(--kern-dunkel) 92%, white); /* ≈ #181a27 (8 % Weiß, P1-L; nachgemessen P2-I): Hover/Rechtsleiste auf Dunkel; zu Nacht 1,19:1, zu Dunkel 1,17:1, Weiß darauf 17,28:1 */
  --kern-dunkel-karte: color-mix(in srgb, var(--kern-dunkel) 87%, white); /* ≈ #252633 (13 % Weiß, P1-L; nachgemessen P2-I): Cockpit-Karte im Dunkelmodus; zu Nacht 1,38:1, zu Dunkel 1,35:1, zu -erhaben 1,16:1, Weiß darauf 14,93:1. Darauf: Signal 4,78, Signal-licht 5,98, Fehler-hell 6,43, Erfolg-hell 8,63, Warnung-hell 8,13, Info-hell 7,17 */
  --kern-schatten-farbe: #2f2f39; /* QUELLE Schattenton, kühl (Cockpit) – Website nimmt --kern-schatten-tief */

  /* ── Linien ─────────────────────────────────────────────────────────────── */
  --kern-linie: #d4dde7; /* QUELLE starke Linie (Felder, Akkordeon) */
  --kern-linie-zart: #e7ecf3; /* QUELLE Standardlinie */
  --kern-linie-invers: color-mix(in srgb, var(--kern-text-invers) 16%, transparent); /* dekorativ: 1,47:1 Nacht, 1,54 Karte dunkel, 1,54 Zweitfarbe – Website nimmt --kern-linie-invers-warm */

  /* ── Zustände (Text ≥ 4,5:1 auf Weiß; »-tief« für Grund, Sand, Rosé,
        Kachel-Sand und #f3f7fe; »-hell« für Dunkel). Fehlerrot liegt im Ton
        neben der Koralle (Fehler zu Signal 1,48:1, Fehler-hell zu Signal-licht
        1,08:1): ein Fehler wird NIE nur über die Farbe gezeigt – immer Text
        und Zeichen dazu. ── */
  --kern-fehler: #d53a50; /* QUELLE Fehler: 4,62:1 Weiß, 4,19 Grund, 4,50 Sand, 4,18 Rosé, 3,74 Kachel-Sand → außer auf Weiß -tief bzw. -klar */
  --kern-fehler-tief: color-mix(in srgb, var(--kern-fehler) 88%, black); /* ≈ #bb3346 · Fehlertext klein, auf Grauflächen, Weiß darauf (Cockpit): 5,69:1 Weiß, 5,17 Grund, 5,56 Sand, 5,15 Rosé, 4,62 Kachel-Sand */
  --kern-fehler-klar: color-mix(in srgb, var(--kern-fehler) 75%, black); /* ≈ #a02c3c · Fehler der Website (P1-I), deutlich dunkler als die Koralle (zu Signal 2,31:1): 7,22:1 Weiß, 6,56 Grund, 7,05 Sand, 6,54 Rosé, 5,86 Kachel-Sand */
  --kern-fehler-hell: #ff8595; /* QUELLE Fehler auf Dunkel: 8,85:1 Nacht, 8,41 Karte dunkel, 8,35 Zweitfarbe, 6,43 Cockpit-Karte dunkel; vom Akzent --kern-signal-licht farblich nicht zu unterscheiden (1,08:1, ΔE00 5,3) → nur mit Zeichen und Text */
  --kern-fehler-hell-klar: color-mix(in srgb, var(--kern-fehler-hell) 50%, white); /* ≈ #ffc2ca · VORSCHLAG (P2-I, abgeleitet, keine QUELLE; Entscheidung Alexander steht aus): Fehler auf Dunkel, der sich von der Koralle abhebt – zu Signal-licht 1,64:1 (ΔE00 17,4), zu Signal 2,06:1 (ΔE00 24,6); 13,53:1 Nacht, 12,86 Karte dunkel, 12,77 Zweitfarbe, 9,83 Cockpit-Karte dunkel. Bisher liest ihn nur das Anmerkungstool; Zeichen und Text bleiben Pflicht */
  --kern-erfolg: #23794a; /* QUELLE 5,38:1 Weiß, 4,88 Grund, 5,25 Sand, 4,87 Rosé, 4,36 Kachel-Sand → auf Kachel-Sand -tief */
  --kern-erfolg-tief: color-mix(in srgb, var(--kern-erfolg) 90%, black); /* ≈ #206d43 · 6,32:1 Weiß, 5,74 Grund, 6,17 Sand, 5,72 Rosé, 5,13 Kachel-Sand (P1-I) */
  --kern-erfolg-hell: #74d99a; /* QUELLE 11,88:1 Nacht, 11,29 Karte dunkel, 11,21 Zweitfarbe */
  --kern-warnung: #9a5b00; /* QUELLE 5,43:1 Weiß, 4,93 Grund, 5,29 Sand, 4,91 Rosé, 4,40 Kachel-Sand → auf Kachel-Sand -tief */
  --kern-warnung-tief: color-mix(in srgb, var(--kern-warnung) 90%, black); /* ≈ #8b5200 · 6,37:1 Weiß, 5,79 Grund, 6,22 Sand, 5,77 Rosé, 5,17 Kachel-Sand (P1-I) */
  --kern-warnung-hell: #f5b34a; /* QUELLE 11,19:1 Nacht, 10,63 Karte dunkel, 10,56 Zweitfarbe */
  --kern-info: #2c63c9; /* QUELLE 5,62:1 Weiß, 5,11 Grund, 5,49 Sand, 5,09 Rosé, 4,56 Kachel-Sand */
  --kern-info-tief: color-mix(in srgb, var(--kern-info) 90%, black); /* ≈ #2859b5 · 6,59:1 Weiß, 5,98 Grund, 6,43 Sand, 5,96 Rosé, 5,35 Kachel-Sand (P1-I) */
  --kern-info-hell: #8cb4ff; /* QUELLE 9,88:1 Nacht, 9,38 Karte dunkel, 9,32 Zweitfarbe */
  --kern-fehler-zart: color-mix(in srgb, var(--kern-fehler) 10%, var(--kern-bg)); /* Zarte Zustandsfläche auf Hell (Status-Chip, Hinweisband; Kundenportal P0, 02.10.2026). Text darauf --kern-fehler-klar (6,27:1); Fläche ist Schmuck, Bedeutung trägt Text und Zeichen */
  --kern-erfolg-zart: color-mix(in srgb, var(--kern-erfolg) 10%, var(--kern-bg)); /* Zarte Zustandsfläche auf Hell (Status-Chip, Hinweisband; Kundenportal P0, 02.10.2026). Text darauf --kern-erfolg-tief (5,52:1); Fläche ist Schmuck, Bedeutung trägt Text und Zeichen */
  --kern-warnung-zart: color-mix(in srgb, var(--kern-warnung) 10%, var(--kern-bg)); /* Zarte Zustandsfläche auf Hell (Status-Chip, Hinweisband; Kundenportal P0, 02.10.2026). Text darauf --kern-warnung-tief (5,56:1); Fläche ist Schmuck, Bedeutung trägt Text und Zeichen */
  --kern-info-zart: color-mix(in srgb, var(--kern-info) 10%, var(--kern-bg)); /* Zarte Zustandsfläche auf Hell (Status-Chip, Hinweisband; Kundenportal P0, 02.10.2026). Text darauf --kern-info-tief (5,73:1); Fläche ist Schmuck, Bedeutung trägt Text und Zeichen */

  /* ── Diagramme (kategorial, feste Reihenfolge; zuletzt mit dem
        dataviz-Validator geprüft vor der Farbwelt Koralle: hell gegen #fff,
        dunkel gegen die damalige Karte. Cockpit-Dunkelkarte heute ≈ #252633
        (--kern-dunkel-karte); die sechs »-dunkel«-Töne haben darauf 4,87 ·
        4,38 · 3,99 · 4,24 · 4,20 · 4,21:1 (gerechnet P2-I, Soll 3:1). Der
        Validator-Lauf gegen die neue Karte steht aus. ── */
  --kern-diagramm-1: #4e661c; /* Oliv (Stand vor dem Farbwechsel) */
  --kern-diagramm-1-dunkel: #78a01a;
  --kern-diagramm-2: #2c63c9; /* Blau */
  --kern-diagramm-2-dunkel: #5b8ae0;
  --kern-diagramm-3: #c26a00; /* Bernstein */
  --kern-diagramm-3-dunkel: #bb740e;
  --kern-diagramm-4: #8a4fbf; /* Violett */
  --kern-diagramm-4-dunkel: #9d74dc;
  --kern-diagramm-5: #0f8fa3; /* Petrol */
  --kern-diagramm-5-dunkel: #0a95ab;
  --kern-diagramm-6: #c4467a; /* Beere */
  --kern-diagramm-6-dunkel: #db5c8b;

  /* ── Kanalformen (abgeleitet, nicht pflegen) ────────────────────────────── */
  --kern-signal-rgb: from var(--kern-signal) r g b;
  --kern-signal-licht-rgb: from var(--kern-signal-licht) r g b;
  --kern-signal-zart-rgb: from var(--kern-signal-zart) r g b;
  --kern-signal-tief-rgb: from var(--kern-signal-tief) r g b;
  --kern-signal-hell-rgb: from var(--kern-signal-hell) r g b;
  --kern-signal-text-rgb: from var(--kern-signal-text) r g b;
  --kern-text-rgb: from var(--kern-text) r g b;
  --kern-text-leise-rgb: from var(--kern-text-leise) r g b;
  --kern-text-faint-rgb: from var(--kern-text-faint) r g b;
  --kern-text-zart-rgb: from var(--kern-text-zart) r g b;
  --kern-text-tag-rgb: from var(--kern-text-tag) r g b;
  --kern-text-invers-rgb: from var(--kern-text-invers) r g b;
  --kern-text-invers-ruhig-rgb: from var(--kern-text-invers-ruhig) r g b;
  --kern-bg-rgb: from var(--kern-bg) r g b;
  --kern-bg-warm-rgb: from var(--kern-bg-warm) r g b;
  --kern-bg-alt-rgb: from var(--kern-bg-alt) r g b;
  --kern-bg-kuehl-rgb: from var(--kern-bg-kuehl) r g b;
  --kern-bg-rose-rgb: from var(--kern-bg-rose) r g b;
  --kern-bg-sand-rgb: from var(--kern-bg-sand) r g b;
  --kern-zweit-rgb: from var(--kern-zweit) r g b;
  --kern-kachel-rgb: from var(--kern-kachel) r g b;
  --kern-kachel-sand-rgb: from var(--kern-kachel-sand) r g b;
  --kern-text-warm-leise-rgb: from var(--kern-text-warm-leise) r g b;
  --kern-text-warm-zart-rgb: from var(--kern-text-warm-zart) r g b;
  --kern-linie-rgb: from var(--kern-linie) r g b;
  --kern-dunkel-rgb: from var(--kern-dunkel) r g b;
  --kern-flaeche-dunkel-rgb: from var(--kern-flaeche-dunkel) r g b;
  --kern-dunkel-erhaben-rgb: from var(--kern-dunkel-erhaben) r g b;
  --kern-dunkel-karte-rgb: from var(--kern-dunkel-karte) r g b;
  --kern-fehler-rgb: from var(--kern-fehler) r g b;
  --kern-fehler-tief-rgb: from var(--kern-fehler-tief) r g b;
  --kern-fehler-hell-rgb: from var(--kern-fehler-hell) r g b;
  --kern-erfolg-rgb: from var(--kern-erfolg) r g b;
  --kern-erfolg-hell-rgb: from var(--kern-erfolg-hell) r g b;
  --kern-warnung-rgb: from var(--kern-warnung) r g b;
  --kern-warnung-hell-rgb: from var(--kern-warnung-hell) r g b;
  --kern-info-rgb: from var(--kern-info) r g b;
  --kern-info-hell-rgb: from var(--kern-info-hell) r g b;

  /* ── Schrift ────────────────────────────────────────────────────────────── */
  --kern-font: 'Schibsted Grotesk', 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; /* QUELLE Hausschrift (Dateien: schriften.css) */
  --kern-font-ziffer: 'DM Sans', var(--kern-font); /* QUELLE Ziffern/Nummern */
  --kern-font-titel: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif; /* QUELLE Titelschrift der Website (Überschriften); für Groteske hier var(--kern-font) eintragen. Das Cockpit nutzt sie seit ADM-D für Seitentitel und große Überschriften (font-display) */
  --kern-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* QUELLE Code (Systemschrift, nichts geladen) */
  --kern-g-normal: 400;
  --kern-g-mittel: 500;
  --kern-g-fett: 700;
  --kern-g-titel: 400; /* Titelgewicht Website und Cockpit (font-display) */

  /* ── Grundrundungen ─────────────────────────────────────────────────────── */
  --kern-radius: 0; /* QUELLE eckig (Referenzen/Bilder, red-Prinzip) */
  --kern-radius-klein: 4px; /* QUELLE Felder */
  --kern-radius-mittel: 4px; /* QUELLE Karten */
  --kern-radius-gross: 4px; /* QUELLE große Flächen (Vorgabe 06.10.2026: Flächen einheitlich 4 px) */
  --kern-radius-pille: 100px; /* QUELLE Knöpfe, Chips */

  /* ── Bewegung ───────────────────────────────────────────────────────────── */
  --kern-ease: cubic-bezier(0.4, 0, 0.2, 1); /* QUELLE Standardkurve */
  --kern-ease-linear: linear;
  --kern-dauer-kurz: 0.25s; /* QUELLE schnell */
  --kern-dauer: 0.5s; /* QUELLE normal */
  --kern-dauer-langsam: 0.7s; /* QUELLE langsam */

  /* ── Schriftgrößen (DS-W0, 01.10.2026) – Leiter des Cockpits (--ck-t-* in
        web-app/src/index.css) plus die dort real genutzten Zwischenstufen
        10/10,5/11,5/12,5/13,5 px als eigene Stufen (Entscheidung Architekt:
        Umzug ohne optische Änderung, Verdichtung später). Noch von keiner App
        gelesen. Name = Pixelwert, Punkt als Bindestrich (t-12-5 = 12,5 px). ── */
  --kern-t-10: 10px; /* Zwischenstufe (Cockpit text-[10px]) */
  --kern-t-10-5: 10.5px; /* Zwischenstufe (Cockpit text-[10.5px]) */
  --kern-t-11: 11px; /* = --ck-t-mini */
  --kern-t-11-5: 11.5px; /* Zwischenstufe (Cockpit text-[11.5px]) */
  --kern-t-12: 12px; /* = --ck-t-klein */
  --kern-t-12-5: 12.5px; /* Zwischenstufe (Cockpit text-[12.5px]) */
  --kern-t-13: 13px; /* = --ck-t-text */
  --kern-t-13-5: 13.5px; /* Zwischenstufe (Cockpit text-[13.5px]) */
  --kern-t-15: 15px; /* = --ck-t-lead */
  --kern-t-17: 17px; /* = --ck-t-h3 */
  --kern-t-26: 26px; /* = --ck-t-h2 (Titelschrift) */
  --kern-t-38: 38px; /* = --ck-t-h1 (Titelschrift) */
  --kern-t-mini: var(--kern-t-11); /* Kennzeichen, Spaltenköpfe */
  --kern-t-klein: var(--kern-t-12); /* Metatext, Hinweise */
  --kern-t-text: var(--kern-t-13); /* Fließtext, Tabellen, Felder */
  --kern-t-lead: var(--kern-t-15); /* Unterzeile, Lead */
  --kern-t-h3: var(--kern-t-17); /* Kartentitel */
  --kern-t-h2: var(--kern-t-26); /* Abschnittstitel (Serif) */
  --kern-t-h1: var(--kern-t-38); /* Seitentitel (Serif) */

  /* ── Zeilenhöhen (DS-W0; Werte wie --bm-zh-* der Website) ───────────────── */
  --kern-zh-eng: 1.08; /* Display, große Zahlen */
  --kern-zh-snug: 1.12; /* H1/H2 mehrzeilig */
  --kern-zh-titel: 1.2; /* H3/H4, Kartentitel */
  --kern-zh-kompakt: 1.3; /* Knöpfe, Chips, Labels, kurze Zeilen */
  --kern-zh-mittel: 1.5; /* Listen, Felder, Kleintext */
  --kern-zh-lang: 1.55; /* Lead, Aufzählungen */
  --kern-zh-text: 1.62; /* Fließtext */

  /* ── Abstände (DS-W0; 4er-Raster, Stufe n = n × 4 px) ───────────────────── */
  --kern-abstand-0-5: 2px;
  --kern-abstand-1: 4px;
  --kern-abstand-1-5: 6px;
  --kern-abstand-2: 8px;
  --kern-abstand-3: 12px;
  --kern-abstand-4: 16px;
  --kern-abstand-5: 20px;
  --kern-abstand-6: 24px;
  --kern-abstand-8: 32px;
  --kern-abstand-10: 40px;
  --kern-abstand-12: 48px;
  --kern-abstand-16: 64px;
  --kern-abstand-20: 80px;
  --kern-abstand-24: 96px;
  --kern-abstand-30: 120px;

  /* ── Schatten (DS-W0; Werte wie Cockpit --shadow-* und Website --bm-schatten-*) ─── */
  --kern-schatten-karte: 0 16px 32px color-mix(in srgb, var(--kern-schatten-tief) 15%, transparent); /* Website --bm-schatten-karte */
  --kern-schatten-schwebend: 0 16px 64px color-mix(in srgb, var(--kern-schatten-tief) 15%, transparent); /* Website --bm-schatten-schwebend */
  --kern-schatten-kopf: 0 0 8px color-mix(in srgb, var(--kern-schatten-tief) 24%, transparent); /* Website --bm-schatten-kopf */
  --kern-schatten-ck-karte: 0 1px 2px color-mix(in srgb, var(--kern-schatten-tief) 4%, transparent), 0 4px 14px -6px color-mix(in srgb, var(--kern-schatten-tief) 8%, transparent); /* Cockpit --shadow-card */
  --kern-schatten-ck-karte-hover: 0 2px 4px color-mix(in srgb, var(--kern-schatten-tief) 6%, transparent), 0 14px 30px -12px color-mix(in srgb, var(--kern-schatten-tief) 15%, transparent); /* Cockpit --shadow-card-hover */
  --kern-schatten-ck-glas: 0 8px 24px -10px color-mix(in srgb, var(--kern-schatten-tief) 18%, transparent); /* Cockpit --shadow-glass */
  --kern-schatten-ck-karte-dunkel: 0 1px 0 color-mix(in srgb, var(--kern-text-invers) 8%, transparent) inset, 0 1px 2px rgb(0 0 0 / 0.30), 0 12px 28px -14px rgb(0 0 0 / 0.60); /* Cockpit --shadow-card im Dunkelmodus (DS-W1; DM-1 02.10.2026: Inset-Licht an der Oberkante 5 → 8 %, weicher tiefer Schatten nach unten) */
  --kern-schatten-ck-karte-hover-dunkel: 0 1px 0 color-mix(in srgb, var(--kern-text-invers) 10%, transparent) inset, 0 2px 4px rgb(0 0 0 / 0.35), 0 18px 36px -14px rgb(0 0 0 / 0.65); /* Cockpit --shadow-card-hover im Dunkelmodus (DS-W1; DM-1: Inset-Licht 6 → 10 %, tieferer Schatten) */
  --kern-schatten-ck-glas-dunkel: 0 1px 0 color-mix(in srgb, var(--kern-text-invers) 5%, transparent) inset, 0 8px 24px -10px rgb(0 0 0 / 0.55); /* Cockpit --shadow-glass im Dunkelmodus (DS-W1) */
  --kern-schatten-ck-glasflaeche: 0 20px 40px -14px color-mix(in srgb, var(--kern-schatten-tief) 16%, transparent), 0 3px 10px color-mix(in srgb, var(--kern-schatten-tief) 6%, transparent); /* Cockpit --cg-shadow hell: Wurfschatten der Glasflächen (DS-W1) */
  --kern-schatten-ck-glasflaeche-dunkel: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 52px -14px rgba(0, 0, 0, 0.60), 0 3px 12px rgba(0, 0, 0, 0.38); /* Cockpit --cg-shadow dunkel (DS-W1; DM-1: Inset-Licht 8 % an der Oberkante der schwebenden Fläche) */
  --kern-schatten-ck-leiste: 0 24px 60px -20px rgba(0, 0, 0, 0.72), 0 6px 18px -10px rgba(0, 0, 0, 0.55); /* Cockpit: Flyout der Leiste und Leisten-Glas (.nav-flyout, .glass-nachtblau), immer dunkel (DS-W1) */
  --kern-schatten-ck-leiste-kante: inset 0 1px 0 rgba(255, 255, 255, 0.16); /* Cockpit: Licht-Oberkante des Flyouts (DS-W1) */
  --kern-schatten-ck-leiste-dunkel: 0 24px 64px -18px rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(255, 255, 255, 0.03); /* Cockpit: Flyout im Dunkelmodus, Kante und Halo trennen das Panel vom Grund (DS-W1) */

  /* ── Cockpit-Effekte (DS-W1, 01.10.2026) – Glas, Flyout und Leisten-Verläufe
        von web-app/src/index.css (--cg-*, --grad-nav-*, .nav-flyout), 1:1 aus
        der Stil-Datei übernommen. Weiß-/Schwarz-Auflagen, keine Buntfarbe; »-dunkel«
        = Dunkelmodus, »leiste-« = immer-dunkle Leiste. ── */
  --kern-ck-glas-blur: 20px; /* Refraktion der Glasflächen (backdrop-filter blur) */
  --kern-ck-glas-saettigung: 1.6; /* Refraktion der Glasflächen (backdrop-filter saturate) */
  --kern-ck-glas-tint: rgba(255, 255, 255, 0.62); /* Glas hell: weißer Tint */
  --kern-ck-glas-tint-stark: rgba(255, 255, 255, 0.80); /* Glas hell: dichter Tint (.glass--stark) */
  --kern-ck-glas-kante-hell: rgba(255, 255, 255, 0.92); /* Glas hell: Lichtkante, heller Stopp */
  --kern-ck-glas-kante-leise: rgba(255, 255, 255, 0.24); /* Glas hell: Lichtkante, leiser Stopp */
  --kern-ck-glas-ersatz: rgba(255, 255, 255, 0.94); /* Glas hell: fast opaker Rückfall ohne backdrop-filter, bei reduzierter Transparenz und mehr Kontrast */
  --kern-ck-glas-glanz: 0.30; /* Glas hell: Deckkraft des Glanzes oben links */
  --kern-ck-glas-kante-hell-dunkel: rgba(255, 255, 255, 0.34); /* Glas dunkel: Lichtkante, heller Stopp */
  --kern-ck-glas-kante-leise-dunkel: rgba(255, 255, 255, 0.07); /* Glas dunkel: Lichtkante, leiser Stopp */
  --kern-ck-glas-haarlinie-dunkel: rgba(255, 255, 255, 0.10); /* Glas dunkel: Haarlinie unten */
  --kern-ck-glas-glanz-dunkel: 0.18; /* Glas dunkel: Deckkraft des Glanzes */
  --kern-ck-leiste-kante-hell: rgba(255, 255, 255, 0.30); /* Leisten-Glas (.glass-nachtblau): Lichtkante, heller Stopp */
  --kern-ck-leiste-kante-leise: rgba(255, 255, 255, 0.06); /* Leisten-Glas: Lichtkante, leiser Stopp */
  --kern-ck-leiste-haarlinie: rgba(0, 0, 0, 0.35); /* Leisten-Glas: Haarlinie unten */
  --kern-ck-leiste-glanz: 0.12; /* Leisten-Glas: Deckkraft des Glanzes */
  --kern-ck-flyout-blur: 22px; /* Flyout der Leiste: Refraktion (blur) */
  --kern-ck-flyout-saettigung: 1.5; /* Flyout der Leiste: Refraktion (saturate) */
  --kern-ck-grund-schein-dunkel: radial-gradient(75% 60% at 30% -8%, rgba(64, 86, 160, 0.30) 0%, transparent 72%), radial-gradient(50% 42% at 92% 0%, color-mix(in srgb, var(--kern-signal) 8%, transparent) 0%, transparent 70%); /* DM-1: Lichtschein hinter dem Cockpit im Dunkelmodus (Hintergrund von .cockpit-aura): oben links gedämpftes Mitternachtsblau, oben rechts ein Hauch Koralle (7 %). Hellster Punkt hebt den Grund #02030d auf rund #101732; Weiß darauf weiter über 17:1, Grau --c-ink-400 über 6:1 */
  --kern-ck-viz-flaeche-dunkel: linear-gradient(to bottom, color-mix(in srgb, var(--kern-signal-licht) 24%, transparent) 0%, transparent 100%); /* DM-1: Flächenverlauf unter Linien von Diagrammen im Dunkelmodus (Verlaufs-Anklang der Koralle, 24 % → 0). Als --viz-flaeche in .viz; Linien selbst bleiben in den Diagrammfarben */
  --kern-ck-karte-linie-dunkel: rgba(255, 255, 255, 0.07); /* DM-1: 1-px-Rahmen der Karten im Dunkelmodus (Weiß, geringe Deckung; vorher 10 %). Dekorativ, die Abgrenzung trägt der Flächenton der Karte */
  --kern-ck-flyout-linie-dunkel: rgba(255, 255, 255, 0.13); /* Flyout im Dunkelmodus: Kante */
  --kern-ck-nav-verlauf-1: linear-gradient(180deg, rgba(255,255,255,0.040) 0%, rgba(255,255,255,0.016) 34%, rgba(255,255,255,0) 62%, rgba(0,0,0,0.10) 100%); /* Leiste Ebene 1 (NAV1): Licht am Kopf, Tiefe am Fuß, unter 4 % Kanalhub – nicht als Verlauf erkennbar */
  --kern-ck-nav-verlauf-2: linear-gradient(180deg, rgba(255,255,255,0.058) 0%, rgba(255,255,255,0.040) 38%, rgba(255,255,255,0.026) 100%); /* Leiste Ebene 2 (Bereichsspalte): dieselbe Richtung, schwächer */
  --kern-ck-nav-verlauf-hover: linear-gradient(180deg, rgba(255,255,255,0.030) 0%, rgba(255,255,255,0) 100%); /* Hover-Schimmer über der Hover-Farbe der Leiste */

  /* ── Altschicht Website/Kundenportal (W1-22, 01.10.2026) – Literalwerte, die
        website/ und portal-app/tailwind.config.ts noch unter alten Klassennamen
        ausgeben (border-line, text-faint, font-sans/-display, max-w-wrap/-col).
        Herkunft enerbolt-Nachtblau, NICHT die gültige Gestaltung: nicht neu
        verwenden; entfallen mit DS-W3/DS-W4 (docs/audit-designtokens.md). ── */
  --kern-alt-text-faint: rgba(255, 255, 255, 0.64); /* Portal: Tailwind-Farbe faint (text-faint) der Nachtblau-Schicht */
  --kern-alt-linie: rgba(255, 255, 255, 0.10); /* Portal: Tailwind-Farbe line (border-line) */
  --kern-alt-linie-stark: rgba(255, 255, 255, 0.18); /* Website und Portal: Tailwind-Farbe line-strong (border-line-strong) */
  --kern-alt-font-website: D-DIN, "Inter Variable", system-ui, sans-serif; /* Website: Tailwind font-sans (wirkt nur in der Grundregel html von Tailwind) */
  --kern-alt-font-portal: D-DIN, system-ui, sans-serif; /* Portal: Tailwind font-sans */
  --kern-alt-font-portal-titel: D-DIN, "Hanken Grotesk Variable", system-ui, sans-serif; /* Portal: Tailwind font-display */
  --kern-alt-breite-wrap: 1080px; /* Portal: Tailwind max-w-wrap (.wrap) */
  --kern-alt-breite-spalte: 720px; /* Portal: Tailwind max-w-col */

  /* ── Studio (Anthrazit/Schwarz) ─────────────────────────────────────────── */
  --kern-studio-grund: #0b0b0c; /* Studio: Seitengrund, fast Schwarz, ohne Blaustich (03.10.2026). Gilt nur auf html[data-flaeche=studio] im Dunkelmodus; Überschreibung in web-app/src/lib/studioAkzent.css */
  --kern-studio-flaeche: #161617; /* Studio: Karte/Fläche (Anthrazit), zum Grund 1,08:1 – Abgrenzung über die Linie */
  --kern-studio-flaeche-2: #212123; /* Studio: erhabene Fläche (Hover, Chip, Panel, Eingabe) */
  --kern-studio-linie: #2f2f32; /* Studio: Linie/Rahmen, neutral */
  --kern-studio-text: #f1f1ef; /* Studio: Haupttext, 17,6:1 auf Grund */
  --kern-studio-text-2: #a3a3a6; /* Studio: Zweittext, 7,6:1 auf Grund, 6,9:1 auf Fläche */
  --kern-studio-akzent: #ff7c7e; /* Studio: einziger Farbakzent (Koralle licht = --kern-signal-licht), sparsam für Fokus und aktive Auswahl; 8,2:1 auf Grund */
}
/* @kern-tokens:ende */