diff --git a/src/components/OnboardingWizard.astro b/src/components/OnboardingWizard.astro
index 6850013..4ae16fc 100644
--- a/src/components/OnboardingWizard.astro
+++ b/src/components/OnboardingWizard.astro
@@ -168,27 +168,27 @@
               <div>
                 <label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-2">Standard-Farbkombinationen</label>
                 <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
-                  <button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#3b82f6" data-secondary="#ffffff">
+                  <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#3b82f6" data-secondary="#ffffff">
                     <span class="w-3 h-3 rounded-full bg-[#3b82f6]"></span>
                     <span>Klassisch Blau</span>
                   </button>
-                  <button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#10b981" data-secondary="#e2e8f0">
+                  <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#10b981" data-secondary="#e2e8f0">
                     <span class="w-3 h-3 rounded-full bg-[#10b981]"></span>
                     <span>Smaragd & Silber</span>
                   </button>
-                  <button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#6366f1" data-secondary="#c7d2fe">
+                  <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#6366f1" data-secondary="#c7d2fe">
                     <span class="w-3 h-3 rounded-full bg-[#6366f1]"></span>
                     <span>Purple & Lilac</span>
                   </button>
-                  <button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#4b5563" data-secondary="#f59e0b">
+                  <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#4b5563" data-secondary="#f59e0b">
                     <span class="w-3 h-3 rounded-full bg-[#4b5563]"></span>
                     <span>Coal & Amber</span>
                   </button>
-                  <button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#f43f5e" data-secondary="#fbbf24">
+                  <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#f43f5e" data-secondary="#fbbf24">
                     <span class="w-3 h-3 rounded-full bg-[#f43f5e]"></span>
                     <span>Muted Rose</span>
                   </button>
-                  <button type="button" class="color-preset-btn p-2 rounded-xl border text-[10px] font-bold bg-[#0B0F19] text-white flex items-center gap-1.5 hover:border-sky-500" data-primary="#06b6d4" data-secondary="#ffffff">
+                  <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#06b6d4" data-secondary="#ffffff">
                     <span class="w-3 h-3 rounded-full bg-[#06b6d4]"></span>
                     <span>Ocean Cyan</span>
                   </button>