/* ═══════════════════════════════════════════════════════════════════
   postimago — das gesamte Design, eine Datei.

   Derselbe achtteilige Aufbau wie quiet.css, und die Reihenfolge ist
   funktional, nicht kosmetisch: die @font-face-Regeln zuerst, damit
   der Browser die Schriftanforderung schon kennt, bevor die erste
   Regel sie braucht; danach die Tokens, weil jede folgende Regel sie
   liest; die Umfrage nach den Komponenten, weil .uhr und .vorschau
   auf .knopf und .feld aufsetzen und nichts von dem umgekehrt; die
   Breakpoints am Ende, weil sie --rand-x ueberschreiben und dafuer
   spaeter in der Kaskade stehen muessen.

   (1) @font-face  (2) Tokens  (3) Grundlage  (4) Komponenten
   (5) Umfrage  (6) Breakpoints  (7) Bewegung  (8) Druck

   Keine Farbe ausserhalb des Token-Blocks. Kein Gewicht ausser 400,
   600, 700 – die uebrigen Schnitte existieren als Datei nicht und
   fielen lautlos auf 400 zurueck.

   Der Unterschied zu quiet.css ist EINE Zutat und ein Massstab: der
   Token --ui-eingabe und die Trefferflaechen. quiet-pages ist eine
   Leseseite am Schreibtisch, postimago ein Formular im Gehen, unter
   Zeitdruck, mit einer Hand. Die Masse aus schreibtisch.css (13px
   Schrift, 27px hohe Zeilen) sind deshalb NICHT uebernommen worden,
   obwohl sie die einzige Formularvorlage des Hausstils sind.
   ═══════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------------
   Iosevka Aile — SIL OFL 1.1, © 2015–2026 Renzhi Li (Belleve Invis).
   Lizenz: static/fonts/LICENSE-Iosevka.txt, verlinkt auf /hinweise/.
   Dateien unveraendert aus quiet-pages uebernommen — dasselbe Subset,
   dieselben Metriken, dieselben entfernten Code-Ligaturen.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Iosevka Aile";
  src: url("../fonts/IosevkaAile-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Iosevka Aile";
  src: url("../fonts/IosevkaAile-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Iosevka Aile";
  src: url("../fonts/IosevkaAile-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Iosevka Aile";
  src: url("../fonts/IosevkaAile-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Iosevka Aile";
  src: url("../fonts/IosevkaAile-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Kein local("Iosevka Aile") im src – dieselbe Begruendung wie in
   quiet.css: die installierte Vollversion bringt "calt" mit, die
   Code-Ligatur-Maschine, und der Betreiber saehe "->" als Pfeil,
   jeder Besucher den normalen Text.

   Der Ersatzschnitt darunter nennt nur Systemschriften und darf
   local() deshalb benutzen. Er ist keine Zierde: bei font-display:
   swap traegt der erste Satz die Plattformschrift, und ohne die
   Overrides liegt die Grundlinie vor und nach dem Umschalten anders.
   Auf einem Telefon im Mobilfunk ist dieser erste Satz der Regelfall
   und nicht der Ausnahmefall.                                       */
@font-face {
  font-family: "Iosevka Aile Ersatz";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 100%;
  ascent-override: 96.5%;
  descent-override: 28.5%;
  line-gap-override: 0%;
}

/* ═══════════════════════════════════════════════════════════════════
   (2) Tokens. Vier Einheitenregeln, die nie gebrochen werden:
   Fliesstext in em, Chrome in px; vertikale Abstaende immer
   calc(var(--rhythmus) * n); die Lesespalte in em, nie in ch; und
   keine Variable, die nicht benutzt wird.

   Der Block ist WOERTLICH aus quiet.css uebernommen, einschliesslich
   der Tokens, die postimago nicht anfasst. Das ist eine Entscheidung
   gegen die vierte Einheitenregel und fuer die Vergleichbarkeit: die
   beiden Dateien sollen nebeneinander diffbar bleiben, damit eine
   spaetere Korrektur an einem Kontrastwert in beiden Projekten
   dieselbe Zeile trifft. Ein zusammengestrichener Block haette diese
   Eigenschaft nach der ersten Aenderung verloren.

   Genau EINE Zutat kommt hinzu: --ui-eingabe.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Schrift ─────────────────────────────────────────────────── */
  --schrift-text: "Iosevka Aile", "Iosevka Aile Ersatz", ui-sans-serif, system-ui,
                  -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                  Consolas, monospace;          /* nur code/pre */
  --gewicht-normal: 400;
  --gewicht-halbfett: 600;                       /* strong, h2–h6, Mikrolabel */
  --gewicht-fett: 700;                           /* nur .titel */
  --zeilen-normal: 1.5;
  --zeilen-eng: 1.3;                             /* Pflicht bei Box-Zeichen */

  /* Chrome-Grade, absolut (Obsidians --font-ui-*) */
  --ui-winzig: 12px;
  --ui-klein: 13px;
  --ui-mittel: 15px;
  /* Die eine Zutat gegenueber quiet.css. NIE kleiner: iOS Safari zoomt
     sonst beim Fokus hinein und zoomt nicht zurueck. */
  --ui-eingabe: 16px;

  /* ─── Raster ──────────────────────────────────────────────────── */
  --rhythmus: 1.5rem;                            /* 24px, an rem gebunden */
  --satzmass: 40em;                              /* 75 Zeichen, 640px bei 16px */
  --satzmass-register: 52em;                     /* 832px bei 16px */
  --spur: 10px;                                  /* Spalte des Jahrgangszeichens */
  --sp-nummer: 32px;                             /* 4 Ziffern à 0,6em @13px = 31,2px */
  --sp-luecke: 8px;
  --sp-etikett: 9em;                             /* Labelspalte im Essay-Kopf */
  --kopfhoehe: 40px;                             /* Obsidians --header-height */
  --rand-x: 20px;                                /* wird ab 40em/48em erhöht */
  --radius-s: 4px;
  --tempo: 140ms;                                /* nur für color/opacity */

  font-variant-numeric: lining-nums tabular-nums;
}

/* ─── Farbe: dunkel, und nur dunkel ───────────────────────────────
   Es gibt keine zweite Palette und keinen prefers-color-scheme-Zweig für
   den Bildschirm. Papier ist die Ausnahme: der Druckblock am Ende der
   Datei setzt alles auf Schwarz auf Weiß zurück.

   Alle Zahlen sind nachgerechnet (WCAG 2.x, sRGB), nicht geschätzt. Die
   Mischungen stehen bewusst in srgb und nicht in oklch: nur so ist die
   komponierte Fläche von Hand nachprüfbar.
   ─────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --grund:         #0e0e10;
  --flaeche-alt:   #16161a;   /* Eingabefelder — 1,1:1 zum Grund, nur eine Andeutung */
  --rahmen:        #2a2a30;   /* 1,35:1 — Dekor, trägt nie Information */
  --leitlinie:     color-mix(in srgb, #ffffff 9%, transparent);
  --flaeche-hover: color-mix(in srgb, #ffffff 6.5%, transparent);   /* = #1e1e20 */

  --text-normal: #e3e3e0;   /* 15,00:1 — Fließtext, Titel, Eingaben */
  --text-muted:  #adaeb3;   /*  8,71:1 — alles Chrome; Pflicht auf Hover-Flächen (dort 7,52:1) */
  --text-dim:    #8b8c93;   /*  5,76:1 — Weiterverweis, Fußnoten */
  --text-faint:  #5a5b62;   /*  2,85:1 — NUR Ornament, immer mit aria-hidden */
  --fokus:       #9a9ba2;   /*  6,96:1 zum Grund, 6,01:1 zur Hover-Fläche */

  --akzent:         #e9a53c;   /*  9,10:1 zum Grund, 7,58:1 auf der Pille */
  --akzent-hover:   #f7c56f;   /* 12,09:1 — HELLT auf, senkt den Kontrast also nie */
  --akzent-flaeche: #e9a53c;   /* Basis der Mischungen und der Zitatkante */
  --pille:       color-mix(in srgb, var(--akzent-flaeche) 12%, transparent);
  --pille-stark: color-mix(in srgb, var(--akzent-flaeche) 22%, transparent);
  --markierung:  color-mix(in srgb, var(--akzent-flaeche) 28%, transparent);

  /* Dringlichkeit — die zwei Töne der Uhr. Sie gehören ausdrücklich
     NICHT zum Akzent: Bernstein trägt die Knöpfe und die Verweise, also
     alles Bedienbare, und eine Farbe, die zugleich „hier tippen" und
     „die Zeit läuft" sagt, sagt keines von beidem mehr. Der Balken war
     vorher akzentfarben und genau deshalb unscheinbar.

     Beides ist Rot von der ersten Sekunde an, nie Grün und nie Gelb.
     Eine Ampel über die Laufzeit wäre der naheliegende Entwurf und ist
     ausdrücklich nicht gewollt: Grün am Anfang hieße „noch viel Zeit",
     und die Umfrage hat zwei Minuten — es ist nie viel Zeit.

     Beide Zahlen sind gegen --grund (#0e0e10) nachgerechnet und nicht
     geschätzt. Der helle Ton HELLT auf wie --akzent-hover, er dunkelt
     nicht nach: so kann der Kontrast bei der Betonung nie unter den
     Ausgangswert fallen, und das ist die Regel, die quiet.css für jede
     Hervorhebung anwendet. */
  --dringend:      #ef5350;   /*  5,53:1 — der Balken, ab der ersten Sekunde */
  --dringend-hell: #ff8f82;   /*  8,73:1 — die Zahl in den letzten 30 Sekunden */

  /* Alle Werte gegen --flaeche-alt gerechnet, alle über 7:1. */
  --syn-rot:     #e88b8b;   /* 7,30:1 */
  --syn-orange:  #dda05a;   /* 7,95:1 */
  --syn-gelb:    #cfc07a;   /* 9,86:1 */
  --syn-gruen:   #8cc79a;   /* 9,24:1 */
  --syn-cyan:    #7fc3c6;   /* 9,04:1 */
  --syn-blau:    #8fb4e0;   /* 8,40:1 */
  --syn-violett: #b3a2e0;   /* 7,87:1 */
  --syn-pink:    #d9a0bd;   /* 8,35:1 */
}

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

html {
  scrollbar-gutter: stable;          /* kein Layoutsprung beim Scrollbalken */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* svh statt vh: auf Mobilgeraeten wuerde vh die Fusszeile unter die
     Browserleiste schieben. Der vh-Wert davor ist der Rueckfall. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--grund);
  color: var(--text-normal);
  font-family: var(--schrift-text);
  font-size: 16px;
  font-weight: var(--gewicht-normal);
  line-height: var(--zeilen-normal);
  overflow-wrap: break-word;
  hyphens: auto;                     /* braucht lang="de" am <html> */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background-color: var(--markierung); }   /* bewusst ohne color */

/* ═══ Komponenten ═══════════════════════════════════════════════════
   Alles, was auf mehr als einer Seite vorkommt. Die Umfragestuecke –
   Uhr, Vorschau, Fortschrittsknopf – stehen im Abschnitt darunter.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Sprungmarke ─────────────────────────────────────────────────
   Erster Tabstop jeder Seite. Auf den Schrittseiten steht die Uhr vor
   dem Inhalt, und die ist mit der Tastatur kein Ziel, aber sie steht
   im Lesefluss. Bewusst ohne Bedingung: ein konditionaler Skip-Link
   ist eine Fehlerquelle ohne Gegenwert.                             */
.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;                       /* ueber der Uhr, die auf 10 liegt */
  padding: var(--sp-luecke) var(--rand-x);
  background-color: var(--grund);
  color: var(--text-normal);
  font-size: var(--ui-klein);
  text-decoration: underline;
}
.sprung:focus-visible {
  left: 0;
  outline: 2px solid var(--fokus);
  outline-offset: -2px;
}

/* ─── Huelle: Polster am Blatt, Mass an der Spalte ────────────────
   .spalte aendert NIE ihren Schriftgrad – sonst laeuft ein Band mit
   eigener font-size aus der Achse (--satzmass ist in em).           */
.blatt {
  padding: calc(var(--rhythmus) * 1.5) var(--rand-x) 0;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.spalte {
  /* width: 100% ist Pflicht, weil .blatt eine Spalten-Flexbox ist: ein
     Flex-Element mit "margin-inline: auto" streckt sich in der
     Querachse NICHT, sondern schrumpft auf seinen Inhalt. */
  width: 100%;
  max-width: var(--satzmass);
  margin-inline: auto;
  padding-block-end: calc(var(--rhythmus) * 2);
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.spalte > main { flex: 1 0 auto; }
.spalte > :first-child { margin-block-start: 0; }

/* ─── Titel und Mikrolabel ───────────────────────────────────── */
.titel {
  margin: 0 0 .5em;
  font-size: 1.618em;
  font-weight: var(--gewicht-fett);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--text-normal);
  text-wrap: balance;
}
/* Aile hat kein smcp – echte Versalien plus Sperrung, nie small-caps.
   1.5x statt der 3x aus quiet.css: dort gliedert die Rubrik eine lange
   Registerseite, hier steht ueber jedem Schritt genau eine, und 72px
   Vorlauf haetten auf 375px die Frage unter die Faltung geschoben. */
.rubrik {
  margin: calc(var(--rhythmus) * 1.5) 0 calc(var(--rhythmus) * .5);
  font-size: var(--ui-winzig);
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeilen-eng);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ─── Fliesstext ──────────────────────────────────────────────────
   Gebraucht auf /hinweise/, /danke/, /widerruf/ und den Fehlerseiten.
   Reduziert auf das, was dort wirklich vorkommt: Absaetze, zwei
   Ueberschriftenebenen, Listen, Links. Code, Tabellen, Fussnoten und
   Zitate aus quiet.css fehlen, weil diese Seiten sie nicht haben –
   und eine ungenutzte Regel ist eine Regel, die niemand nachprueft. */
.text {
  margin-block-start: calc(var(--rhythmus) * 1.5);
  font-size: 1em;
  line-height: var(--zeilen-normal);
  color: var(--text-normal);
}
.text > :first-child { margin-block-start: 0; }
.text > :last-child  { margin-block-end: 0; }
.text :is(p, ul, ol, dl) { margin-block: .85rem; }
.text :is(h2, h3) { margin-block: .85rem; color: inherit; text-wrap: balance; }
.text :is(p, ul, ol, dl) + :is(h2, h3) { margin-block-start: 2rem; }
.text h2 { font-size: 1.462em; font-weight: var(--gewicht-halbfett);
           line-height: 1.2; letter-spacing: -.011em; }
.text h3 { font-size: 1.318em; font-weight: var(--gewicht-halbfett);
           line-height: 1.3; letter-spacing: -.008em; }
.text :is(ul, ol) { padding-inline-start: 0; }
.text li { padding-block: .075em; margin-inline-start: 3ch; }
.text ul li::marker { color: var(--text-faint); }
.text ol li::marker { color: var(--text-muted); }
.text dt { color: var(--text-muted); }
.text dd { margin-inline-start: 3ch; }
/* Immer unterstrichen (nicht erst im Hover). Uebergang nur auf color,
   140ms – Flaechen werden nie animiert. */
.text a {
  color: var(--akzent);
  font-weight: var(--gewicht-normal);
  text-decoration-line: underline;
  text-decoration-thickness: auto;
  text-underline-offset: .15em;
  transition: color var(--tempo) ease-in-out;
}
@media (hover: hover) { .text a:hover { color: var(--akzent-hover); } }

/* ─── Knoepfe ─────────────────────────────────────────────────────
   56px und volle Spaltenbreite, nicht die 27px aus schreibtisch.css.
   SC 2.5.8 verlangt 24px, SC 2.5.5 verlangt 44px, Apple empfiehlt
   44pt – 56px, weil hier Zeitdruck, eine Hand in Bewegung und ein
   laufender Daumen zusammenkommen. Der Knopf ist ausserdem das
   einzige Ziel der Seite; Platz zu sparen hat hier keinen Gewinner.

   display: flex und nicht inline-block: nur damit zentriert der Text
   bei min-height zuverlaessig, ohne dass line-height die Hoehe
   mitbestimmt und bei zweizeiliger Beschriftung ueberlaeuft.        */
.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin-block-start: calc(var(--rhythmus) * .5);   /* 12px zwischen gestapelten Knoepfen */
  padding: calc(var(--rhythmus) * .5) var(--rand-x);
  border: 1px solid var(--akzent);
  border-radius: var(--radius-s);
  background-color: var(--pille);
  color: var(--akzent);
  font-family: inherit;
  font-size: var(--ui-eingabe);
  line-height: var(--zeilen-eng);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* Das graue Aufblitzen beim Tippen ist auf dieser Seite doppelt
     falsch: es ist Bewegung, und es kommt VOR der eigentlichen
     Reaktion, sieht also wie eine zweite Rueckmeldung aus. */
  -webkit-tap-highlight-color: transparent;
}
.knopf--still {
  background-color: transparent;
  color: var(--text-muted);
  border-color: var(--rahmen);
}
@media (hover: hover) {
  .knopf:hover { background-color: var(--pille-stark); }
  .knopf--still:hover { color: var(--text-normal); }
}
/* Der Fokusring muss am Label erscheinen, nicht am versteckten
   Datei-Input darin — :focus-within leistet das ohne :has(). */
.knopf:focus-within { outline: 2px solid var(--fokus); outline-offset: 2px; }
.knopf[disabled] { cursor: default; }

/* Sekundaere Textlinks: 44px nach SC 2.5.5, erzeugt ueber die eigene
   Hoehe und nicht ueber Polster plus negatives Margin wie in
   quiet.css:950. Der Unterschied ist Absicht: dort sitzt der Link in
   einer Fusszeile und darf das Layout nicht anfassen, hier steht er
   allein unter einem Formular und soll Platz einnehmen.             */
.nebenlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
  font-size: var(--ui-klein);
  text-decoration-line: underline;
  text-underline-offset: .15em;
  transition: color var(--tempo) ease-in-out;
}
@media (hover: hover) { .nebenlink:hover { color: var(--text-normal); } }

/* ─── Felder ──────────────────────────────────────────────────────
   font-size kommt aus --ui-eingabe und wird NIE mit var(--ui-klein)
   ueberschrieben, auch nicht fuer ein schmales Feld: unter 16px zoomt
   iOS Safari beim Fokus hinein und findet von allein nicht zurueck.
   Danach ist die sticky Uhr am oberen Rand ausserhalb des sichtbaren
   Ausschnitts, und der Zeitdruck ist unsichtbar geworden.           */
.feldgruppe {
  display: flex;
  flex-direction: column;
  gap: calc(var(--rhythmus) * .25);
  margin-block-start: calc(var(--rhythmus) * 1.5);
}
.feldgruppe > label {
  color: var(--text-muted);
  font-size: var(--ui-klein);
  line-height: var(--zeilen-eng);
}
.feld {
  width: 100%;
  min-height: 56px;
  padding: calc(var(--rhythmus) * .5) 12px;
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-s);
  background-color: var(--flaeche-alt);
  color: var(--text-normal);
  font-family: inherit;
  font-size: var(--ui-eingabe);
  line-height: var(--zeilen-normal);
}
/* 7x Rhythmus = 168px, also etwa vier Zeilen plus Polster. Kein
   field-sizing: content – ein mitwachsendes Feld schoebe den Knopf
   beim Tippen nach unten, und der Daumen liegt schon dort.          */
.feld--mehrzeilig {
  min-height: calc(var(--rhythmus) * 7);
  resize: vertical;
}
.feld:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.feld::placeholder { color: var(--text-dim); }

/* Ja/Nein als ganze Zeile. Der native Radioknopf ist auf dem Telefon
   etwa 13px gross und damit unter jeder Trefferflaechen-Vorgabe; das
   Kaestchen bleibt deshalb vorhanden und fokussierbar, aber die ZEILE
   ist das Ziel. NICHT display:none — dann faellt der Knopf aus der
   Tab-Reihenfolge und die Gruppe ist mit der Tastatur unerreichbar.  */
.wahl {
  position: relative;
  display: block;
  margin-block-start: calc(var(--rhythmus) * .5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wahl__eingabe {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Die sichtbare Zeile ist das Geschwister des Kaestchens und nicht
   dessen Elternteil, obwohl .wahl:has(:checked) kuerzer waere: das
   Geschwisterpaar ist die Technik aus schreibtisch.css:80-86 und
   kommt ohne :has() aus. Faellt :has() auf einem aelteren Geraet aus,
   bliebe die Auswahl sonst voellig unsichtbar — das Kaestchen ist ja
   weggeclippt. Ein Ausfall, der das Formular unbedienbar macht, ist
   die paar Zeichen nicht wert. */
.wahl__text {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: calc(var(--rhythmus) * .5) var(--rand-x);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-s);
  background-color: var(--flaeche-alt);
  color: var(--text-normal);
  font-size: var(--ui-eingabe);
  line-height: var(--zeilen-eng);
}
/* Die Flaeche traegt die Auswahl, der Rahmen verstaerkt sie: Farbe ist
   nie das einzige Merkmal (SC 1.4.1). */
.wahl__eingabe:checked + .wahl__text {
  border-color: var(--akzent);
  background-color: var(--pille);
  color: var(--akzent);
}
/* Der Fokusring muss an der Zeile erscheinen, nicht am weggeclippten
   Kaestchen — dort waere er zwei Pixel gross und unauffindbar. */
.wahl__eingabe:focus-visible + .wahl__text {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

/* ─── Hinweiszeilen ───────────────────────────────────────────────
   Leer bleibt die Zeile unsichtbar UND ohne Phantomabstand. Das ist
   Pflicht und nicht Feinschliff: foto.js leert sie bei jedem neuen
   Versuch, und ein stehengebliebener Abstand saehe aus, als fehlte
   dort etwas.                                                       */
.hinweis {
  margin: var(--rhythmus) 0 0;
  color: var(--text-muted);
  font-size: var(--ui-klein);
  line-height: 1.4;
  text-wrap: pretty;
}
.hinweis:empty { display: none; }
/* Die Akzentfarbe der Seite, kein neues Rot: ein auffaelliges
   Aufnahmedatum ist kein Fehler des Besuchers, und ein fehl-
   geschlagener Upload ist kein Fehler, den er begangen hat. */
.hinweis--warnung { color: var(--akzent); }

/* Die Dauer im Fliesstext und im Kasten der Startseite. Bernstein und
   NICHT --dringend: Rot gehoert der laufenden Uhr, und auf der
   Startseite laeuft keine. Stuende die Ankuendigung schon in der Farbe
   der Dringlichkeit, haette die Uhr spaeter nichts mehr zuzulegen.

   Zusaetzlich halbfett und nicht nur farbig: Farbe allein darf keine
   Information tragen (WCAG 2.2, SC 1.4.1). Wer die Seite in Graustufen
   oder mit eigener Farbgebung sieht, erkennt die Hervorhebung am
   Gewicht. Das Element ist ohnehin ein <strong>, die Regel setzt nur
   den Grad dieses Projekts statt des Browservorgabewerts. */
.zeitangabe {
  color: var(--akzent);
  font-weight: var(--gewicht-halbfett);
}

/* ─── Trenner und Fusszeile ──────────────────────────────────── */
.trenner {
  border: 0;
  border-block-start: 1px solid var(--rahmen);
  margin: calc(var(--rhythmus) * 2) 0 0;
}
.leiste {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-luecke);
  margin-block-start: var(--rhythmus);
  font-size: var(--ui-winzig);
  line-height: var(--zeilen-eng);
  color: var(--text-muted);
}
/* 24px Trefferflaeche nach SC 2.5.8, erzeugt ueber die eigene Hoehe und
   NICHT ueber Polster plus negativen Rand wie quiet.css:950: die
   Fusszeile richtet ihre Kinder an der Grundlinie aus, und der
   Grundlinienabstand eines Flex-Elements wird ab seiner Rand-Kante
   gemessen. Ein negativer Rand verschoebe den Link also gegen die
   Zeile, in der er steht. Die paar Pixel, die die Zeile dadurch hoeher
   wird, kosten nichts — sie ist das letzte Element der Seite.

   Die Flaeche ist hier noetiger als frueher: bis zum Umbau stand ein
   einziger Link in der Zeile, jetzt stehen fuer Personal zwei
   nebeneinander, und bei 12px Schrift sind zwei 16px hohe Ziele auf
   einem Telefon nicht sicher zu treffen. */
.leiste a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) { .leiste a:hover { color: var(--text-normal); } }
/* Die Quellenangabe links, die Fassung rechts — space-between an
   .leiste trennt genau ZWEI Kinder, und ohne diese Klammer waere die
   Fusszeile je nach is_staff zwei-, drei- oder vierteilig und die
   Fassung mal rechts, mal in der Mitte.

   Innen zentriert und nicht an der Grundlinie: die 24px hohen Links
   stehen neben 16px hohen Textstuecken, und zentriert ist das eine
   Zeile statt dreier Hoehen uebereinander. */
.leiste__quelle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-luecke);
}
/* --text-faint ist die Stufe fuer Ornament und traegt hier nichts:
   der Punkt ist aria-hidden, der Abstand steht schon im gap. */
.leiste__punkt { color: var(--text-faint); }
/* Die Fassung steht eine Stufe leiser als der Rest der Zeile. Sie ist
   kein Weiterverweis und kein Ziel, sondern eine Auskunft fuer den
   einen Fall, in dem jemand fragt "welcher Stand laeuft da?" — der
   vollstaendige Git-Stand haengt als title daran und nicht als Text,
   denn zwoelf Hex-Zeichen neben dem Hinweislink waeren Rauschen.
   tabular-nums, damit die Zahl bei einem Deployment nicht die Breite
   der Zeile aendert. */
.leiste__fassung {
  color: var(--text-dim);
  letter-spacing: .08em;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ─── Unsichtbar, aber vorlesbar ──────────────────────────────────
   Traegt die aria-live-Region der Uhr. clip-path statt display:none,
   weil ein display:none-Knoten von Screenreadern nicht beobachtet
   wird und die vier Ansagen dann nie ankaemen.                      */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ─── Fokusring: neutral grau, nie Akzent ─────────────────────────
   Der Akzent traegt hier schon den knappen Timer und den Hauptknopf;
   ein akzentfarbener Fokusring waere das dritte Signal in derselben
   Farbe. base-60 liefert 6,96:1 und bleibt unbunt.                  */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ═══ Umfrage ═══════════════════════════════════════════════════════
   Die drei Stuecke, die es nur hier gibt: die Uhr, die sprungfreie
   Vorschau und der Knopf, der sein eigener Fortschrittsbalken ist.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Die Uhr ─────────────────────────────────────────────────────
   Sie steht als direktes Kind von <body> VOR .blatt und klebt am
   oberen Rand. Der Widerspruch "minimalistisch aber praesent" ist
   ueber Position und Konstanz geloest, nicht ueber Groesse oder
   Farbe: die Uhr ist das einzige Element der Seite, das sich
   ueberhaupt bewegt.

   env(safe-area-inset-top) als Polster und nicht als Rand: auf einem
   iPhone im Querformat liegt der Balken sonst unter der Notch, und
   der Balken ist genau das Stueck, das immer sichtbar sein muss.    */
.uhr {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rhythmus);
  min-height: 44px;
  padding-inline: var(--rand-x);
  padding-block-start: env(safe-area-inset-top, 0px);
  background-color: var(--grund);
  border-block-end: 1px solid var(--rahmen);
}
/* ─── Bahn und Balken ─────────────────────────────────────────────
   Zwei Flaechen und nicht eine: die Bahn in --rahmen zeigt, wie viel
   FEHLT, der Balken darin, wie viel bleibt. Vorher lief der Balken
   randlos ueber die volle Breite und las sich als Kante des Fensters
   statt als Anzeige — der abgelaufene Teil war schlicht unsichtbar, und
   eine Leiste ohne sichtbares Ende hat keine Skala.

   Der Einzug ist --rand-x und keine eigene Zahl: es ist dieselbe
   Spalte, in der Titel, Felder und Knopf stehen, und erst dadurch steht
   die Leiste AUF der Seite statt an ihrem Rand.

   Geklemmt wird in der Bahn (overflow: hidden) und nicht am Balken: ein
   border-radius am Balken wuerde von scaleX mitgestaucht, und bei
   scaleX(.1) waere aus der Rundung ein 0,3px breiter Sporn geworden.
   Die Bahn wird nie skaliert, ihre Rundung bleibt deshalb ueber die
   ganze Laufzeit dieselbe.

   6px und nicht mehr die 4px von vorher: vier Pixel waren die Hoehe
   einer Kante, und eine Kante braucht weder Rundung noch Einzug. Als
   Element aus zwei Flaechen muss die Leiste als Leiste lesbar sein, und
   unter 6px ist von --radius-s (4px, vom Browser auf die halbe Hoehe
   geklemmt) nichts mehr zu erkennen. Acht waeren ein Band und zoegen
   den Blick dauerhaft von der Frage weg; sechs bleiben unter einem
   Siebtel der 44px hohen Kopfzeile.

   Die Hoehe ist KONSTANT: der urspruengliche Sprung von 2px auf 4px bei
   0:30 entfaellt. Den Zustandswechsel tragen die Farbe der Zahl und der
   Puls, und zwei gleichzeitige Signale an derselben Leiste — groesser
   UND pulsierend — ueberlagern einander nur.

   An der ABSOLUTEN Oberkante, nicht unter dem Polster: der Restanteil
   soll auch dann ablesbar sein, wenn vom Kopf nur noch ein Streifen aus
   dem Scroll herausschaut.

   inset-inline-start plus width statt inset-inline: mit left UND right
   UND einer Breite ist der Kasten ueberbestimmt, und welcher der drei
   Werte dann faellt, haengt an der Schreibrichtung. Eine Angabe weniger
   macht die Regel eindeutig. */
.uhr__bahn {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--rand-x);
  width: calc(100% - var(--rand-x) * 2);
  height: 6px;
  border-radius: var(--radius-s);
  background-color: var(--rahmen);
  overflow: hidden;
}
/* width und scaleX teilen sich die Arbeit, und zwar nacheinander: ohne
   JavaScript steht am Balken die serverseitig gesetzte Breite aus
   teile/kopf.html. Sie rechnet seit dem Einzug gegen die BAHN und nicht
   mehr gegen die Kopfzeile — nur deshalb stimmt sie auch mit Einzug.
   Danach nimmt timer.js sie auf 100% zurueck und fuehrt den Anteil
   allein in scaleX (static/js/timer.js). Beides gleichzeitig waere ein
   Produkt und kein Wert.

   260ms und nicht 250: timer.js setzt scaleX viermal je Sekunde, der
   Uebergang zeichnet die Zwischenschritte, und die Ueberlappung von
   zehn Millisekunden verhindert, dass zwischen zwei Takten fuer einen
   Lidschlag Stillstand steht. Vorher sprang die Leiste viermal je
   Sekunde um je ein Viertelprozent und sah dadurch ruckweise aus.

   Ein Uebergang und NICHT eine CSS-Animation ueber die Restzeit: die
   waere der kuerzere Weg und waere falsch. Sie muesste bei jedem
   visibilitychange und jedem pageshow neu berechnet und neu gestartet
   werden, und genau dort entstuende die Abweichung zwischen Anzeige und
   Serveruhr, die das Messen-statt-Zaehlen ueberhaupt vermeiden soll.

   linear und nicht ease: eine Uhr laeuft gleichmaessig, und jede
   Beschleunigungskurve waere eine Aussage ueber die Zeit, die nicht
   stimmt. */
.uhr__balken {
  height: 100%;
  background-color: var(--dringend);
  transform-origin: left;
  transform: scaleX(1);
  transition: transform 260ms linear;
}
/* Kein Uebergang dort, wo zwischen altem und neuem Wert eine ganze
   Minute liegen kann: beim ersten Strich, bei der Rueckkehr aus dem
   Hintergrund und bei einer Seite aus dem bfcache. timer.js setzt die
   Klasse fuer genau einen Stilumbruch und nimmt sie sofort wieder. 260ms
   Fliessen ueber die halbe Leiste waeren eine Bewegung, die es in dieser
   Uhr sonst nirgends gibt — und sie liefe ausgerechnet in dem Moment,
   in dem jemand aus der Fotomediathek zurueckkommt. */
.uhr--sofort .uhr__balken { transition: none; }
/* tabular-nums und min-width sind Pflicht, nicht Geschmack: ohne sie
   wechselt die Breite der Zahl jede Sekunde und schubst die Punkte.
   DAS nimmt man als Flackern wahr, nicht die Farbe. 4ch deckt "2:00"
   und nach dem Formatwechsel auch die zweistellige Sekunde. */
.uhr__zahl {
  min-width: 4ch;
  text-align: end;
  color: var(--text-muted);
  font-size: var(--ui-mittel);
  line-height: var(--zeilen-eng);
  font-variant-numeric: lining-nums tabular-nums;
}
.uhr__punkte {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.uhr__punkt {
  width: 7px;
  height: 7px;
  border: 1px solid var(--text-muted);
  border-radius: 50%;
}
.uhr__punkt--erledigt { background-color: var(--text-muted); }

/* Genau EIN Zustandswechsel bei 0:30: timer.js setzt diese Klasse ein
   einziges Mal und nimmt sie nie zurueck (static/js/timer.js:205). Was
   danach laeuft, ist eine Bewegung und kein zweiter Wechsel.

   Der Puls ist langsam gewaehlt und nicht schnell: 1,2s je Durchlauf
   sind 0,83 Hz und damit weit unter den 3 Hz, ab denen SC 2.3.1 von
   Flackern spricht. Er ruehrt ausserdem nur die Deckkraft an und keine
   Groesse — eine wachsende und schrumpfende Flaeche an der Oberkante
   schoebe den Blick bei jedem Durchlauf neu an und waere unter
   Zeitdruck das Gegenteil von hilfreich.

   Dass die Leiste im dunkelsten Moment unter 3:1 faellt, ist hingenommen
   und kein Versehen: sie traegt aria-hidden, die Information steht in
   der Zahl daneben, und SC 1.4.11 nimmt rein dekorative Flaechen
   ausdruecklich aus. Die Zahl selbst bleibt bei 8,73:1. */
.uhr--knapp .uhr__zahl   { color: var(--dringend-hell); }
.uhr--knapp .uhr__balken { animation: uhr-puls 1.2s ease-in-out infinite; }

@keyframes uhr-puls {
  from, to { opacity: 1; }
  50%      { opacity: .55; }
}

/* Bei Ablauf weicht die Zahl einem Satz. Kein Modal, keine Umleitung,
   nichts gesperrt — der Ablauf hat null Konsequenz, und das ist die
   dritte der drei Kompensationen, mit denen die Essential Exception
   zu SC 2.2.1 ueberhaupt erst tragfaehig ist.
   font-size: 0 statt eines zweiten Elements: die Zahl behaelt ihr
   role="timer", und der Satz erscheint an genau derselben Stelle.
   min-width faellt dabei weg, sonst stuenden 4ch von 0px daneben. */
.uhr--aus .uhr__zahl { font-size: 0; min-width: 0; }
.uhr--aus .uhr__zahl::after {
  content: "Zeit abgelaufen — weiter geht's";
  font-size: var(--ui-klein);
  color: var(--text-muted);
}
/* Mit dem Ablauf endet auch der Puls. Der Balken steht dann ohnehin auf
   scaleX(0) und ist unsichtbar — aber eine Animation, die niemand mehr
   sieht, laeuft im Compositor weiter, und sie wuerde einen Zustand
   betonen, der gerade aufgehoert hat zu draengen. Die Regel steht NACH
   .uhr--knapp und hat dieselbe Spezifitaet; nur deshalb gewinnt sie. */
.uhr--aus .uhr__balken { animation: none; }

/* ─── Vorschau ohne Sprung ────────────────────────────────────────
   Der Rahmen steht SCHON vor der Auswahl da. aspect-ratio geht nicht:
   das Seitenverhaeltnis des Fotos ist unbekannt (hoch, quer,
   Panorama). Eine feste Hoehe ist die einzige Loesung, die die
   Seitenhoehe beim Fuellen um exakt 0px aendert — und ein Sprung
   genau in dem Moment, in dem der Daumen zum Knopf wandert, kostet
   einen Fehlgriff.

   min(52vh, 420px): mehr als die halbe Fensterhoehe nimmt dem Knopf
   den Platz, mehr als 420px braucht eine Kontrollvorschau nicht.    */
.vorschau {
  height: min(52vh, 420px);
  margin-block-start: var(--rhythmus);
  display: grid;
  place-items: center;
  border: 1px solid var(--rahmen);
  border-radius: var(--radius-s);
  overflow: hidden;
}
/* Gestrichelt heisst "hier kommt noch etwas hin", durchgezogen heisst
   "hier steht etwas". Der Rahmen traegt den Zustand, nicht die Farbe. */
.vorschau--leer { border-style: dashed; }
.vorschau__bild {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.vorschau__text {
  color: var(--text-dim);
  font-size: var(--ui-klein);
}
/* Was gerade nicht gilt, wird ausgeblendet und nicht geleert: so
   bleibt das <img> im DOM und behaelt seinen alt-Text, und foto.js
   muss keine Knoten erzeugen. */
.vorschau--leer .vorschau__bild { display: none; }
.vorschau:not(.vorschau--leer) .vorschau__text { display: none; }
/* Manche HEIC-Dateien kann der Browser hochladen, aber nicht
   darstellen. Dann bleibt der Rahmen durchgezogen stehen und zeigt
   den Dateinamen — die Seite springt auch in diesem Fall nicht. */
.vorschau--ohne-bild .vorschau__bild { display: none; }
.vorschau--ohne-bild .vorschau__text { display: block; }

/* ─── Der Knopf IST der Fortschrittsbalken ────────────────────────
   Kein zusaetzliches Element, keine Layoutverschiebung, und der
   Fortschritt steht genau dort, wo der Blick nach dem Tippen ohnehin
   liegt. --fortschritt setzt foto.js als Inline-Eigenschaft; der
   Rueckfall 0% haelt den Knopf auch dann richtig, wenn das Skript
   zwischen classList.add und dem ersten progress-Ereignis abbricht.

   background-image und nicht background: die background-color aus
   .knopf bleibt darunter liegen und traegt den ungefuellten Teil.   */
.knopf--sendet {
  background-image: linear-gradient(to right,
      var(--pille-stark) 0 var(--fortschritt, 0%),
      transparent var(--fortschritt, 0%) 100%);
}
/* Waehrend des Uploads wird der leise Tauschknopf stillgelegt, nicht
   entfernt: entfernt saesse der Hauptknopf ploetzlich 68px weiter
   oben, unter einem Daumen, der schon dort liegt. */
.formular--sendet .knopf--still {
  pointer-events: none;
  opacity: .4;
}

/* ─── Der Datei-Input ─────────────────────────────────────────────
   Er liegt IM Label: keine for/id-Kopplung noetig und :focus-within
   greift ohne :has(). Versteckt per clip-path und NIEMALS per
   display:none oder visibility:hidden — ein display:none-Input mit
   required laesst Chrome den Submit still abbrechen ("An invalid
   form control is not focusable") und faellt aus der Tab-Reihenfolge.
   Das Formular saehe dann aus, als reagierte der Knopf nicht.       */
.dateiwahl {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── Desktop: kein Riegel, nur ein Hinweis ───────────────────────
   Erkennung ueber die Faehigkeiten des Zeigegeraets, NIE ueber den
   User-Agent: ein Tablet mit Tastatur, ein Telefon am Monitor und
   jeder kuenftige Formfaktor beantworten pointer/hover richtig und
   eine UA-Liste falsch.

   Der Rechnerblock ist per Vorgabe aus, nicht per Vorgabe an: faellt
   die Medienabfrage aus (altes Geraet, deaktiviertes CSS), sieht der
   Besucher die Umfrage und nicht einen QR-Code ohne Kamera.         */
.rechner { display: none; }
.rechner__code { display: block; width: 180px; height: auto; }

/* ═══ Breakpoints ═══════════════════════════════════════════════════
   Drei Schwellen, dieselben wie in quiet.css, plus die eine fuer den
   Rechner. Der Fliesstext bleibt ueberall 16px.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 40em) { :root { --rand-x: 24px; } }
@media (min-width: 48em) { :root { --rand-x: 32px; } }

@media (pointer: fine) and (hover: hover) {
  .rechner { display: block; }
  /* Dieselbe Seite, nicht eine aufgeblasene: 430px ist die Breite
     eines grossen Telefons, und die Umfrage ist fuer diese Breite
     entworfen. Gestreckt auf 640px staende die Frage allein in einer
     leeren Flaeche und der Knopf waere einen halben Bildschirm
     breit. */
  .spalte { max-width: 430px; }
}
/* Erst ab 56em steht der QR-Code NEBEN der Spalte: 430px Spalte plus
   48px Rinne plus 180px Code sind 658px, darunter wuerde er die
   Spalte schieben. .bahn ist dafuer da und sonst nichts — ohne die
   Abfrage bleibt sie eine gewoehnliche Blockfolge. */
@media (pointer: fine) and (hover: hover) and (min-width: 56em) {
  .spalte { max-width: calc(430px + var(--rhythmus) * 2 + 180px); }
  .bahn {
    display: grid;
    grid-template-columns: 430px minmax(0, 180px);
    column-gap: calc(var(--rhythmus) * 2);
    align-items: start;
  }
}

/* ═══ Bewegung ══════════════════════════════════════════════════════
   Es gibt genau einen Uebergang (color, 140ms) und zwei fortlaufende
   Bewegungen, beide am Balken der Uhr: sein Schrumpfen ueber die
   Laufzeit und sein Puls in den letzten 30 Sekunden.
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  /* Der Balken wird AUSDRUECKLICH NICHT ausgeblendet: er ist
     Information und keine Dekoration, und wer Bewegung reduziert,
     verliert sonst als Einziger die Restanteilsanzeige. timer.js
     fragt dieselbe Medienabfrage ab und setzt die Breite dann nur
     noch bei jedem Wechsel einer 10-%-Stufe — zehn Spruenge statt
     rund vierhundertachtzig, die Zahl daneben bleibt sekundengenau.

     Der Uebergang von 260ms ist hier schon erledigt und wird NICHT ein
     zweites Mal abgeschaltet: die .01ms-Zeile oben traegt !important
     und gewinnt gegen jede transition-duration. Ein eigenes
     `transition: none` waere eine zweite Regel fuer dieselbe Wirkung,
     und die beiden liefen beim naechsten Umbau auseinander. Bei der
     Animation liegt der Fall anders — siehe die Regel darunter. */
  .uhr__balken { display: block; transform-origin: left; }
  /* Kein Puls. Diese Regel ist Pflicht und nicht etwa durch die
     .01ms-Zeile oben schon erledigt: eine Animation mit `infinite` und
     einer Dauer von .01ms laeuft nicht langsamer, sie laeuft tausendfach
     je Bild und wird bei jedem Neuzeichnen an einer zufaelligen Stelle
     abgetastet. Aus dem ruhigen Puls wuerde dann genau das Flackern,
     das SC 2.3.1 verbietet — die Einstellung, die Bewegung abbestellt,
     haette sie verschlimmert. `animation: none` nimmt den Namen, und
     ohne Namen laeuft keine Dauer.

     Die Zahl wechselt trotzdem auf --dringend-hell: Farbe ist keine
     Bewegung, und die Person soll denselben Hinweis bekommen wie alle
     anderen, nur ohne ihn zappeln zu sehen. */
  .uhr--knapp .uhr__balken { animation: none; opacity: 1; }
}

/* ═══ Druck ═════════════════════════════════════════════════════════
   Gedruckt wird hier realistisch nur /hinweise/ — die DSGVO-Punkte
   zum Abheften. Alles, was den Ablauf bedient, faellt dafuer weg.
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  .uhr, .sprung, .rechner, .knopf, .nebenlink, .vorschau { display: none; }
  :root {
    /* Vollstaendig, nicht nur die Textstufen: die Vorgabe ist dunkel,
       also muss hier jede Farbe umgedreht werden, die auf Papier sonst
       als schwarze Flaeche herauskaeme — auch die drei Mischungen. */
    --grund: #fff; --text-normal: #000; --text-muted: #333;
    --text-dim: #444; --text-faint: #777;
    --akzent: #000; --akzent-hover: #000; --rahmen: #999;
    /* Die beiden Dringlichkeitstoene auch dann, wenn sie heute nur an
       der Uhr haengen und die hier ohnehin verborgen ist: dieser Block
       dreht jede Farbe um, ausnahmslos, damit eine spaeter hinzukommende
       Regel nicht als satte rote Flaeche aufs Papier geht. */
    --dringend: #000; --dringend-hell: #000;
    --flaeche-alt: #f2f2f2; --leitlinie: #999;
    --akzent-flaeche: #000;
    --flaeche-hover: transparent;
    --pille: transparent; --pille-stark: transparent; --markierung: transparent;
  }
  body { font-size: 11pt; }
  .spalte { max-width: none; padding-block-end: 0; }
  .text a::after { content: " (" attr(href) ")"; font-size: .8em; color: #444; }
  .text :is(h2, h3) { break-after: avoid; }
  .text :is(ul, ol, dl) { break-inside: avoid; }
}