From f5a976b3a4fc554d713a7cea166238ae9b840d11 Mon Sep 17 00:00:00 2001
From: Ferdinand <ferdinand@pigmento.local>
Date: Fri, 3 Apr 2026 13:55:11 +0200
Subject: [PATCH] feat: Lottie-Animation neben Pigmento-Titel im Header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fluid Loading Animation.json via lottie-web (CDN) als 36x36px SVG
animiert neben dem h1-Titel. Loop, autoplay, kein Build-Schritt nötig.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html | 15 ++++++++++++++-
 style.css  |  2 +-
 2 files changed, 15 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index ad63615..4c62f98 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,10 @@
 </head>
 <body>
   <header>
-    <h1>Pigmento</h1>
+    <div style="display:flex;align-items:center;gap:0.4rem;margin-bottom:0.75rem">
+      <div id="lottie-logo" style="width:36px;height:36px;flex-shrink:0"></div>
+      <h1 style="margin-bottom:0">Pigmento</h1>
+    </div>
     <nav>
       <button class="tab-btn active" data-tab="picker">Picker</button>
       <button class="tab-btn" data-tab="eingabe">Eingabe</button>
@@ -161,6 +164,16 @@
     </div>
   </div>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
   <script type="module" src="js/app.js"></script>
+  <script>
+    lottie.loadAnimation({
+      container: document.getElementById('lottie-logo'),
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      path: 'Fluid Loading Animation.json'
+    });
+  </script>
 </body>
 </html>
diff --git a/style.css b/style.css
index e2f3354..f081a85 100644
--- a/style.css
+++ b/style.css
@@ -16,7 +16,7 @@ header {
   z-index: 10;
 }
 
-header h1 { font-size: 1.2rem; margin-bottom: 0.75rem; }
+header h1 { font-size: 1.2rem; margin-bottom: 0; }
 
 nav { display: flex; gap: 0.5rem; }
 
