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 {