feat(wizard): allow direct basket item switching in step 3 software configuration

shop/components/wizard/summary-sidebar.tsx

@@ -259,14 +259,20 @@ 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">
-              <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,14 +312,18 @@ 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>
           )}