/* ==========================================================================
   Automagio – landing.css
   Nur für die öffentlichen Landingpages der Agents (/de|en/agents/…) und
   die Übersicht. Bewusst im Marketing-Stil: Verläufe, Glow, Tiefe und je
   Agent eine eigene Akzentfarbe. Die App selbst bleibt beim ruhigen
   Design-System (docs/design-guidelines.md).

   Farben: Wie in tokens.css ausschließlich über light-dark(). Der Block
   „Akzente je Agent“ ist der einzige Ort mit Farbwerten; alles darunter
   nutzt nur Variablen. Jede Akzentfarbe erreicht als Text auf --bg und
   --surface mindestens 4,5:1 – in beiden Modi.
   ========================================================================== */

/* ---------- Akzente je Agent (Token-Block der Landingpages) ---------- */
.lp-body, .lp-theme {
    --lp-a:      light-dark(#2F4BD8, #8FA0FF);
    --lp-a2:     light-dark(#0E7490, #5FD4F0);
    --lp-on-a:   light-dark(#FFFFFF, #0B0E16);
    --lp-ink:    light-dark(#10142A, #F3F4FA);
    --lp-shadow: light-dark(rgba(16, 20, 42, 0.16), rgba(0, 0, 0, 0.55));
    --lp-line:   light-dark(rgba(16, 20, 42, 0.08), rgba(255, 255, 255, 0.08));
}
.lp-theme-inbox    { --lp-a: light-dark(#2F4BD8, #8FA0FF); --lp-a2: light-dark(#0E7490, #5FD4F0); --lp-on-a: light-dark(#FFFFFF, #0B0E16); }
.lp-theme-mail     { --lp-a: light-dark(#6D28D9, #B69CFF); --lp-a2: light-dark(#BE185D, #F58AC0); --lp-on-a: light-dark(#FFFFFF, #120A20); }
.lp-theme-calendar { --lp-a: light-dark(#0F766E, #4FD1C5); --lp-a2: light-dark(#2F4BD8, #8FA0FF); --lp-on-a: light-dark(#FFFFFF, #06201D); }
.lp-theme-todo     { --lp-a: light-dark(#C2410C, #FDBA74); --lp-a2: light-dark(#B45309, #FCD34D); --lp-on-a: light-dark(#FFFFFF, #1F1206); }
.lp-theme-bills    { --lp-a: light-dark(#047857, #34D399); --lp-a2: light-dark(#0E7490, #5FD4F0); --lp-on-a: light-dark(#FFFFFF, #04201A); }
.lp-theme-notes    { --lp-a: light-dark(#A16207, #FCD34D); --lp-a2: light-dark(#BE185D, #F9A8D4); --lp-on-a: light-dark(#FFFFFF, #1F1706); }
.lp-theme-calculator { --lp-a: light-dark(#4338CA, #A5B4FC); --lp-a2: light-dark(#0E7490, #5FD4F0); --lp-on-a: light-dark(#FFFFFF, #0F0B2A); }
.lp-theme-goals    { --lp-a: light-dark(#0369A1, #7DD3FC); --lp-a2: light-dark(#A21CAF, #F0ABFC); --lp-on-a: light-dark(#FFFFFF, #06182A); }
.lp-theme-wakeup   { --lp-a: light-dark(#B23C0B, #FFB27A); --lp-a2: light-dark(#7C3AED, #C4B5FD); --lp-on-a: light-dark(#FFFFFF, #1F0E05); }
.lp-theme-checklist { --lp-a: light-dark(#15803D, #4ADE80); --lp-a2: light-dark(#2F4BD8, #8FA0FF); --lp-on-a: light-dark(#FFFFFF, #06200F); }
.lp-theme-briefing { --lp-a: light-dark(#BE123C, #FDA4AF); --lp-a2: light-dark(#B45309, #FCD34D); --lp-on-a: light-dark(#FFFFFF, #230A10); }
.lp-theme-pdf      { --lp-a: light-dark(#B91C1C, #FCA5A5); --lp-a2: light-dark(#2F4BD8, #8FA0FF); --lp-on-a: light-dark(#FFFFFF, #230808); }
.lp-theme-overview { --lp-a: light-dark(#2F4BD8, #8FA0FF); --lp-a2: light-dark(#0F766E, #4FD1C5); --lp-on-a: light-dark(#FFFFFF, #0B0E16); }

/* Abgeleitete Flächen – nur aus den Akzenten gemischt */
.lp-body, .lp-theme, [class*="lp-theme-"] {
    --lp-a-soft:  color-mix(in oklab, var(--lp-a) 12%, var(--surface));
    --lp-a-line:  color-mix(in oklab, var(--lp-a) 30%, var(--border));
    --lp-glow:    color-mix(in oklab, var(--lp-a) 38%, transparent);
    --lp-glow2:   color-mix(in oklab, var(--lp-a2) 30%, transparent);
}

/* ---------- Grundgerüst ---------- */
.lp-body { background: var(--bg); overflow-x: clip; }
.lp-body .site-main { overflow-x: clip; }
.lp-body .container { position: relative; }

.lp-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.lp-progress span {
    display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--lp-progress, 0));
    background: linear-gradient(90deg, var(--lp-a), var(--lp-a2));
}

.lp-section { padding-block: clamp(72px, 10vw, 128px); position: relative; }
.lp-section + .lp-section { padding-top: clamp(24px, 4vw, 48px); }
.lp-band { background: var(--surface); border-block: 1px solid var(--border); }

.lp-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.lp-head.is-center { margin-inline: auto; text-align: center; }
.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
    font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--lp-a); font-weight: 600;
}
.lp-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.lp-h1 {
    font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.036em; font-weight: 650;
    margin: 0 0 22px; color: var(--lp-ink); text-wrap: balance; max-width: 16ch;
}
.lp-h2 {
    font-size: clamp(30px, 4vw, 48px); line-height: 1.06; letter-spacing: -0.032em; font-weight: 650;
    margin: 0 0 16px; color: var(--lp-ink); text-wrap: balance;
}
.lp-h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -0.024em; font-weight: 650; margin: 0 0 14px; color: var(--lp-ink); text-wrap: balance; }
.lp-lead, .lp-text { font-size: var(--fs-md); line-height: 1.6; color: var(--text-2); max-width: 62ch; margin: 0; }
.lp-grad {
    background: linear-gradient(100deg, var(--lp-a) 10%, var(--lp-a2) 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not (background-clip: text) { .lp-grad { color: var(--lp-a); } }

.lp-chip {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
    border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
    font-size: var(--fs-sm); color: var(--text); font-weight: 500; white-space: nowrap;
}
.lp-chip-accent { background: var(--lp-a-soft); border-color: var(--lp-a-line); color: var(--lp-a); }
.lp-price-num { font-weight: 650; }
.lp-price-per { color: var(--text-2); font-weight: 400; }
.lp-price-free { font-weight: 600; color: var(--c-accent); }

.lp-btn-accent {
    background: linear-gradient(135deg, var(--lp-a), color-mix(in oklab, var(--lp-a) 70%, var(--lp-a2)));
    color: var(--lp-on-a); border: 0; position: relative;
    box-shadow: 0 10px 30px -10px var(--lp-glow), inset 0 1px 0 color-mix(in oklab, white 25%, transparent);
    transition: transform .18s ease, box-shadow .18s ease;
}
.lp-btn-accent:hover { color: var(--lp-on-a); transform: translateY(-1px); box-shadow: 0 16px 36px -12px var(--lp-glow); }
.lp-btn-accent:focus-visible { outline: none; box-shadow: var(--focus), 0 10px 30px -10px var(--lp-glow); }

/* ---------- Hero ---------- */
.lp-hero { position: relative; padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 110px); isolation: isolate; }
.lp-aurora { position: absolute; inset: -10% -10% 0 -10%; z-index: -2; pointer-events: none; filter: blur(60px); opacity: .9; }
.lp-aurora span { position: absolute; border-radius: 50%; mix-blend-mode: normal; }
.lp-aurora span:nth-child(1) { width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; right: 2%; top: -6%; background: radial-gradient(circle, var(--lp-glow), transparent 68%); animation: lp-drift1 18s ease-in-out infinite alternate; }
.lp-aurora span:nth-child(2) { width: 34vw; height: 34vw; max-width: 520px; max-height: 520px; right: 28%; top: 30%; background: radial-gradient(circle, var(--lp-glow2), transparent 70%); animation: lp-drift2 22s ease-in-out infinite alternate; }
.lp-aurora span:nth-child(3) { width: 30vw; height: 30vw; max-width: 460px; max-height: 460px; left: -6%; top: 40%; background: radial-gradient(circle, color-mix(in oklab, var(--lp-a) 16%, transparent), transparent 70%); animation: lp-drift1 26s ease-in-out infinite alternate-reverse; }
@keyframes lp-drift1 { to { transform: translate(-6%, 8%) scale(1.08); } }
@keyframes lp-drift2 { to { transform: translate(10%, -6%) scale(.92); } }
.lp-grid-bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(var(--lp-line) 1px, transparent 1px), linear-gradient(90deg, var(--lp-line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, black 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, black 20%, transparent 75%);
}
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.lp-crumbs { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 18px; }
.lp-crumbs a { color: var(--text-2); }
.lp-crumbs a:hover { color: var(--lp-a); }
.lp-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.lp-hero-lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--text-2); max-width: 54ch; margin: 0 0 30px; }
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.lp-requires { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); margin: 0 0 12px; }
.lp-requires a { color: var(--lp-a); }
.lp-hero-points { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: var(--fs-sm); color: var(--text-2); }
.lp-hero-points li { display: inline-flex; align-items: center; gap: 7px; }
.lp-hero-points .icon { color: var(--lp-a); }

.lp-hero-stage { position: relative; min-height: 520px; display: grid; place-items: center; perspective: 1400px; }
.lp-hero-object {
    position: absolute; width: min(78%, 480px); height: auto; right: -4%; top: -8%;
    filter: drop-shadow(0 40px 60px var(--lp-glow)); animation: lp-float 7s ease-in-out infinite; pointer-events: none;
}
@keyframes lp-float { 50% { transform: translateY(-16px) rotate(-1.5deg); } }
.lp-hero-window {
    position: relative; width: min(100%, 560px); margin-top: 120px; margin-right: 12%;
    transform: rotateY(calc(var(--rx, 0) * 1deg)) rotateX(calc(var(--ry, 0) * -1deg)); transform-style: preserve-3d;
    transition: transform .25s ease-out;
}

/* ---------- Demo-Fenster ---------- */
.lp-win {
    position: relative; background: color-mix(in oklab, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
    box-shadow: 0 1px 0 color-mix(in oklab, white 30%, transparent) inset, 0 30px 80px -24px var(--lp-shadow), 0 12px 24px -12px var(--lp-shadow);
    font-size: var(--fs-sm); color: var(--text); text-align: left;
}
.lp-win-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.lp-win-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.lp-win-bar em { margin-left: 10px; font-style: normal; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-win-body { padding: 14px; position: relative; }

/* ---------- Alex ---------- */
.lp-alex { display: flex; gap: 12px; align-items: flex-start; }
.lp-alex-avatar { border-radius: 50%; flex: none; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--lp-a-line); }
.lp-alex-body { min-width: 0; flex: 1; }
.lp-alex-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; font-size: var(--fs-sm); }
.lp-alex-meta strong { color: var(--text); }
.lp-alex-meta span { color: var(--text-2); font-size: var(--fs-xs); }
.lp-alex-bubble {
    display: inline-block; max-width: 100%; padding: 10px 14px; border-radius: 4px 16px 16px 16px;
    background: var(--lp-a-soft); border: 1px solid var(--lp-a-line); color: var(--text);
}
.lp-alex-line { margin: 0; line-height: 1.5; min-height: 1.5em; }
.lp-alex-line + .lp-alex-line { margin-top: 6px; }
.lp-alex-line.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--lp-a); animation: lp-caret .8s steps(1) infinite; }
@keyframes lp-caret { 50% { opacity: 0; } }
.lp-alex-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lp-alex.is-small .lp-alex-bubble { font-size: var(--fs-sm); }
.lp-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
    font-size: var(--fs-xs); font-weight: 600; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
}
.lp-pill.is-accent { background: var(--lp-a); border-color: transparent; color: var(--lp-on-a); }
.lp-pill { transition: transform .15s ease; }
.lp-pill.is-pressed { transform: scale(.93); }

/* ---------- Laufband ---------- */
.lp-marquee {
    display: flex; overflow: hidden; gap: 0; padding-block: 18px; border-block: 1px solid var(--border); background: var(--surface);
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.lp-marquee ul { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0 18px; flex: none; animation: lp-marquee 48s linear infinite; }
.lp-marquee li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: var(--fs-base); color: var(--text-2); font-weight: 500; }
.lp-marquee li .icon { color: var(--lp-a); }
.lp-marquee:hover ul { animation-play-state: paused; }
@keyframes lp-marquee { to { transform: translateX(-100%); } }

/* ---------- Kennzahlen ---------- */
.lp-facts { padding-block: clamp(40px, 6vw, 72px); }
.lp-facts-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-facts-list li { padding: 22px 22px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.lp-facts-list strong { font-size: clamp(34px, 4vw, 48px); line-height: 1; letter-spacing: -0.03em; font-weight: 650; color: var(--lp-a); }
.lp-facts-list li > span { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45; }

/* ---------- Scroll-Erzählung ---------- */
.lp-story-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); }
.lp-story-steps { list-style: none; margin: 0; padding: 0; }
.lp-story-step { display: flex; gap: 18px; min-height: 58vh; align-items: center; opacity: .42; transition: opacity .4s ease; }
.lp-story-step:first-child { min-height: 40vh; align-items: flex-start; padding-top: 24px; }
.lp-story-step:last-child { min-height: 48vh; }
.lp-story-step.is-active { opacity: 1; }
.lp-story-step h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em; margin: 0 0 10px; color: var(--lp-ink); }
.lp-story-step p { margin: 0; color: var(--text-2); font-size: var(--fs-md); line-height: 1.6; max-width: 46ch; }
.lp-story-n {
    flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 650;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-2); transition: all .3s ease;
}
.lp-story-step.is-active .lp-story-n { background: var(--lp-a); color: var(--lp-on-a); border-color: transparent; box-shadow: 0 10px 24px -10px var(--lp-glow); }
.lp-story-stage { position: relative; }
.lp-story-sticky { position: sticky; top: calc(var(--header-h) + 40px); }
.lp-stage-glow { position: absolute; inset: 10% 5%; background: radial-gradient(circle, var(--lp-glow), transparent 65%); filter: blur(40px); z-index: -1; }
/* Szenen der Bühne: nur die zum Schritt passende ist sichtbar */
.lp-stage-scene { transition: opacity .45s ease, transform .45s ease; }
[data-lp-stage] .lp-stage-scene { position: absolute; inset: 14px; opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none; }
[data-lp-stage] .lp-stage-scene.is-base { position: relative; inset: auto; }
[data-lp-stage][data-step="1"] .lp-stage-scene[data-scene="1"],
[data-lp-stage][data-step="2"] .lp-stage-scene[data-scene="2"],
[data-lp-stage][data-step="3"] .lp-stage-scene[data-scene="3"],
[data-lp-stage][data-step="4"] .lp-stage-scene[data-scene="4"],
[data-lp-stage][data-step="5"] .lp-stage-scene[data-scene="5"],
[data-lp-stage][data-step="6"] .lp-stage-scene[data-scene="6"] { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- Funktionen ---------- */
.lp-features { display: flex; flex-direction: column; gap: clamp(72px, 10vw, 140px); }
.lp-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lp-feature.is-flip .lp-feature-copy { order: 2; }
.lp-feature-demo { position: relative; }
.lp-feature-demo::before { content: ""; position: absolute; inset: 8% 6%; background: radial-gradient(circle, var(--lp-glow), transparent 68%); filter: blur(46px); z-index: -1; opacity: .8; }
.lp-checks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-base); color: var(--text); }
.lp-checks .icon { color: var(--lp-a); margin-top: 3px; flex: none; }

/* ---------- Bento ---------- */
.lp-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-card {
    position: relative; padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 8px; overflow: hidden; isolation: isolate;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.lp-card.is-wide { grid-column: span 2; }
.lp-card:hover { transform: translateY(-3px); border-color: var(--lp-a-line); box-shadow: 0 24px 50px -30px var(--lp-shadow); }
.lp-card h3 { font-size: var(--fs-md); margin: 6px 0 0; color: var(--lp-ink); }
.lp-card p { margin: 0; color: var(--text-2); font-size: var(--fs-base); line-height: 1.55; }
.lp-card-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--lp-a-soft); color: var(--lp-a); border: 1px solid var(--lp-a-line); }
.lp-card-demo { margin-top: 14px; }
[data-lp-glow]::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--lp-a) 12%, transparent), transparent 60%);
}
[data-lp-glow]:hover::after { opacity: 1; }

/* ---------- Vorher/Nachher ---------- */
.lp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp-compare-side { padding: 28px; border-radius: 22px; border: 1px solid var(--border); background: var(--surface); }
.lp-compare-side h3 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); margin: 0 0 18px; }
.lp-compare-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lp-compare-side li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-base); line-height: 1.5; }
.lp-compare-side li .icon { flex: none; margin-top: 3px; }
.lp-compare-side.is-without { background: var(--surface-2); }
.lp-compare-side.is-without h3, .lp-compare-side.is-without li { color: var(--text-2); }
.lp-compare-side.is-without .icon { color: var(--c-danger); }
.lp-compare-side.is-with { border-color: var(--lp-a-line); box-shadow: 0 30px 70px -40px var(--lp-glow); position: relative; overflow: hidden; }
.lp-compare-side.is-with::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--lp-a), var(--lp-a2)); }
.lp-compare-side.is-with h3 { color: var(--lp-ink); }
.lp-compare-side.is-with h3 .icon, .lp-compare-side.is-with li .icon { color: var(--lp-a); }
.lp-js .lp-compare.is-pending .is-with li { opacity: .25; transform: translateX(-8px); }
.lp-compare .is-with li { transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--d, 0) * 140ms); }

/* ---------- Netz der Agents ---------- */
.lp-network { position: relative; height: max(360px, calc(200px + var(--n, 4) * 76px)); }
.lp-network-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-network-lines path { fill: none; stroke: var(--lp-a-line); stroke-width: 1.5; }
.lp-network-lines path.is-flow { stroke: var(--lp-a); stroke-width: 2; stroke-dasharray: 6 12; animation: lp-flow 1.6s linear infinite; opacity: .75; }
.lp-network-lines path.is-flow.is-in { animation-direction: reverse; }
.lp-network-lines circle { fill: var(--lp-a2); }
@keyframes lp-flow { to { stroke-dashoffset: -36; } }
.lp-node {
    position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; width: max-content; max-width: 280px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px; color: var(--text);
    box-shadow: 0 18px 40px -26px var(--lp-shadow); transition: transform .25s ease, border-color .25s ease; text-decoration: none;
}
a.lp-node:hover { border-color: var(--lp-a-line); transform: translate(-50%, -50%) scale(1.03); text-decoration: none; color: var(--text); }
.lp-node-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--lp-a-soft); color: var(--lp-a); }
.lp-node-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-node-text strong { font-size: var(--fs-base); }
.lp-node-text small { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.4; }
.lp-node.is-center { flex-direction: column; gap: 10px; padding: 22px 26px; left: 50%; top: 50%; border-color: var(--lp-a-line); box-shadow: 0 0 0 8px color-mix(in oklab, var(--lp-a) 8%, transparent), 0 30px 70px -30px var(--lp-glow); z-index: 2; }
.lp-node.is-center .lp-node-icon { width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(135deg, var(--lp-a), var(--lp-a2)); color: var(--lp-on-a); }
.lp-node.is-center strong { font-size: var(--fs-md); }

/* ---------- Fragen ---------- */
.lp-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.lp-faq-grid > div:first-child { position: sticky; top: calc(var(--header-h) + 32px); }
.lp-faq { display: flex; flex-direction: column; gap: 10px; }
.lp-faq details { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); transition: border-color .2s ease; }
.lp-faq details[open] { border-color: var(--lp-a-line); }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 20px; font-weight: 600; font-size: var(--fs-md); color: var(--text); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary .icon { flex: none; color: var(--lp-a); transition: transform .25s ease; }
.lp-faq details[open] summary .icon { transform: rotate(45deg); }
.lp-faq summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 16px; }
.lp-faq details p { margin: 0; padding: 0 20px 20px; color: var(--text-2); font-size: var(--fs-base); line-height: 1.65; }

/* ---------- Abschluss ---------- */
.lp-cta {
    position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 40px; align-items: center; padding: clamp(28px, 5vw, 64px); border-radius: 28px;
    background: var(--surface); border: 1px solid var(--lp-a-line);
}
.lp-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: radial-gradient(600px 300px at 100% 0%, var(--lp-glow), transparent 70%), radial-gradient(500px 300px at 0% 100%, var(--lp-glow2), transparent 70%);
    opacity: .55;
}
.lp-cta h2 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 14px; color: var(--lp-ink); text-wrap: balance; }
.lp-cta p { margin: 0; color: var(--text-2); font-size: var(--fs-md); line-height: 1.6; }
.lp-cta .lp-cta-price { margin-top: 22px; font-size: var(--fs-lg); color: var(--text); }
.lp-cta .lp-cta-price > span:last-child { display: block; font-size: var(--fs-sm); color: var(--text-2); margin-top: 4px; }
.lp-cta-side { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.lp-cta-link { font-size: var(--fs-sm); color: var(--text-2); }
.lp-cta-link:hover { color: var(--lp-a); }

/* ---------- Verwandte Agents ---------- */
.lp-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-rel {
    position: relative; isolation: isolate; overflow: hidden; display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 20px;
    background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: transform .25s ease, border-color .25s ease;
}
.lp-rel:hover { transform: translateY(-3px); border-color: var(--lp-a-line); text-decoration: none; color: var(--text); }
.lp-rel img { width: 72px; height: 72px; flex: none; filter: drop-shadow(0 12px 16px var(--lp-glow)); }
.lp-rel-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lp-rel-text strong { font-size: var(--fs-md); }
.lp-rel-text span { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.lp-rel-text em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--lp-a); }

/* ---------- Hinweis auf einen verwandten Agent ---------- */
.lp-upsell {
    position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: center;
    padding: clamp(24px, 4vw, 48px); border-radius: 26px; background: var(--surface); border: 1px solid var(--lp-a-line);
}
.lp-upsell::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(520px 260px at 90% 20%, var(--lp-glow), transparent 70%); opacity: .5; }
.lp-upsell-copy .btn { margin-top: 22px; }
.lp-upsell-side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lp-upsell-side > img { width: 180px; height: 180px; filter: drop-shadow(0 20px 30px var(--lp-glow)); animation: lp-float 7s ease-in-out infinite; }
@media (max-width: 900px) { .lp-upsell { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .lp-upsell-side > img { animation: none; } }

/* ---------- Bausteine für Demos (von allen Agents nutzbar) ---------- */
.lp-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.lp-row + .lp-row { margin-top: 8px; }
.lp-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--lp-on-a); background: linear-gradient(135deg, var(--lp-a), var(--lp-a2)); }
.lp-avatar.is-2 { background: linear-gradient(135deg, var(--lp-a2), var(--lp-a)); }
.lp-avatar.is-muted { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.lp-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-lines strong { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-lines span { font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.lp-tag.is-accent { background: var(--lp-a-soft); color: var(--lp-a); border-color: var(--lp-a-line); }
.lp-tag.is-warn { background: var(--c-warning-soft); color: var(--c-warning); border-color: transparent; }
.lp-tag.is-danger { background: var(--c-danger-soft); color: var(--c-danger); border-color: transparent; }
.lp-tag.is-ok { background: var(--c-success-soft); color: var(--c-success); border-color: transparent; }
.lp-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); white-space: nowrap; }
.lp-toast {
    position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 20px); opacity: 0; transition: all .35s ease;
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; white-space: nowrap;
    background: var(--lp-ink); color: var(--bg); font-size: var(--fs-xs); box-shadow: 0 16px 30px -12px var(--lp-shadow); z-index: 5;
}
.lp-toast b { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.lp-cursor {
    position: absolute; width: 22px; height: 22px; z-index: 6; pointer-events: none; left: 0; top: 0;
    transition: transform .7s cubic-bezier(.6, .05, .3, 1); transform: translate(var(--cx, 60%), var(--cy, 60%));
}
.lp-cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.lp-cursor svg path { fill: var(--lp-ink); stroke: var(--bg); stroke-width: 1.5; }
.lp-cursor.is-click::after { content: ""; position: absolute; left: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--lp-a); animation: lp-ping .5s ease-out; }
@keyframes lp-ping { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.lp-typed.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--lp-a); animation: lp-caret .8s steps(1) infinite; }
.lp-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.lp-bar > i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--lp-a), var(--lp-a2)); transition: width .8s ease; }

/* ---------- Übersicht /agents ---------- */
.lp-ov-hero .lp-h1 { max-width: 16ch; }
.lp-ov-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.lp-ov-filter button { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.lp-ov-filter button.is-active { background: var(--lp-ink); color: var(--bg); border-color: transparent; }
.lp-ov-filter button:focus-visible { outline: none; box-shadow: var(--focus); }
.lp-ov-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp-ov-card {
    position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 26px; min-height: 360px;
    border-radius: 24px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.lp-ov-card:hover { transform: translateY(-4px); border-color: var(--lp-a-line); box-shadow: 0 30px 60px -36px var(--lp-glow); text-decoration: none; color: var(--text); }
.lp-ov-card::before { content: ""; position: absolute; right: -30%; top: -30%; width: 80%; aspect-ratio: 1; z-index: -1; background: radial-gradient(circle, var(--lp-glow), transparent 65%); opacity: .55; transition: opacity .3s ease; }
.lp-ov-card:hover::before { opacity: .9; }
.lp-ov-card img { width: 132px; height: 132px; align-self: flex-end; margin: -10px -6px 0 0; filter: drop-shadow(0 18px 24px var(--lp-glow)); transition: transform .4s ease; }
.lp-ov-card:hover img { transform: translateY(-6px) rotate(-3deg) scale(1.04); }
.lp-ov-card h3 { font-size: var(--fs-lg); letter-spacing: -0.02em; margin: 0; }
.lp-ov-card p { margin: 0; color: var(--text-2); font-size: var(--fs-base); line-height: 1.55; flex: 1; }
.lp-ov-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.lp-ov-foot em { font-style: normal; font-weight: 600; color: var(--lp-a); display: inline-flex; align-items: center; gap: 6px; }
.lp-ov-card[hidden] { display: none; }
.lp-ov-kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-a); font-weight: 600; }

.lp-ov-wish { border-style: dashed; border-color: var(--border-strong); background: transparent; min-height: 0; }
.lp-ov-wish::before { display: none; }
.lp-ov-stage { min-height: 460px; }
.lp-ov-object { position: relative; right: auto; top: auto; width: min(100%, 520px); }
.lp-ov-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-ov-steps li { padding: 26px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.lp-ov-steps li .lp-story-n { background: var(--lp-a); color: var(--lp-on-a); border-color: transparent; }
.lp-ov-steps h3 { font-size: var(--fs-lg); margin: 6px 0 0; letter-spacing: -0.02em; }
.lp-ov-steps p { margin: 0; color: var(--text-2); line-height: 1.55; }
@media (max-width: 900px) { .lp-ov-steps { grid-template-columns: 1fr; } .lp-ov-stage { min-height: 0; } }

.lp-graph { position: relative; height: 620px; }
.lp-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-graph path { fill: none; stroke: var(--border-strong); stroke-width: 1.5; transition: stroke .25s ease, opacity .25s ease; }
.lp-graph path.is-hot { stroke: var(--lp-a); stroke-width: 2.2; stroke-dasharray: 6 10; animation: lp-flow 1.4s linear infinite; }
.lp-graph.is-focus path:not(.is-hot) { opacity: .2; }
.lp-graph-node {
    position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 150px; text-align: center;
    color: var(--text); text-decoration: none; transition: opacity .25s ease;
}
.lp-graph-node img { width: 96px; height: 96px; filter: drop-shadow(0 14px 22px var(--lp-glow)); transition: transform .3s ease; }
.lp-graph-node strong { font-size: var(--fs-sm); padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.lp-graph-node:hover { text-decoration: none; color: var(--text); }
.lp-graph-node:hover img, .lp-graph-node:focus-visible img { transform: scale(1.08); }
.lp-graph.is-focus .lp-graph-node:not(.is-hot) { opacity: .35; }
.lp-graph-caption { text-align: center; color: var(--text-2); font-size: var(--fs-sm); min-height: 1.5em; margin-top: 12px; }

/* ---------- Einblenden beim Scrollen ----------
   Ruhezustand ist sichtbar. Nur was beim Laden unterhalb des Bildschirms
   liegt, bekommt .is-pending und wird beim Hineinscrollen eingeblendet. */
.lp-js [data-lp-reveal].is-pending { opacity: 0; transform: translateY(28px); }
[data-lp-reveal] { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1080px) {
    .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-ov-grid, .lp-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .lp-hero-grid, .lp-feature, .lp-faq-grid, .lp-cta { grid-template-columns: 1fr; }
    .lp-feature.is-flip .lp-feature-copy { order: 0; }
    .lp-hero-stage { min-height: 0; padding-top: 40px; }
    .lp-hero-object { width: 58%; right: -6%; top: -4%; }
    .lp-hero-window { margin: 110px 0 0; width: 100%; }
    .lp-faq-grid > div:first-child { position: static; }
    .lp-story-grid { grid-template-columns: 1fr; }
    .lp-story-stage { order: -1; position: sticky; top: calc(var(--header-h) + 8px); z-index: 3; }
    .lp-story-sticky { position: relative; top: 0; }
    .lp-story-stage .lp-win-body { max-height: 300px; overflow: hidden; }
    .lp-story-step { min-height: 46vh; background: var(--bg); }
    .lp-story-step:first-child { min-height: 30vh; }
    .lp-network { height: auto; display: flex; flex-direction: column; gap: 12px; }
    .lp-network-lines { display: none; }
    .lp-node, .lp-node.is-center { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: none; }
    a.lp-node:hover { transform: none; }
    .lp-node.is-center { flex-direction: row; margin-bottom: 8px; }
    .lp-node[data-dir]::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-top: 2px solid var(--lp-a); border-right: 2px solid var(--lp-a); transform: rotate(45deg); flex: none; }
    .lp-graph { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .lp-graph svg { display: none; }
    .lp-graph-node { position: relative; transform: none; left: auto !important; top: auto !important; width: auto; }
}
@media (max-width: 640px) {
    .lp-bento, .lp-ov-grid, .lp-related, .lp-compare { grid-template-columns: 1fr; }
    .lp-card.is-wide { grid-column: auto; }
    .lp-facts-list { grid-template-columns: 1fr 1fr; gap: 10px; }
    .lp-facts-list li { padding: 16px; }
    .lp-hero-object { width: 70%; }
    .lp-compare-side { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-aurora span, .lp-hero-object, .lp-marquee ul, .lp-network-lines path.is-flow, .lp-graph path.is-hot { animation: none !important; }
    [data-lp-reveal], .lp-stage-scene, .lp-compare .is-with li { transition: none !important; }
    .lp-js [data-lp-reveal].is-pending { opacity: 1; transform: none; }
    .lp-hero-window { transform: none !important; }
}