From a7d51b9e17975ef3c4e50f60323a224c4c37397b Mon Sep 17 00:00:00 2001
From: Ferdinand <ferdinand@pigmento.local>
Date: Fri, 3 Apr 2026 17:09:58 +0200
Subject: [PATCH] feat: Hintergrund wechselt dynamisch zur Pastelversion der
 aktuellen Farbe
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bei jeder Farbidentifikation wird der Hue übernommen, Sättigung gedämpft
(max 45%) und Helligkeit auf 92% gesetzt. Sanfter 0.8s CSS-Übergang.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 js/app.js | 7 +++++++
 style.css | 1 +
 2 files changed, 8 insertions(+)

diff --git a/js/app.js b/js/app.js
index 25ade99..13561ef 100644
--- a/js/app.js
+++ b/js/app.js
@@ -44,6 +44,13 @@ document.querySelectorAll('.tab-btn').forEach(btn => {
 // Every color change goes into history
 document.addEventListener('colorChanged', (e) => addToHistory(e.detail));
 
+// Hintergrundfarbe als extrem helles Pastell der aktuellen Farbe
+document.addEventListener('colorChanged', (e) => {
+  const { h, s } = e.detail;
+  const pastelS = Math.round(Math.min(s * 0.5, 45));
+  document.body.style.background = `hsl(${h}, ${pastelS}%, 92%)`;
+});
+
 initEingabe(addFavorit, addColorToSchema);
 initPicker(addFavorit, addColorToSchema);
 initHarmonien(addFavorit, addColorToSchema);
diff --git a/style.css b/style.css
index d8e947d..da42ccc 100644
--- a/style.css
+++ b/style.css
@@ -7,6 +7,7 @@ body {
   background: #DFE9F5;
   color: #222;
   min-height: 100vh;
+  transition: background 0.8s ease;
 }
 
 #lottie-bg {