/* Inter selbst gehostet (#131) — Latin-Subset mit Umlauten, statische Schnitte,
   ausgeliefert über app.ts-Routen (Icon-Muster). 400/600 sind im HTML vorgeladen. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-700.woff2') format('woff2');
}

/* =====================================================================
   prama Design-Token (#131) — Variante A „Vibrant", eingefrorener Stand
   der Sign-off-Schleife (previews/VERDIKTE.md). Die Verdikte sind als
   DIE Werte eingebacken: Dichte „Mittel", Akzent „Gezügelt", Light Mode.
   Quelle: previews/variant-a/schale-preview.html + variant-a.md.
   ===================================================================== */
:root {
  color-scheme: light;
  font-family: var(--schrift-familie);
  line-height: var(--zeile-basis);

  /* ── Schrift ── */
  --schrift-familie: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gewicht-normal: 400;
  --gewicht-halbfett: 600;
  --gewicht-titel: 700;
  --spation-titel: -0.02em;
  --spation-etikett: 0.06em;
  --zeile-eng: 1.25;
  --zeile-mittel: 1.35;
  --zeile-basis: 1.5;
  --schrift-xs: 0.75rem; /* 12px — Etiketten, Badges, Zeitstempel */
  --schrift-s: 0.8125rem; /* 13px — Meta, Chips, leise Aktionen */
  --schrift-m: 0.9375rem; /* 15px — Kartentitel, Bedienelemente */
  --schrift-basis: 1rem; /* 16px — Fließtext, Mikro-Beschriftung */
  --schrift-xl: 1.25rem; /* 20px — Wortmarke, Detail-/Dialogtitel */
  --schrift-xxl: 1.5rem; /* 24px — Seitentitel */

  /* ── Raum (4er-Raster) ── */
  --raum-0: 0.25rem;
  --raum-1: 0.5rem;
  --raum-2: 0.75rem;
  --raum-3: 1rem;
  --raum-4: 1.25rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 3rem;

  /* ── Radien ── */
  --radius-karte: 16px;
  --radius-knopf: 12px;
  --radius-eingabe: 8px;
  --radius-pille: 999px;

  /* ── Maße ── */
  --hoehe-bedienung: 2.75rem; /* 44px Mindest-Touchziel */
  --strich: 1px;
  --strich-zustand: 3px; /* linke Zustands-Kante der Zubringer-Karte */
  --strich-fokus: 3px;
  --fokus-abstand: 2px;
  --punkt: 0.5rem; /* Dringend-Marke */
  --punkt-versatz: 0.375rem;
  --symbol-xs: 0.75rem;
  --symbol-s: 1.125rem;
  --mikro-groesse: 10.5rem; /* Held-Mikrofon 168px */
  --mikro-symbol: 2.25rem;
  --puls-weite: 1.75rem;
  --schub: 2px;
  --leiste-breite: 15rem;
  --spur-min: 20rem; /* EINE Mindestspur für alle Karten-Raster einer Fläche (umbruchfähig) */
  --inhalt-schmal: 44rem;
  --inhalt-breit: 76rem;
  --inhalt-mittel: 60rem; /* Lesebreite der Modul-Fenster ab 1024px (Modul 2, #155) */
  --dialog-breite: 26rem;
  --modul-fenster-breite: 58rem; /* Doku-Overlay: min(58rem, --fenster-breite-max) */
  --einstellungen-breite: 52rem; /* Lesebreite der Verwaltungs-Karten */
  --index-breite: 11rem; /* Verwaltungs-Index im Fenster */
  --index-eintrag-hoehe: 2.25rem; /* 36px sichtbar, 44px effektiv via ::after */
  --feld-breite: 16rem; /* Eingabebreite in Settings-Zeilen */
  --fenster-breite: 67.5rem; /* Verwaltungs-Fenster: 1080px … */
  --fenster-breite-max: 94vw; /* … bzw. 94vw */
  --fenster-hoehe: 88vh; /* Fensterhöhe (intern scrollend) */
  --textfeld-hoehe: 4.5rem;
  --aufnahme-freiraum: 13rem; /* Ergänzung: Platzbedarf des Aufnahme-Panels (#125) — im Preview nicht vorhanden */
  --zahl-min: 1.75rem;
  --cta-breite: 20rem;
  --held-hoehe: 55vh;
  /* Held-Säule des zweispaltigen Behandler-Startbilds (#200): so breit, dass die
     Zubringer-Spalte auf der vollen Arbeitsfläche genau --inhalt-schmal trägt. */
  --held-saeule: 24rem;
  --schein-groesse: 30rem;

  /* ── Dichte „Mittel" (Runde-2-Verdikt, fest eingebacken) ── */
  --dichte-polster-mittel: 0.875rem; /* 14px Karten-Innenraum */

  /* ── Marke (Orange) ── */
  --marke: #EF7B33; /* Leuchtakzent: Puls, Punkte, Schein — nur Nicht-Text */
  --marke-tief: #C2410C; /* Füllflächen + Fokusring — Weiß darauf 5,2:1 */
  --marke-tiefer: #9E3509; /* Hover auf Füllflächen — Weiß darauf 7,1:1 */
  --marke-text: #9A3412; /* Orange als Textfarbe — 6,4:1 auf --marke-flaeche */
  --marke-flaeche: #FDEEE2; /* getönte Orange-Fläche */
  --marke-puls: rgba(239, 123, 51, 0.45);
  --marke-puls-aus: rgba(239, 123, 51, 0);
  --mikro-verlauf: linear-gradient(180deg, #CC470C 0%, #A93A08 100%); /* beide Enden ≥4,5:1 zu Weiß */
  --held-schein: radial-gradient(closest-side, #FDEEE2 0%, rgba(253, 238, 226, 0) 100%);

  /* ── Dringend (Rot — sticht die Marke aus) ── */
  --dringend: #AF1D25; /* Weiß darauf 6,9:1; auf --grund 6,1:1 */
  --dringend-flaeche: #FBEDED;
  --dringend-linie: #F2D2D1;

  /* ── Neutral (warme Grautöne) ── */
  --grund: #FFFAF6; /* Seitengrund, warmes Off-White */
  --flaeche: #FFFFFF; /* Karten, Eingaben, Leiste */
  --sand: #F6EDE4; /* stille Füllung: Status-Badge, Ghost-Hover */
  --linie: #F0E5D9; /* Kartenränder, Trennlinien */
  --linie-stark: #DCCBBA; /* Eingabe-/Chipränder, neutraler Punkt */
  --tinte: #201A15; /* Primärtext */
  --tinte-gedaempft: #6B6259; /* Sekundärtext — ≥5,2:1 auf allen hellen Flächen */
  --schrift-hell: #FFFFFF;
  --kulisse: rgba(32, 26, 21, 0.45);
  --kulisse-fenster: rgba(32, 26, 21, 0.35); /* Fenster-Backdrop (mit Weichzeichnung) */
  --weichzeichnung: 8px; /* backdrop-filter des Fenster-Backdrops */

  /* ── Schatten (warm getönt, nie kaltes Grau) ── */
  --schatten-karte: 0 1px 2px rgba(63, 34, 10, 0.04), 0 4px 12px rgba(63, 34, 10, 0.06);
  --schatten-schwebend: 0 2px 6px rgba(63, 34, 10, 0.05), 0 12px 28px rgba(63, 34, 10, 0.1);
  --schatten-dialog: 0 8px 20px rgba(63, 34, 10, 0.1), 0 28px 72px rgba(63, 34, 10, 0.28);
  --schatten-mikro: 0 6px 14px rgba(194, 65, 12, 0.22), 0 18px 44px rgba(239, 123, 51, 0.35);
  --schatten-mikro-hover: 0 8px 18px rgba(194, 65, 12, 0.26), 0 22px 52px rgba(239, 123, 51, 0.45);
  --schatten-fenster: 0 12px 32px rgba(63, 34, 10, 0.14), 0 32px 96px rgba(63, 34, 10, 0.3);

  /* ── Fokus ── */
  --fokus: var(--marke-tief);

  /* ── Bewegung ── */
  --tempo: 150ms;
  --tempo-leiste: 200ms; /* Leisten-Pin: Aus-/Einfahren, Schweben */
  --puls-dauer: 2.6s;

  /* ── Ebenen ── */
  --ebene-kopf: 10;
  --ebene-leiste: 40;
  --ebene-fenster: 800; /* Verwaltungs-Fenster */
  --ebene-dialog: 900;
  --ebene-sperre: 1000;

  /* ── Symbole (Masken; Farbe kommt aus dem jeweiligen Token) ── */
  --symbol-mikrofon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 18v4'/%3E%3C/svg%3E");
  --symbol-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  --symbol-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M12 5l7 7-7 7'/%3E%3C/svg%3E");
  /* Ergänzung zum Sheet: Personen-Symbol für den Ecke-Chip — er trägt neben dem
     Symbol den sichtbaren Namen und die Rolle (kein Initialen-Datenfluss, #175). */
  --symbol-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5'/%3E%3C/svg%3E");
}

/* ── Basis ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  max-width: var(--inhalt-breit);
  margin: 0 auto;
  padding: var(--raum-3) 5rem var(--raum-7) var(--raum-3);
  font-size: var(--schrift-basis);
  font-weight: var(--gewicht-normal);
  color: var(--tinte);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--marke-flaeche);
  color: var(--tinte);
}

/* Überschriften: 700 mit enger Spationierung; Seitentitel 24px, Wortmarke
   und Detail-/Dialogtitel 20px. */
h1,
h2,
h3,
h4,
h5 {
  font-weight: var(--gewicht-titel);
  letter-spacing: var(--spation-titel);
  line-height: var(--zeile-eng);
  color: var(--tinte);
}

h1 {
  margin: 0;
  font-size: var(--schrift-xl);
}

h2 {
  margin: var(--raum-1) 0 var(--raum-3);
  font-size: var(--schrift-xxl);
}

h3 {
  margin: var(--raum-2) 0;
  font-size: var(--schrift-basis);
}

h4 {
  margin: var(--raum-2) 0 var(--raum-1);
  font-size: var(--schrift-m);
}

h5 {
  margin: var(--raum-1) 0 var(--raum-0);
  font-size: var(--schrift-s);
}

/* Abschnitts-Etiketten der Arbeits-Screens: VERSAL, 12px, gedämpft. */
#meineAufgabenTitel,
#behandlerAufgabenTitel,
#behandlerAufgabenGruppen h4,
#dokuEntwuerfe > h3,
#dokuUebertrag > h3,
#dokuZuletzt > h3,
#arbeitsplatz h3,
[data-uebersicht-gruppen] h4,
section[aria-label="Arbeitslast"] :is(h3, h4) {
  margin: 0 0 var(--raum-1);
  font-size: var(--schrift-xs);
  text-transform: uppercase;
  letter-spacing: var(--spation-etikett);
  color: var(--tinte-gedaempft);
}

.dokuVorratHinweis {
  font-weight: var(--gewicht-normal);
  text-transform: none;
  letter-spacing: normal;
}

time {
  font-variant-numeric: tabular-nums;
}

/* „Gezügelt" eingebacken: Verweise laufen in Tinte, Orange bleibt der Handlung. */
a {
  color: var(--tinte);
}

/* Der Skip-Link bleibt im Dokument, aber bis zum Fokus außerhalb des Bildes.
   Fixiert statt absolut: er hängt am Bild, nicht am Seitenanfang — auf einer
   gescrollten Fläche kommt er in der Ecke hoch statt die Seite hochzureißen. */
.sprungmarke {
  position: fixed;
  top: var(--raum-3);
  left: var(--raum-3);
  z-index: var(--ebene-dialog);
  transform: translateY(-300%);
  padding: var(--raum-1) var(--raum-3);
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-pille);
  box-shadow: var(--schatten-schwebend);
}

.sprungmarke:focus {
  transform: none;
}

/* Das Sprungziel trägt kein eigenes Aussehen — der Ring gehört zur Tastatur,
   nicht zum programmatischen Fokus nach dem Sprung. */
#inhalt:focus {
  outline: none;
}

/* ── Kopfzeile: Wortmarke links, Avatar-Chip rechts — eine optische Reihe.
   Beide Mittelachsen liegen auf raum-3 + hoehe-bedienung/2: der Chip sitzt
   fix bei top raum-3 (= body-Polster), die Kopfzeile zentriert auf
   mindestens Chip-Höhe. ── */
body > header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--raum-3);
  min-height: var(--hoehe-bedienung);
}

body > header h1 {
  display: inline-flex;
  align-items: baseline;
}

/* Der Wortmarken-Punkt kommt aus dem CSS — das Markup bleibt <h1>prama</h1>. */
body > header h1::after {
  content: "";
  width: var(--punkt);
  height: var(--punkt);
  margin-left: var(--raum-0);
  border-radius: var(--radius-pille);
  background: var(--marke);
}

#meldung {
  margin: 0;
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-normal);
  color: var(--tinte-gedaempft);
}

/* Die haftende Warnung bricht als volle Zeile unter die Wortmarke. */
body > header #warnung {
  flex: 1 1 100%;
}

body.praxismanagerAnsicht {
  --leiste-sichtbreite: var(--leiste-breite);
  padding-left: calc(var(--leiste-breite) + var(--raum-6));
  /* Die Leinwand verlängert die fixierte Schienenfläche auf Dokumenthöhe (#194). */
  background-image: linear-gradient(
    to right,
    var(--flaeche) 0 calc(var(--leiste-sichtbreite) - var(--strich)),
    var(--linie) calc(var(--leiste-sichtbreite) - var(--strich)) var(--leiste-sichtbreite),
    transparent var(--leiste-sichtbreite)
  );
}

/* ── Praxismanager-Leiste: weiße Schiene, Einträge als volle Zeilen.
   Pin/Hover-Peek (claude.ai-Muster) folgt in einer späteren Scheibe — hier
   nur der visuelle Umbau der angehefteten Leiste samt Einklapp-Verhalten. ── */
#praxismanagerLeiste {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--ebene-leiste);
  width: var(--leiste-breite);
  /* Hält den Leisten-Fuß bei ein- und ausfahrender Browserleiste im Bild;
     ohne dvh-Unterstützung bestimmt weiterhin inset die Viewport-Höhe. */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--raum-4) var(--raum-2);
  background: var(--flaeche);
  border-right: var(--strich) solid var(--linie);
  overflow-y: auto;
}

#praxismanagerLeiste .leistenEintraege {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
  order: 1;
  /* Füllt die Leiste, damit die Verwaltung per margin-top:auto an den Fuß rückt. */
  flex: 1;
}

/* Verwaltung sitzt am unteren Ende der Leiste, abgesetzt von der Tagesnavigation
   (Start/Eingang/Übersicht/Aufgaben) — Admin-Etage statt Alltagsziel. Bleibt im
   .leistenEintraege-Container, damit Einklapp- und Mobil-Regeln unverändert greifen. */
#leisteVerwaltung {
  margin-top: auto;
}

.leistenEintraege button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  margin: 0;
  padding: var(--raum-1) var(--raum-3);
  font-size: var(--schrift-m);
  color: var(--tinte-gedaempft);
  background: transparent;
  border-color: transparent;
}

.leistenEintraege button:hover {
  background: var(--sand);
  border-color: transparent;
  color: var(--tinte);
  box-shadow: none;
}

/* Aktiver Ort: getönte Fläche + kleiner Punkt — „Gezügelt" behält Aktiv-Orange. */
.leistenEintraege button[aria-current="page"] {
  background: var(--marke-flaeche);
  color: var(--marke-text);
}

.leistenEintraege button[aria-current="page"]::before {
  content: "";
  width: calc(var(--punkt) * 0.75);
  height: calc(var(--punkt) * 0.75);
  border-radius: var(--radius-pille);
  background: var(--marke-tief);
}

/* „Leiste einklappen" klebt unten als leise Aktion. */
#leisteEinklappen {
  order: 2;
  margin: auto 0 0;
  align-self: flex-start;
  padding: var(--raum-1) var(--raum-2);
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
  background: transparent;
  border-color: transparent;
}

#leisteEinklappen:hover {
  background: var(--sand);
  border-color: transparent;
  color: var(--tinte);
  box-shadow: none;
}

body.leisteEingeklappt {
  /* Der sichtbare Streifen bleibt schmaler als der 5rem-Inhaltsrand. */
  --leiste-sichtbreite: 4rem;
  padding-left: 5rem;
}

body.leisteEingeklappt #praxismanagerLeiste {
  /* Transform erhält die volle Breite, ohne beim Einklappen Layout auszulösen. */
  transform: translateX(calc(-1 * (var(--leiste-breite) - var(--leiste-sichtbreite))));
  overflow: hidden;
}

body.leisteEingeklappt #praxismanagerLeiste .leistenEintraege {
  display: none;
}

/* Der Pin-Knopf wohnt im sichtbaren rechten Streifen. */
body.leisteEingeklappt #leisteEinklappen {
  align-self: flex-end;
}

/* Hover-Peek (Runde-4-Amendment, claude.ai-Muster) AUF dem bestehenden
   Einklapp-Mechanismus: der 4rem-Streifen ist die Fangzone — Hover oder
   Fokus in der Leiste lässt sie in voller Breite ÜBER dem Inhalt schweben
   (nur transform und Schatten, kein Reflow: der Inhalt bleibt beim
   5rem-Rand). Tastatur-Weg: Tab erreicht den Pin-Knopf in der Leiste;
   aria-expanded pflegt der bestehende Handler, Klick heftet wieder an. */
body.leisteEingeklappt #praxismanagerLeiste:is(:hover, :focus-within) {
  transform: translateX(0);
  overflow-y: auto;
  box-shadow: var(--schatten-schwebend);
}

body.leisteEingeklappt #praxismanagerLeiste:is(:hover, :focus-within) .leistenEintraege {
  display: flex;
}

/* Bewegung nur bei erlaubter Animation: das Schweben gleitet compositor-seitig. */
@media (prefers-reduced-motion: no-preference) {
  #praxismanagerLeiste {
    transition: transform var(--tempo-leiste) ease, box-shadow var(--tempo-leiste) ease;
  }
}

#leistenBurger {
  display: none;
}

/* Auf Desktop ist die Leiste Teil des Layouts — sie überlagert nichts, also
   bleibt die Kulisse aus. Sichtbar wird sie allein in der Mobil-Regel (#212). */
#leistenKulisse {
  display: none;
}

label,
#personPanel span,
#personPanel strong {
  display: block;
  margin: 0.5rem 0;
}

/* Feldbeschriftungen: 12px/600 gedämpft — der Bedientext im Feld bleibt 16px (#239). */
label {
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte-gedaempft);
}

/* Auswahl-Zeilen mit ganzen Sätzen (Radio/Checkbox) bleiben Bedientext. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  font-size: var(--schrift-m);
  color: var(--tinte);
}

/* Author-display schlägt sonst das UA-[hidden] — hidden muss immer gewinnen. */
[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
  margin: 0.2rem;
}

/* Einheitliche, ruhige Formfelder: 44px-Touchziel, Radius 8, starker Rand.
   16px, nicht --schrift-m: iOS-Safari zoomt beim Fokus in jedes Feld unter 16px
   heran und kehrt nicht zurück (#239). Ohne Medienabfrage, weil das Zoomen nicht
   an der Viewport-Breite hängt — das Gerät am Stuhl ist ein iPad, auch quer. */
input,
select,
textarea {
  min-height: var(--hoehe-bedienung);
  padding: 0 var(--raum-2);
  font-size: var(--schrift-basis);
  color: var(--tinte);
  background: var(--flaeche);
  border: var(--strich) solid var(--linie-stark);
  border-radius: var(--radius-eingabe);
  transition: border-color var(--tempo) ease, box-shadow var(--tempo) ease;
}

textarea {
  min-height: var(--textfeld-hoehe);
  padding: var(--raum-1) var(--raum-2);
  line-height: var(--zeile-basis);
  resize: vertical;
}

/* Fokussierte Felder tragen NUR den 3px-Ring — ein zusätzlich orange
   gefärbter Feldrand ergab einen schweren Doppel-Rahmen (Screenshot-Befund);
   der Rand bleibt neutral. */

/* Häkchen und Radios sind keine 44px-Felder — kompakt, mit Marken-Akzent. */
input[type="checkbox"],
input[type="radio"] {
  width: var(--symbol-s);
  height: var(--symbol-s);
  min-height: 0;
  accent-color: var(--marke-tief);
}

/* Datei-Felder: der Rahmen kommt vom Standard-Eingabefeld, der native
   Auswahl-Knopf trägt die Sekundärform (Radius 12, Rand, neutraler Hover). */
input[type="file"] {
  padding: var(--raum-0) var(--raum-2) var(--raum-0) var(--raum-0);
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

input[type="file"]::file-selector-button {
  margin: 0 var(--raum-2) 0 0;
  min-height: calc(var(--hoehe-bedienung) - var(--raum-2));
  padding: var(--raum-0) var(--raum-2);
  font: inherit;
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte);
  background: var(--flaeche);
  border: var(--strich) solid var(--linie-stark);
  border-radius: var(--radius-knopf);
  cursor: pointer;
  transition: border-color var(--tempo) ease, box-shadow var(--tempo) ease;
}

input[type="file"]:hover::file-selector-button {
  border-color: var(--tinte-gedaempft);
  box-shadow: var(--schatten-karte);
}

/* Knöpfe: Basisform = ruhige Sekundärform (weiße Fläche, starker Rand, Radius 12). */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-1);
  min-height: var(--hoehe-bedienung);
  padding: var(--raum-1) var(--raum-4);
  font-size: var(--schrift-m);
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeile-eng);
  color: var(--tinte);
  background: var(--flaeche);
  border: var(--strich) solid var(--linie-stark);
  border-radius: var(--radius-knopf);
  cursor: pointer;
  transition: background-color var(--tempo) ease, border-color var(--tempo) ease,
    color var(--tempo) ease, box-shadow var(--tempo) ease, transform var(--tempo) ease;
}

/* „Gezügelt" eingebacken: generischer Hover ist neutral (Tinte), nicht orange. */
button:hover {
  border-color: var(--tinte-gedaempft);
  box-shadow: var(--schatten-karte);
}

button:active {
  transform: translateY(var(--strich));
}

/* Fokus: 3px-Ring auf jedem interaktiven Element (Outline statt box-shadow,
   damit er nie mit Kartenschatten kollidiert). */
:where(button, input, select, textarea, a, audio, summary):focus-visible {
  outline: var(--strich-fokus) solid var(--fokus);
  outline-offset: var(--fokus-abstand);
}

/* Primär trägt die EINE Akzent-Handlung je Screen („Gezügelt"): Sprechen,
   Einstempeln, Bestätigen, Anmelden/Eintreten, Rückmeldung senden. Alle übrigen
   Submits (Verwaltung) bleiben bewusst in der Sekundärform. */
.mikrofon,
#startbildPrimaerAktionen button,
#entwurfBestaetigen,
.primaerAktion,
#rueckmeldungSenden,
#anmeldung button[type="submit"],
#sperrbildschirmForm button[type="submit"],
#stepUpForm button[type="submit"] {
  background: var(--marke-tief);
  border-color: var(--marke-tief);
  color: var(--schrift-hell);
  box-shadow: var(--schatten-karte);
}

.mikrofon:hover,
#startbildPrimaerAktionen button:hover,
#entwurfBestaetigen:hover,
.primaerAktion:hover,
#rueckmeldungSenden:hover,
#anmeldung button[type="submit"]:hover,
#sperrbildschirmForm button[type="submit"]:hover,
#stepUpForm button[type="submit"]:hover {
  background: var(--marke-tiefer);
  border-color: var(--marke-tiefer);
  color: var(--schrift-hell);
  box-shadow: var(--schatten-schwebend);
}

.mikrofon::before {
  content: "";
  width: var(--symbol-s);
  height: var(--symbol-s);
  background: var(--schrift-hell);
  -webkit-mask: var(--symbol-mikrofon) center / contain no-repeat;
  mask: var(--symbol-mikrofon) center / contain no-repeat;
}

/* Leise Aktionen (Ghost): randlos, gedämpft, Sand-Hover in Tinte („Gezügelt"). */
.neuigkeitenKopf button,
.neuigkeitEintrag button,
#entwurfVerwerfen,
#detailZurueck,
#rueckmeldungAbbrechen,
#dokuSpaeterPruefen,
#dokuFensterSchliessen,
.triageNachfrage [data-abbrechen],
#warnungSchliessen {
  background: transparent;
  border-color: transparent;
  color: var(--tinte-gedaempft);
  font-size: var(--schrift-s);
  padding: var(--raum-1) var(--raum-2);
}

.neuigkeitenKopf button:hover,
.neuigkeitEintrag button:hover,
#entwurfVerwerfen:hover,
#detailZurueck:hover,
#rueckmeldungAbbrechen:hover,
#dokuSpaeterPruefen:hover,
#dokuFensterSchliessen:hover,
.triageNachfrage [data-abbrechen]:hover,
#warnungSchliessen:hover {
  background: var(--sand);
  border-color: transparent;
  color: var(--tinte);
  box-shadow: none;
}

/* Zurück-Wege mit Pfeilsymbol (Maske, rotiert). */
#detailZurueck::before,
#zumStartbild::before,
#verwaltungZumStartbild::before {
  content: "";
  width: var(--symbol-xs);
  height: var(--symbol-xs);
  background: var(--tinte-gedaempft);
  transform: rotate(180deg);
  -webkit-mask: var(--symbol-pfeil) center / contain no-repeat;
  mask: var(--symbol-pfeil) center / contain no-repeat;
}

#detailZurueck:hover::before,
#zumStartbild:hover::before,
#verwaltungZumStartbild:hover::before {
  background: var(--tinte);
}

#zumStartbild,
#verwaltungZumStartbild {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  min-height: var(--hoehe-bedienung);
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte-gedaempft);
  text-decoration: none;
  transition: color var(--tempo) ease;
}

#zumStartbild:hover,
#verwaltungZumStartbild:hover {
  color: var(--tinte);
}

/* Armierte Zwei-Klick-Knöpfe: der scharfe Zustand alarmiert im Dringend-Rot —
   der eine konkurrenzlose Alarm-Kanal des Systems. */
button[data-armiert="true"],
button[data-armiert="true"]:hover {
  background: var(--dringend);
  border-color: var(--dringend);
  color: var(--schrift-hell);
}

button:disabled {
  opacity: 0.55;
  cursor: default;
  filter: none;
}

/* Haftende Datenverlust-Warnung: getönte Dringend-Fläche statt nackter Zeile. */
#warnung {
  display: flex;
  align-items: center;
  gap: var(--raum-1);
  margin: var(--raum-1) 0;
  padding: var(--raum-1) var(--raum-1) var(--raum-1) var(--raum-3);
  background: var(--dringend-flaeche);
  border: var(--strich) solid var(--dringend-linie);
  border-radius: var(--radius-knopf);
}

#warnungText {
  flex: 1;
}

/* Leere Alarm-/Statusknoten verschwinden — sonst tragen sie Geister-Ränder und -Räume. */
[role="alert"]:empty,
[role="status"]:empty {
  display: none;
}

/* Betreiber-Banner: Amber-Warnfläche außerhalb des Marken-Sheets — Absicht,
   dieser Zustand soll sich fremd anfühlen. */
#betreiberBanner {
  position: sticky;
  top: 0;
  z-index: calc(var(--ebene-kopf) + 1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-1) var(--raum-2);
  border: 2px solid #8a5600;
  border-radius: var(--radius-knopf);
  padding: var(--raum-2) var(--raum-3);
  margin-bottom: var(--raum-3);
  background: #fff3cd;
  font-size: var(--schrift-s);
}

/* ── Filter-Chips: Pillen, gedrückt = gefülltes Tieforange mit Haken ── */
#aufgabenFilter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-4);
  margin-bottom: var(--raum-2);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  margin: var(--raum-1) 0;
}

.chips .chip {
  margin: 0;
}

.chip {
  border-radius: var(--radius-pille);
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
  padding: var(--raum-1) var(--raum-3);
}

.chip:hover {
  border-color: var(--tinte-gedaempft);
  color: var(--tinte);
}

.chip[aria-pressed="true"] {
  background: var(--marke-tief);
  border-color: var(--marke-tief);
  color: var(--schrift-hell);
}

.chip[aria-pressed="true"]::before {
  content: "";
  width: var(--symbol-xs);
  height: var(--symbol-xs);
  background: currentColor;
  -webkit-mask: var(--symbol-haken) center / contain no-repeat;
  mask: var(--symbol-haken) center / contain no-repeat;
}

.chip[aria-pressed="true"]:hover {
  background: var(--marke-tiefer);
  border-color: var(--marke-tiefer);
  color: var(--schrift-hell);
}

/* Die Label-Chips im Detail tragen ihr Häkchen bereits im Text — kein Doppel-Haken. */
.detailGruppe .chip[aria-pressed="true"]::before {
  content: none;
}

.standortChip {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  border: var(--strich) solid var(--linie-stark);
  border-radius: var(--radius-pille);
  padding: var(--raum-1) var(--raum-2);
}

.standortChip[hidden] {
  display: none;
}

/* ── Karten-Listen und Raster: Listen-Gap 8px, Raster-Gap 12px („Mittel") ── */
#aufgabenKarten,
#startbildAufgabenKarten,
#behandlerDringendKarten,
#behandlerUeberfaelligKarten,
#dokuEntwuerfeKarten,
#dokuUebertragKarten,
#dokuZuletztKarten {
  display: grid;
  gap: var(--raum-1);
  margin-top: var(--raum-2);
}

.uebersichtGruppe {
  display: grid;
  gap: var(--raum-1);
  min-width: 0;
}

/* EIN Raster je Fläche (Audit 07/2026, §2.3): Eingang, Signalgruppen und »Meine
   Aufgaben« laufen in derselben Spur statt in drei nebeneinanderliegenden
   Spaltenbreiten — der Blick springt sonst bei jedem Abschnitt neu ein. */
[data-eingang-karten],
[data-uebersicht-gruppen],
[data-meine-aufgaben-karten] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spur-min)), 1fr));
  gap: var(--raum-2);
  margin-top: var(--raum-2);
}

/* Flächen-Fehler der Listen: ruhige Zeile statt Absatz-Sprung (leer: unsichtbar). */
[data-eingang-fehler],
[data-uebersicht-fehler],
[data-meine-aufgaben-fehler],
#startbildAufgabenFehler,
#aufgabenFehler {
  margin: var(--raum-1) 0;
}

/* Leere Zustände: still, aber sichtbar — gestrichelter Rahmen statt nacktem Satz. */
.leer {
  margin: 0;
  padding: var(--raum-3) var(--raum-4);
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
  border: var(--strich) dashed var(--linie-stark);
  border-radius: var(--radius-knopf);
}

/* Entwarnung der Übersicht (#199): eine Zeile über die ganze Gruppenspur an der Stelle
   der drei leeren Signalkästen. Ohne Rahmen und ohne Fläche — der gestrichelte Rahmen
   gehört dem Leerzustand, und ein vierter Kasten gäbe dem Nichts wieder Fläche. */
.entwarnung {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--raum-0) var(--raum-2);
  margin: 0;
}

.entwarnung strong {
  font-size: var(--schrift-m);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte);
}

.entwarnung span {
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

/* Der Wechsel leer ↔ gefüllt darf nicht springen: die Zeile blendet auf, das Raster
   bleibt unangetastet — nur opacity und transform, nie Layout. */
@media (prefers-reduced-motion: no-preference) {
  .entwarnung {
    animation: entwarnungEin var(--tempo) ease-out;
  }

  @keyframes entwarnungEin {
    from {
      opacity: 0;
      transform: translateY(calc(var(--schub) * -1));
    }
  }
}

/* ── Aufgaben-Karten: Dringend als Punkt + getönte Fläche, KEINE Balken ── */
.aufgabeKarte {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--raum-2);
  row-gap: var(--raum-0);
  align-items: start;
  justify-content: start;
  text-align: left;
  width: 100%;
  padding: var(--dichte-polster-mittel) var(--raum-3);
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-knopf);
  box-shadow: var(--schatten-karte);
}

.aufgabeKarte::before {
  display: none;
  content: "";
  grid-row: 1;
  grid-column: 1;
  width: var(--punkt);
  height: var(--punkt);
  margin-top: var(--punkt-versatz);
  border-radius: var(--radius-pille);
  background: var(--linie-stark);
}

.aufgabeKarte strong {
  grid-column: 1;
  font-size: var(--schrift-m);
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeile-mittel);
  color: var(--tinte);
}

.aufgabeKarte span {
  grid-column: 1;
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-normal);
  color: var(--tinte-gedaempft);
}

/* Zubringer-Karte (Modul 2): erbt die Kartengestalt der Aufgaben-Liste, aber OHNE
   Dringend-Marke — ein Artefakt hat kein Dringend-Kennzeichen (ADR-0014, CONTEXT.md).
   Statt dessen trägt sie den Zustand als stille Kante links. */
.eintragKarte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--raum-0);
  justify-items: start;
  text-align: left;
  width: 100%;
  padding: var(--dichte-polster-mittel) var(--raum-3);
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-left-width: var(--strich-zustand);
  border-radius: var(--radius-knopf);
  box-shadow: var(--schatten-karte);
}

.eintragKarte[data-status="freigegeben"] {
  border-left-color: var(--marke);
}

/* Sanktionierte stille Variante: Nachschlagbares ist weiter ein Knopf, aber kein
   schwerer Arbeitsvorrat mehr. */
.eintragKarte--still {
  background: transparent;
  border-color: var(--linie);
  box-shadow: none;
}

/* Der eben übertragene Eintrag, für den Moment getönt (#213): er steht still unter
   »Zuletzt übertragen«, muss aber ohne Suchen zu finden sein — nach dem Übertrag
   gibt es keinen Rückweg mehr. Marke, nie Dringend: der Alarm-Kanal bleibt den
   Aufgaben (Dominanz-Regel). Hinter .eintragKarte--still, sonst gewänne dort die
   Transparenz. */
.eintragKarte--frisch {
  background: var(--marke-flaeche);
  border-left-color: var(--marke);
}

/* Verschachtelt, damit die Marken-Farbe die gedämpfte `.eintragKarte span` überstimmt. */
.eintragKarte .eintragFrisch {
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  color: var(--marke-text);
}

.eintragKarte strong {
  font-size: var(--schrift-m);
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeile-mittel);
  color: var(--tinte);
}

.eintragKarte span {
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-normal);
  color: var(--tinte-gedaempft);
}

/* Zustands-Chips des Entwurfs (Capture-Redesign, Inkrement 3): seit die
   Strukturierung nachläuft, IST »wird transkribiert« ein sichtbarer Zustand. Sie
   sind Auskunft, keine Filter — deshalb bewusst nicht `.chip`, das trägt in dieser
   Schale gedrückte Zustände. Kein Vollrot: die Dominanz-Regel gehört den Aufgaben. */
.eintragKarte .eintragChips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-0);
  margin-top: var(--raum-0);
}

/* Verschachtelt wie `.eintragFrisch`: sonst überschriebe die gedämpfte
   `.eintragKarte span` jede Chip-Farbe. */
.eintragKarte .eintragChip {
  padding: 0 var(--raum-1);
  border-radius: var(--radius-pille);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  line-height: calc(var(--raum-4) + var(--raum-0));
  background: var(--sand);
  color: var(--tinte);
}

.eintragKarte .eintragChip[data-art="pruefen"] {
  background: var(--marke-flaeche);
  color: var(--marke-text);
}

.eintragKarte .eintragChip[data-art="fehler"] {
  background: var(--dringend-flaeche);
  color: var(--dringend);
}

/* Abweichende gehörte Nummer: getönt wie eine Warnung, aber ohne Vollrot-Text —
   gebunden ist die getippte, hier steht nur, was daneben gehört wurde. */
.eintragKarte .eintragChip[data-art="konflikt"] {
  background: var(--dringend-flaeche);
  color: var(--tinte);
}

.eintragKarte:hover {
  border-color: var(--tinte-gedaempft);
  color: var(--tinte);
  box-shadow: var(--schatten-schwebend);
  transform: translateY(calc(-1 * var(--strich)));
}

#offeneAufnahmen {
  margin-bottom: var(--raum-5);
  padding: var(--raum-4);
  border: var(--strich) solid var(--linie-stark);
  border-radius: var(--radius-karte);
  background: var(--sand);
}

#offeneAufnahmenListe {
  display: grid;
  gap: var(--raum-2);
}

.offeneAufnahme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-3);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
}

.offeneAufnahme strong {
  margin-right: auto;
}

.eintragKarte[data-status="freigegeben"]:hover {
  border-left-color: var(--marke);
}

.eintragKarte--still:hover {
  background: var(--flaeche);
  /* Still bleibt still: der Schwebe-Schatten und der Hub aus .eintragKarte:hover werden
     zurückgenommen (DESIGN.md: stille Variante transparent, ohne Kartenschatten). */
  box-shadow: none;
  transform: none;
}

/* Die Tönung des frischen Übertrags überlebt den Hover — sie IST die Auskunft,
   nicht ein Zeigefinger-Effekt. */
.eintragKarte--frisch:hover {
  background: var(--marke-flaeche);
  border-left-color: var(--marke);
}

/* „Gezügelt": Karten-Hover neutral; nur Dringend behält seine rote Kante. */
.aufgabeKarte:hover {
  border-color: var(--tinte-gedaempft);
  color: var(--tinte);
  box-shadow: var(--schatten-schwebend);
  transform: translateY(calc(-1 * var(--strich)));
}

.aufgabeKarte[data-dringend="true"] {
  grid-template-columns: auto 1fr;
  background: var(--dringend-flaeche);
  border-color: var(--dringend-linie);
}

.aufgabeKarte[data-dringend="true"]::before {
  display: block;
  background: var(--dringend);
}

.aufgabeKarte[data-dringend="true"] strong,
.aufgabeKarte[data-dringend="true"] span {
  grid-column: 2;
}

.aufgabeKarte[data-dringend="true"]:hover {
  border-color: var(--dringend);
}

/* Die offene Aufgabe bleibt im Zweispalter neben dem Detail stehen und trägt darum
   den aktiven Zustand — getönte Marken-Fläche wie der aktive Leisten-Eintrag, kein
   Vollton: eine Auswahl darf im Alarm-Kanal nichts ausstechen. */
.aufgabeKarte[aria-current="true"] {
  border-color: var(--marke-tief);
}

/* Dringend behält seine Tönungsfläche — die Auswahl zeigt sich dort allein an der
   Kante, statt das Vollrot-Signal zu überschreiben (Dominanz-Regel). */
.aufgabeKarte[aria-current="true"]:not([data-dringend="true"]) {
  background: var(--marke-flaeche);
}

/* ── Neuigkeiten: weiße Radius-16-Karte mit Ungelesen-Punkt ── */
[data-neuigkeiten] {
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  padding: var(--raum-2) var(--raum-3);
  margin-bottom: var(--raum-4);
}

.neuigkeitenKopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  margin-bottom: var(--raum-1);
}

.neuigkeitenKopf h2 {
  margin: 0;
  font-size: var(--schrift-m);
}

[data-neuigkeiten-eintraege] {
  display: grid;
  gap: var(--raum-1);
}

.neuigkeitEintrag {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  border-top: var(--strich) solid var(--linie);
  padding: var(--raum-1) 0 0 var(--raum-3);
}

/* Ungelesen-Punkt — „Gezügelt": neutral statt orange. */
.neuigkeitEintrag::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--raum-1) + var(--punkt-versatz));
  width: var(--punkt);
  height: var(--punkt);
  border-radius: var(--radius-pille);
  background: var(--tinte-gedaempft);
}

.neuigkeitInhalt {
  flex: 1;
  text-align: left;
}

/* Der verlinkte Eintrag ist ein Knopf — er liest sich trotzdem als Fließtext. */
button.neuigkeitInhalt {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  font-size: var(--schrift-basis);
  font-weight: var(--gewicht-normal);
  color: var(--tinte);
  background: transparent;
  border-color: transparent;
}

button.neuigkeitInhalt:hover {
  background: var(--sand);
  border-color: transparent;
  color: var(--tinte);
  box-shadow: none;
}

.neuigkeitZeit {
  display: block;
  margin-top: var(--raum-0);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-normal);
  color: var(--tinte-gedaempft);
}

/* ── Triage- und Signal-Karten: Radius-16-Hülle, innere Karte randlos ── */
.triageKarte,
.signalKarte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
}

.triageKarte .aufgabeKarte,
.signalKarte .aufgabeKarte {
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-karte) var(--radius-karte) 0 0;
  box-shadow: none;
  padding: var(--raum-3) var(--raum-4) var(--raum-2);
}

.triageKarte .aufgabeKarte:hover,
.signalKarte .aufgabeKarte:hover {
  background: var(--grund);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.triageHandgriffe,
.signalHandgriffe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--raum-2);
  margin-top: auto;
  padding: var(--raum-2) var(--raum-3);
  border-top: var(--strich) solid var(--linie);
}

.triageHandgriffe label,
.signalHandgriffe label {
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  flex: 1;
  min-width: min(100%, 11rem);
  margin: 0;
}

.triageHandgriffe select,
.signalHandgriffe select {
  margin: 0;
}

.triageHandgriffe > button,
.signalHandgriffe > button {
  font-size: var(--schrift-s);
  margin: 0;
}

/* Der Handgriff-Fehler klebt an seiner Karte, nicht am Listenkopf. */
.triageKarte > [role="alert"],
.signalKarte > [role="alert"] {
  margin: 0;
  padding: 0 var(--raum-3) var(--raum-2);
}

/* Das Alter der Erfassung: leise Meta-Zeile unter dem Kartentext. Über der
   Untriagiert-Schwelle wird sie zur getönten Marken-Pille — nie zum Vollrot,
   das bleibt dem Dringend-Kanal allein (Dominanz-Regel). */
.triageAlter {
  margin: 0;
  padding: 0 var(--raum-4) var(--raum-2);
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

.triageAlter[data-warnend="true"] {
  color: var(--marke-text);
  font-weight: var(--gewicht-halbfett);
}

/* Die Rückfrage eines Handgriffs (Begründung, Datum): unter den Handgriffen im
   Kartenfluss, nie als Dialog über der Liste — die Karte bleibt im Blick. */
.triageNachfrage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
  border-top: var(--strich) solid var(--linie);
}

.triageNachfrage label {
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  flex: 1;
  min-width: min(100%, 11rem);
  margin: 0;
}

.triageNachfrage input {
  margin: 0;
}

.triageNachfrage > button {
  font-size: var(--schrift-s);
  margin: 0;
}

#arbeitsplatz > section,
#uebersichtBereich > section {
  margin-top: var(--raum-5);
}

/* ── Arbeitslast: ruhige Karte mit tabellarischen Zahlen-Pillen ── */
section[aria-label="Arbeitslast"] {
  max-width: 30rem;
  margin-top: var(--raum-3);
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  padding: var(--raum-2) var(--raum-3);
}

.arbeitslastZeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  margin: 0;
  padding: var(--raum-1) 0;
  font-size: var(--schrift-m);
}

.arbeitslastZeile + .arbeitslastZeile {
  border-top: var(--strich) solid var(--linie);
}

/* „Gezügelt": die Zahl-Pille läuft in Sand statt Orange-Tönung. */
.zahl {
  min-width: var(--zahl-min);
  padding: 0 var(--raum-1);
  text-align: center;
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-titel);
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  background: var(--sand);
  border-radius: var(--radius-pille);
}

/* Ein Zähler ohne Zahl ist keine Null, sondern nichts — die Pille verschwindet.
   Das Element bleibt dabei im DOM: als aria-live-Bereich muss es schon dastehen,
   bevor sich die Zahl ändert. */
.zahl:empty {
  display: none;
}

/* In der Leiste läuft der Zähler an den rechten Rand seines Eintrags; im Chip
   bleibt er am Wort, denn der Chip ist nur so breit wie sein Text. */
.leistenEintraege button > .zahl {
  margin-left: auto;
}

/* Nur für Vorlese-Programme: die Pille ist als Zahl neben ihrem Zugang lesbar,
   als Ansage wäre die nackte Zahl es nicht. */
.nurVorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Badges (Pillen): Status Sand, Aufnahme Tinte, Dringend Vollrot — VERSAL
   und schwerer als jedes Orange. Emitter: der Detail-Kopf (zeigeDetail). ── */
.detailBadges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  margin: var(--raum-1) 0 var(--raum-2);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-0);
  padding: var(--raum-0) var(--raum-2);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-titel);
  line-height: var(--zeile-basis);
  border-radius: var(--radius-pille);
  background: var(--sand);
  color: var(--tinte-gedaempft);
}

.badge[data-art="dringend"] {
  background: var(--dringend);
  color: var(--schrift-hell);
  text-transform: uppercase;
  letter-spacing: var(--spation-etikett);
}

.badge[data-art="aufnahme"] {
  background: var(--tinte);
  color: var(--schrift-hell);
}

/* ── Aufgaben-Zweispalter: Liste links, Detail rechts — erst ab --inhalt-breit ── */
/* Ab --inhalt-breit (76rem — @media liest keine Variable, der Wert steht darum
   ausgeschrieben) stehen Liste und Detail nebeneinander (Audit 07/2026, §2.1).
   Darunter wechseln sie sich weiter ab; auf dem Praxis-Tablet wäre der Zweispalter
   ein Gedränge. WELCHE der beiden Flächen sichtbar ist, entscheidet schale.js an
   derselben Schwelle — [hidden] gewinnt hier wie überall. */
@media (min-width: 76rem) {
  #aufgabenFlaeche {
    display: grid;
    grid-template-columns: minmax(0, var(--spur-min)) minmax(0, 1fr);
    column-gap: var(--raum-5);
    align-items: start;
  }

  /* Seitentitel, Filter-Chips und Flächen-Fehler laufen über BEIDE Spalten: die
     Chips filtern die Liste, nicht das Detail. */
  #aufgabenFlaeche > * {
    grid-column: 1 / -1;
  }

  /* Ohne offenes Detail behält die Liste die ganze Breite — sonst stünde ein
     schmales Listen-Band neben einer leeren Spalte. */
  #aufgabenFlaeche:has(#aufgabenDetail:not([hidden])) > #aufgabenUebersicht {
    grid-column: 1;
  }

  #aufgabenDetail {
    grid-column: 2;
  }
}

/* ── Aufgaben-Detail: Radius-16-Karte, Etiketten-Gruppen, Sand-Meldung ── */
#aufgabenDetail {
  /* Das Kartenpolster als Variable: die klebende Kopfzeile hebt es mit negativen
     Rändern auf, und schmal ist es ein anderes (siehe Medienabfrage unten). */
  --detail-polster-x: var(--raum-4);
  --detail-polster-y: var(--raum-3);
  min-width: 0;
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  padding: var(--detail-polster-y) var(--detail-polster-x) var(--raum-4);
  margin-top: var(--raum-2);
}

/* Der Rückweg bleibt beim Scrollen erreichbar (#211): er läuft in einer klebenden
   Kopfzeile mit, die die Kartenfläche über die volle Breite mitnimmt — sonst
   schöbe sich der Inhalt neben dem Ghost-Knopf durch. */
.detailKopfzeile {
  position: sticky;
  top: 0;
  z-index: var(--ebene-kopf);
  margin: calc(-1 * var(--detail-polster-y)) calc(-1 * var(--detail-polster-x))
    var(--raum-1);
  padding: var(--detail-polster-y) var(--detail-polster-x) var(--raum-1);
  background: var(--flaeche);
  border-radius: var(--radius-karte) var(--radius-karte) 0 0;
}

#detailZurueck {
  margin: 0 0 0 calc(-1 * var(--raum-2));
}

/* Die Statusaktionen stehen im Kopf, nicht in einer Gruppe: eine Reihe direkt
   unter den Badges (#211). */
.detailStatusAktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  margin: 0 0 var(--raum-2);
}

/* Der nächste Schritt steht zuerst und trägt die mittlere Stufe (getönte
   Marken-Fläche) — die Akzent-Füllung der Aufgaben-Fläche bleibt beim
   „Aufgabe sprechen" der Erfassungs-Gruppe („Gezügelt"). */
.detailStatusAktionen > button:first-child {
  background: var(--marke-flaeche);
  border-color: var(--marke-tief);
  color: var(--marke-text);
}

.detailStatusAktionen > button:first-child:hover {
  border-color: var(--marke-tiefer);
  color: var(--marke-text);
}

#detailInhalt > h2 {
  margin: 0 0 var(--raum-0);
  font-size: var(--schrift-xl);
}

.detailGruppe {
  margin-top: var(--raum-3);
  padding-top: var(--raum-2);
  border-top: var(--strich) solid var(--linie);
}

.detailGruppe > h3 {
  margin: 0 0 var(--raum-1);
  font-size: var(--schrift-xs);
  text-transform: uppercase;
  letter-spacing: var(--spation-etikett);
  color: var(--tinte-gedaempft);
}

/* Detail-Kopf: die Beschreibung liest sich als Fließtext, die Eigenschafts-
   Zeilen (Status, Zuständige, Patientenbezug) als gedämpfte Meta-Zeilen. */
#detailInhalt > p {
  margin: 0;
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

#detailInhalt > p:first-of-type {
  margin: 0 0 var(--raum-2);
  font-size: var(--schrift-basis);
  color: var(--tinte);
}

/* Handgriffe und Eigenschaften: Felder als schmale Spalten, Knöpfe in Reihe. */
.detailGruppe > label {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
  max-width: var(--cta-breite);
  margin: 0 0 var(--raum-2);
}

.detailGruppe :is(input, select) {
  margin: 0;
}

.detailGruppe > button {
  margin: 0 var(--raum-1) var(--raum-1) 0;
}

.detailGruppe > textarea {
  width: 100%;
  margin: 0 0 var(--raum-1);
}

.detailGruppe > input[type="file"] {
  width: 100%;
  margin: 0 0 var(--raum-2);
}

/* ── Aufklappung: EINE Sprache für selten Gebrauchtes (#211) ──
   Der Griff ist eine Etiketten-Zeile mit 44px-Touchziel und eigenem Pfeil (der
   native Marker ist plattformabhängig); offen wie zu bleibt er an derselben
   Stelle. EINE Klasse für beide Träger — Entwurf-Karte und Aufgaben-Detail. ── */
.aufklappung {
  border-top: var(--strich) solid var(--linie);
}

.aufklappung > summary {
  display: flex;
  align-items: center;
  gap: var(--raum-1);
  min-height: var(--hoehe-bedienung);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  text-transform: uppercase;
  letter-spacing: var(--spation-etikett);
  color: var(--tinte-gedaempft);
  list-style: none;
  cursor: pointer;
}

.aufklappung > summary::-webkit-details-marker {
  display: none;
}

.aufklappung > summary::before {
  content: "";
  width: var(--symbol-xs);
  height: var(--symbol-xs);
  background: var(--tinte-gedaempft);
  transition: transform var(--tempo) ease;
  -webkit-mask: var(--symbol-pfeil) center / contain no-repeat;
  mask: var(--symbol-pfeil) center / contain no-repeat;
}

.aufklappung[open] > summary::before {
  transform: rotate(90deg);
}

/* Der Fokusring gilt auch hier — die gepinnte :where-Liste bleibt unangetastet. */
summary:focus-visible {
  outline: var(--strich-fokus) solid var(--fokus);
  outline-offset: var(--fokus-abstand);
}

/* Im Detail schließt die Aufklappung die Gruppen ein: deren eigene Trennlinie
   entfällt an der ersten, sonst stünden zwei Linien übereinander. */
.aufklappung > .detailGruppe:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Verlauf: Zeilen mit neutralem Punkt („Gezügelt": kein Orange im Verlauf). */
#verlaufEintraege {
  display: grid;
  gap: var(--raum-1);
  margin-top: var(--raum-1);
}

#verlaufEintraege p {
  position: relative;
  margin: 0;
  padding-left: var(--raum-4);
  font-size: var(--schrift-s);
  color: var(--tinte);
}

#verlaufEintraege p::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--punkt-versatz);
  width: calc(var(--punkt) * 0.75);
  height: calc(var(--punkt) * 0.75);
  border-radius: var(--radius-pille);
  background: var(--linie-stark);
}

#detailMeldung {
  display: inline-block;
  margin: var(--raum-3) 0 0;
  padding: var(--raum-1) var(--raum-3);
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte-gedaempft);
  background: var(--sand);
  border-radius: var(--radius-pille);
}

/* Der generische :empty-Zaun verliert gegen die ID-Spezifität des
   display:inline-block darüber — ohne diese Regel stünde eine leere
   Sand-Pille am Kartenende. */
#detailMeldung:empty {
  display: none;
}

/* =====================================================================
   VERWALTUNG als Overlay-Fenster (#131, Runde-4/5-Amendment):
   claude.ai-Settings-Muster — zentriertes Fenster über dem sichtbaren
   Bereich, Backdrop dimmt wie die Dialoge, der Abschnitts-Index klebt
   ab ~64rem Fensterbreite als linke Spalte im Scrollport.
   ===================================================================== */
#verwaltungBereich {
  position: fixed;
  inset: 0;
  z-index: var(--ebene-fenster);
  margin: auto;
  width: min(var(--fenster-breite), var(--fenster-breite-max));
  height: min(var(--fenster-hoehe), calc(100vh - var(--raum-5)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--flaeche);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-fenster);
}

/* Der Backdrop hängt als fixiertes ::before am Fenster selbst — er kommt und
   geht mit dessen [hidden], ganz ohne Wrapper-Markup (fixierte Pseudo-Elemente
   entkommen dem overflow:hidden des Fensters). */
#verwaltungBereich::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Gleicher Backdrop wie die Dialoge (--kulisse, ohne Weichzeichnung): ein
     einheitliches Overlay-Gefühl statt zweier Dim-/Blur-Stufen (Nutzer-Verdikt).
     Damit entfällt auch der @supports-Fallback für alte Praxis-Tablets. */
  background: var(--kulisse);
}

#verwaltungSchliessen {
  position: absolute;
  top: var(--raum-2);
  right: var(--raum-2);
  z-index: var(--ebene-kopf);
  min-width: var(--hoehe-bedienung);
  margin: 0;
  padding: var(--raum-1);
  background: transparent;
  border-color: transparent;
  color: var(--tinte-gedaempft);
  font-size: var(--schrift-basis);
}

#verwaltungSchliessen:hover {
  background: var(--sand);
  border-color: transparent;
  color: var(--tinte);
  box-shadow: none;
}

/* Der Rückkehr-Anker der Naben-Admins läuft als leise Zeile über dem Titel. */
#verwaltungBereich > #verwaltungZumStartbild {
  margin: var(--raum-2) var(--raum-6) 0;
  align-self: flex-start;
}

#verwaltungBereich > h2 {
  margin: 0;
  padding: var(--raum-4) var(--raum-7) var(--raum-3) var(--raum-6);
  border-bottom: var(--strich) solid var(--linie);
  font-size: var(--schrift-xl);
}

#verwaltungBereich > #verwaltungFehler {
  margin: 0;
  padding: var(--raum-2) var(--raum-6) 0;
}

/* Fenster-Inneres: Körper scrollt, Index klebt links im Fenster. */
.verwaltungKoerper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-3);
  padding: var(--raum-4) var(--raum-6) var(--raum-6);
}

.verwaltungInhalt {
  max-width: var(--einstellungen-breite);
  min-width: 0;
}

.verwaltungIndex {
  display: none;
}

/* Das Suchfeld gehört zum sticky Index; seine Geometrie kommt aus der Formfeldregel. */
.verwaltungIndex > label {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
  margin: 0 0 var(--raum-2);
}

.verwaltungIndex > label > input {
  /* Ohne appearance gäbe WebKit dem Suchfeld die native Suchfeld-Form und
     unterliefe damit 44px und Radius 8 (iPad quer erreicht die 68.5rem). */
  appearance: none;
  width: 100%;
  margin: 0;
}

/* In der schmalen Index-Spur braucht der Leerzustand ein engeres Polster. */
.verwaltungIndex > .leer {
  margin-top: var(--raum-2);
  padding: var(--raum-2);
}

.verwaltungIndex .indexGruppe {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
}

.indexGruppe + .indexGruppe {
  margin-top: var(--raum-2);
  padding-top: var(--raum-2);
  border-top: var(--strich) solid var(--linie);
}

/* Keine Trennlinie vor der ersten sichtbaren Gruppe. */
.indexGruppe[hidden] + .indexGruppe {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.indexEtikett {
  padding: 0 var(--raum-2) var(--raum-0);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-titel);
  text-transform: uppercase;
  letter-spacing: var(--spation-etikett);
  color: var(--tinte-gedaempft);
}

#verwaltungBereich .verwaltungIndex a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--index-eintrag-hoehe); /* 36px sichtbar … */
  padding: 0 var(--raum-2);
  border-radius: var(--radius-knopf);
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte-gedaempft);
  text-decoration: none;
  transition: background-color var(--tempo) ease, color var(--tempo) ease;
}

#verwaltungBereich .verwaltungIndex a::after {
  /* … 44px effektive Trefferfläche (unsichtbare Erweiterung) */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc((var(--index-eintrag-hoehe) - var(--hoehe-bedienung)) / 2);
  bottom: calc((var(--index-eintrag-hoehe) - var(--hoehe-bedienung)) / 2);
}

#verwaltungBereich .verwaltungIndex a:hover {
  background: var(--sand);
  color: var(--tinte);
}

/* Ab ~64rem Fensterbreite — Fenster = min(67.5rem, 94vw), also Viewport ≥ 68.5rem
   (Media-Query statt Container-Query: container-type würde das Fenster zum
   Containing Block des fixierten Backdrop-::before machen). */
@media (min-width: 68.5rem) {
  .verwaltungKoerper {
    grid-template-columns: var(--index-breite) minmax(0, 1fr);
    column-gap: var(--raum-5);
    align-items: start;
  }

  .verwaltungIndex {
    display: block;
    position: sticky;
    top: 0; /* klebt am Scrollport des Fensters */
  }
}

/* Während des Step-up gibt es nichts zu springen — Index aus, eine Spalte. */
.verwaltungKoerper:has(#stepUpPrompt:not([hidden])) {
  grid-template-columns: minmax(0, 1fr);
}

.verwaltungKoerper:has(#stepUpPrompt:not([hidden])) .verwaltungIndex {
  display: none;
}

/* Der Daten-Haken verbindet die Inhaber-Gruppe mit Etagen-Sichtbarkeit und Filter. */
#verwaltungBereich:has(#inhaberEtage[hidden]) .indexGruppe[data-etage="inhaber"] {
  display: none;
}

#verwaltungBereich :is(h3, h4)[id] {
  scroll-margin-top: var(--raum-2); /* Anker scrollen im Fenster */
}

/* Etagen-Überschriften als VERSAL-Etiketten */
#adminEtage > h3,
#inhaberEtage > h3 {
  margin: 0 0 var(--raum-2);
  font-size: var(--schrift-xs);
  text-transform: uppercase;
  letter-spacing: var(--spation-etikett);
  color: var(--tinte-gedaempft);
}

#inhaberEtage > h3 {
  margin-top: var(--raum-2);
}

/* Abschnitts-Karten mit großzügigem Kopf */
#adminEtage > section,
#inhaberEtage > section {
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  padding: var(--raum-2) var(--raum-4) var(--raum-3);
  margin: 0 0 var(--raum-3);
}

#adminEtage > section > h4,
#inhaberEtage > section > h4 {
  margin: 0;
  padding: var(--raum-2) 0;
  font-size: var(--schrift-basis);
}

#verwaltungBereich section > p:not([role]) {
  margin: 0;
  padding-bottom: var(--raum-2);
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

/* Formulare als Settings-Zeilen */
#verwaltungBereich form {
  display: flex;
  flex-direction: column;
}

/* (Audit 07/2026 §2.2) Die Beschriftung steht ÜBER dem Feld — daneben lagen in
   der Verwaltung bis zu 500 px zwischen beiden, und die Anmeldung sprach ohnehin
   schon die gestapelte Formularsprache. Ohne eigenen Schriftgrad fällt die Zeile
   dabei auf den gemeinsamen Feldbeschriftungs-Grad (12px/600 gedämpft) aus der
   Basisregel zurück; einzige Ausnahme sind reine Ein-/Aus-Zeilen (Checkbox), die
   ihr Label rechts neben dem Kästchen tragen. */
#verwaltungBereich :is(form, .verwaltungKarte) > label:not(:has(> input[type="checkbox"])) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--raum-0);
  margin: 0;
  padding: var(--raum-2) 0;
  border-top: var(--strich) solid var(--linie);
}

#verwaltungBereich form :is(input, select),
#verwaltungBereich .verwaltungKarte > label > select {
  width: min(100%, var(--feld-breite));
  margin: 0;
}

#verwaltungBereich form > button {
  align-self: flex-end;
  margin: var(--raum-2) 0 var(--raum-1);
  font-size: var(--schrift-s);
}

/* Ein-Feld-Formulare lesen sich als EINE Zeile: das Feld und der zugehörige Knopf
   stehen nebeneinander, die Beschriftung darüber — sonst wirken Feld und Knopf wie
   zwei unabhängige Elemente (Befund „Geräte-Name", #197). Der Trennstrich wandert
   dabei ans Formular; am Etikett endete er mitten in der Zeile. Gescopet auf die
   beiden Etagen statt auf den ganzen Bereich, damit das Step-up-Formular außen
   vor bleibt: dort trägt der Knopf die volle Kartenbreite. #verwaltungBereich
   läuft in allen drei Regeln mit, damit sie die gestapelte Zeile oben sicher
   überstimmen — die wiegt mit :is(.verwaltungKarte) und :not(:has(…)) zwei
   Klassen. Ohne die ID bliebe der Strich mitten in der Zeile stehen (#197). */
#verwaltungBereich :is(#adminEtage, #inhaberEtage) form:has(> label:only-of-type) {
  flex-flow: row wrap;
  align-items: flex-end;
  gap: var(--raum-1) var(--raum-2);
  padding: var(--raum-2) 0;
  border-top: var(--strich) solid var(--linie);
}

#verwaltungBereich :is(#adminEtage, #inhaberEtage) form:has(> label:only-of-type) > label {
  flex: 0 1 var(--feld-breite);
  padding: 0;
  border-top: 0;
}

#verwaltungBereich :is(#adminEtage, #inhaberEtage) form:has(> label:only-of-type) > button {
  margin: 0;
}

#verwaltungBereich input[type="checkbox"] {
  width: var(--symbol-s);
  min-height: 0;
}

/* Listen-Einträge als ruhige Zeilen (echte Schale: .verwaltungKarte-Artikel) */
#geraeteVerwaltungListe,
#mitarbeiterVerwaltungListe,
#gruppenVerwaltungListe,
#labelsVerwaltungListe,
#inhaberFlagsListe,
#modulBuchungListe,
#loeschprotokollListe,
#betreiberZugriffeListe,
#standorteListe,
#patientenAuskunftTreffer {
  display: grid;
  gap: 0;
  margin-top: var(--raum-1);
}

/* Zeilen-Anatomie: Name 15px/600 über gedämpfter Meta-Zeile, die Haupt-Aktion
   direkt hinter der Meta rückt rechts in die Zeile; reiche Karten (Mitarbeiter:
   Formulare, Rollen-Wahl, Freischaltungen) laufen als volle Folge-Zeilen. */
.verwaltungKarte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--raum-2);
  row-gap: var(--raum-1);
  border: 0;
  border-top: var(--strich) solid var(--linie);
  padding: var(--raum-2) 0;
}

.verwaltungKarte h5 {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--schrift-m);
  font-weight: var(--gewicht-halbfett);
}

.verwaltungKarte > p {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

.verwaltungKarte > p + button {
  margin-left: auto;
}

.verwaltungKarte button {
  margin: 0;
  padding: var(--raum-1) var(--raum-2);
  font-size: var(--schrift-s);
}

.verwaltungKarte > form,
.verwaltungKarte > label,
.verwaltungKarte > .freischaltungen {
  flex: 1 1 100%;
  margin: 0;
}

.verwaltungKarte > input {
  flex: 1 1 12rem;
  margin: 0;
}

.freischaltungen {
  margin: var(--raum-1) 0;
}

.freischaltungen strong {
  display: block;
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
}

/* Sensible Zonen (Löschprotokoll, Betreiber-Zugriffe): leiser, klar gerahmt,
   ohne Karten-Schatten */
#inhaberEtage > section.verwaltungSensibel {
  background: var(--grund);
  border: var(--strich) solid var(--linie-stark);
  box-shadow: none;
}

.verwaltungSensibel > h4 {
  color: var(--tinte-gedaempft);
}

/* Step-up: kleine zentrierte Karte im Fenster */
#stepUpPrompt {
  max-width: 24rem;
  margin: 8vh auto;
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  padding: var(--raum-4) var(--raum-4) var(--raum-5);
}

#stepUpPrompt h3 {
  margin: 0 0 var(--raum-1);
  font-size: var(--schrift-xl);
}

/* Die Step-up-Karte ist keine Settings-Liste: dort trennt kein Strich. Der
   Strich kommt aus der gestapelten Zeile, die schon auf #verwaltungBereich
   liegt — die ID muss hier also mitlaufen, um sie zu überstimmen. */
#verwaltungBereich #stepUpPrompt form > label {
  border-top: 0;
}

#stepUpPrompt form input {
  width: 100%;
}

#stepUpPrompt form > button {
  align-self: stretch;
  margin: var(--raum-2) 0 0;
  font-size: var(--schrift-m);
}

/* ── Personen-Ecke: Avatar-Chip oben rechts auf allen Screens ── */
#personenEcke {
  position: fixed;
  /* Rechte Kante bündig zur Inhalts-Spalte (zentrierte body-max-width + rechtes
     Polster), statt am Viewport-Rand zu schweben — sonst hängt der Chip im
     äußeren Gutter, nicht auf der Inhaltskante. Mobil bleibt es bei --raum-3.
     Als Variable, weil die max-Breite des Chips sich an ihm misst (#180). */
  --chip-rechts: calc(max(0px, (100vw - var(--inhalt-breit)) / 2) + 5rem);
  /* Linke Reserve für Wortmarke (+ Abstand): der Chip wächst nie darüber.
     Als eigene Variable, weil die Reserve mobil um den Menü-Knopf wächst (#195). */
  --wortmarken-reserve: 7rem;
  --chip-reserve: var(--wortmarken-reserve);
  right: var(--chip-rechts);
  top: var(--raum-3);
  z-index: var(--ebene-kopf);
}

#personKnopf {
  width: auto;
  /* Deckelt den Chip an der Kopfzeilen-Reserve: seine linke Kante bleibt rechts
     der Wortmarke. Lange Anzeigenamen kürzen mit Ellipse, statt die Kopfzeile
     bei schmalem Viewport zu überdecken (#180). */
  max-width: calc(100vw - var(--chip-rechts) - var(--chip-reserve));
  min-height: var(--hoehe-bedienung);
  padding: var(--raum-0) var(--raum-3);
  margin: 0;
  border-radius: var(--radius-pille);
  border-color: var(--linie-stark);
  background: var(--marke-flaeche); /* Avatar-Tönung bleibt orange („Gezügelt") */
  column-gap: var(--raum-2);
}

#personKnopf::before {
  content: "";
  width: var(--symbol-s);
  height: var(--symbol-s);
  flex-shrink: 0; /* Symbol bleibt sichtbar, auch wenn der Name gekürzt wird (#180) */
  background: var(--marke-text);
  -webkit-mask: var(--symbol-person) center / contain no-repeat;
  mask: var(--symbol-person) center / contain no-repeat;
}

#personKnopf .personKnopfText {
  display: grid;
  /* Flex-Kind darf unter seine Inhaltsbreite schrumpfen, sonst greift die Ellipse
     der Namens-/Rollen-Spans nie, wenn der Chip auf max-width stößt (#180). */
  min-width: 0;
  max-width: 14rem;
  text-align: left;
  line-height: var(--zeile-eng);
}

#personKnopfName,
#personKnopfRolle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#personKnopfName {
  font-size: var(--schrift-s);
}

#personKnopfRolle {
  color: var(--tinte-gedaempft);
  font-size: var(--schrift-xs);
}

#personKnopf:hover {
  background: var(--marke-flaeche);
  border-color: var(--marke-text);
  box-shadow: var(--schatten-karte);
}

#personKnopf[aria-expanded="true"] {
  border-color: var(--marke-tief);
}

/* Das Panel hängt als Karte unter dem Chip und scrollt intern, wenn es nicht passt. */
#personPanel {
  position: absolute;
  top: calc(100% + var(--raum-1));
  right: 0;
  width: min(22rem, calc(100vw - 2rem));
  max-height: calc(100vh - var(--hoehe-bedienung) - var(--raum-6));
  overflow-y: auto;
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  padding: var(--raum-3) var(--raum-4);
  box-shadow: var(--schatten-schwebend);
}

#personName {
  margin-bottom: 0;
  font-size: var(--schrift-m);
}

#personRolle {
  margin-top: 0;
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

/* Die Mikrofon-Wahl ist keine Settings-Zeile mehr (Capture-Redesign): am Stuhl
   entscheidet sie über die Aufnahme, und der Test daneben ist der einzige Weg, das
   VOR dem Diktat zu klären. Gleiche Block-Gestalt wie der Ansichtswechsel — mehr
   Betonung geben ohne eine zweite Sprache zu erfinden. */
#mikrofonBlock {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
  margin: var(--raum-2) 0 0;
  padding: var(--raum-2);
  border-radius: var(--radius-knopf);
  background: var(--sand);
}

#mikrofonBlock > :is(strong, p, label, select, button, canvas) {
  margin: 0;
}

.mikrofonBlockTitel {
  font-size: var(--schrift-m);
}

.mikrofonBlockHinweis {
  padding-bottom: var(--raum-0);
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
  line-height: var(--zeile-mittel);
}

/* Das sichtbare Label steht über dem Feld (DESIGN.md, Formfeld-Kontrakt). */
#mikrofonAuswahlZeile {
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

#mikrofonTest {
  margin-top: var(--raum-1);
}

.mikrofonTestHinweis {
  margin-top: var(--raum-1);
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

/* Der Ausschlag muss auf einen Blick da oder nicht da sein — mehr braucht die
   Frage »hört mich das Mikrofon?« nicht. */
.mikrofonTestPegel {
  width: 100%;
  height: var(--raum-3);
  margin-top: var(--raum-0);
}

.mikrofonTestErgebnis {
  font-size: var(--schrift-s);
  color: var(--tinte);
}

.mikrofonTestErgebnis:empty {
  display: none;
}

/* Der Ansichtswechsel tauscht die gesamte Oberflaeche und hebt sich deshalb von
   der ruhigen Mikrofon-Zeile ab (#203). */
#ansichtWechselBlock {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
  margin: var(--raum-2) 0 0;
  padding: var(--raum-2);
  border-radius: var(--radius-knopf);
  background: var(--sand);
}

/* Kein Eigen-Rand: die Grundabstaende im Block kommen aus dem gemeinsamen Gap. */
#ansichtWechselBlock > :is(strong, p, label) {
  margin: 0;
}

.ansichtWechselTitel {
  font-size: var(--schrift-m);
}

/* Die Erklaerung gehoert zum Titel, nicht zur Auswahl: das Polster darunter setzt
   sie zur Auswahl hin um eine Stufe ab. */
.ansichtWechselHinweis {
  padding-bottom: var(--raum-0);
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
  line-height: var(--zeile-mittel);
}

/* Fuss-Gruppen des Panels: je EINE Aktion hinter einer eigenen Trennlinie (#203). */
.personPanelFuss {
  margin-top: var(--raum-2);
  padding-top: var(--raum-2);
  border-top: var(--strich) solid var(--linie);
}

/* Ist die Aktion verborgen, geht ihre Trennlinie mit — kein Strich ohne Inhalt. */
.personPanelFuss:has(> button[hidden]) {
  display: none;
}

.personPanelFuss > button {
  width: 100%;
  margin: 0;
}

#personPanel select {
  width: 100%;
  margin: 0;
}

#personPanel > button {
  width: 100%;
  margin: var(--raum-1) 0 0;
}

#personPanel form button[type="submit"] {
  width: 100%;
}

/* Die persönliche PIN ist nur am geteilten Gerät relevant. Das Formular folgt
   dort derselben ruhigen Trennung wie die übrigen Einstellungen im Panel. */
#pinAendernForm {
  margin-top: var(--raum-2);
  padding-top: var(--raum-2);
  border-top: var(--strich) solid var(--linie);
}

/* ── Erfassungs-Gruppe am Fuß der Fläche: Neue Aufgabe + Sprechen ──
   Im Dokumentfluss kann das Paar keine Karten verdecken (#192). */
.globalErfassung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--raum-1);
  margin-top: var(--raum-6);
}

.globalErfassung button {
  margin: 0;
}

/* Vor Verwaltungs-Fenster, modalem Dialog und Aufnahme-Panel tritt die Gruppe ab —
   die übergeordnete Bedienung bekommt die Aufmerksamkeit; auf kurzen Viewports lägen
   Gruppe und fixe Aufnahme-Bedienung sonst übereinander. `visibility` statt `display`
   bewahrt dabei den Platz im Fluss, damit der Inhalt darunter nicht springt. */
body:has(#verwaltungBereich:not([hidden])) #globalErfassung,
body:has(dialog:modal) #globalErfassung,
body:has(#aufnahmePanel:not([hidden])) #globalErfassung {
  visibility: hidden;
}

/* ── Behandler-Startbild: Mikrofon-Held mit warmem Schein und Puls-Ring ── */
#behandlerStartbild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--held-hoehe);
}

#behandlerStartbild::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--schein-groesse);
  height: var(--schein-groesse);
  max-width: 100%;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pille);
  background: var(--held-schein);
  pointer-events: none;
}

.startbildKopf {
  margin-bottom: var(--raum-3);
}

.startbildKopf h2 {
  margin-bottom: var(--raum-0);
  font-size: var(--schrift-xl);
}

.startbildKopf p {
  margin: 0;
  color: var(--tinte-gedaempft);
  font-size: var(--schrift-s);
}

.startbildErfassung {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-4);
  padding: var(--raum-6) 0;
}

.startbildMikrofon {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--raum-1);
  width: var(--mikro-groesse);
  height: var(--mikro-groesse);
  padding: var(--raum-3);
  border: 0;
  border-radius: var(--radius-pille);
  background-color: var(--marke-tief);
  background-image: var(--mikro-verlauf);
  color: var(--schrift-hell);
  font-size: var(--schrift-basis);
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeile-eng);
  box-shadow: var(--schatten-mikro);
}

.startbildMikrofon::before {
  content: "";
  width: var(--mikro-symbol);
  height: var(--mikro-symbol);
  background: var(--schrift-hell);
  -webkit-mask: var(--symbol-mikrofon) center / contain no-repeat;
  mask: var(--symbol-mikrofon) center / contain no-repeat;
}

.startbildMikrofon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pille);
  pointer-events: none;
}

.startbildMikrofon:hover {
  color: var(--schrift-hell);
  border-color: transparent;
  transform: scale(1.02);
  box-shadow: var(--schatten-mikro-hover);
}

.startbildMikrofon:active {
  transform: scale(0.99);
}

@media (prefers-reduced-motion: no-preference) {
  .startbildMikrofon::after {
    animation: pulsRing var(--puls-dauer) ease-out infinite;
  }

  @keyframes pulsRing {
    0% {
      box-shadow: 0 0 0 0 var(--marke-puls);
    }

    70%,
    100% {
      box-shadow: 0 0 0 var(--puls-weite) var(--marke-puls-aus);
    }
  }
}

/* Auf hochkanten Flächen (iPad hochkant) wächst 55vh ins Leere: was der Held über
   seiner Bedienung frei lässt, ist totes Feld, und gestapelt drückt es den Kopf des
   ersten Zubringer-Blocks unter die Falz (#200). Die Höhe steht am Held selbst, damit
   der Aufnahme-Freiraum unten von derselben Zahl abzieht. */
@media (orientation: portrait) {
  #behandlerStartbild {
    --held-hoehe: 38vh;
  }
}

/* Ab 64rem stehen Held-Säule und Zubringer-Blöcke NEBENEINANDER (#200): auf 1440px
   ließ die mittige Knopfsäule über zwei Dritteln der Breite nichts stehen, und
   zwischen »Doku-Diktat« und dem ersten Etikett lag die Höhe, die der Held über
   seiner Bedienung frei lässt. Restyle, nicht Restructure: dieselben Blöcke in
   derselben Markup-Reihenfolge, nur in zwei Achsen statt einer (ADR-0010).
   Nur die Spalten-Lücke ist neu — die Zeilenabstände bleiben bei den Blöcken selbst,
   sonst rissen die leeren Zeilen (Primär-Aktionen, Fehlerzeile) einen Abstand auf.
   Zwei Achsen nur, solange die zweite auch etwas trägt: `#behandlerZubringer` ist eine
   feste Hülle, deren Aufgaben- und Doku-Blöcke einzeln verschwinden. Ohne den
   Zubringer-Vorbehalt hielte das Raster die leere Spalte
   trotzdem frei und drückte den Held in die 24rem-Säule am linken Rand. Der Vorbehalt
   steht allein an der Hülle, denn nur dort wirkt er: `grid-area` an den Kindern liegt
   brach, solange diese Regel die Hülle nicht zur Grid macht. */
@media (min-width: 64rem) {
  #startbild:has(#behandlerStartbild:not([hidden])):has(#behandlerZubringer section:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, var(--held-saeule)) minmax(0, 1fr);
    /* Die letzte Zeile ist die dehnbare: ein langer Vorrat wächst dort nach unten
       heraus, statt seinen Überschuss auf alle Zeilen der Säule zu verteilen und die
       Zugänge unter dem Held wegzuschieben. */
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
      "kopf     kopf"
      "held     zubringer"
      "wege     zubringer"
      "aktionen zubringer"
      "fehler   zubringer";
    column-gap: var(--raum-6);
    align-items: start;
  }

  #startbild:has(#behandlerStartbild:not([hidden])) > .startbildKopf {
    grid-area: kopf;
  }

  #startbild:has(#behandlerStartbild:not([hidden])) > #behandlerStartbild {
    grid-area: held;
  }

  #startbild:has(#behandlerStartbild:not([hidden])) > #behandlerZubringer {
    grid-area: zubringer;
  }

  #startbild:has(#behandlerStartbild:not([hidden])) > .startbildZugaenge {
    grid-area: wege;
  }

  #startbild:has(#behandlerStartbild:not([hidden])) > #startbildPrimaerAktionen {
    grid-area: aktionen;
  }

  #startbild:has(#behandlerStartbild:not([hidden])) > #startbildAktionenFehler {
    grid-area: fehler;
  }
}

#behandlerZubringer {
  min-width: 0;
}

#behandlerAufgabenUeberblick {
  width: min(100%, var(--inhalt-schmal));
  margin-bottom: var(--raum-5);
}

#behandlerAufgabenGruppen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spur-min)), 1fr));
  gap: var(--raum-2);
}

#behandlerAufgabenFehler {
  margin: var(--raum-1) 0;
}

/* Zugangs-Links und Primär-Aktionen der Startbilder */
.startbildZugaenge {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-2);
  padding: var(--raum-5) 0 0;
}

.startbildZugaenge a {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  min-height: var(--hoehe-bedienung);
  padding: var(--raum-1) var(--raum-4);
  font-size: var(--schrift-m);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte);
  text-decoration: none;
  background: var(--flaeche);
  border: var(--strich) solid var(--linie-stark);
  border-radius: var(--radius-knopf);
  transition: border-color var(--tempo) ease, box-shadow var(--tempo) ease;
}

.startbildZugaenge .zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* „Gezügelt": Pfeil in Tinte, Hover-Kante neutral. */
.startbildZugaenge a::after {
  content: "";
  width: var(--symbol-xs);
  height: var(--symbol-xs);
  background: var(--tinte);
  -webkit-mask: var(--symbol-pfeil) center / contain no-repeat;
  mask: var(--symbol-pfeil) center / contain no-repeat;
  transition: transform var(--tempo) ease;
}

.startbildZugaenge a:hover {
  border-color: var(--tinte-gedaempft);
  box-shadow: var(--schatten-karte);
}

.startbildZugaenge a:hover::after {
  transform: translateX(var(--schub));
}

#startbildPrimaerAktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-2);
  margin-top: var(--raum-4);
}

#startbildPrimaerAktionen button {
  width: min(100%, var(--cta-breite));
}

/* Die drei Doku-Blöcke teilen eine eigene Lesebreite. Die Führungs-Übersicht
   bleibt außerhalb dieser Hülle auf der globalen breiten Arbeitsfläche. */
#dokuBloecke {
  width: min(100%, var(--inhalt-mittel));
  min-width: min(100%, var(--inhalt-schmal));
  /* Linksbündig zur Begrüßung/Wortmarke statt zentriert — sonst reißt die linke
     Kante zwischen Kopf (128) und Vorrat-Spalte auf. Breitenregel bleibt (schmal→mittel). */
  margin-inline: 0;
}

#behandlerMikroAktionen {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Unter dem Held läuft die Pillen-Zeile (Capture-Redesign, Inkrement 4): der
   tastaturschnelle Weg zu einer neuen Aufgabe, in Sekundärform. Die Akzent-Füllung
   bleibt dem Held allein — genau EINE Akzent-Handlung je Fläche („Gezügelt"). */
.startbildPillen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-2);
  width: 100%;
}

.startbildPillen button {
  margin: 0;
}

/* Am Stuhl gesprochene Aufgaben warten hier auf ihre Bestätigung (Inkrement 5).
   Gleiche Lesebreite wie der Aufgaben-Zubringer darüber, leer verschwindet er. */
#zuBestaetigen {
  width: min(100%, var(--inhalt-schmal));
  margin-bottom: var(--raum-5);
}

#zuBestaetigen h3 {
  display: flex;
  align-items: center;
  gap: var(--raum-1);
}

/* ── Dialoge: weiße Radius-16-Karten mit warmem Dialog-Schatten ── */
dialog {
  /* Das Dialog-Polster als Variable: klebende Zeilen (Entwurf-Aktionen) heben es
     mit negativen Rändern auf und müssen den schmalen Wert mitnehmen. */
  --dialog-polster: var(--raum-5);
  max-width: min(34rem, calc(100vw - 2rem));
  border: 0;
  border-radius: var(--radius-karte);
  padding: var(--dialog-polster);
  color: var(--tinte);
  background: var(--flaeche);
  box-shadow: var(--schatten-dialog);
}

dialog::backdrop {
  /* --kulisse als Literal: ::backdrop erbt Custom Properties nicht überall zuverlässig. */
  background: rgba(32, 26, 21, 0.45);
}

dialog h2 {
  margin-top: 0;
  font-size: var(--schrift-xl);
}

/* Das im Top-Layer verankerte Panel darf die letzten Dialog-Aktionen nicht verdecken. */
dialog:has(> #aufnahmePanel:not([hidden])) {
  padding-bottom: calc(var(--dialog-polster) + var(--aufnahme-freiraum));
}

#entwurfKarte {
  width: min(var(--dialog-breite), calc(100vw - 2rem));
}

/* Sicherungs-Karte (Capture-Redesign, Inkrement 1): der Bestätigungs-Moment am
   Stuhl. Sie kommt statt des Prüf-Fensters — deshalb hat sie Dialog-Breite und
   nicht Fenster-Breite: hier wird nichts gelesen, hier wird bestätigt. */
#sicherungKarte {
  width: min(var(--dialog-breite), calc(100vw - 2rem));
}

/* Die Ampel ist der Satz selbst, farbig geführt. Kein Punkt, kein Symbol: was die
   Aufnahme taugt, steht als Klartext da — und nie als Aussage über den Text. */
.sicherungAmpel {
  margin: 0 0 var(--raum-2);
  padding: var(--raum-2);
  border-radius: var(--radius-eingabe);
  font-size: var(--schrift-basis);
  line-height: var(--zeile-mittel);
}

.sicherungAmpel[data-stufe="gut"] {
  background: var(--marke-flaeche);
  color: var(--marke-text);
}

.sicherungAmpel[data-stufe="hinweis"] {
  background: var(--sand);
  color: var(--tinte);
}

/* Dringend-Rot bleibt den Aufgaben (Dominanz-Regel) — die Warnung trägt die
   Dringend-Tönung ohne Vollrot, sie ist ein Hinweis, kein Alarm. */
.sicherungAmpel[data-stufe="warnung"] {
  background: var(--dringend-flaeche);
  border: var(--strich) solid var(--dringend-linie);
  color: var(--tinte);
}

.sicherungZeile {
  margin: 0 0 var(--raum-1);
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
  line-height: var(--zeile-mittel);
}

/* Die Zweck-Wahl der Karte (Inkrement 4): zwei Radios als ein Paar — echte Radios
   statt Chips, weil hier gewählt und nicht gefiltert wird (Pfeiltasten, ein Tabstopp).
   Vorgabe ist Doku; »Als Aufgabe« nimmt die Nummern-Frage mit sich fort. */
.sicherungZweck {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-3);
  margin: 0 0 var(--raum-2);
  border: 0;
  padding: 0;
}

.sicherungZweck legend {
  padding: 0;
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  letter-spacing: var(--spation-etikett);
  text-transform: uppercase;
  color: var(--tinte-gedaempft);
}

.sicherungZweck label {
  display: flex;
  align-items: center;
  gap: var(--raum-1);
  min-height: var(--hoehe-bedienung);
  margin: 0;
  font-size: var(--schrift-basis);
}

/* Prominent, weil die Nummer hier am billigsten zu binden ist — später kostet sie
   einen zweiten Griff im Fenster. Nie Pflicht: ohne sie parkt der Entwurf sichtbar
   »ohne Patientenbezug« (ADR-0003). */
.sicherungPatientZeile {
  margin: 0 0 var(--raum-2);
  padding: var(--raum-2);
  border-radius: var(--radius-eingabe);
  background: var(--sand);
}

.sicherungPatientZeile label {
  display: block;
  margin-bottom: var(--raum-0);
  font-weight: var(--gewicht-halbfett);
}

.sicherungPatientZeile input {
  width: 100%;
  margin: 0;
}

.sicherungPatientHinweis {
  margin: var(--raum-0) 0 0;
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
}

.sicherungPatientZeile .feldFehler {
  margin: var(--raum-0) 0 0;
}

.sicherungKnoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  margin-top: var(--raum-3);
}

/* Doku-Fenster (Modul 2, #151-Verdikt): Overlay über dem Startbild — breiter als
   die Dialog-Karten, weil hier ganze Behandlungs-Texte gelesen und geprüft werden.
   Inhalt fluid 44rem, ab 1024px Viewport bis 60rem (Spec #155). */
#dokuFenster {
  width: min(var(--modul-fenster-breite), var(--fenster-breite-max));
  max-width: min(var(--modul-fenster-breite), var(--fenster-breite-max));
}

#dokuFenster[open] {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
}

#dokuFenster .dokuFensterKopf {
  position: sticky;
  top: calc(-1 * var(--raum-5));
  z-index: var(--ebene-kopf);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--raum-3);
  margin: calc(-1 * var(--raum-5)) calc(-1 * var(--raum-5)) 0;
  padding: var(--raum-5) var(--raum-5) var(--raum-2);
  background: var(--flaeche);
}

#dokuFenster .dokuFensterKopf h2 {
  margin: 0;
}

#dokuFensterSchliessen {
  flex: 0 0 auto;
  margin: calc(-1 * var(--raum-1)) calc(-1 * var(--raum-1)) 0 0;
}

#dokuFenster > section,
#dokuFenster > details,
#dokuFenster .dokuMeta,
#dokuFenster .dokuAufnahme,
#dokuFenster > .detailBadges,
#dokuFenster > .dokuHinweis {
  width: 100%;
  max-width: var(--inhalt-schmal);
  margin: 0 auto;
}

@media (min-width: 64rem) {
  #dokuFenster > section,
  #dokuFenster > details,
  #dokuFenster .dokuMeta,
  #dokuFenster .dokuAufnahme,
  #dokuFenster > .detailBadges,
  #dokuFenster > .dokuHinweis {
    max-width: var(--inhalt-mittel);
  }
}

/* Eigener Pfeil, weil das Flex-Layout den nativen Marker verdrängt (#209). */
#dokuFenster > details > summary {
  display: flex;
  align-items: center;
  gap: var(--raum-1);
  min-height: var(--hoehe-bedienung);
  cursor: pointer;
  list-style: none;
}

#dokuFenster > details > summary::-webkit-details-marker {
  display: none;
}

#dokuFenster > details > summary::before {
  content: "";
  flex: 0 0 auto;
  width: var(--symbol-xs);
  height: var(--symbol-xs);
  background: var(--tinte-gedaempft);
  -webkit-mask: var(--symbol-pfeil) center / contain no-repeat;
  mask: var(--symbol-pfeil) center / contain no-repeat;
}

#dokuFenster > details[open] > summary::before {
  transform: rotate(90deg);
}

#dokuFenster > details > summary h3 {
  margin: 0;
}

#dokuFenster h3 {
  margin: 0 0 var(--raum-0);
  font-size: var(--schrift-m);
}

/* Der Abschnittskopf bricht inhaltsabhängig statt an einem festen Viewport-Wert um. */
#dokuFenster .dokuAbschnittKopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  margin-bottom: var(--raum-1);
}

#dokuFenster .dokuAbschnittKopf h3 {
  margin: 0;
}

#dokuKopieren {
  flex: 0 0 auto;
}

#dokuFenster .dokuMeta {
  color: var(--tinte-gedaempft);
  font-size: var(--schrift-s);
  margin-block: 0;
}

#dokuFenster .dokuText {
  white-space: pre-wrap;
  margin: 0;
  padding: var(--dichte-polster-mittel);
  background: var(--grund);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-eingabe);
}

#dokuFenster .dokuHinweis {
  margin: var(--raum-0) 0 0;
  color: var(--tinte-gedaempft);
  font-size: var(--schrift-xs);
}

/* Trägt das Fenster im Selektor, damit der Abstand `#dokuFenster .dokuHinweis`
   schlägt: die Zeile gehört an das Feld darunter, nicht an den Kopf darüber. */
#dokuFenster #dokuAbschnittHinweis {
  margin: 0 0 var(--raum-1);
}

/* Schmal zuerst: Beschriftung und Dauer stehen über dem Abspielen-Knopf. */
#dokuFenster .dokuAufnahmeZeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'bezeichnung'
    'dauer'
    'knopf';
  align-items: center;
  gap: var(--raum-1);
  padding: var(--raum-2) var(--dichte-polster-mittel);
  background: var(--grund);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-eingabe);
}

/* Die native Steuerung ersetzt den Abspielen-Knopf auf derselben Fläche. */
#dokuFenster .dokuAufnahmeZeile > :is(button, audio) {
  grid-area: knopf;
  max-width: var(--cta-breite);
}

#dokuFenster .dokuAufnahmeBezeichnung {
  grid-area: bezeichnung;
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
}

#dokuFenster .dokuAufnahmeDauer {
  grid-area: dauer;
  color: var(--tinte-gedaempft);
  font-size: var(--schrift-xs);
}

@media (min-width: 48rem) {
  #dokuFenster .dokuAufnahmeZeile {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'knopf bezeichnung dauer';
    gap: var(--raum-2);
    padding: 0 var(--dichte-polster-mittel);
  }
}

#dokuFenster .dokuVerlauf {
  padding-top: var(--raum-0);
  border-top: var(--strich) solid var(--linie);
}

#dokuFenster .dokuVerlauf p {
  margin: 0 0 var(--raum-0);
  color: var(--tinte-gedaempft);
  font-size: var(--schrift-s);
}

#dokuFenster .dokuVerlauf strong {
  color: var(--tinte);
  font-weight: var(--gewicht-halbfett);
}

/* Bearbeitbare Texte erhalten den stärkeren Formfeld-Rand (DESIGN.md §3, #209). */
#dokuFenster textarea.dokuText {
  width: 100%;
  border-color: var(--linie-stark);
  min-height: var(--hoehe-bedienung);
  max-height: var(--aufnahme-freiraum);
  font: inherit;
  color: inherit;
  resize: vertical;
  overflow-y: hidden;
}

#dokuFenster .dokuWarnung {
  margin: 0 auto;
  width: 100%;
  max-width: var(--inhalt-schmal);
  padding: var(--raum-1) var(--dichte-polster-mittel);
  background: var(--dringend-flaeche);
  border: var(--strich) solid var(--dringend-linie);
  border-radius: var(--radius-eingabe);
  color: var(--dringend);
  font-size: var(--schrift-s);
}

#dokuFenster .dokuPatientenbezug {
  margin: 0 auto;
  width: 100%;
  max-width: var(--inhalt-schmal);
  display: flex;
  gap: var(--raum-2);
  align-items: flex-end;
  flex-wrap: wrap;
}

#dokuFenster .dokuPatientenbezug label {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
  margin: 0;
  font-size: var(--schrift-s);
}

@media (min-width: 64rem) {
  #dokuFenster .dokuWarnung,
  #dokuFenster .dokuPatientenbezug {
    max-width: var(--inhalt-mittel);
  }
}

#dokuFenster .dokuFensterKnoepfe {
  display: flex;
  gap: var(--raum-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

#dokuFenster > .dokuHinweis {
  margin: 0 auto;
  color: var(--tinte-gedaempft);
  font-size: var(--schrift-s);
}

#dokuEntwuerfe {
  margin-top: var(--raum-5);
}


#entwurfKarte[open] {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
}

#entwurfKarte label {
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  margin: 0;
}

#entwurfKarte label.standortChip {
  flex-direction: row;
  align-items: center;
}

#entwurfKarte :is(input, select, textarea) {
  width: 100%;
  margin: 0;
}

#entwurfTitel {
  min-height: var(--hoehe-bedienung);
  overflow-y: hidden;
  resize: none;
}

#entwurfKarte label.standortChip select {
  width: auto;
  flex: 1;
}

/* Der erkannte Titel als Erkennung: getönte Fläche mit Etiketten-Zeile darüber —
   sichtbar „so wurde das verstanden" und nicht eine Eingabe wie jede andere.
   Antippbar bleibt das Feld selbst (#211). */
.entwurfErkennung {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
  padding: var(--dichte-polster-mittel);
  background: var(--marke-flaeche);
  border: var(--strich) solid var(--linie-stark);
  border-radius: var(--radius-eingabe);
}

.entwurfErkennung > label {
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  text-transform: uppercase;
  letter-spacing: var(--spation-etikett);
  color: var(--marke-text);
}

.entwurfErkennungHinweis {
  margin: 0;
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
}

#entwurfNebenangaben > label {
  margin-top: var(--raum-2);
}

/* Die Aktionszeile bleibt auf kurzen Flächen erreichbar, ohne dass die Karte
   erst gescrollt werden muss — sie klebt am Fuß des Dialogs und hebt dessen
   Polster mit dem negativen Versatz auf (#211). */
.entwurfAktionen {
  position: sticky;
  bottom: calc(-1 * var(--dialog-polster));
  display: flex;
  flex-direction: column;
  margin: 0 calc(-1 * var(--dialog-polster)) calc(-1 * var(--dialog-polster));
  padding: var(--raum-2) var(--dialog-polster) var(--dialog-polster);
  background: var(--flaeche);
}

/* Ist das Aufnahme-Panel im Dialog verankert (Modal-/Aufnahme-Vertrag), gehört der
   Fuß ihm: die Aktionszeile läuft dann im Fluss mit, statt hinter ihm zu kleben. */
dialog:has(> #aufnahmePanel:not([hidden])) .entwurfAktionen {
  position: static;
  margin-bottom: 0;
  padding-bottom: var(--raum-2);
}

/* „Verwerfen" bleibt Ghost, sitzt aber abgesetzt hinter einer Trennlinie —
   dieselbe Ausweg-Sprache wie am Sperrbildschirm. */
.entwurfAusweg {
  margin: var(--raum-2) 0 0;
  padding-top: var(--raum-1);
  border-top: var(--strich) solid var(--linie);
  text-align: center;
}

#entwurfBestaetigen,
#entwurfVerwerfen {
  width: 100%;
}

#rueckmeldungDialog {
  width: min(34rem, calc(100vw - 2rem));
}

#rueckmeldungDialog textarea,
#rueckmeldungDialog input[type="file"] {
  display: block;
  width: 100%;
  margin: var(--raum-1) 0 var(--raum-3);
}

/* Art-Wahl als ruhige Zeilen: Etikett über Radio-Zeilen in Bedientext. */
#rueckmeldungDialog fieldset {
  display: grid;
  gap: var(--raum-1);
  margin: 0 0 var(--raum-3);
  padding: 0;
  border: 0;
}

#rueckmeldungDialog legend {
  margin-bottom: var(--raum-0);
  padding: 0;
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte-gedaempft);
}

#rueckmeldungDialog fieldset label {
  display: flex;
  align-items: center;
  gap: var(--raum-1);
  margin: 0;
}

/* Sprechen ist der schnellste Weg und steht zuerst (#211) — in der mittleren Stufe:
   getönte Marken-Fläche mit Marken-Text. Die Akzent-Füllung des Dialogs bleibt bei
   »Senden« (genau EINE Akzent-Handlung je Fläche). */
#rueckmeldungMikrofon {
  width: min(100%, var(--cta-breite));
  margin: 0 0 var(--raum-0);
  background: var(--marke-flaeche);
  border-color: var(--marke-tief);
  color: var(--marke-text);
  box-shadow: none;
}

#rueckmeldungMikrofon::before {
  content: "";
  width: var(--symbol-s);
  height: var(--symbol-s);
  background: var(--marke-text);
  -webkit-mask: var(--symbol-mikrofon) center / contain no-repeat;
  mask: var(--symbol-mikrofon) center / contain no-repeat;
}

#rueckmeldungMikrofon:hover {
  background: var(--marke-flaeche);
  border-color: var(--marke-tiefer);
  color: var(--marke-text);
  box-shadow: var(--schatten-karte);
}

/* »Einsprechen« in der Entwurfskarte (Inkrement 6): dieselbe mittlere Stufe wie das
   Sprechen in der Rückmeldung — die Akzent-Füllung der Karte trägt »Bestätigen«.
   Es ist der zweite Weg IN die Karte, nicht ihr Hauptweg: die Karte ist der Einstieg. */
.entwurfEinsprechen {
  width: min(100%, var(--cta-breite));
  margin: var(--raum-1) 0 0;
  background: var(--marke-flaeche);
  border-color: var(--marke-tief);
  color: var(--marke-text);
  box-shadow: none;
}

.entwurfEinsprechen::before {
  content: "";
  width: var(--symbol-s);
  height: var(--symbol-s);
  background: var(--marke-text);
  -webkit-mask: var(--symbol-mikrofon) center / contain no-repeat;
  mask: var(--symbol-mikrofon) center / contain no-repeat;
}

.entwurfEinsprechen:hover {
  background: var(--marke-flaeche);
  border-color: var(--marke-tiefer);
  color: var(--marke-text);
  box-shadow: var(--schatten-karte);
}

.rueckmeldungSprechHinweis {
  margin: 0 0 var(--raum-3);
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
}

/* Die Empfängerzeile steht über der Warnung und ordnet sie ein: eine ruhige
   Meta-Zeile, keine zweite Warnfläche (#211). */
.rueckmeldungEmpfaenger {
  margin: 0 0 var(--raum-2);
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

/* Feld-Fehler stehen am Feld statt am Dialogkopf: sie rücken an das Feld darüber
   heran. Gewicht und Vollrot kommen aus der [role="alert"]-Regel, leer verschwinden
   sie über dieselbe Naht wie jede andere Meldung. */
.feldFehler {
  margin: calc(-1 * var(--raum-2)) 0 var(--raum-3);
}

/* Vorschau der gewählten Screenshots: kleine Kacheln mit Dateinamen darunter. */
.rueckmeldungVorschau {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin: 0 0 var(--raum-3);
}

.rueckmeldungVorschau:empty {
  display: none;
}

.rueckmeldungVorschauBild {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
  width: 8rem;
  margin: 0;
}

.rueckmeldungVorschauBild img {
  width: 100%;
  height: 6rem;
  object-fit: cover;
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-eingabe);
  background: var(--grund);
}

.rueckmeldungVorschauBild figcaption {
  overflow: hidden;
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der Patientendaten-Hinweis als leise Warnzone statt hartem Alarm-Rahmen. */
.rueckmeldungHinweis {
  display: grid;
  gap: var(--raum-1);
  margin-bottom: var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
  background: var(--dringend-flaeche);
  border: var(--strich) solid var(--dringend-linie);
  border-radius: var(--radius-knopf);
}

.rueckmeldungHinweis strong {
  font-size: var(--schrift-s);
  color: var(--dringend);
}

/* ── Dringend-Popup: Zeilen mit Titel links, Öffnen + Quittieren rechts ── */
#dringendAufgaben > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-1) var(--raum-2);
  padding: var(--raum-2) 0;
  border-top: var(--strich) solid var(--linie);
}

#dringendAufgaben strong {
  /* Ein diktierter Titel kann ein einziges langes Wort sein — es bricht, statt
     seitlich aus dem Dialog zu laufen (auf 390 px trägt die Zeile 310 px). */
  overflow-wrap: anywhere;
  font-size: var(--schrift-m);
  font-weight: var(--gewicht-halbfett);
}

/* Beide Wege stehen als Paar rechts: „Aufgabe öffnen" führt in die Arbeit,
   „Quittieren" nimmt nur zur Kenntnis (#214). Wird es eng, rückt das Paar als
   Ganzes unter den Titel und stapelt erst danach — der Weg in die Aufgabe bleibt
   auf schmalen Geräten ohne Scrollen erreichbar. */
.dringendAktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  margin-left: auto;
}

#dringendAufgaben button {
  margin: 0;
  padding: var(--raum-1) var(--raum-2);
  font-size: var(--schrift-s);
}

/* Der Zeilen-Fehler steht als eigene Zeile unter Titel und Knöpfen; Schriftgrad,
   Gewicht und Vollrot kommen aus der [role="alert"]-Regel, leer verschwindet er. */
#dringendAufgaben span {
  flex: 1 1 100%;
}

/* ── Module-Bereich: Einträge als weiße Karten mit Namen und Aktionen ── */
#moduleListe {
  display: grid;
  gap: var(--raum-2);
  margin-top: var(--raum-2);
}

#moduleListe article {
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  padding: var(--raum-3) var(--raum-4);
}

#moduleListe article h3 {
  margin: 0 0 var(--raum-2);
  font-size: var(--schrift-m);
}

#moduleListe article button {
  margin: 0 var(--raum-1) 0 0;
}

/* ── Aufnahme-Panel (#125/#167): weiße Karte, über der Leiste bzw. im offenen Dialog ── */
#aufnahmePanel {
  position: fixed;
  left: 50%;
  bottom: var(--raum-2);
  z-index: calc(var(--ebene-leiste) + 10);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--raum-1) var(--raum-2);
  width: min(32rem, calc(100vw - 2rem));
  transform: translateX(-50%);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  padding: var(--raum-3) var(--raum-4);
  padding-bottom: calc(var(--raum-3) + env(safe-area-inset-bottom));
  box-shadow: var(--schatten-dialog);
  background: var(--flaeche);
}

/* Der Panel-Kopf trägt das optionale Nummern-Feld über der Zustands-Zeile (Inkrement 4):
   Label über dem Feld wie jedes Formfeld, Hinweis darunter. Es nimmt die volle Breite —
   getippt wird hier mit einer Hand, während die andere am Stuhl bleibt. */
.aufnahmePatientZeile {
  grid-column: 1 / -1;
}

.aufnahmePatientZeile label {
  display: block;
  margin-bottom: var(--raum-0);
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
}

.aufnahmePatientZeile input {
  width: 100%;
  margin: 0;
}

.feldOptional {
  font-weight: var(--gewicht-normal);
  color: var(--tinte-gedaempft);
}

.aufnahmePatientHinweis {
  margin: var(--raum-0) 0 0;
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
}

.aufnahmePatientZeile .feldFehler {
  margin: var(--raum-0) 0 0;
}

/* Mit dem Nummern-Feld ist das Panel höher — der Freiraum, den ALLE Nahten lesen
   (Flächen-Ausklang, Held-Höhe, Dialog-Polster), wächst um dieselbe Zeile mit.
   Eine Zahl an einer Stelle: sonst verdeckte das Panel die klebende Aktionszeile
   eines Dialogs, in dem es gerade verankert ist. */
body:has(#aufnahmePanel:not([hidden])):has(#aufnahmePatientZeile:not([hidden])) {
  --aufnahme-freiraum: 18rem;
}

/* Bei sichtbarem Panel schrumpft der Held und die Fläche erhält genug Ausklang. */
body:has(#aufnahmePanel:not([hidden])) {
  padding-bottom: calc(var(--raum-7) + var(--aufnahme-freiraum));
}

/* Der Held gibt genau den Freiraum her, den das Panel beansprucht — damit schrumpft er
   auch dort mit, wo die Held-Höhe selbst kleiner ist (gestapelt, #200). */
body:has(#aufnahmePanel:not([hidden])) #behandlerStartbild {
  min-height: calc(var(--held-hoehe) - var(--aufnahme-freiraum));
}

#aufnahmeZustand {
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
}

.aufnahmePunkt {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--dringend);
}

/* Bewegung nur bei erlaubter Animation — jede Animation sitzt hinter diesem Zaun. */
@media (prefers-reduced-motion: no-preference) {
  #aufnahmePanel[data-zustand="laeuft"] .aufnahmePunkt {
    animation: aufnahmePuls 1.5s ease-in-out infinite;
  }
}

#aufnahmeTimer {
  justify-self: end;
  font-size: var(--schrift-s);
  font-variant-numeric: tabular-nums;
  color: var(--tinte-gedaempft);
}

#aufnahmePegel {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  height: 44px;
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-eingabe);
  background: var(--grund);
}

.aufnahmeKnoepfe {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: var(--raum-1);
}

.aufnahmeKnoepfe button {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--schrift-s);
}

/* Stopp ist die Primär-Aktion des Panels, Verwerfen die leise. */
#aufnahmeStopp {
  background: var(--marke-tief);
  border-color: var(--marke-tief);
  color: var(--schrift-hell);
}

#aufnahmeStopp:hover {
  background: var(--marke-tiefer);
  border-color: var(--marke-tiefer);
  color: var(--schrift-hell);
}

#aufnahmeVerwerfen {
  background: transparent;
  border-color: transparent;
  color: var(--tinte-gedaempft);
}

#aufnahmeVerwerfen:hover {
  background: var(--sand);
  border-color: transparent;
  color: var(--tinte);
  box-shadow: none;
}

@keyframes aufnahmePuls {
  50% {
    opacity: 0.55;
    transform: scale(1.3);
  }
}

#sperrbildschirm {
  position: fixed;
  inset: 0;
  z-index: var(--ebene-sperre);
  min-height: 100vh;
  overflow-y: auto;
  /* Die Sperr-Karte zentriert in der Lesebreite --inhalt-schmal. */
  padding: 2rem max(2rem, calc((100% - var(--inhalt-schmal)) / 2));
  background: var(--grund);
}

/* Ruhige Sperr-Karte: weiße Radius-16-Karte, Ziffernfelder prominent. */
.sperrbildschirmKarte {
  max-width: 28rem;
  margin: 10vh auto 0;
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-dialog);
  padding: var(--raum-5) var(--raum-5) var(--raum-6);
}

#sperrbildschirmTitel {
  margin: 0 0 var(--raum-0);
  font-size: var(--schrift-xl);
}

/* Am geteilten Gerät ist der Gerätename die einzige Ortsangabe — als Badge
   ablesbar, nicht als leiser Fließtext (#208). */
.geraetBadge {
  display: inline-block;
  margin: 0 0 var(--raum-2);
  padding: var(--raum-0) var(--raum-2);
  font-size: var(--schrift-basis);
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeile-mittel);
  color: var(--tinte);
  background: var(--sand);
  border-radius: var(--radius-pille);
}

.geraetBadge:empty {
  display: none;
}

#sperrbildschirmPin {
  margin: var(--raum-4) 0 0;
  padding: 0;
  border: 0;
}

#sperrbildschirmPin legend {
  padding: 0;
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte-gedaempft);
}

/* Ziffernfelder statt Eingabezeile: je 44px Mindestziel. Die Reihe bricht um,
   statt die Felder unter das Touchziel zu drücken — eine achtstellige PIN passt
   auf dem Wandtablet sonst nicht in die Karte. */
.pinZiffernReihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-1);
  margin-top: var(--raum-0);
}

.pinZiffer {
  flex: 0 0 auto;
  width: var(--hoehe-bedienung);
  height: var(--hoehe-bedienung);
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: var(--schrift-xl);
  font-variant-numeric: tabular-nums;
}

/* Der Fehlversuch-Zähler ist ein Zustand AM Feld, keine Zeile in der Meldung. */
#sperrbildschirmVersuche {
  margin: var(--raum-1) 0 0;
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
  color: var(--dringend);
}

#sperrbildschirmPin:has(#sperrbildschirmVersuche:not(:empty)) .pinZiffer {
  border-color: var(--dringend);
}

#sperrbildschirmForm button[type="submit"] {
  width: 100%;
  margin: var(--raum-4) 0 0;
}

/* Der Passwort-Ausweg bleibt leise, steht aber sichtbar abgesetzt. */
.sperrbildschirmAusweg {
  margin: var(--raum-4) 0 0;
  padding-top: var(--raum-3);
  border-top: var(--strich) solid var(--linie);
}

#sperrbildschirmPasswort {
  display: inline-block;
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

#sperrbildschirmPasswort:hover {
  color: var(--tinte);
}

/* Der Ausweg für die vergessene PIN steht ohne Link da: das Zurücksetzen macht ein
   Admin, nicht die Ausgesperrte selbst. Gleiche gedämpfte Stimme wie #anmeldungAusweg. */
#sperrbildschirmPinVergessen {
  margin: var(--raum-2) 0 0;
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

.medium {
  display: block;
  max-width: 100%;
  max-height: 24rem;
  margin: 0.5rem 0;
}

[role="alert"] {
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
  color: var(--dringend);
}

/* Die Anmeldung ist keine Inhaltsseite, sondern eine Spalte: Wortmarke und Karte
   teilen eine mittige Spur, und das Seitenpolster wird symmetrisch — die rechte
   Chip-Reserve der Inhalts-Screens gibt es hier nicht. */
body:has(#anmeldung:not([hidden])) {
  --anmeldung-spur: 22rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: var(--inhalt-schmal);
  /* Die Bodenreserve setzt die Kartenmitte einschließlich Wortmarke und Abstand
     auf etwa 42 % der Höhe. Das Kopfpolster steckt in BEIDEN Rändern: als
     Zuschlag oben und unten hebt es die Mitte nicht an (die Hälften kürzen sich
     weg), hält aber die Wortmarke von der Bildkante weg, sobald die Auto-Ränder
     auf kurzen Flächen (z. B. 375×667) auf 0 fallen — sonst klebt sie dort am
     oberen Rand und im Standalone-PWA unter der Statusleiste. */
  padding: var(--raum-3) var(--raum-3)
    calc(16vh + var(--hoehe-bedienung) + var(--raum-5) + var(--raum-3));
}

body:has(#anmeldung:not([hidden])) > header,
#anmeldung {
  width: min(100%, var(--anmeldung-spur));
  margin-inline: auto;
}

/* Auto-Ränder statt justify-content: reicht die Höhe nicht, fallen sie auf 0 —
   der Block rutscht nach oben statt aus dem Bild. */
body:has(#anmeldung:not([hidden])) > header {
  margin-top: auto;
}

body:has(#anmeldung:not([hidden])) > main {
  margin-bottom: auto;
}

/* Die Kopfzeilenmeldung ist auf dieser Fläche der Anmeldefehler. In der 22rem-Spur
   bliebe ihr neben der Wortmarke nur eine Restbreite, in der sie mehrzeilig gegen
   die Wortmarke bricht — sie bekommt darum die ganze Spur unter ihr. Leer
   verschwindet sie ohnehin ([role="status"]:empty), die Wortmarken-Zeile behält
   also ihre Höhe und die Karte ihre 42 %. */
body:has(#anmeldung:not([hidden])) > header #meldung {
  flex-basis: 100%;
}

#anmeldung {
  margin-block: var(--raum-5) 0;
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  padding: var(--raum-5) var(--raum-5) var(--raum-6);
  box-shadow: var(--schatten-karte);
}

#anmeldung h2 {
  margin: 0 0 var(--raum-3);
  font-size: var(--schrift-xl);
}

#anmeldung label {
  margin: var(--raum-2) 0 var(--raum-0);
}

#anmeldung input {
  display: block;
  width: 100%;
  margin: 0;
}

#anmeldung button[type="submit"] {
  width: 100%;
  margin: var(--raum-4) 0 0;
}

/* Die beiden leisen Zeilen der Karte: woher die Praxis-ID kommt (am Feld) und
   der Passwort-Ausweg (unter dem Primär-Knopf). */
#praxisIdHinweis {
  margin: var(--raum-0) 0 0;
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
}

#anmeldungAusweg {
  margin: var(--raum-3) 0 0;
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

@media (max-width: 40rem) {
  body {
    padding-right: 1rem;
  }

  /* Mobil liegt die Inhaltskante am Viewport-Rand — der Chip bleibt bei --raum-3.
     Über die Variable, damit die max-Breite des Chips (#180) mitzieht. */
  #personenEcke {
    --chip-rechts: var(--raum-3);
  }

  /* Der fixierte Chip liegt aus dem Fluss über der ersten Kopfzeilen-Zeile. Damit
     die Kopfzeilenmeldung ihn nicht nur seitlich, sondern auch vertikal verfehlt,
     bekommt die Wortmarken-Zeile die Chip-Höhe als Reserve — dann bricht #meldung
     erst UNTER dem Chip um, nicht auf halber Chip-Höhe (#180).
     Die Reserve ist höher als die Textzeile: ohne mitwachsende Zeilenhöhe klebt
     die baseline-ausgerichtete Wortmarke oben in der Reserve und steht damit
     rund 10px über der Mittelachse von Menü-Knopf und Chip (#195). Die
     Zeilenhöhe füllt die Reserve, statt sie unter der Textzeile zu stapeln:
     der Halbdurchschuss zentriert die Glyphen, die Grundlinie (und mit ihr der
     Wortmarken-Punkt) wandert mit. */
  body > header h1 {
    min-height: var(--hoehe-bedienung);
    line-height: var(--hoehe-bedienung);
  }

  /* Kopfzeilenmeldung bricht mobil auf eine eigene Zeile unter Wortmarke/Chip,
     damit der fixierte Chip sie bei schmalem Viewport nicht überdeckt (#180).
     Leer verschwindet sie ohnehin (role="status":empty). */
  body > header #meldung {
    flex-basis: 100%;
  }

  body.praxismanagerAnsicht,
  body.leisteEingeklappt {
    padding-left: 1rem;
    /* Mobil entfällt die feste Leistenfläche. */
    background-image: none;
  }

  /* Der Menü-Knopf bleibt fixiert in der Kopfzeilen-Zeile. Seine Reserve gilt
     nur, solange er sichtbar ist (#195). */
  body:has(#leistenBurger:not([hidden])) {
    --menueknopf-breite: 4.5rem;
    --menueknopf-reserve: calc(var(--menueknopf-breite) + var(--raum-3));
  }

  body:has(#leistenBurger:not([hidden])) > header h1 {
    margin-left: var(--menueknopf-reserve);
  }

  /* Wortmarke und Chip-Deckel halten dieselbe Strecke für den Knopf frei. */
  body:has(#leistenBurger:not([hidden])) #personenEcke {
    --chip-reserve: calc(var(--wortmarken-reserve) + var(--menueknopf-reserve));
  }

  #leistenBurger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    /* Die feste Breite macht die Reserve berechenbar; die Bedienhöhe richtet den
       Knopf an der Mittelachse von Wortmarke und Chip aus. */
    top: var(--raum-3);
    left: var(--raum-3);
    z-index: calc(var(--ebene-leiste) + 1);
    width: var(--menueknopf-breite);
    min-height: var(--hoehe-bedienung);
    margin: 0;
    font-size: var(--schrift-s);
    padding: var(--raum-1) var(--raum-2);
    box-shadow: var(--schatten-karte);
  }

  #praxismanagerLeiste {
    inset: calc(var(--raum-3) + var(--hoehe-bedienung) + var(--raum-1)) auto auto var(--raum-3);
    width: min(16rem, calc(100vw - 2rem));
    /* Mobil ist die Leiste ein Aufklapp-Panel — die Dokumenthöhe der fixierten
       Schiene (#194) gilt hier nicht. */
    height: auto;
    border: var(--strich) solid var(--linie);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-schwebend);
  }

  #praxismanagerLeiste[data-offen="false"] {
    display: none;
  }

  /* Mobil überlagert die ausgefahrene Leiste den Inhalt — die Kulisse nimmt ihm
     die Gleichwertigkeit und trägt den Tipp, der die Leiste schließt. Ein Dim
     wie bei Dialogen und Verwaltungs-Fenster: --kulisse ohne Weichzeichnung
     (Nutzer-Verdikt aus #131 — EIN Overlay-Gefühl).
     Sichtbar wird sie aus data-offen abgeleitet, damit es keinen zweiten
     Schalter gibt; :not([hidden]) räumt sie mit der Leiste ab (Abmelden,
     Sperren), die den Zustand beim Verbergen nicht zurücksetzt. */
  body:has(#praxismanagerLeiste[data-offen="true"]:not([hidden])) #leistenKulisse {
    display: block;
    position: fixed;
    inset: 0;
    /* Unter der Leiste (40) und dem Menü-Knopf (41), über dem Inhalt. */
    z-index: calc(var(--ebene-leiste) - 1);
    background: var(--kulisse);
  }

  #praxismanagerLeiste .leistenEintraege,
  body.leisteEingeklappt #praxismanagerLeiste .leistenEintraege {
    display: flex;
  }

  /* Mobil ist die Leiste ein Aufklapp-Panel — der Einklapp-Schub vom Desktop
     würde sie sonst aus dem Bild schieben. */
  body.leisteEingeklappt #praxismanagerLeiste {
    transform: none;
    overflow: visible;
  }

  #leisteEinklappen {
    display: none;
  }

  #aufgabenDetail {
    --detail-polster-y: var(--raum-4);
    padding: var(--raum-4);
  }

  .triageHandgriffe label,
  .signalHandgriffe label {
    width: 100%;
  }

  dialog {
    --dialog-polster: var(--raum-4);
    padding: var(--dialog-polster);
  }

  /* Verwaltungs-Fenster schmal: engere Ränder, gestapelte Settings-Zeilen. */
  #verwaltungBereich {
    width: calc(100vw - var(--raum-3));
    height: calc(100vh - var(--raum-3));
  }

  #verwaltungBereich > h2 {
    padding: var(--raum-3) var(--raum-7) var(--raum-2) var(--raum-4);
  }

  #verwaltungBereich > #verwaltungFehler {
    padding: var(--raum-2) var(--raum-4) 0;
  }

  #verwaltungBereich > #verwaltungZumStartbild {
    margin: var(--raum-2) var(--raum-4) 0;
  }

  .verwaltungKoerper {
    padding: var(--raum-3) var(--raum-4) var(--raum-5);
  }

  /* Gestapelt wird seit dem Audit 07/2026 überall — schmal nehmen die Felder
     zusätzlich die volle Breite statt der --feld-breite. */
  #verwaltungBereich form :is(input, select),
  #verwaltungBereich .verwaltungKarte > label > select {
    width: 100%;
  }

  /* Die Ein-Feld-Zeile bleibt eine Zeile, solange der Knopf daneben passt — bricht
     er darunter, wächst das Etikett auf die ganze Zeile mit. Ohne das Wachsen hielte
     es seine 16 rem und das Feld stünde als einziges schmal zwischen vollbreiten
     Feldern. Selbe Spezifität wie die Grundregel, gewinnt über die Reihenfolge. */
  #verwaltungBereich :is(#adminEtage, #inhaberEtage) form:has(> label:only-of-type) > label {
    flex-grow: 1;
  }

  /* Listen-Zeilen stapeln: die Aktion rückt unter die Meta-Zeile. */
  .verwaltungKarte > p + button {
    margin-left: 0;
  }

  /* Schmaler Schirm: die Sperr-Karte nimmt engere Ränder, damit auch eine
     sechsstellige PIN in einer Reihe steht — das 44px-Ziel bleibt unangetastet. */
  #sperrbildschirm {
    padding: var(--raum-6) var(--raum-3);
  }

  .sperrbildschirmKarte {
    padding: var(--raum-4) var(--raum-4) var(--raum-5);
  }
}

#dokuFenster .dokuRueckweg {
  margin: 0 auto;
  width: 100%;
  max-width: var(--inhalt-schmal);
  display: flex;
  gap: var(--raum-2);
  align-items: flex-end;
  flex-wrap: wrap;
}

#dokuFenster .dokuRueckweg label {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
  margin: 0;
  font-size: var(--schrift-s);
}

#dokuFenster .dokuRueckweg textarea {
  font: inherit;
  resize: vertical;
}

@media (min-width: 64rem) {
  #dokuFenster .dokuRueckweg {
    max-width: var(--inhalt-mittel);
  }
}