/* ===================================================================
   VORLAGE aus dem Skill edles-dunkel-design — WOERTLICH uebernommen aus
   AccelNexus frontend/css/tokens.css (Stand AccelNexus 063be7f, 10.10.2026 — nach R1 Design-Rückgrat; Datei selbst unverändert seit aff6c87). Nichts im Code unten
   ist veraendert; die AccelNexus-spezifischen Namen sind HIER als
   Platzhalter gekennzeichnet und werden beim Uebernehmen ersetzt
   (Checkliste: referenz/umstell-checkliste.md).
   PLATZHALTER:
     · Kommentare nennen „AccelNexus“                → <Produkt>
     · img.marke-nacht / img.marke-hell               → Bildmarke je Thema der eigenen App (zwei <img>)
     · --fs-marke 46px (Schriftzug der Anmeldung)     → bleibt; nur der Schriftzug selbst ist <Produkt>
     · Scrollbalken-Block: Farben rgba(16,35,60,…)    → hellen Wert an die eigene Textfarbe anpassen
     · html.handy (Handy-Treppe, gesetzt von theme.js)  → bleibt; nur die Handy-Seiten der eigenen App tragen die Klasse
   =================================================================== */
/* Die EINE Typo-Treppe von AccelNexus (N9.3, Design-Fund D7).

   Vorgeschichte: Es gab vier Token — und daneben 86 hart kodierte Größen in
   px und rem. Der normale Fließtext der Büro-Oberfläche rendete 16 px, obwohl
   `--fs-body` 14 px sagt, weil `body` gar keine `font-size` setzte und alles
   die Dokument-Basis erbte. Die Handy-App führte in `pwa.css` eine ZWEITE
   `:root`-Liste ohne Typo-Token; ihre rem-Werte (0,85–1,3 rem) landeten auf
   keiner Stufe der Treppe. Gemessen wurden bis zu acht verschiedene Größen
   auf einem Bildschirm.

   ENTSCHEIDUNG (N9.3): Die 16 px bleiben. Sie werden als fünfte Stufe
   `--fs-ui` AUFGESCHRIEBEN, statt die ganze Oberfläche auf 14 px zu
   schrumpfen — das wäre eine Neugestaltung, keine Reparatur, und hätte jede
   Knopfhöhe mitgenommen. `--fs-body` bleibt die Stufe für dichte Flächen
   (Tabellenzellen, Listenzeilen), `--fs-ui` ist der Fließtext und alles
   Bedienbare.

     --fs-small    12,5 px   Abzeichen, Hilfstexte, Meta-Zeilen  (Untergrenze!)
     --fs-body     14   px   Tabellen, Listenzeilen, dichte Flächen
     --fs-ui       16   px   Fließtext, Knöpfe, Felder — die Basis von `body`
     --fs-card     17   px   Karten- und Abschnitts-Überschriften
     --fs-page     22   px   Seitentitel (h1)
     --fs-display  30   px   die EINE große Zahl (Handy-Kachel) — Ausnahme,
                             und genau deshalb benannt
     ND1: --fs-leiste 13 · --fs-handy-zahl 26 · --fs-marke 46 (nur „Edles
     Dunkel“, siehe unten); ND2.1: --fs-tabelle-kopf 14,5

   Unter 12 px gibt es nichts. Ein Abzeichen wird über Innenabstand und
   `line-height` kompakt, nicht über die Schriftgröße (Fund D13).

   Diese Datei wird von JEDER Seite als ERSTES Stylesheet geladen — Büro,
   Login, Recht, Buchungsseite und Handy-App. Damit gibt es eine Quelle
   statt zweier, die auseinanderlaufen können. */

:root {
  --fs-small: 12.5px;
  --fs-body: 14px;
  --fs-ui: 16px;
  --fs-card: 17px;
  --fs-page: 22px;
  --fs-display: 30px;
  /* ND1 (U38, Design „Edles Dunkel“, docs/DESIGN-NACHTGLAS.md): drei Stufen,
     die nur das neue Design benutzt — weiter EINE Quelle, kein px daneben.
     --fs-leiste  13 px  Seitenleiste, Kachel-Name (Konzept §3, §5);
                         ND1.1: Gruppentitel der Leiste (Einträge --fs-body)
     --fs-handy-zahl 26 px  große Zahl der Handy-Kachel (Konzept §9)
     --fs-marke   46 px  Schriftzug „AccelNexus“ der Anmeldung (Konzept §8) */
  --fs-leiste: 13px;
  --fs-handy-zahl: 26px;
  --fs-marke: 46px;
  /* ND2.1 (Konzept §7, Freigabe Vahid 03.10.2026): die Kopfzeile einer
     Tabelle steht einen Tick größer als ihre Zeilen (14,5 zu 14 px) — eine
     eigene, benannte Stufe statt eines px-Werts in der Modul-Datei. */
  --fs-tabelle-kopf: 14.5px;
  /* ND2.1.1 (H2, Handy-Sichtung Vahid 04.10.2026): die große Zahl der
     Handy-Kachel wächst mit, wenn Wort und Zeilen eine Stufe steigen
     (16 → 17 px, Verhältnis gleich: 30 → 32 px). */
  --fs-handy-gross: 32px;
}

/* ND2.2a Baustein 0 (Entscheidung Vahid 06.10.2026): am HANDY steht die
   Schrift eine Stufe größer — der PC bleibt unverändert. Kein zweiter Satz
   Token und keine zweite Treppe in pwa.css: dieselben Namen bekommen im
   Handy-Geltungsbereich `html.handy` einen größeren Wert. Die Klasse setzt
   js/theme.js (erstes Skript im <head>, vor dem ersten Rendern) auf
   pwa.html und jeder pwa-<modul>.html — in beiden Themen, denn die Schrift
   ist keine Farbe.

     Stufe              PC      Handy
     --fs-small         12,5    13,5
     --fs-leiste        13      14
     --fs-body          14      15
     --fs-tabelle-kopf  14,5    15,5
     --fs-ui            16      17
     --fs-card          17      18
     --fs-page          22      23

   Die große Kachelzahl (--fs-handy-gross 32, --fs-display 30) und der
   Schriftzug der Anmeldung bleiben — sie sind schon groß, die Verhältnisse
   der Kachel bleiben damit gewahrt. Wächter: selftest.py Z4 D7 und
   selftest_nd22a.py. */
html.handy {
  --fs-small: 13.5px;
  --fs-leiste: 14px;
  --fs-body: 15px;
  --fs-tabelle-kopf: 15.5px;
  --fs-ui: 17px;
  --fs-card: 18px;
  --fs-page: 23px;
}

/* ND1.1 (U38) — kleine Bildmarke je Thema. Seitenleiste, Handy-Kopf
   (pwa*.html) und passwort-neu tragen zwei Bilder: im dunklen Thema das
   AI-Zeichen der Webseite mit den sieben App-Punkten
   (assets/AccelNexus-ai.svg, keine Kugel, keine Fläche). ND3.1: im hellen
   Thema DASSELBE Zeichen in der hellen Fassung (assets/AccelNexus-ai-hell.svg
   — die weißen Striche dunkel, sonst wortgleich), nicht mehr die alte Kugel.
   Die Regel steht HIER, weil tokens.css das eine Stylesheet ist, das jede
   dieser Seiten lädt (die Handy-Modulseiten und passwort-neu laden
   nachtglas.css nicht). Höhe wie bisher aus der jeweiligen Seite; die
   Breite folgt dem Seitenverhältnis. */
html:not(.nacht) img.marke-nacht,
html.nacht img.marke-hell { display: none; }
html.edel img.marke-nacht,
html.edel img.marke-hell { width: auto; border-radius: 0; }

/* ---------------------------------------------------------------------
   ND3.1 — Token „Edles Dunkel“ für BEIDE Themen (Hell-Modus „Tag“).
   Das Design gilt jetzt hell und dunkel (html.edel, js/theme.js); nur die
   Werte wechseln. Diese Token waren bis ND2.3 feste Werte in den Regeln von
   css/nachtglas.css und css/nachtglas-handy.css (Weiß in Linien und
   Schrift, Schwarz in Schatten und Abdunklung) — hier stehen sie EINMAL,
   weil tokens.css die eine Datei ist, die jede Seite lädt. Die dunklen Werte
   sind wortgleich die alten (Dunkel bleibt Pixel für Pixel, Wächter
   selftest_nd3.py), die hellen sind schwächer: Schatten und Abdunklung
   leise, Linien dunkel statt weiß.
     --text-stark         Zahlen, aktive Einträge (dunkel Weiß, hell fast Schwarz)
     --linie-leiste       Trennlinien an Leiste, Kopf, Sperrfenster
     --kopf-grund         Kopfzeile (Glas über dem Inhalt)
     --kopf-trenner       senkrechter Trenner der Kopfzeile
     --glas-hauch(-2/-3)  Darüberfahren an Kachelkopf, Griff, Blattzeilen
     --schimmer-a/-b      Lade-Schimmer
     --schatten-*         Schatten unter Kachel, Fenster, Blatt, Meldung
     --abdunkeln(-blatt)  Abdunklung hinter Dialog bzw. Menüblatt
     --sperre-abdunkeln / --sperre-karte   Sperrfenster am PC
     --schrift-auf-bernstein               Schrift auf „Entsperren“
     --marke-blau         „Nexus“, Fokus und Sprachwahl der Anmeldung
     --marke-scheibe / --marke-strich      große Bildmarke der Anmeldung
     --m-misch            mit ihr wird eine Modulfarbe „lesbarer“ gemischt
                          (dunkel aufhellen mit Weiß, hell abdunkeln mit Schwarz)
     --licht-oben         der Hauch Licht von oben im Grund
     --fuss-grund / --knopf-tief           Handy: Fußleiste, Haus und Modul-Knopf
     --handy-knopf-*      Handy-Startseite: „Abhaken“ in „Meine Aufgaben“
                          (dunkel wortgleich die alten Werte aus pwa.css)
   Kontraste gerechnet in selftest_nd3.py (hell ≥ 4,5:1 für Text). */
html.nacht {
  --text-stark: #ffffff;
  --linie-leiste: rgba(255, 255, 255, 0.06);
  --kopf-grund: rgba(10, 12, 17, 0.82);
  --kopf-trenner: rgba(255, 255, 255, 0.12);
  --glas-hauch: rgba(255, 255, 255, 0.03);
  --glas-hauch-2: rgba(255, 255, 255, 0.06);
  --glas-hauch-3: rgba(255, 255, 255, 0.05);
  --schimmer-a: rgba(255, 255, 255, 0.04);
  --schimmer-b: rgba(255, 255, 255, 0.11);
  --schatten-kachel: rgba(0, 0, 0, 0.28);
  --schatten-fenster: rgba(0, 0, 0, 0.45);
  --schatten-tief: rgba(0, 0, 0, 0.55);
  --schatten-toast: rgba(0, 0, 0, 0.5);
  --abdunkeln: rgba(0, 0, 0, 0.55);
  --abdunkeln-blatt: rgba(0, 0, 0, 0.5);
  --sperre-abdunkeln: rgba(3, 4, 5, 0.72);
  --sperre-karte: rgba(13, 15, 21, 0.86);
  --schrift-auf-bernstein: #1a1205;
  --marke-blau: #3f9fff;
  --marke-scheibe: #0d1322;
  --marke-strich: #eaf2fb;
  --m-misch: #ffffff;
  --licht-oben: rgba(255, 255, 255, 0.05);
  --fuss-grund: rgba(3, 4, 5, 0.86);
  --knopf-tief: rgba(3, 4, 5, 0.85);
  --handy-knopf-grund: #0b1626;
  --handy-knopf-rand: #1d3050;
  --handy-knopf-text: #e8f0fa;
}
/* Hell „Tag“, Variante Kühl (Wahl Vahid 07.10.2026): Linien, Schatten und
   Abdunklung in einem Blauschwarz rgb(15 35 70) bzw. rgb(15 30 60). */
html:not(.nacht) {
  --text-stark: #0a1220;
  --linie-leiste: rgba(15, 35, 70, 0.09);
  --kopf-grund: rgba(247, 249, 252, 0.85);
  --kopf-trenner: rgba(15, 35, 70, 0.14);
  --glas-hauch: rgba(15, 35, 70, 0.03);
  --glas-hauch-2: rgba(15, 35, 70, 0.06);
  --glas-hauch-3: rgba(15, 35, 70, 0.05);
  --schimmer-a: rgba(15, 35, 70, 0.05);
  --schimmer-b: rgba(15, 35, 70, 0.11);
  --schatten-kachel: rgba(15, 30, 60, 0.06);
  --schatten-fenster: rgba(15, 30, 60, 0.12);
  --schatten-tief: rgba(15, 30, 60, 0.16);
  --schatten-toast: rgba(15, 30, 60, 0.14);
  --abdunkeln: rgba(15, 30, 60, 0.32);
  --abdunkeln-blatt: rgba(15, 30, 60, 0.28);
  --sperre-abdunkeln: rgba(227, 232, 239, 0.72);
  --sperre-karte: rgba(255, 255, 255, 0.88);
  --schrift-auf-bernstein: #ffffff;
  --marke-blau: #0057b1;
  --marke-scheibe: #ffffff;
  --marke-strich: #16213a;
  --m-misch: #000000;
  --licht-oben: rgba(255, 255, 255, 0.7);
  --fuss-grund: rgba(255, 255, 255, 0.86);
  --knopf-tief: rgba(255, 255, 255, 0.85);
  --handy-knopf-grund: rgba(15, 35, 70, 0.035);
  --handy-knopf-rand: rgba(15, 35, 70, 0.1);
  --handy-knopf-text: #0f1726;
}

/* ---------------------------------------------------------------------
   KR2 K9 — die EINE Scrollbalken-Regel der ganzen App (Struktur wie im
   Struktur-Vorbild V5.3·R5 N2, Farben Nexus). Sie steht HIER und nicht in
   app.css, weil app.css nur das Büro lädt, die Handy-Seiten aber dieselben
   Balken brauchen (Dialog-Blatt, Sprach-Verlauf, Assistent) — tokens.css
   ist das eine Stylesheet, das JEDE Seite lädt (Abweichung vom Prompt KR2,
   begründet im Sitzungslog).
   · 8 px breit/hoch, Schiene unsichtbar, Daumen dezent in --leiste-balken;
     in Ruhe schmal (2 px durchsichtiger Rand, background-clip: padding-box),
     beim Überfahren der jeweiligen Fläche voll und kräftiger
     (--leiste-balken-hover). Hell und dunkel je ein Wert.
   · Firefox kennt ::-webkit-scrollbar nicht und bekommt die Standard-
     Eigenschaften — NUR dort: setzte man scrollbar-color auch für Chrome,
     schaltete Chrome seine Webkit-Regeln ab.
   · Wo der Balken liegt (Seitenleiste und Dialoge links, alles andere
     rechts/unten), entscheidet die jeweilige Fläche in app.css über
     direction — nicht diese Regel. */
:root {
  --leiste-balken: rgba(16, 35, 60, 0.30);
  --leiste-balken-hover: rgba(16, 35, 60, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --leiste-balken: rgba(232, 240, 250, 0.24);
    --leiste-balken-hover: rgba(232, 240, 250, 0.45);
  }
}
:root[data-theme="dark"] {
  --leiste-balken: rgba(232, 240, 250, 0.24);
  --leiste-balken-hover: rgba(232, 240, 250, 0.45);
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var(--leiste-balken);
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
}
*:hover::-webkit-scrollbar-thumb {
  background-color: var(--leiste-balken-hover);
  border-width: 1px;
}
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--leiste-balken) transparent; }
  *:hover { scrollbar-color: var(--leiste-balken-hover) transparent; }
}
/* ===================================================================
   VORLAGE aus dem Skill edles-dunkel-design — WOERTLICH uebernommen aus
   AccelNexus frontend/css/app.css (Zeilen 6–221, nur die Token-Bloecke) (Stand AccelNexus 063be7f, 10.10.2026 — nach R1 Design-Rückgrat: neu die Token --karte-*). Nichts im Code unten
   ist veraendert; die AccelNexus-spezifischen Namen sind HIER als
   Platzhalter gekennzeichnet und werden beim Uebernehmen ersetzt
   (Checkliste: referenz/umstell-checkliste.md).
   PLATZHALTER:
     · --brand / --brand-strong / --brand-ink #3f9fff/#1668c4 → Markenfarbe <Produkt> (Akzent / Flaeche / Schrift)
     · --modul-call … --modul-publish (7 Modulfarben)   → je Modul/Bereich der eigenen App EINE Farbe, --modul-<slug>
     · --accent, --ok, --warn, --danger, --dl-anders-*  → Werte der eigenen App (bleiben im hellen Thema)
     · --m (Standard #3f9fff dunkel / #0057b1 hell)     → Markenfarbe <Produkt> fuer Seiten ohne Modul
     · Die ND1-Token (--grund-*, --glas*, --rot-nacht, --r-*, --bernstein) bleiben WORTGLEICH
     · :root = HELLE Werte „Tag“, Variante Kuehl (Wahl Vahid 07.10.2026), dunkle in den zwei Bloecken darunter → bleiben WORTGLEICH
     · --karte-kontur/-schein/-schein-weite/-kontur-aktiv/-schein-aktiv (R1, Regel R-D) → bleiben WORTGLEICH (Wahl Vahid 09.10.2026, Variante D)
   =================================================================== */
:root {
  --brand: #3f9fff;
  --brand-strong: #1668c4; /* Füllfläche für weißen Text (≥4.5:1); --brand bleibt Akzent/Linie */
  --brand-ink: #1668c4;    /* Markenfarbe als SCHRIFT auf hellem Grund (≥4.5:1) — pro Theme gedreht */
  --accent: #34d399;
  --accent-ink: #0a6f49;   /* Akzent als SCHRIFT/Symbol; #34d399 schafft auf Weiß nur 1,9:1 */
  --bg: #f5f8fc;
  --surface: #ffffff;
  --surface-2: #eaf1f9;
  /* KR2 K8 — Rollen der Textfarben: --text ist ALLES, was man lesen muss
     (Menüpunkte, Karten-Beschreibungen, Untertitel, Tabelleninhalte,
     Feld-Etiketten); --text-muted NUR echte Nebeninformation (Zeitstempel,
     Zähler, Hilfetexte, Erledigtes). Hell: --text fast Schwarz (18,3:1 auf
     --surface), --text-muted 7,96:1 auf --surface (vorher #5a6f8a = 5,15:1,
     Vahid: „grau, schwer lesbar"); die Trennlinien einen Ton kräftiger, damit
     Karten auf dem hellen Grund einen sichtbaren Rand haben. */
  --text: #0b1526;
  --text-muted: #3d5270;
  --border: #c5d3e4;
  /* K8: die Seitenleiste ist im Hellmodus eine eigene Fläche (nicht Weiß auf
     Hellgrau wie die Karten); der Hover-Ton der Menüpunkte ist dann Weiß.
     Dunkel bleiben die Flächen, wie sie sind (nur Textfarben ändern sich). */
  --nav-bg: #edf2f8;
  --nav-hover: #ffffff;
  /* K1: Gruppen-Überschriften der Leiste — die stärkste Farbe der Leiste:
     hell fast Schwarz, dunkel Weiß (Entscheidung Vahid 26.09.2026). */
  --nav-gruppe-ink: #0b1526;
  --ok: #1fa971;
  --ok-ink: #0f6b47;       /* Ampel als SCHRIFT auf hellem Grund; #1fa971 schafft nur 3,0:1 */
  --warn: #d98a1f;
  --warn-ink: #8a5300;     /* dito, #d98a1f schafft nur 2,8:1 */
  --danger: #b93737;
  /* Gefahr als FLAECHE mit eigener Schriftfarbe — dieselbe Doppelung wie
     bei --brand/--brand-strong. Hell: Weiss auf #b93737 = 5,7:1.
     Dunkel: der helle Rotton traegt weisse Schrift nur mit 2,8:1, also
     steht dort dunkle Schrift darauf (7,6:1). */
  --danger-strong: #b93737;
  --danger-on: #ffffff;
  --radius: 12px;
  /* Die Typo-Treppe steht seit N9.3 in css/tokens.css — EINE Quelle fuer
     Buero und Handy (Design-Fund D7). Hier stand sie vorher; pwa.css hatte
     daneben eine zweite Liste ohne Typo-Token. */
  --shadow: 0 2px 12px rgba(16, 35, 60, 0.08);
  --font: "Segoe UI", system-ui, sans-serif;
  /* NS3 Datumsleiste: abseits der Gegenwart ein dezent warmer Grund (U1). */
  --dl-anders-bg: #fff3dc;
  --dl-anders-rand: #e7c58a;
  /* NÜ1 (U34, Vahid 01.10.2026): EINE Farbe je Modul — Symbol in der
     Seitenleiste und Balken der Übersicht-Kachel. Alles andere bleibt
     neutral. Als Satz geprüft mit dem dataviz-Validator (hell auf #ffffff und
     Leiste #edf2f8, dunkel auf #0b1626): Helligkeitsband, Sättigung, Farbenblindheit
     (benachbart ΔE ≥ 15,9 hell / 10,5 dunkel), Kontrast ≥ 3:1 je Farbe.
     Nie als Schriftfarbe — Text bleibt in den Text-Token. */
  /* ND3.1 (Hell-Modus „Tag“): die Modulfarben im Hellen — derselbe Farbton
     wie dunkel (OKLCH-Farbwinkel und Sättigung gleich), nur so weit
     abgedunkelt, dass sie als SCHRIFT auf Leiste, Inhalt, Glas und auf
     ihrer eigenen 16-%-Tönung ≥ 4,5:1 tragen (gerechnet in
     selftest_nd3.py K1, beide Grund-Varianten; die dataviz-Prüfung bemängelt
     nur die Sättigung des Türkis 0,079 < 0,10 — im sRGB-Raum ist bei dieser
     Helligkeit nicht mehr Türkis möglich). Vorher (NÜ1) waren sie nur für
     Symbole und Balken (≥ 3:1) gewählt. */
  --modul-call: #0058ae;      /* Termine — Blau */
  --modul-conbono: #00680d;   /* Buchhaltung — Grün */
  --modul-crew: #6644b3;      /* Dienstplan — Violett */
  --modul-deals: #00636f;     /* Angebote — Türkis */
  --modul-inbox: #804f00;     /* Posteingang — Gelb */
  --modul-memory: #4d4db6;    /* Firmengedächtnis — Indigo */
  --modul-publish: #a22560;   /* Social Media — Rosa */
  /* ND1 (U38) — Token-Schicht „Edles Dunkel“ (docs/DESIGN-NACHTGLAS.md §2).
     Namen verbindlich. ND3.1: das Design gilt jetzt auch hell (html.edel,
     js/theme.js) — hier stehen die HELLEN Werte (Hell „Tag“, Variante
     „Kühl“, Wahl Vahid 07.10.2026 aus zwei Varianten: Leiste blaugraues
     Hellgrau, Inhalt leicht getöntes Weiß, Glas Blauschwarz 3,5 % mit Rand
     10 %); die dunklen in den beiden Blöcken darunter.
     Kontraste gerechnet (selftest_nd3.py K1, gegen die gemischte Fläche;
     Glas = #eff3f8 + rgb(15 35 70) 3,5 % = #e7ecf2):
       --glas-text #0f1726: 14,6 Leiste · 17,0 Inhalt · 15,1 Glas
       --glas-leise #45516a: 6,5 Leiste · 7,6 Inhalt · 6,7 Glas
       --m, --modul-*, --bernstein, --rot-nacht: ≥ 4,6 auch auf ihrer Tönung 16 % */
  --grund-leiste: #e3e8ef;
  --grund-inhalt: #f7f9fc;
  --grund-inhalt-2: #eff3f8;
  --glas: rgba(15, 35, 70, 0.035);
  --glas-rand: rgba(15, 35, 70, 0.1);
  --glas-kante: rgba(255, 255, 255, 0.9);
  --glas-text: #0f1726;
  --glas-leise: #45516a;
  --rot-nacht: #ac1628;
  --r-kachel: 14px;
  --r-knopf: 14px;
  --r-feld: 4px;
  --r-tabelle: 4px;
  --m: #0057b1;
  --bernstein: #894900;
  /* R1 (S13, Regel R-D, Wahl Vahid 09.10.2026 Variante D): Kontur und
     Schein JEDER Karte in der Seiten-/Modulfarbe --m — Ruhe, Darüberfahren /
     Fokus / aktiv. Hell schwächer (Kontur 50 %, Schein 10 %). */
  --karte-kontur: 50%;
  --karte-schein: 10%;
  --karte-schein-weite: 12px;
  --karte-kontur-aktiv: 100%;
  --karte-schein-aktiv: 20%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #040c18;
    --surface: #0b1626;
    --surface-2: #122036;
    --text: #e8f0fa;
    --text-muted: #a6bad3;   /* K8: 9,15:1 auf --surface (vorher #8aa0bc = 6,77:1) */
    --border: #1d3050;
    --nav-bg: #0b1626;
    --nav-hover: #122036;
    --nav-gruppe-ink: #ffffff;
    --brand-ink: #3f9fff;  /* auf Dunkel tragen --brand und --accent selbst genug Kontrast */
    --accent-ink: #34d399;
    --ok-ink: #34d399;
    --warn-ink: #f0b45e;
    --danger: #f07575;
    --danger-strong: #f07575;
    --danger-on: #08131f;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    --dl-anders-bg: #2a2112;
    --dl-anders-rand: #6b5024;
    --modul-call: #3d8ee8;
    --modul-conbono: #2fa64f;
    --modul-crew: #9a7cf0;
    --modul-deals: #139fab;
    --modul-inbox: #b8840a;
    --modul-memory: #7f86f5;
    --modul-publish: #d95a8f;
    /* ND1 (U38) — „Edles Dunkel“; Kontraste gerechnet (WCAG, gegen die
       fertig gemischte Fläche; Glas = #0d0f15 + Weiß 3,5 % = #15171d):
       --glas-text #eef2f8: 18,3 Leiste · 17,4 Inhalt · 16,0 Glas
       --glas-leise #cbd0db: 13,3 Leiste · 12,6 Inhalt · 11,6 Glas · 10,9 Glas-hover
       (ND2.1.2 N2: von #8a93a6 = 6,3:1 auf 80 % Weiß angehoben — Vahid: „fast unlesbar“)
       --m (Modulfarben): ≥ 4,65 auf Glas-hover (Rosa am knappsten, 4,96 Glas)
       --bernstein #ffb84d: 10,4 Glas · --rot-nacht #ff6b6b: 6,5 Glas */
    --grund-leiste: #030405;
    --grund-inhalt: #0a0c11;
    --grund-inhalt-2: #0d0f15;
    --glas: rgba(255, 255, 255, 0.035);
    --glas-rand: rgba(255, 255, 255, 0.09);
    --glas-kante: rgba(255, 255, 255, 0.07);
    --glas-text: #eef2f8;
    --glas-leise: #cbd0db;
    --rot-nacht: #ff6b6b;
    --r-kachel: 14px;
    --r-knopf: 14px;
    --r-feld: 4px;
    --r-tabelle: 4px;
    --m: #3f9fff;
    --bernstein: #ffb84d;
    --karte-kontur: 60%;
    --karte-schein: 18%;
    --karte-schein-weite: 12px;
    --karte-kontur-aktiv: 100%;
    --karte-schein-aktiv: 40%;
  }
}
:root[data-theme="dark"] {
  --bg: #040c18;
  --surface: #0b1626;
  --surface-2: #122036;
  --text: #e8f0fa;
  --text-muted: #a6bad3;
  --border: #1d3050;
  --nav-bg: #0b1626;
  --nav-hover: #122036;
  --nav-gruppe-ink: #ffffff;
  --brand-ink: #3f9fff;
  --accent-ink: #34d399;
  --ok-ink: #34d399;
  --warn-ink: #f0b45e;
  --danger: #f07575;
  --danger-strong: #f07575;
  --danger-on: #08131f;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  --dl-anders-bg: #2a2112;
  --dl-anders-rand: #6b5024;
  --modul-call: #3d8ee8;
  --modul-conbono: #2fa64f;
  --modul-crew: #9a7cf0;
  --modul-deals: #139fab;
  --modul-inbox: #b8840a;
  --modul-memory: #7f86f5;
  --modul-publish: #d95a8f;
  /* ND1 (U38) — „Edles Dunkel“; Kontraste gerechnet (WCAG, gegen die
     fertig gemischte Fläche; Glas = #0d0f15 + Weiß 3,5 % = #15171d):
     --glas-text #eef2f8: 18,3 Leiste · 17,4 Inhalt · 16,0 Glas
     --glas-leise #cbd0db: 13,3 Leiste · 12,6 Inhalt · 11,6 Glas · 10,9 Glas-hover
       (ND2.1.2 N2: von #8a93a6 = 6,3:1 auf 80 % Weiß angehoben — Vahid: „fast unlesbar“)
     --m (Modulfarben): ≥ 4,65 auf Glas-hover (Rosa am knappsten, 4,96 Glas)
     --bernstein #ffb84d: 10,4 Glas · --rot-nacht #ff6b6b: 6,5 Glas */
  --grund-leiste: #030405;
  --grund-inhalt: #0a0c11;
  --grund-inhalt-2: #0d0f15;
  --glas: rgba(255, 255, 255, 0.035);
  --glas-rand: rgba(255, 255, 255, 0.09);
  --glas-kante: rgba(255, 255, 255, 0.07);
  --glas-text: #eef2f8;
  --glas-leise: #cbd0db;
  --rot-nacht: #ff6b6b;
  --r-kachel: 14px;
  --r-knopf: 14px;
  --r-feld: 4px;
  --r-tabelle: 4px;
  --m: #3f9fff;
  --bernstein: #ffb84d;
  --karte-kontur: 60%;
  --karte-schein: 18%;
  --karte-schein-weite: 12px;
  --karte-kontur-aktiv: 100%;
  --karte-schein-aktiv: 40%;
}