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';