fix: prevent double updateUI, move imports to top, label for attributes

index.html

@@ -26,15 +26,15 @@
   <div id="eingabe-preview" class="color-preview" style="background:#3a8fc1"></div>
   <div class="color-codes">
     <div class="color-code-group">
-      <label>Hex</label>
+      <label for="eingabe-hex">Hex</label>
       <input id="eingabe-hex" type="text" value="#3a8fc1" maxlength="7">
     </div>
     <div class="color-code-group">
-      <label>RGB</label>
+      <label for="eingabe-rgb">RGB</label>
       <input id="eingabe-rgb" type="text" value="58, 143, 193">
     </div>
     <div class="color-code-group">
-      <label>HSL</label>
+      <label for="eingabe-hsl">HSL</label>
       <input id="eingabe-hsl" type="text" value="204, 54%, 49%">
     </div>
   </div>

js/app.js

@@ -1,3 +1,5 @@
+import { initEingabe } from './eingabe.js';
+
 // Globaler State — aktive Farbe als { h, s, l } (HSL, 0-360, 0-100, 0-100)
 // state.color is read-only from outside — always use setColor() to update,
 // so that the colorChanged event is dispatched to all listening modules.
@@ -22,8 +24,6 @@ document.querySelectorAll('.tab-btn').forEach(btn => {
   });
 });
 
-import { initEingabe } from './eingabe.js';
-
 function addFavorit(hsl) { console.log('addFavorit', hsl); }
 function addColorToSchema(hsl) { console.log('addColorToSchema', hsl); }
 

js/eingabe.js

@@ -1,4 +1,4 @@
-import { hexToRgb, rgbToHex, hexToHsl, hslToHex, hslToRgb, rgbToHsl } from './converter.js';
+import { hexToHsl, hslToHex, hslToRgb, rgbToHsl } from './converter.js';
 import { state } from './app.js';
 
 function hslToDisplay({ h, s, l }) { return h + ', ' + s + '%, ' + l + '%'; }
@@ -39,7 +39,6 @@ export function initEingabe(onSaveFavorit, onSaveSchema) {
     if (/^#[0-9a-fA-F]{6}$/.test(val)) {
       const hsl = hexToHsl(val);
       state.setColor(hsl);
-      updateUI(hsl);
     }
   });
 
@@ -48,7 +47,6 @@ export function initEingabe(onSaveFavorit, onSaveSchema) {
     if (rgb) {
       const hsl = rgbToHsl(rgb);
       state.setColor(hsl);
-      updateUI(hsl);
     }
   });
 
@@ -56,11 +54,16 @@ export function initEingabe(onSaveFavorit, onSaveSchema) {
     const hsl = parseHsl(hslInput.value);
     if (hsl) {
       state.setColor(hsl);
-      updateUI(hsl);
     }
   });
 
-  document.addEventListener('colorChanged', () => updateUI(state.color));
+  document.addEventListener('colorChanged', () => {
+    if (document.activeElement !== hexInput &&
+        document.activeElement !== rgbInput &&
+        document.activeElement !== hslInput) {
+      updateUI(state.color);
+    }
+  });
 
   document.getElementById('eingabe-fav-btn').addEventListener('click', () => {
     onSaveFavorit(state.color);