refactor(wizard): optimize ui ux with no-page-scroll and hub flow

shop/app/admin/einstellungen/firmendaten/page.tsx

@@ -88,9 +88,8 @@ export default function FirmendatenPage() {
       </div>
 
       {msg && (
-        <div className={`p-3.5 rounded-xl text-xs font-medium border ${
-          msgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
-        }`}>
+        <div className={`p-3.5 rounded-xl text-xs font-medium border ${msgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
+          }`}>
           {msg}
         </div>
       )}
@@ -123,7 +122,7 @@ export default function FirmendatenPage() {
           <Input
             value={branding.developerFooter || ''}
             onChange={(e) => setBranding({ ...branding, developerFooter: e.target.value })}
-            placeholder="B2B Shop made by hephex"
+            placeholder="CASPOS Shop"
             className="bg-slate-950/80 border-slate-800 text-white text-sm"
           />
         </div>

shop/components/order-wizard.tsx

@@ -202,7 +202,7 @@ export function OrderWizard({
 
   // Formular-State für neuen Endkunden
   const [newCustomerForm, setNewCustomerForm] = useState({
-    company_name: '', vat_id: '', first_name: '', last_name: '', street: '', zip: '', city: '',
+    company_name: '', vat_id: '', email: '', first_name: '', last_name: '', street: '', zip: '', city: '',
     bank_iban: '', bank_bic: '', bank_name: '', bank_owner: '',
   })
   const [isCreatingCustomer, setIsCreatingCustomer] = useState(false)
@@ -614,7 +614,7 @@ export function OrderWizard({
       setSelectedEndCustomerId(created.id)
       setCustomerMode('select')
       setNewCustomerForm({
-        company_name: '', vat_id: '', first_name: '', last_name: '', street: '', zip: '', city: '',
+        company_name: '', vat_id: '', email: '', first_name: '', last_name: '', street: '', zip: '', city: '',
         bank_iban: '', bank_bic: '', bank_name: '', bank_owner: '',
       })
     } catch (e: any) {
@@ -624,7 +624,7 @@ export function OrderWizard({
     }
   }
 
-  const addToBasket = async () => {
+  const addToBasket = async (proceedToSummary: boolean = false) => {
     const normLicense = licenseNumber.trim().toUpperCase()
     if (normLicense) {
       const isDuplicateInBasket = basketItems.some(
@@ -676,6 +676,11 @@ export function OrderWizard({
       }
     })
     setSelections(resetSels)
+
+    if (proceedToSummary) {
+      setDirection(1)
+      setStep(4)
+    }
   }
 
   const resetFormForNewDevice = () => {
@@ -1098,6 +1103,8 @@ export function OrderWizard({
                     existingModuleIds={existingModuleIds}
                     activeCategoryId={activeCategoryId}
                     editingDeviceName={editingIdx !== null ? (basketItems[editingIdx]?.deviceName || `Kasse ${editingIdx + 1}`) : null}
+                    onCancelEdit={resetFormForNewDevice}
+                    productValidationErrors={productValidationErrors}
                   />
                 </div>
               </div>
@@ -1122,19 +1129,15 @@ export function OrderWizard({
                     updatePriceModifier={updatePriceModifier}
                     allCategoriesFilled={allCategoriesFilled}
                     productValidationErrors={productValidationErrors}
-                    basketItems={basketItems}
                     editingIdx={editingIdx}
-                    editBasketItem={editBasketItem}
-                    deleteBasketItem={deleteBasketItem}
                     deviceName={deviceName}
                     setDeviceName={setDeviceName}
                     licenseNumber={licenseNumber}
                     setLicenseNumber={setLicenseNumber}
-                    addToBasket={addToBasket}
+                    onSaveAndProceed={() => addToBasket(true)}
                     isNextStepDisabled={isNextStepDisabled}
                     hasActiveSelection={hasActiveSelection}
                     showValidationWarning={showValidationWarning}
-                    nextStep={nextStep}
                     prevStep={prevStep}
                   />
                 </div>

shop/components/wizard/step-billing.tsx

@@ -1,11 +1,24 @@
 'use client'
 
 import React from 'react'
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
+import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
 import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { CreditCard, Calendar, Check, ChevronLeft, ChevronRight } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import {
+  CreditCard,
+  Calendar,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  RefreshCw,
+  ShoppingBag,
+  ShieldCheck,
+  CheckCircle2,
+  Info,
+} from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
 
 interface StepBillingProps {
   selectedBillingInterval: 'one_time' | 'monthly'
@@ -28,105 +41,207 @@ export function StepBilling({
   prevStep,
   nextStep,
 }: StepBillingProps) {
+  // Optionale Validierung falls Datum bei Kauf Pflicht wäre, oder prüfen ob Modell gewählt ist
+  const isOneTime = selectedBillingInterval === 'one_time'
+  const isMonthly = selectedBillingInterval === 'monthly'
+
   return (
-    <Card className="glass-dark border-white/10">
-      <CardHeader>
-        <CardTitle className="text-2xl flex items-center gap-2 text-white">
-          <CreditCard className="w-6 h-6 text-primary" />
-          Abrechnungsmodell wählen
-        </CardTitle>
-        <CardDescription className="text-slate-300">
-          Möchten Sie Lizenzen dauerhaft kaufen oder monatlich mieten?
-        </CardDescription>
+    <Card className="glass-dark border-white/10 h-[calc(100vh-8.5rem)] flex flex-col justify-between overflow-hidden relative">
+      {/* ─── 1. FIXED HEADER (shrink-0) ─── */}
+      <CardHeader className="pb-3 pt-4 px-6 shrink-0 border-b border-white/10 bg-slate-950/40 space-y-0">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <CardTitle className="text-xl font-bold flex items-center gap-2 text-white">
+              <CreditCard className="w-5 h-5 text-primary" />
+              Abrechnungsmodell wählen
+            </CardTitle>
+            <CardDescription className="text-xs text-slate-300 mt-0.5">
+              Wählen Sie zwischen monatlicher Miete (Abonnement) oder einmaligem Softwarekauf.
+            </CardDescription>
+          </div>
+          <Badge variant="outline" className="border-primary/30 text-primary bg-primary/10 text-xs px-3 py-1">
+            Schritt 2 von 4
+          </Badge>
+        </div>
       </CardHeader>
-      <CardContent>
-        <div className="grid md:grid-cols-2 gap-6 py-4">
-          {/* Option 1: Kauf */}
-          <div
-            onClick={() => handleBillingIntervalChange('one_time')}
-            className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between min-h-[12rem] h-auto hover:shadow-[0_0_20px_rgba(255,255,255,0.05)] ${selectedBillingInterval === 'one_time'
-                ? 'border-primary bg-primary/10 shadow-[0_0_25px_rgba(59,130,246,0.2)]'
-                : 'border-white/5 bg-white/5 hover:border-white/20'
+
+      {/* ─── 2. SCROLLABLE MIDDLE CONTENT (flex-1 min-h-0 overflow-y-auto) ─── */}
+      <div className="flex-1 min-h-0 overflow-y-auto p-6 flex flex-col justify-center max-w-4xl mx-auto w-full scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
+        <div className="space-y-6 my-auto">
+          {/* Abrechnungsmodell Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+            {/* Option 1: Miete / Abo */}
+            <div
+              onClick={() => handleBillingIntervalChange('monthly')}
+              className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between min-h-[14rem] select-none ${
+                isMonthly
+                  ? 'border-primary bg-primary/10 shadow-[0_0_20px_rgba(59,130,246,0.2)] ring-1 ring-primary/50'
+                  : 'border-white/5 bg-white/5 hover:border-white/20 hover:bg-white/[0.07]'
               }`}
-          >
-            <div className="flex flex-col justify-between h-full">
+            >
               <div>
-                <div className="flex items-center gap-3 mb-3">
-                  <div className={`p-3 rounded-xl ${selectedBillingInterval === 'one_time' ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400'}`}>
-                    <CreditCard className="w-6 h-6" />
+                <div className="flex items-center justify-between gap-3 mb-4">
+                  <div className={`p-3.5 rounded-xl ${isMonthly ? 'bg-primary/20 text-primary border border-primary/30' : 'bg-white/5 text-slate-400 border border-white/10'}`}>
+                    <RefreshCw className={`w-6 h-6 ${isMonthly ? 'animate-spin-slow' : ''}`} />
                   </div>
-                  <h3 className="text-lg font-bold text-white">Einmaliger Kauf</h3>
+                  {isMonthly && (
+                    <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white shadow-md shadow-primary/30">
+                      <Check className="w-3.5 h-3.5" />
+                    </div>
+                  )}
                 </div>
-                <p className="text-slate-400 text-sm">
-                  Einmalige Anschaffungskosten für die Softwarelizenz. Keine monatlichen Mietgebühren.
+
+                <div className="space-y-1">
+                  <div className="flex items-center gap-2">
+                    <h3 className="text-lg font-bold text-white">Miete / Abo</h3>
+                    <Badge variant="outline" className="text-[10px] bg-blue-500/10 border-blue-500/30 text-blue-400">
+                      Empfohlen
+                    </Badge>
+                  </div>
+                  <p className="text-xs font-medium text-slate-300">
+                    Fortlaufende monatliche Abrechnung
+                  </p>
+                </div>
+
+                <p className="text-slate-400 text-xs mt-3 leading-relaxed">
+                  Maximale Flexibilität: Inklusive sämtlicher Software-Updates, Cloud-Dienste und technischem Support. Jederzeit kündbar oder anpassbar.
                 </p>
               </div>
 
-              {selectedBillingInterval === 'one_time' && (
-                <div className="absolute top-4 right-4 w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white">
-                  <Check className="w-4 h-4" />
-                </div>
-              )}
+              <div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between text-xs">
+                <span className="text-slate-400">Zahlungsintervall:</span>
+                <span className="text-primary font-semibold">monatlich</span>
+              </div>
+            </div>
 
-              {selectedBillingInterval === 'one_time' && customerMode === 'select' && selectedEndCustomerId && (
-                <div 
-                  onClick={(e) => e.stopPropagation()} 
-                  className="mt-4 pt-4 border-t border-white/5 space-y-2 cursor-default"
-                >
-                  <Label htmlFor="last-license-date" className="text-white text-xs font-medium flex items-center gap-2">
-                    <Calendar className="w-3.5 h-3.5 text-primary" />
-                    Datum der letzten CASPOS-Lizenz
-                  </Label>
-                  <Input
-                    id="last-license-date"
-                    type="date"
-                    value={lastLicenseDate}
-                    onChange={e => setLastLicenseDate(e.target.value)}
-                    className="bg-[#0b1329] border-white/10 text-white text-xs h-8 focus:border-primary"
-                  />
-                  <p className="text-[10px] text-slate-500">
-                    Ermöglicht automatische Ermittlung von Update-Gebühren.
+            {/* Option 2: Kauf / Einmalkauf */}
+            <div
+              onClick={() => handleBillingIntervalChange('one_time')}
+              className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between min-h-[14rem] select-none ${
+                isOneTime
+                  ? 'border-primary bg-primary/10 shadow-[0_0_20px_rgba(59,130,246,0.2)] ring-1 ring-primary/50'
+                  : 'border-white/5 bg-white/5 hover:border-white/20 hover:bg-white/[0.07]'
+              }`}
+            >
+              <div>
+                <div className="flex items-center justify-between gap-3 mb-4">
+                  <div className={`p-3.5 rounded-xl ${isOneTime ? 'bg-primary/20 text-primary border border-primary/30' : 'bg-white/5 text-slate-400 border border-white/10'}`}>
+                    <ShoppingBag className="w-6 h-6" />
+                  </div>
+                  {isOneTime && (
+                    <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white shadow-md shadow-primary/30">
+                      <Check className="w-3.5 h-3.5" />
+                    </div>
+                  )}
+                </div>
+
+                <div className="space-y-1">
+                  <div className="flex items-center gap-2">
+                    <h3 className="text-lg font-bold text-white">Kauf / Einmalkauf</h3>
+                    <Badge variant="outline" className="text-[10px] bg-slate-500/10 border-slate-500/30 text-slate-300">
+                      Klassisch
+                    </Badge>
+                  </div>
+                  <p className="text-xs font-medium text-slate-300">
+                    Einmalige Lizenzgebühr
                   </p>
                 </div>
-              )}
+
+                <p className="text-slate-400 text-xs mt-3 leading-relaxed">
+                  Dauerhafte Lizenzrechte für die gekaufte Version inklusive 12 Monate kostenfreier Updates. Keine laufenden monatlichen Mietgebühren.
+                </p>
+              </div>
+
+              <div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between text-xs">
+                <span className="text-slate-400">Zahlungsintervall:</span>
+                <span className="text-slate-200 font-semibold">einmalig</span>
+              </div>
             </div>
           </div>
 
-          {/* Option 2: Abo */}
-          <div
-            onClick={() => handleBillingIntervalChange('monthly')}
-            className={`relative p-6 rounded-2xl border-2 cursor-pointer transition-all duration-300 flex flex-col justify-between min-h-[12rem] h-auto hover:shadow-[0_0_20px_rgba(255,255,255,0.05)] ${selectedBillingInterval === 'monthly'
-                ? 'border-primary bg-primary/10 shadow-[0_0_25px_rgba(59,130,246,0.2)]'
-                : 'border-white/5 bg-white/5 hover:border-white/20'
-              }`}
-          >
-            <div>
-              <div className="flex items-center gap-3 mb-3">
-                <div className={`p-3 rounded-xl ${selectedBillingInterval === 'monthly' ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400'}`}>
-                  <Calendar className="w-6 h-6" />
+          {/* Dynamische Stichtagsabfrage bei Kauf */}
+          <AnimatePresence>
+            {isOneTime && (
+              <motion.div
+                initial={{ opacity: 0, y: 10, height: 0 }}
+                animate={{ opacity: 1, y: 0, height: 'auto' }}
+                exit={{ opacity: 0, y: -10, height: 0 }}
+                transition={{ duration: 0.25 }}
+                className="overflow-hidden"
+              >
+                <div className="p-5 rounded-2xl bg-gradient-to-r from-slate-900/90 to-slate-900/60 border border-white/10 space-y-3 shadow-lg">
+                  <div className="flex items-start gap-3">
+                    <div className="p-2.5 rounded-xl bg-primary/20 text-primary border border-primary/30 shrink-0 mt-0.5">
+                      <Calendar className="w-4 h-4" />
+                    </div>
+                    <div className="space-y-1 flex-1">
+                      <Label htmlFor="last-license-date" className="text-white text-xs font-bold flex items-center gap-2">
+                        Datum des letzten CASPOS-Kaufs (Stichtag)
+                      </Label>
+                      <p className="text-[11px] text-slate-400 leading-normal">
+                        Datum des letzten Kaufs zur automatischen Berechnung der Update-Staffel (z. B. 15% innerhalb 1 Jahr, 30% bis 2 Jahre, 50% bis 3 Jahre).
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="pt-2 flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
+                    <div className="relative flex-1 max-w-sm">
+                      <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                      <Input
+                        id="last-license-date"
+                        type="date"
+                        value={lastLicenseDate}
+                        onChange={(e) => setLastLicenseDate(e.target.value)}
+                        className="pl-9 bg-slate-950/80 border-white/10 text-white text-xs h-9 focus:border-primary"
+                      />
+                    </div>
+                    {lastLicenseDate && (
+                      <Badge variant="outline" className="bg-emerald-500/10 border-emerald-500/30 text-emerald-400 text-xs px-2.5 py-1 flex items-center gap-1.5 self-start sm:self-auto">
+                        <CheckCircle2 className="w-3.5 h-3.5" /> Stichtag gesetzt
+                      </Badge>
+                    )}
+                  </div>
                 </div>
-                <h3 className="text-lg font-bold text-white">Monatliches Abo (Miete)</h3>
-              </div>
-              <p className="text-slate-400 text-sm">
-                Laufende monatliche Gebühren. Inklusive aller Updates und flexibler Laufzeit.
-              </p>
-            </div>
-            {selectedBillingInterval === 'monthly' && (
-              <div className="absolute top-4 right-4 w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white">
-                <Check className="w-4 h-4" />
-              </div>
+              </motion.div>
             )}
-          </div>
+          </AnimatePresence>
         </div>
-      </CardContent>
-      <CardFooter className="flex justify-between border-t border-white/10 pt-6">
-        <Button variant="ghost" className="text-white" onClick={prevStep}>
-          <ChevronLeft className="mr-2 w-4 h-4" /> Zurück
+      </div>
+
+      {/* ─── 3. FIXED BOTTOM ACTION BAR (shrink-0) ─── */}
+      <div className="shrink-0 border-t border-white/10 bg-slate-950/90 backdrop-blur-md px-6 py-3.5 flex flex-col sm:flex-row items-center justify-between gap-3 z-10">
+        {/* Back Button */}
+        <Button
+          variant="outline"
+          onClick={prevStep}
+          className="w-full sm:w-auto border-white/10 text-white hover:bg-white/10 h-9 text-xs gap-1.5"
+        >
+          <ChevronLeft className="w-4 h-4" /> Zurück zu Schritt 1
         </Button>
-        <Button onClick={nextStep}>
-          Weiter zur Software <ChevronRight className="ml-2 w-4 h-4" />
+
+        {/* Selected Model Status Chip */}
+        <div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-white/5 border border-white/10 text-white text-xs">
+          <span className="text-slate-400">Gewähltes Modell:</span>
+          <Badge
+            variant="outline"
+            className={`text-xs px-2 py-0.5 ${
+              isMonthly
+                ? 'border-blue-500/30 text-blue-400 bg-blue-500/10'
+                : 'border-slate-500/30 text-slate-300 bg-slate-500/10'
+            }`}
+          >
+            {isMonthly ? 'Monatliches Abo' : 'Einmaliger Kauf'}
+          </Badge>
+        </div>
+
+        {/* Next Button */}
+        <Button
+          onClick={nextStep}
+          className="w-full sm:w-auto bg-primary hover:bg-primary/90 text-white font-semibold px-6 shadow-lg shadow-primary/20 h-9 text-xs gap-1.5"
+        >
+          Weiter zu Schritt 3 <ChevronRight className="w-4 h-4" />
         </Button>
-      </CardFooter>
+      </div>
     </Card>
   )
 }

shop/components/wizard/step-software.tsx

@@ -2,13 +2,13 @@
 
 import React from 'react'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
-import { Separator } from '@/components/ui/separator'
 import { Checkbox } from '@/components/ui/checkbox'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
-import { ShoppingCart, Check, AlertCircle, Lock } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { ShoppingCart, Check, AlertCircle, Lock, X, Info } from 'lucide-react'
 import * as Icons from 'lucide-react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { Category, Product, CategorySelection } from '@/lib/types'
@@ -30,6 +30,8 @@ interface StepSoftwareProps {
   existingModuleIds?: string[]
   activeCategoryId: string | null
   editingDeviceName?: string | null
+  onCancelEdit?: () => void
+  productValidationErrors?: string[]
 }
 
 export function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
@@ -54,6 +56,8 @@ export function StepSoftware({
   existingModuleIds = [],
   activeCategoryId,
   editingDeviceName = null,
+  onCancelEdit,
+  productValidationErrors = [],
 }: StepSoftwareProps) {
   const currentCategory = visibleCategories.find(c => c.id === activeCategoryId) ?? visibleCategories[0] ?? null
 
@@ -69,24 +73,46 @@ 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">
-      <CardHeader className="border-b border-white/5 pb-4">
-        <CardTitle className="text-xl flex items-center justify-between gap-2 text-white font-bold flex-wrap">
-          <div className="flex items-center gap-2">
-            <ShoppingCart className="w-5 h-5 text-primary" />
-            <span>Optionen wählen</span>
+    <Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl overflow-hidden">
+      {/* ─── FIXED CARD HEADER ─── */}
+      <CardHeader className="border-b border-white/10 pb-3 pt-4 px-5 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">
+              <ShoppingCart className="w-4 h-4" />
+            </div>
+            <div>
+              <CardTitle className="text-base font-bold text-white">
+                {currentCategory.name}
+              </CardTitle>
+              <CardDescription className="text-xs text-slate-400 mt-0.5">
+                {currentCategory.description || 'Passen Sie die Konfiguration für diese Kategorie an.'}
+              </CardDescription>
+            </div>
           </div>
+
           {editingDeviceName && (
-            <Badge className="bg-amber-500/20 text-amber-400 border border-amber-500/30 text-xs font-bold gap-1 px-2.5 py-1 rounded-lg animate-pulse shrink-0">
-              ✏️ Bearbeite Kasse: &quot;{editingDeviceName}&quot;
-            </Badge>
+            <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">
+                ✏️ Bearbeite 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"
+                >
+                  <X className="w-3.5 h-3.5 mr-1" /> Neuer Entwurf
+                </Button>
+              )}
+            </div>
           )}
-        </CardTitle>
-        <CardDescription className="text-slate-400">
-          Passen Sie die Konfiguration für {currentCategory.name} an.
-        </CardDescription>
+        </div>
       </CardHeader>
-      <CardContent className="flex-1 pt-6 space-y-6">
+
+      {/* ─── CONTENT AREA (Inherits scrolling from parent, no nested double scrollbar) ─── */}
+      <CardContent className="p-5 space-y-5">
         <AnimatePresence mode="wait">
           <motion.div
             key={currentCategory.id}
@@ -94,49 +120,49 @@ export function StepSoftware({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -10 }}
             transition={{ duration: 0.2 }}
-            className="space-y-6"
+            className="space-y-5"
           >
-            {/* Category header */}
+            {/* 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-4 rounded-xl border transition-all ${
+                <div className={`flex items-center gap-3 p-3.5 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 ${
+                  <div className={`w-8 h-8 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" />
                   </div>
-                  <div>
-                    <h3 className="font-bold text-white text-sm flex items-center gap-2">
-                      {currentCategory.name}
+                  <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">
                           PFLICHTFELD AUSWÄHLEN!
                         </span>
                       )}
                     </h3>
-                    {currentCategory.description && (
-                      <p className="text-slate-400 text-xs mt-0.5">{currentCategory.description}</p>
-                    )}
+                    <p className="text-slate-400 text-[11px] 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">
+                    <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs 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">
+                    <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs 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">
+                    <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">
                       <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">
+                    <Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-xs rounded-full bg-white/5 shrink-0">
                       Optional
                     </Badge>
                   )}
@@ -144,12 +170,13 @@ export function StepSoftware({
               )
             })()}
 
+            {/* Products List */}
             {catProducts.length === 0 ? (
-              <p className="text-slate-500 text-sm italic">
+              <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-3">
+              <div className="grid gap-2.5">
                 {catProducts.map(product => {
                   const isChecked = sel?.productIds?.includes(product.id) ?? false
                   const disabled = isProductDisabled(product, currentCategory.id)
@@ -157,27 +184,27 @@ export function StepSoftware({
                     <div key={product.id} className="relative">
                       <Label
                         onClick={() => !disabled && selectProduct(currentCategory.id, product.id)}
-                        className={`flex flex-col items-start p-4 rounded-xl border transition-all ${disabled
+                        className={`flex flex-col items-start p-3.5 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.1)]'
+                            ? '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="flex items-center gap-3">
+                          <div className="flex items-center gap-2.5">
                             <Checkbox
                               checked={isChecked}
                               disabled={disabled}
                               onCheckedChange={() => { }}
                               className="border-white/20 data-[state=checked]:bg-primary rounded"
                             />
-                            <span className="font-bold text-sm text-white">{product.name}</span>
+                            <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`}>
                               {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
                             </span>
                           </div>
-                          <span className="text-primary font-bold text-sm">
+                          <span className="text-primary font-bold text-xs">
                             {new Intl.NumberFormat('de-DE', {
                               style: 'currency',
                               currency: 'EUR',
@@ -186,10 +213,10 @@ export function StepSoftware({
                           </span>
                         </div>
                         {product.description && (
-                          <span className="text-xs text-slate-400 mt-2 pl-7 font-normal leading-relaxed">{product.description}</span>
+                          <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-7 font-normal">
+                          <span className="text-[10px] text-slate-500 mt-1 pl-6 font-normal">
                             {product.modules.length} optionale Module verfügbar
                           </span>
                         )}
@@ -202,7 +229,7 @@ export function StepSoftware({
               <RadioGroup
                 value={sel?.productId ?? ''}
                 onValueChange={id => selectProduct(currentCategory.id, id)}
-                className="grid gap-3"
+                className="grid gap-2.5"
               >
                 {catProducts.map(product => {
                   const disabled = isProductDisabled(product, currentCategory.id)
@@ -217,21 +244,21 @@ export function StepSoftware({
                       />
                       <Label
                         htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
-                        className={`flex flex-col items-start p-4 rounded-xl border transition-all ${disabled
+                        className={`flex flex-col items-start p-3.5 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.1)]'
+                            ? '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="flex items-center gap-2">
-                            <span className="font-bold text-sm text-white">{product.name}</span>
+                          <div className="flex items-center gap-2.5">
+                            <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`}>
                               {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
                             </span>
                           </div>
-                          <span className="text-primary font-bold text-sm">
+                          <span className="text-primary font-bold text-xs">
                             {new Intl.NumberFormat('de-DE', {
                               style: 'currency',
                               currency: 'EUR',
@@ -240,7 +267,7 @@ export function StepSoftware({
                           </span>
                         </div>
                         {product.description && (
-                          <span className="text-xs text-slate-400 mt-2 font-normal leading-relaxed">{product.description}</span>
+                          <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">
@@ -254,14 +281,14 @@ export function StepSoftware({
               </RadioGroup>
             )}
 
-            {/* Modules */}
+            {/* Modules Section */}
             {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">
+              <div className="mt-5 p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3.5">
+                <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.5">
+                <div className="space-y-2">
                   {selectedProduct.modules.map(module => {
                     const isExistingLicense = existingModuleIds.includes(module.id)
                     const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
@@ -270,13 +297,13 @@ 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-4 rounded-xl border transition-all duration-200 ${
+                        className={`flex flex-col p-3.5 rounded-xl border transition-all duration-200 ${
                           isExistingLicense
                             ? 'border-primary/20 bg-primary/5 opacity-75'
                             : disabled
                               ? 'border-white/5 bg-white/5 opacity-40'
                               : checked
-                                ? 'border-primary bg-primary/10 shadow-[0_0_15px_rgba(59,130,246,0.15)] text-white'
+                                ? 'border-primary bg-primary/10 shadow-[0_0_15px_rgba(59,130,246,0.15)] ring-1 ring-primary/40 text-white'
                                 : 'border-white/5 bg-white/5 hover:bg-white/10'
                         }`}
                       >
@@ -286,12 +313,12 @@ 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-white/20 data-[state=checked]:bg-primary mt-0.5"
                           />
-                          <div className="flex-1">
+                          <div className="flex-1 min-w-0">
                             <Label
                               htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
-                              className={`font-semibold text-sm flex justify-between text-white ${
+                              className={`font-semibold text-xs flex justify-between text-white ${
                                 isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
                               }`}
                             >
@@ -303,9 +330,9 @@ export function StepSoftware({
                                   </span>
                                 )}
                               </span>
-                              <span className="text-primary font-bold text-sm">
+                              <span className="text-primary font-bold text-xs ml-2 shrink-0">
                                 {isExistingLicense ? (
-                                  <span className="text-slate-500 text-xs font-normal">inkl.</span>
+                                  <span className="text-slate-500 text-[11px] font-normal">inkl.</span>
                                 ) : (
                                   <>+{new Intl.NumberFormat('de-DE', {
                                     style: 'currency',
@@ -315,10 +342,10 @@ export function StepSoftware({
                               </span>
                             </Label>
                             {module.description && (
-                              <p className="text-xs text-slate-400 mt-1 leading-relaxed">{module.description}</p>
+                              <p className="text-[11px] text-slate-400 mt-1 leading-relaxed">{module.description}</p>
                             )}
                             {!isExistingLicense && disabled && (
-                              <p className="text-[10px] text-red-400 mt-1.5 font-medium flex items-center gap-1">
+                              <p className="text-[10px] text-red-400 mt-1 font-medium flex items-center gap-1">
                                 <AlertCircle className="w-3 h-3 text-red-400 shrink-0" />
                                 {module.requirements?.length && !module.requirements.some(
                                   reqId => sel?.moduleIds.includes(reqId)
@@ -332,8 +359,8 @@ export function StepSoftware({
 
                         {/* Scalable Quantity */}
                         {checked && !isExistingLicense && module.has_quantity && (
-                          <div className="flex items-center gap-3 mt-4 pl-8 pt-3 border-t border-white/5">
-                            <Label htmlFor={`qty-${module.id}`} className="text-xs text-slate-400 font-medium">Menge:</Label>
+                          <div className="flex items-center gap-3 mt-3 pl-7 pt-2.5 border-t border-white/5">
+                            <Label htmlFor={`qty-${module.id}`} className="text-[11px] text-slate-400 font-medium">Menge:</Label>
                             <Input
                               id={`qty-${module.id}`}
                               type="number"
@@ -344,9 +371,9 @@ export function StepSoftware({
                                 const val = Math.max(1, parseInt(e.target.value) || 1)
                                 setModuleQuantities(prev => ({ ...prev, [module.id]: val }))
                               }}
-                              className="w-16 h-8 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-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"
                             />
-                            <span className="text-xs text-slate-400">
+                            <span className="text-[11px] text-slate-400">
                               Gesamt:{' '}
                               <span className="text-primary font-bold">
                                 {new Intl.NumberFormat('de-DE', {
@@ -363,6 +390,18 @@ export function StepSoftware({
                 </div>
               </div>
             )}
+
+            {/* Inline Validation Warnings */}
+            {productValidationErrors.length > 0 && (
+              <div className="p-3 rounded-xl bg-red-500/10 border border-red-500/30 space-y-1">
+                {productValidationErrors.map((err, errIdx) => (
+                  <p key={errIdx} className="text-xs text-red-400 flex items-center gap-1.5 font-medium">
+                    <AlertCircle className="w-3.5 h-3.5 shrink-0 text-red-400" />
+                    {err}
+                  </p>
+                ))}
+              </div>
+            )}
           </motion.div>
         </AnimatePresence>
       </CardContent>

shop/components/wizard/step-summary.tsx

@@ -1,11 +1,32 @@
 'use client'
 
-import React from 'react'
+import React, { useState } from 'react'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
 import { Separator } from '@/components/ui/separator'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
-import { ShieldCheck, Building2, Calendar, Loader2, CheckCircle2 } from 'lucide-react'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+import {
+  ShieldCheck,
+  Building2,
+  Calendar,
+  Loader2,
+  CheckCircle2,
+  Pencil,
+  Trash2,
+  Plus,
+  ChevronLeft,
+  MessageSquare,
+  FileText,
+  Lock,
+  Check,
+  X,
+  CreditCard,
+  User,
+  MapPin,
+  Send,
+} from 'lucide-react'
 import * as Icons from 'lucide-react'
 import { Category, Product, EndCustomer, Profile } from '@/lib/types'
 
@@ -70,300 +91,424 @@ export function StepSummary({
   onAddNewBasketItem,
   onDeleteBasketItem,
 }: StepSummaryProps) {
-  const [confirmDeleteIdx, setConfirmDeleteIdx] = React.useState<number | null>(null)
+  const [confirmDeleteIdx, setConfirmDeleteIdx] = useState<number | null>(null)
+  const [acceptedTerms, setAcceptedTerms] = useState(false)
+
+  const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
+
+  const totalPositionsCount = finalItemsToShow.length
+  const primaryInterval = finalItemsToShow[0]?.billingInterval || 'monthly'
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 h-full items-stretch text-left">
-      {/* LINKER BEREICH: Scrollbares Bedienfeld */}
-      <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 */}
-          <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">
-                <ShieldCheck className="w-6 h-6 text-primary" />
-              </div>
-              <div>
-                <h2 className="text-2xl font-extrabold text-white tracking-tight">
-                  Anfrage prüfen
-                </h2>
-                <p className="text-slate-400 text-xs mt-0.5">
-                  Fast fertig! Bitte überprüfen Sie Ihre ausgewählte Konfiguration.
-                </p>
-              </div>
+    <Card className="glass-dark border-white/10 h-[calc(100vh-8.5rem)] flex flex-col justify-between overflow-hidden relative">
+      {/* ─── 1. FIXED HEADER (shrink-0) ─── */}
+      <CardHeader className="pb-3 pt-4 px-6 shrink-0 border-b border-white/10 bg-slate-950/40 space-y-0">
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-primary/20 rounded-xl flex items-center justify-center border border-primary/40 shrink-0 text-primary">
+              <ShieldCheck className="w-5 h-5" />
             </div>
-
-
-          </div>
-
-          {/* Kunden-Info Card */}
-          {selectedEndCustomer && (
-            <div className="p-4 rounded-xl bg-white/5 border border-white/10 space-y-2">
-              <div className="flex items-center gap-2 text-primary font-bold text-xs uppercase tracking-wider">
-                <Building2 className="w-4 h-4" />
-                <span>Ausgewählter Endkunde</span>
-              </div>
-              <p className="text-white font-bold text-sm">{selectedEndCustomer.company_name}</p>
-              <p className="text-slate-400 text-xs">Ansprechpartner: {[selectedEndCustomer.first_name, selectedEndCustomer.last_name].filter(Boolean).join(' ')}</p>
-              <p className="text-slate-400 text-xs">Adresse: {[selectedEndCustomer.street, [selectedEndCustomer.zip, selectedEndCustomer.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')}</p>
+            <div>
+              <CardTitle className="text-xl font-bold text-white flex items-center gap-2">
+                Anfrage prüfen & absenden
+              </CardTitle>
+              <CardDescription className="text-xs text-slate-300 mt-0.5">
+                Überprüfen Sie alle konfigurierten Kassen, Positionen und Konditionen vor der Freigabe.
+              </CardDescription>
             </div>
-          )}
-
-          {/* Anmerkungen / Notizfeld */}
-          <div className="space-y-2 pt-2">
-            <label htmlFor="order-notes" className="block text-xs font-bold text-white uppercase tracking-wider">
-              Anmerkungen / Hinweise (optional)
-            </label>
-            <textarea
-              id="order-notes"
-              rows={4}
-              value={orderNotes}
-              onChange={e => setOrderNotes(e.target.value)}
-              placeholder="Besondere Hinweise, Ansprechpartner oder Terminwünsche hier eintragen..."
-              className="w-full p-3 rounded-xl bg-white/5 border border-white/10 text-xs text-white placeholder-slate-500 focus:border-primary focus:outline-none transition-colors duration-200 resize-none shadow-inner"
-            />
-          </div>
-
-          <p className="text-[10px] text-slate-500 leading-relaxed">
-            Mit dem Klick auf „{initialOrder ? 'Anfrage aktualisieren' : 'Kostenpflichtig bestellen'}“ akzeptieren Sie unsere AGB und die{' '}
-            <a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-400">
-              Datenschutzerklärung
-            </a>.
-          </p>
-
-          {/* Aktions-Buttons */}
-          <div className="space-y-3 pt-2">
-            <Button
-              className="w-full h-12 text-sm font-bold bg-primary hover:bg-primary/90 shadow-[0_0_15px_rgba(59,130,246,0.2)] rounded-xl"
-              onClick={handleSubmit}
-              disabled={isSubmitting}
-            >
-              {isSubmitting ? (
-                initialOrder ? (
-                  <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Anfrage wird aktualisiert...</>
-                ) : (
-                  <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Anfrage wird versendet...</>
-                )
-              ) : (
-                initialOrder ? 'Anfrage aktualisieren' : 'Kostenpflichtig bestellen'
-              )}
-            </Button>
-            <Button variant="ghost" className="w-full text-slate-400 hover:text-white text-xs h-10" onClick={prevStep}>
-              Noch etwas ändern
-            </Button>
           </div>
+          <Badge variant="outline" className="border-primary/30 text-primary bg-primary/10 text-xs px-3 py-1">
+            Schritt 4 von 4
+          </Badge>
         </div>
-      </div>
+      </CardHeader>
 
-      {/* RECHTER BEREICH: Eigenständig scrollbare Zusammenfassung der Anfrage */}
-      <div className="lg:col-span-7 flex flex-col h-full overflow-hidden pl-4">
-        <Card className="glass-dark border-white/10 shadow-2xl overflow-hidden rounded-2xl flex flex-col h-full">
-          <CardHeader className="shrink-0 border-b border-white/5 pb-4">
-            <CardTitle className="text-lg text-white flex items-center justify-between font-bold flex-wrap gap-2">
-              <div className="flex items-center gap-2">
-                <span>Zusammenfassung der Positionen</span>
-                <Badge className="bg-primary/20 text-primary border border-primary/30 text-xs rounded-full">
-                  {finalItemsToShow.length} {finalItemsToShow.length === 1 ? 'Kasse' : 'Kassen'}
-                </Badge>
+      {/* ─── 2. SCROLLABLE MIDDLE (flex-1 min-h-0 overflow-y-auto) ─── */}
+      <div className="flex-1 min-h-0 overflow-y-auto p-6 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 max-w-7xl mx-auto w-full items-start">
+          {/* ─── LINKES RASTER (lg:col-span-7) – Auftragsübersicht & Kassen ─── */}
+          <div className="lg:col-span-7 space-y-5">
+            {/* Kopf-Card: Endkunde & Abrechnungsmodell */}
+            <div className="p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3">
+              <div className="flex items-center justify-between gap-2 border-b border-white/5 pb-2.5 flex-wrap">
+                <div className="flex items-center gap-2 text-primary font-bold text-xs uppercase tracking-wider">
+                  <Building2 className="w-4 h-4" />
+                  <span>Kunde & Abrechnung</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Badge variant="outline" className="text-[10px] bg-primary/10 border-primary/30 text-primary font-semibold">
+                    {primaryInterval === 'one_time' ? 'Einmalkauf' : 'Monatliches Abo'}
+                  </Badge>
+                  {lastLicenseDate && (
+                    <Badge variant="outline" className="text-[10px] bg-emerald-500/10 border-emerald-500/30 text-emerald-400">
+                      Stichtag: {new Date(lastLicenseDate).toLocaleDateString('de-DE')}
+                    </Badge>
+                  )}
+                </div>
               </div>
-              {onAddNewBasketItem && (
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={onAddNewBasketItem}
-                  className="border-dashed border-primary/50 text-primary hover:bg-primary/10 text-xs font-bold gap-1.5 h-8 rounded-lg"
-                >
-                  <Icons.UserPlus className="w-3.5 h-3.5" /> + Weitere Kasse anlegen
-                </Button>
-              )}
-            </CardTitle>
-          </CardHeader>
 
-          {/* Scrollbarer Content der Aufschlüsselung */}
-          <CardContent className="space-y-6 text-left flex-1 overflow-y-auto pt-6 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent pr-2">
-            <div className="space-y-6">
-              {finalItemsToShow.map((item, itemIdx) => (
-                <div key={itemIdx} className="space-y-3 border-b border-white/5 pb-5 last:border-0 last:pb-0">
-                  <div 
-                    onClick={() => onEditBasketItem && onEditBasketItem(itemIdx)}
-                    className={`flex justify-between items-center bg-white/5 p-3 rounded-xl border border-white/10 ${onEditBasketItem ? 'cursor-pointer hover:border-primary/50 hover:bg-white/10 transition-all group' : ''}`}
-                  >
-                    <div className="flex items-center gap-2">
-                      <span className="text-white font-bold text-sm">Kasse: {item.deviceName}</span>
-                      {item.licenseNumber && (
-                        <span className="text-[10px] text-slate-400">({item.licenseNumber})</span>
-                      )}
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <span className={`text-[10px] px-2 py-0.5 rounded border ${item.billingInterval === 'one_time' ? 'border-amber-500/30 text-amber-400 bg-amber-500/10' : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'} font-semibold uppercase`}>
-                        {item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
+              {selectedEndCustomer ? (
+                <div className="space-y-1">
+                  <h4 className="text-sm font-bold text-white">{selectedEndCustomer.company_name}</h4>
+                  <div className="flex items-center gap-3 text-xs text-slate-300 flex-wrap">
+                    {(selectedEndCustomer.first_name || selectedEndCustomer.last_name) && (
+                      <span className="flex items-center gap-1">
+                        <User className="w-3 h-3 text-slate-400" />
+                        {[selectedEndCustomer.first_name, selectedEndCustomer.last_name].filter(Boolean).join(' ')}
                       </span>
-                      {onEditBasketItem && (
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="sm"
-                          className="h-7 px-2 text-xs text-slate-300 group-hover:text-primary group-hover:bg-primary/20 gap-1 rounded-lg"
-                        >
-                          <Icons.Pencil className="w-3 h-3" /> Bearbeiten
-                        </Button>
-                      )}
-                      {onDeleteBasketItem && (
-                        <Button
-                          type="button"
-                          variant={confirmDeleteIdx === itemIdx ? "destructive" : "ghost"}
-                          size="sm"
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            if (confirmDeleteIdx === itemIdx) {
-                              onDeleteBasketItem(itemIdx)
-                              setConfirmDeleteIdx(null)
-                            } else {
-                              setConfirmDeleteIdx(itemIdx)
-                            }
-                          }}
-                          onMouseLeave={() => setConfirmDeleteIdx(null)}
-                          className={`h-7 px-2 text-xs transition-all ${
-                            confirmDeleteIdx === itemIdx
-                              ? 'bg-red-600 text-white hover:bg-red-700 font-bold px-3 shadow-[0_0_10px_rgba(220,38,38,0.5)]'
-                              : 'text-slate-400 hover:text-red-400 hover:bg-red-500/20'
-                          } gap-1 rounded-lg`}
-                        >
-                          <Icons.Trash2 className="w-3.5 h-3.5" />
-                          {confirmDeleteIdx === itemIdx ? 'Wirklich löschen?' : 'Löschen'}
-                        </Button>
-                      )}
-                    </div>
+                    )}
+                    {(selectedEndCustomer.street || selectedEndCustomer.zip || selectedEndCustomer.city) && (
+                      <span className="flex items-center gap-1">
+                        <MapPin className="w-3 h-3 text-slate-400" />
+                        {[selectedEndCustomer.street, [selectedEndCustomer.zip, selectedEndCustomer.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')}
+                      </span>
+                    )}
+                    {selectedEndCustomer.vat_id && (
+                      <span className="text-slate-400">USt-IdNr: {selectedEndCustomer.vat_id}</span>
+                    )}
                   </div>
+                </div>
+              ) : (
+                <p className="text-xs text-slate-400 italic">Kein Endkunde zugewiesen (Partner-Bestellung).</p>
+              )}
+            </div>
 
-                  {visibleCategories.map(cat => {
-                    const sel = item.selections[cat.id]
-                    const selectedProds: Product[] = []
-                    if (cat.allow_multiselect && sel?.productIds) {
-                      sel.productIds.forEach((pId: string) => {
-                        const p = products.find(prod => prod.id === pId)
-                        if (p) selectedProds.push(p)
-                      })
-                    } else if (sel?.productId) {
-                      const p = products.find(prod => prod.id === sel.productId)
-                      if (p) selectedProds.push(p)
-                    }
+            {/* Kassenliste */}
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <h3 className="text-xs font-bold text-slate-300 uppercase tracking-wider flex items-center gap-2">
+                  <span>Enthaltene Kassen ({finalItemsToShow.length})</span>
+                </h3>
+                {onAddNewBasketItem && (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={onAddNewBasketItem}
+                    className="border-dashed border-primary/40 text-primary hover:bg-primary/10 text-xs font-semibold gap-1.5 h-7"
+                  >
+                    <Plus className="w-3 h-3" /> Weitere Kasse hinzufügen
+                  </Button>
+                )}
+              </div>
 
-                    if (selectedProds.length === 0) return null
+              {finalItemsToShow.length === 0 ? (
+                <div className="p-6 rounded-2xl bg-white/5 border border-white/10 text-center space-y-2">
+                  <p className="text-xs text-slate-400 font-medium">Keine Kassen in der Aufstellung vorhanden.</p>
+                </div>
+              ) : (
+                finalItemsToShow.map((item, itemIdx) => (
+                  <div
+                    key={itemIdx}
+                    className="p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3 relative overflow-hidden"
+                  >
+                    {/* Kassen Header Bar */}
+                    <div className="flex justify-between items-center bg-slate-950/40 p-2.5 rounded-xl border border-white/5">
+                      <div className="flex items-center gap-2 min-w-0">
+                        <span className="text-white font-bold text-xs truncate">
+                          {item.deviceName || `Kasse ${itemIdx + 1}`}
+                        </span>
+                        {itemIdx > 0 && (
+                          <Badge variant="outline" className="text-[9px] px-1.5 py-0 border-emerald-500/30 text-emerald-400 bg-emerald-500/10 shrink-0">
+                            Kasse 2+
+                          </Badge>
+                        )}
+                        {item.licenseNumber && (
+                          <span className="text-[10px] text-slate-400 font-mono truncate">
+                            ({item.licenseNumber})
+                          </span>
+                        )}
+                      </div>
 
-                    const sortedProds = [...selectedProds].sort((a, b) => a.base_price - b.base_price)
-                    const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0
+                      <div className="flex items-center gap-1.5 shrink-0">
+                        <Badge
+                          variant="outline"
+                          className={`text-[9px] px-2 py-0.5 font-semibold ${
+                            item.billingInterval === 'one_time'
+                              ? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
+                              : 'border-blue-500/30 text-blue-400 bg-blue-500/10'
+                          }`}
+                        >
+                          {item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
+                        </Badge>
 
-                    return (
-                      <div key={cat.id} className="text-sm space-y-2 pl-2">
-                        <span className="text-slate-500 text-[10px] font-bold uppercase tracking-wider block">{cat.name}:</span>
-                        {sortedProds.map((prod, idx) => {
-                          const isFree = idx < freeLimit
-                          const isAbo = item.billingInterval === 'monthly'
-                          const displayPrice = isFree ? 0 : (isAbo ? ((prod as any).monthly_price ?? prod.base_price) : prod.base_price)
-                          return (
-                            <div key={prod.id} className="flex justify-between text-slate-200">
-                              <span className="flex items-center gap-1.5">
-                                <CategoryIcon icon={cat.icon} className="w-3.5 h-3.5 text-primary shrink-0" />
-                                {prod.name}
-                                {isFree && <span className="text-[9px] bg-green-500/20 text-green-400 px-1.5 py-0.5 rounded border border-green-500/30 font-bold uppercase">Inklusive</span>}
-                              </span>
-                              <span className="font-bold text-xs text-white">
-                                {isFree ? '0,00 €' : new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(displayPrice)}
-                              </span>
-                            </div>
-                          )
-                        })}
+                        {onEditBasketItem && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => onEditBasketItem(itemIdx)}
+                            className="h-7 px-2 text-xs text-slate-300 hover:text-primary hover:bg-primary/20 gap-1 rounded-lg"
+                            title="Kasse in Schritt 3 bearbeiten"
+                          >
+                            <Pencil className="w-3 h-3" /> Bearbeiten
+                          </Button>
+                        )}
 
-                        {/* Selected Modules */}
-                        {sel?.moduleIds && sel.moduleIds.length > 0 && (
-                          <div className="pl-4 space-y-1.5 pt-1">
-                            {sel.moduleIds.map((mId: string) => {
-                              let modObj: any = null
-                              products.forEach(p => {
-                                const found = p.modules?.find(m => m.id === mId)
-                                if (found) modObj = found
-                              })
-                              if (!modObj) return null
+                        {onDeleteBasketItem && (
+                          <Button
+                            type="button"
+                            variant={confirmDeleteIdx === itemIdx ? 'destructive' : 'ghost'}
+                            size="sm"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              if (confirmDeleteIdx === itemIdx) {
+                                onDeleteBasketItem(itemIdx)
+                                setConfirmDeleteIdx(null)
+                              } else {
+                                setConfirmDeleteIdx(itemIdx)
+                              }
+                            }}
+                            onMouseLeave={() => setConfirmDeleteIdx(null)}
+                            className={`h-7 px-2 text-xs transition-all ${
+                              confirmDeleteIdx === itemIdx
+                                ? 'bg-red-600 text-white hover:bg-red-700 font-bold px-2.5 shadow-md shadow-red-500/30'
+                                : 'text-slate-400 hover:text-red-400 hover:bg-red-500/20'
+                            } gap-1 rounded-lg`}
+                            title="Kasse entfernen"
+                          >
+                            <Trash2 className="w-3 h-3" />
+                            {confirmDeleteIdx === itemIdx ? 'Wirklich löschen?' : ''}
+                          </Button>
+                        )}
+                      </div>
+                    </div>
 
+                    {/* Enthaltene Produkte & Module */}
+                    <div className="space-y-2 text-xs">
+                      {visibleCategories.map((cat) => {
+                        const sel = item.selections[cat.id]
+                        const selectedProds: Product[] = []
+                        if (cat.allow_multiselect && sel?.productIds) {
+                          sel.productIds.forEach((pId: string) => {
+                            const p = products.find((prod) => prod.id === pId)
+                            if (p) selectedProds.push(p)
+                          })
+                        } else if (sel?.productId) {
+                          const p = products.find((prod) => prod.id === sel.productId)
+                          if (p) selectedProds.push(p)
+                        }
+
+                        if (selectedProds.length === 0) return null
+
+                        const sortedProds = [...selectedProds].sort((a, b) => a.base_price - b.base_price)
+                        const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0
+
+                        return (
+                          <div key={cat.id} className="space-y-1 pl-1">
+                            <span className="text-slate-400 text-[10px] font-bold uppercase tracking-wider block">
+                              {cat.name}:
+                            </span>
+                            {sortedProds.map((prod, idx) => {
+                              const isFree = idx < freeLimit
                               const isAbo = item.billingInterval === 'monthly'
-                              const qty = item.moduleQuantities?.[mId] || 1
-                              const unitPrice = isAbo ? (modObj.monthly_price ?? modObj.price) : modObj.price
-                              const totalPrice = unitPrice * qty
+                              const displayPrice = isFree ? 0 : isAbo ? ((prod as any).monthly_price ?? prod.base_price) : prod.base_price
 
                               return (
-                                <div key={mId} className="flex justify-between text-slate-400 text-xs">
-                                  <span>+ {modObj.name} {qty > 1 ? `(${qty}x)` : ''}</span>
-                                  <span className="font-semibold text-slate-300">
-                                    {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalPrice)}
+                                <div key={prod.id} className="flex justify-between items-center text-slate-200 pl-2">
+                                  <span className="flex items-center gap-1.5 truncate pr-2">
+                                    <CategoryIcon icon={cat.icon} className="w-3.5 h-3.5 text-primary shrink-0" />
+                                    <span className="truncate">{prod.name}</span>
+                                    {isFree && (
+                                      <span className="text-[9px] bg-green-500/20 text-green-400 px-1.5 py-0.2 rounded border border-green-500/30 font-bold uppercase shrink-0">
+                                        Inklusive
+                                      </span>
+                                    )}
+                                  </span>
+                                  <span className="font-bold text-xs text-white tabular-nums shrink-0">
+                                    {isFree ? '0,00 €' : fmt(displayPrice)}
                                   </span>
                                 </div>
                               )
                             })}
-                          </div>
-                        )}
-                      </div>
-                    )
-                  })}
-                </div>
-              ))}
 
-              {/* Gebühren & Zusatz-Positionen */}
+                            {/* Selected Module Chips */}
+                            {sel?.moduleIds && sel.moduleIds.length > 0 && (
+                              <div className="pl-6 space-y-1 pt-0.5">
+                                {sel.moduleIds.map((mId: string) => {
+                                  let modObj: any = null
+                                  products.forEach((p) => {
+                                    const found = p.modules?.find((m) => m.id === mId)
+                                    if (found) modObj = found
+                                  })
+                                  if (!modObj) return null
+
+                                  const isAbo = item.billingInterval === 'monthly'
+                                  const qty = item.moduleQuantities?.[mId] || 1
+                                  const unitPrice = isAbo ? (modObj.monthly_price ?? modObj.price) : modObj.price
+                                  const totalPrice = unitPrice * qty
+
+                                  return (
+                                    <div key={mId} className="flex justify-between text-slate-400 text-[11px]">
+                                      <span className="truncate pr-2">
+                                        + {modObj.name} {qty > 1 ? `(${qty}x)` : ''}
+                                      </span>
+                                      <span className="font-semibold text-slate-300 tabular-nums shrink-0">
+                                        {fmt(totalPrice)}
+                                      </span>
+                                    </div>
+                                  )
+                                })}
+                              </div>
+                            )}
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                ))
+              )}
+
+              {/* Service- & Zusatz-Positionen */}
               {linkedFeeProducts.length > 0 && (
-                <div className="border-t border-white/5 pt-4 space-y-2">
-                  <span className="text-slate-500 text-[10px] font-bold uppercase tracking-wider block">Service & Gebühren:</span>
-                  {linkedFeeProducts.map(fp => (
+                <div className="p-3.5 rounded-2xl bg-white/5 border border-white/10 space-y-2">
+                  <span className="text-slate-400 text-[10px] font-bold uppercase tracking-wider block">
+                    Service & Gebühren:
+                  </span>
+                  {linkedFeeProducts.map((fp) => (
                     <div key={fp.id} className="flex justify-between text-xs text-slate-300">
                       <span>{fp.name}</span>
-                      <span className="font-bold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(fp.base_price)}</span>
+                      <span className="font-bold text-white tabular-nums">{fmt(fp.base_price)}</span>
                     </div>
                   ))}
                 </div>
               )}
             </div>
+          </div>
 
-            {/* Summen-Berechnung */}
-            {oneTimeTotal > 0 ? (
-              <div className="space-y-2 border-t border-white/10 pt-5">
-                <div className="flex justify-between text-xs text-slate-400">
-                  <span>Netto-Gesamtbetrag:</span>
-                  <span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
-                </div>
-                <div className="flex justify-between text-xs text-slate-400">
-                  <span>zzgl. 19% MwSt.:</span>
-                  <span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
-                </div>
-                {updatePriceModifier.label && (
-                  <div className="text-xs text-green-400 font-semibold bg-green-500/10 p-2.5 rounded-xl border border-green-500/20 my-1">
-                    {updatePriceModifier.label}
+          {/* ─── RECHTES RASTER (lg:col-span-5) – Notizen, Bedingungen & Summen ─── */}
+          <div className="lg:col-span-5 space-y-5">
+            {/* Glassmorphism Preiskalkulation */}
+            <div className="p-5 rounded-2xl bg-slate-950/80 border border-white/10 space-y-3 shadow-xl">
+              <div className="flex items-center gap-2 pb-2 border-b border-white/10">
+                <CreditCard className="w-4 h-4 text-primary" />
+                <h3 className="text-xs font-bold text-white uppercase tracking-wider">
+                  Gesamte Preiskalkulation
+                </h3>
+              </div>
+
+              {oneTimeTotal > 0 && (
+                <div className="space-y-1.5 text-xs">
+                  <div className="flex justify-between text-slate-400">
+                    <span>Einmalig (netto):</span>
+                    <span className="tabular-nums font-mono text-white">{fmt(oneTimeNet)}</span>
+                  </div>
+                  <div className="flex justify-between text-slate-400">
+                    <span>zzgl. 19% MwSt.:</span>
+                    <span className="tabular-nums font-mono text-white">{fmt(oneTimeTax)}</span>
+                  </div>
+                  {updatePriceModifier?.label && (
+                    <div className="text-[11px] text-green-400 font-semibold bg-green-500/10 p-2 rounded-lg border border-green-500/20 my-1">
+                      {updatePriceModifier.label}
+                    </div>
+                  )}
+                  <div className="flex justify-between text-sm font-bold text-white pt-2 border-t border-white/5">
+                    <span>Einmalig gesamt (brutto):</span>
+                    <span className="tabular-nums font-mono text-primary font-extrabold text-base">{fmt(oneTimeGross)}</span>
                   </div>
-                )}
-                <div className="flex justify-between text-base font-bold text-primary pt-3 border-t border-white/5">
-                  <span>Gesamtbetrag (brutto):</span>
-                  <span className="font-bold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}</span>
                 </div>
+              )}
+
+              {monthlyTotal > 0 && (
+                <div className={`space-y-1.5 text-xs ${oneTimeTotal > 0 ? 'pt-3 border-t border-white/10' : ''}`}>
+                  <div className="flex justify-between text-slate-400">
+                    <span>Monatlich (netto):</span>
+                    <span className="tabular-nums font-mono text-white">{fmt(monthlyNet)} / mtl.</span>
+                  </div>
+                  <div className="flex justify-between text-slate-400">
+                    <span>zzgl. 19% MwSt.:</span>
+                    <span className="tabular-nums font-mono text-white">{fmt(monthlyTax)} / mtl.</span>
+                  </div>
+                  <div className="flex justify-between text-sm font-bold text-white pt-2 border-t border-white/5">
+                    <span>Monatlich gesamt (brutto):</span>
+                    <span className="tabular-nums font-mono text-primary font-extrabold text-base">{fmt(monthlyGross)} / mtl.</span>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Bestellnotizen */}
+            <div className="p-4 rounded-2xl bg-white/5 border border-white/10 space-y-2">
+              <Label htmlFor="order-notes" className="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-1.5">
+                <MessageSquare className="w-3.5 h-3.5 text-primary" />
+                <span>Bestellnotizen / Bemerkungen (optional)</span>
+              </Label>
+              <textarea
+                id="order-notes"
+                rows={3}
+                value={orderNotes}
+                onChange={(e) => setOrderNotes(e.target.value)}
+                placeholder="Besondere Hinweise, Wunschtermine oder Ansprechpartner..."
+                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="space-y-2 border-t border-white/10 pt-5">
-                <div className="flex justify-between text-xs text-slate-400">
-                  <span>Netto-Gesamtbetrag:</span>
-                  <span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / mtl.</span>
-                </div>
-                <div className="flex justify-between text-xs text-slate-400">
-                  <span>zzgl. 19% MwSt.:</span>
-                  <span className="font-semibold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / mtl.</span>
-                </div>
-                <div className="flex justify-between text-base font-bold text-primary pt-3 border-t border-white/5">
-                  <span>Gesamtbetrag (brutto):</span>
-                  <span className="font-bold text-white">{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / mtl.</span>
-                </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>
-            )}
-          </CardContent>
-        </Card>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+
+      {/* ─── 3. FIXED BOTTOM ACTION BAR (shrink-0) ─── */}
+      <div className="shrink-0 border-t border-white/10 bg-slate-950/90 backdrop-blur-md px-6 py-3.5 flex flex-col sm:flex-row items-center justify-between gap-3 z-10">
+        {/* Back Button */}
+        <Button
+          variant="outline"
+          onClick={prevStep}
+          className="w-full sm:w-auto border-white/10 text-white hover:bg-white/10 h-9 text-xs gap-1.5"
+        >
+          <ChevronLeft className="w-4 h-4" /> Zurück zu Schritt 3
+        </Button>
+
+        {/* Info Chip */}
+        <div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-white/5 border border-white/10 text-white text-xs">
+          <span className="text-slate-400">Positionen:</span>
+          <strong className="text-white">{finalItemsToShow.length} Kassen</strong>
+          <span className="text-slate-600">|</span>
+          <span className="text-primary font-bold">
+            {oneTimeTotal > 0 ? fmt(oneTimeGross) : `${fmt(monthlyGross)} / mtl.`}
+          </span>
+        </div>
+
+        {/* Submit Button */}
+        <Button
+          onClick={handleSubmit}
+          disabled={isSubmitting || !acceptedTerms || 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 ? (
+            <>
+              <Loader2 className="w-4 h-4 animate-spin" />
+              {initialOrder ? 'Anfrage wird aktualisiert...' : 'Anfrage wird übertragen...'}
+            </>
+          ) : (
+            <>
+              <Send className="w-3.5 h-3.5" />
+              {initialOrder ? 'Anfrage aktualisieren' : 'Anfrage verbindlich absenden'}
+            </>
+          )}
+        </Button>
+      </div>
+    </Card>
   )
 }

shop/components/wizard/summary-sidebar.tsx

@@ -2,20 +2,20 @@
 
 import React from 'react'
 import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card'
-import { Separator } from '@/components/ui/separator'
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
-import { Pencil, Trash2, UserPlus, ChevronRight, AlertCircle, Check } from 'lucide-react'
-import { Category, Product, CategorySelection } from '@/lib/types'
+import { Badge } from '@/components/ui/badge'
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
+  ChevronRight,
+  ChevronLeft,
+  AlertCircle,
+  Check,
+  ShoppingCart,
+  Save,
+  Plus,
+} from 'lucide-react'
+import { Category, Product, CategorySelection } from '@/lib/types'
 
 interface SummarySidebarProps {
   visibleCategories: Category[]
@@ -34,19 +34,15 @@ interface SummarySidebarProps {
   updatePriceModifier: { label?: string }
   allCategoriesFilled: boolean
   productValidationErrors: string[]
-  basketItems: any[]
   editingIdx: number | null
-  editBasketItem: (idx: number) => void
-  deleteBasketItem: (idx: number) => void
   deviceName: string
   setDeviceName: (name: string) => void
   licenseNumber: string
   setLicenseNumber: (num: string) => void
-  addToBasket: () => void
+  onSaveAndProceed: () => void
   isNextStepDisabled: boolean
   hasActiveSelection: boolean
   showValidationWarning?: boolean
-  nextStep: () => void
   prevStep: () => void
 }
 
@@ -67,40 +63,56 @@ export function SummarySidebar({
   updatePriceModifier,
   allCategoriesFilled,
   productValidationErrors,
-  basketItems,
   editingIdx,
-  editBasketItem,
-  deleteBasketItem,
   deviceName,
   setDeviceName,
   licenseNumber,
   setLicenseNumber,
-  addToBasket,
+  onSaveAndProceed,
   isNextStepDisabled,
-  hasActiveSelection,
-  showValidationWarning = false,
-  nextStep,
   prevStep,
 }: SummarySidebarProps) {
   const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
 
+  const isEditing = editingIdx !== null
+  const currentDeviceTitle = isEditing
+    ? `Kasse ${editingIdx + 1}`
+    : (deviceName.trim() || 'Neue Kasse')
+
+  const isSaveDisabled = !allCategoriesFilled || productValidationErrors.length > 0
+
   return (
-    <div className="h-full flex flex-col">
-      <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>
-            )}
+    <Card className="glass-dark border-white/10 shadow-2xl rounded-2xl overflow-hidden flex flex-col h-full bg-slate-900/90 backdrop-blur-xl">
+      {/* ─── 1. TOP HEADER (shrink-0) ─── */}
+      <CardHeader className="shrink-0 pb-3 pt-4 px-4 border-b border-white/10 bg-slate-950/60">
+        <div className="flex items-center justify-between gap-2">
+          <CardTitle className="text-white text-sm font-bold flex items-center gap-2">
+            <ShoppingCart className="w-4 h-4 text-primary" />
+            <span>Kassen-Konfiguration</span>
           </CardTitle>
-        </CardHeader>
-        <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-slate-800 scrollbar-track-transparent">
+          <Badge
+            variant="outline"
+            className={`text-[10px] px-2 py-0.5 font-semibold ${
+              isEditing
+                ? 'border-amber-500/40 bg-amber-500/10 text-amber-400'
+                : 'border-primary/40 bg-primary/10 text-primary'
+            }`}
+          >
+            {isEditing ? `Bearbeite #${editingIdx + 1}` : 'Neuer Eintrag'}
+          </Badge>
+        </div>
+      </CardHeader>
+
+      {/* ─── 2. SCROLLABLE MIDDLE (flex-1 min-h-0 overflow-y-auto) ─── */}
+      <CardContent className="p-4 flex-1 min-h-0 overflow-y-auto space-y-4 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
+        {/* Aktuelle Kassen-Auswahl */}
+        <div className="space-y-3">
+          <div className="flex items-center justify-between text-xs font-bold text-slate-300 uppercase tracking-wider">
+            <span>Gewählte Positionen</span>
+          </div>
+
+          {/* Selected Categories List */}
+          <div className="space-y-2">
             {visibleCategories.map(cat => {
               const sel = selections[cat.id]
               const selectedProds: Product[] = []
@@ -115,13 +127,13 @@ export function SummarySidebar({
               }
 
               if (selectedProds.length === 0) return (
-                <div key={cat.id} className="text-xs text-slate-500 italic flex items-center gap-1.5">
+                <div key={cat.id} className="text-[11px] text-slate-500 italic flex items-center gap-1.5">
                   {cat.is_required ? (
                     <AlertCircle className="w-3 h-3 text-destructive shrink-0" />
                   ) : (
                     <span className="w-3 h-3 inline-block shrink-0" />
                   )}
-                  <span>{cat.name}: {cat.is_required ? 'nicht gewählt' : 'nicht gewählt (optional)'}</span>
+                  <span>{cat.name}: {cat.is_required ? 'nicht gewählt (Pflicht)' : 'nicht gewählt (optional)'}</span>
                 </div>
               )
 
@@ -129,27 +141,26 @@ export function SummarySidebar({
               const freeLimit = cat.allow_multiselect ? cat.free_items_limit : 0
 
               return (
-                <div key={cat.id} className="space-y-1">
-                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">{cat.name}</p>
+                <div key={cat.id} className="space-y-0.5 text-xs">
+                  <p className="text-[10px] font-semibold text-slate-400 uppercase tracking-wider">{cat.name}</p>
                   {sortedProds.map((prod, idx) => {
                     const isFree = idx < freeLimit
                     const actualPrice = isFree ? 0 : prod.base_price
                     return (
-                      <div key={prod.id} className="space-y-0.5 pl-2">
-                        <div className="flex justify-between text-sm">
-                          <span className="text-white">{prod.name} {isFree && <span className="text-[10px] text-green-400">(Frei)</span>}</span>
-                          <span className="text-white tabular-nums">
+                      <div key={prod.id} className="pl-1.5 space-y-0.5">
+                        <div className="flex justify-between text-white text-xs">
+                          <span className="truncate pr-2">{prod.name} {isFree && <span className="text-[10px] text-green-400">(Inkl.)</span>}</span>
+                          <span className="tabular-nums shrink-0 font-medium">
                             {fmt(actualPrice)}
-                            {' '}<span className="text-slate-400 text-xs">{billingLabel(prod.billing_interval)}</span>
                           </span>
                         </div>
                         {sel.moduleIds.map(mId => {
                           const mod = prod.modules?.find(m => m.id === mId)
                           const qty = moduleQuantities[mId] || 1
                           return mod ? (
-                            <div key={mId} className="flex justify-between text-xs pl-2">
-                              <span className="text-slate-300">+ {mod.name} {mod.has_quantity ? `(x${qty})` : ''}</span>
-                              <span className="text-slate-300 tabular-nums">
+                            <div key={mId} className="flex justify-between text-[11px] text-slate-400 pl-2">
+                              <span className="truncate pr-2">+ {mod.name} {mod.has_quantity ? `(x${qty})` : ''}</span>
+                              <span className="tabular-nums shrink-0 font-medium text-slate-300">
                                 {fmt(mod.price * qty)}
                               </span>
                             </div>
@@ -161,150 +172,93 @@ export function SummarySidebar({
                 </div>
               )
             })}
+          </div>
 
-            {/* Pricing block */}
-            <Separator className="bg-white/10" />
-            {oneTimeTotal > 0 && monthlyTotal > 0 ? (
-              <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-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>
-                  </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-sm font-extrabold text-white pt-1">
-                    <span>Brutto:</span>
-                    <span className="tabular-nums text-sky-400">{fmt(oneTimeGross)}</span>
-                  </div>
+          {/* Pricing Box */}
+          <div className="p-3 rounded-xl bg-slate-950/80 border border-white/10 space-y-2 text-xs">
+            {oneTimeTotal > 0 && (
+              <div className="space-y-1">
+                <div className="flex justify-between text-slate-400">
+                  <span>Kaufpreis Kasse (netto):</span>
+                  <span className="tabular-nums font-mono">{fmt(oneTimeNet)}</span>
                 </div>
-                <div className="space-y-1 pt-2 border-t border-white/10">
-                  <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>
-                  </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-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 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:</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-extrabold text-sky-400 pt-1">
-                  <span>Gesamt (brutto):</span>
-                  <span className="tabular-nums">{fmt(oneTimeGross)}</span>
-                </div>
-              </div>
-            ) : (
-              <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:</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-extrabold text-sky-400 pt-1">
-                  <span>Gesamt (brutto):</span>
-                  <span className="tabular-nums">{fmt(monthlyGross)} / mtl.</span>
+                <div className="flex justify-between font-bold text-white">
+                  <span>Kaufpreis Kasse (brutto):</span>
+                  <span className="tabular-nums font-mono text-primary">{fmt(oneTimeGross)}</span>
                 </div>
               </div>
             )}
-            {updatePriceModifier.label && (
-              <div className="text-xs text-green-400 bg-green-500/10 p-2.5 rounded-lg border border-green-500/20 space-y-1">
-                <p className="font-semibold flex items-center gap-1">
-                  <Check className="w-3.5 h-3.5" />
-                  Update-Rabatt aktiv
-                </p>
-                <p>{updatePriceModifier.label}</p>
-              </div>
-            )}
-            {!allCategoriesFilled && showValidationWarning && (
-              <div className="text-xs text-red-400 flex items-start gap-2 bg-red-500/10 p-3 rounded-xl border border-red-500/40 animate-eye-catcher">
-                <AlertCircle className="w-4 h-4 shrink-0 text-red-400 mt-0.5" />
-                <div>
-                  <p className="font-extrabold uppercase tracking-wider text-[11px] text-red-300">Pflichtkategorie fehlt!</p>
-                  <p className="text-[11px] text-slate-300 leading-relaxed">Bitte wählen Sie aus allen rot markierten Pflichtkategorien einen Artikel aus.</p>
+            {monthlyTotal > 0 && (
+              <div className={`space-y-1 ${oneTimeTotal > 0 ? 'pt-2 border-t border-white/10' : ''}`}>
+                <div className="flex justify-between text-slate-400">
+                  <span>Mietpreis Kasse (netto):</span>
+                  <span className="tabular-nums font-mono">{fmt(monthlyNet)} / mtl.</span>
+                </div>
+                <div className="flex justify-between font-bold text-white">
+                  <span>Mietpreis Kasse (brutto):</span>
+                  <span className="tabular-nums font-mono text-primary">{fmt(monthlyGross)} / mtl.</span>
                 </div>
               </div>
             )}
-            {!allCategoriesFilled && !showValidationWarning && (
-              <div className="text-xs text-slate-400 flex items-start gap-2 bg-slate-900/50 p-2.5 rounded-xl border border-white/5">
-                <AlertCircle className="w-4 h-4 shrink-0 text-slate-500 mt-0.5" />
-                <div>
-                  <p className="font-semibold text-[11px] text-slate-300">Pflichtkategorien beachten</p>
-                  <p className="text-[11px] text-slate-400">Bitte wählen Sie für die Rot markierten Kategorien ein Produkt aus.</p>
-                </div>
-              </div>
-            )}
-            {productValidationErrors.map((err, errIdx) => (
-              <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>
-            ))}
-          </div>            {/* Kassenname & Lizenznummer Direkt-Eingabe */}
-            <div className="pt-3 border-t border-white/10 space-y-2.5">
-              <p className="text-xs font-bold text-white uppercase tracking-wider">
-                {editingIdx !== null ? `Kasse ${editingIdx + 1} bearbeiten` : `Kassenbezeichnung`}
-              </p>
-              <div className="space-y-1.5">
-                <Label htmlFor="device-name-sidebar" className="text-[11px] text-slate-400">Kassenname (optional)</Label>
-                <Input
-                  id="device-name-sidebar"
-                  placeholder={`z.B. Kasse ${basketItems.length + 1}, Theke`}
-                  value={deviceName}
-                  onChange={e => setDeviceName(e.target.value)}
-                  className="bg-white/5 border-white/10 text-white text-xs h-8 rounded-lg"
-                />
-              </div>
-              <div className="space-y-1.5">
-                <Label htmlFor="license-number-sidebar" className="text-[11px] text-slate-400">Lizenznummer (optional)</Label>
-                <Input
-                  id="license-number-sidebar"
-                  placeholder="z.B. LIZ-12345 (eindeutig)"
-                  value={licenseNumber}
-                  onChange={e => setLicenseNumber(e.target.value)}
-                  className="bg-white/5 border-white/10 text-white text-xs h-8 rounded-lg"
-                />
-              </div>
-            </div>
-        </CardContent>
-        <CardFooter className="flex flex-col gap-2 shrink-0 p-4 pt-2 border-t border-white/10 bg-slate-950/80">
-          <Button
-            className="w-full h-11 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={isNextStepDisabled && basketItems.length === 0}
-          >
-            {editingIdx !== null ? (
-              <>Änderungen für &quot;{basketItems[editingIdx]?.deviceName || `Kasse ${editingIdx + 1}`}&quot; übernehmen</>
-            ) : (
-              <>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-7 text-xs" onClick={prevStep}>
-            Zurück zum Abrechnungsmodell
-          </Button>
-        </CardFooter>
-      </Card>
-    </div>
+          </div>
+        </div>
+
+        {/* Gerätename & Lizenznummer Eingabe */}
+        <div className="pt-2 border-t border-white/10 space-y-2.5">
+          <p className="text-xs font-bold text-white uppercase tracking-wider">
+            {isEditing ? `Kasse anpassen` : `Kassenbezeichnung`}
+          </p>
+          <div className="space-y-1">
+            <Label htmlFor="device-name-sidebar" className="text-[11px] text-slate-400">Kassenname (optional)</Label>
+            <Input
+              id="device-name-sidebar"
+              placeholder="z. B. Kasse 1, Hauptkasse, Theke"
+              value={deviceName}
+              onChange={e => setDeviceName(e.target.value)}
+              className="bg-white/5 border-white/10 text-white text-xs h-8 rounded-lg"
+            />
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="license-number-sidebar" className="text-[11px] text-slate-400">Lizenznummer (optional)</Label>
+            <Input
+              id="license-number-sidebar"
+              placeholder="z. B. LIZ-12345"
+              value={licenseNumber}
+              onChange={e => setLicenseNumber(e.target.value)}
+              className="bg-white/5 border-white/10 text-white text-xs h-8 rounded-lg font-mono uppercase"
+            />
+          </div>
+        </div>
+      </CardContent>
+
+      {/* ─── 3. FIXED BOTTOM ACTIONS (shrink-0) ─── */}
+      <CardFooter className="flex flex-col gap-2 shrink-0 p-4 border-t border-white/10 bg-slate-950/90">
+        {/* Primary Action Button: Save & Proceed immediately to Step 4 */}
+        <Button
+          className="w-full h-11 text-xs font-bold bg-primary hover:bg-primary/90 text-white shadow-lg shadow-primary/20 gap-2"
+          onClick={onSaveAndProceed}
+          disabled={isSaveDisabled}
+        >
+          {isEditing ? (
+            <>
+              <Save className="w-4 h-4" /> Änderungen speichern & zur Übersicht <ChevronRight className="w-4 h-4 ml-0.5" />
+            </>
+          ) : (
+            <>
+              <Plus className="w-4 h-4" /> Kasse zum Auftrag hinzufügen <ChevronRight className="w-4 h-4 ml-0.5" />
+            </>
+          )}
+        </Button>
+
+        {/* Back Button */}
+        <Button
+          variant="ghost"
+          className="w-full text-slate-400 hover:text-white h-7 text-xs"
+          onClick={prevStep}
+        >
+          <ChevronLeft className="w-3 h-3 mr-1" /> Zurück zum Abrechnungsmodell
+        </Button>
+      </CardFooter>
+    </Card>
   )
 }

shop/lib/actions/branding.ts

@@ -18,7 +18,7 @@ export async function getBrandingSettings(): Promise<BrandingSettings> {
       return {
         companyName: '',
         logoUrl: '',
-        developerFooter: 'B2B Shop made by hephex',
+        developerFooter: 'CASPOS Shop',
         street: '',
         zip: '',
         city: '',