feat: Logo-Animation synchronisiert Farben mit aktueller Farbe

hue-rotate verschiebt die Palette (Gelb/Pink/Lila) synchron zum
Farbton der identifizierten Farbe. Sanfter 0.8s Übergang.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

js/app.js

@@ -44,11 +44,13 @@ document.querySelectorAll('.tab-btn').forEach(btn => {
 // Every color change goes into history
 document.addEventListener('colorChanged', (e) => addToHistory(e.detail));
 
-// Hintergrundfarbe als extrem helles Pastell der aktuellen Farbe
+// Hintergrundfarbe als extrem helles Pastell + Logo-Animation synchron einfärben
 document.addEventListener('colorChanged', (e) => {
   const { h, s } = e.detail;
   const pastelS = Math.round(Math.min(s * 0.5, 45));
   document.body.style.background = `hsl(${h}, ${pastelS}%, 92%)`;
+  const logo = document.getElementById('lottie-logo');
+  if (logo) logo.style.filter = `hue-rotate(${h - 52}deg)`;
 });
 
 initEingabe(addFavorit, addColorToSchema);

style.css

@@ -10,6 +10,8 @@ body {
   transition: background 0.8s ease;
 }
 
+#lottie-logo { transition: filter 0.8s ease; }
+
 #lottie-bg {
   position: fixed;
   inset: 0;