/* BR-Smart — schlankes Vanilla-CSS (§32). Ausgelagert aus base.html (Etappe 12,
   strikte CSP ohne 'unsafe-inline'). */

/* =====================================================================
   Design-System (Etappe 22-1) — „das freundliche Pendant zu BRbase".
   Tokens = Single Source of Truth; bestehende Werte 1:1 abgebildet, damit
   sich optisch (noch) nichts ändert. Das sichtbare Redesign folgt in 22-2
   (Sidebar) und 22-3 (Start-Cockpit).

   Tonalität/Microcopy-Leitfaden: warm, „du"-Ansprache, klare Hierarchie,
   ermutigende Leerzustände („Noch nichts — alles ruhig 🙂") statt leerer
   Tabellen; Fristen ruhig als Ampel, nicht alarmierend.
   ===================================================================== */
:root {
  /* Akzent (Lebenshilfe-Blau) — AA-konform: Weiß-auf-Blau ~5,8:1 */
  --accent: #0069b4;
  --accent-stark: #00568f;         /* hover / aktiv */
  --accent-zart: #e6f0f8;          /* heller Tint, Tabellen-Hover */
  --accent-fokus: rgba(0,105,180,.45);
  /* Neutrale (warm) */
  --text: #1a1a1a;
  --text-leise: #555;
  --text-zart: #6b6b6b;   /* WCAG-AA-Kontrast auf Weiß (Etappe 22-6) */
  --bg: #fff;
  --bg-karte: #fafcfb;
  --bg-leise: #f4f6f5;
  --border: #e3e3e3;
  --border-stark: #ccc;
  /* Semantik — Frist/Status (Ampel) */
  --frist-ok: #0a7d3c;   --frist-ok-bg: #e8f6ef;
  --frist-warn: #b9670a; --frist-warn-bg: #fdf2e3;
  --frist-krit: #b00020; --frist-krit-bg: #fdecee; --frist-krit-stark: #8f0019;
  --voll-bg: #fbe9f0;    /* zartes Rosa: erledigt/nichts mehr zu tun */
  --zuviel-bg: #f5cfdd;  /* kraeftigeres Rosa: ueberbesetzt, bitte ansehen */
  --teil-bg: #fdeedd;    /* helles Orange: teilweise besetzt, Rest noch offen */
  /* Kalender-Kachel-Hintergründe (Mehrfarb-Palette je Gremium) */
  --kal-br: #e3eef8; --kal-grau: #eef1f4; --kal-lila: #f1ebfd;
  --kal-tuerkis: #e4f3f6; --kal-pink: #fde9f1; --kal-mg: #fff8cc;
  /* Form */
  --radius: 12px; --radius-s: 8px;
  --schatten: 0 2px 14px rgba(0,0,0,.05);
  --schatten-s: 0 1px 6px rgba(0,0,0,.05);
  /* Abstände */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .8rem;
  --sp-4: 1.2rem; --sp-5: 1.6rem; --sp-6: 2.4rem;
  /* Typo */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

/* Dunkle Palette (Phase 1): nur die Tokens werden umdefiniert — alle token-
   basierten Flächen kippen damit mit. „Dunkel" erzwingt dunkel; „System" folgt
   per Media-Query dem Betriebssystem; „Hell" bleibt beim :root-Default. */
[data-theme="dunkel"] {
  --accent: #4aa3e0;  --accent-stark: #6cb6e8;  --accent-zart: #16304a;
  --accent-fokus: rgba(74,163,224,.5);
  --text: #e6e8ea;  --text-leise: #b7bcc2;  --text-zart: #9aa0a6;
  --bg: #15171b;  --bg-karte: #1e2127;  --bg-leise: #252a31;
  --border: #343941;  --border-stark: #474d56;
  --frist-ok: #4cc77f;   --frist-ok-bg: #12281c;
  --frist-warn: #e0953f; --frist-warn-bg: #2c2210;
  --frist-krit: #ff6f81; --frist-krit-bg: #2e1418; --frist-krit-stark: #ff8a99;
  --voll-bg: #2d1621;  --zuviel-bg: #4a1f33;  --teil-bg: #33240f;
  --kal-br: #15314e; --kal-grau: #2a3038; --kal-lila: #2a2142;
  --kal-tuerkis: #112f35; --kal-pink: #361421; --kal-mg: #332c10;
  --schatten: 0 2px 14px rgba(0,0,0,.5);
  --schatten-s: 0 1px 6px rgba(0,0,0,.45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --accent: #4aa3e0;  --accent-stark: #6cb6e8;  --accent-zart: #16304a;
    --accent-fokus: rgba(74,163,224,.5);
    --text: #e6e8ea;  --text-leise: #b7bcc2;  --text-zart: #9aa0a6;
    --bg: #15171b;  --bg-karte: #1e2127;  --bg-leise: #252a31;
    --border: #343941;  --border-stark: #474d56;
    --frist-ok: #4cc77f;   --frist-ok-bg: #12281c;
    --frist-warn: #e0953f; --frist-warn-bg: #2c2210;
    --frist-krit: #ff6f81; --frist-krit-bg: #2e1418; --frist-krit-stark: #ff8a99;
    --kal-br: #15314e; --kal-grau: #2a3038; --kal-lila: #2a2142;
    --kal-tuerkis: #112f35; --kal-pink: #361421; --kal-mg: #332c10;
    --schatten: 0 2px 14px rgba(0,0,0,.5);
    --schatten-s: 0 1px 6px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}

/* Barrierefreiheit (gilt global, leichte Verbesserung) */
:focus-visible { outline: 2px solid var(--accent-fokus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important;
    scroll-behavior: auto !important; }
}

/* --- Basis-Komponenten (ds-*, namespaced -> kollisionsfrei) --------------- */
.ds-card { background: var(--bg-karte); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--schatten); padding: var(--sp-5);
  box-sizing: border-box; }
.ds-card-titel { margin: 0 0 var(--sp-3); font-size: 1.05rem; }

.ds-badge { display: inline-flex; align-items: center; gap: .3em; font-size: .8rem;
  font-weight: 600; padding: .15em .6em; border-radius: 999px;
  background: var(--bg-leise); color: var(--text-leise); }
.ds-badge-ok { background: var(--frist-ok-bg); color: var(--frist-ok); }
.ds-badge-warn { background: var(--frist-warn-bg); color: var(--frist-warn); }
.ds-badge-krit { background: var(--frist-krit-bg); color: var(--frist-krit); }

.ds-ampel { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; }
.ds-ampel::before { content: ""; width: .7em; height: .7em; border-radius: 50%;
  background: currentColor; flex: none; }
.ds-ampel-ok { color: var(--frist-ok); }
.ds-ampel-warn { color: var(--frist-warn); }
.ds-ampel-krit { color: var(--frist-krit); }

.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font-weight: 600; font-size: .95rem; padding: .5rem .9rem; border-radius: var(--radius-s);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background .15s, border-color .15s; }
.ds-btn-primary { background: var(--accent); color: #fff; }
.ds-btn-primary:hover { background: var(--accent-stark); }
.ds-btn-sek { background: var(--bg); color: var(--text); border-color: var(--border-stark); }
.ds-btn-sek:hover { border-color: var(--accent); }

.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th { text-align: left; font-size: .82rem; color: var(--text-leise);
  font-weight: 600; padding: .5rem .6rem; border-bottom: 2px solid var(--border); }
.ds-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); }
.ds-table tbody tr:hover { background: var(--accent-zart); }
.ds-table-klick tbody tr { cursor: pointer; }

.ds-leer { text-align: center; color: var(--text-leise);
  padding: var(--sp-6) var(--sp-4); background: var(--bg-leise); border-radius: var(--radius); }
.ds-leer-ico { font-size: 2rem; display: block; margin-bottom: var(--sp-2); }

.ds-stepper { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .9rem; margin: 0 0 var(--sp-4); }
.ds-stepper-schritt { display: inline-flex; align-items: center; gap: .4em;
  color: var(--text-zart); }
.ds-stepper-schritt.aktiv { color: var(--accent); font-weight: 700; }
.ds-stepper-schritt.fertig { color: var(--frist-ok); }

body { font-family: system-ui, sans-serif; max-width: 52rem; margin: 2rem auto;
       padding: 0 1rem; line-height: 1.5; color: var(--text); background: var(--bg); }
h1 { font-size: 1.4rem; } a { color: var(--accent); }
/* Einheitlicher Default-Button (Primär, AA-Grün) – nie der graue Browser-Default.
   Icon-/Spezial-Buttons setzen ihren eigenen Hintergrund und überschreiben das. */
button { padding: .45rem 1.1rem; cursor: pointer; font: inherit; font-weight: 600;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: .4rem; }
button:hover { background: var(--accent-stark); border-color: var(--accent-stark); }
button:disabled { opacity: .55; cursor: default; }
[role="alert"] { background: var(--frist-krit-bg); border: 1px solid var(--frist-krit); padding: .5rem; color: var(--frist-krit); }
.ok { color: var(--frist-ok); } .nok { color: var(--frist-krit); }
/* Utilities statt Inline-Styles — die strenge CSP (style-src 'self') blockiert style="…". */
.is-hidden { display: none; }
.form-inline { display: inline; }
/* Systemweite Rückmeldungen (django messages). */
.meldungen { margin: 0 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.meldung { padding: .5rem .8rem; border-radius: .4rem; border: 1px solid var(--border); }
.meldung-success { background: var(--frist-ok-bg); border-color: var(--frist-ok); color: var(--frist-ok); }
.meldung-error { background: var(--frist-krit-bg); border-color: var(--frist-krit); color: var(--frist-krit); }
.meldung-warning { background: var(--frist-warn-bg); border-color: var(--frist-warn); color: var(--frist-warn); }

/* =====================================================================
   Öffentliche Landing-Page (brsmart.de) — hochwertiger Außenauftritt.
   Full-bleed: bricht aus dem zentrierten 52rem-Body-Container aus, damit
   Nav, Hero und Footer randlos über die volle Breite laufen.
   ===================================================================== */
body.lp-page { max-width: none; margin: 0; padding: 0;
  min-height: 100vh; display: flex; flex-direction: column; }
.lp-container { max-width: 66rem; width: 100%; margin: 0 auto; padding: 0 1.4rem;
  box-sizing: border-box; flex: 1 0 auto; }

/* Logo-Link auf den Login-/Auth-Seiten (kombiniert mit .auth-logo). */
.lp-logo { font-weight: 800; font-size: 1.3rem; color: var(--accent); letter-spacing: -.02em;
  text-decoration: none; }

/* Sticky-Navigation */
.lp-nav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.85);
  backdrop-filter: saturate(1.5) blur(10px); -webkit-backdrop-filter: saturate(1.5) blur(10px);
  border-bottom: 1px solid var(--border); }
.lp-nav-inner { max-width: 66rem; margin: 0 auto; padding: .65rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between; }
.lp-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  font-weight: 800; font-size: 1.2rem; color: var(--accent); letter-spacing: -.02em; }
.lp-brand-mark { display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: .55rem; background: var(--accent); color: #fff; flex: none; }
.lp-nav-cta { text-decoration: none; font-weight: 600; font-size: .95rem; padding: .5rem 1.2rem;
  border-radius: 999px; background: var(--accent); color: #fff; border: 1px solid var(--accent);
  transition: background .15s ease; }
.lp-nav-cta:hover { background: var(--accent-stark); }

/* Hero — dunkles Marken-Band */
.lp-hero { color: #fff; text-align: center; padding: 4.4rem 1.4rem 4.8rem;
  background: radial-gradient(135% 120% at 50% -25%, #1f8ad4 0%, var(--accent) 46%, #00538b 100%); }
.lp-hero-inner { max-width: 46rem; margin: 0 auto; }
.lp-eyebrow { display: inline-block; margin: 0 0 1.1rem; font-size: .8rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #d4eafa;
  background: rgba(255,255,255,.13); padding: .32rem .85rem; border-radius: 999px; }
.lp-hero h1 { font-size: 2.7rem; line-height: 1.1; margin: 0 0 1rem; letter-spacing: -.025em;
  font-weight: 800; }
.lp-hero .lp-lead { font-size: 1.15rem; color: #e6f2fc; max-width: 39rem; margin: 0 auto 2rem;
  line-height: 1.55; }
.lp-hero-cta { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-weight: 700; font-size: 1.05rem; padding: .8rem 1.8rem; border-radius: 999px;
  background: var(--bg-karte); color: var(--accent-stark); box-shadow: 0 10px 26px rgba(0,0,0,.20);
  transition: transform .15s ease, box-shadow .15s ease; }
.lp-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.26); }
.lp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem 1.6rem;
  list-style: none; padding: 0; margin: 2.2rem 0 0; }
.lp-trust li { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem;
  font-weight: 600; color: #dcecf8; }
.lp-trust svg { color: #a6d4f0; flex: none; }

/* Funktions-Kacheln */
.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
  margin: 3.4rem auto; }
.lp-tile { border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem 1.4rem;
  background: var(--bg-karte);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.lp-tile:hover { border-color: var(--accent); box-shadow: 0 10px 28px rgba(0,0,0,.08);
  transform: translateY(-3px); }
.lp-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; border-radius: 12px; background: var(--accent-zart);
  color: var(--accent); margin-bottom: .9rem; }
.lp-tile h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.lp-tile p { margin: 0; color: var(--text-leise); font-size: .94rem; line-height: 1.5; }

/* Footer */
.lp-foot { border-top: 1px solid var(--border); background: var(--bg-leise); }
.lp-foot-inner { max-width: 66rem; margin: 0 auto; padding: 1.8rem 1.4rem; display: flex;
  flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
  color: var(--text-zart); font-size: .9rem; }
.lp-foot-brand { font-weight: 800; color: var(--accent); letter-spacing: -.02em; }
.lp-foot a { color: var(--text-leise); text-decoration: none; }
.lp-foot a:hover { color: var(--accent); }
.lp-rechts { margin: 0; }
/* Anmelde-/Auth-Karte. */
.auth-card { max-width: 22rem; margin: 2.5rem auto 1rem; padding: 1.6rem 1.6rem 1.4rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-karte);
  box-shadow: 0 2px 14px rgba(0,0,0,.05); }
.auth-logo { display: block; text-align: center; margin-bottom: .2rem; }
.auth-card h1 { text-align: center; font-size: 1.3rem; margin: 0 0 1.2rem; }
.auth-intro { text-align: center; color: var(--text-leise); font-size: .9rem; margin: -.6rem 0 1.2rem; }
.auth-erfolg { text-align: center; color: var(--frist-ok); background: var(--frist-ok-bg);
  border: 1px solid #b7e0c6; border-radius: .5rem; padding: .55rem .7rem;
  font-size: .9rem; margin: -.4rem 0 1.1rem; }
.auth-feld { margin-bottom: .9rem; }
.auth-feld label { display: block; font-size: .85rem; font-weight: 600; color: var(--text-leise);
  margin-bottom: .25rem; }
.auth-form input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--border-stark);
  border-radius: 8px; font-size: 1rem; box-sizing: border-box; }
.auth-form input:focus { border-color: var(--accent); outline: 2px solid rgba(11,153,85,.15); }
.auth-submit { width: 100%; background: var(--accent); color: #fff; border: none; font-weight: 600;
  font-size: 1rem; padding: .6rem; border-radius: 8px; margin-top: .3rem; }
.auth-submit:hover { background: var(--accent-stark); }
.auth-vergessen { text-align: center; margin: 1rem 0 0; font-size: .9rem; }
.auth-2fa-hilfe { text-align: center; list-style-position: inside; padding-left: 0;
  margin: .8rem 0; color: var(--text-leise); font-size: .9rem; }
.auth-2fa-qr { text-align: center; margin: 1rem 0; }
.auth-2fa-qr img { display: inline-block; background: var(--bg-karte); padding: .4rem;
  border: 1px solid var(--border); border-radius: 8px; }
.auth-2fa-secret { font-family: monospace; letter-spacing: .04em; word-break: break-all; }
.auth-foot { text-align: center; }
/* Rechtstexte (Impressum, Datenschutz) — im Landing-Design (.lp-page), zentriert. */
.rechtstext { max-width: 44rem; margin: 2.8rem auto 1rem; }
.rechtstext h2 { font-size: 1.05rem; margin: 1.4rem 0 .3rem; }
.rechtstext ul { margin: .3rem 0 .3rem 1.2rem; }
.rechts-zurueck { margin-top: 2rem; }
@media (max-width: 52rem) {
  .lp-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 36rem) {
  .lp-features { grid-template-columns: 1fr; }
  .lp-hero { padding: 3.2rem 1.2rem 3.4rem; }
  .lp-hero h1 { font-size: 2rem; }
  .lp-hero .lp-lead { font-size: 1.05rem; }
}

/* Ladungs-Flow (Sitzungs-Reiter „Ladung"). */
.schritte { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .8rem;
            margin: 1rem 0; max-width: 40rem; }
/* Schritt-Karten (Ladung/Nachladung/Storno): durchgängig in Akzent-Blau —
   einheitliche, strukturierte Optik unabhängig vom Status. */
.schritt { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: .6rem;
           padding: .8rem 1rem; background: var(--accent-zart); }
.schritt.erledigt { border-left-color: var(--accent); background: var(--accent-zart); }
.schritt h3 { margin: 0 0 .4rem; font-size: 1rem; }
.pdf-upload { display: inline-flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .3rem 0; }
.pdf-aktionen { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.pdf-aktionen .loeschen-form { margin-top: 0; }
/* E-Mail-Vorschau (wie ein Mail-Client). */
.mail-card { border: 1px solid var(--border); border-radius: .6rem; overflow: hidden;
             background: var(--bg-karte); box-shadow: 0 1px 4px rgba(0,0,0,.06); margin: .5rem 0; }
.mail-head { background: var(--bg-leise); padding: .7rem 1rem; border-bottom: 1px solid var(--border); }
.mail-row { display: flex; gap: .6rem; font-size: .9rem; padding: .12rem 0; }
.mail-key { color: var(--text-zart); min-width: 3.8rem; flex-shrink: 0; }
.mail-val { color: var(--text); min-width: 0; }
.mail-count { color: var(--text-zart); }
.mail-body { padding: 1rem; line-height: 1.55; }
.mail-anhaenge { padding: 0 1rem 1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.mail-anhang { background: var(--bg-leise); border: 1px solid var(--border); border-radius: .4rem;
               padding: .25rem .6rem; font-size: .85rem; }
.mail-actions { margin: .8rem 0 0; }
.mail-card-voll { max-width: none; }
/* Zweite Mail (Vorgesetzte) unter der Ersatz-/Storno-Mail (Etappe 31). */
.mail-untertitel { margin: 1.3rem 0 .3rem; font-size: 1rem; color: var(--text-zart);
                   border-top: 1px dashed var(--border); padding-top: .9rem; }
/* Vorgesetzten-Pflege im Personen-Dialog (Etappe 31). */
.vorgesetzte-block { margin-top: 1rem; padding: .9rem 1.6rem 0; border-top: 1px solid var(--border); }
.vorgesetzte-block h4 { margin: 0 0 .6rem; font-size: .95rem; }
.vg-liste { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .6rem; }
.vg-item { border: 1px solid var(--border); border-radius: .55rem; padding: .55rem .7rem .7rem;
           background: var(--bg-leise); display: grid; gap: .5rem; }
.vg-item-kopf { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.vg-item-titel { font-weight: 600; font-size: .9rem; min-width: 0; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
.vg-del { margin: 0; }
.vg-entfernen-btn { font: inherit; font-size: .82rem; background: none; border: none;
                    color: var(--frist-krit); cursor: pointer; padding: .15rem .3rem; }
.vg-entfernen-btn:hover { text-decoration: underline; }
.vg-felder { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.vg-felder input[type=email] { grid-column: 1 / -1; }
.vg-felder input { width: 100%; box-sizing: border-box; font: inherit; padding: .4rem .5rem;
                   border: 1px solid var(--border); border-radius: .4rem; background: var(--bg-karte); }
.vg-form { display: grid; gap: .5rem; }
.vg-akt { display: flex; justify-content: flex-end; }
.vg-add { margin-top: .2rem; padding-top: .8rem; border-top: 1px dashed var(--border); gap: .5rem; }
.vg-add-titel { margin: 0; font-size: .88rem; color: var(--text-zart); }
.vg-fehler { color: var(--frist-krit); font-size: .85rem; margin: .3rem 0; }
.erg-aufnahme { border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: .5rem; padding: .7rem .9rem; margin: 0 0 1rem; background: var(--accent-zart); }
.erg-aufnahme-text { margin: 0 0 .5rem; }
.erg-aufnahme-stimmen { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.erg-aufnahme-stimmen label { display: inline-flex; flex-direction: column; gap: .2rem;
  font-size: .82rem; color: var(--text-leise); }
.erg-aufnahme-stimmen input { width: 4rem; padding: .35rem .4rem;
  border: 1px solid var(--border-stark); border-radius: .4rem; box-sizing: border-box; }
.erg-aufnahme-ok { color: var(--frist-ok); margin: .5rem 0 0; }
.erg-aufnahme-warn { color: var(--frist-krit); margin: .5rem 0 0; }
.auto-best-zeile { max-width: 100%; width: fit-content; }
/* Notausgang: manuelle Versand-Bestätigung, falls kein BCC-Beleg kommt — dezent. */
.notausgang { margin: .8rem 0 0; font-size: .9rem; }
.notausgang > summary { cursor: pointer; color: var(--text-leise); }
.notausgang > summary:hover { color: var(--accent); }
.notausgang .hinweis { margin-top: .4rem; }

/* Start-Dashboard. */
.start-kopf { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.start-kopf .avatar { width: 4rem; height: 4rem; font-size: 1.5rem; margin-right: 0; }
.start-kopf h1 { margin: 0; }
.start-rolle { margin: .1rem 0 0; color: var(--text-leise); }
.naechste-karte { display: flex; flex-direction: column; gap: .3rem; border: 1px solid var(--border);
                  border-left: 5px solid var(--accent); border-radius: .6rem; padding: 1rem 1.1rem;
                  margin-bottom: 1.4rem; text-decoration: none; color: inherit; background: var(--bg-karte); }
.naechste-karte:hover { background: var(--frist-ok-bg); box-shadow: 0 1px 5px rgba(0,0,0,.08); }
.nk-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); font-weight: 700; }
.nk-titel { font-weight: 600; font-size: 1.05rem; }
.nk-ort { font-size: .85rem; color: var(--text-leise); }
.naechste-karte .kal-bf { font-size: .9rem; }
.start-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--sp-3); }
.start-tile { display: flex; align-items: flex-start; gap: .8rem; text-decoration: none; color: var(--text);
              background: var(--bg-karte); border: 1px solid var(--border); border-radius: var(--radius);
              box-shadow: var(--schatten); padding: var(--sp-4);
              transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.start-tile:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-2px); }
.start-tile:hover .st-titel { color: var(--accent); }
.st-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
          width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-zart); color: var(--accent); }
.st-txt { display: flex; flex-direction: column; gap: .15rem; }
.st-titel { font-weight: 700; font-size: 1.02rem; color: var(--text); transition: color .15s ease; }
.st-text { font-size: .82rem; color: var(--text-zart); line-height: 1.35; }
/* Konto-Seite. */
.erfolg { background: var(--frist-ok-bg); border: 1px solid var(--accent); color: var(--frist-ok); padding: .5rem .8rem;
          border-radius: .4rem; max-width: 28rem; }
.konto-info { display: flex; flex-direction: column; margin: 1rem 0 1.5rem; max-width: 28rem; }
.konto-info > div { display: flex; justify-content: space-between; gap: 1rem;
                    border-bottom: 1px solid var(--border); padding: .45rem 0; }
.konto-info dt { color: var(--text-leise); margin: 0; }
.konto-info dd { margin: 0; font-weight: 600; }
table { border-collapse: collapse; } td, th { border: 1px solid var(--border-stark); padding: .3rem .6rem; }

/* Profil-Dropdown (Avatar-Kreis + Vorschau + Abmelden) */
.nav-profil { position: relative; }
.nav-profil > summary { list-style: none; cursor: pointer; display: inline-flex;
  padding: 2px; border-radius: 50%; border: 2px solid transparent; line-height: 0; }
.nav-profil > summary .avatar { margin-right: 0; }
.nav-profil > summary::-webkit-details-marker { display: none; }
.nav-profil > summary::marker { content: ""; }
.nav-profil > summary:hover { border-color: #cdeede; }
.nav-profil[open] > summary { border-color: var(--accent); }
.nav-profil-menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 50;
  background: var(--bg-karte); border: 1px solid var(--border); border-radius: .7rem;
  box-shadow: 0 .6rem 1.8rem rgba(0,0,0,.16); width: 18rem; padding: 1rem 1.1rem; }
.nav-profil-kopf { display: flex; align-items: center; gap: .7rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--border); margin-bottom: .7rem; }
.nav-profil-kopf strong { display: block; }
.nav-profil-rolle { color: var(--text-leise); font-size: .85rem; }
.nav-profil-info { margin: 0 0 .7rem; display: flex; flex-direction: column; gap: .35rem; }
.nav-profil-info > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.nav-profil-info dt { color: var(--text-leise); margin: 0; }
.nav-profil-info dd { margin: 0; font-weight: 600; }
.nav-profil-link { display: block; padding: .45rem 0; font-weight: 600; color: var(--accent);
  text-decoration: none; font-size: .9rem; border-top: 1px solid var(--border); }
.nav-profil-link:hover { text-decoration: underline; }
.nav-profil .nav-profil-abmelden { width: 100%; margin-top: .5rem; padding: .5rem;
  font-size: .9rem; background: var(--bg-karte); border: 1px solid var(--border); border-radius: .5rem;
  color: var(--frist-krit); cursor: pointer; font-weight: 600; }
.nav-profil .nav-profil-abmelden:hover { background: var(--frist-krit-bg); border-color: var(--border); }
/* Reiter-Zeile: Untertabs links, Aktionsbutton rechtsbündig. */
.reiter-zeile { display: flex; justify-content: space-between; align-items: flex-end;
                gap: 1rem; flex-wrap: wrap; }
.reiter-zeile .reiter { flex: 1; margin-bottom: 0; }
.reiter-zeile .btn-neu, .reiter-zeile .btn-download { margin-bottom: .35rem; }
.reiter-zeile .aufg-neu-btn { margin-left: auto; }  /* rechtsbündig auch ohne Reiter */
/* Seitennavigation (Pagination) — Listen mit vielen Einträgen. */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 1.4rem 0 .5rem; flex-wrap: wrap; }
.seite-link { text-decoration: none; font-weight: 600; color: var(--accent);
  border: 1px solid var(--border); border-radius: var(--radius-s); padding: .4rem .9rem; }
.seite-link:hover { border-color: var(--accent); background: var(--accent-zart); }
.seite-disabled { color: var(--text-zart); cursor: default; pointer-events: none; opacity: .55; }
.seite-info { color: var(--text-leise); font-size: .9rem; }

/* Sitzungs-Formular — Datum-Picker + Von/Bis-Zeit (Apple-Kalender-Stil). */
.sitzung-form { max-width: 32rem; }
.sitzung-form label { display: inline-block; font-weight: 600; margin-bottom: .15rem; }
.sitzung-form input[type="text"], .sitzung-form input[type="url"],
.sitzung-form input[type="date"], .sitzung-form input[type="time"] {
  font: inherit; padding: .35rem .5rem; border: 1px solid var(--border-stark); border-radius: .4rem; }
.sitzung-form input[type="text"], .sitzung-form input[type="url"] {
  width: 100%; max-width: 26rem; box-sizing: border-box; }
.sitzung-form select {
  font: inherit; padding: .35rem .5rem; border: 1px solid var(--border-stark); border-radius: .4rem;
  width: 100%; max-width: 26rem; box-sizing: border-box; }
.sitzung-form .feld { margin: .9rem 0; }
.sitzung-form .wann { border: 1px solid var(--border); border-radius: .6rem; padding: .4rem 1rem 1rem; }
.sitzung-form .wann legend { font-weight: 600; padding: 0 .4rem; }
.sitzung-form .zeitspanne { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-end; }
.sitzung-form .errorlist { color: var(--frist-krit); list-style: none; padding: 0; margin: .2rem 0; font-size: .9rem; }
.sitzung-form .online-block { margin-left: 1.5rem; padding-left: .8rem; border-left: 2px solid var(--border); }

/* Sitzungsliste als klickbare Karten. */
/* Filter der Sitzungsliste: Arten frei kombinierbar + Schalter für vergangene. */
.s-filter { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .6rem 1rem; background: var(--bg-leise);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: .6rem .8rem; margin: .6rem 0 0; }
.s-filter-arten { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .9rem; }
.s-filter-titel { font-weight: 600; color: var(--text-leise); }
.s-filter-chk { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.s-filter-verg { border-left: 1px solid var(--border-stark); padding-left: .9rem;
  color: var(--text-leise); }
.s-filter-akt { display: flex; align-items: center; gap: .6rem; }
.sitzung-karten { display: flex; flex-direction: column; gap: .6rem; margin: .6rem 0 1.5rem; }
.sitzung-karte { display: flex; align-items: stretch; justify-content: space-between;
                 border: 1px solid var(--border); border-radius: .6rem; background: var(--bg-karte); overflow: hidden; }
.sitzung-karte-link { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: .25rem;
                      padding: .7rem 1rem; text-decoration: none; color: inherit; cursor: pointer; }
.sitzung-karte-link:hover { background: var(--frist-ok-bg); }
.sitzung-kopf { font-weight: 600; }
.sitzung-kopf .wtag { color: var(--text-zart); font-weight: 400; }
.sitzung-zeitort { font-size: .85rem; color: var(--text-leise); }
.sitzung-meta { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.status-badge { background: var(--bg-leise); border-radius: .4rem; padding: .1rem .5rem; color: var(--text-leise);
                font-size: .8rem; }
.sitzung-meta .kal-bf { font-size: .85rem; }
.sitzung-aktion { display: flex; align-items: center; padding: .7rem 1rem; }
.sitzung-karte-inhalt { display: flex; flex-direction: column; gap: .25rem; padding: .7rem 1rem;
                        flex: 1; min-width: 0; }
.vorschau-badge { display: inline-block; border-radius: .4rem; padding: .15rem .6rem;
                  font-size: .82rem; font-weight: 600; }
.vb-geladen { background: var(--frist-ok-bg); color: var(--accent); }
.vb-ersatz { background: var(--accent-zart); color: var(--accent); }
.vb-teil { background: var(--frist-krit-bg); color: var(--frist-krit); }
.vb-verhindert { background: var(--bg-leise); color: var(--accent); }
.vb-offen { background: var(--frist-warn-bg); color: var(--frist-warn); }

/* Listen-/Kalender-Umschalter + Monatskalender. */
.kal-nav { display: flex; align-items: center; gap: 1rem; margin: .8rem 0; }
.kal-nav a { text-decoration: none; font-size: 1.3rem; font-weight: 700; }
.kal-monat { font-weight: 600; min-width: 9rem; text-align: center; }
table.kalender { width: 100%; table-layout: fixed; }
table.kalender th { background: var(--bg-leise); font-size: .85rem; padding: .3rem; }
table.kalender td { vertical-align: top; height: 4.5rem; padding: .2rem .25rem; }
table.kalender td.fremd { background: var(--bg-karte); color: var(--text-zart); }
table.kalender th.we { color: var(--frist-krit); }
table.kalender td.we { background: var(--bg-leise); }
table.kalender td.fremd.we { background: var(--bg-leise); }
table.kalender td.heute { outline: 2px solid var(--accent); outline-offset: -2px; }
.kal-tag { font-size: .8rem; color: var(--text-zart); }
table.kalender td.heute .kal-tag { color: var(--accent); font-weight: 700; }
table.kalender td.feiertag { background: var(--frist-krit-bg); }
table.kalender td.feiertag .kal-tag { color: var(--frist-krit); font-weight: 700; }
.kal-feiertag { display: block; font-size: .68rem; line-height: 1.2; font-weight: 600;
  color: var(--frist-krit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mobile-Agenda: Tage mit Sitzungen untereinander statt 7-Spalten-Raster. Am
   Desktop versteckt; auf schmalen Geräten ersetzt sie die Tabelle. */
.kal-agenda { display: none; }
.kal-ag-tag { border: 1px solid var(--border); border-left: 4px solid var(--border-stark);
  border-radius: var(--radius-s); background: var(--bg-karte); padding: .55rem .7rem; margin-bottom: .55rem; }
.kal-ag-tag.heute { border-left-color: var(--accent); }
.kal-ag-datum { font-weight: 700; font-size: .92rem; margin-bottom: .15rem; text-transform: capitalize; }
.kal-ag-tag .kal-feiertag { display: inline; font-size: inherit; }
.kal-agenda .kal-termin { font-size: .9rem; margin-top: .35rem; }
.kal-agenda .kal-termin-titel { white-space: normal; }
@media (max-width: 40rem) {
  /* Spezifischer als die generische Responsive-Table-Regel .arbeitsbereich table
     (sonst gewänne die und die Tabelle bliebe neben der Agenda sichtbar). */
  .arbeitsbereich table.kalender { display: none; }
  .kal-agenda { display: block; }
}
/* Landscape-Phones / kleine Tablets (40–48rem): hier zeigt der Kalender noch die
   Tabelle. Die generische .arbeitsbereich table { display:block } verzerrt aber das
   Raster (table-layout:fixed greift nur bei display:table) -> echtes Tabellen-Layout
   erzwingen, damit alle 7 Spalten gleich breit bleiben. */
@media (min-width: 40.0625rem) and (max-width: 48rem) {
  .arbeitsbereich table.kalender { display: table; }
}
/* Teilverhinderung (verhinderung) — aufklappbare Uhrzeit-Details. */
.eil-details { margin-top: .5rem; font-size: .85rem; }
.eil-details textarea { width: 100%; margin-top: .3rem; }

/* Sitzungs-Audit-Chronik (Etappe 15) — read-only Zeitleiste. */
.chronik-liste { list-style: none; margin: 0; padding: 0; border-left: 2px solid #d6deea; }
.chronik-eintrag { position: relative; padding: .5rem .8rem .7rem 1.1rem; }
.chronik-eintrag::before { content: ""; position: absolute; left: -7px; top: .8rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--border); }
.chronik-zeit { display: block; font-size: .75rem; color: var(--text-zart); }
.chronik-kopf { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; }
.chronik-aktion { font-weight: 600; }
.chronik-akteur { font-size: .8rem; color: var(--text-leise); }
.chronik-detail { display: block; font-size: .8rem; color: var(--text-leise); margin-top: .15rem;
  word-break: break-word; }

.kal-termin { display: block; font-size: .8rem; margin-top: .15rem; background: var(--bg-leise);
              border-radius: .3rem; padding: .1rem .3rem; color: inherit;
              text-decoration: none; cursor: pointer;
              border-left: 4px solid transparent; }
/* Hover/Versendet farbneutral, damit die Ausschuss-Tönung erhalten bleibt. */
.kal-termin:hover { filter: brightness(.95); }
.kal-termin.versendet { opacity: .72; }
.kal-termin-titel { display: block; font-weight: 600; white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }
.kal-ort { display: block; font-size: .68rem; color: var(--text-leise); line-height: 1.2;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-bf { display: block; font-size: .68rem; font-weight: 600; line-height: 1.2; }
.kal-bf.ok { color: var(--accent); }
.kal-bf.nok { color: var(--frist-krit); }
.kal-bf.kal-mg-tag { color: var(--frist-warn); font-weight: 600; }

/* Ausschuss-Farben — feste Palette (CSP: keine Inline-Styles). Der ganze Kalender-
   Termin tönt sich leicht in der Farbe + farbiger Streifen links. Blau ist der
   Betriebsratssitzung (Plenum, .kal-ac-br) vorbehalten. */
.kal-ac-br      { background: var(--kal-br); border-left-color: var(--accent); }
.kal-ac-grau    { background: var(--kal-grau); border-left-color: #8b97a8; }
.kal-ac-gruen   { background: var(--frist-ok-bg); border-left-color: var(--frist-ok); }
.kal-ac-orange  { background: var(--frist-warn-bg); border-left-color: var(--frist-warn); }
.kal-ac-rot     { background: var(--frist-krit-bg); border-left-color: var(--frist-krit); }
.kal-ac-lila    { background: var(--kal-lila); border-left-color: #9b6cf0; }
.kal-ac-tuerkis { background: var(--kal-tuerkis); border-left-color: #2aa6bd; }
.kal-ac-pink    { background: var(--kal-pink); border-left-color: var(--frist-krit); }
/* Monatsgespräch mit der GF — Standardfarbe Gelb, klar abgesetzt vom Plenum-Blau. */
.kal-ac-mg      { background: var(--kal-mg); border-left-color: #e0b400; }
/* Farb-Auswahl als klickbare Kreise (Radios). */
.ac-farbwahl { display: inline-flex; flex-wrap: wrap; gap: .45rem; vertical-align: middle; margin: .2rem 0; }
.ac-swatch { cursor: pointer; line-height: 0; display: inline-flex; }
.ac-swatch input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.ac-swatch-dot { display: inline-block; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); transition: transform .1s ease; }
.ac-swatch:hover .ac-swatch-dot { transform: scale(1.08); }
.ac-swatch input:checked + .ac-swatch-dot { box-shadow: 0 0 0 2px var(--text); transform: scale(1.12); }
.ac-swatch input:focus-visible + .ac-swatch-dot { outline: 2px solid var(--accent-fokus); outline-offset: 2px; }
.ac-farbe-grau    { background: #64748b; }
.ac-farbe-gruen   { background: var(--frist-ok); }
.ac-farbe-orange  { background: var(--frist-warn); }
.ac-farbe-rot     { background: var(--frist-krit); }
.ac-farbe-lila    { background: #7c3aed; }
.ac-farbe-tuerkis { background: #0e7490; }
.ac-farbe-pink    { background: var(--frist-krit); }

/* Aktionen auf der Bearbeiten-Seite. */
.abbrechen-link { margin-left: 1rem; color: var(--text-leise); font-size: .9rem; }
.bearbeiten-link { margin-left: .6rem; font-size: .9rem; }
.teil-details { margin: .4rem 0 .8rem; }
.teil-details summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
.teil { color: var(--frist-krit); font-size: .9rem; }

/* Reiter (Tabs) für Verhinderungen. */
.reiter { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 1px solid var(--border-stark); margin: .6rem 0 1rem; }
.reiter a { text-decoration: none; padding: .4rem .8rem; border: 1px solid transparent;
            border-bottom: none; border-radius: .4rem .4rem 0 0; color: var(--accent); }
.reiter a:hover { background: var(--bg-leise); }
.reiter a.aktiv { background: var(--bg-karte); border-color: var(--border-stark); color: var(--text); font-weight: 600;
                  margin-bottom: -1px; }

/* Besetzungs-Vorschau auf der Sitzungs-Seite. */
.besetzung { margin-top: 1rem; }
.besetzung-summary { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--border);
                     border-radius: .6rem; padding: .8rem 1.1rem; margin: 1rem 0;
                     border-left-width: 5px; }
.besetzung-summary.ok { border-left-color: var(--accent); background: var(--frist-ok-bg); }
.besetzung-summary.nok { border-left-color: var(--frist-krit); background: var(--frist-krit-bg); }
.besetzung-summary .bs-quote { font-size: 1.6rem; font-weight: 700; white-space: nowrap; }
.besetzung-summary.ok .bs-quote { color: var(--accent); }
.besetzung-summary.nok .bs-quote { color: var(--frist-krit); }
.besetzung-summary .bs-text { display: flex; flex-direction: column; }
.besetzung-summary .bs-detail { font-size: .85rem; color: var(--text-leise); }
.person-karte.status-verhindert .person-rolle { color: var(--frist-krit); }
.person-karte.status-teilweise .person-rolle { color: var(--frist-krit); }
.person-karte.status-einspringend .person-rolle { color: var(--text-zart); }
.person-karte.status-verfuegbar .person-rolle { color: var(--text-zart); }

/* Rundes Profilbild / Initialen-Avatar. */
.avatar { display: inline-flex; width: 2rem; height: 2rem; border-radius: 50%;
          vertical-align: middle; object-fit: cover; margin-right: .45rem; }
.avatar-init { align-items: center; justify-content: center; background: var(--accent);
               color: #fff; font-size: .8rem; font-weight: 600; }

/* Personenstamm als Karten. */
.personen-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
                   gap: .8rem; margin: .6rem 0 1.6rem; }
.personen-karten .person-info { min-width: 0; }
.personen-karten .person-rolle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-karte { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--border);
                border-radius: .6rem; padding: .7rem .9rem; background: var(--bg-karte);
                text-decoration: none; color: inherit; cursor: pointer; transition: .1s; }
.person-karte:hover { border-color: var(--accent); background: var(--frist-ok-bg); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.person-karte.inaktiv { opacity: .55; }
.person-karte .avatar { width: 3.2rem; height: 3.2rem; font-size: 1.15rem; margin-right: 0;
                        flex-shrink: 0; }
.person-info { display: flex; flex-direction: column; min-width: 0; }
.person-name { font-weight: 600; }
.person-rolle { font-size: .85rem; color: var(--text-leise); }
/* Portal-Hinweis an ein Mitglied (Etappe 15) — bleibt bis zum Ausblenden. */
.benachrichtigung { display: flex; align-items: center; gap: .5rem;
  background: var(--accent-zart); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 6px; padding: .6rem .8rem; margin: 0 0 .6rem; }
.benachrichtigung-text { flex: 1; color: var(--accent); text-decoration: none; }
a.benachrichtigung-text:hover { text-decoration: underline; }
.hinweis-dismiss { margin: 0; }
.hinweis-dismiss button { background: none; border: none; color: var(--text-zart);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; }
.hinweis-dismiss button:hover { color: var(--accent); }
/* Vorsitz-Rücknahme einer Verhinderung direkt an der Besetzungs-Zeile. */
.ruecknahme-form { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.ruecknahme-form input[type=text] { flex: 1 1 12rem; min-width: 0; font-size: .8rem; padding: .3rem .4rem; }
.ruecknahme-form button { font-size: .8rem; padding: .3rem .7rem; }
/* Teilnahmebestätigung (Rückmeldung zur Ladung) als kleine Statuszeile. */
.person-rueckmeldung { font-size: .78rem; margin-top: 2px; font-weight: 600; }
/* Pflicht-Begründung des Mitglieds (z. B. bei 'Sonstige') für den Vorsitz sichtbar. */
.person-begruendung { font-size: .8rem; margin-top: 2px; color: var(--text-leise); font-style: italic; }
/* Verhinderte Karte: knapp + klickbar -> Detail-Popup (reines CSS, :target). */
.person-karte.klickbar { cursor: pointer; }
.person-karte.klickbar.statisch:hover { border-color: var(--accent); background: var(--accent-zart); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.karte-chevron { margin-left: auto; padding-left: .5rem; color: var(--text-zart); font-size: 1.6rem; line-height: 1; }
.person-karte.klickbar:hover .karte-chevron { color: var(--accent); }
.modal { position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 1rem; }
.modal:target { display: flex; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); }
.modal-box { position: relative; z-index: 1; background: var(--bg-karte); border-radius: 10px;
  padding: 1.2rem 1.4rem; max-width: 30rem; width: 100%;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.modal-box h3 { margin: 0 .8rem .5rem 0; }
.modal-box p { margin: .25rem 0; }
.modal-close { position: absolute; top: .4rem; right: .7rem; font-size: 1.5rem;
  line-height: 1; text-decoration: none; color: var(--text-zart); }
.modal-close:hover { color: var(--text); }
.rm-offen { color: var(--frist-warn); }
.rm-zugesagt { color: var(--accent); }
.rm-abgesagt { color: var(--frist-krit); }
/* Karte farblich nach Teilnahmebestätigung (nach Versand): grün/gelb/rot. */
.person-karte.tn-zugesagt, .person-karte.tn-zugesagt.statisch:hover { border-color: var(--accent); background: var(--frist-ok-bg); }
.person-karte.tn-offen, .person-karte.tn-offen.statisch:hover { border-color: #e0bc63; background: var(--frist-warn-bg); }
.person-karte.tn-abgesagt, .person-karte.tn-abgesagt.statisch:hover { border-color: #d77; background: var(--frist-krit-bg); }
/* Reine Anzeige-Karte (nicht klickbar) + Amt-Hervorhebung. */
.person-karte.statisch { cursor: default; }
.person-karte.statisch:hover { border-color: var(--border); background: var(--bg-karte); box-shadow: none; }
.person-karte.ist-vorsitz { border-color: var(--accent); background: var(--frist-ok-bg); }
.person-karte.ist-vorsitz.statisch:hover { border-color: var(--accent); background: var(--frist-ok-bg); }
.person-karte.ist-vorsitz .person-rolle strong { color: var(--accent); }
.person-karte.ist-stellv .person-rolle strong { color: var(--accent); }

/* Wahlperioden als längliche Karten. */
.wp-karten { display: flex; flex-direction: column; gap: .7rem; margin: .6rem 0 1.5rem;
             max-width: 48rem; }
.wp-karte { display: flex; align-items: stretch; justify-content: space-between;
            border: 1px solid var(--border); border-radius: .6rem; background: var(--bg-karte); overflow: hidden; }
.wp-karte.aktiv { border-color: var(--accent); background: var(--frist-ok-bg); }
.wp-karte-link { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: .1rem;
                 padding: .7rem 1rem; text-decoration: none; color: inherit; cursor: pointer; }
.wp-karte-link:hover { background: var(--frist-ok-bg); }
.wp-karte.aktiv .wp-karte-link:hover { background: var(--frist-ok-bg); }
.wp-zeitraum { font-weight: 600; }
.wp-details { font-size: .85rem; color: var(--text-leise); }
.wp-status { display: flex; align-items: center; gap: .8rem; white-space: nowrap; padding: .7rem 1rem; }
.badge-aktiv { background: var(--accent); color: #fff; border-radius: .4rem; padding: .2rem .6rem;
               font-size: .85rem; font-weight: 600; white-space: nowrap; }
/* Als <a> UND als <button> nutzbar: ohne `background: none` würde der globale
   Button-Stil (blauer Grund) bleiben, während hier die Schrift auf Blau gesetzt
   wird -> blau auf blau, erst beim Hover lesbar. Wie .btn-neu/.btn-download. */
.btn-aktivieren { text-decoration: none; border: 1px solid var(--accent); color: var(--accent); border-radius: .4rem;
                  background: none; font: inherit; cursor: pointer; line-height: 1.3;
                  padding: .3rem .7rem; font-size: .9rem; white-space: nowrap; }
.btn-aktivieren:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Seitenkopf mit rechtsbündiger Aktion. */
.seiten-kopf { display: flex; align-items: baseline; justify-content: space-between;
               gap: 1rem; flex-wrap: wrap; }
.btn-neu, .btn-download { text-decoration: none; font: inherit; font-weight: 600;
           background: none; cursor: pointer; line-height: 1.3; border: 1px solid var(--accent);
           color: var(--accent); border-radius: .4rem; padding: .35rem .8rem; white-space: nowrap;
           display: inline-block; }
.btn-neu:hover, .btn-download:hover { background: var(--accent); color: #fff; }

/* Person bearbeiten: Kopf mit großem Avatar + einheitlich gestyltes Formular. */
.person-edit-kopf { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.person-edit-kopf .avatar { width: 4.5rem; height: 4.5rem; font-size: 1.6rem; margin-right: 0; }
.person-edit-kopf h1 { margin: 0; }
.formular { max-width: 32rem; }
.formular p { margin: .9rem 0; }
.formular label { display: inline-block; font-weight: 600; margin-bottom: .15rem; }
.formular input[type=text], .formular input[type=email], .formular input[type=number],
.formular input[type=date], .formular input[type=password], .formular select, .formular textarea {
  font: inherit; padding: .4rem .5rem; border: 1px solid var(--border-stark); border-radius: .4rem;
  width: 100%; max-width: 26rem; box-sizing: border-box; }
.formular input[type=file] { font: inherit; border: none; padding: .2rem 0; }
.formular input[type=checkbox] { width: auto; margin-right: .35rem; }
.formular ul.errorlist { color: var(--frist-krit); list-style: none; padding: 0; margin: .2rem 0; font-size: .9rem; }
.formular .helptext { color: var(--text-zart); font-size: .85rem; }
.formular fieldset { border: 1px solid var(--border); border-radius: .6rem; padding: .3rem 1rem .8rem; margin: 1rem 0; }
.formular legend { font-weight: 600; padding: 0 .4rem; color: var(--text); }
.profil-vorschau { margin: .3rem 0 .6rem; }
.profil-vorschau .avatar { width: 4.5rem; height: 4.5rem; font-size: 1.6rem; }
/* Live-Vorschau: Originalbild (nicht rund), einheitliche Box-Größe für alle. */
.profil-preview-bild { display: block; width: 9rem; height: 9rem; object-fit: contain;
                       border: 1px solid var(--border); border-radius: .4rem; background: var(--bg-karte); }
.profil-preview-bild[hidden] { display: none; }  /* hidden schlägt display:block */

/* Formular-Buttons: Speichern (primär) + Abbrechen (sekundär) gleiche Button-Form. */
.formular button[type=submit], .sitzung-form button[type=submit] {
  background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: .4rem;
  padding: .45rem 1.1rem; font: inherit; }
.formular button[type=submit]:hover, .sitzung-form button[type=submit]:hover { background: var(--accent-stark); }
.formular .abbrechen-link, .sitzung-form .abbrechen-link {
  display: inline-block; padding: .45rem 1.1rem; border: 1px solid var(--border-stark); border-radius: .4rem;
  color: var(--text); background: var(--bg-leise); text-decoration: none; margin-left: .6rem; font-size: inherit; }
.formular .abbrechen-link:hover, .sitzung-form .abbrechen-link:hover { background: var(--bg-leise); }

/* Verhinderungs-Karten (Listen). */
.v-karten { display: flex; flex-direction: column; gap: .6rem; margin: .6rem 0 1.4rem; }
.v-karte { display: flex; align-items: stretch; justify-content: space-between;
           border: 1px solid var(--border); border-radius: .6rem; background: var(--bg-karte); overflow: hidden; }
.v-karte-link { display: flex; align-items: center; justify-content: flex-start; gap: .8rem;
                flex: 1; min-width: 0; padding: .7rem 1rem; text-decoration: none; color: inherit; }
a.v-karte-link:hover { background: var(--frist-ok-bg); }
.v-static { cursor: default; }
.v-karte .avatar { width: 3.6rem; height: 3.6rem; font-size: 1.35rem; margin-right: 0; flex-shrink: 0; }
.v-info { display: flex; flex-direction: column; min-width: 0; gap: .1rem; text-align: left; }
.v-person { font-weight: 600; }
.v-zeit { font-size: .9rem; }
.v-grund { font-size: .85rem; color: var(--text-leise); }
.v-pfeil { margin-left: auto; align-self: center; color: var(--text-zart); font-size: 1.7rem;
           line-height: 1; padding-left: .6rem; }
.v-aktion { display: flex; align-items: center; padding: .5rem .8rem; }
.v-kopf { display: flex; align-items: center; gap: .8rem; margin: .5rem 0 1rem; }
.v-kopf .avatar { width: 3.2rem; height: 3.2rem; font-size: 1.1rem; margin-right: 0; }
.v-kopf h1 { margin: 0; }
.leer-hinweis { color: var(--text-zart); }
/* Datum/Zeit-Paare im Formular nebeneinander (nicht volle Breite). */
.formular .zeitspanne { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-end; margin: .3rem 0; }
.formular .zeitspanne input { width: auto; }

/* Verhinderungsgründe (Etappe 13). */
.verhinderung-form { margin: 1rem 0; max-width: 38rem; }
/* Sitzungs-Rückmeldung: die beiden Buttons (teilnehmen / verhindert) nebeneinander. */
.rueck-aktionen { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .6rem 0; }
.rueck-aktionen form { margin: 0; }
.grund-hinweis { border-left: 4px solid #888; background: var(--bg-leise); padding: .5rem .8rem;
                 margin: .6rem 0; border-radius: .3rem; }
.grund-hinweis.kat-tatsaechlich { border-left-color: var(--accent); }
.grund-hinweis.kat-nicht_leistungspflicht { border-left-color: var(--frist-ok); }
.grund-hinweis.kat-rechtlich { border-left-color: var(--accent); }
.grund-hinweis.kat-sonstige { border-left-color: #999; }
.grund-text { white-space: normal; }
.grund-hinweis .feldlabel { font-weight: 600; }
.pflicht-hinweis { color: var(--frist-krit); font-weight: 600; }
.disclaimer { font-size: .82rem; color: var(--text-zart); margin-top: .5rem; }
.kurzfristig { color: var(--frist-krit); font-size: .9rem; }
.bemerkung { color: var(--text-leise); font-style: italic; }
.entscheidungsliste { list-style: none; padding: 0; }
.entscheidungsliste li { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.entscheidung-form .radio-zeile { display: block; margin: .25rem 0; }
.entscheidung-form fieldset { border: 1px solid var(--border); border-radius: .5rem; margin: .8rem 0; }
.loeschen-form { margin-top: 1.2rem; }
.loeschen-btn { background: var(--bg-karte); color: var(--frist-krit); border: 1px solid #c99; }
.loeschen-btn:hover { background: var(--frist-krit-bg); }

/* Unterreiter (Ansicht-Umschalter) — etwas zurückhaltender als die Hauptreiter. */
.v-unterreiter { font-size: .9rem; margin: .2rem 0 1rem; }
.v-unterreiter a { padding: .3rem .7rem; }

/* „Alle Verhinderungen" als nach Mitglied gruppierte Tabelle. */
.v-gruppe { margin: 1.6rem 0; }
.v-gruppe-name { display: flex; align-items: center; gap: .55rem; margin: 0 0 .4rem;
  font-size: 1.05rem; padding-bottom: .35rem; border-bottom: 2px solid #e3e6ec; }
.v-gruppe-name .avatar { width: 2rem; height: 2rem; font-size: .8rem; margin-right: 0; flex-shrink: 0; }
.v-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; table-layout: fixed; }
/* Feste Spaltenbreiten -> alle „Nach Mitglied"-Tabellen sind identisch ausgerichtet
   (sonst sizt jede Tabelle ihre Spalten eigenständig nach Inhalt). */
.v-tabelle th:first-child { width: 14.5rem; }
.v-tabelle th.v-tabelle-akt-kopf { width: 12rem; }
.v-tabelle th { text-align: left; font-weight: 600; color: var(--text-leise); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .03em; border: none; border-bottom: 1px solid #e3e6ec;
  padding: .35rem .6rem; }
.v-tabelle td { border: none; border-bottom: 1px solid #f0f1f4; padding: .45rem .6rem; vertical-align: top; }
.v-tabelle tbody tr:last-child td { border-bottom: none; }
.v-tabelle tbody tr:hover td { background: var(--bg-leise); }
.v-tabelle-zeit { white-space: normal; }
.v-tabelle-zeit .teil { white-space: nowrap; }
.v-tabelle-akt-kopf { text-align: right; }
.v-tabelle-akt { text-align: right; white-space: nowrap; }
.v-tabelle-akt a { color: var(--accent); text-decoration: none; font-weight: 600; margin-right: .6rem; }
.v-tabelle-akt a:hover { text-decoration: underline; }
.v-tabelle-akt .loeschen-form { display: inline; margin: 0; }
.v-tabelle-akt .loeschen-btn { padding: .2rem .55rem; font-size: .82rem; border-radius: .35rem; }

/* ---- Tagesordnung-Editor (Etappe 17, Master-Detail) ---- */
.to-editor { display: grid; grid-template-columns: 320px 1fr; gap: 1.5rem; align-items: start; margin-top: 1rem; }

.to-sidebar { background: var(--bg-karte); border: 1px solid var(--border); border-radius: .7rem;
  padding: .9rem .7rem; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.to-sidebar h2 { margin: .2rem .45rem .75rem; font-size: .78rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-zart); }
.to-side-liste { list-style: none; padding: 0; margin: 0; }
.to-side-item { display: flex; align-items: center; gap: .2rem; border-radius: .5rem;
  border-left: 3px solid transparent; }
.to-side-item + .to-side-item { margin-top: .1rem; }
.to-side-item > a { flex: 1; min-width: 0; padding: .5rem .55rem; text-decoration: none;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: .4rem; }
.to-side-item > a:hover { background: var(--bg-leise); }
.to-side-item.aktiv { background: var(--accent-zart); border-left-color: var(--accent); }
.to-side-item.aktiv > a { font-weight: 600; color: var(--accent-stark); }
.to-side-item.to-vor > a, .to-side-item.to-nach > a { color: var(--text-zart); font-style: italic; }
.to-side-item.aktiv.to-vor > a, .to-side-item.aktiv.to-nach > a { color: var(--accent-stark); }
.to-nr { color: var(--text-zart); margin-right: .35rem; font-variant-numeric: tabular-nums; }
.to-sort { display: flex; flex-direction: column; line-height: .62; opacity: 0; transition: opacity .12s; }
.to-side-item:hover .to-sort, .to-side-item.aktiv .to-sort { opacity: 1; }
.to-sort form { margin: 0; }
.to-sort button { border: none; background: none; cursor: pointer; color: var(--text-zart); font-size: .62rem; padding: 0 .3rem; }
.to-sort button:hover { color: var(--accent); }
.to-add { margin: .85rem .2rem 0; }
.to-add button { width: 100%; background: var(--bg-karte); border: 1.5px dashed #c7c7c7; color: var(--text-leise);
  border-radius: .5rem; padding: .55rem; cursor: pointer; font-weight: 600; }
.to-add button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-zart); }

.to-main { background: var(--bg-karte); border: 1px solid var(--border); border-radius: .7rem;
  padding: 1.4rem 1.6rem; min-height: 16rem; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.to-block-badge { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  color: var(--accent); background: var(--accent-zart); border-radius: 1rem; padding: .2rem .7rem; margin-bottom: 1.1rem; }
.to-main label { display: block; font-weight: 600; font-size: .85rem; color: var(--text-leise); margin: 1rem 0 .3rem; }
.to-main input[type=text], .to-main textarea { width: 100%; box-sizing: border-box;
  padding: .6rem .7rem; border: 1px solid var(--border-stark); border-radius: .5rem; font: inherit; background: var(--bg-karte); }
.to-main input[type=text]:focus, .to-main textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,105,180,.15); background: var(--bg-karte); }
.to-main input[type=text] { font-size: 1.05rem; font-weight: 600; }
.to-main textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.to-main .to-aktionen { margin-top: 1.2rem; }
.to-aktionen-rechts { display: flex; justify-content: flex-end; gap: .5rem; align-items: center; }
.to-main .to-aktionen .loeschen-btn { font-size: .85rem; padding: .35rem .75rem; }
.to-placeholder { color: var(--text-zart); text-align: center; margin-top: 4.5rem; line-height: 1.6; }
.to-flags { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.to-check { display: flex; align-items: baseline; gap: .45rem; font-weight: 500; }
.to-check .hinweis { font-weight: 400; }
.to-auto { padding: .6rem .7rem; border: 1px dashed var(--border); border-radius: .5rem; background: var(--accent-zart); color: var(--accent); }
.to-auto em { color: var(--text-zart); }
.to-pdfbar { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); flex-wrap: wrap; }
.to-pdfbar form { margin: 0; }
.to-pdf-ok { color: var(--frist-ok); font-size: .9rem; }
.to-kopf-zeile { margin: 1rem 0 .3rem; }
.to-kopf-aktionen { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.to-kopf-aktionen form { margin: 0; }

/* ---- Protokoll (Etappe 18) ---- */
.prot-kopf { background: var(--bg-karte); border: 1px solid var(--border); border-radius: .7rem; padding: 1rem 1.2rem; margin: 1rem 0; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.prot-kopf-zeile { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; }
.prot-kopf-titel { margin: 0; font-size: 1.15rem; }
.prot-warnung { margin: .6rem 0 0; padding: .5rem .75rem; border-radius: .4rem;
  background: var(--frist-krit-bg); color: var(--frist-krit); border: 1px solid #f3c2c8;
  font-weight: 400; font-size: .92rem; }
.prot-warnung strong { font-weight: 700; }
.prot-zeiten { margin: 0; }
.prot-kopf-tab { border-collapse: collapse; width: 100%; font-size: .92rem; line-height: 1.5; }
.prot-kopf-tab th { text-align: left; font-weight: 600; color: var(--text); white-space: nowrap;
  padding: .18rem .8rem .18rem 0; vertical-align: top; border: none; }
.prot-kopf-tab td { color: var(--text-leise); padding: .18rem 0; vertical-align: top; border: none; }
.prot-kopf-tab input[type=time] { padding: .25rem .45rem; border: 1px solid var(--border-stark); border-radius: .4rem; font: inherit; }
.prot-zeit-zelle { display: flex; align-items: center; gap: .5rem; }
/* Start/Stop: schlichte Icon-Buttons im Stil der Anwesenheits-Uhr */
.prot-zeit-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; padding: 0; border: 1px solid var(--border); border-radius: .4rem;
  background: var(--bg-karte); color: var(--text-zart); cursor: pointer; }
.prot-zeit-start:hover:not(:disabled) { background: var(--accent-zart); color: var(--accent); border-color: var(--accent); }
.prot-zeit-stop:hover:not(:disabled) { background: var(--frist-krit-bg); color: var(--frist-krit); border-color: var(--frist-krit); }
.prot-zeit-ico:disabled { opacity: .45; cursor: default; background: var(--bg-leise); color: var(--text-zart); border-color: var(--border); }
.prot-kopf-aktionen { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  border-top: 1px solid var(--border); margin-top: .8rem; padding-top: .8rem; }
/* Rich-Text-Editor — schlichte, „Word-artige" Optik */
.rte { border: 1px solid var(--border-stark); border-radius: .55rem; overflow: hidden;
  background: var(--bg-karte); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.rte-toolbar { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap;
  background: linear-gradient(var(--bg-karte), var(--bg-leise)); border-bottom: 1px solid var(--border);
  padding: .3rem .4rem; position: sticky; top: 0; z-index: 1; }
.rte-gruppe { display: flex; align-items: center; gap: .1rem; }
.rte-gruppe + .rte-gruppe { margin-left: .3rem; padding-left: .4rem; border-left: 1px solid var(--border); }
.rte-toolbar button { min-width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid transparent; background: none; cursor: pointer;
  border-radius: .35rem; padding: 0 .5rem; font: inherit; font-size: .95rem; color: var(--text); }
.rte-toolbar button:hover { background: var(--bg-karte); border-color: var(--border-stark); box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.rte-toolbar button:active { background: var(--accent-zart); border-color: var(--accent); color: var(--accent-stark); }
.rte-ico { font-size: 1.15rem; line-height: 1; }
/* Aktiver Zustand (Fett/Kursiv/Unterstrichen „eingedrückt") */
.rte-toolbar button.aktiv { background: var(--accent-zart); border-color: var(--accent);
  color: var(--accent-stark); box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
/* Farb-Swatches: kleine farbige Quadrate */
.rte-farben { gap: .2rem; }
.rte-swatch { min-width: 0; width: 1.2rem; height: 1.2rem; padding: 0;
  border: 1px solid rgba(0,0,0,.25); border-radius: .25rem; }
.rte-toolbar .rte-swatch.rte-farbe-rot { background: var(--frist-krit); }
.rte-toolbar .rte-swatch.rte-farbe-orange { background: var(--frist-warn); }
.rte-toolbar .rte-swatch.rte-farbe-gruen { background: var(--frist-ok); }
.rte-toolbar .rte-swatch.rte-farbe-blau { background: var(--accent); }
.rte-toolbar .rte-swatch.rte-farbe-lila { background: #7d3c98; }
.rte-toolbar .rte-swatch.rte-farbe-grau { background: #6b6b6b; }
.rte-toolbar .rte-swatch-keine { background: var(--bg-karte); position: relative; }
.rte-toolbar .rte-swatch-keine::after { content: ""; position: absolute; left: 1px; right: 1px;
  top: 50%; height: 2px; background: var(--frist-krit); transform: translateY(-50%) rotate(-45deg); }
.rte-toolbar .rte-swatch:hover { border-color: #333; box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.rte-edit { min-height: 7rem; padding: .7rem .85rem; line-height: 1.55; outline: none;
  background: var(--bg-karte); color: var(--text); }
.rte-edit:focus { box-shadow: inset 0 0 0 2px rgba(0,105,180,.18); }
.rte-edit ul, .rte-edit ol { margin: .3rem 0 .3rem 1.4rem; padding: 0; }
.rte-edit p { margin: .35rem 0; }
.rte-edit:empty::before { content: attr(data-platzhalter); color: var(--text-zart); }

/* Feste Farbpalette (als Klassen, kein inline-style -> CSP-konform). Gilt überall,
   wo gespeicherter Rich-Text angezeigt wird (Editor, Lese-Ansicht, Listen). */
.rte-farbe-rot { color: var(--frist-krit); }
.rte-farbe-orange { color: var(--frist-warn); }
.rte-farbe-gruen { color: var(--frist-ok); }
.rte-farbe-blau { color: var(--accent); }
.rte-farbe-lila { color: #7d3c98; }
.rte-farbe-grau { color: #6b6b6b; }

/* Großansicht des Ergebnis-Felds (Live-Mitschrift auf großem Monitor) */
.ergebnis-gross-dlg { width: 94vw; max-width: 1500px; height: 92vh; max-height: 92vh;
  border: none; border-radius: .8rem; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.ergebnis-gross-dlg::backdrop { background: rgba(0,0,0,.55); }
.ergebnis-gross-form { display: flex; flex-direction: column; height: 100%;
  box-sizing: border-box; padding: 1.4rem 1.8rem 1.6rem; gap: .6rem; }
.ergebnis-gross-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ergebnis-gross-kopf h2 { margin: 0; font-size: 1.7rem; }
.ergebnis-gross-kopf .btn-neu { font-size: 1.05rem; padding: .6rem 1.4rem; white-space: nowrap; }
.prot-context-gross { font-size: 1.3rem; color: var(--text-leise); margin: 0; }
.ergebnis-gross-form > label { font-weight: 600; font-size: 1.05rem; margin: 0; }
.ergebnis-gross-form .rte { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ergebnis-gross-form .rte-edit { flex: 1; overflow: auto; min-height: 0;
  font-size: 2rem; line-height: 1.5; padding: 1rem 1.2rem; }
.ergebnis-gross-form .rte-toolbar button { min-width: 2.3rem; height: 2.3rem; font-size: 1.1rem; }
.ergebnis-gross-form .rte-swatch { width: 1.5rem; height: 1.5rem; }
/* Personelle Einzelmaßnahmen: Kopf mit Großansicht-Button + scrollbares Lese-Popup */
.prot-anh-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.anh-gross-body { flex: 1; overflow: auto; min-height: 0; font-size: 1.5rem; line-height: 1.6; }
.anh-gross-body .prot-anh-gruppe { font-size: 1.7rem; }
.anh-gross-body .prot-anh-beschluss-label { font-size: 1rem; }
/* Beschlüsse (Etappe 23) */
.beschluss-block { margin-top: 1.4rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.beschluss-block-plenum { margin-top: .4rem; border-top: none; padding-top: 0; }
.beschluss-h { margin: 0 0 .7rem; font-size: 1rem; }
.beschluss-karte { border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: .55rem; padding: .9rem 1rem; margin-bottom: .8rem; background: var(--bg-karte); }
.beschluss-karte.beschluss-gefasst { border-left-color: var(--frist-ok); background: var(--bg-karte); }
.beschluss-karte.beschluss-aufgehoben { border-left-color: var(--frist-krit); opacity: .7; }
.beschluss-vertagt-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: .7rem; padding: .5rem .7rem; border-radius: var(--radius);
  background: var(--bg-leise); }
.beschluss-vertagt-banner .hinweis { flex: 1; min-width: 12rem; margin: 0; }
.beschluss-form label.beschluss-label { display: block; font-weight: 600; font-size: .85rem;
  color: var(--text-leise); margin: .6rem 0 .25rem; }
.beschluss-form textarea, .beschluss-form input[type=text], .beschluss-form select,
.beschluss-form input[type=number] { width: 100%; box-sizing: border-box; padding: .45rem .55rem;
  border: 1px solid var(--border-stark); border-radius: .4rem; font: inherit; }
.beschluss-form textarea { resize: vertical; line-height: 1.45; }
.beschluss-reihe, .beschluss-fassen-reihe { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.beschluss-feld { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem;
  font-weight: 600; color: var(--text-leise); flex: 1; min-width: 10rem; }
.beschluss-feld select, .beschluss-feld input { font-weight: 400; }
.beschluss-stimmen { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .7rem; }
.beschluss-stimmen label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem;
  font-weight: 600; color: var(--text-leise); width: 6rem; }
.beschluss-befangen, .beschluss-begr { margin-top: .7rem; border: 1px solid var(--border); border-radius: .45rem; padding: .3rem .5rem; }
.beschluss-befangen summary, .beschluss-begr summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--text-leise); }
.beschluss-begr textarea { margin-top: .4rem; }
.beschluss-befangen-liste { display: flex; flex-wrap: wrap; gap: .3rem .9rem; padding: .5rem .2rem .2rem; }
.beschluss-befangen-liste label { display: flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 400; }
.beschluss-bf { margin: .8rem 0 .4rem; padding: .45rem .6rem; border-radius: .4rem;
  background: var(--accent-zart); color: var(--accent-stark); font-size: .9rem; }
.beschluss-bf-warn { background: var(--frist-krit-bg); color: var(--frist-krit); }
.beschluss-aktionen { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; align-items: center; }
.beschluss-save-status { font-size: .85rem; color: var(--text-zart); min-width: 7rem; }
.beschluss-save-status.ok { color: var(--frist-ok); }
.beschluss-save-status.warn { color: var(--frist-krit); }
.beschluss-aktionen .loeschen-btn { margin-left: auto; }
.beschluss-kopf { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.beschluss-nr { font-weight: 700; }
.beschluss-vorlage-form { margin-bottom: .8rem; }
.beschluss-vorlage-zeile { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.beschluss-vorlage-zeile select { flex: 1; min-width: 14rem; padding: .4rem .5rem;
  border: 1px solid var(--border-stark); border-radius: .4rem; font: inherit; }
/* Schulungs-Antrag mit Eingaben direkt im Satz. Höher gescopt, um die
   .beschluss-form-input-Regel (width:100%) zu überschreiben -> Inline statt Block. */
.schulung-inline { line-height: 1.95; }
.schulung-inline input.schulung-inp, .schulung-inline select.schulung-inp,
.schulung-inline .schulung-tn select {
  width: auto; box-sizing: content-box; padding: .05rem .3rem; margin: 0 .06rem;
  border: none; border-radius: .3rem; font: inherit;
  background: var(--accent-zart); vertical-align: baseline; line-height: 1.3; }
.schulung-inline input.schulung-inp:focus, .schulung-inline select.schulung-inp:focus,
.schulung-inline .schulung-tn select:focus { outline: none;
  box-shadow: 0 0 0 2px var(--accent-zart); }
.schulung-inline input.schulung-inp-num { width: 3rem; }
.schulung-inline input.schulung-inp[type=date] { width: 5.8rem; padding: .03rem .1rem; }
.schulung-inline input.schulung-inp[type=date]::-webkit-calendar-picker-indicator {
  padding: 0; margin: 0 0 0 .05rem; }
.schulung-inline input.schulung-inp[type=date]::-webkit-datetime-edit { padding: 0; }
.schulung-tn { margin: 0 .06rem; white-space: nowrap; }
.schulung-inline .schulung-tn select { border-radius: .3rem; margin: 0; vertical-align: baseline; }
.schulung-tn-del, .schulung-inline-add {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; padding: 0; vertical-align: middle; position: relative; top: -2px;
  border: 1px solid var(--accent); background: var(--accent-zart); color: var(--accent-stark);
  border-radius: .3rem; cursor: pointer; font-size: .9rem; line-height: 1; }
.schulung-tn-del { margin-left: .25rem; }
.schulung-inline-add { margin: 0 .1rem; }
.schulung-tn-del:hover, .schulung-inline-add:hover { background: var(--accent); color: #fff; }
.kosten-zeile { white-space: nowrap; }
.schulung-optionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: .35rem 1.3rem; margin: -1.3rem 0 .7rem; font-size: .9rem; }
.schulung-optionen label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.schulung-optionen label.versteckt { display: none; }
.versteckt { display: none; }
.beschluss-vorschau { margin: .9rem 0; padding: .7rem .9rem; border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: .5rem; background: var(--bg-leise); }
.beschluss-vorschau-label { display: block; font-size: .75rem; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-zart); font-weight: 700; margin-bottom: .4rem; }
.beschluss-block-satz { margin: .35rem 0; }
.beschluss-vorschau input.beschluss-stimmen-inp { width: 2.4rem; box-sizing: border-box;
  padding: .1rem .2rem; margin: 0 .1rem; vertical-align: baseline;
  border: none; border-radius: .3rem; font: inherit; background: var(--accent-zart); }
.beschluss-vorschau input.beschluss-stimmen-inp:focus { outline: none;
  box-shadow: 0 0 0 2px var(--accent-zart); }
.beschluss-satz-warn { color: var(--frist-krit); font-weight: 600; }
.beschluss-text { margin: .35rem 0; white-space: pre-line; }
/* Inline-Lücken im Beschlusstext — wie die Schulungsmaske: width:auto +
   content-box, damit das size-Attribut (autosize) die Breite bestimmt und die
   globale .beschluss-form-Regel (width:100%) nicht greift. */
.beschluss-luecken { line-height: 1.95; }
.beschluss-luecken input.luecke {
  width: auto; box-sizing: content-box; padding: .05rem .3rem; margin: 0 .06rem;
  border: none; border-radius: .3rem; font: inherit; line-height: 1.3;
  background: var(--accent-zart); vertical-align: baseline; }
.beschluss-luecken input.luecke::placeholder { color: var(--text-zart); font-style: italic; }
.beschluss-luecken input.luecke:focus { outline: none; box-shadow: 0 0 0 2px var(--accent-zart); }
.beschluss-luecken-hinweis { margin: .3rem 0 0; font-size: .8rem; color: var(--text-zart); }
.beschluss-begr { margin: .2rem 0; color: var(--text-leise); }
.beschluss-meta { margin: .25rem 0 0; font-size: .85rem; color: var(--text-leise); }
.beschluss-add { margin-top: .2rem; }
.prot-anw-titel { margin-top: 1.1rem !important; border-top: 1px solid var(--border); padding-top: .8rem; }
/* Aufklappbare Sidebar-Abschnitte (native <details>) */
.prot-fold { border-top: 1px solid var(--border); margin-top: 1.1rem; }
.prot-fold-titel { cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: .4rem; padding: .8rem .45rem .55rem;
  font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-zart);
  font-weight: 700; }
.prot-fold-titel::-webkit-details-marker { display: none; }
.prot-fold-titel::after { content: "▸"; margin-left: auto; font-size: 1.15rem; line-height: 1; color: var(--text-zart); }
.prot-fold[open] > .prot-fold-titel::after { content: "▾"; }
.prot-fold-titel:hover { color: var(--accent); }
.prot-fold[open] > .prot-fold-titel { color: var(--text-zart); }
.prot-leitung { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 .4rem; }
.prot-leitung-feld { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem;
  font-weight: 600; color: var(--text-leise); }
.prot-leitung-feld select { width: 100%; box-sizing: border-box; padding: .35rem .45rem;
  border: 1px solid var(--border-stark); border-radius: .4rem; font: inherit; font-weight: 400; color: var(--text);
  background: var(--bg-karte); }
.prot-leitung-feld select:focus { outline: none; border-color: var(--accent); }
.prot-leitung-feld input[type=time] { flex: 1; min-width: 0; padding: .3rem .45rem;
  border: 1px solid var(--border-stark); border-radius: .4rem; font: inherit; }
.prot-anw-liste { list-style: none; padding: 0; margin: 0 0 .6rem; }
.prot-anw-liste li { padding: .2rem .3rem; }
.prot-anw-liste label { display: flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .92rem; }
.prot-anw-save { width: 100%; background: var(--bg-karte); border: 1px solid var(--accent); color: var(--accent); border-radius: .45rem; padding: .45rem; cursor: pointer; font: inherit; font-weight: 600; }
.prot-anw-save:hover { background: var(--accent); color: #fff; }
.prot-dot { color: var(--accent); font-size: .7rem; }
.prot-titel { margin: .2rem 0 .3rem; }
.prot-context { color: var(--text-zart); font-size: .9rem; background: var(--bg-karte); border-left: 3px solid var(--border); padding: .4rem .7rem; border-radius: .3rem; white-space: pre-line; }
.einwand-wahl { display: flex; gap: .6rem; margin-bottom: 1rem; }
.einwand-wahl form { margin: 0; }
.einwand-btn { background: var(--bg-karte); border: 1px solid var(--border-stark); border-radius: .45rem; padding: .45rem .9rem; cursor: pointer; font: inherit; color: var(--text); }
.einwand-btn:hover { border-color: var(--accent); color: var(--accent); }
.einwand-btn.aktiv { border-color: var(--accent); background: var(--accent-zart); color: var(--accent-stark); font-weight: 600; }
.einwand-zeile { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: .45rem; margin-bottom: .4rem; }
.einwand-zeile form { margin: 0; }
.einwand-del { border: none; background: none; color: var(--frist-krit); cursor: pointer; font-size: 1rem; line-height: 1; }
.einwand-del:hover { color: var(--frist-krit); }
.einwand-add { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .8rem; }
.einwand-add label { display: block; font-weight: 600; font-size: .85rem; margin: .6rem 0 .25rem; }
.einwand-add select, .einwand-add textarea { width: 100%; box-sizing: border-box; padding: .5rem .6rem; border: 1px solid var(--border-stark); border-radius: .45rem; font: inherit; }
.erg-karte { display: flex; gap: .5rem; align-items: flex-start; border: 1px solid var(--border); border-radius: .5rem; padding: .6rem .7rem; margin-bottom: .6rem; }
.erg-karte > form:first-child { flex: 1; min-width: 0; }
.erg-titel { width: 100%; box-sizing: border-box; font-weight: 600; padding: .4rem .55rem; border: 1px solid var(--border-stark); border-radius: .4rem; font: inherit; margin-bottom: .4rem; }
.erg-karte textarea { width: 100%; box-sizing: border-box; padding: .45rem .55rem; border: 1px solid var(--border-stark); border-radius: .4rem; font: inherit; resize: vertical; }
.erg-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; }
.erg-fuss-akt { display: flex; gap: .5rem; align-items: center; margin-left: auto; }
.erg-vertagt { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.erg-add { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .8rem; }
.erg-add label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .25rem; }
.erg-add input[type=text] { width: 100%; box-sizing: border-box; padding: .5rem .6rem; border: 1px solid var(--border-stark); border-radius: .45rem; font: inherit; margin-bottom: .5rem; }
@media (max-width: 760px) { .to-editor { grid-template-columns: 1fr; } }

/* --- Tagesordnung-Assistent (Wizard) ---------------------------------- */
.to-start { background: var(--bg-karte); border: 1px solid var(--border); border-radius: .7rem;
  padding: 2rem 1.5rem; text-align: center; margin-top: 1rem; }
.to-start-text { color: var(--text-leise); max-width: 34rem; margin: 0 auto 1.2rem; line-height: 1.6; }
.wizard-titel { margin: 1.2rem 0 .8rem; }
.wizard-kopf-zeile { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin: 0 0 var(--sp-4); }
.wizard-kopf-zeile .ds-stepper { margin: 0; }
.ds-stepper-nr { display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bg-leise);
  color: var(--text-zart); font-size: .8rem; font-weight: 700; }
.ds-stepper-schritt > a { display: inline-flex; align-items: center; gap: .4em;
  color: inherit; text-decoration: none; }
.ds-stepper-schritt > a:hover { color: var(--accent); }
.ds-stepper-schritt.fertig > a { cursor: pointer; }
.ds-stepper-schritt.gesperrt { color: var(--text-zart); }
.ds-stepper-schritt.aktiv .ds-stepper-nr { background: var(--accent); color: #fff; }
.ds-stepper-schritt.fertig .ds-stepper-nr { background: var(--frist-ok); color: #fff; }
.ds-stepper-schritt + .ds-stepper-schritt::before { content: "›"; color: var(--text-zart);
  margin-right: .3rem; }
.wizard-karte { background: var(--bg-karte); border: 1px solid var(--border); border-radius: .7rem;
  padding: 1.5rem 1.6rem; }
.wizard-karte h3 { margin: 0 0 .5rem; }
.wizard-hinweis { color: var(--text-leise); font-size: .92rem; line-height: 1.55; margin: 0 0 1.1rem; }
.wizard-checkliste { list-style: none; padding: 0; margin: 0 0 1rem; }
.wizard-checkliste li { padding: .55rem 0; border-bottom: 1px solid #f0f0f0; }
.wizard-checkliste label { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.wizard-checkliste input[type=checkbox] { width: 1.1rem; height: 1.1rem; }
.wizard-themen { list-style: none; padding: 0; margin: 0 0 1rem; }
.wizard-themen li { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem;
  background: var(--accent-zart); border: 1px solid var(--border); border-radius: .5rem; margin-bottom: .4rem; }
.wizard-thema-titel { flex: 1; font-weight: 600; }
.wizard-thema-tag { display: inline-block; margin-left: .4rem; padding: .05rem .4rem;
  font-size: .72rem; font-weight: 500; color: var(--text-zart);
  border: 1px solid var(--border); border-radius: .6rem; }
.wizard-themen form { margin: 0; }
.wizard-x { background: none; border: none; color: var(--frist-krit); font-size: 1.3rem; line-height: 1;
  padding: 0 .3rem; cursor: pointer; }
.wizard-x:hover { color: var(--frist-krit); background: none; border: none; }
.wizard-leer { color: var(--text-zart); font-style: italic; margin: 0 0 1rem; }
.wizard-thema-form { border-top: 1px solid var(--border); padding-top: 1rem; }
.wizard-thema-form label { display: block; font-weight: 600; font-size: .85rem;
  color: var(--text-leise); margin: .8rem 0 .3rem; }
.wizard-thema-form input[type=text], .wizard-thema-form textarea { width: 100%;
  box-sizing: border-box; padding: .55rem .6rem; border: 1px solid var(--border-stark);
  border-radius: .45rem; font: inherit; }
.wizard-thema-form textarea { resize: vertical; line-height: 1.5; }
.wizard-thema-add { margin-top: .8rem; }
.wizard-reihenfolge { list-style: none; padding: 0; margin: 0 0 1rem; }
.wizard-rf-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
  border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: .5rem; margin-bottom: .35rem; }
.wizard-rf-item.to-thema { border-left-color: var(--accent); }
.wizard-rf-titel { flex: 1; }
.wizard-rf-item.to-vor .wizard-rf-titel, .wizard-rf-item.to-nach .wizard-rf-titel {
  color: var(--text-zart); font-style: italic; }
.wizard-rf-sort { display: flex; flex-direction: column; line-height: .62; }
.wizard-rf-sort form { margin: 0; }
.wizard-rf-sort button { border: none; background: none; cursor: pointer; color: var(--text-zart);
  font-size: .7rem; padding: 0 .3rem; }
.wizard-rf-sort button:hover { color: var(--accent); background: none; }
.wizard-pdf-aktionen { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.wizard-pdf-aktionen form { margin: 0; }
.wizard-pdf-vorschau { width: 100%; height: 78vh; min-height: 34rem; border: 1px solid var(--border);
  border-radius: .5rem; background: var(--bg-leise); margin: 0; }
.wizard-nav { display: flex; justify-content: space-between; align-items: center;
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); gap: 1rem; }
.wizard-nav-randlos { border-top: none; padding-top: 0; margin-top: 1rem; }
.wizard-zurueck { color: var(--text-zart); text-decoration: none; font-weight: 600; }
.wizard-zurueck:hover { color: var(--accent); }

/* --- Anhörungen / personelle Einzelmaßnahmen (Etappe 19) --------------- */
.anh-kopf { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.anh-kopf h1 { margin: 0; }
.anh-kopf .btn-neu { margin-left: auto; }
.anh-liste { width: 100%; border-collapse: collapse; margin-top: 1rem; }
/* Einheitlicher Tabellen-Look für alle Anhörungs-Reiter (Anhörungen,
   Stellenausschreibungen, Mitarbeiter): sticky grauer Kopf + Zebra-Streifen. */
.anh-liste thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-leise);
  text-align: left; font-size: .78rem; color: var(--text-leise); text-transform: uppercase;
  letter-spacing: .03em; padding: .55rem .7rem; border-bottom: 2px solid #dde2ea; }
.anh-liste tbody td { text-align: left; font-size: .9rem; padding: .5rem .7rem;
  border-bottom: 1px solid #eef0f3; vertical-align: middle; }
.anh-liste tbody tr:nth-child(even) { background: var(--bg-karte); }
/* Breite Tabellen (z. B. Mitarbeiter, 10 Spalten): Spalten an ihren Inhalt
   anpassen (width:auto) statt zu quetschen; bei Überbreite horizontal scrollen. */
.anh-tab-scroll { overflow-x: auto; }
.anh-tab-scroll > .anh-liste { width: auto; min-width: 100%; }
.anh-badge { display: inline-block; padding: .12rem .55rem; border-radius: 1rem; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.anh-zustimmung { background: var(--frist-krit-bg); color: var(--frist-krit); }
.anh-kenntnisnahme { background: var(--frist-ok-bg); color: var(--frist-ok); }
.anh-maske fieldset { margin: 0 0 1.2rem; border: 1px solid var(--border); border-radius: .6rem; padding: .8rem 1rem; }
.anh-maske legend { font-weight: 600; padding: 0 .4rem; }
.anh-maske input[type=text], .anh-maske input[type=number], .anh-maske select, .anh-maske textarea {
  padding: .45rem .55rem; border: 1px solid var(--border-stark); border-radius: .45rem; font: inherit; max-width: 100%; box-sizing: border-box; }
.anh-check { display: flex; align-items: center; gap: .45rem; }
.anh-check-zeile { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.anh-check input { width: auto; }
.anh-cond { background: var(--accent-zart); border-left: 3px solid #c9d3ea; padding: .5rem .7rem; border-radius: .3rem; }
.anh-dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 1rem 0; }
/* „Daten der Anhörung": eine Karte (Design-System-Rahmen wie der Abgleich) mit
   den Angaben tabellarisch — zwei Spalten (Feld | Wert), Zeilen durch Linien
   getrennt. */
.anh-daten-karte { background: var(--bg-karte, var(--bg-karte)); border: 1px solid var(--border, var(--border));
  border-radius: var(--radius, 8px); padding: .2rem .9rem; margin: 1rem 0; }
.anh-daten-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 1.6rem; margin: 0; }
.anh-daten-dl dt, .anh-daten-dl dd { padding: .55rem 0; border-top: 1px solid var(--border, #eceef2); }
.anh-daten-dl > dt:first-of-type, .anh-daten-dl > dd:first-of-type { border-top: none; }
.anh-daten-dl dt { font-weight: 600; color: var(--text-leise); font-size: .9rem; }
.anh-daten-dl dd { margin: 0; color: var(--text); line-height: 1.4; }
.anh-dl dt { font-weight: 600; color: var(--text-leise); }
.anh-dl dd { margin: 0; }
.anh-kind { margin: 1.4rem 0; border-top: 1px solid var(--border); padding-top: .8rem; }
.anh-kind h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.anh-tags { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.anh-tags li { display: flex; align-items: center; gap: .3rem; background: var(--accent-zart); padding: .2rem .6rem; border-radius: 1rem; }
.anh-rows { list-style: none; padding: 0; margin: 0 0 .6rem; }
.anh-rows li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid #f2f2f2; }
.anh-tag-sb { background: var(--frist-warn-bg); color: var(--frist-warn); font-size: .72rem; font-weight: 700; padding: .05rem .4rem; border-radius: .3rem; }
.anh-add { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.anh-add input[type=text], .anh-add input[type=number] { padding: .4rem .55rem; border: 1px solid var(--border-stark); border-radius: .45rem; font: inherit; }
.anh-x { background: none; border: none; color: var(--frist-krit); cursor: pointer; font-size: .9rem; padding: 0 .2rem; }
.anh-fs-rows { margin: .2rem 0 .5rem; }
.anh-fs-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid #f2f2f2; }
.anh-fs-row input[type=text], .anh-fs-row input[type=number] { padding: .4rem .55rem; border: 1px solid var(--border-stark); border-radius: .45rem; font: inherit; }
/* „Entfernen": die Django-DELETE-Checkbox als ✕-Button tarnen; die Zeile wird
   beim Speichern entfernt. Markierte Zeile wird ausgegraut (Klick = rückgängig). */
.anh-del { color: var(--frist-krit); font-size: .85rem; display: inline-flex; align-items: center;
           gap: .3rem; cursor: pointer; user-select: none; border: 1px solid #e3c4c4;
           background: var(--frist-krit-bg); border-radius: .4rem; padding: .12rem .5rem; }
.anh-del:hover { background: var(--frist-krit-bg); }
.anh-del input { display: none; }
.anh-del::before { content: "✕"; font-weight: 700; line-height: 1; }
.anh-fs-row.zu-entfernen { opacity: .5; }
.anh-fs-row.zu-entfernen .anh-del { background: var(--accent-zart); border-color: var(--border); color: var(--accent); }
.anh-fs-row.zu-entfernen .anh-del::before { content: "↺"; }
.anh-fs-add { margin-top: .2rem; }
/* Kopfzeile der Maßnahme: Datum + Beschäftigt bei + Art der Anhörung + Plus-Button
   nebeneinander in EINER Zeile, Felder in natürlicher Breite (nicht voll). */
.anh-kopf-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .35rem .8rem; }
.anh-kopf-zeile .anh-kf { margin: 0; display: flex; flex-direction: column; }
.anh-kopf-zeile .anh-kf br { display: none; }
.anh-kopf-zeile .anh-kf label { margin-bottom: .05rem; font-size: .88rem; }
.anh-kopf-zeile .anh-kf input[type=date] { width: 9.5rem; }
.anh-kopf-zeile .anh-kf select { width: auto; min-width: 8rem; }
/* Einheitliche quadratische Icon-Buttons in den kompakten Reihen: + (hinzufügen) und
   ✕ (entfernen, ob neu oder gespeichert) exakt gleich breit UND hoch -> matched Paar,
   das auf einer Linie sitzt. */
.anh-plus-btn,
.anh-fs-del-neu,
.anh-maske .anh-beschart-row .anh-del,
.anh-maske .anh-kennz-row .anh-del,
.anh-maske .anh-bew-row .anh-del,
.anh-maske .anh-einr-row .anh-del,
.anh-maske .anh-taet-row .anh-del {
  flex: 0 0 auto; width: 1.9rem; min-width: 1.9rem; height: 1.9rem; padding: 0; margin: 0;
  gap: 0; box-sizing: border-box; display: inline-flex; align-items: center;
  justify-content: center; font-size: 1rem; line-height: 1; border-radius: var(--radius-s);
  cursor: pointer; }
/* Weitere „Art der Beschäftigung": die hinzugefügten Felder fließen kompakt INLINE
   in dieselbe Zeile (nicht je eine volle Breite), jeweils mit ✕-Entfernen. */
.anh-kopf-zeile .anh-beschart-rows { display: contents; }
.anh-kopf-zeile .anh-beschart-row { display: inline-flex; align-items: flex-end; gap: .3rem;
  padding: 0; border-bottom: none; }
.anh-kopf-zeile .anh-beschart-row select { width: auto; min-width: 8rem; }
/* Entfernen-Button für neu hinzugefügte (ungespeicherte) Formset-Zeilen. */
.anh-fs-del-neu { background: var(--frist-krit-bg); color: var(--frist-krit); border: 1px solid #e9cccc; }
.anh-fs-del-neu:hover { background: var(--frist-krit-bg); border-color: var(--border); }
/* Buttons feinjustiert (auf Wunsch). */
.anh-kopf-zeile .anh-plus-btn { position: relative; bottom: 1px; }
.anh-einr-zeile .anh-plus-btn { position: relative; bottom: 4px; }
.anh-taet-zeile .anh-kf,
.anh-taet-zeile .anh-plus-btn { position: relative; bottom: 4px; }
.anh-et-zeile #anh-w-bereits { position: relative; top: 7px; }
.anh-kennz-zeile .anh-plus-btn { position: relative; bottom: 5px; }
.anh-kennz-row .anh-del,
.anh-kennz-row .anh-fs-del-neu { position: relative; bottom: 1px; }
/* Kennziffern (eigene Karte): Felder kompakt inline in einer Zeile + „+" rechts. */
.anh-kennz-titel { display: block; font-size: .88rem; margin-bottom: .05rem; }
.anh-kennz-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .35rem .6rem; }
.anh-kennz-zeile .anh-kennz-rows { display: contents; }
.anh-maske .anh-kennz-row { display: inline-flex; align-items: flex-end; gap: .3rem;
  padding: 0; border-bottom: none; }
.anh-maske .anh-kennz-row input[type=text] { width: 9rem; min-width: 0; flex: 0 1 9rem; }
.anh-kennz-link { display: inline-flex; }
/* Einrichtung(en): Feld + ✕ + „+" kompakt in einer Zeile. */
.anh-einr-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .35rem .6rem; }
.anh-einr-zeile .anh-einr-rows { display: contents; }
.anh-maske .anh-einr-row { display: inline-flex; align-items: flex-end; gap: .3rem; padding: 0;
  border-bottom: none; }
.anh-maske .anh-einr-row input[type=text] { width: 11rem; min-width: 0; flex: 0 1 11rem; }
/* Einsatztag: Datum + freies Zeit-Feld nebeneinander in einer Zeile. */
.anh-maske .anh-einsatz-row { display: inline-flex; align-items: center; gap: .4rem; padding: 0;
  border-bottom: none; }
.anh-einsatz-row .anh-einsatz-std { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.anh-einsatz-row .anh-einsatz-std input[type=text] { width: 11rem; }
/* Einrichtung + Tätigkeit + „war bereits tätig" zusammen in einer Zeile. */
.anh-maske fieldset > .anh-et-zeile { grid-column: 1 / -1; }
.anh-et-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.4rem; }
.anh-et-zeile > .anh-fs { margin: 0; }
/* Das erste Feld eines Formsets ist die Pflichtangabe -> kein ✕ zum Entfernen. */
.anh-kennz-rows .anh-kennz-row:first-child .anh-del,
.anh-kennz-rows .anh-kennz-row:first-child .anh-fs-del-neu,
.anh-einr-rows .anh-einr-row:first-child .anh-del,
.anh-einr-rows .anh-einr-row:first-child .anh-fs-del-neu { display: none; }
/* Erste Arbeitszeit-Zeile ist die Grundangabe -> nicht entfernbar; erst die
   zweite (und weitere) bekommt das ✕. */
.anh-fs[data-prefix="arbeitszeit"] .anh-fs-rows > .anh-fs-row:first-child .anh-del,
.anh-fs[data-prefix="arbeitszeit"] .anh-fs-rows > .anh-fs-row:first-child .anh-fs-del-neu { display: none; }
/* Tätigkeit: Feld („als …") + weitere Tätigkeiten + „+" in einer Zeile. */
.anh-taet-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .35rem .8rem; }
.anh-taet-zeile .anh-kf { margin: 0; display: flex; flex-direction: column; }
.anh-taet-zeile .anh-kf br { display: none; }
.anh-taet-zeile .anh-kf label { margin-bottom: .05rem; font-size: .88rem; }
.anh-taet-zeile .anh-kf input[type=text] { width: 14rem; min-width: 0; }
.anh-taet-zeile .anh-taet-rows { display: contents; }
.anh-maske .anh-taet-row { display: inline-flex; align-items: flex-end; gap: .3rem; padding: 0;
  border-bottom: none; }
.anh-maske .anh-taet-row input[type=text] { width: 12rem; min-width: 0; flex: 0 1 12rem; }
/* Bewerbungslage: Checkboxen + „+" + Bewerber-Zeilen kompakt in EINER Zeile. */
.anh-bew-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; }
.anh-bew-zeile .anh-bew-rows { display: contents; }
.anh-maske .anh-bew-row { display: inline-flex; align-items: center; gap: .4rem; padding: 0;
  border-bottom: none; }
.anh-maske .anh-bew-row input[type=text] { width: auto; min-width: 9rem; }
.anh-speichern { margin-top: 1rem; padding: .6rem 1.4rem; font-size: 1rem; }
.anh-fs-kennziffer { margin-top: .6rem; }
.anh-fs-label { display: block; font-weight: 600; margin-bottom: .2rem; }
.anh-row { cursor: pointer; }
/* Besetzungsstand als Fläche: zart rosa = voll, kräftiger = überbesetzt,
   hell orange = teilweise besetzt. Bewusst auf der Zeile statt auf den Zellen,
   damit der Hover sie überdecken kann statt sich mit ihr zu beissen. Die Farbe
   ist Zusatzinformation, die Spalte sagt „voll besetzt" / „… zu viel" /
   „… offen" weiterhin im Klartext.
   Die Selektoren sind absichtlich so lang: der Zebra-Streifen
   (.anh-liste tbody tr:nth-child(even)) ist spezifischer als eine blosse Klasse
   und hat die Farbe sonst auf jeder zweiten Zeile wieder uebermalt. */
.anh-liste tbody tr.anh-voll { background: var(--voll-bg); }
.anh-liste tbody tr.anh-zuviel { background: var(--zuviel-bg); }
.anh-liste tbody tr.anh-teil { background: var(--teil-bg); }
/* Muss den Zebra-Streifen UND die Besetzungsfarben schlagen — sonst gibt es auf
   genau den eingefaerbten Zeilen keine Hover-Rueckmeldung mehr. */
.anh-liste tbody tr.anh-row:hover { background: var(--accent-zart); }
.anh-protokoll { margin-top: 1.6rem; border-top: 2px solid #e2e2e2; padding-top: 1rem; }
.anh-protokoll h2 { font-size: 1.1rem; margin: 0 0 .2rem; }
.anh-prot-text { width: 100%; box-sizing: border-box; padding: .7rem .8rem; border: 1px solid var(--border-stark); border-radius: .5rem; font: inherit; line-height: 1.5; background: var(--bg-karte); }
.anh-prot-text p { margin: 0 0 .7rem; }
.anh-prot-text p:last-child { margin-bottom: 0; }
.anh-prot-titel { margin-bottom: .5rem; }
/* Arbeitszeit-Aufzählung: echte Bullets mit hängendem Einzug (Folgezeilen
   richten sich am Text aus, nicht am Bullet). */
.anh-prot-ul { margin: -.4rem 0 .7rem; padding-left: 1.4rem; list-style: disc; }
.anh-prot-ul li { margin: .12rem 0; padding-left: .2rem; }
.anh-copy { margin-top: .6rem; }
.anh-grund { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; }
.anh-eg-feld { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; }
/* „Vergütung erfolgt nach" + Entgeltgruppe/Fallgruppe/Stufe alle in EINER Zeile.
   Jede Gruppe kompakt als Spalte (Label über Feld); die bedingten Felder fließen
   per display:contents in dieselbe Flex-Zeile. Tabellenentgelt/Tarif darunter. */
.anh-verg-zeile { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .3rem 1.2rem; }
.anh-verg-zeile .anh-eg-feld { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem; margin: 0; }
.anh-verg-zeile .anh-eg-feld label { font-size: .85rem; color: var(--text-leise); }
.anh-verg-zeile .anh-eg-feld select { width: auto; min-width: 5rem; }
#anh-w-eg { display: contents; }
#anh-w-eg > .anh-gehalt,
#anh-w-eg > .anh-tarif,
#anh-w-eg > ul.errorlist { flex-basis: 100%; }
.anh-tarif { margin-top: .5rem; padding: .6rem .8rem; background: var(--accent-zart); border-left: 3px solid #c9d3ea; border-radius: .4rem; font-size: .92rem; line-height: 1.45; color: var(--text); }
.anh-tarif:empty { display: none; }
/* Prüf-/Entscheidungs-Bereich unten: saubere Karte, Status als Chips, neutrale
   Zurücksetzen-Aktion und ein klar abgesetzter Lösch-Bereich (Gefahrenzone). */
/* Etappe 27: Panel „unterschriebener Rückläufer erkannt". */
.anh-sig-panel { margin: 0 0 1.2rem; padding: .9rem 1.1rem; border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--accent-zart); }
.anh-sig-titel { margin: 0 0 .2rem; font-size: 1.05rem; }
.anh-sig-liste { list-style: none; margin: .5rem 0 .2rem; padding: 0; display: flex;
  flex-wrap: wrap; gap: .3rem 1.4rem; font-size: .95rem; }
.anh-sig-ja { color: var(--frist-ok); font-weight: 600; }
.anh-sig-nein { color: var(--frist-krit); font-weight: 600; }
.anh-sig-warn { color: var(--frist-warn); font-weight: 600; }
.anh-sig-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .7rem; }
.anh-sig-aktionen form { margin: 0; }
.anh-sig-unbestaetigt { color: var(--text-zart); opacity: .4; filter: grayscale(1); text-decoration: none; }
a.anh-sig-unbestaetigt:hover { opacity: .7; }
.anh-sig-zuordnen { border-left-color: var(--frist-warn); }
.anh-sig-zuordnen-form { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .7rem 0 0; }
.anh-sig-zuordnen-form select { min-width: min(28rem, 100%); padding: .4rem .5rem; }
.anh-pruef { margin-top: 1.6rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-karte); box-shadow: var(--schatten); }
.anh-geprueft { width: fit-content; color: var(--frist-ok); font-weight: 600; margin: 0 0 .45rem; background: var(--frist-ok-bg); border: 1px solid var(--border); border-radius: 999px; padding: .25rem .8rem; }
.anh-verweigert { width: fit-content; color: var(--frist-krit); font-weight: 600; margin: 0 0 .45rem; background: var(--frist-krit-bg); border: 1px solid var(--border); border-radius: 999px; padding: .25rem .8rem; }
.anh-ungeprueft { color: var(--frist-warn); margin: 0 0 .6rem; }
/* Status-Chips (zugestimmt/verweigert) nebeneinander in einer Zeile. */
.anh-status-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; margin-bottom: .65rem; }
.anh-status-zeile .anh-geprueft, .anh-status-zeile .anh-verweigert { margin: 0; }
.anh-status-zeile .anh-verweigert-grund { flex-basis: 100%; margin: 0; }
.anh-verweigert-grund { margin: 0 0 .5rem; font-size: .95rem; line-height: 1.45; }
.anh-pruef > .hinweis { color: var(--text-zart); font-size: .88rem; margin: .5rem 0 .85rem; }
.anh-pruef-btn { background: var(--accent); color: #fff; }
.anh-pruef-reset { font: inherit; background: var(--bg); border: 1px solid var(--border-stark); color: var(--text); padding: .4rem .9rem; border-radius: var(--radius-s); cursor: pointer; }
.anh-pruef-reset:hover { border-color: var(--accent); background: var(--bg); }
.anh-pruef-aktionen { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.anh-pruef-aktionen form { margin: 0; }
.anh-verweigern-btn { font: inherit; font-weight: 600; background: var(--frist-krit); color: #fff;
  border: 1px solid var(--frist-krit); border-radius: var(--radius-s); padding: .4rem .9rem; cursor: pointer; }
.anh-verweigern-btn:hover { background: var(--frist-krit-stark); }
/* „Außerhalb des Systems beschlossen" — abgesetzter Info-Block. */
.anh-extern { margin-top: .9rem; padding: .7rem .9rem; background: var(--accent-zart);
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-s); }
.anh-extern-status { margin: 0 0 .55rem; font-size: .95rem; }
.anh-extern > form { margin: 0; }
/* Lösch-Bereich klar abgesetzt. */
.anh-loeschen { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.anh-loeschen > summary { cursor: pointer; color: var(--frist-krit); font-weight: 600; font-size: .92rem; }
.anh-loeschen .hinweis { margin: .55rem 0 .75rem; }
.anh-del-btn { font: inherit; font-weight: 600; background: var(--frist-krit); color: #fff;
  border: 1px solid var(--frist-krit); border-radius: var(--radius-s); padding: .45rem 1rem; cursor: pointer; }
.anh-del-btn:hover { background: var(--frist-krit-stark); border-color: var(--frist-krit); }
.anh-verweigern-dlg { border: none; border-radius: .7rem; padding: 1.2rem 1.3rem; max-width: 32rem; width: 92%; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.anh-verweigern-dlg::backdrop { background: rgba(0,0,0,.35); }
.anh-verweigern-dlg h3 { margin: 0 0 .3rem; }
.anh-verweigern-dlg label { display: block; font-weight: 600; font-size: .9rem; margin: .7rem 0 .25rem; }
.anh-verweigern-dlg select,
.anh-verweigern-dlg textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .5rem; border: 1px solid var(--border-stark); border-radius: .4rem; }
.anh-dlg-aktionen { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .9rem; }
.anh-aspekt-block { border: 1px solid var(--border); border-radius: .5rem; padding: .5rem .8rem .7rem; margin: .6rem 0; }
.anh-aspekt-block legend { font-weight: 600; padding: 0 .4rem; }
.anh-radio { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1.2rem; font-weight: 500; }
.anh-aspekt-grund { display: block; margin-top: .55rem; font-size: .9rem; font-weight: 600; }
.anh-aspekt-grund select, .anh-aspekt-grund textarea { display: block; width: 100%; box-sizing: border-box;
  margin-top: .2rem; font: inherit; font-weight: 400; padding: .4rem; border: 1px solid var(--border-stark); border-radius: .4rem; }
.anh-tag-gepr { color: var(--frist-ok); font-weight: 600; white-space: nowrap; }
.anh-tag-ungepr { color: var(--frist-warn); white-space: nowrap; }
.anh-ausschr .anh-rows li { gap: .8rem; flex-wrap: wrap; }
.anh-ausschr .anh-kz { font-weight: 600; min-width: 7rem; }
.anh-upl { display: inline-flex; align-items: center; gap: .4rem; }
.anh-ausschr-upl { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--text-leise); }
.anh-ausschr-link { font-size: .9rem; }
.anh-entsch { margin-top: .6rem; }
.anh-entsch select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--border-stark); border-radius: .45rem; margin-left: .4rem; }
.anh-loeschen-form { margin-top: 1.5rem; }
.anh-abrufen-form { margin-bottom: .6rem; }
.anh-ocr-form { margin: .6rem 0 1rem; }
/* .anh-ocr-out: nur noch der Mail-Text ohne PDF (Anhörung) — dort ist der Text
   die einzige Quelle. Wo ein Original-PDF existiert, wird gegen das geprüft. */
.anh-ocr-out { white-space: pre-wrap; word-wrap: break-word; background: var(--bg-karte); border: 1px solid var(--border); border-radius: .5rem; padding: .8rem 1rem; max-height: 28rem; overflow: auto; font-size: .9rem; line-height: 1.45; font-family: inherit; }
.anh-erkannt { margin: .8rem 0 .2rem; }
.anh-erkannt-form .anh-feld { margin: 0 0 .7rem; }
.anh-erkannt-form input[type=text], .anh-erkannt-form input[type=date], .anh-erkannt-form input[type=number], .anh-erkannt-form textarea, .anh-erkannt-form select { width: 100%; max-width: 32rem; box-sizing: border-box; padding: .45rem .55rem; border: 1px solid var(--border-stark); border-radius: .45rem; font: inherit; }
.anh-tag-fehler { color: var(--frist-krit); font-weight: 600; white-space: nowrap; }
.anh-verarb-banner { background: var(--frist-warn-bg); border: 1px solid var(--border); border-radius: .5rem; padding: .55rem .8rem; margin: .6rem 0; font-weight: 600; color: var(--frist-warn); }
.anh-vorlage { margin: .6rem 0 1.2rem; padding: .8rem 1rem; background: var(--accent-zart); border: 1px solid var(--border); border-radius: .6rem; }
/* „Anhörung öffnen"-Button vor dem Hinweistext, in einer Zeile. */
.anh-vorlage-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.anh-vorlage-zeile > p { margin: 0; }
/* Block „Unterschriebene Anhörung" in der Maske: Status + Aktionen in einer Zeile. */
.anh-maske fieldset > .anh-unt-box { grid-column: 1 / -1; }
.anh-unt-box { display: flex; flex-direction: column; gap: .55rem; }
.anh-unt-status { margin: 0; color: var(--frist-ok); font-weight: 600; }
.anh-unt-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; }
.anh-unt-box .hinweis { margin: 0; }
.anh-row-entwurf td { background: var(--bg-karte); }
.anh-entwurf-tag { color: var(--frist-warn); font-weight: 600; font-style: italic; }
.anh-vorlage-text summary { cursor: pointer; font-weight: 600; }
.anh-vorlage-text[open] summary { margin-bottom: .5rem; }
.anh-liste th a.anh-sort { color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.anh-liste th a.anh-sort:hover { text-decoration: underline; }
/* Sortier-Indikatoren: aktive Spalte betont, inaktive zeigt blasses ↕ als Klick-Hinweis. */
.anh-liste th a.anh-sort .anh-sort-a { color: var(--accent); }
.anh-liste th a.anh-sort .anh-sort-i { opacity: .3; font-size: .85em; }
.anh-liste th a.anh-sort:hover .anh-sort-i { opacity: .6; }

/* --- Stellenausschreibungen: Toolbar + aufgeraeumte Liste --------------- */
.anh-anzahl { font-size: 1rem; color: var(--text-zart); font-weight: normal; }
.anh-toolbar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: .8rem 0 .4rem; }
.anh-suche { flex: 1 1 20rem; padding: .6rem .85rem; border: 1px solid #b9c0cc; border-radius: .6rem; font: inherit; }
.anh-suche:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43,108,176,.15); }
.anh-toolbar-rechts { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.anh-toolbar-rechts form { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.btn-sek { font: inherit; background: var(--accent-zart); border: 1px solid var(--border); color: var(--text); padding: .5rem .85rem; border-radius: .5rem; cursor: pointer; white-space: nowrap; }
.btn-sek:hover { background: var(--bg-leise); }
.anh-upload input[type=file] { font-size: .85rem; max-width: 14rem; }
/* Tabellen-Look jetzt in der Basis .anh-liste (s. o.) — hier nur noch die
   Spalten-Hilfsklasse der Stellenausschreibungen. */
.anh-col-num { white-space: nowrap; }
.anh-mail { color: var(--accent); }
.anh-file-label { cursor: pointer; display: inline-flex; align-items: center; }
.anh-file-info { font-size: .85rem; color: var(--text-leise); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anh-col-status { text-align: center; white-space: nowrap; }

/* Abgleich Anhörung ↔ Stellenausschreibung (vergebene vs. ausgeschriebene Std.) */
.anh-abgleich { border: 1px solid var(--border); border-left-width: 4px; border-left-color: var(--border); border-radius: 6px; padding: .7rem .9rem; margin-bottom: .7rem; background: var(--bg-karte); }
.anh-abgleich-ok { border-left-color: var(--frist-ok); }
.anh-abgleich-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; justify-content: space-between; margin-bottom: .5rem; }
.anh-abgleich-tag { font-weight: 600; font-size: .9rem; }
.anh-abgleich-tag.ok { color: var(--frist-ok); }
/* Abgleich-Tabelle: Spalten Ausschreibung vs. Anhörung klar getrennt. */
.anh-abgleich-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.anh-abgleich-tab th, .anh-abgleich-tab td { border: none; border-bottom: 1px solid #eceef2; padding: .35rem .5rem; text-align: left; vertical-align: top; }
.anh-abgleich-tab thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-zart); border-bottom: 2px solid #dde2ea; }
.anh-abgleich-tab tbody tr:last-child td { border-bottom: none; }
.anh-abgleich-tab td:nth-child(3) { color: var(--text-leise); }
.anh-abgleich-tab td:nth-child(4) { color: var(--text); }
.anh-abgleich-tab tr.ist-gruen { background: var(--frist-ok-bg); }
.anh-ab-h { width: 1.3rem; text-align: center; color: var(--text-zart); font-weight: 700; }
tr.ist-gruen .anh-ab-h { color: var(--frist-ok); }
.anh-ab-feld { font-weight: 600; white-space: nowrap; }
.anh-ab-akt { width: 2rem; text-align: center; }
.anh-ab-akt form { margin: 0; }
.anh-ab-akt button { padding: .1rem .45rem; font-size: .9rem; line-height: 1.1; border: 1px solid #ccd; border-radius: 4px; background: var(--bg-karte); color: var(--text); font-weight: 400; }
.anh-haken-setzen { color: var(--frist-ok); }
.anh-haken-zurueck { color: var(--frist-krit); }
.anh-gelernt { font-size: .72rem; font-weight: 600; color: var(--frist-ok); text-transform: uppercase;
  letter-spacing: .03em; margin-right: .35rem; vertical-align: middle; white-space: nowrap; }
.anh-ab-akt button.anh-gelernt-x { padding: 0; margin-left: .25rem; border: none; background: none;
  font: inherit; line-height: 1; color: var(--frist-krit); cursor: pointer; vertical-align: baseline; }

/* Reiter auf der Anhörungs-Detailseite (Anhörung / Prüfung / Protokoll). */
.anh-tab-leiste { display: flex; flex-wrap: wrap; gap: .2rem; border-bottom: 2px solid #e3e6ec; margin: 1.2rem 0 1.3rem; }
.anh-tab-btn { background: none; border: none; border-bottom: 3px solid transparent; padding: .55rem 1rem; font-size: .95rem; font-weight: 600; color: var(--text-leise); margin-bottom: -2px; border-radius: 0; }
.anh-tab-btn:hover { color: var(--accent); }
.anh-tab-btn.aktiv { color: var(--accent); border-bottom-color: var(--accent); }
.anh-tab-panel[hidden] { display: none; }

/* Kompaktere Anhörungs-Maske: kurze Felder in ein responsives Raster, lange
   bzw. Formset-Blöcke über die volle Breite. */
.anh-maske { max-width: none; }
.anh-maske fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .12rem .9rem; align-items: start; padding: .5rem 1rem .65rem; margin: 0 0 .7rem; background: var(--bg-leise); border-color: var(--border); }
/* „Maßnahme" + „Kennziffern" nebeneinander; bei zu wenig Platz untereinander. */
/* stretch: nebeneinander gleich hoch; umgebrochen (eigene Zeile) wieder natürlich hoch. */
.anh-karten-zeile { display: flex; flex-wrap: wrap; gap: .7rem .9rem; align-items: stretch; margin: 0 0 .7rem; }
.anh-karten-zeile > fieldset { flex: 1 1 18rem; min-width: 0; margin: 0; }  /* dynamisch gleich breit */
.anh-file-feld { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.anh-maske fieldset > legend { grid-column: 1 / -1; }
.anh-maske fieldset > .anh-fs,
.anh-maske fieldset > .anh-cond,
.anh-maske fieldset > .hinweis,
.anh-maske fieldset > .anh-check,
.anh-maske fieldset > .anh-check-zeile,
.anh-maske fieldset > .anh-ausschr-upl,
.anh-maske fieldset > .anh-file-feld,
.anh-maske fieldset > .anh-entsch,
.anh-maske fieldset > .anh-breit,
.anh-maske fieldset > datalist { grid-column: 1 / -1; }
.anh-maske fieldset > p { margin: .1rem 0; display: flex; flex-direction: column; }
/* In der Spalten-Anordnung ist das <br> zwischen Label und Feld überflüssig und
   erzeugt nur eine Leerzeile. */
.anh-maske fieldset > p br { display: none; }
.anh-maske fieldset > p label { margin-bottom: .05rem; font-size: .88rem; }
.anh-maske fieldset > p input[type=text],
.anh-maske fieldset > p input[type=number],
.anh-maske fieldset > p input[type=date],
.anh-maske fieldset > p select { width: 100%; max-width: none; box-sizing: border-box; }
.anh-maske .anh-fs { margin-top: .3rem; }

/* Schlankere Eingabefelder in der Anhörungs-Maske (geringere Höhe). */
.anh-maske input[type=text], .anh-maske input[type=number], .anh-maske input[type=date],
.anh-maske select, .anh-maske textarea,
.anh-maske .anh-fs-row input[type=text], .anh-maske .anh-fs-row input[type=number] {
  padding-top: .25rem; padding-bottom: .25rem; line-height: 1.3; }
.anh-maske .anh-fs-row { padding: .25rem 0; }

/* Checkbox-Zeilen in der Maske bleiben einzeilig: Haken vor dem Text, links. */
.anh-maske fieldset > p.anh-check { flex-direction: row; align-items: center; justify-content: flex-start; }

/* „Stellenausschreibung öffnen"-Button in der Kennziffer-Zeile (öffnet inline). */
.anh-ausschr-btn { text-decoration: none; font-size: .85rem; padding: .3rem .65rem; }

/* Stunden-Feld der Arbeitszeit-Zeile schmal halten, damit „Std./Woche" und
   „befristet" rechts daneben bleiben (statt umzubrechen). */
.anh-maske .anh-fs-row input[id$="-stunden"] { width: 4.5rem; flex: 0 0 auto; }

/* Arbeitszeit-Zeile zweizeilig: oben Stunden/„befristet", darunter die Details. */
.anh-az-haupt { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; }
.anh-az-detail { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .3rem; }
.anh-zus { font-size: .78rem; }
.anh-prot-plain { position: absolute; left: -9999px; width: 1px; height: 1px; }
.anh-gehalt { margin-top: .5rem; font-weight: 600; color: var(--frist-ok); }
.anh-gehalt:empty { display: none; }

/* „+ Arbeitszeit" wird per JS in die Detail-Zeile der letzten Arbeitszeit
   einsortiert, damit der Button direkt neben „Bemerkung" steht (nicht rechtsbündig
   am breitesten Eintrag). */
.anh-az-detail > .anh-fs-add { margin: 0; align-self: flex-end; position: relative; bottom: 1px; }

/* Arbeitszeit-Zeilen klar voneinander abgrenzen (je Zeile mehrere Felder). */
.anh-fs[data-prefix="arbeitszeit"] .anh-fs-row { display: block; padding: 1.3rem 0; border-bottom: 1px solid #d3d8e0; }
.anh-fs[data-prefix="arbeitszeit"] .anh-fs-row:first-child { padding-top: .2rem; }
.anh-fs[data-prefix="arbeitszeit"] .anh-fs-row:last-child { border-bottom: none; padding-bottom: .2rem; }

/* Einheitliche (schlanke) Feldhöhe in der Maske – Text, Zahl, Datum, Dropdown
   gleich hoch (textarea ausgenommen). */
.anh-maske input[type=text], .anh-maske input[type=number], .anh-maske input[type=date],
.anh-maske input[type=password], .anh-maske select,
.anh-maske .anh-fs-row input[type=text], .anh-maske .anh-fs-row input[type=number] {
  height: 2.1rem; padding-top: 0; padding-bottom: 0; line-height: normal; box-sizing: border-box; }
/* Befristungs-Felder (Grund/Sonstiger Grund/befristet bis) nur bei gesetztem
   „befristet"-Haken — Standard versteckt, JS zeigt sie mit display:contents. */
.anh-bef-felder { display: none; }
/* „Sonstiger Grund": eigene volle Zeile mit breitem Feld (sauberer Umbruch). */
.anh-grund-sonstige { display: none; flex-basis: 100%; align-items: center; }
.anh-grund-sonstige input[type=text] { flex: 1 1 auto; min-width: 12rem; max-width: 30rem; }
.anh-frist-ab { color: var(--frist-krit); font-weight: 600; white-space: nowrap; }
.anh-frist-warn { color: var(--frist-warn); font-weight: 600; white-space: nowrap; }
.anh-frist-ok { color: var(--text-leise); white-space: nowrap; }
.anh-frist-erledigt { color: var(--text-zart); white-space: nowrap; }
.anh-frist-fingiert { color: var(--accent); font-weight: 600; white-space: nowrap; }
.anh-frist-kenntnis { color: var(--text-leise); white-space: nowrap; font-style: italic; }
.anh-frist-gehemmt { color: var(--frist-warn); font-weight: 600; white-space: nowrap; font-style: italic; }
.anh-unterricht-warn { border-left: 3px solid var(--frist-warn); background: var(--bg-leise);
  padding: .6rem .8rem; border-radius: 0 .3rem .3rem 0; margin: .2rem 0 .6rem; }
.anh-unterricht-warn p { margin: 0 0 .3rem; }
.anh-unterricht-warn p:last-child { margin-bottom: 0; }
.anh-unterricht-ok { color: var(--frist-ok, #0a7d3c); font-weight: 600; margin: .2rem 0 .5rem; }
.anh-unterricht-aktionen { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.anh-unterricht-check { display: flex; gap: .45rem; align-items: center; font-size: .95rem; color: var(--text); cursor: pointer; }
.anh-unterricht-nachblock { width: 100%; border-left: 3px solid var(--border); padding-left: .8rem; box-sizing: border-box; }
.anh-unterricht-ruege label { display: block; font-size: .85rem; color: var(--text-zart); }
.anh-verlauf { list-style: none; margin: .8rem 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.anh-verlauf-item { border: 1px solid var(--border); border-radius: var(--radius-s); padding: .6rem .8rem; }
.anh-verlauf-br { border-left: 3px solid var(--frist-warn); }
.anh-verlauf-ag { border-left: 3px solid var(--accent); }
.anh-verlauf-kopf { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; color: var(--text-zart); margin-bottom: .25rem; }
.anh-verlauf-rolle { font-weight: 600; color: var(--text); }
.anh-verlauf-text { white-space: pre-line; }
.anh-verlauf-nachweis { margin: .35rem 0 0; font-size: .9rem; }
.anh-verlauf-nachweis a { text-decoration: none; }
.anh-verlauf-row > td { background: var(--bg-leise); padding: .4rem .8rem; }
.anh-verlauf-ma > summary { cursor: pointer; font-size: .88rem; color: var(--accent); }
.anh-verlauf-ma .anh-verlauf { margin-top: .5rem; }
/* Befristungsgrund als kompakte Zweitzeile unter „Wirksam bis" (Beschäftigten-Historie). */
.anh-bis-grund { display: block; margin-top: .1rem; font-size: .78rem; color: var(--text-leise); line-height: 1.25; }
/* Stufenaufstieg aus der Einstellung abgeleitet: dezenter Marker + Fußnote. */
.anh-aufstieg-abgeleitet { color: var(--accent); cursor: help; font-weight: 700; margin-left: .05rem; }
.anh-fussnote { margin: .5rem 0 0; font-size: .78rem; color: var(--text-leise); }
/* Aufklappbare „Alle Angaben"-Zeile – gleiche Optik wie die übrigen Aufklapp-Zeilen. */
.anh-alle-angaben > summary { cursor: pointer; font-size: .88rem; color: var(--accent); list-style: none; }
.anh-alle-angaben > summary::-webkit-details-marker { display: none; }
.anh-alle-angaben > summary::before { content: "▸ "; color: var(--text-zart); }
.anh-alle-angaben[open] > summary::before { content: "▾ "; }
.anh-alle-angaben .anh-daten-dl { margin-top: .5rem; }
.anh-verlauf-edit { margin-top: .4rem; }
.anh-verlauf-edit summary { font-size: .82rem; color: var(--accent); cursor: pointer; }
.anh-verlauf-edit .anh-unterricht-ruege { margin-top: .5rem; }
.anh-verlauf-del { margin-top: .4rem; }
.anh-unterricht-ruege { width: 100%; }
.anh-unterricht-datum { margin-bottom: .6rem; }
.anh-unterricht-datum input { display: block; }
.anh-unterricht-ruege textarea { width: 100%; box-sizing: border-box; }
.anh-ma-pdf { white-space: nowrap; }
.anh-ueber { color: var(--text-zart); font-size: .85em; cursor: help; }
.anh-ma-pdf a { text-decoration: none; margin-right: .25rem; font-size: 1.05rem; }

/* Aufgaben / Wiedervorlage (B2) */
.aufg-neu { margin: 1rem 0; border: 1px solid var(--border); border-radius: var(--radius-s); padding: .5rem 1rem 1rem; }
.aufg-neu-titel { cursor: pointer; font-weight: 600; color: var(--accent); }
.aufg-formular { max-width: 30rem; margin-top: .4rem; }
.formular .feld { margin: .9rem 0; }
.aufg-h2 { margin: 1.2rem 0 .5rem; }

/* Benutzerhandbuch (L3) */
.hb-layout { display: grid; grid-template-columns: 15rem 1fr; gap: var(--sp-5); align-items: start; margin-top: var(--sp-4); }
.hb-toc { position: sticky; top: 1rem; background: var(--bg-karte); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); font-size: .9rem; }
.hb-toc ol { margin: .4rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.hb-toc a { text-decoration: none; color: var(--text); }
.hb-toc a:hover { color: var(--accent); }
.hb-inhalt section { margin-bottom: var(--sp-5); scroll-margin-top: 1rem; }
.hb-inhalt h2 { font-size: 1.15rem; margin: 0 0 .5rem; padding-bottom: .3rem; border-bottom: 1px solid var(--border); }
.hb-inhalt p { line-height: 1.6; }
.hb-inhalt h3 { font-size: 1rem; margin: 1.1rem 0 .35rem; }
.hb-inhalt ol, .hb-inhalt ul { line-height: 1.6; margin: .3rem 0 .7rem; padding-left: 1.4rem; }
.hb-inhalt li { margin-bottom: .25rem; }
@media (max-width: 800px) { .hb-layout { grid-template-columns: 1fr; } .hb-toc { position: static; } }

/* Statistik-Dashboard (B3) — KPI-Kacheln + Detail-Karten mit Balken */
.stat-datenschutz { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 1.2rem;
  font-size: .85rem; color: var(--text-leise); background: var(--bg-leise);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); padding: .6rem .8rem; }
.stat-datenschutz svg { flex-shrink: 0; color: var(--accent); }

.kpi-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-5); }
.kpi { background: var(--bg-karte); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: var(--sp-4) var(--sp-3); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.kpi-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-zart);
  color: var(--accent); margin-bottom: .35rem; }
.kpi-zahl { font-size: 2.1rem; font-weight: 700; color: var(--text); line-height: 1; }
.kpi-label { font-size: .8rem; color: var(--text-zart); }
.kpi-sub { display: block; font-size: .72rem; color: var(--text-zart); margin-top: .1rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--sp-4); }
.stat-karte { display: flex; flex-direction: column; }
.stat-unter { margin: .3rem 0 .2rem; font-size: .82rem; color: var(--text-zart); }
.stat-split { margin: 0 0 .4rem; font-size: .78rem; color: var(--text-zart); font-weight: 600; }

.stat-quote { display: flex; align-items: center; gap: .6rem; margin: .2rem 0; }
.stat-progress { flex: 1; height: .7rem; background: var(--bg-leise); border-radius: 1rem; overflow: hidden; }
.stat-progress-fill { display: block; height: 100%; width: 0; background: var(--accent);
  border-radius: 1rem; transition: width .5s ease; }
.stat-quote-val { font-weight: 700; font-size: .95rem; white-space: nowrap; }

.stat-chart { display: flex; flex-direction: column; gap: .3rem; margin-top: .4rem; }
.stat-bar-row { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.stat-bar-label { width: 2.8rem; color: var(--text-zart); flex-shrink: 0; }
.stat-bar-label-w { width: 8.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-bar { flex: 1; height: .55rem; background: var(--bg-leise); border-radius: 1rem; overflow: hidden; }
.stat-bar-fill { display: block; height: 100%; width: 0; background: var(--accent);
  border-radius: 1rem; transition: width .5s ease; }
.stat-bar-val { width: 2rem; text-align: right; font-weight: 600; flex-shrink: 0; }

.stat-legende { list-style: none; padding: 0; margin: .3rem 0; display: flex; flex-direction: column; gap: .4rem; }
.stat-legende li { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .9rem; }
/* Ergebnis-Badges (zugestimmt/verweigert) in eine eigene Zeile UNTER das Label. */
.stat-mini-row { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4rem; padding-left: 1.2rem; }
.stat-dot { width: .7rem; height: .7rem; border-radius: 50%; flex-shrink: 0; }
.stat-dot-accent { background: var(--accent); }
.stat-dot-ok { background: var(--frist-ok); }
.stat-dot-neutral { background: var(--border-stark); }
.stat-mini-badge { font-size: .75rem; background: var(--frist-ok-bg); color: var(--frist-ok);
  border-radius: 1rem; padding: .05rem .5rem; font-weight: 600; }
.stat-mini-krit { background: var(--frist-krit-bg); color: var(--frist-krit); }

.stat-zwei { display: flex; gap: 1.4rem; margin: .3rem 0 .2rem; }
.stat-zwei > div { display: flex; flex-direction: column; }
.stat-gross { font-size: 1.7rem; font-weight: 700; color: var(--accent); line-height: 1; }
.stat-gross-label { font-size: .76rem; color: var(--text-zart); margin-top: .15rem; }
.ds-audit-karte { margin-bottom: var(--sp-4); }

/* Anlage 5 #4: Pflichtfeld-Markierung */
.pflicht-stern { color: var(--frist-krit); font-weight: 700; margin-left: .1em; }
/* Anlage 5 #15: Kontexthilfe-Link */
.seite-kopf { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.hilfe-link { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600;
  color: var(--text-zart); text-decoration: none; vertical-align: middle; }
.hilfe-link:hover { color: var(--accent); }
.hilfe-link svg { flex-shrink: 0; }
/* Anlage 5 #27: sortierbare Tabellen-Spaltenköpfe */
th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sort:hover { color: var(--accent); }
th.th-sort::after { content: " ⇅"; opacity: .35; font-size: .85em; }
th.th-sort[data-dir="asc"]::after { content: " ↑"; opacity: 1; }
th.th-sort[data-dir="desc"]::after { content: " ↓"; opacity: 1; }
.aufg-liste { list-style: none; padding: 0; margin: 0; }
.aufg-item { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start;
  padding: .6rem .8rem; border: 1px solid var(--border); border-radius: .5rem; margin-bottom: .5rem; }
.aufg-item.aufg-ueberfaellig { border-left: 3px solid var(--frist-krit); }
.aufg-item-erledigt { opacity: .65; }
.aufg-titel { margin: 0; font-weight: 600; }
.aufg-beschr { margin: .2rem 0 0; font-size: .9rem; }
.aufg-meta { margin: .25rem 0 0; font-size: .82rem; color: var(--text-zart); }
.aufg-ergebnis { margin: .35rem 0 0; padding: .35rem .55rem; font-size: .88rem;
  border-left: 3px solid var(--accent); background: var(--bg-leise);
  border-radius: 0 .3rem .3rem 0; }
.aufg-ergebnis-l { font-weight: 600; color: var(--text-zart); }
.aufg-ergebnis-t :first-child { margin-top: 0; }
.aufg-ergebnis-t :last-child { margin-bottom: 0; }
.aufg-akt { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; }
.aufg-del-form { display: inline; }
.aufg-frist-ab { color: var(--frist-krit); font-weight: 600; }
.aufg-frist-warn { color: var(--frist-warn); font-weight: 600; }
.aufg-frist-ok { color: var(--text-zart); }
.aufg-leer { color: var(--text-zart); padding: .6rem 0; }
.aufg-erledigt-block { margin-top: 1rem; }
.aufg-erledigt-block > summary { cursor: pointer; color: var(--text-zart); }
.cockpit-aufg-zu { color: var(--text-zart); font-size: .85rem; }
.beschluss-aufgabe-link { margin: .3rem 0; }
.aufg-person-add { display: flex; gap: .5rem; align-items: center; max-width: 26rem; }
.aufg-person-add select { flex: 1; min-width: 0; }
.aufg-person-add .ds-btn { flex-shrink: 0; }
.aufg-person-chips { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.aufg-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--accent-zart);
  border-radius: 1rem; padding: .15rem .3rem .15rem .7rem; font-size: .9rem; }
.aufg-chip-x { border: none; background: none; cursor: pointer; color: var(--text-zart);
  font-size: .9rem; line-height: 1; padding: .1rem .25rem; }
.aufg-chip-x:hover { color: var(--frist-krit); }
.aufg-herkunft { margin: 0; font-size: .82rem; color: var(--text-zart); font-weight: 600; }
.aufg-herkunft-text { margin: .1rem 0 .3rem; font-size: .85rem; color: var(--text-zart); white-space: pre-line; }

/* Gespräche (Gesprächsnotizen) */
.gespr-intro { flex: 1; margin: 0 1rem 0 0; }
.gespr-zeit-zeile { display: flex; gap: 1rem; flex-wrap: wrap; }
.gespr-zeit-zeile .feld { flex: 1; min-width: 8rem; }
.gespr-liste { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex;
  flex-direction: column; gap: .8rem; }
.gespr-item { padding: .9rem 1.1rem; }
.gespr-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.gespr-thema { margin: 0; font-weight: 600; font-size: 1.05rem; }
.gespr-meta { margin: .2rem 0 0; font-size: .85rem; color: var(--text-zart); }
.gespr-akt { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; }
.gespr-del-form { display: inline; }
.gespr-teilnehmer { margin: .6rem 0 0; font-size: .9rem; color: var(--text-zart); }
.gespr-notizen { margin: .5rem 0 0; white-space: pre-line; }
.anh-ma-gespr-h2 { margin: 1.4rem 0 .6rem; font-size: 1.1rem; }
.anh-ma-gespr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.anh-ma-gespr-item { padding: .7rem .9rem; }
.anh-ma-gespr-tag { font-size: .8rem; color: var(--text-zart); white-space: nowrap; }
.anh-ma-nuronly { color: var(--text-zart); font-style: italic; }
.anh-ma-gespr-row > td { padding: 0 !important; background: transparent; }
.anh-ma-gespr-zeile { margin: .25rem 0; padding: .45rem .7rem; border-left: 3px solid var(--accent); background: var(--bg-leise); border-radius: 0 6px 6px 0; }
.anh-ma-gespr-zeile > summary { cursor: pointer; list-style: none; margin: 0; }
.anh-ma-gespr-zeile > summary::-webkit-details-marker { display: none; }
.anh-ma-gespr-zeile > summary::before { content: "▸ "; color: var(--text-zart); }
.anh-ma-gespr-zeile[open] > summary::before { content: "▾ "; }
.anh-ma-gespr-inhalt { margin-top: .45rem; }
.anh-ma-gespr-zeile .gespr-teilnehmer { margin: .15rem 0; font-size: .85rem; color: var(--text-zart); }
.anh-ma-gespr-zeile .gespr-notizen { margin-top: .3rem; }
.gespr-aufgaben { list-style: none; margin: .8rem 0 0; padding: .6rem 0 0;
  border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .3rem; }
.gespr-aufgabe { display: flex; align-items: baseline; gap: .45rem; font-size: .9rem; }
.gespr-aufgabe-erledigt { opacity: .6; text-decoration: line-through; }
.gespr-aufgabe-ico { color: var(--accent); flex-shrink: 0; }
.gespr-aufgabe-titel { font-weight: 600; }
.gespr-aufgabe-meta { color: var(--text-zart); font-size: .82rem; }
.gespr-task-herkunft { margin: 0 0 .6rem; }
.gespr-leer { color: var(--text-zart); text-align: center; padding: 1.4rem; }
/* Externe Gesprächspartner (Stammdaten) */
.extern-akt { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }
.extern-inline-form { display: inline; }
.extern-inaktiv { margin-top: 1.2rem; }
.extern-inaktiv > summary { cursor: pointer; color: var(--text-zart); }
.extern-inaktiv-zeile { opacity: .6; }
.gespr-notizen .rte-edit, .gespr-notizen ul, .gespr-notizen ol { margin: 0; }
/* Größeres Popup für Gespräche, mit Platz für den Rich-Text-Editor.
   `.amt-dialog.gespr-dialog` (höhere Spezifität) schlägt die spätere
   `.amt-dialog { max-width: 24rem }`-Regel — sonst gewänne die wegen Quell-Reihenfolge. */
.amt-dialog.gespr-dialog { max-width: 80rem; width: 94vw; }
.amt-dialog.gespr-dialog .formular { padding: 1.5rem 1.8rem 1.6rem; }
.amt-dialog.gespr-dialog .rte-edit { min-height: 14rem; max-height: 46vh; overflow-y: auto; }

/* Tätigkeiten aus dem TOP (im Protokoll) */
.tat-block { margin-top: 1.4rem; border-top: 1px solid var(--border); padding-top: .9rem; }
.tat-h { margin: 0 0 .5rem; }
.tat-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: .4rem .6rem; border: 1px solid var(--border); border-radius: .4rem; margin-bottom: .4rem; }
.tat-item.tat-erledigt { opacity: .6; }
.tat-titel { margin: 0; font-weight: 600; }
.tat-meta { margin: .15rem 0 0; font-size: .82rem; color: var(--text-zart); }
.tat-haupt { flex: 1; }
.tat-edit { margin-top: .3rem; }
.tat-edit > summary { cursor: pointer; color: var(--accent); font-size: .82rem; }
.tat-toggle { display: block; margin: .8rem 0 .3rem; font-weight: 600; cursor: pointer; }
.tat-form.formular { max-width: 30rem; }
.tat-form .feld { margin: .7rem 0; }
/* Resultierende Aufgaben aus der BR-Sitzung (Ausschuss-Protokoll) */
.prot-braufg-block .braufg-item { border-top: 1px solid var(--border); padding: .7rem 0; }
.prot-braufg-block .braufg-item:first-of-type { border-top: 0; }
.braufg-gruppe { font-size: 1rem; margin: 1.1rem 0 .2rem; color: var(--text);
  border-bottom: 1px solid #e3e6ec; padding-bottom: .15rem; }
.braufg-gruppe:first-of-type { margin-top: .4rem; }
.braufg-gruppe + .braufg-item { border-top: 0; }
.braufg-item.braufg-erledigt { opacity: .6; }
.braufg-titel { margin: 0; font-weight: 600; }
.braufg-meta { margin: .15rem 0 .45rem; font-size: .82rem; color: var(--text-zart); }
.braufg-kontext { margin: 0 0 .5rem; padding: .4rem .6rem; font-size: .85rem;
  border-left: 3px solid var(--border); background: var(--bg-leise);
  border-radius: 0 .3rem .3rem 0; }
.braufg-kontext-l { font-weight: 600; color: var(--text-zart); }
.braufg-kontext-t :first-child { margin-top: 0; }
.braufg-kontext-t :last-child { margin-bottom: 0; }
.braufg-form { max-width: 36rem; }
.braufg-form label { font-size: .85rem; color: var(--text-zart); }
.braufg-form textarea { width: 100%; box-sizing: border-box; }
.anh-extern { margin: .6rem 0; }
.anh-extern-status { margin: 0 0 .3rem; }
.anh-extern-form { margin: .6rem 0; }
.anh-extern-form > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.anh-extern-felder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .8rem; margin-top: .5rem; }
.anh-extern-feld { display: flex; flex-direction: column; flex: 1 1 12rem; font-size: .85rem; gap: .25rem; }
.anh-extern-feld label { font-weight: 600; }
.anh-extern-feld input { width: 100%; box-sizing: border-box; padding: .45rem .55rem;
  border: 1px solid var(--border-stark); border-radius: var(--radius-s); font: inherit; }
.anh-extern-feld-datum { flex: 0 1 10rem; }   /* Datum schmaler; Notiz nimmt den Rest */
.anh-extern-aktion { flex: 0 0 100%; margin-top: .1rem; }

/* Anhörungs-Protokolltexte unter dem TOP „Personelle Einzelmaßnahmen". */
.prot-anh-block { margin: .3rem 0 1rem; }
.prot-anh-liste { list-style: disc; margin: .3rem 0 .6rem; padding-left: 1.4rem; }
.prot-anh { margin: 0 0 1.3rem; }
.prot-anh:last-child { margin-bottom: 0; }
.prot-anh-beschluss { margin: 0 0 .6rem; padding: .55rem .8rem; background: var(--accent-zart);
  border-left: 3px solid var(--accent); border-radius: .45rem; line-height: 1.5; scroll-margin-top: 1rem; }
.prot-anh-beschluss-label { display: inline-block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--accent-stark); margin-bottom: .25rem; }
.prot-anh-beschluss-zu { background: var(--frist-ok-bg); border-left-color: var(--frist-ok); }
.prot-anh-beschluss-zu .prot-anh-beschluss-label { color: var(--frist-ok); }
.prot-anh-beschluss-ver { background: var(--frist-krit-bg); border-left-color: var(--frist-krit); }
.prot-anh-beschluss-ver .prot-anh-beschluss-label { color: var(--frist-krit); }
.prot-anh-beschluss-akt { display: flex; align-items: center; gap: .7rem; margin-top: .35rem; }
.anh-fassen-btn { font-size: .85rem; padding: .25rem .8rem; margin-left: auto; }
.prot-anh-warnung,
.beschluss-warnung { margin: .15rem 0; color: var(--frist-krit); font-weight: 600; font-size: .9rem; }
.prot-anh-gefasst-zeile { display: flex; align-items: center; gap: .6rem; margin: .35rem 0 0; font-size: .88rem; color: var(--text-leise); }
.prot-anh-gefasst-zeile form { margin: 0; }
.anh-oeffnen-btn { font: inherit; font-size: .82rem; background: none; border: 1px solid var(--frist-krit); color: var(--frist-krit); padding: .18rem .6rem; border-radius: .4rem; cursor: pointer; }
.prot-anh-bf { margin: .1rem 0; }
.prot-anh-bf-warn { color: var(--frist-krit); font-weight: 600; }
.prot-anh-antrag { margin: .1rem 0; }
.prot-anh-stimmen { margin: .1rem 0; }
.anh-stimmen-form { margin: 0; }
.prot-anh-titel { display: inline-block; margin: 0 0 .2rem; }
.prot-anh-wiedervorlage { display: inline-block; margin-left: .4rem; padding: .05rem .45rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--frist-warn); border: 1px solid var(--frist-warn); border-radius: 999px;
  vertical-align: middle; }
.prot-anh-ruege { margin: .3rem 0; padding: .4rem .65rem; font-weight: 600;
  color: var(--frist-warn); background: var(--frist-warn-bg, #fff5e6);
  border-left: 3px solid var(--frist-warn); border-radius: 0 4px 4px 0; }
.prot-anh p { margin: .25rem 0; }
/* Beschluss-Block kompakt: gewinnt per Spezifität gegen .prot-anh p */
.prot-anh-beschluss p { margin: .1rem 0; }
/* Die drei Beschluss-Sätze (Beschlussfähigkeit/Antrag/Abstimmung) als ein
   Fließtext statt getrennter Absätze — Label bleibt auf eigener Zeile. */
.prot-anh-beschluss-label { display: block; }
.prot-anh-beschluss .prot-anh-bf,
.prot-anh-beschluss .prot-anh-antrag,
.prot-anh-beschluss .prot-anh-stimmen { display: inline; margin: 0; }
.prot-anh-ul { margin: .2rem 0 .4rem 1.2rem; padding-left: .2rem; list-style: circle; }
.prot-anh-ul li { margin: .1rem 0; }
.prot-anh-gruppe { font-size: 1rem; margin: 1rem 0 .2rem; color: var(--text); border-bottom: 1px solid #e3e6ec; padding-bottom: .15rem; }

/* Anwesenheit: Uhr-Symbol + Teilnahme-Detail-Popup (verspätet / verlässt früher) */
.prot-anw-item { display: flex; align-items: center; gap: .3rem; }
.prot-anw-item label { flex: 1; min-width: 0; }
.anw-uhr { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid var(--border); border-radius: .4rem;
  background: var(--bg-karte); color: var(--text-zart); cursor: pointer; }
.anw-uhr:hover { background: var(--accent-zart); color: var(--accent); border-color: var(--accent); }
.anw-uhr-aktiv { color: var(--accent); border-color: var(--accent); background: var(--accent-zart); }

.anw-dialog { border: 1px solid var(--border); border-radius: .6rem; padding: 1.1rem 1.2rem 1rem;
  width: min(26rem, 92vw); box-shadow: 0 .6rem 1.8rem rgba(0,0,0,.18); }
.anw-dialog::backdrop { background: rgba(15,23,42,.35); }
.anw-dlg-titel { margin: 0 0 .8rem; font-size: 1.05rem; }
.anw-check { display: flex; align-items: center; gap: .45rem; cursor: pointer; font-weight: 600;
  margin: .55rem 0 0; }
.anw-detail { display: none; margin: .35rem 0 .2rem 1.6rem; }
.anw-detail.anw-offen { display: block; }
.anw-feld { display: flex; flex-direction: column; gap: .2rem; margin: .4rem 0; font-size: .9rem; color: var(--text-leise); }
.anw-feld input[type="time"], .anw-feld textarea { font: inherit; padding: .35rem .45rem;
  border: 1px solid var(--border); border-radius: .4rem; }
.anw-feld input[type="time"] { width: 8rem; }
.anw-zeitpaar { display: flex; gap: 1rem; }
.anw-dlg-aktionen { display: flex; justify-content: flex-end; gap: .5rem; margin: 1rem 0 0; padding: 0; }

/* === App-Shell mit linker Sidebar (Etappe 22-2) ====================== */
body.app { max-width: none; margin: 0; padding: 0; }
.app-shell { display: flex; min-height: 100vh; }

.sidebar { width: 14rem; flex: none; box-sizing: border-box;
  background: var(--bg-karte); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: var(--sp-3) var(--sp-2);
  position: sticky; top: 0; height: 100vh; }
.sidebar-logo { display: flex; align-items: center; gap: .4rem; text-decoration: none;
  font-weight: 800; font-size: 1.2rem; color: var(--accent); letter-spacing: -.02em;
  padding: var(--sp-2) var(--sp-2) var(--sp-4); }
.sidebar-nav { display: flex; flex-direction: column; gap: .12rem; }
.sidebar-nav a { display: flex; align-items: center; gap: .65rem; text-decoration: none;
  color: var(--text-leise); font-weight: 600; padding: .5rem .7rem;
  border-radius: var(--radius-s); white-space: nowrap; }
.sidebar-nav a:hover { background: var(--accent-zart); color: var(--accent-stark); }
.sidebar-nav a.aktiv { background: var(--accent); color: #fff; }
.sidebar-nav hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-2) .5rem; width: 100%; }
.sidebar-ico { width: 1.3rem; text-align: center; flex: none; font-size: 1.05rem; }
.sidebar-spacer { flex: 1; }
.sidebar-kompakt { display: flex; align-items: center; gap: .65rem; width: 100%;
  background: none; border: none; color: var(--text-zart); font-weight: 600;
  padding: .5rem .7rem; border-radius: var(--radius-s); cursor: pointer; font-size: .92rem; }
.sidebar-kompakt:hover { background: var(--bg-leise); color: var(--text-leise); }
.sidebar-kompakt > span:first-child { width: 1.3rem; text-align: center; font-size: 1.1rem; }

.app-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: .6rem;
  padding: .55rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--border);
  background: var(--bg); position: sticky; top: 0; z-index: 30; }
.topbar-burger { display: none; background: none; border: none; font-size: 1.4rem;
  cursor: pointer; padding: .2rem .5rem; color: var(--text); line-height: 1; }
.arbeitsbereich { flex: 1; min-width: 0; width: 100%; max-width: none;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem); box-sizing: border-box; }
.sidebar-backdrop { display: none; }

/* Desktop: eingeklappt (Icon-Streifen) */
@media (min-width: 48.0625rem) {
  .app-shell.nav-kompakt .sidebar { width: 3.7rem; padding-left: .35rem; padding-right: .35rem; }
  .app-shell.nav-kompakt .sidebar-label { display: none; }
  .app-shell.nav-kompakt .sidebar-logo { justify-content: center; padding-left: 0; padding-right: 0; }
  .app-shell.nav-kompakt .sidebar-kompakt { justify-content: center; }
  .app-shell.nav-kompakt .sidebar-kompakt > span:first-child { transform: scaleX(-1); }
}

/* Mobil: Sidebar als Off-Canvas */
@media (max-width: 48rem) {
  .sidebar { position: fixed; top: 0; left: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .2s; box-shadow: var(--schatten); }
  .app-shell.nav-offen .sidebar { transform: none; }
  .sidebar-kompakt { display: none; }
  .topbar-burger { display: inline-flex; align-items: center; }
  .app-shell.nav-offen .sidebar-backdrop { display: block; position: fixed; inset: 0;
    z-index: 50; background: rgba(0,0,0,.35); }
  .arbeitsbereich { padding: 1.2rem 1rem; }
}

/* === Start-Cockpit (Etappe 22-3) ===================================== */
.cockpit-kopf { margin-bottom: var(--sp-5); }
.cockpit-kopf h1 { font-size: 1.9rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.cockpit-datum { color: var(--text-leise); margin: .25rem 0 0; font-size: .95rem; text-transform: capitalize; }
.cockpit-grid { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.cockpit-karte { display: flex; flex-direction: column; gap: .4rem; }
a.cockpit-karte { text-decoration: none; color: var(--text); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.cockpit-karte:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.1);
  transform: translateY(-2px); }
a.cockpit-karte:hover .cockpit-titel { color: var(--accent); }
a.cockpit-karte:hover .cockpit-mehr { text-decoration: underline; }
.cockpit-titel { display: flex; align-items: center; gap: .5rem; }
.cockpit-titel-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent-zart); color: var(--accent); flex-shrink: 0; }
.cockpit-termin { font-weight: 700; font-size: 1.05rem; margin: .1rem 0 0; }
.cockpit-sitzung-titel { margin: 0; color: var(--text-zart); }
.cockpit-ort { color: var(--text-leise); font-size: .88rem; margin: 0; }
.cockpit-bf { margin: .35rem 0 0; }
.cockpit-btn { align-self: flex-start; margin-top: .6rem; }
.cockpit-liste-stat { list-style: none; padding: 0; margin: .2rem 0 0;
  display: flex; flex-direction: column; }
.cockpit-liste-stat li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0;
  border-bottom: 1px solid var(--border); }
.cockpit-liste-stat li:last-child { border-bottom: none; }
.cockpit-liste-stat a { text-decoration: none; color: var(--text); font-weight: 600; }
.cockpit-liste-stat a:hover { color: var(--accent); }
.cockpit-liste-name { font-weight: 600; color: var(--text); }
.cockpit-pill { display: inline-flex; align-items: center; font-size: .76rem; font-weight: 700;
  padding: .12rem .55rem; border-radius: 1rem; white-space: nowrap; flex-shrink: 0; min-width: 5.2rem; justify-content: center; }
.cockpit-pill-ok { background: var(--frist-ok-bg); color: var(--frist-ok); }
.cockpit-pill-warn { background: var(--frist-warn-bg); color: var(--frist-warn); }
.cockpit-pill-krit { background: var(--frist-krit-bg); color: var(--frist-krit); }
.cockpit-pill-fingiert { background: var(--accent-zart); color: var(--accent); }
.cockpit-mehr { margin-top: auto; padding-top: .6rem; font-weight: 600; text-decoration: none; color: var(--accent); font-size: .9rem; }
.cockpit-mehr:hover { text-decoration: underline; }
.cockpit-todo-titel { font-weight: 700; margin: .5rem 0 .2rem; }
.cockpit-liste { margin: .2rem 0; padding-left: 1.1rem; }
.cockpit-liste a { color: var(--accent-stark); }
.cockpit-bereiche-titel { font-size: 1.05rem; color: var(--text-leise); margin: 0 0 .6rem; }

/* === Rechtshinweis-Popover (Etappe 22-4) ============================ */
.rh { position: relative; display: inline-block; vertical-align: middle; }
.rh > summary { list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; color: var(--text-zart); font-size: .95rem; line-height: 1; }
.rh > summary::-webkit-details-marker { display: none; }
.rh > summary::marker { content: ""; }
.rh > summary:hover { background: var(--bg-leise); color: var(--accent); }
.rh[open] > summary { background: var(--accent-zart); color: var(--accent-stark); }
.rh-pop { position: absolute; left: 0; top: calc(100% + .3rem); z-index: 40;
  width: 19rem; max-width: 80vw; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-s); box-shadow: var(--schatten); padding: .7rem .8rem;
  font-weight: 400; text-align: left; white-space: normal; }
.rh-norm { margin: 0 0 .25rem; font-weight: 700; color: var(--accent-stark); font-size: .82rem; }
.rh-titel { margin: 0 0 .3rem; font-weight: 600; font-size: .95rem; }
.rh-text { margin: 0; font-size: .88rem; color: var(--text); line-height: 1.45; }
.rh-disclaimer { margin: .45rem 0 0; font-size: .74rem; color: var(--text-zart); }
.rh-entwurf { font-size: .68rem; background: var(--frist-warn-bg); color: var(--frist-warn);
  padding: .05em .45em; border-radius: 999px; font-weight: 700; vertical-align: middle; }

/* === Mitglieder-Aktion + responsive Tabellen (Etappe 22-5) ========== */
.sitzung-aktion { display: flex; flex-direction: column; gap: .4rem; flex: none;
  justify-content: center; padding: .6rem .8rem; border-left: 1px solid var(--border); }
.sitzung-aktion form { margin: 0; }
.sitzung-aktion .ds-btn { width: 100%; white-space: nowrap; font-size: .85rem; padding: .4rem .7rem; }

@media (max-width: 48rem) {
  .arbeitsbereich table { display: block; max-width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
  .sitzung-karte { flex-direction: column; }
  .sitzung-aktion { border-left: none; border-top: 1px solid var(--border); flex-direction: row; }
  .sitzung-aktion .ds-btn { width: auto; flex: 1; }
}

.anh-leer { text-align: center; color: var(--text-leise); padding: var(--sp-5); }

/* === Skip-Link (Etappe 22-6, Tastatur-/Screenreader-A11y) =========== */
.skip-link { position: absolute; left: -999px; top: .5rem; z-index: 100;
  background: var(--accent); color: #fff; padding: .5rem .9rem;
  border-radius: var(--radius-s); text-decoration: none; font-weight: 600; }
.skip-link:focus { left: .5rem; }
/* Nur für Screenreader sichtbar (visuell ausgeblendet). */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* === Sidebar-Umbau: Kopf-Toggle + Fuß mit Profil/Konfig (Etappe 22) === */
.sidebar-kopf { display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.sidebar-logo { padding: 0; }
.sidebar-toggle { flex: none; background: none; border: none; cursor: pointer;
  color: var(--text-zart); font-size: 1.1rem; line-height: 1; width: 1.9rem; height: 1.9rem;
  border-radius: var(--radius-s); display: inline-flex; align-items: center; justify-content: center; }
.sidebar-toggle:hover { background: var(--bg-leise); color: var(--accent); }

.sidebar-fuss { display: flex; align-items: center; gap: .15rem;
  padding: var(--sp-2) .3rem 0; margin-top: var(--sp-2); border-top: 1px solid var(--border); }
.sidebar-fuss .nav-profil { flex: 1; min-width: 0; }
.sidebar-fuss .nav-profil > summary { width: 100%; box-sizing: border-box; gap: .55rem;
  padding: .45rem .5rem; border: 1px solid transparent; border-radius: var(--radius-s); }
.sidebar-fuss .nav-profil > summary:hover { background: var(--bg-leise); }
.nav-profil-menu-oben { top: auto; bottom: calc(100% + .5rem); left: 0; right: auto; }
.sidebar-konfig { flex: none; width: 2.2rem; height: 2.2rem; display: inline-flex;
  align-items: center; justify-content: center; border-radius: var(--radius-s);
  text-decoration: none; font-size: 1.05rem; color: var(--text-leise); }
.sidebar-konfig:hover { background: var(--accent-zart); }
.sidebar-konfig.aktiv { background: var(--accent); }

/* Theme-Umschalter (Hell/System/Dunkel) in der Sidebar-Fußzeile */
.sidebar-theme { display: flex; justify-content: center; padding: 0 .3rem var(--sp-2); }
.theme-switch { display: inline-flex; gap: .25rem; }
.theme-opt { flex: none; width: 2.2rem; height: 2.2rem; border: none; background: none;
  cursor: pointer; border-radius: var(--radius-s); padding: 0; color: var(--text-zart);
  display: inline-flex; align-items: center; justify-content: center; }
.theme-opt:hover { color: var(--text); background: var(--bg-leise); }
.theme-opt.aktiv { color: var(--accent); }
.app-shell.nav-kompakt .theme-switch { flex-direction: column; gap: .15rem; }

/* eingeklappt */
.app-shell.nav-kompakt .sidebar-kopf { justify-content: center; }
.app-shell.nav-kompakt .sidebar-logo { display: none; }
.app-shell.nav-kompakt .sidebar-toggle > span { display: inline-block; transform: scaleX(-1); }
.app-shell.nav-kompakt .sidebar-fuss { flex-direction: column; }
.app-shell.nav-kompakt .sidebar-fuss .nav-profil > summary { justify-content: center; }

/* Topbar nur mobil (Burger) — Profil sitzt jetzt in der Sidebar */
@media (min-width: 48.0625rem) { .topbar { display: none; } }
@media (max-width: 48rem) { .sidebar-toggle { display: none; } }

/* Korrektur (Etappe 22): Fuß kompakt (nur Avatar + Zahnrad), Konfig ohne grünes Kästchen */
.sidebar-fuss { justify-content: flex-start; }
.sidebar-fuss .nav-profil { flex: none; }
.sidebar-fuss .nav-profil > summary { width: auto; padding: .3rem; }
.sidebar-konfig:hover { background: none; color: var(--accent); }
.sidebar-konfig.aktiv { background: none; color: var(--accent); }

/* Zahnrad so groß wie das Profilbild (2rem) */
.sidebar-konfig { width: 2rem; height: 2rem; font-size: 1.6rem; }

/* etwas größer */
.sidebar-konfig { width: 2.4rem; height: 2.4rem; font-size: 1.9rem; }

/* noch etwas größer */
.sidebar-konfig { width: 2.8rem; height: 2.8rem; font-size: 2.2rem; }

/* zurück auf die vorige Größe */
.sidebar-konfig { width: 2.4rem; height: 2.4rem; font-size: 1.9rem; }

/* Profilbild und Zahnrad exakt auf einer Mittellinie (gleiche quadratische Box) */
.sidebar-fuss { align-items: center; }
.sidebar-fuss .nav-profil > summary { padding: 0; width: 2.4rem; height: 2.4rem;
  display: inline-flex; align-items: center; justify-content: center; }
.sidebar-konfig { height: 2.4rem; line-height: 1; }

/* Emoji-Versatz ausgleichen: Zahnrad-Glyph 3px höher */
.sidebar-konfig > span { display: inline-block; transform: translateY(-3px); }

/* Feintuning: 1px tiefer -> -2px */
.sidebar-konfig > span { transform: translateY(-2px); }

/* === Sidebar-Uhr (Etappe 22) ======================================== */
.sidebar-uhr { padding: var(--sp-2) .6rem; text-align: center; }
.sidebar-uhr-top { font-weight: 700; font-size: .95rem; color: var(--text); }
.sidebar-uhr-datum { font-size: .8rem; color: var(--text-leise); }
.app-shell.nav-kompakt .sidebar-uhr { display: none; }

/* Uhr kompakt neben dem Zahnrad (Etappe 22) */
.sidebar-fuss .sidebar-uhr { padding: 0 0 0 .35rem; text-align: left; flex: 0 0 auto;
  min-width: 0; line-height: 1.15; white-space: nowrap; }
.sidebar-fuss .sidebar-uhr-top { font-size: .8rem; }
.sidebar-fuss .sidebar-uhr-datum { font-size: .72rem; }

/* Uhrzeit-Zeile 2px größer */
.sidebar-fuss .sidebar-uhr-top { font-size: .92rem; }

/* Uhr + Datum je 2px größer */
.sidebar-fuss .sidebar-uhr-top { font-size: 1.05rem; }
.sidebar-fuss .sidebar-uhr-datum { font-size: .85rem; }

/* Uhr/Datum rechtsbündig in der Sidebar */
.sidebar-fuss .sidebar-uhr { text-align: right; padding-right: .3rem; }

/* Blinkender Doppelpunkt in der Uhr (1s); bei reduce-motion bleibt er sichtbar */
.uhr-kolon { animation: uhr-blink 1s step-end infinite; }
@keyframes uhr-blink { 0% { opacity: 1; } 50% { opacity: 0; } }

/* Schlichte Linien-Icons in der Sidebar (Etappe 22) */
.sidebar-ico { display: inline-flex; align-items: center; justify-content: center; }
.sidebar-ico svg, .sidebar-konfig svg, .sidebar-toggle svg { display: block; }

/* Logo-Häkchen statt Punkt (Etappe 22) */
.sidebar-logo-check { display: block; margin-left: .15rem; flex: none; }

/* Häkchen näher ans Logo */
.sidebar-logo-check { margin-left: -.25rem; }

/* Häkchen jetzt VOR dem Logo, eng */
.sidebar-logo-check { margin-left: 0; margin-right: -.2rem; }

/* === Personen-Karten: weich geschwungener linker Farbakzent (Etappe 22) ===
   Vertikale Ellipse, links angeschnitten -> in der Mitte dick, zu den Enden
   dünner; nur in der Personen-Liste (nicht in Teilnehmer-/Besetzungskarten). */
.personen-karten .person-karte { position: relative; overflow: hidden; padding-left: 1.2rem; }
.personen-karten .person-karte::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 72%; background: var(--accent); border-radius: 50%;
  pointer-events: none; }

/* Akzent andersrum geschwungen (konkav): grüner Streifen mit elliptischer
   Aussparung rechts -> oben/unten dick, Mitte dünner. */
.personen-karten .person-karte::before {
  left: 0; top: 10%; bottom: 10%; width: 14px; height: auto;
  transform: none; border-radius: 7px;
  -webkit-mask: radial-gradient(11px 70% at 100% 50%, transparent 99%, #000 100%);
          mask: radial-gradient(11px 70% at 100% 50%, transparent 99%, #000 100%);
}

/* Akzent: tiefer + über die ganze Höhe (Enden voll, Mitte dünn, bis zum Rand) */
.personen-karten .person-karte::before {
  top: 0; bottom: 0; width: 15px; border-radius: 0;
  -webkit-mask: radial-gradient(13px 50% at 100% 50%, transparent 99%, #000 100%);
          mask: radial-gradient(13px 50% at 100% 50%, transparent 99%, #000 100%);
}

/* Bogen glätten: weicherer Mask-Übergang (gegen Pixel-Treppen) */
.personen-karten .person-karte::before {
  -webkit-mask: radial-gradient(13px 50% at 100% 50%, transparent 93%, #000 100%);
          mask: radial-gradient(13px 50% at 100% 50%, transparent 93%, #000 100%);
}

/* Akzent pro Gruppe: Ordentliche links+rechts, Ersatz nur links, Kein BR keiner */
.kart-beide .person-karte { padding-right: 1.2rem; }
.kart-beide .person-karte::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 15px;
  background: var(--accent); pointer-events: none;
  -webkit-mask: radial-gradient(13px 50% at 0% 50%, transparent 93%, #000 100%);
          mask: radial-gradient(13px 50% at 0% 50%, transparent 93%, #000 100%);
}
.kart-kein .person-karte { padding-left: .9rem; }
.kart-kein .person-karte::before { content: none; }

/* Test: einfache gerade Balken statt geschwungen */
.personen-karten .person-karte::before,
.kart-beide .person-karte::after { -webkit-mask: none; mask: none; width: 5px; border-radius: 0; }

/* BR-Funktion in der Personenliste: Vorsitz orange, Stellv. Vorsitz blasseres Orange.
   Nur die Akzentbalken färben; grünen Rahmen/Hover der Funktionsseite neutralisieren. */
.personen-karten .person-karte.ist-vorsitz,
.personen-karten .person-karte.ist-stellv { border-color: var(--border); background: var(--bg-karte); }
.personen-karten .person-karte.ist-vorsitz:hover,
.personen-karten .person-karte.ist-stellv:hover { border-color: #e07a1f; background: var(--frist-warn-bg); }
.personen-karten .person-karte.ist-vorsitz::before,
.personen-karten .person-karte.ist-vorsitz::after { background: #e07a1f; }
.personen-karten .person-karte.ist-stellv::before,
.personen-karten .person-karte.ist-stellv::after { background: #f2c08c; }

/* Ersatzmitglieder: helleres Grün, solange nicht nachgeladen. Nachgeladene Ersatz
   behalten das volle Grün der Ordentlichen (kein .reserve). */
.personen-karten .person-karte.reserve::before,
.personen-karten .person-karte.reserve::after { background: #6cbd97; }

/* Schwerbehindertenvertretung (BR-Funktion-Seite): eigener Regenbogen-Balken,
   damit SBV/stellv. SBV nicht mit Vorsitz/Stellv. Vorsitz verwechselt werden.
   SBV kräftig, stellv. SBV pastellig (analog „stellv. = blasser"). */
.personen-karten .person-karte.ist-sbv::before {
  background: linear-gradient(to bottom,
    #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787); }
.personen-karten .person-karte.ist-stellv-sbv::before {
  background: linear-gradient(to bottom,
    #f3a6a6, #ffcc99, #fff2a6, #a9d9b8, #aac4f0, #c7a9da); }

/* Doppelfunktion (SBV ist zugleich ordentliches BR-Mitglied): zusätzlicher grüner
   Balken rechts wie bei den Ordentlichen – der Regenbogen links bleibt für die SBV. */
.personen-karten .person-karte.doppelfunktion { padding-right: 1.2rem; }
.personen-karten .person-karte.doppelfunktion::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 5px;
  background: var(--accent); pointer-events: none; }

/* Externe SBV / stellv. SBV: trotz balkenloser „Kein BR-Mitglied"-Gruppe den
   Regenbogen-Balken zeigen, damit die SBV-Funktion auch hier sichtbar ist. */
.kart-kein .person-karte.ist-sbv,
.kart-kein .person-karte.ist-stellv-sbv { padding-left: 1.2rem; }
.kart-kein .person-karte.ist-sbv::before,
.kart-kein .person-karte.ist-stellv-sbv::before { content: ""; }

/* BR-Funktionen: Mitgliedskarten als klickbare Buttons + Amt-Popup (<dialog>). */
button.person-karte { font: inherit; text-align: left; width: 100%;
  cursor: pointer; box-sizing: border-box; }
.amt-dialog { border: none; border-radius: 12px; padding: 0; width: 90vw; max-width: 24rem;
  box-shadow: 0 12px 48px rgba(0,0,0,.28); }
.amt-dialog::backdrop { background: rgba(0,0,0,.45); }
.amt-dialog .formular { margin: 0; max-width: none; padding: 1.4rem 1.6rem 1.5rem; }
.amt-dialog h3 { margin: 0 0 1rem; }
.amt-dialog select, .amt-dialog input[type=number] { width: 100%; max-width: none;
  box-sizing: border-box; padding: .45rem .55rem; border: 1px solid var(--border-stark);
  border-radius: .45rem; font: inherit; }
.dialog-aktionen { display: flex; gap: .6rem; margin-top: 1.2rem; }
/* Fuß-Aktionsleiste am Dialogende (außerhalb .formular, eigenes Padding). */
.dialog-fuss { margin-top: 0; padding: 1rem 1.6rem 1.4rem; border-top: 1px solid var(--border);
               background: var(--bg-leise); border-radius: 0 0 12px 12px; }
.dialog-abbruch { background: var(--bg); color: var(--text);
  border: 1px solid var(--border-stark); font-weight: 600; }
.dialog-abbruch:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); }

/* „Neue Sitzung"-Popup (<dialog>) auf Kalender/Liste. */
.ns-dialog { border: none; border-radius: 14px; padding: 0; width: 92vw; max-width: 34rem;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 16px 56px rgba(0,0,0,.30); }
.ns-dialog::backdrop { background: rgba(0,0,0,.45); }
.ns-dialog-form { margin: 0; max-width: none; padding: 1.3rem 1.5rem 1.5rem; }
.ns-dialog-kopf { display: flex; align-items: center; justify-content: space-between; margin: 0 0 1rem; }
.ns-dialog-kopf h2 { margin: 0; font-size: 1.2rem; }
.ns-dialog-x { background: none; border: none; color: var(--text-leise); font-size: 1.5rem;
  line-height: 1; padding: .1rem .45rem; cursor: pointer; border-radius: 6px; }
.ns-dialog-x:hover { background: var(--bg-leise); color: var(--text); }
.ns-dialog-fehler { margin: 0 0 1rem; border-radius: .45rem; }

/* Ausschuss-Liste: eigene Karten (ohne Personen-Akzentbalken) + Status-Badges. */
.ausschuss-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: .7rem; margin: .6rem 0 1.5rem; }
.ausschuss-name { overflow-wrap: anywhere; }
.ausschuss-karte { display: flex; flex-direction: column; gap: .55rem;
  border: 1px solid var(--border); border-radius: .6rem; padding: .9rem 1rem; background: var(--bg-karte);
  text-decoration: none; color: inherit; transition: .1s; }
.ausschuss-karte:hover { border-color: var(--accent); background: var(--frist-ok-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.ausschuss-karte.inaktiv { opacity: .55; }
.ausschuss-name { font-weight: 600; font-size: 1.05rem; }
.ausschuss-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Dialog: Text-Inputs wie Select/Number behandeln; Checkbox-Zeile bündig. */
.amt-dialog input[type=text] { width: 100%; max-width: none; box-sizing: border-box;
  padding: .45rem .55rem; border: 1px solid var(--border-stark); border-radius: .45rem; font: inherit; }
.amt-dialog .dlg-check { display: flex; align-items: center; gap: .45rem; }
.amt-dialog .dlg-check input { width: auto; }

/* Ausschuss-Karten: grüne Akzentbalken links und rechts wie bei den Ordentlichen. */
.ausschuss-karte { position: relative; overflow: hidden; padding-left: 1.2rem; padding-right: 1.2rem; }
.ausschuss-karte::before, .ausschuss-karte::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 5px;
  background: var(--accent); pointer-events: none; }
.ausschuss-karte::before { left: 0; }
.ausschuss-karte::after { right: 0; }

/* Formular-Popups (Neue Person / Neue Wahlperiode): breiter + scrollbar bei vielen
   Feldern; alle gängigen Eingabetypen einheitlich stylen. */
.amt-dialog { max-height: 86vh; overflow-y: auto; }
.amt-dialog-breit { max-width: 32rem; }
.amt-dialog input[type=text], .amt-dialog input[type=email],
.amt-dialog input[type=date], .amt-dialog input[type=number],
.amt-dialog textarea {
  width: 100%; max-width: none; box-sizing: border-box; padding: .45rem .55rem;
  border: 1px solid var(--border-stark); border-radius: .45rem; font: inherit; }
.amt-dialog .formular p { margin: .55rem 0; }

/* Ausschuss-Popup: Mitglieder-Liste + Zuweisen/Entfernen + Einstellungen. */
.aus-popup { padding: 1.4rem 1.6rem 1.5rem; }
.aus-popup h3 { margin: 0 0 .2rem; }
.aus-popup h4 { margin: 1.3rem 0 .5rem; font-size: .95rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.aus-popup h4:first-of-type { border-top: none; padding-top: 0; }
.aus-popup form { margin: 0; }
.aus-popup p { margin: .55rem 0; }
.aus-mitglieder { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .4rem; }
.aus-mitglied { display: flex; align-items: center; justify-content: space-between; gap: .3rem;
  border: 1px solid var(--border); border-radius: .45rem; padding: .3rem .35rem .3rem .6rem;
  font-size: .88rem; min-width: 0; }
.aus-mitglied > span:first-child { min-width: 0; }
.aus-mitglied.ist-vorsitz-zeile { border-color: var(--accent); background: var(--frist-ok-bg); }
.aus-mitglied .hinweis { font-size: .74rem; }
.btn-entfernen { flex-shrink: 0; background: none; color: var(--frist-krit); width: 1.5rem; height: 1.5rem;
  line-height: 1; padding: 0; font-size: 1.2rem; border: none; border-radius: 50%;
  cursor: pointer; }
.btn-entfernen:hover { background: var(--frist-krit-bg); }

/* Hinweistexte in Popups: kleiner und dezent grau. */
.amt-dialog .hinweis { display: block; font-size: .78rem; color: var(--text-leise);
  margin-top: .2rem; font-weight: 400; }

/* Popup: Reihenfolge (schmal) + Art in einer Zeile. */
.amt-dialog .dlg-reihe { display: flex; gap: .8rem; align-items: flex-start; }
.amt-dialog .dlg-reihe > p { margin: .55rem 0; }
.amt-dialog .dlg-feld-klein { flex: 0 0 auto; }
.amt-dialog .dlg-feld { flex: 1; min-width: 0; }
.amt-dialog .dlg-feld-klein input[type=number] { width: 5rem; }

/* Ausschuss-Karte: kleine Mitglieder-Avatare zwischen Name und Anzahl. */
.aus-avatare { display: flex; flex-wrap: wrap; gap: .25rem; }
.aus-avatare .avatar { width: 3.4rem; height: 3.4rem; font-size: 1.36rem; margin-right: 0; }
.aus-avatar.ersatz .avatar { opacity: .55; }

/* Tools-Seite: auswählbare Mitglieder-Karten statt roher Checkbox-Liste. */
.tool-block { margin: 1rem 0 1.3rem; }
.tool-block h3 { margin: 0 0 .3rem; }
.tool-sub { font-weight: 400; font-size: .85rem; color: var(--text-leise); }
.tool-personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .5rem; margin-top: 1rem; }
.tool-person { display: flex; align-items: center; gap: .7rem; cursor: pointer; transition: .1s;
  border: 1px solid var(--border); border-radius: .6rem; padding: .5rem .75rem; background: var(--bg-karte); }
.tool-person:hover { border-color: var(--accent); }
.tool-person:has(input:checked) { border-color: var(--accent); background: var(--accent-zart); }
.tool-person input[type=checkbox] { width: 1.15rem; height: 1.15rem; flex-shrink: 0;
  accent-color: var(--accent); cursor: pointer; }
.tool-person .avatar { width: 2.5rem; height: 2.5rem; font-size: .9rem; margin-right: 0; flex-shrink: 0; }
.tool-person-name { font-weight: 500; min-width: 0; }

/* ---- Schulungsmodul (Etappe 24) ------------------------------------- */
.formular-fehler { background: var(--frist-krit-bg); color: var(--frist-krit);
  border: 1px solid #f3c2c8; border-radius: var(--radius-s); padding: .6rem .9rem;
  margin: 0 0 1rem; font-weight: 600; }
.btn-loeschen { font: inherit; background: var(--bg-karte); color: var(--frist-krit);
  border: 1px solid #f3c2c8; border-radius: .5rem; padding: .5rem .85rem; cursor: pointer; }
.btn-loeschen:hover { background: var(--frist-krit-bg); }

.schul-layout { display: grid; grid-template-columns: minmax(15rem, 22rem) 1fr;
  gap: 1.4rem; align-items: start; }
@media (max-width: 760px) { .schul-layout { grid-template-columns: 1fr; } }
.schul-spalte { min-width: 0; }
.schul-detail { min-width: 0; }
.schul-h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
.schul-h3 { font-size: .98rem; margin: 1.3rem 0 .5rem; }

.schul-liste { list-style: none; margin: 0 0 1rem; padding: 0; display: flex;
  flex-direction: column; gap: .4rem; }
.schul-item a { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: .55rem .7rem; background: var(--bg-karte); }
.schul-item a:hover { border-color: var(--accent); }
.schul-item.aktiv a { border-color: var(--accent); background: var(--accent-zart); }
.schul-item-titel { font-weight: 600; }
.schul-item-datum, .schul-meta { font-size: .82rem; color: var(--text-zart); }
.schul-meta { margin: .15rem 0 0; }
/* Weich verworfene Planungen: gedämpfter, wiederherstellbarer Bereich. */
.schul-verworfen { margin: 0 0 1rem; font-size: .9rem; }
.schul-verworfen > summary { cursor: pointer; color: var(--text-leise); padding: .25rem 0; }
.schul-item-verworfen { display: flex; align-items: center; gap: .5rem;
  justify-content: space-between; padding: .4rem .6rem; border-radius: var(--radius);
  background: var(--bg-leise); color: var(--text-leise); }
.schul-item-verworfen .schul-item-titel { font-weight: 500; }

.schul-pill { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; padding: .12rem .5rem; border-radius: 1rem;
  background: var(--bg-leise); color: var(--text-leise); }
.schul-pill-eingereicht, .schul-pill-tn-zugesagt { background: var(--accent-zart); color: var(--accent-stark); }
.schul-pill-beschlossen, .schul-pill-absolviert, .schul-pill-tn-initiator { background: var(--frist-ok-bg); color: var(--frist-ok); }
.schul-pill-tn-abgesagt { background: var(--frist-krit-bg); color: var(--frist-krit); }

.schul-neu { margin-top: .6rem; }
.schul-neu > summary { display: inline-block; margin-bottom: .6rem; }
.schul-form { margin-top: .4rem; }
.schul-feld-zeile { display: flex; flex-wrap: wrap; gap: 1rem; }
.schul-feld-zeile .feld { flex: 1; min-width: 9rem; }
.schul-feld-haken { display: flex; flex-direction: column; gap: .3rem; justify-content: flex-end; }
.schul-feld-haken label { font-weight: 400; }
.schul-zusatz { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.schul-betrag-inp { width: 8rem; }
.schul-betrag-inp.versteckt { display: none; }

.schul-detail-kopf, .schul-einladung { display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; }
.schul-tn { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex;
  flex-direction: column; gap: .35rem; }
.schul-tn-item { display: flex; align-items: center; gap: .5rem; }
.schul-tn-x { border: none; background: none; cursor: pointer; color: var(--text-zart);
  font-size: .9rem; line-height: 1; padding: 0 .25rem; }
.schul-tn-x:hover { color: var(--frist-krit); }
.schul-inline-form { display: inline; }
.schul-einladen { margin: .4rem 0 0; }
.schul-einladen > label { display: block; font-weight: 600; margin-bottom: .3rem; }
.schul-einladen > .btn-neu { margin-top: .6rem; }

.schul-vorschau { background: var(--bg-leise); border-left: 3px solid var(--accent);
  border-radius: .5rem; padding: .7rem .9rem; font-size: .92rem; line-height: 1.45; }
.schul-aktionen { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.schul-eingereicht { color: var(--frist-ok); font-weight: 600; margin: 0; }
.schul-einladung { padding: .8rem 1rem; }
.schul-einladung-aktion { display: flex; gap: .5rem; flex-shrink: 0; }
.schul-hist-item { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  border-bottom: 1px solid var(--border); padding: .5rem 0; }
.schul-hist-item .schul-item-titel { flex: 1; min-width: 10rem; }
.schul-quelle { font-size: .72rem; color: var(--text-zart); text-transform: uppercase; }
.schul-spezial { margin-top: .4rem; }
.schul-spezial input { width: 100%; }
.schul-gate-hinweis { background: var(--bg-leise); border-radius: .5rem; padding: .5rem .7rem; }
.schul-anbieter-row { display: flex; gap: .6rem; align-items: center; }
.schul-anbieter-row > select, .schul-anbieter-row > input { flex: 1; min-width: 0; }

/* Person endgültig löschen (Stammdaten-Dialog) */
.person-del-form, .person-del-hinweis {
  margin-top: 1rem; padding: .8rem 1.6rem 1.3rem; border-top: 1px solid var(--border); }
.person-del-hinweis { font-size: .85rem; }

/* --- Rechtschreibprüfung (Etappe 28) ----------------------------------- */
/* Markierung unbekannter Wörter via CSS Custom Highlight API — verändert den
   gespeicherten Text NICHT. */
::highlight(rechtschreibung) {
  text-decoration: underline wavy var(--frist-krit);
  text-decoration-skip-ink: none;
}
.spell-popover {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 9rem;
  max-width: 16rem;
  padding: var(--sp-2);
  background: var(--bg-karte);
  border: 1px solid var(--border-stark);
  border-radius: var(--radius-s);
  box-shadow: var(--schatten);
}
.spell-vorschlag,
.spell-ignorieren {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.35rem 0.5rem;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius-s);
  font: inherit;
}
.spell-vorschlag:hover,
.spell-ignorieren:hover { background: var(--accent-zart); }
.spell-ignorieren {
  margin-top: var(--sp-2);
  border-top: 1px solid var(--border);
  color: var(--text-leise);
}
.spell-leer {
  padding: 0.35rem 0.5rem;
  color: var(--text-zart);
  font-style: italic;
}
/* Grammatik (Etappe 29): blaue Wellenlinie, unterscheidbar von der roten
   Rechtschreib-Kringel. Beide Highlights koexistieren auf demselben Feld. */
::highlight(grammatik) {
  text-decoration: underline wavy var(--accent);
  text-decoration-skip-ink: none;
}
/* Erläuterungszeile im Grammatik-Popover (LanguageTool-Meldung). */
.grammar-popover { max-width: 20rem; }
.grammar-msg {
  padding: 0.25rem 0.5rem 0.4rem;
  color: var(--text-leise);
  font-size: 0.88rem;
  line-height: 1.3;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}

/* =====================================================================
   Hilfe: Reiter „Hilfe" / „Prozessbeschreibungen" (geteilt) + Prozess-
   beschreibungen (alles unter .pb gescopet -> kollisionsfrei, strikte CSP
   ohne Inline-Styles). Nutzt ausschließlich vorhandene Tokens.
   ===================================================================== */
.pb { --pb-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  max-width: 64rem; }
.pb .eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 0; }
.pb h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.02em;
  margin: .4rem 0 .35rem; text-wrap: balance; line-height: 1.15; }
.pb .untertitel { color: var(--text-leise); font-size: 1.05rem; margin: 0 0 1.4rem; }
.pb .meta { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; padding: 1rem 1.2rem;
  background: var(--bg-karte); border: 1px solid var(--border);
  border-radius: var(--radius); margin: 0 0 1rem; }
.pb .meta div { display: flex; flex-direction: column; gap: .1rem; }
.pb .meta dt { font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-zart); }
.pb .meta dd { margin: 0; font-size: .92rem; font-weight: 600; }

.pb .banner { display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1.1rem;
  border-radius: var(--radius-s); font-size: .9rem; margin: 0 0 2.4rem;
  background: var(--frist-warn-bg); border: 1px solid var(--frist-warn); }
.pb .banner svg { flex: 0 0 auto; margin-top: .15rem; color: var(--frist-warn); }
.pb .banner strong { color: var(--frist-warn); }

.pb section { margin: 2.6rem 0; scroll-margin-top: 1rem; }
.pb h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .3rem;
  display: flex; align-items: baseline; gap: .6rem; border: 0; padding: 0; }
.pb h2 .nr { font-size: .9rem; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.pb .lead { color: var(--text-leise); margin: .1rem 0 1.2rem; line-height: 1.6; }
.pb .fussnote { font-size: .82rem; margin-top: .8rem; }

.pb .diagramm { background: var(--bg-karte); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; overflow-x: auto;
  box-shadow: var(--schatten); }
.pb .diagramm svg { display: block; min-width: 760px; width: 100%; height: auto; }
.pb .legende { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .9rem 0 0;
  font-size: .8rem; color: var(--text-leise); }
.pb .legende span { display: inline-flex; align-items: flex-start; gap: .4rem; }
.pb .lg-swatch { flex: 0 0 auto; margin-top: 2px; width: 16px; height: 12px; border-radius: 3px; border: 1.5px solid; }
.pb .lg-proc { background: var(--bg-leise); border-color: var(--border-stark); }
.pb .lg-dec { background: var(--bg-leise); border-color: var(--accent);
  transform: rotate(45deg); width: 11px; height: 11px; }
.pb .lg-status { background: var(--accent-zart); border-color: var(--accent); }
.pb .lg-stop { background: var(--frist-krit-bg); border-color: var(--frist-krit); }
.pb .lg-end { background: var(--frist-ok-bg); border-color: var(--frist-ok); }

.pb .fc-box { fill: var(--bg-leise); stroke: var(--border-stark); stroke-width: 1.4; }
.pb .fc-start, .pb .fc-status { fill: var(--accent-zart); stroke: var(--accent);
  stroke-width: 1.8; }
.pb .fc-dec { fill: var(--bg-leise); stroke: var(--accent); stroke-width: 1.6; }
.pb .fc-reject { fill: var(--frist-krit-bg); stroke: var(--frist-krit); stroke-width: 1.5; }
.pb .fc-end { fill: var(--frist-ok-bg); stroke: var(--frist-ok); stroke-width: 1.5; }
.pb .fc-t { fill: var(--text); font: 600 13px var(--schrift); }
.pb .fc-strong { font-weight: 700; }
.pb .fc-sub { fill: var(--text-zart); font: 600 11px var(--schrift); }
.pb .fc-mono { fill: var(--text); font-family: var(--pb-mono); font-weight: 700;
  font-size: 12px; }
.pb .fc-mono-s { font-size: 11px; }
.pb .fc-edge { fill: none; stroke: var(--text-zart); stroke-width: 1.7; }
.pb .fc-arw { fill: var(--text-zart); }
.pb .fc-elbl { fill: var(--text-zart); font: 700 11px var(--schrift); }
.pb .fc-rlbl { fill: var(--frist-krit); font: 700 11px var(--schrift); }

.pb .tw { overflow-x: auto; }
.pb .tabelle { width: 100%; border-collapse: collapse; font-size: .9rem;
  background: var(--bg-karte); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; }
.pb .tabelle th { text-align: left; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-zart); background: var(--bg-leise);
  padding: .6rem .8rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pb .tabelle td { padding: .6rem .8rem; border-bottom: 1px solid var(--border);
  vertical-align: top; }
.pb .tabelle tr:last-child td { border-bottom: none; }
.pb code, .pb .k { font-family: var(--pb-mono); font-size: .82em;
  background: var(--bg-leise); padding: .08em .38em; border-radius: 5px;
  border: 1px solid var(--border); white-space: nowrap; }
.pb .para { font-weight: 700; color: var(--accent); white-space: nowrap; }
/* Verlinkte Fundstelle (→ gesetze-im-internet.de): als klickbar erkennbar. */
.pb .gi-link { color: var(--accent); text-decoration: none;
  border-bottom: 1px dotted currentColor; }
.pb .gi-link:hover, .pb .gi-link:focus { border-bottom-style: solid; }

.pb .karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem; }
.pb .karte { background: var(--bg-karte); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.1rem; }
.pb .karte h3 { margin: 0 0 .3rem; font-size: 1rem; display: flex; align-items: center;
  gap: .5rem; justify-content: space-between; }
.pb .karte h3 .tag { font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 20px;
  padding: .05em .5em; }
.pb .karte p { margin: .15rem 0; font-size: .86rem; color: var(--text-leise); }
.pb .fluss { font-family: var(--pb-mono); font-size: .78rem; color: var(--text);
  background: var(--bg-leise); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: .5rem .6rem; margin-top: .5rem;
  line-height: 1.5; }

.pb .status-pill { display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 700; padding: .15em .6em; border-radius: 20px;
  white-space: nowrap; }
.pb .sp-ok { background: var(--frist-ok-bg); color: var(--frist-ok); }
.pb .sp-entwurf { background: var(--frist-warn-bg); color: var(--frist-warn); }
.pb ul.pruef { list-style: none; padding: 0; margin: 0; display: flex;
  flex-direction: column; gap: .7rem; }
.pb ul.pruef li { display: flex; gap: .7rem; align-items: flex-start;
  background: var(--bg-karte); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: .7rem .9rem; font-size: .9rem; }

.pb .pb-footer { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--border);
  color: var(--text-zart); font-size: .82rem; }

/* Übersicht der Prozessbeschreibungen */
.pb .pb-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin: var(--sp-5) 0 var(--sp-6); }
.pb .pb-intro > div { background: var(--bg-karte); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; box-shadow: var(--schatten-s); }
.pb .pb-intro h2 { font-size: 1.05rem; margin: 0 0 .5rem; border: 0; padding: 0;
  display: block; }
.pb .pb-schritte { list-style: none; margin: .2rem 0 0; padding: 0; display: flex;
  flex-direction: column; gap: .45rem; counter-reset: pbs; }
.pb .pb-schritte li { display: flex; gap: .6rem; font-size: .9rem; color: var(--text);
  align-items: baseline; line-height: 1.45; }
.pb .pb-schritte li::before { counter-increment: pbs; content: counter(pbs);
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent);
  min-width: 1.3em; }
.pb .pb-glossar { list-style: none; margin: .2rem 0 0; padding: 0; display: flex;
  flex-direction: column; gap: .6rem; }
.pb .pb-glossar li { font-size: .88rem; color: var(--text-leise); line-height: 1.5; }
.pb .pb-glossar b { color: var(--text); }
.pb .pb-bereich { font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-zart); margin: var(--sp-5) 0 .1rem; }
@media (max-width: 640px) { .pb .pb-intro { grid-template-columns: 1fr; } }

.pb .pb-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem; margin-top: var(--sp-4); }
.pb .pb-item { display: flex; flex-direction: column; gap: .35rem;
  background: var(--bg-karte); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; text-decoration: none;
  color: var(--text); box-shadow: var(--schatten-s); }
a.pb-item:hover { border-color: var(--accent); }
.pb .pb-item.pb-bald { opacity: .7; box-shadow: none; }
.pb .pb-item-kopf { display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; }
.pb .pb-item-para { font-size: .72rem; font-weight: 700; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 20px; padding: .05em .55em;
  white-space: nowrap; }
.pb .pb-item.pb-bald .pb-item-para { color: var(--text-zart); border-color: var(--border-stark); }
.pb .pb-item h3 { margin: 0; font-size: 1.05rem; }
.pb .pb-item p { margin: 0; font-size: .88rem; color: var(--text-leise); line-height: 1.5; }
.pb .pb-item-mehr { font-size: .85rem; font-weight: 600; color: var(--accent);
  margin-top: .2rem; }

@media (max-width: 640px) { .pb h1 { font-size: 1.6rem; } }