feat(design): neues Theme Snow mit Schneefall und Schneedecke

Eisblau in hell und dunkel. Flocken fallen per Canvas und sammeln sich
am unteren Fensterrand in einer Hoehenkarte, die per Diffusion
geglaettet wird; nach rund vier Minuten ist die Decke voll (26 px).
Bei prefers-reduced-motion bleibt es still.

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

src/index.css

@@ -10,8 +10,8 @@
  */
 
 /*
- * Fuenf Farbwelten, jede in hell und dunkel. Sie haengen an einer Klasse am
- * <html> (theme-pixel, theme-outdoor, theme-cyberpunk, theme-rainy); ohne Klasse gilt
+ * Sechs Farbwelten, jede in hell und dunkel. Sie haengen an einer Klasse am
+ * <html> (theme-pixel, theme-outdoor, theme-cyberpunk, theme-rainy, theme-snow); ohne Klasse gilt
  * perinco. Der Modus bleibt die vorhandene Klasse "dark".
  *
  * Warum das ohne Aenderung an den Komponenten geht: im Markup steht nirgends
@@ -728,6 +728,143 @@ html.theme-rainy.dark {
   --shadow-lift: 0 12px 32px rgb(0 0 0 / 0.4);
 }
 
+/* ===========================================================================
+ * Snow - Winter.
+ *
+ * Zweites Theme mit Bewegung: Schnee faellt und sammelt sich am unteren
+ * Fensterrand (components/SnowWeather.tsx). Hier stehen die Farben, dazu die
+ * --snow-* Variablen fuer Flocken und Schneedecke.
+ *
+ * Eisblau auf fast weissem Grund. Weisse Flocken waeren darauf unsichtbar,
+ * deshalb bekommen sie im hellen Modus eine zarte blaugraue Kontur, und die
+ * Schneedecke eine Schattierung nach unten.
+ * =========================================================================== */
+html.theme-snow:not(.dark) {
+  --theme-header-image: linear-gradient(
+      90deg,
+      rgb(250 252 255 / 0.96) 0%,
+      rgb(250 252 255 / 0.35) 30%,
+      rgb(250 252 255 / 0.3) 60%,
+      rgb(250 252 255 / 0.96) 100%
+    ),
+    url('/themes/snow-header.svg');
+  --theme-sidebar-image: linear-gradient(
+      180deg,
+      rgb(250 252 255 / 0.97) 0%,
+      rgb(250 252 255 / 0.88) 45%,
+      rgb(250 252 255 / 0.4) 78%,
+      rgb(250 252 255 / 0.55) 100%
+    ),
+    url('/themes/snow-sidebar.svg');
+
+  --snow-flake: #f4f9ff;
+  --snow-flake-edge: rgb(90 125 160 / 0.7);
+  --snow-pile: #ffffff;
+  --snow-pile-shade: #c2d3e4;
+  --snow-pile-edge: rgb(80 115 150 / 0.75);
+
+  --color-canvas: #edf2f7;
+  --color-surface: #fafcff;
+
+  --color-brand-50: #e9f3fa;
+  --color-brand-100: #d0e5f3;
+  --color-brand-200: #a3cbe6;
+  --color-brand-300: #6eaad4;
+  --color-brand-400: #3f89bd;
+  --color-brand-500: #1f6a9e;
+  --color-brand-600: #185681;
+  --color-brand-700: #144566;
+  --color-brand-800: #10354f;
+  --color-brand-900: #0b273b;
+  --color-brand-accent: #1f6a9e;
+
+  --color-ink-50: #f1f5f9;
+  --color-ink-100: #e2e9f0;
+  --color-ink-200: #cbd6e1;
+  --color-ink-300: #97a6b6;
+  --color-ink-400: #5c6b7c;
+  --color-ink-500: #4a5868;
+  --color-ink-600: #3a4655;
+  --color-ink-700: #2c3643;
+  --color-ink-800: #1f2731;
+  --color-ink-900: #141a21;
+  --color-ink-950: #0a0e13;
+
+  --radius-sm: 0.3rem;
+  --radius-md: 0.45rem;
+  --radius-lg: 0.65rem;
+  --radius-xl: 0.85rem;
+  --radius-2xl: 1.15rem;
+
+  --shadow-card: 0 1px 2px rgb(20 26 33 / 0.05), 0 6px 20px rgb(31 106 158 / 0.08);
+  --shadow-lift: 0 12px 30px rgb(31 106 158 / 0.16);
+}
+
+/*
+ * Snow, dunkel: Winternacht. Tiefes Nachtblau, der Schnee leuchtet darauf von
+ * selbst und braucht keine Kontur.
+ */
+html.theme-snow.dark {
+  --theme-header-image: linear-gradient(
+      90deg,
+      rgb(18 26 38 / 0.95) 0%,
+      rgb(18 26 38 / 0.55) 30%,
+      rgb(18 26 38 / 0.5) 60%,
+      rgb(18 26 38 / 0.95) 100%
+    ),
+    url('/themes/snow-header.svg');
+  --theme-sidebar-image: linear-gradient(
+      180deg,
+      rgb(18 26 38 / 0.97) 0%,
+      rgb(18 26 38 / 0.88) 45%,
+      rgb(18 26 38 / 0.55) 78%,
+      rgb(18 26 38 / 0.65) 100%
+    ),
+    url('/themes/snow-sidebar.svg');
+
+  --snow-flake: rgb(240 246 252 / 0.9);
+  --snow-flake-edge: transparent;
+  --snow-pile: #e9f1f9;
+  --snow-pile-shade: #a9bdd1;
+  --snow-pile-edge: rgb(255 255 255 / 0.6);
+
+  --color-canvas: #0b1119;
+  --color-surface: #121a26;
+
+  --color-brand-50: #0e1f2e;
+  --color-brand-100: #13283c;
+  --color-brand-200: #1c3d59;
+  --color-brand-300: #27567c;
+  --color-brand-400: #3571a0;
+  --color-brand-500: #2f73a8;
+  --color-brand-600: #3b80b5;
+  --color-brand-700: #92c2e6;
+  --color-brand-800: #c0dcf1;
+  --color-brand-900: #e3f0fa;
+  --color-brand-accent: #8cc6ef;
+
+  --color-ink-50: #172131;
+  --color-ink-100: #1f2a3b;
+  --color-ink-200: #2e3b4e;
+  --color-ink-300: #5b6a7e;
+  --color-ink-400: #8493a7;
+  --color-ink-500: #9fadbf;
+  --color-ink-600: #b9c5d3;
+  --color-ink-700: #d0d9e4;
+  --color-ink-800: #e4eaf1;
+  --color-ink-900: #f5f8fb;
+  --color-ink-950: #000000;
+
+  --radius-sm: 0.3rem;
+  --radius-md: 0.45rem;
+  --radius-lg: 0.65rem;
+  --radius-xl: 0.85rem;
+  --radius-2xl: 1.15rem;
+
+  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 20px rgb(0 0 0 / 0.25);
+  --shadow-lift: 0 12px 32px rgb(0 0 0 / 0.4);
+}
+
 @layer base {
   html,
   body {