feat(design): Pulse-Logo in der Seitenleiste, Wellen bewegen sich sichtbar

Oben links steht jetzt das Pulse-Logo statt des perinco-Logos; der
Schriftzug "Pulse" daneben ist damit doppelt und entfaellt. Das Logo ist
freigestellt (grauer Grund und Bildrauschen entfernt, auf 140 px Hoehe
zugeschnitten) und wird im Dunkelmodus nicht umgefaerbt - die Wuerfel
sind gruen und sollen gruen bleiben.

Die schaukelnden Huegel im hellen Aura lagen als Hintergrundbild und
wurden ueber background-position bewegt; bei diesen breiten Formen war
das nicht zu sehen. Sie liegen nun in einer eigenen Ebene und wandern
per transform 26 px hin und her, dazu 5 px auf und ab.

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

.gitignore

@@ -7,3 +7,10 @@ server/node_modules/
 .DS_Store
 # Aufgabenstellung enthaelt Server-Passwoerter im Klartext
 Anforderungen.txt
+
+# Rohvorlagen der Logos im Projektstamm. Nur die freigestellte Fassung in
+# public/pulse-logo.png wird gebraucht. Fuehrender Schraegstrich, sonst greift
+# das Muster unter Windows auch auf public/pulse-logo.png (Gross-/Kleinschreibung).
+/Logo*.png
+/Logo*.jpg
+/Pulse-Logo.png

src/components/layout/Sidebar.tsx

@@ -62,13 +62,12 @@ export const Sidebar: React.FC<SidebarProps> = ({ current, onNavigate, collapsed
         {collapsed ? (
           <PulseMark size={34} />
         ) : (
-          <div className="flex w-full items-center justify-between gap-2">
+          /*
-            <img src="/logo.png" alt="perinco" className="logo-adaptive h-9 w-auto" />
+           * Das Pulse-Logo traegt den Namen selbst, deshalb steht daneben kein
-            <span className="flex items-center gap-1.5 rounded-full bg-brand-50 px-2.5 py-1 text-xs font-extrabold tracking-wide text-brand-700">
+           * Schriftzug mehr. Kein logo-adaptive: die Wuerfel sind gruen und
-              <PulseMark size={14} bare />
+           * sollen im Dunkelmodus nicht umgefaerbt werden.
-              Pulse
+           */
-            </span>
+          <img src="/pulse-logo.png" alt="Pulse" className="h-10 w-auto max-w-full object-contain" />
-          </div>
         )}
       </button>
 

src/index.css

@@ -885,14 +885,19 @@ html.theme-aura:not(.dark) {
   --aura-header-position: right -45px top -55px, center, center, center;
   --aura-header-size: 130px 130px, cover, cover, cover;
   --aura-cloud-opacity: 1;
+  /*
+   * Hell ohne Grafik-Ebene: die Huegel liegen in .app-sidebar::after und
+   * schaukeln dort (siehe @keyframes aura-hills). Als Hintergrundbild liesse
+   * sich das nur ueber background-position bewegen - das ruckelt und ist bei
+   * den breiten Huegeln kaum zu sehen.
+   */
   --theme-sidebar-image: linear-gradient(
-      180deg,
+    180deg,
-      rgb(255 253 247 / 0.97) 0%,
+    rgb(255 253 247 / 0.97) 0%,
-      rgb(255 253 247 / 0.88) 45%,
+    rgb(255 253 247 / 0.88) 45%,
-      rgb(255 253 247 / 0.35) 78%,
+    rgb(255 253 247 / 0.35) 78%,
-      rgb(255 253 247 / 0.5) 100%
+    rgb(255 253 247 / 0.5) 100%
-    ),
+  );
-    url('/themes/aura-sidebar.svg');
 
   --color-canvas: #fbf6ea;
   --color-surface: #fffdf7;
@@ -1105,15 +1110,35 @@ html.theme-aura.dark {
   }
 
   /*
-   * Aura, hell: die Huegel in der Seitenleiste schaukeln langsam hin und her.
+   * Aura, hell: die Huegel am Fuss der Seitenleiste schaukeln.
    *
-   * Bewegt wird nur die Grafik-Ebene (zweiter Wert), der Schleier darueber
+   * Sie liegen in einer eigenen Ebene und werden per transform bewegt - das
-   * bleibt stehen. Die Grafik ist an der Unterkante verankert und breiter
+   * laeuft auf der Grafikkarte und ist sichtbar, waehrend ein verschobenes
-   * zugeschnitten (preserveAspectRatio slice), deshalb entsteht am Rand keine
+   * Hintergrundbild bei diesen breiten Formen kaum auffiel.
-   * Luecke. 26 Sekunden pro Runde: als Bewegung kaum bemerkbar, aber lebendig.
+   *
+   * `z-index: -1` plus `isolation: isolate` haelt sie hinter Namen und
+   * Abmelden-Knopf, aber ueber der Flaeche. Die Ebene ist links und rechts
+   * 48 px breiter als die Leiste; weil die Leiste `overflow-hidden` traegt,
+   * bleibt der Ausschlag unsichtbar und es entsteht keine Luecke am Rand.
    */
   html.theme-aura:not(.dark) .app-sidebar {
-    animation: aura-hills 26s ease-in-out infinite;
+    position: relative;
+    isolation: isolate;
+  }
+
+  html.theme-aura:not(.dark) .app-sidebar::after {
+    content: '';
+    position: absolute;
+    right: -48px;
+    bottom: -12px;
+    left: -48px;
+    height: 58%;
+    z-index: -1;
+    pointer-events: none;
+    background: url('/themes/aura-sidebar.svg') no-repeat bottom center / cover;
+    /* Entspricht dem Schleier, der vorher darueber lag. */
+    opacity: 0.5;
+    animation: aura-hills 18s ease-in-out infinite;
   }
 
   /*
@@ -1344,21 +1369,19 @@ html.theme-aura.dark {
   }
 }
 
+/*
+ * Schaukelnde Huegel: 26 px nach rechts, dabei 5 px auf und ab. Weit genug,
+ * dass man es sieht, langsam genug (18 s), dass es beim Arbeiten nicht stoert.
+ */
 @keyframes aura-hills {
   0% {
-    background-position:
+    transform: translate3d(-26px, 5px, 0);
-      center top,
-      calc(50% - 9px) bottom;
   }
   50% {
-    background-position:
+    transform: translate3d(26px, -4px, 0);
-      center top,
-      calc(50% + 9px) calc(100% + 4px);
   }
   100% {
-    background-position:
+    transform: translate3d(-26px, 5px, 0);
-      center top,
-      calc(50% - 9px) bottom;
   }
 }
 
@@ -1373,7 +1396,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:not(.dark) .app-sidebar::after {
     animation: none;
   }
 }