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>
2026-09-17 18:02:06 +02:00
parent 77b61b4a04
commit 831429d559
11 changed files with 606 additions and 23 deletions
@@ -0,0 +1,65 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 900" width="260" height="900" preserveAspectRatio="xMidYMax slice">
+  <!--
+    Snow, Seitenleiste: verschneiter Waldrand, von unten hereinwachsend.
+
+    Das Motiv sitzt unten, oben liegt der Schleier ueber den Menuepunkten
+    (index.css). Die Schneeverwehung ganz unten ist bewusst flach und hell: dort
+    stehen Name und Rolle des Benutzers, und darueber haeuft sich zusaetzlich
+    der fallende Schnee an.
+  -->
+  <defs>
+    <linearGradient id="dunst" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#c9d8e8" stop-opacity="0" />
+      <stop offset="1" stop-color="#c9d8e8" stop-opacity="0.5" />
+    </linearGradient>
+    <filter id="weich" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="12" />
+    </filter>
+  </defs>
+
+  <rect y="540" width="260" height="360" fill="url(#dunst)" filter="url(#weich)" />
+
+  <!-- Tannen hinten: blass -->
+  <g fill="#8aa0b5" opacity="0.4">
+    <rect x="43.2" y="770.0" width="5.6" height="8.0" />
+    <rect x="180.9" y="760.0" width="6.2" height="8.8" />
+    <path d="M46 670.0 L57.8 715.0 L34.2 715.0 Z" />
+    <path d="M46 698.0 L65.6 742.0 L26.4 742.0 Z" />
+    <path d="M46 725.0 L74.0 770.0 L18.0 770.0 Z" />
+    <path d="M184 650.0 L197.0 699.5 L171.0 699.5 Z" />
+    <path d="M184 680.8 L205.7 729.2 L162.3 729.2 Z" />
+    <path d="M184 710.5 L215.0 760.0 L153.0 760.0 Z" />
+  </g>
+  <g fill="#ffffff" opacity="0.6">
+    <path d="M46 670.0 L51.3 690.2 Q46 684.9 40.7 690.2 Z" />
+    <path d="M46 698.0 L54.8 717.8 Q46 712.5 37.2 717.8 Z" />
+    <path d="M46 725.0 L58.6 745.2 Q46 739.9 33.4 745.2 Z" />
+    <path d="M184 650.0 L189.9 672.3 Q184 666.3 178.1 672.3 Z" />
+    <path d="M184 680.8 L193.8 702.6 Q184 696.8 174.2 702.6 Z" />
+    <path d="M184 710.5 L197.9 732.8 Q184 726.8 170.1 732.8 Z" />
+  </g>
+
+  <!-- Tannen vorn, mit Schneelast -->
+  <g fill="#4d6478" opacity="0.65">
+    <rect x="100.5" y="800.0" width="7.0" height="9.6" />
+    <rect x="223.3" y="808.0" width="5.4" height="7.2" />
+    <path d="M104 680.0 L118.7 734.0 L89.3 734.0 Z" />
+    <path d="M104 713.6 L128.5 766.4 L79.5 766.4 Z" />
+    <path d="M104 746.0 L139.0 800.0 L69.0 800.0 Z" />
+    <path d="M226 718.0 L237.3 758.5 L214.7 758.5 Z" />
+    <path d="M226 743.2 L244.9 782.8 L207.1 782.8 Z" />
+    <path d="M226 767.5 L253.0 808.0 L199.0 808.0 Z" />
+  </g>
+  <g fill="#ffffff" opacity="0.9">
+    <path d="M104 680.0 L110.6 704.3 Q104 697.8 97.4 704.3 Z" />
+    <path d="M104 713.6 L115.0 737.4 Q104 731.0 93.0 737.4 Z" />
+    <path d="M104 746.0 L119.8 770.3 Q104 763.8 88.2 770.3 Z" />
+    <path d="M226 718.0 L231.1 736.2 Q226 731.4 220.9 736.2 Z" />
+    <path d="M226 743.2 L234.5 761.0 Q226 756.3 217.5 761.0 Z" />
+    <path d="M226 767.5 L238.2 785.7 Q226 780.9 213.8 785.7 Z" />
+  </g>
+
+  <!-- Schneeverwehung -->
+  <path d="M0 800 C 50 784 110 796 160 788 C 200 782 236 792 260 786 L260 900 L0 900 Z" fill="#f2f7fc" opacity="0.8" />
+  <path d="M0 800 C 50 784 110 796 160 788 C 200 782 236 792 260 786" fill="none" stroke="#b9cadb" stroke-width="1.5" opacity="0.6" />
+</svg>