/* =====================================================================
   Design-System der Übergabeplattform — editoriales Fundament
   (Oberflächen-Redesign Task 1, Plan docs/superpowers/plans/
    2026-08-11-oberflaeche-redesign.md)

   Haltung: hell, editorial, ruhig. Serif-Titel + Sans-Text, warmes
   Off-White statt Kaltweiß, feine Linien, nummerierte Struktur,
   durchgängiges Kartensystem, semantisches Farbsystem.

   Politur-Durchgang frontend-usability/17 (24.08.2026), Maßstab ADR-0029
   Satz 2 („die Plattform wirkt modern" — Fatimas K.-o.-Kriterium). Die
   Haltung oben bleibt; geändert wurden die Stellen, an denen sie falsch
   umgesetzt war. Sieben Eingriffe, jeder unten an seinem Ort begründet:
     1 Schrift: Georgia raus aus der Titelrolle, --font-display neu,
       Größen über clamp() statt zweier Sprünge in Abschnitt 13
     2 Fließtext: 14px/#555 -> 16px/#33332f, Zeilenmaß --mass (72 statt
       95 Zeichen), Versal-Kleinlabel einheitlich .75rem/.07em
     3 Abstände: Leiter --raum-1..7 statt 24 Einzelwerten
     4 Zustände: Fokusring 3px aus einer Rezeptur, Hover nur noch dort,
       wo etwas anklickbar ist, leere Zustände als eigene Form
     5 Zielgrößen: Knopf und Eingabefeld 2.75rem (44px), Eingaben 16px
       (unter 16px zoomt iOS beim Fokussieren hinein)
     6 Kopfleiste klebt, Sprungziele bekommen scroll-margin
     7 Sprunglink an der Navigation vorbei
   Keine Funktionsänderung, kein Skript, keine neue Abhängigkeit, keine
   externe Ressource — die CSP-Zwänge unten gelten unverändert.

   Zwänge (Sicherheitsregeln, nicht verhandelbar):
   · CSP script-src 'none' — kein JS. Aufklappen macht <details>,
     Umschalten macht :target. Keine Technik, die ein Skript braucht.
   · CSP style-src 'self' — kein style=""-Attribut, kein @import,
     kein CDN, keine externe URL. Jede Gestaltung steht in dieser Datei.
   · Keine url()-Referenz irgendwo — auch keine lokale (Nachtlauf:
     keine Font-Dateien, s. Abschnitt 1).

   Abschnittskarte
     1  Tokens (Plan-Block wörtlich + abgeleitete Werte)
     2  Grundlage: Reset, Körper, Fokus, Sprungabstand, Sprunglink, Links
     3  Gerüst: Hülle, Kopfleiste, Inhalt, Fuß
     4  Übersicht: persistente nummerierte Navigation
     5  Typografie: Titel, Kicker, Abschnittsnummern, Fließtext
     6  Kartensystem: .karte + Farbränder, Raster
     7  Aufklappen: <details class="aufklapp">
     8  Panelumschalter: :target ohne JS
     9  Bausteine: Badge, Zeitleiste, Tabelle, Knopf, Listen
    10  Formulare: Feldgruppe, Pflichtstern, Eingaben
    11  Rückmeldungen: Meldung, Fehlerliste, leere Zustände
    12  Sonderflächen: Prüffläche, Ortszeile, Karteikasten,
        Feedback-Knopf, Fehler
    12b Prozessketten-Gates am Vorgang (S2c)
    13  Schmale Schirme, Bewegungsarmut, Druck
    15  Bestellfläche: Muster-Nachzug der Bestell-Strecke
        (pruef-erlebnis/13 — steht bewusst HINTER 13/14, weil sie
         bestehende Bausteine benutzt statt neue zu setzen)
   ===================================================================== */


/* ---------- 1 Tokens -------------------------------------------------
   Der editoriale Charakter hängt an den Schrift-Tokens. Sie stehen auf
   System-Stacks (kein Netz, kein @font-face, keine Datei unter
   statisch/fonts/). Der spätere Fidelity-Upgrade (Plan Task 1 Step 2,
   braucht Manuels Go und einen sichtbaren Netz-Bezug) tauscht NUR diese
   Zeilen; kein struktureller Umbau, kein Eingriff in Komponenten.

   Politur Ticket 17 (frontend-usability, ADR-0029 Satz 2): Georgia stand
   hier als erste Wahl der Titelstimme — die Schrift, an der man eine
   Seite aus den 2000ern von weitem erkennt, und damit das genaue
   Gegenteil von „wirkt modern". Ersetzt durch die jüngeren Textserifen,
   die aktuelle Geräte wirklich mitbringen: Sitka (Windows 8.1+, in
   optischen Größen geschnitten), Iowan Old Style / Charter (macOS, iOS),
   Constantia (Office/Windows). Georgia bleibt als letzte Reserve stehen,
   damit auf einem alten Gerät nichts kippt — die Kette IST die ganze
   Technik, keine url(), keine Netz-Referenz.
   Zwei Rollen statt einer: --font-display trägt die großen Titel
   (Sitka Display ist für genau diese Größe geschnitten), --font-serif
   die Lesegrößen darunter (Untertitel, h2, Folientitel).        */
:root {
  --font-display: 'Sitka Display', 'Sitka Heading', Sitka, 'Iowan Old Style',
    Charter, Constantia, Georgia, serif;
  --font-serif: 'Sitka Text', Sitka, 'Iowan Old Style', Charter, Constantia,
    Georgia, serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI',
    Roboto, sans-serif;
  --papier:#faf9f7; --flaeche:#ffffff; --flaeche-warm:#f5f5f0;
  --text:#1a1a1a; --text-koerper:#33332f; --gedeckt:#777; --linie:#e3e3dd;
  /* semantisches Farbsystem (aus dem Vorbild, abstrahiert) */
  --navy:#1e3a5f; --gruen:#2d6a4f; --amber:#b45309; --lila:#7b2d8e;
  --rot:#dc2626; --blau:#0369a1;
}

/* Abgeleitete Werte. Nichts Neues gestalterisch — nur das, was aus dem
   Token-Block oben folgt, plus die drei Barrierefreiheits-Korrekturen,
   die Step 9 („Kontrast WCAG AA") verlangt:

   · --gedeckt (#777) trägt auf --papier nur 4,26:1. Das reicht für
     Großtext und Dekoration (Abschnittszahl, Punkte, Trennendes), NICHT
     für kleine Lauftexte (AA verlangt 4,5:1). Deshalb --gedeckt-text
     (#6b6b6b, 5,07:1 auf --papier) überall dort, wo gedeckte Schrift
     wirklich gelesen werden muss: Hilfetext, Kicker, Untertitel,
     Tabellenköpfe, Fuß.
   · --rot (#dc2626) liegt mit 4,59:1 auf --papier knapp über der Grenze.
     Für Fehlertexte, die man im Zweifel schnell lesen muss, nimmt
     --rot-tief (#b91c1c, 6,15:1) etwas Luft dazu. --rot bleibt die
     Signalfarbe für Ränder und Sterne.
   · --linie (Zierlinie, 1,29:1) darf keine Bedienelement-Grenze tragen
     (WCAG 1.4.11 verlangt 3:1). Eingabefelder bekommen --linie-feld
     (#8e8e88, 3,29:1).

   Nachgerechnet in Ticket 17 (Werte gegen --papier #faf9f7, Rechner im
   Bericht `.scratch/frontend-usability/berichte/ticket-17-bericht.md`):

   · --text-koerper trug als #555 nur 7,09:1 und wirkte bei 14 px wie
     ein ausgeblichener Ausdruck. Fließtext ist die Hauptsache dieser
     Fläche, nicht ihr Hintergrundrauschen: jetzt #33332f, 12,06:1
     (auf --flaeche 12,69:1, auf --flaeche-warm 11,60:1).
   · --gedeckt-text von #6b6b6b (5,06:1) auf #64645f (5,65:1) — bleibt
     die zweite Stimme, hält aber auch auf --flaeche-warm noch 5,44:1;
     dort lag der Altwert mit 4,87:1 unter AA.
   · --gedeckt (#777, 4,26:1) bleibt unverändert Dekoration (Großzahl,
     Punkte) und trägt weiterhin KEINEN Kleintext.
   · Der Fokusring (--navy) hält auf jedem Grund, auf dem er landet:
     10,93:1 auf --papier, 10,52:1 auf --flaeche-warm, 10,23:1 auf
     --navy-hauch.
   · Unverändert geprüft: Weiß auf --navy 11,50:1 (Knopf), auf
     --navy-tief 14,76:1 (Knopf gehovert); --rot-tief 6,15:1;
     --rot-tief auf --rot-hauch 5,72:1; --text auf allen vier
     Hauch-Flächen 15,4–15,9:1.                                    */
:root {
  --gedeckt-text:#64645f;
  --rot-tief:#b91c1c;
  --navy-tief:#16293f;
  --linie-feld:#8e8e88;
  /* Kante für Flächen, die als eigenständiger Körper gelesen werden
     (Karte, Tabelle, Kapsel). --linie allein (1,29:1) ließ sie auf dem
     warmen Papier zerfließen — das war ein Gutteil des „wirkt alt". */
  --linie-kraeftig:#d3d3ca;

  /* sehr blasse Flächen, aus dem Farbsystem abgeleitet */
  --navy-hauch:#eef2f7; --gruen-hauch:#eef4f1;
  --rot-hauch:#fbeeee;  --amber-hauch:#fcf3e8;
  /* Grund für „hier ist noch nichts" — wärmer als die Karte, damit ein
     leerer Zustand als Zustand erkennbar ist und nicht als Panne. */
  --leer-grund:#f2f1ec;

  --font-fest: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --breite: 64rem;      /* Lesebreite der Seite (.huelle) */
  /* N271-Endform (ADR-0033 Punkt 6, Ticket 03): Der Seitenrahmen wird
     NUR für die Prüffläche breiter — umgeschaltet in Abschnitt 3 über
     `body:has(.pruefflaeche)`, nie hier auf :root. 64rem sind die
     Lesebreite einer Textseite; eine Prüffläche ist ein Arbeitsplatz,
     auf dem Karten, Belegbilder und Auswahl-Ebenen nebeneinander
     beurteilt werden. Nachgerechnet: 72rem minus 2x1,5rem (--rand)
     minus 13rem Navigationsspalte minus 2,2rem Spaltenabstand = 53,8rem
     Prüfinhalt statt 31,8rem heute (die entfallene Gliederungsleiste
     bringt 13rem + 1,4rem davon, der Rahmen die restlichen 8rem). */
  --breite-pruef: 72rem;
  --feld: 34rem;        /* Höchstbreite von Eingabefeldern */
  --mass: 38rem;        /* Zeilenmaß des Fließtexts, s. Abschnitt 5 */
  /* N271 (Manuel, 24.08.2026): „Die Inhaltsspalte ist für Kurs-Prüfinhalte
     zu schmal.“ Stimmt — aber nur dort. 72 Zeichen sind das richtige Maß
     für einen Text, den man am Stück liest (Anmeldung, Bestellformular,
     Statusseiten); auf einer PRÜFfläche wird nicht gelesen, sondern
     nachgeschlagen und verglichen: Bildbeschreibungen, Folienkarten,
     Rückmeldetabellen. Dort kostet der Deckel Spalte, ohne etwas zu
     leisten.
     46rem waren dabei bis Ticket 03 die Breite der Inhaltsspalte selbst
     (64rem minus Rand, Navigationsspalte und Spaltenabstand) — der
     Deckel fiel damit praktisch weg. Seit der Endform ist die Spalte
     breiter als dieser Wert, und das ist ABSICHT: Der Zugewinn gehört
     den Karten, Bildern und Listen, nicht der Zeilenlänge. 46rem sind
     bei 16px rund 87 Zeichen — die Obergrenze dessen, was sich noch
     zeilenweise lesen lässt; alles darüber verliert beim Zeilenwechsel
     die Spur, und genau dieser Fehler soll nicht durch die Hintertür
     zurückkommen.
     Angewandt wird das an genau zwei Stellen (Abschnitt 12), nie global. */
  --mass-breit: 46rem;
  --rand: 1.5rem;       /* seitlicher Seitenrand */
  /* Höhe der klebenden Kopfleiste (Abschnitt 3). Kein Schätzwert: die
     Leiste ist per Bau genau so hoch — eine Zeile, feste Höhe, nichts
     bricht um (N254/B17-1). Wer die Zahl ändert, ändert damit auch das
     Polster der Ankersprünge; beide lesen dieselbe Variable. */
  --kopf-hoehe: 3.4rem;
  /* Höhe der klebenden Ortszeile der Prüffläche (Abschnitt 12). 2,75rem
     sind exakt EIN Bedienziel (44px, Abschnitt 9): der „Nach oben“-Link
     füllt die Leiste in der Höhe, damit die Zeile ohne Ausnahme von der
     44px-Zusage auskommt. */
  --ort-hoehe: 2.75rem;
  /* Wieviel klebt über dem Inhalt? Auf jeder Fläche die Kopfleiste; auf
     der Prüffläche zusätzlich die Ortszeile (umgeschaltet in Abschnitt
     3). Das eine Maß, aus dem das Polster der Ankersprünge (Abschnitt 2)
     und der Halt der Navigationsspalte (Abschnitt 4) folgen — statt an
     drei Stellen dieselbe Zahl zu schätzen (N254). */
  --klebe-hoehe: var(--kopf-hoehe);

  /* Abstandsleiter (Ticket 17). Vorher stand an jeder Stelle ein eigener
     Wert (2.4/1.8/1.4/1.2/1.1/.9/.7/.45rem …) — 24 verschiedene Maße auf
     einer Fläche ergeben keinen Rhythmus, sondern Unruhe. Vier Schritte
     tragen fast alles; die Leiter ist der Maßstab für alles Neue. */
  --raum-1: .25rem; --raum-2: .5rem;  --raum-3: .75rem; --raum-4: 1rem;
  --raum-5: 1.5rem; --raum-6: 2.25rem; --raum-7: 3.5rem;

  /* Seitlicher Innenabstand der Karte — als eigenes Token, weil zwei
     Regeln ihn kennen müssen: die Karte selbst und die Kapsel, die sich
     bis an den Kartenrand ausrückt (.karte > .aufklapp, Abschnitt 6).
     Die beiden standen als getrennte feste Werte da und liefen auf sehr
     schmalen Schirmen auseinander, wo Abschnitt 13 nur die Karte
     verengte (Befund und Reparatur: Ticket 17). */
  --karte-innen: 1.5rem;

  --radius: 12px; --radius-klein: 8px;
  /* Zwei Lagen statt einer: die enge Lage setzt die Karte auf das
     Papier, die weite gibt ihr Tiefe. Eine einzelne 1px-Lage sieht
     gedruckt aus, nicht gebaut. */
  --schatten: 0 1px 2px rgba(26, 26, 26, .05),
              0 1px 1px rgba(26, 26, 26, .03);
  --schatten-hoch: 0 6px 20px -6px rgba(26, 26, 26, .16),
                   0 2px 6px rgba(26, 26, 26, .05);
  /* Eine Fokus-Rezeptur für die ganze Fläche (Abschnitt 2). */
  --fokus-breite: 3px;
  --fokus-abstand: 2px;
}


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

html { -webkit-text-size-adjust: 100%; }

/* Körpertext: Sans, 16px (in rem, damit eine größere Browser-Grundschrift
   durchschlägt), Zeilenabstand 1.6.

   Ticket 17: Hier standen 14px in --text-koerper #555. Beides zusammen —
   klein UND grau — ist der stärkste einzelne Grund, warum die Fläche
   „alt" wirkte: so setzt man ein Verwaltungswerkzeug von 2012, nicht
   eine Fläche, auf der jemand 20.000 Zeichen liest und tippt. 16px ist
   außerdem die Grenze, unterhalb derer iOS beim Fokussieren eines
   Eingabefelds hineinzoomt (Persona P2 prüft am Handy). Der
   Zeilenabstand geht von 1.7 auf 1.6 zurück, weil größere Schrift
   weniger Durchschuss braucht, um ruhig zu bleiben. */
body {
  margin: 0;
  background: var(--papier);
  color: var(--text-koerper);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Sichtbarer Fokus überall — Tastaturbedienung ist Pflicht, nicht Zierde.
   Der Ring folgt der Eigenform des Elements (kein eigener Radius hier,
   sonst quadriert der Fokus runde Karten).
   Ticket 17: von 2px auf 3px. Der Ring liegt durch den Abstand immer auf
   dem Seitengrund, nie auf dem Element — dort trägt --navy 10,2–10,9:1
   (gemessene Werte in Abschnitt 1), also weit über den 3:1 aus WCAG
   1.4.11. Breiter heißt hier nicht lauter, sondern auf einem 390px-
   Schirm überhaupt auffindbar. */
:focus-visible {
  outline: var(--fokus-breite) solid var(--navy);
  outline-offset: var(--fokus-abstand);
}

/* Sprungmarken landen nicht unter dem, was klebt (Abschnitt 3 und 12).
   Betrifft jedes Ziel mit id — die Kapsel-Anker der Prüffläche (?anker=,
   ADR-0031), die Medien-Anker der Medienübersicht (ADR-0030) und die
   Feldsprünge aus der Fehlerliste. Ohne diese Zeile hätte die klebende
   Kopfleiste genau die Sprünge verdeckt, die Ticket 07/08 gebaut haben.

   N254 (Ticket 03): Hier stand `var(--kopf-hoehe)` — und daneben, im
   Schmal-Block, ein zweiter, GRÖSSERER Wert derselben Variablen, weil
   die Kopfleiste dort umbrechen konnte und ihre wirkliche Höhe niemand
   kannte. Ein Polster, das eine geschätzte Höhe abdeckt, ist entweder zu
   klein (das Ziel verschwindet) oder zu groß (es steht zu tief) — beides
   war zu sehen. Jetzt ist jede klebende Leiste per Bau genau so hoch wie
   ihr Token, und `--klebe-hoehe` addiert die, die auf DIESER Fläche
   wirklich stehen. Damit ist das Polster keine Schätzung mehr, sondern
   dieselbe Zahl. --raum-4 bleibt der sichtbare Luftraum darüber. */
[id] { scroll-margin-top: calc(var(--klebe-hoehe) + var(--raum-4)); }

/* Erster Halt der Tastatur auf jeder Seite: der Weg an der Navigation
   vorbei. Unsichtbar, bis er den Fokus hat — dann steht er als richtiger
   Knopf über der Kopfleiste. (Ticket 17, Qualitätsboden: fünf
   Übersichtseinträge auf jeder Seite vor dem Inhalt sind für eine
   Tastaturnutzerin fünf Tabs zu viel.) */
.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: var(--raum-2) var(--raum-4);
  background: var(--navy);
  color: var(--flaeche);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-klein) 0;
}
.sprunglink:focus { left: 0; }
/* Ziel des Sprunglinks. Es trägt tabindex="-1", damit der Fokus wirklich
   dorthin wandert — der Fokusring gehört hier aber nicht hin: er würde
   die halbe Seite umranden. Dieselbe Überlegung wie bei .feldgruppe
   (Abschnitt 10); den sichtbaren Beleg liefert das nächste fokussierte
   Bedienelement, nicht der Rahmen um den ganzen Inhalt. */
.inhalt-spalte:focus { outline: none; }

a {
  color: var(--navy);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .12s ease;
}
a:hover { color: var(--navy-tief); text-decoration-thickness: 2px; }

img, iframe, svg, video { max-width: 100%; }

hr { border: 0; border-top: 1px solid var(--linie); margin: 1.8rem 0; }


/* ---------- 3 Gerüst: Hülle, Kopf, Inhalt, Fuß -----------------------
   .huelle ist der Seitenrahmen: zentriert, auf Lesebreite begrenzt.
   Steht eine .uebersicht darin, wird sie zweispaltig (schmale
   Navigationsspalte links, Inhalt rechts) — entweder über den
   ausdrücklichen Modifikator .huelle--zweispaltig oder automatisch
   per :has(). :has() ist seit 2023 in allen aktuellen Browsern
   (Chrome/Edge 105+, Safari 15.4+, Firefox 121+); fällt es aus, stapeln
   Übersicht und Inhalt untereinander — dieselbe Darstellung wie auf
   schmalen Schirmen, also nutzbar statt kaputt. */
.huelle {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
}

/* N271-Endform, der EINE Schalter (ADR-0033 Punkt 6, Ticket 03).
   Die Prüffläche bekommt den breiteren Seitenrahmen — und zwar über das
   Token, das Hülle, Hauptspalte, Kopfleiste und Fuß ohnehin lesen. Damit
   wandern alle vier gemeinsam, statt dass eine Leiste bei 64rem stehen
   bleibt, während der Inhalt darunter breiter läuft.
   Warum am <body> und nicht an .pruefflaeche selbst: Eigenschaften
   vererben nach unten. Die Klasse sitzt tief in der Inhaltsspalte, die
   Elemente, die --breite lesen, liegen ÜBER ihr. `:has()` ist der eine
   Weg, von dort aus zu schalten, ohne dass der Server eine zweite
   Zusage rendern muss (dieselbe Technik und derselbe Vorbehalt wie beim
   Raster darunter: fehlt :has(), bleibt der Rahmen bei 64rem — enger als
   gedacht, nie kaputt).
   Die zweite Zeile ist die Buchführung über das Klebende: auf dieser
   Fläche steht unter der Kopfleiste zusätzlich die Ortszeile
   (Abschnitt 12), und das Polster der Ankersprünge muss beide kennen. */
body:has(.pruefflaeche) {
  --breite: var(--breite-pruef);
  --klebe-hoehe: calc(var(--kopf-hoehe) + var(--ort-hoehe));
}

.huelle--zweispaltig {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
}
/* Bewusst als EIGENE Regel, nicht als zweiter Selektor oben: eine
   Selektorliste, in der ein Teil ungültig ist, verwirft die GANZE Regel.
   So verliert .huelle--zweispaltig sein Raster nicht, wenn :has() fehlt. */
.huelle:has(> .uebersicht) {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
}
/* Grid-Kinder dürfen nie über ihre Spur hinauslaufen (Tabellen, <pre>). */
.huelle > * { min-width: 0; }

/* Einspaltige Seiten sind genau die Seiten ohne Konto: die Anmeldung und
   die Fehlerseite, die jemand anonym erwischt (basis.html setzt den
   Modifikator nur, wenn Fähigkeiten da sind). Beide bestehen aus einem
   Absatz und einem Formular — links an eine 64rem breite Fläche geklebt
   sehen sie aus wie ein Verwaltungswerkzeug, das man aufgezwungen
   bekommt. Als ruhige Spalte in der Mitte sind sie das, was sie sind:
   die Eingangstür (Ticket 17; ADR-0029 Satz 2 an der ersten Fläche
   überhaupt, die eine Erstnutzerin sieht). */
.huelle:not(.huelle--zweispaltig) > .inhalt-spalte {
  max-width: 44rem;
  margin: 0 auto;
}

/* Ticket 17: Die Kopfleiste klebt. Sie trägt den Weg zurück (die Marke)
   und das Abmelden — beides ist auf einer Kursseite mit 36 Medien sonst
   3.000 Pixel weiter oben. Kein Skript: `position: sticky` ist genau
   dafür da. Damit Sprungziele nicht darunter verschwinden, steht oben in
   Abschnitt 2 das passende scroll-margin; auf schmalen Schirmen bleibt
   die Leiste flach (Abschnitt 13), im Druck steht sie still. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

/* align-items: stretch statt center — nur so sitzt der Unterstrich der
   aktiven Seite exakt auf der Kopflinie und nicht knapp darüber.

   N254/B17-1 (Ticket 03): Hier standen `min-height` und `flex-wrap:
   wrap`. Zusammen hieß das: Die Leiste ist MINDESTENS --kopf-hoehe hoch
   und wächst, sobald der Platz nicht reicht — auf einem 390px-Schirm ab
   rund zehn Zeichen Anzeigename. Ihre wirkliche Höhe kannte damit
   niemand, und jedes Sprungziel, das sich an ihr orientiert, war eine
   Schätzung. `height` + `nowrap` machen daraus eine Zusage: eine Zeile,
   genau --kopf-hoehe, auf jedem Schirm. Was nicht hineinpasst, wird
   gekürzt (Marke und Anzeigename tragen beide ihr Ellipsen-Ende) —
   Kürzen ist sichtbar und harmlos, Umbrechen war unsichtbar und hat die
   Sprungziele verdeckt. */
.kopf-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
  height: var(--kopf-hoehe);
  display: flex;
  align-items: stretch;
  gap: 1.6rem;
  flex-wrap: nowrap;
}

/* Marke bewusst klein und ruhig (Manuel: Kopfleiste zurückhaltend —
   die Orientierung leistet die Übersicht, nicht der Kopf).
   Ticket 03: schrumpfbar statt starr (`0 1 auto` + min-width 0), damit
   die Zeile auch auf 320px nicht umbricht. Sie gibt erst nach, wenn der
   Anzeigename daneben schon an seiner Grenze ist (dessen shrink-Gewicht
   steht in Abschnitt 13). */
.marke {
  display: block;
  line-height: var(--kopf-hoehe);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--text);
  text-decoration: none;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.marke:hover { color: var(--navy); }

/* Anzeigename links neben Abmelden — gedeckt, nie lauter als die
   Navigation; lange Namen kürzen statt die Kopfzeile zu sprengen.
   Ticket 03, zwei Korrekturen an derselben Regel:
   * `margin-left: auto` schiebt Name und Abmelden an den rechten Rand.
     Bis hierher klebten beide direkt an der Marke — auf dem breiten
     Rahmen der Prüffläche stand die ganze Kopfleiste als Klumpen links.
   * `display: flex` machte das text-overflow daneben wirkungslos (die
     Ellipse braucht einen Blockcontainer, in einem Flexcontainer liegt
     der Text in einem anonymen Kind). Der lange Name wurde also nicht
     gekürzt, sondern hart abgeschnitten — und vor Ticket 03 brach er
     die Leiste um. `display: block` + `line-height` setzt ihn ebenso
     mittig und kürzt wirklich. */
.anzeigename {
  display: block;
  line-height: var(--kopf-hoehe);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 14rem;
  margin-left: auto;
  overflow: hidden;
  font-size: .875rem;
  color: var(--gedeckt-text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Der Abmelde-Knopf ist in der Kopfleiste bewusst klein — er soll
   erreichbar sein, nicht die zweitwichtigste Handlung der Seite. Die
   Mindesthöhe des Knopfsystems (Abschnitt 9) wird hier absichtlich
   unterschritten und deshalb ausdrücklich zurückgesetzt.
   Benannte Ausnahme Nr. 1 der 44px-Zusage — Begründung und Vollzähligkeit
   stehen bei der Grundregel in Abschnitt 9 (B17-2). */
.abmelden { display: flex; align-items: center; margin: 0; flex: 0 0 auto; }
.abmelden button {
  margin: 0;
  padding: .35rem .9rem;
  font-size: .875rem;
  min-height: 0;
}

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-6) var(--rand) var(--raum-7);
}

.fuss {
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--gedeckt-text);
  font-size: .875rem;
}
.fuss p {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-4) var(--rand);
}


/* ---------- 4 Übersicht: persistente nummerierte Navigation ----------
   Kontrakt für Task 2. Eine Liste von Bereichen, jeder mit zweistelliger
   Nummer — die Nummer macht die Struktur sichtbar und gibt der Seite
   ihren editorialen Zug. Auf schmalen Schirmen klappt sie über den
   Inhalt (Abschnitt 13), sie verschwindet nie. */
.uebersicht {
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  position: sticky;
  /* unter allem, was klebt, nicht dahinter — auf der Prüffläche also
     unter Kopfleiste UND Ortszeile (Ticket 03, dasselbe Maß wie das
     Polster der Ankersprünge in Abschnitt 2). */
  top: calc(var(--klebe-hoehe) + var(--raum-4));
  margin: 0 0 var(--raum-5);
}

/* Ticket 17: Der Eintrag ist ein Ziel, kein Textstück — 2,4rem Höhe
   (≈38px) treffen auch mit dem Daumen. Die Kante links wächst beim
   Hovern nicht, sie wechselt nur die Farbe: die Zeile darf beim
   Überfahren nicht springen. */
.uebersicht a {
  display: flex;
  align-items: baseline;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
  min-height: 2.4rem;
  font-size: .9375rem;
  color: var(--text-koerper);
  text-decoration: none;
  border-left: 3px solid var(--linie);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  transition: background-color .12s ease, border-color .12s ease;
}
.uebersicht a:hover {
  background: var(--flaeche-warm);
  color: var(--text);
  border-left-color: var(--gedeckt);
}
.uebersicht a.aktiv {
  background: var(--flaeche);
  color: var(--text);
  font-weight: 600;
  border-left-color: var(--navy);
  box-shadow: var(--schatten);
}

.uebersicht-nr {
  flex: 0 0 auto;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gedeckt-text);
  font-variant-numeric: tabular-nums;
}
.uebersicht a.aktiv .uebersicht-nr { color: var(--navy); }

/* Überschrift der Übersichtsspalte, falls eine gebraucht wird.
   Versal-Kleinlabel nach der Ticket-17-Rezeptur (Abschnitt 5). */
.uebersicht-titel {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gedeckt-text);
  margin: 0 0 var(--raum-2) var(--raum-3);
}


/* ---------- 5 Typografie ---------------------------------------------
   Zwei Stimmen: Serif spricht die Titel, Sans den Text. Der kursive
   Serif-Untertitel unter dem Titel ist die editoriale Signatur.

   Ticket 17 — drei systematische Eingriffe, alles andere blieb:

   (a) Feste Titelgrößen mit zwei Sprüngen in Abschnitt 13 sind durch
       clamp() ersetzt. Die Größe wächst stetig mit dem Schirm statt bei
       720px zu springen; damit fällt auch die Doppelpflege (eine Zahl
       hier, eine dort, die zweite wird beim Ändern vergessen).
   (b) Die Titel bekommen --font-display, die Lesegrößen --font-serif
       (Begründung der Kette in Abschnitt 1).
   (c) VERSAL-KLEINLABEL, EINE REZEPTUR: .75rem / 700 / uppercase /
       letter-spacing .07em / --gedeckt-text. Vorher stand an sechs
       Stellen (.kicker, h3, .uebersicht-titel, legend, th, .fehler-code)
       11px mit 1.5px Sperrung — bei 11px sind das .136em, also
       gesperrter als jede Zeitschriftenkopfzeile. Klein, grau UND weit
       gesperrt liest sich nicht „fein", sondern nach Systemsteuerung
       von 2009. 12px mit .07em bleibt ein Label und wird wieder
       lesbar.                                                         */
.abschnitt-titel, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--text);
  text-wrap: balance;
  margin: 0 0 var(--raum-2);
}

.abschnitt-sub {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.5;
  color: var(--gedeckt-text);
  max-width: var(--mass);
  margin: 0 0 var(--raum-5);
}

/* Versal-Label über einem Titel („Schritt 2", „Bestellung"). */
.kicker {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .75rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gedeckt-text);
  margin: 0 0 var(--raum-1);
}

/* Nummerierter Abschnittskopf: große gedeckte Zahl links, Titel rechts.
   .abschnitt-nr funktioniert an zwei Orten —
   (a) als <span> direkt im Titel: sie skaliert dann mit ihm mit;
   (b) als erstes Kind eines .abschnitt-kopf: dann groß und ausgerückt.

   ACHTUNG fuer Template-Autoren (Task 1 minor, nachgetragen Task 7):
   --gedeckt ist nur bei GROSSTEXT AA-konform (Abschnitt 1 oben). Beide
   erlaubten Orte (a)/(b) sind Grosstext-Kontexte — .abschnitt-nr gehoert
   NIE in ein <summary>, einen .hilfetext oder sonstigen Kleintext (Task 3
   hat deshalb im Medien-<summary> bewusst auf eine Zahl verzichtet). */
.abschnitt-nr {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15em;
  line-height: 1;
  color: var(--gedeckt);
  font-variant-numeric: tabular-nums;
  margin-right: var(--raum-2);
}

.abschnitt-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--raum-3);
  margin: var(--raum-6) 0 var(--raum-4);
}
.abschnitt-kopf:first-child { margin-top: 0; }
.abschnitt-kopf > .abschnitt-nr {
  flex: 0 0 auto;
  font-size: 2.4rem;       /* Großtext — --gedeckt ist hier zulässig */
  margin-right: 0;
}
.abschnitt-kopf > .abschnitt-titel,
.abschnitt-kopf > div { margin: 0; min-width: 0; }
.abschnitt-kopf .abschnitt-sub { margin: .15rem 0 0; }

h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--text);
  text-wrap: balance;
  margin: var(--raum-6) 0 var(--raum-2);
}

/* h3 ist die Kicker-Stufe: kleine Versalzeile, kein dritter Titelgrad.
   Eine Rezeptur mit .kicker (siehe oben). */
h3 {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gedeckt-text);
  margin: var(--raum-5) 0 var(--raum-1);
}

h1 small {
  display: block;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 400;
  color: var(--gedeckt-text);
  letter-spacing: 0;
}

/* Zeilenmaß: 42rem trugen bei 14px rund 95 Zeichen je Zeile — beim
   Zeilenwechsel verliert das Auge dann regelmäßig die Spur. --mass
   (38rem) sind bei 16px etwa 72 Zeichen und damit im Lesebereich
   (Ticket 17). Die Seite selbst bleibt 64rem breit; schmaler wird nur
   der Fließtext, nicht das Raster. */
p { margin: 0 0 var(--raum-3); max-width: var(--mass); }

/* Der erste, unklassierte Absatz nach der Seitenüberschrift trägt die
   Einordnung — er bekommt die Stimme des kursiven Untertitels. Absätze
   mit eigener Klasse (.hilfetext, .warnhinweis, .meldung) bleiben, was
   sie sind; deshalb :not([class]). */
h1 + p:not([class]) {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.5;
  color: var(--gedeckt-text);
  margin-bottom: var(--raum-5);
}

/* 148 Verwendungen — der meistbenutzte Baustein der ganzen Fläche. Er
   erklärt Pflichtfelder, Fachwörter und nächste Schritte; genau der
   Text also, den eine Erstnutzerin am nötigsten hat. Deshalb nicht
   kleiner als .875rem und mit dem Zeilenabstand des Fließtexts
   (Ticket 17: stand auf .88rem/1.5 bei 14px Grundschrift, also faktisch
   auf Fußnotengröße). */
.hilfetext {
  display: block;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--gedeckt-text);
  max-width: var(--feld);
  margin: var(--raum-1) 0 0;
}

.gedeckt { color: var(--gedeckt-text); }
.warnhinweis { color: var(--rot-tief); font-weight: 600; }

pre {
  font-family: var(--font-fest);
  font-size: .875rem;
  line-height: 1.55;
  background: var(--flaeche-warm);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius-klein);
  padding: var(--raum-3) var(--raum-4);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
code { font-family: var(--font-fest); font-size: .92em; }


/* ---------- 6 Kartensystem -------------------------------------------
   Eine Karte ist die Grundeinheit der Fläche: weiß auf warmem Papier,
   feine Linie, ruhiger Radius. Die Farbvarianten setzen einen 4px
   breiten Rand links — das semantische Farbsystem wird so sichtbar,
   ohne dass irgendwo eine Fläche schreit. Farbe ist nie der einzige
   Träger einer Aussage; die Karte sagt es immer auch im Text. */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius);
  padding: var(--raum-4) var(--karte-innen);
  margin: 0 0 var(--raum-4);
  box-shadow: var(--schatten);
  transition: box-shadow .15s ease, border-color .15s ease;
}
/* Ticket 17: Der Schatten-Hub lag auf JEDER Karte — auch auf denen, die
   nur Text tragen. Ein Kasten, der sich beim Überfahren hebt, verspricht
   eine Handlung; hält er das Versprechen nicht, lernt die Nutzerin, dass
   die Fläche nichts bedeutet. Der Hub gilt jetzt nur noch dort, wo die
   Karte wirklich eine Wahl ist: die Wegwahl-Karten (Ticket 04) und die
   Karten in einem Raster (Bestellliste, Kursliste, To-dos — dort ist
   jede Karte ein Ziel). Reine Lesekarten bekommen beim Überfahren gar
   nichts; sie sind kein Bedienelement. */
.karten > .karte:hover,
.wegwahl > .karte:hover { box-shadow: var(--schatten-hoch); }
/* Tastatur sieht dasselbe wie die Maus: liegt der Fokus auf einem Link
   IN der Karte, hebt sich die Karte mit. */
.karten > .karte:focus-within,
.wegwahl > .karte:focus-within { box-shadow: var(--schatten-hoch); }
/* Hier stand `.karten-aktion` — die schwebende, leise „Ändern"-Zeile
   über dem Titel der Prüfseiten-Karten (frontend-usability/06, N201).
   Mit `pruef-erlebnis/13` ist die Aktion in die KARTENECKE gezogen, wie
   auf der Prüffläche: `.karte-kopfzeile` (Abschnitt 14) trägt Titel und
   Werkzeug in einer Zeile. Die Regel hatte danach keinen einzigen
   Benutzer mehr — sie stand nur in bestellen_pruefen.html — und ist
   deshalb gefallen statt als tote Regel stehenzubleiben. */
.karte > :first-child { margin-top: 0; }
.karte > :last-child { margin-bottom: 0; }
.karte h2 { font-size: 1.125rem; margin-top: 0; }
.karte .abschnitt-titel { font-size: 1.3rem; }
/* Der Titel einer Listen-Karte ist der Weg hinein (To-dos, Bestellungen,
   Kurse): er trägt die Titelfarbe und bekommt seine Unterstreichung erst
   beim Überfahren — sonst steht in einem Raster aus zwölf Karten
   zwölfmal eine blaue Linie. */
.karte h2 > a, .karte h3 > a { color: var(--text); text-decoration: none; }
.karte h2 > a:hover, .karte h3 > a:hover,
.karte h2 > a:focus-visible, .karte h3 > a:focus-visible {
  color: var(--navy);
  text-decoration: underline;
}
/* Listen als Karte (kurse.html: <ul class="karte">): Punkte bleiben drin. */
ul.karte, ol.karte { padding-left: 2.3rem; }

.karte--navy  { border-left: 4px solid var(--navy); }
.karte--gruen { border-left: 4px solid var(--gruen); }
.karte--amber { border-left: 4px solid var(--amber); }
.karte--lila  { border-left: 4px solid var(--lila); }
.karte--rot   { border-left: 4px solid var(--rot); }
.karte--blau  { border-left: 4px solid var(--blau); }

/* T3-CSS-Nachtrag 2 (Task 7): eine <details class="aufklapp"> als
   direktes Kind einer .karte (z. B. "Weitere Bausteine" in
   bestellen_formular.html) brachte einen eigenen Rahmen + Radius mit —
   ein Kasten im Kasten. Sie legt sich stattdessen an die Karte an: kein
   Seitenrahmen, kantiger Radius, bis an den Kartenrand ausgerueckt. */
.karte > .aufklapp {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  /* folgt dem Innenabstand der Karte über dasselbe Token — vorher stand
     hier eine feste 1.25rem neben einer festen 1.1rem/1.25rem in .karte,
     und auf sehr schmalen Schirmen (Abschnitt 13 verengte nur die Karte)
     stand die Kapsel messbar über die Kartenkante hinaus. */
  margin-left: calc(-1 * var(--karte-innen));
  margin-right: calc(-1 * var(--karte-innen));
}

/* Kartenraster (mehrere .karte nebeneinander). Die Karten geben ihre
   Eigenmarge auf, der Rasterabstand ist die einzige Fuge.
   min(100%, …) verhindert Überlauf bis hinunter zu ~320px. */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--raum-4);
  align-items: start;
  margin: 0 0 var(--raum-5);
}
.karten > .karte { margin: 0; }

/* Drei Bestellwege nebeneinander (bestellen_weg.html), auf schmalen
   Schirmen untereinander. Gleiche Mechanik, engeres Mindestmaß. */
.wegwahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--raum-4);
  align-items: stretch;
  margin: 0 0 var(--raum-5);
}
/* Ticket 17: align-items steht auf stretch statt start — die Wegwahl ist
   die eine Seite, auf der die Karten GEGENEINANDER gelesen werden
   (Brigitte wählt hier), und drei verschieden hohe Kästen mit
   unterschiedlich hoch sitzenden Knöpfen lesen sich als Rangfolge, die
   niemand gemeint hat. Gleich hohe Karten, Knöpfe auf einer Linie (die
   Regel dafür stand schon da: letztes Kind mit margin-top:auto). */
.wegwahl > .karte { margin: 0; display: flex; flex-direction: column; }
/* Eine Wahlkarte ist ein Ziel: beim Überfahren tritt die Kante hervor.
   Farbe ist nicht der einzige Träger — die Karte trägt ihren Knopf.
   Nur drei Seiten: die LINKE Kante gehört dem Farbsystem (.karte--amber
   und Geschwister), sie darf ein Hover nicht überschreiben. */
.wegwahl > .karte:hover,
.wegwahl > .karte:focus-within {
  border-top-color: var(--navy);
  border-right-color: var(--navy);
  border-bottom-color: var(--navy);
}
/* Der Knopf einer Entscheidungskarte sitzt unten — die drei Karten
   enden auf einer Linie, auch wenn die Texte verschieden lang sind. */
.wegwahl > .karte > :last-child { margin-top: auto; }

/* Mitlesender Abschnitt "Bestellungen zu deinen Kursen"
   (frontend-usability/12, M54): klar vom eigenen Bestand getrennt —
   eigene Linie, ruhiger Abstand, kein Farbrand. Er ist eine
   Leseflaeche, keine Handlungsflaeche; deshalb bekommt er auch keine
   Aktionsfarbe, die eine Handlung verspraeche. Die Karten selbst
   nutzen dasselbe .karten-Raster und tragen damit bis ~320px. */
.mitlesen {
  margin-top: 2.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}
.mitlesen > :first-child { margin-top: 0; }
/* Derselbe Befund wie bei .medium h3 (Ticket 17): Der Kartentitel im
   mitlesenden Block stand versal und gesperrt, weil hier nur die Größe
   gesetzt war — die Titel des eigenen Bestands daneben (.karte h2) tun
   das nicht. Zwei Listen derselben Seite dürfen nicht in zwei
   Schriftsprachen sprechen. */
.mitlesen .karte h3 {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  margin-top: 0;
}

/* "Meine To-dos" (frontend-usability/11, M56): je Bestellung eine Karte,
   darin je offene Handlung eine Zeile. Kein Aufzaehlungspunkt — der
   Zeilenanfang IST die Handlung, und ein Punkt davor macht sie zur
   Nebensache. Ab der zweiten Zeile eine Trennlinie statt eines groesseren
   Abstands: die Zeilen sind kurz, und ohne Kante verschwimmen zwei
   Handlungen zu einem Satz. Grosszuegige Zeilenhoehe, damit die Ziele am
   Handy mit dem Daumen zu treffen sind (Persona P2). */
.todo-punkte { list-style: none; padding-left: 0; margin: .7rem 0 0; }
.todo-punkte > li { margin: 0; padding: .45rem 0; }
.todo-punkte > li + li { border-top: 1px solid var(--linie); }
.todo-handlung { font-weight: 600; }


/* ---------- 7 Aufklappen: <details class="aufklapp"> ------------------
   Progressive Disclosure ohne JS. Das native <details> bringt Tastatur-
   bedienung, Fokus und Screenreader-Ansage mit; wir tauschen nur den
   Marker gegen ein Dreieck, das beim Öffnen kippt. Der native Fokus
   bleibt unangetastet (kein outline:none irgendwo). */
.aufklapp, details {
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius);
  padding: 0 var(--raum-5);
  margin: 0 0 var(--raum-4);
}

/* Die Kapsel ist seit Ticket 07 das meistbediente Element der Fläche —
   auf der Kursseite steht davon eine je Abschnitt und eine je Folie.
   Ticket 17 gibt der Klappzeile deshalb eine echte Zielgröße (2.75rem
   ≈ 44px, die Fingerbreite aus den Handy-Personas) und eine
   Rückmeldung beim Überfahren: die ganze Zeile hellt auf, nicht nur der
   Text. Der Fokusring kommt aus Abschnitt 2 und bleibt unangetastet.
   Die Höhe macht der Innenabstand, nicht eine Mindesthöhe: .75rem oben
   und unten plus die 1.6-fache Zeile ergeben rund 50px — ohne dass eine
   Mindesthöhe die Grundlinien-Ausrichtung der Summary auseinanderzieht. */
.aufklapp > summary, details > summary {
  display: flex;
  align-items: baseline;
  gap: var(--raum-2);
  list-style: none;
  cursor: pointer;
  padding: var(--raum-3) 0;
  font-weight: 600;
  color: var(--text);
  transition: color .12s ease;
}
.aufklapp > summary::-webkit-details-marker,
details > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::marker, details > summary::marker { content: ""; }

.aufklapp > summary::before, details > summary::before {
  content: "\25B8";                 /* ▸ */
  flex: 0 0 auto;
  color: var(--navy);
  font-size: .9em;
  transition: transform .15s ease;
}
.aufklapp[open] > summary::before,
details[open] > summary::before { transform: rotate(90deg); }

.aufklapp > summary:hover, details > summary:hover { color: var(--navy); }
/* Die ganze Klappzeile quittiert das Überfahren, nicht nur der Text.
   Der Überstand ist bewusst klein (--raum-2) und nicht der volle
   Innenabstand des Kastens: eine Kapsel kann in einer Karte stecken
   (.karte > .aufklapp, Abschnitt 6), die selbst schon bis an den
   Kartenrand ausgerückt ist — ein Überstand in Kastenbreite liefe dort
   über die Kante hinaus. margin-left/-right einzeln statt der
   Kurzschrift, damit der Fußabstand der offenen Kapsel unberührt
   bleibt und der Inhalt beim Überfahren nicht springt. */
.aufklapp > summary:hover, details > summary:hover {
  background: var(--flaeche-warm);
  margin-left: calc(-1 * var(--raum-2));
  margin-right: calc(-1 * var(--raum-2));
  padding-left: var(--raum-2);
  padding-right: var(--raum-2);
  border-radius: var(--radius-klein);
}

/* Inhalt eingerückt bis unter den Text des Summary, nicht bis zum Marker.
   Der Fußabstand sitzt am aufgeklappten Kasten selbst, damit er sich
   nicht mit der Eigenmarge des letzten Absatzes addiert. */
.aufklapp > :not(summary), details > :not(summary) { padding-left: 1.45rem; }
.aufklapp[open], details[open] { padding-bottom: var(--raum-3); }
.aufklapp > :last-child, details > :last-child { margin-bottom: 0; }
.aufklapp[open] > summary, details[open] > summary {
  border-bottom: 1px solid var(--linie);
  margin-bottom: var(--raum-3);
}
/* Der Hinweis neben dem Summary-Text (z. B. „meist 7–8"). */
.aufklapp-hinweis {
  font-weight: 400;
  font-size: .875rem;
  color: var(--gedeckt-text);
}


/* ---------- 8 Panelumschalter: :target ohne JS ------------------------
   Reiter sind Anker-Links (.panel-tab), Panels sind Sprungziele mit id.
   Sichtbar ist genau das Panel, dessen id in der Adresse steht.

   Default-Panel-Technik: Solange KEIN Panel angesprungen ist, zeigt
   :not(:has(…)) das erste Panel. :has() ist seit 2023 überall verfügbar
   (Chrome/Edge 105+, Safari 15.4+, Firefox 121+). Fällt es aus, ist beim
   ersten Seitenaufruf kein Panel offen, bis ein Reiter geklickt wird —
   ein Klick mehr, kein Datenverlust. Bewusst diese Variante statt
   :target-within (nirgends implementiert) oder eines Skripts.

   Achtung für die Folge-Tasks: Panels müssen Geschwister sein und alle
   dieselbe Elementart haben (z. B. alle <section>), damit
   :first-of-type das erste trifft. */
.panelgruppe { margin: 0 0 1.4rem; }

.panelgruppe > .panel { display: none; }
.panel:target { display: block; }
.panelgruppe:not(:has(> .panel:target)) > .panel:first-of-type {
  display: block;
}

.panel-tab {
  display: inline-block;
  padding: var(--raum-2) var(--raum-1);
  margin-right: var(--raum-5);
  color: var(--gedeckt-text);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.panel-tab:hover { color: var(--text); border-bottom-color: var(--gedeckt); }
.panel-tab.aktiv {
  color: var(--text);
  border-bottom-color: var(--navy);
}
/* Reiterleiste: die Linie läuft unter allen Reitern durch. */
.panel-reiter {
  border-bottom: 1px solid var(--linie);
  margin: 0 0 1.2rem;
}


/* ---------- 9 Bausteine: Badge, Zeitleiste, Tabelle, Knopf, Listen ---- */

/* Dezente Pille für Zustände (Phase eines Vorgangs). Status als
   Information, nicht als Alarm — bewusst kein grelles Farbsignal. */
.badge {
  display: inline-block;
  max-width: 100%;
  padding: .1rem .7rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .01em;
  color: var(--text);
  background: var(--flaeche-warm);
  border: 1px solid var(--linie-kraeftig);
  border-radius: 999px;
}

/* Zeitleiste: Stationen eines Vorgangs, reines CSS (Linie + Punkte).
   Der Einzug steht als eigene Variable, damit Linie und Punkte auf
   schmalen Schirmen gemeinsam nachrücken (Abschnitt 13). */
.zeitleiste {
  --leiste-einzug: 1.4rem;
  list-style: none;
  margin: 1.2rem 0 1.6rem;
  padding: .2rem 0 .2rem var(--leiste-einzug);
  border-left: 1px solid var(--linie);
}
.zeitleiste > li {
  position: relative;
  margin: 0;
  padding: 0 0 1.1rem .3rem;
}
.zeitleiste > li:last-child { padding-bottom: 0; }
.zeitleiste > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--leiste-einzug) - .4rem);
  top: .5rem;
  width: .5rem;
  height: .5rem;
  background: var(--flaeche);
  border: 2px solid var(--linie);
  border-radius: 50%;
}
.zeitleiste > li.erledigt::before {
  background: var(--gruen);
  border-color: var(--gruen);
}
.zeitleiste > li.jetzt::before {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 0 0 4px var(--navy-hauch);
}
.zeitleiste .station { font-weight: 600; color: var(--text); }
.zeitleiste .zeit {
  display: block;
  font-size: .875rem;
  color: var(--gedeckt-text);
}
/* Noch nicht erreichte Station: blass, aber lesbar. */
.zeitleiste > li.offen .station {
  color: var(--gedeckt-text);
  font-weight: 400;
}

/* separate + spacing 0 statt collapse: nur so greift der Radius. Doppelte
   Linien entstehen nicht, weil jede Zellgrenze genau einmal gezeichnet
   wird (th: unten, td: oben). */
.tabelle, table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius);
  margin: 0 0 var(--raum-5);
  font-size: .9375rem;
  box-shadow: var(--schatten);
}

/* Kopfzeile nach der Versal-Kleinlabel-Rezeptur (Abschnitt 5) und mit
   dem warmen Grund darunter: eine Tabelle ohne abgesetzten Kopf liest
   sich als Datenblock, nicht als Tabelle. */
.tabelle th, table th {
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gedeckt-text);
  background: var(--flaeche-warm);
  border-bottom: 1px solid var(--linie-kraeftig);
  padding: var(--raum-3) var(--raum-4);
  white-space: nowrap;
}

.tabelle td, table td {
  border-top: 1px solid var(--linie);
  padding: var(--raum-3) var(--raum-4);
  vertical-align: top;
  color: var(--text-koerper);
}
.tabelle tr:first-child td, table tr:first-child td { border-top: 0; }
.tabelle tbody tr, table tbody tr { transition: background-color .12s ease; }
.tabelle tbody tr:hover, table tbody tr:hover { background: var(--papier); }

/* Ticket 17: Der Knopf war 14px hoch gesetzt und rund 36px hoch. 2.75rem
   (44px) sind das Maß, das mit dem Daumen sicher zu treffen ist —
   Brigitte und Ludwig arbeiten laut Personas auch am Handy. inline-flex
   statt inline-block, damit die Beschriftung in dieser Höhe mittig
   sitzt und ein <a class="knopf"> genauso hoch ist wie ein <button>
   daneben (vorher unterschieden sie sich um die Zeilenhöhe).

   BENANNTE AUSNAHMEN von diesen 44px (Nachbesserung B17-2, Vor-Abnahme
   Ticket 17, 24.08.2026). Die Zusage „Zielgrößen Knopf und Eingabefeld
   2.75rem“ gilt für DIESE Grundregel; drei Regeln setzen sie herunter,
   und bis hierher stand nirgends gesammelt, welche und warum. Alle drei
   liegen über dem verbindlichen Minimum aus WCAG 2.5.8 (AA, 24px); die
   44px stammen aus 2.5.5 (AAA) und sind das Hausziel, nicht die Pflicht:

     .abmelden button   ≈30px  — der einzige Knopf der klebenden
                                 Kopfleiste. Er steht auf JEDER Seite; auf
                                 44px gebracht wird die Leiste höher, und
                                 die Leiste ist auf schmalen Schirmen
                                 genau das, was die Sprungziele verdeckt
                                 (B17-1, Abschnitt 13). Abmelden ist
                                 außerdem keine wiederholte Handlung: es
                                 passiert einmal, am Ende.
     .knopf--leise      36px   — „Als erledigt kennzeichnen“ und
                                 „entfernen“, beide INNERHALB einer Zeile
                                 bzw. einer schon gelesenen Karte. Auf
                                 44px trägt jede Tabellenzeile einen
                                 ausgewachsenen Knopf und die Liste wird
                                 zur Knopfleiste — die Nebenhandlung sähe
                                 aus wie die Hauptsache.
     .uebersicht a      38,4px — Navigationseintrag, kein Knopf; die
                                 Zielfläche wächst dort über die volle
                                 Spaltenbreite, nicht über die Höhe.
     input[type="checkbox"], input[type="radio"]
                          Kästchengröße des Systems — die Zielhöhe der
                                 Textfelder bliese das Kästchen auf 44px
                                 auf und zöge die Zeile auseinander. Die
                                 Trefferfläche macht hier das umschließende
                                 <label>, das die ganze Zeile einnimmt
                                 (Abschnitt 10). Nachgetragen in Ticket 03:
                                 die Regel gab es längst, in dieser Liste
                                 stand sie nicht.

   Wer eine weitere Ausnahme braucht, trägt sie hier ein — eine
   unbenannte Ausnahme ist der Weg, auf dem aus einer Zusage eine
   Behauptung wird. Seit Ticket 03 ist dieser Satz gemessen und nicht
   mehr nur gemeint: `test_kursuebersicht.py` Abschnitt 21f liest diese
   Datei, sucht jede Bedienregel mit einer min-height unter 2.75rem und
   verlangt, dass ihr Selektor hier steht — in beide Richtungen, eine
   gestrichene Regel darf also auch nicht als Ausnahme stehenbleiben. */
.knopf, button {
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--raum-3) var(--raum-5);
  margin-top: var(--raum-4);
  color: var(--flaeche);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-klein);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--schatten);
  transition: background-color .12s ease, border-color .12s ease,
              box-shadow .12s ease;
}
.knopf:hover, button:hover {
  background: var(--navy-tief);
  border-color: var(--navy-tief);
  color: var(--flaeche);
  box-shadow: var(--schatten-hoch);
}
/* Beim Drücken tritt der Knopf zurück statt zu springen: Schatten weg,
   ein Pixel nach unten. */
.knopf:active, button:active {
  transform: translateY(1px);
  box-shadow: none;
}

.knopf-sekundaer {
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-feld);
  box-shadow: none;
}
.knopf-sekundaer:hover {
  color: var(--text);
  background: var(--flaeche-warm);
  border-color: var(--gedeckt);
  box-shadow: var(--schatten);
}

/* .knopf--leise: gedaempfte Nebenhandlung INNERHALB einer Zeile/Karte
   ("Als erledigt kennzeichnen" Aufgabe 5, "entfernen" Aufgabe 8) -- steht
   im Markup immer ZUSAETZLICH zu .knopf ("knopf knopf--leise") und
   ueberschreibt dessen Farbe/Kontur, so wie .karte--amber .karte
   modifiziert statt zu ersetzen. Nachtrag Aufgabe 8: die Klasse stand seit
   Aufgabe 5 im Markup, ohne dass es diese Regel gab -- sie sah wie ein
   Hauptknopf aus (navy, volle Groesse), obwohl beide Einsatzorte
   Nebenhandlungen sind, nicht die Hauptaktion der Seite. Gedaempft wie
   .knopf-sekundaer, zusaetzlich kleiner: eine Tabellenzeile bzw. eine
   Karte mit bereits gelesenem Text braucht keinen ausgewachsenen Knopf.
   Benannte Ausnahme Nr. 2 der 44px-Zusage (36px) -- Begruendung und
   Vollzaehligkeit stehen bei der Grundregel oben in diesem Abschnitt
   (B17-2). */
.knopf--leise {
  padding: var(--raum-2) var(--raum-3);
  margin-top: var(--raum-2);
  min-height: 2.25rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-feld);
  box-shadow: none;
}
.knopf--leise:hover {
  color: var(--text);
  background: var(--flaeche-warm);
  border-color: var(--gedeckt);
  box-shadow: none;
}

/* Listen bleiben Listen, nur luftiger. */
ul, ol { padding-left: 1.3rem; }
li { margin-bottom: var(--raum-1); }


/* ---------- 10 Formulare ---------------------------------------------
   .feldgruppe ist der neue Name der Einheit „Beschriftung + Eingabe +
   Hilfetext"; .formfeld bleibt als gleichwertiger Altname bestehen,
   damit die noch nicht umgestellten Vorlagen unverändert tragen. */
form { margin: 0 0 1.4rem; }

.feldgruppe, .formfeld { margin: var(--raum-5) 0; max-width: var(--feld); }
.feldgruppe > label, .formfeld > label { margin-top: 0; }
.feldgruppe > .hilfetext, .formfeld > .hilfetext { margin-top: var(--raum-1); }
.feldgruppe.breit, .formfeld.breit { max-width: 42rem; }
.feldgruppe.breit input, .feldgruppe.breit select, .feldgruppe.breit textarea,
.formfeld.breit input, .formfeld.breit select, .formfeld.breit textarea {
  max-width: 100%;
}

/* Feld mit Beanstandung: rote Kante + Klartext darunter, nie nur Farbe. */
.feldgruppe.fehlt input, .feldgruppe.fehlt select, .feldgruppe.fehlt textarea,
.formfeld.fehlt input, .formfeld.fehlt select, .formfeld.fehlt textarea,
.feldgruppe--fehler input, .feldgruppe--fehler select,
.feldgruppe--fehler textarea {
  border-color: var(--rot);
}

/* Persona-Befund B2 (Brigitte): die Fehlerliste stand oben, am Feld selbst
   war nichts zu sehen. Der Server markiert die beanstandete Gruppe beim
   Redisplay; die Kante links zieht den Blick auf die ganze Einheit
   (Beschriftung + Eingabe + Hilfetext), nicht nur auf das Eingabefeld.
   Dezent bleibt es, weil der Klartext in der Liste oben steht — Farbe ist
   hier Wegweiser, nie alleiniger Träger der Aussage.
   :target hebt zusätzlich die gerade angesprungene Gruppe hervor, damit
   nach dem Sprung klar ist, wo man gelandet ist (JS-frei, reines CSS).
   tabindex="-1" auf der Gruppe macht sie zum Fokusziel — der Fokusrahmen
   des Browsers wäre hier ein zweiter, lauter Rahmen um denselben Block;
   die Hervorhebung leistet dasselbe ruhiger. */
.feldgruppe--fehler {
  border-left: 3px solid var(--rot);
  padding-left: var(--raum-3);
}
/* Die angesprungene Gruppe bekommt Grund UND Innenabstand, sonst klebt
   die Hervorhebung am Text (Ticket 17). */
.feldgruppe:target {
  background: var(--flaeche-warm);
  padding: var(--raum-3);
  border-radius: var(--radius-klein);
}
.feldgruppe--fehler:target { padding-left: var(--raum-3); }
.feldgruppe:focus, .feldgruppe--fehler:focus { outline: none; }
.feldgruppe .fehler, .formfeld .fehler {
  display: block;
  margin-top: var(--raum-1);
  font-size: .875rem;
  font-weight: 600;
  color: var(--rot-tief);
}

/* Pflichtmarkierung: klein, rot, direkt am Label. Der Stern allein sagt
   nichts — die Legende über dem Formular erklärt ihn (Task 3). */
.pflicht-stern {
  color: var(--rot-tief);
  font-size: .9em;
  font-weight: 700;
  margin-left: .12em;
}

/* T3-CSS-Nachtrag 1 (bindend, Task 7): "(nur eines nötig)" steht als
   .gedeckt-Span direkt im <label> (N2, Lernergebnis-Feldpaar) und erbte
   dort bislang label{font-weight:600}. Nur der Zusatztext soll
   normalgewichtig und etwas kleiner wirken, der Pflicht-Stern bleibt fett. */
label .gedeckt { font-weight: 400; font-size: .875rem; }

label {
  display: block;
  margin-top: var(--raum-4);
  font-weight: 600;
  color: var(--text);
  max-width: var(--feld);
}

/* T3-CSS-Nachtrag 3 (Task 3 -> Task 7 Fix-Runde 1, jetzt freigegeben): ein
   echtes <label>, das keinen Platz in der Zeile beansprucht — Clip-
   Technik statt display:none (das naehme das Label auch aus dem
   Accessibility-Tree). Erlaubt ein echtes <label for> dort, wo bisher nur
   Placeholder + aria-label die Zuordnung trugen. */
.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ticket 17: 1rem statt .875rem. Ein Eingabefeld unter 16px lässt iOS
   beim Fokussieren in die Seite hineinzoomen — die Nutzerin landet im
   Zoom und muss sich zurückarbeiten, und genau das passiert am Handy
   mitten im Bestellformular. Dazu die Zielhöhe des Knopfsystems und ein
   Fokusring aus derselben Rezeptur wie überall sonst (Abschnitt 2). */
input, select, textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  display: block;
  width: 100%;
  max-width: var(--feld);
  min-height: 2.75rem;
  margin-top: var(--raum-1);
  padding: var(--raum-2) var(--raum-3);
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-feld);
  border-radius: var(--radius-klein);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--gedeckt); }
input:focus, select:focus, textarea:focus {
  outline: var(--fokus-breite) solid var(--navy);
  outline-offset: var(--fokus-abstand);
  border-color: var(--navy);
}
textarea { resize: vertical; }
input[type="number"] { max-width: 10rem; }

/* Ankreuzfelder stehen in der Zeile, nicht als Balken über die Breite.
   min-height wieder auf 0: die Zielhöhe der Textfelder oben würde ein
   Kästchen auf 44px aufblasen und die Zeile auseinanderziehen. Die
   Trefferfläche macht hier das umschließende <label>. */
input[type="checkbox"], input[type="radio"] {
  display: inline-block;
  width: auto;
  min-height: 0;
  margin: 0 .45rem 0 0;
  accent-color: var(--navy);
}
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) { font-weight: 400; max-width: 42rem; }

fieldset {
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  padding: var(--raum-1) var(--raum-4) var(--raum-4);
  margin: var(--raum-4) 0;
  max-width: var(--feld);
}
/* Versal-Kleinlabel-Rezeptur (Abschnitt 5). */
legend {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gedeckt-text);
  padding: 0 var(--raum-1);
}
fieldset input, fieldset select { max-width: 100%; }


/* ---------- 11 Rückmeldungen an die Nutzerin -------------------------- */
/* Ticket 17: gleiche Bauart wie die Karte (Radius, Kante, Innenabstand)
   und dasselbe Zeilenmaß wie der Fließtext — eine Meldung ist ein
   Absatz, der zufällig einen Rahmen hat, kein Fremdkörper. Die farbige
   Kante wächst von 3px auf 4px und trifft damit den Farbrand der
   Karten (.karte--gruen und Geschwister): ein System, nicht zwei. */
.meldung, .fehlerliste {
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius);
  margin: 0 0 var(--raum-4);
  padding: var(--raum-3) var(--raum-4);
  max-width: var(--mass);
  color: var(--text);
}

.meldung {
  background: var(--gruen-hauch);
  border-left: 4px solid var(--gruen);
}

/* Kontingent-Absage (Task 6 N4 -> Task-7-Blocker): kein Erfolg (gruen) und
   kein Eingabefehler (rot), sondern eine erreichte Grenze. Ohne diese
   Regel erbt die Absage nur .meldung und sieht aus wie eine
   Erfolgsmeldung — das genaue Gegenteil ihres Inhalts. --amber-hauch war
   seit Task 1 definiert, aber ohne Verbraucher; das hier ist er. */
.meldung--limit {
  background: var(--amber-hauch);
  border-left-color: var(--amber);
}

/* Flash-Fehlschlaege (Fix-Welle final, Review-Befund 3): zwei der vier
   flash()-Aufrufer melden einen Fehlschlag (Sperrmeldung, Bestell-
   Kontingent), nicht einen Erfolg -- ohne diese Regel erbten sie nur
   .meldung und standen im selben Gruen wie eine Danke-Meldung. Gleiches
   Muster wie .meldung--limit, bewusst dieselbe amber-Farbe (beides eine
   erreichte Grenze bzw. ein abgewiesener Versuch, kein Eingabefehler). */
.meldung--warnung {
  background: var(--amber-hauch);
  border-left-color: var(--amber);
}

/* Der wiederhergestellte Entwurf (Ticket 07). WEDER gruen NOCH amber:
   Es ist kein Erfolg (abgeschickt ist nichts) und keine erreichte Grenze
   (abgewiesen wurde nichts) -- es ist eine Auskunft ueber den Zustand
   der Maske. Ein Entwurfshinweis in Amber laese sich wie ein Fehler und
   liesse Ludwig an der falschen Stelle suchen; in Gruen laese er sich
   wie "angekommen", und das ist der gefaehrlichere der beiden Irrtuemer.
   Also die neutrale Linie des Hauses (--linie-kraeftig auf --navy-hauch,
   dieselbe Paarung wie die Bedienstellen). */
.meldung--entwurf {
  background: var(--navy-hauch);
  border-left-color: var(--linie-kraeftig);
}

.fehlerliste {
  background: var(--rot-hauch);
  border-left: 4px solid var(--rot);
  list-style: none;
  padding-left: var(--raum-4);
}
.fehlerliste li { margin: 0 0 var(--raum-1); }
.fehlerliste li:last-child { margin-bottom: 0; }
.fehlerliste li::before {
  content: "\00B7\00A0";            /* ·&nbsp; */
  color: var(--rot-tief);
  font-weight: 700;
}
/* Jede Fehlerzeile ist ein Sprunglink auf ihr Feld (B2). Navy wie sonstige
   Links würde die Liste in Linkfarbe tauchen und ihren Charakter als
   Beanstandung verwischen — sie bleibt rot, die Unterstreichung zeigt,
   dass man sie anklicken kann. */
.fehlerliste a { color: var(--rot-tief); }
.fehlerliste a:hover { color: var(--text); }

/* Leere Zustände (Ticket 17, ADR-0029 Satz 5). Vorher sah „hier ist noch
   nichts" genauso aus wie eine Karte voller Inhalt — Fatima konnte eine
   leere Seite nicht von einer kaputten unterscheiden, und das ist ihr
   Ausstiegsgrund. Ein leerer Zustand ist kein Fehler und keine
   Erfolgsmeldung, sondern eine Einladung: wärmerer Grund als die Karte,
   gestrichelte Kante (deutlich „hier steht später etwas"), kein
   Schatten, kein Farbsignal. Die Handlung darin bleibt ein
   vollwertiger Knopf — die Einladung ist der Punkt.
   Zwei Formen, damit beide Bauarten im Bestand getroffen werden:
   .karte--leer für die Karten, die schon Überschrift + Satz + Knopf
   tragen (Bestellliste, Meine To-dos), .leerzustand für den einzelnen
   Satz, der eine Liste ersetzt (Kontenliste, Bestellungen-Verwaltung,
   Datei am Vorgang). */
.karte--leer, .leerzustand {
  background: var(--leer-grund);
  border: 1px dashed var(--linie-feld);
  border-radius: var(--radius);
  box-shadow: none;
}
.karte--leer:hover, .leerzustand:hover { box-shadow: none; }
.leerzustand {
  display: block;
  max-width: var(--mass);
  margin: 0 0 var(--raum-4);
  padding: var(--raum-4) var(--raum-5);
  color: var(--gedeckt-text);
}
/* Die Überschrift des leeren Zustands sagt den Zustand, der Satz sagt,
   was ihn beendet — also darf die Überschrift nicht schreien. */
.karte--leer > h2 { color: var(--text); }
.karte--leer > p { color: var(--gedeckt-text); }


/* ---------- 12 Sonderflächen ------------------------------------------ */

/* N271: die PRÜFfläche der Plattform (.pruefflaeche, gesetzt in
   kurs.html). Seit Ticket 04 (ADR-0033) ist es EINE — die Medienübersicht
   als zweite Fläche ist entfallen, ihre Medien stehen an ihren Folien,
   und die Sammelstelle am Fuß (.medien-gruppe) liegt innerhalb von
   .pruefflaeche und erbt das Maß von dort. Nur hier gilt das breite Maß;
   es wird als Token weitergereicht, nicht Regel für Regel nachgetragen —
   damit greift es von selbst auf allem, was --mass liest (p,
   .abschnitt-sub, .meldung, .fehlerliste, .leerzustand), und eine neue
   Regel mit --mass bekommt es ohne Zutun mit.
   Alle übrigen Flächen sehen den Wert nie: er wird nirgends auf :root
   umgeschrieben.
   Ticket 03: Dieselbe Klasse schaltet zusätzlich den breiteren
   Seitenrahmen und das Polster der Ankersprünge — aber nicht von hier
   aus, sondern über `body:has(.pruefflaeche)` in Abschnitt 3; beides
   sind Eigenschaften von Elementen ÜBER dieser Klasse. Wer die Klasse
   umbenennt, fasst beide Stellen an. */
.pruefflaeche { --mass: var(--mass-breit); }

/* ---- Die Ortszeile der Prüffläche (ADR-0033 Punkt 6, Ticket 03) ------
   Hier standen bis Ticket 03 `.kurs-ansicht`, `.gliederung-leiste`,
   `.gliederung-titel` und `.gliederung` — die schmale Spalte links neben
   der Kursübersicht. Sie ist entfallen: Die zugeklappten Abschnitts-
   Kapseln SIND die Übersicht, und die 15,2rem, die Spalte und Abstand
   gekostet haben, gehören jetzt dem Prüfinhalt (N271-Endform).

   An ihrer Stelle klebt eine Zeile am oberen Rand, die eine andere Frage
   beantwortet: nicht „wohin kann ich springen“, sondern „wo bin ich“.
   Nach 3.000 Pixeln Folienkarten ist das die Frage, die Ludwig wirklich
   hat — die Sprungziele hat er über die Kapseln und die Karten ohnehin.

   Gebaut wie der aktive Eintrag der Navigationsspalte (Abschnitt 4) und
   die einst hier gewählte Stelle: blasse Fläche, navyfarbene Kante
   links. Das ist die Formel dieses Hauses für „hier bist du“ — die
   Ortszeile ist dieselbe Marke, eine Ebene größer, kein neues Zeichen.

   Die feste `height` ist kein Gestaltungswert, sondern die Bedingung
   dafür, dass das Polster der Ankersprünge (Abschnitt 2) stimmt: eine
   Leiste, deren Höhe man nur schätzen kann, verdeckt Sprungziele
   (N254/B17-1). Deshalb eine Zeile, `nowrap`, und der Kursname kürzt
   sich, statt umzubrechen. Skriptfrei — `position: sticky` ist die ganze
   Technik. */
.ortszeile {
  position: sticky;
  top: var(--kopf-hoehe);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  height: var(--ort-hoehe);
  padding: 0 var(--raum-4);
  margin: 0 0 var(--raum-5);
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten), inset 3px 0 0 var(--navy);
  font-size: .9375rem;
  white-space: nowrap;
}

/* Versal-Kleinlabel-Rezeptur (Abschnitt 5) — sagt, was diese Fläche von
   der Leserin will, bevor sie irgendetwas anklickt (Story 18). */
.ort-marke {
  flex: 0 0 auto;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gedeckt-text);
}

/* Der Name des Standes — die einzige Stelle der Seite, an der er beim
   Blättern stehen bleibt. Er darf schrumpfen, damit „Nach oben“ nie aus
   der Zeile fällt, gibt aber später nach als die gewählte Stelle daneben
   (shrink 1 gegen 2): Der Name ist die Orientierung, die Stelle das
   Detail. */
.ort-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--text);
}

/* Die gewählte Stelle, falls eine gewählt ist. Getrennt durch eine
   Haarlinie statt durch ein Zeichen: ein „›“ dazwischen wäre Text, den
   Vorlesesoftware mitspricht, ohne etwas zu bedeuten. */
.ort-stelle {
  flex: 0 2 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: var(--raum-3);
  border-left: 1px solid var(--linie-kraeftig);
  color: var(--gedeckt-text);
}

/* Der Weg nach oben. Er füllt die Leiste in der Höhe — damit ist das
   Bedienziel genau die 44px aus Abschnitt 9, ohne eine Ausnahme von der
   Zusage zu brauchen. */
.ort-hoch {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: auto;
  padding: 0 var(--raum-2);
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.ort-hoch:hover { color: var(--navy-tief); text-decoration: underline; }

/* ---- Die Werkzeugleiste der Prüffläche (Ticket 05, ADR-0033) ---------
   Fünf Wege, die vorher fünf ganze Karten waren: Änderungen, Test-Kurs,
   Bestellung, Kurspaket, Verwalten. Eine Zeile statt vier Kästen über
   dem Prüfstoff.

   Warum die Beschriftung IMMER dasteht und nicht erst bei Hover: Auf
   einem Touchgerät gibt es kein Zeigen ohne Auslösen — eine Erklärung im
   Hover erscheint dort nie. Die Zusage des Tickets („sichtbarer Text bei
   Fokus UND Antippen") ist damit per Bau erfüllt statt per Zustand.
   Hover und Fokus ändern hier nur das Aussehen, nie den Inhalt.

   Die Leiste klebt NICHT (anders als die Ortszeile darüber): Ihre Höhe
   geht das Polster der Ankersprünge nichts an, sie darf deshalb
   umbrechen — auf 390px stehen die Symbole in zwei Reihen, statt sich
   zu quetschen.

   Die Zielfläche ist 2.75rem hoch, also keine Ausnahme von der
   44px-Zusage (Abschnitt 9). */
.werkzeugleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin: var(--raum-4) 0 var(--raum-5);
}

/* Gebaut aus dem Bestand: Fläche, Kontur und Radius sind die des
   sekundären Knopfs (Abschnitt 9) — eine Leiste in eigener Optik wäre
   ein zweites Formsystem für dieselbe Sache. Das eine Eigene ist das
   Symbolfeld links (siehe unten); es macht aus dem Knopf ein Werkzeug,
   ohne ein neues Formvokabular aufzumachen. */
.werkzeug {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-3);
  min-height: 2.75rem;
  padding: var(--raum-2) var(--raum-4) var(--raum-2) var(--raum-2);
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius-klein);
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease,
              box-shadow .12s ease;
}
.werkzeug:hover {
  color: var(--text);
  background: var(--flaeche-warm);
  border-color: var(--gedeckt);
  box-shadow: var(--schatten);
}
/* Beim Drücken tritt das Werkzeug zurück — dieselbe Geste wie der Knopf
   (Abschnitt 9), damit sich zwei Bedienteile derselben Seite gleich
   anfühlen. */
.werkzeug:active { transform: translateY(1px); box-shadow: none; }

/* Das Symbolfeld: getöntes Quadrat, darin eine Strichzeichnung in
   --navy. Die Zeichnung ist eine eigene Datei unter
   `/statisch/symbole/` und steht als HINTERGRUND — nicht als Element.
   Warum kein `<svg>` und kein `<img>`: Die Prüffläche trägt zwei
   Zusagen aus Ticket 04 (Sepp Z-17), die den ganzen Seitentext
   durchsuchen (`"<svg" not in seite`, an einem reinen Tonstand
   `"<img" not in seite`). Sie meinen geliefertes Material, sind aber
   Zeichenketten — ein Hintergrundbild kommt ihnen nicht in die Quere
   und braucht kein Element. Herkunft bleibt der eigene Ursprung
   (relativ zu dieser Datei, also `/statisch/symbole/…`,
   `default-src 'self'`); ausführen kann eine Zeichnung im Hintergrund
   nichts. Fällt sie aus, bleiben Quadrat und Beschriftung stehen: die
   Bedeutung trägt das Wort daneben, nie das Bild. */
.werkzeug-symbol {
  flex: 0 0 auto;
  /* 1.75rem + zweimal --raum-2 Polster ergibt genau die 2.75rem der
     Bedienziel-Zusage: die Zielhöhe entsteht aus dem Inhalt, nicht aus
     einer zweiten Zahl daneben. */
  width: 1.75rem;
  height: 1.75rem;
  background-color: var(--navy-hauch);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.15rem 1.15rem;
  border-radius: var(--radius-klein);
  transition: background-color .12s ease;
}
.werkzeug:hover > .werkzeug-symbol { background-color: var(--linie-kraeftig); }

/* Eine Zeile je Weg. Der Name im Klassennamen ist derselbe wie der
   Dateiname — ein Prüfstein liest beide gegeneinander und gegen die
   ausgelieferte Datei (test_kursuebersicht 24-2), damit ein Symbol
   nicht still ins Leere zeigt. */
.werkzeug-symbol--aenderungen { background-image: url("symbole/aenderungen.svg"); }
.werkzeug-symbol--test-kurs   { background-image: url("symbole/test-kurs.svg"); }
.werkzeug-symbol--bestellung  { background-image: url("symbole/bestellung.svg"); }
.werkzeug-symbol--kurspaket   { background-image: url("symbole/kurspaket.svg"); }
.werkzeug-symbol--verwalten   { background-image: url("symbole/verwalten.svg"); }

/* Nachzug auf die übrigen Flächen (Ticket `pruef-erlebnis/15`).
   Die Leiste ist ab hier kein Sonderteil der Prüffläche mehr, sondern
   die Form, die ein WEG auf jeder Fläche hat — Anmeldung, Konto,
   Verwaltung, Kursverwaltung. Sie steht trotzdem weiter in diesem
   Abschnitt: Ein Umzug in das Bausteine-Kapitel wäre ein Umbau an einer
   Datei, an der in derselben Welle drei Tickets gleichzeitig arbeiten;
   hier steht deshalb nur, was dazukommt (T15-N3).

   Zwei Zeichnungen kommen dazu, und beide sind bewusst allgemein:
   `zurueck` ist der Rückweg — WOHIN es zurückgeht, sagt das Wort
   daneben, nicht das Bild. Ein eigenes Symbol je Rückweg wäre ein
   halbes Dutzend Zeichnungen für eine einzige Geste. */
.werkzeug-symbol--zurueck     { background-image: url("symbole/zurueck.svg"); }
.werkzeug-symbol--konto-neu   { background-image: url("symbole/konto-neu.svg"); }

/* Die Antwort des Servers AN DER ZEILE (Kontenliste, Ticket 15): der
   Platz für den Satz, der nach einer Sperre ohne Seiten-Neuladung
   zurückkommt. Er ist immer im Markup und immer leer — ohne Skript
   steht die Meldung wie bisher oben auf der Seite. Deshalb auch kein
   `display: none` im Leerzustand: Ein leerer Absatz ohne Rand und ohne
   Grundfläche nimmt von sich aus keinen Platz weg, und eine Regel, die
   Inhalt versteckt, wäre genau die Bauart, die der Notpfad verbietet
   (ADR-0034). `:empty` steuert nur den Abstand. */
.zeilen-meldung {
  margin: var(--raum-2) 0 0;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--text-koerper);
  overflow-wrap: anywhere;
}
.zeilen-meldung:empty { margin: 0; }

/* Die Kursübersicht selbst (medien-modell/03, ADR-0012). Vorher stand
   hier `.report-frame`: der abgeschottete iframe mit der gelieferten
   HTML-Seite. Die Plattform baut den Stand jetzt selbst — es gibt kein
   eingebettetes Dokument mehr, also auch keine feste Rahmenhöhe; die
   Übersicht ist gewöhnlicher Seiteninhalt und wächst mit ihm.
   Kein eigenes Kartensystem: die Abschnitte und Folien benutzen .karte
   wie der Rest der Plattform. Hier steht nur, was die Spalte selbst
   braucht. */
.kursuebersicht > h2:first-child { margin-top: 0; }
.kursuebersicht h3 {
  margin: 1.8rem 0 .6rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--linie);
}
.kursuebersicht h4 { margin: 0 0 .4rem; }
.kursuebersicht .karte { margin: 0 0 .8rem; }
/* Lange Kennungen und Dateinamen aus der Lieferung dürfen die Spalte
   nicht auseinanderdrücken — die Seite scrollt nie waagrecht. */
.kursuebersicht li, .kursuebersicht dd { overflow-wrap: anywhere; }
/* Meta des Standes: Begriff und Wert nebeneinander, auf Schmal
   untereinander (Abschnitt 13 kippt das Raster). */
.stand-meta {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: .3rem .9rem;
  margin: 0;
}
.stand-meta > dt { font-weight: 600; color: var(--text-koerper); }
.stand-meta > dd { margin: 0; }

/* Abschnitte und Folien als Kapseln (frontend-usability/07, ADR-0031):
   <details class="karte kapsel">. Die Grundform kommt bewusst aus zwei
   Bestandssystemen -- dem Kartenrahmen (Abschnitt 6, .karte) und dem
   Aufklappverhalten (Abschnitt 7, details/summary) -- und wird hier nicht
   verdoppelt; dieselbe Kombination traegt bereits die Rueckmeldungen des
   laufenden Kurses (<details class="karte">) weiter oben auf derselben
   Seite. Hier steht nur, was die Kapsel zusaetzlich braucht.

   Titel und Folienzahl nebeneinander, mit Umbruch statt Ueberlauf: eine
   lange Abschnittsueberschrift und "12 Folien" duerfen sich auf einem
   schmalen Schirm (~390px) auf zwei Zeilen legen -- die Summary ist
   bereits flex (Abschnitt 7), hier kommt nur flex-wrap dazu. Margin 0 auf
   der Ueberschrift selbst haelt die Grundlinien-Ausrichtung der Summary
   sauber (sonst draengt die eigene Absatzmarge der h4/h3 den Text nach
   unten weg). */
.kapsel > summary { flex-wrap: wrap; }
.kapsel > summary h3, .kapsel > summary h4 { margin: 0; }
.kapsel-zusatz {
  font-weight: 400;
  font-size: .875rem;
  color: var(--gedeckt-text);
}
/* Der Lernpfad traegt aus Gruenden der Ueberschriften-Hierarchie ein h3
   (N190: er steht in Dokumentreihenfolge NACH den h4-Abschnitten, ist
   selbst aber kein weiterer Abschnitt) -- optisch soll er trotzdem wie
   seine Geschwister wirken, nicht wie die kleine Versal-Kickerzeile aus
   Abschnitt 5 (h3 dort). */
.kapsel-h3 {
  font-family: var(--font-serif);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text);
}
/* Nachbesserung F3 (Vor-Abnahme Ticket 07): Die Regel darüber erreichte
   ihr eigenes Ziel nicht. `.kursuebersicht h3` (Spezifität 0,1,1) setzt
   `border-bottom` und `padding-bottom` — und schlägt damit jede Angabe im
   Block darüber (0,1,0). Unter dem Wort "Lernpfad" IM Summary lag deshalb
   eine Trennlinie, die die Geschwister-Kapseln (h4-Titel) nicht haben,
   aufgeklappt zusätzlich zur Kapsellinie aus `details[open] > summary`
   (Abschnitt 7) — genau die Uneinheitlichkeit, gegen die `.kapsel-h3`
   geschrieben wurde. Deshalb als EIGENE Regel mit der nötigen Schärfe
   (0,2,1) statt als Zeile oben: die Farb- und Schriftangaben schlagen den
   Basis-h3 schon bei 0,1,0, nur Linie und Polster brauchen mehr. Der
   Rand-Teil war bereits gelöst (`.kapsel > summary h3`, 0,1,2). */
.kursuebersicht .kapsel-h3 { border-bottom: 0; padding-bottom: 0; }

/* ---- Karteikasten: der Kopf des Abschnitts (Ticket 02, ADR-0033) -----
   Lernergebnisse und die beiden Bedingungen als EIN Block ueber den
   Karten, durch eine Linie von ihnen getrennt. Vorher standen dieselben
   drei Angaben als drei gleich aussehende .hilfetext-Absaetze zwischen
   Klappzeile und erster Folie -- optisch nicht von Folieninhalt zu
   unterscheiden.
   Das `padding` als Kurzschrift ist Absicht und nicht Nachlaessigkeit:
   `details > :not(summary)` (Abschnitt 7) rueckt Kapselinhalt um 1,45rem
   ein, damit Fliesstext unter dem Summary-TEXT beginnt. Ein Stapel
   randloser Karten will das nicht -- Kopf und Karten stehen buendig an
   der Innenkante der Kapsel. Die Kurzschrift (0,1,0) schlaegt die Regel
   (0,0,2) und setzt padding-left mit; getrennte Angaben taeten es nicht. */
.kapitel-kopf {
  padding: 0 0 var(--raum-4);
  margin: 0 0 var(--raum-5);
  border-bottom: 1px solid var(--linie);
}
.kapitel-kopf > :first-child { margin-top: 0; }
.kapitel-kopf > :last-child { margin-bottom: 0; }
.kapitel-ziele { margin: 0; }
/* Die beiden Bedingungen sind Begriff-und-Wert, keine Aufzaehlung --
   dieselbe Rezeptur wie .stand-meta weiter oben, nur enger gesetzt.
   Abschnitt 13 kippt beide Raster gemeinsam auf eine Spalte. */
.kapitel-regeln {
  display: grid;
  grid-template-columns: minmax(10rem, max-content) 1fr;
  gap: .3rem .9rem;
  margin: var(--raum-4) 0 0;
  font-size: .9375rem;
}
.kapitel-regeln > dt { font-weight: 600; color: var(--text-koerper); }
.kapitel-regeln > dd { margin: 0; color: var(--text-koerper); }

/* ---- Karteikasten: die Folie als Karte (Ticket 02, ADR-0033) ---------
   Bis hierher war die Folie eine Textblock-Einheit mit einer Trennlinie
   darueber, und alles darin -- Titel ausgenommen -- war dieselbe graue
   .hilfetext-Kleinschrift: Kennung, Aufbau, Elementnamen, Ebenen,
   Dateipfade, Sprungziele. Manuels Urteil dazu (N270): Folien-Daten-Dump.
   Der Umbau macht drei Dinge, und nur drei:

   (1) FLAECHE. Die Karte bekommt eine eigene warme Flaeche
       (--flaeche-warm) in der weissen Kapsel (.karte). Papier im Kasten,
       nicht Kasten im Kasten: kein zweiter Rahmen, kein zweiter Schatten
       -- die Kapsel traegt beides schon (dieselbe Ueberlegung wie
       .karte > .aufklapp, Abschnitt 6).
   (2) ACHSE. Eine schmale Spalte links traegt die Nummer der Karte in
       ihrer Kapsel. Ludwig denkt in Fundstellen ("Folie 3, oben"); ueber
       zwoelf Karten hinweg ist die Zahlenreihe das, woran er abzaehlt,
       wo er stehengeblieben ist. Die Reihenfolge IST hier Information --
       ein Kurs wird der Reihe nach durchlaufen -- also darf sie
       nummeriert werden.
   (3) GROESSENSTUFEN. Titel in Serif (1,0625rem), Folieninhalt in voller
       Koerpergroesse (1rem), Marken und Technik klein und gedeckt. Der
       Inhalt der Folie ist der Inhalt der Karte, nicht ihre Fussnote.
   Die rechte obere Ecke der Karte gehoert den Aktionen (Ticket 06
   Rueckmelde-Symbol, Ticket 08 Durchgesehen-Haken). Sie bekommt seit
   Ticket 08 eine EIGENE, `auto` breite dritte Spalte statt eines
   reservierten Maszes im Titel: Die Spalte nimmt genau die Breite, die
   drinsteht, und der Titel bricht davor um. Ein Reservemasz haette
   spaetestens beim zweiten Symbol nicht mehr gestimmt — und ein
   ueberlappender Knopf ist der Fehler, den man erst am langen Folientitel
   sieht, also nie im Testkurs. */
.folie-karte {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  column-gap: var(--raum-3);
  align-items: baseline;
  margin: 0 0 var(--raum-3);
  padding: var(--raum-4) var(--karte-innen);
  border-radius: var(--radius);
  background: var(--flaeche-warm);
}
.folie-karte > * { grid-column: 2; }
.folie-karte:last-child { margin-bottom: 0; }
.folie-karte > .folie-nr {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  margin: 0;
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gedeckt-text);
}
.folie-karte h5 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--text);
  margin: 0;
}
/* Die beiden selbsterklaerenden Merkmale direkt unter dem Titel
   ("Mit Sprecherstimme", "Von hier geht es nicht einfach weiter"). */
.folie-merkmale {
  margin: var(--raum-1) 0 0;
  font-size: .875rem;
  color: var(--gedeckt-text);
}
/* Beschriftung einer Gruppe in der Karte und im Kapitelkopf. Klein und
   gedeckt wie .hilfetext, aber halbfett -- sie beschriftet, sie erklaert
   nicht, und ein zweiter Grauton waere ein Ton zu viel. */
.folie-marke {
  margin: var(--raum-4) 0 var(--raum-2);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gedeckt-text);
}
/* Der Folieninhalt: eine Liste OHNE Aufzaehlungspunkte. Statt eines
   gleichfoermigen Punkts traegt jede Zeile, die eine Beschreibung ist
   (Bild, Ton, Video, Auswahl), ihre eigene Marke -- der Marker sagt
   damit etwas, statt nur zu markieren. Reiner Folientext steht ohne
   Marke da: er IST der Inhalt, keine Beschreibung von etwas. */
.folie-inhalt {
  list-style: none;
  margin: 0;
  padding: 0;
}
.folie-inhalt > li {
  margin: 0 0 var(--raum-2);
  color: var(--text-koerper);
}
.folie-inhalt > li:last-child { margin-bottom: 0; }
.inhalt-marke {
  display: inline-block;
  margin-right: .45rem;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--navy);
}
/* Anhaengsel einer Inhaltszeile (Auswahlfelder, Sprecherin): eigene
   Zeile, damit die Marke davor am Zeilenanfang steht und nicht mitten
   im Satz haengt. */
.inhalt-zusatz {
  display: block;
  margin-top: var(--raum-1);
  font-size: .9375rem;
}
/* Traegt die Zeile nichts als ihr Anhaengsel -- ein Auswahlbaustein, dem
   die Lieferung nur die Kennung als Namen mitgegeben hat --, ist das
   Anhaengsel die Zeile und braucht keine Einrueckung von oben. */
.folie-inhalt > li > .inhalt-zusatz:first-child { margin-top: 0; }
/* =====================================================================
   Rueckmeldung am Ort (Ticket 06 der Welle pruef-erlebnis, N272)
   ---------------------------------------------------------------------
   Der Gedanke in einem Satz: An allem, was eine Fundstelle HAT, sitzt
   eine kleine Notiz-Marke, und alle sitzen am rechten Rand ihrer Zeile.
   Eine Prueffflaeche im Karteikasten-Bild ist ein Stapel Karten -- und
   Anmerkungen macht man am Rand einer Karte, nicht auf einem Zettel am
   Ende des Stapels. Die Marke ist deshalb bewusst KEIN Emoji (das 💬 der
   alten Leiste war Teil des "wirkt nicht modern", N270) und kein
   nachgeladenes Symbolset (ADR-0034 laesst keines zu), sondern zwei
   Rechtecke aus dem Bordmittel CSS: ein Kaertchen mit zwei Zeilen darauf.
   Es kostet kein Byte Markup je Zeile -- und auf einer Folie mit zwanzig
   Bausteinen zaehlt genau das.

   Aufgehen tut die Maske DA, wo geklickt wurde (`.melde-platz`), mit
   einer navyfarbenen Kante zur Karte hin: sie haengt sichtbar an ihrer
   Stelle, statt als Kasten daneben zu stehen. Danach bleibt an derselben
   Stelle eine Zeile stehen, die sagt, dass es angekommen ist. Kein
   Sprung, kein Neuladen, dieselbe Leseposition (N199).       */

/* Die rechte obere Ecke der Karte selbst steht weiter unten in diesem
   Abschnitt (`.folie-karte > .karte-aktionen`, Ticket 08) -- eine Regel
   an einem Ort. Ticket 06 haengt sein Symbol nur hinein und legt keine
   zweite Regel daneben.

   Eine Ebene hoeher dagegen: die Aktionen am ganzen Abschnitt. Als
   Spalte, damit die aufgehende Maske darunter die volle Breite bekommt
   und nicht neben dem Symbol klemmt. */
.kapitel-aktionen {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0 0 var(--raum-4);
}
.kapitel-aktionen > .melde-platz { align-self: stretch; }

/* Das Symbol selbst. Ruhig, bis man es braucht: gedeckte Farbe, keine
   Kontur -- erst bei Hover, Fokus und geoeffneter Maske wird es navy und
   bekommt seine Flaeche. Volles Bedienziel (2,75rem = 44px), also KEINE
   neue Ausnahme in der Liste bei Abschnitt 9. */
.melden {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0 var(--raum-2);
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  color: var(--gedeckt-text);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  vertical-align: middle;
  transition: color .12s ease, background-color .12s ease,
              border-color .12s ease;
}
.melden--wort { padding: 0 var(--raum-3); }
.melden:hover,
.melden[aria-expanded="true"] {
  color: var(--navy);
  background: var(--navy-hauch);
  border-color: var(--linie-kraeftig);
  text-decoration: none;
}
.melden:focus-visible { color: var(--navy); }
/* Die Marke: ein Kaertchen mit zwei Zeilen darauf. Reines CSS, kein
   Zeichen aus einer Schrift (die haette auf jedem System eine andere
   Anmutung) und kein Bild (das waere eine zweite Anfrage je Seite). */
.melde-marke {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 1.05rem;
  height: .875rem;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}
.melde-marke::before,
.melde-marke::after {
  content: "";
  position: absolute;
  left: .2rem;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
}
.melde-marke::before { top: .21rem; right: .2rem; }
.melde-marke::after  { top: .45rem; right: .42rem; }
/* Dieselbe Marke MITTEN IN einer Textzeile -- an der Klappzeile der
   Medien-Maske (Ticket 04), die ihr Symbol nicht daneben, sondern in
   sich traegt. Gleiche Marke, gleiche Bedeutung, anderer Ort. */
.melde-marke--zeile {
  display: inline-block;
  margin-right: .4rem;
  vertical-align: -.08em;
}

/* Ticket 07: Eine Stelle, an der ein nicht abgeschickter Entwurf wartet.
   Das Attribut setzt das Skript (`data-uep-entwurf="ja"`), und es setzt
   NUR das -- der Satz dazu steht in der Maske, die den Entwurf zeigt.
   Ein Punkt und kein Ausrufezeichen: Der Entwurf ist kein Fehler und
   keine Warnung, sondern eine liegengebliebene Arbeit.
   Die Marke sitzt an der Ecke des Kaertchens und kostet keinen Platz --
   die Kartenecke traegt bereits zwei Bedienziele (T06-N1), ein drittes
   Element daneben braeche sie auf schmalem Schirm ein zweites Mal um. */
.melden[data-uep-entwurf="ja"] {
  position: relative;
  color: var(--navy);
}
.melden[data-uep-entwurf="ja"]::after {
  content: "";
  position: absolute;
  top: .5rem;
  right: .38rem;
  width: .44rem;
  height: .44rem;
  border-radius: 50%;
  background: var(--navy);
}

/* Der Platz, an dem die Maske aufgeht. Leer nimmt er keinen Raum ein --
   ohne Skript bleibt er sein Leben lang leer, und niemand sieht ihm das
   an. */
.melde-platz:empty { display: none; }
.melde-maske {
  margin: var(--raum-3) 0 0;
  padding: var(--raum-4);
  border: 1px solid var(--linie-kraeftig);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  animation: melde-auf .14s ease-out;
}
@keyframes melde-auf {
  from { opacity: 0; transform: translateY(-.25rem); }
  to   { opacity: 1; transform: none; }
}
.melde-maske > form > :first-child { margin-top: 0; }
/* Absenden und Abbrechen nebeneinander; auf schmalem Schirm untereinander
   (flex-wrap), damit kein Bedienziel aus dem Bild laeuft. */
.melde-knopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-3);
}
.melde-knopfzeile > .knopf { margin-top: var(--raum-4); }
/* Die Bestaetigung bleibt an der Stelle stehen, an der gemeldet wurde. */
.melde-fertig {
  margin: var(--raum-3) 0 0;
  border-left: 3px solid var(--gruen);
}

/* ---- Prueffortschritt: der eigene Haken (Ticket 08, ADR-0013-Nachtrag)
   Gruen ist das Hand-OK der Pruefenden — je Konto, fuer andere unsichtbar,
   ohne jede Sperrwirkung. Die Gestaltung sagt genau das und nicht mehr:

   (1) LEISE, BIS ER GESETZT IST. Ungesetzt ist der Haken ein Umriss in der
       gedeckten Zweitstimme auf weissem Grund. Zwanzig gefuellte Knoepfe
       waeren die lauteste Sache der Seite — und die Hauptsache dieser
       Flaeche ist der Kursinhalt, nicht das Abhaken. Gesetzt traegt er
       --gruen-hauch, --gruen als Rand und Schrift und ein Haekchen davor:
       der Zustand ist damit ueber Farbe UND Zeichen erkennbar, nie ueber
       Farbe allein (WCAG 1.4.1).
   (2) DER RAND IST --linie-feld, nicht --linie-kraeftig. Er ist die Grenze
       eines Bedienelements und braucht 3:1 (WCAG 1.4.11); die Zierlinie
       traegt 1,5:1 und liesse den ungesetzten Haken auf der warmen Karte
       verschwinden. Gemessen: --linie-feld auf --flaeche 3,29:1, --gruen
       auf --gruen-hauch 5,72:1, --gedeckt-text auf --flaeche 6,0:1.
   (3) 44px BLEIBEN 44px. Der Haken ist die meistwiederholte Handlung
       dieser Flaeche und am Telefon die einzige — hier wird die Zielgroesse
       nicht heruntergesetzt (Abschnitt 9, benannte Ausnahmen). Nur die
       Marge faellt weg: Der Knopf sitzt in einer Zeile mit dem Titel, nicht
       unter einem Absatz.
   Der Behaelter `.karte-aktionen` gehoert Ticket 06 und 08 gemeinsam —
   deshalb traegt er Ausrichtung und Abstand, und die einzelne Aktion nur
   ihr eigenes Aussehen. */
.folie-karte > .karte-aktionen {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--raum-2);
  margin: 0;
  padding-left: var(--raum-3);
}
.karte-aktion { margin: 0; }
.knopf-haken {
  margin-top: 0;
  padding: var(--raum-2) var(--raum-4);
  font-size: .875rem;
  color: var(--gedeckt-text);
  background: var(--flaeche);
  border-color: var(--linie-feld);
  box-shadow: none;
}
.knopf-haken:hover,
.knopf-haken[aria-pressed="true"] {
  color: var(--gruen);
  background: var(--gruen-hauch);
  border-color: var(--gruen);
  box-shadow: none;
}
/* Das Zeichen steht in der Gestaltung und nicht im Markup: Es ist keine
   Sprache (Vorlesesoftware bekommt den Zustand aus `aria-pressed`), und
   das Makro rendert die Karte bis zu fuenfhundertmal. */
.knopf-haken[aria-pressed="true"]::before {
  content: "\2713";
  margin-right: .4rem;
  font-weight: 700;
}
/* Waehrend der Haken unterwegs ist: sichtbar, aber nicht noch einmal
   klickbar. Kein Verschwinden — ein Knopf, der weggeht, wirkt kaputt. */
.knopf-haken[disabled] { opacity: .65; cursor: progress; }

/* Der Kapitelzaehler im Klappzeilen-Kopf. Eigene Zeile unter Titel und
   Folienzahl (`flex-basis`, die Summary ist bereits ein umbrechender
   Flexrow, Abschnitt 6): zwei gleich aussehende graue Chips nebeneinander
   waeren zwei Auskuenfte, die man auseinanderhalten muss. Gruen erst ab
   dem ersten Haken — ein leeres Kapitel soll nicht so aussehen, als sei
   dort schon etwas passiert. Tabellenziffern, damit die Zahl beim
   Hochzaehlen nicht springt. */
.pruefstand {
  flex-basis: 100%;
  margin-top: var(--raum-1);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gedeckt-text);
}
.pruefstand[data-stand="teil"],
.pruefstand[data-stand="voll"] { color: var(--gruen); }

/* Der leise Aufklapper am Fuss der Karte: Kennungen, Aufbau-Typen,
   Ebenen, Sprungziele, Dateipfade. Er erbt die details-Mechanik aus
   Abschnitt 7 (Dreieck, Tastatur, Fokus) und legt nur Rahmen, Radius
   und Flaeche ab -- er sitzt IN der Karte und darf kein zweiter Kasten
   sein. Die Trennlinie oben ersetzt den Rahmen. */
.folie-technik {
  margin: var(--raum-4) 0 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--linie-kraeftig);
  border-radius: 0;
  background: transparent;
}
.folie-technik > summary {
  font-size: .875rem;
  font-weight: 500;
  color: var(--gedeckt-text);
  flex-wrap: wrap;
}
/* Auf warmem Grund ist der warme Ueberfahr-Grund aus Abschnitt 7
   unsichtbar -- hier hellt die Zeile stattdessen auf Weiss auf. Die
   Ausrueckung der Grundregel bleibt, nur die Farbe kehrt sich um. */
.folie-technik > summary:hover { background: var(--flaeche); }
.folie-technik[open] > summary {
  border-bottom: 0;
  margin-bottom: var(--raum-2);
}
.folie-technik[open] { padding-bottom: 0; }
.folie-technik > :not(summary) { padding-left: 0; }
.technik-liste {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) 1fr;
  gap: .3rem .9rem;
  margin: 0;
  font-size: .875rem;
  color: var(--text-koerper);
}
.technik-liste > dt { font-weight: 600; }
.technik-liste > dd { margin: 0; }
.technik-zeilen { list-style: none; margin: 0; padding: 0; }
.technik-zeilen > li { margin: 0 0 .2rem; }
.technik-zeilen > li:last-child { margin-bottom: 0; }
/* Maschinenwert, nicht Satz: dieselbe Ueberlegung wie .pruefwert
   (Abschnitt 12) -- eine Kennung oder ein Dateipfad wird abgelesen und
   abgetippt, nicht gelesen. Der Monospace ist in dieser Fläche das
   Zeichen dafuer, dass ein Wert aus der Maschine kommt; die Kartennummer
   traegt ihn deshalb NICHT (sie ist eine Position, kein Wert). */
.technik-wert {
  font-family: var(--font-fest);
  font-size: .8125rem;
  overflow-wrap: anywhere;
}
/* Lange Kennungen/Elementnamen aus der Lieferung duerfen die Kapsel nicht
   waagrecht sprengen -- traegt bereits `.kursuebersicht li` (oben): die
   Folie steht als Nachfahre in genau diesem Container, keine zweite
   Regel noetig. */

/* ---- Rot: die Marke am Ort (Ticket 09, ADR-0013-Nachtrag) ------------
   Rot ist die andere Haelfte der Ampel und sagt: an dieser Stelle liegt
   eine Rueckmeldung, die noch niemand eingearbeitet hat. Gesetzt wird es
   nie -- es entsteht beim Rendern und geht mit der Erledigung weg.

   DER GEGENSATZ ZUM HAKEN IST GEBAUT, NICHT GEFAERBT. Gruen ist ein
   umrandeter Knopf, klein, rechts oben in der Kartenecke, mit dem Wort
   "Durchgesehen". Rot ist ein voll breiter Streifen unter dem Titel, mit
   gefuellter Flaeche, einer kraeftigen Kante links und dem Satz "2 offene
   Rueckmeldungen". Form, Ort, Breite und Wort unterscheiden sich; ein
   Schirm ohne Farbe verliert nichts (WCAG 1.4.1). Beide koennen an
   derselben Karte stehen, ohne einander zu stoeren -- sie sitzen an
   verschiedenen Enden.

   DIE KANTE LINKS IST DAS EINZIGE SCHMUCKSTUECK. Kein Ausrufezeichen,
   kein Kreis, kein zweites Zeichen: Der Satz sagt die Sache schon, und
   auf einer Flaeche mit sechzig Karten ist jedes wiederholte Zeichen ein
   Geraeusch mehr. Das Dreieck der Klappzeile bleibt (es sagt "hier steht
   noch etwas") und faerbt mit.

   Gemessene Kontraste: --rot-tief auf --rot-hauch 5,72:1 (Satz und
   Kante), --text-koerper auf --rot-hauch ueber 12:1 (der gemeldete
   Text). */
.rot-marke {
  background: var(--rot-hauch);
  border: 0;
  border-left: 3px solid var(--rot-tief);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  margin: var(--raum-2) 0 var(--raum-3);
  padding: 0 var(--raum-4);
}
.rot-marke > summary {
  padding: var(--raum-2) 0;
  font-size: .875rem;
  font-weight: 700;
  color: var(--rot-tief);
  flex-wrap: wrap;
}
.rot-marke > summary::before { color: var(--rot-tief); }
.rot-marke > summary:hover { color: var(--rot-tief); background: none; }
.rot-marke[open] > summary {
  border-bottom-color: rgba(185, 28, 28, .22);
  margin-bottom: var(--raum-2);
}
.rot-marke[open] { padding-bottom: var(--raum-2); }
.rot-marke > :not(summary) { padding-left: 1.45rem; }
/* Die gemeldeten Texte. Ohne Aufzaehlungspunkt und ohne Liste: Jede Notiz
   traegt ihren eigenen Kopf (Art, wer, wann), und ein Punkt davor waere
   ein Marker neben einem Marker -- der Grund fuer `div` statt `li` steht
   in der Vorlage (Ausschnitte der Nachbarsuiten schneiden am `</li>`). */
.rot-notizen { margin: 0; padding: 0; }
.rot-notiz { margin: 0 0 var(--raum-3); }
.rot-notiz:last-child { margin-bottom: 0; }
.rot-notiz-kopf {
  margin: 0 0 var(--raum-1);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--rot-tief);
}
.rot-notiz-text {
  margin: 0;
  font-size: .9375rem;
  color: var(--text-koerper);
  overflow-wrap: anywhere;
}
/* Der Wegweiser in der Klappzeile eines Abschnitts. Gleiche Form wie der
   Kapitelzaehler des Hakens (.pruefstand) -- eigene Zeile, klein,
   halbfett, Tabellenziffern --, damit die beiden Auskuenfte als PAAR
   gelesen werden: was ist offen, wie weit bin ich. Unterschieden werden
   sie am Satz, nicht an der Farbe. Rot steht zuerst: Es ist die
   Auskunft, die zum Hinsehen auffordert. */
.rotweg {
  flex-basis: 100%;
  margin-top: var(--raum-1);
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rot-tief);
}
/* Der Wegweiser steht in einer Klappzeile, die beim Ueberfahren die Farbe
   wechselt (.aufklapp > summary:hover). Er darf dabei nicht mitgehen --
   sonst waere Rot fuer einen Moment Navy. */
.kapsel > summary:hover .rotweg { color: var(--rot-tief); }

/* ---------- Medien in der Folienkarte (Ticket 04, ADR-0013/-0033) ------
   Bis hierher lagen alle Medien eines Standes auf einer eigenen Seite,
   je Medium eine .karte. Jetzt stehen sie IN der Folienkarte, in
   derselben `.folie-inhalt`-Liste, in der schon steht, was auf der Folie
   zu lesen ist — dieselbe Marke am Zeilenanfang, dieselbe Größenstufe.
   Ein zweites Kartensystem in der Karte wäre eine Schachtel in der
   Schachtel; die Zeile trägt sich selbst.

   Das Bild ist bewusst ein KONTAKTABZUG und kein Aufmacher: eine feste
   Höhenstufe, damit eine Folie mit vier Bildern noch als EINE Karte
   lesbar bleibt und Ludwig die Beschreibungen untereinander vergleichen
   kann, statt viermal zu scrollen. In voller Größe steht es einen Klick
   entfernt — das Bild ist zugleich der Weg zur Datei. */
.folie-medien > li {
  margin-bottom: var(--raum-4);
}
.folie-medien > li:last-child { margin-bottom: 0; }
/* Die Lücke des Medien-Gates (Datei ohne Protokolleintrag, Eintrag ohne
   Datei): Die LINKE Kante gehört dem Farbsystem — dieselbe Sprache wie
   .karte--amber, eine Stufe kleiner, weil hier eine Zeile markiert wird
   und keine Fläche. */
.folie-medium--luecke {
  padding-left: var(--raum-3);
  border-left: 3px solid var(--amber);
}
.medium-zeile, .medium-sprechtext, .medium-zusatz {
  margin: 0 0 var(--raum-2);
  overflow-wrap: anywhere;      /* lange Dateinamen sprengen nie die Spalte */
}
.medium-sprechtext, .medium-zusatz {
  font-size: .875rem;
  color: var(--gedeckt-text);
}
/* `height: auto` gehört dazu: ohne sie zerrt ein Bild mit height-Attribut
   das Seitenverhältnis, sobald max-height greift. */
.medium-abzug {
  display: inline-block;
  margin: 0 0 var(--raum-2);
  border-radius: var(--radius-klein);
  background: var(--papier);
  box-shadow: 0 0 0 1px var(--linie-kraeftig);
  line-height: 0;               /* kein Abstand unter dem Bild im Rahmen */
}
.medium-abzug > img {
  display: block;
  max-width: 100%;
  max-height: 11rem;
  width: auto;
  height: auto;
  border-radius: var(--radius-klein);
}
.medium-abspieler {
  display: block;
  max-width: 100%;
  max-height: 14rem;
  height: auto;
  margin: 0 0 var(--raum-2);
  border-radius: var(--radius-klein);
  background: var(--papier);
}
/* Der Ton bekommt die volle Breite: der native Regler ist sonst je nach
   Browser 200px schmal und auf dem Handy kaum zu treffen. */
.medium-ton {
  display: block;
  width: 100%;
  margin: 0 0 var(--raum-2);
}
/* Die zwei Aufklapper am Medium — Herkunft und Rückmeldung — sitzen in
   einer Liste in einer Karte. Die Grundform (.aufklapp, Abschnitt 7) ist
   ein eigener weißer Kasten mit Rahmen und 1,5rem Innenabstand; zweimal
   davon je Medium wäre eine Schachtel in der Schachtel in der Schachtel,
   und bei sechs Medien auf einer Folie zerfiele die Karte in zwölf
   Kästen. Hier trägt die Klappzeile sich selbst — dieselbe Haltung wie
   bei .folie-technik: klein, gedeckt, ohne eigenen Körper. Aufgeklappt
   bindet eine linke Kante das Ausgeklappte an seine Zeile, damit ein
   Formular nicht frei in der Karte steht. */
.folie-medien > li > .aufklapp {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 var(--raum-2);
}
.folie-medien > li > .aufklapp > summary {
  padding: var(--raum-2) 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gedeckt-text);
}
.folie-medien > li > .aufklapp[open] > summary { color: var(--text); }
.folie-medien > li > .aufklapp[open] > :not(summary) {
  border-left: 2px solid var(--linie-kraeftig);
  padding-left: var(--raum-3);
}

/* Die Sammelstelle am Fuß der Prüffläche: was auf keiner Folie liegt,
   die Lücken-Bilanz und die Deckelsätze. Sie ist ein Abschnitt der
   Prüffläche, keine eigene Seite — deshalb dieselbe Überschriftenstufe
   wie „Abschnitte" darüber und kein eigener Rahmen. */
.medien-gruppe { margin-top: var(--raum-7); }
.medien-gruppe > h3 {
  margin: var(--raum-6) 0 var(--raum-3);
  padding-bottom: var(--raum-1);
  border-bottom: 1px solid var(--linie);
  font-size: 1.0625rem;
  font-family: var(--font-serif);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}
.medien-gruppe > .folie-medien {
  list-style: none;
  margin: 0 0 var(--raum-5);
  padding: 0;
}

/* Plattform-Feedback: fixer Knopf unten rechts, aufklappbar ohne JS.
   Setzt die .aufklapp-Grundform aus Abschnitt 7 fort, hebt aber Rahmen
   und Innenabstand auf — hier trägt der Kasten sich selbst.
   Feinschliff Task 7: ZUGEKLAPPT ist es ein kleiner, ruhiger Knopf (keine
   feste Breite; blasser Schatten) — erst AUFGEKLAPPT wird daraus das
   breitere Panel mit dem betonten Schatten. Vorher stand die volle
   Panelbreite auch im Ruhezustand da, das wirkte wie ein Balken statt
   einem "dezenten" Knopf.
   N2 (Sichtpruefung 12.08.): zugeklappt zeigt der Knopf NUR die
   Sprechblase — kein "Feedback"-Text, kein ▸-Dreieck. Der Titel-Span
   verschwindet dabei per Clip-Technik (wie .nur-fuer-screenreader,
   Abschnitt 9): display:none naehme ihn aus dem Accessibility-Tree,
   so bleibt der Knopf fuer Screenreader "Feedback". Aufgeklappt kehrt
   der Titel sichtbar zurueck und das Symbol tritt ab. */
.feedback-fix {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.feedback-fix > summary {
  padding: .55rem 1rem;
  margin: 0;
  font-size: .875rem;
  color: var(--navy);
}
/* N2, zugeklappter Zustand: kompakter Symbol-Knopf. Etwas groesseres
   Zeichen + rundum gleicher Innenabstand halten die Klickflaeche
   brauchbar, obwohl der Text wegfaellt. */
.feedback-fix:not([open]) > summary {
  padding: .5rem .7rem;
  font-size: 1.1rem;
}
.feedback-fix:not([open]) > summary::before { content: none; }
.feedback-fix:not([open]) > summary .fix-titel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.feedback-fix[open] > summary .fix-symbol { display: none; }
.feedback-fix[open] {
  width: min(23rem, calc(100vw - 2rem));
  padding-bottom: 0;
  box-shadow: var(--schatten-hoch);
}
.feedback-fix[open] > summary {
  border-bottom: 1px solid var(--linie);
  margin-bottom: 0;
}
.feedback-fix > .fix-inhalt {
  padding: 0 1rem 1rem;
}
.feedback-fix label { margin-top: .8rem; max-width: 100%; }
.feedback-fix input, .feedback-fix select, .feedback-fix textarea {
  max-width: 100%;
}
.feedback-fix button { margin-top: .8rem; }
.feedback-fix .hilfetext { max-width: 100%; }

/* Fehlerseiten: Code klein über dem Klartext, nie als Rätsel allein.
   Versal-Kleinlabel-Rezeptur (Abschnitt 5). */
.fehler-code {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gedeckt-text);
  margin-bottom: var(--raum-1);
}


/* ---------- 12b Prozessketten-Gates am Vorgang (S2c) ------------------
   Die Vorgangsseite trägt seit S2c mehrere Handlungsblöcke gleichzeitig
   (Spec-Nachtrag §3: „mehrere Du-bist-dran-Karten sind möglich"). Neue
   Bausteine nur dort, wo Bestandsklassen nicht tragen — alles andere
   sind .karte, .karte--amber, .knopf, .hilfetext, <pre>.              */

/* Sprungliste „Du bist dran": kompakt, ohne Aufzählungspunkte — die
   Karte selbst ist schon der Blickfang, ein zweiter wäre Lärm. */
.gate-liste {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
}
.gate-liste > li { margin: 0 0 .3rem; }
.gate-liste > li:last-child { margin-bottom: 0; }

/* Eine Rückfrage samt Antwortfeld. Die Trennlinie macht sichtbar, wo
   eine Frage endet und die nächste anfängt (Ludwig denkt in
   Fundstellen — drei Fragen als ein Textblock wären eine Zumutung). */
.frage {
  border-top: 1px solid var(--linie);
  margin-top: 1.1rem;
  padding-top: 1.1rem;
}
.frage:first-of-type { border-top: 0; margin-top: .6rem; padding-top: 0; }
.frage > form { margin-top: .6rem; }

/* Ankreuzfeld mit Text daneben (Materialbezug einer Antwort). Die
   Bestandsregel für <label> stellt Beschriftungen übereinander — hier
   soll das Kästchen VOR dem Namen stehen, in einer Zeile. */
.wahl {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: .25rem 0;
  font-weight: 400;
}
.wahl input { width: auto; margin: 0; }

/* Prüfwert-Zeile am Paket: lange Hexkette, die umbrechen darf und nie
   die Spalte sprengt. Monospace, damit sie als Maschinenwert lesbar ist
   und nicht als Satz gelesen wird. */
.pruefwert {
  font-family: var(--font-fest);
  font-size: .8125rem;
  color: var(--gedeckt-text);
  overflow-wrap: anywhere;
}

/* Betriebs-Rueckmeldung zum laufenden Kurs (Aufgabe 4): der Text kommt
   von der Eingeberin frei getippt, keine Rich-Text-Maske. Absaetze
   (Leerzeilen, Zeilenumbrueche) sollen erhalten bleiben, ohne dass wir
   HTML daraus bauen muessten (kein |safe) -- pre-wrap reicht dafuer. */
.rueckmeldung-text { white-space: pre-wrap; }

/* Erledigte Rueckmeldungen (Haken kommt erst in Aufgabe 5): gedaempft
   statt versteckt -- sie bleiben Teil des Verlaufs, treten aber optisch
   zurueck. Dieselbe Zurueckhaltung wie .zeitleiste > li.offen, nur auf
   einer Karte statt einem Listenpunkt. */
.karte--erledigt {
  background: var(--flaeche-warm);
  color: var(--gedeckt-text);
}
.karte--erledigt > summary { color: var(--gedeckt-text); }


/* ---------- 13 Schmale Schirme, Bewegungsarmut, Druck ----------------- */

/* Unter 720px: eine Spalte. Die Übersicht klappt ÜBER den Inhalt statt
   daneben — sie bleibt sichtbar, verliert nur die Seitenspalte. */
@media (max-width: 45rem) {
  /* N254/B17-1, aufgelöst in Ticket 03: Hier stand ein zweiter Wert für
     --kopf-hoehe — 4,8rem statt 3,4rem. Nicht, weil die Leiste hier so
     hoch wäre, sondern weil sie UMBRECHEN konnte und niemand ihre Höhe
     kannte: Der Wert war das Polster für den schlimmsten Fall, und im
     Normalfall stand jedes Sprungziel dafür 25px zu tief. Ein
     Schätzwert, der beide Fehler zugleich macht.
     Die Leiste bricht seit Ticket 03 nicht mehr um (`height` + `nowrap`
     in Abschnitt 3, Marke und Anzeigename kürzen sich). Damit gilt
     dieselbe Zahl wie überall, und dieser Block braucht sie nicht mehr
     zu kennen. Wer hier wieder eine eigene Höhe setzt, muss zuerst
     erklären, warum das Polster sie erfahren soll. */
  :root { --rand: 1rem; }

  /* getrennt, gleicher Grund wie oben: :has() darf die Block-Rückstellung
     des ausdrücklichen Modifikators nicht mit sich reißen. */
  .huelle--zweispaltig { display: block; }
  .huelle:has(> .uebersicht) { display: block; }
  .uebersicht {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .3rem;
    padding-bottom: .9rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--linie);
  }
  .uebersicht a {
    border-left: 0;
    border-bottom: 2px solid var(--linie);
    border-radius: var(--radius-klein) var(--radius-klein) 0 0;
    padding: .35rem .6rem;
  }
  .uebersicht a:hover { border-left: 0; border-bottom-color: var(--gedeckt); }
  .uebersicht a.aktiv { border-left: 0; border-bottom-color: var(--navy); }
  .uebersicht-titel { margin-left: 0; flex-basis: 100%; }

  /* Ticket 17: Hier standen drei feste Titelgrößen als Gegenstück zu
     drei festen Größen in Abschnitt 5 — sechs Zahlen für drei
     Überschriften, und beim Ändern wurde regelmäßig die Hälfte
     vergessen. Die Größen kommen jetzt aus clamp() in Abschnitt 5 und
     wachsen stetig mit dem Schirm; hier bleibt nur, was wirklich vom
     Schirm abhängt: Abstände und die ausgerückte Abschnittszahl. */
  .abschnitt-kopf { gap: var(--raum-3); margin-top: var(--raum-6); }
  .abschnitt-kopf > .abschnitt-nr { font-size: 1.9rem; }

  /* Der Kopf bleibt EINE Zeile: Marke links, Name + Abmelden rechts.
     Enger als oben (Abstand 1rem statt 1,6rem), damit auf 390px alle
     drei nebeneinander stehen; reicht es trotzdem nicht, gibt der
     Anzeigename als erster nach — `flex-shrink: 4` gewichtet ihn gegen
     die Marke, deren Wort man nicht halb lesen möchte. Beide kürzen mit
     Ellipse (Abschnitt 3). Die Höhe bleibt --kopf-hoehe, weil das
     Polster der Sprungziele sie liest (N254). */
  .kopf-innen {
    gap: 1rem;
    padding: 0 var(--rand);
    align-items: center;
  }
  .anzeigename { order: 2; max-width: 9rem; flex-shrink: 4; }
  .abmelden { order: 2; margin-left: 0; }

  /* Die Ortszeile rückt an den Seitenrand und legt die Beschriftung ab:
     Auf einem Telefon ist der Platz für den Kursnamen wertvoller als für
     das Wort darüber (Brigitte schaut den Stand unterwegs nach,
     Story 16). Höhe und Klebepunkt bleiben, sonst stimmte das Polster
     der Ankersprünge nicht mehr. */
  .ortszeile { padding: 0 var(--raum-3); gap: var(--raum-2); }
  .ort-marke { display: none; }

  main { padding-top: 1.6rem; }

  /* Breite Tabellen scrollen in sich, die Seite selbst nie. */
  .tabelle, table { display: block; overflow-x: auto; }

  /* Kontenliste: gestapelt statt sechs Spalten (N216, Ticket 15).
     Sechs Spalten stehen auf ~390 px nicht nebeneinander — die einzige
     Aktion (Sperren/Entsperren) sass in der letzten Spalte und war dort
     erst am Ende des Seitwärts-Scrollwegs zu sehen. Die Regel oben hat
     das nicht behoben, sie hat es nur ordentlich scrollen lassen.
     Gestapelt bekommt jedes Konto einen Block, die Aktion ist dessen
     letzte Zeile: kein Quer-Scroll, kein Skript. Der Spaltenname kommt
     aus `data-spalte` in verwaltung_konten.html; der Tabellenkopf steht
     gestapelt über nichts mehr und wird ausgeblendet. Wer eine Spalte
     ergänzt, gibt ihr dort ein data-spalte — sonst steht ihr Wert ohne
     Beschriftung da.
     `overflow` steht auf BEIDEN Achsen: Die Grundregel oben setzt
     `overflow: hidden` (für die runden Ecken), und ein alleiniges
     `overflow-x: visible` daneben rechnet nach der Overflow-Spezifikation
     wieder zu `auto` zurück — der Scrollweg wäre über Umwege zurück, den
     dieses Ticket gerade abschafft. Zu clippen gibt es hier nichts: Die
     Zeilen tragen keinen eigenen Hintergrund. */
  .tabelle--konten { overflow: visible; }
  .tabelle--konten thead { display: none; }
  .tabelle--konten tbody,
  .tabelle--konten tbody tr,
  .tabelle--konten tbody td { display: block; }
  .tabelle--konten tbody tr {
    padding: .7rem .9rem;
    border-top: 1px solid var(--linie);
  }
  .tabelle--konten tbody tr:first-child { border-top: 0; }
  .tabelle--konten tbody td {
    border-top: 0;
    padding: .1rem 0;
    overflow-wrap: anywhere;
  }
  /* Ticket 17, Kontrast-Durchgang: hier stand --gedeckt (#777, 4,26:1)
     an KLEINTEXT — Abschnitt 1 verbietet das ausdrücklich, weil AA für
     Kleintext 4,5:1 verlangt. Auf dem gestapelten Schirm ist dieser
     Vorsatz der einzige Spaltenname, den die Verwaltung noch sieht
     (der Tabellenkopf ist dort ausgeblendet), also gerade nicht die
     Stelle für eine Ausnahme. --gedeckt-text trägt 5,65:1. */
  .tabelle--konten tbody td::before {
    content: attr(data-spalte) ": ";
    color: var(--gedeckt-text);
    font-size: .8125rem;
  }
  .tabelle--konten tbody td[data-spalte="Aktion"] { padding-top: .55rem; }
  .tabelle--konten tbody td[data-spalte="Aktion"]::before { content: none; }
  /* Kursübersicht auf Schmal: Begriff über Wert statt nebeneinander —
     zwei Spalten drücken sonst die Werte in eine Handbreit Rest.
     (Hier stand bis medien-modell/03 die Höhenkopplung des
     Report-iframes; den Rahmen gibt es nicht mehr.) */
  .stand-meta { grid-template-columns: 1fr; gap: 0 0; }
  .stand-meta > dt { margin-top: .5rem; }
  .stand-meta > dt:first-child { margin-top: 0; }
  /* Ticket 02, gleicher Grund wie bei .stand-meta darueber: Begriff ueber
     Wert. Die beiden Raster des Karteikastens (Kapitelkopf, Technikliste)
     stehen sonst mit einer 9-10rem-Spalte in einer Handbreit Rest --
     Brigitte schaut den Stand auf dem Telefon nach (Story 16). */
  .kapitel-regeln,
  .technik-liste { grid-template-columns: 1fr; gap: 0 0; }
  .kapitel-regeln > dt,
  .technik-liste > dt { margin-top: .5rem; }
  .kapitel-regeln > dt:first-child,
  .technik-liste > dt:first-child { margin-top: 0; }
  /* Die Zahlenachse der Karten schrumpft mit -- sie soll auf dem Telefon
     nicht ein Zehntel der Textbreite fressen. */
  .folie-karte {
    grid-template-columns: 1.9rem 1fr auto;
    column-gap: var(--raum-2);
    padding: var(--raum-3) var(--raum-4);
  }
  /* Auf dem Telefon bleibt vom Feedback-Symbol die Marke -- das Wort
     daneben nähme dem Kartentitel die halbe Zeile. Der vollständige Name
     steht ohnehin im `aria-label`, das Bedienziel bleibt 44px. */
  .melde-wort { display: none; }
  .melden--wort { padding: 0 var(--raum-2); }
  .feedback-fix { right: .6rem; bottom: .6rem; }
}

/* Bis 360px muss alles hineinpassen — kein Horizontal-Scroll der Seite.
   Was breit ist (Tabellen, <pre>, iframe), scrollt in sich selbst; die
   Raster stehen ohnehin auf min(100%, …) und brechen auf eine Spalte. */
@media (max-width: 22.5rem) {
  /* --karte-innen wandert mit: die Kapsel in der Karte rückt sich über
     dasselbe Token aus (Abschnitt 6) und bleibt damit auch hier bündig. */
  :root { --rand: .75rem; --radius: 8px; --karte-innen: .9rem; }

  .abschnitt-kopf { gap: var(--raum-2); }
  .abschnitt-kopf > .abschnitt-nr { font-size: 1.5rem; }

  .karte { padding: var(--raum-3) var(--karte-innen); }
  ul.karte, ol.karte { padding-left: 1.9rem; }
  .aufklapp, details { padding: 0 .9rem; }
  .aufklapp > :not(summary), details > :not(summary) { padding-left: 1.2rem; }

  .marke { font-size: .98rem; }
  .anzeigename { max-width: 6.5rem; }

  .zeitleiste { --leiste-einzug: 1rem; }
  /* Ticket 02: bis 360px bleibt die Zahlenachse gerade noch als Achse
     erkennbar; darunter waere sie nur noch Einzug. Der Innenabstand der
     Karte folgt --karte-innen, das dieser Block ohnehin verengt. */
  .folie-karte { grid-template-columns: 1.6rem 1fr auto; }
  .panel-tab { margin-right: .9rem; }

  .feedback-fix {
    right: .4rem;
    bottom: .4rem;
  }
  .feedback-fix[open] {
    width: calc(100vw - .8rem);
  }
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body { background: #fff; color: #000; }
  /* Die klebenden Leisten stehen im Druck still — sonst reservieren sie
     auf jeder Seite Platz, den niemand braucht (Ticket 17; die Ortszeile
     der Prüffläche kam mit Ticket 03 dazu). */
  .kopf, .ortszeile { position: static; }
  .abmelden, .uebersicht, .feedback-fix, button, .knopf, .sprunglink {
    display: none;
  }
  main { padding: 0; max-width: none; }
  .karte, table, .tabelle { box-shadow: none; }
  .panelgruppe > .panel { display: block; }   /* im Druck alles zeigen */
  .aufklapp > :not(summary), details > :not(summary) { display: block; }
}


/* ---------- 14 Status- und Uebersichtsflaechen (Ticket 14) ------------
   Kursliste, Bestellliste, Meine To-dos und die Vorgangsseite. Der
   Abschnitt steht am Ende und ERGAENZT nur: er baut keine fremde Regel
   um, er setzt hinter sie. Was er braucht, kommt aus dem Bestand —
   Kartenrahmen (Abschnitt 6), Kapsel (Abschnitt 12), und vor allem die
   Werkzeug-Form der Prueffflaeche (Abschnitt 12, `.werkzeug`). Genau
   das ist der Punkt des Tickets: nicht ein zweites Formsystem fuer
   dieselbe Sache, sondern dasselbe auf den uebrigen Flaechen.

   Was hier NICHT steht: eine eigene Farbe, eine eigene Schrift, ein
   eigener Radius. Die Statusflaechen sollen sich nicht abheben, sie
   sollen dazugehoeren. */

/* Eine Gruppe von Wegen. Dieselbe Mechanik wie `.werkzeugleiste` der
   Prueffflaeche (Flexrow mit Umbruch), aber ohne deren grosse
   Aussenabstaende: dort ist die Leiste ein eigener Seitenabschnitt, hier
   steht sie meist IN einer Karte oder direkt unter einer Ueberschrift.
   Als <p> oder <ul> verwendbar — die Aufzaehlung braucht deshalb ihre
   eigene Grundeinstellung. */
.wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin: var(--raum-3) 0 0;
  padding-left: 0;
  list-style: none;
}
.karte > .wege:last-child, .wege:last-child { margin-bottom: 0; }

/* Die vier Symbole dieses Tickets. Jedes ist eine Kette aus drei
   Gliedern — Klassenname hier, Dateiname unter /statisch/symbole/,
   Aufruf im Makro `weg` (app/vorlagen/wege.html). Ein Pruefstein misst
   die Kette (test_statusflaechen, Abschnitt 5); wer ein fuenftes
   braucht, macht wieder alle drei. Warum Hintergrundbild und nicht
   <svg>/<img>: siehe .werkzeug-symbol weiter oben. */
.werkzeug-symbol--kurs      { background-image: url("symbole/kurs.svg"); }
.werkzeug-symbol--handlung  { background-image: url("symbole/handlung.svg"); }
.werkzeug-symbol--material  { background-image: url("symbole/material.svg"); }
.werkzeug-symbol--zurueck   { background-image: url("symbole/zurueck.svg"); }

/* Die Kursliste. Eine Karte je Kurs, darin die Kennung als Titel und
   genau ein Weg. Die Kennung ist eine MASCHINENADRESSE (kurs-2026-...)
   und wird deshalb in der Utility-Schrift gesetzt, nicht in der Serife
   der Kurstitel nebenan: sie soll gelesen und verglichen werden koennen,
   nicht wie eine Ueberschrift klingen. Umbruch an jeder Stelle, damit
   eine lange Kennung auf 320px nicht aus der Karte laeuft. */
.kursliste-titel {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  margin: 0;
  overflow-wrap: anywhere;
}

/* "Meine To-dos": die Punkte tragen jetzt Wege statt Textlinks. Die
   Trennlinie zwischen den Zeilen und das Zeilenpolster aus Abschnitt 6
   waren fuer Text gebaut — zwischen zwei Bedienfeldern mit eigener
   Kontur sind sie eine dritte Linie zuviel. Hier steht deshalb, was fuer
   die neue Fuellung gilt; die Regeln in Abschnitt 6 bleiben unangetastet
   (sie sind die Grundform der Aufzaehlung). */
.todo-punkte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--raum-2);
}
.todo-punkte > li { padding: 0; }
.todo-punkte > li + li { border-top: 0; }

/* Der Verlauf als Kapsel (Vorgangsseite). Die Ueberschrift steht im
   Summary und darf dort keine eigene Absatzmarge mitbringen — dieselbe
   Angabe, die Abschnitt 12 schon fuer h3/h4 macht, hier fuer das h2 des
   Verlaufs. Die Zeitleiste darin bringt ihren eigenen Abstand mit. */
.kapsel > summary h2 { margin: 0; }
.kapsel > .zeitleiste { margin-top: 0; }

/* Schmale Schirme: ein Weg nimmt die ganze Breite. Auf 390px stehen
   sonst zwei halbe Bedienfelder nebeneinander, und die Beschriftung —
   die auf dieser Fläche die ganze Bedeutung traegt — bricht mitten im
   Wort. Die Grundregel bleibt der Umbruch aus `.wege`; hier wird nur
   entschieden, dass jeder Weg eine eigene Zeile bekommt.
   Derselbe Haltepunkt wie Abschnitt 13 (45rem), damit die Flaeche an
   EINER Stelle kippt und nicht an zweien. */
@media (max-width: 45rem) {
  .wege > .werkzeug {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  /* Bei den To-do-Punkten liegt der Weg in einem <li> und ist damit KEIN
     Flex-Kind von `.wege` — eine `flex`-Angabe bliebe dort wirkungslos
     (im ersten Entwurf stand sie hier und tat nichts). Die volle Zeile
     entsteht deshalb am Weg selbst: Blockebene statt inline, plus die
     gestreckte Breite des Punkts. */
  .todo-punkte > li { align-self: stretch; }
  .todo-punkte > li > .werkzeug {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }


/* =====================================================================
   15  Die Bestellfläche — Muster-Nachzug der Bestell-Strecke
       (pruef-erlebnis/13, ADR-0033/-0034)

   Die Prüffläche hat das Muster gesetzt: klebende Ortszeile, Wege als
   Symbol mit Wort, Aktionen in der Kartenecke. Diese Strecke übernimmt
   es — sie baut es nicht nach. Deshalb steht hier auffällig WENIG: Die
   Ortszeile und das Werkzeug (beide Abschnitt 12) hängen an keiner
   Prüfflächen-Klasse und werden hier einfach benutzt. Neu ist nur, was
   diese Strecke wirklich zusätzlich hat.

   Alles unten hängt an `.bestellflaeche` oder trägt einen eigenen neuen
   Namen. Keine Regel einer anderen Fläche wird überschrieben.
   ===================================================================== */

/* Die Buchführung über das Klebende — dieselbe Zeile wie für die
   Prüffläche in Abschnitt 3, aus demselben Grund: Unter der Kopfleiste
   steht hier zusätzlich die Ortszeile, und das Polster der
   Ankersprünge (Abschnitt 2) muss beide kennen. Ohne diese Zeile
   landete jeder Sprung aus der Fehlerliste — „Kurstitel fehlt" →
   #feld-kurstitel — unter der Ortszeile, also genau auf dem Feld, das
   man sehen soll.
   Die Breite bleibt unberührt: `--breite-pruef` gilt für eine
   Vergleichsfläche, ein Formular liest sich schmal besser. */
body:has(.bestellflaeche) {
  --klebe-hoehe: calc(var(--kopf-hoehe) + var(--ort-hoehe));
}

/* Titel links, Weg rechts — die Kartenecke der Prüffläche, übertragen
   auf die Zusammenfassungskarten der Prüfseite. `align-items: start`
   hält das Werkzeug auf Höhe der ersten Titelzeile, auch wenn der
   Kurstitel zweizeilig wird; `flex-wrap` lässt es auf schmalen Schirmen
   unter den Titel rutschen, statt ihn zu quetschen. */
.karte-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: var(--raum-2) var(--raum-4);
  margin-bottom: var(--raum-4);
}
.karte-kopfzeile > :first-child { min-width: 0; margin-top: 0; }
.karte-kopfzeile > div > :first-child { margin-top: 0; }
.karte-kopfzeile > div > :last-child { margin-bottom: 0; }
/* Das Werkzeug behält Fläche, Kontur und Höhe aus Abschnitt 12 — die
   44px-Zusage aus Abschnitt 9 kennt auch in einer Karte keine Ausnahme.
   Hier steht nur, dass es nicht mitschrumpft. */
.karte-kopfzeile > .werkzeug { flex: 0 0 auto; }

/* Die Fehlerliste ist eine Liste von WEGEN (jede Zeile springt auf ihr
   Feld), also bekommt sie Bedienziele. Vorher war jede Zeile ein
   Textlink in Fließtexthöhe — auf einem Telefon eine Trefferfläche von
   knapp 20px, und das ausgerechnet an der Stelle, an der etwas
   schiefgegangen ist. Der Text bleibt Wort für Wort derselbe. */
.bestellflaeche .fehlerliste a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-right: var(--raum-2);
}

/* Die Auskunft der Dateiwahl (Verhaltensweise `dateiwahl`). Ohne Skript
   ist der Absatz LEER — `:empty` nimmt ihm dann auch seinen Platz, sonst
   klaffte im Notpfad eine Lücke unter dem Dateifeld, die niemand
   erklären könnte. Er versteckt nichts: leer heißt leer, nicht
   verborgen. */
.dateiwahl-stand {
  margin: var(--raum-2) 0 0;
  font-size: .9375rem;
  color: var(--gedeckt-text);
}
.dateiwahl-stand:empty { display: none; }
/* Der Fall, in dem etwas nicht passt: dieselbe Amber-Sprache wie
   `.meldung--warnung` und `.warnhinweis` — nicht Rot. Rot heißt in
   dieser Anwendung „abgewiesen"; hier ist noch nichts abgeschickt, und
   die Bestellerin rückt es in einem Griff gerade. */
.dateiwahl-stand--warnung {
  padding: var(--raum-2) var(--raum-3);
  color: var(--text);
  background: var(--amber-hauch);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-klein);
}

/* Die eigenen Symbole dieser Strecke. Sie stehen HIER und nicht bei den
   fünf der Prüffläche (Abschnitt 12), damit dieses Ticket keine Zeile in
   der Region eines anderen anfasst; die Regel selbst ist Wort für Wort
   dieselbe, und der Prüfstein, der die Kette Klasse → Regel → Datei
   misst, liest die ganze Datei. Wer ein Symbol hinzunimmt, macht alle
   drei Glieder — sonst zeigt es still ins Leere.
   Das vierte Symbol dieser Strecke — `material` für „Datei
   nachreichen" — steht NICHT hier: Ticket 14 hat denselben Namen,
   dieselbe Datei und dieselbe Regel schon gebaut (Abschnitt 14). Zwei
   gleichlautende Regeln wären die Einladung, später die falsche zu
   ändern; diese Strecke benutzt seine. */
.werkzeug-symbol--wegwahl      { background-image: url("symbole/wegwahl.svg"); }
.werkzeug-symbol--aendern      { background-image: url("symbole/aendern.svg"); }
.werkzeug-symbol--bestellungen { background-image: url("symbole/bestellungen.svg"); }

/* Schmalmaß dieser Datei ist 45rem (Abschnitt 13) — dieselbe Zahl hier,
   damit nicht zwei Umbruchpunkte nebeneinander gelten. */
@media (max-width: 45rem) {
  /* Der Weg soll auf einem Telefon nicht neben einem gekürzten Titel
     kleben — er nimmt die volle Breite der Karte und steht unter dem
     Titel, mit der Beschriftung links, wo das Auge sie sucht. */
  .karte-kopfzeile > .werkzeug { flex: 1 0 100%; }
}