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>

docs/05-frontend.md

@@ -271,7 +271,7 @@ ist `theme-aura`, der Unterschied kommt wie immer aus `.dark`.
 | --- | --- |
 | **Leiste** | Vier Hintergrundebenen statt zwei: Sonne bzw. Mond (`aura-sun.svg`, `aura-moon.svg`, 130 px in der Ecke oben rechts, halb angeschnitten), Schleier, Sterne (`aura-stars.svg`, nur nachts) und ein Himmelsverlauf. Weil jede Ebene eigene Lage und Größe braucht, stehen die in `--aura-header-position` und `--aura-header-size` |
 | **Ziehende Wolken** | Reines CSS: `.app-header::before` mit zwei nahtlosen 800-px-Kacheln (`aura-clouds-near.svg`, `aura-clouds-far.svg`). `@keyframes aura-clouds` schiebt sie in 150 s um genau 1600 bzw. 800 px - Neustart ohne Ruck, vordere Lage doppelt so schnell. Nachts auf `--aura-cloud-opacity` 0,28 abgedunkelt |
-| **Schaukelnde Hügel** | Reines CSS, nur hell: `@keyframes aura-hills` schiebt in der Seitenleiste allein die Grafik-Ebene (`aura-sidebar.svg`) 26 s lang um ±9 px waagerecht und 4 px senkrecht. Der Schleier davor bleibt stehen, sonst würde die Schrift wandern. Die Grafik ist unten verankert und wird beschnitten (`preserveAspectRatio="xMidYMax slice"`), deshalb reißt am Rand keine Lücke auf |
+| **Rollende Wellen** | Reines CSS, beide Modi: drei Wellenkacheln (`aura-wave-back/mid/front.svg`) liegen in der Seitenleiste unter dem Schleier und über dem Dunst. Jede ist genau **eine Sinusperiode** breit, passt deshalb waagerecht nahtlos an sich selbst und wiederholt sich (`repeat-x`). `@keyframes aura-waves` schiebt jede in 40 s um genau ihre eigene Kachelbreite (260, 320, 400 px) - am Rundenende ist das Bild deckungsgleich, also kein Ruck, und weil die Kacheln verschieden breit sind, läuft die vorderste am schnellsten. Schleier und Dunst stehen still, sonst wanderte die Helligkeit unter den Menüpunkten |
 | **Sonnenstrahlen** | `src/components/AuraWeather.tsx`, nur hell. Alle 16–24 s zwei oder drei `.aura-ray`-Elemente: vom Sonnenmittelpunkt in Richtung Ecke unten links, leicht aufgefächert, per `clip-path` zur Sonne hin verjüngt und weichgezeichnet. Web Animations API: 4 s anschwellen, leicht schwenken, verblassen, danach entfernt |
 
 Zwei Stolperstellen:

docs/07-anleitung-benutzer.md

@@ -112,6 +112,8 @@ die Scanner-Einstellungen. Alles andere ist für beide Rollen gleich.
     rechts. Im hellen Modus („Sunshine“) fallen etwa alle 20 Sekunden zwei bis
     drei Sonnenstrahlen von der Sonne oben rechts quer über den Bildschirm nach
     unten links; im dunklen Modus („Mond“) steht dort der Mond, ohne Strahlen.
+    Unten in der Seitenleiste rollen drei Wellen in Pastell langsam durch -
+    die vorderste am schnellsten, in beiden Modi.
 
   Wer im Betriebssystem **„Bewegung reduzieren"** eingeschaltet hat, sieht bei
   allen nur Farben und Grafiken - ohne Regen, Blitz, Schnee, Wolkenzug und Sonnenstrahlen.

public/themes/aura-sidebar.svg

@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 900" width="260" height="900" preserveAspectRatio="xMidYMax slice">
   <!--
-    Aura, Seitenleiste: sanfte Huegel in Pastell, von unten hereinwachsend.
+    Aura, Seitenleiste: nur der warme Dunst ueber dem unteren Rand. Die Wellen
-    Eine Datei fuer beide Modi - der Schleier des Mond-Modus toent sie zur
+    darueber liegen in eigenen Dateien (aura-wave-*.svg), weil sie sich
-    Nacht ab (index.css).
+    bewegen und dafuer einzeln verschoben werden muessen.
   -->
   <defs>
     <linearGradient id="dunst" x1="0" y1="0" x2="0" y2="1">
@@ -14,7 +14,4 @@
     </filter>
   </defs>
   <rect y="520" width="260" height="380" fill="url(#dunst)" filter="url(#weich)" />
-  <path d="M0 730 C 60 690 120 700 170 720 C 210 736 240 716 260 706 L260 900 L0 900 Z" fill="#c7b8e8" opacity="0.5" />
-  <path d="M0 780 C 50 760 110 772 160 764 C 200 758 236 770 260 762 L260 900 L0 900 Z" fill="#f2b98a" opacity="0.55" />
-  <path d="M0 830 C 70 812 130 826 190 818 C 220 814 244 820 260 816 L260 900 L0 900 Z" fill="#9fcfa8" opacity="0.55" />
 </svg>

public/themes/aura-wave-back.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 235" width="400" height="235" preserveAspectRatio="none">
+  <!--
+    Aura, Seitenleiste: eine Wellenlage. Genau eine Sinusperiode ueber die
+    Breite der Kachel - deshalb passt sie waagerecht nahtlos an sich selbst,
+    und index.css kann sie endlos durchschieben, ohne dass es ruckt.
+
+    Drei solche Kacheln liegen uebereinander (aura-wave-back.svg ist eine davon); jede ist
+    anders breit und wandert deshalb bei gleicher Dauer unterschiedlich
+    schnell - das gibt Tiefe.
+  -->
+  <path d="M0 40.0 L10 41.4 L20 42.8 L30 44.1 L40 45.3 L50 46.4 L60 47.3 L70 48.0 L80 48.6 L90 48.9 L100 49.0 L110 48.9 L120 48.6 L130 48.0 L140 47.3 L150 46.4 L160 45.3 L170 44.1 L180 42.8 L190 41.4 L200 40.0 L210 38.6 L220 37.2 L230 35.9 L240 34.7 L250 33.6 L260 32.7 L270 32.0 L280 31.4 L290 31.1 L300 31.0 L310 31.1 L320 31.4 L330 32.0 L340 32.7 L350 33.6 L360 34.7 L370 35.9 L380 37.2 L390 38.6 L400 40.0 L400 235 L0 235 Z" fill="#c7b8e8" opacity="0.55" />
+</svg>

public/themes/aura-wave-front.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 165" width="260" height="165" preserveAspectRatio="none">
+  <!--
+    Aura, Seitenleiste: eine Wellenlage. Genau eine Sinusperiode ueber die
+    Breite der Kachel - deshalb passt sie waagerecht nahtlos an sich selbst,
+    und index.css kann sie endlos durchschieben, ohne dass es ruckt.
+
+    Drei solche Kacheln liegen uebereinander (aura-wave-front.svg ist eine davon); jede ist
+    anders breit und wandert deshalb bei gleicher Dauer unterschiedlich
+    schnell - das gibt Tiefe.
+  -->
+  <path d="M0 55.7 L10 53.3 L20 50.6 L30 47.5 L40 44.4 L50 41.3 L60 38.6 L70 36.2 L80 34.5 L90 33.4 L100 33.0 L110 33.4 L120 34.5 L130 36.3 L140 38.7 L150 41.4 L160 44.5 L170 47.6 L180 50.7 L190 53.4 L200 55.8 L210 57.5 L220 58.6 L230 59.0 L240 58.6 L250 57.5 L260 55.7 L260 165 L0 165 Z" fill="#9fcfa8" opacity="0.6" />
+</svg>

public/themes/aura-wave-mid.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 200" width="320" height="200" preserveAspectRatio="none">
+  <!--
+    Aura, Seitenleiste: eine Wellenlage. Genau eine Sinusperiode ueber die
+    Breite der Kachel - deshalb passt sie waagerecht nahtlos an sich selbst,
+    und index.css kann sie endlos durchschieben, ohne dass es ruckt.
+
+    Drei solche Kacheln liegen uebereinander (aura-wave-mid.svg ist eine davon); jede ist
+    anders breit und wandert deshalb bei gleicher Dauer unterschiedlich
+    schnell - das gibt Tiefe.
+  -->
+  <path d="M0 55.8 L10 56.6 L20 57.0 L30 56.9 L40 56.5 L50 55.6 L60 54.4 L70 52.8 L80 51.0 L90 49.0 L100 46.9 L110 44.7 L120 42.6 L130 40.6 L140 38.9 L150 37.4 L160 36.2 L170 35.4 L180 35.0 L190 35.1 L200 35.5 L210 36.4 L220 37.6 L230 39.2 L240 41.0 L250 43.0 L260 45.1 L270 47.3 L280 49.4 L290 51.4 L300 53.1 L310 54.6 L320 55.8 L320 200 L0 200 Z" fill="#f2b98a" opacity="0.5" />
+</svg>

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
+   * Drei Wellenkacheln (aura-wave-*.svg) liegen unter dem Schleier und ueber
-   * bleibt stehen. Die Grafik ist an der Unterkante verankert und wird
+   * dem Dunst. Jede ist genau eine Sinusperiode breit und wiederholt sich
-   * beschnitten (preserveAspectRatio slice), deshalb entsteht am Rand keine
+   * waagerecht; @keyframes aura-waves schiebt jede um genau ihre eigene
-   * Luecke. 26 Sekunden pro Runde: als Bewegung kaum zu bemerken, aber die
+   * Kachelbreite weiter, deshalb sieht das Bild am Ende der Runde aus wie am
-   * Leiste wirkt nicht mehr wie ein Standbild.
+   * 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 {
+  html.theme-aura .app-sidebar {
-    animation: aura-hills 26s ease-in-out infinite;
+    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
+ * Rollende Wellen in der Seitenleiste (Theme Aura). Reihenfolge der Werte wie
- * der Schleier und bleibt stehen, der zweite die Grafik: 9 px nach rechts,
+ * im Bild: Schleier, Welle vorn, Welle Mitte, Welle hinten, Dunst. Jede Welle
- * dabei 4 px tiefer, und zurueck.
+ * wandert um genau ihre Kachelbreite - 260, 320 und 400 px - und ist damit
+ * nach einer Runde wieder deckungsgleich.
  */
-@keyframes aura-hills {
+@keyframes aura-waves {
-  0% {
+  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);
+      260px bottom,
-  }
+      320px bottom,
-  100% {
+      400px bottom,
-    background-position:
+      center bottom;
-      center top,
-      calc(50% - 9px) bottom;
   }
 }