feat: Grundstruktur mit Tab-Navigation

js/app.js

@@ -0,0 +1,19 @@
+// Globaler State — aktive Farbe als { h, s, l } (HSL, 0-360, 0-100, 0-100)
+export const state = {
+  color: { h: 200, s: 60, l: 50 },
+  setColor(hsl) {
+    this.color = hsl;
+    document.dispatchEvent(new CustomEvent('colorChanged', { detail: hsl }));
+  }
+};
+
+// Tab-Navigation
+document.querySelectorAll('.tab-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const tab = btn.dataset.tab;
+    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');
+  });
+});