/* Dark theme: warm, deep green-anthracite surfaces – intentionally designed, not inverted. */
html[data-theme="dark"] {
  --cream: #121814;
  --cream-deep: #18221c;
  --paper: #1d2922;
  --green: #dce8df;
  --green-deep: #fffaf1;
  --green-soft: #b8c8bd;
  --sage: #8ea48f;
  --sage-pale: #26372d;
  --sage-taupe: #2b3227;
  --warm: #e0b095;
  --apricot: #e9ae8b;
  --apricot-soft: #3a2d24;
  --border: rgba(226, 239, 229, 0.14);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] body {
  background: var(--cream);
  color: var(--green);
}

/* Header-Hintergrund ist hier identisch mit der Hero-Hintergrundfarbe
   (beide var(--cream) = #121814). Rand und Schatten aus dem Hell-Theme
   erzeugten deshalb einen sichtbaren dunklen Streifen direkt unter der
   Navbar, wo eigentlich keine Kante ist. */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .back-header {
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  box-shadow: none;
}

html[data-theme="dark"] .mobile-nav {
  background: rgba(18, 24, 20, 0.985);
}

html[data-theme="dark"] .menu-toggle {
  background: rgba(255, 255, 255, 0.05);
}

/* Light surfaces become deep, warm panels. */
html[data-theme="dark"] .about,
html[data-theme="dark"] .results-section,
html[data-theme="dark"] .instagram-section {
  background: #151f19;
}

/* Die Vertrauensleiste ist jetzt eine schwebende Karte auf dem Hero-Grund –
   die dunklen Tokens (--paper, --border, --shadow-lg) tragen sie selbst. */

/* The signet contains dark script strokes – render it as a soft warm-white
   silhouette so it stays legible on dark surfaces (no boxed background). */
html[data-theme="dark"] .brand-logo {
  filter: brightness(0) invert(0.93) sepia(0.14);
  opacity: 0.95;
}

html[data-theme="dark"] .floating-instagram {
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.4),
    0 14px 32px rgba(223, 173, 145, 0.3);
}

html[data-theme="dark"] .hero {
  background: var(--cream);
}

/* sage-pale (#26372d) → apricot-soft (#3a2d24), beides vorhandene Dark-Tokens.
   Der rechte Fensterrand mischt sich zu etwa #362b22 über #121814: warmes
   Lampenlicht, klar unterscheidbar vom Seitenhintergrund. */
html[data-theme="dark"] .hero-media {
  background: transparent;
}

html[data-theme="dark"] .hero-grid {
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .hero-image-frame {
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .process {
  background:
    radial-gradient(circle at 84% 13%, rgba(233, 174, 139, 0.07), transparent 28%),
    var(--cream-deep);
}

/* Buttons */
html[data-theme="dark"] .button-primary {
  background: #edf3ee;
  color: #18352b;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .button-primary:hover {
  background: #fffaf1;
}

html[data-theme="dark"] .button-secondary {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--green-deep);
}

html[data-theme="dark"] .button-secondary:hover {
  border-color: rgba(226, 239, 229, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .button-light {
  background: #fffaf1;
  color: #254438;
}

/* Dark bands keep their identity but sit deeper. */
html[data-theme="dark"] .dark-section,
html[data-theme="dark"] .primary-offer {
  background:
    radial-gradient(circle at 12% 0%, rgba(175, 193, 170, 0.09), transparent 30%),
    linear-gradient(135deg, #163027, #224539);
}

html[data-theme="dark"] .primary-offer {
  border-color: rgba(226, 239, 229, 0.18);
  background:
    radial-gradient(circle at 14% 4%, rgba(233, 174, 139, 0.1), transparent 34%),
    linear-gradient(145deg, #254d3f, #376957);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .offer-letter {
  background:
    radial-gradient(circle at 12% 8%, rgba(233, 174, 139, 0.14), transparent 32%),
    #2c241d;
  color: #fffaf1;
}

html[data-theme="dark"] .offer-details {
  background:
    radial-gradient(circle at 100% 0%, rgba(233, 174, 139, 0.12), transparent 32%),
    linear-gradient(145deg, #2a5948, #3b705b);
}

/* Process timeline (halo uses --timeline-track = --cream-deep, auto-themed) */
html[data-theme="dark"] .process-marker {
  background: #18231e;
  color: var(--green);
}

html[data-theme="dark"] .process-timeline-item.is-complete .process-marker {
  border-color: var(--apricot);
  background: var(--apricot);
  color: #254438;
}

html[data-theme="dark"] .process-timeline-item.is-active .process-marker {
  border-color: var(--sage);
  background: var(--sage-pale);
  color: var(--green-deep);
}

html[data-theme="dark"] .process-timeline::before {
  background: rgba(255, 255, 255, 0.13);
}

/* Cards, lists, panels */
html[data-theme="dark"] .offer-card {
  border-color: var(--border);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  box-shadow: var(--shadow-sm);
}

html[data-theme="dark"] .offer-card-highlight {
  background: linear-gradient(145deg, rgba(224, 176, 149, 0.08), rgba(255, 255, 255, 0.03));
}

html[data-theme="dark"] .offer-card p:not(.offer-card-meta),
html[data-theme="dark"] .results-list li {
  color: var(--green-soft);
}

html[data-theme="dark"] .faq-list {
  background: var(--paper);
}

html[data-theme="dark"] .final-cta-stage {
  border-color: rgba(233, 174, 139, 0.2);
  background:
    radial-gradient(circle at 14% 12%, rgba(233, 174, 139, 0.14), transparent 34%),
    linear-gradient(145deg, #33271f, #24261f);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .final-cta-stage h2 {
  color: #fffaf1;
}

html[data-theme="dark"] .qr-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    var(--paper);
}

html[data-theme="dark"] .qr-card img {
  border-radius: 8px;
  border-color: rgba(226, 239, 229, 0.2);
  background: #fff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

/* Legal pages */
html[data-theme="dark"] .legal-header {
  background: rgba(18, 24, 20, 0.92);
}

html[data-theme="dark"] .legal-notice {
  background: rgba(255, 255, 255, 0.045);
}

/* Theme slider */
html[data-theme="dark"] .theme-slider {
  border-color: rgba(226, 239, 229, 0.18);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .theme-slider-thumb {
  background: #0d1410;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .theme-slider-option {
  color: rgba(226, 239, 229, 0.62);
}

html[data-theme="dark"] .theme-slider-option:hover,
html[data-theme="dark"] .theme-slider-option[aria-checked="true"] {
  color: #fffaf1;
}

html[data-theme="dark"] .footer-bottom {
  color: rgba(226, 239, 229, 0.64);
}

/* Match the reduced desktop timeline treatment in the dark theme as well.
   The scroll fill stays warm, while each marker remains an outlined number. */
@media (min-width: 761px) {
  /* A calm, lighter field behind GewichtsGlück separates the main offer
     from the surrounding dark page without competing with its content. */
  html[data-theme="dark"] .offer-section {
    background:
      radial-gradient(circle at 16% 38%, rgba(142, 164, 143, 0.16), transparent 44%),
      linear-gradient(140deg, #17251e, #1d3026);
  }

  html[data-theme="dark"] .process-timeline::before {
    background: color-mix(in srgb, var(--sage) 48%, transparent);
  }

  html[data-theme="dark"] .process-marker {
    border-color: color-mix(in srgb, var(--sage) 72%, #18231e);
    background: #18231e;
    color: var(--green);
  }

  html[data-theme="dark"] .process-timeline-item.is-complete .process-marker,
  html[data-theme="dark"] .process-timeline-item.is-active .process-marker {
    border-color: var(--apricot);
    background: var(--apricot);
    color: #254438;
    box-shadow: none;
  }
}