/* _kurs.css — gemeinsame Regeln aller Seiten des KI-Führerscheins.
   Seitenübergreifendes, das nur den Kurs betrifft und nicht die ganze Website. */

/* Nur für Screenreader */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

main:focus { outline: none; }

/* L20: Hover des Hauptknopfs. _base.css hellt auf --red-h auf, weiße Schrift
   steht darauf nur bei 3,82:1. Im Kurs sind die Knöpfe .9rem normal fett,
   also Fließtextgröße, deshalb dunkelt der Hover hier ab: --primary-h mit
   weißer Schrift 6,62:1 (GL-003 §2a). Header und Footer sind nicht betroffen. */
.btn-primary:hover { background: var(--primary-h); }

/* Punkt 8: 44 px Trefferhöhe im Kurs (GL-003 §4c). Die Knöpfe aus _base.css
   liegen mit 13 px Polster schon darüber, knapp wird es bei Seiten, die das
   Polster inline verkleinern (Weiter-Banner der Startseite: 10 px, .85rem).
   Auswahllisten liegen mit 8 px Polster bei rund 38 px. Nur innerhalb von
   <main>, Header und Footer bleiben unberührt. */
main .btn-primary, main .btn-outline { min-height: 44px; }
main select { min-height: 44px; }

/* L19: Schließknopf der Top-Bar, von literacy-tracker.js eingefügt.
   24 px sichtbar, die farblose Fläche holt die Trefferhöhe auf 44 px
   (GL-003 §4c). Oben schneidet der Fensterrand die Fläche ab, deshalb reicht
   sie nach unten 16 px über den Knopf hinaus (17 px Versatz mit Rahmen),
   bis in den leeren oberen Rand des Headers.
   z-index 101 liegt über dem Sticky-Header (100), sonst fängt er die Berührung. */
.top-bar { position: relative; }
.top-bar.mit-zu { padding-left: 48px; padding-right: 48px; }
.top-bar-zu {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 4px;
  font: inherit; font-size: .95rem; line-height: 1; cursor: pointer; padding: 0; z-index: 101;
}
.top-bar-zu::after { content: ""; position: absolute; left: -1px; right: -1px; top: -11px; bottom: -17px; }
.top-bar-zu:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.top-bar-zu:focus-visible { outline-color: #fff; }

/* Code-Kasten auf der Startseite (showCodeBadge in literacy-tracker.js) */
.lit-code { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lit-code-label { font-size: .78rem; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.lit-code-wert { font-family: 'DM Mono', monospace; font-size: 1.2rem; font-weight: 700; color: var(--text); letter-spacing: .05em; background: var(--surface); padding: 4px 12px; border: 1px dashed var(--border-control); border-radius: 4px; user-select: all; transition: background .2s, border-color .2s; }
.lit-code-wert.wartet { font-family: inherit; font-size: .9rem; font-weight: 500; color: var(--text2); letter-spacing: normal; user-select: auto; }
.lit-code-wert.kopiert { background: var(--green-bg); border-color: var(--green); }
.lit-code-hinweis { font-size: .8rem; color: var(--text2); line-height: 1.5; flex: 1 1 260px; }
/* Punkt 10: Rückmeldung zum Kopieren im Fluss, nur unter 768 px (toast() im Tracker) */
.lit-code-meldung { flex: 1 1 100%; margin: 0; font-size: .85rem; font-weight: 600; color: var(--text); }
.lit-knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 36px;
  padding: 6px 14px; border: 1px solid var(--border-control); border-radius: 6px; background: var(--surface);
  color: var(--text); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.lit-knopf::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
.lit-knopf:hover { border-color: var(--text2); }
.lit-knopf:disabled { border-color: var(--border); color: var(--text2); cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .lit-code-wert { transition: none; }
}

/* Grafiken, GL-003 §5h */
.stufe-bild { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 0 20px; border-radius: 10px; }
.erklaer-grafik { margin: 8px 0 28px; }
/* Die Erklärgrafiken haben seit 24.09.2026 eine viewBox von 360 Breite (Charta,
   Fassung für Mobil). 440 px halten die Beschriftung bei rund 16 px und die
   Überschriften bei rund 20 px. Die Schwimmbahn begrenzt sich im Skript selbst
   (grafik/schwimmbahn.js). */
.erklaer-grafik img { display: block; width: 100%; max-width: 440px; height: auto; }
.schwimmbahn-rahmen { margin: 0 0 24px; }
.gami-bild { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 0 12px; border-radius: 8px; }

/* Befund 3 (R3): Links im Fließtext ohne eigene Klasse standen im Browser-Blau
   und -Violett, also mit einer zweiten Akzentfarbe (GL-003 §5b). Jetzt
   --primary, auf --bg2 4,86:1, auf --surface 5,44:1. Die Unterstreichung
   bleibt, weil Rot gegen --text2 unter 3:1 liegt und die Farbe allein den
   Link nicht kenntlich machen darf (WCAG 1.4.1). :where(main) hält die
   Spezifität bei einem Element plus Klasse, damit jede Regel einer Seite
   (.modul-hinweis a, Brotkrumen mit Inline-Farbe) weiter vorgeht. */
:where(main) a:not([class]) { color: var(--primary); text-underline-offset: .15em; }
:where(main) a:not([class]):hover { color: var(--primary-h); }

/* Endbenotung Lena (R3). Fokusziele verschwinden sonst unter dem klebenden
   Header (WCAG 2.2, 2.4.11). */
.question-text, #results, #check-results { scroll-margin-top: 80px; }
/* 44-px-Trefferflächen (GL-003 §4c). Einzeln stehende Textlinks bekommen
   unsichtbares Polster, das die Zeilenhöhe nicht verändert. */
.compliance-card > a, .lizenz-links a, nav[aria-label="Brotkrumen"] a {
  display: inline-block; padding: 14px 0; margin: -14px 0;
}
main summary, .nav-btn, .btn-send, .btn-clear, .pf-btn { min-height: 44px; box-sizing: border-box; }
.btn-send, .btn-clear { display: inline-flex; align-items: center; justify-content: center; }

/* Code-Eingabe für den Gerätewechsel, auf Startseite und Lernpfad (25.09.2026) */
.code-eingabe { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 0 20px; margin-bottom: 20px; }
.code-eingabe summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--text); padding: 12px 0; min-height: 44px; }
.code-eingabe[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.code-eingabe label { display: block; font-size: .85rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.code-zeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.code-zeile input { flex: 1; min-width: 200px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-control); border-radius: 6px; background: var(--surface); color: var(--text); font-family: 'DM Mono', monospace; font-size: .95rem; text-transform: uppercase; }
.code-zeile input:hover { border-color: var(--text2); }
.code-zeile .btn-outline { padding: 10px 18px; font-size: .85rem; }
.code-hinweis { font-size: .82rem; color: var(--text2); line-height: 1.55; margin: 10px 0 0; }
.code-status { font-size: .88rem; color: var(--text); line-height: 1.55; margin: 0 0 14px; }
.code-status:empty { display: none; }
.code-status.ok, .code-status.fehler { margin-top: 12px; padding: 8px 12px; border-radius: 0 6px 6px 0; }
.code-status.ok { background: var(--green-bg); border-left: 3px solid var(--green); }
.code-status.fehler { background: #fdf5f5; border-left: 3px solid var(--primary); }
.code-status a { color: var(--red); font-weight: 600; }

/* Paket 3 (25.09.2026): Rückweg und Brotkrumen am Seitenanfang, auf allen
   Kursseiten gleich gebaut. Die Kopfzeile ist website-weit festgelegt
   (tools/validate.py, CANONICAL_HEADER), deshalb steht der Lernpfad hier über
   den Brotkrumen und nicht im Hauptmenü. Beide Zeilen sind 44 px hoch
   (GL-003 §4c), die Trefferfläche ist also die sichtbare Zeile selbst.
   .kurs-pfad .brotkrumen a schlägt die ältere Regel für
   nav[aria-label="Brotkrumen"] a weiter oben, die für die Seiten ohne
   .kurs-pfad stehen bleibt. */
.kurs-pfad { max-width: 800px; margin: 16px auto 0; padding: 0 32px; }
.kurs-pfad.schmal { max-width: 720px; }
.kurs-pfad-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; font-weight: 700; color: var(--text); text-decoration: none; }
.kurs-pfad-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: .15em; }
/* _base.css blendet unter 768 px jedes nav aus (gedacht fürs Hauptmenü) und gibt
   nav a Polster und eine Linie. Die Kursnavigation setzt beides ausdrücklich zurück. */
.kurs-pfad .brotkrumen, nav.modul-sprung { order: 0; flex-basis: auto; width: auto; padding: 0; }
.kurs-pfad .brotkrumen { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; background: none; font-size: .78rem; color: var(--text3); line-height: 1.4; }
.kurs-pfad .brotkrumen a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; border: 0; font-size: inherit; font-weight: 400; color: var(--text3); text-decoration: none; }
.kurs-pfad .brotkrumen a:hover { color: var(--text); text-decoration: underline; }
.kurs-pfad .brotkrumen [aria-current="page"] { color: var(--text2); font-weight: 600; }
@media (max-width: 768px) { .kurs-pfad { padding: 0 16px; } }
@media print { .kurs-pfad { display: none !important; } }

/* Kasten „So wird Ihr Stand gespeichert“ (Wortlaut nach Begriffsblatt).
   Steht auf Lernpfad und Startseite mit derselben Klasse. */
.speicher-kasten { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; margin: 0 0 16px; max-width: 72ch; }
.speicher-kasten h2 { font-family: inherit; font-size: .9rem; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.speicher-kasten p { font-size: .85rem; color: var(--text2); line-height: 1.6; margin: 0; }

/* Einzeln stehender Textlink mit 44 px Trefferhöhe */
.kurs-textlink { display: inline-flex; align-items: center; min-height: 44px; font-size: .88rem; font-weight: 600; color: var(--text2); text-decoration: underline; text-underline-offset: .15em; }
.kurs-textlink:hover { color: var(--text); }

/* _modul.js: Abschnittsliste und Lesefortschritt unter dem Modulkopf.
   Der Balken hat keine Übergangsanimation, er folgt nur dem Scrollen.
   Er wiederholt eine sichtbare Lage und ist deshalb aria-hidden. */
.modul-sprung { display: block; margin: -16px 0 24px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.modul-sprung summary { display: flex; align-items: center; min-height: 44px; padding: 0 16px; cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--text); }
.modul-sprung ul { list-style: none; margin: 0; padding: 0 16px 8px; border-top: 1px solid var(--border); }
.modul-sprung li { margin: 0; }
.modul-sprung a { display: flex; align-items: center; min-height: 44px; padding: 0; border: 0; font-size: .88rem; font-weight: 400; line-height: 1.35; color: var(--text2); text-decoration: none; }
.modul-sprung a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: .15em; }
.modul-lesefortschritt { position: sticky; top: 67px; z-index: 90; height: 4px; margin: 0 0 32px; background: var(--border); }
.modul-lesefortschritt span { display: block; height: 100%; background: var(--primary); transform-origin: 0 50%; transform: scaleX(0); }
.module-page h2[id] { scroll-margin-top: 88px; }
.module-meta .modul-stand-fertig { color: var(--green); font-weight: 600; }
@media print { .modul-sprung, .modul-lesefortschritt { display: none !important; } }

/* Kasten „Kurz und einfach“ (11.10.2026): die Kernaussage jedes Bronze-Moduls
   in Einfacher Sprache, aufgeklappt per <details>, direkt unter den Lernzielen.
   Rahmen und Fläche wie .modul-sprung, damit er als Bedienelement erkennbar
   ist und nicht mit dem grünen Merksatz verwechselt wird. Das Dreieck des
   Browsers bleibt stehen (display:list-item), es zeigt den Zustand an.
   --text auf --surface 17,57:1, Hover --primary 5,44:1, die Kante in --text2
   ist Dekoration (GL-003 §2a). */
.kurz-einfach { margin: -24px 0 48px; border: 1px solid var(--border); border-left: 4px solid var(--text2); border-radius: 0 8px 8px 0; background: var(--surface); }
.kurz-einfach summary { min-height: 44px; padding: 12px 16px; cursor: pointer; font-size: .92rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.kurz-einfach summary:hover { color: var(--primary); }
.kurz-einfach[open] summary { border-bottom: 1px solid var(--border); }
.kurz-einfach p { margin: 0; padding: 14px 18px 18px; max-width: 65ch; font-size: 1rem; line-height: 1.75; color: var(--text); }

/* Hinweis auf das Glossar unter der Abschnittsliste (_modul.js, 11.10.2026) */
.modul-glossar { margin: -12px 0 24px; font-size: .85rem; color: var(--text2); }
.modul-glossar a { display: inline-flex; align-items: center; min-height: 44px; }