feat: Erklärungen als Hover-Tooltip bei Harmonietypen

js/harmonien.js

@@ -1,13 +1,39 @@
 import { getHarmonies, hslToHex } from './converter.js';
 import { state } from './app.js';
 
+const DESCRIPTIONS = {
+  'Komplementär':       'Die Farbe gegenüber auf dem Farbrad (180°). Starker Kontrast — gut für Akzente.',
+  'Analog':             'Zwei Nachbarfarben (±30°). Wirkt harmonisch und ruhig — gut für Hintergründe.',
+  'Triade':             'Drei gleichmäßig verteilte Farben (120° Abstand). Lebendig, aber ausgewogen.',
+  'Split-Komplementär': 'Die zwei Farben neben der Komplementärfarbe (150°/210°). Weniger Spannung als Komplementär, mehr Vielfalt.',
+};
+
 function renderHarmony(label, colors, onSaveFavorit, onSaveSchema) {
   const row = document.createElement('div');
   row.className = 'harmony-row';
 
+  const headerRow = document.createElement('div');
+  headerRow.className = 'harmony-header';
+
   const heading = document.createElement('h3');
   heading.textContent = label;
-  row.appendChild(heading);
+
+  const infoWrap = document.createElement('span');
+  infoWrap.className = 'harmony-info';
+
+  const infoIcon = document.createElement('span');
+  infoIcon.className = 'harmony-info-icon';
+  infoIcon.textContent = 'ℹ';
+
+  const tooltip = document.createElement('span');
+  tooltip.className = 'harmony-tooltip';
+  tooltip.textContent = DESCRIPTIONS[label] || '';
+
+  infoWrap.appendChild(infoIcon);
+  infoWrap.appendChild(tooltip);
+  headerRow.appendChild(heading);
+  headerRow.appendChild(infoWrap);
+  row.appendChild(headerRow);
 
   const swatchesDiv = document.createElement('div');
   swatchesDiv.className = 'harmony-swatches';

style.css

@@ -107,8 +107,38 @@ button.action-btn:hover { background: #f0f0f0; }
 /* --- Harmonien-Tab --- */
 .subtitle { font-size: 0.85rem; color: #666; margin-bottom: 0.5rem; }
 
-.harmony-row h3 { font-size: 0.9rem; margin-bottom: 0.5rem; }
+.harmony-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
+.harmony-row h3 { font-size: 0.9rem; margin-bottom: 0; }
 .harmony-swatches { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-start; }
+
+.harmony-info { position: relative; display: inline-flex; align-items: center; }
+.harmony-info-icon {
+  font-size: 0.75rem;
+  color: #aaa;
+  cursor: default;
+  user-select: none;
+  line-height: 1;
+}
+.harmony-tooltip {
+  display: none;
+  position: absolute;
+  left: 1.4rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #333;
+  color: #fff;
+  font-size: 0.78rem;
+  padding: 0.4rem 0.65rem;
+  border-radius: 6px;
+  white-space: nowrap;
+  z-index: 100;
+  pointer-events: none;
+  max-width: 320px;
+  white-space: normal;
+  width: max-content;
+  max-width: 280px;
+}
+.harmony-info:hover .harmony-tooltip { display: block; }
 .harmony-swatch {
   display: flex;
   flex-direction: column;