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/app/globals.css

@@ -0,0 +1,90 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+/*
+ * Farben als OKLCH, damit Hell und Dunkel dieselbe wahrgenommene Helligkeit
+ * halten. Die Bereichsfarben kommen aus der Datenbank und werden zur Laufzeit
+ * gesetzt, nicht hier.
+ */
+:root {
+  --radius: 0.625rem;
+
+  --hintergrund: oklch(0.99 0.002 250);
+  --vordergrund: oklch(0.21 0.02 260);
+  --karte: oklch(1 0 0);
+  --karte-vordergrund: oklch(0.21 0.02 260);
+  --gedaempft: oklch(0.96 0.004 250);
+  --gedaempft-vordergrund: oklch(0.5 0.015 260);
+  --rand: oklch(0.91 0.006 255);
+  --eingabe: oklch(0.91 0.006 255);
+  --ring: oklch(0.55 0.16 258);
+
+  --betont: oklch(0.52 0.17 258);
+  --betont-vordergrund: oklch(0.99 0.002 250);
+  --gefahr: oklch(0.55 0.21 27);
+  --gefahr-vordergrund: oklch(0.99 0.002 250);
+  --erfolg: oklch(0.6 0.13 155);
+  --warnung: oklch(0.7 0.15 75);
+}
+
+.dark {
+  --hintergrund: oklch(0.17 0.015 262);
+  --vordergrund: oklch(0.95 0.005 250);
+  --karte: oklch(0.21 0.018 262);
+  --karte-vordergrund: oklch(0.95 0.005 250);
+  --gedaempft: oklch(0.26 0.018 262);
+  --gedaempft-vordergrund: oklch(0.7 0.015 258);
+  --rand: oklch(0.31 0.018 262);
+  --eingabe: oklch(0.31 0.018 262);
+  --ring: oklch(0.62 0.15 258);
+
+  --betont: oklch(0.62 0.16 258);
+  --betont-vordergrund: oklch(0.17 0.015 262);
+  --gefahr: oklch(0.62 0.19 25);
+  --gefahr-vordergrund: oklch(0.98 0.002 250);
+  --erfolg: oklch(0.68 0.12 155);
+  --warnung: oklch(0.78 0.13 75);
+}
+
+@theme inline {
+  --color-hintergrund: var(--hintergrund);
+  --color-vordergrund: var(--vordergrund);
+  --color-karte: var(--karte);
+  --color-karte-vordergrund: var(--karte-vordergrund);
+  --color-gedaempft: var(--gedaempft);
+  --color-gedaempft-vordergrund: var(--gedaempft-vordergrund);
+  --color-rand: var(--rand);
+  --color-eingabe: var(--eingabe);
+  --color-ring: var(--ring);
+  --color-betont: var(--betont);
+  --color-betont-vordergrund: var(--betont-vordergrund);
+  --color-gefahr: var(--gefahr);
+  --color-gefahr-vordergrund: var(--gefahr-vordergrund);
+  --color-erfolg: var(--erfolg);
+  --color-warnung: var(--warnung);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+  * {
+    @apply border-rand outline-ring/50;
+  }
+
+  body {
+    @apply bg-hintergrund text-vordergrund;
+    font-feature-settings:
+      'liga' 1,
+      'calt' 1;
+  }
+
+  /* Wer mit der Tastatur bedient, muss sehen, wo er ist. */
+  :focus-visible {
+    @apply outline-ring outline-2 outline-offset-2;
+  }
+}

src/app/keine-berechtigung/page.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { ShieldAlert } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+export const metadata: Metadata = { title: 'Keine Berechtigung' }
+
+export default function KeineBerechtigungSeite() {
+  return (
+    <main className="flex min-h-dvh flex-col items-center justify-center gap-4 px-4 text-center">
+      <ShieldAlert className="text-gedaempft-vordergrund size-10" aria-hidden />
+      <h1 className="text-xl font-semibold">Dazu fehlt dir die Berechtigung</h1>
+      <p className="text-gedaempft-vordergrund max-w-sm text-sm">
+        Diese Seite ist der Verwaltung vorbehalten. Wenn du meinst, dass das ein Versehen
+        ist, wende dich an die Verwaltung dieser Instanz.
+      </p>
+      <Button alsKind art="umriss">
+        <Link href="/">Zurück zum Start</Link>
+      </Button>
+    </main>
+  )
+}

src/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata, Viewport } from 'next'
+import { Toaster } from 'sonner'
+import { FarbschemaAnbieter } from '@/components/farbschema-anbieter'
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: {
+    default: 'Planer',
+    template: '%s – Planer',
+  },
+  description: 'Aufgaben, Ideen, Projekte und Zeitblöcke an einem Ort.',
+  applicationName: 'Planer',
+  robots: { index: false, follow: false },
+}
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#fbfbfd' },
+    { media: '(prefers-color-scheme: dark)', color: '#1a1c22' },
+  ],
+}
+
+export default function WurzelLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="de" suppressHydrationWarning>
+      <body className="min-h-dvh antialiased">
+        <FarbschemaAnbieter>
+          {children}
+          <Toaster position="bottom-right" richColors closeButton />
+        </FarbschemaAnbieter>
+      </body>
+    </html>
+  )
+}

src/app/not-found.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+
+export const metadata: Metadata = { title: 'Nicht gefunden' }
+
+export default function NichtGefunden() {
+  return (
+    <main className="flex min-h-dvh flex-col items-center justify-center gap-4 px-4 text-center">
+      <p className="text-gedaempft-vordergrund text-sm">Fehler 404</p>
+      <h1 className="text-xl font-semibold">Diese Seite gibt es nicht</h1>
+      <p className="text-gedaempft-vordergrund max-w-sm text-sm">
+        Möglicherweise ist sie in dieser Instanz auch gar nicht vorgesehen.
+      </p>
+      <Button alsKind art="umriss">
+        <Link href="/">Zurück zum Start</Link>
+      </Button>
+    </main>
+  )
+}