refactor(wizard): polish stepper and summary sidebar ui

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 => (
-          <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'
-              }`}
-            >
-              {step > s ? <Check className="w-5 h-5" /> : 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">
+              <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'
+                }`}
+              >
+                {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-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>
-            <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'}
-              {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">
-                  {basketItemsCount}
-                </span>
-              )}
-            </span>
-          </div>
-        ))}
+          )
+        })}
       </div>
     </div>
   )

shop/components/wizard/summary-sidebar.tsx

@@ -69,10 +69,11 @@ 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]">
-      <CardHeader className="shrink-0">
-        <CardTitle className="text-white">Zusammenfassung</CardTitle>
-      </CardHeader>
+    <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>
         <CardContent className="space-y-4 flex-1 overflow-y-auto subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
           {visibleCategories.map(cat => {
             const sel = selections[cat.id]
@@ -292,6 +293,7 @@ export function SummarySidebar({
             Zurück zum Abrechnungsmodell
           </Button>
         </CardFooter>
-    </Card>
+      </Card>
+    </div>
   )
 }