/* ==========================================================================
   Notizen – Grundstil
   Mobil zuerst; ab 900 px Seitenleiste statt Tableiste.
   Bewusst ohne :has(), CSS-Nesting oder Container-Queries, damit auch
   ältere Browser (iOS 14.5, Linux Mint 23) alles darstellen können.
   ========================================================================== */

: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; }
.marke-zeichen {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
  background: var(--ton-akzent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.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. ``vh`` und nicht ``dvh``: Letzteres
     gibt es erst ab Safari 15.4, Ziel ist iOS 14.5. */
  max-height: 70vh; 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). */
.menue-flaeche a, .menue-abmelden, .menue-modus {
  display: flex; align-items: center; width: 100%; text-align: left;
  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;
}
.menue-flaeche a:hover, .menue-abmelden:hover, .menue-modus:hover { background: var(--flaeche-3); }
.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; margin-right: 6px;
  text-align: center; opacity: .75;
}
.menue-gruppe {
  padding: 10px 10px 4px; font-size: .75rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise);
}
/* Trennt die Arbeit vom eigenen Konto. */
.menue-trenner { border-top: 1px solid var(--linie); margin: 6px 0; }
.menue-flaeche a.aktiv { background: var(--ton-akzent-hell); font-weight: 600; }

/* --- 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);
  }
  .nav-eintrag {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; margin-bottom: 2px;
    border-radius: var(--radius-klein);
    color: var(--text); text-decoration: none; font-size: .94rem;
  }
  .nav-eintrag:hover { background: var(--flaeche-3); }
  .nav-eintrag.aktiv { background: var(--ton-akzent-hell); color: var(--ton-akzent-schrift); font-weight: 600; }
  .nav-symbol { width: 20px; text-align: center; opacity: .85; }
  .nav-gruppe {
    margin: 18px 12px 6px; font-size: .7rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-leise);
  }
  .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, .knopf[aria-busy="true"] { opacity: .55; cursor: default; }
/* 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; }

.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; font-size: 1.3rem; }
.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; }
}

/* --- 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. */
.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. Beide Schreibweisen
   mit Absicht: „:focus-visible“ gibt es erst ab Safari 15.4, und zu den
   Zielgeräten gehören iPhones ab iOS 14.5. Dort greift „:focus“. */
.notizzeile:focus,
.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; }
.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; }

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

/* Der Datenschutzhinweis auf der Erfassungsseite. Er muss dauerhaft da
   sein (Art. 13 DSGVO), darf aber nicht mit dem Aufnahmeknopf um
   Aufmerksamkeit ringen — wer auf dem Schulhof steht, sucht den Knopf. */
/* Sie steht am Fuß des Erfassungskastens, nicht mehr über dem
   Aufnahmeknopf. Wer eine Beobachtung im Kopf hat, soll sie loswerden —
   der Satz erreicht ihn auch, wenn er unten steht, und lenkt dort nicht
   von dem ab, worauf es in der Sekunde ankommt. */
.datenschutzhinweis {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--linie);
  font-size: .74rem;
  opacity: .75;
}
.datenschutzhinweis a { color: inherit; }

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