/* ═══════════════════════════════════════════════════════════════════════════
   TheWed Landing V3 «Papeterie unter Studiolicht» — Prototyp Hero (S-01) +
   Kapitel «Einladen» (S-02). Einzige Autoritaet: docs/redesign/DESIGN-SPEC.md
   v1.5 (FREEZE) + docs/redesign/STORY.md v1.0 + docs/redesign/MOTION-SPEC.md.
   Laedt NUR auf /entwurf (spaeter /). tokens.css liefert Marken-Basis
   (--bg/--ink/--gold/... + Instrument Sans @font-face) — hier kommen nur die
   --lp-*-Ableitungen der Spec dazu (§1.2-Regel: nie in tokens.css).

   Rollen-Grenze: Dieses CSS definiert Layout, Komponenten-Zustaende (§4) und
   den 0-JS-/reduced-motion-Endzustand. ALLE Bewegungen (M-002/003/006/007/
   011/012/013/014-Transitionen) ergaenzt der motion-engineer unter
   html.lp-js/.lp-motion — hier wird nichts initial versteckt (HTML=Endzustand).
   Ausnahme: der portierte lp-veil-Bestandsbaustein (M-001, selbstaufloesend).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Schriften (DESIGN-SPEC §2.1, Gate 1b: Source Serif 4) ──────────────────
   Landing-Font-Satz = SS4 Roman + SS4 Italic + Instrument Sans (tokens.css).
   Fraunces traegt auf der Landing KEINE Rolle mehr (§2.1) und wird hier nie
   referenziert — so laedt der Browser sie auf /entwurf gar nicht erst. */
@font-face {
    font-family: "Source Serif 4";
    src: url("/assets/fonts/source-serif-4-roman.woff2?v=1") format("woff2");
    font-weight: 400 600; /* VF: wght 400-600 instanziert, opsz 8-60 voll */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("/assets/fonts/source-serif-4-italic.woff2?v=1") format("woff2");
    font-weight: 400; /* Italic: wght fest 400 (§2.1) */
    font-style: italic;
    font-display: swap;
}
/* Metrik-kompensierter Fallback — FINAL vermessen (fontTools, §2.1 v1.5):
   avg-Width-Ratio-Methode; Kontrolle 87.31% x 1.1865 = 1.036 = SS4-Ascent. */
@font-face {
    font-family: "SS4 Fallback";
    src: local("Georgia");
    size-adjust: 118.65%;
    ascent-override: 87.31%;
    descent-override: 28.23%;
    line-gap-override: 0%;
}

/* ═══ TOKEN-LAYER (einziger Ort mit Rohwerten; alles andere nutzt var()) ═══ */
:root {
    /* Schrift-Stack der Landing (§2.1) */
    --lp-font-display: "Source Serif 4", "SS4 Fallback", Georgia, serif;

    /* Farben — abgeleitete Stufen §1.2 (Kern-Toeene kommen aus tokens.css) */
    --lp-ink-raise: #3A352F;             /* Ink +8% L — einziger Primary-Hover */
    --lp-brass-lit: #C89B4B;             /* Messing im Licht — NUR auf Ink-Flaechen */
    --lp-stage-0: #FDFBF7;               /* Studiolicht-Verlauf der Buehnen */
    --lp-stage-1: #F5F1EA;
    --lp-stage-2: #F1EDE7;
    --lp-wash-45: rgba(245, 238, 223, .45); /* §4.6: Gold-Wash 45% — Adel der Agentur-Spalte */
    --lp-shadow-object: 0 18px 40px rgba(31, 28, 25, .10);   /* DER eine Objekt-Schatten */
    --lp-shadow-paper: 0 1px 2px rgba(31, 28, 25, .04), 0 10px 28px rgba(31, 28, 25, .05);
    --lp-line-on-ink: rgba(250, 248, 245, .14);              /* Hairlines auf Ink */
    --lp-fg-on-ink-soft: rgba(250, 248, 245, .70);           /* §4.11 Sekundaertext auf Ink */

    /* Spacing-Erweiterung §3.3 (4er-System; --s1..--s8 aus tokens.css) */
    --lp-s10: 64px;
    --lp-s12: 96px;
    --lp-s16: 128px;
    --lp-s20: 160px;
    --lp-s24: 192px;

    /* Container §3.1 */
    --lp-max-text: 720px;
    --lp-max-content: 1160px;
    --lp-max-stage: 1360px;

    /* Chrome-/Komponenten-Masse §4.1/§4.2/§4.3/§4.4 */
    --lp-nav-h: 72px;
    --lp-nav-h-m: 60px;
    --lp-btn-h: 52px;
    --lp-btn-h-sm: 44px;
    --lp-btn-h-nav: 40px;
    --lp-r-btn: 10px;
    --lp-r-card: 12px;
    --lp-r-stage: 16px;

    /* Motion-Charakter §5 (Transitionen selbst setzt der motion-engineer;
       --lp-ease-fold liegt hier als der eine benannte Falz der Seite) */
    --lp-ease-fold: cubic-bezier(.30, 0, .12, 1);
    --ease-out-quint: cubic-bezier(.22, 1, .36, 1); /* lp-veil-Bestandsbaustein */

    /* Typo-Skala §2.3 — Groessen-Token (wght/opsz/LH/LS stehen an den Stufen-
       Klassen, exakt tabelliert; Fluid-Norm: linear 390px→1440px) */
    --lp-t-display-1: clamp(2.75rem, 1.636rem + 4.571vw, 5.75rem);  /* 92px @1440 */
    --lp-t-display-2: clamp(2rem, 1.443rem + 2.286vw, 3.5rem);      /* 56px @1440 */
    --lp-t-display-3: clamp(1.5rem, 1.314rem + 0.762vw, 2rem);      /* 32px @1440 */
    --lp-t-title-sm: 1.25rem;
    --lp-t-wordmark: 1.375rem;      /* Nav 22px */
    --lp-t-wordmark-ft: 1.75rem;    /* Footer-Variante 28px (§4.11) */
    --lp-t-accent-i: 1.125rem;      /* Paar-Name in Werkkarten 18px (§4.4) */
    --lp-t-lead: clamp(1.125rem, 1.032rem + 0.381vw, 1.375rem);     /* 22px @1440 */
    --lp-t-body: 1.0625rem;         /* 17px */
    --lp-t-body-sm: 1rem;           /* 16px */
    --lp-t-small: 0.9375rem;        /* 15px */
    --lp-t-data: 0.9375rem;         /* 15px, immer tabular-nums */
    --lp-t-kicker: 0.8125rem;       /* 13px, UPPERCASE */
    --lp-t-btn: 1rem;
    --lp-t-btn-sm: 0.9375rem;
}
/* ═══ Ende Token-Layer — ab hier keine Hex-/Rohfarben mehr ═══ */

/* ── Basis ────────────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 76px; /* M-005 Tier-0: Anker landen unter der Nav */
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; } /* M-005 Tier-0-Fallback (Touch/0-JS) */
}
body.lp-v3 {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--lp-t-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Element-Spezifitaet (0,0,1), damit jede Komponenten-Klasse sie schlaegt —
   nur diese Seite laedt dieses CSS, tokens.css traegt keine Selektoren. */
a { color: inherit; text-decoration: none; }

/* Container: Stage-Breite + Seitenraender §3.1 (24 / 48 / 64) */
.lp-shell {
    max-width: calc(var(--lp-max-stage) + 2 * 64px);
    margin-inline: auto;
    padding-inline: 24px;
}
@media (min-width: 768px) { .lp-shell { padding-inline: 48px; } }
@media (min-width: 1024px) { .lp-shell { padding-inline: 64px; } }

/* Fokus-Regel global (§4-Kopf): Brass-Ring, Offset 3, Radius folgt Element */
.lp-v3 :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 2px;
}
.lp-v3 :where(.lp-btn, .lp-btn-2, .lp-nav-cta):focus-visible { border-radius: var(--lp-r-btn); }
.lp-footer :where(a):focus-visible { outline-color: var(--lp-brass-lit); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 90;
    background: var(--card);
    color: var(--ink);
    padding: var(--s3) var(--s4);
    border-radius: var(--lp-r-btn);
    box-shadow: var(--lp-shadow-paper);
}
.skip-link:focus-visible { left: var(--s4); top: var(--s4); }

/* Nur-Screenreader-Text (§4.13 v1.6: «Schritt n von 4» in den Joy-Steps) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Wiederkehrende Typo-Stufen (§2.3, exakt tabelliert) ─────────────────── */
/* Kicker: 13/600/+0.14em UPPERCASE + Brass-Faden 28x2 (Brass-Gesetz Nr. 1) */
.lp-kicker {
    display: flex;
    align-items: center;
    gap: var(--s3);
    font-size: var(--lp-t-kicker);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-dark);
}
.lp-kicker::before {
    content: "";
    width: 28px;  /* Kicker-Faden §1.3 (1) */
    height: 2px;
    background: var(--gold);
    flex: none;
}
.lp-kicker-c { justify-content: center; } /* zentrierte Koepfe (§4.13) */

.lp-lead {
    font-size: var(--lp-t-lead);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 640px; /* §2.3: Lead max. 640px Zeilenbreite */
}
.lp-body { font-size: var(--lp-t-body); line-height: 1.65; }
.lp-small { font-size: var(--lp-t-small); line-height: 1.55; letter-spacing: .01em; }
.lp-data {
    font-size: var(--lp-t-data);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}

/* Werkkarten-Zeile (§4.4 + Gate-1b-Probe 2, Muaz-gewaehlt): Italic-Paarname,
   Brass-Trennpunkte 5px (Brass-Gesetz Nr. 5), tnum-Datensegmente. Dient auch
   der Hero-Dossier-Registerzeile (identischer Datensatz, STORY S-01). */
.lp-wk-name {
    font-family: var(--lp-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--lp-t-accent-i);
    font-variation-settings: "opsz" 18; /* §2.3 accent-i: Microcopy ≤20px → 18 */
    color: var(--ink);
}
.lp-wk {
    font-size: var(--lp-t-data);
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.lp-wk-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    flex: none;
}

/* Paar-Namen im Fliesstext: SS4 Italic 400 (§2.4 — Emotion gehoert den Paaren) */
.lp-pair {
    font-family: var(--lp-font-display);
    font-style: italic;
    font-weight: 400;
    font-variation-settings: "opsz" 18;
}

/* ── lp-veil: Marken-Vorhang (Bestandsbaustein 1:1 portiert, M-001) ─────────
   Sichtbarkeit rein per CSS (kein blocking JS). Drei Abgaenge:
   1) landing-v3.js setzt .is-done (fruehestens 2.3s — die Ring-Vereinigung
      laeuft 2.1s und die Wartezeit wird zum Laden genutzt, Muaz 25.07.),
   2) CSS-Failsafe blendet nach 2.9s+.5s selbst aus,
   3) noscript/reduced-motion zeigen ihn nie.
   Einzige V3-Anpassung: Wortmarke in --lp-font-display statt Fraunces
   (§2.1: Fraunces traegt auf der Landing keine Display-Rolle mehr;
   Wortmarken-Stufe §2.3: SS4 550, 22px, opsz 24, LS -0.01em). */
.lp-veil {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s4);
    background: var(--bg);
    animation: lp-veil-out .5s var(--ease) 2.9s forwards;
}
.lp-veil.is-done {
    animation: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
/* Zwei echte Ringe (Muaz 25.07.) auf EINER Standlinie: die Aufbauten sind
   verschieden hoch, die Reifen stehen beide unten auf. Der negative Abstand
   ist die Ehering-Ueberlappung — sie fahren zusammen, nicht ineinander.
   Gekippt wird um den STANDPUNKT, sie richten sich also auf. */
.lp-veil-rings {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: lp-veil-fade .35s ease-out both;
}
.lp-veil-rings img { height: 132px; width: auto; transform-origin: 50% 100%; }
.lp-ring-a { animation: lp-ring-a 2.1s both; }
.lp-ring-b { margin-left: -34px; animation: lp-ring-b 2.1s both; }
.lp-veil-word {
    margin: 0;
    font-family: var(--lp-font-display);
    font-weight: 550;
    font-size: var(--lp-t-wordmark);
    font-variation-settings: "opsz" 24, "wght" 550;
    letter-spacing: -.01em;
    /* Die Wortmarke kommt, wenn die Ringe fast beieinander sind (Ring-Halt
       liegt bei 54-68 % von 2.1s) — nicht schon waehrend sie anreisen. */
    animation: lp-veil-fade .6s var(--ease-out-quint) 1.25s both;
}
.lp-veil-word em { font-style: normal; color: var(--gold-dark); }
.lp-veil.is-done .lp-veil-rings,
.lp-veil.is-done .lp-veil-word {
    transform: translateY(-8px);
    transition: transform .45s var(--ease-out-quint);
}
@keyframes lp-veil-out { to { opacity: 0; visibility: hidden; } }
@keyframes lp-veil-fade { from { opacity: 0; } }
/* Halt bei 0-16 %: die Ausfahrkurve zieht so stark, dass die Neigung sonst
   nach ~200 ms weg waere, bevor man sie liest. Dann kippen sie DURCH die
   Senkrechte (-24 → +9 Grad) und lehnen sich gegeneinander (Muaz 25.07.). */
@keyframes lp-ring-a {
    0%, 16% { transform: translateX(-64px) rotate(-24deg); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    58%, 70% { transform: translateX(-22px) rotate(-4deg); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
    100% { transform: translateX(0) rotate(9deg); }
}
@keyframes lp-ring-b {
    0%, 16% { transform: translateX(64px) rotate(24deg); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
    58%, 70% { transform: translateX(22px) rotate(4deg); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
    100% { transform: translateX(0) rotate(-9deg); }
}
/* Nach dem .lp-veil-Block, sonst verliert display:none den Kaskaden-Tie */
@media (prefers-reduced-motion: reduce) {
    .lp-veil { display: none; }
}

/* ── Navigation lp-nav (§4.1) ─────────────────────────────────────────────── */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--lp-nav-h-m);
    background: var(--bg); /* opak, kein Blur (§4.1) */
}
@media (min-width: 768px) { .lp-nav { height: var(--lp-nav-h); } }
/* Hairline unten erst ab Scroll-Y > 8px — Zustand hier, Transition M-004 */
.lp-nav::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: var(--line);
    opacity: 0;
}
.lp-nav.is-scrolled::after { opacity: 1; }
.lp-nav-in {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lp-brand {
    display: flex;
    align-items: center;
    line-height: 1;
    color: var(--ink);
}
.lp-brand-mark { display: block; height: 26px; width: auto; }
.lp-nav-right { display: flex; align-items: center; gap: 40px; } /* §4.1 Abstand 40 */
.lp-nav-links { display: none; }
@media (min-width: 768px) { .lp-nav-links { display: flex; gap: 40px; } }
.lp-nav-links a {
    font-size: var(--lp-t-small);
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--ink-soft);
    transition: color .2s var(--ease);
}
.lp-nav-links a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--gold);
    text-underline-offset: 6px;
}
.lp-nav-links a:active { color: var(--gold-dark); }
.lp-nav-links a[aria-current="page"] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--gold);
    text-underline-offset: 6px;
}

/* ── Buttons (§4.2 — genau drei Typen) ────────────────────────────────────── */
/* Primary «Stempel» */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--lp-btn-h);
    padding-inline: 28px;
    border: 0;
    border-radius: var(--lp-r-btn);
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font-sans);
    font-size: var(--lp-t-btn);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.lp-btn:hover { background: var(--lp-ink-raise); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.lp-btn:active { background: var(--ink); transform: translateY(0); box-shadow: none; }
.lp-btn:disabled,
.lp-btn[aria-disabled="true"] {
    background: var(--surface);
    color: var(--muted-light);
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

/* Secondary «Hairline» */
.lp-btn-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--lp-btn-h);
    padding-inline: 26px;
    border: 1.5px solid var(--border-soft);
    border-radius: var(--lp-r-btn);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--lp-t-btn);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    cursor: pointer;
    transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.lp-btn-2:hover { border-color: var(--gold-dark); color: var(--gold-dark); }
.lp-btn-2:active { border-color: var(--gold-dark); color: var(--gold-dark); background: var(--gold-bg); }
.lp-btn-2:disabled,
.lp-btn-2[aria-disabled="true"] {
    border-color: var(--line);
    color: var(--muted-light);
    background: transparent;
    cursor: not-allowed;
}

/* Nav-CTA: Button-Secondary klein 40px (§4.1/§4.2 Masse klein) */
.lp-nav-cta {
    display: inline-flex;
    align-items: center;
    height: var(--lp-btn-h-nav);
    padding-inline: 20px;
    border: 1.5px solid var(--border-soft);
    border-radius: var(--lp-r-btn);
    color: var(--ink);
    font-size: var(--lp-t-btn-sm);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.lp-nav-cta:hover { border-color: var(--gold-dark); color: var(--gold-dark); }
.lp-nav-cta:active { background: var(--gold-bg); }

.lp-nav-demo {
    display: none;
    align-items: center;
    height: var(--lp-btn-h-nav);
    padding-inline: 16px;
    border-radius: var(--lp-r-btn);
    background: var(--gold-bg);
    color: var(--gold-dark);
    font-size: var(--lp-t-btn-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: background .2s var(--ease);
}
.lp-nav-demo:hover { background: var(--gold-bg-hover, var(--gold-bg)); color: var(--gold-dark); }
@media (min-width: 560px) { .lp-nav-demo { display: inline-flex; } }

/* Quiet «Faden»: Textlink + Draht-Pfeil 16x16, Stroke 1.75 --gold (§4.2/§4.12) */
.lp-quiet {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    color: var(--gold-dark);
    font-size: var(--lp-t-btn);
    font-weight: 600;
    line-height: 1;
    transition: color .2s var(--ease);
}
.lp-quiet svg {
    width: 16px;
    height: 16px;
    stroke: var(--gold);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex: none;
}
.lp-quiet:hover {
    color: var(--gold-hover);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}
.lp-quiet:active { color: var(--gold-active); }
.lp-quiet[aria-disabled="true"] { color: var(--muted-light); }
.lp-quiet[aria-disabled="true"] svg { stroke: var(--line); }
/* W-03 (Kuer) bewusst NICHT umgesetzt: Byte-Deckel (C.2 — nie der Deckel). */

/* ── S-01 Hero «Das Dossier» (STORY S-01; reine Typo, KEIN Bluetenecho §6) ──
   100vh-Budget ohne Pin; Anatomie/Ausrichtung nach Gate-1b-Probe 2
   (linksbuendig, Muaz-gewaehlt). Rhythmus §3.4: pt 96 / pb 128 (Mobile 48/64),
   Kicker→H1 16, H1→Lead 24, Lead→CTA-Strecke 40. */
/* ── Hero: klassisch, zweispaltig (Text + die Einladungskarte als Artefakt) ── */
.lp-hero {
    min-height: calc(100svh - var(--lp-nav-h-m));
    display: flex;
    align-items: center;
    padding-block: var(--s8) var(--lp-s10);
}
@media (min-width: 768px) {
    .lp-hero {
        min-height: calc(100svh - var(--lp-nav-h));
        padding-block: var(--lp-s12) var(--lp-s16);
    }
}
.lp-hero-grid { display: grid; gap: var(--lp-s10); align-items: center; }
@media (min-width: 1024px) {
    .lp-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--lp-s12); }
}
.lp-hero-art { display: none; }
@media (min-width: 1024px) {
    .lp-hero-art { display: block; width: min(380px, 100%); margin-inline: auto; }
}
.lp-hero-art-cap {
    margin-top: var(--s5);
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

/* ── «Das System» — Joy-Mechanik A: Rauszoom + Kartenschwarm (M-100…M-105) ──
   Die Einladungskarte fuellt die Buehne (--z 1) und zoomt beim Scrollen auf
   .40 heraus; in den frei werdenden Raum fliegen die echten Produkt-Fenster
   (--p 0 → 1). BASIS = ENDZUSTAND: ohne JS steht die Collage fertig. */
.lp-system {
    /* Die Collage ist die abgehende Flaeche fuer Kapitel 1 — sie braucht darum
       dieselbe Kamera (M-112) wie die Kapitel, sonst steht sie in voller Deckung
       da, waehrend das erste Kapitel schon hereinblendet (Muaz 13.07.). */
    --cz: 1;
    --cy: 0px;
    --cx: 0px;
    --co: 1;
    transform: translate(var(--cx), var(--cy)) scale(var(--cz));
    opacity: var(--co);
    --z: .32;   /* Karten-Zoom: 1 = fuellt den Schirm, .32 = Platz in der Collage (Joy: .325 gemessen) */
    --p: 1;     /* Fenster-Schwarm: 0 = ausserhalb, 1 = am Platz */
    --o1: 1;    /* Bluetenschrift auf der Karte: Livia & Jonas (das Fallbeispiel) */
    --o2: 0;    /* Sophie & Elias — nur waehrend des Blaetterns (M-106) */
    --o3: 0;    /* Nora & Luca */
    position: relative;
    padding-block: var(--lp-s12) var(--lp-s10);
    background: linear-gradient(180deg, var(--bg), var(--surface-2) 50%, var(--bg));
}
/* +88svh: genau der Puffer, in den Kapitel 1 hineinragt (M-112). Ohne ihn
   frisst die Ueberlappung das Ende des Rauszooms. */
html.lp-motion .lp-system { min-height: calc(340vh + 88svh); padding-block: 0; }
.lp-system-stage { display: flex; flex-direction: column; gap: var(--s5); }
html.lp-motion .lp-system-stage {
    position: sticky;
    top: var(--lp-nav-h);
    height: calc(100svh - var(--lp-nav-h));
    justify-content: center;
    overflow: hidden;
}
.lp-system-head {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    flex: none;
    max-width: 620px;
    margin-inline: auto;
    padding-inline: var(--s5);
    text-align: center;
    z-index: 6;
}
.lp-system-kicker {
    font-size: var(--lp-t-kicker);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 650;
    color: var(--gold-dark);
}
.lp-system-lead {
    font-size: var(--lp-t-body);
    line-height: 1.6;
    color: var(--ink-soft);
    text-wrap: pretty;
}
.lp-hero-scene {
    position: relative;
    flex: 1;
    min-height: 0;
    width: min(1000px, 94vw);
    margin-inline: auto;
    display: grid;
    place-items: center;
}
/* Ab 1250px feste Geometrie 980x580 — der Goldfaden ist darauf gerechnet. */
@media (min-width: 1250px) {
    .lp-hero-scene {
        flex: none;
        width: 980px;
        height: min(580px, calc(100svh - 250px));
    }
}

/* Goldfaden: Basis voll gezeichnet; Einzel-Draw = M-115. */
.lp-flow {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.lp-flow path {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--wp,1));
    opacity: .85;
    vector-effect: non-scaling-stroke;
}
.lp-flow circle { fill: var(--gold); }
@media (max-width: 1249px) { .lp-flow { display: none; } }

/* M-115 «Der Faden traegt» (FADEN-002): --aN ab --wN=1; Defaults ,1 = Endzustand. */
@media (min-width: 1250px) {
    .lp-flow path:nth-of-type(1) { --wp: var(--w0,1); }
    .lp-flow path:nth-of-type(2) { --wp: var(--w1,1); }
    .lp-flow path:nth-of-type(3) { --wp: var(--w2,1); }
    .lp-flow path:nth-of-type(4) { --wp: var(--w3,1); }
    .lp-flow circle:nth-of-type(1) { opacity: min(var(--w0,1)*3,1); }
    .lp-flow circle:nth-of-type(2) { opacity: var(--a0,1); }
    .lp-flow circle:nth-of-type(3) { opacity: min(var(--w1,1)*3,1); }
    .lp-flow circle:nth-of-type(4) { opacity: var(--a1,1); }
    .lp-flow circle:nth-of-type(5) { opacity: var(--a2,1); }
    .lp-flow circle:nth-of-type(6) { opacity: var(--a3,1); }
    .lp-win-row--q { position: relative; }
    .lp-win-row--q::before { content: ""; position: absolute; inset: -2px -6px; z-index: -1; border-radius: 6px; background: var(--gold-bg); opacity: min(var(--w0,1)*3,1); }
    /* --a (draht=a0 … mail=a3) setzt M-115 direkt am Fenster (21.07.): --aN an
       .lp-system invalidierte 1'662 Knoten je Write. 0-JS = var(--a,1). */
    .lp-win .lp-win-dot.is-brass { background: var(--muted-light); position: relative; }
    .lp-win .lp-win-dot.is-brass::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gold); opacity: var(--a,1); }
    /* M-115a Badge · M-115b Slot · M-115c Posten · M-115d Snippet */
    .is-chosen b { opacity: var(--a,1); transform: translateY(calc((1 - var(--a,1))*3px)); }
    .lp-msg--out { opacity: calc(var(--a,1)*var(--a,1)); transform: translateY(calc((1 - var(--a,1))*4px)); }
    .lp-win-slot.is-neu, .lp-win--budget .lp-win-row, .lp-win-snip { opacity: var(--a,1); transform: translateY(calc((1 - var(--a,1))*6px)); }
    .lp-win--budget .lp-win-bar i { transform-origin: 0; transform: scaleX(calc(.95 + .05*var(--a,1))); }
    .lp-win-src { opacity: calc(var(--a,1)*var(--a,1)); }
}

/* W-06 · Ankunfts-Puls: Dot klopft ZWEIMAL auf der M-115-1-Flanke. Query-
   Literal «1.0000» = toFixed(4) der KETTE (scenes.js); ::after nur >=1250. */
@keyframes lp-knock {
    50% { transform: scale(1.35); }
}
@container style(--a: 1.0000) {
    html.lp-motion .lp-win .lp-win-dot.is-brass::after {
        animation: lp-knock .3s var(--ease) 2;
    }
}

/* Das Zoom-Objekt: die Einladungskarte */
.lp-hero-card {
    position: relative;
    z-index: 3;
    width: min(880px, 88vw);
    transform: scale(var(--z));
    transform-origin: center;
    will-change: transform;
}
.lp-card-inner {
    position: relative;
    /* Innenmasse auf die 880er-Kartenbreite gerechnet — die Karte skaliert per
       transform, ihre Proportion muss darum bei scale 1 schon stimmen. */
    padding: 100px 64px 92px;
    text-align: center;
    background: linear-gradient(160deg, #FDFBF7, var(--gold-bg));
    border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
    border-radius: 30px;
    box-shadow: 0 2px 4px rgba(31, 28, 25, .05), 0 24px 56px -24px rgba(31, 28, 25, .35);
}
.lp-card-inner::before {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
    border-radius: 16px;
    pointer-events: none;
}
.lp-card-eyebrow {
    font-size: 18px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold-dark);
    font-weight: 650;
}
.lp-card-names {
    font-family: var(--lp-font-display);
    font-size: 62px;
    font-variation-settings: "opsz" 40, "wght" 500;
    line-height: 1.1;
    margin-top: var(--s2);
    white-space: nowrap;
}
.lp-card-names em { font-style: italic; color: var(--gold-dark); }

/* Die Bluetenschrift auf der Karte (M-106): drei ECHTE Engine-Ausgaben liegen
   deckungsgleich uebereinander, der Scrub blendet sie durch (--o1/--o2/--o3)
   waehrend die Karte noch 880-580px breit ist — man sieht jede Bluete.
   Basis = Livia & Jonas allein: das Fallbeispiel, auf das die Produkt-Fenster
   und der Goldfaden zeigen. Ohne JS bleibt es dabei. */
.lp-card-flor {
    position: relative;
    aspect-ratio: 1789 / 388;
    margin-top: var(--s2);
}
.lp-cf {
    position: absolute;
    inset: 0;
    /* ~2500 SVG-Knoten in 3 Karten: Layout erst nahe Viewport rechnen.
       Kein CLS-Risiko (absolute Overlays im aspect-ratio-Parent). */
    content-visibility: auto;
}
.lp-cf[data-cf="1"] { opacity: var(--o1, 1); }
.lp-cf[data-cf="2"] { opacity: var(--o2, 0); }
.lp-cf[data-cf="3"] { opacity: var(--o3, 0); }
.lp-cf svg { display: block; width: 100%; height: auto; }

.lp-card-meta {
    display: grid;
    font-size: 21px;
    color: var(--ink-soft);
    margin-top: var(--s3);
}
.lp-cm { grid-area: 1 / 1; }
.lp-cm[data-cf="1"] { opacity: var(--o1, 1); }
.lp-cm[data-cf="2"] { opacity: var(--o2, 0); }
.lp-cm[data-cf="3"] { opacity: var(--o3, 0); }
.lp-card-cta {
    display: inline-block;
    margin-top: var(--s5);
    padding: 12px 34px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    font-size: 21px;
    font-weight: 650;
}
/* Im Hero (statisch, nicht gezoomt) sitzt dieselbe Karte kleiner */
.lp-hero-art .lp-card-inner { padding: 28px 28px 26px; border-radius: 18px; }
.lp-hero-art .lp-card-inner::before { inset: 9px; border-radius: 10px; }
.lp-hero-art .lp-card-eyebrow { font-size: 11px; letter-spacing: .28em; }
.lp-hero-art .lp-card-names { font-size: 38px; }
.lp-hero-art .lp-card-meta { font-size: 13px; }
.lp-hero-art .lp-card-cta { font-size: 13px; padding: 8px 22px; margin-top: var(--s4); }

/* Die Produkt-Fenster: echte Oberflaechen von TheWed, die in den Raum fliegen.
   --fx/--fy (im style-Attribut) = STARTversatz; bei --p 1 sitzen sie am Platz.
   Anmutung = Werkzeug, nicht Notizzettel: Kopfzeile, Hairline, Tiefenschatten. */
.lp-win {
    position: absolute;
    z-index: 2;
    width: 262px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(31, 28, 25, .05),
        0 8px 16px -8px rgba(31, 28, 25, .12),
        0 28px 56px -24px rgba(31, 28, 25, .28);
    font-size: 12px;
    line-height: 1.45;
    transform: translate(calc(var(--fx) * (1 - var(--p))), calc(var(--fy) * (1 - var(--p))));
    opacity: var(--p);
    will-change: transform, opacity;
}
.lp-win-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.lp-win-head b {
    margin-left: auto;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.lp-win-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted-light);
    flex: none;
}
.lp-win-dot.is-brass { background: var(--gold); }
.lp-win-body { padding: 10px 12px 12px; }
.lp-win-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid var(--surface-2);
    color: var(--ink);
    white-space: nowrap;
}
.lp-win-row:last-of-type { border-bottom: 0; }
.lp-win-row b {
    flex: none;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 6px;
    font-variant-numeric: tabular-nums;
}
.lp-win-row b.is-ok { color: var(--ok); background: var(--ok-bg); }
.lp-win-row b.is-open { color: var(--warn); background: var(--warn-bg); }
.lp-win-row b.is-sent { color: var(--muted); background: var(--surface-2); }
.lp-win-row b.is-neu {
    color: var(--gold-dark);
    background: var(--gold-bg);
    text-transform: none;
    letter-spacing: 0;
}
.lp-win-foot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    font-size: 10px;
    color: var(--muted);
    white-space: normal;
}
/* Draht: Chat mit Entscheidung — das Kernfeature */
.lp-msg {
    max-width: 88%;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.4;
}
.lp-msg--in {
    background: var(--surface-2);
    color: var(--ink);
    border-bottom-left-radius: 3px;
}
.lp-msg--out {
    background: var(--gold-bg);
    color: var(--ink);
    border-bottom-right-radius: 3px;
    margin-left: auto;
    margin-top: 8px;
    text-align: right;
}
.lp-choice { display: grid; gap: 5px; margin: 8px 0 0; }
.lp-choice-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    font-size: 11px;
    color: var(--ink-soft);
    white-space: nowrap;
}
.lp-choice-opt i {
    margin-left: auto;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}
.lp-choice-opt.is-chosen {
    border-color: var(--ok);
    color: var(--ink);
    font-weight: 600;
}
.lp-choice-opt.is-chosen i { color: var(--ink); }
.lp-choice-opt b {
    position: absolute;
    top: -7px;
    right: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--ok);
    color: #fff;
    font-size: 8px;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}
/* Kalender-Zeilen */
.lp-win-slot {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--surface-2);
    color: var(--ink-soft);
    white-space: nowrap;
}
.lp-win-slot span {
    flex: none;
    width: 38px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-weight: 650;
}
.lp-win-slot.is-neu { color: var(--ink); font-weight: 600; }
.lp-win-slot.is-neu span { color: var(--gold-dark); }
.lp-win-slot.is-neu i {
    margin-left: auto;
    font-style: normal;
    font-size: 9px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gold-dark);
    background: var(--gold-bg);
    border-radius: 999px;
    padding: 1px 6px;
}
.lp-win-guard {
    margin-top: 8px;
    padding: 5px 8px;
    border-left: 3px solid var(--info);
    border-radius: 0 6px 6px 0;
    background: var(--info-bg);
    font-size: 10px;
    color: var(--info);
    font-weight: 600;
    white-space: normal;
}
/* Budget-Balken */
.lp-win-bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    margin: 0 0 8px;
}
.lp-win-bar i {
    display: block;
    height: 100%;
    width: 96%;
    background: linear-gradient(90deg, var(--gold), var(--gold-dark));
}
/* Buchungsanfrage */
.lp-win-snip {
    font-size: 11px;
    font-style: italic;
    color: var(--muted);
    line-height: 1.5;
    white-space: normal;
}
.lp-win-send {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 16px;
    border-radius: 999px;
    background: var(--gold-dark);
    color: #fff;
    font-size: 10px;
    font-weight: 650;
}

/* Plaetze in der Collage (Endzustand): links die Quellen, rechts die drei
   Orte, die der Draht fuellt. Kein Ecken-Wurf — ein Arbeitsplatz. */
.lp-win--gaeste { left: 0; top: 0; z-index: 4; }
.lp-win--draht { left: 0; bottom: 0; width: 330px; z-index: 5; }
.lp-win--kalender { right: 0; top: 0; width: 296px; z-index: 4; }
.lp-win--budget { right: 0; top: 50%; translate: 0 -50%; width: 296px; z-index: 4; }
.lp-win--mail { right: 0; bottom: 0; width: 296px; z-index: 4; }
/* --budget traegt zusaetzlich die vertikale Zentrierung im Flug-Transform. */
.lp-win--budget {
    transform: translate(calc(var(--fx) * (1 - var(--p))), calc(-50% + var(--fy) * (1 - var(--p))));
    translate: none;
}
/* Der Draht ist das Kernfeature — er darf lauter sein. */
.lp-win--draht {
    border-color: color-mix(in srgb, var(--gold) 34%, var(--line));
    box-shadow:
        0 1px 2px rgba(31, 28, 25, .05),
        0 10px 20px -8px rgba(31, 28, 25, .14),
        0 36px 64px -28px rgba(31, 28, 25, .32);
}
.lp-win--draht .lp-win-head { background: var(--gold-bg); color: var(--gold-dark); }

/* Die drei Orte tragen sichtbar, woher der Eintrag kommt. */
.lp-win-src {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .04em;
    line-height: 1.4;
    color: var(--gold-dark);
    text-wrap: pretty;
}
.lp-win-src::before {
    content: "";
    width: 14px;
    height: 1.5px;
    border-radius: 999px;
    background: var(--gold);
    flex: none;
}

@media (max-width: 1249px) {
    .lp-win { width: 244px; font-size: 11px; }
    .lp-win--draht { width: 288px; }
    .lp-win--kalender, .lp-win--budget, .lp-win--mail { width: 268px; }
    .lp-win--mail { display: none; }
    .lp-win--budget { top: auto; bottom: 0; translate: none; }
    .lp-win--budget { transform: translate(calc(var(--fx) * (1 - var(--p))), calc(var(--fy) * (1 - var(--p)))); }
}
/* <1024px: kein Ausblenden, kein scale mehr — die Fenster sind dort die
   fuenf Telefon-Buehnen der Erklaerstrecke (M-119, Block «Telefon-Strecke»
   am Dateiende). Inhalt verschwindet nicht, weil ein Layout nicht passt. */

/* reduced-motion: kein Zoom, kein Flug — die Collage steht (Basis greift). */
@media (prefers-reduced-motion: reduce) {
    html.lp-motion .lp-system { min-height: auto; padding-block: var(--lp-s10) var(--lp-s8); }
    html.lp-motion .lp-system-stage { position: static; height: auto; }
}
.lp-h1 {
    font-family: var(--lp-font-display);
    font-weight: 500;
    font-size: var(--lp-t-display-1);
    line-height: 1.04; /* §2.3 v1.5: SS4-Ascender + de-CH-Umlaute */
    letter-spacing: -.01em;
    font-variation-settings: "opsz" 60, "wght" 500;
    margin-top: var(--s4);
    text-wrap: balance;
}
.lp-h1-line { display: block; } /* M-002: H1 als 2 Zeilen-Spans */
/* Die Randnotiz: genau EIN <em>-Wort, Italic 400, bleibt Ink (§2.4) */
.lp-h1 em,
.lp-h2 em {
    font-style: italic;
    font-weight: 400;
    font-variation-settings: "opsz" 60; /* erbt Stufe (§2.3 accent-i) */
    color: inherit;
}
.lp-h2 em { font-variation-settings: "opsz" 40; }
.lp-hero .lp-lead { margin-top: var(--s5); }
.lp-hero-body {
    font-size: var(--lp-t-body);
    line-height: 1.65;
    max-width: 640px;
    margin-top: var(--s4);
}
/* Dossier-Registerzeile (M-003): 5 tnum-Segmente im Werkkarten-Muster */
.lp-dossier {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: var(--s4);
    row-gap: var(--s2);
    margin-top: var(--s5);
}
.lp-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s4);
    margin-top: 40px; /* §3.4: Lead→CTA 40px */
}

/* ── Joy-Kapitel S-02/S-03/S-04/S-05 (§4.13-Blaupause) ──────────────────────
   Rhythmus §3.4 Joy: pt 160 / pb 96 (Mobile 96/64) — Scroll-Raum liegt innen.
   Step-Bahn-Hoehen §4.13 (v1.7, verbindlich — die pauschale 80svh-Angabe
   ist AUFGEHOBEN): --lp-step-h = Pin-Budget ÷ Stepzahl. S-02 4×75svh
   (300vh, Basis) · S-03/S-04 4×60svh (240vh) · S-05 3×100svh (300vh) —
   Gesamt exakt 1'080vh = MOTION-SPEC §0.6 (20vh Reserve zum 1'100-Deckel).
   Mobile <768 pauschal 56svh, alle Kapitel (.lp-step). */
.lp-joy {
    --lp-step-h: 75svh;
    padding-block: var(--lp-s12) var(--lp-s10);
}
@media (min-width: 768px) { .lp-joy { padding-block: var(--lp-s20) var(--lp-s12); } }
.lp-joy--240 { --lp-step-h: 60svh; }
.lp-joy--300x3 { --lp-step-h: 100svh; }

/* Kapitel-Kopf zentriert, max 720px (§4.13); danach 64px (Mobile 48, §3.4) */
.lp-joy-head {
    max-width: var(--lp-max-text);
    margin-inline: auto;
    text-align: center;
}
.lp-h2 {
    font-family: var(--lp-font-display);
    font-weight: 500;
    font-size: var(--lp-t-display-2);
    line-height: 1.10; /* §2.3 v1.5 */
    letter-spacing: -.005em;
    font-variation-settings: "opsz" 40, "wght" 500;
    margin-top: var(--s4);
    text-wrap: balance;
}
.lp-joy-head .lp-lead { margin-inline: auto; margin-top: var(--s5); }
.lp-joy-body {
    font-size: var(--lp-t-body);
    line-height: 1.65;
    margin-top: var(--s4);
}
.lp-joy-grid { margin-top: var(--s8); }
@media (min-width: 768px) { .lp-joy-grid { margin-top: var(--lp-s10); } }

/* Desktop ≥1024: 12-Spalten-Split — Buehne Sp. 1-7, Luft Sp. 8, Steps Sp. 9-12
   (§3.1/§4.13; die ASCII-px 766/424 sind Naeherungen dieses Rasters).
   <1024: Stack-Modus (§3.2: Joy-Kapitel→Stack ab Tablet abwaerts). */
@media (min-width: 1024px) {
    .lp-joy-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: 32px; /* Gutter ≥1024 (§3.1) */
    }
    .lp-joy-steps { grid-column: 9 / 13; grid-row: 1; }
    /* Alternanz-Spiegelung (§4.13 Pflicht, M-020): Buehne rechts, Steps
       links — DOM-Reihenfolge bleibt (Mobile-Stack: Buehne oben), nur die
       Grid-Plaetze spiegeln; grid-row 1 haelt beide in derselben Zeile
       (Auto-Placement wuerde die Steps sonst in Zeile 2 schieben). Der
       Progressfaden wandert an die Buehnen-Kante der Steps-Spalte
       (gespiegeltes Pendant zu «Spalte-9-Kante − 24px»). */
    .lp-joy--flip .lp-stagewrap { grid-column: 6 / 13; grid-row: 1; }
    .lp-joy--flip .lp-joy-steps { grid-column: 1 / 5; }
    .lp-joy--flip .lp-thread-y { left: auto; right: -24px; }
}

/* Sticky-Buehne: direktes Kind von .lp-joy-grid, damit der Sticky-Bezug
   (Parent-Hoehe) im Stack-Modus die Steps umfasst. Desktop top 96px;
   Stack klebt an der Nav-Kante (Mobile-Blaupause 60px, Tablet 72px). */
.lp-stagewrap {
    position: sticky;
    top: var(--lp-nav-h-m);
    z-index: 2;
}
@media (min-width: 768px) { .lp-stagewrap { top: var(--lp-nav-h); } }
@media (min-width: 1024px) {
    .lp-stagewrap {
        grid-column: 1 / 8;
        align-self: start; /* sonst streckt Grid das Item — Sticky braucht Bahn */
        top: var(--lp-s12);
        z-index: auto;
    }
}

/* Studio-Passepartout §4.4 — DER Rahmen aller Produkt-Beweise. Statisch,
   NIE ein Hover. Mobile <768: feste 44svh (CLS-0-Platzhalter, §4.13). */
.lp-stage {
    display: flex;
    flex-direction: column;
    height: 44svh;
    border: 1px solid var(--line);
    border-radius: var(--lp-r-card);
    background: radial-gradient(120% 90% at 50% 0%, var(--lp-stage-0) 0%, var(--lp-stage-1) 55%, var(--lp-stage-2) 100%);
    overflow: hidden;
}
@media (min-width: 1024px) {
    .lp-stage {
        height: auto;
        min-height: 560px;
        max-height: calc(100svh - var(--lp-s16));
        border-radius: var(--lp-r-stage);
    }
}
.lp-stage-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s5);
    min-height: 24px; /* Kopfzeile h 24 (§4.4) */
    padding: var(--s5) 20px 0; /* Mobile: 24px 20px 0 (§4.4) */
}
@media (min-width: 1024px) { .lp-stage-head { padding: 40px 64px 0; } }
.lp-stage-kicker {
    font-size: var(--lp-t-kicker);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-dark);
}
.lp-stage-meta {
    display: none;
    font-size: var(--lp-t-data);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .01em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .lp-stage-meta { display: block; } } /* Mobile: Meta entfaellt (§4.4) */

/* Werkstueck-Bereich: zentriert, 48px darueber / 56px darunter (§4.4);
   Panels liegen uebereinander (grid-area 1/1, M-011). Min-Hoehe 320px
   Desktop; Mobile regelt die feste 44svh-Buehne den Platzhalter. */
.lp-stage-work {
    flex: 1;
    display: grid;
    place-items: center;
    padding: var(--s5) 20px;
    min-height: 200px;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .lp-stage-work { padding: var(--s8) 64px 56px; min-height: 320px; }
}
.lp-stage-panel {
    grid-area: 1 / 1;
    width: 100%;
    max-height: 60vh; /* Werkstueck max-h (§4.4) */
    opacity: 0;
    visibility: hidden;
}
/* Panel-Sichtbarkeit = kumulative is-step-N-Logik des [data-wire]-Motors.
   0-JS/reduced-motion (keine is-step-Klasse): Panel 4 = END-Zustand steht
   (§4.13-0-JS-Regel). Transition/Transform dazu liefert M-011. */
[data-wire]:not(.is-step-1) .lp-stage-panel[data-stage-panel="4"],
[data-wire].is-step-1:not(.is-step-2) .lp-stage-panel[data-stage-panel="1"],
[data-wire].is-step-2:not(.is-step-3) .lp-stage-panel[data-stage-panel="2"],
[data-wire].is-step-3:not(.is-step-4) .lp-stage-panel[data-stage-panel="3"],
[data-wire].is-step-4 .lp-stage-panel[data-stage-panel="4"] {
    opacity: 1;
    visibility: visible;
}

/* ── Buehnen-Innereien S-02 «Einladen» (showcase-engineer) ──────────────────
   Miniatur-Werkstuecke des echten Produkts. Quellen (Stand 11.07.2026):
   P1 src/Views/guests/import.php + src/Services/GuestCsvImporter.php ·
   P2 src/Views/rsvp/_kopf.php + src/Models/InvitationRepository.php ·
   P3 src/Views/guests.php (Invite-Banner, Share-Chips) ·
   P4 src/Views/guests.php + guests/_row.php + guests/dietary.php +
   dashboard.php (Zusagen-KPI). Der INHALT traegt echte Produkt-Farben:
   Signal-Tinten --ok/--warn/--err(+ -bg) aus tokens.css = App-Status-Pills
   (Kontrast zum Buehnen-Rahmen ist gewollt, wird nicht harmonisiert).
   Produkt-Serif Fraunces darf hier nicht laden (§2.1) — --lp-font-display
   steht im Werkstueck als Stand-in. Miniatur-Groessen unterschreiten die
   §2.3-Skala bewusst (Produkt-Massstab, wie V2-Bestand). */
.lp-work {
    width: min(100%, 520px);
    margin-inline: auto;
    padding: var(--s5);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--lp-r-card);
    box-shadow: var(--lp-shadow-object); /* Licht von oben (§4.4) */
    font-size: var(--lp-t-data);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .01em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: left;
}
.lp-work svg {
    stroke: var(--gold); /* Draht-Ikonografie §4.12 */
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex: none;
}
.lp-work .lp-work-check {
    width: 16px;
    height: 16px;
    stroke: var(--gold-dark); /* §4.12: Haken-Listen in --gold-dark */
}
.lp-work-rows { list-style: none; }
.lp-work-rows li {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding-block: var(--s2);
    border-top: 1px solid var(--line);
}
.lp-work-foot {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
    font-weight: 400;
    color: var(--ink-soft);
}
.lp-work-foot b { font-weight: 600; color: var(--ink); }

/* Panel 1 — CSV-Import: Datei-Chip + Spalten-Mapping (Import-Flow) */
.lp-file {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s2);
    padding-bottom: var(--s3);
}
.lp-file svg { width: 18px; height: 18px; }
.lp-file-name { font-weight: 600; }
.lp-file-meta { margin-left: auto; color: var(--muted); }
.lp-map-src { font-weight: 400; color: var(--ink-soft); }
.lp-map-arrow { width: 16px; height: 16px; }
.lp-map-dst { font-weight: 600; }
.lp-map-row .lp-work-check { margin-left: auto; }

/* Panel 2 — Einladungs-Karte (RSVP-Portalkopf) + persoenliche Links */
.lp-inv-card {
    text-align: center;
    padding: var(--s5) var(--s4) var(--s4);
    margin-bottom: var(--s3);
    background: var(--input-bg);
    border: 1px solid var(--line);
    border-radius: var(--lp-r-btn);
}
.lp-inv-eyebrow {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold-dark);
}
.lp-inv-names {
    font-family: var(--lp-font-display);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: 0;
    font-variation-settings: "opsz" 40, "wght" 500;
    margin-top: var(--s1);
}
.lp-inv-names em {
    font-style: italic;
    font-weight: 400;
    font-variation-settings: "opsz" 40;
    color: var(--gold-dark);
}
.lp-inv-date {
    font-size: .8125rem;
    color: var(--muted);
    margin-top: var(--s1);
}
.lp-inv-cta {
    display: inline-block;
    margin-top: var(--s3);
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
}
.lp-link {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--gold-bg);
    color: var(--gold-dark);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Panel 3 — Kanal-Moment: Link teilen (Share-Chips), Status-Fuehrung */
.lp-share-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s2);
    padding-bottom: var(--s2);
    font-weight: 600;
}
.lp-share-head svg { width: 16px; height: 16px; }
.lp-share-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    padding-block: var(--s3);
    border-top: 1px solid var(--line);
}
.lp-share-chip {
    padding: 6px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
}
.lp-share-sum {
    display: grid;
    gap: var(--s1);
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
}
.lp-share-sum b { font-size: var(--lp-t-body); font-weight: 600; }
.lp-share-sum span { font-size: .8125rem; font-weight: 400; color: var(--muted); }

/* Panel 4 — Ruecklauf: Zusagen-KPI (M-013), Status-Zeilen, Caterer-Zeile */
.lp-inv-kpi {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s2) var(--s3);
    padding-bottom: var(--s2);
}
.lp-inv-sum { font-size: var(--lp-t-body); font-weight: 600; }
.lp-inv-count {
    display: inline-block;
    min-width: 2ch; /* M-013: feste ch-Breite — countUp ohne Layout-Shift */
    text-align: right;
}
.lp-inv-flank { font-size: .8125rem; color: var(--muted); }
.lp-status-rows .lp-st {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.lp-st-ok { color: var(--ok); background: var(--ok-bg); }
.lp-st-open { color: var(--warn); background: var(--warn-bg); }
.lp-st-sent { color: var(--muted); background: var(--surface-2); }
.lp-st-no { color: var(--err); background: var(--err-bg); }
.lp-cater {
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
    font-size: .8125rem;
    font-weight: 400;
    color: var(--ink-soft);
}
.lp-cater b { font-weight: 600; color: var(--ink); }

/* Mobile <768: 44svh-Buehne — Miniatur verdichtet, Beispielzeilen reduziert
   (alle Aussagen stehen weiterhin als Text in den Steps) */
@media (max-width: 767.98px) {
    .lp-work { padding: var(--s4); font-size: .8125rem; }
    .lp-work-rows li { padding-block: var(--s1); }
    .lp-m-hide { display: none; }
    /* .lp-work-rows li ist [0,1,1] und schlaegt die generische .lp-m-hide-
       Klasse [0,1,0] sonst aus (P-201 qa-R2-fix) — hier gezielt haerten. */
    .lp-work-rows li.lp-m-hide { display: none; }
    .lp-inv-card { padding: var(--s4) var(--s3) var(--s3); }
    .lp-inv-names { font-size: 1.25rem; }
    .lp-inv-sum { font-size: var(--lp-t-body-sm); }
    .lp-share-sum b { font-size: var(--lp-t-body-sm); }
}

/* ── Buehnen-Innereien S-03 «Terminieren» (showcase-engineer) ───────────────
   Quellen (Stand 11.07.2026): P1 src/Controllers/CalendarImportController.php
   (validate: BEGIN:VCALENDAR/.ics · import: VEVENT-Zaehlung, UID-Upsert) +
   src/Views/calendar/import.php · P2 src/Views/calendar/agenda.php — der
   No-JS-Pfad des echten Kalenders (ag-date/ag-tag/ag-item/ag-time); Termin-
   Tinten = Gewerk-Gruppen aus CalendarController::TYPE_GROUPS auf den
   --evt-*-Tokens · P3 CalendarController::VISIBILITIES + flash('ok') ·
   P4 src/Views/calendar/compare.php (Vergleich + Doppelbuchungs-Banner,
   BookingConflictService) + V2-Waechter-Blatt (landing.css .lp-guard.is-info,
   Info-Tinte --info aus tokens.css). Miniatur-Massstab wie S-02. */
.lp-ics-tag {
    flex: none;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}
.lp-ics-row .lp-work-check { margin-left: auto; }
.lp-cal-src { list-style: none; padding-bottom: var(--s2); }
.lp-cal-src li {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 2px var(--s1);
    border-radius: 4px;
    font-size: .8125rem;
    color: var(--ink-soft);
}
.lp-cal-src-t { margin-left: auto; color: var(--muted); white-space: nowrap; }
/* M-021-Zustand (a): Quellzeile markiert sich — Klasse setzt der
   motion-engineer, die 200-ms-Transition gehoert seiner MOTION-LAYER-Zeile. */
.lp-cal-src li.is-hit { background: var(--gold-bg); }
.lp-cal-min { border-top: 1px solid var(--line); }
.lp-cal-day {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding-top: var(--s3);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
}
.lp-cal-tag {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--gold-bg);
    color: var(--gold-dark);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.5;
}
.lp-cal-rows { list-style: none; }
.lp-cal-row {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding-block: var(--s1);
}
.lp-cal-time { min-width: 42px; font-weight: 600; }
.lp-cal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}
.lp-evt-milestone { background: var(--evt-milestone); }
.lp-evt-venue { background: var(--evt-venue); }
.lp-evt-floral { background: var(--evt-floral); }
.lp-cal-what small { margin-left: var(--s1); font-size: .75rem; font-weight: 400; color: var(--muted); }
.lp-flash-ok {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    margin-bottom: var(--s3);
    border-radius: 8px;
    background: var(--ok-bg);
    color: var(--ok);
    font-size: .8125rem;
    font-weight: 600;
}
.lp-flash-ok svg { width: 16px; height: 16px; stroke: var(--ok); }
.lp-vis {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.lp-vis-pair { color: var(--gold-dark); background: var(--gold-bg); }
.lp-vis-int { color: var(--muted); background: var(--surface-2); }
.lp-cmp-name {
    flex: none;
    min-width: 118px;
    font-family: var(--lp-font-display);
    font-style: italic;
    font-weight: 400;
    font-variation-settings: "opsz" 18;
    color: var(--ink);
}
.lp-cmp-evts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--s1) var(--s2);
    margin-left: auto;
    font-size: .8125rem;
    color: var(--ink-soft);
    text-align: right;
}
.lp-guard {
    margin-top: var(--s3);
    padding: var(--s3);
    border: 1px solid var(--line);
    border-left: 3px solid var(--info);
    border-radius: 8px;
    background: var(--info-bg);
}
.lp-guard-line { font-size: .8125rem; font-weight: 600; }
.lp-guard-line em {
    font-style: normal;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--info);
}
.lp-guard-conflict { margin-top: 2px; font-size: .75rem; color: var(--ink-soft); }
.lp-guard-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--s2);
    color: var(--info);
    font-size: .75rem;
    font-weight: 600;
}
.lp-guard-badge svg { width: 14px; height: 14px; stroke: var(--info); }

/* ── Buehnen-Innereien S-04 «Budgetieren» (showcase-engineer) ───────────────
   Quellen (Stand 11.07.2026): src/Views/budget.php (bud-kv «Ziel», Posten-
   Zeilen Label + num-Betrag, «Kommt aus dem Erstgespraech»-Microcopy,
   Ueber-Ziel-Pfad) + public/assets/css/budget.css (bud-bar h 6 auf
   --surface, bud-fill --gold .45, --w-Breite 1:1) + BudgetMath::overview
   (committed/goal-Prozente — im View aus $fall gerechnet). tnum erbt von
   .lp-work, CHF-Apostroph via $fall. Ueber-Ziel-Tinte der Buehne = --warn
   (STORY S-04/M-031; die App faerbt den Balken --err — die Buehne erzaehlt
   die Warnung VOR dem Fehler, Panel 4 entwarnt). */
.lp-bud-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s1) var(--s3);
    padding-bottom: var(--s2);
}
.lp-bud-title { font-weight: 600; }
.lp-bud-goal { font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.lp-bud-kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    padding-block: var(--s3);
    border-top: 1px solid var(--line);
}
.lp-bud-kv b { font-size: 1.25rem; font-weight: 600; }
.lp-bud-rows li { justify-content: space-between; }
.lp-bud-more span { font-weight: 400; color: var(--muted); }
.lp-bud-nach { font-weight: 400; color: var(--ink-soft); }
.lp-bud-chf { margin-left: auto; font-weight: 600; white-space: nowrap; }
.lp-bud-plus { color: var(--warn); }
.lp-bud-minus { color: var(--ok); }
.lp-bud-sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
    font-weight: 600;
}
.lp-bud-sum b { font-size: 1.125rem; }
.lp-bud-chf.is-warn { color: var(--warn); }
.lp-bud-bar {
    display: block;
    position: relative;
    height: 6px;
    margin-block: var(--s2) var(--s3);
    background: var(--surface);
    border-radius: 999px;
    overflow: hidden;
}
.lp-bud-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    border-radius: inherit;
    background: var(--gold);
    opacity: .45;
}
.lp-bud-bar.is-over .lp-bud-fill { background: var(--warn); opacity: .5; }
.lp-bud-warn,
.lp-bud-ok {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: .8125rem;
    font-weight: 600;
}
.lp-bud-warn { background: var(--warn-bg); color: var(--warn); }
.lp-bud-warn svg { width: 16px; height: 16px; stroke: var(--warn); flex: none; }
.lp-bud-ok { background: var(--ok-bg); color: var(--ok); }
.lp-bud-ok svg { width: 16px; height: 16px; stroke: var(--ok); flex: none; }

/* Werkkarte: Hairline oben, h ≥64, Brass-Trennpunkte (§4.4) */
.lp-stage-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: var(--s4);
    row-gap: var(--s2);
    min-height: 64px;
    padding: 20px; /* Mobile zweizeilig; Desktop 20px 64px (§4.4) */
    border-top: 1px solid var(--line);
    background: var(--lp-stage-2);
}
@media (min-width: 1024px) { .lp-stage-card { padding: 20px 64px; } }

/* Erklaer-Schritte (§4.13): Desktop min-h var(--lp-step-h) (v1.7-Tabelle
   pro Kapitel, s. o.), Mobile pauschal 56svh + padding 24 */
.lp-joy-steps { position: relative; }
.lp-step {
    min-height: 56svh;
    display: flex;
    align-items: center;
    padding: var(--s5) 0;
}
@media (min-width: 1024px) { .lp-step { min-height: var(--lp-step-h, 75svh); padding: 0; } }
.lp-step-in { max-width: 400px; }
.lp-step-kicker {
    font-size: var(--lp-t-kicker);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-dark);
    font-variant-numeric: tabular-nums;
}
.lp-step-title {
    font-family: var(--lp-font-display);
    font-weight: 550;
    font-size: var(--lp-t-display-3);
    line-height: 1.2;
    letter-spacing: 0;
    font-variation-settings: "opsz" 24, "wght" 550;
    margin-top: var(--s4);
}
.lp-step-text {
    font-size: var(--lp-t-body-sm);
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 46ch; /* §4.13: Text ≤46ch */
    margin-top: var(--s3);
}
/* Aktiv-/Ruhe-Zustand der Steps setzt der Motor (is-active, opacity .45,
   M-014 Feld 3) — Basis hier ist der vollwertige 0-JS-Zustand: alles steht. */

/* Quiet-Faden am Kapitelende (STORY §2.2: «Im Verzeichnis: …») */
.lp-joy-cta { padding-block: var(--s5) var(--s5); }

/* Progressfaden (M-014, §4.13): Hairline --line, Brass-Segment 24x2
   (Brass-Gesetz Nr. 8). Basis-Zustand = statisch vollstaendig (Segment am
   Ende) fuer 0-JS/reduced-motion; die Wanderung uebernimmt der Motor.
   Desktop: vertikal, 24px links der Steps-Spalte. Mobile: horizontal
   unter der Buehne. */
.lp-thread { display: block; position: relative; }
.lp-thread-y { display: none; }
@media (min-width: 1024px) {
    .lp-thread-y {
        display: block;
        position: absolute;
        left: -24px; /* x = Spalte-9-Kante − 24px (§4.13) */
        top: 0;
        bottom: 0;
        width: 1px;
        background: var(--line);
    }
    .lp-thread-y .lp-thread-seg {
        position: absolute;
        left: -0.5px;
        top: calc(100% - 24px);
        width: 2px;
        height: 24px;
        background: var(--gold);
    }
}
.lp-thread-x {
    position: relative;
    height: 1px;
    margin-top: var(--s3);
    background: var(--line);
}
.lp-thread-x .lp-thread-seg {
    position: absolute;
    top: -0.5px;
    left: calc(100% - 24px);
    width: 24px;
    height: 2px;
    background: var(--gold);
}
@media (min-width: 1024px) { .lp-thread-x { display: none; } }

/* ── Inhalts-Container §3.1: Standard-Sektionen, Matrix, Tarife (1160) ────── */
.lp-content {
    max-width: var(--lp-max-content);
    margin-inline: auto;
}

/* ── Falzmarke §4.5 (Setzplan v1.6: genau zwei — vor S-07, vor S-08) ────────
   Hairline 1px --line ueber Containerbreite, mittig unterbrochen vom
   Brass-Segment 56x2 (Brass-Gesetz Nr. 4). Kein Eigen-Abstand: den
   Weissraum tragen die Sektions-Paddings (§3.4). */
.lp-fold {
    max-width: var(--lp-max-content);
    margin-inline: auto;
    display: flex;
    align-items: center;
    /* W-02: das Papier hebt sich — ~24px Schatten, mobil ~16px (vw-Mass) */
    box-shadow: 0 clamp(9px, 1.2vw, 14px) clamp(12px, 1.6vw, 18px) clamp(-12px, -1vw, -8px) color-mix(in srgb, var(--ink) 16%, transparent);
}
.lp-fold-seg {
    width: 56px;
    height: 2px;
    background: var(--gold);
    flex: none;
}
.lp-fold::before,
.lp-fold::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}
/* W-02: das Segment faehrt beim Reveal EINMAL die Falz entlang, dann Ruhe */
html.lp-reveal .lp-fold.in .lp-fold-seg {
    animation: lp-fold-run .35s var(--lp-ease-fold) .06s backwards;
}
@keyframes lp-fold-run {
    from { transform: translateX(min(-30vw, -160px)); }
}

/* ── S-05 «Gestalten»: Werkstueck-Slots der Signature-Buehne (§6, M-040–044)
   Duo-Setzung §6 (v1.7 P11, verbindlich): beide Engine-Ausgaben
   UNTEREINANDER in voller Passepartout-Innenbreite (Desktop wie Mobile,
   @1440 ≈ 638px je Ausgabe), row-gap 24px — Korrekturabzug-Vergleich,
   Zeile unter Zeile; das Nebeneinander-Layout ist ERSETZT. Slots tragen
   die exakte Engine-Geometrie 1789x388 als aspect-ratio — CLS 0, bevor
   der showcase-engineer die Inline-SVGs setzt (BM-16). */
.lp-stage-work--flor {
    align-content: center;
}
.lp-flor-duo {
    width: 100%;
    display: grid;
    row-gap: var(--s5); /* §6 v1.7: 24px zwischen den Ausgaben */
    align-items: center;
}
.lp-flor-out { width: 100%; aspect-ratio: 1789 / 388; }
.lp-flor-out svg { display: block; width: 100%; height: auto; }
/* Standsatz M-043 (§2.3/§6 v1.7): --lp-t-display-3 (SS4 Roman 550,
   opsz 24, LH 1.2, 32px @1440), Ink, zentriert, KEIN Italic —
   48px Abstand zum Duo, 24px zur Kollektions-Zeile darunter. */
.lp-flor-satz {
    margin-top: var(--s8);
    font-family: var(--lp-font-display);
    font-weight: 550;
    font-size: var(--lp-t-display-3);
    line-height: 1.2;
    letter-spacing: 0;
    font-variation-settings: "opsz" 24, "wght" 550;
    color: var(--ink);
    text-align: center;
}
/* Kollektions-Zeile M-044 (§6 v1.7 P10): reiner Text --lp-t-body-sm
   (16px), --ink-soft, zentriert — keine Chips, kein Daten-Duktus. */
.lp-flor-koll {
    margin-top: var(--s5);
    font-size: var(--lp-t-body-sm);
    line-height: 1.6;
    color: var(--ink-soft);
    text-align: center;
}
@media (max-width: 767.98px) {
    .lp-stage--flor { height: 72svh; }
    .lp-flor-satz { margin-top: var(--s6); }
    .lp-flor-koll { margin-top: var(--s4); }
}

/* ── S-06 «Platzieren»: Resultat-Showcase, kein Pin (STORY ≈150vh) ──────────
   Rhythmus §3.4 «Produkt-Buehne zentral»: 192/192 (Mobile 96/96);
   Kopf→Inhalt 64 (Mobile 48). Buehne = Studio-Passepartout ohne
   44svh-Klemme (statisches Resultat, Werkstueck-Minima §4.4: 320/200). */
.lp-res { padding-block: var(--lp-s12); }
@media (min-width: 768px) { .lp-res { padding-block: var(--lp-s24); } }
.lp-res .lp-stage { margin-top: var(--s8); }
@media (min-width: 768px) { .lp-res .lp-stage { margin-top: var(--lp-s10); } }
.lp-stage--res { height: auto; }
.lp-stage--res .lp-stage-work { min-height: 200px; }
@media (min-width: 1024px) { .lp-stage--res .lp-stage-work { min-height: 320px; } }
.lp-res-cta {
    margin-top: var(--s5);
    text-align: center;
}

/* ── Buehnen-Innereien S-06: Sitzplan-Resultat (showcase-engineer) ──────────
   Port des V2-lpr-Blocks (public/assets/css/landing.css Z. 614–639, Stand
   11.07.2026): Raum/Zonen/Tische/Sitze/Badge-Werte 1:1, Sitzfarben = echte
   Editor-Kategorie-Tinten (--evt-* aus tokens.css). Zwei V3-Anpassungen:
   (1) Sitz-Konturen mischen mit var(--ink) statt V2-black — warmes
   Druckschwarz der Marke, kein Rohwert im Token-Layer-Kontrakt;
   (2) der Plan liegt als «Druckbogen» auf einer Card mit dem einen
   Objekt-Schatten (§4.4/M-050 «das fertige Blatt legt sich hin»).
   Keine V2-Step-Choreografie: S-06 ist Resultat, EINE Enthuellung M-050. */
.lpr-sheet {
    width: min(100%, 780px);
    margin-inline: auto;
    padding: var(--s5);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--lp-r-card);
    box-shadow: var(--lp-shadow-object);
}
.lpr-svg { display: block; width: 100%; height: auto; }
.lpr-room { fill: var(--bg); stroke: var(--ink); stroke-width: 2; }
.lpr-zone rect { fill: var(--surface-2); stroke: var(--border-soft); stroke-width: 1; stroke-dasharray: 5 4; }
.lpr-zone text,
.lpr-badge text {
    text-anchor: middle;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    fill: var(--muted);
}
.lpr-top { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.lpr-nr { text-anchor: middle; font-family: var(--font-sans); font-size: 12px; font-weight: 700; fill: var(--ink); }
.lpr-nr-e { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; }
.lpr-seat { stroke-width: 1.2; }
.lpr-k-core { fill: var(--evt-core); stroke: color-mix(in srgb, var(--evt-core) 70%, var(--ink)); }
.lpr-k-venue { fill: var(--evt-venue); stroke: color-mix(in srgb, var(--evt-venue) 70%, var(--ink)); }
.lpr-k-floral { fill: var(--evt-floral); stroke: color-mix(in srgb, var(--evt-floral) 70%, var(--ink)); }
.lpr-k-image { fill: var(--evt-image); stroke: color-mix(in srgb, var(--evt-image) 70%, var(--ink)); }
.lpr-k-sound { fill: var(--evt-sound); stroke: color-mix(in srgb, var(--evt-sound) 70%, var(--ink)); }
.lpr-badge rect { fill: var(--gold-bg); stroke: var(--gold); stroke-width: 1; }
.lpr-badge text { fill: var(--gold-dark); font-size: 10.5px; }
/* Legende: V2-Muster im V3-Duktus (--lp-t-data statt V2-.68rem) */
.lpr-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    margin-top: var(--s4);
    font-size: var(--lp-t-data);
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--muted);
}
.lpr-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: calc(-1 * var(--s2) + 4px);
}
.lpr-legend i.lpr-k-core { background: var(--evt-core); }
.lpr-legend i.lpr-k-venue { background: var(--evt-venue); }
.lpr-legend i.lpr-k-floral { background: var(--evt-floral); }
.lpr-legend i.lpr-k-image { background: var(--evt-image); }
.lpr-legend i.lpr-k-sound { background: var(--evt-sound); }
@media (max-width: 767.98px) {
    .lpr-sheet { padding: var(--s3); }
    .lpr-legend { font-size: .8125rem; gap: var(--s1) var(--s3); }
}

/* ── S-07 «Der Entscheid»: Beweis-Sektion §3.4 (128/128, Mobile 64/64) ────── */
.lp-tarife,
.lp-register { padding-block: var(--lp-s10); }
@media (min-width: 768px) {
    .lp-tarife,
    .lp-register { padding-block: var(--lp-s16); }
}

/* Der Intervall-Umschalter (M-061) ist mit dem Ein-Preis-Abo (01.08.)
   ersatzlos entfallen — ein Preis braucht keinen Toggle. */

/* Tarif-Buehne «Das Wertdokument» (WOW-001 A): W-04-Studiolicht, W-05-Monument */
.lp-plans {
    display: grid;
    margin-top: var(--s8);
}
@media (min-width: 1024px) {
    .lp-plans--eins {
        grid-template-columns: minmax(0, 720px);
        justify-content: center;
    }
}
.lp-plan {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    padding: var(--s6);
    background: var(--card);
    border: 1.5px solid var(--gold);
    border-radius: var(--lp-r-card);
    box-shadow: var(--lp-shadow-paper);
    overflow: hidden;
}
.lp-plan-glow {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: -12%;
    width: min(80vw, 480px);
    height: min(56vw, 340px);
    transform: translateX(-50%);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 14%, transparent), transparent 72%);
    pointer-events: none;
}
.lp-one {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: var(--s2);
}
.lp-one-chf {
    margin-right: .3em;
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--ink-soft);
}
.lp-one-num {
    font-size: clamp(3.5rem, 2.2rem + 5.2vw, 6rem);
    font-weight: 380;
    line-height: 1;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
}
.lp-one-num i {
    font-style: normal;
    color: var(--gold);
}
.lp-one-suffix {
    margin-left: var(--s2);
    font-size: var(--lp-t-data);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 479px) {
    .lp-one-suffix { flex-basis: 100%; margin: var(--s1) 0 0; }
}
.lp-one-sub {
    margin-top: var(--s2);
    font-size: var(--lp-t-small);
    line-height: 1.55;
    color: var(--ink-soft);
}
.lp-plan-list {
    list-style: none;
    display: grid;
    gap: var(--s3); /* §4.7: Zeilen-gap 12 */
    margin-top: var(--s5);
    margin-bottom: var(--s5);
    padding-top: var(--s5);
    border-top: 1px solid var(--line); /* §4.7: Hairline, margin-block 24 */
    font-size: var(--lp-t-body-sm);
    line-height: 1.6;
}
/* Einschluss-Liste 2x4 (A.3) — Spalte 1 = Zeilen 1-4, Mobile 1x8 */
@media (min-width: 640px) {
    .lp-plan-list {
        grid-auto-flow: column;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
        column-gap: var(--s5);
    }
}
.lp-plan-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
}
.lp-plan-list svg {
    width: 16px;
    height: 16px;
    margin-top: var(--s1);
    stroke: var(--gold-dark); /* §4.7/§4.12: Draht-Haken 16, --gold-dark */
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex: none;
}
.lp-plan-cta {
    margin-top: auto;
    width: 100%;
    justify-content: center;
}
.lp-plan-quiet {
    margin-top: var(--s4);
    align-self: center;
}
/* Vertrauens-Zeile (A.1 Punkt 7): Werkkarten-Muster mit Brass-Dots */
.lp-plans-note {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--s2) var(--s3);
    margin-top: var(--s5);
    font-size: var(--lp-t-small);
    color: var(--muted);
}

/* Teiler-Rechenbuehne (A.4, V2-Port): Bleistift-Notiz; Triade = 0-JS-Stand */
.lp-teiler {
    max-width: 720px;
    margin: var(--s8) auto 0;
    padding: var(--s5) var(--s6);
    border: 1.5px dashed var(--border-soft);
    border-radius: var(--lp-r-card);
}
.lp-teiler-frage {
    font-size: var(--lp-t-body-sm);
    font-weight: 600;
}
.lp-teiler-triade {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
    margin-top: var(--s4);
}
@media (max-width: 639px) {
    .lp-teiler-triade { grid-template-columns: 1fr; } /* V2: mobil einspaltig */
}
.lp-teiler-triade li {
    display: grid;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}
.lp-teiler-n {
    font-size: 1.5rem;
    font-weight: 650;
}
.lp-teiler-weg,
.lp-teiler-einheit {
    font-size: var(--lp-t-data);
    color: var(--muted);
}
.lp-teiler-chf {
    font-size: var(--lp-t-body);
    font-weight: 650;
    color: var(--gold-dark);
}
.lp-teiler-slide {
    margin-top: var(--s5);
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
}
input[data-divide] {
    --p: 37.9%;
    width: 100%;
    height: 44px; /* Touch-Ziel */
    appearance: none;
    background: transparent;
    cursor: pointer;
}
input[data-divide]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold) var(--p), var(--line) var(--p));
}
input[data-divide]::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -9px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--gold);
}
/* Firefox: nativer Regler mit Brass-Akzent (Golf-Pass Teiler-Port) */
input[data-divide] { accent-color: var(--gold); }
.lp-teiler-out {
    margin-top: var(--s3);
    font-size: var(--lp-t-body-sm);
    font-variant-numeric: tabular-nums;
}

/* Leistungs-Matrix «Verzeichnis» §4.6. Kopfband sticky (top = Nav-Kante,
   Spec-Wert 72px = --lp-nav-h), bg --bg opak, h 64, Hairline unten;
   Semantik liegt pro Gruppe in <table> (sr-only thead/caption), das
   Band ist aria-hidden. Spalten 46/18/18/18 via Grid + colgroup —
   getrennte Tabellen fluchten ueber table-layout:fixed. */
/* Blockwechsel Karten→Matrix §3.4 (v1.7): 96px Desktop / 64px Mobile <768 */
.lp-mx { margin-top: var(--lp-s10); }
@media (min-width: 768px) { .lp-mx { margin-top: var(--lp-s12); } }
.lp-mx-head {
    position: sticky;
    top: var(--lp-nav-h-m);
    z-index: 3;
    display: grid;
    grid-template-columns: 46% 18% 18% 18%;
    align-items: center;
    min-height: 64px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) { .lp-mx-head { top: var(--lp-nav-h); } }
.lp-mx-h-was,
.lp-mx-h-t {
    font-size: var(--lp-t-kicker);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-dark);
}
.lp-mx-h-col {
    text-align: center;
    padding-block: var(--s3);
}
.lp-mx-h-t { display: block; }
.lp-mx-h-p {
    display: block;
    margin-top: var(--s1);
    font-size: var(--lp-t-data);
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.4;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
/* Agentur-Spalte geadelt: Gold-Wash 45% + Hairline 2px --gold nur oben an
   der Kopfzelle; im sticky Band liegt der Wash auf opakem --bg (Alpha
   wuerde sonst durchscrollenden Inhalt zeigen). */
.lp-mx-h-ag {
    background: linear-gradient(var(--lp-wash-45), var(--lp-wash-45)) var(--bg);
    box-shadow: inset 0 2px 0 var(--gold);
}
/* Gruppenkopf h 88 = 32 Luft oben + 56 Titelzeile (§4.6) */
.lp-mx-grp-titel {
    display: flex;
    align-items: center;
    min-height: 56px;
    margin-top: var(--s6);
    font-family: var(--lp-font-display);
    font-weight: 550;
    font-size: var(--lp-t-title-sm);
    line-height: 1.3;
    font-variation-settings: "opsz" 20, "wght" 550;
}
.lp-mx-t {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
/* Eine Wertspalte statt drei (25.07.): die Leistung bekommt den Platz, den
   der Vergleich nicht mehr braucht. */
.lp-mx-c-was { width: 76%; }
.lp-mx-c-t { width: 24%; }
.lp-mx-t th[scope="row"] {
    height: 52px; /* wirkt in Tabellenzellen als Minimum */
    padding-block: var(--s2);
    padding-right: var(--s4);
    border-top: 1px solid var(--line); /* §4.6: Hairlines nur horizontal */
    text-align: left;
    vertical-align: middle;
    font-size: var(--lp-t-body);
    font-weight: 400;
    line-height: 1.65;
    color: var(--ink);
}
.lp-mx-t td {
    height: 52px;
    padding-block: var(--s2);
    border-top: 1px solid var(--line);
    text-align: center;
    vertical-align: middle;
}
.lp-mx-ag { background: var(--lp-wash-45); }
.lp-mx-tick {
    display: inline-block;
    vertical-align: middle;
    stroke: var(--gold-dark);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.lp-mx-none {
    display: inline-block;
    width: 12px;
    height: 1.5px;
    background: var(--muted-light);
    vertical-align: middle;
}
.lp-mx-teil {
    font-size: var(--lp-t-small);
    letter-spacing: .01em;
    color: var(--muted);
}
@media (hover: hover) and (min-width: 1024px) {
    .lp-mx-t tbody tr:hover > * { background: var(--surface-2); } /* §4.6: rein lesend, nur Desktop */
}
/* Zusatzzeilen: natives <details> pro Gruppe; Register-Marker = Draht-Plus
   nach §4.9-Muster (45° bei [open]) — dieselbe Register-Geste wie S-08. */
.lp-mx-mehr summary {
    display: flex;
    align-items: center;
    gap: var(--s2);
    min-height: 52px;
    border-top: 1px solid var(--line);
    font-size: var(--lp-t-small);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--gold-dark);
    cursor: pointer;
    list-style: none;
}
.lp-mx-mehr summary::-webkit-details-marker { display: none; }
.lp-mx-mehr summary:hover { color: var(--gold-hover); }
.lp-reg-plus {
    stroke: var(--gold);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex: none;
    transition: transform .2s var(--ease); /* M-070: 200 ms ease-micro */
}
.lp-mx-mehr[open] .lp-reg-plus,
.lp-faq-item[open] .lp-reg-plus { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
    .lp-reg-plus { transition: none; } /* M-070 Feld 8: Zustandssprung */
}
/* Mobile <768 = Scroll-Modus (§4.6/§3.2): Tabellen-min-width 720, erste
   Spalte sticky mit opakem --bg und Hairline rechts. (Der vertikale
   Kopfband-Sticky endet im Scroll-Container — Mobile-Kontrakt ist die
   sticky Leistungs-Spalte.) */
@media (max-width: 767.98px) {
    /* Mit nur noch einer Wertspalte passt das Verzeichnis mobil ohne
       Querscrollen — der Scroll-Modus (560px Mindestbreite) ist damit
       gegenstandslos geworden. */
    .lp-mx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .lp-mx-min { min-width: 0; }
    .lp-mx-c-was { width: auto; }
    .lp-mx-c-t { width: 96px; }
    .lp-mx-t th[scope="row"],
    .lp-mx-h-was {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--bg);
        box-shadow: inset -1px 0 0 var(--line);
    }
    .lp-mx-t th[scope="row"] { padding-right: var(--s3); }
}

/* ── S-08 Fragen-Register §4.9: natives <details>, Container 720 ──────────── */
.lp-faq {
    max-width: var(--lp-max-text);
    margin: var(--s8) auto 0;
}
@media (min-width: 768px) { .lp-faq { margin-top: var(--lp-s10); } } /* Kopf→Inhalt 64 */
.lp-faq-item { border-bottom: 1px solid var(--line); }
.lp-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    min-height: 64px;
    padding-block: var(--s3);
    font-size: var(--lp-t-body);
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    transition: color .2s var(--ease);
}
.lp-faq-q::-webkit-details-marker { display: none; }
.lp-faq-q:hover { color: var(--gold-dark); }
.lp-faq-a {
    padding-bottom: var(--s5);
    font-size: var(--lp-t-body-sm);
    line-height: 1.6;
    color: var(--ink-soft);
}
/* W-07 (Kuer) bewusst NICHT umgesetzt: Byte-Deckel (C.2-Regel — zuerst
   faellt W-07, nie der Deckel). */

/* Schluss-Block «Der Start»: Glow + Dust sind reine Slots (Visual und
   Zustaende: motion-engineer, M-071/M-072) — der CTA-Block selbst ist
   der vollstaendige 0-JS-Endzustand und bleibt unbewegt (STORY S-08). */
.lp-final {
    position: relative;
    margin-top: var(--lp-s10); /* Blockwechsel Register→Schluss §3.4 (v1.7): 96/64 */
    padding-block: var(--lp-s12);
    text-align: center;
}
@media (min-width: 768px) { .lp-final { margin-top: var(--lp-s12); } }
.lp-final-glow,
.lp-dust {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.lp-final-in {
    position: relative;
    max-width: var(--lp-max-text);
    margin-inline: auto;
}
.lp-final-in .lp-lead {
    margin-inline: auto;
    margin-top: var(--s5);
}
.lp-final-body {
    max-width: 640px;
    margin-inline: auto;
    margin-top: var(--s4);
    font-size: var(--lp-t-body);
    line-height: 1.65;
}
.lp-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s4);
    margin-top: 40px; /* §3.4: Lead→CTA 40px */
}

/* ── Footer-Kolophon §4.11 ────────────────────────────────────────────────── */
.lp-footer {
    background: var(--ink);
    color: var(--bg);
    padding-block: var(--lp-s10) var(--s8);
}
@media (min-width: 768px) { .lp-footer { padding-block: var(--lp-s12) var(--lp-s10); } }
.lp-footer-in {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}
.lp-footer-brand {
    font-family: var(--lp-font-display);
    font-weight: 550;
    font-size: var(--lp-t-wordmark-ft);
    font-variation-settings: "opsz" 24, "wght" 550;
    letter-spacing: -.01em;
    line-height: 1;
    color: var(--lp-brass-lit);
}
.lp-footer-links {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--s5);
    row-gap: var(--s2);
    margin-top: var(--s5);
}
.lp-footer-links a {
    font-size: var(--lp-t-small);
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--lp-fg-on-ink-soft); /* §4.11: Sekundaerlinks rgba(Porcelain .70) */
    transition: color .2s var(--ease);
}
.lp-footer-links a:hover {
    color: var(--bg);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--lp-brass-lit);
    text-underline-offset: 6px;
}
/* Abschlusszeile unter der EINEN Kolophon-Hairline §4.11 (v1.7):
   1px --lp-line-on-ink zwischen Link-/Adressblock und Abschlusszeile,
   48px (--s8) darueber, 24px (--s5) darunter — Buchkolophon unter dem
   Strich; weitere Linien im Kolophon sind ein Verstoss. */
.lp-footer-line {
    margin-top: var(--s8);
    padding-top: var(--s5);
    border-top: 1px solid var(--lp-line-on-ink);
    font-size: var(--lp-t-data);
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.4;
    color: var(--lp-brass-lit);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION-LAYER (motion-engineer) — docs/redesign/MOTION-SPEC.md v1.0,
   Werte zeichengenau. Klassen-Namespaces (nur landing-v3.js setzt sie):
   html.lp-js       Tier-0-Boot — faellt NIE bei reduced-motion/0-JS
   html.is-arrived  M-001→M-002-Uebergabe (t0 = Start des Veil-Abgangs)
   html.lp-reveal   IO-Reveals aktiv (M-006/M-007)
   html.lp-motion   Tier 1 (GSAP) uebernimmt Scrub-Praezision
   Ausserhalb dieser Namespaces existiert kein Versteckt-Zustand (§0.1/§0.7).
   ═══════════════════════════════════════════════════════════════════════ */

/* M-001 · Veil-Ausklang: Flaeche opacity 1→0, 600 ms ease-fold — KEIN
   translate/scale (Papier wird abgehoben, nicht geschoben); Ring-
   Vereinigung + Kinder-Lift bleiben wie gebaut (.45s, Bestandsbaustein).
   Gate (1'150 ms Narrativ, max. 900 ms Vendor-Wartezeit) in landing-v3.js;
   CSS-Failsafe 2'200 ms + reduced-motion display:none stehen in der Basis. */
html.lp-js .lp-veil.is-done {
    transition: opacity .6s var(--lp-ease-fold), visibility 0s linear .6s;
}

/* M-002 · Hero-Typo-Einzug: je Element opacity 0→1 + y 24→0, ease-fold.
   H1-Zeile 1: 700 ms ab t0+150 · Zeile 2: +90 · Lead: 500 ms ab 420 ·
   CTA-Zeile: 400 ms ab 540. Einmalig (Load-Kaskade), kein Scroll-Bezug;
   Kicker + Hero-Body stehen bewusst still (nicht in der Spec = keine
   Animation). Versteckt-Zustand nur unter html.lp-js. */
html.lp-js .lp-hero .lp-h1-line,
html.lp-js .lp-hero .lp-lead,
html.lp-js .lp-hero-actions {
    opacity: 0;
    transform: translateY(24px);
}
html.lp-js.is-arrived .lp-hero .lp-h1-line,
html.lp-js.is-arrived .lp-hero .lp-lead,
html.lp-js.is-arrived .lp-hero-actions {
    opacity: 1;
    transform: none;
}
html.lp-js.is-arrived .lp-hero .lp-h1-line:first-child {
    transition: opacity .7s var(--lp-ease-fold) .15s, transform .7s var(--lp-ease-fold) .15s;
}
html.lp-js.is-arrived .lp-hero .lp-h1-line:last-child {
    transition: opacity .7s var(--lp-ease-fold) .24s, transform .7s var(--lp-ease-fold) .24s;
}
html.lp-js.is-arrived .lp-hero .lp-lead {
    transition: opacity .5s var(--lp-ease-fold) .42s, transform .5s var(--lp-ease-fold) .42s;
}
html.lp-js.is-arrived .lp-hero-actions {
    transition: opacity .4s var(--lp-ease-fold) .54s, transform .4s var(--lp-ease-fold) .54s;
}

/* W-01 · Praegelinie unter dem «Plan»: zeichnet sich einmal von links,
   sobald H1-Zeile 2 gelandet ist (M-002-Kette); Basis = Linie steht. */
.lp-h1 em { position: relative; }
.lp-h1 em::after {
    content: "";
    position: absolute;
    inset: auto .05em -.05em .02em;
    height: 2px;
    background: var(--gold);
}
html.lp-js .lp-h1 em::after {
    transform: scaleX(0);
    transform-origin: left;
}
html.lp-js.is-arrived .lp-h1 em::after {
    transform: scaleX(1);
    transition: transform .42s var(--lp-ease-fold) .96s;
}

/* M-003 · Dossier-Registerzeile rastet ein: 280 ms/Segment, y 6→0
   (Typenhebel-Anschlag, kein Flug), Stagger 60 ms ab t0+700 — das letzte
   Segment landet bei t0+1'220. KEIN countUp (der Zaehler-Beweis gehoert
   M-013). Brass-Trennpunkte reisen mit dem Segment, das sie einleiten. */
html.lp-js .lp-dossier > * {
    opacity: 0;
    transform: translateY(6px);
}
html.lp-js.is-arrived .lp-dossier > * {
    opacity: 1;
    transform: none;
    transition: opacity .28s var(--lp-ease-fold), transform .28s var(--lp-ease-fold);
}
html.lp-js.is-arrived .lp-dossier > :nth-child(1) { transition-delay: .7s; }
html.lp-js.is-arrived .lp-dossier > :nth-child(2),
html.lp-js.is-arrived .lp-dossier > :nth-child(3) { transition-delay: .76s; }
html.lp-js.is-arrived .lp-dossier > :nth-child(4),
html.lp-js.is-arrived .lp-dossier > :nth-child(5) { transition-delay: .82s; }
html.lp-js.is-arrived .lp-dossier > :nth-child(6),
html.lp-js.is-arrived .lp-dossier > :nth-child(7) { transition-delay: .88s; }
html.lp-js.is-arrived .lp-dossier > :nth-child(8),
html.lp-js.is-arrived .lp-dossier > :nth-child(9) { transition-delay: .94s; }

/* M-004 · Nav-Hairline: 200 ms ease-micro, voll reversibel. Nur unter
   html.lp-js — bei reduced-motion toggelt is-scrolled ohne Transition
   (Zustand, kein Effekt); Basis-Zustand steht oben (§4.1). */
html.lp-js .lp-nav::after { transition: opacity .2s var(--ease); }

/* M-005 · Anker-Glide Tier-0-Fallback = CSS scroll-behavior + scroll-
   padding-top 76px (steht in der Basis, html-Block); Tier 1 faehrt Lenis. */

/* M-006 · Standard-Reveal [data-mo]: opacity 0→1 + y 20→0, 550 ms
   ease-fold, play-once. Gruppenkinder staggern 90 ms, Kappe ab dem
   6. Kind fix 450 ms (§0.4). will-change bewusst NICHT (Feld 9). */
html.lp-reveal [data-mo],
html.lp-reveal [data-mo-group] > * {
    opacity: 0;
    transform: translateY(20px);
}
html.lp-reveal [data-mo].in,
html.lp-reveal [data-mo-group].in > * {
    opacity: 1;
    transform: none;
    transition: opacity .55s var(--lp-ease-fold), transform .55s var(--lp-ease-fold);
}
html.lp-reveal [data-mo-group].in > :nth-child(2) { transition-delay: .09s; }
html.lp-reveal [data-mo-group].in > :nth-child(3) { transition-delay: .18s; }
html.lp-reveal [data-mo-group].in > :nth-child(4) { transition-delay: .27s; }
html.lp-reveal [data-mo-group].in > :nth-child(5) { transition-delay: .36s; }
html.lp-reveal [data-mo-group].in > :nth-child(n+6) { transition-delay: .45s; }

/* M-007 · Sektionskopf-Kaskade [data-mo-head]: Faden scaleX 0→1 350 ms
   ab 0 · Kicker-Text 400 ms ab 120 · H2 600 ms ab 200 · Lead 500 ms ab
   320; Texte y 16→0, ease-fold, play-once. .lp-kicker-txt ist der
   Laufzeit-Span aus landing-v3.js (Faden und Text laufen getrennt). */
html.lp-reveal [data-mo-head] .lp-kicker::before {
    transform: scaleX(0);
    transform-origin: left;
}
html.lp-reveal [data-mo-head] .lp-kicker-txt,
html.lp-reveal [data-mo-head] .lp-h2,
html.lp-reveal [data-mo-head] .lp-lead {
    opacity: 0;
    transform: translateY(16px);
}
html.lp-reveal [data-mo-head].in .lp-kicker::before {
    transform: scaleX(1);
    transition: transform .35s var(--lp-ease-fold);
}
html.lp-reveal [data-mo-head].in .lp-kicker-txt {
    opacity: 1;
    transform: none;
    transition: opacity .4s var(--lp-ease-fold) .12s, transform .4s var(--lp-ease-fold) .12s;
}
html.lp-reveal [data-mo-head].in .lp-h2 {
    opacity: 1;
    transform: none;
    transition: opacity .6s var(--lp-ease-fold) .2s, transform .6s var(--lp-ease-fold) .2s;
}
html.lp-reveal [data-mo-head].in .lp-lead {
    opacity: 1;
    transform: none;
    transition: opacity .5s var(--lp-ease-fold) .32s, transform .5s var(--lp-ease-fold) .32s;
}

/* M-011 · Buehnen-Zustandswechsel (Kreuzblende mit Versatz): Austritt
   250 ms ab 0 (→ −8 px) · Eintritt 400 ms ab 150 (16 px → 0), ease-fold.
   Richtungs-Korrektheit aus dem kumulativen is-step-N (M-010): nie
   erreichte Panels warten bei +16 px, passierte ruhen bei −8 px —
   rueckwaerts kommt das Panel dadurch von −8 und geht nach +16 (Feld 6).
   Opacity/Visibility regeln die Basis-Regeln (§4.13-Block oben);
   will-change setzt der Motor nur auf das wechselnde Paar (Feld 9). */
html.lp-js [data-wire].is-js .lp-stage-panel {
    transform: translateY(16px);
    transition: opacity .25s var(--lp-ease-fold), transform .25s var(--lp-ease-fold), visibility 0s linear .25s;
}
html.lp-js [data-wire].is-js.is-step-1 [data-stage-panel="1"],
html.lp-js [data-wire].is-js.is-step-2 [data-stage-panel="2"],
html.lp-js [data-wire].is-js.is-step-3 [data-stage-panel="3"] {
    transform: translateY(-8px);
}
html.lp-js [data-wire].is-js:not(.is-step-1) [data-stage-panel="4"],
html.lp-js [data-wire].is-js.is-step-1:not(.is-step-2) [data-stage-panel="1"],
html.lp-js [data-wire].is-js.is-step-2:not(.is-step-3) [data-stage-panel="2"],
html.lp-js [data-wire].is-js.is-step-3:not(.is-step-4) [data-stage-panel="3"],
html.lp-js [data-wire].is-js.is-step-4 [data-stage-panel="4"] {
    transform: none;
    transition: opacity .4s var(--lp-ease-fold) .15s, transform .4s var(--lp-ease-fold) .15s, visibility 0s linear 0s;
}

/* M-014 · Progressfaden Tier 0: is-step-N springt das Brass-Segment auf
   (N−1)/3 des Fadenwegs (Fadenlaenge − 24-px-Segment), 400 ms ease-fold,
   symmetrisch rueckwaerts. Fadenweg via Container-Query-Einheit
   (100cqh/cqw) — bewegt wird NUR transform (§0.5-Ausnahme Goldfaden);
   ohne CQ-Support ruht das Segment am Fadenanfang, Tier 1 scrubbt dann
   pixelgenau. Unter html.lp-motion ist die Transition aus: GSAP schreibt
   inline, die Klassenmechanik laeuft wirkungslos weiter (Feld 2). */
html.lp-js [data-wire].is-js .lp-thread { container-type: size; }
html.lp-js [data-wire].is-js .lp-thread-y .lp-thread-seg {
    top: 0;
    transition: transform .4s var(--lp-ease-fold);
}
html.lp-js [data-wire].is-js .lp-thread-x .lp-thread-seg {
    left: 0;
    transition: transform .4s var(--lp-ease-fold);
}
html.lp-js [data-wire].is-js.is-step-2 .lp-thread-y .lp-thread-seg { transform: translateY(calc((100cqh - 24px) / 3)); }
html.lp-js [data-wire].is-js.is-step-3 .lp-thread-y .lp-thread-seg { transform: translateY(calc((100cqh - 24px) * 2 / 3)); }
html.lp-js [data-wire].is-js.is-step-4 .lp-thread-y .lp-thread-seg { transform: translateY(calc(100cqh - 24px)); }
html.lp-js [data-wire].is-js.is-step-2 .lp-thread-x .lp-thread-seg { transform: translateX(calc((100cqw - 24px) / 3)); }
html.lp-js [data-wire].is-js.is-step-3 .lp-thread-x .lp-thread-seg { transform: translateX(calc((100cqw - 24px) * 2 / 3)); }
html.lp-js [data-wire].is-js.is-step-4 .lp-thread-x .lp-thread-seg { transform: translateX(calc(100cqw - 24px)); }
/* M-014-Instanz S-05 (3 Beats): Segment-Position (N−1)/(Stepzahl−1) —
   bei 3 Steps halbe statt Drittel-Schritte; Tier 1 mappt ohnehin exakt. */
html.lp-js .lp-joy--300x3[data-wire].is-js.is-step-2 .lp-thread-y .lp-thread-seg { transform: translateY(calc((100cqh - 24px) / 2)); }
html.lp-js .lp-joy--300x3[data-wire].is-js.is-step-3 .lp-thread-y .lp-thread-seg { transform: translateY(calc(100cqh - 24px)); }
html.lp-js .lp-joy--300x3[data-wire].is-js.is-step-2 .lp-thread-x .lp-thread-seg { transform: translateX(calc((100cqw - 24px) / 2)); }
html.lp-js .lp-joy--300x3[data-wire].is-js.is-step-3 .lp-thread-x .lp-thread-seg { transform: translateX(calc(100cqw - 24px)); }
html.lp-js.lp-motion [data-wire].is-js .lp-thread-seg { transition: none; }

/* M-014 Feld 3 · Step-Zustand: inaktive Steps opacity .45, aktiver 1 —
   200 ms ease-micro; der aktive Step-Kicker steht damit in --gold-dark
   (Basis-Farbe der Stufe). 0-JS/reduced-motion: kein is-js, alles voll. */
html.lp-js [data-wire].is-js .lp-step {
    opacity: .45;
    transition: opacity .2s var(--ease);
}
html.lp-js [data-wire].is-js .lp-step.is-active { opacity: 1; }

/* M-020 · S-03-Kapitel-Instanz (gespiegelt) und M-030 · S-04-Instanz:
   reine Instanzen von M-010/M-011/M-012/M-014 — alle Werte identisch,
   eigene Regeln existieren bewusst nicht (Praezision durch Wiederholung,
   §2). Der ICS-Dokument-Chip in S-03-Panel 1 «legt sich ab» als Teil des
   M-011-Eintritts (y 16→0, 400 ms ease-fold), kein eigener Strang. */

/* M-021 · Einsortier-Beat, Zustand (a): Quellzeile markiert sich mit
   --gold-bg — die Klasse .is-hit setzt die Tier-1-Timeline, hier liegt
   die 200-ms-ease-micro-Transition (Zustands-Feedback §0.5). Die Chips
   (b) laufen als GSAP-Tweens (ease-ink) in landing-v3-scenes.js. */
html.lp-motion .lp-cal-src li { transition: background-color .2s var(--ease); }

/* M-031/M-032 · Summenzellen-Farbwechsel --ink ⇄ --warn: Klassen-Toggle
   is-warn (Tier-1-Timeline), 200 ms ease-micro — Zustands-Feedback §0.5,
   kein Dauereffekt. Zaehler/Zeilen der Beats: landing-v3-scenes.js. */
html.lp-motion .lp-bud-chf { transition: color .2s var(--ease); }

/* M-040 · Buehnen-Settle (S-05): reiner GSAP-Scrub (scale .985→1,
   y 16→0, opacity .9→1, scrub 0.8) in landing-v3-scenes.js — kein
   CSS-Anteil; ohne Tier 1 steht das Werkstueck (Endzustand). */

/* M-041 · Das Aufbluehen (S-05 Beat 1): 243 Blueten der Ausgabe 1
   wachsen in klassengetriggerten CSS-Wellen — die Transition laeuft
   EINMAL pro Schwelle, nie pro Frame (Feld 4, BM-17-Geist). Versteckt
   NUR unter html.lp-js + Motor is-js (ohne JS steht alles fertig);
   is-bloom-1/2/3 (kumulativ) setzt Tier 0 (Unter-Sentinels) bzw.
   Tier 1 (0/15/30 % Kapitelstrecke). 420 ms/Bluete ease-fold, opacity
   0→1 + scale .90→1 (Engine-Privileg §0.5); transform-box fill-box
   ist Pflicht (Feld 3) — die Engine-Rotation liegt im inneren <use>
   und bleibt unangetastet. will-change VERBOTEN (Feld 9: 243 Layer).
   Rueckwaerts: Klassen fallen an denselben Schwellen — identische
   Transition zurueck (Feld 6). */
html.lp-js [data-wire].is-js [data-flor-out="1"] .fl {
    opacity: 0;
    transform: scale(.9);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity .42s var(--lp-ease-fold), transform .42s var(--lp-ease-fold);
}
/* 12 Wellen Desktop: pro Terzil 4 nth-child-Wellen (4n/4n+1/4n+2/4n+3),
   Wellen-Delay k×90 ms (§0.4) — ~20 Blueten je Welle. */
@media (min-width: 1024px) {
    html.lp-js [data-wire].is-js [data-flor-out="1"] .fl:nth-child(4n+1) { transition-delay: .09s; }
    html.lp-js [data-wire].is-js [data-flor-out="1"] .fl:nth-child(4n+2) { transition-delay: .18s; }
    html.lp-js [data-wire].is-js [data-flor-out="1"] .fl:nth-child(4n+3) { transition-delay: .27s; }
}
/* 6 Wellen Mobile <1024 (Device-Tiering BM-18, Feld 7): 2n-Raster,
   Wellen-Delay 140 ms, Bluete 420 ms — halbe Klassen-Last. */
@media (max-width: 1023.98px) {
    html.lp-js [data-wire].is-js [data-flor-out="1"] .fl:nth-child(2n+1) { transition-delay: .14s; }
}
html.lp-js [data-wire].is-bloom-1 [data-flor-out="1"] .fl.lpf-1,
html.lp-js [data-wire].is-bloom-2 [data-flor-out="1"] .fl.lpf-2,
html.lp-js [data-wire].is-bloom-3 [data-flor-out="1"] .fl.lpf-3 {
    opacity: 1;
    transform: scale(1);
}

/* M-042 · Die zweite Ausgabe — Falz-Aufdeckung (Beat 2, Unikat-Beweis):
   Ausgabe 2 steht FERTIG gewachsen (blueht nie erneut — der Beweis ist
   der Vergleich). Untereinander-Setzung (Changelog 11.07.2026, §6 v1.7
   P11) ⇒ Aufdeckung von oben: clip-path inset(0 0 100% 0)→inset(0)
   (gerade Kante, freigegebene Ausnahme §0.5) + opacity .85→1; 700 ms
   ease-fold ab +100 ms nach is-step-2 (Mobile 600 ms). Rueckweg 400 ms
   — Beat 1 steht beim Hochscrollen sofort wieder allein (Feld 6). */
html.lp-js [data-wire].is-js [data-flor-out="2"] {
    clip-path: inset(0 0 100% 0);
    opacity: .85;
    transition: clip-path .4s var(--lp-ease-fold), opacity .4s var(--lp-ease-fold);
}
html.lp-js [data-wire].is-js.is-step-2 [data-flor-out="2"] {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transition: clip-path .7s var(--lp-ease-fold) .1s, opacity .7s var(--lp-ease-fold) .1s;
}
@media (max-width: 1023.98px) {
    html.lp-js [data-wire].is-js.is-step-2 [data-flor-out="2"] {
        transition: clip-path .6s var(--lp-ease-fold) .1s, opacity .6s var(--lp-ease-fold) .1s;
    }
}

/* M-043 · Der Standsatz steht allein (Beat 2): opacity 0→1 + y 8→0,
   450 ms ease-fold, 500 ms nach M-042-Start (= is-step-2 + 100 ms
   Aufdeck-Delay + 500 → Delay .6s). Umgebende Step-Texte stehen zu dem
   Zeitpunkt auf opacity .45 (M-014 Feld 3). Rueckwaerts symmetrisch mit
   dem is-step-2-Abbau (Basis-Transition ohne Delay). */
html.lp-js [data-wire].is-js .lp-flor-satz {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s var(--lp-ease-fold), transform .45s var(--lp-ease-fold);
}
html.lp-js [data-wire].is-js.is-step-2 .lp-flor-satz {
    opacity: 1;
    transform: none;
    transition-delay: .6s;
}

/* M-044 · Beat 3 «Aus der Kollektion» + Werkkarten-Einrasten: Zeile
   400 ms ab 0 (y 12→0) · Werkkarten-Hairline scaleX 0→1 350 ms ab 200
   (transform-origin left; die statische border-top weicht einer
   skalierbaren ::before-Hairline, Endzustand deckungsgleich) · Karten-
   Text 280 ms ab 400 (y 6→0). Alles ease-fold, symmetrischer
   Klassen-Abbau rueckwaerts. */
html.lp-js [data-wire].is-js .lp-flor-koll {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s var(--lp-ease-fold), transform .4s var(--lp-ease-fold);
}
html.lp-js [data-wire].is-js.is-step-3 .lp-flor-koll {
    opacity: 1;
    transform: none;
}
html.lp-js [data-wire].is-js .lp-stage-card[data-motion="M-044"] {
    position: relative;
    border-top-color: transparent;
}
html.lp-js [data-wire].is-js .lp-stage-card[data-motion="M-044"]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--lp-ease-fold) .2s;
}
html.lp-js [data-wire].is-js.is-step-3 .lp-stage-card[data-motion="M-044"]::before { transform: scaleX(1); }
html.lp-js [data-wire].is-js .lp-stage-card[data-motion="M-044"] > * {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .28s var(--lp-ease-fold) .4s, transform .28s var(--lp-ease-fold) .4s;
}
html.lp-js [data-wire].is-js.is-step-3 .lp-stage-card[data-motion="M-044"] > * {
    opacity: 1;
    transform: none;
}

/* M-050 · Sitzplan-Enthuellung «Der Druckbogen legt sich» (S-06, EINE
   Bewegung): opacity 0→1, y 24→0 (Mobile 16), scale .985→1, 700 ms
   ease-fold — der namensgebende Falz. play-once (in-Klasse via IO
   threshold .35, landing-v3.js), danach absolute Ruhe: KEIN Tilt, KEIN
   Parallax, keine Einzelteil-Animation (Muaz-Gesetz 2). */
html.lp-js .lp-stage--res [data-motion="M-050"] {
    opacity: 0;
    transform: translateY(24px) scale(.985);
}
@media (max-width: 767.98px) {
    html.lp-js .lp-stage--res [data-motion="M-050"] { transform: translateY(16px) scale(.985); }
}
html.lp-js .lp-stage--res.in [data-motion="M-050"] {
    opacity: 1;
    transform: none;
    transition: opacity .7s var(--lp-ease-fold), transform .7s var(--lp-ease-fold);
}

/* M-051 · Werkkarten-Einrasten S-06: Instanz der M-044-Mechanik
   (Hairline scaleX 350 ms ab 200, Text 280 ms ab 400, ease-fold),
   Trigger gekoppelt an M-050 +150 ms nach dessen Ende (700) → Delays
   1.05s/1.25s ab der in-Klasse. play-once, Transition nur im
   in-Zustand. */
html.lp-js .lp-stage--res .lp-stage-card[data-motion="M-051"] {
    position: relative;
    border-top-color: transparent;
}
html.lp-js .lp-stage--res .lp-stage-card[data-motion="M-051"]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: left;
}
html.lp-js .lp-stage--res .lp-stage-card[data-motion="M-051"] > * {
    opacity: 0;
    transform: translateY(6px);
}
html.lp-js .lp-stage--res.in .lp-stage-card[data-motion="M-051"]::before {
    transform: scaleX(1);
    transition: transform .35s var(--lp-ease-fold) 1.05s;
}
html.lp-js .lp-stage--res.in .lp-stage-card[data-motion="M-051"] > * {
    opacity: 1;
    transform: none;
    transition: opacity .28s var(--lp-ease-fold) 1.25s, transform .28s var(--lp-ease-fold) 1.25s;
}

/* M-060 · Tarif-Karten-Auflage: Tier 1 (GSAP, ease-ink, Agentur zuletzt)
   in landing-v3-scenes.js; Tier-0-Fallback ist die M-006-Gruppe
   ([data-mo-group], Werte §0.4) — hier bewusst keine eigene Regel. */

/* M-061 (Jahres-Toggle) ersatzlos entfallen: ein Preis, kein Umschalter,
   kein Zaehl-Swap (01.08.). */

/* M-070 · FAQ-Register-Marker: Rotation 0→45deg, 200 ms ease-micro —
   steht als Zustands-Regel in der Basis (.lp-reg-plus, [open]-Selektor
   + reduced-motion-Zustandssprung). Hier bewusst keine Doppelung. */

/* M-071 · Final-Glow: Gold-Baustein 7 (V2 1:1) — vorgerenderter radialer
   Verlauf, KEIN Laufzeit-Blur (BM-07). Der Endzustand ist sichtbar
   (reduced-motion/0-JS: «steht statisch auf Endwert»); den Scrub-Einzug
   (opacity 0→1, y 96→0, scrub 0.8) faehrt Tier 1 in scenes.js.
   M-072 · Dust-Canvas: Partikel zeichnet landing-v3.js (Tier 0) —
   der Slot (.lp-dust, absolute) steht in der Basis. */
.lp-final-glow {
    background: radial-gradient(56rem 22rem at 50% 130%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%);
}


/* ── M-114 · «Der durchgehende Goldfaden» (FADEN-001, Anhang B — vormals
   M-111) — der Buchbinder-Faden naeht die ganze Seite (Hero-Unterkante bis
   vor den Schluss-CTA, 9 Halte). Muaz-Auflagen von M-111 bestehen fort: (1) die
   Linie liegt weit genug links (gemessen lag sie 13-22px INNERHALB des
   Passepartouts), (2) der Kapitelwechsel zeigt nie zwei Beschriftungen
   gleichzeitig — EIN Punkt wandert die Achse hinunter, sein Label wechselt
   an den Halten per Kreuzblende (alt ganz raus, DANN neu rein). Punkt faehrt
   per translateY (transform-only, kein top-Write pro Frame — §5-Haertung).
   Reines Motion-HUD: erscheint nur mit JS, 2px Brass, kein Glanz/Puls. */
.lp-rail {
    --rail: 0;    /* Seiten-Fortschritt 0…1 (Hero-Unterkante → vor Schluss-CTA) */
    --rv: 0;      /* Achse sichtbar 0…1 (Fenster = dieselbe Strecke) */
    --k1: 0; --k2: .125; --k3: .25; --k4: .375; --k5: .5;   /* Halte, von JS gemessen */
    --k6: .625; --k7: .75; --k8: .875; --k9: 1;
    --c1: 0; --c2: 0; --c3: 0; --c4: 0; --c5: 0;            /* Label-Blende */
    --c6: 0; --c7: 0; --c8: 0; --c9: 0;
    --rail-top: 24vh;
    --rail-h: 54vh;
    display: none;
    position: fixed;
    /* Die Achse haengt an der INHALTSKANTE, nicht an einer linearen Formel:
       gemessen liegt der linke Inhaltsrand (Buehne bzw. Schritt-Spalte, je nach
       Kapitel-Seite) bei max(64px, (100% − 1362px) / 2). 60px davor sitzt der
       Faden — so schneidet er nie in den Satz, auf keiner Breite. */
    left: max(16px, calc(max(64px, (100% - 1362px) / 2) - 60px));
    top: var(--rail-top);
    height: var(--rail-h);
    width: 2px;
    z-index: 30;
    opacity: var(--rv);
    /* ease-fold statt Literal `ease` — §0.3-Korrektur (Anhang B, B.1 Feld 5). */
    transition: opacity .45s var(--lp-ease-fold);
    pointer-events: none;
}
html.lp-js .lp-rail { display: block; }
@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
    html.lp-js .lp-rail { display: none; }
}

.lp-rail-line,
.lp-rail-fill {
    position: absolute;
    inset: 0;
    border-radius: 999px;
}
.lp-rail-line { background: color-mix(in srgb, var(--gold) 22%, transparent); }
.lp-rail-fill {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gold) 80%, transparent),
        var(--gold));
    transform: scaleY(var(--rail));
    transform-origin: top;
}
/* Die Halte: was noch kommt (und was schon war). */
.lp-rail-tick {
    position: absolute;
    left: 50%;
    top: calc(var(--t) * 100%);
    translate: -50% -50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gold) 45%, transparent);
}
/* Der wandernde Punkt — er steht immer auf dem Fuellstand. translateY statt
   top: der Fahrweg bleibt auf dem Compositor (0 Layout-Writes pro Frame). */
.lp-rail-mark {
    position: absolute;
    left: 1px;
    top: 0;
    transform: translateY(calc(var(--rail) * var(--rail-h)));
    display: block;
    height: 0;
}
.lp-rail-dot {
    position: absolute;
    top: 0;
    left: 0;
    translate: -50% -50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--bg);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent);
}
.lp-rail-lbl {
    position: absolute;
    left: 14px;
    top: -8px;
    writing-mode: vertical-rl;
    font-size: 11px;
    font-style: normal;
    font-weight: 650;
    letter-spacing: .2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gold-dark);
    opacity: var(--c);
}
/* Unter 1500px ist links kein Platz fuer die Beschriftung — Faden, Punkt und
   Marken bleiben, das Label entfaellt (statt in den Satz zu schneiden). */
@media (max-width: 1499px) { .lp-rail-lbl { display: none; } }

/* ── M-112 · Die Kapitel-Kamera ───────────────────────────────────────────────
   Muaz 13.07.: «die Übergänge der Kapitel mit Zoomout und Scrollanimation,
   sodass es wirkt, als würde die aktuelle Fläche kleiner und eine andere ins
   Feld der Sicht gebracht — mit Zoom-in-/Hereinführ-Effekt. Es soll sich so
   anfühlen, dass man immer an einer Stelle ist und nicht nach unten geht.»

   Dafuer reicht kein Zoom AN der Sektion — die Flaechen muessen sich ueber-
   lappen, sonst wandert der Blick trotzdem nach unten. Jedes Kapitel traegt
   darum unten einen Puffer, in den das naechste hineinragt (negativer
   margin-top). Im Puffer laufen beide Bewegungen GLEICHZEITIG und am selben
   Ort: die alte Flaeche weicht zurueck (scale 1 → .84, Deckung → 0), die neue
   kommt von vorne herein (scale 1.16 → 1, Deckung 0 → 1). Netto-Scrollweg
   bleibt gleich (Puffer = Ueberlappung), aber der Wechsel passiert an EINER
   Stelle im Bild.
   BASIS = ENDZUSTAND: --cz 1 / --co 1 — ohne JS steht jedes Kapitel scharf und
   der Puffer entfaellt (kein leerer Raum). */
.lp-joy,
.lp-res {
    --cz: 1;
    --co: 1;
    --cy: 0px;   /* Gegenzug: haelt die Flaeche vertikal STILL */
    --cx: 0px;   /* Schwenk: mal nach links, mal nach rechts von der Karte */
    position: relative;
    z-index: 2;
    transform: translate(var(--cx), var(--cy)) scale(var(--cz));
    transform-origin: center 44%;
    opacity: var(--co);
}
html.lp-motion .lp-joy,
html.lp-motion .lp-res,
html.lp-motion .lp-koll {
    --pb: var(--lp-s12);
    margin-top: -88svh;
    padding-bottom: calc(var(--pb) + 88svh);
}
html.lp-motion .lp-joy { --pb: var(--lp-s10); }
@media (min-width: 768px) {
    html.lp-motion .lp-joy { --pb: var(--lp-s12); }
    html.lp-motion .lp-res { --pb: var(--lp-s24); }
}
/* Nach der LETZTEN Karte endet die Kette: kein Puffer, kein Ueberlappen — die
   Tarife schliessen normal an (sonst klafft dort eine leere Flaeche, gemessen).
   Letzte Karte ist seit KOLL-001 die dritte Vorlage. */
html.lp-motion .lp-koll:last-of-type { padding-bottom: var(--lp-s16); }
@media (prefers-reduced-motion: reduce) {
    html.lp-motion .lp-joy,
    html.lp-motion .lp-res,
    html.lp-motion .lp-koll {
        --pb: var(--lp-s12);
        margin-top: 0;
        padding-bottom: var(--pb);
    }
    html.lp-motion .lp-joy { --pb: var(--lp-s10); }
    @media (min-width: 768px) {
        html.lp-motion .lp-joy { --pb: var(--lp-s12); }
        html.lp-motion .lp-res { --pb: var(--lp-s24); }
    }
    .lp-joy,
    .lp-res,
    .lp-koll,
    .lp-system { transform: none; opacity: 1; }
}

/* Unter der Kapitel-Kamera (M-112) blendet die SEKTION als Ganzes herein (--co).
   Die Einzel-Reveals der Koepfe halten dagegen: das Kapitel steht dann schon im
   Bild, sein Kopf aber noch auf opacity 0 — genau der Hereinfuehr-Effekt, den
   die Kamera erzeugen soll, faellt aus. Darum innerhalb der Kapitel abgeschaltet;
   Tier 0 (ohne Vendor, ohne Kamera) behaelt sie unveraendert. */
html.lp-motion :is(.lp-joy, .lp-res) [data-mo],
html.lp-motion :is(.lp-joy, .lp-res) [data-mo-group] > *,
html.lp-motion :is(.lp-joy, .lp-res) [data-mo-head] .lp-kicker-txt,
html.lp-motion :is(.lp-joy, .lp-res) [data-mo-head] .lp-h2,
html.lp-motion :is(.lp-joy, .lp-res) [data-mo-head] .lp-lead {
    opacity: 1;
    transform: none;
}
html.lp-motion :is(.lp-joy, .lp-res) [data-mo-head] .lp-kicker::before {
    transform: scaleX(1);
}

/* Der Schwenk (M-112) traegt die Flaechen seitlich aus dem Bild — das darf keine
   Querscroll-Leiste erzeugen. `clip` statt `hidden`: hidden wuerde einen Scroll-
   Container aufmachen und die klebenden Buehnen darin brechen (gemessen), clip
   nicht. */
#main { overflow-x: clip; }

/* ── KOLL-001 · «Die Kollektion» — echte Vorlagen im Kartenschwenk ────────────
   Muaz 13.07.: «Ich möchte, dass wir in genau diese Art von Animation ein paar
   unserer Templates präsentieren.» Jede Vorlage ist darum eine eigene Flaeche
   in der Schwenk-Kette (M-112) — sie kommt von links oder rechts herein wie
   ein Kapitel. Im Rahmen laeuft die ECHTE Vorlage (dieselbe View wie im
   Produkt), nicht ein Bild davon. */
.lp-koll {
    --cz: 1;
    --co: 1;
    --cy: 0px;
    --cx: 0px;
    position: relative;
    z-index: 2;
    padding-block: var(--lp-s12);
    transform: translate(var(--cx), var(--cy)) scale(var(--cz));
    transform-origin: center 44%;
    opacity: var(--co);
}
@media (min-width: 768px) { .lp-koll { padding-block: var(--lp-s16); } }

.lp-koll-grid { display: grid; gap: var(--lp-s10); }

/* [KOLL-003] Mobile-Pendant zu KOLL-002: dieselbe Klebe-Buehne + verlaengerte
   Bahn wie Desktop, sonst schneidet die kurze Sektionshoehe den Ablauf ab.
   Einspaltig: Zeile 1 Text, Zeile 2 Buehne mit eigener Laufbahn. Kein
   Scroll-Lock: Sticky pinnt nur visuell. */
html.lp-motion .lp-koll-grid {
    grid-template-rows: auto 1fr;
    min-height: calc(var(--koll-lauf-m, 170svh) + 60svh);
}
html.lp-motion .lp-koll-stage {
    position: sticky;
    top: var(--lp-nav-h-m);
    align-self: start;
}
@media (min-width: 768px) { html.lp-motion .lp-koll-stage { top: var(--lp-nav-h); } }
@media (min-width: 1024px) {
    .lp-koll-grid {
        grid-template-columns: 5fr 7fr;
        align-items: center;
        gap: var(--lp-s12);
    }
    /* Zweite und dritte Vorlage gespiegelt — der Blick springt mit dem Schwenk. */
    .lp-koll:nth-of-type(2n) .lp-koll-text { order: 2; }

    /* KOLL-002: wie die Joy-Kapitel (.lp-stagewrap) — Buehne klebt, daneben
       laeuft eine Bahn durch, deren Laenge JS aus der Innenhoehe misst
       (--koll-lauf, M-113). 0 = kein JS/Rahmen noch nicht geladen. */
    html.lp-motion .lp-koll-grid {
        grid-template-rows: none;
        align-items: start;
        /* FADEN-013: feste Bahn — gemessene Hoehe erst nach Lazy-Load fest,
           verlaengerte sonst die Seite mitten im Scrollen. 260svh = Mittelwert. */
        min-height: calc(var(--koll-lauf, 260svh) + 100svh);
    }
    html.lp-motion .lp-koll-stage { top: var(--lp-s12); }
}
@media (prefers-reduced-motion: reduce) {
    html.lp-motion .lp-koll-grid { grid-template-rows: none; align-items: center; min-height: 0; }
    html.lp-motion .lp-koll-stage { position: static; }
}
.lp-koll-text { max-width: var(--lp-max-text); }
.lp-koll-echt {
    margin-top: var(--s5);
    padding-left: var(--s4);
    border-left: 2px solid var(--gold);
    font-size: var(--lp-t-small);
    color: var(--ink-soft);
}
.lp-koll-echt em { font-family: var(--lp-font-display); font-style: italic; }

/* Die Buehne: ein Fenster in die laufende Vorlage. Hochformat wie ein Telefon —
   so bekommt der Gast sie auch. */
.lp-koll-stage {
    position: relative;
    margin: 0;
    justify-self: center;
    width: min(340px, 84vw);
}
.lp-koll-frame {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 17;
    border: 0;
    border-radius: 26px;
    background: var(--surface);
    box-shadow:
        0 1px 2px rgba(31, 28, 25, .06),
        0 12px 24px -10px rgba(31, 28, 25, .16),
        0 44px 72px -32px rgba(31, 28, 25, .34);
    /* Der Rahmen faengt keine Eingaben ab — er ist Schaufenster, nicht Werkzeug.
       Getippt wird in der App; hier scrollt die Landing den Ablauf (M-113). */
    pointer-events: none;
}
.lp-koll-cap {
    margin-top: var(--s5);
    text-align: center;
    font-size: var(--lp-t-small);
    color: var(--muted);
}

/* ── KURZ-001 · «Alles auf einen Blick» ───────────────────────────────────────
   Die grosse Fahrt ist 24 Bildschirme lang bis zum Preis (gemessen). Das
   entscheidet niemand mit. Dieser Block muss darum KURZ bleiben — er ist die
   Abkuerzung, nicht die naechste Bühne. Keine Kamera, kein Schwenk, kein
   Puffer: er sitzt still zwischen Hero und der Fahrt. */
.lp-kurz {
    position: relative;
    z-index: 3;
    padding-block: var(--lp-s12);
    background: var(--surface-2);
    border-block: 1px solid var(--line);
}
@media (min-width: 768px) { .lp-kurz { padding-block: var(--lp-s16); } }
.lp-kurz-head { text-align: center; margin-bottom: var(--lp-s10); }

.lp-kurz-liste {
    display: grid;
    gap: var(--s4);
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 640px) { .lp-kurz-liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-kurz-liste { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }

.lp-kurz-item > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--s2);
    padding: var(--s5);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--lp-r-card);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.lp-kurz-item > a:hover {
    border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
    transform: translateY(-2px);
}
.lp-kurz-titel {
    font-family: var(--lp-font-display);
    font-size: var(--lp-t-h4);
    font-variation-settings: "opsz" 24, "wght" 550;
}
.lp-kurz-satz {
    font-size: var(--lp-t-small);
    line-height: 1.55;
    color: var(--ink-soft);
    text-wrap: pretty;
}
.lp-kurz-mehr {
    margin-top: auto;
    padding-top: var(--s3);
    font-size: var(--lp-t-kicker);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 650;
    color: var(--gold-dark);
}
.lp-kurz-item > a:hover .lp-kurz-mehr { text-decoration: underline; }

/* Der Preis steht HIER, nicht 24 Bildschirme weiter unten. */
.lp-kurz-fuss {
    margin-top: var(--lp-s10);
    text-align: center;
}
.lp-kurz-preis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s3) var(--s4);
    font-size: var(--lp-t-body);
    color: var(--ink-soft);
}
.lp-kurz-preis b {
    font-family: var(--lp-font-display);
    font-size: var(--lp-t-h4);
    font-variation-settings: "opsz" 24, "wght" 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.lp-kurz-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
    flex: none;
}
.lp-kurz-klein {
    max-width: var(--lp-max-text);
    margin: var(--s4) auto 0;
    font-size: var(--lp-t-small);
    color: var(--muted);
    text-wrap: pretty;
}
.lp-kurz-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s4);
    margin-top: var(--lp-s10);
}

/* ── M-118 · «Der eine Zug» (FADEN-006, Anhang H): EIN Pfad ueber die ganze
   Seite, seine Geometrie steht im d-Attribut statt im CSS — hier bleiben nur
   die Buehne (.lp-seam) und die Stations-Marken. Die zwoelf gestreckten
   Hand-SVGs sind entfallen: preserveAspectRatio=none verzieht eine feste
   100x100-Kurve im Kasten, genau das wirkte kuenstlich. Nur mit Motion,
   nur ab 1250px. */
.lp-seam, .lp-hand-dot { display: none; }
.lp-flow path:nth-of-type(5) { display: none; }
@media (min-width: 1250px) {
    html.lp-motion .lp-seam { display: block; }
    html.lp-motion .lp-hand-dot { display: inline-block; }
    html.lp-motion .lp-flow path:nth-of-type(5) { display: inline; --wp: min(1, var(--go, 1) * 1.333); }
    /* FADEN-005: kein Sichtbarkeits-Gate mehr — der Faden darf nie
       transparent werden (Muaz 21.07.). Was nicht da sein soll, steht
       schlicht nicht im d-Attribut. */
    .lp-seam { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
    .lp-seam svg { display: block; width: 100%; height: 100%; overflow: visible; }
    .lp-seam path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; opacity: .85; }
    .lp-seam circle { fill: var(--gold); }
    .lp-stage { position: relative; }
    .lp-hand-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-light); box-shadow: 0 0 0 1px var(--bg); margin-right: 6px; vertical-align: 1px; }
    .lp-hand-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gold); opacity: var(--d, 1); }
    .lp-stage-head .lp-hand-dot, .lp-koll-stage .lp-hand-dot { --d: var(--gi, 1); }
    .lp-stage-card .lp-hand-dot { --d: min(var(--go, 1) * 3, 1); }
    .lp-koll-stage .lp-hand-dot { position: absolute; top: -3px; left: 50%; margin: 0 0 0 -3px; z-index: 2; }
    html.lp-motion .lp-st-q { position: relative; }
    html.lp-motion .lp-st-q::before { content: ""; position: absolute; inset: -2px -6px; z-index: -1; border-radius: 6px; background: var(--gold-bg); opacity: calc(var(--gi, 1) * var(--gi, 1)); }
    /* FADEN-007: der Zug schreibt den Kapitelkopf an (--gh, vom Kopf-Halt
       gesetzt). Eine Registerkante, die mit dem Punkt einlaeuft — nicht der
       Text bewegt sich, nur seine Marke. Default 1 = Endzustand fuer 0-JS. */
    html.lp-motion .lp-joy-head { position: relative; }
    html.lp-motion .lp-joy-head::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -20px;
        width: 72px;
        margin-left: -36px;
        height: 1px;
        background: var(--gold);
        opacity: calc(var(--gh, 1) * .8);
        transform: scaleX(var(--gh, 1));
        transform-origin: 50% 50%;
    }
}
@media (prefers-reduced-motion: reduce) {
    html.lp-motion .lp-seam,
    html.lp-motion .lp-hand-dot, html.lp-motion .lp-flow path:nth-of-type(5) { display: none; }
    html.lp-motion .lp-st-q::before { content: none; }
    html.lp-motion .lp-joy-head::after { content: none; }
}

/* ═══ M-119/M-120/M-121 · Telefon-Strecke (Brief mobile-fuenf-schritte-brief)
   Unter 64rem ist #system keine Collage, sondern fuenf Telefon-Buehnen aus
   DENSELBEN .lp-win-Knoten (kein doppelter Inhalt); Gehaeuse-Optik = V2-Chat-
   Buehne (git 8323a57). Traeger ist der bestehende [data-mo-group]-Observer —
   null neue JS-Bytes. Startzustaende NUR unter html.lp-reveal: ohne JS und
   unter reduced-motion ist das Basis-CSS der Endzustand. */
@media (min-width: 64rem) {
    /* display:contents = keine Box: .lp-win loest weiter gegen .lp-hero-scene auf. */
    .lp-tel, .lp-tel-rahmen { display: contents; }
    .lp-tel-satz, .lp-tel-cap, .lp-tel-insel, .lp-tel-bar, .lp-tipp, .lp-tel-eingabe { display: none; }
    /* Reveal-Grammatik neutralisieren (nur die drei direkten Kinder; .lp-win
       liegt tiefer und behaelt seinen --p-Flug). */
    html.lp-reveal .lp-tel > * { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 63.99rem) {
    /* Buehne waechst mit dem Inhalt statt ihn zu schneiden (Geraete-Befund
       25.07.: die Link-Zeilen liefen unter die Werkkarte). Die Panels liegen
       gestapelt in EINER Grid-Zelle — die Hoehe ist die des groessten, also
       springt beim Panel-Wechsel nichts (kein CLS). */
    .lp-stage { height: auto; min-height: min(44svh, 340px); }
    .lp-stage-panel { max-height: none; }

    /* KEINE Kapitel-Kamera auf dem Telefon (Muaz 25.07., Geraete-Befund:
       der Schwenk ruckelt, die Ueberlappung kollidiert). Gleicher Rueckfall
       wie unter reduced-motion: Flaechen stehen still und stossen normal
       aneinander — ohne -88svh gibt es weder Kollision noch Leerraum. */
    html.lp-motion .lp-joy,
    html.lp-motion .lp-res,
    html.lp-motion .lp-koll {
        margin-top: 0;
        padding-bottom: var(--pb);
    }
    .lp-joy, .lp-res, .lp-koll, .lp-system {
        transform: none;
        opacity: 1;
    }

    /* Die 340vh-Bahn stirbt: normaler Dokumentfluss. */
    html.lp-motion .lp-system { min-height: auto; padding-block: var(--lp-s10) var(--lp-s8); }
    html.lp-motion .lp-system-stage {
        position: static;
        height: auto;
        overflow: visible;
        justify-content: flex-start;
    }
    .lp-system-stage { gap: var(--s8); }
    .lp-system-head { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }

    .lp-hero-scene {
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 26px;
        width: 100%;
        min-height: 0;
        padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
    }

    /* Einladungskarte: statischer Einstieg, kein Zoom, kein Blaettern. */
    .lp-hero-card { width: min(100%, 288px); transform: none; will-change: auto; }
    .lp-card-inner { padding: 22px 20px 20px; border-radius: 18px; }
    .lp-card-inner::before { inset: 10px; border-radius: 12px; }
    .lp-card-eyebrow { font-size: 12px; letter-spacing: .26em; }
    .lp-cf[data-cf="2"], .lp-cf[data-cf="3"] { content-visibility: hidden; }

    .lp-tel {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: 100%;
        max-width: 380px;
    }
    .lp-tel-satz {
        font-size: 15px;
        line-height: 1.45;
        color: var(--ink-soft);
        text-wrap: pretty;
    }
    .lp-tel-nr {
        display: block;
        font-size: 12px;
        font-weight: 650;
        letter-spacing: .14em;
        color: var(--gold-dark);
        font-variant-numeric: tabular-nums;
    }
    .lp-tel-titel {
        display: block;
        margin: 2px 0 6px;
        font-family: var(--lp-font-display);
        font-weight: 500;
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: -.005em;
        color: var(--ink);
    }
    /* Gehaeuse in ECHTER iPhone-Proportion (Muaz 25.07.: «keine verzogenen
       Animationen»). Massgebend ist der Schirm 393x852 CSS-px = 1:2.168;
       plus 8px Rahmen ringsum ergibt das Gehaeuse 309x651 -> 1:2.107.
       Darum aspect-ratio statt Hoehe: die Buehne kann NIE stauchen, egal
       wie viel Inhalt drin steht. Breite haengt am Bild, nicht umgekehrt. */
    .lp-tel-rahmen {
        position: relative;
        display: flex;
        flex-direction: column;
        width: min(76vw, 300px);
        aspect-ratio: 309 / 651;
        padding: 8px;
        border-radius: 42px;
        background: var(--ink);
        box-shadow: 0 2px 6px rgba(31, 28, 25, .12), 0 26px 52px -22px rgba(31, 28, 25, .42);
        overflow: hidden;
    }
    /* Home-Indikator wie am Geraet — sitzt UEBER dem Schirm, nimmt keinen Platz. */
    .lp-tel-rahmen::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 15px;
        width: 34%;
        height: 4px;
        border-radius: 999px;
        background: var(--ink);
        opacity: .28;
        transform: translateX(-50%);
        z-index: 4;
    }
    .lp-tel-insel {
        position: absolute;
        top: 17px;
        left: 50%;
        transform: translateX(-50%);
        width: 31%;
        height: 22px;
        border-radius: 999px;
        background: #05040a;
        z-index: 3;
    }
    .lp-tel-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: none;
        padding: 12px 20px 7px;
        border-radius: 34px 34px 0 0;
        background: var(--card);
        color: var(--ink);
        font-size: 12px;
        font-weight: 650;
        font-variant-numeric: tabular-nums;
    }
    .lp-tel-sig { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
    .lp-tel-cap {
        max-width: 30ch;
        font-family: var(--lp-font-display);
        font-style: italic;
        font-size: 14px;
        line-height: 1.45;
        text-align: center;
        color: var(--ink-soft);
        text-wrap: pretty;
    }

    /* Das Fenster IST der Schirm. */
    .lp-win {
        position: static;
        z-index: auto;
        width: 100%;
        flex: 1;
        min-height: 0;
        transform: none;
        opacity: 1;
        will-change: auto;
        border: 0;
        border-radius: 0 0 34px 34px;
        box-shadow: none;
        font-size: 14px;
        line-height: 1.5;
    }
    .lp-win--mail, .lp-win--budget, .lp-win--gaeste { display: block; }
    /* Der Draht-Schirm traegt seine Eingabeleiste am Boden. */
    .lp-win--draht { display: flex; flex-direction: column; }
    .lp-win--draht, .lp-win--kalender, .lp-win--budget, .lp-win--mail, .lp-win--gaeste {
        inset: auto;
        scale: none;
        translate: none;
    }
    .lp-win-head { padding: 12px 16px; font-size: 12px; letter-spacing: .05em; }
    .lp-win-head b { font-size: 12px; }
    .lp-win-body { padding: 16px 16px 18px; }
    .lp-win-row, .lp-win-slot { padding: 9px 0; font-size: 14px; }
    .lp-win-row b { font-size: 12px; padding: 3px 8px; }
    .lp-win-slot span { width: 46px; }
    .lp-win-slot.is-neu i { font-size: 12px; }
    .lp-win-foot, .lp-win-src { font-size: 12px; margin-top: 10px; padding-top: 10px; }
    .lp-win-snip { font-size: 14px; }
    .lp-msg { max-width: 84%; padding: 9px 13px; border-radius: 15px; font-size: 14px; }
    /* Zwei Karten nebeneinander wie am Geraet (Muaz-Vorbild): Zeit/Person/
       Preis stehen gestapelt, der Stempel sitzt auf der Kartenkante. */
    .lp-choice { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
    .lp-choice-opt {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 10px 10px 11px;
        font-size: 13px;
        line-height: 1.3;
        border-radius: 10px;
        white-space: normal;
    }
    .lp-choice-opt i { margin-left: 0; }
    .lp-choice-opt b { top: -8px; right: -4px; margin-left: 0; font-size: 10px; padding: 2px 7px; }
    .lp-win-bar { height: 8px; }
    /* Eingabeleiste der Draht-Buehne: sitzt am Schirmboden, ueber dem
       Home-Indikator — der Schirm hoert damit auf wie am Geraet. */
    .lp-tel-eingabe {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: auto;
        padding: 10px 14px 26px;
    }
    .lp-tel-plus {
        display: grid;
        place-items: center;
        flex: none;
        width: 24px;
        height: 24px;
        border: 1px solid var(--gold);
        border-radius: 50%;
        color: var(--gold-dark);
        font-size: 15px;
        line-height: 1;
    }
    .lp-tel-feld {
        flex: 1;
        padding: 7px 14px;
        border-radius: 999px;
        background: var(--surface-2);
        color: var(--muted);
        font-size: 13px;
    }

    /* 320px: Optionszeile darf umbrechen statt zu skalieren. */
    @media (max-width: 22.5rem) {
        .lp-tel-rahmen { border-radius: 36px; }
        .lp-choice-opt { white-space: normal; }
    }

    /* M-120 «Der Draht spielt» (Buehne 2), 1200 ms. */
    .lp-tipp { display: none; }
    html.lp-reveal .lp-tipp {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        align-self: flex-start;
        margin-top: 8px;
        padding: 8px 12px;
        border-radius: 15px;
        background: var(--surface-2);
        opacity: 0;
        transform: translateY(6px);
    }
    html.lp-reveal .lp-tipp i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--muted-light);
    }
    html.lp-reveal .lp-tel[data-tel="2"] .lp-msg--in,
    html.lp-reveal .lp-tel[data-tel="2"] .lp-choice,
    html.lp-reveal .lp-tel[data-tel="2"] .lp-msg--out { opacity: 0; }
    html.lp-reveal .lp-tel[data-tel="2"] .lp-msg--in,
    html.lp-reveal .lp-tel[data-tel="2"] .lp-msg--out { transform: translateY(8px); }
    html.lp-reveal .lp-tel[data-tel="2"] .lp-choice { transform: translateY(10px); }
    html.lp-reveal .lp-tel[data-tel="2"] .lp-choice-opt.is-chosen b { opacity: 0; transform: scale(.985); }

    html.lp-reveal .lp-tel[data-tel="2"].in .lp-tipp {
        opacity: 1;
        transform: none;
        transition: opacity .2s var(--lp-ease-fold), transform .2s var(--lp-ease-fold);
        animation: lp-tipp-aus .16s var(--lp-ease-fold) .4s 1 forwards;
    }
    html.lp-reveal .lp-tel[data-tel="2"].in .lp-tipp i {
        animation: lp-tipp-punkt .4s var(--lp-ease-fold) 1;
    }
    html.lp-reveal .lp-tel[data-tel="2"].in .lp-tipp i:nth-child(2) { animation-delay: .12s; }
    html.lp-reveal .lp-tel[data-tel="2"].in .lp-tipp i:nth-child(3) { animation-delay: .24s; }
    html.lp-reveal .lp-tel[data-tel="2"].in .lp-msg--in {
        opacity: 1;
        transform: none;
        transition: opacity .32s var(--lp-ease-fold) .38s, transform .32s var(--lp-ease-fold) .38s;
    }
    html.lp-reveal .lp-tel[data-tel="2"].in .lp-choice {
        opacity: 1;
        transform: none;
        transition: opacity .3s var(--lp-ease-fold) .62s, transform .3s var(--lp-ease-fold) .62s;
    }
    html.lp-reveal .lp-tel[data-tel="2"].in .lp-choice-opt.is-chosen b {
        opacity: 1;
        transform: none;
        transition: opacity .24s var(--ease) .84s, transform .24s var(--ease) .84s;
    }
    html.lp-reveal .lp-tel[data-tel="2"].in .lp-msg--out {
        opacity: 1;
        transform: none;
        transition: opacity .3s var(--lp-ease-fold) .9s, transform .3s var(--lp-ease-fold) .9s;
    }
    @keyframes lp-tipp-punkt {
        0%, 100% { transform: none; }
        50% { transform: translateY(-3px); }
    }
    @keyframes lp-tipp-aus {
        to { opacity: 0; visibility: hidden; }
    }

    /* M-121 «Die Ankunft» (Buehnen 3-5), 840 ms. */
    html.lp-reveal .lp-tel[data-tel="3"] .lp-win-slot.is-neu,
    html.lp-reveal .lp-tel[data-tel="4"] .lp-win-row,
    html.lp-reveal .lp-tel[data-tel="5"] .lp-win-snip {
        opacity: 0;
        transform: translateY(8px);
    }
    html.lp-reveal .lp-tel[data-tel="3"] .lp-win-src,
    html.lp-reveal .lp-tel[data-tel="4"] .lp-win-src,
    html.lp-reveal .lp-tel[data-tel="5"] .lp-win-src { opacity: 0; }
    html.lp-reveal .lp-tel[data-tel="3"].in .lp-win-slot.is-neu,
    html.lp-reveal .lp-tel[data-tel="4"].in .lp-win-row,
    html.lp-reveal .lp-tel[data-tel="5"].in .lp-win-snip {
        opacity: 1;
        transform: none;
        transition: opacity .38s var(--lp-ease-fold) .24s, transform .38s var(--lp-ease-fold) .24s;
    }
    html.lp-reveal .lp-tel[data-tel="3"].in .lp-win-src,
    html.lp-reveal .lp-tel[data-tel="4"].in .lp-win-src,
    html.lp-reveal .lp-tel[data-tel="5"].in .lp-win-src {
        opacity: 1;
        transition: opacity .32s var(--lp-ease-fold) .52s;
    }

    /* W-06 mobil: Puls am Buehnen-Eintritt (M-115 laeuft hier nicht) */
    html.lp-reveal :is(.lp-tel[data-tel="3"], .lp-tel[data-tel="4"], .lp-tel[data-tel="5"]).in .lp-win-dot.is-brass {
        animation: lp-knock .3s var(--ease) .24s 2;
    }
}