/* Film v2, Startseite lorien.group (15.10.2026)
   Drei Akte: die Vorstellung (Smoking, ruhig), die Realitaet (Rallye, Tempo),
   die Antwort (einer daneben, Tempo mit Kontrolle). Baut auf lorien.css auf.

   Grundsatz fuer 60 fps am Handy: animiert werden nur transform und opacity.
   Die Buehnen kleben per position: sticky, das Skript liefert nur den
   Fortschritt. Ohne JavaScript und unter «Bewegung aus» steht dieselbe Seite
   als ruhige Folge von Bildern und Text. */

.film-seite { background: var(--obsidian); color: var(--on-invert); }
html.js { scroll-behavior: auto; }
.film-seite::before { display: none; }          /* Betonrauschen: hier liegt das Filmkorn */

/* ---------- Kopfzeile ueber dem Film ---------- */
.film-seite .nav {
  background: linear-gradient(rgba(22,22,15,.82), rgba(22,22,15,0));
  border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.film-seite .nav__logo, .film-seite .nav__link { color: var(--on-invert); }
.film-seite .nav__tel { color: var(--on-invert-muted); }
.film-seite .nav__tel:hover { color: var(--on-invert); }
.film-seite .nav { transition: background .3s linear; }
.film-seite .nav.nav--hell { background: rgba(252,249,245,.94); border-bottom: 2px solid var(--anthracite); }
.film-seite .nav--hell .nav__logo, .film-seite .nav--hell .nav__link { color: var(--anthracite); }
.film-seite .nav--hell .nav__tel { color: var(--carbon); }
.film-seite .nav--hell .nav__logo img { content: url('/assets/lorien-mark.svg'); }

/* ---------- Gemeinsame Teile ---------- */
.akt { position: relative; background: var(--obsidian); }
.buehne { position: relative; height: 100svh; overflow: hidden; isolation: isolate; }
.buehne__film { position: absolute; inset: 0; overflow: hidden; background: var(--obsidian); }
.buehne__poster, .buehne__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.buehne__video { opacity: 0; transition: opacity .6s linear; }
.buehne__video.laeuft { opacity: 1; }
.buehne__schleier { position: absolute; inset: 0; pointer-events: none; }
.buehne__schleier--links { background: linear-gradient(90deg, rgba(22,22,15,.78) 0%, rgba(22,22,15,.35) 48%, rgba(22,22,15,0) 75%),
                                       linear-gradient(0deg, rgba(22,22,15,.85) 0%, rgba(22,22,15,0) 38%); }
.buehne__schleier--hart  { background: rgba(22,22,15,.42); }
.buehne__schleier--unten { background: linear-gradient(0deg, rgba(22,22,15,.88) 0%, rgba(22,22,15,.25) 55%, rgba(22,22,15,.1) 100%); }

.rand { padding-inline: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left)); }

.akt-marke {
  font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: .72rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--on-invert-muted);
  display: flex; gap: .9rem; align-items: center;
}
.akt-marke span { color: var(--copper); font-weight: 700; letter-spacing: .1em; }
.akt-marke::after { content: ''; width: 48px; height: 1px; background: currentColor; opacity: .5; }

.kicker { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .68rem;
          letter-spacing: .22em; text-transform: uppercase; color: var(--copper-light); }

.zeile-maske { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.zeile-maske > span { display: block; }
.kupfer { color: var(--copper); }

/* Filmkorn ueber allem, bewegt in Stufen wie Projektorkorn */
.korn {
  position: fixed; inset: -50%; z-index: 55; pointer-events: none;
  background: url('/assets/film/korn.webp') repeat; background-size: 160px 160px;
  opacity: 0; transition: opacity .5s linear;
}
.korn.an { opacity: .1; animation: korn 1s steps(8) infinite; }
@keyframes korn {
  0% { transform: translate(0, 0); } 12% { transform: translate(-7%, 4%); }
  25% { transform: translate(5%, -6%); } 37% { transform: translate(-3%, 9%); }
  50% { transform: translate(8%, 2%); } 62% { transform: translate(-9%, -3%); }
  75% { transform: translate(3%, 7%); } 87% { transform: translate(-5%, -8%); }
}

.akt__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= AKT I · DIE VORSTELLUNG ================= */
.v-start, .v-abspann, .v-folge {
  position: absolute; left: 0; right: 0;
  padding-inline: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left));
  max-width: 1320px; margin-inline: auto;
}
.v-start { top: calc(var(--nav-h) + clamp(1rem, 6vh, 5rem)); }
.v-display {
  margin-top: 1.4rem; max-width: none;
  font-family: 'Space Grotesk', sans-serif; font-weight: 300; text-transform: uppercase;
  font-size: clamp(2.7rem, min(9.4vw, 13.5vh), 9.6rem); line-height: .9; letter-spacing: -.035em;
  color: #f6f3ee;
}
.v-unter { margin-top: 1.6rem; font-weight: 300; font-size: clamp(1rem, 1.4vw, 1.2rem);
           color: rgba(246,243,238,.82); max-width: 34ch; letter-spacing: .03em; }
.v-abspann { bottom: clamp(3.4rem, 7vh, 5.5rem); display: grid; gap: .7rem; }
.v-titel {
  font-size: clamp(1.05rem, 1.8vw, 1.5rem); line-height: 1.15; letter-spacing: -.01em;
  max-width: 30ch; font-weight: 500; color: var(--on-invert);
}
.v-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: .6rem; }
.v-weiter, .person__mehr {
  display: inline-flex; align-items: center; gap: .7rem; min-height: 44px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-invert);
}
.v-weiter::after { content: ''; width: 1px; height: 28px; background: var(--copper); }
.v-folge { top: 50%; transform: translateY(-50%); }
.v-satz {
  position: absolute; left: inherit; top: 0; transform: translateY(-50%);
  padding-inline: inherit; left: 0;
  font-family: 'Space Grotesk', sans-serif; font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.9rem, 5.6vw, 5.2rem); line-height: .98; letter-spacing: -.03em;
  max-width: 16ch; color: #f6f3ee;
}

.schnitt { position: absolute; inset: 0; background: var(--obsidian); display: grid; place-items: center start;
           visibility: hidden; }
.schnitt.an { visibility: visible; }
.schnitt__text {
  padding-inline: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left));
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.8rem, 11vw, 11rem); line-height: .88; letter-spacing: -.05em; max-width: 9ch;
  color: #f6f3ee; visibility: hidden;
}
.schnitt.text .schnitt__text { visibility: visible; }

/* ================= AKT II · DIE REALITAET ================= */
.r-kopf { position: absolute; left: 0; top: calc(var(--nav-h) + 1rem);
          padding-inline: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left)); z-index: 3; }
.r-titel {
  margin: .7rem 0 0; max-width: none;
  font-size: clamp(3rem, 13vw, 13rem); line-height: .86; letter-spacing: -.055em; color: #f6f3ee;
}
.instrumente {
  position: absolute; z-index: 3; right: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-right));
  top: calc(var(--nav-h) + 1rem); display: flex; align-items: center; gap: 1.2rem;
}
.drehzahl { width: clamp(84px, 11vw, 150px); height: auto; overflow: visible; }
.drehzahl__skala line { stroke: rgba(246,243,238,.55); stroke-width: 2; }
.drehzahl__skala line.rot { stroke: var(--copper); stroke-width: 3; }
.drehzahl__skala text { fill: rgba(246,243,238,.8); font: 700 15px 'Space Grotesk', sans-serif; text-anchor: middle; }
.drehzahl__skala text.rot { fill: var(--copper); }
.drehzahl__nadel { stroke: var(--copper); stroke-width: 5; stroke-linecap: square; transform: rotate(-120deg); }
.drehzahl__nabe { fill: var(--copper); }
.anzeigen { display: grid; gap: .35rem; font-family: 'Space Grotesk', sans-serif; }
.anzeigen div { display: grid; grid-template-columns: 4.2rem auto; align-items: baseline; }
.anzeigen dt { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-invert-muted); }
.anzeigen dd { font-weight: 700; font-size: clamp(.95rem, 1.6vw, 1.35rem); letter-spacing: -.01em;
               font-variant-numeric: tabular-nums; color: #f6f3ee; min-width: 7.5ch; }
.anzeige-konto.tief { color: var(--copper-light); }

.momente { list-style: none; }
.moment {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-46%);
  padding-inline: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left)); z-index: 4;
}
.moment__wort {
  max-width: none; white-space: nowrap;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(3rem, 15.5vw, 16rem); line-height: .84; letter-spacing: -.045em; color: #f6f3ee;
}
.moment__satz {
  margin-top: 1.2rem; max-width: 30ch;
  font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: clamp(1.05rem, 2vw, 1.6rem);
  line-height: 1.35; color: #f6f3ee;
}

.meldungen { list-style: none; position: absolute; z-index: 5;
             right: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-right));
             bottom: clamp(4.5rem, 10vh, 6.5rem); width: min(22rem, calc(100% - 2.2rem)); height: 0; }
.meldung {
  position: absolute; right: 0; bottom: 0; width: 100%;
  background: rgba(246,243,238,.96); color: var(--anthracite);
  border-left: 4px solid var(--copper);
  padding: .7rem .95rem; font-size: .9rem; line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.meldung b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: .62rem;
             letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .15rem; }

.r-schluss {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 6; max-width: none;
  padding-inline: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left));
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.3rem, 8vw, 8rem); line-height: .9; letter-spacing: -.05em; color: #f6f3ee;
}
.r-dunkel { position: absolute; inset: 0; background: var(--obsidian); opacity: 0; z-index: 5; pointer-events: none; }

/* ================= Die Liste (hell) ================= */
.liste-block { position: relative; z-index: 2; background: var(--stone); color: var(--anthracite);
               padding-block: clamp(4rem, 12vh, 8rem); border-top: 4px solid var(--copper); }
.liste fieldset { border: 0; }
.liste__titel {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.2rem, 7vw, 6.4rem); line-height: .9; letter-spacing: -.05em; max-width: 13ch;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.liste__eintraege { list-style: none; border-top: 2px solid var(--anthracite); }
.liste__eintraege li { border-bottom: 1px solid var(--concrete); }
.liste__eintraege label {
  display: grid; grid-template-columns: 3.2rem 1fr 2.2rem; align-items: center; gap: 1rem;
  min-height: 64px; padding-block: .9rem; cursor: pointer; position: relative;
}
.liste__eintraege input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.liste__nr { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .8rem;
             letter-spacing: .12em; color: var(--iron); }
.liste__txt { font-family: 'Space Grotesk', sans-serif; font-weight: 500;
              font-size: clamp(1.15rem, 2.6vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em; }
.liste__eintraege label::after {
  content: ''; grid-column: 3; justify-self: end; width: 26px; height: 26px;
  border: 2px solid var(--anthracite); background: transparent;
}
.liste__eintraege label:hover .liste__txt { color: var(--accent-text); }
.liste__eintraege input:focus-visible ~ .liste__txt { outline: 2px solid var(--copper); outline-offset: 4px; }
.liste__eintraege input:checked ~ .liste__txt { color: var(--anthracite); }
.liste__eintraege input:checked ~ .liste__nr { color: var(--copper-dim); }
.liste__eintraege label:has(input:checked)::after {
  border-color: var(--copper); background:
    linear-gradient(var(--anthracite), var(--anthracite)) 5px 5px / 5px 12px no-repeat,
    linear-gradient(var(--anthracite), var(--anthracite)) 5px 12px / 12px 5px no-repeat;
}
.liste__notiz { min-height: 1.6em; margin-top: 1.2rem; font-weight: 600; color: var(--accent-text); }
.liste__fuss { margin-top: .4rem; color: var(--carbon); font-size: .95rem; }

/* ================= STILLE und AKT III · DIE ANTWORT ================= */
.fenster { position: absolute; inset: 0; overflow: hidden; transform-origin: 0 0; visibility: hidden; }
.fenster.offen { visibility: visible; }
.fenster__inhalt { position: absolute; inset: 0; transform-origin: 0 0; }

.signet { position: absolute; z-index: 4; left: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left));
          top: 50%; width: var(--signet); height: var(--signet); margin-top: calc(var(--signet) / -2);
          --signet: clamp(96px, 24vmin, 240px); transform-origin: 0 0; opacity: 0; }
.signet__rahmen { position: absolute; inset: 0; border: calc(var(--signet) * 32 / 240) solid var(--copper); }
.signet__winkel { position: absolute; left: calc(var(--signet) * 32 / 240); top: calc(var(--signet) * 32 / 240);
                  width: calc(var(--signet) * 176 / 240); height: calc(var(--signet) * 176 / 240); fill: var(--stone);
                  transform-origin: 0 100%; }

.stille { position: absolute; inset: 0; z-index: 3; }
.stille__satz, .stille__frage {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); max-width: none;
  padding-inline: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left));
  font-family: 'Space Grotesk', sans-serif; text-transform: uppercase; color: #f6f3ee;
}
.stille__satz { font-weight: 300; font-size: clamp(1.7rem, 4.6vw, 4.2rem); line-height: 1; letter-spacing: -.03em; }
.stille__satz--klein { font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: .3em; font-weight: 400; color: var(--on-invert-muted); }
.stille__frage { font-weight: 700; font-size: clamp(2.4rem, 8.4vw, 8.4rem); line-height: .9; letter-spacing: -.05em; max-width: 11ch;
                 top: auto; bottom: calc(50% + var(--signet-hoehe, 120px) / 2 + 1.5rem); transform: none; }

.a-folge { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.a-marke { position: absolute; left: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left));
           top: calc(var(--nav-h) + 1rem); }
.a-satz {
  position: absolute; left: 0; bottom: clamp(5rem, 14vh, 9rem); max-width: 22ch;
  padding-inline: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left));
  font-family: 'Space Grotesk', sans-serif; font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.7rem, 4.6vw, 4.4rem); line-height: .98; letter-spacing: -.035em; color: #f6f3ee;
}
.hoehepunkt {
  position: absolute; left: 0; right: 0; bottom: clamp(4.5rem, 12vh, 8rem); margin: 0; max-width: none;
  padding-inline: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left));
  font-size: clamp(3rem, 11.6vw, 12.5rem); line-height: .86; letter-spacing: -.06em; color: #f6f3ee;
}

/* ================= Der Weg (hell) ================= */
.weg { position: relative; z-index: 2; background: var(--stone); color: var(--anthracite);
       padding-block: clamp(4rem, 12vh, 8rem); }
.weg__vor { font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--carbon); max-width: 44ch; }
.weg__titel { margin: 1rem 0 clamp(2.4rem, 6vw, 4rem); max-width: 18ch;
              font-size: clamp(2rem, 6vw, 5.4rem); line-height: .92; letter-spacing: -.05em; }
.weg__liste { list-style: none; border-top: 2px solid var(--anthracite); }
.weg__zeile { border-bottom: 1px solid var(--concrete); }
.weg__zeile a {
  display: grid; grid-template-columns: 3.4rem 1fr; gap: .4rem 1rem; padding-block: clamp(1.3rem, 3vw, 2.2rem);
  position: relative;
}
@media (min-width: 900px) {
  .weg__zeile a { grid-template-columns: 5rem minmax(0, 22rem) minmax(0, 1fr) 3rem; align-items: baseline; }
  .weg__zeile a::after { content: '→'; font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; justify-self: end;
                         transition: transform var(--duration-fast) var(--ease-out); }
  .weg__zeile a:hover::after { transform: translateX(8px); color: var(--accent-text); }
}
.weg__nr { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .12em; color: var(--accent-text); }
.weg__name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
             font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.04em; }
.weg__txt { grid-column: 2 / -1; color: var(--carbon); max-width: 52ch; }
@media (min-width: 900px) { .weg__txt { grid-column: auto; } }
.weg__zeile a:hover .weg__name { color: var(--accent-text); }
.weg__fuss { margin-top: 2rem; color: var(--carbon); }
.weg__fuss a { color: var(--accent-text); box-shadow: inset 0 -1px 0 var(--accent-text); margin-left: .4rem; white-space: nowrap; }

/* ================= Person ================= */
.person { padding-block: clamp(4rem, 10vw, 7rem); }
.person__vor { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .7rem; letter-spacing: .2em;
               text-transform: uppercase; color: var(--copper-light); margin-bottom: .6rem; }
.person__rolle { margin: -.4rem 0 1.2rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .78rem;
                 letter-spacing: .14em; text-transform: uppercase; color: var(--on-invert-muted); }
.person__bild { max-width: 360px; }
.person__wege { margin-top: 2rem; }
.person__mehr { box-shadow: inset 0 -2px 0 var(--copper); }
.person__mehr:hover { box-shadow: inset 0 -4px 0 var(--copper); }

/* ================= Kontakt ================= */
.kontakt { position: relative; z-index: 2; background: var(--obsidian); color: var(--on-invert);
           padding-block: clamp(4rem, 12vh, 8rem) clamp(4rem, 10vh, 7rem); border-top: 4px solid var(--copper); }
.kontakt__gross { max-width: none; font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
                  font-size: clamp(2.6rem, 10vw, 10.5rem); line-height: .86; letter-spacing: -.06em; }
.kontakt__unter { margin-top: 1.2rem; font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 300; max-width: 30ch; color: rgba(246,243,238,.86); }
.kontakt__raster { display: grid; gap: clamp(2.5rem, 6vw, 5rem); margin-top: clamp(3rem, 8vw, 5.5rem); }
@media (min-width: 960px) { .kontakt__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.kontakt__titel { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 1rem; }
.kontakt__lead { color: rgba(246,243,238,.82); }
.kontakt__direkt { display: grid; gap: .3rem; margin-top: 1.8rem; }
.kontakt__direkt a { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; }
.kontakt__mail { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 2rem);
                 letter-spacing: -.02em; box-shadow: inset 0 -2px 0 var(--copper); }
.kontakt__mail:hover { box-shadow: inset 0 -5px 0 var(--copper); }
.kontakt__tel { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.kontakt__vcf { font-size: .9rem; color: var(--on-invert-muted); }
.kontakt__vcf:hover { color: var(--on-invert); }
.kontakt .field label { color: var(--on-invert-muted); }
.kontakt .field input, .kontakt .field select, .kontakt .field textarea {
  background: #22221b; color: var(--on-invert); border-color: #4a4a40;
}
.kontakt .field input:focus, .kontakt .field select:focus, .kontakt .field textarea:focus { background: #26261e; border-color: var(--copper); }
.kontakt .field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--on-invert) 50%), linear-gradient(135deg, var(--on-invert) 50%, transparent 50%);
  background-position: right 1.1rem center, right .75rem center; background-size: 7px 7px, 7px 7px; background-repeat: no-repeat;
}
.kontakt .formnote { color: var(--on-invert-muted); }
.kontakt .formnote a { color: var(--on-invert); box-shadow: inset 0 -1px 0 var(--copper); }
.kontakt .formstatus { color: var(--on-invert); }
.kontakt .formstatus[data-state="ok"] { border-left-color: var(--copper); color: var(--on-invert); }
.kontakt .formstatus a { box-shadow: inset 0 -1px 0 var(--copper); }
.kontakt .btn--primary:hover { background: var(--on-invert); color: var(--obsidian); }
.anfrage__raster { display: grid; gap: 0 1.2rem; }
@media (min-width: 560px) { .anfrage__raster { grid-template-columns: 1fr 1fr; } }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.erfolg { margin-top: 2.4rem; border-left: 4px solid var(--copper); padding: .4rem 0 .4rem 1.2rem; }
.erfolg img { width: 44px; height: 44px; margin-bottom: 1rem; }
.erfolg__zeile { font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
                 font-size: clamp(1.8rem, 4vw, 3rem); line-height: .95; letter-spacing: -.04em; }
.erfolg__danke { margin-top: .6rem; color: rgba(246,243,238,.82); }

.footer { border-top: 1px solid #2a2a22; }
@media (min-width: 760px) { .footer__grid--drei { grid-template-columns: 2fr 1fr 1fr; } }

/* ================= Filmleiste ================= */
.leiste {
  position: fixed; z-index: 58; left: 0; right: 0; bottom: 0;
  padding: 0 max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left)) env(safe-area-inset-bottom);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem 1.2rem;
  background: linear-gradient(0deg, rgba(22,22,15,.85), rgba(22,22,15,0));
  transform: translateY(110%); transition: transform .5s var(--ease-out);
}
.leiste.an { transform: none; }
.leiste__akte { list-style: none; display: flex; gap: 1.4rem; }
.leiste__akte a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
                  font-family: 'Space Grotesk', sans-serif; font-size: .64rem; font-weight: 700; letter-spacing: .18em;
                  text-transform: uppercase; color: var(--on-invert-muted); }
.leiste__akte a[aria-current="true"] { color: var(--on-invert); }
.leiste__nr { color: var(--copper); }
.leiste__linie { grid-column: 1 / -1; grid-row: 2; height: 2px; background: rgba(246,243,238,.16); margin-bottom: .5rem; overflow: hidden; }
.leiste__fill { display: block; height: 100%; background: var(--copper); transform-origin: 0 50%; transform: scaleX(0); }
.leiste__knoepfe { display: flex; gap: .4rem; max-width: none; }
.leiste__knopf {
  min-height: 44px; padding: 0 .8rem; background: transparent; color: var(--on-invert);
  border: 1px solid rgba(246,243,238,.35); font: 700 .62rem/1 'Space Grotesk', sans-serif;
  letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.leiste__knopf:hover, .leiste__knopf[aria-pressed="true"], .leiste__knopf[aria-checked="true"] { border-color: var(--copper); }
@media (max-width: 640px) {
  .leiste__name { display: none; }
  .leiste__akte { gap: .2rem; }
  .leiste__akte a { min-width: 44px; justify-content: center; font-size: .78rem; }
}

/* ================= Bewegung: nur mit Skript und ohne «ruhig» ================= */
html.js:not(.ruhig) .akt--1 { height: 250svh; }
html.js:not(.ruhig) .akt--2 { height: 480svh; }
html.js:not(.ruhig) .akt--3 { height: 580svh; }
html.js:not(.ruhig) .akt > .buehne { position: sticky; top: 0; }


/* Auftakt der Vorstellung: langsam, aus der Maske */
html.js:not(.ruhig) .v-display .zeile-maske > span { transform: translateY(105%); animation: auf 1.6s var(--ease-out) forwards; }
html.js:not(.ruhig) .v-display .zeile-maske:nth-child(2) > span { animation-delay: .35s; }
html.js:not(.ruhig) .v-display .zeile-maske:nth-child(3) > span { animation-delay: .7s; }
html.js:not(.ruhig) .v-unter { opacity: 0; animation: einblenden 1.4s linear 1.3s forwards; }
html.js:not(.ruhig) .v-start .akt-marke { opacity: 0; animation: einblenden 1.2s linear .2s forwards; }
@keyframes auf { to { transform: translateY(0); } }
@keyframes einblenden { to { opacity: 1; } }

/* ================= Ruhige Fassung und ohne Skript ================= */
:is(html:not(.js), html.ruhig) .korn { display: none; }
:is(html:not(.js), html.ruhig) .buehne__video { display: none; }
:is(html:not(.js), html.ruhig) .akt__text { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  padding: 2rem max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left)) 3rem; max-width: 1320px; margin-inline: auto; display: grid; gap: 1rem; }
:is(html:not(.js), html.ruhig) .akt__text p { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.3rem, 3vw, 2.2rem); line-height: 1.15;
  text-transform: uppercase; letter-spacing: -.02em; font-weight: 500; max-width: 30ch; }
:is(html:not(.js), html.ruhig) .v-folge,
:is(html:not(.js), html.ruhig) .schnitt,
:is(html:not(.js), html.ruhig) .stille,
:is(html:not(.js), html.ruhig) .signet,
:is(html:not(.js), html.ruhig) .instrumente,
:is(html:not(.js), html.ruhig) .r-schluss,
:is(html:not(.js), html.ruhig) .a-satz { display: none; }
/* Akt II ruhig: Bild als Band, darunter die Momente und Meldungen als Text */
:is(html:not(.js), html.ruhig) .akt--2 .buehne,
:is(html:not(.js), html.ruhig) .akt--3 .buehne { height: auto; overflow: visible; }
:is(html:not(.js), html.ruhig) .akt--2 .buehne__film,
:is(html:not(.js), html.ruhig) .akt--3 .fenster { position: relative; inset: auto; aspect-ratio: 16 / 9; max-height: 80svh; width: 100%; visibility: visible; }
:is(html:not(.js), html.ruhig) .akt--2 .buehne__schleier--hart { display: none; }
:is(html:not(.js), html.ruhig) .r-kopf { position: absolute; top: calc(var(--nav-h) + 1rem); }
:is(html:not(.js), html.ruhig) .momente { display: grid; gap: 2.2rem; padding: 2.5rem max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left)) 1rem; max-width: 1320px; margin-inline: auto; }
:is(html:not(.js), html.ruhig) .moment { position: static; transform: none; padding: 0; }
:is(html:not(.js), html.ruhig) .moment__wort { font-size: clamp(2.4rem, 9vw, 7rem); white-space: normal; }
:is(html:not(.js), html.ruhig) .meldungen { position: static; height: auto; width: auto; display: grid; gap: .6rem;
  padding: 1rem max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left)) 3rem; max-width: 40rem; }
:is(html:not(.js), html.ruhig) .meldung { position: static; }
:is(html:not(.js), html.ruhig) .a-folge { position: absolute; inset: 0; }
:is(html:not(.js), html.ruhig) .hoehepunkt { font-size: clamp(2.2rem, 8vw, 8rem); }
:is(html:not(.js), html.ruhig) .akt--3 .akt__text { padding-top: 2.5rem; }

/* Handy hochkant: Instrumente oben, Titel darunter, Akt-Marke weg */
@media (max-width: 699px) {
  .r-kopf { top: calc(var(--nav-h) + 6.2rem); }
  .r-kopf .akt-marke { display: none; }
  .instrumente { left: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left)); right: auto; top: calc(var(--nav-h) + .6rem); }
  .anzeigen { grid-auto-flow: column; gap: 1rem; }
  .anzeigen div { grid-template-columns: auto; }
  .moment { transform: translateY(-30%); }
}
:is(html:not(.js), html.ruhig) .nav { background: rgba(22,22,15,.94); }

html.pausiert .korn.an { animation-play-state: paused; }

/* Pruefung 15.10.2026 */
html:not(.js) .leiste { display: none; }
html.ruhig .akt--1 .akt__text p:first-child { display: none; }
.film-seite .nav.nav--fest { background: rgba(22,22,15,.96); }

/* ================= Takt (15.10.2026, zweite Fassung) =================
   Zustaende statt Scrub: das Skript setzt «an» und «weg», die Bewegung
   laeuft als Uebergang mit fester Dauer. Akt I langsam, Akt II hart und
   kurz, Akt III ruhig. Nur transform und opacity. */
html.js:not(.ruhig) {
  --t-ruhig: cubic-bezier(.22, 1, .36, 1);
  --t-hart: cubic-bezier(.16, 1, .3, 1);
}
/* Akt I: Saetze steigen langsam auf und stehen */
html.js:not(.ruhig) .v-satz { opacity: 0; transform: translate3d(0, -42%, 0);
  transition: opacity .7s linear, transform 1.1s var(--t-ruhig); }
html.js:not(.ruhig) .v-satz.an { opacity: 1; transform: translate3d(0, -50%, 0); }
html.js:not(.ruhig) .v-satz.vorbei { opacity: 0; transform: translate3d(0, -58%, 0); transition-duration: .45s, .6s; }

/* Akt II: der Titel schlaegt ein */
html.js:not(.ruhig) .r-titel { opacity: 0; transform: scale(1.06); transform-origin: 0 100%;
  transition: opacity .12s linear, transform .5s var(--t-hart); }
html.js:not(.ruhig) .r-titel.an { opacity: 1; transform: none; }

/* Akt II: Woerter steigen Buchstabe fuer Buchstabe aus der Maske, gehen nach oben weg */
.moment__maske { display: block; overflow: hidden; padding-top: .14em; margin-top: -.14em; padding-bottom: .04em; }
.moment__maske .bs { display: inline-block; }
html.js:not(.ruhig) .moment { opacity: 0; visibility: hidden; transition: opacity .18s linear, visibility 0s linear .35s; }
html.js:not(.ruhig) .moment.an { opacity: 1; visibility: visible; transition: opacity .06s linear, visibility 0s; }
html.js:not(.ruhig) .moment .bs { transform: translate3d(0, 112%, 0);
  transition: transform .28s cubic-bezier(.5, 0, .75, 0); }
html.js:not(.ruhig) .moment.an .bs { transform: none;
  transition: transform .58s var(--t-hart) calc(var(--i) * 24ms); }
html.js:not(.ruhig) .moment.vorbei .bs { transform: translate3d(0, -112%, 0);
  transition: transform .3s cubic-bezier(.5, 0, .75, 0) calc(var(--i) * 10ms); }
html.js:not(.ruhig) .moment__satz { opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .2s linear, transform .3s var(--t-hart); }
html.js:not(.ruhig) .moment.an .moment__satz { opacity: 1; transform: none;
  transition: opacity .35s linear .22s, transform .5s var(--t-hart) .22s; }

html.js:not(.ruhig) .instrumente { opacity: 0; transition: opacity .25s linear; }
html.js:not(.ruhig) .instrumente.an { opacity: 1; }
html.js:not(.ruhig) .meldung { opacity: 0; transform: translate3d(40px, 0, 0);
  transition: transform .45s var(--t-hart), opacity .3s linear; will-change: transform; }
html.js:not(.ruhig) .r-schluss { opacity: 0; transform: translate3d(0, -42%, 0);
  transition: opacity .3s linear, transform .6s var(--t-hart); }
html.js:not(.ruhig) .r-schluss.an { opacity: 1; transform: translate3d(0, -50%, 0); }
.r-dunkel { transition: opacity .5s linear; }
.r-dunkel.halb { opacity: .55; }
.r-dunkel.voll { opacity: 1; transition: none; }

/* Stille: langsam, viel Luft */
html.js:not(.ruhig) .stille__satz, html.js:not(.ruhig) .stille__frage { opacity: 0; transition: opacity .7s linear; }
html.js:not(.ruhig) .stille__satz.an, html.js:not(.ruhig) .stille__frage.an { opacity: 1; }
html.js:not(.ruhig) .stille__satz.vorbei, html.js:not(.ruhig) .stille__frage.vorbei { transition-duration: .5s; }

/* Akt III */
html.js:not(.ruhig) .a-marke { opacity: 0; transition: opacity .6s linear; }
html.js:not(.ruhig) .a-marke.an { opacity: 1; }
html.js:not(.ruhig) .a-satz { opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity .35s linear, transform .7s var(--t-ruhig); }
html.js:not(.ruhig) .a-satz.an { opacity: 1; transform: none; }
html.js:not(.ruhig) .a-satz.vorbei { opacity: 0; transform: translate3d(0, -14px, 0); transition-duration: .3s, .4s; }
html.js:not(.ruhig) .hoehepunkt { opacity: 0; transition: opacity .2s linear; }
html.js:not(.ruhig) .hoehepunkt.an, html.js:not(.ruhig) .hoehepunkt.vorbei { opacity: 1; }
html.js:not(.ruhig) .hoehepunkt .zeile-maske > span { transform: translate3d(0, 106%, 0); transition: transform .35s cubic-bezier(.5, 0, .75, 0); }
html.js:not(.ruhig) .hoehepunkt.an .zeile-maske > span,
html.js:not(.ruhig) .hoehepunkt.vorbei .zeile-maske > span { transform: none; transition: transform 1s var(--t-ruhig); }
html.js:not(.ruhig) .hoehepunkt.an .zeile-maske:nth-child(2) > span { transition-delay: .14s; }

/* Pruefung 15.10.2026, zweite Runde */
.footer .small, .footer .footer__adresse { color: var(--on-invert-muted); }
.akt--3 .a-marke, .akt--3 .a-satz, .hoehepunkt { text-shadow: 0 1px 18px rgba(22,22,15,.55); }

/* ================= Akt II als reine Grafik (15.10.2026, dritte Runde) =================
   Kein Film mehr. Ein grosser Drehzahlmesser in der Bildflaeche, ein feines
   Raster wie auf Millimeterpapier, die Werte unten links. Ruhig gezeichnet,
   nur die Nadel und die Zahlen bewegen sich. */
.r-grafik {
  background-color: var(--obsidian);
  background-image:
    radial-gradient(120% 90% at 78% 55%, rgba(212,112,42,.07) 0%, rgba(22,22,15,0) 55%),
    linear-gradient(rgba(246,243,238,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,243,238,.035) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
}
.r-grafik .drehzahl {
  position: absolute; width: min(118vh, 92vw); height: auto; right: -14vw; top: 50%;
  transform: translateY(-46%); overflow: visible;
}
.r-grafik .drehzahl__skala line { stroke: rgba(246,243,238,.32); stroke-width: .7; }
.r-grafik .drehzahl__skala line.rot { stroke: var(--copper); stroke-width: 1.6; }
.r-grafik .drehzahl__skala text { fill: rgba(246,243,238,.42); font: 500 9px 'Space Grotesk', sans-serif; }
.r-grafik .drehzahl__skala text.rot { fill: var(--copper); }
.r-grafik .drehzahl__nadel { stroke: var(--copper); stroke-width: 1.6; stroke-linecap: butt; transform-origin: 0 0; }
.r-grafik .drehzahl__nabe { fill: var(--copper); }
.akt--2 .buehne__schleier--hart { background: linear-gradient(90deg, rgba(22,22,15,.7) 0%, rgba(22,22,15,.15) 55%, rgba(22,22,15,0) 100%); }

/* Werte unten links, gross, ruhig */
.akt--2 .instrumente { top: auto; right: auto; bottom: clamp(4.4rem, 9vh, 6.2rem);
  left: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left)); }
.akt--2 .anzeigen { grid-auto-flow: column; gap: clamp(1.4rem, 4vw, 3.4rem); }
.akt--2 .anzeigen div { grid-template-columns: auto; gap: .2rem; }
.akt--2 .anzeigen dt { font-size: .62rem; letter-spacing: .24em; }
.akt--2 .anzeigen dd { font-size: clamp(1.25rem, 2.6vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; min-width: 0; }
@media (max-width: 699px) {
  .r-grafik .drehzahl { width: 112vw; right: -34vw; top: auto; bottom: 4vh; transform: none; }
  .akt--2 .instrumente { top: calc(var(--nav-h) + .7rem); bottom: auto; }
  .akt--2 .anzeigen dd { font-size: 1.15rem; }
  .akt--2 .r-kopf { top: calc(var(--nav-h) + 5.2rem); }
}

/* Abnahme 19.10.2026: frische Augen, fuenf Schwaechen */
.v-angebot { max-width: 46ch; font-size: clamp(.95rem, 1.2vw, 1.05rem); color: rgba(246,243,238,.86); margin-top: -.2rem; }
/* 2 Die Ironie lesbar: die Zeile unter der Vorstellung ist die Pointe, nicht Kleingedrucktes */
.v-unter { font-size: clamp(1.1rem, 1.7vw, 1.45rem); color: #f6f3ee; font-weight: 400; }
/* 3 Meldungen gross und klar */
.meldung { font-size: 1rem; padding: .85rem 1.05rem; background: #f6f3ee; }
.meldung b { font-size: .66rem; }
@media (max-width: 699px) { .meldung { font-size: .95rem; } .akt--2 .r-kopf .akt-marke { display: flex; } }
/* 4 Ergebnis je Form */
.weg__ergebnis { display: block; margin-top: .6rem; color: var(--anthracite); font-weight: 600; }
/* 5 Formular: Pflicht zuerst, der Rest aufklappbar */
.anfrage__mehr { margin-bottom: var(--r); border-top: 1px solid #3a3a31; padding-top: 1rem; }
.anfrage__mehr summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .6rem;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-invert-muted); }
.anfrage__mehr summary::marker { color: var(--copper); }
.anfrage__mehr[open] summary { margin-bottom: 1rem; color: var(--on-invert); }

/* Abnahme, Pruefung: Vorspann ohne Ueberlappung auf jeder Hoehe */
.v-rahmen { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + clamp(.8rem, 4vh, 4rem)); bottom: clamp(3.2rem, 7vh, 5.5rem);
  max-width: 1320px; margin-inline: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; }
.v-rahmen .v-start, .v-rahmen .v-abspann { position: static; padding-inline: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left)); max-width: none; margin: 0; }
.v-display { font-size: clamp(2.4rem, min(9.4vw, 11.5vh), 9.6rem); }
@media (max-height: 820px) { .v-unter { margin-top: .9rem; } .v-display { margin-top: .8rem; } .v-abspann { gap: .5rem; } }
@media (max-height: 700px) { .v-angebot { display: none; } .v-start .akt-marke { display: none; } }
/* versteckte Felder bleiben versteckt */
.field[hidden] { display: none !important; }
/* Aufklappen sichtbar machen */
.anfrage__mehr summary { list-style: none; }
.anfrage__mehr summary::-webkit-details-marker { display: none; }
.anfrage__mehr summary::before { content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--copper);
  color: var(--copper); font-size: 1rem; line-height: 1; transition: transform .3s var(--ease-out); }
.anfrage__mehr[open] summary::before { content: '‘2'; }
/* Ruhig und ohne Skript: Nadel steht im roten Bereich */
:is(html:not(.js), html.ruhig) .drehzahl__nadel { transform: rotate(78deg); }

/* Feinschliff 15.10.2026: Zeilenfall und Korn */
.v-display, .v-satz, .schnitt__text, .r-titel, .moment__satz, .r-schluss, .stille__satz, .stille__frage,
.a-satz, .hoehepunkt, .liste__titel, .weg__titel, .kontakt__gross, .kontakt__unter, .v-titel, .v-unter,
.v-angebot, .kontakt__lead, .weg__vor { text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }
.liste__txt, .weg__txt, .meldung { text-wrap: pretty; hyphens: manual; -webkit-hyphens: manual; }
.korn { inset: -15%; }
/* Fokus auf dunklem Grund deutlich, auf hellem Grund im Text */
.film-seite :focus-visible { outline: 2px solid var(--copper-light); outline-offset: 4px; }
.liste-block :focus-visible, .weg :focus-visible { outline-color: var(--copper-dim); }
.weg__zeile a:focus-visible { outline-offset: -2px; }

/* Endpruefung 15.10.2026 */
/* Filmleiste diskret: keine Rahmen, gedaempfte Schrift, Rahmen nur bei Fokus und Hover */
.leiste { background: linear-gradient(0deg, rgba(22,22,15,.7), rgba(22,22,15,0)); }
.leiste__knopf { border-color: transparent; color: var(--on-invert-muted); padding: 0 .6rem; }
.leiste__knopf:hover, .leiste__knopf:focus-visible { color: var(--on-invert); border-color: rgba(246,243,238,.35); }
.leiste__knopf[aria-pressed="true"], .leiste__knopf[aria-checked="true"] { color: var(--copper-light); border-color: transparent; }
/* Werte in Akt II lesbar */
.akt--2 .anzeigen dt { font-size: .68rem; color: rgba(246,243,238,.72); }
.akt-marke { color: rgba(246,243,238,.78); }
@media (max-width: 699px) { .r-grafik .drehzahl { opacity: .7; } }