feat(wizard): fix step 3 layout scrolling and add step 4 confirmation modal

shop/components/order-wizard.tsx

@@ -940,11 +940,11 @@ export function OrderWizard({
 
           {/* Step 3 Categories inside left sidebar */}
           {step === 3 && (
-            <div className="pt-4 border-t border-white/10 space-y-3">
+            <div className="pt-3 border-t border-white/10 flex flex-col min-h-0 max-h-[calc(100vh-22rem)] overflow-hidden">
-              <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400">
+              <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-2 shrink-0">
                 Kategorien
               </h3>
-              <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-1.5 flex-1 min-h-0 overflow-y-auto pr-1 pb-2 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
                 {visibleCategories.map((cat) => {
                   const sel = selections[cat.id]
                   const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
@@ -956,7 +956,7 @@ export function OrderWizard({
                     <button
                       key={cat.id}
                       onClick={() => setActiveCategoryId(cat.id)}
-                      className={`flex items-center gap-2.5 p-2.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${
+                      className={`flex items-center gap-2 p-2 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group shrink-0 ${
                         isMissingRequired
                           ? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
                           : isActive
@@ -968,7 +968,7 @@ export function OrderWizard({
                         <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
                       )}
 
-                      <div className={`p-1.5 rounded-lg transition-colors ${
+                      <div className={`p-1.5 rounded-lg transition-colors shrink-0 ${
                         isMissingRequired
                           ? 'bg-red-500/20 text-red-400'
                           : isActive
@@ -995,7 +995,7 @@ export function OrderWizard({
                           ✓
                         </span>
                       ) : isRequired ? (
-                        <span className="text-[9px] px-2 py-0.5 rounded-full font-extrabold shrink-0 border border-red-500 text-red-400 bg-red-500/20 animate-pulse tracking-wider">
+                        <span className="text-[9px] px-1.5 py-0.2 rounded-full font-extrabold shrink-0 border border-red-500 text-red-400 bg-red-500/20 animate-pulse tracking-wider">
                           FEHLT!
                         </span>
                       ) : null}

shop/components/wizard/step-software.tsx

@@ -73,19 +73,19 @@ export function StepSoftware({
   const selectedProduct = catProducts.find(p => p.id === sel?.productId) ?? null
 
   return (
-    <Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl overflow-hidden">
+    <Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl overflow-hidden min-h-0">
-      {/* ─── FIXED CARD HEADER ─── */}
+      {/* ─── FIXED CARD HEADER (shrink-0 mb-1) ─── */}
-      <CardHeader className="border-b border-white/10 pb-3 pt-4 px-5 shrink-0 bg-slate-950/40">
+      <CardHeader className="border-b border-white/10 py-2.5 px-4 shrink-0 bg-slate-950/40">
         <div className="flex items-center justify-between gap-3 flex-wrap">
           <div className="flex items-center gap-2.5">
-            <div className="p-2 rounded-xl bg-primary/20 text-primary border border-primary/30">
+            <div className="p-1.5 rounded-lg bg-primary/20 text-primary border border-primary/30 shrink-0">
               <ShoppingCart className="w-4 h-4" />
             </div>
             <div>
-              <CardTitle className="text-base font-bold text-white">
+              <CardTitle className="text-sm font-bold text-white leading-tight">
                 {currentCategory.name}
               </CardTitle>
-              <CardDescription className="text-xs text-slate-400 mt-0.5">
+              <CardDescription className="text-[11px] text-slate-400 mt-0.5 leading-tight">
                 {currentCategory.description || 'Passen Sie die Konfiguration für diese Kategorie an.'}
               </CardDescription>
             </div>
@@ -93,17 +93,17 @@ export function StepSoftware({
 
           {editingDeviceName && (
             <div className="flex items-center gap-2">
-              <Badge className="bg-amber-500/20 text-amber-400 border border-amber-500/30 text-xs font-bold gap-1.5 px-3 py-1 rounded-lg animate-pulse shrink-0">
+              <Badge className="bg-amber-500/20 text-amber-400 border border-amber-500/30 text-xs font-bold gap-1.5 px-2.5 py-0.5 rounded-lg animate-pulse shrink-0">
-                ✏️ Bearbeite Kasse: &quot;{editingDeviceName}&quot;
+                ✏️ Kasse: &quot;{editingDeviceName}&quot;
               </Badge>
               {onCancelEdit && (
                 <Button
                   size="sm"
                   variant="ghost"
                   onClick={onCancelEdit}
-                  className="h-7 text-xs text-slate-400 hover:text-white hover:bg-white/10 px-2"
+                  className="h-6 text-[11px] text-slate-400 hover:text-white hover:bg-white/10 px-2"
                 >
-                  <X className="w-3.5 h-3.5 mr-1" /> Neuer Entwurf
+                  <X className="w-3 h-3 mr-1" /> Neuer Entwurf
                 </Button>
               )}
             </div>
@@ -111,8 +111,8 @@ export function StepSoftware({
         </div>
       </CardHeader>
 
-      {/* ─── CONTENT AREA (Inherits scrolling from parent, no nested double scrollbar) ─── */}
+      {/* ─── SCROLLABLE CONTENT AREA (flex-1 min-h-0 min-w-0 overflow-y-auto pr-3 pb-12) ─── */}
-      <CardContent className="p-5 space-y-5">
+      <div className="flex-1 min-h-0 min-w-0 overflow-y-auto p-4 pr-3 pb-12 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
         <AnimatePresence mode="wait">
           <motion.div
             key={currentCategory.id}
@@ -120,49 +120,49 @@ export function StepSoftware({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -10 }}
             transition={{ duration: 0.2 }}
-            className="space-y-5"
+            className="space-y-4 min-w-0"
           >
             {/* Category selection status header */}
             {(() => {
               const isMissingRequired = currentCategory.is_required && !sel?.productId && (!sel?.productIds || sel.productIds.length === 0)
               return (
-                <div className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all ${
+                <div className={`flex items-center gap-3 p-3 rounded-xl border transition-all ${
                   isMissingRequired
                     ? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
                     : 'bg-white/5 border-white/10'
                 }`}>
-                  <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${
+                  <div className={`w-7 h-7 rounded-lg flex items-center justify-center shrink-0 ${
                     isMissingRequired ? 'bg-red-500/20 text-red-400' : 'bg-primary/20 text-primary'
                   }`}>
-                    <CategoryIcon icon={currentCategory.icon} className="w-4 h-4" />
+                    <CategoryIcon icon={currentCategory.icon} className="w-3.5 h-3.5" />
                   </div>
                   <div className="min-w-0 flex-1">
                     <h3 className="font-bold text-white text-xs flex items-center gap-2 flex-wrap">
                       <span>{currentCategory.name}</span>
                       {isMissingRequired && (
-                        <span className="text-[10px] bg-red-500/20 text-red-400 border border-red-500/40 px-2 py-0.5 rounded-full font-extrabold animate-pulse tracking-wider">
+                        <span className="text-[10px] bg-red-500/20 text-red-400 border border-red-500/40 px-2 py-0.2 rounded-full font-extrabold animate-pulse tracking-wider">
                           PFLICHTFELD AUSWÄHLEN!
                         </span>
                       )}
                     </h3>
-                    <p className="text-slate-400 text-[11px] mt-0.5">
+                    <p className="text-slate-400 text-[10px] mt-0.5">
                       {currentCategory.allow_multiselect ? 'Mehrfachauswahl möglich' : 'Einzelauswahl'}
                     </p>
                   </div>
                   {sel?.productIds && sel.productIds.length > 0 ? (
-                    <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full shrink-0">
+                    <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-[11px] rounded-full shrink-0">
                       <Check className="w-3 h-3 mr-1" /> {sel.productIds.length} Ausgewählt
                     </Badge>
                   ) : sel?.productId ? (
-                    <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full shrink-0">
+                    <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-[11px] rounded-full shrink-0">
                       <Check className="w-3 h-3 mr-1" /> Ausgewählt
                     </Badge>
                   ) : currentCategory.is_required ? (
-                    <Badge variant="destructive" className="ml-auto opacity-90 text-xs rounded-full bg-red-500/30 text-red-400 border border-red-500/50 animate-pulse font-extrabold shrink-0">
+                    <Badge variant="destructive" className="ml-auto opacity-90 text-[11px] rounded-full bg-red-500/30 text-red-400 border border-red-500/50 animate-pulse font-extrabold shrink-0">
                       <AlertCircle className="w-3 h-3 mr-1 text-red-400" /> Bitte auswählen!
                     </Badge>
                   ) : (
-                    <Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-xs rounded-full bg-white/5 shrink-0">
+                    <Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-[11px] rounded-full bg-white/5 shrink-0">
                       Optional
                     </Badge>
                   )}
@@ -170,53 +170,57 @@ export function StepSoftware({
               )
             })()}
 
-            {/* Products List */}
+            {/* Products List (grid-cols-1 xl:grid-cols-2 gap-3) */}
             {catProducts.length === 0 ? (
               <p className="text-slate-500 text-xs italic p-4 bg-white/5 rounded-xl border border-white/5 text-center">
                 Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden.
               </p>
             ) : currentCategory.allow_multiselect ? (
-              <div className="grid gap-2.5">
+              <div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
                 {catProducts.map(product => {
                   const isChecked = sel?.productIds?.includes(product.id) ?? false
                   const disabled = isProductDisabled(product, currentCategory.id)
                   return (
-                    <div key={product.id} className="relative">
+                    <div key={product.id} className="relative min-w-0">
                       <Label
                         onClick={() => !disabled && selectProduct(currentCategory.id, product.id)}
-                        className={`flex flex-col items-start p-3.5 rounded-xl border transition-all ${disabled
+                        className={`flex flex-col justify-between h-full p-3 rounded-xl border transition-all ${disabled
                           ? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
                           : isChecked
                             ? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.15)] ring-1 ring-primary/40'
                             : 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
                         }`}
                       >
-                        <div className="flex justify-between w-full items-center">
+                        <div className="min-w-0 w-full">
-                          <div className="flex items-center gap-2.5">
+                          <div className="flex justify-between items-start gap-2 w-full">
-                            <Checkbox
+                            <div className="flex items-start gap-2 min-w-0 flex-1">
-                              checked={isChecked}
+                              <Checkbox
-                              disabled={disabled}
+                                checked={isChecked}
-                              onCheckedChange={() => { }}
+                                disabled={disabled}
-                              className="border-white/20 data-[state=checked]:bg-primary rounded"
+                                onCheckedChange={() => { }}
-                            />
+                                className="border-white/20 data-[state=checked]:bg-primary rounded mt-0.5 shrink-0"
-                            <span className="font-bold text-xs text-white">{product.name}</span>
+                              />
-                            <span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
+                              <div className="min-w-0 flex-1">
-                              {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
+                                <span className="font-bold text-xs text-white block break-words">{product.name}</span>
+                                <span className={`inline-block text-[9px] px-1.5 py-0.2 mt-1 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
+                                  {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
+                                </span>
+                              </div>
+                            </div>
+                            <span className="text-primary font-bold text-xs shrink-0 text-right">
+                              {new Intl.NumberFormat('de-DE', {
+                                style: 'currency',
+                                currency: 'EUR',
+                              }).format(product.base_price)}{' '}
+                              <span className="text-[10px] text-slate-500 font-normal block">{billingLabel(product.billing_interval)}</span>
                             </span>
                           </div>
-                          <span className="text-primary font-bold text-xs">
+                          {product.description && (
-                            {new Intl.NumberFormat('de-DE', {
+                            <p className="text-[11px] text-slate-400 mt-2 font-normal leading-relaxed break-words">{product.description}</p>
-                              style: 'currency',
+                          )}
-                              currency: 'EUR',
-                            }).format(product.base_price)}{' '}
-                            <span className="text-[10px] text-slate-500 font-normal">{billingLabel(product.billing_interval)}</span>
-                          </span>
                         </div>
-                        {product.description && (
-                          <span className="text-[11px] text-slate-400 mt-1.5 pl-6 font-normal leading-relaxed">{product.description}</span>
-                        )}
                         {product.modules && product.modules.length > 0 && (
-                          <span className="text-[10px] text-slate-500 mt-1 pl-6 font-normal">
+                          <span className="text-[10px] text-slate-500 mt-2 font-normal block">
                             {product.modules.length} optionale Module verfügbar
                           </span>
                         )}
@@ -229,13 +233,13 @@ export function StepSoftware({
               <RadioGroup
                 value={sel?.productId ?? ''}
                 onValueChange={id => selectProduct(currentCategory.id, id)}
-                className="grid gap-2.5"
+                className="grid grid-cols-1 xl:grid-cols-2 gap-3"
               >
                 {catProducts.map(product => {
                   const disabled = isProductDisabled(product, currentCategory.id)
                   const isChecked = sel?.productId === product.id
                   return (
-                    <div key={product.id} className="relative">
+                    <div key={product.id} className="relative min-w-0">
                       <RadioGroupItem
                         value={product.id}
                         id={`${currentCategory.id}-${product.id}`}
@@ -244,33 +248,35 @@ export function StepSoftware({
                       />
                       <Label
                         htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
-                        className={`flex flex-col items-start p-3.5 rounded-xl border transition-all ${disabled
+                        className={`flex flex-col justify-between h-full p-3 rounded-xl border transition-all ${disabled
                           ? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
                           : isChecked
                             ? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.15)] ring-1 ring-primary/40'
                             : 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
                         }`}
                       >
-                        <div className="flex justify-between w-full items-center">
+                        <div className="min-w-0 w-full">
-                          <div className="flex items-center gap-2.5">
+                          <div className="flex justify-between items-start gap-2 w-full">
-                            <span className="font-bold text-xs text-white">{product.name}</span>
+                            <div className="min-w-0 flex-1">
-                            <span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
+                              <span className="font-bold text-xs text-white block break-words">{product.name}</span>
-                              {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
+                              <span className={`inline-block text-[9px] px-1.5 py-0.2 mt-1 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
+                                {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
+                              </span>
+                            </div>
+                            <span className="text-primary font-bold text-xs shrink-0 text-right">
+                              {new Intl.NumberFormat('de-DE', {
+                                style: 'currency',
+                                currency: 'EUR',
+                              }).format(product.base_price)}{' '}
+                              <span className="text-[10px] text-slate-500 font-normal block">{billingLabel(product.billing_interval)}</span>
                             </span>
                           </div>
-                          <span className="text-primary font-bold text-xs">
+                          {product.description && (
-                            {new Intl.NumberFormat('de-DE', {
+                            <p className="text-[11px] text-slate-400 mt-2 font-normal leading-relaxed break-words">{product.description}</p>
-                              style: 'currency',
+                          )}
-                              currency: 'EUR',
-                            }).format(product.base_price)}{' '}
-                            <span className="text-[10px] text-slate-500 font-normal">{billingLabel(product.billing_interval)}</span>
-                          </span>
                         </div>
-                        {product.description && (
-                          <span className="text-[11px] text-slate-400 mt-1.5 font-normal leading-relaxed">{product.description}</span>
-                        )}
                         {product.modules && product.modules.length > 0 && (
-                          <span className="text-[10px] text-slate-500 mt-1 font-normal">
+                          <span className="text-[10px] text-slate-500 mt-2 font-normal block">
                             {product.modules.length} optionale Module verfügbar
                           </span>
                         )}
@@ -283,12 +289,12 @@ export function StepSoftware({
 
             {/* Modules Section */}
             {selectedProduct?.modules && selectedProduct.modules.length > 0 && (
-              <div className="mt-5 p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3.5">
+              <div className="mt-4 p-3.5 rounded-xl bg-white/5 border border-white/10 space-y-3 min-w-0">
                 <p className="text-xs font-bold text-white flex items-center gap-2">
                   <span className="w-1.5 h-1.5 rounded-full bg-primary" />
                   Zusatzmodule für {selectedProduct.name}
                 </p>
-                <div className="space-y-2">
+                <div className="grid grid-cols-1 xl:grid-cols-2 gap-2.5">
                   {selectedProduct.modules.map(module => {
                     const isExistingLicense = existingModuleIds.includes(module.id)
                     const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
@@ -297,7 +303,7 @@ export function StepSoftware({
                       <div
                         key={module.id}
                         title={isExistingLicense ? "Dieses Modul ist auf dieser Kasse bereits aktiv und dauerhaft lizenziert." : undefined}
-                        className={`flex flex-col p-3.5 rounded-xl border transition-all duration-200 ${
+                        className={`flex flex-col justify-between p-3 rounded-xl border transition-all duration-200 min-w-0 ${
                           isExistingLicense
                             ? 'border-primary/20 bg-primary/5 opacity-75'
                             : disabled
@@ -307,30 +313,30 @@ export function StepSoftware({
                                 : 'border-white/5 bg-white/5 hover:bg-white/10'
                         }`}
                       >
-                        <div className="flex items-start space-x-3">
+                        <div className="flex items-start space-x-2.5 min-w-0">
                           <Checkbox
                             id={`mod-${currentCategory.id}-${module.id}`}
                             checked={checked}
                             onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
                             disabled={disabled}
-                            className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5"
+                            className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5 shrink-0"
                           />
                           <div className="flex-1 min-w-0">
                             <Label
                               htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
-                              className={`font-semibold text-xs flex justify-between text-white ${
+                              className={`font-semibold text-xs flex justify-between items-start text-white gap-2 ${
                                 isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
                               }`}
                             >
-                              <span className="flex items-center gap-1.5 flex-wrap">
+                              <span className="flex-1 min-w-0 break-words">
                                 {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-1.5 py-0.2 rounded bg-primary/20 text-primary border border-primary/30 font-bold uppercase tracking-wider ml-1 mt-0.5">
-                                    <Lock className="w-2.5 h-2.5" /> Bereits lizenziert
+                                    <Lock className="w-2.5 h-2.5" /> Lizenziert
                                   </span>
                                 )}
                               </span>
-                              <span className="text-primary font-bold text-xs ml-2 shrink-0">
+                              <span className="text-primary font-bold text-xs shrink-0 text-right">
                                 {isExistingLicense ? (
                                   <span className="text-slate-500 text-[11px] font-normal">inkl.</span>
                                 ) : (
@@ -342,7 +348,7 @@ export function StepSoftware({
                               </span>
                             </Label>
                             {module.description && (
-                              <p className="text-[11px] text-slate-400 mt-1 leading-relaxed">{module.description}</p>
+                              <p className="text-[11px] text-slate-400 mt-1 leading-relaxed break-words">{module.description}</p>
                             )}
                             {!isExistingLicense && disabled && (
                               <p className="text-[10px] text-red-400 mt-1 font-medium flex items-center gap-1">
@@ -359,8 +365,8 @@ export function StepSoftware({
 
                         {/* Scalable Quantity */}
                         {checked && !isExistingLicense && module.has_quantity && (
-                          <div className="flex items-center gap-3 mt-3 pl-7 pt-2.5 border-t border-white/5">
+                          <div className="flex items-center gap-3 mt-2.5 pl-6 pt-2 border-t border-white/5">
-                            <Label htmlFor={`qty-${module.id}`} className="text-[11px] text-slate-400 font-medium">Menge:</Label>
+                            <Label htmlFor={`qty-${module.id}`} className="text-[11px] text-slate-400 font-medium shrink-0">Menge:</Label>
                             <Input
                               id={`qty-${module.id}`}
                               type="number"
@@ -371,9 +377,9 @@ export function StepSoftware({
                                 const val = Math.max(1, parseInt(e.target.value) || 1)
                                 setModuleQuantities(prev => ({ ...prev, [module.id]: val }))
                               }}
-                              className="w-16 h-7 bg-white/5 border-white/10 text-white text-xs text-center rounded-lg focus:border-primary focus:ring-1 focus:ring-primary"
+                              className="w-14 h-6 bg-white/5 border-white/10 text-white text-xs text-center rounded focus:border-primary focus:ring-1 focus:ring-primary"
                             />
-                            <span className="text-[11px] text-slate-400">
+                            <span className="text-[10px] text-slate-400 truncate">
                               Gesamt:{' '}
                               <span className="text-primary font-bold">
                                 {new Intl.NumberFormat('de-DE', {
@@ -404,7 +410,7 @@ export function StepSoftware({
             )}
           </motion.div>
         </AnimatePresence>
-      </CardContent>
+      </div>
     </Card>
   )
 }

shop/components/wizard/step-summary.tsx

@@ -93,6 +93,7 @@ export function StepSummary({
 }: StepSummaryProps) {
   const [confirmDeleteIdx, setConfirmDeleteIdx] = useState<number | null>(null)
   const [acceptedTerms, setAcceptedTerms] = useState(false)
+  const [showConfirmModal, setShowConfirmModal] = useState(false)
 
   const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
 
@@ -442,29 +443,6 @@ export function StepSummary({
                 className="w-full p-3 rounded-xl bg-slate-950/70 border border-white/10 text-xs text-white placeholder:text-slate-500 focus:border-primary focus:outline-none transition-colors resize-none scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent"
               />
             </div>
-
-            {/* Lizenzbestimmungen & B2B-Workflow Checkbox */}
-            <div className="p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3">
-              <div className="flex items-start gap-3">
-                <Checkbox
-                  id="terms-checkbox"
-                  checked={acceptedTerms}
-                  onCheckedChange={(checked) => setAcceptedTerms(checked === true)}
-                  className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5"
-                />
-                <Label htmlFor="terms-checkbox" className="text-xs text-slate-300 leading-relaxed cursor-pointer select-none">
-                  Ich bestätige die Richtigkeit der Angaben und akzeptiere die Lizenzvereinbarungen sowie die{' '}
-                  <a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-white text-primary">
-                    Datenschutzerklärung
-                  </a>.
-                </Label>
-              </div>
-
-              <div className="p-2.5 rounded-xl bg-primary/10 border border-primary/20 text-[11px] text-slate-300 flex items-center gap-2">
-                <FileText className="w-4 h-4 text-primary shrink-0" />
-                <span>B2B-Freigabe: Nach Absenden wird die Lizenzierungsanfrage geprüft und freigegeben.</span>
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -490,10 +468,10 @@ export function StepSummary({
           </span>
         </div>
 
-        {/* Submit Button */}
+        {/* Submit Button -> opens modal */}
         <Button
-          onClick={handleSubmit}
+          onClick={() => setShowConfirmModal(true)}
-          disabled={isSubmitting || !acceptedTerms || finalItemsToShow.length === 0}
+          disabled={isSubmitting || finalItemsToShow.length === 0}
           className="w-full sm:w-auto bg-primary hover:bg-primary/90 text-white font-bold px-6 shadow-lg shadow-primary/20 h-9 text-xs gap-2"
         >
           {isSubmitting ? (
@@ -509,6 +487,104 @@ export function StepSummary({
           )}
         </Button>
       </div>
+
+      {/* ─── 4. BESTÄTIGUNGS-POPUP / MODAL VOR DEM ABSENDEN ─── */}
+      {showConfirmModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm animate-in fade-in duration-200">
+          <div className="w-full max-w-lg bg-slate-900 border border-white/10 rounded-2xl shadow-2xl p-6 space-y-5 text-white">
+            <div className="flex items-start justify-between gap-3">
+              <div className="flex items-center gap-3">
+                <div className="p-2.5 rounded-xl bg-primary/20 text-primary border border-primary/30">
+                  <ShieldCheck className="w-6 h-6" />
+                </div>
+                <div>
+                  <h3 className="text-base font-bold text-white">Richtigkeit & Freigabe bestätigen</h3>
+                  <p className="text-xs text-slate-400 mt-0.5">Letzter Schritt vor Übermittlung der Lizenzierung</p>
+                </div>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowConfirmModal(false)}
+                disabled={isSubmitting}
+                className="h-8 w-8 p-0 text-slate-400 hover:text-white rounded-lg"
+              >
+                <X className="w-4 h-4" />
+              </Button>
+            </div>
+
+            <div className="space-y-3 text-xs text-slate-300">
+              <div className="p-3.5 rounded-xl bg-white/5 border border-white/10 space-y-2">
+                <div className="flex justify-between items-center text-white font-semibold">
+                  <span>Endkunde:</span>
+                  <span className="text-primary">{selectedEndCustomer?.company_name || 'Kein Kunde gewählt'}</span>
+                </div>
+                <div className="flex justify-between items-center text-slate-400">
+                  <span>Anzahl Geräte:</span>
+                  <span className="text-white font-medium">{finalItemsToShow.length} Kassen</span>
+                </div>
+                <div className="flex justify-between items-center text-slate-400">
+                  <span>Gesamtbetrag (brutto):</span>
+                  <span className="text-white font-bold">{oneTimeTotal > 0 ? fmt(oneTimeGross) : `${fmt(monthlyGross)} / mtl.`}</span>
+                </div>
+              </div>
+
+              <div className="p-3.5 rounded-xl bg-slate-950/80 border border-white/10 space-y-3">
+                <div className="flex items-start gap-3">
+                  <Checkbox
+                    id="modal-terms-checkbox"
+                    checked={acceptedTerms}
+                    onCheckedChange={(checked) => setAcceptedTerms(checked === true)}
+                    className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5"
+                  />
+                  <Label htmlFor="modal-terms-checkbox" className="text-xs text-slate-300 leading-relaxed cursor-pointer select-none">
+                    Ich bestätige die Richtigkeit aller gemachten Angaben und akzeptiere die Lizenzvereinbarungen sowie die{' '}
+                    <a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-white text-primary">
+                      Datenschutzerklärung
+                    </a>.
+                  </Label>
+                </div>
+
+                <div className="p-2.5 rounded-lg bg-primary/10 border border-primary/20 text-[11px] text-slate-300 flex items-center gap-2">
+                  <FileText className="w-4 h-4 text-primary shrink-0" />
+                  <span>B2B-Freigabe: Nach Absenden wird die Lizenzierungsanfrage geprüft und freigegeben.</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-end gap-3 pt-2 border-t border-white/10">
+              <Button
+                variant="outline"
+                onClick={() => setShowConfirmModal(false)}
+                disabled={isSubmitting}
+                className="border-white/10 text-white hover:bg-white/10 text-xs h-9 px-4"
+              >
+                Abbrechen & Zurück
+              </Button>
+              <Button
+                onClick={async () => {
+                  await handleSubmit()
+                  setShowConfirmModal(false)
+                }}
+                disabled={!acceptedTerms || isSubmitting}
+                className="bg-primary hover:bg-primary/90 text-white font-bold text-xs h-9 px-5 gap-2 shadow-md shadow-primary/20"
+              >
+                {isSubmitting ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    Wird übermittelt...
+                  </>
+                ) : (
+                  <>
+                    <Check className="w-4 h-4" />
+                    Jetzt verbindlich absenden
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
     </Card>
   )
 }