style: refine step 3 software select UI

shop/app/actions/checkout.ts

@@ -262,7 +262,8 @@ export async function checkoutAction(params: {
       );
       const itemsWithDevice = itemSnapshot.items.map(i => ({
         ...i,
-        device_name: item.deviceName
+        device_name: item.deviceName,
+        license_number: item.licenseNumber
       }));
       orderItemsList.push(...itemsWithDevice);
       total += itemSnapshot.total;

shop/app/api/orders/checkout/route.ts

@@ -90,7 +90,8 @@ export async function POST(request: Request) {
         );
         const itemsWithDevice = itemSnapshot.items.map(i => ({
           ...i,
-          device_name: item.deviceName
+          device_name: item.deviceName,
+          license_number: item.licenseNumber
         }));
         orderItemsList.push(...itemsWithDevice);
         total += itemSnapshot.total;

shop/app/order/page.tsx

@@ -17,14 +17,7 @@ export default async function OrderPage({ searchParams }: PageProps) {
   return (
     <div className="min-h-screen bg-[#0a0a0a] text-white selection:bg-primary/30">
       <div className="container mx-auto py-10">
-        <div className="text-center mb-12">
+
-          <h1 className="text-5xl font-extrabold tracking-tight mb-4 text-gradient">
-            Konfigurieren Sie Ihre Lösung
-          </h1>
-          <p className="text-slate-400 text-lg max-w-2xl mx-auto">
-            Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
-          </p>
-        </div>
         
         <Suspense fallback={<div className="h-96 w-full animate-pulse bg-white/5 rounded-2xl" />}>
           <OrderDataWrapper

shop/components/order-wizard.tsx

@@ -6,6 +6,7 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { Product, ProductModule, Profile, EndCustomer, Order } from '@/lib/types'
 import { submitOrder, updateOrder } from '@/lib/actions/orders'
 import { createEndCustomer } from '@/lib/actions/end-customers'
+import { isLicenseNumberTaken } from '@/lib/actions/queries'
 import { Category } from '@/lib/types'
 import { Check } from 'lucide-react'
 
@@ -166,6 +167,7 @@ export function OrderWizard({
     if (upgradeMode && lockedDeviceId) return `${lockedDeviceId} – Upgrade`
     return ''
   })
+  const [licenseNumber, setLicenseNumber] = useState<string>('')
   const [editingIdx, setEditingIdx] = useState<number | null>(null)
   const [orderNotes, setOrderNotes] = useState<string>('')
   const [toast, setToast] = useState<{ message: string; type: 'error' | 'success' } | null>(null)
@@ -498,8 +500,8 @@ export function OrderWizard({
       }
     })
 
-    return { 
+    return {
-      overallMonthlyTotal: monthly, 
+      overallMonthlyTotal: monthly,
       overallOneTimeTotal: oneTime,
       linkedFeeProducts: feeProducts
     }
@@ -593,9 +595,27 @@ export function OrderWizard({
     }
   }
 
-  const addToBasket = () => {
+  const addToBasket = async () => {
+    const normLicense = licenseNumber.trim().toUpperCase()
+    if (normLicense) {
+      const isDuplicateInBasket = basketItems.some(
+        (item, idx) => idx !== editingIdx && item.licenseNumber?.toUpperCase().trim() === normLicense
+      )
+      if (isDuplicateInBasket) {
+        setToast({ message: `Lizenznummer "${licenseNumber}" ist bereits im aktuellen Warenkorb vorhanden.`, type: 'error' })
+        return
+      }
+
+      const isTaken = await isLicenseNumberTaken(normLicense, initialOrder?.id)
+      if (isTaken) {
+        setToast({ message: `Lizenznummer "${licenseNumber}" wird bereits von einer anderen Bestellung verwendet.`, type: 'error' })
+        return
+      }
+    }
+
     const currentItem = {
       deviceName: deviceName || (editingIdx !== null ? basketItems[editingIdx]?.deviceName : `Kasse ${basketItems.length + 1}`),
+      licenseNumber: normLicense,
       selections: JSON.parse(JSON.stringify(selections)),
       moduleQuantities: { ...moduleQuantities },
       billingInterval: selectedBillingInterval,
@@ -614,6 +634,7 @@ export function OrderWizard({
 
     // Reset current form config
     setDeviceName('')
+    setLicenseNumber('')
     setModuleQuantities({})
     const resetSels: Record<string, CategorySelection> = {}
     categories.forEach(cat => {
@@ -636,6 +657,7 @@ export function OrderWizard({
     setSelections(item.selections)
     setModuleQuantities(item.moduleQuantities)
     setDeviceName(item.deviceName)
+    setLicenseNumber(item.licenseNumber || '')
     setSelectedBillingInterval(item.billingInterval)
   }
 
@@ -644,6 +666,7 @@ export function OrderWizard({
       setEditingIdx(null)
       setModuleQuantities({})
       setDeviceName('')
+      setLicenseNumber('')
 
       const resetSels: Record<string, CategorySelection> = {}
       categories.forEach(cat => {
@@ -668,8 +691,24 @@ export function OrderWizard({
     try {
       let finalItems = [...basketItems]
       if (hasActiveSelection && allCategoriesFilled && productValidationErrors.length === 0) {
+        const normLicense = licenseNumber.trim().toUpperCase()
+        if (normLicense) {
+          const isDuplicateInBasket = basketItems.some(
+            (item, idx) => idx !== editingIdx && item.licenseNumber?.toUpperCase().trim() === normLicense
+          )
+          if (isDuplicateInBasket) {
+            throw new Error(`Lizenznummer "${licenseNumber}" ist bereits im aktuellen Warenkorb vorhanden.`)
+          }
+
+          const isTaken = await isLicenseNumberTaken(normLicense, initialOrder?.id)
+          if (isTaken) {
+            throw new Error(`Lizenznummer "${licenseNumber}" wird bereits von einer anderen Bestellung verwendet.`)
+          }
+        }
+
         const currentItem = {
           deviceName: deviceName || (editingIdx !== null ? basketItems[editingIdx]?.deviceName : `Kasse ${basketItems.length + 1}`),
+          licenseNumber: normLicense,
           selections: JSON.parse(JSON.stringify(selections)),
           moduleQuantities: { ...moduleQuantities },
           billingInterval: selectedBillingInterval,
@@ -685,6 +724,20 @@ export function OrderWizard({
         throw new Error('Bitte konfigurieren Sie mindestens eine Kasse.')
       }
 
+      // Check all license numbers in finalItems for duplicates
+      const licenseNumbers = finalItems.map(item => item.licenseNumber?.toUpperCase().trim()).filter(Boolean)
+      const uniqueLicenses = new Set(licenseNumbers)
+      if (uniqueLicenses.size !== licenseNumbers.length) {
+        throw new Error('Eine Lizenznummer darf im Warenkorb nicht mehrfach verwendet werden.')
+      }
+
+      for (const lic of uniqueLicenses) {
+        const isTaken = await isLicenseNumberTaken(lic, initialOrder?.id)
+        if (isTaken) {
+          throw new Error(`Die Lizenznummer "${lic}" wird bereits von einer anderen Bestellung verwendet.`)
+        }
+      }
+
       const res = await fetch('/api/orders/checkout', {
         method: 'POST',
         headers: {
@@ -792,6 +845,18 @@ export function OrderWizard({
 
   return (
     <div className={`mx-auto px-4 ${step === 3 ? 'max-w-screen-2xl' : 'max-w-5xl'}`}>
+      {/* Dynamic Header */}
+      {step !== 3 && (
+        <div className="text-center mb-12">
+          <h1 className="text-5xl font-extrabold tracking-tight mb-4 text-gradient">
+            Konfigurieren Sie Ihre Lösung
+          </h1>
+          <p className="text-slate-400 text-lg max-w-2xl mx-auto">
+            Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
+          </p>
+        </div>
+      )}
+
       {/* Global Stepper for Steps 1, 2, 4 */}
       {step !== 3 && (
         <div className="pt-12 pb-6">
@@ -867,10 +932,10 @@ export function OrderWizard({
               <div className="lg:col-span-2 flex flex-col justify-start pr-4 space-y-6">
                 <div>
                   <h1 className="text-3xl font-extrabold tracking-tight mb-2 text-gradient">
-                    Software konfigurieren
+                    Konfigurieren Sie Ihre Lösung
                   </h1>
                   <p className="text-slate-400 text-sm">
-                    Klicken Sie sich durch die Kategorien und wählen Sie Ihre Lizenzen.
+                    Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
                   </p>
                 </div>
 
@@ -885,20 +950,18 @@ export function OrderWizard({
                       <button
                         key={cat.id}
                         onClick={() => setActiveCategoryId(cat.id)}
-                        className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${
+                        className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${isActive
-                          isActive
                             ? 'bg-primary/10 border-primary text-white shadow-[0_0_20px_rgba(59,130,246,0.15)]'
                             : 'bg-white/5 border-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10'
-                        }`}
+                          }`}
                       >
                         {/* Left glow line for active category */}
                         {isActive && (
                           <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
                         )}
-                        
+
-                        <div className={`p-2 rounded-lg transition-colors ${
+                        <div className={`p-2 rounded-lg transition-colors ${isActive ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400 group-hover:text-white'
-                          isActive ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400 group-hover:text-white'
+                          }`}>
-                        }`}>
                           <CategoryIcon icon={cat.icon} className="w-4 h-4" />
                         </div>
 
@@ -913,14 +976,14 @@ export function OrderWizard({
 
                         {/* Status indicators */}
                         {hasSelection ? (
-                          <div className="w-5 h-5 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 shrink-0">
+                          <span className="text-[10px] px-2 py-0.5 rounded-full font-medium shrink-0 border border-green-500/30 text-green-400 bg-green-500/10">
-                            <Check className="w-3 h-3" />
+                            Ausgewählt
-                          </div>
+                          </span>
                         ) : isRequired ? (
-                          <div className="w-2 h-2 rounded-full bg-red-500 shrink-0 animate-pulse" />
+                          <span className="text-[10px] px-2 py-0.5 rounded-full font-medium shrink-0 border border-red-500/30 text-red-400 bg-red-500/10">
-                        ) : (
+                            Erforderlich
-                          <span className="text-[10px] text-slate-600 uppercase tracking-wider shrink-0 font-medium">Opt</span>
+                          </span>
-                        )}
+                        ) : null}
                       </button>
                     )
                   })}
@@ -992,6 +1055,8 @@ export function OrderWizard({
                     deleteBasketItem={deleteBasketItem}
                     deviceName={deviceName}
                     setDeviceName={setDeviceName}
+                    licenseNumber={licenseNumber}
+                    setLicenseNumber={setLicenseNumber}
                     addToBasket={addToBasket}
                     isNextStepDisabled={isNextStepDisabled}
                     hasActiveSelection={hasActiveSelection}

shop/components/wizard/step-customer.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import React, { useState, useMemo, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
 import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
@@ -154,448 +155,469 @@ export function StepCustomer({
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-8">
-        {/* ─── 1. ADMIN PARTNER SELECTION ─── */}
+        <div className={isAdmin ? 'grid grid-cols-1 lg:grid-cols-2 gap-8 items-start' : 'space-y-8'}>
-        {isAdmin && (
+          {/* ─── 1. ADMIN PARTNER SELECTION ─── */}
-          <div className="p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
+          {isAdmin && (
-            <div className="flex items-center justify-between gap-4 flex-wrap">
+            <div className="p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
-              <div>
+              <div className="flex items-center justify-between gap-4 flex-wrap">
-                <Label className="text-white font-bold text-base flex items-center gap-2">
+                <div>
-                  <Building2 className="w-5 h-5 text-primary" />
+                  <Label className="text-white font-bold text-base flex items-center gap-2">
-                  Partner-Auswahl (Admin-Funktion)
+                    <Building2 className="w-5 h-5 text-primary" />
-                </Label>
+                    Partner-Auswahl (Admin-Funktion)
-                <p className="text-xs text-slate-400 mt-0.5">
+                  </Label>
-                  Wählen Sie einen Partner aus, um dessen Kunden anzuzeigen, oder &quot;Alle Partner&quot;.
+                  <p className="text-xs text-slate-400 mt-0.5">
-                </p>
+                    Wählen Sie einen Partner aus, um dessen Kunden anzuzeigen, oder &quot;Alle Partner&quot;.
-              </div>
+                  </p>
-              <Badge variant="outline" className="border-primary/30 text-primary bg-primary/10">
-                Admin Modus
-              </Badge>
-            </div>
-
-            {/* Partner Header Controls: Search & Page Size */}
-            <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
-                <Input
-                  placeholder="Partner suchen..."
-                  value={partnerSearchTerm}
-                  onChange={(e) => setPartnerSearchTerm(e.target.value)}
-                  className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-sm h-9"
-                />
-              </div>
-
-              <div className="flex items-center gap-2 self-end sm:self-auto">
-                <span className="text-xs text-slate-400 whitespace-nowrap">Partner pro Seite:</span>
-                <select
-                  value={partnerPageSize}
-                  onChange={(e) => setPartnerPageSize(Number(e.target.value))}
-                  className="h-9 rounded-md border border-white/10 bg-slate-900 px-2 py-1 text-xs text-white shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
-                >
-                  <option value={10}>10</option>
-                  <option value={20}>20</option>
-                  <option value={50}>50</option>
-                </select>
-              </div>
-            </div>
-
-            {/* Partner Card List */}
-            <div className="space-y-2 max-h-72 overflow-y-auto pr-1">
-              {/* Reserved Fixed Card: Alle Partner */}
-              <div
-                onClick={() => {
-                  setSelectedCompanyId('all')
-                  setSelectedEndCustomerId(null)
-                }}
-                className={`flex items-center justify-between p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
-                  selectedCompanyId === 'all' || !selectedCompanyId
-                    ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
-                    : 'border-white/5 bg-white/5 hover:bg-white/10'
-                }`}
-              >
-                <div className="flex items-center gap-3">
-                  <div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center text-primary font-bold shrink-0">
-                    <Users className="w-4 h-4" />
-                  </div>
-                  <div>
-                    <p className="font-semibold text-white text-sm">
-                      Alle Partner (Firmenübergreifend)
-                    </p>
-                    <p className="text-xs text-slate-400">
-                      Zeigt Kunden aller registrierten Partnerunternehmen an
-                    </p>
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Badge variant="outline" className="border-white/10 text-slate-300 text-xs bg-white/5">
-                    {endCustomers.filter((c) => !c.is_anonymized).length} Kunden gesamt
-                  </Badge>
-                  {(selectedCompanyId === 'all' || !selectedCompanyId) && (
-                    <Check className="w-5 h-5 text-primary shrink-0" />
-                  )}
                 </div>
+                <Badge variant="outline" className="border-primary/30 text-primary bg-primary/10">
+                  Admin Modus
+                </Badge>
               </div>
 
-              {/* Dynamic Partner Cards */}
+              {/* Partner Header Controls: Search & Page Size */}
-              {paginatedCompanies.map((c: any) => {
+              <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
-                const isSelected = selectedCompanyId === c.id
+                <div className="relative flex-1">
-                const customerCount = customerCountMap[c.id] || 0
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                  <Input
+                    placeholder="Partner suchen..."
+                    value={partnerSearchTerm}
+                    onChange={(e) => setPartnerSearchTerm(e.target.value)}
+                    className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 focus:border-primary text-sm h-9"
+                  />
+                </div>
 
-                return (
+                <div className="flex items-center gap-2 self-end sm:self-auto">
-                  <div
+                  <span className="text-xs text-slate-400 whitespace-nowrap">Partner pro Seite:</span>
-                    key={c.id}
+                  <select
-                    onClick={() => {
+                    value={partnerPageSize}
-                      setSelectedCompanyId(c.id)
+                    onChange={(e) => setPartnerPageSize(Number(e.target.value))}
-                      setSelectedEndCustomerId(null)
+                    className="h-9 rounded-md border border-white/10 bg-slate-900 px-2 py-1 text-xs text-white shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
-                    }}
-                    className={`flex items-center justify-between p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
-                      isSelected
-                        ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
-                        : 'border-white/5 bg-white/5 hover:bg-white/10'
-                    }`}
                   >
-                    <div className="flex items-center gap-3">
+                    <option value={10}>10</option>
-                      <div className="w-8 h-8 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-300 font-bold shrink-0">
+                    <option value={20}>20</option>
-                        <Building2 className="w-4 h-4 text-slate-400" />
+                    <option value={50}>50</option>
-                      </div>
+                  </select>
-                      <div>
-                        <p className="font-semibold text-white text-sm">{c.name}</p>
-                        {(c.street || c.zip || c.city) && (
-                          <p className="text-xs text-slate-400 mt-0.5">
-                            {[c.street, [c.zip, c.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')}
-                          </p>
-                        )}
-                      </div>
-                    </div>
-
-                    <div className="flex items-center gap-2">
-                      <Badge
-                        variant="outline"
-                        className={`text-xs ${
-                          customerCount > 0
-                            ? 'border-green-500/30 text-green-400 bg-green-500/10'
-                            : 'border-white/10 text-slate-500 bg-white/5'
-                        }`}
-                      >
-                        {customerCount} {customerCount === 1 ? 'Kunde' : 'Kunden'}
-                      </Badge>
-                      {isSelected && <Check className="w-5 h-5 text-primary shrink-0" />}
-                    </div>
-                  </div>
-                )
-              })}
-
-              {filteredCompanies.length === 0 && (
-                <div className="p-4 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5">
-                  Keine Partner mit dem Suchbegriff &quot;{partnerSearchTerm}&quot; gefunden.
                 </div>
-              )}
-            </div>
-
-            {/* Partner Pagination Controls */}
-            <div className="flex items-center justify-between border-t border-white/10 pt-3 text-xs text-slate-400 flex-wrap gap-2">
-              <div>
-                Zeige {totalPartnerCount === 0 ? 0 : (partnerCurrentPage - 1) * partnerPageSize + 1} bis{' '}
-                {Math.min(partnerCurrentPage * partnerPageSize, totalPartnerCount)} von {totalPartnerCount} Partnern
               </div>
 
-              <div className="flex items-center gap-1">
+              {/* Partner Card List */}
-                <Button
+              <div className="space-y-2 max-h-[30rem] overflow-y-auto pr-1">
-                  variant="ghost"
+                {/* Reserved Fixed Card: Alle Partner */}
-                  size="sm"
+                <div
-                  onClick={() => setPartnerCurrentPage(1)}
+                  onClick={() => {
-                  disabled={partnerCurrentPage === 1}
+                    setSelectedCompanyId('all')
-                  className="h-8 px-2 text-slate-400 hover:text-white"
+                    setSelectedEndCustomerId(null)
-                  title="Erste Seite"
+                  }}
+                  className={`flex items-center justify-between p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
+                    selectedCompanyId === 'all' || !selectedCompanyId
+                      ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
+                      : 'border-white/5 bg-white/5 hover:bg-white/10'
+                  }`}
                 >
-                  <ChevronsLeft className="w-4 h-4" />
+                  <div className="flex items-center gap-3">
-                </Button>
+                    <div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center text-primary font-bold shrink-0">
-                <Button
+                      <Users className="w-4 h-4" />
-                  variant="outline"
+                    </div>
-                  size="sm"
+                    <div>
-                  onClick={() => setPartnerCurrentPage((p) => Math.max(1, p - 1))}
+                      <p className="font-semibold text-white text-sm">
-                  disabled={partnerCurrentPage === 1}
+                        Alle Partner (Firmenübergreifend)
-                  className="h-8 px-2.5 border-white/10 text-white"
+                      </p>
-                >
+                      <p className="text-xs text-slate-400">
-                  <ChevronLeft className="w-3.5 h-3.5 mr-1" /> Zurück
+                        Zeigt Kunden aller registrierten Partnerunternehmen an
-                </Button>
+                      </p>
-
+                    </div>
-                <span className="px-2 font-medium text-slate-300">
-                  Seite {partnerCurrentPage} von {totalPartnerPages}
-                </span>
-
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setPartnerCurrentPage((p) => Math.min(totalPartnerPages, p + 1))}
-                  disabled={partnerCurrentPage === totalPartnerPages}
-                  className="h-8 px-2.5 border-white/10 text-white"
-                >
-                  Vor <ChevronRight className="w-3.5 h-3.5 ml-1" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setPartnerCurrentPage(totalPartnerPages)}
-                  disabled={partnerCurrentPage === totalPartnerPages}
-                  className="h-8 px-2 text-slate-400 hover:text-white"
-                  title="Letzte Seite"
-                >
-                  <ChevronsRight className="w-4 h-4" />
-                </Button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Modus-Toggle: Bestandskunde vs. Neuer Kunde */}
-        <div className="flex gap-2">
-          <Button
-            variant={customerMode === 'select' ? 'default' : 'ghost'}
-            size="sm"
-            onClick={() => setCustomerMode('select')}
-            className={`gap-2 ${customerMode === 'select' ? '' : 'text-white'}`}
-          >
-            <Building2 className="w-4 h-4" /> Bestandskunde wählen
-          </Button>
-          <Button
-            variant={customerMode === 'create' ? 'default' : 'ghost'}
-            size="sm"
-            onClick={() => setCustomerMode('create')}
-            className={`gap-2 ${customerMode === 'create' ? '' : 'text-white'}`}
-          >
-            <UserPlus className="w-4 h-4" /> Neuen Kunden anlegen
-          </Button>
-        </div>
-
-        {/* ─── 2. CUSTOMER SELECTION ─── */}
-        {customerMode === 'select' && (
-          <div className="p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
-            <div className="flex items-center justify-between gap-4 flex-wrap">
-              <div>
-                <Label className="text-white font-bold text-base flex items-center gap-2">
-                  <User className="w-5 h-5 text-primary" />
-                  Kunden-Auswahl
-                </Label>
-                <p className="text-xs text-slate-400 mt-0.5">
-                  {isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
-                    ? `Endkunden für den Partner "${companies.find((c) => c.id === selectedCompanyId)?.name || selectedCompanyId}"`
-                    : 'Alle verfügbaren Endkunden'}
-                </p>
-              </div>
-            </div>
-
-            {customersByCompany.length === 0 ? (
-              <div className="p-6 rounded-xl bg-white/5 border border-white/10 text-center space-y-3">
-                <Building2 className="w-10 h-10 text-slate-600 mx-auto" />
-                <p className="text-slate-400">
-                  {isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
-                    ? 'Keine Endkunden für den ausgewählten Partner vorhanden.'
-                    : 'Noch keine Endkunden vorhanden.'}
-                </p>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setCustomerMode('create')}
-                  className="border-white/10 text-white"
-                >
-                  <UserPlus className="w-4 h-4 mr-2" /> Ersten Kunden anlegen
-                </Button>
-              </div>
-            ) : (
-              <div className="space-y-4">
-                {/* Customer Header Controls: Search & Page Size */}
-                <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
-                  <div className="relative flex-1">
-                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
-                    <Input
-                      placeholder="Kunden suchen nach Name, Ort, PLZ..."
-                      value={searchTerm}
-                      onChange={(e) => setSearchTerm(e.target.value)}
-                      className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 text-sm h-9"
-                    />
                   </div>
+                  <div className="flex items-center gap-2">
+                    <Badge variant="outline" className="border-white/10 text-slate-300 text-xs bg-white/5">
+                      {endCustomers.filter((c) => !c.is_anonymized).length} Kunden gesamt
+                    </Badge>
+                    {(selectedCompanyId === 'all' || !selectedCompanyId) && (
+                      <Check className="w-5 h-5 text-primary shrink-0" />
+                    )}
+                  </div>
+                </div>
 
-                  {/* Page Size Selector */}
+                {/* Dynamic Partner Cards */}
-                  <div className="flex items-center gap-2 self-end sm:self-auto">
+                {paginatedCompanies.map((c: any) => {
-                    <span className="text-xs text-slate-400 whitespace-nowrap">Kunden pro Seite:</span>
+                  const isSelected = selectedCompanyId === c.id
-                    <select
+                  const customerCount = customerCountMap[c.id] || 0
-                      value={pageSize}
+
-                      onChange={(e) => setPageSize(Number(e.target.value))}
+                  return (
-                      className="h-9 rounded-md border border-white/10 bg-slate-900 px-2 py-1 text-xs text-white shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
+                    <div
+                      key={c.id}
+                      onClick={() => {
+                        setSelectedCompanyId(c.id)
+                        setSelectedEndCustomerId(null)
+                      }}
+                      className={`flex items-center justify-between p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
+                        isSelected
+                          ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
+                          : 'border-white/5 bg-white/5 hover:bg-white/10'
+                      }`}
                     >
-                      <option value={10}>10</option>
+                      <div className="flex items-center gap-3">
-                      <option value={20}>20</option>
+                        <div className="w-8 h-8 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-300 font-bold shrink-0">
-                      <option value={50}>50</option>
+                          <Building2 className="w-4 h-4 text-slate-400" />
-                    </select>
+                        </div>
+                        <div>
+                          <p className="font-semibold text-white text-sm">{c.name}</p>
+                          {(c.street || c.zip || c.city) && (
+                            <p className="text-xs text-slate-400 mt-0.5">
+                              {[c.street, [c.zip, c.city].filter(Boolean).join(' ')].filter(Boolean).join(', ')}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+
+                      <div className="flex items-center gap-2">
+                        <Badge
+                          variant="outline"
+                          className={`text-xs ${
+                            customerCount > 0
+                              ? 'border-green-500/30 text-green-400 bg-green-500/10'
+                              : 'border-white/10 text-slate-500 bg-white/5'
+                          }`}
+                        >
+                          {customerCount} {customerCount === 1 ? 'Kunde' : 'Kunden'}
+                        </Badge>
+                        {isSelected && <Check className="w-5 h-5 text-primary shrink-0" />}
+                      </div>
+                    </div>
+                  )
+                })}
+
+                {filteredCompanies.length === 0 && (
+                  <div className="p-4 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5">
+                    Keine Partner mit dem Suchbegriff &quot;{partnerSearchTerm}&quot; gefunden.
                   </div>
+                )}
+              </div>
+
+              {/* Partner Pagination Controls */}
+              <div className="flex items-center justify-between border-t border-white/10 pt-3 text-xs text-slate-400 flex-wrap gap-2">
+                <div>
+                  Zeige {totalPartnerCount === 0 ? 0 : (partnerCurrentPage - 1) * partnerPageSize + 1} bis{' '}
+                  {Math.min(partnerCurrentPage * partnerPageSize, totalPartnerCount)} von {totalPartnerCount} Partnern
                 </div>
 
-                {filteredCustomers.length === 0 ? (
+                <div className="flex items-center gap-1">
-                  <div className="p-4 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5">
+                  <Button
-                    Keine passenden Kunden gefunden.
+                    variant="ghost"
-                  </div>
+                    size="sm"
-                ) : (
+                    onClick={() => setPartnerCurrentPage(1)}
-                  <>
+                    disabled={partnerCurrentPage === 1}
-                    {/* Customer Card List */}
+                    className="h-8 px-2 text-slate-400 hover:text-white"
-                    <div className="space-y-2 max-h-80 overflow-y-auto pr-1">
+                    title="Erste Seite"
-                      {paginatedCustomers.map((customer) => {
+                  >
-                        const isSelected = selectedEndCustomerId === customer.id
+                    <ChevronsLeft className="w-4 h-4" />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setPartnerCurrentPage((p) => Math.max(1, p - 1))}
+                    disabled={partnerCurrentPage === 1}
+                    className="h-8 px-2.5 border-white/10 text-white"
+                  >
+                    <ChevronLeft className="w-3.5 h-3.5 mr-1" /> Zurück
+                  </Button>
 
-                        return (
+                  <span className="px-2 font-medium text-slate-300">
-                          <div
+                    Seite {partnerCurrentPage} von {totalPartnerPages}
-                            key={customer.id}
+                  </span>
-                            onClick={() => handleSelectCustomer(customer)}
-                            className={`flex items-start p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
-                              isSelected
-                                ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
-                                : 'border-white/5 bg-white/5 hover:bg-white/10'
-                            }`}
-                          >
-                            <input
-                              type="radio"
-                              name="end_customer"
-                              value={customer.id}
-                              checked={isSelected}
-                              onChange={() => handleSelectCustomer(customer)}
-                              className="sr-only"
-                            />
-                            <div className="flex-1">
-                              <div className="flex items-center gap-2 flex-wrap">
-                                <p className="font-semibold text-white text-sm">{customer.company_name}</p>
-                                {isAdmin && customer.partner_id && (
-                                  <Badge
-                                    variant="outline"
-                                    className="text-[10px] border-white/10 text-slate-400 bg-white/5"
-                                  >
-                                    Partner: {companies.find((co) => co.id === customer.partner_id)?.name || customer.partner_id}
-                                  </Badge>
-                                )}
-                              </div>
-                              <p className="text-xs text-slate-400 mt-0.5">
-                                {[customer.first_name, customer.last_name].filter(Boolean).join(' ')}
-                                {customer.first_name || customer.last_name ? ' · ' : ''}
-                                {[customer.street, customer.zip, customer.city].filter(Boolean).join(', ')}
-                              </p>
-                            </div>
-                            {isSelected && <Check className="w-5 h-5 text-primary mt-0.5 shrink-0" />}
-                          </div>
-                        )
-                      })}
-                    </div>
 
-                    {/* Customer Pagination Footer */}
+                  <Button
-                    <div className="flex items-center justify-between border-t border-white/10 pt-3 text-xs text-slate-400 flex-wrap gap-2">
+                    variant="outline"
-                      <div>
+                    size="sm"
-                        Zeige {totalCustomerCount === 0 ? 0 : (currentPage - 1) * pageSize + 1} bis{' '}
+                    onClick={() => setPartnerCurrentPage((p) => Math.min(totalPartnerPages, p + 1))}
-                        {Math.min(currentPage * pageSize, totalCustomerCount)} von {totalCustomerCount} Kunden
+                    disabled={partnerCurrentPage === totalPartnerPages}
-                      </div>
+                    className="h-8 px-2.5 border-white/10 text-white"
-
+                  >
-                      <div className="flex items-center gap-1">
+                    Vor <ChevronRight className="w-3.5 h-3.5 ml-1" />
-                        <Button
+                  </Button>
-                          variant="ghost"
+                  <Button
-                          size="sm"
+                    variant="ghost"
-                          onClick={() => setCurrentPage(1)}
+                    size="sm"
-                          disabled={currentPage === 1}
+                    onClick={() => setPartnerCurrentPage(totalPartnerPages)}
-                          className="h-8 px-2 text-slate-400 hover:text-white"
+                    disabled={partnerCurrentPage === totalPartnerPages}
-                          title="Erste Seite"
+                    className="h-8 px-2 text-slate-400 hover:text-white"
-                        >
+                    title="Letzte Seite"
-                          <ChevronsLeft className="w-4 h-4" />
+                  >
-                        </Button>
+                    <ChevronsRight className="w-4 h-4" />
-                        <Button
+                  </Button>
-                          variant="outline"
+                </div>
-                          size="sm"
-                          onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-                          disabled={currentPage === 1}
-                          className="h-8 px-2.5 border-white/10 text-white"
-                        >
-                          <ChevronLeft className="w-3.5 h-3.5 mr-1" /> Zurück
-                        </Button>
-
-                        <span className="px-2 font-medium text-slate-300">
-                          Seite {currentPage} von {totalCustomerPages}
-                        </span>
-
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => setCurrentPage((p) => Math.min(totalCustomerPages, p + 1))}
-                          disabled={currentPage === totalCustomerPages}
-                          className="h-8 px-2.5 border-white/10 text-white"
-                        >
-                          Vor <ChevronRight className="w-3.5 h-3.5 ml-1" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => setCurrentPage(totalCustomerPages)}
-                          disabled={currentPage === totalCustomerPages}
-                          className="h-8 px-2 text-slate-400 hover:text-white"
-                          title="Letzte Seite"
-                        >
-                          <ChevronsRight className="w-4 h-4" />
-                        </Button>
-                      </div>
-                    </div>
-                  </>
-                )}
               </div>
-            )}
+            </div>
-          </div>
+          )}
-        )}
 
-        {/* ─── MODUS B: NEUEN KUNDEN ANLEGEN ─── */}
+          {/* ─── 2. CUSTOMER WRAPPER ─── */}
-        {customerMode === 'create' && (
+          <div className="space-y-6">
-          <div className="grid md:grid-cols-2 gap-4 p-4 rounded-xl bg-white/5 border border-white/10">
+            {/* Modus-Toggle: Bestandskunde vs. Neuer Kunde */}
-            {(
+            <div className="flex gap-2">
-              [
-                { label: 'Firmenname *', key: 'company_name', span: true, placeholder: 'GmbH / Einzelunternehmen' },
-                { label: 'USt-IdNr.', key: 'vat_id', span: false, placeholder: 'DE123456789' },
-                { label: 'Vorname', key: 'first_name', span: false, placeholder: '' },
-                { label: 'Nachname', key: 'last_name', span: false, placeholder: '' },
-                { label: 'Straße & Hausnummer', key: 'street', span: true, placeholder: '' },
-                { label: 'PLZ', key: 'zip', span: false, placeholder: '' },
-                { label: 'Ort', key: 'city', span: false, placeholder: '' },
-                { label: 'Kontoinhaber', key: 'bank_owner', span: false, placeholder: 'Max Mustermann' },
-                { label: 'IBAN', key: 'bank_iban', span: false, placeholder: 'DE89370400440532013000' },
-                { label: 'BIC', key: 'bank_bic', span: false, placeholder: 'SOLADE21XXX' },
-                { label: 'Bankname', key: 'bank_name', span: false, placeholder: 'Musterbank' },
-              ] as const
-            ).map(({ label, key, span, placeholder }) => (
-              <div key={key} className={`space-y-1.5 ${span ? 'md:col-span-2' : ''}`}>
-                <Label className="text-slate-300 text-sm">{label}</Label>
-                <Input
-                  value={newCustomerForm[key] || ''}
-                  onChange={(e) =>
-                    setNewCustomerForm((prev: any) => ({ ...prev, [key]: e.target.value }))
-                  }
-                  placeholder={placeholder}
-                  className="bg-white/5 border-white/10 text-white placeholder:text-slate-500"
-                />
-              </div>
-            ))}
-            <div className="md:col-span-2 flex gap-2">
               <Button
-                onClick={handleCreateCustomer}
+                variant={customerMode === 'select' ? 'default' : 'ghost'}
-                disabled={isCreatingCustomer || !newCustomerForm.company_name?.trim()}
+                size="sm"
-                className="gap-2"
+                onClick={() => setCustomerMode('select')}
+                className={`gap-2 ${customerMode === 'select' ? '' : 'text-white'}`}
               >
-                {isCreatingCustomer ? (
+                <Building2 className="w-4 h-4" /> Bestandskunde wählen
-                  <Loader2 className="w-4 h-4 animate-spin" />
-                ) : (
-                  <UserPlus className="w-4 h-4" />
-                )}
-                Kunden speichern & auswählen
               </Button>
               <Button
-                variant="ghost"
+                variant={customerMode === 'create' ? 'default' : 'ghost'}
-                className="text-white"
+                size="sm"
-                onClick={() => setCustomerMode('select')}
+                onClick={() => setCustomerMode('create')}
+                className={`gap-2 ${customerMode === 'create' ? '' : 'text-white'}`}
               >
-                Abbrechen
+                <UserPlus className="w-4 h-4" /> Neuen Kunden anlegen
               </Button>
             </div>
+
+            <AnimatePresence mode="wait">
+              {/* ─── 2. CUSTOMER SELECTION ─── */}
+              {customerMode === 'select' && (
+                <motion.div
+                  key="select"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  transition={{ duration: 0.2 }}
+                  className="p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4"
+                >
+                  <div className="flex items-center justify-between gap-4 flex-wrap">
+                    <div>
+                      <Label className="text-white font-bold text-base flex items-center gap-2">
+                        <User className="w-5 h-5 text-primary" />
+                        Kunden-Auswahl
+                      </Label>
+                      <p className="text-xs text-slate-400 mt-0.5">
+                        {isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
+                          ? `Endkunden für den Partner "${companies.find((c) => c.id === selectedCompanyId)?.name || selectedCompanyId}"`
+                          : 'Alle verfügbaren Endkunden'}
+                      </p>
+                    </div>
+                  </div>
+
+                  {customersByCompany.length === 0 ? (
+                    <div className="p-6 rounded-xl bg-white/5 border border-white/10 text-center space-y-3">
+                      <Building2 className="w-10 h-10 text-slate-600 mx-auto" />
+                      <p className="text-slate-400">
+                        {isAdmin && selectedCompanyId && selectedCompanyId !== 'all'
+                          ? 'Keine Endkunden für den ausgewählten Partner vorhanden.'
+                          : 'Noch keine Endkunden vorhanden.'}
+                      </p>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setCustomerMode('create')}
+                        className="border-white/10 text-white"
+                      >
+                        <UserPlus className="w-4 h-4 mr-2" /> Ersten Kunden anlegen
+                      </Button>
+                    </div>
+                  ) : (
+                    <div className="space-y-4">
+                      {/* Customer Header Controls: Search & Page Size */}
+                      <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
+                        <div className="relative flex-1">
+                          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                          <Input
+                            placeholder="Kunden suchen nach Name, Ort, PLZ..."
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-500 text-sm h-9"
+                          />
+                        </div>
+
+                        {/* Page Size Selector */}
+                        <div className="flex items-center gap-2 self-end sm:self-auto">
+                          <span className="text-xs text-slate-400 whitespace-nowrap">Kunden pro Seite:</span>
+                          <select
+                            value={pageSize}
+                            onChange={(e) => setPageSize(Number(e.target.value))}
+                            className="h-9 rounded-md border border-white/10 bg-slate-900 px-2 py-1 text-xs text-white shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
+                          >
+                            <option value={10}>10</option>
+                            <option value={20}>20</option>
+                            <option value={50}>50</option>
+                          </select>
+                        </div>
+                      </div>
+
+                      {filteredCustomers.length === 0 ? (
+                        <div className="p-4 text-center text-slate-400 text-xs bg-white/5 rounded-xl border border-white/5">
+                          Keine passenden Kunden gefunden.
+                        </div>
+                      ) : (
+                        <>
+                          {/* Customer Card List */}
+                          <div className="space-y-2 max-h-[30rem] overflow-y-auto pr-1">
+                            {paginatedCustomers.map((customer) => {
+                              const isSelected = selectedEndCustomerId === customer.id
+
+                              return (
+                                <div
+                                  key={customer.id}
+                                  onClick={() => handleSelectCustomer(customer)}
+                                  className={`flex items-start p-3.5 rounded-xl border-2 cursor-pointer transition-all select-none ${
+                                    isSelected
+                                      ? 'border-primary bg-primary/10 shadow-lg shadow-primary/5'
+                                      : 'border-white/5 bg-white/5 hover:bg-white/10'
+                                  }`}
+                                >
+                                  <input
+                                    type="radio"
+                                    name="end_customer"
+                                    value={customer.id}
+                                    checked={isSelected}
+                                    onChange={() => handleSelectCustomer(customer)}
+                                    className="sr-only"
+                                  />
+                                  <div className="flex-1">
+                                    <div className="flex items-center gap-2 flex-wrap">
+                                      <p className="font-semibold text-white text-sm">{customer.company_name}</p>
+                                      {isAdmin && customer.partner_id && (
+                                        <Badge
+                                          variant="outline"
+                                          className="text-[10px] border-white/10 text-slate-400 bg-white/5"
+                                        >
+                                          Partner: {companies.find((co) => co.id === customer.partner_id)?.name || customer.partner_id}
+                                        </Badge>
+                                      )}
+                                    </div>
+                                    <p className="text-xs text-slate-400 mt-0.5">
+                                      {[customer.first_name, customer.last_name].filter(Boolean).join(' ')}
+                                      {customer.first_name || customer.last_name ? ' · ' : ''}
+                                      {[customer.street, customer.zip, customer.city].filter(Boolean).join(', ')}
+                                    </p>
+                                  </div>
+                                  {isSelected && <Check className="w-5 h-5 text-primary mt-0.5 shrink-0" />}
+                                </div>
+                              );
+                            })}
+                          </div>
+
+                          {/* Customer Pagination Footer */}
+                          <div className="flex items-center justify-between border-t border-white/10 pt-3 text-xs text-slate-400 flex-wrap gap-2">
+                            <div>
+                              Zeige {totalCustomerCount === 0 ? 0 : (currentPage - 1) * pageSize + 1} bis{' '}
+                              {Math.min(currentPage * pageSize, totalCustomerCount)} von {totalCustomerCount} Kunden
+                            </div>
+
+                            <div className="flex items-center gap-1">
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setCurrentPage(1)}
+                                disabled={currentPage === 1}
+                                className="h-8 px-2 text-slate-400 hover:text-white"
+                                title="Erste Seite"
+                              >
+                                <ChevronsLeft className="w-4 h-4" />
+                              </Button>
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                                disabled={currentPage === 1}
+                                className="h-8 px-2.5 border-white/10 text-white"
+                              >
+                                <ChevronLeft className="w-3.5 h-3.5 mr-1" /> Zurück
+                              </Button>
+
+                              <span className="px-2 font-medium text-slate-300">
+                                Seite {currentPage} von {totalCustomerPages}
+                              </span>
+
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setCurrentPage((p) => Math.min(totalCustomerPages, p + 1))}
+                                disabled={currentPage === totalCustomerPages}
+                                className="h-8 px-2.5 border-white/10 text-white"
+                              >
+                                Vor <ChevronRight className="w-3.5 h-3.5 ml-1" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setCurrentPage(totalCustomerPages)}
+                                disabled={currentPage === totalCustomerPages}
+                                className="h-8 px-2 text-slate-400 hover:text-white"
+                                title="Letzte Seite"
+                              >
+                                <ChevronsRight className="w-4 h-4" />
+                              </Button>
+                            </div>
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  )}
+                </motion.div>
+              )}
+
+              {/* ─── MODUS B: NEUEN KUNDEN ANLEGEN ─── */}
+              {customerMode === 'create' && (
+                <motion.div
+                  key="create"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  transition={{ duration: 0.2 }}
+                  className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-xl bg-white/5 border border-white/10"
+                >
+                  {(
+                    [
+                      { label: 'Firmenname *', key: 'company_name', span: true, placeholder: 'GmbH / Einzelunternehmen' },
+                      { label: 'USt-IdNr.', key: 'vat_id', span: false, placeholder: 'DE123456789' },
+                      { label: 'Vorname', key: 'first_name', span: false, placeholder: '' },
+                      { label: 'Nachname', key: 'last_name', span: false, placeholder: '' },
+                      { label: 'Straße & Hausnummer', key: 'street', span: true, placeholder: '' },
+                      { label: 'PLZ', key: 'zip', span: false, placeholder: '' },
+                      { label: 'Ort', key: 'city', span: false, placeholder: '' },
+                      { label: 'Kontoinhaber', key: 'bank_owner', span: false, placeholder: 'Max Mustermann' },
+                      { label: 'IBAN', key: 'bank_iban', span: false, placeholder: 'DE89370400440532013000' },
+                      { label: 'BIC', key: 'bank_bic', span: false, placeholder: 'SOLADE21XXX' },
+                      { label: 'Bankname', key: 'bank_name', span: false, placeholder: 'Musterbank' },
+                    ] as const
+                  ).map(({ label, key, span, placeholder }) => (
+                    <div key={key} className={`space-y-1.5 ${span ? 'md:col-span-2' : ''}`}>
+                      <Label className="text-slate-300 text-sm">{label}</Label>
+                      <Input
+                        value={newCustomerForm[key] || ''}
+                        onChange={(e) =>
+                          setNewCustomerForm((prev: any) => ({ ...prev, [key]: e.target.value }))
+                        }
+                        placeholder={placeholder}
+                        className="bg-white/5 border-white/10 text-white placeholder:text-slate-500"
+                      />
+                    </div>
+                  ))}
+                  <div className="md:col-span-2 flex gap-2">
+                    <Button
+                      onClick={handleCreateCustomer}
+                      disabled={isCreatingCustomer || !newCustomerForm.company_name?.trim()}
+                      className="gap-2"
+                    >
+                      {isCreatingCustomer ? (
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                      ) : (
+                        <UserPlus className="w-4 h-4" />
+                      )}
+                      Kunden speichern & auswählen
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      className="text-white"
+                      onClick={() => setCustomerMode('select')}
+                    >
+                      Abbrechen
+                    </Button>
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
           </div>
-        )}
+        </div>
       </CardContent>
       <CardFooter className="flex justify-end border-t border-white/10 pt-6">
         <Button

shop/components/wizard/step-software.tsx

@@ -67,10 +67,10 @@ 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">
+    <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 gap-2 text-white">
+        <CardTitle className="text-xl flex items-center gap-2 text-white font-bold">
-          <ShoppingCart className="w-5 h-5 text-blue-400" />
+          <ShoppingCart className="w-5 h-5 text-primary" />
           Optionen wählen
         </CardTitle>
         <CardDescription className="text-slate-400">
@@ -88,238 +88,253 @@ export function StepSoftware({
             className="space-y-6"
           >
             {/* Category header */}
-            <div className="flex items-center gap-3">
+            <div className="flex items-center gap-3 bg-white/5 p-4 rounded-xl border border-white/10">
               <div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center">
                 <CategoryIcon icon={currentCategory.icon} className="w-4 h-4 text-primary" />
               </div>
               <div>
-                <h3 className="font-bold text-white text-base">{currentCategory.name}</h3>
+                <h3 className="font-bold text-white text-sm">{currentCategory.name}</h3>
                 {currentCategory.description && (
-                  <p className="text-slate-400 text-xs">{currentCategory.description}</p>
+                  <p className="text-slate-400 text-xs mt-0.5">{currentCategory.description}</p>
                 )}
               </div>
               {sel?.productIds && sel.productIds.length > 0 ? (
-                <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30">
+                <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full">
                   <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">
+                <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-xs rounded-full">
                   <Check className="w-3 h-3 mr-1" /> Ausgewählt
                 </Badge>
               ) : currentCategory.is_required ? (
-                <Badge variant="destructive" className="ml-auto opacity-80">
+                <Badge variant="destructive" className="ml-auto opacity-90 text-xs rounded-full bg-red-500/20 text-red-400 border border-red-500/30">
-                  <AlertCircle className="w-3 h-3 mr-1" /> Pflichtfeld
+                  <AlertCircle className="w-3 h-3 mr-1" /> Erforderlich
                 </Badge>
               ) : (
-                <Badge variant="outline" className="ml-auto border-white/20 text-slate-400">
+                <Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-xs rounded-full bg-white/5">
                   Optional
                 </Badge>
               )}
             </div>
 
-                  {catProducts.length === 0 ? (
+            {catProducts.length === 0 ? (
-                    <p className="text-slate-500 text-sm italic">
+              <p className="text-slate-500 text-sm italic">
-                      Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden.
+                Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden.
-                    </p>
+              </p>
-                  ) : currentCategory.allow_multiselect ? (
+            ) : currentCategory.allow_multiselect ? (
-                    <div className="grid gap-3">
+              <div className="grid gap-3">
-                      {catProducts.map(product => {
+                {catProducts.map(product => {
-                        const isChecked = sel?.productIds?.includes(product.id) ?? false
+                  const isChecked = sel?.productIds?.includes(product.id) ?? false
-                        const disabled = isProductDisabled(product, currentCategory.id)
+                  const disabled = isProductDisabled(product, currentCategory.id)
-                        return (
+                  return (
-                          <div key={product.id} className="relative">
+                    <div key={product.id} className="relative">
-                            <Label
+                      <Label
-                              onClick={() => !disabled && selectProduct(currentCategory.id, product.id)}
+                        onClick={() => !disabled && selectProduct(currentCategory.id, product.id)}
-                              className={`flex flex-col items-start p-4 rounded-xl border-2 transition-all ${disabled
+                        className={`flex flex-col items-start p-4 rounded-xl border transition-all ${disabled
-                                ? 'border-white/5 bg-white/5 opacity-50 cursor-not-allowed'
+                          ? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
-                                : isChecked
+                          : isChecked
-                                  ? 'border-primary bg-primary/5 cursor-pointer'
+                            ? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.1)]'
-                                  : 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
+                            : 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
-                              }`}
+                        }`}
-                            >
+                      >
-                              <div className="flex justify-between w-full items-center">
+                        <div className="flex justify-between w-full items-center">
-                                <div className="flex items-center gap-3">
+                          <div className="flex items-center gap-3">
-                                  <Checkbox
+                            <Checkbox
-                                    checked={isChecked}
+                              checked={isChecked}
-                                    disabled={disabled}
-                                    onCheckedChange={() => { }}
-                                    className="border-white/20 data-[state=checked]:bg-primary"
-                                  />
-                                  <span className="font-bold text-base text-white">{product.name}</span>
-                                  <span className={`text-[10px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)}`}>
-                                    {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo/Monat'}
-                                  </span>
-                                </div>
-                                <span className="text-primary font-semibold text-sm">
-                                  {new Intl.NumberFormat('de-DE', {
-                                    style: 'currency',
-                                    currency: 'EUR',
-                                  }).format(product.base_price)}{' '}
-                                  <span className="text-xs text-slate-400">{billingLabel(product.billing_interval)}</span>
-                                </span>
-                              </div>
-                              {product.description && (
-                                <span className="text-sm text-slate-300 mt-1 pl-7">{product.description}</span>
-                              )}
-                              {product.modules && product.modules.length > 0 && (
-                                <span className="text-xs text-slate-500 mt-1 pl-7">
-                                  {product.modules.length} optionale Module verfügbar
-                                </span>
-                              )}
-                            </Label>
-                          </div>
-                        )
-                      })}
-                    </div>
-                  ) : (
-                    <RadioGroup
-                      value={sel?.productId ?? ''}
-                      onValueChange={id => selectProduct(currentCategory.id, id)}
-                      className="grid gap-3"
-                    >
-                      {catProducts.map(product => {
-                        const disabled = isProductDisabled(product, currentCategory.id)
-                        return (
-                          <div key={product.id} className="relative">
-                            <RadioGroupItem
-                              value={product.id}
-                              id={`${currentCategory.id}-${product.id}`}
                               disabled={disabled}
-                              className="peer sr-only"
+                              onCheckedChange={() => { }}
+                              className="border-white/20 data-[state=checked]:bg-primary rounded"
                             />
+                            <span className="font-bold text-sm 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">
+                            {new Intl.NumberFormat('de-DE', {
+                              style: 'currency',
+                              currency: 'EUR',
+                            }).format(product.base_price)}{' '}
+                            <span className="text-[10px] text-slate-500 font-normal">{billingLabel(product.billing_interval)}</span>
+                          </span>
+                        </div>
+                        {product.description && (
+                          <span className="text-xs text-slate-400 mt-2 pl-7 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">
+                            {product.modules.length} optionale Module verfügbar
+                          </span>
+                        )}
+                      </Label>
+                    </div>
+                  )
+                })}
+              </div>
+            ) : (
+              <RadioGroup
+                value={sel?.productId ?? ''}
+                onValueChange={id => selectProduct(currentCategory.id, id)}
+                className="grid gap-3"
+              >
+                {catProducts.map(product => {
+                  const disabled = isProductDisabled(product, currentCategory.id)
+                  const isChecked = sel?.productId === product.id
+                  return (
+                    <div key={product.id} className="relative">
+                      <RadioGroupItem
+                        value={product.id}
+                        id={`${currentCategory.id}-${product.id}`}
+                        disabled={disabled}
+                        className="peer sr-only"
+                      />
+                      <Label
+                        htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
+                        className={`flex flex-col items-start p-4 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-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>
+                            <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">
+                            {new Intl.NumberFormat('de-DE', {
+                              style: 'currency',
+                              currency: 'EUR',
+                            }).format(product.base_price)}{' '}
+                            <span className="text-[10px] text-slate-500 font-normal">{billingLabel(product.billing_interval)}</span>
+                          </span>
+                        </div>
+                        {product.description && (
+                          <span className="text-xs text-slate-400 mt-2 font-normal leading-relaxed">{product.description}</span>
+                        )}
+                        {product.modules && product.modules.length > 0 && (
+                          <span className="text-[10px] text-slate-500 mt-1 font-normal">
+                            {product.modules.length} optionale Module verfügbar
+                          </span>
+                        )}
+                      </Label>
+                    </div>
+                  )
+                })}
+              </RadioGroup>
+            )}
+
+            {/* Modules */}
+            {selectedProduct?.modules && selectedProduct.modules.length > 0 && (
+              <div className="mt-6 p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
+                <p className="text-sm font-bold text-white flex items-center gap-2">
+                  <span className="w-1.5 h-1.5 rounded-full bg-primary" />
+                  Zusatzmodule für {selectedProduct.name}
+                </p>
+                <div className="space-y-2.5">
+                  {selectedProduct.modules.map(module => {
+                    const isExistingLicense = existingModuleIds.includes(module.id)
+                    const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
+                    const checked = isExistingLicense || (sel?.moduleIds.includes(module.id) ?? false)
+                    return (
+                      <div
+                        key={module.id}
+                        className={`flex flex-col p-4 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/30 bg-primary/5'
+                                : 'border-white/5 bg-white/5 hover:bg-white/10'
+                        }`}
+                      >
+                        <div className="flex items-start space-x-3">
+                          <Checkbox
+                            id={`mod-${currentCategory.id}-${module.id}`}
+                            checked={checked}
+                            onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
+                            disabled={disabled}
+                            className="rounded border-white/20 data-[state=checked]:bg-primary"
+                          />
+                          <div className="flex-1">
                             <Label
-                              htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
+                              htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
-                              className={`flex flex-col items-start p-4 rounded-xl border-2 border-white/5 bg-white/5 transition-all ${disabled
+                              className={`font-semibold text-sm flex justify-between text-white ${
-                                ? 'opacity-50 cursor-not-allowed'
+                                isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
-                                : 'hover:bg-white/10 peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5 cursor-pointer'
                               }`}
                             >
-                              <div className="flex justify-between w-full items-center">
+                              <span className="flex items-center gap-1.5 flex-wrap">
-                                <div className="flex items-center gap-2">
+                                {module.name}
-                                  <span className="font-bold text-base text-white">{product.name}</span>
+                                {isExistingLicense && (
-                                  <span className={`text-[10px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)}`}>
+                                  <span className="inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30 font-bold uppercase tracking-wider">
-                                    {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo/Monat'}
+                                    <Lock className="w-2.5 h-2.5" /> Bereits lizenziert
                                   </span>
-                                </div>
+                                )}
-                                <span className="text-primary font-semibold text-sm">
+                              </span>
-                                  {new Intl.NumberFormat('de-DE', {
+                              <span className="text-primary font-bold text-sm">
+                                {isExistingLicense ? (
+                                  <span className="text-slate-500 text-xs font-normal">inkl.</span>
+                                ) : (
+                                  <>+{new Intl.NumberFormat('de-DE', {
                                     style: 'currency',
                                     currency: 'EUR',
-                                  }).format(product.base_price)}{' '}
+                                  }).format(module.price)}</>
-                                  <span className="text-xs text-slate-400">{billingLabel(product.billing_interval)}</span>
+                                )}
-                                </span>
+                              </span>
-                              </div>
-                              {product.description && (
-                                <span className="text-sm text-slate-300 mt-1">{product.description}</span>
-                              )}
-                              {product.modules && product.modules.length > 0 && (
-                                <span className="text-xs text-slate-500 mt-1">
-                                  {product.modules.length} optionale Module verfügbar
-                                </span>
-                              )}
                             </Label>
-                          </div>
+                            {module.description && (
-                        )
+                              <p className="text-xs text-slate-400 mt-1 leading-relaxed">{module.description}</p>
-                      })}
+                            )}
-                    </RadioGroup>
+                            {!isExistingLicense && disabled && (
-                  )}
+                              <p className="text-[10px] text-red-400 mt-1.5 font-medium flex items-center gap-1">
-
+                                <AlertCircle className="w-3 h-3 text-red-400 shrink-0" />
-                  {/* Modules */}
+                                {module.requirements?.length && !module.requirements.some(
-                  {selectedProduct?.modules && selectedProduct.modules.length > 0 && (
+                                  reqId => sel?.moduleIds.includes(reqId)
-                    <div className="mt-4 space-y-3 pl-2 border-l-2 border-primary/30">
+                                )
-                      <p className="text-sm font-semibold text-white ml-2">Zusatzmodule:</p>
+                                  ? 'Benötigt weitere Module'
-                      {selectedProduct.modules.map(module => {
+                                  : 'Nicht kombinierbar mit aktueller Auswahl'}
-                        const isExistingLicense = existingModuleIds.includes(module.id)
+                              </p>
-                        const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
-                        const checked = isExistingLicense || (sel?.moduleIds.includes(module.id) ?? false)
-                        return (
-                          <div
-                            key={module.id}
-                            className={`flex flex-col p-3 rounded-lg border ml-2 transition-colors ${
-                              isExistingLicense
-                                ? 'border-primary/20 bg-primary/5 opacity-75'
-                                : disabled
-                                  ? 'border-white/5 bg-white/5 opacity-50'
-                                  : 'border-white/5 bg-white/5 hover:bg-white/10'
-                            }`}
-                          >
-                            <div className="flex items-start space-x-3">
-                              <Checkbox
-                                id={`mod-${currentCategory.id}-${module.id}`}
-                                checked={checked}
-                                onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
-                                disabled={disabled}
-                              />
-                              <div className="flex-1">
-                                <Label
-                                  htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
-                                  className={`font-medium flex justify-between text-white ${
-                                    isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
-                                  }`}
-                                >
-                                  <span className="flex items-center gap-1.5">
-                                    {module.name}
-                                    {isExistingLicense && (
-                                      <span className="inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30 font-semibold">
-                                        <Lock className="w-2.5 h-2.5" /> Bereits lizenziert
-                                      </span>
-                                    )}
-                                  </span>
-                                  <span className="text-primary font-bold">
-                                    {isExistingLicense ? (
-                                      <span className="text-slate-500 text-xs">inkl.</span>
-                                    ) : (
-                                      <>+{new Intl.NumberFormat('de-DE', {
-                                        style: 'currency',
-                                        currency: 'EUR',
-                                      }).format(module.price)}</>
-                                    )}
-                                  </span>
-                                </Label>
-                                {module.description && (
-                                  <p className="text-xs text-slate-400">{module.description}</p>
-                                )}
-                                {!isExistingLicense && disabled && (
-                                  <p className="text-[10px] text-destructive mt-1">
-                                    {module.requirements?.length && !module.requirements.some(
-                                      reqId => sel?.moduleIds.includes(reqId)
-                                    )
-                                      ? 'Benötigt weitere Module'
-                                      : 'Nicht kombinierbar mit aktueller Auswahl'}
-                                  </p>
-                                )}
-                              </div>
-                            </div>
-
-                            {/* Scalable Quantity */}
-                            {checked && !isExistingLicense && module.has_quantity && (
-                              <div className="flex items-center gap-3 mt-3 pl-8 pt-2 border-t border-white/5">
-                                <Label htmlFor={`qty-${module.id}`} className="text-xs text-slate-400">Menge:</Label>
-                                <Input
-                                  id={`qty-${module.id}`}
-                                  type="number"
-                                  min={1}
-                                  max={999}
-                                  value={moduleQuantities[module.id] || 1}
-                                  onChange={(e) => {
-                                    const val = Math.max(1, parseInt(e.target.value) || 1)
-                                    setModuleQuantities(prev => ({ ...prev, [module.id]: val }))
-                                  }}
-                                  className="w-20 h-8 bg-white/5 border-white/10 text-white text-xs text-center rounded-lg"
-                                />
-                                <span className="text-xs text-slate-500">
-                                  Gesamt: {new Intl.NumberFormat('de-DE', {
-                                    style: 'currency',
-                                    currency: 'EUR',
-                                  }).format(module.price * (moduleQuantities[module.id] || 1))}
-                                </span>
-                              </div>
                             )}
                           </div>
-                        )
+                        </div>
-                      })}
+
-                    </div>
+                        {/* 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>
+                            <Input
+                              id={`qty-${module.id}`}
+                              type="number"
+                              min={1}
+                              max={999}
+                              value={moduleQuantities[module.id] || 1}
+                              onChange={(e) => {
+                                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"
+                            />
+                            <span className="text-xs text-slate-400">
+                              Gesamt:{' '}
+                              <span className="text-primary font-bold">
+                                {new Intl.NumberFormat('de-DE', {
+                                  style: 'currency',
+                                  currency: 'EUR',
+                                }).format(module.price * (moduleQuantities[module.id] || 1))}
+                              </span>
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
           </motion.div>
         </AnimatePresence>
       </CardContent>

shop/components/wizard/summary-sidebar.tsx

@@ -32,6 +32,8 @@ interface SummarySidebarProps {
   deleteBasketItem: (idx: number) => void
   deviceName: string
   setDeviceName: (name: string) => void
+  licenseNumber: string
+  setLicenseNumber: (num: string) => void
   addToBasket: () => void
   isNextStepDisabled: boolean
   hasActiveSelection: boolean
@@ -62,6 +64,8 @@ export function SummarySidebar({
   deleteBasketItem,
   deviceName,
   setDeviceName,
+  licenseNumber,
+  setLicenseNumber,
   addToBasket,
   isNextStepDisabled,
   hasActiveSelection,
@@ -231,7 +235,10 @@ export function SummarySidebar({
                   <div key={idx} className={`flex justify-between items-center text-xs bg-white/5 p-2 rounded border transition-all duration-300 ${idx === editingIdx ? 'border-blue-500/50 shadow-[0_0_10px_rgba(59,130,246,0.3)]' : 'border-white/10'}`}>
                     <div className="flex flex-col">
                       <span className="text-white font-medium">{item.deviceName}</span>
-                      <span className="text-[10px] text-slate-400 capitalize">{item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}</span>
+                      <span className="text-[10px] text-slate-400 capitalize">
+                        {item.billingInterval === 'one_time' ? 'Kauf' : 'Abo'}
+                        {item.licenseNumber ? ` · Lizenz: ${item.licenseNumber}` : ''}
+                      </span>
                     </div>
                     <div className="flex items-center gap-1.5">
                       <Button
@@ -272,6 +279,16 @@ export function SummarySidebar({
               className="bg-white/5 border-white/10 text-white text-xs h-9 rounded-lg"
             />
           </div>
+          <div className="w-full space-y-2">
+            <Label htmlFor="license-number" className="text-xs text-slate-400">Lizenznummer (optional)</Label>
+            <Input
+              id="license-number"
+              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-9 rounded-lg"
+            />
+          </div>
           <Button
             type="button"
             variant="outline"

shop/lib/actions/queries.ts

@@ -260,4 +260,29 @@ export async function getCustomersForWizard(
   }
 }
 
+/**
+ * Checks if a license number is already taken by any active order.
+ */
+export async function isLicenseNumberTaken(licenseNumber: string, excludeOrderId?: string): Promise<boolean> {
+  const normalized = licenseNumber?.trim().toUpperCase()
+  if (!normalized) return false
+
+  const supabase = await createClient()
+  let query = supabase
+    .from('orders')
+    .select('id')
+    .contains('order_snapshot', { items: [{ license_number: normalized }] })
+
+  if (excludeOrderId) {
+    query = query.neq('id', excludeOrderId)
+  }
+
+  const { data, error } = await query
+  if (error) {
+    console.error('Error checking license number:', error)
+    return false
+  }
+  return !!(data && data.length > 0)
+}
+