/* Zustands-Schicht für die Komponenten.

   Warum eine CSS-Datei statt Inline-Styles: Hover, Fokus, Aktiv und Disabled sind
   Pseudoklassen. Inline-Styles können sie nicht ausdrücken, deshalb hatten die
   Komponenten Hover über `useState` + `onMouseEnter` gelöst — das bleibt auf
   Touch nach dem Tippen hängen, feuert bei Tastaturfokus nie und erzeugt pro
   Mausbewegung ein React-Re-Render. Und der Fokus fehlte komplett, obwohl
   `--focus-ring` seit jeher im Token-System steht.

   Die Komponenten setzen weiterhin ihre Token-Werte inline (Variante, Größe).
   Zustände kommen ausschließlich von hier. */

/* ── Fokus: eine Regel für alles ─────────────────────────────────────────── */
/* :focus-visible statt :focus — Maus-Klicks bekommen keinen Ring, Tastatur schon. */
.ds-btn:focus-visible,
.ds-iconbtn:focus-visible,
.ds-tab:focus-visible,
.ds-menurow:focus-visible,
.ds-clickable:focus-visible,
.ds-field:focus-visible,
.ds-link:focus-visible{outline:none;box-shadow:var(--focus-ring-on-surface);border-radius:var(--r-ctl)}

/* Der versteckte Input trägt den Fokus, sichtbar ist die Attrappe daneben.
   Ohne diese Regel sehen Tastaturnutzer bei Checkbox, Radio und Switch gar nichts. */
.ds-control input:focus-visible + .ds-control-face{box-shadow:var(--focus-ring-on-surface)}

/* Auf der dunklen Markenfläche kehrt sich der Ring um. */
.ds-on-field:focus-visible{outline:none;box-shadow:var(--focus-ring-on-field)}

/* ── Button ──────────────────────────────────────────────────────────────── */
.ds-btn{transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.ds-btn:not(:disabled):hover{background:var(--ds-bg-hover,var(--surface-2))}
.ds-btn:not(:disabled):active{transform:scale(.98)}
.ds-btn:disabled{cursor:not-allowed;background:var(--surface-2);color:var(--text-3);border-color:var(--line);box-shadow:none;transform:none}
/* Nicht über opacity abdunkeln — das reißt jeden Kontrastwert mit runter. */
.ds-btn[aria-busy="true"]{cursor:progress}

/* ── IconButton ──────────────────────────────────────────────────────────── */
.ds-iconbtn{transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ds-iconbtn:not(:disabled):hover{background:var(--ds-bg-hover,var(--surface-2));color:var(--text-1)}
.ds-iconbtn[aria-pressed="true"]:not(:disabled):hover{background:var(--accent-dim);color:var(--accent-strong)}
.ds-iconbtn:disabled{cursor:not-allowed;color:var(--text-3)}

/* ── Eingabefelder ───────────────────────────────────────────────────────── */
.ds-field{transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.ds-field::placeholder{color:var(--text-3);opacity:1}
.ds-field:disabled{cursor:not-allowed;background:var(--surface-2);color:var(--text-3)}
.ds-field[aria-invalid="true"]{border-color:var(--danger)}
.ds-field[aria-invalid="true"]:focus-visible{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--danger)}

/* ── Checkbox / Radio / Switch ───────────────────────────────────────────── */
.ds-control{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  /* 44px Trefferfläche, ohne die 18px-Optik zu vergrößern. */
  min-height:44px}
.ds-control:has(input:disabled){cursor:not-allowed;color:var(--text-3)}
.ds-control-face{transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.ds-control:hover input:not(:disabled) + .ds-control-face{border-color:var(--accent)}
.ds-switch-knob{transition:transform var(--dur-fast) var(--ease)}
.ds-switch input:checked ~ .ds-switch-knob{transform:translateX(16px)}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.ds-tab{transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.ds-tab:hover{color:var(--text-1)}
.ds-tab[aria-selected="true"]{color:var(--accent-strong)}

/* ── Anklickbare Karte (KanbanCard) ──────────────────────────────────────── */
.ds-clickable{transition:box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.ds-clickable:hover{border-color:var(--line-strong);box-shadow:var(--shadow-pop);transform:translateY(-1px)}
.ds-clickable:active{transform:none}

/* ── Menüzeile im Webapp-Shell ───────────────────────────────────────────── */
.ds-menurow{transition:background var(--dur-fast) var(--ease)}
.ds-menurow:hover,.ds-menurow[aria-current="page"]{background:var(--surface-2)}

/* ── Sprungmarke ─────────────────────────────────────────────────────────── */
.ds-skip{position:absolute;left:-9999px;top:0;z-index:100}
.ds-skip:focus{left:16px;top:16px;width:auto;height:auto;padding:10px 16px;
  background:var(--surface);color:var(--text-1);border:1px solid var(--accent);
  border-radius:var(--r-ctl);box-shadow:var(--focus-ring-on-surface)}

/* ── Nur für Screenreader ────────────────────────────────────────────────── */
.ds-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

  /* lorem ipsum */