feat(ui): drei Farbwelten je hell und dunkel, gewaehlt pro Benutzer

Neben dem Design des Hauses ("perinco") gibt es "Pixel Art" und
"Outdoor", jedes in hell und dunkel. Die Wahl steht neben dem
Hell/Dunkel-Schalter im Kopf der App.

Sie gehoert dem BENUTZER und nicht dem Browser: crm_users.theme und
crm_users.theme_mode, gesetzt ueber PATCH /api/auth/me, das jeder fuer
sich selbst darf. Wer sich an einem anderen Rechner anmeldet, findet sein
Design wieder, und zwei Benutzer an derselben Maschine kommen sich nicht
in die Quere. Der localStorage bleibt als Zwischenspeicher daneben, damit
das Inline-Skript in index.html die Klassen vor dem ersten Frame setzen
kann - ohne das blitzt beim Laden das Standarddesign auf. Das hat eine
sichtbare Folge: melden sich zwei Leute an demselben Rechner an, sieht
der zweite fuer einen Augenblick das Design des ersten.

Der ThemeProvider steht deshalb in main.tsx jetzt unter dem AuthProvider
- er liest den Benutzer.

Keine Komponente wurde umgefaerbt. Im Markup steht nirgends eine feste
Farbe, sondern durchgaengig ink-*, brand-*, canvas und surface; Tailwind
v4 loest auch --radius-*, --shadow-* und die Schriften ueber Variablen
auf. Ein Theme tauscht also nur Werte, und deshalb kann Pixel Art alle
380 abgerundeten Ecken eckig machen, ohne eine Klasse anzufassen.

Zwei Dinge waren Voraussetzung:

- Der helle Block eines Themes braucht :not(.dark). html.theme-x hat
  eine Klasse mehr in der Spezifitaet als .dark und wuerde den
  Dunkelmodus sonst ueberstimmen.
- Auf brand-500/600 steht 69 Mal weisse Schrift. Jedes Theme braucht
  dort einen ausreichend dunklen Ton - ein helles Pastell waere
  unlesbar.

Die Pixelschrift (Silkscreen) sitzt nur in --font-display, also in den
Ueberschriften und den Feldbeschriftungen; labelClass tragt dafuer die
neue Klasse "field-label". Der Fliesstext bleibt Nunito Sans: die Listen
haben bis zu acht Spalten bei 11-13 px, und eine Pixelschrift waere darin
nicht mehr zu lesen. Outdoor bringt Cabin fuer beides mit.

server/test/userFields.test.mjs prueft die Werte und dass die Liste der
Farbwelten in userFields.js und src/types.ts nicht auseinanderlaeuft -
sonst zeigt die Auswahl ein Design an, dessen Speichern das Backend
abweist, und niemand weiss warum.

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

docs/05-frontend.md

@@ -120,7 +120,7 @@ src/
     imageCompress.ts          Bilder vor dem Upload verkleinern
   components/
     Sidebar.tsx               Menü inkl. aufklappbarer Gruppen (Kontakte, Scanner)
-    Header.tsx                Titel, Untertitel, Dark-Mode-Schalter
+    Header.tsx                Titel, Untertitel, Design-Auswahl, Hell/Dunkel-Schalter
     opportunities/            Kachel, Liste, Pipeline (Drag & Drop), Formular
     calendar/                 Monat/Woche/Tag, Termine (Drag & Drop), @-Mentions
     leads/                    Kachel, Liste, Netzwerkdiagramm (d3-force),
@@ -132,26 +132,79 @@ src/
     ui/                       Modal, Avatare, Diktatfeld
 ```
 
-## Dark Mode ohne `dark:`-Varianten
+## Themes ohne `dark:`-Varianten
 
-Die Klasse `dark` auf `<html>` tauscht in `src/index.css` nur die Werte der
-Variablen `canvas`, `surface`, `ink-*`, `brand-*` und der getönten Statusfarben.
-Die Komponenten benutzen durchgängig diese Skalen und folgen damit automatisch -
-kein `dark:` im Markup.
+Die Darstellung hat **zwei unabhängige Achsen**, beide als Klasse am `<html>`:
+
+| Achse | Klasse | Werte |
+| --- | --- | --- |
+| Farbwelt | `theme-perinco`, `theme-pixel`, `theme-outdoor` | perinco ist der Standard |
+| Modus | `dark` bzw. keine | hell, dunkel, oder der Systemeinstellung folgen |
+
+`src/index.css` tauscht darin nur Variablenwerte: `canvas`, `surface`, `ink-*`,
+`brand-*`, die getönten Statusfarben, dazu `--radius-*`, `--shadow-*` und die
+Schriften. Die Komponenten benutzen durchgängig diese Skalen und folgen damit
+automatisch - **kein `dark:` und keine themespezifische Klasse im Markup**.
 
 ```mermaid
 flowchart LR
-    T["Umschalter im Header"] --> P["localStorage<br/>perinco_crm_theme"]
-    P --> H["class 'dark' auf html"]
-    H --> V["Variablen in index.css<br/>canvas, surface, ink-*, brand-*"]
-    V --> U["Utility-Klassen der Komponenten"]
+    U["Benutzer wählt<br/>im Header"] --> DB["crm_users.theme<br/>crm_users.theme_mode"]
+    U --> LS["localStorage<br/>nur Zwischenspeicher"]
+    DB -->|"beim Anmelden"| H["Klassen am html<br/>theme-*, dark"]
+    LS -->|"vor dem ersten Frame"| H
+    H --> V["Variablen in index.css<br/>Farben, Radien, Schatten, Schrift"]
+    V --> W["Utility-Klassen der Komponenten"]
     SYS["Systemeinstellung"] -.->|"ohne eigene Wahl"| H
 ```
 
-Ein Inline-Skript in `index.html` setzt die Klasse vor dem ersten Frame, sonst
-blitzt beim Laden die helle Variante auf. Drei Werte bleiben in beiden Modi
-gleich: `ink-950` (liegt nur unter Dialog-Overlays), `text-white` (steht immer auf
-farbigen Flächen) und `brand-500` (das CI-Grün der Buttons).
+Die Wahl gehört dem **Benutzer**, nicht dem Browser: sie steht in `crm_users`
+und kommt mit `/api/auth/me`. Wer sich an einem anderen Rechner anmeldet, findet
+sein Design wieder, und zwei Benutzer an derselben Maschine kommen sich nicht in
+die Quere. Der `localStorage` bleibt daneben als Zwischenspeicher liegen, damit
+das Inline-Skript in `index.html` die Klassen vor dem ersten Frame setzen kann -
+sonst blitzt beim Laden das Standarddesign auf. Das hat genau eine sichtbare
+Folge: melden sich zwei Leute an demselben Rechner an, sieht der zweite für einen
+Augenblick das Design des ersten.
+
+Der `ThemeProvider` steht deshalb in `main.tsx` **unter** dem `AuthProvider` -
+er liest den Benutzer.
+
+### Was ein neues Theme können muss
+
+Die Rollen der Skalen sind über die ganze App gleich; ein Theme, das sie
+verletzt, macht Text unlesbar. Nachgezählt im Markup:
+
+| Skala | Rolle | Verwendungen |
+| --- | --- | --- |
+| `ink-50`, `ink-100` | Flächen und Hover | 102 × `bg-` |
+| `ink-200` | **Rahmen** | 224 × `border-`, 1 × `bg-` |
+| `ink-300`–`ink-900` | Text; `ink-400` trägt die Hinweistexte | 241 × `text-ink-400` |
+| `ink-950` | nur unter Dialog-Overlays, bleibt immer dunkel | 5 × `bg-` |
+| `brand-50`, `brand-100` | getönte Flächen | 70 × `bg-` |
+| `brand-200`–`brand-400` | Rahmen | 76 × `border-` |
+| `brand-500`, `brand-600` | gefüllte Knöpfe - **weisse Schrift darauf** | 100 × `bg-` |
+| `brand-600`–`brand-800` | Text auf getönten Flächen | 108 × `text-` |
+
+Daraus folgen zwei harte Regeln:
+
+1. **`brand-500` und `brand-600` müssen dunkel genug für weisse Schrift sein.**
+   `text-white` steht 69 × im Markup, immer auf einer Markenfläche. Ein helles
+   Theme kann dort kein Pastell verwenden.
+2. **Der helle Block eines Themes braucht `:not(.dark)`.** `html.theme-x` hat
+   eine Klasse mehr in der Spezifität als `.dark` und würde den Dunkelmodus
+   sonst überstimmen.
+
+Was ein Theme über Farben hinaus ändern kann: Eckenradien (`--radius-*`, weil
+Tailwind v4 `rounded-xl` zu `var(--radius-xl)` auflöst), Schatten (`--shadow-*`)
+und die Schriften (`--font-sans` für Fliesstext, `--font-display` für
+Überschriften und Feldbeschriftungen - letztere tragen dafür die Klasse
+`field-label`). `rounded-full` ist die eine Ausnahme: dort schreibt Tailwind
+einen festen Wert, deshalb hat Pixel Art dafür eine eigene Regel.
+
+Drei Werte bleiben in jedem Theme und Modus gleich: `ink-950` (liegt nur unter
+Dialog-Overlays), `text-white` (steht immer auf farbigen Flächen) und die 39
+festen Hex-Werte für Phasenfarben, Benutzerfarben und Diagramme - die folgen
+bewusst keinem Theme, weil sie Bedeutung tragen und nicht Dekoration sind.
 
 Eine bewusste Ausnahme: der **Mailinhalt** bleibt auch im Dunkelmodus auf weissem
 Grund. Fremdes Mail-HTML bringt seine eigenen Farben mit; ein dunkler Hintergrund