/* =========================================================================
   Startseite — Kinodramaturgie
   =========================================================================

   Ergänzt css/stil.css (Tokens, Kopf-/Fußzeile, Knöpfe bleiben dort).
   Hier ausschließlich die Landingpage.

   AUFBAU DER SEQUENZEN
   Jede `.ln-seq` ist hoch (mehrere Bildschirmhöhen). Darin klebt `.ln-seq__stage`
   per `position: sticky` — deshalb braucht es kein ScrollTrigger-Pinning und
   es entstehen keine Pin-Spacer-Sprünge. GSAP blendet nur noch Bilder und
   Textmomente ineinander.

   OHNE JAVASCRIPT / BEI REDUCED MOTION
   `.is-cine` wird nie gesetzt: die Sequenz ist dann eine normale, ruhige
   Sektion — ein Bild, darunter alle Textmomente untereinander. Es geht keine
   Information verloren.
   ========================================================================= */

body.ln-seite {
  background: var(--schwarz);
  color: var(--weiss);
}

.ln-seite main { background: var(--schwarz); }

/* --- gemeinsame Bausteine ---------------------------------------------- */

.ln-kap {
  font-family: var(--schrift-tech);
  font-size: clamp(10px, .78vw, 12px);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 18px;
}

.ln-h1 {
  font-family: var(--schrift-eng);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(40px, 7.4vw, 118px);
  line-height: .94; letter-spacing: -.005em;
  margin: 0;
}
/* Jede Zeile ist ein Fenster; der Text fährt darin hoch. Durch `overflow:hidden`
   kann keine Zeile über die andere rutschen, auch wenn ein Tween unterbrochen wird.

   Das Fenster ist bewusst etwas höher als die Zeile: Bei `line-height: .94`
   ragt die Glyphenbox der schmalen Versalschrift unten aus der Zeilenbox
   heraus und würde vom `overflow:hidden` angeschnitten. Das Polster gibt ihr
   Luft, das negative Außenmaß nimmt den Platz im Layout wieder zurück —
   der Zeilenabstand bleibt also exakt derselbe. */
.ln-h1__zeile {
  display: block; overflow: hidden;
  padding-block: .1em; margin-block: -.1em;
}
.ln-h1__innen { display: block; }
.ln-h1__zeile--akzent { color: var(--akzent); }

.ln-h2 {
  font-family: var(--schrift-eng);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(32px, 4.6vw, 76px);
  line-height: 1.0; letter-spacing: -.004em;
  margin: 0 0 22px;
}
.ln-h3 {
  font-family: var(--schrift-eng);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.06; margin: 0 0 16px;
}
.ln-lead { color: var(--grau-300); max-width: 62ch; margin: 0; }
.ln-fussnote {
  color: var(--grau-600); font-size: 14px; max-width: 74ch;
  margin: clamp(28px, 3vw, 44px) 0 0;
}
.ln-fussnote a { color: var(--grau-300); }

.ln-kopf { margin-bottom: clamp(38px, 4.4vw, 72px); }

/* Nur für Screenreader — hält die Überschriftengliederung lückenlos. */
.ln-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ln-knoepfe {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(28px, 3vw, 44px);
}

/* Sektionsrhythmus */
.ln-traeger, .ln-reihe, .ln-proof, .ln-serie {
  padding-block: clamp(80px, 10vw, 168px);
  border-top: var(--linie-dunkel);
}

/* ====================== 00 · PRELUDE ==================================== */

.ln-prelude {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-block: clamp(96px, 12vh, 160px) clamp(56px, 8vh, 96px);
  overflow: hidden;
}
.ln-prelude__bild { position: absolute; inset: 0; z-index: 0; }
.ln-prelude__bild picture, .ln-prelude__bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%;
}
/* Das Bild tritt aus dem Dunkel hervor — kein Fade, sondern Licht. */
.ln-prelude__bild img {
  transform: scale(1.08);
  filter: brightness(.42) contrast(1.06) saturate(.9);
}
.ln-prelude__schleier {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14,17,19,.92) 0%, rgba(14,17,19,.34) 42%, rgba(14,17,19,.96) 100%),
    radial-gradient(120% 80% at 50% 40%, rgba(14,17,19,0) 30%, rgba(14,17,19,.85) 100%);
}
.ln-prelude__inhalt { position: relative; z-index: 2; width: 100%; }

.ln-marke {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--schrift-tech); font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--grau-300); margin: 0 0 clamp(22px, 3vw, 40px);
}
.ln-marke__strich { width: 26px; height: 2px; background: var(--akzent); }

.ln-sub {
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  color: var(--grau-300);
  font-size: clamp(15px, 1.15vw, 19px);
  max-width: 54ch;
}

.ln-hinweis {
  position: absolute; z-index: 2; left: var(--rand); bottom: clamp(20px, 3vh, 34px);
  display: flex; align-items: center; gap: 12px;
  font-family: var(--schrift-tech); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--grau-600);
}
.ln-hinweis__linie {
  width: 54px; height: 1px; background: rgba(255,255,255,.22); position: relative; overflow: hidden;
}
.ln-hinweis__linie::after {
  content: ''; position: absolute; inset: 0; width: 40%;
  background: var(--akzent); animation: ln-lauf 2.4s ease-in-out infinite;
}
@keyframes ln-lauf {
  0% { transform: translateX(-100%); } 60%,100% { transform: translateX(260%); }
}

/* ====================== 01–04 · FILM-SEQUENZEN ========================== */

.ln-seq { position: relative; border-top: var(--linie-dunkel); }
.ln-seq__stage { position: relative; }
.ln-seq__shots { position: relative; }
.ln-seq__shot picture, .ln-seq__shot img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--fokus, 50% 50%);
}

/* Ruhige Grundform (ohne JS / reduced motion): ein Bild, Text darunter. */
.ln-seq__shot { display: none; }
.ln-seq__shot.is-da { display: block; }
.ln-seq__shot img { max-height: 76vh; }
.ln-seq__schleier { display: none; }
.ln-seq__ui { padding-block: clamp(40px, 5vw, 76px); }
.ln-seq__beats { display: grid; gap: clamp(38px, 5vw, 72px); }

/* Kinomodus */
.is-cine .ln-seq { height: var(--seq-hoehe, 400vh); }
.is-cine .ln-seq__stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end;
}
.is-cine .ln-seq__shots { position: absolute; inset: 0; }
.is-cine .ln-seq__shot {
  display: block; position: absolute; inset: 0; opacity: 0;
  will-change: opacity, transform;
}
.is-cine .ln-seq__shot.is-da { opacity: 1; }
.is-cine .ln-seq__shot img {
  width: 100%; height: 100%; max-height: none;
  filter: brightness(.62) contrast(1.05);
}
.is-cine .ln-seq__schleier {
  display: block; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,17,19,.72) 0%, rgba(14,17,19,.15) 40%, rgba(14,17,19,.92) 100%);
}
.is-cine .ln-seq__ui {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(48px, 8vh, 104px);
}
.is-cine .ln-seq__beats { display: block; position: relative; min-height: 42vh; }
.is-cine .ln-seq__beat {
  position: absolute; left: 0; right: 0; bottom: 0;
  opacity: 0; will-change: opacity, transform;
}
.is-cine .ln-seq__beat.is-da { opacity: 1; }

/* Große technische Zahl */
.ln-zahl {
  display: flex; align-items: baseline; gap: .28em;
  margin: 0 0 10px; line-height: .86;
}
.ln-zahl__wert {
  font-family: var(--schrift-eng); font-weight: 700;
  font-size: clamp(64px, 13vw, 210px); letter-spacing: -.02em;
}
.ln-zahl__einheit {
  font-family: var(--schrift-eng); font-weight: 600;
  font-size: clamp(20px, 2.4vw, 40px); text-transform: uppercase;
  color: var(--akzent); letter-spacing: .02em;
}
.ln-beat__titel {
  font-family: var(--schrift-eng); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 56px); line-height: 1.02; margin: 0 0 10px;
}
.ln-beat__text { margin: 0; color: var(--grau-300); max-width: 46ch; }

/* ====================== 05 · EINSATZWELTEN ============================= */

.ln-welt { position: relative; border-top: var(--linie-dunkel); }
.ln-welt__stage { position: relative; }
.ln-welt__shot picture, .ln-welt__shot img { width: 100%; height: 100%; object-fit: cover; }

.ln-welt__shot { display: none; }
.ln-welt__shot.is-da { display: block; }
.ln-welt__shot img { max-height: 76vh; }
.ln-welt__schleier { display: none; }
.ln-welt__ui { padding-block: clamp(40px, 5vw, 76px); }

.ln-welt__titel {
  font-family: var(--schrift-eng); font-weight: 700; text-transform: uppercase;
  font-size: clamp(32px, 5.2vw, 88px); line-height: .98; margin: 0 0 clamp(24px, 3vw, 40px);
}
.ln-welt__marken {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-family: var(--schrift-tech); font-size: clamp(11px, .95vw, 14px);
  letter-spacing: .18em; text-transform: uppercase; color: var(--grau-600);
}
.ln-welt__marken li { transition: color .5s ease; }
.ln-welt__marken li.is-da { color: var(--akzent); }

.is-cine .ln-welt { height: var(--welt-hoehe, 420vh); }
.is-cine .ln-welt__stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end;
}
.is-cine .ln-welt__shots { position: absolute; inset: 0; }
.is-cine .ln-welt__shot {
  display: block; position: absolute; inset: 0; opacity: 0;
  will-change: opacity, transform;
}
.is-cine .ln-welt__shot.is-da { opacity: 1; }
.is-cine .ln-welt__shot img { width: 100%; height: 100%; max-height: none; filter: brightness(.66); }
.is-cine .ln-welt__schleier {
  display: block; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,17,19,.55) 0%, rgba(14,17,19,.1) 38%, rgba(14,17,19,.94) 100%);
}
.is-cine .ln-welt__ui { position: relative; z-index: 2; width: 100%; padding-block: clamp(48px, 8vh, 104px); }

/* ====================== 06 · EIN TRÄGER =============================== */

.ln-traeger__raster {
  display: grid; gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
@media (min-width: 900px) { .ln-traeger__raster { grid-template-columns: 1.05fr .95fr; } }

.ln-traeger__bild img { width: 100%; }

.ln-werkzeuge { list-style: none; margin: 0; padding: 0; }
.ln-werkzeug {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 18px;
  align-items: baseline;
  padding: clamp(18px, 2vw, 26px) 0;
  border-top: var(--linie-dunkel);
  transition: opacity .4s ease;
}
.ln-werkzeug:last-child { border-bottom: var(--linie-dunkel); }
.ln-werkzeug__nr {
  font-family: var(--schrift-tech); font-size: 11px; letter-spacing: .18em;
  color: var(--akzent);
}
.ln-werkzeug__name {
  font-family: var(--schrift-eng); font-weight: 700; text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 34px); line-height: 1;
}
.ln-werkzeug__wert {
  font-family: var(--schrift-eng); font-weight: 600;
  font-size: clamp(18px, 1.6vw, 26px); color: var(--grau-300); white-space: nowrap;
}
.ln-werkzeug__note {
  grid-column: 2 / -1; color: var(--grau-600); font-size: 14px;
}

/* ====================== 08 · BAUREIHE ================================= */

.ln-reihe__raster { display: grid; gap: clamp(20px, 2.4vw, 34px); }
@media (min-width: 900px) { .ln-reihe__raster { grid-template-columns: repeat(3, 1fr); } }

.ln-modell {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border: var(--linie-dunkel); background: var(--anthrazit);
  transition: border-color .3s ease, transform .4s cubic-bezier(.2,.6,.2,1);
}
.ln-modell:hover { border-color: rgba(126,211,33,.55); transform: translateY(-4px); }
.ln-modell--flagge { background: var(--anthrazit-2); border-color: rgba(126,211,33,.32); }

.ln-modell__bild {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  padding: clamp(16px, 2vw, 30px);
  background: radial-gradient(ellipse 62% 48% at 50% 62%, #262C31 0%, #191E22 46%, #121618 82%);
}
.ln-modell__bild img { max-height: 100%; width: auto; }
.ln-modell__text { padding: clamp(20px, 2.2vw, 30px); }
.ln-modell__name {
  font-family: var(--schrift-eng); font-weight: 700; text-transform: uppercase;
  font-size: clamp(22px, 2vw, 32px); margin: 0 0 18px;
}
.ln-modell__daten { margin: 0 0 20px; display: grid; gap: 0; }
.ln-modell__daten > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-top: var(--linie-dunkel);
}
.ln-modell__daten dt { color: var(--grau-600); font-size: 14px; }
.ln-modell__daten dd {
  margin: 0; font-family: var(--schrift-tech); font-size: 14px; color: var(--grau-200);
}
.ln-modell__mehr {
  font-family: var(--schrift-eng); font-weight: 600; text-transform: uppercase;
  font-size: 14px; letter-spacing: .06em; color: var(--akzent);
}

/* ====================== 09 · VIDEO ==================================== */

.ln-video { border-top: var(--linie-dunkel); }
.ln-video__rahmen {
  position: relative; height: clamp(420px, 78svh, 860px); overflow: hidden;
  background: var(--anthrazit);
}
.ln-video__el { width: 100%; height: 100%; object-fit: cover; display: block; }
.ln-video__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,17,19,.6) 0%, rgba(14,17,19,.12) 40%, rgba(14,17,19,.9) 100%);
}
.ln-video__ui {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding-block: clamp(30px, 5vh, 62px);
}
.ln-video__titel {
  font-family: var(--schrift-eng); font-weight: 700; text-transform: uppercase;
  font-size: clamp(32px, 5vw, 82px); line-height: 1; margin: 0 0 22px;
}
.ln-video__daten {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px 44px;
}
.ln-video__daten b {
  font-family: var(--schrift-eng); font-size: clamp(24px, 2.4vw, 40px);
  display: block; line-height: 1;
}
.ln-video__daten span {
  font-family: var(--schrift-tech); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grau-500);
}
.ln-video__quelle { color: var(--grau-600); font-size: 13px; padding-top: 14px; margin: 0; }

.ln-matchcut {
  display: grid; gap: clamp(28px, 3.4vw, 56px); align-items: center;
  padding-block: clamp(56px, 7vw, 110px);
}
@media (min-width: 900px) { .ln-matchcut { grid-template-columns: 1.1fr .9fr; } }

/* ====================== 10 · PROOF ==================================== */

.ln-proof__raster {
  margin: 0; display: grid; gap: 0;
  border-top: var(--linie-dunkel);
}
@media (min-width: 700px)  { .ln-proof__raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .ln-proof__raster { grid-template-columns: repeat(3, 1fr); } }

.ln-proof__zelle {
  padding: clamp(26px, 3.2vw, 52px) clamp(16px, 2vw, 34px) clamp(26px, 3.2vw, 52px) 0;
  border-bottom: var(--linie-dunkel);
}
@media (min-width: 700px) {
  .ln-proof__zelle { border-right: var(--linie-dunkel); }
  .ln-proof__zelle:nth-child(2n) { border-right: 0; }
}
@media (min-width: 1080px) {
  .ln-proof__zelle { border-right: var(--linie-dunkel); }
  .ln-proof__zelle:nth-child(2n) { border-right: var(--linie-dunkel); }
  .ln-proof__zelle:nth-child(3n) { border-right: 0; }
}
.ln-proof__zelle dt {
  font-family: var(--schrift-tech); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--grau-600); margin-bottom: 14px;
}
.ln-proof__zelle dd { margin: 0; display: flex; align-items: baseline; gap: .3em; }
.ln-proof__zelle b {
  font-family: var(--schrift-eng); font-weight: 700;
  font-size: clamp(42px, 5.4vw, 88px); line-height: .9; letter-spacing: -.01em;
}
.ln-proof__zelle span {
  font-family: var(--schrift-eng); font-weight: 600; text-transform: uppercase;
  font-size: clamp(14px, 1.2vw, 20px); color: var(--akzent);
}

/* ====================== 11 · VALUE BUILDUP ============================ */

.ln-aufbau { position: relative; border-top: var(--linie-dunkel); }
.ln-aufbau__stage { position: relative; }
.ln-aufbau__bild img { width: 100%; }
.ln-aufbau__schleier { display: none; }
.ln-aufbau__zeilen {
  list-style: none; padding-block: clamp(48px, 6vw, 88px); margin: 0;
  display: grid; gap: clamp(14px, 1.6vw, 22px);
}
.ln-aufbau__zeilen li {
  font-family: var(--schrift-eng); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 4.4vw, 74px); line-height: 1.02; color: var(--grau-500);
}
.ln-aufbau__final { color: var(--akzent) !important; }

.is-cine .ln-aufbau { height: var(--aufbau-hoehe, 460vh); }
.is-cine .ln-aufbau__stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: center;
}
.is-cine .ln-aufbau__bild { position: absolute; inset: 0; }
.is-cine .ln-aufbau__bild picture, .is-cine .ln-aufbau__bild img {
  width: 100%; height: 100%; object-fit: cover; filter: brightness(.4) contrast(1.05);
}
.is-cine .ln-aufbau__schleier {
  display: block; position: absolute; inset: 0;
  background: radial-gradient(110% 80% at 50% 50%, rgba(14,17,19,.55) 0%, rgba(14,17,19,.96) 78%);
}
.is-cine .ln-aufbau__zeilen {
  position: relative; z-index: 2; width: 100%; display: block; min-height: 1.2em;
}
.is-cine .ln-aufbau__zeilen li {
  position: absolute; left: var(--rand); right: var(--rand);
  opacity: 0; color: var(--weiss); will-change: opacity, transform;
}
.is-cine .ln-aufbau__zeilen li.is-da { opacity: 1; }

/* ====================== 12 · PREIS ==================================== */

.ln-preis {
  border-top: var(--linie-dunkel);
  background: var(--schwarz);
  padding-block: clamp(92px, 13vw, 210px);
  text-align: center;
}
.ln-preis__innen { display: flex; flex-direction: column; align-items: center; }
.ln-preis .ln-kap { margin-bottom: 26px; }
.ln-preis__ab {
  font-family: var(--schrift-eng); font-weight: 600; text-transform: uppercase;
  font-size: clamp(14px, 1.2vw, 20px); letter-spacing: .2em;
  color: var(--grau-500); margin: 0 0 6px;
}
/* Fenster für die Enthüllung — die Zahl fährt darin hoch, nie darüber hinaus. */
.ln-preis__maske { overflow: hidden; padding-bottom: .06em; }
.ln-preis__wert {
  font-family: var(--schrift-eng); font-weight: 700;
  font-size: clamp(60px, 15vw, 240px); line-height: .88; letter-spacing: -.022em;
  margin: 0; white-space: nowrap;
}
.ln-preis__mwst {
  font-family: var(--schrift-tech); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--grau-500); margin: 22px 0 0;
}
.ln-preis__klein { color: var(--grau-600); font-size: 13px; margin: 12px 0 0; max-width: 52ch; }
.ln-preis__satz {
  color: var(--grau-200); margin: clamp(28px, 3vw, 44px) 0 0;
  font-size: clamp(16px, 1.3vw, 20px);
}
.ln-preis .ln-knoepfe { justify-content: center; }

/* ====================== 13 · SERIE ==================================== */

.ln-serie__raster { display: grid; gap: clamp(16px, 2vw, 26px); }
@media (min-width: 820px) { .ln-serie__raster { grid-template-columns: repeat(3, 1fr); } }

.ln-serie__karte {
  display: block; text-decoration: none; color: inherit;
  padding: clamp(24px, 2.6vw, 38px);
  border: var(--linie-dunkel); background: var(--anthrazit);
  transition: border-color .3s ease, background .3s ease;
}
.ln-serie__karte:hover { border-color: rgba(126,211,33,.5); }
.ln-serie__karte.is-flagge { background: var(--anthrazit-2); border-color: rgba(126,211,33,.34); }
.ln-serie__karte h3 {
  font-family: var(--schrift-eng); font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 1.8vw, 28px); margin: 0 0 18px;
}
.ln-serie__preis {
  font-family: var(--schrift-eng); font-weight: 700;
  font-size: clamp(28px, 3vw, 46px); line-height: 1; margin: 0 0 8px;
}
.ln-serie__preis span {
  font-size: .42em; color: var(--grau-500); text-transform: uppercase;
  letter-spacing: .12em; margin-right: .35em;
}
.ln-serie__note { color: var(--grau-600); font-size: 14px; margin: 0 0 20px; }

/* ====================== 14 · FINAL ==================================== */

.ln-final {
  position: relative; min-height: clamp(460px, 82svh, 880px);
  display: flex; align-items: center; overflow: hidden;
  border-top: var(--linie-dunkel);
}
.ln-final__bild { position: absolute; inset: 0; }
.ln-final__bild picture, .ln-final__bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
}
.ln-final__bild img { filter: brightness(.5) contrast(1.04); }
.ln-final__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,17,19,.7) 0%, rgba(14,17,19,.28) 45%, rgba(14,17,19,.92) 100%);
}
.ln-final__innen { position: relative; z-index: 2; width: 100%; }
.ln-final__titel {
  font-family: var(--schrift-eng); font-weight: 700; text-transform: uppercase;
  font-size: clamp(34px, 6vw, 104px); line-height: .98; margin: 0;
}

/* ====================== Mobil ========================================= */

@media (max-width: 768px) {
  /* Kürzere Sequenzen: weniger Scrollweg je Takt. */
  .is-cine .ln-seq__stage,
  .is-cine .ln-welt__stage,
  .is-cine .ln-aufbau__stage { height: 100svh; }
  .ln-zahl__wert { font-size: clamp(56px, 21vw, 120px); }
  .ln-welt__marken { gap: 8px 18px; }
  .ln-preis__wert { font-size: clamp(46px, 17vw, 96px); }
  .ln-knoepfe .knopf { width: 100%; justify-content: center; }
  .ln-werkzeug { grid-template-columns: auto 1fr; }
  .ln-werkzeug__wert { grid-column: 2; }
}

/* ====================== Bewegung reduzieren =========================== */

@media (prefers-reduced-motion: reduce) {
  .ln-hinweis__linie::after { animation: none; transform: none; }
}

/* =========================================================================
   Maschinen-Fahrt — der GR 800 als eigene Ebene
   =========================================================================

   Bisher war die Maschine immer Teil eines vollflächigen Fotos. Hier liegt
   sie als freigestelltes PNG über einem separaten Hintergrund und lässt sich
   deshalb unabhängig von ihm bewegen: sie fährt in den Viewport, hält in der
   Featureposition und verlässt ihn wieder.

   MATCH-CUT statt Fake-3D: Mehrere echte Ansichten (45°/30°/90°) liegen
   deckungsgleich übereinander und werden kurz überblendet. Sie sind am
   UNTEREN Rand ausgerichtet — dadurch bleibt die Bodenlinie über den Schnitt
   hinweg stehen und der Wechsel liest sich wie ein Kameraschnitt, nicht wie
   ein springendes Bild.

   Kein Bodenschatten: Die vorhandenen Schattenstreifen sind für die helle
   Konfigurator-Bühne gebaut. Über einem abgedunkelten Landschaftsfoto würde
   ein zweiter, hart begrenzter Schatten aufgesetzt wirken.

   OHNE JS / REDUCED MOTION: `.is-cine` fehlt — dann steht schlicht ein Bild
   der Maschine über dem Text, alles lesbar, nichts bewegt sich.
   ========================================================================= */

.ln-fahrt { position: relative; border-top: var(--linie-dunkel); }
.ln-fahrt__stage { position: relative; }
.ln-fahrt__grund img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); }
.ln-fahrt__schleier { display: none; }

/* Ruhige Grundform */
.ln-fahrt__grund { display: none; }
.ln-fahrt__wagen { width: min(78%, 560px); margin: 0 auto; }
.ln-fahrt__ansicht { display: block; width: 100%; height: auto; }
.ln-fahrt__ansicht:not(.is-da) { display: none; }
.ln-fahrt__ui { padding-block: clamp(40px, 5vw, 76px); }

/* --- Kinomodus --------------------------------------------------------- */
/* STUDIOBÜHNE: Die Freisteller sind Studioaufnahmen. Statt sie auf einen
   abgedunkelten, unscharfen Fotostreifen zu legen (das las sich als schwarze
   Fläche mit aufgeklebtem PNG), steht die Maschine in einem Lichtkegel auf
   einem angedeuteten Boden. `--spot-x` und `--horizont` legen fest, wo Licht
   und Bodenlinie liegen — passend zur Position der Maschine je Breakpoint. */
.is-cine .ln-fahrt { height: var(--fahrt-hoehe, 420vh); }
.is-cine .ln-fahrt__stage {
  --spot-x: 50%;
  --horizont: 54%;
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  background:
    radial-gradient(42% 34% at var(--spot-x) calc(var(--horizont) - 6%), rgba(126,211,33,.10), transparent 72%),
    radial-gradient(75% 70% at var(--spot-x) calc(var(--horizont) - 14%), #353e45 0%, #20262a 42%, var(--schwarz) 82%);
}
/* Boden: leicht heller als die Wand, feine Kante als Horizont. */
.is-cine .ln-fahrt__stage::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  top: var(--horizont);
  background:
    radial-gradient(48% 60% at var(--spot-x) 0%, rgba(255,255,255,.07), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55));
  border-top: 1px solid rgba(255,255,255,.1);
}
.is-cine .ln-fahrt__grund {
  display: block; position: absolute; inset: 0;
  will-change: transform;
}
/* Mit Platte (Fahrwerk-Kapitel): sichtbar lassen, nur dort abdunkeln, wo Text steht. */
.is-cine .ln-fahrt__grund img { filter: brightness(.72) contrast(1.05) saturate(.95); }
.is-cine .ln-fahrt__schleier {
  display: block; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,17,19,.55) 0%, rgba(14,17,19,0) 22%, rgba(14,17,19,0) 62%, rgba(14,17,19,.85) 100%);
}

/* Ebene der Maschine: liegt über dem Grund, unter dem Text. */
.is-cine .ln-fahrt__maschine {
  /* Unterkante = Horizont: die Ketten stehen auf der Bodenlinie. */
  position: absolute; left: 0; right: 0; top: 0; bottom: calc(100% - var(--horizont));
  z-index: 1;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.is-cine .ln-fahrt__wagen {
  position: relative; margin: 0 0 -2svh;
  width: var(--m-breite, min(92vw, 560px));
  will-change: transform;
}
/* Kontaktschatten: fährt mit der Maschine und erdet sie auf dem Boden. */
.is-cine .ln-fahrt__wagen::after {
  content: ''; position: absolute; z-index: -1;
  left: 6%; right: 6%; bottom: -4%; height: 16%;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,.35) 55%, transparent);
}
.is-cine .ln-fahrt__ansicht { display: block; width: 100%; height: auto; }
/* Weitere Ansichten deckungsgleich darüber, am Boden ausgerichtet. */
.is-cine .ln-fahrt__ansicht:not(:first-child) {
  position: absolute; left: 0; right: 0; bottom: 0; opacity: 0;
}
.is-cine .ln-fahrt__ui {
  position: relative; z-index: 2; width: 100%;
  padding-block: 0 clamp(28px, 6svh, 72px);
}
.is-cine .ln-fahrt__beats { display: block; position: relative; height: 34svh; }
.is-cine .ln-fahrt__beat {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; will-change: opacity, transform;
}
.is-cine .ln-fahrt__beat.is-da { opacity: 1; }
.is-cine .ln-fahrt .ln-zahl { flex-wrap: wrap; }
.is-cine .ln-fahrt .ln-zahl__wert { font-size: clamp(56px, 18vw, 150px); }
.is-cine .ln-fahrt__beat--auftakt .ln-beat__titel { font-size: clamp(40px, 11vw, 96px); line-height: .95; }
.is-cine .ln-fahrt .ln-beat__text { font-size: clamp(15px, 1.15vw, 18px); }

/* Schrittanzeige: zeigt, dass noch weitere Angaben kommen. Erzeugt js/landing.js. */
.ln-fahrt__schritte { display: none; }
.is-cine .ln-fahrt__schritte {
  display: flex; gap: 8px; margin-top: clamp(18px, 3svh, 32px);
  list-style: none; padding: 0;
}
.ln-fahrt__schritte li {
  width: 28px; height: 3px; background: rgba(255,255,255,.18);
  transition: background-color .3s, width .3s;
}
.ln-fahrt__schritte li.is-da { width: 44px; background: var(--akzent); }

/* Ruhige Grundform der Takte (ohne Kinomodus) */
.ln-fahrt__beats { display: grid; gap: clamp(38px, 5vw, 72px); }

/* --- Breit: Maschine rechts, Angaben links — nichts überlagert sich ----- */
@media (min-width: 1100px) {
  .is-cine .ln-fahrt__stage {
    --spot-x: 64%;
    --horizont: 72%;
    justify-content: center;
  }
  .is-cine .ln-fahrt__maschine {
    justify-content: flex-end;
    padding-right: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
  }
  .is-cine .ln-fahrt__wagen {
    /* 50vw: bleibt auch am Ende der Drift (−8 %) rechts der Textspalte. */
    width: var(--m-breite, min(50vw, 860px, 100svh));
  }
  /* Von links kommend driftet sie nach rechts weiter — dafür Platz lassen. */
  .is-cine .ln-fahrt[data-richtung="links"] .ln-fahrt__wagen { margin-right: 4vw; }
  .is-cine .ln-fahrt__ui { padding-block: var(--kopf) 0; }
  .is-cine .ln-fahrt__beats { height: 62svh; max-width: min(38vw, 560px); }
  .is-cine .ln-fahrt__beat { justify-content: center; }
  .is-cine .ln-fahrt .ln-zahl__wert { font-size: clamp(72px, 7.6vw, 150px); }
  .is-cine .ln-fahrt__beat--auftakt .ln-beat__titel { font-size: clamp(52px, 5.4vw, 104px); }
  .is-cine .ln-fahrt__schleier {
    background:
      linear-gradient(90deg, rgba(14,17,19,.88) 0%, rgba(14,17,19,.55) 32%, rgba(14,17,19,0) 58%),
      linear-gradient(180deg, rgba(14,17,19,.5) 0%, rgba(14,17,19,0) 22%, rgba(14,17,19,0) 70%, rgba(14,17,19,.7) 100%);
  }
}

/* =========================================================================
   Kurzanfrage im Final-CTA
   =========================================================================
   Das Formular soll Teil der Schlussinszenierung sein, kein graues Kästchen,
   das darunter geklebt wurde. Deshalb: keine Kartenfläche, keine Rahmen um
   die Felder, nur eine feine Grundlinie je Eingabe. Große Zielflächen
   (>= 48 px) — auf dem Telefon ist das kein Detail, sondern die Bedingung
   dafür, dass hier jemand tatsächlich anfragt.
   ========================================================================= */

.ln-final { align-items: stretch; }
.ln-final__innen {
  display: grid; gap: clamp(36px, 5vw, 88px);
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: clamp(56px, 9vh, 128px);
}
@media (min-width: 900px) {
  .ln-final__innen { grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); }
}
.ln-final__lead {
  max-width: 46ch; margin: clamp(18px, 2vw, 28px) 0 clamp(24px, 3vw, 36px);
  color: var(--grau-hell); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.65;
}

.ln-form { display: grid; gap: clamp(16px, 1.6vw, 22px); }
.ln-form__titel {
  font-family: var(--schrift-tech); font-size: clamp(10px, .78vw, 12px);
  letter-spacing: .2em; text-transform: uppercase; color: var(--akzent); margin: 0;
}

.ln-feld { display: grid; gap: 7px; border: 0; padding: 0; margin: 0; min-width: 0; }
.ln-feld > label,
.ln-feld > legend {
  font-size: 13px; letter-spacing: .04em; color: var(--grau-hell); padding: 0;
}
.ln-feld__opt { color: var(--grau); }
.ln-feld input,
.ln-feld textarea {
  width: 100%; min-height: 48px; padding: 12px 2px;
  background: transparent; color: var(--weiss);
  border: 0; border-bottom: 1px solid rgba(255,255,255,.22);
  border-radius: 0;                     /* kein iOS-Standardradius */
  font: inherit; font-size: 16px;       /* 16px verhindert das iOS-Zoomen */
  transition: border-color .18s ease;
  -webkit-appearance: none; appearance: none;
}
.ln-feld textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.ln-feld input::placeholder,
.ln-feld textarea::placeholder { color: rgba(255,255,255,.34); }
.ln-feld input:hover,
.ln-feld textarea:hover { border-bottom-color: rgba(255,255,255,.4); }
.ln-feld input:focus-visible,
.ln-feld textarea:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 3px;
  border-bottom-color: var(--akzent);
}
.ln-feld input[aria-invalid="true"],
.ln-feld textarea[aria-invalid="true"] { border-bottom-color: #ff6b5e; }
.ln-feld__fehler { margin: 0; font-size: 13px; color: #ff8f85; }

/* Rückkanal */
.ln-wahl { display: flex; gap: 10px; flex-wrap: wrap; }
.ln-wahl__opt {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 18px 0 15px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  cursor: pointer; font-size: 15px; color: var(--grau-hell);
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.ln-wahl__opt:hover { border-color: rgba(255,255,255,.42); color: var(--weiss); }
.ln-wahl__opt input { accent-color: var(--akzent); width: 18px; height: 18px; margin: 0; }
.ln-wahl__opt:has(input:checked) {
  border-color: var(--akzent); color: var(--weiss);
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
}
.ln-wahl__opt:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* Die Honeypot-Regel (.ln-honig) steht in css/stil.css — sie wird auch vom
   Konfigurator gebraucht, der landing.css nicht laedt. */

.ln-form__senden { justify-content: center; min-height: 52px; margin-top: 4px; }
.ln-form__senden[disabled] { opacity: .55; cursor: progress; }
.ln-form__recht { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--grau); }
.ln-form__recht a { color: var(--grau-hell); text-underline-offset: 3px; }

.ln-form__status {
  margin: 0; padding: 14px 16px; border-radius: 4px; font-size: 14.5px; line-height: 1.6;
  border-left: 2px solid var(--akzent);
  background: rgba(255,255,255,.05); color: var(--weiss);
}
.ln-form__status[data-art="fehler"] { border-left-color: #ff6b5e; }
.ln-form__status a { color: var(--akzent); }

/* Nach erfolgreichem Versand: der Zusatzweg über WhatsApp. Er verschickt
   nichts — er öffnet WhatsApp mit vorbereitetem Text. Deshalb heißt er auch so. */
.ln-form__wa {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24); color: var(--weiss);
  text-decoration: none; font-size: 15px; justify-self: start;
}
.ln-form__wa:hover { border-color: var(--akzent); }

@media (max-width: 768px) {
  .ln-final { min-height: 0; }
  .ln-final__innen { padding-block: 48px 64px; }
  .ln-wahl__opt { flex: 1 1 auto; justify-content: center; }
}

/* Erster Bildschirm: Knöpfe statt Scroll-Hinweis */
.ln-prelude__knoepfe { margin-top: clamp(20px, 2.4vw, 32px); }

/* Service im Kaufweg */
.ln-dienst { padding: clamp(72px, 9vw, 150px) 0; background: var(--schwarz, #0b0d0c); }
.ln-dienst__raster { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: var(--linie-dunkel); }
@media (min-width: 860px) { .ln-dienst__raster { grid-template-columns: repeat(3, 1fr); } }
.ln-dienst__raster li { padding: clamp(24px, 3vw, 44px) clamp(16px, 2vw, 34px) clamp(24px, 3vw, 44px) 0; border-bottom: var(--linie-dunkel); }
@media (min-width: 860px) { .ln-dienst__raster li + li { padding-left: clamp(16px, 2vw, 34px); border-left: var(--linie-dunkel); } }
.ln-dienst__raster h3 { font-family: var(--schrift-eng); font-weight: 700; text-transform: uppercase; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.05; margin: 0 0 12px; color: var(--akzent); }
.ln-dienst__raster p { margin: 0; color: var(--grau-300); max-width: 40ch; }
/* Am Handy steht WhatsApp schon als schwebender Knopf bereit: im ersten Bildschirm nur ein Knopf */
@media (max-width: 640px) { .ln-prelude__knoepfe .knopf--geist { display: none; } .ln-prelude__inhalt { padding-bottom: 72px; } }