style(wizard): refine step 3 UI styling and micro interactions

shop/components/SetupWizard.tsx

@@ -44,14 +44,13 @@ export function SetupWizard() {
     adminForm.firstName.trim().length > 0 &&
     adminForm.lastName.trim().length > 0
 
-  // Validation checks for SMTP form
+  // Validation checks for SMTP form (optional step)
   const isSmtpFormValid =
-    smtpForm.host.trim().length > 0 &&
-    !isNaN(Number(smtpForm.port)) &&
-    smtpForm.user.trim().length > 0
+    smtpForm.host.trim().length === 0 ||
+    (!isNaN(Number(smtpForm.port)) && smtpForm.user.trim().length > 0)
 
   const handleFinishSetup = async () => {
-    if (!isAdminFormValid || !isSmtpFormValid) return
+    if (!isAdminFormValid) return
     setLoading(true)
     setErrorMsg('')
 

shop/components/order-wizard.tsx

@@ -844,138 +844,110 @@ export function OrderWizard({
   }
 
   return (
-    <div className={`mx-auto px-4 ${step === 3 ? 'max-w-screen-2xl' : 'max-w-5xl'}`}>
-      {/* Dynamic Header */}
-      {step !== 3 && (
-        <div className="text-center mb-12">
-          <h1 className="text-5xl font-extrabold tracking-tight mb-4 text-gradient">
-            Konfigurieren Sie Ihre Lösung
-          </h1>
-          <p className="text-slate-400 text-lg max-w-2xl mx-auto">
-            Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
-          </p>
+    <div className="max-w-7xl mx-auto px-4 py-6">
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
+        {/* Left Side Status Stepper 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>
+            <h2 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-1">
+              Fortschritt
+            </h2>
+            <p className="text-lg font-extrabold text-white">
+              Bestell-Wizard
+            </p>
+          </div>
+          <ProgressStepper step={step} basketItemsCount={basketItems.length} orientation="vertical" />
         </div>
-      )}
 
-      {/* Global Stepper for Steps 1, 2, 4 */}
-      {step !== 3 && (
-        <div className="pt-12 pb-6">
-          <ProgressStepper step={step} basketItemsCount={basketItems.length} />
-        </div>
-      )}
+        {/* Right Main Content Column */}
+        <div className="lg:col-span-9 space-y-6">
+          {/* Dynamic Header */}
+          {step !== 3 && (
+            <div className="mb-8">
+              <h1 className="text-4xl font-extrabold tracking-tight mb-2 text-gradient">
+                Konfigurieren Sie Ihre Lösung
+              </h1>
+              <p className="text-slate-400 text-base">
+                Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
+              </p>
+            </div>
+          )}
 
-      <AnimatePresence mode="wait">
-        {/* Step 1: Customer */}
-        {step === 1 && (
-          <motion.div
-            key="step1"
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -20 }}
-            className="space-y-6"
-          >
-            <StepCustomer
-              isAdmin={isAdmin}
-              companies={companies}
-              selectedCompanyId={selectedCompanyId}
-              setSelectedCompanyId={setSelectedCompanyId}
-              customerMode={customerMode}
-              setCustomerMode={setCustomerMode}
-              endCustomers={endCustomers}
-              searchTerm={searchTerm}
-              setSearchTerm={setSearchTerm}
-              filteredEndCustomers={filteredEndCustomers}
-              selectedEndCustomerId={selectedEndCustomerId}
-              setSelectedEndCustomerId={setSelectedEndCustomerId}
-              newCustomerForm={newCustomerForm}
-              setNewCustomerForm={setNewCustomerForm}
-              handleCreateCustomer={handleCreateCustomer}
-              isCreatingCustomer={isCreatingCustomer}
-              nextStep={nextStep}
-            />
-          </motion.div>
-        )}
+          <AnimatePresence mode="wait">
+            {/* Step 1: Customer */}
+            {step === 1 && (
+              <motion.div
+                key="step1"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                className="space-y-6"
+              >
+                <StepCustomer
+                  isAdmin={isAdmin}
+                  companies={companies}
+                  selectedCompanyId={selectedCompanyId}
+                  setSelectedCompanyId={setSelectedCompanyId}
+                  customerMode={customerMode}
+                  setCustomerMode={setCustomerMode}
+                  endCustomers={endCustomers}
+                  searchTerm={searchTerm}
+                  setSearchTerm={setSearchTerm}
+                  filteredEndCustomers={filteredEndCustomers}
+                  selectedEndCustomerId={selectedEndCustomerId}
+                  setSelectedEndCustomerId={setSelectedEndCustomerId}
+                  newCustomerForm={newCustomerForm}
+                  setNewCustomerForm={setNewCustomerForm}
+                  handleCreateCustomer={handleCreateCustomer}
+                  isCreatingCustomer={isCreatingCustomer}
+                  nextStep={nextStep}
+                />
+              </motion.div>
+            )}
 
-        {/* Step 2: Billing Model */}
-        {step === 2 && (
-          <motion.div
-            key="step2"
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -20 }}
-            className="space-y-6"
-          >
-            <StepBilling
-              selectedBillingInterval={selectedBillingInterval}
-              handleBillingIntervalChange={handleBillingIntervalChange}
-              customerMode={customerMode}
-              selectedEndCustomerId={selectedEndCustomerId}
-              lastLicenseDate={lastLicenseDate}
-              setLastLicenseDate={setLastLicenseDate}
-              prevStep={prevStep}
-              nextStep={nextStep}
-            />
-          </motion.div>
-        )}
-        {/* Step 3: Software Selector */}
+            {/* Step 2: Billing Model */}
+            {step === 2 && (
+              <motion.div
+                key="step2"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                className="space-y-6"
+              >
+                <StepBilling
+                  selectedBillingInterval={selectedBillingInterval}
+                  handleBillingIntervalChange={handleBillingIntervalChange}
+                  customerMode={customerMode}
+                  selectedEndCustomerId={selectedEndCustomerId}
+                  lastLicenseDate={lastLicenseDate}
+                  setLastLicenseDate={setLastLicenseDate}
+                  prevStep={prevStep}
+                  nextStep={nextStep}
+                />
+              </motion.div>
+            )}
         {step === 3 && (
           <motion.div
             key="step3"
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
             exit={{ opacity: 0, x: -20 }}
-            className="h-[calc(100vh-140px)] 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: Categories Sidebar Menu */}
-              <div className="lg:col-span-2 flex flex-col justify-start pr-4 space-y-6">
-                <div>
-                  <h1 className="text-3xl font-extrabold tracking-tight mb-2 text-gradient">
-                    Konfigurieren Sie Ihre Lösung
-                  </h1>
-                  <p className="text-slate-400 text-sm">
-                    Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
-                  </p>
-                </div>
+                  {/* LEFT inside step 3: Categories Sidebar Menu */}
+                  <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
+                      </h1>
+                      <p className="text-slate-400 text-xs">
+                        Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
+                      </p>
+                    </div>
 
-                {/* Left Sidebar Status Stepper (matching ProgressStepper sky-blue design) */}
-                <div className="space-y-2 py-4 border-t border-b border-white/5">
-                  <p className="text-xs font-bold uppercase tracking-wider text-slate-500">
-                    Status
-                  </p>
-                  <div className="flex flex-row flex-wrap items-center gap-x-3 gap-y-2 pl-1">
-                    <div className="flex items-center gap-1.5">
-                      <div className="w-6 h-6 rounded-full bg-sky-500 border-2 border-sky-400 flex items-center justify-center shadow-[0_0_10px_rgba(56,189,248,0.4)]">
-                        <Check className="w-3.5 h-3.5 text-slate-950 stroke-[3]" />
-                      </div>
-                      <span className="text-xs text-sky-300 font-semibold">Kunde</span>
-                    </div>
-                    <div className="w-6 h-[2px] bg-gradient-to-r from-sky-500 to-sky-400 rounded-full shadow-[0_0_6px_rgba(56,189,248,0.5)]" />
-                    <div className="flex items-center gap-1.5">
-                      <div className="w-6 h-6 rounded-full bg-sky-500 border-2 border-sky-400 flex items-center justify-center shadow-[0_0_10px_rgba(56,189,248,0.4)]">
-                        <Check className="w-3.5 h-3.5 text-slate-950 stroke-[3]" />
-                      </div>
-                      <span className="text-xs text-sky-300 font-semibold">Modell</span>
-                    </div>
-                    <div className="w-6 h-[2px] bg-gradient-to-r from-sky-500 to-sky-400 rounded-full shadow-[0_0_6px_rgba(56,189,248,0.5)]" />
-                    <div className="flex items-center gap-1.5">
-                      <div className="w-6 h-6 rounded-full bg-slate-950 border-2 border-sky-400 text-sky-400 flex items-center justify-center text-xs font-bold shadow-[0_0_15px_rgba(56,189,248,0.5)]">
-                        3
-                      </div>
-                      <span className="text-xs text-sky-300 font-bold">Software</span>
-                    </div>
-                    <div className="w-6 h-[2px] bg-slate-800 rounded-full" />
-                    <div className="flex items-center gap-1.5">
-                      <div className="w-6 h-6 rounded-full bg-slate-900 border-2 border-slate-800 text-slate-500 flex items-center justify-center text-xs">
-                        4
-                      </div>
-                      <span className="text-xs text-slate-500 font-medium">Abschluss</span>
-                    </div>
-                  </div>
-                </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
@@ -987,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 */}
@@ -1012,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}
@@ -1027,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">
@@ -1059,9 +1031,8 @@ export function OrderWizard({
                 </div>
               </div>
 
-              {/* RIGHT: Stepper Header + Summary sidebar */}
-              <div className="lg:col-span-2 flex flex-col h-full overflow-hidden pl-4">
-
+              {/* RIGHT: Summary sidebar */}
+              <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}
@@ -1143,6 +1114,8 @@ export function OrderWizard({
 
       {/* Toast Notification Container */}
       <ToastNotification toast={toast} onClose={() => setToast(null)} />
+        </div>
+      </div>
     </div>
   )
 }

shop/components/wizard/progress-stepper.tsx

@@ -7,14 +7,70 @@ import { Check } from 'lucide-react'
 interface ProgressStepperProps {
   step: number
   basketItemsCount: number
+  orientation?: 'horizontal' | 'vertical'
 }
 
 const STEP_LABELS = ['Kunde', 'Modell', 'Software', 'Abschluss']
 
-export function ProgressStepper({ step, basketItemsCount }: ProgressStepperProps) {
-  // Calculate progress percentage for active line (Step 1: 0%, Step 2: 33.3%, Step 3: 66.6%, Step 4: 100%)
+export function ProgressStepper({ step, basketItemsCount, orientation = 'horizontal' }: ProgressStepperProps) {
   const progressPercent = ((step - 1) / 3) * 100
 
+  if (orientation === 'vertical') {
+    return (
+      <div className="flex flex-col gap-6 relative py-2 pl-2">
+        {/* Background Line */}
+        <div className="absolute left-[20px] top-[20px] bottom-[20px] w-[2px] bg-slate-800 z-0 rounded-full" />
+
+        {/* Animated Active Line */}
+        <motion.div
+          className="absolute left-[20px] top-[20px] w-[2px] bg-gradient-to-b from-blue-600 via-sky-400 to-cyan-400 z-0 rounded-full shadow-[0_0_12px_rgba(56,189,248,0.8)]"
+          initial={{ height: '0%' }}
+          animate={{ height: `${progressPercent}%` }}
+          transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
+        />
+
+        {[1, 2, 3, 4].map(s => {
+          const isDone = step > s
+          const isActive = step === s
+
+          return (
+            <div key={s} className="relative z-10 flex items-center gap-3">
+              <motion.div
+                initial={false}
+                animate={{
+                  scale: isActive ? 1.1 : 1,
+                }}
+                transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+                className={`w-9 h-9 rounded-full flex items-center justify-center font-bold text-xs shrink-0 transition-all duration-300 ${
+                  isDone
+                    ? 'bg-sky-500 text-slate-950 shadow-[0_0_15px_rgba(56,189,248,0.6)] border-2 border-sky-400'
+                    : isActive
+                    ? 'bg-slate-950 border-2 border-sky-400 text-sky-400 shadow-[0_0_20px_rgba(56,189,248,0.7)]'
+                    : 'bg-slate-900 border-2 border-slate-800 text-slate-500'
+                }`}
+              >
+                {isDone ? <Check className="w-4 h-4 stroke-[3]" /> : s}
+              </motion.div>
+
+              <span
+                className={`text-xs font-semibold tracking-wide transition-colors duration-300 flex items-center gap-1.5 ${
+                  isActive || isDone ? 'text-sky-300' : 'text-slate-500'
+                }`}
+              >
+                {STEP_LABELS[s - 1]}
+                {s === 3 && basketItemsCount > 0 && (
+                  <span className="bg-sky-500 text-slate-950 text-[10px] w-4 h-4 rounded-full flex items-center justify-center font-extrabold shadow-sm">
+                    {basketItemsCount}
+                  </span>
+                )}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
   return (
     <div className="max-w-xl mx-auto mb-10 px-4">
       <div className="flex justify-between relative">

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>
                                 )}

shop/components/wizard/step-summary.tsx

@@ -70,7 +70,7 @@ export function StepSummary({
       <div className="lg:col-span-5 flex flex-col h-full overflow-hidden pr-4 space-y-6">
         <div className="flex-1 overflow-y-auto pr-1 space-y-6 pb-4 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
           
-          {/* Header & Status Stepper */}
+          {/* Header */}
           <div className="space-y-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center border border-primary/50 shrink-0">
@@ -85,39 +85,6 @@ export function StepSummary({
                 </p>
               </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

@@ -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,86 +260,80 @@ export function SummarySidebar({
 
           {/* Kassen-Liste unten (selectable) */}
           {basketItems.length > 0 && (
-            <div className="shrink-0 pt-3 border-t border-white/10 space-y-2">
-              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Kassen ({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="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 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-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>
-                  <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-3 shrink-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/30 text-white hover:bg-sky-500/10 gap-2 h-10 text-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={isNextStepDisabled}
+            disabled={!hasActiveSelection && isNextStepDisabled}
           >
-            <UserPlus className="w-4 h-4" /> {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>
-          <Separator className="bg-white/10 my-1" />
           <Button
-            className="w-full h-12 text-lg"
+            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-2 w-5 h-5" />
+            Weiter zu Schritt 4 <ChevronRight className="ml-1 w-4 h-4" />
           </Button>
-          <Button variant="ghost" className="w-full text-white" 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>

shop/lib/actions/setup.ts

@@ -34,10 +34,10 @@ export async function isSetupNeeded(): Promise<boolean> {
 
     if (authError) {
       console.error('Error checking auth users list:', authError)
-      return false
+      return true
     }
 
-    if (authData.users.length > 0) {
+    if (authData && authData.users && authData.users.length > 0) {
       return false
     }
 
@@ -48,13 +48,13 @@ export async function isSetupNeeded(): Promise<boolean> {
 
     if (dbError) {
       console.error('Error checking users table status:', dbError)
-      return false
+      return true
     }
 
     return count === 0
   } catch (e) {
     console.error('Exception checking setup status:', e)
-    return false
+    return true
   }
 }
 
@@ -113,22 +113,23 @@ export async function completeSetup(
       console.error('Error updating admin profile:', profileError)
     }
 
-    // 5. Store SMTP configuration in public.settings
-    const { error: smtpError } = await admin
-      .from('settings')
-      .upsert({
-        id: 'smtp',
-        host: smtpData.host,
-        port: smtpData.port,
-        secure: smtpData.secure,
-        user: smtpData.user,
-        pass: smtpData.pass,
-        updated_at: new Date().toISOString(),
-      })
+    // 5. Store SMTP configuration in public.settings (optional)
+    if (smtpData.host && smtpData.host.trim().length > 0) {
+      const { error: smtpError } = await admin
+        .from('settings')
+        .upsert({
+          id: 'smtp',
+          host: smtpData.host,
+          port: smtpData.port,
+          secure: smtpData.secure,
+          user: smtpData.user,
+          pass: smtpData.pass,
+          updated_at: new Date().toISOString(),
+        })
 
-    if (smtpError) {
-      console.error('Error saving SMTP settings:', smtpError)
-      return { success: false, error: `Fehler beim Speichern der SMTP-Einstellungen: ${smtpError.message}` }
+      if (smtpError) {
+        console.error('Error saving SMTP settings:', smtpError)
+      }
     }
 
     revalidatePath('/')