/* ===========================================================================
 * kartei.css · v3 · 11.10.2026 (v2: kompakter, Marc: "Groesse heisst nicht automatisch uebersichtlicher";
 *   v3: Spalten ohne Umbruch, Hakenlisten, Verzeichniskarten)
 * Die EINE Gestaltungsgrundlage der Obacht-Oberflaeche.
 * ---------------------------------------------------------------------------
 * Vorher trug jede der 15 Seiten ihr eigenes CSS mit denselben 24 Variablen;
 * jede Aenderung am Aussehen war 15-fache Arbeit. Ab hier gilt: Farben,
 * Schriften, Karten, Marken und Knoepfe stehen genau einmal, naemlich hier.
 *
 * Es gelten die Regeln aus 02-kartei-strukturen/STYLEGUIDE-oberflaeche.md:
 *   § 1 Grundschrift fuer alles Lesbare, Maschinenschrift nur fuer Codes.
 *   § 2 Gruen heisst nur "freigegeben/erfuellt". Erfolgsmeldungen sind blau.
 *   § 3 Ein Mass fuer Klapppfeile (--pf), nie der native Pfeil.
 * Neu mit dieser Datei (Abschnitt 5 des Style-Guides):
 *   - Eine dunkle Kopfleiste mit vier Bereichen statt 13 gleichrangiger Links.
 *   - Jede Seite hat oben eine Leitfrage und darunter nummerierte Abschnitte
 *     mit Zustandskreis (erledigt / offen / Hinweis).
 *   - Bedienelemente mindestens 32 px hoch, Hauptknoepfe 38 px; kompakt,
 *     damit mehr auf eine Seite passt.
 * =========================================================================== */

/* --- 1 · Farben und Schriften (unveraendert aus bestand.html v1) ----------- */
:root{
  --ground:#EBECE8; --surface:#F8F9F6; --surface-2:#E1E3DD; --surface-3:#FFFFFF;
  --ink:#15181A; --ink-2:#4E5551; --ink-3:#5F665F; --rule:#CDD1C9;
  --accent:#0B5D8E; --accent-soft:#DBE7F0;
  --brand:#AD440C; --brand-soft:#F2DFCE;
  --warn:#9A5C0A; --warn-soft:#F2E6CF;
  --crit:#A62A21; --crit-soft:#F3DCD9;
  --ok:#2F6B47; --ok-soft:#DCE9DF;
  --f:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fm:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sel-bg:#15181A; --sel-ink:#FFFFFF;
  --accent-ink:#FFFFFF; --scrim:rgba(15,18,20,.55); --hinter:rgba(235,236,232,.96);
  /* neu: die Kopfleiste */
  --kopf:#15181A; --kopf-ink:#E8EAE5; --kopf-ink-2:#9AA098; --kopf-rule:#2B302C;
  --pf:1.1rem;
  color-scheme: light;
}
:root[data-theme="dark"]{
  --ground:#151714; --surface:#1D201D; --surface-2:#282C28; --surface-3:#232723;
  --ink:#E8EAE5; --ink-2:#B9BFB8; --ink-3:#9AA098; --rule:#3B403B;
  --accent:#7CB8E0; --accent-soft:#203446;
  --brand:#E8955C; --brand-soft:#3E2817;
  --warn:#D9A551; --warn-soft:#3B2F18;
  --crit:#E28078; --crit-soft:#452320;
  --ok:#84C29B; --ok-soft:#20362B;
  --sel-bg:#E6E8E3; --sel-ink:#15181A;
  --accent-ink:#15181A; --scrim:rgba(15,18,20,.55); --hinter:rgba(12,14,16,.94);
  --kopf:#0E100F; --kopf-ink:#E8EAE5; --kopf-ink-2:#9AA098; --kopf-rule:#2B302C;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#151714; --surface:#1D201D; --surface-2:#282C28; --surface-3:#232723;
    --ink:#E8EAE5; --ink-2:#B9BFB8; --ink-3:#9AA098; --rule:#3B403B;
    --accent:#7CB8E0; --accent-soft:#203446;
    --brand:#E8955C; --brand-soft:#3E2817;
    --warn:#D9A551; --warn-soft:#3B2F18;
    --crit:#E28078; --crit-soft:#452320;
    --ok:#84C29B; --ok-soft:#20362B;
    --sel-bg:#E6E8E3; --sel-ink:#15181A;
    --accent-ink:#15181A; --scrim:rgba(15,18,20,.55); --hinter:rgba(12,14,16,.94);
    --kopf:#0E100F; --kopf-ink:#E8EAE5; --kopf-ink-2:#9AA098; --kopf-rule:#2B302C;
    color-scheme: dark;
  }
}

/* --- 2 · Grundlage --------------------------------------------------------- */
*{box-sizing:border-box} [hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f);font-size:14px;line-height:1.45}
a{color:var(--accent)}
h1,h2,h3{margin:0;letter-spacing:-.01em;line-height:1.25}
h1{font-size:1.25rem;font-weight:600}
h2{font-size:1rem;font-weight:600}
h3{font-size:.95rem;font-weight:600}
p{margin:.35rem 0}
.note{font-size:.9rem;color:var(--ink-2)}
.klein{font-size:.78rem;color:var(--ink-3)}
.code{font-family:var(--fm);font-size:.85em}
.zahl{font-variant-numeric:tabular-nums}
.nurdruck{display:none}

/* Die Statuszeile aus sitzung.js verschwindet: ihr Inhalt (wer, Rolle,
   Funktion, abmelden) steht jetzt in der Kopfleiste (rahmen.js). Der rote
   Rechte-Balken bleibt, er haengt sich dann unter die Kopfleiste. */
#sitzung-zeile{display:none!important}

/* --- 3 · Kopfleiste -------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:50;background:var(--kopf);color:var(--kopf-ink)}
.kopf .zeile{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;min-height:44px;padding:0 .9rem}
.kopf .marke{display:flex;align-items:center;gap:.5rem;padding-right:1rem;font-weight:700;letter-spacing:.02em;color:var(--kopf-ink);text-decoration:none;font-size:.95rem}
.kopf .marke svg{width:19px;height:19px}
.kopf .bereiche{display:flex;gap:.2rem;flex:1}
.kopf .bereiche a{display:flex;align-items:center;padding:0 .8rem;color:var(--kopf-ink-2);text-decoration:none;font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-bottom:3px solid transparent;min-height:40px}
.kopf .bereiche a:hover{color:var(--kopf-ink)}
.kopf .bereiche a.an{color:var(--kopf-ink);border-bottom-color:var(--brand)}
.kopf .bereiche .n{margin-left:.45rem;min-width:1.35em;padding:0 .4em;border-radius:999px;background:var(--brand);color:#fff;font-size:.72rem;letter-spacing:0;text-align:center;line-height:1.5}
.kopf .ich{display:flex;align-items:center;gap:.5rem;margin-left:auto;font-size:.78rem;color:var(--kopf-ink-2);white-space:nowrap;min-width:0}
.kopf .ich b{color:var(--kopf-ink);font-weight:600}
.kopf .ich .warnung{color:var(--warn)}
.kopf .ich button{min-height:26px;padding:0 .6rem;border:1px solid var(--kopf-rule);border-radius:999px;background:transparent;color:var(--kopf-ink-2);font:inherit;font-size:.8rem;cursor:pointer}
.kopf .ich button:hover{color:var(--kopf-ink);border-color:var(--kopf-ink-2)}
/* Untermenue: die Seiten des Bereichs */
.kopf .unter{display:flex;gap:.1rem;padding:0 1rem;border-top:1px solid var(--kopf-rule);overflow-x:auto}
.kopf .unter a{display:flex;align-items:center;min-height:30px;padding:0 .65rem;color:var(--kopf-ink-2);text-decoration:none;font-size:.8rem;white-space:nowrap}
.kopf .unter a.an{color:var(--kopf-ink);font-weight:600}
.kopf .unter a:hover{color:var(--kopf-ink)}
#sitzung-recht{top:44px!important}
@media (max-width:1060px){ .kopf .ich .funktion{display:none} }
@media (max-width:900px){ .kopf .ich .name{display:none} }
@media (max-width:720px){
  .kopf .zeile{padding:0 .6rem}
  .kopf .bereiche a{padding:0 .6rem;letter-spacing:.08em;font-size:.76rem}
}

/* --- 4 · Seitenkopf: Titel und Leitfrage ----------------------------------- */
.seite{max-width:1240px;margin:0 auto;padding:.8rem 1rem 3rem}
.seitenkopf{display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline;margin-bottom:.6rem}
.seitenkopf h1{font-size:1.25rem}
.seitenkopf .leitfrage{width:100%;font-size:.92rem;color:var(--ink-2);margin:0}
.seitenkopf .stand{margin-left:auto;font-family:var(--fm);font-size:.7rem;color:var(--ink-3)}
.seitenkopf .wahl{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;width:100%;margin-top:.2rem}

/* --- 5 · Abschnitte: nummerierte Karten mit Zustandskreis ------------------ */
.abschnitt{display:grid;grid-template-columns:30px 1fr;gap:0 .7rem;border:1px solid var(--rule);border-radius:10px;background:var(--surface);padding:.65rem .85rem;margin-bottom:.6rem}
.abschnitt>.kreis{grid-row:1/span 3;width:28px;height:28px;border-radius:50%;border:2px solid var(--rule);display:flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--ink-3);font-weight:700;font-size:.85rem}
.abschnitt>.kreis.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.abschnitt>.kreis.ok::before{content:"\2713"}
.abschnitt>.kreis.crit{background:var(--crit);border-color:var(--crit);color:#fff}
.abschnitt>.kreis.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.abschnitt>.kreis.grey{background:var(--surface-2);border-color:var(--rule);color:var(--ink-2)}
.abschnitt>.kopfzeile{display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline;min-height:28px}
.abschnitt>.kopfzeile h2{font-size:1rem}
.abschnitt>.kopfzeile .zusammenfassung{color:var(--ink-2)}
.abschnitt>.kopfzeile .zusammenfassung.crit{color:var(--crit);font-weight:600}
.abschnitt>.kopfzeile .rechts{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.abschnitt>.inhalt{grid-column:2;margin-top:.35rem}
.abschnitt>.kopfzeile,.abschnitt>.inhalt,.abschnitt>.fuss{min-width:0}
.abschnitt>.fuss{grid-column:2;margin-top:.7rem;display:flex;gap:.6rem;flex-wrap:wrap}
@media (max-width:720px){
  .zeile-karte{grid-template-columns:1fr}
  .zeile-karte .rechts{grid-column:1;grid-row:auto;justify-self:start}
  .abschnitt{grid-template-columns:36px 1fr;padding:.8rem .8rem}
  .abschnitt>.kreis{width:32px;height:32px;font-size:.95rem}
  .abschnitt>.inhalt,.abschnitt>.fuss{grid-column:1/-1}
}
/* Merkmale: Beschriftung links, Wert rechts (wie "Fassung · F1") */
.merkmale{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1.4rem;margin:.3rem 0}
.merkmale dt{color:var(--ink-2);margin:0}
.merkmale dd{margin:0}

/* --- 6 · Marken (Zustand einer Zeile, Style-Guide § 2 Achse A) ------------ */
.marke{display:inline-block;font-size:.74rem;font-weight:600;padding:.08rem .45rem;border-radius:999px;white-space:nowrap;line-height:1.5}
.marke.ok{background:var(--ok-soft);color:var(--ok)}
.marke.grey{background:var(--surface-2);color:var(--ink-2)}
.marke.warn{background:var(--warn-soft);color:var(--warn)}
.marke.crit{background:var(--crit-soft);color:var(--crit)}
.marke.blau{background:var(--accent-soft);color:var(--accent)}
.marke.umriss{background:transparent;border:1px solid var(--rule);color:var(--ink-2);font-weight:500}
/* Ampel: ein Punkt je Zustand, fuer Listen mit vielen Zeilen */
.ampel{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:-1px;margin-right:.35rem}
.ampel.ok{background:var(--ok)} .ampel.warn{background:var(--warn)} .ampel.crit{background:var(--crit)} .ampel.grey{background:var(--rule)}

/* --- 7 · Rueckmeldungen (Style-Guide § 2 Achse B) -------------------------- */
.hinweis{border-left:3px solid var(--warn);background:var(--warn-soft);padding:.4rem .7rem;border-radius:0 6px 6px 0;margin:.4rem 0;font-size:.86rem}
.hinweis.ok{border-color:var(--accent);background:var(--accent-soft)}
.hinweis.crit{border-color:var(--crit);background:var(--crit-soft)}
.hinweis.leise{border-color:var(--rule);background:var(--surface-2);color:var(--ink-2)}

/* --- 8 · Knoepfe und Felder ------------------------------------------------ */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:32px;padding:0 .85rem;font-size:.88rem;border:1px solid var(--rule);border-radius:999px;background:var(--surface-3);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.knopf:hover{border-color:var(--accent);color:var(--accent)}
.knopf.haupt{background:var(--sel-bg);border-color:var(--sel-bg);color:var(--sel-ink)}
.knopf.haupt:hover{opacity:.9;color:var(--sel-ink)}
.knopf.gross{min-height:38px;padding:0 1.1rem;font-size:.92rem}
.knopf.klein{min-height:26px;padding:0 .6rem;font-size:.78rem;font-weight:500}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.knopf.gefahr{color:var(--crit);border-color:var(--crit)}
label.feld{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);margin:.6rem 0 .2rem}
input[type=text],input[type=search],input[type=date],input[type=number],select,textarea{min-height:32px;padding:.25rem .6rem;border:1px solid var(--rule);border-radius:8px;background:var(--surface-3);color:var(--ink);font:inherit;max-width:100%}
textarea{min-height:88px}
input:focus,select:focus,textarea:focus,.knopf:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.reihe{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.auswahl{display:flex;flex-wrap:wrap;gap:.4rem}
.auswahl .chip{min-height:28px;padding:0 .7rem;border:1px solid var(--rule);border-radius:999px;background:var(--surface-3);color:var(--ink-2);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}
.auswahl .chip:hover{border-color:var(--accent);color:var(--accent)}
.auswahl .chip.an{background:var(--sel-bg);border-color:var(--sel-bg);color:var(--sel-ink)}
.auswahl .chip .n{font-weight:400;opacity:.75}

/* --- 9 · Listen und Tabellen ---------------------------------------------- */
.liste{display:flex;flex-direction:column;gap:.45rem}
.zeile-karte{display:grid;grid-template-columns:1fr auto;gap:.1rem .8rem;align-items:center;border:1px solid var(--rule);border-radius:8px;background:var(--surface-3);padding:.4rem .7rem}
.zeile-karte .titel{grid-column:1;font-weight:600}
.zeile-karte .satz{grid-column:1;color:var(--ink-2);font-size:.84rem}
.zeile-karte .rechts{grid-column:2;grid-row:1/span 2;justify-self:end;display:flex;gap:.4rem;align-items:center}
.zeile-karte.crit{border-left:4px solid var(--crit)}
.zeile-karte.warn{border-left:4px solid var(--warn)}
.zeile-karte.ok{border-left:4px solid var(--ok)}
table.tab{border-collapse:collapse;width:100%;font-size:.86rem}
.tab th,.tab td{padding:.3rem .55rem;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.tab thead th{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.tab tbody tr:last-child td{border-bottom:0}
.tab td.zahl,.tab th.zahl{text-align:right;font-variant-numeric:tabular-nums}
.tabwrap{overflow-x:auto;border:1px solid var(--rule);border-radius:10px;background:var(--surface-3)}
.tabwrap .tab tbody tr:hover td{background:var(--surface)}

.tab tr.auf>td{cursor:pointer}
.tab tr.auf>td:first-child::before{content:"\25b8\a0";color:var(--ink-3);font-size:var(--pf);line-height:1}
.tab tr.auf.offen>td:first-child::before{content:"\25be\a0"}
.tab tr.einzel>td{background:var(--surface);padding:.3rem .55rem .5rem 1.6rem;font-size:.82rem;color:var(--ink-2)}
.tab tr.einzel ul{margin:0;padding-left:1rem;columns:2;column-gap:2rem}
.tab tr.einzel li{margin:.05rem 0;break-inside:avoid}
.tab tr.einzel li.crit{color:var(--crit)} .tab tr.einzel li.warn{color:var(--warn)}
.tab td .zusatz{color:var(--ink-3);font-size:.78rem}
.tab td.name{font-weight:600;white-space:nowrap}
.tab td.aktion{text-align:right;white-space:nowrap}
.tab td.rollen{max-width:28ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.tab td.nw,.tab th.nw{white-space:nowrap}
.tab td .unter{display:block;color:var(--ink-3);font-size:.76rem;line-height:1.3}
@media (max-width:720px){ .tab tr.einzel ul{columns:1} .tab td.rollen{max-width:16ch} }

/* Hakenliste: Personen oder Dinge ankreuzen, mehrspaltig, mindestens 32 px hoch */
.haken{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.15rem .8rem;margin:.3rem 0}
.haken label{display:flex;gap:.45rem;align-items:center;min-height:32px;padding:0 .4rem;border-radius:6px;cursor:pointer;font-size:.88rem}
.haken label:hover{background:var(--surface-2)}
.haken label input{margin:0;width:16px;height:16px}
.haken label .zusatz{color:var(--ink-3);font-size:.76rem}
.haken label.gesucht{background:var(--warn-soft)}
/* Verzeichniskarten (start.html): Titel, Leitfrage, Bereich */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.5rem;align-items:start}
.karte{display:block;border:1px solid var(--rule);border-radius:10px;background:var(--surface-3);padding:.55rem .8rem;color:inherit;text-decoration:none}
.karte:hover{border-color:var(--accent)}
.karte b{display:block;font-size:.95rem}
.karte span{display:block;color:var(--ink-2);font-size:.84rem;margin-top:.1rem}

/* --- 10 · Kennzahlen -------------------------------------------------------- */
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));min-width:0;gap:.45rem;margin:0 0 .6rem}
.kennzahl{border:1px solid var(--rule);border-radius:8px;background:var(--surface);padding:.35rem .7rem;display:flex;gap:.5rem;align-items:baseline}
.kennzahl b{font-size:1.25rem;font-variant-numeric:tabular-nums;line-height:1.2}
.kennzahl span{font-size:.76rem;color:var(--ink-2);line-height:1.2}
.kennzahl.crit b{color:var(--crit)} .kennzahl.warn b{color:var(--warn)} .kennzahl.ok b{color:var(--ok)}

/* --- 11 · Klapppfeile (Style-Guide § 3) ------------------------------------ */
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"\25b8\a0";color:var(--ink-3);font-size:var(--pf);line-height:1}
details[open]>summary::before{content:"\25be\a0"}

/* --- 12 · Umgestellte Altseiten -------------------------------------------
   Die Seiten aus der Zeit vor kartei.css haben ihren Inhalt in .wrap. Breite
   Tabellen darin sollen den Bereich scrollen lassen, nie die ganze Seite. */
.wrap{max-width:1180px;margin:0 auto;padding:0 1.2rem 4rem;overflow-x:auto}
.wrap table{min-width:0}

/* --- 13 · Druck ------------------------------------------------------------ */
@media print{
  .kopf,.nichtdrucken,#sitzung-recht{display:none!important}
  .nurdruck{display:block}
  body{background:#fff;color:#000;font-size:11px}
  .seite{padding:0;max-width:none}
  .abschnitt{break-inside:avoid;border-color:#999;background:#fff}
}