/* LumaDrop — Startseite
   =====================
   Umsetzung des Design-Handoffs (Landingpage/design_handoff_lumadrop_landing).
   Der Prototyp trug alles als Inline-Style; hier stehen dieselben Werte als
   Klassen, damit Wiederkehrendes (Eyebrow, H2, Listen, Numerale) an einer
   Stelle liegt.

   Die Seite laedt **keine** fremde Adresse: Schriften sind selbst gehostet,
   Bilder und Videos liegen unter /static/landing/. Damit braucht sie kein
   Consent-Banner — und das soll so bleiben.

   ACHTUNG: In landing.html haengt an der Einbindung ein `?v=`-Zaehler von
   Hand. Wer hier etwas aendert, zaehlt ihn hoch — sonst laeuft neues Markup
   gegen altes CSS. */

/* --- Schriften ------------------------------------------------------- */
/* Archivo (Display/UI) und JetBrains Mono (Labels, Zahlen) — beide SIL OFL,
   als variable Schnitte selbst gehostet. latin + latin-ext, damit deutsche
   Anfuehrungszeichen und Akzente stimmen. */
@font-face {
    font-family: 'Archivo';
    src: url('/static/fonts/archivo-var.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    src: url('/static/fonts/archivo-var-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/static/fonts/jetbrains-mono-var.woff2') format('woff2');
    font-weight: 100 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/static/fonts/jetbrains-mono-var-ext.woff2') format('woff2');
    font-weight: 100 800;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Marken ---------------------------------------------------------- */
:root {
    --bg:           #0F1115;
    --bg-alt:       #12141A;
    --surface:      #16181E;
    --line:         #24262E;
    --line-strong:  #2A2D36;
    --text:         #F4F5F8;
    --text-muted:   #C8CDD6;
    --text-dim:     #868C9B;
    --accent:       #6366F1;
    --accent-hover: #4F46E5;
    --accent-light: #818CF8;
    --numeral:      rgba(244, 245, 248, 0.13);

    --pad-y: clamp(56px, 7vw, 104px);
    --pad-x: clamp(20px, 4vw, 56px);
    --ease:  cubic-bezier(0.2, 0, 0, 1);
}

/* --- Grundgeruest ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text-muted);
    font-family: 'Archivo', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-light); }
::selection { background: var(--accent-hover); color: var(--text); }
img, video { max-width: 100%; }

/* Sprungziel fuer die Tastatur — die Seite ist lang, und der erste Tabstopp
   soll nicht durch die ganze Navigation fuehren. */
.ld-skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: var(--text);
    padding: 12px 18px; font-size: 14px;
}
.ld-skip:focus { left: 0; color: var(--text); }

:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }

/* --- Wiederkehrende Bausteine ---------------------------------------- */
.ld-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.ld-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 18px;
}

.ld-h2 {
    font-variation-settings: 'wdth' 108, 'wght' 800;
    font-size: clamp(2rem, 1rem + 3.4vw, 4rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--text);
    margin: 0 0 14px;
    max-width: 18ch;
    text-wrap: balance;
}
.ld-h2--klein { font-size: clamp(1.8rem, 1rem + 2.6vw, 3.2rem); line-height: 1; max-width: 20ch; }
.ld-h2--breit { max-width: 20ch; }

.ld-lead {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 clamp(32px, 4vw, 56px);
    max-width: 50ch;
    text-wrap: pretty;
}

/* Aufzaehlung: kein Icon-Set, der Marker ist ein Mono-Pfeil. */
.ld-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: grid;
    gap: 12px;
    max-width: 46ch;
}
.ld-list li {
    display: flex;
    gap: 14px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-muted);
}
.ld-list li::before {
    content: '→';
    color: var(--accent-light);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    flex-shrink: 0;
}

/* Grosse, fast durchsichtige Ordnungszahl ueber dreispaltigen Textbloecken. */
.ld-num {
    font-variation-settings: 'wdth' 112, 'wght' 800;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--numeral);
    margin-bottom: 14px;
}

.ld-cap {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 8px;
}

.ld-sec {
    padding: var(--pad-y) var(--pad-x);
    border-top: 1px solid var(--line);
}
.ld-sec--alt { background: var(--bg-alt); }

/* Knoepfe. Keine Radien — das ist im ganzen Entwurf so. */
.ld-btn {
    display: inline-block;
    font-variation-settings: 'wght' 600;
    font-size: 16px;
    color: var(--text);
    background: var(--accent-hover);
    padding: 16px 30px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    transition: background 200ms var(--ease);
}
.ld-btn:hover { background: var(--accent); color: var(--text); }
.ld-btn[disabled] { opacity: 0.6; cursor: default; }

.ld-btn-ghost {
    display: inline-block;
    font-variation-settings: 'wght' 600;
    font-size: 16px;
    color: var(--text);
    border: 1px solid #35383E;
    padding: 16px 30px;
    transition: border-color 200ms var(--ease);
}
.ld-btn-ghost:hover { border-color: var(--accent-light); color: var(--text); }

.ld-btn-reihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Kopfleiste ------------------------------------------------------ */
.ld-head {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px clamp(16px, 3vw, 40px);
    background: rgba(15, 17, 21, 0.72);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.ld-brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.ld-brand:hover { color: var(--text); }
.ld-brand img { display: block; width: 26px; height: 26px; object-fit: contain; }
.ld-brand span {
    font-variation-settings: 'wdth' 108, 'wght' 700;
    font-size: 18px;
    letter-spacing: -0.025em;
}

.ld-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.ld-nav a.ld-navlink {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ld-nav a.ld-navlink:hover { color: var(--accent-light); }

.ld-nav .ld-head-cta {
    font-variation-settings: 'wght' 600;
    font-size: 14px;
    color: var(--text);
    background: var(--accent-hover);
    padding: 11px 20px;
    transition: background 200ms var(--ease);
}
.ld-nav .ld-head-cta:hover { background: var(--accent); color: var(--text); }

/* Anmelden. Bewusst als Umriss und nicht als zweite Vollflaeche: Auf einer
   Verkaufsseite ist die Anfrage der Hauptweg, die Anmeldung der Rueckweg fuer
   Bestandskunden. Zwei gleich laute Knoepfe nebeneinander teilen den Blick. */
.ld-nav .ld-login {
    font-variation-settings: 'wght' 600;
    font-size: 14px;
    color: var(--text);
    border: 1px solid #35383E;
    padding: 10px 18px;
    transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.ld-nav .ld-login:hover { border-color: var(--accent-light); color: var(--text); }

/* --- 1 Hero ---------------------------------------------------------- */
.ld-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    min-height: calc(100vh - 56px);
    border-bottom: 1px solid var(--line);
}
.ld-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(28px, 4vw, 64px);
    gap: 32px;
}
.ld-hero-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-light);
}
.ld-h1 {
    font-variation-settings: 'wdth' 112, 'wght' 800;
    font-size: clamp(2.8rem, 0.5rem + 6.4vw, 7.5rem);
    line-height: 0.86;
    letter-spacing: -0.045em;
    color: var(--text);
    margin: 0;
    max-width: 13ch;
}
.ld-hero-lead {
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 46ch;
    margin: 0;
    text-wrap: pretty;
}
.ld-hero-vid {
    position: relative;
    border-left: 1px solid var(--line);
    min-height: 60vh;
    background: var(--surface);
}
.ld-hero-vid video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.ld-vid-label {
    position: absolute; left: 0; bottom: 0;
    padding: 18px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    background: rgba(15, 17, 21, 0.7);
}

/* --- 2 Kennzahlen ---------------------------------------------------- */
.ld-kpi {
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ld-kpi > div {
    padding: 28px clamp(20px, 3vw, 40px);
    border-right: 1px solid var(--line);
}
.ld-kpi > div:last-child { border-right: 0; }
.ld-kpi-zahl {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 30px;
    font-weight: 500;
    color: var(--accent-light);
    letter-spacing: -0.02em;
}
.ld-kpi-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 8px;
}

/* --- 3 Bildwand ------------------------------------------------------ */
.ld-wall {
    position: relative;
    padding: clamp(64px, 9vw, 140px) clamp(12px, 2vw, 28px) clamp(48px, 6vw, 96px);
    /* Die Fly-in-Bilder starten bis zu 320 px weit ausserhalb (--dx). Ohne
       diese Grenze laesst sich die Seite auf dem Desktop 200 px nach rechts
       schieben — `overflow-x: clip` am body allein reicht nicht, weil die
       Weitergabe an den Viewport das nicht abfaengt. `clip` und nicht
       `hidden`: `hidden` machte den Abschnitt zum Scrollcontainer, und die
       mitlaufende Ueberschrift darin klebt am Fenster, nicht am Abschnitt. */
    overflow-x: clip;
}
.ld-stickyhead {
    position: sticky;
    top: 42vh;
    z-index: 3;
    pointer-events: none;
    text-align: center;
    margin-bottom: -12vh;
}
.ld-stickyhead > div {
    font-variation-settings: 'wdth' 112, 'wght' 800;
    font-size: clamp(2.2rem, 0.5rem + 5.4vw, 6.5rem);
    line-height: 0.88;
    letter-spacing: -0.045em;
    color: var(--text);
    text-shadow: 0 4px 40px rgba(15, 17, 21, 0.85);
    text-wrap: balance;
}
.ld-flygrid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(8px, 1.2vw, 18px);
    position: relative;
    z-index: 1;
}
.ld-flygrid img {
    width: 100%;
    object-fit: cover;
    display: block;
    background: var(--surface);
}
.ld-span2 { grid-column: span 2; aspect-ratio: 4/5; }
.ld-span3 { grid-column: span 3; aspect-ratio: 16/10; }
.ld-span6 { grid-column: span 6; aspect-ratio: 21/9; }
.ld-wall-note {
    max-width: 52ch;
    margin: clamp(36px, 5vw, 64px) auto 0;
    text-align: center;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-dim);
    text-wrap: pretty;
}

/* --- Zweispalter ----------------------------------------------------- */
.ld-split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}
.ld-split--clips { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 72px); }
.ld-split--lp    { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.ld-split3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 48px);
    border-top: 1px solid var(--line);
    padding-top: clamp(24px, 3vw, 40px);
}
.ld-split3 h3 {
    font-variation-settings: 'wght' 700;
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0 0 12px;
}
.ld-split3 .ld-titel {
    font-variation-settings: 'wght' 700;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 8px;
}
.ld-split3 p { font-size: 15px; line-height: 1.6; color: var(--text-dim); margin: 0 0 12px; text-wrap: pretty; }
.ld-split3 p.ld-p-hell { color: var(--text-muted); }
.ld-split3 p:last-child { margin-bottom: 0; }

/* --- 4 E-Commerce ---------------------------------------------------- */
.ld-drei {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1.2vw, 14px);
}
.ld-drei figure { margin: 0; }
.ld-drei img {
    width: 100%; aspect-ratio: 4/5;
    object-fit: cover; display: block;
    background: var(--surface);
}
.ld-medienrahmen { position: relative; background: var(--surface); }
.ld-medienrahmen video { width: 100%; height: auto; display: block; }
.ld-medien-label {
    position: absolute; left: 0; bottom: 0;
    padding: 16px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(0deg, rgba(15, 17, 21, 0.75), rgba(15, 17, 21, 0));
}

/* --- 5 Outfits ------------------------------------------------------- */
.ld-outfit {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding-right: 8%;
    padding-bottom: 6%;
}
.ld-outfit > img {
    width: 100%; display: block;
    border: 1px solid var(--line);
    background: var(--surface);
}
.ld-outfit-model { position: absolute; right: 0; bottom: 0; width: 30%; }
.ld-outfit-model img {
    width: 100%; display: block;
    box-shadow: 0 30px 80px rgba(15, 17, 21, 0.75);
    background: var(--surface);
}

/* --- 6 Cast ---------------------------------------------------------- */
/* Die 48px oben und unten sind Reserve fuer den Drift (±40px) — nicht
   entfernen, sonst stossen die Kacheln an die Nachbarabschnitte. Und die
   Sektion darf kein overflow:hidden bekommen. */
.ld-cast {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 1.4vw, 18px);
    margin: 48px 0;
}
.ld-cast figure { margin: 0; overflow: hidden; will-change: transform; }
.ld-cast img {
    width: 100%; aspect-ratio: 4/5;
    object-fit: cover; display: block;
    background: var(--surface);
    transition: transform 320ms var(--ease), filter 320ms var(--ease);
    filter: brightness(1) saturate(1);
}
.ld-cast figure:hover img { transform: scale(1.05); filter: brightness(1.12) saturate(1.08); }

/* --- 7 Kampagnenstrecken --------------------------------------------- */
.ld-strecke { padding: var(--pad-y) 0 0; overflow: hidden; border-top: 1px solid var(--line); }
.ld-strecke-kopf {
    display: flex; align-items: baseline; gap: 20px;
    padding: 0 var(--pad-x) 24px;
}
.ld-strecke-kopf .ld-num { margin-bottom: 0; }
.ld-strecke-kopf .ld-eyebrow { margin-bottom: 6px; }
.ld-strecke-titel {
    font-variation-settings: 'wght' 700;
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem);
    letter-spacing: -0.025em;
    color: var(--text);
}
.ld-mq { display: flex; gap: 14px; width: max-content; }
.ld-mq img {
    height: clamp(260px, 28vw, 420px);
    width: auto;
    object-fit: cover;
    display: block;
    background: var(--surface);
}
.ld-mq--a { animation: ld-mq-a 52s linear infinite; }
.ld-mq--b { animation: ld-mq-b 64s linear infinite; }
@keyframes ld-mq-a { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes ld-mq-b { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* --- 8 Clips --------------------------------------------------------- */
.ld-timeline { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.ld-timeline > span:first-child {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-dim); white-space: nowrap;
}
.ld-tl { height: 8px; background: var(--accent); }
.ld-tl-luecke { height: 8px; background: var(--line-strong); }
.ld-clipbox { position: relative; background: var(--bg); border: 1px solid var(--line); }
/* contain, nicht cover: der Clip darf nicht beschnitten werden. */
.ld-clipbox video { width: 100%; aspect-ratio: 4/5; object-fit: contain; display: block; }
.ld-clip-label {
    position: absolute; top: 0; left: 0; right: 0;
    padding: 14px 16px 28px;
    background: linear-gradient(180deg, rgba(15, 17, 21, 0.8), rgba(15, 17, 21, 0));
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text); white-space: nowrap;
}

/* --- 9 Varianten ----------------------------------------------------- */
.ld-varsplit {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
}
.ld-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 10px;
}
.ld-label--akzent { color: var(--accent-light); }
.ld-var-original { width: 100%; display: block; border: 1px solid var(--line); background: var(--surface); }
.ld-karte { margin-top: 20px; border: 1px solid var(--line); padding: 16px; background: var(--surface); }
.ld-karte p { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.ld-zeile {
    margin-top: 12px; display: flex; align-items: center; justify-content: space-between;
    border: 1px solid var(--line); padding: 12px 16px;
}
.ld-zeile > span:last-child { font-variation-settings: 'wght' 700; font-size: 20px; color: var(--text); }

.ld-varstage {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    height: clamp(380px, 52vw, 660px);
    overflow: hidden;
}
/* Alle drei Varianten liegen uebereinander und werden nur ein- und
   ausgeblendet — deshalb KEIN loading="lazy": ein Bild mit opacity 0 gilt als
   nicht sichtbar und wuerde nie geladen. */
.ld-varstage img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; display: block;
    opacity: 0;
    transition: opacity 260ms var(--ease);
}
.ld-varstage img.is-an { opacity: 1; }

.ld-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.ld-thumb {
    position: relative; padding: 0;
    border: 1px solid var(--line);
    background: var(--surface);
    cursor: pointer; display: block;
    opacity: 0.62;
    transition: opacity 200ms, border-color 200ms;
}
.ld-thumb.is-an { border-color: var(--accent); opacity: 1; }
.ld-thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.ld-thumb span {
    position: absolute; left: 10px; bottom: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.14em;
    color: var(--text);
    text-shadow: 0 1px 6px rgba(15, 17, 21, 0.9);
}
.ld-varbeschreibung { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
/* min-height verhindert den Sprung beim Wechsel auf einen kuerzeren Text. */
.ld-varbeschreibung p {
    font-size: 15px; line-height: 1.6; color: var(--text-muted);
    margin: 0; max-width: 76ch; min-height: 3.2em; text-wrap: pretty;
}

/* --- 11 Landing Pages ------------------------------------------------ */
.ld-lp-link {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text);
    border: 1px solid var(--line);
    padding: 14px 18px;
    transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.ld-lp-link:hover { border-color: var(--accent); color: var(--accent-light); }

.ld-vorschau { display: block; border: 1px solid var(--line); background: var(--surface); }
.ld-vorschau:hover { border-color: var(--accent); }
.ld-vorschau-url {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.ld-vorschau-url span:first-child { width: 8px; height: 8px; border-radius: 999px; background: var(--line-strong); flex-shrink: 0; }
.ld-vorschau-url span:last-child {
    flex: 1;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.04em; color: var(--text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ld-vorschau-inhalt { padding: clamp(20px, 3vw, 36px); }
.ld-vorschau-titel {
    font-variation-settings: 'wdth' 108, 'wght' 800;
    font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem);
    line-height: 1.02; letter-spacing: -0.03em;
    color: var(--text); margin-bottom: 6px;
}
.ld-vorschau-unter { font-size: 14px; color: var(--text-dim); margin-bottom: 22px; }
.ld-vorschau-galerie {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; margin-bottom: 22px;
}
.ld-vorschau-galerie img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.ld-vorschau-formular { display: grid; gap: 8px; border: 1px solid var(--line); padding: 14px; }
.ld-vorschau-feld { height: 30px; border: 1px solid var(--line); background: var(--bg); }
.ld-vorschau-knopf {
    height: 30px; background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text);
}

/* --- 12 Preis-Band --------------------------------------------------- */
/* Die KI-Kennzeichnung ist im Bild eingebrannt — kein zusaetzliches Badge.
   Beim Bildtausch pruefen, dass sie im sichtbaren Ausschnitt bleibt. */
.ld-preis {
    position: relative;
    border-top: 1px solid var(--line);
    min-height: clamp(420px, 60vh, 720px);
    display: flex; align-items: center;
    overflow: hidden;
}
.ld-preis > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 35%;
    display: block;
}
.ld-scrim {
    position: relative; width: 100%;
    background: linear-gradient(90deg, rgba(15,17,21,0.94) 0%, rgba(15,17,21,0.86) 62%, rgba(15,17,21,0.35) 100%);
    padding: clamp(40px, 6vw, 96px) clamp(20px, 4vw, 72px);
}
.ld-preis-kopf {
    font-variation-settings: 'wdth' 108, 'wght' 800;
    font-size: clamp(1.9rem, 1rem + 3.2vw, 3.8rem);
    line-height: 0.98; letter-spacing: -0.04em;
    color: var(--text); margin-bottom: 20px; text-wrap: balance;
}
.ld-preis-liste { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 72px); align-items: flex-start; }
.ld-preis-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 10px;
}
.ld-preis-zahl {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(2.4rem, 1rem + 4.4vw, 4.6rem);
    font-weight: 500; line-height: 1; letter-spacing: -0.04em;
    color: var(--accent-light); white-space: nowrap;
}
.ld-preis-marker {
    align-self: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--line);
    padding: 10px 14px;
    background: rgba(15, 17, 21, 0.6);
}

/* --- 13 FAQ ---------------------------------------------------------- */
.ld-faq { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 72px); }
.ld-faq-liste { border-top: 1px solid var(--line); }
.ld-faq-liste > div { border-bottom: 1px solid var(--line); }
.ld-faq-btn {
    display: flex; width: 100%;
    align-items: center; justify-content: space-between; gap: 24px;
    text-align: left; background: transparent; border: 0;
    padding: 24px 0; cursor: pointer;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: 'wght' 600;
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
    letter-spacing: -0.02em; color: var(--text);
}
.ld-faq-zeichen {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 20px; font-weight: 400; color: var(--accent-light);
    line-height: 1; flex-shrink: 0;
    transition: transform 200ms var(--ease);
}
.ld-faq-btn[aria-expanded="true"] .ld-faq-zeichen { transform: rotate(45deg); }
.ld-faq-antwort { padding: 0 0 24px; font-size: 16px; line-height: 1.62; color: var(--text-muted); max-width: 62ch; }

/* --- 14 Abschluss + Formular ----------------------------------------- */
.ld-demo { border-top: 1px solid var(--line); padding: clamp(64px, 9vw, 140px) var(--pad-x); text-align: center; }
.ld-demo h2 {
    font-variation-settings: 'wdth' 112, 'wght' 800;
    font-size: clamp(2.4rem, 1rem + 6vw, 6.5rem);
    line-height: 0.9; letter-spacing: -0.045em;
    color: var(--text); margin: 0 auto 28px; max-width: 16ch; text-wrap: balance;
}
.ld-demo-lead {
    font-size: 18px; line-height: 1.55; color: var(--text-muted);
    margin: 0 auto 40px; max-width: 52ch; text-wrap: pretty;
}

.ld-form { max-width: 640px; margin: 0 auto; text-align: left; display: grid; gap: 18px; }
.ld-feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ld-feld { display: grid; gap: 8px; }
.ld-feld label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-dim);
}
.ld-feld input, .ld-feld textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    padding: 13px 14px;
    transition: border-color 200ms var(--ease);
}
.ld-feld input:focus, .ld-feld textarea:focus { outline: none; border-color: var(--accent); }
.ld-feld textarea { min-height: 120px; resize: vertical; }
.ld-feld input::placeholder, .ld-feld textarea::placeholder { color: #5C6270; }

/* Honigtopf: aus dem Blickfeld geschoben, NICHT display:none — manche Bots
   ueberspringen unsichtbare Felder gezielt. */
.ld-honig { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.ld-zustimmung {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 14px; line-height: 1.5; color: var(--text-dim);
}
.ld-zustimmung input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }

.ld-meldung { padding: 14px 16px; font-size: 15px; line-height: 1.5; border: 1px solid; }
.ld-meldung-fehler { border-color: #7F1D1D; background: rgba(127, 29, 29, 0.18); color: #FCA5A5; }
.ld-danke { max-width: 640px; margin: 0 auto; border: 1px solid var(--accent); padding: 28px; background: var(--surface); }
.ld-danke h3 {
    font-variation-settings: 'wght' 700; font-size: 1.4rem;
    color: var(--text); margin: 0 0 10px;
}
.ld-danke p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-muted); }
[hidden] { display: none !important; }

/* --- Fuss ------------------------------------------------------------ */
.ld-foot {
    border-top: 1px solid var(--line);
    padding: clamp(32px, 4vw, 56px) var(--pad-x);
    display: flex; flex-wrap: wrap; gap: 24px;
    align-items: center; justify-content: space-between;
}
.ld-foot-brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.ld-foot-brand img { display: block; width: 22px; height: 22px; object-fit: contain; }
.ld-foot-brand span { font-variation-settings: 'wdth' 108, 'wght' 700; font-size: 16px; letter-spacing: -0.025em; }
.ld-foot-links { display: flex; flex-wrap: wrap; gap: 24px; }
.ld-foot-links a {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-dim);
}
.ld-foot-links a:hover { color: var(--accent-light); }
.ld-foot-note { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-dim); }

/* --- Bewegung -------------------------------------------------------- */
@keyframes ld-fly {
    from { transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--dr, 0deg)) scale(var(--ds, 1)); opacity: 0.35; }
    to   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 1; }
}
@keyframes ld-conv-a { from { transform: translate3d(-4%, 40px, 0) scale(0.94); opacity: 0.55; } to { transform: none; opacity: 1; } }
@keyframes ld-conv-b { from { transform: translate3d(26%, 26%, 0) rotate(4deg) scale(0.82); opacity: 0; } to { transform: none; opacity: 1; } }

/* Scroll-Timeline, wo der Browser sie kann. Wo nicht, stehen Fly-in und
   Komposition einfach fertig da — der Einblender unten laeuft trotzdem. */
@supports (animation-timeline: view()) {
    [data-fly]           { animation: ld-fly linear both;    animation-timeline: view(); animation-range: entry 0% cover 45%; }
    [data-conv="app"]    { animation: ld-conv-a linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    [data-conv="model"]  { animation: ld-conv-b linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}

/* Der Einblender haengt an einer Klasse am <html>, die das Skript im <head>
   setzt. Ohne JavaScript wird sie nie gesetzt — dann bleibt alles sichtbar,
   statt dass die halbe Seite leer ist. */
.hat-js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.hat-js [data-reveal].ist-da { opacity: 1; transform: none; }

/* --- Breite ---------------------------------------------------------- */
@media (max-width: 900px) {
    .ld-hero { grid-template-columns: 1fr; min-height: 0; }
    .ld-hero-text { padding-top: clamp(48px, 12vw, 96px); }
    .ld-hero-vid { border-left: 0; border-top: 1px solid var(--line); min-height: 0; aspect-ratio: 4/5; }
    .ld-split, .ld-split--clips, .ld-split--lp, .ld-split3, .ld-varsplit, .ld-faq { grid-template-columns: 1fr; }
    .ld-flygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ld-flygrid img { grid-column: span 1 !important; aspect-ratio: 4/5 !important; }
    .ld-stickyhead { position: static; margin-bottom: clamp(24px, 6vw, 48px); }
    .ld-scrim {
        background: linear-gradient(180deg, rgba(15,17,21,0.55) 0%, rgba(15,17,21,0.94) 46%, rgba(15,17,21,0.98) 100%);
    }
    .ld-nav a.ld-navlink { display: none; }
    .ld-cast { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ld-kpi > div { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 640px) {
    .ld-outfit { padding-right: 0; padding-bottom: 34%; }
    .ld-outfit-model { width: 44%; }
    .ld-faq-btn { font-size: 1.05rem; }
    .ld-feldpaar { grid-template-columns: 1fr; }
    .ld-head { gap: 12px; }
    .ld-nav { gap: 10px; }
    .ld-nav .ld-head-cta, .ld-nav .ld-login { padding: 10px 14px; font-size: 13px; }
    /* Ohne das bricht „Demo anfragen" auf zwei Zeilen und zieht die ganze
       Kopfleiste in die Hoehe. */
    .ld-nav a { white-space: nowrap; }
}

/* Auf schmalen Telefonen passen Wortmarke und zwei Knoepfe nicht nebeneinander.
   Das Logo bleibt, der Schriftzug geht — er steht ohnehin im Fuss und im
   Seitentitel, waehrend die beiden Knoepfe die einzigen Wege von hier weg sind. */
@media (max-width: 480px) {
    .ld-brand span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hat-js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    [data-fly], [data-conv] { animation: none !important; opacity: 1 !important; transform: none !important; }
    .ld-mq--a, .ld-mq--b { animation: none !important; }
    .ld-cast figure { transform: none !important; }
}