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,61 +258,77 @@ 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) => {
-                  <div
+                  const isEditing = idx === editingIdx
-                    key={idx}
+                  return (
-                    className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left ${
+                    <div
-                      idx === editingIdx
+                      key={idx}
-                        ? 'border-primary/50 bg-primary/10 text-white shadow-[0_0_12px_rgba(59,130,246,0.15)]'
+                      onClick={() => editBasketItem(idx)}
-                        : 'border-white/10 bg-slate-900/60 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 cursor-pointer group ${
-                    }`}
+                        isEditing
-                  >
+                          ? 'border-primary bg-primary/15 text-white shadow-[0_0_12px_rgba(59,130,246,0.25)]'
-                    <div className="flex-1 min-w-0 pr-2">
+                          : 'border-white/10 bg-slate-900/60 text-slate-300 hover:border-white/20 hover:bg-slate-900'
-                      <div className="flex items-center gap-1.5">
+                      }`}
-                        <span className="font-bold text-xs text-white truncate">{item.deviceName}</span>
+                    >
-                        <span className="text-[9px] px-1.5 py-0.2 rounded border border-white/10 text-slate-400 bg-white/5 uppercase">
+                      <div className="flex-1 min-w-0 pr-2">
-                          {item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
+                        <div className="flex items-center gap-1.5">
-                        </span>
+                          <span className="font-bold text-xs text-white truncate">{item.deviceName}</span>
+                          <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>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-1 shrink-0">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="w-6 h-6 hover:bg-primary/20 text-slate-400 hover:text-primary rounded-lg transition-colors"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            editBasketItem(idx)
+                            setIsOpen(true)
+                          }}
+                          title="Name / Lizenz bearbeiten"
+                        >
+                          <Pencil className="w-3 h-3" />
+                        </Button>
+                        <Button
+                          type="button"
+                          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={(e) => {
+                            e.stopPropagation()
+                            deleteBasketItem(idx)
+                          }}
+                          title="Löschen"
+                        >
+                          <Trash2 className="w-3 h-3" />
+                        </Button>
                       </div>
-                      {item.licenseNumber && (
-                        <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">
+                  )
-                      <Button
+                })}
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        className="w-6 h-6 hover:bg-primary/20 text-slate-400 hover:text-primary rounded-lg transition-colors"
-                        onClick={() => {
-                          editBasketItem(idx)
-                          setIsOpen(true)
-                        }}
-                        title="Bearbeiten"
-                      >
-                        <Pencil className="w-3 h-3" />
-                      </Button>
-                      <Button
-                        type="button"
-                        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)}
-                        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"