diff --git a/Rechnung1.png b/Rechnung1.png
new file mode 100644
index 0000000..eec1b25
Binary files /dev/null and b/Rechnung1.png differ
diff --git a/app/Domains/Rechnung/Actions/GeneratePdf/GeneratePdfCommand.php b/app/Domains/Rechnung/Actions/GeneratePdf/GeneratePdfCommand.php
new file mode 100644
index 0000000..3a4b344
--- /dev/null
+++ b/app/Domains/Rechnung/Actions/GeneratePdf/GeneratePdfCommand.php
@@ -0,0 +1,94 @@
+<?php
+
+namespace App\Domains\Rechnung\Actions\GeneratePdf;
+
+use Barryvdh\DomPDF\Facade\Pdf;
+
+class GeneratePdfCommand
+{
+    public function __construct(private readonly GeneratePdfRequest $request) {}
+
+    public function execute(): GeneratePdfResponse
+    {
+        $rechnungsnummer = $this->request->rechnungsnummer !== ''
+            ? $this->request->rechnungsnummer
+            : date('Y') . '-' . str_pad(random_int(1, 999), 3, '0', STR_PAD_LEFT);
+
+        $positionen = array_values(array_filter(
+            $this->request->positionen,
+            fn($p) => !empty($p['bezeichnung'])
+        ));
+
+        $netto  = array_sum(array_map(
+            fn($p) => (float) ($p['menge'] ?? 0) * (float) ($p['einzelpreis'] ?? 0),
+            $positionen
+        ));
+        $mwst   = $netto * $this->request->mwstSatz / 100;
+        $brutto = $netto + $mwst;
+
+        $pdf = Pdf::loadView('pdf.rechnung', [
+            'rechnungsnummer'          => $rechnungsnummer,
+            'organisation'             => $this->request->organisation,
+            'anrede'                   => $this->request->anrede,
+            'vorname'                  => $this->request->vorname,
+            'nachname'                 => $this->request->nachname,
+            'adresse'                  => $this->request->adresse,
+            'plz'                      => $this->request->plz,
+            'ort'                      => $this->request->ort,
+            'email'                    => $this->request->email,
+            'iban'                     => $this->request->iban,
+            'bic'                      => $this->request->bic,
+            'rechnungsdatum'           => $this->request->rechnungsdatum,
+            'zahlungsziel'             => $this->request->zahlungsziel,
+            'rechnungsdatumFormatiert' => $this->formatDate($this->request->rechnungsdatum),
+            'zahlungszielFormatiert'   => $this->formatDate($this->request->zahlungsziel),
+            'positionen'               => $positionen,
+            'mwstSatz'                 => $this->request->mwstSatz,
+            'netto'                    => $netto,
+            'mwst'                     => $mwst,
+            'brutto'                   => $brutto,
+            'absenderEmail'            => $this->request->absenderEmail,
+            'absenderTelefon'          => $this->request->absenderTelefon,
+            'kohteDataUri'             => $this->imageToDataUri(storage_path('app/elemente/kohte.png')),
+            'logoDataUri'              => $this->imageToDataUri(public_path('wbm.png')),
+        ]);
+
+        $pdf->setPaper('A4', 'portrait');
+        $pdf->render();
+
+        $pdfContent = $pdf->output();
+
+        return new GeneratePdfResponse(
+            pdfContent: $pdfContent,
+            filename:   'rechnung-' . $rechnungsnummer . '.pdf',
+        );
+    }
+
+    private function formatDate(string $date): string
+    {
+        if (!$date) {
+            return '—';
+        }
+
+        $ts = strtotime($date);
+
+        return $ts ? date('d.m.Y', $ts) : $date;
+    }
+
+
+    private function imageToDataUri(string $path): string
+    {
+        if (!file_exists($path)) {
+            return '';
+        }
+
+        $mime = match (strtolower(pathinfo($path, PATHINFO_EXTENSION))) {
+            'jpg', 'jpeg' => 'image/jpeg',
+            'svg'         => 'image/svg+xml',
+            default       => 'image/png',
+        };
+
+        return 'data:' . $mime . ';base64,' . base64_encode(file_get_contents($path));
+    }
+
+}
diff --git a/app/Domains/Rechnung/Actions/GeneratePdf/GeneratePdfRequest.php b/app/Domains/Rechnung/Actions/GeneratePdf/GeneratePdfRequest.php
new file mode 100644
index 0000000..a5bff61
--- /dev/null
+++ b/app/Domains/Rechnung/Actions/GeneratePdf/GeneratePdfRequest.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Domains\Rechnung\Actions\GeneratePdf;
+
+class GeneratePdfRequest
+{
+    public function __construct(
+        public readonly string $organisation,
+        public readonly string $anrede,
+        public readonly string $vorname,
+        public readonly string $nachname,
+        public readonly string $adresse,
+        public readonly string $plz,
+        public readonly string $ort,
+        public readonly string $email,
+        public readonly string $rechnungsnummer,
+        public readonly string $rechnungsdatum,
+        public readonly string $zahlungsziel,
+        public readonly string $bic,
+        public readonly string $iban,
+        public readonly array $positionen,
+        public readonly int $mwstSatz,
+        public readonly string $absenderEmail,
+        public readonly string $absenderTelefon,
+    ) {}
+
+    public static function fromArray(array $data): self
+    {
+        return new self(
+            organisation:     $data['organisation'] ?? '',
+            anrede:           $data['anrede'] ?? '',
+            vorname:          $data['vorname'] ?? '',
+            nachname:         $data['nachname'] ?? '',
+            adresse:          $data['adresse'] ?? '',
+            plz:              $data['plz'] ?? '',
+            ort:              $data['ort'] ?? '',
+            email:            $data['email'] ?? '',
+            rechnungsnummer:  $data['rechnungsnummer'] ?? '',
+            rechnungsdatum:   $data['rechnungsdatum'] ?? '',
+            zahlungsziel:     $data['zahlungsziel'] ?? '',
+            bic:              $data['bic'] ?? '',
+            iban:             $data['iban'] ?? '',
+            positionen:       $data['positionen'] ?? [],
+            mwstSatz:         (int) ($data['mwstSatz'] ?? 19),
+            absenderEmail:    $data['absenderEmail'] ?? 'finanzen@sachsen.pfadfinden.de',
+            absenderTelefon:  $data['absenderTelefon'] ?? '',
+        );
+    }
+}
diff --git a/app/Domains/Rechnung/Actions/GeneratePdf/GeneratePdfResponse.php b/app/Domains/Rechnung/Actions/GeneratePdf/GeneratePdfResponse.php
new file mode 100644
index 0000000..b838679
--- /dev/null
+++ b/app/Domains/Rechnung/Actions/GeneratePdf/GeneratePdfResponse.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Domains\Rechnung\Actions\GeneratePdf;
+
+class GeneratePdfResponse
+{
+    public function __construct(
+        public readonly string $pdfContent,
+        public readonly string $filename,
+    ) {}
+}
diff --git a/app/Domains/Rechnung/Controllers/GeneratePdfController.php b/app/Domains/Rechnung/Controllers/GeneratePdfController.php
new file mode 100644
index 0000000..b0d15d8
--- /dev/null
+++ b/app/Domains/Rechnung/Controllers/GeneratePdfController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Domains\Rechnung\Controllers;
+
+use App\Domains\Rechnung\Actions\GeneratePdf\GeneratePdfCommand;
+use App\Domains\Rechnung\Actions\GeneratePdf\GeneratePdfRequest;
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+
+class GeneratePdfController
+{
+    public function __invoke(Request $request): Response
+    {
+        $pdfRequest = GeneratePdfRequest::fromArray($request->all());
+        $command    = new GeneratePdfCommand($pdfRequest);
+        $result     = $command->execute();
+
+        return response($result->pdfContent, 200, [
+            'Content-Type'        => 'application/pdf',
+            'Content-Disposition' => 'inline; filename="' . $result->filename . '"',
+        ]);
+    }
+}
diff --git a/app/Domains/Rechnung/Routes/web.php b/app/Domains/Rechnung/Routes/web.php
index aecab1b..e8bb622 100644
--- a/app/Domains/Rechnung/Routes/web.php
+++ b/app/Domains/Rechnung/Routes/web.php
@@ -1,6 +1,8 @@
 <?php
 
+use App\Domains\Rechnung\Controllers\GeneratePdfController;
 use App\Domains\Rechnung\Controllers\RechnungController;
 use Illuminate\Support\Facades\Route;
 
 Route::get('/rechnung', RechnungController::class)->name('rechnung');
+Route::post('/rechnung/pdf', GeneratePdfController::class)->name('rechnung.pdf');
diff --git a/app/Domains/Rechnung/Views/Rechnung.vue b/app/Domains/Rechnung/Views/Rechnung.vue
index f8efa42..a4d155d 100644
--- a/app/Domains/Rechnung/Views/Rechnung.vue
+++ b/app/Domains/Rechnung/Views/Rechnung.vue
@@ -1,54 +1,1133 @@
 <script setup>
 import AppLayout from '@/layouts/AppLayout.vue'
+import { ref, computed } from 'vue'
+
+const steps = [
+    { number: 1, label: 'Empfänger' },
+    { number: 2, label: 'Positionen' },
+    { number: 3, label: 'Vorschau & Freigabe' },
+]
+
+const currentStep = ref(1)
+const pdfLoading = ref(false)
+
+const today = new Date().toISOString().split('T')[0]
+const in14Days = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
+
+const form = ref({
+    kontaktSuche: '',
+    organisation: '',
+    anrede: '',
+    vorname: '',
+    nachname: '',
+    adresse: '',
+    plz: '',
+    ort: '',
+    email: '',
+    rechnungsnummer: '',
+    rechnungsdatum: today,
+    zahlungsziel: in14Days,
+    bic: '',
+    iban: '',
+    absenderEmail: 'finanzen@sachsen.pfadfinden.de',
+    absenderTelefon: '',
+    datenSpeichern: false,
+    positionen: [
+        { bezeichnung: '', menge: 1, einheit: 'Stk.', einzelpreis: '' },
+    ],
+    mwstSatz: 19,
+})
+
+const nettoSumme = computed(() =>
+    form.value.positionen.reduce((sum, p) => {
+        return sum + (parseFloat(p.menge) || 0) * (parseFloat(p.einzelpreis) || 0)
+    }, 0)
+)
+const mwstBetrag = computed(() => nettoSumme.value * form.value.mwstSatz / 100)
+const brutto = computed(() => nettoSumme.value + mwstBetrag.value)
+
+function posGesamt(pos) {
+    return (parseFloat(pos.menge) || 0) * (parseFloat(pos.einzelpreis) || 0)
+}
+
+function formatPreis(value) {
+    return (parseFloat(value) || 0).toLocaleString('de-DE', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    }) + ' €'
+}
+
+function addPosition() {
+    form.value.positionen.push({ bezeichnung: '', menge: 1, einheit: 'Stk.', einzelpreis: '' })
+}
+
+function removePosition(i) {
+    if (form.value.positionen.length > 1) {
+        form.value.positionen.splice(i, 1)
+    }
+}
+
+async function openPdf() {
+    pdfLoading.value = true
+    try {
+        const csrf = document.querySelector('meta[name="csrf-token"]')?.content ?? ''
+        const res = await fetch('/rechnung/pdf', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
+            body: JSON.stringify(form.value),
+        })
+        if (!res.ok) return
+        const blob = await res.blob()
+        window.open(URL.createObjectURL(blob), '_blank')
+    } finally {
+        pdfLoading.value = false
+    }
+}
+
+const habenPositionen = computed(() =>
+    form.value.positionen.some(p => p.bezeichnung.trim() !== '')
+)
 </script>
 
 <template>
     <AppLayout title="Rechnung erstellen">
-        <div class="placeholder">
-            <div class="placeholder-icon-wrap" style="background: #27ae60;">
-                <font-awesome-icon icon="file-invoice" class="placeholder-icon" />
+        <div class="page">
+
+            <!-- ── Breadcrumb + Aktionen ── -->
+            <div class="page-header">
+                <nav class="breadcrumb">
+                    <a href="/" class="bc-link">Startseite</a>
+                    <font-awesome-icon icon="chevron-right" class="bc-sep" />
+                    <span class="bc-current">Rechnung erstellen</span>
+                </nav>
+                <div class="header-actions">
+                    <a href="/" class="btn-cancel">Abbrechen</a>
+                </div>
             </div>
-            <h1 class="placeholder-title">Rechnung erstellen</h1>
-            <p class="placeholder-text">Dieses Modul wird in Kürze verfügbar sein.</p>
+
+            <!-- ── Stepper ── -->
+            <div class="stepper">
+                <template v-for="(step, i) in steps" :key="step.number">
+                    <div class="step"
+                         :class="{
+                             'step--active': step.number === currentStep,
+                             'step--done':   step.number < currentStep,
+                             'step--future': step.number > currentStep,
+                         }">
+                        <div class="step-circle">
+                            <font-awesome-icon v-if="step.number < currentStep" icon="check" />
+                            <span v-else>{{ step.number }}</span>
+                        </div>
+                        <span class="step-label">{{ step.label }}</span>
+                    </div>
+                    <div v-if="i < steps.length - 1" class="step-connector"></div>
+                </template>
+            </div>
+
+            <!-- ── Seitentitel ── -->
+            <div class="page-title">
+                <div class="title-icon">
+                    <font-awesome-icon icon="file-invoice" />
+                </div>
+                <div>
+                    <h1 class="title-text">Rechnung erstellen</h1>
+                    <p class="title-sub">Erstelle eine Rechnung nach BdP Vorlage.</p>
+                </div>
+            </div>
+
+            <!-- ── Hauptbereich ── -->
+            <div class="main-grid">
+
+                <!-- ── SCHRITT 1: Empfänger ── -->
+                <div v-if="currentStep === 1" class="card">
+                    <h2 class="card-heading">Empfänger</h2>
+
+                    <div class="search-row">
+                        <div class="search-wrap">
+                            <font-awesome-icon icon="magnifying-glass" class="search-icon" />
+                            <input
+                                type="text"
+                                v-model="form.kontaktSuche"
+                                placeholder="Kontakt suchen..."
+                                class="input search-input"
+                            />
+                        </div>
+                        <button class="btn-outline">
+                            <font-awesome-icon icon="user" />
+                            Neuer Kontakt
+                        </button>
+                    </div>
+
+                    <div class="divider"></div>
+
+                    <div class="fields">
+                        <div class="field">
+                            <label class="label">Firma / Organisation</label>
+                            <input type="text" class="input" v-model="form.organisation" placeholder="BdP Landesverband e.V." />
+                        </div>
+
+                        <div class="field">
+                            <label class="label">Anrede</label>
+                            <select class="input" v-model="form.anrede">
+                                <option value="">— bitte wählen —</option>
+                                <option>Herr</option>
+                                <option>Frau</option>
+                                <option>Divers</option>
+                            </select>
+                        </div>
+
+                        <div class="field-row">
+                            <div class="field">
+                                <label class="label">Vorname</label>
+                                <input type="text" class="input" v-model="form.vorname" placeholder="Max" />
+                            </div>
+                            <div class="field">
+                                <label class="label">Nachname</label>
+                                <input type="text" class="input" v-model="form.nachname" placeholder="Mustermann" />
+                            </div>
+                        </div>
+
+                        <div class="field">
+                            <label class="label">Adresse</label>
+                            <input type="text" class="input" v-model="form.adresse" placeholder="Musterstraße 1" />
+                        </div>
+
+                        <div class="field-row">
+                            <div class="field field--plz">
+                                <label class="label">PLZ</label>
+                                <input type="text" class="input" v-model="form.plz" placeholder="12345" />
+                            </div>
+                            <div class="field">
+                                <label class="label">Ort</label>
+                                <input type="text" class="input" v-model="form.ort" placeholder="Musterstadt" />
+                            </div>
+                        </div>
+
+                        <div class="field">
+                            <label class="label">E-Mail</label>
+                            <input type="email" class="input" v-model="form.email" placeholder="max@mustermann.de" />
+                        </div>
+
+                        <div class="divider"></div>
+
+                        <div class="field-row">
+                            <div class="field">
+                                <label class="label">Rechnungsnummer</label>
+                                <input type="text" class="input" v-model="form.rechnungsnummer" placeholder="2024-001" />
+                            </div>
+                            <div class="field">
+                                <label class="label">Rechnungsdatum</label>
+                                <input type="date" class="input" v-model="form.rechnungsdatum" />
+                            </div>
+                        </div>
+
+                        <div class="field">
+                            <label class="label">Zahlungsziel</label>
+                            <input type="date" class="input" v-model="form.zahlungsziel" />
+                        </div>
+
+                        <div class="divider"></div>
+
+                        <div class="field">
+                            <label class="label">IBAN</label>
+                            <input type="text" class="input" v-model="form.iban" placeholder="DE12 3456 7890 1234 5678 90" />
+                        </div>
+
+                        <div class="field">
+                            <label class="label">BIC</label>
+                            <input type="text" class="input" v-model="form.bic" placeholder="BELADEBEXXX" />
+                        </div>
+
+                        <div class="divider"></div>
+
+                        <div class="field">
+                            <label class="label">Absender-E-Mail</label>
+                            <input type="email" class="input" v-model="form.absenderEmail" placeholder="finanzen@sachsen.pfadfinden.de" />
+                        </div>
+
+                        <div class="field">
+                            <label class="label">Telefon (optional)</label>
+                            <input type="tel" class="input" v-model="form.absenderTelefon" placeholder="+49 123 456789" />
+                        </div>
+                    </div>
+
+                    <label class="dsgvo-row">
+                        <input type="checkbox" class="checkbox" v-model="form.datenSpeichern" />
+                        <span>
+                            Daten für diesen Kontakt speichern und bei künftigen Rechnungen vorausfüllen.
+                        </span>
+                    </label>
+                </div>
+
+                <!-- ── SCHRITT 2: Positionen ── -->
+                <div v-else-if="currentStep === 2" class="card">
+                    <h2 class="card-heading">Positionen</h2>
+
+                    <div class="pos-table-wrap">
+                        <table class="pos-edit-table">
+                            <thead>
+                                <tr>
+                                    <th class="col-nr">Nr.</th>
+                                    <th class="col-bez">Bezeichnung</th>
+                                    <th class="col-menge">Menge</th>
+                                    <th class="col-einheit">Einheit</th>
+                                    <th class="col-preis">Einzelpreis</th>
+                                    <th class="col-gesamt">Gesamt</th>
+                                    <th class="col-del"></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="(pos, i) in form.positionen" :key="i">
+                                    <td class="col-nr td-nr">{{ i + 1 }}</td>
+                                    <td class="col-bez">
+                                        <input
+                                            type="text"
+                                            class="pos-input pos-input--wide"
+                                            v-model="pos.bezeichnung"
+                                            placeholder="Bezeichnung der Leistung"
+                                        />
+                                    </td>
+                                    <td class="col-menge">
+                                        <input
+                                            type="number"
+                                            class="pos-input pos-input--num"
+                                            v-model="pos.menge"
+                                            min="0"
+                                            step="1"
+                                        />
+                                    </td>
+                                    <td class="col-einheit">
+                                        <select class="pos-input pos-select" v-model="pos.einheit">
+                                            <option>Stk.</option>
+                                            <option>Std.</option>
+                                            <option>Tage</option>
+                                            <option>Pauschal</option>
+                                        </select>
+                                    </td>
+                                    <td class="col-preis">
+                                        <div class="preis-wrap">
+                                            <input
+                                                type="number"
+                                                class="pos-input pos-input--num"
+                                                v-model="pos.einzelpreis"
+                                                min="0"
+                                                step="0.01"
+                                                placeholder="0,00"
+                                            />
+                                            <span class="preis-suffix">€</span>
+                                        </div>
+                                    </td>
+                                    <td class="col-gesamt td-gesamt">{{ formatPreis(posGesamt(pos)) }}</td>
+                                    <td class="col-del">
+                                        <button
+                                            class="del-btn"
+                                            :disabled="form.positionen.length === 1"
+                                            @click="removePosition(i)"
+                                            title="Position entfernen"
+                                        >
+                                            <font-awesome-icon icon="trash" />
+                                        </button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <button class="add-pos-btn" @click="addPosition">
+                        <font-awesome-icon icon="plus" />
+                        Position hinzufügen
+                    </button>
+
+                    <div class="divider"></div>
+
+                    <div class="summen-row">
+                        <div class="mwst-group">
+                            <span class="mwst-label">Mehrwertsteuer</span>
+                            <div class="mwst-badges">
+                                <button
+                                    v-for="satz in [0, 7, 19]"
+                                    :key="satz"
+                                    class="mwst-badge"
+                                    :class="{ 'mwst-badge--active': form.mwstSatz === satz }"
+                                    @click="form.mwstSatz = satz"
+                                >
+                                    {{ satz }}&thinsp;%
+                                </button>
+                            </div>
+                        </div>
+
+                        <table class="summen-table">
+                            <tr>
+                                <td class="sum-key">Nettobetrag</td>
+                                <td class="sum-val">{{ formatPreis(nettoSumme) }}</td>
+                            </tr>
+                            <tr>
+                                <td class="sum-key">zzgl. {{ form.mwstSatz }}&thinsp;% MwSt.</td>
+                                <td class="sum-val">{{ formatPreis(mwstBetrag) }}</td>
+                            </tr>
+                            <tr class="sum-total-row">
+                                <td class="sum-key">Gesamtbetrag</td>
+                                <td class="sum-val sum-val--total">{{ formatPreis(brutto) }}</td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+
+                <!-- ── SCHRITT 3: Vorschau & Freigabe ── -->
+                <div v-else class="card release-card">
+                    <div class="release-icon-wrap">
+                        <font-awesome-icon icon="file-pdf" class="release-icon" />
+                    </div>
+                    <h2 class="release-heading">Rechnung bereit</h2>
+                    <p class="release-sub">Prüfe die Vorschau rechts und lade die Rechnung anschließend als PDF herunter.</p>
+
+                    <div class="release-summary">
+                        <div class="release-row">
+                            <span class="release-key">Empfänger</span>
+                            <span class="release-val">
+                                {{ [form.organisation, [form.anrede, form.vorname, form.nachname].filter(Boolean).join(' ')].filter(Boolean).join(' · ') || '—' }}
+                            </span>
+                        </div>
+                        <div class="release-row">
+                            <span class="release-key">Rechnungs-Nr.</span>
+                            <span class="release-val">{{ form.rechnungsnummer || '(wird automatisch vergeben)' }}</span>
+                        </div>
+                        <div class="release-row">
+                            <span class="release-key">Datum</span>
+                            <span class="release-val">{{ form.rechnungsdatum || '—' }}</span>
+                        </div>
+                        <div class="release-row">
+                            <span class="release-key">Zahlungsziel</span>
+                            <span class="release-val">{{ form.zahlungsziel || '—' }}</span>
+                        </div>
+                        <div class="release-row release-row--total">
+                            <span class="release-key">Gesamtbetrag</span>
+                            <span class="release-val release-val--total">{{ formatPreis(brutto) }}</span>
+                        </div>
+                    </div>
+
+                    <button class="btn-download" :disabled="pdfLoading" @click="openPdf">
+                        <font-awesome-icon :icon="pdfLoading ? 'file-invoice' : 'download'" />
+                        {{ pdfLoading ? 'PDF wird generiert…' : 'PDF herunterladen' }}
+                    </button>
+                </div>
+
+                <!-- ── Vorschau-Panel (immer sichtbar) ── -->
+                <div class="card preview-card">
+                    <div class="preview-header">
+                        <span class="preview-title">Vorschau</span>
+                    </div>
+
+                    <div class="invoice-wrap">
+                        <div class="invoice-doc">
+
+                            <div class="inv-top">
+                                <div></div>
+                                <div class="inv-sender">
+                                    <svg viewBox="0 0 100 100" width="32" height="32">
+                                        <circle cx="50" cy="50" r="49" fill="#f5c400"/>
+                                        <circle cx="50" cy="50" r="38" fill="#1a4799"/>
+                                        <path d="M50,44 C47,36 44,24 47,16 C48.5,12 51.5,12 53,16 C56,24 53,36 50,44Z" fill="white"/>
+                                        <path d="M49,44 C45,41 38,37 30,32 C25,28 25,22 29,20 C33,18 38,23 43,32 C46,37 48,41 49,44Z" fill="white"/>
+                                        <path d="M51,44 C55,41 62,37 70,32 C75,28 75,22 71,20 C67,18 62,23 57,32 C54,37 52,41 51,44Z" fill="white"/>
+                                        <ellipse cx="50" cy="47" rx="8.5" ry="3.5" fill="white"/>
+                                        <rect x="48" y="50" width="4" height="13" rx="1.5" fill="white"/>
+                                        <rect x="41" y="62" width="18" height="4" rx="2" fill="white"/>
+                                    </svg>
+                                    <div class="inv-sender-text">
+                                        <strong>BdP Landesverband Sachsen</strong>
+                                        <span>c/o Mandy Grazek</span>
+                                        <span>Weststraße 53c, 09212 Limbach-Oberfrohna</span>
+                                        <span class="inv-muted">sachsen@pfadfinden.de</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="inv-address-row">
+                                <div class="inv-recipient">
+                                    <div class="inv-recipient-label">Rechnungsempfänger</div>
+                                    <div v-if="form.organisation">{{ form.organisation }}</div>
+                                    <div>{{ [form.anrede, form.vorname, form.nachname].filter(Boolean).join(' ') || '—' }}</div>
+                                    <div>{{ form.adresse || '—' }}</div>
+                                    <div>{{ [form.plz, form.ort].filter(Boolean).join(' ') || '—' }}</div>
+                                </div>
+                                <div class="inv-meta">
+                                    <div class="inv-rechnung-title">RECHNUNG</div>
+                                    <div class="inv-meta-row">
+                                        <span class="inv-meta-key">Rechnungs-Nr.</span>
+                                        <span>{{ form.rechnungsnummer || '—' }}</span>
+                                    </div>
+                                    <div class="inv-meta-row">
+                                        <span class="inv-meta-key">Datum</span>
+                                        <span>{{ form.rechnungsdatum || '—' }}</span>
+                                    </div>
+                                    <div class="inv-meta-row">
+                                        <span class="inv-meta-key">Zahlungsziel</span>
+                                        <span>{{ form.zahlungsziel || '—' }}</span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <hr class="inv-hr" />
+
+                            <table class="inv-table">
+                                <thead>
+                                    <tr>
+                                        <th>Nr.</th>
+                                        <th>Bezeichnung</th>
+                                        <th class="ta-r">Menge</th>
+                                        <th class="ta-r">Einzelpreis</th>
+                                        <th class="ta-r">Gesamt</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <template v-if="habenPositionen">
+                                        <tr v-for="(pos, i) in form.positionen.filter(p => p.bezeichnung)" :key="i">
+                                            <td>{{ i + 1 }}</td>
+                                            <td>{{ pos.bezeichnung }}</td>
+                                            <td class="ta-r">{{ pos.menge }} {{ pos.einheit }}</td>
+                                            <td class="ta-r">{{ formatPreis(pos.einzelpreis) }}</td>
+                                            <td class="ta-r">{{ formatPreis(posGesamt(pos)) }}</td>
+                                        </tr>
+                                    </template>
+                                    <tr v-else>
+                                        <td colspan="5" class="inv-empty">
+                                            Positionen werden in Schritt 2 erfasst.
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+
+                            <div class="inv-summen">
+                                <div class="inv-sum-row">
+                                    <span>Nettobetrag</span>
+                                    <span>{{ formatPreis(nettoSumme) }}</span>
+                                </div>
+                                <div class="inv-sum-row">
+                                    <span>zzgl. {{ form.mwstSatz }}&thinsp;% MwSt.</span>
+                                    <span>{{ formatPreis(mwstBetrag) }}</span>
+                                </div>
+                                <div class="inv-total">
+                                    <span class="inv-total-label">Gesamtbetrag</span>
+                                    <span class="inv-total-value">{{ formatPreis(brutto) }}</span>
+                                </div>
+                            </div>
+
+                            <div class="inv-bank">
+                                Bitte überweisen Sie auf IBAN:
+                                <strong>{{ form.iban || '—' }}</strong>
+                                <span v-if="form.bic"> · BIC: {{ form.bic }}</span>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+            <!-- ── Seitennavigation ── -->
+            <div class="page-nav">
+                <button v-if="currentStep > 1" class="btn-back" @click="currentStep--">
+                    <font-awesome-icon icon="chevron-left" />
+                    Zurück
+                </button>
+                <div v-else></div>
+
+                <button v-if="currentStep < 3" class="btn-next" @click="currentStep++">
+                    {{ currentStep === 1 ? 'Weiter: Positionen' : 'Weiter: Vorschau' }}
+                    <font-awesome-icon icon="chevron-right" />
+                </button>
+            </div>
+
         </div>
     </AppLayout>
 </template>
 
 <style scoped>
-.placeholder {
+/* ── Layout ── */
+.page {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 60vh;
-    gap: 16px;
-    text-align: center;
+    gap: 20px;
 }
 
-.placeholder-icon-wrap {
-    width: 80px;
-    height: 80px;
-    border-radius: 20px;
+/* ── Breadcrumb + Header-Aktionen ── */
+.page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.85rem;
+    color: #6b7280;
+}
+
+.bc-link { color: #1d4899; text-decoration: none; }
+.bc-link:hover { text-decoration: underline; }
+.bc-sep { font-size: 0.7rem; color: #9ca3af; }
+.bc-current { color: #374151; font-weight: 500; }
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.btn-cancel {
+    font-size: 0.875rem;
+    color: #6b7280;
+    text-decoration: none;
+    padding: 7px 14px;
+    border-radius: 7px;
+    transition: background 0.15s;
+}
+.btn-cancel:hover { background: #f3f4f6; }
+
+/* ── Stepper ── */
+.stepper {
+    display: flex;
+    align-items: center;
+    background: white;
+    border-radius: 10px;
+    padding: 16px 24px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
+}
+
+.step { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+
+.step-circle {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: 0.85rem;
+    font-weight: 700;
+    flex-shrink: 0;
 }
 
-.placeholder-icon {
-    font-size: 2.2rem;
-    color: rgba(255, 255, 255, 0.9);
+.step--active .step-circle,
+.step--done .step-circle  { background: #27ae60; color: white; }
+.step--future .step-circle { background: #f3f4f6; color: #9ca3af; border: 2px solid #e5e7eb; }
+
+.step-label { font-size: 0.875rem; font-weight: 500; }
+.step--active .step-label { color: #111827; font-weight: 600; }
+.step--done .step-label   { color: #374151; }
+.step--future .step-label { color: #9ca3af; }
+
+.step-connector { flex: 1; height: 2px; background: #e5e7eb; margin: 0 16px; }
+
+/* ── Seitentitel ── */
+.page-title { display: flex; align-items: center; gap: 14px; }
+
+.title-icon {
+    width: 44px;
+    height: 44px;
+    background: #dcfce7;
+    color: #16a34a;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    flex-shrink: 0;
 }
 
-.placeholder-title {
-    margin: 0;
-    font-size: 1.5rem;
+.title-text { margin: 0 0 3px; font-size: 1.25rem; font-weight: 700; color: #111827; }
+.title-sub  { margin: 0; font-size: 0.85rem; color: #6b7280; }
+
+/* ── Hauptgitter ── */
+.main-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    align-items: start;
+}
+
+/* ── Karte ── */
+.card {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
+    padding: 24px;
+    border: 1px solid #f0f0f0;
+}
+
+.card-heading { margin: 0 0 18px; font-size: 1rem; font-weight: 700; color: #111827; }
+
+/* ── Kontaktsuche ── */
+.search-row { display: flex; gap: 10px; align-items: center; }
+.search-wrap { flex: 1; position: relative; }
+.search-icon {
+    position: absolute;
+    left: 11px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #9ca3af;
+    font-size: 0.82rem;
+}
+.search-input { padding-left: 32px !important; }
+
+.btn-outline {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    padding: 8px 14px;
+    border: 1px solid #d1d5db;
+    border-radius: 7px;
+    background: white;
+    font-size: 0.82rem;
+    font-weight: 500;
+    color: #374151;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background 0.15s, border-color 0.15s;
+}
+.btn-outline:hover { background: #f9fafb; border-color: #9ca3af; }
+
+/* ── Trennlinie ── */
+.divider { height: 1px; background: #f0f0f0; margin: 16px 0; }
+
+/* ── Formularfelder (Schritt 1) ── */
+.fields { display: flex; flex-direction: column; gap: 12px; }
+.field  { display: flex; flex-direction: column; gap: 5px; }
+.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.field--plz { max-width: 120px; }
+
+.label { font-size: 0.8rem; font-weight: 600; color: #374151; }
+
+.input {
+    padding: 8px 11px;
+    border: 1px solid #d1d5db;
+    border-radius: 7px;
+    font-size: 0.875rem;
+    color: #111827;
+    background: white;
+    outline: none;
+    transition: border-color 0.15s;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: inherit;
+}
+.input:focus { border-color: #1d4899; box-shadow: 0 0 0 3px rgba(29,72,153,0.08); }
+select.input { cursor: pointer; }
+
+/* ── DSGVO ── */
+.dsgvo-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    margin-top: 16px;
+    cursor: pointer;
+}
+.checkbox { margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: #1d4899; }
+.dsgvo-row span { font-size: 0.78rem; color: #6b7280; line-height: 1.5; }
+
+/* ── Positionen-Tabelle (Schritt 2) ── */
+.pos-table-wrap {
+    overflow-x: auto;
+    margin-bottom: 12px;
+}
+
+.pos-edit-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.82rem;
+}
+
+.pos-edit-table th {
+    text-align: left;
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    padding: 0 6px 8px;
+    border-bottom: 1px solid #e5e7eb;
+    white-space: nowrap;
+}
+
+.pos-edit-table td {
+    padding: 5px 4px;
+    vertical-align: middle;
+    border-bottom: 1px solid #f3f4f6;
+}
+
+.pos-edit-table tbody tr:last-child td { border-bottom: none; }
+.pos-edit-table tbody tr:hover td { background: #fafafa; }
+
+.col-nr      { width: 34px; }
+.col-bez     { width: auto; }
+.col-menge   { width: 64px; }
+.col-einheit { width: 90px; }
+.col-preis   { width: 110px; }
+.col-gesamt  { width: 82px; }
+.col-del     { width: 34px; }
+
+.td-nr      { color: #9ca3af; font-size: 0.75rem; text-align: center; }
+.td-gesamt  { text-align: right; color: #374151; font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+.pos-input {
+    padding: 6px 8px;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    font-size: 0.82rem;
+    color: #111827;
+    background: white;
+    outline: none;
+    transition: border-color 0.15s;
+    font-family: inherit;
+    box-sizing: border-box;
+}
+.pos-input:focus { border-color: #1d4899; box-shadow: 0 0 0 2px rgba(29,72,153,0.08); }
+
+.pos-input--wide { width: 100%; }
+.pos-input--num  { width: 100%; text-align: right; }
+.pos-select      { width: 100%; cursor: pointer; }
+
+.preis-wrap { display: flex; align-items: center; gap: 4px; }
+.preis-suffix { font-size: 0.8rem; color: #6b7280; flex-shrink: 0; }
+
+.del-btn {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    background: white;
+    color: #9ca3af;
+    cursor: pointer;
+    font-size: 0.7rem;
+    transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+.del-btn:hover:not(:disabled) { color: #ef4444; border-color: #fca5a5; background: #fef2f2; }
+.del-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+
+.add-pos-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 14px;
+    border: 1px dashed #d1d5db;
+    border-radius: 7px;
+    background: transparent;
+    color: #6b7280;
+    font-size: 0.82rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s;
+    margin-bottom: 4px;
+}
+.add-pos-btn:hover { color: #1d4899; border-color: #1d4899; }
+
+/* ── MwSt + Summen (Schritt 2) ── */
+.summen-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 24px;
+}
+
+.mwst-group { display: flex; flex-direction: column; gap: 8px; }
+.mwst-label { font-size: 0.78rem; font-weight: 600; color: #374151; }
+
+.mwst-badges { display: flex; gap: 6px; }
+.mwst-badge {
+    padding: 5px 14px;
+    border: 1px solid #e5e7eb;
+    border-radius: 20px;
+    background: white;
+    font-size: 0.82rem;
+    font-weight: 500;
+    color: #6b7280;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+.mwst-badge:hover { border-color: #1d4899; color: #1d4899; }
+.mwst-badge--active { background: #1d4899; border-color: #1d4899; color: white; }
+
+.summen-table { font-size: 0.85rem; border-collapse: collapse; }
+.summen-table td { padding: 3px 0 3px 20px; }
+.sum-key { color: #6b7280; }
+.sum-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.sum-total-row td {
+    border-top: 1.5px solid #1d4899;
+    padding-top: 8px;
     font-weight: 700;
     color: #111827;
 }
+.sum-val--total { color: #1d4899; font-size: 1rem; }
 
-.placeholder-text {
-    margin: 0;
-    color: #6b7280;
+/* ── Freigabe-Karte (Schritt 3) ── */
+.release-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.release-icon-wrap {
+    width: 52px;
+    height: 52px;
+    border-radius: 14px;
+    background: #eff6ff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+}
+
+.release-icon { font-size: 1.4rem; color: #1d4899; }
+
+.release-heading { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; color: #111827; }
+.release-sub { margin: 0 0 24px; font-size: 0.83rem; color: #6b7280; line-height: 1.5; }
+
+.release-summary {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    border: 1px solid #f0f0f0;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 24px;
+}
+
+.release-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 14px;
+    border-bottom: 1px solid #f5f5f5;
+    font-size: 0.85rem;
+}
+.release-row:last-child { border-bottom: none; }
+.release-row--total { background: #f8faff; }
+
+.release-key { color: #6b7280; font-weight: 500; }
+.release-val { color: #111827; text-align: right; }
+.release-val--total { font-size: 1.1rem; font-weight: 700; color: #1d4899; }
+
+.btn-download {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 9px;
+    width: 100%;
+    padding: 12px;
+    background: #1d4899;
+    color: white;
+    border: none;
+    border-radius: 9px;
     font-size: 0.95rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+.btn-download:hover:not(:disabled) { background: #163a7a; }
+.btn-download:disabled { opacity: 0.6; cursor: not-allowed; }
+
+/* ── Vorschau-Panel ── */
+.preview-card { padding: 0; overflow: hidden; }
+
+.preview-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.preview-title { font-size: 0.9rem; font-weight: 700; color: #111827; }
+
+.invoice-wrap { padding: 16px; background: #f5f6fa; min-height: 420px; }
+
+.invoice-doc {
+    background: white;
+    border-radius: 6px;
+    padding: 20px;
+    font-size: 0.72rem;
+    color: #111827;
+    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
+    line-height: 1.5;
+}
+
+.inv-top { display: flex; justify-content: flex-end; margin-bottom: 20px; }
+
+.inv-sender { display: flex; gap: 10px; align-items: flex-start; text-align: right; }
+
+.inv-sender-text {
+    display: flex;
+    flex-direction: column;
+    font-size: 0.68rem;
+    color: #374151;
+    text-align: right;
+    line-height: 1.6;
+}
+
+.inv-muted { color: #9ca3af; }
+
+.inv-address-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.inv-recipient { font-size: 0.7rem; line-height: 1.7; color: #374151; }
+
+.inv-recipient-label {
+    font-size: 0.6rem;
+    color: #9ca3af;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 4px;
+}
+
+.inv-meta { text-align: right; flex-shrink: 0; }
+
+.inv-rechnung-title {
+    font-size: 1rem;
+    font-weight: 800;
+    color: #1d4899;
+    letter-spacing: 0.08em;
+    margin-bottom: 8px;
+}
+
+.inv-meta-row {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    font-size: 0.68rem;
+    color: #374151;
+}
+
+.inv-meta-key { color: #9ca3af; }
+
+.inv-hr { border: none; border-top: 1px solid #e5e7eb; margin: 12px 0; }
+
+.inv-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.68rem;
+    margin-bottom: 8px;
+}
+
+.inv-table th {
+    text-align: left;
+    font-weight: 600;
+    color: #6b7280;
+    border-bottom: 1px solid #e5e7eb;
+    padding: 5px 6px;
+    font-size: 0.62rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.inv-table td { padding: 5px 6px; color: #374151; border-bottom: 1px solid #f3f4f6; }
+.inv-table tr:last-child td { border-bottom: none; }
+.ta-r { text-align: right; }
+
+.inv-empty {
+    text-align: center;
+    color: #9ca3af !important;
+    font-style: italic;
+    padding: 14px 0 !important;
+}
+
+/* ── Summen in Vorschau ── */
+.inv-summen {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 3px;
+    margin-bottom: 14px;
+}
+
+.inv-sum-row {
+    display: flex;
+    gap: 24px;
+    font-size: 0.66rem;
+    color: #6b7280;
+}
+
+.inv-sum-row span:last-child { min-width: 60px; text-align: right; font-variant-numeric: tabular-nums; }
+
+.inv-total {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    padding-top: 6px;
+    border-top: 1.5px solid #1d4899;
+    margin-top: 3px;
+}
+
+.inv-total-label { font-weight: 600; font-size: 0.72rem; color: #374151; }
+.inv-total-value { font-weight: 800; font-size: 0.88rem; color: #1d4899; font-variant-numeric: tabular-nums; }
+
+.inv-bank {
+    font-size: 0.62rem;
+    color: #9ca3af;
+    border-top: 1px solid #f0f0f0;
+    padding-top: 10px;
+}
+
+/* ── Seitennavigation ── */
+.page-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.btn-back {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: white;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 10px 20px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s;
+}
+.btn-back:hover { background: #f9fafb; border-color: #d1d5db; }
+
+.btn-next {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #1d4899;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 10px 22px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+.btn-next:hover { background: #163a7a; }
+
+/* ── Responsive ── */
+@media (max-width: 1024px) {
+    .main-grid { grid-template-columns: 1fr; }
+    .preview-card { display: none; }
+}
+
+@media (max-width: 640px) {
+    .field-row { grid-template-columns: 1fr; }
+    .field--plz { max-width: none; }
+    .stepper { flex-wrap: wrap; gap: 8px; }
+    .step-connector { display: none; }
+    .summen-row { flex-direction: column; }
 }
 </style>
diff --git a/composer.json b/composer.json
index 2cbcd47..efcb705 100644
--- a/composer.json
+++ b/composer.json
@@ -7,6 +7,7 @@
     "license": "MIT",
     "require": {
         "php": "^8.5",
+        "barryvdh/laravel-dompdf": "^3.1",
         "inertiajs/inertia-laravel": "^2.0",
         "laravel/framework": "^13.0"
     },
diff --git a/composer.lock b/composer.lock
index 4d56531..1cc69a4 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,8 +4,85 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "844b0bde1d19fc4ee7aed07fa973aaff",
+    "content-hash": "e9179c934253bee1b1afef146ded5a2b",
     "packages": [
+        {
+            "name": "barryvdh/laravel-dompdf",
+            "version": "v3.1.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/barryvdh/laravel-dompdf.git",
+                "reference": "ee3b72b19ccdf57d0243116ecb2b90261344dedc"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/barryvdh/laravel-dompdf/zipball/ee3b72b19ccdf57d0243116ecb2b90261344dedc",
+                "reference": "ee3b72b19ccdf57d0243116ecb2b90261344dedc",
+                "shasum": ""
+            },
+            "require": {
+                "dompdf/dompdf": "^3.0",
+                "illuminate/support": "^9|^10|^11|^12|^13.0",
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "larastan/larastan": "^2.7|^3.0",
+                "orchestra/testbench": "^7|^8|^9.16|^10|^11.0",
+                "phpro/grumphp": "^2.5",
+                "squizlabs/php_codesniffer": "^3.5"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "aliases": {
+                        "PDF": "Barryvdh\\DomPDF\\Facade\\Pdf",
+                        "Pdf": "Barryvdh\\DomPDF\\Facade\\Pdf"
+                    },
+                    "providers": [
+                        "Barryvdh\\DomPDF\\ServiceProvider"
+                    ]
+                },
+                "branch-alias": {
+                    "dev-master": "3.0-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Barryvdh\\DomPDF\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Barry vd. Heuvel",
+                    "email": "barryvdh@gmail.com"
+                }
+            ],
+            "description": "A DOMPDF Wrapper for Laravel",
+            "keywords": [
+                "dompdf",
+                "laravel",
+                "pdf"
+            ],
+            "support": {
+                "issues": "https://github.com/barryvdh/laravel-dompdf/issues",
+                "source": "https://github.com/barryvdh/laravel-dompdf/tree/v3.1.2"
+            },
+            "funding": [
+                {
+                    "url": "https://fruitcake.nl",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/barryvdh",
+                    "type": "github"
+                }
+            ],
+            "time": "2026-02-21T08:51:10+00:00"
+        },
         {
             "name": "brick/math",
             "version": "0.18.0",
@@ -376,6 +453,161 @@
             ],
             "time": "2024-02-05T11:56:58+00:00"
         },
+        {
+            "name": "dompdf/dompdf",
+            "version": "v3.1.5",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/dompdf/dompdf.git",
+                "reference": "f11ead23a8a76d0ff9bbc6c7c8fd7e05ca328496"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/dompdf/dompdf/zipball/f11ead23a8a76d0ff9bbc6c7c8fd7e05ca328496",
+                "reference": "f11ead23a8a76d0ff9bbc6c7c8fd7e05ca328496",
+                "shasum": ""
+            },
+            "require": {
+                "dompdf/php-font-lib": "^1.0.0",
+                "dompdf/php-svg-lib": "^1.0.0",
+                "ext-dom": "*",
+                "ext-mbstring": "*",
+                "masterminds/html5": "^2.0",
+                "php": "^7.1 || ^8.0"
+            },
+            "require-dev": {
+                "ext-gd": "*",
+                "ext-json": "*",
+                "ext-zip": "*",
+                "mockery/mockery": "^1.3",
+                "phpunit/phpunit": "^7.5 || ^8 || ^9 || ^10 || ^11",
+                "squizlabs/php_codesniffer": "^3.5",
+                "symfony/process": "^4.4 || ^5.4 || ^6.2 || ^7.0"
+            },
+            "suggest": {
+                "ext-gd": "Needed to process images",
+                "ext-gmagick": "Improves image processing performance",
+                "ext-imagick": "Improves image processing performance",
+                "ext-zlib": "Needed for pdf stream compression"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Dompdf\\": "src/"
+                },
+                "classmap": [
+                    "lib/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-2.1"
+            ],
+            "authors": [
+                {
+                    "name": "The Dompdf Community",
+                    "homepage": "https://github.com/dompdf/dompdf/blob/master/AUTHORS.md"
+                }
+            ],
+            "description": "DOMPDF is a CSS 2.1 compliant HTML to PDF converter",
+            "homepage": "https://github.com/dompdf/dompdf",
+            "support": {
+                "issues": "https://github.com/dompdf/dompdf/issues",
+                "source": "https://github.com/dompdf/dompdf/tree/v3.1.5"
+            },
+            "time": "2026-03-03T13:54:37+00:00"
+        },
+        {
+            "name": "dompdf/php-font-lib",
+            "version": "1.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/dompdf/php-font-lib.git",
+                "reference": "a6e9a688a2a80016ac080b97be73d3e10c444c9a"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/dompdf/php-font-lib/zipball/a6e9a688a2a80016ac080b97be73d3e10c444c9a",
+                "reference": "a6e9a688a2a80016ac080b97be73d3e10c444c9a",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "php": "^7.1 || ^8.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^7.5 || ^8 || ^9 || ^10 || ^11 || ^12"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "FontLib\\": "src/FontLib"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-2.1-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "The FontLib Community",
+                    "homepage": "https://github.com/dompdf/php-font-lib/blob/master/AUTHORS.md"
+                }
+            ],
+            "description": "A library to read, parse, export and make subsets of different types of font files.",
+            "homepage": "https://github.com/dompdf/php-font-lib",
+            "support": {
+                "issues": "https://github.com/dompdf/php-font-lib/issues",
+                "source": "https://github.com/dompdf/php-font-lib/tree/1.0.2"
+            },
+            "time": "2026-01-20T14:10:26+00:00"
+        },
+        {
+            "name": "dompdf/php-svg-lib",
+            "version": "1.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/dompdf/php-svg-lib.git",
+                "reference": "8259ffb930817e72b1ff1caef5d226501f3dfeb1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/dompdf/php-svg-lib/zipball/8259ffb930817e72b1ff1caef5d226501f3dfeb1",
+                "reference": "8259ffb930817e72b1ff1caef5d226501f3dfeb1",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "php": "^7.1 || ^8.0",
+                "sabberworm/php-css-parser": "^8.4 || ^9.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^7.5 || ^8 || ^9 || ^10 || ^11"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Svg\\": "src/Svg"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-3.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "The SvgLib Community",
+                    "homepage": "https://github.com/dompdf/php-svg-lib/blob/master/AUTHORS.md"
+                }
+            ],
+            "description": "A library to read, parse and export to PDF SVG files.",
+            "homepage": "https://github.com/dompdf/php-svg-lib",
+            "support": {
+                "issues": "https://github.com/dompdf/php-svg-lib/issues",
+                "source": "https://github.com/dompdf/php-svg-lib/tree/1.0.2"
+            },
+            "time": "2026-01-02T16:01:13+00:00"
+        },
         {
             "name": "dragonmantank/cron-expression",
             "version": "v3.6.0",
@@ -2033,6 +2265,73 @@
             ],
             "time": "2026-03-08T20:05:35+00:00"
         },
+        {
+            "name": "masterminds/html5",
+            "version": "2.10.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Masterminds/html5-php.git",
+                "reference": "fd5018f6815fff903946d0564977b44ce8010e29"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Masterminds/html5-php/zipball/fd5018f6815fff903946d0564977b44ce8010e29",
+                "reference": "fd5018f6815fff903946d0564977b44ce8010e29",
+                "shasum": ""
+            },
+            "require": {
+                "ext-dom": "*",
+                "php": ">=5.3.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^4.8.35 || ^5.7.21 || ^6 || ^7 || ^8 || ^9 || ^10"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.7-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Masterminds\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Matt Butcher",
+                    "email": "technosophos@gmail.com"
+                },
+                {
+                    "name": "Matt Farina",
+                    "email": "matt@mattfarina.com"
+                },
+                {
+                    "name": "Asmir Mustafic",
+                    "email": "goetas@gmail.com"
+                }
+            ],
+            "description": "An HTML5 parser and serializer.",
+            "homepage": "http://masterminds.github.io/html5-php",
+            "keywords": [
+                "HTML5",
+                "dom",
+                "html",
+                "parser",
+                "querypath",
+                "serializer",
+                "xml"
+            ],
+            "support": {
+                "issues": "https://github.com/Masterminds/html5-php/issues",
+                "source": "https://github.com/Masterminds/html5-php/tree/2.10.1"
+            },
+            "time": "2026-06-23T18:43:15+00:00"
+        },
         {
             "name": "monolog/monolog",
             "version": "3.10.0",
@@ -3171,6 +3470,86 @@
             },
             "time": "2026-06-18T03:57:49+00:00"
         },
+        {
+            "name": "sabberworm/php-css-parser",
+            "version": "v9.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/MyIntervals/PHP-CSS-Parser.git",
+                "reference": "fd3bf9fb173e0df649bc4e3e0d088a1b2417c08f"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/MyIntervals/PHP-CSS-Parser/zipball/fd3bf9fb173e0df649bc4e3e0d088a1b2417c08f",
+                "reference": "fd3bf9fb173e0df649bc4e3e0d088a1b2417c08f",
+                "shasum": ""
+            },
+            "require": {
+                "ext-iconv": "*",
+                "php": "^7.2.0 || ~8.0.0 || ~8.1.0 || ~8.2.0 || ~8.3.0 || ~8.4.0 || ~8.5.0",
+                "thecodingmachine/safe": "^1.3 || ^2.5 || ^3.4"
+            },
+            "require-dev": {
+                "php-parallel-lint/php-parallel-lint": "1.4.0",
+                "phpstan/extension-installer": "1.4.3",
+                "phpstan/phpstan": "1.12.33 || 2.2.2",
+                "phpstan/phpstan-phpunit": "1.4.2 || 2.0.16",
+                "phpstan/phpstan-strict-rules": "1.6.2 || 2.0.11",
+                "phpunit/phpunit": "8.5.52",
+                "rawr/phpunit-data-provider": "3.3.1",
+                "rector/rector": "1.2.10 || 2.4.6",
+                "rector/type-perfect": "1.0.0 || 2.1.3",
+                "squizlabs/php_codesniffer": "4.0.1",
+                "thecodingmachine/phpstan-safe-rule": "1.2.0 || 1.4.3"
+            },
+            "suggest": {
+                "ext-mbstring": "for parsing UTF-8 CSS"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "9.5.x-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/Rule/Rule.php",
+                    "src/RuleSet/RuleContainer.php"
+                ],
+                "psr-4": {
+                    "Sabberworm\\CSS\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Raphael Schweikert"
+                },
+                {
+                    "name": "Oliver Klee",
+                    "email": "github@oliverklee.de"
+                },
+                {
+                    "name": "Jake Hotson",
+                    "email": "jake.github@qzdesign.co.uk"
+                }
+            ],
+            "description": "Parser for CSS Files written in PHP",
+            "homepage": "https://www.sabberworm.com/blog/2010/6/10/php-css-parser",
+            "keywords": [
+                "css",
+                "parser",
+                "stylesheet"
+            ],
+            "support": {
+                "issues": "https://github.com/MyIntervals/PHP-CSS-Parser/issues",
+                "source": "https://github.com/MyIntervals/PHP-CSS-Parser/tree/v9.4.0"
+            },
+            "time": "2026-06-18T15:10:53+00:00"
+        },
         {
             "name": "symfony/clock",
             "version": "v8.1.0",
@@ -5650,6 +6029,149 @@
             ],
             "time": "2026-06-09T10:54:51+00:00"
         },
+        {
+            "name": "thecodingmachine/safe",
+            "version": "v3.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thecodingmachine/safe.git",
+                "reference": "705683a25bacf0d4860c7dea4d7947bfd09eea19"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/thecodingmachine/safe/zipball/705683a25bacf0d4860c7dea4d7947bfd09eea19",
+                "reference": "705683a25bacf0d4860c7dea4d7947bfd09eea19",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "php-parallel-lint/php-parallel-lint": "^1.4",
+                "phpstan/phpstan": "^2",
+                "phpunit/phpunit": "^10",
+                "squizlabs/php_codesniffer": "^3.2"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "lib/special_cases.php",
+                    "generated/apache.php",
+                    "generated/apcu.php",
+                    "generated/array.php",
+                    "generated/bzip2.php",
+                    "generated/calendar.php",
+                    "generated/classobj.php",
+                    "generated/com.php",
+                    "generated/cubrid.php",
+                    "generated/curl.php",
+                    "generated/datetime.php",
+                    "generated/dir.php",
+                    "generated/eio.php",
+                    "generated/errorfunc.php",
+                    "generated/exec.php",
+                    "generated/fileinfo.php",
+                    "generated/filesystem.php",
+                    "generated/filter.php",
+                    "generated/fpm.php",
+                    "generated/ftp.php",
+                    "generated/funchand.php",
+                    "generated/gettext.php",
+                    "generated/gmp.php",
+                    "generated/gnupg.php",
+                    "generated/hash.php",
+                    "generated/ibase.php",
+                    "generated/ibmDb2.php",
+                    "generated/iconv.php",
+                    "generated/image.php",
+                    "generated/imap.php",
+                    "generated/info.php",
+                    "generated/inotify.php",
+                    "generated/json.php",
+                    "generated/ldap.php",
+                    "generated/libxml.php",
+                    "generated/lzf.php",
+                    "generated/mailparse.php",
+                    "generated/mbstring.php",
+                    "generated/misc.php",
+                    "generated/mysql.php",
+                    "generated/mysqli.php",
+                    "generated/network.php",
+                    "generated/oci8.php",
+                    "generated/opcache.php",
+                    "generated/openssl.php",
+                    "generated/outcontrol.php",
+                    "generated/pcntl.php",
+                    "generated/pcre.php",
+                    "generated/pgsql.php",
+                    "generated/posix.php",
+                    "generated/ps.php",
+                    "generated/pspell.php",
+                    "generated/readline.php",
+                    "generated/rnp.php",
+                    "generated/rpminfo.php",
+                    "generated/rrd.php",
+                    "generated/sem.php",
+                    "generated/session.php",
+                    "generated/shmop.php",
+                    "generated/sockets.php",
+                    "generated/sodium.php",
+                    "generated/solr.php",
+                    "generated/spl.php",
+                    "generated/sqlsrv.php",
+                    "generated/ssdeep.php",
+                    "generated/ssh2.php",
+                    "generated/stream.php",
+                    "generated/strings.php",
+                    "generated/swoole.php",
+                    "generated/uodbc.php",
+                    "generated/uopz.php",
+                    "generated/url.php",
+                    "generated/var.php",
+                    "generated/xdiff.php",
+                    "generated/xml.php",
+                    "generated/xmlrpc.php",
+                    "generated/yaml.php",
+                    "generated/yaz.php",
+                    "generated/zip.php",
+                    "generated/zlib.php"
+                ],
+                "classmap": [
+                    "lib/DateTime.php",
+                    "lib/DateTimeImmutable.php",
+                    "lib/Exceptions/",
+                    "generated/Exceptions/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "description": "PHP core functions that throw exceptions instead of returning FALSE on error",
+            "support": {
+                "issues": "https://github.com/thecodingmachine/safe/issues",
+                "source": "https://github.com/thecodingmachine/safe/tree/v3.4.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/OskarStark",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/shish",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/silasjoisten",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/staabm",
+                    "type": "github"
+                }
+            ],
+            "time": "2026-02-04T18:08:13+00:00"
+        },
         {
             "name": "tijsverkoyen/css-to-inline-styles",
             "version": "v2.4.0",
diff --git a/konzept.png b/konzept.png
new file mode 100644
index 0000000..c3688b1
Binary files /dev/null and b/konzept.png differ
diff --git a/logo.png b/logo.png
new file mode 100644
index 0000000..58e8f87
Binary files /dev/null and b/logo.png differ
diff --git a/public/wbm.png b/public/wbm.png
new file mode 100644
index 0000000..a6410c7
Binary files /dev/null and b/public/wbm.png differ
diff --git a/resources/js/app.js b/resources/js/app.js
index ec94d36..952f441 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -14,8 +14,8 @@ import {
     faStar, faClock, faCircleQuestion, faSliders,
     faBell, faMagnifyingGlass,
     faGraduationCap, faFileInvoice, faHeart, faCertificate,
-    faChevronRight, faArrowRightFromBracket, faCube,
-    faTriangleExclamation,
+    faChevronRight, faChevronLeft, faArrowRightFromBracket, faCube,
+    faTriangleExclamation, faPlus, faFilePdf, faDownload,
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -24,8 +24,8 @@ library.add(
     faStar, faClock, faCircleQuestion, faSliders,
     faBell, faMagnifyingGlass,
     faGraduationCap, faFileInvoice, faHeart, faCertificate,
-    faChevronRight, faArrowRightFromBracket, faCube,
-    faTriangleExclamation,
+    faChevronRight, faChevronLeft, faArrowRightFromBracket, faCube,
+    faTriangleExclamation, faPlus, faFilePdf, faDownload,
 )
 
 InertiaProgress.init()
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index a05f46c..ec0d11d 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -3,6 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="csrf-token" content="{{ csrf_token() }}">
 
         <title inertia>{{ config('app.name', 'Nexus') }}</title>
 
diff --git a/resources/views/pdf/rechnung.blade.php b/resources/views/pdf/rechnung.blade.php
new file mode 100644
index 0000000..e5aa029
--- /dev/null
+++ b/resources/views/pdf/rechnung.blade.php
@@ -0,0 +1,336 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<title>Rechnung {{ $rechnungsnummer }}</title>
+<style>
+
+@page {
+    size: A4 portrait;
+    margin: 0;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+    font-family: 'DejaVu Sans', sans-serif;
+    font-size: 9.5pt;
+    color: #1a1a1a;
+    background: white;
+}
+
+
+/* ── Kohte: steht zwischen Empfänger und Kontaktdaten ── */
+.kohte-img {
+    width: 13mm;
+    height: 13mm;
+    display: block;
+    margin: 0 auto;
+}
+
+/* ── Seiteninhalt ── */
+.page {
+    padding: 10mm 18mm 20mm 10mm;
+}
+
+/* ── Kopfbereich ── */
+.header-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 6mm;
+}
+.header-table td { vertical-align: top; padding: 0; }
+
+/* Rücksendeadresse (schmale Linie über Empfänger) */
+.absender-rueck {
+    font-size: 6pt;
+    color: #555;
+    border-bottom: 0.3pt solid #888;
+    padding-bottom: 1.5mm;
+    margin-bottom: 3.5mm;
+}
+
+/* Empfängeradresse */
+.empfaenger { font-size: 10pt; line-height: 1.65; }
+.empfaenger-bold { font-weight: bold; }
+
+/* ── BdP Logo ── */
+.logo-img {
+    width: 36mm;
+    display: block;
+    margin-bottom: 4mm;
+}
+
+/* Absenderadresse rechts (linksbündig) */
+.absender-block {
+    font-size: 7.5pt;
+    color: #1a4799;
+    line-height: 1.7;
+}
+.absender-name {
+    font-weight: bold;
+    font-size: 8pt;
+}
+
+/* ── Betreff ── */
+.betreff {
+    font-size: 14pt;
+    color: #1a4799;
+    margin-bottom: 5mm;
+}
+
+/* ── Referenzdaten ── */
+.ref-table {
+    border-collapse: collapse;
+    font-size: 8.5pt;
+    margin-bottom: 7mm;
+}
+.ref-table td { padding: 0.9mm 7mm 0.9mm 0; vertical-align: top; }
+.ref-key { color: #666; white-space: nowrap; }
+
+/* ── Anrede / Text ── */
+.salutation { font-size: 9.5pt; margin-bottom: 3mm; }
+.intro-text  { font-size: 9pt; line-height: 1.6; margin-bottom: 7mm; color: #333; }
+
+/* ── Positionstabelle ── */
+.pos-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 8.5pt;
+}
+.pos-table th {
+    background-color: #1a4799;
+    color: white;
+    padding: 2.5mm 3mm;
+    text-align: left;
+    font-size: 7.5pt;
+    letter-spacing: 0.03em;
+}
+.pos-table th.r, .pos-table td.r { text-align: right; }
+.pos-table td {
+    padding: 2mm 3mm;
+    border-bottom: 0.3pt solid #d8dde6;
+    vertical-align: top;
+}
+.pos-table tr:nth-child(even) td { background-color: #f7f8fb; }
+.pos-table tr:last-child td { border-bottom: none; }
+.pos-empty {
+    text-align: center;
+    color: #aaa;
+    font-style: italic;
+    padding: 3mm 0 !important;
+    background: none !important;
+}
+
+/* ── Summen ── */
+.sum-outer { width: 100%; border-collapse: collapse; margin-top: 1mm; margin-bottom: 5mm; }
+.sum-outer td { padding: 0; }
+.sum-spacer { width: 55%; }
+.sum-inner { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
+.sum-inner td { padding: 1.2mm 0; }
+.sum-key { color: #555; padding-right: 6mm; white-space: nowrap; }
+.sum-val { text-align: right; white-space: nowrap; }
+.sum-line td { border-top: 0.4pt solid #bbb; padding-top: 2mm; }
+.sum-total td {
+    font-weight: bold;
+    font-size: 11pt;
+    color: #1a4799;
+    border-top: 1.5pt solid #1a4799;
+    padding-top: 2mm;
+}
+
+/* ── Bankverbindung ── */
+.bank-box {
+    border-left: 3pt solid #f5c400;
+    padding: 3mm 5mm;
+    background-color: #fffef5;
+    font-size: 8.5pt;
+    line-height: 1.6;
+    margin-bottom: 6mm;
+}
+.bank-head {
+    font-size: 7pt;
+    font-weight: bold;
+    color: #888;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    margin-bottom: 2mm;
+}
+.bank-hint {
+    margin-top: 1.5mm;
+    font-size: 7.5pt;
+    color: #999;
+}
+
+/* ── Grußformel ── */
+.closing      { font-size: 9.5pt; line-height: 1.5; }
+.gut-pfad     { font-size: 13pt; color: #1a4799; margin-top: 1mm; margin-bottom: 1mm; }
+.closing-name { margin-top: 3mm; font-size: 9pt; }
+
+</style>
+</head>
+<body>
+
+
+<div class="page">
+
+    <!-- ══════════ KOPF ══════════ -->
+    <table class="header-table">
+        <tr>
+
+            <!-- LINKS: Rücksendezeile + Empfänger -->
+            <td style="width: 50%; padding-top: 4mm;">
+                <div class="absender-rueck">
+                    BdP Bund der Pfadfinder*innen LV Sachsen e.V. &middot;
+                    c/o Mandy Grazek &middot; Weststra&szlig;e 53c &middot; 09212 Limbach-Oberfrohna
+                </div>
+                <div class="empfaenger">
+                    @if($organisation)
+                        <div class="empfaenger-bold">{{ $organisation }}</div>
+                    @endif
+                    @if($vorname || $nachname)
+                        <div class="empfaenger-bold">
+                            {{ trim($anrede . ' ' . $vorname . ' ' . $nachname) }}
+                        </div>
+                    @endif
+                    @if($adresse)
+                        <div>{{ $adresse }}</div>
+                    @endif
+                    @if($plz || $ort)
+                        <div>{{ trim($plz . ' ' . $ort) }}</div>
+                    @endif
+                    @if(!$organisation && !$vorname && !$nachname)
+                        <div style="color:#aaa;font-style:italic;">Kein Empfänger angegeben</div>
+                    @endif
+                </div>
+            </td>
+
+            <!-- MITTE: Kohte (zwischen Empfänger und Kontaktdaten) -->
+            <td style="vertical-align: middle; padding-top: 4mm; width: 9%; padding-right: 20px;">
+                <img src="{{ $kohteDataUri }}" style="width: 115px; height: 130px;" class="kohte-img" />
+            </td>
+
+            <!-- RECHTS: BdP Logo + Kontaktdaten (linksbündig) -->
+            <td style="width: 41%; vertical-align: top; padding-top: 2mm;">
+
+                <!-- BdP Wortmarke -->
+                <img src="{{ $logoDataUri }}" class="logo-img" />
+
+                <!-- Absenderadresse -->
+                <div class="absender-block">
+                    <div class="absender-name">Bund der Pfadfinder*innen</div>
+                    <div>Landesverband Sachsen e.V.&nbsp;(BdP)</div>
+                    <div>c/o Mandy Grazek</div>
+                    <div style="margin-top:2.5mm;">Weststra&szlig;e&nbsp;53c</div>
+                    <div>09212&nbsp;Limbach&#8209;Oberfrohna</div>
+                    <div style="margin-top:2.5mm;">Thomas Günther</div>
+                    <div style="margin-top:2.5mm;">{{ $absenderEmail }}</div>
+                    @if($absenderTelefon)
+                    <div>{{ $absenderTelefon }}</div>
+                    @endif
+                </div>
+
+            </td>
+        </tr>
+    </table>
+
+    <!-- ══════════ BETREFF ══════════ -->
+    <div class="betreff">Rechnung Nr.&nbsp;{{ $rechnungsnummer }}</div>
+
+    <!-- ══════════ REFERENZDATEN ══════════ -->
+    <table class="ref-table">
+        <tr>
+            <td class="ref-key">Rechnungsdatum:</td>
+            <td>{{ $rechnungsdatumFormatiert }}</td>
+            <td style="width: 8mm;"></td>
+            <td class="ref-key">Rechnungs-Nr.:</td>
+            <td>{{ $rechnungsnummer }}</td>
+        </tr>
+        @if($zahlungsziel)
+        <tr>
+            <td class="ref-key">Zahlungsziel:</td>
+            <td colspan="4">{{ $zahlungszielFormatiert }}</td>
+        </tr>
+        @endif
+    </table>
+
+    <!-- ══════════ ANREDE + EINLEITUNG ══════════ -->
+    <div class="salutation">
+        Hallo,
+    </div>
+    <div class="intro-text">
+        anbei übersenden wir folgende Rechnungmit der Bitte um Überweisung des Gesamtbetrags
+        bis zum {{ $zahlungszielFormatiert }} auf das unten angegebene Konto.
+    </div>
+
+    <!-- ══════════ POSITIONEN ══════════ -->
+    <table class="pos-table">
+        <thead>
+            <tr>
+                <th style="width:8%;">Nr.</th>
+                <th style="width:44%;">Bezeichnung</th>
+                <th style="width:12%;" class="r">Menge</th>
+                <th style="width:18%;" class="r">Einzelpreis</th>
+                <th style="width:18%;" class="r">Gesamt</th>
+            </tr>
+        </thead>
+        <tbody>
+            @forelse($positionen as $i => $pos)
+            <tr>
+                <td>{{ $i + 1 }}</td>
+                <td>{{ $pos['bezeichnung'] }}</td>
+                <td class="r">{{ number_format((float)($pos['menge'] ?? 0), 2, ',', '.') }}&nbsp;{{ $pos['einheit'] ?? '' }}</td>
+                <td class="r">{{ number_format((float)($pos['einzelpreis'] ?? 0), 2, ',', '.') }}&nbsp;&euro;</td>
+                <td class="r">{{ number_format((float)($pos['menge'] ?? 0) * (float)($pos['einzelpreis'] ?? 0), 2, ',', '.') }}&nbsp;&euro;</td>
+            </tr>
+            @empty
+            <tr>
+                <td colspan="5" class="pos-empty">Keine Positionen erfasst.</td>
+            </tr>
+            @endforelse
+        </tbody>
+    </table>
+
+    <!-- ══════════ SUMMEN ══════════ -->
+    <table class="sum-outer">
+        <tr>
+            <td class="sum-spacer"></td>
+            <td>
+                <table class="sum-inner">
+                    <tr>
+                        <td class="sum-key">Nettobetrag</td>
+                        <td class="sum-val">{{ number_format($netto, 2, ',', '.') }}&nbsp;&euro;</td>
+                    </tr>
+                    <tr class="sum-line">
+                        <td class="sum-key">zzgl. {{ $mwstSatz }}&nbsp;% MwSt.</td>
+                        <td class="sum-val">{{ number_format($mwst, 2, ',', '.') }}&nbsp;&euro;</td>
+                    </tr>
+                    <tr class="sum-total">
+                        <td class="sum-key">Gesamtbetrag</td>
+                        <td class="sum-val">{{ number_format($brutto, 2, ',', '.') }}&nbsp;&euro;</td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+
+    <!-- ══════════ BANKVERBINDUNG ══════════ -->
+    @if($iban || $bic)
+    <div class="bank-box">
+        <div class="bank-head">Bankverbindung</div>
+        <div>Kontoinhaber: BdP Landesverband Sachsen e.V.</div>
+        @if($iban)<div>IBAN:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>{{ $iban }}</strong></div>@endif
+        @if($bic)<div>BIC:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>{{ $bic }}</strong></div>@endif
+    </div>
+    @endif
+
+    <!-- ══════════ GRUSSFORMEL ══════════ -->
+    <div class="closing">
+        <div class="gut-pfad">Herzlichst Gut Pfad.</div>
+        <div class="closing-name">
+        BdP Landesverband Sachsen e.V.<br />
+        Landesschatzmeister<br />
+        Thomas Günther</div>
+    </div>
+
+</div>
+</body>
+</html>