/* ─────────────────────────────────────────────────────────────────────────────
   Ankreuzkästchen — die eine Fassung fürs ganze Haus.
   Stand: 2026-08-14

   Eingebunden von:
     admin/_layout.php     (alle Steuerwerk-Seiten)
     kundenbereich.html    (Kundenbereich, statisches HTML)
     onboarding.php        (Personalfragebogen, öffentlich)

   Vorher stand dieselbe Regel dreimal im Haus. Das hielt genau so lange, bis
   sich der Haken einmal ändert — deshalb hier, und nur hier.

   WICHTIG beim Ändern: Die drei Seiten hängen die Datei mit `?v=DATUM` ein.
   Ohne neues Datum bekommt niemand die Änderung zu sehen, denn KAS liefert
   ohne Cache-Control aus. Also Datum oben UND in allen drei Einbindungen
   hochsetzen.

   Warum das Systemkästchen weg ist: es sieht in jedem Browser anders aus und
   bringt die Farbe des Betriebssystems mit — unter macOS ein blaues Häkchen
   mitten im Coral des Hauses.

   Warum der Haken eine Maske ist und kein Bild: so trägt die Fläche darunter
   `var(--accent)` und folgt dem hellen wie dem dunklen Stand. Als Bild müsste
   die Farbe im Datenpfad stehen und wäre im Dunkelmodus falsch.

   Warum die Rückfallwerte: der Kundenbereich führt seine Farben nicht als
   Token. `var(--accent, #F0524B)` gilt dort also für den festen Wert und im
   Steuerwerk für den Token — eine Regel, zwei Häuser.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --stw-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6 9.4 17.5 19.5 7.2'/%3E%3C/svg%3E");
  --stw-strich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  flex:none;width:17px;height:17px;margin:0;padding:0;
  border:1.5px solid var(--line2,#dcdcd8);border-radius:5px;
  background:var(--card,#fff);
  position:relative;cursor:pointer;vertical-align:-3px;
  transition:border-color .16s ease, background-color .16s ease;
}

/* Drei Kästchen im Haus sind reine CSS-Kippschalter für Menüs (.menutoggle,
   .ev-toggle, .nm-toggle). Sie tragen `hidden` und dürfen nie zu sehen sein. */
input[type=checkbox][hidden]{display:none;}

/* Der Haken liegt als Maske über dem Kästchen und wird beim Überfahren von
   links nach rechts freigelegt. Der Pfad läuft in x nur vorwärts — das
   Freilegen sieht deshalb aus, als zöge man ihn mit der Hand. */
input[type=checkbox]::after{
  content:"";position:absolute;inset:-1px;
  background-color:var(--accent,#F0524B);
  -webkit-mask:var(--stw-haken) center/80% no-repeat;
          mask:var(--stw-haken) center/80% no-repeat;
  clip-path:inset(0 100% 0 0);opacity:0;
  transition:clip-path .3s cubic-bezier(.16,1,.3,1), opacity .12s ease;
}

input[type=checkbox]:hover:not(:disabled),
input[type=checkbox]:focus-visible{border-color:var(--accent,#F0524B);}
/* Andeutung: blasser als gesetzt — eine Vorschau, keine Aussage. */
input[type=checkbox]:hover:not(:disabled)::after,
input[type=checkbox]:focus-visible::after{clip-path:inset(0 0 0 0);opacity:.45;}
input[type=checkbox]:focus-visible{outline:2px solid var(--accent,#F0524B);outline-offset:2px;}

/* Steht NACH den Überfahren-Regeln: gleiche Spezifität, die spätere gewinnt —
   ein gesetzter Haken darf beim Überfahren nicht verblassen. */
input[type=checkbox]:checked{border-color:var(--accent,#F0524B);background:var(--err-bg,#fdeceb);}
input[type=checkbox]:checked::after{clip-path:inset(0 0 0 0);opacity:1;}

/* „Teilweise" (Alle-auswählen-Kopf im Mahnlauf): ein Strich, kein Haken — ein
   halber Haken hieße „halb erledigt" und wäre eine andere Aussage. */
input[type=checkbox]:indeterminate{border-color:var(--accent,#F0524B);background:var(--err-bg,#fdeceb);}
input[type=checkbox]:indeterminate::after{
  -webkit-mask:var(--stw-strich) center/80% no-repeat;
          mask:var(--stw-strich) center/80% no-repeat;
  clip-path:inset(0 0 0 0);opacity:1;
}

input[type=checkbox]:disabled{cursor:not-allowed;opacity:.45;background:var(--bg3,#f0efec);}

@media (prefers-reduced-motion:reduce){
  input[type=checkbox],input[type=checkbox]::after{transition:none;}
  input[type=checkbox]::after{clip-path:inset(0 0 0 0);}
}