@font-face { font-family: 'Mona Sans'; src: url(fonts/mona-sans.woff2) format('woff2'); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }

/* Amber nur für das, was arbeitet oder belegt: Scanner, Playhead, Beweis-Zahlen, der eine Knopf, Ton an, Fokus. */
:root { --grund: #07080a; --tinte: #ecebe7; --mittel: rgba(236, 235, 231, 0.82); --leise: #96938e; --amber: #ffad33; --linie: rgba(236, 235, 231, 0.14); --rand: max(20px, 5vw); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--grund); color: var(--tinte); font: 400 18px/1.55 'Mona Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { background: var(--grund); }
/* clip, nie hidden: hidden macht die Seite zur Scroll-Box und sticky klebt nicht mehr */
body, main { overflow-x: clip; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

#welt { position: fixed; inset: 0; width: 100%; height: 100lvh; display: block; opacity: 0; transition: opacity 0.9s ease; }
.bereit #welt { opacity: 1; }
.aus #welt, .aus .ton, .aus .s .text, .aus .strecke, .aus .filmton { visibility: hidden !important; }
.ton-weg .ton { visibility: hidden !important; }
main { position: relative; z-index: 1; }

.marke, .kopf { position: fixed; top: 0; z-index: 3; padding: max(18px, env(safe-area-inset-top)) var(--rand) 0; font-size: 15px; }
.marke { left: 0; font-weight: 700; font-stretch: 118%; text-decoration: none; opacity: var(--m, 0); transition: opacity 0.3s; }
.aus .marke { opacity: 1; }
.kopf { right: 0; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); }
.kopf a { text-decoration: none; font-weight: 560; color: var(--mittel); }
.kopf a:hover { color: var(--tinte); }
.kopf .cta { font-weight: 650; font-stretch: 110%; color: var(--tinte); padding: 3px 0; box-shadow: inset 0 -2px var(--amber); }
.ton { position: fixed; left: 0; bottom: 0; z-index: 3; margin: 0 0 max(14px, env(safe-area-inset-bottom)) calc(var(--rand) - 8px); padding: 6px 8px; background: none; border: 0; color: var(--leise); font: 600 13px/1 'Mona Sans', system-ui, sans-serif; cursor: pointer; visibility: hidden; }
.bereit .ton { visibility: visible; }
.ton[aria-pressed='true'] { color: var(--tinte); box-shadow: inset 0 -1px var(--amber); }

/* ---------- Die Fahrt: ein Abschnitt pro Kamera-Cue, Text fest über der Leinwand ---------- */
.s { min-height: 88svh; padding: 0 var(--rand); }
.hero { min-height: 110svh; }
.kapitel { min-height: 92svh; }
.film-abschnitt { min-height: 105svh; }
/* Letzter Abschnitt der Fahrt: lang genug, dass der Vorhang der Rest-Seite (40svh) unter dem Text bleibt */
.s[data-cue='shorts'] { min-height: 145svh; }
/* Drei Kamera-Punkte (Tor, Mitte, Fach eines Laufs), ein stehender Text: Marker im langen Abschnitt (aus editing-v2) */
.lang { min-height: 300svh; position: relative; }
.cue { position: absolute; left: 0; width: 1px; height: 100svh; pointer-events: none; }
.cue.oben { top: 0; }
.cue.mitte-cue { top: 100svh; }
.cue.unten-cue { bottom: 0; }
.text { position: sticky; top: 0; height: 100svh; max-width: 34rem; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 11svh; opacity: var(--v, 1); }
/* Mit 3D stehen die Texte fest und blenden nur über (editing-v2: rutschende Texte über dem Objekt) */
.bereit .text { position: fixed; left: var(--rand); right: var(--rand); pointer-events: none; transform: translateY(calc(var(--d, 0) * -3svh)); }
.bereit .text a, .bereit .text button { pointer-events: auto; }
.rechts .text { margin-left: auto; text-align: right; align-items: flex-end; }
.rechts .live { align-self: flex-end; }
.bereit .rechts .text { left: auto; }
.hero .text, .mitte .text { justify-content: center; padding-bottom: 0; max-width: 40rem; }

h1 { font-size: clamp(3.4rem, 8vw, 8.6rem); font-weight: 780; font-stretch: 125%; line-height: 0.9; letter-spacing: -0.035em; max-width: 6.6em; }
.hero .lead { margin-top: 1.6rem; font-size: clamp(1.45rem, 2.3vw, 2.3rem); font-weight: 620; font-stretch: 108%; line-height: 1.18; letter-spacing: -0.012em; color: var(--tinte); max-width: 19em; text-wrap: balance; }
.hero p:not(.lead) { margin-top: 1rem; font-size: clamp(1.02rem, 1.25vw, 1.2rem); color: var(--leise); }

.text h2 { font-size: clamp(2.5rem, 4.6vw, 4.8rem); font-weight: 740; font-stretch: 118%; line-height: 0.96; letter-spacing: -0.03em; }
.text p { margin-top: 1.1rem; max-width: 30rem; font-size: clamp(1.1rem, 1.35vw, 1.35rem); line-height: 1.5; color: var(--mittel); text-wrap: pretty; }
.text .satz { font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 680; font-stretch: 112%; line-height: 1.02; letter-spacing: -0.025em; color: var(--tinte); max-width: 13em; margin-top: 0; text-wrap: balance; }
.text .beleg { margin-top: 1.2rem; font-size: clamp(1.4rem, 2.2vw, 2.2rem); font-weight: 720; font-stretch: 112%; line-height: 1.1; letter-spacing: -0.015em; color: var(--amber); font-variant-numeric: tabular-nums; }
.text .gross-beleg { font-size: clamp(2.2rem, 4.4vw, 4.6rem); letter-spacing: -0.03em; }
.text .gruppe { display: none; margin: 0 0 0.6rem; font-size: 13px; font-weight: 650; font-stretch: 112%; color: var(--leise); }
/* Schritte eines Laufs: der aktive leuchtet (main.js setzt data-schritt am Abschnitt nach dem Blatt auf der Linie) */
.schritte { list-style: none; margin-top: 1.2rem; display: grid; gap: 0.55rem; max-width: 30rem; counter-reset: s; }
.schritte li { position: relative; padding-left: 2.3rem; font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.35; color: var(--leise); transition: color 0.25s; counter-increment: s; }
.schritte li::before { content: counter(s); position: absolute; left: 0; top: 0.05em; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font-size: 0.8em; font-weight: 700; color: var(--leise); border: 1px solid var(--linie); border-radius: 50%; transition: all 0.25s; }
.schritte li.fertig { color: var(--mittel); }
.schritte li.fertig::before { border-color: rgba(255, 173, 51, 0.45); color: var(--amber); }
.schritte li.jetzt { color: var(--tinte); font-weight: 600; }
.schritte li.jetzt::before { background: var(--amber); border-color: var(--amber); color: #0b0b0c; }
.live { align-self: flex-start; margin-top: 1.3rem; font-weight: 650; font-stretch: 108%; font-size: 17px; text-decoration: none; padding: 3px 0; box-shadow: inset 0 -1px var(--tinte); }
.live:hover { box-shadow: inset 0 -2px var(--amber); }

/* Kapitelwort oben in derselben Spalte wie der Text darunter */
.strecke { position: fixed; z-index: 1; top: 12svh; left: var(--rand); max-width: 36rem; pointer-events: none; opacity: var(--v, 0); visibility: hidden; }
.strecke.rechts { left: auto; right: var(--rand); text-align: right; }
.wort { font-size: clamp(3.6rem, 7.4vw, 8.4rem); font-weight: 870; font-stretch: 75%; line-height: 0.84; text-transform: uppercase; letter-spacing: -0.005em; }
.strecke p:not(.wort) { margin-top: 1.2rem; font-size: clamp(1.02rem, 1.2vw, 1.18rem); color: var(--leise); max-width: 23rem; text-wrap: pretty; }
.strecke.rechts p:not(.wort) { margin-left: auto; }

/* ---------- Nach der Fahrt: normale Seite auf festem Grund ---------- */
.rest { position: relative; background: var(--grund); padding-top: 3rem; }
/* Luft nach dem letzten Abschnitt: sonst liegt der Verlauf unten schon über dem letzten Text (Linie am Schluss, 2026-10-06) */
.bereit .rest { margin-top: 45svh; }
/* deckend, bevor der obere Rand den Bildschirmrand erreicht (WEBSITE-LESSONS, Vorhang) */
.rest::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 40svh; background: linear-gradient(to bottom, transparent, var(--grund)); pointer-events: none; }
.rest > section { padding: 0 var(--rand); margin: 0 auto; max-width: 92rem; }
.rest > section + section { margin-top: clamp(7rem, 14vw, 12rem); }
.gross { font-size: clamp(3rem, 7.4vw, 7.4rem); font-weight: 780; font-stretch: 125%; line-height: 0.92; letter-spacing: -0.035em; }
.unter { margin-top: 1.4rem; max-width: 38rem; color: var(--mittel); font-size: clamp(1.1rem, 1.4vw, 1.35rem); text-wrap: pretty; }

/* Zahlen: gross, Haarlinie oben, keine Karten */
.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem clamp(1.5rem, 3vw, 3rem); padding-top: 2rem !important; }
.zahl { border-top: 1px solid var(--linie); padding-top: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.zahl strong { font-size: clamp(2.6rem, 5vw, 5.4rem); font-weight: 760; font-stretch: 112%; line-height: 0.95; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zahl:first-child strong { color: var(--amber); }
.zahl span { color: var(--mittel); font-size: clamp(1rem, 1.2vw, 1.15rem); }
.stand { grid-column: 1 / -1; color: var(--leise); font-size: 13px; }

/* Editing: zwei Filme, darunter Shorts (aus editing-v2) */
.filme { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); margin-top: clamp(2rem, 5vw, 3.6rem); }
.film figcaption { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--linie); margin-top: 14px; color: var(--leise); font-size: 15px; }
.film strong { color: var(--tinte); font-weight: 650; font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.25; }
.film .art { font-size: 13px; color: var(--mittel); }
.rahmen { position: relative; aspect-ratio: 16 / 9; background: #000 center / cover; border-radius: 2px; overflow: hidden; cursor: pointer; }
.rahmen video { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Unter jedem Film: grosser Ton-Knopf, Fortschritt über die ganze Länge, Zeit. So sieht man: Ton gibt es, und er läuft ganz. */
.steuer { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.ton-an, .filmton { display: inline-flex; white-space: nowrap; align-items: center; gap: 10px; flex: none; padding: 11px 18px 11px 14px; background: var(--amber); color: #0b0b0c; border: 0; border-radius: 2px; font: 700 16px/1 'Mona Sans', system-ui, sans-serif; font-stretch: 108%; cursor: pointer; transition: background 0.2s, transform 0.2s cubic-bezier(.2, .8, .2, 1); }
.ton-an svg, .filmton svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; }
.ton-an:hover, .filmton:hover { background: #ffbd57; }
.ton-an:active, .filmton:active { transform: scale(0.97); }
/* Ton ist an: Knopf wird leise (zum Ausschalten), die Welle bleibt */
.ton-an[aria-pressed='true'], .filmton[aria-pressed='true'] { background: none; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie); }
.ton-an[aria-pressed='false'] .welle, .filmton[aria-pressed='false'] .welle { opacity: 0.45; }
.spur { flex: 1; height: 3px; background: var(--linie); border-radius: 2px; overflow: hidden; }
.spur i { display: block; height: 100%; width: 0; background: var(--amber); }
.steuer .stumm { flex: none; white-space: nowrap; padding: 11px 0; color: var(--mittel); font: 600 15px/1 'Mona Sans', system-ui, sans-serif; font-stretch: 108%; }
.steuer .zeit { flex: none; color: var(--leise); font-size: 14px; font-variant-numeric: tabular-nums; }
/* Ton-Knopf am Film im 3D: fest, main.js setzt left/top unter die Unterkante des Blatts */
.filmton { position: fixed; z-index: 2; left: 0; top: 0; transform: translateX(-50%); opacity: var(--v, 0); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
.filmton[aria-pressed='true'] { background: rgba(7, 8, 10, 0.72); }
.filmton[hidden] { display: none; }
.filmton .zeit { font-weight: 560; font-size: 14px; font-variant-numeric: tabular-nums; opacity: 0.75; }
.filmton .zeit:empty { display: none; }
.shorts-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
.shorts-kopf h3 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 760; font-stretch: 118%; letter-spacing: -0.02em; }
.shorts-kopf p { color: var(--mittel); font-size: 16px; }
.shorts { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 20px; }
.short { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; padding: 0; background: #000 center / cover; border-radius: 2px; overflow: hidden; cursor: pointer; color: var(--tinte); font: inherit; }
.short video, .short iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.short .zahl-short { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 10px 9px; text-align: left; font-size: 15px; font-weight: 680; font-variant-numeric: tabular-nums; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); }
li:first-child .zahl-short { color: var(--amber); }
.fuss-zeile { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; align-items: baseline; margin-top: 22px; color: var(--leise); font-size: 13px; }
.knopf-leise { font-weight: 650; font-size: 17px; color: var(--tinte); text-decoration: none; box-shadow: inset 0 -1px var(--tinte); padding: 3px 0; }
.knopf-leise:hover { box-shadow: inset 0 -2px var(--amber); }

/* Ask my AI: Verlauf als Zeilen, Eingabe als Haarlinie, keine Blasen */
.frag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.chat { border-top: 1px solid var(--linie); padding-top: 1.2rem; }
.verlauf { list-style: none; display: flex; flex-direction: column; gap: 1rem; max-height: 46svh; overflow-y: auto; scrollbar-width: thin; }
.verlauf:empty { display: none; }
.verlauf li { max-width: 34rem; font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.5; white-space: pre-wrap; }
.verlauf .user { align-self: flex-end; text-align: right; color: var(--leise); }
.verlauf .assistant { color: var(--tinte); }
.verlauf .laed { color: var(--leise); }
.vorschlaege { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.vorschlaege[hidden] { display: none; }
.vorschlaege button { background: none; border: 0; padding: 8px 0; color: var(--mittel); font: 560 clamp(1.05rem, 1.3vw, 1.25rem)/1.3 'Mona Sans', system-ui, sans-serif; cursor: pointer; text-align: left; }
.vorschlaege button::before { content: '?  '; color: var(--amber); font-weight: 700; }
.vorschlaege button:hover { color: var(--tinte); }
.eingabe { display: flex; gap: 1rem; margin-top: 1.4rem; border-bottom: 1px solid rgba(236, 235, 231, 0.35); }
.eingabe:focus-within { border-bottom-color: var(--amber); }
.eingabe input { flex: 1; min-width: 0; background: none; border: 0; padding: 14px 0; color: var(--tinte); font: 500 clamp(1.05rem, 1.3vw, 1.25rem)/1.3 'Mona Sans', system-ui, sans-serif; outline: none; }
.eingabe input::placeholder { color: var(--leise); }
.eingabe button { background: none; border: 0; color: var(--amber); font: 700 16px/1 'Mona Sans', system-ui, sans-serif; font-stretch: 110%; cursor: pointer; padding: 0 2px; }
.eingabe button:disabled, .eingabe input:disabled { opacity: 0.5; cursor: wait; }
.chat .hinweis { margin-top: 0.9rem; color: var(--leise); font-size: 13px; }

/* Über mich: Foto neben dem Text */
.ueber { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.foto { width: 100%; height: auto; display: block; border-radius: 2px; filter: saturate(0.92) contrast(1.03); }
.ueber p:not(.werkzeuge) { margin-top: 1.4rem; max-width: 36rem; font-size: clamp(1.1rem, 1.4vw, 1.35rem); color: var(--mittel); text-wrap: pretty; }
.werkzeuge { margin-top: 1.8rem; color: var(--mittel); font-size: 15px; }
.werkzeuge span { color: var(--leise); margin-right: 0.5rem; }

/* Kontakt */
.kontakt { padding-bottom: clamp(5rem, 10vw, 8rem) !important; }
.knopf { display: inline-block; margin-top: 2rem; padding: 18px 32px; background: var(--amber); color: #0b0b0c; font-weight: 720; font-stretch: 110%; font-size: 18px; text-decoration: none; border-radius: 2px; transition: transform 0.2s cubic-bezier(.2, .8, .2, 1), background 0.2s; }
.knopf:hover { background: #ffbd57; transform: translateY(-2px); }
.knopf:active { transform: translateY(0); }
.kanaele { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 clamp(1rem, 2vw, 2rem); margin-top: clamp(3rem, 6vw, 4.5rem); }
.kanaele a { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--linie); text-decoration: none; }
.kanaele span { color: var(--leise); font-size: 14px; }
.kanaele strong { font-weight: 620; font-size: clamp(1rem, 1.2vw, 1.15rem); overflow-wrap: break-word; }
.kanaele a:hover { border-top-color: var(--amber); }
.kanaele a:hover strong { color: #fff; }
.wege { margin-top: 2rem; color: var(--leise); font-size: 15px; }
.wege a { color: var(--tinte); text-underline-offset: 4px; }

.fuss-seite { padding: 26px var(--rand) max(26px, env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); color: var(--leise); font-size: 14px; }
.auch { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.auch span { color: var(--leise); }
.auch a { color: var(--mittel); text-decoration: none; }
.auch a:hover { color: var(--tinte); }
.fuss-unten { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.8rem 2rem; margin-top: 1.4rem; }
.recht summary { cursor: pointer; color: var(--mittel); list-style: none; }
.recht summary::-webkit-details-marker { display: none; }
.recht[open] { flex-basis: 100%; order: 9; }
.recht div { margin-top: 1rem; max-width: 46rem; display: grid; gap: 1rem; font-size: 13px; line-height: 1.6; }
.recht strong { color: var(--mittel); font-weight: 640; }
.sprache { margin-left: auto; display: flex; gap: 4px; }
.sprache button { background: none; border: 0; color: var(--leise); font: inherit; font-weight: 600; padding: 2px 8px; cursor: pointer; }
.sprache button[aria-pressed='true'] { color: var(--tinte); box-shadow: inset 0 -1px var(--amber); }

/* ---------- Ohne WebGL: alles im normalen Fluss ---------- */
.kein-3d { display: none; }
.ohne-3d .kein-3d { display: block; position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 3; color: var(--leise); font-size: 14px; }
.ohne-3d .text, .ohne-3d .marke { opacity: 1; }
.ohne-3d #welt, .ohne-3d .strecke, .ohne-3d .filmton, .ohne-3d .ton { display: none; }
.ohne-3d .lang { min-height: 0; }
.ohne-3d .s { min-height: 0; padding-top: 14svh; }
.ohne-3d .text { position: static; height: auto; padding: 0; margin: 0; text-align: left; align-items: flex-start; }
.ohne-3d .text .gruppe { display: block; }

@media (max-width: 1000px) {
  .zahlen { grid-template-columns: 1fr 1fr; }
  .filme, .frag { grid-template-columns: 1fr; }
  .kanaele { grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
  .kanaele li { margin-bottom: 1.2rem; }
  /* Band statt Raster: hält die Seite kurz, seitlich wischen (fade, 2026-09-14) */
  .shorts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); scrollbar-width: none; }
  .shorts li { flex: 0 0 42%; scroll-snap-align: start; }
}
@media (max-width: 700px) {
  .ueber { grid-template-columns: 1fr; }
  .foto { max-width: 22rem; }
  .kopf a:not(.cta) { display: none; }
  .kanaele li:first-child { grid-column: 1 / -1; }
}
/* Hochformat: Bild oben, Text unten, kleines Strecken-Label statt grossem Wort */
@media (orientation: portrait) {
  .s .text, .rechts .text { justify-content: flex-end; padding-bottom: 8svh; margin: 0; max-width: none; text-align: left; align-items: flex-start; }
  .bereit .rechts .text { left: var(--rand); }
  .rechts .live { align-self: flex-start; }
  .hero .text, .mitte .text { justify-content: flex-end; padding-bottom: 9svh; }
  .schritte li { font-size: 1rem; padding-left: 2rem; }
  .schritte { gap: 0.35rem; margin-top: 0.8rem; }
  .text .gruppe { display: block; }
  /* Kapitelwort im Hochformat: unten wie die Texte, nur solange der Kapitel-Abschnitt dran ist (main.js) */
  .strecke, .strecke.rechts { top: auto; bottom: 9svh; left: var(--rand); right: var(--rand); max-width: none; text-align: left; }
  .wort { font-size: clamp(3rem, 15vw, 4.6rem); }
  .strecke.rechts p:not(.wort) { margin-left: 0; }
  .text h2 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .text p { font-size: 1.08rem; margin-top: 0.7rem; }
  .text .beleg { font-size: 1.5rem; margin-top: 0.8rem; }
  .text .gross-beleg { font-size: 2.3rem; }
  .text .satz { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  /* Kurzes Handy (Safari mit Leiste): sonst schiebt die Liste den Text über die Linie. Nur der aktive Schritt steht da,
     als Untertitel zum Roboter (main.js setzt immer genau einen .jetzt). Ohne 3D bleibt die ganze Liste.
     Nicht display:none: dann zählt der CSS-Zähler nicht mehr mit und jeder Schritt hiesse "1". */
  @media (max-height: 760px) { .bereit .schritte li:not(.jetzt) { position: absolute; visibility: hidden; } }
  .hero .lead { font-size: 1.4rem; }
  h1 { font-size: clamp(3.2rem, 16vw, 4.8rem); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knopf, .ton-an, .filmton, .schritte li, .schritte li::before { transition: none; }
  .bereit .text { transform: none; }
}