fix: input validation, null guard and code comments in app.js/style.css

js/app.js

@@ -1,7 +1,10 @@
 // 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.
 export const state = {
   color: { h: 200, s: 60, l: 50 },
   setColor(hsl) {
+    if (!hsl || typeof hsl.h !== 'number' || typeof hsl.s !== 'number' || typeof hsl.l !== 'number') return;
     this.color = hsl;
     document.dispatchEvent(new CustomEvent('colorChanged', { detail: hsl }));
   }
@@ -14,6 +17,7 @@ document.querySelectorAll('.tab-btn').forEach(btn => {
     document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
     document.querySelectorAll('.tab-content').forEach(s => s.classList.remove('active'));
     btn.classList.add('active');
-    document.getElementById('tab-' + tab).classList.add('active');
+    const section = document.getElementById('tab-' + tab);
+    if (section) section.classList.add('active');
   });
 });

style.css

@@ -40,6 +40,7 @@ main { padding: 1.5rem; max-width: 900px; margin: 0 auto; }
 .tab-content { display: none; }
 .tab-content.active { display: block; }
 
+/* --- Shared component classes (used across tabs) --- */
 .color-preview {
   width: 100%;
   height: 80px;