/* ============================================================================
   K360 — DESIGN "REDESIGN 10/2026" (Phase 3, Manual Kap. 13.1)
   ----------------------------------------------------------------------------
   WAS DIESE DATEI IST
   Sie bringt die verbindliche Token-Datei (docs/k360-design/k360-design-tokens.css)
   ins Produkt und loest die alten Werte ab. Der Werteblock unten ist WOERTLICH
   aus der Token-Datei uebernommen — nicht abgetippt, nicht nachgerechnet. Aendern
   darf man ihn nur in der Token-Datei, dann hier nachziehen (Kap. 13.3).

   WARUM ES EINE BINDUNGSSCHICHT GIBT UND NICHT NUR DIE TOKEN-DATEI
   Die Token-Datei fuehrt ~76 Werte unter dem Praefix --k-. Das Produkt liest
   seine Werte aber aus ~131 eigenen Variablen (--bg, --card, --ink, --rail …),
   die in 300 KB CSS an hunderten Stellen benutzt werden. Diese Variablen
   umzubenennen hiesse, das ganze Produkt-CSS anzufassen — das ist NICHT Phase 3
   ("kein Markup-Eingriff", 1-2 Tage, geringes Risiko). Phase 3 setzt stattdessen
   die Token auf die vorhandenen Rollen um: --bg liest --k-grund, --card liest
   --k-flaeche. Damit ist der Wert EINE Zeile pro Rolle und die Herkunft bleibt
   sichtbar.

   WARUM DIE SCHICHT AM ENDE GELADEN WIRD
   Alle Produkt-Stylesheets (styles.css, ui-2026.css, die Modul-CSS) definieren
   ihre Werte in :root mit gleicher Spezifitaet. Wer spaeter kommt, gewinnt.
   Deshalb steht diese Datei in index.html als LETZTES Stylesheet. Wer sie
   entfernt, hat den alten Stand exakt zurueck (Fallback, s. Skript
   scripts/k360_produkt_design.sh).

   WAS SIE NICHT TUT
   Kein Markup, keine Struktur, keine neuen Komponenten — nur Werte und die
   Fokusregel. Der Dunkelmodus des Produkts bleibt vorerst unberuehrt (Manual
   Kap. 14.4 Nr. 5: das Produkt nutzt heute nur den hellen Modus); die
   Token-Datei traegt ihn bereits, er kommt nach Phase 3.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) DIE TOKEN — woertlich aus docs/k360-design/k360-design-tokens.css (heller Teil)
   --------------------------------------------------------------------------- */
:root{
  /* --- Marke: Arbeitsblau ------------------------------------------------- */
  --k-brand-50:  #F5F9FC;
  --k-brand-100: #DEEBF7;
  --k-brand-200: #BFD9F0;
  --k-brand-300: #8CBDE0;
  --k-brand-400: #5CA8DC;
  --k-brand-500: #2899F5;   /* nur Grafik/Azente — nie Text auf Weiss (3,01:1) */
  --k-brand-600: #0F6CBD;   /* Icons, Modul-Identitaet, Aktiv-Grafik */
  --k-brand-800: #115EA3;   /* Primaerknopf, Link, Primaertext-Akzent */
  --k-brand-900: #0B4470;
  --k-brand-950: #082344;

  /* --- Rail (Produktbestand) --------------------------------------------- */
  --k-rail:        #1B2836;
  --k-rail-hover:  #223143;
  --k-rail-icon:   #C9D6E3;
  --k-rail-badge:  #A31F1C;

  /* --- Neutrals ---------------------------------------------------------- */
  --k-grund:   #F4F6F8;
  --k-flaeche: #FFFFFF;
  --k-subtil:  #EDF0F3;
  --k-linie:   #DFE4E9;   /* dekorativer Trenner — kein Kontrastziel */
  --k-kante:   #788B9E;   /* EINGABEKANTE — >= 3:1 auf allen hellen Flaechen */
  --k-text:    #141A20;
  --k-text-2:  #5A6672;
  --k-text-3:  #3A4552;

  /* --- Akzent & Status --------------------------------------------------- */
  --k-zirbe:    #C2410C;   /* Akzentmaximum: neu/ungelesen/Aktivierung */
  --k-ok:       #166534;  --k-ok-bg:     #E7F4E9;
  --k-warn:     #7C4A03;  --k-warn-bg:   #FCF1DC;
  --k-danger:   #A31F1C;  --k-danger-bg: #FAE7E6;
  --k-info:     #185A93;  --k-info-bg:   #E6F0F8;
  --k-amt:      #1F3B57;  --k-amt-bg:    #E3EBF4;

  /* --- Modulfarben (Herkunftssignal, kein Dekor) ------------------------- */
  --k-mod-mail:    #0F6CBD;
  --k-mod-cal:     #A4262C;
  --k-mod-kontakt: #107C10;
  --k-mod-datei:   #5C2D91;
  --k-mod-akten:   #7F4F24;
  --k-mod-git:     #3A3A3A;
  --k-mod-todo:    #038387;
  --k-mod-ticket:  #0E7490;
  --k-mod-chat:    #0069A6;
  --k-mod-suche:   #0F766E;
  --k-mod-netz:    #155E75;

  /* --- Radius ------------------------------------------------------------ */
  --k-r-xs:  7px;
  --k-r-s:   8px;
  --k-r-m:  10px;
  --k-r-l:  12px;
  --k-r-pille: 999px;

  /* --- Abstand (4-px-Grundraster, 8-px-Hauptschritt) --------------------- */
  --k-sp-1:  4px;   --k-sp-2:  8px;   --k-sp-3: 12px;   --k-sp-4: 16px;
  --k-sp-5: 24px;   --k-sp-6: 32px;   --k-sp-7: 48px;   --k-sp-8: 64px;

  /* --- Schatten (zwei Stufen, mehrlagig, sehr weich) --------------------- */
  --k-sch-1: 0 1px 2px rgb(16 24 40 / .05), 0 2px 6px rgb(16 24 40 / .05);
  --k-sch-2: 0 10px 30px rgb(16 24 40 / .14), 0 2px 8px rgb(16 24 40 / .08);

  /* --- Bewegung ---------------------------------------------------------- */
  --k-d-schnell: 120ms;
  --k-d-normal:  180ms;
  --k-d-quer:    150ms;
  --k-kurve:     cubic-bezier(.2,.9,.3,1);

  /* --- Fokus (A11y-Kern: Doppelring) ------------------------------------ */
  --k-fokus: 0 0 0 2px var(--k-flaeche), 0 0 0 4px var(--k-brand-600);

  /* --- Schrift (drei Rollen) ------------------------------------------- */
  --k-font-ui:   "Public Sans", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --k-font-doc:  "Source Serif 4", Georgia, "Times New Roman", serif;
  --k-font-data: "JetBrains Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;

  /* --- Groessen (Produkt) ----------------------------------------------- */
  --k-rail-w:  64px;
  --k-kopf-h:  56px;
  --k-band-h:  38px;   /* Objektband (v3, nur mit Schalter) */
  --k-karte-h: 36px;   /* Ribbon-Registerkarte (v4, verbindlich) */
  --k-panel-h: 90px;   /* Ribbon-Befehlsflaeche (v4, verbindlich) */
  --k-touch:   44px;

  /* --- Mischverhaeltnisse fuer markierte Ribbon-Befehle -----------------
     WARUM ALS TOKEN UND NICHT DIREKT IN ribbon-v4.css
     Ein markierter Befehl traegt die Modulfarbe — nicht Arbeitsblau. Der
     Nutzer: „im ribbon ist jeder markierte button immer blau, aber im
     kalender z.b sollte er doch rot sein." Das Kalenderrot ist #A4262C;
     auf einer weissen Flaeche braucht es als Text aber eine dunklere
     Mischung und auf einer dunklen eine hellere. Dieselbe Regel kann das
     nicht mit festen Zahlen — deshalb steht hier NUR das Verhaeltnis, und
     die Regel in ribbon-v4.css ist fuer beide Themes dieselbe.

     Gerundet wird auf zwei Stellen, weil color-mix sonst bei jeder
     Kombination neu nachgerechnet werden muss. Gemessen (01.10.2026),
     schlechtester Fall ueber alle zwoelf Modulfarben:

         hell    Text 80% Modul / Flaeche 14%   ->  5,03:1
         dunkel  Text 45% Modul / Flaeche 14%   ->  5,22:1
         Soll 4,5:1 (Manual Kap. 4.6) — beide mit Puffer.                */
  --k-misch-text:   80%;   /* Text: so viel Modulfarbe, Rest Textfarbe */
  --k-misch-flaeche:14%;   /* Flaeche: Schleier derselben Modulfarbe   */
  --k-praem-auf:    100%;  /* Primaerflaeche = volle Modulfarbe (hell) */
}

/* ---------------------------------------------------------------------------
   2) DIE BINDUNG — Token auf die vorhandenen Produktrollen
   ---------------------------------------------------------------------------
   WARUM DIE SELEKTOREN NICHT NUR :root SIND
   Das Produkt fuehrt fuenf Themes: light (Standard), lumen, blau, dark, kontrast.
   Jedes hat seinen eigenen Werteblock mit `html[data-theme="…"]` — das ist EINE
   Klasse + EIN Typ, waehrend `:root` nur EINE Klasse ist. Nach den Regeln der
   Spezifitaet gewinnt der Theme-Block also IMMER, unabhaengig von der Ladereihenfolge
   (live gemessen: das Konto stand auf "lumen", deshalb kam #EEF1F6 statt #F4F6F8).
   Deshalb steht die Bindung unten dreimal: einmal fuer :root (kein Theme-Attribut),
   einmal fuer light, lumen und blau. Damit traegt das Produkt die K360-Werte,
   egal welches helle Theme eingestellt ist.

   WAS HIER NICHT STEHT, UND WARUM
   - `dark` bleibt unberuehrt: die Token-Datei bringt einen eigenen Dunkelmodus mit,
     der kommt als eigener Schritt (Manual Kap. 14.4 Nr. 5: das Produkt nutzt heute
     nur den hellen Modus). Bis dahin bleibt das dunkle Theme, was es ist.
   - `kontrast` bleibt unberuehrt: das ist das Barrierefreiheits-Theme (Schwarz auf
     Weiss, keine Schatten, max. Kontrast). Es auf die Markenwerte zu ziehen waere
     ein Rueckschritt fuer Benutzer, die es brauchen. Ein Designwechsel darf die
     Zugangsvoraussetzung nicht verschlechtern.
   Links die Variable, die das Produkt schon benutzt, rechts die Token-Rolle.
   Jede Zeile ist eine Entscheidung aus dem Manual; die Kapitalangabe steht dabei,
   damit beim naechsten Mal niemand raten muss.
   --------------------------------------------------------------------------- */
:root{
  /* Flaechen und Text (Kap. 4.3 / 3.1) */
  --bg:      var(--k-grund);       /* App-Grund      #F4F6F8 (war #f5f5f4, warmgrau) */
  --card:    var(--k-flaeche);     /* Karte/Panel    #FFFFFF */
  --panel2:  var(--k-subtil);      /* Zweitflaeche */
  --hover:   var(--k-subtil);      /* Hover-Flaeche  #EDF0F3 (war #f0f0ef) */
  --border:  var(--k-linie);       /* Trenner        #DFE4E9 (war #e5e3e0, warm) */
  --line:    var(--k-linie);
  --text:    var(--k-text);        /* Fliesstext     #141A20 (war #201f1e) */
  --text2:   var(--k-text-2);      /* Sekundaertext  #5A6672 (war #605e5c) */
  --text3:   var(--k-text-3);      /* Tertiaertext   #3A4552 (dunkel #C6D1DB) */

  /* Rail (Kap. 3.1) — immer dunkel, in beiden Modi */
  --rail:        var(--k-rail);        /* #1B2836 (war #243a5e, marineblau) */
  --rail-hover:  var(--k-rail-hover);
  --rail-fg:     var(--k-rail-icon);
  --badge-unread: var(--k-rail-badge);

  /* Primaerknopf, Link, Akzent (Kap. 3.1, 4.3)
     --k-brand-800 ist die Stufe, die das Manual fuer den Primaerknopf fuehrt.
     Sie traegt weisse Schrift mit 6,66:1 (der alte Wert #0b6bcb lag bei 5,28:1). */
  --accent:       var(--k-brand-800);
  --accent-dark:  var(--k-brand-900);   /* gedrueckt */
  --accent-light: var(--k-brand-100);   /* gewaehlt/Tint */

  /* Status (Kap. 4.4) — immer mit Symbol UND Text, nie Farbe allein */
  --ok:        var(--k-ok);
  --ok-bg:     var(--k-ok-bg);
  --warn:      var(--k-warn);
  --warn-bg:   var(--k-warn-bg);
  --danger:    var(--k-danger);
  --danger-bg: var(--k-danger-bg);
  --danger-dark: var(--k-danger);

  /* Modulfarben (Kap. 4.5) — Herkunftssignal, kein Dekor */
  --mail:    var(--k-mod-mail);
  --cal:     var(--k-mod-cal);
  --contact: var(--k-mod-kontakt);
  --file:    var(--k-mod-datei);
  --wiki:    var(--k-mod-akten);
  --git:     var(--k-mod-git);
  --todo:    var(--k-mod-todo);
  --tow:     var(--k-mod-ticket);

  /* Radius (Kap. 6.3) */
  --radius:      var(--k-r-m);     /* Karte/Panel/Menue  10 px (war 10 px) */
  --radius-lg:   var(--k-r-l);     /* Fenster/Modal      12 px (war 14 px) */
  --radius-pill: var(--k-r-pille);

  /* Schatten (Kap. 6.4 — zwei Stufen, mehr nie).
     Das Produkt fuehrt drei Schatten; die zwei Token sind jetzt die Quelle,
     --shadow-sm bleibt als kleine Stufe erhalten (siehe unten). */
  --shadow:    var(--k-sch-2);     /* Modal/Popover/Menue */
  --shadow-sm: var(--k-sch-1);     /* Karte ueber Grund */

  /* Bewegung (Kap. 6.5) — nie ueber 200 ms, kein Overshoot */
  --tr:         var(--k-d-normal) var(--k-kurve);
  --dur-1:      var(--k-d-schnell);
  --dur-2:      var(--k-d-quer);
  --dur-3:      var(--k-d-normal);
  --ease-out:   var(--k-kurve);

  /* Schrift (Kap. 5.1): Public Sans liegt seit Phase 0 lokal (dashboard/schrift/
     public-sans.css) und steht in styles.css an erster Stelle — das war der Fehler
     aus Kap. 5.2 (die Google-Fonts-Zeile lieferte HTTP 400). Die Kette selbst wird
     NICHT ueber eine Variable gefuehrt; sie steht dort fest und wird unten in
     Abschnitt 3 berichtigt (Inter faellt raus, Manual Kap. 5.1 verbietet es).
     Dokumenten- und Datenschrift sind neue Rollen ohne Bestand — sie sind
     angelegt, aber im Produkt noch nicht angewandt (Phase 4/6). */
  --font-doc:  var(--k-font-doc);
  --font-data: var(--k-font-data);

  /* Fokus (Kap. 6.6) */
  --fokus: var(--k-fokus);
}

/* Dieselbe Bindung fuer die hellen Themes (Spezifitaet, s. Begruendung oben) */
html[data-theme="light"]{
  /* Flaechen und Text (Kap. 4.3 / 3.1) */
  --bg:      var(--k-grund);       /* App-Grund      #F4F6F8 (war #f5f5f4, warmgrau) */
  --card:    var(--k-flaeche);     /* Karte/Panel    #FFFFFF */
  --panel2:  var(--k-subtil);      /* Zweitflaeche */
  --hover:   var(--k-subtil);      /* Hover-Flaeche  #EDF0F3 (war #f0f0ef) */
  --border:  var(--k-linie);       /* Trenner        #DFE4E9 (war #e5e3e0, warm) */
  --line:    var(--k-linie);
  --text:    var(--k-text);        /* Fliesstext     #141A20 (war #201f1e) */
  --text2:   var(--k-text-2);      /* Sekundaertext  #5A6672 (war #605e5c) */
  --text3:   var(--k-text-3);      /* Tertiaertext   #3A4552 (dunkel #C6D1DB) */

  /* Rail (Kap. 3.1) — immer dunkel, in beiden Modi */
  --rail:        var(--k-rail);        /* #1B2836 (war #243a5e, marineblau) */
  --rail-hover:  var(--k-rail-hover);
  --rail-fg:     var(--k-rail-icon);
  --badge-unread: var(--k-rail-badge);

  /* Primaerknopf, Link, Akzent (Kap. 3.1, 4.3)
     --k-brand-800 ist die Stufe, die das Manual fuer den Primaerknopf fuehrt.
     Sie traegt weisse Schrift mit 6,66:1 (der alte Wert #0b6bcb lag bei 5,28:1). */
  --accent:       var(--k-brand-800);
  --accent-dark:  var(--k-brand-900);   /* gedrueckt */
  --accent-light: var(--k-brand-100);   /* gewaehlt/Tint */

  /* Status (Kap. 4.4) — immer mit Symbol UND Text, nie Farbe allein */
  --ok:        var(--k-ok);
  --ok-bg:     var(--k-ok-bg);
  --warn:      var(--k-warn);
  --warn-bg:   var(--k-warn-bg);
  --danger:    var(--k-danger);
  --danger-bg: var(--k-danger-bg);
  --danger-dark: var(--k-danger);

  /* Modulfarben (Kap. 4.5) — Herkunftssignal, kein Dekor */
  --mail:    var(--k-mod-mail);
  --cal:     var(--k-mod-cal);
  --contact: var(--k-mod-kontakt);
  --file:    var(--k-mod-datei);
  --wiki:    var(--k-mod-akten);
  --git:     var(--k-mod-git);
  --todo:    var(--k-mod-todo);
  --tow:     var(--k-mod-ticket);

  /* Radius (Kap. 6.3) */
  --radius:      var(--k-r-m);     /* Karte/Panel/Menue  10 px (war 10 px) */
  --radius-lg:   var(--k-r-l);     /* Fenster/Modal      12 px (war 14 px) */
  --radius-pill: var(--k-r-pille);

  /* Schatten (Kap. 6.4 — zwei Stufen, mehr nie).
     Das Produkt fuehrt drei Schatten; die zwei Token sind jetzt die Quelle,
     --shadow-sm bleibt als kleine Stufe erhalten (siehe unten). */
  --shadow:    var(--k-sch-2);     /* Modal/Popover/Menue */
  --shadow-sm: var(--k-sch-1);     /* Karte ueber Grund */

  /* Bewegung (Kap. 6.5) — nie ueber 200 ms, kein Overshoot */
  --tr:         var(--k-d-normal) var(--k-kurve);
  --dur-1:      var(--k-d-schnell);
  --dur-2:      var(--k-d-quer);
  --dur-3:      var(--k-d-normal);
  --ease-out:   var(--k-kurve);

  /* Schrift (Kap. 5.1): Public Sans liegt seit Phase 0 lokal (dashboard/schrift/
     public-sans.css) und steht in styles.css an erster Stelle — das war der Fehler
     aus Kap. 5.2 (die Google-Fonts-Zeile lieferte HTTP 400). Die Kette selbst wird
     NICHT ueber eine Variable gefuehrt; sie steht dort fest und wird unten in
     Abschnitt 3 berichtigt (Inter faellt raus, Manual Kap. 5.1 verbietet es).
     Dokumenten- und Datenschrift sind neue Rollen ohne Bestand — sie sind
     angelegt, aber im Produkt noch nicht angewandt (Phase 4/6). */
  --font-doc:  var(--k-font-doc);
  --font-data: var(--k-font-data);

  /* Fokus (Kap. 6.6) */
  --fokus: var(--k-fokus);
}
html[data-theme="lumen"]{
  /* Flaechen und Text (Kap. 4.3 / 3.1) */
  --bg:      var(--k-grund);       /* App-Grund      #F4F6F8 (war #f5f5f4, warmgrau) */
  --card:    var(--k-flaeche);     /* Karte/Panel    #FFFFFF */
  --panel2:  var(--k-subtil);      /* Zweitflaeche */
  --hover:   var(--k-subtil);      /* Hover-Flaeche  #EDF0F3 (war #f0f0ef) */
  --border:  var(--k-linie);       /* Trenner        #DFE4E9 (war #e5e3e0, warm) */
  --line:    var(--k-linie);
  --text:    var(--k-text);        /* Fliesstext     #141A20 (war #201f1e) */
  --text2:   var(--k-text-2);      /* Sekundaertext  #5A6672 (war #605e5c) */
  --text3:   var(--k-text-3);      /* Tertiaertext   #3A4552 (dunkel #C6D1DB) */

  /* Rail (Kap. 3.1) — immer dunkel, in beiden Modi */
  --rail:        var(--k-rail);        /* #1B2836 (war #243a5e, marineblau) */
  --rail-hover:  var(--k-rail-hover);
  --rail-fg:     var(--k-rail-icon);
  --badge-unread: var(--k-rail-badge);

  /* Primaerknopf, Link, Akzent (Kap. 3.1, 4.3)
     --k-brand-800 ist die Stufe, die das Manual fuer den Primaerknopf fuehrt.
     Sie traegt weisse Schrift mit 6,66:1 (der alte Wert #0b6bcb lag bei 5,28:1). */
  --accent:       var(--k-brand-800);
  --accent-dark:  var(--k-brand-900);   /* gedrueckt */
  --accent-light: var(--k-brand-100);   /* gewaehlt/Tint */

  /* Status (Kap. 4.4) — immer mit Symbol UND Text, nie Farbe allein */
  --ok:        var(--k-ok);
  --ok-bg:     var(--k-ok-bg);
  --warn:      var(--k-warn);
  --warn-bg:   var(--k-warn-bg);
  --danger:    var(--k-danger);
  --danger-bg: var(--k-danger-bg);
  --danger-dark: var(--k-danger);

  /* Modulfarben (Kap. 4.5) — Herkunftssignal, kein Dekor */
  --mail:    var(--k-mod-mail);
  --cal:     var(--k-mod-cal);
  --contact: var(--k-mod-kontakt);
  --file:    var(--k-mod-datei);
  --wiki:    var(--k-mod-akten);
  --git:     var(--k-mod-git);
  --todo:    var(--k-mod-todo);
  --tow:     var(--k-mod-ticket);

  /* Radius (Kap. 6.3) */
  --radius:      var(--k-r-m);     /* Karte/Panel/Menue  10 px (war 10 px) */
  --radius-lg:   var(--k-r-l);     /* Fenster/Modal      12 px (war 14 px) */
  --radius-pill: var(--k-r-pille);

  /* Schatten (Kap. 6.4 — zwei Stufen, mehr nie).
     Das Produkt fuehrt drei Schatten; die zwei Token sind jetzt die Quelle,
     --shadow-sm bleibt als kleine Stufe erhalten (siehe unten). */
  --shadow:    var(--k-sch-2);     /* Modal/Popover/Menue */
  --shadow-sm: var(--k-sch-1);     /* Karte ueber Grund */

  /* Bewegung (Kap. 6.5) — nie ueber 200 ms, kein Overshoot */
  --tr:         var(--k-d-normal) var(--k-kurve);
  --dur-1:      var(--k-d-schnell);
  --dur-2:      var(--k-d-quer);
  --dur-3:      var(--k-d-normal);
  --ease-out:   var(--k-kurve);

  /* Schrift (Kap. 5.1): Public Sans liegt seit Phase 0 lokal (dashboard/schrift/
     public-sans.css) und steht in styles.css an erster Stelle — das war der Fehler
     aus Kap. 5.2 (die Google-Fonts-Zeile lieferte HTTP 400). Die Kette selbst wird
     NICHT ueber eine Variable gefuehrt; sie steht dort fest und wird unten in
     Abschnitt 3 berichtigt (Inter faellt raus, Manual Kap. 5.1 verbietet es).
     Dokumenten- und Datenschrift sind neue Rollen ohne Bestand — sie sind
     angelegt, aber im Produkt noch nicht angewandt (Phase 4/6). */
  --font-doc:  var(--k-font-doc);
  --font-data: var(--k-font-data);

  /* Fokus (Kap. 6.6) */
  --fokus: var(--k-fokus);
}
html[data-theme="blau"]{
  /* Flaechen und Text (Kap. 4.3 / 3.1) */
  --bg:      var(--k-grund);       /* App-Grund      #F4F6F8 (war #f5f5f4, warmgrau) */
  --card:    var(--k-flaeche);     /* Karte/Panel    #FFFFFF */
  --panel2:  var(--k-subtil);      /* Zweitflaeche */
  --hover:   var(--k-subtil);      /* Hover-Flaeche  #EDF0F3 (war #f0f0ef) */
  --border:  var(--k-linie);       /* Trenner        #DFE4E9 (war #e5e3e0, warm) */
  --line:    var(--k-linie);
  --text:    var(--k-text);        /* Fliesstext     #141A20 (war #201f1e) */
  --text2:   var(--k-text-2);      /* Sekundaertext  #5A6672 (war #605e5c) */
  --text3:   var(--k-text-3);      /* Tertiaertext   #3A4552 (dunkel #C6D1DB) */

  /* Rail (Kap. 3.1) — immer dunkel, in beiden Modi */
  --rail:        var(--k-rail);        /* #1B2836 (war #243a5e, marineblau) */
  --rail-hover:  var(--k-rail-hover);
  --rail-fg:     var(--k-rail-icon);
  --badge-unread: var(--k-rail-badge);

  /* Primaerknopf, Link, Akzent (Kap. 3.1, 4.3)
     --k-brand-800 ist die Stufe, die das Manual fuer den Primaerknopf fuehrt.
     Sie traegt weisse Schrift mit 6,66:1 (der alte Wert #0b6bcb lag bei 5,28:1). */
  --accent:       var(--k-brand-800);
  --accent-dark:  var(--k-brand-900);   /* gedrueckt */
  --accent-light: var(--k-brand-100);   /* gewaehlt/Tint */

  /* Status (Kap. 4.4) — immer mit Symbol UND Text, nie Farbe allein */
  --ok:        var(--k-ok);
  --ok-bg:     var(--k-ok-bg);
  --warn:      var(--k-warn);
  --warn-bg:   var(--k-warn-bg);
  --danger:    var(--k-danger);
  --danger-bg: var(--k-danger-bg);
  --danger-dark: var(--k-danger);

  /* Modulfarben (Kap. 4.5) — Herkunftssignal, kein Dekor */
  --mail:    var(--k-mod-mail);
  --cal:     var(--k-mod-cal);
  --contact: var(--k-mod-kontakt);
  --file:    var(--k-mod-datei);
  --wiki:    var(--k-mod-akten);
  --git:     var(--k-mod-git);
  --todo:    var(--k-mod-todo);
  --tow:     var(--k-mod-ticket);

  /* Radius (Kap. 6.3) */
  --radius:      var(--k-r-m);     /* Karte/Panel/Menue  10 px (war 10 px) */
  --radius-lg:   var(--k-r-l);     /* Fenster/Modal      12 px (war 14 px) */
  --radius-pill: var(--k-r-pille);

  /* Schatten (Kap. 6.4 — zwei Stufen, mehr nie).
     Das Produkt fuehrt drei Schatten; die zwei Token sind jetzt die Quelle,
     --shadow-sm bleibt als kleine Stufe erhalten (siehe unten). */
  --shadow:    var(--k-sch-2);     /* Modal/Popover/Menue */
  --shadow-sm: var(--k-sch-1);     /* Karte ueber Grund */

  /* Bewegung (Kap. 6.5) — nie ueber 200 ms, kein Overshoot */
  --tr:         var(--k-d-normal) var(--k-kurve);
  --dur-1:      var(--k-d-schnell);
  --dur-2:      var(--k-d-quer);
  --dur-3:      var(--k-d-normal);
  --ease-out:   var(--k-kurve);

  /* Schrift (Kap. 5.1): Public Sans liegt seit Phase 0 lokal (dashboard/schrift/
     public-sans.css) und steht in styles.css an erster Stelle — das war der Fehler
     aus Kap. 5.2 (die Google-Fonts-Zeile lieferte HTTP 400). Die Kette selbst wird
     NICHT ueber eine Variable gefuehrt; sie steht dort fest und wird unten in
     Abschnitt 3 berichtigt (Inter faellt raus, Manual Kap. 5.1 verbietet es).
     Dokumenten- und Datenschrift sind neue Rollen ohne Bestand — sie sind
     angelegt, aber im Produkt noch nicht angewandt (Phase 4/6). */
  --font-doc:  var(--k-font-doc);
  --font-data: var(--k-font-data);

  /* Fokus (Kap. 6.6) */
  --fokus: var(--k-fokus);
}

/* ---------------------------------------------------------------------------
   2b) DIE DUNKLEN THEMES — nachgezogen am 01.10.2026
   ---------------------------------------------------------------------------
   WARUM DIESER BLOCK FEHLTE UND WARUM DAS EIN FEHLER WAR

   Der Kommentar oben sagt: "`dark` bleibt unberuehrt: die Token-Datei bringt
   einen eigenen Dunkelmodus mit, der kommt als eigener Schritt." Der Satz ist
   nachweislich falsch geworden, sobald Phase 4 (ribbon-v4.css) live ging:

   `ribbon-v4.css` malt mit den ROHEN Token (--k-flaeche, --k-linie,
   --k-subtil, --k-text…). Die Bindung an die Produktrollen (--card, --border,
   --text…) hilft dort NICHT — die Ribbon liest die --k-Werte direkt. Und die
   --k-Werte standen nur EINMAL, als helle Fassung, in `:root`. Ergebnis, live
   gemessen (01.10.2026) in allen fuenf Themes:

       Registerkartenleiste  bg = rgb(255,255,255)   in JEDEM Theme
       App-Grund im Theme dark = #0b0f1a

   Der Nutzer-Befund: "wenn ich themes switche, dann bleibt das neue ribbon
   immer in weiss. das ist inkonsistent." Er hat recht — und es ist mehr als
   inkonsistent: mit der weissen Flaeche stand die dunkle Textfarbe des Themes
   auf Weiss und die Befehlsbeschriftungen (`.mc-btn-l`, gesteuert von
   ui-2026.css:540 ueber --text2) erreichten im Theme dark nur

       2,62:1   (Soll 4,5:1 — Manual Kap. 4.6)

   "dark bleibt unberuehrt" war also nie erfuellt: die Ribbon hat den
   Dunkelmodus sehr wohl veraendert, nur falsch.

   WARUM DIE WERTE HIER STEHEN UND NICHT AUS DER TOKEN-DATEI KOPIERT SIND

   Die Token-Datei fuehrt unter `html[data-theme="dark"]` ebenfalls einen
   Dunkelmodus (#0E1318 / #161D24 / #2A343E…). Der ist NICHT uebernommen:
   das Produkt hat einen ausgelieferten, eigenstaendigen Dunkelmodus
   (ui-2026.css, "Issue #23 — DARK-MODE-ELEVATION": --e0 #0b0f1a, --e2
   #1b2742). Zwei Dunkelpaletten nebeneinander haetten die Ribbon als
   dritte Flaeche neben die Karten gestellt — genau die Inkonsistenz, die
   behoben werden soll. Deshalb liest die Ribbon im Dunkeln DIESELBEN Werte,
   die das Produkt dort schon fuehrt:

       --k-flaeche  = #1b2742   = --e2 / --card   (Ribbon sitzt wie eine Karte)
       --k-subtil   = rgba(91,140,255,.10)        (Hover-Tonung des Dunkelmodus)
       --k-linie    = rgba(255,255,255,.09)       (= --border dunkel, neutral)
       --k-text     = #e8edf9                     (= --text)
       --k-text-2   = #8fa0c8                     (= --text2)
       --k-text-3   = #C6D1DB                     (Token-Datei, Flaechenschrift)
       --k-sch-1    = Schatten des Dunkelmodus    (= --shadow-sm)

   Die Markenstufen folgen der Token-Datei (dort steht fuer `dark`:
   --k-brand-600 #5CA8DC, --k-brand-800 #6CB8F0) — auf dunklem Grund ist eine
   HELLE Marke richtig, fuer Text/Icon ebenso wie fuer Akzentlinien.

   DIE FOLGE, DIE MAN KENNEN MUSS (und die deshalb mitgeaendert wurde):
   --k-brand-800 ist im Dunkeln hell. Der Primaerknopf in ribbon-v4.css
   trug seine Schrift FEST auf #FFFFFF — hell auf hell waere 1,6:1 gewesen.
   Die Schrift liest jetzt `var(--k-flaeche)`: helles Theme -> Weiss auf
   #115EA3 (6,66:1), dunkles Theme -> #1b2742 auf #6CB8F0 (6,89:1). Eine
   Regel, beide Faelle, kein zweiter Theme-Block in der Ribbon-Datei.

   `kontrast` wird ebenfalls nachgezogen, aber nur in dem, was dieses Theme
   selbst fordert (#000000 als Kante, keine Schatten) — das ERHOEHT den
   Kontrast und naehrt sich den Markenwerten NICHT an. Die Begruendung oben
   ("kontrast bleibt unberuehrt") bleibt insoweit gueltig: die Markenfarben
   werden hier nicht aufgezwungen.
   --------------------------------------------------------------------------- */
html[data-theme="dark"]{
  /* Flaechen und Text — Werte des ausgelieferten Dunkelmodus (s. Begruendung) */
  --k-grund:   #0b0f1a;                  /* = --e0 */
  --k-flaeche: #1b2742;                  /* = --e2 / --card */
  --k-subtil:  rgba(91,140,255,.10);
  --k-linie:   rgba(255,255,255,.09);
  --k-kante:   #6A7989;                  /* >= 3:1 auf #1b2742 / #0b0f1a */
  --k-text:    #e8edf9;
  --k-text-2:  #8fa0c8;
  --k-text-3:  #C6D1DB;

  /* Auf dunklem Grund muss der markierte Befehl HELLER gemischt werden als auf
     Weiss: dieselbe Modulfarbe, weniger Anteil, mehr Textfarbe (die hier hell
     ist). Gemessen schlechtester Fall ueber alle zwoelf Modulfarben: 5,22:1. */
  --k-misch-text:   45%;
  --k-praem-auf:    45%;   /* Primaerflaeche: Modulfarbe heller gezogen */

  /* Marke auf dunklem Grund (Token-Datei dunkel) */
  --k-brand-100: rgba(108,184,240,.16);  /* Tint für gewählte Chips */
  --k-brand-400: #5CA8DC;
  --k-brand-600: #5CA8DC;
  --k-brand-800: #6CB8F0;
  --k-brand-900: #4E9FD8;                /* gedrueckt */

  /* Status auf dunklem Grund (Token-Datei dunkel) */
  --k-ok:     #8FD5A8;
  --k-warn:   #E8C27A;
  --k-danger: #F0A5A2;
  --k-zirbe:  #F2A66E;

  /* Tiefe entsteht im Dunkelmodus durch Aufhellung, nicht durch Wurfschatten —
     derselbe Schatten wie --shadow-sm (ui-2026.css, Issue #23). */
  --k-sch-1: 0 1px 2px rgba(0,0,0,.45), 0 3px 12px rgba(0,0,0,.4);
  --k-fokus: 0 0 0 2px var(--k-flaeche), 0 0 0 4px var(--k-brand-400);
}

/* Barrierefreiheits-Theme: nur die eigenen Werte nachziehen (#000000-Kante,
   keine Schatten). Markenfarben bleiben, wie sie sind. */
html[data-theme="kontrast"]{
  --k-flaeche: #ffffff;
  --k-subtil:  #f2f2f2;
  --k-linie:   #000000;
  --k-kante:   #000000;
  --k-text:    #000000;
  --k-text-2:  #1a1a1a;
  --k-text-3:  #000000;
  --k-sch-1:   none;
  --k-fokus: 0 0 0 2px #ffffff, 0 0 0 4px #0000cc;
  /* Markierte Befehle: volle Modulfarbe, ohne Mischung — dieses Theme soll
     maximale Trennung liefern. */
  --k-misch-text:   100%;
  --k-misch-flaeche:0%;
  --k-praem-auf:    100%;
}

/* ---------------------------------------------------------------------------
   3) DIE BASISREGELN DER TOKEN-DATEI, die sich ohne Markup anwenden lassen
   --------------------------------------------------------------------------- */

/* Fokus-Doppelring (Kap. 6.6, verbindlich): 2 px Grundfarbe innen, 2 px
   Markenblau aussen — auf jeder Flaeche sichtbar, auch auf blauem Knopf.
   Nur :focus-visible, nie :focus. Das Produkt hatte Fokusregeln je Komponente;
   diese Regel ist die gemeinsame Unterkante dafuer. */
:where(button,input,select,textarea,a,[tabindex]):focus-visible{
  outline:none;
  box-shadow:var(--k-fokus);
  border-radius:var(--k-r-xs);
}

/* Eingabekanten: das Manual fuehrt --k-kante als eigenen Wert (>= 3:1 auf allen
   hellen Flaechen — nachgerechnet 3,51:1 auf Weiss, 3,24:1 auf App-Grund).
   Der Trenner --border bleibt dekorativ und wird NICHT dafuer benutzt. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,textarea{
  border-color:var(--k-kante);
}

/* Schriftkette (Kap. 5.1, verbindlich). Der Token lautet:
     "Public Sans", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif
   Das Produkt fuehrte an zweiter Stelle 'Inter' — im Manual ausdruecklich
   ausgeschlossen ("nicht Inter"). Inter wird hier nicht geladen, konnte also nie
   greifen; die Zeile war eine Absichtserklaerung. Sie ist jetzt die Token-Kette:
   faellt Public Sans aus, kommt Source Sans 3, dann die Systemschrift — nicht Inter. */
body{
  font:400 15px/1.5 var(--k-font-ui);
}
/* Versalien-Beschriftungen abschaffen (Kap. 5.3, verbindlich: "ANTWORTEN" wird
   "Antworten" — Grossschreibung zerstoert die Wort-Silhouette).
   WARUM DIE SELEKTOREN HIER SO STEHEN: die Regel steht im Produkt an 78 Stellen ueber
   9 CSS-Dateien (styles, ui-2026 und die Modulblaetter), jeweils mit gleicher Spezifitaet.
   Diese Datei wird als letzte geladen — dieselben Selektoren gewinnen daher allein durch die
   Reihenfolge, ohne ein "!important" und ohne dass eine Quelle angefasst wird.
   Die Liste ist aus den Dateien ERZEUGT, nicht abgetippt (Befehl "versalien-erzeugen" in
   scripts/k360_produkt_design.sh). Zurueckgesetzt werden nur text-transform und
   letter-spacing; Groesse, Gewicht und Farbe der Beschriftungen bleiben unveraendert. */
#sec-admin table.adm-tab th,#sec-admin .adm-admin,.ak-lbl,.ak-seg-k,
.ak-paar-k,.ak-feld-k,.git-side-h,.git-d-sh,
.git-grp-h,.cx-lbl,.cx-neu,.no-side-h,
.sp-head,.ds-fhead,.chat-side-h,.mm-title,
.bell-item .bt-tag,.announce .t,.feed-item .tag,.feed-gap,
.cs-anz,.ag-day,.mt-group .mt-head,.mail-detail .attach-h,
.rc-lbl,.attach-h,.ctx-sec,.re-menu-sec,
.month-dow,.cal-mini-grid .cm-dow,.ovl-konto,.cal-tgrid .tg-day .tg-dn,
.cal-month .cm-head .cm-dow,.con-group-h,.nc-type-badge,.evt-dlbl,
.app-only-tag,.evt-att-tag,.evt-qlbl,.file-row.file-head,
.fc-type,.ft-title,.ft-q-t,.fdp-vhead,
.mc-sug-h,.ai-sugg-h,.plan-item .pl-q,.fd-item .fd-tag,
.act-item .ac-subj .ac-tag,.con-badge,.msgr-gruppe,.ep-kopf,
.cml-titel,.git-aut-av,.teilen-t,.file-table .fc-type,
.mg-h,.td-side-h,.td-d-sh,.td-lbl,
.rf-h,.hero-date,.hn-lbl,.mc-grp-lbl,
.meta .when .rc-lbl,.cal-win-sec-h,.fm-sec-h,.cal-ovl-it .ovl-ro,
.cal-acc-state .cal-acc-badge,.cal-ovl-h,.cal-tgrid .tg-allday-gutter,.rm-h,
.ag-monat-kopf span,#sec-admin .idx-gg-l,.header .ud-mandant-h,
.ai-plan-h,.hb-t{text-transform:none;letter-spacing:0}

/* Bewegung ausschalten, wenn das System es verlangt (Kap. 6.5, Pflicht) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}