refactor: subdivide monolithic order wizard into clean modular step components

shop/components/wizard/progress-stepper.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { Check } from 'lucide-react'
+
+interface ProgressStepperProps {
+  step: number
+  basketItemsCount: number
+}
+
+export function ProgressStepper({ step, basketItemsCount }: ProgressStepperProps) {
+  return (
+    <div className="max-w-md mx-auto mb-12">
+      <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 => (
+          <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-primary text-white scale-110 shadow-[0_0_15px_rgba(59,130,246,0.5)]'
+                  : 'bg-slate-800 text-slate-400'
+              }`}
+            >
+              {step > s ? <Check className="w-5 h-5" /> : s}
+            </div>
+            <span className={`text-xs font-semibold ${step >= s ? 'text-primary' : 'text-slate-500'} flex items-center gap-1`}>
+              {s === 1 ? 'Kunde' : s === 2 ? 'Modell' : s === 3 ? 'Software' : 'Abschluss'}
+              {s === 3 && basketItemsCount > 0 && (
+                <span className="bg-primary text-white text-[9px] w-4 h-4 rounded-full flex items-center justify-center font-bold px-1.5 leading-none">
+                  {basketItemsCount}
+                </span>
+              )}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}