From d1c61cb803fde7abadd4dce4017ff4cced8935f8 Mon Sep 17 00:00:00 2001
From: Ferdinand <ferdinand@pigmento.local>
Date: Fri, 3 Apr 2026 17:44:36 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20Logo-Einf=C3=A4rbung=20via=20CSS=20filte?=
 =?UTF-8?q?r=20statt=20mix-blend-mode=20overlay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  9 +++++++--
 style.css  | 14 +-------------
 2 files changed, 8 insertions(+), 15 deletions(-)

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 {