diff --git a/docs/05-frontend.md b/docs/05-frontend.md
index e628c2f..383395b 100644
--- a/docs/05-frontend.md
+++ b/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
diff --git a/docs/07-anleitung-benutzer.md b/docs/07-anleitung-benutzer.md
index b99b855..e30e3df 100644
--- a/docs/07-anleitung-benutzer.md
+++ b/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
diff --git a/docs/09-quellcode.md b/docs/09-quellcode.md
index a8b2d82..f1802e8 100644
--- a/docs/09-quellcode.md
+++ b/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 |
 
diff --git a/public/themes/cyberpunk-header.svg b/public/themes/cyberpunk-header.svg
new file mode 100644
index 0000000..9824ab0
--- /dev/null
+++ b/public/themes/cyberpunk-header.svg
@@ -0,0 +1,93 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80" width="1600" height="80" preserveAspectRatio="xMidYMid slice">
+  <!--
+    Cyberpunk, obere Leiste: Neonroehren hinter Regen.
+
+    Die Roehren sind doppelt gezeichnet - einmal breit und unscharf (der Schein),
+    einmal duenn und hell (das Glas). Genau daraus besteht der Neoneffekt; eine
+    einzelne farbige Linie sieht nur nach Linie aus.
+
+    Der Regen faellt schraeg und ist bewusst blass: er soll Bewegung andeuten,
+    nicht die Schrift der Leiste stoeren. Die Deckung darueber kommt aus dem
+    Theme (index.css), damit dieselbe Grafik im hellen Modus blass bleibt.
+  -->
+  <defs>
+    <filter id="schein" x="-60%" y="-200%" width="220%" height="500%">
+      <feGaussianBlur stdDeviation="7" />
+    </filter>
+    <filter id="weiterSchein" x="-80%" y="-300%" width="260%" height="700%">
+      <feGaussianBlur stdDeviation="18" />
+    </filter>
+  </defs>
+
+  <!--
+    Bewusst KEINE deckende Nachtflaeche: die Grafik ist durchsichtig und zeigt
+    nur Licht. Ueber der dunklen Flaeche des Dunkelmodus ergibt das leuchtendes
+    Neon, ueber der weissen des hellen Modus blasse farbige Linien. Mit einer
+    dunklen Grundflaeche wurde daraus im hellen Modus ein grauer Schmutzstreifen.
+  -->
+
+  <!-- Ferne Fensterreihen: die Stadt im Hintergrund -->
+  <g fill="#4a6fa8" opacity="0.35">
+    <rect x="120" y="18" width="3" height="5" /><rect x="130" y="30" width="3" height="4" />
+    <rect x="148" y="12" width="3" height="6" /><rect x="160" y="26" width="3" height="5" />
+    <rect x="420" y="22" width="3" height="5" /><rect x="432" y="14" width="3" height="4" />
+    <rect x="446" y="34" width="3" height="5" /><rect x="458" y="20" width="3" height="6" />
+    <rect x="980" y="16" width="3" height="5" /><rect x="992" y="28" width="3" height="4" />
+    <rect x="1006" y="20" width="3" height="6" /><rect x="1018" y="34" width="3" height="4" />
+    <rect x="1320" y="24" width="3" height="5" /><rect x="1332" y="14" width="3" height="6" />
+    <rect x="1346" y="30" width="3" height="4" />
+  </g>
+
+  <!-- Waagerechte Neonroehren -->
+  <g>
+    <!-- Magenta, lang -->
+    <rect x="180" y="26" width="300" height="8" fill="#c026d3" opacity="0.5" filter="url(#weiterSchein)" />
+    <rect x="180" y="28" width="300" height="4" fill="#e879f9" opacity="0.85" filter="url(#schein)" />
+    <rect x="180" y="29" width="300" height="2" fill="#fbe3ff" opacity="0.95" />
+
+    <!-- Cyan, kurz -->
+    <rect x="620" y="50" width="180" height="8" fill="#0891b2" opacity="0.5" filter="url(#weiterSchein)" />
+    <rect x="620" y="52" width="180" height="4" fill="#22d3ee" opacity="0.85" filter="url(#schein)" />
+    <rect x="620" y="53" width="180" height="2" fill="#d6feff" opacity="0.95" />
+
+    <!-- Violett, mittig -->
+    <rect x="900" y="20" width="240" height="8" fill="#7326d6" opacity="0.5" filter="url(#weiterSchein)" />
+    <rect x="900" y="22" width="240" height="4" fill="#a24cff" opacity="0.85" filter="url(#schein)" />
+    <rect x="900" y="23" width="240" height="2" fill="#ecdcff" opacity="0.95" />
+
+    <!-- Cyan, rechts -->
+    <rect x="1260" y="46" width="220" height="8" fill="#0891b2" opacity="0.45" filter="url(#weiterSchein)" />
+    <rect x="1260" y="48" width="220" height="4" fill="#22d3ee" opacity="0.8" filter="url(#schein)" />
+    <rect x="1260" y="49" width="220" height="2" fill="#d6feff" opacity="0.9" />
+  </g>
+
+  <!-- Senkrechte Roehren: setzen Takt in die Breite -->
+  <g>
+    <rect x="540" y="0" width="6" height="80" fill="#c026d3" opacity="0.35" filter="url(#weiterSchein)" />
+    <rect x="542" y="0" width="2" height="80" fill="#f0a6ff" opacity="0.7" filter="url(#schein)" />
+    <rect x="1180" y="0" width="6" height="80" fill="#0891b2" opacity="0.35" filter="url(#weiterSchein)" />
+    <rect x="1182" y="0" width="2" height="80" fill="#7ce9f7" opacity="0.7" filter="url(#schein)" />
+  </g>
+
+  <!-- Regen: schraege Striche, unterschiedlich lang und blass -->
+  <g stroke="#a5c8ff" stroke-linecap="round">
+    <g stroke-width="1.2" opacity="0.3">
+      <path d="M40 -6 l-8 26" /><path d="M96 4 l-8 26" /><path d="M152 -8 l-8 26" />
+      <path d="M214 10 l-8 26" /><path d="M268 -4 l-8 26" /><path d="M330 16 l-8 26" />
+      <path d="M392 2 l-8 26" /><path d="M452 20 l-8 26" /><path d="M512 -2 l-8 26" />
+      <path d="M574 14 l-8 26" /><path d="M636 4 l-8 26" /><path d="M698 22 l-8 26" />
+      <path d="M760 -6 l-8 26" /><path d="M822 12 l-8 26" /><path d="M884 0 l-8 26" />
+      <path d="M946 18 l-8 26" /><path d="M1008 6 l-8 26" /><path d="M1070 24 l-8 26" />
+      <path d="M1132 -4 l-8 26" /><path d="M1194 14 l-8 26" /><path d="M1256 2 l-8 26" />
+      <path d="M1318 20 l-8 26" /><path d="M1380 8 l-8 26" /><path d="M1442 26 l-8 26" />
+      <path d="M1504 -2 l-8 26" /><path d="M1566 16 l-8 26" />
+    </g>
+    <g stroke-width="1.6" opacity="0.22">
+      <path d="M70 34 l-10 34" /><path d="M186 40 l-10 34" /><path d="M302 30 l-10 34" />
+      <path d="M418 44 l-10 34" /><path d="M534 36 l-10 34" /><path d="M650 46 l-10 34" />
+      <path d="M766 32 l-10 34" /><path d="M882 42 l-10 34" /><path d="M998 34 l-10 34" />
+      <path d="M1114 48 l-10 34" /><path d="M1230 36 l-10 34" /><path d="M1346 44 l-10 34" />
+      <path d="M1462 32 l-10 34" /><path d="M1578 42 l-10 34" />
+    </g>
+  </g>
+</svg>
diff --git a/public/themes/cyberpunk-sidebar.svg b/public/themes/cyberpunk-sidebar.svg
new file mode 100644
index 0000000..da91abd
--- /dev/null
+++ b/public/themes/cyberpunk-sidebar.svg
@@ -0,0 +1,106 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 900" width="260" height="900" preserveAspectRatio="xMidYMax slice">
+  <!--
+    Cyberpunk, Seitenleiste: Blick durch ein Fenster in eine regnerische Gasse.
+
+    Aufbau von hinten nach vorn: Fensterreihen der Haeuser, senkrechte
+    Neonroehren, eine Pfuetze mit Spiegelung, der Regen davor. Die Roehren sind
+    wieder doppelt gezeichnet - breit und unscharf als Schein, duenn und hell
+    als Glas.
+
+    Die obere Haelfte bleibt ruhig: dort stehen die Menuepunkte. Die Gasse steht
+    in den unteren rund 350 px, wo die Leiste frei ist.
+  -->
+  <defs>
+    <filter id="schein" x="-100%" y="-40%" width="300%" height="180%">
+      <feGaussianBlur stdDeviation="6" />
+    </filter>
+    <filter id="weiterSchein" x="-200%" y="-60%" width="500%" height="220%">
+      <feGaussianBlur stdDeviation="16" />
+    </filter>
+    <!--
+      Kein Schwarz: ein farbiger Dunst statt einer dunklen Flaeche. Ueber der
+      dunklen Flaeche des Dunkelmodus wirkt er wie Tiefe, ueber der weissen des
+      hellen Modus wie ein kuehler Schleier - grau wird er in keinem von beiden.
+    -->
+    <linearGradient id="tiefe" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#3a4a80" stop-opacity="0" />
+      <stop offset="0.4" stop-color="#33407a" stop-opacity="0.16" />
+      <stop offset="1" stop-color="#2b3a72" stop-opacity="0.3" />
+    </linearGradient>
+    <linearGradient id="pfuetze" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#22d3ee" stop-opacity="0.35" />
+      <stop offset="1" stop-color="#22d3ee" stop-opacity="0" />
+    </linearGradient>
+  </defs>
+
+  <!-- Die Gasse wird nach unten dichter -->
+  <rect y="450" width="260" height="450" fill="url(#tiefe)" />
+
+  <!-- Fensterreihen: warm und kalt gemischt, wie bewohnte Haeuser -->
+  <g opacity="0.5">
+    <g fill="#f0b356">
+      <rect x="18" y="612" width="5" height="7" /><rect x="34" y="648" width="5" height="7" />
+      <rect x="18" y="700" width="5" height="7" /><rect x="50" y="676" width="5" height="7" />
+      <rect x="208" y="624" width="5" height="7" /><rect x="224" y="668" width="5" height="7" />
+      <rect x="240" y="708" width="5" height="7" />
+    </g>
+    <g fill="#7cc4ef">
+      <rect x="34" y="588" width="5" height="7" /><rect x="18" y="664" width="5" height="7" />
+      <rect x="50" y="628" width="5" height="7" /><rect x="224" y="596" width="5" height="7" />
+      <rect x="208" y="688" width="5" height="7" /><rect x="240" y="640" width="5" height="7" />
+    </g>
+  </g>
+
+  <!-- Senkrechte Neonroehren links und rechts, wie Schilder an den Haeusern -->
+  <g>
+    <rect x="26" y="520" width="10" height="180" fill="#c026d3" opacity="0.4" filter="url(#weiterSchein)" />
+    <rect x="29" y="520" width="4" height="180" fill="#e879f9" opacity="0.8" filter="url(#schein)" />
+    <rect x="30" y="520" width="2" height="180" fill="#fbe3ff" opacity="0.9" />
+
+    <rect x="222" y="580" width="10" height="230" fill="#0891b2" opacity="0.4" filter="url(#weiterSchein)" />
+    <rect x="225" y="580" width="4" height="230" fill="#22d3ee" opacity="0.8" filter="url(#schein)" />
+    <rect x="226" y="580" width="2" height="230" fill="#d6feff" opacity="0.9" />
+
+    <rect x="126" y="700" width="8" height="120" fill="#7326d6" opacity="0.35" filter="url(#weiterSchein)" />
+    <rect x="128" y="700" width="4" height="120" fill="#a24cff" opacity="0.75" filter="url(#schein)" />
+  </g>
+
+  <!-- Waagerechtes Schild, quer zur Gasse -->
+  <g>
+    <rect x="60" y="756" width="140" height="8" fill="#c026d3" opacity="0.4" filter="url(#weiterSchein)" />
+    <rect x="60" y="758" width="140" height="4" fill="#f0a6ff" opacity="0.8" filter="url(#schein)" />
+  </g>
+
+  <!-- Nasser Boden mit Spiegelung: die Roehren strahlen nach unten aus -->
+  <rect y="828" width="260" height="72" fill="#243060" opacity="0.3" />
+  <g>
+    <rect x="26" y="828" width="10" height="60" fill="url(#pfuetze)" filter="url(#schein)" />
+    <rect x="222" y="828" width="10" height="60" fill="url(#pfuetze)" filter="url(#schein)" />
+    <rect x="126" y="828" width="8" height="46" fill="url(#pfuetze)" filter="url(#schein)" />
+  </g>
+  <!-- Zwei Lichtstreifen als nasser Glanz -->
+  <g fill="#7ce9f7" opacity="0.16">
+    <rect x="0" y="846" width="260" height="2" />
+    <rect x="0" y="872" width="260" height="1.5" />
+  </g>
+
+  <!-- Regen ueber die ganze Hoehe, oben blasser -->
+  <g stroke="#a5c8ff" stroke-linecap="round">
+    <g stroke-width="1.2" opacity="0.12">
+      <path d="M20 60 l-6 40" /><path d="M78 20 l-6 40" /><path d="M140 90 l-6 40" />
+      <path d="M198 40 l-6 40" /><path d="M246 110 l-6 40" /><path d="M46 150 l-6 40" />
+      <path d="M112 130 l-6 40" /><path d="M176 170 l-6 40" /><path d="M228 200 l-6 40" />
+    </g>
+    <g stroke-width="1.3" opacity="0.2">
+      <path d="M32 300 l-7 46" /><path d="M96 340 l-7 46" /><path d="M158 310 l-7 46" />
+      <path d="M214 360 l-7 46" /><path d="M62 420 l-7 46" /><path d="M128 400 l-7 46" />
+      <path d="M190 440 l-7 46" /><path d="M244 410 l-7 46" />
+    </g>
+    <g stroke-width="1.6" opacity="0.3">
+      <path d="M24 520 l-9 56" /><path d="M88 560 l-9 56" /><path d="M150 530 l-9 56" />
+      <path d="M206 580 l-9 56" /><path d="M54 640 l-9 56" /><path d="M118 620 l-9 56" />
+      <path d="M182 660 l-9 56" /><path d="M240 630 l-9 56" /><path d="M40 740 l-9 56" />
+      <path d="M104 760 l-9 56" /><path d="M168 730 l-9 56" /><path d="M232 770 l-9 56" />
+    </g>
+  </g>
+</svg>
diff --git a/public/themes/outdoor-header.svg b/public/themes/outdoor-header.svg
new file mode 100644
index 0000000..ec2001a
--- /dev/null
+++ b/public/themes/outdoor-header.svg
@@ -0,0 +1,57 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80" width="1600" height="80" preserveAspectRatio="xMidYMid slice">
+  <!--
+    Outdoor, obere Leiste: blauer Himmel mit Schleierwolken.
+
+    Die Leiste ist nur 80 px hoch und traegt Text - deshalb keine kraeftigen
+    Kontraste, sondern ein weicher Verlauf und Wolken aus unscharfen Ellipsen.
+    Der Schleier darueber kommt aus dem Theme (index.css), nicht aus dieser
+    Datei: so tont derselbe Himmel im Dunkelmodus zur Nacht ab.
+  -->
+  <defs>
+    <linearGradient id="himmel" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#5eb3e4" />
+      <stop offset="0.55" stop-color="#8fcdec" />
+      <stop offset="1" stop-color="#cfe8f5" />
+    </linearGradient>
+    <filter id="weich" x="-30%" y="-120%" width="160%" height="340%">
+      <feGaussianBlur stdDeviation="9" />
+    </filter>
+    <filter id="sehrWeich" x="-40%" y="-200%" width="180%" height="500%">
+      <feGaussianBlur stdDeviation="20" />
+    </filter>
+  </defs>
+
+  <rect width="1600" height="80" fill="url(#himmel)" />
+
+  <!-- Sonnenschein oben links, gerade so sichtbar -->
+  <ellipse cx="240" cy="4" rx="260" ry="60" fill="#fff6d8" opacity="0.5" filter="url(#sehrWeich)" />
+
+  <!-- Wolkenbaenke: je drei bis vier Ellipsen, damit die Kanten unregelmaessig sind -->
+  <g fill="#ffffff" filter="url(#weich)">
+    <g opacity="0.85">
+      <ellipse cx="150" cy="52" rx="120" ry="20" />
+      <ellipse cx="230" cy="44" rx="80" ry="16" />
+      <ellipse cx="86" cy="58" rx="70" ry="14" />
+    </g>
+    <g opacity="0.6">
+      <ellipse cx="520" cy="30" rx="150" ry="17" />
+      <ellipse cx="610" cy="24" rx="90" ry="13" />
+    </g>
+    <g opacity="0.8">
+      <ellipse cx="880" cy="58" rx="170" ry="22" />
+      <ellipse cx="960" cy="50" rx="110" ry="16" />
+      <ellipse cx="800" cy="62" rx="90" ry="15" />
+    </g>
+    <g opacity="0.55">
+      <ellipse cx="1240" cy="26" rx="140" ry="16" />
+      <ellipse cx="1330" cy="34" rx="100" ry="14" />
+    </g>
+    <g opacity="0.78">
+      <ellipse cx="1520" cy="56" rx="150" ry="20" />
+      <ellipse cx="1440" cy="62" rx="90" ry="14" />
+    </g>
+  </g>
+
+  <!-- Dunstband am unteren Rand: laesst die Leiste sauber in den Inhalt uebergehen -->
+  <rect y="60" width="1600" height="20" fill="#ffffff" opacity="0.28" filter="url(#weich)" />
+</svg>
diff --git a/public/themes/outdoor-sidebar.svg b/public/themes/outdoor-sidebar.svg
new file mode 100644
index 0000000..b4cb976
--- /dev/null
+++ b/public/themes/outdoor-sidebar.svg
@@ -0,0 +1,70 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 900" width="260" height="900" preserveAspectRatio="xMidYMax slice">
+  <!--
+    Outdoor, Seitenleiste: Wiese, die von unten hereinwaechst.
+
+    Der obere Teil ist absichtlich leer (durchsichtig): dort stehen die
+    Menuepunkte. Das Gras sitzt in den unteren rund 300 px, wo die Leiste
+    ohnehin frei ist, und wird nach oben hin blasser.
+
+    Gezeichnet mit quadratischen Bezierkurven statt Bildpunkten - die Halme
+    bleiben damit in jeder Hoehe scharf.
+  -->
+  <defs>
+    <linearGradient id="wiese" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#7bbf5a" stop-opacity="0" />
+      <stop offset="0.45" stop-color="#6fb350" stop-opacity="0.55" />
+      <stop offset="1" stop-color="#4e8f39" stop-opacity="0.95" />
+    </linearGradient>
+    <linearGradient id="dunst" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#a8d68f" stop-opacity="0" />
+      <stop offset="1" stop-color="#a8d68f" stop-opacity="0.35" />
+    </linearGradient>
+    <filter id="weich" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="14" />
+    </filter>
+  </defs>
+
+  <!-- Gruener Schein, der den Uebergang traegt -->
+  <rect y="520" width="260" height="380" fill="url(#dunst)" filter="url(#weich)" />
+
+  <!-- Erdreich und Wiesenflaeche -->
+  <path d="M0 760 C 60 742 120 754 180 744 C 216 738 240 746 260 740 L260 900 L0 900 Z" fill="url(#wiese)" />
+
+  <!-- Hintere Halmreihe: hell, duenn, hoch -->
+  <g stroke="#8fca6e" stroke-width="2.4" stroke-linecap="round" fill="none" opacity="0.5">
+    <path d="M12 772 Q 6 720 20 686" />
+    <path d="M34 768 Q 40 716 30 676" />
+    <path d="M58 774 Q 52 726 66 692" />
+    <path d="M84 766 Q 92 714 82 680" />
+    <path d="M110 772 Q 104 722 118 690" />
+    <path d="M136 764 Q 144 712 134 678" />
+    <path d="M162 770 Q 156 720 170 688" />
+    <path d="M190 766 Q 198 716 188 684" />
+    <path d="M216 772 Q 210 724 224 694" />
+    <path d="M242 768 Q 250 718 240 686" />
+  </g>
+
+  <!-- Vordere Halmreihe: dunkler, kraeftiger, kuerzer -->
+  <g stroke="#3f7d2e" stroke-width="3.6" stroke-linecap="round" fill="none" opacity="0.85">
+    <path d="M0 830 Q 8 786 24 758" />
+    <path d="M24 836 Q 18 792 6 764" />
+    <path d="M48 828 Q 58 784 74 756" />
+    <path d="M72 838 Q 66 794 54 766" />
+    <path d="M98 830 Q 108 786 124 760" />
+    <path d="M122 840 Q 116 796 104 768" />
+    <path d="M148 828 Q 158 784 174 758" />
+    <path d="M172 838 Q 166 794 154 764" />
+    <path d="M198 832 Q 208 788 224 760" />
+    <path d="M222 840 Q 216 796 204 768" />
+    <path d="M248 830 Q 258 786 260 764" />
+  </g>
+
+  <!-- Ein paar Blueten, damit es nicht nach Rasenteppich aussieht -->
+  <g opacity="0.8">
+    <circle cx="42" cy="742" r="4" fill="#f7e07a" />
+    <circle cx="128" cy="726" r="3.4" fill="#f7f3e0" />
+    <circle cx="206" cy="748" r="3.8" fill="#f7e07a" />
+    <circle cx="88" cy="800" r="3" fill="#f7f3e0" />
+    <circle cx="186" cy="812" r="3.4" fill="#f7e07a" />
+  </g>
+</svg>
diff --git a/public/themes/pixel-header.svg b/public/themes/pixel-header.svg
new file mode 100644
index 0000000..7432585
--- /dev/null
+++ b/public/themes/pixel-header.svg
@@ -0,0 +1,68 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 20" width="400" height="20" shape-rendering="crispEdges" preserveAspectRatio="xMidYMid slice">
+  <!--
+    Pixel Art, obere Leiste: 8-bit-Himmel mit Wolken und Huegelkante.
+
+    Der viewBox ist absichtlich winzig (400 x 20): eine Einheit ist ein
+    Bildpunkt, und die Grafik wird von der Leiste hochskaliert. Zusammen mit
+    shape-rendering="crispEdges" bleiben die Kanten hart - genau das, was ein
+    Pixelbild ausmacht. Ein feiner Verlauf waere hier ein Stilbruch, deshalb
+    liegen die Himmelstoene in Baendern uebereinander.
+  -->
+
+  <!-- Himmel in Stufen statt Verlauf -->
+  <rect width="400" height="6" fill="#7ec0e8" />
+  <rect y="6" width="400" height="5" fill="#96cfee" />
+  <rect y="11" width="400" height="4" fill="#b3dcf3" />
+  <rect y="15" width="400" height="5" fill="#cbe8f7" />
+
+  <!-- Sonne: ein Quadrat mit abgesetzter Ecke, wie in alten Spielen -->
+  <g fill="#ffe98a">
+    <rect x="26" y="2" width="8" height="8" />
+    <rect x="24" y="4" width="12" height="4" />
+    <rect x="28" y="0" width="4" height="12" />
+  </g>
+
+  <!-- Wolken: Bloecke, keine Rundungen -->
+  <g fill="#ffffff">
+    <rect x="70" y="4" width="16" height="3" />
+    <rect x="74" y="2" width="9" height="3" />
+    <rect x="66" y="7" width="24" height="3" />
+
+    <rect x="150" y="8" width="20" height="3" />
+    <rect x="156" y="6" width="10" height="3" />
+    <rect x="146" y="11" width="28" height="2" />
+
+    <rect x="248" y="3" width="14" height="3" />
+    <rect x="252" y="1" width="8" height="3" />
+    <rect x="244" y="6" width="22" height="3" />
+
+    <rect x="330" y="7" width="18" height="3" />
+    <rect x="335" y="5" width="9" height="3" />
+    <rect x="326" y="10" width="26" height="2" />
+  </g>
+
+  <!-- Vogelschwarm: je zwei Bildpunkte -->
+  <g fill="#4a5a66">
+    <rect x="200" y="4" width="2" height="1" />
+    <rect x="203" y="3" width="2" height="1" />
+    <rect x="290" y="6" width="2" height="1" />
+    <rect x="293" y="5" width="2" height="1" />
+  </g>
+
+  <!-- Huegelkante am unteren Rand, treppenfoermig -->
+  <g fill="#5fa83f">
+    <rect y="17" width="400" height="3" />
+    <rect x="0" y="16" width="40" height="1" />
+    <rect x="52" y="15" width="34" height="2" />
+    <rect x="60" y="14" width="18" height="1" />
+    <rect x="120" y="16" width="46" height="1" />
+    <rect x="196" y="15" width="40" height="2" />
+    <rect x="206" y="14" width="20" height="1" />
+    <rect x="280" y="16" width="52" height="1" />
+    <rect x="348" y="15" width="36" height="2" />
+  </g>
+  <!-- Grasspitzen als hellere Kante -->
+  <g fill="#7ec957">
+    <rect x="0" y="17" width="400" height="1" />
+  </g>
+</svg>
diff --git a/public/themes/pixel-sidebar.svg b/public/themes/pixel-sidebar.svg
new file mode 100644
index 0000000..b569b2b
--- /dev/null
+++ b/public/themes/pixel-sidebar.svg
@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 225" width="65" height="225" shape-rendering="crispEdges" preserveAspectRatio="xMidYMax slice">
+  <!--
+    Pixel Art, Seitenleiste: Steinmauer, von unten aufgemauert.
+
+    Der viewBox ist winzig (65 x 225, eine Einheit = ein Bildpunkt), damit die
+    Mauer beim Hochskalieren blockig bleibt; shape-rendering="crispEdges" haelt
+    die Kanten hart. Oben ist die Grafik leer - dort stehen die Menuepunkte.
+
+    Nach oben hin wird die Mauer **stufenweise** durchsichtig, Reihe um Reihe.
+    Ein weicher Verlauf waere hier ein Stilbruch: Pixelgrafik kennt keine
+    Zwischentoene, sie staffelt.
+
+    Jeder Stein ist 12 x 6 Punkte, versetzt gemauert, mit heller Kante oben und
+    dunkler unten - damit taeuscht Pixelgrafik Tiefe vor.
+  -->
+  <defs>
+    <g id="stein">
+      <rect width="12" height="6" fill="#8a8f7a" />
+      <rect width="12" height="1" fill="#a8ad96" />
+      <rect y="5" width="12" height="1" fill="#5f6553" />
+      <rect x="11" width="1" height="6" fill="#5f6553" />
+    </g>
+    <!-- Eine ganze Reihe; der Versatz kommt beim Aufruf -->
+    <g id="reihe">
+      <use href="#stein" x="0" /><use href="#stein" x="13" /><use href="#stein" x="26" />
+      <use href="#stein" x="39" /><use href="#stein" x="52" />
+    </g>
+  </defs>
+
+  <!-- Reihen von unten nach oben, jede zweite um einen halben Stein versetzt -->
+  <use href="#reihe" y="219" opacity="1" />
+  <use href="#reihe" x="-6" y="212" opacity="1" />
+  <use href="#reihe" y="205" opacity="1" />
+  <use href="#reihe" x="-6" y="198" opacity="1" />
+  <use href="#reihe" y="191" opacity="0.9" />
+  <use href="#reihe" x="-6" y="184" opacity="0.8" />
+  <use href="#reihe" y="177" opacity="0.7" />
+  <use href="#reihe" x="-6" y="170" opacity="0.6" />
+  <use href="#reihe" y="163" opacity="0.5" />
+  <use href="#reihe" x="-6" y="156" opacity="0.4" />
+  <use href="#reihe" y="149" opacity="0.32" />
+  <use href="#reihe" x="-6" y="142" opacity="0.24" />
+  <use href="#reihe" y="135" opacity="0.18" />
+  <use href="#reihe" x="-6" y="128" opacity="0.13" />
+  <use href="#reihe" y="121" opacity="0.09" />
+  <use href="#reihe" x="-6" y="114" opacity="0.06" />
+  <use href="#reihe" y="107" opacity="0.03" />
+
+  <!-- Moos in den Fugen: sonst wirkt die Mauer steril -->
+  <g fill="#6f9c4a">
+    <rect x="4" y="218" width="3" height="1" />
+    <rect x="30" y="211" width="4" height="1" />
+    <rect x="17" y="204" width="2" height="1" />
+    <rect x="46" y="197" width="3" height="1" />
+    <rect x="9" y="190" width="4" height="1" opacity="0.9" />
+    <rect x="55" y="183" width="3" height="1" opacity="0.8" />
+    <rect x="24" y="176" width="2" height="1" opacity="0.7" />
+    <rect x="38" y="162" width="3" height="1" opacity="0.5" />
+  </g>
+
+  <!-- Zwei ausgebrochene Steine, damit die Mauer nicht zu regelmaessig ist -->
+  <g fill="#5f6553">
+    <rect x="26" y="219" width="12" height="6" />
+    <rect x="7" y="170" width="12" height="6" opacity="0.6" />
+  </g>
+</svg>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 0619f96..77edf61 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -17,8 +17,13 @@ export const Header: React.FC<HeaderProps> = ({ title, subtitle, onToggleSidebar
   const { theme, preference, toggle, useSystem, palette, setPalette } = useTheme();
   const isDark = theme === 'dark';
 
+  /*
+   * `app-header` ist keine Utility-Klasse, sondern ein Anker: darueber legt ein
+   * Theme ein Hintergrundbild hinter die Leiste (siehe index.css). `relative`
+   * haelt den Inhalt darueber.
+   */
   return (
-    <header className="flex shrink-0 items-center gap-4 border-b border-ink-200 bg-surface px-4 py-4 md:px-6">
+    <header className="app-header relative flex shrink-0 items-center gap-4 border-b border-ink-200 bg-surface px-4 py-4 md:px-6">
       <button
         onClick={onToggleSidebar}
         className="rounded-lg p-2 text-ink-500 transition hover:bg-ink-100 hover:text-ink-800"
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index fb64a34..106e4b0 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -352,7 +352,8 @@ export const Sidebar: React.FC<SidebarProps> = ({
       )}
 
       <aside
-        className={`fixed inset-y-0 left-0 z-30 flex h-full flex-col overflow-hidden border-r border-ink-200 bg-surface transition-all duration-300 lg:static ${
+        // `app-sidebar` ist der Anker fuer das Hintergrundbild des Themes.
+        className={`app-sidebar fixed inset-y-0 left-0 z-30 flex h-full flex-col overflow-hidden border-r border-ink-200 bg-surface transition-all duration-300 lg:static ${
           isOpen ? 'w-64 translate-x-0' : 'w-0 -translate-x-full lg:w-[76px] lg:translate-x-0'
         }`}
       >
diff --git a/src/index.css b/src/index.css
index 3752576..cc4b642 100644
--- a/src/index.css
+++ b/src/index.css
@@ -160,6 +160,24 @@
  * kaputt - genau das ist der Grund fuer die Schreibweise in allen Themes.
  * =========================================================================== */
 html.theme-outdoor:not(.dark) {
+  /* Blauer Himmel oben, Wiese links. Heller Schleier aus der Flaechenfarbe. */
+  --theme-header-image: linear-gradient(
+      90deg,
+      rgb(253 251 246 / 0.94) 0%,
+      rgb(253 251 246 / 0.38) 30%,
+      rgb(253 251 246 / 0.3) 55%,
+      rgb(253 251 246 / 0.94) 100%
+    ),
+    url('/themes/outdoor-header.svg');
+  --theme-sidebar-image: linear-gradient(
+      180deg,
+      rgb(253 251 246 / 0.97) 0%,
+      rgb(253 251 246 / 0.88) 45%,
+      rgb(253 251 246 / 0.44) 78%,
+      rgb(253 251 246 / 0.58) 100%
+    ),
+    url('/themes/outdoor-sidebar.svg');
+
   --color-canvas: #f2eee3;
   --color-surface: #fdfbf6;
 
@@ -210,6 +228,25 @@ html.theme-outdoor:not(.dark) {
  * nach kaltem Terminal aussieht.
  */
 html.theme-outdoor.dark {
+  /* Dieselben Grafiken, dunkler Schleier: aus dem Himmel wird Nacht, aus der
+     Wiese eine Silhouette. */
+  --theme-header-image: linear-gradient(
+      90deg,
+      rgb(26 32 22 / 0.95) 0%,
+      rgb(26 32 22 / 0.68) 30%,
+      rgb(26 32 22 / 0.6) 55%,
+      rgb(26 32 22 / 0.95) 100%
+    ),
+    url('/themes/outdoor-header.svg');
+  --theme-sidebar-image: linear-gradient(
+      180deg,
+      rgb(26 32 22 / 0.97) 0%,
+      rgb(26 32 22 / 0.9) 45%,
+      rgb(26 32 22 / 0.62) 78%,
+      rgb(26 32 22 / 0.72) 100%
+    ),
+    url('/themes/outdoor-sidebar.svg');
+
   --color-canvas: #12170f;
   --color-surface: #1a2016;
 
@@ -268,6 +305,24 @@ html.theme-outdoor.dark {
  * schlechtes Design.
  * =========================================================================== */
 html.theme-pixel:not(.dark) {
+  /* 8-bit-Himmel oben, Steinmauer links. */
+  --theme-header-image: linear-gradient(
+      90deg,
+      rgb(246 248 241 / 0.95) 0%,
+      rgb(246 248 241 / 0.45) 30%,
+      rgb(246 248 241 / 0.38) 55%,
+      rgb(246 248 241 / 0.95) 100%
+    ),
+    url('/themes/pixel-header.svg');
+  --theme-sidebar-image: linear-gradient(
+      180deg,
+      rgb(246 248 241 / 0.97) 0%,
+      rgb(246 248 241 / 0.92) 48%,
+      rgb(246 248 241 / 0.72) 80%,
+      rgb(246 248 241 / 0.84) 100%
+    ),
+    url('/themes/pixel-sidebar.svg');
+
   /* Deutlich dunkler als die Karten: Pixelgrafik lebt von harten Kanten, und
      bei zu aehnlichen Toenen verschwimmen Karte und Grund. */
   --color-canvas: #cdd8c2;
@@ -319,6 +374,24 @@ html.theme-pixel:not(.dark) {
  * schwarzem Grund unsichtbar), das Gruen der Knoepfe leuchtet kraeftiger.
  */
 html.theme-pixel.dark {
+  /* Nachtvariante: derselbe Himmel unter dunklem Schleier. */
+  --theme-header-image: linear-gradient(
+      90deg,
+      rgb(21 26 34 / 0.96) 0%,
+      rgb(21 26 34 / 0.7) 30%,
+      rgb(21 26 34 / 0.62) 55%,
+      rgb(21 26 34 / 0.96) 100%
+    ),
+    url('/themes/pixel-header.svg');
+  --theme-sidebar-image: linear-gradient(
+      180deg,
+      rgb(21 26 34 / 0.97) 0%,
+      rgb(21 26 34 / 0.92) 48%,
+      rgb(21 26 34 / 0.78) 80%,
+      rgb(21 26 34 / 0.88) 100%
+    ),
+    url('/themes/pixel-sidebar.svg');
+
   --color-canvas: #0d0f14;
   --color-surface: #151a22;
 
@@ -374,6 +447,25 @@ html.theme-pixel.dark {
  * plus weicher Halo in der Markenfarbe.
  * =========================================================================== */
 html.theme-cyberpunk.dark {
+  /* Neonroehren oben, regnerische Gasse links - hier ist die Grafik zu Hause,
+     der Schleier darf duenner sein. */
+  --theme-header-image: linear-gradient(
+      90deg,
+      rgb(15 17 32 / 0.94) 0%,
+      rgb(15 17 32 / 0.5) 28%,
+      rgb(15 17 32 / 0.42) 55%,
+      rgb(15 17 32 / 0.94) 100%
+    ),
+    url('/themes/cyberpunk-header.svg');
+  --theme-sidebar-image: linear-gradient(
+      180deg,
+      rgb(15 17 32 / 0.96) 0%,
+      rgb(15 17 32 / 0.86) 45%,
+      rgb(15 17 32 / 0.45) 78%,
+      rgb(15 17 32 / 0.6) 100%
+    ),
+    url('/themes/cyberpunk-sidebar.svg');
+
   --color-canvas: #07080f;
   --color-surface: #0f1120;
 
@@ -439,6 +531,25 @@ html.theme-cyberpunk.dark {
  * Schatten: ein Halo auf hellem Grund sieht nach Fehler aus, nicht nach Neon.
  */
 html.theme-cyberpunk:not(.dark) {
+  /* Am Tag bleibt vom Neon nur ein Nachklang: heller Schleier, dicht genug,
+     dass aus den Roehren blasse Linien werden statt dunkler Flecken. */
+  --theme-header-image: linear-gradient(
+      90deg,
+      rgb(255 255 255 / 0.96) 0%,
+      rgb(255 255 255 / 0.62) 30%,
+      rgb(255 255 255 / 0.55) 55%,
+      rgb(255 255 255 / 0.96) 100%
+    ),
+    url('/themes/cyberpunk-header.svg');
+  --theme-sidebar-image: linear-gradient(
+      180deg,
+      rgb(255 255 255 / 0.98) 0%,
+      rgb(255 255 255 / 0.9) 45%,
+      rgb(255 255 255 / 0.68) 78%,
+      rgb(255 255 255 / 0.78) 100%
+    ),
+    url('/themes/cyberpunk-sidebar.svg');
+
   --color-canvas: #eceff7;
   --color-surface: #ffffff;
 
@@ -518,6 +629,39 @@ html.theme-cyberpunk:not(.dark) {
     font-family: var(--font-display);
   }
 
+  /*
+   * Hintergrundbilder der oberen Leiste und der Seitenleiste.
+   *
+   * Ohne Theme steht in den Variablen nichts, dann greift der Rueckfall `none`
+   * und beide Flaechen bleiben einfarbig - perinco sieht also aus wie immer.
+   *
+   * Die Variable enthaelt **zwei** Ebenen: einen Schleier aus der Flaechenfarbe
+   * des Themes und darunter die Grafik. Das ist kein Umweg, sondern der Grund,
+   * dass eine Grafik in beiden Modi funktioniert - der Schleier des
+   * Dunkelmodus toent den blauen Himmel zur Nacht ab. Er ist ausserdem die
+   * Bedingung dafuer, dass die Schrift lesbar bleibt: in der oberen Leiste
+   * steht er an den Raendern dicht (Titel links, Knoepfe rechts) und laesst die
+   * Grafik nur in der leeren Mitte durch, in der Seitenleiste liegt er oben
+   * ueber den Menuepunkten und gibt nach unten frei.
+   *
+   * `bg-surface` an den Elementen bleibt: die Farbe liegt unter dem Bild und
+   * traegt, solange die Grafik laedt oder fehlt.
+   */
+  .app-header {
+    background-image: var(--theme-header-image, none);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+
+  .app-sidebar {
+    background-image: var(--theme-sidebar-image, none);
+    background-repeat: no-repeat;
+    /* Unten verankert: dort sitzt in allen drei Grafiken das Motiv. */
+    background-position: bottom center;
+    background-size: cover;
+  }
+
   /*
    * Pixelschrift hat eine feste Zeichenbreite und traegt ihre Sperrung selbst;
    * die negative Laufweite der Ueberschriften wuerde die Buchstaben ineinander