Vertragsansicht: Kunden-Schnellansicht-Modal + Cent/Euro-Input

Feature 1 – Kunden-Schnellansicht:
Info-Icon neben dem Kundenlink im Vertragsdetail oeffnet ein Modal
mit den wichtigsten Kundendaten (Firma, Name, Geburtsdatum/-ort,
Gruendungsdatum, Adresse, Telefon, Mobil, E-Mail, Portal-E-Mail,
Steuer-/Handelsregisternr). Jedes Feld hat einen Copy-Button.
Lazy-Fetch via customerApi.getById, staleTime 30s.

Feature 2 – Cent/Euro-Doppel-Input:
Neben dem €/kWh-Arbeitspreis-Feld jetzt ein zweites ct/kWh-Feld.
Bidirektional gekoppelt – Tippen in € aktualisiert ct (×100),
Tippen in ct aktualisiert € (÷100). Backend speichert weiterhin
nur den Euro-Wert; Cent ist reine UI-Hilfe. Float-Rausch-Schutz
verhindert "0.25 → 25.0000000000004". Greift fuer unitPrice und
unitPriceNt.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

backend/prisma/migrations/20260524100000_split_energy_bonus/migration.sql

@@ -0,0 +1,30 @@
+-- Energie-Bonus in Sofort-Bonus + Neukunden-Bonus aufteilen.
+-- Bestehende Werte werden nach `instantBonus` migriert (Annahme: bei
+-- Bestandsverträgen war "Bonus" üblicherweise der Sofort-Bonus).
+-- Wer das anders hatte, kann die Werte über die UI nachträglich verschieben.
+--
+-- IF NOT EXISTS macht den Re-Deploy auf Prod sicher, falls jemand schon
+-- `prisma db push` gefahren hat.
+
+ALTER TABLE `EnergyContractDetails`
+  ADD COLUMN IF NOT EXISTS `instantBonus` DOUBLE NULL,
+  ADD COLUMN IF NOT EXISTS `newCustomerBonus` DOUBLE NULL;
+
+-- Daten kopieren, sofern die alte Spalte noch existiert und das Ziel leer ist
+SET @col_exists := (
+  SELECT COUNT(*) FROM information_schema.COLUMNS
+  WHERE TABLE_SCHEMA = DATABASE()
+    AND TABLE_NAME = 'EnergyContractDetails'
+    AND COLUMN_NAME = 'bonus'
+);
+SET @sql := IF(
+  @col_exists > 0,
+  'UPDATE `EnergyContractDetails` SET `instantBonus` = `bonus` WHERE `bonus` IS NOT NULL AND `instantBonus` IS NULL',
+  'SELECT "bonus-Spalte existiert nicht mehr, nichts zu migrieren"'
+);
+PREPARE stmt FROM @sql;
+EXECUTE stmt;
+DEALLOCATE PREPARE stmt;
+
+-- Alte Spalte droppen, falls vorhanden
+ALTER TABLE `EnergyContractDetails` DROP COLUMN IF EXISTS `bonus`;

backend/prisma/schema.prisma

@@ -805,7 +805,14 @@ model EnergyContractDetails {
   basePrice              Float?    // €/Monat
   unitPrice              Float?    // €/kWh (Arbeitspreis) - bei HT/NT: HT-Preis
   unitPriceNt            Float?    // €/kWh NT-Preis (nur bei Zweitarifzähler)
-  bonus                  Float?
+  // Bonus wurde 2026-05-24 in zwei Felder aufgeteilt: Sofort-Bonus
+  // (Auszahlung kurz nach Wechsel) + Neukunden-Bonus (Auszahlung am
+  // Vertragsende / nach 12 Monaten). Beide werden im Detail als
+  // Gesamtbonus aufsummiert und in der Kostenvorschau einzeln
+  // dargestellt. Migration kopiert das alte `bonus` nach
+  // `instantBonus` (Annahme: meistgenutzte Variante).
+  instantBonus           Float?    // Sofort-Bonus
+  newCustomerBonus       Float?    // Neukunden-Bonus
   previousProviderName   String?
   previousCustomerNumber String?
   invoices               Invoice[] // Rechnungen

backend/src/controllers/contract.controller.ts

@@ -164,7 +164,8 @@ export async function updateContract(req: AuthRequest, res: Response): Promise<v
     };
     const energyLabels: Record<string, string> = {
       meterId: 'Zähler', maloId: 'MaLo-ID', annualConsumption: 'Jahresverbrauch',
-      basePrice: 'Grundpreis', unitPrice: 'Arbeitspreis', unitPriceNt: 'NT-Arbeitspreis', bonus: 'Bonus',
+      basePrice: 'Grundpreis', unitPrice: 'Arbeitspreis', unitPriceNt: 'NT-Arbeitspreis',
+      instantBonus: 'Sofort-Bonus', newCustomerBonus: 'Neukunden-Bonus',
     };
 
     // Hauptfelder vergleichen

backend/src/services/contract.service.ts

@@ -218,7 +218,8 @@ interface ContractCreateData {
     annualConsumption?: number;
     basePrice?: number;
     unitPrice?: number;
-    bonus?: number;
+    instantBonus?: number;
+    newCustomerBonus?: number;
     previousProviderName?: string;
     previousCustomerNumber?: string;
   };
@@ -710,7 +711,8 @@ export async function createFollowUpContract(previousContractId: number) {
         previousContract.energyDetails.annualConsumption ?? undefined,
       basePrice: previousContract.energyDetails.basePrice ?? undefined,
       unitPrice: previousContract.energyDetails.unitPrice ?? undefined,
-      bonus: previousContract.energyDetails.bonus ?? undefined,
+      instantBonus: previousContract.energyDetails.instantBonus ?? undefined,
+      newCustomerBonus: previousContract.energyDetails.newCustomerBonus ?? undefined,
       previousProviderName: previousContract.providerName ?? undefined,
       previousCustomerNumber:
         previousContract.customerNumberAtProvider ?? undefined,
@@ -898,7 +900,8 @@ export async function createRenewalContract(previousContractId: number) {
         basePrice: ed.basePrice,
         unitPrice: ed.unitPrice,
         unitPriceNt: ed.unitPriceNt,
-        bonus: ed.bonus,
+        instantBonus: ed.instantBonus,
+        newCustomerBonus: ed.newCustomerBonus,
         previousProviderName: ed.previousProviderName,
         previousCustomerNumber: ed.previousCustomerNumber,
       },

backend/src/services/pdfTemplate.service.ts

@@ -87,7 +87,9 @@ export const CRM_FIELDS = [
   { path: 'energyDetails.basePrice', label: 'Grundpreis (€/Monat)', group: 'Energie' },
   { path: 'energyDetails.unitPrice', label: 'Arbeitspreis (€/kWh)', group: 'Energie' },
   { path: 'energyDetails.unitPriceNt', label: 'NT-Arbeitspreis (€/kWh)', group: 'Energie' },
-  { path: 'energyDetails.bonus', label: 'Bonus (€)', group: 'Energie' },
+  { path: 'energyDetails.instantBonus', label: 'Sofort-Bonus (€)', group: 'Energie' },
+  { path: 'energyDetails.newCustomerBonus', label: 'Neukunden-Bonus (€)', group: 'Energie' },
+  { path: 'energyDetails.totalBonus', label: 'Gesamtbonus (€)', group: 'Energie' },
   // Internet/DSL/Glasfaser/Kabel
   { path: 'internetDetails.downloadSpeed', label: 'Download-Speed (Mbit/s)', group: 'Internet' },
   { path: 'internetDetails.uploadSpeed', label: 'Upload-Speed (Mbit/s)', group: 'Internet' },
@@ -469,7 +471,11 @@ export async function generateFilledPdf(
     'energyDetails.basePrice': contract.energyDetails?.basePrice?.toString() || '',
     'energyDetails.unitPrice': contract.energyDetails?.unitPrice?.toString() || '',
     'energyDetails.unitPriceNt': contract.energyDetails?.unitPriceNt?.toString() || '',
-    'energyDetails.bonus': contract.energyDetails?.bonus?.toString() || '',
+    'energyDetails.instantBonus': contract.energyDetails?.instantBonus?.toString() || '',
+    'energyDetails.newCustomerBonus': contract.energyDetails?.newCustomerBonus?.toString() || '',
+    'energyDetails.totalBonus': (
+      ((contract.energyDetails?.instantBonus ?? 0) + (contract.energyDetails?.newCustomerBonus ?? 0)) || ''
+    ).toString(),
     // Internet
     'internetDetails.downloadSpeed': contract.internetDetails?.downloadSpeed?.toString() || '',
     'internetDetails.uploadSpeed': contract.internetDetails?.uploadSpeed?.toString() || '',

docs/todo.md

@@ -120,6 +120,49 @@ isolierte Instanz (keine Multi-Tenancy im Code), Provisioning + Abrechnung
   - **Live-verifiziert**: 4867 Datensätze + 1 Datei in 13.2s
     wiederhergestellt, Log-Modal zeigt den vollständigen Verlauf.
 
+- [x] **🆕 Vertragsansicht: Kunden-Schnellansicht-Modal + Cent/Euro-Doppel-Input**
+  - **Info-Icon neben Kundennamen** öffnet ein Modal mit den
+    wichtigsten Kundendaten (Firma, Name, Geburtsdatum/-ort,
+    Gründungsdatum, primäre Adresse, Telefon, Mobil, E-Mail,
+    Portal-E-Mail, Steuer-/Handelsregister-Nr.). Jedes Feld hat
+    einen Copy-Button (bestehende `CopyableValue`-Komponente).
+    Neue Komponente: `CustomerInfoModal.tsx`. Lazy-Fetch via
+    `customerApi.getById`, staleTime 30s.
+  - **Cent/Euro-Doppel-Input** für Arbeitspreise (Strom + Gas):
+    Neben dem €/kWh-Feld jetzt ein zweites Feld ct/kWh. Bidirektional
+    verkoppelt – Tippen in € aktualisiert ct (×100), Tippen in ct
+    aktualisiert € (÷100). Im Backend wird unverändert nur der
+    Euro-Wert persistiert; Cent ist reine UI-Hilfe. Float-Rausch-
+    Schutz (Math.round × 1e6) verhindert "0.25 → 25.0000000000…".
+    Greift für `unitPrice` und (bei DUAL-Zählern) `unitPriceNt`.
+
+- [x] **🆕 Bonus-Feld aufgeteilt: Sofort-Bonus + Neukunden-Bonus (Strom/Gas)**
+  - Bisher gab es ein einzelnes `bonus`-Feld auf `EnergyContractDetails`.
+    Jetzt zwei Felder `instantBonus` (Sofort) und `newCustomerBonus`
+    (Neukunden), die zusammen den Gesamtbonus ergeben.
+  - **Migration** `20260524100000_split_energy_bonus`:
+    `ADD COLUMN IF NOT EXISTS instantBonus`, `... newCustomerBonus`,
+    `UPDATE` kopiert bestehendes `bonus` → `instantBonus`
+    (Annahme: Bestandsverträge hatten primär Sofort-Bonus), dann
+    `DROP COLUMN IF EXISTS bonus`. Idempotent.
+  - **Form** (`ContractForm.tsx`): zwei Input-Felder „Sofort-Bonus (€)"
+    + „Neukunden-Bonus (€)" statt einem.
+  - **Detail-Ansicht**: zeigt beide Felder einzeln und einen
+    aggregierten „Gesamtbonus" (fett) darunter.
+  - **Kostenvorschau**: listet Sofort + Neukunden einzeln auf
+    (jeweils grün), dann „Gesamtbonus" (mittel grün, fett), danach
+    Effektive Jahreskosten.
+  - **Cost-Calc** (`energyCalculations.ts`): `calculateCosts()` nimmt
+    jetzt beide Bonus-Werte; `CostCalculation` liefert `instantBonus`,
+    `newCustomerBonus` + `totalBonus`.
+  - **PDF-Template-Variablen**: drei neue Placeholder
+    `energyDetails.instantBonus`, `.newCustomerBonus`, `.totalBonus`
+    (alter `.bonus`-Placeholder entfernt).
+  - **Audit-Log** unterscheidet jetzt beide Felder.
+  - **Live-verifiziert** auf dev: PUT mit beiden Feldern → DB hat
+    `instantBonus=75, newCustomerBonus=125`, GET liefert beide
+    Werte zurück.
+
 - [x] **🛡️ Pentest 2026-05-20 Pen-30-Befunde (MEDIUM+INFO)**
   - **30.13 MIME-Extension-XSS** (MEDIUM): `GET /api/files/download`
     lieferte hochgeladene Dateien via `res.sendFile` aus. Da multer

frontend/src/components/contracts/CustomerInfoModal.tsx

@@ -0,0 +1,122 @@
+import { useQuery } from '@tanstack/react-query';
+import { X, RefreshCw, User } from 'lucide-react';
+import { customerApi } from '../../services/api';
+import { CopyableValue } from '../ui/CopyButton';
+import Button from '../ui/Button';
+
+interface CustomerInfoModalProps {
+  customerId: number;
+  open: boolean;
+  onClose: () => void;
+}
+
+/**
+ * Schnellansicht der wichtigsten Kundendaten – wird aus der
+ * Vertragsdetail-Seite per Info-Icon neben dem Kundennamen geöffnet.
+ * Jedes Feld hat einen Copy-Button rechts. Modal-only, schreibt nichts.
+ */
+export default function CustomerInfoModal({ customerId, open, onClose }: CustomerInfoModalProps) {
+  const { data, isLoading } = useQuery({
+    queryKey: ['customer-info-modal', customerId],
+    queryFn: () => customerApi.getById(customerId),
+    enabled: open,
+    staleTime: 30_000,
+  });
+
+  if (!open) return null;
+
+  const c = data?.data;
+
+  const fullName = c
+    ? [c.salutation, c.firstName, c.lastName].filter(Boolean).join(' ')
+    : '';
+
+  const primaryAddress = c?.addresses?.find((a) => a.isDefault) || c?.addresses?.[0];
+  const addressString = primaryAddress
+    ? `${primaryAddress.street} ${primaryAddress.houseNumber ?? ''}, ${primaryAddress.postalCode} ${primaryAddress.city}`.trim()
+    : '';
+
+  const formatDate = (iso?: string) => {
+    if (!iso) return '';
+    try {
+      return new Date(iso).toLocaleDateString('de-DE', {
+        day: '2-digit', month: '2-digit', year: 'numeric',
+      });
+    } catch {
+      return iso;
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-lg shadow-xl w-full max-w-lg max-h-[85vh] flex flex-col">
+        <div className="flex items-center justify-between px-5 py-3 border-b border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+            <User className="w-5 h-5 text-blue-600" />
+            Kundendaten
+            {c && (
+              <span className="text-sm font-normal text-gray-500">
+                · {c.customerNumber}
+              </span>
+            )}
+          </h3>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-700 p-1"
+            aria-label="Schließen"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="px-5 py-4 overflow-auto flex-1">
+          {isLoading && (
+            <div className="text-gray-500 text-sm flex items-center gap-2 py-6">
+              <RefreshCw className="w-4 h-4 animate-spin" />
+              Lade Kundendaten…
+            </div>
+          )}
+          {c && (
+            <dl className="space-y-3">
+              {c.type === 'BUSINESS' && c.companyName && (
+                <CopyableValue label="Firma" value={c.companyName} />
+              )}
+              {fullName && <CopyableValue label="Name" value={fullName} />}
+              {c.birthDate && (
+                <CopyableValue label="Geburtsdatum" value={formatDate(c.birthDate)} />
+              )}
+              {c.birthPlace && <CopyableValue label="Geburtsort" value={c.birthPlace} />}
+              {c.foundingDate && (
+                <CopyableValue label="Gründungsdatum" value={formatDate(c.foundingDate)} />
+              )}
+              {addressString && (
+                <CopyableValue label="Adresse" value={addressString} />
+              )}
+              {c.phone && <CopyableValue label="Telefon" value={c.phone} />}
+              {c.mobile && <CopyableValue label="Mobil" value={c.mobile} />}
+              {c.email && <CopyableValue label="E-Mail" value={c.email} />}
+              {c.portalEmail && c.portalEmail !== c.email && (
+                <CopyableValue label="Portal-E-Mail" value={c.portalEmail} />
+              )}
+              {c.taxNumber && (
+                <CopyableValue label="Steuernummer" value={c.taxNumber} />
+              )}
+              {c.commercialRegisterNumber && (
+                <CopyableValue
+                  label="Handelsregisternummer"
+                  value={c.commercialRegisterNumber}
+                />
+              )}
+            </dl>
+          )}
+        </div>
+
+        <div className="px-5 py-3 border-t border-gray-200 flex justify-end">
+          <Button variant="secondary" onClick={onClose}>
+            Schließen
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/contracts/ContractDetail.tsx

@@ -6,6 +6,7 @@ import { contractApi, uploadApi, meterApi, contractTaskApi, appSettingsApi, gdpr
 import { ContractEmailsSection } from '../../components/email';
 import { ContractDetailModal, ContractHistorySection } from '../../components/contracts';
 import InvoicesSection from '../../components/contracts/InvoicesSection';
+import CustomerInfoModal from '../../components/contracts/CustomerInfoModal';
 import { useAuth } from '../../context/AuthContext';
 import Card from '../../components/ui/Card';
 import Button from '../../components/ui/Button';
@@ -609,7 +610,8 @@ function EnergyConsumptionCalculation({
   basePrice,
   unitPrice,
   unitPriceNt,
-  bonus,
+  instantBonus,
+  newCustomerBonus,
   hasMeter,
   contractMeters,
 }: {
@@ -619,7 +621,8 @@ function EnergyConsumptionCalculation({
   endDate?: string;
   basePrice?: number;
   unitPrice?: number;
-  bonus?: number;
+  instantBonus?: number;
+  newCustomerBonus?: number;
   unitPriceNt?: number;
   hasMeter?: boolean;
   contractMeters?: ContractMeter[];
@@ -656,7 +659,7 @@ function EnergyConsumptionCalculation({
   const htKwh = consumption?.consumptionHt ?? consumption?.consumptionKwh ?? 0;
   const ntKwh = consumption?.consumptionNt;
   const costs = consumption && consumption.consumptionKwh > 0
-    ? calculateCosts(htKwh, basePrice, unitPrice, bonus, ntKwh, unitPriceNt)
+    ? calculateCosts(htKwh, basePrice, unitPrice, instantBonus, ntKwh, unitPriceNt, newCustomerBonus)
     : null;
 
   const canCalculate = consumption && (consumption.type === 'exact' || consumption.type === 'projected');
@@ -780,12 +783,24 @@ function EnergyConsumptionCalculation({
                     <span className="font-mono">{formatNumber(costs.annualTotalCost)} €</span>
                   </div>
                 </div>
-                {/* Bonus */}
-                {costs.bonus != null && costs.bonus > 0 && (
+                {/* Bonus – Sofort + Neukunden einzeln, dann Gesamt */}
+                {costs.totalBonus != null && costs.totalBonus > 0 && (
                   <>
-                    <div className="flex justify-between text-green-600">
-                      <span>Bonus</span>
-                      <span className="font-mono">- {formatNumber(costs.bonus)} €</span>
+                    {costs.instantBonus != null && costs.instantBonus > 0 && (
+                      <div className="flex justify-between text-green-600">
+                        <span>Sofort-Bonus</span>
+                        <span className="font-mono">- {formatNumber(costs.instantBonus)} €</span>
+                      </div>
+                    )}
+                    {costs.newCustomerBonus != null && costs.newCustomerBonus > 0 && (
+                      <div className="flex justify-between text-green-600">
+                        <span>Neukunden-Bonus</span>
+                        <span className="font-mono">- {formatNumber(costs.newCustomerBonus)} €</span>
+                      </div>
+                    )}
+                    <div className="flex justify-between text-green-700 font-medium">
+                      <span>Gesamtbonus</span>
+                      <span className="font-mono">- {formatNumber(costs.totalBonus)} €</span>
                     </div>
                     <div className="border-t border-gray-300 pt-2">
                       <div className="flex justify-between font-semibold">
@@ -1478,6 +1493,9 @@ export default function ContractDetail() {
     () => new Date().toISOString().split('T')[0]
   );
 
+  // Kunden-Schnellansicht-Modal
+  const [showCustomerInfo, setShowCustomerInfo] = useState(false);
+
   const { data, isLoading } = useQuery({
     queryKey: ['contract', id],
     queryFn: () => contractApi.getById(contractId),
@@ -1757,11 +1775,20 @@ export default function ContractDetail() {
             )}
           </div>
           {c.customer && (
-            <p className="text-gray-500 ml-10">
+            <p className="text-gray-500 ml-10 flex items-center gap-1">
               Kunde:{' '}
               <Link to={`/customers/${c.customer.id}`} state={pushHistory(currentPath, location.state)} className="text-blue-600 hover:underline">
                 {c.customer.companyName || `${c.customer.firstName} ${c.customer.lastName}`}
               </Link>
+              <button
+                type="button"
+                onClick={() => setShowCustomerInfo(true)}
+                title="Wichtige Kundendaten anzeigen (Schnellansicht mit Copy-Buttons)"
+                className="text-gray-400 hover:text-blue-600 p-1 rounded"
+                aria-label="Kundendaten anzeigen"
+              >
+                <Info className="w-4 h-4" />
+              </button>
             </p>
           )}
         </div>
@@ -2565,10 +2592,25 @@ export default function ContractDetail() {
                 </dd>
               </div>
             )}
-            {c.energyDetails.bonus && (
+            {/* Bonus: Sofort + Neukunden einzeln + Gesamtbonus */}
+            {c.energyDetails.instantBonus != null && c.energyDetails.instantBonus > 0 && (
               <div>
-                <dt className="text-sm text-gray-500">Bonus</dt>
-                <dd>{c.energyDetails.bonus.toLocaleString('de-DE')} €</dd>
+                <dt className="text-sm text-gray-500">Sofort-Bonus</dt>
+                <dd>{c.energyDetails.instantBonus.toLocaleString('de-DE')} €</dd>
+              </div>
+            )}
+            {c.energyDetails.newCustomerBonus != null && c.energyDetails.newCustomerBonus > 0 && (
+              <div>
+                <dt className="text-sm text-gray-500">Neukunden-Bonus</dt>
+                <dd>{c.energyDetails.newCustomerBonus.toLocaleString('de-DE')} €</dd>
+              </div>
+            )}
+            {((c.energyDetails.instantBonus ?? 0) + (c.energyDetails.newCustomerBonus ?? 0)) > 0 && (
+              <div>
+                <dt className="text-sm text-gray-500">Gesamtbonus</dt>
+                <dd className="font-medium">
+                  {((c.energyDetails.instantBonus ?? 0) + (c.energyDetails.newCustomerBonus ?? 0)).toLocaleString('de-DE')} €
+                </dd>
               </div>
             )}
             {c.energyDetails.previousProviderName && (
@@ -2636,7 +2678,8 @@ export default function ContractDetail() {
             basePrice={c.energyDetails.basePrice}
             unitPrice={c.energyDetails.unitPrice}
             unitPriceNt={c.energyDetails.unitPriceNt}
-            bonus={c.energyDetails.bonus}
+            instantBonus={c.energyDetails.instantBonus}
+            newCustomerBonus={c.energyDetails.newCustomerBonus}
             hasMeter={!!c.energyDetails.meter}
             contractMeters={c.energyDetails.contractMeters}
           />
@@ -3100,6 +3143,15 @@ export default function ContractDetail() {
         />
       )}
 
+      {/* Kunden-Schnellansicht */}
+      {c.customer && (
+        <CustomerInfoModal
+          customerId={c.customer.id}
+          open={showCustomerInfo}
+          onClose={() => setShowCustomerInfo(false)}
+        />
+      )}
+
       {/* Folgevertrag Bestätigung */}
       <Modal
         isOpen={showFollowUpConfirm}

frontend/src/pages/contracts/ContractForm.tsx

@@ -282,7 +282,8 @@ export default function ContractForm() {
         basePrice: c.energyDetails?.basePrice || '',
         unitPrice: c.energyDetails?.unitPrice || '',
         unitPriceNt: c.energyDetails?.unitPriceNt || '',
-        bonus: c.energyDetails?.bonus || '',
+        instantBonus: c.energyDetails?.instantBonus || '',
+        newCustomerBonus: c.energyDetails?.newCustomerBonus || '',
         // Internet details
         downloadSpeed: c.internetDetails?.downloadSpeed || '',
         uploadSpeed: c.internetDetails?.uploadSpeed || '',
@@ -522,7 +523,8 @@ export default function ContractForm() {
         basePrice: data.basePrice ? parseFloat(data.basePrice) : null,
         unitPrice: data.unitPrice ? parseFloat(data.unitPrice) : null,
         unitPriceNt: data.unitPriceNt ? parseFloat(data.unitPriceNt) : null,
-        bonus: data.bonus ? parseFloat(data.bonus) : null,
+        instantBonus: data.instantBonus ? parseFloat(data.instantBonus) : null,
+        newCustomerBonus: data.newCustomerBonus ? parseFloat(data.newCustomerBonus) : null,
       };
     }
 
@@ -989,21 +991,20 @@ export default function ContractForm() {
                 />
               )}
               <Input label="Grundpreis (€/Monat)" type="number" step="any" {...register('basePrice')} />
-              <Input
+              <EuroCentInput
                 label={selectedMeter?.tariffModel === 'DUAL' ? 'HT-Arbeitspreis (€/kWh)' : 'Arbeitspreis (€/kWh)'}
-                type="number"
-                step="any"
-                {...register('unitPrice')}
+                value={watch('unitPrice')}
+                onChange={(v) => setValue('unitPrice', v, { shouldDirty: true })}
               />
               {selectedMeter?.tariffModel === 'DUAL' && (
-                <Input
+                <EuroCentInput
                   label="NT-Arbeitspreis (€/kWh)"
-                  type="number"
-                  step="any"
-                  {...register('unitPriceNt')}
+                  value={watch('unitPriceNt')}
+                  onChange={(v) => setValue('unitPriceNt', v, { shouldDirty: true })}
                 />
               )}
-              <Input label="Bonus (€)" type="number" step="0.01" {...register('bonus')} />
+              <Input label="Sofort-Bonus (€)" type="number" step="0.01" {...register('instantBonus')} />
+              <Input label="Neukunden-Bonus (€)" type="number" step="0.01" {...register('newCustomerBonus')} />
             </div>
 
             {/* Hinweis für Zählerstände und Rechnungen */}
@@ -1505,3 +1506,81 @@ export default function ContractForm() {
     </div>
   );
 }
+
+/**
+ * Doppel-Input für Arbeitspreise: links €/kWh, rechts ct/kWh.
+ * Beide bidirektional verkoppelt – Tippen im Cent-Feld setzt das
+ * darunterliegende Euro-Feld (÷ 100), und umgekehrt. Persistiert
+ * wird ausschließlich der Euro-Wert (Backend-Format unverändert).
+ * Cent-Anzeige wird live aus dem Euro-Wert abgeleitet.
+ */
+function EuroCentInput({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: string | number | undefined | null;
+  onChange: (v: string) => void;
+}) {
+  // Euro-Wert als String wie die anderen Inputs (react-hook-form merged
+  // numeric / string-Werte). Wir trimmen trailing zeros bei der
+  // Cent-Anzeige, damit "0.25 €" sauber als "25 ct" angezeigt wird –
+  // ohne "25.000000".
+  const euroStr = value == null ? '' : String(value);
+  const centDisplay = (() => {
+    if (euroStr === '') return '';
+    const n = parseFloat(euroStr);
+    if (!Number.isFinite(n)) return '';
+    // × 100 mit Float-Rauschen-Schutz (0.25 * 100 = 25.000000000000004)
+    const c = Math.round(n * 100 * 1_000_000) / 1_000_000;
+    return String(c);
+  })();
+
+  const handleCentChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value;
+    if (raw === '') {
+      onChange('');
+      return;
+    }
+    const num = parseFloat(raw);
+    if (!Number.isFinite(num)) {
+      onChange('');
+      return;
+    }
+    // cent / 100, Float-Rauschen-Schutz analog.
+    const euro = Math.round((num / 100) * 1_000_000) / 1_000_000;
+    onChange(String(euro));
+  };
+
+  const inputCls =
+    'block w-full px-3 py-2 pr-8 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500';
+
+  return (
+    <div className="w-full">
+      <label className="block text-sm font-medium text-gray-700 mb-1">{label}</label>
+      <div className="grid grid-cols-2 gap-2">
+        <div className="relative">
+          <input
+            type="number"
+            step="any"
+            value={euroStr}
+            onChange={(e) => onChange(e.target.value)}
+            className={inputCls}
+          />
+          <span className="absolute right-3 top-2 text-gray-400 text-sm pointer-events-none">€</span>
+        </div>
+        <div className="relative">
+          <input
+            type="number"
+            step="any"
+            value={centDisplay}
+            onChange={handleCentChange}
+            className={inputCls}
+          />
+          <span className="absolute right-3 top-2 text-gray-400 text-sm pointer-events-none">ct</span>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/types/index.ts

@@ -469,7 +469,8 @@ export interface EnergyContractDetails {
   basePrice?: number;              // €/Monat
   unitPrice?: number;              // €/kWh (Arbeitspreis) - bei HT/NT: HT-Preis
   unitPriceNt?: number;            // €/kWh NT-Preis (nur bei Zweitarifzähler)
-  bonus?: number;
+  instantBonus?: number;           // Sofort-Bonus
+  newCustomerBonus?: number;       // Neukunden-Bonus
   previousProviderName?: string;
   previousCustomerNumber?: string;
   invoices?: Invoice[];            // Rechnungen

frontend/src/utils/energyCalculations.ts

@@ -23,8 +23,10 @@ export interface CostCalculation {
   annualConsumptionCostNt?: number; // NT-Verbrauch × unitPriceNt
   annualTotalCost: number;       // Summe
   monthlyPayment: number;        // annualTotalCost / 12
-  bonus?: number;
-  effectiveAnnualCost: number;   // annualTotalCost - bonus
+  instantBonus?: number;         // Sofort-Bonus
+  newCustomerBonus?: number;     // Neukunden-Bonus
+  totalBonus?: number;           // Summe = instantBonus + newCustomerBonus
+  effectiveAnnualCost: number;   // annualTotalCost - totalBonus
 }
 
 /**
@@ -207,9 +209,10 @@ export function calculateCosts(
   consumptionKwh: number,
   basePrice?: number,
   unitPrice?: number,
-  bonus?: number,
+  instantBonus?: number,
   consumptionNtKwh?: number,
-  unitPriceNt?: number
+  unitPriceNt?: number,
+  newCustomerBonus?: number,
 ): CostCalculation | null {
   // Mindestens ein Preis muss vorhanden sein
   if (basePrice == null && unitPrice == null) {
@@ -221,7 +224,8 @@ export function calculateCosts(
   const annualConsumptionCost = consumptionKwh * (unitPrice ?? 0);
   const annualConsumptionCostNt = (consumptionNtKwh ?? 0) * (unitPriceNt ?? 0);
   const annualTotalCost = annualBaseCost + annualConsumptionCost + annualConsumptionCostNt;
-  const effectiveAnnualCost = annualTotalCost - (bonus ?? 0);
+  const totalBonus = (instantBonus ?? 0) + (newCustomerBonus ?? 0);
+  const effectiveAnnualCost = annualTotalCost - totalBonus;
   const monthlyPayment = effectiveAnnualCost / 12;
 
   return {
@@ -230,7 +234,9 @@ export function calculateCosts(
     annualConsumptionCostNt: annualConsumptionCostNt > 0 ? annualConsumptionCostNt : undefined,
     annualTotalCost,
     monthlyPayment,
-    bonus: bonus ?? undefined,
+    instantBonus: instantBonus && instantBonus > 0 ? instantBonus : undefined,
+    newCustomerBonus: newCustomerBonus && newCustomerBonus > 0 ? newCustomerBonus : undefined,
+    totalBonus: totalBonus > 0 ? totalBonus : undefined,
     effectiveAnnualCost,
   };
 }