/*!
 * rechnung.best — Landing-Polish-Layer (Marke verfeinern, 2026-05-29)
 * Laedt NACH landing.css. Optik only, keine Struktur-/Textaenderung.
 * Alles unter html[data-css="v2"] body[data-page-context="landing"].
 * Spec: docs/superpowers/specs/2026-05-29-landing-page-refinement-design.md
 */

html[data-css="v2"] body[data-page-context="landing"] {
    --lp-indigo: #6366f1;
    --lp-violet: #a855f7;
    --lp-accent-tint: color-mix(in srgb, var(--lp-indigo) 12%, transparent);
    --lp-card-shadow: 0 1px 2px rgba(16, 18, 40, 0.04), 0 8px 24px -8px rgba(16, 18, 40, 0.10);
    --lp-card-shadow-hover: 0 2px 4px rgba(16, 18, 40, 0.05), 0 18px 40px -12px rgba(16, 18, 40, 0.16);
    --lp-hairline: color-mix(in srgb, var(--border, rgba(0,0,0,0.08)) 75%, transparent);
}
html[data-css="v2"][data-theme="dark"] body[data-page-context="landing"] {
    --lp-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    --lp-card-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.5);
    --lp-hairline: color-mix(in srgb, #fff 9%, transparent);
}

/* ============================================================
   1) HERO — mehrlagiger Mesh-Gradient + Tiefe + sauberer Uebergang
   ============================================================ */
html[data-css="v2"] body[data-page-context="landing"] .l-hero {
    background:
        radial-gradient(62% 78% at 12% 8%, rgba(139, 92, 246, 0.55), transparent 60%),
        radial-gradient(46% 65% at 92% 16%, rgba(56, 189, 248, 0.28), transparent 60%),
        radial-gradient(70% 95% at 74% 108%, rgba(99, 102, 241, 0.50), transparent 66%),
        linear-gradient(135deg, #5b5bf0 0%, #7c3aed 52%, #9333ea 100%);
    /* weicher Fade zum hellen Folgebereich */
    box-shadow: inset 0 -90px 70px -50px var(--bg, #faf9f9);
}

/* Aurora-Glows feiner */
html[data-css="v2"] body[data-page-context="landing"] .l-hero::before {
    background: rgba(255, 255, 255, 0.10);
    filter: blur(90px);
}
html[data-css="v2"] body[data-page-context="landing"] .l-hero::after {
    background: rgba(168, 85, 247, 0.22);
    filter: blur(90px);
}

/* Eyebrow + Tags als Glas-Pills */
html[data-css="v2"] body[data-page-context="landing"] .l-hero .l-eyebrow,
html[data-css="v2"] body[data-page-context="landing"] .l-hero .l-hero-tag {
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.14);
}

/* Headline-Akzent: weicher Gradient-Underline statt harter Linie */
html[data-css="v2"] body[data-page-context="landing"] .l-hero .l-h1-accent {
    text-decoration: none;
    background-image: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.45));
    background-repeat: no-repeat;
    background-position: 0 92%;
    background-size: 100% 3px;
    padding-bottom: 2px;
}

/* Primaer-CTA (weiss) feiner, mit :active */
html[data-css="v2"] body[data-page-context="landing"] .l-hero .l-btn--primary {
    box-shadow: 0 2px 6px rgba(0,0,0,0.14), 0 12px 28px -8px rgba(0,0,0,0.30);
    transition: transform 150ms var(--ease-out, ease), box-shadow 150ms var(--ease-out, ease);
}
html[data-css="v2"] body[data-page-context="landing"] .l-hero .l-btn--primary:active { transform: scale(0.98); }

/* App-Preview „schwebt": mehrlagiger Schatten + Marken-Glow + Entrance */
html[data-css="v2"] body[data-page-context="landing"] .l-app-card {
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.12),
        0 40px 80px -24px rgba(0, 0, 0, 0.38),
        0 0 70px -10px rgba(168, 85, 247, 0.30);
}
html[data-css="v2"] body[data-page-context="landing"] .l-hero-preview {
    animation: lpHeroPreviewIn 700ms var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both;
}
@keyframes lpHeroPreviewIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    html[data-css="v2"] body[data-page-context="landing"] .l-hero-preview { animation: none; }
}

/* ============================================================
   2) KARTEN — weiche Elevation + Hairline statt harter 1px-Box
   ============================================================ */
html[data-css="v2"] body[data-page-context="landing"] .l-audience-card,
html[data-css="v2"] body[data-page-context="landing"] .l-bento-card,
html[data-css="v2"] body[data-page-context="landing"] .l-stat,
html[data-css="v2"] body[data-page-context="landing"] .l-testimonial,
html[data-css="v2"] body[data-page-context="landing"] .l-price-card,
html[data-css="v2"] body[data-page-context="landing"] .l-faq-item {
    border-color: var(--lp-hairline);
    box-shadow: var(--lp-card-shadow);
    transition: transform 0.22s var(--ease-out, ease),
                box-shadow 0.22s var(--ease-out, ease),
                border-color 0.22s var(--ease-out, ease);
}

html[data-css="v2"] body[data-page-context="landing"] .l-audience-card:hover,
html[data-css="v2"] body[data-page-context="landing"] .l-bento-card:hover,
html[data-css="v2"] body[data-page-context="landing"] .l-testimonial:hover {
    transform: translateY(-3px);
    box-shadow: var(--lp-card-shadow-hover);
    border-color: color-mix(in srgb, var(--lp-indigo) 30%, transparent);
}

/* ============================================================
   3) ICON-KACHELN — getoente, abgerundete Akzent-Tiles
   ============================================================ */
html[data-css="v2"] body[data-page-context="landing"] .l-audience-icon,
html[data-css="v2"] body[data-page-context="landing"] .l-bento-icon,
html[data-css="v2"] body[data-page-context="landing"] .l-stat-icon {
    box-sizing: border-box;
    background: var(--lp-accent-tint);
    border: 1px solid color-mix(in srgb, var(--lp-indigo) 18%, transparent);
    border-radius: 12px;
    padding: 9px;
    color: var(--lp-indigo);
}
html[data-css="v2"] body[data-page-context="landing"] .l-audience-icon { width: 46px; height: 46px; }
html[data-css="v2"] body[data-page-context="landing"] .l-bento-icon   { width: 42px; height: 42px; }
html[data-css="v2"] body[data-page-context="landing"] .l-stat-icon    { width: 44px; height: 44px; opacity: 1; }

/* ============================================================
   4) PRICING — „beliebtester" Plan staerker hervorheben
   ============================================================ */
html[data-css="v2"] body[data-page-context="landing"] .l-price-card--featured {
    border-color: transparent;
    box-shadow:
        var(--lp-card-shadow-hover),
        0 0 0 2px var(--lp-indigo);
    background:
        linear-gradient(var(--landing-card-bg), var(--landing-card-bg)) padding-box,
        linear-gradient(135deg, var(--lp-indigo), var(--lp-violet)) border-box;
    transform: translateY(-4px);
}
@media (max-width: 1024px) {
    html[data-css="v2"] body[data-page-context="landing"] .l-price-card--featured { transform: none; }
}

/* ============================================================
   5) STATS-BAND — als zusammenhaengende, polierte Leiste
   ============================================================ */
html[data-css="v2"] body[data-page-context="landing"] .l-stat {
    background: var(--landing-card-bg);
}
html[data-css="v2"] body[data-page-context="landing"] .l-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--lp-card-shadow-hover);
}

/* ============================================================
   6) FINALE CTA-CARD — Marken-Gradient + Glow
   ============================================================ */
html[data-css="v2"] body[data-page-context="landing"] .l-cta-card {
    background:
        radial-gradient(60% 120% at 50% -20%, rgba(168, 85, 247, 0.35), transparent 60%),
        linear-gradient(135deg, #5b5bf0 0%, #7c3aed 55%, #9333ea 100%);
    border-color: transparent;
    box-shadow: 0 30px 70px -24px rgba(124, 58, 237, 0.55);
}
html[data-css="v2"] body[data-page-context="landing"] .l-cta-card::before {
    background: rgba(255, 255, 255, 0.14);
}
html[data-css="v2"] body[data-page-context="landing"] .l-cta-card .l-h2,
html[data-css="v2"] body[data-page-context="landing"] .l-cta-card .l-lead {
    color: #ffffff;
}
html[data-css="v2"] body[data-page-context="landing"] .l-cta-card .l-lead { color: rgba(255,255,255,0.88); }
html[data-css="v2"] body[data-page-context="landing"] .l-cta-card .l-btn--primary {
    background: #ffffff;
    color: var(--lp-indigo);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
html[data-css="v2"] body[data-page-context="landing"] .l-cta-card .l-btn--ghost {
    border-color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.10);
    color: #ffffff;
}

/* ============================================================
   7) SECTION-HEADER — etwas mehr Praesenz
   ============================================================ */
html[data-css="v2"] body[data-page-context="landing"] .l-section-header {
    margin-bottom: 64px;
}

/* ============================================================
   8) NAV — etwas dichterer Glas-Effekt
   ============================================================ */
html[data-css="v2"] body[data-page-context="landing"] .l-nav {
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
}
html[data-css="v2"] body[data-page-context="landing"] .l-nav.is-scrolled {
    box-shadow: 0 1px 0 var(--lp-hairline), 0 6px 24px -16px rgba(0,0,0,0.25);
}