/* ══════════════════════════════════════════════════
   THEME — Dark/Light Semantic Token Layer
   Light ist Standard. Die Werte stehen unter html[data-theme="light"]
   bzw. [data-theme="dark"], damit sie den seiteninternen :root-Block
   (gleiche Spezifität, aber später geladen) zuverlässig überschreiben.
   Das FOUC-Inline-Script setzt data-theme stets vor dem ersten Paint.
══════════════════════════════════════════════════ */

/* Fallback (falls data-theme fehlt) – semantische Rollen, Light */
:root {
  --bg:            #F7FAFC;
  --bg-elevated:   #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #EEF3F8;
  --text:          #0A1628;
  --text-muted:    #45566E;
  --text-faint:    #5C6B80;
  --border:        rgba(10,22,40,.12);
  --border-strong: rgba(10,22,40,.22);
  --accent:        #0B7FB8;
  --accent-soft:   rgba(11,127,184,.10);
  --header-bg:     rgba(247,250,252,.85);
}

/* ════════════════ LIGHT (Standard) ════════════════ */
html[data-theme="light"] {
  --bg:            #EEF2F7;   /* Seiten-Grundton (leicht kühl, nicht reinweiß) */
  --bg-elevated:   #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #E4EBF2;
  --text:          #0A1628;
  --text-muted:    #45566E;
  --text-faint:    #5C6B80;
  --border:        rgba(10,22,40,.12);
  --border-strong: rgba(10,22,40,.22);
  --accent:        #0B7FB8;   /* dunkleres Ice für AA auf Hell */
  --accent-soft:   rgba(11,127,184,.10);
  --header-bg:     rgba(10,22,40,.92);
  --shadow:        0 4px 24px rgba(10,22,40,.10);
  --shadow-lg:     0 16px 44px rgba(10,22,40,.16);

  /* Flächen-/Text-/Border-Rollen über die rohen Tokens (Light) */
  --navy:       #EEF2F7;   /* Sektion A */
  --navy-mid:   #FFFFFF;   /* Sektion B (alternierend, heller = erhaben) */
  --navy-card:  #FFFFFF;   /* Karten */
  --navy-light: #DCE5EF;
  --white:      #0A1628;   /* „weiße" Schrift → dunkel */
  --ice:        #0B7FB8;   /* Ice als Text/Akzent → AA-tauglich */
  --w80: #25344A;
  --w60: #45566E;
  --w20: rgba(10,22,40,.20);
  --w08: rgba(10,22,40,.10);
}

/* ════════════════ DARK ════════════════ */
html[data-theme="dark"] {
  --bg:            #0A1628;
  --bg-elevated:   #112240;
  --surface:       #112240;
  --surface-2:     rgba(255,255,255,.04);
  --text:          #FFFFFF;
  --text-muted:    rgba(255,255,255,.80);
  --text-faint:    rgba(255,255,255,.60);
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.20);
  --accent:        #4FC3F7;
  --accent-soft:   rgba(79,195,247,.06);
  --header-bg:     rgba(10,22,40,.92);
  --shadow:        0 4px 28px rgba(0,0,0,.35);
  --shadow-lg:     0 16px 48px rgba(0,0,0,.55);

  /* Originalpalette (Dark) */
  --navy:       #0A1628;
  --navy-mid:   #0D1E38;
  --navy-card:  #112240;
  --navy-light: #1A3058;
  --white:      #FFFFFF;
  --ice:        #4FC3F7;
  --w80: rgba(255,255,255,.80);
  --w60: rgba(255,255,255,.60);
  --w20: rgba(255,255,255,.20);
  --w08: rgba(255,255,255,.08);
}

/* ════════════════ DUNKLE INSELN im Light-Mode ════════════════
   Header, Mobile-Menü, Hero, Lightbox und Map-Popups bleiben in BEIDEN
   Themes dunkel. Daher hier lokal die rohen Tokens auf Dark zurücksetzen,
   damit Logo-/Nav-Text hell und Flächen dunkel bleiben.
   (Höhere Spezifität als html[data-theme] dank zusätzlicher Klasse.) */
html[data-theme="light"] .hdr,
html[data-theme="light"] .mob-menu,
html[data-theme="light"] .hero,
html[data-theme="light"] .page-hero,
html[data-theme="light"] .lp-hero,
html[data-theme="light"] .lb-profile-wrap,
html[data-theme="light"] .cookie-banner,
html[data-theme="light"] .maplibregl-popup-content {
  --navy:       #0A1628;
  --navy-mid:   #0D1E38;
  --navy-card:  #112240;
  --navy-light: #1A3058;
  --white:      #FFFFFF;
  --ice:        #4FC3F7;
  --text:       #FFFFFF;
  --text-muted: rgba(255,255,255,.80);
  --w80:  rgba(255,255,255,.80);
  --w60:  rgba(255,255,255,.60);
  --w08:  rgba(255,255,255,.08);
  --border: rgba(255,255,255,.08);
  --bg: #0A1628;
  --surface: #112240;
  --bg-elevated: #112240;
  --accent: #4FC3F7;
  --text-faint: rgba(255,255,255,.60);
  --header-bg: rgba(10,22,40,.92);
}
/* Hero-Textfarbe explizit hell (Hintergrund kommt aus den Token-Resets
   bzw. den seiteneigenen Literalen wie #020617 – nicht überschreiben). */
html[data-theme="light"] .hero,
html[data-theme="light"] .page-hero,
html[data-theme="light"] .lp-hero { color: #FFFFFF; }

/* ════════════════ THEME-TOGGLE BUTTON ════════════════ */
.theme-toggle {
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  border-radius: 8px;
  transition: background .2s ease, color .2s ease;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--accent-soft); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-toggle svg { width: 22px; height: 22px; display: block; overflow: visible; }

/* ── Animierter "Solar"-Toggle (Sonne ⇄ Mond) ──
   Sonnenkern + 8 Strahlen: scale 1↔0 (klappen ein/aus).
   Mond: wird via stroke-dasharray/-offset "gezeichnet" (pathLength 0→1).
   Dauer 0.7s wie in der Vorlage. */
.ts-icon path {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.ts-sun-core, .ts-sun-ray {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .7s ease, opacity .7s ease;
}
.ts-sun-ray { transform-origin: 12.4px 12.76px; }
.ts-moon {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset .7s ease, opacity .4s ease .15s;
  opacity: 0;
}
/* LIGHT (Standard): Sonne sichtbar, Mond eingeklappt */
html[data-theme="light"] .ts-sun-core,
html[data-theme="light"] .ts-sun-ray { transform: scale(1); opacity: 1; }
html[data-theme="light"] .ts-moon    { stroke-dashoffset: 60; opacity: 0; }
/* DARK: Sonne eingeklappt, Mond gezeichnet */
html[data-theme="dark"] .ts-sun-core,
html[data-theme="dark"] .ts-sun-ray  { transform: scale(0); opacity: 0; }
html[data-theme="dark"] .ts-moon     { stroke-dashoffset: 0; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ts-sun-core, .ts-sun-ray, .ts-moon { transition: none; }
}

/* Toggle sitzt im dunklen Header → Icon hell */
html[data-theme="light"] .hdr .theme-toggle { color: #FFFFFF; }

/* Sanfter Theme-Übergang (nur ohne Bewegungsreduktion) */
@media (prefers-reduced-motion: no-preference) {
  body { transition: background-color .3s ease, color .3s ease; }
}