/* ============================================================
   STROMFEE — RELAUNCH DESIGN LAYER  ("suena"-Stil)
   Ruhig · monochrom Lavender · edel · helles Weiß
   Lädt NACH den Inline-Styles → gewinnt bei gleicher Spezifität.
   Wiederverwendbar für alle Unterseiten (Phase 2).
   2026-06-08
   ============================================================ */

/* ---- 1. Tokens: helles Weiß + reine Lavender-Welt (kein Grün) ---- */
html {
    --bg: #FAFAFF;
    --bg-soft: #f6f3ff;
    --bg-mute: #f3effb;
    --border: #eae6f6;
    --border-soft: #f1ecfa;

    /* Lavender-Akzent: Text bleibt kontraststark, Deko wird pastellig */
    --accent: #7c4dff;             /* lesbarer Lavender (Buttons/Links) */
    --accent-bright: #d580ff;      /* Deko / Gradient-Ende (Brief) */
    --accent-soft: #c6b5fd;        /* Deko / Gradient-Start (Brief) */
    --accent-glow: rgba(124, 77, 255, 0.26);
    --accent-ultra: #ddd6fe;

    /* Grün/Pistazie neutralisieren → Lavender (kein Farb-Mischmasch) */
    --emerald: #a78bfa;
    --pistazie: #c6b5fd;
    --hero-orb-1: rgba(198, 181, 253, 0.46);
    --hero-orb-2: rgba(213, 128, 255, 0.26);
    --hero-orb-3: rgba(221, 214, 254, 0.42);

    --sf-grad: linear-gradient(135deg, #c6b5fd 0%, #d580ff 100%);
}

/* ---- 2. Ruhiger, monochromer Pastell-Gradient-Mesh-Hintergrund ---- */
body {
    background-color: var(--bg) !important;
    background-image:
        radial-gradient(ellipse 900px 700px at 10% 4%,  rgba(198,181,253,0.42), transparent 56%),
        radial-gradient(ellipse 760px 620px at 95% 20%, rgba(213,128,255,0.20), transparent 58%),
        radial-gradient(ellipse 820px 660px at 22% 64%, rgba(221,214,254,0.38), transparent 58%),
        radial-gradient(ellipse 680px 560px at 92% 82%, rgba(198,181,253,0.26), transparent 58%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* ---- 3. Gradient-Text site-weit auf EIN Lavender-Rezept ---- */
.sf-hero h1 .shine,
.sf-section-head h2 .grad,
.sf-story-lead h2 .grad,
.sf-form-head h2 .grad,
h2 .grad, h1 .grad, .grad {
    background: var(--sf-grad);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}

/* ---- 4. Typografie: groß, luftig, edel (suena) ---- */
.sf-hero h1 { letter-spacing: -0.035em; line-height: 1.04; }
.sf-section-head h2, .sf-story-lead h2, .sf-form-head h2 {
    letter-spacing: -0.03em; line-height: 1.1;
}
.lead, .sf-section-head p, .sf-story-lead p { line-height: 1.62; }

/* ---- 5. Mehr Ruhe / Weißraum zwischen Sektionen ---- */
.sf-section, .sf-zielgruppen, .sf-mockup-section,
.sf-howit, .sf-trusted, .sf-risiko-video, .sf-form-section {
    padding-top: clamp(64px, 8vw, 132px);
    padding-bottom: clamp(64px, 8vw, 132px);
}

/* ---- 6. Rainbow-Karten → monochrom Lavender (kein bunter Mix) ---- */
.zielgruppe-card {
    --zg-color: var(--accent) !important;
    --zg-tint: rgba(124, 77, 255, 0.08) !important;
}
.zielgruppe-icon { color: var(--accent) !important; }

/* ---- 7. Buttons: große, ruhige Pills mit sanftem Hover ---- */
.btn-hero, .sf-form-submit, .un-cta, .cta-primary, .btn-primary {
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%) !important;
    box-shadow: 0 10px 30px var(--accent-glow) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}
.btn-hero:hover, .sf-form-submit:hover, .un-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 40px var(--accent-glow) !important;
}
.btn-outline {
    border-radius: 999px !important;
    border: 1.5px solid var(--accent) !important;
    color: var(--accent) !important;
    background: transparent !important;
}
.btn-outline:hover {
    background: var(--accent) !important; color: #fff !important;
}

/* ---- 8. Cards: weiche, einheitliche Schatten/Radius ---- */
.zielgruppe-card, .story-card, .case-card, .sf-feature-card, .feature-card {
    border-radius: 22px !important;
}

/* ---- 9. Scroll-Reveal feinjustiert (Observer existiert bereits) ---- */
.reveal-up { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal-up.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal-up { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   LANDING.HTML  (= Haupt-Homepage stromfee.ai)  — suena-Feinschliff
   Eigene Klassen (hero / target / btn-primary / urgency-pill / closing)
   ============================================================ */

/* Amber-Urgency & bunte Akzente → ruhiges Lavender (kein Mischmasch) */
.urgency-pill {
    background: rgba(124,77,255,0.10) !important;
    border-color: rgba(124,77,255,0.38) !important;
    color: var(--accent) !important;
}
.urgency-pill .pulse { background: var(--accent) !important; }

/* Förder-Banner ruhiger, einheitlich lavender */
.foerder-banner { border-color: var(--accent-soft) !important; }

/* Buttons: konsistente, große Lavender-Pills (außerhalb des dunklen Hero) */
.btn { border-radius: 999px !important; }
.btn-primary {
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-bright) 100%) !important;
    box-shadow: 0 10px 30px var(--accent-glow) !important;
}
.btn-primary:hover { box-shadow: 0 16px 40px var(--accent-glow) !important; transform: translateY(-2px) !important; }

/* Stakeholder-Karten: weicher Radius, sanfter, einheitlicher Hover */
.target {
    border-radius: 22px !important;
    transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease !important;
}
.target:hover { transform: translateY(-6px) !important; border-color: var(--accent-soft) !important; }

/* Sticky-CTA Material-Icons sauber ausrichten */
.sf-sticky-cta .material-symbols-rounded { font-size: 18px; vertical-align: middle; }

/* Hero-Video: warmen Sonnenuntergang in ruhige Lavender-Welt einfärben
   (Interim bis Whisk-HD-Hero-Clip; nimmt Orange raus, vereinheitlicht Ton) */
.hero .hero-video video { filter: saturate(0.78) contrast(1.02) brightness(0.96); }
.hero .hero-video::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
        linear-gradient(165deg, rgba(46,27,90,0.42) 0%, rgba(124,77,255,0.30) 48%, rgba(10,6,24,0.66) 100%),
        radial-gradient(ellipse 70% 60% at 50% 30%, rgba(160,120,255,0.18), transparent 70%);
}

/* ---- Scroll-Reveal-Utility (eigener Observer via Inline-JS in landing.html) ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}