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

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

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