feat(design): neues Theme Rainy mit Nieselregen und Wetterleuchten

Schieferblau in hell und dunkel. Ein paar Tropfen fallen per Canvas
ueber den Bildschirm und zerspritzen am unteren Rand; die Wolken der
oberen Leiste leuchten alle 7-18 s auf (Maske = Wolken-SVG). Bei
prefers-reduced-motion bleibt es still.

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

docs/05-frontend.md

@@ -138,7 +138,7 @@ Die Darstellung hat **zwei unabhängige Achsen**, beide als Klasse am `<html>`:
 
 | Achse | Klasse | Werte |
 | --- | --- | --- |
-| Farbwelt | `theme-perinco`, `theme-pixel`, `theme-outdoor`, `theme-cyberpunk` | perinco ist der Standard |
+| Farbwelt | `theme-perinco`, `theme-pixel`, `theme-outdoor`, `theme-cyberpunk`, `theme-rainy` | perinco ist der Standard |
 | Modus | `dark` bzw. keine | hell, dunkel, oder der Systemeinstellung folgen |
 
 `src/index.css` tauscht darin nur Variablenwerte: `canvas`, `surface`, `ink-*`,
@@ -173,7 +173,7 @@ er liest den Benutzer.
 
 Alle Themes außer perinco legen eine Grafik hinter die obere Leiste und die
 Seitenleiste: 8-bit-Himmel und Steinmauer, blauer Himmel und Wiese,
-Neonröhren und regnerische Gasse. Die Dateien liegen als **SVG** in
+Neonröhren und regnerische Gasse, Regenwolken und nasse Hügel. Die Dateien liegen als **SVG** in
 `public/themes/` und sind von Hand gezeichnet - stilisierte Grafik statt Foto,
 damit sie in jeder Auflösung scharf bleibt und wenige Kilobyte wiegt.
 
@@ -212,6 +212,32 @@ Das ist kein Umweg, sondern erledigt zwei Dinge zugleich:
 > nur Licht - über Dunkel leuchtet das Neon, über Weiss bleiben blasse farbige
 > Linien. Wer eine Grafik ergänzt: **keine deckenden Flächen**, nur Motiv.
 
+### Rainy: das Theme mit Wetter
+
+Rainy ist das einzige Theme mit Bewegung. Farben und Grafiken funktionieren wie
+bei den anderen; dazu kommt `src/components/RainyWeather.tsx`, das der
+`ThemeProvider` nur bei aktivem Rainy einhängt - auch auf der Anmeldeseite, und
+beim Wechsel auf ein anderes Theme verschwindet es samt Animationsschleife.
+
+| Effekt | Umsetzung |
+| --- | --- |
+| **Nieselregen** | Ein `<canvas>` über dem ganzen Fenster. Alle 220–650 ms startet ein Tropfen (höchstens 14 gleichzeitig), fällt leicht schräg und zerspritzt am unteren Fensterrand in 3–6 Spritzer mit Schwerkraft plus einen kleinen Ring. Farbe aus `--rain-color` |
+| **Wetterleuchten** | Ein Element, das beim Blitz exakt über `.app-header` gelegt und per Web Animations API kurz eingeblendet wird (flackernd, 0,9 s, alle 7–18 s). Das Licht ist ein Schein um eine zufällige Stelle in der Mitte der Leiste |
+
+Der Trick beim Blitz ist die **Maske**: `.rainy-flash` benutzt
+`rainy-header.svg` - dieselbe Datei wie das Hintergrundbild, gleich skaliert -
+als `mask-image`. Das Licht erscheint dadurch nur auf den Wolken selbst. Die
+Grafik darf deshalb **nur Wolken** enthalten, keinen Himmel: sonst leuchtet die
+ganze Leiste. Im Dunkelmodus hellt der Blitz per `mix-blend-mode: screen` auf,
+im hellen Modus deckt er normal mit warmem Weiss (`--flash-blend`,
+`--flash-color`) - `screen` macht aus hellem Grau nur etwas helleres Grau.
+
+Beide Ebenen haben `pointer-events: none` und `z-[90]`, liegen also unter den
+Dialogen (`z-[100]`). Bei `prefers-reduced-motion: reduce` startet weder Regen
+noch Blitz. Die Canvas-Schleife läuft über `requestAnimationFrame` und ruht
+damit in Hintergrund-Tabs; der Zeitschritt ist auf 50 ms begrenzt, damit nach
+der Rückkehr nichts nachgeholt wird.
+
 ### Was ein neues Theme können muss
 
 Die Rollen der Skalen sind über die ganze App gleich; ein Theme, das sie

docs/07-anleitung-benutzer.md

@@ -66,7 +66,7 @@ die Scanner-Einstellungen. Alles andere ist für beide Rollen gleich.
   zusammen - hilfreich auf kleinen Bildschirmen.
 * Rechts oben stehen zwei Schalter. Der rechte wechselt zwischen **hell und
   dunkel**; ein **Doppelklick** darauf folgt wieder der Systemeinstellung.
-* Links daneben steht das **Design**. Es gibt vier zur Wahl, jedes in hell und
+* Links daneben steht das **Design**. Es gibt fünf zur Wahl, jedes in hell und
   dunkel:
 
   | Design | Aussehen |
@@ -75,6 +75,7 @@ die Scanner-Einstellungen. Alles andere ist für beide Rollen gleich.
   | **Pixel Art** | 8-bit: eckige Kanten, harte Schatten, Pixelschrift in den Überschriften |
   | **Outdoor** | Wanderkarte: Sandpapier, Bergsee-Türkis, weiche Ecken |
   | **Cyberpunk** | Neon in der Nacht: scharfe Kanten, violettes Leuchten, Blaustahl |
+  | **Rainy** | Regenwetter: Schieferblau, leichter Nieselregen, Wolken mit Wetterleuchten |
 
   > **Die Wahl gehört dir, nicht dem Rechner.** Sie wird an deinem Benutzerkonto
   > gespeichert. Meldest du dich an einem anderen Rechner an, ist dein Design
@@ -85,11 +86,19 @@ die Scanner-Einstellungen. Alles andere ist für beide Rollen gleich.
   haben bis zu acht Spalten, und eine Pixelschrift wäre darin nicht mehr zu
   lesen.
 
-  Die drei Designs neben perinco haben zusätzlich eine **Grafik** hinter der
+  Die Designs neben perinco haben zusätzlich eine **Grafik** hinter der
   oberen Leiste und der Seitenleiste: 8-bit-Himmel und Steinmauer, blauer Himmel
-  und Wiese, Neonröhren und Regen. Sie liegt hinter einem Schleier, damit die
-  Schrift darauf lesbar bleibt, und ist dort am deutlichsten, wo die Leisten frei
-  sind - in der Mitte oben und unten links. perinco bleibt einfarbig.
+  und Wiese, Neonröhren und Regen, Regenwolken und nasse Hügel. Sie liegt hinter
+  einem Schleier, damit die Schrift darauf lesbar bleibt, und ist dort am
+  deutlichsten, wo die Leisten frei sind - in der Mitte oben und unten links. perinco bleibt einfarbig.
+
+  **Rainy** ist das einzige Design, in dem sich etwas bewegt: ein paar
+  Regentropfen fallen über den Bildschirm und zerspritzen am unteren Rand, und
+  die Wolken in der oberen Leiste leuchten alle paar Sekunden kurz auf. Der
+  Regen liegt nur optisch über der Oberfläche - er verdeckt keine Knöpfe und
+  fängt keine Klicks ab, und in geöffneten Dialogen regnet es nicht. Wer im
+  Betriebssystem **„Bewegung reduzieren"** eingeschaltet hat, sieht nur die
+  Farben und die Wolken, ohne Regen und Blitz.
 
   ![Dieselbe Ansicht im dunklen Design](bilder/aus-mails-dunkel.png)
 * Die Menüpunkte **Akquise**, **Opportunities**, **Kontakte**, **Mails** und

docs/09-quellcode.md

@@ -295,7 +295,7 @@ Uhrzeit, dieses Jahr Tag und Monat, sonst mit Jahr.
 | Datei | Hält | Eigenheit |
 | --- | --- | --- |
 | `auth.tsx` | Benutzer, `isAdmin`, `login`, `logout`, `updateUser` | prüft beim Start das gespeicherte Token gegen `/auth/me` |
-| `theme.tsx` | Farbwelt (perinco/Pixel Art/Outdoor/Cyberpunk, Hintergrundgrafiken in `public/themes/`) und Modus (hell/dunkel/System) | Beides gehört dem Benutzer und steht in `crm_users`; `localStorage` ist nur der Zwischenspeicher fürs Inline-Skript in `index.html`. Doppelklick auf den Modus-Schalter folgt wieder dem System |
+| `theme.tsx` | Farbwelt (perinco/Pixel Art/Outdoor/Cyberpunk/Rainy, Hintergrundgrafiken in `public/themes/`; bei Rainy hängt er zusätzlich `components/RainyWeather.tsx` mit Regen und Wetterleuchten ein) und Modus (hell/dunkel/System) | Beides gehört dem Benutzer und steht in `crm_users`; `localStorage` ist nur der Zwischenspeicher fürs Inline-Skript in `index.html`. Doppelklick auf den Modus-Schalter folgt wieder dem System |
 | `navigation.tsx` | `currentView`, `goTo(view, { tab, leadId })` | erspart es, Callbacks durch vier Ebenen zu reichen; `leadId` öffnet den Kontakt direkt |
 | `whisper.tsx` | Modellstatus, Worker, Fortschritt, `transcribe` | ein Worker für die ganze App |