@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; }
/* 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 .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); }
  .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; }
}