/* Coaching-Planet · Hell/Dunkel: Umschalter Auto - Hell - Dunkel (alle Layouts)
   Gilt in beiden Varianten und auf allen Seitentypen (oeffentlich, konto/admin, Anmeldung).
   Markup: zk_theme_knopf() in includes/zukunft.php, Verhalten: assets/js/zukunft-theme.js.
   Der Knopf ist ohne JavaScript verborgen (hidden). */

/* ---------- Hilfsklasse: nur fuer Screenreader ---------- */
.zk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- 1. Umschalter ---------- */
.zk-thema {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  min-height: 40px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--zk-hair-strong, rgba(255, 255, 255, .24)); background: var(--zk-chip-bg, rgba(255, 255, 255, .05)); color: var(--zk-thema-ink, var(--alp-text, #b8c4dc));
  font: 500 12px/1.2 var(--zk-mono, 'JetBrains Mono', Consolas, monospace); letter-spacing: .06em; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, box-shadow .2s;
}
.zk-thema[hidden] { display: none; }
.zk-thema:hover { border-color: var(--zk-cyan, #69e1f5); color: var(--zk-thema-ink-hover, var(--alp-heading, #eef3ff)); }
.zk-thema:focus-visible { outline: 2px solid var(--zk-cyan, #69e1f5); outline-offset: 3px; }
.zk-thema-ico { display: none; flex: none; }
html[data-theme-pref="auto"] .zk-thema-ico--auto,
html[data-theme-pref="light"] .zk-thema-ico--light,
html[data-theme-pref="dark"] .zk-thema-ico--dark { display: block; }
html:not([data-theme-pref]) .zk-thema-ico--auto { display: block; }
.zk-thema-text { white-space: nowrap; }
/* Kopfzeile: auf dem Desktop ganz rechts, schmal (nur Symbol) damit die Navigation Platz behaelt */
.alp-header .zk-thema { order: 9; margin-left: 4px; }
@media (min-width: 1361px) {
  .alp-header .zk-thema { min-width: 40px; justify-content: center; padding: 6px 10px; }
  .alp-header .zk-thema .zk-thema-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (max-width: 1360px) {
  /* Logo links, Umschalter und Menueknopf rechts */
  .alp-header .zk-thema { order: 0; margin-left: auto; }
}
@media (max-width: 380px) {
  .alp-header .zk-thema { padding: 6px 9px; gap: 6px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .zk-thema { transition: none; }
}
@media (forced-colors: active) {
  .zk-thema { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
}