diff --git a/index.html b/index.html
index 39e84cf..c55a426 100644
--- a/index.html
+++ b/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>
diff --git a/style.css b/style.css
index 42ecdc5..b024563 100644
--- a/style.css
+++ b/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 {