feat(wizard): move progress stepper to left sidebar

shop/components/wizard/progress-stepper.tsx

@@ -7,14 +7,70 @@ import { Check } from 'lucide-react'
 interface ProgressStepperProps {
   step: number
   basketItemsCount: number
+  orientation?: 'horizontal' | 'vertical'
 }
 
 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%)
+export function ProgressStepper({ step, basketItemsCount, orientation = 'horizontal' }: ProgressStepperProps) {
   const progressPercent = ((step - 1) / 3) * 100
 
+  if (orientation === 'vertical') {
+    return (
+      <div className="flex flex-col gap-6 relative py-2 pl-2">
+        {/* Background Line */}
+        <div className="absolute left-[20px] top-[20px] bottom-[20px] w-[2px] bg-slate-800 z-0 rounded-full" />
+
+        {/* Animated Active Line */}
+        <motion.div
+          className="absolute left-[20px] top-[20px] w-[2px] bg-gradient-to-b from-blue-600 via-sky-400 to-cyan-400 z-0 rounded-full shadow-[0_0_12px_rgba(56,189,248,0.8)]"
+          initial={{ height: '0%' }}
+          animate={{ height: `${progressPercent}%` }}
+          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 items-center gap-3">
+              <motion.div
+                initial={false}
+                animate={{
+                  scale: isActive ? 1.1 : 1,
+                }}
+                transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+                className={`w-9 h-9 rounded-full flex items-center justify-center font-bold text-xs shrink-0 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-4 h-4 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>
+          )
+        })}
+      </div>
+    )
+  }
+
   return (
     <div className="max-w-xl mx-auto mb-10 px-4">
       <div className="flex justify-between relative">

shop/components/wizard/step-summary.tsx

@@ -70,7 +70,7 @@ export function StepSummary({
       <div className="lg:col-span-5 flex flex-col h-full overflow-hidden pr-4 space-y-6">
         <div className="flex-1 overflow-y-auto pr-1 space-y-6 pb-4 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
           
-          {/* Header & Status Stepper */}
+          {/* Header */}
           <div className="space-y-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center border border-primary/50 shrink-0">
@@ -85,39 +85,6 @@ export function StepSummary({
                 </p>
               </div>
             </div>
-
-            {/* Vertikaler Status-Stepper */}
-            <div className="space-y-4 py-4 border-t border-b border-white/5">
-              <p className="text-[10px] font-bold uppercase tracking-wider text-slate-500">
-                Schritt 4 von 4 — Zusammenfassung & Abschluss
-              </p>
-              <div className="flex flex-col gap-3 pl-1">
-                <div className="flex items-center gap-3">
-                  <div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
-                    <Icons.Check className="w-3.5 h-3.5" />
-                  </div>
-                  <span className="text-sm text-slate-400 font-medium">Kunde</span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
-                    <Icons.Check className="w-3.5 h-3.5" />
-                  </div>
-                  <span className="text-sm text-slate-400 font-medium">Modell</span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <div className="w-6 h-6 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-xs">
-                    <Icons.Check className="w-3.5 h-3.5" />
-                  </div>
-                  <span className="text-sm text-slate-400 font-medium">Software</span>
-                </div>
-                <div className="flex items-center gap-3">
-                  <div className="w-6 h-6 rounded-full bg-primary/20 border border-primary text-primary flex items-center justify-center text-xs font-bold shadow-[0_0_10px_rgba(59,130,246,0.2)]">
-                    4
-                  </div>
-                  <span className="text-sm text-white font-bold">Abschluss</span>
-                </div>
-              </div>
-            </div>
           </div>
 
           {/* Kunden-Info Card */}

shop/components/wizard/summary-sidebar.tsx

@@ -253,14 +253,14 @@ export function SummarySidebar({
 
           {/* Kassen-Liste unten (selectable) */}
           {basketItems.length > 0 && (
-            <div className="shrink-0 pt-3 border-t border-white/10 space-y-2">
+            <div className="shrink-0 pt-3 pb-2 mb-4 border-t border-white/10 space-y-3">
               <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
-              <div className="flex flex-wrap gap-1.5 max-h-28 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
+              <div className="flex flex-wrap gap-2 max-h-36 overflow-y-auto pr-1 pb-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
                 {basketItems.map((item, idx) => (
                   <button
                     key={idx}
                     onClick={() => setSelectedBasketIdx(selectedBasketIdx === idx ? null : idx)}
-                    className={`flex items-center gap-2 text-xs px-3 py-2 rounded-lg border transition-all duration-200 text-left group ${
+                    className={`flex items-center gap-2 text-xs px-3 py-2.5 rounded-lg border transition-all duration-200 text-left group ${
                       selectedBasketIdx === idx
                         ? 'bg-sky-500/15 border-sky-500/40 text-white shadow-[0_0_10px_rgba(56,189,248,0.15)]'
                         : idx === editingIdx
@@ -278,7 +278,7 @@ export function SummarySidebar({
 
               {/* Selected basket item actions */}
               {selectedBasketIdx !== null && basketItems[selectedBasketIdx] && (
-                <div className="flex items-center gap-2 pt-1">
+                <div className="flex items-center gap-2 pt-2 border-t border-white/5">
                   <div className="flex-1 min-w-0">
                     <p className="text-xs text-white font-medium truncate">{basketItems[selectedBasketIdx].deviceName}</p>
                     <p className="text-[10px] text-slate-500 capitalize">
@@ -314,25 +314,24 @@ export function SummarySidebar({
             </div>
           )}
         </CardContent>
-        <CardFooter className="flex flex-col gap-3 shrink-0">
+        <CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-0">
           <Button
             type="button"
             variant="outline"
-            className="w-full border-sky-500/30 text-white hover:bg-sky-500/10 gap-2 h-10 text-sm"
+            className="w-full border-sky-500/40 bg-sky-500/10 text-sky-200 hover:bg-sky-500/20 hover:text-white gap-2 h-9 text-xs font-semibold shadow-sm"
             onClick={() => setIsOpen(true)}
-            disabled={isNextStepDisabled}
+            disabled={!hasActiveSelection && isNextStepDisabled}
           >
-            <UserPlus className="w-4 h-4" /> {editingIdx !== null ? '💾 Kasse bearbeiten' : (hasActiveSelection ? 'Kasse speichern' : 'Kasse anlegen')}
+            <UserPlus className="w-3.5 h-3.5" /> {editingIdx !== null ? '💾 Kasse bearbeiten' : (hasActiveSelection ? 'Kasse speichern' : '+ Kasse anlegen')}
           </Button>
-          <Separator className="bg-white/10 my-1" />
           <Button
-            className="w-full h-12 text-lg"
+            className="w-full h-10 text-sm font-bold bg-gradient-to-r from-blue-600 to-sky-500 hover:from-blue-500 hover:to-sky-400"
             onClick={nextStep}
             disabled={basketItems.length === 0 && isNextStepDisabled}
           >
-            Weiter <ChevronRight className="ml-2 w-5 h-5" />
+            Weiter <ChevronRight className="ml-1 w-4 h-4" />
           </Button>
-          <Button variant="ghost" className="w-full text-white" onClick={prevStep}>
+          <Button variant="ghost" className="w-full text-slate-400 hover:text-white h-8 text-xs" onClick={prevStep}>
             Zurück zum Abrechnungsmodell
           </Button>
         </CardFooter>