style: finales CSS-Finishing, inline styles zu CSS-Klassen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

index.html

@@ -42,7 +42,7 @@
             <input id="picker-hsl" type="text" readonly>
           </div>
         </div>
-        <div style="display:flex;gap:0.5rem">
+        <div class="btn-row">
           <button class="action-btn" id="picker-fav-btn">Zu Favoriten</button>
           <button class="action-btn" id="picker-schema-btn">Zu Schema hinzufügen</button>
         </div>
@@ -65,7 +65,7 @@
       <input id="eingabe-hsl" type="text" value="204, 54%, 49%">
     </div>
   </div>
-  <div style="display:flex;gap:0.5rem">
+  <div class="btn-row">
     <button class="action-btn" id="eingabe-fav-btn">Zu Favoriten</button>
     <button class="action-btn" id="eingabe-schema-btn">Zu Schema hinzufügen</button>
   </div>
@@ -79,7 +79,7 @@
     <section id="tab-sammlung" class="tab-content">
   <h2>Sammlung</h2>
 
-  <div style="display:flex;gap:0.5rem;margin-bottom:1.5rem">
+  <div class="btn-row" style="margin-bottom:1.5rem">
     <button class="action-btn" id="sammlung-export-btn">Exportieren</button>
     <button class="action-btn" id="sammlung-import-btn">Importieren</button>
   </div>

js/collection.js

@@ -135,7 +135,7 @@ function makeSwatch(hsl) {
   const hex = hslToHex(hsl);
 
   const wrapper = document.createElement('div');
-  wrapper.style.cssText = 'display:inline-flex;flex-direction:column;align-items:center;gap:0.25rem';
+  wrapper.className = 'swatch-cell';
 
   const swatch = document.createElement('div');
   swatch.className = 'swatch';
@@ -167,7 +167,7 @@ export function renderSammlung() {
       data.favoriten.forEach(hsl => {
         const hex = hslToHex(hsl);
         const cell = document.createElement('div');
-        cell.style.cssText = 'display:inline-flex;flex-direction:column;align-items:center;gap:0.25rem;margin:0.25rem';
+        cell.className = 'swatch-cell';
         cell.appendChild(makeSwatch(hsl));
 
         const del = document.createElement('button');
@@ -193,7 +193,7 @@ export function renderSammlung() {
     } else {
       data.history.forEach(hsl => {
         const cell = document.createElement('div');
-        cell.style.cssText = 'display:inline-block;margin:0.25rem';
+        cell.className = 'swatch-cell';
         cell.appendChild(makeSwatch(hsl));
         histContainer.appendChild(cell);
       });

js/harmonien.js

@@ -27,7 +27,7 @@ function renderHarmony(label, colors, onSaveFavorit, onSaveSchema) {
     hexLabel.textContent = hex;
 
     const btnRow = document.createElement('div');
-    btnRow.style.cssText = 'display:flex;gap:0.25rem';
+    btnRow.className = 'harmony-btn-row';
 
     const favBtn = document.createElement('button');
     favBtn.className = 'action-btn';

style.css

@@ -117,3 +117,38 @@ button.action-btn:hover { background: #f0f0f0; }
 }
 .harmony-swatch .swatch { width: 56px; height: 56px; }
 .harmony-swatch span { font-size: 0.75rem; font-family: monospace; }
+
+/* --- Utility classes --- */
+.swatch-cell {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0.25rem;
+}
+
+.harmony-btn-row {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.btn-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* --- Finale Styles --- */
+h2 { font-size: 1.1rem; margin-bottom: 1rem; }
+h3 { font-size: 0.95rem; }
+
+.tab-content { padding-top: 0.5rem; }
+
+.color-preview { transition: background 0.15s; }
+
+.action-btn:active { transform: scale(0.97); }
+
+@media (max-width: 600px) {
+  nav { flex-wrap: wrap; }
+  .color-codes { flex-direction: column; }
+  .color-code-group input { width: 100%; }
+}