/* ===========================================================================
   Schalter wie auf dem iPhone - EINE Quelle für Admin und öffentliche Seiten (08.10.2026)
   Bis dahin stand er als .adm-switch in admin.css. Die Seite Preise braucht ihn ebenfalls (Schalter
   „Mit Vor-Ort-Paket“ in den Kalenderkarten, Entscheidung Dennis: „So ein Toggle wie beim iPhone“,
   „Gibt es schon im Admin Center“). Admin und Preise laden nur tokens.css gemeinsam, deshalb eine
   eigene kleine Datei; geladen von admin/_head.php und preise.php. Zwei Klassennamen, ein Aussehen:
   .adm-switch (Admin, Markup unverändert) und .nb-switch (öffentliche Seiten).

   Aufbau: <label class="nb-switch"><input type="checkbox" role="switch"> <span class="nb-switch__track"><span
   class="nb-switch__knob"></span></span> ... Text ... </label>. Die Checkbox bleibt bedienbar und fokussierbar,
   sie wird nur unsichtbar gemacht (nicht display:none - das nähme sie aus der Tab-Reihenfolge).
   Die Spur trägt im ausgeschalteten Zustand eine feine Kante: Nur ein hellgrauer Streifen auf Weiß erreicht
   keine 3:1 Kontrast (WCAG 1.4.11); Navy im eingeschalteten Zustand braucht sie nicht.
   =========================================================================== */
.adm-switch,
.nb-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.adm-switch input,
.nb-switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.adm-switch__track,
.nb-switch__track {
  position: relative; width: 44px; height: 26px; border-radius: 13px; flex: none;
  background: #cfd6de; box-shadow: inset 0 0 0 1px #8a93a5; transition: background .18s ease;
}
.adm-switch__knob,
.nb-switch__knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(4, 20, 38, .35); transition: transform .18s ease;
}
.adm-switch input:checked ~ .adm-switch__track,
.nb-switch input:checked ~ .nb-switch__track { background: var(--brand-navy); box-shadow: none; }
.adm-switch input:checked ~ .adm-switch__track .adm-switch__knob,
.nb-switch input:checked ~ .nb-switch__track .nb-switch__knob { transform: translateX(18px); }
/* Sichtbarer Fokus für die Tastatur - ohne ihn wäre der Schalter unbedienbar blind. */
.adm-switch input:focus-visible ~ .adm-switch__track,
.nb-switch input:focus-visible ~ .nb-switch__track { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .adm-switch__track, .nb-switch__track, .adm-switch__knob, .nb-switch__knob { transition: none; }
}

/* Zeilenform: Text links, Schalter rechts, die ganze Zeile ist die Fläche zum Antippen (die unsichtbare
   Checkbox liegt über der Zeile). Der Schalter steht im Markup vor dem Text und rückt per row-reverse nach rechts. */
.nb-switch--zeile { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 12px; width: 100%; }
.nb-switch--zeile input { inset: 0; width: 100%; height: 100%; }