/* ============================================================
   DARKMODE – Umschalter und dunkle Sonderregeln (Kern; geladen nur, wenn der Darkmode für die Version angeboten wird)
   Die dunklen Farb-Variablen kommen aus dem Plugin (includes/colors.php, im <head> als :root[data-mode="dark"]).
   ============================================================ */

:root[data-mode="dark"] {
  color-scheme: dark; /* Formularfelder, Scrollbalken */
}

/* Kurzer, weicher Farbwechsel beim Umschalten (Klasse setzt js/color-mode.js für ca. 0,4 s) */
:root.color-mode-anim,
:root.color-mode-anim *,
:root.color-mode-anim *::before,
:root.color-mode-anim *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease, stroke 0.35s ease, box-shadow 0.35s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  :root.color-mode-anim,
  :root.color-mode-anim *,
  :root.color-mode-anim *::before,
  :root.color-mode-anim *::after {
    transition: none !important;
  }
}

/* Google-Karte abdunkeln (nur Darkmode) */
:root[data-mode="dark"] iframe[src*="google.com/maps"] {
  filter: invert(0.92) hue-rotate(180deg);
}

/* ── Umschalter (Vorlage: Uiverse "Madflows", angepasst: per Tastatur bedienbar, Größe über --cm-h, hell = Sonne links, dunkel = Mond rechts) ── */

.color-mode-switch {
  --cm-h: 1.75rem; /* Höhe */
  --cm-w: calc(var(--cm-h) * 1.7); /* Breite (Vorlage: 2 × Höhe, auf Wunsch ca. 15 % kürzer) */
  --cm-border: calc(var(--cm-h) * 0.06); /* Rand der Spur */
  --cm-knob: calc(var(--cm-h) * 0.62); /* Durchmesser Sonne/Mond */
  --cm-gap: calc(var(--cm-h) * 0.1); /* Abstand Knopf zum Rand der Spur */
  --cm-light: #d8dbe0;
  --cm-dark: #28292c;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: var(--cm-w);
  height: var(--cm-h);
}

/* Das echte Feld liegt unsichtbar über dem Umschalter (fokussierbar und klickbar, im Gegensatz zu display: none) */
.color-mode-switch__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.color-mode-switch__slider {
  position: absolute;
  inset: 0;
  border: var(--cm-border) solid var(--cm-dark);
  border-radius: calc(var(--cm-h) / 2);
  background-color: var(--cm-light);
  transition: background-color 0.3s;
}

.color-mode-switch__slider::before {
  content: "";
  position: absolute;
  top: 50%; /* mittig in der Spur (mit translateY(-50%)) */
  left: var(--cm-gap);
  width: var(--cm-knob);
  height: var(--cm-knob);
  border-radius: 50%;
  background-color: var(--cm-dark);
  transform: translateY(-50%);
  transition: transform 0.3s, box-shadow 0.3s;
}

.color-mode-switch__input:checked ~ .color-mode-switch__slider {
  background-color: var(--cm-dark);
  border-color: var(--cm-light); /* hebt sich auch auf dunklem Grund ab */
}

.color-mode-switch__input:checked ~ .color-mode-switch__slider::before {
  /* Weg = Innenbreite der Spur − Knopf − beide Abstände */
  transform: translate(calc(var(--cm-w) - var(--cm-border) * 2 - var(--cm-knob) - var(--cm-gap) * 2), -50%);
  box-shadow: inset calc(var(--cm-knob) * 0.48) calc(var(--cm-knob) * -0.16) 0 0 var(--cm-light);
}

.color-mode-switch__input:focus-visible ~ .color-mode-switch__slider {
  outline: 2px solid var(--color-primary-text);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .color-mode-switch__slider,
  .color-mode-switch__slider::before {
    transition: none;
  }
}