feat(oberflaeche): Grundlayout, Navigation und Farbschema

Deutsche Oberfläche, Hell und Dunkel über next-themes, Navigation mit
Rollenfilter und die shadcn-Primitiven, die M1 braucht.

Der Farbschema-Knopf kommt ohne Effekt und ohne Zustand aus: welches
Symbol gilt, entscheidet die dark-Klasse und damit CSS. next-themes setzt
sie schon vor der Hydratation, deshalb blitzt nichts auf — und die
React-Compiler-Regel gegen setState im Effekt bleibt eingehalten.

Farben als OKLCH, damit Hell und Dunkel dieselbe wahrgenommene Helligkeit
halten.

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

src/components/farbschema-anbieter.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+
+/**
+ * Hell, Dunkel oder nach Systemeinstellung. Die Wahl liegt im Browser des
+ * Benutzers, nicht in der Datenbank.
+ */
+export function FarbschemaAnbieter({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </ThemeProvider>
+  )
+}

src/components/kopfleiste.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useTheme } from 'next-themes'
+import { LogOut, Moon, Shield, Sun } from 'lucide-react'
+import { signOut } from 'next-auth/react'
+import type { Rolle } from '@/generated/prisma/enums'
+import { ROLLEN_NAME, istAdmin } from '@/lib/rollen'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+type Eintrag = { pfad: string; name: string; nurAdmin?: boolean }
+
+const EINTRAEGE: Eintrag[] = [
+  { pfad: '/', name: 'Start' },
+  { pfad: '/bereiche', name: 'Bereiche' },
+  { pfad: '/einstellungen', name: 'Einstellungen' },
+  { pfad: '/verwaltung/protokoll', name: 'Protokoll', nurAdmin: true },
+]
+
+export function Kopfleiste({
+  name,
+  email,
+  rolle,
+  instanzName,
+}: {
+  name: string
+  email: string
+  rolle: Rolle
+  instanzName: string
+}) {
+  const pfad = usePathname()
+  const sichtbar = EINTRAEGE.filter((e) => !e.nurAdmin || istAdmin(rolle))
+
+  return (
+    <header className="border-rand bg-karte border-b">
+      <div className="mx-auto flex w-full max-w-5xl flex-wrap items-center gap-x-6 gap-y-3 px-4 py-3">
+        <Link href="/" className="text-base font-semibold tracking-tight">
+          Planer
+        </Link>
+
+        <nav aria-label="Hauptnavigation" className="flex flex-1 flex-wrap gap-1">
+          {sichtbar.map((eintrag) => {
+            const aktiv =
+              eintrag.pfad === '/' ? pfad === '/' : pfad.startsWith(eintrag.pfad)
+            return (
+              <Link
+                key={eintrag.pfad}
+                href={eintrag.pfad}
+                aria-current={aktiv ? 'page' : undefined}
+                className={cn(
+                  'rounded-md px-3 py-1.5 text-sm transition-colors',
+                  aktiv
+                    ? 'bg-gedaempft text-vordergrund font-medium'
+                    : 'text-gedaempft-vordergrund hover:bg-gedaempft hover:text-vordergrund',
+                )}
+              >
+                {eintrag.nurAdmin && (
+                  <Shield className="mr-1 inline size-3.5" aria-hidden />
+                )}
+                {eintrag.name}
+              </Link>
+            )
+          })}
+        </nav>
+
+        <div className="flex items-center gap-1">
+          <FarbschemaKnopf />
+          <span
+            className="text-gedaempft-vordergrund hidden text-xs sm:inline"
+            title={`${email} · ${ROLLEN_NAME[rolle]} · ${instanzName}`}
+          >
+            {name}
+          </span>
+          <Button
+            art="leise"
+            groesse="quadrat"
+            title="Abmelden"
+            onClick={() => void signOut({ callbackUrl: '/anmelden' })}
+          >
+            <LogOut aria-hidden />
+            <span className="sr-only">Abmelden</span>
+          </Button>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+function FarbschemaKnopf() {
+  const { resolvedTheme, setTheme } = useTheme()
+
+  // Welches Symbol gilt, entscheidet die dark-Klasse und damit CSS. next-themes
+  // setzt sie schon vor der Hydratation, deshalb braucht es hier weder einen
+  // Effekt noch einen Zustand – und es blitzt nichts auf.
+  return (
+    <Button
+      art="leise"
+      groesse="quadrat"
+      title="Farbschema wechseln"
+      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+    >
+      <Moon className="dark:hidden" aria-hidden />
+      <Sun className="hidden dark:block" aria-hidden />
+      <span className="sr-only">Farbschema wechseln</span>
+    </Button>
+  )
+}

src/components/ui/button.tsx

@@ -0,0 +1,47 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const knopfStile = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0",
+  {
+    variants: {
+      art: {
+        betont: 'bg-betont text-betont-vordergrund hover:bg-betont/90',
+        umriss: 'border border-rand bg-karte hover:bg-gedaempft',
+        leise: 'hover:bg-gedaempft',
+        gefahr: 'bg-gefahr text-gefahr-vordergrund hover:bg-gefahr/90',
+        verweis: 'text-betont underline-offset-4 hover:underline',
+      },
+      groesse: {
+        normal: 'h-9 px-4 py-2',
+        klein: 'h-8 rounded-md px-3 text-xs',
+        gross: 'h-11 rounded-md px-6',
+        quadrat: 'size-9',
+      },
+    },
+    defaultVariants: {
+      art: 'betont',
+      groesse: 'normal',
+    },
+  },
+)
+
+export type KnopfEigenschaften = React.ComponentProps<'button'> &
+  VariantProps<typeof knopfStile> & {
+    /** Rendert stattdessen das Kindelement, z. B. einen Link. */
+    alsKind?: boolean
+  }
+
+function Button({
+  className,
+  art,
+  groesse,
+  alsKind = false,
+  ...rest
+}: KnopfEigenschaften) {
+  const Element = alsKind ? Slot : 'button'
+  return <Element className={cn(knopfStile({ art, groesse }), className)} {...rest} />
+}
+
+export { Button, knopfStile }

src/components/ui/card.tsx

@@ -0,0 +1,40 @@
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...rest }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'bg-karte text-karte-vordergrund border-rand rounded-xl border shadow-sm',
+        className,
+      )}
+      {...rest}
+    />
+  )
+}
+
+function CardKopf({ className, ...rest }: React.ComponentProps<'div'>) {
+  return <div className={cn('flex flex-col gap-1 p-6 pb-4', className)} {...rest} />
+}
+
+function CardTitel({ className, ...rest }: React.ComponentProps<'h2'>) {
+  return (
+    <h2
+      className={cn('text-lg leading-none font-semibold tracking-tight', className)}
+      {...rest}
+    />
+  )
+}
+
+function CardBeschreibung({ className, ...rest }: React.ComponentProps<'p'>) {
+  return <p className={cn('text-gedaempft-vordergrund text-sm', className)} {...rest} />
+}
+
+function CardInhalt({ className, ...rest }: React.ComponentProps<'div'>) {
+  return <div className={cn('p-6 pt-0', className)} {...rest} />
+}
+
+function CardFuss({ className, ...rest }: React.ComponentProps<'div'>) {
+  return <div className={cn('flex items-center gap-2 p-6 pt-0', className)} {...rest} />
+}
+
+export { Card, CardKopf, CardTitel, CardBeschreibung, CardInhalt, CardFuss }

src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import { cn } from '@/lib/utils'
+
+function Input({ className, type, ...rest }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      className={cn(
+        'border-eingabe bg-karte flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-sm shadow-xs transition-colors outline-none',
+        'placeholder:text-gedaempft-vordergrund',
+        'focus-visible:border-ring focus-visible:ring-ring/40 focus-visible:ring-2',
+        'aria-invalid:border-gefahr aria-invalid:ring-gefahr/30',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...rest}
+    />
+  )
+}
+
+export { Input }

src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cn } from '@/lib/utils'
+
+function Label({ className, ...rest }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      className={cn(
+        'text-sm leading-none font-medium select-none',
+        'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className,
+      )}
+      {...rest}
+    />
+  )
+}
+
+export { Label }

src/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import { cn } from '@/lib/utils'
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...rest
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-rand shrink-0',
+        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+        className,
+      )}
+      {...rest}
+    />
+  )
+}
+
+export { Separator }