refactor(background): use semantic bg-background class

shop/app/globals.css

@@ -2,110 +2,58 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  :root {
-    /* Light Mode: Maximierter Kontrast (Reines Weißer Hintergrund + Tiefschwarzer Text) */
-    --background: 0 0% 100%;
-    --foreground: 224 71% 4%;
-    --card: 0 0% 100%;
-    --card-foreground: 224 71% 4%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 71% 4%;
+html {
+  color-scheme: dark;
+}
 
-    /* Primary: Cyan/Blau lesbarer gemacht */
-    --primary: 199 100% 35%;
-    --primary-foreground: 0 0% 100%;
+:root {
+  /* OKLCH Zentral-Farbsystem */
+  --oklch-background: 0.145 0.01 148;
+  --oklch-surface: 0.20 0.01 148;
+  --oklch-surface-hover: 0.25 0.012 148;
+  --oklch-primary: 0.68 0.18 255;
+  --oklch-primary-hover: 0.75 0.18 255;
+  --oklch-secondary: 0.76 0.15 155;
+  --oklch-text-main: 0.98 0 0;
+  --oklch-text-muted: 0.70 0.01 148;
+  --oklch-border: 0.31 0.012 148;
 
-    /* Muted & Accent: Deutlich dunklerer Text für Barrierefreiheit */
-    --secondary: 220 14% 90%;
-    --secondary-foreground: 224 71% 4%;
-    --muted: 220 14% 92%;
-    --muted-foreground: 220 20% 28%;
-    /* Vorher 40% Helligkeit, jetzt 28% (viel dunkler) */
-    --accent: 220 14% 90%;
-    --accent-foreground: 224 71% 4%;
-
-    --destructive: 0 84% 50%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 220 14% 75%;
-    /* Grenzen sichtbarer gemacht */
-    --input: 220 14% 75%;
-    --ring: 199 100% 35%;
-    --radius: 0.75rem;
-  }
-
-  .dark {
-    /* Dark Mode: Reines Tiefschwarz erhöht den Kontrast zu weißem Text drastisch */
+  /* Classic HSL Mappings */
   --background: 240 10% 3.9%;
   --foreground: 0 0% 98%;
   --card: 240 10% 3.9%;
   --card-foreground: 0 0% 98%;
   --popover: 240 10% 3.9%;
   --popover-foreground: 0 0% 98%;
-
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-
+  --primary: 217 91% 60%;
+  --primary-foreground: 0 0% 100%;
   --secondary: 240 3.7% 15.9%;
   --secondary-foreground: 0 0% 98%;
-
-    /* Muted Text: Helligkeit massiv erhöht, damit Beschreibungen lesbar sind */
   --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 75%;
-    /* Vorher 56.9% Helligkeit, jetzt 75% (viel heller) */
-
+  --muted-foreground: 240 5% 64.9%;
   --accent: 240 3.7% 15.9%;
   --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 72% 51%;
-    /* Helleres Rot für dunklen Hintergrund */
+  --destructive: 0 62.8% 30.6%;
   --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 25%;
-    /* Grenzen im Dunkeln besser sichtbar */
-    --input: 240 3.7% 25%;
-    --ring: 240 4.9% 83.9%;
-  }
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 217 91% 60%;
+  --radius: 0.75rem;
 }
 
-/* Automatischer High-Contrast-Modus für Betriebssystem-Vorgaben */
-@media (prefers-contrast: more) {
-  :root {
-    --foreground: 0 0% 0%;
-    --muted-foreground: 0 0% 0%;
-    --border: 0 0% 0%;
-  }
-
-  .dark {
-    --background: 0 0% 0%;
-    --foreground: 0 0% 100%;
-    --muted-foreground: 0 0% 100%;
-    --border: 0 0% 100%;
-  }
+input, select, textarea, option {
+  background-color: oklch(var(--oklch-surface)) !important;
+  color: oklch(var(--oklch-text-main)) !important;
+  border: 1px solid oklch(var(--oklch-border) / 0.4) !important;
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground antialiased;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
+input:focus, select:focus, textarea:focus {
+  border-color: oklch(var(--oklch-primary)) !important;
+  outline: none !important;
+  box-shadow: 0 0 0 2px oklch(var(--oklch-primary) / 0.2) !important;
 }
 
-@layer utilities {
-
-  /* Glassmorphism Kontraste geschärft (höhere Deckkraft) */
-  .glass {
-    @apply bg-white/20 backdrop-blur-md border border-white/40;
-  }
-
-  .glass-dark {
-    @apply bg-black/40 backdrop-blur-md border border-white/20;
-  }
-
-  .text-gradient {
-    @apply text-blue-500 dark:text-blue-400;
-  }
+option {
+  color: oklch(var(--oklch-text-main)) !important;
+  background-color: oklch(var(--oklch-surface)) !important;
 }

shop/components/AsciiShaderBackground.tsx

@@ -166,7 +166,7 @@ export function AsciiShaderBackground({ className = '' }: { className?: string }
 
   return (
     <div
-      className={`absolute top-0 left-0 right-0 h-[500px] z-0 overflow-hidden bg-[oklch(0.145_0.01_148)] pointer-events-none ${className}`}
+      className={`absolute top-0 left-0 right-0 h-[500px] z-0 overflow-hidden bg-background pointer-events-none ${className}`}
       style={{
         maskImage: 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 250px, rgba(0,0,0,0) 500px)',
         WebkitMaskImage: 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 250px, rgba(0,0,0,0) 500px)'

shop/components/wizard/progress-stepper.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import React from 'react'
+import { motion } from 'framer-motion'
 import { Check } from 'lucide-react'
 
 interface ProgressStepperProps {
@@ -7,32 +9,64 @@ interface ProgressStepperProps {
   basketItemsCount: number
 }
 
+const STEP_LABELS = ['Kunde', 'Modell', 'Software', 'Abschluss']
+
 export function ProgressStepper({ step, basketItemsCount }: ProgressStepperProps) {
+  // Calculate progress percentage for active line (Step 1: 0%, Step 2: 33.3%, Step 3: 66.6%, Step 4: 100%)
+  const progressPercent = ((step - 1) / 3) * 100
+
   return (
-    <div className="max-w-md mx-auto mb-12">
+    <div className="max-w-xl mx-auto mb-10 px-4">
       <div className="flex justify-between relative">
-        <div className="absolute top-1/2 left-0 w-full h-0.5 bg-white/10 -translate-y-1/2 z-0" />
-        {[1, 2, 3, 4].map(s => (
+        {/* Static Background Line */}
+        <div className="absolute top-[20px] left-[10%] right-[10%] h-[2px] bg-slate-800 z-0 rounded-full" />
+
+        {/* Animated Active Line (bg-sky-500) */}
+        <motion.div
+          className="absolute top-[20px] left-[10%] h-[2px] bg-gradient-to-r from-blue-600 via-sky-400 to-cyan-400 z-0 rounded-full shadow-[0_0_12px_rgba(56,189,248,0.8)]"
+          initial={{ width: '0%' }}
+          animate={{ width: `${progressPercent * 0.8}%` }}
+          transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
+        />
+
+        {[1, 2, 3, 4].map(s => {
+          const isDone = step > s
+          const isActive = step === s
+
+          return (
             <div key={s} className="relative z-10 flex flex-col items-center gap-2">
-            <div
-              className={`w-10 h-10 rounded-full flex items-center justify-center transition-all duration-500 ${
-                step >= s
-                  ? 'bg-blue-600 text-white scale-110 shadow-[0_0_15px_rgba(59,130,246,0.5)]'
-                  : 'bg-slate-800 text-slate-400'
+              <motion.div
+                initial={false}
+                animate={{
+                  scale: isActive ? 1.15 : 1,
+                }}
+                transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+                className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-300 ${
+                  isDone
+                    ? 'bg-sky-500 text-slate-950 shadow-[0_0_15px_rgba(56,189,248,0.6)] border-2 border-sky-400'
+                    : isActive
+                    ? 'bg-slate-950 border-2 border-sky-400 text-sky-400 shadow-[0_0_20px_rgba(56,189,248,0.7)]'
+                    : 'bg-slate-900 border-2 border-slate-800 text-slate-500'
                 }`}
               >
-              {step > s ? <Check className="w-5 h-5" /> : s}
-            </div>
-            <span className={`text-xs font-semibold ${step >= s ? 'text-blue-400' : 'text-slate-500'} flex items-center gap-1`}>
-              {s === 1 ? 'Kunde' : s === 2 ? 'Modell' : s === 3 ? 'Software' : 'Abschluss'}
+                {isDone ? <Check className="w-5 h-5 stroke-[3]" /> : s}
+              </motion.div>
+
+              <span
+                className={`text-xs font-semibold tracking-wide transition-colors duration-300 flex items-center gap-1.5 ${
+                  isActive || isDone ? 'text-sky-300' : 'text-slate-500'
+                }`}
+              >
+                {STEP_LABELS[s - 1]}
                 {s === 3 && basketItemsCount > 0 && (
-                <span className="bg-blue-600 text-white text-[9px] w-4 h-4 rounded-full flex items-center justify-center font-bold px-1.5 leading-none">
+                  <span className="bg-sky-500 text-slate-950 text-[10px] w-4 h-4 rounded-full flex items-center justify-center font-extrabold shadow-sm">
                     {basketItemsCount}
                   </span>
                 )}
               </span>
             </div>
-        ))}
+          )
+        })}
       </div>
     </div>
   )

shop/components/wizard/summary-sidebar.tsx

@@ -69,7 +69,8 @@ export function SummarySidebar({
   prevStep,
 }: SummarySidebarProps) {
   return (
-    <Card className="glass-dark border-primary/20 backdrop-blur-lg bg-slate-950/75 flex flex-col max-h-[80vh]">
+    <div className="sticky top-6">
+      <Card className="bg-[oklch(0.145_0.01_148)]/90 backdrop-blur-md border border-slate-800 shadow-[0_0_30px_rgba(0,0,0,0.5)] rounded-2xl overflow-hidden flex flex-col max-h-[80vh]">
         <CardHeader className="shrink-0">
           <CardTitle className="text-white">Zusammenfassung</CardTitle>
         </CardHeader>
@@ -293,5 +294,6 @@ export function SummarySidebar({
           </Button>
         </CardFooter>
       </Card>
+    </div>
   )
 }

shop/tailwind.config.ts

@@ -11,7 +11,23 @@ export default {
   theme: {
     extend: {
       colors: {
-        background: "hsl(var(--background))",
+        background: "oklch(var(--oklch-background) / <alpha-value>)",
+        surface: {
+          DEFAULT: "oklch(var(--oklch-surface) / <alpha-value>)",
+          hover: "oklch(var(--oklch-surface-hover) / <alpha-value>)",
+        },
+        primary: {
+          DEFAULT: "oklch(var(--oklch-primary) / <alpha-value>)",
+          hover: "oklch(var(--oklch-primary-hover) / <alpha-value>)",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "oklch(var(--oklch-secondary) / <alpha-value>)",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        "text-main": "oklch(var(--oklch-text-main) / <alpha-value>)",
+        "text-muted": "oklch(var(--oklch-text-muted) / <alpha-value>)",
+        border: "oklch(var(--oklch-border) / <alpha-value>)",
         foreground: "hsl(var(--foreground))",
         card: {
           DEFAULT: "hsl(var(--card))",
@@ -21,14 +37,6 @@ export default {
           DEFAULT: "hsl(var(--popover))",
           foreground: "hsl(var(--popover-foreground))",
         },
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
         muted: {
           DEFAULT: "hsl(var(--muted))",
           foreground: "hsl(var(--muted-foreground))",
@@ -41,7 +49,6 @@ export default {
           DEFAULT: "hsl(var(--destructive))",
           foreground: "hsl(var(--destructive-foreground))",
         },
-        border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
         chart: {