/* 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: #b8760a; }