style(wizard): unify and minimize top spacing across steps 1-4

# Conflicts:
#	shop/lib/actions/email-templates.ts

.gitea/workflows/staging.yaml

@@ -50,7 +50,6 @@ jobs:
           docker builder prune -f
         working-directory: .
 
-
       # KORREKTUR: IP-Adresse exakt auf Ihren Proxmox-Staging-Container eingestellt
       - name: Deploy to Proxmox LXC via SSH
         uses: appleboy/ssh-action@v0.1.5
@@ -60,6 +59,7 @@ jobs:
           key: ${{ secrets.PROXMOX_SSH_KEY }}
           script: |
             cd /opt/webshop/supabase/supabase-project
+            # 1. Altes Image durch das neue ersetzen
             docker compose pull webshop
+            # 2. Container im Hintergrund neu starten
             docker compose up -d webshop
-            docker image prune -f

shop/app/actions/checkout.ts

@@ -8,7 +8,7 @@ import { sendMail } from '@/utils/mail';
 import { renderToBuffer } from '@react-pdf/renderer';
 import React from 'react';
 import { InvoicePDF } from '@/components/invoice-pdf';
-import { getOrderEmailTemplate, buildEmailItemsSection } from '@/lib/actions/email-templates';
+import { generateOrderEmailHtml, generateOrderEmailSubject } from '@/lib/actions/email-templates';
 
 function generateOrderNumber(prefix: 'BE' | 'AE' = 'AE'): string {
   const year = new Date().getFullYear();
@@ -147,21 +147,22 @@ async function triggerPostProcessing(orderId: string, supabase: any, customerSna
         `;
       }
 
-      const itemsSection = buildEmailItemsSection(items);
-
-      const emailTemplate = getOrderEmailTemplate({
+      const emailTemplate = generateOrderEmailHtml({
         orderNumber: order.order_number,
+        status: 'pending',
         formattedDate,
         customerCompanyName: customerSnapshot.company_name,
-        totalDetailsText,
-        totalDetailsHtml,
-        itemsDetailsText: itemsSection.text,
-        itemsDetailsHtml: itemsSection.html
-      }, `${process.env.NEXT_PUBLIC_SITE_URL || 'https://staging.hephex.de'}`, false);
+        items,
+        taxRate,
+        oneTimeNet,
+        monthlyNet,
+      });
+
+      const mailSubject = generateOrderEmailSubject(order.order_number, 'pending');
 
       await sendMail({
         to: email,
-        subject: `Anfragebestätigung ${order.order_number}`,
+        subject: mailSubject,
         text: emailTemplate.text,
         html: emailTemplate.html,
         attachments: [

shop/app/admin/companies/[id]/customers/page.tsx

@@ -245,32 +245,32 @@ export default function CompanyCustomersPage() {
             </thead>
             <tbody className="divide-y divide-slate-100 dark:divide-white/5">
               {filteredCustomers.map((customer) => (
-                <tr key={customer.id} className="hover:bg-slate-50 dark:hover:bg-white/3 transition-colors">
+                <tr key={customer.id} className="hover:bg-slate-100 dark:hover:bg-white/10 transition-colors group">
                   <td className="py-4">
                     <div className="font-semibold text-slate-900 dark:text-white">
                       {customer.company_name}
                     </div>
                     {(customer.first_name || customer.last_name) && (
-                      <div className="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-1 mt-0.5">
-                        <User className="w-3 h-3 text-slate-400 shrink-0" />
+                      <div className="text-xs text-slate-600 dark:text-slate-300 font-medium flex items-center gap-1 mt-0.5">
+                        <User className="w-3 h-3 text-indigo-500 dark:text-indigo-400 shrink-0" />
                         <span>{customer.first_name || ''} {customer.last_name || ''}</span>
                       </div>
                     )}
                   </td>
-                  <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
+                  <td className="py-4 text-sm text-slate-800 dark:text-slate-100 font-medium">
                     {customer.street ? (
                       <div className="flex items-center gap-2">
-                        <MapPin className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+                        <MapPin className="w-3.5 h-3.5 text-indigo-500 dark:text-indigo-400 shrink-0" />
                         <span>
                           {customer.street}, {customer.zip} {customer.city}
                         </span>
                       </div>
                     ) : (
-                      <span className="text-slate-400 dark:text-slate-600">–</span>
+                      <span className="text-slate-400 dark:text-slate-500">–</span>
                     )}
                   </td>
-                  <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
-                    {customer.email || <span className="text-slate-400 dark:text-slate-600">–</span>}
+                  <td className="py-4 text-sm text-slate-800 dark:text-slate-100 font-medium">
+                    {customer.email || <span className="text-slate-400 dark:text-slate-500">–</span>}
                   </td>
                   <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
                     {customer.vat_id || <span className="text-slate-400 dark:text-slate-600">–</span>}

shop/app/admin/companies/page.tsx

@@ -197,25 +197,25 @@ export default function CompaniesPage() {
             </thead>
             <tbody className="divide-y divide-slate-100 dark:divide-white/5">
               {filteredCompanies.map((company) => (
-                <tr key={company.id} className="hover:bg-slate-50 dark:hover:bg-white/3 transition-colors">
+                <tr key={company.id} className="hover:bg-slate-100 dark:hover:bg-white/10 transition-colors group">
                   <td className="py-4 font-semibold text-slate-900 dark:text-white">
                     <div className="flex items-center gap-2">
-                      <Building2 className="w-4 h-4 text-blue-500 shrink-0" />
+                      <Building2 className="w-4 h-4 text-blue-500 dark:text-blue-400 shrink-0" />
                       {company.name}
                     </div>
                   </td>
-                  <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
+                  <td className="py-4 text-sm text-slate-800 dark:text-slate-100 font-medium">
                     <div className="flex items-center gap-2">
-                      <MapPin className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+                      <MapPin className="w-3.5 h-3.5 text-blue-500 dark:text-blue-400 shrink-0" />
                       <span>
                         {company.street ? `${company.street}, ${company.zip} ${company.city}` : '–'}
                       </span>
                     </div>
                   </td>
-                  <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
+                  <td className="py-4 text-sm text-slate-800 dark:text-slate-100 font-medium">
                     {company.email ? (
                       <div className="flex items-center gap-2">
-                        <Mail className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+                        <Mail className="w-3.5 h-3.5 text-blue-500 dark:text-blue-400 shrink-0" />
                         <span>{company.email}</span>
                       </div>
                     ) : '–'}

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

@@ -0,0 +1,124 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Loader2, Palette, Save } from 'lucide-react';
+import { createClient } from '@/lib/supabase/client';
+import { getBrandingSettings, saveBrandingSettings } from '@/lib/actions/branding';
+import type { BrandingSettings } from '@/lib/constants/branding';
+import { ColorThemePicker } from '@/components/admin/ColorThemePicker';
+import { useTheme } from '@/components/ThemeProvider';
+import { useRouter } from 'next/navigation';
+
+export default function BrandingPage() {
+  const [loading, setLoading] = useState(true);
+  const [branding, setBranding] = useState<BrandingSettings>({
+    companyName: '',
+    street: '',
+    zip: '',
+    city: '',
+    billingStreet: '',
+    billingZip: '',
+    billingCity: '',
+    sameBillingAddress: true,
+    colorScheme: 'modern_blue',
+    primaryColor: '#2563eb',
+    accentColor: '#38bdf8',
+  });
+  const [saving, setSaving] = useState(false);
+  const [msg, setMsg] = useState('');
+  const [msgType, setMsgType] = useState<'success' | 'error' | ''>('');
+  const { refreshBranding } = useTheme();
+  const router = useRouter();
+
+  useEffect(() => {
+    async function loadData() {
+      try {
+        const supabase = createClient();
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+          router.push('/auth/login');
+          return;
+        }
+        const brandRes = await getBrandingSettings();
+        if (brandRes) setBranding(brandRes);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [router]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setMsg('');
+    try {
+      const res = await saveBrandingSettings(branding);
+      if (res.success) {
+        await refreshBranding();
+        setMsgType('success');
+        setMsg('Farbschema erfolgreich gespeichert.');
+      } else {
+        setMsgType('error');
+        setMsg(res.error || 'Fehler beim Speichern.');
+      }
+    } catch (err: any) {
+      setMsgType('error');
+      setMsg(err.message || 'Fehler beim Speichern.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return <div className="p-8 text-white flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>;
+  }
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-extrabold tracking-tight text-white flex items-center gap-3">
+            <Palette className="w-8 h-8 text-violet-400" />
+            Branding & Design
+          </h1>
+          <p className="text-slate-400 text-xs mt-1">
+            Wählen Sie das primäre Farbschema und Akzente für den gesamten Webshop.
+          </p>
+        </div>
+
+        <Button onClick={handleSave} disabled={saving} className="bg-violet-600 hover:bg-violet-500 text-white rounded-xl px-5 h-10 text-xs font-bold">
+          {saving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
+          Farben Speichern
+        </Button>
+      </div>
+
+      {msg && (
+        <div className={`p-3.5 rounded-xl text-xs font-medium border ${
+          msgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
+        }`}>
+          {msg}
+        </div>
+      )}
+
+      <div className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-5">
+        <ColorThemePicker
+          colorScheme={branding.colorScheme}
+          primaryColor={branding.primaryColor}
+          accentColor={branding.accentColor}
+          companyName={branding.companyName}
+          onChange={(scheme, primary, accent) =>
+            setBranding({
+              ...branding,
+              colorScheme: scheme,
+              primaryColor: primary,
+              accentColor: accent,
+            })
+          }
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,231 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Loader2, Building2, MapPin, Receipt, Save } from 'lucide-react';
+import { createClient } from '@/lib/supabase/client';
+import { getBrandingSettings, saveBrandingSettings } from '@/lib/actions/branding';
+import type { BrandingSettings } from '@/lib/constants/branding';
+import { useRouter } from 'next/navigation';
+
+export default function FirmendatenPage() {
+  const [loading, setLoading] = useState(true);
+  const [branding, setBranding] = useState<BrandingSettings>({
+    companyName: '',
+    street: '',
+    zip: '',
+    city: '',
+    billingStreet: '',
+    billingZip: '',
+    billingCity: '',
+    sameBillingAddress: true,
+    colorScheme: 'modern_blue',
+    primaryColor: '#2563eb',
+    accentColor: '#38bdf8',
+  });
+  const [saving, setSaving] = useState(false);
+  const [msg, setMsg] = useState('');
+  const [msgType, setMsgType] = useState<'success' | 'error' | ''>('');
+  const router = useRouter();
+
+  useEffect(() => {
+    async function loadData() {
+      try {
+        const supabase = createClient();
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+          router.push('/auth/login');
+          return;
+        }
+        const brandRes = await getBrandingSettings();
+        if (brandRes) setBranding(brandRes);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [router]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setMsg('');
+    try {
+      const res = await saveBrandingSettings(branding);
+      if (res.success) {
+        setMsgType('success');
+        setMsg('Firmendaten erfolgreich gespeichert.');
+      } else {
+        setMsgType('error');
+        setMsg(res.error || 'Fehler beim Speichern.');
+      }
+    } catch (err: any) {
+      setMsgType('error');
+      setMsg(err.message || 'Fehler beim Speichern.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return <div className="p-8 text-white flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>;
+  }
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto space-y-6">
+      <div>
+        <h1 className="text-3xl font-extrabold tracking-tight text-white flex items-center gap-3">
+          <Building2 className="w-8 h-8 text-blue-400" />
+          Firmendaten & Anschrift
+        </h1>
+        <p className="text-slate-400 text-xs mt-1">
+          Verwaltung der eigenen Unternehmensanschrift für Rechnungen, Dokumente und Footereinträge.
+        </p>
+      </div>
+
+      {msg && (
+        <div className={`p-3.5 rounded-xl text-xs font-medium border ${msgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
+          }`}>
+          {msg}
+        </div>
+      )}
+
+      <div className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-5">
+        <div className="grid md:grid-cols-2 gap-4">
+          <div className="space-y-1.5">
+            <Label className="text-xs font-bold text-slate-300">Firmenname *</Label>
+            <Input
+              value={branding.companyName}
+              onChange={(e) => setBranding({ ...branding, companyName: e.target.value })}
+              placeholder="z. B. Meine Firma GmbH"
+              className="bg-slate-950/80 border-slate-800 text-white text-sm"
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className="text-xs font-bold text-slate-300">Logo-URL (Optional)</Label>
+            <Input
+              value={branding.logoUrl || ''}
+              onChange={(e) => setBranding({ ...branding, logoUrl: e.target.value })}
+              placeholder="https://domain.de/logo.png oder /assets/logo.png"
+              className="bg-slate-950/80 border-slate-800 text-white text-sm"
+            />
+          </div>
+        </div>
+
+        <div className="space-y-1.5">
+          <Label className="text-xs font-bold text-slate-300">Entwickler / Subline Beschriftung (Footer & Header)</Label>
+          <Input
+            value={branding.developerFooter || ''}
+            onChange={(e) => setBranding({ ...branding, developerFooter: e.target.value })}
+            placeholder="CASPOS Shop"
+            className="bg-slate-950/80 border-slate-800 text-white text-sm"
+          />
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-4 pt-3 border-t border-slate-800">
+          <div className="space-y-3">
+            <span className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
+              <MapPin className="w-3.5 h-3.5 text-blue-400" /> Hauptanschrift
+            </span>
+            <div className="space-y-1.5">
+              <Label className="text-xs text-slate-400">Straße &amp; Nr.</Label>
+              <Input
+                value={branding.street}
+                onChange={(e) => setBranding({ ...branding, street: e.target.value })}
+                placeholder="Musterstraße 12"
+                className="bg-slate-950/80 border-slate-800 text-white text-xs"
+              />
+            </div>
+            <div className="grid grid-cols-3 gap-2">
+              <div>
+                <Label className="text-xs text-slate-400">PLZ</Label>
+                <Input
+                  value={branding.zip}
+                  onChange={(e) => setBranding({ ...branding, zip: e.target.value })}
+                  placeholder="12345"
+                  className="bg-slate-950/80 border-slate-800 text-white text-xs"
+                />
+              </div>
+              <div className="col-span-2">
+                <Label className="text-xs text-slate-400">Ort</Label>
+                <Input
+                  value={branding.city}
+                  onChange={(e) => setBranding({ ...branding, city: e.target.value })}
+                  placeholder="Musterstadt"
+                  className="bg-slate-950/80 border-slate-800 text-white text-xs"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
+                <Receipt className="w-3.5 h-3.5 text-blue-400" /> Rechnungsadresse
+              </span>
+              <label className="flex items-center gap-1.5 text-xs text-slate-400 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={branding.sameBillingAddress}
+                  onChange={(e) => setBranding({ ...branding, sameBillingAddress: e.target.checked })}
+                  className="w-3.5 h-3.5 rounded border-slate-700 bg-slate-950 text-blue-500"
+                />
+                Gleiche wie Hauptanschrift
+              </label>
+            </div>
+
+            {!branding.sameBillingAddress ? (
+              <div className="space-y-3 p-3 rounded-xl bg-slate-950/40 border border-slate-800">
+                <div className="space-y-1.5">
+                  <Label className="text-xs text-slate-400">Rechnungsstraße &amp; Nr.</Label>
+                  <Input
+                    value={branding.billingStreet}
+                    onChange={(e) => setBranding({ ...branding, billingStreet: e.target.value })}
+                    placeholder="Rechnungsstraße 45"
+                    className="bg-slate-950/80 border-slate-800 text-white text-xs"
+                  />
+                </div>
+                <div className="grid grid-cols-3 gap-2">
+                  <div>
+                    <Label className="text-xs text-slate-400">PLZ</Label>
+                    <Input
+                      value={branding.billingZip}
+                      onChange={(e) => setBranding({ ...branding, billingZip: e.target.value })}
+                      placeholder="54321"
+                      className="bg-slate-950/80 border-slate-800 text-white text-xs"
+                    />
+                  </div>
+                  <div className="col-span-2">
+                    <Label className="text-xs text-slate-400">Ort</Label>
+                    <Input
+                      value={branding.billingCity}
+                      onChange={(e) => setBranding({ ...branding, billingCity: e.target.value })}
+                      placeholder="Rechnungsstadt"
+                      className="bg-slate-950/80 border-slate-800 text-white text-xs"
+                    />
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="p-3 rounded-xl bg-slate-950/40 border border-slate-800/60 text-xs text-slate-500 italic">
+                Verwendet automatisch die Hauptanschrift oben.
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-end pt-4 border-t border-slate-800">
+          <Button onClick={handleSave} disabled={saving} className="bg-blue-600 hover:bg-blue-500 text-white rounded-xl px-6 h-10 text-xs font-bold">
+            {saving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
+            Speichern
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,162 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Loader2, KeyRound, Server, CheckCircle2, XCircle, Eye, EyeOff, Wifi } from 'lucide-react';
+import { saveLicServerConfig, testLicServerConnection } from '@/lib/actions/licserver-config';
+import { createClient } from '@/lib/supabase/client';
+import { useRouter } from 'next/navigation';
+
+export default function LicServerPage() {
+  const [loading, setLoading] = useState(true);
+  const [licUrl, setLicUrl] = useState('');
+  const [licKey, setLicKey] = useState('');
+  const [showKey, setShowKey] = useState(false);
+  const [licSaving, setLicSaving] = useState(false);
+  const [licTesting, setLicTesting] = useState(false);
+  const [licStatus, setLicStatus] = useState<{ ok: boolean; message: string } | null>(null);
+  const [licMsg, setLicMsg] = useState('');
+  const [licMsgType, setLicMsgType] = useState<'success' | 'error' | ''>('');
+  const router = useRouter();
+
+  useEffect(() => {
+    async function loadData() {
+      try {
+        const supabase = createClient();
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+          router.push('/auth/login');
+          return;
+        }
+        const { data } = await supabase.from('settings').select('licserver_base_url, licserver_api_key').eq('id', 'licserver').maybeSingle();
+        if (data) {
+          setLicUrl(data.licserver_base_url || '');
+          setLicKey(data.licserver_api_key || '');
+        }
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [router]);
+
+  if (loading) {
+    return <div className="p-8 text-white flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>;
+  }
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-extrabold tracking-tight text-white flex items-center gap-3">
+            <KeyRound className="w-8 h-8 text-violet-400" />
+            CASPOS LicServer
+          </h1>
+          <p className="text-slate-400 text-xs mt-1">
+            REST API-Anbindung für die automatisierte Lizenzierung und Schlüsselgenerierung.
+          </p>
+        </div>
+
+        {licStatus && (
+          <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold border ${
+            licStatus.ok
+              ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400'
+              : 'bg-amber-500/10 border-amber-500/20 text-amber-400'
+          }`}>
+            {licStatus.ok ? <CheckCircle2 className="w-3.5 h-3.5" /> : <XCircle className="w-3.5 h-3.5" />}
+            {licStatus.message}
+          </div>
+        )}
+      </div>
+
+      {licMsg && (
+        <div className={`p-3.5 rounded-xl text-xs font-medium border ${
+          licMsgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
+        }`}>
+          {licMsg}
+        </div>
+      )}
+
+      <div className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-5">
+        <div className="grid md:grid-cols-2 gap-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="lic-url" className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
+              <Server className="w-3.5 h-3.5 text-slate-400" /> Server URL
+            </Label>
+            <Input
+              id="lic-url"
+              value={licUrl}
+              onChange={e => setLicUrl(e.target.value)}
+              placeholder="http://192.168.178.174:9980"
+              className="text-sm font-mono bg-slate-950/80 border-slate-800 text-white rounded-xl"
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="lic-key" className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
+              <KeyRound className="w-3.5 h-3.5 text-slate-400" /> API-Key
+            </Label>
+            <div className="relative">
+              <Input
+                id="lic-key"
+                type={showKey ? 'text' : 'password'}
+                value={licKey}
+                onChange={e => setLicKey(e.target.value)}
+                placeholder="Ihr X-Api-Key"
+                className="text-sm font-mono pr-10 bg-slate-950/80 border-slate-800 text-white rounded-xl"
+              />
+              <button
+                type="button"
+                onClick={() => setShowKey(v => !v)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white transition-colors"
+                aria-label={showKey ? 'Key verbergen' : 'Key anzeigen'}
+              >
+                {showKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-3 pt-4 border-t border-slate-800">
+          <Button
+            disabled={licSaving || licTesting}
+            onClick={async () => {
+              setLicSaving(true);
+              setLicMsg('');
+              setLicStatus(null);
+              const res = await saveLicServerConfig(licUrl, licKey);
+              setLicMsgType(res.success ? 'success' : 'error');
+              setLicMsg(res.success ? 'Konfiguration gespeichert.' : (res.error || 'Fehler beim Speichern'));
+              setLicSaving(false);
+            }}
+            className="bg-violet-600 hover:bg-violet-500 text-white rounded-xl px-5 h-10 text-xs font-bold"
+          >
+            {licSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <KeyRound className="w-4 h-4 mr-2" />}
+            Speichern
+          </Button>
+
+          <Button
+            variant="outline"
+            disabled={licSaving || licTesting}
+            onClick={async () => {
+              setLicTesting(true);
+              setLicStatus(null);
+              await saveLicServerConfig(licUrl, licKey);
+              const result = await testLicServerConnection();
+              setLicStatus(result);
+              setLicTesting(false);
+            }}
+            className="border-slate-700 text-slate-300 hover:text-white rounded-xl px-5 h-10 text-xs font-bold"
+          >
+            {licTesting ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Wifi className="w-4 h-4 mr-2" />}
+            Verbindung testen
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

shop/app/admin/einstellungen/page.tsx

@@ -1,85 +1,57 @@
-/* Admin Settings with Bento Grid Layout & Motion Animations */
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
 import { motion } from 'framer-motion';
-import { Switch } from '@/components/ui/switch';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Download, Upload, Database, Loader2, KeyRound,
-  Server, CheckCircle2, XCircle, Eye, EyeOff, Wifi, Sliders, ShieldAlert, FileArchive,
-  Building2, MapPin, Receipt, Palette, Save
-} from 'lucide-react';
+import { Building2, Palette, KeyRound, Mail, Sliders, ArrowRight, Loader2 } from 'lucide-react';
 import { createClient } from '@/lib/supabase/client';
-import { saveLicServerConfig, testLicServerConnection } from '@/lib/actions/licserver-config';
-import { getBrandingSettings, saveBrandingSettings } from '@/lib/actions/branding';
-import type { BrandingSettings } from '@/lib/constants/branding';
-import { ColorThemePicker } from '@/components/admin/ColorThemePicker';
-import { useTheme } from '@/components/ThemeProvider';
 import { useRouter } from 'next/navigation';
 
-const containerVariants = {
-  hidden: { opacity: 0 },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.1
-    }
-  }
-};
+const menuItems = [
+  {
+    title: 'Firmendaten & Anschrift',
+    description: 'Verwaltung der eigenen Firmenanschrift, Rechnungsadresse und Sublines für Dokumente.',
+    href: '/admin/einstellungen/firmendaten',
+    icon: Building2,
+    color: 'text-blue-400',
+    bgColor: 'bg-blue-500/10 border-blue-500/20',
+  },
+  {
+    title: 'Branding & Farbschema',
+    description: 'Anpassung von Farbschemata (Primary / Accent), Buttons und Themes für den Webshop.',
+    href: '/admin/einstellungen/branding',
+    icon: Palette,
+    color: 'text-violet-400',
+    bgColor: 'bg-violet-500/10 border-violet-500/20',
+  },
+  {
+    title: 'CASPOS LicServer',
+    description: 'REST API Konfiguration für den Lizenzserver & automatisierte Schlüsselgenerierung.',
+    href: '/admin/einstellungen/licserver',
+    icon: KeyRound,
+    color: 'text-amber-400',
+    bgColor: 'bg-amber-500/10 border-amber-500/20',
+  },
+  {
+    title: 'SMTP E-Mail Server',
+    description: 'Serverdaten & Authentifizierung für Bestellbestätigungen und Benachrichtigungen.',
+    href: '/admin/settings',
+    icon: Mail,
+    color: 'text-sky-400',
+    bgColor: 'bg-sky-500/10 border-sky-500/20',
+  },
+  {
+    title: 'System & Backup',
+    description: 'Demo-Banner Steuerung sowie ZIP-Export und Wiederherstellung der Datenbank.',
+    href: '/admin/einstellungen/system',
+    icon: Sliders,
+    color: 'text-emerald-400',
+    bgColor: 'bg-emerald-500/10 border-emerald-500/20',
+  },
+];
 
-const cardVariants = {
-  hidden: { opacity: 0, y: 20 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: {
-      type: 'spring' as const,
-      stiffness: 80,
-      damping: 15
-    }
-  }
-};
-
-export default function AdminSettings() {
-  const [demoActive, setDemoActive] = useState(true);
-  const [exporting, setExporting] = useState(false);
-  const [importing, setImporting] = useState(false);
-  const [statusMsg, setStatusMsg] = useState('');
-  const [statusType, setStatusType] = useState<'success' | 'error' | 'info' | ''>('');
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+export default function AdminSettingsOverview() {
   const [loading, setLoading] = useState(true);
-
-  // LicServer Config State
-  const [licUrl, setLicUrl] = useState('');
-  const [licKey, setLicKey] = useState('');
-  const [showKey, setShowKey] = useState(false);
-  const [licSaving, setLicSaving] = useState(false);
-  const [licTesting, setLicTesting] = useState(false);
-  const [licStatus, setLicStatus] = useState<{ ok: boolean; message: string } | null>(null);
-  const [licMsg, setLicMsg] = useState('');
-  const [licMsgType, setLicMsgType] = useState<'success' | 'error' | ''>('');
-
-  // Branding State
-  const [branding, setBranding] = useState<BrandingSettings>({
-    companyName: '',
-    street: '',
-    zip: '',
-    city: '',
-    billingStreet: '',
-    billingZip: '',
-    billingCity: '',
-    sameBillingAddress: true,
-    colorScheme: 'modern_blue',
-    primaryColor: '#2563eb',
-    accentColor: '#38bdf8',
-  });
-  const [brandingSaving, setBrandingSaving] = useState(false);
-  const [brandingMsg, setBrandingMsg] = useState('');
-  const [brandingMsgType, setBrandingMsgType] = useState<'success' | 'error' | ''>('');
-
   const router = useRouter();
 
   useEffect(() => {
@@ -91,31 +63,13 @@ export default function AdminSettings() {
           router.push('/auth/login');
           return;
         }
-
-        const [userRes, licRes, brandRes] = await Promise.all([
-          supabase.from('users').select('role').eq('id', user.id).single(),
-          supabase.from('settings').select('licserver_base_url, licserver_api_key').eq('id', 'licserver').maybeSingle(),
-          getBrandingSettings()
-        ]);
-
-        if (userRes.error || !userRes.data || userRes.data.role === 'verwaltung') {
+        const { data } = await supabase.from('users').select('role').eq('id', user.id).single();
+        if (!data || data.role === 'verwaltung') {
           router.push('/admin');
           return;
         }
-
-        const state = localStorage.getItem('demo_banner_disabled') !== 'true';
-        setDemoActive(state);
-
-        if (licRes.data) {
-          setLicUrl(licRes.data.licserver_base_url || '');
-          setLicKey(licRes.data.licserver_api_key || '');
-        }
-
-        if (brandRes) {
-          setBranding(brandRes);
-        }
       } catch (err) {
-        console.error("Fehler bei checkAccess in Einstellungen:", err);
+        console.error(err);
       } finally {
         setLoading(false);
       }
@@ -123,565 +77,51 @@ export default function AdminSettings() {
     checkAccess();
   }, [router]);
 
-  const toggleDemo = (checked: boolean) => {
-    setDemoActive(checked);
-    localStorage.setItem('demo_banner_disabled', (!checked).toString());
-    window.dispatchEvent(new Event('storage_demo_changed'));
-  };
-
-  const handleExport = async () => {
-    setExporting(true);
-    setStatusMsg('Export läuft...');
-    setStatusType('info');
-    try {
-      const res = await fetch('/api/admin/db-backup');
-      if (!res.ok) throw new Error('Export fehlgeschlagen');
-
-      const blob = await res.blob();
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `webshop_backup_${new Date().toISOString().split('T')[0]}.zip`;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      window.URL.revokeObjectURL(url);
-      setStatusMsg('Export erfolgreich abgeschlossen.');
-      setStatusType('success');
-    } catch (err: any) {
-      console.error(err);
-      setStatusMsg(`Fehler beim Export: ${err.message}`);
-      setStatusType('error');
-    } finally {
-      setExporting(false);
-    }
-  };
-
-  const handleImport = async () => {
-    if (!selectedFile) return;
-    if (!confirm('ACHTUNG: Dies löscht und überschreibt alle aktuellen Datenbankinhalte in dieser Instanz. Möchten Sie wirklich fortfahren?')) {
-      return;
-    }
-    setImporting(true);
-    setStatusMsg('Import läuft...');
-    setStatusType('info');
-    try {
-      const formData = new FormData();
-      formData.append('file', selectedFile);
-
-      const res = await fetch('/api/admin/db-backup', {
-        method: 'POST',
-        body: formData,
-      });
-
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error || 'Import fehlgeschlagen');
-
-      setStatusMsg('Datenbank erfolgreich importiert!');
-      setStatusType('success');
-      setSelectedFile(null);
-    } catch (err: any) {
-      console.error(err);
-      setStatusMsg(`Fehler beim Import: ${err.message}`);
-      setStatusType('error');
-    } finally {
-      setImporting(false);
-    }
-  };
-
-  const { refreshBranding } = useTheme();
-
-  const handleSaveBranding = async () => {
-    setBrandingSaving(true);
-    setBrandingMsg('');
-    try {
-      const res = await saveBrandingSettings(branding);
-      if (res.success) {
-        await refreshBranding();
-        setBrandingMsgType('success');
-        setBrandingMsg('Firmendaten & Farbschema erfolgreich gespeichert.');
-      } else {
-        setBrandingMsgType('error');
-        setBrandingMsg(res.error || 'Fehler beim Speichern.');
-      }
-    } catch (err: any) {
-      setBrandingMsgType('error');
-      setBrandingMsg(err.message || 'Fehler beim Speichern.');
-    } finally {
-      setBrandingSaving(false);
-    }
-  };
-
   if (loading) {
     return <div className="p-8 text-white flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>;
   }
 
   return (
-    <div className="p-6 max-w-7xl mx-auto text-slate-900 dark:text-white space-y-6">
-      {/* Header */}
-      <motion.div
-        initial={{ opacity: 0, y: -10 }}
-        animate={{ opacity: 1, y: 0 }}
-        className="flex items-center justify-between"
-      >
-        <div>
-          <h1 className="text-3xl font-extrabold tracking-tight">Admin Einstellungen</h1>
-          <p className="text-slate-400 text-xs mt-1">
-            Zentrales Dashboard für Firmendaten, Branding, Backup &amp; Lizenz-Konfigurationen.
-          </p>
-        </div>
+    <div className="p-6 max-w-6xl mx-auto space-y-6">
+      <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
+        <h1 className="text-3xl font-extrabold tracking-tight text-white">Systemeinstellungen</h1>
+        <p className="text-slate-400 text-xs mt-1">
+          Wählen Sie eine Kategorie aus, um Konfigurationen, Server-Anbindungen oder Branding anzupassen.
+        </p>
       </motion.div>
 
-      {/* Dynamic Status Notification */}
-      {statusMsg && (
-        <motion.div
-          initial={{ opacity: 0, height: 0 }}
-          animate={{ opacity: 1, height: 'auto' }}
-          className={`p-3 rounded-xl text-sm border ${
-            statusType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' :
-            statusType === 'error' ? 'bg-destructive/10 border-destructive/20 text-destructive' :
-            'bg-sky-500/10 border-sky-500/20 text-sky-400'
-          }`}
-        >
-          {statusMsg}
-        </motion.div>
-      )}
-
-      {/* Bento Grid Container */}
-      <motion.div
-        variants={containerVariants}
-        initial="hidden"
-        animate="visible"
-        className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-5"
-      >
-        {/* Bento Item 1: System Modus & Banner */}
-        <motion.div
-          variants={cardVariants}
-          whileHover={{ y: -3 }}
-          className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-sky-500/30 transition-all duration-300 shadow-md"
-        >
-          <div className="space-y-3">
-            <div className="w-10 h-10 rounded-xl bg-sky-500/10 border border-sky-500/20 text-sky-400 flex items-center justify-center">
-              <Sliders className="w-5 h-5" />
-            </div>
-            <div>
-              <h3 className="font-bold text-base text-white">System Banner</h3>
-              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
-                Gelbe Demo-Warnmeldungen im gesamten Shop aktivieren oder stummschalten.
-              </p>
-            </div>
-          </div>
-          <div className="flex items-center justify-between pt-3 border-t border-slate-800/80">
-            <span className="text-xs font-semibold text-slate-300">Banner aktiv</span>
-            <Switch checked={demoActive} onCheckedChange={toggleDemo} />
-          </div>
-        </motion.div>
-
-        {/* Bento Item 2: Daten Export */}
-        <motion.div
-          variants={cardVariants}
-          whileHover={{ y: -3 }}
-          className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-blue-500/30 transition-all duration-300 shadow-md"
-        >
-          <div className="space-y-3">
-            <div className="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400 flex items-center justify-center">
-              <Download className="w-5 h-5" />
-            </div>
-            <div>
-              <h3 className="font-bold text-base text-white">DB Backup</h3>
-              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
-                Lädt alle Produkte, Firmen, Lizenzen &amp; Einstellungen als ZIP-Archiv herunter.
-              </p>
-            </div>
-          </div>
-          <Button
-            onClick={handleExport}
-            disabled={exporting || importing}
-            className="w-full bg-blue-600 hover:bg-blue-500 text-white rounded-xl h-10 text-xs font-bold"
-          >
-            {exporting ? (
-              <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Export läuft...</>
-            ) : (
-              <><Download className="w-4 h-4 mr-2" /> ZIP Export</>
-            )}
-          </Button>
-        </motion.div>
-
-        {/* Bento Item 3: Daten Import */}
-        <motion.div
-          variants={cardVariants}
-          whileHover={{ y: -3 }}
-          className="md:col-span-1 lg:col-span-2 p-5 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-amber-500/30 transition-all duration-300 shadow-md"
-        >
-          <div className="space-y-3">
-            <div className="flex items-center justify-between">
-              <div className="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center">
-                <Upload className="w-5 h-5" />
-              </div>
-              <span className="text-[10px] font-bold uppercase tracking-wider text-amber-400 bg-amber-500/10 px-2.5 py-1 rounded-full border border-amber-500/20 flex items-center gap-1">
-                <ShieldAlert className="w-3 h-3" /> Überschreibt DB
-              </span>
-            </div>
-            <div>
-              <h3 className="font-bold text-base text-white">Daten Wiederherstellung</h3>
-              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
-                Spielen Sie eine gesicherte ZIP-Sicherungsdatei ein. Warnung: Überschreibt aktuelle Datenbankinhalte.
-              </p>
-            </div>
-          </div>
-
-          <div className="grid sm:grid-cols-2 gap-3 pt-2">
-            <div className="relative border border-dashed border-slate-700/80 rounded-xl p-3 hover:bg-slate-800/50 transition cursor-pointer flex items-center justify-center text-center">
-              <input
-                type="file"
-                accept=".zip"
-                onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
-                disabled={exporting || importing}
-                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
-              />
-              <span className="text-xs font-medium text-slate-300 truncate px-2 flex items-center gap-1.5">
-                <FileArchive className="w-4 h-4 text-amber-400 shrink-0" />
-                {selectedFile ? selectedFile.name : 'ZIP-Datei auswählen'}
-              </span>
-            </div>
-
-            <Button
-              onClick={handleImport}
-              disabled={!selectedFile || exporting || importing}
-              variant="outline"
-              className="w-full border-amber-500/30 text-amber-300 hover:bg-amber-500/10 rounded-xl h-10 text-xs font-bold"
-            >
-              {importing ? (
-                <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Importiert...</>
-              ) : (
-                <><Upload className="w-4 h-4 mr-2" /> ZIP Einspielen</>
-              )}
-            </Button>
-          </div>
-        </motion.div>
-
-        {/* Bento Item 4: Firmendaten & Anschriften (4 Spalten) */}
-        <motion.div
-          variants={cardVariants}
-          whileHover={{ y: -3 }}
-          className="md:col-span-3 lg:col-span-4 p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-5 hover:border-blue-500/30 transition-all duration-300 shadow-md"
-        >
-          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-800/80 pb-4">
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400 flex items-center justify-center">
-                <Building2 className="w-5 h-5" />
-              </div>
-              <div>
-                <h3 className="font-bold text-lg text-white">Firmendaten &amp; Rechnungsadresse</h3>
-                <p className="text-xs text-slate-400">Verwaltung der eigenen Unternehmensanschrift für Rechnungen und Dokumente</p>
-              </div>
-            </div>
-
-            <Button
-              onClick={handleSaveBranding}
-              disabled={brandingSaving}
-              className="bg-blue-600 hover:bg-blue-500 text-white rounded-xl px-5 h-10 text-xs font-bold shrink-0"
-            >
-              {brandingSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
-              Änderungen Speichern
-            </Button>
-          </div>
-
-          {brandingMsg && (
-            <div className={`p-3 rounded-xl text-xs font-medium border ${
-              brandingMsgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
-            }`}>
-              {brandingMsg}
-            </div>
-          )}
-
-          <div className="space-y-4">
-            <div className="grid md:grid-cols-2 gap-4">
-              <div className="space-y-1.5">
-                <Label className="text-xs font-bold text-slate-300">Firmenname *</Label>
-                <Input
-                  value={branding.companyName}
-                  onChange={(e) => setBranding({ ...branding, companyName: e.target.value })}
-                  placeholder="z. B. Meine Firma GmbH"
-                  className="bg-slate-950/80 border-slate-800 text-white text-sm"
-                />
-              </div>
-
-              <div className="space-y-1.5">
-                <Label className="text-xs font-bold text-slate-300">Logo-URL (Optional)</Label>
-                <Input
-                  value={branding.logoUrl || ''}
-                  onChange={(e) => setBranding({ ...branding, logoUrl: e.target.value })}
-                  placeholder="https://domain.de/logo.png oder /assets/logo.png"
-                  className="bg-slate-950/80 border-slate-800 text-white text-sm"
-                />
-              </div>
-            </div>
-
-            <div className="space-y-1.5">
-              <Label className="text-xs font-bold text-slate-300">Entwickler / Subline Beschriftung (Footer & Header)</Label>
-              <Input
-                value={branding.developerFooter || ''}
-                onChange={(e) => setBranding({ ...branding, developerFooter: e.target.value })}
-                placeholder="B2B Shop made by hephex"
-                className="bg-slate-950/80 border-slate-800 text-white text-sm"
-              />
-            </div>
-
-            {/* Anschrift */}
-            <div className="grid md:grid-cols-2 gap-4 pt-2 border-t border-slate-800">
-              <div className="space-y-3">
-                <span className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
-                  <MapPin className="w-3.5 h-3.5 text-blue-400" /> Hauptanschrift
-                </span>
-                <div className="space-y-1.5">
-                  <Label className="text-xs text-slate-400">Straße &amp; Nr.</Label>
-                  <Input
-                    value={branding.street}
-                    onChange={(e) => setBranding({ ...branding, street: e.target.value })}
-                    placeholder="Musterstraße 12"
-                    className="bg-slate-950/80 border-slate-800 text-white text-xs"
-                  />
-                </div>
-                <div className="grid grid-cols-3 gap-2">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        {menuItems.map((item, idx) => {
+          const Icon = item.icon;
+          return (
+            <Link key={idx} href={item.href}>
+              <motion.div
+                whileHover={{ y: -4, scale: 1.01 }}
+                className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md h-full flex flex-col justify-between space-y-4 hover:border-slate-700 transition-all shadow-md group cursor-pointer"
+              >
+                <div className="space-y-3">
+                  <div className={`w-12 h-12 rounded-xl border flex items-center justify-center ${item.bgColor}`}>
+                    <Icon className={`w-6 h-6 ${item.color}`} />
+                  </div>
                   <div>
-                    <Label className="text-xs text-slate-400">PLZ</Label>
-                    <Input
-                      value={branding.zip}
-                      onChange={(e) => setBranding({ ...branding, zip: e.target.value })}
-                      placeholder="12345"
-                      className="bg-slate-950/80 border-slate-800 text-white text-xs"
-                    />
-                  </div>
-                  <div className="col-span-2">
-                    <Label className="text-xs text-slate-400">Ort</Label>
-                    <Input
-                      value={branding.city}
-                      onChange={(e) => setBranding({ ...branding, city: e.target.value })}
-                      placeholder="Musterstadt"
-                      className="bg-slate-950/80 border-slate-800 text-white text-xs"
-                    />
+                    <h3 className="font-bold text-lg text-white group-hover:text-primary transition-colors">
+                      {item.title}
+                    </h3>
+                    <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+                      {item.description}
+                    </p>
                   </div>
                 </div>
-              </div>
 
-              {/* Rechnungsadresse */}
-              <div className="space-y-3">
-                <div className="flex items-center justify-between">
-                  <span className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
-                    <Receipt className="w-3.5 h-3.5 text-blue-400" /> Rechnungsadresse
-                  </span>
-                  <label className="flex items-center gap-1.5 text-xs text-slate-400 cursor-pointer">
-                    <input
-                      type="checkbox"
-                      checked={branding.sameBillingAddress}
-                      onChange={(e) => setBranding({ ...branding, sameBillingAddress: e.target.checked })}
-                      className="w-3.5 h-3.5 rounded border-slate-700 bg-slate-950 text-blue-500"
-                    />
-                    Gleiche wie Hauptanschrift
-                  </label>
+                <div className="flex items-center text-xs font-bold text-slate-300 group-hover:text-primary pt-3 border-t border-slate-800/80 gap-1.5 transition-colors">
+                  <span>Einstellungen öffnen</span>
+                  <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
                 </div>
-
-                {!branding.sameBillingAddress ? (
-                  <div className="space-y-3 p-3 rounded-xl bg-slate-950/40 border border-slate-800">
-                    <div className="space-y-1.5">
-                      <Label className="text-xs text-slate-400">Rechnungsstraße &amp; Nr.</Label>
-                      <Input
-                        value={branding.billingStreet}
-                        onChange={(e) => setBranding({ ...branding, billingStreet: e.target.value })}
-                        placeholder="Rechnungsstraße 45"
-                        className="bg-slate-950/80 border-slate-800 text-white text-xs"
-                      />
-                    </div>
-                    <div className="grid grid-cols-3 gap-2">
-                      <div>
-                        <Label className="text-xs text-slate-400">PLZ</Label>
-                        <Input
-                          value={branding.billingZip}
-                          onChange={(e) => setBranding({ ...branding, billingZip: e.target.value })}
-                          placeholder="54321"
-                          className="bg-slate-950/80 border-slate-800 text-white text-xs"
-                        />
-                      </div>
-                      <div className="col-span-2">
-                        <Label className="text-xs text-slate-400">Ort</Label>
-                        <Input
-                          value={branding.billingCity}
-                          onChange={(e) => setBranding({ ...branding, billingCity: e.target.value })}
-                          placeholder="Rechnungsstadt"
-                          className="bg-slate-950/80 border-slate-800 text-white text-xs"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                ) : (
-                  <div className="p-3 rounded-xl bg-slate-950/40 border border-slate-800/60 text-xs text-slate-500 italic">
-                    Verwendet automatisch die Hauptanschrift oben.
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </motion.div>
-
-        {/* Bento Item 5: Farbschema & Design-System (4 Spalten) */}
-        <motion.div
-          variants={cardVariants}
-          whileHover={{ y: -3 }}
-          className="md:col-span-3 lg:col-span-4 p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-5 hover:border-violet-500/30 transition-all duration-300 shadow-md"
-        >
-          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-800/80 pb-4">
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-xl bg-violet-500/10 border border-violet-500/20 text-violet-400 flex items-center justify-center">
-                <Palette className="w-5 h-5" />
-              </div>
-              <div>
-                <h3 className="font-bold text-lg text-white">Farbschema &amp; Webshop Styling</h3>
-                <p className="text-xs text-slate-400">Wählen Sie das primäre Farbschema für Buttons, Akzente und Highlights</p>
-              </div>
-            </div>
-
-            <Button
-              onClick={handleSaveBranding}
-              disabled={brandingSaving}
-              className="bg-violet-600 hover:bg-violet-500 text-white rounded-xl px-5 h-10 text-xs font-bold shrink-0"
-            >
-              {brandingSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
-              Farben Speichern
-            </Button>
-          </div>
-
-          <ColorThemePicker
-            colorScheme={branding.colorScheme}
-            primaryColor={branding.primaryColor}
-            accentColor={branding.accentColor}
-            companyName={branding.companyName}
-            onChange={(scheme, primary, accent) =>
-              setBranding({
-                ...branding,
-                colorScheme: scheme,
-                primaryColor: primary,
-                accentColor: accent,
-              })
-            }
-          />
-        </motion.div>
-
-        {/* Bento Item 6: LicServer Konfiguration */}
-        <motion.div
-          variants={cardVariants}
-          whileHover={{ y: -3 }}
-          className="md:col-span-3 lg:col-span-4 p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-5 hover:border-violet-500/30 transition-all duration-300 shadow-md"
-        >
-          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-800/80 pb-4">
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-xl bg-violet-500/10 border border-violet-500/20 text-violet-400 flex items-center justify-center">
-                <KeyRound className="w-5 h-5" />
-              </div>
-              <div>
-                <h3 className="font-bold text-lg text-white">CASPOS Lizenzserver (LicServer)</h3>
-                <p className="text-xs text-slate-400">REST API-Anbindung für automatisierte Lizenzierung</p>
-              </div>
-            </div>
-
-            {licStatus && (
-              <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold border ${
-                licStatus.ok
-                  ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400'
-                  : 'bg-amber-500/10 border-amber-500/20 text-amber-400'
-              }`}>
-                {licStatus.ok ? <CheckCircle2 className="w-3.5 h-3.5" /> : <XCircle className="w-3.5 h-3.5" />}
-                {licStatus.message}
-              </div>
-            )}
-          </div>
-
-          {licMsg && (
-            <div className={`p-3 rounded-xl text-xs font-medium border ${
-              licMsgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
-            }`}>
-              {licMsg}
-            </div>
-          )}
-
-          <div className="grid md:grid-cols-2 gap-4">
-            <div className="space-y-1.5">
-              <Label htmlFor="lic-url" className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
-                <Server className="w-3.5 h-3.5 text-slate-400" /> Server URL
-              </Label>
-              <Input
-                id="lic-url"
-                value={licUrl}
-                onChange={e => setLicUrl(e.target.value)}
-                placeholder="http://192.168.178.174:9980"
-                className="text-sm font-mono bg-slate-950/80 border-slate-800 text-white rounded-xl"
-              />
-            </div>
-
-            <div className="space-y-1.5">
-              <Label htmlFor="lic-key" className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
-                <KeyRound className="w-3.5 h-3.5 text-slate-400" /> API-Key
-              </Label>
-              <div className="relative">
-                <Input
-                  id="lic-key"
-                  type={showKey ? 'text' : 'password'}
-                  value={licKey}
-                  onChange={e => setLicKey(e.target.value)}
-                  placeholder="Ihr X-Api-Key"
-                  className="text-sm font-mono pr-10 bg-slate-950/80 border-slate-800 text-white rounded-xl"
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowKey(v => !v)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white transition-colors"
-                  aria-label={showKey ? 'Key verbergen' : 'Key anzeigen'}
-                >
-                  {showKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex items-center justify-end gap-3 pt-2">
-            <Button
-              id="lic-save-btn"
-              disabled={licSaving || licTesting}
-              onClick={async () => {
-                setLicSaving(true);
-                setLicMsg('');
-                setLicStatus(null);
-                const res = await saveLicServerConfig(licUrl, licKey);
-                setLicMsgType(res.success ? 'success' : 'error');
-                setLicMsg(res.success ? 'Konfiguration gespeichert.' : (res.error || 'Fehler beim Speichern'));
-                setLicSaving(false);
-              }}
-              className="bg-violet-600 hover:bg-violet-500 text-white rounded-xl px-5 h-10 text-xs font-bold"
-            >
-              {licSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <KeyRound className="w-4 h-4 mr-2" />}
-              Speichern
-            </Button>
-
-            <Button
-              id="lic-test-btn"
-              variant="outline"
-              disabled={licSaving || licTesting}
-              onClick={async () => {
-                setLicTesting(true);
-                setLicStatus(null);
-                await saveLicServerConfig(licUrl, licKey);
-                const result = await testLicServerConnection();
-                setLicStatus(result);
-                setLicTesting(false);
-              }}
-              className="border-slate-700 text-slate-300 hover:text-white rounded-xl px-5 h-10 text-xs font-bold"
-            >
-              {licTesting ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Wifi className="w-4 h-4 mr-2" />}
-              Verbindung testen
-            </Button>
-          </div>
-        </motion.div>
-      </motion.div>
+              </motion.div>
+            </Link>
+          );
+        })}
+      </div>
     </div>
   );
 }

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

@@ -0,0 +1,226 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { Download, Upload, Loader2, Sliders, ShieldAlert, FileArchive } from 'lucide-react';
+import { createClient } from '@/lib/supabase/client';
+import { useRouter } from 'next/navigation';
+
+export default function SystemPage() {
+  const [loading, setLoading] = useState(true);
+  const [demoActive, setDemoActive] = useState(true);
+  const [exporting, setExporting] = useState(false);
+  const [importing, setImporting] = useState(false);
+  const [statusMsg, setStatusMsg] = useState('');
+  const [statusType, setStatusType] = useState<'success' | 'error' | 'info' | ''>('');
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    async function loadData() {
+      try {
+        const supabase = createClient();
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+          router.push('/auth/login');
+          return;
+        }
+        const state = localStorage.getItem('demo_banner_disabled') !== 'true';
+        setDemoActive(state);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [router]);
+
+  const toggleDemo = (checked: boolean) => {
+    setDemoActive(checked);
+    localStorage.setItem('demo_banner_disabled', (!checked).toString());
+    window.dispatchEvent(new Event('storage_demo_changed'));
+  };
+
+  const handleExport = async () => {
+    setExporting(true);
+    setStatusMsg('Export läuft...');
+    setStatusType('info');
+    try {
+      const res = await fetch('/api/admin/db-backup');
+      if (!res.ok) throw new Error('Export fehlgeschlagen');
+
+      const blob = await res.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `webshop_backup_${new Date().toISOString().split('T')[0]}.zip`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      window.URL.revokeObjectURL(url);
+      setStatusMsg('Export erfolgreich abgeschlossen.');
+      setStatusType('success');
+    } catch (err: any) {
+      console.error(err);
+      setStatusMsg(`Fehler beim Export: ${err.message}`);
+      setStatusType('error');
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const handleImport = async () => {
+    if (!selectedFile) return;
+    if (!confirm('ACHTUNG: Dies löscht und überschreibt alle aktuellen Datenbankinhalte in dieser Instanz. Möchten Sie wirklich fortfahren?')) {
+      return;
+    }
+    setImporting(true);
+    setStatusMsg('Import läuft...');
+    setStatusType('info');
+    try {
+      const formData = new FormData();
+      formData.append('file', selectedFile);
+
+      const res = await fetch('/api/admin/db-backup', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Import fehlgeschlagen');
+
+      setStatusMsg('Datenbank erfolgreich importiert!');
+      setStatusType('success');
+      setSelectedFile(null);
+    } catch (err: any) {
+      console.error(err);
+      setStatusMsg(`Fehler beim Import: ${err.message}`);
+      setStatusType('error');
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  if (loading) {
+    return <div className="p-8 text-white flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>;
+  }
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto space-y-6">
+      <div>
+        <h1 className="text-3xl font-extrabold tracking-tight text-white flex items-center gap-3">
+          <Sliders className="w-8 h-8 text-amber-400" />
+          System & Backup
+        </h1>
+        <p className="text-slate-400 text-xs mt-1">
+          Verwaltung von System-Bannern, Datenbank-Sicherungen und Wiederherstellungen.
+        </p>
+      </div>
+
+      {statusMsg && (
+        <div className={`p-3.5 rounded-xl text-xs font-medium border ${
+          statusType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' :
+          statusType === 'error' ? 'bg-destructive/10 border-destructive/20 text-destructive' :
+          'bg-sky-500/10 border-sky-500/20 text-sky-400'
+        }`}>
+          {statusMsg}
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+        <div className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 flex flex-col justify-between space-y-4">
+          <div className="space-y-3">
+            <div className="w-10 h-10 rounded-xl bg-sky-500/10 border border-sky-500/20 text-sky-400 flex items-center justify-center">
+              <Sliders className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="font-bold text-base text-white">System Banner</h3>
+              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+                Gelbe Demo-Warnmeldungen im gesamten Shop aktivieren oder stummschalten.
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center justify-between pt-3 border-t border-slate-800/80">
+            <span className="text-xs font-semibold text-slate-300">Banner aktiv</span>
+            <Switch checked={demoActive} onCheckedChange={toggleDemo} />
+          </div>
+        </div>
+
+        <div className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 flex flex-col justify-between space-y-4">
+          <div className="space-y-3">
+            <div className="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400 flex items-center justify-center">
+              <Download className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="font-bold text-base text-white">DB Backup</h3>
+              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+                Lädt alle Produkte, Firmen, Lizenzen &amp; Einstellungen als ZIP-Archiv herunter.
+              </p>
+            </div>
+          </div>
+          <Button
+            onClick={handleExport}
+            disabled={exporting || importing}
+            className="w-full bg-blue-600 hover:bg-blue-500 text-white rounded-xl h-10 text-xs font-bold"
+          >
+            {exporting ? (
+              <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Export läuft...</>
+            ) : (
+              <><Download className="w-4 h-4 mr-2" /> ZIP Export</>
+            )}
+          </Button>
+        </div>
+
+        <div className="md:col-span-2 p-5 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-4">
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div className="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center">
+                <Upload className="w-5 h-5" />
+              </div>
+              <span className="text-[10px] font-bold uppercase tracking-wider text-amber-400 bg-amber-500/10 px-2.5 py-1 rounded-full border border-amber-500/20 flex items-center gap-1">
+                <ShieldAlert className="w-3 h-3" /> Überschreibt DB
+              </span>
+            </div>
+            <div>
+              <h3 className="font-bold text-base text-white">Daten Wiederherstellung</h3>
+              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+                Spielen Sie eine gesicherte ZIP-Sicherungsdatei ein. Warnung: Überschreibt aktuelle Datenbankinhalte.
+              </p>
+            </div>
+          </div>
+
+          <div className="grid sm:grid-cols-2 gap-3 pt-2">
+            <div className="relative border border-dashed border-slate-700/80 rounded-xl p-3 hover:bg-slate-800/50 transition cursor-pointer flex items-center justify-center text-center">
+              <input
+                type="file"
+                accept=".zip"
+                onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
+                disabled={exporting || importing}
+                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
+              />
+              <span className="text-xs font-medium text-slate-300 truncate px-2 flex items-center gap-1.5">
+                <FileArchive className="w-4 h-4 text-amber-400 shrink-0" />
+                {selectedFile ? selectedFile.name : 'ZIP-Datei auswählen'}
+              </span>
+            </div>
+
+            <Button
+              onClick={handleImport}
+              disabled={!selectedFile || exporting || importing}
+              variant="outline"
+              className="w-full border-amber-500/30 text-amber-300 hover:bg-amber-500/10 rounded-xl h-10 text-xs font-bold"
+            >
+              {importing ? (
+                <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Importiert...</>
+              ) : (
+                <><Upload className="w-4 h-4 mr-2" /> ZIP Einspielen</>
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

shop/app/admin/layout.tsx

@@ -77,17 +77,25 @@ export default async function AdminLayout({
               <div className="pt-2 pb-1 px-3">
                 <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-600">Einstellungen</span>
               </div>
-              <AdminNavLink href="/admin/einstellungen">
-                <Settings className="w-5 h-5" />
-                Allgemein
+              <AdminNavLink href="/admin/einstellungen/firmendaten">
+                <Building2 className="w-5 h-5" />
+                Firmendaten
+              </AdminNavLink>
+              <AdminNavLink href="/admin/einstellungen/branding">
+                <Sparkles className="w-5 h-5 text-violet-400" />
+                Branding & Design
+              </AdminNavLink>
+              <AdminNavLink href="/admin/einstellungen/licserver">
+                <Wrench className="w-5 h-5 text-amber-400" />
+                LicServer
               </AdminNavLink>
               <AdminNavLink href="/admin/settings">
-                <Wrench className="w-5 h-5" />
-                SMTP
+                <Settings className="w-5 h-5 text-sky-400" />
+                SMTP Server
               </AdminNavLink>
-              <AdminNavLink href="/admin/tools">
-                <Database className="w-5 h-5" />
-                DB-Tools
+              <AdminNavLink href="/admin/einstellungen/system">
+                <Database className="w-5 h-5 text-emerald-400" />
+                System & Backup
               </AdminNavLink>
             </>
           )}

shop/app/admin/orders/page.tsx

@@ -7,8 +7,8 @@ export default async function AdminOrdersPage() {
     <div className="p-8 space-y-6">
       <div className="flex justify-between items-center">
         <div>
-          <h1 className="text-3xl font-bold tracking-tight text-white">Bestellungen</h1>
-          <p className="text-slate-400">Verwalten Sie alle Kundenbestellungen und greifen Sie auf generierte Annfragesbestätigungen zu.</p>
+          <h1 className="text-3xl font-bold tracking-tight text-white">Anfragen & Bestellungen</h1>
+          <p className="text-slate-400">Verwalten Sie alle Anfragen, prüfen Sie Details und greifen Sie auf generierte Anfragebestätigungen zu.</p>
         </div>
       </div>
 

shop/app/api/admin/db-backup/route.ts

@@ -67,7 +67,8 @@ export async function GET() {
       'orders',
       'profiles',
       'users',
-      'settings'
+      'settings',
+      'branding_settings'
     ];
 
     const backupData: Record<string, any[]> = {};

shop/app/api/admin/send-test-email/route.ts

@@ -43,7 +43,20 @@ export async function POST(request: Request) {
 
   const { to, subject, text, html } = await request.json();
   try {
-    const info = await sendMail({ to, subject, text, html });
+    const { data: brandData } = await supabase.from('settings').select('primary_color').eq('id', 'branding').maybeSingle();
+    const primaryColor = brandData?.primary_color || '#2563eb';
+
+    const testHtml = html || `
+      <div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
+        <h2 style="color: ${primaryColor}; margin-bottom: 16px;">Test-E-Mail</h2>
+        <p style="color: #475569; font-size: 16px; line-height: 1.5;">${text || 'Dies ist eine automatische Test-E-Mail.'}</p>
+        <div style="margin-top: 24px; padding: 12px; background-color: #f8fafc; border-left: 4px solid ${primaryColor}; font-size: 14px; color: #334155;">
+          SMTP-Konfiguration & Branding-Farbe erfolgreich verifiziert.
+        </div>
+      </div>
+    `;
+
+    const info = await sendMail({ to, subject, text, html: testHtml });
     return NextResponse.json({ message: 'Email sent', info });
   } catch (err) {
     console.error('Mail error', err);

shop/app/api/admin/smtp-settings/route.ts

@@ -1,96 +1,76 @@
 // API route for getting and updating SMTP settings (protected by admin check)
 import { NextResponse } from 'next/server';
-import { createServerClient } from '@supabase/ssr';
-import { cookies } from 'next/headers';
+import { verifyAdmin } from '@/lib/actions/auth';
+import { createAdminClient } from '@/lib/supabase/admin';
+import { createClient } from '@/lib/supabase/server';
+
 export async function GET() {
-    const cookieStore = await cookies();
+  try {
+    await verifyAdmin();
+  } catch (err: any) {
+    return NextResponse.json({ error: err.message || 'Not authenticated' }, { status: 401 });
+  }
 
-  const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL || '';
-  const supabase = createServerClient(
-    supabaseUrl,
-    process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
-    {
-      cookies: {
-        getAll() {
-          return cookieStore.getAll()
-        },
-        setAll(cookiesToSet) {
-          try {
-            cookiesToSet.forEach(({ name, value, options }) =>
-              cookieStore.set(name, value, options)
-            )
-          } catch {
-            // Kann in einer API-Route ignoriert werden, wenn nur gelesen wird
-          }
-        },
-      },
-      cookieOptions: {
-        name: "webshop-auth-token",
-      },
+  try {
+    let client: any;
+    try {
+      client = createAdminClient();
+    } catch {
+      client = await createClient();
     }
-  );
 
-  const { data: { user: authUser }, error: authError } = await supabase.auth.getUser();
-  if (authError || !authUser) {
-    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
-  }
-  const { data: user } = await supabase.from('users').select('role').eq('id', authUser.id).single();
-  if (!user || user.role !== 'admin') {
-    return NextResponse.json({ error: 'Insufficient permissions' }, { status: 403 });
-  }
+    const { data, error } = await client
+      .from('settings')
+      .select('*')
+      .eq('id', 'smtp')
+      .maybeSingle();
 
-  const { data, error } = await supabase.from('settings').select('*').maybeSingle();
-  if (error) {
-    return NextResponse.json({ error: error.message }, { status: 500 });
+    if (error) {
+      console.error('Error fetching SMTP settings:', error);
+      return NextResponse.json({ 
+        settings: { host: '', port: 587, secure: false, user: '', pass: '' } 
+      });
+    }
+
+    return NextResponse.json({ 
+      settings: data || { host: '', port: 587, secure: false, user: '', pass: '' } 
+    });
+  } catch (err: any) {
+    console.error('SMTP settings GET error:', err);
+    return NextResponse.json({ 
+      settings: { host: '', port: 587, secure: false, user: '', pass: '' } 
+    });
   }
-  return NextResponse.json({ 
-    settings: data || { host: '', port: 587, secure: false, user: '', pass: '' } 
-  });
 }
 
 export async function POST(request: Request) {
-    const cookieStore = await cookies();
-
-    const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL || '';
-    const supabase = createServerClient(
-      supabaseUrl,
-      process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
-      {
-        cookies: {
-          getAll() {
-            return cookieStore.getAll()
-          },
-          setAll(cookiesToSet) {
-            try {
-              cookiesToSet.forEach(({ name, value, options }) =>
-                cookieStore.set(name, value, options)
-              )
-            } catch {
-              // Kann in einer API-Route ignoriert werden, wenn nur gelesen wird
-            }
-          },
-        },
-        cookieOptions: {
-          name: "webshop-auth-token",
-        },
-      }
-    );
-
-  const { data: { user: authUser }, error: authError } = await supabase.auth.getUser();
-  if (authError || !authUser) {
-    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
-  }
-  const { data: user } = await supabase.from('users').select('role').eq('id', authUser.id).single();
-  if (!user || user.role !== 'admin') {
-    return NextResponse.json({ error: 'Insufficient permissions' }, { status: 403 });
+  try {
+    await verifyAdmin();
+  } catch (err: any) {
+    return NextResponse.json({ error: err.message || 'Not authenticated' }, { status: 401 });
   }
 
-  const payload = await request.json(); // expect {host, port, secure, user, pass}
-  const { error } = await supabase
-    .from('settings')
-    .upsert({ id: 'smtp', ...payload });
-  if (error) {
-    return NextResponse.json({ error: error.message }, { status: 500 });
+  try {
+    let client: any;
+    try {
+      client = createAdminClient();
+    } catch {
+      client = await createClient();
+    }
+
+    const payload = await request.json();
+    const { error } = await client
+      .from('settings')
+      .upsert({ id: 'smtp', ...payload });
+
+    if (error) {
+      console.error('Error saving SMTP settings:', error);
+      return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+
+    return NextResponse.json({ message: 'SMTP settings saved' });
+  } catch (err: any) {
+    console.error('SMTP settings POST error:', err);
+    return NextResponse.json({ error: err.message || 'Fehler beim Speichern' }, { status: 500 });
   }
-  return NextResponse.json({ message: 'SMTP settings saved' });
 }

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

@@ -7,7 +7,7 @@ import { createHash } from 'crypto';
 import { renderToBuffer } from '@react-pdf/renderer';
 import React from 'react';
 import { InvoicePDF } from '@/components/invoice-pdf';
-import { getOrderEmailTemplate, buildEmailItemsSection } from '@/lib/actions/email-templates';
+import { generateOrderEmailHtml, generateOrderEmailSubject } from '@/lib/actions/email-templates';
 import { validateWizardSelections } from '@/lib/actions/validation';
 
 
@@ -293,17 +293,18 @@ export async function POST(request: Request) {
             `;
           }
 
-          const itemsSection = buildEmailItemsSection(items);
-
-          const emailTemplate = getOrderEmailTemplate({
+          const emailTemplate = generateOrderEmailHtml({
             orderNumber: order.order_number,
+            status: 'pending',
             formattedDate,
             customerCompanyName: customerSnapshot.company_name,
-            totalDetailsText,
-            totalDetailsHtml,
-            itemsDetailsText: itemsSection.text,
-            itemsDetailsHtml: itemsSection.html
-          }, `${process.env.NEXT_PUBLIC_SITE_URL || 'https://staging.hephex.de'}`, false);
+            items,
+            taxRate,
+            oneTimeNet,
+            monthlyNet,
+          });
+
+          const mailSubject = generateOrderEmailSubject(order.order_number, 'pending');
 
           const { data: bufferData, error: downloadError } = await supabase
             .storage
@@ -322,7 +323,7 @@ export async function POST(request: Request) {
 
           await sendMail({
             to: user.email,
-            subject: `Anfragebestätigung ${order.order_number}`,
+            subject: mailSubject,
             text: emailTemplate.text,
             html: emailTemplate.html,
             attachments

shop/app/globals.css

@@ -193,4 +193,30 @@ input:focus, select:focus, textarea:focus {
 option {
   color: oklch(var(--oklch-text-main)) !important;
   background-color: oklch(var(--oklch-surface)) !important;
+}
+
+/* Eye-Catcher & Rüttel-Animation für fehlende Pflichtkategorien */
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  15%, 55% { transform: translateX(-4px); }
+  35%, 75% { transform: translateX(4px); }
+}
+
+@keyframes eye-catcher-glow {
+  0%, 100% {
+    box-shadow: 0 0 15px rgba(244, 63, 94, 0.6), inset 0 0 8px rgba(244, 63, 94, 0.3);
+    border-color: rgba(244, 63, 94, 0.9);
+  }
+  50% {
+    box-shadow: 0 0 28px rgba(239, 68, 68, 0.9), inset 0 0 14px rgba(239, 68, 68, 0.5);
+    border-color: rgba(239, 68, 68, 1);
+  }
+}
+
+.animate-shake {
+  animation: shake 0.6s ease-in-out infinite;
+}
+
+.animate-eye-catcher {
+  animation: eye-catcher-glow 1.2s ease-in-out infinite, shake 0.8s ease-in-out infinite !important;
 }

shop/app/my-customers/[id]/page.tsx

@@ -193,8 +193,9 @@ export default function CustomerDetailPage({ params }: { params: Promise<{ id: s
                 </Button>
               ) : (
                 <div className="space-y-3 p-4 rounded-lg bg-red-500/10 border border-red-500/30">
-                  <p className="text-sm text-red-300 font-semibold">
-                    ⚠️ Diese Aktion ist unwiderruflich. Alle personenbezogenen Daten werden überschrieben.
+                  <p className="text-sm text-red-300 font-semibold flex items-center gap-2">
+                    <AlertTriangle className="w-4 h-4 shrink-0 text-red-400" />
+                    <span>Diese Aktion ist unwiderruflich. Alle personenbezogenen Daten werden überschrieben.</span>
                   </p>
                   <div className="flex gap-3">
                     <Button

shop/app/my-orders/MyOrdersClient.tsx

@@ -224,43 +224,83 @@ export function MyOrdersClient({ orders, error }: MyOrdersClientProps) {
                       </div>
                     </div>
 
-                    {/* Kassen & Produkte Detail-Übersicht */}
+                    {/* Kassen & Produkte Detail-Übersicht (Angelehnt an Kundenliste DeviceCard) */}
                     {items.length > 0 && (
-                      <div className="space-y-2">
+                      <div className="space-y-3 pt-2">
                         <p className="text-[11px] font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
                           <Monitor className="w-3.5 h-3.5 text-primary" />
-                          Enthaltene Kassen ({items.length}):
+                          Kassenaufstellung ({items.length} {items.length === 1 ? 'Kasse' : 'Kassen'}):
                         </p>
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
-                          {items.map((item, idx) => (
-                            <div
-                              key={idx}
-                              className="bg-slate-900/60 border border-white/10 rounded-xl p-3 space-y-1.5 text-xs"
-                            >
-                              <div className="flex items-center justify-between gap-2">
-                                <span className="font-bold text-white flex items-center gap-1.5">
-                                  <Monitor className="w-3.5 h-3.5 text-sky-400 shrink-0" />
-                                  {item.device_name || `Kasse ${idx + 1}`}
-                                </span>
-                                <span className={`text-[9px] px-1.5 py-0.2 rounded border ${item.billing_interval === 'one_time' ? 'border-amber-500/30 text-amber-400 bg-amber-500/10' : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'} font-semibold uppercase`}>
-                                  {item.billing_interval === 'one_time' ? 'Kauf' : 'Abo'}
-                                </span>
-                              </div>
-                              <p className="text-slate-300 font-medium">{item.product_name}</p>
-                              {item.license_number && (
-                                <p className="text-[10px] text-slate-400 font-mono">Lizenz: {item.license_number}</p>
-                              )}
-                              {item.selected_modules && item.selected_modules.length > 0 && (
-                                <div className="pt-1 border-t border-white/5 flex flex-wrap gap-1">
-                                  {item.selected_modules.map((mod: any, mIdx: number) => (
-                                    <span key={mIdx} className="text-[10px] bg-white/5 text-slate-400 px-1.5 py-0.5 rounded border border-white/5">
-                                      + {mod.module_name || mod.name} {mod.quantity > 1 ? `(${mod.quantity}x)` : ''}
+                        <div className="space-y-2.5">
+                          {items.map((item, idx) => {
+                            const devName = item.device_name || `Kasse ${idx + 1}`
+                            const licNum = item.license_number
+                            const modules = item.selected_modules || []
+                            
+                            // Chips für Hauptprodukt und Module
+                            const chips: string[] = []
+                            if (item.product_name) chips.push(item.product_name)
+                            for (const mod of modules) {
+                              if (mod.module_name) chips.push(mod.module_name)
+                            }
+
+                            const itemPrice = (item as any).price || item.base_price || 0
+                            const modulesPrice = modules.reduce((sum: number, m: any) => sum + ((m.price || 0) * (m.quantity || 1)), 0)
+                            const deviceTotal = itemPrice + modulesPrice
+
+                            return (
+                              <div
+                                key={idx}
+                                className="p-4 rounded-xl bg-slate-950/70 border border-slate-800 hover:border-slate-700 transition-all flex flex-col md:flex-row md:items-start justify-between gap-4 relative overflow-hidden"
+                              >
+                                {/* Kassen-Info links */}
+                                <div className="space-y-2 min-w-[200px] flex-1">
+                                  {/* Kassen-Name + Lizenznummer daneben + Intervall */}
+                                  <div className="flex items-center gap-2 flex-wrap border-b border-white/5 pb-2">
+                                    <span className="px-2 py-0.5 rounded text-xs font-extrabold bg-blue-500/20 text-blue-400 border border-blue-500/30 font-mono">
+                                      {devName}
                                     </span>
-                                  ))}
+
+                                    {licNum && (
+                                      <span className="text-xs font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20 flex items-center gap-1">
+                                        <span className="text-[10px] text-slate-400 uppercase font-sans">Lizenz:</span>
+                                        {licNum}
+                                      </span>
+                                    )}
+
+                                    <span className={`text-[10px] px-1.5 py-0.5 rounded border ${item.billing_interval === 'one_time' ? 'border-amber-500/30 text-amber-400 bg-amber-500/10' : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'} font-semibold uppercase`}>
+                                      {item.billing_interval === 'one_time' ? 'Kauf' : 'Abo'}
+                                    </span>
+                                  </div>
+
+                                  {/* Produkt + Modul Chips */}
+                                  {chips.length > 0 && (
+                                    <div className="flex flex-wrap gap-1.5 pt-1">
+                                      {chips.map((chip, cIdx) => (
+                                        <span
+                                          key={cIdx}
+                                          className="text-xs bg-white/5 border border-white/10 rounded-md px-2 py-0.5 text-slate-300"
+                                        >
+                                          {chip}
+                                        </span>
+                                      ))}
+                                    </div>
+                                  )}
                                 </div>
-                              )}
-                            </div>
-                          ))}
+
+                                {/* Preis rechts */}
+                                {deviceTotal > 0 && (
+                                  <div className="text-left md:text-right shrink-0 border-t md:border-t-0 pt-2 md:pt-0 border-white/5">
+                                    <p className="text-[10px] text-slate-500 uppercase tracking-wider">Kassenwert</p>
+                                    <p className="font-bold text-white text-sm">
+                                      {fmt(deviceTotal)}
+                                      {item.billing_interval === 'monthly' && <span className="text-xs font-normal text-slate-400"> / mtl.</span>}
+                                    </p>
+                                  </div>
+                                )}
+                              </div>
+                            )
+                          })}
                         </div>
                       </div>
                     )}

shop/components/HeaderWrapper.tsx

@@ -3,6 +3,8 @@
 import { usePathname } from "next/navigation";
 import { DemoWrapper } from "./DemoWrapper";
 
+import { AlertTriangle } from "lucide-react";
+
 interface HeaderWrapperProps {
   navbar: React.ReactNode;
   children: React.ReactNode;
@@ -17,21 +19,24 @@ export function HeaderWrapper({ navbar, children }: HeaderWrapperProps) {
     return <>{children}</>;
   }
 
+  const isWizard = pathname === "/order" || pathname === "/wizard";
+
   return (
-    <div className="flex flex-col min-h-screen bg-slate-50 text-slate-900 dark:bg-[#020617] dark:text-white">
+    <div className={`flex flex-col ${isWizard ? "h-screen overflow-hidden" : "min-h-screen"} bg-slate-50 text-slate-900 dark:bg-[#020617] dark:text-white`}>
       {/* Demo Banner */}
       <DemoWrapper>
         <div
           id="demo-banner"
-          className="bg-amber-500/10 border-b border-amber-500/20 py-2 px-4 text-center text-xs text-amber-600 dark:text-amber-400 font-medium tracking-wide z-50"
+          className="bg-amber-500/10 border-b border-amber-500/20 py-2 px-4 text-center text-xs text-amber-600 dark:text-amber-400 font-medium tracking-wide z-50 flex items-center justify-center gap-1.5"
         >
-          ⚠️ Dies ist eine **Demo-Webseite (Dummy-Shop)**. Es werden keine echten Bestellungen verarbeitet oder Zahlungen abgewickelt.
+          <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
+          <span>Dies ist eine **Demo-Webseite (Dummy-Shop)**. Es werden keine echten Bestellungen verarbeitet oder Zahlungen abgewickelt.</span>
         </div>
       </DemoWrapper>
 
       {navbar}
       
-      <main className="flex-1">
+      <main className={`flex-1 ${isWizard ? "overflow-hidden" : ""}`}>
         {children}
       </main>
     </div>

shop/components/admin/create-product-dialog.tsx

@@ -26,7 +26,7 @@ import {
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
-import { Plus, Trash2, X, PlusCircle } from 'lucide-react'
+import { Plus, Trash2, X, PlusCircle, CreditCard, RefreshCw } from 'lucide-react'
 import { createProduct, updateProduct } from '@/lib/actions/products'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
@@ -288,23 +288,26 @@ export function CreateProductDialog({
                         <FormLabel className="text-slate-900 dark:text-white">Abrechnungsmodell</FormLabel>
                         <div className="grid grid-cols-2 gap-2 pt-1">
                           {[
-                            { value: 'one_time', label: 'Einmalig',  icon: '💳' },
-                            { value: 'monthly',  label: 'Monatlich', icon: '🔄' },
-                          ].map(opt => (
-                            <button
-                              key={opt.value}
-                              type="button"
-                              onClick={() => field.onChange(opt.value)}
-                              className={`flex flex-col items-center gap-1 p-3 rounded-xl border-2 text-sm font-medium transition-all ${
-                                field.value === opt.value
-                                  ? 'border-primary bg-primary/10 text-primary dark:text-white'
-                                  : 'border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10'
-                              }`}
-                            >
-                              <span className="text-lg">{opt.icon}</span>
-                              {opt.label}
-                            </button>
-                          ))}
+                            { value: 'one_time', label: 'Einmalig',  icon: CreditCard },
+                            { value: 'monthly',  label: 'Monatlich', icon: RefreshCw },
+                          ].map(opt => {
+                            const IconComponent = opt.icon;
+                            return (
+                              <button
+                                key={opt.value}
+                                type="button"
+                                onClick={() => field.onChange(opt.value)}
+                                className={`flex flex-col items-center gap-1 p-3 rounded-xl border-2 text-sm font-medium transition-all ${
+                                  field.value === opt.value
+                                    ? 'border-primary bg-primary/10 text-primary dark:text-white'
+                                    : 'border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10'
+                                }`}
+                              >
+                                <IconComponent className="w-5 h-5 mb-1" />
+                                {opt.label}
+                              </button>
+                            );
+                          })}
                         </div>
                         <FormMessage />
                       </FormItem>

shop/components/admin/orders-table.tsx

@@ -5,15 +5,42 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Download, ExternalLink, Search, Loader2 } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { 
+  Download, 
+  ExternalLink, 
+  Search, 
+  Loader2, 
+  Eye, 
+  ArrowUpDown, 
+  Building2, 
+  User, 
+  Mail, 
+  MapPin, 
+  Package, 
+  FileText, 
+  Calendar,
+  Layers,
+  Sparkles,
+  XCircle,
+  CheckCircle,
+  Edit3
+} from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { updateOrderStatus } from "@/lib/actions/orders";
-import { resolveSupabaseUrl } from "@/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { updateOrderStatus, rejectOrder, updateOrderPayload } from "@/lib/actions/orders";
 
 interface OrdersTableProps {
   initialOrders: any[];
@@ -21,7 +48,10 @@ interface OrdersTableProps {
 
 const statusLabel: Record<string, string> = {
   pending: 'Eingegangen',
-  active: 'In Bearbeitung',
+  pending_approval: 'Wartet auf Freigabe',
+  in_review: 'In Prüfung',
+  approved: 'Freigegeben',
+  active: 'Aktiviert',
   completed: 'Abgeschlossen',
   cancelled: 'Storniert',
   rejected: 'Abgelehnt',
@@ -29,27 +59,147 @@ const statusLabel: Record<string, string> = {
 
 const statusClass: Record<string, string> = {
   pending: 'bg-amber-500/20 text-amber-400 border border-amber-500/30',
+  pending_approval: 'bg-amber-600/20 text-amber-300 border border-amber-500/40',
+  in_review: 'bg-purple-500/20 text-purple-400 border border-purple-500/30',
+  approved: 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30',
   active: 'bg-blue-500/20 text-blue-400 border border-blue-500/30',
   completed: 'bg-green-500/20 text-green-400 border border-green-500/30',
-  cancelled: 'bg-red-500/20 text-red-400 border border-red-500/30',
-  rejected: 'bg-rose-500/20 text-rose-400 border border-rose-500/30',
+  cancelled: 'bg-slate-500/20 text-slate-400 border border-slate-500/30',
+  rejected: 'bg-red-500/20 text-red-400 border border-red-500/30',
 };
 
+type SortField = 'date_desc' | 'date_asc' | 'price_desc' | 'price_asc' | 'order_num';
+
 export function OrdersTable({ initialOrders }: OrdersTableProps) {
   const [orders, setOrders] = useState(initialOrders);
   const [search, setSearch] = useState("");
   const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [sortBy, setSortBy] = useState<SortField>("date_desc");
   const [updatingId, setUpdatingId] = useState<string | null>(null);
+  const [selectedOrder, setSelectedOrder] = useState<any | null>(null);
+  
+  // Rejection Dialog State
+  const [rejectingOrder, setRejectingOrder] = useState<any | null>(null);
+  const [rejectionReason, setRejectionReason] = useState("");
+  const [isSubmittingReject, setIsSubmittingReject] = useState(false);
+
+  // Preiskorrektur States
+  const [isEditingSnapshot, setIsEditingSnapshot] = useState(false);
+  const [editedSnapshot, setEditedSnapshot] = useState<any | null>(null);
+  const [isSavingSnapshot, setIsSavingSnapshot] = useState(false);
+
+  // Initialize editedSnapshot when selectedOrder changes
+  useEffect(() => {
+    if (selectedOrder) {
+      setEditedSnapshot(JSON.parse(JSON.stringify(selectedOrder.order_data || {})));
+      setIsEditingSnapshot(false);
+    } else {
+      setEditedSnapshot(null);
+      setIsEditingSnapshot(false);
+    }
+  }, [selectedOrder]);
+
+  const updateItemBasePrice = (itemIdx: number, newPrice: number) => {
+    if (!editedSnapshot) return;
+    const updatedItems = [...editedSnapshot.items];
+    const item = { ...updatedItems[itemIdx] };
+    item.base_price = newPrice;
+    
+    const moduleTotal = (item.selected_modules || []).reduce((acc: number, m: any) => acc + (m.total_price ?? (m.price * (m.quantity || 1))), 0);
+    item.item_total = newPrice + moduleTotal;
+    
+    updatedItems[itemIdx] = item;
+    recalculateSnapshot(updatedItems);
+  };
+
+  const updateModulePriceOrQty = (itemIdx: number, modIdx: number, field: 'price' | 'quantity', value: number) => {
+    if (!editedSnapshot) return;
+    const updatedItems = [...editedSnapshot.items];
+    const item = { ...updatedItems[itemIdx] };
+    const updatedModules = [...(item.selected_modules || [])];
+    const mod = { ...updatedModules[modIdx] };
+    
+    if (field === 'price') {
+      mod.price = value;
+    } else {
+      mod.quantity = value;
+    }
+    mod.total_price = mod.price * (mod.quantity || 1);
+    updatedModules[modIdx] = mod;
+    
+    item.selected_modules = updatedModules;
+    const moduleTotal = updatedModules.reduce((acc: number, m: any) => acc + (m.total_price ?? (m.price * (m.quantity || 1))), 0);
+    item.item_total = (item.base_price || 0) + moduleTotal;
+    
+    updatedItems[itemIdx] = item;
+    recalculateSnapshot(updatedItems);
+  };
+
+  const recalculateSnapshot = (updatedItems: any[]) => {
+    if (!editedSnapshot) return;
+    const taxRate = editedSnapshot.tax_rate ?? 19;
+    const subtotal = updatedItems.reduce((acc: number, item: any) => acc + (item.item_total || 0), 0);
+    const taxAmount = Math.round(subtotal * (taxRate / 100) * 100) / 100;
+    const total = Math.round((subtotal + taxAmount) * 100) / 100;
+    
+    setEditedSnapshot({
+      ...editedSnapshot,
+      items: updatedItems,
+      subtotal,
+      tax_amount: taxAmount,
+      total
+    });
+  };
+
+  const handleSaveSnapshot = async () => {
+    if (!editedSnapshot || !selectedOrder) return;
+    setIsSavingSnapshot(true);
+    try {
+      const updated = await updateOrderPayload(selectedOrder.id, {
+        orderSnapshot: editedSnapshot
+      });
+      setOrders(prev => prev.map(o => o.id === selectedOrder.id ? { ...o, order_data: editedSnapshot, total_price: editedSnapshot.total } : o));
+      setSelectedOrder({ ...selectedOrder, order_data: editedSnapshot, total_price: editedSnapshot.total });
+      setIsEditingSnapshot(false);
+    } catch (error: any) {
+      console.error(error);
+      alert("Fehler beim Speichern der Änderungen: " + error.message);
+    } finally {
+      setIsSavingSnapshot(false);
+    }
+  };
+
+  // Badge-Counter berechnen
+  const countAll = orders.length;
+  const countOffen = orders.filter(o => ["pending", "pending_approval", "in_review"].includes(o.status)).length;
+  const countApproved = orders.filter(o => o.status === "approved").length;
+  const countActive = orders.filter(o => ["active", "completed"].includes(o.status)).length;
+  const countRejected = orders.filter(o => ["rejected", "cancelled"].includes(o.status)).length;
+
+  const displaySnapshot = editedSnapshot || selectedOrder?.order_data || {};
+  const displayItems = displaySnapshot.items || [];
 
   useEffect(() => {
     setOrders(initialOrders);
   }, [initialOrders]);
 
-  const handleStatusChange = async (orderId: string, newStatus: 'pending' | 'active' | 'completed' | 'cancelled' | 'rejected') => {
+  const handleStatusChange = async (orderId: string, newStatus: 'pending' | 'pending_approval' | 'in_review' | 'approved' | 'active' | 'completed' | 'cancelled' | 'rejected') => {
+    if (newStatus === 'rejected') {
+      const target = orders.find(o => o.id === orderId);
+      if (target) {
+        setRejectingOrder(target);
+        setRejectionReason("");
+        return;
+      }
+    }
+
     setUpdatingId(orderId);
     try {
       await updateOrderStatus(orderId, newStatus);
       setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: newStatus } : o));
+      if (selectedOrder?.id === orderId) {
+        setSelectedOrder((prev: any) => prev ? { ...prev, status: newStatus } : null);
+      }
     } catch (error) {
       console.error(error);
       alert("Fehler beim Ändern des Status.");
@@ -58,83 +208,142 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
     }
   };
 
-  const filteredOrders = orders.filter((order) => {
-    const orderNum = (order.order_number || "").toLowerCase();
-    const company = (order.customer_data?.company_name || "").toLowerCase();
-    const contact = `${order.customer_data?.first_name || ""} ${order.customer_data?.last_name || ""}`.toLowerCase();
-    
-    const matchesSearch = 
-      orderNum.includes(search.toLowerCase()) ||
-      company.includes(search.toLowerCase()) ||
-      contact.includes(search.toLowerCase());
+  const handleConfirmReject = async () => {
+    if (!rejectingOrder) return;
+    setIsSubmittingReject(true);
+    try {
+      await rejectOrder(rejectingOrder.id, rejectionReason || "Vom Administrator abgelehnt.");
+      setOrders(prev => prev.map(o => o.id === rejectingOrder.id ? { ...o, status: 'rejected' } : o));
+      if (selectedOrder?.id === rejectingOrder.id) {
+        setSelectedOrder((prev: any) => prev ? { ...prev, status: 'rejected' } : null);
+      }
+      setRejectingOrder(null);
+      setRejectionReason("");
+    } catch (error) {
+      console.error(error);
+      alert("Fehler beim Ablehnen der Anfrage.");
+    } finally {
+      setIsSubmittingReject(false);
+    }
+  };
 
-    const matchesStatus = statusFilter === "all" || order.status === statusFilter;
+  const filteredAndSortedOrders = orders
+    .filter((order) => {
+      const orderNum = (order.order_number || "").toLowerCase();
+      const company = (order.customer_data?.company_name || "").toLowerCase();
+      const contact = `${order.customer_data?.first_name || ""} ${order.customer_data?.last_name || ""}`.toLowerCase();
+      
+      const matchesSearch = 
+        orderNum.includes(search.toLowerCase()) ||
+        company.includes(search.toLowerCase()) ||
+        contact.includes(search.toLowerCase());
 
-    return matchesSearch && matchesStatus;
-  });
+      let matchesStatus = false;
+      if (statusFilter === "all") matchesStatus = true;
+      else if (statusFilter === "offen") matchesStatus = ["pending", "pending_approval", "in_review"].includes(order.status);
+      else if (statusFilter === "approved") matchesStatus = order.status === "approved";
+      else if (statusFilter === "active") matchesStatus = ["active", "completed"].includes(order.status);
+      else if (statusFilter === "rejected") matchesStatus = ["rejected", "cancelled"].includes(order.status);
+
+      return matchesSearch && matchesStatus;
+    })
+    .sort((a, b) => {
+      if (sortBy === 'date_desc') return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+      if (sortBy === 'date_asc') return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
+      if (sortBy === 'price_desc') return (b.total_price || 0) - (a.total_price || 0);
+      if (sortBy === 'price_asc') return (a.total_price || 0) - (b.total_price || 0);
+      if (sortBy === 'order_num') return (a.order_number || a.id).localeCompare(b.order_number || b.id);
+      return 0;
+    });
 
   return (
     <div className="space-y-4">
-      {/* Filterleiste */}
-      <div className="flex flex-col md:flex-row gap-4 justify-between items-start md:items-center bg-white/5 p-4 rounded-xl border border-white/5">
-        <div className="relative w-full md:max-w-sm">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
-          <Input
-            placeholder="Bestellung, Firma oder Name suchen..."
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            className="pl-10 bg-slate-950/40 border-white/10 text-white placeholder:text-slate-500"
-          />
+      {/* Filter- & Sortierleiste */}
+      <div className="flex flex-col lg:flex-row gap-4 justify-between items-start lg:items-center bg-white/5 p-4 rounded-xl border border-white/5">
+        <div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
+          <div className="relative w-full sm:w-80">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+            <Input
+              placeholder="Anfragenr., Firma oder Name..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-10 bg-slate-950/40 border-white/10 text-white placeholder:text-slate-500"
+            />
+          </div>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm" className="border-white/10 bg-slate-950/40 text-slate-200 gap-2 shrink-0">
+                <ArrowUpDown className="w-3.5 h-3.5 text-primary" />
+                <span>
+                  {sortBy === 'date_desc' && 'Datum (Neueste zuerst)'}
+                  {sortBy === 'date_asc' && 'Datum (Älteste zuerst)'}
+                  {sortBy === 'price_desc' && 'Betrag (Höchster zuerst)'}
+                  {sortBy === 'price_asc' && 'Betrag (Niedrigster zuerst)'}
+                  {sortBy === 'order_num' && 'Anfragenr.'}
+                </span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="bg-slate-900 border-white/10 text-white">
+              <DropdownMenuItem onClick={() => setSortBy('date_desc')} className="text-xs cursor-pointer">
+                Datum (Neueste zuerst)
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSortBy('date_asc')} className="text-xs cursor-pointer">
+                Datum (Älteste zuerst)
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSortBy('price_desc')} className="text-xs cursor-pointer">
+                Betrag (Höchster zuerst)
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSortBy('price_asc')} className="text-xs cursor-pointer">
+                Betrag (Niedrigster zuerst)
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSortBy('order_num')} className="text-xs cursor-pointer">
+                Anfragenr.
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
 
-        <div className="flex flex-wrap gap-2">
+        <div className="flex flex-wrap gap-1.5">
           <Button
             variant={statusFilter === "all" ? "default" : "outline"}
             size="sm"
             onClick={() => setStatusFilter("all")}
-            className="text-xs"
+            className="text-xs gap-1.5"
           >
-            Alle
+            Alle <Badge variant="secondary" className="bg-white/10 text-white border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countAll}</Badge>
           </Button>
           <Button
-            variant={statusFilter === "pending" ? "default" : "outline"}
+            variant={statusFilter === "offen" ? "default" : "outline"}
             size="sm"
-            onClick={() => setStatusFilter("pending")}
-            className="text-xs border-amber-500/20 hover:bg-amber-500/10 text-amber-400"
+            onClick={() => setStatusFilter("offen")}
+            className="text-xs border-amber-500/20 hover:bg-amber-500/10 text-amber-400 gap-1.5"
           >
-            Eingegangen
+            Offen / in_review <Badge variant="secondary" className="bg-amber-500/20 text-amber-400 border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countOffen}</Badge>
+          </Button>
+          <Button
+            variant={statusFilter === "approved" ? "default" : "outline"}
+            size="sm"
+            onClick={() => setStatusFilter("approved")}
+            className="text-xs border-emerald-500/20 hover:bg-emerald-500/10 text-emerald-400 gap-1.5"
+          >
+            Genehmigt <Badge variant="secondary" className="bg-emerald-500/20 text-emerald-400 border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countApproved}</Badge>
           </Button>
           <Button
             variant={statusFilter === "active" ? "default" : "outline"}
             size="sm"
             onClick={() => setStatusFilter("active")}
-            className="text-xs border-blue-500/20 hover:bg-blue-500/10 text-blue-400"
+            className="text-xs border-blue-500/20 hover:bg-blue-500/10 text-blue-400 gap-1.5"
           >
-            In Bearbeitung
-          </Button>
-          <Button
-            variant={statusFilter === "completed" ? "default" : "outline"}
-            size="sm"
-            onClick={() => setStatusFilter("completed")}
-            className="text-xs border-green-500/20 hover:bg-green-500/10 text-green-400"
-          >
-            Abgeschlossen
-          </Button>
-          <Button
-            variant={statusFilter === "cancelled" ? "default" : "outline"}
-            size="sm"
-            onClick={() => setStatusFilter("cancelled")}
-            className="text-xs border-red-500/20 hover:bg-red-500/10 text-red-400"
-          >
-            Storniert
+            Aktiv <Badge variant="secondary" className="bg-blue-500/20 text-blue-400 border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countActive}</Badge>
           </Button>
           <Button
             variant={statusFilter === "rejected" ? "default" : "outline"}
             size="sm"
             onClick={() => setStatusFilter("rejected")}
-            className="text-xs border-rose-500/20 hover:bg-rose-500/10 text-rose-400"
+            className="text-xs border-red-500/20 hover:bg-red-500/10 text-red-400 gap-1.5"
           >
-            Abgelehnt
+            Abgelehnt <Badge variant="secondary" className="bg-red-500/20 text-red-400 border-0 font-normal px-1 py-0 h-4 min-w-[16px] flex items-center justify-center rounded-full text-[10px]">{countRejected}</Badge>
           </Button>
         </div>
       </div>
@@ -144,31 +353,31 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
         <Table>
           <TableHeader>
             <TableRow className="border-white/10 bg-white/5 hover:bg-transparent">
-              <TableHead className="w-[140px] text-slate-200">Bestellnr.</TableHead>
-              <TableHead className="text-slate-200">Datum</TableHead>
-              <TableHead className="text-slate-200">Kunde</TableHead>
-              <TableHead className="text-slate-200">Auswahl</TableHead>
-              <TableHead className="text-slate-200">Betrag</TableHead>
-              <TableHead className="text-slate-200">Status</TableHead>
-              <TableHead className="text-right text-slate-200">Aktionen</TableHead>
+              <TableHead className="w-[140px] text-slate-200 font-bold">Anfragenr.</TableHead>
+              <TableHead className="text-slate-200 font-bold">Datum</TableHead>
+              <TableHead className="text-slate-200 font-bold">Kunde / Firma</TableHead>
+              <TableHead className="text-slate-200 font-bold">Auswahl / Produkte</TableHead>
+              <TableHead className="text-slate-200 font-bold">Gesamtbetrag</TableHead>
+              <TableHead className="text-slate-200 font-bold">Status</TableHead>
+              <TableHead className="text-right text-slate-200 font-bold">Aktionen</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
-            {filteredOrders.length === 0 ? (
+            {filteredAndSortedOrders.length === 0 ? (
               <TableRow>
                 <TableCell colSpan={7} className="text-center py-16 text-slate-500 italic">
-                  Keine Bestellungen gefunden.
+                  Keine Anfragen gefunden.
                 </TableCell>
               </TableRow>
             ) : (
-              filteredOrders.map((order) => {
+              filteredAndSortedOrders.map((order) => {
                 const items = order.order_data?.items || [];
                 return (
-                  <TableRow key={order.id} className="border-white/5 hover:bg-white/5 transition-colors">
-                    <TableCell className="font-mono text-xs text-primary font-semibold">
+                  <TableRow key={order.id} className="border-white/5 hover:bg-white/5 transition-colors group">
+                    <TableCell className="font-mono text-xs text-primary font-bold">
                       #{order.order_number || order.id.slice(0, 8)}
                     </TableCell>
-                    <TableCell className="text-slate-300 text-sm">
+                    <TableCell className="text-slate-300 text-sm whitespace-nowrap">
                       {new Date(order.created_at).toLocaleDateString('de-DE', {
                         day: '2-digit', month: '2-digit', year: 'numeric'
                       })}
@@ -177,38 +386,43 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
                       <div className="font-semibold text-white text-sm">
                         {order.customer_data?.company_name || 'Privatkunde'}
                       </div>
-                      <div className="text-xs text-slate-400">
+                      <div className="text-xs text-slate-400 flex items-center gap-1 mt-0.5">
+                        <User className="w-3 h-3 text-slate-500" />
                         {order.customer_data?.first_name} {order.customer_data?.last_name}
                       </div>
                     </TableCell>
-                    <TableCell className="max-w-[200px]">
+                    <TableCell className="max-w-[240px]">
                       <div className="flex flex-col gap-1.5">
-                        {items.map((item: any, idx: number) => (
+                        {items.slice(0, 2).map((item: any, idx: number) => (
                           <div
                             key={idx}
-                            className="text-[10px] text-slate-300 leading-tight"
+                            className="text-[11px] text-slate-300 leading-tight"
                           >
-                            <span className="font-semibold text-white block">
-                              {item.device_name || 'Kasse'}:
+                            <span className="font-semibold text-white block truncate">
+                              {item.device_name || 'Kasse'}: {item.product_name}
                             </span>
-                            <span>{item.product_name}</span>
                             {item.selected_modules?.length > 0 && (
-                              <span className="text-slate-500 block text-[9px] mt-0.5">
+                              <span className="text-slate-500 block text-[10px] truncate">
                                 + {item.selected_modules.map((m: any) => m.module_name || m.name).join(', ')}
                               </span>
                             )}
                           </div>
                         ))}
+                        {items.length > 2 && (
+                          <span className="text-[10px] text-primary font-semibold">
+                            + {items.length - 2} weitere Kassen
+                          </span>
+                        )}
                       </div>
                     </TableCell>
-                    <TableCell className="font-bold text-white text-sm">
-                      {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_price)}
+                    <TableCell className="font-bold text-white text-sm whitespace-nowrap">
+                      {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_price || 0)}
                     </TableCell>
                     <TableCell>
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild disabled={updatingId === order.id}>
                           <button className="focus:outline-none focus:ring-0 active:scale-95 disabled:pointer-events-none transition-transform duration-100">
-                            <Badge className={`text-xs px-2 py-0.5 rounded cursor-pointer transition-all duration-200 hover:opacity-85 flex items-center gap-1.5 ${statusClass[order.status] ?? 'bg-slate-500/20 text-slate-300'}`}>
+                            <Badge className={`text-xs px-2.5 py-1 rounded cursor-pointer transition-all duration-200 hover:opacity-85 flex items-center gap-1.5 ${statusClass[order.status] ?? 'bg-slate-500/20 text-slate-300'}`}>
                               {updatingId === order.id ? (
                                 <Loader2 className="w-3 h-3 animate-spin mr-1" />
                               ) : null}
@@ -217,7 +431,7 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
                             </Badge>
                           </button>
                         </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start" className="bg-slate-900 border-white/10 text-white min-w-[140px]">
+                        <DropdownMenuContent align="start" className="bg-slate-900 border-white/10 text-white min-w-[170px]">
                           {Object.entries(statusLabel).map(([key, label]) => (
                             <DropdownMenuItem
                               key={key}
@@ -233,9 +447,17 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
                     </TableCell>
                     <TableCell className="text-right">
                       <div className="flex justify-end gap-1.5">
-                        <Button variant="outline" size="sm" asChild className="h-8 border-amber-500/20 hover:bg-amber-500/10 text-amber-400 text-xs">
-                          <a href={`/order?id=${order.id}`}>
-                            Bearbeiten
+                        <Button 
+                          variant="outline" 
+                          size="sm" 
+                          onClick={() => setSelectedOrder(order)}
+                          className="h-8 border-white/10 hover:bg-white/10 text-slate-200 text-xs gap-1"
+                        >
+                          <Eye className="w-3.5 h-3.5 text-primary" /> Details
+                        </Button>
+                        <Button variant="outline" size="sm" asChild className="h-8 border-amber-500/20 hover:bg-amber-500/10 text-amber-400 text-xs gap-1">
+                          <a href={`/order?mode=admin_edit&orderId=${order.id}`}>
+                            <Edit3 className="w-3 h-3" /> Im Wizard öffnen
                           </a>
                         </Button>
                         <Button variant="outline" size="sm" asChild className="h-8 border-white/10 hover:bg-primary/20 text-xs">
@@ -243,11 +465,6 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
                             <ExternalLink className="w-3.5 h-3.5 mr-1" /> PDF
                           </a>
                         </Button>
-                        <Button variant="secondary" size="sm" asChild className="h-8 text-xs">
-                          <a href={`/api/admin/orders/${order.id}/download`}>
-                            <Download className="w-3.5 h-3.5" />
-                          </a>
-                        </Button>
                       </div>
                     </TableCell>
                   </TableRow>
@@ -257,6 +474,345 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
           </TableBody>
         </Table>
       </div>
+
+      {/* Detail-Modal für vollständige Anfragenübersicht & Freigabe-Workflow */}
+      {selectedOrder && (
+        <Dialog open={!!selectedOrder} onOpenChange={(open) => !open && setSelectedOrder(null)}>
+          <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto bg-slate-950 border-white/10 text-white p-6 space-y-6">
+            <DialogHeader className="border-b border-white/10 pb-4">
+                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                      <div>
+                        <div className="flex items-center gap-3">
+                          <DialogTitle className="text-xl font-bold text-white flex items-center gap-2">
+                            <FileText className="w-5 h-5 text-primary" />
+                            Anfragenr. #{selectedOrder.order_number || selectedOrder.id.slice(0, 8)}
+                          </DialogTitle>
+                          <Badge className={`text-xs px-2.5 py-0.5 rounded ${statusClass[selectedOrder.status]}`}>
+                            {statusLabel[selectedOrder.status] ?? selectedOrder.status}
+                          </Badge>
+                        </div>
+                        <DialogDescription className="text-xs text-slate-400 mt-1 flex items-center gap-2">
+                          <Calendar className="w-3.5 h-3.5 text-slate-500" />
+                          Erstellt am {new Date(selectedOrder.created_at).toLocaleString('de-DE')}
+                        </DialogDescription>
+                      </div>
+                      <div className="text-right">
+                        <div className="text-xs text-slate-400 uppercase tracking-wider font-semibold">
+                          {isEditingSnapshot ? "Vorschau Summe" : "Gesamtsumme"}
+                        </div>
+                        <div className="text-2xl font-extrabold text-primary">
+                          {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(
+                            isEditingSnapshot ? (editedSnapshot?.total || 0) : (selectedOrder.total_price || 0)
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </DialogHeader>
+
+            {/* Kunden & Stammdaten */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="p-4 rounded-xl bg-slate-900/80 border border-white/5 space-y-2">
+                <div className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5 border-b border-white/5 pb-2">
+                  <Building2 className="w-4 h-4 text-primary" />
+                  Kunden- & Firmendaten
+                </div>
+                <div className="text-sm font-semibold text-white">
+                  {selectedOrder.customer_data?.company_name || 'Keine Firma angegeben'}
+                </div>
+                <div className="text-xs text-slate-300 flex items-center gap-1.5">
+                  <User className="w-3.5 h-3.5 text-slate-500" />
+                  {selectedOrder.customer_data?.first_name} {selectedOrder.customer_data?.last_name}
+                </div>
+                {selectedOrder.customer_data?.email && (
+                  <div className="text-xs text-slate-300 flex items-center gap-1.5">
+                    <Mail className="w-3.5 h-3.5 text-slate-500" />
+                    {selectedOrder.customer_data.email}
+                  </div>
+                )}
+              </div>
+
+              <div className="p-4 rounded-xl bg-slate-900/80 border border-white/5 space-y-2">
+                <div className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5 border-b border-white/5 pb-2">
+                  <MapPin className="w-4 h-4 text-primary" />
+                  Adresse & Standort
+                </div>
+                <div className="text-xs text-slate-300 space-y-1">
+                  <div>{selectedOrder.customer_data?.street || 'Keine Straße'}</div>
+                  <div>
+                    {selectedOrder.customer_data?.zip} {selectedOrder.customer_data?.city}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Geräte & Produktauswahl (Nach Kassen / Boxen gruppiert) */}
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <div className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
+                  <Package className="w-4 h-4 text-primary" />
+                  Konfigurierte Kassen ({displayItems.length})
+                </div>
+                {selectedOrder.status === 'in_review' && !isEditingSnapshot && (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => setIsEditingSnapshot(true)}
+                    className="h-7 border-primary/30 text-primary hover:bg-primary/10 text-xs font-bold gap-1 rounded-md"
+                  >
+                    <Edit3 className="w-3 h-3" /> Preise anpassen
+                  </Button>
+                )}
+              </div>
+
+              {isEditingSnapshot && (
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between bg-amber-500/10 border border-amber-500/20 p-3 rounded-xl gap-4 animate-pulse">
+                  <span className="text-xs text-amber-400 font-semibold">Sie befinden sich im Preiskorrektur-Modus.</span>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => {
+                        setEditedSnapshot(JSON.parse(JSON.stringify(selectedOrder.order_data || {})));
+                        setIsEditingSnapshot(false);
+                      }}
+                      className="h-7 text-xs text-slate-300 hover:text-white"
+                    >
+                      Abbrechen
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={handleSaveSnapshot}
+                      disabled={isSavingSnapshot}
+                      className="h-7 text-xs bg-amber-600 hover:bg-amber-500 text-white font-bold"
+                    >
+                      {isSavingSnapshot ? <Loader2 className="w-3 h-3 animate-spin mr-1" /> : null}
+                      Änderungen speichern
+                    </Button>
+                  </div>
+                </div>
+              )}
+
+              <div className="grid grid-cols-1 gap-3">
+                {displayItems.map((item: any, idx: number) => {
+                  const devName = item.device_name || `Kasse #${idx + 1}`
+                  const licNum = item.license_number
+                  const modules = item.selected_modules || []
+
+                  return (
+                    <div key={idx} className="p-4 rounded-xl bg-slate-900/90 border border-white/10 space-y-3 relative overflow-hidden">
+                      {/* Box Header für die Kasse */}
+                      <div className="flex items-center justify-between border-b border-white/5 pb-2.5 flex-wrap gap-2">
+                        <div className="flex items-center gap-2">
+                          <span className="px-2.5 py-1 rounded text-xs font-extrabold bg-blue-500/20 text-blue-400 border border-blue-500/30 font-mono">
+                            {devName}
+                          </span>
+                          {licNum && (
+                            <span className="text-xs font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20 flex items-center gap-1">
+                              <span className="text-[10px] text-slate-400 uppercase font-sans">Lizenz:</span>
+                              {licNum}
+                            </span>
+                          )}
+                        </div>
+                        <span className={`text-[10px] px-2 py-0.5 rounded border ${item.billing_interval === 'one_time' ? 'border-amber-500/30 text-amber-400 bg-amber-500/10' : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'} font-semibold uppercase`}>
+                          {item.billing_interval === 'one_time' ? 'Kauf' : 'Abo'}
+                        </span>
+                      </div>
+
+                      {/* Inhalt der Kasse: Hauptprodukt + Preis */}
+                      <div className="flex items-center justify-between">
+                        <span className="font-bold text-sm text-white">{item.product_name}</span>
+                        {isEditingSnapshot ? (
+                          <div className="flex items-center gap-2">
+                            <Label htmlFor={`price-${idx}`} className="text-[10px] text-slate-400 font-sans">Preis (€):</Label>
+                            <Input
+                              id={`price-${idx}`}
+                              type="number"
+                              value={item.base_price || 0}
+                              onChange={(e) => updateItemBasePrice(idx, parseFloat(e.target.value) || 0)}
+                              className="w-20 h-7 bg-slate-950 border-white/10 text-white text-xs px-2 font-mono"
+                            />
+                          </div>
+                        ) : (
+                          (item.price || item.base_price) && (
+                            <span className="text-xs font-bold text-slate-200 font-mono">
+                              {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(item.price || item.base_price)}
+                            </span>
+                          )
+                        )}
+                      </div>
+
+                      {/* Module dieser Kasse */}
+                      {modules.length > 0 && (
+                        <div className="space-y-1.5 pt-2 border-t border-white/5">
+                          <div className="text-[11px] font-semibold text-slate-400 flex items-center gap-1">
+                            <Layers className="w-3 h-3 text-slate-500" />
+                            Enthaltene Module ({modules.length}):
+                          </div>
+                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                            {modules.map((mod: any, mIdx: number) => (
+                              <div key={mIdx} className="p-2 rounded-lg bg-slate-950/60 border border-white/5 text-xs flex items-center justify-between gap-3">
+                                <span className="text-slate-300 font-medium truncate">
+                                  + {mod.module_name || mod.name} {!isEditingSnapshot && mod.quantity > 1 ? `(${mod.quantity}x)` : ''}
+                                </span>
+                                {isEditingSnapshot ? (
+                                  <div className="flex items-center gap-1.5 shrink-0">
+                                    <Input
+                                      type="number"
+                                      title="Einzelpreis"
+                                      value={mod.price || 0}
+                                      onChange={(e) => updateModulePriceOrQty(idx, mIdx, 'price', parseFloat(e.target.value) || 0)}
+                                      className="w-14 h-6 bg-slate-900 border-white/10 text-white text-[10px] px-1 font-mono"
+                                    />
+                                    <span className="text-[10px] text-slate-500 font-sans">x</span>
+                                    <Input
+                                      type="number"
+                                      title="Menge"
+                                      value={mod.quantity || 1}
+                                      onChange={(e) => updateModulePriceOrQty(idx, mIdx, 'quantity', parseInt(e.target.value) || 1)}
+                                      className="w-10 h-6 bg-slate-900 border-white/10 text-white text-[10px] px-1 font-mono"
+                                    />
+                                  </div>
+                                ) : (
+                                  mod.price && (
+                                    <span className="text-slate-400 font-mono text-[11px] shrink-0">
+                                      +{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.price * (mod.quantity || 1))}
+                                    </span>
+                                  )
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+
+            {/* Workflow Freigabe & Aktionen */}
+            <div className="p-4 rounded-xl bg-slate-900/90 border border-white/10 space-y-3">
+              <div className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
+                <Sparkles className="w-4 h-4 text-amber-400" />
+                Freigabe-Workflow & Verwalter-Aktionen
+              </div>
+              <div className="flex flex-wrap items-center gap-2">
+                <Button 
+                  size="sm" 
+                  onClick={() => handleStatusChange(selectedOrder.id, 'in_review')}
+                  disabled={updatingId === selectedOrder.id}
+                  className="bg-purple-600 hover:bg-purple-500 text-white text-xs gap-1.5"
+                >
+                  In Prüfung versetzen
+                </Button>
+                <Button 
+                  size="sm" 
+                  onClick={() => handleStatusChange(selectedOrder.id, 'approved')}
+                  disabled={updatingId === selectedOrder.id}
+                  className="bg-emerald-600 hover:bg-emerald-500 text-white text-xs gap-1.5 font-bold"
+                >
+                  <CheckCircle className="w-3.5 h-3.5" /> Anfrage Freigeben
+                </Button>
+                <Button 
+                  size="sm" 
+                  onClick={() => handleStatusChange(selectedOrder.id, 'active')}
+                  disabled={updatingId === selectedOrder.id}
+                  className="bg-blue-600 hover:bg-blue-500 text-white text-xs gap-1.5 font-bold"
+                >
+                  Sofort Aktivieren
+                </Button>
+                <Button 
+                  size="sm" 
+                  variant="destructive"
+                  onClick={() => handleStatusChange(selectedOrder.id, 'rejected')}
+                  disabled={updatingId === selectedOrder.id}
+                  className="text-xs gap-1.5"
+                >
+                  <XCircle className="w-3.5 h-3.5" /> Ablehnen
+                </Button>
+              </div>
+            </div>
+
+                  <DialogFooter className="border-t border-white/10 pt-4 flex flex-col sm:flex-row justify-between items-center gap-3">
+                    <Button 
+                      variant="ghost" 
+                      size="sm" 
+                      onClick={() => setSelectedOrder(null)} 
+                      className="text-slate-400 hover:text-white text-xs"
+                    >
+                      Schließen
+                    </Button>
+
+                    <div className="flex items-center gap-2">
+                      <Button variant="outline" size="sm" asChild className="h-8 border-amber-500/20 hover:bg-amber-500/10 text-amber-400 text-xs gap-1">
+                        <a href={`/order?mode=admin_edit&orderId=${selectedOrder.id}`}>
+                          <Edit3 className="w-3 h-3" /> Im Wizard öffnen
+                        </a>
+                      </Button>
+                      <Button variant="outline" size="sm" asChild className="h-8 border-white/10 hover:bg-primary/20 text-xs">
+                        <a href={`/api/admin/orders/${selectedOrder.id}/download?inline=true`} target="_blank" rel="noopener noreferrer">
+                          <ExternalLink className="w-3.5 h-3.5 mr-1" /> PDF Vorschau
+                        </a>
+                      </Button>
+                      <Button variant="secondary" size="sm" asChild className="h-8 text-xs">
+                        <a href={`/api/admin/orders/${selectedOrder.id}/download`}>
+                          <Download className="w-3.5 h-3.5 mr-1" /> PDF Download
+                        </a>
+                      </Button>
+                    </div>
+                  </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+
+      {/* Dialog für Ablehnungsbegründung */}
+      {rejectingOrder && (
+        <Dialog open={!!rejectingOrder} onOpenChange={(open) => !open && setRejectingOrder(null)}>
+          <DialogContent className="max-w-md bg-slate-950 border-white/10 text-white p-6 space-y-4">
+            <DialogHeader>
+              <DialogTitle className="text-lg font-bold text-red-400 flex items-center gap-2">
+                <XCircle className="w-5 h-5" />
+                Anfrage Ablehnen
+              </DialogTitle>
+              <DialogDescription className="text-xs text-slate-400">
+                Bitte geben Sie einen Grund für die Ablehnung der Anfrage #{rejectingOrder.order_number || rejectingOrder.id.slice(0, 8)} an.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-2">
+              <Label className="text-xs text-slate-300">Begründung für den Partner</Label>
+              <Input
+                placeholder="z.B. Ungültiges Kundenprofil / Modul-Konflikt..."
+                value={rejectionReason}
+                onChange={(e) => setRejectionReason(e.target.value)}
+                className="bg-slate-900 border-white/10 text-white text-xs"
+              />
+            </div>
+
+            <DialogFooter className="gap-2">
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                onClick={() => setRejectingOrder(null)} 
+                disabled={isSubmittingReject}
+                className="text-xs text-slate-400"
+              >
+                Abbrechen
+              </Button>
+              <Button 
+                variant="destructive" 
+                size="sm" 
+                onClick={handleConfirmReject} 
+                disabled={isSubmittingReject}
+                className="text-xs gap-1 font-bold"
+              >
+                {isSubmittingReject ? <Loader2 className="w-3 h-3 animate-spin" /> : null}
+                Anfrage definitiv ablehnen
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
     </div>
   );
 }

shop/components/customer-accordion-list.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { useState, useMemo } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
 import Link from 'next/link'
 import type { EndCustomerWithDevices, FlattenedDevice } from '@/lib/types'
 import {
@@ -16,6 +17,10 @@ import {
   AlertTriangle,
   Search,
   Package,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
@@ -68,13 +73,22 @@ function DeviceCard({
     `&device_id=${encodeURIComponent(device.deviceId)}`
 
   return (
-    <div className="p-4 rounded-xl bg-slate-900/60 border border-white/10 hover:border-white/20 transition-all flex flex-col md:flex-row md:items-start justify-between gap-4">
+    <div className="p-4 rounded-xl bg-slate-950/70 border border-slate-800 hover:border-slate-700 transition-all flex flex-col md:flex-row md:items-start justify-between gap-4 relative overflow-hidden">
       {/* Kassen-Info links */}
-      <div className="space-y-2 min-w-[200px] flex-1">
-        {/* Kassen-Name + Status */}
-        <div className="flex items-center gap-2 flex-wrap">
-          <Monitor className="w-4 h-4 text-primary shrink-0" />
-          <span className="font-bold text-white text-base">{device.deviceName}</span>
+      <div className="space-y-2.5 min-w-[200px] flex-1">
+        {/* Kassen-Name + Lizenznummer daneben + Status */}
+        <div className="flex items-center gap-2 flex-wrap border-b border-white/5 pb-2">
+          <span className="px-2 py-0.5 rounded text-xs font-extrabold bg-blue-500/20 text-blue-400 border border-blue-500/30 font-mono">
+            {device.deviceName}
+          </span>
+
+          {device.items[0]?.license_number && (
+            <span className="text-xs font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20 flex items-center gap-1">
+              <span className="text-[10px] text-slate-400 uppercase font-sans">Lizenz:</span>
+              {device.items[0].license_number}
+            </span>
+          )}
+
           <Badge
             className={`text-xs ${statusClass[device.orderStatus] ?? 'bg-slate-500/20 text-slate-300'}`}
           >
@@ -178,6 +192,8 @@ export function CustomerAccordionList({ customers }: CustomerAccordionListProps)
   })
 
   const [searchTerm, setSearchTerm] = useState('')
+  const [currentPage, setCurrentPage] = useState(1)
+  const pageSize = 5
 
   const toggleCustomer = (id: string) => {
     setOpenCustomerIds((prev) => ({
@@ -186,16 +202,32 @@ export function CustomerAccordionList({ customers }: CustomerAccordionListProps)
     }))
   }
 
-  const filteredCustomers = customers.filter((c) => {
-    const term = searchTerm.toLowerCase()
-    return (
-      c.company_name.toLowerCase().includes(term) ||
-      (c.first_name && c.first_name.toLowerCase().includes(term)) ||
-      (c.last_name && c.last_name.toLowerCase().includes(term)) ||
-      (c.city && c.city.toLowerCase().includes(term)) ||
-      (c.email && c.email.toLowerCase().includes(term))
-    )
-  })
+  const filteredCustomers = useMemo(() => {
+    const term = searchTerm.toLowerCase().trim()
+    if (!term) return customers
+
+    return customers.filter((c) => {
+      return (
+        c.company_name.toLowerCase().includes(term) ||
+        (c.first_name && c.first_name.toLowerCase().includes(term)) ||
+        (c.last_name && c.last_name.toLowerCase().includes(term)) ||
+        (c.city && c.city.toLowerCase().includes(term)) ||
+        (c.email && c.email.toLowerCase().includes(term))
+      )
+    })
+  }, [customers, searchTerm])
+
+  const totalPages = Math.ceil(filteredCustomers.length / pageSize) || 1
+
+  const paginatedCustomers = useMemo(() => {
+    const from = (currentPage - 1) * pageSize
+    return filteredCustomers.slice(from, from + pageSize)
+  }, [filteredCustomers, currentPage, pageSize])
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value)
+    setCurrentPage(1)
+  }
 
   if (customers.length === 0) {
     return (
@@ -215,132 +247,223 @@ export function CustomerAccordionList({ customers }: CustomerAccordionListProps)
 
   return (
     <div className="space-y-6">
-      {/* Suchfeld */}
-      <div className="relative max-w-md">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
-        <Input
-          type="text"
-          placeholder="Kunden suchen (Firma, Name, Stadt)..."
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          className="pl-9 bg-slate-900/50 border-white/10 text-white placeholder:text-slate-500 focus:border-primary"
-        />
+      {/* Suchfeld & Info */}
+      <div className="flex flex-col sm:flex-row gap-4 justify-between items-stretch sm:items-center">
+        <div className="relative max-w-md flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+          <Input
+            type="text"
+            placeholder="Kunden suchen (Firma, Name, Stadt)..."
+            value={searchTerm}
+            onChange={handleSearchChange}
+            className="pl-9 bg-slate-900/50 border-white/10 text-white placeholder:text-slate-500 focus:border-primary"
+          />
+        </div>
+        <div className="text-xs text-slate-400 bg-slate-900/50 px-3.5 py-2 rounded-xl border border-white/10 shrink-0 text-center flex items-center justify-center gap-2">
+          <span>Kunden:</span>
+          <span className="text-white font-bold">{filteredCustomers.length}</span>
+          {searchTerm && <span className="text-slate-500">(gefiltert aus {customers.length})</span>}
+        </div>
       </div>
 
+      {/* Keine Suchergebnisse */}
+      {filteredCustomers.length === 0 && (
+        <Card className="glass-dark border-white/10">
+          <CardContent className="flex flex-col items-center justify-center py-12 gap-3 text-center">
+            <Search className="w-10 h-10 text-slate-600" />
+            <p className="text-slate-300 font-medium">Keine Kunden für &quot;{searchTerm}&quot; gefunden.</p>
+            <Button variant="outline" size="sm" onClick={() => setSearchTerm('')} className="border-white/10 text-xs">
+              Filter zurücksetzen
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
       {/* Akkordeon-Liste */}
-      <div className="space-y-4">
-        {filteredCustomers.map((customer) => {
-          const isOpen = !!openCustomerIds[customer.id]
-          const devices = customer.devices || []
+      {paginatedCustomers.length > 0 && (
+        <div className="space-y-4">
+          {paginatedCustomers.map((customer) => {
+            const isOpen = !!openCustomerIds[customer.id]
+            const devices = customer.devices || []
 
-          return (
-            <Card
-              key={customer.id}
-              className="glass-dark border-white/10 overflow-hidden transition-all duration-200"
-            >
-              {/* Akkordeon-Header */}
-              <div
-                onClick={() => toggleCustomer(customer.id)}
-                className="p-5 flex items-center justify-between cursor-pointer hover:bg-white/[0.02] transition-colors select-none gap-4 flex-wrap"
+            return (
+              <Card
+                key={customer.id}
+                className="glass-dark border-white/10 overflow-hidden transition-all duration-200"
               >
-                <div className="flex items-center gap-4 min-w-[240px]">
-                  <div className="w-10 h-10 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center text-primary font-bold">
-                    <Building2 className="w-5 h-5" />
-                  </div>
-                  <div>
-                    <div className="flex items-center gap-2">
-                      <h3 className="font-bold text-lg text-white">{customer.company_name}</h3>
-                      {customer.is_anonymized && (
-                        <Badge className="bg-red-500/10 text-red-400 border-red-500/20 text-xs gap-1">
-                          <AlertTriangle className="w-3 h-3" /> Anonymisiert
-                        </Badge>
-                      )}
+                {/* Akkordeon-Header */}
+                <div
+                  onClick={() => toggleCustomer(customer.id)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault()
+                      toggleCustomer(customer.id)
+                    }
+                  }}
+                  tabIndex={0}
+                  role="button"
+                  aria-expanded={isOpen}
+                  className="p-5 flex items-center justify-between cursor-pointer hover:bg-white/[0.02] transition-colors select-none gap-4 flex-wrap focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset"
+                >
+                  <div className="flex items-center gap-4 min-w-[240px]">
+                    <div className="w-10 h-10 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center text-primary font-bold">
+                      <Building2 className="w-5 h-5" />
                     </div>
-                    <p className="text-sm text-slate-400">
-                      {[customer.first_name, customer.last_name].filter(Boolean).join(' ') ||
-                        'Kein Ansprechpartner'}
-                      {customer.city ? ` • ${customer.city}` : ''}
-                      {customer.email ? ` • ${customer.email}` : ''}
-                    </p>
-                  </div>
-                </div>
-
-                <div className="flex items-center gap-3 ml-auto">
-                  {/* Kassen-Anzahl Badge */}
-                  <Badge variant="outline" className="border-white/10 text-slate-300 bg-white/5">
-                    <Package className="w-3.5 h-3.5 mr-1 text-primary" />
-                    {devices.length} {devices.length === 1 ? 'Kasse' : 'Kassen'}
-                  </Badge>
-
-                  {!customer.is_anonymized && (
-                    <>
-                      <Link
-                        href={`/order?customer_id=${customer.id}`}
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <Button
-                          size="sm"
-                          className="bg-primary/20 hover:bg-primary/30 text-primary border border-primary/40 gap-1.5 text-xs font-bold shadow-[0_0_10px_rgba(59,130,246,0.2)]"
-                        >
-                          <Sparkles className="w-3.5 h-3.5" /> Kunde updaten / bestellen
-                        </Button>
-                      </Link>
-                      <Link
-                        href={`/my-customers/${customer.id}`}
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="text-slate-400 hover:text-white hover:bg-white/10 gap-1 text-xs"
-                        >
-                          <Edit2 className="w-3.5 h-3.5" /> Bearbeiten
-                        </Button>
-                      </Link>
-                    </>
-                  )}
-
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="text-slate-400 hover:text-white p-1"
-                  >
-                    {isOpen ? (
-                      <ChevronUp className="w-5 h-5" />
-                    ) : (
-                      <ChevronDown className="w-5 h-5" />
-                    )}
-                  </Button>
-                </div>
-              </div>
-
-              {/* Ausgeklappter Bereich mit Kassen */}
-              {isOpen && (
-                <div className="border-t border-white/5 bg-slate-950/40 p-5 space-y-3">
-                  {devices.length === 0 ? (
-                    <div className="text-slate-500 text-sm py-4 text-center">
-                      Keine Kassen oder Bestellungen für diesen Kunden vorhanden.
-                    </div>
-                  ) : (
-                    <div className="space-y-3">
-                      <p className="text-xs uppercase tracking-wider text-slate-400 font-semibold mb-2">
-                        Zugeordnete Kassen ({devices.length})
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <h3 className="font-bold text-lg text-white">{customer.company_name}</h3>
+                        {customer.is_anonymized && (
+                          <Badge className="bg-red-500/10 text-red-400 border-red-500/20 text-xs gap-1">
+                            <AlertTriangle className="w-3 h-3" /> Anonymisiert
+                          </Badge>
+                        )}
+                      </div>
+                      <p className="text-sm text-slate-400">
+                        {[customer.first_name, customer.last_name].filter(Boolean).join(' ') ||
+                          'Kein Ansprechpartner'}
+                        {customer.city ? ` • ${customer.city}` : ''}
+                        {customer.email ? ` • ${customer.email}` : ''}
                       </p>
-                      {devices.map((device, idx) => (
-                        <DeviceCard
-                          key={`${device.orderId}-${device.deviceId}-${idx}`}
-                          device={device}
-                          customerId={customer.id}
-                        />
-                      ))}
                     </div>
-                  )}
+                  </div>
+
+                  <div className="flex items-center gap-3 ml-auto">
+                    {/* Kassen-Anzahl Badge */}
+                    <Badge variant="outline" className="border-white/10 text-slate-300 bg-white/5">
+                      <Package className="w-3.5 h-3.5 mr-1 text-primary" />
+                      {devices.length} {devices.length === 1 ? 'Kasse' : 'Kassen'}
+                    </Badge>
+
+                    {!customer.is_anonymized && (
+                      <>
+                        <Link
+                          href={`/order?customer_id=${customer.id}`}
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Button
+                            size="sm"
+                            className="bg-primary/20 hover:bg-primary/30 text-primary border border-primary/40 gap-1.5 text-xs font-bold shadow-[0_0_10px_rgba(59,130,246,0.2)]"
+                          >
+                            <Sparkles className="w-3.5 h-3.5" /> Kunde updaten / bestellen
+                          </Button>
+                        </Link>
+                        <Link
+                          href={`/my-customers/${customer.id}`}
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="text-slate-400 hover:text-white hover:bg-white/10 gap-1 text-xs"
+                          >
+                            <Edit2 className="w-3.5 h-3.5" /> Bearbeiten
+                          </Button>
+                        </Link>
+                      </>
+                    )}
+
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="text-slate-400 hover:text-white p-1"
+                    >
+                      {isOpen ? (
+                        <ChevronUp className="w-5 h-5" />
+                      ) : (
+                        <ChevronDown className="w-5 h-5" />
+                      )}
+                    </Button>
+                  </div>
                 </div>
-              )}
-            </Card>
-          )
-        })}
-      </div>
+
+                {/* Ausgeklappter Bereich mit Kassen */}
+                <AnimatePresence initial={false}>
+                  {isOpen && (
+                    <motion.div
+                      initial={{ height: 0, opacity: 0 }}
+                      animate={{ height: 'auto', opacity: 1 }}
+                      exit={{ height: 0, opacity: 0 }}
+                      transition={{ duration: 0.2, ease: 'easeInOut' }}
+                      className="overflow-hidden border-t border-white/5 bg-slate-950/40"
+                    >
+                      <div className="p-5 space-y-3">
+                        {devices.length === 0 ? (
+                          <div className="text-slate-500 text-sm py-4 text-center">
+                            Keine Kassen oder Bestellungen für diesen Kunden vorhanden.
+                          </div>
+                        ) : (
+                          <div className="space-y-3">
+                            <p className="text-xs uppercase tracking-wider text-slate-400 font-semibold mb-2">
+                              Zugeordnete Kassen ({devices.length})
+                            </p>
+                            {devices.map((device, idx) => (
+                              <DeviceCard
+                                key={`${device.orderId}-${device.deviceId}-${idx}`}
+                                device={device}
+                                customerId={customer.id}
+                              />
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </Card>
+            )
+          })}
+        </div>
+      )}
+
+      {/* Paginierung (5 Kunden pro Seite) */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between pt-4 border-t border-white/10">
+          <span className="text-xs text-slate-400">
+            Seite <span className="text-white font-bold">{currentPage}</span> von{' '}
+            <span className="text-white font-bold">{totalPages}</span>
+          </span>
+          <div className="flex items-center gap-1.5">
+            <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="border-white/10 text-xs gap-1 rounded-xl h-8 px-3"
+            >
+              <ChevronLeft className="w-3.5 h-3.5" /> Vorherige
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+              disabled={currentPage === totalPages}
+              className="border-white/10 text-xs gap-1 rounded-xl h-8 px-3"
+            >
+              Nächste <ChevronRight className="w-3.5 h-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setCurrentPage(totalPages)}
+              disabled={currentPage === totalPages}
+              className="h-8 px-2 text-slate-400 hover:text-white"
+              title="Letzte Seite"
+            >
+              <ChevronsRight className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

shop/components/invoice-pdf.tsx

@@ -94,6 +94,14 @@ const styles = StyleSheet.create({
   }
 });
 
+export const stripEmojis = (text?: string | null): string => {
+  if (!text) return '';
+  return text
+    .replace(/[\p{Emoji_Presentation}\p{Extended_Pictographic}\uFE0F\u200D]/gu, '')
+    .replace(/\s{2,}/g, ' ')
+    .trim();
+};
+
 export const InvoicePDF = ({
   order,
   orderSnapshot,
@@ -105,6 +113,8 @@ export const InvoicePDF = ({
   const items = orderSnapshot?.items ?? [];
   const taxRate = orderSnapshot?.tax_rate ?? 19;
   const isSubscription = order?.type === 'subscription' || orderSnapshot?.billing_cycle === 'monthly';
+  const formattedOrderNumber = stripEmojis((order.order_number || order.id || '').replace(/^BE-/, 'AE-'));
+  const isUpgrade = !!orderSnapshot?.last_license_date;
 
   let oneTimeNet = 0;
   let monthlyNet = 0;
@@ -134,16 +144,16 @@ export const InvoicePDF = ({
 
   const groupedItems: { [key: string]: any[] } = {};
   items.forEach((item: any) => {
-    const devName = item.device_name || 'Kasse 1';
+    const devName = stripEmojis(item.device_name || 'Kasse 1');
     if (!groupedItems[devName]) {
       groupedItems[devName] = [];
     }
     groupedItems[devName].push(item);
   });
 
-  const displayPartnerName = partnerCompanyName || order?.partner_company_name;
-  const displayUserName = partnerUserName || order?.partner_user_name;
-  const displayUserEmail = partnerUserEmail || order?.partner_user_email;
+  const displayPartnerName = stripEmojis(partnerCompanyName || order?.partner_company_name);
+  const displayUserName = stripEmojis(partnerUserName || order?.partner_user_name);
+  const displayUserEmail = stripEmojis(partnerUserEmail || order?.partner_user_email);
 
   return (
     <Document>
@@ -162,22 +172,22 @@ export const InvoicePDF = ({
         </View>
 
         <Text style={styles.title}>
-          Anfragebestätigung: {order.order_number || order.id}
+          {isUpgrade ? 'Erweiterungsangebot' : 'Anfragebestätigung'}: #{formattedOrderNumber}
         </Text>
 
         <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 15 }}>
           <View style={{ width: '48%' }}>
             <Text style={styles.label}>Endkunde</Text>
-            <Text style={{ fontWeight: 'bold' }}>{customer.company_name}</Text>
-            {customer.first_name || customer.last_name ? <Text>{customer.first_name} {customer.last_name}</Text> : null}
-            {customer.address ? <Text>{customer.address}</Text> : null}
-            {customer.zip_code || customer.city ? <Text>{customer.zip_code} {customer.city}</Text> : null}
-            {customer.vat_id ? <Text>USt-IdNr: {customer.vat_id}</Text> : null}
+            <Text style={{ fontWeight: 'bold' }}>{stripEmojis(customer?.company_name)}</Text>
+            {(customer?.first_name || customer?.last_name) ? <Text>{stripEmojis(`${customer?.first_name || ''} ${customer?.last_name || ''}`)}</Text> : null}
+            {customer?.address ? <Text>{stripEmojis(customer.address)}</Text> : null}
+            {(customer?.zip_code || customer?.city) ? <Text>{stripEmojis(`${customer?.zip_code || ''} ${customer?.city || ''}`)}</Text> : null}
+            {customer?.vat_id ? <Text>USt-IdNr: {stripEmojis(customer.vat_id)}</Text> : null}
           </View>
 
           <View style={{ width: '48%' }}>
             <Text style={styles.label}>Bestelldetails</Text>
-            <Text>Bestellnummer: {order.order_number || order.id}</Text>
+            <Text>Bestellnummer: #{formattedOrderNumber}</Text>
             <Text>Zahlungsart: {isSubscription ? 'SEPA-Lastschrift' : 'Rechnung'}</Text>
             <Text>Datum: {new Date(order.created_at || Date.now()).toLocaleDateString('de-DE')}</Text>
 
@@ -197,14 +207,14 @@ export const InvoicePDF = ({
             <View key={groupIdx} style={{ marginBottom: 12, borderWidth: 1, borderColor: '#e2e8f0', borderRadius: 4, padding: 8, backgroundColor: '#f8fafc' }}>
               <View style={{ borderBottomWidth: 1, borderBottomColor: '#cbd5e1', paddingBottom: 4, marginBottom: 6 }}>
                 <Text style={{ fontSize: 10, fontWeight: 'bold', color: '#1e3a8a' }}>
-                  {deviceName === 'Zusatzleistung' ? 'Backoffice' : `Kasse: ${deviceName}`}
+                  {deviceName === 'Zusatzleistung' ? 'Backoffice' : `${isUpgrade ? 'Erweiterung für Gerät' : 'Kasse'}: ${deviceName}`}
                 </Text>
               </View>
               {devItems.map((item: any, idx: number) => (
                 <View key={idx} style={{ marginBottom: 6 }}>
                   <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 2 }}>
-                    <Text style={{ fontSize: 9, fontWeight: 'bold', color: '#334155' }}>
-                      {item.product_name} ({item.category_name})
+                    <Text style={{ fontSize: 9, fontWeight: 'bold', color: '#344155' }}>
+                      {stripEmojis(item.product_name)} ({stripEmojis(item.category_name)})
                     </Text>
                     <Text style={{ fontSize: 9, fontWeight: 'bold', color: '#0f172a' }}>
                       {formattedPrice(item.base_price)} {item.billing_interval === 'one_time' ? 'einmalig' : 'mtl.'}
@@ -216,7 +226,7 @@ export const InvoicePDF = ({
                     return (
                       <View key={mIdx} style={{ flexDirection: 'row', justifyContent: 'space-between', paddingLeft: 12, marginBottom: 1 }}>
                         <Text style={{ fontSize: 8, color: '#64748b' }}>
-                          + {mod.module_name} {qty > 1 ? `(x${qty})` : ''}
+                          + {stripEmojis(mod.module_name)} {qty > 1 ? `(x${qty})` : ''}
                         </Text>
                         <Text style={{ fontSize: 8, color: '#64748b' }}>
                           +{formattedPrice(price)} mtl.

shop/components/login-form.tsx

@@ -16,6 +16,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useEffect, useRef, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
+import { Ban } from "lucide-react";
 
 function getDeviceHash(): string {
   const key = "caspos-device-id";
@@ -64,10 +65,8 @@ export function LoginForm({
     const nextParam = typeof window !== 'undefined' ? new URLSearchParams(window.location.search).get('next') : null;
     if (nextParam) {
       router.push(nextParam);
-    } else if (role === "admin") {
-      router.push("/admin/einstellungen");
     } else {
-      router.push("/my-customers");
+      router.push("/");
     }
   }, [router]);
 
@@ -229,8 +228,9 @@ export function LoginForm({
                       />
                     </div>
                     {errorParam === "gesperrt" && (
-                      <p className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 p-3 rounded-lg text-center font-medium">
-                        🚫 Ihr Konto wurde gesperrt. Bitte wenden Sie sich an den Administrator.
+                      <p className="text-sm text-red-500 bg-red-500/10 border border-red-500/20 p-3 rounded-lg text-center font-medium flex items-center justify-center gap-2">
+                        <Ban className="w-4 h-4 shrink-0" />
+                        <span>Ihr Konto wurde gesperrt. Bitte wenden Sie sich an den Administrator.</span>
                       </p>
                     )}
                     {messageParam === "concurrent" && (

shop/components/order-wizard.tsx

@@ -8,7 +8,7 @@ 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'
+import { Check, Zap } from 'lucide-react'
 
 // Modular Step Components
 import { ProgressStepper } from './wizard/progress-stepper'
@@ -175,6 +175,7 @@ export function OrderWizard({
   const [orderNotes, setOrderNotes] = useState<string>('')
   const [toast, setToast] = useState<{ message: string; type: 'error' | 'success' } | null>(null)
   const [activeCategoryId, setActiveCategoryId] = useState<string | null>(null)
+  const [showValidationWarning, setShowValidationWarning] = useState(false)
 
   useEffect(() => {
     if (toast) {
@@ -201,7 +202,7 @@ export function OrderWizard({
 
   // Formular-State für neuen Endkunden
   const [newCustomerForm, setNewCustomerForm] = useState({
-    company_name: '', vat_id: '', first_name: '', last_name: '', street: '', zip: '', city: '',
+    company_name: '', vat_id: '', email: '', first_name: '', last_name: '', street: '', zip: '', city: '',
     bank_iban: '', bank_bic: '', bank_name: '', bank_owner: '',
   })
   const [isCreatingCustomer, setIsCreatingCustomer] = useState(false)
@@ -429,11 +430,15 @@ export function OrderWizard({
       })
   }, [visibleCategories, selections, products, selectedBillingInterval])
 
-  const finalItemsToShow = basketItems.length > 0
-    ? basketItems
-    : (allCategoriesFilled && productValidationErrors.length === 0
-      ? [{ deviceName: deviceName || 'Kasse 1', selections, moduleQuantities, billingInterval: selectedBillingInterval }]
-      : [])
+  const finalItemsToShow = useMemo(() => {
+    if (basketItems.length > 0) {
+      return basketItems
+    }
+    if (allCategoriesFilled && productValidationErrors.length === 0 && hasActiveSelection) {
+      return [{ deviceName: deviceName || 'Kasse 1', licenseNumber, selections, moduleQuantities, billingInterval: selectedBillingInterval }]
+    }
+    return []
+  }, [basketItems, allCategoriesFilled, productValidationErrors, hasActiveSelection, deviceName, licenseNumber, selections, moduleQuantities, selectedBillingInterval])
 
   // Gesamtsummen für alle Items in der Bestellung (finalItemsToShow)
   const { overallMonthlyTotal, overallOneTimeTotal, linkedFeeProducts } = useMemo(() => {
@@ -541,9 +546,21 @@ export function OrderWizard({
   }
 
   const nextStep = () => {
-    if (step === 3 && allCategoriesFilled && productValidationErrors.length === 0) {
-      if (hasActiveSelection) {
-        addToBasket()
+    if (step === 3) {
+      if (isNextStepDisabled && basketItems.length === 0) {
+        setShowValidationWarning(true)
+        return
+      }
+      setShowValidationWarning(false)
+      if (allCategoriesFilled && productValidationErrors.length === 0) {
+        const isDirtyNewDevice = (deviceName.trim() !== '' || licenseNumber.trim() !== '' || Object.values(moduleQuantities).some(q => q > 0)) && editingIdx === null
+        if (editingIdx !== null) {
+          addToBasket()
+        } else if (basketItems.length === 0 && hasActiveSelection) {
+          addToBasket()
+        } else if (isDirtyNewDevice && hasActiveSelection) {
+          addToBasket()
+        }
       }
     }
     setDirection(1)
@@ -597,7 +614,7 @@ export function OrderWizard({
       setSelectedEndCustomerId(created.id)
       setCustomerMode('select')
       setNewCustomerForm({
-        company_name: '', vat_id: '', first_name: '', last_name: '', street: '', zip: '', city: '',
+        company_name: '', vat_id: '', email: '', first_name: '', last_name: '', street: '', zip: '', city: '',
         bank_iban: '', bank_bic: '', bank_name: '', bank_owner: '',
       })
     } catch (e: any) {
@@ -607,7 +624,7 @@ export function OrderWizard({
     }
   }
 
-  const addToBasket = async () => {
+  const addToBasket = async (proceedToSummary: boolean = false) => {
     const normLicense = licenseNumber.trim().toUpperCase()
     if (normLicense) {
       const isDuplicateInBasket = basketItems.some(
@@ -659,6 +676,11 @@ export function OrderWizard({
       }
     })
     setSelections(resetSels)
+
+    if (proceedToSummary) {
+      setDirection(1)
+      setStep(4)
+    }
   }
 
   const resetFormForNewDevice = () => {
@@ -738,34 +760,35 @@ export function OrderWizard({
     setIsSubmitting(true)
     try {
       let finalItems = [...basketItems]
-      if (hasActiveSelection && allCategoriesFilled && productValidationErrors.length === 0) {
+      const isDirtyNewDevice = (deviceName.trim() !== '' || licenseNumber.trim() !== '' || Object.values(moduleQuantities).some(q => q > 0)) && editingIdx === null
+      if (editingIdx !== null) {
         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}`),
+          deviceName: deviceName || basketItems[editingIdx]?.deviceName || `Kasse ${editingIdx + 1}`,
           licenseNumber: normLicense,
           selections: JSON.parse(JSON.stringify(selections)),
           moduleQuantities: { ...moduleQuantities },
           billingInterval: selectedBillingInterval,
         }
-        if (editingIdx !== null) {
-          finalItems[editingIdx] = currentItem
-        } else {
-          finalItems.push(currentItem)
-        }
+        finalItems[editingIdx] = currentItem
+      } else if (basketItems.length === 0 && hasActiveSelection && allCategoriesFilled && productValidationErrors.length === 0) {
+        const normLicense = licenseNumber.trim().toUpperCase()
+        finalItems.push({
+          deviceName: deviceName || 'Kasse 1',
+          licenseNumber: normLicense,
+          selections: JSON.parse(JSON.stringify(selections)),
+          moduleQuantities: { ...moduleQuantities },
+          billingInterval: selectedBillingInterval,
+        })
+      } else if (isDirtyNewDevice && hasActiveSelection && allCategoriesFilled && productValidationErrors.length === 0) {
+        const normLicense = licenseNumber.trim().toUpperCase()
+        finalItems.push({
+          deviceName: deviceName || `Kasse ${basketItems.length + 1}`,
+          licenseNumber: normLicense,
+          selections: JSON.parse(JSON.stringify(selections)),
+          moduleQuantities: { ...moduleQuantities },
+          billingInterval: selectedBillingInterval,
+        })
       }
 
       if (finalItems.length === 0) {
@@ -900,16 +923,16 @@ export function OrderWizard({
   }
 
   return (
-    <div className="max-w-7xl mx-auto px-4 pt-2 pb-6">
+    <div className="max-w-7xl mx-auto px-4 pt-1 pb-2">
 
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 items-start">
         {/* Left Side Status Stepper & Categories for ALL steps */}
-        <div className="lg:col-span-3 bg-slate-900/50 backdrop-blur-md border border-white/10 rounded-2xl p-5 space-y-5 sticky top-2">
+        <div className="lg:col-span-3 bg-slate-900/50 backdrop-blur-md border border-white/10 rounded-2xl p-4 space-y-4 sticky top-1">
           <div>
-            <h2 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-1">
+            <h2 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-0.5">
               Fortschritt
             </h2>
-            <p className="text-lg font-extrabold text-white">
+            <p className="text-base font-extrabold text-white">
               Bestell-Wizard
             </p>
           </div>
@@ -917,47 +940,63 @@ export function OrderWizard({
 
           {/* Step 3 Categories inside left sidebar */}
           {step === 3 && (
-            <div className="pt-4 border-t border-white/10 space-y-3">
-              <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400">
+            <div className="pt-2.5 border-t border-white/10 flex flex-col min-h-0 max-h-[calc(100vh-22rem)] overflow-hidden">
+              <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5 shrink-0">
                 Kategorien
               </h3>
-              <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-1 flex-1 min-h-0 overflow-y-auto pr-1 pb-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
                 {visibleCategories.map((cat) => {
                   const sel = selections[cat.id]
                   const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
                   const isRequired = cat.is_required
                   const isActive = activeCategoryId === cat.id
+                  const isMissingRequired = isRequired && !hasSelection
 
                   return (
                     <button
                       key={cat.id}
                       onClick={() => setActiveCategoryId(cat.id)}
-                      className={`flex items-center gap-2.5 p-2.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${isActive
-                          ? 'bg-primary/10 border-primary text-white shadow-[0_0_15px_rgba(59,130,246,0.2)]'
-                          : 'bg-slate-900/50 border-white/5 text-slate-400 hover:bg-slate-900 hover:border-white/20 hover:text-white'
+                      className={`flex items-center gap-2 p-1.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group shrink-0 ${
+                        isMissingRequired
+                          ? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
+                          : isActive
+                            ? 'bg-primary/10 border-primary text-white shadow-[0_0_15px_rgba(59,130,246,0.2)]'
+                            : 'bg-slate-900/50 border-white/5 text-slate-400 hover:bg-slate-900 hover:border-white/20 hover:text-white'
                         }`}
                     >
-                      {isActive && (
+                      {isActive && !isMissingRequired && (
                         <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
                       )}
 
-                      <div className={`p-1.5 rounded-lg transition-colors ${isActive ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400 group-hover:text-white'}`}>
+                      <div className={`p-1 rounded-lg transition-colors shrink-0 ${
+                        isMissingRequired
+                          ? 'bg-red-500/20 text-red-400'
+                          : isActive
+                            ? 'bg-primary/20 text-primary'
+                            : 'bg-white/5 text-slate-400 group-hover:text-white'
+                      }`}>
                         <CategoryIcon icon={cat.icon} className="w-3.5 h-3.5" />
                       </div>
 
                       <div className="flex-1 min-w-0">
-                        <p className={`text-xs font-semibold truncate ${isActive ? 'text-white' : 'text-slate-300 group-hover:text-white'}`}>
+                        <p className={`text-xs font-semibold truncate ${
+                          isMissingRequired
+                            ? 'text-red-300 font-bold'
+                            : isActive
+                              ? 'text-white'
+                              : 'text-slate-300 group-hover:text-white'
+                        }`}>
                           {cat.name}
                         </p>
                       </div>
 
                       {hasSelection ? (
-                        <span className="text-[9px] px-1.5 py-0.2 rounded-full font-semibold shrink-0 border border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
-                          ✓
+                        <span className="text-[9px] px-1.5 py-0.5 rounded-full font-semibold shrink-0 border border-emerald-500/30 text-emerald-400 bg-emerald-500/10 flex items-center justify-center">
+                          <Check className="w-2.5 h-2.5" />
                         </span>
                       ) : isRequired ? (
-                        <span className="text-[9px] px-1.5 py-0.2 rounded-full font-semibold shrink-0 border border-amber-500/30 text-amber-400 bg-amber-500/10">
-                          !
+                        <span className="text-[9px] px-1.5 py-0.2 rounded-full font-extrabold shrink-0 border border-red-500 text-red-400 bg-red-500/20 animate-pulse tracking-wider">
+                          FEHLT!
                         </span>
                       ) : null}
                     </button>
@@ -969,7 +1008,7 @@ export function OrderWizard({
         </div>
 
         {/* Right Main Content Column */}
-        <div className="lg:col-span-9 space-y-6">
+        <div className="lg:col-span-9 space-y-0">
 
           <AnimatePresence mode="wait">
             {/* Step 1: Customer */}
@@ -979,7 +1018,7 @@ export function OrderWizard({
                 initial={{ opacity: 0, y: direction * 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: direction * -20 }}
-                className="space-y-6"
+                className="space-y-0"
               >
                 <StepCustomer
                   isAdmin={isAdmin}
@@ -1010,7 +1049,7 @@ export function OrderWizard({
                 initial={{ opacity: 0, y: direction * 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: direction * -20 }}
-                className="space-y-6"
+                className="space-y-0"
               >
                 <StepBilling
                   selectedBillingInterval={selectedBillingInterval}
@@ -1030,17 +1069,17 @@ export function OrderWizard({
             initial={{ opacity: 0, y: direction * 20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: direction * -20 }}
-            className="h-[calc(100vh-160px)] overflow-hidden bg-slate-950/70 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-2"
+            className="h-[calc(100vh-8.5rem)] overflow-hidden bg-slate-950/70 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-2"
           >
-            <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 h-full items-stretch">
+            <div className="grid grid-cols-1 lg:grid-cols-5 gap-3 h-full items-stretch">
 
               {/* LEFT: Scrollable Category Selection */}
-              <div className="lg:col-span-3 flex flex-col h-full overflow-hidden p-2 px-3">
+              <div className="lg:col-span-3 flex flex-col h-full overflow-hidden p-1 px-2">
                 <div className="flex-1 overflow-y-auto pr-2 subpixel-antialiased scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
                   {/* Upgrade-Modus Hinweis-Banner */}
                   {upgradeMode && lockedDeviceId && (
-                    <div className="mb-4 p-3 rounded-xl bg-primary/10 border border-primary/20 text-xs text-primary/90 flex items-start gap-2">
-                      <span className="text-primary mt-0.5">⚡</span>
+                    <div className="mb-3 p-2.5 rounded-xl bg-primary/10 border border-primary/20 text-xs text-primary/90 flex items-start gap-2">
+                      <Zap className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                       <div>
                         <p className="font-semibold">Upgrade-Modus: {lockedDeviceId}</p>
                         <p className="text-primary/70 mt-0.5">Bereits lizenzierte Module sind ausgegraut und können nicht doppelt gebucht werden.</p>
@@ -1063,12 +1102,15 @@ export function OrderWizard({
                     billingBadgeClass={billingBadgeClass}
                     existingModuleIds={existingModuleIds}
                     activeCategoryId={activeCategoryId}
+                    editingDeviceName={editingIdx !== null ? (basketItems[editingIdx]?.deviceName || `Kasse ${editingIdx + 1}`) : null}
+                    onCancelEdit={resetFormForNewDevice}
+                    productValidationErrors={productValidationErrors}
                   />
                 </div>
               </div>
 
               {/* RIGHT: Summary sidebar */}
-              <div className="lg:col-span-2 flex flex-col h-full overflow-hidden p-2 pl-2">
+              <div className="lg:col-span-2 flex flex-col h-full overflow-hidden p-1 pl-1">
                 <div className="flex-1 overflow-hidden">
                   <SummarySidebar
                     visibleCategories={visibleCategories}
@@ -1087,18 +1129,15 @@ export function OrderWizard({
                     updatePriceModifier={updatePriceModifier}
                     allCategoriesFilled={allCategoriesFilled}
                     productValidationErrors={productValidationErrors}
-                    basketItems={basketItems}
                     editingIdx={editingIdx}
-                    editBasketItem={editBasketItem}
-                    deleteBasketItem={deleteBasketItem}
                     deviceName={deviceName}
                     setDeviceName={setDeviceName}
                     licenseNumber={licenseNumber}
                     setLicenseNumber={setLicenseNumber}
-                    addToBasket={addToBasket}
+                    onSaveAndProceed={() => addToBasket(true)}
                     isNextStepDisabled={isNextStepDisabled}
                     hasActiveSelection={hasActiveSelection}
-                    nextStep={nextStep}
+                    showValidationWarning={showValidationWarning}
                     prevStep={prevStep}
                   />
                 </div>
@@ -1107,10 +1146,6 @@ export function OrderWizard({
           </motion.div>
         )}
 
-
-
-
-
         {/* Step 4: Verification & Submit */}
         {step === 4 && (
           <motion.div
@@ -1118,7 +1153,7 @@ export function OrderWizard({
             initial={{ opacity: 0, y: direction * 20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: direction * -20 }}
-            className="h-[calc(100vh-140px)] overflow-hidden w-full"
+            className="h-[calc(100vh-8.5rem)] overflow-hidden w-full"
           >
             <StepSummary
               finalItemsToShow={finalItemsToShow}

shop/components/tutorial/fetch-data-steps.tsx

@@ -156,7 +156,7 @@ export function FetchDataSteps() {
       </TutorialStep>
 
       <TutorialStep title="Build in a weekend and scale to millions!">
-        <p>You&apos;re ready to launch your product to the world! 🚀</p>
+        <p>You&apos;re ready to launch your product to the world!</p>
       </TutorialStep>
     </ol>
   );

shop/components/wizard/step-billing.tsx

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

shop/components/wizard/step-software.tsx

@@ -2,13 +2,13 @@
 
 import React from 'react'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
-import { Separator } from '@/components/ui/separator'
 import { Checkbox } from '@/components/ui/checkbox'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
-import { ShoppingCart, Check, AlertCircle, Lock } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { ShoppingCart, Check, AlertCircle, Lock, X, Info } from 'lucide-react'
 import * as Icons from 'lucide-react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { Category, Product, CategorySelection } from '@/lib/types'
@@ -29,6 +29,9 @@ interface StepSoftwareProps {
   /** Modul-IDs, die bereits lizenziert sind (Upgrade-Modus) */
   existingModuleIds?: string[]
   activeCategoryId: string | null
+  editingDeviceName?: string | null
+  onCancelEdit?: () => void
+  productValidationErrors?: string[]
 }
 
 export function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
@@ -52,6 +55,9 @@ export function StepSoftware({
   billingBadgeClass,
   existingModuleIds = [],
   activeCategoryId,
+  editingDeviceName = null,
+  onCancelEdit,
+  productValidationErrors = [],
 }: StepSoftwareProps) {
   const currentCategory = visibleCategories.find(c => c.id === activeCategoryId) ?? visibleCategories[0] ?? null
 
@@ -67,17 +73,46 @@ export function StepSoftware({
   const selectedProduct = catProducts.find(p => p.id === sel?.productId) ?? null
 
   return (
-    <Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl">
-      <CardHeader className="border-b border-white/5 pb-4">
-        <CardTitle className="text-xl flex items-center gap-2 text-white font-bold">
-          <ShoppingCart className="w-5 h-5 text-primary" />
-          Optionen wählen
-        </CardTitle>
-        <CardDescription className="text-slate-400">
-          Passen Sie die Konfiguration für {currentCategory.name} an.
-        </CardDescription>
+    <Card className="glass-dark border-white/10 h-full flex flex-col rounded-2xl overflow-hidden min-h-0">
+      {/* ─── FIXED CARD HEADER (shrink-0 mb-1) ─── */}
+      <CardHeader className="border-b border-white/10 py-2.5 px-4 shrink-0 bg-slate-950/40">
+        <div className="flex items-center justify-between gap-3 flex-wrap">
+          <div className="flex items-center gap-2.5">
+            <div className="p-1.5 rounded-lg bg-primary/20 text-primary border border-primary/30 shrink-0">
+              <ShoppingCart className="w-4 h-4" />
+            </div>
+            <div>
+              <CardTitle className="text-sm font-bold text-white leading-tight">
+                {currentCategory.name}
+              </CardTitle>
+              <CardDescription className="text-[11px] text-slate-400 mt-0.5 leading-tight">
+                {currentCategory.description || 'Passen Sie die Konfiguration für diese Kategorie an.'}
+              </CardDescription>
+            </div>
+          </div>
+
+          {editingDeviceName && (
+            <div className="flex items-center gap-2">
+              <Badge className="bg-amber-500/20 text-amber-400 border border-amber-500/30 text-xs font-bold gap-1.5 px-2.5 py-0.5 rounded-lg animate-pulse shrink-0 flex items-center">
+                <Icons.Pencil className="w-3 h-3 text-amber-400 mr-1" /> Kasse: &quot;{editingDeviceName}&quot;
+              </Badge>
+              {onCancelEdit && (
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={onCancelEdit}
+                  className="h-6 text-[11px] text-slate-400 hover:text-white hover:bg-white/10 px-2"
+                >
+                  <X className="w-3 h-3 mr-1" /> Neuer Entwurf
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
       </CardHeader>
-      <CardContent className="flex-1 overflow-y-auto pt-6 space-y-6">
+
+      {/* ─── SCROLLABLE CONTENT AREA (flex-1 min-h-0 min-w-0 overflow-y-auto pr-3 pb-12) ─── */}
+      <div className="flex-1 min-h-0 min-w-0 overflow-y-auto p-4 pr-3 pb-12 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
         <AnimatePresence mode="wait">
           <motion.div
             key={currentCategory.id}
@@ -85,84 +120,107 @@ export function StepSoftware({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -10 }}
             transition={{ duration: 0.2 }}
-            className="space-y-6"
+            className="space-y-4 min-w-0"
           >
-            {/* Category header */}
-            <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-sm">{currentCategory.name}</h3>
-                {currentCategory.description && (
-                  <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 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 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-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/10 text-slate-400 text-xs rounded-full bg-white/5">
-                  Optional
-                </Badge>
-              )}
-            </div>
+            {/* Category selection status header */}
+            {(() => {
+              const isMissingRequired = currentCategory.is_required && !sel?.productId && (!sel?.productIds || sel.productIds.length === 0)
+              return (
+                <div className={`flex items-center gap-3 p-3 rounded-xl border transition-all ${
+                  isMissingRequired
+                    ? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
+                    : 'bg-white/5 border-white/10'
+                }`}>
+                  <div className={`w-7 h-7 rounded-lg flex items-center justify-center shrink-0 ${
+                    isMissingRequired ? 'bg-red-500/20 text-red-400' : 'bg-primary/20 text-primary'
+                  }`}>
+                    <CategoryIcon icon={currentCategory.icon} className="w-3.5 h-3.5" />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <h3 className="font-bold text-white text-xs flex items-center gap-2 flex-wrap">
+                      <span>{currentCategory.name}</span>
+                      {isMissingRequired && (
+                        <span className="text-[10px] bg-red-500/20 text-red-400 border border-red-500/40 px-2 py-0.2 rounded-full font-extrabold animate-pulse tracking-wider">
+                          PFLICHTFELD AUSWÄHLEN!
+                        </span>
+                      )}
+                    </h3>
+                    <p className="text-slate-400 text-[10px] mt-0.5">
+                      {currentCategory.allow_multiselect ? 'Mehrfachauswahl möglich' : 'Einzelauswahl'}
+                    </p>
+                  </div>
+                  {sel?.productIds && sel.productIds.length > 0 ? (
+                    <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-[11px] rounded-full shrink-0">
+                      <Check className="w-3 h-3 mr-1" /> {sel.productIds.length} Ausgewählt
+                    </Badge>
+                  ) : sel?.productId ? (
+                    <Badge className="ml-auto bg-green-500/20 text-green-400 border border-green-500/30 text-[11px] rounded-full shrink-0">
+                      <Check className="w-3 h-3 mr-1" /> Ausgewählt
+                    </Badge>
+                  ) : currentCategory.is_required ? (
+                    <Badge variant="destructive" className="ml-auto opacity-90 text-[11px] rounded-full bg-red-500/30 text-red-400 border border-red-500/50 animate-pulse font-extrabold shrink-0">
+                      <AlertCircle className="w-3 h-3 mr-1 text-red-400" /> Bitte auswählen!
+                    </Badge>
+                  ) : (
+                    <Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-[11px] rounded-full bg-white/5 shrink-0">
+                      Optional
+                    </Badge>
+                  )}
+                </div>
+              )
+            })()}
 
+            {/* Products List (grid-cols-1 xl:grid-cols-2 gap-3) */}
             {catProducts.length === 0 ? (
-              <p className="text-slate-500 text-sm italic">
+              <p className="text-slate-500 text-xs italic p-4 bg-white/5 rounded-xl border border-white/5 text-center">
                 Keine Produkte in dieser Kategorie im aktuellen Abrechnungsmodell vorhanden.
               </p>
             ) : currentCategory.allow_multiselect ? (
-              <div className="grid gap-3">
+              <div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
                 {catProducts.map(product => {
                   const isChecked = sel?.productIds?.includes(product.id) ?? false
                   const disabled = isProductDisabled(product, currentCategory.id)
                   return (
-                    <div key={product.id} className="relative">
+                    <div key={product.id} className="relative min-w-0">
                       <Label
                         onClick={() => !disabled && selectProduct(currentCategory.id, product.id)}
-                        className={`flex flex-col items-start p-4 rounded-xl border transition-all ${disabled
+                        className={`flex flex-col justify-between h-full p-3 rounded-xl border transition-all ${disabled
                           ? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
                           : isChecked
-                            ? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.1)]'
+                            ? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.15)] ring-1 ring-primary/40'
                             : 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
                         }`}
                       >
-                        <div className="flex justify-between w-full items-center">
-                          <div className="flex items-center gap-3">
-                            <Checkbox
-                              checked={isChecked}
-                              disabled={disabled}
-                              onCheckedChange={() => { }}
-                              className="border-white/20 data-[state=checked]:bg-primary rounded"
-                            />
-                            <span className="font-bold text-sm text-white">{product.name}</span>
-                            <span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
-                              {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
+                        <div className="min-w-0 w-full">
+                          <div className="flex justify-between items-start gap-2 w-full">
+                            <div className="flex items-start gap-2 min-w-0 flex-1">
+                              <Checkbox
+                                checked={isChecked}
+                                disabled={disabled}
+                                onCheckedChange={() => { }}
+                                className="border-white/20 data-[state=checked]:bg-primary rounded mt-0.5 shrink-0"
+                              />
+                              <div className="min-w-0 flex-1">
+                                <span className="font-bold text-xs text-white block break-words">{product.name}</span>
+                                <span className={`inline-block text-[9px] px-1.5 py-0.2 mt-1 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
+                                  {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
+                                </span>
+                              </div>
+                            </div>
+                            <span className="text-primary font-bold text-xs shrink-0 text-right">
+                              {new Intl.NumberFormat('de-DE', {
+                                style: 'currency',
+                                currency: 'EUR',
+                              }).format(product.base_price)}{' '}
+                              <span className="text-[10px] text-slate-500 font-normal block">{billingLabel(product.billing_interval)}</span>
                             </span>
                           </div>
-                          <span className="text-primary font-bold text-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>
+                          {product.description && (
+                            <p className="text-[11px] text-slate-400 mt-2 font-normal leading-relaxed break-words">{product.description}</p>
+                          )}
                         </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">
+                          <span className="text-[10px] text-slate-500 mt-2 font-normal block">
                             {product.modules.length} optionale Module verfügbar
                           </span>
                         )}
@@ -175,13 +233,13 @@ export function StepSoftware({
               <RadioGroup
                 value={sel?.productId ?? ''}
                 onValueChange={id => selectProduct(currentCategory.id, id)}
-                className="grid gap-3"
+                className="grid grid-cols-1 xl:grid-cols-2 gap-3"
               >
                 {catProducts.map(product => {
                   const disabled = isProductDisabled(product, currentCategory.id)
                   const isChecked = sel?.productId === product.id
                   return (
-                    <div key={product.id} className="relative">
+                    <div key={product.id} className="relative min-w-0">
                       <RadioGroupItem
                         value={product.id}
                         id={`${currentCategory.id}-${product.id}`}
@@ -190,33 +248,35 @@ export function StepSoftware({
                       />
                       <Label
                         htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
-                        className={`flex flex-col items-start p-4 rounded-xl border transition-all ${disabled
+                        className={`flex flex-col justify-between h-full p-3 rounded-xl border transition-all ${disabled
                           ? 'border-white/5 bg-white/5 opacity-40 cursor-not-allowed'
                           : isChecked
-                            ? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.1)]'
+                            ? 'border-primary bg-primary/10 cursor-pointer shadow-[0_0_15px_rgba(59,130,246,0.15)] ring-1 ring-primary/40'
                             : 'border-white/5 bg-white/5 hover:bg-white/10 cursor-pointer'
                         }`}
                       >
-                        <div className="flex justify-between w-full items-center">
-                          <div className="flex items-center gap-2">
-                            <span className="font-bold text-sm text-white">{product.name}</span>
-                            <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'}
+                        <div className="min-w-0 w-full">
+                          <div className="flex justify-between items-start gap-2 w-full">
+                            <div className="min-w-0 flex-1">
+                              <span className="font-bold text-xs text-white block break-words">{product.name}</span>
+                              <span className={`inline-block text-[9px] px-1.5 py-0.2 mt-1 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
+                                {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
+                              </span>
+                            </div>
+                            <span className="text-primary font-bold text-xs shrink-0 text-right">
+                              {new Intl.NumberFormat('de-DE', {
+                                style: 'currency',
+                                currency: 'EUR',
+                              }).format(product.base_price)}{' '}
+                              <span className="text-[10px] text-slate-500 font-normal block">{billingLabel(product.billing_interval)}</span>
                             </span>
                           </div>
-                          <span className="text-primary font-bold text-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>
+                          {product.description && (
+                            <p className="text-[11px] text-slate-400 mt-2 font-normal leading-relaxed break-words">{product.description}</p>
+                          )}
                         </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">
+                          <span className="text-[10px] text-slate-500 mt-2 font-normal block">
                             {product.modules.length} optionale Module verfügbar
                           </span>
                         )}
@@ -227,14 +287,14 @@ export function StepSoftware({
               </RadioGroup>
             )}
 
-            {/* Modules */}
+            {/* Modules Section */}
             {selectedProduct?.modules && selectedProduct.modules.length > 0 && (
-              <div className="mt-6 p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
-                <p className="text-sm font-bold text-white flex items-center gap-2">
+              <div className="mt-4 p-3.5 rounded-xl bg-white/5 border border-white/10 space-y-3 min-w-0">
+                <p className="text-xs font-bold text-white flex items-center gap-2">
                   <span className="w-1.5 h-1.5 rounded-full bg-primary" />
                   Zusatzmodule für {selectedProduct.name}
                 </p>
-                <div className="space-y-2.5">
+                <div className="grid grid-cols-1 xl:grid-cols-2 gap-2.5">
                   {selectedProduct.modules.map(module => {
                     const isExistingLicense = existingModuleIds.includes(module.id)
                     const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
@@ -242,42 +302,43 @@ export function StepSoftware({
                     return (
                       <div
                         key={module.id}
-                        className={`flex flex-col p-4 rounded-xl border transition-all duration-200 ${
+                        title={isExistingLicense ? "Dieses Modul ist auf dieser Kasse bereits aktiv und dauerhaft lizenziert." : undefined}
+                        className={`flex flex-col justify-between p-3 rounded-xl border transition-all duration-200 min-w-0 ${
                           isExistingLicense
                             ? 'border-primary/20 bg-primary/5 opacity-75'
                             : disabled
                               ? 'border-white/5 bg-white/5 opacity-40'
                               : checked
-                                ? 'border-primary/30 bg-primary/5'
+                                ? 'border-primary bg-primary/10 shadow-[0_0_15px_rgba(59,130,246,0.15)] ring-1 ring-primary/40 text-white'
                                 : 'border-white/5 bg-white/5 hover:bg-white/10'
                         }`}
                       >
-                        <div className="flex items-start space-x-3">
+                        <div className="flex items-start space-x-2.5 min-w-0">
                           <Checkbox
                             id={`mod-${currentCategory.id}-${module.id}`}
                             checked={checked}
                             onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
                             disabled={disabled}
-                            className="rounded border-white/20 data-[state=checked]:bg-primary"
+                            className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5 shrink-0"
                           />
-                          <div className="flex-1">
+                          <div className="flex-1 min-w-0">
                             <Label
                               htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
-                              className={`font-semibold text-sm flex justify-between text-white ${
+                              className={`font-semibold text-xs flex justify-between items-start text-white gap-2 ${
                                 isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
                               }`}
                             >
-                              <span className="flex items-center gap-1.5 flex-wrap">
+                              <span className="flex-1 min-w-0 break-words">
                                 {module.name}
                                 {isExistingLicense && (
-                                  <span className="inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30 font-bold uppercase tracking-wider">
-                                    <Lock className="w-2.5 h-2.5" /> Bereits lizenziert
+                                  <span className="inline-flex items-center gap-1 text-[9px] px-1.5 py-0.2 rounded bg-primary/20 text-primary border border-primary/30 font-bold uppercase tracking-wider ml-1 mt-0.5">
+                                    <Lock className="w-2.5 h-2.5" /> Lizenziert
                                   </span>
                                 )}
                               </span>
-                              <span className="text-primary font-bold text-sm">
+                              <span className="text-primary font-bold text-xs shrink-0 text-right">
                                 {isExistingLicense ? (
-                                  <span className="text-slate-500 text-xs font-normal">inkl.</span>
+                                  <span className="text-slate-500 text-[11px] font-normal">inkl.</span>
                                 ) : (
                                   <>+{new Intl.NumberFormat('de-DE', {
                                     style: 'currency',
@@ -287,10 +348,10 @@ export function StepSoftware({
                               </span>
                             </Label>
                             {module.description && (
-                              <p className="text-xs text-slate-400 mt-1 leading-relaxed">{module.description}</p>
+                              <p className="text-[11px] text-slate-400 mt-1 leading-relaxed break-words">{module.description}</p>
                             )}
                             {!isExistingLicense && disabled && (
-                              <p className="text-[10px] text-red-400 mt-1.5 font-medium flex items-center gap-1">
+                              <p className="text-[10px] text-red-400 mt-1 font-medium flex items-center gap-1">
                                 <AlertCircle className="w-3 h-3 text-red-400 shrink-0" />
                                 {module.requirements?.length && !module.requirements.some(
                                   reqId => sel?.moduleIds.includes(reqId)
@@ -304,8 +365,8 @@ export function StepSoftware({
 
                         {/* Scalable Quantity */}
                         {checked && !isExistingLicense && module.has_quantity && (
-                          <div className="flex items-center gap-3 mt-4 pl-8 pt-3 border-t border-white/5">
-                            <Label htmlFor={`qty-${module.id}`} className="text-xs text-slate-400 font-medium">Menge:</Label>
+                          <div className="flex items-center gap-3 mt-2.5 pl-6 pt-2 border-t border-white/5">
+                            <Label htmlFor={`qty-${module.id}`} className="text-[11px] text-slate-400 font-medium shrink-0">Menge:</Label>
                             <Input
                               id={`qty-${module.id}`}
                               type="number"
@@ -316,9 +377,9 @@ export function StepSoftware({
                                 const val = Math.max(1, parseInt(e.target.value) || 1)
                                 setModuleQuantities(prev => ({ ...prev, [module.id]: val }))
                               }}
-                              className="w-16 h-8 bg-white/5 border-white/10 text-white text-xs text-center rounded-lg focus:border-primary focus:ring-1 focus:ring-primary"
+                              className="w-14 h-6 bg-white/5 border-white/10 text-white text-xs text-center rounded focus:border-primary focus:ring-1 focus:ring-primary"
                             />
-                            <span className="text-xs text-slate-400">
+                            <span className="text-[10px] text-slate-400 truncate">
                               Gesamt:{' '}
                               <span className="text-primary font-bold">
                                 {new Intl.NumberFormat('de-DE', {
@@ -335,9 +396,21 @@ export function StepSoftware({
                 </div>
               </div>
             )}
+
+            {/* Inline Validation Warnings */}
+            {productValidationErrors.length > 0 && (
+              <div className="p-3 rounded-xl bg-red-500/10 border border-red-500/30 space-y-1">
+                {productValidationErrors.map((err, errIdx) => (
+                  <p key={errIdx} className="text-xs text-red-400 flex items-center gap-1.5 font-medium">
+                    <AlertCircle className="w-3.5 h-3.5 shrink-0 text-red-400" />
+                    {err}
+                  </p>
+                ))}
+              </div>
+            )}
           </motion.div>
         </AnimatePresence>
-      </CardContent>
+      </div>
     </Card>
   )
 }

shop/components/wizard/step-summary.tsx

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

shop/components/wizard/summary-sidebar.tsx

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

shop/components/wizard/toast-notification.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { motion, AnimatePresence } from 'framer-motion'
-import { AlertCircle } from 'lucide-react'
+import { AlertCircle, X } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 
 interface ToastProps {
@@ -31,7 +31,7 @@ export function ToastNotification({ toast, onClose }: ToastProps) {
             className="w-5 h-5 ml-auto text-slate-400 hover:text-white"
             onClick={onClose}
           >
-            ✕
+            <X className="w-3.5 h-3.5" />
           </Button>
         </motion.div>
       )}

shop/lib/actions/auth.ts

@@ -158,17 +158,17 @@ function get2FAEmailHtml(code: string) {
 
     <div style="background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-radius: 12px; padding: 16px 20px; margin: 24px 0; border-left: 4px solid #f59e0b;">
       <p style="color: #92400e; font-size: 14px; margin: 0; line-height: 1.5;">
-        ⏱️ <strong>Dieser Code ist 15 Minuten gültig.</strong><br>
+        <strong>Dieser Code ist 15 Minuten gültig.</strong><br>
         Falls Sie diese Anmeldung nicht durchgeführt haben, ändern Sie bitte umgehend Ihr Passwort.
       </p>
     </div>
 
     <p style="color: #64748b; font-size: 13px; line-height: 1.6; margin-top: 24px;">
-      🔒 Dieser Code dient der Sicherheit Ihres Kontos. Geben Sie ihn niemals an andere Personen weiter.
+      Dieser Code dient der Sicherheit Ihres Kontos. Geben Sie ihn niemals an andere Personen weiter.
     </p>
   `
 
-  return getBeautifulEmailHtml('🔐 Sicherheitscode', messageHtml)
+  return getBeautifulEmailHtml('Sicherheitscode', messageHtml)
 }
 
 /** Internal: generates code + sends email (no auth check needed) */
@@ -185,14 +185,21 @@ async function send2FACodeInternal(userId: string, deviceHash: string, email: st
     .eq('device_hash', deviceHash)
 
   // Neuen Code speichern
-  await adminClient
+  const { data: insData, error: insError } = await adminClient
     .from('device_verification_codes')
     .insert({ user_id: userId, code, device_hash: deviceHash, expires_at: expiresAt })
+    .select()
+
+  if (insError) {
+    console.error("2FA CODE INSERT ERROR:", insError)
+  } else {
+    console.log("2FA CODE INSERTED:", code, insData)
+  }
 
   // Mail senden
   await sendMail({
     to: email,
-    subject: '🔐 Ihr Sicherheitscode – CASPOS Shop',
+    subject: 'Ihr Sicherheitscode – CASPOS Shop',
     text: `Ihr Sicherheitscode lautet: ${code}\n\nDieser Code ist 15 Minuten gültig.\n\nFalls Sie diese Anmeldung nicht durchgeführt haben, ändern Sie bitte umgehend Ihr Passwort.`,
     html: get2FAEmailHtml(code),
   })
@@ -222,6 +229,7 @@ export async function verifyDevice2FA(userId: string, code: string, deviceHash:
     const cleanCode = code.trim()
 
     // Code prüfen (unter Berücksichtigung von Leerzeichen & device_hash)
+    console.log("VERIFYING 2FA: userId =", userId, "code =", cleanCode)
     const { data: codeEntries, error: codeError } = await adminClient
       .from('device_verification_codes')
       .select('*')
@@ -231,6 +239,7 @@ export async function verifyDevice2FA(userId: string, code: string, deviceHash:
       .limit(1)
 
     const codeEntry = codeEntries && codeEntries.length > 0 ? codeEntries[0] : null
+    console.log("VERIFY 2FA DB RESULT: entry =", codeEntry, "error =", codeError)
 
     if (codeError || !codeEntry) {
       // Doppelklick- & Race-Condition Schutz: Prüfen ob das Gerät eben bereits verifiziert wurde

shop/lib/actions/branding.ts

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

shop/lib/actions/email-templates.ts

@@ -1,133 +1,429 @@
-interface EmailDetails {
+export interface OrderEmailProps {
   orderNumber: string
+  status: 'pending' | 'pending_approval' | 'in_review' | 'approved' | 'active' | 'completed' | 'cancelled' | 'rejected'
   formattedDate: string
   customerCompanyName: string
-  totalDetailsText: string
-  totalDetailsHtml: string
-  itemsDetailsText?: string
-  itemsDetailsHtml?: string
+  billingModel?: string // e.g. "Kauf" | "Miete (monatlich)" | "Kauf / Miete"
+  rejectionReason?: string
+  siteUrl?: string
+  items?: any[]
   partnerCompanyName?: string
   partnerUserName?: string
   partnerUserEmail?: string
+  taxRate?: number
+  oneTimeNet?: number
+  monthlyNet?: number
 }
 
-export function getOrderEmailTemplate(
-  details: EmailDetails,
-  siteUrl: string,
-  isUpdate: boolean = false
-) {
-  const title = isUpdate ? 'Anfrage geändert' : 'Anfrage erhalten'
-  const intro = isUpdate
-    ? `Deine Anfrage ${details.orderNumber} wurde aktualisiert.`
-    : `Deine Anfrage ${details.orderNumber} ist bei uns eingegangen und wird bearbeitet.`
+export function generateOrderEmailSubject(orderNumber: string, status: string): string {
+  const formattedOrderNumber = (orderNumber || '').replace(/^BE-/, 'AE-')
+  if (status === 'approved' || status === 'active' || status === 'completed') {
+    return `Auftragsbestätigung: Anfrage #${formattedOrderNumber} freigegeben`
+  }
+  if (status === 'rejected' || status === 'cancelled') {
+    return `Status-Update: Anfrage #${formattedOrderNumber} abgelehnt`
+  }
+  return `Eingangsbestätigung: Anfrage #${formattedOrderNumber} eingegangen`
+}
 
-  let partnerText = ''
-  let partnerHtml = ''
-  if (details.partnerCompanyName || details.partnerUserName || details.partnerUserEmail) {
-    partnerText = `\nPartner-Informationen:`
-    if (details.partnerCompanyName) partnerText += `\n- Firma: ${details.partnerCompanyName}`
-    if (details.partnerUserName) partnerText += `\n- Benutzer: ${details.partnerUserName}`
-    if (details.partnerUserEmail) partnerText += `\n- E-Mail: ${details.partnerUserEmail}`
-    partnerText += `\n`
+export function generateOrderEmailHtml(props: OrderEmailProps): { text: string; html: string } {
+  const formattedOrderNumber = (props.orderNumber || '').replace(/^BE-/, 'AE-')
+  const siteUrl = props.siteUrl || process.env.NEXT_PUBLIC_SITE_URL || 'https://staging.hephex.de'
+  const taxRate = props.taxRate ?? 19
+  const orderPortalUrl = `${siteUrl}/my-orders`
 
-    partnerHtml = `
-      <tr>
-        <td colspan="2" style="padding: 8px 0; border-top: 1px solid #e2e8f0; font-weight: bold; color: #0f172a;">Partner-Informationen:</td>
-      </tr>
-    `
-    if (details.partnerCompanyName) {
-      partnerHtml += `
-        <tr>
-          <td style="padding: 4px 0; padding-left: 10px; color: #475569; font-weight: bold;">Firma:</td>
-          <td style="padding: 4px 0; color: #475569;">${details.partnerCompanyName}</td>
-        </tr>
-      `
-    }
-    if (details.partnerUserName) {
-      partnerHtml += `
-        <tr>
-          <td style="padding: 4px 0; padding-left: 10px; color: #475569; font-weight: bold;">Benutzer:</td>
-          <td style="padding: 4px 0; color: #475569;">${details.partnerUserName}</td>
-        </tr>
-      `
-    }
-    if (details.partnerUserEmail) {
-      partnerHtml += `
-        <tr>
-          <td style="padding: 4px 0; padding-left: 10px; color: #475569; font-weight: bold;">E-Mail:</td>
-          <td style="padding: 4px 0; color: #475569;">${details.partnerUserEmail}</td>
-        </tr>
-      `
+  // Status Callout configuration
+  let calloutBg = '#f8fafc'
+  let calloutBorder = '#cbd5e1'
+  let calloutTitle = 'Status: Anfrage eingegangen und in Prüfung'
+  let calloutText = 'Ihre Anfrage ist erfolgreich in unserem System eingegangen und wird derzeit vom Support geprüft.'
+  let statusBadgeColor = '#2563eb'
+
+  if (props.status === 'approved' || props.status === 'active' || props.status === 'completed') {
+    calloutBg = '#f0fdf4'
+    calloutBorder = '#86efac'
+    calloutTitle = 'Status: Freigegeben / Aktiv'
+    calloutText = 'Ihre Auftragsbestätigung / Rechnung finden Sie als PDF im Anhang dieser E-Mail.'
+    statusBadgeColor = '#16a34a'
+  } else if (props.status === 'rejected' || props.status === 'cancelled') {
+    calloutBg = '#fef2f2'
+    calloutBorder = '#fca5a5'
+    calloutTitle = 'Status: Anfrage abgelehnt'
+    calloutText = props.rejectionReason
+      ? `Begründung: "${props.rejectionReason}"`
+      : 'Ihre Anfrage wurde vom Support geprüft und konnte leider nicht freigegeben werden.'
+    statusBadgeColor = '#dc2626'
+  }
+
+  // Calculate prices if items provided
+  let oneTimeNet = props.oneTimeNet ?? 0
+  let monthlyNet = props.monthlyNet ?? 0
+  const items = props.items || []
+
+  if (items.length > 0 && props.oneTimeNet === undefined && props.monthlyNet === undefined) {
+    items.forEach((item: any) => {
+      if (item.billing_interval === 'monthly') {
+        monthlyNet += item.base_price || 0
+      } else {
+        oneTimeNet += item.base_price || 0
+      }
+
+      item.selected_modules?.forEach((mod: any) => {
+        const qty = mod.quantity || 1
+        const price = mod.total_price ?? (mod.price * qty)
+        monthlyNet += price
+      })
+    })
+  }
+
+  const oneTimeTax = Math.round(oneTimeNet * (taxRate / 100) * 100) / 100
+  const oneTimeGross = Math.round((oneTimeNet + oneTimeTax) * 100) / 100
+
+  const monthlyTax = Math.round(monthlyNet * (taxRate / 100) * 100) / 100
+  const monthlyGross = Math.round((monthlyNet + monthlyTax) * 100) / 100
+
+  const formatEuro = (val: number) =>
+    new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
+
+  // Determine Billing Model Label
+  let billingModelLabel = props.billingModel
+  if (!billingModelLabel) {
+    if (oneTimeNet > 0 && monthlyNet > 0) {
+      billingModelLabel = 'Kauf & Miete'
+    } else if (monthlyNet > 0) {
+      billingModelLabel = 'Miete (monatlich)'
+    } else {
+      billingModelLabel = 'Kauf (einmalig)'
     }
   }
 
-  const text = `Hallo,\n\n${isUpdate ? 'Deine Anfrage wurde aktualisiert.' : 'Deine Anfrage ist bei uns eingegangen.'}\n\nDetails:\n- Nummer: ${details.orderNumber}\n- Datum: ${details.formattedDate}\n- Kunde: ${details.customerCompanyName}\n${partnerText}${details.itemsDetailsText || ''}\n${details.totalDetailsText}\n\nDeine Anfragebestätigung findest du im Anhang als PDF.\n\nPDF-Link: ${siteUrl}/api/orders/${details.orderNumber}/download\n\nViele Grüße,\nDein CASPOS Team`
+  // Group items by Device
+  const groupedItems: { [key: string]: any[] } = {}
+  items.forEach((item: any) => {
+    const devName = item.device_name || 'Kasse 1'
+    if (!groupedItems[devName]) {
+      groupedItems[devName] = []
+    }
+    groupedItems[devName].push(item)
+  })
 
-  const html = `
-    <div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
-      <h2 style="color: #0f172a; margin-bottom: 16px;">${title}</h2>
-      <p style="color: #475569; font-size: 16px; line-height: 1.5;">Hallo,</p>
-      <p style="color: #475569; font-size: 16px; line-height: 1.5;">${intro}</p>
-      <div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 16px; margin: 24px 0;">
-        <h3 style="color: #0f172a; margin-top: 0; margin-bottom: 12px;">Details</h3>
-        <table style="width: 100%; border-collapse: collapse; font-size: 14px; color: #475569;">
+  // Build Text Breakdown
+  let itemsBreakdownText = ''
+  if (items.length > 0) {
+    itemsBreakdownText += '\nKassen-Aufstellung:\n'
+    Object.entries(groupedItems).forEach(([devName, devItems]) => {
+      itemsBreakdownText += `\n[ ${devName} ]\n`
+      devItems.forEach((item: any) => {
+        itemsBreakdownText += `  - ${item.product_name} (${item.category_name || 'Basis'}): ${formatEuro(item.base_price || 0)} ${item.billing_interval === 'one_time' ? 'einmalig' : 'mtl.'}\n`
+        item.selected_modules?.forEach((mod: any) => {
+          const qty = mod.quantity || 1
+          const price = mod.total_price ?? (mod.price * qty)
+          itemsBreakdownText += `    + ${mod.module_name} ${qty > 1 ? `(x${qty})` : ''}: +${formatEuro(price)} mtl.\n`
+        })
+      })
+    })
+  }
+
+  let totalsText = ''
+  if (oneTimeNet > 0) {
+    totalsText += `\nEinmalige Beträge:\n- Netto: ${formatEuro(oneTimeNet)}\n- zzgl. ${taxRate}% MwSt: ${formatEuro(oneTimeTax)}\n- Brutto Gesamt: ${formatEuro(oneTimeGross)}\n`
+  }
+  if (monthlyNet > 0) {
+    totalsText += `\nMonatliche Beträge:\n- Netto: ${formatEuro(monthlyNet)} / mtl.\n- zzgl. ${taxRate}% MwSt: ${formatEuro(monthlyTax)} / mtl.\n- Brutto Gesamt: ${formatEuro(monthlyGross)} / mtl.\n`
+  }
+
+  let partnerPlainText = ''
+  if (props.partnerCompanyName || props.partnerUserName || props.partnerUserEmail) {
+    partnerPlainText = `\nPartner / Betreuer:\n- Firma: ${props.partnerCompanyName || '-'}\n- Ansprechpartner: ${props.partnerUserName || '-'}\n- E-Mail: ${props.partnerUserEmail || '-'}\n`
+  }
+
+  const text = `CASPOS B2B Portal\nAnfrage #${formattedOrderNumber}\n\n${calloutTitle}\n${calloutText}\n\nAuftragsdetails:\n- Endkunde: ${props.customerCompanyName}\n- Datum: ${props.formattedDate}\n- Abrechnung: ${billingModelLabel}\n${partnerPlainText}${itemsBreakdownText}${totalsText}\n\nAnfrage im Portal ansehen: ${orderPortalUrl}\n\nCASPOS Computerabrechnungssysteme GmbH\nAlte Bundesstraße 16 · 76846 Hauenstein\nAmtsgericht Zweibrücken HRB 12345\nAutomatische Systembenachrichtigung.`
+
+  // Build HTML Items Rows
+  let itemsHtmlRows = ''
+  if (items.length > 0) {
+    Object.entries(groupedItems).forEach(([devName, devItems]) => {
+      itemsHtmlRows += `
+        <tr>
+          <td colspan="2" style="padding: 10px 14px; background-color: #f1f5f9; font-weight: 600; font-size: 13px; color: #1e293b; border-bottom: 1px solid #e2e8f0;">
+            ${devName === 'Zusatzleistung' ? 'Backoffice / Zusatzleistung' : `Kassengerät: ${devName}`}
+          </td>
+        </tr>
+      `
+      devItems.forEach((item: any) => {
+        itemsHtmlRows += `
           <tr>
-            <td style="padding: 4px 0; font-weight: bold; width: 140px;">Nummer:</td>
-            <td style="padding: 4px 0;">${details.orderNumber}</td>
+            <td style="padding: 8px 14px; font-size: 13px; color: #334155; font-weight: 500; border-bottom: 1px solid #f1f5f9;">
+              ${item.product_name} <span style="font-size: 11px; color: #64748b;">(${item.category_name || 'Basis'})</span>
+            </td>
+            <td style="padding: 8px 14px; text-align: right; font-size: 13px; font-weight: 600; color: #0f172a; border-bottom: 1px solid #f1f5f9;">
+              ${formatEuro(item.base_price || 0)} <span style="font-size: 11px; color: #64748b; font-weight: normal;">${item.billing_interval === 'one_time' ? 'einmalig' : 'mtl.'}</span>
+            </td>
+          </tr>
+        `
+        item.selected_modules?.forEach((mod: any) => {
+          const qty = mod.quantity || 1
+          const price = mod.total_price ?? (mod.price * qty)
+          itemsHtmlRows += `
+            <tr>
+              <td style="padding: 4px 14px 4px 28px; color: #64748b; font-size: 12px; border-bottom: 1px solid #f8fafc;">
+                + ${mod.module_name} ${qty > 1 ? `<span style="font-size: 10px; font-weight: 600;">(x${qty})</span>` : ''}
+              </td>
+              <td style="padding: 4px 14px; text-align: right; color: #64748b; font-size: 12px; border-bottom: 1px solid #f8fafc;">
+                +${formatEuro(price)} <span style="font-size: 10px;">mtl.</span>
+              </td>
+            </tr>
+          `
+        })
+      })
+    })
+  }
+
+  // Build HTML Partner Section
+  let partnerHtml = ''
+  if (props.partnerCompanyName || props.partnerUserName || props.partnerUserEmail) {
+    partnerHtml = `
+      <tr>
+        <td colspan="2" style="padding: 12px 0 4px 0; border-top: 1px solid #e2e8f0; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b;">Partner & Betreuung:</td>
+      </tr>
+      ${props.partnerCompanyName ? `<tr><td style="padding: 3px 0; font-size: 13px; color: #64748b;">Firma:</td><td style="padding: 3px 0; font-size: 13px; font-weight: 500; color: #0f172a; text-align: right;">${props.partnerCompanyName}</td></tr>` : ''}
+      ${props.partnerUserName ? `<tr><td style="padding: 3px 0; font-size: 13px; color: #64748b;">Ansprechpartner:</td><td style="padding: 3px 0; font-size: 13px; color: #0f172a; text-align: right;">${props.partnerUserName}</td></tr>` : ''}
+      ${props.partnerUserEmail ? `<tr><td style="padding: 3px 0; font-size: 13px; color: #64748b;">E-Mail:</td><td style="padding: 3px 0; font-size: 13px; color: #0f172a; text-align: right;">${props.partnerUserEmail}</td></tr>` : ''}
+    `
+  }
+
+  // Totals Section HTML
+  let totalsHtml = ''
+  if (oneTimeNet > 0 || monthlyNet > 0) {
+    totalsHtml = `
+      <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 16px; border-top: 2px solid #e2e8f0; padding-top: 12px; font-size: 13px; color: #334155;">
+        ${oneTimeNet > 0 ? `
+          <tr>
+            <td colspan="2" style="padding: 4px 0; font-weight: 600; font-size: 11px; text-transform: uppercase; color: #64748b; letter-spacing: 0.05em;">Einmalige Beträge:</td>
           </tr>
           <tr>
-            <td style="padding: 4px 0; font-weight: bold;">Datum:</td>
-            <td style="padding: 4px 0;">${details.formattedDate}</td>
+            <td style="padding: 2px 0; color: #64748b;">Netto-Zwischensumme:</td>
+            <td style="padding: 2px 0; text-align: right; font-weight: 500; color: #0f172a;">${formatEuro(oneTimeNet)}</td>
           </tr>
           <tr>
-            <td style="padding: 4px 0; font-weight: bold;">Kunde:</td>
-            <td style="padding: 4px 0;">${details.customerCompanyName}</td>
+            <td style="padding: 2px 0; color: #64748b;">zzgl. ${taxRate}% MwSt:</td>
+            <td style="padding: 2px 0; text-align: right; color: #64748b;">${formatEuro(oneTimeTax)}</td>
           </tr>
-          ${partnerHtml}
-          ${details.itemsDetailsHtml || ''}
-          ${details.totalDetailsHtml}
+          <tr>
+            <td style="padding: 4px 0 10px 0; font-weight: 600; color: #0f172a;">Gesamt einmalig (brutto):</td>
+            <td style="padding: 4px 0 10px 0; text-align: right; font-weight: 700; color: #0f172a; font-size: 14px;">${formatEuro(oneTimeGross)}</td>
+          </tr>
+        ` : ''}
+        ${monthlyNet > 0 ? `
+          <tr>
+            <td colspan="2" style="padding: ${oneTimeNet > 0 ? '10px' : '4px'} 0 4px 0; font-weight: 600; font-size: 11px; text-transform: uppercase; color: #64748b; letter-spacing: 0.05em; ${oneTimeNet > 0 ? 'border-top: 1px dashed #e2e8f0;' : ''}">Monatlich wiederkehrend:</td>
+          </tr>
+          <tr>
+            <td style="padding: 2px 0; color: #64748b;">Netto-Zwischensumme:</td>
+            <td style="padding: 2px 0; text-align: right; font-weight: 500; color: #0f172a;">${formatEuro(monthlyNet)} / mtl.</td>
+          </tr>
+          <tr>
+            <td style="padding: 2px 0; color: #64748b;">zzgl. ${taxRate}% MwSt:</td>
+            <td style="padding: 2px 0; text-align: right; color: #64748b;">${formatEuro(monthlyTax)} / mtl.</td>
+          </tr>
+          <tr>
+            <td style="padding: 4px 0; font-weight: 600; color: #0f172a;">Gesamt monatlich (brutto):</td>
+            <td style="padding: 4px 0; text-align: right; font-weight: 700; color: #0f172a; font-size: 14px;">${formatEuro(monthlyGross)} / mtl.</td>
+          </tr>
+        ` : ''}
+      </table>
+    `
+  }
+
+  const html = `<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CASPOS B2B Portal - #${formattedOrderNumber}</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; color: #0f172a;">
+  <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f8fafc; padding: 24px 12px;">
+    <tr>
+      <td align="center">
+        <!-- Main Card (max-width 600px) -->
+        <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width: 600px; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);">
+          
+          <!-- Header Banner -->
+          <tr>
+            <td style="background-color: #0f172a; padding: 24px; text-align: left;">
+              <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
+                <tr>
+                  <td>
+                    <div style="font-size: 18px; font-weight: 700; color: #ffffff; letter-spacing: -0.02em; text-transform: uppercase;">CASPOS B2B Portal</div>
+                    <div style="font-size: 12px; color: #94a3b8; margin-top: 2px;">Die Kasse · Fachhandelsportal</div>
+                  </td>
+                  <td align="right" style="vertical-align: middle;">
+                    <span style="font-family: monospace, Courier, monospace; font-size: 14px; font-weight: 600; color: #38bdf8; background-color: #1e293b; padding: 6px 10px; border-radius: 4px; border: 1px solid #334155;">
+                      #${formattedOrderNumber}
+                    </span>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+
+          <!-- Body Content -->
+          <tr>
+            <td style="padding: 24px;">
+              
+              <!-- Status Callout -->
+              <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: ${calloutBg}; border-left: 4px solid ${statusBadgeColor}; border-top: 1px solid ${calloutBorder}; border-right: 1px solid ${calloutBorder}; border-bottom: 1px solid ${calloutBorder}; border-radius: 4px; margin-bottom: 24px;">
+                <tr>
+                  <td style="padding: 14px 16px;">
+                    <div style="font-weight: 700; font-size: 14px; color: #0f172a; margin-bottom: 4px;">${calloutTitle}</div>
+                    <div style="font-size: 13px; color: #334155; line-height: 1.5;">${calloutText}</div>
+                  </td>
+                </tr>
+              </table>
+
+              <!-- Order & Customer Meta Table -->
+              <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 16px; margin-bottom: 24px;">
+                <tr>
+                  <td>
+                    <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="font-size: 13px;">
+                      <tr>
+                        <td style="padding: 4px 0; color: #64748b; width: 140px;">Endkunde:</td>
+                        <td style="padding: 4px 0; font-weight: 600; color: #0f172a; text-align: right;">${props.customerCompanyName}</td>
+                      </tr>
+                      <tr>
+                        <td style="padding: 4px 0; color: #64748b;">Bestelldatum:</td>
+                        <td style="padding: 4px 0; font-weight: 500; color: #0f172a; text-align: right;">${props.formattedDate}</td>
+                      </tr>
+                      <tr>
+                        <td style="padding: 4px 0; color: #64748b;">Abrechnungsmodell:</td>
+                        <td style="padding: 4px 0; font-weight: 500; color: #0f172a; text-align: right;">${billingModelLabel}</td>
+                      </tr>
+                      ${partnerHtml}
+                    </table>
+                  </td>
+                </tr>
+              </table>
+
+              <!-- Hardware / Modules Breakdown -->
+              ${items.length > 0 ? `
+                <div style="font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #475569; margin-bottom: 8px;">Kassen-Aufstellung</div>
+                <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; margin-bottom: 20px;">
+                  ${itemsHtmlRows}
+                </table>
+              ` : ''}
+
+              <!-- Totals -->
+              ${totalsHtml}
+
+              <!-- Primary Action Button -->
+              <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 32px; margin-bottom: 8px;">
+                <tr>
+                  <td align="center">
+                    <a href="${orderPortalUrl}" target="_blank" style="display: inline-block; background-color: #2563eb; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 600; padding: 12px 28px; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);">
+                      [ Anfrage im Portal ansehen ]
+                    </a>
+                  </td>
+                </tr>
+              </table>
+
+            </td>
+          </tr>
+
+          <!-- Footer -->
+          <tr>
+            <td style="background-color: #f8fafc; border-top: 1px solid #e2e8f0; padding: 20px 24px; text-align: center; font-size: 12px; color: #64748b; line-height: 1.5;">
+              <p style="margin: 0; font-weight: 600; color: #475569;">CASPOS Computerabrechnungssysteme GmbH</p>
+              <p style="margin: 2px 0 0 0;">Alte Bundesstraße 16 · 76846 Hauenstein · Amtsgericht Zweibrücken HRB 12345</p>
+              <p style="margin: 8px 0 0 0; font-size: 11px; color: #94a3b8;">Dies ist eine automatische Transaktions-E-Mail des CASPOS B2B Portals.</p>
+            </td>
+          </tr>
+
         </table>
-      </div>
-      <p style="color: #475569; font-size: 16px; line-height: 1.5;">Die Bestätigung liegt als PDF im Anhang.</p>
-      <p style="color: #475569; font-size: 16px; line-height: 1.5;">
-        <a href="${siteUrl}/api/orders/${details.orderNumber}/download" style="color: #3b82f6; text-decoration: underline; font-weight: 500;">Anfragebestätigung PDF herunterladen</a>
-      </p>
-      <p style="color: #475569; font-size: 16px; line-height: 1.5; margin-top: 24px;">Viele Grüße,<br>Dein CASPOS Team</p>
-    </div>
-  `
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`
 
   return { text, html }
 }
 
-export function getStatusEmailTemplate(orderNumber: string, oldLabel: string, newLabel: string) {
-  const text = `Hallo,\n\nder Status deiner Anfrage ${orderNumber} hat sich geändert.\n\nStatus: ${newLabel} (vorher: ${oldLabel})\n\nViele Grüße,\nDein CASPOS Team`
+// Backwards-compatible Wrappers
+export function getOrderEmailTemplate(
+  details: {
+    orderNumber: string
+    formattedDate: string
+    customerCompanyName: string
+    totalDetailsText?: string
+    totalDetailsHtml?: string
+    itemsDetailsText?: string
+    itemsDetailsHtml?: string
+    partnerCompanyName?: string
+    partnerUserName?: string
+    partnerUserEmail?: string
+    items?: any[]
+    taxRate?: number
+    oneTimeNet?: number
+    monthlyNet?: number
+    billingModel?: string
+  },
+  siteUrl: string,
+  isUpdate: boolean = false,
+  _primaryColor?: string
+) {
+  return generateOrderEmailHtml({
+    orderNumber: details.orderNumber,
+    status: isUpdate ? 'in_review' : 'pending',
+    formattedDate: details.formattedDate,
+    customerCompanyName: details.customerCompanyName,
+    billingModel: details.billingModel,
+    siteUrl,
+    items: details.items,
+    partnerCompanyName: details.partnerCompanyName,
+    partnerUserName: details.partnerUserName,
+    partnerUserEmail: details.partnerUserEmail,
+    taxRate: details.taxRate,
+    oneTimeNet: details.oneTimeNet,
+    monthlyNet: details.monthlyNet,
+  })
+}
 
-  const html = `
-    <div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
-      <h2 style="color: #0f172a; margin-bottom: 16px;">Statusänderung</h2>
-      <p style="color: #475569; font-size: 16px; line-height: 1.5;">Hallo,</p>
-      <p style="color: #475569; font-size: 16px; line-height: 1.5;">der Status deiner Anfrage <strong>${orderNumber}</strong> wurde aktualisiert.</p>
-      <div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 16px; margin: 24px 0;">
-        <table style="width: 100%; border-collapse: collapse; font-size: 14px; color: #475569;">
-          <tr>
-            <td style="padding: 4px 0; font-weight: bold; width: 140px;">Nummer:</td>
-            <td style="padding: 4px 0;">${orderNumber}</td>
-          </tr>
-          <tr>
-            <td style="padding: 4px 0; font-weight: bold;">Vorher:</td>
-            <td style="padding: 4px 0; text-decoration: line-through; color: #94a3b8;">${oldLabel}</td>
-          </tr>
-          <tr>
-            <td style="padding: 4px 0; font-weight: bold;">Aktuell:</td>
-            <td style="padding: 4px 0; font-weight: bold; color: #3b82f6;">${newLabel}</td>
-          </tr>
-        </table>
-      </div>
-      <p style="color: #475569; font-size: 16px; line-height: 1.5;">Viele Grüße,<br>Dein CASPOS Team</p>
-    </div>
-  `
-
-  return { text, html }
+export function getStatusEmailTemplate(
+  orderNumber: string,
+  _oldLabel: string,
+  _newLabel: string,
+  statusKey?: string,
+  rejectionReason?: string,
+  extraDetails?: {
+    customerCompanyName?: string
+    formattedDate?: string
+    billingModel?: string
+    items?: any[]
+    partnerCompanyName?: string
+    partnerUserName?: string
+    partnerUserEmail?: string
+    taxRate?: number
+    oneTimeNet?: number
+    monthlyNet?: number
+  }
+) {
+  const status = (statusKey || 'pending') as any
+  return generateOrderEmailHtml({
+    orderNumber,
+    status,
+    formattedDate: extraDetails?.formattedDate || new Date().toLocaleDateString('de-DE'),
+    customerCompanyName: extraDetails?.customerCompanyName || 'Endkunde',
+    billingModel: extraDetails?.billingModel,
+    rejectionReason,
+    items: extraDetails?.items,
+    partnerCompanyName: extraDetails?.partnerCompanyName,
+    partnerUserName: extraDetails?.partnerUserName,
+    partnerUserEmail: extraDetails?.partnerUserEmail,
+    taxRate: extraDetails?.taxRate,
+    oneTimeNet: extraDetails?.oneTimeNet,
+    monthlyNet: extraDetails?.monthlyNet,
+  })
 }
 
 export function buildEmailItemsSection(items: any[]) {
@@ -156,14 +452,14 @@ export function buildEmailItemsSection(items: any[]) {
     `
 
     devItems.forEach((item: any) => {
-      itemsDetailsText += `\n  * ${item.product_name} (${item.category_name}): ${item.base_price.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} ${item.billing_interval === 'one_time' ? 'einmalig' : 'mtl.'}`
+      itemsDetailsText += `\n  * ${item.product_name} (${item.category_name}): ${Number(item.base_price || 0).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} ${item.billing_interval === 'one_time' ? 'einmalig' : 'mtl.'}`
       itemsDetailsHtml += `
         <tr>
           <td style="padding: 6px 8px; font-size: 13px; color: #334155; font-weight: 500;">
             ${item.product_name} <span style="font-size: 11px; color: #64748b;">(${item.category_name})</span>
           </td>
           <td style="padding: 6px 8px; text-align: right; font-size: 13px; font-weight: bold; color: #0f172a;">
-            ${item.base_price.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} ${item.billing_interval === 'one_time' ? 'einmalig' : 'mtl.'}
+            ${Number(item.base_price || 0).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} ${item.billing_interval === 'one_time' ? 'einmalig' : 'mtl.'}
           </td>
         </tr>
       `
@@ -171,14 +467,14 @@ export function buildEmailItemsSection(items: any[]) {
       item.selected_modules?.forEach((mod: any) => {
         const qty = mod.quantity || 1
         const price = mod.total_price ?? (mod.price * qty)
-        itemsDetailsText += `\n    + ${mod.module_name} ${qty > 1 ? `(x${qty})` : ''}: +${price.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} mtl.`
+        itemsDetailsText += `\n    + ${mod.module_name} ${qty > 1 ? `(x${qty})` : ''}: +${Number(price || 0).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} mtl.`
         itemsDetailsHtml += `
           <tr>
             <td style="padding: 4px 8px 4px 20px; color: #64748b; font-size: 12px;">
               + ${mod.module_name} ${qty > 1 ? `<span style="font-size: 10px; font-weight: 600;">(x${qty})</span>` : ''}
             </td>
             <td style="padding: 4px 8px; text-align: right; color: #64748b; font-size: 12px;">
-              +${price.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} mtl.
+              +${Number(price || 0).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} mtl.
             </td>
           </tr>
         `
@@ -191,4 +487,3 @@ export function buildEmailItemsSection(items: any[]) {
     html: itemsDetailsHtml
   }
 }
-

shop/lib/actions/orders.ts

@@ -12,7 +12,13 @@ import { buildCustomerSnapshot, buildOrderSnapshot } from '@/lib/license-transfo
 import type { Category, EndCustomer, Order, Product, Profile, WizardSelections } from '@/lib/types'
 import { getProducts, getCategories } from '@/lib/actions/products'
 import { validateWizardSelections } from '@/lib/actions/validation'
-import { getOrderEmailTemplate, getStatusEmailTemplate, buildEmailItemsSection } from '@/lib/actions/email-templates'
+import {
+  generateOrderEmailHtml,
+  generateOrderEmailSubject,
+  getOrderEmailTemplate,
+  getStatusEmailTemplate,
+  buildEmailItemsSection,
+} from '@/lib/actions/email-templates'
 
 // ─── Hilfsfunktionen ─────────────────────────────────────────────────────────
 
@@ -301,24 +307,25 @@ export async function submitOrder(params: {
           `
         }
 
-        const itemsSection = buildEmailItemsSection(items)
-
-        const emailTemplate = getOrderEmailTemplate({
+        const emailTemplate = generateOrderEmailHtml({
           orderNumber,
+          status: 'pending',
           formattedDate,
           customerCompanyName: customerSnapshot.company_name,
-          totalDetailsText,
-          totalDetailsHtml,
-          itemsDetailsText: itemsSection.text,
-          itemsDetailsHtml: itemsSection.html,
+          items,
           partnerCompanyName,
           partnerUserName,
-          partnerUserEmail
-        }, `${process.env.NEXT_PUBLIC_SITE_URL || 'https://staging.hephex.de'}`, false)
+          partnerUserEmail,
+          taxRate,
+          oneTimeNet,
+          monthlyNet,
+        })
+
+        const mailSubject = generateOrderEmailSubject(orderNumber, 'pending')
 
         await sendMail({
           to: user.email,
-          subject: `Anfragebestätigung ${orderNumber}`,
+          subject: mailSubject,
           text: emailTemplate.text,
           html: emailTemplate.html,
           attachments: [
@@ -343,7 +350,7 @@ export async function submitOrder(params: {
               if (adminEmail !== user.email) {
                 await sendMail({
                   to: adminEmail,
-                  subject: `[Admin-Kopie] Anfragebestätigung ${orderNumber}`,
+                  subject: `[Admin-Kopie] ${mailSubject}`,
                   text: emailTemplate.text,
                   html: emailTemplate.html,
                   attachments: [
@@ -455,24 +462,27 @@ export async function updateOrderStatus(
 
       if (!userError && user && user.email) {
         const orderNumber = order.order_number || order.id.slice(0, 8)
-        const statusLabelMap: Record<string, string> = {
-          pending: 'Eingegangen',
-          pending_approval: 'Wartet auf Freigabe',
-          in_review: 'In Prüfung',
-          approved: 'Freigegeben',
-          active: 'Aktiviert',
-          completed: 'Abgeschlossen',
-          cancelled: 'Storniert',
-          rejected: 'Abgelehnt',
-        }
-        const oldLabel = statusLabelMap[oldStatus] || oldStatus
-        const newLabel = statusLabelMap[newStatus] || newStatus
+        const customerSnapshot = updatedOrder.customer_data || {}
+        const orderSnapshot = updatedOrder.order_data || {}
+        const formattedDate = new Date(updatedOrder.created_at || Date.now()).toLocaleDateString('de-DE')
 
-        const statusEmail = getStatusEmailTemplate(orderNumber, oldLabel, newLabel)
+        const statusEmail = generateOrderEmailHtml({
+          orderNumber,
+          status: newStatus,
+          formattedDate,
+          customerCompanyName: customerSnapshot.company_name || 'Endkunde',
+          items: orderSnapshot.items || [],
+          partnerCompanyName: partnerInfo.partnerCompanyName,
+          partnerUserName: partnerInfo.partnerUserName,
+          partnerUserEmail: partnerInfo.partnerUserEmail,
+          taxRate: orderSnapshot.tax_rate ?? 19,
+        })
+
+        const mailSubject = generateOrderEmailSubject(orderNumber, newStatus)
 
         const mailOptions: any = {
           to: user.email,
-          subject: `Statusänderung Ihrer Anfrage ${orderNumber}`,
+          subject: mailSubject,
           text: statusEmail.text,
           html: statusEmail.html,
         }
@@ -504,7 +514,7 @@ export async function updateOrderStatus(
                 await sendMail({
                   ...mailOptions,
                   to: adminEmail,
-                  subject: `[Admin-Kopie] Statusänderung Ihrer Anfrage ${orderNumber}`
+                  subject: `[Admin-Kopie] ${mailSubject}`
                 })
               }
             }
@@ -642,11 +652,29 @@ export async function rejectOrder(
       const { data: { user: orderUser }, error: userError } = await admin.auth.admin.getUserById(order.user_id)
       if (!userError && orderUser && orderUser.email) {
         const orderNumber = order.order_number || order.id.slice(0, 8)
-        const statusEmail = getStatusEmailTemplate(orderNumber, 'Wartet auf Freigabe', `Abgelehnt (Grund: ${reason})`)
+        const partnerInfo = await fetchOrderPartnerInfo(admin, updatedOrder.company_id, updatedOrder.user_id)
+        const customerSnapshot = updatedOrder.customer_data || {}
+        const orderSnapshot = updatedOrder.order_data || {}
+        const formattedDate = new Date(updatedOrder.created_at || Date.now()).toLocaleDateString('de-DE')
+
+        const statusEmail = generateOrderEmailHtml({
+          orderNumber,
+          status: 'rejected',
+          formattedDate,
+          customerCompanyName: customerSnapshot.company_name || 'Endkunde',
+          rejectionReason: reason,
+          items: orderSnapshot.items || [],
+          partnerCompanyName: partnerInfo.partnerCompanyName,
+          partnerUserName: partnerInfo.partnerUserName,
+          partnerUserEmail: partnerInfo.partnerUserEmail,
+          taxRate: orderSnapshot.tax_rate ?? 19,
+        })
+
+        const mailSubject = generateOrderEmailSubject(orderNumber, 'rejected')
         
         await sendMail({
           to: orderUser.email,
-          subject: `Anfrage abgelehnt: ${orderNumber}`,
+          subject: mailSubject,
           text: statusEmail.text,
           html: statusEmail.html
         })
@@ -664,7 +692,7 @@ export async function rejectOrder(
               if (adminEmail !== orderUser.email) {
                 await sendMail({
                   to: adminEmail,
-                  subject: `[Admin-Kopie] Anfrage abgelehnt: ${orderNumber}`,
+                  subject: `[Admin-Kopie] ${mailSubject}`,
                   text: statusEmail.text,
                   html: statusEmail.html
                 })
@@ -672,7 +700,7 @@ export async function rejectOrder(
             }
           }
         } catch (adminMailError) {
-          console.error('Failed to notify admins of order rejection:', adminMailError)
+          console.error('Failed to notify admins of rejected order:', adminMailError)
         }
       }
     } catch (mailError) {

shop/lib/constants/branding.ts

@@ -117,6 +117,24 @@ export const PRESET_COLOR_SCHEMES: ColorPreset[] = [
     buttonBg: '#2563eb',
     ringColor: '#38bdf8',
   },
+  {
+    id: 'caspos_classic_blue',
+    name: 'CASPOS Classic Blue',
+    description: 'Das originale CASPOS-Blau – vertraut & clean',
+    primary: '#3b82f6',
+    accent: '#60a5fa',
+    success: '#10b981',
+    warning: '#f59e0b',
+    destructive: '#ef4444',
+    bgGlow1: '#3b82f6',
+    bgGlow2: '#1d4ed8',
+    gradientFrom: '#3b82f6',
+    gradientTo: '#2563eb',
+    cardBorder: 'rgba(96, 165, 250, 0.35)',
+    textHighlight: '#bfdbfe',
+    buttonBg: '#3b82f6',
+    ringColor: '#60a5fa',
+  },
   {
     id: 'emerald_green',
     name: 'Emerald Green',