/* Das Fundament aller Oberflächen der Plattform.
 *
 * WOZU ES DIESE DATEI GIBT
 * Sie wird von JEDER Seite jeder Instanz als erstes Stylesheet geladen. Neue
 * Farben, Radien, Abstände und Schatten kommen hierher, nicht in eine
 * Modul- oder Seitendatei. Ein Modul darf Tokens ÜBERSCHREIBEN, aber keinen
 * eigenen Farbwert erfinden, den es hier schon gibt.
 *
 * Herkunft: LKChat/frontend/css/token.css, dort entstanden am 2026-08-04 aus
 * rund 1.040 harten Farbwerten, 196 Hex-Tönen und drei konkurrierenden
 * Primärfarben. Die Schrift- und Abstandsskala kam am 2026-08-10 dazu. Der
 * Bestand ist die Referenz, diese Datei ist seine allgemeine Fassung.
 *
 * WAS EINE INSTANZ SETZT, UND WAS NICHT
 * Eine Instanz setzt VIER Werte in ihrer eigenen Themedatei, mehr nicht:
 * --lk-primaer, --lk-primaer-rgb und deren zwei Gegenstücke für den
 * Dunkelmodus. Alle Abstufungen entstehen daraus per color-mix. Vorher stand
 * die Leitfarbe achtzehnmal fest in dieser Datei, und eine zweite Instanz
 * hätte achtzehn Werte treffen müssen.
 *
 * Was man ohne dieses Wissen falsch macht: eine abgeleitete Farbe in der
 * Themedatei hart setzen. Sie fällt dann beim nächsten Wechsel der
 * Primärfarbe aus der Reihe, und niemand sucht sie dort.
 *
 * EINE Ausnahme, und sie ist bewusst: eine Instanz, die aus einem Bestand
 * kommt, darf ihre über Jahre gewählten Töne festhalten. Die Ableitung ist
 * der Standard für neue Instanzen, keine Pflicht für alte - eine
 * Farbverschiebung durch die ganze Anwendung ist kein Nebeneffekt, den man
 * einer laufenden Instanz zumutet.
 *
 * Die Namen mit "gruen" sind historisch und bleiben: sie umzubenennen würde
 * jede der 13.000 CSS-Zeilen des Bestands anfassen. --lk-akzent zeigt auf
 * denselben Wert und ist der Name für neue Module.
 */

:root {
    /* ---------- Leitfarbe ----------
       Das hier sind die einzigen zwei Werte, die eine Instanz überschreibt.
       Alles Weitere wird abgeleitet. Der Standard ist ein gedecktes Blau
       und gehört bewusst NIEMANDEM.

       Hier stand die Leitfarbe der Instanz, die dem Paket als Vorlage
       diente. Eine frische Installation trug damit die Hausfarbe einer
       fremden Organisation, ohne dass jemand sie ausgewählt hätte.

       --lk-primaer-rgb muss dieselbe Farbe als Kanäle nennen: color-mix
       kann keine Kanalliste erzeugen, und ohne sie stünden die zwölf
       Alpha-Varianten wieder einzeln im Code. Wer --lk-primaer ändert und
       die Kanäle vergisst, bekommt Ränder in der alten Farbe. */
    --lk-primaer: #1E3F66;
    --lk-primaer-rgb: 30, 63, 102;

    /* Abgeleitet - nicht in einer Themedatei überschreiben. */
    --lk-gruen: var(--lk-primaer);
    --lk-akzent: var(--lk-primaer);    /* der Name für neue Module */
    /* Die Anteile sind gegen den Bestand nachgerechnet, nicht geschätzt:
       sie wurden gegen die von Hand gewählten Töne des Bestands
       gerechnet und treffen sie auf wenige Punkte je Kanal. 12 Prozent lagen bei "hell" sichtbar daneben. */
    --lk-gruen-dunkel: color-mix(in srgb, var(--lk-primaer), black 23%);
    --lk-gruen-tief: color-mix(in srgb, var(--lk-primaer), black 37%);
    --lk-gruen-hell: color-mix(in srgb, var(--lk-primaer) 10%, var(--lk-mischgrund));
    --lk-gruen-blass: color-mix(in srgb, var(--lk-primaer) 5%, var(--lk-mischgrund));
    --lk-gruen-rgb: var(--lk-primaer-rgb);

    /* ---------- Neutrale ---------- */
    /* Gemessene Kontraste auf weißer Fläche (WCAG AA verlangt 4,5:1 für
       Fließtext). Wer diese Werte ändert, misst nach - der erste Entwurf
       hatte #607d8b und lag mit 4,37:1 knapp darunter, also durchgefallen. */
    --lk-text: #1c2226;                /* Fließtext            16,1:1 */
    --lk-text-leise: #546e7a;          /* Nebeninfo, Zeitstempel 5,4:1 */
    /* NUR für Platzhalter, deaktivierte Bedienelemente und leere Zustände -
       2,6:1 reicht für nichts, das man wirklich lesen muss. */
    --lk-text-schwach: #90a4ae;
    /* Der leiseste Ton, der noch als Text gilt: KI-Hinweis unter der
       Eingabeleiste und Platzhalter in Feldern. Beides wird gelesen und
       braucht 4,5:1. Gemessen 4,6:1 auf --lk-grund, 5,1:1 auf Weiß. */
    --lk-text-gedaempft: #58727e;
    --lk-linie: #d8dcdd;              /* sichtbare Trennlinie */
    --lk-linie-fein: rgba(28, 34, 38, .09);
    --lk-flaeche: #ffffff;             /* Karte, Dialog, Composer */
    --lk-flaeche-leise: #f5f6f5;       /* eingesenkter Bereich, Chip */
    --lk-grund: #f7f3ec;               /* Seitenhintergrund, warm */
    --lk-grund-satt: #e7e4dd;          /* Hintergrund mit mehr Kontrast */
    /* Grund, gegen den Farbtönungen aufgehellt werden (color-mix). Im
       Dunkelmodus MUSS das die dunkle Fläche sein - eine Tönung, die fest
       gegen Weiß mischt, wird dort zur weißen Fläche mit hellem Text darauf.
       Genau das passierte beim Überfahren einer Listenzeile: der Eintrag
       wurde weiß und der Text unlesbar. */
    --lk-mischgrund: #ffffff;
    /* Schrift und Zeichen AUF einer farbigen Fläche (grüner Knopf, rotes
       Abzeichen). Nicht mit --lk-flaeche verwechseln: das ist die Fläche
       selbst, das hier ist der Kontrast darauf. */
    --lk-auf-farbe: #ffffff;
    --lk-auf-farbe-leise: #eaf3ea;     /* Nebentext auf farbigem Grund */

    /* ---------- Zustände ---------- */
    /* Je Zustand GENAU ein Vordergrund und eine Fläche. Vorher: sechs Rots,
       achtzehn Orangetöne, fünf Blaus - ohne Unterschied in der Bedeutung. */
    --lk-fehler: #b3261e;
    --lk-fehler-dunkel: #8f1e18;       /* Hover auf einem roten Knopf */
    --lk-fehler-rgb: 179, 38, 30;      /* für Ränder und Schleier mit Alpha */
    --lk-fehler-flaeche: #fdf1ee;
    --lk-warnung: #b45309;
    --lk-warnung-flaeche: #fff8e1;
    --lk-erfolg: #00612F;
    /* Als Kanäle, für Ränder und Schleier mit Alpha. `color-mix` kann
       keine Kanalliste erzeugen; ohne dieses Token stand in der Ampel
       eine fest eingetragene Leitfarbe, die kein Thema erreichte. */
    --lk-erfolg-rgb: 0, 97, 47;
    --lk-erfolg-flaeche: #e8f1ec;
    --lk-info: #1565c0;
    --lk-info-flaeche: #e3f2fd;
    /* Der dunklere Partner, wie `--lk-fehler-dunkel`: für den Hover eines
       blauen Knopfes und für das zweite Ende eines Verlaufs. Ohne ihn
       stand dort `color-mix(…, black 14%)`, und Schwarz beizumischen ist
       im Dunkelmodus die falsche Richtung - dort muss aufgehellt werden,
       genau wie es die Leitfarbe weiter oben vormacht. */
    --lk-info-dunkel: #10498f;
    /* Alle vier Zustandsfarben liegen auf Weiß zwischen 5,0:1 und 6,5:1. */

    /* Für Ränder und Schleier mit Alpha, wo die deckende Farbe zu kräftig
       wäre - ohne diese Kanäle bleiben harte rgba()-Werte im Code stehen. */
    --lk-info-rgb: 21, 101, 192;
    --lk-warnung-rgb: 180, 83, 9;

    /* ---------- Akzente ----------
       Für Kennzeichnungen, die KEIN Zustand sind: Modus-Abzeichen, Ablauf-
       Knoten, Entwurfs-Marken. Vorher standen dafür ein Dutzend harte Töne
       (#7b1fa2, #00838f, #ffd54f, #ad1457 …) quer über app.css - im
       Dunkelmodus blieben sie hell und trugen keinen Text mehr. */
    --lk-violett: #7b1fa2;
    --lk-violett-flaeche: #f3e5f5;
    --lk-cyan: #00838f;
    --lk-cyan-flaeche: #f1fafb;
    --lk-bernstein: #c47f00;
    --lk-bernstein-flaeche: #fffdf3;
    --lk-rosa: #ad1457;
    --lk-rosa-flaeche: #fce4ec;

    /* Schleier hinter einem Overlay und die Fläche eines Log-Fensters.
       Beide waren als rohe rgba()/Hex-Werte über die Dateien verteilt. */
    --lk-schleier: rgba(20, 30, 40, .5);
    /* Wie stark der Grund hinter einem Schleier verschwimmt. Ein Schleier
       soll zeigen, WORÜBER er liegt. Eine deckende Fläche nimmt dem
       Menschen jeden Anhaltspunkt, wo er gerade ist. */
    --lk-unschaerfe: 6px;
    --lk-code-grund: #1e1e1e;
    --lk-code-text: #d4d4d4;

    /* ---------- Form ---------- */
    /* Vorher zehn verschiedene Radien und neun Knopfhöhen. Drei Stufen
       reichen: klein für Felder und Chips, mittel für Karten, rund für
       Pillen und Icon-Knöpfe. */
    --lk-radius-klein: 9px;
    --lk-radius: 14px;
    --lk-radius-rund: 999px;

    /* Bedienhöhen: eine für den Regelfall, eine für gedrängte Leisten.
       Alles unter 36 Pixel ist auf einem Telefon nicht sicher zu treffen. */
    --lk-hoehe: 40px;
    --lk-hoehe-klein: 34px;
    --lk-tastziel: 44px;

    /* Symbolgrößen und Lesebreiten der Startseite, Punkte der Einführung. */
    --lk-symbol: 20px;
    --lk-symbol-feld: 36px;
    --lk-lesebreite: 640px;
    --lk-lesebreite-weit: 820px;
    --lk-kachel-schmal: 200px;
    --lk-punkt: 7px;
    --lk-punkt-aktiv: 18px;

    --lk-schatten-1: 0 1px 2px rgba(28, 34, 38, .06);
    --lk-schatten-2: 0 1px 2px rgba(28, 34, 38, .05), 0 8px 24px -18px rgba(28, 34, 38, .5);
    --lk-schatten-3: 0 12px 40px rgba(0, 0, 0, .3);

    /* ---------- Bewegung ---------- */
    /* Eine Kurve für alles, zwei Dauern. Animiert werden nur transform,
       opacity, clip-path und filter. */
    --lk-kurve: cubic-bezier(.16, 1, .3, 1);
    --lk-dauer: 180ms;
    --lk-dauer-lang: 300ms;

    /* ---------- Fokus ---------- */
    /* EINE Technik. Vorher standen drei nebeneinander: box-shadow-Ring,
       outline mit Versatz, und "outline: none" plus eingefärbter Rand - das
       letzte macht die Tastaturbedienung stellenweise unsichtbar. */
    --lk-fokus: 2px solid var(--lk-gruen);
    --lk-fokus-abstand: 2px;

    /* ---------- Schrift ---------- */
    --lk-schrift: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --lk-schrift-fest: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Überschriften. Steht bewusst als eigenes Token da, obwohl es hier
       denselben Wert trägt: ein Thema, das Fließtext und Überschrift trennen
       will - Serife im Text, Grotesk im Titel -, kann das sonst gar nicht
       ausdrücken und muss eigene Selektoren schreiben. Damit hinge es an der
       Markup-Ordnung des Pakets, und genau das soll der Token-Vertrag
       verhindern. Der gleiche Vorgabewert heißt: für bestehende Instanzen
       ändert sich nichts. */
    --lk-schrift-titel: var(--lk-schrift);

    /* Lesetext: längere Absätze, die man am Stück liest (Rechtstexte,
       Einleitungen einer öffentlichen Seite). `--lk-schrift` ist die Schrift
       der Bedienung, und die erben Knöpfe, Felder und Listen. Ein Thema mit
       Serife im Lesetext setzt sie deshalb HIER und nicht in `--lk-schrift`,
       sonst stehen alle Knöpfe und Formulare in Georgia und sehen aus wie
       ungestaltetes HTML. Gleicher Vorgabewert: für bestehende Instanzen
       ändert sich nichts. */
    --lk-schrift-lese: var(--lk-schrift);

    /* ---------- Schriftskala ----------
       Gezählt am 2026-08-10: 194 verschiedene Schriftgrößen im Bestand, die
       meisten unterscheiden sich um ein halbes Pixel. Sieben Stufen decken
       alles ab. Wer eine achte braucht, braucht sie nicht.
       Alles unter --lk-s-mini ist nur für Randnotizen, nie für Fließtext. */
    --lk-s-mini: 11px;      /* Zeitstempel, Zähler, Randnotiz */
    --lk-s-klein: 12.5px;   /* Nebentext, Listenmeta, Knopf in Leisten */
    --lk-s-text: 14px;      /* Fließtext, Bedienelemente, Standardknopf */
    --lk-s-gross: 15.5px;   /* Eingabefelder, hervorgehobener Fließtext */
    --lk-s-titel: 18px;     /* Kartentitel, Dialogtitel */
    --lk-s-kopf: 22px;      /* Seitentitel */
    --lk-s-schau: 28px;     /* Kennzahl, Leerzustand */

    /* Etiketten: die Großbuchstaben-Überschrift über einer Gruppe.
       Drei Werte an einer Stelle statt in jeder Regel neu erfunden. */
    --lk-etikett-groesse: 11px;
    --lk-etikett-abstand: .1em;
    --lk-etikett-fett: 800;

    /* ---------- Abstandsskala ----------
       Vorher 1.508 harte Pixelwerte. Sechser-Raster, weil die Bedienhöhen
       (34/40/44) darauf aufgehen und 6 sich halbieren lässt. */
    --lk-a-1: 3px;
    --lk-a-2: 6px;
    --lk-a-3: 9px;
    --lk-a-4: 12px;
    --lk-a-5: 16px;
    --lk-a-6: 22px;
    --lk-a-7: 30px;
    --lk-a-8: 42px;

    /* Innenabstände, die immer zusammen auftreten - erspart das Paar-Raten */
    --lk-p-karte: var(--lk-a-4) var(--lk-a-5);
    --lk-p-leiste: var(--lk-a-3) var(--lk-a-5);
    --lk-p-knopf: var(--lk-a-2) var(--lk-a-4);

    /* ---------- Zeilenhöhen ---------- */
    --lk-zeile-eng: 1.25;   /* Überschriften, Knopfbeschriftung */
    --lk-zeile: 1.55;       /* Fließtext */
    --lk-zeile-weit: 1.7;   /* Langer Lesetext, Antwortkarte */

    /* ---------- Farben der Dateitypen ----------
       Eine Datei sieht überall gleich aus, und ihre Farbe steht genau hier.
       Sie gehört dem TYP, nicht der Fläche, in der die Datei gerade liegt:
       ein PDF ist rot, ob es in einer Antwort steht, in der Ablage oder als
       Anhang am Eingabefeld. Wer die Farbe dort setzt, wo gezeichnet wird,
       hat beim zweiten Ort schon eine andere.
       Welche Endung zu welchem Typ gehört, sagt `js/dateisymbole.js`. */
    --lk-datei-pdf: #c0392b;
    --lk-datei-word: #2b579a;
    --lk-datei-excel: #1e7145;
    --lk-datei-ppt: #c55a11;
    --lk-datei-tabelle: #0e7490;
    --lk-datei-bild: #7c3aed;
    --lk-datei-grafik: #a21caf;
    --lk-datei-ton: #be185d;
    --lk-datei-video: #4338ca;
    --lk-datei-archiv: #92400e;
    --lk-datei-code: #334155;
    --lk-datei-daten: #0f766e;
    --lk-datei-seite: #0369a1;
    --lk-datei-text: #475569;
    --lk-datei-protokoll: #57534e;
    --lk-datei-mail: #b45309;
    --lk-datei-termin: #4d7c0f;
    --lk-datei-standard: #64748b;
}

/* ====================================================================
   DUNKELMODUS
   ====================================================================
   Möglich geworden durch die Schrift- und Abstandsskala oben: solange
   1.508 harte Pixelwerte und 194 Schriftgrößen im Bestand standen, war
   nicht die Farbe das Hindernis, sondern die fehlende Ordnung.

   Umgeschaltet wird über `data-theme` am <html>. Drei Zustände:
   nichts gesetzt = der Wunsch des Systems, "hell" und "dunkel" = die
   ausdrückliche Wahl des Nutzers, die das System sticht.

   Grundsatz: NUR Farben werden hier neu belegt. Radien, Abstände,
   Schriftgrößen und Bewegung bleiben, wie sie sind - ein Dunkelmodus,
   der auch das Layout ändert, ist ein zweites Design.

   Die Leitfarbe wird angehoben: eine kräftige Farbe auf dunklem Grund liegt bei
   2,1:1 und ist als Schrift unlesbar. #6C9BD2 trägt auf --lk-grund
   6,3:1 und bleibt erkennbar dasselbe Grün. */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Auf dunklem Grund liegt eine kräftige Leitfarbe bei etwa 2:1 und
           ist als Schrift unlesbar. Deshalb eine eigene, hellere Angabe -
           gegen den Bestand nachgerechnet, nicht geschätzt. */
        --lk-primaer: #6C9BD2;
        --lk-primaer-rgb: 108, 155, 210;
        --lk-gruen-dunkel: color-mix(in srgb, var(--lk-primaer), white 18%);
        --lk-gruen-tief: color-mix(in srgb, var(--lk-primaer), white 34%);
        --lk-gruen-hell: color-mix(in srgb, var(--lk-primaer) 16%, var(--lk-mischgrund));
        --lk-gruen-blass: color-mix(in srgb, var(--lk-primaer) 9%, var(--lk-mischgrund));

        --lk-text: #e8ece9;
        --lk-text-leise: #a3b2ab;
        --lk-text-schwach: #6d7d76;
        --lk-text-gedaempft: #7f8f88;  /* 4,8:1 auf --lk-flaeche, 5,4:1 auf --lk-grund */

        /* Dieselben Farben, aufgehellt: die satten Töne von oben tragen
           weisse Schrift, verschwinden aber auf dunklem Grund. */
        --lk-datei-pdf: #e5695c;
        --lk-datei-word: #6f9ede;
        --lk-datei-excel: #4fb47c;
        --lk-datei-ppt: #e8914f;
        --lk-datei-tabelle: #4fb8d4;
        --lk-datei-bild: #a883f5;
        --lk-datei-grafik: #d066de;
        --lk-datei-ton: #ee6499;
        --lk-datei-video: #8481ee;
        --lk-datei-archiv: #cd8f4d;
        --lk-datei-code: #8ea3bd;
        --lk-datei-daten: #4fbcae;
        --lk-datei-seite: #4fa8dd;
        --lk-datei-text: #9aabc0;
        --lk-datei-protokoll: #a8a29a;
        --lk-datei-mail: #e0a052;
        --lk-datei-termin: #95c14f;
        --lk-datei-standard: #a4b2c4;
        --lk-linie: #2b3833;
        --lk-linie-fein: rgba(232, 236, 233, .10);
        --lk-flaeche: #182220;
        --lk-flaeche-leise: #131b19;
        --lk-grund: #0e1614;
        --lk-grund-satt: #1c2624;
        --lk-auf-farbe: #0b1210;
        --lk-auf-farbe-leise: #1c2b24;
        --lk-mischgrund: #182220;

        --lk-fehler: #f28b82;
        --lk-fehler-dunkel: #f6a49d;
        --lk-fehler-rgb: 242, 139, 130;
        --lk-fehler-flaeche: #2b1a19;
        --lk-warnung: #e0a458;
        --lk-warnung-flaeche: #2b2317;
        --lk-warnung-rgb: 224, 164, 88;
        --lk-erfolg: #4FC088;
    --lk-erfolg-rgb: 79, 192, 136;
        --lk-erfolg-flaeche: #17352a;
        --lk-info: #7fb3f0;
        /* Auf dunklem Grund ist der "dunklere" Partner der HELLERE -
           dieselbe Umkehr wie bei --lk-fehler-dunkel eine Zeile höher. */
        --lk-info-dunkel: #a3caf5;
        --lk-info-flaeche: #16232f;
        --lk-info-rgb: 127, 179, 240;

        /* Akzente im Dunkelmodus: aufgehellter Ton, abgedunkelte Fläche. */
        --lk-violett: #c9a0dc;
        --lk-violett-flaeche: #251a2b;
        --lk-cyan: #6fc7d1;
        --lk-cyan-flaeche: #14262a;
        --lk-bernstein: #e0a458;
        --lk-bernstein-flaeche: #2b2317;
        --lk-rosa: #efa0bd;
        --lk-rosa-flaeche: #2c1a22;

        --lk-schleier: rgba(0, 0, 0, .65);
        --lk-code-grund: #101715;
        --lk-code-text: #cdd7d2;

        /* Schatten tragen auf dunklem Grund nicht - dort trennt die Linie.
           Ein weicher schwarzer Schatten auf Schwarz ist unsichtbar und
           kostet nur Rechenzeit. */
    --lk-schatten-1: 0 1px 2px rgba(0, 0, 0, .45);
        --lk-schatten-2: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -18px rgba(0, 0, 0, .9);
        --lk-schatten-3: 0 12px 40px rgba(0, 0, 0, .6);

        color-scheme: dark;
    }
}

/* Ausdrückliche Wahl sticht das System - in beide Richtungen. Die Werte
   stehen bewusst ein zweites Mal statt in einer geteilten Klasse: eine
   Variablendefinition, die nur in einer Media-Query steht, gilt sonst
   beim Umschalten am Tag nicht. */
:root[data-theme="dark"] {
    --lk-primaer: #6C9BD2;
    --lk-primaer-rgb: 108, 155, 210;
    --lk-gruen-dunkel: color-mix(in srgb, var(--lk-primaer), white 18%);
    --lk-gruen-tief: color-mix(in srgb, var(--lk-primaer), white 34%);
    --lk-gruen-hell: color-mix(in srgb, var(--lk-primaer) 16%, var(--lk-mischgrund));
    --lk-gruen-blass: color-mix(in srgb, var(--lk-primaer) 9%, var(--lk-mischgrund));

    --lk-text: #e8ece9;
    --lk-text-leise: #a3b2ab;
    --lk-text-schwach: #6d7d76;
    --lk-text-gedaempft: #7f8f88;      /* 4,8:1 auf --lk-flaeche, 5,4:1 auf --lk-grund */
    --lk-linie: #2b3833;
    --lk-linie-fein: rgba(232, 236, 233, .10);
    --lk-flaeche: #182220;
    --lk-flaeche-leise: #131b19;
    --lk-grund: #0e1614;
    --lk-grund-satt: #1c2624;
    --lk-auf-farbe: #0b1210;
    --lk-auf-farbe-leise: #1c2b24;
    --lk-mischgrund: #182220;

    --lk-fehler: #f28b82;
    --lk-fehler-dunkel: #f6a49d;
    --lk-fehler-rgb: 242, 139, 130;
    --lk-fehler-flaeche: #2b1a19;
    --lk-warnung: #e0a458;
    --lk-warnung-flaeche: #2b2317;
    --lk-warnung-rgb: 224, 164, 88;
    --lk-erfolg: #4FC088;
    --lk-erfolg-rgb: 79, 192, 136;
    --lk-erfolg-flaeche: #17352a;
    --lk-info: #7fb3f0;
    --lk-info-dunkel: #a3caf5;
    --lk-info-flaeche: #16232f;
    --lk-info-rgb: 127, 179, 240;

    /* Akzente im Dunkelmodus: aufgehellter Ton, abgedunkelte Fläche. */
    --lk-violett: #c9a0dc;
    --lk-violett-flaeche: #251a2b;
    --lk-cyan: #6fc7d1;
    --lk-cyan-flaeche: #14262a;
    --lk-bernstein: #e0a458;
    --lk-bernstein-flaeche: #2b2317;
    --lk-rosa: #efa0bd;
    --lk-rosa-flaeche: #2c1a22;

    --lk-schleier: rgba(0, 0, 0, .65);
    --lk-code-grund: #101715;
    --lk-code-text: #cdd7d2;

    /* Dateifarben, aufgehellt - dieselbe Liste wie im Media-Block darüber.
       Zwei Stellen sind der Preis dafür, dass das Schema der Systemeinstellung
       folgen UND von Hand gesetzt werden kann. Wer eine Farbe ändert, ändert
       beide - sonst stimmt sie in einem der zwei Wege nicht. */
    --lk-datei-pdf: #e5695c;
    --lk-datei-word: #6f9ede;
    --lk-datei-excel: #4fb47c;
    --lk-datei-ppt: #e8914f;
    --lk-datei-tabelle: #4fb8d4;
    --lk-datei-bild: #a883f5;
    --lk-datei-grafik: #d066de;
    --lk-datei-ton: #ee6499;
    --lk-datei-video: #8481ee;
    --lk-datei-archiv: #cd8f4d;
    --lk-datei-code: #8ea3bd;
    --lk-datei-daten: #4fbcae;
    --lk-datei-seite: #4fa8dd;
    --lk-datei-text: #9aabc0;
    --lk-datei-protokoll: #a8a29a;
    --lk-datei-mail: #e0a052;
    --lk-datei-termin: #95c14f;
    --lk-datei-standard: #a4b2c4;

    --lk-schatten-1: 0 1px 2px rgba(0, 0, 0, .45);
    --lk-schatten-2: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -18px rgba(0, 0, 0, .9);
    --lk-schatten-3: 0 12px 40px rgba(0, 0, 0, .6);

    color-scheme: dark;
}

/* ---------- Fenster-Tokens (dialoge.css) ----------
   Die geteilten Fenster (Einstellungen, Wort-Ersetzungen) bringen eigene
   Namen mit. Sie hier zu belegen ist der einzige Ort, an dem es für ALLE
   Seiten gilt - egal ob Vollseite, eingebetteter Bereich oder Werkstatt. */
/* `:root` davor erhöht die Spezifität. Ohne das gewinnt dialoge.css mit
   seinen hellen Werten, weil es NACH token.css geladen wird - gleiche
   Spezifität, spätere Datei. Genau daran blieb der Einstellungen-Dialog im
   Dunkelmodus weiß. So ist die Ladereihenfolge egal. */
:root .lke-vars,
:root .lke-schleier,
.lke-vars,
.lke-schleier {
    --lke-radius: var(--lk-radius);
    --lke-radius-klein: var(--lk-radius-klein);
    --lke-abstand: var(--lk-a-6);
    --lke-abstand-eng: var(--lk-a-3);
    --lke-dauer: var(--lk-dauer);
    --lke-kurve: var(--lk-kurve);
    --lke-linie: var(--lk-linie);
    --lke-flaeche: var(--lk-flaeche);
    --lke-flaeche-2: var(--lk-flaeche-leise);
    --lke-text: var(--lk-text);
    --lke-text-leise: var(--lk-text-leise);
    --lke-akzent: var(--lk-gruen);
    --lke-akzent-ll: var(--lk-gruen-blass);
}

/* Sichtbarer Fokus überall gleich - eine Regel statt zwanzig.
   `:focus-visible` trifft nur die Tastaturbedienung, ein Mausklick löst
   also keinen Rahmen aus. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: var(--lk-fokus);
    outline-offset: var(--lk-fokus-abstand);
}

/* `:where` hat Spezifität null - jede Bereichsregel schlägt das hier, ohne
   dass jemand `!important` braucht. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- Brücke zum Werkstatt-Paket ----------
 *
 * Die Werkstatt (Sprachaufzeichnung, Dokumente, Textwerkstatt) bringt eigene Fenster
 * mit und liest deren Farben aus `--lkp-*`. Setzt der Host diese Variablen
 * nicht, greifen die eingebauten Rückfallwerte, und die sind hell: weiße
 * Fläche, dunkler Text. Im Dunkelmodus stand mitten in der Anwendung ein
 * weißer Dialog mit dunklen Feldern.
 *
 * Die Brücke steht bewusst NUR einmal und nicht je Farbschema: sie zeigt auf
 * die `--lk-*`-Tokens, und die schalten weiter oben schon selbst um. Wer sie
 * verdoppelt, hat beim nächsten Farbwechsel zwei Stellen zu pflegen.
 *
 * Betroffen sind alle Werkstatt-Fenster, nicht nur eines: Mein Profil,
 * Einstellungen, Wort-Ersetzungen. Sie hängen an <body> und damit außerhalb
 * jeder Bereichsklasse, deshalb muss die Brücke auf :root sitzen.
 */
:root {
    --lkp-flaeche: var(--lk-flaeche);
    --lkp-flaeche-2: var(--lk-flaeche-leise);
    --lkp-text: var(--lk-text);
    --lkp-leise: var(--lk-text-leise);
    --lkp-linie: var(--lk-linie);
    --lkp-akzent: var(--lk-gruen);
    --lkp-akzent-d: var(--lk-gruen-dunkel);
    --lkp-akzent-l: var(--lk-gruen-hell);
    --lkp-akzent-ll: var(--lk-gruen-blass);
    /* Zurückhaltende Schaltfläche (Abbrechen): im Hellen ein leiser Grauton,
       im Dunklen die eingesenkte Fläche - beides kommt aus demselben Token. */
    --lkp-still: var(--lk-flaeche-leise);
    --lkp-still-text: var(--lk-text-leise);
    --lkp-still-d: var(--lk-linie);
    --lkp-radius: var(--lk-radius);
    --lkp-radius-klein: var(--lk-radius-klein);
}