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

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}
-          disabled={isSubmitting || !acceptedTerms || finalItemsToShow.length === 0}
+          onClick={() => setShowConfirmModal(true)}
+          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>
   )
 }