/* ============================================================
   Praxisplanung — Planung & Zeiterfassung
   Mobile-first, klare große Bedienelemente, deutsche Oberfläche
   ============================================================ */
/* Farben: farben.css (Hell und Dunkel) */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--hintergrund); color: var(--text);
  font-size: 16px; line-height: 1.45;
}
.versteckt { display: none !important; }

/* ---------- Kopfleiste ---------- */
#kopfleiste { background: var(--primaer); color: var(--auf-primaer); position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--schatten) 25%, transparent); }
.kopf-innen { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .55rem .9rem; max-width: 1400px; margin: 0 auto; }
.logo { font-weight: 700; font-size: 1.05rem; letter-spacing: .3px; white-space: nowrap; }
#hauptmenu { display: flex; gap: .15rem; flex-wrap: wrap; flex: 1; }
#hauptmenu a { color: var(--auf-primaer); text-decoration: none; padding: .45rem .65rem; border-radius: 8px;
  font-size: .92rem; white-space: nowrap; }
#hauptmenu a:hover { background: color-mix(in srgb, var(--vorder) 12%, transparent); }
#hauptmenu a.aktiv { background: var(--akzent); color: var(--auf-akzent); font-weight: 600; }
.kopf-rechts { display: flex; align-items: center; gap: .55rem; font-size: .85rem; }
.klein-btn { background: color-mix(in srgb, var(--vorder) 14%, transparent); color: var(--auf-primaer); border: 1px solid color-mix(in srgb, var(--vorder) 30%, transparent);
  border-radius: 8px; padding: .35rem .7rem; cursor: pointer; font-size: .82rem; }
.klein-btn:hover { background: color-mix(in srgb, var(--vorder) 25%, transparent); }

/* ---------- Inhalt ---------- */
#inhalt { max-width: 1400px; margin: 0 auto; padding: 1rem .9rem 4rem; }
h1 { color: var(--primaer); font-size: 1.5rem; margin: .6rem 0 .9rem; }
h2 { color: var(--primaer); font-size: 1.15rem; margin: 1.1rem 0 .5rem; }
.lade-hinweis { text-align: center; color: var(--text-leise); padding: 3rem 0; }

.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 14px;
  padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: 0 1px 3px color-mix(in srgb, var(--schatten) 6%, transparent); }
.karten-reihe { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

/* ---------- Buttons ---------- */
button, .btn { font-family: inherit; font-size: .95rem; }
.btn { display: inline-block; background: var(--akzent); color: var(--auf-akzent); border: none; border-radius: 10px;
  padding: .6rem 1.1rem; cursor: pointer; font-weight: 600; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn.primaer { background: var(--primaer); }
.btn.gefahr { background: var(--rot); }
.btn.gruen { background: var(--gruen); }
.btn.leise { background: color-mix(in srgb, var(--blau) 12%, transparent); color: var(--primaer); }
.btn.gross { font-size: 1.15rem; padding: .9rem 1.5rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-reihe { display: flex; gap: .6rem; flex-wrap: wrap; margin: .7rem 0; }

/* ---------- Formulare ---------- */
label { display: block; font-weight: 600; font-size: .88rem; margin: .65rem 0 .2rem; color: var(--blau); }
input, select, textarea { width: 100%; padding: .55rem .65rem; border: 1.5px solid var(--rand);
  border-radius: 9px; font-size: .95rem; font-family: inherit; background: var(--flow-karte); color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 18%, transparent); }
input[type="checkbox"] { width: auto; transform: scale(1.25); margin-right: .45rem; }
.formular-gitter { display: grid; gap: .2rem .9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.feld-hinweis { font-size: .78rem; color: var(--text-leise); margin-top: .15rem; }
.pflicht::after { content: " *"; color: var(--rot); }

/* ---------- Tabellen ---------- */
.tabellen-halter { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; background: var(--flow-karte); }
th { background: var(--primaer); color: var(--auf-primaer); text-align: left; padding: .5rem .6rem; white-space: nowrap; }
td { border-bottom: 1px solid var(--rand); padding: .45rem .6rem; vertical-align: top; }
tr:hover td { background: color-mix(in srgb, var(--blau) 12%, transparent); }
.zeile-klickbar { cursor: pointer; }

/* ---------- Ampel ---------- */
.ampel { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; border-radius: 8px;
  padding: .18rem .55rem; font-size: .85rem; color: var(--auf-primaer); }
.ampel.gruen { background: var(--gruen); }
.ampel.orange { background: var(--orange); }
.ampel.rot { background: var(--rot); }
.ampel.geschlossen { background: var(--still); }

/* ---------- Kalender-Raster ---------- */
/* Feste Tabellenaufteilung: alle Standort-Spalten exakt gleich breit */
.kalender-tabelle { table-layout: fixed; width: 100%; }
.kalender-tabelle th { overflow-wrap: break-word; white-space: normal; }
.kalender-tabelle th:first-child { width: 92px; }
.kalender-tabelle td { padding: 0; }
.kal-zelle { min-width: 120px; padding: .4rem .5rem; cursor: pointer; border-left: 4px solid transparent; }
.kal-zelle.gruen { background: color-mix(in srgb, var(--gruen) 12%, transparent); border-left-color: var(--gruen); }
.kal-zelle.orange { background: color-mix(in srgb, var(--orange) 12%, transparent); border-left-color: var(--orange); }
.kal-zelle.rot { background: color-mix(in srgb, var(--rot) 12%, transparent); border-left-color: var(--rot); }
.kal-zelle.geschlossen { background: color-mix(in srgb, var(--blau) 12%, transparent); color: var(--text-leise); }
.kal-zelle:hover { outline: 2px solid var(--akzent); outline-offset: -2px; }
.kal-datum { font-weight: 700; font-size: .82rem; }
.kal-info { font-size: .75rem; color: var(--text-leise); }
.kal-we td:first-child { background: color-mix(in srgb, var(--blau) 12%, transparent); }
.kal-feiertag { background: color-mix(in srgb, var(--blau) 12%, transparent) !important; }
.markierung { display: inline-block; border-radius: 6px; padding: 0 .35rem; font-size: .75rem;
  background: var(--akzent); color: var(--auf-akzent); margin-left: .3rem; }
.markierung.ferien { background: var(--lila); }
.vertretung-offen { color: var(--rot); font-weight: 700; font-size: .75rem; white-space: nowrap; }
.vertretung-ok { color: var(--gruen); font-size: .75rem; white-space: nowrap; }

/* ---------- Dienstplan-Wochenraster ---------- */
.woche-gitter { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: .5rem; min-width: 1080px; }
.tag-spalte { background: var(--flow-karte); border: 1px solid var(--rand); border-radius: 10px; padding: .45rem; }
.tag-kopf { font-weight: 700; font-size: .85rem; margin-bottom: .35rem; display: flex; justify-content: space-between; align-items: center; }
.schicht-karte { border-radius: 8px; padding: .3rem .45rem; font-size: .8rem; margin-bottom: .3rem;
  background: color-mix(in srgb, var(--blau) 12%, transparent); border-left: 4px solid var(--akzent); cursor: pointer; }
.schicht-karte:hover { filter: brightness(.96); }
.schicht-karte.kv { background: color-mix(in srgb, var(--lila) 12%, transparent); border-left-color: var(--lila); }
.schicht-karte.problem { background: color-mix(in srgb, var(--rot) 12%, transparent); border-left-color: var(--rot); }
.schicht-zeit { color: var(--text-leise); font-size: .75rem; }
.quali-mini { display: inline-block; color: var(--auf-primaer); border-radius: 5px; font-size: .75rem;
  font-weight: 700; padding: 0 .3rem; vertical-align: middle;
  /* Farbe der Qualifikation: als Custom Property vom Elternelement gesetzt (#30) — im Markup
     steht kein style-Attribut mehr, weil die Sicherheitsrichtlinie das verbietet. */
  background: var(--chip-farbe, var(--primaer)); }
.plus-btn { width: 100%; background: none; border: 1.5px dashed var(--rand); color: var(--text-leise);
  border-radius: 8px; padding: .25rem; cursor: pointer; }
.plus-btn:hover { border-color: var(--akzent); color: var(--akzent-text); }

/* ---------- Meldungen (Toasts) ---------- */
#meldungen { pointer-events: none; position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 1000;
  display: flex; flex-direction: column; gap: .5rem; width: min(480px, 92vw); }
.meldung { border-radius: 12px; padding: .8rem 1rem; color: var(--auf-primaer); font-weight: 600;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--schatten) 25%, transparent); animation: meldung-ein .25s ease; }
.meldung.erfolg { background: var(--gruen); }
.meldung.fehler { background: var(--rot); }
.meldung.info { background: var(--primaer); }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } }
/* Meldungen nur mit Bewegung, nie durchsichtig: auch wenn die Bewegung steht, bleiben sie über der Abdunklung lesbar (ADR-079) */
@keyframes meldung-ein { from { transform: translateY(8px); } }

/* ---------- Modal ---------- */
#modal-hintergrund { position: fixed; inset: 0; background: color-mix(in srgb, var(--schatten) 55%, transparent); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 3vh 1rem; overflow-y: auto; }
#modal-box { background: var(--flow-karte); border-radius: 16px; padding: 1.2rem 1.3rem; width: min(720px, 96vw);
  max-height: 92vh; max-height: 92dvh; overflow-y: auto; box-sizing: border-box; box-shadow: 0 12px 48px color-mix(in srgb, var(--schatten) 35%, transparent); }
#modal-box h2 { margin-top: 0; }

/* ---------- Warnungs-Listen ---------- */
.warnung-liste { margin: .5rem 0; padding: 0; list-style: none; }
.warnung-liste li { background: color-mix(in srgb, var(--orange) 12%, transparent); border-left: 4px solid var(--orange); border-radius: 6px;
  padding: .45rem .6rem; margin-bottom: .35rem; font-size: .88rem; }
.warnung-liste li.hart { background: color-mix(in srgb, var(--rot) 12%, transparent); border-left-color: var(--rot); font-weight: 600; }
.hinweis-box { background: color-mix(in srgb, var(--blau) 12%, transparent); border-left: 4px solid var(--akzent); border-radius: 8px;
  padding: .6rem .8rem; font-size: .88rem; margin: .6rem 0; }

/* ---------- Terminal (Stempeluhr) ---------- */
.terminal { position: fixed; inset: 0; background: var(--primaer); color: var(--auf-primaer); z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: 1rem; text-align: center; }
.terminal h1 { color: var(--auf-primaer); font-size: 1.6rem; margin: 0; }
.terminal-uhr { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#kamera-halter { position: relative; width: min(440px, 100%); aspect-ratio: 1; border-radius: 20px;
  overflow: hidden; background: var(--primaer); border: 4px solid var(--akzent); }
#kamera-video { width: 100%; height: 100%; object-fit: cover; }
.scan-rahmen { position: absolute; inset: 12%; border: 3px dashed color-mix(in srgb, var(--vorder) 65%, transparent); border-radius: 16px; pointer-events: none; }
.terminal-ergebnis { font-size: 1.5rem; font-weight: 700; padding: 1.2rem 1.6rem; border-radius: 16px; }
.terminal-ergebnis.erfolg { background: var(--gruen); }
.terminal-ergebnis.fehler { background: var(--rot); }
.numpad { display: grid; grid-template-columns: repeat(3, 84px); gap: .6rem; justify-content: center; }
.numpad button { font-size: 1.5rem; padding: .9rem 0; border-radius: 14px; border: none;
  background: color-mix(in srgb, var(--vorder) 14%, transparent); color: var(--auf-primaer); cursor: pointer; }
.numpad button:hover { background: color-mix(in srgb, var(--vorder) 28%, transparent); }
/* Im Dialog (heller Hintergrund) waren die Tasten weiß auf weiß — seit der Übernahme, gefunden bei #3 */
#modal-box .numpad button { background: color-mix(in srgb, var(--blau) 12%, transparent); color: var(--primaer); }
#modal-box .numpad button:hover { background: color-mix(in srgb, var(--blau) 22%, transparent); }
.pin-anzeige { font-size: 2rem; letter-spacing: .6rem; min-height: 2.6rem; }

/* ---------- Login ---------- */
.login-halter { max-width: 420px; margin: 8vh auto; }
.login-halter .logo-gross { text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--primaer); margin-bottom: 1rem; }
.backup-codes { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; letter-spacing: .06em; line-height: 1.7; text-align: center; background: color-mix(in srgb, var(--blau) 12%, transparent); border-radius: 8px; padding: .8rem 1rem; margin: .8rem 0; }
/* Terminal-Freischaltung (Befund K3) */
.freischaltcode { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.8rem; font-weight: 700; letter-spacing: .12em;
  text-align: center; background: var(--flow-karte); border-radius: 8px; padding: .6rem 1rem; margin: .6rem 0; user-select: all; }
.freischaltcode-eingabe { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.4rem; text-align: center;
  letter-spacing: .12em; text-transform: uppercase; }
.netz-zeile { display: grid; grid-template-columns: minmax(9rem, 1fr) 2fr auto; gap: .6rem; align-items: start; margin: .5rem 0; }

/* ---------- Kleinkram ---------- */
.abzeichen { display: inline-block; background: var(--akzent); color: var(--auf-akzent); border-radius: 999px;
  font-size: .75rem; padding: .1rem .5rem; font-weight: 700; }
.abzeichen.rot { background: var(--rot); }
.abzeichen.grau { background: var(--still); }
.tag-chip { display: inline-block; background: color-mix(in srgb, var(--blau) 12%, transparent); color: var(--primaer); border-radius: 999px;
  font-size: .76rem; padding: .12rem .55rem; margin: .12rem .18rem 0 0; }
.hilfe { cursor: help; border-bottom: 1px dotted var(--rand); }
.recht { text-align: right; }
.zentriert { text-align: center; }
.geburtstag-heute { background: color-mix(in srgb, var(--gold) 12%, transparent); border-left: 4px solid var(--orange); }

/* ---------- Druck ---------- */
@media print {
  #kopfleiste, .btn, .btn-reihe, #meldungen { display: none !important; }
  body { background: #fff; }
  .karte { border: none; box-shadow: none; }
}

/* ---------- Mobil ---------- */
@media (max-width: 720px) {
  .netz-zeile { grid-template-columns: 1fr; }
  .kopf-innen { padding: .45rem .6rem; }
  #hauptmenu { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; }
  h1 { font-size: 1.25rem; }
  #inhalt { padding: .7rem .55rem 4rem; }
  .numpad { grid-template-columns: repeat(3, 72px); }
}

/* ---------- Ersatz für frühere Inline-Stile (#30, Content-Security-Policy) ----------
   Die Oberfläche darf keine style-Attribute mehr ins Markup schreiben. Was dort stand,
   steht jetzt hier; nur Werte aus den Stammdaten (Farben) setzt app.js über das CSSOM. */
.saldo-plus  { color: var(--gruen); }
.saldo-minus { color: var(--rot); }
.kamera-hinweis { padding: 2rem; }
.kamera-hinweis.auf-dunkel { color: var(--auf-primaer); }

/* ---------- Sicherheitshinweise auf der Startseite (#31) ---------- */
.hinweis-karte { border-left: 4px solid var(--orange); }
.hinweis { padding: .55rem .7rem; border-radius: 8px; margin-top: .5rem; background: var(--hintergrund); }
.hinweis-hoch { background: color-mix(in srgb, var(--rot) 12%, transparent); }
.hinweis-mittel { background: color-mix(in srgb, var(--orange) 12%, transparent); }
.hinweis-rat { font-size: .9rem; margin-top: .15rem; }

/* Ein-Tipp-Stempeln (ADR-010) und Mitarbeiter-Zusammenfassung */
.stempel-knopf { width: 100%; font-size: 1.4rem; padding: 1.2rem; }
.abstand-oben { margin-top: 1rem; }
.ohne-umbruch { white-space: nowrap; }
.kachel-reihe { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kachel { flex: 1; min-width: 150px; text-align: center; margin: 0; }
.kachel-wert { font-size: 1.7rem; font-weight: 700; }
.positiv { color: var(--gruen); }
.negativ { color: var(--rot); }
.farbpunkt { display: inline-block; width: .8em; height: .8em; border-radius: 50%; margin-right: .4em; vertical-align: middle; }

/* Schlüsselbund (ADR-011) */
.suchfeld { flex: 1; min-width: 220px; }
.zugang { border-top: 1px solid var(--rand); padding: .7rem 0; }
.zugang:first-of-type { border-top: none; }
.zugang-kopf { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.zugang-geheim:not(:empty) { background: color-mix(in srgb, var(--blau) 12%, transparent); border-radius: 10px; padding: .6rem .8rem; margin-top: .6rem; }
.zugang-zeile { display: flex; align-items: center; gap: .6rem; margin: .25rem 0; flex-wrap: wrap; }
.zugang-feld { color: var(--text-leise); min-width: 7.5rem; }
.zugang-zeile code { background: var(--flow-karte); border: 1px solid var(--rand); border-radius: 6px; padding: .25rem .5rem; font-size: 1.05rem; }
/* Vor-Ort-Nachweis (ADR-012) */
.zentriert-reihe { justify-content: center; }
.radius-feld { width: 90px; }

/* ============================================================
   Handbuch (ADR-013) — Leitbild Werkstatt
   Helle Kapitelansicht im Hausstil, das Kapitelnetz als dunkle Fläche darin.
   ============================================================ */
.hb-kopfzeile { display: flex; align-items: flex-end; justify-content: space-between;
  gap: .9rem; flex-wrap: wrap; margin: .4rem 0 .8rem; }
.hb-kopfzeile h1 { margin: 0; }
.hb-mikro { font-size: .75rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-leise); font-weight: 700; }
.hb-leise { color: var(--text-leise); }
.hb-nr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700;
  color: var(--akzent-text); white-space: nowrap; }

/* ---------- Brotkrumen ---------- */
.hb-brot { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  font-size: .85rem; color: var(--text-leise); margin-bottom: .7rem; }
.hb-brot button { border: 0; background: none; padding: 0; color: var(--akzent-text);
  font-size: .85rem; cursor: pointer; text-decoration: underline; }

/* ---------- Suche ---------- */
.hb-suche { position: relative; margin-bottom: 1rem; }
.hb-suche-zeile { display: flex; align-items: center; gap: .55rem; background: var(--flow-karte);
  border: 1.5px solid var(--rand); border-radius: 12px; padding: .15rem .8rem; }
.hb-suche-zeile:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 18%, transparent); }
.hb-lupe { color: var(--text-leise); font-size: 1.1rem; }
.hb-suche-feld { border: 0 !important; box-shadow: none !important; padding: .6rem 0 !important; }
.hb-treffer { position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 40;
  background: var(--flow-karte); border: 1px solid var(--rand); border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--schatten) 18%, transparent); max-height: 60vh; overflow-y: auto; }
.hb-treffer-zeile { display: flex; align-items: baseline; gap: .6rem; width: 100%; text-align: left;
  border: 0; background: none; padding: .6rem .85rem; cursor: pointer; border-bottom: 1px solid var(--rand); }
.hb-treffer-zeile:hover { background: color-mix(in srgb, var(--blau) 12%, transparent); }
.hb-treffer-titel { flex: 1; }
.hb-treffer-leer { padding: .9rem; color: var(--text-leise); font-size: .9rem; }

/* ---------- Kapitelnetz ---------- */
.hb-netz { position: relative; height: min(68vh, 620px); border-radius: 16px; overflow: hidden;
  background: radial-gradient(900px 480px at 20% 10%, color-mix(in srgb, var(--akzent) 14%, transparent), transparent 62%),
              radial-gradient(760px 420px at 85% 85%, color-mix(in srgb, var(--lila) 13%, transparent), transparent 62%),
              linear-gradient(170deg, var(--flow-tief) 0%, var(--flow-tief) 100%);
  border: 1px solid var(--flach-hoch); margin-bottom: 1rem; }
.hb-netz-flaeche { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.hb-netz-flaeche.zieht { cursor: grabbing; }
.hb-netz-flaeche.zeigt { cursor: pointer; }
.hb-tipp { position: absolute; z-index: 5; pointer-events: none; max-width: 300px;
  background: color-mix(in srgb, var(--flaeche) 95%, transparent); border: 1px solid color-mix(in srgb, var(--linie) 30%, transparent); border-radius: 10px;
  padding: .55rem .75rem; color: var(--auf-primaer); font-size: .86rem; box-shadow: 0 12px 30px color-mix(in srgb, var(--schatten) 50%, transparent); }
.hb-tipp-meta { color: var(--text-leise); font-size: .76rem; margin-top: .15rem; }
.hb-legende { position: absolute; left: .8rem; bottom: .8rem; z-index: 4; display: flex;
  flex-wrap: wrap; gap: .3rem; max-width: calc(100% - 5rem); }
.hb-legende-knopf { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  background: color-mix(in srgb, var(--flaeche) 78%, transparent); border: 1px solid color-mix(in srgb, var(--linie) 20%, transparent); color: var(--text);
  border-radius: 20px; padding: .25rem .7rem; font-size: .78rem; }
.hb-legende-knopf:hover { background: color-mix(in srgb, var(--vorder) 10%, transparent); color: var(--auf-primaer); }
.hb-legende-punkt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.hb-werkzeug { position: absolute; right: .8rem; bottom: .8rem; z-index: 4; display: flex;
  flex-direction: column; gap: .25rem; background: color-mix(in srgb, var(--flaeche) 78%, transparent); border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--linie) 20%, transparent); padding: .25rem; }
.hb-wz { width: 34px; height: 34px; border: 0; background: none; color: var(--text);
  border-radius: 9px; cursor: pointer; font-size: 1rem; }
.hb-wz:hover { background: color-mix(in srgb, var(--vorder) 10%, transparent); color: var(--akzent-text); }
.hb-stiller { position: absolute; left: 50%; transform: translateX(-50%); bottom: .55rem; z-index: 3;
  color: var(--text-leise); font-size: .75rem; white-space: nowrap; max-width: 94%; overflow: hidden;
  text-overflow: ellipsis; pointer-events: none; }

/* ---------- Landkarte ---------- */
.hb-band { border-left: 5px solid var(--akzent); }
.hb-band-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.hb-band-kopf h2 { margin: .1rem 0 .5rem; }
.hb-zaehler { font-size: .8rem; color: var(--text-leise); white-space: nowrap; }
.hb-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.hb-chip { display: inline-flex; align-items: baseline; gap: .35rem; cursor: pointer;
  background: var(--flow-karte); border: 1px solid var(--rand); border-radius: 20px;
  padding: .28rem .75rem; font-size: .84rem; color: var(--text); text-align: left; }
.hb-chip:hover { border-color: var(--akzent); color: var(--primaer); }
.hb-chip.gesperrt { background: var(--flow-karte-hell); color: var(--text-leise); cursor: default; }
.hb-chip-nr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; color: var(--akzent-text); }
.hb-chip.gesperrt .hb-chip-nr { color: var(--text-leise); }
.hb-zeile { cursor: pointer; }
.hb-zeile:hover td { background: color-mix(in srgb, var(--blau) 12%, transparent); }

/* ---------- Kapitelansicht ---------- */
.hb-aufblick-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: .9rem; flex-wrap: wrap; }
.hb-titel { font-size: 1.35rem; margin: .15rem 0 .4rem; }
.hb-rollen { display: flex; gap: .3rem; flex-wrap: wrap; }
.hb-rolle { background: color-mix(in srgb, var(--blau) 12%, transparent); color: var(--blau); border-radius: 20px;
  padding: .15rem .65rem; font-size: .75rem; font-weight: 700; }
.hb-meta { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; font-size: .84rem; color: var(--text-leise); }
.hb-dreissig { background: linear-gradient(120deg, color-mix(in srgb, var(--akzent) 12%, transparent), color-mix(in srgb, var(--blau) 12%, transparent)); border-left: 4px solid var(--akzent-tief);
  border-radius: 0 12px 12px 0; padding: .85rem 1rem; margin-top: .9rem; }
.hb-dreissig p { margin: 0; }

.hb-falt { border: 1px solid var(--rand); border-radius: 12px; margin-bottom: .6rem; overflow: hidden; background: var(--flow-karte); }
.hb-falt-knopf { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left;
  border: 0; background: none; padding: .8rem .95rem; cursor: pointer; font-weight: 600; color: var(--primaer); }
.hb-falt-knopf:hover { background: color-mix(in srgb, var(--blau) 12%, transparent); }
.hb-falt-nr { width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--blau) 12%, transparent);
  display: grid; place-items: center; flex: 0 0 28px; font-size: .95rem; }
.hb-falt-titel { flex: 1; }
.hb-pfeil { color: var(--text-leise); }
.hb-falt-koerper { padding: 0 .95rem .95rem; }
.hb-untertitel { color: var(--primaer); margin: .9rem 0 .35rem; font-size: 1rem; }
.hb-liste { margin: .4rem 0; padding-left: 1.3rem; }
.hb-liste li { margin: .3rem 0; }
.hb-zitat { border-left: 3px solid var(--rand); margin: .6rem 0; padding: .1rem 0 .1rem .8rem; color: var(--text-leise); }
.hb-code { background: var(--flach); color: var(--auf-primaer); border-radius: 10px; padding: .7rem .9rem;
  overflow-x: auto; font-size: .82rem; margin: .6rem 0; }
.hb-code-art { color: var(--text-leise); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .12em; margin-bottom: .35rem; }
.hb-verweis { border: 0; background: color-mix(in srgb, var(--blau) 12%, transparent); color: var(--blau); border-radius: 6px;
  padding: 0 .35rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; font-size: .85em; cursor: pointer; }
.hb-verweis:hover { background: var(--akzent); color: var(--auf-akzent); }

.hb-pruefliste { list-style: none; margin: .3rem 0; padding: 0; }
.hb-pruefliste li { display: flex; align-items: flex-start; gap: .65rem;
  padding: .5rem 0; border-top: 1px solid var(--rand); }
.hb-pruefliste li:first-child { border-top: 0; }
.hb-haken { flex: 0 0 24px; width: 24px; height: 24px; border: 2px solid var(--rand);
  border-radius: 7px; background: var(--flow-karte); color: transparent; cursor: pointer; padding: 0;
  display: grid; place-items: center; }
.hb-haken[aria-pressed="true"] { background: var(--gruen); border-color: var(--gruen); color: var(--auf-akzent); }
.hb-erledigt { text-decoration: line-through; color: var(--text-leise); }
.hb-check-meta { margin-left: auto; font-size: .76rem; color: var(--text-leise); white-space: nowrap; }
.hb-check-fuss { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--rand); }

.hb-hinweis { border-radius: 10px; padding: .75rem .9rem; }
.hb-h-warn { background: color-mix(in srgb, var(--orange) 12%, transparent); border-left: 4px solid var(--gold); }
.hb-h-info { background: color-mix(in srgb, var(--blau) 12%, transparent); border-left: 4px solid var(--akzent); }
.hb-offen { border-left: 4px solid var(--blau); }
.hb-posten { display: flex; align-items: flex-start; gap: .6rem; padding: .45rem 0;
  border-top: 1px solid var(--rand); font-size: .92rem; }
.hb-posten:first-of-type { border-top: 0; }
.hb-art { flex: 0 0 auto; border-radius: 6px; padding: .05rem .5rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .04em; }
.hb-art-input { background: color-mix(in srgb, var(--blau) 12%, transparent); color: var(--blau); }
.hb-art-pruefen { background: color-mix(in srgb, var(--blau) 12%, transparent); color: var(--blau); }
.hb-art-drive { background: color-mix(in srgb, var(--blau) 12%, transparent); color: var(--text-leise); }

.hb-nachbarn { margin-bottom: .8rem; }
.hb-nachbarn-titel { font-size: .75rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-leise); font-weight: 700; margin-bottom: .4rem; }

@media (max-width: 720px) {
  .hb-netz { height: min(60vh, 460px); }
  .hb-legende { max-width: calc(100% - 4rem); overflow-x: auto; flex-wrap: nowrap; }
  .hb-check-meta { margin-left: 0; width: 100%; }
}

/* ---------- Handbuch: Arbeiten, Leitung, Werkbank ---------- */
.hb-werkbank { margin-bottom: 1rem; }
.hb-werkbank .karte { margin-bottom: 0; }
.hb-karte-pflicht { border-left: 4px solid var(--rot); }
.hb-pflichtband { display: flex; align-items: center; justify-content: space-between;
  gap: .9rem; flex-wrap: wrap; margin-bottom: .9rem; }
.hb-h-pflicht { background: color-mix(in srgb, var(--rot) 12%, transparent); border-left: 4px solid var(--rot); }
.hb-h-ok { background: color-mix(in srgb, var(--gruen) 12%, transparent); border-left: 4px solid var(--gruen); }
.hb-reiter { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .9rem; }
.hb-reiter-knopf { border: 1px solid var(--rand); background: var(--flow-karte); color: var(--text);
  border-radius: 20px; padding: .4rem .9rem; cursor: pointer; font-size: .88rem; }
.hb-reiter-knopf:hover { border-color: var(--akzent); }
.hb-reiter-knopf.aktiv { background: var(--primaer); color: var(--auf-primaer); border-color: var(--primaer); font-weight: 600; }
.hb-chip.aktiv { background: var(--primaer); color: var(--auf-primaer); border-color: var(--primaer); }
.hb-chip.aktiv .hb-chip-nr { color: var(--auf-primaer); }
.hb-posten-text { flex: 1; min-width: 0; }
.hb-posten select { width: auto; font-size: .82rem; padding: .25rem .4rem; }
/* Lebende SOP (ADR-082): Vorschläge mit Vorher/Nachher */
/* #inhalt: bausteine.css setzt den Rand jeder Karte mit #inhalt .karte */
.karte.sop-karte { display: grid; gap: .45rem; }
#inhalt .karte.sop-karte { border-left: 6px solid var(--blau); }
.sop-ki-schalter { display: grid; gap: .4rem; justify-items: start; margin-top: .5rem; }
#inhalt .karte.sop-risiko-3 { border-left-color: var(--rot); }
#inhalt .karte.sop-risiko-2 { border-left-color: var(--orange); }
.sop-kopf { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; }
.sop-risiko { font-weight: 700; font-size: .9rem; }
.sop-was { font-size: 1.08rem; }
.sop-kapitel { display: flex; flex-wrap: wrap; gap: .3rem; }
.sop-stelle { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sop-stelle pre { white-space: pre-wrap; word-break: break-word; margin: .2rem 0 0; font: inherit; font-size: .92rem; }
.sop-vorher { background: color-mix(in srgb, var(--rot) 8%, transparent); border-radius: 8px; padding: .4rem .6rem; }
.sop-nachher { background: color-mix(in srgb, var(--gruen) 10%, transparent); border-radius: 8px; padding: .4rem .6rem; }
.sop-marke { font-size: .8rem; font-weight: 700; color: var(--text-leise); }
.sop-leitlinie { display: grid; grid-template-columns: minmax(8rem, 1.2fr) auto minmax(6rem, .8fr) minmax(8rem, 1.4fr) auto; gap: .5rem; align-items: center; padding: .35rem 0; }
@media (max-width: 720px) { .sop-stelle, .sop-leitlinie { grid-template-columns: 1fr; } }
.sop-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }

/* „Meine Arbeit“ statt „Arbeit“ (Kritik 11/2026, E-8) ist länger: zwischen 1101 und 1360 px etwas weniger Innenabstand,
   damit die Kopfzeile nicht über den Rand läuft (die Grundregel steht in flow.css; diese ist genauer und gewinnt) */
@media (min-width: 1101px) and (max-width: 1360px) {
  .kopf-innen #hauptmenu .nav-bereich { padding: 0 11px; }
}
/* Ein Menü (Note 1, R4): bis zu sechs Bereiche mit längeren Namen („Dienst & Urlaub“, „Team & Praxis“). Bis 1500 px ist die
   Suche oben ein runder Knopf wie die anderen (⌘K und „Suchen“ in der Hilfe-Leiste bleiben), die Bereiche rücken enger */
@media (min-width: 1101px) and (max-width: 1500px) {
  .kopf-innen .kopf-suche .ks-text, .kopf-innen .kopf-suche .ks-taste { display: none; }
  .kopf-innen .kopf-suche { padding: 0 12px; }
  .kopf-innen #hauptmenu { gap: 2px; }
  .kopf-innen #hauptmenu .nav-bereich { padding: 0 10px; gap: 6px; }
}
@media (min-width: 1101px) and (max-width: 1290px) {
  .kopf-innen #hauptmenu .nb-zeichen { display: none; }   /* die Wörter tragen, die Zeichen gehen */
}

/* ---------- Kennzahl „Fälle pro Vollzeitkraft“ (ADR-088, public/fpv.js) ---------- */
.fpv-paare { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 4px 12px; margin: 8px 0; }
.fpv-paare dt { color: var(--text-leise); }
.fpv-paare dd { margin: 0; font-variant-numeric: tabular-nums; }
.fpv-klein { font-size: .95rem; margin: 12px 0 4px; }
.fpv-regeln { margin: 4px 0 8px; padding-left: 1.2rem; }
.fpv-regeln li { margin: 2px 0; }
.fpv-ort { border: 1px solid var(--rand); border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; }
.fpv-ort legend { font-weight: 600; padding: 0 4px; }
@media (max-width: 700px) {
  .fpv-paare { grid-template-columns: 1fr; gap: 0; }
  .fpv-paare dd { margin-bottom: 6px; }
}

/* ---------- Privatpatienten (ADR-089, public/privatpatienten.js) ---------- */
.pp-fenster { display: grid; gap: 12px; }
.pp-fenster h2 { margin: 0; }
.pp-wer { margin: 0; font-weight: 600; }
.pp-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-knoepfe > .bs-knopf, .pp-knoepfe > .bs-knopf-leise { min-height: 48px; }
.pp-arten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pp-arten > .bs-knopf { min-height: 56px; justify-content: center; font-size: 1.05rem; }
.pp-treffer { max-height: 50vh; overflow-y: auto; }
@media (max-width: 700px) {
  .pp-knoepfe > * { flex: 1 1 100%; justify-content: center; }
}

/* Lager (ADR-093): Meldebestand je Ort */
.lager-soll { display: inline-flex; gap: 6px; }
.lager-soll input { width: 4.5em; }
.lager-ssb-eingabe { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lager-ssb-eingabe input { width: 4.5em; }
.lager-ssb-eingabe select { max-width: 11em; }
@media (max-width: 600px) {
  .bs-zeile:has(> .lager-ssb-eingabe) { flex-wrap: wrap; }
  .bs-zeile:has(> .lager-ssb-eingabe) > .bs-zeile-ziel { flex-basis: 100%; }
  .lager-ssb-eingabe { flex-basis: 100%; justify-content: flex-start; }
  .lager-ssb-eingabe select { max-width: none; flex: 1; }
}
.lager-anfrage-weg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--rand); margin-bottom: 8px; }
.lager-anfrage-weg.ssb { background: color-mix(in srgb, var(--akzent) 12%, transparent); border-color: var(--akzent); }
.lager-weg-name { font-weight: 700; }
.lager-weg-grund { color: var(--text-leise); font-size: .9em; flex: 1; }
.lager-haken { width: 22px; height: 22px; margin: 0 8px; }
/* Lager Nachtrag 2c: Tage-Feld je Kategorie neben dem Namen */
.lager-tage { flex: none; width: 5.5em; }
/* Lager 2-0: Foto zur Materialanfrage */
.lager-foto img, .lager-foto-vorschau { display: block; max-width: 100%; max-height: 240px; margin: 8px 0; border-radius: 8px; object-fit: contain; }

/* Endkontrolle GESTALTUNG */
/* Befund 12: Belege — ein Filter an einer Stelle, je Auswahl ein Wort darüber statt einer Reiterleiste */
#inhalt .bl-filter { align-items: flex-end; }
#inhalt .bl-filter .bl-filter-feld { flex: 1 1 180px; max-width: 260px; }
#inhalt .bl-filter .bl-filter-feld select { width: 100%; min-height: 44px; flex: none; }
@media (max-width: 600px) { #inhalt .bl-filter .bl-filter-feld { max-width: none; } }
/* Endkontrolle Personen (10.11.2026, Befunde 12/13): Abschnitte der Person zeigen zugeklappt ihren Stand,
   ein Widerspruch zwischen Personen- und Anmelde-Adresse steht als ruhiger Hinweis über den Feldern. */
.ma-falt-titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.ma-falt-kurz { font-size: .85rem; font-weight: 400; color: var(--text-leise); overflow-wrap: anywhere; }
.ma-mail-widerspruch { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--akzent);
  background: color-mix(in srgb, var(--akzent) 10%, transparent); }
.ma-mail-widerspruch p { margin: 0 0 8px; }
.ma-mail-widerspruch .dp-wahl { overflow-wrap: anywhere; }
.ma-dialog [aria-invalid="true"] { border-color: var(--rot); }

/* Gemeinsame To-dos */
/* GF 10.11.2026: mehrere Personen per Häkchen, Schnellwahl „Geschäftsleitung“, je Punkt Haken und „Ich mache das“ */
.af-g-fuer { display: flex; flex-direction: column; gap: 8px; }
.af-g-schnell { align-self: flex-start; }
.af-g-wahl { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; padding: 4px;
  border: 1px solid var(--rand); border-radius: 12px; }
.af-g-person { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: 8px; cursor: pointer; }
.af-g-person input { width: 22px; height: 22px; flex: none; margin: 0; }
.af-g-person.af-g-immer { color: var(--text-leise); cursor: default; }
.af-g-person .feld-hinweis { margin: 0 0 0 auto; }
.af-g-punkte-feld { display: flex; flex-direction: column; gap: 6px; }
.af-g-punkte-feld .btn { align-self: flex-start; }
.af-g-punkt-liste { display: flex; flex-direction: column; gap: 6px; }
.af-g-mit { font-size: 1.05rem; font-weight: 600; margin: 4px 0 10px; }
.af-g-erledigt { font-size: 1.2rem; font-weight: 700; color: var(--gruen); margin: 0 0 10px; }
.af-g-punkte { display: flex; flex-direction: column; gap: 0; padding: 4px 12px; }
.af-g-punkt { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rand); }
.af-g-punkt:last-child { border-bottom: 0; }
.af-g-haken { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--rand); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--karte); padding: 0; cursor: pointer; }
.af-g-haken[aria-pressed="true"], .af-g-haken[data-erledigt="true"] { background: var(--gruen); border-color: var(--gruen); }
span.af-g-haken { cursor: default; }
.af-g-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.af-g-stand { font-size: .85rem; color: var(--text-leise); }
.af-g-dran .af-g-stand { color: var(--akzent); }
.af-g-fertig .af-g-text > span:first-child { color: var(--text-leise); text-decoration: line-through; }
.af-g-wer { flex: none; min-height: 44px; }
@media (max-width: 600px) {
  .af-g-punkt { flex-wrap: wrap; }
  .af-g-wer { margin-left: 44px; }
}

/* Testkonto der GF (ADR-108): Balken oben, solange die Sitzung das Testkonto zeigt — auffällig, groß genug für den Daumen */
#testansicht-balken { position: sticky; top: 0; z-index: 60; display: block; width: 100%; height: 2.75rem; margin: 0;
  padding: 0 .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 0; border-bottom: 3px solid var(--text); background: var(--orange); color: var(--flaeche);
  font: inherit; font-weight: 800; font-size: clamp(.85rem, 3.6vw, 1rem); text-align: center; cursor: pointer; }
#testansicht-balken:focus-visible { outline: 3px solid var(--text); outline-offset: -6px; }
#testansicht-balken.versteckt { display: none; }
body.testansicht #kopfleiste { top: 2.75rem; }
@media print { #testansicht-balken { display: none !important; } }

/* MCP-Zugang für Claude (ADR-110, public/mcp-zugang.js): lange Kennungen umbrechen statt die Breite zu sprengen */
.mcp-wert { font-family: ui-monospace, Menlo, monospace; word-break: break-all; margin: 2px 0 0; }
.mcp-rechte { flex-wrap: wrap; }