/* Dunkle Ansicht (Schalter im Menü) – gilt für alle drei Designs, setzt nur Farben um.
   Logo-Schild, Partnerlogos und eingebettete Kalender bleiben bewusst hell. */
html.dunkel { color-scheme: dark; }
html.dunkel, html.dunkel body {
  --bg: #121315; --fl: #1c1d20; --fl2: #25272b; --hell: #1c1d20;
  --text: #f1f1ee; --muted: #a9a9a3; --line: #33353a;
  --akzent-dunkel: var(--akzent);
  --dunkel: #050506; --dunkel-text: #f1f1ee;
  --head-bg: #121315; --head-text: #f1f1ee; --foot-bg: #050506; --foot-text: #f1f1ee;
  --schatten: 0 18px 40px -22px rgba(0, 0, 0, .8);
}
html.dunkel body { background: var(--bg); color: var(--text); }
html.dunkel img { filter: brightness(.94); }
html.dunkel .schild img, html.dunkel .partner img, html.dunkel .foot-logo img { filter: none; }

/* Formulare */
html.dunkel .field input, html.dunkel .field select, html.dunkel .field textarea,
html.dunkel .eingabe-tabelle input, html.dunkel .eingabe-tabelle select, html.dunkel .wahl span,
html.dunkel .filter-suche input { background: var(--fl2); color: var(--text); border-color: #4a4c52; }
html.dunkel .field input:focus, html.dunkel .field select:focus, html.dunkel .field textarea:focus { border-color: var(--text); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
html.dunkel .hero-plakette { background: var(--fl2); }
html.dunkel .hero-plakette .figur { color: var(--text); }

/* Arena: Kopf und Hero sind ohnehin dunkel – nur Flächen anpassen */
html.dunkel .design-arena .hero-karte { background: var(--fl); color: var(--text); }
html.dunkel .design-arena .hero-karte .pfeil-kreis, html.dunkel .design-arena .btn-a .pfeil-kreis { background: #fff; color: #0d0d0d; }
html.dunkel .design-arena .hero-stufe { background: var(--fl2); border-color: var(--line); }

/* Halle: Akzent ist Schwarz – im Dunkeln wird daraus Hellgrau */
html.dunkel body.design-halle { --akzent: #f1f1ee; --akzent-dunkel: #f1f1ee; --akzent-text: #121212; --pill-bg: var(--fl2); --pill-text: var(--text); }
html.dunkel .design-halle .btn-a { background: #f1f1ee; color: #121212; }
html.dunkel .design-halle .btn-a:hover { background: #fff; }
html.dunkel .design-halle .btn-a .pfeil-kreis { background: #121212; color: #fff; }
html.dunkel .design-halle .btn-b { border-color: var(--text); }
html.dunkel .design-halle .btn-b .pfeil-kreis, html.dunkel .design-halle .unterseite .pfeil-kreis, html.dunkel .design-halle .hero-karte .pfeil-kreis { background: #f1f1ee; color: #121212; }
html.dunkel .design-halle .oberzeile, html.dunkel .design-halle .nav-top[aria-current],
html.dunkel .design-halle .bw-kontakt, html.dunkel .design-halle .anmelde-kasten,
html.dunkel .design-halle .hero-karte, html.dunkel .design-halle .laufband { background: var(--fl); color: var(--text); }
html.dunkel .design-halle .pill { border-color: var(--text); }
html.dunkel .design-halle .zahl b, html.dunkel .design-halle .schritt .nr, html.dunkel .design-halle .lb-punkt,
html.dunkel .design-halle .bw-kontakt .icon, html.dunkel .design-halle .leer-kasten > .icon, html.dunkel .design-halle .kalender-info > .icon,
html.dunkel .design-halle .video-karte > .icon, html.dunkel .design-halle .bw-termine .icon, html.dunkel .design-halle .person-kontakt .icon,
html.dunkel .design-halle .prose a:not(.btn) { color: var(--text); }
html.dunkel .design-halle .zahlen, html.dunkel .design-halle .fakten { border-color: var(--text); }
html.dunkel .design-halle .zurueck-btn { background: #f1f1ee; color: #121212; }
html.dunkel .design-halle .field input, html.dunkel .design-halle .field select, html.dunkel .design-halle .field textarea { border-color: #4a4c52; }
html.dunkel .design-halle .cd-teil, html.dunkel .design-halle .hero-karte-label { color: #121212; }