/* =====================================================================
   MANDARAT · Plattform-Design V2 (D91 / VD26) · app.css
   Eine Datei für Arbeitsansicht, Tresor-Sichtfenster und Kandidatenseiten.
   Byte-gleich in MING-Labs/mandarat und MING-Labs/mandarat-tresor.

   Regeln für diese Datei
   - Keine Inline-Stile in Templates. Jede Gestaltung kommt über Klassen
     aus dieser Datei (CSP: style-src 'self').
   - Kein JavaScript für Gestaltung. Aufklappen über <details>, Bestätigen
     über eine eigene Serverseite oder einen Bestätigungsblock (?schritt=…).
   - Schriften selbst gehostet, dieselben @font-face wie die Website.
     Nur die zwei Tokens --font-display und --font-sans zeigen darauf.
   - Eine Welt, hell. Kein Dunkelmodus (Absicht, nicht Versäumnis).
   - Farben nur über Tokens. Neue Farbe = neuer Token mit Kontrastnachweis.

   Aufbau: 1 Tokens · 2 Grund · 3 Hülle · 4 Seitenkopf · 5 Bausteine
           6 Tabellen · 7 Formulare · 8 Meldungen · 9 Tresor-Raum
           10 Kandidatenseiten · 11 Hilfsklassen · 12 Druck
   ===================================================================== */

/* ---------- 1 · Tokens ---------------------------------------------- */
/* Layout: Werkzeug am Schreibtisch, dicht und ruhig; eine Spalte bis
   1200px, Blöcke im Raster; Kandidaten am Handy in einer 34rem-Spalte. */
:root{
  color-scheme: light;

  /* Navy-Skala der Website (Hex aus den oklch-Werten von V2.6) */
  --navy-950:#021224; --navy-900:#092842; --navy-800:#132d45; --navy-700:#26425d;
  --navy-600:#405b76; --navy-500:#637a92; --navy-300:#afbcca; --navy-200:#d0d9e1;
  --navy-100:#e7ecf1; --navy-050:#f4f7fa;
  --gold-900:#6b5110; --gold-700:#ac8a3b; --gold-600:#c9aa4c; --gold-500:#d2b373;
  --white:#ffffff;

  /* Rollen */
  --ground:#f6f8fa;          /* Grund der Arbeitsansicht */
  --surface:var(--white);    /* Blöcke */
  --ink:var(--navy-900);     /* Überschriften, Namen, Werte */
  --text:var(--navy-800);    /* Fließtext */
  --muted:var(--navy-600);   /* Zusatz, Zeitstempel (6.9:1 auf Weiß) */
  --line:var(--navy-200);    /* Rahmen */
  --line-soft:#e9eef3;       /* Zeilentrenner */
  --action:var(--navy-900);  /* Handlungen */
  --action-hover:var(--navy-700);
  --accent:var(--gold-600);  /* Goldkante, sparsam; nie als Textfarbe auf Weiß */
  --accent-text:var(--gold-900);

  /* Zustände: Text auf Grund, alle ≥ 7:1 */
  --ok-bg:#e3efe4;    --ok-fg:#1f4a24;
  --wait-bg:#fbefd5;  --wait-fg:#5c4206;
  --alert-bg:#fbe4dc; --alert-fg:#7a2a12;
  --pick-bg:#f5ead0;  --pick-fg:#5a4710;   /* Shortlist, ausgewählt */
  --plain-bg:#e9edf2; --plain-fg:#2b3e55;  /* neutral */
  --danger:#7a2a12;   --danger-hover:#5e1f0c;

  /* Tresor-Raum */
  --vault-head:var(--navy-950);
  --vault-ground:#f3f1ea;
  --vault-line:#ddd8c8;
  --vault-line-soft:#ebe7dc;

  /* Umgebungsband (Test) */
  --env-bg:#ffefc3; --env-fg:#4a3a0a;

  /* Schrift: Produktion zeigt auf die selbst gehosteten Schriften der Website */
  --font-display:"Linotype Didot","Didot LT Pro","Bodoni Moda","GFS Didot",Didot,Georgia,serif;
  --font-sans:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Schriftgrade (Werkzeug) */
  --fs-xs:0.75rem;    /* 12 Etiketten, Kennungen */
  --fs-sm:0.8125rem;  /* 13 Zusatzzeilen */
  --fs-base:0.9375rem;/* 15 Grundtext Arbeitsansicht */
  --fs-md:1.0625rem;  /* 17 Blocktitel, Namen */
  --fs-lg:1.375rem;   /* 22 Bestätigungstitel */
  --fs-h1:2.125rem;   /* 34 Seitentitel, Didot */
  --fs-cand:1.0625rem;/* 17 Grundtext Kandidat */
  --fs-cand-h1:1.875rem;

  --lh:1.5; --lh-tight:1.15;
  --ls-caps:0.12em;

  /* Abstände: 4er-Raster */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;
  --radius:4px; --radius-lg:6px;
  --shell-max:1200px; --read-max:72ch; --cand-max:34rem;
  --tap:44px; --tap-cand:52px;
  --ring:0 0 0 2px var(--white),0 0 0 4px var(--navy-900);
  --ring-on-dark:0 0 0 2px var(--navy-900),0 0 0 4px var(--gold-600);
  --dur:140ms;
}

/* ---------- 2 · Grund ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);
  font:400 var(--fs-base)/var(--lh) var(--font-sans);
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto}
a{color:var(--action);text-underline-offset:2px}
a:hover{color:var(--action-hover)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius)}
time,.num,.kennung,td{font-variant-numeric:tabular-nums}
.kennung{font-size:var(--fs-xs);letter-spacing:0.04em;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ---------- 3 · Hülle ------------------------------------------------ */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:var(--s4);top:var(--s2);z-index:20;background:var(--white);padding:var(--s2) var(--s3)}

.umgebung{background:var(--env-bg);color:var(--env-fg);font-size:var(--fs-sm);text-align:center;
  padding-block:6px;padding-inline:var(--s4)}
.umgebung strong{font-weight:500}

.kopf{background:var(--navy-900);color:var(--white)}
.kopf-innen{max-width:var(--shell-max);margin-inline:auto;
  padding-inline:max(var(--s6),env(safe-area-inset-left,0px));
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s7);min-height:60px}
.marke{font-family:var(--font-display);font-size:1.5rem;letter-spacing:0.06em;color:var(--white);text-decoration:none;line-height:1}
.marke span{color:var(--gold-600)}
.marke:hover{color:var(--white)}
.raum-label{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold-500);margin-left:calc(var(--s3) * -1)}
.nav{display:flex;flex-wrap:wrap;gap:0 var(--s5);flex:1 1 420px}
.nav a{color:rgba(255,255,255,.86);text-decoration:none;font-size:var(--fs-base);
  min-height:var(--tap);display:inline-flex;align-items:center;gap:6px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--white);border-bottom-color:var(--navy-500)}
.nav a[aria-current="page"]{color:var(--white);border-bottom-color:var(--gold-600)}
.nav .zahl{font-size:var(--fs-xs);min-width:20px;height:20px;padding-inline:6px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;background:var(--gold-600);color:var(--navy-950);font-weight:500}
.kopf :where(a,button,summary):focus-visible{box-shadow:var(--ring-on-dark)}
.kopf .abstand{flex:1 1 0}
.wer{font-size:var(--fs-sm);color:rgba(255,255,255,.82);display:flex;align-items:center;gap:var(--s3)}
.wer .rolle{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:2px 8px;font-size:var(--fs-xs);letter-spacing:.04em}
.wer form{display:inline}
.wer button{background:none;border:0;color:rgba(255,255,255,.82);font:inherit;text-decoration:underline;cursor:pointer;min-height:var(--tap);padding:0}

.seite{max-width:var(--shell-max);margin-inline:auto;
  padding-block:var(--s7) var(--s9);
  padding-left:max(var(--s6),env(safe-area-inset-left,0px));
  padding-right:max(var(--s6),env(safe-area-inset-right,0px));
  display:flex;flex-direction:column;gap:var(--s6)}
.seite.schmal{max-width:980px}
@media (max-width:640px){
  .kopf-innen,.seite{padding-left:max(var(--s4),env(safe-area-inset-left,0px));padding-right:max(var(--s4),env(safe-area-inset-right,0px))}
}
.fuss{max-width:var(--shell-max);margin-inline:auto;padding:0 var(--s6) var(--s7);font-size:var(--fs-xs);color:var(--muted);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}

/* ---------- 4 · Seitenkopf ------------------------------------------ */
.pfad{font-size:var(--fs-sm);color:var(--muted);display:flex;flex-wrap:wrap;gap:var(--s2)}
.pfad a{color:var(--muted)}
.pfad li+li::before{content:"›";margin-right:var(--s2);color:var(--navy-300)}
.titelzeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s4) var(--s6)}
.titelzeile>div{min-width:0}
.augenbraue{display:block;font-size:var(--fs-xs);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--accent-text)}
h1,.h1{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h1);line-height:var(--lh-tight);
  letter-spacing:-0.01em;color:var(--ink);text-wrap:balance;margin-top:var(--s2)}
.unterzeile{margin-top:var(--s2);color:var(--muted);max-width:var(--read-max)}
.handlungen{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* ---------- 5 · Bausteine ------------------------------------------- */
/* Block: die eine Fläche mit Rahmen. Nicht schachteln. */
.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);min-width:0}
.block-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s2) var(--s4);
  padding:var(--s4) var(--s5)}
.block-kopf h2,.block-titel{font-size:var(--fs-md);font-weight:500;color:var(--ink);line-height:1.3}
.block-kopf .zusatz{font-size:var(--fs-sm);color:var(--muted)}
.block-innen{padding:0 var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.block-innen.oben{padding-top:var(--s5)}
.block-fuss{border-top:1px solid var(--line-soft);padding:var(--s3) var(--s5);font-size:var(--fs-sm);color:var(--muted)}

/* Aufklappbarer Block (Morgenliste, TE11) */
details.block>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding:var(--s4) var(--s5);min-height:var(--tap)}
details.block>summary::-webkit-details-marker{display:none}
details.block>summary h2{font-size:var(--fs-md);font-weight:500;color:var(--ink)}
details.block>summary .zusatz{font-size:var(--fs-sm);color:var(--muted);display:flex;gap:var(--s3);align-items:baseline}
details.block>summary .zusatz::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--navy-500);border-bottom:1.5px solid var(--navy-500);
  transform:rotate(45deg) translateY(-2px);transition:transform var(--dur)}
details.block[open]>summary .zusatz::after{transform:rotate(-135deg)}

/* Zeile in einer Liste: Was links, Handgriff rechts */
.zeilen>li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3) var(--s4);
  padding:var(--s3) var(--s5);border-top:1px solid var(--line-soft)}
.zeilen .was{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:2px}
.zeilen .was strong,.name{font-weight:500;color:var(--ink)}
.zusatzzeile,.zusatz{font-size:var(--fs-sm);color:var(--muted);line-height:1.45}
.leer{padding:var(--s3) var(--s5) var(--s5);border-top:1px solid var(--line-soft);color:var(--muted);font-size:var(--fs-sm)}

/* Etikett: ein Zustand, ein Wort. Farbe stützt nur. */
.etikett{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:500;letter-spacing:.02em;
  line-height:1;padding:5px 9px;border-radius:999px;white-space:nowrap;background:var(--plain-bg);color:var(--plain-fg)}
.etikett.ok{background:var(--ok-bg);color:var(--ok-fg)}
.etikett.warten{background:var(--wait-bg);color:var(--wait-fg)}
.etikett.alarm{background:var(--alert-bg);color:var(--alert-fg)}
.etikett.auswahl{background:var(--pick-bg);color:var(--pick-fg)}
.etikett.zu{background:transparent;color:var(--muted);border:1px solid var(--line);padding:4px 8px}
.etikett.tresor{background:var(--navy-950);color:var(--gold-500)}
.etiketten{display:flex;flex-wrap:wrap;gap:6px}

/* Kennzahlen „Heute“: Anker, keine Dekoration */
.heute{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:var(--s3)}
.heute a{display:flex;flex-direction:column;gap:2px;padding:var(--s3) var(--s4);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);text-decoration:none;color:var(--text);min-height:72px}
.heute a:hover{border-color:var(--navy-300)}
.heute .zahl{font-size:1.625rem;font-weight:500;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.heute .bez{font-size:var(--fs-sm);color:var(--muted)}
.heute a.dringend{border-color:#e7b7a6;background:#fff8f5}
.heute a.dringend .zahl{color:var(--alert-fg)}

/* Fakten: Bezeichnung über Wert */
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--s4) var(--s6)}
.fakten dt{font-size:var(--fs-xs);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted)}
.fakten dd{margin-top:4px;color:var(--ink);display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.fakten dd .zusatzzeile{color:var(--muted)}

/* Ablauf: Schritte eines Mandats */
.ablauf{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,118px),1fr));gap:var(--s2)}
.ablauf li{border-top:3px solid var(--line);padding-top:var(--s2);font-size:var(--fs-sm);color:var(--muted);display:flex;flex-direction:column;gap:2px}
.ablauf li .tag{font-size:var(--fs-xs);letter-spacing:.04em}
.ablauf li.erledigt{border-top-color:var(--navy-900);color:var(--ink)}
.ablauf li.jetzt{border-top-color:var(--gold-600);color:var(--ink);font-weight:500}

/* Verlauf: wer und wann, immer */
.verlauf li{display:grid;grid-template-columns:minmax(9.5rem,auto) 1fr;gap:var(--s1) var(--s4);padding:var(--s2) 0;
  border-top:1px solid var(--line-soft);font-size:var(--fs-sm)}
.verlauf li:first-child{border-top:0}
.verlauf time{color:var(--muted)}
.verlauf .wer-rolle{color:var(--muted)}
@media (max-width:520px){.verlauf li{grid-template-columns:1fr}}

/* Raster für Blöcke nebeneinander */
.raster-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:var(--s5);align-items:start}
.spalte{display:flex;flex-direction:column;gap:var(--s5);min-width:0}

/* Prosa im Block */
.prosa{max-width:var(--read-max);display:flex;flex-direction:column;gap:var(--s3)}
.prosa p{line-height:1.6}

/* Hinweis „nächste Runde“ im Entwurf (D91 baut ihn nicht) */
.neu-d2{display:inline-block;font-size:10px;font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--accent-text);border:1px dashed var(--gold-700);border-radius:2px;padding:2px 5px;vertical-align:2px;white-space:nowrap}

/* ---------- Knöpfe -------------------------------------------------- */
.knopf{font:500 var(--fs-base)/1.2 var(--font-sans);min-height:var(--tap);padding:10px 16px;border-radius:var(--radius);
  border:1px solid var(--action);background:var(--action);color:var(--white);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);transition:background var(--dur)}
.knopf:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--white)}
.knopf.zweit{background:var(--white);color:var(--action);border-color:var(--navy-300)}
.knopf.zweit:hover{border-color:var(--navy-700);background:var(--navy-050);color:var(--action)}
.knopf.leise{background:none;border-color:transparent;color:var(--action);text-decoration:underline;padding-inline:4px}
.knopf.leise:hover{background:none;color:var(--action-hover)}
.knopf.gefahr{background:var(--white);color:var(--danger);border-color:#d9a593}
.knopf.gefahr:hover{background:#fff6f3;border-color:var(--danger)}
.knopf.gefahr-voll{background:var(--danger);border-color:var(--danger);color:var(--white)}
.knopf.gefahr-voll:hover{background:var(--danger-hover)}
.knopf.klein{min-height:36px;padding:6px 12px;font-size:var(--fs-sm)}
.knopf[disabled],.knopf[aria-disabled="true"]{background:var(--navy-100);border-color:var(--navy-100);color:var(--navy-600);cursor:not-allowed}
/* Gesperrter Knopf nennt immer den Grund daneben */
.grund{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- 6 · Tabellen -------------------------------------------- */
.tabelle-box{overflow-x:auto;border-top:1px solid var(--line-soft)}
.tabelle{border-collapse:collapse;width:100%;font-size:var(--fs-base)}
.tabelle th{text-align:left;font-size:var(--fs-xs);font-weight:500;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
.tabelle td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-soft);vertical-align:top}
.tabelle tr:last-child td{border-bottom:0}
.tabelle tbody tr:hover{background:var(--navy-050)}
.tabelle th:first-child,.tabelle td:first-child{padding-left:var(--s5)}
.tabelle th:last-child,.tabelle td:last-child{padding-right:var(--s5)}
.tabelle .rechts{text-align:right}
.tabelle .zusatzzeile{margin-top:2px}
.tabelle.breit{min-width:980px}
.tabelle.breit th,.tabelle.breit td{padding-inline:12px}
.tabelle td:first-child{min-width:11rem}
.tabelle time{white-space:nowrap}
.tabelle tr.ruhig td{color:var(--muted)}
.tabelle tr.ruhig .name{color:var(--muted);font-weight:400}

/* Filterleiste */
.filter{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-end;padding:0 var(--s5) var(--s4)}
.filter .feld{min-width:150px;flex:0 1 190px}
.filter .feld.suche{flex:1 1 240px}

/* ---------- 7 · Formulare ------------------------------------------- */
.formular{display:flex;flex-direction:column;gap:var(--s5)}
.feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.feld>label,.feld>.bez,legend{font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.feld .frei{font-weight:400;color:var(--muted)}
.hilfe{font-size:var(--fs-sm);color:var(--muted);line-height:1.45}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=date],input[type=search],input[type=number],select,textarea{
  font:inherit;color:var(--ink);background:var(--white);border:1px solid var(--navy-300);border-radius:var(--radius);
  min-height:var(--tap);padding:9px 12px;width:100%}
textarea{min-height:96px;resize:vertical;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:var(--navy-500)}
input::placeholder,textarea::placeholder{color:var(--navy-500)}
.feld.fehler input,.feld.fehler select,.feld.fehler textarea{border-color:var(--danger);border-width:2px;padding:8px 11px}
.fehlertext{font-size:var(--fs-sm);color:var(--alert-fg);font-weight:500}
fieldset{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:var(--s2)}
legend{padding:0;margin-bottom:var(--s2)}
.wahl{display:flex;gap:var(--s3);align-items:flex-start;min-height:var(--tap);padding-block:10px;cursor:pointer;line-height:1.45}
.wahl input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--navy-900)}
.wahl .zusatz{display:block}
/* Auswahlchips (Kandidat): echte Checkboxen/Radios, visuell als Chip */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:var(--tap);padding:8px 14px;border:1px solid var(--navy-300);border-radius:var(--radius);
  background:var(--white);color:var(--ink);font-size:var(--fs-base)}
.chip input:checked+span{background:var(--navy-900);border-color:var(--navy-900);color:var(--white)}
.chip input:focus-visible+span{box-shadow:var(--ring)}
.reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--s4)}

/* Bestätigungsblock: inline, für frische Anmeldung und Endgültiges */
.bestaetigen{border:1px solid var(--gold-600);border-radius:var(--radius-lg);background:#fffdf6;padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s4)}
.bestaetigen h2,.bestaetigen h3{font-size:var(--fs-lg);font-weight:500;color:var(--ink);line-height:1.25}
.bestaetigen.gefahr{border-color:#d9a593;background:#fff8f5}
.bestaetigen .folgen{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-base)}
.bestaetigen .folgen li{padding-left:18px;position:relative}
.bestaetigen .folgen li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--navy-500)}

/* Vorschau eines Textes (Mail oder Seite) in der Arbeitsansicht */
.vorschau{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);max-width:640px}
.vorschau-kopf{padding:var(--s2) var(--s4);border-bottom:1px solid var(--line-soft);font-size:var(--fs-sm);display:flex;gap:var(--s3)}
.vorschau-text{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);line-height:1.6}
.vorschau-knopf{display:inline-block;background:var(--navy-900);color:var(--white);padding:8px 14px;border-radius:var(--radius);font-size:var(--fs-sm)}
mark{background:var(--pick-bg);color:var(--pick-fg);padding:0 2px;border-bottom:1px solid var(--gold-700)}

/* ---------- 8 · Meldungen ------------------------------------------- */
.meldung{border-radius:var(--radius-lg);padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:6px;border:1px solid}
.meldung strong{font-weight:500}
.meldung.erfolg{background:#f3f9f3;border-color:#b9d6bc;color:var(--ok-fg)}
.meldung.info{background:var(--navy-050);border-color:var(--line);color:var(--navy-800)}
.meldung.warnung{background:#fffaf0;border-color:#e6cf98;color:var(--wait-fg)}
.meldung.fehler{background:#fff8f5;border-color:#e7b7a6;color:var(--alert-fg)}
.liste-punkte li{padding-left:16px;position:relative}
.liste-punkte li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:currentColor}

/* ---------- 9 · Tresor-Raum ----------------------------------------- */
/* Klasse am <body>: raum-tresor. Dunkler Kopf mit Goldkante, warmer Grund. */
.raum-tresor{background:var(--vault-ground)}
.raum-tresor .kopf{background:var(--vault-head);border-bottom:3px solid var(--gold-600)}
.raum-tresor .block{border-color:var(--vault-line)}
.raum-tresor .zeilen>li,.raum-tresor .leer,.raum-tresor .tabelle td,.raum-tresor .verlauf li,.raum-tresor .block-fuss,.raum-tresor .tabelle-box{border-color:var(--vault-line-soft)}
.raum-tresor .tabelle th{border-color:var(--vault-line)}
.raum-tresor .tabelle tbody tr:hover{background:#f8f6f0}
.namensband{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline;justify-content:space-between;
  padding:var(--s3) var(--s4);border:1px dashed var(--gold-700);border-radius:var(--radius);background:#fffdf6;font-size:var(--fs-sm);color:var(--gold-900)}
.frage{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s5);border-top:1px solid var(--vault-line-soft)}
.frage .oben{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s4);align-items:baseline}
.frage .notiz{font-size:var(--fs-sm);color:var(--muted);border-left:2px solid var(--gold-600);padding-left:var(--s3)}

/* ---------- 10 · Kandidatenseiten (Handy zuerst) -------------------- */
/* Klasse am <body>: raum-kandidat */
.raum-kandidat{background:var(--white);font-size:var(--fs-cand)}
.raum-kandidat .kopf-innen{min-height:56px;max-width:var(--cand-max);justify-content:space-between;
  padding-inline:max(var(--s5),env(safe-area-inset-left,0px)) max(var(--s5),env(safe-area-inset-right,0px))}
.raum-kandidat .marke{font-size:1.375rem}
.schritt-label{font-size:var(--fs-sm);color:rgba(255,255,255,.82)}
.fortschritt{height:3px;background:var(--navy-700)}
.fortschritt span{display:block;height:3px;background:var(--gold-600)}
.fortschritt .w20{width:20%}.fortschritt .w40{width:40%}.fortschritt .w60{width:60%}.fortschritt .w80{width:80%}.fortschritt .w100{width:100%}
.kandidat{max-width:var(--cand-max);margin-inline:auto;
  padding-block:var(--s6) var(--s8);
  padding-left:max(var(--s5),env(safe-area-inset-left,0px));padding-right:max(var(--s5),env(safe-area-inset-right,0px));
  display:flex;flex-direction:column;gap:var(--s5)}
.kandidat h1{font-size:var(--fs-cand-h1);margin-top:0}
.kandidat p{line-height:1.6}
.kandidat .feld>label,.kandidat legend,.kandidat .feld>.bez{font-size:var(--fs-base)}
.kandidat input[type=text],.kandidat input[type=email],.kandidat input[type=tel],.kandidat input[type=url],.kandidat select,.kandidat textarea{min-height:var(--tap-cand);font-size:1rem}
.kandidat .knopf{min-height:var(--tap-cand);font-size:1rem;width:100%}
.kandidat .knopf.leise{width:auto}
.ohne-namen{display:flex;gap:var(--s2);align-items:center;background:var(--env-bg);color:var(--env-fg);
  font-size:var(--fs-sm);padding:var(--s2) var(--s3);border-radius:var(--radius)}
.ohne-namen svg{flex:none}
.kontaktkarte{background:var(--navy-050);border-radius:var(--radius);padding:var(--s3) var(--s4);font-size:var(--fs-sm);color:var(--navy-800);line-height:1.5}
.angaben{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);padding-block:var(--s4);
  border-block:1px solid var(--line);font-size:var(--fs-base)}
.angaben dt{color:var(--muted)}
.angaben dd{color:var(--ink)}
.schritte-liste li{display:grid;grid-template-columns:28px 1fr;gap:var(--s2);padding-block:var(--s3);border-top:1px solid var(--line-soft);font-size:var(--fs-base)}
.schritte-liste .nr{color:var(--accent-text);font-weight:500}
.aktionsleiste{position:sticky;bottom:0;background:var(--white);border-top:1px solid var(--line);
  padding:var(--s3) max(var(--s5),env(safe-area-inset-right,0px)) calc(var(--s3) + env(safe-area-inset-bottom,0px)) max(var(--s5),env(safe-area-inset-left,0px))}
.aktionsleiste-innen{max-width:var(--cand-max);margin-inline:auto;display:grid;grid-template-columns:auto 1fr;gap:var(--s2)}
.aktionsleiste .knopf.zweit{width:auto}
.klein-druck{font-size:var(--fs-sm);color:var(--muted);line-height:1.5}
.kandidat-fuss{max-width:var(--cand-max);margin-inline:auto;border-top:1px solid var(--line);
  padding:var(--s4) max(var(--s5),env(safe-area-inset-right,0px)) var(--s6) max(var(--s5),env(safe-area-inset-left,0px));
  display:flex;gap:var(--s5);font-size:var(--fs-sm)}
.kandidat-fuss a{color:var(--muted)}
.spiegel li{display:flex;justify-content:space-between;gap:var(--s3);padding-block:var(--s3);border-top:1px solid var(--line-soft);font-size:var(--fs-base)}

/* ---------- 11 · Hilfsklassen --------------------------------------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zeile{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
.zeile.weit{justify-content:space-between}
.stapel{display:flex;flex-direction:column;gap:var(--s3)}
.gedaempft{color:var(--muted)}
.stark{color:var(--ink);font-weight:500}
.nowrap{white-space:nowrap}

/* ---------- 12 · Druck ---------------------------------------------- */
@media print{
  .kopf,.umgebung,.handlungen,.knopf,.filter,.aktionsleiste{display:none !important}
  body{background:#fff}
  .block{border-color:#999;break-inside:avoid}
}

/* ---------- 13 · Umbruch langer Werte (D93) ------------------------- */
/* Werte ohne Umbruchstelle (URLs, E-Mail-Teile, lange Komposita) dürfen
   ihre Box nie sprengen. overflow-wrap erbt; Knöpfe, Etiketten und
   Tabellenköpfe brechen weiterhin nicht mitten im Wort. */
.seite,.kandidat{overflow-wrap:anywhere}
.knopf,.etikett,.tabelle th,.nav a,.marke{overflow-wrap:normal}
.fakten>div,.fakten dd,.reihe>*,.raster-2>*{min-width:0}
/* Versteckte Beschriftungen (.sr) in breiten Tabellen bleiben in ihrer Box. */
.tabelle-box{position:relative}