fix: Logo-Einfärbung via CSS filter statt mix-blend-mode overlay

filter(grayscale+sepia+hue-rotate+saturate+brightness) töntet nur
die gerenderten SVG-Pixel, transparente Bereiche bleiben unberührt.
0.8s transition auf filter-Property.

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

index.html

@@ -208,8 +208,13 @@
     }
 
     document.addEventListener('colorChanged', (e) => {
-      const hex = _hslToHex(e.detail.h, e.detail.s, e.detail.l);
-      document.getElementById('lottie-logo').style.setProperty('--logo-tint', hex);
+      const { h, s, l } = e.detail;
+      // grayscale → sepia (Basis ~38°) → Zielfarbe drehen → Sättigung + Helligkeit
+      const rot = h - 38;
+      const sat = s < 5 ? 0 : 3;
+      const bri = Math.max(0.5, l / 50);
+      document.getElementById('lottie-logo').style.filter =
+        `grayscale(1) sepia(1) hue-rotate(${rot}deg) saturate(${sat}) brightness(${bri})`;
     });
   </script>
 </body>

style.css

@@ -11,19 +11,7 @@ body {
 }
 
 #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;
+  transition: filter 0.8s ease;
 }
 
 #lottie-bg {