Form primitives, keyboard-operable comboboxes, dialog focus, route states

Accessibility work on the UI layer, all of it rooted in one structural gap:
there were no form primitives, so every field was hand-assembled and every
field got the same details wrong.

Form primitives
- components/ui/Field.tsx (Field/TextField/SelectField/TextareaField) and
  Button.tsx. Field generates the control id with useId and derives htmlFor
  from it, which is what makes the association impossible to omit rather
  than merely conventional.
- 92 labels existed, 4 used htmlFor, and no input carried an id at all: a
  screen reader announced an unnamed edit box and clicking a label focused
  nothing. Now every label resolves to its control (0 unassociated), and the
  input class chain that appeared verbatim 85 times appears zero times.
- Field also takes a render prop, so Lookup, CountryPicker and Picklist get
  the same wiring instead of a second, partial solution.
- SearchInput replaces three hand-rolled copies of the icon-in-a-box search
  whose input had only a placeholder — not a label — and killed its own
  focus ring with outline-none and nothing in its place.
- Toggle groups (workdays, reorg change type) became fieldsets with
  aria-pressed; colour alone was carrying the selected state.

Comboboxes
- Lookup and CountryPicker were text inputs with a div of clickable buttons
  underneath: typeable, but no keyboard path to a result and nothing telling
  a screen reader a list had appeared. Both now carry role=combobox,
  aria-expanded/controls/activedescendant and listbox semantics, with arrow
  keys, Enter and Escape. Escape stops propagation, or it would close the
  surrounding dialog along with the dropdown.

Dialogs
- useDialogFocus centralises what Modal and SlideOver each owed the
  keyboard and neither provided beyond Escape: focus into the dialog on
  open, Tab and Shift+Tab cycling within it, focus restored to the trigger
  on close.
- SlideOver stays mounted for its transition, and aria-hidden does not
  remove anything from the tab order — so every closed panel was leaving
  invisible tab stops at the end of the page. `inert` fixes that.

Route states
- loading.tsx, error.tsx, not-found.tsx and global-error.tsx. Every page in
  the (app) group is server-rendered per request, so without loading.tsx a
  navigation showed nothing at all until the server answered, and a render
  error dropped the user on Next's own screen with no way back.

Tests
- 22 component tests (vitest jsdom project). Two of them found limits of the
  environment rather than of the code: jsdom implements neither `inert` nor
  scrollIntoView, so the inert test asserts the attribute and the missing
  scrollIntoView — which was taking the whole render down from inside an
  effect — is stubbed in the setup file.

components/audit/AuditFilters.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { Search } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
+import { FILTER_SELECT_CLASS } from "@/components/ui/Field";
+import { SearchInput } from "@/components/ui/SearchInput";
 
 const ACTIONS = [
   "Neueinstellung",
@@ -50,19 +51,12 @@ export function AuditFilters() {
 
   return (
     <div className="flex flex-wrap items-center gap-3">
-      <div className="flex min-w-[240px] flex-1 items-center gap-2 rounded border border-border bg-white px-3 py-2">
-        <Search className="h-4 w-4 shrink-0 text-ink-muted" />
-        <input
-          value={q}
-          onChange={(e) => setQ(e.target.value)}
-          placeholder="Objekt, Details, Benutzer:in…"
-          className="w-full text-sm text-ink outline-none placeholder:text-ink-muted"
-        />
-      </div>
+      <SearchInput label="Audit-Log durchsuchen" placeholder="Objekt, Details, Benutzer:in…" value={q} onChange={setQ} />
       <select
+        aria-label="Nach Aktion filtern"
         defaultValue={searchParams.get("action") ?? ""}
         onChange={(e) => updateParam("action", e.target.value)}
-        className="rounded border border-border bg-white px-3 py-2 text-sm text-ink"
+        className={FILTER_SELECT_CLASS}
       >
         <option value="">Alle Aktionen</option>
         {ACTIONS.map((a) => (

components/employees/AddDependentModal.tsx

@@ -3,6 +3,8 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { addEmployeeDependent } from "@/actions/employees";
+import { Button } from "@/components/ui/Button";
+import { SelectField, TextField } from "@/components/ui/Field";
 import { Modal } from "@/components/ui/Modal";
 import { useToast } from "@/components/ui/Toast";
 import { todayIso } from "@/lib/format";
@@ -83,61 +85,30 @@ export function AddDependentModal({
       title="Angehörige:n hinzufügen"
       footer={
         <>
-          <button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
+          <Button variant="ghost" onClick={onClose}>
             Abbrechen
-          </button>
-          <button
-            onClick={handleSubmit}
-            disabled={pending}
-            className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
-          >
+          </Button>
+          <Button onClick={handleSubmit} pending={pending}>
             Hinzufügen
-          </button>
+          </Button>
         </>
       }
     >
       <div className="flex flex-col gap-4">
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Wirksam ab*</label>
-          <input
-            type="date"
-            value={effectiveDate}
-            onChange={(e) => setEffectiveDate(e.target.value)}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          />
-        </div>
+        <TextField label="Wirksam ab" required type="date" value={effectiveDate} onChange={setEffectiveDate} />
         <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-          <div>
-            <label className="mb-1 block text-sm font-semibold text-ink">Vorname*</label>
-            <input value={firstName} onChange={(e) => setFirstName(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-          </div>
-          <div>
-            <label className="mb-1 block text-sm font-semibold text-ink">Nachname*</label>
-            <input value={lastName} onChange={(e) => setLastName(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-          </div>
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">SVNR</label>
-          <input value={svNummer} onChange={(e) => setSvNummer(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Geburtsdatum*</label>
-          <input type="date" value={birthDate} onChange={(e) => setBirthDate(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Verwandtschaftsverhältnis*</label>
-          <select
-            value={relationship}
-            onChange={(e) => setRelationship(e.target.value as RelationshipType)}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          >
-            {RELATIONSHIPS.map((r) => (
-              <option key={r} value={r}>
-                {r}
-              </option>
-            ))}
-          </select>
+          <TextField label="Vorname" required value={firstName} onChange={setFirstName} />
+          <TextField label="Nachname" required value={lastName} onChange={setLastName} />
         </div>
+        <TextField label="SVNR" inputMode="numeric" value={svNummer} onChange={setSvNummer} />
+        <TextField label="Geburtsdatum" required type="date" value={birthDate} onChange={setBirthDate} />
+        <SelectField
+          label="Verwandtschaftsverhältnis"
+          required
+          value={relationship}
+          onChange={(v) => setRelationship(v as RelationshipType)}
+          options={RELATIONSHIPS.map((r) => ({ value: r, label: r }))}
+        />
       </div>
     </Modal>
   );

components/employees/AngehoerigeSection.tsx

@@ -4,6 +4,7 @@ import { Plus, Trash2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { deleteEmployeeDependent } from "@/actions/employees";
+import { Button } from "@/components/ui/Button";
 import { useToast } from "@/components/ui/Toast";
 import { fmtDate, todayIso } from "@/lib/format";
 import type { Database } from "@/lib/supabase/types";
@@ -38,13 +39,9 @@ export function AngehoerigeSection({ employeeId, dependents, effectiveDate }: {
       <div className="mb-3 flex items-center justify-between">
         <h3 className="text-xs font-bold uppercase tracking-wide text-brand-700">Angehörige</h3>
         <div className="flex items-center gap-4">
-          <button
-            type="button"
-            onClick={() => setModalOpen(true)}
-            className="flex items-center gap-1 text-xs font-semibold text-brand-700 hover:text-brand-600"
-          >
+          <Button variant="ghost" size="sm" onClick={() => setModalOpen(true)} className="!px-1 text-brand-700 hover:!bg-transparent hover:underline">
             <Plus className="h-3.5 w-3.5" /> Hinzufügen
-          </button>
+          </Button>
           <span className="text-xs text-ink-muted">{dependents.length} Personen</span>
         </div>
       </div>
@@ -73,15 +70,15 @@ export function AngehoerigeSection({ employeeId, dependents, effectiveDate }: {
                   <td className="px-4 py-2.5 text-ink-body">{d.sv_nummer ?? "–"}</td>
                   <td className="px-4 py-2.5 text-ink-body">{fmtDate(d.birth_date)}</td>
                   <td className="px-4 py-2.5 text-right">
-                    <button
-                      type="button"
+                    <Button
+                      variant="icon"
                       onClick={() => handleDelete(d.id)}
-                      disabled={deletingId === d.id}
-                      aria-label="Angehörige:n entfernen"
-                      className="text-ink-muted hover:text-danger-solid disabled:opacity-50"
+                      pending={deletingId === d.id}
+                      aria-label={`${d.first_name} ${d.last_name} als Angehörige:n entfernen`}
+                      className="hover:!text-danger-solid"
                     >
                       <Trash2 className="h-3.5 w-3.5" />
-                    </button>
+                    </Button>
                   </td>
                 </tr>
               ))}

components/employees/EmployeeDetail.tsx

@@ -4,6 +4,7 @@ import { ArrowLeft, ArrowRightLeft, Clock, Pencil, RotateCcw, TrendingUp, XCircl
 import Link from "next/link";
 import { useState } from "react";
 import { Avatar } from "@/components/ui/Avatar";
+import { Button } from "@/components/ui/Button";
 import { StatusChip } from "@/components/ui/StatusChip";
 import { fmtFullName, tenure } from "@/lib/format";
 import type { Database } from "@/lib/supabase/types";
@@ -97,31 +98,34 @@ export function EmployeeDetail(props: EmployeeDetailProps) {
             )}
             {canEditData && <ActionButton icon={Pencil} label="Daten ändern" onClick={() => setPanel("daten")} />}
             {isActive && (
-              <button
+              <Button
+                variant="secondary"
+                size="sm"
                 onClick={() => setPanel("terminate")}
-                className="flex items-center gap-1.5 rounded border border-danger-solid px-3 py-1.5 text-sm font-semibold text-danger-solid hover:bg-danger-bg"
+                className="!border-danger-solid !text-danger-solid hover:!bg-danger-bg"
               >
                 <XCircle className="h-4 w-4" /> Austritt
-              </button>
+              </Button>
             )}
             {employee.status === "Ausgetreten" && (
-              <button
-                onClick={() => setPanel("rehire")}
-                className="flex items-center gap-1.5 rounded bg-brand-500 px-3 py-1.5 text-sm font-semibold text-white hover:bg-brand-600"
-              >
+              <Button size="sm" onClick={() => setPanel("rehire")}>
                 <RotateCcw className="h-4 w-4" /> Wiedereinstellen
-              </button>
+              </Button>
             )}
           </div>
         </div>
       </div>
 
-      <div className="flex gap-1 border-b border-border">
+      {/* Tabs, so the list gets the tablist role and each button says
+          whether it is the selected one. */}
+      <div role="tablist" aria-label="Mitarbeiterdetails" className="flex gap-1 overflow-x-auto border-b border-border">
         {TABS.map((t) => (
           <button
             key={t}
+            role="tab"
+            aria-selected={tab === t}
             onClick={() => setTab(t)}
-            className={`border-b-2 px-4 py-2 text-sm font-semibold ${
+            className={`whitespace-nowrap border-b-2 px-4 py-2 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-brand-500 ${
               tab === t ? "border-brand-500 text-brand-700" : "border-transparent text-ink-muted hover:text-ink"
             }`}
           >
@@ -166,8 +170,8 @@ export function EmployeeDetail(props: EmployeeDetailProps) {
 
 function ActionButton({ icon: Icon, label, onClick }: { icon: typeof ArrowRightLeft; label: string; onClick: () => void }) {
   return (
-    <button onClick={onClick} className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface">
+    <Button variant="secondary" size="sm" onClick={onClick}>
       <Icon className="h-4 w-4" /> {label}
-    </button>
+    </Button>
   );
 }

components/employees/EmployeeFilters.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { Search } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
+import { FILTER_SELECT_CLASS } from "@/components/ui/Field";
+import { SearchInput } from "@/components/ui/SearchInput";
 
 type EmployeeFiltersProps = {
   divisions: { id: string; name: string }[];
@@ -40,19 +41,15 @@ export function EmployeeFilters({ divisions, locations }: EmployeeFiltersProps)
 
   return (
     <div className="flex flex-wrap items-center gap-3">
-      <div className="flex min-w-[240px] flex-1 items-center gap-2 rounded border border-border bg-white px-3 py-2">
-        <Search className="h-4 w-4 shrink-0 text-ink-muted" />
-        <input
-          value={q}
-          onChange={(e) => setQ(e.target.value)}
-          placeholder="Name, Pers.-Nr., Titel…"
-          className="w-full text-sm text-ink outline-none placeholder:text-ink-muted"
-        />
-      </div>
+      <SearchInput label="Mitarbeiter:innen durchsuchen" placeholder="Name, Pers.-Nr., Titel…" value={q} onChange={setQ} />
+      {/* aria-label rather than a visible label: the filter bar is a single
+          horizontal row, and each select's first option already names it on
+          screen. */}
       <select
+        aria-label="Nach Bereich filtern"
         defaultValue={searchParams.get("division") ?? ""}
         onChange={(e) => updateParam("division", e.target.value)}
-        className="rounded border border-border bg-white px-3 py-2 text-sm text-ink"
+        className={FILTER_SELECT_CLASS}
       >
         <option value="">Alle Bereiche</option>
         {divisions.map((d) => (
@@ -62,9 +59,10 @@ export function EmployeeFilters({ divisions, locations }: EmployeeFiltersProps)
         ))}
       </select>
       <select
+        aria-label="Nach Status filtern"
         defaultValue={searchParams.get("status") ?? ""}
         onChange={(e) => updateParam("status", e.target.value)}
-        className="rounded border border-border bg-white px-3 py-2 text-sm text-ink"
+        className={FILTER_SELECT_CLASS}
       >
         <option value="">Alle Status</option>
         {STATUS_OPTIONS.map((s) => (
@@ -74,9 +72,10 @@ export function EmployeeFilters({ divisions, locations }: EmployeeFiltersProps)
         ))}
       </select>
       <select
+        aria-label="Nach Standort filtern"
         defaultValue={searchParams.get("location") ?? ""}
         onChange={(e) => updateParam("location", e.target.value)}
-        className="rounded border border-border bg-white px-3 py-2 text-sm text-ink"
+        className={FILTER_SELECT_CLASS}
       >
         <option value="">Alle Standorte</option>
         {locations.map((l) => (

components/employees/RoleEmploymentFields.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { SelectField } from "@/components/ui/Field";
 import type { CollectiveAgreement, Weekday, WorkerType } from "@/lib/supabase/types";
 
 const WEEKDAYS: Weekday[] = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
@@ -24,39 +25,41 @@ export function RoleEmploymentFields({ value, onChange }: { value: RoleEmploymen
   return (
     <div className="flex flex-col gap-3">
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-        <div>
-          <label className="mb-1 block text-xs font-semibold text-ink-muted">Angestellte:r / Arbeiter:in</label>
-          <select
-            value={value.workerType}
-            onChange={(e) => onChange({ workerType: e.target.value as WorkerType })}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          >
-            <option value="Angestellte:r">Angestellte:r</option>
-            <option value="Arbeiter:in">Arbeiter:in</option>
-          </select>
-        </div>
-        <div>
-          <label className="mb-1 block text-xs font-semibold text-ink-muted">Kollektivvertrag</label>
-          <select
-            value={value.collectiveAgreement}
-            onChange={(e) => onChange({ collectiveAgreement: e.target.value as CollectiveAgreement })}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          >
-            <option value="Handel">Handel</option>
-            <option value="Süßwaren">Süßwaren</option>
-          </select>
-        </div>
+        <SelectField
+          label="Angestellte:r / Arbeiter:in"
+          dense
+          value={value.workerType}
+          onChange={(v) => onChange({ workerType: v as WorkerType })}
+          options={[
+            { value: "Angestellte:r", label: "Angestellte:r" },
+            { value: "Arbeiter:in", label: "Arbeiter:in" },
+          ]}
+        />
+        <SelectField
+          label="Kollektivvertrag"
+          dense
+          value={value.collectiveAgreement}
+          onChange={(v) => onChange({ collectiveAgreement: v as CollectiveAgreement })}
+          options={[
+            { value: "Handel", label: "Handel" },
+            { value: "Süßwaren", label: "Süßwaren" },
+          ]}
+        />
       </div>
 
-      <div>
-        <label className="mb-1 block text-xs font-semibold text-ink-muted">Arbeitstage</label>
+      {/* Toggle group, not a set of fields: a fieldset names the group, and
+          aria-pressed is what tells a screen reader a day is selected —
+          colour alone does not. */}
+      <fieldset>
+        <legend className="mb-1 block text-xs font-semibold text-ink-muted">Arbeitstage</legend>
         <div className="flex flex-wrap gap-1.5">
           {WEEKDAYS.map((day) => (
             <button
               key={day}
               type="button"
+              aria-pressed={value.workDays.includes(day)}
               onClick={() => toggleWorkDay(day)}
-              className={`rounded-full px-3 py-1.5 text-xs font-semibold ${
+              className={`rounded-full px-3 py-1.5 text-xs font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 ${
                 value.workDays.includes(day) ? "bg-brand-500 text-white" : "border border-border text-ink-muted hover:bg-surface"
               }`}
             >
@@ -64,7 +67,7 @@ export function RoleEmploymentFields({ value, onChange }: { value: RoleEmploymen
             </button>
           ))}
         </div>
-      </div>
+      </fieldset>
 
       <div className="flex flex-col gap-2">
         <label className="flex items-center gap-2 text-sm text-ink-body">

components/employees/SvNummerField.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { TextField } from "@/components/ui/Field";
 import { formatSvnr, requiresAustrianSvnr, svnrErrorMessage, validateSvnr } from "@/lib/svnr";
 
 type SvNummerFieldProps = {
@@ -10,7 +11,7 @@ type SvNummerFieldProps = {
   locationCountry: string | null | undefined;
   /** ISO yyyy-mm-dd; enables the cross-check against the TTMMJJ tail. */
   birthDate?: string | null;
-  labelClassName?: string;
+  dense?: boolean;
 };
 
 /**
@@ -18,42 +19,28 @@ type SvNummerFieldProps = {
  * same rule. Errors are shown only once the field has been left, so the
  * message does not flash while the ten digits are still being typed.
  */
-export function SvNummerField({ value, onChange, locationCountry, birthDate, labelClassName }: SvNummerFieldProps) {
+export function SvNummerField({ value, onChange, locationCountry, birthDate, dense }: SvNummerFieldProps) {
   const [touched, setTouched] = useState(false);
   const applies = requiresAustrianSvnr(locationCountry);
   const error = applies && value.trim() !== "" ? validateSvnr(value, birthDate) : null;
-  const showError = touched && error !== null;
 
   return (
-    <div>
-      <label htmlFor="sv-nummer" className={labelClassName ?? "mb-1 block text-sm font-semibold text-ink"}>
-        SV-Nummer
-      </label>
-      <input
-        id="sv-nummer"
-        value={value}
-        inputMode="numeric"
-        placeholder={applies ? "1237 010180" : undefined}
-        onChange={(e) => onChange(e.target.value)}
-        onBlur={() => {
-          setTouched(true);
-          // Normalise to the conventional "NNNN TTMMJJ" spacing once the
-          // value is complete; anything else is left exactly as typed.
-          const formatted = formatSvnr(value);
-          if (formatted !== value) onChange(formatted);
-        }}
-        aria-invalid={showError || undefined}
-        aria-describedby={showError ? "sv-nummer-error" : undefined}
-        className={`w-full rounded border px-3 py-2 text-sm ${showError ? "border-danger-solid" : "border-border"}`}
-      />
-      {showError && (
-        <p id="sv-nummer-error" className="mt-1 text-xs font-semibold text-danger-text">
-          {svnrErrorMessage(error)}
-        </p>
-      )}
-      {applies && !showError && (
-        <p className="mt-1 text-xs text-ink-muted">10 Ziffern: laufende Nummer, Prüfziffer, Geburtsdatum (TTMMJJ).</p>
-      )}
-    </div>
+    <TextField
+      label="SV-Nummer"
+      dense={dense}
+      value={value}
+      onChange={onChange}
+      inputMode="numeric"
+      placeholder={applies ? "1237 010180" : undefined}
+      error={touched && error ? svnrErrorMessage(error) : null}
+      hint={applies ? "10 Ziffern: laufende Nummer, Prüfziffer, Geburtsdatum (TTMMJJ)." : undefined}
+      onBlur={() => {
+        setTouched(true);
+        // Normalise to the conventional "NNNN TTMMJJ" spacing once the value
+        // is complete; anything else is left exactly as typed.
+        const formatted = formatSvnr(value);
+        if (formatted !== value) onChange(formatted);
+      }}
+    />
   );
 }

components/employees/TitleFields.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Field } from "@/components/ui/Field";
 import { Picklist } from "@/components/ui/Picklist";
 import { TITLE_PREFIXES, TITLE_SUFFIXES } from "@/lib/titles";
 
@@ -11,14 +12,12 @@ export type TitleValue = { titlePrefix: string[]; titleSuffix: string[] };
 export function TitleFields({ value, onChange }: { value: TitleValue; onChange: (patch: Partial<TitleValue>) => void }) {
   return (
     <div className="flex flex-col gap-3">
-      <div>
-        <label className="mb-1 block text-xs font-semibold text-ink-muted">Titel (vorangestellt)</label>
-        <Picklist options={TITLE_PREFIXES} value={value.titlePrefix} onChange={(titlePrefix) => onChange({ titlePrefix })} />
-      </div>
-      <div>
-        <label className="mb-1 block text-xs font-semibold text-ink-muted">Titel (nachgestellt)</label>
-        <Picklist options={TITLE_SUFFIXES} value={value.titleSuffix} onChange={(titleSuffix) => onChange({ titleSuffix })} />
-      </div>
+      <Field label="Titel (vorangestellt)" dense>
+        {(p) => <Picklist {...p} options={TITLE_PREFIXES} value={value.titlePrefix} onChange={(titlePrefix) => onChange({ titlePrefix })} />}
+      </Field>
+      <Field label="Titel (nachgestellt)" dense>
+        {(p) => <Picklist {...p} options={TITLE_SUFFIXES} value={value.titleSuffix} onChange={(titleSuffix) => onChange({ titleSuffix })} />}
+      </Field>
     </div>
   );
 }

components/employees/panels/DatenAendernPanel.tsx

@@ -7,7 +7,9 @@ import { AngehoerigeSection } from "@/components/employees/AngehoerigeSection";
 import { RoleEmploymentFields, type RoleEmploymentValue } from "@/components/employees/RoleEmploymentFields";
 import { SvNummerField } from "@/components/employees/SvNummerField";
 import { TitleFields, type TitleValue } from "@/components/employees/TitleFields";
+import { Button } from "@/components/ui/Button";
 import { CountryPicker } from "@/components/ui/CountryPicker";
+import { Field, SelectField, TextField } from "@/components/ui/Field";
 import { SlideOver } from "@/components/ui/SlideOver";
 import { useToast } from "@/components/ui/Toast";
 import { UN_COUNTRIES } from "@/lib/countries";
@@ -151,149 +153,97 @@ export function DatenAendernPanel({
       subtitle={`${fmtFullName(employee.first_name, employee.last_name, employee.title_prefix, employee.title_suffix)} · ${employee.job_title}`}
       footer={
         <>
-          <button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
+          <Button variant="ghost" onClick={onClose}>
             Abbrechen
-          </button>
-          <button
+          </Button>
+          <Button
             onClick={handleSubmit}
-            disabled={pending || !svNummerOk}
+            pending={pending}
+            disabled={!svNummerOk}
             title={svNummerOk ? undefined : "Die SV-Nummer ist ungültig."}
-            className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
           >
             Speichern
-          </button>
+          </Button>
         </>
       }
     >
       <div className="flex flex-col gap-6">
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Wirksam ab*</label>
-          <input
-            type="date"
-            value={effectiveDate}
-            onChange={(e) => setEffectiveDate(e.target.value)}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          />
-        </div>
+        <TextField label="Wirksam ab" required type="date" value={effectiveDate} onChange={setEffectiveDate} />
 
         <div>
           <h3 className="mb-3 text-sm font-bold text-ink">Person</h3>
           <div className="flex flex-col gap-3">
             <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-              <div>
-                <label className="mb-1 block text-xs font-semibold text-ink-muted">Vorname</label>
-                <input value={firstName} onChange={(e) => setFirstName(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-              </div>
-              <div>
-                <label className="mb-1 block text-xs font-semibold text-ink-muted">Nachname</label>
-                <input value={lastName} onChange={(e) => setLastName(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-              </div>
+              <TextField label="Vorname" dense value={firstName} onChange={setFirstName} />
+              <TextField label="Nachname" dense value={lastName} onChange={setLastName} />
             </div>
             <TitleFields value={titles} onChange={updateTitles} />
             <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-              <div>
-                <label className="mb-1 block text-xs font-semibold text-ink-muted">Geschlecht</label>
-                <select value={gender} onChange={(e) => setGender(e.target.value as GenderType)} className="w-full rounded border border-border px-3 py-2 text-sm">
-                  <option value="m">männlich</option>
-                  <option value="w">weiblich</option>
-                </select>
-              </div>
-              <div>
-                <label className="mb-1 block text-xs font-semibold text-ink-muted">Geburtsdatum</label>
-                <input
-                  type="date"
-                  value={birthDate}
-                  onChange={(e) => setBirthDate(e.target.value)}
-                  className="w-full rounded border border-border px-3 py-2 text-sm"
-                />
-              </div>
-            </div>
-            <SvNummerField
-              value={svNummer}
-              onChange={setSvNummer}
-              locationCountry={locationCountry}
-              birthDate={birthDate || null}
-              labelClassName="mb-1 block text-xs font-semibold text-ink-muted"
-            />
-            <div>
-              <label className="mb-1 block text-xs font-semibold text-ink-muted">Staatsbürgerschaft</label>
-              <CountryPicker value={nationality} onChange={setNationality} countries={UN_COUNTRIES} placeholder="Staatsbürgerschaft suchen…" />
-            </div>
-            <div>
-              <label className="mb-1 block text-xs font-semibold text-ink-muted">Adresse (Straße und Hausnummer)</label>
-              <input value={address} onChange={(e) => setAddress(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
+              <SelectField
+                label="Geschlecht"
+                dense
+                value={gender}
+                onChange={(v) => setGender(v as GenderType)}
+                options={[
+                  { value: "m", label: "männlich" },
+                  { value: "w", label: "weiblich" },
+                ]}
+              />
+              <TextField label="Geburtsdatum" dense type="date" value={birthDate} onChange={setBirthDate} />
             </div>
+            <SvNummerField value={svNummer} onChange={setSvNummer} locationCountry={locationCountry} birthDate={birthDate || null} dense />
+            <Field label="Staatsbürgerschaft" dense>
+              {(p) => (
+                <CountryPicker {...p} value={nationality} onChange={setNationality} countries={UN_COUNTRIES} placeholder="Staatsbürgerschaft suchen…" />
+              )}
+            </Field>
+            <TextField label="Adresse (Straße und Hausnummer)" dense value={address} onChange={setAddress} />
             <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,2fr)] gap-3">
-              <div>
-                <label className="mb-1 block text-xs font-semibold text-ink-muted">Postleitzahl</label>
-                <input value={postalCode} onChange={(e) => setPostalCode(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-              </div>
-              <div>
-                <label className="mb-1 block text-xs font-semibold text-ink-muted">Ort</label>
-                <input value={city} onChange={(e) => setCity(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-              </div>
-            </div>
-            <div>
-              <label className="mb-1 block text-xs font-semibold text-ink-muted">Land</label>
-              <CountryPicker value={addressCountry} onChange={setAddressCountry} countries={UN_COUNTRIES} placeholder="Land suchen…" />
-            </div>
-            <div>
-              <label className="mb-1 block text-xs font-semibold text-ink-muted">E-Mail</label>
-              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-            </div>
-            <div>
-              <label className="mb-1 block text-xs font-semibold text-ink-muted">Telefon</label>
-              <input value={phone} onChange={(e) => setPhone(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
+              <TextField label="Postleitzahl" dense inputMode="numeric" value={postalCode} onChange={setPostalCode} />
+              <TextField label="Ort" dense value={city} onChange={setCity} />
             </div>
+            <Field label="Land" dense>
+              {(p) => <CountryPicker {...p} value={addressCountry} onChange={setAddressCountry} countries={UN_COUNTRIES} placeholder="Land suchen…" />}
+            </Field>
+            <TextField label="E-Mail" dense type="email" value={email} onChange={setEmail} />
+            <TextField label="Telefon" dense type="tel" value={phone} onChange={setPhone} />
           </div>
         </div>
 
         <div>
           <h3 className="mb-3 text-sm font-bold text-ink">Vertrag</h3>
           <div className="flex flex-col gap-3">
-            <div>
-              <label className="mb-1 block text-xs font-semibold text-ink-muted">Beschäftigungsausmaß</label>
-              <select
-                value={employmentType}
-                onChange={(e) => handleEmploymentTypeChange(e.target.value as EmploymentType)}
-                className="w-full rounded border border-border px-3 py-2 text-sm"
-              >
-                <option value="Vollzeit">Vollzeit</option>
-                <option value="Teilzeit">Teilzeit</option>
-              </select>
-            </div>
-            <div>
-              <label className="mb-1 block text-xs font-semibold text-ink-muted">Wochenstunden</label>
-              <input
-                type="number"
-                step="0.5"
-                value={weeklyHours}
-                disabled={employmentType === "Vollzeit"}
-                onChange={(e) => setWeeklyHours(e.target.value)}
-                className="w-full rounded border border-border px-3 py-2 text-sm disabled:bg-surface disabled:text-ink-muted"
-              />
-            </div>
-            <div>
-              <label className="mb-1 block text-xs font-semibold text-ink-muted">Vertragsart</label>
-              <select
-                value={contractType}
-                onChange={(e) => setContractType(e.target.value as ContractType)}
-                className="w-full rounded border border-border px-3 py-2 text-sm"
-              >
-                <option value="unbefristet">unbefristet</option>
-                <option value="befristet">befristet</option>
-              </select>
-            </div>
+            <SelectField
+              label="Beschäftigungsausmaß"
+              dense
+              value={employmentType}
+              onChange={(v) => handleEmploymentTypeChange(v as EmploymentType)}
+              options={[
+                { value: "Vollzeit", label: "Vollzeit" },
+                { value: "Teilzeit", label: "Teilzeit" },
+              ]}
+            />
+            <TextField
+              label="Wochenstunden"
+              dense
+              type="number"
+              step="0.5"
+              value={weeklyHours}
+              disabled={employmentType === "Vollzeit"}
+              onChange={setWeeklyHours}
+            />
+            <SelectField
+              label="Vertragsart"
+              dense
+              value={contractType}
+              onChange={(v) => setContractType(v as ContractType)}
+              options={[
+                { value: "unbefristet", label: "unbefristet" },
+                { value: "befristet", label: "befristet" },
+              ]}
+            />
             {contractType === "befristet" && (
-              <div>
-                <label className="mb-1 block text-xs font-semibold text-ink-muted">Befristet bis*</label>
-                <input
-                  type="date"
-                  value={contractEndDate}
-                  onChange={(e) => setContractEndDate(e.target.value)}
-                  className="w-full rounded border border-border px-3 py-2 text-sm"
-                />
-              </div>
+              <TextField label="Befristet bis" required dense type="date" value={contractEndDate} onChange={setContractEndDate} />
             )}
           </div>
         </div>

components/employees/panels/KarenzPanel.tsx

@@ -3,6 +3,8 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { adjustKarenzReturn, recordKarenzReturn, startKarenz } from "@/actions/employees";
+import { Button } from "@/components/ui/Button";
+import { SelectField, TextField, TextareaField } from "@/components/ui/Field";
 import { SegmentedControl } from "@/components/ui/SegmentedControl";
 import { SlideOver } from "@/components/ui/SlideOver";
 import { useToast } from "@/components/ui/Toast";
@@ -108,41 +110,33 @@ export function KarenzPanel({ open, onClose, employee }: { open: boolean; onClos
       subtitle={`${employee.first_name} ${employee.last_name} · ${employee.job_title}`}
       footer={
         <>
-          <button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
+          <Button variant="ghost" onClick={onClose}>
             Abbrechen
-          </button>
+          </Button>
+          {/* Karenz keeps the warning tone it uses everywhere else. */}
           {!isOnKarenz && (
-            <button onClick={handleStart} disabled={pending} className="rounded bg-warning-text px-4 py-2 text-sm font-semibold text-white disabled:opacity-50">
+            <Button onClick={handleStart} pending={pending} className="!bg-warning-text text-white hover:brightness-110">
               Karenz erfassen
-            </button>
+            </Button>
           )}
           {isOnKarenz && mode === "adjust" && (
-            <button onClick={handleAdjust} disabled={pending} className="rounded bg-warning-text px-4 py-2 text-sm font-semibold text-white disabled:opacity-50">
+            <Button onClick={handleAdjust} pending={pending} className="!bg-warning-text text-white hover:brightness-110">
               Speichern
-            </button>
+            </Button>
           )}
           {isOnKarenz && mode === "return" && (
-            <button onClick={handleReturn} disabled={pending} className="rounded bg-warning-text px-4 py-2 text-sm font-semibold text-white disabled:opacity-50">
+            <Button onClick={handleReturn} pending={pending} className="!bg-warning-text text-white hover:brightness-110">
               Wiedereintritt erfassen
-            </button>
+            </Button>
           )}
         </>
       }
     >
       {!isOnKarenz && (
         <div className="flex flex-col gap-4">
-          <div>
-            <label className="mb-1 block text-sm font-semibold text-ink">Karenzbeginn*</label>
-            <input type="date" value={karenzStart} onChange={(e) => setKarenzStart(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-          </div>
-          <div>
-            <label className="mb-1 block text-sm font-semibold text-ink">Geplante Rückkehr*</label>
-            <input type="date" value={plannedReturn} onChange={(e) => setPlannedReturn(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-          </div>
-          <div>
-            <label className="mb-1 block text-sm font-semibold text-ink">Anmerkung</label>
-            <textarea value={startNote} onChange={(e) => setStartNote(e.target.value)} rows={3} className="w-full rounded border border-border px-3 py-2 text-sm" />
-          </div>
+          <TextField label="Karenzbeginn" required type="date" value={karenzStart} onChange={setKarenzStart} />
+          <TextField label="Geplante Rückkehr" required type="date" value={plannedReturn} onChange={setPlannedReturn} />
+          <TextareaField label="Anmerkung" rows={3} value={startNote} onChange={setStartNote} />
         </div>
       )}
 
@@ -160,57 +154,40 @@ export function KarenzPanel({ open, onClose, employee }: { open: boolean; onClos
           {mode === "adjust" && (
             <>
               <p className="text-sm text-ink-muted">Aktuelles Rückkehrdatum: {fmtDate(employee.karenz_return_date)}</p>
-              <div>
-                <label className="mb-1 block text-sm font-semibold text-ink">Neues Rückkehrdatum*</label>
-                <input
-                  type="date"
-                  value={newReturnDate}
-                  onChange={(e) => setNewReturnDate(e.target.value)}
-                  className="w-full rounded border border-border px-3 py-2 text-sm"
-                />
-              </div>
+              <TextField label="Neues Rückkehrdatum" required type="date" value={newReturnDate} onChange={setNewReturnDate} />
               {diffDays !== 0 && (
                 <div className={`rounded px-3 py-2 text-sm ${diffDays > 0 ? "bg-warning-bg text-warning-text" : "bg-success-bg text-success-text"}`}>
                   {diffDays > 0 ? `Verlängerung um ${diffDays} Tage` : `Verkürzung um ${Math.abs(diffDays)} Tage`}
                 </div>
               )}
-              <div>
-                <label className="mb-1 block text-sm font-semibold text-ink">Grund/Anmerkung</label>
-                <textarea value={adjustNote} onChange={(e) => setAdjustNote(e.target.value)} rows={3} className="w-full rounded border border-border px-3 py-2 text-sm" />
-              </div>
+              <TextareaField label="Grund/Anmerkung" rows={3} value={adjustNote} onChange={setAdjustNote} />
             </>
           )}
 
           {mode === "return" && (
             <>
-              <div>
-                <label className="mb-1 block text-sm font-semibold text-ink">Rückkehrdatum*</label>
-                <input type="date" value={returnDate} onChange={(e) => setReturnDate(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-              </div>
-              <div>
-                <label className="mb-1 block text-sm font-semibold text-ink">Beschäftigungsausmaß</label>
-                <select
-                  value={employmentMode}
-                  onChange={(e) => setEmploymentMode(e.target.value as EmploymentMode)}
-                  className="w-full rounded border border-border px-3 py-2 text-sm"
-                >
-                  <option value="unverändert">unverändert</option>
-                  <option value="Vollzeit">Vollzeit (38,5h)</option>
-                  <option value="Teilzeit">Teilzeit-Elternteilzeit</option>
-                </select>
-              </div>
+              <TextField label="Rückkehrdatum" required type="date" value={returnDate} onChange={setReturnDate} />
+              <SelectField
+                label="Beschäftigungsausmaß"
+                value={employmentMode}
+                onChange={(v) => setEmploymentMode(v as EmploymentMode)}
+                options={[
+                  { value: "unverändert", label: "unverändert" },
+                  { value: "Vollzeit", label: "Vollzeit (38,5h)" },
+                  { value: "Teilzeit", label: "Teilzeit-Elternteilzeit" },
+                ]}
+              />
               {employmentMode === "Teilzeit" && (
-                <div>
-                  <label className="mb-1 block text-sm font-semibold text-ink">Wochenstunden (unter 38,5)*</label>
-                  <input
-                    type="number"
-                    step="0.5"
-                    max="38"
-                    value={weeklyHours}
-                    onChange={(e) => setWeeklyHours(e.target.value)}
-                    className="w-full rounded border border-border px-3 py-2 text-sm"
-                  />
-                </div>
+                <TextField
+                  label="Wochenstunden"
+                  required
+                  type="number"
+                  step="0.5"
+                  max="38"
+                  value={weeklyHours}
+                  onChange={setWeeklyHours}
+                  hint="Muss unter 38,5 liegen."
+                />
               )}
             </>
           )}

components/employees/panels/PromotePanel.tsx

@@ -3,6 +3,8 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { promoteEmployee } from "@/actions/employees";
+import { Button } from "@/components/ui/Button";
+import { SelectField, TextField } from "@/components/ui/Field";
 import { SlideOver } from "@/components/ui/SlideOver";
 import { useToast } from "@/components/ui/Toast";
 import type { Database, PaygradeType } from "@/lib/supabase/types";
@@ -56,47 +58,26 @@ export function PromotePanel({ open, onClose, employee }: { open: boolean; onClo
       subtitle={`${employee.first_name} ${employee.last_name} · ${employee.job_title}`}
       footer={
         <>
-          <button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
+          <Button variant="ghost" onClick={onClose}>
             Abbrechen
-          </button>
-          <button
-            onClick={handleSubmit}
-            disabled={pending}
-            className="rounded bg-purple-text px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
-          >
+          </Button>
+          {/* Promotion keeps its own purple, matching the Beförderung badge
+              used in the history tab. */}
+          <Button onClick={handleSubmit} pending={pending} className="!bg-purple-text text-white hover:brightness-110">
             Befördern
-          </button>
+          </Button>
         </>
       }
     >
       <div className="flex flex-col gap-4">
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Wirksam ab*</label>
-          <input
-            type="date"
-            value={effectiveDate}
-            onChange={(e) => setEffectiveDate(e.target.value)}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          />
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Neue Position*</label>
-          <input value={newTitle} onChange={(e) => setNewTitle(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Paygrade</label>
-          <select
-            value={paygrade}
-            onChange={(e) => setPaygrade(e.target.value as PaygradeType)}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          >
-            {PAYGRADES.map((p) => (
-              <option key={p.value} value={p.value}>
-                {p.label}
-              </option>
-            ))}
-          </select>
-        </div>
+        <TextField label="Wirksam ab" required type="date" value={effectiveDate} onChange={setEffectiveDate} />
+        <TextField label="Neue Position" required value={newTitle} onChange={setNewTitle} />
+        <SelectField
+          label="Paygrade"
+          value={paygrade}
+          onChange={(v) => setPaygrade(v as PaygradeType)}
+          options={PAYGRADES}
+        />
       </div>
     </SlideOver>
   );

components/employees/panels/RehirePanel.tsx

@@ -3,6 +3,8 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { rehireEmployee } from "@/actions/employees";
+import { Button } from "@/components/ui/Button";
+import { TextField } from "@/components/ui/Field";
 import { SlideOver } from "@/components/ui/SlideOver";
 import { useToast } from "@/components/ui/Toast";
 import { fmtDate } from "@/lib/format";
@@ -41,16 +43,12 @@ export function RehirePanel({ open, onClose, employee }: { open: boolean; onClos
       subtitle={`${employee.first_name} ${employee.last_name}`}
       footer={
         <>
-          <button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
+          <Button variant="ghost" onClick={onClose}>
             Abbrechen
-          </button>
-          <button
-            onClick={handleSubmit}
-            disabled={pending}
-            className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
-          >
+          </Button>
+          <Button onClick={handleSubmit} pending={pending}>
             Wiedereinstellen
-          </button>
+          </Button>
         </>
       }
     >
@@ -60,15 +58,7 @@ export function RehirePanel({ open, onClose, employee }: { open: boolean; onClos
           <p className="mt-1 text-ink">{employee.job_title}</p>
           <p className="text-xs text-ink-muted">Ausgetreten am {fmtDate(employee.exit_date)}</p>
         </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Wiedereintritt am*</label>
-          <input
-            type="date"
-            value={rehireDate}
-            onChange={(e) => setRehireDate(e.target.value)}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          />
-        </div>
+        <TextField label="Wiedereintritt am" required type="date" value={rehireDate} onChange={setRehireDate} />
       </div>
     </SlideOver>
   );

components/employees/panels/TerminatePanel.tsx

@@ -3,6 +3,8 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { terminateEmployee } from "@/actions/employees";
+import { Button } from "@/components/ui/Button";
+import { SelectField, TextField, TextareaField } from "@/components/ui/Field";
 import { SlideOver } from "@/components/ui/SlideOver";
 import { useToast } from "@/components/ui/Toast";
 import type { Database } from "@/lib/supabase/types";
@@ -53,16 +55,12 @@ export function TerminatePanel({ open, onClose, employee, directReportCount }: T
       subtitle={`${employee.first_name} ${employee.last_name} · ${employee.job_title}`}
       footer={
         <>
-          <button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
+          <Button variant="ghost" onClick={onClose}>
             Abbrechen
-          </button>
-          <button
-            onClick={handleSubmit}
-            disabled={pending}
-            className="rounded bg-danger-solid px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
-          >
+          </Button>
+          <Button variant="danger" onClick={handleSubmit} pending={pending}>
             Austritt bestätigen
-          </button>
+          </Button>
         </>
       }
     >
@@ -72,31 +70,16 @@ export function TerminatePanel({ open, onClose, employee, directReportCount }: T
             {directReportCount} direkte Berichte werden automatisch der nächsthöheren Führungskraft zugeordnet.
           </div>
         )}
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Austrittsdatum*</label>
-          <input
-            type="date"
-            value={exitDate}
-            onChange={(e) => setExitDate(e.target.value)}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          />
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Beendigungsart</label>
-          <select value={reason} onChange={(e) => setReason(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
-            {EXIT_REASONS.map((r) => (
-              <option key={r} value={r}>
-                {r}
-              </option>
-            ))}
-          </select>
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Anmerkung</label>
-          <textarea value={note} onChange={(e) => setNote(e.target.value)} rows={3} className="w-full rounded border border-border px-3 py-2 text-sm" />
-        </div>
-        <div>
-          <p className="mb-2 text-sm font-semibold text-ink">Offboarding-Checkliste</p>
+        <TextField label="Austrittsdatum" required type="date" value={exitDate} onChange={setExitDate} />
+        <SelectField
+          label="Beendigungsart"
+          value={reason}
+          onChange={setReason}
+          options={EXIT_REASONS.map((r) => ({ value: r, label: r }))}
+        />
+        <TextareaField label="Anmerkung" rows={3} value={note} onChange={setNote} />
+        <fieldset>
+          <legend className="mb-2 text-sm font-semibold text-ink">Offboarding-Checkliste</legend>
           <div className="flex flex-col gap-2">
             {CHECKLIST_ITEMS.map((item, i) => (
               <label key={item} className="flex items-center gap-2 text-sm text-ink-body">
@@ -109,7 +92,7 @@ export function TerminatePanel({ open, onClose, employee, directReportCount }: T
               </label>
             ))}
           </div>
-        </div>
+        </fieldset>
       </div>
     </SlideOver>
   );

components/employees/panels/TransferPanel.tsx

@@ -3,6 +3,8 @@
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import { transferEmployee } from "@/actions/employees";
+import { Button } from "@/components/ui/Button";
+import { SelectField, TextField } from "@/components/ui/Field";
 import { SlideOver } from "@/components/ui/SlideOver";
 import { useToast } from "@/components/ui/Toast";
 import type { Database } from "@/lib/supabase/types";
@@ -66,67 +68,42 @@ export function TransferPanel({ open, onClose, employee, divisions, departments,
       subtitle={`${employee.first_name} ${employee.last_name} · ${employee.job_title}`}
       footer={
         <>
-          <button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
+          <Button variant="ghost" onClick={onClose}>
             Abbrechen
-          </button>
-          <button
-            onClick={handleSubmit}
-            disabled={pending}
-            className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
-          >
+          </Button>
+          <Button onClick={handleSubmit} pending={pending}>
             Versetzen
-          </button>
+          </Button>
         </>
       }
     >
       <div className="flex flex-col gap-4">
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Wirksam ab*</label>
-          <input
-            type="date"
-            value={effectiveDate}
-            onChange={(e) => setEffectiveDate(e.target.value)}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          />
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Neuer Bereich*</label>
-          <select
-            value={divisionId}
-            onChange={(e) => {
-              setDivisionId(e.target.value);
-              setTeamId("");
-            }}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          >
-            {divisions.map((d) => (
-              <option key={d.id} value={d.id}>
-                {d.name}
-              </option>
-            ))}
-          </select>
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Neues Team*</label>
-          <select value={teamId} onChange={(e) => setTeamId(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
-            <option value="">Bitte wählen…</option>
-            {teamsInDivision.map((t) => (
-              <option key={t.id} value={t.id}>
-                {t.name}
-              </option>
-            ))}
-          </select>
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Neuer Titel (optional)</label>
-          <input
-            value={newTitle}
-            onChange={(e) => setNewTitle(e.target.value)}
-            placeholder={employee.job_title}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          />
-        </div>
-        <p className="text-xs text-ink-muted">Die neue Führungskraft wird automatisch anhand des Zielteams bestimmt.</p>
+        <TextField label="Wirksam ab" required type="date" value={effectiveDate} onChange={setEffectiveDate} />
+        <SelectField
+          label="Neuer Bereich"
+          required
+          value={divisionId}
+          onChange={(v) => {
+            setDivisionId(v);
+            setTeamId("");
+          }}
+          options={divisions.map((d) => ({ value: d.id, label: d.name }))}
+        />
+        <SelectField
+          label="Neues Team"
+          required
+          value={teamId}
+          onChange={setTeamId}
+          placeholder="Bitte wählen…"
+          options={teamsInDivision.map((t) => ({ value: t.id, label: t.name }))}
+        />
+        <TextField
+          label="Neuer Titel (optional)"
+          value={newTitle}
+          onChange={setNewTitle}
+          placeholder={employee.job_title}
+          hint="Die neue Führungskraft wird automatisch anhand des Zielteams bestimmt."
+        />
       </div>
     </SlideOver>
   );

components/employees/tabs/NotizenTab.tsx

@@ -3,6 +3,8 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { addEmployeeNote, completeEmployeeNote } from "@/actions/employees";
+import { Button } from "@/components/ui/Button";
+import { SelectField, TextField, TextareaField } from "@/components/ui/Field";
 import { useToast } from "@/components/ui/Toast";
 import { NOTE_CATEGORY_STYLES } from "@/lib/colors";
 import { fmtDate } from "@/lib/format";
@@ -65,35 +67,26 @@ export function NotizenTab({ employeeId, notes }: { employeeId: string; notes: N
 
       <div className="flex flex-col gap-3 rounded border border-border p-4">
         <h3 className="text-sm font-bold text-ink">Neue Notiz erfassen</h3>
-        <div>
-          <textarea
-            value={noteText}
-            onChange={(e) => setNoteText(e.target.value)}
-            rows={3}
-            placeholder="Notiz zum/zur Mitarbeiter:in … (z. B. Gesprächsinhalt, Vereinbarung, Beobachtung)"
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          />
-        </div>
+        <TextareaField
+          label="Notiztext"
+          rows={3}
+          value={noteText}
+          onChange={setNoteText}
+          placeholder="Notiz zum/zur Mitarbeiter:in … (z. B. Gesprächsinhalt, Vereinbarung, Beobachtung)"
+        />
         <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-          <div>
-            <label className="mb-1 block text-sm font-semibold text-ink">Kategorie</label>
-            <select value={category} onChange={(e) => setCategory(e.target.value as NoteCategory)} className="w-full rounded border border-border px-3 py-2 text-sm">
-              {CATEGORIES.map((c) => (
-                <option key={c} value={c}>
-                  {c}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div>
-            <label className="mb-1 block text-sm font-semibold text-ink">Wiedervorlage am (optional)</label>
-            <input type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-          </div>
+          <SelectField
+            label="Kategorie"
+            value={category}
+            onChange={(v) => setCategory(v as NoteCategory)}
+            options={CATEGORIES.map((c) => ({ value: c, label: c }))}
+          />
+          <TextField label="Wiedervorlage am (optional)" type="date" value={dueDate} onChange={setDueDate} />
         </div>
         <div className="flex justify-end">
-          <button onClick={handleSubmit} disabled={pending} className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50">
+          <Button onClick={handleSubmit} pending={pending}>
             Notiz speichern
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -116,14 +109,15 @@ export function NotizenTab({ employeeId, notes }: { employeeId: string; notes: N
               <p className="mt-1 text-sm text-ink">{n.note_text}</p>
               {n.due_date && !n.done && <p className="mt-1 text-xs text-warning-text">🔔 fällig {fmtDate(n.due_date)}</p>}
               {!n.done && (
-                <button
-                  type="button"
+                <Button
+                  variant="ghost"
+                  size="sm"
                   onClick={() => handleComplete(n.id)}
-                  disabled={completingId === n.id}
-                  className="mt-2 text-xs font-semibold text-success-text hover:underline disabled:opacity-50"
+                  pending={completingId === n.id}
+                  className="mt-2 !px-0 text-success-text hover:!bg-transparent hover:underline"
                 >
                   ✓ Erledigt
-                </button>
+                </Button>
               )}
             </li>
           ))}

components/employees/tabs/OrganisationTab.tsx

@@ -1,6 +1,7 @@
 import { Network } from "lucide-react";
 import Link from "next/link";
 import { Avatar } from "@/components/ui/Avatar";
+import { LINK_BUTTON_CLASS } from "@/components/ui/Button";
 
 type MiniEmployee = { id: string; first_name: string; last_name: string; job_title: string; status?: string };
 
@@ -22,10 +23,7 @@ export function OrganisationTab({ employeeId, manager, directReports, breadcrumb
         {/* ?focus= drives the same highlight/auto-expand path the org chart
             search already uses, so the person is unfolded and centred on
             arrival instead of the user hunting for them. */}
-        <Link
-          href={`/orgchart?focus=${employeeId}`}
-          className="flex items-center gap-1.5 rounded border border-border px-3 py-2 text-sm font-semibold text-ink-body hover:bg-surface"
-        >
+        <Link href={`/orgchart?focus=${employeeId}`} className={LINK_BUTTON_CLASS}>
           <Network className="h-4 w-4" />
           Im Organigramm anzeigen
         </Link>

components/hire/HireWizard.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 import { hireEmployee } from "@/actions/employees";
 import { deleteHireDraft, saveHireDraft } from "@/actions/hireDrafts";
+import { Button } from "@/components/ui/Button";
 import { Modal } from "@/components/ui/Modal";
 import { useToast } from "@/components/ui/Toast";
 import type { OpenPositionResolved } from "@/lib/positions";
@@ -123,51 +124,45 @@ export function HireWizard({ open, onClose, openPositions, locations, resumeDraf
       footer={
         <div className="flex w-full items-center justify-between">
           <div className="flex gap-2">
-            <button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
+            <Button variant="ghost" onClick={onClose}>
               Abbrechen
-            </button>
-            <button onClick={handleSaveDraft} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
+            </Button>
+            <Button variant="ghost" onClick={handleSaveDraft}>
               Als Entwurf speichern
-            </button>
+            </Button>
           </div>
           <div className="flex gap-2">
             {step > 0 && (
-              <button
-                onClick={() => setStep((s) => s - 1)}
-                className="rounded border border-border px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface"
-              >
+              <Button variant="secondary" onClick={() => setStep((s) => s - 1)}>
                 Zurück
-              </button>
+              </Button>
             )}
             {step < 3 && (
-              <button
-                onClick={() => setStep((s) => s + 1)}
-                disabled={!stepValid}
-                className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-40"
-              >
+              <Button onClick={() => setStep((s) => s + 1)} disabled={!stepValid}>
                 Weiter
-              </button>
+              </Button>
             )}
             {step === 3 && (
-              <button
-                onClick={handleSubmit}
-                disabled={submitting}
-                className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
-              >
+              <Button onClick={handleSubmit} pending={submitting}>
                 Anlegen
-              </button>
+              </Button>
             )}
           </div>
         </div>
       }
     >
+      {/* A progress trail, not navigation: only completed steps are
+          reachable, so the rest are genuinely disabled rather than inert
+          buttons that silently swallow a click. */}
       <div className="mb-6 flex items-center justify-center gap-3">
         {STEP_LABELS.map((label, i) => (
           <button
             key={label}
             type="button"
+            disabled={i >= step}
+            aria-current={i === step ? "step" : undefined}
             onClick={() => i < step && setStep(i)}
-            className={`flex items-center gap-2 text-xs font-semibold ${
+            className={`flex items-center gap-2 rounded text-xs font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 disabled:cursor-default ${
               i === step ? "text-brand-700" : i < step ? "text-ink-body" : "text-ink-muted"
             }`}
           >

components/hire/StepPerson.tsx

@@ -1,5 +1,6 @@
 import { SvNummerField } from "@/components/employees/SvNummerField";
 import { TitleFields } from "@/components/employees/TitleFields";
+import { SelectField, TextField } from "@/components/ui/Field";
 import type { HireDraftData } from "./types";
 
 type StepPersonProps = {
@@ -12,32 +13,22 @@ export function StepPerson({ draft, update, locations }: StepPersonProps) {
   return (
     <div className="flex flex-col gap-4">
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Vorname*</label>
-          <input value={draft.firstName} onChange={(e) => update({ firstName: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Nachname*</label>
-          <input value={draft.lastName} onChange={(e) => update({ lastName: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
-        </div>
+        <TextField label="Vorname" required value={draft.firstName} onChange={(firstName) => update({ firstName })} />
+        <TextField label="Nachname" required value={draft.lastName} onChange={(lastName) => update({ lastName })} />
       </div>
       <TitleFields value={draft} onChange={update} />
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Geschlecht*</label>
-          <select
-            value={draft.gender}
-            onChange={(e) => update({ gender: e.target.value as HireDraftData["gender"] })}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          >
-            <option value="m">männlich</option>
-            <option value="w">weiblich</option>
-          </select>
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Geburtsdatum*</label>
-          <input type="date" value={draft.birthDate} onChange={(e) => update({ birthDate: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
-        </div>
+        <SelectField
+          label="Geschlecht"
+          required
+          value={draft.gender}
+          onChange={(gender) => update({ gender: gender as HireDraftData["gender"] })}
+          options={[
+            { value: "m", label: "männlich" },
+            { value: "w", label: "weiblich" },
+          ]}
+        />
+        <TextField label="Geburtsdatum" required type="date" value={draft.birthDate} onChange={(birthDate) => update({ birthDate })} />
       </div>
       <SvNummerField
         value={draft.svNummer}
@@ -46,26 +37,17 @@ export function StepPerson({ draft, update, locations }: StepPersonProps) {
         birthDate={draft.birthDate || null}
       />
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">E-Mail (privat)</label>
-          <input type="email" value={draft.email} onChange={(e) => update({ email: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Telefon</label>
-          <input value={draft.phone} onChange={(e) => update({ phone: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
-        </div>
-      </div>
-      <div>
-        <label className="mb-1 block text-sm font-semibold text-ink">Standort*</label>
-        <select value={draft.locationId} onChange={(e) => update({ locationId: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
-          <option value="">Bitte wählen…</option>
-          {locations.map((l) => (
-            <option key={l.id} value={l.id}>
-              {l.name} ({l.country})
-            </option>
-          ))}
-        </select>
+        <TextField label="E-Mail (privat)" type="email" value={draft.email} onChange={(email) => update({ email })} />
+        <TextField label="Telefon" type="tel" value={draft.phone} onChange={(phone) => update({ phone })} />
       </div>
+      <SelectField
+        label="Standort"
+        required
+        value={draft.locationId}
+        onChange={(locationId) => update({ locationId })}
+        placeholder="Bitte wählen…"
+        options={locations.map((l) => ({ value: l.id, label: `${l.name} (${l.country})` }))}
+      />
     </div>
   );
 }

components/hire/StepPosition.tsx

@@ -1,4 +1,6 @@
 import { X } from "lucide-react";
+import { Button } from "@/components/ui/Button";
+import { Field, SelectField, TextField } from "@/components/ui/Field";
 import { Lookup } from "@/components/ui/Lookup";
 import { fmtDate } from "@/lib/format";
 import type { OpenPositionResolved } from "@/lib/positions";
@@ -20,23 +22,32 @@ export function StepPosition({ draft, update, openPositions }: StepPositionProps
 
   return (
     <div className="flex flex-col gap-4">
-      <div>
-        <label className="mb-1 block text-sm font-semibold text-ink">Position*</label>
-        {!selected ? (
-          <Lookup<OpenPositionResolved>
-            placeholder="Positionsname oder -nummer…"
-            onSearch={search}
-            onSelect={(p) => update({ positionId: p.id })}
-            renderResult={(p) => (
-              <div>
-                <div className="font-semibold text-ink">{p.title}</div>
-                <div className="text-xs text-ink-muted">
-                  {p.position_number} · {p.orgLabel}
+      {!selected ? (
+        <Field
+          label="Position"
+          required
+          hint={openPositions.length === 0 ? "Derzeit sind keine offenen Positionen vorhanden." : undefined}
+        >
+          {(p) => (
+            <Lookup<OpenPositionResolved>
+              {...p}
+              placeholder="Positionsname oder -nummer…"
+              onSearch={search}
+              onSelect={(pos) => update({ positionId: pos.id })}
+              renderResult={(pos) => (
+                <div>
+                  <div className="font-semibold text-ink">{pos.title}</div>
+                  <div className="text-xs text-ink-muted">
+                    {pos.position_number} · {pos.orgLabel}
+                  </div>
                 </div>
-              </div>
-            )}
-          />
-        ) : (
+              )}
+            />
+          )}
+        </Field>
+      ) : (
+        <div>
+          <p className="mb-1 block text-sm font-semibold text-ink">Position</p>
           <div className="flex items-center justify-between rounded border border-border bg-surface p-3">
             <div>
               <div className="text-sm font-semibold text-ink">{selected.title}</div>
@@ -45,31 +56,32 @@ export function StepPosition({ draft, update, openPositions }: StepPositionProps
               </div>
               <div className="text-xs text-ink-muted">Gültig ab {fmtDate(selected.valid_from)}</div>
             </div>
-            <button type="button" onClick={() => update({ positionId: "" })} aria-label="Auswahl aufheben">
-              <X className="h-4 w-4 text-ink-muted" />
-            </button>
+            <Button variant="icon" onClick={() => update({ positionId: "" })} aria-label="Auswahl aufheben">
+              <X className="h-4 w-4" />
+            </Button>
           </div>
-        )}
-        {openPositions.length === 0 && <p className="mt-1 text-xs text-ink-muted">Derzeit sind keine offenen Positionen vorhanden.</p>}
-      </div>
+        </div>
+      )}
 
-      <div>
-        <label className="mb-1 block text-sm font-semibold text-ink">Besetzung*</label>
-        <select
-          value={draft.besetzung}
-          onChange={(e) => update({ besetzung: e.target.value as HireDraftData["besetzung"] })}
-          className="w-full rounded border border-border px-3 py-2 text-sm"
-        >
-          <option value="">Bitte wählen…</option>
-          <option value="Extern">Extern</option>
-          <option value="Intern">Intern</option>
-        </select>
-      </div>
+      <SelectField
+        label="Besetzung"
+        required
+        value={draft.besetzung}
+        onChange={(v) => update({ besetzung: v as HireDraftData["besetzung"] })}
+        placeholder="Bitte wählen…"
+        options={[
+          { value: "Extern", label: "Extern" },
+          { value: "Intern", label: "Intern" },
+        ]}
+      />
 
-      <div>
-        <label className="mb-1 block text-sm font-semibold text-ink">Führungskraft</label>
-        <input value={selected?.managerName ?? "–"} disabled className="w-full rounded border border-border bg-surface px-3 py-2 text-sm text-ink-muted" />
-      </div>
+      <TextField
+        label="Führungskraft"
+        value={selected?.managerName ?? "–"}
+        onChange={() => {}}
+        disabled
+        hint="Ergibt sich aus der gewählten Position."
+      />
     </div>
   );
 }

components/hire/StepVertrag.tsx

@@ -1,4 +1,5 @@
 import { RoleEmploymentFields } from "@/components/employees/RoleEmploymentFields";
+import { SelectField, TextField } from "@/components/ui/Field";
 import type { PaygradeType } from "@/lib/supabase/types";
 import type { HireDraftData } from "./types";
 
@@ -22,72 +23,53 @@ export function StepVertrag({ draft, update }: { draft: HireDraftData; update: (
   return (
     <div className="flex flex-col gap-4">
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Eintrittsdatum*</label>
-          <input type="date" value={draft.entryDate} onChange={(e) => update({ entryDate: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Vertragsart</label>
-          <select
-            value={draft.contractType}
-            onChange={(e) => update({ contractType: e.target.value as HireDraftData["contractType"] })}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          >
-            <option value="unbefristet">unbefristet</option>
-            <option value="befristet">befristet</option>
-          </select>
-        </div>
+        <TextField label="Eintrittsdatum" required type="date" value={draft.entryDate} onChange={(entryDate) => update({ entryDate })} />
+        <SelectField
+          label="Vertragsart"
+          value={draft.contractType}
+          onChange={(v) => update({ contractType: v as HireDraftData["contractType"] })}
+          options={[
+            { value: "unbefristet", label: "unbefristet" },
+            { value: "befristet", label: "befristet" },
+          ]}
+        />
       </div>
       {draft.contractType === "befristet" && (
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Befristet bis*</label>
-          <input
-            type="date"
-            value={draft.contractEndDate}
-            onChange={(e) => update({ contractEndDate: e.target.value })}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          />
-        </div>
+        <TextField
+          label="Befristet bis"
+          required
+          type="date"
+          value={draft.contractEndDate}
+          onChange={(contractEndDate) => update({ contractEndDate })}
+        />
       )}
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Beschäftigungsausmaß</label>
-          <select
-            value={draft.employmentType}
-            onChange={(e) => handleEmploymentTypeChange(e.target.value as HireDraftData["employmentType"])}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          >
-            <option value="Vollzeit">Vollzeit</option>
-            <option value="Teilzeit">Teilzeit</option>
-          </select>
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Wochenstunden</label>
-          <input
-            type="number"
-            step="0.5"
-            value={draft.weeklyHours}
-            disabled={draft.employmentType === "Vollzeit"}
-            onChange={(e) => update({ weeklyHours: e.target.value })}
-            className="w-full rounded border border-border px-3 py-2 text-sm disabled:bg-surface disabled:text-ink-muted"
-          />
-        </div>
-      </div>
-      <div>
-        <label className="mb-1 block text-sm font-semibold text-ink">Paygrade*</label>
-        <select
-          value={draft.paygrade}
-          onChange={(e) => update({ paygrade: e.target.value as PaygradeType })}
-          className="w-full rounded border border-border px-3 py-2 text-sm"
-        >
-          {PAYGRADES.map((p) => (
-            <option key={p.value} value={p.value}>
-              {p.label}
-            </option>
-          ))}
-        </select>
-        <p className="mt-1 text-xs text-ink-muted">{PAYGRADES.find((p) => p.value === draft.paygrade)?.description}</p>
+        <SelectField
+          label="Beschäftigungsausmaß"
+          value={draft.employmentType}
+          onChange={(v) => handleEmploymentTypeChange(v as HireDraftData["employmentType"])}
+          options={[
+            { value: "Vollzeit", label: "Vollzeit" },
+            { value: "Teilzeit", label: "Teilzeit" },
+          ]}
+        />
+        <TextField
+          label="Wochenstunden"
+          type="number"
+          step="0.5"
+          value={draft.weeklyHours}
+          disabled={draft.employmentType === "Vollzeit"}
+          onChange={(weeklyHours) => update({ weeklyHours })}
+        />
       </div>
+      <SelectField
+        label="Paygrade"
+        required
+        value={draft.paygrade}
+        onChange={(v) => update({ paygrade: v as PaygradeType })}
+        options={PAYGRADES}
+        hint={PAYGRADES.find((p) => p.value === draft.paygrade)?.description}
+      />
       <p className="text-xs text-ink-muted">Es gilt eine Probezeit von 1 Monat gemäß Kollektivvertrag.</p>
 
       <div>

components/orgchart/AsOfPicker.tsx

@@ -2,6 +2,8 @@
 
 import { CalendarClock } from "lucide-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Button } from "@/components/ui/Button";
+import { FILTER_SELECT_CLASS } from "@/components/ui/Field";
 import { fmtDate } from "@/lib/format";
 
 type AsOfPickerProps = {
@@ -44,12 +46,12 @@ export function AsOfPicker({ asOf, today, projectedCount, historyStartsAt }: AsO
           type="date"
           value={asOf}
           onChange={(e) => setAsOf(e.target.value || undefined)}
-          className="rounded border border-border px-3 py-2 text-sm"
+          className={FILTER_SELECT_CLASS}
         />
         {!isToday && (
-          <button type="button" onClick={() => setAsOf(undefined)} className="text-xs font-semibold text-brand-700 hover:underline">
+          <Button variant="ghost" size="sm" onClick={() => setAsOf(undefined)} className="!px-1 text-brand-700 hover:!bg-transparent hover:underline">
             Heute
-          </button>
+          </Button>
         )}
         <span className="text-xs text-ink-muted">
           {isToday ? "Aktuelle Organisationsstruktur." : `Struktur zum ${fmtDate(asOf)}.`}

components/orgchart/EmployeeTree.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { ChevronDown, ChevronRight, Search } from "lucide-react";
+import { ChevronDown, ChevronRight } from "lucide-react";
 import Link from "next/link";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Avatar } from "@/components/ui/Avatar";
+import { Button } from "@/components/ui/Button";
+import { SearchInput } from "@/components/ui/SearchInput";
 import { SegmentedControl } from "@/components/ui/SegmentedControl";
 import { LazyGraphOrgChart } from "./LazyGraphOrgChart";
 import type { ChartNode, OrgEmployee } from "./types";
@@ -167,29 +169,13 @@ export function EmployeeTree({ employees, focusId = null }: { employees: OrgEmpl
   return (
     <div className="rounded border border-border bg-white p-4">
       <div className="mb-4 flex flex-wrap items-center gap-3">
-        <div className="flex min-w-[240px] flex-1 items-center gap-2 rounded border border-border px-3 py-2">
-          <Search className="h-4 w-4 shrink-0 text-ink-muted" />
-          <input
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder="Name, Pers.-Nr., Titel…"
-            className="w-full text-sm text-ink outline-none placeholder:text-ink-muted"
-          />
-        </div>
-        <button
-          type="button"
-          onClick={() => setExpanded(new Set(root.map((r) => r.id)))}
-          className="rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface"
-        >
+        <SearchInput label="Organigramm durchsuchen" placeholder="Name, Pers.-Nr., Titel…" value={query} onChange={setQuery} />
+        <Button variant="secondary" size="sm" onClick={() => setExpanded(new Set(root.map((r) => r.id)))}>
           Bereiche anzeigen
-        </button>
-        <button
-          type="button"
-          onClick={() => setExpanded(new Set())}
-          className="rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface"
-        >
+        </Button>
+        <Button variant="secondary" size="sm" onClick={() => setExpanded(new Set())}>
           Alles einklappen
-        </button>
+        </Button>
         <SegmentedControl<ViewMode> value={mode} onChange={setMode} options={[{ value: "list", label: "Liste" }, { value: "graph", label: "Grafisch" }]} />
       </div>
       {mode === "list" ? (

components/orgchart/ReorgWorkbench.tsx

@@ -4,6 +4,8 @@ import { RotateCcw, X } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import { applyReorg, undoReorg, type ReorgMovePayload } from "@/actions/reorg";
+import { Button } from "@/components/ui/Button";
+import { Field, SelectField, TextField } from "@/components/ui/Field";
 import { Lookup } from "@/components/ui/Lookup";
 import { useToast } from "@/components/ui/Toast";
 import { fmtDate } from "@/lib/format";
@@ -190,60 +192,62 @@ export function ReorgWorkbench({ employees, divisions, departments, teams, reorg
       <div className="rounded border border-border bg-white p-4">
         <h2 className="mb-3 text-sm font-bold text-ink">Neue Reorganisation</h2>
         <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-          <div>
-            <label className="mb-1 block text-sm font-semibold text-ink">Name der Reorganisation*</label>
-            <input value={name} onChange={(e) => setName(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-          </div>
-          <div>
-            <label className="mb-1 block text-sm font-semibold text-ink">Wirksam ab*</label>
-            <input
-              type="date"
-              value={effectiveDate}
-              onChange={(e) => setEffectiveDate(e.target.value)}
-              className="w-full rounded border border-border px-3 py-2 text-sm"
-            />
-          </div>
+          <TextField label="Name der Reorganisation" required value={name} onChange={setName} />
+          <TextField label="Wirksam ab" required type="date" value={effectiveDate} onChange={setEffectiveDate} />
         </div>
 
-        <div className="mt-4 flex gap-2">
-          {(Object.keys(KIND_LABELS) as ChangeKind[]).map((kind) => (
-            <button
-              key={kind}
-              type="button"
-              onClick={() => setChangeType(kind)}
-              className={`rounded px-3 py-1.5 text-sm font-semibold ${
-                changeType === kind ? "bg-brand-500 text-white" : "border border-border text-ink-body hover:bg-surface"
-              }`}
-            >
-              {KIND_LABELS[kind]}
-            </button>
-          ))}
-        </div>
+        <fieldset className="mt-4">
+          <legend className="sr-only">Art der Änderung</legend>
+          <div className="flex flex-wrap gap-2">
+            {(Object.keys(KIND_LABELS) as ChangeKind[]).map((kind) => (
+              <button
+                key={kind}
+                type="button"
+                aria-pressed={changeType === kind}
+                onClick={() => setChangeType(kind)}
+                className={`rounded px-3 py-1.5 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 ${
+                  changeType === kind ? "bg-brand-500 text-white" : "border border-border text-ink-body hover:bg-surface"
+                }`}
+              >
+                {KIND_LABELS[kind]}
+              </button>
+            ))}
+          </div>
+        </fieldset>
 
-        <div className="mt-4 grid grid-cols-2 gap-3">
+        <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
           <div>
-            <label className="mb-1 block text-sm font-semibold text-ink">Quelle</label>
             {changeType === "emp" && (
               <div className="flex flex-col gap-2">
-                <Lookup<OrgEmployee>
-                  placeholder="Mitarbeiter:in suchen…"
-                  onSearch={searchLocalEmployees}
-                  onSelect={(e) => setSelectedEmployees((prev) => [...prev, e])}
-                  renderResult={(e) => (
-                    <div>
-                      <div className="font-semibold text-ink">
-                        {e.first_name} {e.last_name}
-                      </div>
-                      <div className="text-xs text-ink-muted">{e.job_title}</div>
-                    </div>
+                <Field label="Quelle: Mitarbeiter:innen">
+                  {(p) => (
+                    <Lookup<OrgEmployee>
+                      {...p}
+                      placeholder="Mitarbeiter:in suchen…"
+                      onSearch={searchLocalEmployees}
+                      onSelect={(e) => setSelectedEmployees((prev) => [...prev, e])}
+                      renderResult={(e) => (
+                        <div>
+                          <div className="font-semibold text-ink">
+                            {e.first_name} {e.last_name}
+                          </div>
+                          <div className="text-xs text-ink-muted">{e.job_title}</div>
+                        </div>
+                      )}
+                    />
                   )}
-                />
+                </Field>
                 {selectedEmployees.length > 0 && (
                   <div className="flex flex-wrap gap-1.5">
                     {selectedEmployees.map((e) => (
                       <span key={e.id} className="flex items-center gap-1 rounded-full bg-brand-100 px-2.5 py-1 text-xs font-semibold text-brand-700">
                         {e.first_name} {e.last_name}
-                        <button type="button" onClick={() => setSelectedEmployees((prev) => prev.filter((s) => s.id !== e.id))}>
+                        <button
+                          type="button"
+                          aria-label={`${e.first_name} ${e.last_name} aus der Auswahl entfernen`}
+                          onClick={() => setSelectedEmployees((prev) => prev.filter((s) => s.id !== e.id))}
+                          className="rounded focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand-500"
+                        >
                           <X className="h-3 w-3" />
                         </button>
                       </span>
@@ -253,78 +257,60 @@ export function ReorgWorkbench({ employees, divisions, departments, teams, reorg
               </div>
             )}
             {changeType === "team" && (
-              <select value={sourceTeamId} onChange={(e) => setSourceTeamId(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
-                <option value="">Team wählen…</option>
-                {teams.map((t) => (
-                  <option key={t.id} value={t.id}>
-                    {t.name}
-                  </option>
-                ))}
-              </select>
+              <SelectField
+                label="Quelle: Team"
+                value={sourceTeamId}
+                onChange={setSourceTeamId}
+                placeholder="Team wählen…"
+                options={teams.map((t) => ({ value: t.id, label: t.name }))}
+              />
             )}
             {changeType === "abt" && (
-              <select value={sourceDeptId} onChange={(e) => setSourceDeptId(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
-                <option value="">Abteilung wählen…</option>
-                {departments.map((d) => (
-                  <option key={d.id} value={d.id}>
-                    {d.name}
-                  </option>
-                ))}
-              </select>
+              <SelectField
+                label="Quelle: Abteilung"
+                value={sourceDeptId}
+                onChange={setSourceDeptId}
+                placeholder="Abteilung wählen…"
+                options={departments.map((d) => ({ value: d.id, label: d.name }))}
+              />
             )}
             {changeType === "dept" && (
-              <select
+              <SelectField
+                label="Quelle: Bereich"
                 value={sourceDivisionId}
-                onChange={(e) => setSourceDivisionId(e.target.value)}
-                className="w-full rounded border border-border px-3 py-2 text-sm"
-              >
-                <option value="">Bereich wählen…</option>
-                {divisions.map((d) => (
-                  <option key={d.id} value={d.id}>
-                    {d.name}
-                  </option>
-                ))}
-              </select>
+                onChange={setSourceDivisionId}
+                placeholder="Bereich wählen…"
+                options={divisions.map((d) => ({ value: d.id, label: d.name }))}
+              />
             )}
           </div>
 
-          <div>
-            <label className="mb-1 block text-sm font-semibold text-ink">Ziel-Bereich* / Ziel-Team*</label>
-            <div className="flex flex-col gap-2">
-              <select
-                value={targetDivisionId}
-                onChange={(e) => {
-                  setTargetDivisionId(e.target.value);
-                  setTargetTeamId("");
-                }}
-                className="w-full rounded border border-border px-3 py-2 text-sm"
-              >
-                <option value="">Ziel-Bereich wählen…</option>
-                {divisions.map((d) => (
-                  <option key={d.id} value={d.id}>
-                    {d.name}
-                  </option>
-                ))}
-              </select>
-              <select value={targetTeamId} onChange={(e) => setTargetTeamId(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
-                <option value="">Ziel-Team wählen…</option>
-                {teamsInTargetDivision.map((t) => (
-                  <option key={t.id} value={t.id}>
-                    {t.name}
-                  </option>
-                ))}
-              </select>
-            </div>
+          <div className="flex flex-col gap-2">
+            <SelectField
+              label="Ziel-Bereich"
+              required
+              value={targetDivisionId}
+              onChange={(v) => {
+                setTargetDivisionId(v);
+                setTargetTeamId("");
+              }}
+              placeholder="Ziel-Bereich wählen…"
+              options={divisions.map((d) => ({ value: d.id, label: d.name }))}
+            />
+            <SelectField
+              label="Ziel-Team"
+              required
+              value={targetTeamId}
+              onChange={setTargetTeamId}
+              placeholder="Ziel-Team wählen…"
+              options={teamsInTargetDivision.map((t) => ({ value: t.id, label: t.name }))}
+            />
           </div>
         </div>
 
-        <button
-          type="button"
-          onClick={handleAddMove}
-          className="mt-4 rounded border border-border px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface"
-        >
+        <Button variant="secondary" onClick={handleAddMove} className="mt-4">
           + Zur Reorganisation hinzufügen
-        </button>
+        </Button>
       </div>
 
       {pendingMoves.length > 0 && (
@@ -340,9 +326,14 @@ export function ReorgWorkbench({ employees, divisions, departments, teams, reorg
                   </span>
                   <span className="ml-2 text-xs text-ink-muted">({m.employeeIds.length} Mitarbeiter:innen)</span>
                 </div>
-                <button type="button" onClick={() => removeMove(m.id)} aria-label="Entfernen" className="text-ink-muted hover:text-danger-solid">
+                <Button
+                  variant="icon"
+                  onClick={() => removeMove(m.id)}
+                  aria-label={`${m.label} aus der Reorganisation entfernen`}
+                  className="hover:!text-danger-solid"
+                >
                   <X className="h-4 w-4" />
-                </button>
+                </Button>
               </li>
             ))}
           </ul>
@@ -376,22 +367,13 @@ export function ReorgWorkbench({ employees, divisions, departments, teams, reorg
             </tbody>
           </table>
 
-          <div className="mt-4 flex gap-2">
-            <button
-              type="button"
-              onClick={() => setPendingMoves([])}
-              className="rounded border border-border px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface"
-            >
+          <div className="mt-4 flex flex-wrap gap-2">
+            <Button variant="secondary" onClick={() => setPendingMoves([])}>
               Verwerfen
-            </button>
-            <button
-              type="button"
-              onClick={handleApply}
-              disabled={applying}
-              className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
-            >
+            </Button>
+            <Button onClick={handleApply} pending={applying}>
               Reorganisation durchführen
-            </button>
+            </Button>
           </div>
         </div>
       )}
@@ -408,15 +390,10 @@ export function ReorgWorkbench({ employees, divisions, departments, teams, reorg
                     wirksam ab {fmtDate(s.effective_date)} · durchgeführt am {fmtDate(s.applied_at)}
                   </span>
                 </div>
-                <button
-                  type="button"
-                  onClick={() => handleUndo(s.id)}
-                  disabled={undoingId === s.id}
-                  className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-xs font-semibold text-ink-body hover:bg-surface disabled:opacity-50"
-                >
+                <Button variant="secondary" size="sm" onClick={() => handleUndo(s.id)} pending={undoingId === s.id}>
                   <RotateCcw className="h-3.5 w-3.5" />
                   Rückgängig machen
-                </button>
+                </Button>
               </li>
             ))}
           </ul>

components/positions/CreatePositionModal.tsx

@@ -3,6 +3,8 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { createPosition, searchSuperiors, type SuperiorSearchResult } from "@/actions/positions";
+import { Button } from "@/components/ui/Button";
+import { Field, SelectField, TextField } from "@/components/ui/Field";
 import { Lookup } from "@/components/ui/Lookup";
 import { Modal } from "@/components/ui/Modal";
 import { useToast } from "@/components/ui/Toast";
@@ -60,24 +62,17 @@ export function CreatePositionModal({ open, onClose, teams }: { open: boolean; o
       title="Position ausschreiben"
       footer={
         <>
-          <button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
+          <Button variant="ghost" onClick={onClose}>
             Abbrechen
-          </button>
-          <button
-            onClick={handleSubmit}
-            disabled={pending}
-            className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
-          >
+          </Button>
+          <Button onClick={handleSubmit} pending={pending}>
             Ausschreiben
-          </button>
+          </Button>
         </>
       }
     >
       <div className="flex flex-col gap-4">
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Titel*</label>
-          <input value={title} onChange={(e) => setTitle(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
-        </div>
+        <TextField label="Titel" required value={title} onChange={setTitle} />
         <label className="flex items-center gap-2 text-sm text-ink-body">
           <input
             type="checkbox"
@@ -89,25 +84,30 @@ export function CreatePositionModal({ open, onClose, teams }: { open: boolean; o
           />
           Führungsposition (Teamleitung)
         </label>
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">
-            {isLead ? "Übergeordnete Bereichsleitung*" : "Übergeordnete Teamleitung*"}
-          </label>
-          {!superior ? (
-            <Lookup<SuperiorSearchResult>
-              placeholder="Name oder Titel…"
-              onSearch={(q) => searchSuperiors(q, isLead)}
-              onSelect={setSuperior}
-              renderResult={(p) => (
-                <div>
-                  <div className="font-semibold text-ink">
-                    {p.first_name} {p.last_name}
+        {!superior ? (
+          <Field label={isLead ? "Übergeordnete Bereichsleitung" : "Übergeordnete Teamleitung"} required>
+            {(p) => (
+              <Lookup<SuperiorSearchResult>
+                {...p}
+                placeholder="Name oder Titel…"
+                onSearch={(q) => searchSuperiors(q, isLead)}
+                onSelect={setSuperior}
+                renderResult={(r) => (
+                  <div>
+                    <div className="font-semibold text-ink">
+                      {r.first_name} {r.last_name}
+                    </div>
+                    <div className="text-xs text-ink-muted">{r.job_title}</div>
                   </div>
-                  <div className="text-xs text-ink-muted">{p.job_title}</div>
-                </div>
-              )}
-            />
-          ) : (
+                )}
+              />
+            )}
+          </Field>
+        ) : (
+          <div>
+            <p className="mb-1 block text-sm font-semibold text-ink">
+              {isLead ? "Übergeordnete Bereichsleitung" : "Übergeordnete Teamleitung"}
+            </p>
             <div className="flex items-center justify-between rounded border border-border bg-surface p-3">
               <div>
                 <div className="text-sm font-semibold text-ink">
@@ -115,34 +115,23 @@ export function CreatePositionModal({ open, onClose, teams }: { open: boolean; o
                 </div>
                 <div className="text-xs text-ink-muted">{superior.job_title}</div>
               </div>
-              <button type="button" onClick={() => setSuperior(null)} className="text-xs text-ink-muted hover:text-ink">
+              <Button variant="ghost" size="sm" onClick={() => setSuperior(null)}>
                 Ändern
-              </button>
+              </Button>
             </div>
-          )}
-        </div>
-        {isLead && (
-          <div>
-            <label className="mb-1 block text-sm font-semibold text-ink">Zu leitendes Team*</label>
-            <select value={teamId} onChange={(e) => setTeamId(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
-              <option value="">Bitte wählen…</option>
-              {teams.map((t) => (
-                <option key={t.id} value={t.id}>
-                  {t.name}
-                </option>
-              ))}
-            </select>
           </div>
         )}
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Gültig ab*</label>
-          <input
-            type="date"
-            value={validFrom}
-            onChange={(e) => setValidFrom(e.target.value)}
-            className="w-full rounded border border-border px-3 py-2 text-sm"
+        {isLead && (
+          <SelectField
+            label="Zu leitendes Team"
+            required
+            value={teamId}
+            onChange={setTeamId}
+            placeholder="Bitte wählen…"
+            options={teams.map((t) => ({ value: t.id, label: t.name }))}
           />
-        </div>
+        )}
+        <TextField label="Gültig ab" required type="date" value={validFrom} onChange={setValidFrom} />
       </div>
     </Modal>
   );

components/positions/PositionsPageClient.tsx

@@ -4,6 +4,7 @@ import { Plus, Trash2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { deletePosition } from "@/actions/positions";
+import { Button } from "@/components/ui/Button";
 import { useToast } from "@/components/ui/Toast";
 import { fmtDate, todayIso } from "@/lib/format";
 import type { OpenPositionResolved } from "@/lib/positions";
@@ -40,14 +41,10 @@ export function PositionsPageClient({ openPositions, teams }: PositionsPageClien
       <div className="rounded border border-border bg-white p-4">
         <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
           <h2 className="text-sm font-bold text-ink">Offene Positionen ({openPositions.length})</h2>
-          <button
-            type="button"
-            onClick={() => setCreateOpen(true)}
-            className="flex items-center gap-1.5 rounded bg-brand-500 px-3 py-2 text-sm font-semibold text-white hover:bg-brand-600"
-          >
+          <Button onClick={() => setCreateOpen(true)}>
             <Plus className="h-4 w-4" />
             Position ausschreiben
-          </button>
+          </Button>
         </div>
         {openPositions.length === 0 ? (
           <p className="text-sm text-ink-muted">Derzeit keine offenen Positionen.</p>
@@ -59,15 +56,15 @@ export function PositionsPageClient({ openPositions, teams }: PositionsPageClien
                 <div key={p.id} className="flex flex-col rounded border border-border p-3">
                   <div className="flex items-start justify-between gap-2">
                     <div className="text-sm font-semibold text-ink">{p.title}</div>
-                    <button
-                      type="button"
+                    <Button
+                      variant="icon"
                       onClick={() => handleDelete(p.id)}
-                      disabled={deletingId === p.id}
-                      aria-label="Position löschen"
-                      className="-mr-1 -mt-1 rounded p-2 text-ink-muted hover:text-danger-solid disabled:opacity-50"
+                      pending={deletingId === p.id}
+                      aria-label={`Position ${p.title} löschen`}
+                      className="-mr-1 -mt-1 hover:!text-danger-solid"
                     >
                       <Trash2 className="h-3.5 w-3.5" />
-                    </button>
+                    </Button>
                   </div>
                   <div className="text-xs text-ink-muted">
                     {p.position_number} · {p.orgLabel}

components/reports/ReportsPageClient.tsx

@@ -5,6 +5,8 @@ import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { deleteReport, saveReport } from "@/actions/reports";
+import { Button, LINK_BUTTON_CLASS } from "@/components/ui/Button";
+import { CONTROL_CLASS, SelectField, TextField } from "@/components/ui/Field";
 import { Modal } from "@/components/ui/Modal";
 import { useToast } from "@/components/ui/Toast";
 import { fmtDate } from "@/lib/format";
@@ -208,81 +210,73 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
   return (
     <div className="grid grid-cols-1 gap-4 lg:grid-cols-[320px_1fr]">
       <div className="flex flex-col gap-4">
-        <div className="flex rounded border border-border bg-white p-1 text-sm font-semibold">
-          <button
-            type="button"
-            onClick={() => switchMode("snapshot")}
-            className={`flex-1 rounded px-3 py-1.5 ${mode === "snapshot" ? "bg-brand-500 text-white" : "text-ink-body hover:bg-surface"}`}
-          >
-            Bestand
-          </button>
-          <button
-            type="button"
-            onClick={() => switchMode("events")}
-            className={`flex-1 rounded px-3 py-1.5 ${mode === "events" ? "bg-brand-500 text-white" : "text-ink-body hover:bg-surface"}`}
-          >
-            Ereignisse
-          </button>
+        <div role="tablist" aria-label="Berichtsart" className="flex rounded border border-border bg-white p-1 text-sm font-semibold">
+          {(["snapshot", "events"] as const).map((m) => (
+            <button
+              key={m}
+              type="button"
+              role="tab"
+              aria-selected={mode === m}
+              onClick={() => switchMode(m)}
+              className={`flex-1 rounded px-3 py-1.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand-500 ${
+                mode === m ? "bg-brand-500 text-white" : "text-ink-body hover:bg-surface"
+              }`}
+            >
+              {m === "snapshot" ? "Bestand" : "Ereignisse"}
+            </button>
+          ))}
         </div>
 
         {mode === "snapshot" ? (
           <div className="rounded border border-border bg-white p-4">
             <div className="flex flex-col gap-3">
-              <div>
-                <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Kennzahl</label>
-                <select
-                  value={props.measure}
-                  onChange={(e) => updateParams({ measure: e.target.value, split: AVERAGE_MEASURES.includes(e.target.value as Measure) ? undefined : props.split })}
-                  className="w-full rounded border border-border px-3 py-2 text-sm"
-                >
-                  {(Object.keys(MEASURE_LABELS) as Measure[]).map((m) => (
-                    <option key={m} value={m}>
-                      {MEASURE_LABELS[m]}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Gruppieren nach</label>
-                <select value={props.group} onChange={(e) => updateParams({ group: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
-                  {(Object.keys(GROUP_LABELS) as GroupDimension[]).map((g) => (
-                    <option key={g} value={g}>
-                      {GROUP_LABELS[g]}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Aufteilen nach</label>
-                <select
-                  value={props.split}
-                  disabled={isAverage}
-                  onChange={(e) => updateParams({ split: e.target.value || undefined })}
-                  className="w-full rounded border border-border px-3 py-2 text-sm disabled:bg-surface disabled:text-ink-muted"
-                >
-                  <option value="">Keine Aufteilung</option>
-                  {(Object.keys(GROUP_LABELS) as GroupDimension[])
+              <SelectField
+                label="Kennzahl"
+                dense
+                value={props.measure}
+                onChange={(v) => updateParams({ measure: v, split: AVERAGE_MEASURES.includes(v as Measure) ? undefined : props.split })}
+                options={(Object.keys(MEASURE_LABELS) as Measure[]).map((m) => ({ value: m, label: MEASURE_LABELS[m] }))}
+              />
+              <SelectField
+                label="Gruppieren nach"
+                dense
+                value={props.group}
+                onChange={(v) => updateParams({ group: v })}
+                options={(Object.keys(GROUP_LABELS) as GroupDimension[]).map((g) => ({ value: g, label: GROUP_LABELS[g] }))}
+              />
+              <SelectField
+                label="Aufteilen nach"
+                dense
+                value={props.split}
+                disabled={isAverage}
+                onChange={(v) => updateParams({ split: v || undefined })}
+                hint={isAverage ? "Bei Durchschnittswerten nicht verfügbar." : undefined}
+                options={[
+                  { value: "", label: "Keine Aufteilung" },
+                  ...(Object.keys(GROUP_LABELS) as GroupDimension[])
                     .filter((g) => g !== props.group)
-                    .map((g) => (
-                      <option key={g} value={g}>
-                        {GROUP_LABELS[g]}
-                      </option>
-                    ))}
-                </select>
-              </div>
+                    .map((g) => ({ value: g, label: GROUP_LABELS[g] })),
+                ]}
+              />
               <div>
-                <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Stichtag</label>
-                <div className="flex items-center gap-2">
-                  <input
+                <div className="flex items-end gap-2">
+                  <TextField
+                    label="Stichtag"
+                    dense
+                    className="flex-1"
                     type="date"
                     value={props.asOf || todayIso()}
-                    onChange={(e) => updateParams({ asOf: e.target.value })}
-                    className="w-full rounded border border-border px-3 py-2 text-sm"
+                    onChange={(v) => updateParams({ asOf: v })}
                   />
                   {props.asOf && (
-                    <button type="button" onClick={() => updateParams({ asOf: undefined })} className="whitespace-nowrap text-xs font-semibold text-brand-700 hover:underline">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => updateParams({ asOf: undefined })}
+                      className="!px-1 whitespace-nowrap text-brand-700 hover:!bg-transparent hover:underline"
+                    >
                       Heute
-                    </button>
+                    </Button>
                   )}
                 </div>
                 <p className="mt-1 text-xs text-ink-muted">
@@ -294,77 +288,76 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
         ) : (
           <div className="rounded border border-border bg-white p-4">
             <div className="flex flex-col gap-3">
-              <div>
-                <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Ereignistyp</label>
-                <select value={props.eventType} onChange={(e) => updateParams({ eventType: e.target.value || undefined })} className="w-full rounded border border-border px-3 py-2 text-sm">
-                  <option value="">Alle Ereignistypen</option>
-                  {EVENT_TYPES.map((t) => (
-                    <option key={t} value={t}>
-                      {EVENT_TYPE_LABELS[t]}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Gruppieren nach</label>
-                <select value={props.eventGroup} onChange={(e) => updateParams({ group: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
-                  {(Object.keys(EVENT_GROUP_LABELS) as EventGroupDimension[]).map((g) => (
-                    <option key={g} value={g}>
-                      {EVENT_GROUP_LABELS[g]}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Aufteilen nach</label>
-                <select value={props.eventSplit} onChange={(e) => updateParams({ split: e.target.value || undefined })} className="w-full rounded border border-border px-3 py-2 text-sm">
-                  <option value="">Keine Aufteilung</option>
-                  {(Object.keys(EVENT_GROUP_LABELS) as EventGroupDimension[])
+              <SelectField
+                label="Ereignistyp"
+                dense
+                value={props.eventType}
+                onChange={(v) => updateParams({ eventType: v || undefined })}
+                options={[
+                  { value: "", label: "Alle Ereignistypen" },
+                  ...EVENT_TYPES.map((t) => ({ value: t, label: EVENT_TYPE_LABELS[t] })),
+                ]}
+              />
+              <SelectField
+                label="Gruppieren nach"
+                dense
+                value={props.eventGroup}
+                onChange={(v) => updateParams({ group: v })}
+                options={(Object.keys(EVENT_GROUP_LABELS) as EventGroupDimension[]).map((g) => ({ value: g, label: EVENT_GROUP_LABELS[g] }))}
+              />
+              <SelectField
+                label="Aufteilen nach"
+                dense
+                value={props.eventSplit}
+                onChange={(v) => updateParams({ split: v || undefined })}
+                options={[
+                  { value: "", label: "Keine Aufteilung" },
+                  ...(Object.keys(EVENT_GROUP_LABELS) as EventGroupDimension[])
                     .filter((g) => g !== props.eventGroup)
-                    .map((g) => (
-                      <option key={g} value={g}>
-                        {EVENT_GROUP_LABELS[g]}
-                      </option>
-                    ))}
-                </select>
-              </div>
-              <div>
-                <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Zeitraum</label>
+                    .map((g) => ({ value: g, label: EVENT_GROUP_LABELS[g] })),
+                ]}
+              />
+              <fieldset>
+                <legend className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Zeitraum</legend>
                 <div className="grid grid-cols-2 gap-2">
                   <div>
-                    <input
+                    <TextField
+                      label="Von"
+                      dense
                       type="date"
                       value={props.eventFilters.from === EVENT_DATE_OPEN ? "" : props.eventFilters.from || defaultEventFrom}
                       disabled={props.eventFilters.from === EVENT_DATE_OPEN}
-                      onChange={(e) => updateParams({ from: e.target.value })}
-                      className="w-full rounded border border-border px-2 py-2 text-xs disabled:bg-surface"
+                      onChange={(v) => updateParams({ from: v })}
                     />
-                    <button
-                      type="button"
+                    <Button
+                      variant="ghost"
+                      size="sm"
                       onClick={() => updateParams({ from: props.eventFilters.from === EVENT_DATE_OPEN ? defaultEventFrom : EVENT_DATE_OPEN })}
-                      className="mt-1 text-xs font-semibold text-brand-700 hover:underline"
+                      className="mt-1 !px-0 text-brand-700 hover:!bg-transparent hover:underline"
                     >
                       {props.eventFilters.from === EVENT_DATE_OPEN ? "Startdatum setzen" : "Ab Anfang (offen)"}
-                    </button>
+                    </Button>
                   </div>
                   <div>
-                    <input
+                    <TextField
+                      label="Bis"
+                      dense
                       type="date"
                       value={props.eventFilters.to === EVENT_DATE_OPEN ? "" : props.eventFilters.to || defaultEventTo}
                       disabled={props.eventFilters.to === EVENT_DATE_OPEN}
-                      onChange={(e) => updateParams({ to: e.target.value })}
-                      className="w-full rounded border border-border px-2 py-2 text-xs disabled:bg-surface"
+                      onChange={(v) => updateParams({ to: v })}
                     />
-                    <button
-                      type="button"
+                    <Button
+                      variant="ghost"
+                      size="sm"
                       onClick={() => updateParams({ to: props.eventFilters.to === EVENT_DATE_OPEN ? defaultEventTo : EVENT_DATE_OPEN })}
-                      className="mt-1 text-xs font-semibold text-brand-700 hover:underline"
+                      className="mt-1 !px-0 text-brand-700 hover:!bg-transparent hover:underline"
                     >
                       {props.eventFilters.to === EVENT_DATE_OPEN ? "Enddatum setzen" : "Bis heute (offen)"}
-                    </button>
+                    </Button>
                   </div>
                 </div>
-              </div>
+              </fieldset>
             </div>
           </div>
         )}
@@ -373,9 +366,10 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
           <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Filter</h3>
           <div className="flex flex-col gap-2">
             <select
+              aria-label="Nach Bereich filtern"
               value={mode === "snapshot" ? props.filters.division : props.eventFilters.division}
               onChange={(e) => updateParams({ division: e.target.value })}
-              className="w-full rounded border border-border px-3 py-2 text-sm"
+              className={CONTROL_CLASS}
             >
               <option value="">Alle Bereiche</option>
               {divisions.map((d) => (
@@ -385,9 +379,10 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
               ))}
             </select>
             <select
+              aria-label="Nach Standort filtern"
               value={mode === "snapshot" ? props.filters.location : props.eventFilters.location}
               onChange={(e) => updateParams({ location: e.target.value })}
-              className="w-full rounded border border-border px-3 py-2 text-sm"
+              className={CONTROL_CLASS}
             >
               <option value="">Alle Standorte</option>
               {locations.map((l) => (
@@ -398,8 +393,8 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
             </select>
             {mode === "snapshot" && (
               <>
-                <div className="rounded border border-border px-3 py-2">
-                  <p className="mb-1.5 text-xs font-semibold text-ink-muted">Status (zum Stichtag)</p>
+                <fieldset className="rounded border border-border px-3 py-2">
+                  <legend className="mb-1.5 text-xs font-semibold text-ink-muted">Status (zum Stichtag)</legend>
                   <div className="flex flex-wrap gap-x-4 gap-y-1.5">
                     {STATUS_OPTIONS.map((s) => (
                       <label key={s} className="flex items-center gap-1.5 text-sm text-ink-body">
@@ -413,11 +408,12 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
                       </label>
                     ))}
                   </div>
-                </div>
+                </fieldset>
                 <select
+                  aria-label="Nach Beschäftigungsart filtern"
                   value={props.filters.employment}
                   onChange={(e) => updateParams({ employment: e.target.value })}
-                  className="w-full rounded border border-border px-3 py-2 text-sm"
+                  className={CONTROL_CLASS}
                 >
                   <option value="">Alle Beschäftigungsarten</option>
                   <option value="Vollzeit">Vollzeit</option>
@@ -432,14 +428,9 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
           <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Vorlagen</h3>
           <div className="flex flex-wrap gap-1.5">
             {(mode === "snapshot" ? REPORT_PRESETS : EVENT_REPORT_PRESETS).map((preset) => (
-              <button
-                key={preset.name}
-                type="button"
-                onClick={() => applyPreset(preset)}
-                className="rounded-full border border-border px-2.5 py-1 text-xs font-semibold text-ink-body hover:bg-surface"
-              >
+              <Button key={preset.name} variant="secondary" size="sm" onClick={() => applyPreset(preset)} className="!rounded-full !px-2.5 !py-1">
                 {preset.name}
-              </button>
+              </Button>
             ))}
           </div>
         </div>
@@ -455,11 +446,11 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
             <p className="mb-2 text-xs text-ink-muted">Alle Ereignisse im gewählten Zeitraum als Rohdaten (eine Zeile pro Ereignis).</p>
           )}
           <div className="flex gap-2">
-            <a href={fullExportHref("csv")} className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface">
+            <a href={fullExportHref("csv")} className={LINK_BUTTON_CLASS}>
               <FileText className="h-4 w-4" />
               CSV
             </a>
-            <a href={fullExportHref("xlsx")} className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface">
+            <a href={fullExportHref("xlsx")} className={LINK_BUTTON_CLASS}>
               <FileSpreadsheet className="h-4 w-4" />
               Excel
             </a>
@@ -472,12 +463,22 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
             <ul className="flex flex-col divide-y divide-border">
               {savedReports.map((r) => (
                 <li key={r.id} className="flex items-center justify-between py-1.5 text-sm">
-                  <button type="button" onClick={() => applySavedReport(r.config)} className="text-left text-ink-body hover:text-brand-700 hover:underline">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => applySavedReport(r.config)}
+                    className="!px-0 !justify-start text-left hover:!bg-transparent hover:text-brand-700 hover:underline"
+                  >
                     {r.name}
-                  </button>
-                  <button type="button" onClick={() => handleDeleteReport(r.id)} aria-label="Löschen" className="text-ink-muted hover:text-danger-solid">
+                  </Button>
+                  <Button
+                    variant="icon"
+                    onClick={() => handleDeleteReport(r.id)}
+                    aria-label={`Bericht ${r.name} löschen`}
+                    className="hover:!text-danger-solid"
+                  >
                     <Trash2 className="h-3.5 w-3.5" />
-                  </button>
+                  </Button>
                 </li>
               ))}
             </ul>
@@ -492,22 +493,18 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
             <p className="text-xs text-ink-muted">{recordCount} {mode === "snapshot" ? "Datensätze" : "Ereignisse"}</p>
           </div>
           <div className="flex gap-2">
-            <a href={reportExportHref("csv")} className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface">
+            <a href={reportExportHref("csv")} className={LINK_BUTTON_CLASS}>
               <FileText className="h-4 w-4" />
               CSV
             </a>
-            <a href={reportExportHref("xlsx")} className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface">
+            <a href={reportExportHref("xlsx")} className={LINK_BUTTON_CLASS}>
               <FileSpreadsheet className="h-4 w-4" />
               Excel
             </a>
-            <button
-              type="button"
-              onClick={() => setSaveModalOpen(true)}
-              className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface"
-            >
+            <Button variant="secondary" size="sm" onClick={() => setSaveModalOpen(true)}>
               <Save className="h-4 w-4" />
               Bericht speichern
-            </button>
+            </Button>
           </div>
         </div>
 
@@ -583,29 +580,23 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
         title="Bericht speichern"
         footer={
           <>
-            <button onClick={() => setSaveModalOpen(false)} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
+            <Button variant="ghost" onClick={() => setSaveModalOpen(false)}>
               Abbrechen
-            </button>
-            <button
-              onClick={handleConfirmSaveReport}
-              disabled={savingReport}
-              className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
-            >
+            </Button>
+            <Button onClick={handleConfirmSaveReport} pending={savingReport}>
               Speichern
-            </button>
+            </Button>
           </>
         }
       >
-        <div>
-          <label className="mb-1 block text-sm font-semibold text-ink">Name für diesen Bericht*</label>
-          <input
-            value={newReportName}
-            onChange={(e) => setNewReportName(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && handleConfirmSaveReport()}
-            autoFocus
-            className="w-full rounded border border-border px-3 py-2 text-sm"
-          />
-        </div>
+        <TextField
+          label="Name für diesen Bericht"
+          required
+          value={newReportName}
+          onChange={setNewReportName}
+          onKeyDown={(e) => e.key === "Enter" && handleConfirmSaveReport()}
+          autoFocus
+        />
       </Modal>
     </div>
   );

components/shell/NewHireButton.tsx

@@ -2,18 +2,18 @@
 
 import { Plus } from "lucide-react";
 import { useHireWizard } from "@/components/hire/HireWizardContext";
+import { Button } from "@/components/ui/Button";
 
 export function NewHireButton() {
   const { openWizard } = useHireWizard();
 
   return (
-    <button
-      type="button"
-      onClick={() => openWizard()}
-      className="flex items-center gap-1.5 rounded bg-brand-500 px-3 py-1.5 text-sm font-semibold text-white hover:bg-brand-600"
-    >
+    <Button size="sm" onClick={() => openWizard()}>
       <Plus className="h-4 w-4" />
-      Neueinstellung
-    </button>
+      {/* The label is the first thing worth dropping on a narrow bar; the
+          icon plus the accessible name carry it from there. */}
+      <span className="hidden sm:inline">Neueinstellung</span>
+      <span className="sr-only sm:hidden">Neueinstellung</span>
+    </Button>
   );
 }

components/ui/Button.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+// The primary-button class chain was written out by hand at a dozen call
+// sites and the ghost/secondary ones at many more, each drifting slightly in
+// padding and hover colour. Collecting them here also gives every button a
+// visible keyboard focus ring, which none of them had.
+
+const BASE =
+  "inline-flex items-center justify-center gap-1.5 rounded font-semibold transition-colors " +
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 " +
+  "disabled:cursor-not-allowed disabled:opacity-50";
+
+const VARIANTS = {
+  primary: "bg-brand-500 text-white hover:bg-brand-600",
+  secondary: "border border-border bg-white text-ink-body hover:bg-surface",
+  ghost: "text-ink-body hover:bg-surface",
+  danger: "bg-danger-solid text-white hover:brightness-110",
+  // Square icon-only button; pair with an aria-label.
+  icon: "text-ink-muted hover:bg-surface hover:text-ink",
+} as const;
+
+const SIZES = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-4 py-2 text-sm",
+  // Meets the 44px touch target without looking oversized on desktop.
+  icon: "p-2",
+} as const;
+
+/**
+ * For anchors that read as buttons (download links, cross-page actions). A
+ * real <a> keeps middle-click and "open in new tab" working, which a button
+ * with an onClick would throw away — so those stay anchors and borrow the
+ * styling instead.
+ */
+export const LINK_BUTTON_CLASS = `${BASE} ${VARIANTS.secondary} ${SIZES.sm}`;
+
+type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className"> & {
+  variant?: keyof typeof VARIANTS;
+  size?: keyof typeof SIZES;
+  /** Disables and shows the busy label; use for in-flight server actions. */
+  pending?: boolean;
+  pendingLabel?: string;
+  fullWidth?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function Button({
+  variant = "primary",
+  size,
+  pending = false,
+  pendingLabel,
+  fullWidth,
+  disabled,
+  className = "",
+  children,
+  type = "button",
+  ...rest
+}: ButtonProps) {
+  const resolvedSize = size ?? (variant === "icon" ? "icon" : "md");
+  return (
+    <button
+      {...rest}
+      type={type}
+      disabled={disabled || pending}
+      aria-busy={pending || undefined}
+      className={`${BASE} ${VARIANTS[variant]} ${SIZES[resolvedSize]} ${fullWidth ? "w-full" : ""} ${className}`}
+    >
+      {pending && pendingLabel ? pendingLabel : children}
+    </button>
+  );
+}

components/ui/CountryPicker.tsx

@@ -1,22 +1,43 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
+import { CONTROL_CLASS } from "./Field";
 
 type CountryPickerProps = {
   value: string;
   onChange: (value: string) => void;
   countries: string[];
   placeholder?: string;
+  id?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: true;
 };
 
+const MAX_VISIBLE = 50;
+
 // Searchable text combobox constrained to a fixed list (UN member states)
 // rather than a Lookup-style "selected card" — a country is a single text
 // value, not an object with its own detail fields.
-export function CountryPicker({ value, onChange, countries, placeholder = "Land suchen…" }: CountryPickerProps) {
+//
+// Carries the full combobox contract: without role/aria-expanded/
+// aria-activedescendant a screen reader announces a plain text box and never
+// mentions that a list appeared, and without the key handling the list is
+// reachable by mouse only.
+export function CountryPicker({
+  value,
+  onChange,
+  countries,
+  placeholder = "Land suchen…",
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+}: CountryPickerProps) {
   const [query, setQuery] = useState(value);
   const [prevValue, setPrevValue] = useState(value);
   const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
   const containerRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
 
   // Re-sync the local draft text when `value` changes externally (e.g. the
   // surrounding form loads a different employee). Adjusting state directly
@@ -38,33 +59,96 @@ export function CountryPicker({ value, onChange, countries, placeholder = "Land
     return () => document.removeEventListener("mousedown", onClickOutside);
   }, [value]);
 
-  const filtered = query.trim() ? countries.filter((c) => c.toLowerCase().includes(query.trim().toLowerCase())) : countries;
+  const filtered = (query.trim() ? countries.filter((c) => c.toLowerCase().includes(query.trim().toLowerCase())) : countries).slice(
+    0,
+    MAX_VISIBLE
+  );
+  const listId = id ? `${id}-listbox` : undefined;
+  const activeId = id && filtered[activeIndex] ? `${id}-option-${activeIndex}` : undefined;
+
+  function commit(country: string) {
+    onChange(country);
+    setQuery(country);
+    setOpen(false);
+  }
+
+  // Keeps the highlighted row inside the scroll container as it moves.
+  useEffect(() => {
+    if (!open) return;
+    listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, open]);
+
+  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!open) {
+        setOpen(true);
+        setActiveIndex(0);
+        return;
+      }
+      const delta = e.key === "ArrowDown" ? 1 : -1;
+      setActiveIndex((i) => (filtered.length === 0 ? 0 : (i + delta + filtered.length) % filtered.length));
+    } else if (e.key === "Enter") {
+      if (open && filtered[activeIndex]) {
+        e.preventDefault();
+        commit(filtered[activeIndex]);
+      }
+    } else if (e.key === "Escape") {
+      if (open) {
+        // Stop here rather than letting it bubble — otherwise the dialog
+        // containing this field closes along with the dropdown.
+        e.stopPropagation();
+        setOpen(false);
+        setQuery(value);
+      }
+    }
+  }
 
   return (
     <div ref={containerRef} className="relative">
       <input
+        id={id}
+        role="combobox"
+        aria-expanded={open}
+        aria-controls={listId}
+        aria-activedescendant={open ? activeId : undefined}
+        aria-autocomplete="list"
+        aria-describedby={describedBy}
+        aria-invalid={invalid}
+        autoComplete="off"
         value={query}
         onChange={(e) => {
           setQuery(e.target.value);
+          setActiveIndex(0);
           setOpen(true);
         }}
         onFocus={() => setOpen(true)}
+        onKeyDown={onKeyDown}
         placeholder={placeholder}
-        className="w-full rounded border border-border px-3 py-2 text-sm"
+        className={CONTROL_CLASS}
       />
       {open && (
-        <div className="absolute z-20 mt-1 max-h-56 w-full overflow-y-auto rounded border border-border bg-white shadow-lg">
+        <div
+          ref={listRef}
+          id={listId}
+          role="listbox"
+          className="absolute z-20 mt-1 max-h-56 w-full overflow-y-auto rounded border border-border bg-white shadow-lg"
+        >
           {filtered.length === 0 && <div className="px-3 py-2 text-sm text-ink-muted">Keine Treffer</div>}
-          {filtered.slice(0, 50).map((c) => (
+          {filtered.map((c, i) => (
             <button
               key={c}
+              id={id ? `${id}-option-${i}` : undefined}
+              role="option"
+              aria-selected={i === activeIndex}
+              data-active={i === activeIndex}
               type="button"
-              onClick={() => {
-                onChange(c);
-                setQuery(c);
-                setOpen(false);
-              }}
-              className="block w-full px-3 py-2 text-left text-sm hover:bg-surface"
+              // Mouse down would blur the input and close the list before
+              // the click landed.
+              onMouseDown={(e) => e.preventDefault()}
+              onMouseEnter={() => setActiveIndex(i)}
+              onClick={() => commit(c)}
+              className={`block w-full px-3 py-2 text-left text-sm ${i === activeIndex ? "bg-brand-100 text-brand-700" : "hover:bg-surface"}`}
             >
               {c}
             </button>

components/ui/Field.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { useId, type ReactNode, type SelectHTMLAttributes, type InputHTMLAttributes, type TextareaHTMLAttributes } from "react";
+
+// Form primitives.
+//
+// Before these existed the same class chain was written out by hand at 85
+// call sites, each with a bare `<label>` next to a bare `<input>` and no
+// connection between them — 92 labels, 4 of which used htmlFor, and not a
+// single input carried an id. Screen readers announced an unnamed edit box
+// and clicking a label focused nothing. Generating the id here makes that
+// impossible to get wrong, and gives every field one place to fix focus
+// styling, error display and sizing.
+
+export const CONTROL_CLASS =
+  "w-full rounded border border-border bg-white px-3 py-2 text-sm text-ink " +
+  "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand-500 " +
+  "disabled:cursor-not-allowed disabled:bg-surface disabled:text-ink-muted";
+
+const INVALID_CLASS = "border-danger-solid";
+
+/** Auto-width select for filter bars, where the label is an aria-label. */
+export const FILTER_SELECT_CLASS =
+  "rounded border border-border bg-white px-3 py-2 text-sm text-ink " +
+  "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand-500";
+
+type FieldChildProps = {
+  id: string;
+  "aria-describedby": string | undefined;
+  "aria-invalid": true | undefined;
+};
+
+type FieldShellProps = {
+  label: string;
+  /** Marks the label and sets required on the control. */
+  required?: boolean;
+  /** Helper text below the control; announced with the field. */
+  hint?: string;
+  /** Replaces the hint when set and marks the control invalid. */
+  error?: string | null;
+  /** Smaller label, used inside dense side panels. */
+  dense?: boolean;
+  className?: string;
+};
+
+/**
+ * Escape hatch for controls this module does not wrap (Lookup, CountryPicker,
+ * Picklist). Hands the wiring to the caller instead of guessing at it:
+ *
+ *   <Field label="Land">{(p) => <CountryPicker {...p} … />}</Field>
+ */
+export function Field({
+  label,
+  required,
+  hint,
+  error,
+  dense,
+  className,
+  children,
+}: FieldShellProps & { children: (props: FieldChildProps) => ReactNode }) {
+  const id = useId();
+  const messageId = `${id}-message`;
+  const message = error ?? hint;
+
+  return (
+    <div className={className}>
+      <label htmlFor={id} className={dense ? "mb-1 block text-xs font-semibold text-ink-muted" : "mb-1 block text-sm font-semibold text-ink"}>
+        {label}
+        {required && <span aria-hidden> *</span>}
+        {required && <span className="sr-only"> (Pflichtfeld)</span>}
+      </label>
+      {children({
+        id,
+        "aria-describedby": message ? messageId : undefined,
+        "aria-invalid": error ? true : undefined,
+      })}
+      {message && (
+        <p id={messageId} className={`mt-1 text-xs ${error ? "font-semibold text-danger-text" : "text-ink-muted"}`}>
+          {message}
+        </p>
+      )}
+    </div>
+  );
+}
+
+type TextFieldProps = FieldShellProps &
+  Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "id" | "className"> & {
+    value: string;
+    /** Receives the value directly — every call site wanted e.target.value. */
+    onChange: (value: string) => void;
+  };
+
+export function TextField({ label, required, hint, error, dense, className, value, onChange, ...rest }: TextFieldProps) {
+  return (
+    <Field label={label} required={required} hint={hint} error={error} dense={dense} className={className}>
+      {(p) => (
+        <input
+          {...p}
+          {...rest}
+          required={required}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className={`${CONTROL_CLASS} ${error ? INVALID_CLASS : ""}`}
+        />
+      )}
+    </Field>
+  );
+}
+
+type Option = { value: string; label: string; disabled?: boolean };
+
+type SelectFieldProps = FieldShellProps &
+  Omit<SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "id" | "className" | "children"> & {
+    value: string;
+    onChange: (value: string) => void;
+    options: readonly Option[];
+    /** Prepends a disabled placeholder, for "Bitte wählen…" selects. */
+    placeholder?: string;
+  };
+
+export function SelectField({
+  label,
+  required,
+  hint,
+  error,
+  dense,
+  className,
+  value,
+  onChange,
+  options,
+  placeholder,
+  ...rest
+}: SelectFieldProps) {
+  return (
+    <Field label={label} required={required} hint={hint} error={error} dense={dense} className={className}>
+      {(p) => (
+        <select
+          {...p}
+          {...rest}
+          required={required}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className={`${CONTROL_CLASS} ${error ? INVALID_CLASS : ""}`}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {options.map((o) => (
+            <option key={o.value} value={o.value} disabled={o.disabled}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+      )}
+    </Field>
+  );
+}
+
+type TextareaFieldProps = FieldShellProps &
+  Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "id" | "className"> & {
+    value: string;
+    onChange: (value: string) => void;
+  };
+
+export function TextareaField({ label, required, hint, error, dense, className, value, onChange, ...rest }: TextareaFieldProps) {
+  return (
+    <Field label={label} required={required} hint={hint} error={error} dense={dense} className={className}>
+      {(p) => (
+        <textarea
+          {...p}
+          {...rest}
+          required={required}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className={`${CONTROL_CLASS} ${error ? INVALID_CLASS : ""}`}
+        />
+      )}
+    </Field>
+  );
+}

components/ui/Lookup.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Search, X } from "lucide-react";
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
 
 type LookupProps<T> = {
   placeholder?: string;
@@ -9,21 +9,42 @@ type LookupProps<T> = {
   renderResult: (item: T) => ReactNode;
   onSelect: (item: T) => void;
   minChars?: number;
+  id?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: true;
 };
 
 // Generic async search-select used by the position lookup (hire wizard),
-// manager/superior lookup (create position), and employee multi-select
-// (reorg workbench) in later phases.
-export function Lookup<T>({ placeholder = "Suchen…", onSearch, renderResult, onSelect, minChars = 2 }: LookupProps<T>) {
+// manager/superior lookup (create position), and the reorg workbench.
+//
+// Implements the combobox contract rather than just looking like one: it was
+// a plain text input with a div of clickable buttons underneath, so a
+// keyboard user could type but never reach a result, and a screen reader was
+// never told a list had appeared. Arrow keys move the selection, Enter takes
+// it, Escape closes without also closing the surrounding dialog.
+export function Lookup<T>({
+  placeholder = "Suchen…",
+  onSearch,
+  renderResult,
+  onSelect,
+  minChars = 2,
+  id: idProp,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+}: LookupProps<T>) {
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
   const [query, setQuery] = useState("");
   const [results, setResults] = useState<T[]>([]);
   const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
   // Derived from "have we finished searching for the current query yet",
   // rather than a separate state flag flipped synchronously at the top of
   // the effect below — the effect only ever sets state from the async
   // search's own completion callback now.
   const [lastSearchedQuery, setLastSearchedQuery] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
 
   const tooShort = query.trim().length < minChars;
   const loading = !tooShort && lastSearchedQuery !== query.trim();
@@ -35,6 +56,7 @@ export function Lookup<T>({ placeholder = "Suchen…", onSearch, renderResult, o
       onSearch(query.trim()).then((res) => {
         if (cancelled) return;
         setResults(res);
+        setActiveIndex(0);
         setOpen(true);
         setLastSearchedQuery(query.trim());
       });
@@ -50,6 +72,7 @@ export function Lookup<T>({ placeholder = "Suchen…", onSearch, renderResult, o
   // needing a synchronous setState inside the effect above.
   const showDropdown = open && !tooShort;
   const visibleResults = tooShort ? [] : results;
+  const selectable = loading ? [] : visibleResults;
 
   useEffect(() => {
     function onClickOutside(e: MouseEvent) {
@@ -61,46 +84,100 @@ export function Lookup<T>({ placeholder = "Suchen…", onSearch, renderResult, o
     return () => document.removeEventListener("mousedown", onClickOutside);
   }, []);
 
+  useEffect(() => {
+    if (!showDropdown) return;
+    listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, showDropdown]);
+
+  function reset() {
+    setQuery("");
+    setResults([]);
+    setOpen(false);
+    setActiveIndex(0);
+  }
+
+  function choose(item: T) {
+    onSelect(item);
+    reset();
+  }
+
+  function onKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      if (selectable.length === 0) return;
+      e.preventDefault();
+      const delta = e.key === "ArrowDown" ? 1 : -1;
+      setActiveIndex((i) => (i + delta + selectable.length) % selectable.length);
+    } else if (e.key === "Enter") {
+      if (showDropdown && selectable[activeIndex]) {
+        e.preventDefault();
+        choose(selectable[activeIndex]);
+      }
+    } else if (e.key === "Escape") {
+      if (showDropdown) {
+        // Without this the Escape also reaches Modal/SlideOver and closes
+        // the whole dialog behind the dropdown.
+        e.stopPropagation();
+        setOpen(false);
+      }
+    }
+  }
+
+  const listId = `${id}-listbox`;
+
   return (
     <div ref={containerRef} className="relative">
-      <div className="flex items-center gap-2 rounded border border-border bg-white px-3 py-2">
-        <Search className="h-4 w-4 shrink-0 text-ink-muted" />
+      <div className="flex items-center gap-2 rounded border border-border bg-white px-3 py-2 focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-brand-500">
+        <Search className="h-4 w-4 shrink-0 text-ink-muted" aria-hidden />
         <input
+          id={id}
+          role="combobox"
+          aria-expanded={showDropdown}
+          aria-controls={listId}
+          aria-activedescendant={showDropdown && selectable[activeIndex] ? `${id}-option-${activeIndex}` : undefined}
+          aria-autocomplete="list"
+          aria-describedby={describedBy}
+          aria-invalid={invalid}
+          autoComplete="off"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={onKeyDown}
           placeholder={placeholder}
           className="w-full text-sm outline-none placeholder:text-ink-muted"
         />
         {query && (
-          <button
-            type="button"
-            onClick={() => {
-              setQuery("");
-              setResults([]);
-              setOpen(false);
-            }}
-            aria-label="Zurücksetzen"
-          >
+          <button type="button" onClick={reset} aria-label="Zurücksetzen" className="rounded p-0.5 hover:bg-surface">
             <X className="h-4 w-4 text-ink-muted" />
           </button>
         )}
       </div>
+      {/* Announces "Suche…" / result count without stealing focus. */}
+      <span aria-live="polite" className="sr-only">
+        {showDropdown ? (loading ? "Suche läuft" : `${visibleResults.length} Treffer`) : ""}
+      </span>
       {showDropdown && (
-        <div className="absolute z-20 mt-1 max-h-64 w-full overflow-y-auto rounded border border-border bg-white shadow-lg">
+        <div
+          ref={listRef}
+          id={listId}
+          role="listbox"
+          className="absolute z-20 mt-1 max-h-64 w-full overflow-y-auto rounded border border-border bg-white shadow-lg"
+        >
           {loading && <div className="px-3 py-2 text-sm text-ink-muted">Suche…</div>}
           {!loading && visibleResults.length === 0 && <div className="px-3 py-2 text-sm text-ink-muted">Keine Treffer</div>}
           {!loading &&
             visibleResults.map((item, i) => (
               <button
                 key={i}
+                id={`${id}-option-${i}`}
+                role="option"
+                aria-selected={i === activeIndex}
+                data-active={i === activeIndex}
                 type="button"
-                onClick={() => {
-                  onSelect(item);
-                  setQuery("");
-                  setResults([]);
-                  setOpen(false);
-                }}
-                className="block w-full px-3 py-2 text-left text-sm hover:bg-surface"
+                // Mouse down would blur the input and close the list before
+                // the click landed.
+                onMouseDown={(e) => e.preventDefault()}
+                onMouseEnter={() => setActiveIndex(i)}
+                onClick={() => choose(item)}
+                className={`block w-full px-3 py-2 text-left text-sm ${i === activeIndex ? "bg-brand-100" : "hover:bg-surface"}`}
               >
                 {renderResult(item)}
               </button>

components/ui/Modal.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { X } from "lucide-react";
-import { useEffect, type ReactNode } from "react";
+import { useId, useRef, type ReactNode } from "react";
+import { Button } from "./Button";
+import { useDialogFocus } from "./useDialogFocus";
 
 type ModalProps = {
   open: boolean;
@@ -13,14 +15,9 @@ type ModalProps = {
 };
 
 export function Modal({ open, onClose, title, children, footer, widthClassName = "max-w-lg" }: ModalProps) {
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, onClose]);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+  useDialogFocus(open, onClose, dialogRef);
 
   if (!open) return null;
 
@@ -29,16 +26,22 @@ export function Modal({ open, onClose, title, children, footer, widthClassName =
     // a field is focused), centred from sm up.
     <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 p-0 sm:items-center sm:p-4">
       <div
+        ref={dialogRef}
         role="dialog"
         aria-modal="true"
-        aria-label={title}
-        className={`flex max-h-[92dvh] w-full flex-col rounded-t-xl bg-white shadow-xl sm:max-h-[85dvh] sm:rounded ${widthClassName}`}
+        // Points at the real heading rather than duplicating the string, so
+        // the accessible name cannot drift from what is on screen.
+        aria-labelledby={titleId}
+        tabIndex={-1}
+        className={`flex max-h-[92dvh] w-full flex-col rounded-t-xl bg-white shadow-xl outline-none sm:max-h-[85dvh] sm:rounded ${widthClassName}`}
       >
         <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3 sm:px-6 sm:py-4">
-          <h2 className="text-lg font-bold text-ink">{title}</h2>
-          <button type="button" onClick={onClose} aria-label="Schließen" className="-mr-1 rounded p-2 text-ink-muted hover:bg-surface">
+          <h2 id={titleId} className="text-lg font-bold text-ink">
+            {title}
+          </h2>
+          <Button variant="icon" onClick={onClose} aria-label="Schließen" className="-mr-1">
             <X className="h-5 w-5" />
-          </button>
+          </Button>
         </div>
         <div className="flex-1 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6">{children}</div>
         {footer && (

components/ui/Picklist.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { X } from "lucide-react";
+import { CONTROL_CLASS } from "./Field";
 
 // Dropdown-to-add, chip-to-remove multi-select for short, fixed option
 // lists (no search needed) — e.g. academic titles. The dropdown only offers
@@ -11,11 +12,16 @@ export function Picklist({
   value,
   onChange,
   placeholder = "Hinzufügen…",
+  // Forwarded onto the <select> so a surrounding <Field> can label it.
+  id,
+  "aria-describedby": describedBy,
 }: {
   options: string[];
   value: string[];
   onChange: (value: string[]) => void;
   placeholder?: string;
+  id?: string;
+  "aria-describedby"?: string;
 }) {
   const available = options.filter((o) => !value.includes(o));
 
@@ -27,12 +33,14 @@ export function Picklist({
     <div className="flex flex-col gap-2">
       <select
         key={value.length}
+        id={id}
+        aria-describedby={describedBy}
         defaultValue=""
         onChange={(e) => {
           if (e.target.value) onChange([...value, e.target.value]);
         }}
         disabled={available.length === 0}
-        className="w-full rounded border border-border px-3 py-2 text-sm disabled:bg-surface disabled:text-ink-muted"
+        className={CONTROL_CLASS}
       >
         <option value="" disabled>
           {available.length > 0 ? placeholder : "Alle Optionen ausgewählt"}

components/ui/SearchInput.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Search } from "lucide-react";
+import { useId } from "react";
+
+// The icon-in-a-box search field used by the employee list, the audit log and
+// the org chart. Each was a hand-rolled copy whose <input> carried only a
+// placeholder — no label at all — and killed its own focus ring with
+// outline-none. A placeholder is not a label: it disappears on the first
+// keystroke and is not reliably announced.
+export function SearchInput({
+  value,
+  onChange,
+  placeholder,
+  label,
+  className = "",
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  /** Visually hidden; this is what a screen reader announces. */
+  label: string;
+  className?: string;
+}) {
+  const id = useId();
+  return (
+    <div
+      className={`flex min-w-[240px] flex-1 items-center gap-2 rounded border border-border bg-white px-3 py-2 focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-brand-500 ${className}`}
+    >
+      <Search className="h-4 w-4 shrink-0 text-ink-muted" aria-hidden />
+      <label htmlFor={id} className="sr-only">
+        {label}
+      </label>
+      <input
+        id={id}
+        type="search"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        // The ring lives on the wrapper so it encloses the icon too.
+        className="w-full text-sm text-ink outline-none placeholder:text-ink-muted"
+      />
+    </div>
+  );
+}

components/ui/SlideOver.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { X } from "lucide-react";
-import { useEffect, type ReactNode } from "react";
+import { useId, useRef, type ReactNode } from "react";
+import { Button } from "./Button";
+import { useDialogFocus } from "./useDialogFocus";
 
 type SlideOverProps = {
   open: boolean;
@@ -13,37 +15,41 @@ type SlideOverProps = {
 };
 
 export function SlideOver({ open, onClose, title, subtitle, children, footer }: SlideOverProps) {
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, onClose]);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+  useDialogFocus(open, onClose, dialogRef);
 
   return (
-    <div className={`fixed inset-0 z-50 ${open ? "pointer-events-auto" : "pointer-events-none"}`} aria-hidden={!open}>
+    // Stays mounted so the slide transition can run, which means a closed
+    // panel's fields are still in the tab order — aria-hidden does not remove
+    // them. `inert` does, and also blocks clicks, so several closed panels no
+    // longer pile up invisible tab stops at the end of the page.
+    <div className="fixed inset-0 z-50" inert={!open}>
       <div
         className={`absolute inset-0 bg-black/40 transition-opacity ${open ? "opacity-100" : "opacity-0"}`}
         onClick={onClose}
+        aria-hidden
       />
       <div
+        ref={dialogRef}
         role="dialog"
         aria-modal="true"
-        aria-label={title}
-        className={`absolute right-0 top-0 flex h-dvh w-full max-w-md flex-col bg-white shadow-xl transition-transform duration-200 ${
+        aria-labelledby={titleId}
+        tabIndex={-1}
+        className={`absolute right-0 top-0 flex h-dvh w-full max-w-md flex-col bg-white shadow-xl outline-none transition-transform duration-200 ${
           open ? "translate-x-0" : "translate-x-full"
         }`}
       >
         <div className="flex shrink-0 items-start justify-between border-b border-border px-4 py-3 pt-[max(0.75rem,env(safe-area-inset-top))] sm:px-6 sm:py-4">
           <div className="min-w-0">
-            <h2 className="text-lg font-bold text-ink">{title}</h2>
+            <h2 id={titleId} className="text-lg font-bold text-ink">
+              {title}
+            </h2>
             {subtitle && <p className="truncate text-sm text-ink-muted">{subtitle}</p>}
           </div>
-          <button type="button" onClick={onClose} aria-label="Schließen" className="-mr-1 rounded p-2 text-ink-muted hover:bg-surface">
+          <Button variant="icon" onClick={onClose} aria-label="Schließen" className="-mr-1">
             <X className="h-5 w-5" />
-          </button>
+          </Button>
         </div>
         <div className="flex-1 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6">{children}</div>
         {footer && (

components/ui/useDialogFocus.ts

@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect, useRef, type RefObject } from "react";
+
+// Everything a dialog owes the keyboard, in one place so Modal and SlideOver
+// cannot drift apart. Both previously handled only Escape: focus stayed on
+// whatever was behind the overlay, Tab walked straight out of the dialog into
+// the page underneath, and closing left focus on <body> — so the next Tab
+// started again from the top of the document.
+const FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+].join(",");
+
+function focusableWithin(container: HTMLElement): HTMLElement[] {
+  return [...container.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(
+    (el) => el.offsetParent !== null || el.getClientRects().length > 0
+  );
+}
+
+export function useDialogFocus(open: boolean, onClose: () => void, containerRef: RefObject<HTMLElement | null>) {
+  const restoreToRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const container = containerRef.current;
+    restoreToRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+
+    // First field rather than the close button: the point of opening these is
+    // to fill them in. autoFocus on a child wins, since it has already run.
+    if (container && !container.contains(document.activeElement)) {
+      const [first] = focusableWithin(container);
+      (first ?? container).focus();
+    }
+
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab" || !container) return;
+
+      const focusable = focusableWithin(container);
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement;
+
+      // Wrap around at both ends, and pull focus back in if it somehow
+      // escaped (a click on the backdrop, say).
+      if (!container.contains(active)) {
+        e.preventDefault();
+        (e.shiftKey ? last : first).focus();
+      } else if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      // Back to whatever opened the dialog, so the next Tab continues from
+      // there instead of restarting at the top of the page.
+      restoreToRef.current?.focus();
+    };
+  }, [open, onClose, containerRef]);
+}