/* ============================================================
   Komponente: auswahl-control (checkbox und radio)
   ------------------------------------------------------------
   Quelle: Figma „Design System"
     · checkbox  714:2932  (zustand=aus / an)
     · radio     11753:249 (zustand=aus / an)
   ausgelesen am 04.09.2026.

   Zwei Geschwister mit derselben Aufgabe in zwei Ausprägungen:
   Checkbox für Mehrfachauswahl, Radio für Einfachauswahl. Die
   Figma-Doku sagt es ausdrücklich: „gleiche Maße 22 x 22, Stroke
   INSIDE, gleiche Property zustand = aus | an. Nur die Form
   unterscheidet sich, die Rand-Tokens sind je Zustand
   identisch." Deshalb EINE Datei und nicht zwei.

   ------------------------------------------------------------
   DIE HIT-AREA IST 45, DIE GRAFIK BLEIBT 22
   Das Ziel liegt als unsichtbare Ebene zentriert um die Grafik
   und ragt heraus. Es zählt NIE als Layoutabstand (§11.2) — wer
   die 45 als Padding in die Komponente legt, verschiebt in der
   Filterzeile den Abstand zum Label von 12 auf 23.

   Dafür ist `.touch-target` aus base.css da: das ::after-Overlay
   vergrößert das Ziel, ohne die Box zu vergrößern.

   In einer Filterzeile ist ohnehin die GANZE ZEILE das Ziel; die
   Hit-Area hier ist für die Verwendung außerhalb einer Zeile,
   etwa eine einzelne Zustimmungs-Checkbox.

   ------------------------------------------------------------
   DISABLED ENTSTEHT NICHT HIER
   Beide Controls kennen nur aus und an. Der Disabled-Zustand
   entsteht in der Zeile darüber (filter-option-row.css) als
   Override — so steht es in der Figma-Doku.

   ZWEI SIGNALE, NICHT NUR FARBE (WCAG 1.4.1): der An-Zustand
   bringt Fläche, doppelten Rand UND einen Haken (Checkbox) oder
   einen Punkt (Radio).

   Setzt tokens.css und base.css voraus.

   VERWENDUNG
     <input class="auswahl-control auswahl-control--checkbox touch-target"
            type="checkbox">
     <input class="auswahl-control auswahl-control--radio touch-target"
            type="radio" name="sortierung">

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     22 x 22  Grafik.
     4        Eckenradius der Checkbox. Die Skala kennt 10 / 20 /
              voll — 4 steht nur an diesem Control.
     45       Hit-Area. Derselbe Wert wie Button small, die
              Icon-Buttons und facette header.
   ============================================================ */

.auswahl-control {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  flex-shrink: 0;

  width: 22px;                             /* gemessen, siehe Kopf */
  height: 22px;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;

  /* Der Rand liegt als innerer Schatten, nicht als border: der
     An-Zustand geht von 1 auf 2 px, und ein border würde dabei
     den Inhalt verschieben (§23.6). */
  --control-strich: var(--label-icon);
  --control-breite: var(--outline-default);
  box-shadow: inset 0 0 0 var(--control-breite) var(--control-strich);

  color: var(--label-outline-active);
}

.auswahl-control--checkbox {
  border-radius: 4px;                      /* gemessen, siehe Kopf */
}

.auswahl-control--radio {
  border-radius: var(--radius-full);
}

/* ------------------------------------------------------------
   An
   ------------------------------------------------------------ */

.auswahl-control:checked {
  background-color: var(--label-fill-active);
  --control-strich: var(--label-outline-active);
  --control-breite: var(--outline-active);
  box-shadow:
    inset 0 0 0 var(--control-breite) var(--control-strich),
    var(--glow-chip);
}

/* Der Haken. Als Maske über currentColor, damit er die
   Rand-Farbe erbt und in beiden Modes stimmt (AGENTS.md §16). */
.auswahl-control--checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4.2 3.6 6.8 9 1.2' stroke='%2356B2DD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 8px;
}

/* Der Punkt im Radio. */
.auswahl-control--radio:checked {
  background-image: radial-gradient(
    circle at center,
    currentColor 0 4px,
    transparent 4px
  );
}

/* ------------------------------------------------------------
   Zustände
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .auswahl-control:hover:not(:disabled):not(:checked) {
    --control-strich: var(--label-outline-active);
  }
}

.auswahl-control:disabled {
  --control-strich: var(--button-disabled-outline);
  background-color: transparent;
  background-image: none;
  box-shadow: inset 0 0 0 var(--outline-default) var(--button-disabled-outline);
  cursor: default;
}

.auswahl-control {
  transition:
    background-color calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out),
    box-shadow       calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .auswahl-control {
    transition: none;
  }
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Der Eckenradius 4 der Checkbox steht in keiner Skala. Die
     Radius-Tokens kennen sm (10), md (20) und full.
   · Der Haken liegt hier als Daten-URI mit fester Farbe, weil
     ein <input> kein Kind haben kann. Damit dreht er NICHT mit
     dem Mode mit — in Light bliebe er blau. Sauberer wäre ein
     <span> mit einem <svg> aus dem Sprite; das verlangt aber,
     die Checkbox als Label-plus-Span zu bauen. Zu entscheiden.
   · Hover steht nicht an der Komponente.
   ============================================================ */