/* ==========================================================================
   Notizen – Grundstil
   Mobil zuerst; ab 900 px Seitenleiste statt Tableiste.
   Ziel ist Safari ab iOS 15.8 (das ist WebKit 15.6), Firefox ESR auf
   Linux Mint und die jeweils aktuellen Browser auf Android, macOS und
   Windows. Damit sind ``:has()``, ``:focus-visible`` und ``dvh``
   benutzbar — sie kamen mit Safari 15.4. CSS-Nesting und
   Container-Queries bleiben draußen: Die kamen erst mit Safari 16.5
   beziehungsweise 16.0.

   Warum 15.8 und nicht 14.5 (geändert am 26.10.2026): iOS 15 hat kein
   Gerät fallen lassen, das iOS 14 tragen konnte — die ältesten sind
   iPhone 6s und SE der ersten Fassung —, und genau diese Geräte bekommen
   weiterhin Sicherheitsaktualisierungen der 15er-Reihe. Ein Telefon, das
   heute auf 14.5 steht, bekommt seit Jahren keine mehr; damit
   Beobachtungen über Kinder zu lesen, wäre selbst ein Datenschutzmangel.
   Die Grenze schließt also kein Gerät aus, sondern nur ein nicht
   eingespieltes Update.
   ========================================================================== */

:root {
  /* Jeder Farbton steht in drei Rollen, die man nicht vermischen darf:
     „--ton-X“ ist die Fläche (weiße Schrift darauf),
     „--ton-X-dunkel“ dieselbe Fläche beim Überfahren,
     „--ton-X-schrift“ die Schriftfarbe auf dem jeweiligen Untergrund,
     „--ton-X-flaeche“ die zarte Fläche für Abzeichen und Meldungen.

     In heller Darstellung fallen Fläche und Schrift zusammen — beide
     dunkel auf Weiß. In dunkler laufen sie auseinander, und genau daran
     ist es zuvor gescheitert: Eine Fläche muss dunkel genug bleiben, damit
     weiße Schrift darauf lesbar ist; eine Schrift muss hell genug sein
     für dunklen Grund. Ein einziger Wert kann nicht beides. Wer hier
     etwas ändert, rechnet es mit ``kontrast_pruefen`` nach — die Probe
     hält 4,5:1 für Schrift und 3:1 für Ränder fest. */
  --ton-akzent: #1f6f8b;
  --ton-akzent-dunkel: #17566c;
  --ton-akzent-schrift: #1f6f8b;
  --ton-akzent-hell: #e3f0f5;
  --ton-warnung: #a4560c;
  --ton-warnung-schrift: #a4560c;
  --ton-warnung-flaeche: #fdf1e2;
  --ton-fehler: #a32b2b;
  --ton-fehler-dunkel: #85211f;
  --ton-fehler-schrift: #a32b2b;
  --ton-fehler-flaeche: #fbeaea;
  --ton-erfolg: #2c6b4f;
  --ton-erfolg-schrift: #2c6b4f;
  --ton-erfolg-flaeche: #e6f3ec;

  --flaeche: #ffffff;
  --flaeche-2: #f5f6f7;
  --flaeche-3: #ecedef;
  --text: #1c2024;
  --text-leise: #5c646d;
  --linie: #dcdfe3;
  /* Der Rand eines Eingabefelds ist kein Zierstrich, sondern sagt, wo man
     hineinschreiben kann. WCAG verlangt dafür 3:1 — „--linie“ liegt mit
     1,34:1 weit darunter und taugt nur zum Trennen von Flächen. */
  --linie-feld: #8b939c;
  --schatten: 0 1px 2px rgba(20, 25, 30, .06), 0 4px 14px rgba(20, 25, 30, .06);

  --radius: 10px;
  --radius-klein: 7px;
  --abstand: 16px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --basis: 16px;
  --kopf-hoehe: 56px;
  --tab-hoehe: 58px;
}

html[data-textsize="klein"] { --basis: 15px; }
html[data-textsize="gross"] { --basis: 18px; }

/* --- Dunkle Darstellung ------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --flaeche: #16191c;
    --flaeche-2: #1d2125;
    --flaeche-3: #262b30;
    --text: #e8eaec;
    --text-leise: #a0a8b0;
    --linie: #333a41;
    --linie-feld: #6a737c;
    /* Die Fläche bleibt dunkel (weiße Schrift darauf), die Schrift wird
       hell. Vorher stand hier für beides #5fb3d0 — daher der Aufnahmeknopf
       mit 2,37:1. */
    --ton-akzent: #25789a;
    --ton-akzent-dunkel: #1f6f8b;
    --ton-akzent-schrift: #7cc7e0;
    --ton-akzent-hell: #1b333d;
    --ton-warnung-schrift: #e0a057;
    --ton-warnung-flaeche: #3a2a15;
    --ton-fehler-dunkel: #c23e3c;
    --ton-fehler-schrift: #f19390;
    --ton-fehler-flaeche: #3a1f1f;
    --ton-erfolg-schrift: #6cc297;
    --ton-erfolg-flaeche: #17301f;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
  }
}

html[data-theme="dunkel"] {
  --flaeche: #16191c;
  --flaeche-2: #1d2125;
  --flaeche-3: #262b30;
  --text: #e8eaec;
  --text-leise: #a0a8b0;
  --linie: #333a41;
  --linie-feld: #6a737c;
  --ton-akzent: #25789a;
  --ton-akzent-dunkel: #1f6f8b;
  --ton-akzent-schrift: #7cc7e0;
  --ton-akzent-hell: #1b333d;
  --ton-warnung-schrift: #e0a057;
  --ton-warnung-flaeche: #3a2a15;
  --ton-fehler-dunkel: #c23e3c;
  --ton-fehler-schrift: #f19390;
  --ton-fehler-flaeche: #3a1f1f;
  --ton-erfolg-schrift: #6cc297;
  --ton-erfolg-flaeche: #17301f;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
}

/* --- Grundlagen --------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--flaeche-2);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--basis);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 620; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }
a { color: var(--ton-akzent-schrift); }

.sprungmarke {
  position: absolute; left: -9999px; top: 0;
  background: var(--ton-akzent); color: #fff; padding: 10px 16px; z-index: 200;
}
.sprungmarke:focus { left: 0; }

.leise { color: var(--text-leise); }
.klein { font-size: .875rem; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
.verborgen { display: none !important; }

/* --- Kopfzeile ---------------------------------------------------------- */
.kopfzeile {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  height: var(--kopf-hoehe);
  padding: 0 12px;
  padding-top: env(safe-area-inset-top);
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
/* Das Zeichen der Anwendung. Es bringt seine eigene Fläche mit (die
   Datei ist deckend, damit sie auf dem Startbildschirm funktioniert) —
   hier wird sie nur beschnitten. Deshalb kein ``background`` mehr: Ein
   farbiger Grund darunter wäre auf keiner Seite zu sehen und würde beim
   nächsten Farbwechsel als vergessene Zeile übrigbleiben. */
.marke-zeichen {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.marke-zeichen img { width: 100%; height: 100%; display: block; }
.marke-text { display: flex; flex-direction: column; min-width: 0; }
.marke-text strong { font-size: 1rem; line-height: 1.15; }
.marke-text small { color: var(--text-leise); font-size: .74rem; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.abzeichen {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--flaeche-3); color: var(--text-leise);
}
.abzeichen-admin { background: var(--ton-akzent-hell); color: var(--ton-akzent-schrift); }
.abzeichen-aktiv { background: var(--ton-erfolg-flaeche); color: var(--ton-erfolg-schrift); }
.abzeichen-inaktiv { background: var(--ton-fehler-flaeche); color: var(--ton-fehler-schrift); }
.abzeichen-warnung { background: var(--ton-warnung-flaeche); color: var(--ton-warnung-schrift); }

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--flaeche-3); color: var(--text);
  font-weight: 700; font-size: .8rem; cursor: pointer;
}

/* --- Benutzermenü / Mehr-Menü ------------------------------------------- */
.benutzermenue { position: relative; }
.menue-flaeche {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 240px; z-index: 70;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 6px;
  /* Seit das Menü die vollständige Karte der Anwendung ist, passt es auf
     einem Telefon nicht mehr sicher auf den Schirm — vor allem nicht mit
     großer Schrift und Verwaltungsrechten. Also darf es rollen, statt
     unten abgeschnitten zu werden.

     ``dvh`` rechnet mit dem Bereich, der **gerade** sichtbar ist, und
     damit die ein- und ausfahrende Adressleiste des Telefons mit —
     ``vh`` tut das nicht und schnitt das Menü unten ab. Die ``vh``-Zeile
     bleibt als Rückfall davor stehen: Wer ``dvh`` nicht kennt, überliest
     die zweite Zeile und behält die erste. */
  max-height: 70vh;
  max-height: 70dvh;
  overflow-y: auto;
}
.menue-kopf { padding: 8px 10px 10px; border-bottom: 1px solid var(--linie); margin-bottom: 6px; }
.menue-kopf strong { display: block; }
.menue-kopf small { color: var(--text-leise); word-break: break-all; }
/* Seit dieses Menü auf schmalen Geräten die vollständige Navigation ist,
   ist jeder Eintrag eine Hauptbedienfläche und keine Nebensache mehr —
   also gilt hier dasselbe Maß wie für Knöpfe (44 px, WCAG 2.5.5). */
/* Ein Menüeintrag — einmal beschrieben, überall benutzt. Dieselbe
   Begründung wie bei ``core/menue.py``: Was dasselbe meint, gehört an eine
   Stelle, sonst läuft es auseinander. Bis zum 26.10.2026 standen die
   Seitenleiste und das Klappmenü getrennt hier, und sie waren es auch:
   38 gegen 44 Pixel Höhe, 20 gegen 22 Pixel Symbol, der aktive Punkt
   einmal mit und einmal ohne Farbwechsel.

   44 Pixel Mindesthöhe für alle: Im Klappmenü ist das die Daumenregel, in
   der Seitenleiste schadet sie nicht. */
.nav-eintrag,
.menue-flaeche a, .menue-abmelden, .menue-modus {
  display: flex; align-items: center; width: 100%; text-align: left;
  gap: 10px;
  min-height: 44px; padding: 8px 10px; border-radius: var(--radius-klein);
  color: var(--text); text-decoration: none; border: 0; background: transparent;
  font: inherit; cursor: pointer;
}
.nav-eintrag:hover,
.menue-flaeche a:hover, .menue-abmelden:hover, .menue-modus:hover {
  background: var(--flaeche-3);
}
/* Der aktive Punkt färbt die Schrift mit — und damit über
   ``currentColor`` auch das Symbol. Das stand bisher nur in der
   Seitenleiste; im Klappmenü blieb das Zeichen grau. */
.nav-eintrag.aktiv,
.menue-flaeche a.aktiv {
  background: var(--ton-akzent-hell); color: var(--ton-akzent-schrift);
  font-weight: 600;
}
.menue-abmelden { color: var(--ton-fehler-schrift); }
.menue-modus { color: var(--ton-akzent-schrift); border-top: 1px solid var(--linie); border-radius: 0; }
/* Dieselben Symbole wie in der Seitenleiste — sie sind das, woran man den
   Punkt wiedererkennt, noch bevor man das Wort gelesen hat. Feste Breite,
   damit die Beschriftungen auf einer Kante stehen. */
.menue-symbol {
  display: inline-block; width: 22px;
  text-align: center; opacity: .85;
}
/* Die Bereichszeichen sind seit dem 28.09.2026 gezeichnet und keine
   Schriftzeichen mehr (siehe templates/bausteine/menuesymbole.html). Sie
   erben ihre Farbe über ``currentColor`` — deshalb stimmt die Markierung
   des aktiven Punkts und das dunkle Farbschema ohne eigene Regel. */
.menue-symbol svg, .nav-symbol svg { width: 18px; height: 18px; display: block;
  margin: 0 auto; fill: currentColor; }
.tableiste span svg { width: 22px; height: 22px; display: block; fill: currentColor; }
.kreis svg { width: 19px; height: 19px; display: block; fill: currentColor; }
/* Gruppenüberschrift — auch sie in beiden Menüs gleich. Sie stand
   zweimal da und war zweimal verschieden: .75rem fett gegen .7rem
   mager. */
.menue-gruppe, .nav-gruppe {
  padding: 10px 10px 4px; font-size: .72rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-leise);
}
/* Trennt die Arbeit vom eigenen Konto. */
.menue-trenner { border-top: 1px solid var(--linie); margin: 6px 0; }

/* --- Abschnitte auf Detailseiten ---------------------------------------- */
.reiterleiste {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--linie); margin-bottom: var(--abstand);
}
.reiterleiste button {
  border: 0; background: transparent; font: inherit; cursor: pointer;
  padding: 9px 14px; color: var(--text-leise);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.reiterleiste button.aktiv { color: var(--ton-akzent-schrift); border-bottom-color: var(--ton-akzent-schrift); font-weight: 600; }

.datenpaare { display: grid; gap: 10px 18px; }
@media (min-width: 700px) { .datenpaare { grid-template-columns: 1fr 1fr; } }
.datenpaar { border-bottom: 1px solid var(--linie); padding-bottom: 8px; }
.datenpaar dt { font-size: .76rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: .03em; }
.datenpaar dd { margin: 2px 0 0; word-break: break-word; }

.verlaufsliste { list-style: none; margin: 0; padding: 0; }
.verlaufseintrag { border-left: 2px solid var(--linie); padding: 0 0 14px 14px; position: relative; }
.verlaufseintrag:last-child { padding-bottom: 0; }
.verlaufseintrag .kopf { font-size: .82rem; color: var(--text-leise); }
.verlaufseintrag .feldwechsel { font-size: .88rem; }
.verlaufseintrag .alt { text-decoration: line-through; color: var(--text-leise); }

.bemerkung-karte {
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  padding: 11px 13px; margin-bottom: 10px; background: var(--flaeche-2);
}
.bemerkung-karte .kopf {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: .78rem; color: var(--text-leise); margin-bottom: 6px;
}
.bemerkung-karte .text { white-space: pre-wrap; word-break: break-word; }
.bemerkung-karte .werkzeuge { margin-left: auto; display: flex; gap: 6px; }

/* --- Rahmen / Navigation ------------------------------------------------ */
.rahmen { display: block; }

.seitenleiste { display: none; }

.inhalt {
  padding: var(--abstand);
  padding-bottom: calc(var(--tab-hoehe) + env(safe-area-inset-bottom) + 24px);
  max-width: 1080px;
  margin: 0 auto;
}

.tableiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex;
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.tableiste a, .tableiste button {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; height: var(--tab-hoehe);
  font-size: .68rem; text-decoration: none; color: var(--text-leise);
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
}
.tableiste span { font-size: 1.2rem; line-height: 1; }
.tableiste .aktiv, .tableiste a.aktiv { color: var(--ton-akzent-schrift); font-weight: 600; }

@media (min-width: 900px) {
  .rahmen { display: flex; align-items: flex-start; }
  .seitenleiste {
    display: block; position: sticky; top: var(--kopf-hoehe);
    width: 232px; flex: 0 0 232px;
    height: calc(100vh - var(--kopf-hoehe));
    overflow-y: auto;
    padding: 14px 10px;
    background: var(--flaeche);
    border-right: 1px solid var(--linie);
  }
  /* Die Abweichungen der Seitenleiste, jede mit Grund: etwas kleinere
     Schrift, weil hier zwölf Punkte untereinander stehen und niemand sie
     mit dem Daumen trifft, und ein Hauch Abstand zwischen den Zeilen. Die
     Gestalt selbst steht weiter oben bei den Menüeinträgen. */
  .nav-eintrag { margin-bottom: 2px; font-size: .94rem; }
  .nav-symbol { width: 22px; text-align: center; opacity: .85; }
  /* Nur der Abstand ist hier größer: In der Leiste trennen die
     Überschriften zwölf Zeilen, im Klappmenü eine kurze Liste. */
  .nav-gruppe { margin: 14px 2px 2px; }
  .inhalt { flex: 1 1 auto; padding: 22px 26px 60px; }
  .tableiste { display: none; }
}

/* --- Karten und Layout -------------------------------------------------- */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: var(--abstand);
  margin-bottom: var(--abstand);
}
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }
.karte-kopf {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.karte-kopf h2, .karte-kopf h3 { margin: 0; }
.karte-kopf .rechtsbuendig { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.raster { display: grid; gap: var(--abstand); }
@media (min-width: 700px) {
  .raster-2 { grid-template-columns: 1fr 1fr; }
  .raster-3 { grid-template-columns: repeat(3, 1fr); }
}

.kennzahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .kennzahlen { grid-template-columns: repeat(4, 1fr); } }
.kennzahl {
  background: var(--flaeche-2); border: 1px solid var(--linie);
  border-radius: var(--radius-klein); padding: 12px;
}
.kennzahl b { display: block; font-size: 1.6rem; line-height: 1.1; }
.kennzahl span { color: var(--text-leise); font-size: .8rem; }

/* --- Formulare ---------------------------------------------------------- */
.feld { margin-bottom: 14px; }
.feld > label, .feld-titel {
  display: block; font-size: .84rem; font-weight: 600;
  margin-bottom: 5px; color: var(--text);
}
.feld small { display: block; color: var(--text-leise); font-size: .78rem; margin-top: 4px; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px; /* verhindert das Zoomen auf iPhones */
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-feld);
  border-radius: var(--radius-klein);
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-leise) 50%),
                    linear-gradient(135deg, var(--text-leise) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
textarea { min-height: 90px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ton-akzent-schrift);
  outline-offset: 1px;
  border-color: var(--ton-akzent-schrift);
}
input.fehlerhaft, select.fehlerhaft, textarea.fehlerhaft { border-color: var(--ton-fehler-schrift); }
.feld-fehler { color: var(--ton-fehler-schrift); font-size: .8rem; margin-top: 4px; }

.schalterfeld { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.schalterfeld input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; }
.schalterfeld label { font-weight: 500; }
.schalterfeld small { display: block; color: var(--text-leise); font-size: .78rem; }
.schalterkopf { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.schalterkopf .infoklappe[open] { flex: 1 1 100%; }
/* „KI-Erkennung aus“ ist ein Angebot am Rand, kein Feld, das Aufmerksamkeit
   verlangt: gewöhnliche Schrift statt halbfett, und der Haken auf derselben
   Höhe wie seine Beschriftung.
   Beides überschreibt die Regeln von ``.schalterfeld`` darüber — dort ist
   der Haken oben ausgerichtet, weil unter der Beschriftung noch ein
   erklärendes ``small`` steht (Systemseite). Hier steht keines, dafür
   macht die (i)-Klappe die Zeile 44 px hoch: Oben ausgerichtet schwebte
   der Kasten über dem Text. Gleiche Spezifität, deshalb muss diese Regel
   **nach** ``.schalterfeld`` stehen. */
.schalterkopf input[type="checkbox"] {
  width: 20px; height: 20px; margin: 0 8px 0 0; flex: 0 0 auto;
}
.schalterkopf label { font-weight: 400; }

fieldset { border: 0; margin: 0 0 8px; padding: 0; }
legend { font-size: .84rem; font-weight: 600; padding: 0; margin-bottom: 6px; }

/* --- Schaltflächen ------------------------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 10px 16px;
  border-radius: var(--radius-klein);
  border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--text);
  font: inherit; font-weight: 560; cursor: pointer;
  text-decoration: none;
}
.knopf:hover { background: var(--flaeche-3); }
.knopf:disabled { opacity: .55; cursor: default; }
/* Der arbeitende Knopf bleibt kräftiger als ein gesperrter: Er trägt
   jetzt die Rückmeldung, und auf .55 verblasst der Kreisel mit. */
.knopf[aria-busy="true"] { opacity: .75; }
/* Ein arbeitender Knopf ist gesperrt, aber nicht tot: Der Zeiger sagt
   „läuft“ und nicht „geht nicht“. Ohne diese Zeile gewönne die Regel
   für gesperrte Knöpfe, und ausgerechnet über dem Knopf, auf den man
   gerade geklickt hat, verschwände der Wartezeiger wieder. */
.knopf[aria-busy="true"] { cursor: progress; }
/* Jede farbige Ausführung braucht ihre **eigene** Hover-Regel mit Fläche
   und Schrift. Sonst gewinnt „.knopf:hover“ — ein Klassenwähler mehr —
   und setzt die helle Grundfläche unter die weiße Schrift; der Text
   verschwindet. Das ist keine Eigenart von Safari, sondern das übliche
   Gewicht der Wähler, und es fällt nur dort auf, wo überhaupt jemand mit
   der Maus darüberfährt. */
.knopf-haupt { background: var(--ton-akzent); border-color: var(--ton-akzent); color: #fff; }
.knopf-haupt:hover {
  background: var(--ton-akzent-dunkel); border-color: var(--ton-akzent-dunkel); color: #fff;
}
.knopf-gefahr { background: var(--ton-fehler); border-color: var(--ton-fehler); color: #fff; }
.knopf-gefahr:hover {
  background: var(--ton-fehler-dunkel); border-color: var(--ton-fehler-dunkel); color: #fff;
}
/* Auf Fingergeräten bleibt der zuletzt berührte Knopf im Hover-Zustand
   hängen, bis anderswo getippt wird. Wo es keinen Zeiger gibt, bleibt die
   Fläche deshalb, wie sie ist. */
@media (hover: none) {
  .knopf:hover { background: var(--flaeche); }
  .knopf-haupt:hover { background: var(--ton-akzent); border-color: var(--ton-akzent); }
  .knopf-gefahr:hover { background: var(--ton-fehler); border-color: var(--ton-fehler); }
  .knopf-leise:hover { background: transparent; }
}
.knopf-leise { border-color: transparent; background: transparent; color: var(--ton-akzent-schrift); }
/* 44 px ist kein Zierwert, sondern die Fläche, die ein Daumen im Stehen
   trifft (WCAG 2.5.5, iOS-Richtlinie). Die Schrift bleibt klein — nur die
   Fläche wächst. */
.knopf-klein { min-height: 44px; min-width: 44px; padding: 5px 12px; font-size: .84rem; }
.knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* --- Listen und Tabellen ------------------------------------------------ */
.werkzeugleiste {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px;
}
.werkzeugleiste .suchfeld { flex: 1 1 220px; min-width: 180px; }
.werkzeugleiste select { width: auto; min-width: 150px; }

.liste { list-style: none; margin: 0; padding: 0; }
.listeneintrag {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--linie);
}
html[data-compact="1"] .listeneintrag { padding: 7px 4px; }
.listeneintrag:last-child { border-bottom: 0; }
.kreis {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ton-akzent-hell); color: var(--ton-akzent-schrift);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem;
}
.listeneintrag .haupt { flex: 1 1 auto; min-width: 0; }
.listeneintrag .haupt strong { display: block; }
.listeneintrag .haupt a { word-break: break-all; }
.listeneintrag .neben { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* --- Eine ganze Zeile als Weg in einen Bereich --------------------------
   (Übersichtskarte „Womit Sie arbeiten“)

   Vorher war allein die Überschrift verlinkt, also rund vierzig
   Bildpunkte in einer Zeile von über dreihundert. Im Stehen mit dem
   Daumen daneben zu treffen ist dort der Regelfall, und es passiert
   nichts — das liest sich wie ein Fehler der Anwendung.

   ``min-height: 56px`` steht hier, damit die Fläche auch bei
   eingeschalteter kompakter Darstellung über den 44 Bildpunkten bleibt,
   die als kleinstes sicher treffbares Ziel gelten. */
.bereichszeile {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 8px; min-height: 56px;
  border-bottom: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  color: inherit; text-decoration: none;
}
.liste li:last-child .bereichszeile { border-bottom: 0; }
.bereichszeile .haupt { flex: 1 1 auto; min-width: 0; }
.bereichszeile .haupt strong { display: block; }
.bereichszeile:hover { background: var(--flaeche-2); }
.bereichszeile:active { background: var(--flaeche-3); }
/* Nur ``:focus-visible`` (seit dem 26.10.2026, Grenze iOS 15.8): Der Ring
   erscheint für die Tastatur, nicht für die Maus. Vorher stand hier
   zusätzlich ``:focus`` — nötig für iOS 14.5, aber mit der Nebenwirkung,
   dass jeder Mausklick einen Ring hinterließ, den niemand wollte. */
.bereichszeile:focus-visible {
  outline: 2px solid var(--ton-akzent-schrift);
  outline-offset: -2px;
  background: var(--flaeche-2);
}

.tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.datentabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.datentabelle th, table.datentabelle td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}
table.datentabelle th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); }
table.datentabelle tbody tr:hover { background: var(--flaeche-2); }

.leerhinweis { text-align: center; color: var(--text-leise); padding: 28px 12px; }

/* --- Meldungen und Hinweise --------------------------------------------- */
.meldungen { margin-bottom: var(--abstand); }
.meldung, .warnleiste, .hinweisfeld {
  border-radius: var(--radius-klein);
  padding: 11px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--linie);
  background: var(--flaeche-3);
  font-size: .92rem;
}
.meldung-success, .hinweis-erfolg { background: var(--ton-erfolg-flaeche); border-color: var(--ton-erfolg-schrift); color: var(--ton-erfolg-schrift); }
.meldung-warning, .hinweis-warnung, .warnleiste { background: var(--ton-warnung-flaeche); border-color: var(--ton-warnung-schrift); color: var(--ton-warnung-schrift); }
.meldung-error, .hinweis-fehler { background: var(--ton-fehler-flaeche); border-color: var(--ton-fehler-schrift); color: var(--ton-fehler-schrift); }
.meldung-info, .hinweis-info { background: var(--ton-akzent-hell); border-color: var(--ton-akzent-schrift); color: var(--ton-akzent-schrift); }

.hinweisstapel {
  position: fixed; z-index: 300;
  left: 12px; right: 12px; bottom: calc(var(--tab-hoehe) + env(safe-area-inset-bottom) + 12px);
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
@media (min-width: 900px) {
  .hinweisstapel { left: auto; right: 24px; bottom: 24px; width: 360px; }
}
.hinweis {
  pointer-events: auto;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie); border-left: 4px solid var(--ton-akzent-schrift);
  border-radius: var(--radius-klein); box-shadow: var(--schatten);
  padding: 11px 14px; font-size: .9rem;
}
.hinweis-erfolg { border-left-color: var(--ton-erfolg-schrift); }
.hinweis-fehler { border-left-color: var(--ton-fehler-schrift); }
.hinweis-warnung { border-left-color: var(--ton-warnung-schrift); }

/* --- Dialoge ------------------------------------------------------------ */
.dialog-hintergrund {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200;
  background: rgba(15, 20, 25, .48);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
@media (min-width: 700px) {
  .dialog-hintergrund { align-items: center; padding: 24px; }
}
.dialog {
  background: var(--flaeche); color: var(--text);
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: var(--schatten);
}
@media (min-width: 700px) { .dialog { border-radius: var(--radius); padding-bottom: 18px; } }
.dialog h2 { margin-top: 0; }
.dialog-fuss { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.dialog-fuss .links { margin-right: auto; }

/* --- Anmeldeseite ------------------------------------------------------- */
.anmelde-buehne {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--flaeche-2);
}
.anmelde-karte {
  width: 100%; max-width: 420px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 26px 22px;
}
.anmelde-kopf { text-align: center; margin-bottom: 20px; }
.anmelde-kopf .marke-zeichen { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 12px; }
.anmelde-fuss { margin-top: 16px; text-align: center; font-size: .88rem; }

/* --- Ladeanzeige -------------------------------------------------------- */
.laden { display: flex; align-items: center; gap: 10px; color: var(--text-leise); padding: 22px 4px; }
.kreisel {
  width: 18px; height: 18px; flex: 0 0 auto;
  border: 2px solid var(--linie); border-top-color: var(--ton-akzent-schrift);
  border-radius: 50%;
  animation: drehen .8s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kreisel { animation-duration: 3s; }
}

/* Der Kreisel **im** Knopf. Er erbt die Schriftfarbe, statt sie
   festzulegen: Der Hauptknopf ist dunkel hinterlegt, der Knopf daneben
   hell — eine feste Linienfarbe wäre auf einem von beiden unsichtbar. */
.kreisel-knopf {
  display: inline-block;
  width: 13px; height: 13px;
  margin-right: 7px; vertical-align: -2px;
  border-color: currentColor;
  border-top-color: transparent;
  opacity: .85;
}

/* Der Wartezeiger der ganzen Seite, gesetzt von ``seitenarbeit`` in
   app.js. Er erreicht auch den, der beim Klick weit unten in einer Liste
   steht und den Knopf gar nicht mehr sieht. Bewusst „progress“ und nicht
   „wait“: Die Seite bleibt bedienbar, nur dieser eine Vorgang läuft. */
body[aria-busy="true"] { cursor: progress; }

/* --- Kleinigkeiten ------------------------------------------------------ */
.trenner { height: 1px; background: var(--linie); border: 0; margin: 18px 0; }
code, .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em; background: var(--flaeche-3); padding: 2px 5px; border-radius: 4px;
  word-break: break-all;
}
/* Abweichungen vom Kontingent (Verwaltung → System).

   Hier stand bis zum 13.08.2026 die Verbrauchsliste aller, samt Zahlenfeld
   zum Ändern. Beides ist weg: Geändert wird im Bearbeitungsdialog der
   Person, und aufgeführt wird nur noch, wer eine Ausnahme hat. Übrig
   bleibt eine Zeile aus Name und Zahlen — der Name führt zur Person.

   Umbricht auf schmalen Geräten statt zu quetschen. */
.kontingentzeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 8px 4px; border-bottom: 1px solid var(--linie);
}
.kontingentzeile:last-child { border-bottom: 0; }
.kontingentzeile > a {
  flex: 1 1 180px; font-weight: 600; min-height: 32px;
  display: flex; align-items: center;
}

.chipreihe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip {
  background: var(--flaeche-3); border: 1px solid var(--linie);
  border-radius: 999px; padding: 3px 10px; font-size: .8rem;
  font-family: inherit; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
}
button.chip, label.chip { cursor: pointer; min-height: 44px; }
button.chip:hover, label.chip:hover { border-color: var(--ton-akzent-schrift); }
.dialog-koerper { min-width: 0; }
.reiter-inhalt { min-width: 0; }

/* --- Meldungslisten der Import-Vorschau ---------------------------------
   Lange Aufzählungen (Namenskorrekturen, Platzhalter, übersprungene
   Angaben) stehen vollständig da; ab dem sechzehnten Eintrag liegt der
   Rest hinter einem Knopf. Bewusst ohne eigenen Rollbereich: Ein Kasten
   mit verstecktem Rollbalken wäre auf dem Telefon genau das Abschneiden,
   das der Aufklappknopf verhindern soll. Die Seite darf lang werden.
   Aufgeklappt schließt die zweite Liste ohne Absatz an die erste an. */
.meldungsliste { margin: 6px 0 0; padding-left: 20px; }
.meldungsliste > li { margin: 2px 0; word-break: break-word; }
.meldungsliste + .meldungsliste { margin-top: 0; }
.meldungsliste + .knopf-klein { margin-top: 8px; }

/* Hervorhebung im Fließtext, wo eine Angabe besondere Aufmerksamkeit
   verlangt — etwa ein Rollenwechsel in der Import-Vorschau. */
.hinweis-warnung-text { color: var(--ton-warnung-schrift); }

/* ==========================================================================
   Notizen — erfassen und zuordnen

   Der Aufnahmeknopf ist absichtlich groß und liegt ganz oben: Er wird im
   Gehen bedient, mit einer Hand, oft ohne hinzusehen. Alles Weitere ordnet
   sich dem unter.
   ========================================================================== */
.aufnahmekarte { padding-top: 18px; }
.aufnahme-zeile { display: flex; align-items: center; gap: 16px; }

.aufnahmeknopf {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 64px; padding: 0 26px;
  border-radius: 999px; border: 2px solid var(--ton-akzent);
  background: var(--ton-akzent); color: #fff;
  font: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.aufnahmeknopf:hover { background: var(--ton-akzent-dunkel); }
.aufnahmeknopf .aufnahme-symbol { font-size: 1.3rem; line-height: 1; }
.aufnahmeknopf.aufnahme-laeuft {
  background: var(--ton-fehler); border-color: var(--ton-fehler);
}
.aufnahmeknopf.aufnahme-laeuft .aufnahme-symbol { animation: pulsieren 1.4s infinite; }
@keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .aufnahmeknopf.aufnahme-laeuft .aufnahme-symbol { animation: none; }
}

.aufnahme-stand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aufnahme-uhr {
  font-variant-numeric: tabular-nums; font-size: 1.4rem; font-weight: 600;
}

/* Ein Dateifeld, das nicht zu sehen, aber mit der Tastatur erreichbar ist:
   Bedient wird das zugehörige <label>, das wie ein Knopf aussieht. */
.versteckt-aber-bedienbar {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nur-vorleser {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.versteckt-aber-bedienbar:focus + label,
.versteckt-aber-bedienbar:focus-visible + label { outline: 2px solid var(--ton-akzent-schrift); }

.tippen { margin-top: 16px; }
/* Der zweitwichtigste Knopf der Seite. Er stand als Textzeile da und war
   im Stehen mit dem Daumen kaum zu treffen — jetzt eine Fläche mit Rand,
   die aussieht, wonach sie sich anfühlt. */
.tippen > summary {
  cursor: pointer;
  min-height: 48px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px;
  border: 1px solid var(--linie); border-radius: 999px;
  color: var(--ton-akzent-schrift); font-size: 1rem; font-weight: 500;
  list-style: none;
}
.tippen > summary::-webkit-details-marker { display: none; }
.tippen > summary::before { content: "⌨"; font-size: 1.1rem; }
.tippen[open] > summary { border-color: var(--ton-akzent); }
.tippen > div, .tippen > button { margin-top: 10px; }

/* --- Die (i)-Klappe -----------------------------------------------------
   Erklärungen, die beim ersten Mal helfen und beim zwanzigsten stören.
   Bewusst ``details`` statt eines eigenen Knopfes: Das Aufklappen, die
   Tastaturbedienung und die Ansage im Vorleser bringt der Browser mit —
   nachgebaut wäre beides schlechter und obendrein von JavaScript
   abhängig. */
/* ------------------------------------------------------------------ */
/* Zeilenklappe: eine ganze Zeile zum Aufklappen                        */
/* ------------------------------------------------------------------ */
/* Der Unterschied zur ``infoklappe`` ist nicht Geschmack, sondern die
   Aufgabe. Die Infoklappe ist eine Fußnote im Satz — ein rundes „i“, das
   niemand sucht. Diese hier ist ein **Ziel**: Sie steht allein in ihrer
   Zeile, und man muss ihr ansehen, dass sich etwas öffnet, ohne es
   auszuprobieren. Dafür drei Zeichen, die zusammen wirken: ein Symbol
   links, ein Winkel rechts, der sich beim Öffnen dreht, und eine Fläche,
   die beim Überfahren anspringt.

   Der Winkel dreht sich über ``details[open]``. ``:has()`` wäre seit der
   angehobenen Gerätegrenze (iOS 15.8) ebenfalls möglich, hier aber ein
   Umweg: Der Zustand steht am ``details`` selbst, man muss ihn nicht
   erst beim Kind erfragen. */
.zeilenklappe {
  display: block;
  margin-top: 14px;
  border-top: 1px solid var(--linie);
}
.zeilenklappe > summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  min-height: 48px;          /* Daumenhöhe, nicht Textzeilenhöhe */
  padding: 4px 6px;
  border-radius: 8px;
  color: var(--text-leise);
}
.zeilenklappe > summary::-webkit-details-marker { display: none; }
.zeilenklappe > summary:hover,
.zeilenklappe > summary:focus-visible {
  background: var(--flaeche-3);
  color: var(--ton-akzent-schrift);
}
.zeilenklappe-symbol svg {
  width: 20px; height: 20px; display: block; fill: currentColor;
}
.zeilenklappe-text { display: flex; flex-direction: column; flex: 1 1 auto; }
.zeilenklappe-winkel svg {
  width: 18px; height: 18px; display: block; fill: currentColor;
  transition: transform .15s ease;
}
.zeilenklappe[open] > summary { color: var(--ton-akzent-schrift); }
.zeilenklappe[open] .zeilenklappe-winkel svg { transform: rotate(180deg); }
/* Wer die Bewegung abbestellt hat, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion: reduce) {
  .zeilenklappe-winkel svg { transition: none; }
}
.zeilenklappe > div { padding: 2px 6px 10px; }

.infoklappe { display: inline-block; }
/* Die Tippfläche ist 44 px, der sichtbare Ring 26 — sonst säße mitten in
   der Zeile ein Kreis von Daumengröße. Das ``span`` trägt den Ring, damit
   ohne Stil immer noch ein „i“ dasteht und nicht nichts. */
.infoklappe > summary {
  cursor: pointer;
  min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  list-style: none;
}
.infoklappe > summary::-webkit-details-marker { display: none; }
.infoklappe > summary > span {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-leise);
  font-size: .9rem; font-weight: 700; font-family: Georgia, "Times New Roman", serif;
}
.infoklappe > summary:hover > span,
.infoklappe[open] > summary > span {
  color: var(--ton-akzent-schrift); border-color: var(--ton-akzent);
}
/* Der Text löst sich aus der Zeile und nimmt die volle Breite — sonst
   quetschte er sich neben ein Auswahlfeld. */
.infoklappe > .infotext {
  display: block;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--ton-akzent);
  background: var(--flaeche-3);
  border-radius: 0 8px 8px 0;
  font-size: .84rem; line-height: 1.5; color: var(--text-leise);
  max-width: 46em;
}

.anhang-leiste {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie);
}

.knopf-gross { min-height: 48px; padding: 0 22px; font-size: 1rem; }
.knopfleiste { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* --- Die Vorschlagsliste -------------------------------------------------
   Ein angehakter Eintrag ist deutlich hervorgehoben: Im Regelfall soll die
   Nutzerin auf einen Blick sehen, dass alles stimmt, und nur speichern. */
.bezugsliste { list-style: none; margin: 8px 0 0; padding: 0; }
.bezug {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--linie); border-radius: 10px;
  background: var(--flaeche-2);
}
.bezug-an { border-color: var(--ton-akzent-schrift); background: var(--ton-akzent-hell); }
.bezug-haken {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  min-width: 0; min-height: 44px;
}
/* Der Haken ist die Handlung, die am häufigsten vorkommt: Bei acht
   Vorschlägen wird er acht Mal betrachtet und ein- oder zweimal
   umgestellt. 24 px waren dafür knapp — die Fläche ringsum ist ohnehin
   44 px hoch, sichtbar sein darf er trotzdem. */
.bezug-haken input { width: 28px; height: 28px; flex: none; }
.bezug-name { font-weight: 600; word-break: break-word; }
/* 14 px Abstand zwischen Auswahl und Löschknopf: Der Fehlgriff sechs
   Pixel neben dem Auswahlfeld kostete den Bezug ohne Rückfrage. */
.bezug-rechts { display: flex; gap: 14px; align-items: center; }
/* Rechts bleiben die 34 px stehen, die die Regel für ``select`` weiter
   oben für den gezeichneten Pfeil freihält. Die Kurzschreibweise
   ``padding: 4px 8px`` hatte sie überschrieben — der Pfeil lag seither
   über dem letzten Buchstaben, „beteiligt“ las sich als „beteiliḡt“. */
.bezug-rechts select {
  min-height: 44px; font-size: .84rem; padding: 4px 34px 4px 8px;
}
/* Das Kreuz stand mit 0,84 rem in einer 44-px-Fläche und sah aus wie ein
   Sprenkel — bei einem Knopf, der einen Bezug ganz entfernt, ist das die
   falsche Aussage: zu klein zum Treffen und zu unscheinbar für das, was
   er tut. Die Fläche bleibt, das Zeichen füllt sie jetzt aus. */
.bezug-rechts .knopf-gefahr {
  min-width: 44px;
  padding: 0;
  font-size: 1.45rem; line-height: 1;
  font-weight: 400;
}
/* Der Chip mit dem gesprochenen Wortlaut und die (i)-Klappe stehen
   nebeneinander; der aufgeklappte Text nimmt die volle Breite. */
.bezug-grund {
  grid-column: 1 / -1; word-break: break-word;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.bezug-grund .infoklappe[open] { flex: 1 1 100%; }
/* In der Zeile ist es enger als auf der Erfassungsseite. Die Tippfläche
   bleibt 44 px hoch — der sichtbare Ring misst aber nur 26, und diese
   Luft holt der negative Außenabstand zurück. Sonst wüchse der Kasten je
   Bezug um eine Zeile, und bei acht Bezügen wäre das eine Bildschirmhöhe
   für etwas, das selten jemand aufmacht. */
.bezug-grund .infoklappe { margin: -9px 0; }
.bezug-grund .infoklappe > summary { min-width: 32px; }
.bezug-grund .infoklappe[open] { margin-bottom: 0; }

/* --- Trefferliste der Nachsuche ----------------------------------------- */
.trefferliste { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.treffer {
  text-align: left; font: inherit; cursor: pointer;
  padding: 11px 10px; min-height: 44px; border: 1px solid var(--linie);
  border-radius: 8px; background: var(--flaeche-2); color: var(--text);
}
.treffer:hover { border-color: var(--ton-akzent-schrift); background: var(--flaeche-3); }

/* --- Anhänge ------------------------------------------------------------ */
.anhangliste {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.anhang {
  flex: 0 1 220px; padding: 8px; border: 1px solid var(--linie);
  border-radius: 10px; background: var(--flaeche-2);
}
.anhang-bild, .anhang-video { max-width: 100%; border-radius: 6px; display: block; }
.anhang audio { width: 100%; }

/* --- Liste der Notizen -------------------------------------------------- */
.notizliste { list-style: none; margin: 0; padding: 0; }
.notizzeile {
  padding: 12px; border-bottom: 1px solid var(--linie); cursor: pointer;
}
.notizzeile:last-child { border-bottom: 0; }
.notizzeile:hover { background: var(--flaeche-2); }
/* Die Zeile ist mit der Tastatur erreichbar (tabindex, role="button") —
   dann muss auch zu sehen sein, wo man gerade steht. Nur
   ``:focus-visible``: für die Tastatur ja, für den Mausklick nicht
   (siehe ``.bereichszeile``). */
.notizzeile:focus-visible {
  outline: 2px solid var(--ton-akzent-schrift);
  outline-offset: -2px;
  background: var(--flaeche-2);
}
.notiz-kopf {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.notiz-namen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Eine fremde Notiz, die noch niemand geöffnet hat.

   Die Hervorhebung arbeitet mit einem Balken an der Seite und einer leicht
   getönten Fläche, nicht mit fetter Schrift: In dieser Liste ist der Titel
   ohnehin schon fett, und zwei Fettstufen nebeneinander liest niemand
   auseinander. Der Balken sitzt links und ist 3px breit, weil die Zeile
   auf dem Telefon fast die ganze Breite einnimmt — dort ist der linke Rand
   die einzige Kante, die beim Wischen im Blick bleibt.

   Farbe allein trägt die Aussage nicht: Daneben steht das Abzeichen „neu“.
   Wer Rot und Grün nicht unterscheidet oder das Gerät im Sonnenlicht hält,
   sieht sonst nichts. */
.notizzeile-neu {
  background: var(--ton-akzent-hell);
  box-shadow: inset 3px 0 0 var(--ton-akzent);
}
.notizzeile-neu:hover { background: var(--ton-akzent-hell); }
.abzeichen-neu {
  background: var(--ton-akzent); color: #fff; margin-right: 6px;
  vertical-align: baseline;
}

/* Der Bereich unter der Liste, in dem der Nachlade-Knopf steht. Er ist
   mittig und großzügig gepolstert, damit der Beobachter ihn beim Scrollen
   sicher trifft und der Daumen ihn auf dem Telefon auch dann erreicht,
   wenn das Nachladen einmal von Hand ausgelöst werden muss. */
.mehrbereich { text-align: center; padding: 12px 0 4px; }

@media (max-width: 560px) {
  .aufnahme-zeile { flex-direction: column; align-items: stretch; }
  .aufnahmeknopf { justify-content: center; width: 100%; }
  .bezug { grid-template-columns: 1fr; }
  .bezug-rechts { justify-content: flex-start; }
}

/* --- Freie Nennungen und Zuordnungsangebote ------------------------------
   Ein Name ohne Stammdatensatz ist kein Fehler, sondern Alltag: der Freund
   vom Spielplatz, der ältere Bruder eines Mitschülers. Er wird deshalb
   nicht als Warnung dargestellt, sondern nur unterscheidbar. */
.bezug-frei { border-style: dashed; }
.zuordnung, .lernen { grid-column: 1 / -1; margin-top: 4px; }
.zuordnung { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-knopf { cursor: pointer; font: inherit; font-size: .8rem; }
.chip-knopf:hover { border-color: var(--ton-akzent-schrift); background: var(--flaeche-3); }
.lernen {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  min-height: 44px;
}
.lernen input { width: 24px; height: 24px; flex: none; }
.treffer-frei { border-style: dashed; }

/* Bezugsgruppe und Kontextanzeige an der Erfassungsseite. Bewusst ruhig:
   Sie ist eine Auskunft, keine Aufforderung — die Notiz entsteht auch
   ohne, dass jemand hier etwas anfasst. */
.bezugszeile {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 14px;
}
.bezugszeile select { max-width: 260px; }
.bezugszeile .infoklappe { flex: 0 0 auto; }
.bezugszeile .infoklappe[open] { flex: 1 1 100%; }

/* Schwache Vorschläge: aufgeführt, aber zurückgenommen. Sie sollen
   auffindbar sein, ohne die sicheren Treffer zu überdecken. */
.schwache {
  margin: 10px 0 0;
  padding: 8px 10px;
  /* Hier standen ``--rand`` und ``--flaeche-leise`` — zwei Variablen, die
     es nie gab. Gegriffen hat immer der fest verdrahtete helle Rückfall,
     und in dunkler Darstellung ergab das eine weiße Fläche mitten in der
     dunklen Seite. Ein Rückfallwert verdeckt genau solche Tippfehler. */
  border: 1px dashed var(--linie);
  border-radius: 8px;
  background: var(--flaeche-2);
}
.schwache > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--text-leise);
}
.schwache .bezug { opacity: .85; }

/* Aufnahmen, die nicht durchgekommen sind: je eine Zeile mit ihren
   beiden Knöpfen. Sie stehen weit genug auseinander, dass „Verwerfen“
   nicht mit „Noch einmal senden“ verwechselt wird. */
.rettungszeile {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 8px;
}
.rettungszeile > span { flex: 1 1 auto; min-width: 0; }

/* Sammelaktionen in Listen: erscheint erst mit einer Markierung. */
.sammelleiste {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--ton-akzent-hell);
  border: 1px solid var(--ton-akzent-schrift);
}
.sammelleiste .rechtsbuendig { margin-left: auto; display: flex; gap: 8px; }
.sammel-alle { display: flex; align-items: center; gap: 10px;
  min-height: 44px; cursor: pointer; }
.listeneintrag .sammel-haken { margin-right: 10px; align-self: center; }
.listeneintrag.markiert { background: var(--ton-akzent-hell); }

/* Beendetes und Stillgelegtes: sichtbar, aber zurückgenommen. */
.vergangenes {
  margin-top: 10px;
  border-top: 1px dashed var(--linie);
  padding-top: 8px;
}
.vergangenes > summary {
  cursor: pointer;
  color: var(--text-leise);
}
.listeneintrag.ausgegraut { opacity: .6; }

/* Die Speicherreihe wiederholt sich auf den Systemeinstellungen nach jeder
   Karte. Sie soll zur Karte darüber gehören, nicht zur nächsten — deshalb
   oben Abstand und unten keiner. */
.speicherreihe { margin-top: 14px; }
.listeneintrag.ausgegraut a { color: var(--text-leise); }

/* Empfängerzeilen im Versanddialog: Haken, Name, Begründung. */
.adresszeile {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; min-height: 44px; border-bottom: 1px solid var(--linie);
  cursor: pointer;
}
.adresszeile:last-child { border-bottom: 0; }
.adresszeile > span { display: flex; flex-direction: column; }
.adressgrund { margin-top: 2px; }

/* Die Empfängerzeile hat seit dem 24.10.2026 zwei Teile: links eine
   schmale Leiste mit den drei Zuständen — An, CC, X —, rechts Name,
   Adresse und Begründung. Entworfen von der Schule, und zwar besser als
   die Auswahlbox, die hier zuerst stand: Die Leiste braucht 36 Pixel
   statt 90, zeigt alle drei Möglichkeiten gleichzeitig und lässt rechts
   Platz für den Text. Gemessen 95 statt 126 Pixel Zeilenhöhe bei 390
   Pixeln Breite, und bis hinunter zu 320 Pixeln bricht nichts um — die
   Umbruchregel, die hier stand, ist damit überflüssig geworden.

   Die Radioknöpfe sind unsichtbar, aber vorhanden: Sie tragen die
   Tastaturbedienung (Pfeiltasten innerhalb der Gruppe) und die Ansage
   für Vorlesegeräte. Sichtbar ist das ``span`` daneben.

   ``min-width: 0`` ist der Punkt für schmale Geräte: Ohne das weigert
   sich ein Flex-Element, unter die Breite seines längsten Wortes zu
   gehen, und eine lange Adresse schöbe die Zeile aus dem Dialog heraus.
   Mit ``overflow-wrap`` bricht sie stattdessen um. */
.adresszeile.mit-leiste { align-items: stretch; gap: 10px; cursor: pointer; }
.kanalleiste {
  display: flex; flex-direction: column; gap: 3px;
  flex: 0 0 auto; justify-content: center;
}
.kanalleiste label { display: block; cursor: pointer; }
.kanalleiste input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kanalleiste span {
  display: block; min-width: 36px; text-align: center;
  font-size: .75rem; line-height: 1.55; padding: 1px 4px;
  border: 1px solid var(--linie); border-radius: 6px;
  color: var(--text-leise); background: var(--flaeche);
}
/* Der gewählte Zustand ist nicht allein an der Farbe zu erkennen:
   Fläche, Rahmen **und** Fettung ändern sich. Wer Farben schlecht
   unterscheidet, sieht es trotzdem. */
.kanalleiste input:checked + span {
  background: var(--ton-akzent-hell); border-color: var(--ton-akzent);
  color: var(--ton-akzent-schrift); font-weight: 600;
}
.kanalleiste input:focus-visible + span {
  outline: 2px solid var(--ton-akzent); outline-offset: 2px;
}
/* Abgewählt (Zustand „X“): Der Name wird grau. Adresse und Begründung
   sind ohnehin leise gesetzt — damit wird die ganze Zeile ruhig, und
   bei zwölf Empfängern sieht man mit einem Blick, wer draußen ist,
   statt zwölf kleine Felder zu vergleichen.

   Seit dem 26.10.2026 steht der Zustand **nur** hier: ``:has()`` zeigt
   vom angekreuzten Feld auf den Namen in der Nachbarspalte. Vorher
   setzte JavaScript dafür eine Klasse an der Zeile — nötig, solange
   iOS 14.5 zu tragen war, aber eine zweite Buchführung über denselben
   Zustand. Genau dort ist am 24.10.2026 ein Nachbau auseinandergelaufen:
   Die Probe zeichnete die Zeile ohne die Funktion, die die Klasse setzt,
   und zeigte deshalb etwas anderes als die ausgelieferte Oberfläche.
   Ein Zustand, zwei Orte — das war der Fehler.

   Die Fettung bleibt: Grau **und** mager wäre in einer Liste, die man
   überfliegt, kaum noch zu finden, wenn man es sich anders überlegt. */
.adresszeile:has(input[value="nein"]:checked) .adresstext strong {
  color: var(--text-leise);
}

.adresstext {
  display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
}
.adresstext > span {
  display: flex; flex-direction: column; min-width: 0;
  overflow-wrap: anywhere;
}
.adresszeile > .knopf-klein { flex: 0 0 auto; align-self: center; }

/* --- Auswertung gesammelter Notizen -------------------------------------
   Die Antwort eines Sprachmodells ist ein Lesetext, keine Datenzeile. Sie
   bekommt deshalb eine ruhigere Zeile und mehr Weißraum als der Rest der
   Anwendung — sie wird in einer Besprechung vorgelesen, oft vom Bildschirm
   ab. Bewusst schmaler als die Karte: Über achtzig Zeichen je Zeile
   verliert das Auge beim Rücksprung die Zeile. */
.auswertung-antwort {
  margin: 14px 0;
  max-width: 68ch;
}
.auswertungstext {
  margin: 0 0 12px;
  line-height: 1.65;
  word-break: break-word;
}
.auswertungstext:last-child { margin-bottom: 0; }

/* Die Vorschau der Auswahl darf lang werden, aber nicht die Seite sprengen:
   Bei zweihundert Notizen ist die Liste ein Beleg, kein Lesestoff. */
#vorschau .liste { margin-top: 10px; }
#vorschau .listeneintrag { padding: 8px 4px; }

/* Auf schmalen Geräten stehen Zeitraum und Reihenfolge untereinander; das
   Raster tut das ohnehin, aber die Mehrfachauswahl der Verfasserinnen
   braucht sonst mehr Höhe, als ein Telefon hergibt. */
@media (max-width: 560px) {
  #verfasser { max-height: 120px; }
}

/* Tippziele auf dem Telefon. Das × an einer Marke ist der einzige Weg,
   eine falsch gewählte Person wieder loszuwerden — mit .8rem Schrift und
   ohne eigene Polsterung wäre es rund 20 px groß und damit auf einem
   375-px-Bildschirm ein Glücksspiel. Dasselbe gilt für die Beispielfragen,
   die auf der Auswertungsseite die Hauptbedienung sind. */
button.chip, label.chip {
  min-height: 44px;
  padding: 6px 12px;
  text-align: left;
}
/* Spezifischer als ``button.chip`` darüber — sonst gewönne dessen
   Polsterung, und das × geriete unnötig breit. */
button.chip.chip-knopf {
  min-height: 44px; min-width: 44px;
  padding: 2px 6px;
  margin: -3px -6px -3px 2px;
  justify-content: center;
  line-height: 1;
}

/* --- Auskunft nach Art. 15 DSGVO -----------------------------------------
   Ein Dokument, kein Bildschirmwerkzeug. Es wird ausgedruckt oder als PDF
   gesichert und dann von Menschen gelesen, die diese Anwendung nicht
   kennen — deshalb Fließtextbreite, sichtbare Abschnitte und ein
   Druckstil, der Navigation und Knöpfe weglässt. */
.auskunft { max-width: 46rem; }
.auskunft > section { margin: 0 0 28px; }
.auskunft h2 {
  margin-top: 28px; padding-bottom: 6px;
  border-bottom: 2px solid var(--linie);
}
.auskunft h3 { margin-bottom: 2px; }
.auskunft-kopf { border-bottom: 3px solid var(--text); padding-bottom: 12px; }
.auskunft-kopfdaten { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 12px 0 0; }
.auskunft-kopfdaten dt { color: var(--text-leise); font-size: .875rem; }
.auskunft-kopfdaten dd { margin: 0; }
.auskunft-warnung h2 { border: 0; margin-top: 0; font-size: 1rem; }

.auskunft-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.auskunft-tabelle th, .auskunft-tabelle td {
  text-align: left; padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--linie); vertical-align: top;
}
.auskunft-tabelle th { font-weight: 600; color: var(--text-leise); width: 34%; }
.auskunft-tabelle thead th { width: auto; }

.auskunft-eintrag {
  margin: 0 0 16px; padding: 12px 14px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche);
}
/* Eine Notiz, in der weitere Personen vorkommen, ist vor dem Herausgeben
   zu prüfen. Das muss man sehen, ohne zu lesen. */
.auskunft-eintrag-warnung { border-left: 4px solid var(--ton-warnung-schrift); }
.auskunft-fuss { margin-top: 32px; border-top: 1px solid var(--linie); padding-top: 8px; }

@media print {
  /* Auf Papier ist alles überflüssig, was zum Klicken da war. */
  .kopfzeile, .tableiste, .seitenleiste, .nur-bildschirm,
  .hinweisstapel, .sprungmarke { display: none !important; }
  body, html { background: #fff; color: #000; }
  main, .inhalt { padding: 0 !important; margin: 0 !important; }
  .auskunft { max-width: none; }
  .auskunft-eintrag, .auskunft > section { break-inside: avoid; page-break-inside: avoid; }
  .auskunft h2 { break-after: avoid; page-break-after: avoid; }
  .auskunft-tabelle { font-size: 10pt; }
  a[href]:after { content: ""; }
}

/* Hier standen die Regeln für ``.datenschutzhinweis`` — den Dauersatz am
   Fuß des Erfassungskastens samt Trennstrich darüber. Beides ist am
   18.10.2026 entfallen; die Begründung steht in
   templates/notizen/notizen.html an der Stelle, an der der Satz stand. */

/* Eine Frist, die noch niemand festgelegt hat, wird auf der
   Datenschutzseite nicht versteckt. Sie steht da und sieht auch so aus. */
.frist-offen td { background: var(--ton-warnung-flaeche); }