:root {
  color-scheme: dark;
  --color-surface-primary: #0a0a0a;
  --color-surface-secondary: #1c2b36;
  --color-surface-tertiary: #2d3a47;
  --color-text-primary: #ffffff;
  --color-text-secondary: #d1d5db;
  --color-text-tertiary: #a0a6ad;
  --color-accent-primary: #b7d900;
  --color-accent-primary-text: #1c2b36;
  --color-info: #e8a838;
  --color-success: #4caf50;
  --color-error: #e57373;
  --color-border-subtle: #2d3a47;
  --color-border-strong: #5a6470;
  --color-shadow: rgba(0, 0, 0, 0.5);
  --green: var(--color-accent-primary);
  --green-dark: #9fbf00;
  --schiefer: var(--color-surface-secondary);
  --schiefer-light: var(--color-surface-tertiary);
  --bernstein: var(--color-info);
  --sand: #f4f1ea;
  --nacht: var(--color-surface-primary);
  --charcoal: var(--color-surface-tertiary);
  --muted: var(--color-text-secondary);
  --white: var(--color-text-primary);
  --g200: #e5e7eb;
  --g300: #e5e7eb;
  --g400: #d1d5db;
  --g500: #a0a6ad;
  --g600: #4b5563;
  --g700: #374151;
  --g900: #111827;
  --trust-strip-sub-color: var(--color-text-secondary);
}

[data-theme='light'] {
  color-scheme: light;
  --color-surface-primary: #f4f1ea;
  --color-surface-secondary: #ffffff;
  --color-surface-tertiary: #ebe7dc;
  --color-text-primary: #1c2b36;
  --color-text-secondary: #5a6470;
  --color-text-tertiary: #5a6470;
  --color-accent-primary: #b7d900;
  --color-accent-primary-text: #1c2b36;
  --color-info: #e8a838;
  --color-success: #3a8c3f;
  --color-error: #c62828;
  --color-border-subtle: #ddd8cc;
  --color-border-strong: #1c2b36;
  --color-shadow: rgba(28, 43, 54, 0.15);
  --green-dark: #8faa00;
  --color-accent-on-light: #4f6000;
  --sand: #f4f1ea;
  --g200: #ddd8cc;
  --g300: #5a6470;
  --g400: #5a6470;
  --g500: #5a6470;
  --g600: #5a6470;
  --g700: #374151;
  --g900: #1c2b36;
  --bg: #f4f1ea;
  --shadow: 0 4px 24px var(--color-shadow);
  --trust-strip-sub-color: var(--color-text-secondary);
}

body {
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
}
[data-theme='light'] body {
  background: var(--color-surface-primary);
  color: var(--color-text-primary);
}
[data-theme='light'] nav {
  background: rgba(244, 241, 234, 0.97);
  border-bottom-color: var(--color-border-subtle);
}
[data-theme='light'] nav.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 20px var(--color-shadow);
}
[data-theme='light'] .mobile-menu.open,
[data-theme='light'] .mobile-bottom-bar,
[data-theme='light'] footer {
  background: var(--color-surface-secondary);
  border-color: var(--color-border-subtle);
}
[data-theme='light'] .hero,
[data-theme='light'] .preisanker-section,
[data-theme='light'] .compare-section,
[data-theme='light'] .faq,
[data-theme='light'] .fv-qualify-section,
[data-theme='light'] .trust-panel {
  background: var(--color-surface-primary) !important;
}
[data-theme='light'] .wizard-section,
[data-theme='light'] .foerder-section,
[data-theme='light'] .prozess,
[data-theme='light'] .quickstart-section,
[data-theme='light'] .blog-section,
[data-theme='light'] .fv-banner,
[data-theme='light'] .hero-friends,
[data-theme='light'] .contact {
  background: var(--color-surface-primary) !important;
}
[data-theme='light'] .pa-card,
[data-theme='light'] .blog-card,
[data-theme='light'] .foerder-grid,
[data-theme='light'] .foerder-result,
[data-theme='light'] .wizard-container,
[data-theme='light'] .contact-form,
[data-theme='light'] .qs-form {
  background: var(--color-surface-secondary) !important;
  border: 1px solid var(--color-border-subtle) !important;
  box-shadow: 0 8px 28px var(--color-shadow);
}
/* Dimensionierungs-Ergebnis (GF-Screenshot 2026-06-21): weisse Marken-Karten (Element 3)
   auf sandfarbener Wanne (.wiz-result-shell, Element 2), im unveraenderten weissen
   Seiten-Panel (.wizard-container, Element 1 - bleibt). Mehr Tiefe ueber staerkeren
   Karten-Schatten. Scoped: Foerderrechner (.foerder-result/.foerder-grid OHNE .wiz-*)
   + /preise (.pa-card) bleiben unberuehrt. */
[data-theme='light'] .wiz-result-shell {
  background: var(--color-surface-primary) !important;
  box-shadow: none !important;
}
[data-theme='light'] .wiz-brand-panel {
  background: var(--color-surface-secondary) !important;
  box-shadow:
    0 16px 38px var(--color-shadow),
    0 4px 10px var(--color-shadow) !important;
}
/* Ergebnis-Buttons (GF-Screenshot 2026-06-21): klar als Button erkennbar, erhaben auf der
   Sand-Wanne. Aeussere Ghost-Buttons (Neu berechnen / Weiter zur Foerderung) weiss; gruener
   Primaer-CTA behaelt Farbe, bekommt Tiefe. Scoped auf .wiz-result-shell (nur Wizard-Ergebnis). */
[data-theme='light'] .wiz-result-shell .btn-ghost {
  background: var(--color-surface-secondary) !important;
  border: 1px solid var(--color-border-subtle) !important;
  box-shadow:
    0 6px 18px var(--color-shadow),
    0 1px 3px var(--color-shadow) !important;
}
[data-theme='light'] .wiz-result-shell .btn-primary {
  box-shadow:
    0 6px 18px var(--color-shadow),
    0 1px 3px var(--color-shadow) !important;
}
[data-theme='light'] .pa-detail-inner,
[data-theme='light'] .pa-detail-arrow {
  background: var(--color-surface-secondary);
}
[data-theme='light'] .section-title,
[data-theme='light'] h1,
[data-theme='light'] h2,
[data-theme='light'] h3,
[data-theme='light'] h4,
[data-theme='light'] .pa-card h2,
[data-theme='light'] .pa-card h3,
[data-theme='light'] .footer-col h2,
[data-theme='light'] .footer-col h4,
[data-theme='light'] .trust-headline,
[data-theme='light'] .trust-usp-text strong,
[data-theme='light'] .pa-specs td:first-child {
  color: var(--color-text-primary) !important;
}
[data-theme='light'] p,
[data-theme='light'] .nav-links a,
[data-theme='light'] .mobile-menu a,
[data-theme='light'] .footer-col p,
[data-theme='light'] .footer-col a,
[data-theme='light'] .footer-tagline,
[data-theme='light'] .footer-legal a,
[data-theme='light'] .trust-sub,
[data-theme='light'] .trust-usp-text,
[data-theme='light'] .pa-kw,
[data-theme='light'] .pa-label,
[data-theme='light'] .pa-info,
[data-theme='light'] .pa-specs td {
  color: var(--color-text-secondary) !important;
}
[data-theme='light'] .hero-badge,
[data-theme='light'] .section-tag,
[data-theme='light'] .pa-modell {
  color: var(--color-accent-on-light) !important;
}
[data-theme='light'] .btn-primary:hover,
[data-theme='light'] .nav-cta:hover,
[data-theme='light'] .pa-header-cta:hover,
[data-theme='light'] .qs-nav-next:hover,
[data-theme='light'] .btn-submit-final:hover {
  filter: brightness(0.94);
}
[data-theme='light'] [style*='var(--bernstein)'] {
  color: var(--color-text-primary) !important;
}

.trust-strip-sub {
  color: var(--trust-strip-sub-color) !important;
}

.theme-toggle {
  border: 1px solid rgba(183, 217, 0, 0.35);
  background: rgba(183, 217, 0, 0.1);
  color: var(--green);
  border-radius: 999px;
  padding: 7px 12px;
  font:
    700 12px/1 'Inter',
    sans-serif;
  cursor: pointer;
  min-height: 34px;
}
.theme-toggle:hover {
  border-color: var(--green);
  background: rgba(183, 217, 0, 0.18);
}
.theme-toggle:focus-visible {
  outline: 3px solid rgba(183, 217, 0, 0.45);
  outline-offset: 2px;
}
[data-theme='light'] .theme-toggle {
  color: var(--color-text-primary);
  background: var(--green);
  border-color: var(--green-dark);
}

:focus-visible {
  outline: 3px solid rgba(183, 217, 0, 0.65);
  outline-offset: 3px;
}

.answer-card:focus-visible,
.pa-card:focus-visible,
.manufacturer-tab:focus-visible {
  outline: 3px solid rgba(183, 217, 0, 0.75);
  outline-offset: 4px;
}

.nav-theme-standalone {
  display: none;
}

@media (max-width: 960px) {
  .nav-theme-standalone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: 8px;
  }
}

/* WCAG AA contrast fixes without splitting the dark palette.
   Default dark and explicit ?theme=dark use the same :root tokens; only light receives
   theme-specific color overrides. */
.trust-partner-label,
.rating-text {
  color: var(--g400) !important;
}
.rating-text strong {
  color: var(--g300) !important;
}

/* Light theme needs darker accent text on sand/white surfaces, but not on
   chartreuse-filled controls where the existing slate text remains correct. */
[data-theme='light'] a:not(.btn-primary):not(.nav-cta):not(.pa-header-cta),
[data-theme='light']
  [style*='var(--green)']:not([style*='background:var(--green)']):not(
    [style*='background: var(--green)']
  ) {
  color: var(--color-accent-on-light) !important;
}

[data-theme='light'] .trust-sub,
[data-theme='light'] .trust-usp-text,
[data-theme='light'] .trust-partner-label,
[data-theme='light'] .rating-text,
[data-theme='light'] [style*='var(--g300)'],
[data-theme='light'] [style*='var(--g400)'],
[data-theme='light'] [style*='var(--g500)'],
[data-theme='light'] [style*='var(--muted)'] {
  color: var(--color-text-secondary) !important;
}

/* Anfrage/Funnel keeps its canonical light form panel in both themes. Scope the
   greys to that panel so global dark tokens do not create pale text on white. */
.funnel-panel {
  --bg: #f7f9fb;
  --white: #ffffff;
  --g100: #f3f4f6;
  --g200: #e5e7eb;
  --g300: #6b7280;
  --g400: #5a6470;
  --g500: #5a6470;
  --g700: #374151;
  --g900: #111827;
  --schiefer: #1c2b36;
  --green-dark: #5f7200;
}

/* Hidden desktop trust rail: keep partner/rating chips AA-compliant when tested
   at wider viewports, without changing the funnel copy. */
.trust-panel .pb-vaillant {
  color: #ff6f8a !important;
}
.trust-panel .partner-badge[style*='0,106,179'] {
  color: #66b8e8 !important;
}

/* Mehrseiten-Umbau: Light-Theme contrast repairs for existing v4 component classes. */
[data-theme='light'] .hero-badge,
[data-theme='light'] .hero h1 .accent,
[data-theme='light'] .trust-item .check,
[data-theme='light'] .usp-icon,
[data-theme='light'] .ref-wp,
[data-theme='light'] .wr-card .wr-price,
[data-theme='light'] .foerder-result .fr-satz,
[data-theme='light'] .breakdown-item .pct,
[data-theme='light'] .seg-toggle button.active,
[data-theme='light'] .cc-highlight .cc-hl-label,
[data-theme='light'] .cc-highlight .cc-hl-val,
[data-theme='light'] .qs-reward span,
[data-theme='light'] .manufacturer-price,
[data-theme='light'] .pa-card .pa-price-compact,
[data-theme='light'] .pa-card .pa-modell,
[data-theme='light'] .pa-specs-sub,
[data-theme='light'] .pa-detail-cta .pa-big-price,
[data-theme='light'] .preisanker-fv strong,
[data-theme='light'] .pz-step .pz-time,
[data-theme='light'] .blog-card-tag,
[data-theme='light'] .blog-card .blog-link,
[data-theme='light'] .faq-toggle,
[data-theme='light'] .form-success h4,
[data-theme='light'] .hc-value.discount,
[data-theme='light'] .hc-result-value {
  color: var(--color-accent-on-light) !important;
}

[data-theme='light'] .hc-label,
[data-theme='light'] .hc-result-label,
[data-theme='light'] .qs-option.selected,
[data-theme='light'] .pz-step-num,
[data-theme='light'] .hf-step-num {
  color: var(--color-text-primary) !important;
}

[data-theme='light'] .hc-label-sub,
[data-theme='light'] .hc-value .unit,
[data-theme='light'] .hc-result-value .unit,
[data-theme='light'] .pz-expand-hint,
[data-theme='light'] .qs-option,
[data-theme='light'] .qs-form-hint,
[data-theme='light'] .pa-card .pa-kw,
[data-theme='light'] .pa-card .pa-label,
[data-theme='light'] .hf-step-text {
  color: var(--color-text-secondary) !important;
}

[data-theme='light'] .pa-card.dimmed .pa-modell {
  color: var(--color-accent-on-light) !important;
}
[data-theme='light'] .pa-card.dimmed .pa-kw,
[data-theme='light'] .pa-card.dimmed .pa-label,
[data-theme='light'] .pa-card.dimmed div {
  color: var(--color-text-secondary) !important;
}

[data-theme='light'] .pa-card h2,
[data-theme='light'] .wizard-card h3,
[data-theme='light'] .wr-card h3,
[data-theme='light'] .compare-card h3,
[data-theme='light'] .blog-card h3,
[data-theme='light'] .foerder-result .fr-row .fr-val,
[data-theme='light'] .cc-result-row .cc-val,
[data-theme='light'] .form-success h2,
[data-theme='light'] .form-success h4 {
  color: var(--color-text-primary) !important;
}

/* Umbau-Iteration 2: text on chartreuse surfaces always uses slate per
   LIGHT-MODE-SPEC; this prevents sand/green/grey text on accent-filled CTAs. */
[data-theme='light'] .btn-primary,
[data-theme='light'] .btn-primary *,
[data-theme='light'] .nav-cta,
[data-theme='light'] .nav-cta *,
[data-theme='light'] .wizard-btn-next,
[data-theme='light'] .wizard-btn-next *,
[data-theme='light'] .form-submit,
[data-theme='light'] .form-submit *,
[data-theme='light'] .pa-header-cta,
[data-theme='light'] .pa-header-cta *,
[data-theme='light'] .pa-bottom-cta--beratung,
[data-theme='light'] .pa-bottom-cta--beratung *,
[data-theme='light'] .pa-bottom-cta--wizard,
[data-theme='light'] .pa-bottom-cta--wizard * {
  color: var(--color-text-primary) !important;
}
[data-theme='light'] .pa-header-cta svg,
[data-theme='light'] .pa-header-cta svg *,
[data-theme='light'] .pa-bottom-cta svg,
[data-theme='light'] .pa-bottom-cta svg *,
[data-theme='light'] .btn-primary svg,
[data-theme='light'] .btn-primary svg *,
[data-theme='light'] .nav-cta svg,
[data-theme='light'] .nav-cta svg * {
  stroke: var(--color-text-primary) !important;
}

[data-theme='light'] .contact-form .form-group label,
[data-theme='light'] .contact-form .form-checkbox label,
[data-theme='light'] .preisanker-fv,
[data-theme='light'] .preisanker-fv *,
[data-theme='light'] .seg-toggle button,
[data-theme='light'] .seg-toggle button.active,
[data-theme='light'] .wizard-hint,
[data-theme='light'] .section-tag {
  color: var(--color-text-primary) !important;
}

[data-theme='light'] .seg-toggle,
[data-theme='light'] .wizard-option,
[data-theme='light'] .preisanker-fv {
  background-color: var(--color-surface-tertiary) !important;
}

/* Umbau-Iteration 2c: final light contrast fixes.
   K1: .nav-links a / .mobile-menu a have higher specificity than .nav-cta.
   K2: accent-green is AA on white/sand, but not on #EBE7DC surfaces. */
[data-theme='light'] .nav-links a.nav-cta,
[data-theme='light'] .mobile-menu a.nav-cta {
  color: var(--color-text-primary) !important;
}

[data-theme='light'] .preisanker-fv strong,
[data-theme='light'] .preisanker-fv a,
[data-theme='light'] .foerder-section .breakdown-item .pct,
[data-theme='light'] .foerder-section .seg-toggle button.active,
[data-theme='light'] .foerder-section [style*='var(--green)'] {
  color: var(--color-text-primary) !important;
}

/* Umbau-Iteration 2d: exact axe-rest nodes.
   F1: contact inputs kept dark-mode white text on light fields.
   F2: these three links/spans sit on #EBE7DC where #5F7200 is just below AA. */
[data-theme='light'] .contact-form input,
[data-theme='light'] .contact-form select,
[data-theme='light'] .contact-form textarea {
  color: var(--color-text-primary) !important;
}
[data-theme='light'] .contact-form input::placeholder,
[data-theme='light'] .contact-form textarea::placeholder {
  color: var(--color-text-secondary) !important;
}

[data-theme='light'] .preisanker-fv span > a[href$='anfrage'],
[data-theme='light'] #heizungsalterHinweis > span,
[data-theme='light'] #wpKostenPaket > a {
  color: var(--color-text-primary) !important;
}
[data-theme='light'] .preisanker-fv span > a[href$='anfrage'],
[data-theme='light'] #wpKostenPaket > a {
  text-decoration: underline !important;
}

/* Umbau-Iteration 2e: final exact E1 node.
   The generic light [style*='var(--green)'] rule above has higher specificity than
   the previous .preisanker-fv link override, so this selector includes the inline
   green style and exact funnel href to win the cascade on the #EBE7DC chip. */
[data-theme='light']
  .preisanker-fv
  span
  > a[href='/anfrage'][href$='anfrage'][style*='var(--green)'] {
  color: var(--color-text-primary) !important;
  text-decoration: underline !important;
}

[data-theme='light'] .hero-calc,
[data-theme='light'] .qs-form,
[data-theme='light'] .prozess-card,
[data-theme='light'] .pz-step,
[data-theme='light'] .blog-card {
  background: var(--color-surface-secondary) !important;
  color: var(--color-text-primary) !important;
}

/* SF2-F2-Nachschliff (Abnahme 27.06.): Prozess-Karten im Light-Mode OHNE weisse Box.
   Die unterschiedlich langen Aufklapp-Listen wirkten als ungleich hohe weisse Bloecke
   unprofessionell. Loesung: Karte transparent (wie Dark-Mode, das bleibt unveraendert);
   Titel/Text bleiben dunkles Slate (AA), nur das Haeken-Gruen auf Sand-tauglich dunkeln. */
[data-theme='light'] .pz-step {
  background: transparent !important;
}
[data-theme='light'] .pz-sub::before {
  color: var(--color-accent-on-light) !important;
}

/* Iteration 3: Light headlines use slate consistently; chartreuse remains dark-only accent. */
[data-theme='light'] .hero h1 .accent,
[data-theme='light'] .trust-headline em {
  color: var(--color-text-primary) !important;
}