.einstieg-fahrt { position: relative; }
.einstieg-buehne { display: none; }

.einstieg-fahrt.aktiv {
  z-index: 4;               
  height: 230svh;
  background: #101315;
  
  overflow: clip;
}
.einstieg-fahrt.aktiv .einstieg-buehne {
  display: block;
  position: sticky; top: 0;
  height: 100svh;
  margin-bottom: -100svh;
  overflow: clip;
}
.einstieg-bild {
  
  position: absolute; inset: 0 0 0 34%;
  transform-origin: 0 0;
  will-change: transform;
}
.einstieg-bild::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 34%;
  background: linear-gradient(90deg, #101315, rgb(16 19 21 / 0));
  opacity: calc(1 - var(--k, 0));
}
.einstieg-bild :is(img, video) {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 45% 50%;
}

.einstieg-bild img { position: absolute; inset: 0; }
.einstieg-bild video { position: relative; opacity: 0; }
.einstieg-fahrt.bereit .einstieg-bild video {
  opacity: 1;
  transition: opacity 1.4s var(--expo);
}

.einstieg-fahrt.aktiv .einstieg-buehne { background: #101315; }
.einstieg-fahrt.aktiv.offen { background: transparent; }
.einstieg-bild :is(img, video) {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 50%;
}


html:has(.einstieg-fahrt.aktiv) .strecke.webgl { margin-top: -180svh; }
.einstieg-fahrt.aktiv.geschnitten { background: transparent; }
.einstieg-fahrt.aktiv.geschnitten .einstieg-buehne { visibility: hidden; }

.einstieg-fahrt.aktiv.geschnitten .einstieg { opacity: 0; pointer-events: none; }
.einstieg-fahrt.aktiv.geschnitten .einstieg > :not(h1) { visibility: hidden; }


html:has(.einstieg-fahrt.aktiv) .einstieg {
  position: sticky; top: 0;
  background: none;
}
html:has(.einstieg-fahrt.aktiv) .einstieg::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #101315 0%, rgb(16 19 21 / .9) 24%,
    rgb(16 19 21 / .4) 44%, rgb(16 19 21 / 0) 60%);
  opacity: calc(1 - var(--raus, 0));
}

html:not(.ruhe) .einstieg-fahrt.aktiv .t-ansage.zerlegt .w > span {
  transform: translateY(calc(112% * var(--raus, 0)));
}
.einstieg-fahrt.aktiv :is(.t-lead, .einstieg-aktion, .einstieg-marke) {
  clip-path: inset(0 0 calc(100% * var(--raus, 0)) 0);
}


.einstieg-status {
  position: absolute; right: var(--rand); bottom: 2.2rem;
  color: var(--grau);
  
  padding: .45em .7em; background: color-mix(in srgb, var(--ink) 92%, transparent);
}
.einstieg-status b { font-weight: inherit; color: var(--hell); }
.einstieg-status::before {
  content: ''; display: inline-block; width: .5em; height: .5em;
  margin-right: .7em; background: var(--linie);
}
.einstieg-status.an b { color: var(--volt); }
.einstieg-status.an::before { background: var(--volt); }

@media (max-width: 860px) {
  html:has(.einstieg-fahrt.aktiv) .einstieg::before {
    background: linear-gradient(to bottom, rgb(16 19 21 / 0) 0%,
      rgb(16 19 21 / 0) 30%, rgb(16 19 21 / .9) 50%, #101315 60%);
  }
  .einstieg-status { top: 5.2rem; bottom: auto; }
  html:has(.einstieg-fahrt.aktiv) .strecke.webgl { margin-top: -102svh; }
  
  .einstieg-bild { inset: 0; }
  .einstieg-bild::after { display: none; }
  .einstieg-bild :is(img, video) { height: 58svh; object-position: 70% 50%; }
}

html.ruhe .einstieg-fahrt.aktiv { height: auto; }
html.ruhe .einstieg-bild video { transition: none; }


.zaehler {
  position: fixed; right: var(--rand); bottom: 2.2rem; z-index: 6;
  display: flex; align-items: baseline; gap: .8em;
  color: var(--grau);
  pointer-events: none;
  clip-path: inset(0 0 0 100%);
  transition: clip-path .6s var(--expo);
  
  padding: .45em .7em; background: color-mix(in srgb, var(--ink) 92%, transparent);
}
.zaehler.da { clip-path: inset(0 0 0 0); }
.z-nr { display: inline-flex; color: var(--volt); font-variant-numeric: tabular-nums; }
html[data-lesart="job"] .z-nr { color: var(--bernstein); }
.z-rolle { display: inline-block; height: 1.2em; line-height: 1.2em; overflow: hidden; }
.z-rolle span {
  display: block; height: 1.2em;
  transform: translateY(calc(var(--n, 0) * -1.2em));
  transition: transform .7s var(--expo);
}
.z-rolle + .z-rolle span { transition-delay: .06s; }
.z-marke { color: var(--hell); clip-path: inset(0 100% 0 0); }
.z-marke.neu { clip-path: inset(0 0 0 0); transition: clip-path .5s var(--expo) .12s; }

@media (max-width: 860px) {
  .zaehler { top: 5.2rem; bottom: auto; left: var(--rand); justify-content: flex-end; white-space: nowrap; }
  .zaehler { left: auto; }
}

html.ruhe .zaehler { display: none; }
@media (prefers-reduced-motion: reduce) {
  .zaehler { display: none; }
}




.strecke.film .strecke-buehne .rack-leinwand {
  -webkit-clip-path: var(--rack-iris, inset(0 var(--rack-verdeckung, 100%) 0 0));
  clip-path: var(--rack-iris, inset(0 var(--rack-verdeckung, 100%) 0 0));
  transform-origin: var(--rack-ursprung, 34% 50%);
  transform: var(--rack-fahrt, scale(calc(1 + var(--schlag-zoom, 0) * .5)));
}

.strecke.film .film-bild:last-of-type { clip-path: var(--film-iris, none); }

.strecke.film .film-halt { width: 58%; object-position: 90% 50%; }
@media (max-width: 860px) {
  .strecke.film .film-halt { width: 100%; height: 52%; }
}

.strecke.film .film-buehne {
  transform-origin: var(--film-ursprung, var(--schlag-x, 50%) var(--schlag-y, 50%));
  transform: var(--film-fahrt, scale(calc(1 + var(--schlag-zoom, 0))) translateX(var(--schlag-schieben, 0%)));
}


.wechsel-marke { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wechsel-marke::before, .wechsel-marke::after { content: ""; position: absolute; inset: 0; }
.wechsel-marke::before { background: #14663A; clip-path: var(--ring-a, inset(50%)); }
.wechsel-marke::after { background: #E7E2D7; clip-path: var(--ring-b, inset(50%)); }
html.ruhe .strecke-marke { display: none; }


.wechsel-foto { display: none; }
.wechsel-still { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #0B0F14; }
.wechsel-still img { display: block; width: 100%; height: 100%; object-fit: cover; }

.wechsel-still-kasten {
  position: absolute; left: 39.2%; top: 61%;
  width: 6.25%; aspect-ratio: 1; translate: -50% -50%;   
  border: 2px solid #14663A; outline: 1px solid #E7E2D7; outline-offset: -3px;
}
.abbinder-blatt { display: contents; }
html.ruhe .wechsel .abbinder { clip-path: none !important; }


html:not(.ruhe) .wechsel.aktiv {
  position: relative; z-index: 3;
  height: 600vh; margin-top: -100vh;
}

html[data-lesart="kunde"]:not(.ruhe) .wechsel.aktiv:has(+ .plansatz.aktiv) { margin-bottom: -200vh; }
html:not(.ruhe) .wechsel.aktiv .wechsel-buehne {
  position: sticky; top: 0; height: 100vh; overflow: clip;
  background: #E7E2D7;               
}
html[data-lesart="kunde"]:not(.ruhe) .wechsel.aktiv:has(+ .plansatz.aktiv) .wechsel-buehne { background: transparent; }

html:not(.ruhe) .wechsel.aktiv:not(.steht) .wechsel-buehne { visibility: hidden; }

html:not(.ruhe) .wechsel.aktiv:not(.steht) .abbinder-weg { visibility: visible; }
html:not(.ruhe) .wechsel.aktiv .wechsel-still { display: none; }
html:not(.ruhe) .wechsel.aktiv .wechsel-foto { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wechsel-bild { position: absolute; inset: 0; overflow: hidden; background: #0B0F14; }
.wechsel-fahrt { clip-path: var(--bild-clip, inset(0)); }

.wechsel-halt {
  position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 50%;
  object-fit: cover; object-position: 40% 50%; opacity: 0; pointer-events: none;
}
.wechsel-luft { clip-path: inset(50%); }
.wechsel-bild video {
  position: absolute; inset: 0; width: 100%; height: 100%;   
  object-fit: cover; transform-origin: 0 0; will-change: transform;
}

html:not(.ruhe) .wechsel.aktiv .abbinder {
  position: absolute; inset: 0; z-index: 4;
  display: block; min-height: 0; padding: 0; border: 0;
  background: transparent; pointer-events: none;
}
html:not(.ruhe) .wechsel.aktiv .abbinder-blatt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem;
  position: absolute; left: var(--rand); top: 14vh; width: min(46vw, 640px);
  padding: clamp(20px, 2.4vw, 36px);
  background: var(--ink); color: var(--hell);
  border-top: 2px solid var(--hell);
  clip-path: var(--blatt-clip, inset(0 100% 0 0));
  pointer-events: auto;
}
html:not(.ruhe) .wechsel.aktiv .abbinder .t-titel { border-left: 0; padding-left: 0; margin: 0; max-width: 22ch; }
@media (max-width: 860px) {
  html:not(.ruhe) .wechsel.aktiv .abbinder-blatt { left: 16px; right: 16px; top: 76px; width: auto; }
}
.wechsel.aktiv .abbinder .zerlegt .w {
  display: inline-block; overflow: clip; overflow-clip-margin: .14em; vertical-align: top;
}
html:not(.ruhe) .wechsel.aktiv .abbinder .zerlegt .w > span {
  display: inline-block;
  animation: none;
  translate: 0 calc(110% * (1 - min(1, max(0, var(--w, 0) - var(--i)))));
}
html:not(.ruhe) .wechsel.aktiv .abbinder-weg { clip-path: inset(0 100% 0 0); }

html:not(.ruhe) .wechsel.aktiv .abbinder-weg:not(:hover, :focus-visible) { background: var(--ink); }
html:not(.ruhe) .wechsel.aktiv.fertig .abbinder-weg {
  clip-path: inset(0 0 0 0);
  transition: clip-path .7s var(--expo);
}