From 6042c5ad23782d3a7e52ce1f05b36c929aebb439 Mon Sep 17 00:00:00 2001
From: Daniel S <daniel.schumacher@caspos.de>
Date: Sun, 9 Aug 2026 23:06:56 +0200
Subject: [PATCH] feat(editor): support individual section background colors
 per section in editor and components

---
 src/components/sections/BentoGrid.astro      |  3 +-
 src/components/sections/ContactSection.astro |  3 +-
 src/components/sections/HeroSection.astro    |  3 +-
 src/pages/admin/editor.astro                 | 49 ++++++++++++++++----
 4 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/components/sections/BentoGrid.astro b/src/components/sections/BentoGrid.astro
index 7ce2f2a..7475d6c 100644
--- a/src/components/sections/BentoGrid.astro
+++ b/src/components/sections/BentoGrid.astro
@@ -8,7 +8,8 @@ interface Props {
 const { config } = Astro.props;
 ---
 
-<section id="services" class={`py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative ${config.animation ? `anim-${config.animation}` : ''}`}>
+<section id="services" class={`py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative ${config.animation ? `anim-${config.animation}` : ''}`} style={(config as any).bg_color ? `background-color: ${(config as any).bg_color};` : ''}>
+
   <div class="text-center max-w-3xl mx-auto mb-16 space-y-3">
     <h2 class="text-3xl font-extrabold text-white tracking-tight uppercase">{config.sectionTitle}</h2>
     <p class="text-slate-400 text-xs sm:text-sm">{config.sectionSubtitle}</p>
diff --git a/src/components/sections/ContactSection.astro b/src/components/sections/ContactSection.astro
index 5668b8e..69af488 100644
--- a/src/components/sections/ContactSection.astro
+++ b/src/components/sections/ContactSection.astro
@@ -9,7 +9,8 @@ interface Props {
 const { contactConfig, smtpConfig } = Astro.props;
 ---
 
-<section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto relative">
+<section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto relative" style={(contactConfig as any).bg_color ? `background-color: ${(contactConfig as any).bg_color};` : ''}>
+
   <div class="glass-panel rounded-3xl p-8 sm:p-12 relative overflow-hidden">
     <div class="text-center space-y-3 mb-10">
       <h2 class="text-3xl font-extrabold text-white tracking-tight uppercase">{contactConfig.title}</h2>
diff --git a/src/components/sections/HeroSection.astro b/src/components/sections/HeroSection.astro
index c70a2b8..2f2e445 100644
--- a/src/components/sections/HeroSection.astro
+++ b/src/components/sections/HeroSection.astro
@@ -19,10 +19,11 @@ const actionElements = elements.filter((el: UIComponent) => el.slotId === 'hero-
 const customElements = elements.filter((el: UIComponent) => !el.slotId || el.slotId === 'hero-custom-slot');
 ---
 
-<section class={`relative py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden ${config.animation ? `anim-${config.animation}` : ''}`}>
+<section class={`relative py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden ${config.animation ? `anim-${config.animation}` : ''}`} style={config.bg_color ? `background-color: ${config.bg_color};` : ''}>
   <span class="aurora-glow aurora-glow-sky w-[500px] h-[500px] -top-32 -left-32"></span>
   <span class="aurora-glow aurora-glow-indigo w-[400px] h-[400px] bottom-0 right-0"></span>
 
+
   <div class="relative z-10 text-center max-w-4xl mx-auto space-y-8">
     
     <!-- Slot 1: Badge Slot -->
diff --git a/src/pages/admin/editor.astro b/src/pages/admin/editor.astro
index 4779396..359d06d 100644
--- a/src/pages/admin/editor.astro
+++ b/src/pages/admin/editor.astro
@@ -295,21 +295,50 @@ const previewUrl = `${targetPage?.slug || '/'}?preview=draft`;
 
       if (fieldsContainer) {
         fieldsContainer.innerHTML = '';
-        Object.entries(currentSettings).forEach(([key, value]) => {
+        const allKeys = new Set(Object.keys(currentSettings));
+        if (!allKeys.has('bg_color')) {
+          allKeys.add('bg_color');
+        }
+
+        allKeys.forEach((key) => {
+          const value = currentSettings[key] || '';
           const fieldWrapper = document.createElement('div');
-          fieldWrapper.innerHTML = `
-            <label class="block text-xs font-semibold text-slate-400 mb-1 uppercase tracking-wider">${key}</label>
-            <input 
-              type="text" 
-              name="${key}" 
-              value="${value}" 
-              class="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-sky-500"
-            />
-          `;
+          
+          if (key === 'bg_color') {
+            fieldWrapper.innerHTML = `
+              <label class="block text-xs font-semibold text-slate-400 mb-1 uppercase tracking-wider">🎨 Sektions-Hintergrundfarbe (HEX/RGBA)</label>
+              <div class="flex gap-2">
+                <input 
+                  type="color" 
+                  value="${value && value.startsWith('#') ? value : '#0f172a'}" 
+                  class="h-9 w-12 rounded bg-slate-800 border border-slate-700 cursor-pointer p-0.5"
+                  onchange="this.nextElementSibling.value = this.value"
+                />
+                <input 
+                  type="text" 
+                  name="bg_color" 
+                  value="${value}" 
+                  placeholder="z.B. #0F172A oder transparent"
+                  class="flex-1 bg-slate-800 border border-slate-700 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-sky-500"
+                />
+              </div>
+            `;
+          } else {
+            fieldWrapper.innerHTML = `
+              <label class="block text-xs font-semibold text-slate-400 mb-1 uppercase tracking-wider">${key}</label>
+              <input 
+                type="text" 
+                name="${key}" 
+                value="${typeof value === 'object' ? JSON.stringify(value) : value}" 
+                class="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-sky-500"
+              />
+            `;
+          }
           fieldsContainer.appendChild(fieldWrapper);
         });
       }
 
+
       editModal?.showModal();
     });
   });