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>

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>