/* KI-Seibel · Schauseite „Drohnenflug“
   Laut ist nur der Film: ein Flug in elf Etappen, den das Scrollen spult. Alles andere ist Schrift auf dem Bild
   und dunkles Glas darunter. Farben: Nacht trägt · Tinte spricht · Eis zeigt · Blau ist die Marke (Laufstreifen) ·
   Natrium ist NUR der Hauptknopf.
   Bewegungsregeln: bewegt werden nur transform und opacity, nie „transition: all“, Hover nur mit Maus. */
@font-face { font-family: "Archivo"; font-weight: 500; font-display: swap; src: url("../schriften/Archivo-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url("../schriften/Archivo-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-display: swap; src: url("../schriften/Archivo-800-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../schriften/IBMPlexMono-500-latin.woff2") format("woff2"); }

:root {
  --nacht: #03050b; --tinte: #f4f6fb; --leise: #b9c1d6; --blau: #0045fb; --blau-hell: #5b8cff; --eis: #8fdcff;
  --natrium: #f2a43a; --gut: #63e6a1;
  --glas: rgba(4, 8, 17, .78); --kante: rgba(143, 220, 255, .24);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --rand: clamp(1.1rem, 4.5vw, 4.5rem); --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--nacht); }
body { margin: 0; color: var(--tinte); font: 500 1.0625rem/1.55 "Archivo", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--eis); outline-offset: 3px; border-radius: 3px; }
.sprung { position: fixed; left: 1rem; top: 1rem; z-index: 50; background: var(--tinte); color: var(--nacht); padding: .6rem 1rem; border-radius: 4px; transform: translateY(-6rem); }
.sprung:focus { transform: none; }

/* ── Bühne: der Film steht fest hinter der Seite ─────────────── */
.buehne { position: fixed; inset: 0; height: 100lvh; z-index: 0; overflow: hidden; background: var(--nacht); }
.film { position: absolute; inset: 0; will-change: transform; }
.lage { position: absolute; inset: 0; opacity: 0; }   /* harter Schnitt an der Naht: die Nähte sind pixelgleich (gemessen 12.11.2026) */
.lage.an { opacity: 1; }
.lage img, .lage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50%) 50%; max-width: none; }   /* am Telefon: der Ausschnitt um --fokus */
.lage video { opacity: 0; }                                     /* nie überblenden: sonst liegen Standbild und Video übereinander */
.lage.malt video { opacity: 1; }
.lage video.neu { opacity: 0 !important; }                             /* scharfe Fassung, noch nicht getauscht */                                                         /* bis das Video malt, steht das Poster */
/* Tempo: ein Hauch Unschärfe zum Rand, nur solange schnell gescrollt wird (flug.js setzt opacity) */
.tempo { position: absolute; inset: 0; opacity: 0; visibility: hidden; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 38%, #000 96%); mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 38%, #000 96%); }
.tempo.an { visibility: visible; }
.schleier { position: absolute; inset: 0; background: linear-gradient(rgba(3,5,11,.5), rgba(3,5,11,0) 20%, rgba(3,5,11,0) 62%, rgba(3,5,11,.46)); }
.ruhe { position: absolute; inset: 0; background: var(--nacht); opacity: 0; }            /* dunkelt den Film ab, sobald die Inhalte kommen */

/* ── Kopf und Knöpfe ──────────────────────────────────────────── */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; gap: 1.2rem; padding: .7rem var(--rand); background: rgba(3,5,11,.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.07); }
.kopf .marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .95rem; }
.kopf .marke img { width: 44px; height: auto; }
.navi { margin-left: auto; display: flex; gap: 1.3rem; }
.navi a { text-decoration: none; font-size: .93rem; color: var(--leise); }
.kopf .marke, .navi a, .halt, .knopf.klein { white-space: nowrap; }
.halt { font-size: .85rem; color: var(--leise); background: none; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .4rem .8rem; cursor: pointer; }
.halt[aria-pressed="true"] { color: var(--tinte); border-color: var(--eis); }
/* Login oben (Davids Wort 12.11.2026): bleibt auch am Telefon sichtbar, führt zur Anmeldung der KI-Potenzialanalyse */
.anmelden { display: inline-flex; align-items: center; gap: .4rem; padding: .7rem .15rem; font-size: .93rem; color: var(--tinte); text-decoration: none; white-space: nowrap; }
.anmelden svg { width: 1rem; height: 1rem; flex: none; }
.knopf { display: inline-flex; align-items: center; justify-content: center; padding: .95rem 1.45rem; border-radius: 4px; text-decoration: none; font-weight: 600; color: #130b00; background: var(--natrium);
  box-shadow: 0 0 0 1px rgba(242,164,58,.5), 0 14px 44px -12px rgba(242,164,58,.75), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .16s var(--ease-out); }
.knopf:active { transform: scale(.97); }
.knopf.leise { color: var(--tinte); background: rgba(4,8,17,.6); box-shadow: 0 0 0 1px var(--kante); }
.knopf.klein { padding: .6rem 1rem; font-size: .92rem; }
.knopf.gross { padding: 1.2rem 2.1rem; font-size: 1.15rem; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; }
@media (hover: hover) and (pointer: fine) {
  .navi a:hover, .halt:hover { color: var(--tinte); }
  .anmelden:hover { color: var(--eis); }
  .knopf:hover { background: #ffb650; transform: translateY(-1px); }
  .knopf.leise:hover { background: rgba(10,18,36,.8); box-shadow: 0 0 0 1px var(--eis); }
  .fuss a:hover, .satz a:hover, .zusage a:hover { text-decoration-thickness: 2px; }
}

/* ── Der Flug: elf Etappen, jede ein Stück Scrollweg (lange Clips bekommen mehr Weg) ── */
main { position: relative; z-index: 2; }
.etappe { position: relative; }
.js .etappe { height: 260svh; }
.js .etappe.kurz { height: 220svh; }
.js .etappe.lang { height: 380svh; }
.js .etappe.held { height: 240svh; }
.js .etappe.schlussbild { height: 300svh; display: grid; align-items: end; }

/* Etappe 1: Mission und Leitsatz, direkt darunter die zwei Laufstreifen, zusammen genau ein Schirm */
.held-schirm { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); }
.streifen-block { min-width: 0; }
.held-links { align-self: end; display: grid; justify-items: start; gap: 1.25rem; max-width: 64rem; padding: 5.6rem var(--rand) clamp(1.4rem, 3.5vh, 2.6rem); position: relative; }
.held-links::before { content: ""; position: absolute; inset: -3rem 0 0 0; z-index: -1; background: radial-gradient(105% 105% at 0% 100%, rgba(3,5,11,.9), rgba(3,5,11,.66) 50%, rgba(3,5,11,0) 80%); pointer-events: none; }   /* nie breiter als der Schirm: sonst weitet das Telefon die Seite */
.mission { font-size: clamp(.98rem, 1.15vw, 1.12rem); color: #f4f6fb; text-shadow: 0 1px 14px rgba(3,5,11,.9); padding: .45rem .9rem; border-left: 2px solid var(--eis); border-radius: 0 8px 8px 0; background: rgba(3,5,11,.5); max-width: 35rem; }
.mission b { font-weight: 800; color: var(--eis); }
.held h1 { font-weight: 800; font-size: clamp(2.4rem, 5.2vw, 4.9rem); line-height: .96; letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 2px 40px rgba(3,5,11,.7); }
.held-text { max-width: 36rem; font-size: clamp(1.02rem, 1.2vw, 1.2rem); color: #f4f6fb; text-shadow: 0 1px 14px rgba(3,5,11,.9); }
.belege { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: .95rem; color: #f4f6fb; text-shadow: 0 1px 12px rgba(3,5,11,.95); }
.belege li { position: relative; padding-left: 1.5rem; }
.belege li::before { content: ""; position: absolute; left: 0; top: .42em; width: .8rem; height: .42rem; border: solid var(--eis); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
/* Der eine inszenierte Auftritt der Seite */
.js .held-links > * { animation: auftritt .6s var(--ease-out) both; }
.js .held-links > h1 { animation-delay: .08s; }
.js .held-links > .held-text { animation-delay: .16s; }
.js .held-links > .knoepfe { animation-delay: .22s; }
.js .held-links > .belege { animation-delay: .28s; }
@keyframes auftritt { from { opacity: 0; transform: translateY(12px); } }

/* Zwei Laufstreifen wie auf der Startseite: Leistungen nach links, Marken nach rechts */
.streifen { position: relative; overflow: hidden; overflow: clip; contain: paint; }
.streifen-lauf { display: flex; width: max-content; }
.streifen-lauf > * { flex: none; }
.nach-links { animation: nach-links 40s linear infinite; }
.nach-rechts { animation: nach-rechts 90s linear infinite; }
@media (hover: hover) and (pointer: fine) { .streifen:hover .streifen-lauf { animation-play-state: paused; } }
.streifen:focus-within .streifen-lauf { animation-play-state: paused; }
@keyframes nach-links { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes nach-rechts { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
.streifen-eins { border-block: 1px solid rgba(255,255,255,.14); background: linear-gradient(90deg, rgba(0,69,251,.42), rgba(1,24,70,.84), rgba(0,69,251,.42)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.streifen-eins ul { display: flex; padding: .85rem 0; }
.streifen-eins li { font: 500 .8125rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinte); white-space: nowrap; padding: 0 2.4rem; position: relative; }
.streifen-eins li::after { content: ""; position: absolute; right: -4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--blau-hell); transform: rotate(45deg); box-shadow: 0 0 12px rgba(0,69,251,.9); }
.streifen-marken { background: rgba(3,5,11,.88); padding: .3rem 0 .8rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.streifen-titel { text-align: center; padding: .5rem 0 .25rem; font-size: .9rem; color: var(--leise); }
.streifen-marken .logos { display: flex; align-items: center; gap: clamp(1.8rem, 4vw, 3.6rem); padding-right: clamp(1.8rem, 4vw, 3.6rem); }
.streifen-marken img { height: clamp(46px, 5vw, 70px); width: auto; opacity: .75; transition: opacity .2s linear; }
@media (hover: hover) and (pointer: fine) { .streifen-marken img:hover { opacity: 1; } }

/* Etappen 2 bis 5: ein großer Satz steht im Bild, während die Kamera langsamer wird */
.satz { display: grid; align-content: end; justify-items: start; gap: .9rem; padding: 6rem var(--rand) clamp(3rem, 11vh, 7rem); }
.satz.rechts { justify-items: end; text-align: right; }
.satz h2, .schluss-schirm h2 { font-weight: 800; font-size: clamp(2.1rem, 5.4vw, 5rem); line-height: .98; letter-spacing: -.033em; text-wrap: balance; max-width: 15em; text-shadow: 0 2px 34px rgba(3,5,11,.75), 0 0 2px rgba(3,5,11,.5); }
.satz p, .zusage { font-size: clamp(1.02rem, 1.3vw, 1.3rem); color: #eef2fb; text-shadow: 0 1px 16px rgba(3,5,11,.9); max-width: 34rem; }
.satz a, .zusage a { text-underline-offset: .2em; }
.js .satz { position: fixed; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .32s linear, transform .5s var(--ease-out), visibility 0s linear .32s; }
.js .satz::before { content: ""; position: absolute; inset: 35% 0 0 0; z-index: -1; background: linear-gradient(rgba(3,5,11,0), rgba(3,5,11,.62)); }
.js .etappe.da .satz { opacity: 1; visibility: visible; transform: none; transition: opacity .32s linear, transform .5s var(--ease-out), visibility 0s; }
.js .satz a { pointer-events: auto; }
/* Ziel-Etappen 3 bis 6: der Flug landet auf dem Roboter (rechts im Bild), seine Leuchtlinie läuft nach oben links,
   dort steht der Satz. Der Satz kommt erst, wenn die Kamera angekommen ist. */
.satz.oben { align-content: start; padding-top: clamp(6.5rem, 15vh, 9.5rem); padding-bottom: 3rem; }
.satz.oben h2 { max-width: 11em; font-size: clamp(2rem, 4.6vw, 4.3rem); }
.js .satz.oben::before { inset: 0 30% 40% 0; background: radial-gradient(120% 120% at 0% 0%, rgba(3,5,11,.72), rgba(3,5,11,0) 70%); }
/* Etappe 8, die Halle: über jeder Leuchtlinie ihr Wort. flug.js setzt --x aus der Lage der Linie im Video. */
.marken-linien { display: none; }
.js .marken-linien { display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .4s linear, visibility 0s linear .4s; }
.js .etappe.da .marken-linien { opacity: 1; visibility: visible; transition: opacity .4s linear, visibility 0s; }
.marken-linien li { position: absolute; left: clamp(5.5rem, var(--x, 50%), calc(100% - 5.5rem)); top: clamp(5.5rem, 13vh, 8rem); transform: translateX(-50%); max-width: 11rem; text-align: center;
  font: 600 .8rem/1.25 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #eaffff; padding: .45rem .7rem; border: 1px solid rgba(120,240,255,.55);
  border-radius: 6px; background: rgba(3,12,22,.62); box-shadow: 0 0 18px rgba(80,220,255,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.marken-linien li:nth-child(even) { top: clamp(9rem, 21vh, 12.5rem); }   /* versetzt, damit sich Nachbarn nie berühren */

/* Etappe 6: der Schluss füllt den letzten Schirm des Flugs und scrollt dann ganz normal weiter */
.schluss-schirm { min-height: 100svh; display: grid; align-content: end; justify-items: start; gap: 1.3rem; padding: 6rem var(--rand) clamp(3.5rem, 12vh, 7.5rem); position: relative; }
.schluss-schirm::before { content: ""; position: absolute; inset: 30% 0 0 0; z-index: -1; background: linear-gradient(rgba(3,5,11,0), rgba(3,5,11,.7)); pointer-events: none; }

/* ── Inhalte: alle Aussagen der Startseite, auf dunklem Glas ──── */
.inhalt { position: relative; padding-bottom: 4rem; }
.block { max-width: 78rem; margin-inline: auto; padding: clamp(3.5rem, 9vh, 6.5rem) var(--rand) 0; scroll-margin-top: 3rem; display: grid; gap: 1.6rem; }
.block > h2 { font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.03; letter-spacing: -.028em; text-wrap: balance; max-width: 22ch; }
.einleitung { max-width: 44rem; color: var(--leise); font-size: 1.1rem; }
.kacheln article, .wege article, .zwei article, .weg li, .bereiche details, .fragen details, .eckdaten li {
  background: rgba(6, 10, 20, .74); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .9rem; }
.kacheln article { padding: 1.3rem 1.3rem 1.4rem; display: grid; gap: .6rem; align-content: start; }
.kacheln svg { width: 44px; height: 44px; color: var(--eis); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kacheln svg * { stroke: currentColor; }
.kacheln h3, .wege h3, .zwei h3 { font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; }
.kacheln p, .wege p, .zwei p, .weg span { color: var(--leise); font-size: .99rem; }
.bereiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; align-items: start; }
.bereiche details, .fragen details { padding: 0 1.2rem; }
.bereiche summary, .fragen summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; font-weight: 600; font-size: 1.08rem; position: relative; }
.bereiche summary::-webkit-details-marker, .fragen summary::-webkit-details-marker { display: none; }
.bereiche summary::after, .fragen summary::after { content: "+"; position: absolute; right: 0; top: .8rem; font: 500 1.3rem/1 var(--mono); color: var(--eis); transition: transform .2s var(--ease-out); }
.bereiche details[open] summary::after, .fragen details[open] summary::after { transform: rotate(45deg); }
.bereiche details[open], .fragen details[open] { border-color: var(--kante); }
.bereiche ul { display: grid; gap: .45rem; padding-bottom: 1rem; color: #dfe6f7; }
.bereiche li { position: relative; padding-left: 1.4rem; }
.bereiche li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--eis); }
.bereiche .knopf { margin-bottom: 1.2rem; }
.wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.wege article { padding: 1.4rem; display: grid; gap: .7rem; align-content: start; }
.wegname { font: 500 .88rem/1 var(--mono); color: var(--eis); }
.wege ul { display: grid; gap: .4rem; font-size: .97rem; color: #dfe6f7; }
.wege li { position: relative; padding-left: 1.3rem; }
.wege li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .38rem; border: solid var(--gut); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.weg { counter-reset: schritt; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.weg li { counter-increment: schritt; display: grid; gap: .45rem; align-content: start; padding: 1.2rem; }
.weg li::before { content: counter(schritt); font: 500 .95rem/1 var(--mono); color: var(--eis); }
.weg b { font-weight: 800; font-size: 1.12rem; }
.weg em { font-style: normal; font-size: .88rem; color: #ffc470; margin-top: .2rem; }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.zwei article { padding: 1.4rem; display: grid; gap: .6rem; align-content: start; }
.eckdaten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.eckdaten li { padding: 1rem 1.1rem; display: grid; gap: .25rem; }
.eckdaten b { font-weight: 800; }
.eckdaten span { color: var(--leise); font-size: .92rem; }
.fragen { display: grid; gap: .5rem; max-width: 54rem; }
.fragen .antwort { padding-bottom: 1.1rem; color: #dfe6f7; display: grid; gap: .6rem; }
.fragen a { color: var(--eis); }
.schluss { justify-items: start; padding-bottom: 5rem; }
.klein { font-size: .93rem; color: #e6ecfa; }

.fuss { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; padding: 1.6rem var(--rand) 3rem; background: rgba(3,5,11,.94); font-size: .9rem; color: var(--leise); }
.fuss a { color: var(--tinte); text-underline-offset: .2em; }
.fuss span { flex-basis: 100%; max-width: 60rem; }

/* ── Ohne JavaScript: erstes Bild steht, alle Texte bleiben lesbar ── */
html:not(.js) .halt { display: none; }
html:not(.js) .etappe:not(.held) { min-height: 70svh; display: grid; align-items: end; }
html:not(.js) .inhalt { background: rgba(3,5,11,.9); }

@media (max-width: 1180px) {
  .navi { display: none; }
  .halt { margin-left: auto; }
  .weg { grid-template-columns: 1fr 1fr; }
  .eckdaten { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .kopf { gap: .5rem; padding: .7rem 1rem; }
  .kopf .knopf.klein { padding: .55rem .7rem; font-size: .84rem; }
  .kopf .marke span { display: none; }
  .halt { padding: .4rem .6rem; }
  .halt span { display: none; }
  .halt::before { content: "❚❚"; font-size: .7rem; letter-spacing: .1em; }
  .halt[aria-pressed="true"]::before { content: "▶"; }
  .held-links { padding-top: 5rem; gap: 1rem; }
  .satz.rechts { justify-items: start; text-align: left; }
  .satz.oben { padding-top: 5.5rem; }
  /* Die sechs Wörter der Halle passen hochkant nicht über die Linien: dann als Liste unter dem Satz */
  .js .marken-linien li { position: static; transform: none; display: inline-block; margin: .2rem; max-width: none; font-size: .68rem; padding: .35rem .55rem; }
  .js .marken-linien { top: 4.9rem; bottom: auto; left: var(--rand); right: var(--rand); inset-inline: var(--rand); text-align: left; }
  .bereiche, .wege, .zwei { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .weg, .eckdaten { grid-template-columns: 1fr; }
  .kopf .lang { display: none; }
  .held .knopf, .schluss-schirm .knopf { width: 100%; }
  .knopf.gross { padding: 1.05rem 1rem; font-size: 1.05rem; text-align: center; }
  .held-text { display: none; }                      /* am Telefon tragen Mission, Leitsatz und Knopf den ersten Schirm */
  .belege li + li { display: none; }
}
/* Hinweis aufs seitliche Wischen: nur hochkant, nur kurz */
.wisch-hinweis { display: none; }
@media (max-aspect-ratio: 1/1) {
  .js .wisch-hinweis { display: block; position: fixed; left: 50%; top: 5.2rem; z-index: 3; transform: translate(-50%, -6px); opacity: 0; pointer-events: none;
    font: 600 .8rem/1 var(--mono); letter-spacing: .06em; color: #eaffff; white-space: nowrap; padding: .6rem .95rem; border-radius: 999px;
    border: 1px solid rgba(120,240,255,.5); background: rgba(3,12,22,.66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: opacity .35s linear, transform .5s var(--ease-out); }
  .js .wisch-hinweis.zeigen { opacity: 1; transform: translate(-50%, 0); }
  .wisch-hinweis span { color: var(--eis); font-size: 1.05rem; }
}
/* Halteknopf (WCAG 2.2.2): Laufstreifen und das Schweben des Kopfbilds stehen; gescrollt und gespult wird weiter */
.angehalten .streifen-lauf { animation-play-state: paused; }
/* Weniger Bewegung: Standbilder je Etappe, nichts läuft von selbst, nichts blendet */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .halt { display: none; }
  .lage video, .tempo { display: none; }
  .js .etappe, .js .etappe.held { height: 170svh; }
  .js .etappe.schlussbild { height: 200svh; }
}