feat(design): Wellen in der Seitenleiste von Aura rollen

Die festen Huegel weichen drei Wellenkacheln (aura-wave-back/mid/front).
Jede ist genau eine Sinusperiode breit, wiederholt sich waagerecht und
wandert in 40 s um ihre eigene Kachelbreite - nahtlos und in beiden
Modi. Unterschiedliche Kachelbreiten ergeben unterschiedliche
Geschwindigkeiten. Loest aura-hills ab; bei prefers-reduced-motion
stehen die Wellen still.

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

src/index.css

@@ -902,6 +902,9 @@ html.theme-aura:not(.dark) {
       rgb(255 253 247 / 0.35) 78%,
       rgb(255 253 247 / 0.5) 100%
     ),
+    url('/themes/aura-wave-front.svg'),
+    url('/themes/aura-wave-mid.svg'),
+    url('/themes/aura-wave-back.svg'),
     url('/themes/aura-sidebar.svg');
 
   --color-canvas: #fbf6ea;
@@ -967,6 +970,9 @@ html.theme-aura.dark {
       rgb(19 22 42 / 0.6) 78%,
       rgb(19 22 42 / 0.7) 100%
     ),
+    url('/themes/aura-wave-front.svg'),
+    url('/themes/aura-wave-mid.svg'),
+    url('/themes/aura-wave-back.svg'),
     url('/themes/aura-sidebar.svg');
 
   --color-canvas: #0c0e1c;
@@ -1114,16 +1120,29 @@ html.theme-aura.dark {
   }
 
   /*
-   * Aura, hell: die Huegel in der Seitenleiste schaukeln langsam hin und her.
+   * Rollende Wellen in der Seitenleiste (Theme Aura, beide Modi).
    *
-   * Bewegt wird nur die Grafik-Ebene (zweiter Wert), der Schleier darueber
-   * bleibt stehen. Die Grafik ist an der Unterkante verankert und wird
-   * beschnitten (preserveAspectRatio slice), deshalb entsteht am Rand keine
-   * Luecke. 26 Sekunden pro Runde: als Bewegung kaum zu bemerken, aber die
-   * Leiste wirkt nicht mehr wie ein Standbild.
+   * Drei Wellenkacheln (aura-wave-*.svg) liegen unter dem Schleier und ueber
+   * dem Dunst. Jede ist genau eine Sinusperiode breit und wiederholt sich
+   * waagerecht; @keyframes aura-waves schiebt jede um genau ihre eigene
+   * Kachelbreite weiter, deshalb sieht das Bild am Ende der Runde aus wie am
+   * Anfang und es ruckt nicht. Weil die Kacheln unterschiedlich breit sind,
+   * laufen sie bei gleicher Dauer unterschiedlich schnell - vorne schneller
+   * als hinten, das gibt Tiefe.
+   *
+   * Es bewegen sich nur die Wellen: der Schleier (erste Ebene) und der Dunst
+   * (letzte) stehen still, sonst wanderte die Helligkeit unter den
+   * Menuepunkten.
    */
-  html.theme-aura:not(.dark) .app-sidebar {
-    animation: aura-hills 26s ease-in-out infinite;
+  html.theme-aura .app-sidebar {
+    background-repeat: no-repeat, repeat-x, repeat-x, repeat-x, no-repeat;
+    background-size:
+      cover,
+      260px 165px,
+      320px 200px,
+      400px 235px,
+      cover;
+    animation: aura-waves 40s linear infinite;
   }
 
   /* Sonnenstrahl (components/AuraWeather.tsx): verjuengt zur Sonne hin. */
@@ -1144,7 +1163,7 @@ html.theme-aura.dark {
 
   @media (prefers-reduced-motion: reduce) {
     html.theme-aura .app-header::before,
-    html.theme-aura:not(.dark) .app-sidebar {
+    html.theme-aura .app-sidebar {
       animation: none;
     }
   }
@@ -1269,24 +1288,26 @@ html.theme-aura.dark {
 }
 
 /*
- * Schaukelnde Huegel in der Seitenleiste (Theme Aura, hell). Der erste Wert ist
- * der Schleier und bleibt stehen, der zweite die Grafik: 9 px nach rechts,
- * dabei 4 px tiefer, und zurueck.
+ * Rollende Wellen in der Seitenleiste (Theme Aura). Reihenfolge der Werte wie
+ * im Bild: Schleier, Welle vorn, Welle Mitte, Welle hinten, Dunst. Jede Welle
+ * wandert um genau ihre Kachelbreite - 260, 320 und 400 px - und ist damit
+ * nach einer Runde wieder deckungsgleich.
  */
-@keyframes aura-hills {
-  0% {
+@keyframes aura-waves {
+  from {
     background-position:
       center top,
-      calc(50% - 9px) bottom;
+      0 bottom,
+      0 bottom,
+      0 bottom,
+      center bottom;
   }
-  50% {
+  to {
     background-position:
       center top,
-      calc(50% + 9px) calc(100% + 4px);
-  }
-  100% {
-    background-position:
-      center top,
-      calc(50% - 9px) bottom;
+      260px bottom,
+      320px bottom,
+      400px bottom,
+      center bottom;
   }
 }