/* ============================================================
   STROMFEE HOMEPAGE — suena-Struktur · hell · edel · Lavender-CI
   Schrift: Montserrat (≈ Avenir Heavy, Headlines) + Mulish (Body)
   2026-06-08 — Relaunch
   ============================================================ */

:root{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#faf9ff;
  --ink:#161325; --ink-soft:#56506b; --muted:#8b86a0;
  --accent:#7c3aed; --accent-press:#5b21b6;
  --accent-2:#d580ff; --accent-soft:#c6b5fd; --accent-tint:#f3efff;
  --line:#ece8f6; --line-strong:#ddd5f3;
  --grad:linear-gradient(120deg,#7c3aed 0%,#a855f7 50%,#d580ff 100%);
  --shadow-sm:0 1px 2px rgba(91,33,182,.05),0 6px 18px rgba(91,33,182,.06);
  --shadow-md:0 10px 30px rgba(91,33,182,.10),0 2px 8px rgba(91,33,182,.05);
  --shadow-lg:0 30px 70px rgba(91,33,182,.16),0 8px 24px rgba(91,33,182,.08);
  --r:22px; --r-lg:30px;
  --display:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
  --maxw:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

/* Inter wie pvwatcher: große Headlines elegant-leicht, klare Hierarchie */
h1,h2,h3{font-family:var(--display); letter-spacing:-.03em; line-height:1.08; margin:0;}
h1{font-size:clamp(38px,5.4vw,66px); font-weight:300;}
h2{font-size:clamp(30px,3.8vw,46px); letter-spacing:-.025em; font-weight:600;}
h3{font-size:22px; font-weight:600; letter-spacing:-.01em;}
p{margin:0;}
.accent{color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text;}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-tint); border:1px solid var(--line-strong);
  padding:8px 16px; border-radius:99px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(124,58,237,.15);animation:pulse 2.4s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:15.5px;
  padding:15px 30px; border-radius:99px; cursor:pointer; border:1.6px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn .ico{font-family:'Material Symbols Rounded'; font-size:19px;}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 12px 30px rgba(124,58,237,.30);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 20px 44px rgba(124,58,237,.42);}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-strong); box-shadow:var(--shadow-sm);}
.btn-ghost:hover{transform:translateY(-3px); border-color:var(--accent); color:var(--accent); box-shadow:var(--shadow-md);}
.btn-text{color:var(--accent); font-family:var(--display); font-weight:700; display:inline-flex; align-items:center; gap:7px;}
.btn-text .ico{font-family:'Material Symbols Rounded'; transition:transform .25s;}
.btn-text:hover .ico{transform:translateX(5px);}

/* ---------- Body offset für fixe unified-nav (64px) ---------- */
body{padding-top:0;}
section{position:relative;}

/* ---------- HERO ---------- */
.hero{padding:120px 0 90px; position:relative; overflow:hidden;}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(620px 520px at 86% 8%, rgba(213,128,255,.20), transparent 60%),
    radial-gradient(720px 600px at 6% 28%, rgba(198,181,253,.30), transparent 62%),
    radial-gradient(560px 520px at 50% 108%, rgba(124,58,237,.10), transparent 60%);
}
.hero .container{position:relative; z-index:2;}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:54px; align-items:center;}
.hero h1{margin:22px 0 0;}
.hero .lead{font-size:clamp(17px,1.5vw,20px); color:var(--ink-soft); max-width:540px; margin:22px 0 0;}
.hero .lead strong{color:var(--ink); font-weight:700;}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}
.hero-trust{margin-top:22px; font-size:14px; color:var(--muted); display:flex; align-items:center; gap:10px;}
.hero-trust .ico{font-family:'Material Symbols Rounded'; font-size:18px; color:var(--accent);}

.hero-visual{position:relative;}
.hero-visual .shot{
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.6); aspect-ratio:4/3.4; background:#0c0a18;
}
.hero-visual .shot img{width:100%; height:100%; object-fit:cover;}
.hero-float{
  position:absolute; left:-26px; bottom:34px; z-index:3;
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:18px; padding:16px 20px;
  box-shadow:var(--shadow-md); display:flex; align-items:center; gap:14px;
}
.hero-float .big{font-family:var(--display); font-weight:800; font-size:30px; color:var(--accent); letter-spacing:-.03em; line-height:1;}
.hero-float .lbl{font-size:12.5px; color:var(--ink-soft); line-height:1.3; max-width:150px;}
.dash{position:absolute; width:30px; height:3px; border-radius:2px; background:var(--accent-2); opacity:.7; z-index:2;}

/* ---------- STATS BAND ---------- */
.stats-band{padding:30px 0 6px;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s, border-color .3s;}
.kpi:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--line-strong);}
.kpi .v{font-family:var(--display); font-weight:800; font-size:34px; letter-spacing:-.03em; color:var(--accent);}
.kpi .v.warn{color:#b45309;}
.kpi .l{font-size:14px; color:var(--ink-soft); margin-top:8px; line-height:1.4;}
.kpi .l small{color:var(--muted);}

/* live-bar (bestehende Funktion erhalten, hell gestylt) */
.live-bar{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:18px;}
.live-cell{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow-sm);}
.live-cell .lv{font-family:var(--display); font-weight:800; font-size:21px; color:var(--ink); letter-spacing:-.02em;}
.live-cell .lv.warn{color:#b45309;}
.live-cell .lv .delta{font-size:12px; color:var(--muted); font-weight:600;}
.live-cell .ll{font-size:12.5px; color:var(--ink-soft); margin-top:6px;}
.live-cell .ll .src{color:var(--accent); font-weight:700;}
.live-cell .spark{width:100%; height:30px; margin-top:8px; overflow:visible;}
.live-cell .spark path{fill:none; stroke:var(--accent); stroke-width:1.6;}
.live-cell .spark .area{stroke:none;}
.live-cell .spark .line2{stroke:var(--accent-soft); stroke-dasharray:3 3;}
.live-cell .spark .pt-now{fill:var(--accent);}
.live-cell .spark .axis-zero{stroke:var(--line-strong); stroke-width:1; stroke-dasharray:2 3;}
.live-cell .spark-meta{display:flex; justify-content:space-between; font-size:10.5px; color:var(--muted); margin-top:4px;}

/* ---------- SECTION shells ---------- */
.section{padding:96px 0;}
.section.tint{background:linear-gradient(180deg,var(--bg) 0%,var(--surface-2) 100%);}
.section-head{max-width:760px; margin:0 auto 56px; text-align:center;}
.section-head .eyebrow{margin-bottom:18px;}
.section-head p{color:var(--ink-soft); font-size:18px; margin-top:16px;}

/* ---------- SPLIT (two-column text+image, alternating) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.split.rev .split-media{order:-1;}
.split-media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:16/12; border:1px solid var(--line);}
.split-media img{width:100%;height:100%;object-fit:cover;}
.split-body .eyebrow{margin-bottom:18px;}
.split-body h2{margin-bottom:18px;}
.split-body p{color:var(--ink-soft); margin-bottom:14px;}
.split-list{list-style:none; padding:0; margin:18px 0 26px;}
.split-list li{position:relative; padding:9px 0 9px 34px; border-bottom:1px solid var(--line); font-size:15.5px; color:var(--ink);}
.split-list li::before{content:"check"; font-family:'Material Symbols Rounded'; position:absolute; left:0; top:8px; color:var(--accent); font-size:21px;}

/* ---------- AUDIENCE CARDS (image-topped, like suena product cards) ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}
.card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--accent-soft);}
.card-media{aspect-ratio:16/10; overflow:hidden; position:relative; background:#0c0a18;}
.card-media video,.card-media img{width:100%;height:100%;object-fit:cover; transition:transform .5s ease;}
.card:hover .card-media video,.card:hover .card-media img{transform:scale(1.05);}
.card-role{position:absolute; top:14px; left:14px; z-index:2; font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(124,58,237,.92); backdrop-filter:blur(6px); padding:6px 13px; border-radius:99px;}
/* unified-nav.js zwingt Badge-Text grau → hier weiß erzwingen */
.card .card-role{color:#fff !important; -webkit-text-fill-color:#fff !important;}
.card-body{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1;}
.card-body h3{margin-bottom:10px;}
.card-body p{font-size:14.5px; color:var(--ink-soft); margin-bottom:18px; flex:1;}
.card-body .btn-text{font-size:14.5px;}

/* ---------- VIDEO FEATURE ---------- */
.videowrap{max-width:980px; margin:34px auto 0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:16/9; background:#000;}
.videowrap video{width:100%;height:100%;}
.video-thumb{display:block; position:relative; width:100%; height:100%;}
.video-thumb img{width:100%; height:100%; object-fit:cover;}
.video-thumb .play-badge{position:absolute; inset:0; margin:auto; width:84px; height:84px; display:flex; align-items:center; justify-content:center; font-family:'Material Symbols Rounded'; font-size:84px; color:#fff; text-shadow:0 6px 24px rgba(0,0,0,.5); transition:transform .25s; pointer-events:none;}
.video-thumb:hover .play-badge{transform:scale(1.08);}

/* ---------- CONTACT CTA ---------- */
.cta{
  background:linear-gradient(125deg,#efe7ff 0%,#f5ecff 45%,#fbeaff 100%); border:1px solid #e6dcff; border-radius:var(--r-lg); color:var(--ink); overflow:hidden; position:relative;
  padding:64px 56px; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center;
  box-shadow:var(--shadow-md);
}
.cta::before{content:""; position:absolute; inset:0; background:radial-gradient(620px 420px at 88% 8%,rgba(213,128,255,.18),transparent 62%); pointer-events:none;}
/* Pastell-Band → dunkle, gut lesbare Schrift (kein dunkles Lila mehr) */
.cta h2, .section .cta h2{color:#3a1d70 !important; -webkit-text-fill-color:#3a1d70 !important; position:relative;}
.cta p, .section .cta p{color:#5b5274 !important; -webkit-text-fill-color:#5b5274 !important; margin-top:16px; position:relative; font-size:17px;}
.cta-actions{display:flex; flex-direction:column; gap:14px; position:relative;}
.cta .btn-primary{background:var(--grad); color:#fff; box-shadow:0 12px 28px rgba(124,58,237,.30);}
.cta .btn-primary:hover{transform:translateY(-3px); box-shadow:0 20px 42px rgba(124,58,237,.42);}
.cta .btn-ghost{background:#fff; color:var(--accent); border-color:var(--accent-soft);}
.cta .btn-ghost:hover{background:var(--accent); color:#fff; border-color:var(--accent);}

/* ---------- FOOTER ---------- */
footer{padding:54px 0 70px; border-top:1px solid var(--line); margin-top:30px;}
.foot-inner{max-width:var(--maxw); margin:0 auto; padding:0 28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:14px; color:var(--ink-soft);}
.foot-inner a{color:var(--ink-soft); margin-right:16px;}
.foot-inner a:hover{color:var(--accent);}

/* ---------- Sticky bottom CTA ---------- */
.sf-sticky-cta{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:9990; display:flex; gap:10px; align-items:center; background:rgba(22,19,37,.94); backdrop-filter:blur(14px); border:1px solid rgba(167,139,250,.3); padding:9px 12px; border-radius:99px; box-shadow:0 14px 48px rgba(0,0,0,.35); animation:stickin .5s ease .9s both;}
@keyframes stickin{from{transform:translate(-50%,30px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.sf-sticky-cta a{display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:99px; font-family:var(--display); font-weight:700; font-size:14px; color:#fff; transition:transform .15s;}
.sf-sticky-cta a .ico{font-family:'Material Symbols Rounded'; font-size:18px;}
.sf-sticky-cta a.primary{background:var(--grad);}
.sf-sticky-cta a.primary:hover{transform:translateY(-1px);}
.sf-sticky-cta a.tel{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);}
.sf-sticky-cta .sf-sep{width:1px;height:18px;background:rgba(255,255,255,.18);}

/* ---------- Reveal (richtungsabhängig, suena-Stil) ---------- */
.reveal{opacity:0; transform:translateY(34px); transition:opacity .85s ease, transform .9s cubic-bezier(.2,.75,.2,1);}
.reveal.from-left{transform:translateX(-60px);}
.reveal.from-right{transform:translateX(60px);}
.reveal.scale-in{transform:scale(.9);}
.reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.10s}.reveal.d2{transition-delay:.20s}.reveal.d3{transition-delay:.30s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- HERO CINEMA (Vollbild-Hintergrundvideo · suena) ---------- */
.hero.cinema{padding:0; min-height:88vh; display:flex; align-items:center; color:#fff; overflow:hidden;}
.hero.cinema .hero-bg{position:absolute; inset:0; z-index:0;}
.hero.cinema .hero-bg video{width:100%; height:100%; object-fit:cover;}
/* dezenter Overlay (auf Wunsch heller) — Lesbarkeit kommt über Text-Schatten */
.hero.cinema .hero-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(8,6,18,.46) 0%, rgba(8,6,18,.20) 38%, rgba(8,6,18,0) 64%),
    linear-gradient(0deg, #ffffff 0%, rgba(255,255,255,0) 12%);}
.hero.cinema .container{position:relative; z-index:2; width:100%;}
.hero.cinema .hero-copy{max-width:760px; padding:130px 0 96px;}
.hero.cinema .eyebrow{background:rgba(14,10,28,.55); border-color:rgba(255,255,255,.4); color:#fff; backdrop-filter:blur(6px); text-shadow:0 1px 6px rgba(0,0,0,.5);}
.hero.cinema .eyebrow .dot{background:var(--accent-2); box-shadow:0 0 0 4px rgba(213,128,255,.25);}
/* WICHTIG: unified-nav.js erzwingt helle Theme-Textfarben per !important auf h1-h6/p
   → hier mit höherer Spezifität + !important die weiße Hero-Schrift zurückerobern */
.hero.cinema .hero-copy h1{color:#fff !important; -webkit-text-fill-color:#fff !important; margin-top:24px; text-shadow:0 2px 5px rgba(0,0,0,.45), 0 6px 30px rgba(0,0,0,.55);}
.hero.cinema .hero-copy h1 .accent{
  background:linear-gradient(120deg,#efe2ff,#d580ff) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  color:transparent !important; -webkit-text-fill-color:transparent !important;
  text-shadow:none;}
.hero.cinema .hero-copy .lead{color:rgba(255,255,255,.94) !important; -webkit-text-fill-color:rgba(255,255,255,.94) !important; max-width:600px; margin-top:22px; text-shadow:0 1px 16px rgba(0,0,0,.55);}
.hero.cinema .hero-copy .lead strong{color:#fff !important; -webkit-text-fill-color:#fff !important;}
.hero.cinema .hero-trust{color:rgba(255,255,255,.9) !important;}
.hero.cinema .hero-trust .ico{color:var(--accent-2);}
.hero.cinema .btn-ghost{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.45);}
.hero.cinema .btn-ghost:hover{background:rgba(255,255,255,.22); color:#fff; border-color:#fff;}
.hero.cinema .dash{background:var(--accent-2); opacity:.85;}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero{padding:80px 0 60px;}
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .hero-visual{order:-1;}
  .split{grid-template-columns:1fr; gap:34px;}
  .split.rev .split-media{order:0;}
  .cards{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .live-bar{grid-template-columns:repeat(2,1fr);}
  .cta{grid-template-columns:1fr; padding:44px 30px; text-align:center;}
  .cta-actions{align-items:stretch;}
}
@media (max-width:600px){
  body{font-size:16px; padding-bottom:78px;}
  .container{padding:0 18px;}
  .cards{grid-template-columns:1fr;}
  .stats-grid,.live-bar{grid-template-columns:1fr 1fr;}
  .section{padding:64px 0;}
  .hero-float{left:10px; right:10px; bottom:12px;}
  .sf-sticky-cta a.tel .tel-text{display:none;}
}

/* ============================================================
   READABILITY-HARDENING — schlägt unified-nav.js !important-Farben
   (Buttons/Icons/Eyebrow wurden grau erzwungen)
   2026-06-08
   ============================================================ */
/* Hero-Eyebrow: kräftige dunkle Pille + weiße Schrift (über hellem Video lesbar) */
.hero.cinema .eyebrow{ background:rgba(12,9,24,.74) !important; color:#fff !important; border-color:rgba(255,255,255,.5) !important; }
.hero.cinema .eyebrow *{ color:#fff !important; }
.hero.cinema .eyebrow .dot{ background:var(--accent-2) !important; }
/* Button-Icons folgen der Button-Textfarbe statt grau */
.btn .ico, .btn-text .ico, .sf-sticky-cta a .ico{ color:inherit !important; -webkit-text-fill-color:currentColor !important; }
/* Primär-Buttons: weiß (Text + Icon) */
.btn-primary, .btn-primary .ico, .hero-actions .btn-primary, .hero-actions .btn-primary .ico{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
/* Hero-Ghost-Button weiß */
.hero.cinema .btn-ghost, .hero.cinema .btn-ghost .ico{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
/* Sticky-CTA: alles weiß (Text, Icon „call"/„chat", Telefonnummer) */
.sf-sticky-cta a.primary, .sf-sticky-cta a.primary .ico,
.sf-sticky-cta a.tel, .sf-sticky-cta a.tel .ico, .sf-sticky-cta a .tel-text{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
/* Karten-CTA „Detailseite öffnen" in Akzent-Lavendel statt grau */
.card .btn-text, .card .btn-text .ico{ color:var(--accent) !important; -webkit-text-fill-color:var(--accent) !important; }
/* CTA-Band-Buttons */
.cta .btn-primary, .cta .btn-primary .ico{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
.cta .btn-ghost, .cta .btn-ghost .ico{ color:var(--accent) !important; -webkit-text-fill-color:var(--accent) !important; }