feat: Projektgerüst, gehärteten Betriebsstand und Prozess aufsetzen

Legt die Grundlage, auf der alle weiteren Meilensteine nur noch Fachlichkeit
ergänzen: Next 16 mit App Router und TypeScript strict, Tailwind 4, Prisma 7,
Vitest 5, Playwright, ESLint, Prettier und die Hooks für Lint und Commits.

Zwei Dinge sind bewusst so gebaut und durch Tests festgehalten:

Die Datenbank ist im Betriebsstand von außen nicht erreichbar. Sie hat kein
ports:-Mapping und hängt allein im Netz "intern", das ohne Gateway läuft; nur
"web" kommt zusätzlich nach draußen. tests/betriebsstand.test.ts schlägt an,
falls ein Port-Mapping zurückkehrt. Geprüft, nicht behauptet: docker compose up
startet den Stack, 5432 ist vom Host aus zu, aus "web" offen.

pnpm pruefe:doku hält Dokumentation und Code zusammen — Version im Changelog,
Issue-Dateien gegen ihre Übersicht, keine Verweise auf fehlende Dateien, keine
fehlenden Bilder. Das Skript wurde gegen vier eingebaute Fehler gegengeprüft.

Drei Versions-Obergrenzen sind nötig und in CLAUDE.md begründet: eslint bleibt
auf 9.x, weil eslint-plugin-react keinen Nachfolger für eslint 10 hat und das
Regelwerk sonst beim Laden abbricht; typescript bleibt auf 6.0.x, weil
typescript-eslint TypeScript 7 noch nicht unterstützt; prisma ist exakt auf
7.10.0 gepinnt, weil sein latest-Tag auf einen 8.0-RC zeigt, der von
@prisma/client aber nicht.

Auth.js entfällt entgegen der ursprünglichen Vorgabe: v5 steht dauerhaft auf
Beta, das Projekt ist im Wartungsmodus und sein Prisma-Adapter deckt Prisma 7
nicht ab. Stattdessen openid-client und jose, wie in ProxLedger.

Dieser erste Commit geht direkt auf main, weil es noch keinen Branch gibt, von
dem abzuzweigen wäre. Ab #006 läuft jedes Issue über einen eigenen Branch.

Closes #5

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/components/bildmarke.tsx

@@ -0,0 +1,24 @@
+/**
+ * Bildmarke: die Checkbox aus dem Terminal, `[ ✓ ]`, als Monolinie.
+ * `currentColor`, damit sie in der Oberflaeche Lime und im Druck dunkel ist.
+ */
+export function Bildmarke({ className, titel }: { className?: string; titel?: string }) {
+  return (
+    <svg
+      viewBox="0 0 48 48"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      role={titel ? "img" : "presentation"}
+      aria-label={titel}
+      aria-hidden={titel ? undefined : true}
+    >
+      <path d="M15 8H9v32h6" />
+      <path d="M33 8h6v32h-6" />
+      <path d="M17.5 24.5l5 5 9.5-11" />
+    </svg>
+  );
+}

src/components/huelle.tsx

@@ -0,0 +1,150 @@
+import Link from "next/link";
+import {
+  Archive,
+  Building2,
+  FileText,
+  LayoutDashboard,
+  ListChecks,
+  Menu,
+  ScanLine,
+  Settings,
+  Users,
+  type LucideIcon,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Bildmarke } from "@/components/bildmarke";
+import { Wortmarke } from "@/components/wortmarke";
+import { navigationFuer, type Betriebsmodus, type NavEintrag } from "@/lib/navigation";
+import { cn } from "@/lib/utils";
+import { versionText } from "@/lib/version";
+
+const SYMBOLE: Record<string, LucideIcon> = {
+  LayoutDashboard,
+  ListChecks,
+  FileText,
+  Users,
+  Building2,
+  Archive,
+  Settings,
+};
+
+function NavListe({ modus, aktiv }: { modus: Betriebsmodus; aktiv: string }) {
+  return (
+    <ul className="flex flex-col gap-1">
+      {navigationFuer(modus).map((eintrag) => (
+        <li key={eintrag.pfad}>
+          <NavZeile eintrag={eintrag} aktiv={eintrag.pfad === aktiv} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function NavZeile({ eintrag, aktiv }: { eintrag: NavEintrag; aktiv: boolean }) {
+  const Symbol = SYMBOLE[eintrag.symbol] ?? LayoutDashboard;
+  const inhalt = (
+    <>
+      <Symbol className="size-[18px] shrink-0" strokeWidth={1.75} aria-hidden="true" />
+      <span className="truncate">{eintrag.beschriftung}</span>
+    </>
+  );
+  const gemeinsam =
+    "flex min-h-11 items-center gap-3 rounded-pille px-3 text-sm transition-colors md:min-h-10";
+
+  // Noch nicht vorhandene Seiten werden nicht verlinkt, damit kein Klick ins Leere geht.
+  if (!eintrag.verfuegbar) {
+    return (
+      <span
+        className={`${gemeinsam} cursor-not-allowed text-nebentext/50`}
+        title={`Kommt mit #${String(eintrag.ausIssue).padStart(3, "0")}`}
+        aria-disabled="true"
+      >
+        {inhalt}
+      </span>
+    );
+  }
+
+  return (
+    <Link
+      href={eintrag.pfad}
+      aria-current={aktiv ? "page" : undefined}
+      className={`${gemeinsam} ${
+        aktiv
+          ? "bg-akzent-flaeche font-semibold text-akzent"
+          : "text-nebentext hover:bg-flaeche-hoch hover:text-text"
+      }`}
+    >
+      {inhalt}
+    </Link>
+  );
+}
+
+function ScannenKnopf({ className }: { className?: string }) {
+  return (
+    // Pille statt der shadcn-Vorgabe rounded-lg, und 44 px am Handy / 40 px am
+    // Schreibtisch statt 32 px – so verlangt es die Gestaltungsvorgabe.
+    <Button asChild className={cn("h-11 gap-2 rounded-pille px-4 text-sm font-semibold md:h-10", className)}>
+      <Link href="/scannen">
+        <ScanLine className="size-[18px]" strokeWidth={2} aria-hidden="true" />
+        Scannen
+      </Link>
+    </Button>
+  );
+}
+
+/**
+ * Huelle der Anwendung: dunkle Seitenleiste am Schreibtisch, am Handy eine
+ * Kopfzeile mit aufklappbarem Menue. Der Scannen-Knopf sitzt an beiden Stellen
+ * ganz oben, weil der Techniker damit anfaengt.
+ */
+export function Huelle({
+  children,
+  modus = "INTERN",
+  aktiv = "/",
+}: {
+  children: React.ReactNode;
+  modus?: Betriebsmodus;
+  aktiv?: string;
+}) {
+  return (
+    <div className="min-h-dvh md:flex">
+      {/* Handy: Kopfzeile mit Menue */}
+      <header className="sticky top-0 z-20 border-b border-linie bg-flaeche md:hidden">
+        <div className="flex items-center gap-3 px-4 py-3">
+          <Bildmarke className="size-6 shrink-0 text-akzent" />
+          <Wortmarke className="text-lg" />
+          <ScannenKnopf className="ml-auto" />
+          <details className="relative">
+            <summary
+              className="flex size-11 cursor-pointer list-none items-center justify-center rounded-pille text-nebentext"
+              aria-label="Menü"
+            >
+              <Menu className="size-5" strokeWidth={1.75} aria-hidden="true" />
+            </summary>
+            <nav className="absolute right-0 z-30 mt-2 w-56 rounded-karte border border-linie bg-flaeche-hoch p-2">
+              <NavListe modus={modus} aktiv={aktiv} />
+            </nav>
+          </details>
+        </div>
+      </header>
+
+      {/* Schreibtisch: Seitenleiste */}
+      <aside className="hidden w-60 shrink-0 flex-col border-r border-linie bg-flaeche p-4 md:flex">
+        <Link href="/" className="mb-4 flex items-center gap-2">
+          <Bildmarke className="size-7 shrink-0 text-akzent" />
+          <Wortmarke className="text-xl" />
+        </Link>
+        <ScannenKnopf className="mb-6" />
+        <nav aria-label="Hauptnavigation">
+          <NavListe modus={modus} aktiv={aktiv} />
+        </nav>
+        <span className="mono mt-auto pt-6 text-xs text-nebentext">{versionText()}</span>
+      </aside>
+
+      <main className="min-w-0 flex-1 p-4 md:p-8">{children}</main>
+
+      {/* Am Handy steht die Version unten im Inhalt, nicht fest ueber allem. */}
+      <span className="mono block px-4 pb-4 text-xs text-nebentext md:hidden">{versionText()}</span>
+    </div>
+  );
+}

src/components/ui/button.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "cn";
+import { Slot } from "radix-ui";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

src/components/wortmarke.tsx

@@ -0,0 +1,19 @@
+/**
+ * Wortmarke: `laufzettel` in Space Grotesk 700, Laufweite -0.04em,
+ * dahinter ein Punkt in Akzentfarbe (Durchmesser etwa 0,18 em).
+ */
+export function Wortmarke({ className }: { className?: string }) {
+  return (
+    <span
+      className={`font-titel font-bold tracking-[-0.04em] text-text ${className ?? ""}`}
+      aria-label="laufzettel"
+    >
+      laufzettel
+      <span
+        aria-hidden="true"
+        className="ml-[0.1em] inline-block rounded-full bg-akzent align-baseline"
+        style={{ width: "0.18em", height: "0.18em" }}
+      />
+    </span>
+  );
+}