/* Lesefenster für Quellen (js/leser.js).
 *
 * Gestalterische Richtung: Lesesatz, kein Formular. Der Dialog trägt den Titel,
 * darunter beginnt sofort der Text - eine schmale Spalte mit weiter Zeile, in
 * der man ein paar Absätze am Stück lesen kann. Alles Technische (Slug,
 * Kategorie) steht klein und grau über dem ersten Absatz, damit es die
 * Hierarchie nicht bricht.
 *
 * Ein PDF bekommt die ganze Fläche und einen dunkleren Grund - so hebt sich das
 * weiße Blatt ab, statt mit dem Dialog zu verschmelzen.
 */

.lkd-fenster.ist-leser { height: min(88vh, 1000px); }
.lkd-fenster.ist-leser .lkd-inhalt { padding: 0; display: flex; flex-direction: column; }

.lkl { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.lkl-laden,
.lkl-leer,
.lkl-hinweis {
    margin: var(--lk-a-6) var(--lk-a-6) 0;
    color: var(--lk-text-leise);
    font-size: var(--lk-s-text);
}
.lkl-hinweis {
    padding: var(--lk-a-3) var(--lk-a-4);
    border-left: 3px solid var(--lk-warnung);
    background: var(--lk-warnung-flaeche);
    color: var(--lk-text);
}

/* Umschalter PDF / Textfassung - zwei Wörter, kein Kartenstapel. */
.lkl-schalter {
    display: flex;
    gap: var(--lk-a-1);
    padding: var(--lk-a-3) var(--lk-a-6);
    border-bottom: 1px solid var(--lk-linie-fein);
}
.lkl-schalter-knopf {
    border: 0;
    border-radius: var(--lk-radius-rund);
    padding: var(--lk-a-2) var(--lk-a-5);
    background: transparent;
    color: var(--lk-text-leise);
    font: inherit;
    font-size: var(--lk-s-klein);
    font-weight: 650;
    cursor: pointer;
    transition: background var(--lk-dauer) var(--lk-kurve), color var(--lk-dauer) var(--lk-kurve);
}
.lkl-schalter-knopf:hover { background: var(--lk-flaeche-leise); color: var(--lk-text); }
.lkl-schalter-knopf.ist-aktiv { background: var(--lk-gruen-hell); color: var(--lk-gruen-dunkel); }
.lkl-schalter-knopf:focus-visible { outline: var(--lk-fokus); outline-offset: var(--lk-fokus-abstand); }

.lkl-buehne { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.lkl-buehne[data-ansicht="pdf"] { overflow: hidden; display: flex; }

/* --- Textfassung ---
   EINE Lesespalte für alles. Vorher trug jedes Element seine eigene Breite,
   und weil "68ch" von der Schriftgröße abhängt, standen Kategoriezeile, Lead
   und Fließtext auf drei verschiedenen Fluchtlinien. */
.lkl-satz {
    max-width: 72ch;
    margin: 0 auto;
    padding: 0 var(--lk-a-6);
}
.lkl-meta {
    margin: var(--lk-a-6) 0 0;
    font-size: var(--lk-etikett-groesse);
    letter-spacing: var(--lk-etikett-abstand);
    text-transform: uppercase;
    font-weight: var(--lk-etikett-fett);
    color: var(--lk-text-schwach);
}
.lkl-lead {
    margin: var(--lk-a-4) 0 0;
    font-size: var(--lk-s-gross);
    line-height: var(--lk-zeile);
    color: var(--lk-text-leise);
}
.lkl-text {
    margin: var(--lk-a-5) 0 var(--lk-a-8);
    font-size: var(--lk-s-gross);
    line-height: var(--lk-zeile-weit);
    color: var(--lk-text);
}
.lkl-text h1, .lkl-text h2, .lkl-text h3 {
    margin: var(--lk-a-7) 0 var(--lk-a-3);
    line-height: var(--lk-zeile-eng);
    font-weight: 700;
}
.lkl-text h1 { font-size: var(--lk-s-kopf); }
.lkl-text h2 { font-size: var(--lk-s-titel); }
.lkl-text h3 { font-size: var(--lk-s-gross); color: var(--lk-text-leise); }
.lkl-text p { margin: 0 0 var(--lk-a-5); }
.lkl-text ul, .lkl-text ol { margin: 0 0 var(--lk-a-5) var(--lk-a-6); padding: 0; }
.lkl-text li { margin-bottom: var(--lk-a-2); }
.lkl-text a { color: var(--lk-gruen-dunkel); }
.lkl-text table { width: 100%; border-collapse: collapse; margin: 0 0 var(--lk-a-5); font-size: var(--lk-s-text); }
.lkl-text th, .lkl-text td { border: 1px solid var(--lk-linie-fein); padding: var(--lk-a-2) var(--lk-a-3); text-align: left; }
.lkl-text th { background: var(--lk-flaeche-leise); }

/* --- PDF --- */
.lkl-pdf { flex: 1; display: flex; background: var(--lk-grund-satt); }
.lkl-pdf-rahmen { flex: 1; width: 100%; border: 0; }

@media (max-width: 620px) {
    .lkd-fenster.ist-leser { height: 92dvh; }
    .lkl-satz { padding: 0 var(--lk-a-5); }
}