/* ==========================================================================
   Theorietrainer — 10 Bausteine
   Gemeinsame Bauteile aller Ansichten. Verbindliche Quelle: DESIGN.md.

   Eigentuemer: Design-Lead. Kein Slice-Worker schreibt in diese Datei.
   Fehlt ein Baustein, wird er beim Design-Lead angefordert; er wandert
   hierher, nicht in eine Flaechendatei.

   Enthalten:
     Seitengeruest . Kopfleiste . Datenzeile . Admin-Registerleiste
     Untere Zellenleiste . Aktionsstufen 1-4 . Formularelemente
     schmale Formularspalte . Feldblock . Werkzeugleiste . Massenleiste
     Tabelle . Auswahlspalte . Seitenteilung . Meldung . Zustandszeichen . Leerzustand
     Frage . Antwortzeile . Urteilszeile . Herkunftszeile . Anmerkungsblock
     Frage melden . Spur . Lochleiste . Messskala . Parcours . Wagenrad
     Druckbausteine der Bogen-Werkstatt: Schreiblinie . Schreiblinien
     Deckblatt . Loesungs-Kurzraster . Druckdichte der Antwortzeile
   ========================================================================== */

/* == Seitengeruest ====================================================== */

main {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--a6) var(--a5) var(--a8);
  background: var(--papier);
  border-left: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
  min-height: 60vh;
}

/* Titelzeile: Titel und hoechstens eine Hauptaktion daneben */
.titelzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a5);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--tinte);
  padding-bottom: var(--a4);
  margin-bottom: var(--a6);
}
.titelzeile .beiwort {
  font-family: var(--schrift-zahl);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
}

/* Dokumentspalte mit optionaler Randspalte, getrennt durch eine Linie,
   nicht durch Leerraum. */
.zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rand);
}
.zweispaltig > * { min-width: 0; }
.zweispaltig > :first-child {
  border-right: 1px solid var(--linie);
  padding-right: var(--a6);
}
.zweispaltig > :last-child { padding-left: var(--a6); }

.satz { max-width: var(--spalte); }

/* Randspalte. Hochgehoben aus 20-pruefung.css (Anforderung A-2): DESIGN.md
   fuehrt sie als Grundmass des Systems (16rem), und das Druck-Stylesheet in
   00-basis.css blendet sie bereits aus — eine Basisdatei darf sich nicht auf
   eine Klasse berufen, die nur in einer Flaechendatei existiert. */
.randspalte > :first-child { margin-top: 0; }
.randtitel {
  font-family: var(--schrift-eng);
  font-size: var(--t-sm);
  margin-bottom: var(--a1);
}

.legende {
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
  margin-top: var(--a3);
}

/* == Kopfleiste als Formularkopf =========================================
   Zwei Zeilen: oben Wortmarke und Navigation als Zellen mit Trennlinien,
   darunter die Datenzeile aus Label-Wert-Paaren. Keine Marketingzeile.
   ====================================================================== */

.kopfleiste {
  background: var(--papier);
  border-bottom: 1px solid var(--tinte);
}

.kopfleiste .oben {
  display: flex;
  align-items: stretch;
  /* Umbruch immer erlaubt: die Reihe aus Wortmarke, Navigation und Kennung
     ueberlief sonst zwischen 36rem und 62rem die Seitenbreite, ohne dass ein
     einzelnes Element zu breit gewesen waere. */
  flex-wrap: wrap;
}

.wortmarke {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--a3);
  font-family: var(--schrift-eng);
  font-weight: 700;
  font-size: var(--t-frage);
  color: var(--tinte);
  text-decoration: none;
  padding: var(--a4) var(--a5);
  border-right: 1px solid var(--linie);
  white-space: nowrap;
}
.wortmarke:hover { background: var(--papier-rand); }

/* Wagenrad: zwei konzentrische Kreise in reiner Linie. Als SVG, damit das
   System ohne einen einzigen von null verschiedenen Radius auskommt. */
.wortmarke .rad { flex: none; display: block; }

/* Die Navigation darf schrumpfen und in sich rollen, statt die Reihe zu
   sprengen. min-width: 0 ist noetig, weil ein Flex-Kind sonst nicht unter
   seine Inhaltsbreite geht. */
.kopfleiste nav {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}

.kopfleiste nav a,
.kopfleiste nav button {
  display: flex;
  align-items: center;
  font-family: var(--schrift-eng);
  font-size: var(--t-md);
  font-weight: 400;
  color: var(--tinte);
  background: transparent;
  text-decoration: none;
  border: 0;
  border-right: 1px solid var(--linie);
  padding: var(--a4) var(--a5);
  min-height: 0;
  white-space: nowrap;
  cursor: pointer;
}
.kopfleiste nav a:hover,
.kopfleiste nav button:hover {
  background: var(--papier-rand);
  color: var(--tinte);
}

/* Aktiver Eintrag: tintengefuellte Zelle. Keine Pille, keine Unterstreichung,
   keine Farbhervorhebung — auch nicht fuer den Admin-Weg. */
.kopfleiste nav a[aria-current] {
  background: var(--tinte);
  color: var(--papier);
  font-weight: 600;
}

.kopfleiste nav form { display: flex; margin: 0; }

.kopfleiste .wer {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: var(--a4) var(--a5);
  border-left: 1px solid var(--linie);
  font-family: var(--schrift-zahl);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
  white-space: nowrap;
}

/* Datenzeile: Label ueber Wert, senkrechte Trennlinien. Fahrtenbuchkopf. */
.datenzeile { display: flex; flex-wrap: wrap; }
.datenzeile .zelle {
  padding: var(--a2) var(--a5);
  border-right: 1px solid var(--linie);
  min-width: 6rem;
}
.datenzeile .zelle:last-child { border-right: 0; }
.datenzeile .n {
  display: block;
  font-family: var(--schrift-eng);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
}
.datenzeile .v {
  font-family: var(--schrift-zahl);
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
}

/* Zweite Ebene, nur im Admin */
.adminleiste {
  display: flex;
  flex-wrap: wrap;
  background: var(--tinte);
  min-width: 0;
  max-width: 100%;
}
.adminleiste a {

  display: inline-flex;
  align-items: center;
  gap: var(--a2);
  font-family: var(--schrift-eng);
  font-size: var(--t-md);
  color: var(--leiste-text);
  text-decoration: none;
  padding: var(--a3) var(--a5);
  border-right: 1px solid var(--leiste-linie);
  white-space: nowrap;
}

.adminleiste a:hover { color: var(--papier); }
.adminleiste a[aria-current] {
  background: var(--messing);
  /* --tinte auf Messing ergibt 4.46:1 und verfehlt die 4.5:1 aus WCAG 1.4.3
     um 0.04 (Befund B-3). --tinte-tief, ohnehin schon als Marke vorhanden,
     bringt 5.37:1. Kein neuer Farbwert, keine Flaechenaenderung. */
  color: var(--tinte-tief);
  font-weight: 600;
}
.adminleiste .wer {
  margin-left: auto;
  padding: var(--a3) var(--a5);
  font-family: var(--schrift-zahl);
  font-size: var(--t-xs);
  color: var(--leiste-schwach);
}

/* == Aktionen ===========================================================
   Vier Stufen, eine Aktion der Stufe 1 je Bildschirm. Die 3px-Grundlinie
   ist die Schreiblinie des Formulars; sie ersetzt Schatten und Rundung.
   ====================================================================== */

/* Stufe 1: Hauptaktion */
.tun,
button,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a3);
  font-family: var(--schrift-eng);
  font-size: var(--t-md);
  font-weight: 600;
  background: var(--tinte);
  color: var(--papier);
  border: 1px solid var(--tinte);
  border-bottom-width: 3px;
  padding: var(--a3) var(--a6);
  min-height: 2.5rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--zeit-kurz) ease-out;
}
.tun:hover, button:hover, input[type="submit"]:hover {
  background: var(--tinte-tief);
  border-color: var(--tinte-tief);
  color: var(--papier);
}

/* Stufe 2: Nebenaktion — Papier mit Rahmen und Grundlinie in Tinte */
.tun.zwei, button.zwei {
  background: var(--papier);
  color: var(--tinte);
  border-color: var(--linie-kontrast);
  border-bottom-color: var(--tinte);
}
.tun.zwei:hover, button.zwei:hover {
  background: var(--papier-rand);
  color: var(--tinte);
  border-color: var(--tinte);
}

.tun.klein, button.klein {
  font-size: var(--t-sm);
  min-height: 2rem;
  padding: var(--a1) var(--a4);
  border-bottom-width: 2px;
}

/* Stufe 3: beilaeufig — kein Knopf, gepunktete Grundlinie */
.leise {
  display: inline-block;
  font-family: var(--schrift-eng);
  font-size: var(--t-md);
  color: var(--tinte-schwach);
  background: none;
  text-decoration: none;
  border: 0;
  border-bottom: 1px dotted var(--linie-kontrast);
  padding: 0;
  min-height: 0;
  cursor: pointer;
}
.leise:hover {
  color: var(--tinte);
  background: none;
  border-bottom-color: var(--tinte);
  border-bottom-style: dotted;
}

/* Stufe 4: Gefahr — immer mit Rueckfrage, die das Objekt benennt */
.tun.gefahr, button.gefahr {
  background: var(--papier);
  color: var(--falsch);
  border-color: var(--falsch);
}
.tun.gefahr:hover, button.gefahr:hover {
  background: var(--falsch-weich);
  color: var(--falsch);
  border-color: var(--falsch);
}

/* Aktionsreihe */
.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a4);
  align-items: center;
}
.aktionen form { margin: 0; }

/* == Formularelemente =================================================== */

.beschriftung {
  display: block;
  font-family: var(--schrift-eng);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
  margin-bottom: var(--a1);
}

/* input ohne type-Attribut faellt im Browser auf text zurueck, wurde von der
   Aufzaehlung aber nicht erfasst und stand dann unformatiert da (Befund F-B).
   :not([type]) nimmt es mit, ohne Ankreuzfelder oder Knoepfe zu treffen. */
input:not([type]),
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input[type="email"],
select, textarea {
  font-family: var(--schrift);
  font-size: var(--t-md);
  background: var(--papier);
  color: var(--tinte);
  /* Bedienbar, also 3:1 noetig: --linie-kontrast statt --linie-stark. */
  border: 1px solid var(--linie-kontrast);
  border-bottom-color: var(--tinte);
  padding: var(--a3) var(--a4);
  min-height: 2.5rem;
  width: 100%;
}
textarea { resize: vertical; line-height: 1.5; }

input:not([type]):focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 0;
  border-color: var(--tinte);
}

/* C-12: das native Feld rendert mit appearance:auto rund, und der
   border-radius-Reset greift dort nicht — auf dem Pruefungsbogen standen
   damit runde Radiobuttons, entgegen „Radius null, ausnahmslos" und entgegen
   dem 14px-Quadrat aus DESIGN.md.

   Bewusst KEIN Verstecken des nativen Feldes und kein Ersatzelement: das
   Eingabefeld bleibt das Bedienelement. Es behaelt Tastaturfokus,
   Label-Verknuepfung, Rolle und Zustand fuer Bildschirmleser; nur sein
   Aussehen wird uebernommen. Die Fuellung entsteht ueber background-clip,
   damit kein Schatten noetig ist (Schatten sind verboten).

   Gilt bewusst app-weit: sonst haette der Bogen ein anderes Ankreuzfeld als
   das Admin-Nutzerformular und das Vorschlagsformular. */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  accent-color: var(--tinte);
  width: 14px;
  height: 14px;
  min-height: 0;
  margin: 0;
  flex: none;
  border: 1px solid var(--tinte);
  background-color: var(--papier);
  background-clip: content-box;
  padding: 2px;
  cursor: pointer;
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background-color: var(--tinte);
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
  border-color: var(--linie-stark);
  cursor: default;
}
input[type="checkbox"]:disabled:not(:checked),
input[type="radio"]:disabled:not(:checked) {
  background-color: var(--papier-rand);
}

/* Schmale Formularspalte: Anmeldung, Registrierung, Passwortwechsel,
   Nutzeranlage. Ein Feld je Zeile, damit nichts nebeneinander rutscht. */
.schmalform {
  display: grid;
  gap: var(--a5);
  max-width: 26rem;
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  padding: var(--a6);
}
/* C-13: die Feldbeschriftung stand in Fira Sans 15px statt in der
   Beschriftungsrolle aus DESIGN.md (13px Condensed, gedaempft). Das Feld
   selbst setzt Schrift und Groesse ohnehin selbst, deshalb faerbt die Regel
   nur die Beschriftung. Wirkt zugleich auf Anmeldung, Registrierung,
   Passwortwechsel und das Admin-Nutzerformular. */
.schmalform label {
  display: grid;
  gap: var(--a1);
  font-family: var(--schrift-eng);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
}
.schmalform label input,
.schmalform label select,
.schmalform label textarea {
  font-family: var(--schrift);
  font-size: var(--t-md);
  color: var(--tinte);
}
.schmalform .hinweis-feld {
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
}

/* Feldblock: 1px-Rahmen, Kopfzeile, Inhalt, Fuss. Ersetzt die Karte.
   Rang C nach design-spec-v2.md §5.1 — gilt seit R-02 ausschliesslich fuer
   Eingabefeldgruppen, mit drei Einschraenkungen:
     1  Nie geschachtelt: kein Feldblock in einem Feldblock.
     2  Nie um Inhalt gelegt, der schon eine Kante hat — nicht um eine
        Tabelle, nicht um eine Antwortliste, nicht um eine Anmerkung.
     3  Knapp: hoechstens drei je Seite. Mehr Abschnitte gliedern sich ueber
        Rang A und eine Ueberschrift, nicht ueber einen vierten Block. */
.feldblock { border: 1px solid var(--linie-stark); background: var(--papier); }
.feldblock > .kopf {
  font-family: var(--schrift-eng);
  font-weight: 600;
  font-size: var(--t-md);
  background: var(--papier-rand);
  border-bottom: 1px solid var(--linie-stark);
  padding: var(--a2) var(--a5);
}
.feldblock > .koerper { padding: var(--a5); display: grid; gap: var(--a4); }
.feldblock > .fuss {
  border-top: 1px solid var(--linie);
  background: var(--papier-rand);
  padding: var(--a4) var(--a5);
  display: flex;
  align-items: center;
  gap: var(--a5);
  flex-wrap: wrap;
}

.feldreihe {
  display: grid;
  gap: var(--a4);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* Werkzeugleiste ueber Listen: suchen, filtern, anlegen.
   Gemeinsam von Nachschlagen (Slice C) und Admin-Katalog (Slice B).
   Rahmen und Flaeche entfallen seit R-02 (Befund B-1): eine Rang-A-Linie
   traegt statt eines zweiten Kastens, die Leiste steht damit sichtbar als
   Werkzeug ueber der Liste, nicht als weiterer Kasten daneben. */
.werkzeug {
  display: flex;
  gap: var(--a4);
  flex-wrap: wrap;
  align-items: end;
  padding: var(--a4);
  border-bottom: var(--rang-a);
  margin-bottom: var(--a5);
}
.werkzeug > * { margin: 0; }
.werkzeug label { display: grid; gap: var(--a1); font-size: var(--t-sm); }
.werkzeug input, .werkzeug select { width: 14rem; max-width: 100%; }
.werkzeug .treffer {
  margin-left: auto;
  align-self: center;
  font-family: var(--schrift-zahl);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
}

/* Massenleiste: erscheint erst, wenn etwas ausgewaehlt ist */
.massen {
  display: flex;
  gap: var(--a4);
  align-items: center;
  flex-wrap: wrap;
  background: var(--tinte);
  color: var(--papier);
  padding: var(--a3) var(--a4);
  font-size: var(--t-md);
}
.massen select { width: auto; min-height: 2rem; padding: var(--a1) var(--a3); }
.massen .anzahl { font-family: var(--schrift-zahl); font-weight: 700; }

/* == Tabelle ============================================================ */

.tab, .buch { width: 100%; border-collapse: collapse; font-size: var(--t-md); }

/* Nur der Spaltenkopf traegt das Kopfzeilenaussehen. Ohne die Eingrenzung
   auf thead bekaeme auch ein th im Tabellenkoerper Kopfflaeche und starke
   Grundlinie und laese sich als zweite Kopfzeile — der Grund, aus dem ein
   Zeilenkopf bisher als td geschrieben werden musste (Befund F-A). */
.tab thead th, .buch thead th {
  font-family: var(--schrift-eng);
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: left;
  color: var(--tinte-schwach);
  padding: var(--a2) var(--a4);
  border-bottom: 1px solid var(--tinte);
}
.tab thead th { background: var(--papier-rand); border-right: 1px solid var(--linie); }
.tab thead th:last-child { border-right: 0; }

.tab td, .buch td {
  padding: var(--a3) var(--a4);
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}
.tab td { border-right: 1px solid var(--linie); }
.tab td:last-child { border-right: 0; }
.tab tr:hover td, .buch tr:hover td { background: var(--papier-rand); }

/* Zeilenkopf: semantisch ein th, optisch eine Zelle. Gilt fuer jedes th im
   Tabellenkoerper, nicht nur fuer scope="row" — ein th steht dort ohnehin nie
   als Spaltenkopf. Damit ist der Ausweg auf td nicht mehr noetig. */
.tab tbody th, .buch tbody th {
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
  font-family: var(--schrift-zahl);
  font-size: var(--t-sm);
  font-weight: 400;
  font-style: normal;
  text-align: left;
  color: var(--tinte-schwach);
  padding: var(--a3) var(--a4);
}
.tab tbody tr:hover th, .buch tbody tr:hover th { background: var(--papier-rand); }

.tab td.id, .buch td.id {
  font-family: var(--schrift-zahl);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
}
.tab .q, .buch .q {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Dichte Tabellen rollen in ihrem eigenen Rahmen. Die Seite rollt nie.

   Die Mindestbreite ist eine Grundvorgabe, keine feste Vorgabe fuer jede
   Tabelle. :where(.rollbar) haelt die Spezifitaet bei (0,1,0) — genau der
   Wert einer gewoehnlichen Slice-Klasse (.tab-katalog, .tab-meldungen). Eine
   Slice-Datei uebersteuert die Grundvorgabe also allein dadurch, dass ihre
   eigene, gleich starke Klassenregel spaeter geladen wird (Ladereihenfolge
   in base.html: 10-bausteine.css vor 20-pruefung/30-admin/40-lernen-konten
   entscheidet den Gleichstand) — ohne selbst an Spezifitaet zuzulegen (Regel
   3 am Kopf jeder Slice-Datei: keine Erhoehung, um eine Basisregel zu
   uebersteuern; ist das noetig, ist die Basisregel falsch).

   Vorher stand hier `.rollbar > .tab` mit (0,2,0) und schlug jede
   Slice-Klasse unabhaengig von der Ladereihenfolge — .tab-katalog (74rem)
   und .tab-meldungen (36rem) griffen nie, ebenso wenig die Rueckgabe auf
   min-width: 0 im Druckblock von 30-admin.css (Befund P8a, 2026-08-20). */
.rollbar { overflow-x: auto; max-width: 100%; min-width: 0; width: 100%; contain: paint; }


:where(.rollbar) > .tab { min-width: 34rem; }

/* == Auswahlspalte =======================================================
   Schmale erste Tabellenspalte fuer Massenvorgaenge (angefordert von P8e).
   Das Kaestchen selbst braucht keine eigene Regel: es ist ein natives
   input[type="checkbox"] und traegt bereits die app-weite Form (Rahmen aus
   `border`, NIE aus `background` gefuellt — Druckregel des Systems, siehe
   input[type="checkbox"] oben). Hier steht nur die schmale Spalte und der
   Kopfzeilen-Zustand "alle auswaehlen". Zusammenspiel mit .massen (Zeile
   ~488): sobald mindestens ein Kaestchen ausgewaehlt ist, blendet
   static/js/admin.js die Massenleiste ein und setzt .gewaehlt auf die
   betroffenen Zeilen; das Kopfkaestchen traegt den indeterminate-Zustand
   fuer "einige, nicht alle", wenn JavaScript das erkennt (kein CSS-Zustand
   dafuer noetig, :indeterminate stylt das native Feld bereits mit).

     <thead>
       <tr>
         <th class="auswahl">
           <input type="checkbox" data-auswahl-alle aria-label="Alle auswaehlen">
         </th>
         ...
     <tbody>
       <tr class="{{ 'gewaehlt' if ... }}">
         <td class="auswahl">
           <input type="checkbox" data-auswahl="frage_001" aria-label="Frage frage_001 auswaehlen">
         </td>
         ...

   Bewusst eine eigene Zeilenmarke (.gewaehlt auf tr) statt eines
   :has()-Selektors: das System zeigt Auswahlzustaende sonst immer ueber
   eine explizite Klasse (.antwortzeile.gewaehlt, .tor.markiert), nie ueber
   einen impliziten Elternselektor, und :has() waere hier die erste
   Ausnahme davon. */
.tab th.auswahl, .tab td.auswahl,
.buch th.auswahl, .buch td.auswahl {
  width: 2.5rem;
  padding-left: var(--a4);
  padding-right: var(--a2);
  text-align: center;
}
.tab tr.gewaehlt td, .buch tr.gewaehlt td,
.tab tr.gewaehlt th, .buch tr.gewaehlt th { background: var(--papier-tief); }

/* == Seitenteilung =======================================================
   Navigationszeile unter einer Tabelle: zurueck/weiter als Nebenaktion
   (Aktionsstufe 2, klein — bestehendes Vokabular, kein neuer Knopftyp),
   Seitenzahlen als Zellenreihe wie .kopfleiste nav (aktive Seite
   tintengefuellt ueber aria-current, gleiche Regel wie dort), Umfangswahl
   rechtsbuendig wie .werkzeug .treffer. data-blaettern sitzt am <nav>
   selbst (P8-Datenhakenvertrag).

   Bewusst ein <nav>-Element statt einer eigenen Druckregel: 00-basis.css
   blendet jedes nav im Druck bereits pauschal aus (siehe @media print dort)
   — ein zweiter, spezifischerer Eintrag waere doppelt gepflegte Regel fuer
   dasselbe Ergebnis. Nicht erreichbare Sprungziele (zurueck auf Seite 1)
   werden mit aria-disabled ausgegeben statt entfernt, damit die Zeile ihre
   Breite nicht von Seite zu Seite aendert.

     <nav class="blaettern" data-blaettern aria-label="Seiten">
       <a class="tun zwei klein" href="?seite=1" aria-disabled="true">zurueck</a>
       <span class="seiten">
         <a href="?seite=1">1</a>
         <a href="?seite=2" aria-current="page">2</a>
         <a href="?seite=3">3</a>
       </span>
       <a class="tun zwei klein" href="?seite=3">weiter</a>
       <label class="umfang">je Seite
         <select name="umfang">...</select>
       </label>
     </nav>
   ====================================================================== */
.blaettern {
  display: flex;
  align-items: center;
  gap: var(--a4);
  flex-wrap: wrap;
  padding-top: var(--a4);
  margin-top: var(--a5);
  border-top: var(--rang-b);
}
.blaettern [aria-disabled="true"] {
  pointer-events: none;
  opacity: .4;
}
.blaettern .seiten {
  display: flex;
  border: 1px solid var(--linie);
}
.blaettern .seiten a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 var(--a3);
  font-family: var(--schrift-zahl);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  text-decoration: none;
  border-right: 1px solid var(--linie);
}
.blaettern .seiten a:last-child { border-right: 0; }
.blaettern .seiten a:hover { background: var(--papier-rand); }
/* Aktive Seite: dieselbe Regel wie .kopfleiste nav a[aria-current] —
   tintengefuellte Zelle, keine Pille, keine Farbhervorhebung. */
.blaettern .seiten a[aria-current] {
  background: var(--tinte);
  color: var(--papier);
  font-weight: 600;
}
.blaettern .umfang {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--a2);
  font-family: var(--schrift-eng);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
}
.blaettern .umfang select {
  width: auto;
  min-height: 2rem;
  padding: var(--a1) var(--a3);
}

/* == Meldungen ==========================================================
   Der Meldungstext ist Inhalt und in Tests zugesichert; hier steht nur die
   Form: 4px-Balken links in der Bedeutungsfarbe, 1px-Rahmen, weiche Flaeche.
   ====================================================================== */

.meldungen { display: grid; gap: var(--a3); margin-bottom: var(--a6); }

.meldung {
  margin: 0;
  padding: var(--a3) var(--a5);
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  border-left: 4px solid var(--tinte);
  font-size: var(--t-md);
}
.meldung b { font-family: var(--schrift-eng); }
.meldung.gut      { border-left-color: var(--richtig); background: var(--richtig-weich); }
.meldung.halt     { border-left-color: var(--messing); background: var(--messing-weich); }
.meldung.schlecht { border-left-color: var(--falsch);  background: var(--falsch-weich); }

/* == Zustandszeichen ====================================================
   Beschriftung, keine Aktion: deshalb klein, eckig, leise. Kategorien sind
   KEIN Zeichen, sondern Klartext in der Herkunftszeile oder eine Spalte.
   ====================================================================== */

.mrk {
  display: inline-block;
  font-family: var(--schrift-zahl);
  font-size: var(--t-xs);
  line-height: 1.6;
  letter-spacing: normal;
  padding: 0 var(--a1);
  border: 1px solid var(--linie-stark);
  color: var(--tinte-schwach);
  background: var(--papier);
  white-space: nowrap;
}
.mrk.gut      { border-color: var(--richtig); color: var(--richtig); background: var(--richtig-weich); }
.mrk.halt     { border-color: var(--messing); color: var(--messing-text); background: var(--messing-weich); }
.mrk.aus      { border-style: dashed; }
.mrk.schlecht { border-color: var(--falsch); color: var(--falsch); background: var(--falsch-weich); }

/* == Icons =============================================================
   Technische Linien-SVGs im DIN/Drafting-Stil des Rasterbogens.
   ====================================================================== */
.tt-icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  stroke-width: 1.2px;
}
.tt-icon.gut { color: var(--richtig); }
.tt-icon.halt { color: var(--messing); }
.tt-icon.schlecht { color: var(--falsch); }
.tt-icon.leise { color: var(--tinte-schwach); }

/* Leerzustand: die Abwesenheit ist die Information, nicht ein Fehler. */
.leer {
  border: 1px dashed var(--linie-stark);
  background: var(--papier);
  color: var(--tinte-schwach);
  padding: var(--a6) var(--a8);
  font-size: var(--t-md);
  margin: var(--a4) 0;
}

.leer-innen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--a3);
  max-width: 32rem;
  margin: 0 auto;
}

.leer-symbol {
  color: var(--linie-kontrast);
  flex-shrink: 0;
}

.leer-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--a1);
}

.leer-titel {
  font-family: var(--schrift-eng);
  font-weight: 600;
  font-size: var(--t-txt);
  color: var(--tinte);
  margin: 0;
}

.leer-hinweis {
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
  margin: 0;
  line-height: 1.45;
}

.leer-aktionen {
  margin-top: var(--a2);
  display: flex;
  gap: var(--a3);
}


/* == Frage ==============================================================
   Die einzige Darstellungsform einer Frage in der ganzen Anwendung:
   Pruefungsbogen, Auswertung, Nachschlagen (dort als Inhalt eines
   <details>) und Lernmodus. Gehoben aus 20-pruefung.css, wo sie seit P3
   als offener Befund vermerkt stand (Kommentar dort, Stand vor R-02);
   Worker A entfernt die Regeln in R-04 aus seiner Datei, wortgleich
   gegengeprueft. design-spec-v2.md §5.2.
   data-frage sitzt am Wurzelelement der jeweiligen Seite, nicht hier.
   ====================================================================== */
.fragenliste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.frage {
  border-top: 1px solid var(--linie);
  padding-top: var(--a4);
  margin-top: var(--a6);
}
.frage:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.fkopf {
  display: flex;
  align-items: baseline;
  gap: var(--a3);
  flex-wrap: wrap;
  margin-bottom: var(--a2);
}
.fkopf .nr {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--t-md);
  background: var(--tinte);
  color: var(--papier);
  border: 1px solid var(--tinte);
  padding: 0 var(--a1);
}
.fkopf .herkunft { margin: 0 0 0 auto; }
.ftext {
  font-size: var(--t-frage);
  line-height: 1.45;
  max-width: var(--spalte);
  margin: 0 0 var(--a3);
}
.mehr {
  font-family: var(--schrift-eng);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--messing-text);
  margin: 0 0 var(--a3);
}
.fragenbild {
  display: block;
  border: 1px solid var(--linie-stark);
  margin-bottom: var(--a4);
  max-width: min(100%, var(--spalte));
  width: auto;
  height: auto;
}


/* == Antwortzeile =======================================================
   Formularzeile in drei Spalten: Buchstabenzelle, Antworttext, Ankreuzfeld.
   Klassennamen sind Vertrag, siehe Kopf von templates/_makros.html.
   ====================================================================== */

.antwortliste {
  list-style: none;
  margin: 0 0 var(--a5);
  padding: 0;
  border-top: 1px solid var(--linie-stark);
  max-width: var(--spalte);
}

.antwortzeile {
  display: grid;
  grid-template-columns: 1.75rem 1fr 1.75rem;
  align-items: stretch;
  border-bottom: 1px solid var(--linie);
  /* C-11: eine kurze Antwort ("28", "Tandem") ergab sonst eine 40px hohe
     Zeile — 4px unter der Trefferflaeche aus Plan 9.3. Gemessen von Slice A
     an vier Breiten, in beiden Varianten. */
  min-height: 44px;
}
/* Die Eingabe-Variante legt ein label ueber die ganze Zeile. Es wiederholt das
   Spaltenmass, statt subgrid zu benutzen: subgrid haette hier eine
   Browserabhaengigkeit an der wichtigsten Komponente der Anwendung, und ein
   Rueckfall auf eine einspaltige Darstellung waere unbedienbar. */
.antwortzeile > label {
  display: grid;
  grid-template-columns: 1.75rem 1fr 1.75rem;
  grid-column: 1 / -1;
  align-items: stretch;
  min-height: 44px;
  cursor: pointer;
}
.antwortzeile > label:hover { background: var(--papier-rand); }

.antwortzeile .b {
  font-family: var(--schrift-zahl);
  font-size: var(--t-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--linie);
  color: var(--tinte-schwach);
}
.antwortzeile .t {
  padding: var(--a3) var(--a4);
  font-size: var(--t-txt);
  line-height: 1.45;
}
.antwortzeile .k {
  border-left: 1px solid var(--linie);
  display: flex;
  align-items: center;
  justify-content: center;
}
.antwortzeile .k i {
  width: 14px;
  height: 14px;
  border: 1px solid var(--tinte);
  background: var(--papier);
  display: block;
}
.antwortzeile .k i.an { background: var(--tinte); }

/* Zustaende */
.antwortzeile.gewaehlt { background: var(--papier-tief); }
.antwortzeile.gewaehlt .b {
  background: var(--tinte);
  color: var(--papier);
  border-right-color: var(--tinte);
}
.antwortzeile.richtig { background: var(--richtig-weich); }
.antwortzeile.richtig .b {
  background: var(--richtig);
  color: var(--urteil-text);
  border-right-color: var(--richtig);
}
.antwortzeile.falsch { background: var(--falsch-weich); }
.antwortzeile.falsch .b {
  background: var(--falsch);
  color: var(--urteil-text);
  border-right-color: var(--falsch);
}

/* Urteilszeile unter dem Antworttext, traegt die Marken */
.urteil {
  display: block;
  margin-top: var(--a1);
}
.urteil .mrk + .mrk { margin-left: var(--a1); }

/* Herkunftszeile: Kategorie, Kennung, Stufe, Quelle einer Frage */
.herkunft {
  font-family: var(--schrift-zahl);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
  margin: 0 0 var(--a2);
  overflow-wrap: break-word;
  word-break: break-word;
}


/* Anmerkungsblock: Erklaerung oder Vorbehalt unter einer Frage.
   Gemeinsam von Lernmodus, Nachschlagen und Admin-Prueflauf.
   Rahmen und Kopfzeile entfallen seit R-02 (Befund B-1): die Form ist die
   der .meldung ohne Rahmen — ein Mittel weniger, kein neues. Das Label
   steht fett inline im ersten Satz statt in einer eigenen Kopfzeile. */
.anmerkung {
  border-left: 4px solid var(--messing);
  padding-left: var(--a4);
  margin: var(--a4) 0;
  max-width: var(--spalte);
}
.anmerkung b { font-family: var(--schrift-eng); }
.anmerkung .txt { margin: 0; font-size: var(--t-md); }
.anmerkung .quelle {
  display: block;
  font-family: var(--schrift-zahl);
  font-size: var(--t-xs);
  color: var(--tinte-schwach);
  margin-top: var(--a3);
}

/* == Frage melden =======================================================
   <details class="melden"> aus templates/_makros.html::meldeformular, in
   einer .aktionen-Reihe (die Druckausblendung bleibt deren Sache). Der
   summary traegt bereits .leise (Aktionsstufe 3) fuer Farbe und
   Grundlinie; hier nur das Aufklappzeichen und der Raum fuer das Formular.

   Aufklappzeichen wie bei .frage > summary (40-lernen-konten.css): natives
   Dreieck aus, eigenes +/- aus dem Zeichensatz statt eines Chevrons —
   dasselbe Zeichenpaar, nur dem Kontext angepasst. Dort steht die Marke
   absolut am rechten Rand einer vollen Formularzeile; hier ist der summary
   eine kurze Leise-Zeile ohne eigene Breite, deshalb folgt das Zeichen dem
   Text im normalen Fluss statt an eine Kante geheftet zu werden.
   ====================================================================== */
.melden > summary { list-style: none; }
.melden > summary::-webkit-details-marker { display: none; }
.melden > summary::after {
  content: "+";
  margin-left: var(--a2);
  font-family: var(--schrift-zahl);
  font-weight: 700;
}
.melden[open] > summary::after { content: "\2212"; }

/* Abstand nach oben zwischen dem Aufklappzeichen und dem Formular, im
   Rasterschritt statt beilaeufig aus der Marge des Label-Feldhinweises. */
.melden form { margin-top: var(--a4); }

/* Satzbreite wie jedes andere Textfeld der Frage (.ftext, .anmerkung). */
.melden textarea { max-width: var(--spalte); }

/* == Eigene Zeichen =====================================================
   Aus dem Fahrsport abgeleitet, abstrakt, ohne Pferdesilhouette.
   Die Kerbenmuster sind eingebettete SVG statt Farbverlauf: das System
   kommt ohne jede Verlaufsfunktion aus.
   ====================================================================== */

/* Spur: zwei parallele Linien, aus der Spurweite des Wagens.
   Hauptteilung zwischen Abschnitten. */
.spur {
  height: 4px;
  border-top: 1px solid var(--tinte);
  border-bottom: 1px solid var(--tinte);
}
.spur-fein {
  height: 3px;
  border-top: 1px solid var(--linie-stark);
  border-bottom: 1px solid var(--linie-stark);
}

/* Lochleiste: Linie mit gleichmaessigen Kerben im 9px-Raster, aus der
   Achenbach-Leine. Feine Teilung unter Abschnittstiteln. */
.lochleiste {
  height: 7px;
  border-top: 1px solid var(--linie-stark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='4'%3E%3Crect width='1' height='4' fill='%23B4AE9F'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 0;
}

/* Messskala: Anteil mit Zehntelkerben und Messingstrich bei der
   Bestehensgrenze. Ersetzt jeden Fortschrittsring und jeden Donut. */
.mess {
  display: block;
  position: relative;
  height: 9px;
  border: 1px solid var(--linie-stark);
  background: var(--papier);
  min-width: 4rem;
}
/* Fuellbreite. Angefordert von Slice A und Slice B.

   Die Vorlage setzt data-anteil an der Skala selbst, nicht eine Klasse am
   Fuellelement: der Anteil beschreibt den Balken, und der Balken traegt auch
   die Bestehensgrenze (.grenze). Beide Angaben gehoeren an dasselbe Element,
   sonst streiten zwei Elemente darum, wem das Verhaeltnis gehoert.

   Fuenferschritte, weil die Skala ohnehin nur Zehntelkerben zeigt. Ein
   style-Attribut kommt nicht in Frage: es haelt 'unsafe-inline' in der CSP
   dauerhaft am Leben (Regel 5.2/4).

       <span class="mess grenze" data-anteil="85"><i></i></span>
*/
.mess { --anteil: 0%; }
.mess i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--anteil);
  background: var(--tinte);
}

.mess[data-anteil="0"] { --anteil: 0%; }
.mess[data-anteil="5"] { --anteil: 5%; }
.mess[data-anteil="10"] { --anteil: 10%; }
.mess[data-anteil="15"] { --anteil: 15%; }
.mess[data-anteil="20"] { --anteil: 20%; }
.mess[data-anteil="25"] { --anteil: 25%; }
.mess[data-anteil="30"] { --anteil: 30%; }
.mess[data-anteil="35"] { --anteil: 35%; }
.mess[data-anteil="40"] { --anteil: 40%; }
.mess[data-anteil="45"] { --anteil: 45%; }
.mess[data-anteil="50"] { --anteil: 50%; }
.mess[data-anteil="55"] { --anteil: 55%; }
.mess[data-anteil="60"] { --anteil: 60%; }
.mess[data-anteil="65"] { --anteil: 65%; }
.mess[data-anteil="70"] { --anteil: 70%; }
.mess[data-anteil="75"] { --anteil: 75%; }
.mess[data-anteil="80"] { --anteil: 80%; }
.mess[data-anteil="85"] { --anteil: 85%; }
.mess[data-anteil="90"] { --anteil: 90%; }
.mess[data-anteil="95"] { --anteil: 95%; }
.mess[data-anteil="100"] { --anteil: 100%; }
.mess.knapp i { background: var(--messing); }
.mess::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='9' preserveAspectRatio='none'%3E%3Crect x='9.5' width='0.5' height='9' fill='%23B4AE9F'/%3E%3C/svg%3E");
  background-size: 10% 100%;
}
.mess.grenze::before {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 80%;
  width: 1px;
  background: var(--messing-text);
}

/* Parcours: der Frageindex als Torfolge aus Kegelpaaren, aus dem
   Hindernisfahren. Durchfahren heisst gefuellt. */
.parcours { display: flex; flex-wrap: wrap; gap: var(--a3) 2px; }
.tor {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 5px);
  gap: 3px;
  justify-content: center;
  /* 25x29px Trefferflaeche. WCAG 2.2 AA 2.5.8 verlangt mindestens 24x24;
     mit 5px seitlichem Innenabstand waren es 23px (Befund Slice A). */
  padding: 2px 6px 14px;
  text-decoration: none;
}
.tor i {
  width: 5px;
  height: 13px;
  border: 1px solid var(--linie-stark);
  display: block;
}
.tor b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  font-family: var(--schrift-zahl);
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--tinte-schwach);
}
.tor.durch i { background: var(--tinte); border-color: var(--tinte); }
.tor.durch b { color: var(--tinte); }
.tor.markiert i:first-child { background: var(--messing); border-color: var(--messing); }
.tor.jetzt { background: var(--papier-tief); outline: 1px solid var(--tinte); }

/* == Untere Zellenleiste ================================================
   Hauptnavigation auf dem Handy, ersetzt unter 36rem die rollende Kopfleiste
   (Befund B-5). Formsprache wie .kopfleiste nav a[aria-current], nur am
   unteren Rand. design-spec-v2.md §5.4b/§6.5. Markup: templates/base.html
   (R-03), Namen verbindlich seit Umsetzungsplan v2 §3.

   Ausserhalb 36rem unsichtbar (die Umschaltung steht im Umbruch-Block
   unten). Auf /pruefung weicht sie der .bogenfuss (Umsetzungsplan v2 §4,
   Risiko "Die untere Leiste verdeckt die Abgabe des Bogens"): body.bogen
   ist der Haken aus dem Vertrag in §3 (<body class="{% block
   seitenklasse %}">), den quiz.html setzt.

   Im Druck ausgeblendet: die Leiste ist ein <nav>, die Ausblendeliste in
   00-basis.css nennt das Element bereits — ein zweiter, expliziter Eintrag
   dort ist bei R-01 angefordert (kein Verlass auf den Elementnamen). */
.leiste-unten {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--papier);
  border-top: var(--rang-a);
  padding-bottom: env(safe-area-inset-bottom);
}
.leiste-unten .zelle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: var(--leiste-unten);
  border-right: var(--rang-b);
  font-family: var(--schrift-eng);
  font-size: var(--t-xs);
  color: var(--tinte);
  text-decoration: none;
  text-align: center;
  padding: 0 var(--a2);
}
.leiste-unten .zelle .zelle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.leiste-unten .zelle .zelle-text {
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.leiste-unten .zelle:last-child { border-right: 0; }
.leiste-unten .zelle[aria-current] {
  background: var(--tinte);
  color: var(--papier);
  font-weight: 600;
}


/* == Druckbausteine der Bogen-Werkstatt =================================
   Deckblatt, Schreiblinien und Loesungs-Kurzraster gehoeren keiner
   Flaechendatei: die Werkstatt (P17c) druckt sie aus eigenen Vorlagen,
   und die Schreiblinien braucht ausserdem jede freitext- oder
   zuordnung-Frage auf Papier. Feinplan P17, Entscheidung D6.

   Alle drei sind fuer Papier gebaut und am Bildschirm bewusst schlicht —
   dort stehen sie nur in der Vorschau der Werkstatt. Keiner von ihnen
   fuehrt eine background-Angabe: was auf Papier tragen soll, besteht aus
   Linien. Eine Flaeche verschwindet im Standarddruck rueckstandslos, weil
   der Chrome-Druckdialog Hintergrundgrafiken voreingestellt abschaltet
   (Druckpruefmassstab I9, docs/qa/rasterbogen-design-print.md).
   ====================================================================== */

/* -- Schreiblinie: das Grundmass des Handschriftfeldes ------------------
   Eine Linie zum Ausfuellen von Hand, in zwei Verwendungen: einzeln und
   beschriftet im Deckblatt (.dfeld), gestapelt als Antwortfeld einer
   freitext- oder zuordnung-Frage (.schreiblinien).

   Hoehe var(--a8) = 32px = 8,5mm. Das ist die uebliche Schreibhoehe eines
   Formulars und zugleich der oberste Wert der Abstandsskala — die Linien
   sitzen damit im 4px-Raster wie alles andere.

   Farbe --linie-kontrast und nicht --linie-stark: auf Papier ist die
   Schreiblinie das bedienbare Element, das Gegenstueck zum Eingabefeld am
   Bildschirm. --linie-stark ist der Ton der RUHENDEN Flaechen und verfehlt
   in dieser Rolle den Kontrast (Befund B-2, Marke im Kopf von
   00-basis.css).
   ---------------------------------------------------------------------- */
.schreiblinie {
  display: block;
  height: var(--a8);
  border-bottom: 1px solid var(--linie-kontrast);
}

/* Antwortfeld auf Papier fuer die Typen ohne Antwortliste (Feinplan D5:
   freitext und zuordnung sind im Bogen nicht ausgeschlossen, sie brauchen
   nur diesen Baustein). Wie viele Linien es sind, entscheidet die Vorlage
   ueber die Zahl der Kinder — der Baustein zaehlt nicht mit.

     <div class="schreiblinien">
       <span class="schreiblinie"></span>   n-mal
     </div>

   Die Oberkante wiederholt bewusst die Oberkante der .antwortliste: eine
   geschriebene Antwort und eine angekreuzte sind dieselbe Sache an
   derselben Stelle der Frage und beginnen deshalb mit derselben Linie. */
.schreiblinien {
  max-width: var(--spalte);
  margin: 0 0 var(--a5);
  border-top: 1px solid var(--linie-stark);
}

/* -- Deckblatt ----------------------------------------------------------
   Erste Seite eines Turnierbogens. Zielbild sind die vermessenen Vorlagen
   (docs/Vorlage.docx, Brieselang 2022, Golzow 2025): Titel,
   Turnierbezeichnung, Datum, die Handschriftfelder Name/Vorname/
   Startnummer und ein umrandeter Notenkasten.

   Markupvertrag — die Vorlage baut P17c, dieser Baustein nur das Aussehen:

     <section class="deckblatt">
       <p class="dmarke">…</p>                 optionale Kleinzeile
       <h1 class="dtitel">Theorieprüfung</h1>
       <p class="dturnier">Brieselang</p>
       <p class="ddatum">30.–31. Juli 2022</p>
       <dl class="dangaben">
         <div class="dangabe"><dt>Fragen</dt><dd>30</dd></div>   beliebig oft
       </dl>
       <div class="dhand">
         <p class="dfeld"><span class="dname">Name</span>
                          <span class="schreiblinie"></span></p>  beliebig oft
       </div>
       <div class="dnote">
         <p class="dnotekopf">Note</p>
         <div class="dnotefeld"></div>
         <p class="dnotefuss">…</p>            optional
       </div>
     </section>

   break-after: page steht bewusst NICHT hier, sondern in der Vorlage
   (P17c): ob der Fragenteil auf einem neuen Blatt beginnt, entscheidet die
   Ausgabe, nicht der Baustein — am Bildschirm soll ein Deckblatt keine
   Seite umbrechen.

   Der Titel bleibt auf var(--t-xl) = 26px. „Grosser Titel" heisst hier der
   groesste Titel, den das System kennt: DESIGN.md deckelt jeden Text bei
   26px und laesst genau eine Ausnahme zu, den Punktstand der Auswertung.
   Auf A4 sind 26px 19,5pt und tragen die Seite.
   ---------------------------------------------------------------------- */
.deckblatt {
  max-width: var(--spalte);
  border-bottom: var(--rang-a);
  padding-bottom: var(--a7);
  margin-bottom: var(--a7);
}
.dmarke {
  font-family: var(--schrift-eng);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
  margin: 0 0 var(--a3);
}
.dtitel {
  font-weight: 700;
  margin: 0 0 var(--a2);
}
.dturnier {
  font-family: var(--schrift-eng);
  font-size: var(--t-lg);
  margin: 0 0 var(--a1);
}
.ddatum {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-md);
  color: var(--tinte-schwach);
  margin: 0 0 var(--a6);
}

/* Bestandsangaben des Bogens. Nicht die .datenzeile: die wird im Druck
   ausgeblendet (00-basis.css) und ist der Kopf einer Bildschirmansicht;
   diese Zeile hier gehoert dem gedruckten Dokument und muss stehen
   bleiben. Zwischen zwei Rang-B-Linien statt in einem Kasten. */
.dangaben {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2) var(--a7);
  margin: 0 0 var(--a7);
  padding: var(--a3) 0;
  border-top: var(--rang-b);
  border-bottom: var(--rang-b);
}
.dangabe {
  display: flex;
  align-items: baseline;
  gap: var(--a2);
}
.dangabe dt {
  font-family: var(--schrift-eng);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
}
.dangabe dd {
  margin: 0;
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-md);
  font-weight: 700;
}

.dhand { margin: 0 0 var(--a7); }
.dfeld {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  align-items: end;
  gap: var(--a4);
  margin: 0 0 var(--a5);
}
.dname {
  font-family: var(--schrift-eng);
  font-size: var(--t-sm);
}

/* Notenkasten. Der einzige Rahmen des Deckblatts und bewusst ein Rang C:
   auf Papier ist das eine Gruppe von Feldern, die zusammen ausgefuellt
   wird — nur von Hand statt ueber ein Formular. Er umschliesst keinen
   Inhalt, der seine Kante schon mitbringt, er steht nicht geschachtelt,
   und er ist der einzige auf der Seite. Die Einschraenkungen aus DESIGN.md
   sind damit eingehalten, und der Rahmen traegt hier wirklich Information:
   er zeigt der Pruefungskommission, wohin die Note geschrieben wird. */
.dnote {
  border: var(--rang-c);
  max-width: 22rem;
}
.dnotekopf {
  font-family: var(--schrift-eng);
  font-size: var(--t-sm);
  padding: var(--a2) var(--a4);
  margin: 0;
  border-bottom: 1px solid var(--linie-stark);
}
/* Schreibflaeche der Note: zwei Schreibhoehen, damit auch eine Bemerkung
   danebenpasst. Keine Flaeche, keine Linie im Inneren — der Rahmen
   umschliesst sie bereits. */
.dnotefeld { height: calc(var(--a8) * 2); }
.dnotefuss {
  font-family: var(--schrift-eng);
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
  margin: 0;
  padding: var(--a2) var(--a4);
  border-top: 1px solid var(--linie-stark);
}

/* -- Loesungs-Kurzraster ------------------------------------------------
   Nummer -> Buchstabe(n), so dicht wie moeglich. Vorbild ist
   docs/Lösungsbogen.docx: eine platzsparende Tabelle, aus der der Richter
   im Vorbeigehen abliest. Sie steht im Loesungsdokument ueber der
   vollstaendigen Liste mit markierten Antworten (Feinplan D8) und im
   Pruefungsbogen nie — dort existiert die Loesung nicht als Markup.

     <ol class="kurzraster">
       <li><span class="nr">1</span><span class="lsg">B</span></li>
       <li><span class="nr">2</span><span class="lsg">A, C</span></li>
     </ol>

   Mehrspaltig ueber auto-fill statt ueber eine feste Spaltenzahl: die
   Zellenbreite ist die Vorgabe, wie viele nebeneinander passen, entscheidet
   das Blatt. Auf A4 sind das sechs, auf dem Handy zwei — ohne eine zweite
   Regel. Die Linien sind Rang B, dieselbe Teilung wie zwischen zwei
   Tabellenzeilen; oben und links schliessen sie das Raster.
   ---------------------------------------------------------------------- */
.kurzraster {
  list-style: none;
  margin: 0 0 var(--a7);
  padding: 0;
  max-width: var(--spalte);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  border-top: var(--rang-b);
  border-left: var(--rang-b);
}
.kurzraster li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  border-right: var(--rang-b);
  border-bottom: var(--rang-b);
}
/* Die Nummer sitzt in ihrer eigenen Zelle und darf deshalb zentriert
   stehen — die einzige Ausnahme von der linksbuendigen Ausrichtung. */
.kurzraster .nr {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
  color: var(--tinte-schwach);
  text-align: center;
  align-self: stretch;
  padding: var(--a2) 0;
  border-right: var(--rang-b);
}
.kurzraster .lsg {
  font-family: var(--schrift-zahl);
  font-weight: 700;
  font-size: var(--t-md);
  padding: var(--a2) var(--a3);
}

/* == Umbrueche ========================================================== */

@media (max-width: 62rem) {
  .zweispaltig { grid-template-columns: 1fr; }
  .zweispaltig > :first-child {
    border-right: 0;
    border-bottom: 1px solid var(--linie);
    padding-right: 0;
    padding-bottom: var(--a6);
    margin-bottom: var(--a6);
  }
  .zweispaltig > :last-child { padding-left: 0; }
}

@media (max-width: 36rem) {
  /* Die Verkleinerung des Fliesstextes unter 36rem entfaellt ersatzlos
     (Befund B-4, design-spec-v2.md §5.3): sie traf genau das Geraet mit den
     schlechtesten Sehbedingungen. Platz kommt stattdessen aus der
     entfallenden Kopfleisten-Datenzeile und dem Innenabstand von main. */
  main {
    padding: var(--a5) var(--a4)
      calc(var(--leiste-unten) + env(safe-area-inset-bottom) + var(--a6));
    border-left: 0;
    border-right: 0;
  }

  .kopfleiste .oben { flex-wrap: wrap; }
  .wortmarke {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--linie);
  }
  /* Umbruch statt rollendem Streifen (Befund B-5): die Zeile brach vorher
     nicht um und versteckte "Passwort"/"Abmelden" ohne jeden Hinweis, dass
     dort noch etwas ist. Umbruch ist ehrlich, Rollen ohne Hinweis nicht. */
  .kopfleiste nav { width: 100%; flex-wrap: wrap; }
  .kopfleiste .wer {
    margin-left: 0;
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--linie);
  }
  .datenzeile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .datenzeile .zelle {
    min-width: 0;
    padding: var(--a2) var(--a3);
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .datenzeile .v {
    font-size: var(--t-sm);
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .datenzeile .zelle:nth-child(2n) {
    border-right: 0;
  }
  .datenzeile .zelle:nth-child(n+3) {
    border-top: 1px solid var(--linie);
  }


  /* Was die untere Zellenleiste bereits traegt, steht oben nicht noch
     einmal: zwei Zeilen Navigation kosteten 93px, eine kostet 46,5px.
     AUSNAHME /pruefung: dort ist die untere Leiste ausgeblendet
     (body.bogen), die Kopfleiste ist der einzige Weg. Ohne
     body:not(.bogen) haette der Bogen auf dem Handy gar keine
     Navigation mehr. */
  body:not(.bogen) .kopfleiste nav a.auch-unten { display: none; }

  /* Knapperer Innenabstand waagerecht, damit die verbleibenden Eintraege
     sicher in EINE Zeile passen. Senkrecht bleibt --a4: die Zellenhoehe
     von 45px ist die Trefferflaeche und darf nicht unter 44px fallen. */
  .kopfleiste nav a,
  .kopfleiste nav button { padding-left: var(--a4); padding-right: var(--a4); }

  /* Die Kennung braucht keine Desktop-Hoehe: 12px -> 6px oben und unten. */
  .kopfleiste .wer { padding-top: var(--a2); padding-bottom: var(--a2); }

  .leiste-unten { display: grid; }
  /* Auf /pruefung ist Wegnavigieren waehrend eines Bogens nicht die
     Aufgabe; der Weg zurueck steht in der Kopfleiste, und die Leiste weicht
     der .bogenfuss (20-pruefung.css, Worker A). Haken: body.bogen aus dem
     Seitenklassen-Vertrag in templates/base.html (R-03). */
  body.bogen .leiste-unten { display: none; }

  .adminleiste {
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    contain: paint;
    -webkit-overflow-scrolling: touch;
  }
  .adminleiste .wer { display: none; }



  .antwortzeile,
  .antwortzeile > label { grid-template-columns: 1.5rem 1fr 1.5rem; }
  main {
    padding-left: var(--a3);
    padding-right: var(--a3);
  }

  .schmalform {
    width: 100%;
    max-width: 100%;
    padding: var(--a4);
  }
  .feldblock {
    max-width: 100%;
  }
  .feldblock > .koerper {
    padding: var(--a4);
  }
  .feldblock > .fuss {
    padding: var(--a3) var(--a4);
    flex-direction: column;
    align-items: stretch;
    gap: var(--a2);
  }
  .feldblock > .fuss .hinweis,
  .feldblock > .fuss span {
    text-align: left;
  }
  .feldreihe {
    grid-template-columns: 1fr;
  }
  .werkzeug {
    padding: var(--a3) 0;
    gap: var(--a3);
  }
  .werkzeug label {
    width: 100%;
    max-width: 100%;
  }
  .werkzeug input,
  .werkzeug select {
    width: 100%;
    max-width: 100%;
  }
  .werkzeug button {
    width: 100%;
  }
  .titelzeile {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--a2);
  }
  .titelzeile .beiwort {
    width: 100%;
  }
  .fkopf .herkunft {
    margin-left: 0;
    width: 100%;
  }
}




/* == Druck ==============================================================
   Diese Datei fuehrt einen eigenen Druckblock, seit die Bogen-Werkstatt
   (P17) gemeinsame Druckbausteine gebraucht hat. Er steht am Dateiende und
   damit hinter allen Bildschirmregeln; die Flaechendateien laden danach und
   behalten das letzte Wort ueber ihre eigenen Teile (20-pruefung.css setzt
   den Bogenkopf und die Abstaende der .frage, 30-admin.css die Tabellen).

   Auf Papier sind Schwarz und Weiss absolut — Papier hat keinen Modus, und
   die Marken sind fuer den Bildschirm gemessen. Das ist die einzige
   Ausnahme, die DESIGN.md vom Markenblock zulaesst.
   ====================================================================== */

@media print {

  /* -- Seitengeruest -----------------------------------------------------
     00-basis.css setzt main im Druck bereits auf randlos und weiss. Die
     Regel greift aber nicht: `main` hat dort dieselbe Spezifitaet wie
     `main` hier, und diese Datei laedt spaeter — der Bildschirmzustand
     gewinnt also gegen den Druckzustand der Basisdatei. Gemessen kostete
     das eine LEERE Blattseite: die 32px Innenabstand am Fuss von main
     ragten hinter die letzte Frage und erzwangen ein weiteres Blatt
     (10 Fragen, 3 Seiten statt 2). Dazu druckte main seine Blattflaeche
     und die beiden senkrechten Linien mit.

     Die Rueckgabe steht hier und nicht in 00-basis.css, weil sie genau die
     Regel zuruecknimmt, die hier oben steht. „Keine leeren Seiten" ist ein
     Punkt des Druckpruefmassstabs. */
  main {
    max-width: none;
    margin: 0;
    padding: 0;
    border-left: 0;
    border-right: 0;
    background: #fff;
    min-height: 0;
  }

  /* -- Dichte der Antwortzeile ------------------------------------------
     ENTSCHEIDUNG (Design-Spur P17, 2026-08-20). Dichteziel: mindestens
     5 Fragen je Seite.

     Gemessen am erzeugten PDF (chrome --headless --print-to-pdf, A4
     594,96x841,92pt, ausgewertet mit PyMuPDF) brachte der Bogen vorher
     2,50 Fragen je Seite bei 10 Fragen und 3,00 bei 30 — die vermessenen
     Turniervorlagen (Brieselang 2022, Golzow 2025) bringen 5 bis 7.

     Die Ursache ist die min-height von 44px an der Antwortzeile. Sie steht
     in DESIGN.md unter Bestandsschutz, und das zu Recht: sie ist die
     Trefferflaeche fuer den Finger (Befund C-11 — kurze Antworten wie „28"
     oder „Tandem" ergaben sonst 40px). Auf Papier gibt es keinen Finger.
     Die 44px kosten dort nur Platz: eine einzeilige Antwort braucht
     natuerlich 39px, gedruckt reichen 21px (gemessen 15,4pt Zeilenhoehe).

     Die Uebersteuerung gilt deshalb AUSSCHLIESSLICH im Druck. Am
     Bildschirm bleibt die Regel unangetastet, in beiden Varianten der
     Zeile (Eingabe ueber das label, Auswertung ohne).

     Was NICHT angetastet wird, weil der Druckpruefmassstab daran haengt:
     das 14px-Ankreuzkaestchen aus border (00-basis.css, Befund I9), die
     Dreispaltigkeit der Zeile und break-inside: avoid an der Frage. Der
     Antworttext geht auf 10,5pt herunter und bleibt damit ueber der
     Untergrenze von 10pt fuer Fliesstext; die Frage bleibt bei 11pt
     (20-pruefung.css).
     -------------------------------------------------------------------- */
  .antwortzeile,
  .antwortzeile > label { min-height: 0; }

  /* Waagerecht bleibt der Innenabstand, senkrecht faellt er weg. Die Luft
     ueber und unter der Schrift kommt dann aus dem Zeilenkasten selbst:
     Zeilenabstand 1.45 auf 10,5pt laesst rund 2,3pt oben und unten stehen,
     der Text stoesst also nirgends an die Trennlinie. Das 14px-Kaestchen
     hat in der so entstandenen 21px-Zeile weiterhin Platz. Genau so sehen
     die Turniervorlagen aus: eine Liste aus Linien, kein Zellenraster mit
     Innenabstand. */
  .antwortzeile .t {
    padding: 0 var(--a3);
    font-size: 10.5pt;
  }
  /* Die Urteilszeile steht als eigener Block IM Antworttext und verliert
     mit dem Innenabstand ihre Grundlage — sie sass danach auf der
     Trennlinie. Der Abstand kommt deshalb an die Marken selbst zurueck.
     Auf dem Pruefungsbogen kostet das nichts: dort gibt es keine
     Urteilszeile, die Loesung existiert im gedruckten Bogen nicht als
     Markup (Loesungsleck-Probe I12). Betroffen ist allein die
     ausgedruckte Auswertung. */
  .urteil { margin-bottom: var(--a1); }
  /* Der Ueberfahren-Zustand ist am Bildschirm eine Rueckmeldung und auf
     Papier nur eine graue Flaeche, die einen Farbdruck kostet. */
  .antwortzeile > label:hover { background: transparent; }

  /* Die Abstaende der Frage selbst gehen mit: eine Zeile, die auf 21px
     zusammengeht, sitzt sonst in einem Rahmen aus Bildschirmluft. Der
     Abstand ZWISCHEN zwei Fragen bleibt unberuehrt — er gehoert der
     Flaechendatei (20-pruefung.css setzt margin-top und padding-top der
     .frage im Druck) und ist die einzige Teilung, die auf Papier noch
     zeigt, wo eine Frage aufhoert. */
  .antwortliste { margin-bottom: var(--a2); }
  .fkopf { margin-bottom: 0; }
  .ftext { margin-bottom: var(--a1); }
  .herkunft { margin-bottom: var(--a1); color: #000; }

  /* -- Trennlinien der Antwortzeile (Befund B4) -------------------------
     Die vier Linien, aus denen die Antwortzeile am Bildschirm besteht,
     drucken sonst in --linie (#D8D3C8) und --linie-stark (#B4AE9F). Beide
     Toene sind fuer den Bildschirm gemessen und ergeben auf Papier 1,43:1
     bzw. 2,12:1 — auf einem Laserdrucker sind sie kaum noch da. Es sind
     nicht wenige: ein Bogen mit 15 Fragen traegt 135 dieser Linien und 15
     der staerkeren.

     Auf Papier gibt es keine Abstufung von Ruhe und Struktur, die drei
     Grautoene noch tragen wuerden; es gibt Tinte oder nichts. Die vier
     Linien gehen deshalb auf Schwarz, genau wie .schreiblinie, .deckblatt
     und .kurzraster in diesem Block. Die Kaestchen sind nicht betroffen —
     sie drucken schon in Tinte (00-basis.css).

     Die Wirkung trifft bewusst JEDE Ausgabe, die eine Antwortzeile
     druckt: Pruefungsbogen, Loesungsbogen, Auswertung, Lernmodus,
     Nachschlagen. Die gefuellten Buchstabenzellen der aufgeloesten
     Ansicht regelt der Block direkt darunter mit.
     -------------------------------------------------------------------- */
  .antwortliste { border-top-color: #000; }
  .antwortzeile { border-bottom-color: #000; }
  .antwortzeile .b { border-right-color: #000; }
  .antwortzeile .k { border-left-color: #000; }

  /* -- Gefuellte Buchstabenzelle (Befund D-1 aus der P17c-Pruefung) -----
     Auf dem LOESUNGSBOGEN haengt der Buchstabe der richtigen Antwort
     vollstaendig an einer Flaeche: weisser Text auf gruener Fuellung.
     Ohne Hintergrundgrafiken — die Voreinstellung des Chrome-Druckdialogs
     — bleibt weisser Buchstabe auf weissem Papier stehen, gemessen an 15
     Stellen. Der Ausrichter druckt damit einen Loesungsbogen, auf dem die
     Loesung fehlt.

     Behandlung wie .fkopf .nr in 20-pruefung.css:342-346, dem Vorbild im
     Projekt: Flaeche weiss, Text schwarz, die Kante traegt. Auf Papier
     traegt kein Text, der die Farbe seines Untergrundes braucht.

     Alle DREI Zustaende, nicht nur richtig: .falsch .b hat dieselbe
     Konstruktion, und .gewaehlt .b setzt --papier auf --tinte, was
     dasselbe in Creme ist. Sie erscheinen zusammen in der gedruckten
     Auswertung.

     Die Bedeutung geht dabei nicht verloren, und das ist keine Nachsicht,
     sondern der Grund, aus dem DESIGN.md Farbe nie allein tragen laesst:
     die Urteilszeile nennt „richtig" und „deine Antwort" in Worten, und
     die Marken haben ihren eigenen Rahmen. Was verloren geht, ist die
     Farbe der Zelle im Farbdruck — gegen einen Buchstaben, der in JEDEM
     Druck dasteht, ist das kein Tausch, ueber den man lange nachdenkt.
     -------------------------------------------------------------------- */
  .antwortzeile.gewaehlt .b,
  .antwortzeile.richtig .b,
  .antwortzeile.falsch .b {
    background: #fff;
    color: #000;
    border-right-color: #000;
  }

  /* -- Rueckgaben an 00-basis.css --------------------------------------
     Dieselbe Falle wie beim Seitengeruest oben, nur an drei weiteren
     Stellen: 00-basis.css setzt es im Druckblock, diese Datei haelt mit
     GLEICHER Spezifitaet dagegen und laedt spaeter — der Bildschirmwert
     gewinnt gegen den Druckwert der Basisdatei. Aufgefallen bei der
     Farbmessung zu B4.

     Die Ruecknahmen stehen hier und nicht in 00-basis.css, weil sie genau
     die Regeln zuruecknehmen, die in dieser Datei oben stehen. Wer die
     Bildschirmregel spaeter aendert, findet die Druckseite daneben.

     Keine Slice-Datei kommt dazwischen: die Druckbloecke von
     20-pruefung.css, 30-admin.css und 40-lernen-konten.css fassen weder
     .tab/.buch noch das Ankreuzfeld an (nachgesehen, 30-admin.css setzt
     dort nur min-width und blendet die Aktionsspalten aus).
     -------------------------------------------------------------------- */

  /* Gedruckte Tabellen stehen in 10pt statt in 15px. 00-basis.css will das
     seit jeher; wirksam wird es erst hier. Betrifft vor allem die
     Adminlisten, die als einzige Ansicht breite Tabellen drucken. */
  .tab, .buch { font-size: 10pt; }

  /* Der Tabellenkopf druckt seine Flaeche nicht mit — weder die
     Kopfzeilenflaeche des Spaltenkopfs noch die Blattflaeche des
     Zeilenkopfs. Auf Papier traegt die Grundlinie in Tinte die Kopfzeile
     bereits; eine Flaeche kostet nur Farbe und ist ohne
     Hintergrundgrafiken ohnehin weg. */
  .tab thead th,
  .buch thead th,
  .tab tbody th,
  .buch tbody th { background: #fff; }

  /* Und dasselbe Argument wie bei B4, nur im Tabellenbaustein: das
     Zellenraster stand in --linie und war auf Papier praktisch nicht da
     (1,43:1) — gemessen 101 Linien in einer Liste von 14 Zeilen. Seit die
     Kopfzeile ihre Flaeche verloren hat und allein von der Grundlinie in
     Tinte getragen wird, faellt das zusaetzlich auseinander: Kopf in
     Tinte, Raster darunter unsichtbar. Also beides in Schwarz.
     Die Grundlinie des Spaltenkopfs stand ohnehin schon in Tinte und
     aendert sich dabei nur um den Rest bis #000. */
  .tab td, .buch td,
  .tab thead th, .buch thead th,
  .tab tbody th, .buch tbody th { border-color: #000; }

  /* Und die Fussnote aus dem B4-Bericht — beim Nachmessen kam heraus, dass
     sie zwei verschiedene Elemente betrifft. Das Ankreuzfeld gibt es in
     zwei Bauformen: das native Eingabefeld auf dem AUSZUFUELLENDEN Bogen
     (_makros.html::antwortformular) und das <i> in der aufgeloesten
     Ansicht (::antwortliste — Auswertung, Nachschlagen, Lernmodus).

     Beide fuellten in --papier (#FBFAF7) statt in Weiss. Auf weissem
     Papier sieht das niemand; auf einem Farblaser sind es ueber hundert
     cremefarbene Kaestchen je Bogen.

     Wichtig fuer den naechsten Leser: die Druckregel in 00-basis.css
     nennt nur `.antwortzeile .k i` und greift damit auf dem gedruckten
     Pruefungsbogen ueberhaupt nicht — dort steht ein input. Dass der Bogen
     trotzdem korrekte 14px-Kaestchen aus border zeigt, verdankt er allein
     der Bildschirmregel oben (C-12). Kein sichtbarer Fehler, aber die
     Absicht der Basisdatei traegt an dieser Stelle nichts; deshalb stehen
     hier beide Bauformen.

     Der angekreuzte Zustand bleibt in Tinte: :checked und .k i.an sind
     staerker. */
  .antwortzeile .k i,
  input[type="checkbox"],
  input[type="radio"] { background-color: #fff; }

  /* -- Schreiblinien ---------------------------------------------------- */
  .schreiblinie { border-bottom-color: #000; }
  .schreiblinien { border-top-color: #000; }

  /* -- Deckblatt -------------------------------------------------------- */
  .deckblatt { border-bottom-color: #000; }
  .dmarke,
  .ddatum,
  .dangabe dt,
  .dnotefuss { color: #000; }
  .dangaben {
    border-top-color: #000;
    border-bottom-color: #000;
  }
  .dnote { border-color: #000; }
  .dnotekopf,
  .dnotefuss { border-color: #000; }

  /* -- Loesungs-Kurzraster ---------------------------------------------- */
  .kurzraster,
  .kurzraster li,
  .kurzraster .nr { border-color: #000; }
  .kurzraster .nr { color: #000; }
  /* Das Kurzraster wird nicht zerrissen. Es ist der Teil des
     Loesungsbogens, den der Richter im Vorbeigehen abliest — ueber zwei
     Blaetter verteilt verliert er genau die Eigenschaft, fuer die es da
     ist. Gemessen passen 40 Loesungen in sechs Zeilen, das Blatt traegt
     sie immer. */
  .kurzraster {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}