/* === token.css === */
/* 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 das Grün der
       Landwirtschaftskammer, weil LKChat die Referenz ist.

       --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: #007E46;
    --lk-primaer-rgb: 0, 126, 70;

    /* 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:
       für #007E46 treffen sie die von Hand gewählten Töne 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;
    --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;
    /* 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);
    --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;

    --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);

    /* ---------- 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 */
}

/* ====================================================================
   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: #007E46 auf dunklem Grund liegt bei
   2,1:1 und ist als Schrift unlesbar. #2FA46B 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 -
           für #007E46 ergibt sie #2FA46B mit 6,3:1 auf --lk-grund. */
        --lk-primaer: #2FA46B;
        --lk-primaer-rgb: 47, 164, 107;
        --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-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-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: #2FA46B;
    --lk-primaer-rgb: 47, 164, 107;
    --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-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-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;

    --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 (Transkription, Medien, 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);
}

/* === bausteine.css === */
/* Gemeinsame Bedienbausteine: Knöpfe und Eingabefelder.
 *
 * WARUM
 * Der Bestand vor dem 2026-08-04: 26 eigenständige Button-Familien mit zehn
 * verschiedenen Radien, neun Höhen und elf Schriftgrößen in zwei Einheiten;
 * 23 Regelblöcke für Eingabefelder mit sechs Radien und DREI unvereinbaren
 * Fokus-Techniken. Mehrere Paare waren Zeile für Zeile identisch und hießen
 * nur anders (.lkw-resume-btn und .ag-resume-btn etwa).
 *
 * WIE DAMIT UMGEHEN
 * Neuer Code nutzt `.lk-knopf` und `.lk-feld`. Bestehende Klassen bleiben, wo
 * sie sind - sie werden nach und nach auf diese Bausteine gezogen, damit kein
 * Markup auf Verdacht umgeschrieben wird. Was hier steht, ist die Zielform.
 *
 * Alle Maße und Farben kommen aus token.css. Hier wird nichts erfunden.
 */

/* ---------- Knopf ---------- */

/* Die Bausteine bringen ihr eigenes Kastenmodell mit, statt sich auf ein
   `* { box-sizing: border-box }` in der Bereichsdatei zu verlassen. Ohne das
   lief das Eingabefeld im Dialog über den rechten Rand hinaus - genau dort
   gibt es keine Bereichsdatei, die es geradebiegt. */
.lk-knopf, .lk-feld { box-sizing: border-box; }

.lk-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--lk-hoehe);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--lk-radius-klein);
    background: transparent;
    color: var(--lk-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    /* Ein Knopf ist manchmal ein <a> (Download, Installation). Ohne diese
       Zeile unterstreicht der Browser ihn wie einen Fließtext-Link. */
    text-decoration: none;
    /* Nur transform und Farbe - kein width, height oder padding. */
    transition: background var(--lk-dauer) var(--lk-kurve),
                border-color var(--lk-dauer) var(--lk-kurve),
                transform 120ms var(--lk-kurve);
}
.lk-knopf svg { width: 18px; height: 18px; flex: 0 0 auto; }
.lk-knopf:active { transform: translateY(1px); }
.lk-knopf:disabled,
.lk-knopf[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* Die eine Handlung, die der Nutzer als Nächstes tun soll. Höchstens eine
   davon je Bildbereich - zwei gleich laute Knöpfe sind keine Führung. */
.lk-knopf.ist-haupt {
    background: var(--lk-gruen);
    color: var(--lk-auf-farbe);
}
.lk-knopf.ist-haupt:hover { background: var(--lk-gruen-dunkel); }

/* Nebenhandlung: sichtbar, aber leiser. */
.lk-knopf.ist-still {
    border-color: var(--lk-linie);
    background: var(--lk-flaeche);
}
.lk-knopf.ist-still:hover { background: var(--lk-flaeche-leise); }

/* Nur Text, kein Rahmen - für Dinge wie "Abbrechen". */
.lk-knopf.ist-leise { color: var(--lk-text-leise); }
.lk-knopf.ist-leise:hover {
    background: var(--lk-flaeche-leise);
    color: var(--lk-text);
}

/* Löschen, Verwerfen, Abbrechen eines Laufs. */
.lk-knopf.ist-gefahr {
    background: var(--lk-fehler);
    color: var(--lk-auf-farbe);
}
.lk-knopf.ist-gefahr:hover { background: var(--lk-fehler-dunkel); }

.lk-knopf.ist-rund { border-radius: var(--lk-radius-rund); }
.lk-knopf.ist-klein {
    min-height: var(--lk-hoehe-klein);
    padding: 0 12px;
    font-size: 13px;
}
.lk-knopf.ist-klein svg { width: 15px; height: 15px; }

/* Nur ein Zeichen, kein Text. Quadratisch, damit die Trefferfläche stimmt -
   vorher gab es sechs solche Knöpfe in fünf Größen. */
/* flex: none ist Pflicht, keine Feinheit: in einer engen Flex-Leiste
   schrumpft der Knopf sonst auf die Breite seines Zeichens. Gemessen bei
   380 Pixeln: 20 statt 40, und damit unter jedem Tastziel. */
.lk-knopf.ist-zeichen {
    width: var(--lk-hoehe);
    min-height: var(--lk-hoehe);
    flex: none;
    padding: 0;
    color: var(--lk-text-leise);
}
.lk-knopf.ist-zeichen:hover {
    background: var(--lk-flaeche-leise);
    color: var(--lk-text);
}
.lk-knopf.ist-zeichen.ist-klein { width: var(--lk-hoehe-klein); }

/* Nebenknopf im Composer - Büroklammer und Mikrofon, ruhig neben dem grünen
   Senden-Knopf. Der Stil hing vorher an der ID `#lkw-mic` in widget.css und war
   damit für keinen zweiten Knopf zu haben; die Büroklammer im Agenten trug
   deshalb eine dritte, eigene Fassung.
   Der Selektor nennt den Composer mit, weil dessen Grundregel
   (`.lkw-input button`, grün und rund) sonst gleich stark wäre und gewinnt.
   Der deaktivierte Zustand steht ausdrücklich da: `.lkw-input button:hover` in
   widget.css ist gleich stark und wird später geladen - ohne diese Regel färbt
   sich ein gesperrter Knopf beim Überfahren grün, als ginge es doch. */
.lkw-input button.lkw-neben,
.lkw-input button.lkw-neben:disabled:hover {
    background: var(--lk-flaeche-leise);
    color: var(--lk-text-leise);
}
.lkw-input button.lkw-neben:hover:not(:disabled) {
    background: var(--lk-linie);
    color: var(--lk-text);
}

/* Auf einer farbigen Fläche (grüne Seitenleiste) dreht sich das Verhältnis
   um: der Knopf ist eine Aufhellung, kein eigener Farbblock. */
.auf-farbe .lk-knopf {
    border-color: color-mix(in srgb, var(--lk-auf-farbe), transparent 75%);
    background: color-mix(in srgb, var(--lk-auf-farbe), transparent 86%);
    color: var(--lk-auf-farbe);
}
.auf-farbe .lk-knopf:hover { background: color-mix(in srgb, var(--lk-auf-farbe), transparent 76%); }

/* ---------- Eingabefeld ---------- */

.lk-feld {
    display: block;
    width: 100%;
    min-height: var(--lk-hoehe);
    padding: 9px 13px;
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-klein);
    background: var(--lk-flaeche);
    color: var(--lk-text);
    font-family: inherit;
    /* 16px auf schmalen Geräten ist kein Geschmack: alles darunter lässt
       iOS beim Hineintippen in die Seite zoomen. */
    font-size: 15px;
    line-height: 1.45;
}
.lk-feld::placeholder { color: var(--lk-text-schwach); }
.lk-feld:disabled {
    background: var(--lk-flaeche-leise);
    color: var(--lk-text-schwach);
    cursor: not-allowed;
}
textarea.lk-feld {
    min-height: 88px;
    resize: vertical;
}
select.lk-feld { cursor: pointer; }

/* Beschriftung über dem Feld. Vorher hatte jeder Dialog seine eigene
   Fassung dafür, mit eigenem Abstand und eigener Schriftgröße - in zwei
   Dialogen nebeneinander sah man es sofort. Das `<label>` umschließt das
   Feld, deshalb braucht es kein `for`: ein Klick auf die Beschriftung
   trifft ohnehin. */
.lk-feldgruppe {
    display: block;
    margin-bottom: 14px;
}
.lk-feldgruppe > span {
    display: block;
    margin-bottom: 5px;
    font-size: var(--lk-s-klein);
    font-weight: 600;
    color: var(--lk-text-leise);
}
/* Kontrollkästchen stehen NEBEN ihrer Beschriftung, nicht darunter. */
.lk-feldgruppe.ist-quer {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lk-feldgruppe.ist-quer > span { margin: 0; }

/* Der Fokus kommt aus token.css und gilt für alle Bedienelemente. Hier steht
   er NICHT noch einmal - genau diese Wiederholung hat vorher zu drei
   verschiedenen Techniken geführt, von denen eine (`outline: none` plus
   eingefärbter Rand) die Tastaturbedienung stellenweise unsichtbar machte. */

@media (max-width: 820px) {
    /* Fingerkuppe statt Mauszeiger. */
    .lk-knopf { min-height: var(--lk-tastziel); }
    .lk-knopf.ist-zeichen { width: var(--lk-tastziel); }
    .lk-feld { min-height: var(--lk-tastziel); font-size: 16px; }
}

/* ---------- Eingabeleiste: EINE Quelle ----------
   Assistent, Agent und Video tragen alle `.lkw-input`. Die Maße dafür stehen
   in widget.css und gelten damit überall gleich. Vorher lagen zusätzlich
   zwei wortgleiche Kopien in chat.css und agent-inhalt.css - die liefen
   auseinander (44er gegen 40er Knöpfe, eigene Feldfarbe) und waren als zwei
   verschiedene Leisten in derselben Anwendung sichtbar. Beide Kopien sind
   entfernt; bereichsspezifisch bleibt nur, was wirklich verschieden IST.
   Hier steht bewusst KEINE dritte Fassung - diese Datei lädt vor widget.css
   und würde ohnehin überschrieben. */

/* Fußzeile unter der Leiste - überall gleich. */
.lkw-foot, .lkc-foot, .ag-foot {
    text-align: center;
    font-size: var(--lk-s-mini);
    color: var(--lk-text-schwach);
}

/* ============================================================
   Flächen und Kleinteile, die jede Bereichsseite braucht.

   Sie standen vorher je Seite noch einmal - mit eigenen Radien, eigenen
   Abständen und eigenen Meldungsfarben. Das ist genau der Weg, auf dem zwei
   Oberflächen derselben Anwendung unterschiedlich aussehen. Wer hier etwas
   ändert, ändert es überall.
   ============================================================ */

/* Eine Karte. Alle Karten einer Seite haben dieselbe Breite und dieselbe
   linke Kante - eine Karte, die weiter rechts beginnt als ihre Nachbarin,
   lässt die ganze Seite verschoben wirken. */
.lk-karte {
    background: var(--lk-flaeche);
    border: 1px solid var(--lk-linie);
    /* Am Token, nicht hart. Hier stand 14px, während Dialog, Ampel und
       Störungskarte danebenstehen und `--lk-radius` benutzen. Ein Thema mit
       kantiger Formsprache traf damit alles ausser der grössten Fläche der
       Seite - runde Karten über eckigen Knöpfen, auf jedem Bildschirmfoto
       das Erste, was auffällt. Der Vorgabewert ist derselbe. */
    border-radius: var(--lk-radius);
    padding: 20px 22px;
}

.lk-karte.ist-leise { background: var(--lk-flaeche-leise); }
.lk-karte.ist-gestrichelt { border-style: dashed; }
.lk-karte.ist-eng { padding: 16px 20px; }

/* Kopfzeile einer Karte: Überschrift links, Nebensatz daneben. */
.lk-karte-kopf {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}

/* Eine Liste gleichartiger Einträge in einer Karte: je Eintrag eine
   Überschriftszeile, beliebig viele Detailzeilen und Knöpfe darunter.
   Getrennt wird mit einer feinen Linie, nicht mit Abstand allein - sonst
   verschwimmen zwei Einträge zu einem. */
.lk-reihen > .lk-reihe {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-top: 1px solid var(--lk-linie-fein);
}
.lk-reihen > .lk-reihe:first-child { border-top: 0; padding-top: 0; }
.lk-reihe-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lk-reihe-zeile {
    font-size: var(--lk-s-klein);
    color: var(--lk-text-leise);
    /* Eine Adresse ohne Leerzeichen sprengt sonst die Karte. */
    overflow-wrap: anywhere;
}
.lk-reihe-knoepfe { display: flex; gap: 8px; margin-top: 6px; }

.lk-karte-kopf h2,
.lk-karte-kopf h3 { font-size: 14.5px; margin: 0; font-weight: 650; }

/* Nummerierter Schritt. Die Ziffer sitzt IN der Überschrift und nicht in
   einer Spalte davor, damit der Inhalt an derselben Kante beginnt wie jede
   andere Karte. */
.lk-schritt-titel {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.01em;
    margin: 0 0 14px;
}

.lk-schritt-nr {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--lk-gruen);
    color: var(--lk-auf-farbe);
    font-size: 13px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex: none;
}

/* Rückmeldung unter einer Eingabe. Drei Zustände, überall dieselben Farben. */
.lk-meldung { font-size: 12.5px; margin-top: 9px; color: var(--lk-text-leise); }
.lk-meldung.ist-gut { color: var(--lk-erfolg); }
.lk-meldung.ist-fehler { color: var(--lk-fehler); }

/* Nebentext auf Kartenhöhe. */
.lk-leise { font-size: 12.5px; color: var(--lk-text-leise); }

/* ---------- Marke ----------
   Kleines Etikett an einem Eintrag: sagt in einem Wort, WOHER er kommt oder
   worin er sich von seinen Nachbarn unterscheidet ("automatisch", "neu",
   "Entwurf"). Steht hier und nicht in einer Bereichsdatei, weil jede Liste im
   Haus so etwas braucht - und weil die Farben aus Tokens kommen müssen: die
   erste Fassung im Agenten-Verlauf trug ein festes #0d47a1 und wurde im
   Dunkelmodus zu dunkelblauer Schrift auf dunkler Fläche. */
.lk-marke {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 1px 7px;
    border-radius: var(--lk-radius-rund);
    font-size: var(--lk-etikett-groesse);
    font-weight: var(--lk-etikett-fett);
    text-transform: uppercase;
    letter-spacing: var(--lk-etikett-abstand);
    line-height: 1.5;
    background: var(--lk-flaeche-leise);
    color: var(--lk-text-leise);
}
.lk-marke svg { width: 11px; height: 11px; fill: currentColor; flex: 0 0 auto; }
.lk-marke.ist-info { background: var(--lk-info-flaeche); color: var(--lk-info); }
.lk-marke.ist-gut { background: var(--lk-erfolg-flaeche); color: var(--lk-erfolg); }
.lk-marke.ist-fehler { background: var(--lk-fehler-flaeche); color: var(--lk-fehler); }

/* Ein aufklappbarer Abschnitt für alles, was nur selten gebraucht wird und
   sonst die Seite zutextet. */
.lk-mehr { border-top: 1px solid var(--lk-linie-fein); margin-top: 12px; padding-top: 10px; }

.lk-mehr > summary {
    font-size: 12.5px;
    color: var(--lk-text-leise);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lk-mehr > summary::-webkit-details-marker { display: none; }

.lk-mehr > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .18s;
}

.lk-mehr[open] > summary::before { transform: rotate(90deg); }

/* Das hidden-Attribut muss jede display-Regel stechen. Ohne diese Zeile
   bleibt ein als versteckt markiertes Flex- oder Grid-Element sichtbar. */
[hidden] { display: none !important; }

/* Gefahr, aber leise: Widerrufen oder Löschen in einer Liste. Ein
   vollflächig roter Knopf je Zeile schreit, wo eine Zeile genügt. */
.lk-knopf.ist-gefahr-leise {
    border-color: rgba(var(--lk-fehler-rgb), .3);
    color: var(--lk-fehler);
    background: transparent;
}
.lk-knopf.ist-gefahr-leise:hover { background: var(--lk-fehler-flaeche); }

/* ---------- Prüfergebnis mit Ampel ----------
   Wo etwas automatisch geprüft wird, steht das Ergebnis als eine Zeile mit
   Farbpunkt und Klartext, darunter die Funde. Bewusst hier und nicht in der
   Seite der Apps: den gleichen Aufbau braucht jede Prüfung. */

.lk-ampel {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--lk-radius);
    border: 1px solid var(--lk-linie-fein);
    background: var(--lk-flaeche-leise);
    line-height: 1.45;
}

.lk-ampel-punkt {
    width: 12px;
    height: 12px;
    border-radius: var(--lk-radius-rund);
    flex: 0 0 auto;
    margin-top: 4px;
    background: var(--lk-text-schwach);
}

.lk-ampel.ist-gruen { background: var(--lk-erfolg-flaeche); border-color: rgba(var(--lk-erfolg-rgb), .22); }
.lk-ampel.ist-gruen .lk-ampel-punkt { background: var(--lk-erfolg); }
.lk-ampel.ist-gelb { background: var(--lk-warnung-flaeche); border-color: rgba(var(--lk-warnung-rgb), .3); }
.lk-ampel.ist-gelb .lk-ampel-punkt { background: var(--lk-warnung); }
.lk-ampel.ist-rot { background: var(--lk-fehler-flaeche); border-color: rgba(var(--lk-fehler-rgb), .3); }
.lk-ampel.ist-rot .lk-ampel-punkt { background: var(--lk-fehler); }

.lk-befunde {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

/* Der farbige Streifen links trennt kritisch von Hinweis, ohne dass eine
   zweite Beschriftung nötig wird. */
.lk-befund {
    padding: 9px 12px;
    border-left: 3px solid var(--lk-linie);
    background: var(--lk-flaeche-leise);
    border-radius: 0 var(--lk-radius-klein) var(--lk-radius-klein) 0;
    font-size: 13px;
    line-height: 1.5;
}

.lk-befund.ist-kritisch { border-left-color: var(--lk-fehler); }
.lk-befund.ist-hinweis { border-left-color: var(--lk-warnung); }
.lk-befund-ort { font-size: 12px; color: var(--lk-text-leise); font-weight: 600; }

/* ---------- Frage mit Haken und Erläuterung ----------
   Eine Ja-Nein-Frage, deren Erklärung mehr Platz braucht als die Frage
   selbst. Das Feld darunter gehört zur Frage und ist gesperrt, solange der
   Haken nicht sitzt. */

.lk-frage {
    padding: 12px 0;
    border-bottom: 1px solid var(--lk-linie-fein);
}

.lk-frage:last-of-type { border-bottom: 0; }

.lk-frage > label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    line-height: 1.5;
    font-size: 13.5px;
}

.lk-frage input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex: 0 0 auto;
    accent-color: var(--lk-gruen);
}

.lk-frage textarea.lk-feld { margin-top: 8px; }

/* ---------- Liste abhakbarer Meldungen ---------- */

.lk-meldungen {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.lk-meldung-zeile > label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 12px;
    border: 1px solid var(--lk-linie-fein);
    border-radius: var(--lk-radius-klein);
    cursor: pointer;
    line-height: 1.5;
    font-size: 13px;
}

.lk-meldung-zeile input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex: 0 0 auto;
    accent-color: var(--lk-gruen);
}

/* Erledigtes bleibt lesbar, tritt aber zurück. Ausblenden würde die
   Nachvollziehbarkeit nehmen, durchstreichen macht den Text unleserlich. */
.lk-meldung-zeile.ist-erledigt > label { opacity: .55; }

/* ---------- Störungs-Karte ----------
   Was schiefging, in Alltagssprache und mit einem Weg nach vorn. Vorher stand
   an dieser Stelle eine rote Zeile mit dem technischen Wortlaut ("Fehler:
   Bereich nicht gefunden"). Für jemanden, der eine App bauen will, ist das
   keine Auskunft, sondern nur die Bestätigung, dass etwas kaputt ist.

   Die technische Angabe verschwindet nicht, sie tritt zurück: sie steht klein
   darunter, damit sie beim Melden noch da ist. */
.lk-stoerung {
    display: flex;
    gap: 12px;
    padding: 13px 15px;
    background: var(--lk-flaeche-leise);
    border: 1px solid rgba(var(--lk-fehler-rgb), .25);
    border-radius: var(--lk-radius);
}
.lk-stoerung-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--lk-fehler);
}
.lk-stoerung-icon svg { width: 100%; height: 100%; display: block; }
.lk-stoerung-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lk-stoerung-titel { font-weight: 600; font-size: 14.5px; color: var(--lk-text); }
.lk-stoerung-satz { font-size: 13.5px; line-height: 1.5; color: var(--lk-text-leise); }
.lk-stoerung-technisch {
    font-size: 12px;
    color: var(--lk-text-leise);
    opacity: .75;
    word-break: break-word;
}

/* ---------- Ausklapp-Pfeil ----------
   EIN Pfeil für das ganze Haus. Es gab vier: ein Textzeichen in den Themen,
   einen im Video, einen im Widget und einen im Agenten - drei verschiedene
   Größen, drei Drehrichtungen, zwei Zeichenformen. Wer eine Karte aufklappt,
   soll überall dieselbe Geste sehen.

   Zustand: geschlossen zeigt der Pfeil nach rechts (das Übliche für "hier
   geht noch etwas auf"), offen nach unten. Die Klasse `ist-offen` setzt der
   jeweilige Bereich - oder ein Selektor auf seinen eigenen Zustand. */
.lk-klapp {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--lk-text-leise);
    rotate: -90deg;
    transition: rotate var(--lk-dauer);
}
.lk-klapp.ist-offen { rotate: 0deg; }
.lk-klapp.ist-gross { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .lk-klapp { transition: none; } }

/* ---------- Umschalter (segmentierte Auswahl) ----------
   Zwei bis vier Möglichkeiten, von denen genau EINE gilt: Zeitraum,
   Ansicht, Reiter. Vorher hatte jede Fläche ihre eigene Bauweise - der
   Agent runde Rahmenknöpfe, das Lexikon grün gefüllte Pillen, der Voice-
   Bereich zwei Standardknöpfe, deren Rolle bei jedem Klick tauschte, und
   der Mitarbeiter-Steckbrief gar keine: dort standen die nackten Knöpfe
   des Browsers.

   Ein Umschalter ist KEINE Knopfreihe. Er zeigt einen Zustand, deshalb
   sitzt er in einer eingesenkten Wanne und der aktive Teil tritt daraus
   hervor - so ist auf einen Blick zu sehen, was gerade gilt, statt zu
   raten, welcher von zwei gleich aussehenden Knöpfen der gedrückte ist.

   <div class="lk-schalter" role="tablist">
     <button type="button" class="lk-schalter-knopf ist-aktiv"
             role="tab" aria-selected="true" data-wert="30">Letzte 30 Tage</button>
     <button type="button" class="lk-schalter-knopf"
             role="tab" aria-selected="false" data-wert="alle">Seit Beginn</button>
   </div>

   Verdrahtet wird er mit `window.lkSchalter.verdrahten(el, beiWechsel)`
   (js/lk-schalter.js), damit die "genau einer ist aktiv"-Regel nicht in
   jeder Fläche neu entsteht. */
.lk-schalter {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--lk-flaeche-leise);
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-rund);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.lk-schalter::-webkit-scrollbar { display: none; }

.lk-schalter-knopf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--lk-radius-rund);
    padding: 5px 14px;
    background: transparent;
    color: var(--lk-text-leise);
    font: inherit;
    font-size: var(--lk-s-klein);
    font-weight: 650;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--lk-dauer) var(--lk-kurve),
                color var(--lk-dauer) var(--lk-kurve);
}
.lk-schalter-knopf svg { width: 15px; height: 15px; flex: 0 0 auto; }
.lk-schalter-knopf:hover:not(.ist-aktiv):not(:disabled) {
    background: var(--lk-mischgrund);
    color: var(--lk-text);
}
.lk-schalter-knopf:focus-visible {
    outline: var(--lk-fokus);
    outline-offset: -1px;
}
.lk-schalter-knopf.ist-aktiv {
    background: var(--lk-flaeche);
    color: var(--lk-gruen-dunkel);
    box-shadow: var(--lk-schatten-1);
}
.lk-schalter-knopf:disabled {
    opacity: .45;
    cursor: default;
}

/* Kleiner, wenn der Umschalter neben einer Überschrift steht. */
.lk-schalter.ist-klein .lk-schalter-knopf {
    padding: 3px 10px;
    font-size: var(--lk-s-mini);
}

/* Eine Ziffer oder Zahl IM Knopf (Schritt 1 von 3, Trefferzahl). */
.lk-schalter-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--lk-radius-rund);
    background: var(--lk-linie);
    color: var(--lk-text-leise);
    font-size: var(--lk-s-mini);
    font-weight: 700;
}
.lk-schalter-knopf.ist-aktiv .lk-schalter-nr {
    background: var(--lk-gruen);
    color: var(--lk-auf-farbe);
}
/* Erledigt: der Schritt ist beantwortet, aber nicht der gerade offene. */
.lk-schalter-knopf.ist-fertig .lk-schalter-nr {
    background: var(--lk-erfolg-flaeche);
    color: var(--lk-erfolg);
}

/* ---------- Leerzustand und Laden ----------
   Ergänzt im Kern am 2026-08-21. Vorher gab es diesen Baustein nirgends,
   und jede Fläche schrieb ihren leeren Zustand selbst hin: mal ein <p> mit
   grauer Schrift, mal eine Karte, mal gar nichts. Die neue Schale von
   SysSchnee lief dagegen als erste auf.

   Ein Leerzustand ist kein Fehler. Er wird deshalb nicht rot, sondern
   ruhig - und er sagt, was als Nächstes zu tun ist. */

.lk-leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lk-a-3);
    text-align: center;
    padding: var(--lk-a-8) var(--lk-a-5);
    min-height: 240px;
    color: var(--lk-text-leise);
}

.lk-leer h2 {
    font-size: var(--lk-s-titel);
    font-weight: 650;
    color: var(--lk-text);
    margin: 0;
    line-height: var(--lk-zeile-eng);
}

.lk-leer p { margin: 0; max-width: 46ch; line-height: var(--lk-zeile); }

/* Der Leerzustand einer STÖRUNG: gleiche Form, nur trägt das Zeichen die
   Aussage. Kein roter Block - die Fläche ist leer, nicht kaputtgegangen. */
.lk-leer.ist-stoerung h2 { color: var(--lk-fehler); }

.lk-laden {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lk-a-3);
    padding: var(--lk-a-7);
    color: var(--lk-text-leise);
    font-size: var(--lk-s-klein);
}

/* Ein Punkt, der atmet. Nur opacity, damit es den Kompositor nicht
   verlässt, und bei reduzierter Bewegung steht er still (Regel in
   token.css). */
.lk-laden::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--lk-radius-rund);
    background: var(--lk-gruen);
    animation: lk-atmen 1.4s var(--lk-kurve) infinite;
}

@keyframes lk-atmen {
    0%, 100% { opacity: .25; }
    50% { opacity: 1; }
}


/* Das Symbolverzeichnis von icons.js. Es hing als style-Attribut am Markup
   und wurde von einer strengen Inhaltsregel geblockt - sichtbar als Block
   leerer Zeichen am Seitenanfang. */
.lk-sprite { display: none; }

/* ---------- Beschreibungspaare ----------
   Ergänzt im Kern am 2026-08-21. Wort links, Wert rechts - für "wer du
   bist", Betriebsdaten, Geräteliste. Die Konto-Fläche hatte sie zuerst als
   eigene Klasse, dann brauchte die Verwaltung dasselbe und bekam die
   Standarddarstellung des Browsers: Wert eingerückt unter dem Wort. Ein
   Baustein, den zwei Flächen brauchen, gehört hierher. */

.lk-daten {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--lk-a-2) var(--lk-a-5);
    margin: 0;
}

.lk-daten dt {
    color: var(--lk-text-leise);
    font-size: var(--lk-s-klein);
}

.lk-daten dd { margin: 0; }

/* Schmal: untereinander, aber ohne Einrückung - eingerückte Werte lesen
   sich wie eine Verschachtelung, die es nicht gibt. */
@media (max-width: 620px) {
    .lk-daten { grid-template-columns: 1fr; gap: var(--lk-a-1); }
}

/* ---------- Überschriften ----------
   Trägt die Titelschrift auf. Ohne diese Regel wäre --lk-schrift-titel ein
   Token, das nirgends ankommt - und ein Thema, das es setzt, sähe keinen
   Unterschied und suchte den Fehler bei sich. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--lk-schrift-titel);
}


/* ---------------------------------------------------------- Vollhöhe ---
 *
 * Eine Modul-Fläche, die den Platz FÜLLT und innen scrollt, statt mit
 * ihrem Inhalt zu wachsen. Chat-artige Bereiche brauchen das: die
 * Nachrichtenliste scrollt, die Eingabeleiste bleibt unten stehen.
 *
 * Das Modul setzt die Klasse an seiner Fragment-Wurzel, der Modul-Lader
 * gibt sie an den Container weiter, und die Schale der Instanz schliesst
 * die Kette darüber. Drei Stellen, aber nur EIN Name - eine Sonderregel je
 * Modul wäre die Alternative gewesen, und die nächste chat-artige Fläche
 * hätte sie nicht bekommen.
 *
 * `min-height: 0` gehört dazu: ohne das weigert sich ein Flex-Kind zu
 * schrumpfen, und der innere Scrollbereich wächst über seinen Platz
 * hinaus, statt zu scrollen.
 */
.modul-voll {
    height: 100%;
    min-height: 0;
}

/* === schale.css === */
/* Die Schale: Kopfzeile, Bereichsleiste, Arbeitsfläche.
 *
 * Wozu es sie gibt: die Grundform ist in JEDER Instanz dieselbe. Was eine
 * Instanz anders macht, macht sie über Tokens, nicht über ein eigenes
 * Layout. Ohne diese Datei baut die erste Instanz eine Schale, die zweite
 * eine ähnliche, und ab da gibt es zwei.
 *
 * Was man ohne dieses Wissen falsch macht: Höhen mit calc(100vh - …)
 * rechnen. Die Schale füllt den Bildschirm und scrollt INNEN, sonst scrollt
 * die Seite als Ganzes und der Kopf wandert weg.
 */

/* Die volle Höhe gilt NUR, wo wirklich eine Schale steht.
 *
 * Ungebunden im Bündel wäre das eine Regel für jede Seite, die das
 * Fundament lädt - auch für eine gewöhnliche Dokumentseite, die scrollen
 * soll. `:has` bindet sie an das Vorhandensein der Schale, ohne dass
 * jemand am <html> eine Klasse setzen muss. */
html:has(> body.lk-schale) { height: 100%; }
body.lk-schale { height: 100%; }

body.lk-schale {
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--lk-grund);
    color: var(--lk-text);
    font-family: var(--lk-schrift);
    font-size: var(--lk-s-text);
    line-height: var(--lk-zeile);
}

/* ---------- Kopf ---------- */

.schale-kopf {
    display: flex;
    align-items: center;
    /* Umbrechen statt quetschen: auf einem Telefon stehen Titel, Farbwahl
       und Abmelden sonst gedrängt nebeneinander und das Erste, was leidet,
       ist die Zeile darunter. */
    flex-wrap: wrap;
    gap: var(--lk-a-3) var(--lk-a-4);
    padding: var(--lk-p-leiste);
    background: var(--lk-flaeche);
    border-bottom: 1px solid var(--lk-linie);
    flex: none;
}

/* Der Titel darf schrumpfen und abschneiden, die Bedienelemente nicht. */
.schale-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.schale-kopf-rechts { flex: none; }

.schale-titel {
    font-size: var(--lk-s-titel);
    font-weight: 650;
    margin: 0;
    letter-spacing: -.01em;
}

.schale-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--lk-a-3); }

/* ---------- Körper ---------- */

.schale-koerper {
    flex: 1;
    display: flex;
    min-height: 0;      /* ohne das wächst der Körper über den Bildschirm */
}

.schale-leiste {
    width: 260px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--lk-a-5);
    padding: var(--lk-a-4);
    background: var(--lk-flaeche);
    border-right: 1px solid var(--lk-linie);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.leiste-module, .leiste-verlauf { display: flex; flex-direction: column; gap: var(--lk-a-1); }

.leiste-etikett {
    font-size: var(--lk-etikett-groesse);
    letter-spacing: var(--lk-etikett-abstand);
    font-weight: var(--lk-etikett-fett);
    text-transform: uppercase;
    color: var(--lk-text-leise);
    padding: 0 var(--lk-a-2) var(--lk-a-2);
}

/* Leisten-Einträge sind Knöpfe aus dem Fundament, nur linksbündig und über
   die volle Breite. Kein zweites Knopf-System. */
.leiste-punkt, .verlauf-punkt {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.leiste-punkt[aria-current="page"] {
    background: var(--lk-gruen-hell);
    color: var(--lk-gruen-dunkel);
    font-weight: 600;
}

.verlauf-punkt { font-size: var(--lk-s-klein); color: var(--lk-text-leise); }

/* ---------- Fläche ---------- */

.schale-flaeche {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: relative;
}

.schale-ziel { min-height: 100%; }

/* ---------- Schmal ---------- */

@media (max-width: 860px) {
    .schale-leiste {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 20;
        transform: translateX(-100%);
        transition: transform var(--lk-dauer) var(--lk-kurve);
        box-shadow: var(--lk-schatten-2);
    }
    .schale-leiste.offen { transform: translateX(0); }
    .schale-koerper { position: relative; }
}

@media (min-width: 861px) {
    #leisteAuf { display: none; }
}

/* === katalog.css === */
/* Der Baustein-Katalog. Bewusst sparsam: die Seite soll die Bausteine
   zeigen, nicht sich selbst. Alles hier hängt unter .kat-, damit die
   Katalogseite kein einziges Aussehen der Bausteine mitbestimmt. */

.kat-body {
    margin: 0;
    background: var(--lk-grund);
    color: var(--lk-text);
    font-family: var(--lk-schrift);
    font-size: var(--lk-s-text);
    line-height: var(--lk-zeile);
}

.kat-kopf {
    display: flex;
    align-items: flex-start;
    gap: var(--lk-a-5);
    padding: var(--lk-a-6) var(--lk-a-7);
    background: var(--lk-flaeche);
    border-bottom: 1px solid var(--lk-linie);
}

.kat-kopf h1 { font-size: var(--lk-s-kopf); margin: 0 0 var(--lk-a-1); }
.kat-kopf p { margin: 0; color: var(--lk-text-leise); font-size: var(--lk-s-klein); }
.kat-kopf-rechts { margin-left: auto; }

.kat-seite {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--lk-a-7) var(--lk-a-5) var(--lk-a-8);
    display: flex;
    flex-direction: column;
    gap: var(--lk-a-7);
}

.kat-block h2 {
    font-size: var(--lk-s-titel);
    margin: 0 0 var(--lk-a-2);
    padding-bottom: var(--lk-a-2);
    border-bottom: 1px solid var(--lk-linie);
}

.kat-hinweis {
    margin: 0 0 var(--lk-a-4);
    color: var(--lk-text-leise);
    font-size: var(--lk-s-klein);
    max-width: 70ch;
}

.kat-proben {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-a-3);
    margin-bottom: var(--lk-a-4);
}

.kat-proben.ist-spalte { flex-direction: column; align-items: stretch; max-width: 520px; }

.kat-proben.ist-breit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start;
}

.kat-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lk-a-1);
    width: 84px;
    padding: var(--lk-a-3) var(--lk-a-2);
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-klein);
    background: var(--lk-flaeche);
    color: var(--lk-text-leise);
}

.kat-icon svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.kat-icon small { font-size: var(--lk-s-mini); }

code {
    background: var(--lk-flaeche-leise);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: var(--lk-schrift-fest);
    font-size: var(--lk-s-klein);
}

@media (max-width: 760px) {
    .kat-kopf { flex-direction: column; padding: var(--lk-a-5); }
    .kat-kopf-rechts { margin-left: 0; }
    .kat-seite { padding: var(--lk-a-5) var(--lk-a-4); }
}

/* Farbfleck vor einem Token-Namen. Ein Hexwert sagt niemandem, ob die
   Farbe hell oder dunkel ist - der Fleck sagt es in einem Blick, und weil
   er die Variable selbst benutzt, stimmt er auch im Dunkelmodus. */
.kat-tokenfleck {
    display: inline-block;
    width: 13px;
    height: 13px;
    flex: none;
    margin-right: 7px;
    vertical-align: -2px;
    border: 1px solid var(--lk-linie);
    border-radius: 3px;
}
.kat-tokenfleck.ist-leer { border-color: transparent; background: none; }

/* === tabelle.css === */
/* ===================================================================
   Das Tabellensystem des Hauses (js/lk-tabelle.js).
   Eine Bauweise für alle Tabellen: kompakt, sortierbar, begrenzt.
   Vorher hatte jede Fläche ihre eigene - sechs Stück, alle verschieden.

   Dichte ist hier Absicht: eine Auswertung soll auf einen Bildschirm
   passen. Zeilenhöhe 30px, Schrift 12,5px, Kopf klebt beim Scrollen.
   =================================================================== */

.lkt {
    display: flex;
    flex-direction: column;
    min-height: 0;              /* damit der Rahmen in einem Flex-Elternteil schrumpft */
}

.lkt-rahmen {
    /* Nimmt die Resthöhe der Spalte: eine Tabelle, die auf halber Höhe
       aufhört, sieht aus, als fehle etwas. */
    flex: 1;
    overflow: auto;
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-klein);
    background: var(--lk-flaeche);
    min-height: 0;
}

.lkt-tabelle {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--lk-s-klein);
    color: var(--lk-text);
}

/* --- Kopf --- */
.lkt-tabelle thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--lk-flaeche-leise);
    border-bottom: 1px solid var(--lk-linie);
    padding: 0;
    text-align: left;
    font-weight: 600;
    font-size: var(--lk-s-mini);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--lk-text-leise);
    white-space: nowrap;
}
.lkt-tabelle thead th.num { text-align: right; }
.lkt-tabelle thead th.lkt-sortiert { color: var(--lk-gruen-dunkel); }

.lkt-sortknopf {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 7px 10px;
    background: none;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
}
.lkt-tabelle thead th.num .lkt-sortknopf { justify-content: flex-end; }
.lkt-sortknopf:hover { color: var(--lk-gruen); }
.lkt-sortknopf:focus-visible { outline: var(--lk-fokus); outline-offset: -2px; }

/* Der Pfeil steht immer da und zeigt nur an, wenn sortiert wird - sonst
   springt die Spaltenbreite bei jedem Klick. */
.lkt-pfeil { width: 9px; height: 9px; display: block; }
.lkt-richtung { opacity: 0; transition: opacity var(--lk-dauer) var(--lk-kurve); }
.lkt-richtung.auf, .lkt-richtung.ab { opacity: 1; }
.lkt-richtung.ab .lkt-pfeil { rotate: 180deg; }

/* --- Zeilen --- */
.lkt-tabelle tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--lk-linie-fein);
    white-space: nowrap;
    vertical-align: middle;
}
.lkt-tabelle tbody tr:last-child td { border-bottom: 0; }
.lkt-tabelle tbody tr:nth-child(even) { background: var(--lk-gruen-blass); }
.lkt-tabelle tbody tr:hover { background: var(--lk-gruen-hell); }
.lkt-tabelle td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.lkt-tabelle td.lkt-breit { white-space: normal; min-width: 18ch; }
.lkt-tabelle td.lkt-leise { color: var(--lk-text-leise); }
/* Mailadressen kürzen statt umbrechen: eine zweizeilige Adresse macht die
   ganze Zeile doppelt hoch, und die halbe Tabelle passt nicht mehr aufs
   Bild. Der volle Wert steht im Titel-Attribut. */
.lkt-tabelle td.lkt-kurz {
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lkt-klickbar { cursor: pointer; }
.lkt-klickbar:focus-visible { outline: var(--lk-fokus); outline-offset: -2px; }

.lkt-leer td {
    padding: 22px 12px;
    text-align: center;
    color: var(--lk-text-leise);
    font-style: italic;
}

/* --- Auswahl --- */
.lkt-wahl { width: 30px; padding: 0 !important; text-align: center; }
.lkt-wahl input { margin: 0; cursor: pointer; accent-color: var(--lk-gruen); }
.lkt-tabelle thead th.lkt-wahl { padding: 6px 0 !important; }

/* --- Fuß: Bereich, Auswahl-Aktionen, Blättern --- */
.lkt-fuss {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 2px 0;
    font-size: var(--lk-s-mini);
    color: var(--lk-text-leise);
}
.lkt-bereich { margin-left: auto; font-variant-numeric: tabular-nums; }

.lkt-blaettern { display: flex; align-items: center; gap: 4px; }
.lkt-blaettern button {
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border: 1px solid var(--lk-linie);
    border-radius: 6px;
    background: var(--lk-flaeche);
    color: var(--lk-text);
    font-size: 15px; line-height: 1;
    cursor: pointer;
}
.lkt-blaettern button:hover:not(:disabled) {
    border-color: var(--lk-gruen);
    color: var(--lk-gruen-dunkel);
}
.lkt-blaettern button:disabled { opacity: .35; cursor: default; }
.lkt-seite { font-variant-numeric: tabular-nums; }

/* Die Auswahl-Leiste steht LINKS im Fuß und ist getönt: sie ist ein
   Zustand, kein Dauerelement. Ohne Auswahl gibt es sie gar nicht. */
.lkt-auswahl {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 10px;
    background: var(--lk-gruen-hell);
    border: 1px solid var(--lk-gruen);
    border-radius: var(--lk-radius-rund);
}
.lkt-auswahl-text { font-weight: 600; color: var(--lk-gruen-dunkel); }
.lkt-leeren {
    background: none; border: 0; padding: 2px 6px;
    color: var(--lk-text-leise); font: inherit; text-decoration: underline;
    cursor: pointer;
}
.lkt-leeren:hover { color: var(--lk-text); }

/* --- Marken in Zellen: ein Wort mit Bedeutung, kein Emoji --- */
.lkt-marke {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--lk-radius-rund);
    font-size: var(--lk-s-mini);
    font-weight: 600;
    background: var(--lk-flaeche-leise);
    color: var(--lk-text-leise);
}
.lkt-marke.gut { background: var(--lk-erfolg-flaeche); color: var(--lk-erfolg); }
.lkt-marke.warn { background: var(--lk-warnung-flaeche); color: var(--lk-warnung); }
.lkt-marke.schlecht { background: var(--lk-fehler-flaeche); color: var(--lk-fehler); }
.lkt-marke.info { background: var(--lk-info-flaeche); color: var(--lk-info); }

/* Balken in einer Zelle: zeigt Anteile, ohne eine zweite Zahl zu brauchen. */
.lkt-balken {
    display: block;
    height: 4px;
    margin-top: 3px;
    border-radius: 2px;
    background: var(--lk-gruen);
    opacity: .55;
}

@media (max-width: 900px) {
    .lkt-tabelle { font-size: var(--lk-s-mini); }
    .lkt-tabelle tbody td { padding: 5px 7px; }
}

/* === dialog.css === */
/* Gemeinsamer Dialog: ein Schleier, ein Fenster, drei Größen.
 *
 * WARUM
 * Der Bestand vor dem 2026-08-04: 21 eigenständige Overlay-Konstruktionen,
 * drei parallele Toast-Systeme, vier verschiedene Techniken zum Ein- und
 * Ausblenden (hidden-Attribut, hidden-Klasse, display, DOM neu bauen) - und
 * in KEINER einzigen eine Fokus-Falle. Dazu 21 native alert/confirm/prompt,
 * die im Projekt eigentlich verboten sind.
 *
 * Die Maße und Farben kommen aus token.css.
 */

.lkd-schleier {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--lk-schleier);
    opacity: 0;
    transition: opacity var(--lk-dauer) var(--lk-kurve);
}
.lkd-schleier.ist-da { opacity: 1; }
.lkd-schleier[hidden] { display: none !important; }

.lkd-fenster {
    width: min(520px, 100%);
    max-height: min(84vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--lk-flaeche);
    border-radius: var(--lk-radius);
    box-shadow: var(--lk-schatten-3);
    overflow: hidden;
    /* Nur transform und opacity - beides läuft im Kompositor. */
    transform: translateY(12px) scale(.98);
    transition: transform var(--lk-dauer) var(--lk-kurve);
}
.ist-da .lkd-fenster { transform: none; }

.lkd-fenster.ist-breit { width: min(880px, 100%); }
.lkd-fenster.ist-voll {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
}
.lkd-schleier.ist-voll { padding: 0; }

.lkd-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--lk-linie-fein);
}
.lkd-titel {
    margin: 0;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.3;
}
.lkd-zu {
    flex: 0 0 auto;
    width: var(--lk-hoehe-klein);
    height: var(--lk-hoehe-klein);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--lk-radius-klein);
    background: transparent;
    color: var(--lk-text-leise);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.lkd-zu:hover { background: var(--lk-flaeche-leise); color: var(--lk-text); }

.lkd-inhalt {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 20px;
    line-height: 1.55;
}
.lkd-inhalt p { margin: 0 0 10px; }
.lkd-inhalt p:last-child { margin-bottom: 0; }
.lkd-fenster.ist-voll .lkd-inhalt { padding: 0; }

.lkd-fuss {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--lk-linie-fein);
}
/* Eine Meldung links, die Knöpfe rechts - so muss keine zweite Zeile her. */
.lkd-hinweis {
    margin-right: auto;
    font-size: 13px;
    color: var(--lk-text-leise);
}
.lkd-hinweis.ist-fehler { color: var(--lk-fehler); }

/* Auf dem Telefon sitzt der Dialog unten und füllt die Breite - dort ist er
   mit dem Daumen erreichbar, statt in der Mitte zu schweben. */
@media (max-width: 620px) {
    .lkd-schleier { padding: 0; align-items: flex-end; }
    .lkd-fenster {
        width: 100%;
        max-height: 90dvh;
        border-radius: var(--lk-radius) var(--lk-radius) 0 0;
        transform: translateY(100%);
    }
    .lkd-fuss { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
    .lkd-fuss .lk-knopf { flex: 1 1 auto; }
}

/* ---------- Personensuche (js/personensuche.js) ----------
   Trefferliste im Dialog: Name gross, Rolle und Adresse leise darunter. Die
   Höhe ist gedeckelt, damit der Dialog bei vielen Treffern nicht aus dem Bild
   wächst - gescrollt wird in der Liste, nicht im Fenster. */
.lkps-treffer {
    margin-top: 10px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-klein);
    background: var(--lk-flaeche-leise);
}

.lkps-leer {
    margin: 0;
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--lk-text-schwach);
}

.lkps-person {
    display: grid;
    gap: 1px;
    width: 100%;
    padding: 9px 14px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--lk-linie-fein);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.lkps-person:last-child { border-bottom: 0; }
.lkps-person:hover { background: var(--lk-flaeche); }

.lkps-person.ist-gewaehlt {
    background: var(--lk-gruen-hell);
    box-shadow: inset 3px 0 0 var(--lk-gruen);
}

.lkps-name { font-size: 14.5px; font-weight: 600; }
.lkps-rolle { font-size: 12.5px; color: var(--lk-text-leise); }
.lkps-mail { font-size: 12px; color: var(--lk-text-schwach); }

/* Adresse, die nicht im Verzeichnis steht, sondern aus dem Namen abgeleitet
   wurde. Sie muss sich sichtbar von einer hinterlegten unterscheiden. */
.lkps-mail.ist-geraten { color: var(--lk-bernstein); }


/* ===== Auswahlfeld im Einstellungs-Dialog =====
   Das Fenster selbst kommt aus dem geteilten Werkstatt-Paket (dialoge.css)
   und kennt nur Schalter. Der zweite Feldtyp wird hier ergänzt, statt das
   Paket zu ändern - das Aussehen ist an .lke-schalter angelehnt.
   Steht seit 20.08.2026 HIER und nicht mehr in chat.css: der Dialog gehört
   allen Bereichen, chat.css lädt aber nur /chat. Beim Agenten und in den
   Apps hatte das Auswahlfeld deshalb keine einzige Regel, und Beschriftung,
   Auswahl und Hilfetext liefen als Fliesstext ineinander. */
.lke-auswahl {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid var(--lke-linie, var(--lk-linie-fein));
}
.lke-auswahl:last-child { border-bottom: 0; }
.lke-auswahl .lke-feldtitel { font-weight: 600; display: block; margin-bottom: 5px; }
.lke-auswahl select {
    width: 100%;
    max-width: 340px;
    padding: 8px 10px;
    border: 1px solid var(--lke-linie, rgba(0, 0, 0, .15));
    border-radius: var(--lke-radius-klein, 9px);
    background: var(--lk-flaeche);
    font-family: inherit;
    font-size: 14px;
    color: inherit;
}
.lke-auswahl select:focus-visible {
    outline: 2px solid var(--lke-akzent, var(--lk-gruen));
    outline-offset: 1px;
}
.lke-auswahl .lke-hilfe { display: block; margin-top: 5px; }