/* erscheinung – Dreifachschalter Hell | Automatisch | Dunkel als Segment (echte Radioknöpfe, Pfeiltasten gehen von selbst) */
@layer module {
  .segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fuellung); border: 0; margin: 0; }
  .segment label {
    display: inline-flex; align-items: center; justify-content: center;
    min-block-size: var(--tipp); padding: 0 var(--a3);
    border-radius: 999px; font-size: var(--fs-klein); font-weight: 600; white-space: nowrap;
    color: var(--text); cursor: pointer;
    transition: background-color var(--dauer) var(--kurve);
  }
  .segment input { position: absolute; opacity: 0; pointer-events: none; }
  .segment label:has(input:checked) { background: var(--aktiv-hg); color: var(--akzent-text); box-shadow: 0 1px 6px rgb(0 0 0 / .12); }
  .segment label:has(input:focus-visible) { outline: 3px solid var(--akzent); outline-offset: 2px; }
}