/* =====================================================================================
   Vorlage 39 Boulderhalle · Kletterwand
   Inhalt:
     1  Grundlagen, Schrift, Knöpfe
     2  Routennavigation (Griffe am linken Rand, am Handy unten) und Kopf
     3  Wandsegmente, schräge Fugen, Deko-Griffe
     4  Erster Bildschirm: Bauen Sie Ihre Route
     5  Klebender Abschnitt: Ihr erster Boulder in sechs Zügen
     6  Preise, Zeiten und Anfahrt, Kurse, Stimmen, Jobs, Anfrage, Fuß
     7  Auftritte beim Scrollen (scroll-getrieben, mit Rückfall)
     8  Bewegungsstufen
     9  Handy und schmale Fenster
   Moderne Technik, jeweils mit Rückfall: animation-timeline (view, scroll), @property, :has(), @container,
   color-mix(), cqw, individuelle transform-Eigenschaften (translate, rotate, scale), View Transitions.
   ===================================================================================== */

/* ---------- 1 · Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 12px); overflow-x: clip; }
body {
  margin: 0; min-width: 320px; overflow-x: clip;
  background: var(--wand-tief); color: var(--text);
  font: 400 clamp(16px, 1.05vw + 12px, 18px)/1.55 var(--schrift);
  padding-bottom: var(--leiste);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, p, ul, ol, dl, figure, blockquote, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 { font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .95; text-wrap: balance; }
h1 { font-size: clamp(40px, 4.4vw + 8px, 56px); }
h2 { font-size: clamp(36px, 3.8vw + 8px, 62px); }
h3 { font-size: 1.15rem; line-height: 1.2; font-weight: 750; }
:focus-visible { outline: 3px solid var(--chalk); outline-offset: 3px; border-radius: 6px; }
.seg--chalk :focus-visible, .seg--orange :focus-visible { outline-color: #14181d; }
.nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: var(--chalk); color: #14181d; font-weight: 700; transition: top .2s; }
.sprung:focus { top: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.behaelter {
  width: min(100% - var(--links) - var(--rand), var(--breite));
  margin-left: max(var(--links), calc(50% - var(--breite) / 2));
  position: relative; z-index: 1;
}
.kicker { font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--kicker, var(--muted)); margin-bottom: .6em; }
.lead { font-size: clamp(1.05rem, .5vw + 1rem, 1.25rem); line-height: 1.5; color: var(--muted); max-width: none; margin-top: .9em; text-wrap: pretty; }
.lead--klein { font-size: 1.05rem; }
.klein { font-size: .9rem; color: var(--muted); margin-top: .8em; }
.nur-pc { display: inline; }

/* Griff-Knöpfe: oben eine helle Kante wie bei einer Leiste, unten ein Sockel */
.knopf {
  --fl: var(--pink); --tx: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0; cursor: pointer; text-decoration: none;
  font: 750 1rem/1 var(--schrift); letter-spacing: .01em;
  border-radius: 15px 15px 12px 12px; background: var(--fl); color: var(--tx);
  box-shadow: inset 0 3px 0 rgb(255 255 255 / .42), inset 0 -3px 0 rgb(0 0 0 / .16),
              0 4px 0 color-mix(in srgb, var(--fl) 52%, black), 0 10px 18px rgb(0 0 0 / .32);
  transition: translate .12s ease, box-shadow .12s ease, background-color .2s;
}
.knopf:hover { translate: 0 -2px; }
.knopf:active { translate: 0 3px; box-shadow: inset 0 3px 0 rgb(255 255 255 / .3), inset 0 -2px 0 rgb(0 0 0 / .16), 0 1px 0 color-mix(in srgb, var(--fl) 52%, black); }
.knopf--pink { --fl: var(--pink); --tx: var(--on-accent); }
.knopf--hell { --fl: var(--chalk); --tx: #14181d; }
.knopf--dunkel { --fl: #14181d; --tx: var(--chalk); }
.knopf--klein { min-height: 44px; padding: 0 18px; font-size: .95rem; }

/* ---------- 2 · Routennavigation und Kopf ---------- */
.route {
  position: fixed; z-index: 40; left: 8px; top: 50%; translate: 0 -50%;
  width: calc(var(--route-b) - 12px); padding: 12px 0;
  border-radius: 28px; background: color-mix(in srgb, var(--wand-tief) 82%, transparent);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 12px 30px rgb(0 0 0 / .4);
}
.route-liste { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.route-liste li:nth-child(even) .gr-nav { translate: 5px 0; }
.route-liste li:nth-child(3n) .gr-nav { translate: -2px 0; }
.route-linie { position: absolute; left: 50%; top: 22px; bottom: 22px; width: 4px; translate: -50% 0; border-radius: 4px; background: rgb(255 255 255 / .12); overflow: hidden; }
.route-linie i { display: block; width: 100%; height: 100%; background: linear-gradient(var(--pink), var(--orange), var(--gelb), var(--gruen), var(--tuerkis)); transform-origin: 50% 0; transform: scaleY(var(--fort)); }
.gr-nav { position: relative; display: grid; place-items: center; width: calc(100% - 12px); margin-inline: auto; min-height: 48px; text-decoration: none; color: var(--chalk); }
.gr-nav svg { position: relative; z-index: 1; width: 46px; height: 38px; opacity: .55; transition: opacity .25s, scale .25s cubic-bezier(.3, 1.6, .5, 1); }
.gr-nav::before { content: ""; position: absolute; inset: 4px 7px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--h) 62%, transparent), transparent); opacity: 0; scale: .6; transition: opacity .3s, scale .4s cubic-bezier(.3, 1.6, .5, 1); }
.gr-nav:hover svg, .gr-nav:focus-visible svg { opacity: .95; }
.gr-nav[aria-current="true"] svg { opacity: 1; scale: 1.12; }
.gr-nav[aria-current="true"]::before { opacity: 1; scale: 1.12; }
.gr-nr { position: absolute; left: 3px; bottom: 5px; z-index: 2; font: 800 .62rem/1 var(--schrift); letter-spacing: .04em; color: var(--chalk); opacity: .8; }
.gr-nav::after {
  content: attr(data-name);
  position: absolute; left: calc(100% + 12px); top: 50%; translate: -8px -50%; z-index: 3;
  padding: 7px 12px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  background: var(--chalk); color: #14181d; font-weight: 750; font-size: .9rem; letter-spacing: .01em;
  box-shadow: 0 6px 16px rgb(0 0 0 / .35); display: none;
}
.gr-nav:hover::after, .gr-nav:focus-visible::after, .gr-nav.zeigt::after { display: block; translate: 0 -50%; animation: tipp .22s ease both; }
@keyframes tipp { from { opacity: 0; translate: -8px -50%; } to { opacity: 1; translate: 0 -50%; } }
/* Chalk-Staub: zehn kleine Wölkchen, die der aktive Griff aufstiebt */
.staub-feld { position: absolute; left: 50%; top: 0; width: 0; height: 0; pointer-events: none; z-index: 4; }
.staub-feld i {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; display: none;
  background: radial-gradient(closest-side, rgb(255 255 255 / .95), rgb(255 255 255 / 0));
}
.staub-feld i.los { display: block; animation: staub .95s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes staub {
  0% { opacity: .95; transform: translate(-7px, -7px) scale(.4); }
  100% { opacity: 0; transform: translate(calc(var(--dx) - 7px), calc(var(--dy) - 7px)) scale(2.6); }
}

.kopf {
  position: fixed; z-index: 35; top: 0; left: var(--route-b); right: 0; height: var(--kopf);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--rand) 0 12px;
  background: color-mix(in srgb, var(--wand-tief) 97%, transparent);
  border-bottom: 1px solid rgb(255 255 255 / .08);
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo svg { width: 46px; height: 38px; }
.logo-text { display: grid; line-height: 1.05; }
.logo-text strong { font: 800 1.55rem/1 var(--schrift-titel); text-transform: uppercase; letter-spacing: .03em; }
.logo-text small { font-size: .78rem; color: var(--muted); letter-spacing: .04em; }
.kopf-rechts { display: flex; align-items: center; gap: 14px; }
.kopf-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 750; text-decoration: none; letter-spacing: .01em; }
.kopf-tel svg { width: 20px; height: 20px; color: var(--gruen); }

/* ---------- 3 · Wandsegmente ---------- */
main { display: block; }
.seg {
  position: relative; isolation: isolate; overflow-x: clip;
  padding-block: clamp(76px, 9vw, 132px);
  background: var(--seg, var(--anthrazit)); color: var(--text);
}
/* schräge Fuge: ein Dreieck in der Farbe des Segments ragt in das Segment davor */
.seg::before, .seg::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--fuge) * -1 + 1px); height: var(--fuge); z-index: 0; pointer-events: none; }
.seg::before { background: var(--seg); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.seg::after { background: rgb(255 255 255 / .16); clip-path: polygon(0 100%, 100% 0, 100% calc(0% + 3px), 0 calc(100% - 0px)); height: var(--fuge); }
.seg:nth-of-type(even)::before { clip-path: polygon(0 0, 100% 100%, 0 100%); }
.seg:nth-of-type(even)::after { clip-path: polygon(0 0, 100% 100%, 100% calc(100% - 3px), 0 calc(0% - 0px)); }
.start::before, .start::after { display: none; }
.seg--anthrazit { --seg: var(--anthrazit); }
.seg--schiefer { --seg: var(--schiefer); }
.seg--petrol { --seg: var(--petrol); --muted: #bfe0e3; --kicker: var(--gelb); }
.seg--pflaume { --seg: var(--pflaume); --muted: #d0c0e4; --kicker: var(--orange); }
.seg--chalk { --seg: #efece3; --text: #181d23; --muted: #46505b; --kicker: #8a2bd6; color: var(--text); }
.seg--orange { --seg: var(--orange); --text: #1b0d03; --muted: #3d200c; --kicker: #1b0d03; color: var(--text); }
.seg--anthrazit { --kicker: var(--tuerkis); }
.seg--schiefer { --kicker: #ff7ab9; }

.seg-raster { display: grid; gap: clamp(24px, 4vw, 64px); align-items: start; }
.seg-raster--kopf-links { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.seg-raster--kopf-rechts { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.seg-raster--kopf-rechts > .seg-kopf { order: 2; }
.seg-kopf { position: sticky; top: calc(var(--kopf) + 28px); }
.seg-kopf h2 { margin-bottom: .1em; }

.deko { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.deko-gr { position: absolute; width: clamp(120px, 14vw, 230px); height: auto; opacity: .92; }
.deko-gr--a { right: 3%; top: 8%; rotate: 14deg; }
.preise .deko-gr { left: 3%; bottom: 3%; right: auto; top: auto; rotate: -18deg; width: clamp(130px, 16vw, 250px); }
.zeiten .deko-gr { right: 3%; bottom: 6%; top: auto; rotate: 20deg; width: clamp(110px, 12vw, 190px); }
.kurse .deko-gr { right: 3%; top: 5%; rotate: 12deg; width: clamp(120px, 14vw, 220px); }
.stimmen .deko-gr { right: 4%; bottom: 8%; top: auto; rotate: -10deg; width: clamp(180px, 24vw, 360px); opacity: .9; }
.jobs .deko-gr { right: 2%; top: 4%; rotate: 8deg; width: clamp(140px, 16vw, 250px); opacity: .92; }
.kontakt .deko-gr { right: 3%; bottom: 6%; top: auto; rotate: -14deg; width: clamp(160px, 20vw, 300px); opacity: .85; }
.deko-gr--b { left: 54%; bottom: 4%; rotate: -22deg; width: clamp(90px, 9vw, 150px); opacity: .85; }

/* ---------- 4 · Erster Bildschirm ---------- */
.start { --seg: var(--anthrazit); padding-top: calc(var(--kopf) + 30px); padding-bottom: clamp(48px, 6vw, 80px); min-height: 100svh; background-image: radial-gradient(ellipse at 78% 30%, #2a323c, transparent 62%); background-color: var(--anthrazit); }
.start-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.start-text > .lead { margin-bottom: 1.2em; }
.start-text h1 { text-shadow: 0 3px 0 rgb(0 0 0 / .25); }

.steuerung { display: grid; gap: 14px; padding: 16px; border-radius: 20px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
html:not(.js) .steuerung { display: none; }
.hinweis--ohne-js { display: none; }
html:not(.js) .hinweis--ohne-js { display: block; padding: 14px 16px; border-radius: 14px; background: rgb(255 255 255 / .07); }
.feld { margin: 0; padding: 0; border: 0; min-width: 0; }
legend, .feld > label:first-child, .feld--neigung > label {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; padding: 0; margin-bottom: 8px;
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.schritt-nr { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pink); color: var(--on-accent); font-size: .74rem; letter-spacing: 0; }
.legende-wert { margin-left: auto; font: 800 1.05rem/1 var(--schrift-titel); letter-spacing: .06em; text-transform: uppercase; color: var(--chalk); }
.farben { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.farbe-wahl, .art-wahl { position: relative; display: grid; place-items: center; cursor: pointer; border-radius: 14px; border: 2px solid transparent; background: rgb(255 255 255 / .06); transition: background-color .2s, border-color .2s, translate .2s, box-shadow .2s; }
.farbe-wahl { height: 54px; }
.farbe-wahl svg { width: 48px; height: 40px; pointer-events: none; }
.farbe-wahl input, .art-wahl input, .chip input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
.farbe-wahl:hover, .art-wahl:hover { background: rgb(255 255 255 / .11); }
.farbe-wahl:has(input:checked) { border-color: var(--h); background: color-mix(in srgb, var(--h) 24%, transparent); translate: 0 -2px; box-shadow: 0 8px 18px color-mix(in srgb, var(--h) 36%, transparent); }
.farbe-wahl:has(input:focus-visible), .art-wahl:has(input:focus-visible) { outline: 3px solid var(--chalk); outline-offset: 2px; }
.arten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.art-wahl { grid-template-rows: auto auto; gap: 0; padding: 6px 4px 8px; font-size: .86rem; font-weight: 700; }
.art-wahl svg { width: 46px; height: 36px; pointer-events: none; }
.art-wahl:has(input:checked) { border-color: var(--chalk); background: rgb(255 255 255 / .16); }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 12px; background: linear-gradient(90deg, rgb(255 255 255 / .18), var(--h)); }
input[type="range"]::-moz-range-track { height: 12px; border-radius: 12px; background: linear-gradient(90deg, rgb(255 255 255 / .18), var(--h)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--chalk-grau)); border: 0; box-shadow: 0 0 0 4px var(--h), 0 4px 10px rgb(0 0 0 / .45); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--chalk-grau)); border: 0; box-shadow: 0 0 0 4px var(--h), 0 4px 10px rgb(0 0 0 / .45); }
input[type="range"]:focus-visible { outline-offset: 4px; }
.skala { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); }
.feld--neigung { --h: var(--chalk-grau); }
.steuerung .feld--neigung { --h: var(--hh, var(--tuerkis)); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.knoepfe .knopf { flex: 1 1 auto; }
.hinweis { font-size: .94rem; color: var(--muted); }
.hinweis strong { color: var(--chalk); }

/* Bühne: die Wand, kippbar */
.start-buehne {
  --h: var(--tuerkis); position: relative; display: grid; gap: 12px;
  transition: --k .85s cubic-bezier(.3, .85, .3, 1), --h .55s ease;
}
.start-buehne[data-farbe="gelb"] { --h: var(--gelb); }
.start-buehne[data-farbe="gruen"] { --h: var(--gruen); }
.start-buehne[data-farbe="tuerkis"] { --h: var(--tuerkis); }
.start-buehne[data-farbe="orange"] { --h: var(--orange); }
.start-buehne[data-farbe="pink"] { --h: var(--pink); }
.start-buehne[data-farbe="violett"] { --h: var(--violett); }
.steuerung:has(input[name="rt-farbe"][value="0"]:checked) { --hh: var(--gelb); }
.steuerung:has(input[name="rt-farbe"][value="1"]:checked) { --hh: var(--gruen); }
.steuerung:has(input[name="rt-farbe"][value="2"]:checked) { --hh: var(--tuerkis); }
.steuerung:has(input[name="rt-farbe"][value="3"]:checked) { --hh: var(--orange); }
.steuerung:has(input[name="rt-farbe"][value="4"]:checked) { --hh: var(--pink); }
.steuerung:has(input[name="rt-farbe"][value="5"]:checked) { --hh: var(--violett); }
.buehne-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding-left: 108px; }
.zug-stand { padding: 6px 14px; border-radius: 999px; background: rgb(255 255 255 / .08); font-weight: 800; font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; }
.demo-pille { padding: 6px 14px; border-radius: 999px; background: var(--pink); color: var(--on-accent); font-weight: 750; font-size: .84rem; }
.demo-pille[hidden] { display: none; }
.wand-rahmen { width: min(100%, calc((100svh - 250px) * 480 / 500)); min-width: 280px; margin-inline: auto; perspective: 1500px; perspective-origin: 50% 80%; }
.wand {
  position: relative; transform-origin: 50% 62%;
  transform: rotateX(calc(var(--k) * -30deg)) scale(calc(1 - var(--k) * .08));
  will-change: transform;
}
.wand::after { content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / calc(var(--k) * .55)), transparent 62%); }
.wand-svg { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 24px 40px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .1); }
.gr { transform-origin: 0 0; transition: transform .75s cubic-bezier(.3, .9, .3, 1.1), opacity .45s ease; }
.gr--deko { --h: #5f6a77; } .gr--deko.grau1 { --h: #6e7985; } .gr--deko.grau2 { --h: #4c5762; }
.gr.weg { pointer-events: none; visibility: hidden; transition: transform .75s cubic-bezier(.3, .9, .3, 1.1), visibility 0s .75s; }
.wand-svg .figur { transition: opacity .3s ease; }
.wand-svg.aus .figur { opacity: 0; }
.tag { transition: transform .75s cubic-bezier(.3, .9, .3, 1); }
.tag rect { fill: var(--chalk); stroke: rgb(0 0 0 / .25); stroke-width: 1; }
.tag--top rect { fill: var(--pink); }
.tag text { font: 800 9px var(--schrift); letter-spacing: .1em; fill: #14181d; }
.tag--top text { fill: var(--on-accent); }
.puff:not(.los) { display: none; }
.puff circle { fill: url(#wa-staub); transform-box: fill-box; transform-origin: center; }
.puff.los circle { animation: puff .95s cubic-bezier(.2, .7, .3, 1) both; }
.puff circle:nth-child(1) { --dx: -15px; --dy: -12px; } .puff circle:nth-child(2) { --dx: 14px; --dy: -14px; } .puff circle:nth-child(3) { --dx: -4px; --dy: -19px; } .puff circle:nth-child(4) { --dx: -19px; --dy: 4px; } .puff circle:nth-child(5) { --dx: 17px; --dy: 3px; }
@keyframes puff { 0% { opacity: .95; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(3.6); } }

.neigung-bild { position: absolute; left: 0; top: 0; width: 100px; height: 76px; color: var(--chalk); }
.n-wand { transform-origin: 30px 76px; transform: rotate(calc(var(--k) * 40deg)); }
.anzeige { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.a-kachel { padding: 10px 14px 12px; border-radius: 16px; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); min-width: 0; }
.a-kachel dt { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.a-kachel dd { margin: 0; font: 800 clamp(1.7rem, 2.4vw, 2.3rem)/1.05 var(--schrift-titel); text-transform: uppercase; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.a-kachel--grad { background: var(--h); color: #11151a; box-shadow: 0 10px 22px color-mix(in srgb, var(--h) 40%, transparent); transition: background-color .5s; }
.a-kachel--grad dt { color: #11151a; opacity: .75; }
.a-kachel--kraft dd { font-size: 1.15rem; display: grid; gap: 4px; }
.a-kachel--kraft small { font: 500 .78rem/1.25 var(--schrift); text-transform: none; letter-spacing: 0; color: var(--muted); }
.kraft-balken { display: flex; gap: 4px; }
.kraft-balken i { flex: 1; height: 9px; border-radius: 4px; background: rgb(255 255 255 / .16); transition: background-color .3s; }
.kraft-balken i.an { background: var(--h); }

/* ---------- 5 · Klebender Abschnitt ---------- */
.boulder { padding-block: 0; --seg: var(--schiefer); }
.bl-karte { padding-block: clamp(48px, 7vw, 92px); }
.bl-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.bl-text h2 { margin-bottom: .05em; }
.bl-schritte { display: grid; gap: 6px; margin-top: 18px; }
.bl-schritt { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / .05); transition: background-color .3s, opacity .3s; }
.bl-nr { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgb(255 255 255 / .12); font: 800 1.3rem/1 var(--schrift-titel); }
.bl-schritt h3 { margin-top: 6px; }
.bl-schritt p { color: var(--muted); font-size: .98rem; margin-top: 4px; }
.bl-schritt.ist-aktiv { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 2px var(--tuerkis); }
.bl-schritt.ist-aktiv .bl-nr { background: var(--tuerkis); color: #08181a; }
.bl-punkte { display: none; gap: 2px; margin-top: 10px; }
.bl-punkte button { min-width: 44px; min-height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; padding: 0; }
.bl-punkte i { display: block; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--muted); transition: background-color .2s, border-color .2s, scale .2s; }
.bl-punkte .ist-fertig i { background: color-mix(in srgb, var(--tuerkis) 50%, transparent); border-color: var(--tuerkis); }
.bl-punkte .ist-aktiv i { background: var(--tuerkis); border-color: var(--tuerkis); scale: 1.35; }

.bl-szene { position: sticky; top: calc(var(--kopf) + 24px); }
.bl-fenster {
  --cam: 56; container-type: inline-size; position: relative; overflow: hidden;
  width: min(100%, calc((100dvh - 120px) * 400 / 368)); aspect-ratio: 400 / 368; margin-inline: auto;
  border-radius: 22px; background: var(--wand-tief); box-shadow: 0 30px 50px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .12);
}
.bl-wand { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(calc(var(--cam) * -.25cqw)); will-change: transform; }
.bl-wand-svg { display: block; width: 100%; height: auto; --h: var(--tuerkis); }
.bl-dunkel { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, #0c1014 78%, transparent) 100%); }
.bl-fig { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lin { stroke: rgb(255 255 255 / .5); stroke-width: 1.2; }
.lin-t { fill: #d9dee4; font: 700 8px var(--schrift); }
.ring { fill: none; stroke: #fff; stroke-width: 2.5; visibility: hidden; transform-box: fill-box; transform-origin: center; }
.bl-wand[data-s="1"] .ring-1, .bl-wand[data-s="2"] .ring-2, .bl-wand[data-s="3"] .ring-3, .bl-wand[data-s="4"] .ring-4, .bl-wand[data-s="5"] .ring-5, .bl-wand[data-s="6"] .ring-6 { animation: ring 1.7s ease-in-out infinite; visibility: visible; }
@keyframes ring { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: .3; transform: scale(1.18); } }
.bl-hoehe { position: absolute; left: 12px; top: 12px; display: grid; gap: 0; padding: 8px 14px 10px; border-radius: 14px; background: color-mix(in srgb, var(--wand-tief) 80%, transparent); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); --hz: 2.3rem; }
.bl-hoehe span { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bl-hoehe strong { font: 800 var(--hz)/1 var(--schrift-titel); text-transform: uppercase; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--tuerkis); }
html.bl-nativ .bl-hoehe strong { font-size: 0; }
html.bl-nativ .bl-hoehe strong::after {
  font: 800 var(--hz)/1 var(--schrift-titel); letter-spacing: .02em;
  counter-reset: hm round(down, calc(var(--dm) / 10), 1) hd mod(var(--dm), 10);
  content: counter(hm) "," counter(hd) " m";
}
.bl-balken { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgb(255 255 255 / .14); }
.bl-balken i { display: block; width: 100%; height: 100%; background: var(--tuerkis); transform-origin: 0 50%; transform: scaleX(calc(var(--p) / 6)); }

/* Klebend nur, wenn JavaScript es einschaltet (html.bl-an) */
html.bl-an .bl-huelle { height: calc(var(--bl-schritte) * 100svh); }
html.bl-an .bl-karte { position: sticky; top: 0; display: flex; align-items: center; height: 100dvh; padding-block: calc(var(--kopf) + 8px) 12px; overflow: hidden; }
html.bl-an .bl-raster { width: 100%; align-items: center; }
html.bl-an .bl-szene { position: static; }
html.bl-an .bl-fenster { width: min(100%, calc((100dvh - var(--kopf) - 40px) * 400 / 368)); }
html.bl-an .bl-schritt { opacity: .6; }
html.bl-an .bl-schritt p { display: grid; max-height: 0; overflow: hidden; margin-top: 0; opacity: 0; transition: max-height .45s ease, opacity .3s ease, margin-top .3s; }
html.bl-an .bl-schritt.ist-aktiv { opacity: 1; }
html.bl-an .bl-schritt.ist-aktiv p { max-height: 8em; opacity: 1; margin-top: 4px; }
html.bl-an .bl-punkte { display: flex; }
html.bl-an .bl-schritt h3 { margin-top: 8px; }

/* Scroll-getrieben: --p läuft in CSS mit der Fensterhöhe des Abschnitts (Rückfall: JavaScript setzt --p) */
@supports ((animation-timeline: view()) and (animation-range: contain 0% contain 100%)) {
  @media (prefers-reduced-motion: no-preference) {
    html.bl-an:not([data-bewegung="starr"]) .bl-huelle { animation: bl-p linear both, bl-dm linear both; animation-timeline: view(), view(); animation-range: contain 0% contain 100%, contain 0% contain 100%; }
  }
}
@keyframes bl-p { from { --p: 0; } to { --p: 6; } }
@keyframes bl-dm {
  0% { --dm: 7; } 0.83% { --dm: 7; } 15.33% { --dm: 14; } 39% { --dm: 14; } 48.33% { --dm: 22; } 56% { --dm: 22; }
  65.33% { --dm: 27; } 72.33% { --dm: 27; } 82% { --dm: 32; } 88.33% { --dm: 32; } 99.33% { --dm: 38; } 100% { --dm: 38; }
}

/* ---------- 6 · Abschnitte ---------- */
/* Preise */
.rechner { margin-top: 26px; padding: 16px; border-radius: 18px; background: rgb(0 0 0 / .22); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.rechner label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 750; }
.rechner output { font: 800 1.5rem/1 var(--schrift-titel); text-transform: uppercase; color: var(--gelb); }
.rechner input { --h: var(--gelb); margin-top: 8px; }
.rechner-ergebnis { margin-top: 6px; color: var(--chalk); }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 16px; align-items: stretch; }
.karte { container-type: inline-size; position: relative; display: block; padding: 0; background: none; }
.karte > * { position: relative; }
.karte { --fl: var(--papier); color: #14181d; padding: 22px 22px 24px; border-radius: 22px 22px 18px 18px; background: var(--fl); box-shadow: inset 0 4px 0 rgb(255 255 255 / .8), 0 8px 0 rgb(0 0 0 / .22), 0 22px 36px rgb(0 0 0 / .3); transition: translate .3s cubic-bezier(.3, 1.4, .5, 1), outline-color .3s; outline: 4px solid transparent; outline-offset: 3px; }
.karte h3 { font-size: 1.2rem; }
.karte .preis { margin: 10px 0 14px; display: flex; align-items: baseline; gap: 6px; }
.preis-zahl { font: 800 clamp(2.6rem, 5cqw + 1rem, 3.6rem)/1 var(--schrift-titel); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.preis-eh { font: 800 1.5rem/1 var(--schrift-titel); }
.haken { display: grid; gap: 8px; font-size: .96rem; }
.haken li { position: relative; padding-left: 26px; }
.haken li::before { content: ""; position: absolute; left: 0; top: .4em; width: 14px; height: 8px; border-left: 3px solid #0a8a4a; border-bottom: 3px solid #0a8a4a; rotate: -48deg; }
.karte-band { position: absolute; top: -13px; right: 18px; padding: 5px 14px; border-radius: 10px; background: var(--pink); color: var(--on-accent); font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 0 rgb(0 0 0 / .25); }
.karte--tag { --fl: var(--chalk); } .karte--zehner { --fl: var(--gelb); } .karte--monat { --fl: #b8f5c9; } .karte--jahr { --fl: #bdf2f5; }
.karten[data-beste="tag"] .karte--tag, .karten[data-beste="zehner"] .karte--zehner, .karten[data-beste="monat"] .karte--monat, .karten[data-beste="jahr"] .karte--jahr { translate: 0 -8px; outline-color: var(--chalk); }
@container (max-width: 250px) { .karte .haken { font-size: .9rem; } }
@container (min-width: 300px) { .karte .preis { margin-block: 8px 16px; } .haken { grid-template-columns: 1fr; font-size: 1rem; } }
.zusatz { grid-column: 1 / -1; color: var(--muted); font-size: .94rem; }

/* Zeiten und Anfahrt */
.pille { display: inline-block; margin-top: 14px; padding: 8px 16px; border-radius: 999px; background: rgb(255 255 255 / .12); font-weight: 800; font-size: .95rem; }
.pille.ist-offen { background: var(--gruen); color: #07220f; }
.pille.ist-zu { background: #3b4450; }
.zeiten-liste { margin-top: 18px; display: grid; gap: 6px; }
.zeiten-liste > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgb(255 255 255 / .06); }
.zeiten-liste dt { color: var(--muted); }
.zeiten-liste dd { margin: 0; font-weight: 800; white-space: nowrap; }
.zeiten-liste > div.ist-heute { background: color-mix(in srgb, var(--gruen) 24%, transparent); box-shadow: inset 0 0 0 2px var(--gruen); }
.zeiten-liste > div.ist-heute dt { color: var(--chalk); }
.karte-bild { margin: 0; }
.karte-bild svg { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 20px 36px rgb(0 0 0 / .4), 0 0 0 1px rgb(255 255 255 / .1); }
.kk-t { font: 700 12px var(--schrift); fill: #cbd2d9; } .kk-t--hell { fill: var(--chalk); font-size: 14px; letter-spacing: .06em; }
.anfahrt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.anfahrt-karte { container-type: inline-size; padding: 18px 18px 20px; border-radius: 18px; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.anfahrt-karte h3 { color: var(--gruen); margin-bottom: 6px; }
.anfahrt-karte p { color: var(--muted); font-size: .96rem; }
@container (min-width: 380px) { .anfahrt-karte p { font-size: 1.02rem; } }
.anschrift { grid-column: 1 / -1; font-style: normal; font-size: 1.05rem; padding: 14px 18px; border-radius: 16px; background: rgb(0 0 0 / .25); }
.zeiten-inhalt { min-width: 0; }

/* Kurse */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip { position: relative; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgb(255 255 255 / .1); font-weight: 750; border: 2px solid transparent; transition: background-color .2s, border-color .2s; }
.chip:hover span { background: rgb(255 255 255 / .16); }
.chip:has(input:checked) span { background: var(--orange); color: #1b0d03; }
.chip:has(input:focus-visible) span { outline: 3px solid var(--chalk); outline-offset: 2px; }
.kurs-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.kurs { container-type: inline-size; padding: 18px 18px 20px; border-radius: 20px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.kurs-kopf { display: flex; align-items: center; gap: 12px; }
.kurs-farbe { flex: none; width: 34px; height: 22px; border-radius: 9px 9px 7px 7px; background: var(--h); box-shadow: inset 0 3px 0 rgb(255 255 255 / .4), 0 3px 0 color-mix(in srgb, var(--h) 50%, black); }
.kurs p { margin-top: 8px; color: var(--muted); font-size: .96rem; }
.kurs-daten { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; color: var(--chalk) !important; font-weight: 650; }
.kurs-daten strong { margin-left: auto; font: 800 1.5rem/1 var(--schrift-titel); text-transform: uppercase; color: var(--orange); }
.kurs--geburtstag { grid-column: 1 / -1; background: color-mix(in srgb, var(--gruen) 18%, transparent); box-shadow: inset 0 0 0 2px var(--gruen); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
@container (min-width: 520px) { .kurs--geburtstag .bild-platzhalter { margin-top: 0; } }
.kurs--geburtstag .kurs-daten strong { color: var(--gruen); }
@container (max-width: 240px) { .kurs-daten strong { margin-left: 0; } }
/* Filter ohne JavaScript: :has() */
html:not(.js) .kurse:has(input[value="einsteiger"]:checked) .kurs:not([data-art~="einsteiger"]),
html:not(.js) .kurse:has(input[value="training"]:checked) .kurs:not([data-art~="training"]),
html:not(.js) .kurse:has(input[value="kinder"]:checked) .kurs:not([data-art~="kinder"]) { display: none; }
/* Filter mit JavaScript: Attribut am Container, in einer View Transition gesetzt */
.kurs-liste[data-filter="einsteiger"] .kurs:not([data-art~="einsteiger"]),
.kurs-liste[data-filter="training"] .kurs:not([data-art~="training"]),
.kurs-liste[data-filter="kinder"] .kurs:not([data-art~="kinder"]) { display: none; }
::view-transition-group(root) { animation-duration: 0s; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, .9, .3, 1); }
.bild-platzhalter { display: grid; align-content: end; margin: 14px 0 0; min-height: 190px; border: 3px dashed currentColor; border-radius: 18px; background: rgb(255 255 255 / .08); }
.bild-platzhalter--klein { min-height: 150px; }
.bild-platzhalter--hell { color: #1b0d03; background: rgb(255 255 255 / .22); margin-top: 22px; min-height: 230px; }
.bild-platzhalter figcaption { margin: 12px; padding: 8px 12px; border-radius: 10px; background: rgb(255 255 255 / .95); color: #1d1d1d; font-size: .8rem; font-weight: 700; line-height: 1.35; }

/* Stimmen und Zahlen */
.stimmen-inhalt { display: grid; gap: 28px; min-width: 0; }
.zitate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 8px 0; }
.zitat { container-type: inline-size; rotate: var(--r, 0deg); padding: 24px 20px 20px; border-radius: 6px; background: var(--papier); color: #1a1f26; box-shadow: 0 14px 26px rgb(0 0 0 / .22); position: relative; }
.zitat::before { content: ""; position: absolute; left: 50%; top: -12px; width: 76px; height: 24px; translate: -50% 0; rotate: -3deg; background: color-mix(in srgb, var(--violett) 55%, white); opacity: .85; }
.zitat:nth-child(2)::before { background: color-mix(in srgb, var(--pink) 55%, white); }
.zitat:nth-child(3)::before { background: color-mix(in srgb, var(--tuerkis) 60%, white); }
.zitat blockquote { margin: 0; }
.zitat p { font-size: 1.04rem; line-height: 1.5; }
.zitat footer { margin-top: 14px; font-weight: 750; font-size: .9rem; color: #46505b; }
@container (max-width: 240px) { .zitat p { font-size: .96rem; } }
.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.zahl { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 4px; padding: 16px 18px 18px; border-radius: 18px 18px 14px 14px; color: #0f1318; box-shadow: inset 0 3px 0 rgb(255 255 255 / .5), 0 5px 0 rgb(0 0 0 / .2); }
.zahl:nth-child(1) { background: var(--pink); } .zahl:nth-child(2) { background: var(--tuerkis); } .zahl:nth-child(3) { background: var(--gelb); } .zahl:nth-child(4) { background: var(--gruen); }
.zahl-wert { font: 800 clamp(2.4rem, 3.6vw, 3.6rem)/1 var(--schrift-titel); font-variant-numeric: tabular-nums; }
.zahl-eh { font: 800 1.5rem/1 var(--schrift-titel); }
.zahl-text { grid-column: 1 / -1; font-weight: 700; font-size: .92rem; line-height: 1.25; margin-top: 4px; }

/* Jobs */
.jobs-inhalt { display: grid; gap: 22px; min-width: 0; }
.stellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.stelle { --muted: #b4bcc6; container-type: inline-size; padding: 18px 18px 20px; border-radius: 20px; background: #14181d; color: var(--chalk); box-shadow: 0 8px 0 rgb(0 0 0 / .2); }
.stelle h3 { font-size: 1.25rem; color: var(--orange); }
.stelle-art { margin-top: 4px; font-size: .84rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stelle p:last-child { margin-top: 10px; font-size: .98rem; color: #d6dae0; }
@container (min-width: 360px) { .stelle p:last-child { font-size: 1.04rem; } }
.stellen .klein { grid-column: 1 / -1; color: var(--muted); }
.jobs .klein { color: #3d200c; }
.bewerben { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px 28px; padding: 22px; border-radius: 22px; background: rgb(255 255 255 / .22); }
.bewerben > h3 { grid-column: 1 / -1; font: 800 1.9rem/1 var(--schrift-titel); text-transform: uppercase; }
.bew-schritte { display: grid; gap: 12px; counter-reset: bs; align-content: start; }
.bew-schritte li { counter-increment: bs; position: relative; padding-left: 46px; }
.bew-schritte li::before { content: counter(bs); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #14181d; color: var(--orange); font: 800 1.2rem/1 var(--schrift-titel); }

/* Formulare */
.formular { display: grid; gap: 14px; min-width: 0; }
.feld-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.formular .feld label { display: block; margin-bottom: 6px; font-size: .86rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
input[type="text"], input[type="email"], input[type="date"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 2px solid rgb(255 255 255 / .22);
  background: rgb(255 255 255 / .08); color: var(--chalk); font: inherit; color-scheme: dark;
}
textarea { resize: vertical; min-height: 110px; }
select option { color: #14181d; background: #fff; }
.feld:has(:user-invalid), .haken-feld:has(:user-invalid) { --rahmen: var(--error); }
.feld:has(:user-invalid) input, .feld:has(:user-invalid) textarea { border-color: var(--error); }
.feld:has(:user-invalid)::after { content: "Bitte ausfüllen"; display: block; margin-top: 4px; font-size: .84rem; font-weight: 700; color: var(--error); }
.formular--dunkel { padding: 18px; border-radius: 18px; background: #14181d; color: var(--chalk); --muted: #b4bcc6; }
.haken-feld { display: flex; gap: 12px; align-items: flex-start; font-size: .94rem; color: var(--muted); cursor: pointer; }
.haken-feld input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--pink); }
.haken-feld a { color: var(--chalk); }
.formular-meldung { min-height: 1.4em; font-weight: 750; color: var(--gruen); }
.tel-gross { margin-top: 22px; font: 800 clamp(2.2rem, 3.6vw, 3.4rem)/1 var(--schrift-titel); letter-spacing: .02em; }
.tel-gross a { text-decoration: none; color: var(--tuerkis); }
.tel-gross a:hover { text-decoration: underline; }

/* Fuß */
.fuss { position: relative; z-index: 1; background: var(--wand-tief); border-top: 1px solid rgb(255 255 255 / .1); padding-top: clamp(40px, 5vw, 64px); color: var(--muted); }
.fuss-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.fuss p, .fuss address { margin: 0 0 8px; font-style: normal; font-size: .96rem; }
.fuss a { color: var(--chalk); text-underline-offset: 3px; }
.fuss-logo { font: 800 1.9rem/1 var(--schrift-titel); text-transform: uppercase; letter-spacing: .03em; color: var(--chalk); }
.fuss-links { display: flex; gap: 18px; }
.fuss-demo { margin-top: 18px !important; font-size: .84rem !important; max-width: none; }
.fuss-zeile { width: 100%; max-width: none; margin: 0 !important; padding: 22px 20px 26px; text-align: center; font-size: 13px !important; color: #98a1ac; }
.fuss-zeile a { color: #c4cbd3; }

/* ---------- 7 · Auftritte beim Scrollen ---------- */
/* scroll-getrieben: der Auftritt läuft mit dem Scrollen, nicht nach einer Uhr */
@supports ((animation-timeline: view()) and (animation-range: entry 0% entry 50%)) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-bewegung="starr"]) .rein {
      animation: rein-auf linear both; animation-timeline: view(); animation-range: entry 4% entry calc(46% + var(--i, 0) * 7%);
    }
    html:not([data-bewegung="starr"]) .karte { animation-name: karte-auf; transform-origin: 50% 100%; }
    html:not([data-bewegung="starr"]) .zitat { animation-name: zitat-auf; }
    html:not([data-bewegung="starr"]) .zahl { animation-name: zahl-auf; }
    html:not([data-bewegung="starr"]) .karte-bild { animation-name: maske-auf; }
    html:not([data-bewegung="starr"]) .stelle { animation-name: stelle-auf; }
    .karten > :nth-child(2) { --i: 1; } .karten > :nth-child(3) { --i: 2; } .karten > :nth-child(4) { --i: 3; }
    .zitate > :nth-child(2), .zahlen > :nth-child(2), .anfahrt > :nth-child(2), .stellen > :nth-child(2) { --i: 1; }
    .zitate > :nth-child(3), .zahlen > :nth-child(3), .anfahrt > :nth-child(3), .stellen > :nth-child(3) { --i: 2; }
    .zahlen > :nth-child(4) { --i: 3; }
    /* Routenlinie am linken Rand füllt sich mit der Seite */
    html:not([data-bewegung="starr"]) .route-linie i { animation: route-fuell linear both; animation-timeline: scroll(root); }
    /* Deko-Griffe schweben mit dem Scrollen (nur Stufe dynamisch) */
    html[data-bewegung="dynamisch"] .deko-gr { animation: schweb linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes rein-auf { from { opacity: 0; transform: translateY(46px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes karte-auf { from { opacity: 0; transform: perspective(900px) rotateX(-22deg) translateY(44px); } to { opacity: 1; transform: none; } }
@keyframes zitat-auf { from { opacity: 0; transform: translateY(50px) rotate(4deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes zahl-auf { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes maske-auf { from { opacity: 1; clip-path: inset(0 100% 0 0 round 22px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 22px); } }
@keyframes stelle-auf { from { opacity: 0; transform: translateY(40px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes route-fuell { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes schweb { from { transform: translateY(70px); } to { transform: translateY(-70px); } }

/* Rückfall: kein scroll-getriebenes CSS, dann übernimmt JavaScript (html.rein-io) */
html.rein-io .rein { opacity: 0; transform: translateY(34px); transition: opacity .55s ease, transform .6s cubic-bezier(.2, .9, .3, 1.1); transition-delay: calc(var(--i, 0) * 70ms); }
html.rein-io .rein.ist-da { opacity: 1; transform: none; }

/* ---------- 8 · Bewegungsstufen ---------- */
html[data-bewegung="starr"] *, html[data-bewegung="starr"] *::before, html[data-bewegung="starr"] *::after { animation: none !important; transition: none !important; }
html[data-bewegung="starr"] { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 9 · Handy und schmale Fenster ---------- */
@media (max-width: 1180px) {
  .anfahrt { grid-template-columns: minmax(0, 1fr); }
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zitate { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .bewerben { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .start-raster, .bl-raster, .seg-raster--kopf-links, .seg-raster--kopf-rechts { grid-template-columns: minmax(0, 1fr); }
  .seg-raster--kopf-rechts > .seg-kopf { order: 0; }
  .seg-kopf { position: static; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bl-szene { position: static; order: -1; }
  .anzeige { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wand-rahmen { width: min(100%, 560px); }
  .zitate { max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
}
@media (max-width: 760px) {
  :root { --route-b: 0px; --links: var(--rand); --leiste: 62px; --kopf: 56px; }
  .nur-pc { display: none; }
  .kopf { left: 0; padding: 0 var(--rand); }
  .logo svg { width: 38px; height: 32px; }
  .logo-text strong { font-size: 1.3rem; }
  .logo-text small { display: none; }
  .kopf-tel-text { display: none; }
  .kopf-tel { justify-content: center; min-width: 44px; border-radius: 50%; background: rgb(255 255 255 / .1); }
  .kopf-tel svg { width: 22px; height: 22px; }
  /* Die Route wird zur Leiste unten */
  .route { left: 0; right: 0; top: auto; bottom: 0; translate: none; width: auto; height: var(--leiste); padding: 0 8px; border-radius: 0; background: color-mix(in srgb, var(--wand-tief) 94%, transparent); box-shadow: 0 -1px 0 rgb(255 255 255 / .12); }
  .route-liste { flex-direction: row; justify-content: space-between; gap: 0; height: 100%; align-items: center; }
  .route-liste li { flex: 1 1 0; min-width: 0; }
  .route-liste li .gr-nav { translate: 0 !important; min-height: 48px; }
  .gr-nav svg { width: 40px; height: 34px; }
  .gr-nr { display: none; }
  .route-linie { left: 8px; right: 8px; top: 0; bottom: auto; width: auto; height: 4px; translate: none; border-radius: 0; }
  .route-linie i { transform-origin: 0 50%; transform: scaleX(var(--fort)); }
  .gr-nav::after { left: 50%; top: auto; bottom: calc(100% + 10px); translate: -50% 6px; }
  .gr-nav:hover::after, .gr-nav:focus-visible::after, .gr-nav.zeigt::after { translate: -50% 0; animation-name: tipp-oben; }
  @keyframes tipp-oben { from { opacity: 0; translate: -50% 6px; } to { opacity: 1; translate: -50% 0; } }
  .route-liste li:first-child .gr-nav::after { left: 0; } .route-liste li:first-child .gr-nav.zeigt::after, .route-liste li:first-child .gr-nav:hover::after { translate: 0 0; animation-name: tipp-rand; }
  .route-liste li:last-child .gr-nav::after { left: auto; right: 0; } .route-liste li:last-child .gr-nav.zeigt::after, .route-liste li:last-child .gr-nav:hover::after { translate: 0 0; animation-name: tipp-rand; }
  @keyframes tipp-rand { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
  .staub-feld { top: 50%; left: 0; }
  @keyframes route-fuell { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  /* Erster Bildschirm: Titel, Wand, dann die Bedienung */
  .start-text { display: contents; }
  .start { padding-top: calc(var(--kopf) + 14px); }
  .start-text .kicker { order: 1; margin-bottom: 0; }
  .start-text h1 { order: 1; }
  .start-text > .lead { order: 1; display: none; }
  .start-buehne { order: 2; }
  .steuerung { order: 3; }
  .hinweis--ohne-js { order: 3; }
  .start-raster { gap: 12px; }
  .buehne-kopf { padding-left: 92px; }
  .neigung-bild { width: 84px; height: 64px; }
  .farben { gap: 6px; }
  .farbe-wahl { height: 50px; }
  .farbe-wahl svg { width: 42px; height: 36px; }
  .arten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-wahl { grid-template-columns: auto 1fr; padding: 4px 10px; }
  .a-kachel dd { font-size: 1.6rem; }
  /* Klebender Abschnitt: Szene oben, Schritt darunter */
  html.bl-an .bl-karte { padding-block: calc(var(--kopf) + 6px) calc(var(--leiste) + 8px); }
  html.bl-an .bl-raster { gap: 8px; align-content: start; }
  html.bl-an .bl-szene { order: -1; }
  html.bl-an .bl-fenster { width: min(100%, calc((100dvh - var(--kopf) - var(--leiste) - 250px) * 400 / 368)); }
  html.bl-an .bl-text .kicker, html.bl-an .bl-text .lead { display: none; }
  html.bl-an .bl-text h2 { font-size: 1.9rem; }
  html.bl-an .bl-schritt:not(.ist-aktiv) { display: none; }
  html.bl-an .bl-schritte { margin-top: 8px; }
  html.bl-an .bl-punkte { justify-content: center; margin-top: 0; }
  .bl-hoehe { left: 8px; top: 8px; padding: 4px 10px 6px; --hz: 1.6rem; }
  .karten { grid-template-columns: minmax(0, 1fr); }
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zahl { padding: 12px 14px 14px; }
  .bewerben { padding: 16px; }
  .kurs-liste { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .deko .deko-gr { width: 84px !important; left: auto !important; right: 12% !important; }
}
@media (max-width: 420px) {
  .legende-wert { font-size: .95rem; }
  .farben { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .knoepfe .knopf { flex: 1 1 100%; }
}