feat: Logo-Animation übernimmt exakte identifizierte Farbe

JSON wird per fetch geladen, Fill-Objekte von 'Small 4' (Gelb) werden
direkt mutiert und Animation ab aktuellem Frame neu geladen.
Kein hue-rotate mehr – eine Farbe ist exakt die gewählte Farbe.

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

index.html

@@ -178,13 +178,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
   <script type="module" src="js/app.js"></script>
   <script>
-    lottie.loadAnimation({
-      container: document.getElementById('lottie-logo'),
-      renderer: 'svg',
-      loop: true,
-      autoplay: true,
-      path: 'Fluid Loading Animation.json'
-    });
+    // Hintergrund-Animation
     lottie.loadAnimation({
       container: document.getElementById('lottie-bg'),
       renderer: 'svg',
@@ -192,6 +186,59 @@
       autoplay: true,
       path: 'Background Grey Wave.json'
     });
+
+    // Logo-Animation mit dynamischer Farbsteuerung
+    let _logoAnim = null;
+    let _lottieData = null;
+    let _yellowFills = null;
+
+    function _hslToHex(h, s, l) {
+      s /= 100; l /= 100;
+      const a = s * Math.min(l, 1 - l);
+      const f = n => {
+        const k = (n + h / 30) % 12;
+        return Math.round(255 * (l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)))
+          .toString(16).padStart(2, '0');
+      };
+      return '#' + f(0) + f(8) + f(4);
+    }
+
+    function _loadLogoAnim(data) {
+      const frame = _logoAnim ? Math.floor(_logoAnim.currentFrame) : 0;
+      if (_logoAnim) { _logoAnim.destroy(); _logoAnim = null; }
+      _logoAnim = lottie.loadAnimation({
+        container: document.getElementById('lottie-logo'),
+        renderer: 'svg',
+        loop: true,
+        autoplay: true,
+        animationData: data
+      });
+      _logoAnim.goToAndPlay(frame, true);
+    }
+
+    function setLogoColor(hex) {
+      if (!_lottieData || !_yellowFills) return;
+      const r = parseInt(hex.slice(1, 3), 16) / 255;
+      const g = parseInt(hex.slice(3, 5), 16) / 255;
+      const b = parseInt(hex.slice(5, 7), 16) / 255;
+      _yellowFills.forEach(fill => { fill.c.k = [r, g, b, 1]; });
+      _loadLogoAnim(_lottieData);
+    }
+
+    fetch('Fluid Loading Animation.json')
+      .then(r => r.json())
+      .then(data => {
+        _lottieData = data;
+        const comp1 = data.assets.find(a => a.id === 'comp_1');
+        const small4 = comp1.layers.find(l => l.nm === 'Small 4');
+        _yellowFills = small4.shapes[0].it.filter(i => i.ty === 'fl');
+        _loadLogoAnim(data);
+      });
+
+    document.addEventListener('colorChanged', (e) => {
+      const hex = _hslToHex(e.detail.h, e.detail.s, e.detail.l);
+      setLogoColor(hex);
+    });
   </script>
 </body>
 </html>

js/app.js

@@ -49,8 +49,6 @@ 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,8 +10,6 @@ body {
   transition: background 0.8s ease;
 }
 
-#lottie-logo { transition: filter 0.8s ease; }
-
 #lottie-bg {
   position: fixed;
   inset: 0;