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>
2026-09-24 23:33:49 +02:00
commit 49ce06f206
84 changed files with 13511 additions and 0 deletions
@@ -0,0 +1,12 @@
+import { prisma } from "@/lib/db";
+
+/** Healthcheck fuer Docker und den Reverse Proxy. Prueft, ob die Datenbank antwortet. */
+export async function GET(): Promise<Response> {
+  try {
+    await prisma.$queryRaw`SELECT 1`;
+    return Response.json({ status: "ok" });
+  } catch (fehler) {
+    const meldung = fehler instanceof Error ? fehler.message : "unbekannter Fehler";
+    return Response.json({ status: "fehler", meldung }, { status: 503 });
+  }
+}
@@ -0,0 +1,139 @@
+@import "tailwindcss";
+
+/*
+ * Laufzettel – Gestaltung.
+ * Dunkel zuerst. Ein einziger Akzent (Signal-Lime), nur fuer Aktionen, Fortschritt,
+ * Fokus und aktive Zustaende. Keine Verlaeufe, keine Schatten.
+ * Druckansichten und Etiketten sind immer hell, siehe Abschnitt @media print.
+ */
+@theme {
+  --color-grund: #0b0d10;
+  --color-flaeche: #14171c;
+  --color-flaeche-hoch: #1b1f26;
+  --color-linie: #262b33;
+  --color-text: #f3f5f7;
+  --color-nebentext: #98a2b3;
+
+  --color-akzent: #c6f135;
+  --color-auf-akzent: #0b0d10;
+  --color-akzent-flaeche: rgb(198 241 53 / 0.12);
+
+  --color-erledigt: #3ddc97;
+  --color-faellig: #f5b84a;
+  --color-fehler: #f87171;
+
+  --font-titel: "Space Grotesk Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "Manrope Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
+
+  --radius-karte: 1rem;
+  --radius-pille: 999px;
+}
+
+/* Heller Modus ist optional und nur aktiv, wenn er ausdruecklich gewaehlt wurde. */
+:root[data-thema="hell"] {
+  --color-grund: #f6f7f4;
+  --color-flaeche: #ffffff;
+  --color-flaeche-hoch: #ffffff;
+  --color-linie: #d9ddd4;
+  --color-text: #0b0d10;
+  --color-nebentext: #5b6472;
+  --color-akzent: #5e8a00;
+  --color-auf-akzent: #ffffff;
+  --color-akzent-flaeche: rgb(94 138 0 / 0.1);
+}
+
+/*
+ * Vertrag von shadcn/ui, gespeist aus den Laufzettel-Token oben.
+ * Dadurch sieht jede per `pnpm dlx shadcn@latest add <bauteil>` kopierte
+ * Komponente sofort nach Laufzettel aus, ohne dass sie angefasst werden muss –
+ * und der helle Modus greift automatisch mit.
+ */
+:root {
+  --background: var(--color-grund);
+  --foreground: var(--color-text);
+  --card: var(--color-flaeche);
+  --card-foreground: var(--color-text);
+  --popover: var(--color-flaeche-hoch);
+  --popover-foreground: var(--color-text);
+  --primary: var(--color-akzent);
+  --primary-foreground: var(--color-auf-akzent);
+  --secondary: var(--color-flaeche-hoch);
+  --secondary-foreground: var(--color-text);
+  --muted: var(--color-flaeche-hoch);
+  --muted-foreground: var(--color-nebentext);
+  --accent: var(--color-akzent-flaeche);
+  --accent-foreground: var(--color-akzent);
+  --destructive: var(--color-fehler);
+  --destructive-foreground: var(--color-grund);
+  --border: var(--color-linie);
+  --input: var(--color-linie);
+  --ring: var(--color-akzent);
+  --radius: 0.75rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+body {
+  background-color: var(--color-grund);
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  /* Am Handy darf nie horizontal gescrollt werden. */
+  overflow-x: hidden;
+}
+
+h1,
+h2,
+h3,
+.zahl {
+  font-family: var(--font-titel);
+}
+
+code,
+kbd,
+samp,
+.mono {
+  font-family: var(--font-mono);
+}
+
+/* Fokus immer sichtbar und immer im Akzent. */
+:focus-visible {
+  outline: 2px solid var(--color-akzent);
+  outline-offset: 2px;
+}
+
+@media print {
+  body {
+    background: #ffffff;
+    color: #0b0d10;
+  }
+
+  .nicht-drucken {
+    display: none !important;
+  }
+}
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
+  <rect width="48" height="48" rx="10" fill="#0B0D10"/>
+  <g fill="none" stroke="#C6F135" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M15 8H9v32h6"/><path d="M33 8h6v32h-6"/><path d="M17.5 24.5l5 5 9.5-11"/>
+  </g>
+</svg>
@@ -0,0 +1,24 @@
+import type { Metadata, Viewport } from "next";
+import "@fontsource-variable/space-grotesk";
+import "@fontsource-variable/manrope";
+import "@fontsource-variable/jetbrains-mono";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "laufzettel",
+  description: "Checklisten fuer wiederkehrende IT-Arbeiten",
+};
+
+export const viewport: Viewport = {
+  themeColor: "#0B0D10",
+  width: "device-width",
+  initialScale: 1,
+};
+
+export default function WurzelLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="de">
+      <body>{children}</body>
+    </html>
+  );
+}
@@ -0,0 +1,19 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "laufzettel",
+    short_name: "laufzettel",
+    description: "Checklisten fuer wiederkehrende IT-Arbeiten",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#0B0D10",
+    theme_color: "#0B0D10",
+    lang: "de",
+    icons: [
+      { src: "/icon-kachel.svg", sizes: "any", type: "image/svg+xml", purpose: "any" },
+      { src: "/icon-192.png", sizes: "192x192", type: "image/png", purpose: "any" },
+      { src: "/icon-512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
+    ],
+  };
+}
@@ -0,0 +1,29 @@
+import { Huelle } from "@/components/huelle";
+
+export default function Startseite() {
+  return (
+    <Huelle aktiv="/">
+      <h1 className="text-2xl font-bold">Übersicht</h1>
+      <p className="mt-2 max-w-prose text-nebentext">
+        Das Gerüst steht: Gestaltung, Betriebsstand, Qualitätsschranken und Prozess. Die Fachlichkeit kommt ab
+        dem Datenmodell.
+      </p>
+
+      <section className="mt-8 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+        {[
+          { nummer: "01", titel: "Datenmodell", issue: "#006" },
+          { nummer: "02", titel: "Anmeldung und Rollen", issue: "#007" },
+          { nummer: "03", titel: "Betriebsmodus und Kunden", issue: "#008" },
+        ].map((karte) => (
+          <article key={karte.nummer} className="rounded-karte border border-linie bg-flaeche p-5">
+            <p className="mono text-xs text-nebentext">
+              <span className="text-akzent">{karte.nummer}</span> · als Nächstes
+            </p>
+            <h2 className="mt-2 text-lg font-semibold">{karte.titel}</h2>
+            <p className="mono mt-1 text-xs text-nebentext">{karte.issue}</p>
+          </article>
+        ))}
+      </section>
+    </Huelle>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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 };
@@ -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>
+  );
+}
@@ -0,0 +1,39 @@
+import { PrismaPg } from "@prisma/adapter-pg";
+import { PrismaClient } from "@/generated/prisma/client";
+
+/**
+ * Zugriff auf die Datenbank.
+ *
+ * Der Client wird erst beim ersten Zugriff gebaut. Dadurch laeuft `next build`
+ * ohne gesetzte DATABASE_URL durch, obwohl Module den Import auf oberster Ebene
+ * haben. In der Entwicklung liegt die Instanz an globalThis, damit Hot Reload
+ * nicht bei jedem Speichern eine neue Verbindung aufbaut.
+ */
+function clientBauen(): PrismaClient {
+  const url = process.env["DATABASE_URL"];
+  if (!url) {
+    throw new Error("DATABASE_URL ist nicht gesetzt. Siehe .env.example.");
+  }
+  return new PrismaClient({ adapter: new PrismaPg({ connectionString: url }) });
+}
+
+const globalerZwischenspeicher = globalThis as typeof globalThis & {
+  laufzettelPrisma?: PrismaClient;
+};
+
+let instanz: PrismaClient | undefined;
+
+function instanzHolen(): PrismaClient {
+  if (process.env["NODE_ENV"] !== "production") {
+    globalerZwischenspeicher.laufzettelPrisma ??= clientBauen();
+    return globalerZwischenspeicher.laufzettelPrisma;
+  }
+  instanz ??= clientBauen();
+  return instanz;
+}
+
+export const prisma = new Proxy({} as PrismaClient, {
+  get(_ziel, eigenschaft, empfaenger) {
+    return Reflect.get(instanzHolen(), eigenschaft, empfaenger);
+  },
+});
@@ -0,0 +1,53 @@
+/**
+ * Die Seitenleiste an einer Stelle beschrieben.
+ *
+ * `verfuegbar` wird umgestellt, sobald der Meilenstein die Seite liefert. So zeigt
+ * die Huelle von Anfang an die echte Struktur, ohne auf Seiten zu verlinken, die
+ * es noch nicht gibt. Die Beschriftungen haengen am Betriebsmodus (#008).
+ */
+export type Betriebsmodus = "INTERN" | "DIENSTLEISTUNG";
+
+export type NavEintrag = {
+  readonly pfad: string;
+  readonly beschriftung: string;
+  /** Beschriftung im Modus Dienstleistung, falls sie abweicht. */
+  readonly beschriftungDienstleistung?: string;
+  /** Nur in diesem Modus zeigen. Fehlt der Wert, gilt der Eintrag in beiden. */
+  readonly nurModus?: Betriebsmodus;
+  readonly symbol: string;
+  readonly verfuegbar: boolean;
+  /** Issue, das die Seite liefert – nur fuer den Hinweis, solange sie fehlt. */
+  readonly ausIssue?: number;
+};
+
+export const NAVIGATION: readonly NavEintrag[] = [
+  { pfad: "/", beschriftung: "Übersicht", symbol: "LayoutDashboard", verfuegbar: true },
+  { pfad: "/laeufe", beschriftung: "Läufe", symbol: "ListChecks", verfuegbar: false, ausIssue: 13 },
+  { pfad: "/vorlagen", beschriftung: "Vorlagen", symbol: "FileText", verfuegbar: false, ausIssue: 10 },
+  {
+    pfad: "/mitarbeiter",
+    beschriftung: "Mitarbeiter & Geräte",
+    nurModus: "INTERN",
+    symbol: "Users",
+    verfuegbar: false,
+    ausIssue: 11,
+  },
+  {
+    pfad: "/kunden",
+    beschriftung: "Kunden",
+    nurModus: "DIENSTLEISTUNG",
+    symbol: "Building2",
+    verfuegbar: false,
+    ausIssue: 8,
+  },
+  { pfad: "/archiv", beschriftung: "Archiv", symbol: "Archive", verfuegbar: false, ausIssue: 15 },
+  { pfad: "/admin", beschriftung: "Admin", symbol: "Settings", verfuegbar: false, ausIssue: 8 },
+];
+
+export function navigationFuer(modus: Betriebsmodus): readonly NavEintrag[] {
+  return NAVIGATION.filter((e) => e.nurModus === undefined || e.nurModus === modus).map((e) =>
+    modus === "DIENSTLEISTUNG" && e.beschriftungDienstleistung
+      ? { ...e, beschriftung: e.beschriftungDienstleistung }
+      : e,
+  );
+}
@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Klassen zusammenfuehren, spaetere Tailwind-Klassen gewinnen. Von shadcn/ui erwartet. */
+export function cn(...eingaben: ClassValue[]): string {
+  return twMerge(clsx(eingaben));
+}
@@ -0,0 +1,10 @@
+/**
+ * Version und Git-Stand fuer die Anzeige unten links.
+ * Beide Werte werden beim Bauen gesetzt (Docker-Build-Arg bzw. deploy/install.sh).
+ */
+export const VERSION = process.env["NEXT_PUBLIC_APP_VERSION"] ?? "0.0.0-dev";
+export const GIT_SHA = (process.env["NEXT_PUBLIC_GIT_SHA"] ?? "").slice(0, 7);
+
+export function versionText(): string {
+  return GIT_SHA ? `v${VERSION} · ${GIT_SHA}` : `v${VERSION}`;
+}
@@ -0,0 +1,41 @@
+import { NextResponse, type NextRequest } from "next/server";
+
+/**
+ * In Next 16 heisst die frueher middleware.ts genannte Datei proxy.ts und laeuft
+ * in der Node-Laufzeit.
+ *
+ * Hier wird die Content-Security-Policy pro Anfrage mit einer Nonce gesetzt. Sie
+ * muss dynamisch sein, deshalb steht sie nicht bei den statischen Kopfzeilen in
+ * next.config.ts. Die Anmeldepflicht kommt in #007 dazu.
+ */
+export function proxy(anfrage: NextRequest): NextResponse {
+  const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
+
+  const richtlinie = [
+    `default-src 'self'`,
+    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`,
+    // Tailwind erzeugt Stilangaben zur Laufzeit, deshalb unsafe-inline fuer Stile.
+    `style-src 'self' 'unsafe-inline'`,
+    `img-src 'self' data: blob:`,
+    `font-src 'self'`,
+    // Die Kamera des Scanners liefert Bilddaten als blob:.
+    `media-src 'self' blob:`,
+    `connect-src 'self'`,
+    `frame-ancestors 'none'`,
+    `base-uri 'self'`,
+    `form-action 'self'`,
+    `object-src 'none'`,
+  ].join("; ");
+
+  const kopfzeilen = new Headers(anfrage.headers);
+  kopfzeilen.set("x-nonce", nonce);
+
+  const antwort = NextResponse.next({ request: { headers: kopfzeilen } });
+  antwort.headers.set("Content-Security-Policy", richtlinie);
+  return antwort;
+}
+
+export const config = {
+  // Statische Dateien und Bilder brauchen keine CSP-Nonce.
+  matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|webp|woff2?)$).*)"],
+};