/* LF-5 (FN-1377): Landingfilm. Bewegt werden nur transform/opacity (plus die Maske der Zeigerblende),
   nur in 2D, damit Schrift und Produktbilder scharf bleiben. Farben der Marke: Pflaume, Koralle, Gold,
   Creme (DEC-428 E9). Überblickbarkeit: grosse Titel (DEC-377). Produktbilder erscheinen mindestens
   in 0.8-facher Grösse (Ausschnitte ≤ 820 App-Pixel, scripts/lib/landing-film-shots.mjs). */
@font-face { font-family: 'Fredoka Film'; src: url('fonts/fredoka-var.woff') format('woff'); font-weight: 300 700; font-display: swap; } /* OFL, fonts/Fredoka-OFL.txt */
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

.lf {
  --plum: #4F3A82; --plum-deep: #241640; --night: #150c28; --coral: #FF6A3D; --gold: #FFC24A; --cream: #FBF1E7;
  position: relative; overflow: hidden; isolation: isolate; container-type: inline-size;
  aspect-ratio: 16 / 9; max-height: 100svh; width: 100%;
  color: var(--cream); font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(120% 90% at 70% 0%, var(--plum) 0%, var(--plum-deep) 55%, var(--night) 100%);
  border-radius: 20px;
}
.lf::after { /* Vignette + feines Filmkorn (statisch, 3 KB, gekachelt) */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(100% 80% at 50% 45%, transparent 58%, rgba(10, 5, 20, .55) 100%), url('film/grain.webp');
  background-size: auto, 96px 96px; opacity: .55; mix-blend-mode: soft-light;
}
.lf-stage { position: absolute; inset: 0; }
.lf-scene { position: absolute; inset: 0; opacity: 0; }
.lf-scene.is-on { opacity: 1; }
.lf-scene:not(.is-on) { content-visibility: hidden; }

/* Hintergrund: weichgezeichnete KI-Szene, abgedunkelt; Text liegt links auf dem dunklen Ende */
.lf-bg { position: absolute; inset: -5%; z-index: 0; will-change: transform; }
.lf-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(21, 12, 40, .93) 0%, rgba(36, 22, 64, .74) 40%, rgba(36, 22, 64, .5) 75%, rgba(36, 22, 64, .62) 100%),
              linear-gradient(0deg, rgba(21, 12, 40, .7) 0%, transparent 38%); }
.lf-scene--product .lf-bg::after { background: linear-gradient(90deg, rgba(21, 12, 40, .94) 0%, rgba(36, 22, 64, .82) 45%, rgba(36, 22, 64, .7) 100%); }

/* Titel: gross, Wort für Wort */
.lf-text { position: absolute; left: 5.5%; top: 11%; width: 34%; z-index: 2; }
.lf-h, .lf-title { font-family: 'Fredoka Film', Fredoka, Inter, sans-serif; font-weight: 600; line-height: 1.06; margin: 0; letter-spacing: -.01em; }
.lf-h { font-size: 4.3cqw; text-wrap: balance; }
.lf-w { display: inline-block; opacity: 0; will-change: transform, opacity; }
.lf-h2 { font-family: 'Fredoka Film', Fredoka, Inter, sans-serif; font-weight: 600; font-size: 2.1cqw; margin: 0 0 .3em; }
.lf-s { font-size: 1.5cqw; line-height: 1.4; margin: .9em 0 0; color: rgba(251, 241, 231, .88); }
[data-in] { opacity: 0; will-change: transform, opacity; }

/* Einstellungen: Produktbild gross rechts, Beschriftung darüber, Lichtstreif beim Schnitt */
.lf-cuts { position: absolute; left: 41%; right: 4%; top: 12%; bottom: 8%; z-index: 1; }
.lf-cut { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; opacity: 0; will-change: transform, opacity; }
.lf-cut > .lf-shot { display: block; width: 100%; max-height: 100%; border-radius: 12px; overflow: hidden;
  box-shadow: 0 34px 90px rgba(8, 3, 18, .6), 0 0 0 1px rgba(255, 194, 74, .4), -10px -10px 50px -24px var(--coral); }
.lf-shot { position: relative; }
.lf-var { position: absolute; inset: 0; opacity: 0; }
.lf-var:first-child { position: relative; opacity: 1; }
.lf-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lf-cuts--narrow .lf-cut > .lf-shot, .lf-cuts--phone .lf-cut > .lf-shot { width: auto; height: 100%; }
.lf-cuts--phone .lf-cut > .lf-shot { border-radius: 30px; border: 7px solid #0d0718; }
.lf-shot--missing { display: grid; place-items: center; color: var(--plum-deep); background: repeating-linear-gradient(0deg, #f3e6d8 0 28px, var(--cream) 28px 56px); font: 600 1.2cqw Fredoka, sans-serif; }
.lf-cap { position: absolute; left: 0; top: -7%; display: flex; align-items: center; gap: .5em; margin: 0; opacity: 0;
  font: 600 1.3cqw Inter, sans-serif; letter-spacing: .02em; color: var(--cream); }
.lf-cap i { width: .6em; height: .6em; border-radius: 50%; background: var(--coral); box-shadow: 0 0 12px var(--coral); }

/* Ruhezeit-Hinweis: erscheint in Koralle, wird ruhig */
.lf-hint { position: absolute; left: 5.5%; bottom: 14%; z-index: 3; opacity: 0; display: grid; }
.lf-hint b { grid-area: 1 / 1; text-align: center; padding: .75em 1.2em; border-radius: 999px; font: 600 1.35cqw Inter, sans-serif; }
.lf-hint-warn { background: var(--coral); color: #2a0f06; }
.lf-hint-ok { background: var(--cream); color: var(--plum-deep); opacity: 0; }

/* Team: drei Chips unter dem Titel */
.lf-chips { position: absolute; left: 5.5%; bottom: 12%; list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; z-index: 3; }
.lf-chips li { display: flex; align-items: center; gap: .55em; padding: .6em 1em; border-radius: 14px; background: rgba(251, 241, 231, .96);
  color: var(--plum-deep); font: 600 1.3cqw Inter, sans-serif; box-shadow: 0 10px 30px rgba(8, 3, 18, .4); width: max-content; }
.lf svg { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Siegel */
.lf-seal { position: absolute; left: 7%; bottom: 12%; z-index: 3; display: grid; justify-items: center; gap: .3em; width: 11cqw; aspect-ratio: 1; align-content: center;
  border: 3px solid var(--gold); border-radius: 50%; color: var(--gold); font: 600 1.15cqw Fredoka, sans-serif; background: rgba(36, 22, 64, .88); opacity: 0; text-align: center; }
.lf-seal svg { width: 2.4em; height: 2.4em; }

/* Zeitraffer: lesbare Gruppen, dann Finale mit den sechs Funken */
.lf-text--rush { width: 30%; }
.lf-rush { position: absolute; left: 38%; right: 4%; top: 10%; bottom: 10%; }
.lf-group { position: absolute; inset: 0; opacity: 0; display: grid; align-content: center; gap: 2cqw; will-change: transform, opacity; }
.lf-gt { margin: 0; font: 600 2.7cqw 'Fredoka Film', Fredoka, sans-serif; color: var(--gold); opacity: 0; }
.lf-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1cqw; }
.lf-tile { display: flex; align-items: center; gap: .6em; padding: .8em .9em; border-radius: 12px; opacity: 0;
  background: rgba(251, 241, 231, .1); border: 1px solid rgba(251, 241, 231, .22); font: 600 1.3cqw/1.2 Inter, sans-serif; will-change: transform, opacity; }
.lf-tile svg { width: 1.7em; height: 1.7em; color: var(--gold); }
.lf-tile--spark { background: rgba(255, 194, 74, .18); border-color: var(--gold); }
.lf-fins { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; }
.lf-fin { display: grid; justify-items: start; gap: .5em; padding: 1.2em 1.2em; border-radius: 16px; background: var(--cream); color: var(--plum-deep);
  font: 600 1.7cqw/1.15 'Fredoka Film', Fredoka, sans-serif; opacity: 0; box-shadow: 0 20px 50px rgba(8, 3, 18, .5); will-change: transform, opacity; }
.lf-fin svg { width: 1.6em; height: 1.6em; color: var(--coral); }
/* Aufleuchten nur innerhalb der Kachel und nur kurz (Flo 01.10.): --glow 0..1 setzt film.js */
.lf-fin { box-shadow: inset 0 0 0 calc(var(--glow, 0) * 3px) rgba(255, 194, 74, var(--glow, 0)), 0 20px 50px rgba(8, 3, 18, .5); background: color-mix(in srgb, var(--cream) calc(100% - var(--glow, 0) * 22%), var(--gold)); }

/* Wortmarke mit Uhr */
.lf-mark { position: absolute; right: 12%; top: 50%; width: 22cqw; margin-top: -11cqw; color: var(--cream); z-index: 2; }
.lf .lf-clock { width: 100%; height: auto; stroke: none; display: block; }
.lf-hh, .lf-mh { transform-origin: 100px 100px; transform-box: view-box; }
.lf-spark { display: block; }
.lf .lf-spark svg { width: 100%; height: 100%; stroke: none; }
.lf-spark--mark { position: absolute; right: 2%; top: 4%; width: 18%; aspect-ratio: 1; transform: scale(0); }
.lf-scene--auftakt .lf-text { top: auto; bottom: 16%; }
.lf-endcard { position: absolute; left: 5.5%; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; gap: 1.6cqw; justify-items: start; }
.lf-mark--end { position: relative; right: auto; top: auto; margin: 0; width: 10cqw; }
.lf-h--end { font-size: 5.6cqw; }
.lf-url { margin: 0; font: 600 2cqw Inter, sans-serif; letter-spacing: .04em; color: var(--gold); }

/* Datenweg Schweiz */
.lf-path { position: absolute; left: 41%; right: 5%; top: 30%; display: flex; align-items: center; z-index: 2; }
.lf-node { display: grid; justify-items: center; gap: .3em; padding: 1em 1.2em; border-radius: 14px; background: rgba(251, 241, 231, .1);
  border: 1px solid rgba(251, 241, 231, .28); font: 600 1.3cqw Inter, sans-serif; text-align: center; }
.lf-node small { font-weight: 400; opacity: .85; }
.lf-node--ch { background: rgba(251, 241, 231, .96); color: var(--plum-deep); border-color: var(--gold); }
.lf-node--ki { border-style: dashed; }
.lf-line { flex: 1; height: 3px; min-width: 20px; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--g, 0)); }
.lf-line--ki { background: repeating-linear-gradient(90deg, var(--cream) 0 8px, transparent 8px 14px); }
.lf-ki { position: absolute; left: 41%; right: 5%; top: 58%; z-index: 2; }

/* Kinobalken */
.lf-bar { position: absolute; left: 0; right: 0; height: 12.5%; background: #07030d; z-index: 4; pointer-events: none; transform: scaleY(0); }
.lf-bar--top { top: 0; transform-origin: 50% 0; }
.lf-bar--bottom { bottom: 0; transform-origin: 50% 100%; }

/* Zeigerblende und Lichtblitz */
.lf-wipe { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 4; opacity: 0; pointer-events: none; }
.lf-hand { position: absolute; left: -2px; bottom: 0; width: 4px; height: 75vmax; background: linear-gradient(0deg, var(--coral), rgba(255, 106, 61, 0));
  transform-origin: 50% 100%; box-shadow: 0 0 18px var(--coral); }

/* Titel (Standbild vor dem Start) */
.lf-poster { position: absolute; inset: 0; z-index: 6; display: grid; align-content: center; justify-items: start; padding: 6% 7%;
  background: linear-gradient(90deg, rgba(21, 12, 40, .9) 0%, rgba(21, 12, 40, .55) 60%, transparent 100%); }
.lf-title { font-size: clamp(30px, 4.6cqw, 72px); max-width: 13em; }
.lf-lead { font-size: clamp(15px, 1.5cqw, 22px); margin: .8em 0 1.4em; max-width: 30em; }
.lf-meta { margin: 1em 0 0; font-size: 14px; opacity: .8; }
.lf-cta, .lf-end { display: flex; flex-wrap: wrap; gap: .8em; margin: 0; }
.lf-btn { font: 600 16px Inter, sans-serif; padding: .85em 1.4em; border-radius: 999px; border: 2px solid var(--cream); background: transparent;
  color: var(--cream); cursor: pointer; text-decoration: none; }
.lf-btn--main { background: var(--coral); border-color: var(--coral); color: #2a0f06; }
.lf-btn:focus-visible, .lf-ctl:focus-visible, .lf-seek:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.lf:not([data-state="ready"]) .lf-poster { opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }
.lf-end { position: absolute; z-index: 6; left: 5.5%; bottom: 12%; }

/* Bedienung */
.lf-controls, .lf-stills { position: absolute; z-index: 7; left: 3%; right: 3%; bottom: 3%; display: flex; gap: .5em; align-items: center;
  padding: .45em .6em; border-radius: 12px; background: rgba(21, 12, 40, .72); }
.lf-controls[hidden], .lf-stills[hidden], .lf-end[hidden] { display: none; }
.lf-ctl { font: 600 13px Inter, sans-serif; color: var(--cream); background: rgba(251, 241, 231, .12); border: 0; border-radius: 8px; padding: .5em .8em; cursor: pointer; }
.lf-seek { flex: 1; accent-color: var(--coral); }
.lf-stills { justify-content: center; }
.lf-still-no { font-size: 14px; }
.lf-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.lf[data-state="ended"] .lf-controls [data-act="pause"] { display: none; }
.lf[data-state="render"] .lf-poster, .lf[data-state="render"] .lf-controls { display: none; }
.lf[data-state="render"] { border-radius: 0; }

/* Handy (Hochformat): Text oben, Bild darunter */
@media (max-width: 480px) {
  .lf { aspect-ratio: 9 / 16; max-height: 92svh; border-radius: 0; }
  .lf-text, .lf-text--rush { left: 6%; right: 6%; width: auto; top: 6%; }
  .lf-h { font-size: 8.4cqw; }
  .lf-s { font-size: 3.8cqw; }
  .lf-cuts, .lf-rush { left: 5%; right: 5%; top: 34%; bottom: 16%; }
  .lf-cap, .lf-tile { font-size: 3.2cqw; }
  .lf-gt { font-size: 5.5cqw; }
  .lf-tiles, .lf-fins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf-fin { font-size: 4cqw; }
  .lf-chips, .lf-hint, .lf-seal { left: 6%; bottom: 6%; }
  .lf-chips li, .lf-hint b { font-size: 3.4cqw; }
  .lf-seal { width: 26cqw; font-size: 3cqw; }
  .lf-mark { right: 50%; margin-right: -22cqw; width: 44cqw; top: 38%; }
  .lf-path { left: 6%; right: 6%; top: 36%; flex-direction: column; align-items: stretch; }
  .lf-node { font-size: 3.4cqw; }
  .lf-line { width: 3px; height: 18px; min-width: 0; flex: none; align-self: center; transform-origin: 50% 0; transform: scaleY(var(--g, 0)); }
  .lf-ki { left: 6%; right: 6%; top: auto; bottom: 6%; }
  .lf-h2 { font-size: 5cqw; }
  .lf-endcard { left: 6%; right: 6%; }
  .lf-h--end { font-size: 11cqw; }
  .lf-url { font-size: 5cqw; }
  .lf-mark--end { width: 22cqw; margin: 0; right: auto; }
  .lf-bg::after, .lf-scene--product .lf-bg::after { background: linear-gradient(180deg, rgba(21, 12, 40, .92) 0%, rgba(36, 22, 64, .78) 45%, rgba(21, 12, 40, .92) 100%); }
  .lf-poster { justify-items: stretch; align-content: end; padding-bottom: 18%; background: linear-gradient(0deg, rgba(21, 12, 40, .95) 30%, transparent); }
  .lf-controls { flex-wrap: wrap; }
  .lf-seek { flex-basis: 100%; order: -1; }
}

/* ── Version 2/3 «Ein Morgen mit Rosie» (DEC-436): hell, luftig, von der Nacht ins Licht ─────────────── */
.lf--airy { --ink: #241640; --ink-soft: #4b3a66; background: #FBF4EC; color: var(--ink); }
.lf--airy::after { background: url('film/grain.webp'); background-size: 96px 96px; opacity: .18; mix-blend-mode: multiply; }
.lf--airy .lf-scene { background: linear-gradient(160deg, #FFFAF4 0%, #FBF1E7 50%, #F7E9EF 100%); }
.lf--airy .lf-h, .lf--airy .lf-title { color: var(--ink); }
.lf--airy .lf-s { color: var(--ink-soft); }
.lf--airy .lf-bg::after { background: linear-gradient(90deg, rgba(255, 250, 244, .96) 0%, rgba(255, 250, 244, .86) 42%, rgba(255, 250, 244, .72) 100%); }
.lf--airy .lf-tone--sun .lf-bg::after { background: linear-gradient(90deg, rgba(255, 248, 238, .94) 0%, rgba(255, 248, 238, .55) 45%, rgba(255, 236, 205, .12) 100%); }
.lf--airy .lf-tone--dawn { background: linear-gradient(160deg, #FFF3F4 0%, #F9DDE6 55%, #F3D6E8 100%); }
.lf--airy .lf-tone--dawn .lf-bg::after { background: linear-gradient(90deg, rgba(255, 240, 244, .95) 0%, rgba(249, 221, 230, .8) 45%, rgba(243, 214, 232, .7) 100%); }
.lf--airy .lf-tone--night { background: #150c28; color: var(--cream); }
.lf--airy .lf-tone--night .lf-h { color: var(--cream); }
.lf--airy .lf-tone--night .lf-bg::after { background: linear-gradient(90deg, rgba(21, 12, 40, .95) 0%, rgba(36, 22, 64, .86) 45%, rgba(36, 22, 64, .8) 100%); }
.lf--airy .lf-cut > .lf-shot { box-shadow: 0 30px 80px rgba(79, 58, 130, .2), 0 0 0 1px rgba(79, 58, 130, .12); }
.lf--airy .lf-tone--night .lf-cut > .lf-shot { box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 194, 74, .3); }
.lf--airy .lf-cap { color: var(--ink); }
.lf--airy .lf-tone--night .lf-cap { color: var(--cream); }
.lf--airy .lf-scene--nacht .lf-mark { right: auto; left: 5.5%; top: 12%; margin-top: 0; width: 11cqw; }
.lf--airy .lf-scene--nacht .lf-text { top: auto; bottom: 18%; }
.lf-hero { position: absolute; left: 5.5%; top: 50%; transform: translateY(-50%); width: 52%; z-index: 2; }
.lf-h--hero { font-size: 6cqw; line-height: 1.04; }
.lf-hls { position: absolute; left: 41%; right: 5%; top: 18%; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqw; }
.lf-hl { display: grid; gap: .6em; justify-items: start; padding: 1.4em 1.3em; border-radius: 18px; background: #fff; color: var(--ink);
  font: 600 1.8cqw/1.15 'Fredoka Film', Fredoka, sans-serif; opacity: 0; box-shadow: 0 18px 50px rgba(79, 58, 130, .16); will-change: transform, opacity; }
.lf-hl svg { width: 1.6em; height: 1.6em; color: var(--coral); }
.lf-hl { box-shadow: inset 0 0 0 calc(var(--glow, 0) * 3px) rgba(255, 194, 74, var(--glow, 0)), 0 18px 50px rgba(79, 58, 130, .16); background: color-mix(in srgb, #fff calc(100% - var(--glow, 0) * 22%), var(--gold)); }
.lf--airy .lf-node { background: #fff; border-color: rgba(79, 58, 130, .18); color: var(--ink); }
.lf--airy .lf-node--ch { background: var(--plum); color: var(--cream); border-color: var(--gold); }
.lf--airy .lf-endcard { gap: 1.8cqw; }
.lf--airy .lf-mark--end { color: var(--plum); }
.lf--airy .lf-url { color: var(--coral); }
.lf--airy .lf-poster { background: linear-gradient(90deg, rgba(255, 250, 244, .96) 0%, rgba(255, 250, 244, .7) 60%, transparent 100%); color: var(--ink); }
.lf--airy .lf-btn { border-color: var(--ink); color: var(--ink); }
.lf--airy .lf-btn--main { color: #2a0f06; border-color: var(--coral); }
@media (max-width: 480px) {
  .lf--airy .lf-hls { left: 6%; right: 6%; top: 36%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf--airy .lf-hl { font-size: 4cqw; }
  .lf--airy .lf-hero { width: auto; right: 6%; }
  .lf--airy .lf-h--hero { font-size: 11cqw; }
}

/* Version 4, Titel bis zum Aufbau: Wort aus der Maske (äusserer Span schneidet, innerer steigt), Untertitel wortweise */
.lf-k { display: inline-block; overflow: hidden; vertical-align: top; padding: .02em .04em .16em; margin: 0 -.04em -.16em; opacity: 0; }
.lf-kt { display: inline-block; will-change: transform; transform-origin: 0 100%; }
.lf-ks { display: inline-block; opacity: 0; will-change: transform, opacity; }

/* Version 4, Aufbau hell (Farbe erst ab dem Drop): Schlagwörter dunkel, das letzte in Pflaume */
.lf--pulse .lf-tone--day .lf-h--kick { color: var(--ink); }
.lf--pulse .lf-tone--day .lf-kw:last-child { color: var(--plum); }

/* ── Version 4 «House» (DEC-437): Aufbau mit Schlagwörtern bis zum Drop, Montage auf Farbflächen ───────── */
.lf--pulse .lf-scene { will-change: transform, opacity; }
.lf--pulse .lf-tone--pulse { background: radial-gradient(120% 120% at 85% 10%, #FF8A5C 0%, #E8507A 32%, var(--plum) 68%, var(--plum-deep) 100%); color: #fff; }
.lf-orbs { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.lf-orb { position: absolute; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle, var(--orb, rgba(255, 214, 140, .55)) 0%, transparent 68%); }
.lf-orb[data-o="0"] { width: 52cqw; aspect-ratio: 1; left: -14cqw; bottom: -26cqw; }
.lf-orb[data-o="1"] { width: 34cqw; aspect-ratio: 1; right: 22%; top: -18cqw; --orb: rgba(255, 255, 255, .38); }
.lf-orb[data-o="2"] { width: 26cqw; aspect-ratio: 1; right: -6cqw; bottom: 8%; --orb: rgba(255, 106, 61, .5); }
.lf-kick { position: absolute; left: 5.5%; right: 5.5%; top: 50%; transform: translateY(-50%); z-index: 1; }
.lf--pulse .lf-h--kick { margin: 0; font-size: 7.6cqw; line-height: 1.02; letter-spacing: -.02em; color: #fff; }
.lf-kw { display: inline-block; opacity: 0; will-change: transform, opacity; }
.lf-kw:last-child { color: var(--gold); }
.lf-riser { position: absolute; left: 0; right: 0; bottom: -4cqw; height: .55cqw; border-radius: 99px;
  background: linear-gradient(90deg, var(--coral), var(--gold)); transform-origin: 0 50%; transform: scaleX(var(--g, 0)); }
.lf-slides { position: absolute; inset: 0; }
.lf-slide { position: absolute; inset: 0; margin: 0; opacity: 0; overflow: hidden; will-change: transform;
  display: grid; grid-template-columns: 36% minmax(0, 1fr); grid-template-rows: 100%; align-items: center; gap: 3%; padding: 0 4% 0 5.5%; color: #fff; }
.lf-slide--wide { grid-template-columns: 100%; grid-template-rows: auto auto; align-content: center; gap: 2.6cqw; padding: 0 5.5%; }
.lf-slide[data-c="0"] { background: linear-gradient(135deg, var(--plum) 0%, #2E1F55 100%); }
.lf-slide[data-c="1"] { background: linear-gradient(135deg, #FF7A4D 0%, #E8507A 100%); --orb: rgba(255, 220, 160, .6); }
.lf-slide[data-c="2"] { background: linear-gradient(135deg, #FFD36E 0%, #FFB0A0 100%); color: var(--plum-deep); --orb: rgba(255, 255, 255, .7); }
.lf-slide[data-c="3"] { background: linear-gradient(135deg, #2E1F55 0%, var(--night) 100%); --orb: rgba(255, 106, 61, .45); }
.lf-slide[data-c="4"] { background: linear-gradient(135deg, #F6C6D8 0%, #E8A6C8 100%); color: var(--plum-deep); --orb: rgba(255, 255, 255, .7); }
.lf-slide[data-c="5"] { background: linear-gradient(135deg, #E8507A 0%, var(--plum) 100%); --orb: rgba(255, 194, 74, .5); }
.lf-slide > .lf-orb { z-index: 0; }
.lf-bigcap { position: relative; z-index: 1; margin: 0; opacity: 0; font: 650 4cqw/1.06 'Fredoka Film', Fredoka, sans-serif; letter-spacing: -.01em; hyphens: auto; overflow-wrap: break-word; will-change: transform, opacity; }
.lf-slide--wide .lf-bigcap { font-size: 4.6cqw; }
.lf-bigcap::after { content: ''; display: block; margin-top: .45em; height: .5cqw; width: 70%; border-radius: 99px; background: currentColor; opacity: .85;
  transform-origin: 0 50%; transform: scaleX(var(--g, 0)); }
.lf-slide-shot { position: relative; z-index: 1; height: 80%; min-width: 0; display: grid; place-items: center; }
.lf-slide-shot > .lf-shot { display: block; width: 100%; max-height: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 34px 90px rgba(10, 4, 24, .45), 0 0 0 1px rgba(255, 255, 255, .25); }
.lf-slide--tall .lf-slide-shot > .lf-shot { width: auto; height: 100%; }
.lf-slide--wide .lf-slide-shot { height: auto; }
.lf-slide--phone .lf-slide-shot > .lf-shot { width: auto; height: 100%; border-radius: 30px; border: 7px solid #0d0718; }
/* ── Ethereal Pulse v2 (DEC-440/441, nur Profil v4v2) ─────────────────────────────────────────────────────────── */
/* «Planen» im farbigen Montage-Stil (Farbe ab dem Drop, der jetzt auf 0:23 liegt): Pink → Pflaume, goldene Lichtkugeln,
   ein grosses Wort, das wechselt und pumpt; «Los.» in Gold. */
.lf--pulse .lf-tone--beat { background: radial-gradient(120% 120% at 85% 8%, #E8507A 0%, var(--plum) 58%, var(--plum-deep) 100%); color: #fff; }
.lf-tone--beat .lf-orb[data-o="2"] { --orb: rgba(255, 194, 74, .42); }
.lf-pumpwords { position: absolute; inset: 0; z-index: 1; margin: 0; }
.lf-pw { position: absolute; left: 50%; top: 50%; opacity: 0; white-space: nowrap; transform: translate(-50%, -50%);
  font: 700 13cqw/1 'Fredoka Film', Fredoka, sans-serif; letter-spacing: -.02em; color: #fff;
  text-shadow: 0 .05em .2em rgba(36, 22, 64, .3); will-change: transform, opacity; }
.lf-pw:last-child { color: var(--gold); }
/* Sonnenaufgang auf dem ersten Swoosh: Nacht weicht, Himmel glüht von unten, Sonne steigt hinter dem Produktbild auf,
   Flare (Streifen + Reflexe) nur um den Gipfel. Liegt hinter Schrift und Bild (z-index 1, vor dem Hintergrundfoto). */
.lf-sunrise { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.lf-night { position: absolute; inset: 0; background: linear-gradient(180deg, #150c28 0%, #1d1238 55%, #2c1a4a 100%); }
.lf-sky { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(95% 70% at 64% 100%, rgba(255, 232, 186, .95) 0%, rgba(255, 206, 178, .62) 28%, rgba(238, 176, 210, .32) 52%, rgba(238, 176, 210, 0) 78%); }
.lf-sun, .lf-rays, .lf-flare, .lf-ghost { mix-blend-mode: screen; }
.lf-sun { position: absolute; left: 0; top: 0; width: 34cqw; aspect-ratio: 1; margin: -17cqw 0 0 -17cqw; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle, #FFFFFF 0%, #FFF9EC 8%, #FFEBBE 13%, rgba(255, 216, 156, .8) 18%, rgba(255, 198, 150, .38) 32%, rgba(255, 186, 162, .13) 48%, rgba(255, 186, 162, 0) 66%); }
.lf-rays { position: absolute; left: 0; top: 0; width: 76cqw; aspect-ratio: 1; margin: -38cqw 0 0 -38cqw; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: repeating-conic-gradient(from 0deg, rgba(255, 242, 214, .34) 0deg 2.2deg, rgba(255, 242, 214, 0) 2.2deg 11deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 22%, transparent 62%); mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 22%, transparent 62%); }
.lf-flare { position: absolute; left: -10%; right: -10%; top: 0; height: 0; opacity: 0; will-change: transform, opacity; }
.lf-flare::before { content: ''; position: absolute; left: 0; right: 0; top: -.5cqw; height: 1cqw; border-radius: 50%; filter: blur(2px);
  background: linear-gradient(90deg, rgba(255, 240, 215, 0) 0%, rgba(255, 236, 206, .5) 24%, rgba(255, 255, 250, 1) 50%, rgba(255, 236, 206, .5) 76%, rgba(255, 240, 215, 0) 100%); }
.lf-flare::after { content: ''; position: absolute; left: 10%; right: 10%; top: -3cqw; height: 6cqw; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(206, 188, 255, .5) 0%, rgba(206, 188, 255, .18) 40%, rgba(206, 188, 255, 0) 72%); }
.lf-ghost { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.lf-ghost[data-g="0"] { width: 5cqw; aspect-ratio: 1; margin: -2.5cqw 0 0 -2.5cqw; background: radial-gradient(circle, rgba(255, 220, 150, .5) 0%, rgba(255, 220, 150, .14) 58%, rgba(255, 220, 150, 0) 72%); }
.lf-ghost[data-g="1"] { width: 9cqw; aspect-ratio: 1; margin: -4.5cqw 0 0 -4.5cqw; background: radial-gradient(circle, rgba(196, 170, 255, 0) 50%, rgba(196, 170, 255, .26) 61%, rgba(196, 170, 255, 0) 72%); }
.lf-ghost[data-g="2"] { width: 3cqw; aspect-ratio: 1; margin: -1.5cqw 0 0 -1.5cqw; background: radial-gradient(circle, rgba(246, 176, 210, .55) 0%, rgba(246, 176, 210, 0) 70%); }
/* ── Instagram-Reels (FN-1427, DEC-441): Hochformat 9:16, eigenes Raster; Violett/Creme, Gold sparsam. Wichtige Schrift
   zwischen 14 % und 78 % der Höhe (Instagram legt oben Profil, unten Beschreibung und Knöpfe darüber). ── */
.lf--reel { aspect-ratio: 9 / 16; max-height: none; border-radius: 0; }
.lf--reel .lf-pw { font-size: 15cqw; }
.lf--reel .lf-pumpwords--phrase .lf-pw { font-size: 12.5cqw; }
.lf--reel .lf-text { left: 8%; right: 8%; width: auto; top: 16%; }
.lf--reel .lf-h { font-size: 11cqw; }
.lf--reel .lf-s { font-size: 4.6cqw; }
.lf--reel .lf-scene--sunrise .lf-text { top: auto; bottom: 26%; }
.lf--reel .lf-slide { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; gap: 4%; padding: 30% 8% 26%; }
.lf--reel .lf-bigcap { font-size: 10cqw; }
.lf--reel .lf-slide-shot { height: 100%; }
.lf--reel .lf-slide-shot > .lf-shot { width: 100%; max-height: 100%; }
.lf--reel .lf-slide--phone .lf-slide-shot > .lf-shot { width: auto; height: 100%; }
.lf--reel .lf-slide[data-c="0"] { background: linear-gradient(160deg, var(--plum) 0%, #2E1F55 100%); }
.lf--reel .lf-slide[data-c="1"] { background: linear-gradient(160deg, #7A64B8 0%, #4F3A82 100%); --orb: rgba(255, 220, 160, .45); }
.lf--reel .lf-slide[data-c="2"] { background: linear-gradient(160deg, #E9E3F5 0%, #C9BDE6 100%); color: var(--plum-deep); --orb: rgba(255, 255, 255, .7); }
.lf--reel .lf-slide[data-c="3"] { background: linear-gradient(160deg, #2E1F55 0%, var(--night) 100%); --orb: rgba(255, 194, 74, .4); }
.lf--reel .lf-orb[data-o="0"] { width: 110cqw; left: -40cqw; bottom: -40cqw; }
.lf--reel .lf-orb[data-o="1"] { width: 70cqw; right: -10%; top: -20cqw; }
.lf--reel .lf-orb[data-o="2"] { width: 55cqw; right: -15cqw; bottom: 20%; --orb: rgba(255, 194, 74, .38); }
.lf--reel .lf-sun { width: 64cqw; margin: -32cqw 0 0 -32cqw; }
.lf--reel .lf-rays { width: 150cqw; margin: -75cqw 0 0 -75cqw; }
.lf--reel .lf-flare::before { height: 1.6cqw; top: -.8cqw; }
.lf--reel .lf-flare::after { height: 10cqw; top: -5cqw; }
.lf--reel .lf-path { left: 8%; right: 8%; top: 50%; flex-direction: column; align-items: stretch; gap: 0; }
.lf--reel .lf-node { font-size: 4.4cqw; padding: .8em 1.2em; }
.lf--reel .lf-line { width: 4px; height: 6cqw; min-width: 0; flex: none; align-self: center; transform-origin: 50% 0; transform: scaleY(var(--g, 0)); }
.lf--reel .lf-endcard { left: 8%; right: 8%; top: 46%; gap: 4cqw; }
.lf--reel .lf-h--end { font-size: 11.5cqw; }
.lf--reel .lf-url { font-size: 6cqw; color: var(--plum); }
.lf--reel .lf-cta-note { font-size: 4.6cqw; }
/* Echtes Logo exakt wie die Datei: keine geerbte Kontur aus der Icon-Regel `.lf svg` (zeichnete sonst Ränder um jede Form). */
.lf .lf-lg-svg { width: 100%; height: auto; fill: none; stroke: none; }
.lf .lf-ch-cross { width: 1em; height: 1em; vertical-align: -.1em; display: inline-block; stroke: none; } /* ohne Kontur der Icon-Regel */
.lf--reel .lf-final { position: absolute; left: 50%; top: 46%; margin: 0; opacity: 0; white-space: nowrap; z-index: 3;
  font: 600 8.5cqw/1 'Fredoka Film', Fredoka, sans-serif; letter-spacing: -.01em; color: var(--plum); transform: translate3d(-50%, 0, 0); }
.lf--reel .lf-logo--lockup { display: flex; align-items: center; gap: 4cqw; }
.lf--reel .lf-logo-icon { width: 22cqw; display: block; will-change: transform, opacity; }
.lf--reel .lf-logo-word { width: 50cqw; display: block; }
.lf--reel .lf-logo-icon svg, .lf--reel .lf-logo-word svg { display: block; width: 100%; height: auto; }
.lf--reel .lf-pw--logo { line-height: 0; }
.lf--reel .lf-logo--word { display: block; width: 74cqw; }
.lf--reel .lf-logo--word svg { display: block; width: 100%; height: auto; }
.lf--reel .lf-tone--sun .lf-bg img { object-position: 62% 50%; }
.lf--reel .lf-poster { justify-items: stretch; align-content: end; padding-bottom: 30%; }

/* ── v3 (DEC-441) ── V-C: in der Montage von Ethereal Pulse v3 zwei Flächen violett statt Koralle/Gold; V-E: «14 Tage testen»
   als Kontur-Pille nur im Einzelbild-Render (MP4) — auf der Seite gibt es echte Knöpfe; Farbe wie der Titel. */
.lf--v4v7 .lf-slide[data-c="1"], .lf--v4v6 .lf-slide[data-c="1"], .lf--v4v5 .lf-slide[data-c="1"], .lf--v4v3 .lf-slide[data-c="1"] { background: linear-gradient(135deg, #7A64B8 0%, #4F3A82 100%); --orb: rgba(255, 220, 160, .45); }
.lf--v4v7 .lf-slide[data-c="2"], .lf--v4v6 .lf-slide[data-c="2"], .lf--v4v5 .lf-slide[data-c="2"], .lf--v4v3 .lf-slide[data-c="2"] { background: linear-gradient(135deg, #E9E3F5 0%, #C9BDE6 100%); color: var(--plum-deep); }
.lf--v4v5 .lf-pw--logo { line-height: 0; }
.lf--v4v5 .lf-logo--word { display: block; width: 44cqw; }
/* v6: Tiefe (Flo 01.10.: «viel mehr dreidimensional, Titel und Printscreens schweben»): Perspektive, Tiefenschatten. */
.lf--depth .lf-cuts, .lf--depth .lf-slide-shot { perspective: 1400px; }
.lf--depth .lf-cut, .lf--depth .lf-slide-shot { transform-style: preserve-3d; }
.lf--depth .lf-cut > .lf-shot, .lf--depth .lf-slide-shot > .lf-shot { box-shadow: 0 60px 120px rgba(8, 3, 18, .55), 0 22px 44px rgba(8, 3, 18, .4), 0 0 0 1px rgba(255, 255, 255, .18); }
.lf--depth .lf-h, .lf--depth .lf-bigcap { text-shadow: 0 .05em 0 rgba(8, 3, 18, .18), 0 .2em .45em rgba(8, 3, 18, .38); }
.lf--depth.lf--airy .lf-h { text-shadow: 0 .05em 0 rgba(79, 58, 130, .12), 0 .2em .45em rgba(79, 58, 130, .25); }
.lf-planlogo { position: absolute; left: 50%; top: 16%; width: 30cqw; transform: translateX(-50%); z-index: 1; }
.lf-planlogo .lf-logo--word { display: block; opacity: 0; will-change: transform, opacity; }
.lf-planlogo .lf-logo--word svg { display: block; width: 100%; height: auto; }
.lf-sunrise[data-k] .lf-sun { width: 20cqw; margin: -10cqw 0 0 -10cqw; }
.lf-cta-note { display: none; margin: 0; padding: .45em 1.1em; border: 2px solid currentColor; border-radius: 999px; width: max-content;
  font: 600 1.5cqw Inter, sans-serif; color: var(--cream); }
.lf--airy .lf-cta-note { color: var(--ink); }
.lf[data-state="render"] .lf-cta-note { display: block; }
.lf-veil { position: absolute; inset: 0; z-index: 4; background: #241640; pointer-events: none; opacity: 0; }
.lf[data-state="ready"] .lf-veil { display: none; }
@media (max-width: 480px) {
  .lf-slide { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: center; padding: 8% 6%; gap: 4%; }
  .lf-bigcap, .lf-h--kick { font-size: 9cqw; }
  .lf-pw { font-size: 20cqw; }
}
@media (prefers-reduced-motion: reduce) { .lf-poster { transition: none; } }
/* ── v7 (DEC-442) «Produktwerbung»: jedes Bildschirmfoto in einem schwarzen Gerät (Handy wie bisher 7 px, Tablet etwas
   breiter), fest geneigt mit Körpertiefe und weichem Schatten; die Planungsmatrix behält ihre Grösse, Querformate deutlich
   kleiner (Verhältnisse wie Ethereal Pulse 0:34–0:39). Beschriftungen und Titel bleiben flach. Grössen = Bildschirm ohne Rahmen. */
.lf--dev .lf-cut > .lf-stack { position: relative; }
.lf--dev .lf-stack > .lf-cap { top: -2.5cqw; }
.lf-dev { position: relative; display: block; box-sizing: border-box; background: #0d0718; }
.lf--dev .lf-dev { transform-style: preserve-3d; will-change: transform; transform: perspective(1400px) rotateY(-14deg) rotateX(5deg); transform-origin: 70% 50%;
  box-shadow: 0 2.6cqw 4.2cqw -.8cqw rgba(8, 3, 18, .62), 0 .9cqw 1.8cqw rgba(8, 3, 18, .32); }
.lf--dev .lf-dev::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #05020a; transform: translateZ(-1.1cqw); }
.lf--dev.lf--airy .lf-dev { box-shadow: 0 2.6cqw 4.2cqw -.8cqw rgba(36, 22, 64, .42), 0 .9cqw 1.8cqw rgba(36, 22, 64, .24); }
.lf-dev--tab { padding: .55cqw; border-radius: 1.35cqw; }
.lf-dev--phone { padding: .365cqw; border-radius: 1.5625cqw; }
.lf-dev > .lf-shot { display: block; overflow: hidden; border-radius: var(--rc, .8cqw); }
.lf-dev--phone > .lf-shot { border-radius: 1.2cqw; }
.lf--dev .lf-dev--matrix > .lf-shot { width: 55cqw; }
.lf--dev .lf-dev--land > .lf-shot { width: 44cqw; }
.lf--dev .lf-dev--port > .lf-shot { width: auto; height: 36cqw; }
.lf--dev .lf-dev--phone > .lf-shot { width: auto; height: 45cqw; }
/* Rise Above v7: in den Szenen mit Kinobalken steht der Titel unter dem oberen Balken (Flo: «werden abgeschnitten»). */
.lf--v1v7 .lf-scene--schweiz .lf-text { top: 16%; }
/* Ethereal Pulse v7: spannend einblendende Titel ohne Maske (keine Kachel), Seifenblase der Action-Titel, Sonne durch Bäume. */
.lf-cw { display: inline-block; opacity: 0; will-change: transform, opacity, filter; }
.lf-cs { opacity: 0; will-change: transform, opacity, filter; }
.lf-pop { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; }
.lf-text > .lf-pop { inset: 0; width: auto; height: auto; }
.lf-drop { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle at 34% 30%, #fff 0%, rgba(255, 255, 255, .7) 22%, rgba(255, 255, 255, .18) 52%, rgba(36, 22, 64, .28) 66%, rgba(36, 22, 64, 0) 74%); }
.lf-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.lf-glare > i { position: absolute; opacity: 0; mix-blend-mode: screen; will-change: transform, opacity; }
.lf-wash { inset: 0; mix-blend-mode: normal !important; background: linear-gradient(200deg, rgba(255, 249, 236, .9) 0%, rgba(255, 246, 236, .6) 50%, rgba(255, 244, 240, .4) 100%); }
.lf-glint { left: 0; top: 0; width: 70cqw; aspect-ratio: 1; margin: -35cqw 0 0 -35cqw; border-radius: 50%; mix-blend-mode: normal !important;
  background: radial-gradient(circle, rgba(255, 250, 238, .95) 0%, rgba(255, 238, 202, .55) 14%, rgba(255, 228, 192, .2) 34%, rgba(255, 228, 192, 0) 60%); }
.lf-streak { left: -10%; right: -10%; top: 0; height: 0; }
.lf-streak::before { content: ''; position: absolute; left: 0; right: 0; top: -.35cqw; height: .7cqw; border-radius: 50%; filter: blur(3px);
  background: linear-gradient(90deg, rgba(255, 240, 215, 0) 0%, rgba(255, 236, 206, .45) 28%, rgba(255, 252, 244, .9) 50%, rgba(255, 236, 206, .45) 72%, rgba(255, 240, 215, 0) 100%); }
.lf-sunrise--trees .lf-sky { background: radial-gradient(95% 70% at 64% 100%, rgba(255, 232, 196, .8) 0%, rgba(255, 210, 186, .45) 32%, rgba(238, 186, 214, 0) 76%); }
.lf--reel .lf-glint { width: 120cqw; margin: -60cqw 0 0 -60cqw; }
.lf--reel .lf-streak::before { height: 1.2cqw; top: -.6cqw; }
.lf-sheen { position: absolute; inset: -10% -30%; opacity: 0; pointer-events: none; will-change: transform, opacity;
  background: linear-gradient(105deg, rgba(255, 248, 232, 0) 30%, rgba(255, 248, 232, .55) 44%, rgba(255, 255, 250, .9) 50%, rgba(255, 248, 232, .55) 56%, rgba(255, 248, 232, 0) 70%); }
.lf--dev .lf-bigcap { z-index: 2; } /* v7: der platzende Titel bleibt über seinem Bildschirmfoto */
/* Reels v3 (DEC-442): dezenter Rahmen ohne Neigung; die Zelle ist ein eigener Grössen-Container, das Gerät passt immer ganz hinein
   (kein Abschneiden durch Titel oder Maske). Zeile unter «Wünsche» bzw. Kleingedrucktes im Schlussbild. */
.lf--reel.lf--v3 .lf-slide-shot { container-type: size; }
.lf--reel.lf--v3 .lf-dev { --pad: 9px; padding: var(--pad); border-radius: 26px; box-shadow: 0 24px 60px rgba(10, 4, 24, .45), 0 8px 18px rgba(10, 4, 24, .25);
  width: min(100cqw, calc((100cqh - 2 * var(--pad)) * var(--r) + 2 * var(--pad))); }
.lf--reel.lf--v3 .lf-dev--phone { --pad: 7px; border-radius: 30px; }
.lf--reel.lf--v3 .lf-dev > .lf-shot { width: 100%; height: auto; border-radius: var(--rc, 16px); }
.lf--reel.lf--v3 .lf-dev--phone > .lf-shot { border-radius: 23px; }
.lf--reel .lf-capwrap { position: relative; z-index: 1; min-width: 0; }
.lf--reel .lf-bigsub { margin: 2cqw 0 0; opacity: 0; font: 600 4.6cqw/1.25 Inter, sans-serif; will-change: transform, opacity; }
.lf--reel .lf-fine { margin: 0; opacity: 0; font: 500 3.6cqw/1.3 Inter, sans-serif; color: var(--ink-soft); }