/* LK-Chat Vollseite - ganzseitige Chat-Oberfläche (ChatGPT-Layout in
   Kammergrün). Baut auf widget.css auf: Bubbles, Karten, Live-Widgets,
   Quellen und Feedback nutzen unverändert die .lkw-*-Klassen. Hier nur das
   Seiten-Layout (Seitenleiste + Chat-Spalte) und die Chat-Verwaltung. */

:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body.lkc-body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    color: var(--lk-text);
    background: var(--lk-grund);
    /* Die SEITE scrollt nie - nur die Bereiche darin. Ohne das gummibandet
       mobil der ganze Aufbau, und beim Ein- und Ausfahren der Adressleiste
       ändert sich die Fensterhöhe: alles rutscht mit. Genau das soll eine
       App nicht tun. */
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    /* Kein graues Aufblitzen beim Antippen - das verrät die Webseite. */
    -webkit-tap-highlight-color: transparent;
}

/* `height: 100%` statt `100dvh` - und das ist der Unterschied, auf den es
   mobil ankommt: bei `overflow: hidden` auf html und body bezieht sich 100%
   auf den LAYOUT-Viewport. Der bleibt konstant, während die Adressleiste
   ein- und ausfährt. `dvh` folgt dagegen dem sichtbaren Bereich, und alles
   darin wandert mit. */
/* Die Kopfzeile liegt über der vollen Breite, darunter der Körper aus
   Verlaufs-Leiste und Arbeitsbereich. Vorher trug die Seitenleiste die Marke -
   klappte man sie ein, war sie weg. */
.lkc-app {
    position: relative;   /* Anker für Blatt und Schleier - nichts ist fixed */
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.lkc-koerper {
    position: relative;   /* Anker für das mobile Blatt und den Schleier */
    display: grid;
    /* Breite der Seitenleiste per Ziehgriff verstellbar (chat-sidebar.js) */
    grid-template-columns: var(--lkc-side-b, 280px) 1fr;
    /* Die Zeile MUSS begrenzt sein. Ohne Angabe ist sie `auto` und wächst mit
       dem Inhalt - dann bezieht sich `height: 100%` am Arbeitsbereich auf
       eine Höhe, die selbst vom Inhalt abhängt, und der Nachrichtenbereich
       wächst statt zu scrollen (gemessen: 1926px in einem 900px-Fenster, die
       Eingabe stand bei 2052). `minmax(0, 1fr)` deckelt die Zeile auf die
       Containerhöhe und erlaubt den Kindern zu schrumpfen.
       Im Agent-Bereich fiel es nie auf: dort sitzt ein iframe fester Höhe. */
    grid-template-rows: minmax(0, 1fr);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
/* Desktop: Seitenleiste per Hamburger eingeklappt + Ziehgriff zum
   Breite-Verstellen. Mobil (<=820px) übernimmt das Off-Canvas-Overlay. */
@media (min-width: 821px) {
    /* Leiste weg = nur noch EINE Grid-Spalte. Wichtig: mit display:none
       verschwindet die Leiste aus dem Grid - bei "0 1fr" würde der
       Hauptbereich in die 0-Spalte rutschen und die Seite wäre leer. */
    body.lkc-side-zu .lkc-koerper { grid-template-columns: 1fr; }
    body.lkc-side-zu .lkc-side { display: none; }


    .lkc-side-resizer {
        position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
        cursor: col-resize; z-index: 60;
    }
    .lkc-side-resizer:hover, .lkc-side-resizer.zieht { background: var(--lk-gruen); }
}
@media (max-width: 820px) {
    .lkc-side-resizer { display: none; }
}

/* ===== Seitenleiste ===== */
/* Die Leiste trägt nur noch den Verlauf, nicht mehr die Marke. Deshalb ist
   sie hell: eine grüne Fläche über die ganze Höhe zieht den Blick auf eine
   Liste, die man meistens nur überfliegt. Das Grün bleibt der Handlung
   vorbehalten - dem Knopf, der aktiven Zeile, dem Zustand. */
/* ---------- Zähler am Reiter ----------
   Sagt, wie viel in einem Bereich liegt, ohne dass man hinwechseln muss.
   Leer bleibt er unsichtbar (hidden am Element) - eine Null ist keine
   Information, sie macht die Leiste nur unruhig. */
.lkc-tab-n {
    margin-left: var(--lk-a-2);
    padding: 0 6px;
    min-width: 18px;
    border-radius: var(--lk-radius-rund);
    background: var(--lk-gruen-hell);
    color: var(--lk-gruen-dunkel);
    font-size: var(--lk-s-mini);
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.lkc-switch-btn.aktiv .lkc-tab-n {
    background: var(--lk-gruen);
    color: var(--lk-auf-farbe);
}

/* ---------- Konto im Kopf ----------
   Initialen als Scheibe, daneben die Adresse. Auf schmalen Fenstern fällt
   die Adresse weg, die Scheibe bleibt - sie ist der Anker zum Konto. */
.lkc-konto {
    display: flex; align-items: center; gap: var(--lk-a-2);
    margin-right: var(--lk-a-5);
    padding: 3px 10px 3px 3px;
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-rund);
    background: var(--lk-flaeche);
    color: var(--lk-text-leise);
    font-family: inherit;
    font-size: var(--lk-s-klein);
    cursor: pointer;
    transition: border-color var(--lk-dauer) var(--lk-kurve);
}
/* ---------- Hell / Dunkel ----------
   Ein Knopf, zwei Symbole: gezeigt wird immer das, wohin der Klick führt.
   Die Umschaltung läuft über die Tokens (token.css), hier steht nur, welches
   der beiden Symbole sichtbar ist. */
/* Gleiche Scheibe wie das Zahnrad daneben - zwei Knöpfe nebeneinander, die
   dasselbe tun (eine Einstellung ändern), müssen auch gleich aussehen. */
.lkc-thema {
    display: grid; place-items: center;
    width: var(--lk-hoehe-klein); height: var(--lk-hoehe-klein); flex: none;
    margin-right: var(--lk-a-2); padding: 0;
    border: 1px solid var(--lk-linie); border-radius: var(--lk-radius-rund);
    background: var(--lk-flaeche); color: var(--lk-text-leise);
    cursor: pointer;
    transition: color var(--lk-dauer), box-shadow var(--lk-dauer);
}
.lkc-thema:hover {
    color: var(--lk-gruen-dunkel);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.lkc-thema svg { width: 17px; height: 17px; grid-area: 1 / 1; }
/* Hell unterwegs: den Mond anbieten. Dunkel unterwegs: die Sonne. */
.lkc-thema-hell { display: none; }
.lkc-thema-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lkc-thema-hell { display: block; }
    :root:not([data-theme="light"]) .lkc-thema-dunkel { display: none; }
}
:root[data-theme="dark"] .lkc-thema-hell { display: block; }
:root[data-theme="dark"] .lkc-thema-dunkel { display: none; }
:root[data-theme="light"] .lkc-thema-hell { display: none; }
:root[data-theme="light"] .lkc-thema-dunkel { display: block; }

/* WICHTIG: `display: flex` schlägt das hidden-Attribut. Ohne diese Regel
   stand bei jedem Nicht-Angemeldeten eine leere grüne Scheibe im Kopf. */
.lkc-konto[hidden] { display: none; }
.lkc-konto:hover { border-color: var(--lk-gruen); }
.lkc-konto-kuerzel {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: var(--lk-radius-rund);
    background: var(--lk-gruen);
    color: var(--lk-auf-farbe);
    font-size: var(--lk-s-mini);
    font-weight: 800;
    letter-spacing: .02em;
}

/* ---------- Titelzeile des Arbeitsbereichs ---------- */
.lkc-titelzeile { display: flex; align-items: flex-start; gap: var(--lk-a-5); }
.lkc-titel-text { flex: 1; min-width: 0; }
.lkc-untertitel {
    margin-top: 2px;
    font-size: var(--lk-s-klein);
    line-height: var(--lk-zeile);
    color: var(--lk-text-leise);
}
.lkc-titel-akt { display: flex; align-items: center; gap: var(--lk-a-2); flex-shrink: 0; }

.lkc-side {
    display: flex;
    flex-direction: column;
    background: var(--lk-gruen-blass);
    color: var(--lk-text);
    border-right: 1px solid var(--lk-linie);
    min-width: 0;
    overflow: hidden;
    position: relative;   /* Anker für den Ziehgriff */
}
.lkc-side-head {
    flex-shrink: 0;
    padding: var(--lk-a-4) var(--lk-a-4) var(--lk-a-3);
}
/* Die Marke steht in der Kopfzeile. In der Leiste bleibt die Regel nur für
   die mobile Ansicht, wo das Blatt eine eigene Überschrift braucht. */
.lkc-side .lkc-brand { display: none; }
.lkc-new {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: var(--lk-a-2);
    background: var(--lk-gruen);
    color: var(--lk-auf-farbe);
    border: 1px solid var(--lk-gruen);
    border-radius: var(--lk-radius-klein);
    padding: var(--lk-a-3) var(--lk-a-4);
    font-family: inherit; font-size: var(--lk-s-klein); font-weight: 700;
    cursor: pointer;
    transition: background var(--lk-dauer);
}
.lkc-new:hover { background: var(--lk-gruen-dunkel); border-color: var(--lk-gruen-dunkel); }
.lkc-new svg { width: 17px; height: 17px; }

/* Aktions-Zeile in der Seitenleiste: "Neuer Chat" + Suche nebeneinander */
/* Neu-Knopf und Suche stehen UNTEREINANDER: die Suche ist im Entwurf ein
   Feld über die volle Breite, kein Icon neben dem Knopf. Ein Feld, das man
   als solches erkennt, wird gefunden - ein Lupensymbol nicht. */
.lkc-side-aktionen { display: flex; flex-direction: column; gap: var(--lk-a-2); }
.lkc-side-aktionen .lkc-new { width: 100%; }
.lkc-such-btn {
    width: 100%;
    display: flex; align-items: center; gap: var(--lk-a-2);
    padding: var(--lk-a-2) var(--lk-a-3);
    min-height: var(--lk-hoehe-klein);
    background: var(--lk-flaeche); color: var(--lk-text-schwach);
    border: 1px solid var(--lk-linie); border-radius: var(--lk-radius-klein);
    font-family: inherit; font-size: var(--lk-s-klein); text-align: left;
    cursor: pointer; transition: border-color var(--lk-dauer) var(--lk-kurve);
}
.lkc-such-btn:hover { border-color: var(--lk-gruen); }
.lkc-such-btn:hover .lkc-such-text { color: var(--lk-text-leise); }
.lkc-such-btn svg { width: 16px; height: 16px; flex: none; }
.lkc-such-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Such-Modal (Titel + Inhalt, Chats + Transkriptionen) ---------- */
.lkc-such-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(20, 30, 24, .45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 9vh 14px 14px;
}
/* WICHTIG: display:flex schlägt sonst das hidden-Attribut -
   ohne diese Regel lässt sich das Modal nicht mehr schließen */
.lkc-such-overlay[hidden] { display: none !important; }
.lkc-such-modal {
    width: min(620px, 100%);
    max-height: 74vh;
    background: var(--lk-flaeche); border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.3);
    display: flex; flex-direction: column; overflow: hidden;
}
.lkc-such-kopf {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--lk-linie-fein);
}
.lkc-such-kopf svg { width: 20px; height: 20px; color: var(--lk-gruen); flex: none; }
.lkc-such-kopf input {
    flex: 1; border: none; font-family: inherit;
    font-size: 15px; color: var(--lk-text); background: transparent; min-width: 0;
}
.lkc-such-zu {
    flex: none; background: none; border: none; color: var(--lk-text-schwach);
    font-size: 14px; cursor: pointer; padding: 4px 6px; border-radius: var(--lk-radius-klein);
}
.lkc-such-zu:hover { background: var(--lk-flaeche-leise); color: var(--lk-text); }
.lkc-such-liste { overflow-y: auto; padding: 6px; }
.lkc-such-gruppe {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--lk-text-schwach); padding: 10px 10px 4px;
}
.lkc-such-item {
    display: block; width: 100%; text-align: left;
    background: none; border: none; font-family: inherit; cursor: pointer;
    padding: 8px 10px; border-radius: var(--lk-radius-klein);
}
.lkc-such-item:hover, .lkc-such-item:focus-visible { background: #f1f7f1; }
.lkc-such-titel {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-size: 14px; font-weight: 600; color: var(--lk-text);
}
.lkc-such-datum { flex: none; font-size: 11.5px; font-weight: 400; color: var(--lk-text-schwach); }
.lkc-such-snip {
    display: block; margin-top: 2px;
    font-size: 12.5px; color: var(--lk-text-leise); line-height: 1.45;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lkc-such-item mark { background: #dcedc8; color: inherit; border-radius: 3px; padding: 0 1px; }
.lkc-such-leer { color: var(--lk-text-schwach); font-size: 13.5px; padding: 18px 12px; text-align: center; }

/* Fundstelle nach Klick auf einen Such-Treffer kurz hervorheben */
.lkw-bubble.lkc-fund {
    outline: 2px solid var(--lk-gruen);
    outline-offset: 2px;
    transition: outline-color 1.6s ease;
}

/* Backup-Zeile in der Seitenleisten-Fußzeile (chat-backup.js) */
.lkc-backup-zeile { margin-top: 4px; }
.lkc-backup-zeile a { color: inherit; }
.lkc-backup-status { display: block; font-size: 11px; opacity: .85; margin-top: 2px; }
@media (max-width: 640px) {
    .lkc-such-overlay { padding: 4vh 8px 8px; }
    .lkc-such-modal { max-height: 84vh; }
}

/* min-height:0 ist PFLICHT, sobald unter der Liste noch etwas steht
   (Auswahl-Leiste, Konto-Hinweis, Fußzeile). Ohne die Angabe kann dieses
   Flex-Kind nicht kleiner werden als sein Inhalt: bei vielen Einträgen
   wächst es über die Leiste hinaus, scrollt nicht und schiebt alles
   darunter aus dem Bild. */
.lkc-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--lk-a-2);
}
.lkc-empty {
    color: var(--lk-text-leise); font-size: var(--lk-s-klein); text-align: center;
    padding: var(--lk-a-7) var(--lk-a-4); line-height: var(--lk-zeile);
}
/* Zeitliche Gruppen-Header in den Seitenleisten-Listen */
.lkc-gruppe {
    color: var(--lk-text-leise);
    font-size: var(--lk-etikett-groesse); font-weight: var(--lk-etikett-fett);
    text-transform: uppercase; letter-spacing: var(--lk-etikett-abstand);
    padding: var(--lk-a-4) var(--lk-a-3) var(--lk-a-1);
}
.lkc-gruppe:first-child { padding-top: var(--lk-a-1); }

/* Der offene Eintrag bekommt eine eigene Fläche mit Schatten - er liegt
   sichtbar oben auf, statt nur etwas heller zu sein. */
.lkc-item {
    display: flex; align-items: flex-start; gap: var(--lk-a-1);
    border-radius: var(--lk-radius-klein);
    padding: 2px 4px 2px 2px;
    margin-bottom: 2px;
    transition: background var(--lk-dauer);
}
.lkc-item:hover { background: rgba(var(--lk-gruen-rgb), .09); }
.lkc-item.active {
    background: var(--lk-flaeche);
    box-shadow: var(--lk-schatten-1);
    color: var(--lk-gruen-dunkel);
    font-weight: 600;
}
/* Titel brechen um, statt gekürzt zu werden - es sollen so viele Zeilen
   entstehen wie nötig, damit der ganze Titel lesbar ist. Das kann nicht
   ausufern: die Titel sind an der Quelle auf 60 bzw. 80 Zeichen begrenzt.
   Lange Wörter (Mail-Adressen, Aktenzeichen) brechen mit, sonst schiebt eines
   davon die ganze Leiste auf. Der hängende Einzug hält die Folgezeilen bündig
   unter dem Text statt unter dem Icon. */
.lkc-item-name {
    flex: 1; min-width: 0;
    background: none; border: 0; color: inherit;
    text-align: left;
    font-family: inherit; font-size: var(--lk-s-klein); line-height: 1.35;
    padding: 8px 8px 8px 29px; text-indent: -21px;
    cursor: pointer;
    overflow-wrap: anywhere;
}
/* Metazeile unter dem Titel: Zeit und Umfang. Sie liegt IM Titel-Knopf, also
   in der Klickfläche - und verschwindet beim Umbenennen mit ihm, weil dort
   der ganze Knopf gegen das Eingabefeld getauscht wird.
   `text-indent: 0` hebt den hängenden Einzug des Titels wieder auf, sonst
   zöge er die Metazeile nach links unter das Icon. */
.lkc-item-meta {
    display: block;
    margin-top: 2px;
    text-indent: 0;
    font-size: var(--lk-s-mini);
    font-weight: 400;
    line-height: var(--lk-zeile-eng);
    color: var(--lk-text-leise);
}
/* Im offenen Eintrag ist der Titel fett und grün - die Metazeile bleibt
   ruhig, sie ist Beiwerk und soll den Titel nicht verdoppeln. */
.lkc-item.active .lkc-item-meta { color: var(--lk-text-leise); }

/* Auswahlkästchen am Eintrag: tritt zurück, bis man die Zeile berührt oder
   etwas ausgewählt ist. Dauerhaft sichtbare Kästchen machen aus einem
   Verlauf eine Datenbankmaske. */
.lkc-item-wahl {
    flex: none;
    margin: 11px 0 0 2px;
    accent-color: var(--lk-gruen);
    opacity: 0;
    transition: opacity var(--lk-dauer) var(--lk-kurve);
}
.lkc-item:hover .lkc-item-wahl,
.lkc-item-wahl:checked,
.lkc-item-wahl:focus-visible { opacity: 1; }

/* Leiste unter der Liste - nur sichtbar, wenn etwas angehakt ist. */
.lkc-auswahl {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--lk-a-3);
    padding: var(--lk-a-3) var(--lk-a-4);
    border-top: 1px solid var(--lk-linie);
    background: var(--lk-flaeche);
}
.lkc-auswahl[hidden] { display: none; }
.lkc-auswahl-alle {
    display: flex; align-items: center; gap: var(--lk-a-2);
    font-size: var(--lk-s-klein);
    color: var(--lk-text-leise);
    cursor: pointer;
}
.lkc-auswahl-alle input { accent-color: var(--lk-gruen); }
.lkc-auswahl-del {
    display: flex; align-items: center; gap: var(--lk-a-2);
    padding: var(--lk-a-2) var(--lk-a-3);
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-klein);
    background: var(--lk-flaeche);
    color: var(--lk-fehler);
    font-family: inherit; font-size: var(--lk-s-klein); font-weight: 600;
    cursor: pointer;
    transition: background var(--lk-dauer) var(--lk-kurve);
}
.lkc-auswahl-del:hover { background: var(--lk-fehler-flaeche); }
.lkc-auswahl-del svg { width: 15px; height: 15px; }
/* Zweiter Schritt: die Frage steht im Knopf selbst, kein Browser-Dialog. */
.lkc-auswahl.bestaetigt .lkc-auswahl-del {
    background: var(--lk-fehler);
    border-color: var(--lk-fehler);
    color: var(--lk-auf-farbe);
}

.lkc-konto-hinweis {
    flex-shrink: 0;
    padding: var(--lk-a-3) var(--lk-a-4);
    font-size: var(--lk-s-mini);
    line-height: var(--lk-zeile);
    color: var(--lk-text-leise);
    border-top: 1px solid var(--lk-linie);
}

.lkc-item-acts { display: flex; gap: 2px; flex-shrink: 0; }
.lkc-icon-btn {
    background: none; border: 0; color: var(--lk-text-leise);
    width: 28px; height: 28px; border-radius: var(--lk-radius-klein);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0;
    transition: opacity var(--lk-dauer), background var(--lk-dauer), color var(--lk-dauer);
}
.lkc-item:hover .lkc-icon-btn, .lkc-item.active .lkc-icon-btn { opacity: 1; }
.lkc-icon-btn:hover { background: var(--lk-gruen-hell); color: var(--lk-gruen-dunkel); }
.lkc-icon-btn svg { width: 15px; height: 15px; }

/* Umbenennen inline */
.lkc-rename-input {
    flex: 1; min-width: 0;
    border: 1px solid var(--lk-gruen);
    background: var(--lk-flaeche);
    color: var(--lk-text);
    border-radius: var(--lk-radius-klein);
    padding: var(--lk-a-2) var(--lk-a-3);
    font-family: inherit; font-size: var(--lk-s-klein);
}

/* Löschen-Bestätigung inline - kein Browser-Dialog */
.lkc-item.confirm {
    background: var(--lk-fehler-flaeche);
    padding: var(--lk-a-2) var(--lk-a-3);
    justify-content: space-between;
    color: var(--lk-text);
}
.lkc-confirm-q { font-size: var(--lk-s-klein); font-weight: 700; }
.lkc-confirm-yes, .lkc-confirm-no {
    background: var(--lk-flaeche); border: 1px solid var(--lk-linie);
    color: var(--lk-text); border-radius: var(--lk-radius-klein);
    padding: 3px 10px; font-family: inherit; font-size: var(--lk-s-klein); cursor: pointer;
}
.lkc-confirm-yes {
    background: var(--lk-fehler); border-color: var(--lk-fehler);
    color: var(--lk-auf-farbe); font-weight: 700;
}
.lkc-confirm-yes:hover { background: var(--lk-fehler-dunkel); }
.lkc-confirm-no:hover { background: var(--lk-flaeche-leise); }

.lkc-side-foot {
    padding: var(--lk-a-3) var(--lk-a-4);
    border-top: 1px solid var(--lk-linie);
    display: flex;
    flex-wrap: wrap;
    gap: var(--lk-a-2);
}
/* Fußzeilen-Aktionen als kleine Chips statt Textlinks-mit-Trennern */
.lkc-side-foot a,
.lkc-side-foot button.lkk-link,
.lkc-side-foot [data-geraete],
.lkc-side-foot [data-hilfe] {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--lk-text-leise); text-decoration: none;
    font-weight: 600; font-size: var(--lk-s-mini); line-height: 1;
    background: var(--lk-flaeche);
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-rund); padding: var(--lk-a-2) var(--lk-a-3);
    cursor: pointer;
    transition: background var(--lk-dauer), border-color var(--lk-dauer), color var(--lk-dauer);
}
.lkc-side-foot a:hover,
.lkc-side-foot button.lkk-link:hover,
.lkc-side-foot [data-geraete]:hover,
.lkc-side-foot [data-hilfe]:hover {
    background: var(--lk-gruen-hell);
    border-color: var(--lk-gruen);
    color: var(--lk-gruen-dunkel);
    text-decoration: none;
}
.lkc-foot-sep { display: none; }

/* Der Schleier liegt im App-Kasten, nicht am Viewport - sonst deckt er beim
   Öffnen der Tastatur einen anderen Bereich ab als das Blatt. */
.lkc-side-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 40;
}

/* Griff und Einstellungen-im-Blatt gibt es nur auf schmalen Geräten - am
   Desktop hat die Seitenleiste ihren festen Platz. */
.lkc-griff { display: none; }
.lkc-side-aktionen .lkc-einst-btn { display: none; }

/* ===== Chat-Bereich ===== */
.lkc-main {
    display: flex; flex-direction: column;
    min-width: 0; height: 100%; min-height: 0;
    background: var(--lk-grund);
}
/* Kopfzeile über der vollen Breite: Marke, Bereiche, Einstellungen, Zustand.
   Sie ist der einzige Ort, an dem der Bereich gewechselt wird - deshalb steht
   sie über allem und wandert nie. */
.lkc-topbar {
    display: flex; align-items: center; gap: var(--lk-a-4);
    padding: var(--lk-a-3) var(--lk-a-5);
    background: var(--lk-flaeche);
    border-bottom: 1px solid var(--lk-linie);
    flex: 0 0 auto;
    z-index: 5;
}
/* Marke in der Kopfzeile. Sie hat einen festen Platz, damit die Bereiche
   nicht springen, wenn ein Kundenname länger ist. */
.lkc-topbar .lkc-brand {
    display: flex; align-items: center; gap: var(--lk-a-3);
    margin: 0; flex: 0 0 auto; min-width: 0;
}
.lkc-topbar .lkc-brand-logo {
    width: 34px; height: 34px;
    background: var(--lk-gruen); color: var(--lk-auf-farbe);
    border-radius: var(--lk-radius-klein);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: var(--lk-s-klein); letter-spacing: .02em;
    flex-shrink: 0;
}
.lkc-topbar .lkc-brand-text { min-width: 0; }
.lkc-topbar .lkc-brand-title {
    font-weight: 800; font-size: var(--lk-s-klein); line-height: var(--lk-zeile-eng);
    color: var(--lk-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lkc-topbar .lkc-brand-sub {
    font-size: var(--lk-s-mini); color: var(--lk-text-leise); opacity: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Die Bereiche stehen NEBEN der Marke, nicht am rechten Rand: sie sind das
   Hauptnavigationsmittel und gehören dorthin, wo der Blick beginnt. Erst
   Zahnrad und Zustand werden nach rechts geschoben. */
.lkc-topbar .lkc-switch { margin-left: var(--lk-a-6); margin-right: 0; }
/* Der Schub nach rechts sitzt am ERSTEN der beiden Knöpfe, sonst klebt der
   Umschalter am Zustand links und das Zahnrad steht allein rechts. */
.lkc-topbar .lkc-thema { margin-left: auto; }
.lkc-topbar .lkc-einst-btn { margin-right: var(--lk-a-3); }

/* Titel des offenen Eintrags - er gehört zum Arbeitsbereich, nicht zur
   Kopfzeile: welcher Eintrag offen ist, ist eine Eigenschaft des Bereichs. */
.lkc-titelzeile {
    flex: 0 0 auto;
    padding: var(--lk-a-4) var(--lk-a-6) var(--lk-a-2);
    min-width: 0;
}
.lkc-menu-btn {
    /* Hamburger auf ALLEN Bildschirmgrößen: mobil öffnet er das Overlay,
       am Desktop klappt er die Seitenleiste ein/aus */
    display: flex;
    background: none; border: 0; color: var(--lk-text);
    width: var(--lk-hoehe); height: var(--lk-hoehe); border-radius: var(--lk-radius-klein);
    align-items: center; justify-content: center; cursor: pointer;
}
.lkc-menu-btn:hover { background: rgba(0,0,0,.06); }
.lkc-menu-btn svg { width: 22px; height: 22px; }
.lkc-topbar-title {
    min-width: 0;
    font-weight: 800; font-size: var(--lk-s-kopf); color: var(--lk-text);
    letter-spacing: -.015em; line-height: var(--lk-zeile-eng);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lkc-topbar-status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--lk-text-leise); }
.lkc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lk-gruen); box-shadow: 0 0 0 3px rgba(var(--lk-gruen-rgb), .2); }

/* Nachrichten als zentrierte Spalte (ChatGPT-Stil). Bubbles selbst bleiben
   unverändert aus widget.css. */
.lkc-msgs {
    flex: 1;
    /* PFLICHT: ohne min-height:0 kann dieses Flex-Kind nicht kleiner werden
       als sein Inhalt. Es wächst dann über den Bereich hinaus, statt zu
       scrollen, und schiebt die Eingabe aus dem Bild. Fiel erst auf, als die
       Titelzeile mit der Unterzeile zweizeilig wurde und der Platz knapp
       war - der Fehler lag aber vorher schon hier. */
    min-height: 0;
    align-items: center;
    padding: 22px 16px;
}
.lkc-msgs > .lkw-msg { width: 100%; max-width: 780px; }

/* Eingabe unten als zentrierte Spalte */
.lkc-composer { background: var(--lk-grund); }
.lkc-quick {
    max-width: 812px; margin: 0 auto;
    background: transparent; border-top: 0;
    padding: 0 16px 8px;
    justify-content: center;
}
/* Die Maße der Eingabeleiste stehen EINMAL in bausteine.css (.lkw-input).
   Hier stand vorher eine wortgleiche Kopie - sie lief gegenüber dem Agenten
   auseinander (40er statt 44er Knöpfe) und war als zweite Leiste sichtbar. */
.lkc-foot {
    text-align: center;
    font-size: 11.5px; color: var(--lk-text-schwach);
    padding: 2px 16px 12px;
}

/* ===== Datenschutz-Banner ===== */
.lkc-privacy {
    position: fixed; left: 50%; bottom: 16px;
    transform: translateX(-50%);
    width: calc(100% - 32px); max-width: 720px;
    display: flex; align-items: center; gap: 14px;
    background: var(--lk-flaeche);
    border: 1px solid rgba(var(--lk-gruen-rgb), .25);
    border-left: 4px solid var(--lk-gruen);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    padding: 14px 16px;
    z-index: 60;
    animation: lkc-priv-in .3s ease-out;
}
@keyframes lkc-priv-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.lkc-privacy-text { flex: 1; font-size: 13px; line-height: 1.5; color: var(--lk-text); }
.lkc-privacy-text strong { color: var(--lk-gruen-dunkel); }
.lkc-privacy-text a { color: var(--lk-gruen); font-weight: 600; }
.lkc-privacy-ok {
    flex-shrink: 0;
    background: var(--lk-gruen); color: var(--lk-auf-farbe); border: 0;
    border-radius: var(--lk-radius-klein); padding: 10px 18px;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.lkc-privacy-ok:hover { background: var(--lk-gruen-dunkel); }

/* ===== Mobil: Bereiche unten, Verlauf als Blatt =====
 *
 * Vorgeschichte: sechs Bereiche, Titel, Zahnrad und "Online" standen in EINER
 * Topbar-Zeile - zusammen rund 700 Pixel, auf einem Telefon mit 390 lief alles
 * rechts aus dem Bild. Ein Umbruch in eine zweite, seitwärts scrollende Zeile
 * hat das Bild gerettet, aber nicht die Bedienung: oben am Rand, mit der
 * Daumenspitze, teils außerhalb des Sichtfelds.
 *
 * Deshalb jetzt die Aufteilung, die auf einem Telefon trägt: Bereiche als
 * feste Leiste UNTEN im Daumenbereich, der Verlauf als Blatt, das man über den
 * Griff hochzieht - mit Suche und Einstellungen darin. Die Topbar trägt nur
 * noch den Titel.
 */
@media (max-width: 820px) {
    /* KEIN `position: fixed` in diesem ganzen Block. Fixierte Elemente hängen
       auf dem Telefon am sichtbaren Viewport: sie wandern beim Scrollen mit
       der Adressleiste, springen und verschwinden zeitweise ganz. Genau das
       hat die untere Leiste gemacht.
       Stattdessen ist die App eine Spalte fester Höhe - Inhalt, Griff, Leiste
       als normale Kinder untereinander. Was unten liegt, liegt unten, weil es
       das letzte Element ist, nicht weil es dort hingerechnet wurde.
       Die Höhe zieht `--lkc-tastatur` ab (chat-core.js, VisualViewport): bei
       eingeblendeter Tastatur schrumpft die App, statt sich darunter zu
       verstecken. */
    .lkc-app {
        height: calc(100% - var(--lkc-tastatur, 0px));
    }
    /* Mobil trägt der Körper nur noch eine Spalte - der Verlauf ist dort ein
       Blatt, das über den Arbeitsbereich fährt, keine zweite Spalte. */
    .lkc-koerper { grid-template-columns: 1fr; }
    .lkc-menu-btn { display: flex; }
    .lkc-icon-btn { opacity: 1; }
    /* Alles unter 16px lässt iOS beim Hineintippen in die Seite zoomen. */
    .lkc-input textarea,
    .lkc-such-kopf input,
    .lkc-rename-input { font-size: 16px; }
    /* Das Banner ist hier ein Glied der Spalte (chat-privacy.js hängt es in
       .lkc-app), kein fixierter Kasten: es sitzt ÜBER Griff und Leiste, statt
       sie zu verdecken. `position: fixed` wäre hier ohnehin falsch - siehe der
       Hinweis am Anfang dieses Blocks. */
    .lkc-privacy {
        position: static;
        order: 1;
        flex: 0 0 auto;
        flex-direction: column; align-items: stretch; text-align: left;
        width: auto; max-width: none;
        margin: 0 8px 8px;
        transform: none;
        animation: none;
        max-height: 45%;
        overflow-y: auto;
    }
    .lkc-privacy-ok { width: 100%; }

    .lkc-topbar { gap: 8px; padding: 10px 12px; flex: 0 0 auto; }
    .lkc-topbar-title { font-size: 15px; }
    /* "Online" sagt immer dasselbe, das Zahnrad zieht ins Blatt. */
    .lkc-topbar-status, .lkc-einst-btn { display: none; }

    /* Der Inhalt nimmt, was übrig bleibt. `min-height: 0` ist Pflicht -
       ohne das wächst ein Flex-Kind über seinen Anteil hinaus und schiebt
       die Leiste aus dem Bild. */
    .lkc-main { flex: 1 1 auto; min-height: 0; height: auto; padding-bottom: 0; }

    /* ---- Bereiche als untere Leiste: letztes Kind, nicht fixiert ---- */
    .lkc-switch {
        flex: 0 0 auto;
        order: 3;
        display: flex;
        gap: 0;
        /* `width: 100%` ausdrücklich: die Basisregel setzt `margin-left: auto`
           und `flex: none`, damit die Leiste am Desktop rechts andockt - in der
           Spalte blieb sie dadurch inhaltsbreit, und der letzte Knopf stand
           halb außerhalb. */
        width: 100%;
        margin: 0;
        /* Seitlich KEIN Innenabstand: sechs gleich breite Spalten füllen die
           Breite exakt aus, jedes zusätzliche Pixel schiebt den letzten Knopf
           aus dem Bild ("Telefo"). */
        padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        background: var(--lk-flaeche);
        border-top: 1px solid var(--lk-linie-fein);
        overflow: hidden;
    }
    .lkc-switch-btn {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        gap: 3px;
        padding: 6px 2px;
        border-radius: 10px;
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1.15;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .lkc-switch-btn svg { width: 20px; height: 20px; }
    .lkc-switch-btn.aktiv { background: var(--lk-gruen-hell); box-shadow: none; }
    /* Bei sechs Spalten auf 390 Pixeln bleiben je Knopf rund 60 - "Transkription"
       wurde dort mitten im Wort abgeschnitten. Mobil steht deshalb die
       Kurzform; der volle Name bleibt im Markup und damit für Vorlesegeräte. */
    .lkc-tab-text { font-size: 0; }
    .lkc-tab-text::after { content: attr(data-kurz); font-size: 10.5px; }

    /* ---- Griff: sitzt direkt auf der Leiste, ohne Lücke ---- */
    .lkc-griff {
        flex: 0 0 auto;
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        width: 100%;
        padding: 5px 0 6px;
        border: 0;
        border-top: 1px solid var(--lk-linie-fein);
        background: var(--lk-flaeche);
        font-family: inherit;
        font-size: 11px;
        font-weight: 600;
        color: var(--lk-text-schwach);
        cursor: pointer;
        touch-action: none;
    }
    .lkc-griff-strich {
        width: 38px; height: 4px;
        border-radius: 999px;
        background: var(--lk-linie);
    }
    /* Bei offenem Blatt liegt der Griff über dem Schleier und wirkt wie ein
       zweiter, toter Griff - er tritt zurück. */
    .lkc-griff[aria-expanded="true"] { opacity: 0; pointer-events: none; }

    /* ---- Verlauf als Blatt von unten ----
       `absolute` im App-Kasten statt `fixed` am Viewport: so bleibt es beim
       Ziehen und bei offener Tastatur an seinem Platz. */
    .lkc-side {
        position: absolute;
        top: auto; left: 0; right: 0; bottom: 0;
        width: 100%; max-width: none;
        height: 86%;
        z-index: 50;
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(.16, 1, .3, 1);
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .32);
    }
    .lkc-side.open { transform: translateY(0); }
    /* Während der Finger zieht, folgt das Blatt sofort - eine Übergangszeit
       würde die Bewegung nachhinken lassen. */
    .lkc-side.zieht { transition: none; }
    /* Eigener Griff am Blatt: nach unten wischen schließt. */
    .lkc-side-head {
        position: relative;
        padding-top: 20px;
        touch-action: none;
    }
    .lkc-side-head::before {
        content: "";
        position: absolute; top: 8px; left: 50%;
        width: 40px; height: 4px; margin-left: -20px;
        border-radius: 999px;
        background: var(--lk-linie);
    }
    .lkc-list { padding-bottom: 12px; }
    .lkc-side-foot { padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px)); }

    /* Einstellungen wandern ins Blatt, neben "Neuer Chat" und die Suche. */
    .lkc-side-aktionen .lkc-einst-btn {
        display: inline-flex;
        width: 40px; height: auto;
        margin: 0;
        border: 1px solid var(--lk-linie);
        border-radius: var(--lk-radius-klein);
        background: var(--lk-flaeche);
        color: var(--lk-text-leise);
    }
    .lkc-side-aktionen .lkc-einst-btn:hover {
        background: var(--lk-gruen-hell);
        box-shadow: none;
        color: var(--lk-gruen-dunkel);
    }
}

/* ---------- Bereichs-Umschalter in der Kopfzeile ---------- */
.lkc-switch {
    display: flex; gap: 2px;
    background: var(--lk-gruen-blass);
    border: 1px solid var(--lk-linie-fein);
    border-radius: var(--lk-radius-rund);
    padding: 3px; margin-right: var(--lk-a-3); flex: none;
}
.lkc-switch-btn {
    display: inline-flex; align-items: center; gap: var(--lk-a-2);
    border: 0; background: transparent; border-radius: var(--lk-radius-rund);
    padding: var(--lk-a-2) var(--lk-a-4);
    font-family: inherit; font-size: var(--lk-s-klein); font-weight: 700;
    color: var(--lk-text-leise); cursor: pointer;
    transition: background var(--lk-dauer), color var(--lk-dauer);
    white-space: nowrap;
}
.lkc-switch-btn svg { width: 15px; height: 15px; }
.lkc-switch-btn:hover { color: var(--lk-gruen-dunkel); }
.lkc-switch-btn.aktiv {
    background: var(--lk-flaeche); color: var(--lk-gruen-dunkel);
    box-shadow: var(--lk-schatten-1);
}
.lkc-topbar-status {
    margin-left: 0; flex: none;
    font-size: var(--lk-s-mini); color: var(--lk-text-leise);
}

/* Einstellungen: gehört optisch zur Bereichs-Umschaltung (gleiche Höhe,
   gleicher Radius, gleiche Ruhefarbe) und sitzt direkt daneben - getrennt
   durch eine dünne Linie, damit er nicht wie ein sechster Bereich wirkt.
   Beim Überfahren dreht sich das Zahnrad ein Stück: nur `transform`, also
   kompositorfreundlich. */
.lkc-einst-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--lk-hoehe-klein); height: var(--lk-hoehe-klein); flex: none;
    margin-right: var(--lk-a-4); padding: 0;
    border: 1px solid var(--lk-linie); border-radius: var(--lk-radius-rund);
    background: var(--lk-flaeche); color: var(--lk-text-leise);
    cursor: pointer;
    position: relative;
    transition: background var(--lk-dauer), color var(--lk-dauer), box-shadow var(--lk-dauer);
}
.lkc-einst-btn svg {
    width: 17px; height: 17px; fill: currentColor;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.lkc-einst-btn:hover {
    background: var(--lk-flaeche); color: var(--lk-gruen-dunkel);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.lkc-einst-btn:hover svg { transform: rotate(45deg); }
.lkc-einst-btn:active svg { transform: rotate(60deg) scale(.94); }
@media (prefers-reduced-motion: reduce) {
    .lkc-einst-btn svg { transition: none; }
    .lkc-einst-btn:hover svg, .lkc-einst-btn:active svg { transform: none; }
}

/* Transkriptions-Panel (iframe auf transkription.html?embed=1) */
.lkc-trans { flex: 1; min-height: 0; display: flex; }
.lkc-trans[hidden] { display: none; }
.lkc-trans iframe { border: 0; width: 100%; height: 100%; flex: 1; }

/* Transkriptions-Einträge in der Seitenleiste. Der Zeitstempel steht mit im
   Titel-Knopf, darf aber nicht in die Zeilenbegrenzung des Titels geraten -
   deshalb clampt nicht der Knopf, sondern der Titel-Span darin. */
.lkc-titem .lkc-item-name { display: block; text-indent: 0; padding-left: 8px; }
.lkc-titem-titel {
    display: block; overflow-wrap: anywhere;
    padding-left: 21px; text-indent: -21px;
}
.lkc-titem-zeit { display: block; font-size: 11px; color: var(--lk-text-schwach); font-weight: 400; margin-top: 2px; }

/* "Läuft"-Indikator: rotierender Ladekringel vor dem Titel einer Agent-
   Sitzung, deren Lauf gerade im Backend arbeitet (chat-modus.js). Weiß, damit
   er auf dem dunkelgrünen Seitenleisten-Hintergrund klar sichtbar ist. */
/* Der Kringel tritt an die Stelle des Bereichs-Icons - beide nebeneinander
   wären doppelt gemoppelt und würden die Zeile aufblähen. */
.lkc-titem.lkc-laeuft .lkc-mtyp-ic { display: none; }
.lkc-titem.lkc-laeuft .lkc-item-name { position: relative; }
.lkc-titem.lkc-laeuft .lkc-item-name::before {
    content: ""; position: absolute; left: 10px; top: 11px;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--lk-linie);
    border-top-color: var(--lk-gruen);
    animation: lkc-laeuft-spin 0.7s linear infinite;
}
@keyframes lkc-laeuft-spin { to { transform: rotate(360deg); } }

/* Medien-Einträge: Dokumenttyp als kompaktes Icon (+ LK-Chip bei CI-Vorlagen) */
.lkc-mtyp-ic {
    display: inline-flex; align-items: center; gap: 3px;
    vertical-align: -3px; margin-right: 6px; color: var(--lk-gruen-dunkel);
}
.lkc-mtyp-ic svg { width: 15px; height: 15px; flex: none; }
.lkc-lk-chip {
    font-size: 9px; font-weight: 800; letter-spacing: .03em; line-height: 1;
    color: var(--lk-gruen-dunkel); background: var(--lk-gruen-hell);
    border-radius: 4px; padding: 2px 3px;
}
.lkc-titem-offen {
    display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; color: #ef6c00; background: var(--lk-warnung-flaeche);
    border-radius: 999px; padding: 1px 7px; margin-right: 4px;
}
/* Lauf kam vom Zeitplan/Ereignis, nicht vom Nutzer - ruhiger als "unterbrochen",
   es ist kein Problem, sondern eine Herkunft. Das margin-left gleicht den
   hängenden Einzug des Titels aus (der ist auf ein 21px-Icon gerechnet; das
   Merkmal steht darum in einer eigenen Zeile und nicht im Einzug). */
.lkc-titem-auto {
    display: block; width: fit-content; margin-left: 21px; text-indent: 0;
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; color: #0d47a1; background: var(--lk-info-flaeche);
    border-radius: 999px; padding: 1px 7px; margin-right: 4px;
}

/* Steht NACH dem 820px-Block und darf dessen untere Leiste nicht zurückbauen:
   dort sind die Knöpfe gleich breite Spalten mit Icon über Text. Ein Padding
   in Pixeln oder eine größere Schrift sprengt bei sechs Bereichen die Zeile. */
@media (max-width: 640px) {
    .lkc-switch-btn { font-size: 10px; }
}

/* Nebenknopf in der Seitenleiste (z.B. Wort-Ersetzungen) - leiser als der
   Neu-Knopf darüber, aber gleiche Breite und Ausrichtung. */
.lkc-neben-btn {
    display: flex; align-items: center; gap: var(--lk-a-3);
    width: 100%; margin-top: var(--lk-a-2);
    padding: var(--lk-a-2) var(--lk-a-4);
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-klein);
    background: var(--lk-flaeche);
    color: var(--lk-text-leise);
    font-family: inherit; font-size: var(--lk-s-klein); font-weight: 600;
    cursor: pointer;
    transition: background var(--lk-dauer), border-color var(--lk-dauer), color var(--lk-dauer);
}
.lkc-neben-btn[hidden] { display: none; }
.lkc-neben-btn:hover {
    background: var(--lk-gruen-hell); border-color: var(--lk-gruen);
    color: var(--lk-gruen-dunkel);
}
.lkc-neben-btn svg { width: 15px; height: 15px; flex: none; }


/* ===== Enge Topbar am Desktop: Namen kuerzen statt abschneiden =====
   Steht bewusst ganz am Ende der Datei - sonst schlaegt die spaetere
   Basisregel `.lkc-topbar-title { min-width: 0 }` die Mindestbreite, der
   Titel schrumpft lautlos auf "E..." und es entsteht nie ein messbarer
   Ueberlauf, auf den die Stufen reagieren koennten. */
@media (min-width: 821px) {
    /* Wird der Platz oben knapp, werden die Bereichsnamen GEKÜRZT, statt den
       Titel wegzuquetschen oder Namen anzuschneiden. Die Stufen setzt
       chat-core.js nach echter Messung - eine Fensterbreite taugt hier nicht
       als Maß, weil die Seitenleiste verstellbar und einklappbar ist.
       Der Titel bekommt eine Mindestbreite: erst dadurch entsteht ein
       messbarer Überlauf, statt dass er lautlos auf null schrumpft. */
    .lkc-topbar-title { min-width: 150px; }
    /* Kurzform ALLEIN spart kaum Platz ("Transkript" statt "Transkription"
       sind zwanzig Pixel) - die Stufe wurde deshalb übersprungen und es ging
       sofort auf Zeichen. Sie zieht darum auch Innenabstand und Schriftgröße
       zusammen; erst zusammen ergibt das rund ein Viertel weniger Breite. */
    .lkc-topbar.ist-kurz .lkc-switch-btn { padding: 6px 9px; gap: 5px; }
    .lkc-topbar.ist-kurz .lkc-tab-text { font-size: 0; }
    .lkc-topbar.ist-kurz .lkc-tab-text::after {
        content: attr(data-kurz);
        font-size: 12px;
    }
    /* Letzte Stufe, wenn auch die Kurzform nicht mehr passt: nur Zeichen.
       Der Name bleibt im Dokument (nur unsichtbar), damit Vorlesegeräte und
       die Tastaturbedienung ihn weiter kennen. */
    .lkc-topbar.ist-zeichen .lkc-tab-text {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .lkc-topbar.ist-zeichen .lkc-switch-btn { padding: 7px 11px; }
}


/* ===== Auswahlfeld im Einstellungs-Dialog =====
   Der Dialog kommt aus dem geteilten Werkstatt-Paket (dialoge.css) und kennt
   nur Schalter. Der zweite Feldtyp wird hier ergaenzt, statt das
   schreibgeschuetzte Paket zu aendern - Aussehen an .lke-schalter angelehnt. */
.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; }