/* ============================================================================
   ShareMo — Startseite, Entwurf „Studio" (R70)
   ----------------------------------------------------------------------------
   Löst das inline-CSS „Landing v2" aus index.php ab (dort standen rund 260
   Zeilen Layout mitten in einer 5400-Zeilen-Datei). Panel und die 15 Szenen
   bleiben bewusst in index.php — sie laufen fehlerfrei und werden nicht
   angefasst.

   DIE TRAGENDE IDEE
   Der WebGL-Swirl bleibt vollflächig hinter der Seite (ausdrückliche Vorgabe).
   Lesbar wird die Seite deshalb NICHT über den Hintergrund, sondern über
   DECKENDE Platten mit breiten Fugen: Text steht nie auf dem Swirl, der Swirl
   erscheint in den Zwischenräumen und wird dadurch Rahmen statt Untergrund.
   Gemessen erreicht Text auf dem Swirl nur 1,0–2,9:1 — es gibt also keinen
   Mittelweg, jede Textfläche muss deckend sein.

   Kein `html.light` mehr: assets/js/theme.js entfernt die Klasse aktiv
   („Light-Modus existiert nicht mehr"), alle hellen Varianten wären tot.
   ========================================================================== */

/* Die Marken stehen an :root, NICHT an .lp-land.
   R71: In r70 standen sie an .lp-land — und die Kopfleiste, der Knopf „Nach
   oben" und das Funktions-Panel sind GESCHWISTER von <main class="lp-land">,
   keine Kinder. Dort löste jedes var(--lp-…) ins Leere auf, die Erklärung
   wurde ungültig und fiel auf den Anfangswert zurück. Sichtbar wurde das am
   Knopf „Registrieren": `color` ist ein fester Wert und griff, `background:
   var(--lp-acc)` fiel auf durchsichtig — dunkle Schrift auf nichts, 1,25:1.
   Ebenso still verloren: das Seitenmaß der Leiste (padding 0), ihre
   Rahmenlinie, die cyan hervorgehobene Sprache, die bernsteinfarbene
   Beta-Marke und sämtliche Hover-Zustände im Kopf.
   MERKE: Eine Marke gilt nur im Teilbaum, in dem sie erklärt wird. */
:root {
    /* Flächen */
    --lp-slab:      #0F1114;   /* Sektionsplatte  */
    --lp-card:      #15181C;   /* Karte auf der Platte */
    --lp-card-2:    #1C2026;   /* Karte, gehoben */
    --lp-edge:      #232830;
    --lp-edge-2:    #333A44;
    /* Schrift */
    --lp-ink:       #F0F2F5;
    --lp-ink-2:     #98A1AB;
    --lp-ink-3:     #6A737D;
    /* Akzente */
    --lp-acc:       #22D3EE;
    --lp-acc-soft:  rgba(34,211,238,.13);
    --lp-acc-2:     #5BE4F7;   /* Akzent beim Überfahren */
    --lp-warm:      #F59E0B;
    --lp-btn-ink:   #03212A;   /* Schrift auf cyanfarbenen Knöpfen */
    --lp-radius:    22px;
    --lp-radius-sm: 14px;
    --lp-gutter:    clamp(12px, 2.2vw, 22px);

    /* Karten-Hover „Glas-Hauch", Stufe B (siehe ganz unten in dieser Datei) */
    --lp-hv-sheen:  .075;      /* Lichtschimmer      */
    --lp-hv-tint:   .09;       /* Cyan-Spiegelung    */
    --lp-hv-rim:    .11;       /* Glaskante          */
    --lp-hv-lift:   2px;       /* Anheben, nur freistehende Karten */
}

.lp-land {
    position: relative; z-index: 5; width: 100%;
    color: var(--lp-ink);
    font-family: var(--font, system-ui, sans-serif);
    padding: 0 var(--lp-gutter);
}
.lp-land section { box-sizing: border-box; }
.lp-land .lp-tld { color: var(--lp-acc); }

/* Display-Schrift: Inter 800, eng gestellt. Gewicht 800 kommt aus font_links(). */
.lp-disp {
    font-weight: 800; letter-spacing: -.035em; line-height: 1.03;
    text-wrap: balance; font-synthesis-weight: none;
}

/* ══ Kopfleiste ═══════════════════════════════════════════════════════════
   Eine Leiste statt zwei: das frühere Wortmarken-Band (.lp-stickyword) ist
   entfallen, sein DE/EN-Schalter sitzt jetzt hier. Ebenso entfallen ist die
   Schnellanmeldung mit zwei Eingabefeldern — angemeldet wird über „Login".
   Damit fallen auch $quickBp und die dreistufige Beta-Kürzung weg, die es nur
   gab, weil die Eingabefelder nicht mitschrumpfen konnten.                  */
.lp-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
    padding: 10px var(--lp-gutter);
    background: none; border: 0; box-shadow: none; backdrop-filter: none;
    transition: opacity 1.6s ease;
}
.lp-header-inner {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; gap: .7rem; position: relative;
    padding: 7px 7px 7px 18px;
    background: rgba(15,17,20,.88);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
            backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--lp-edge);
    border-radius: 999px;
    box-shadow: 0 12px 40px -18px rgba(0,0,0,.9);
}
.lp-header-logo {
    display: flex; align-items: center; gap: .5rem; flex: 0 0 auto;
    text-decoration: none; color: var(--lp-ink);
    font-weight: 800; letter-spacing: -.03em; font-size: 1rem;
    white-space: nowrap; max-width: 42vw; overflow: hidden; text-overflow: ellipsis;
}
.lp-header-logo:hover { color: var(--lp-acc); }

/* Sektions-Navigation in der Leiste. Unter 1180 px übernimmt der Hamburger,
   der dieselben sieben Punkte führt — es geht also nichts verloren. */
.lp-header-nav { display: flex; gap: 1px; margin-left: .5rem; min-width: 0; }
.lp-header-nav a {
    font-size: .82rem; color: var(--lp-ink-2); text-decoration: none;
    padding: 6px 10px; border-radius: 8px; white-space: nowrap;
    transition: color .15s, background .15s;
}
.lp-header-nav a:hover { color: var(--lp-ink); background: var(--lp-card-2); }
.lp-header-center { margin-left: auto; display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; }

.lp-header-btn {
    font: inherit; font-size: .83rem; font-weight: 600; cursor: pointer;
    padding: 8px 15px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--lp-edge-2); background: transparent; color: var(--lp-ink);
    transition: background .15s, border-color .15s;
}
.lp-header-btn:hover { background: var(--lp-card-2); border-color: var(--lp-edge-2); }
.lp-header-btn-primary {
    background: var(--lp-acc); border-color: var(--lp-acc); color: #03212A;
}
.lp-header-btn-primary:hover { background: #5BE4F7; border-color: #5BE4F7; color: #03212A; }

/* DE/EN — wanderte aus dem entfallenen Wortmarken-Band hierher. */
.lp-header-lang {
    font-family: var(--font-mono, monospace); font-size: .68rem; font-weight: 700;
    letter-spacing: .04em; color: var(--lp-ink-3); background: none; border: 0;
    padding: 0 .45rem; cursor: pointer; white-space: nowrap;
}
.lp-header-lang .lp-lang-de, .lp-header-lang .lp-lang-en { opacity: .45; transition: opacity .2s, color .2s; }
.lp-header-lang .lp-lang-sep { opacity: .3; }
.lp-header-lang.is-de .lp-lang-de,
.lp-header-lang.is-en .lp-lang-en { opacity: 1; color: var(--lp-acc); }

.lp-beta-tag {
    display: inline-flex; align-items: baseline; gap: .3rem; white-space: nowrap;
    font-family: var(--font-mono, monospace);
    font-size: .63rem; font-weight: 500; letter-spacing: .1em;
    color: var(--lp-warm);
    border: 1px solid rgba(245,158,11,.4); border-radius: 6px;
    padding: 4px 8px; cursor: default; user-select: none;
}
.lp-beta-long { display: none; }          /* Ohne Schnellanmeldung reicht die Kurzform */
.lp-beta-short { display: inline; }

/* inc/lang_switch.php bringt einen eigenen, schwebenden DE/EN-Knopf mit
   (fixed, top/right 1rem) — also genau dort, wo jetzt die Kopfleiste sitzt.
   Auf der Startseite trägt ihn die Leiste; auf den eingebetteten Rechtsseiten
   (body ohne .lp-landing) bleibt der schwebende Knopf wie bisher. */
body.lp-landing .lang-switch { display: none; }

/* ══ Intro ════════════════════════════════════════════════════════════════
   Das Intro ist jetzt ein DECKENDER ÜBERZUG über der fertigen Seite, keine
   100-vh-Sektion mehr im Fluss. Damit entfallen ersatzlos:
     • --lp-upshift / --lp-hero-collapse und lpHeroCollapse()  (R27)
     • der 100-vh-Kasten, der am Desktop Klicks abfing         (R34a)
   Nach dem Tippen schrumpft der Ring in die Kopfleiste (Flugstrecke misst das
   Skript und legt sie als --lp-fly-x/y ab), der Überzug blendet aus.        */
.lp-intro {
    position: fixed; inset: 0; z-index: 1300;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 2rem 1.25rem;
    background: #08090B;
    transition: opacity .85s ease, visibility .85s;
}
.lp-intro-inner {
    display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
    transition: transform 1s cubic-bezier(.4,0,.2,1), opacity .7s ease;
    will-change: transform, opacity;
}
.lp-land.up .lp-intro { opacity: 0; visibility: hidden; pointer-events: none; }
.lp-land.up .lp-intro-inner {
    transform: translate(var(--lp-fly-x, 0px), var(--lp-fly-y, -34vh)) scale(.18);
    opacity: 0;
}
.lp-land.lp-instant .lp-intro,
.lp-land.lp-instant .lp-intro-inner { transition: none; }
.lp-intro-ring {
    margin: 0 auto !important; opacity: 0; transform: scale(.55);
    transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.lp-intro-ring.in { opacity: 1; transform: scale(1); }

.lp-skip-intro {
    position: fixed; bottom: 64px; left: 50%; z-index: 1350;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .8rem; border-radius: 99px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    color: rgba(255,255,255,.72); font-size: .74rem; font-family: var(--font);
    cursor: pointer; opacity: 0; pointer-events: none;
    transform: translateX(-50%) translateY(6px);
    transition: opacity .3s ease, transform .3s ease, background .2s;
}
.lp-skip-intro.show { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
.lp-skip-intro:hover { background: rgba(255,255,255,.14); color: #fff; }
.lp-skip-intro svg { width: 14px; height: 14px; }
.lp-land.up .lp-skip-intro { opacity: 0; pointer-events: none; }

/* Wortmarke im Intro — wörtlich aus dem abgelösten Block übernommen.
   Das ist die Marken-Animation; sie stand ausdrücklich nicht zur Umgestaltung. */
.lp-lockup { display: flex; align-items: center; gap: 1rem; }
.lp-rule { width: 2px; height: 54px; background: linear-gradient(#5ad4ee, rgba(90,212,238,0));
    transform: scaleY(0); transform-origin: top; opacity: 0; transition: transform .55s ease, opacity .55s ease; }
.lp-rule.in { transform: scaleY(1); opacity: .85; }
.lp-word { display: flex; align-items: baseline; font-weight: 600; line-height: 1; }
.lp-word .lp-main { font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: .01em;
    background: linear-gradient(135deg, #ffffff 0%, #06b6d4 45%, #f97316 85%, #ffffff 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.lp-word .lp-tld  { font-size: clamp(.95rem, 2.2vw, 1.3rem); margin-left: 2px; }
.lp-word.caret::after { content: ""; display: inline-block; width: 3px; height: 1em; background: #5ad4ee;
    margin-left: 4px; align-self: center; animation: lpCaret .7s step-end infinite; }
@keyframes lpCaret { 50% { opacity: 0; } }
.lp-sub { margin: 0; font-size: clamp(.9rem, 2.2vw, 1.05rem); color: rgba(255,255,255,.72); max-width: 440px;
    opacity: 0; transition: opacity .9s ease; }
.lp-sub.in { opacity: 1; }

/* Hamburger-Menü der Startseite (Rückfallebene unter 1180 px) */
#hamburger-menu.lp-landing-menu .hamburger-menu-item { text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; text-decoration: none; }
.lp-landing-menu .hamburger-divider { height: 1px; margin: .35rem .75rem; background: var(--border); opacity: .7; }
@media (min-width: 1180px) {
    /* Oberhalb der Schwelle steht die Navigation offen in der Leiste — beide
       Hamburger-Knöpfe wären dort eine zweite, redundante Bedienung. */
    .lp-hamburger-wrap, .lp-hamburger-mobile { display: none !important; }
}

/* ══ Platten ═══════════════════════════════════════════════════════════════════════════
   Jede Sektion IST die Platte. Zwischen den Platten bleibt eine Fuge, in der
   der Swirl sichtbar wird.

   r78 · Die Platte ist GLAS — dieselbe Rezeptur wie Impressum/Datenschutz/
   AGB/Kontakt. Bis r77 war sie deckend (--lp-slab) und nur `.lp-sec.lp-page`
   war Glas; ausdrückliche Vorgabe war, das auf ALLE Platten auszudehnen.
   Die Werte stehen in style.css (`--mc-glass-*`), das Startseite UND Dashboard
   laden — dort steht auch, warum die Deckkraft nicht frei wählbar ist.

   ES BLEIBT DIE FARBE, NUR DURCHSICHTIG: --lp-slab ist #0F1114 und
   --mc-glass-fill ist rgba(15,17,20,.86) — exakt dieselbe Farbe bei 86 %.
   Neu ist also die Durchsicht, nicht der Ton.

   RÜCKFALL IST DIE DECKENDE PLATTE, nicht `transparent`: fände --mc-glass-fill
   sich nicht (style.css nicht geladen), stünde der Text sonst blank auf dem
   Swirl (1,0–2,9:1). `var(--lp-slab)` als zweite Stufe fällt in den sicheren
   Zustand zurück — deshalb ist die Marke oben NICHT tot, sie ist die Reserve.

   GEMESSEN über der hellsten Swirl-Zone (99. Perzentil, ungeweichzeichnet —
   der Weichzeichner mittelt und macht es in der Praxis besser):
       --lp-ink   Überschriften   16,9 → 13,6:1
       --lp-ink-2 Fließtext         7,2 →  5,8:1
       --lp-acc   Vorzeile         10,5 →  8,4:1
       --lp-ink-3 Kleintext         3,9 →  3,2:1   ← lag schon vorher unter 4,5
   Wer die Deckkraft senkt, kippt zuerst den Fließtext.                       */
.lp-sec {
    max-width: 1280px; margin: 0 auto 1.3rem;
    padding: clamp(1.7rem, 4vw, 3.6rem);
    background: var(--mc-glass-fill, var(--lp-slab));
    -webkit-backdrop-filter: var(--mc-glass-blur, blur(24px) saturate(160%));
    backdrop-filter: var(--mc-glass-blur, blur(24px) saturate(160%));
    border: 1px solid var(--mc-glass-edge, rgba(255,255,255,.12));
    border-radius: var(--lp-radius);
    box-shadow: var(--mc-glass-shadow, 0 20px 60px rgba(0,0,0,.45)),
                inset 0 1px 0 var(--mc-glass-rim, rgba(255,255,255,.08));
    /* R71: --lp-header-h misst das Skript in index.php an der echten Leiste.
       Die feste 84 stimmte nur am Rechner; unter 680 px ist die Leiste 122 px
       hoch, und jeder Menüsprung landete darunter. */
    scroll-margin-top: calc(var(--lp-header-h, 75px) + 10px);
}
/* Verschachtelte Platten vermeiden: diese beiden Sektionen umschließen ihren
   Inhalt heute mit einer eigenen .lp-glass — die wird hier neutralisiert. */
#lp-plans > .lp-glass,
#lp-demo-sec > .lp-glass {
    background: none; border: 0; box-shadow: none; border-radius: 0;
    padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* .lp-glass war Milchglas und ist jetzt die deckende Karte AUF der Platte.
   Eine Umdefinition statt fünfzehn Einzeländerungen: Schritte, Funktions-
   karten, Preise, Demo und Download hängen alle daran. */
.lp-glass {
    background: var(--lp-card);
    border: 1px solid var(--lp-edge);
    border-radius: var(--lp-radius-sm);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none;
}

.lp-eyebrow {
    font-family: var(--font-mono, monospace);
    font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--lp-acc); margin: 0 0 .7rem; font-weight: 500; text-align: left;
}
.lp-h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.7rem); color: var(--lp-ink);
    margin: 0 0 .8rem; font-weight: 800; letter-spacing: -.035em;
    line-height: 1.08; text-align: left; text-wrap: balance;
}
.lp-lead { color: var(--lp-ink-2); font-size: 1rem; margin: 0 0 clamp(1.4rem,3vw,2.4rem); max-width: 60ch; }

/* ══ Hero ═════════════════════════════════════════════════════════════════ */
/* R71: oberer Abstand = echte Kopfhöhe + Luft. Vorher eine feste Spanne;
   am Handy (Leiste zweizeilig, 122 px) verschwanden Vorzeile und der obere
   Rand der Überschrift dahinter — gemessen 62 px verdeckt. */
#lp-hero { padding-top: calc(var(--lp-header-h, 75px) + clamp(1.4rem, 3vw, 2.2rem)); }
.lp-hero-grid {
    display: grid; grid-template-columns: 1.05fr .95fr;
    gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
}
/* Achtung: die Sektion trägt die ID lp-hero, KEINE gleichnamige Klasse.
   Mit `.lp-hero h1` traf die Regel nichts — gemessen 28 px statt 58 px. */
#lp-hero h1 {
    font-size: clamp(2.3rem, 5.4vw, 4.4rem); margin: .9rem 0 1.1rem;
    color: var(--lp-ink);
}
#lp-hero h1 em { font-style: normal; color: var(--lp-ink-3); }
.lp-hero-p { font-size: clamp(1rem, 1.5vw, 1.14rem); color: var(--lp-ink-2); max-width: 46ch; margin: 0 0 1.6rem; }
.lp-hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.lp-hero-cta .lp-header-btn { padding: 12px 22px; font-size: .92rem; }
.lp-hero-facts {
    margin-top: 1.6rem; display: flex; gap: 1.2rem; flex-wrap: wrap;
    font-family: var(--font-mono, monospace); font-size: .68rem;
    color: var(--lp-ink-3); letter-spacing: .05em;
}

/* Produktfenster im Hero */
.lp-win {
    border-radius: 16px; overflow: hidden; border: 1px solid var(--lp-edge-2);
    background: var(--lp-card); box-shadow: 0 40px 90px -44px #000;
}
.lp-win-bar {
    display: flex; align-items: center; gap: 7px; padding: 10px 13px;
    background: var(--lp-card-2); border-bottom: 1px solid var(--lp-edge);
}
.lp-win-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--lp-edge-2); display: block; }
.lp-win-bar span { margin-left: 8px; font-family: var(--font-mono, monospace); font-size: .65rem; color: var(--lp-ink-3); }
.lp-win-body { display: grid; grid-template-columns: 92px 1fr; min-height: 210px; }
.lp-win-side { border-right: 1px solid var(--lp-edge); padding: 12px 10px; display: grid; gap: 7px; align-content: start; }
.lp-win-side i { display: block; height: 8px; border-radius: 3px; background: var(--lp-card-2); }
.lp-win-side i:first-child { background: rgba(34,211,238,.45); width: 70%; }
.lp-win-side i:nth-child(2) { width: 88%; }
.lp-win-side i:nth-child(3) { width: 62%; }
.lp-win-side i:nth-child(4) { width: 79%; }
.lp-win-side i:nth-child(5) { width: 54%; }
.lp-win-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
.lp-win-grid span {
    aspect-ratio: 1; border-radius: 6px; background: var(--lp-card-2) center/cover no-repeat; display: block;
}

/* ══ Rechtsseiten ═════════════════════════════════════════════════════════
   Impressum · Datenschutz · AGB · Kontakt liegen seit R72 in einer Platte wie
   jede andere Sektion — vorher steckten sie im Portfolio-Showcase (Ring,
   senkrechter Name, Milchglaskachel) und ihr Fließtext stand damit direkt auf
   dem Swirl. Hier steht NUR die Hülle; Typografie und Farben bringt jede Seite
   in ihrem eigenen <style> mit (eine Quelle je Seite), damit sie auch im
   Dashboard-Modal stimmen, wo es diese Datei nicht gibt.                    */
.lp-page-shell {
    padding-top: calc(var(--lp-header-h, 75px) + clamp(1rem, 2.4vw, 1.8rem));
    padding-bottom: 1.3rem;
}
.lp-page { display: flow-root; }   /* Ränder der Kinder bleiben in der Platte */

/* r74 · Diese Platte ist Glas. Sie ist das Gegenstück zu
   `#legal-modal .modal-box` (dashboard.php): dieselben vier Seiten, dieselbe
   Optik, egal ob abgemeldet oder eingeloggt. Die Werte stehen in style.css
   (`--mc-glass-*`), das BEIDE Umgebungen laden — dort steht auch, warum die
   Deckkraft nicht frei wählbar ist.
   Die Ersatzwerte sind Pflicht, nicht Zierde: gäbe es sie nicht und fehlte die
   Marke, fiele `background` auf `transparent` und der Text stünde blank auf dem
   Swirl (1,0–2,9:1) — genau der Zustand, den r72 beseitigt hat.

   r78 · Seit die Grundregel `.lp-sec` selbst Glas ist, wiederholt dieser Block
   nur noch, was ohnehin gilt — er bleibt trotzdem stehen, und zwar mit Absicht:
   für die Startseite ist das Glas Geschmack, für die Rechtsseiten ist es eine
   ZUSAGE (der Fließtext muss 4,5:1 erreichen, siehe style.css). Wer die
   Startseite eines Tages wieder deckend haben will, ändert `.lp-sec` — und die
   vier Rechtsseiten behalten hier ihre Zusage, ohne dass jemand daran denken
   muss. Doppelte Spezifität (.lp-sec.lp-page) schlägt dabei jede Klassenregel. */
.lp-sec.lp-page {
    background: var(--mc-glass-fill, rgba(15,17,20,.86));
    -webkit-backdrop-filter: var(--mc-glass-blur, blur(24px) saturate(160%));
    backdrop-filter: var(--mc-glass-blur, blur(24px) saturate(160%));
    border-color: var(--mc-glass-edge, rgba(255,255,255,.12));
    box-shadow: var(--mc-glass-shadow, 0 20px 60px rgba(0,0,0,.45)),
                inset 0 1px 0 var(--mc-glass-rim, rgba(255,255,255,.08));
}

/* ══ Vertrauensband ═══════════════════════════════════════════════════════ */
#lp-trust, .lp-sec-slim {
    padding: 1.05rem clamp(1.2rem, 3vw, 2.4rem);
    border-radius: 999px;
}
.lp-trust-row { display: flex; flex-wrap: wrap; gap: .6rem 1.9rem; justify-content: center; }
.lp-trust-item {
    font-family: var(--font-mono, monospace); font-size: .7rem; letter-spacing: .07em;
    color: var(--lp-ink-2); display: inline-flex; align-items: center; gap: .5rem;
}
.lp-trust-item svg { width: 14px; height: 14px; color: var(--lp-acc); flex: 0 0 auto; }

/* ══ So funktioniert's ════════════════════════════════════════════════════ */
.lp-steps-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: var(--lp-edge);
    border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-sm); overflow: hidden;
}
.lp-step { padding: 1.6rem 1.4rem; position: relative; border-radius: 0 !important; border: 0 !important; }
.lp-step-n {
    font-family: var(--font-mono, monospace); font-size: .7rem; letter-spacing: .14em;
    color: var(--lp-acc); display: block; margin-bottom: 1rem; font-weight: 500;
}
.lp-step-ic { display: none; }             /* Die Ziffer trägt die Reihenfolge, das Symbol war Dopplung */
.lp-step h3 { margin: 0 0 .45rem; font-size: 1.1rem; color: var(--lp-ink); font-weight: 700; letter-spacing: -.02em; }
.lp-step p  { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--lp-ink-2); }
.lp-steps-cta { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.6rem; flex-wrap: wrap; }
.lp-demo-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
    padding: 12px 22px; border-radius: 999px;
    background: var(--lp-acc); border: 1px solid var(--lp-acc); color: #03212A;
    transition: background .15s;
}
.lp-demo-btn:hover { background: #5BE4F7; }
.lp-demo-btn svg { width: 16px; height: 16px; }

/* ══ Funktionen ═══════════════════════════════════════════════════════════
   Vier große Karten mit Foto, elf kompakt darunter. ALLE behalten .lp-feat
   und data-illu — daran hängen das Funktions-Panel (Klick-Flug + Szene) und
   die Hover-Illustrationen. Wer hier umbaut, muss beides mitprüfen.        */
#lp-features { position: relative; }
.lp-feat-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: var(--lp-radius); }
.lp-fbg {
    position: absolute; left: 50%; top: 55%; width: min(640px, 86%);
    opacity: 0; transform: translate(-50%, -50%) scale(.92);
    transition: opacity .5s ease, transform .5s ease;
}
.lp-fbg.on { opacity: .2; transform: translate(-50%, -50%) scale(1); }
@media (hover: none), (pointer: coarse) { .lp-feat-bg { display: none; } }
#lp-features > * { position: relative; z-index: 1; }

.lp-feat-big { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-bottom: 1.1rem; }
.lp-feat-lg { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.lp-feat-lg .lp-feat-img { aspect-ratio: 16/9; background: var(--lp-card-2) center/cover no-repeat; display: block; }
.lp-feat-lg .lp-feat-tx { padding: 1.3rem 1.4rem 1.5rem; }
.lp-feat-lg h3 { font-size: 1.2rem; letter-spacing: -.022em; }
.lp-feat-lg .lp-feat-ic { display: none; }

/* r77 (Punkt 4) · Warum der Behälter jetzt die KARTENfarbe trägt statt der Linienfarbe
   ────────────────────────────────────────────────────────────────────────────────────
   Die 1-px-Fugen sind Hintergrundfarbe des Behälters, der durch das `gap` scheint.
   Solange jede Rasterzelle belegt ist, sieht man davon nur die Linien. Die Spaltenzahl
   richtet sich aber nach der Fensterbreite (auto-fill), die Kartenzahl ist fest —
   die letzte Reihe geht deshalb fast nie auf. JEDE unbelegte Zelle zeigte die volle
   Fläche der hellen Linienfarbe: bei fünf Spalten und 11 Karten + einer Füllzelle
   blieben genau drei helle Kacheln übrig, sichtbar unter „Ganz nach Geschmack".

   Jetzt trägt der Behälter `--lp-card`, und die Linien kommen von den Karten selbst:
   `outline` liegt 1 px AUSSERHALB der Karte und füllt damit genau die Fuge — zwei
   Nachbarn malen in dieselbe. Bewusst `outline` und NICHT `box-shadow`: der Hover
   weiter unten setzt `box-shadow` neu, die Linien wären beim Überfahren verschwunden.
   `outline` verändert außerdem kein Maß, es rückt also nichts.

   Der leere Rest der letzten Reihe hat keine Karte und darum keine Linie — er ist
   einfach dunkle Fläche, wie vom Nutzer gewünscht.

   Nur `.lp-feat-grid > .lp-feat`: die vier großen Karten (.lp-feat-lg) stehen frei auf
   der Platte, tragen `.lp-feat` aber ebenfalls — eine Kante rundum wäre dort falsch.
   Die Fokus-Regel weiter unten (`#lp-features .lp-feat:focus-visible`) gewinnt mit
   ihrer ID gegen diese Klassenregel und bleibt sichtbar.                            */
.lp-feat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1px; background: var(--lp-card);
    border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-sm); overflow: hidden;
}
.lp-feat-grid > .lp-feat { outline: 1px solid var(--lp-edge); }
/* Die Füllzelle stammt aus der Zeit der hellen Behälterfläche und ist seit r77 ohne
   Wirkung — sie malt Kartenfarbe auf Kartenfarbe. Bleibt bis zur Freigabe stehen. */
.lp-feat-grid::after { content: ""; background: var(--lp-card); }
.lp-feat { padding: 1.15rem 1.2rem; border-radius: 0 !important; border: 0 !important; }
.lp-feat-ic {
    width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    background: var(--lp-acc-soft); border: 1px solid rgba(34,211,238,.28);
    color: var(--lp-acc); margin-bottom: .7rem;
}
.lp-feat-ic svg { width: 17px; height: 17px; }
.lp-feat h3 { margin: 0 0 .35rem; font-size: .97rem; color: var(--lp-ink); font-weight: 700; letter-spacing: -.015em; }
.lp-feat p  { margin: 0; font-size: .845rem; line-height: 1.55; color: var(--lp-ink-3); }
.lp-feat-lg p { color: var(--lp-ink-2); font-size: .93rem; }
/* Genau EINE Karte ist ein <a> statt eines <div>: „Als App installieren"
   (data-illu="pwa", springt zum Download). Ein <a> ist von Haus aus inline,
   deshalb braucht es hier ein display — aber `flex` ALLEIN heißt `row`, und
   damit standen Symbol, Überschrift und Text NEBENEINANDER statt untereinander
   (R71). Die vier großen Karten tragen ihre Richtung selbst (.lp-feat-lg),
   für sie ändert sich nichts. */
.lp-feat-link { cursor: pointer; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.lp-feat-link:focus-visible,
#lp-features .lp-feat:focus-visible { outline: 2px solid var(--lp-acc); outline-offset: -2px; }
#lp-features .lp-feat { position: relative; cursor: pointer; }
/* „▶ Ansehen" — wörtlich die bisherige Fassung, nur hierher gezogen: sie stand
   im Panel-Block in index.php und damit an zweiter Stelle für dieselbe Klasse.
   Absolut oben rechts, damit sie in der kompakten UND in der großen Karte sitzt. */
.lp-feat-hint {
    position: absolute; top: 1.1rem; right: 1.1rem;
    display: none; align-items: center; gap: .3rem;
    font-family: var(--font-mono, monospace); font-size: .62rem; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--lp-acc);
    opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.lp-feat-hint svg { width: 9px; height: 9px; }
@media (hover: hover) and (pointer: fine) {
    .lp-feat-hint { display: inline-flex; }
    .lp-feat:hover .lp-feat-hint { opacity: .9; }
    .lp-feat:hover { background: var(--lp-card-2); }
}

/* ══ Demo ═════════════════════════════════════════════════════════════════ */
.lp-demo { display: flex; gap: 1.6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0 !important; }
.lp-demo h3 { margin: 0 0 .5rem; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.03em; color: var(--lp-ink); }
.lp-demo p  { margin: 0; color: var(--lp-ink-2); max-width: 46ch; }

/* ══ Plan-Matrix ══════════════════════════════════════════════════════════ */
.lp-matrix-wrap { overflow-x: auto; }
.lp-matrix { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .9rem; }
.lp-matrix th, .lp-matrix td { padding: .75rem .85rem; text-align: center; border-bottom: 1px solid var(--lp-edge); }
.lp-matrix th:first-child, .lp-matrix td:first-child { text-align: left; color: var(--lp-ink-2); }
.lp-matrix thead th {
    font-family: var(--font-mono, monospace); font-size: .68rem; letter-spacing: .14em;
    color: var(--lp-ink-3); font-weight: 500; padding-bottom: .9rem;
}
.lp-matrix thead th.hl { color: var(--lp-acc); }
.lp-matrix td { color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.lp-matrix tbody tr:last-child td { border-bottom: 0; }
.lp-yes { color: var(--lp-acc); font-weight: 700; }
.lp-no  { color: var(--lp-ink-3); }

/* ══ Preise ═══════════════════════════════════════════════════════════════ */
.lp-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); gap: .9rem; }
.lp-price { padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .25rem; }
.lp-plan-name { font-weight: 700; font-size: 1.04rem; letter-spacing: -.02em; color: var(--lp-ink); }
/* r83 · „Beliebt" auf der hervorgehobenen Preiskarte (Katalog-Merkmal `featured`).
   Sitzt in der Kartenecke statt in der Textspalte — so bleiben alle vier Karten
   gleich hoch und der Plan-Name behält seine volle Zeile.
   `.lp-price` trägt bereits `position: relative` (Hover-Schimmer, weiter unten). */
/* Die Pille liegt ÜBER der Namenszeile (die als Block die volle Kartenbreite
   einnimmt). Bei „ShareMo L" bleibt reichlich Luft — bei einem längeren Plan-
   Namen liefe der Text darunter hindurch. Deshalb hält `.lp-price-pop` den
   Namen von der Ecke fern; die Klasse trägt genau die Karte mit der Pille. */
.lp-price-pop .lp-plan-name { padding-right: 4.6rem; }
.lp-pop {
    position: absolute; top: .85rem; right: .9rem;
    font-family: var(--font-mono, monospace); font-size: .6rem;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--lp-acc); background: var(--lp-acc-soft);
    border-radius: 999px; padding: .22rem .5rem;
}
.lp-plan-tag  { font-size: .76rem; color: var(--lp-ink-3); min-height: 1.2em; }
.lp-amount    { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; margin-top: .7rem; color: var(--lp-ink); }
.lp-period    { font-size: .74rem; color: var(--lp-ink-3); }
.lp-plan-store{ font-family: var(--font-mono, monospace); font-size: .72rem; color: var(--lp-ink-2); margin: .6rem 0 1.1rem; }
.lp-price-cta { margin-top: auto; }
.lp-price-cta button {
    width: 100%; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
    padding: 10px 14px; border-radius: 999px;
    border: 1px solid var(--lp-edge-2); background: transparent; color: var(--lp-ink);
    transition: background .15s;
}
.lp-price-cta button:hover { background: var(--lp-card-2); }

/* ══ FAQ ══════════════════════════════════════════════════════════════════ */
.lp-faq {
    display: grid; gap: 1px; background: var(--lp-edge);
    border: 1px solid var(--lp-edge); border-radius: var(--lp-radius-sm); overflow: hidden;
}
.lp-faq-item { background: var(--lp-card); }
.lp-faq-q {
    width: 100%; text-align: left; font: inherit; font-size: .94rem; font-weight: 600;
    color: var(--lp-ink); background: none; border: 0; cursor: pointer;
    padding: 1rem 1.2rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.lp-faq-q::after { content: "+"; color: var(--lp-acc); font-family: var(--font-mono, monospace); flex: 0 0 auto; }
.lp-faq-item.open .lp-faq-q::after { content: "−"; }
.lp-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
/* Das Skript erzeugt `lp-faq-a-inner`, NICHT `lp-faq-a-in`. */
.lp-faq-a-inner { padding: 0 1.2rem 1.1rem; color: var(--lp-ink-2); font-size: .9rem; max-width: 74ch; }
/* r85 · Das Bild in der Antwort. Diese Regel fehlte, seit es FAQ-Bilder gibt:
   `admin/faq_image.php` verkleinert nichts (bis 5 MB), das Bild kam also in
   seiner natürlichen Breite an — gemessen 1600 px in einer 375 px breiten
   Karte. Seitlich gescrollt hat die Seite nur deshalb nicht, weil `.lp-faq`
   ein `overflow:hidden` trägt: das Bild wurde still ABGESCHNITTEN. Wortgleich
   zum Dashboard-FAQ (`.faq-a-img`), damit dasselbe Bild in beiden Ansichten
   gleich aussieht. */
.lp-faq-a-img {
    display: block; max-width: 100%; height: auto; margin-top: .7rem;
    border-radius: var(--lp-radius-sm); border: 1px solid var(--lp-edge); cursor: zoom-in;
}
.lp-faq-veil { display: none; }             /* Der Schleier stammt aus dem Glas-Look und ist ohne ihn sinnlos */

/* ══ Desktop-App ══════════════════════════════════════════════════════════ */
.lp-dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
.lp-dl { padding: 1.5rem 1.3rem; text-align: center; }
.lp-dl-ic { width: 44px; height: 44px; margin: 0 auto .8rem; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--lp-acc-soft); border: 1px solid rgba(34,211,238,.28); color: var(--lp-acc); }
.lp-dl-ic svg { width: 22px; height: 22px; }
.lp-dl-name { font-size: 1.04rem; font-weight: 700; letter-spacing: -.02em; color: var(--lp-ink); }
.lp-dl-meta { font-family: var(--font-mono, monospace); font-size: .7rem; color: var(--lp-ink-3); margin-bottom: 1rem; }
.lp-dl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer;
    padding: 10px 18px; border-radius: 999px;
    background: var(--lp-acc); border: 1px solid var(--lp-acc); color: #03212A;
    transition: background .15s;
}
.lp-dl-btn:hover { background: #5BE4F7; }
.lp-dl-btn svg { width: 15px; height: 15px; }
.lp-dl-soon {
    background: none; color: var(--lp-ink-3); border: 1px dashed var(--lp-edge-2);
    cursor: default; pointer-events: none;
}

/* ══ Scroll-Hinweis ═══════════════════════════════════
   Hier NUR das Ein- und Ausblenden. Aussehen und Media Queries (Maus mit
   Rad am Rechner, Wisch-Geste am Handy) stehen weiter im R12-Block in
   index.php — dort funktionieren sie, und zwei Quellen fuer dieselbe Klasse
   waeren genau der Fehler, den diese Datei vermeiden soll.               */
.lp-scrolldown { opacity: 0; transition: opacity .9s ease; }
.lp-scrolldown.in { opacity: .6; }

/* ══ Einblenden beim Scrollen ═════════════════════════════════════════════ */
/* Wörtlich das Verhalten von vorher: der IntersectionObserver setzt .in.
   Eine erste Fassung hing das an eine Klasse `body.lp-reveal-on`, die es
   nirgends gibt — damit war die Einblendung still tot. */
.lp-reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.lp-reveal.in { opacity: 1; transform: none; }

/* ══ Fußbereich ═══════════════════════════════════════════════════════════ */
.lp-land + .site-footer--glass,
body.lp-landing .site-footer--glass { transition: opacity 1.6s ease; }

/* ══ Knopf „Nach oben“ ══════════════════════════════
   Aus index.php hierher gezogen (dort war er Milchglas und passte nicht mehr
   zu den deckenden Platten). ACHTUNG: Das Skript schaltet die Klasse
   `visible`, NICHT `show` — eine erste Fassung hier hatte `show` und waere
   wirkungslos geblieben.                                                 */
.back-to-top {
    position: fixed; right: 1.5rem; bottom: calc(44px + 20px); z-index: 1050;
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--lp-card, #15181C); border: 1px solid var(--lp-edge-2, #333A44);
    color: var(--lp-ink-2, #98A1AB);
    opacity: 0; pointer-events: none; transform: translateY(12px);
    transition: opacity .35s, transform .35s, background .2s, color .2s;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.8);
}
.back-to-top.visible { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { background: var(--lp-card-2, #1C2026); color: var(--lp-ink, #F0F2F5); }
.back-to-top svg { width: 20px; height: 20px; }

/* ══ Responsive ═══════════════════════════════════════════════════════════
   Die Kopf-Navigation braucht gemessen rund 1130 px neben Logo, Beta, Sprache
   und den beiden Knöpfen. Darunter übernimmt der Hamburger mit denselben
   sieben Punkten.                                                          */
@media (max-width: 1179px) {
    .lp-header-nav { display: none; }
}
@media (max-width: 980px) {
    .lp-hero-grid { grid-template-columns: 1fr; }
    .lp-feat-big { grid-template-columns: 1fr; }
    .lp-steps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .lp-header-inner { flex-wrap: wrap; border-radius: 18px; padding: 9px 11px; }
    /* Der Mobil-Hamburger ist absolut positioniert und stand mit `top:50%` in der
       senkrechten Mitte — bei der jetzt zweizeiligen Leiste lag er damit auf dem
       Knopf „Registrieren". Er gehört in die ERSTE Zeile; das Logo bekommt den
       Platz dafür reserviert. */
    .lp-hamburger-mobile { top: 9px; right: 9px; transform: none; }
    /* Der Knopf ist 38 px hoch, die Logozeile war nur 21 px — die zweite Zeile
       rutschte dadurch 8 px unter ihn (nachgemessen). min-height macht die
       erste Zeile so hoch wie der Knopf. */
    .lp-header-logo { padding-right: 48px; min-height: 38px; }
    .lp-header-center { margin-left: 0; width: 100%; justify-content: space-between; gap: .35rem; }
    .lp-header-center .lp-header-btn { flex: 1 1 auto; text-align: center; }
    .lp-header-logo { max-width: none; flex: 1 1 auto; }
    .lp-sec { padding: 1.4rem 1.15rem; border-radius: 18px; }
    #lp-trust { border-radius: 18px; }
    .lp-trust-row { gap: .5rem 1.1rem; }
    .lp-demo { gap: 1.1rem; }
}
@media (max-width: 380px) {
    .lp-beta-ver { display: none; }
}

/* ══ Bewegung reduzieren ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .lp-intro, .lp-intro-inner, .lp-intro-ring, .lp-reveal, .lp-fbg,
    .lp-sd-wheel, .lp-sd-dot, .back-to-top {
        transition: none !important; animation: none !important;
    }
}

/* ══ Karten-Hover „Glas-Hauch" (R71, Stufe B) ═══════════════════════════════
   Die R70-Regel bleibt unangetastet: die Karten sind DECKEND. Der Glas-Ein-
   druck entsteht nicht aus Durchsicht, sondern aus den drei Dingen, an denen
   das Auge echtes Glas erkennt:
       1. ein Lichtschimmer von schräg oben     (linear-gradient)
       2. eine helle Oberkante = die Glaskante   (inset box-shadow)
       3. ein Hauch Cyan in der oberen Ecke      (radial-gradient) — liest sich
          wie eine Spiegelung des Swirls, der in den Fugen daneben läuft.

   WARUM KEINE ECHTE DURCHSICHT?
   r78: Die Platte darunter ist inzwischen selbst Glas (86 %), die Fugenfarbe
   des Rasters (--lp-edge) ist es nicht. Am Rezept ändert das nichts, im
   Gegenteil — die KARTEN müssen deckend bleiben. Sie sind jetzt die einzige
   verbliebene Sicherung dafür, dass Text nirgends bei voller Swirl-Helligkeit
   landet (1,0–2,9:1, siehe Kopf dieser Datei); über zwei Glasschichten wären es
   auf der Karte nur noch rund 74 % Deckung. Wer hier auf halb durchsichtig
   umstellt, hebt genau das auf.

   ZWEI KARTENSORTEN, ZWEI REZEPTE
   A) freistehend auf der Platte — .lp-feat-lg · .lp-price · .lp-dl
      dürfen sich anheben und einen Schatten werfen.
   B) Zelle im 1-px-Raster — .lp-feat · .lp-step · .lp-faq-item
      dürfen das NICHT: die Fugen sind 1 px Hintergrundfarbe des Behälters
      (.lp-feat-grid / .lp-steps-grid / .lp-faq); ein Anheben oder ein
      Außenschatten zerreißt sie sichtbar.

   Die Stärke hängt an --lp-hv-sheen / -tint / -rim / -lift ganz oben.
   NUR MIT MAUS: auf Tastfeldern bliebe der Zustand nach dem Antippen kleben —
   deshalb dieselbe Abfrage wie oben schon bei `.lp-feat:hover`.            */

/* Der Schimmer liegt auf einer eigenen Ebene (::after), weil `background-
   image` nicht von `none` weg überblenden kann — er würde springen statt
   aufzuziehen. `border-radius: inherit` übernimmt dabei den Radius der Karte
   selbst: 0 in der Rasterzelle, --lp-radius-sm bei der freistehenden. */
.lp-feat, .lp-step, .lp-faq-item, .lp-price, .lp-dl {
    position: relative;
    transition: background-color .28s ease, border-color .28s ease,
                box-shadow .28s ease, transform .28s cubic-bezier(.2,.7,.3,1);
}
.lp-feat::after, .lp-step::after, .lp-faq-item::after,
.lp-price::after, .lp-dl::after {
    content: ""; position: absolute; inset: 0;
    border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .28s ease;
    background:
        linear-gradient(155deg,
            rgba(255,255,255, var(--lp-hv-sheen)) 0%,
            rgba(255,255,255, calc(var(--lp-hv-sheen) * .3)) 30%,
            rgba(255,255,255, 0) 62%),
        radial-gradient(115% 85% at 8% -12%,
            rgba(34,211,238, var(--lp-hv-tint)) 0%,
            rgba(34,211,238, 0) 62%);
}

@media (hover: hover) and (pointer: fine) {

    .lp-feat:hover::after, .lp-step:hover::after, .lp-faq-item:hover::after,
    .lp-price:hover::after, .lp-dl:hover::after { opacity: 1; }

    /* B) Rasterzelle: Kante ja, Bewegung nein.
       `:not(.lp-feat-lg)` hält die vier großen Karten heraus — sie stehen frei
       und bekommen darunter das andere Rezept. BEIDE Regeln tragen
       #lp-features, sonst gewänne die ID-Regel gegen die Klassenregel und die
       großen Karten bekämen das falsche Rezept. */
    #lp-features .lp-feat:not(.lp-feat-lg):hover,
    .lp-step:hover, .lp-faq-item:hover {
        background-color: var(--lp-card-2);
        box-shadow: inset 0 1px 0 rgba(255,255,255, var(--lp-hv-rim));
    }

    /* A) freistehende Karte: dazu Kante rundum, Anheben und Schatten */
    #lp-features .lp-feat-lg:hover,
    .lp-price:hover, .lp-dl:hover {
        background-color: var(--lp-card-2);
        border-color: var(--lp-edge-2);
        transform: translateY(calc(var(--lp-hv-lift) * -1));
        box-shadow: inset 0  1px 0 rgba(255,255,255, var(--lp-hv-rim)),
                    inset 0  0   0 1px rgba(255,255,255, calc(var(--lp-hv-rim) * .3)),
                    0 18px 40px -26px rgba(0,0,0,.95);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-feat, .lp-step, .lp-faq-item, .lp-price, .lp-dl,
    .lp-feat::after, .lp-step::after, .lp-faq-item::after,
    .lp-price::after, .lp-dl::after { transition: none !important; }
    #lp-features .lp-feat-lg:hover, .lp-price:hover, .lp-dl:hover { transform: none !important; }
}