refactor(wizard): revert basket to direct edit/delete layout

shop/components/wizard/summary-sidebar.tsx

@@ -81,13 +81,6 @@ export function SummarySidebar({
   prevStep,
 }: SummarySidebarProps) {
   const [isOpen, setIsOpen] = React.useState(false)
-  const [selectedBasketIdx, setSelectedBasketIdx] = React.useState<number | null>(null)
-
-  // When editing a basket item via pencil, open the modal for that item
-  const handleEditBasketItem = (idx: number) => {
-    editBasketItem(idx)
-    setIsOpen(true)
-  }
 
   const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
 
@@ -207,7 +200,7 @@ export function SummarySidebar({
                   <span>zzgl. 19% MwSt.:</span>
                   <span className="tabular-nums">{fmt(oneTimeTax)}</span>
                 </div>
-                <div className="flex justify-between text-base font-bold text-sky-400">
+                <div className="flex justify-between text-base font-bold text-primary">
                   <span>Gesamtbetrag (brutto):</span>
                   <span className="tabular-nums">{fmt(oneTimeGross)}</span>
                 </div>
@@ -222,7 +215,7 @@ export function SummarySidebar({
                   <span>zzgl. 19% MwSt.:</span>
                   <span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span>
                 </div>
-                <div className="flex justify-between text-base font-bold text-sky-400">
+                <div className="flex justify-between text-base font-bold text-primary">
                   <span>Gesamtbetrag (brutto):</span>
                   <span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span>
                 </div>
@@ -251,48 +244,31 @@ export function SummarySidebar({
             ))}
           </div>
 
-          {/* Kassen-Liste unten (selectable) */}
+          {/* Warenkorb List (Scrollable) */}
           {basketItems.length > 0 && (
-            <div className="shrink-0 pt-3 border-t border-white/10 space-y-2">
+            <div className="flex-1 flex flex-col min-h-0 pt-3 border-t border-white/10 space-y-2 overflow-hidden">
-              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
+              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider shrink-0">Warenkorb ({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-1 overflow-y-auto pr-1 space-y-1.5 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
                 {basketItems.map((item, idx) => (
-                  <button
+                  <div key={idx} className={`flex justify-between items-center text-xs bg-white/5 p-2 rounded border transition-all duration-300 ${idx === editingIdx ? 'border-primary/50 shadow-[0_0_10px_rgba(var(--oklch-primary),0.3)]' : 'border-white/10'}`}>
-                    key={idx}
+                    <div className="flex flex-col">
-                    onClick={() => setSelectedBasketIdx(selectedBasketIdx === idx ? null : idx)}
+                      <span className="text-white font-medium">{item.deviceName}</span>
-                    className={`flex items-center gap-2 text-xs px-3 py-2 rounded-lg border transition-all duration-200 text-left group ${
+                      <span className="text-[10px] text-slate-400 capitalize">
-                      selectedBasketIdx === idx
+                        {item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
-                        ? 'bg-sky-500/15 border-sky-500/40 text-white shadow-[0_0_10px_rgba(56,189,248,0.15)]'
+                        {item.licenseNumber ? ` · Lizenz: ${item.licenseNumber}` : ''}
-                        : idx === editingIdx
+                      </span>
-                        ? 'bg-blue-500/10 border-blue-500/30 text-white'
-                        : 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-white'
-                    }`}
-                  >
-                    <span className="font-medium truncate max-w-[120px]">{item.deviceName}</span>
-                    {item.licenseNumber && (
-                      <span className="text-[10px] text-slate-500 truncate max-w-[80px]">{item.licenseNumber}</span>
-                    )}
-                  </button>
-                ))}
-              </div>
-
-              {/* Selected basket item actions */}
-              {selectedBasketIdx !== null && basketItems[selectedBasketIdx] && (
-                <div className="flex items-center gap-2 pt-1">
-                  <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">
-                      {basketItems[selectedBasketIdx].billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
-                      {basketItems[selectedBasketIdx].licenseNumber ? ` · ${basketItems[selectedBasketIdx].licenseNumber}` : ''}
-                    </p>
                     </div>
+                    <div className="flex items-center gap-1.5">
                       <Button
                         type="button"
                         variant="ghost"
                         size="icon"
-                    className="w-7 h-7 hover:bg-sky-500/20 text-sky-400 hover:text-sky-300"
+                        className="w-7 h-7 hover:bg-white/10 text-slate-400 hover:text-white"
-                    onClick={() => handleEditBasketItem(selectedBasketIdx)}
+                        onClick={() => {
-                    title="Name / Lizenz bearbeiten"
+                          editBasketItem(idx)
+                          setIsOpen(true)
+                        }}
+                        title="Kasse bearbeiten"
                       >
                         <Pencil className="w-3.5 h-3.5" />
                       </Button>
@@ -300,17 +276,16 @@ export function SummarySidebar({
                         type="button"
                         variant="ghost"
                         size="icon"
-                    className="w-7 h-7 hover:bg-red-500/20 text-red-400 hover:text-red-300"
+                        className="w-7 h-7 hover:bg-white/10 text-destructive hover:text-red-400"
-                    onClick={() => {
+                        onClick={() => deleteBasketItem(idx)}
-                      deleteBasketItem(selectedBasketIdx)
-                      setSelectedBasketIdx(null)
-                    }}
                         title="Kasse löschen"
                       >
                         <Trash2 className="w-3.5 h-3.5" />
                       </Button>
                     </div>
-              )}
+                  </div>
+                ))}
+              </div>
             </div>
           )}
         </CardContent>
@@ -318,7 +293,7 @@ export function SummarySidebar({
           <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-primary/30 text-white hover:bg-primary/10 gap-2 h-10 text-sm"
             onClick={() => setIsOpen(true)}
             disabled={isNextStepDisabled}
           >