/* =====================================================================================
   Vorlage 29 Fahrschule · Gestaltung
   Aufbau: Grundlagen · Kopf · Knöpfe · Lektionskopf · Lektion 1 Lenkrad · Lektion 2 Fahrstunde ·
           Lektion 3 Antwortkarten · Lektion 4 Weg und Paket · Lektion 5 Fahrlehrer und Kursplan ·
           Lektion 6 Anmeldung · Lektionsleiste · Fuß · Auftritte · schmale Bildschirme
   Bewegt werden nur transform, opacity, clip-path, stroke-dashoffset und offset-distance.
   ===================================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--leiste) + 12px); }
html[data-bewegung="mittel"], html[data-bewegung="dynamisch"] { scroll-behavior: smooth; }
body { margin: 0; padding-bottom: var(--leiste); background: var(--bg); color: var(--text); font-family: var(--schrift); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
svg { height: auto; }
h1, h2, h3, p, dl, dd, ul, ol, figure, blockquote, fieldset, legend, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
address { font-style: normal; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.behaelter { width: min(100% - 40px, var(--breite)); margin-inline: auto; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--radius-klein); background: var(--text); color: #fff; }
.sprung:focus { top: 12px; }
.mono { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.marke { font-size: 14px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.leise { color: var(--muted); }
.klein { font-size: 14px; }
h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.028em; font-weight: 750; text-wrap: balance; }
h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -.022em; font-weight: 720; text-wrap: balance; }
h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.01em; font-weight: 700; }

/* ---------- Kopf: ruhig, nicht klebend. Die Navigation ist die Leiste unten. ---------- */
.kopf { height: var(--kopf); border-bottom: 1px solid var(--border); background: var(--surface); }
.kopf-innen { height: 100%; display: flex; align-items: center; gap: 22px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 780; font-size: 21px; letter-spacing: -.02em; }
.logo-zeichen { width: 30px; height: 30px; color: var(--accent); }
.kopf-ort { font-size: 15px; color: var(--muted); }
.kopf-tel { margin-left: auto; color: var(--text); text-decoration: none; font-weight: 650; font-size: 16px; font-variant-numeric: tabular-nums; }

/* ---------- Knöpfe: eckig mit runder Kante, wie ein Schild ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 680; font-size: 17px; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s; }
.knopf:hover { background: var(--accent-tief); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: .55; cursor: default; }
.knopf-klein { min-height: 44px; padding: 0 18px; font-size: 15px; }
.knopf-leise { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--border); }
.knopf-leise:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ---------- Lektionskopf: große Nummer in Mono, Titel daneben ---------- */
.lektion { position: relative; padding: calc(var(--abstand) * .55) 0 var(--abstand); border-top: 1px solid var(--border); }
.lektion-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 44px; align-items: end; margin-bottom: 44px; }
.lektion-nr { line-height: 1; }
.lektion-nr b { display: block; font-size: clamp(64px, 9vw, 124px); line-height: .88; letter-spacing: -.05em; color: var(--accent); }
.lektion-nr span { display: block; margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lektion-titel { padding-bottom: 6px; }
.lektion-titel > * { max-width: 44rem; }
.lektion-titel .leise { margin-top: 14px; }

/* ---------- Lektion 1 · Das Lenkrad (js/lenkrad.js) ---------- */
.lektion-1 { border-top: 0; padding-top: 28px; min-height: calc(100vh - var(--kopf)); }
.lektion-1 .lektion-kopf { margin-bottom: 20px; }
.held { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; align-items: start; }
.held-text { padding-top: 24px; }
.einleitung { margin-top: 20px; font-size: 19px; max-width: 32rem; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.held-hinweis { margin-top: 26px; font-size: 15px; color: var(--muted); }
@media (hover: none) { .nur-maus { display: none; } }
@media (hover: hover) { .nur-finger { display: none; } }

.platz-rahmen { position: relative; aspect-ratio: 5 / 3; border-radius: var(--radius); overflow: hidden; background: var(--asphalt); box-shadow: 0 24px 60px rgba(15, 28, 46, .18); }
.platz-bild { width: 100%; height: 100%; }
.mass-text { font-family: var(--schrift); font-size: 15px; font-weight: 600; fill: #4a5260; }
.spur-live { transition: opacity .3s; }
.platz.geparkt .spur-live { opacity: 0; }
/* Das Fahrschulauto: eigene Ebene in Einheiten der Zeichnung, mit --k auf die Breite skaliert */
.auto-ebene { position: absolute; left: 0; top: 0; width: 1000px; height: 600px; transform-origin: 0 0; transform: scale(var(--k, .5)); pointer-events: none; }
.auto { position: absolute; left: 0; top: 0; width: 189px; height: 79px; transform-origin: 35px 39.5px;
  offset-path: path("M672 278 A163.4 163.4 0 0 0 548.9 334 A163.4 163.4 0 0 1 425.7 390"); offset-anchor: 35px 39.5px; offset-rotate: reverse; offset-distance: 0%; }
.auto.faehrt { transition: offset-distance var(--dauer, 2.4s) cubic-bezier(.45, 0, .55, 1); }
.auto.blendet { transition: opacity .25s; }
.auto svg { width: 189px; height: 79px; overflow: visible; }
.rad-v { transform-box: fill-box; transform-origin: center; }
.blinker-auto { visibility: hidden; }
.auto.blinkt .blinker-auto { visibility: visible; animation: blinken .7s steps(1) infinite; }
@keyframes blinken { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
html:not(.js) .auto-ebene, html:not(.js) .spur-live { display: none; }
html.js .auto-statisch { display: none; }

.lenk-pult { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 26px; align-items: center; margin-top: 22px; }
.lenkrad { width: 172px; height: 172px; border-radius: 50%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.lenkrad:active { cursor: grabbing; }
.lenkrad-bild { width: 100%; height: 100%; will-change: transform; }
.lenk-satz { font-size: 16px; min-height: 3.2em; color: var(--text); }
.lenk-werte { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 12px; }
.lenk-werte dt { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.lenk-werte dd { font-size: 19px; color: var(--text); }
.lenk-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ---------- Lektion 2 · Die erste Fahrstunde (js/fahrstunde.js) ----------
   Grundzustand (ohne JavaScript, starr, schmal): Bühne als Bild im Format 16 : 9, darunter die fünf Schritte.
   Mit html.fahrstunde-an: Bühne klebt über die volle Fensterhöhe, die Schritte stapeln sich unten links. */
.lektion-2 { background: var(--nacht); color: var(--nacht-text); border-top: 0; }
.lektion-2 .lektion-nr b { color: #8fb5e8; }
.lektion-2 .lektion-nr span, .lektion-2 .leise { color: var(--nacht-leise); }
.fs-buehne { position: relative; width: min(100% - 40px, var(--breite)); margin: 0 auto 28px; aspect-ratio: 16 / 9; max-height: 640px; border-radius: var(--radius); overflow: hidden; background: #cfe2f1; }
.fs-szene { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs-schrift { font-family: var(--schrift); font-weight: 700; font-size: 22px; letter-spacing: .1em; fill: #fff; }
.fs-tafel { font-family: var(--schrift); font-weight: 700; font-size: 28px; fill: #0f1c2e; }
.fs-tafel-klein { font-size: 17px; font-weight: 600; }
.fs-p { font-family: var(--schrift); font-weight: 800; font-size: 56px; fill: #fff; }
.fs-striche, .fs-ort { transform-origin: 600px 330px; will-change: transform, opacity; }
.fs-ort { display: none; }
html.fahrstunde-an .fs-ort { display: block; opacity: 0; }
html:not(.fahrstunde-an) #fs-ort-3 { display: block; }
#fs-parkauto, #fs-auto-rechts { transform-box: fill-box; transform-origin: center; }

.fs-blicke { position: absolute; left: 50%; top: 15%; transform: translateX(-50%); display: flex; gap: clamp(20px, 5vw, 60px); color: var(--gelb); pointer-events: none; }
.fs-blick { display: grid; justify-items: center; gap: 6px; padding: 10px 16px 9px; border-radius: 16px; background: rgba(15, 28, 46, .84); opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
.fs-blick svg { width: clamp(56px, 7vw, 90px); height: auto; }
.fs-blick b { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.fs-blick.an, html:not(.fahrstunde-an) .fs-blick { opacity: 1; transform: none; }

.fs-rahmen { position: absolute; inset: 0; pointer-events: none; }
.fs-rahmen::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7%; background: #141c28; }
.fs-saeulen { position: absolute; inset: 0; width: 100%; height: 100%; }

.spiegel { position: absolute; border-radius: 10px; overflow: hidden; background: #1b2432; box-shadow: 0 0 0 3px #0e1520, 0 8px 24px rgba(0, 0, 0, .45); transition: box-shadow .4s; }
.spiegel svg { width: 100%; height: auto; }
.spiegel.leuchtet { box-shadow: 0 0 0 4px var(--gelb), 0 0 0 11px rgba(247, 198, 0, .28), 0 8px 24px rgba(0, 0, 0, .45); }
.spiegel-innen { left: 50%; top: 6%; width: clamp(150px, 20vw, 240px); transform: translateX(-50%); }
.spiegel-aussen { top: 33%; width: clamp(110px, 12vw, 160px); }
.spiegel-l { left: 1.6%; }
.spiegel-r { right: 1.6%; }
#sp-innen-bild, #sp-l-bild, #sp-r-bild, #sp-innen-auto, #sp-r-auto { will-change: transform; }
#sp-innen-auto { transform-box: fill-box; transform-origin: center; }
#sp-r-auto { transform-box: fill-box; transform-origin: 50% 100%; }
html:not(.fahrstunde-an) #sp-r-auto { display: none; }

.fs-armaturen { position: absolute; left: 0; right: 0; bottom: 0; height: 27%; min-height: 160px; background: #1b2432; box-shadow: 0 -2px 0 #2c3747, 0 -14px 30px rgba(0, 0, 0, .35); }
.fs-lenkrad { position: absolute; left: 50%; bottom: 10%; width: clamp(320px, 64%, 600px); transform: translateX(-50%); }
.fs-lenkrad svg { width: 100%; height: auto; overflow: visible; }
.fs-kranz { transform-origin: 220px 236px; will-change: transform; }
/* Kombi-Instrument: Haube über dem Lenkrad mit Blinkern, Tacho und Gang */
.cluster { position: absolute; left: 50%; bottom: 46%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 10px 20px 4px; border-radius: 18px 18px 0 0; background: #141c28; box-shadow: 0 -2px 0 #2c3747; }
.tacho { width: clamp(100px, 13vh, 130px); display: grid; justify-items: center; }
.tacho-bild { width: 100%; height: auto; }
.tacho-zahlen text { font-family: var(--mono); font-weight: 400; font-size: 14px; fill: #c8d4e4; }
.tacho-nadel { transform-origin: 100px 110px; will-change: transform; }
.tacho-zahl { margin-top: -14px; display: flex; align-items: baseline; gap: 5px; color: #fff; }
.tacho-zahl b { font-size: 22px; }
.tacho-zahl span { font-size: 11px; color: #c8d4e4; }
.blinker { width: 30px; color: #3d4a5c; }
.blinker svg { width: 100%; height: auto; }
.blinker.an { color: var(--gelb); animation: blinken .8s steps(1) infinite; }
.fs-gang { display: grid; justify-items: center; min-width: 36px; color: #fff; }
.fs-gang b { font-size: 22px; line-height: 1; }
.fs-gang span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8fa6c4; }

.fs-schritte { width: min(100% - 40px, var(--breite)); margin: 0 auto; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fs-karte { background: #fff; color: var(--text); border-radius: var(--radius); padding: 22px 24px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.fs-nr { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fs-nr b { font-size: 26px; color: var(--accent); letter-spacing: 0; }
.fs-karte h3 { margin-bottom: 10px; }
.fs-karte p { font-size: 16px; }
.fs-fach { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--gelb); background: #fff8dc; font-size: 15px; }
.fs-karte .knopf { margin-top: 14px; }

html.fahrstunde-an .fs-fahrt { position: relative; height: calc(var(--fs-schritte, 5) * 100vh); }
html.fahrstunde-an .fs-kleber { position: sticky; top: 0; height: 100vh; overflow: hidden; }
html.fahrstunde-an .fs-buehne { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; margin: 0; border-radius: 0; }
html.fahrstunde-an .fs-schritte { position: absolute; z-index: 3; left: max(20px, calc((100% - var(--breite)) / 2)); right: 20px; bottom: calc(var(--leiste) + 18px); width: auto; height: 0; display: block; margin: 0; pointer-events: none; }
html.fahrstunde-an .fs-schritt { position: absolute; left: 0; bottom: 0; width: min(440px, 100%); opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .35s; }
html.fahrstunde-an .fs-schritt.ist-da { opacity: 1; transform: none; pointer-events: auto; }
@supports (height: 100svh) {
  html.fahrstunde-an .fs-fahrt { height: calc(var(--fs-schritte, 5) * 100svh); }
  html.fahrstunde-an .fs-kleber { height: 100svh; }
}

/* ---------- Lektion 3 · Antwortkarten (reines HTML und CSS) ---------- */
.lektion-3 { background: var(--surface-2); }
.antworten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.frage { font-size: 22px; font-weight: 700; margin-bottom: 18px; }
.antwort { position: relative; display: block; cursor: pointer; }
.antwort input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.antwort-innen { display: flex; gap: 14px; align-items: flex-start; min-height: 118px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 2px solid var(--border); transition: border-color .25s, box-shadow .25s, transform .25s; }
.antwort:hover .antwort-innen { border-color: #9fb3cf; }
.buchstabe { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--text); display: grid; place-items: center; font-size: 18px; line-height: 1; transition: background .25s, color .25s, border-color .25s; }
.antwort-text strong { display: block; font-size: 18px; line-height: 1.25; }
.antwort-text span { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); }
.antwort input:checked + .antwort-innen { border-color: var(--accent); box-shadow: 0 12px 32px rgba(14, 79, 159, .14); transform: translateY(-2px); }
.antwort input:checked + .antwort-innen .buchstabe { background: var(--accent); border-color: var(--accent); color: #fff; }
.antwort input:focus-visible + .antwort-innen { outline: 3px solid var(--accent); outline-offset: 3px; }
.klasse-info { display: grid; gap: 18px; padding: 28px 32px; border-radius: var(--radius-gross); background: var(--surface); }
.klasse-info h3 { color: var(--accent); }
.klasse-info > p { max-width: 50rem; }
.klasse-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 28px; }
.klasse-werte dt { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.klasse-werte dd { font-size: 17px; line-height: 1.4; }
.klasse-werte dd.mono { font-size: 24px; }
.klasse-info + .klasse-info { margin-top: 16px; }
@supports selector(:has(a)) {
  .klasse-info { display: none; }
  .klassen:has(#kl-b:checked) .klasse-info[data-klasse="b"],
  .klassen:has(#kl-l17:checked) .klasse-info[data-klasse="l17"],
  .klassen:has(#kl-a:checked) .klasse-info[data-klasse="a"],
  .klassen:has(#kl-am:checked) .klasse-info[data-klasse="am"] { display: grid; }
}

/* ---------- Lektion 4 · Der Weg und das Paket ---------- */
.weg-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.halt { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; padding-bottom: 40px; }
.halt:last-child { padding-bottom: 0; }
.halt-strich { position: absolute; left: 23px; top: 56px; width: 10px; height: calc(100% - 56px); overflow: visible; }
.halt:last-child .halt-strich { display: none; }
.halt-strich line { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; transition: stroke-dashoffset .6s ease-out; }
html.js[data-bewegung="mittel"] .halt:not(.ist-da) .halt-strich line, html.js[data-bewegung="dynamisch"] .halt:not(.ist-da) .halt-strich line { stroke-dashoffset: 100; }
.halt-nr { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 22px; line-height: 1; }
.halt h3 { padding-top: 12px; margin-bottom: 8px; }
.halt-dauer { margin-top: 10px; font-size: 14px; font-weight: 400; color: var(--muted); }
.paket { position: sticky; top: 24px; padding: 30px 32px; border-radius: var(--radius-gross); background: var(--text); color: #fff; }
.paket .marke { color: #8fb5e8; }
.paket-preis b { display: block; font-size: clamp(40px, 4vw, 56px); line-height: 1; letter-spacing: -.03em; }
.paket-preis span { display: block; margin-top: 8px; font-size: 16px; font-weight: 400; color: var(--nacht-leise); }
.preis-liste { margin-top: 22px; }
.preis-liste div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 16px; }
.preis-liste dd { flex: none; }
.paket .leise { margin-top: 16px; color: var(--nacht-leise); }
.paket .knopf { margin-top: 20px; background: #fff; color: var(--text); }
.paket .knopf:hover { background: var(--accent-hell); }

/* ---------- Lektion 5 · Fahrlehrer und Kursplan ---------- */
.lehrer-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 56px; }
.lehrer { padding: 26px; border-radius: var(--radius-gross); background: var(--surface); border: 1px solid var(--border); }
.lehrer h3 { margin-top: 18px; }
.lehrer-rolle { margin: 4px 0 12px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.lehrer p:last-child { font-size: 16px; color: var(--muted); }
.bild-platzhalter { position: relative; aspect-ratio: var(--format, 3 / 2); overflow: hidden; border-radius: var(--radius); background: repeating-linear-gradient(135deg, #e3e8ef 0 10px, #eef2f7 10px 20px); display: flex; align-items: flex-end; }
.bild-platzhalter figcaption { margin: 14px; padding: 8px 12px; border-radius: var(--radius-klein); max-width: calc(100% - 28px); background: rgba(255, 255, 255, .94); color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.35; }
.bild-portrait { width: 152px; border-radius: 50%; }
.bild-portrait figcaption { position: absolute; inset: 0; margin: 0; max-width: none; display: grid; place-items: center; padding: 26px; text-align: center; background: none; font-size: 12px; }
.kursplan-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.kursplan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 20px 0 36px; }
.tag { min-height: 124px; padding: 14px 13px; border-radius: var(--radius-klein); background: var(--surface); border: 1px solid var(--border); }
.tag b { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tag .kurs { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.tag .kurs .mono { display: block; margin-bottom: 4px; font-size: 14px; color: var(--accent); }
.tag .frei { display: block; font-size: 15px; color: var(--muted); }
.tag.heute { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tag.heute b { color: var(--accent); }
.tag.heute b::after { content: " · heute"; letter-spacing: 0; text-transform: none; }
.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.zahlen b { display: block; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--text); }
.zahlen span { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); }

/* ---------- Lektion 6 · Anmeldung, Fragen, Kontakt ---------- */
.lektion-6 { background: var(--nacht); color: var(--nacht-text); border-top: 0; }
.lektion-6 .lektion-nr b { color: #8fb5e8; }
.lektion-6 .lektion-nr span, .lektion-6 .leise { color: var(--nacht-leise); }
.lektion-6 a { color: #9fc4f0; }
.anmeldung-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; }
.formular { padding: 28px; border-radius: var(--radius-gross); background: #fff; color: var(--text); }
.formular .leise { color: var(--muted); }
.feld { margin-bottom: 16px; }
.feld label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; letter-spacing: .03em; }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-klein); background: #fff; color: var(--text); font: inherit; }
.feld textarea { resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--accent); }
.formular .knopf { width: 100%; margin-top: 4px; }
.formular-meldung { margin-top: 12px; min-height: 1.5em; font-weight: 600; }
.kontakt { display: grid; gap: 30px; align-content: start; }
.schild { width: 96px; }
.kontakt h3 { margin-bottom: 12px; }
.kontakt address { font-size: 18px; line-height: 1.6; }
.kontakt .leise { margin-top: 12px; }
.fragen-liste details { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.fragen-liste details:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.fragen-liste summary { display: flex; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font-weight: 600; }
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after { content: "+"; flex: none; font-family: var(--mono); font-size: 22px; line-height: 1; color: #9fc4f0; transition: transform .25s; }
.fragen-liste details[open] summary::after { transform: rotate(45deg); }
.fragen-liste details p { margin-top: 10px; font-size: 16px; color: var(--nacht-leise); }

/* ---------- Lektionsleiste unten: sechs Fortschrittspunkte wie am Prüfungsbogen ---------- */
.lehrgang { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--leiste); display: flex; align-items: center; background: rgba(15, 28, 46, .96); color: #c8d4e4; }
.lehrgang-balken { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255, 255, 255, .12); }
.lehrgang-balken i { display: block; height: 100%; width: 100%; background: var(--gelb); transform-origin: 0 50%; transform: scaleX(0); }
.lehrgang-punkte { flex: 1; display: flex; justify-content: center; gap: clamp(4px, 1.8vw, 24px); }
.lehrgang-punkte a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 10px; color: #c8d4e4; text-decoration: none; font-size: 14px; }
.lehrgang-punkte a:focus-visible { outline-color: #fff; outline-offset: -4px; }
.lehrgang-punkte .punkt { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #8fa6c4; transition: background .3s, border-color .3s, transform .3s; }
.lehrgang-punkte a:hover .punkt { border-color: #fff; }
.lehrgang-punkte a[aria-current="true"] { color: #fff; }
.lehrgang-punkte a[aria-current="true"] .punkt { background: #fff; border-color: #fff; transform: scale(1.15); }
.lehrgang-punkte b { font-size: 13px; font-weight: 400; }
.lehrgang-tel { display: none; }

/* ---------- Fuß ---------- */
.fuss { padding-top: 44px; border-top: 1px solid var(--border); background: var(--bg); color: var(--muted); font-size: 15px; }
.fuss-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.fuss-logo { font-size: 20px; font-weight: 750; color: var(--text); }
.fuss a { color: var(--accent); }
.fuss-links a { margin-right: 14px; }
.fuss-demo { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 14px; }
.fuss-zeile { width: 100%; max-width: none; margin: 0; padding: 22px 20px 26px; text-align: center; font-size: 13px; color: #5b6b80; }
.fuss-zeile a { color: #4a5a6e; }

/* ---------- Auftritte beim Hereinscrollen (js/main.js setzt .ist-da). Je Abschnitt eine Idee. ---------- */
html.js[data-bewegung="mittel"] [data-auftritt], html.js[data-bewegung="dynamisch"] [data-auftritt] { opacity: 0; transform: translateY(22px); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .2, 1); }
html.js[data-bewegung="mittel"] [data-auftritt="wischen"], html.js[data-bewegung="dynamisch"] [data-auftritt="wischen"] { transform: none; clip-path: inset(0 100% 0 0); transition: clip-path .6s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
html.js[data-bewegung="mittel"] [data-auftritt="kippen"], html.js[data-bewegung="dynamisch"] [data-auftritt="kippen"] { transform: perspective(900px) rotateX(-16deg) translateY(18px); transform-origin: 50% 100%; }
html.js[data-bewegung="mittel"] [data-auftritt="klappen"], html.js[data-bewegung="dynamisch"] [data-auftritt="klappen"] { transform: none; clip-path: inset(0 0 100% 0); transition: clip-path .5s ease-out, opacity .3s; }
html.js[data-bewegung="mittel"] [data-auftritt="schild"], html.js[data-bewegung="dynamisch"] [data-auftritt="schild"] { transform: scale(.6) rotate(-8deg); transition: opacity .4s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
html.js[data-bewegung="mittel"] [data-auftritt="strich"], html.js[data-bewegung="dynamisch"] [data-auftritt="strich"] { opacity: 1; transform: none; transition: none; }
html.js [data-auftritt].ist-da { opacity: 1 !important; transform: none !important; clip-path: inset(0) !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  html.js [data-auftritt] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .halt-strich line { stroke-dashoffset: 0 !important; transition: none !important; }
  .blinker.an, .auto.blinkt .blinker-auto { animation: none; opacity: 1; }
}

/* ---------- schmale Bildschirme ---------- */
@media (max-height: 800px) and (min-width: 761px) {
  .lektion-1 { padding-top: 14px; }
  .lektion-1 .lektion-nr b { font-size: clamp(48px, 7vw, 84px); }
  .lektion-1 .lektion-kopf { margin-bottom: 8px; }
  .held-text { padding-top: 0; }
}
@media (max-width: 1080px) {
  .lehrgang-punkte span { display: none; }
  html.fahrstunde-an .fs-schritt { width: min(370px, 100%); }
  html.fahrstunde-an .fs-karte p { font-size: 15px; }
  .cluster { left: 66%; }
  .held { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .held-text { padding-top: 0; }
  .weg-raster, .anmeldung-raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .paket { position: static; }
  .lehrer-raster { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .antworten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kursplan { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .lektion { padding: 44px 0 64px; }
  .lektion-kopf { grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 28px; }
  .lektion-nr b { font-size: 64px; }
  .kopf-ort, .kopf-tel { display: none; }
  .kopf .knopf-klein { margin-left: auto; }
  .lenk-pult { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .lenk-werte { justify-content: center; }
  .lenk-knoepfe { justify-content: center; }
  .lenk-knoepfe .knopf { flex: 1 1 auto; }
  .fs-buehne { aspect-ratio: 4 / 3; }
  .spiegel-aussen { display: none; }
  .spiegel-innen { width: 110px; }
  .fs-blicke { top: 24%; gap: 12px; }
  .fs-blick { padding: 8px 10px 6px; border-radius: 10px; }
  .fs-blick svg { width: 44px; }
  .fs-blick b { display: none; }
  .fs-armaturen { height: 30%; min-height: 110px; }
  .fs-lenkrad { width: 100%; bottom: 0; }
  .cluster { bottom: 36%; gap: 10px; padding: 8px 12px 2px; }
  .cluster .blinker, .cluster .fs-gang { display: none; }
  .tacho { width: 76px; }
  .tacho-zahl b { font-size: 18px; }
  .antworten { grid-template-columns: minmax(0, 1fr); }
  .antwort-innen { min-height: 0; }
  .klasse-info { padding: 22px 20px; }
  .halt { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
  .halt-nr { width: 44px; height: 44px; font-size: 18px; }
  .halt-strich { left: 17px; top: 44px; height: calc(100% - 44px); }
  .halt h3 { padding-top: 6px; }
  .paket { padding: 24px 22px; }
  .kursplan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tag { min-height: 0; }
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formular { padding: 22px 20px; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr); }
  .lehrgang-punkte span { display: none; }
  .lehrgang-punkte a { padding: 0 6px; gap: 6px; }
  .lehrgang-tel { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; margin-right: 6px; color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; }
}
@media (max-width: 420px) {
  .lehrgang-punkte b { display: none; }
  .lehrgang-punkte a { padding: 0 8px; }
}