/* =====================================================================
   Wiese Consulting — Theme-Varianten
   - body.theme-light : Variante B (helles, cremeweißes Layout)
   - .is-dark         : einzelne Abschnitte dunkel halten (Variante C / Hybrid)
   Lädt NACH style.css und überschreibt nur die Farbvariablen + wenige
   komponentenspezifische Flächen. Kein Eingriff in start.html (dunkel).
   ===================================================================== */

/* ---------------------------------------------------------------------
   VARIANTE B — Helles Theme
   --------------------------------------------------------------------- */
body.theme-light {
  --bg:        #F6F2EA;   /* warmes Creme als Grundfläche */
  --bg-deep:   #EDE7D9;   /* etwas tiefer für alternierende Sektionen/Footer */
  --bg-alt:    #F1ECDF;
  --surface:   #FFFFFF;   /* Karten: reines Weiß */
  --surface-2: #FFFFFF;
  --surface-hi:#FBF8F1;

  --cream:     #143A33;   /* = Primär-Textfarbe (tiefes Grün-Tinte) */
  --cream-2:   #45574F;   /* Sekundärtext */
  --muted:     #6E7E75;   /* Captions / tertiär */
  --line:      rgba(20,58,51,.14);
  --line-2:    rgba(20,58,51,.22);

  --emerald:   #0B7150;   /* tiefes Smaragdgrün — Akzent + Buttons auf Hell */
  --emerald-2: #095C40;
  --emerald-ink:#FFFFFF;  /* weißer Text auf grünem Button */

  --header-bg: rgba(246,242,234,.82);
  --header-bg-scrolled: rgba(246,242,234,.94);
  --hero-overlay: rgba(20,58,51,.20);
  --chip-bg:   rgba(255,255,255,.88);
  --btn-primary-hover: #095C40;
  --btn-primary-glow: rgba(11,113,80,.45);
  --pill-ink:  #0A2C27;

  --shadow: 0 26px 50px -32px rgba(20,58,51,.40);
}

/* Weiße Karten auf Creme brauchen eine dezente Erhebung */
body.theme-light .pillar,
body.theme-light .roi__card,
body.theme-light .phase,

body.theme-light .form,
body.theme-light .demo {
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 38px -30px rgba(20,58,51,.45);
}

/* Hero-Glow dezenter auf hellem Grund */
body.theme-light .hero__glow {
  background: radial-gradient(circle at 70% 30%, rgba(11,113,80,.12), transparent 60%);
}

/* Formular-Hinweise: lesbar auf Hell */
body.theme-light .form__hint.is-error { color: #8d1f1e; background: rgba(226,75,74,.10); border-color: rgba(226,75,74,.35); }
body.theme-light .form__hint.is-ok    { color: #0a6a49; background: rgba(11,113,80,.10);  border-color: rgba(11,113,80,.35); }

/* Die „60-Sekunden"-Demo: heller Karten-Look statt Terminalfenster */
body.theme-light .demo { background: #FFFFFF; }
body.theme-light .demo__bar { background: #F3EFE6; }

/* ---------------------------------------------------------------------
   VARIANTE C — Hybrid: einzelne Abschnitte bleiben dunkel
   .is-dark setzt lokal das komplette dunkle Variablen-Set.
   --------------------------------------------------------------------- */
.is-dark {
  --bg:        #0E3D35;
  --bg-deep:   #0A2C27;
  --bg-alt:    #103F37;
  --surface:   #13473E;
  --surface-2: #13473E;
  --surface-hi:#185247;

  --cream:     #EDE7DC;
  --cream-2:   #C9CFC6;
  --muted:     #93A29A;
  --line:      rgba(237,231,220,.12);
  --line-2:    rgba(237,231,220,.20);

  --emerald:   #2FC08A;
  --emerald-2: #25A877;
  --emerald-ink:#0A2C27;

  --header-bg: rgba(14,61,53,.72);
  --header-bg-scrolled: rgba(10,44,39,.86);
  --hero-overlay: rgba(10,44,39,.55);
  --chip-bg:   rgba(10,44,39,.78);
  --btn-primary-hover: #38d199;
  --btn-primary-glow: rgba(47,192,138,.7);
  --pill-ink:  #0A2C27;

  --shadow: 0 24px 60px -28px rgba(0,0,0,.55);
}

/* Dunkle Blöcke malen ihre Fläche selbst (Hero ist sonst transparent) */
.is-dark.hero,
.hero.is-dark { background: var(--bg); }

/* Demo-Fenster im dunklen Block wieder im Terminal-Look */
.is-dark .demo { background: var(--bg-deep); }
.is-dark .demo__bar { background: transparent; }