feat(email): implement professional responsive b2b html email template

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/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,20 +293,18 @@ export async function POST(request: Request) {
             `;
           }
 
-          const itemsSection = buildEmailItemsSection(items);
-
-          const { data: brandData } = await supabase.from('settings').select('primary_color').eq('id', 'branding').maybeSingle();
-          const primaryColor = brandData?.primary_color || '#2563eb';
-
-          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, primaryColor);
+            items,
+            taxRate,
+            oneTimeNet,
+            monthlyNet,
+          });
+
+          const mailSubject = generateOrderEmailSubject(order.order_number, 'pending');
 
           const { data: bufferData, error: downloadError } = await supabase
             .storage
@@ -325,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/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,67 +224,80 @@ export function MyOrdersClient({ orders, error }: MyOrdersClientProps) {
                       </div>
                     </div>
 
-                    {/* Kassen & Produkte Detail-Übersicht (Separate Container-Box je Kasse) */}
+                    {/* Kassen & Produkte Detail-Übersicht (Angelehnt an Kundenliste DeviceCard) */}
                     {items.length > 0 && (
                       <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" />
                           Kassenaufstellung ({items.length} {items.length === 1 ? 'Kasse' : 'Kassen'}):
                         </p>
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                        <div className="space-y-2.5">
                           {items.map((item, idx) => {
-                            const devName = item.device_name || `K${idx + 1}`
+                            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="bg-slate-950/70 border border-slate-800 rounded-xl p-3.5 space-y-2.5 relative overflow-hidden"
+                                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 Container Header: Name + Lizenznummer daneben */}
-                                <div className="flex items-center justify-between gap-2 border-b border-white/5 pb-2">
-                                  <div className="flex items-center gap-2 flex-wrap">
+                                {/* 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>
                                     )}
-                                  </div>
-                                  <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 shrink-0`}>
-                                    {item.billing_interval === 'one_time' ? 'Kauf' : 'Abo'}
-                                  </span>
-                                </div>
 
-                                {/* Inhalt: Hauptprodukt & Module nach Kategorien */}
-                                <div className="space-y-2 text-xs">
-                                  <div className="flex items-center justify-between">
-                                    <span className="font-bold text-white text-sm">{item.product_name}</span>
-                                    {((item as any).price || item.base_price) && (
-                                      <span className="text-slate-300 font-mono">{fmt((item as any).price || item.base_price)}</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>
 
-                                  {modules.length > 0 && (
-                                    <div className="pt-2 border-t border-white/5 space-y-1.5">
-                                      <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider block">
-                                        Enthaltene Zusatzmodule:
-                                      </span>
-                                      <div className="flex flex-wrap gap-1.5">
-                                        {modules.map((mod: any, mIdx: number) => (
-                                          <span key={mIdx} className="text-[11px] bg-slate-900 text-slate-200 px-2 py-1 rounded-md border border-white/10 flex items-center gap-1">
-                                            <span className="text-primary font-bold">+</span> {mod.module_name || mod.name}
-                                            {mod.quantity > 1 ? <span className="text-slate-400 font-mono ml-0.5">({mod.quantity}x)</span> : ''}
-                                          </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>
+
+                                {/* 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>
                             )
                           })}

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;
@@ -25,9 +27,10 @@ export function HeaderWrapper({ navbar, children }: HeaderWrapperProps) {
       <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>
 

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/customer-accordion-list.tsx

@@ -1,6 +1,6 @@
 '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'
@@ -17,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'
@@ -188,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) => ({
@@ -196,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 (
@@ -225,151 +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)}
-                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"
+            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>
+                    <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>
                     </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>
+                  <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)]"
+                    {!customer.is_anonymized && (
+                      <>
+                        <Link
+                          href={`/order?customer_id=${customer.id}`}
+                          onClick={(e) => e.stopPropagation()}
                         >
-                          <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"
+                          <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()}
                         >
-                          <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
+                            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>
-                </div>
-              </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>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="text-slate-400 hover:text-white p-1"
+                    >
+                      {isOpen ? (
+                        <ChevronUp className="w-5 h-5" />
                       ) : (
-                        <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>
+                        <ChevronDown className="w-5 h-5" />
                       )}
-                    </div>
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </Card>
-          )
-        })}
-      </div>
+                    </Button>
+                  </div>
+                </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,7 +113,7 @@ export const InvoicePDF = ({
   const items = orderSnapshot?.items ?? [];
   const taxRate = orderSnapshot?.tax_rate ?? 19;
   const isSubscription = order?.type === 'subscription' || orderSnapshot?.billing_cycle === 'monthly';
-  const formattedOrderNumber = (order.order_number || order.id || '').replace(/^BE-/, 'AE-');
+  const formattedOrderNumber = stripEmojis((order.order_number || order.id || '').replace(/^BE-/, 'AE-'));
   const isUpgrade = !!orderSnapshot?.last_license_date;
 
   let oneTimeNet = 0;
@@ -136,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>
@@ -170,11 +178,11 @@ export const InvoicePDF = ({
         <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%' }}>
@@ -205,8 +213,8 @@ export const InvoicePDF = ({
               {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.'}
@@ -218,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";
@@ -227,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'
@@ -940,11 +940,11 @@ 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-3 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-2 shrink-0">
                 Kategorien
               </h3>
-              <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-1.5 flex-1 min-h-0 overflow-y-auto pr-1 pb-2 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
@@ -956,7 +956,7 @@ export function OrderWizard({
                     <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 ${
+                      className={`flex items-center gap-2 p-2 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
@@ -968,7 +968,7 @@ export function OrderWizard({
                         <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
                       )}
 
-                      <div className={`p-1.5 rounded-lg transition-colors ${
+                      <div className={`p-1.5 rounded-lg transition-colors shrink-0 ${
                         isMissingRequired
                           ? 'bg-red-500/20 text-red-400'
                           : isActive
@@ -991,11 +991,11 @@ export function OrderWizard({
                       </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-2 py-0.5 rounded-full font-extrabold shrink-0 border border-red-500 text-red-400 bg-red-500/20 animate-pulse tracking-wider">
+                        <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}
@@ -1079,7 +1079,7 @@ export function OrderWizard({
                   {/* 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>
+                      <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>

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

@@ -40,9 +40,6 @@ export function StepBilling({
   const isOneTime = selectedBillingInterval === 'one_time'
   const isMonthly = selectedBillingInterval === 'monthly'
 
-  // Wenn Kauf gewählt ist, muss ein gültiges Datum vorliegen
-  const isNextDisabled = isOneTime && !lastLicenseDate
-
   return (
     <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) ─── */}
@@ -163,7 +160,7 @@ export function StepBilling({
                         <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 (Stichtag)
+                            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%).
@@ -229,8 +226,7 @@ export function StepBilling({
         {/* Next Button */}
         <Button
           onClick={nextStep}
-          disabled={isNextDisabled}
-          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 disabled:opacity-50"
+          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>

shop/components/wizard/step-software.tsx

@@ -73,19 +73,19 @@ 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 overflow-hidden">
-      {/* ─── FIXED CARD HEADER ─── */}
-      <CardHeader className="border-b border-white/10 pb-3 pt-4 px-5 shrink-0 bg-slate-950/40">
+    <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-2 rounded-xl bg-primary/20 text-primary border border-primary/30">
+            <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-base font-bold text-white">
+              <CardTitle className="text-sm font-bold text-white leading-tight">
                 {currentCategory.name}
               </CardTitle>
-              <CardDescription className="text-xs text-slate-400 mt-0.5">
+              <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>
@@ -93,17 +93,17 @@ export function StepSoftware({
 
           {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-3 py-1 rounded-lg animate-pulse shrink-0">
-                ✏️ Bearbeite Kasse: &quot;{editingDeviceName}&quot;
+              <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-7 text-xs text-slate-400 hover:text-white hover:bg-white/10 px-2"
+                  className="h-6 text-[11px] text-slate-400 hover:text-white hover:bg-white/10 px-2"
                 >
-                  <X className="w-3.5 h-3.5 mr-1" /> Neuer Entwurf
+                  <X className="w-3 h-3 mr-1" /> Neuer Entwurf
                 </Button>
               )}
             </div>
@@ -111,8 +111,8 @@ export function StepSoftware({
         </div>
       </CardHeader>
 
-      {/* ─── CONTENT AREA (Inherits scrolling from parent, no nested double scrollbar) ─── */}
-      <CardContent className="p-5 space-y-5">
+      {/* ─── 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}
@@ -120,49 +120,49 @@ export function StepSoftware({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -10 }}
             transition={{ duration: 0.2 }}
-            className="space-y-5"
+            className="space-y-4 min-w-0"
           >
             {/* 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.5 rounded-xl border transition-all ${
+                <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-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${
+                  <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-4 h-4" />
+                    <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.5 rounded-full font-extrabold animate-pulse tracking-wider">
+                        <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-[11px] mt-0.5">
+                    <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-xs rounded-full shrink-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-xs rounded-full shrink-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" /> Ausgewählt
                     </Badge>
                   ) : currentCategory.is_required ? (
-                    <Badge variant="destructive" className="ml-auto opacity-90 text-xs rounded-full bg-red-500/30 text-red-400 border border-red-500/50 animate-pulse font-extrabold shrink-0">
+                    <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-xs rounded-full bg-white/5 shrink-0">
+                    <Badge variant="outline" className="ml-auto border-white/10 text-slate-400 text-[11px] rounded-full bg-white/5 shrink-0">
                       Optional
                     </Badge>
                   )}
@@ -170,53 +170,57 @@ export function StepSoftware({
               )
             })()}
 
-            {/* Products List */}
+            {/* Products List (grid-cols-1 xl:grid-cols-2 gap-3) */}
             {catProducts.length === 0 ? (
               <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-2.5">
+              <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-3.5 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.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.5">
-                            <Checkbox
-                              checked={isChecked}
-                              disabled={disabled}
-                              onCheckedChange={() => { }}
-                              className="border-white/20 data-[state=checked]:bg-primary rounded"
-                            />
-                            <span className="font-bold text-xs text-white">{product.name}</span>
-                            <span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
-                              {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
+                        <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-xs">
-                            {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-[11px] text-slate-400 mt-1.5 pl-6 font-normal leading-relaxed">{product.description}</span>
-                        )}
                         {product.modules && product.modules.length > 0 && (
-                          <span className="text-[10px] text-slate-500 mt-1 pl-6 font-normal">
+                          <span className="text-[10px] text-slate-500 mt-2 font-normal block">
                             {product.modules.length} optionale Module verfügbar
                           </span>
                         )}
@@ -229,13 +233,13 @@ export function StepSoftware({
               <RadioGroup
                 value={sel?.productId ?? ''}
                 onValueChange={id => selectProduct(currentCategory.id, id)}
-                className="grid gap-2.5"
+                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}`}
@@ -244,33 +248,35 @@ export function StepSoftware({
                       />
                       <Label
                         htmlFor={disabled ? undefined : `${currentCategory.id}-${product.id}`}
-                        className={`flex flex-col items-start p-3.5 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.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.5">
-                            <span className="font-bold text-xs text-white">{product.name}</span>
-                            <span className={`text-[9px] px-1.5 py-0.5 rounded border ${billingBadgeClass(product.billing_interval)} font-medium`}>
-                              {product.billing_interval === 'one_time' ? 'Einmalig' : 'Abo'}
+                        <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-xs">
-                            {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-[11px] text-slate-400 mt-1.5 font-normal leading-relaxed">{product.description}</span>
-                        )}
                         {product.modules && product.modules.length > 0 && (
-                          <span className="text-[10px] text-slate-500 mt-1 font-normal">
+                          <span className="text-[10px] text-slate-500 mt-2 font-normal block">
                             {product.modules.length} optionale Module verfügbar
                           </span>
                         )}
@@ -283,12 +289,12 @@ export function StepSoftware({
 
             {/* Modules Section */}
             {selectedProduct?.modules && selectedProduct.modules.length > 0 && (
-              <div className="mt-5 p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3.5">
+              <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">
+                <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 ?? [])
@@ -297,7 +303,7 @@ export function StepSoftware({
                       <div
                         key={module.id}
                         title={isExistingLicense ? "Dieses Modul ist auf dieser Kasse bereits aktiv und dauerhaft lizenziert." : undefined}
-                        className={`flex flex-col p-3.5 rounded-xl border transition-all duration-200 ${
+                        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
@@ -307,30 +313,30 @@ export function StepSoftware({
                                 : '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 mt-0.5"
+                            className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5 shrink-0"
                           />
                           <div className="flex-1 min-w-0">
                             <Label
                               htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
-                              className={`font-semibold text-xs 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-xs ml-2 shrink-0">
+                              <span className="text-primary font-bold text-xs shrink-0 text-right">
                                 {isExistingLicense ? (
                                   <span className="text-slate-500 text-[11px] font-normal">inkl.</span>
                                 ) : (
@@ -342,7 +348,7 @@ export function StepSoftware({
                               </span>
                             </Label>
                             {module.description && (
-                              <p className="text-[11px] 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 font-medium flex items-center gap-1">
@@ -359,8 +365,8 @@ export function StepSoftware({
 
                         {/* Scalable Quantity */}
                         {checked && !isExistingLicense && module.has_quantity && (
-                          <div className="flex items-center gap-3 mt-3 pl-7 pt-2.5 border-t border-white/5">
-                            <Label htmlFor={`qty-${module.id}`} className="text-[11px] text-slate-400 font-medium">Menge:</Label>
+                          <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"
@@ -371,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-7 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-[11px] text-slate-400">
+                            <span className="text-[10px] text-slate-400 truncate">
                               Gesamt:{' '}
                               <span className="text-primary font-bold">
                                 {new Intl.NumberFormat('de-DE', {
@@ -404,7 +410,7 @@ export function StepSoftware({
             )}
           </motion.div>
         </AnimatePresence>
-      </CardContent>
+      </div>
     </Card>
   )
 }

shop/components/wizard/step-summary.tsx

@@ -93,6 +93,7 @@ export function StepSummary({
 }: StepSummaryProps) {
   const [confirmDeleteIdx, setConfirmDeleteIdx] = useState<number | null>(null)
   const [acceptedTerms, setAcceptedTerms] = useState(false)
+  const [showConfirmModal, setShowConfirmModal] = useState(false)
 
   const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
 
@@ -442,29 +443,6 @@ export function StepSummary({
                 className="w-full p-3 rounded-xl bg-slate-950/70 border border-white/10 text-xs text-white placeholder:text-slate-500 focus:border-primary focus:outline-none transition-colors resize-none scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent"
               />
             </div>
-
-            {/* Lizenzbestimmungen & B2B-Workflow Checkbox */}
-            <div className="p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3">
-              <div className="flex items-start gap-3">
-                <Checkbox
-                  id="terms-checkbox"
-                  checked={acceptedTerms}
-                  onCheckedChange={(checked) => setAcceptedTerms(checked === true)}
-                  className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5"
-                />
-                <Label htmlFor="terms-checkbox" className="text-xs text-slate-300 leading-relaxed cursor-pointer select-none">
-                  Ich bestätige die Richtigkeit der Angaben und akzeptiere die Lizenzvereinbarungen sowie die{' '}
-                  <a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-white text-primary">
-                    Datenschutzerklärung
-                  </a>.
-                </Label>
-              </div>
-
-              <div className="p-2.5 rounded-xl bg-primary/10 border border-primary/20 text-[11px] text-slate-300 flex items-center gap-2">
-                <FileText className="w-4 h-4 text-primary shrink-0" />
-                <span>B2B-Freigabe: Nach Absenden wird die Lizenzierungsanfrage geprüft und freigegeben.</span>
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -490,10 +468,10 @@ export function StepSummary({
           </span>
         </div>
 
-        {/* Submit Button */}
+        {/* Submit Button -> opens modal */}
         <Button
-          onClick={handleSubmit}
-          disabled={isSubmitting || !acceptedTerms || finalItemsToShow.length === 0}
+          onClick={() => setShowConfirmModal(true)}
+          disabled={isSubmitting || finalItemsToShow.length === 0}
           className="w-full sm:w-auto bg-primary hover:bg-primary/90 text-white font-bold px-6 shadow-lg shadow-primary/20 h-9 text-xs gap-2"
         >
           {isSubmitting ? (
@@ -509,6 +487,104 @@ export function StepSummary({
           )}
         </Button>
       </div>
+
+      {/* ─── 4. BESTÄTIGUNGS-POPUP / MODAL VOR DEM ABSENDEN ─── */}
+      {showConfirmModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm animate-in fade-in duration-200">
+          <div className="w-full max-w-lg bg-slate-900 border border-white/10 rounded-2xl shadow-2xl p-6 space-y-5 text-white">
+            <div className="flex items-start justify-between gap-3">
+              <div className="flex items-center gap-3">
+                <div className="p-2.5 rounded-xl bg-primary/20 text-primary border border-primary/30">
+                  <ShieldCheck className="w-6 h-6" />
+                </div>
+                <div>
+                  <h3 className="text-base font-bold text-white">Richtigkeit & Freigabe bestätigen</h3>
+                  <p className="text-xs text-slate-400 mt-0.5">Letzter Schritt vor Übermittlung der Lizenzierung</p>
+                </div>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowConfirmModal(false)}
+                disabled={isSubmitting}
+                className="h-8 w-8 p-0 text-slate-400 hover:text-white rounded-lg"
+              >
+                <X className="w-4 h-4" />
+              </Button>
+            </div>
+
+            <div className="space-y-3 text-xs text-slate-300">
+              <div className="p-3.5 rounded-xl bg-white/5 border border-white/10 space-y-2">
+                <div className="flex justify-between items-center text-white font-semibold">
+                  <span>Endkunde:</span>
+                  <span className="text-primary">{selectedEndCustomer?.company_name || 'Kein Kunde gewählt'}</span>
+                </div>
+                <div className="flex justify-between items-center text-slate-400">
+                  <span>Anzahl Geräte:</span>
+                  <span className="text-white font-medium">{finalItemsToShow.length} Kassen</span>
+                </div>
+                <div className="flex justify-between items-center text-slate-400">
+                  <span>Gesamtbetrag (brutto):</span>
+                  <span className="text-white font-bold">{oneTimeTotal > 0 ? fmt(oneTimeGross) : `${fmt(monthlyGross)} / mtl.`}</span>
+                </div>
+              </div>
+
+              <div className="p-3.5 rounded-xl bg-slate-950/80 border border-white/10 space-y-3">
+                <div className="flex items-start gap-3">
+                  <Checkbox
+                    id="modal-terms-checkbox"
+                    checked={acceptedTerms}
+                    onCheckedChange={(checked) => setAcceptedTerms(checked === true)}
+                    className="rounded border-white/20 data-[state=checked]:bg-primary mt-0.5"
+                  />
+                  <Label htmlFor="modal-terms-checkbox" className="text-xs text-slate-300 leading-relaxed cursor-pointer select-none">
+                    Ich bestätige die Richtigkeit aller gemachten Angaben und akzeptiere die Lizenzvereinbarungen sowie die{' '}
+                    <a href="/datenschutz" target="_blank" rel="noopener noreferrer" className="underline hover:text-white text-primary">
+                      Datenschutzerklärung
+                    </a>.
+                  </Label>
+                </div>
+
+                <div className="p-2.5 rounded-lg bg-primary/10 border border-primary/20 text-[11px] text-slate-300 flex items-center gap-2">
+                  <FileText className="w-4 h-4 text-primary shrink-0" />
+                  <span>B2B-Freigabe: Nach Absenden wird die Lizenzierungsanfrage geprüft und freigegeben.</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-end gap-3 pt-2 border-t border-white/10">
+              <Button
+                variant="outline"
+                onClick={() => setShowConfirmModal(false)}
+                disabled={isSubmitting}
+                className="border-white/10 text-white hover:bg-white/10 text-xs h-9 px-4"
+              >
+                Abbrechen & Zurück
+              </Button>
+              <Button
+                onClick={async () => {
+                  await handleSubmit()
+                  setShowConfirmModal(false)
+                }}
+                disabled={!acceptedTerms || isSubmitting}
+                className="bg-primary hover:bg-primary/90 text-white font-bold text-xs h-9 px-5 gap-2 shadow-md shadow-primary/20"
+              >
+                {isSubmitting ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    Wird übermittelt...
+                  </>
+                ) : (
+                  <>
+                    <Check className="w-4 h-4" />
+                    Jetzt verbindlich absenden
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
     </Card>
   )
 }

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) */
@@ -199,7 +199,7 @@ async function send2FACodeInternal(userId: string, deviceHash: string, email: st
   // 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),
   })

shop/lib/actions/email-templates.ts

@@ -1,195 +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,
-  primaryColor: string = '#2563eb'
-) {
-  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: ${primaryColor}; 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: ${primaryColor}; 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 }
 }
 
+// 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,
+  })
+}
+
 export function getStatusEmailTemplate(
   orderNumber: string,
-  oldLabel: string,
-  newLabel: string,
+  _oldLabel: string,
+  _newLabel: string,
   statusKey?: string,
-  rejectionReason?: string
-) {
-  const formattedOrderNumber = orderNumber.replace(/^BE-/, 'AE-')
-  
-  let title = 'Statusänderung'
-  let intro = `der Status deiner Anfrage <strong>#${formattedOrderNumber}</strong> wurde aktualisiert.`
-  let statusColor = '#f59e0b' // Amber default
-  let showAttachmentBadge = false
-
-  if (statusKey === 'approved' || statusKey === 'active' || statusKey === 'completed') {
-    title = 'Freigabebestätigung'
-    intro = `Ihre Anfrage <strong>#${formattedOrderNumber}</strong> wurde erfolgreich freigegeben und ist nun aktiv. Die unterzeichnete Anfragebestätigung finden Sie im Anhang dieses Schreibens.`
-    statusColor = '#10b981' // Emerald
-    showAttachmentBadge = true
-  } else if (statusKey === 'rejected') {
-    title = 'Anfrage abgelehnt'
-    intro = `Ihre Anfrage <strong>#${formattedOrderNumber}</strong> wurde vom Support geprüft und abgelehnt.`
-    statusColor = '#ef4444' // Red
-  } else if (statusKey === 'pending_approval' || statusKey === 'in_review' || statusKey === 'pending') {
-    title = 'Eingangsbestätigung'
-    intro = `Ihre Anfrage <strong>#${formattedOrderNumber}</strong> ist eingegangen und wird derzeit von unserem Support geprüft.`
-    statusColor = '#f59e0b'
+  rejectionReason?: string,
+  extraDetails?: {
+    customerCompanyName?: string
+    formattedDate?: string
+    billingModel?: string
+    items?: any[]
+    partnerCompanyName?: string
+    partnerUserName?: string
+    partnerUserEmail?: string
+    taxRate?: number
+    oneTimeNet?: number
+    monthlyNet?: number
   }
-
-  const text = `Hallo,\n\n${title}\n\n${intro.replace(/<[^>]*>/g, '')}\n\nStatus: ${newLabel} (vorher: ${oldLabel})\n${rejectionReason ? `Grund: ${rejectionReason}\n` : ''}\nViele Grüße,\nDein CASPOS Team`
-
-  const reasonSection = rejectionReason
-    ? `
-      <div style="margin-top: 20px; padding: 12px 16px; background-color: rgba(239, 68, 68, 0.1); border-left: 4px solid #ef4444; border-radius: 4px;">
-        <p style="margin: 0; font-size: 11px; color: #ef4444; font-weight: bold; text-transform: uppercase; tracking-spacing: 0.05em;">Begründung:</p>
-        <p style="margin: 4px 0 0 0; font-size: 14px; color: #f8fafc; font-style: italic;">"${rejectionReason}"</p>
-      </div>
-    `
-    : ''
-
-  const footerActions = showAttachmentBadge
-    ? `
-      <p style="text-align: center; margin: 32px 0 0 0;">
-        <span style="display: inline-block; background-color: #1e293b; border: 1px solid #334155; border-radius: 6px; padding: 10px 20px; color: #3b82f6; font-size: 13px; font-weight: bold; letter-spacing: 0.025em;">
-          📎 PDF im Anhang verfügbar
-        </span>
-      </p>
-    `
-    : ''
-
-  const html = `
-    <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 32px; border: 1px solid #1e293b; border-radius: 12px; background-color: #0b0f19; color: #f8fafc;">
-      <div style="text-align: center; margin-bottom: 32px;">
-        <h1 style="color: #3b82f6; font-size: 26px; margin: 0; font-weight: 900; letter-spacing: -0.025em; text-transform: uppercase;">CASPOS</h1>
-        <p style="color: #64748b; font-size: 10px; margin: 2px 0 0 0; text-transform: uppercase; letter-spacing: 0.2em; font-weight: bold;">Die Kasse</p>
-      </div>
-      
-      <div style="background-color: #111827; border: 1px solid #1e293b; border-radius: 8px; padding: 24px; margin-bottom: 24px;">
-        <h2 style="color: #ffffff; font-size: 18px; margin-top: 0; margin-bottom: 12px; font-weight: 700;">${title}</h2>
-        <p style="color: #cbd5e1; font-size: 14px; line-height: 1.6; margin-top: 0;">Hallo,</p>
-        <p style="color: #cbd5e1; font-size: 14px; line-height: 1.6;">${intro}</p>
-        
-        <table style="width: 100%; border-collapse: collapse; font-size: 13px; color: #cbd5e1; margin-top: 20px;">
-          <tr>
-            <td style="padding: 8px 0; border-bottom: 1px solid #1e293b; color: #64748b; width: 140px; font-weight: 600; text-transform: uppercase; font-size: 11px;">Anfragenummer:</td>
-            <td style="padding: 8px 0; border-bottom: 1px solid #1e293b; font-family: monospace; font-weight: bold; color: #3b82f6; font-size: 14px;">#${formattedOrderNumber}</td>
-          </tr>
-          <tr>
-            <td style="padding: 8px 0; border-bottom: 1px solid #1e293b; color: #64748b; font-weight: 600; text-transform: uppercase; font-size: 11px;">Vorher:</td>
-            <td style="padding: 8px 0; border-bottom: 1px solid #1e293b; text-decoration: line-through; color: #475569;">${oldLabel}</td>
-          </tr>
-          <tr>
-            <td style="padding: 8px 0; border-bottom: 1px solid #1e293b; color: #64748b; font-weight: 600; text-transform: uppercase; font-size: 11px;">Aktuell:</td>
-            <td style="padding: 8px 0; border-bottom: 1px solid #1e293b; font-weight: bold; color: ${statusColor}; font-size: 14px;">${newLabel}</td>
-          </tr>
-        </table>
-        
-        ${reasonSection}
-      </div>
-      
-      ${footerActions}
-      
-      <div style="text-align: center; margin-top: 32px; border-top: 1px solid #1e293b; padding-top: 20px; color: #475569; font-size: 11px; line-height: 1.5;">
-        <p style="margin: 0; font-weight: 600;">CASPOS Computerabrechnungssysteme GmbH · Alte Bundesstraße 16 · 76846 Hauenstein</p>
-        <p style="margin: 4px 0 0 0;">Dies ist eine automatisch generierte Systembenachrichtigung.</p>
-      </div>
-    </div>
-  `
-
-  return { text, html }
+) {
+  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[]) {
@@ -218,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>
       `
@@ -233,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>
         `
@@ -253,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, newStatus)
+        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', 'rejected', 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) {