/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   KÄSTCHEN IM DUNKELN — selbst gezeichnet, für jedes input[type=checkbox].

   Hell bleibt das native Kästchen des Betriebssystems, nur in der Marken-
   farbe getönt (forms.css, `accent-color`). Dort ist sein grauer Rand das
   Einzige, was ein weißes Kästchen auf weißem Grund sichtbar macht.
   Dunkel stört genau dieser Rand: Er flackert beim Umschalten und sieht in
   jedem Browser anders aus. Ein natives Kästchen kann ihn nicht verlieren,
   also wird es hier gezeichnet — global, damit jedes Werkzeug dasselbe Maß
   hat, ohne die Regel zu kennen.

   13 px: Das native Kästchen malt sich kleiner als seine Box, eine
   gezeichnete Fläche füllt sie ganz aus und wirkt deshalb größer. Ändern
   heißt: EINE Zahl hier, das Häkchen skaliert mit. */
.dunkel input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 13px;
    height: 13px;
    border: none;
    border-radius: 3px;
    background: #fff;   /* bewusst Weiß, kein Ton der Leiter: die Fläche des ungewählten Kästchens ist Papier */
    position: relative;
    margin: 0;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}
.dunkel input[type="checkbox"]:checked,
.dunkel input[type="checkbox"]:indeterminate { background: var(--akzent); }

/* Das Häkchen ist ein Bild im Hintergrund, mittig gesetzt — kein gedrehtes
   Winkel-Element, das man mit Nachkommastellen zentrieren müsste. Im Bild
   kann keine Rolle stehen; Weiß ist hier die Tinte auf dem Akzent. */
.dunkel input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 L4.8 8.5 L9.5 3.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
/* Unbestimmt (das Kopf-Kästchen einer Tabelle, wenn einige gewählt sind): ein Strich. */
.dunkel input[type="checkbox"]:indeterminate::after {
    content: "";
    position: absolute;
    left: 2.5px;
    top: 5.5px;
    width: 8px;
    height: 2px;
    background: var(--text-auf-akzent);
    border-radius: 1px;
}
.dunkel input[type="checkbox"]:disabled { opacity: 0.55; cursor: not-allowed; }
/* Der Haus-Fokus färbt den Rahmen — den gibt es hier nicht, also ein Ring. */
.dunkel input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}