feat(ui): Hintergrundgrafiken fuer Leiste und Seitenleiste je Theme

Pixel Art, Outdoor und Cyberpunk legen jetzt eine Grafik hinter die obere
Leiste und die Seitenleiste: 8-bit-Himmel mit Wolken und Huegelkante
sowie eine Steinmauer, blauer Himmel mit Schleierwolken sowie eine Wiese,
Neonroehren im Regen sowie eine regnerische Gasse. perinco bleibt
einfarbig.

Sechs SVG in public/themes/, von Hand gezeichnet - stilisierte Grafik
statt Foto, damit sie in jeder Aufloesung scharf bleibt; zusammen 36 kB.
Die Pixel-Grafiken haben einen absichtlich winzigen viewBox (eine Einheit
= ein Bildpunkt) und shape-rendering="crispEdges", damit die Kanten beim
Hochskalieren hart bleiben; die Mauer blendet nach oben stufenweise aus
und nicht mit einem Verlauf - Pixelgrafik kennt keine Zwischentoene.

Im Markup nur zwei Anker: app-header und app-sidebar. Den Rest machen
zwei Variablen mit Rueckfall auf none, weshalb perinco unberuehrt bleibt.

Die Variable enthaelt zwei Ebenen: einen Schleier aus der Flaechenfarbe
des Themes und darunter die Grafik. Das erledigt zwei Dinge zugleich -
derselbe blaue Himmel wird im Dunkelmodus zur Nacht (keine zweite Datei
noetig), und die Schrift bleibt lesbar, weil der Schleier in der Leiste an
den Raendern dicht liegt und in der Seitenleiste oben ueber den
Menuepunkten.

Aus dem ersten Versuch gelernt: die Cyberpunk-Grafik hatte eine deckende
Nachtflaeche. Im hellen Modus wurde daraus unter dem weissen Schleier ein
grauer Schmutzstreifen. Sie ist jetzt durchsichtig und zeigt nur Licht -
ueber Dunkel leuchtet das Neon, ueber Weiss bleiben blasse farbige
Linien. Ebenso zurueckgenommen wurde der Schleier ueber der Steinmauer:
"Einstellungen" und der Benutzername stehen darauf.

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

docs/05-frontend.md

@@ -169,6 +169,49 @@ Augenblick das Design des ersten.
 Der `ThemeProvider` steht deshalb in `main.tsx` **unter** dem `AuthProvider` -
 er liest den Benutzer.
 
+### Hintergrundbilder in Leiste und Seitenleiste
+
+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
+`public/themes/` und sind von Hand gezeichnet - stilisierte Grafik statt Foto,
+damit sie in jeder Auflösung scharf bleibt und wenige Kilobyte wiegt.
+
+Zwei Anker im Markup: `app-header` an `<header>` und `app-sidebar` an `<aside>`.
+Mehr braucht es nicht, den Rest machen zwei Variablen:
+
+```css
+.app-header  { background-image: var(--theme-header-image, none);  background-size: cover; }
+.app-sidebar { background-image: var(--theme-sidebar-image, none); background-position: bottom center; }
+```
+
+Ohne Theme steht in den Variablen nichts, der Rückfall `none` greift, und
+perinco bleibt einfarbig. `bg-surface` bleibt an beiden Elementen: die Farbe
+liegt unter dem Bild und trägt, solange es lädt oder fehlt.
+
+Die Variable enthält **zwei Ebenen** - einen Schleier aus der Flächenfarbe des
+Themes und darunter die Grafik:
+
+```css
+--theme-header-image: linear-gradient(90deg, rgb(26 32 22 / .95) 0%, rgb(26 32 22 / .6) 55%, …),
+  url('/themes/outdoor-header.svg');
+```
+
+Das ist kein Umweg, sondern erledigt zwei Dinge zugleich:
+
+1. **Eine Grafik für beide Modi.** Der dunkle Schleier des Dunkelmodus tönt
+   denselben blauen Himmel zur Nacht ab - es braucht keine zweite Datei.
+2. **Lesbarkeit.** In der oberen Leiste liegt der Schleier an den Rändern dicht
+   (Titel links, Schalter rechts) und lässt die Grafik nur in der leeren Mitte
+   durch; in der Seitenleiste deckt er oben über den Menüpunkten und gibt nach
+   unten frei, wo die Leiste ohnehin leer ist.
+
+> **Eine Lehre aus dem ersten Versuch:** Die Cyberpunk-Grafik hatte zuerst eine
+> deckende Nachtfläche. Im **hellen** Modus wurde daraus unter dem weissen
+> Schleier ein grauer Schmutzstreifen. Seither ist sie durchsichtig und zeigt
+> nur Licht - über Dunkel leuchtet das Neon, über Weiss bleiben blasse farbige
+> Linien. Wer eine Grafik ergänzt: **keine deckenden Flächen**, nur Motiv.
+
 ### 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

@@ -85,6 +85,12 @@ 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
+  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.
+
   ![Dieselbe Ansicht im dunklen Design](bilder/aus-mails-dunkel.png)
 * Die Menüpunkte **Akquise**, **Opportunities**, **Kontakte**, **Mails** und
   **Scanner** klappen beim Anklicken ihre Unterpunkte auf. Hinter einigen steht

docs/09-quellcode.md

@@ -247,7 +247,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) 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, 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 |
 | `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 |