Phase 2/3: Employees list/detail + mutation RPCs + action panels

- supabase/functions.sql, functions_2.sql: Postgres RPCs for every
  employee/position/reorg mutation (hire, terminate, transfer, promote,
  start/adjust/return karenz, change data, rehire, create position, staff
  internally, apply/undo reorg). Each resolves manager_id server-side,
  writes history + audit atomically, and enforces hr_admin via
  require_hr_admin() (backed by the existing RLS policy).
- actions/employees.ts, positions.ts, reorg.ts: Server Actions wrapping
  the RPCs, returning success/error for client-side toast handling.
- Employees list (search/filter/pagination) and detail (4 tabs: Stammdaten,
  Vertrag & Gehalt, Organisation, Historie) reading from employees_directory.
- 6 action slide-over panels: Transfer, Promote, Karenz (start/adjust/
  return), Daten aendern (person+contract diffing), Terminate (with direct-
  report reparenting warning + offboarding checklist), Rehire.
- lib/org.ts: shared division/department/team/location lookups.

Verified live: promote mutation updates salary, writes history/audit, and
the detail page reflects it after refresh, no console errors.

Note: the spec's Karenz-verwalten panel only covers employees already on
Karenz; added a start-Karenz mode (Karenzbeginn/geplante Rueckkehr) to
cover the Aktiv-employee case implied by the header button but not
specified in the panel list.

components/employees/EmployeeDetail.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { ArrowRightLeft, Clock, Pencil, RotateCcw, TrendingUp, XCircle } from "lucide-react";
+import { useState } from "react";
+import { Avatar } from "@/components/ui/Avatar";
+import { StatusChip } from "@/components/ui/StatusChip";
+import { tenure } from "@/lib/format";
+import type { Database } from "@/lib/supabase/types";
+import { DatenAendernPanel } from "./panels/DatenAendernPanel";
+import { KarenzPanel } from "./panels/KarenzPanel";
+import { PromotePanel } from "./panels/PromotePanel";
+import { RehirePanel } from "./panels/RehirePanel";
+import { TerminatePanel } from "./panels/TerminatePanel";
+import { TransferPanel } from "./panels/TransferPanel";
+import { HistorieTab } from "./tabs/HistorieTab";
+import { OrganisationTab } from "./tabs/OrganisationTab";
+import { StammdatenTab } from "./tabs/StammdatenTab";
+import { VertragTab } from "./tabs/VertragTab";
+
+type EmployeeRow = Database["public"]["Views"]["employees_directory"]["Row"];
+type Division = Database["public"]["Tables"]["divisions"]["Row"];
+type Department = Database["public"]["Tables"]["departments"]["Row"];
+type Team = Database["public"]["Tables"]["teams"]["Row"];
+type Location = Database["public"]["Tables"]["locations"]["Row"];
+type HistoryRow = Database["public"]["Tables"]["employee_history"]["Row"];
+type MiniEmployee = { id: string; first_name: string; last_name: string; job_title: string; status?: string };
+type OpenPosition = { id: string; position_number: string; title: string; team_id: string; is_lead: boolean };
+
+type EmployeeDetailProps = {
+  employee: EmployeeRow;
+  manager: MiniEmployee | null;
+  directReports: MiniEmployee[];
+  history: HistoryRow[];
+  divisions: Division[];
+  departments: Department[];
+  teams: Team[];
+  locations: Location[];
+  openPositions: OpenPosition[];
+  canEdit: boolean;
+};
+
+type PanelType = "transfer" | "promote" | "karenz" | "daten" | "terminate" | "rehire" | null;
+const TABS = ["Stammdaten", "Vertrag & Gehalt", "Organisation", "Historie"] as const;
+
+export function EmployeeDetail(props: EmployeeDetailProps) {
+  const { employee, manager, directReports, history, divisions, departments, teams, locations, canEdit } = props;
+  const [tab, setTab] = useState<(typeof TABS)[number]>("Stammdaten");
+  const [panel, setPanel] = useState<PanelType>(null);
+
+  const division = divisions.find((d) => d.id === employee.division_id);
+  const team = employee.team_id ? teams.find((t) => t.id === employee.team_id) : undefined;
+  const department = team ? departments.find((d) => d.id === team.department_id) : undefined;
+  const breadcrumb = [division?.name, department?.name, team?.name].filter(Boolean).join(" › ") || "–";
+  const location = locations.find((l) => l.id === employee.location_id);
+
+  const isActive = employee.status === "Aktiv" || employee.status === "Karenz";
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="rounded border border-border bg-white p-6">
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div className="flex items-start gap-4">
+            <Avatar firstName={employee.first_name} lastName={employee.last_name} size="lg" />
+            <div>
+              <div className="flex items-center gap-2">
+                <h2 className="text-xl font-extrabold text-ink">
+                  {employee.first_name} {employee.last_name}
+                </h2>
+                <StatusChip status={employee.status} entryDate={employee.entry_date} />
+              </div>
+              <p className="text-sm text-ink-body">{employee.job_title}</p>
+              <p className="text-xs text-ink-muted">{breadcrumb}</p>
+              <p className="mt-1 text-xs text-ink-muted">
+                Pers.-Nr. {employee.personnel_number}
+                {employee.status !== "Geplant" && <> · Zugehörigkeit: {tenure(employee.entry_date, employee.exit_date)}</>}
+              </p>
+            </div>
+          </div>
+
+          {canEdit && (
+            <div className="flex flex-wrap gap-2">
+              {isActive && (
+                <>
+                  <ActionButton icon={ArrowRightLeft} label="Versetzen" onClick={() => setPanel("transfer")} />
+                  <ActionButton icon={TrendingUp} label="Befördern" onClick={() => setPanel("promote")} />
+                  <ActionButton icon={Clock} label={employee.status === "Karenz" ? "Karenz verwalten" : "Karenz"} onClick={() => setPanel("karenz")} />
+                  <ActionButton icon={Pencil} label="Daten ändern" onClick={() => setPanel("daten")} />
+                  <button
+                    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"
+                  >
+                    <XCircle className="h-4 w-4" /> Austritt
+                  </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"
+                >
+                  <RotateCcw className="h-4 w-4" /> Wiedereinstellen
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex gap-1 border-b border-border">
+        {TABS.map((t) => (
+          <button
+            key={t}
+            onClick={() => setTab(t)}
+            className={`border-b-2 px-4 py-2 text-sm font-semibold ${
+              tab === t ? "border-brand-500 text-brand-700" : "border-transparent text-ink-muted hover:text-ink"
+            }`}
+          >
+            {t}
+          </button>
+        ))}
+      </div>
+
+      <div className="rounded border border-border bg-white p-6">
+        {tab === "Stammdaten" && <StammdatenTab employee={employee} location={location} />}
+        {tab === "Vertrag & Gehalt" && <VertragTab employee={employee} />}
+        {tab === "Organisation" && <OrganisationTab manager={manager} directReports={directReports} breadcrumb={breadcrumb} />}
+        {tab === "Historie" && <HistorieTab history={history} />}
+      </div>
+
+      {canEdit && (
+        <>
+          <TransferPanel
+            open={panel === "transfer"}
+            onClose={() => setPanel(null)}
+            employee={employee}
+            divisions={divisions}
+            departments={departments}
+            teams={teams}
+            currentTeamId={employee.team_id}
+          />
+          <PromotePanel open={panel === "promote"} onClose={() => setPanel(null)} employee={employee} />
+          <KarenzPanel open={panel === "karenz"} onClose={() => setPanel(null)} employee={employee} />
+          <DatenAendernPanel open={panel === "daten"} onClose={() => setPanel(null)} employee={employee} />
+          <TerminatePanel open={panel === "terminate"} onClose={() => setPanel(null)} employee={employee} directReportCount={directReports.length} />
+          <RehirePanel open={panel === "rehire"} onClose={() => setPanel(null)} employee={employee} />
+        </>
+      )}
+    </div>
+  );
+}
+
+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">
+      <Icon className="h-4 w-4" /> {label}
+    </button>
+  );
+}

components/employees/EmployeeFilters.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { Search } from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+
+type EmployeeFiltersProps = {
+  divisions: { id: string; name: string }[];
+  locations: { id: string; name: string }[];
+};
+
+const STATUS_OPTIONS = ["Aktiv", "Karenz", "Geplant", "Ausgetreten"] as const;
+
+export function EmployeeFilters({ divisions, locations }: EmployeeFiltersProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [q, setQ] = useState(searchParams.get("q") ?? "");
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      const current = new URLSearchParams(searchParams.toString());
+      if (q) current.set("q", q);
+      else current.delete("q");
+      current.delete("page");
+      const next = current.toString();
+      if (next !== searchParams.toString()) router.push(`${pathname}?${next}`);
+    }, 300);
+    return () => clearTimeout(handle);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [q]);
+
+  function updateParam(key: string, value: string) {
+    const params = new URLSearchParams(searchParams.toString());
+    if (value) params.set(key, value);
+    else params.delete(key);
+    params.delete("page");
+    router.push(`${pathname}?${params.toString()}`);
+  }
+
+  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>
+      <select
+        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"
+      >
+        <option value="">Alle Bereiche</option>
+        {divisions.map((d) => (
+          <option key={d.id} value={d.id}>
+            {d.name}
+          </option>
+        ))}
+      </select>
+      <select
+        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"
+      >
+        <option value="">Alle Status</option>
+        {STATUS_OPTIONS.map((s) => (
+          <option key={s} value={s}>
+            {s}
+          </option>
+        ))}
+      </select>
+      <select
+        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"
+      >
+        <option value="">Alle Standorte</option>
+        {locations.map((l) => (
+          <option key={l.id} value={l.id}>
+            {l.name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

components/employees/panels/DatenAendernPanel.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { changeEmployeeData } from "@/actions/employees";
+import { SlideOver } from "@/components/ui/SlideOver";
+import { useToast } from "@/components/ui/Toast";
+import type { ContractType, Database, EmploymentType, GenderType } from "@/lib/supabase/types";
+
+type EmployeeRow = Database["public"]["Views"]["employees_directory"]["Row"];
+
+const NATIONALITIES = ["Österreich", "Deutschland", "Tschechien", "Slowenien", "Türkei", "Serbien", "Kroatien", "Bosnien", "Ungarn", "Andere"];
+const ADDRESS_COUNTRIES = ["Österreich", "Deutschland", "Tschechien", "Slowenien", "Andere"];
+
+export function DatenAendernPanel({ open, onClose, employee }: { open: boolean; onClose: () => void; employee: EmployeeRow }) {
+  const { showToast } = useToast();
+  const router = useRouter();
+  const [pending, setPending] = useState(false);
+
+  const [firstName, setFirstName] = useState(employee.first_name);
+  const [lastName, setLastName] = useState(employee.last_name);
+  const [gender, setGender] = useState<GenderType>(employee.gender);
+  const [birthDate, setBirthDate] = useState(employee.birth_date);
+  const [svNummer, setSvNummer] = useState(employee.sv_nummer ?? "");
+  const [nationality, setNationality] = useState(employee.nationality);
+  const [address, setAddress] = useState(employee.address ?? "");
+  const [addressCountry, setAddressCountry] = useState(employee.address_country ?? "Österreich");
+  const [email, setEmail] = useState(employee.email);
+  const [phone, setPhone] = useState(employee.phone ?? "");
+
+  const [employmentType, setEmploymentType] = useState<EmploymentType>(employee.employment_type);
+  const [weeklyHours, setWeeklyHours] = useState(String(employee.weekly_hours));
+  const [contractType, setContractType] = useState<ContractType>(employee.contract_type);
+  const [contractEndDate, setContractEndDate] = useState(employee.contract_end_date ?? "");
+
+  function handleEmploymentTypeChange(value: EmploymentType) {
+    setEmploymentType(value);
+    if (value === "Vollzeit") setWeeklyHours("38.5");
+  }
+
+  async function handleSubmit() {
+    if (employmentType === "Teilzeit" && (Number(weeklyHours) <= 0 || Number(weeklyHours) >= 38.5)) {
+      showToast("Wochenstunden bei Teilzeit müssen zwischen 0 und 38,5 liegen.", "error");
+      return;
+    }
+    if (contractType === "befristet" && !contractEndDate) {
+      showToast("Bei befristetem Vertrag ist ein Enddatum erforderlich.", "error");
+      return;
+    }
+    setPending(true);
+    const result = await changeEmployeeData({
+      employee_id: employee.id,
+      person: {
+        first_name: firstName,
+        last_name: lastName,
+        gender,
+        birth_date: birthDate,
+        sv_nummer: svNummer,
+        nationality,
+        address,
+        address_country: addressCountry,
+        email,
+        phone,
+      },
+      contract: {
+        employment_type: employmentType,
+        weekly_hours: Number(weeklyHours),
+        contract_type: contractType,
+        contract_end_date: contractType === "befristet" ? contractEndDate : "",
+      },
+    });
+    setPending(false);
+    if (result.success) {
+      showToast("Daten aktualisiert.");
+      router.refresh();
+      onClose();
+    } else {
+      showToast(result.error ?? "Fehler beim Speichern.", "error");
+    }
+  }
+
+  return (
+    <SlideOver
+      open={open}
+      onClose={onClose}
+      title="Daten ändern"
+      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">
+            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"
+          >
+            Speichern
+          </button>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-6">
+        <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-2 gap-3">
+              <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>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <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>
+            <div>
+              <label className="mb-1 block text-xs font-semibold text-ink-muted">SV-Nummer</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-xs font-semibold text-ink-muted">Staatsbürgerschaft</label>
+              <select value={nationality} onChange={(e) => setNationality(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
+                {NATIONALITIES.map((n) => (
+                  <option key={n} value={n}>
+                    {n}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="mb-1 block text-xs font-semibold text-ink-muted">Adresse</label>
+                <input value={address} onChange={(e) => setAddress(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">Land</label>
+                <select value={addressCountry} onChange={(e) => setAddressCountry(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
+                  {ADDRESS_COUNTRIES.map((c) => (
+                    <option key={c} value={c}>
+                      {c}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </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" />
+            </div>
+          </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>
+            {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>
+            )}
+          </div>
+        </div>
+      </div>
+    </SlideOver>
+  );
+}

components/employees/panels/KarenzPanel.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { adjustKarenzReturn, recordKarenzReturn, startKarenz } from "@/actions/employees";
+import { SegmentedControl } from "@/components/ui/SegmentedControl";
+import { SlideOver } from "@/components/ui/SlideOver";
+import { useToast } from "@/components/ui/Toast";
+import { fmtDate } from "@/lib/format";
+import type { Database } from "@/lib/supabase/types";
+
+type EmployeeRow = Database["public"]["Views"]["employees_directory"]["Row"];
+type Mode = "adjust" | "return";
+type EmploymentMode = "unverändert" | "Vollzeit" | "Teilzeit";
+
+export function KarenzPanel({ open, onClose, employee }: { open: boolean; onClose: () => void; employee: EmployeeRow }) {
+  const { showToast } = useToast();
+  const router = useRouter();
+  const isOnKarenz = employee.status === "Karenz";
+  const [mode, setMode] = useState<Mode>("adjust");
+  const [pending, setPending] = useState(false);
+
+  const [karenzStart, setKarenzStart] = useState("");
+  const [plannedReturn, setPlannedReturn] = useState("");
+  const [startNote, setStartNote] = useState("");
+
+  const [newReturnDate, setNewReturnDate] = useState(employee.karenz_return_date ?? "");
+  const [adjustNote, setAdjustNote] = useState("");
+
+  const [returnDate, setReturnDate] = useState("");
+  const [employmentMode, setEmploymentMode] = useState<EmploymentMode>("unverändert");
+  const [weeklyHours, setWeeklyHours] = useState("20");
+
+  const diffDays =
+    isOnKarenz && employee.karenz_return_date && newReturnDate
+      ? Math.round((new Date(newReturnDate).getTime() - new Date(employee.karenz_return_date).getTime()) / 86400000)
+      : 0;
+
+  async function handleStart() {
+    if (!karenzStart || !plannedReturn) {
+      showToast("Bitte beide Daten angeben.", "error");
+      return;
+    }
+    setPending(true);
+    const result = await startKarenz({ employee_id: employee.id, karenz_start_date: karenzStart, planned_return_date: plannedReturn, note: startNote });
+    setPending(false);
+    if (result.success) {
+      showToast("Karenz erfasst.");
+      router.refresh();
+      onClose();
+    } else {
+      showToast(result.error ?? "Fehler.", "error");
+    }
+  }
+
+  async function handleAdjust() {
+    if (!newReturnDate || newReturnDate === employee.karenz_return_date) {
+      showToast("Bitte ein neues Rückkehrdatum angeben.", "error");
+      return;
+    }
+    if (new Date(newReturnDate) <= new Date()) {
+      showToast("Rückkehrdatum muss in der Zukunft liegen.", "error");
+      return;
+    }
+    setPending(true);
+    const result = await adjustKarenzReturn({ employee_id: employee.id, new_return_date: newReturnDate, note: adjustNote });
+    setPending(false);
+    if (result.success) {
+      showToast("Rückkehrdatum angepasst.");
+      router.refresh();
+      onClose();
+    } else {
+      showToast(result.error ?? "Fehler.", "error");
+    }
+  }
+
+  async function handleReturn() {
+    if (!returnDate) {
+      showToast("Bitte Rückkehrdatum angeben.", "error");
+      return;
+    }
+    if (employmentMode === "Teilzeit" && (Number(weeklyHours) <= 0 || Number(weeklyHours) >= 38.5)) {
+      showToast("Wochenstunden müssen zwischen 0 und 38,5 liegen.", "error");
+      return;
+    }
+    setPending(true);
+    const result = await recordKarenzReturn({
+      employee_id: employee.id,
+      return_date: returnDate,
+      employment_mode: employmentMode,
+      weekly_hours: employmentMode === "Teilzeit" ? Number(weeklyHours) : undefined,
+    });
+    setPending(false);
+    if (result.success) {
+      showToast("Wiedereintritt erfasst.");
+      router.refresh();
+      onClose();
+    } else {
+      showToast(result.error ?? "Fehler.", "error");
+    }
+  }
+
+  return (
+    <SlideOver
+      open={open}
+      onClose={onClose}
+      title={isOnKarenz ? "Karenz verwalten" : "Karenz"}
+      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">
+            Abbrechen
+          </button>
+          {!isOnKarenz && (
+            <button onClick={handleStart} disabled={pending} className="rounded bg-warning-text px-4 py-2 text-sm font-semibold text-white disabled:opacity-50">
+              Karenz erfassen
+            </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">
+              Speichern
+            </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">
+              Wiedereintritt erfassen
+            </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>
+        </div>
+      )}
+
+      {isOnKarenz && (
+        <div className="flex flex-col gap-4">
+          <SegmentedControl<Mode>
+            value={mode}
+            onChange={setMode}
+            options={[
+              { value: "adjust", label: "Rückkehr anpassen" },
+              { value: "return", label: "Wiedereintritt erfassen" },
+            ]}
+          />
+
+          {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>
+              {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>
+            </>
+          )}
+
+          {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>
+              {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>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </SlideOver>
+  );
+}

components/employees/panels/PromotePanel.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { promoteEmployee } from "@/actions/employees";
+import { SlideOver } from "@/components/ui/SlideOver";
+import { useToast } from "@/components/ui/Toast";
+import type { Database, PaygradeType } from "@/lib/supabase/types";
+
+type EmployeeRow = Database["public"]["Views"]["employees_directory"]["Row"];
+
+const PAYGRADES: { value: PaygradeType; label: string }[] = [
+  { value: "A", label: "A – Einstieg" },
+  { value: "B", label: "B – Qualifiziert" },
+  { value: "C", label: "C – Erfahren" },
+  { value: "D", label: "D – Spezialist:in" },
+  { value: "E", label: "E – Teamleitung" },
+  { value: "F", label: "F – Bereichsleitung / GF" },
+];
+
+export function PromotePanel({ open, onClose, employee }: { open: boolean; onClose: () => void; employee: EmployeeRow }) {
+  const { showToast } = useToast();
+  const router = useRouter();
+  const [effectiveDate, setEffectiveDate] = useState("");
+  const [newTitle, setNewTitle] = useState(employee.job_title);
+  const [newSalary, setNewSalary] = useState(String(employee.monthly_salary_gross ?? ""));
+  const [paygrade, setPaygrade] = useState<PaygradeType>(employee.paygrade);
+  const [pending, setPending] = useState(false);
+
+  async function handleSubmit() {
+    if (!effectiveDate || !newTitle || !newSalary) {
+      showToast("Bitte alle Pflichtfelder ausfüllen.", "error");
+      return;
+    }
+    setPending(true);
+    const result = await promoteEmployee({
+      employee_id: employee.id,
+      effective_date: effectiveDate,
+      new_title: newTitle,
+      new_salary: Number(newSalary),
+      new_paygrade: paygrade,
+    });
+    setPending(false);
+    if (result.success) {
+      showToast(`${employee.first_name} ${employee.last_name} wurde befördert.`);
+      router.refresh();
+      onClose();
+    } else {
+      showToast(result.error ?? "Fehler beim Speichern.", "error");
+    }
+  }
+
+  return (
+    <SlideOver
+      open={open}
+      onClose={onClose}
+      title="Beförderung"
+      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">
+            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"
+          >
+            Befördern
+          </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">Neues Bruttogehalt (14x/Jahr)*</label>
+          <input
+            type="number"
+            value={newSalary}
+            onChange={(e) => setNewSalary(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>
+      </div>
+    </SlideOver>
+  );
+}

components/employees/panels/RehirePanel.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { rehireEmployee } from "@/actions/employees";
+import { SlideOver } from "@/components/ui/SlideOver";
+import { useToast } from "@/components/ui/Toast";
+import { fmtDate } from "@/lib/format";
+import type { Database } from "@/lib/supabase/types";
+
+type EmployeeRow = Database["public"]["Views"]["employees_directory"]["Row"];
+
+export function RehirePanel({ open, onClose, employee }: { open: boolean; onClose: () => void; employee: EmployeeRow }) {
+  const { showToast } = useToast();
+  const router = useRouter();
+  const [rehireDate, setRehireDate] = useState("");
+  const [pending, setPending] = useState(false);
+
+  async function handleSubmit() {
+    if (!rehireDate) {
+      showToast("Bitte ein Wiedereintrittsdatum angeben.", "error");
+      return;
+    }
+    setPending(true);
+    const result = await rehireEmployee({ employee_id: employee.id, rehire_date: rehireDate });
+    setPending(false);
+    if (result.success) {
+      showToast(`${employee.first_name} ${employee.last_name} wurde wiedereingestellt.`);
+      router.refresh();
+      onClose();
+    } else {
+      showToast(result.error ?? "Fehler beim Speichern.", "error");
+    }
+  }
+
+  return (
+    <SlideOver
+      open={open}
+      onClose={onClose}
+      title="Wiedereinstellung"
+      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">
+            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"
+          >
+            Wiedereinstellen
+          </button>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-4">
+        <div className="rounded border border-border bg-surface p-3 text-sm">
+          <p className="text-xs font-semibold uppercase tracking-wide text-ink-muted">Letzte Position</p>
+          <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>
+      </div>
+    </SlideOver>
+  );
+}

components/employees/panels/TerminatePanel.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { terminateEmployee } from "@/actions/employees";
+import { SlideOver } from "@/components/ui/SlideOver";
+import { useToast } from "@/components/ui/Toast";
+import type { Database } from "@/lib/supabase/types";
+
+type EmployeeRow = Database["public"]["Views"]["employees_directory"]["Row"];
+
+const EXIT_REASONS = ["Einvernehmliche Auflösung", "Kündigung AN", "Kündigung AG", "Befristungsablauf", "Pensionierung", "Entlassung"];
+const CHECKLIST_ITEMS = ["IT-Zugänge deaktivieren", "Hardware retournieren", "ÖGK-Abmeldung", "Endabrechnung & Dienstzeugnis"];
+
+type TerminatePanelProps = {
+  open: boolean;
+  onClose: () => void;
+  employee: EmployeeRow;
+  directReportCount: number;
+};
+
+export function TerminatePanel({ open, onClose, employee, directReportCount }: TerminatePanelProps) {
+  const { showToast } = useToast();
+  const router = useRouter();
+  const [exitDate, setExitDate] = useState("");
+  const [reason, setReason] = useState(EXIT_REASONS[0]);
+  const [note, setNote] = useState("");
+  const [checked, setChecked] = useState<boolean[]>(CHECKLIST_ITEMS.map(() => false));
+  const [pending, setPending] = useState(false);
+
+  async function handleSubmit() {
+    if (!exitDate) {
+      showToast("Bitte ein Austrittsdatum angeben.", "error");
+      return;
+    }
+    setPending(true);
+    const result = await terminateEmployee({ employee_id: employee.id, exit_date: exitDate, exit_reason: reason, note });
+    setPending(false);
+    if (result.success) {
+      showToast(`Austritt für ${employee.first_name} ${employee.last_name} erfasst.`);
+      router.refresh();
+      onClose();
+    } else {
+      showToast(result.error ?? "Fehler beim Speichern.", "error");
+    }
+  }
+
+  return (
+    <SlideOver
+      open={open}
+      onClose={onClose}
+      title="Austritt"
+      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">
+            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"
+          >
+            Austritt bestätigen
+          </button>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-4">
+        {directReportCount > 0 && (
+          <div className="rounded bg-warning-bg px-3 py-2 text-sm text-warning-text">
+            {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>
+          <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">
+                <input
+                  type="checkbox"
+                  checked={checked[i]}
+                  onChange={(e) => setChecked((prev) => prev.map((c, idx) => (idx === i ? e.target.checked : c)))}
+                />
+                {item}
+              </label>
+            ))}
+          </div>
+        </div>
+      </div>
+    </SlideOver>
+  );
+}

components/employees/panels/TransferPanel.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useMemo, useState } from "react";
+import { transferEmployee } from "@/actions/employees";
+import { SlideOver } from "@/components/ui/SlideOver";
+import { useToast } from "@/components/ui/Toast";
+import type { Database } from "@/lib/supabase/types";
+
+type EmployeeRow = Database["public"]["Views"]["employees_directory"]["Row"];
+type Division = Database["public"]["Tables"]["divisions"]["Row"];
+type Department = Database["public"]["Tables"]["departments"]["Row"];
+type Team = Database["public"]["Tables"]["teams"]["Row"];
+
+type TransferPanelProps = {
+  open: boolean;
+  onClose: () => void;
+  employee: EmployeeRow;
+  divisions: Division[];
+  departments: Department[];
+  teams: Team[];
+  currentTeamId: string | null;
+};
+
+export function TransferPanel({ open, onClose, employee, divisions, departments, teams, currentTeamId }: TransferPanelProps) {
+  const { showToast } = useToast();
+  const router = useRouter();
+  const [effectiveDate, setEffectiveDate] = useState("");
+  const [divisionId, setDivisionId] = useState(employee.division_id);
+  const [teamId, setTeamId] = useState(currentTeamId ?? "");
+  const [newTitle, setNewTitle] = useState("");
+  const [pending, setPending] = useState(false);
+
+  const teamsInDivision = useMemo(() => {
+    const deptIds = new Set(departments.filter((d) => d.division_id === divisionId).map((d) => d.id));
+    return teams.filter((t) => deptIds.has(t.department_id));
+  }, [departments, teams, divisionId]);
+
+  async function handleSubmit() {
+    if (!effectiveDate || !teamId) {
+      showToast("Bitte Datum und Zielteam angeben.", "error");
+      return;
+    }
+    setPending(true);
+    const result = await transferEmployee({
+      employee_id: employee.id,
+      effective_date: effectiveDate,
+      new_team_id: teamId,
+      new_title: newTitle || undefined,
+    });
+    setPending(false);
+    if (result.success) {
+      showToast(`${employee.first_name} ${employee.last_name} wurde versetzt.`);
+      router.refresh();
+      onClose();
+    } else {
+      showToast(result.error ?? "Fehler beim Speichern.", "error");
+    }
+  }
+
+  return (
+    <SlideOver
+      open={open}
+      onClose={onClose}
+      title="Versetzung"
+      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">
+            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"
+          >
+            Versetzen
+          </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>
+      </div>
+    </SlideOver>
+  );
+}

components/employees/tabs/HistorieTab.tsx

@@ -0,0 +1,35 @@
+import { actionBadgeStyle } from "@/lib/colors";
+import { fmtDate } from "@/lib/format";
+import type { Database } from "@/lib/supabase/types";
+
+type HistoryRow = Database["public"]["Tables"]["employee_history"]["Row"];
+
+export function HistorieTab({ history }: { history: HistoryRow[] }) {
+  const today = new Date().toISOString().slice(0, 10);
+
+  if (history.length === 0) {
+    return <p className="text-sm text-ink-muted">Keine Historieneinträge vorhanden.</p>;
+  }
+
+  return (
+    <ul className="flex flex-col divide-y divide-border">
+      {history.map((h) => {
+        const isFuture = h.event_date > today;
+        return (
+          <li key={h.id} className="py-3">
+            <div className="flex flex-wrap items-center gap-2">
+              <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${actionBadgeStyle(h.event_type)}`}>{h.event_type}</span>
+              <span className="text-sm text-ink-muted">{fmtDate(h.event_date)}</span>
+              {isFuture && (
+                <span className="rounded-full bg-warning-bg px-2 py-0.5 text-xs font-semibold text-warning-text">
+                  ⏱ zukünftig – wirksam ab {fmtDate(h.event_date)}
+                </span>
+              )}
+            </div>
+            <p className="mt-1 text-sm text-ink">{h.description}</p>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

components/employees/tabs/OrganisationTab.tsx

@@ -0,0 +1,59 @@
+import Link from "next/link";
+import { Avatar } from "@/components/ui/Avatar";
+
+type MiniEmployee = { id: string; first_name: string; last_name: string; job_title: string; status?: string };
+
+type OrganisationTabProps = {
+  manager: MiniEmployee | null;
+  directReports: MiniEmployee[];
+  breadcrumb: string;
+};
+
+export function OrganisationTab({ manager, directReports, breadcrumb }: OrganisationTabProps) {
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h3 className="text-xs font-semibold uppercase tracking-wide text-ink-muted">Organisationseinheit</h3>
+        <p className="mt-1 text-sm text-ink">{breadcrumb}</p>
+      </div>
+
+      <div>
+        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Führungskraft</h3>
+        {manager ? (
+          <Link href={`/employees/${manager.id}`} className="flex w-fit items-center gap-3 rounded border border-border p-3 hover:bg-surface">
+            <Avatar firstName={manager.first_name} lastName={manager.last_name} />
+            <div>
+              <div className="text-sm font-semibold text-ink">
+                {manager.first_name} {manager.last_name}
+              </div>
+              <div className="text-xs text-ink-muted">{manager.job_title}</div>
+            </div>
+          </Link>
+        ) : (
+          <p className="text-sm text-ink-muted">Keine Führungskraft (Geschäftsführung)</p>
+        )}
+      </div>
+
+      <div>
+        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Direkte Berichte ({directReports.length})</h3>
+        {directReports.length > 0 ? (
+          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+            {directReports.map((r) => (
+              <Link key={r.id} href={`/employees/${r.id}`} className="flex items-center gap-3 rounded border border-border p-3 hover:bg-surface">
+                <Avatar firstName={r.first_name} lastName={r.last_name} />
+                <div>
+                  <div className="text-sm font-semibold text-ink">
+                    {r.first_name} {r.last_name}
+                  </div>
+                  <div className="text-xs text-ink-muted">{r.job_title}</div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        ) : (
+          <p className="text-sm text-ink-muted">Keine direkten Berichte.</p>
+        )}
+      </div>
+    </div>
+  );
+}

components/employees/tabs/StammdatenTab.tsx

@@ -0,0 +1,28 @@
+import { fmtAge, fmtDate } from "@/lib/format";
+import type { Database } from "@/lib/supabase/types";
+
+type EmployeeRow = Database["public"]["Views"]["employees_directory"]["Row"];
+type Location = Database["public"]["Tables"]["locations"]["Row"];
+
+export function StammdatenTab({ employee, location }: { employee: EmployeeRow; location?: Location }) {
+  const rows: [string, string][] = [
+    ["Geburtsdatum", `${fmtDate(employee.birth_date)} (${fmtAge(employee.birth_date)} Jahre)`],
+    ["SV-Nummer", employee.sv_nummer ?? "–"],
+    ["Staatsbürgerschaft", employee.nationality],
+    ["E-Mail", employee.email],
+    ["Telefon", employee.phone ?? "–"],
+    ["Standort", location ? `${location.name} (${location.country})` : "–"],
+    ["Adresse", employee.address ?? "–"],
+    ["Geschlecht", employee.gender === "m" ? "männlich" : "weiblich"],
+  ];
+  return (
+    <dl className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
+      {rows.map(([label, value]) => (
+        <div key={label}>
+          <dt className="text-xs font-semibold uppercase tracking-wide text-ink-muted">{label}</dt>
+          <dd className="mt-1 text-sm text-ink">{value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

components/employees/tabs/VertragTab.tsx

@@ -0,0 +1,38 @@
+import { fmtDate, fmtEUR } from "@/lib/format";
+import type { Database } from "@/lib/supabase/types";
+
+type EmployeeRow = Database["public"]["Views"]["employees_directory"]["Row"];
+
+const PAYGRADE_LABELS: Record<string, string> = {
+  A: "A – Einstieg",
+  B: "B – Qualifiziert",
+  C: "C – Erfahren",
+  D: "D – Spezialist:in",
+  E: "E – Teamleitung",
+  F: "F – Bereichsleitung / GF",
+};
+
+export function VertragTab({ employee }: { employee: EmployeeRow }) {
+  const rows: [string, string][] = [
+    ["Eintrittsdatum", fmtDate(employee.entry_date)],
+    ["Vertragsart", employee.contract_type === "befristet" ? `befristet bis ${fmtDate(employee.contract_end_date)}` : "unbefristet"],
+    ["Kollektivvertrag", "Metalltechnische Industrie"],
+    ["Beschäftigungsausmaß", employee.employment_type],
+    ["Wochenstunden", `${employee.weekly_hours} h`],
+    ["Urlaubsanspruch", "25 Tage"],
+    ["Paygrade", PAYGRADE_LABELS[employee.paygrade] ?? employee.paygrade],
+    ["Bruttogehalt (14x/Jahr)", fmtEUR(employee.monthly_salary_gross)],
+  ];
+  if (employee.exit_date) rows.push(["Austrittsdatum", fmtDate(employee.exit_date)]);
+
+  return (
+    <dl className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
+      {rows.map(([label, value]) => (
+        <div key={label}>
+          <dt className="text-xs font-semibold uppercase tracking-wide text-ink-muted">{label}</dt>
+          <dd className="mt-1 text-sm text-ink">{value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}