/* ================================================================
   Light Theme — aktiv über :root[data-theme="light"] (Umschalter).
   Prinzip: Farb-Tokens hell überschreiben; Header + Hero werden
   ebenfalls hell (eigene Overrides weiter unten).
   ================================================================ */
:root[data-theme="light"] {
  --color-bg: #f5f3f0;
  --color-bg-alt: #ece7e1;
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #faf7f4;
  --color-surface: #ffffff;
  --color-border: #e5dfd7;
  --color-border-light: #d6cec4;
  --color-text: #1b1613;
  --color-text-secondary: #585049;
  --color-text-muted: #8b817a;
  --shadow-sm: 0 8px 20px rgba(30, 15, 8, 0.06);
  --shadow-md: 0 18px 40px rgba(30, 15, 8, 0.10);
  --shadow-lg: 0 32px 70px rgba(30, 15, 8, 0.14);
  --shadow-glow: 0 18px 45px rgba(var(--color-accent-rgb), 0.16);
}

/* Seitenhintergrund */
:root[data-theme="light"] body {
  background:
    radial-gradient(circle at top right, rgba(var(--color-accent-rgb), 0.06), transparent 22%),
    linear-gradient(180deg, #f7f5f2 0%, #f1ede8 100%);
}

/* Überschriften nutzen standardmäßig --color-white -> im Light dunkel */
:root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3,
:root[data-theme="light"] h4, :root[data-theme="light"] h5, :root[data-theme="light"] h6 {
  color: var(--color-text);
}
:root[data-theme="light"] .process-step__title { color: var(--color-text); }
:root[data-theme="light"] .footer__links a:hover { color: var(--color-accent); }

/* ---- Header hell ---- */
:root[data-theme="light"] .header { background: rgba(250, 248, 245, 0.72); border-bottom-color: rgba(30, 15, 8, 0.07); }
:root[data-theme="light"] .header--scrolled {
  background: rgba(250, 248, 245, 0.93);
  border-bottom-color: rgba(var(--color-accent-rgb), 0.18);
  box-shadow: 0 16px 40px rgba(30, 15, 8, 0.10);
}
:root[data-theme="light"] .header__nav-link:hover,
:root[data-theme="light"] .header__nav-link--active { color: var(--color-text); }
:root[data-theme="light"] .lang-switcher { background: rgba(0, 0, 0, 0.04); border-color: var(--color-border); }
:root[data-theme="light"] .lang-switcher__btn:hover { color: var(--color-text); }
:root[data-theme="light"] .lang-switcher__btn.active { color: var(--color-text); }
:root[data-theme="light"] .header__toggle { background: rgba(0, 0, 0, 0.04); border-color: var(--color-border); color: var(--color-text); }

/* ---- Hero hell ---- */
:root[data-theme="light"] .hero__bg img { opacity: 0.05; filter: grayscale(0.3) brightness(1.3); }
:root[data-theme="light"] .hero__bg::after {
  background:
    linear-gradient(105deg, rgba(247, 245, 242, 0.92) 0%, rgba(247, 245, 242, 0.78) 48%, rgba(247, 245, 242, 0.95) 100%),
    linear-gradient(180deg, rgba(247, 245, 242, 0.20) 0%, rgba(247, 245, 242, 0.50) 55%, var(--color-bg) 100%);
}
:root[data-theme="light"] .hero__subtitle { color: var(--color-text-secondary); }
:root[data-theme="light"] .hero__panel {
  background: linear-gradient(180deg, #ffffff 0%, #faf7f4 100%);
  border-color: var(--color-border);
}
:root[data-theme="light"] .hero__panel-tagline { color: var(--color-text); }
:root[data-theme="light"] .hero__metric { background: #ffffff; border-color: var(--color-border); }
:root[data-theme="light"] .hero__metric strong { color: var(--color-text); }

/* Service-Illustrationsflächen (hart dunkel) -> hell */
:root[data-theme="light"] .services-tabs__image,
:root[data-theme="light"] .services-accordion__body img {
  background:
    radial-gradient(circle at 70% 18%, rgba(var(--color-accent-rgb), 0.10), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f1ece6 100%);
}

/* Stats-Karte (hart rgba weiß) */
:root[data-theme="light"] .stats {
  background: linear-gradient(135deg, #ffffff, rgba(var(--color-accent-rgb), 0.05));
}

/* Sticky Mobile-CTA (hart dunkel) */
:root[data-theme="light"] .sticky-cta {
  background: rgba(255, 255, 255, 0.94);
  border-top-color: rgba(var(--color-accent-rgb), 0.16);
}

/* Fragenkatalog-Widget hell */
:root[data-theme="light"] .spf {
  --spf-bg: #ffffff;
  --spf-bg-2: #f4f1ed;
  --spf-line: #e5dfd7;
  --spf-ink: #1b1613;
  --spf-ink-2: #585049;
}

/* ---- Theme-Umschalter (Sonne/Mond) ---- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 34px; border: 1px solid var(--color-border);
  border-radius: 999px; background: transparent; color: var(--color-text-secondary);
  cursor: pointer; transition: color var(--transition-base), border-color var(--transition-base);
  flex: none;
}
.theme-toggle:hover { color: var(--color-text); border-color: var(--color-border-light); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle__moon { display: none; }
:root[data-theme="light"] .theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: inline-block; }

/* Text-Verlauf im Light-Mode kräftiger (heller Startton war blass auf Weiß) */
:root[data-theme="light"] .text-gradient {
  background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-accent) 55%, var(--color-accent-hover) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}