style(wizard): remove header and refine cart sidebar UI/UX

shop/components/order-wizard.tsx

@@ -94,6 +94,7 @@ export function OrderWizard({
   const router = useRouter()
   // Upgrade-Mode: starte direkt bei Schritt 3 (Software)
   const [step, setStep] = useState(upgradeMode ? 3 : (initialOrder ? 3 : 1))
+  const [direction, setDirection] = useState(1)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [selectedCompanyId, setSelectedCompanyId] = useState<string | null>(
     initialOrder?.company_id ?? (isAdmin ? 'all' : null)
@@ -543,13 +544,22 @@ export function OrderWizard({
         addToBasket()
       }
     }
+    setDirection(1)
     setStep(s => s + 1)
   }
 
   const prevStep = () => {
+    setDirection(-1)
     setStep(s => s - 1)
   }
 
+  const goToStep = (targetStep: number) => {
+    if (targetStep < step) {
+      setDirection(-1)
+      setStep(targetStep)
+    }
+  }
+
   function handleBillingIntervalChange(val: 'one_time' | 'monthly') {
     setSelectedBillingInterval(val)
     if (val === 'monthly') {
@@ -845,15 +855,6 @@ export function OrderWizard({
 
   return (
     <div className="max-w-7xl mx-auto px-4 py-6">
-      {/* Global Main Header over all columns */}
-      <div className="mb-6">
-        <h1 className="text-3xl font-extrabold tracking-tight mb-1 text-gradient">
-          Konfigurieren Sie Ihre Lösung
-        </h1>
-        <p className="text-slate-400 text-sm">
-          Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
-        </p>
-      </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
         {/* Left Side Status Stepper & Categories for ALL steps */}
@@ -866,7 +867,7 @@ export function OrderWizard({
               Bestell-Wizard
             </p>
           </div>
-          <ProgressStepper step={step} basketItemsCount={basketItems.length} />
+          <ProgressStepper step={step} basketItemsCount={basketItems.length} orientation="vertical" onStepClick={goToStep} />
 
           {/* Step 3 Categories inside left sidebar */}
           {step === 3 && (
@@ -929,9 +930,9 @@ export function OrderWizard({
             {step === 1 && (
               <motion.div
                 key="step1"
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: -20 }}
+                initial={{ opacity: 0, y: direction * 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: direction * -20 }}
                 className="space-y-6"
               >
                 <StepCustomer
@@ -960,9 +961,9 @@ export function OrderWizard({
             {step === 2 && (
               <motion.div
                 key="step2"
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: -20 }}
+                initial={{ opacity: 0, y: direction * 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: direction * -20 }}
                 className="space-y-6"
               >
                 <StepBilling
@@ -980,9 +981,9 @@ export function OrderWizard({
         {step === 3 && (
           <motion.div
             key="step3"
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -20 }}
+            initial={{ opacity: 0, y: direction * 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: direction * -20 }}
             className="h-[calc(100vh-160px)] overflow-hidden bg-slate-950/70 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-2"
           >
             <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 h-full items-stretch">
@@ -1068,9 +1069,9 @@ export function OrderWizard({
         {step === 4 && (
           <motion.div
             key="step4"
-            initial={{ opacity: 0, scale: 0.98 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.98 }}
+            initial={{ opacity: 0, y: direction * 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: direction * -20 }}
             className="h-[calc(100vh-140px)] overflow-hidden w-full"
           >
             <StepSummary

shop/components/wizard/progress-stepper.tsx

@@ -7,14 +7,86 @@ import { Check } from 'lucide-react'
 interface ProgressStepperProps {
   step: number
   basketItemsCount: number
+  orientation?: 'horizontal' | 'vertical'
+  onStepClick?: (step: number) => void
 }
 
 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', onStepClick }: ProgressStepperProps) {
   const progressPercent = ((step - 1) / 3) * 100
 
+  if (orientation === 'vertical') {
+    return (
+      <div className="relative py-2">
+        <div className="flex flex-col gap-6 relative">
+          {/* Static Background Vertical Line */}
+          <div className="absolute left-[19px] top-[20px] bottom-[20px] w-[2px] bg-slate-800 z-0 rounded-full" />
+
+          {/* Animated Active Vertical Line */}
+          <motion.div
+            className="absolute left-[19px] 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 * 0.75}%` }}
+            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
+            const isClickable = onStepClick && s < step
+
+            return (
+              <div 
+                key={s} 
+                onClick={() => isClickable && onStepClick(s)}
+                className={`relative z-10 flex items-center gap-3 ${isClickable ? 'cursor-pointer group' : ''}`}
+              >
+                <motion.div
+                  initial={false}
+                  animate={{
+                    scale: isActive ? 1.1 : 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 shrink-0 ${
+                    isDone
+                      ? 'bg-sky-500 text-slate-950 shadow-[0_0_15px_rgba(56,189,248,0.6)] border-2 border-sky-400 group-hover:scale-105'
+                      : 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>
+
+                <div className="flex flex-col">
+                  <span
+                    className={`text-xs font-bold 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>
+                  {isClickable && (
+                    <span className="text-[10px] text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity">
+                      Zurück zu Schritt {s}
+                    </span>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+  // Calculate progress percentage for active line (Step 1: 0%, Step 2: 33.3%, Step 3: 66.6%, Step 4: 100%)
+
   return (
     <div className="max-w-xl mx-auto mb-10 px-4">
       <div className="flex justify-between relative">

shop/components/wizard/summary-sidebar.tsx

@@ -256,22 +256,18 @@ export function SummarySidebar({
                 {err}
               </p>
             ))}
-          </div>
-
-          {/* Kassen-Liste unten (selectable) */}
+          </div>          {/* Warenkorb List (Scrollable) */}
           {basketItems.length > 0 && (
             <div className="shrink-0 pt-3 pb-2 border-t border-white/10 space-y-2">
               <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
-              <div className="flex flex-col gap-2 max-h-32 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
+              <div className="flex flex-col gap-2 max-h-36 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
                 {basketItems.map((item, idx) => (
                   <div
                     key={idx}
-                    className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left bg-slate-900/60 ${
-                      selectedBasketIdx === idx
-                        ? 'border-sky-500/50 bg-sky-500/10 text-white shadow-[0_0_12px_rgba(56,189,248,0.15)]'
-                        : idx === editingIdx
-                        ? 'border-blue-500/40 bg-blue-500/10 text-white'
-                        : 'border-white/10 text-slate-300 hover:border-white/20 hover:bg-slate-900'
+                    className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left ${
+                      idx === editingIdx
+                        ? 'border-primary/50 bg-primary/10 text-white shadow-[0_0_12px_rgba(59,130,246,0.15)]'
+                        : 'border-white/10 bg-slate-900/60 text-slate-300 hover:border-white/20 hover:bg-slate-900'
                     }`}
                   >
                     <div className="flex-1 min-w-0 pr-2">
@@ -282,7 +278,7 @@ export function SummarySidebar({
                         </span>
                       </div>
                       {item.licenseNumber && (
-                        <p className="text-[10px] text-slate-400 truncate mt-0.5">{item.licenseNumber}</p>
+                        <p className="text-[10px] text-slate-400 truncate mt-0.5">Lizenz: {item.licenseNumber}</p>
                       )}
                     </div>
                     <div className="flex items-center gap-1 shrink-0">
@@ -291,7 +287,10 @@ export function SummarySidebar({
                         variant="ghost"
                         size="icon"
                         className="w-6 h-6 hover:bg-primary/20 text-slate-400 hover:text-primary rounded-lg transition-colors"
-                        onClick={() => handleEditBasketItem(idx)}
+                        onClick={() => {
+                          editBasketItem(idx)
+                          setIsOpen(true)
+                        }}
                         title="Bearbeiten"
                       >
                         <Pencil className="w-3 h-3" />
@@ -301,10 +300,7 @@ export function SummarySidebar({
                         variant="ghost"
                         size="icon"
                         className="w-6 h-6 hover:bg-red-500/20 text-slate-400 hover:text-red-400 rounded-lg transition-colors"
-                        onClick={() => {
-                          deleteBasketItem(idx)
-                          if (selectedBasketIdx === idx) setSelectedBasketIdx(null)
-                        }}
+                        onClick={() => deleteBasketItem(idx)}
                         title="Löschen"
                       >
                         <Trash2 className="w-3 h-3" />