From 46699e8bf32595949c85d526f9446d51ed7160e6 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Tue, 11 Aug 2026 17:30:17 +0200
Subject: [PATCH] style(wizard): refine step 3 UI styling and micro
 interactions

---
 shop/components/order-wizard.tsx           |  22 +--
 shop/components/wizard/step-software.tsx   |  26 ++--
 shop/components/wizard/summary-sidebar.tsx | 166 +++++++++++----------
 3 files changed, 108 insertions(+), 106 deletions(-)

diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index 3510362..d4a390f 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -932,12 +932,12 @@ export function OrderWizard({
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
             exit={{ opacity: 0, x: -20 }}
-            className="h-[calc(100vh-100px)] overflow-hidden"
+            className="h-[calc(100vh-100px)] 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-6 gap-6 h-full items-stretch">
+            <div className="grid grid-cols-1 lg:grid-cols-6 gap-4 h-full items-stretch">
 
                   {/* LEFT inside step 3: Categories Sidebar Menu */}
-                  <div className="lg:col-span-2 flex flex-col justify-start pr-4 space-y-4 overflow-y-auto">
+                  <div className="lg:col-span-2 flex flex-col justify-start p-3 pr-2 space-y-4 overflow-y-auto scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
                     <div>
                       <h1 className="text-xl font-extrabold tracking-tight mb-1 text-gradient">
                         Kategorien & Optionen
@@ -947,7 +947,7 @@ export function OrderWizard({
                       </p>
                     </div>
 
-                    <div className="flex flex-col gap-2">
+                    <div className="flex flex-col gap-2.5">
                   {visibleCategories.map((cat) => {
                     const sel = selections[cat.id]
                     const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
@@ -959,8 +959,8 @@ export function OrderWizard({
                         key={cat.id}
                         onClick={() => setActiveCategoryId(cat.id)}
                         className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${isActive
-                            ? 'bg-primary/10 border-primary text-white shadow-[0_0_20px_rgba(59,130,246,0.15)]'
-                            : 'bg-white/5 border-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10'
+                            ? 'bg-primary/10 border-primary text-white shadow-[0_0_20px_rgba(59,130,246,0.2)]'
+                            : 'bg-slate-900/50 border-white/5 text-slate-400 hover:bg-slate-900 hover:border-white/20 hover:text-white'
                           }`}
                       >
                         {/* Left glow line for active category */}
@@ -984,11 +984,11 @@ export function OrderWizard({
 
                         {/* Status indicators */}
                         {hasSelection ? (
-                          <span className="text-[10px] px-2 py-0.5 rounded-full font-medium shrink-0 border border-green-500/30 text-green-400 bg-green-500/10">
+                          <span className="text-[10px] px-2 py-0.5 rounded-full font-semibold shrink-0 border border-emerald-500/30 text-emerald-400 bg-emerald-500/10 shadow-sm">
                             Ausgewählt
                           </span>
                         ) : isRequired ? (
-                          <span className="text-[10px] px-2 py-0.5 rounded-full font-medium shrink-0 border border-red-500/30 text-red-400 bg-red-500/10">
+                          <span className="text-[10px] px-2 py-0.5 rounded-full font-semibold shrink-0 border border-amber-500/30 text-amber-400 bg-amber-500/10 shadow-sm">
                             Erforderlich
                           </span>
                         ) : null}
@@ -999,8 +999,8 @@ export function OrderWizard({
               </div>
 
               {/* CENTER: Scrollable Category Selection */}
-              <div className="lg:col-span-2 flex flex-col h-full overflow-hidden border-x border-white/5 px-4">
-                <div className="flex-1 overflow-y-auto pr-2 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
+              <div className="lg:col-span-2 flex flex-col h-full overflow-hidden border-x border-slate-800 p-2 px-3">
+                <div className="flex-1 overflow-y-auto pr-2 subpixel-antialiased scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
                   {/* Upgrade-Modus Hinweis-Banner */}
                   {upgradeMode && lockedDeviceId && (
                     <div className="mb-4 p-3 rounded-xl bg-primary/10 border border-primary/20 text-xs text-primary/90 flex items-start gap-2">
@@ -1032,7 +1032,7 @@ export function OrderWizard({
               </div>
 
               {/* RIGHT: Summary sidebar */}
-              <div className="lg:col-span-2 flex flex-col h-full overflow-hidden pl-2">
+              <div className="lg:col-span-2 flex flex-col h-full overflow-hidden p-2 pl-2">
                 <div className="flex-1 overflow-hidden">
                   <SummarySidebar
                     visibleCategories={visibleCategories}
diff --git a/shop/components/wizard/step-software.tsx b/shop/components/wizard/step-software.tsx
index 2bbecc4..1d94599 100644
--- a/shop/components/wizard/step-software.tsx
+++ b/shop/components/wizard/step-software.tsx
@@ -229,12 +229,12 @@ export function StepSoftware({
 
             {/* Modules */}
             {selectedProduct?.modules && selectedProduct.modules.length > 0 && (
-              <div className="mt-6 p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
-                <p className="text-sm font-bold text-white flex items-center gap-2">
-                  <span className="w-1.5 h-1.5 rounded-full bg-primary" />
+              <div className="mt-6 p-5 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-4 shadow-lg">
+                <p className="text-xs font-bold uppercase tracking-wider text-slate-400 flex items-center gap-2">
+                  <span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
                   Zusatzmodule für {selectedProduct.name}
                 </p>
-                <div className="space-y-2.5">
+                <div className="space-y-3">
                   {selectedProduct.modules.map(module => {
                     const isExistingLicense = existingModuleIds.includes(module.id)
                     const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
@@ -242,14 +242,14 @@ export function StepSoftware({
                     return (
                       <div
                         key={module.id}
-                        className={`flex flex-col p-4 rounded-xl border transition-all duration-200 ${
+                        className={`flex flex-col p-4 rounded-xl border transition-all duration-300 ${
                           isExistingLicense
-                            ? 'border-primary/20 bg-primary/5 opacity-75'
+                            ? 'border-slate-800 bg-slate-900/30 opacity-60 cursor-not-allowed'
                             : disabled
-                              ? 'border-white/5 bg-white/5 opacity-40'
+                              ? 'border-slate-800/40 bg-slate-900/20 opacity-40 cursor-not-allowed'
                               : checked
-                                ? 'border-primary/30 bg-primary/5'
-                                : 'border-white/5 bg-white/5 hover:bg-white/10'
+                                ? 'border-primary/40 bg-primary/10 shadow-[0_0_15px_rgba(59,130,246,0.1)]'
+                                : 'border-slate-800 bg-slate-900/50 hover:bg-slate-900 hover:border-slate-700'
                         }`}
                       >
                         <div className="flex items-start space-x-3">
@@ -258,19 +258,19 @@ export function StepSoftware({
                             checked={checked}
                             onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
                             disabled={disabled}
-                            className="rounded border-white/20 data-[state=checked]:bg-primary"
+                            className="rounded border-slate-700 data-[state=checked]:bg-primary data-[state=checked]:border-primary transition-colors"
                           />
                           <div className="flex-1">
                             <Label
                               htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
                               className={`font-semibold text-sm flex justify-between text-white ${
-                                isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+                                isExistingLicense ? 'cursor-not-allowed' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
                               }`}
                             >
-                              <span className="flex items-center gap-1.5 flex-wrap">
+                              <span className="flex items-center gap-2 flex-wrap">
                                 {module.name}
                                 {isExistingLicense && (
-                                  <span className="inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30 font-bold uppercase tracking-wider">
+                                  <span className="inline-flex items-center gap-1 text-[9px] px-2 py-0.5 rounded bg-slate-800 text-slate-400 border border-slate-700 font-semibold uppercase tracking-wider">
                                     <Lock className="w-2.5 h-2.5" /> Bereits lizenziert
                                   </span>
                                 )}
diff --git a/shop/components/wizard/summary-sidebar.tsx b/shop/components/wizard/summary-sidebar.tsx
index 464c01c..423a762 100644
--- a/shop/components/wizard/summary-sidebar.tsx
+++ b/shop/components/wizard/summary-sidebar.tsx
@@ -93,14 +93,21 @@ export function SummarySidebar({
 
   return (
     <div className="h-full flex flex-col">
-      <Card className="bg-[oklch(0.145_0.01_148)]/90 backdrop-blur-md border border-slate-800 shadow-[0_0_30px_rgba(0,0,0,0.5)] rounded-2xl overflow-hidden flex flex-col h-full">
-        <CardHeader className="shrink-0 pb-3">
-          <CardTitle className="text-white text-lg">Zusammenfassung</CardTitle>
+      <Card className="bg-slate-900/80 backdrop-blur-xl border border-white/10 shadow-2xl rounded-2xl overflow-hidden flex flex-col h-full">
+        <CardHeader className="shrink-0 pb-3 border-b border-white/5">
+          <CardTitle className="text-white text-base font-bold flex items-center justify-between">
+            <span>Zusammenfassung</span>
+            {basketItems.length > 0 && (
+              <span className="text-xs bg-sky-500/20 text-sky-300 border border-sky-500/30 px-2 py-0.5 rounded-full font-semibold">
+                {basketItems.length} {basketItems.length === 1 ? 'Kasse' : 'Kassen'}
+              </span>
+            )}
+          </CardTitle>
         </CardHeader>
-        <CardContent className="p-5 pt-0 flex-1 flex flex-col overflow-hidden gap-3">
+        <CardContent className="p-4 pt-3 flex-1 flex flex-col overflow-hidden gap-3">
           
           {/* Active Selections & Price - scrollable */}
-          <div className="space-y-3 flex-1 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
+          <div className="space-y-3 flex-1 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
             {visibleCategories.map(cat => {
               const sel = selections[cat.id]
               const selectedProds: Product[] = []
@@ -165,9 +172,9 @@ export function SummarySidebar({
             {/* Pricing block */}
             <Separator className="bg-white/10" />
             {oneTimeTotal > 0 && monthlyTotal > 0 ? (
-              <div className="space-y-3">
+              <div className="space-y-3 bg-slate-900/90 border border-white/10 rounded-xl p-3 shadow-inner">
                 <div className="space-y-1">
-                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Einmalig:</p>
+                  <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Einmalig:</p>
                   <div className="flex justify-between text-xs text-slate-400">
                     <span>Netto:</span>
                     <span className="tabular-nums">{fmt(oneTimeNet)}</span>
@@ -176,13 +183,13 @@ export function SummarySidebar({
                     <span>zzgl. 19% MwSt.:</span>
                     <span className="tabular-nums">{fmt(oneTimeTax)}</span>
                   </div>
-                  <div className="flex justify-between text-sm font-bold text-white">
-                    <span>Gesamt (brutto):</span>
-                    <span className="tabular-nums">{fmt(oneTimeGross)}</span>
+                  <div className="flex justify-between text-sm font-extrabold text-white pt-1">
+                    <span>Brutto:</span>
+                    <span className="tabular-nums text-sky-400">{fmt(oneTimeGross)}</span>
                   </div>
                 </div>
                 <div className="space-y-1 pt-2 border-t border-white/10">
-                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Monatlich:</p>
+                  <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Monatlich:</p>
                   <div className="flex justify-between text-xs text-slate-400">
                     <span>Netto:</span>
                     <span className="tabular-nums">{fmt(monthlyNet)} / mtl.</span>
@@ -191,39 +198,39 @@ export function SummarySidebar({
                     <span>zzgl. 19% MwSt.:</span>
                     <span className="tabular-nums">{fmt(monthlyTax)} / mtl.</span>
                   </div>
-                  <div className="flex justify-between text-sm font-bold text-white">
-                    <span>Gesamt (brutto):</span>
-                    <span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span>
+                  <div className="flex justify-between text-sm font-extrabold text-white pt-1">
+                    <span>Brutto:</span>
+                    <span className="tabular-nums text-sky-400">{fmt(monthlyGross)} / mtl.</span>
                   </div>
                 </div>
               </div>
             ) : oneTimeTotal > 0 ? (
-              <div className="space-y-1">
+              <div className="space-y-1 bg-slate-900/90 border border-white/10 rounded-xl p-3 shadow-inner">
                 <div className="flex justify-between text-xs text-slate-400">
-                  <span>Netto-Gesamtbetrag:</span>
+                  <span>Netto:</span>
                   <span className="tabular-nums">{fmt(oneTimeNet)}</span>
                 </div>
                 <div className="flex justify-between text-xs text-slate-400">
                   <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">
-                  <span>Gesamtbetrag (brutto):</span>
+                <div className="flex justify-between text-base font-extrabold text-sky-400 pt-1">
+                  <span>Gesamt (brutto):</span>
                   <span className="tabular-nums">{fmt(oneTimeGross)}</span>
                 </div>
               </div>
             ) : (
-              <div className="space-y-1">
+              <div className="space-y-1 bg-slate-900/90 border border-white/10 rounded-xl p-3 shadow-inner">
                 <div className="flex justify-between text-xs text-slate-400">
-                  <span>Netto-Gesamtbetrag:</span>
+                  <span>Netto:</span>
                   <span className="tabular-nums">{fmt(monthlyNet)} / mtl.</span>
                 </div>
                 <div className="flex justify-between text-xs text-slate-400">
                   <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">
-                  <span>Gesamtbetrag (brutto):</span>
+                <div className="flex justify-between text-base font-extrabold text-sky-400 pt-1">
+                  <span>Gesamt (brutto):</span>
                   <span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span>
                 </div>
               </div>
@@ -238,14 +245,14 @@ export function SummarySidebar({
               </div>
             )}
             {!allCategoriesFilled && (
-              <p className="text-xs text-destructive flex items-center gap-1">
-                <AlertCircle className="w-3 h-3" />
+              <p className="text-xs text-amber-400 flex items-center gap-1 bg-amber-500/10 p-2 rounded-lg border border-amber-500/20">
+                <AlertCircle className="w-3.5 h-3.5 shrink-0 text-amber-400" />
                 Bitte aus jeder Pflichtkategorie einen Artikel wählen.
               </p>
             )}
             {productValidationErrors.map((err, errIdx) => (
-              <p key={errIdx} className="text-xs text-destructive flex items-center gap-1">
-                <AlertCircle className="w-3 h-3 text-destructive" />
+              <p key={errIdx} className="text-xs text-red-400 flex items-center gap-1 bg-red-500/10 p-2 rounded-lg border border-red-500/20">
+                <AlertCircle className="w-3.5 h-3.5 shrink-0 text-red-400" />
                 {err}
               </p>
             ))}
@@ -253,85 +260,80 @@ export function SummarySidebar({
 
           {/* Kassen-Liste unten (selectable) */}
           {basketItems.length > 0 && (
-            <div className="shrink-0 pt-3 pb-2 mb-4 border-t border-white/10 space-y-3">
-              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Kassen ({basketItems.length}):</p>
-              <div className="flex flex-wrap gap-2 max-h-36 overflow-y-auto pr-1 pb-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
+            <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">
                 {basketItems.map((item, idx) => (
-                  <button
+                  <div
                     key={idx}
-                    onClick={() => setSelectedBasketIdx(selectedBasketIdx === idx ? null : idx)}
-                    className={`flex items-center gap-2 text-xs px-3 py-2.5 rounded-lg border transition-all duration-200 text-left group ${
+                    className={`flex items-center justify-between p-2.5 rounded-xl border transition-all duration-200 text-left bg-slate-900/60 ${
                       selectedBasketIdx === idx
-                        ? 'bg-sky-500/15 border-sky-500/40 text-white shadow-[0_0_10px_rgba(56,189,248,0.15)]'
+                        ? 'border-sky-500/50 bg-sky-500/10 text-white shadow-[0_0_12px_rgba(56,189,248,0.15)]'
                         : idx === editingIdx
-                        ? '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'
+                        ? 'border-blue-500/40 bg-blue-500/10 text-white'
+                        : 'border-white/10 text-slate-300 hover:border-white/20 hover:bg-slate-900'
                     }`}
                   >
-                    <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 className="flex-1 min-w-0 pr-2">
+                      <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">
+                          {item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
+                        </span>
+                      </div>
+                      {item.licenseNumber && (
+                        <p className="text-[10px] text-slate-400 truncate mt-0.5">{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={() => handleEditBasketItem(idx)}
+                        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)
+                          if (selectedBasketIdx === idx) setSelectedBasketIdx(null)
+                        }}
+                        title="Löschen"
+                      >
+                        <Trash2 className="w-3 h-3" />
+                      </Button>
+                    </div>
+                  </div>
                 ))}
               </div>
-
-              {/* Selected basket item actions */}
-              {selectedBasketIdx !== null && basketItems[selectedBasketIdx] && (
-                <div className="flex items-center gap-2 pt-2 border-t border-white/5">
-                  <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>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className="w-7 h-7 hover:bg-sky-500/20 text-sky-400 hover:text-sky-300"
-                    onClick={() => handleEditBasketItem(selectedBasketIdx)}
-                    title="Name / Lizenz bearbeiten"
-                  >
-                    <Pencil className="w-3.5 h-3.5" />
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className="w-7 h-7 hover:bg-red-500/20 text-red-400 hover:text-red-300"
-                    onClick={() => {
-                      deleteBasketItem(selectedBasketIdx)
-                      setSelectedBasketIdx(null)
-                    }}
-                    title="Kasse löschen"
-                  >
-                    <Trash2 className="w-3.5 h-3.5" />
-                  </Button>
-                </div>
-              )}
             </div>
           )}
         </CardContent>
-        <CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-0">
+        <CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-2 border-t border-white/10 bg-slate-950/80">
           <Button
             type="button"
             variant="outline"
-            className="w-full border-sky-500/40 bg-sky-500/10 text-sky-200 hover:bg-sky-500/20 hover:text-white gap-2 h-9 text-xs font-semibold shadow-sm"
+            className="w-full border-dashed border-primary/50 text-primary hover:bg-primary/10 transition-all rounded-xl h-9 text-xs font-bold gap-1.5 shadow-sm"
             onClick={() => setIsOpen(true)}
             disabled={!hasActiveSelection && isNextStepDisabled}
           >
-            <UserPlus className="w-3.5 h-3.5" /> {editingIdx !== null ? '💾 Kasse bearbeiten' : (hasActiveSelection ? 'Kasse speichern' : '+ Kasse anlegen')}
+            <UserPlus className="w-3.5 h-3.5" /> {editingIdx !== null ? '💾 Kasse speichern' : '+ Weitere Kasse hinzufügen'}
           </Button>
           <Button
-            className="w-full h-10 text-sm font-bold bg-gradient-to-r from-blue-600 to-sky-500 hover:from-blue-500 hover:to-sky-400"
+            className="w-full h-10 text-sm font-bold bg-gradient-to-r from-blue-600 via-sky-500 to-cyan-400 hover:opacity-90 shadow-[0_0_20px_rgba(56,189,248,0.3)] transition-all"
             onClick={nextStep}
             disabled={basketItems.length === 0 && isNextStepDisabled}
           >
-            Weiter <ChevronRight className="ml-1 w-4 h-4" />
+            Weiter zu Schritt 4 <ChevronRight className="ml-1 w-4 h-4" />
           </Button>
-          <Button variant="ghost" className="w-full text-slate-400 hover:text-white h-8 text-xs" onClick={prevStep}>
+          <Button variant="ghost" className="w-full text-slate-400 hover:text-white h-7 text-xs" onClick={prevStep}>
             Zurück zum Abrechnungsmodell
           </Button>
         </CardFooter>