/* 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. */
.lk-knopf.ist-zeichen {
    width: var(--lk-hoehe);
    min-height: var(--lk-hoehe);
    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; }

/* 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);
    border-radius: 14px;
    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;
}

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

/* 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(0, 97, 47, .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);
}