/* Rezeption-Tool — physio+ Schwartz
 *
 * Farben, Schriften und Radien stammen aus dem Corporate-Identity-Handbuch „physio+
 * Schwartz" (V1 · 2026). Nichts davon ist frei gewählt.
 *
 * ⚠ KONTRAST-REGELN AUS DER CI, die hier den Aufbau bestimmen:
 *   · Anthrazit ist die Textfarbe, nicht Schwarz.
 *   · NIEMALS weißer Text auf Physio-Grün (2,1:1). Grüner Text auf Weiß = Grün-Dunkel.
 *   · Weiß auf Physio-Blau nur für das Logo und große Überschriften. Für weißen Fließtext
 *     wird die Fläche in Tiefblau angelegt.
 *   · Koralle sparsam und nur mit Anthrazit-Text oder als große fette Schrift.
 *     (Weiß auf Koralle wären nur ~3,3:1 — zu wenig für Fließtext.)
 *
 * ⚠ JEDER Knopf setzt seine Schriftfarbe AUSDRÜCKLICH. Eine allgemeine Regel wie
 * `button { color:#fff }` färbt sonst auch die hellen Sonderknöpfe mit — genau dieser
 * Fehler wurde in einem früheren physio+-Projekt erst durch einen Kontrast-Scan gefunden.
 *
 * ⚠ KEINE style="…"-Attribute im erzeugten HTML: die Inhaltssicherheitsrichtlinie erlaubt
 * kein 'unsafe-inline' für Stile. Wo etwas berechnet werden muss, setzt das Skript die
 * Eigenschaft über `element.style.setProperty(…)`.
 */

/* ---------------------------------------------------------------- Schriften
 * Selbst ausgeliefert statt über Google Fonts: erstens Datenschutz (keine Verbindung zu
 * einem fremden Server), zweitens erlaubt die Inhaltssicherheitsrichtlinie nur die eigene
 * Herkunft. Latin-Ausschnitt, zusammen rund 63 KB. */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/poppins-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/poppins-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/poppins-latin-900-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Mulish'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/mulish-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Mulish'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/mulish-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Mulish'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/mulish-latin-700-normal.woff2') format('woff2');
}

:root {
  /* CI-Farben */
  --blau: #2DAAE1;
  --gruen: #9BBF17;
  --grau: #9D9D9C;
  --anthrazit: #24333B;
  --tiefblau: #14536B;
  --gruen-dunkel: #6F8C10;
  --himmelblau: #A9DCF2;
  --gruen-hell: #EAF2CE;
  --nebel: #EAF6FC;
  --koralle: #E8654E;
  --weiss: #FFFFFF;

  /* Abgeleitete Rollen */
  --text: var(--anthrazit);
  --text-leise: #5A6B73;          /* Anthrazit aufgehellt, auf Weiß 5,4:1 */
  --hintergrund: var(--nebel);
  --karte: var(--weiss);
  --rand: #CBD8DE;
  --rand-stark: #9FB6C0;
  --koralle-hell: #FBE4DF;
  /* Koralle abgedunkelt — dasselbe Prinzip, das die CI für Grün mit „Grün-Dunkel"
   * vorgibt: die Markenfarbe bleibt erkennbar, wird aber lesbar.
   * Nötig, weil die reine Koralle als Fläche für kleine Schrift nicht reicht —
   * mit Anthrazit nur 3,97:1, mit Weiß 3,3:1. Beides unter den geforderten 4,5:1.
   * #B03A28 trägt Weiß mit 7,3:1 und steht auf Koralle-Hell mit 6,4:1. */
  --koralle-dunkel: #B03A28;
  --rot-text: var(--koralle-dunkel);

  --radius: 14px;
  --radius-klein: 10px;
  --radius-pille: 999px;
  --schatten: 0 1px 2px rgba(36, 51, 59, .06), 0 4px 16px rgba(36, 51, 59, .06);
  --schatten-stark: 0 2px 6px rgba(36, 51, 59, .10), 0 12px 32px rgba(36, 51, 59, .12);

  --font-head: 'Poppins', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --font-text: 'Mulish', system-ui, 'Segoe UI', sans-serif;

  --kopf-hoehe: 60px;
}

/* ---------------------------------------------------------------- Grundlagen */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--hintergrund);
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.4rem; font-weight: 800; }
h2 { font-size: 1.15rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 .75rem; }
a { color: var(--tiefblau); }
a:hover { color: var(--blau); }
ul.schlicht { list-style: none; padding: 0; margin: 0; }

/* Tastaturbedienung sichtbar machen — Pflicht, nicht Zierde. */
:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 2px;
  border-radius: 4px;
}

.versteckt { display: none !important; }

/* Nur für Vorleseprogramme */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprungmarke für Tastaturnutzer */
.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tiefblau); color: var(--weiss);
  padding: .6rem 1rem; border-radius: 0 0 var(--radius-klein) 0; font-weight: 700;
}
.sprungmarke:focus { left: 0; }

/* ---------------------------------------------------------------- Kopfzeile */

header#kopf {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  min-height: var(--kopf-hoehe);
  padding: .5rem 1rem;
  background: var(--tiefblau);
  color: var(--weiss);
  border-bottom: 3px solid var(--blau);
}
header#kopf img.logo { height: 32px; width: auto; display: block; }
header#kopf .titel { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; }
header#kopf .fueller { flex: 1; }
header#kopf .wer { font-size: .875rem; color: var(--himmelblau); text-align: right; line-height: 1.3; }
header#kopf .wer strong { color: var(--weiss); font-weight: 700; display: block; }
header#kopf button { background: transparent; color: var(--weiss); border-color: rgba(255,255,255,.45);
                     min-height: 36px; padding: .3rem .7rem; font-size: .875rem; }
header#kopf button:hover { background: rgba(255,255,255,.14); color: var(--weiss); }

/* ---------------------------------------------------------------- Reiter */

nav#reiter {
  position: sticky; top: var(--kopf-hoehe); z-index: 25;
  display: flex; gap: .375rem; flex-wrap: wrap;
  padding: .625rem 1rem;
  background: var(--weiss);
  border-bottom: 1px solid var(--rand);
}
nav#reiter button {
  font-family: var(--font-text); font-size: .9375rem; font-weight: 700;
  padding: .5rem .9rem; min-height: 40px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-pille);
  background: var(--weiss);
  color: var(--anthrazit);          /* ausdrücklich — nicht von einer allgemeinen Regel erben */
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
}
nav#reiter button:hover { background: var(--nebel); border-color: var(--himmelblau); color: var(--anthrazit); }
nav#reiter button[aria-current='page'] {
  background: var(--tiefblau); color: var(--weiss); border-color: var(--tiefblau);
}
nav#reiter .zaehler {
  min-width: 1.35rem; padding: 0 .35rem; border-radius: var(--radius-pille);
  background: var(--koralle-dunkel); color: var(--weiss);
  font-size: .8125rem; font-weight: 700; text-align: center;
}
nav#reiter button[aria-current='page'] .zaehler { background: var(--himmelblau); color: var(--anthrazit); }
nav#reiter .symbol { font-size: 1rem; line-height: 1; }

/* ---------------------------------------------------------------- Grundgerüst */

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1rem 4rem;
}
.kopfzeile-ansicht {
  display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.kopfzeile-ansicht h1 { margin-bottom: .15rem; }
.kopfzeile-ansicht .unterzeile { color: var(--text-leise); font-size: .9375rem; }
.kopfzeile-ansicht .rechts { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.125rem 1.25rem;
  margin-bottom: 1rem;
}
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }
.karte-kopf {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: -.25rem 0 .875rem;
}
.karte-kopf h2, .karte-kopf h3 { margin: 0; }
.karte-kopf .rechts { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.karte-leise { background: #F7FAFC; }

/* Zwei Spalten im Rezept-Check: links die Checkliste, rechts Fristen und Probleme. */
.zwei-spalten { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
@media (min-width: 960px) {
  .zwei-spalten { grid-template-columns: minmax(0, 1fr) 330px; }
  .zwei-spalten > aside { position: sticky; top: calc(var(--kopf-hoehe) + 62px); }
}

.raster { display: grid; gap: .875rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.feld { margin-bottom: .875rem; }

/* ---------------------------------------------------------------- Formulare */

label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .3rem; }
label .pflicht { color: var(--rot-text); font-weight: 700; }

input[type='text'], input[type='password'], input[type='date'], input[type='number'],
input[type='search'], select, textarea {
  width: 100%;
  font-family: var(--font-text); font-size: 1rem;
  color: var(--anthrazit);
  background: var(--weiss);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  padding: .5rem .7rem;
  min-height: 44px;                 /* bequem auch mit dem Finger */
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--blau); }
input[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--koralle); border-width: 2px; }
input:disabled, select:disabled, textarea:disabled { background: #F2F5F7; color: var(--text-leise); }

.feldfehler { color: var(--rot-text); font-size: .875rem; font-weight: 600; margin-top: .3rem; }
.feldhinweis { color: var(--text-leise); font-size: .8125rem; margin-top: .3rem; }

fieldset { border: 0; margin: 0; padding: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: .4rem; font-size: .9375rem; }

/* Häkchen-Zeile: die ganze Zeile ist antippbar, nicht nur das kleine Kästchen.
 * Ein 13-px-Kästchen trifft niemand mit dem Finger — und am Praxis-PC ist eine große
 * Trefferfläche auch mit der Maus schneller. */
label.wahlzeile {
  display: flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: .35rem .6rem; margin-bottom: .35rem;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--weiss); font-weight: 600; cursor: pointer;
}
label.wahlzeile:hover { border-color: var(--blau); background: var(--nebel); }
label.wahlzeile input[type='checkbox'] {
  width: 22px; height: 22px; min-height: 0; margin: 0; flex: none;
  accent-color: var(--tiefblau); cursor: pointer;
}
label.wahlzeile:has(input:checked) { background: var(--nebel); border-color: var(--blau); }

/* ---------------------------------------------------------------- Knöpfe
 * Jede Klasse setzt Hintergrund UND Schriftfarbe ausdrücklich. */

button, .knopf {
  font-family: var(--font-text); font-size: .9375rem; font-weight: 700;
  padding: .55rem 1.05rem;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  background: var(--tiefblau);
  color: var(--weiss);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  text-decoration: none;
}
button:hover, .knopf:hover { background: #0F4256; color: var(--weiss); }
button:disabled { opacity: .55; cursor: not-allowed; }
button:disabled:hover { background: var(--tiefblau); }

.knopf-leise { background: var(--weiss); color: var(--anthrazit); border-color: var(--rand-stark); }
.knopf-leise:hover { background: var(--nebel); color: var(--anthrazit); border-color: var(--blau); }
.knopf-leise:disabled:hover { background: var(--weiss); }

.knopf-gruen { background: var(--gruen-dunkel); color: var(--weiss); }
.knopf-gruen:hover { background: #5C7509; color: var(--weiss); }
.knopf-gruen:disabled:hover { background: var(--gruen-dunkel); }

/* Koralle-Dunkel mit Weiß (7,3:1). Die reine Koralle trägt bei dieser Schriftgröße
 * weder Weiß (3,3:1) noch Anthrazit (3,97:1) — beides unter der Mindestanforderung. */
.knopf-warn { background: var(--koralle-dunkel); color: var(--weiss); }
.knopf-warn:hover { background: #96301F; color: var(--weiss); }
.knopf-warn:disabled:hover { background: var(--koralle-dunkel); }

.knopf-klein { min-height: 36px; padding: .3rem .7rem; font-size: .875rem; }
.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.knopfreihe .fueller { flex: 1; }

/* ---------------------------------------------------------------- Chips und Ampel */

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem;
  border-radius: var(--radius-pille);
  font-size: .8125rem; font-weight: 700;
  background: var(--nebel); color: var(--anthrazit);
  border: 1px solid transparent;
}
.chip-standort { background: var(--himmelblau); color: var(--anthrazit); }
/* Auf hellen Flächen schreibt die CI Anthrazit vor — Grün-Dunkel auf Grün-Hell wären
 * nur 3,3:1. Die grüne Anmutung trägt der Rand. */
.chip-stufe { background: var(--gruen-hell); color: var(--anthrazit); border-color: var(--gruen-dunkel); }
.chip-leise { background: #EEF2F4; color: var(--text-leise); }

/* Ampel — die Farben kommen aus der CI, nicht aus einem Ampel-Klischee.
 * Jeder Zustand trägt zusätzlich ein Zeichen, damit die Aussage nicht allein an der
 * Farbe hängt (Barrierefreiheit, Farbsehschwäche, Graustufendruck). */
.ampel { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem;
         border-radius: var(--radius-pille); font-size: .8125rem; font-weight: 700;
         border: 1px solid transparent; }
/* Alle vier Zustände sind auf mindestens 4,5:1 geprüft (Kontrast-Scan im Browser).
 * Die Markenfarbe steht jeweils im Rand, der Text in einem lesbaren Ton. */
.ampel-ok        { background: var(--gruen-hell); color: var(--anthrazit); border-color: var(--gruen-dunkel); }
.ampel-hinweis   { background: var(--nebel); color: var(--tiefblau); border-color: var(--himmelblau); }
.ampel-kritisch  { background: var(--koralle-hell); color: var(--koralle-dunkel); border-color: var(--koralle); }
.ampel-unbekannt { background: #EEF2F4; color: var(--text-leise); border-color: var(--rand); }
.ampel-neutral   { background: var(--weiss); color: var(--text-leise); border-color: var(--rand); }

/* ---------------------------------------------------------------- Meldungen */

.meldung {
  border-radius: var(--radius-klein);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  border-left: 4px solid var(--blau);
  background: var(--nebel);
  color: var(--anthrazit);
}
.meldung-warn { background: var(--koralle-hell); border-left-color: var(--koralle); }
.meldung-ok { background: var(--gruen-hell); border-left-color: var(--gruen-dunkel); }
.meldung h3 { margin: 0 0 .3rem; font-size: .9375rem; }
.meldung ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.meldung li { margin-bottom: .2rem; }
.meldung button { margin-top: .5rem; }

/* Kurzmeldungen unten rechts */
#toasts {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  display: flex; flex-direction: column; gap: .5rem;
  max-width: min(420px, calc(100vw - 2rem));
}
.toast {
  background: var(--tiefblau); color: var(--weiss);
  padding: .7rem 1rem; border-radius: var(--radius-klein);
  box-shadow: var(--schatten-stark);
  font-weight: 600; font-size: .9375rem;
}
.toast-fehler { background: var(--koralle-dunkel); color: var(--weiss); font-weight: 700; }
.toast-ok { background: var(--gruen-dunkel); color: var(--weiss); }

/* ---------------------------------------------------------------- Leerzustände */

.leer {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-leise);
}
.leer .zeichen { font-size: 2rem; display: block; margin-bottom: .5rem; }
.leer h3 { color: var(--anthrazit); margin-bottom: .35rem; }
.leer p { max-width: 46ch; margin: 0 auto .9rem; }

.laedt { color: var(--text-leise); padding: 2rem 1rem; text-align: center; }

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

.tabelle-rahmen { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--rand);
                  background: var(--weiss); margin-bottom: 1rem; }
table.tabelle { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.tabelle th, table.tabelle td { padding: .6rem .75rem; text-align: left;
                                     border-bottom: 1px solid var(--rand); vertical-align: top; }
table.tabelle th { background: var(--nebel); font-weight: 700; white-space: nowrap; }
table.tabelle tbody tr:last-child td { border-bottom: 0; }
table.tabelle tbody tr:hover { background: #F7FBFD; }
table.tabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.nummer { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------------------------------------------------------------- Anmeldung */

#anmeldung {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: linear-gradient(160deg, var(--nebel) 0%, var(--himmelblau) 100%);
}
#anmeldung .karte { width: min(400px, 100%); box-shadow: var(--schatten-stark); padding: 1.75rem; margin: 0; }
#anmeldung img.logo { height: 44px; margin-bottom: 1rem; }
#anmeldung h1 { font-size: 1.25rem; }
#anmeldung .untertitel { color: var(--text-leise); font-size: .9375rem; margin-bottom: 1.25rem; }
#anmeldung button[type='submit'] { width: 100%; }

/* ---------------------------------------------------------------- Checkliste */

.gruppe { margin-bottom: 1.5rem; }
.gruppe > h3 {
  font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tiefblau);
  padding-bottom: .35rem; margin-bottom: .6rem;
  border-bottom: 2px solid var(--himmelblau);
}

.frage {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: .4rem .75rem;
  align-items: start;
  padding: .7rem .75rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--weiss);
  margin-bottom: .5rem;
}
.frage:hover { border-color: var(--himmelblau); }
.frage.hat-problem { border-left: 4px solid var(--koralle); background: #FFF9F8; }
.frage.erledigt { border-left: 4px solid var(--gruen-dunkel); background: #FBFDF5; }
.frage.entfaellt { background: #F5F8FA; border-style: dashed; }
.frage.entfaellt .frage-text { color: var(--text-leise); font-weight: 400; }

.frage .nr { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-leise); padding-top: .5rem; }
.frage .frage-text { font-weight: 600; padding-top: .45rem; }
.frage .zusatz { display: block; font-weight: 400; font-size: .8125rem; color: var(--text-leise); margin-top: .2rem; }
.frage .antwort-feld { grid-column: 2 / -1; }
.frage .frage-fuss { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.frage .frage-fuss:empty { display: none; }

/* Ja/Nein als echte Radiobuttons: Tab springt von Frage zu Frage, Pfeiltasten wählen
 * innerhalb — das ist natives Verhalten und schneller als jede eigene Lösung. */
.wahl { display: inline-flex; gap: .25rem; }
.wahl input[type='radio'] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl label {
  margin: 0;
  min-width: 3.4rem; min-height: 40px;
  padding: .35rem .8rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  background: var(--weiss); color: var(--anthrazit);
  font-weight: 700; font-size: .9375rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
}
.wahl label:hover { border-color: var(--blau); background: var(--nebel); }
/* Gewählte Antwort: kräftiger Rand in der Markenfarbe, Text in einem lesbaren Ton.
 * Die Fläche allein darf die Aussage nicht tragen — deshalb auch der 2-px-Rand. */
.wahl input:checked + label.ja {
  background: var(--gruen-hell); border-color: var(--gruen-dunkel); border-width: 2px; color: var(--anthrazit);
}
.wahl input:checked + label.nein {
  background: var(--koralle-hell); border-color: var(--koralle); border-width: 2px; color: var(--koralle-dunkel);
}
.wahl input:checked + label.entfaellt { background: #E4EAEE; border-color: var(--rand-stark); color: var(--anthrazit); }
.wahl input:focus-visible + label { outline: 3px solid var(--blau); outline-offset: 2px; }
.wahl input:disabled + label { opacity: .6; cursor: not-allowed; }

/* Tastenkürzel-Leiste */
.kuerzel {
  display: flex; gap: .9rem; flex-wrap: wrap;
  font-size: .8125rem; color: var(--text-leise);
  padding: .5rem .75rem; margin-bottom: .875rem;
  background: var(--nebel); border-radius: var(--radius-klein);
}
.kuerzel kbd {
  font-family: var(--font-text); font-size: .75rem; font-weight: 700;
  background: var(--weiss); color: var(--anthrazit);
  border: 1px solid var(--rand-stark); border-bottom-width: 2px;
  border-radius: 5px; padding: .05rem .35rem;
}

/* Fuß der Checkliste — bleibt beim Blättern sichtbar */
.karte-fuss {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin: 1rem -1.25rem -1.125rem;
  padding: .8rem 1.25rem;
  background: var(--weiss);
  border-top: 1px solid var(--rand);
  border-radius: 0 0 var(--radius) var(--radius);
}
.karte-fuss .stand { font-size: .875rem; color: var(--text-leise); }
.karte-fuss .fueller { flex: 1; }

/* Fortschrittsbalken. Die Breite setzt das Skript über eine benutzerdefinierte
 * Eigenschaft — kein style-Attribut, siehe Hinweis oben. */
.balken { height: 6px; border-radius: 3px; background: #E4EAEE; overflow: hidden;
          min-width: 90px; flex: 0 1 140px; }
.balken > i { display: block; height: 100%; width: var(--anteil, 0%);
              background: var(--gruen-dunkel); border-radius: 3px; }

/* ---------------------------------------------------------------- Fristen */

.frist {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .6rem .7rem;
  border-radius: var(--radius-klein);
  border: 1px solid var(--rand);
  background: var(--weiss);
  margin-bottom: .5rem;
}
.frist .inhalt { flex: 1; min-width: 0; }
.frist .titel { font-weight: 700; font-size: .9375rem; }
.frist .datum { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.frist .erklaerung { font-size: .8125rem; color: var(--text-leise); margin-top: .2rem; }
.frist .grundlage { font-size: .75rem; color: var(--text-leise); margin-top: .25rem; }
.frist-kritisch { border-left: 4px solid var(--koralle); }
.frist-hinweis { border-left: 4px solid var(--blau); }
.frist-ok { border-left: 4px solid var(--gruen-dunkel); }
.frist-unbekannt { border-left: 4px solid var(--rand-stark); border-style: dashed; }
.frist-neutral { border-left: 4px solid var(--himmelblau); }

/* Kleiner Fristen-Hinweis direkt an einer Frage */
.frist-chip { font-size: .8125rem; font-weight: 700; }

/* ---------------------------------------------------------------- Wiedervorlage */

.fall {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem .875rem;
  padding: .875rem 1rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--weiss);
  margin-bottom: .625rem;
}
.fall:hover { border-color: var(--blau); box-shadow: var(--schatten); }
.fall.dringend-kritisch { border-left: 5px solid var(--koralle); }
.fall.dringend-hinweis { border-left: 5px solid var(--blau); }
.fall.dringend-offen { border-left: 5px solid var(--grau); }
.fall.dringend-ok { border-left: 5px solid var(--gruen-dunkel); }
.fall .kopf { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.fall .kopf .nummer { font-size: 1.0625rem; }
.fall .gruende { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .9375rem; }
.fall .gruende li { margin-bottom: .15rem; }
.fall .rechts { text-align: right; display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; }
.fall .meta { font-size: .8125rem; color: var(--text-leise); }

/* ---------------------------------------------------------------- Wissen */

.treffer { padding: .875rem 1rem; border: 1px solid var(--rand); border-radius: var(--radius);
           background: var(--weiss); margin-bottom: .625rem; }
.treffer:hover { border-color: var(--blau); }
.treffer h3 { margin-bottom: .25rem; }
.treffer .ausschnitt { font-size: .9375rem; color: var(--text-leise); margin-bottom: .3rem; }
mark { background: var(--gruen-hell); color: var(--anthrazit); padding: 0 .12rem;
       border-radius: 3px; font-weight: 700; }

.dokument-text {
  white-space: pre-wrap;
  font-size: .9375rem; line-height: 1.6;
  max-height: 62vh; overflow-y: auto;
  padding-right: .5rem;
}

/* ---------------------------------------------------------------- Verwaltung */

.rechte-tabelle input[type='checkbox'] { width: 20px; height: 20px; min-height: 0;
                                         accent-color: var(--tiefblau); cursor: pointer; }
.rechte-tabelle td { vertical-align: middle; }
.rechte-tabelle input[type='text'] { min-height: 38px; }
.legende { font-size: .875rem; color: var(--text-leise); margin-top: .75rem; }
.legende dt { font-weight: 700; color: var(--anthrazit); }
.legende dd { margin: 0 0 .4rem; }

.kennzahl { text-align: center; padding: 1rem .75rem; }
.kennzahl .wert { font-family: var(--font-head); font-size: 1.85rem; font-weight: 800;
                  color: var(--tiefblau); line-height: 1.1; }
.kennzahl .bezeichnung { font-size: .8125rem; color: var(--text-leise); margin-top: .2rem; }

/* ---------------------------------------------------------------- Mobil */

@media (max-width: 700px) {
  body { font-size: 15px; }
  main { padding: 1rem .75rem 5.5rem; }
  header#kopf .titel { font-size: .95rem; }
  header#kopf .wer { font-size: .8125rem; }

  /* Reiter an den unteren Rand — mit dem Daumen erreichbar. */
  nav#reiter {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    justify-content: space-around;
    gap: .2rem; padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rand); border-bottom: 0;
    box-shadow: 0 -2px 12px rgba(36, 51, 59, .10);
    overflow-x: auto; flex-wrap: nowrap;
  }
  nav#reiter button { flex-direction: column; gap: .1rem; font-size: .6875rem; padding: .3rem .4rem;
                      border: 0; border-radius: var(--radius-klein); min-width: 60px; }
  nav#reiter button[aria-current='page'] { background: var(--nebel); color: var(--tiefblau); }
  nav#reiter .symbol { font-size: 1.15rem; }
  nav#reiter .zaehler { position: absolute; margin: -1.4rem 0 0 1.4rem; }

  .karte { padding: 1rem; border-radius: var(--radius-klein); }
  .karte-fuss { margin: .875rem -1rem -1rem; padding: .7rem 1rem; }
  .frage { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .frage .frage-fuss, .frage .antwort-feld { grid-column: 1 / -1; }
  .wahl { grid-column: 1 / -1; margin-top: .35rem; }
  .wahl label { flex: 1; }
  .fall { grid-template-columns: 1fr; }
  .fall .rechts { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; }
  #toasts { left: .75rem; right: .75rem; bottom: 4.75rem; max-width: none; }
  .zwei-spalten > aside { position: static; }
}

/* Auf sehr schmalen Geräten (375 px) darf nichts überlaufen. */
@media (max-width: 380px) {
  nav#reiter button { min-width: 52px; font-size: .625rem; }
  .kuerzel { display: none; }        /* dort gibt es keine Tastatur */
}

/* Wer weniger Bewegung eingestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}