/* Exposé-Umgebung · Marke und Aufbau (Ebene 3 über design-grundlagen + stil-linie).
   Linie bleibt die Grundlage: keine Schatten, keine Rundungen.
   Abweichungen (Entscheidung Johannes 08.10.): Akzent #C1442D, Akzentbalken links an Abschnittstiteln,
   Statusquadrat plus Wort, Fließtext 15 px statt 13 px, weil hier lange Texte geschrieben werden.
   1.1 (Johannes 09.10.): Text und Listen über die volle Breite; Belege, Quellen und offene Punkte als
   aufklappbare Karten (Rahmen statt Haarlinie, weiter ohne Schatten und Rundung). */

/* --- Marke ------------------------------------------------------------------------------------- */
:root[data-stil] {
  --wk-akzent-h: #C1442D;  --wk-akzent-d: #EA7A62;
  --wk-fehler-h: #C1442D;  --wk-fehler-d: #EA7A62;
  --wk-fehler-text-h: #C1442D; --wk-fehler-text-d: #EA7A62;
  --st-leer: transparent;
  --st-arbeit-h: #8A8F98;  --st-arbeit-d: #8A8F98;
  --mk-kommentar-h: rgba(193, 68, 45, .14); --mk-kommentar-d: rgba(234, 122, 98, .22);
  --mk-aktiv-h: rgba(193, 68, 45, .32);     --mk-aktiv-d: rgba(234, 122, 98, .42);
  --text-gross: 15px;
  --lesebreite: 70ch;
}
:root[data-stil], [data-theme] {
  --st-arbeit: var(--wk-wenn-hell, var(--st-arbeit-d)) var(--wk-wenn-dunkel, var(--st-arbeit-h));
  --mk-kommentar: var(--wk-wenn-hell, var(--mk-kommentar-d)) var(--wk-wenn-dunkel, var(--mk-kommentar-h));
  --mk-aktiv: var(--wk-wenn-hell, var(--mk-aktiv-d)) var(--wk-wenn-dunkel, var(--mk-aktiv-h));
}
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  :root[data-stil] { --text-gross: 16px; }
}

html, body { margin: 0; min-height: 100%; }
body.wk { background: var(--wk-grund); }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
a { color: inherit; }

/* --- Kopfleiste ---------------------------------------------------------------------------------- */
.leiste { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 0 20px;
  height: 48px; background: var(--wk-grund); border-bottom: var(--wk-strich) solid var(--wk-linie); }
.leiste-marke { font-weight: 800; font-size: 15px; letter-spacing: .09em; white-space: nowrap; text-decoration: none; color: var(--wk-text);
  border-left: 3px solid var(--wk-akzent); padding-left: 8px; line-height: 18px; }
.anmelde-logo { letter-spacing: .09em; font-weight: 800 !important; border-left: 3px solid var(--wk-akzent); padding-left: 10px; }
.leiste nav { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; }
.leiste nav a { text-decoration: none; color: var(--wk-text-leise); white-space: nowrap; padding: 14px 0 12px;
  border-bottom: var(--wk-strich-aktiv) solid transparent; }
.leiste nav a:hover { color: var(--wk-text); }
.leiste nav a[aria-current="page"] { color: var(--wk-text); border-bottom-color: var(--wk-linie-stark); }
.leiste-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.speicher { font-size: var(--wk-groesse-klein); color: var(--wk-text-leise); }
.speicher.fehler { color: var(--wk-akzent); font-weight: 700; }
.knopf-text { background: none; border: 0; border-bottom: var(--wk-strich) solid var(--wk-linie-stark); padding: 0 1px 1px;
  cursor: pointer; font-size: inherit; color: var(--wk-text); }
.knopf-text:hover { background: var(--wk-flaeche-2); }
.knopf-text.leise { border-bottom-color: var(--wk-linie); color: var(--wk-text-leise); }
.knopf-text.akzent { color: var(--wk-akzent); border-bottom-color: var(--wk-akzent); }
.gliederung-knopf { display: none; }

/* --- Aufbau Text ---------------------------------------------------------------------------------- */
.aufbau { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - 49px); }
.gliederung { position: sticky; top: 49px; align-self: start; max-height: calc(100vh - 49px); overflow-y: auto;
  border-right: var(--wk-strich) solid var(--wk-linie); padding: 18px 16px 40px; box-sizing: border-box; background: var(--wk-grund); }
.fortschritt { margin-bottom: 18px; }
.fortschritt-zahl { font-size: var(--wk-groesse-klein); color: var(--wk-text-leise); }
.fortschritt-balken { height: 2px; background: var(--wk-linie); margin-top: 6px; }
.fortschritt-balken > i { display: block; height: 2px; background: var(--wk-text); width: 0; }
.gl-teil { margin: 16px 0 6px; padding-top: 10px; border-top: var(--wk-strich) solid var(--wk-linie); }
.gl-liste { list-style: none; margin: 0; padding: 0; }
.gl-liste a { display: grid; grid-template-columns: 10px 30px 1fr; gap: 0 6px; align-items: baseline; text-decoration: none;
  padding: 5px 4px 5px 6px; position: relative; }
.gl-liste a:hover { background: var(--wk-flaeche-2); }
.gl-liste a.aktiv::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--wk-linie-stark); }
/* Quadrat auf Höhe der ersten Zeile (neben der Nummer), nicht mittig über Titel und Stand */
.gl-liste .q { align-self: start; margin-top: .42em; margin-top: calc(.5lh - 4.5px); }
.gl-nr { color: var(--wk-text-leise); font-variant-numeric: tabular-nums; }
.gl-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gl-unter { grid-column: 3; font-size: var(--wk-groesse-klein); color: var(--wk-text-leise); }
.gl-unter .warn { color: var(--wk-akzent); font-weight: 700; }

/* Statusquadrat: leer → in Arbeit → belegt → final, immer mit Wort daneben oder darunter */
.q { display: inline-block; width: 9px; height: 9px; box-sizing: border-box; border: 1.5px solid var(--wk-text-leise); flex: none; }
.q.in_arbeit { background: var(--st-arbeit); border-color: var(--st-arbeit); }
.q.belegt { background: var(--wk-text); border-color: var(--wk-text); }
.q.final { background: var(--wk-akzent); border-color: var(--wk-akzent); }

.dokument { min-width: 0; padding: 8px 32px 30vh; }
.teil-marke { margin: 40px 0 0; padding-top: 10px; border-top: var(--wk-strich) solid var(--wk-linie); }
.abschnitt { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 360px); gap: 40px; padding: 28px 0 36px;
  border-bottom: var(--wk-strich) solid var(--wk-linie); scroll-margin-top: 104px; }
.ab-text { min-width: 0; }
.ab-titel { font: 700 19px/1.3 var(--wk-schrift); margin: 0; border-left: 3px solid var(--wk-akzent); padding-left: 12px; }
.ab-nr { color: var(--wk-text-leise); font-weight: 400; margin-right: 6px; }
.ab-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 10px 0 0 15px; color: var(--wk-text-leise);
  font-size: var(--wk-groesse-klein); }
.status-wahl { display: inline-flex; align-items: center; gap: 6px; }
.feld-wahl { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.chip { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.status-wahl select, .feld-wahl { font: inherit; color: var(--wk-text); background: transparent; border: 0;
  border-bottom: var(--wk-strich) solid var(--wk-linie); padding: 1px 2px; border-radius: 0; }
.ab-warnung { margin: 10px 0 0 15px; font-size: var(--wk-groesse-klein); }
.ab-warnung .warn { color: var(--wk-akzent); font-weight: 700; }
.ab-warnung .hinweis { color: var(--wk-text-leise); }
.ab-leitfrage { font-style: italic; color: var(--wk-text-leise); margin: 14px 0 0 15px; font-size: 14px; line-height: 1.5; }

.editor, .lesetext { font: 400 var(--text-gross)/1.75 var(--wk-schrift); color: var(--wk-text); margin-top: 16px; outline: none;
  min-height: 3.5em; padding: 4px 0 4px 15px; border-left: var(--wk-strich-aktiv) solid transparent; overflow-wrap: break-word; }
.editor:focus { border-left-color: var(--wk-linie-stark); }
.editor:focus-visible { outline: none; box-shadow: none; }
.editor:empty::before { content: attr(data-leer); color: var(--wk-text-leise); }
.editor p, .lesetext p { margin: 0 0 .9em; }
.editor ul, .editor ol, .lesetext ul, .lesetext ol { margin: 0 0 .9em; padding-left: 1.4em; }
.editor[contenteditable="false"] { cursor: text; }
::highlight(kommentar) { background-color: var(--mk-kommentar); }
::highlight(beleg) { text-decoration: underline; text-decoration-color: var(--wk-text-leise); text-decoration-thickness: 1px; text-underline-offset: 3px; }
::highlight(aktiv) { background-color: var(--mk-aktiv); }

.auswahl { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0 15px; }
.auswahl label { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-gross); cursor: pointer; }
.auswahl input { width: 16px; height: 16px; accent-color: var(--wk-text); margin: 0; }
.auswahl-lesen { margin: 16px 0 0 15px; font-size: var(--text-gross); }

/* --- Rand: Belege und Kommentare neben dem Abschnitt ---------------------------------------------- */
.ab-rand { position: relative; min-width: 0; font-size: 13px; }
.rand-kopf { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; color: var(--wk-text-leise); font-size: var(--wk-groesse-klein); }
.rand-stapel { position: relative; }
.rand-stapel.gesetzt > .eintrag, .rand-stapel.gesetzt > .schreiber { position: absolute; left: 0; right: 0; box-sizing: border-box; }
.eintrag { padding: 8px 0 10px 10px; border-left: var(--wk-strich) solid var(--wk-linie); margin-bottom: 8px; background: var(--wk-grund);
  transition: border-color var(--wk-dauer-kurz); }
.eintrag.aktiv, .eintrag:focus-within { border-left: var(--wk-strich-aktiv) solid var(--wk-linie-stark); padding-left: 9px; }
.eintrag.erledigt { color: var(--wk-text-leise); }
.eintrag .marke { display: flex; align-items: center; gap: 6px; }
.eintrag-titel { font-weight: 400; margin: 2px 0 0; cursor: pointer; }
.eintrag-titel:hover { text-decoration: underline; }
.eintrag .zitat { color: var(--wk-text-leise); font-size: var(--wk-groesse-klein); margin: 3px 0 0; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eintrag .zitat.verwaist { color: var(--wk-akzent); }
.eintrag .text { margin: 4px 0 0; white-space: pre-wrap; line-height: 1.5; }
.eintrag .zeile { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: var(--wk-groesse-klein); color: var(--wk-text-leise); }
.eintrag .antwort { margin: 8px 0 0; padding-top: 6px; border-top: var(--wk-strich) solid var(--wk-linie); }
.person { display: inline-flex; align-items: center; gap: 6px; }
.person::before { content: ""; width: 7px; height: 7px; background: var(--person, var(--wk-text-leise)); flex: none; }
.person b { font-weight: 700; }
.zeit { color: var(--wk-text-leise); font-size: var(--wk-groesse-klein); }
.entwurf-wort { color: var(--wk-text-leise); }
.erledigt-wort { text-decoration: line-through; }
.schreiber { margin: 6px 0 10px; padding: 8px 0 8px 10px; border-left: var(--wk-strich-aktiv) solid var(--wk-linie-stark); background: var(--wk-grund); }
.schreiber textarea, .feld-text, .feld-zeile { width: 100%; box-sizing: border-box; font: 400 var(--text-gross)/1.55 var(--wk-schrift);
  color: var(--wk-text); background: transparent; border: 0; border-bottom: var(--wk-strich) solid var(--wk-linie); padding: 4px 0;
  border-radius: 0; resize: vertical; }
.schreiber textarea { font-size: 14px; min-height: 64px; }
.schreiber-als { margin: 4px 0 6px; }
.schreiber textarea:focus, .feld-text:focus, .feld-zeile:focus, .feld-wahl:focus { outline: none; border-bottom: var(--wk-strich-aktiv) solid var(--wk-linie-stark); }
.schreiber .zeile { display: flex; gap: 14px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.pflicht-fehlt { border-bottom: 2px solid var(--wk-akzent) !important; }
.pflicht-hinweis { color: var(--wk-akzent); font-size: var(--wk-groesse-klein); margin: 4px 0 0; }
.knopf { display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px; border: 0; background: var(--wk-haupt);
  color: var(--wk-auf-haupt); cursor: pointer; font-size: 13px; }
.knopf:hover { filter: brightness(1.15); }
.rand-mobil { display: none; }

/* Leiste an der Markierung */
.markierleiste { position: fixed; z-index: 30; display: flex; gap: 2px; background: var(--wk-haupt); color: var(--wk-auf-haupt); padding: 3px; }
.markierleiste button { background: transparent; border: 0; color: inherit; padding: 6px 10px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.markierleiste button:hover { background: rgba(255, 255, 255, .14); }
.markierleiste button.fett { font-weight: 700; }
.markierleiste button.kursiv { font-style: italic; }

/* --- Listenansichten: Belege, Quellen, Offene Punkte, Einstellungen --------------------------------- */
.seite { padding: 24px 32px 30vh; }
.seite-kopf { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: var(--wk-strich) solid var(--wk-linie); }
.seite-kopf h1 { font: 700 var(--wk-groesse-titel)/1.25 var(--wk-schrift); margin: 0; }
.seite-kopf .unter { color: var(--wk-text-leise); margin: 4px 0 0; }
.seite-kopf .rechts { margin-left: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.block { padding: 20px 0 22px; border-bottom: var(--wk-strich) solid var(--wk-linie); scroll-margin-top: 60px; }
.block.markiert { border-left: var(--wk-strich-aktiv) solid var(--wk-linie-stark); padding-left: 14px; }
.feld { margin-top: 14px; }
.feld > label, .feld > .label { display: block; font-size: var(--wk-groesse-klein); color: var(--wk-text-leise); margin-bottom: 2px; }
.feld > label b { color: var(--wk-text); font-weight: 700; }
.feld-titel { font: 700 17px/1.35 var(--wk-schrift) !important; }
.feld-text { min-height: 72px; }
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.chip { display: inline-flex; gap: 6px; align-items: baseline; }
.chip button { background: none; border: 0; color: var(--wk-text-leise); cursor: pointer; padding: 0 2px; }
.chip button:hover { color: var(--wk-akzent); }
.chip .klein { color: var(--wk-text-leise); font-size: var(--wk-groesse-klein); }
.kasten { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.kasten input { width: 16px; height: 16px; accent-color: var(--wk-text); margin: 0; }
.leise { color: var(--wk-text-leise); }
.klein { font-size: var(--wk-groesse-klein); }
.warn { color: var(--wk-akzent); font-weight: 700; }
.lesen-wert { white-space: pre-wrap; line-height: 1.6; font-size: var(--text-gross); }
.filter { display: flex; gap: 10px; align-items: baseline; }
.leer-hinweis { color: var(--wk-text-leise); padding: 24px 0; }

.punkt { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; padding: 12px 0; border-bottom: var(--wk-strich) solid var(--wk-linie); }
.punkt input[type="checkbox"] { width: 16px; height: 16px; margin: 4px 0 0; accent-color: var(--wk-text); }
.punkt .feld-zeile { font-size: 14px; }
.punkt.kritisch .feld-zeile, .punkt.kritisch .p-text { color: var(--wk-akzent); font-weight: 700; }
.punkt.erledigt .feld-zeile, .punkt.erledigt .p-text { text-decoration: line-through; color: var(--wk-text-leise); font-weight: 400; }
.punkt .zeile { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--wk-groesse-klein); color: var(--wk-text-leise); align-items: baseline; }
.neu-zeile { display: flex; gap: 14px; align-items: flex-end; padding: 16px 0; border-bottom: var(--wk-strich) solid var(--wk-linie); }

.gast-zeile { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 12px 0; border-bottom: var(--wk-strich) solid var(--wk-linie); }
.link-neu { word-break: break-all; padding: 10px 0; font-family: var(--wk-schrift-mono); font-size: 12px; }
.codes { font-family: var(--wk-schrift-mono); columns: 2; padding: 0; list-style: none; }

/* --- Dialog / Blatt ---------------------------------------------------------------------------------- */
.schleier { position: fixed; inset: 0; background: var(--wk-schleier); z-index: 40; display: grid; place-items: center; padding: 16px; }
.dialog { background: var(--wk-grund); color: var(--wk-text); width: min(560px, 100%); max-height: 86vh; overflow: auto; padding: 22px 24px;
  box-sizing: border-box; border-top: var(--wk-strich-aktiv) solid var(--wk-linie-stark); }
.dialog h2 { font: 700 17px/1.3 var(--wk-schrift); margin: 0 0 12px; }
.dialog .zeile { display: flex; gap: 16px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.dialog .wahl-liste { list-style: none; margin: 8px 0 0; padding: 0; max-height: 44vh; overflow: auto; }
.dialog .wahl-liste button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: var(--wk-strich) solid var(--wk-linie);
  padding: 10px 4px; cursor: pointer; }
.dialog .wahl-liste button:hover { background: var(--wk-flaeche-2); }
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vergleich > div { max-height: 40vh; overflow: auto; font-size: 13px; line-height: 1.55; border-top: var(--wk-strich) solid var(--wk-linie); padding-top: 8px; }

/* --- Anmeldung ----------------------------------------------------------------------------------- */
.anmeldung { max-width: 380px; margin: 12vh auto; padding: 0 20px; }
.anmeldung h1 { font: 700 var(--wk-groesse-titel)/1.25 var(--wk-schrift); margin: 0 0 6px; }
.anmeldung form { margin-top: 18px; }
.anmeldung .feld-zeile { font-size: 15px; }
.anmeldung .zeile { margin-top: 20px; display: flex; gap: 16px; align-items: center; }
.qr svg { width: 200px; height: 200px; display: block; margin: 12px 0; background: #fff; padding: 8px; }

/* --- Formatierungsleiste (wie klmmbrtt) --------------------------------------------------------- */
.formatleiste { position: sticky; top: 48px; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  margin: 0 -32px; padding: 6px 32px; background: var(--wk-grund); border-bottom: var(--wk-strich) solid var(--wk-linie); }
.fl-gruppe { display: inline-flex; gap: 2px; }
.fl-trenner { width: 1px; height: 20px; background: var(--wk-linie); margin: 0 6px; }
.fl-knopf { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; border: 0; background: none;
  color: var(--wk-text-leise); cursor: pointer; font-size: 14px; border-bottom: var(--wk-strich-aktiv) solid transparent; }
.fl-knopf:hover { background: var(--wk-flaeche-2); color: var(--wk-text); }
.fl-knopf.aktiv { color: var(--wk-text); border-bottom-color: var(--wk-linie-stark); background: var(--wk-flaeche-2); }
.fl-knopf b, .fl-knopf i, .fl-knopf u, .fl-knopf s { font-family: var(--wk-schrift); font-size: 15px; }
.formatleiste.ohne-ziel .fl-knopf { opacity: .55; }
.fl-format { position: relative; }
.fl-format-knopf { display: inline-flex; align-items: center; gap: 6px; height: 30px; min-width: 132px; justify-content: space-between; padding: 0 8px;
  border: 0; border-bottom: var(--wk-strich) solid var(--wk-linie); background: none; cursor: pointer; color: var(--wk-text); font-size: 13px; }
.fl-format-liste { position: absolute; top: 34px; left: 0; z-index: 30; min-width: 230px; background: var(--wk-grund); padding: 4px 0;
  border: var(--wk-strich) solid var(--wk-linie-stark); display: flex; flex-direction: column; }
.fl-format-liste[hidden] { display: none; }
.fl-option { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 12px; border: 0; background: none;
  text-align: left; cursor: pointer; color: var(--wk-text); }
.fl-option:hover { background: var(--wk-flaeche-2); }
.fl-taste { color: var(--wk-text-leise); font-size: 11px; white-space: nowrap; }
.fo-p .fl-probe { font-size: 14px; }
.fo-h3 .fl-probe { font-size: 19px; font-weight: 700; }
.fo-h4 .fl-probe { font-size: 16px; font-weight: 700; }
.fo-h5 .fl-probe { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.fo-blockquote .fl-probe { font-style: italic; border-left: 2px solid var(--wk-linie-stark); padding-left: 8px; }

/* Formate im Text (Editor und Leseansicht) */
.editor h3, .lesetext h3 { font: 700 1.25em/1.3 var(--wk-schrift); margin: 1.2em 0 .4em; }
.editor h4, .lesetext h4 { font: 700 1.08em/1.35 var(--wk-schrift); margin: 1em 0 .35em; }
.editor h5, .lesetext h5 { font: 700 .86em/1.4 var(--wk-schrift); margin: 1em 0 .3em; text-transform: uppercase; letter-spacing: .05em; }
.editor blockquote, .lesetext blockquote { margin: 0 0 .9em; padding: 2px 0 2px 14px; border-left: 2px solid var(--wk-linie-stark); font-style: italic; color: var(--wk-text-2, var(--wk-text)); }
.editor blockquote p, .lesetext blockquote p { margin: 0 0 .4em; }
.editor a, .lesetext a { color: inherit; text-decoration: underline; text-decoration-color: var(--wk-akzent); text-underline-offset: 2px; }
.editor .ausr-mitte, .lesetext .ausr-mitte { text-align: center; }
.editor .ausr-rechts, .lesetext .ausr-rechts { text-align: right; }
.editor .ausr-block, .lesetext .ausr-block { text-align: justify; hyphens: auto; }
.editor li > ul, .editor li > ol, .lesetext li > ul, .lesetext li > ol { margin: .2em 0 .2em; }
ul.checkliste { list-style: none; padding-left: 0; }
ul.checkliste > li { position: relative; padding-left: 26px; }
ul.checkliste > li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 13px; height: 13px; box-sizing: border-box;
  border: 1.5px solid var(--wk-text-leise); background: var(--wk-grund); }
ul.checkliste > li.erledigt { color: var(--wk-text-leise); text-decoration: line-through; }
ul.checkliste > li.erledigt::before { background: var(--wk-text); border-color: var(--wk-text);
  box-shadow: inset 0 0 0 2px var(--wk-grund); }
.editor[contenteditable="true"] ul.checkliste > li::before { cursor: pointer; }
::highlight(marginalie) { text-decoration: underline dotted; text-decoration-color: var(--wk-akzent); text-underline-offset: 3px; }

/* --- Gliederung bearbeiten ----------------------------------------------------------------------- */
.gl-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gl-liste li { position: relative; }
.gl-liste li.gl-bearb { padding-bottom: 4px; border-bottom: var(--wk-strich) solid var(--wk-linie); }
.gl-werkzeug { display: flex; gap: 2px; padding: 0 0 2px 52px; }
.gl-knopf { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; background: none; cursor: pointer; color: var(--wk-text-leise); }
.gl-knopf:hover:not([disabled]) { background: var(--wk-flaeche-2); color: var(--wk-text); }
.gl-knopf.gefahr:hover { color: var(--wk-akzent); }
.gl-knopf[disabled] { opacity: .3; cursor: default; }
.gl-neu { margin: 6px 0 0 6px; font-size: var(--wk-groesse-klein); }
.ab-felder { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 0 16px; }
.knopf.gefahr { background: var(--wk-akzent); color: var(--wk-auf-akzent); }

/* Marginalien am Rand */
.eintrag.marginalie { border-left-color: var(--wk-akzent); }
.eintrag.marginalie .marke { color: var(--wk-akzent); }
.marginalie-text { font-style: italic; cursor: pointer; margin: 2px 0 0 !important; }

/* --- Karten: Belege, Quellen, Offene Punkte ----------------------------------------------------- */
.karten-leiste { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 22px; padding: 16px 0 12px; }
.karten-leiste .suche { flex: 1 1 220px; max-width: 360px; }
.karten-leiste .suche input { font-size: 14px; }
.karten-alle { margin-left: auto; display: flex; gap: 14px; }
.karten { display: flex; flex-direction: column; gap: 10px; }
.karte { border: var(--wk-strich) solid var(--wk-linie); background: var(--wk-grund); scroll-margin-top: 64px; }
.karte:hover { border-color: var(--wk-linie-stark); }
.karte.offen { border-color: var(--wk-linie-stark); }
.karte.markiert { border-left: 3px solid var(--wk-akzent); }
.karte-kopf { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 0 8px; }
.karte-schalter { flex: 1; display: flex; align-items: flex-start; gap: 6px; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 0; color: var(--wk-text); min-width: 0; }
.karte-pfeil { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--wk-text);
  transition: transform var(--wk-dauer-kurz); }
.karte.offen > .karte-kopf .karte-pfeil, .karte.offen .klein-schalter .karte-pfeil, [aria-expanded="true"] > .karte-pfeil { transform: rotate(90deg); }
.karte-titel { font: 700 16px/1.35 var(--wk-schrift); }
.karte-status { flex: none; font-size: var(--wk-groesse-klein); padding: 2px 8px; border: var(--wk-strich) solid var(--wk-linie); white-space: nowrap; margin-top: 2px; }
.karte-status.voll { border-color: var(--wk-text); color: var(--wk-text); }
.karte-status.entwurf { color: var(--wk-text-leise); border-style: dashed; }
.karte-status.art-wissenschaftlich { border-color: var(--wk-text); }
.karte-status.art-markt { border-style: dashed; color: var(--wk-text-leise); }
.karte-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; padding: 4px 14px 12px 34px; font-size: var(--wk-groesse-klein); color: var(--wk-text-leise); }
.karte-meta .trenn { margin: 0 8px; }
.karte-meta a { color: var(--wk-text-leise); }
.marke-ab { display: inline-block; padding: 0 6px; margin-right: 4px; border: var(--wk-strich) solid var(--wk-linie); text-decoration: none; color: var(--wk-text) !important; font-variant-numeric: tabular-nums; }
.marke-ab:hover { border-color: var(--wk-linie-stark); }
.karte-vorschau { margin: -6px 14px 12px 34px; color: var(--wk-text-2, var(--wk-text)); font-size: 14px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.karte.offen .karte-vorschau { display: none; }
.karte-inhalt { padding: 2px 18px 18px 34px; border-top: var(--wk-strich) solid var(--wk-linie); }
.karte-inhalt > .feld:first-child, .karte-inhalt > .zwei:first-child .feld, .karte-inhalt > .chips:first-child { margin-top: 12px; }
.karte-fuss { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; padding-top: 12px; border-top: var(--wk-strich) solid var(--wk-linie); }
.nicht-feld { border-left: 2px solid var(--wk-linie-stark); padding-left: 12px; }
.drei { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 24px; }
.zwei { gap: 0 32px; }
.punkt-karte { padding: 0; }
.punkt-zeile { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 10px 4px 12px; }
.punkt-kasten { width: 16px; height: 16px; margin: 6px 0 0; accent-color: var(--wk-text); }
.punkt-feld .feld-zeile { font-size: 15px; border-bottom-color: transparent; }
.punkt-feld .feld-zeile:hover { border-bottom-color: var(--wk-linie); }
.punkt-karte .karte-meta { padding-left: 44px; padding-bottom: 10px; }
.punkt-karte .karte-inhalt { padding: 12px 14px 14px 44px; }
.punkt-karte.kritisch { border-left: 3px solid var(--wk-akzent); }
.punkt-karte.kritisch .feld-zeile, .punkt-karte.kritisch .p-text { font-weight: 700; }
.punkt-karte.erledigt .feld-zeile, .punkt-karte.erledigt .p-text { text-decoration: line-through; color: var(--wk-text-leise); font-weight: 400; }
.p-text { padding-top: 4px; line-height: 1.5; }
.klein-schalter { flex: none; width: 30px; height: 30px; display: grid; place-items: center; }
.klein-schalter svg { transition: transform var(--wk-dauer-kurz); }
.klein-schalter[aria-expanded="true"] svg { transform: rotate(90deg); }
.gruppe-schalter { display: flex; align-items: center; gap: 4px; margin: 26px 0 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 11px/1.4 var(--wk-schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--wk-text-leise); }

/* --- Leseansicht ------------------------------------------------------------------------------- */
.lesen-leiste { position: sticky; top: 48px; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 20px;
  background: var(--wk-grund); border-bottom: var(--wk-strich) solid var(--wk-linie); font-size: 13px; }
.ll-knopf { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border: 0; background: none; cursor: pointer; color: var(--wk-text-leise); }
.ll-knopf:hover { background: var(--wk-flaeche-2); color: var(--wk-text); }
.ll-knopf[aria-pressed="true"] { color: var(--wk-text); }
.ll-zoom .ll-knopf { min-width: 30px; justify-content: center; font-size: 16px; }
.ll-zoom .ll-zoom-wert { font-size: 13px; min-width: 56px; font-variant-numeric: tabular-nums; }
.ll-gruppe { display: inline-flex; align-items: center; gap: 2px; }
.ll-wahl { display: inline-flex; align-items: baseline; gap: 6px; }
.ll-label { color: var(--wk-text-leise); font-size: var(--wk-groesse-klein); }
.ll-schalter { height: 28px; padding: 0 10px; border: 0; background: none; cursor: pointer; color: var(--wk-text-leise); }
.ll-schalter:hover { color: var(--wk-text); }
/* Gewählt: grau hinterlegt statt umrandet (Johannes 09.10.) */
.ll-schalter[aria-pressed="true"], .ll-knopf[aria-pressed="true"] { color: var(--wk-text); background: var(--wk-flaeche-2); }
.ll-schalter:focus-visible, .ll-knopf:focus-visible { outline: 2px solid var(--wk-linie); outline-offset: 1px; }
.ll-rechts { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; }
.ll-druck { font-size: 12px; }

.lesen-aufbau { --l-text: 46em; display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - 48px - var(--ll, 44px)); }
.lesen-aufbau.ohne-verzeichnis { grid-template-columns: minmax(0, 1fr); }
.lesen-aufbau.ohne-verzeichnis .lesen-verzeichnis { display: none; }
.lesen-aufbau.breite-schmal { --l-text: 36em; }
.lesen-aufbau.breite-breit { --l-text: 60em; }
.lesen-aufbau.breite-voll { --l-text: 200em; }
.lesen-verzeichnis { position: sticky; top: calc(48px + var(--ll, 44px)); align-self: start; max-height: calc(100vh - 48px - var(--ll, 44px)); overflow-y: auto; box-sizing: border-box;
  padding: 18px 14px 40px 16px; border-right: var(--wk-strich) solid var(--wk-linie); font-size: 13px; background: var(--wk-grund); }
.vz-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.vz-liste a { display: flex; gap: 6px; padding: 3px 4px 3px 8px; text-decoration: none; color: var(--wk-text-2, var(--wk-text)); position: relative; line-height: 1.35; }
.vz-liste a:hover { background: var(--wk-flaeche-2); }
.vz-liste a.aktiv::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; background: var(--wk-linie-stark); }
.vz-teil > a { font: 700 10.5px/1.4 var(--wk-schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--wk-text-leise); margin-top: 12px; }
.vz-s1 > a { font-weight: 700; margin-top: 4px; }
.vz-s2 > a { padding-left: 20px; }
.vz-s3 > a { padding-left: 32px; font-size: 12.5px; }
.vz-s4 > a { padding-left: 44px; font-size: 12px; color: var(--wk-text-leise); }
.vz-marginalie > a { font-style: italic; }
.vz-marginalie > a::before { content: ""; position: absolute; left: 36px; top: 5px; bottom: 5px; width: 2px; background: var(--wk-akzent); }
.vz-nr { color: var(--wk-text-leise); font-variant-numeric: tabular-nums; flex: none; }
.vz-schalter { display: flex; margin-top: 16px; color: var(--wk-text-leise); }
.lesen-flaeche { min-width: 0; padding: 32px 32px 30vh; }
.verzeichnis-druck { display: none; }
.randnotiz { display: none; }

/* Das Dokument: Maße aus der Vorlage (--v-…), am Bildschirm übersteuerbar (--l-…, Zoom) */
.druck { --v-schrift: var(--wk-schrift); --v-groesse: 11; --v-zeilen: 1.55; --v-akzent: #C1442D; --zoom: 1.1;
  max-width: none; margin: 0; padding: 0; color: var(--wk-text);
  font-family: var(--l-schrift, var(--v-schrift)); font-size: calc(var(--v-groesse) * 1.3333px * var(--zoom)); line-height: var(--l-zeilen, var(--v-zeilen)); }
.druck .deckblatt, .druck > h2.teil, .druck .anhang-beleg, .druck > h4 { max-width: var(--l-text); }
.lesen-abschnitt { display: grid; grid-template-columns: minmax(0, var(--l-text)) minmax(220px, 300px); gap: 40px; scroll-margin-top: 100px; }
.lesen-aufbau.ohne-rand .lesen-abschnitt { grid-template-columns: minmax(0, var(--l-text)); }
.lesen-aufbau.ohne-rand .lesen-abschnitt .ab-rand { display: none; }
.lesen-abschnitt .ab-rand { font-size: 13px; line-height: 1.5; font-family: var(--wk-schrift); padding-top: 2.6em; }
.lesen-abschnitt .ab-rand .rand-kopf { opacity: 0; transition: opacity var(--wk-dauer-kurz); }
.lesen-abschnitt:hover .ab-rand .rand-kopf, .lesen-abschnitt .ab-rand .rand-kopf:focus-within { opacity: 1; }
/* Deckblatt steht für sich: füllt den sichtbaren Bereich unter den Leisten, Teil 1 beginnt erst darunter */
.druck .deckblatt { box-sizing: border-box; min-height: calc(100vh - 48px - var(--ll, 44px) - 32px); min-height: calc(100dvh - 48px - var(--ll, 44px) - 32px); }
html.ruhe .druck:not(.druckform) .deckblatt { min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); }
.druck .deckblatt h1 { font-size: 1.75em; border-left-color: var(--v-akzent); }
.druck.deckblatt-mitte .deckblatt { text-align: center; align-items: center; }
.druck.deckblatt-mitte .deckblatt h1 { border-left: 0; padding-left: 0; }
.druck.deckblatt-mitte .deckblatt dl { text-align: left; }
.druck h2.teil { font-size: .75em; margin-top: 3.2em; }
.druck .la-titel { font: 700 1.15em/1.35 var(--l-schrift, var(--v-schrift)); margin: 2em 0 .7em; border-left: 3px solid var(--v-akzent); padding-left: 10px; break-after: avoid; }
.druck.titel-schlicht .la-titel, .druck.titel-kapitaelchen .la-titel, .druck.ohne-akzent .la-titel { border-left: 0; padding-left: 0; }
.druck.titel-kapitaelchen .la-titel { font-variant: small-caps; letter-spacing: .04em; font-weight: 600; }
.druck.ohne-akzent .deckblatt h1 { border-left: 0; padding-left: 0; }
.la-nr { color: var(--wk-text-leise); font-weight: 400; }
.druck .lesetext { font: inherit; line-height: inherit; margin-top: 0; padding-left: 0; border: 0; min-height: 0; }
.druck .lesetext h3, .druck .lesetext h4, .druck .lesetext h5 { font-family: inherit; scroll-margin-top: 100px; break-after: avoid; }
.druck.ausr-text-block .lesetext p, .druck.ausr-text-block .lesetext li { text-align: justify; hyphens: auto; }
.druck.ausr-text-block .lesetext .ausr-mitte { text-align: center; }
.druck.ausr-text-block .lesetext .ausr-rechts { text-align: right; }
.druck.nummeriert .lesetext [data-nr]::before { content: attr(data-nr) "\00a0\00a0"; font-weight: 400; color: var(--wk-text-leise); }
.druck .ankreuz { margin: 0 0 1em; }

/* Vorlage und Ausgabe: Seitenleiste rechts */
.vorlage-panel { position: fixed; top: calc(48px + var(--ll, 44px)); right: 0; bottom: 0; z-index: 18; width: min(420px, 100vw); box-sizing: border-box; overflow-y: auto;
  background: var(--wk-grund); border-left: var(--wk-strich) solid var(--wk-linie-stark); padding: 0; font-size: 13px; display: flex; flex-direction: column; }
.vorlage-panel[hidden] { display: none; }
/* Kopf und Druckknopf bleiben stehen, nur die Gruppen dazwischen rollen */
.vp-kopf { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 12px 20px;
  background: var(--wk-grund); border-bottom: var(--wk-strich) solid var(--wk-linie); }
.vp-kopf h2 { font: 700 16px/1.3 var(--wk-schrift); margin: 0; }
.vp-rumpf { flex: 1 0 auto; padding: 4px 20px 16px; }
.vp-gruppe { border-bottom: var(--wk-strich) solid var(--wk-linie); }
.vp-gruppe > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel pfeil" "unter pfeil";
  align-items: center; column-gap: 10px; padding: 12px 0; cursor: pointer; }
.vp-gruppe > summary::-webkit-details-marker { display: none; }
.vp-gruppe > summary:focus-visible { outline: 2px solid var(--wk-fokus); outline-offset: 2px; }
.vp-gruppe-titel { grid-area: titel; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.vp-gruppe-unter { grid-area: unter; color: var(--wk-text-leise); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-gruppe[open] > summary .vp-gruppe-unter { display: none; }
.vp-pfeil { grid-area: pfeil; display: grid; place-items: center; color: var(--wk-text-leise); transform: rotate(-90deg); transition: transform var(--wk-dauer-kurz); }
.vp-gruppe[open] > summary .vp-pfeil { transform: none; }
.vp-gruppe-inhalt { padding: 0 0 14px; }
/* Einstellungszeile: Bezeichnung und Hinweis links, Bedienelement rechts auf einer Linie */
.vp-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 0; }
.vp-zeile + .vp-zeile { border-top: var(--wk-strich) solid var(--wk-linie); }
.vp-zeile-block { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.vp-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; cursor: default; }
label.vp-text { cursor: pointer; }
.vp-titel { color: var(--wk-text); }
.vp-hinweis { color: var(--wk-text-leise); font-size: 12px; line-height: 1.35; }
.vp-bedienung { display: flex; align-items: center; justify-content: flex-end; }
.vp-wahl { width: 11.5em; max-width: 100%; font-size: 13px; }
/* Schalter statt Kästchen: gleich breit, rechtsbündig untereinander */
.vp-schalter { appearance: none; -webkit-appearance: none; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 10px; position: relative; cursor: pointer;
  background: var(--wk-linie-stark); transition: background var(--wk-dauer-kurz); }
.vp-schalter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--wk-grund);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--wk-dauer-kurz); }
.vp-schalter:checked { background: var(--wk-haupt); }
.vp-schalter:checked::after { transform: translateX(14px); background: var(--wk-auf-haupt); }
.vp-schalter:focus-visible { outline: 2px solid var(--wk-fokus); outline-offset: 2px; }
.vp-vorlagen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vp-vorlage { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 8px 10px; border: var(--wk-strich) solid var(--wk-linie); background: none; cursor: pointer; color: var(--wk-text); }
.vp-vorlage:hover { border-color: var(--wk-linie-stark); }
.vp-vorlage.aktiv { background: var(--wk-flaeche-2); border-color: var(--wk-flaeche-2); }
.vp-zurueck { margin-top: 8px; }
.vp-raender { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vp-rand { display: flex; flex-direction: column; gap: 2px; color: var(--wk-text-leise); font-size: 11px; }
.vp-rand .feld-zeile { text-align: center; }
.vp-info { margin: 6px 0 0; color: var(--wk-text-leise); font-size: 12px; line-height: 1.4; }
.vp-label { margin-top: 12px; color: var(--wk-text-leise); font-size: 12px; }
.vorlage-panel .feld { margin-top: 10px; }
.vorlage-panel .feld label { display: block; color: var(--wk-text-leise); font-size: 12px; margin-bottom: 2px; }
.vorlage-panel .feld-zeile { font-size: 13px; }
.vorlage-panel input[type="color"] { width: 40px; height: 24px; border: var(--wk-strich) solid var(--wk-linie); padding: 0; background: none; cursor: pointer; }
.vorlage-panel input[type="color"]:disabled { opacity: .35; cursor: default; }
.vorlage-panel .drei { grid-template-columns: minmax(0, 1fr); }
.vp-fuss { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 20px 14px; background: var(--wk-grund);
  border-top: var(--wk-strich) solid var(--wk-linie); }
.vp-fuss .knopf { display: inline-flex; justify-content: center; align-items: center; gap: 8px; width: 100%; }
.lesen-aufbau.panel-offen .lesen-flaeche { margin-right: min(420px, 100vw); }
.platzhalter { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.chip-knopf { font: 12px/1.6 var(--wk-schrift-mono); padding: 0 6px; border: var(--wk-strich) solid var(--wk-linie); background: none; cursor: pointer; color: var(--wk-text-leise); }
.chip-knopf:hover { border-color: var(--wk-linie-stark); color: var(--wk-text); }
.vp-vorschau { margin: 2px 0 4px; }
.vp-seite { border: var(--wk-strich) solid var(--wk-linie-stark); background: #fff; color: #555; font-size: 10px; padding: 8px 10px; }
.vp-kopfzeile, .vp-fusszeile { display: flex; justify-content: space-between; gap: 10px; min-height: 13px; }
.vp-fusszeile > span:nth-child(2) { text-align: center; }
.vp-fusszeile > span:last-child, .vp-kopfzeile > span:last-child { text-align: right; }
.vp-seitentext { height: 34px; margin: 6px 0; background: repeating-linear-gradient(#e6e6e6 0 2px, transparent 2px 7px); }

/* --- Leseansicht: Grundformen ------------------------------------------------------------------ */
.deckblatt { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.deckblatt .art { color: var(--wk-text-leise); text-transform: uppercase; letter-spacing: .08em; font-size: .72em; font-weight: 700; }
.deckblatt h1 { font-weight: 700; font-size: 26px; line-height: 1.3; margin: 10px 0 40px; border-left: 3px solid var(--wk-akzent); padding-left: 14px; }
.deckblatt dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
.deckblatt dt { color: var(--wk-text-leise); }
.deckblatt dd { margin: 0; }
.druck h2.teil { font: 700 11px/1.4 var(--wk-schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--wk-text-leise);
  margin: 48px 0 0; padding-top: 10px; border-top: var(--wk-strich) solid var(--wk-linie); }
.druck h4 { font-weight: 700; font-size: 1em; line-height: 1.4; margin: 20px 0 4px; break-after: avoid; }
.druck .leer { color: var(--wk-text-leise); font-style: italic; }
.druck .anhang-beleg { break-inside: avoid; margin-bottom: 16px; font-size: .87em; }
.druck .anhang-beleg p { margin: 2px 0; }
.druck .nicht { border-left: 2px solid var(--wk-linie-stark); padding-left: 8px; }
.ankreuz { list-style: none; padding: 0; margin: 0; }

@media print {
  @page { size: A4; margin: 22mm 20mm 20mm; }
  :root { --wk-wenn-hell: ; --wk-wenn-dunkel: initial; color-scheme: light; }
  body.wk { background: #fff; color: #000; }
  .leiste, .lesen-leiste, .lesen-verzeichnis, .vorlage-panel, .wk-toasts, .markierleiste, .schleier, .ab-rand, .formatleiste, .seiten-mass-huelle { display: none !important; }
  .lesen-aufbau, .lesen-aufbau.ohne-verzeichnis { display: block; min-height: 0; }
  .lesen-flaeche, .lesen-aufbau.panel-offen .lesen-flaeche { padding: 0; margin: 0; }
  a { text-decoration: none; }
  ::highlight(kommentar), ::highlight(beleg), ::highlight(aktiv), ::highlight(marginalie) { background: none; text-decoration: none; }
}

/* --- Druckform (1.3): Satz des gedruckten Dokuments. Gilt beim Drucken (beforeprint setzt die Klasse) und für die
   unsichtbare Kopie, an der die Seitenumbrüche fürs Inhaltsverzeichnis gemessen werden — eine Regel für beides. ----- */
.druck.druckform { font-size: calc(var(--v-groesse) * 1pt); font-family: var(--v-schrift); line-height: var(--v-zeilen); color: #000;
  max-width: none !important; margin: 0 !important; padding: 0; background: #fff; }
.druckform sup.fussnote { color: #000; }
.druckform .fn-liste { font-size: 8.5pt; }
.druckform a.extern { color: #000; }
.druckform .deckblatt, .druckform > h2.teil, .druckform .anhang-beleg, .druckform > h4 { max-width: none; }
.druckform .lesen-abschnitt { display: block; }
.druckform .ab-rand { display: none !important; }
/* Seitenarten: Vorspann (Deckblatt, Verzeichnis) und Hauptteil, getrennt gezählt */
.druckform .deckblatt, .druckform .verzeichnis-druck { page: vorspann; }
.druckform > :not(.deckblatt):not(.verzeichnis-druck) { page: haupt; }
.druckform .deckblatt { min-height: 0; height: calc(var(--seite-h, 247mm) - 2mm); box-sizing: border-box; break-after: page; overflow: hidden; }
.druckform h2.teil { break-before: page; margin-top: 0; }
.druckform .la-titel, .druckform h2.teil { font-family: var(--v-schrift); }
.druckform.mit-verzeichnis .verzeichnis-druck { display: block; break-after: page; }
.druckform .verzeichnis-druck .vz-titel { font: 700 1.3em/1.3 var(--v-schrift); margin: 0 0 1em; }
.druckform .verzeichnis-druck .vz-liste { list-style: none; margin: 0; padding: 0; }
.druckform .verzeichnis-druck .vz-liste li { display: flex; align-items: baseline; gap: .6em; padding: .15em 0; break-inside: avoid; }
.druckform .verzeichnis-druck .vz-text { flex: 0 1 auto; }
.druckform .verzeichnis-druck .vz-punkte { flex: 1 1 1em; min-width: 1em; border-bottom: 1px dotted #888; transform: translateY(-.25em); }
.druckform .verzeichnis-druck .vz-seite { flex: none; min-width: 1.8em; text-align: right; font-variant-numeric: tabular-nums; font-weight: 400; font-style: normal; }
.druckform.ohne-seitenzahlen .verzeichnis-druck .vz-punkte, .druckform.ohne-seitenzahlen .verzeichnis-druck .vz-seite { display: none; }
.druckform .verzeichnis-druck .vz-teil { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8em; margin-top: 1em; color: #555; }
.druckform .verzeichnis-druck .vz-s1 { font-weight: 700; margin-top: .4em; }
.druckform .verzeichnis-druck .vz-s2 { padding-left: 1.6em; }
.druckform .verzeichnis-druck .vz-s3 { padding-left: 3em; }
.druckform .verzeichnis-druck .vz-s4 { padding-left: 4.4em; font-style: italic; color: #555; }
.druckform .verzeichnis-druck .vz-nr { min-width: 2.4em; color: #555; }
/* Marginalien: schmale Spalte rechts im Satzspiegel (Gleitobjekt in den Innenabstand) */
.druckform.rand-drucken .lesetext, .druckform.rand-belege .lesetext { padding-right: 36mm; }
.druckform.rand-drucken .rn-marg, .druckform.rand-belege .rn-beleg { display: block; float: right; clear: right; width: 31mm; margin: .15em -36mm .3em 0;
  font: italic 8pt/1.3 var(--v-schrift); color: #333; border-left: 1.5px solid var(--v-akzent); padding-left: 2mm; text-align: left; text-indent: 0;
  font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Belege am Rand: aufrecht, mit Kennung, damit sie sich von Marginalien unterscheiden */
.druckform.rand-belege .rn-beleg { font-style: normal; font-size: 7.5pt; border-left-style: dotted; }
.druckform.rand-belege .rn-beleg::before { content: "Beleg · "; font-weight: 700; letter-spacing: .03em; }
.druckform.ohne-akzent .rn-marg, .druckform.ohne-akzent .rn-beleg { border-left-color: #999; }
/* Links am Rand: klickbar im PDF, umbrechen statt über den Rand laufen */
.druckform .randnotiz a { color: inherit; text-decoration: underline; text-decoration-thickness: .5px; overflow-wrap: anywhere; }
.druckform .rn-link { display: block; margin-top: .2em; font-size: 7pt; color: #555; overflow-wrap: anywhere; }
/* Messkopie: Seiten als Spalten in Satzspiegelgröße; dieselbe Umbruchlogik wie beim Drucken */
.seiten-mass-huelle { position: fixed; left: 0; top: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; z-index: -1; }
.seiten-mass { column-count: 1; column-gap: 0; column-fill: auto; }
.seiten-mass .deckblatt, .seiten-mass .verzeichnis-druck { break-after: column !important; }
.seiten-mass h2.teil { break-before: column !important; }

/* --- Zwischengröße: Gliederung als Schublade ----------------------------------------------------- */
@media (max-width: 1180px) {
  .aufbau { grid-template-columns: minmax(0, 1fr); }
  .gliederung-knopf { display: inline-block; }
  .gliederung { position: fixed; left: 0; top: 49px; bottom: 0; width: 300px; max-height: none; z-index: 25; transform: translateX(-102%);
    transition: transform var(--wk-dauer-mittel); border-right: var(--wk-strich) solid var(--wk-linie-stark); }
  .aufbau.gliederung-offen .gliederung { transform: none; }
  .formatleiste { top: 48px; }
  /* Lesen: Verzeichnis als Schublade über dem Text */
  .lesen-aufbau { grid-template-columns: minmax(0, 1fr); }
  .lesen-verzeichnis { position: fixed; left: 0; top: calc(48px + var(--ll, 44px)); bottom: 0; width: 300px; max-height: none; z-index: 17; border-right-color: var(--wk-linie-stark); }
}
@media (max-width: 1180px) and (min-width: 701px) {
  .lesen-abschnitt { grid-template-columns: minmax(0, var(--l-text)) 220px; gap: 28px; }
}
@media (max-width: 1000px) and (min-width: 701px) {
  .abschnitt { grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; }
}

/* --- Telefon ---------------------------------------------------------------------------------- */
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  .leiste { padding: 0 12px; gap: 12px; }
  .leiste-marke { display: none; }
  .leiste nav { gap: 14px; }
  .speicher-wort, .nav-lang { display: none; }
  .gliederung { width: 86vw; }
  .dokument { padding: 0 16px 40vh; }
  .abschnitt { display: block; padding: 22px 0 26px; }
  .ab-meta, .ab-warnung, .ab-leitfrage, .auswahl, .auswahl-lesen { margin-left: 0; }
  .ab-titel { font-size: 18px; }
  .editor, .lesetext { padding-left: 0; border-left: 0; }
  .ab-rand { margin-top: 14px; }
  .ab-rand .rand-stapel.gesetzt > .eintrag, .ab-rand .rand-stapel.gesetzt > .schreiber { position: static; }
  .seite { padding: 16px 16px 40vh; }
  .zwei { grid-template-columns: minmax(0, 1fr); }
  .schleier { place-items: end stretch; padding: 0; }
  .dialog { width: 100%; max-height: 88vh; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .vergleich { grid-template-columns: 1fr; }
  .markierleiste { left: 0 !important; right: 0; top: auto !important; bottom: 0; justify-content: center; flex-wrap: wrap;
    padding-bottom: calc(3px + env(safe-area-inset-bottom)); }
  .formatleiste { margin: 0 -16px; padding: 4px 8px; top: 48px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .fl-format-knopf { min-width: 110px; }
  .fl-format-liste { position: fixed; top: auto; left: 8px; right: 8px; }
  .karten-leiste .suche { max-width: none; flex-basis: 100%; }
  .karten-alle { margin-left: 0; }
  .karte-inhalt { padding: 2px 14px 16px 14px; }
  .karte-meta, .karte-vorschau { padding-left: 14px; margin-left: 14px; }
  .karte-meta { padding-left: 34px; }
  .drei, .ab-felder { grid-template-columns: minmax(0, 1fr); }
  .lesen-leiste { padding: 6px 10px; gap: 4px 8px; }
  .lesen-leiste .ll-wahl .ll-label, .ll-knopf span { display: none; }
  .ll-rechts { margin-left: 0; }
  .lesen-verzeichnis { width: 86vw; }
  .lesen-flaeche { padding: 20px 16px 20vh; }
  .lesen-abschnitt { display: block; }
  .lesen-abschnitt .ab-rand { padding-top: 0; margin-bottom: 16px; }
  .lesen-abschnitt .ab-rand.leer { display: none; }
  .lesen-abschnitt .ab-rand .rand-kopf { opacity: 1; }
  .vorlage-panel { top: 48px; width: 100vw; border-left: 0; }
  .vp-vorlagen { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .gliederung, .eintrag { transition: none; } }
/* Auswahlfelder in Karten dürfen nie breiter werden als die Karte (lange Abschnittstitel) */
.karte .chips > *, .karte .filter { min-width: 0; max-width: 100%; }
.karte .filter { flex-wrap: wrap; }
.karte select.feld-wahl { max-width: 100%; width: auto; }
.karte .chip { overflow-wrap: anywhere; }

/* --- 1.2: Inhalt mittig im Fenster (Johannes 09.10.) — der Text selbst bleibt linksbündig ------------- */
:root[data-stil] { --inhalt-max: 1500px; }
.dokument > .formatleiste, .dokument > .teil-marke, .dokument > .abschnitt, .dokument > p { max-width: var(--inhalt-max); margin-left: auto; margin-right: auto; }
.dokument > .formatleiste { padding-left: 0; padding-right: 0; }
.seite { max-width: var(--inhalt-max); margin-left: auto; margin-right: auto; box-sizing: border-box; }
.druck { margin-left: auto; margin-right: auto; max-width: calc(var(--l-text) + 340px); }
.lesen-aufbau.ohne-rand .druck { max-width: var(--l-text); }
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  .dokument > .formatleiste { margin-left: -16px; margin-right: -16px; padding: 4px 8px; }
}

/* --- 1.2: Fußnoten, Links, Gastrechte ---------------------------------------------------------- */
sup.fussnote { font-size: .68em; line-height: 0; vertical-align: super; color: var(--wk-akzent); font-weight: 700; cursor: pointer;
  padding: 0 1px; font-variant-numeric: tabular-nums; user-select: none; }
sup.fussnote:hover, sup.fussnote:focus-visible { text-decoration: underline; outline: none; }
sup.fussnote.fehlt { color: var(--wk-text-leise); text-decoration: line-through; }
.druck.ohne-akzent sup.fussnote { color: inherit; }
.fussnoten .fn-liste, .fussnoten-ende .fn-liste { margin: .6em 0 0; padding: .5em 0 0 1.6em; border-top: var(--wk-strich) solid var(--wk-linie);
  font-size: .8em; line-height: 1.45; color: var(--wk-text-2, var(--wk-text)); }
.fussnoten .fn-liste li, .fussnoten-ende .fn-liste li { margin: 0 0 .3em; padding-left: .2em; scroll-margin-top: 110px; }
.fussnoten .fn-liste li::marker, .fussnoten-ende .fn-liste li::marker { font-variant-numeric: tabular-nums; color: var(--wk-text-leise); }
.fn-eintrag { font-size: 14px; line-height: 1.5; border-left: 2px solid var(--wk-akzent); padding-left: 10px; }
.fn-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 0 6px; border: var(--wk-strich) solid var(--wk-linie); text-decoration: none; color: var(--wk-text); font-size: 13px; }
.fn-chip sup { color: var(--wk-akzent); font-weight: 700; }
.fn-chip:hover { border-color: var(--wk-linie-stark); }
a.extern { color: inherit; text-decoration: underline; text-decoration-color: var(--wk-akzent); text-underline-offset: 2px; overflow-wrap: anywhere; }
a.extern:hover { text-decoration-thickness: 2px; }
.links-im-beleg { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-top: 10px; font-size: 13px; }
.links-im-beleg:empty { display: none; }
.rechte { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.rechte .kasten { font-size: 13px; }
.gast-zeile .rechte { grid-column: 1 / -1; }

/* --- 1.3: Überschriften-Hierarchie (Johannes 09.10.: Teile wirkten wie Untertitel, Zwischenüberschriften größer als
   die Abschnittstitel). Eine Treppe, überall gleich: Teil > Abschnitt > Überschrift 1 > 2 > 3. ------------------ */
/* Textansicht: Teil 24 px · Abschnitt 20 px · Ü1 17 px · Ü2 15 px fett · Ü3 15 px kursiv */
.dokument > .teil-marke { font: 700 24px/1.25 var(--wk-schrift); letter-spacing: 0; text-transform: none; color: var(--wk-text);
  margin-top: 56px; padding-top: 16px; border-top: 2px solid var(--wk-linie-stark); }
.dokument > .teil-marke:first-of-type { margin-top: 24px; }
.ab-titel { font-size: 20px; }
.editor h3 { font: 700 1.13em/1.3 var(--wk-schrift); margin: 1.3em 0 .4em; }
.editor h4 { font: 700 1em/1.4 var(--wk-schrift); margin: 1.1em 0 .3em; }
.editor h5 { font: italic 600 1em/1.4 var(--wk-schrift); margin: 1em 0 .25em; text-transform: none; letter-spacing: 0; }
/* Lesen und Druck (relativ zur Grundschrift): Teil 1,6 · Abschnitt 1,3 · Ü1 1,12 · Ü2 1 fett · Ü3 1 kursiv */
.druck h2.teil { font: 700 1.6em/1.25 var(--l-schrift, var(--v-schrift)); letter-spacing: 0; text-transform: none; color: inherit;
  margin: 2.6em 0 .2em; padding-top: .45em; border-top: 2px solid currentColor; }
.druck .la-titel { font-size: 1.3em; line-height: 1.3; margin: 1.8em 0 .6em; }
.druck .lesetext h3 { font-weight: 700; font-size: 1.12em; line-height: 1.3; margin: 1.3em 0 .4em; }
.druck .lesetext h4 { font-weight: 700; font-size: 1em; line-height: 1.4; margin: 1.1em 0 .3em; }
.druck .lesetext h5 { font-weight: 600; font-style: italic; font-size: 1em; line-height: 1.4; margin: 1em 0 .25em; text-transform: none; letter-spacing: 0; }
.druck .fussnoten-ende h2.teil, .druck #lt-anhang { font-size: 1.35em; }
.druckform h2.teil { font-family: var(--v-schrift); margin-top: 0; }
/* Gedrucktes Verzeichnis: Teile fett und etwas größer, Abschnitte fett, Unterpunkte normal */
.druckform .verzeichnis-druck .vz-teil { font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 1.05em; margin-top: 1.1em; color: #000; }
.druckform .verzeichnis-druck .vz-s1 { font-weight: 600; margin-top: .35em; }
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) {
  .dokument > .teil-marke { font-size: 21px; }
  .ab-titel { font-size: 18px; }
}
/* Vorschau in der Format-Auswahl passend zur Treppe */
.fo-h3 .fl-probe { font-size: 17px; font-weight: 700; }
.fo-h4 .fl-probe { font-size: 15px; font-weight: 700; }
.fo-h5 .fl-probe { font-size: 15px; font-weight: 600; font-style: italic; text-transform: none; letter-spacing: 0; }
.fl-knopf sup, .fl-knopf sub { font-size: .62em; line-height: 0; }

/* Vollbild (Ruhemodus): nur der Text, mittig; Leisten, Verzeichnis und Rand ausgeblendet */
html.ruhe .leiste, html.ruhe .lesen-leiste, html.ruhe .lesen-verzeichnis, html.ruhe .ab-rand, html.ruhe .vorlage-panel { display: none !important; }
html.ruhe .lesen-aufbau { grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
html.ruhe .lesen-abschnitt { grid-template-columns: minmax(0, var(--l-text)); justify-content: center; }
html.ruhe .lesen-flaeche { padding-top: 56px; }
html.ruhe .druck { max-width: var(--l-text); }
.ruhe-aus { position: fixed; top: 12px; right: 12px; z-index: 30; width: 36px; height: 36px; display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--wk-flaeche-2); color: var(--wk-text); opacity: .4; transition: opacity var(--wk-dauer-kurz); }
.ruhe-aus:hover, .ruhe-aus:focus-visible { opacity: 1; }
@media print { .ruhe-aus { display: none !important; } }
/* Kurzübersicht für Gäste */
.hilfe-liste { list-style: none; margin: 14px 0 6px; padding: 0; }
.hilfe-liste li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: var(--wk-strich) solid var(--wk-linie); }
.hilfe-liste li b { font-weight: 700; }
.hilfe-liste li span { color: var(--wk-text-2, var(--wk-text)); line-height: 1.45; }
@media (max-width: 700px) {
  .hilfe-liste li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .leiste-rechts .nur-breit { display: none; }
}
.gast-weg-titel { font: 700 18px/1.3 var(--wk-schrift); margin: 18px 0 8px; }
/* Seitenansicht (1.7.1): echte A4-Seiten wie in Word – je Seite ein Blatt mit Rändern, Kopf- und Fußzeile; der Inhalt
   kommt aus derselben Spalten-Satzkopie wie beim Messen (Spalte = Seite), daher dieselben Umbrüche wie im Druck */
.lesen-aufbau.seitenansicht .lesen-flaeche { background: var(--wk-flaeche-2); padding: 28px 32px 30vh; }
.lesen-aufbau.seitenansicht #druck { display: none; }
.seiten { display: none; }
.lesen-aufbau.seitenansicht .seiten { display: flex; flex-direction: column; align-items: center; gap: 24px; zoom: var(--seiten-zoom, 1); }
.druckseite { position: relative; flex: none; width: 210mm; height: 297mm; background: #fff; color: #000; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 10px 30px rgba(0, 0, 0, .10); }
.druckseite-satz { position: absolute; overflow: hidden; }
.druckseite-satz > .seiten-mass { position: absolute; left: 0; top: 0; }
.druckseite-kopf, .druckseite-fuss { position: absolute; display: flex; justify-content: space-between; gap: 6mm; font-size: 8pt; line-height: 1.3; color: #555; }
.druckseite-kopf { top: 0; align-items: flex-end; padding-bottom: 5mm; box-sizing: border-box; }
.druckseite-fuss { padding-top: 5mm; }
.druckseite-kopf > span:last-child, .druckseite-fuss > span:last-child { text-align: right; }
.druckseite-fuss > span { flex: 1 1 0; }
.druckseite-fuss > span:nth-child(2) { text-align: center; }
html.ruhe .lesen-aufbau.seitenansicht .lesen-flaeche { padding-top: 56px; }
@media (max-width: 700px) {
  .lesen-aufbau.seitenansicht .lesen-flaeche { padding: 16px 8px 30vh; }
  .lesen-aufbau.seitenansicht .seiten { gap: 12px; }
}
@media print {
  .lesen-aufbau.seitenansicht .seiten { display: none !important; }
  .lesen-aufbau.seitenansicht #druck { display: block; }
  .lesen-aufbau.seitenansicht .lesen-flaeche { padding: 0; background: none; }
}