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

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

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

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

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

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

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

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

  /* ── Maße ── */
  --hoehe-bedienung: 2.75rem; /* 44px Mindest-Touchziel */
  --strich: 1px;
  --strich-fokus: 3px;
  --fokus-abstand: 2px;
  --punkt: 0.5rem; /* Prioritätspunkt */
  --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;
  --gruppe-min: 13rem; /* Mindestspur der Übersicht-Gruppen (umbruchfähig) */
  --inhalt-schmal: 44rem;
  --inhalt-breit: 76rem;
  --dialog-breite: 26rem;
  --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;
  --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;

  /* ── 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 — die echte Schale
     hat keinen Initialen-Datenfluss, der Textknoten „Person" bleibt der Name. */
  --symbol-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5'/%3E%3C/svg%3E");
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body.praxismanagerAnsicht {
  padding-left: calc(var(--leiste-breite) + var(--raum-6));
}

/* ── Praxismanager-Leiste: weiße Schiene, Einträge als volle Zeilen.
   Pin/Hover-Peek (claude.ai-Muster) folgt in einer späteren Scheibe — hier
   nur der visuelle Umbau der angehefteten Leiste samt Einklapp-Verhalten. ── */
#praxismanagerLeiste {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--ebene-leiste);
  width: var(--leiste-breite);
  display: flex;
  flex-direction: column;
  padding: var(--raum-4) var(--raum-2);
  background: var(--flaeche);
  border-right: var(--strich) solid var(--linie);
  overflow-y: auto;
}

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

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

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

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

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

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

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

body.leisteEingeklappt {
  padding-left: 5rem;
}

body.leisteEingeklappt #praxismanagerLeiste {
  /* Volle Breite behalten, aber bis auf einen 4rem-Streifen hinausschieben —
     transform statt width, damit die Animation nie Layout rechnet. Der
     Streifen bleibt schmaler als das 5rem-padding-left des body. */
  transform: translateX(calc(-1 * (var(--leiste-breite) - 4rem)));
  overflow: hidden;
}

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

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

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

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

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

#leistenBurger {
  display: none;
}

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

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

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

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

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

/* Einheitliche, ruhige Formfelder: 44px-Touchziel, Radius 8, starker Rand. */
input,
select,
textarea {
  min-height: var(--hoehe-bedienung);
  padding: 0 var(--raum-2);
  font-size: var(--schrift-m);
  color: var(--tinte);
  background: var(--flaeche);
  border: var(--strich) solid var(--linie-stark);
  border-radius: var(--radius-eingabe);
  transition: border-color var(--tempo) ease, box-shadow var(--tempo) ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#warnungText {
  flex: 1;
}

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

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

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

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

.chips .chip {
  margin: 0;
}

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

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

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

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

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

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

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

.standortChip[hidden] {
  display: none;
}

/* ── Karten-Listen und Raster: Listen-Gap 8px, Raster-Gap 12px („Mittel") ── */
#aufgabenKarten,
#startbildAufgabenKarten,
[data-meine-aufgaben-karten] {
  display: grid;
  gap: var(--raum-1);
  margin-top: var(--raum-2);
}

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

[data-eingang-karten] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cta-breite)), 1fr));
  gap: var(--raum-2);
  margin-top: var(--raum-2);
}

[data-uebersicht-gruppen] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gruppe-min)), 1fr));
  gap: var(--raum-2);
  margin-top: var(--raum-2);
}

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

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

/* ── Aufgaben-Karten: Priorität als Punkt + getönte Fläche, KEINE Balken ── */
.aufgabeKarte {
  display: grid;
  grid-template-columns: auto 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 {
  content: "";
  grid-row: 1;
  grid-column: 1;
  width: var(--punkt);
  height: var(--punkt);
  margin-top: var(--punkt-versatz);
  border-radius: var(--radius-pille);
  background: var(--linie-stark);
}

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

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

/* „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-prioritaet="hoch"]::before {
  background: var(--marke);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── 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="prioritaet-dringend"] {
  background: var(--dringend);
  color: var(--schrift-hell);
  text-transform: uppercase;
  letter-spacing: var(--spation-etikett);
}

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

/* ── Aufgaben-Detail: Radius-16-Karte, Etiketten-Gruppen, Sand-Meldung ── */
#aufgabenDetail {
  min-width: 0;
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  padding: var(--raum-3) var(--raum-4) var(--raum-4);
  margin-top: var(--raum-2);
}

#detailZurueck {
  margin: 0 0 var(--raum-2) calc(-1 * 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: 0 0 var(--raum-1);
  font-size: var(--schrift-xs);
  text-transform: uppercase;
  letter-spacing: var(--spation-etikett);
  color: var(--tinte-gedaempft);
}

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

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

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

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

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

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

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

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

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

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

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

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

/* =====================================================================
   VERWALTUNG als Overlay-Fenster (#131, Runde-4/5-Amendment):
   claude.ai-Settings-Muster — zentriertes Fenster über dem sichtbaren
   Bereich, Backdrop dimmt und zeichnet weich, 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;
  background: var(--kulisse-fenster);
  -webkit-backdrop-filter: blur(var(--weichzeichnung));
  backdrop-filter: blur(var(--weichzeichnung));
}

@supports not (backdrop-filter: blur(8px)) {
  #verwaltungBereich::before {
    background: var(--kulisse); /* Fallback (alte Praxis-Tablets): nur stärker dimmen */
  }
}

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

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

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

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

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

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

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

.verwaltungIndex {
  display: none;
}

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

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

/* Ohne Inhaber-Etage keine Inhaber-Sprungziele. */
#verwaltungBereich:has(#inhaberEtage[hidden]) .indexGruppe:last-child {
  display: none;
}

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

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

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

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

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

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

/* Formulare als Settings-Zeilen: Beschriftung links, Eingabe rechts */
#verwaltungBereich form {
  display: flex;
  flex-direction: column;
}

#verwaltungBereich form > label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-1) var(--raum-4);
  margin: 0;
  padding: var(--raum-2) 0;
  border-top: var(--strich) solid var(--linie);
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte);
}

#verwaltungBereich form :is(input, 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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#stepUpPrompt form > label {
  flex-direction: column;
  align-items: stretch;
  border-top: 0;
}

#stepUpPrompt form input {
  width: 100%;
}

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

/* ── Personen-Ecke: Avatar-Chip oben rechts auf allen Screens ── */
#personenEcke {
  position: fixed;
  right: var(--raum-3);
  top: var(--raum-3);
  z-index: var(--ebene-kopf);
}

#personKnopf {
  width: var(--hoehe-bedienung);
  height: var(--hoehe-bedienung);
  padding: 0;
  margin: 0;
  border-radius: var(--radius-pille);
  border-color: var(--linie-stark);
  background: var(--marke-flaeche); /* Avatar-Tönung bleibt orange („Gezügelt") */
  font-size: 0; /* Textknoten „Person" bleibt der zugängliche Name */
}

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

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

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

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

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

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

/* Settings-Zeilen im Panel: Ansicht- und Mikrofon-Wahl (#129) als ruhige
   Spalten-Zeilen hinter leisen Trennern. */
#ansichtAuswahlZeile,
#mikrofonAuswahlZeile {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
  margin: var(--raum-2) 0 0;
  padding-top: var(--raum-2);
  border-top: var(--strich) solid var(--linie);
}

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

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

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

/* ── Schwebende Erfassungs-Gruppe unten rechts: Sprechen + Eintippen ── */
.globalErfassung {
  position: fixed;
  right: var(--raum-3);
  bottom: var(--raum-3);
  z-index: var(--ebene-kopf);
  display: flex;
  align-items: center;
  gap: var(--raum-1);
}

.globalErfassung button {
  margin: 0;
  box-shadow: var(--schatten-schwebend);
}

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

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

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

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

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

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

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

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

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

/* ── Dialoge: weiße Radius-16-Karten mit warmem Dialog-Schatten ── */
dialog {
  max-width: min(34rem, calc(100vw - 2rem));
  border: 0;
  border-radius: var(--radius-karte);
  padding: var(--raum-5);
  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);
}

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

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

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

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

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

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

#entwurfBestaetigen {
  width: 100%;
  margin-top: var(--raum-1);
}

#entwurfVerwerfen {
  width: 100%;
}

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

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

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

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

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

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

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

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

/* ── Dringend-Popup: Zeilen mit Titel links, 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 {
  font-size: var(--schrift-m);
  font-weight: var(--gewicht-halbfett);
}

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

#dringendAufgaben span {
  flex: 1 1 100%;
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
  color: var(--dringend);
}

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

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

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

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

/* ── Aufnahme-Panel (#125): weiße Karte, über der Leiste, unter den Dialogen ── */
#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);
}

/* Kollisions-Schutz: Bei sichtbarem Panel weicht die Fläche aus — der Held
   schrumpft (die Startbild-Zugänge rücken über das Panel), der Seitenausklang
   wächst, und die schwebende Erfassungs-Gruppe hebt sich unterhalb von 64rem
   über das Panel (dort überlappen sich beide sonst am unteren Rand). */
body:has(#aufnahmePanel:not([hidden])) {
  padding-bottom: calc(var(--raum-7) + var(--aufnahme-freiraum));
}

body:has(#aufnahmePanel:not([hidden])) #behandlerStartbild {
  min-height: 40vh;
}

@media (max-width: 64rem) {
  body:has(#aufnahmePanel:not([hidden])) #globalErfassung {
    bottom: calc(var(--raum-2) + var(--aufnahme-freiraum));
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

#sperrbildschirm {
  position: fixed;
  inset: 0;
  z-index: 10000;
  min-height: 100vh;
  /* 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, PIN-Feld 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);
}

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

#sperrbildschirmPin {
  width: 100%;
  margin: 0;
  font-size: var(--schrift-xl);
  letter-spacing: 0.2em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

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

/* Der Passwort-Ausweg bleibt eine leise Zeile unter der PIN. */
#sperrbildschirmPasswort {
  display: inline-block;
  margin-top: var(--raum-3);
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

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

.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 der erste Eindruck der Pilot-Praxis: mittig, als ruhige Karte,
   nicht als nackte Feldliste oben links. Ihr Screen läuft in Lesebreite. */
body:has(#anmeldung:not([hidden])) {
  max-width: var(--inhalt-schmal);
}

#anmeldung {
  max-width: 22rem;
  margin: 8vh auto 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;
}

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

  body.praxismanagerAnsicht,
  body.leisteEingeklappt {
    padding-left: 1rem;
    padding-top: 4rem;
  }

  #leistenBurger {
    display: inline-flex;
    position: fixed;
    top: var(--raum-2);
    left: var(--raum-2);
    z-index: calc(var(--ebene-leiste) + 1);
    font-size: var(--schrift-s);
    padding: var(--raum-1) var(--raum-2);
    box-shadow: var(--schatten-karte);
  }

  #praxismanagerLeiste {
    inset: 3.5rem auto auto 0.75rem;
    width: min(16rem, calc(100vw - 1.5rem));
    border: var(--strich) solid var(--linie);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-schwebend);
  }

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

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

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

  #leisteEinklappen {
    display: none;
  }

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

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

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

  .globalErfassung {
    right: var(--raum-2);
    bottom: var(--raum-2);
  }

  /* Der Inhalt muss unter der schwebenden Erfassungs-Gruppe hervorscrollen
     können (Muster --aufnahme-freiraum); der größere Panel-Freiraum behält
     per :not-Ausschluss Vorrang, weil beide Regeln sonst gleich spezifisch
     um das body-Polster konkurrieren. */
  body:has(#globalErfassung:not([hidden])):not(:has(#aufnahmePanel:not([hidden]))) {
    padding-bottom: calc(var(--raum-7) + var(--hoehe-bedienung) + var(--raum-2));
  }

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

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

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

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

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

  #verwaltungBereich form > label {
    flex-direction: column;
    align-items: stretch;
    gap: var(--raum-1);
  }

  #verwaltungBereich form :is(input, select) {
    width: 100%;
  }

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