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