From 446870a94c204561292866990ffa3893900e7338 Mon Sep 17 00:00:00 2001
From: Ferdinand <ferdinand@pigmento.local>
Date: Fri, 3 Apr 2026 17:29:52 +0200
Subject: [PATCH] fix: Logo-Farbe via CSS-Override statt animationData-Reload
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

lottie cached Daten intern - Mutation+Reload funktioniert nicht.
Neuer Ansatz: gelbe fill-Elemente einmalig mit Klasse markieren,
CSS fill-Property (schlägt SVG-Attribute per Spec) per style-Element
aktualisieren. Kein Reload, kein Flicker.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html | 57 ++++++++++++++++++++++++++----------------------------
 1 file changed, 27 insertions(+), 30 deletions(-)

diff --git a/index.html b/index.html
index 2a538c9..cdb2316 100644
--- a/index.html
+++ b/index.html
@@ -187,10 +187,18 @@
       path: 'Background Grey Wave.json'
     });
 
-    // Logo-Animation mit dynamischer Farbsteuerung
-    let _logoAnim = null;
-    let _lottieData = null;
-    let _yellowFills = null;
+    // Logo-Animation mit dynamischer Farbsteuerung via CSS-Override
+    // (CSS fill-Property schlägt SVG fill-Attribute per Spec)
+    let _logoAnim = lottie.loadAnimation({
+      container: document.getElementById('lottie-logo'),
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      path: 'Fluid Loading Animation.json'
+    });
+
+    let _logoStyleEl = null;
+    let _yellowMarked = false;
 
     function _hslToHex(h, s, l) {
       s /= 100; l /= 100;
@@ -203,38 +211,27 @@
       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
+    function _markYellowElements() {
+      const svg = document.querySelector('#lottie-logo svg');
+      if (!svg) return false;
+      svg.querySelectorAll('[fill="rgb(255,223,0)"]').forEach(el => {
+        el.classList.add('logo-primary-fill');
       });
-      _logoAnim.goToAndPlay(frame, true);
+      return svg.querySelector('.logo-primary-fill') !== null;
     }
 
     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);
+      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 + '; }';
     }
 
-    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);