/* ==========================================================================
   Kreisbereitschaft – Führungsübersicht
   Internes Steuerungswerkzeug: hohe Informationsdichte, ruhige Flächen,
   Farbe ausschließlich als Statushinweis. Jeder Status steht zusätzlich als
   Text, damit die Ansicht auch im Schwarzweißdruck eindeutig bleibt.
   ========================================================================== */

:root {
  --flaeche: #eef0f2;
  --flaeche-block: #ffffff;
  --flaeche-kopf: #22303c;
  --flaeche-nav: #f6f7f8;
  --flaeche-zeile: #f7f8f9;
  --flaeche-aktiv: #e4eaf0;

  --rand: #c9ced4;
  --rand-fein: #dfe3e7;
  --rand-stark: #9aa3ac;

  --text: #16202a;
  --text-schwach: #5c6771;
  --text-invers: #f2f4f6;

  --akzent: #b3121c;
  --akzent-hell: #e30613;

  --ok: #1f6b3a;
  --ok-flaeche: #e7f1ea;
  --warn: #8a5a00;
  --warn-flaeche: #fbf1de;
  --krit: #a3151d;
  --krit-flaeche: #f9e7e8;
  --info: #1d4e79;
  --info-flaeche: #e6eef5;
  --neutral: #5c6771;
  --neutral-flaeche: #eceef0;

  --fokus: #1d4e79;

  --schrift: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-zahl: "Segoe UI", Consolas, monospace;
  --radius: 3px;
  --kopf-hoehe: 56px;
}

html[data-theme="dunkel"] {
  --flaeche: #10161c;
  --flaeche-block: #182029;
  --flaeche-kopf: #0b1116;
  --flaeche-nav: #141c23;
  --flaeche-zeile: #1d262f;
  --flaeche-aktiv: #24313d;

  --rand: #33404c;
  --rand-fein: #26313b;
  --rand-stark: #4b5b69;

  --text: #e7ecf0;
  --text-schwach: #a3b0bb;
  --text-invers: #f2f4f6;

  --akzent: #e30613;
  --akzent-hell: #ff4d57;

  --ok: #6fd08c;
  --ok-flaeche: #16291d;
  --warn: #e5b45c;
  --warn-flaeche: #2c2314;
  --krit: #ff8f8f;
  --krit-flaeche: #2e1618;
  --info: #82b8e8;
  --info-flaeche: #14242f;
  --neutral: #a3b0bb;
  --neutral-flaeche: #1f272f;

  --fokus: #82b8e8;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 13px;
  line-height: 1.42;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
h1 { font-size: 17px; }
h2 { font-size: 14px; }
h3 { font-size: 13px; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--info); }

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 1px;
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--flaeche-block);
  padding: 6px 10px;
}
.sprungmarke:focus { left: 8px; top: 8px; }

.nur-druck { display: none; }

/* ------------------------------ Kopfleiste ------------------------------ */

.kopf {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--kopf-hoehe);
  padding: 0 14px;
  background: var(--flaeche-kopf);
  color: var(--text-invers);
  border-bottom: 3px solid var(--akzent);
}

.kopf-titel { display: flex; flex-direction: column; min-width: 220px; }
.kopf-org { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.kopf-sub { font-size: 11px; color: #b8c2cb; }
.kopf-sub strong { font-weight: 600; color: #dde4ea; }

.kopf-zahlen {
  display: flex;
  flex: 1;
  gap: 6px;
  overflow-x: auto;
}

.kopf-zahl {
  display: flex;
  flex-direction: column;
  padding: 3px 8px;
  min-width: 84px;
  border-left: 3px solid var(--rand-stark);
  background: rgba(255, 255, 255, .05);
}
.kopf-zahl-wert { font-size: 15px; font-weight: 600; font-family: var(--schrift-zahl); }
.kopf-zahl-label { font-size: 10px; color: #b8c2cb; white-space: nowrap; }
.kopf-zahl.ton-ok { border-left-color: #4f9c6c; }
.kopf-zahl.ton-warn { border-left-color: #c99b3f; }
.kopf-zahl.ton-krit { border-left-color: var(--akzent-hell); }

.kopf-aktionen { display: flex; gap: 6px; }

/* ------------------------------ Navigation ------------------------------ */

.rahmen {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - var(--kopf-hoehe));
}

.nav {
  flex: 0 0 224px;
  background: var(--flaeche-nav);
  border-right: 1px solid var(--rand);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px 7px 8px;
  border: 0;
  border-left: 3px solid transparent;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.nav-btn:hover { background: var(--flaeche-aktiv); }
.nav-btn.is-active {
  background: var(--flaeche-aktiv);
  border-left-color: var(--akzent);
  font-weight: 600;
}
.nav-btn-nst.is-active { border-left-color: var(--akzent-hell); }

.nav-nr {
  flex: 0 0 16px;
  color: var(--text-schwach);
  font-family: var(--schrift-zahl);
  font-size: 11px;
}

.nav-zahl {
  margin-left: auto;
  min-width: 20px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.nav-zahl.ton-krit { background: var(--krit-flaeche); color: var(--krit); }
.nav-zahl.ton-warn { background: var(--warn-flaeche); color: var(--warn); }

.nav-fuss {
  margin-top: auto;
  padding: 12px 10px;
  font-size: 10.5px;
  color: var(--text-schwach);
  border-top: 1px solid var(--rand-fein);
}

/* -------------------------------- Inhalt -------------------------------- */

main {
  flex: 1;
  min-width: 0;
  padding: 12px 14px 40px;
}

.ansicht { display: block; }
.ansicht[hidden] { display: none; }

.ansicht-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.ansicht-aktionen { margin-left: auto; display: flex; gap: 6px; }

.meldung {
  margin-bottom: 10px;
  padding: 7px 10px;
  border-left: 3px solid var(--akzent);
  background: var(--krit-flaeche);
  color: var(--text);
}

.hinweisleiste {
  margin-bottom: 10px;
  padding: 6px 10px;
  border-left: 3px solid var(--info);
  background: var(--info-flaeche);
  font-size: 12px;
}

.trefferzeile {
  margin: 0 0 6px;
  font-size: 11.5px;
  color: var(--text-schwach);
}

.leer {
  padding: 10px;
  border: 1px dashed var(--rand);
  background: var(--flaeche-block);
  color: var(--text-schwach);
  font-size: 12px;
}

.leer-inline { color: var(--text-schwach); font-style: italic; }

/* ------------------------------- Buttons -------------------------------- */

.btn {
  padding: 4px 9px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche-block);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--flaeche-aktiv); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-prim {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
  font-weight: 600;
}
.btn-prim:hover { background: var(--akzent-hell); border-color: var(--akzent-hell); }

.btn-mini { padding: 2px 7px; font-size: 11.5px; }
.btn-danger { color: var(--krit); border-color: var(--rand); }
.btn-danger:hover { background: var(--krit-flaeche); }
.btn.is-active { background: var(--flaeche-aktiv); border-color: var(--fokus); font-weight: 600; }

.kopf .btn {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3);
  color: var(--text-invers);
}
.kopf .btn:hover { background: rgba(255, 255, 255, .2); }
.kopf .btn-prim { background: var(--akzent); border-color: var(--akzent); }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.chip {
  padding: 3px 9px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--flaeche-block);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.chip.is-active {
  background: var(--flaeche-kopf);
  border-color: var(--flaeche-kopf);
  color: var(--text-invers);
  font-weight: 600;
}

/* -------------------------------- Blöcke -------------------------------- */

.karte-block {
  margin-bottom: 12px;
  border: 1px solid var(--rand);
  background: var(--flaeche-block);
}

.block-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--rand-fein);
  background: var(--flaeche-zeile);
}
.block-kopf > div { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.block-hinweis { margin-left: auto; font-size: 11px; color: var(--text-schwach); }
.block-kopf > div .block-hinweis { margin-left: 0; }

.raster { display: grid; gap: 12px; }
.raster-2-1 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.stapel { display: flex; flex-direction: column; }

@media (max-width: 1100px) {
  .raster-2-1 { grid-template-columns: 1fr; }
}

/* ------------------------------ Kennzahlen ------------------------------ */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.kennzahl {
  border: 1px solid var(--rand);
  border-left: 4px solid var(--rand-stark);
  background: var(--flaeche-block);
}
.kennzahl.ton-ok { border-left-color: var(--ok); }
.kennzahl.ton-warn { border-left-color: var(--warn); }
.kennzahl.ton-krit { border-left-color: var(--krit); }
.kennzahl.ton-neutral { border-left-color: var(--neutral); }

.kennzahl-btn {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kennzahl-btn:hover { background: var(--flaeche-aktiv); }
.kennzahl-wert { font-size: 19px; font-weight: 600; font-family: var(--schrift-zahl); line-height: 1.1; }
.kennzahl-label { font-size: 11.5px; font-weight: 600; }
.kennzahl-zusatz { font-size: 11px; color: var(--text-schwach); }

/* --------------------------- Handlungsbedarf ---------------------------- */

.hb-liste { max-height: 62vh; overflow-y: auto; }

.hb { border-bottom: 1px solid var(--rand-fein); border-left: 4px solid var(--neutral); }
.hb.ton-krit { border-left-color: var(--krit); }
.hb.ton-warn { border-left-color: var(--warn); }
.hb.ton-info { border-left-color: var(--info); }

.hb-btn {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hb-btn:hover { background: var(--flaeche-zeile); }

.hb-kopf { display: flex; gap: 8px; align-items: baseline; font-size: 10.5px; }
.hb-stufe { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hb.ton-krit .hb-stufe { color: var(--krit); }
.hb.ton-warn .hb-stufe { color: var(--warn); }
.hb.ton-info .hb-stufe { color: var(--info); }
.hb-kategorie { color: var(--text-schwach); text-transform: uppercase; letter-spacing: .04em; }
.hb-datum { margin-left: auto; color: var(--text-schwach); font-family: var(--schrift-zahl); }
.hb-titel { display: block; font-weight: 600; }
.hb-detail { display: block; font-size: 11.5px; color: var(--text-schwach); }

/* ----------------------------- Terminvorschau --------------------------- */

.vorschau { max-height: 40vh; overflow-y: auto; }
.vorschau-item { border-bottom: 1px solid var(--rand-fein); }
.vorschau-item.ist-offen { background: var(--warn-flaeche); }

.vorschau-btn {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vorschau-btn:hover { background: var(--flaeche-aktiv); }
.vorschau-datum {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-schwach);
  font-family: var(--schrift-zahl);
}
.vorschau-titel { display: block; font-weight: 600; }
.vorschau-meta { display: block; font-size: 11.5px; color: var(--text-schwach); }
.vorschau-status { display: flex; gap: 10px; align-items: center; margin-top: 2px; }

.besetzung { font-size: 11.5px; font-family: var(--schrift-zahl); }
.besetzung-offen { color: var(--krit); font-weight: 600; }

/* -------------------------------- Kurzdaten ----------------------------- */

.kurzdaten {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 1px 10px;
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
}
.kurzdaten dt { color: var(--text-schwach); }
.kurzdaten dd { margin: 0; }

.nst-kopf { display: flex; align-items: center; gap: 8px; padding: 8px 10px 0; }

/* -------------------------------- Filter -------------------------------- */

.filter, .raster-form, .protokoll-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--rand);
  background: var(--flaeche-block);
  align-items: end;
}
.karte-block .raster-form, .karte-block .protokoll-form { border: 0; margin-bottom: 0; }

.feld { display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.feld > label { font-size: 11px; color: var(--text-schwach); }
.feld-suche { flex: 1 1 240px; }
.feld-voll { flex: 1 1 100%; }
.feld-halb { flex: 1 1 320px; }
.feld-check { justify-content: end; min-width: auto; }
.feld-check label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text); }
.feld-reset { margin-left: auto; min-width: auto; flex-direction: row; gap: 6px; }
.feld-hinweis { font-size: 10.5px; color: var(--text-schwach); }

input[type="text"], input[type="search"], input[type="date"], input[type="time"],
input[type="number"], input[type="tel"], input[type="email"], select, textarea {
  padding: 3px 6px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche-block);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  min-width: 0;
}
textarea { resize: vertical; line-height: 1.4; }
input[type="checkbox"] { accent-color: var(--akzent); }

/* -------------------------------- Tabellen ------------------------------ */

.tabelle-huelle { overflow-x: auto; border: 1px solid var(--rand); background: var(--flaeche-block); }
.karte-block .tabelle-huelle { border: 0; }

.tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.tab caption { text-align: left; }

.tab thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 5px 8px;
  background: var(--flaeche-zeile);
  border-bottom: 1px solid var(--rand);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-schwach);
  white-space: nowrap;
}

.tab tbody th, .tab tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--rand-fein);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}
/* Die erste Spalte trägt Bezeichnung und Zeilennotiz und braucht Mindestbreite,
   damit Bemerkungen nicht zu Schmalspalten mit einem Wort je Zeile werden. */
.tab tbody th { font-weight: 600; min-width: 140px; }
#tab-personal tbody th { min-width: 170px; }
#tab-dienste tbody th, #tab-ausbildung tbody th { min-width: 120px; white-space: nowrap; }
#tab-dienste tbody th .zeilen-notiz, #tab-ausbildung tbody th .zeilen-notiz { white-space: normal; }
/* Zeilenfarbe als Variable, damit die am Rand fixierte Aktionsspalte dieselbe
   Fläche zeigt und beim Querscrollen nichts durchscheint. */
.tab tbody tr { --zeilen-flaeche: var(--flaeche-block); background: var(--zeilen-flaeche); }
.tab tbody tr:hover { --zeilen-flaeche: var(--flaeche-zeile); }
.tab tbody tr.ist-warnung { --zeilen-flaeche: var(--warn-flaeche); }
.tab tbody tr.ist-kritisch { --zeilen-flaeche: var(--krit-flaeche); }
.tab tbody tr.ist-vergangen { color: var(--text-schwach); }
.tab tbody tr.ist-gewaehlt { outline: 2px solid var(--fokus); outline-offset: -2px; }

.tab-eng { margin: 0; }

.zeilen-notiz { display: block; font-size: 11px; color: var(--text-schwach); }
.zelle-kontakt { font-family: var(--schrift-zahl); font-size: 11.5px; max-width: 160px; overflow-wrap: anywhere; }

/* Bearbeiten und Löschen bleiben auch bei schmalen Fenstern sichtbar. */
.zelle-aktionen {
  position: sticky;
  right: 0;
  white-space: nowrap;
  background: var(--zeilen-flaeche);
  box-shadow: -1px 0 0 var(--rand-fein);
}
.tab thead th:last-child { position: sticky; right: 0; z-index: 2; background: var(--flaeche-zeile); }
.zelle-aktionen .btn { margin-right: 3px; }

.zellen-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--info);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.zeilen-select {
  display: block;
  margin-top: 2px;
  max-width: 190px;
  font-size: 11px;
}

/* -------------------------------- Status -------------------------------- */

.status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral);
  flex: 0 0 8px;
}
.status-text { font-size: 11.5px; }

.status-ok .status-dot { background: var(--ok); }
.status-warn .status-dot { background: var(--warn); }
.status-krit .status-dot { background: var(--krit); }
.status-info .status-dot { background: var(--info); }

.status-ok .status-text { color: var(--ok); }
.status-warn .status-text { color: var(--warn); }
.status-krit .status-text { color: var(--krit); font-weight: 600; }
.status-info .status-text { color: var(--info); }

.ton-ok { color: var(--ok); }
.ton-warn { color: var(--warn); }
.ton-krit { color: var(--krit); }
.ton-info { color: var(--info); }

/* --------------------------- Nachrichtenstelle -------------------------- */

.orte-raster {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
  gap: 10px;
  padding: 8px 10px;
}
@media (max-width: 1100px) {
  .orte-raster { grid-template-columns: 1fr; }
}

.karten-hinweis { padding: 6px 10px 0; font-size: 11px; color: var(--text-schwach); }

.karte {
  height: 380px;
  border: 1px solid var(--rand);
  background: var(--flaeche-zeile);
}
.karte.pick-mode { cursor: crosshair; }
.karte.ohne-kacheln { background: repeating-linear-gradient(45deg, var(--flaeche-zeile), var(--flaeche-zeile) 10px, var(--flaeche-aktiv) 10px, var(--flaeche-aktiv) 20px); }
.karte-fallback { padding: 12px; font-size: 12px; color: var(--text-schwach); }

.ort-liste { max-height: 380px; overflow-y: auto; border: 1px solid var(--rand-fein); }
.ort-item { display: flex; align-items: stretch; border-bottom: 1px solid var(--rand-fein); }
.ort-item.is-selected { background: var(--flaeche-aktiv); }

.ort-select {
  display: flex;
  flex: 1;
  gap: 8px;
  padding: 5px 8px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ort-select:hover { background: var(--flaeche-zeile); }

.ort-code {
  flex: 0 0 32px;
  height: 18px;
  border-radius: 2px;
  background: var(--neutral);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
}
.ort-code.ton-krit { background: var(--krit); }
.ort-code.ton-warn { background: var(--warn); }
.ort-code.ton-info { background: var(--info); }
.ort-code.ton-ok { background: var(--ok); }

.ort-body { display: flex; flex-direction: column; min-width: 0; }
.ort-name { font-weight: 600; }
.ort-meta, .ort-adresse, .ort-koord { font-size: 11px; color: var(--text-schwach); }
.ort-koord { font-family: var(--schrift-zahl); }
.ort-aktionen { display: flex; align-items: center; gap: 4px; padding-right: 6px; }

.ort-marker {
  display: inline-block;
  min-width: 30px;
  padding: 2px 4px;
  border: 1px solid rgba(0, 0, 0, .35);
  border-radius: 2px;
  background: #5c6771;
  color: #fff;
  font: 700 10px/1.2 var(--schrift);
  text-align: center;
}
.ort-marker.ton-krit { background: #a3151d; }
.ort-marker.ton-warn { background: #8a5a00; }
.ort-marker.ton-info { background: #1d4e79; }
.ort-marker.ton-ok { background: #1f6b3a; }
.ort-marker.is-selected { outline: 2px solid #fff; box-shadow: 0 0 0 2px #16202a; }

.popup strong { display: block; }
.popup-meta { font-size: 11px; color: #5c6771; }
.popup-koord { font-family: var(--schrift-zahl); font-size: 11px; }

.protokoll { max-height: 46vh; overflow-y: auto; }
.protokoll-item {
  display: grid;
  grid-template-columns: 110px 110px 1fr auto auto;
  gap: 8px;
  align-items: baseline;
  padding: 4px 10px;
  border-bottom: 1px solid var(--rand-fein);
  border-left: 3px solid var(--neutral);
  font-size: 12px;
}
.protokoll-item.ton-krit { border-left-color: var(--krit); }
.protokoll-item.ton-warn { border-left-color: var(--warn); }
.protokoll-item.ton-info { border-left-color: var(--info); }
.protokoll-item.ton-ok { border-left-color: var(--ok); }

.protokoll-zeit { font-family: var(--schrift-zahl); color: var(--text-schwach); }
.protokoll-art { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.protokoll-bearbeiter { font-size: 11px; color: var(--text-schwach); }
.protokoll-aktionen { display: flex; gap: 4px; }

@media (max-width: 900px) {
  .protokoll-item { grid-template-columns: 1fr; }
}

/* -------------------------------- Dialog -------------------------------- */

.dlg {
  width: min(720px, 94vw);
  padding: 0;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche-block);
  color: var(--text);
}
.dlg::backdrop { background: rgba(11, 17, 22, .55); }

.dlg form { display: flex; flex-direction: column; }
.dlg h2 {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rand);
  background: var(--flaeche-zeile);
}
.dlg-hinweis {
  padding: 6px 12px;
  border-bottom: 1px solid var(--rand-fein);
  background: var(--warn-flaeche);
  color: var(--warn);
  font-size: 12px;
}
.dlg-felder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 12px;
  max-height: 68vh;
  overflow-y: auto;
}
.dlg-felder .feld { flex: 1 1 220px; }
.dlg-felder .feld-voll { flex: 1 1 100%; }
.dlg-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--rand);
  background: var(--flaeche-zeile);
}

/* -------------------------------- Bericht ------------------------------- */

.bericht-buehne { display: flex; justify-content: center; }

.bericht {
  width: 210mm;
  max-width: 100%;
  padding: 14mm 14mm 12mm;
  border: 1px solid var(--rand);
  background: var(--flaeche-block);
  font-size: 11.5px;
}

.bericht-kopf { border-bottom: 2px solid var(--text); padding-bottom: 6px; margin-bottom: 10px; }
.bericht-kopf-zeile { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-schwach); }
.bericht-org { font-weight: 600; color: var(--text); }
.bericht-kopf h2 { margin-top: 4px; font-size: 16px; }
.bericht-untertitel { font-size: 12px; color: var(--text-schwach); }
.bericht-meta { margin-top: 4px; font-size: 10.5px; color: var(--text-schwach); }

.bericht-abschnitt { margin-bottom: 12px; }
.bericht-abschnitt h3 {
  margin-bottom: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rand);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.bericht-teilblock { margin-bottom: 8px; }
.bericht-teilblock h4 { margin-bottom: 3px; font-size: 11.5px; }
.bericht-hinweis { margin-bottom: 4px; font-size: 10.5px; color: var(--text-schwach); }
.bericht-meldung { padding: 5px 8px; border-left: 3px solid var(--akzent); background: var(--krit-flaeche); }
.bericht-leer { padding: 4px 0; font-size: 11px; color: var(--text-schwach); font-style: italic; }

.bericht-tab { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.bericht-tab th, .bericht-tab td {
  padding: 3px 5px;
  border: 1px solid var(--rand);
  text-align: left;
  vertical-align: top;
}
.bericht-tab thead th { background: var(--flaeche-zeile); font-size: 10px; text-transform: uppercase; }
.bericht-tab .z-kurz { width: 12%; }
.bericht-tab .z-datum { width: 14%; white-space: nowrap; }
.bericht-tab .z-zahl { width: 8%; text-align: right; font-family: var(--schrift-zahl); }

.bericht-daten {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 2px 10px;
  margin: 0;
  font-size: 11px;
}
.bericht-daten dt { font-weight: 600; }
.bericht-daten dd { margin: 0; }

.bericht-fuss {
  margin-top: 14px;
  padding-top: 6px;
  border-top: 1px solid var(--rand);
  font-size: 10px;
  color: var(--text-schwach);
}
.bericht-unterschrift { display: flex; gap: 24px; margin-top: 14px; font-size: 10.5px; color: var(--text); }

/* --------------------------------- Toast -------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 60;
  padding: 7px 14px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche-kopf);
  color: var(--text-invers);
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* ------------------------------ Tabletgröße ----------------------------- */

/* Auf schmalen Bildschirmen rücken die Tabellen enger zusammen, damit sie ohne
   Querscrollen lesbar bleiben. Die am Rand fixierte Aktionsspalte verdeckt dann
   keine Statusangaben. */
@media (max-width: 1400px) {
  .tab { font-size: 11.5px; }
  .tab thead th { padding: 4px 5px; }
  .tab tbody th, .tab tbody td { padding: 4px 5px; }
  .tab tbody th { min-width: 118px; }
  #tab-personal tbody th { min-width: 132px; }
  .zelle-kontakt { max-width: 118px; }
}

/* Unterhalb dieser Breite reicht der Platz für die Kopfzahlen nicht mehr aus.
   Dieselben Werte stehen auf dem Dashboard und als Zähler in der Navigation. */
@media (max-width: 1240px) {
  .kopf-zahlen { display: none; }
  .kopf-titel { flex: 1; }
}

@media (max-width: 900px) {
  .rahmen { flex-direction: column; }
  .nav { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--rand); }
  .nav ul { display: flex; flex-wrap: wrap; }
  .nav-btn { width: auto; border-left: 0; border-bottom: 3px solid transparent; }
  .nav-btn.is-active { border-left: 0; border-bottom-color: var(--akzent); }
  .nav-fuss { display: none; }
  .kopf { height: auto; flex-wrap: wrap; padding: 6px 10px; }
  .kopf-zahlen { order: 3; flex-basis: 100%; }
}