rename(theme): rename Design-Preset to Farb-Auswahl and show 4 global color indicators

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>

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>

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

src/pages/admin/editor.astro

@@ -34,7 +34,7 @@ const previewUrl = `${targetPage?.slug || '/'}?preview=draft`;
         </div>
 
         <div class="space-y-2">
-          <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider block">Design-Preset</label>
+          <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider block">Farb-Auswahl</label>
           <select id="preset-selector" class="w-full bg-slate-800 border border-slate-700 rounded-lg p-2.5 text-xs text-white focus:outline-none focus:border-sky-500">
             {Object.entries(THEME_PRESETS).map(([key, preset]) => (
               <option value={key}>{preset.name}</option>
@@ -42,6 +42,7 @@ const previewUrl = `${targetPage?.slug || '/'}?preview=draft`;
           </select>
         </div>
 
+
         <div class="space-y-2">
           <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider block">Farbschema</label>
           <div class="grid grid-cols-2 gap-2">
@@ -295,21 +296,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();
     });
   });

src/pages/admin/index.astro

@@ -154,12 +154,13 @@ const presets = Object.values(THEME_PRESETS);
         <!-- Sidebar Column -->
         <div class="space-y-8">
           
-          <!-- Theme Preset Picker & Custom Colors -->
+          <!-- Farb-Auswahl (10 globale Farb-Kombinationen) & Custom Colors -->
           <div class="glass-panel rounded-2xl p-6 space-y-4">
             <h2 class="text-lg font-bold text-sky-400 uppercase tracking-wider flex items-center gap-2">
-              Theme Preset (10 Styles)
+              🎨 Farb-Auswahl (10 Farb-Kombinationen)
             </h2>
-            <div class="space-y-2 max-h-[220px] overflow-y-auto pr-1">
+            <p class="text-[10px] text-slate-400">Wähle eine globale Farbkombination für das gesamte Farbspektrum:</p>
+            <div class="space-y-2 max-h-[260px] overflow-y-auto pr-1">
               {presets.map((p) => (
                 <label class={`flex items-center justify-between p-3 rounded-xl border transition-all cursor-pointer ${themeConfig.activePreset === p.id ? 'border-sky-400 bg-sky-400/10' : 'border-white/5 hover:border-white/20 bg-slate-950/40'}`}>
                   <div class="flex items-center gap-3">
@@ -167,13 +168,16 @@ const presets = Object.values(THEME_PRESETS);
                     <span class="text-xs font-semibold">{p.name}</span>
                   </div>
                   <div class="flex items-center gap-1">
-                    <span class="w-3 h-3 rounded-full inline-block border border-white/20" style={`background-color: ${p.colors.bg};`}></span>
-                    <span class="w-3 h-3 rounded-full inline-block" style={`background-color: ${p.colors.accent};`}></span>
+                    <span class="w-2.5 h-2.5 rounded-full inline-block border border-white/20" style={`background-color: ${p.colors.bg};`} title="Hintergrund"></span>
+                    <span class="w-2.5 h-2.5 rounded-full inline-block border border-white/20" style={`background-color: ${p.colors.cardBg};`} title="Karten"></span>
+                    <span class="w-2.5 h-2.5 rounded-full inline-block border border-white/20" style={`background-color: ${p.colors.text};`} title="Text"></span>
+                    <span class="w-2.5 h-2.5 rounded-full inline-block border border-white/20" style={`background-color: ${p.colors.accent};`} title="Akzent"></span>
                   </div>
                 </label>
               ))}
             </div>
 
+
             <!-- Custom Colors Section -->
             <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider pt-3 border-t border-white/10">Individuelle Farbvergabe (Overrides)</h3>
             <p class="text-[10px] text-slate-400">Überschreibe hier gezielt einzelne Preset-Farben:</p>

src/utils/configLoader.ts

@@ -47,17 +47,20 @@ export interface SiteConfig {
     ctaSecondaryText: string;
     ctaSecondaryLink: string;
     animation?: string;
+    bg_color?: string;
     elements?: UIComponent[];
   };
   bento: {
     sectionTitle: string;
     sectionSubtitle: string;
     animation?: string;
+    bg_color?: string;
     cards: Array<{
       id: string;
       title: string;
       description: string;
       colSpan?: number;
+
       badge?: string;
       icon?: string;
       animation?: string;