/* 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;

  /* ── Rhythmus der Abschnitte (#493): drei Abstände, sonst keine ── */
  --rhythmus-kopf: var(--raum-2); /* Überschrift → ihr erster Inhalt */
  --rhythmus-gruppe: var(--raum-4); /* Ende einer Gruppe → nächstes Etikett */
  --rhythmus-block: var(--raum-6); /* Ende eines Blocks (oder Seitentitel) → nächster Block-Titel */

  /* ── 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;
  --rail-breite: 4.25rem; /* Symbol-Rail: die Gestalt der Leiste am Praxis-Tablet */
  --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). */
  /* Trichter des Filter-Knopfs der Aufgaben-Fläche (#482). */
  --symbol-filter: 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='M3 5h18l-7 8.5V19l-4 2v-7.5z'/%3E%3C/svg%3E");
  --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");
  /* Die Leiste trägt Symbole, seit sie sich am Praxis-Tablet auf eine Rail
     zusammenzieht: dort ist das Symbol die Marke, das Etikett die Beschriftung. */
  --symbol-haus: 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%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 9.5V20h12V9.5'/%3E%3C/svg%3E");
  --symbol-liste: 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%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1'/%3E%3Ccircle cx='4.5' cy='12' r='1'/%3E%3Ccircle cx='4.5' cy='18' r='1'/%3E%3C/svg%3E");
  --symbol-eingang: 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%3Cpath d='M3 13l3-8h12l3 8v6H3z'/%3E%3Cpath d='M3 13h6a3 3 0 0 0 6 0h6'/%3E%3C/svg%3E");
  --symbol-blick: 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%3Cpath d='M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
  --symbol-doku: 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%3Cpath d='M6 2h9l4 4v16H6z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M9 13h7M9 17h7'/%3E%3C/svg%3E");
  --symbol-team: 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='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 3v4M17 3v4M3 10h18M8 15h3M14 15h3'/%3E%3C/svg%3E");
  --symbol-zahnrad: 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%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E");
  --symbol-glocke: 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%3Cpath d='M6 9a6 6 0 0 1 12 0c0 5 2 6.5 2 6.5H4S6 14 6 9z'/%3E%3Cpath d='M10 19a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
  --symbol-menue: 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'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --symbol-einklappen: 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%3Cpath d='M4 4v16'/%3E%3Cpath d='M20 12H9'/%3E%3Cpath d='M13 7l-4 5 4 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-Überschrift (#493, DESIGN.md §3): EINE Komponente, zwei Stufen ──
   Die Stufe ist eine KLASSE im Markup wie bei den Knöpfen, nie eine ID-Liste hier.
   Das HTML-Element (h3/h4) folgt der Verschachtelung, die Klasse dem, was darunter steht:
   `--block` führt einen Block, der selbst Gruppen tragen kann (Startbild, Doku,
   Arbeitsplatz), `--etikett` steht direkt über Karten, Zeilen oder Bedienelementen.
   Ein Etikett ist nie lauter als ein Block-Titel — darum ist VERSAL die untere Stufe. */
.ueberschrift--block {
  margin: 0 0 var(--rhythmus-kopf);
  font-size: var(--schrift-basis);
  font-weight: var(--gewicht-titel);
  letter-spacing: var(--spation-titel);
  color: var(--tinte);
}

.ueberschrift--etikett {
  margin: 0 0 var(--rhythmus-kopf);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  text-transform: uppercase;
  letter-spacing: var(--spation-etikett);
  color: var(--tinte-gedaempft);
}

/* Blöcke stehen im Rhythmus `--rhythmus-block`, auch unter dem Seitentitel bzw. der
   Gruß-Zeile: der Außenabstand fällt dort mit deren Rand zusammen. */
section:has(> .ueberschrift--block) {
  margin-top: var(--rhythmus-block);
}

/* Die Präzisierung im Block-Titel ist Meta, kein Titel: leise wie jede Meta-Zeile. */
.dokuVorratHinweis {
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-normal);
  letter-spacing: normal;
  color: var(--tinte-gedaempft);
}

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);
}

/* ── Kopfzeile rechts: Glocke und Zeit-Anzeige (Kapitän-Entscheidung 7a) ──
   Sie stehen auf JEDER Fläche in EINER Zeile mit Wortmarke und Menü-Knopf — auch
   unter 40rem, dort nur mit der Uhrzeit (#493). ── */
#kopfRest {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--raum-2);
}

#kopfGlocke {
  position: relative;
  width: var(--hoehe-bedienung);
  padding: 0;
  flex: none;
  border-radius: var(--radius-pille);
  border-color: transparent;
  background: transparent;
}

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

#kopfGlocke[aria-expanded="true"] {
  background: var(--marke-flaeche);
  border-color: transparent;
  color: var(--marke-text);
}

/* Die Zahl sitzt als Marke auf dem Symbol — sie darf das 44px-Ziel nicht sprengen. */
#kopfGlockeZahl {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  min-width: 1.25rem;
  padding: 0 var(--raum-0);
  font-size: var(--schrift-xs);
  background: var(--marke-flaeche);
  color: var(--marke-text);
}

#kopfUhr {
  margin: 0;
  display: grid;
  justify-items: end;
  line-height: var(--zeile-eng);
  font-variant-numeric: tabular-nums;
}

#kopfUhrZeit {
  font-size: var(--schrift-basis);
  font-weight: var(--gewicht-halbfett);
}

#kopfUhrDatum {
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
  white-space: nowrap;
}

/* ── DIE eine Leiste (Kapitän-Entscheidung 6c) ──
   Eine Navigation für alle Rollen; die Gestalt folgt der Breite, nicht der Rolle.
   `--leiste-sichtbreite` ist die einzige Stellschraube: Inhalts-Einzug, hinterlegte
   Schienenfläche und Leisten-Breite lesen sie gemeinsam. `--leiste-modus` sagt der
   Schale in EINEM Wort, welche Gestalt gerade gilt — der Einklapp-Knopf beschriftet
   sich daraus. ── */
body.mitLeiste {
  --leiste-sichtbreite: var(--leiste-breite);
  --leiste-modus: voll;
  padding-left: calc(var(--leiste-sichtbreite) + 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)
  );
}

/* Praxis-Tablet-Breiten: die Rail ist die Vorgabe, nicht der Ausnahmefall. Am Stuhl
   kostet die Navigation damit 68px Breite statt 240 — der Held bleibt dominant. */
@media (min-width: 40rem) {
  body.mitLeiste {
    --leiste-sichtbreite: var(--rail-breite);
    --leiste-modus: rail;
  }
}

/* Ab der vollen Arbeitsbreite trägt die Leiste wieder ihre Beschriftungen. */
@media (min-width: 76rem) {
  body.mitLeiste {
    --leiste-sichtbreite: var(--leiste-breite);
    --leiste-modus: voll;
  }
}

/* Die ausdrückliche Wahl schlägt die Vorgabe der Breite — in beide Richtungen. */
body.mitLeiste.leisteEingeklappt {
  --leiste-sichtbreite: var(--rail-breite);
  --leiste-modus: rail;
}

body.mitLeiste.leisteAusgeklappt {
  --leiste-sichtbreite: var(--leiste-breite);
  --leiste-modus: voll;
}

#leiste {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--ebene-leiste);
  width: var(--leiste-sichtbreite);
  /* 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;
  overflow-x: hidden;
  /* Die Gestalt der Einträge hängt an der BREITE der Leiste, nicht daran, warum sie
     schmal ist: Gerätebreite und ausdrückliche Wahl treffen dieselbe eine Regel. */
  container-type: inline-size;
}

#leiste .leistenEintraege {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
}

/* Der Fuß trägt die Admin-Etage und das Benutzermenü — abgesetzt von der
   Tagesnavigation und ans untere Ende geschoben. */
#leiste .leistenFuss {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
  margin-top: auto;
  padding-top: var(--raum-1);
  border-top: var(--strich) solid var(--linie);
}

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

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

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

.leistenSymbol {
  width: var(--symbol-s);
  height: var(--symbol-s);
  flex: none;
  background: currentColor;
  -webkit-mask: var(--_symbol) center / contain no-repeat;
  mask: var(--_symbol) center / contain no-repeat;
}

.leistenSymbol[data-symbol="haus"] { --_symbol: var(--symbol-haus); }
.leistenSymbol[data-symbol="liste"] { --_symbol: var(--symbol-liste); }
.leistenSymbol[data-symbol="eingang"] { --_symbol: var(--symbol-eingang); }
.leistenSymbol[data-symbol="blick"] { --_symbol: var(--symbol-blick); }
.leistenSymbol[data-symbol="doku"] { --_symbol: var(--symbol-doku); }
.leistenSymbol[data-symbol="team"] { --_symbol: var(--symbol-team); }
.leistenSymbol[data-symbol="zahnrad"] { --_symbol: var(--symbol-zahnrad); }
.leistenSymbol[data-symbol="person"] { --_symbol: var(--symbol-person); }
.leistenSymbol[data-symbol="glocke"] { --_symbol: var(--symbol-glocke); }
.leistenSymbol[data-symbol="menue"] { --_symbol: var(--symbol-menue); }
.leistenSymbol[data-symbol="einklappen"] { --_symbol: var(--symbol-einklappen); }
.leistenSymbol[data-symbol="ausgang"] { --_symbol: var(--symbol-pfeil); }

/* Der Rückweg in die Betreiber-Konsole (#548) ist der EINZIGE Leisten-Eintrag, der
   die Fläche verlässt: ein echter Link, damit er sich wie einer verhält (Mittelklick,
   Kontextmenü) — in der Gestalt aber ein Eintrag wie jeder andere, samt Rail- und
   Drawer-Form. Kein Akzent: er ist ein Nebenausgang, keine Handlung des Tages. */
.leistenFuss a {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  min-height: var(--hoehe-bedienung);
  font-size: var(--schrift-m);
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeile-eng);
  border: var(--strich) solid transparent;
  border-radius: var(--radius-knopf);
  text-decoration: none;
}

/* „Leiste einklappen" bleibt die leiseste Zeile des Fußes. */
#leisteEinklappen {
  font-size: var(--schrift-xs);
  min-height: auto;
  padding: var(--raum-1) var(--raum-2);
}

/* ── Rail-Gestalt: Symbol über Mini-Etikett ──
   Ausgelöst von der Breite der Leiste selbst (Container-Abfrage), damit es EINE
   Regel gibt statt einer je Anlass. Kein Hover-Peek mehr: die Rail trägt ihre
   Etiketten, der Einklapp-Knopf ist der ausdrückliche Weg zurück. ── */
@container (max-width: 8rem) {
  .leistenEintraege button,
  .leistenFuss button,
  .leistenFuss a {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: var(--raum-1) 0;
    text-align: center;
    font-size: 0.625rem;
    line-height: var(--zeile-eng);
  }

  .leistenEintraege button > .zahl,
  .leistenFuss button > .zahl {
    position: absolute;
    top: 0;
    right: var(--raum-0);
    margin: 0;
    min-width: 1.25rem;
    padding: 0 var(--raum-0);
    font-size: var(--schrift-xs);
  }

  /* Auf 68px bliebe vom Namen »Dr. …« übrig — das sagt weniger als das Symbol allein.
     Der volle Name samt Rolle steht weiter im aria-label, das `schale.js` setzt; ohne
     sichtbaren Text kann er ihm auch nicht widersprechen (WCAG 2.5.3). */
  #leiste #personKnopf .personKnopfText,
  #leiste #leisteEinklappen .leistenText {
    display: none;
  }
}

#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);
}

/* ── Die zwei Label-Muster (DESIGN.md §3 „Formfelder") ──
   Feld-Zeile: umschließt ein Label sein Feld, steht die Beschriftung DARÜBER. Das ist
   die eine Stelle dafür — Kontext-Regeln setzen Abstände und Breiten, nie die Richtung;
   sonst stapelten sie auch die Ein-/Aus-Zeile unten (Befund S3, #464). */
label:has(> :is(input, select, textarea)) {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
}

/* Ein-/Aus-Zeile: Kästchen bzw. Radio ZUERST, der Satz rechts daneben — und die ganze
   Zeile ist die Bedienfläche (44px hoch). Sie bleibt Bedientext, keine Feldbeschriftung.
   Das Kästchen steht im Markup vor dem Text; die Regel ordnet nicht um. Den
   Außenabstand bestimmt der Kontext (Basis-Label, Detail-Gruppe, Fieldset). */
label:has(> input:is([type="checkbox"], [type="radio"])) {
  flex-direction: row;
  align-items: center;
  gap: var(--raum-1);
  min-height: var(--hoehe-bedienung);
  font-size: var(--schrift-m);
  color: var(--tinte);
  cursor: pointer;
}

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

/* Kein Außenrand an Bedienelementen: Abstände gehören dem Layout (gap/Kontext),
   nicht dem Element — ein globaler Rand ergab Beinahe-Kanten neben dem 4er-Raster (S2, #464). */
button,
input,
select,
textarea {
  font: inherit;
  margin: 0;
}

/* 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. Die
   Bedienfläche trägt ihre Ein-/Aus-Zeile (oben), nicht das Kästchen. `:where()` hält
   die Regel auf Typ-Gewicht: sie schlägt die Feldregel darüber, aber keine
   Komponenten-Klasse wie `.auswahlKaestchen` (Befund S4, #464). */
input:where([type="checkbox"], [type="radio"]) {
  flex: none;
  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);
}

/* ── Knopf-Stufen (DESIGN.md §3 „Knöpfe") ──
   Die Stufe steht als Klasse am Knopf, nie als ID-Liste hier: wer einen Knopf baut,
   entscheidet seine Stufe im Markup (#464). Ohne Klasse gilt die Sekundärform oben.

   Primär: die EINE Akzent-Handlung je Fläche („Gezügelt") — Sprechen, Bestätigen,
   Anmelden/Eintreten, Rückmeldung senden, Panel-Stopp, die Zustands-Aktion im
   Doku-Fenster. Alle übrigen Submits (Verwaltung) bleiben Sekundärform. */
.knopf--primaer {
  background: var(--marke-tief);
  border-color: var(--marke-tief);
  color: var(--schrift-hell);
  box-shadow: var(--schatten-karte);
}

.knopf--primaer:hover {
  background: var(--marke-tiefer);
  border-color: var(--marke-tiefer);
  color: var(--schrift-hell);
  box-shadow: var(--schatten-schwebend);
}

/* Mittel: getönte Marken-Fläche mit Marken-Text — betont, ohne der Akzent-Handlung
   der Fläche Konkurrenz zu machen (nächster Schritt im Detail, Sprechen als erster
   Weg in Rückmeldung und Entwurf). */
.knopf--mitte {
  background: var(--marke-flaeche);
  border-color: var(--marke-tief);
  color: var(--marke-text);
  box-shadow: none;
}

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

/* Leise (Ghost): randlos, gedämpft, Sand-Hover in Tinte — Auswege und Nebensachen
   (Verwerfen, Abbrechen, Zurück, Schließen, Gelesen). */
.knopf--leise {
  background: transparent;
  border-color: transparent;
  color: var(--tinte-gedaempft);
  font-size: var(--schrift-s);
  padding: var(--raum-1) var(--raum-2);
}

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

/* Mikrofon-Symbol vor der Beschriftung, in der Textfarbe der jeweiligen Stufe.
   Unabhängig davon registriert `.mikrofon` einen Knopf beim Aufnahme-Lebenszyklus
   (schale-erfassung.js) — das ist Verhalten, keine Gestalt. */
.knopf--mikrofon::before {
  content: "";
  flex: none;
  width: var(--symbol-s);
  height: var(--symbol-s);
  background: currentColor;
  -webkit-mask: var(--symbol-mikrofon) center / contain no-repeat;
  mask: var(--symbol-mikrofon) center / contain no-repeat;
}

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

/* Armiert: ein ZUSTAND, keine Stufe — `data-armiert="true"` setzt der erste Klick
   eines Zwei-Klick-Wegs (baueArmiertenKnopf, Löschung, Geräte-Widerruf). Der scharfe
   Zustand alarmiert im Dringend-Rot, dem einen konkurrenzlosen Alarm-Kanal, und
   schlägt dabei jede Stufe. */
:is(button, .knopf--primaer, .knopf--mitte, .knopf--leise)[data-armiert="true"],
:is(button, .knopf--primaer, .knopf--mitte, .knopf--leise)[data-armiert="true"]:hover {
  background: var(--dringend);
  border-color: var(--dringend);
  color: var(--schrift-hell);
}

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

/* 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);
}

/* Der Verweis auf die Betreiber-Konsole (ADR-0019) steht neben den Banner-Knöpfen
   und sieht aus wie sie — er führt aber aus der Praxis heraus, nicht in ihr herum. */
#betreiberKonsole {
  display: inline-flex;
  align-items: center;
  min-height: var(--hoehe-bedienung);
  padding: 0 var(--raum-2);
  color: var(--tinte);
  text-decoration: none;
  background: var(--flaeche);
  border: var(--strich) solid var(--linie-stark);
  border-radius: var(--radius-knopf);
}

#betreiberKonsole:hover {
  background: var(--sand);
}

/* ── Filter-Chips: Pillen, gedrückt = gefülltes Tieforange mit Haken ── */
/* EINE Zeile auf jedem Gerät (#482): Vorgabe und Status als Chip-Reihe, die schmal
   waagerecht scrollt statt umzubrechen, dahinter der Filter-Knopf, der stehen bleibt.
   Labels und Eingang wohnen im Filter-Blatt. */
#aufgabenFilter {
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  margin-bottom: var(--raum-2);
}

.filterZeile {
  display: flex;
  align-items: center;
  gap: var(--raum-1);
  min-width: 0;
}

/* Das Polster hält Platz für den Fokusring: ein scrollender Rahmen schnitte ihn ab.
   Der negative Rand nimmt es optisch zurück. */
.chips.filterReihe {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  margin: calc(-1 * (var(--strich-fokus) + var(--fokus-abstand)));
  padding: calc(var(--strich-fokus) + var(--fokus-abstand));
  scrollbar-width: none;
}

.chips.filterReihe::-webkit-scrollbar {
  display: none;
}

.filterReihe .chip {
  flex: none;
}

.filterMehr {
  flex: none;
  margin-left: var(--raum-1);
  border-radius: var(--radius-pille);
  font-size: var(--schrift-s);
  padding: var(--raum-1) var(--raum-3);
}

.filterMehr::before {
  content: "";
  width: var(--symbol-xs);
  height: var(--symbol-xs);
  background: currentColor;
  -webkit-mask: var(--symbol-filter) center / contain no-repeat;
  mask: var(--symbol-filter) center / contain no-repeat;
}

/* Filtert etwas aus dem Blatt, trägt der Knopf die getönte Aktiv-Sprache — nicht die
   Füllung eines gedrückten Chips: er öffnet, er filtert nicht selbst. */
.filterMehr[data-aktiv="true"] {
  background: var(--marke-flaeche);
  border-color: var(--marke-tief);
  color: var(--marke-text);
}

.filterZusammenfassung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--raum-1);
  margin: 0;
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

/* Das Filter-Blatt: ein Dialog in Dialog-Breite, schmal ein Blatt am unteren Rand. */
.filterBlatt {
  width: min(var(--dialog-breite), calc(100vw - 2rem));
}

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

.filterBlattKopf h2 {
  margin: 0;
}

.filterBlatt h3 {
  margin-bottom: var(--raum-1);
}

.filterBlatt section + section {
  margin-top: var(--raum-3);
}

.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);
}

.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,
#arbeitsplatzEingangKarten,
#zuBestaetigenKarten {
  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);
}

/* Gruppen-Raster: zwischen den Zeilen steht der Gruppen-Rhythmus, nicht der Karten-Abstand. */
[data-uebersicht-gruppen],
#arbeitsplatzUebersichtGruppen,
#behandlerAufgabenGruppen {
  row-gap: var(--rhythmus-gruppe);
}

#arbeitsplatzUebersichtGruppen {
  display: grid;
}

/* 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 .aufgabeZustaendig {
  white-space: nowrap;
}

.aufgabeKarte .aufgabeZustaendig::before {
  content: "";
  display: inline-block;
  width: var(--symbol-xs);
  height: var(--symbol-xs);
  margin-right: var(--raum-0);
  vertical-align: -0.1em;
  background: currentColor;
  -webkit-mask: var(--symbol-person) center / contain no-repeat;
  mask: var(--symbol-person) center / contain no-repeat;
}

.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);
}

/* Der Arbeitsort-Chip an der Karte (#562): dieselbe Badge-Pille wie im Detail-Kopf.
   Verschachtelt geschrieben wie `.eintragKarte .eintragChip` — sonst überschriebe die
   gedämpfte `.aufgabeKarte span` ihre Schriftgröße. Die Spalte kommt weiter aus den
   `span`-Regeln darüber: dringend rückt sie neben den Punkt wie Titel und Meta-Zeile. */
.aufgabeKarte .badge {
  justify-self: start;
  margin-top: var(--raum-0);
  font-size: var(--schrift-xs);
}

/* Zubringer-Karte (Modul 2): erbt die Kartengestalt der Aufgaben-Liste, aber OHNE
   Dringend-Marke — ein Artefakt hat kein Dringend-Kennzeichen (ADR-0014, GLOSSARY.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;
}

.offeneAufnahme audio {
  flex: 1 1 100%;
  width: 100%;
}

.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: die Karte hängt jetzt an der Glocke, nicht am Startbild ──
   Als schwebendes Panel unter der Kopfzeile, damit sie auf jeder Fläche erreichbar
   ist. Rechts bündig zur Kopf-Gruppe, damit sie unter ihrer Glocke steht. ── */
[data-neuigkeiten] {
  position: fixed;
  top: calc(var(--raum-3) + var(--hoehe-bedienung) + var(--raum-1));
  right: max(var(--raum-3), calc((100vw - var(--inhalt-breit)) / 2 + 1rem));
  z-index: calc(var(--ebene-leiste) + 1);
  width: min(24rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-schwebend);
  padding: var(--raum-2) var(--raum-3);
}

.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;
}

/* Titel der Aufgabe unter dem Satz (#466) — er sagt, WORUM es geht. */
.neuigkeitTitel {
  display: block;
  margin-top: var(--raum-0);
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
  overflow-wrap: anywhere;
}

/* Ein Bündel nennt seine Aufgaben einzeln; jeder Eintrag öffnet seine. */
.neuigkeitBuendel {
  display: grid;
  gap: var(--raum-0);
  margin: var(--raum-1) 0 0;
  padding: 0;
  list-style: none;
}

.neuigkeitBuendelEintrag {
  display: block;
  text-align: left;
  overflow-wrap: anywhere;
}

.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;
}

/* Dringend in den langen Listen (#201): Eingang und Übersicht hüllen die Karte in
   eine eigene Fläche und löschen dabei die Tönung der inneren Karte weg — vom
   einzigen Alarm-Kanal blieb beim Überfliegen ein 8-px-Punkt. Die Hülle trägt die
   Tönung darum selbst, über Handgriffe und Alter hinweg: Marke + Fläche, KEIN
   Balken (DESIGN.md Do/Don't „side-tab"), und weiter kein Vollton — die Fläche
   sticht das rote Marken-Signal nicht aus. */
.triageKarte[data-dringend="true"],
.signalKarte[data-dringend="true"] {
  background: var(--dringend-flaeche);
  border-color: var(--dringend-linie);
}

/* Der Karten-Hover darf die Tönung nicht grau überstreichen — sie IST das Signal. */
.triageKarte[data-dringend="true"] .aufgabeKarte:hover,
.signalKarte[data-dringend="true"] .aufgabeKarte:hover {
  background: transparent;
}

.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);
}

/* Die Trennlinie in der getönten Fläche: neutrales Grau schnitte die Fläche entzwei,
   und getragen wird sie nur ganz (#201). */
.triageKarte[data-dringend="true"] .triageHandgriffe,
.signalKarte[data-dringend="true"] .signalHandgriffe {
  border-top-color: var(--dringend-linie);
}

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

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

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

/* Bleibt bei mir · Später · Ablehnen: eine Gruppe, die als Ganzes umbricht und rechts
   anschlägt — nie ein einzelner Knopf allein in einer Zeile (#482). */
.triageWeitere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-1);
  margin-left: auto;
}

/* Die Übersicht fragt leise nach: ein Ghost-Knopf am Kartenfuß, ohne eigene
   Trennlinie — die Karte bleibt eine Karte und wird keine Knopf-Zeile (#482). */
.signalHandgriffe {
  border-top: 0;
  padding-top: 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);
}

/* ── Auswahl, Sammelaktionen und Rücknahme (ADR-0017 Teil 2, #206) ── */

/* Kästchen und Karte teilen die Kopfzeile der Triage-Karte: markiert wird beim Lesen
   der Liste, gehandelt in den Handgriffen darunter. */
.triageKopf,
.auswaehlbareKarte {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

.triageKopf > .aufgabeKarte,
.auswaehlbareKarte > .aufgabeKarte {
  flex: 1;
  min-width: 0;
}

/* 44px-Bedienfläche um ein kompaktes Kästchen: die Fläche ist ein Label ohne Text
   (`.auswahlFlaeche`, der zugängliche Name steht am Kästchen), das Kästchen bleibt
   18px wie jede Checkbox der Schale. Ein 44px großes Kästchen zeichneten Chromium
   und WebKit auch als 44px-Kasten. Die Fläche sitzt in Aufgaben und Eingang gleich:
   oben links neben der Karte, das Kästchen mittig auf der Titelzeile (#464). */
.auswahlFlaeche {
  flex: none;
  justify-content: center;
  width: var(--hoehe-bedienung);
  height: var(--hoehe-bedienung);
  margin: 0;
}

/* Die Auswahl-Leiste steht HINTER der Liste und klebt am unteren Bildrand, solange
   die Liste im Bild ist (#482): wer auf dem Telefon weiter unten markiert, hat die
   Sammel-Handlung unter dem Daumen, statt zum Listenkopf zurückzuscrollen. Klebend,
   nicht fixiert — am Listenende nimmt sie ihren eigenen Platz ein und verdeckt keine
   Karte. Leer verschwindet sie. Die Einrückung am Fuß hält den Home-Indikator frei. */
[data-auswahl-leiste] {
  position: sticky;
  bottom: 0;
  z-index: var(--ebene-kopf);
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  margin-top: var(--raum-2);
  padding: var(--raum-1) 0 calc(var(--raum-2) + env(safe-area-inset-bottom, 0px));
  background: var(--grund);
}

.auswahlZeile,
.ruecknahmeZeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-1) var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  background: var(--flaeche);
}

/* Die Auswahl trägt die getönte Marken-Fläche — dieselbe Aktiv-Sprache wie der
   Leisten-Eintrag und die offene Karte. Nie Dringend: eine Auswahl sticht das
   Vollrot nicht aus (Dominanz-Regel). */
.auswahlZeile {
  background: var(--marke-flaeche);
  border-color: var(--marke-flaeche);
}

.auswahlAnzahl,
.ruecknahmeText {
  margin: 0;
  font-size: var(--schrift-m);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte);
}

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

/* Der Rückweg trägt die Sekundärform, nicht die Akzent-Füllung: er ist der Ausweg
   aus einer eben getanen Handlung, nicht die Handlung selbst. */
.ruecknahmeZeile > button,
.auswahlZeile > button {
  margin: 0;
  font-size: var(--schrift-s);
}

.auswahlZeile .auswahlAnzahl {
  flex: 1 1 auto;
}

/* Die direkte Wahl der Zuständigen: Chips statt Dropdown. Sie tragen kein
   `aria-pressed` — hier wird gehandelt, nicht gefiltert; der Haken der Filter-Chips
   wäre eine Zustands-Behauptung, die es nicht gibt. */
.zuweisungsWahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-1);
  min-width: 0;
}

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

.zuweisungsWahl .chip {
  margin: 0;
}

/* Der Ausweg für längere Listen bleibt ein Select — es wählt nichts vor. */
.zuweisungsAusweg {
  gap: var(--raum-0);
  margin: 0;
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
}

.zuweisungsAusweg select {
  margin: 0;
  min-width: 9rem;
}

/* Die Handgriffe haben ihre eigene Zeile unter Anzahl und »Auswahl aufheben«:
   »Erledigt« vorn, dahinter die Wahl der Zuständigen. Schmal scrollt die Wahl
   waagerecht, statt die klebende Leiste auf vier Chip-Reihen zu türmen (#482). */
.auswahlHandgriffe {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-1) var(--raum-2);
  min-width: 0;
}

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

.auswahlHandgriffe .zuweisungsWahl {
  flex: 1 1 0;
}

/* Das Ergebnis einer Mengen-Operation — »3 von 5 zugewiesen« samt Gründen. */
.auswahlMeldung {
  margin: 0;
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

/* 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 {
  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;
}

/* Die Übersicht trägt Etiketten direkt unter dem Seitentitel: Modul-Blöcke, Signalgruppen
   und Arbeitslast stehen im Gruppen-Rhythmus (#493). */
#uebersichtBereich > :is(section, [data-modul-bloecke], [data-uebersicht-gruppen]),
[data-modul-bloecke] > section + section {
  margin-top: var(--rhythmus-gruppe);
}

/* ── Arbeitslast: ruhige Karte mit tabellarischen Zahlen-Pillen ── */
section[aria-label="Arbeitslast"] {
  max-width: 30rem;
  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);
}

/* Der operative Arbeitsort (#562): dieselbe stille Pille wie der Status, aber mit dem
   Haus-Symbol — nebeneinander wären »offen« und »Südbucht« sonst zwei gleiche
   Grauflächen, die nicht sagen, wovon sie sprechen. Bewusst keine eigene Farbe: ein
   Ort ist Auskunft, kein Zustand, und der Vollton bleibt dem Dringend-Badge. */
.badge[data-art="arbeitsort"]::before {
  content: "";
  width: var(--symbol-xs);
  height: var(--symbol-xs);
  background: currentColor;
  -webkit-mask: var(--symbol-haus) center / contain no-repeat;
  mask: var(--symbol-haus) center / contain no-repeat;
}

/* ── 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);
}

#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-bottom: var(--raum-1);
}

/* 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 {
  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);
}

/* Der Antwortkontext hält einen Kommentar sichtbar an genau einer Statusanfrage.
   Er ist bewusst keine zweite Kommentar-Eingabe: Auswahl und Abbruch rahmen dasselbe Feld. */
.kommentarAntwortbezug {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  margin: 0 0 var(--raum-2);
  padding: var(--raum-1) var(--raum-2);
  background: var(--marke-flaeche);
  border-radius: var(--radius-eingabe);
}

.kommentarAntwortbezug > p {
  min-width: 0;
  margin: 0;
  font-size: var(--schrift-s);
  color: var(--marke-text);
}

.kommentarAntwortbezug > button,
.verlaufHandgriff,
.verlaufBezug {
  min-height: var(--hoehe-bedienung);
  margin: 0;
  padding: var(--raum-0) var(--raum-2);
  font-size: var(--schrift-s);
}

/* Beobachter-Vergabe: ein Chip mehr heißt eine Person mehr, die diese Aufgabe sieht.
   Die leise Zeile sagt das über den Chips — und trägt sonst die Auskunft, wer
   mitliest, für alle, die selbst nicht verwalten dürfen. */
.beobachterHinweis {
  margin: 0 0 var(--raum-1);
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

/* ── 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);
}

#verlaufEintraege p:focus {
  outline: var(--strich-fokus) solid var(--fokus);
  outline-offset: var(--fokus-abstand);
  border-radius: var(--radius-eingabe);
}

.verlaufStatus {
  display: inline-block;
  margin-left: var(--raum-0);
  color: var(--tinte-gedaempft);
}

.verlaufHandgriff,
.verlaufBezug {
  margin-left: var(--raum-1);
}

/* Offene Statusanfragen am Detail-Kopf (#466): dieselbe getönte Fläche wie der
   Antwortbezug am Kommentarfeld — beide meinen dieselbe Frage. Der Knopf bricht auf
   schmalen Schirmen unter den Satz statt ihn zu quetschen. */
.detailStatusanfragen {
  display: grid;
  gap: var(--raum-1);
  margin: 0 0 var(--raum-2);
}

.detailStatusanfrage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-1) var(--raum-2);
  padding: var(--raum-1) var(--raum-2);
  background: var(--marke-flaeche);
  border-radius: var(--radius-eingabe);
}

.detailStatusanfrage > p {
  min-width: 0;
  margin: 0;
  font-size: var(--schrift-s);
  color: var(--marke-text);
}

.detailStatusanfrage > button {
  min-height: var(--hoehe-bedienung);
  margin: 0;
}

#detailMeldung {
  margin: var(--raum-3) 0 0;
}

/* =====================================================================
   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);
  font-size: var(--schrift-basis);
}


#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 {
  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 sind Etiketten (`.ueberschrift--etikett` im Markup) über Karten. */

#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"])) {
  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;
}

/* Der Passwort-Hinweis (#780) steht hinter dem Knopf und bricht als eigene Zeile darunter um. */
#verwaltungBereich :is(#adminEtage, #inhaberEtage) form:has(> label:only-of-type) > .passwortHinweis {
  flex-basis: 100%;
}

#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 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  margin: var(--raum-1) 0;
}

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

.mitgliedschaftForm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2);
}

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

.mitgliedschaftChip label {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
}

/* Tabellen der Inhaber-Etage (Nutzung, Zugangs-Protokoll). Die übrigen
   Verwaltungs-Listen sind Zeilen mit einer Haupt-Aktion (.verwaltungKarte); diese
   beiden tragen keine Aktion, sondern gleichartige Spalten zum Vergleichen. Sie
   erben deshalb die Zeilen-Sprache — Trennstrich in --linie, 13px, Kopf als
   VERSAL-Etikett wie die Abschnitts-Etiketten — und scrollen NUR waagerecht in
   ihrem eigenen Rahmen: sechs Spalten dürfen das Fenster auf dem Praxis-Tablet
   nicht sprengen, und die Fläche darunter bleibt ruhig. */
#nutzungTabelle,
#zugangsProtokollTabelle {
  margin-top: var(--raum-1);
  overflow-x: auto;
}

.verwaltungTabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--schrift-s);
}

.verwaltungTabelle :is(th, td) {
  padding: var(--raum-1) var(--raum-2) var(--raum-1) 0;
  text-align: left;
  white-space: nowrap;
}

.verwaltungTabelle :is(th, td):last-child {
  padding-right: 0;
}

.verwaltungTabelle th {
  border-bottom: var(--strich) solid var(--linie-stark);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  text-transform: uppercase;
  letter-spacing: var(--spation-etikett);
  color: var(--tinte-gedaempft);
}

.verwaltungTabelle td {
  border-top: var(--strich) solid var(--linie);
  color: var(--tinte);
}

.verwaltungTabelle tbody tr:first-child > td {
  border-top: 0;
}

/* Zahlen stehen rechtsbündig und tabular untereinander — sonst ist eine
   Monatssumme mit der des Vormonats nicht auf einen Blick vergleichbar. */
.verwaltungTabelle .zahlSpalte {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Sensible Zonen (Löschprotokoll, Betreiber-Zugriffe, Zugangs-Protokoll): 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);
}

/* ── Benutzermenü im Leisten-Fuß (Kapitän-Entscheidung 6c) ──
   Der Chip ist kein schwebender Avatar mehr, sondern der unterste Leisten-Eintrag —
   der SaaS-Standardort. Er erbt darum die Gestalt der Leiste (voll oder Rail) und
   braucht keine eigene Reserve in der Kopfzeile mehr. ── */
#personKnopf {
  column-gap: var(--raum-2);
}

#personKnopf .personKnopfText {
  display: grid;
  /* Flex-Kind darf unter seine Inhaltsbreite schrumpfen, sonst greift die Ellipse
     der Namens-/Rollen-Spans nie, wenn der Name die Leiste sprengt (#180). */
  min-width: 0;
  text-align: left;
  line-height: var(--zeile-eng);
}

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

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

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

#personKnopf[aria-expanded="true"] {
  background: var(--marke-flaeche);
  color: var(--marke-text);
}

/* Das Panel steigt vom Fuß auf. Es wohnt auf Body-Ebene, nicht in der Leiste: die
   scrollt (`overflow-y: auto`) und schnitte es an ihrer Kante ab.
   `--panel-fuss` ist sein Abstand zur unteren Kante: Bei laufender Aufnahme rückt es
   über das ebenfalls unten verankerte Aufnahme-Panel — dieselbe eine Zahl
   (`--aufnahme-freiraum`) und dieselbe `body:has(…)`-Naht wie Flächen-Ausklang und
   Dialog-Polster. Sonst deckte das Aufnahme-Panel »Rückmeldung geben« und »Abmelden«
   zu, und die laufende Aufnahme muss sichtbar UND bedienbar bleiben
   (Modal-/Aufnahme-Vertrag). */
#personPanel {
  --panel-fuss: var(--raum-3);
  position: fixed;
  left: calc(var(--leiste-sichtbreite) + var(--raum-1));
  bottom: var(--panel-fuss);
  z-index: calc(var(--ebene-leiste) + 1);
  width: min(22rem, calc(100vw - var(--leiste-sichtbreite) - 2rem));
  /* Nie bis in die Kopfzeile: auf 320 × 640 füllte das Panel sonst den ganzen Schirm
     und deckte Menü-Knopf und Glocke zu. Es scrollt lieber intern. */
  max-height: calc(100dvh - var(--panel-fuss) - var(--raum-3) - var(--hoehe-bedienung));
  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);
}

body:has(#aufnahmePanel:not([hidden])) #personPanel {
  --panel-fuss: calc(var(--raum-3) + var(--aufnahme-freiraum));
}

#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"
      "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;
  }

  /* Als Grid-Element fällt der Block-Rhythmus des ersten sichtbaren Blocks nicht mit der
     Gruß-Zeile zusammen — hier hebt ihn die Spalte auf, damit sie oben mit dem Held
     abschließt. Dieselbe Bedingung wie das Raster: ohne sichtbaren Block kein Ausgleich. */
  #startbild:has(#behandlerStartbild:not([hidden])):has(#behandlerZubringer section:not([hidden])) > #behandlerZubringer {
    margin-top: calc(-1 * var(--rhythmus-block));
  }

  #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));
}

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

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

/* ── Kompakt-Cockpit: der benannte Weg in die volle Fläche ──
   Leise Zeile statt Knopf-Gewicht: der Weg ist Auskunft, nicht die Handlung der
   Fläche. Gestalt wie der Zurück-Weg im Detail, nur mit dem Pfeil hinten. ── */
.cockpitWeg {
  margin: var(--raum-2) 0 0;
}

.cockpitWeg button {
  gap: var(--raum-1);
  padding: var(--raum-1) 0;
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
  background: transparent;
  border-color: transparent;
}

.cockpitWeg button::after {
  content: "";
  width: var(--symbol-xs);
  height: var(--symbol-xs);
  background: currentColor;
  -webkit-mask: var(--symbol-pfeil) center / contain no-repeat;
  mask: var(--symbol-pfeil) center / contain no-repeat;
  transition: transform var(--tempo) ease;
}

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

.cockpitWeg button:hover::after {
  transform: translateX(var(--schub));
}

/* Die eigene Fläche des Doku-Moduls trägt dieselbe Lesebreite wie die Blöcke,
   die sie aufnimmt (Doku-Breitenregel). */
#dokuBereichHuelle {
  min-width: 0;
}

/* Primär-Aktionen der Startbilder */
#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;
}

/* Der Rückweg in eine offene Aufnahme (Captain-Entscheid 2026-08-06 / #314): eine Pille
   unter dem Held, keine zweite Karte. Sie trägt die Dringend-Tönung, aber NICHT die
   Akzent-Füllung — die eine Akzent-Handlung dieser Fläche bleibt beim Held. Sie steht
   nur, wenn wirklich etwas offen ist, und sagt nie, WODURCH es offen wurde. */
.offeneAufnahmePille {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  border-color: var(--dringend-linie);
  background: var(--dringend-flaeche);
  color: var(--tinte);
}

.offeneAufnahmePille::before {
  content: "";
  flex: 0 0 auto;
  width: var(--punkt);
  height: var(--punkt);
  border-radius: 50%;
  background: var(--dringend);
}

.offeneAufnahmePille:hover {
  border-color: var(--dringend);
  background: var(--dringend-flaeche);
}

/* 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));
}

#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 (Dialog-Fuß, Doku-Kopf) 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));
}

/* ── Dialog-Fuß (#489, DESIGN.md §3 »Dialog-Fuß«): EIN Muster für jede Dialog-Aktionszeile ──
   Primär zuerst, dann Sekundäre, der leise Ausweg (Abbrechen, Verwerfen, Schließen)
   zuletzt — im Markup wie im Bild, also auch in der Fokus-Reihenfolge. Breit steht die
   Zeile links an der Feld-Kante, der Ausweg rückt an den rechten Rand; schmal steht der
   Primärknopf allein in voller Breite oben, der Rest bricht darunter um.
   Der Fuß klebt am unteren Rand des Dialogs (der Dialog ist der Scroll-Behälter) und
   hebt dessen Polster mit negativen Rändern auf. Damit er nie ein Feld verdeckt, hält
   der Dialog unten seine gemessene Höhe als Scroll-Polster frei (schale.js,
   `--dialog-fuss-hoehe`): Fokus und scrollIntoView legen Felder ÜBER den Fuß. */
dialog:has(> .dialogFuss) {
  scroll-padding-bottom: calc(var(--dialog-fuss-hoehe, 0px) + var(--raum-2));
}

.dialogFuss {
  position: sticky;
  bottom: calc(-1 * var(--dialog-polster));
  z-index: var(--ebene-kopf);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2);
  margin: var(--raum-3) calc(-1 * var(--dialog-polster)) calc(-1 * var(--dialog-polster));
  padding: var(--raum-3) var(--dialog-polster)
    calc(var(--dialog-polster) + env(safe-area-inset-bottom, 0px));
  border-top: var(--strich) solid var(--linie);
  background: var(--flaeche);
}

.dialogFuss > button {
  margin: 0;
}

/* Der leise Ausweg rückt an den rechten Rand. Stehen dort MEHRERE leise Knöpfe
   (Doku-Fenster: »Verwerfen« vor »Später prüfen«, #515), rückt die Gruppe als Ganzes:
   nur der erste SICHTBARE trägt den Schub, sonst teilten sich beide den freien Raum
   und zwischen ihnen klaffte eine Lücke. `:not([hidden])` zählt dabei nur, was auch
   dasteht — die Knöpfe des Fensters blenden sich je Zustand aus. */
.dialogFuss > .knopf--leise:not([hidden]) {
  margin-inline-start: auto;
}

.dialogFuss > .knopf--leise:not([hidden]) ~ .knopf--leise:not([hidden]) {
  margin-inline-start: 0;
}

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

#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);
}

/* Die Radio-Zeilen folgen der Ein-/Aus-Zeile; hier wird entschieden, darum Bedientext in 16px. */
.sicherungZweck label {
  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;
}

/* 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(--dialog-polster));
  z-index: var(--ebene-kopf);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--raum-3);
  margin: calc(-1 * var(--dialog-polster)) calc(-1 * var(--dialog-polster)) 0;
  padding: var(--dialog-polster) var(--dialog-polster) 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 {
  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 > .dokuHinweis {
  margin: 0 auto;
  color: var(--tinte-gedaempft);
  font-size: var(--schrift-s);
}



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

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

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

#entwurfKarte :is(input:not([type="checkbox"], [type="radio"]), 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);
}

/* Der aufgenommene Text nach einem Teil-Erfolg (#743): zum Lesen, nicht zum Bearbeiten. */
#entwurfQuelltextFeld {
  resize: vertical;
  margin-bottom: var(--raum-2);
}

#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. Die 44px der
   Ein-/Aus-Zeilen sind ihr Abstand — ein zusätzlicher gap risse sie auseinander. */
#rueckmeldungDialog fieldset {
  display: grid;
  gap: 0;
  margin: 0 0 var(--raum-3);
  padding: 0;
  border: 0;
}

#rueckmeldungDialog fieldset label {
  margin: 0;
}

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

/* Sprechen ist der schnellste Weg und steht zuerst (#211) — in der mittleren Stufe
   (`knopf--mitte` im Markup); die Akzent-Füllung des Dialogs bleibt bei »Senden«. */
#rueckmeldungMikrofon {
  width: min(100%, var(--cta-breite));
  margin: 0 0 var(--raum-0);
}

/* Die zwei Wege aus dem Erkennungs-Rahmen heraus: »Vorschlag holen« (#552) auf dem
   getippten Text und »Einsprechen« (Inkrement 6) als zweiter Weg IN die Karte. Beide
   tragen dieselbe mittlere Stufe wie das Sprechen in der Rückmeldung — die
   Akzent-Füllung der Karte trägt »Bestätigen«. Sie stehen nebeneinander, solange der
   Platz reicht, und brechen darunter um; der Rahmen selbst bleibt eine Spalte. */
.entwurfErkennungAktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  margin: var(--raum-1) 0 0;
  max-width: var(--cta-breite);
}

/* Die Zeile regelt beide Knöpfe; `.entwurfEinsprechen` trägt darum keine eigene
   Breite mehr (die Klasse bleibt als Name der Handlung, DESIGN.md §4). */
.entwurfErkennungAktionen > button {
  flex: 1 1 9rem;
  margin: 0;
}

.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);
}

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

.feldHinweis:empty {
  display: none;
}

/* 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);
}

/* Die Ein-/Aus-Zeile bringt ihre 44px mit; der Raster-gap trennt, kein Label-Rand dazu. */
.rueckmeldungHinweis label {
  margin: 0;
}

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

/* Der Weg-Satz erklärt die Warnung, ohne sie zu überschreien: kleiner und leiser
   als die Zeile darüber, Abstand kommt aus dem Raster-gap. */
.rueckmeldungHinweisWeg {
  margin: 0;
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
}

/* ── 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%;
}

/* ── 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);
}

/* Die Regel neben einem Feld für ein neues Passwort (#780): leise wie jede Hilfszeile am Feld. */
.passwortHinweis {
  margin: 0;
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
  line-height: var(--zeile-mittel);
}

.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);
  white-space: nowrap;
}

/* Pegel und Stille-Zeile teilen sich EINE Fläche: die Zeile liegt über dem Pegel,
   nicht unter ihm. Das Panel bleibt damit genau so hoch wie bisher — `--aufnahme-freiraum`
   ist die eine Zahl, die Flächen-Ausklang, Held-Höhe und Dialog-Polster lesen. */
.aufnahmePegelFeld {
  position: relative;
  grid-column: 1 / -1;
}

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

/* Die laufende Ampel liegt über dem Pegel (Ort aus #201, laufendes Urteil aus dem
   Captain-Entscheid 2026-08-06 / #313). Sie hat kein `gut`-Kleid: der Ausschlag IST
   die gute Nachricht, und ein Text darüber verdeckte genau das Signal, um das es geht.
   Leer verschwindet sie über den [role="status"]:empty-Zaun — das Panel bleibt so hoch
   wie bisher, `--aufnahme-freiraum` unverändert. */
.aufnahmeAmpel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 var(--raum-2);
  border-radius: var(--radius-eingabe);
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
  text-align: center;
  pointer-events: none;
}

/* Stille ist leise Auskunft, kein Alarm — es ist still, nicht kaputt (#201). */
.aufnahmeAmpel[data-stufe="hinweis"] {
  background: var(--sand);
}

/* Ein stummes Mikrofon ist der eine Fall, der das ganze Diktat wertlos macht: hier
   deckt die Tönung den Pegel bewusst zu, weil dort ohnehin kein Ausschlag steht.
   Dringend-Tönung ohne Vollrot — die Dominanz-Regel gehört den Aufgaben. */
.aufnahmeAmpel[data-stufe="warnung"] {
  border: var(--strich) solid var(--dringend-linie);
  background: var(--dringend-flaeche);
  color: var(--tinte);
  font-weight: var(--gewicht-halbfett);
}

.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);
}

@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;
}

#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;
  }

  /* Schmal bleibt die Kopfzeile EINE Zeile (#493): Menü-Knopf, Wortmarke, Glocke und
     die Uhrzeit. Wochentag, Datum und KW treten hier ab — eine zweite Zeile nur für
     Glocke und Uhr kostete jede Fläche ~50px, und das Datum steht auf dem Startbild
     ohnehin im Gruß. Die Zeile bricht nie um; die Abstände werden enger, nicht die
     44px-Ziele kleiner. */
  body > header {
    flex-wrap: nowrap;
    gap: var(--raum-2);
  }

  #kopfRest {
    gap: var(--raum-1);
  }

  #kopfUhrDatum {
    display: none;
  }

  body.mitLeiste {
    padding-left: 1rem;
    /* Schmal entfällt die feste Leistenfläche — die Leiste ist ein Aufklapp-Panel. */
    background-image: none;
  }

  /* Der Menü-Knopf steht als erstes Element IN der Kopfzeilen-Zeile, nicht darüber:
     eine Mittelachse für Knopf, Wortmarke und Glocke (#195). */
  #leistenBurger {
    display: inline-flex;
    flex: none;
    padding: var(--raum-1) var(--raum-2);
    font-size: var(--schrift-s);
  }

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

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

  /* Schmal ü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(#leiste[data-offen="true"]:not([hidden])) #leistenKulisse {
    display: block;
    position: fixed;
    inset: 0;
    /* Unter der Leiste (40), über dem Inhalt. */
    z-index: calc(var(--ebene-leiste) - 1);
    background: var(--kulisse);
  }

  /* Der Menü-Knopf bleibt über der Kulisse bedienbar: Er ist der BESCHRIFTETE
     Umschalter mit `aria-expanded`, die Kulisse nur der zusätzliche Weg heraus
     (#212). Nur er steigt — die übrige Kopfzeile bleibt gedimmt wie der Inhalt. */
  body:has(#leiste[data-offen="true"]:not([hidden])) #leistenBurger {
    position: relative;
    z-index: var(--ebene-leiste);
  }

  /* Im Drawer gibt es keine Rail — und damit nichts einzuklappen. */
  #leisteEinklappen {
    display: none;
  }

  /* Schmal steigen beide Panels als volle Blätter auf — neben einer 15rem-Reserve
     bliebe auf 390px nichts Lesbares übrig. */
  #personPanel {
    left: var(--raum-3);
    right: var(--raum-3);
    width: auto;
  }

  [data-neuigkeiten] {
    right: var(--raum-3);
    left: var(--raum-3);
    width: auto;
  }

  #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);
  }

  /* Dialog-Fuß schmal (#489): der Primärknopf allein in voller Breite oben, Sekundäre
     und Ausweg brechen darunter in Bild-Reihenfolge um und teilen sich die Breite. */
  .dialogFuss > button {
    flex: 1 1 auto;
  }

  .dialogFuss > .knopf--primaer {
    flex-basis: 100%;
  }

  .dialogFuss > .knopf--leise {
    margin-inline-start: 0;
    min-height: var(--hoehe-bedienung);
  }

  .auswahlHandgriffe {
    flex-wrap: nowrap;
  }

  .auswahlHandgriffe > button {
    flex: none;
  }

  .auswahlHandgriffe .zuweisungsWahl {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: calc(-1 * (var(--strich-fokus) + var(--fokus-abstand)));
    padding: calc(var(--strich-fokus) + var(--fokus-abstand));
    padding-right: calc(var(--strich-fokus) + var(--fokus-abstand) + var(--raum-5));
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--raum-5)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--raum-5)), transparent);
  }

  .auswahlHandgriffe .zuweisungsWahl > * {
    flex: none;
  }

  /* Die Chip-Reihe der Filter läuft rechts sichtbar aus, statt hart abzuschneiden:
     dort geht es weiter. */
  .chips.filterReihe {
    /* Der letzte Chip lässt sich ganz aus dem Auslauf ziehen. */
    padding-right: calc(var(--strich-fokus) + var(--fokus-abstand) + var(--raum-5));
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--raum-5)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--raum-5)), transparent);
  }

  /* Schmal steigt das Filter-Blatt vom unteren Rand auf — dort, wo der Daumen ist —
     und hält den Home-Indikator frei (#482). */
  .filterBlatt {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: var(--radius-karte) var(--radius-karte) 0 0;
    padding-bottom: calc(var(--dialog-polster) + env(safe-area-inset-bottom, 0px));
  }

  /* 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;
  }


  .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%;
  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);
  }
}

/* =====================================================================
   MELDUNGS-SYSTEM (#485, Paket D von #463) — DESIGN.md §3 »Meldungen«.
   Drei Mechanismen: Feld-Fehler am Feld, EIN Toast über der Inhalts-
   Spalte, EIN haftender Banner unter der Kopfzeile. Nichts sonst.
   ===================================================================== */

/* ── Banner: Verbindung und EIN System-Hinweis ──
   Klebt oben, damit »Keine Verbindung« auch mitten in einer langen Liste im Bild
   steht. Die Verbindung trägt die Dringend-Tönung (nie Vollrot: die Dominanz gehört
   den Aufgaben), der Hinweis die ruhige Sand-Fläche — außer er meldet Datenverlust. */
.systemBanner {
  position: sticky;
  top: 0;
  z-index: calc(var(--ebene-kopf) + 2);
  display: grid;
  gap: var(--raum-1);
  margin: var(--raum-1) 0 var(--raum-3);
}

.bannerZeile {
  display: flex;
  align-items: center;
  gap: var(--raum-1);
  min-height: var(--hoehe-bedienung);
  margin: 0;
  padding: var(--raum-1) var(--raum-1) var(--raum-1) var(--raum-3);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-knopf);
  background: var(--sand);
  color: var(--tinte);
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
}

.bannerZeile[data-ton="warnung"] {
  background: var(--dringend-flaeche);
  border-color: var(--dringend-linie);
}

/* Die Verbindungszeile ist ein `role="alert"` — Text in Tinte statt Vollrot. */
#bannerVerbindung {
  padding-right: var(--raum-3);
  color: var(--tinte);
}

#bannerHinweisText {
  flex: 1;
  margin: 0;
}

#bannerHinweisSchliessen {
  flex: none;
  width: var(--hoehe-bedienung);
  padding: 0;
}

/* ── Toast: EIN flüchtiger Satz über der Inhalts-Spalte ──
   `--toast-mitte` setzt schale-meldungen.js aus der Lage von `#inhalt` — die Leiste
   liegt links daneben, die Fenstermitte wäre nicht die Mitte dessen, was man liest.
   `visibility` statt bloßem `opacity`: sonst bliebe der Griff im Tabfluss und im
   Vorlesen, obwohl nichts zu sehen ist. */
.toast {
  position: fixed;
  left: var(--toast-mitte, 50%);
  bottom: calc(var(--raum-5) + env(safe-area-inset-bottom));
  z-index: calc(var(--ebene-dialog) + 10);
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: var(--raum-2) var(--raum-4);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-pille);
  box-shadow: var(--schatten-schwebend);
  background: var(--flaeche);
  color: var(--tinte);
  font-size: var(--schrift-m);
  font-weight: var(--gewicht-halbfett);
  transform: translate(-50%, 0.75rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tempo) ease, transform var(--tempo) ease,
    visibility 0s linear var(--tempo);
}

.toast[data-an="true"] {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--tempo) ease, transform var(--tempo) ease, visibility 0s;
}

/* Getönt, nie Vollrot: der Autosave ohne Patientenbezug (#315) ist lauter, aber kein Alarm. */
.toast[data-ton="warnung"] {
  border-color: var(--dringend-linie);
  background: var(--dringend-flaeche);
}

#toastAktion {
  min-height: 2.25rem;
  margin: 0;
  padding: var(--raum-0) var(--raum-2);
  font-size: var(--schrift-s);
}

/* Ein laufendes Aufnahme-Panel belegt den Fuß — der Toast steht dann darüber. */
body:has(#aufnahmePanel:not([hidden])) .toast {
  bottom: calc(var(--raum-5) + var(--aufnahme-freiraum) + env(safe-area-inset-bottom));
}

/* ── Anmeldung: Meldung und Feld-Fehler in der Karte ── */
#anmeldungMeldung {
  margin: 0 0 var(--raum-2);
}

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

/* ── Feld-Fehler: das Feld selbst trägt den Zustand ──
   Nur der Rand in Dringend-Farbe (nie eine Vollrot-Fläche); der Satz darunter sagt, was
   fehlt. Im gerahmten Erkennungs-Feld des Entwurfs rückt der Satz nicht an das Feld heran —
   dort läge er sonst auf dem Fokusring. */
:is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--dringend);
}

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

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

.teamFlaechen button[aria-pressed="true"] {
  background: var(--marke-tief);
  color: var(--flaeche);
  border-color: var(--marke-tief);
}

#teamBereich .filterZeile {
  flex-wrap: wrap;
  align-items: flex-end;
}

#teamHinweis:not([hidden]) {
  color: var(--dringend);
}