/* Oberflaeche der Einheitenverwaltung. Handgeschrieben, ohne Bibliothek.
   Leitidee: ein Fuehrungsmittel, keine Werbeseite. Tiefes Nachtblau als
   Markenflaeche, Signalorange als einzige laute Farbe, kuehle Graustufen fuer
   alles dazwischen. Ampelfarben sind nie die einzige Information -- jeder Status
   traegt zusaetzlich Zeichen und Text.

   Ausdruecklich nicht enthalten: Rot als Marken- oder Akzentfarbe, Kreuzsymbole,
   das geschuetzte internationale Zivilschutzzeichen. Rot ist ausschliesslich
   Statusfarbe fuer "abgelaufen" und "Fehler".

   Die Dokumentation dieser Entscheidungen liegt in docs/designsystem.md. */

/* === Farbtokens: Hellmodus === */
:root {
  color-scheme: light dark;

  /* Marke */
  --marke: #0b2545;
  --marke-hell: #12305a;
  --marke-tief: #071a33;
  --marke-kontur: #1d4275;

  /* Kopfbereich */
  --kopf-flaeche: #0b2545;
  --kopf-text: #f2f6fb;
  --kopf-text-leise: #a9bdd6;
  --nav-flaeche: #0f2c52;
  --nav-text: #d8e4f2;

  /* Signal */
  --signal: #f07a1a;
  --signal-kontur: #c25c05;
  --signal-text: #a34e04;
  --signal-flaeche: #fdeedd;

  /* Flaechen und Schrift */
  --flaeche: #eef1f5;
  --flaeche-karte: #ffffff;
  --flaeche-leise: #e3e8ef;
  --flaeche-zeile: #f6f8fb;
  --rand: #c3ccd8;
  --rand-leise: #dce3eb;
  --text: #111a26;
  --text-leise: #4f5c6b;
  --akzent: #12305a;
  --akzent-flaeche: #e7eefa;
  --akzent-text: #ffffff;
  --fokus: #c25c05;
  --fokus-hof: rgba(240, 122, 26, 0.35);

  /* Ampel. Gelb ist bewusst Bernstein und nicht das Markenorange. */
  --ampel-rot: #a3181f;
  --ampel-rot-flaeche: #fbe7e8;
  --ampel-gelb: #7a5200;
  --ampel-gelb-flaeche: #fcf2d4;
  --ampel-gruen: #155e36;
  --ampel-gruen-flaeche: #e1f0e7;
  --ampel-grau: #41505f;
  --ampel-grau-flaeche: #e6eaf0;
  --ampel-fehlt: #5a2e9b;
  --ampel-fehlt-flaeche: #ede7fb;

  /* Schrift */
  --schrift: system-ui, -apple-system, "Segoe UI", "Noto Sans", "Liberation Sans",
    Arial, sans-serif;
  --schrift-schmal: "Roboto Condensed", "Segoe UI Semibold", "Noto Sans Display",
    "Liberation Sans Narrow", "Nimbus Sans Narrow", "Arial Narrow", var(--schrift);
  --schrift-zahl: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
    "DejaVu Sans Mono", "Liberation Mono", "Noto Sans Mono", monospace;

  /* Mass und Rhythmus */
  --radius: 3px;
  --radius-gross: 6px;
  --bedienhoehe: 42px;
  --inhalt-breite: 1240px;
  --schatten: 0 1px 2px rgba(11, 37, 69, 0.08), 0 2px 8px rgba(11, 37, 69, 0.06);
  --schatten-hoch: 0 6px 24px rgba(7, 26, 51, 0.22);
}

/* === Farbtokens: Dunkelmodus === */
@media (prefers-color-scheme: dark) {
  :root {
    --marke: #0d2445;
    --marke-hell: #16386a;
    --marke-tief: #040e1c;
    --marke-kontur: #27507f;

    --kopf-flaeche: #07172c;
    --kopf-text: #e8eef6;
    --kopf-text-leise: #93a7c0;
    --nav-flaeche: #0a1e38;
    --nav-text: #c6d6ea;

    --signal: #ff8a2b;
    --signal-kontur: #ff8a2b;
    --signal-text: #ffa859;
    --signal-flaeche: #35210c;

    --flaeche: #0a121c;
    --flaeche-karte: #131c28;
    --flaeche-leise: #1d2836;
    --flaeche-zeile: #172131;
    --rand: #3a4859;
    --rand-leise: #27323f;
    --text: #e4ebf3;
    --text-leise: #9daab9;
    --akzent: #8fb9ee;
    --akzent-flaeche: #17263a;
    --akzent-text: #07172c;
    --fokus: #ff9a45;
    --fokus-hof: rgba(255, 138, 43, 0.35);

    --ampel-rot: #ff9a94;
    --ampel-rot-flaeche: #3a2024;
    --ampel-gelb: #f0c14b;
    --ampel-gelb-flaeche: #33290f;
    --ampel-gruen: #78d998;
    --ampel-gruen-flaeche: #13301f;
    --ampel-grau: #b4c0ce;
    --ampel-grau-flaeche: #232d3a;
    --ampel-fehlt: #c9abf5;
    --ampel-fehlt-flaeche: #281f37;

    --schatten: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
    --schatten-hoch: 0 8px 28px rgba(0, 0, 0, 0.6);
  }
}

/* === Grundlagen === */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  line-height: 1.22;
  margin: 0 0 0.5rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
h1 { font-size: 1.25rem; }
h2 { font-size: 1.45rem; letter-spacing: -0.015em; }
h3 { font-size: 1.05rem; }
h4 {
  font-family: var(--schrift-schmal);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-leise);
  margin: 1.5rem 0 0.5rem;
}

p { margin: 0 0 0.75rem; }

a {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

a:hover { text-decoration-thickness: 2px; }

/* Ein Fokus, den man im Halbdunkel im Fahrzeug findet: Signalorange plus Hof. */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 5px var(--fokus-hof);
}

.noscript-hinweis {
  margin: 2rem;
  padding: 1rem;
  border: 2px solid var(--ampel-rot);
  color: var(--ampel-rot);
  background: var(--ampel-rot-flaeche);
}

.verborgen { display: none !important; }

/* Kopf und Navigation setzen display: flex und wuerden damit das Merkmal hidden
   ueberstimmen -- auf der Anmeldeseite blieb sonst ein leerer Streifen stehen. */
[hidden] { display: none !important; }

.nur-fuer-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* === Wortmarke ===
   Zeichen ist das internationale Schutzzeichen des Zivilschutzes: gleichseitiges
   blaues Dreieck mit Spitze oben auf orangem Grund (public/zeichen-zivilschutz.svg).
   Es wird unveraendert eingebunden -- eigene Farben, Rahmen, Rundungen oder Zusaetze
   bekommt es nicht, und es wird nie verzerrt. Deshalb steht hier nur die Groesse.
   Der Freiraum um das Zeichen ist mindestens ein Viertel seiner Kantenlaenge. */
.wortmarke {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 16rem;
}

.wortmarke-zeichen {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: block;
  /* Nie verzerren, auch wenn der Platz eng wird. */
  object-fit: contain;
}

.wortmarke-text {
  margin: 0;
  min-width: 0;
  font-family: var(--schrift-schmal);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.wortmarke-unter {
  display: block;
  font-family: var(--schrift);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kopf-text-leise);
  margin-top: 0.15rem;
}

/* === Kopfzeile === */
.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.7rem 1.5rem;
  background: var(--kopf-flaeche);
  color: var(--kopf-text);
}

.kopf a { color: var(--kopf-text); }

.kopf-benutzer {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.kopf-benutzer a.benutzer-name {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--bedienhoehe);
  padding: 0.1rem 0.7rem;
  border-radius: var(--radius);
  color: var(--kopf-text);
  text-decoration: none;
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
}

.kopf-benutzer a.benutzer-name:hover {
  border-color: var(--marke-kontur);
  background: rgba(255, 255, 255, 0.07);
}

.kopf-benutzer a.benutzer-name .benutzer-rollen {
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--kopf-text-leise);
}

/* Knoepfe auf der Markenflaeche: Umriss statt Flaeche, damit die Kopfzeile ruhig bleibt. */
.kopf button {
  min-height: var(--bedienhoehe);
  padding: 0 0.9rem;
  background: transparent;
  border: 1px solid var(--marke-kontur);
  color: var(--kopf-text);
  border-radius: var(--radius);
  font-family: var(--schrift-schmal);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.kopf button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--signal);
}

/* === Navigation ===
   Ausgelegt auf sechs bis sieben Eintraege: auf dem Schreibtisch umbrechend,
   auf dem Telefon waagerecht schiebbar mit Fangpunkten. */
.navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  /* Unten ein schmaler Streifen Nachtblau: sonst laeuft die orange Markierung des
     aktiven Reiters in das Warnband und ist nicht mehr zu erkennen. */
  padding: 0 1.5rem 6px;
  background: var(--nav-flaeche);
}

.navigation a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bedienhoehe);
  padding: 0 1rem;
  color: var(--nav-text);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  font-family: var(--schrift-schmal);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.navigation a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.navigation a[aria-current="page"] {
  border-bottom-color: var(--signal);
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

/* === Warnmarkierung ===
   Schmales Schraffurband als Abschluss des Kopfbereichs. Reine Zier, deshalb
   aria-hidden im Markup. */
.warnband {
  height: 8px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--signal) 0 11px,
    var(--marke-tief) 11px 22px
  );
}

/* === Inhalt === */
.inhalt {
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  padding: 1.5rem;
}

.inhalt:focus { outline: none; }

/* Seitenkopf: Titel links, Handlungen rechts, duenne Linie darunter. */
.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--rand-leise);
}

.seitenkopf h2 { margin: 0; }

.seitenkopf-bereich {
  margin: 0 0 0.15rem;
  font-family: var(--schrift-schmal);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-text);
}

.seitenkopf-handlungen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--schrift-schmal);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-leise);
  min-height: var(--bedienhoehe);
}

.zurueck:hover { color: var(--akzent); text-decoration: underline; }

.karte {
  background: var(--flaeche-karte);
  border: 1px solid var(--rand-leise);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.25rem;
}

.karte-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: -0.15rem 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rand-leise);
}

.karte-kopf h3 { margin: 0; }

/* Mehrere Marken rechts im Kartenkopf. Sie bleiben beieinander und brechen
   gemeinsam um, statt sich ueber die ganze Breite zu verteilen. */
.kopf-marken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.karte > h3:first-child {
  margin: -0.15rem 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rand-leise);
}

.karte > h4:first-child { margin-top: 0; }

.leise {
  color: var(--text-leise);
  font-size: 0.9rem;
}

.hinweis {
  border-left: 4px solid var(--akzent);
  background: var(--akzent-flaeche);
  color: var(--text);
  padding: 0.65rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.werkzeugleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.werkzeugleiste-rechts { margin-left: auto; }

/* === Lagekacheln ===
   Kennzahl mit Zeichen und Text. Die Statusfarbe steht als Balken links, die
   Zahl in tabellarischen Ziffern -- mehrere Kacheln nebeneinander fluchten. */
.lagekacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.8rem;
  margin: 0 0 1.25rem;
}

.lagekachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  background: var(--flaeche-karte);
  border: 1px solid var(--rand-leise);
  border-left: 5px solid var(--ampel-grau);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  padding: 0.7rem 0.9rem 0.8rem;
  min-height: 5.5rem;
}

.lagekachel-kopf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.lagekachel-zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.lagekachel-text {
  font-family: var(--schrift-schmal);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lagekachel-zahl {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.lagekachel-fuss {
  font-size: 0.78rem;
  color: var(--text-leise);
}

.lagekachel[data-status="rot"] { border-left-color: var(--ampel-rot); }
.lagekachel[data-status="rot"] .lagekachel-kopf { color: var(--ampel-rot); }
.lagekachel[data-status="gelb"] { border-left-color: var(--ampel-gelb); }
.lagekachel[data-status="gelb"] .lagekachel-kopf { color: var(--ampel-gelb); }
.lagekachel[data-status="gruen"] { border-left-color: var(--ampel-gruen); }
.lagekachel[data-status="gruen"] .lagekachel-kopf { color: var(--ampel-gruen); }
.lagekachel[data-status="grau"] { border-left-color: var(--ampel-grau); }
.lagekachel[data-status="grau"] .lagekachel-kopf { color: var(--ampel-grau); }
.lagekachel[data-status="fehlt"] { border-left-color: var(--ampel-fehlt); }
.lagekachel[data-status="fehlt"] .lagekachel-kopf { color: var(--ampel-fehlt); }
.lagekachel[data-status="fehlt"] .lagekachel-zeichen { border-style: dashed; }
.lagekachel[data-status="marke"] { border-left-color: var(--signal); }
.lagekachel[data-status="marke"] .lagekachel-kopf { color: var(--signal-text); }

/* Eine Kachel ohne Fall bleibt sichtbar, tritt aber zurueck. */
.lagekachel[data-leer="ja"] .lagekachel-zahl { color: var(--text-leise); }

/* === Bedienelemente === */
button,
.knopf {
  font-family: var(--schrift);
  font-size: 0.95rem;
  font-weight: 600;
  min-height: var(--bedienhoehe);
  padding: 0.35rem 1rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-karte);
  color: var(--text);
  cursor: pointer;
}

button:hover:not(:disabled) {
  border-color: var(--marke);
  background: var(--flaeche-leise);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.wichtig {
  background: var(--marke);
  border-color: var(--marke);
  color: #ffffff;
  font-weight: 700;
}

button.wichtig:hover:not(:disabled) {
  background: var(--marke-hell);
  border-color: var(--marke-hell);
}

button.gefahr {
  color: var(--ampel-rot);
  border-color: var(--ampel-rot);
  background: var(--ampel-rot-flaeche);
  font-weight: 700;
}

button.gefahr:hover:not(:disabled) {
  background: var(--ampel-rot);
  border-color: var(--ampel-rot);
  color: var(--flaeche-karte);
}

button.flach {
  background: transparent;
  border-color: transparent;
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0.25rem 0.45rem;
  font-weight: 600;
}

button.flach:hover:not(:disabled) {
  background: var(--akzent-flaeche);
  border-color: transparent;
}

input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--flaeche-karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  min-height: var(--bedienhoehe);
  max-width: 100%;
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: var(--marke-kontur); }

input:disabled, select:disabled, textarea:disabled {
  background: var(--flaeche-leise);
  color: var(--text-leise);
}

textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.5;
}

input[type="checkbox"] {
  min-height: 0;
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--marke);
}

input[type="date"],
input[type="number"],
td.zahl {
  font-variant-numeric: tabular-nums;
}

label {
  display: block;
  font-family: var(--schrift-schmal);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: 0.25rem;
}

.feld { margin-bottom: 0.9rem; }

.feld-reihe {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: var(--bedienhoehe);
}

.feld-reihe label {
  margin: 0;
  font-family: var(--schrift);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.feld-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 1.1rem;
}

.feld-hinweis {
  font-size: 0.83rem;
  color: var(--text-leise);
  margin: 0.25rem 0 0;
}

/* === Meldungen === */
.fehler {
  border-left: 4px solid var(--ampel-rot);
  background: var(--ampel-rot-flaeche);
  color: var(--ampel-rot);
  padding: 0.65rem 0.9rem;
  margin: 0 0 0.9rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 600;
}

.fehler:empty,
.erfolg:empty { display: none; }

.erfolg {
  border-left: 4px solid var(--ampel-gruen);
  background: var(--ampel-gruen-flaeche);
  color: var(--ampel-gruen);
  padding: 0.65rem 0.9rem;
  margin: 0 0 0.9rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 600;
}

.meldung {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  max-width: min(36rem, calc(100vw - 2rem));
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  border-left: 5px solid var(--marke);
  background: var(--flaeche-karte);
  color: var(--text);
  box-shadow: var(--schatten-hoch);
  font-weight: 600;
  z-index: 20;
}

.meldung[data-art="fehler"] {
  border-color: var(--ampel-rot);
  border-left-color: var(--ampel-rot);
  color: var(--ampel-rot);
  background: var(--ampel-rot-flaeche);
}

.meldung[data-art="erfolg"] {
  border-color: var(--ampel-gruen);
  border-left-color: var(--ampel-gruen);
  color: var(--ampel-gruen);
  background: var(--ampel-gruen-flaeche);
}

.meldung[data-art="hinweis"] {
  border-color: var(--signal-kontur);
  border-left-color: var(--signal);
  color: var(--signal-text);
  background: var(--signal-flaeche);
}

/* === Tabellen === */
/* Breite Tabellen scrollen im Rahmen, nicht die Seite. Der Balken bleibt dabei
   sichtbar: eine abgeschnittene Spalte ohne erkennbaren Balken sieht aus wie ein
   Darstellungsfehler. */
.tabellen-rahmen {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--rand) var(--flaeche-leise);
  padding-bottom: 2px;
}

.tabellen-rahmen::-webkit-scrollbar { height: 10px; }

.tabellen-rahmen::-webkit-scrollbar-track {
  background: var(--flaeche-leise);
  border-radius: 999px;
}

.tabellen-rahmen::-webkit-scrollbar-thumb {
  background: var(--rand);
  border-radius: 999px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

caption {
  caption-side: top;
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-leise);
  padding-bottom: 0.5rem;
}

th, td {
  text-align: left;
  padding: 0.62rem 0.7rem;
  border-bottom: 1px solid var(--rand-leise);
  vertical-align: top;
}

thead th {
  background: var(--flaeche-leise);
  border-bottom: 2px solid var(--marke-kontur);
  font-family: var(--schrift-schmal);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-leise);
  white-space: nowrap;
}

tbody tr:nth-child(even) { background: var(--flaeche-zeile); }
tbody tr:hover { background: var(--akzent-flaeche); }

td.zahl { text-align: right; }

/* Handlungen einer Tabellenzeile stehen nebeneinander. Brechen sie um, wird jede
   Zeile doppelt so hoch und die Pflegemasken der Verwaltung zerfallen. */
.zeilen-handlungen {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
}

.zeilen-handlungen button { white-space: nowrap; }

td .zeilen-handlungen button { padding: 0.35rem 0.7rem; }

/* Pflegetabellen der Verwaltung: neun Spalten aus Eingabefeldern passen nur dann
   nebeneinander, wenn die Zahlenfelder nicht die Vorgabebreite des Browsers
   behalten. Sonst schiebt die Tabelle die letzten Spalten aus der Karte. */
td .feld-name,
td .feld-beschreibung {
  width: 100%;
}

/* Der Name ist die Zeile: an ihm erkennt man, welchen Eintrag man gerade
   aendert. Bei 6,5 rem standen dort zehn Zeichen, und aus "Dekontamination
   Verletzter -- Fachausbildung" wurde "Dekontami". Lieber schiebt die Tabelle
   im .tabellen-rahmen waagerecht -- so steht es im Designsystem, und der
   Scrollbalken sagt es. Der Titeltext nennt den ganzen Namen beim Zeigen. */
td .feld-name { min-width: 9.5rem; }
td .feld-beschreibung { min-width: 8rem; }

td .feld-kuerzel { width: 5.5rem; }

td .feld-monate,
td .feld-warn,
td .feld-sortierung { width: 4.4rem; }

td .feld-kuerzel,
td .feld-monate,
td .feld-warn,
td .feld-sortierung,
td .feld-name,
td .feld-beschreibung { padding-left: 0.45rem; padding-right: 0.45rem; }

/* Eine Tabelle aus Eingabefeldern braucht jeden Punkt Breite: engere Zellen und
   Spaltenueberschriften, die umbrechen duerfen. Wo :has() fehlt, bleibt es beim
   waagerechten Schieben im Rahmen -- also beim bisherigen Verhalten. */
table:has(td input) th,
table:has(td input) td {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

table:has(td input) thead th { white-space: normal; }

.leer-hinweis {
  padding: 1rem 0;
  color: var(--text-leise);
}

/* === Rueckfrage ===
   Vor einer Aenderung, die sich in der Anwendung nicht zuruecknehmen laesst.
   Sie steht in der Karte, in der die Handlung ausgeloest wurde, und nicht als
   Fenster darueber: das Designsystem kennt ausser dem Toast keine Ueberlagerung,
   und ein Systemdialog koennte den mehrsaetzigen Klartext des Servers weder
   gliedern noch seine Knoepfe benennen. Rot wie jede Gefahr-Handlung -- es ist
   dieselbe Farbe, die auch der Knopf traegt, der die Frage beantwortet. */
.rueckfrage {
  margin: 0.9rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--ampel-rot);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--ampel-rot-flaeche);
}

.rueckfrage:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.rueckfrage-titel {
  margin: 0 0 0.5rem;
  font-family: var(--schrift-schmal);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ampel-rot);
}

.rueckfrage-text { margin: 0 0 0.5rem; }

/* Der Satz zur Tragweite steht fett und in der Gefahrenfarbe: er ist die
   Aussage, auf die es beim Druecken ankommt, und nicht ein Nachsatz. */
.rueckfrage-folge {
  margin: 0 0 0.8rem;
  font-weight: 700;
  color: var(--ampel-rot);
}

/* === Ampel ===
   Farbe, Zeichen und Text zusammen. Fehlt ist eigens abgesetzt: eigene Farbe,
   eigenes Zeichen und gestrichelter Rand, denn es ist kein Ablauf, sondern eine
   Luecke in der Erfassung. */
.ampel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.ampel .ampel-zeichen {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
}

.ampel[data-status="rot"] { color: var(--ampel-rot); background: var(--ampel-rot-flaeche); }
.ampel[data-status="gelb"] { color: var(--ampel-gelb); background: var(--ampel-gelb-flaeche); }
.ampel[data-status="gruen"] { color: var(--ampel-gruen); background: var(--ampel-gruen-flaeche); }
.ampel[data-status="grau"] { color: var(--ampel-grau); background: var(--ampel-grau-flaeche); }

.ampel[data-status="fehlt"] {
  color: var(--ampel-fehlt);
  background: var(--ampel-fehlt-flaeche);
  border-style: dashed;
  border-width: 2px;
}

.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.abzeichen-zaehler {
  display: inline-flex;
  gap: 0.25rem;
}

.zaehler {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius);
  border: 1px solid currentColor;
}

.zaehler[data-status="rot"] { color: var(--ampel-rot); background: var(--ampel-rot-flaeche); }
.zaehler[data-status="gelb"] { color: var(--ampel-gelb); background: var(--ampel-gelb-flaeche); }

.zaehler[data-status="fehlt"] {
  color: var(--ampel-fehlt);
  background: var(--ampel-fehlt-flaeche);
  border-style: dashed;
}

.status-marke {
  display: inline-block;
  font-family: var(--schrift-schmal);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-leise);
  color: var(--text-leise);
  white-space: nowrap;
}

.status-marke[data-status="aktiv"] {
  color: var(--ampel-gruen);
  border-color: currentColor;
  background: var(--ampel-gruen-flaeche);
}

.status-marke[data-status="ruhend"] {
  color: var(--ampel-gelb);
  border-color: currentColor;
  background: var(--ampel-gelb-flaeche);
}

.status-marke[data-status="ausgetreten"] {
  text-decoration: line-through;
  color: var(--ampel-grau);
  border-style: dashed;
}

/* === Notizen === */
.notiz {
  border: 1px solid var(--rand-leise);
  border-left: 4px solid var(--marke);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.8rem 0.95rem;
  margin-bottom: 0.9rem;
  background: var(--flaeche-karte);
}

.notiz-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--text-leise);
  margin-bottom: 0.5rem;
}

.notiz-datum {
  font-weight: 700;
  color: var(--text);
  font-size: 0.98rem;
}

.notiz-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

.notiz.ueberholt {
  border-left-color: var(--ampel-grau);
  border-style: dashed;
  background: var(--flaeche-leise);
}

.notiz.ueberholt .notiz-text { color: var(--text-leise); }

.notiz-marke {
  font-family: var(--schrift-schmal);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 0.05rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
}

.notiz-marke[data-art="ueberholt"] { color: var(--ampel-grau); }
.notiz-marke[data-art="korrektur"] { color: var(--ampel-fehlt); }

.notiz-handlungen { margin-top: 0.6rem; }

/* === Anmeldung ===
   Eigenstaendiger Auftritt: Nachtblau als Vollflaeche, Wortmarke gross,
   Warnband als Abschluss der Karte. Keine Bilder, alles aus CSS. */
body[data-ansicht="anmeldung"] {
  background: var(--marke-tief);
}

body[data-ansicht="anmeldung"] .inhalt {
  max-width: none;
  padding: 0;
}

.anmeldung-buehne {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 2rem 1rem 3rem;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(240, 122, 26, 0.16) 0%, rgba(240, 122, 26, 0) 55%),
    linear-gradient(170deg, var(--marke-hell) 0%, var(--marke) 45%, var(--marke-tief) 100%);
  color: var(--kopf-text);
}

.anmeldung-marke {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.anmeldung-marke .wortmarke-zeichen {
  width: 72px;
  height: 72px;
}

.anmeldung-marke h1 {
  margin: 0;
  font-family: var(--schrift-schmal);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.anmeldung-marke .wortmarke-unter,
.anmeldung-marke .anmeldung-unter {
  display: block;
  font-family: var(--schrift);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kopf-text-leise);
}

.anmeldung {
  width: min(26rem, 100%);
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* Die Buehne faerbt ihren Text hell; die Karte steht auf Weiss und holt sich
     deshalb die normale Textfarbe zurueck. */
  color: var(--text);
  background: var(--flaeche-karte);
  border: 1px solid var(--rand-leise);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch);
}

.anmeldung .warnband { height: 6px; }

.anmeldung-koerper { padding: 1.3rem 1.4rem 1.5rem; }

.anmeldung-koerper h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.anmeldung-koerper button[type="submit"] { width: 100%; }

.anmeldung-fuss {
  margin: 1.25rem 0 0;
  max-width: 26rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--kopf-text-leise);
}

/* === Verlauf, Kleinteile === */
.verlauf-aktuell { font-weight: 600; }

.verlauf-aktuell td { background: var(--akzent-flaeche); }

.marke-manuell {
  font-family: var(--schrift-schmal);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ampel-fehlt);
  border: 1px dashed currentColor;
  border-radius: var(--radius);
  padding: 0 0.35rem;
  white-space: nowrap;
}

.rechte-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.rechte-bereich {
  border: 1px solid var(--rand-leise);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  background: var(--flaeche-zeile);
}

.rechte-bereich h4 {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
}

.recht-zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.3rem 0;
  min-height: var(--bedienhoehe);
}

.recht-zeile label {
  margin: 0;
  font-family: var(--schrift);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.recht-zeile code {
  display: block;
  font-family: var(--schrift-zahl);
  font-size: 0.75rem;
  color: var(--text-leise);
}

.marke-unwirksam {
  display: inline-block;
  font-family: var(--schrift-schmal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ampel-gelb);
  background: var(--ampel-gelb-flaeche);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: 0 0.35rem;
}

.herkunft {
  font-family: var(--schrift-schmal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-leise);
  color: var(--text-leise);
  white-space: nowrap;
}

.herkunft[data-herkunft="umgebung"] { color: var(--ampel-gelb); border-color: currentColor; background: var(--ampel-gelb-flaeche); }
.herkunft[data-herkunft="datenbank"] { color: var(--ampel-gruen); border-color: currentColor; background: var(--ampel-gruen-flaeche); }

/* === Unternavigation (Reiter innerhalb eines Bereichs) === */
.unternavigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--rand-leise);
  padding-bottom: 0;
}

.unternavigation a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bedienhoehe);
  padding: 0 0.95rem;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: -2px;
  text-decoration: none;
  color: var(--text-leise);
  font-family: var(--schrift-schmal);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.unternavigation a:hover {
  color: var(--text);
  background: var(--flaeche-leise);
}

.unternavigation a[aria-current="page"] {
  color: var(--text);
  background: var(--flaeche-karte);
  border-color: var(--rand-leise);
  border-bottom-color: var(--signal);
}

.gruppe-ueberschrift {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
}

.gruppe-ueberschrift h3 { margin: 0; }

.lauf-ok { color: var(--ampel-gruen); font-weight: 700; }
.lauf-fehler { color: var(--ampel-rot); font-weight: 700; }

/* === Vorbereitete Muster fuer Dienste, Auswertungen und Wiki ===
   Sie werden von Phase 1 noch nicht benutzt, stehen aber hier, damit spaetere
   Ansichten nicht jede fuer sich eine eigene Formensprache erfinden. */

/* Balken fuer einfache Diagramme. Breite ueber --anteil (0 bis 100), gesetzt in
   einer erzeugten Regel oder per Attribut -- kein style="", die CSP verbietet es. */
.balken-liste {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1rem;
}

.balken-zeile {
  display: grid;
  grid-template-columns: minmax(6rem, 12rem) 1fr auto;
  align-items: center;
  gap: 0.6rem;
}

.balken-name { font-size: 0.9rem; }

.balken-spur {
  position: relative;
  height: 0.85rem;
  background: var(--flaeche-leise);
  border-radius: 999px;
  overflow: hidden;
}

.balken-wert {
  display: block;
  height: 100%;
  width: calc(var(--anteil, 0) * 1%);
  background: var(--marke);
  border-radius: 999px;
}

.balken-wert[data-status="rot"] { background: var(--ampel-rot); }
.balken-wert[data-status="gelb"] { background: var(--ampel-gelb); }
.balken-wert[data-status="gruen"] { background: var(--ampel-gruen); }
.balken-wert[data-status="marke"] { background: var(--signal); }

.balken-zahl {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  color: var(--text-leise);
}

/* Datei- oder Anhangzeile (Phase 2: PDF-Anhaenge). */
.dateizeile {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--rand-leise);
  border-radius: var(--radius);
  background: var(--flaeche-zeile);
  margin-bottom: 0.45rem;
}

.dateizeile-zeichen {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2.4rem;
  border: 1px solid var(--rand);
  border-radius: 2px;
  background: var(--flaeche-karte);
  font-family: var(--schrift-schmal);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-leise);
}

.dateizeile-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dateizeile-groesse {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--text-leise);
  white-space: nowrap;
}

/* Seitenbaum (Phase 4: Wiki). Einrueckung ueber verschachtelte Listen. */
.seitenbaum, .seitenbaum ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.seitenbaum ul {
  margin-left: 0.7rem;
  padding-left: 0.7rem;
  border-left: 1px solid var(--rand-leise);
}

.seitenbaum a {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  font-size: 0.93rem;
}

.seitenbaum a:hover { background: var(--flaeche-leise); }

.seitenbaum a[aria-current="page"] {
  background: var(--akzent-flaeche);
  box-shadow: inset 3px 0 0 var(--signal);
  font-weight: 700;
}

/* Fliesstext fuer gerenderten Markdown-Inhalt (Wiki, lange Hinweise). */
.fliesstext {
  max-width: 68ch;
  font-size: 1.02rem;
  line-height: 1.65;
}

.fliesstext > :first-child { margin-top: 0; }

.fliesstext h2 { font-size: 1.3rem; margin: 1.8rem 0 0.6rem; }
.fliesstext h3 { font-size: 1.08rem; margin: 1.4rem 0 0.4rem; }

.fliesstext h4 {
  font-family: var(--schrift-schmal);
  margin: 1.2rem 0 0.35rem;
}

.fliesstext p { margin: 0 0 0.9rem; }

.fliesstext ul, .fliesstext ol { margin: 0 0 0.9rem; padding-left: 1.4rem; }
.fliesstext li { margin-bottom: 0.3rem; }

.fliesstext blockquote {
  margin: 0 0 0.9rem;
  padding: 0.3rem 0 0.3rem 1rem;
  border-left: 3px solid var(--signal);
  color: var(--text-leise);
}

.fliesstext code {
  font-family: var(--schrift-zahl);
  font-size: 0.88em;
  padding: 0.05rem 0.3rem;
  border-radius: 2px;
  background: var(--flaeche-leise);
}

.fliesstext pre {
  overflow-x: auto;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rand-leise);
  border-radius: var(--radius);
  background: var(--flaeche-leise);
}

.fliesstext pre code { background: none; padding: 0; }

.fliesstext hr {
  border: none;
  border-top: 1px solid var(--rand-leise);
  margin: 1.6rem 0;
}

/* === Telefon: einspaltig, Tabellen umgebrochen === */
@media (max-width: 760px) {
  body { font-size: 16px; }

  .kopf, .navigation, .inhalt { padding-left: 0.9rem; padding-right: 0.9rem; }

  .kopf { gap: 0.4rem 0.6rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }

  .wortmarke { flex: 1 1 auto; gap: 0.6rem; }
  .wortmarke-zeichen { width: 30px; height: 30px; }
  .wortmarke-text { font-size: 1.02rem; }
  .wortmarke-unter { font-size: 0.64rem; letter-spacing: 0.12em; }

  .kopf-benutzer a.benutzer-name { padding: 0.1rem 0.45rem; font-size: 0.82rem; }
  .kopf-benutzer a.benutzer-name .benutzer-rollen { display: none; }
  .kopf button { padding: 0 0.65rem; font-size: 0.78rem; }

  /* Sechs bis sieben Eintraege passen auf kein Telefon nebeneinander: waagerecht
     schiebbar mit Fangpunkten, ohne dass die Seite selbst seitlich scrollt. */
  .navigation {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .navigation::-webkit-scrollbar { display: none; }

  .navigation a {
    scroll-snap-align: start;
    padding: 0 0.75rem;
    font-size: 0.86rem;
  }

  .seitenkopf { align-items: stretch; flex-direction: column; }
  .seitenkopf-handlungen > button,
  .seitenkopf-handlungen > .knopf { width: 100%; }

  .karte { padding: 0.9rem 0.95rem; border-radius: var(--radius); }

  .lagekacheln { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.6rem; }
  .lagekachel { min-height: 4.8rem; padding: 0.6rem 0.7rem; }
  .lagekachel-zahl { font-size: 1.7rem; }

  .feld-gitter { grid-template-columns: 1fr; }
  .rechte-gitter { grid-template-columns: 1fr; }

  .balken-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .balken-name { grid-row: 1; grid-column: 1; }
  .balken-zahl { grid-row: 1; grid-column: 2; }
  .balken-spur { grid-row: 2; grid-column: 1 / -1; }

  .werkzeugleiste { flex-direction: column; align-items: stretch; }
  .werkzeugleiste-rechts { margin-left: 0; }
  .werkzeugleiste button,
  .werkzeugleiste input,
  .werkzeugleiste select { width: 100%; }

  .unternavigation {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .unternavigation a { scroll-snap-align: start; padding: 0 0.75rem; font-size: 0.86rem; }

  .unternavigation::-webkit-scrollbar { display: none; }

  /* In der Kartenansicht steht jede Zelle fuer sich: dort duerfen die Handlungen
     wieder umbrechen, und die Eingabefelder nehmen die ganze Breite. */
  .zeilen-handlungen { flex-wrap: wrap; }
  table.umbrechend td input[type="text"],
  table.umbrechend td input[type="number"] { width: 100%; }
  td .feld-kuerzel,
  td .feld-monate,
  td .feld-warn,
  td .feld-sortierung { width: 100%; }

  /* Tabellen als Kartenliste: jede Zelle mit ihrer Spaltenbeschriftung. */
  table.umbrechend thead { display: none; }

  table.umbrechend tbody tr {
    display: block;
    border: 1px solid var(--rand-leise);
    border-left: 3px solid var(--marke-kontur);
    border-radius: var(--radius);
    margin-bottom: 0.7rem;
    padding: 0.4rem 0.6rem;
    background: var(--flaeche-karte);
  }

  table.umbrechend tbody tr:nth-child(even) { background: var(--flaeche-karte); }
  table.umbrechend tbody tr:hover { background: var(--flaeche-karte); }

  table.umbrechend td {
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
    align-items: baseline;
    border: none;
    border-bottom: 1px dashed var(--rand-leise);
    padding: 0.42rem 0.15rem;
    text-align: left;
  }

  table.umbrechend td:last-child { border-bottom: none; }

  table.umbrechend td::before {
    content: attr(data-spalte);
    flex: 0 0 8rem;
    font-family: var(--schrift-schmal);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-leise);
  }

  table.umbrechend td[data-spalte=""]::before { content: none; }

  .anmeldung-buehne { padding: 1.5rem 0.9rem 2.5rem; }
  .anmeldung-marke .wortmarke-zeichen { width: 56px; height: 56px; }
  .anmeldung-marke h1 { font-size: 1.45rem; }
}

/* Schluessel-Wert-Tabelle (Stammdaten-Anzeige): erste Spalte schmal und ruhig. */
table.schluessel-wert td:first-child {
  width: 12rem;
  color: var(--text-leise);
  font-family: var(--schrift-schmal);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-top: 0.75rem;
}

table.schluessel-wert td:first-child strong { font-weight: inherit; }

table.schluessel-wert tbody tr:hover { background: var(--flaeche-zeile); }

@media (max-width: 760px) {
  table.schluessel-wert td:first-child { width: 8.5rem; }
}

/* Verweis, der wie ein Knopf aussieht (etwa "Auskunft erzeugen"). Er bleibt ein
   Verweis, damit Mittelklick und Tastatur wie erwartet arbeiten. */
a.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text);
}

a.knopf:hover {
  border-color: var(--marke);
  background: var(--flaeche-leise);
}

/* Das Datumsfeld und der Schalter "unbefristet" stehen untereinander. */
#q-bis-eingaben {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.formular-korrektur {
  border-left: 3px solid var(--signal);
  padding-left: 0.85rem;
}

.formular-korrektur .feld-reihe { justify-content: flex-start; }

/* Ein Codewort im Fliesstext (Rechteschluessel in einer Meldung). */
.fehler code,
.hinweis code {
  font-family: var(--schrift-zahl);
  font-size: 0.88em;
  padding: 0 0.25rem;
  border: 1px solid currentColor;
  border-radius: 2px;
}

/* Ein leerer Hinweiskasten soll keinen Platz einnehmen (etwa der Hinweis des
   Fristenlaufs, der im Normalfall leer bleibt). */
.hinweis:empty { display: none; }

/* Einstellung, die pflegbar ist, aber noch nichts tut. Sie bleibt bedienbar --
   gekennzeichnet, nicht gesperrt. */
tr.zeile-unwirksam td:first-child { border-left: 3px solid var(--ampel-gelb); }

.marke-unwirksam { margin-left: 0.4rem; }

/* Wer weniger Bewegung wuenscht, bekommt keine. Die Oberflaeche animiert ohnehin
   nichts, was zum Verstaendnis noetig waere. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Phase 2: Dienste, Anwesenheit, Anhaenge, Aufbewahrung -- und die Bausteine,
   die die Detailseiten auf dem Telefon bedienbar machen.
   ========================================================================== */

/* === Reiter innerhalb einer Detailseite ===
   Gleiche Formensprache wie die Unternavigation der Verwaltung: Versalien,
   schmale Schrift, orange Unterkante auf dem aktiven Eintrag. Anders als dort
   haftet die Leiste beim Scrollen oben -- auf dem Telefon ist der Weg zurueck
   zum Reiterwechsel sonst ein Scrollweg ueber die ganze Liste. */
.reiter {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1.25rem;
  padding-top: 0.35rem;
  border-bottom: 2px solid var(--rand-leise);
  background: var(--flaeche);
}

.reiter a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--bedienhoehe);
  padding: 0 0.85rem;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: -2px;
  text-decoration: none;
  color: var(--text-leise);
  font-family: var(--schrift-schmal);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reiter a:hover {
  color: var(--text);
  background: var(--flaeche-leise);
}

.reiter a[aria-current="page"] {
  color: var(--text);
  background: var(--flaeche-karte);
  border-color: var(--rand-leise);
  border-bottom-color: var(--signal);
}

/* Der Zaehler am Reiter kommt aus schon geladenen Daten. Ein Reiter loest
   keinen zusaetzlichen Abruf aus, nur um seine Zahl zu kennen. */
.reiter-zahl {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--flaeche-leise);
  color: var(--text-leise);
}

.reiter a[aria-current="page"] .reiter-zahl {
  background: var(--akzent-flaeche);
  color: var(--akzent);
}

/* === Filterkasten und Aufklapper ===
   Beides <details>: Auf- und Zuklappen, Tastaturbedienung und die Ansage fuer
   Vorleser bringt der Browser mit. Auf dem Telefon sind beide zugeklappt, damit
   die Liste sofort sichtbar ist. */
.filterkasten,
.aufklapper {
  border: 1px solid var(--rand-leise);
  border-radius: var(--radius);
  background: var(--flaeche-zeile);
  margin: 0 0 1rem;
}

.filterkasten > summary,
.aufklapper > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--bedienhoehe);
  padding: 0 0.85rem;
  cursor: pointer;
  font-family: var(--schrift-schmal);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
  list-style: none;
}

.filterkasten > summary::-webkit-details-marker,
.aufklapper > summary::-webkit-details-marker { display: none; }

/* Eigenes Dreieck statt des Systemmarkers: es dreht sich beim Aufklappen und
   steht damit auch ohne Farbe fuer den Zustand. */
.filterkasten > summary::before,
.aufklapper > summary::before {
  content: "▸";
  display: inline-block;
  color: var(--signal-text);
  font-size: 0.9rem;
}

.filterkasten[open] > summary::before,
.aufklapper[open] > summary::before { content: "▾"; }

.filterkasten > summary:hover,
.aufklapper > summary:hover { color: var(--text); }

.filterkasten > summary:focus-visible,
.aufklapper > summary:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: -3px;
  box-shadow: 0 0 0 3px var(--fokus-hof);
}

.filterkasten > :not(summary),
.aufklapper-koerper {
  padding: 0 0.85rem;
}

.filterkasten > :not(summary):last-child,
.aufklapper-koerper { padding-bottom: 0.85rem; }

.filterkasten[open] > summary,
.aufklapper[open] > summary { border-bottom: 1px solid var(--rand-leise); margin-bottom: 0.7rem; }

/* Zugeklappt muss erkennbar bleiben, dass ein Filter greift -- sonst wirkt eine
   kurze Liste wie ein kurzer Bestand. */
.filterkasten-anzahl {
  font-family: var(--schrift-zahl);
  font-size: 0.72rem;
  letter-spacing: 0;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--signal-flaeche);
  color: var(--signal-text);
  border: 1px solid var(--signal-kontur);
}

.trefferzaehler {
  margin: 0 0 0.6rem;
  font-family: var(--schrift-schmal);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* === Kompakte Tabellenkarten auf dem Telefon ===
   table.umbrechend wird auf dem Telefon zur Kartenliste; mit .kompakt wird aus
   jeder Karte ein Gitter aus zwei Spalten. data-feld sagt je Zelle, wo sie
   landet: titel ueber die ganze Breite, alles Weitere paarweise nebeneinander.
   Ohne data-feld bleibt es bei der beschrifteten Zeile. */
table.umbrechend.kompakt td[data-feld="punkt"]::before,
table.umbrechend.kompakt td[data-feld="titel"]::before { content: none; }

/* === Umschalter der Anwesenheit ===
   Ein Radiogruppen-Satz aus vier grossen Flaechen. Das Eingabefeld selbst ist
   unsichtbar, aber vorhanden: Tastatur, Vorleser und das Gruppenverhalten der
   Radioknoepfe kommen damit vom Browser und nicht aus dem Skript. */
.anwesenheit-liste {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.anwesenheit-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 0.8rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rand-leise);
  border-left: 4px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-karte);
}

.anwesenheit-zeile[data-status="anwesend"] { border-left-color: var(--ampel-gruen); }
.anwesenheit-zeile[data-status="entschuldigt"] { border-left-color: var(--ampel-gelb); }
.anwesenheit-zeile[data-status="unentschuldigt"] { border-left-color: var(--ampel-rot); }
.anwesenheit-zeile[data-status="nicht_erfasst"] {
  border-left-color: var(--ampel-fehlt);
  border-left-style: dashed;
}

/* Eine geaenderte, noch nicht gespeicherte Zeile traegt einen Hof -- zusaetzlich
   zur Marke "geaendert", nicht statt ihrer. */
.anwesenheit-zeile[data-geaendert="ja"] {
  box-shadow: inset 0 0 0 1px var(--signal-kontur);
}

.anwesenheit-kopf {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
}

.anwesenheit-name {
  font-weight: 600;
  font-size: 1.02rem;
}

.anwesenheit-vermerk {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
  font-size: 0.85rem;
}

.anwesenheit-bemerkung-text {
  color: var(--text-leise);
  font-style: italic;
}

.anwesenheit-wahl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
}

.umschalter {
  display: block;
  position: relative;
  cursor: pointer;
}

.umschalter input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.umschalter-flaeche {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: var(--bedienhoehe);
  padding: 0.3rem 0.2rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-karte);
  color: var(--text-leise);
  text-align: center;
}

.umschalter-zeichen {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}

.umschalter-text {
  font-family: var(--schrift-schmal);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.umschalter:hover .umschalter-flaeche { border-color: var(--marke); color: var(--text); }

.umschalter input:focus-visible + .umschalter-flaeche {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--fokus-hof);
}

.umschalter input:disabled + .umschalter-flaeche { opacity: 0.55; cursor: not-allowed; }

/* Gewaehlt: Flaeche in der Statusfarbe, Zeichen und Text bleiben daneben stehen
   -- die Farbe ist nie die einzige Information. */
.umschalter input:checked + .umschalter-flaeche {
  border-width: 2px;
  font-weight: 700;
}

.umschalter[data-status="gruen"] input:checked + .umschalter-flaeche {
  color: var(--ampel-gruen);
  border-color: currentColor;
  background: var(--ampel-gruen-flaeche);
}

.umschalter[data-status="gelb"] input:checked + .umschalter-flaeche {
  color: var(--ampel-gelb);
  border-color: currentColor;
  background: var(--ampel-gelb-flaeche);
}

.umschalter[data-status="rot"] input:checked + .umschalter-flaeche {
  color: var(--ampel-rot);
  border-color: currentColor;
  background: var(--ampel-rot-flaeche);
}

.umschalter[data-status="fehlt"] input:checked + .umschalter-flaeche {
  color: var(--ampel-fehlt);
  border-color: currentColor;
  border-style: dashed;
  background: var(--ampel-fehlt-flaeche);
}

.anwesenheit-zeile > .knopf-anwesenheit-mehr { justify-self: start; }

.anwesenheit-mehr {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--rand-leise);
  padding-top: 0.6rem;
}

.anwesenheit-mehr .feld { margin-bottom: 0.4rem; }
.anwesenheit-suche { margin-bottom: 0.4rem; }

/* === Leiste fuer ungespeicherte Aenderungen ===
   Die Anwesenheit geht in EINEM PUT. Bis dahin steht der Stand nur im Browser,
   und das muss sichtbar sein. */
/* Haftend nur, solange etwas offen ist. Ohne Aenderung waere eine haftende
   Leiste bloss ein Streifen, der dauerhaft einen Teil der Liste verdeckt. */
.aenderungsleiste {
  position: static;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rand-leise);
  border-radius: var(--radius);
  background: var(--flaeche-karte);
  box-shadow: var(--schatten);
}

.aenderungsleiste[data-offen="ja"] {
  position: sticky;
  bottom: 0.5rem;
  border-color: var(--signal-kontur);
  background: var(--signal-flaeche);
  box-shadow: var(--schatten-hoch);
}

.aenderungszaehler {
  font-family: var(--schrift-schmal);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-leise);
}

.aenderungsleiste[data-offen="ja"] .aenderungszaehler { color: var(--signal-text); }

.marke-geaendert,
.marke-nacht {
  display: inline-block;
  font-family: var(--schrift-schmal);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--signal-kontur);
  border-radius: var(--radius);
  background: var(--signal-flaeche);
  color: var(--signal-text);
  white-space: nowrap;
}

.marke-nacht { margin-left: 0.35rem; }

/* === Dienste === */

/* Ein abgesagter Dienst bleibt stehen: Marke UND durchgestrichener Titel.
   Farbe traegt hier nichts -- ausgegraut allein saehe nach "inaktiv" aus. */
.status-marke[data-status="abgesagt"] {
  color: var(--ampel-rot);
  border-color: currentColor;
  border-style: dashed;
  background: var(--ampel-rot-flaeche);
}

.dienst-abgesagt {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--text-leise);
}

tr.zeile-abgesagt td { background: var(--flaeche-leise); }

.zaehler[data-status="gruen"] {
  color: var(--ampel-gruen);
  background: var(--ampel-gruen-flaeche);
}

.seitenkopf-unter {
  margin: 0.15rem 0 0;
  font-family: var(--schrift-schmal);
  font-size: 0.9rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* Kompakte Bilanz am Helfer: vier Werte in einer Zeile, jeder mit Zeichen. */
.bilanzzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.7rem;
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
}

.bilanz-wert {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.bilanz-wert[data-status="gruen"] { color: var(--ampel-gruen); background: var(--ampel-gruen-flaeche); }
.bilanz-wert[data-status="gelb"] { color: var(--ampel-gelb); background: var(--ampel-gelb-flaeche); }
.bilanz-wert[data-status="rot"] { color: var(--ampel-rot); background: var(--ampel-rot-flaeche); }
.bilanz-wert[data-status="marke"] { color: var(--akzent); background: var(--akzent-flaeche); }

/* Eine Lagekachel, die zugleich Reiter ist (Fristen). Sie bleibt eine Kachel --
   nur der aktive Reiter bekommt die orange Unterkante. */
a.lagekachel {
  text-decoration: none;
  color: inherit;
}

a.lagekachel:hover {
  border-color: var(--marke);
  background: var(--flaeche-zeile);
}

a.lagekachel[aria-current="page"] {
  border-bottom: 3px solid var(--signal);
  background: var(--akzent-flaeche);
}

a.lagekachel:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--fokus-hof);
}

/* === Anhaenge ===
   Die Dateizeile aus dem Designsystem, ergaenzt um die Fusszeile mit Zeitpunkt
   und Beschreibung. */
.dateizeile { flex-wrap: wrap; }

.dateizeile-angaben {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dateizeile-fuss {
  font-size: 0.8rem;
  color: var(--text-leise);
}

.formular-anhang input[type="file"] {
  padding: 0.45rem 0.5rem;
  font-size: 0.9rem;
}

/* Eine ausklappbare Zeile unter einer Tabellenzeile (Korrektur, Anhaenge,
   Freigabe). Sie gehoert zur Zeile darueber und wird deshalb eingerueckt. */
.zeile-ausklapp > td {
  background: var(--flaeche-zeile);
  border-left: 3px solid var(--signal);
}

.formular-freigabe .feld { max-width: 46rem; }

/* === Telefon === */
@media (max-width: 760px) {
  /* Die Reiterleiste schiebt waagerecht mit Fangpunkten, wie die Hauptnavigation.
     Die Seite selbst scrollt nie seitlich. */
  .reiter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-left: -0.9rem;
    margin-right: -0.9rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .reiter::-webkit-scrollbar { display: none; }
  .reiter a { scroll-snap-align: start; padding: 0 0.7rem; font-size: 0.84rem; }

  /* Kompakte Karten: zwei Spalten, die erste nimmt den Platz.
     Zeile 1 der Titel, danach je zwei Zellen nebeneinander. */
  table.umbrechend.kompakt tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.45rem;
    row-gap: 0.1rem;
    align-items: baseline;
    padding: 0.55rem 0.7rem;
  }

  table.umbrechend.kompakt tbody td {
    display: block;
    border-bottom: none;
    padding: 0.08rem 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  table.umbrechend.kompakt tbody td[data-feld="titel"] {
    grid-column: 1 / -1;
    font-size: 1.02rem;
    font-weight: 600;
    padding-bottom: 0.15rem;
  }

  table.umbrechend.kompakt tbody td[data-feld="breit"] {
    grid-column: 1 / -1;
    padding-top: 0.25rem;
  }

  table.umbrechend.kompakt tbody td[data-feld="leise"],
  table.umbrechend.kompakt tbody td[data-feld="punkt"] {
    color: var(--text-leise);
    font-size: 0.88rem;
  }

  table.umbrechend.kompakt tbody td[data-feld="leise"]::before,
  table.umbrechend.kompakt tbody td[data-feld="marke"]::before { content: none; }

  /* Der Mittelpunkt trennt zwei Angaben in einer Zeile ("Zug 1 · Gruppenfuehrer")
     und ersetzt dort die Spaltenbeschriftung. */
  table.umbrechend.kompakt tbody td[data-feld="punkt"]::before {
    content: "·";
    flex: none;
    margin-right: 0.3rem;
    font-family: var(--schrift);
    font-size: inherit;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rand);
  }

  table.umbrechend.kompakt tbody td[data-feld="marke"] { justify-self: end; text-align: right; }

  /* Zellen, die ihre Beschriftung behalten (kein data-feld), stehen ueber die
     volle Breite -- zwei beschriftete Werte nebeneinander sind auf 390 px nicht
     mehr lesbar. Die Beschriftung braucht ausserdem einen Abstand dahinter: als
     Block liegt sie sonst am Wert. */
  table.umbrechend.kompakt tbody td:not([data-feld]) { grid-column: 1 / -1; }

  table.umbrechend.kompakt tbody td::before {
    display: inline-block;
    flex: none;
    margin-right: 0.4rem;
  }

  /* Eine Zelle ohne Inhalt nimmt keinen Platz ein. */
  table.umbrechend.kompakt tbody td:empty { display: none; }

  /* Vier Umschalter nebeneinander werden auf 390 px zu schmal fuer den Text:
     zwei mal zwei, jeder weiterhin mindestens 42 px hoch. */
  .anwesenheit-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .anwesenheit-zeile { grid-template-columns: minmax(0, 1fr); }
  .anwesenheit-zeile > .knopf-anwesenheit-mehr { justify-self: stretch; }

  .aenderungsleiste { flex-direction: column; align-items: stretch; }
  .aenderungsleiste .zeilen-handlungen { flex-direction: column; align-items: stretch; }
  .aenderungsleiste button { width: 100%; }

  .dateizeile { align-items: flex-start; }
  .dateizeile .zeilen-handlungen { flex: 1 1 100%; }
  .dateizeile .zeilen-handlungen button { flex: 1 1 auto; }

  .filterkasten .werkzeugleiste button { width: 100%; }
}

/* Zahlen, Datums- und Zeitangaben brechen nicht um: "2,25 h" ueber zwei Zeilen
   sieht aus wie zwei Werte. */
td.zahl { white-space: nowrap; }

/* In der Kartenansicht darf eine Zahlenzelle umbrechen: dort steht neben der
   Zeit die Marke "ueber Mitternacht", und die braucht die zweite Zeile. */
@media (max-width: 760px) {
  table.umbrechend.kompakt tbody td.zahl { white-space: normal; }
}

/* ==========================================================================
   Phase 3: Auswertungen, Diagramme -- und der Feinschliff fuers Telefon.

   Der Auftrag aus dem Betrieb war derselbe wie in Phase 2: "am Handy scrollt
   man sich daemlich." Drei Stellen waren gemessen die schlimmsten -- die
   Anwesenheitsmaske (rund 170 px je Helfer, bei vierzig Helfern kein Ende), der
   Kopfbereich einer Detailseite (rund 270 px, bevor die Reiter anfingen) und die
   Erklaerkaesten, die den ersten Bildschirm fuellten.
   ========================================================================== */

/* === Straffer Kopfbereich (.seitenkopf.kompakt) ===
   Der Zurueck-Verweis steht in derselben Zeile wie die Bereichsmarke, der Status
   neben dem Namen, und die Handlung bleibt auch auf dem Telefon ein kleiner Knopf
   rechts statt einer Flaeche ueber die volle Breite. */
.seitenkopf.kompakt {
  align-items: center;
  gap: 0.4rem 0.8rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.5rem;
}

.seitenkopf.kompakt .seitenkopf-titel {
  min-width: 0;
  flex: 1 1 14rem;
}

/* Bereichsmarke und Zurueck-Verweis teilen sich eine Zeile. */
.seitenkopf.kompakt .seitenkopf-bereich {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.55rem;
  margin-bottom: 0.1rem;
  min-height: 1.4rem;
}

.seitenkopf-bereich-name { color: var(--signal-text); }

/* Der Zurueck-Verweis in der Bereichszeile: klein, aber mit voller Bedienhoehe
   ueber den negativen Aussenabstand -- die Flaeche reicht in den Zeilenabstand
   hinein, ohne die Zeile hoeher zu machen. */
.seitenkopf.kompakt .zurueck {
  margin: -0.5rem 0;
  padding-left: 0;
  padding-right: 0;
  min-height: var(--bedienhoehe);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--schrift-schmal);
  font-weight: 700;
}

.seitenkopf.kompakt .zurueck::after {
  content: "·";
  margin-left: 0.55rem;
  color: var(--rand);
}

/* Die Statusmarke steht im Titel und bricht dort mit um. Sie erbt die
   Titelgroesse nicht -- eine Marke in 1,45 rem waere ein zweiter Titel. */
.seitenkopf.kompakt h2 .status-marke,
.seitenkopf.kompakt h2 .marke-nacht {
  vertical-align: middle;
  font-size: 0.7rem;
}

/* Ein Knopfverweis in Zweitgroesse: "Auskunft erzeugen" ist keine Haupthandlung
   der Seite, sondern eine seltene. Er bleibt mindestens 42 px hoch. */
a.knopf.klein,
button.klein {
  min-height: var(--bedienhoehe);
  padding: 0 0.7rem;
  font-family: var(--schrift-schmal);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* === Erklaerkasten zum Zuklappen (.hinweis-aufklapper) ===
   Derselbe Text, dieselbe blaue Kante wie .hinweis -- aber hinter einer
   Zusammenfassung, die sagt, worum es geht. Auf dem Telefon beginnt er
   zugeklappt, auf dem Schreibtisch offen. */
.hinweis-aufklapper {
  margin: 0 0 1rem;
  border: 1px solid var(--rand-leise);
  border-left: 4px solid var(--akzent);
  border-radius: var(--radius);
  background: var(--akzent-flaeche);
}

.hinweis-aufklapper > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--bedienhoehe);
  padding: 0 0.85rem;
  cursor: pointer;
  list-style: none;
  color: var(--akzent);
}

.hinweis-aufklapper > summary::-webkit-details-marker { display: none; }

/* Das Zeichen dreht sich nicht, es steht fest -- den Zustand traegt das Dreieck
   rechts. Ein Hinweiszeichen, das zugleich Zustand anzeigt, waere beides halb. */
.hinweis-marke {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--schrift-schmal);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.hinweis-titel {
  flex: 1 1 auto;
  font-family: var(--schrift-schmal);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.hinweis-aufklapper > summary::after {
  content: "▸";
  flex: 0 0 auto;
  font-size: 0.9rem;
}

.hinweis-aufklapper[open] > summary::after { content: "▾"; }

.hinweis-aufklapper > summary:hover { background: rgba(0, 0, 0, 0.04); }

.hinweis-aufklapper > summary:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: -3px;
  box-shadow: 0 0 0 3px var(--fokus-hof);
}

.hinweis-koerper {
  padding: 0.2rem 0.85rem 0.75rem;
  border-top: 1px solid var(--rand-leise);
}

.hinweis-koerper > p { margin: 0.6rem 0 0; }

/* === Schiebbare Leisten: Schatten am Rand ===
   Hauptnavigation, Unternavigation und Reiterleiste schieben auf dem Telefon
   waagerecht. Ohne sichtbaren Hinweis sieht eine abgeschnittene Leiste aus wie
   eine vollstaendige -- derselbe Fehler, den der Scrollbalken am Tabellenrahmen
   verhindert.

   Die Schatten kommen aus vier Hintergrundbildern: zwei in der Flaechenfarbe
   laufen MIT dem Inhalt (background-attachment: local) und decken den Schatten
   ab, solange nichts zu rollen ist; zwei Verlaeufe bleiben am Rahmen stehen
   (scroll) und werden sichtbar, sobald die ersten beiden wegrollen. Kein
   zusaetzliches Element, kein Skript, nichts am Markup. */
.reiter,
.unternavigation {
  background-image:
    linear-gradient(to right, var(--flaeche), rgba(0, 0, 0, 0)),
    linear-gradient(to left, var(--flaeche), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(11, 37, 69, 0.22), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(11, 37, 69, 0.22), rgba(0, 0, 0, 0));
  background-position: left center, right center, left center, right center;
  background-size: 2.2rem 100%, 2.2rem 100%, 0.85rem 100%, 0.85rem 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.navigation {
  background-image:
    linear-gradient(to right, var(--nav-flaeche), rgba(0, 0, 0, 0)),
    linear-gradient(to left, var(--nav-flaeche), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  background-position: left center, right center, left center, right center;
  background-size: 2.2rem 100%, 2.2rem 100%, 1.1rem 100%, 1.1rem 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* === Anwesenheit: kompakte Zeile ===
   Ziel war eine Zeile, die auf dem Telefon rund 90 px hoch ist statt 170.
   Erreicht wird das mit zwei Griffen: die vier Umschalter bleiben NEBENeinander
   (statt zwei mal zwei), und "Stunden und Bemerkung" wird ein Zeichen in der
   Namenszeile statt ein Knopf ueber die volle Breite darunter. */
.anwesenheit-werkzeuge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.4rem 0.9rem;
  margin-bottom: 0.3rem;
}

.anwesenheit-werkzeuge .feld { margin-bottom: 0; }
.anwesenheit-offen { white-space: nowrap; }

/* Das Zeichen fuer "Stunden und Bemerkung": klein in der Zeile, aber mit voller
   Bedienflaeche. Der negative Aussenabstand laesst die Flaeche in den
   Zeilenabstand hineinreichen, ohne die Zeile hoeher zu machen. */
.knopf-anwesenheit-mehr {
  flex: 0 0 auto;
  margin: -0.5rem 0 -0.5rem auto;
  min-width: var(--bedienhoehe);
  min-height: var(--bedienhoehe);
  padding: 0 0.5rem;
  border: 1px solid var(--rand-leise);
  background: var(--flaeche-zeile);
}

.knopf-anwesenheit-mehr .knopf-zeichen {
  font-size: 1.05rem;
  line-height: 1;
}

.knopf-anrechnung[aria-expanded="true"] {
  border-color: var(--signal-kontur);
  background: var(--signal-flaeche);
  color: var(--signal-text);
}

.knopf-anwesenheit-mehr[aria-expanded="true"] {
  border-color: var(--signal-kontur);
  background: var(--signal-flaeche);
  color: var(--signal-text);
}

.anwesenheit-kopf { align-items: center; }

.anwesenheit-name { min-width: 0; overflow-wrap: anywhere; }

/* Die Kurzform steht nur auf dem Telefon, der volle Text nur darueber. Beide
   sind aria-hidden -- die Ansage fuer Vorleser ist der volle Text daneben. */
.umschalter-kurz { display: none; }

/* === Leiste fuer ungespeicherte Aenderungen: haftend am unteren Rand ===
   Auf dem Telefon steht sie ueber dem Bildschirmrand und beachtet die
   Geraeteaussparung (safe area). Ohne sie waere der Speichern-Knopf bei vierzig
   Helfern vierzig Zeilen weiter unten -- also genau da, wo man ihn nicht sucht. */
.aenderungsleiste[data-offen="ja"] {
  bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

/* === Diagramme ===
   Reines CSS. --anteil (0 bis 100) setzt das Skript ueber style.setProperty --
   kein style-Attribut im Markup, die CSP laesst nur style-src 'self' zu. */

.balken-zusatz {
  display: block;
  font-size: 0.78rem;
  color: var(--text-leise);
}

/* Saeulendiagramm als Zeitreihe. Der Rahmen schiebt waagerecht, falls der
   Zeitraum mehr als ein gutes Jahr umfasst -- die Seite selbst scrollt nie. */
.saeulen-rahmen {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 0 1rem;
  padding-bottom: 0.2rem;
  background-image:
    linear-gradient(to right, var(--flaeche-karte), rgba(0, 0, 0, 0)),
    linear-gradient(to left, var(--flaeche-karte), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(11, 37, 69, 0.2), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(11, 37, 69, 0.2), rgba(0, 0, 0, 0));
  background-position: left center, right center, left center, right center;
  background-size: 1.6rem 100%, 1.6rem 100%, 0.7rem 100%, 0.7rem 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.saeulen-diagramm {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  min-width: 100%;
}

.saeule {
  flex: 1 1 0;
  min-width: 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.saeule-zahl {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* Die Spur bleibt sichtbar, auch wenn der Wert 0 ist: ein leerer Monat ist eine
   leere Saeule und keine Luecke. Ein Diagramm ohne den leeren August behauptet,
   es habe keinen August gegeben. */
.saeule-spur {
  width: 100%;
  height: 7rem;
  display: flex;
  align-items: flex-end;
  background: var(--flaeche-leise);
  border-bottom: 2px solid var(--rand);
  border-radius: var(--radius) var(--radius) 0 0;
}

.saeule-wert {
  display: block;
  width: 100%;
  /* Mindestens ein Strich, damit ein kleiner Wert nicht wie keiner aussieht. */
  height: max(3px, calc(var(--anteil, 0) * 1%));
  background: var(--signal);
  border-radius: var(--radius) var(--radius) 0 0;
}

.saeule[data-leer="ja"] .saeule-wert { height: 0; }
.saeule[data-leer="ja"] .saeule-zahl { color: var(--text-leise); }

.saeule-wert[data-status="rot"] { background: var(--ampel-rot); }
.saeule-wert[data-status="gelb"] { background: var(--ampel-gelb); }
.saeule-wert[data-status="gruen"] { background: var(--ampel-gruen); }
.saeule-wert[data-status="marke"] { background: var(--signal); }

.saeule-name {
  font-family: var(--schrift-schmal);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
  white-space: nowrap;
}

.saeule-zusatz {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--text-leise);
  white-space: nowrap;
}

/* Fortschrittsbalken in einer Tabellenzelle: Balken und Zahl nebeneinander. */
.fortschritt {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.fortschritt-spur {
  flex: 1 1 4rem;
  min-width: 3rem;
  max-width: 9rem;
  height: 0.6rem;
  background: var(--flaeche-leise);
  border: 1px solid var(--rand-leise);
  border-radius: 999px;
  overflow: hidden;
}

.fortschritt-wert {
  display: block;
  height: 100%;
  width: calc(var(--anteil, 0) * 1%);
  background: var(--signal);
}

.fortschritt-wert[data-status="rot"] { background: var(--ampel-rot); }
.fortschritt-wert[data-status="gelb"] { background: var(--ampel-gelb); }
.fortschritt-wert[data-status="gruen"] { background: var(--ampel-gruen); }
.fortschritt-wert[data-status="marke"] { background: var(--signal); }

.fortschritt-zahl {
  flex: 0 0 auto;
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--text-leise);
  white-space: nowrap;
}

/* === Auswertungen === */

/* Die Erfassungsluecke als eigene, auffaellige Kachel: ohne sie sieht eine hohe
   Teilnahmequote gut aus, obwohl die halbe Erfassung fehlt. Sie traegt Farbe und
   Zeichen von "fehlt" -- es ist kein Ausfall, sondern eine Luecke. */
.erfassungsluecke {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rand-leise);
  border-left: 6px solid var(--ampel-fehlt);
  border-radius: var(--radius-gross);
  background: var(--flaeche-karte);
  box-shadow: var(--schatten);
}

.erfassungsluecke[data-status="fehlt"] {
  border-left-style: dashed;
  background: var(--ampel-fehlt-flaeche);
}

.erfassungsluecke[data-status="gruen"] { border-left-color: var(--ampel-gruen); }

.erfassungsluecke-zeichen {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ampel-fehlt);
}

.erfassungsluecke[data-status="fehlt"] .erfassungsluecke-zeichen { border-style: dashed; }
.erfassungsluecke[data-status="gruen"] .erfassungsluecke-zeichen { color: var(--ampel-gruen); }

.erfassungsluecke-text { min-width: 0; }
.erfassungsluecke-text h3 { margin: 0; }
.erfassungsluecke-text p { margin: 0.35rem 0 0; }

.erfassungsluecke-zahl {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ampel-fehlt);
}

.erfassungsluecke[data-status="gruen"] .erfassungsluecke-zahl { color: var(--ampel-gruen); }

.erfassungsluecke-von {
  font-family: var(--schrift-schmal);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* Die Lagezeile im Filterkopf: worueber redet der Bericht gerade? */
.filterkasten-lage {
  margin-left: auto;
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-leise);
}

.filterkasten-lage:empty { display: none; }

.schnellwahl { align-items: center; }

.schnellwahl-marke {
  font-family: var(--schrift-schmal);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.export-leiste { align-items: center; margin-bottom: 0.8rem; }
.export-hinweis { margin: 0; flex: 1 1 18rem; }

/* Sortierbare Spaltenkoepfe: der ganze Kopf ist der Knopf, damit die Flaeche
   gross genug ist. Die Richtung steht zusaetzlich in aria-sort.

   Der Knopf fuellt die Kopfzelle wirklich aus: die negativen Aussenabstaende
   heben den Innenabstand der Zelle (0.62rem / 0.7rem) auf und stehen als
   eigener Innenabstand wieder da. Vorher war die Zelle hoch genug und die
   anklickbare Flaeche darin nur 25 px -- der Knopf sah gross aus und war es
   nicht. min-height haelt die Bedienhoehe auch dann, wenn die Zelle schmaler
   waere. */
.knopf-sortierung {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: calc(100% + 1.4rem);
  min-height: var(--bedienhoehe);
  margin: -0.62rem -0.7rem;
  padding: 0.62rem 0.7rem;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}

.knopf-sortierung:hover:not(:disabled) {
  border: none;
  background: none;
  color: var(--akzent);
}

.sortierzeichen { color: var(--rand); font-size: 0.8em; }

.tabelle-sortierbar th[aria-sort="ascending"] .sortierzeichen,
.tabelle-sortierbar th[aria-sort="descending"] .sortierzeichen { color: var(--signal-text); }

.tabelle-sortierbar th[aria-sort="ascending"],
.tabelle-sortierbar th[aria-sort="descending"] { background: var(--akzent-flaeche); }

.quote-zahl {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.flach-verweis {
  font-family: var(--schrift-schmal);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Der Stand der Pflichtstunden an der Ampelzeile des Helfers. */
.pflicht-stand {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

/* === Anrechnung (Verwaltung, Qualifikationsarten) === */

/* Das Zahlenfeld bleibt schmal: die Pflegetabelle hat seit Phase 3 zehn Spalten
   aus Eingabefeldern, und ein Feld, das seiner langen Spaltenbeschriftung folgt,
   kostet dort 200 px fuer eine zweistellige Zahl -- und schiebt dafuer die
   Handlungen aus der Karte.
   Aus demselben Grund darf die Beschreibung hier schmaler werden als in den drei
   einfachen Katalogen. Der NAME darf es nicht: an ihm erkennt man, welche Zeile
   man gerade aendert, und bei 5,5 rem stand dort "Dekontami". Wird die Tabelle
   dadurch breiter als die Karte, schiebt sie im .tabellen-rahmen waagerecht --
   so wie jede andere Tabelle, und der Scrollbalken sagt es. */
td .feld-pflichtstunden { width: 4.6rem; }

table:has(td .feld-pflichtstunden) td .feld-beschreibung { min-width: 5rem; }

/* Zehn Spalten aus Eingabefeldern und drei Knoepfe: gemessen bei 1440 px ragte
   die Tabelle rund 60 px ueber ihren Rahmen, seit der Name wieder lesbar breit
   ist. Sie wird deshalb hier ueberall ein Stueck enger -- Zellenabstand,
   Zahlenfelder, Kuerzel, Knopfpolster --, bis sie hineinpasst. Jeder einzelne
   Wert ist klein genug, um nicht aufzufallen; zusammen sind es die 60 px.
   Unterhalb von 1440 px schiebt die Tabelle weiterhin im .tabellen-rahmen: das
   ist die Rueckfallebene und kein Fehler. */
table:has(td .feld-pflichtstunden) th,
table:has(td .feld-pflichtstunden) td {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

table:has(td .feld-pflichtstunden) td .feld-kuerzel { width: 4rem; }

table:has(td .feld-pflichtstunden) td .feld-monate,
table:has(td .feld-pflichtstunden) td .feld-warn,
table:has(td .feld-pflichtstunden) td .feld-sortierung { width: 4.1rem; }

table:has(td .feld-pflichtstunden) td .zeilen-handlungen { gap: 0.3rem; }
table:has(td .feld-pflichtstunden) td .zeilen-handlungen button { padding: 0.35rem 0.4rem; }


/* Der offene Bereich gehoert sichtbar zur Zeile darueber: orange Kante links,
   wie bei jeder ausklappbaren Zeile. */
.anrechnung {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rand-leise);
  border-left: 4px solid var(--signal);
  border-radius: var(--radius);
  background: var(--flaeche-zeile);
}

.anrechnung h4 { margin-top: 0; }

.anrechnung-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.4rem 1.2rem;
  margin-bottom: 0.9rem;
}

.anrechnung-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: var(--bedienhoehe);
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--rand-leise);
  border-radius: var(--radius);
  background: var(--flaeche-karte);
}

.anrechnung-zeile .feld-reihe { margin: 0; min-width: 0; }

.anrechnung-faktor {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.anrechnung-faktor label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  margin: 0;
}

.anrechnung-faktor input { width: 4.5rem; }

/* === Telefon === */
@media (max-width: 760px) {
  /* Der Kopfbereich bleibt zweispaltig: Titel links, Handlung rechts. Ueber die
     volle Breite gezogen kostete "Auskunft erzeugen" allein 42 px plus Abstand. */
  .seitenkopf.kompakt { flex-direction: row; align-items: center; }
  .seitenkopf.kompakt .seitenkopf-handlungen { flex: 0 0 auto; }
  .seitenkopf.kompakt .seitenkopf-handlungen > button,
  .seitenkopf.kompakt .seitenkopf-handlungen > .knopf { width: auto; }
  .seitenkopf.kompakt h2 { font-size: 1.2rem; }

  /* Vier Umschalter nebeneinander, mit der Kurzform aus status.js. Zwei mal zwei
     kostete eine ganze Zeile je Helfer -- bei vierzig Helfern rund 1700 px, durch
     die man nur scrollt. Zeichen, Farbe, Randstaerke und die Ansage fuer Vorleser
     unterscheiden die vier weiterhin; die Farbe traegt es nie allein. */
  .anwesenheit-wahl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; }

  .umschalter-text { display: none; }
  .umschalter-kurz {
    display: block;
    font-family: var(--schrift-schmal);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  .umschalter-flaeche {
    min-height: 44px;
    padding: 0.25rem 0.1rem;
    gap: 0.05rem;
  }

  .umschalter-zeichen { font-size: 1.15rem; }

  .anwesenheit-liste { gap: 0.35rem; }

  /* Der Innenabstand oben ist so gross wie der negative Aussenabstand des
     Knopfes -- sonst ragt seine Flaeche ueber den Rand der Zeile hinaus. */
  .anwesenheit-zeile {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
    padding: 0.5rem 0.5rem 0.35rem;
  }

  .anwesenheit-kopf { gap: 0.25rem 0.5rem; }
  .anwesenheit-name { font-size: 0.95rem; }
  .anwesenheit-vermerk { font-size: 0.8rem; }

  /* Suche und Filter untereinander: auf 390 px ist fuer beides nebeneinander
     kein Platz. */
  .anwesenheit-werkzeuge { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .anwesenheit-offen { white-space: normal; }

  /* Die Leiste bleibt am Rand, aber zweizeilig statt dreizeilig: Zaehler oben,
     beide Knoepfe nebeneinander darunter. Dreimal volle Breite verdeckte sonst
     ein Drittel des Bildschirms. */
  .aenderungsleiste {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0.5rem 0.6rem;
  }

  .aenderungsleiste .aenderungszaehler { flex: 1 1 100%; font-size: 0.8rem; }

  .aenderungsleiste .zeilen-handlungen {
    flex: 1 1 100%;
    flex-direction: row;
    gap: 0.4rem;
  }

  .aenderungsleiste button {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 0.4rem;
    font-size: 0.78rem;
    white-space: normal;
    line-height: 1.15;
  }

  /* Diagramme: die Saeulen schrumpfen mit, damit zwoelf Monate ohne Schieben
     passen. Die Beschriftungen duerfen dabei umbrechen -- nebeneinander
     laufende Zahlen ("73,8 %65,8 %") sind schlimmer als zwei Zeilen. */
  .saeulen-diagramm { gap: 0.2rem; }
  .saeule { min-width: 1.8rem; }
  .saeule-spur { height: 5.5rem; }

  .saeule-zahl,
  .saeule-name,
  .saeule-zusatz {
    font-size: 0.58rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
  }

  .erfassungsluecke { padding: 0.8rem 0.85rem; gap: 0.7rem; }
  .erfassungsluecke-zeichen { width: 2.1rem; height: 2.1rem; font-size: 1.15rem; }
  .erfassungsluecke-zahl { font-size: 1.7rem; }

  .filterkasten-lage { flex: 1 1 100%; margin-left: 0; }

  .schnellwahl { flex-direction: row; flex-wrap: wrap; }
  .schnellwahl-marke { flex: 1 1 100%; }
  .schnellwahl button { width: auto; flex: 1 1 8rem; }

  .export-leiste { flex-direction: column; align-items: stretch; }
  .export-hinweis { flex: 0 0 auto; }

  /* In der Kartenansicht steht der Fortschrittsbalken ueber die ganze Breite. */
  .fortschritt { width: 100%; }
  .fortschritt-spur { max-width: none; }

  .anrechnung-liste { grid-template-columns: 1fr; }
  .anrechnung-zeile { flex-wrap: wrap; }

  td .feld-pflichtstunden { width: 100%; }

  /* Die Spaltenkoepfe sind auf dem Telefon ausgeblendet (Kartenliste); die
     Sortierung wandert deshalb nicht mit. Das ist gewollt: auf 390 px sortiert
     man nicht, man sucht. Die Bedienhoehe steht in der Grundregel und braucht
     hier keine zweite Fassung. */
}

/* === Wiki ===
   Phase 4. Ein geschlossener Block am Ende der Datei: alles, was nur das Wiki
   braucht, steht hier, und nichts davon greift in die Regeln darueber ein.

   Zwei Festlegungen tragen den Rest:

   1. **Der Seitenbaum ist die Ortsangabe.** Auf dem Schreibtisch steht er
      staendig links und haftet beim Scrollen. Auf dem Telefon waere er eine
      Bildschirmhoehe Navigation vor jedem Text -- dort ist er eine Schublade
      ueber dem Inhalt, zugeklappt, und die Brotkrume uebernimmt die Ortsangabe.
   2. **Der Vergleich sagt es doppelt.** Hinzugekommen und weggefallen tragen
      Zeichen (+ und -), Farbe UND eine Ansage fuer den Vorleser. Wer keine
      Farben unterscheidet, liest denselben Vergleich. */

.wiki-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.wiki-spalte-inhalt { min-width: 0; }

/* Die Schublade. Auf dem Telefon ein Aufklapper in der Bauart des
   Designsystems, auf dem Schreibtisch eine Karte ohne Zusammenfassung. */
.wiki-schublade {
  border: 1px solid var(--rand-leise);
  border-radius: var(--radius);
  background: var(--flaeche-karte);
  margin: 0;
}

.wiki-schublade > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--bedienhoehe);
  padding: 0 0.85rem;
  cursor: pointer;
  list-style: none;
  color: var(--text-leise);
}

.wiki-schublade > summary::-webkit-details-marker { display: none; }

.wiki-schublade > summary::before {
  content: "\25B8";
  display: inline-block;
  color: var(--signal-text);
  font-size: 0.9rem;
}

.wiki-schublade[open] > summary::before { content: "\25BE"; }

.wiki-schublade > summary:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: -3px;
  box-shadow: 0 0 0 3px var(--fokus-hof);
}

.wiki-schublade-titel {
  font-family: var(--schrift-schmal);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.wiki-schublade-hinweis {
  font-size: 0.82rem;
  color: var(--text-leise);
}

.wiki-schublade[open] > summary { border-bottom: 1px solid var(--rand-leise); }

.wiki-schublade-koerper { padding: 0.85rem; }

.wiki-baum-kopf { margin-bottom: 0.6rem; }
.wiki-baum-kopf .feld { margin-bottom: 0.5rem; }
.wiki-baum-kopf input[type="search"] { width: 100%; }

/* Baumzeile: Schalter, Verweis. Der Schalter ist ein eigener Knopf -- ein
   Verweis, der einmal navigiert und einmal aufklappt, waere mit der Tastatur
   nicht zu bedienen. */
.seitenbaum-zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.15rem;
}

/* Die vorbereitete Regel .seitenbaum a setzt 2,25 rem Zeilenhoehe. Fuer eine
   Navigation, die auf dem Telefon mit dem Daumen bedient wird, ist das zu
   flach: es gilt die Bedienhoehe des Designsystems. */
.seitenbaum-zeile > a {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--bedienhoehe);
  flex-wrap: wrap;
  gap: 0.3rem;
}

.seitenbaum-titel { overflow-wrap: anywhere; }

.seitenbaum-schalter {
  flex: none;
  min-height: var(--bedienhoehe);
  width: 1.9rem;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--text-leise);
  font-size: 0.8rem;
}

.seitenbaum-schalter:hover:not(:disabled) {
  background: var(--flaeche-leise);
  border-color: var(--rand-leise);
  color: var(--text);
}

.seitenbaum-schalter-platz {
  flex: none;
  width: 1.9rem;
}

/* Marken am Baum, am Titel und in Listen: Schloss, Archiv, wiederhergestellt.
   Immer Zeichen und Klartext, nie nur Farbe. */
.wiki-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--schrift-schmal);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.05rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
}

.wiki-marke + .wiki-marke { margin-left: 0.3rem; }

.wiki-marke[data-art="eingeschraenkt"] {
  color: var(--ampel-fehlt);
  background: var(--ampel-fehlt-flaeche);
}

.wiki-marke[data-art="archiviert"] {
  color: var(--ampel-grau);
  background: var(--ampel-grau-flaeche);
  border-style: dashed;
}

.wiki-marke[data-art="wiederhergestellt"],
.wiki-marke[data-art="abgeschnitten"],
.wiki-marke[data-art="titel"] {
  color: var(--signal-text);
  background: var(--signal-flaeche);
  border-color: var(--signal-kontur);
}

.wiki-marke[data-art="aktuell"] {
  color: var(--ampel-gruen);
  background: var(--ampel-gruen-flaeche);
}

.wiki-schloss {
  flex: none;
  display: block;
  overflow: visible;
}

/* Treffer der Suche. Der Ausschnitt ist reiner Text und wird als Text gezeigt --
   er kommt aus dem Quelltext einer Seite und ist kein Markdown. */
.wiki-suche-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--text-leise);
}

.wiki-treffer { list-style: none; margin: 0; padding: 0; }

.wiki-treffer li { border-top: 1px solid var(--rand-leise); }

.wiki-treffer a {
  display: block;
  padding: 0.5rem 0.4rem;
  text-decoration: none;
  color: var(--text);
}

.wiki-treffer a:hover { background: var(--flaeche-leise); }

.wiki-treffer-titel { font-weight: 700; margin-right: 0.35rem; }

.wiki-treffer-pfad {
  display: block;
  font-family: var(--schrift-zahl);
  font-size: 0.74rem;
  color: var(--text-leise);
  overflow-wrap: anywhere;
}

.wiki-treffer-text {
  display: block;
  font-size: 0.85rem;
  color: var(--text-leise);
  margin-top: 0.2rem;
}

/* Brotkrume. Auf dem Telefon die einzige dauerhaft sichtbare Ortsangabe,
   deshalb steht sie ueber und nicht unter dem Titel. */
.wiki-brotkrumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.wiki-brotkrumen a { color: var(--akzent); }

.wiki-brotkrumen [aria-current="page"] {
  color: var(--text-leise);
  font-weight: 700;
}

.wiki-brotkrumen-trenner { color: var(--rand); }

.wiki-titel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Meta-Zeile: welche Fassung, von wem, wann, mit welchem Kommentar. */
.wiki-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--text-leise);
}

.wiki-meta-teil { display: inline-flex; align-items: center; gap: 0.3rem; }

.wiki-meta-teil + .wiki-meta-teil::before {
  content: "\00B7";
  color: var(--rand);
  margin-right: 0.3rem;
}

.wiki-meta-marke {
  font-family: var(--schrift-schmal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wiki-meta-zahl { font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums; }

.wiki-meta-kommentar { font-style: italic; }

/* Das Blatt: der gerenderte Inhalt in einer Karte. */
.wiki-blatt { padding-top: 1.1rem; }

.wiki-blatt .fliesstext { margin: 0 auto 0 0; }

.wiki-alt { border-left: 3px solid var(--ampel-grau); }

.wiki-alt-band { border-left-color: var(--signal-kontur); }

.wiki-rohtext {
  margin: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rand-leise);
  border-radius: var(--radius);
  background: var(--flaeche-leise);
  font-family: var(--schrift-zahl);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wiki-fassung-schalter { margin-bottom: 0.6rem; }

/* Gesetzt oder Quelltext: der gewaehlte Knopf ist an Flaeche UND an der oranenen
   Unterkante zu erkennen, nicht nur an aria-pressed. Gleiche Bauart wie die
   Reiter des Editors. */
.wiki-fassung-schalter button[aria-pressed="true"],
.wiki-schreibreiter button[aria-pressed="true"] {
  border-color: var(--marke);
  background: var(--akzent-flaeche);
  box-shadow: inset 0 -3px 0 var(--signal);
}

/* Inhaltsverzeichnis aus den Ankern der Ueberschriften. */
.wiki-inhaltsverzeichnis ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 1.5rem;
}

.wiki-inhaltsverzeichnis li { break-inside: avoid; }

.wiki-inhaltsverzeichnis li[data-stufe="h3"] { padding-left: 1rem; }

.wiki-inhaltsverzeichnis a {
  display: block;
  min-height: 2rem;
  padding: 0.25rem 0;
  font-size: 0.9rem;
}

/* Unterseiten und Uebersicht. */
.wiki-kinderliste { list-style: none; margin: 0; padding: 0; }

.wiki-kinderliste li { border-top: 1px solid var(--rand-leise); }

.wiki-kinderliste li:first-child { border-top: none; }

.wiki-kinderliste a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--bedienhoehe);
  padding: 0.3rem 0.2rem;
  text-decoration: none;
  color: var(--text);
}

.wiki-kinderliste a:hover { background: var(--flaeche-leise); }

.wiki-kind-titel { font-weight: 600; }

.wiki-uebersicht {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

.wiki-uebersicht-karte { margin-bottom: 0; }

.wiki-uebersicht-karte h3 a { text-decoration: none; }
.wiki-uebersicht-karte h3 a:hover { text-decoration: underline; }

/* === Fliesstext: die Elemente, die renderMarkdown erzeugt ===
   Die Liste im Vertrag ist vollstaendig; mehr kann hier nicht ankommen. */

.fliesstext h1 {
  font-size: 1.5rem;
  margin: 0 0 0.8rem;
  line-height: 1.25;
}

.fliesstext h2,
.fliesstext h3,
.fliesstext h4 { scroll-margin-top: 1rem; }

.fliesstext h2:focus-visible,
.fliesstext h3:focus-visible,
.fliesstext h4:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}

.fliesstext .tabellen-rahmen { margin: 0 0 1rem; }

table.fliesstext-tabelle {
  width: auto;
  min-width: 100%;
  font-size: 0.92rem;
}

table.fliesstext-tabelle th,
table.fliesstext-tabelle td { vertical-align: top; }

table.fliesstext-tabelle td.spalte-mitte,
table.fliesstext-tabelle th.spalte-mitte { text-align: center; }

table.fliesstext-tabelle td.spalte-rechts,
table.fliesstext-tabelle th.spalte-rechts {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Aufgabenliste. Das Ankreuzfeld ist gesperrt: es ist eine Anzeige und kein
   Formular -- abgehakt wird im Quelltext der Seite, und das steht im Verlauf. */
.fliesstext li.aufgabe {
  list-style: none;
  margin-left: -1.4rem;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.fliesstext li.aufgabe > input[type="checkbox"] {
  margin-top: 0.35rem;
  accent-color: var(--ampel-gruen);
}

.fliesstext a { color: var(--akzent); }

/* Ein Verweis nach aussen sagt, dass er hinausfuehrt. Das Zeichen steht als
   Inhalt eines Pseudoelements und nicht im Markup: der Renderer erzeugt es
   nicht, und ein style-Attribut verbietet die CSP ohnehin. */
.fliesstext a.verweis-extern::after {
  content: "\2197";
  font-size: 0.85em;
  margin-left: 0.15em;
  color: var(--text-leise);
}

/* Ein Wiki-Verweis sieht gleich aus, ob die Seite existiert oder nicht. Ein
   Vorab-Check waere ein Abruf je Verweis -- und er verriete, ob es eine Seite
   gibt, die der Leser nicht sehen darf. */
.fliesstext a.verweis-wiki { text-decoration-style: dotted; text-underline-offset: 3px; }

/* === Editor === */

.wiki-editor { margin-bottom: 1.25rem; }

/* Reiter Schreiben / Vorschau. Nur auf schmalen Bildschirmen -- daneben stehen
   beide Flaechen nebeneinander, und ein Reiter waere dann eine Behauptung ueber
   ein Umschalten, das es dort nicht gibt. */
.wiki-schreibreiter {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.wiki-schreibreiter button {
  flex: 1 1 0;
  font-family: var(--schrift-schmal);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Der gewaehlte Reiter steht weiter oben zusammen mit dem Fassungsschalter. */

.wiki-editor-flaechen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.wiki-editor-flaechen[data-ansicht="schreiben"] .wiki-editor-vorschau { display: none; }
.wiki-editor-flaechen[data-ansicht="vorschau"] .wiki-editor-schreiben { display: none; }

.wiki-werkzeuge {
  gap: 0.25rem;
  margin-bottom: 0.4rem;
}

/* Die Werkzeugleiste des Editors ist die eine .werkzeugleiste, die NICHT
   untereinander bricht: neun kurze Knoepfe untereinander waeren auf dem Telefon
   eine Bildschirmhoehe vor dem Textfeld. Sie schiebt stattdessen waagerecht --
   wie die Reiter und die Hauptnavigation. */
.wiki-werkzeuge {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.wiki-werkzeuge .wiki-werkzeug { width: auto; }

/* position: relative ist hier kein Zierrat. Der Knopf traegt einen
   .nur-fuer-vorleser-Text, und der ist position: absolute ohne Versatz. Ohne
   einen positionierten Vorfahren waere sein umgebender Block die Seite selbst:
   die 1-px-Marke landete dann an ihrer statischen Stelle IM Dokument, also weit
   rechts neben der Werkzeugleiste, und die Seite liesse sich am Telefon
   waagerecht schieben -- um Inhalt, den niemand sehen kann. Dasselbe gilt
   unten fuer die Diff-Zeile und die Auswahl im Verlauf. */
.wiki-werkzeug {
  position: relative;
  min-width: var(--bedienhoehe);
  padding: 0.3rem 0.4rem;
  font-family: var(--schrift-zahl);
  font-size: 0.85rem;
}

.wiki-werkzeug-fett { font-weight: 800; }
.wiki-werkzeug-kursiv { font-style: italic; }

.wiki-quelltext {
  width: 100%;
  min-height: 24rem;
  font-family: var(--schrift-zahl);
  font-size: 0.92rem;
  line-height: 1.55;
  background: var(--flaeche-zeile);
  tab-size: 2;
}

.wiki-vorschau-marke {
  font-family: var(--schrift-schmal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin: 0 0 0.4rem;
}

.wiki-editor-vorschau {
  min-width: 0;
  border: 1px solid var(--rand-leise);
  border-radius: var(--radius);
  background: var(--flaeche-karte);
  padding: 0.8rem 0.9rem;
}

.wiki-editor-vorschau .fliesstext { max-width: none; }

.wiki-hilfe-tabelle { min-width: 24rem; }
.wiki-hilfe-tabelle th code { white-space: nowrap; }

.wiki-entwurf-band { margin-bottom: 1rem; }

.wiki-rollen-kennungen {
  margin: 0.2rem 0 0.6rem;
  padding-left: 1.2rem;
  font-size: 0.85rem;
}

.wiki-rollenwahl { margin-bottom: 0.8rem; }

/* Der Konfliktfall. Die eigene Fassung bleibt im Textfeld darunter stehen --
   diese Karte zeigt nur, was inzwischen gespeichert wurde. */
.wiki-konflikt { border-left: 3px solid var(--signal); }

.wiki-konflikt-gegenueber { margin: 0.8rem 0; }

.wiki-konflikt-spalte h4 { margin: 0 0 0.4rem; }

/* === Verlauf und Vergleich === */

.wiki-vergleich-leiste { margin-bottom: 0.6rem; }

/* Der Verweis auf eine Fassung bricht nicht um: ueber drei Zeilen verteilt
   macht er jede Tabellenzeile dreimal so hoch. Die Nummer steht in der Zeile
   daneben und fuer den Vorleser im Verweis selbst. Er traegt .nur-fuer-vorleser
   und braucht deshalb position: relative (siehe oben). */
.wiki-fassung-verweis {
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.wiki-wahl {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--bedienhoehe);
}

.wiki-wahl input[type="checkbox"] { width: 1.3rem; height: 1.3rem; }

.wiki-vergleich-kopfzeilen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.wiki-vergleich-fassung {
  border: 1px solid var(--rand-leise);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
}

.wiki-vergleich-fassung h3 { margin: 0 0 0.3rem; }

.wiki-vergleich-fassung[data-art="weg"] { border-left-color: var(--ampel-rot); }
.wiki-vergleich-fassung[data-art="hinzu"] { border-left-color: var(--ampel-gruen); }

.wiki-vergleich-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
}

.wiki-diff-legende {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
}

.wiki-diff-legende[data-art="weg"] { color: var(--ampel-rot); }
.wiki-diff-legende[data-art="hinzu"] { color: var(--ampel-gruen); }

.wiki-diff {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rand-leise);
  border-radius: var(--radius);
  font-family: var(--schrift-zahl);
  font-size: 0.85rem;
  line-height: 1.5;
  min-width: 100%;
  width: max-content;
}

.wiki-diff-zeile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  min-height: 1.5em;
  padding: 0.05rem 0.5rem 0.05rem 0;
  border-left: 3px solid transparent;
}

.wiki-diff-nummer {
  flex: none;
  width: 3ch;
  text-align: right;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
  -webkit-user-select: none;
  user-select: none;
}

.wiki-diff-zeichen {
  flex: none;
  width: 1.2ch;
  font-weight: 700;
  -webkit-user-select: none;
  user-select: none;
}

.wiki-diff-text { white-space: pre-wrap; overflow-wrap: anywhere; }

.wiki-diff-zeile[data-art="gleich"] { color: var(--text-leise); }

.wiki-diff-zeile[data-art="hinzu"] {
  background: var(--ampel-gruen-flaeche);
  border-left-color: var(--ampel-gruen);
}

.wiki-diff-zeile[data-art="hinzu"] .wiki-diff-zeichen { color: var(--ampel-gruen); }

.wiki-diff-zeile[data-art="weg"] {
  background: var(--ampel-rot-flaeche);
  border-left-color: var(--ampel-rot);
}

.wiki-diff-zeile[data-art="weg"] .wiki-diff-zeichen { color: var(--ampel-rot); }

.wiki-diff-zeile[data-art="luecke"] {
  background: var(--flaeche-leise);
  color: var(--text-leise);
  font-family: var(--schrift);
  font-size: 0.78rem;
  justify-content: flex-start;
  padding-left: 0.5rem;
}

.wiki-vergleich-zugross { margin-bottom: 1rem; }

/* === Schreibtisch: zwei Spalten === */
@media (min-width: 1000px) {
  .wiki-layout { grid-template-columns: 19.5rem minmax(0, 1fr); gap: 1.5rem; }

  /* Der Baum haftet beim Scrollen und bekommt einen eigenen Balken: eine lange
     Seite soll nicht dazu fuehren, dass die Navigation oben aus dem Bild
     laeuft. */
  .wiki-spalte-baum {
    position: sticky;
    top: 0.75rem;
    max-height: calc(100vh - 1.5rem);
    overflow: auto;
  }

  /* Ohne Zusammenfassung: der Baum steht hier immer offen, und ein Knopf, der
     ihn zuklappt, waere ein Zustand, den niemand braucht. */
  .wiki-schublade > summary { display: none; }
}

/* Vorschau neben dem Quelltext. Erst ab 1100 px sind zwei Spalten breit genug,
   dass in beiden noch Zeilen und nicht Silben stehen. */
@media (min-width: 1100px) {
  .wiki-editor-flaechen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wiki-editor-flaechen[data-ansicht="schreiben"] .wiki-editor-vorschau,
  .wiki-editor-flaechen[data-ansicht="vorschau"] .wiki-editor-schreiben { display: block; }
  .wiki-schreibreiter { display: none; }
  .wiki-quelltext { min-height: 32rem; }
}

/* === Telefon === */
@media (max-width: 760px) {
  .wiki-schublade-hinweis { display: none; }

  /* Das Textfeld fuellt den Bildschirm so weit aus, wie es geht, ohne die
     Werkzeugleiste darueber zu verdraengen. */
  .wiki-quelltext { min-height: 55vh; font-size: 1rem; }

  .wiki-werkzeuge {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.2rem;
  }

  .wiki-werkzeuge .wiki-werkzeug { flex: none; width: auto; }

  .wiki-inhaltsverzeichnis ul { columns: 1; }

  /* Die Kurzhilfe steht am Telefon untereinander statt nebeneinander: Marke,
     darunter die Erklaerung. Zwei Spalten waeren auf 390 px entweder
     abgeschnitten (und muessten geschoben werden, waehrend man liest) oder
     mitten im Wort umgebrochen. Dieselbe Bewegung wie bei table.umbrechend,
     nur ohne Spaltenbeschriftung -- die erste Zelle IST die Beschriftung. */
  .wiki-hilfe-tabelle { min-width: 0; }

  .wiki-hilfe-tabelle,
  .wiki-hilfe-tabelle tbody,
  .wiki-hilfe-tabelle tr,
  .wiki-hilfe-tabelle th,
  .wiki-hilfe-tabelle td {
    display: block;
    width: auto;
  }

  .wiki-hilfe-tabelle tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rand-leise);
  }

  .wiki-hilfe-tabelle th {
    border: none;
    padding: 0 0 0.15rem;
    text-transform: none;
    letter-spacing: 0;
  }

  .wiki-hilfe-tabelle th code { white-space: normal; overflow-wrap: break-word; }

  .wiki-hilfe-tabelle td { border: none; padding: 0; }

  .wiki-uebersicht { grid-template-columns: minmax(0, 1fr); }

  .wiki-brotkrumen { font-size: 0.8rem; }

  /* Der Stand des Entwurfs steht unter den Knoepfen und nicht rechts daneben --
     die Leiste ist hier schon eine Spalte (Regel des Designsystems). */
  .wiki-editor-fuss .werkzeugleiste-rechts { text-align: center; }

  .wiki-diff { font-size: 0.8rem; }
  .wiki-diff-nummer { width: 2.5ch; }

  /* Die Handlungen im Seitenkopf stehen am Telefon untereinander und sind dann
     ueber die volle Breite bedienbar. */
  .seitenkopf-handlungen .knopf { flex: 1 1 auto; text-align: center; }
}