/* FranziskusGPT-Verwaltung — Designsystem übernommen vom IKiM-Projekt-Dashboard */
:root{
  /* Stiftungsfarben (aus dem IKiM-Logo) */
  --blue:#003E77;        /* Stiftungsblau – Hauptfarbe */
  --blue-deep:#002C55;
  --blue-tint:#E4EDF6;
  --yellow:#FFD405;
  --yellow-ink:#8F7400;
  --yellow-tint:#FFF7D1;
  --green:#4DAF45;
  --green-ink:#2F7A29;
  --green-tint:#E7F5E5;
  --lightblue:#70CAF3;
  --purple:#A862A4;
  --red:#B2452F;
  --red-tint:#F9E9E5;
  --gray-ink:#5A6B70;
  --gray-tint:#ECEFF0;

  --bg:#F4F7FA;
  --surface:#FFFFFF;
  --ink:#17262B;
  --ink-soft:#5A6B70;
  --line:#DFE6EC;
  --radius:14px;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}

/* Sanftes Einblenden beim Wechsel von Panels, Detailansichten und Schritten */
@keyframes einblenden{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:14px;color:var(--ink)}
input,select,textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;
}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;
}
input.unsicher{border-color:var(--yellow-ink);background:var(--yellow-tint)}
label{display:block;margin-bottom:11px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft)}
label input,label select,label textarea{margin-top:4px;font-weight:400;letter-spacing:normal;text-transform:none}

/* ---------- Buttons (wie .btn im Dashboard) ---------- */
button, .btn{
  border:1px solid var(--line);background:var(--surface);
  border-radius:9px;padding:7px 13px;font-size:13px;font-weight:600;
  color:var(--ink);transition:border-color .15s,background .15s,color .15s;
}
button:hover{border-color:var(--blue);color:var(--blue)}
button.primaer{background:var(--blue);border-color:var(--blue);color:#fff}
button.primaer:hover{background:var(--blue-deep);color:#fff}
button:disabled{opacity:.55;cursor:wait}
button.gefahr{color:var(--red)}
button.gefahr:hover{border-color:var(--red)}

/* ---------- Kopfbereich (weiß, CI-Streifen in den vier Rautenfarben) ---------- */
header{
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
header::before{
  content:"";display:block;height:4px;
  background:linear-gradient(90deg,
    var(--yellow) 0 25%, var(--green) 25% 50%,
    var(--lightblue) 50% 75%, var(--purple) 75% 100%);
}
.header-inner{
  max-width:1300px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:18px;min-width:0}
/* Maße wie im IKiM-Projekt-Dashboard, damit beide Anwendungen gleich wirken:
   Logo 70px hoch, 18px Abstand zum Titel. Höhe statt Breite vorgeben, dann
   bleibt das Seitenverhältnis erhalten. Fehlt die Datei, entfernt sich das
   Bild selbst (onerror), statt ein kaputtes Symbol zu hinterlassen. */
.marken-logo{height:70px;width:auto;display:block;flex:none}
.login-logo{display:block;height:70px;width:auto;margin:0 0 20px}
.brand .title-block{display:flex;flex-direction:column}
.brand h1{
  font-family:var(--font-display);
  font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--blue);line-height:1.2;
}
.brand .sub{font-size:11.5px;color:var(--ink-soft)}
.hauptnav{display:flex;gap:2px;align-self:stretch;align-items:stretch;margin-left:6px}
.hauptnav a{
  display:flex;align-items:center;padding:6px 14px;margin-bottom:-12px;
  font-size:13.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;
  border-bottom:2px solid transparent;
}
.hauptnav a:hover{color:var(--blue)}
.hauptnav a.aktiv{color:var(--blue);border-bottom-color:var(--blue)}
.header-right{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}

/* Alles in eine Zeile: Das FranziskusGPT-Logo ist querformatig und breit, dazu
   kommen fünf Menüpunkte und die Abmelde-Ecke. Bräche etwas um, entstünde die
   zweite, halbleere Zeile, die im Projekt-Dashboard nicht existiert. Deshalb
   hier kein Umbruch — auf schmalen Schirmen übernimmt das Burger-Menü.
   Diese Blöcke müssen NACH den Grundregeln oben stehen: Bei gleicher
   Spezifität gewinnt die spätere Regel, sonst hebelt .brand .title-block{flex}
   das Ausblenden wieder aus.

   Gemessen brauchte der Kopf 1351px, der Container ist auf 1300 begrenzt — es
   passte also auf keinem Bildschirm, und genau das erzeugte die halbleere
   zweite Zeile. Deshalb fällt hier dauerhaft weg, was doppelt vorhanden ist:
   die Stiftungszeile (steht auf der Anmeldeseite) und die Breite des
   Namensfelds (der volle Name steht unter „Mein Konto"). Damit bleiben rund
   1198px — passt ab 1260px Fensterbreite. */
@media (min-width:901px){
  .header-inner{flex-wrap:nowrap}
  .brand,.hauptnav,.header-right{flex:none}   /* nichts stauchen */
  .header-right{flex-wrap:nowrap}
  .brand .sub{display:none}
  .hauptnav a{padding:6px 11px}
  /* Deckel, damit ein langer Name den Kopf nicht doch noch sprengt */
  .role-label{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* Darunter wird es eng: Bis 1259px fallen zusätzlich Titel und Namensfeld weg,
   damit alle fünf Menüpunkte vollständig sichtbar bleiben. */
@media (min-width:901px) and (max-width:1259px){
  .brand .title-block{display:none}
  .header-right .role-label{display:none}
  .hauptnav a{padding:6px 10px}
}

/* Burger-Knopf — erst unter 900px sichtbar (siehe Mobil-Block am Dateiende) */
.nav-knopf{display:none;flex-direction:column;justify-content:center;align-items:stretch;
  gap:4px;width:42px;height:38px;padding:0 10px;border-radius:9px;flex:none}
.nav-knopf span{display:block;height:2px;background:var(--blue);border-radius:2px;
  transition:transform .15s,opacity .15s}
header.nav-offen .nav-knopf span:nth-child(1){transform:translateY(6px) rotate(45deg)}
header.nav-offen .nav-knopf span:nth-child(2){opacity:0}
header.nav-offen .nav-knopf span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.role-label{
  font-size:12px;font-weight:600;background:var(--blue-tint);color:var(--blue);
  border-radius:999px;padding:5px 12px;white-space:nowrap;
}

/* ---------- Login ---------- */
.login-seite{display:grid;place-items:center;min-height:100vh;background:var(--bg)}
.login-box{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:0 0 26px;width:370px;overflow:hidden;
}
.login-box::before{
  content:"";display:block;height:4px;
  background:linear-gradient(90deg,
    var(--yellow) 0 25%, var(--green) 25% 50%,
    var(--lightblue) 50% 75%, var(--purple) 75% 100%);
}
.login-innen{padding:28px 30px 0}
.login-box h1{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--blue);margin:0 0 4px}
.login-box .sub{font-size:12px;color:var(--ink-soft);display:block;margin-bottom:20px}
.login-box button{width:100%;margin-top:8px;padding:10px}
.hinweis{font-size:12px;color:var(--ink-soft);margin-top:14px}
.login-fehler{background:var(--red-tint);color:var(--red);border-radius:8px;
  padding:8px 10px;font-size:13px;margin-bottom:10px}

/* ---------- Hauptbereich ---------- */
main{max-width:1300px;margin:0 auto;padding:40px 24px 72px;width:100%;flex:1}

/* Seitenkopf: Titel links, Aktion rechts */
.seiten-kopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:24px}
.seiten-kopf h2{font-family:var(--font-display);font-size:22px;font-weight:700;
  color:var(--blue);margin:0 0 2px}
.untertitel{color:var(--ink-soft);font-size:13.5px;margin:0;max-width:74ch}
.btn-link{display:inline-block;text-decoration:none;border:1px solid var(--line);
  background:var(--surface);border-radius:9px;padding:8px 14px;font-size:13px;
  font-weight:600;color:var(--ink);transition:border-color .15s,color .15s,background .15s}
.btn-link:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-tint)}
.abschnitt{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink);
  margin:4px 0 10px}
.abschnitt-zusatz{font-family:var(--font-body);font-weight:500;color:var(--ink-soft);font-size:13px}
.karte{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:16px;box-shadow:0 1px 3px rgba(23,38,43,.04)}
.karte h4{font-family:var(--font-display);font-size:14.5px;color:var(--blue);margin:0 0 12px}
.karte-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hinweis-klein{font-size:12px;color:var(--ink-soft);margin-top:10px;line-height:1.5}
.panel{display:none}
.panel.active{display:block;animation:einblenden .18s ease-out}
code.klein{font-size:11px;background:var(--gray-tint);padding:1px 5px;border-radius:4px}

/* Übersichtsleiste — große Zahlen wie im Projekt-Dashboard */
.summary{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.summary .tile{
  flex:1 1 140px;min-width:0;text-align:left;display:block;font:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px;transition:border-color .12s,background .12s,box-shadow .12s,transform .12s;
  box-shadow:0 1px 3px rgba(23,38,43,.04);
}
.summary .tile:hover{border-color:var(--blue);background:var(--blue-tint);
  transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,62,119,.10)}
.summary .tile.statisch:hover{transform:none;border-color:var(--line);
  background:var(--surface);box-shadow:0 1px 3px rgba(23,38,43,.04)}
.summary .tile:active{transform:translateY(1px)}
.summary .tile.active{border-color:var(--blue);background:var(--blue-tint);box-shadow:inset 0 0 0 1px var(--blue)}
.summary .tile .num{transition:color .2s;
  font-family:var(--font-display);font-size:30px;font-weight:700;line-height:1.1;
  color:var(--blue);
}
.summary .tile .lbl{font-size:12.5px;color:var(--ink-soft);font-weight:500}
.summary .tile.t-antrag .num{color:var(--green-ink)}
.summary .tile.t-support .num{color:var(--purple)}
.summary .tile.t-unsicher .num{color:var(--red)}
.summary .tile.t-rueckfrage .num{color:var(--yellow-ink)}
.summary .tile.t-erledigt .num{color:var(--gray-ink)}

/* ---------- Warteschlange ---------- */
.inhalt-spalten{display:grid;grid-template-columns:380px 1fr;gap:16px;align-items:start}
#liste-bereich{display:flex;flex-direction:column;min-height:0}
.filter{display:flex;gap:8px;margin-bottom:10px}
.filter select{flex:1}
.filter button{flex:0 0 auto}
#liste{
  list-style:none;padding:6px;overflow-y:auto;max-height:calc(100vh - 320px);min-height:200px;
  background:var(--surface);border-radius:var(--radius);border:1px solid var(--line);
}
#liste li{
  display:flex;align-items:center;gap:10px;padding:11px 10px;
  border-radius:9px;cursor:pointer;border:1px solid transparent;
}
#liste li + li{margin-top:2px}
#liste li:hover{background:var(--blue-tint)}
#liste li.aktiv{background:var(--blue-tint);border-color:var(--blue)}
#liste li.leer-hinweis{color:var(--ink-soft);cursor:default;justify-content:center;padding:24px}
.betreff{font-weight:600;font-size:13.5px}
.unterzeile{font-size:12px;color:var(--ink-soft);margin-top:1px}

.typ-kennzeichen{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  border-radius:999px;padding:3px 9px;flex:0 0 auto;
}
.typ-kennzeichen.antrag{background:var(--green-tint);color:var(--green-ink);border:1px solid var(--green)}
.typ-kennzeichen.support{background:#F3E9F2;color:var(--purple);border:1px solid var(--purple)}
.typ-kennzeichen.sonstiges{background:var(--gray-tint);color:var(--gray-ink);border:1px solid var(--line)}

.ampel{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.ampel.gruen{background:var(--green)}
.ampel.gelb{background:var(--yellow)}
.ampel.rot{background:var(--red)}
.ampel.grau{background:#B8C4CB}
.ampel-text.gruen{color:var(--green-ink);font-weight:700}
.ampel-text.gelb{color:var(--yellow-ink);font-weight:700}

/* Status-Badge im Detailkopf */
.status-badge{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  border-radius:999px;padding:3px 9px;vertical-align:middle;
}
.status-badge.offen{background:var(--blue-tint);color:var(--blue)}
.status-badge.rueckfrage{background:var(--yellow-tint);color:var(--yellow-ink)}
.status-badge.erledigt{background:var(--green-tint);color:var(--green-ink)}
.status-badge.abgelehnt{background:var(--red-tint);color:var(--red)}

/* ---------- Detail ---------- */
#detail>*{animation:einblenden .18s ease-out}
#detail{background:var(--surface);border-radius:var(--radius);border:1px solid var(--line);
  padding:20px 22px}
#detail.leer{display:grid;place-items:center;min-height:300px}
.platzhalter{color:var(--ink-soft)}
.detail-kopf{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.detail-kopf h2{font-family:var(--font-display);margin:0 0 4px;font-size:17px;color:var(--blue)}
.detail-kopf .meta{font-size:12.5px;color:var(--ink-soft);margin-bottom:8px}
.typ-wechsel{font-size:13px;color:var(--ink-soft)}
.typ-wechsel select{width:auto;padding:5px 8px;margin-left:4px}
.detail-spalten{display:grid;grid-template-columns:1fr 390px;gap:20px;min-height:480px}
.pdf-rahmen{width:100%;height:100%;min-height:480px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg)}
.kollision{background:var(--red-tint);color:var(--red);border:1px solid var(--red);
  border-radius:8px;padding:9px 11px;margin-bottom:12px;font-size:13px}
.konfidenz-zeile{font-size:13px;margin-bottom:12px;color:var(--ink-soft)}
.upn-hinweis{display:block;margin-top:5px;font-size:12px;font-weight:400;
  letter-spacing:normal;text-transform:none;color:var(--yellow-ink)}
.upn-uebernehmen{padding:2px 8px;font-size:12px;font-family:Consolas,monospace}
.probleme{list-style:none;padding:10px 13px;margin:12px 0;background:var(--yellow-tint);
  border-radius:8px;font-size:13px;border:1px solid var(--yellow)}
.probleme:empty{display:none}
.probleme li{margin:2px 0}
.probleme li.ok{color:var(--green-ink);font-weight:600}
.probleme.gruen-rand{background:var(--green-tint);border-color:var(--green)}
.aktionen{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.rueckfrage-bereich{margin-top:12px}
.rueckfrage-bereich button{margin-top:8px}
.ergebnis{margin-top:14px;font-size:14px;font-weight:600}
.ergebnis.ok{color:var(--green-ink)}
.ergebnis.fehler{color:var(--red)}
/* Muss jede spätere display-Regel schlagen: Bei gleicher Spezifität gewinnt
   sonst die weiter unten stehende — ein .editor-huelle{display:flex} machte
   das Verstecken damit wirkungslos, und der Kasten stand offen im Bild. */
.versteckt{display:none !important}

/* ---------- Überblick auf der Startseite ---------- */
.ueberblick{margin-bottom:28px}
/* Vier Kacheln in einer Zeile, seit sie neben dem Seitenmenü stehen und der
   Platz knapper ist. Drei plus eine umgebrochene sähe schief aus. */
.ueberblick-haupt{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:14px}
.tile.gross{
  display:block;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;transition:border-color .12s,background .12s,transform .06s;
}
a.tile.gross:hover{border-color:var(--blue);background:var(--blue-tint)}
a.tile.gross:active{transform:translateY(1px)}
.tile.gross.statisch{cursor:default}
.tile.gross .num{font-family:var(--font-display);font-size:34px;font-weight:700;
  line-height:1.05;color:var(--blue)}
.tile.gross .lbl{font-size:13px;color:var(--ink-soft);font-weight:600;margin-top:2px}
.tile.gross .zusatz{font-size:12px;color:var(--ink-soft);margin-top:8px;
  padding-top:8px;border-top:1px solid var(--line);line-height:1.45}
.tile.gross.warnung{border-color:var(--yellow);background:var(--yellow-tint)}
.tile.gross.warnung .num{color:var(--yellow-ink)}
.systemzeile{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  margin-top:14px;font-size:12px;color:var(--ink-soft)}
.sys{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.sys.gruen{color:var(--green-ink)}
.sys.gelb{color:var(--yellow-ink)}
.sys.rot{color:var(--red);font-weight:600}
.sys.hinweis{white-space:normal;max-width:70ch}

/* Alle Aktionen einer Seite gehören zusammen oben rechts, nicht verstreut
   zwischen den Inhalten. */
.kopf-aktionen{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  justify-content:flex-end}
.kopf-aktionen button,.kopf-aktionen .btn-link{font-size:12.5px;padding:7px 13px}
/* Abrufleiste der Warteschlange: Knöpfe rechts, darunter rechtsbündig der
   Stand des letzten Laufs — der Zeitstempel steht damit an dem Knopf, der ihn
   fortschreibt, statt in der Kopfzeile über allen Seiten. */
.abrufleiste{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-bottom:18px}
.abrufleiste .systemzeile{margin-top:0;justify-content:flex-end}
.abrufleiste .job-meldung{text-align:right}
.job-meldung{font-size:12.5px;line-height:1.5}
.job-meldung:not(:empty){margin:-12px 0 18px}
.abrufleiste .job-meldung:not(:empty){margin:2px 0 0}
.job-meldung.ok{color:var(--green-ink);font-weight:600}
.job-meldung.fehler{color:var(--red)}
.job-meldung details{margin-top:4px;font-weight:400}
.job-meldung summary{cursor:pointer;color:var(--ink-soft)}
.job-meldung pre{background:var(--gray-tint);border-radius:6px;padding:8px 10px;margin-top:5px;
  white-space:pre-wrap;word-break:break-word;font-family:Consolas,monospace;font-size:11.5px;
  color:var(--ink);max-width:70ch}

.setup-banner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--yellow-tint);border:1px solid var(--yellow);border-radius:var(--radius);
  padding:14px 18px;margin-bottom:20px;font-size:13.5px;line-height:1.5;
}
.setup-banner b{color:var(--yellow-ink)}

/* ---------- Einrichtungsassistent ---------- */
.setup-haupt{max-width:1180px}
.setup-layout{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}
.setup-fortschritt{position:sticky;top:96px}
.setup-fortschritt h2{font-family:var(--font-display);font-size:18px;color:var(--blue);margin-bottom:14px}
#schrittliste{list-style:none;counter-reset:schritt;display:flex;flex-direction:column;gap:2px}
#schrittliste li{
  display:flex;gap:11px;padding:10px 12px;border-radius:9px;cursor:pointer;
  font-size:13px;align-items:flex-start;border:1px solid transparent;
}
#schrittliste li:hover{background:var(--blue-tint)}
#schrittliste li.aktuell{background:var(--blue-tint);border-color:var(--blue)}
#schrittliste li b{display:block;font-weight:600;color:var(--ink)}
#schrittliste li .zusatz{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:1px;line-height:1.4}
#schrittliste .haken{
  flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;border:1.5px solid var(--line);color:var(--ink-soft);margin-top:1px;
}
#schrittliste li.erledigt .haken{background:var(--green);border-color:var(--green);color:#fff}
#schrittliste li.offen .haken{border-color:var(--blue);border-style:dashed}
#schrittliste li.optional .haken{color:var(--ink-soft)}

.setup-inhalt .setup-schritt{display:none}
.setup-inhalt .setup-schritt.aktiv{display:block;animation:einblenden .2s ease-out}
.setup-schritt h3{font-family:var(--font-display);font-size:18px;color:var(--blue);margin-bottom:6px}
.setup-schritt .untertitel{margin-bottom:16px}
.setup-schritt .optional{font-family:var(--font-body);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;background:var(--gray-tint);color:var(--gray-ink);
  border-radius:999px;padding:3px 9px;vertical-align:middle;margin-left:6px}
.feld-reihe.drei{grid-template-columns:1fr 1fr 1fr}
.anleitung{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin-bottom:16px;font-size:13px}
.anleitung summary{cursor:pointer;font-weight:600;color:var(--blue);padding:2px 0}
.anleitung summary:hover{color:var(--blue-deep)}
.anleitung ol,.anleitung ul{margin:8px 0 2px 18px;display:flex;flex-direction:column;
  gap:6px;line-height:1.55}
.anleitung code{background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;font-size:12px;white-space:nowrap}
.anleitung-vorwort{margin:10px 0 4px;color:var(--ink-soft);line-height:1.55}
.anleitung-block{background:var(--surface);border:1px solid var(--line);border-radius:9px;
  padding:11px 14px;margin-top:10px}
.anleitung-block h5{font-family:var(--font-display);font-size:13px;color:var(--blue);
  margin-bottom:6px;letter-spacing:.01em}
.anleitung-block p{line-height:1.55}
.anleitung-block b{color:var(--ink)}
.beiseite{display:block;color:var(--ink-soft);font-size:12px;margin-top:2px}
.anleitung-merken{margin-top:8px;padding:7px 10px;background:var(--yellow-tint);
  border-radius:7px;font-size:12.5px;color:var(--yellow-ink)}
.perm-liste{list-style:none;margin-left:0 !important}
.perm-liste li{padding-left:0}
.entscheidung{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin:16px 0}
.entscheidung p{margin-bottom:10px;font-size:13.5px}
.radio-zeile{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;
  font-size:13px;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--ink);cursor:pointer}
.radio-zeile input{width:auto;margin-top:3px;flex:none}
.radio-zeile code{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:12px}
.warnung-kasten{background:var(--yellow-tint);border:1px solid var(--yellow);border-radius:9px;
  padding:12px 14px;margin-bottom:14px;font-size:12.5px;line-height:1.55}
.warnung-kasten code{background:var(--surface);border-radius:4px;padding:1px 5px}
.testergebnis{margin-top:14px;font-size:13px;line-height:1.55}
.testergebnis.ok{color:var(--green-ink)}
.testergebnis.fehler{color:var(--red)}
.pruefzeile{padding:8px 0;border-bottom:1px solid var(--line)}
.pruefzeile:last-child{border-bottom:none}
.pruefzeile.ok{color:var(--green-ink)}
.pruefzeile.fehler{color:var(--red)}
.pruefzeile.hinweis{color:var(--ink-soft)}
.pruef-kopf{font-weight:700;margin-bottom:6px}
.pruef-titel{font-weight:600}
.pruef-info{color:var(--ink);margin-top:3px;line-height:1.55;font-weight:400}
.pruefzeile.ok .pruef-info{color:var(--ink-soft)}
.pruef-hinweis{color:var(--ink-soft);margin-top:4px;font-size:12.5px;line-height:1.5}
.pruef-roh{margin-top:6px;font-size:12px}
.pruef-roh summary{cursor:pointer;color:var(--ink-soft)}
.pruef-roh pre{background:var(--gray-tint);border-radius:6px;padding:8px 10px;margin-top:5px;
  white-space:pre-wrap;word-break:break-word;font-family:Consolas,monospace;font-size:11.5px;
  color:var(--ink)}
.anleitung-block.gleiches{border-left:3px solid var(--green)}
.anleitung-block.getrennt{border-left:3px solid var(--blue)}
.anleitung-kernsatz{background:var(--blue-tint);border-radius:8px;padding:10px 12px;
  margin-bottom:10px;line-height:1.6}
.anleitung-schritte{margin-top:8px}
.anleitung-schritte li{padding-bottom:2px}
.werte-tabelle{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:8px}
.werte-tabelle th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft);padding:6px 10px 6px 0;
  border-bottom:1px solid var(--line)}
.werte-tabelle td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.5}
.werte-tabelle tr:last-child td{border-bottom:none}
.werte-tabelle td:first-child{white-space:nowrap;color:var(--blue)}
.werte-tabelle code{white-space:normal;word-break:break-all}
.erledigt-hinweis{background:var(--green-tint);border:1px solid var(--green);border-radius:9px;
  padding:11px 13px;font-size:13px;color:var(--green-ink)}
.erledigt-hinweis a{color:var(--green-ink)}
.job-karte{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;margin-bottom:12px}
.job-karte.dringend{background:var(--yellow-tint);border-color:var(--yellow)}
.job-karte h4{font-family:var(--font-display);font-size:14px;margin-bottom:4px;color:var(--ink)}
.job-karte p{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:8px}
.setup-schritt pre{background:var(--ink);color:#E8EEF2;border-radius:8px;padding:10px 13px;
  font-size:12.5px;overflow-x:auto;margin:0}
.setup-schritt pre code{font-family:Consolas,monospace}
.abschluss-liste{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.abschluss-liste li{font-size:13.5px;line-height:1.55;padding-left:20px;position:relative}
.abschluss-liste li::before{content:"→";position:absolute;left:0;color:var(--blue);font-weight:700}
.btn-link.primaer-link{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-link.primaer-link:hover{background:var(--blue-deep);color:#fff}

/* Unterschriftsbefund — Hinweis, kein Ausschlusskriterium (Briefing 4.4) */
.unterschrift-zeile{border-radius:9px;padding:10px 12px;margin-bottom:12px;font-size:12.5px;
  line-height:1.5;border:1px solid}
.unterschrift-zeile.ok{background:var(--green-tint);border-color:var(--green);color:var(--green-ink)}
.unterschrift-zeile.fehlt{background:var(--red-tint);border-color:var(--red);color:var(--red)}
.unterschrift-zeile.unklar{background:var(--bg);border-color:var(--line);color:var(--ink-soft)}
.us-titel{font-weight:700;margin-bottom:3px}
.bescheinigung-zeile{border-radius:9px;padding:10px 12px;margin-bottom:12px;font-size:12.5px;
  border:1px solid var(--yellow);background:var(--yellow-tint);color:var(--yellow-ink)}
.bescheinigung-zeile button{margin-top:8px}
.check-zeile{display:flex;align-items:center;gap:8px;font-size:13px;margin:8px 0;
  cursor:pointer;user-select:none}
.check-zeile input{width:auto}
.us-grund{color:inherit}
.us-hinweis{margin-top:5px;opacity:.85}

/* Mailentwurf vor dem Versand */
.mailentwurf-bereich{margin-top:12px;padding:14px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;animation:einblenden .18s ease-out}
.mailentwurf-bereich .mail-text{font-family:Consolas,monospace;font-size:12.5px;line-height:1.6}
.platzhalter-hinweis{display:block;margin-top:4px;color:var(--yellow-ink)}

/* ---------- Support-Triage ---------- */
/* Drei Bänder: Eingang → Verarbeitung → Ausgabe. Jedes trägt eine Nummer und
   eine Kurzfassung im Kopf; Einzelheiten stecken in aufklappbaren Blöcken.
   Die Ordnung des Vorgangs ist damit sichtbar, statt in einer Datenwand zu
   verschwinden. */
/* Jedes Band ein abgegrenzter Kasten im selben Blau wie die ausgewählte
   Anfrage in der Liste — man sieht auf einen Blick, wo ein Bereich anfängt
   und aufhört, ohne dass Farben um Aufmerksamkeit konkurrieren. */
.band{position:relative;margin-bottom:14px;padding:12px 16px;
  background:var(--blue-tint);border:1px solid var(--line);border-radius:12px}
.band-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 10px}
.band.zu .band-kopf{margin-bottom:0}
.band-kopf h3{font-family:var(--font-display);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--blue);margin:0}
.band-nr{display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;font-size:11px;font-weight:700;
  background:var(--surface);color:var(--blue);flex:none}
/* Karten im Band bleiben weiß, damit sie sich vom Blau abheben */
.band .karte-innen,.band .aufklapp,.band .pruefliste-karte,.band .antwort-karte{
  background:var(--surface)}

/* Auffälligkeiten als kleine Zeichen rechts im Kopf — nur was vom Normalfall
   abweicht. »Konto aktiv« ist der Normalfall und braucht kein Abzeichen. */
.band-marken{display:flex;gap:5px;align-items:center;margin-left:auto}
.marke{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:700;
  cursor:default;flex:none}
.marke.warnung{background:var(--yellow-tint);color:var(--yellow-ink)}
.marke.fehler{background:var(--red-tint);color:var(--red)}
.marke.unklar{background:var(--gray-tint);color:var(--gray-ink)}
.band-zusatz{font-size:12px;color:var(--ink-soft);margin-left:auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}

/* Einklappen: Der Kopf bleibt stehen, der Rest verschwindet. Ohne Animation
   der Höhe — die erzeugt genau das Springen, das vermieden werden soll. */
.band-kopf{cursor:pointer;user-select:none;border-radius:8px;padding:3px 6px;
  margin-left:-6px;transition:background .12s}
.band-kopf:hover{background:var(--gray-tint)}
.band-klapp{width:0;height:0;border-left:5px solid var(--ink-soft);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transform:rotate(90deg);transition:transform .15s;flex:none;margin-right:2px}
.band.zu .band-klapp{transform:rotate(0deg)}
.band.zu > *:not(.band-kopf){display:none}
/* Weiches Aufblenden beim Weiterklicken — kurz, damit es nicht bremst */
.band.frisch-offen > *:not(.band-kopf){animation:einblenden .18s ease-out}
.weiter-zeile{display:flex;justify-content:flex-end;margin-top:10px}
.btn-weiter{font-size:12.5px;padding:6px 14px;background:var(--surface);
  border-color:var(--blue);color:var(--blue);font-weight:600}
.btn-weiter:hover{background:var(--blue);color:#fff}
.band.zu{margin-bottom:8px}
.band.zu .band-zusatz{color:var(--ink)}


/* Die Zuordnungsfrage: die wichtigste Entscheidung im Verarbeitungsband,
   deshalb offen und farbig statt eingeklappt. */
.zuordnung-box{border-radius:10px;padding:12px 14px;margin-bottom:12px}
.zuordnung-box.offen{background:var(--yellow-tint);border:1px solid var(--yellow)}
.zuordnung-box.erledigt{background:var(--green-tint);border:1px solid var(--green);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 14px}
.zo-frage{font-size:13px;font-weight:700;color:var(--yellow-ink);margin-bottom:9px}
.zo-treffer{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  width:100%;text-align:left;margin-bottom:6px;padding:8px 12px;background:var(--surface)}
.zo-treffer b{font-size:13px}
.zo-treffer span{font-size:11.5px;color:var(--ink-soft);font-weight:400}
.zo-treffer.inaktiv{opacity:.65}
.zo-mehr{font-size:12px;padding:4px 10px;background:none;border-style:dashed}
.zo-zeile{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--green-ink);
  font-weight:600}
.zo-haken{font-weight:700}
.zo-aendern{font-size:11.5px;padding:3px 9px;margin-left:auto}

/* Empfänger: gehört ins Blickfeld, nicht ins Kleingedruckte */
.empfaenger-feld{display:flex;align-items:flex-end;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.empf-label{flex:1;min-width:230px;margin-bottom:0}
.empfaenger-feld .support-an,.empfaenger-feld .empf-auswahl{
  font-family:Consolas,monospace;font-size:13px}
.empf-quelle{font-size:11.5px;color:var(--ink-soft);margin:2px 0 8px}
.empfaenger-warnung{font-size:12px;border-radius:7px;padding:7px 10px;margin-bottom:12px;
  line-height:1.5}
.empfaenger-warnung.hinweis{background:var(--blue-tint);color:var(--blue)}
.empfaenger-warnung.warnung{background:var(--yellow-tint);color:var(--yellow-ink);font-weight:600}
.empfaenger-warnung.fehler{background:var(--red-tint);color:var(--red);font-weight:600}

/* Aufklappbare Einzelheiten — geschlossen ist der Normalfall */
.aufklapp{border:1px solid var(--line);border-radius:10px;background:var(--surface);
  margin-bottom:12px}
.aufklapp > summary{cursor:pointer;padding:10px 13px;font-size:12.5px;font-weight:600;
  color:var(--blue);user-select:none;list-style-position:inside}
.aufklapp[open] > summary{border-bottom:1px solid var(--line)}
.aufklapp .kontext-scroll,.aufklapp > .schnell-leiste,.aufklapp .vorschlaege-liste{
  padding:12px 13px}
.kontext-details .kontext-scroll{max-height:340px;overflow-y:auto}

.karte-innen.hoch{max-height:300px;display:flex;flex-direction:column;
  position:relative;min-width:0}
.karte-innen.hoch .anfrage-text{flex:1;min-height:0;max-height:none}
.kontext-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:4px}
.kontext-scroll .frueher-karte{margin-top:14px;padding-top:10px;
  border-top:1px solid var(--line)}
.antwort-karte{margin-bottom:14px}
.karte-innen{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.karte-innen h4{font-family:var(--font-display);font-size:13.5px;color:var(--blue);margin-bottom:10px}
.anfrage-text{white-space:pre-wrap;font-family:inherit;font-size:13px;line-height:1.6;
  max-height:280px;overflow-y:auto;color:var(--ink)}
.klassen-schild{display:inline-block;margin-left:10px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;border-radius:999px;padding:3px 10px}
.klassen-schild.klasse-a{background:var(--green-tint);color:var(--green-ink);border:1px solid var(--green)}
.klassen-schild.klasse-b{background:var(--red-tint);color:var(--red);border:1px solid var(--red)}
.kategorie-select{width:auto;padding:4px 8px}

.kontext-karte .dl-zeile{grid-template-columns:46% 1fr;font-size:12.5px}
.kontext-karte .dl-zeile.auffaellig b{color:var(--red)}
.kontext-warnung{background:var(--red-tint);color:var(--red);border-radius:8px;padding:10px 12px;
  font-size:12.5px;line-height:1.5}
.absender-pruefung{margin-top:10px;padding:8px 10px;border-radius:8px;font-size:12.5px;
  line-height:1.45}
.absender-pruefung.ok{background:var(--green-tint);color:var(--green-ink)}
.absender-pruefung.warnung{background:var(--yellow-tint);color:var(--yellow-ink);font-weight:600}
.absender-pruefung.unklar{background:var(--gray-tint);color:var(--gray-ink)}
.frueher-liste{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.frueher-liste li span{color:var(--ink-soft);margin-right:6px;font-variant-numeric:tabular-nums}
.frueher-liste li i{color:var(--ink-soft)}

/* Sachlich statt alarmiert: weißer Grund, ein roter Streifen links als Merker.
   Eine ganzflächig rote Karte schreit dauerhaft, auch wenn nichts falsch ist. */
.pruefliste-karte{background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--red);border-radius:10px;
  padding:14px 16px}
.pruefliste-karte h4{font-family:var(--font-display);font-size:13.5px;color:var(--ink);margin-bottom:8px}
.pruefliste-karte .bereich-hinweis{color:var(--ink-soft)}
.pruefliste li{border:1px solid var(--line)}
/* Quer statt untereinander: Die Prüfschritte teilen sich die volle Breite */
.pruefliste{list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin:12px 0}
.pruefliste li{background:var(--surface);border-radius:8px;padding:10px 12px}
.pruefliste-karte{margin-bottom:14px}
.pruefliste .ankreuz{margin-bottom:0;align-items:flex-start}
.pruefliste .ankreuz input{margin-top:2px}
.schritt-bestaetigt{font-size:11.5px;color:var(--green-ink);margin-top:5px;margin-left:26px}
.konto-aktionen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.reset-ergebnis{font-size:12.5px;font-weight:600}
.reset-ergebnis.ok{color:var(--green-ink)}
.reset-ergebnis.fehler{color:var(--red)}

.vorschlaege-karte{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px}
.vorschlaege-karte h4{font-family:var(--font-display);font-size:13.5px;color:var(--blue);margin-bottom:10px}
.vorschlaege-liste{display:flex;flex-direction:column;gap:10px}
.vorschlag{border:1px solid var(--line);border-radius:9px;padding:11px 13px;background:var(--bg)}
.vorschlag-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-bottom:6px;flex-wrap:wrap}
.vorschlag-kopf b{font-size:13px}
.vorschlag-quelle{font-size:11px;color:var(--ink-soft);white-space:nowrap}
.vorschlag-text{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:8px;
  white-space:pre-wrap}
.vorschlag button{padding:4px 12px;font-size:12px}
.support-text{font-family:inherit;font-size:13px;line-height:1.6}

@media (max-width:1100px){
  .support-oben{grid-template-columns:1fr}
  .karte-innen.hoch{height:auto;max-height:400px}
}

/* Vorschläge leben im Antwort-Editor: aufklappbar, mit Anzahl im Kopf */
.vorschlaege-details{margin:2px 0 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface)}
.vorschlaege-details summary{cursor:pointer;padding:9px 12px;font-size:13px;
  font-weight:600;color:var(--blue);user-select:none}
.vorschlaege-details[open] summary{border-bottom:1px solid var(--line)}
.vorschlaege-details .vorschlaege-liste{padding:10px 12px}

/* Scroll-Hinweis: eingekreister Pfeil, klickbar, dreht am Ende nach oben */
.scroll-pfeil{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;
  width:32px;height:32px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 3px 10px rgba(23,38,43,.18);color:var(--blue);
  font-size:15px;font-weight:700;z-index:6}
.scroll-pfeil:hover{border-color:var(--blue)}
.scroll-pfeil.oben{bottom:auto;top:40px}

/* ---------- Aktionsbereiche in der Warteschlange ---------- */
.bereich-hinweis{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin-bottom:10px}
.bereich-hinweis.warnend{background:var(--red-tint);color:var(--red);border-radius:8px;
  padding:10px 12px}
.schliessen-bereich,.loeschen-bereich{margin-top:12px;padding:14px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;animation:einblenden .18s ease-out}
.schliessen-bereich select,.schliessen-bereich input{margin-bottom:8px}
.ankreuz{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:400;
  text-transform:none;letter-spacing:normal;color:var(--ink);margin-bottom:10px;cursor:pointer}
.ankreuz input{width:auto;margin:0;flex:none}
.loeschen-bereich button{margin-right:8px}

.kopf-knoepfe{display:flex;gap:6px;flex-wrap:wrap}
.sig-mailliste{display:flex;flex-direction:column;gap:6px}
.sig-mail{text-align:left;width:100%;padding:10px 12px;background:var(--surface);
  border:1px solid var(--line);border-radius:9px;cursor:pointer}
.sig-mail:hover{border-color:var(--blue);background:var(--blue-tint)}
.sig-mail b{display:block;font-size:13.5px;font-weight:600}
.sig-mail span{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px}

/* ---------- Mailvorschau ---------- */
.vorschau-huelle{position:fixed;inset:0;background:rgba(23,38,43,.45);z-index:100;
  display:grid;place-items:center;padding:24px;animation:einblenden .15s ease-out}
.vorschau-kasten{background:var(--surface);border-radius:var(--radius);width:min(760px,100%);
  max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.vorschau-kopf{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--line)}
.vorschau-kopf b{font-family:var(--font-display);color:var(--blue);font-size:15px}
.vorschau-kopf select{width:auto;margin-left:auto}
.vorschau-hinweis{padding:9px 18px;font-size:12.5px;color:var(--ink-soft);
  background:var(--bg);border-bottom:1px solid var(--line)}
.vorschau-hinweis.ok{color:var(--green-ink)}
.vorschau-inhalt{overflow-y:auto;padding:18px;flex:1}
.vorschau-rahmen{width:100%;min-height:460px;border:1px solid var(--line);border-radius:8px;
  background:#fff}
.vorschau-text{white-space:pre-wrap;font-family:Consolas,monospace;font-size:12.5px;
  line-height:1.6;color:var(--ink)}

/* ---------- Tabellen ---------- */
.tabellen-karte{padding:0;overflow:hidden}
.datentabelle{width:100%;border-collapse:collapse;font-size:13.5px}
.datentabelle th{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);padding:10px 14px;border-bottom:1px solid var(--line);
  background:var(--bg);position:sticky;top:0;z-index:1;
}
.datentabelle td{padding:9px 14px;border-bottom:1px solid var(--line)}
.datentabelle tbody tr:last-child td{border-bottom:none}
.datentabelle th.num, .datentabelle td.num{text-align:right;font-variant-numeric:tabular-nums}
.datentabelle tfoot td{padding:10px 14px;border-top:2px solid var(--line);font-weight:700;
  background:var(--bg);font-variant-numeric:tabular-nums}
.datentabelle tfoot td.num{text-align:right}
.datentabelle .leer-hinweis{color:var(--ink-soft);text-align:center;padding:26px}
.eingabe-tabelle input{padding:5px 8px;font-size:13px}
.eingabe-tabelle td{padding:5px 10px}
.eingabe-tabelle td.num input{text-align:right}

/* ---------- Nutzerverwaltung ---------- */
.filterleiste{display:grid;grid-template-columns:2fr 1.3fr 1fr .8fr;gap:10px;
  padding:14px 16px;margin-bottom:16px}
.nutzer-spalten{display:grid;grid-template-columns:1fr 420px;gap:16px;align-items:start}
.nutzer-spalten .tabellen-karte{max-height:calc(100vh - 330px);overflow-y:auto}
.datentabelle tbody tr{cursor:pointer}
.datentabelle tbody tr:hover{background:var(--blue-tint)}
.datentabelle tbody tr.aktiv{background:var(--blue-tint);box-shadow:inset 3px 0 0 var(--blue)}
.datentabelle tbody tr.inaktiv{opacity:.5}
.t-name{font-weight:600}
.t-upn{font-size:12.5px;color:var(--ink-soft)}
.herkunft{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  border-radius:999px;padding:2px 8px;white-space:nowrap}
.herkunft.alt{background:var(--gray-tint);color:var(--gray-ink)}
.herkunft.neu{background:var(--green-tint);color:var(--green-ink)}
.tabellen-fuss{font-size:12px;color:var(--ink-soft);padding:10px 14px;border-top:1px solid var(--line);margin:0}
.nutzer-detail{position:sticky;top:96px;max-height:calc(100vh - 130px);overflow-y:auto}
.nutzer-detail.leer{display:grid;place-items:center;min-height:220px}
.nutzer-detail h3{font-family:var(--font-display);font-size:17px;color:var(--blue);margin:0 0 14px}
.nutzer-detail h4{font-family:var(--font-display);font-size:13px;color:var(--ink);
  margin:18px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.detail-block{display:flex;flex-direction:column;gap:6px}
.dl-zeile{display:grid;grid-template-columns:44% 1fr;gap:10px;font-size:13px;align-items:baseline}
.dl-zeile span{color:var(--ink-soft)}
.dl-zeile b{font-weight:600;word-break:break-word}
.kein-passwort{font-size:12px;color:var(--ink-soft);background:var(--bg);border-radius:8px;
  padding:9px 11px;margin-top:12px;line-height:1.5}
.historie{list-style:none;font-size:12.5px;display:flex;flex-direction:column;gap:5px}
.historie li span{color:var(--ink-soft);margin-right:6px;font-variant-numeric:tabular-nums}
.historie li i{color:var(--ink-soft)}

/* Kennzahlen-Kacheln ohne Klickfunktion */
.summary .tile.statisch{cursor:default}
.summary .tile.statisch:hover{border-color:var(--line);background:var(--surface)}
.summary .tile.statisch:active{transform:none}
.summary.schmal .tile .num{font-size:24px}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.feld-reihe.vier{grid-template-columns:1fr 1.4fr .9fr 1.2fr}
.feld-reihe label{margin-bottom:0}
.zeilen-aktionen{display:flex;gap:6px;flex-wrap:wrap}
.zeilen-aktionen button{padding:4px 10px;font-size:12px}
#bearbeiter-tabelle td{vertical-align:middle}
#bearbeiter-tabelle select{width:auto;padding:4px 8px;font-size:12.5px}
#bearbeiter-tabelle tbody tr{cursor:default}
#bearbeiter-tabelle tbody tr:hover{background:transparent}
.feld-knopf{padding-bottom:1px}
.status{font-size:13px;font-weight:600;margin-left:10px}
.status.ok{color:var(--green-ink)}
.status.fehler{color:var(--red)}

/* ---------- Einstellungen: Seitenmenü statt Scrollen (mnav wie im Dashboard) ---------- */
.einstellungen-haupt{max-width:1060px}
.einstellungen-haupt h2{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--blue);margin:4px 0 2px}
.einstellungen-haupt .untertitel{color:var(--ink-soft);font-size:13.5px;margin-bottom:16px}
.mnav-layout{display:flex;gap:18px;align-items:flex-start;margin-top:14px}
.mnav{
  flex:none;width:210px;display:flex;flex-direction:column;gap:2px;
  border-right:1px solid var(--line);padding-right:12px;
  position:sticky;top:76px;
}
.mnav button{
  text-align:left;background:none;border:none;border-radius:8px;width:100%;
  padding:9px 12px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-soft);
  cursor:pointer;transition:background .12s,color .12s;display:flex;align-items:center;gap:9px;
}
.mnav button:hover{background:var(--blue-tint);color:var(--blue)}
.mnav button.active{background:var(--blue);color:#fff}
.mnav .mnav-badge{
  margin-left:auto;font-size:11px;font-weight:700;background:var(--blue-tint);
  color:var(--blue);border-radius:999px;padding:1px 7px;
}
.mnav button.active .mnav-badge{background:rgba(255,255,255,.28);color:#fff}
.mnav-body{flex:1;min-width:0}
.gruppe-karte{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;display:none;
}
.gruppe-karte.active{display:block;animation:einblenden .18s ease-out}
.gruppe-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.gruppe-kopf h3{font-family:var(--font-display);margin:0;font-size:15.5px;color:var(--blue)}
.feld-hilfe{font-weight:400;color:var(--ink-soft);font-size:12px;margin-top:3px;
  letter-spacing:normal;text-transform:none}
.feld-quelle{font-weight:600;font-size:10.5px;color:var(--green-ink);margin-left:6px}
textarea.vorlage{font-family:Consolas,monospace;font-size:13px;min-height:200px}
.speicher-leiste{
  position:sticky;bottom:0;margin-top:14px;padding:12px 0;
  background:linear-gradient(to top, var(--bg) 75%, transparent);
  display:flex;align-items:center;gap:14px;
}
.speicher-leiste .status{font-size:13.5px;font-weight:600}
.speicher-leiste .status.ok{color:var(--green-ink)}
.speicher-leiste .status.fehler{color:var(--red)}
.test-ergebnis{font-size:12.5px;margin-left:10px}
.test-ergebnis.ok{color:var(--green-ink)}
.test-ergebnis.fehler{color:var(--red)}

@media (max-width:1100px){
  main{padding-top:28px}
  .inhalt-spalten{grid-template-columns:1fr}
  .detail-spalten{grid-template-columns:1fr}
  .nutzer-spalten{grid-template-columns:1fr}
  .nutzer-detail{position:static;max-height:none}
  .filterleiste{grid-template-columns:1fr 1fr}
  #liste{max-height:340px}
  .mnav-layout{flex-direction:column}
  .mnav{width:100%;flex-direction:row;flex-wrap:wrap;border-right:none;position:static;
    border-bottom:1px solid var(--line);padding:0 0 10px}
  .feld-reihe{grid-template-columns:1fr}
}

.feld-reihe.fuenf{grid-template-columns:1.3fr 1fr 1fr .6fr 1fr}
#preise-tabelle td:last-child,#pr-treffer td:last-child{white-space:nowrap}
#pr-treffer{margin-top:12px;max-height:420px;overflow-y:auto}
#pr-treffer table{font-size:12.5px}

/* ---------- Dialoge im Stil der Anwendung ---------- */
.dialog-huelle{position:fixed;inset:0;background:rgba(23,38,43,.45);z-index:200;
  display:grid;place-items:center;padding:24px;animation:einblenden .12s ease-out}
.dialog-huelle.dialog-zu{opacity:0;transition:opacity .12s}
.dialog-kasten{background:var(--surface);border-radius:var(--radius);width:min(460px,100%);
  overflow:hidden;box-shadow:0 18px 48px rgba(0,44,85,.28);
  animation:dialogAuf .16s cubic-bezier(.2,.9,.3,1)}
@keyframes dialogAuf{from{opacity:0;transform:translateY(-8px) scale(.98)}
  to{opacity:1;transform:none}}
.dialog-kasten::before{content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--yellow) 0 25%,var(--green) 25% 50%,
    var(--lightblue) 50% 75%,var(--purple) 75% 100%)}
.dialog-kopf{padding:16px 20px 0}
.dialog-kopf b{font-family:var(--font-display);font-size:16px;color:var(--blue)}
.dialog-inhalt{padding:12px 20px 4px}
.dialog-inhalt p{font-size:13.5px;line-height:1.55;margin-bottom:10px;color:var(--ink)}
.dialog-inhalt label{margin-top:6px}
.dialog-fehler{background:var(--red-tint);color:var(--red);border-radius:8px;
  padding:8px 10px;font-size:12.5px;margin:4px 0 10px}
.dialog-fuss{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 18px}

/* ---------- Mein Konto ---------- */
.konto-haupt{max-width:920px}
.pflicht-banner{background:var(--yellow-tint);border:1px solid var(--yellow);
  border-radius:var(--radius);padding:14px 18px;margin-bottom:20px;font-size:13.5px;
  line-height:1.55;color:var(--yellow-ink);font-weight:600}
.hauptnav.gesperrt a:not(.aktiv){opacity:.4;pointer-events:none}
.einrichtung-kasten{margin-top:14px;padding:16px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;animation:einblenden .18s ease-out}
.einrichtung-spalten{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start}
.einrichtung-spalten b{display:block;font-size:13px;color:var(--blue);margin-bottom:8px}
.qr-feld{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;
  display:inline-block;line-height:0}
.qr-feld svg{display:block;width:220px;height:220px;shape-rendering:crispEdges}
.schnell-leiste{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.schnell-knopf{font-size:12.5px;padding:5px 10px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line)}
.schnell-knopf:hover{border-color:var(--blue);color:var(--blue)}
.ki-knopf{border-style:dashed;color:var(--blue);font-weight:600}
.ki-knopf:disabled{cursor:progress}
/* ---------- Fokus-Modus: Vorgang groß, Liste ausgeblendet ---------- */
.detail-kopf{position:relative;padding-right:130px}
.btn-fokus{position:absolute;top:0;right:0;font-size:12px;padding:5px 11px}
.inhalt-spalten.fokus{grid-template-columns:1fr}
.inhalt-spalten.fokus #liste-bereich{display:none}
.inhalt-spalten.fokus #detail{animation:einblenden .18s ease-out}

/* ---------- PDF-Anhänge: Umschalter über der Vorschau ---------- */
.pdf-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px;align-items:center}
.pdf-tab{font-size:12px;padding:5px 11px;border-radius:8px;font-weight:500;
  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdf-tab.aktiv{background:var(--blue);border-color:var(--blue);color:#fff}
.pdf-tab.aktiv:hover{color:#fff}
.pdf-als-antrag{font-size:12px;padding:5px 11px;color:var(--blue);
  border-style:dashed}

/* ---------- Diagramme (Dashboard) ---------- */
.kosten-verteilung{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}
#kosten-donut{width:240px;height:240px;display:block;margin:0 auto}
.donut-segment{cursor:pointer;transition:opacity .12s}
.donut-segment:hover,.donut-segment:focus-visible{opacity:.82;outline:none}
.donut-mitte-zahl{font-family:var(--font-display);font-size:19px;font-weight:700;
  fill:var(--ink)}
.donut-mitte-label{font-size:10.5px;fill:var(--ink-soft)}
.donut-legende{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
.legende-eintrag{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  padding:3px 9px;border-radius:12px;border:1px solid transparent;background:none;
  font-weight:500;color:var(--ink)}
.legende-eintrag:not(.statisch):hover{border-color:var(--line);color:var(--ink)}
.legende-eintrag .punkt{width:9px;height:9px;border-radius:50%;flex:none}
.legende-eintrag .lwert{color:var(--ink-soft)}
/* Die Namensspalte hat eine feste Breite, damit alle Balken an derselben
   Stelle beginnen — sonst rechnet jede Zeile ihre Spalten selbst aus und die
   Balken fangen treppenartig versetzt an. */
.haus-liste{display:flex;flex-direction:column;gap:2px;max-height:330px;overflow-y:auto;
  padding-right:4px;--namensbreite:150px}
#haus-liste{--namensbreite:64px}          /* dort stehen kurze Hauskürzel */
.haus-zeile{display:grid;grid-template-columns:10px var(--namensbreite) 1fr auto;
  align-items:center;gap:10px;padding:5px 8px;border:none;background:none;
  border-radius:7px;text-align:left;font-weight:500;font-size:12.5px;cursor:pointer}
.haus-zeile:hover{background:var(--blue-tint);border:none;color:inherit}
.hz-punkt{width:9px;height:9px;border-radius:50%}
.hz-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.hz-balken{height:8px;background:var(--gray-tint);border-radius:4px;overflow:hidden}
.hz-balken>span{display:block;height:100%;background:#2F6DAE;border-radius:4px;
  min-width:2px}
.hz-wert{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:12px;
  white-space:nowrap}
/* Monatsvergleich: laufender Monat kräftig, Vormonat als blasser Balken
   darunter — die Veränderung ist damit ohne Rechnen sichtbar. */
.vergleich-zeile{display:grid;grid-template-columns:170px 1fr 44px 58px;
  align-items:center;gap:12px;padding:7px 4px;border-radius:7px}
.vergleich-zeile:hover{background:var(--bg)}
.vz-label{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.vz-balken{display:flex;flex-direction:column;gap:2px}
.vz-jetzt{display:block;height:11px;border-radius:3px;min-width:2px;
  transition:width .3s ease-out}
.vz-vorher{display:block;height:5px;border-radius:3px;min-width:2px;
  background:var(--line)}
.vz-wert{font-family:var(--font-display);font-size:16px;font-weight:700;
  color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.vz-trend{font-size:11.5px;font-weight:600;text-align:right;color:var(--ink-soft)}
.vz-trend.hoch{color:var(--green-ink)}
.vz-trend.runter{color:var(--red)}
@media (max-width:760px){
  .vergleich-zeile{grid-template-columns:1fr 44px 50px;row-gap:2px}
  .vz-label{grid-column:1/-1}
}

.haus-drilldown{margin-top:16px;padding:16px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;animation:einblenden .18s ease-out}
.dd-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dd-kopf h4{margin:0 0 2px}
.dd-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;margin:12px 0 10px}
.dd-kachel{background:var(--surface);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px}
.dd-kachel .num{font-family:var(--font-display);font-size:20px;font-weight:700;
  color:var(--blue);line-height:1.2}
.dd-kachel .lbl{font-size:11.5px;color:var(--ink-soft)}
.chart-tooltip{position:fixed;z-index:300;pointer-events:none;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:12.5px;
  line-height:1.5;box-shadow:0 8px 22px rgba(23,38,43,.16);max-width:280px}
.verlauf-svg{width:100%;height:auto;display:block}
.achse-text{font-size:8.5px;fill:var(--ink-soft)}
.achse-linie{stroke:var(--line);stroke-width:1}
.verlauf-gruppe rect{transition:opacity .12s}
.verlauf-gruppe:hover rect{opacity:.82}
.tabellen-details{margin-top:8px}
.tabellen-details summary{font-size:12.5px;color:var(--ink-soft);cursor:pointer;
  padding:4px 0}
@media (max-width:900px){
  .kosten-verteilung{grid-template-columns:1fr}
  .haus-liste{max-height:260px}
}

/* ---------- Baustein-Editor ----------
   Eigene Fläche statt Dialog: Hier schreibt man längere Texte und will die
   vorhandenen Bausteine daneben sehen. */
.editor-huelle{position:fixed;inset:0;z-index:250;background:rgba(23,38,43,.45);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:einblenden .15s ease-out}
.editor-kasten{background:var(--surface);border-radius:14px;width:min(860px,100%);
  max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(23,38,43,.3)}
.editor-kopf{display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--line)}
.editor-kopf b{font-family:var(--font-display);font-size:15px;color:var(--blue)}
.editor-kopf button{border:none;background:none;font-size:16px;padding:2px 8px}
.editor-inhalt{padding:18px 20px;overflow-y:auto;flex:1}
.editor-inhalt h4{font-family:var(--font-display);font-size:13px;color:var(--blue);
  margin:16px 0 8px}
.editor-inhalt textarea{font-family:inherit;font-size:13.5px;line-height:1.6}
.editor-fuss{display:flex;align-items:center;gap:10px;padding:12px 20px;
  border-top:1px solid var(--line);background:var(--bg)}
.editor-fuss .status{margin-right:auto;font-size:12px;max-width:46%}
.baustein-liste{display:flex;flex-direction:column;gap:4px;max-height:230px;
  overflow-y:auto}
.baustein-zeile{display:grid;gap:1px;text-align:left;padding:8px 11px;
  background:var(--bg);border:1px solid var(--line);border-radius:8px}
.baustein-zeile.aktiv{border-color:var(--blue);background:var(--blue-tint)}
.baustein-zeile b{font-size:13px}
.bz-meta{font-size:11px;color:var(--ink-soft);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em}
.bz-text{font-size:12px;color:var(--ink-soft);font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.schnell-verwalten{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line)}
.schnell-verwalten button{font-size:12px;padding:5px 11px;border-style:dashed}

/* ---------- Stapelverarbeitung ----------
   Die Leiste erscheint erst mit einer Auswahl: Wer nichts markiert hat, soll
   auch keine Massenaktionen sehen. */
.stapel-leiste{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 14px;margin-bottom:10px;background:var(--blue-tint);
  border:1px solid var(--blue);border-radius:10px;animation:einblenden .15s ease-out}
.stapel-zahl{font-size:12.5px;font-weight:700;color:var(--blue)}
.stapel-leiste button,.stapel-leiste select{font-size:12.5px;padding:5px 11px}
.stapel-leiste .status{margin-left:auto;font-size:12px}
.spalte-wahl{width:34px;text-align:center}
.spalte-wahl input{width:auto;margin:0}
#wahlmodus.aktiv{background:var(--blue);border-color:var(--blue);color:#fff}
.vorgang-wahl{width:auto;margin:0 2px 0 0;flex:none;align-self:center}
.dialog-ankreuz{display:flex;align-items:center;gap:6px;text-transform:none;
  letter-spacing:normal;font-weight:400;font-size:13px;color:var(--ink)}
.dialog-ankreuz input{width:auto;margin:0}

.dok-zeile{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:14px;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  flex-wrap:wrap;margin-bottom:10px}
.dok-info{display:flex;flex-direction:column;gap:4px;max-width:520px}
.dok-info .status{font-size:12.5px}
a.btn{display:inline-flex;align-items:center;text-decoration:none}
.kandidat-zeile{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 8px;margin-top:5px;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;flex-wrap:wrap}
.kandidat-zeile.inaktiv{opacity:.65}
.kandidat-zeile b{font-size:12.5px}
.kandidat-zeile .hinweis-klein{margin-top:0}
.kandidat-zeile button{font-size:11.5px;padding:4px 9px;flex:none}
.secret-anzeige{display:block;font-family:Consolas,monospace;font-size:13px;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:8px 10px;letter-spacing:.06em;word-break:break-all}
.codes-liste{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;margin:14px 0}
.codes-liste li{font-family:Consolas,monospace;font-size:15px;letter-spacing:.08em;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;text-align:center}
/* ---------- Schmale Bildschirme ----------
   Zwei Stufen: unter 900px übernimmt das Burger-Menü die Navigation,
   unter 760px werden Abstände und Raster fürs Telefon eingedampft.
   Grundsatz: Breites (Tabellen, PDF) scrollt in seinem eigenen Kasten —
   die Seite selbst darf nie seitlich scrollen. */
@media (max-width:900px){
  .nav-knopf{display:flex}
  .hauptnav{display:none}
  header.nav-offen .hauptnav{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    margin:0;gap:0;padding:4px 14px 10px;
    background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px rgba(23,38,43,.16);
    animation:einblenden .15s ease-out;
  }
  header.nav-offen .hauptnav a{
    padding:13px 10px;margin:0;font-size:15px;
    border-bottom:1px solid var(--line);border-left:3px solid transparent;
  }
  header.nav-offen .hauptnav a:last-child{border-bottom:none}
  header.nav-offen .hauptnav a.aktiv{
    border-left-color:var(--blue);border-bottom-color:var(--line);
    background:var(--blue-tint);
  }
}

@media (max-width:760px){
  html{overflow-x:hidden}
  .header-inner{padding:10px 16px;gap:8px 12px}
  .brand{gap:12px}
  .marken-logo{height:54px}
  .brand h1{font-size:18.5px;white-space:nowrap}
  .brand .sub{display:none}
  .role-label{display:none}
  main{padding:16px 12px 56px}

  .summary{gap:8px}
  .summary .tile{flex:1 1 100px;padding:12px}
  .summary .tile .num{font-size:24px}

  /* Breites scrollt im eigenen Kasten, nicht die Seite */
  .tabellen-karte{overflow-x:auto}
  .karte{overflow-x:auto}
  .anfrage-text{white-space:pre-wrap;word-break:break-word}
  .pdf-rahmen{min-height:340px}

  .filterleiste{grid-template-columns:1fr}
  .feld-reihe.fuenf{grid-template-columns:1fr}
  .feld-reihe.drei{grid-template-columns:1fr}
  .detail-kopf h2{font-size:15.5px}
  .typ-wechsel{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .aktionen{flex-wrap:wrap}
  .einrichtung-spalten{grid-template-columns:1fr}
  .kandidat-zeile{flex-direction:column;align-items:stretch}
  .kandidat-zeile button{align-self:flex-start}
}

@media print{
  header,.seiten-kopf,.pflicht-banner,.aktionen,.karte:not(#codes-karte){display:none}
  #codes-karte{border:none}
}