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)
@@ -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,8 +950,7 @@ 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 ${
-                          isActive
+                        className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${isActive
                             ? 'bg-primary/10 border-primary text-white shadow-[0_0_20px_rgba(59,130,246,0.15)]'
                             : 'bg-white/5 border-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10'
                           }`}
@@ -896,8 +960,7 @@ export function OrderWizard({
                           <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
                         )}
 
-                        <div className={`p-2 rounded-lg transition-colors ${
-                          isActive ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400 group-hover:text-white'
+                        <div className={`p-2 rounded-lg transition-colors ${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">
-                            <Check className="w-3 h-3" />
-                          </div>
+                          <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">
+                            Ausgewählt
+                          </span>
                         ) : isRequired ? (
-                          <div className="w-2 h-2 rounded-full bg-red-500 shrink-0 animate-pulse" />
-                        ) : (
-                          <span className="text-[10px] text-slate-600 uppercase tracking-wider shrink-0 font-medium">Opt</span>
-                        )}
+                          <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>
+                        ) : 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,6 +155,7 @@ export function StepCustomer({
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-8">
+        <div className={isAdmin ? 'grid grid-cols-1 lg:grid-cols-2 gap-8 items-start' : 'space-y-8'}>
           {/* ─── 1. ADMIN PARTNER SELECTION ─── */}
           {isAdmin && (
             <div className="p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
@@ -199,7 +201,7 @@ export function StepCustomer({
               </div>
 
               {/* Partner Card List */}
-            <div className="space-y-2 max-h-72 overflow-y-auto pr-1">
+              <div className="space-y-2 max-h-[30rem] overflow-y-auto pr-1">
                 {/* Reserved Fixed Card: Alle Partner */}
                 <div
                   onClick={() => {
@@ -347,6 +349,8 @@ export function StepCustomer({
             </div>
           )}
 
+          {/* ─── 2. CUSTOMER WRAPPER ─── */}
+          <div className="space-y-6">
             {/* Modus-Toggle: Bestandskunde vs. Neuer Kunde */}
             <div className="flex gap-2">
               <Button
@@ -367,9 +371,17 @@ export function StepCustomer({
               </Button>
             </div>
 
+            <AnimatePresence mode="wait">
               {/* ─── 2. CUSTOMER SELECTION ─── */}
               {customerMode === 'select' && (
-          <div className="p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
+                <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">
@@ -437,7 +449,7 @@ export function StepCustomer({
                       ) : (
                         <>
                           {/* Customer Card List */}
-                    <div className="space-y-2 max-h-80 overflow-y-auto pr-1">
+                          <div className="space-y-2 max-h-[30rem] overflow-y-auto pr-1">
                             {paginatedCustomers.map((customer) => {
                               const isSelected = selectedEndCustomerId === customer.id
 
@@ -479,7 +491,7 @@ export function StepCustomer({
                                   </div>
                                   {isSelected && <Check className="w-5 h-5 text-primary mt-0.5 shrink-0" />}
                                 </div>
-                        )
+                              );
                             })}
                           </div>
 
@@ -540,12 +552,19 @@ export function StepCustomer({
                       )}
                     </div>
                   )}
-          </div>
+                </motion.div>
               )}
 
               {/* ─── MODUS B: NEUEN KUNDEN ANLEGEN ─── */}
               {customerMode === 'create' && (
-          <div className="grid md:grid-cols-2 gap-4 p-4 rounded-xl bg-white/5 border border-white/10">
+                <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' },
@@ -594,8 +613,11 @@ export function StepCustomer({
                       Abbrechen
                     </Button>
                   </div>
-          </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">
-          <ShoppingCart className="w-5 h-5 text-blue-400" />
+        <CardTitle className="text-xl flex items-center gap-2 text-white font-bold">
+          <ShoppingCart className="w-5 h-5 text-primary" />
           Optionen wählen
         </CardTitle>
         <CardDescription className="text-slate-400">
@@ -88,30 +88,30 @@ 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">
-                  <AlertCircle className="w-3 h-3 mr-1" /> Pflichtfeld
+                <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" /> 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>
               )}
@@ -130,10 +130,10 @@ 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-2 transition-all ${disabled
-                                ? 'border-white/5 bg-white/5 opacity-50 cursor-not-allowed'
+                        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/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'
                         }`}
                       >
@@ -143,26 +143,26 @@ export function StepSoftware({
                               checked={isChecked}
                               disabled={disabled}
                               onCheckedChange={() => { }}
-                                    className="border-white/20 data-[state=checked]:bg-primary"
+                              className="border-white/20 data-[state=checked]:bg-primary rounded"
                             />
-                                  <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 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-semibold text-sm">
+                          <span className="text-primary font-bold 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 className="text-[10px] text-slate-500 font-normal">{billingLabel(product.billing_interval)}</span>
                           </span>
                         </div>
                         {product.description && (
-                                <span className="text-sm text-slate-300 mt-1 pl-7">{product.description}</span>
+                          <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-xs text-slate-500 mt-1 pl-7">
+                          <span className="text-[10px] text-slate-500 mt-1 pl-7 font-normal">
                             {product.modules.length} optionale Module verfügbar
                           </span>
                         )}
@@ -179,6 +179,7 @@ export function StepSoftware({
               >
                 {catProducts.map(product => {
                   const disabled = isProductDisabled(product, currentCategory.id)
+                  const isChecked = sel?.productId === product.id
                   return (
                     <div key={product.id} className="relative">
                       <RadioGroupItem
@@ -189,31 +190,33 @@ export function StepSoftware({
                       />
                       <Label
                         htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
-                              className={`flex flex-col items-start p-4 rounded-xl border-2 border-white/5 bg-white/5 transition-all ${disabled
-                                ? 'opacity-50 cursor-not-allowed'
-                                : 'hover:bg-white/10 peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5 cursor-pointer'
+                        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-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 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-semibold text-sm">
+                          <span className="text-primary font-bold 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 className="text-[10px] text-slate-500 font-normal">{billingLabel(product.billing_interval)}</span>
                           </span>
                         </div>
                         {product.description && (
-                                <span className="text-sm text-slate-300 mt-1">{product.description}</span>
+                          <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-xs text-slate-500 mt-1">
+                          <span className="text-[10px] text-slate-500 mt-1 font-normal">
                             {product.modules.length} optionale Module verfügbar
                           </span>
                         )}
@@ -226,8 +229,12 @@ export function StepSoftware({
 
             {/* Modules */}
             {selectedProduct?.modules && selectedProduct.modules.length > 0 && (
-                    <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>
+              <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 ?? [])
@@ -235,11 +242,13 @@ export function StepSoftware({
                     return (
                       <div
                         key={module.id}
-                            className={`flex flex-col p-3 rounded-lg border ml-2 transition-colors ${
+                        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-50'
+                              ? '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'
                         }`}
                       >
@@ -249,25 +258,26 @@ export function StepSoftware({
                             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={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
-                                  className={`font-medium flex justify-between text-white ${
+                              className={`font-semibold text-sm flex justify-between text-white ${
                                 isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
                               }`}
                             >
-                                  <span className="flex items-center gap-1.5">
+                              <span className="flex items-center gap-1.5 flex-wrap">
                                 {module.name}
                                 {isExistingLicense && (
-                                      <span className="inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30 font-semibold">
+                                  <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">
                                     <Lock className="w-2.5 h-2.5" /> Bereits lizenziert
                                   </span>
                                 )}
                               </span>
-                                  <span className="text-primary font-bold">
+                              <span className="text-primary font-bold text-sm">
                                 {isExistingLicense ? (
-                                      <span className="text-slate-500 text-xs">inkl.</span>
+                                  <span className="text-slate-500 text-xs font-normal">inkl.</span>
                                 ) : (
                                   <>+{new Intl.NumberFormat('de-DE', {
                                     style: 'currency',
@@ -277,10 +287,11 @@ export function StepSoftware({
                               </span>
                             </Label>
                             {module.description && (
-                                  <p className="text-xs text-slate-400">{module.description}</p>
+                              <p className="text-xs text-slate-400 mt-1 leading-relaxed">{module.description}</p>
                             )}
                             {!isExistingLicense && disabled && (
-                                  <p className="text-[10px] text-destructive mt-1">
+                              <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" />
                                 {module.requirements?.length && !module.requirements.some(
                                   reqId => sel?.moduleIds.includes(reqId)
                                 )
@@ -293,8 +304,8 @@ export function StepSoftware({
 
                         {/* 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>
+                          <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"
@@ -305,20 +316,24 @@ export function StepSoftware({
                                 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"
+                              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-500">
-                                  Gesamt: {new Intl.NumberFormat('de-DE', {
+                            <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>

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