From cc4d612b3378cbb64d352c9745df63077fbb3537 Mon Sep 17 00:00:00 2001
From: Ferdinand <ferdinand@MacBook-Pro.local>
Date: Thu, 2 Apr 2026 13:55:43 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Erkl=C3=A4rungen=20als=20Hover-Tooltip?=
 =?UTF-8?q?=20bei=20Harmonietypen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/harmonien.js | 28 +++++++++++++++++++++++++++-
 style.css       | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/js/harmonien.js b/js/harmonien.js
index d718d8e..9c5e74f 100644
--- a/js/harmonien.js
+++ b/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';
diff --git a/style.css b/style.css
index 1c63f04..53dba98 100644
--- a/style.css
+++ b/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;