Phase 1: project foundation for Alpenwerk HR

Scaffolds the Next.js 16 / TypeScript strict / Tailwind v3 app per
NEXTJS_REBUILD_SUPERPROMPT.md, and implements the Foundation slice from
the Phase 1 plan:

- Corrected Supabase schema (supabase/schema.sql): org units, employees,
  history, positions, hire drafts, saved reports, audit log, reorg
  scenarios, role-based profiles, salary-masking view, RLS policies,
  auto-derivation triggers, position-number generator.
- Seed script (supabase/seed.ts): ~800 realistic Austrian employees across
  9 divisions / 16 departments / 35 teams, history, 8 open positions, and
  hr_admin/manager test accounts.
- Supabase clients (lib/supabase/*), design tokens (tailwind.config.ts),
  format/color helpers (lib/format.ts, lib/colors.ts).
- Shared UI kit (components/ui): Avatar, StatusChip, Toast, Modal,
  SlideOver, SegmentedControl, Lookup.
- Auth (login page, Server Actions) and proxy.ts (Next 16's replacement
  for middleware) guarding the authenticated route group.
- Shell (Sidebar, Topbar, NewHireButton stub) and the Dashboard page,
  reading live data via employees_directory.

Employees list/detail, hire wizard, action panels, org chart, positions,
reports, and audit log are deferred to later phases per the plan.

components/shell/NewHireButton.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Plus } from "lucide-react";
+import { useToast } from "@/components/ui/Toast";
+
+// Stub for Phase 1: the real 4-step hire wizard (§4.4) ships in a later phase.
+export function NewHireButton() {
+  const { showToast } = useToast();
+
+  return (
+    <button
+      type="button"
+      onClick={() => showToast("Der Neueinstellungs-Assistent folgt in einer späteren Ausbaustufe.", "info")}
+      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"
+    >
+      <Plus className="h-4 w-4" />
+      Neueinstellung
+    </button>
+  );
+}

components/shell/Sidebar.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { BarChart3, Building2, History, LayoutGrid, Network, Users } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const NAV_ITEMS = [
+  { href: "/", label: "Übersicht", icon: LayoutGrid },
+  { href: "/employees", label: "Mitarbeiter:innen", icon: Users },
+  { href: "/orgchart", label: "Organigramm", icon: Network },
+  { href: "/positions", label: "Positionen & Bereiche", icon: Building2 },
+  { href: "/reports", label: "Berichte", icon: BarChart3 },
+  { href: "/audit", label: "Audit-Log", icon: History },
+] as const;
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="fixed left-0 top-0 flex h-full w-[236px] flex-col border-r border-border bg-white">
+      <div className="flex h-14 items-center border-b border-border px-5">
+        <span className="text-base font-extrabold text-brand-700">Alpenwerk HR</span>
+      </div>
+      <ul className="flex-1 space-y-1 px-3 py-4">
+        {NAV_ITEMS.map(({ href, label, icon: Icon }) => {
+          const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
+          return (
+            <li key={href}>
+              <Link
+                href={href}
+                className={`flex items-center gap-3 rounded px-3 py-2 text-sm font-semibold transition-colors ${
+                  active ? "bg-brand-100 text-brand-700" : "text-ink-body hover:bg-surface"
+                }`}
+              >
+                <Icon className="h-4 w-4 shrink-0" />
+                {label}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}

components/shell/Topbar.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { LogOut } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { logout } from "@/actions/auth";
+import { NewHireButton } from "./NewHireButton";
+
+const TITLES: Record<string, string> = {
+  "/": "Übersicht",
+  "/employees": "Mitarbeiter:innen",
+  "/orgchart": "Organigramm",
+  "/positions": "Positionen & Bereiche",
+  "/reports": "Berichte",
+  "/audit": "Audit-Log",
+};
+
+function titleFor(pathname: string): string {
+  if (TITLES[pathname]) return TITLES[pathname];
+  const match = Object.keys(TITLES).find((key) => key !== "/" && pathname.startsWith(key));
+  return match ? TITLES[match] : "Alpenwerk HR";
+}
+
+type TopbarProps = {
+  userLabel: string;
+  role?: string;
+};
+
+export function Topbar({ userLabel, role }: TopbarProps) {
+  const pathname = usePathname();
+
+  return (
+    <header className="flex h-14 items-center justify-between border-b border-border bg-white px-6">
+      <h1 className="text-base font-bold text-ink">{titleFor(pathname)}</h1>
+      <div className="flex items-center gap-4">
+        <NewHireButton />
+        <div className="flex items-center gap-2 border-l border-border pl-4 text-sm">
+          <span className="font-semibold text-ink">{userLabel}</span>
+          {role && <span className="text-xs text-ink-muted">({role === "hr_admin" ? "HR-Admin" : "Manager"})</span>}
+          <form action={logout}>
+            <button type="submit" aria-label="Abmelden" className="ml-2 rounded p-1.5 text-ink-muted hover:bg-surface">
+              <LogOut className="h-4 w-4" />
+            </button>
+          </form>
+        </div>
+      </div>
+    </header>
+  );
+}