/* ════════════════════════════════════════════════════════════════════════════
   landing.css — Landingpage „Idee → Geschichte, direkt ausprobieren" (index.php)
   Portiert aus dem Claude-Design-Artefakt „Proposal 4". Nur auf index.php geladen;
   alle Regeln unter body.lp mit Präfix lp-. Tokens aus main.css (--color-*, --glow-*, …).
   Spec: openspec/specs/homepage/landing-page
   ════════════════════════════════════════════════════════════════════════════ */

html:has(body.lp) { scroll-behavior: smooth; }
body.lp { margin: 0; line-height: 1.55; }
html[lang="ar"] body.lp { font-family: 'Noto Sans Arabic', var(--font-ui); }
body.lp *, body.lp *::before, body.lp *::after { box-sizing: border-box; }
body.lp a:hover { color: #fff; }
body.lp :focus-visible { outline: 3px solid var(--color-strong); outline-offset: 3px; border-radius: 6px; }

body.lp .lp-wrap { max-width: 1184px; margin: 0 auto; padding: 0 24px; }
body.lp #try, body.lp #features { scroll-margin-top: 72px; } /* nicht unter dem Sticky-Header landen */
body.lp h1, body.lp h2, body.lp h3 { margin: 0; color: #fff; letter-spacing: -.02em; text-wrap: balance; font-family: var(--font-ui); }
html[lang="ar"] body.lp h1, html[lang="ar"] body.lp h2, html[lang="ar"] body.lp h3 { letter-spacing: 0; font-family: inherit; }
body.lp h1 { font-size: clamp(34px, 5.4vw, 60px); font-weight: 900; line-height: 1.05; }
body.lp h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; line-height: 1.1; }
body.lp h3 { font-size: 18px; font-weight: 800; line-height: 1.3; }
body.lp p { text-wrap: pretty; }
body.lp em.lp-m { font-family: var(--font-story); font-style: italic; font-weight: 500; color: var(--color-em); }
html[lang="ar"] body.lp em.lp-m { font-family: inherit; font-style: normal; font-weight: 800; }
body.lp .lp-lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--color-text-muted); max-width: 620px; }

/* ── Buttons ─────────────────────────────────── */
body.lp .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; min-height: 44px; border-radius: 12px; font-weight: 800; font-size: 15px; font-family: inherit; border: 2px solid transparent; cursor: pointer; transition: all 220ms ease; white-space: nowrap; line-height: 1; text-decoration: none; }
body.lp .lp-btn-magic { background: linear-gradient(135deg, var(--color-magic), var(--color-primary)); color: #fff; box-shadow: var(--glow-magic); }
body.lp .lp-btn-magic:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 10px 30px rgba(139,92,246,.55); }
body.lp .lp-btn-accent { background: var(--color-accent); color: #1a1033; }
body.lp .lp-btn-accent:hover { background: #fbbf24; color: #1a1033; box-shadow: var(--glow-accent); }
body.lp .lp-btn-outline { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.22); color: #fff; }
body.lp .lp-btn-outline:hover { border-color: rgba(255,255,255,.5); color: #fff; }
body.lp .lp-btn-lg { padding: 16px 28px; font-size: 16px; border-radius: 14px; }
body.lp .lp-btn-sm { padding: 9px 14px; font-size: 13px; border-radius: 10px; min-height: 40px; }
body.lp .lp-btn[disabled] { opacity: .75; cursor: progress; transform: none; }

/* ── Header ──────────────────────────────────── */
body.lp .lp-nav { position: sticky; top: 0; z-index: 50; background: rgba(13,11,40,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--color-border); }
body.lp .lp-nav .lp-wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
body.lp .lp-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 900; font-size: 17px; white-space: nowrap; }
body.lp .lp-brand img { width: 34px; height: 34px; border-radius: 9px; }
body.lp .lp-nav-links { display: flex; gap: 22px; font-size: 14px; font-weight: 600; }
body.lp .lp-nav-links a { color: var(--color-text-muted); }
body.lp .lp-nav-links a:hover { color: #fff; }
body.lp .lp-nav-right { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
body.lp .lp-lang { position: relative; }
body.lp .lp-lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--color-border); color: #fff; font-size: 13px; font-weight: 800; }
body.lp .lp-lang summary::-webkit-details-marker { display: none; }
body.lp .lp-lang summary i { font-size: .7em; }
body.lp .lp-lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; min-width: 90px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 5; }
body.lp .lp-lang a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--color-text); font-weight: 700; font-size: 14px; }
body.lp .lp-lang a:hover, body.lp .lp-lang a[aria-current="true"] { background: rgba(139,92,246,.2); color: #fff; }
body.lp .lp-login-m, body.lp .lp-burger { display: none; }
body.lp .lp-burger { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--color-border); background: transparent; color: #fff; font-size: 16px; cursor: pointer; }
body.lp .lp-menu { display: none; }

/* ── Cards / chips / trust ───────────────────── */
body.lp .lp-card { background: rgba(28,25,80,.6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
body.lp .lp-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(99,102,241,.14); border: 1px solid rgba(99,102,241,.32); color: #c7d2fe; font-size: 13px; font-weight: 700; }
body.lp .lp-chip-violet { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.35); color: #ddd6fe; }
body.lp .lp-story-text { font-family: var(--font-story); font-size: 18px; line-height: 1.75; color: #ece9ff; }
html[lang="ar"] body.lp .lp-story-text { font-family: inherit; }
body.lp .lp-dropcap::first-letter { font-family: var(--font-dropcap); float: inline-start; font-size: 3.4em; line-height: .9; margin-block: 6px 0; margin-inline: 0 10px; color: var(--color-strong); }
html[lang="ar"] body.lp .lp-dropcap::first-letter { font-family: inherit; float: none; font-size: inherit; margin: 0; color: inherit; }
body.lp .lp-trust { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--color-text-muted); }
body.lp .lp-trust i { color: #6ee7b7; margin-inline-end: 6px; }
body.lp .lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3); color: #fcd34d; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
html[lang="ar"] body.lp .lp-eyebrow { letter-spacing: 0; }

/* ── Hero ────────────────────────────────────── */
body.lp .lp-hero { padding: 64px 0 72px; }
body.lp .lp-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: stretch; }
body.lp .lp-intro-l { display: flex; flex-direction: column; justify-content: center; }
body.lp .lp-intro h1 { margin: 0 0 18px; }
body.lp .lp-intro .lp-lede { margin: auto 0 0; }
body.lp .lp-intro-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; margin-bottom: -14px; padding-top: 24px; }
body.lp .lp-try-m, body.lp .lp-trust-m, body.lp .lp-gen-h-m { display: none; }
body.lp .lp-trust-d { margin-top: 16px; }

/* Beispielgeschichte mit Sprechblase */
body.lp .lp-story { overflow: hidden; }
body.lp .lp-story-cover { position: relative; min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end; }
body.lp .lp-story-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
body.lp .lp-story-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,11,40,0) 55%, rgba(13,11,40,.8) 74%, rgba(13,11,40,.96) 100%); }
/* Die Sprechblase gehört zum Bild (Hase links, Mond rechts) — bleibt auch in RTL physisch links. */
body.lp .lp-idea-bubble { position: absolute; z-index: 3; top: 14px; left: 14px; max-width: 210px; padding: 8px 12px; border-radius: 16px; background: #fffaf0; color: #2a1f4d; font-family: var(--font-story); font-style: italic; font-size: 13.5px; line-height: 1.35; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
html[lang="ar"] body.lp .lp-idea-bubble { font-family: inherit; font-style: normal; }
body.lp .lp-idea-bubble b { font-family: var(--font-ui); font-style: normal; font-weight: 800; font-size: 11px; color: #b45309; margin-inline-end: 4px; }
body.lp .lp-idea-tail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
body.lp .lp-idea-tail polygon { fill: #fffaf0; }
body.lp .lp-story-t { position: relative; z-index: 1; padding: 0 20px 16px; }
body.lp .lp-story-t .lp-chip { margin-bottom: 8px; }
body.lp .lp-story-t h3 { font-size: 22px; margin-bottom: 8px; }
body.lp .lp-story-t .lp-story-text { margin: 0; font-size: 16px; line-height: 1.6; text-shadow: 0 1px 8px rgba(0,0,0,.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.lp .lp-story mark { background: rgba(245,158,11,.2); color: inherit; padding: 0 3px; border-radius: 4px; }

/* ── Ausprobieren ────────────────────────────── */
body.lp .lp-gen { margin: 56px 0 0; padding: 28px; box-shadow: var(--shadow-lg); scroll-margin-top: 80px; }
body.lp #lp-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
body.lp .lp-gen.previewing #lp-setup { display: none; }
body.lp #lp-preview { display: none; }
body.lp .lp-gen.previewing #lp-preview { display: block; }
body.lp .lp-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
body.lp .lp-field-last { margin-bottom: 22px; }
body.lp .lp-field label, body.lp .lp-field-label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
html[lang="ar"] body.lp .lp-field label, html[lang="ar"] body.lp .lp-field-label { letter-spacing: 0; }
body.lp .lp-field input, body.lp .lp-field textarea { font-family: inherit; font-size: 16px; color: #fff; background: rgba(13,11,40,.6); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 13px 14px; outline: none; transition: border-color 200ms; }
body.lp .lp-field textarea { min-height: 92px; resize: vertical; font-family: var(--font-story); font-size: 18px; font-style: italic; }
html[lang="ar"] body.lp .lp-field textarea { font-family: inherit; font-style: normal; font-size: 16px; }
body.lp .lp-field input:focus, body.lp .lp-field textarea:focus { border-color: var(--color-magic); box-shadow: 0 0 0 3px rgba(139,92,246,.25); }
body.lp .lp-seg { display: flex; gap: 8px; flex-wrap: wrap; }
body.lp .lp-seg button, body.lp .lp-sugg button { font-family: inherit; cursor: pointer; transition: all 200ms; }
body.lp .lp-seg button { flex: 1; min-height: 44px; padding: 11px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(13,11,40,.5); color: var(--color-text); font-weight: 700; font-size: 14px; }
body.lp .lp-seg button.on { background: rgba(139,92,246,.22); border-color: rgba(139,92,246,.6); color: #fff; }
body.lp .lp-sugg { display: flex; flex-wrap: wrap; gap: 8px; }
body.lp .lp-sugg button { min-height: 36px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--color-text-muted); font-size: 13px; font-weight: 600; }
body.lp .lp-sugg button:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); }
/* Honeypot: visuell versteckt ohne Versatz (ein negativer left-Wert erzeugt in RTL horizontales Scrollen). */
body.lp .lp-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body.lp .lp-gen-error { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #fecaca; font-size: 14px; font-weight: 600; }
body.lp .lp-gen-submit { width: 100%; }
/* KI-Hinweis vor dem Erzeugen (openspec app/ai-transparency, auf die Demo übertragen) */
body.lp .lp-ai-notice { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--color-text-muted); }
body.lp .lp-ai-notice i { color: var(--color-em); margin-top: 2px; flex: none; }
body.lp .lp-pv-meta { display: flex; flex-wrap: wrap; gap: 8px; }
body.lp .lp-chip-ai { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.32); color: #fcd34d; }
body.lp .lp-gen-submit .fa-spin { animation-duration: 1.4s; }

body.lp .lp-more { border-radius: var(--radius-lg); background: rgba(13,11,40,.55); border: 1px solid rgba(255,255,255,.1); padding: 22px; }
body.lp .lp-more h3 { font-size: 16px; margin: 0 0 4px; }
body.lp .lp-more > p { margin: 0 0 16px; font-size: 13px; color: var(--color-text-muted); }
body.lp .lp-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
body.lp .lp-more li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); }
body.lp .lp-more li:first-child { border-top: 0; }
body.lp .lp-more li i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(139,92,246,.16); color: var(--color-em); font-size: 14px; }
body.lp .lp-more li b { display: block; font-size: 14px; color: #fff; font-weight: 800; }
body.lp .lp-more li span { display: block; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.4; }

/* Vorschau */
body.lp .lp-pv-cover { position: relative; float: inline-start; width: min(300px, 42%); aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; margin-block: 4px 12px; margin-inline: 0 24px; box-shadow: var(--shadow-md); background: rgba(13,11,40,.6); }
body.lp .lp-pv-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms ease; }
body.lp .lp-pv-cover.has-image img { opacity: 1; }
/* Platzhalter: gemalter Nachthimmel mit Sternen und Mond — während das KI-Cover entsteht
   und als Rückfall, wenn kein Cover erzeugt werden konnte. */
body.lp .lp-pv-sky { position: absolute; inset: 0; display: grid; place-items: center;
  background:
    radial-gradient(circle at 18% 22%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 72% 16%, #fde68a 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 84% 58%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 30% 70%, #c4b5fd 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 55% 40%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 12% 85%, #fde68a 0 1px, transparent 2px),
    radial-gradient(ellipse at 50% 120%, rgba(245,158,11,.35), transparent 60%),
    linear-gradient(160deg, #2e1f6b 0%, #1c1950 45%, #0d0b28 100%); }
body.lp .lp-pv-sky i { font-size: 64px; color: #fde68a; filter: drop-shadow(0 0 18px rgba(253,230,138,.55)); transform: rotate(-18deg); }
body.lp .lp-pv-painting { display: none; }
body.lp .lp-pv-cover.is-painting .lp-pv-sky i { animation: lp-moon 2.4s ease-in-out infinite; }
body.lp .lp-pv-cover.is-painting .lp-pv-painting { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; text-align: center; color: #fff; font-weight: 800; font-size: 13.5px; background: linear-gradient(110deg, rgba(139,92,246,.25) 30%, rgba(139,92,246,.55) 50%, rgba(139,92,246,.25) 70%); background-size: 250% 100%; animation: lp-shimmer 1.6s linear infinite; }
body.lp .lp-pv-painting i { font-size: 16px; color: var(--color-strong); }
@keyframes lp-moon { 0%, 100% { transform: rotate(-18deg) scale(1); } 50% { transform: rotate(-8deg) scale(1.08); } }
@keyframes lp-shimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }
body.lp .lp-pv-title { font-size: 26px; margin: 0 0 6px; }
body.lp .lp-pv-meta { margin: 0 0 14px; }
body.lp .lp-pv-text { margin: 0; font-size: 18px; }
body.lp .lp-pv-text .lp-cut { color: var(--color-em); font-family: var(--font-ui); font-style: normal; font-weight: 800; font-size: 16px; }
body.lp .lp-pv-text .lp-cut:hover { color: #fff; text-decoration: underline; }
body.lp .lp-pv-actions { clear: both; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; padding-top: 24px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
/* Alle drei Knöpfe gleich groß: gleiche Spaltenbreite und Höhe */
body.lp .lp-pv-actions .lp-btn { min-height: 54px; padding: 13px 12px; font-size: 15px; line-height: 1.2; text-align: center; white-space: normal; }
body.lp .lp-pv-actions .lp-pv-read-wrap .lp-btn { width: 100%; }
body.lp .lp-pv-actions .lp-go { box-shadow: 0 0 0 3px rgba(245,158,11,.25), var(--glow-accent); }
body.lp .lp-pv-actions .lp-go:hover { box-shadow: 0 0 0 4px rgba(245,158,11,.35), var(--glow-accent); }
body.lp .lp-go-m { display: none; }
/* Runder Play-Knopf auf dem Cover: DE/EN rechts, knapp über dem eingebrannten KI-Badge (rechts unten);
   Arabisch (RTL) gespiegelt links unten. Owner-Wunsch 2026-09-30. */
body.lp .lp-pv-play { position: absolute; right: 14px; bottom: 44px; z-index: 3; width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; font-size: 20px; background: linear-gradient(135deg, var(--color-accent), #d97706); box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.18); transition: transform 180ms ease, box-shadow 180ms ease; }
body.lp .lp-pv-play .fa-play { margin-left: 3px; }
body.lp .lp-pv-play:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 0 0 5px rgba(245,158,11,.35); }
body.lp .lp-pv-play.is-playing { background: linear-gradient(135deg, var(--color-magic), var(--color-primary)); }
body.lp .lp-pv-play.is-loading { cursor: progress; background: rgba(13,11,40,.85); box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 4px rgba(245,158,11,.45); }
body.lp .lp-pv-play.is-loading i { color: var(--color-accent); }
body.lp .lp-pv-play[hidden] { display: none; }
html[dir="rtl"] body.lp .lp-pv-play { right: auto; left: 14px; bottom: 14px; }
/* Desktop: breiter Vorlese-Knopf in der Aktionsleiste (Kreis-Knopf nur mobil, s. ≤ 860 px) */
body.lp .lp-pv-read-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
body.lp .lp-pv-read-wrap[hidden], body.lp .lp-pv-read-wrap .lp-btn[hidden] { display: none; }
body.lp .lp-pv-read-wrap .lp-btn.is-loading { cursor: progress; opacity: .85; }
body.lp .lp-pv-play { display: none; }

/* ── Stats / Funktionen / Abschluss ──────────── */
body.lp .lp-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 48px; margin-top: 40px; text-align: center; }
body.lp .lp-stats b { display: block; font-size: 28px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
body.lp .lp-stats span { font-size: 13px; color: var(--color-text-muted); }
body.lp .lp-section { padding: 88px 0; }
body.lp .lp-features { padding-top: 24px; }
body.lp .lp-section-head { max-width: 720px; margin: 0 0 40px; }
body.lp .lp-section-head .lp-eyebrow { margin-bottom: 16px; }
body.lp .lp-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
body.lp .lp-pillar { padding: 0; overflow: hidden; }
body.lp .lp-pillar img { aspect-ratio: 16/10; object-fit: cover; width: 100%; height: auto; }
body.lp .lp-pillar-b { padding: 22px; }
body.lp .lp-tag { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fcd34d; margin-bottom: 8px; }
html[lang="ar"] body.lp .lp-tag { letter-spacing: 0; }
body.lp .lp-pillar p { margin: 8px 0 0; font-size: 15px; color: var(--color-text-muted); }
body.lp .lp-pillar.is-main { border-color: rgba(139,92,246,.5); box-shadow: var(--glow-magic); }
body.lp .lp-final { padding-top: 0; text-align: center; }
body.lp .lp-final p { margin: 12px auto 0; max-width: 520px; color: var(--color-text-muted); }
body.lp .lp-final-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ── Footer: gemeinsamer Partial, Startseite = großer Footer (Stile in main.css); hier nur Platz für die App-Bar ── */
body.lp .mk-footer { padding-bottom: 120px; }

/* ── Mobile App-Bar ──────────────────────────── */
body.lp .lp-appbar { display: none; }

/* ── ≤ 860 px ────────────────────────────────── */
@media (max-width: 860px) {
  body.lp .lp-nav-links, body.lp .lp-hide-m { display: none; }
  body.lp .lp-burger { display: inline-grid; place-items: center; }
  body.lp .lp-login-m { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, var(--color-magic), var(--color-primary)); color: #fff; font-size: 16px; box-shadow: var(--glow-magic); }
  body.lp .lp-login-m:hover { color: #fff; }
  body.lp .lp-nav .lp-wrap { gap: 12px; height: 62px; }
  body.lp .lp-menu.open { display: block; position: fixed; inset: 62px 0 0; background: var(--color-bg); z-index: 49; padding: 20px 24px; overflow-y: auto; }
  body.lp .lp-menu .lp-btn { width: 100%; margin: 0 0 10px; }
  body.lp .lp-menu .lp-btn-outline { margin-bottom: 18px; }
  body.lp .lp-menu-link { display: block; padding: 14px 0; border-bottom: 1px solid var(--color-border); color: #fff; font-weight: 700; font-size: 17px; }
  body.lp .lp-menu-langs { display: flex; gap: 10px; padding-top: 18px; }
  body.lp .lp-menu-langs a { display: inline-grid; place-items: center; min-width: 52px; min-height: 44px; border-radius: 10px; border: 1px solid var(--color-border); color: var(--color-text); font-weight: 800; }
  body.lp .lp-menu-langs a[aria-current="true"] { background: rgba(139,92,246,.22); border-color: rgba(139,92,246,.6); color: #fff; }
  body.lp .lp-section { padding: 60px 0; }

  body.lp .lp-hero { padding: 32px 0 48px; }
  body.lp .lp-intro { grid-template-columns: 1fr; gap: 32px; }
  body.lp .lp-intro-ctas { margin: 24px 0 0; padding-top: 0; }
  body.lp .lp-intro-ctas .lp-btn { flex: 1; }
  body.lp .lp-intro-ctas .lp-try-m { display: inline-flex; flex: 1 1 100%; }
  body.lp .lp-intro-ctas .lp-app-d, body.lp .lp-trust-d { display: none; }
  body.lp .lp-trust-m { display: flex; justify-content: center; margin: 32px 0 -8px; }
  body.lp .lp-gen-h-m { display: block; font-size: 24px; margin: 0 0 16px; }
  body.lp .lp-gen.previewing .lp-gen-h-m { display: none; }
  body.lp .lp-gen { margin-top: 40px; padding: 18px; }
  body.lp #lp-setup { grid-template-columns: 1fr; gap: 18px; }
  body.lp .lp-pv-cover { float: none; width: 100%; aspect-ratio: 1; max-width: 420px; margin: 0 auto 16px; }
  body.lp .lp-pv-title { font-size: 22px; }
  body.lp .lp-pv-actions { display: flex; flex-direction: column; align-items: stretch; }
  body.lp .lp-pv-actions .lp-btn { width: 100%; }
  /* Mobil: runder Knopf auf dem Cover statt des breiten Knopfs */
  body.lp .lp-pv-read-wrap { display: none; }
  body.lp .lp-pv-play { display: grid; }
  body.lp .lp-pv-play[hidden] { display: none; }
  body.lp .lp-pv-actions .lp-btn-outline { margin-inline-end: 0; order: 3; }
  body.lp .lp-go-d { display: none; }
  body.lp .lp-go-m { display: inline; }
  body.lp .lp-pillars { grid-template-columns: 1fr; }
  body.lp .lp-stats { gap: 26px; }
  body.lp .lp-final-row .lp-btn { width: 100%; white-space: normal; }

  body.lp .lp-appbar { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; gap: 10px; padding: 10px; border-radius: 18px; background: rgba(20,17,60,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 12px 40px rgba(0,0,0,.5); transform: translateY(160%); transition: transform 300ms ease; }
  body.lp .lp-appbar.show { transform: none; }
  body.lp .lp-appbar .lp-btn { flex: 1; padding: 14px 12px; min-height: 48px; }
}
@media (max-width: 380px) {
  body.lp .lp-wrap { padding: 0 16px; }
  body.lp .lp-brand { font-size: 15px; }
  body.lp .lp-btn-lg { padding: 15px 18px; }
  body.lp .lp-stats { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.lp) { scroll-behavior: auto; }
  body.lp *, body.lp *::before, body.lp *::after { animation: none !important; transition: none !important; }
}