feat: Logo-Animation komplett einfärben via mix-blend-mode color

CSS-Overlay mit mix-blend-mode:color übernimmt Farbton der identifizierten
Farbe für die gesamte Animation. 0.8s Transition. Alle bisherige
SVG-Manipulation entfernt.

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

index.html

@@ -187,9 +187,8 @@
       path: 'Background Grey Wave.json'
     });
 
-    // Logo-Animation mit dynamischer Farbsteuerung via CSS-Override
+    // Logo-Animation
-    // (CSS fill-Property schlägt SVG fill-Attribute per Spec)
+    lottie.loadAnimation({
-    let _logoAnim = lottie.loadAnimation({
       container: document.getElementById('lottie-logo'),
       renderer: 'svg',
       loop: true,
@@ -197,9 +196,6 @@
       path: 'Fluid Loading Animation.json'
     });
 
-    let _logoStyleEl = null;
-    let _yellowMarked = false;
-
     function _hslToHex(h, s, l) {
       s /= 100; l /= 100;
       const a = s * Math.min(l, 1 - l);
@@ -211,37 +207,9 @@
       return '#' + f(0) + f(8) + f(4);
     }
 
-    function _markYellowElements() {
-      const svg = document.querySelector('#lottie-logo svg');
-      if (!svg) return false;
-      // Solid fills (kleine Partikel)
-      svg.querySelectorAll('[fill="rgb(255,223,0)"]').forEach(el => {
-        el.classList.add('logo-primary-fill');
-      });
-      // Gradient stops (mittlerer Blob)
-      svg.querySelectorAll('stop[stop-color="rgb(255,223,0)"]').forEach(el => {
-        el.classList.add('logo-primary-stop');
-      });
-      return svg.querySelector('.logo-primary-fill, .logo-primary-stop') !== null;
-    }
-
-    function setLogoColor(hex) {
-      if (!_yellowMarked) {
-        _yellowMarked = _markYellowElements();
-        if (!_yellowMarked) return;
-      }
-      if (!_logoStyleEl) {
-        _logoStyleEl = document.createElement('style');
-        document.head.appendChild(_logoStyleEl);
-      }
-      _logoStyleEl.textContent =
-        '#lottie-logo .logo-primary-fill { fill: ' + hex + '; }' +
-        '#lottie-logo .logo-primary-stop { stop-color: ' + hex + '; }';
-    }
-
     document.addEventListener('colorChanged', (e) => {
       const hex = _hslToHex(e.detail.h, e.detail.s, e.detail.l);
-      setLogoColor(hex);
+      document.getElementById('lottie-logo').style.setProperty('--logo-tint', hex);
     });
   </script>
 </body>

style.css

@@ -10,6 +10,22 @@ body {
   transition: background 0.8s ease;
 }
 
+#lottie-logo {
+  position: relative;
+  isolation: isolate;
+  --logo-tint: transparent;
+}
+
+#lottie-logo::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  mix-blend-mode: color;
+  background: var(--logo-tint);
+  transition: background 0.8s ease;
+}
+
 #lottie-bg {
   position: fixed;
   inset: 0;