/* ==========================================================================
   Schalter und Haken — das gemeinsame Aussehen für die ganze Bestell-Website
   ==========================================================================

   WOFÜR WAS. Es gibt genau zwei Bauteile, und die Wahl ist keine Geschmacksfrage:

   1. .djk-schalter  — der Schiebeschalter (Pille mit rundem Griff).
      NUR für Einstellungen, die SOFORT wirken und nirgends bestätigt werden:
      Meldungen aufs Handy, Neuigkeiten & Aktionen im Profil.
      Ein Schiebeschalter verspricht „ab jetzt gilt das" — dieses Versprechen darf
      keine Seite brechen, indem sie noch ein „Speichern" verlangt.

   2. .djk-haken     — das Kästchen mit Haken.
      Für alles, was Teil eines FORMULARS ist und erst beim Absenden gilt:
      die Einwilligung bei der Registrierung, die Haken im Checkout.
      Ein Kästchen sagt „ich merke mir das für gleich" — genau richtig hier.

   Beide sind ein echtes <input type="checkbox">, nur anders gezeichnet. Kein
   zusätzliches <span>, keine Nachbau-Logik: Tastatur, Vorlesehilfe und das
   Absenden des Formulars arbeiten unverändert weiter.

   NEUES BAUT DARAUF AUF. Wer einen weiteren Schalter braucht, nimmt eine dieser
   beiden Klassen — nicht ein neues Aussehen daneben.

   Markup, in beiden Fällen gleich:
     <label class="djk-schalter-zeile">
         <input type="checkbox" class="djk-schalter" name="…">
         <span>Beschriftung</span>
     </label>
*/

/* Die Zeile: Schalter links, Text daneben, beides zusammen anfassbar. */
.djk-schalter-zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    /* Der Text darf umbrechen, der Schalter niemals schrumpfen — sonst wird aus der
       Pille auf schmalen Handys ein Ei. */
    line-height: 1.45;
}
.djk-schalter-zeile > span { min-width: 0; }
.djk-schalter-zeile.djk-oben { align-items: flex-start; }
.djk-schalter-zeile.djk-oben > .djk-schalter,
.djk-schalter-zeile.djk-oben > .djk-haken { margin-top: 2px; }

/* --------------------------------------------------------------------------
   1. Der Schiebeschalter
   -------------------------------------------------------------------------- */
.djk-schalter {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    /* Die Mulde: heller Verlauf plus ein Schatten NACH INNEN — dadurch liegt der Griff
       sichtbar darin und schwebt nicht darüber. */
    background: linear-gradient(180deg, #ece6da 0%, #ded7c8 100%);
    box-shadow: inset 0 2px 4px rgba(46, 40, 31, .18);
    cursor: pointer;
    transition: background .22s ease;
}
.djk-schalter::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff 0%, #f4efe6 100%);
    box-shadow: 0 2px 5px rgba(46, 40, 31, .3);
    transition: transform .22s ease;
}
.djk-schalter:checked {
    background: linear-gradient(180deg, #57a874 0%, var(--djk-success) 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2);
}
.djk-schalter:checked::before { transform: translateX(22px); }
.djk-schalter:active::before { box-shadow: 0 1px 3px rgba(46, 40, 31, .35); }
.djk-schalter:disabled { opacity: .5; cursor: not-allowed; }
.djk-schalter:focus-visible { outline: 2px solid var(--djk-terracotta); outline-offset: 2px; }

/* Zweite Farbe für Schalter, die etwas SPERREN statt erlauben (z. B. „Nicht stören"). */
.djk-schalter.djk-schalter-warm:checked {
    background: linear-gradient(180deg, #e8865c 0%, var(--djk-terracotta) 100%);
}

/* --------------------------------------------------------------------------
   2. Das Kästchen mit Haken
   -------------------------------------------------------------------------- */
.djk-haken {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--djk-border);
    border-radius: 7px;
    background: linear-gradient(180deg, #fff 0%, #f7f2e8 100%);
    box-shadow: inset 0 1px 2px rgba(46, 40, 31, .08);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}
.djk-haken:checked {
    background: linear-gradient(180deg, #57a874 0%, var(--djk-success) 100%);
    border-color: var(--djk-success);
}
/* Der Haken selbst: zwei Striche, gedreht — kein Bild, keine Schriftart, nichts,
   was nachgeladen werden müsste. */
.djk-haken:checked::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(42deg);
}
.djk-haken:disabled { opacity: .5; cursor: not-allowed; }
.djk-haken:focus-visible { outline: 2px solid var(--djk-terracotta); outline-offset: 2px; }

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion: reduce) {
    .djk-schalter,
    .djk-schalter::before,
    .djk-haken { transition: none; }
}