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>

public/themes/rainy-header.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80" width="1600" height="80" preserveAspectRatio="xMidYMid slice">
+  <!--
+    Rainy, obere Leiste: eine Wolkendecke.
+
+    Die Datei hat zwei Aufgaben. Sie ist das Hintergrundbild der Leiste, und sie
+    ist die Maske fuer das Wetterleuchten (components/RainyWeather.tsx): der
+    Blitz leuchtet nur dort, wo hier deckend gezeichnet ist. Deshalb gibt es
+    keine Flaeche und keinen Himmel, nur Wolken auf durchsichtigem Grund - sonst
+    leuchtete beim Blitz die ganze Leiste statt der Wolken.
+
+    Drei Lagen von hinten nach vorn: hell und weich, mittel, dunkel und
+    tiefhaengend. Die Unterkanten sind flach wie bei echten Regenwolken.
+  -->
+  <defs>
+    <filter id="weich" x="-10%" y="-40%" width="120%" height="180%">
+      <feGaussianBlur stdDeviation="2.2" />
+    </filter>
+  </defs>
+
+  <!-- Hintere Lage: hell, verschwommen -->
+  <g fill="#a9b6c6" opacity="0.55" filter="url(#weich)">
+    <ellipse cx="90" cy="22" rx="110" ry="20" />
+    <ellipse cx="330" cy="16" rx="140" ry="22" />
+    <ellipse cx="610" cy="24" rx="130" ry="20" />
+    <ellipse cx="880" cy="14" rx="150" ry="22" />
+    <ellipse cx="1150" cy="22" rx="130" ry="20" />
+    <ellipse cx="1410" cy="16" rx="150" ry="22" />
+  </g>
+
+  <!-- Mittlere Lage -->
+  <g fill="#8394aa" opacity="0.7" filter="url(#weich)">
+    <path d="M150 44 C 150 30 170 22 186 26 C 194 10 222 6 238 18 C 252 6 282 10 288 28 C 306 26 318 36 314 46 Z" />
+    <path d="M500 42 C 498 28 520 20 536 26 C 546 8 580 4 596 20 C 612 8 646 14 650 30 C 670 28 684 38 678 46 Z" />
+    <path d="M760 40 C 760 26 780 18 796 24 C 806 8 836 4 850 18 C 866 8 894 12 898 28 C 914 28 924 36 920 44 Z" />
+    <path d="M1060 44 C 1058 30 1078 22 1094 28 C 1104 10 1138 6 1154 22 C 1170 10 1204 16 1208 32 C 1226 30 1238 40 1232 48 Z" />
+    <path d="M1360 42 C 1360 28 1380 20 1396 26 C 1406 10 1438 6 1452 20 C 1468 10 1498 14 1502 30 C 1518 30 1530 38 1524 46 Z" />
+  </g>
+
+  <!-- Vordere Lage: dunkel, tief, flache Unterkante -->
+  <g fill="#5d6d82" opacity="0.85">
+    <path d="M300 56 C 296 42 314 32 332 38 C 340 20 374 16 390 32 C 402 20 436 22 440 40 C 460 38 474 48 468 58 Z" />
+    <path d="M640 60 C 636 46 656 36 674 42 C 684 24 720 20 736 36 C 750 24 786 28 790 46 C 810 44 824 54 818 62 Z" />
+    <path d="M960 54 C 956 40 976 30 994 36 C 1004 18 1038 14 1054 30 C 1068 18 1102 22 1106 40 C 1124 38 1138 48 1132 56 Z" />
+    <path d="M1220 60 C 1218 46 1236 38 1252 42 C 1262 26 1292 22 1306 36 C 1320 26 1350 30 1352 46 C 1368 46 1378 54 1374 62 Z" />
+  </g>
+</svg>

public/themes/rainy-sidebar.svg

@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 900" width="260" height="900" preserveAspectRatio="xMidYMax slice">
+  <!--
+    Rainy, Seitenleiste: nasse Huegel mit Pfuetzen, von unten hereinwachsend.
+
+    Wie bei den anderen Themes sitzt das Motiv unten - oben liegen die
+    Menuepunkte unter einem dichten Schleier (index.css). Der Regen selbst ist
+    nicht gezeichnet, er faellt lebendig ueber den Bildschirm; hier stehen nur
+    die Ringe, die er in den Pfuetzen hinterlaesst.
+  -->
+  <defs>
+    <linearGradient id="dunst" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#8fa1b6" stop-opacity="0" />
+      <stop offset="1" stop-color="#8fa1b6" stop-opacity="0.45" />
+    </linearGradient>
+    <filter id="weich" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="12" />
+    </filter>
+  </defs>
+
+  <!-- Nebel ueber dem Boden -->
+  <rect y="540" width="260" height="360" fill="url(#dunst)" filter="url(#weich)" />
+
+  <!-- Hintere Huegel -->
+  <path d="M0 740 C 50 700 100 712 140 724 C 180 736 220 706 260 712 L260 900 L0 900 Z" fill="#7d8ea3" opacity="0.45" />
+
+  <!-- Vordere Huegel -->
+  <path d="M0 792 C 60 770 110 786 160 778 C 200 772 236 782 260 776 L260 900 L0 900 Z" fill="#56667b" opacity="0.8" />
+
+  <!-- Pfuetzen: der Himmel spiegelt sich hell darin -->
+  <g fill="#b9c7d6" opacity="0.45">
+    <ellipse cx="62" cy="838" rx="42" ry="7" />
+    <ellipse cx="184" cy="858" rx="52" ry="8" />
+  </g>
+
+  <!-- Ringe, die der Regen in den Pfuetzen zieht -->
+  <g fill="none" stroke="#eef3f8" stroke-width="1.2" opacity="0.4">
+    <ellipse cx="52" cy="838" rx="12" ry="2.4" />
+    <ellipse cx="52" cy="838" rx="22" ry="4" opacity="0.5" />
+    <ellipse cx="80" cy="838" rx="6" ry="1.4" />
+    <ellipse cx="170" cy="858" rx="16" ry="3" />
+    <ellipse cx="170" cy="858" rx="28" ry="5" opacity="0.45" />
+    <ellipse cx="206" cy="857" rx="8" ry="1.8" />
+  </g>
+
+  <!-- Graeser am Pfuetzenrand, dunkel und nass -->
+  <g stroke="#3e4b5c" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.35">
+    <path d="M14 830 Q 10 808 20 794" />
+    <path d="M22 832 Q 28 810 22 796" />
+    <path d="M118 848 Q 112 824 124 810" />
+    <path d="M128 850 Q 134 826 128 812" />
+    <path d="M238 846 Q 232 824 244 810" />
+    <path d="M248 848 Q 254 826 250 812" />
+  </g>
+</svg>