/* ============================================================
   clean-light.css — Cleaner NeuraOne/Combo-Look NUR im Light-Mode.
   Greift ausschließlich unter :root[data-theme="light"].
   Dark-Mode + sämtliche Inhalte/Struktur bleiben unverändert.
   ============================================================ */

/* ---------- Typografie: Plus Jakarta Sans (der Clean-Look) ---------- */
:root[data-theme="light"] body,
:root[data-theme="light"] p,
:root[data-theme="light"] .hn-sub,
:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .btn{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
}
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] .heronew h1,
:root[data-theme="light"] .num-value,
:root[data-theme="light"] .ps-num{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif !important;
  letter-spacing:-.022em;
}

/* ---------- Seiten-Hintergrund: clean & kühl (warme Glows raus) ---------- */
:root[data-theme="light"]{ --page-bg:#eef3fa; }
:root[data-theme="light"] body{
  background:#eef3fa !important;
  background-image:none !important;
}

/* ---------- HERO clean (blau-grüner Verlauf statt warm) ---------- */
:root[data-theme="light"] .heronew{
  background:
    radial-gradient(120% 80% at 85% -10%,rgba(13,113,234,.10),transparent 60%),
    radial-gradient(90% 70% at 10% 0%,rgba(12,188,123,.08),transparent 55%),
    linear-gradient(180deg,#e7eff9 0%,#eef3fa 62%,#eef3fa 100%) !important;
}
:root[data-theme="light"] .heronew .hn-gridbg{
  background-image:
    linear-gradient(rgba(16,25,48,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,25,48,.045) 1px,transparent 1px);
}
/* Akzentwort: blau → grün (wie Combo-Light) */
:root[data-theme="light"] .heronew .hn-acc{
  background:linear-gradient(96deg,#0D71EA 0%,#0CBC7B 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;filter:none;
}

/* ---------- Buttons clean (Navy primär, weiße Ghost) ---------- */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .heronew .hn-bp{
  background:#0e1526 !important;color:#fff !important;border:none !important;
  box-shadow:0 14px 32px -16px rgba(16,25,48,.55) !important;
}
:root[data-theme="light"] .btn-primary:hover,
:root[data-theme="light"] .heronew .hn-bp:hover{ background:#1c2740 !important; }
:root[data-theme="light"] .btn-secondary,
:root[data-theme="light"] .heronew .hn-bg{
  background:#fff !important;color:#0e1526 !important;border:1px solid #e5ecf5 !important;
  box-shadow:0 1px 2px rgba(16,25,48,.05),0 8px 24px -16px rgba(16,25,48,.18) !important;
}

/* ---------- Eyebrows / Section-Labels clean ---------- */
:root[data-theme="light"] .eyebrow{ color:#0D71EA; }

/* ---------- Karten: cleane weiße Flächen mit weichem Schatten ---------- */
:root[data-theme="light"] .appcard{
  background:#fff !important;
  border:1px solid #e5ecf5 !important;
  border-top:3px solid var(--c,#0D71EA) !important;
  border-radius:22px !important;
  box-shadow:0 1px 2px rgba(16,25,48,.04),0 18px 40px -22px rgba(16,25,48,.22) !important;
}
/* generische Karten NUR in hellen Sektionen (nicht in tone-dark-Bändern) */
:root[data-theme="light"] section:not(.tone-dark) > .container > .card,
:root[data-theme="light"] section:not(.tone-dark) .pivot-card,
:root[data-theme="light"] .faq-item{
  background:#fff !important;
  border:1px solid #e5ecf5 !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(16,25,48,.04),0 12px 30px -20px rgba(16,25,48,.2) !important;
}

/* ---------- Proofstrip-/Kennzahlen: ruhiger blau-grüner Verlauf ---------- */
:root[data-theme="light"] .ps-num.brand-gradient,
:root[data-theme="light"] .num-value.brand-gradient{
  background-image:linear-gradient(100deg,#0e1526 0%,#0D71EA 60%,#0CBC7B 100%) !important;
}

/* ---------- Warme Sektions-Hintergründe neutralisieren (kühl & clean) ---------- */
/* nur helle Sektionen – tone-dark-Bänder & Solex-Band bleiben unberührt */
:root[data-theme="light"] .apps,
:root[data-theme="light"] .pivot,
:root[data-theme="light"] .group,
:root[data-theme="light"] .audience,
:root[data-theme="light"] .faq,
:root[data-theme="light"] .quote,
:root[data-theme="light"] .numbers,
:root[data-theme="light"] .steps,
:root[data-theme="light"] .selector,
:root[data-theme="light"] .mgsplit,
:root[data-theme="light"] .proofstrip{
  background:transparent !important;
  background-image:none !important;
}

/* ---------- Nav-CTA ebenfalls clean navy ---------- */
:root[data-theme="light"] header .btn-primary,
:root[data-theme="light"] .btn-primary.btn-sm{
  background:#0e1526 !important;color:#fff !important;
}

/* ---------- Hero-Aurora kühl statt warm (Peach-Glow raus) ---------- */
:root[data-theme="light"] .heronew .hn-a1{
  background:radial-gradient(circle,#a8c9ff,transparent 66%) !important; opacity:.5 !important;
}
:root[data-theme="light"] .heronew .hn-a2{
  background:radial-gradient(circle,#a6e8cd,transparent 66%) !important; opacity:.42 !important;
}

/* ---------- Hero-Eyebrow clean (warmen Ton raus, grüner Punkt) ---------- */
:root[data-theme="light"] .hn-eyebrow{
  background:#fff !important; border:1px solid #e5ecf5 !important; color:#51607a !important;
  box-shadow:0 1px 2px rgba(16,25,48,.05),0 8px 24px -16px rgba(16,25,48,.18) !important;
}
:root[data-theme="light"] .hn-eyebrow i{
  background:#0CBC7B !important; box-shadow:0 0 0 4px rgba(12,188,123,.16) !important;
}

/* ---------- Saubere Sektions-Übergänge (milchige page-bg-Fades raus) ---------- */
/* calm.css legt an dunklen Bändern helle Fade-Streifen an → im Clean-Look klare Kanten */
:root[data-theme="light"].calm section.tone-dark,
:root[data-theme="light"].calm .app-analyse.tone-dark{
  background-image:none !important;
}
/* Solex: nur den page-bg-Fade entfernen, blauen Verlauf behalten */
:root[data-theme="light"].calm.tc .solex{
  background:linear-gradient(135deg,#1f4a83 0%,#2c62b4 46%,#152a4d 100%) !important;
}
:root[data-theme="light"].calm.tb .solex{
  background:linear-gradient(135deg,#243a5e 0%,#2f5488 46%,#1a2740 100%) !important;
}

/* ---------- Karten: dezenter Hover-Lift (Interaktivität) ---------- */
:root[data-theme="light"] .appcard{ transition:transform .18s ease, box-shadow .18s ease; }
:root[data-theme="light"] .appcard:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(16,25,48,.05),0 26px 52px -24px rgba(16,25,48,.3) !important;
}
:root[data-theme="light"] .btn{ transition:transform .12s ease, background .15s ease, box-shadow .15s ease; }
:root[data-theme="light"] .btn-primary:hover{ transform:translateY(-1px); }