style(wizard): minimize gap between basket items and action buttons in summary sidebar

shop/components/order-wizard.tsx

@@ -854,11 +854,11 @@ export function OrderWizard({
   }
 
   return (
-    <div className="max-w-7xl mx-auto px-4 py-6">
+    <div className="max-w-7xl mx-auto px-4 pt-2 pb-6">
 
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
         {/* Left Side Status Stepper & Categories for ALL steps */}
-        <div className="lg:col-span-3 bg-slate-900/50 backdrop-blur-md border border-white/10 rounded-2xl p-6 space-y-6 sticky top-6">
+        <div className="lg:col-span-3 bg-slate-900/50 backdrop-blur-md border border-white/10 rounded-2xl p-5 space-y-5 sticky top-2">
           <div>
             <h2 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-1">
               Fortschritt

shop/components/wizard/step-customer.tsx

@@ -145,7 +145,7 @@ export function StepCustomer({
 
   return (
     <Card className="glass-dark border-white/10">
-      <CardHeader>
+      <CardHeader className="pb-3">
         <CardTitle className="text-2xl flex items-center gap-2 text-white">
           <User className="w-6 h-6 text-primary" />
           Für wen bestellen Sie?

shop/components/wizard/step-summary.tsx

@@ -86,38 +86,7 @@ export function StepSummary({
               </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

@@ -258,15 +258,21 @@ export function SummarySidebar({
             ))}
           </div>          {/* Warenkorb List (Scrollable) */}
           {basketItems.length > 0 && (
-            <div className="shrink-0 pt-3 pb-2 border-t border-white/10 space-y-2">
+            <div className="shrink-0 pt-2 pb-0 border-t border-white/10 space-y-1.5">
-              <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
+              <div className="flex items-center justify-between text-xs text-slate-400">
+                <span className="font-semibold uppercase tracking-wider">Kassen ({basketItems.length}):</span>
+                <span className="text-[10px] text-slate-500">Zum Bearbeiten anklicken</span>
+              </div>
               <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) => (
+                {basketItems.map((item, idx) => {
+                  const isEditing = idx === editingIdx
+                  return (
                     <div
                       key={idx}
-                    className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left ${
+                      onClick={() => editBasketItem(idx)}
-                      idx === editingIdx
+                      className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left cursor-pointer group ${
-                        ? 'border-primary/50 bg-primary/10 text-white shadow-[0_0_12px_rgba(59,130,246,0.15)]'
+                        isEditing
+                          ? 'border-primary bg-primary/15 text-white shadow-[0_0_12px_rgba(59,130,246,0.25)]'
                           : 'border-white/10 bg-slate-900/60 text-slate-300 hover:border-white/20 hover:bg-slate-900'
                       }`}
                     >
@@ -276,6 +282,11 @@ export function SummarySidebar({
                           <span className="text-[9px] px-1.5 py-0.2 rounded border border-white/10 text-slate-400 bg-white/5 uppercase">
                             {item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
                           </span>
+                          {isEditing && (
+                            <span className="text-[9px] px-1.5 py-0.2 rounded bg-primary text-slate-950 font-extrabold uppercase">
+                              Aktiv
+                            </span>
+                          )}
                         </div>
                         {item.licenseNumber && (
                           <p className="text-[10px] text-slate-400 truncate mt-0.5">Lizenz: {item.licenseNumber}</p>
@@ -287,11 +298,12 @@ 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={() => {
+                          onClick={(e) => {
+                            e.stopPropagation()
                             editBasketItem(idx)
                             setIsOpen(true)
                           }}
-                        title="Bearbeiten"
+                          title="Name / Lizenz bearbeiten"
                         >
                           <Pencil className="w-3 h-3" />
                         </Button>
@@ -300,19 +312,23 @@ 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)}
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            deleteBasketItem(idx)
+                          }}
                           title="Löschen"
                         >
                           <Trash2 className="w-3 h-3" />
                         </Button>
                       </div>
                     </div>
-                ))}
+                  )
+                })}
               </div>
             </div>
           )}
         </CardContent>
-        <CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-2 border-t border-white/10 bg-slate-950/80">
+        <CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-1.5 border-t border-white/10 bg-slate-950/80">
           <Button
             type="button"
             variant="outline"