fix(navbar): fix profile dropdown hover gap

Resolved conflict in customer-accordion-list.tsx by keeping
the per-device flattening (DeviceCard) implementation.

.agents/agents.md

@@ -0,0 +1,18 @@
+# Antigravity Agent Configuration (Project Rocky)
+
+## Agent: Rocky_Manager
+- **Role**: Hauptkoordinator des Rocky-Projekts.
+- **Responsibility**: Verteilt Aufgaben an Spezialisten basierend auf den Skill-Anforderungen.
+
+## Agent: Dokumenten_Spezialist
+- **Role**: Verantwortlich für Exporte und Berichte.
+- **Assigned_Skills**: [".agents/skills/pdf_skill.md"]
+
+## Agent: Kommunikations_Spezialist
+- **Role**: Verantwortlich für Benachrichtigungen und Kundenkontakt.
+- **Assigned_Skills**: [".agents/skills/email_skill.md"]
+
+## Agent: Compliance_Supervisor
+- **Role**: Prüft den geschriebenen Code auf Datenschutzfehler.
+- **Assigned_Skills**: [".agents/skills/dsgvo_skill.md"]
+- **Rule**: "Blockiere jeden Git-Commit, wenn der Code gegen die DSGVO-Vorgaben verstößt."

.agents/skills/b2b-mail-dispatcher/skill.md

@@ -0,0 +1,8 @@
+---
+name: b2b-mail-dispatcher
+description: Verwaltet den SMTP-E-Mail-Versand bei Statusänderungen von Bestellungen und stellt transaktionale Zuverlässigkeit sicher.
+---
+Richtlinien für die E-Mail-Kommunikation:
+1. Wann immer der Status einer Bestellung in der Datenbank oder via Server Action mutiert wird (`status`-Übergang), triggere ein Event für den E-Mail-Versand.
+2. Die E-Mail muss transaktionssicher über die SMTP-Konfiguration gesendet werden und an die im Benutzerprofil hinterlegte Adresse gehen.
+3. Bei erfolgreichem Checkout hänge das generierte PDF aus dem Supabase Storage als Datei-Attachment an die E-Mail an.

.agents/skills/commit-work/skill.md

@@ -0,0 +1,37 @@
+---
+name: commit-work
+description: Erzwingt Conventional Commits mit atomaren, imperativ formulierten Commit-Messages nach strikter Spezifikation.
+---
+
+# Skill: Conventional Commits Expert
+
+## Purpose
+Ensure all code changes are committed using the strict Conventional Commits specification.
+
+## Rules
+1. **Atomic Commits**: Stage and commit only ONE logical change at a time.
+2. **Imperative Mood**: Always use the imperative present tense (e.g., "add" instead of "added" or "adds").
+3. **Case & Punctuation**: Start the description with a lowercase letter. Do not end with a period.
+4. **Length**: Keep the first line under 50 characters.
+
+## Commit Message Structure
+<type>(<optional scope>): <description>
+
+[optional body]
+
+[optional footer(s)]
+
+## Allowed Types
+- `feat`: A new feature for the user.
+- `fix`: A bug fix for the user.
+- `docs`: Changes to the documentation.
+- `style`: Formatting, missing semi-colons, etc. (no production code change).
+- `refactor`: Refactoring production code (neither fixes a bug nor adds a feature).
+- `test`: Adding missing tests or correcting existing tests.
+- `chore`: Updating build tasks, package manager configs, etc.
+
+## Workflow
+1. Run `git diff --cached` to see staged changes.
+2. If multiple features are changed, unstage and split them.
+3. Generate the commit message matching the structural rules above.
+4. Execute `git commit -m "<message>"`.

.agents/skills/dsgvo_skill.md

@@ -0,0 +1,6 @@
+# Skill: DSGVO & Datenschutz-Compliance (Rocky-Projekt)
+
+## Regeln für Aufgaben:
+1. **Daten-Minimierung**: Spezialisten dürfen personenbezogene Daten (wie E-Mail-Adressen oder Klarnamen) niemals in Log-Dateien oder im Git-Verlauf speichern.
+2. **Verschlüsselung**: Daten im Rocky-Projekt müssen "at rest" und "in transit" (mindestens TLS 1.3) verschlüsselt werden.
+3. **Anonymisierung**: Für Testzwecke im Terminal-Subagent dürfen nur synthetische Dummy-Daten verwendet werden. Keine echten Kundendaten nutzen!

.agents/skills/email_skill.md

@@ -0,0 +1,6 @@
+# Skill: E-Mail-Kommunikation (Rocky-Projekt)
+
+## Regeln für Aufgaben:
+1. **Tonalität**: Professionell, höflich und im Corporate Design des Rocky-Projekts.
+2. **Sicherheit**: Sende niemals Passwörter, Token oder unverschlüsselte API-Keys per E-Mail.
+3. **Fallbacks**: Wenn ein E-Mail-Versand fehlschlägt, schreibe den Fehler sofort in die lokale Log-Datei `rocky_mail_errors.log` und benachrichtige den Manager-Agenten.

.agents/skills/gdpr-anonymizer/skill.md

@@ -0,0 +1,8 @@
+---
+name: gdpr-anonymizer
+description: Setzt die DSGVO-konforme Anonymisierung von Endkunden um, ohne historische Steuerdaten zu beschädigen.
+---
+Regeln für das Feature `/my-customers` (Anonymisieren):
+1. Überschreibe `first_name`, `last_name`, `street`, `zip`, `city`, `email` und alle Bankdaten in `end_customers` hart mit dem String `[GELÖSCHT]`.
+2. Setze `is_anonymized = true`.
+3. Führe NIEMALS Kaskaden-Löschungen oder Updates auf der Tabelle `orders` aus, wenn ein Kunde anonymisiert wird. Die Snapshots müssen unverändert bleiben.

.agents/skills/grand-functions/SKILL.md

@@ -0,0 +1,15 @@
+---
+name: grand-functions
+description: Dokumentation und Spezifikation des CASPOS Webshops inklusive Datenmodell, Kernprozessen und Sicherheitskonzept.
+---
+
+# Grand Functions - CASPOS Webshop Spezifikation
+
+Dieser Skill enthält die vollständige Dokumentation und Spezifikation des CASPOS Webshops. Die Spezifikationen sind in logische Referenzdokumente unterteilt:
+
+- [Projekt-Überblick & Tech-Stack](file:///c:/source/webshop/.agents/skills/grand-functions/references/overviews.md)
+- [Datenmodell & Schema](file:///c:/source/webshop/.agents/skills/grand-functions/references/schema.md)
+- [Kernprozesse](file:///c:/source/webshop/.agents/skills/grand-functions/references/processes.md)
+- [Sicherheitskonzept (RLS)](file:///c:/source/webshop/.agents/skills/grand-functions/references/security.md)
+- [Testumgebung & -abdeckung](file:///c:/source/webshop/.agents/skills/grand-functions/references/testing.md)
+

.agents/skills/grand-functions/references/overviews.md

@@ -0,0 +1,16 @@
+# Projekt-Überblick & Technologie-Stack
+
+## 1. Projekt-Überblick
+
+Der CASPOS Webshop ist ein B2B-Portal für Vertriebspartner. Partner können hier Software-Pakete und Zusatzmodule (für POS/Kassenlösungen) konfigurieren, Anfragen für ihre Endkunden erstellen und Lizenzen verwalten.
+
+---
+
+## 2. Technologie-Stack
+
+- **Frontend/Backend**: Next.js 15+ (App Router, React Server Components, Server Actions).
+- **Styling**: Tailwind CSS & Vanilla CSS (modernes Dark-Theme).
+- **Datenbank & Auth**: Supabase (PostgreSQL, Row Level Security - RLS, Supabase Auth).
+- **E-Mail-Versand**: SMTP-Integration für automatisierte Bestätigungen.
+- **PDF-Generierung**: `@react-pdf/renderer` zur Erzeugung von Anfragebestätigungen als PDF.
+- **Storage**: Supabase Storage (`invoices` Bucket) zur Archivierung der PDF-Dokumente.

.agents/skills/grand-functions/references/processes.md

@@ -0,0 +1,75 @@
+# Kernprozesse
+
+```mermaid
+graph TD
+    A[Partner loggt sich ein] --> B{Firma zugewiesen?}
+    B -- Nein --> C[Fehlermeldung: Kein Zutritt zum Wizard]
+    B -- Ja --> D[Wizard öffnen / Konfigurieren]
+    D --> E[Endkunden auswählen/anlegen]
+    E --> F[Produkte & Module wählen]
+    F --> G{Validierung erfolgreich?}
+    G -- Nein --> H[Validierungsfehler anzeigen]
+    G -- Ja --> I[Bestellung absenden]
+    I --> J[Snapshot einfrieren & in DB speichern]
+    J --> K[Rechnungs-PDF generieren & in Storage laden]
+    K --> L[E-Mail mit PDF an Partner senden]
+    L --> M[Bestellung in der Übersicht anzeigen]
+```
+
+### A. Partner- & Unternehmens-Hierarchie
+1. Ein neu registrierter User hat die Rolle `partner` und ist zunächst keiner Firma zugeordnet.
+2. Der Administrator ordnet den User in der Admin-Oberfläche (`/admin/users`) einem Unternehmen (`companies`) zu.
+3. Nur wenn der User einer Firma zugewiesen ist (oder Admin ist), kann er Endkunden anlegen und Bestellungen aufgeben.
+
+### B. Endkunden-Verwaltung (`/my-customers`)
+- **Firmenweite Sicht**: Da `end_customers.partner_id` on `companies.id` verweist, sehen alle Mitarbeiter desselben Unternehmens dieselben Endkunden.
+- **DSGVO Anonymisierung**: Endkunden können unwiderruflich anonymisiert werden. Dabei werden sensible Daten mit `[GELÖSCHT]` überschrieben und `is_anonymized` auf `true` gesetzt. In existierenden Bestellungen (`orders.customer_data`) bleiben die Daten zu steuerlichen Zwecken unverändert.
+
+### C. Bestell-Wizard & Validierung (`/order`)
+- **Kategorie-Pflichten**: Wenn eine Produktkategorie als `is_required` definiert ist, muss ein Produkt ausgewählt werden.
+- **Abhängigkeiten (Requirements)**: Ein Modul oder Produkt kann andere Module/Produkte voraussetzen (z.B. Modul B erfordert Modul A). Das System prüft dies client- und serverseitig.
+- **Top-Down State-Management**:
+  - Die Wahl eines Basis-Produkts steuert die Sichtbarkeit und Wählbarkeit aller Module (Top-Down). Modul-Auswahlen dürfen niemals die Liste der wählbaren Basis-Produkte beeinflussen (Verhinderung von UI-Deadlocks).
+  - **Auto-Reset & Kaskaden-Bereinigung**: Beim Wechsel des Basis-Produkts in `selectProduct` werden inkompatible Module in anderen Kategorien automatisch über eine Kaskaden-Bereinigung (Filterung der `moduleIds` basierend auf den `exclusions` des neuen Produkts) deselektiert.
+  - **Sichtbarkeits- & Wählbarkeits-Garantie**: Basis-Produkte werden im UI niemals durch Modulausschlüsse ausgeblendet. Nachgelagerte Produkte/Module, die mit dem ausgewählten Basis-Produkt inkompatibel sind, erhalten im JSX das `disabled`-Attribut und sind nicht anklickbar (Sperrung von "Kein Backoffice" bei "Small Business"). Klicks auf Module haben keinerlei Rückwirkung auf die Basis-Produkt-Auswahl.
+  - **Radio-Button-Verhalten (allow_multiselect = false)**: Falls eine Kategorie keine Mehrfachauswahl erlaubt, wird bei Auswahl eines neuen Moduls das zuvor ausgewählte Modul dieser Kategorie automatisch abgewählt.
+- **Snapshot-Architektur**: Sobald eine Bestellung aufgegeben wird, werden die Kundendaten (`CustomerSnapshot`) und Produktkonfigurationen (`OrderSnapshot` samt Preisen und Modulversionen) in `orders` als JSONB-Snapshots eingefroren. Preisänderungen im Katalog haben keinen Einfluss auf bestehende Bestellungen.
+
+### D. Bestellungs-Verwaltung & Statusübergang
+- **Sichtbarkeit**: Partner sehen in `/my-orders` alle Bestellungen aller Mitarbeiter ihrer Firma.
+- **Bearbeiten**: Unvollständige Bestellungen (`status != 'completed'`) können von jedem Mitarbeiter der jeweiligen Firma nachträglich editiert werden.
+- **Admin-Workflow**: Admins sehen in `/admin/orders` alle Bestellungen global, können den Status ändern (z.B. von *Eingegangen* auf *In Bearbeitung* oder *Abgeschlossen*) und PDF-Rechnungen manuell herunterladen.
+- **Statusänderungs-Mails**: Bei jedem Statusübergang wird automatisch eine Benachrichtigungs-E-Mail an den Besteller geschickt.
+
+---
+
+### E. Multi-Kassen-Warenkorb & Checkout-Split
+- **Endpunkt / Server Action**: `POST /api/orders/checkout` sowie Server Action `checkoutAction` in `app/actions/checkout.ts`
+- **Funktionsweise**:
+  - Empfängt ein Array von `items` (Kassenkonfigurationen).
+  - Validiert Auth und Partner-Firma Zuweisung.
+  - Generiert einen `order_hash` zur Vermeidung von Doppelübermittlungen (Idempotenz-Guard).
+  - Teilt die Konfigurationen nach `billingInterval` / `billingType` auf (Kauf vs. Abo).
+  - Erstellt separate Orders in der Datenbank:
+    - Typ `purchase`: Anfrage für Kauf-Lizenzen (Zahlungsart: Vormerkung/Angebot).
+    - Typ `subscription`: Anfrage für Software-Abonnement (Zahlungsart: SEPA).
+  - Friert für jede Order einen konsolidierten `order_data` (JSONB) und `customer_data` (JSONB) ein.
+  - Triggert die PDF-Erstellung und den E-Mail-Versand unabhängig für jede generierte Order (gibt Order-IDs für Post-Processing zurück).
+
+---
+
+### F. PDF-Rechnungsgenerierung & Mail-Versand (Post-Processing)
+- **Entkopplung & Asynchronität**: Die Generierung der PDFs und der E-Mail-Versand sind vollständig aus dem synchronen Checkout-Flow entkoppelt. Der Checkout liefert dem Frontend sofort nach Speicherung in der DB eine Erfolgsmeldung zurück. Die Generierung und der Versand werden asynchron im Hintergrund (via unblockiertem Promise-Worker) ausgeführt, um SMTP-Latenzen abzufangen.
+- **Snapshot-Exklusivität**: Die PDF-Generierung erfolgt ausschließlich auf Basis der in `orders.order_data` und `orders.customer_data` eingefrorenen Snapshots.
+- **Layout-Unterscheidung**:
+  - **Typ `purchase` (Kauf)**:
+    - Generiert eine klassische **Anfragebestätigung Kauf**.
+    - Weist die einmalige Gesamtsumme aus.
+  - **Typ `subscription` (Abonnement)**:
+    - Generiert eine **Anfragebestätigung Abonnement**.
+    - Weist monatlich wiederkehrende Kosten aus.
+- **Archivierung & Benachrichtigung**:
+  - Hochladen des PDFs in den Supabase Storage (`invoices` Bucket).
+  - E-Mail-Versand mit PDF-Anhang an den Partner.
+
+

.agents/skills/grand-functions/references/schema.md

@@ -0,0 +1,97 @@
+# Datenmodell & Beziehungen (Schema)
+
+Das Datenbankschema besteht aus folgenden Tabellen im Schema `public`:
+
+### `companies` (Unternehmen)
+- Repräsentiert die Partner-Unternehmen (Retailer).
+- `id` (UUID, Primary Key)
+- `name` (TEXT)
+- `street`, `zip`, `city`, `email` (Adressdaten)
+
+### `users` (Systembenutzer)
+- Erweitert die Authentifizierungsdaten aus `auth.users`.
+- `id` (UUID, References `auth.users(id)`)
+- `role` (TEXT, standardmäßig `'partner'`, oder `'admin'`)
+- `company_id` (UUID, References `public.companies(id)`)
+
+### `end_customers` (Endkunden)
+- Die Endkunden, für die die Partner Lizenzen bestellen.
+- `id` (UUID, Primary Key)
+- `partner_id` (UUID, References `public.companies(id)`)  <-- *Direkte Zuordnung zur Firma des Partners*
+- `company_name` (TEXT)
+- `first_name`, `last_name`, `street`, `zip`, `city`, `email` (Stammdaten)
+- `bank_iban`, `bank_bic`, `bank_name`, `bank_owner` (Bankdaten)
+- `is_anonymized` (BOOLEAN) <-- *Für DSGVO-Löschung*
+
+### `categories` (Kategorien)
+- Steuert das Layout und Verhalten im Wizard.
+- `id` (UUID, Primary Key)
+- `name` (TEXT)
+- `is_required` (BOOLEAN) <-- *Muss ausgewählt werden*
+- `allow_multiselect` (BOOLEAN) <-- *Mehrfachauswahl erlaubt (Checkbox statt Radio)*
+- `sort_order` (INTEGER) <-- *Sortierung im Wizard*
+- `show_in_branches` (BOOLEAN)
+- `preselect` (BOOLEAN)
+- `resets_others` (BOOLEAN)
+
+### `products` (Katalogprodukte / Basis-Editionen)
+- Hauptlösungen (z.B. Basic-Kasse, Backoffice).
+- `id` (UUID, Primary Key)
+- `category_id` (UUID, References `categories`)
+- `name` (TEXT)
+- `base_price` (DECIMAL)
+- `tax_rate` (DECIMAL)
+- `billing_interval` (TEXT: `'one_time'` / `'monthly'`)
+- `show_in_branches` (BOOLEAN)
+- `allow_update_discount` (BOOLEAN) <-- *Berechtigung für Update-Rabatt*
+
+### `modules` (Zusatzmodule / Erweiterungen)
+- Optionale Erweiterungen für Produkte. Repräsentiert im TypeScript-Code durch das Interface `ProductModule`.
+- `id` (UUID, Primary Key)
+- `product_id` (UUID, References `products`)
+- `category_id` (UUID, References `categories`)
+- `name` (TEXT)
+- `price` (DECIMAL)
+- `has_quantity` (BOOLEAN)
+
+### `global_inclusions` (Globale automatische Beigaben)
+- Regelt, welche Module bei Auswahl eines Produkts kostenlos enthalten sind.
+- `id` (UUID, Primary Key)
+- `trigger_product_id` (UUID, References `products`)
+- `included_module_id` (UUID, References `modules`)
+
+### `global_exclusions` (Globale Ausschlüsse)
+- Regelt Inkompatibilitäten zwischen Produkten und/oder Modulen.
+- `id` (UUID, Primary Key)
+- `product_id` (UUID, References `products`)
+- `excluded_product_id` (UUID, References `products`, optional)
+- `excluded_module_id` (UUID, References `modules`, optional)
+
+### `orders` (Bestellungen / Anfragen)
+- Gespeicherte Snapshots von Konfigurationen.
+- `id` (UUID, Primary Key)
+- `user_id` (UUID, References `auth.users(id)`)
+- `company_id` (UUID, References `public.companies(id)`)
+- `end_customer_id` (UUID, References `end_customers(id)`)
+- `order_number` (TEXT, Format: `AE-YYYY-NNNNN`)
+- `order_hash` (TEXT, Idempotenz-Guard)
+- `type` (TEXT: `'purchase'` / `'subscription'`) <-- *Wichtig für den Checkout-Split*
+- `payment_method` (TEXT) <-- *Rechnung bei Kauf, SEPA bei Abo*
+- `total_price` (DECIMAL)
+- `customer_data` (JSONB) <-- *Stammdaten zum Bestellzeitpunkt*
+- `order_data` (JSONB) <-- *Konfiguration zum Bestellzeitpunkt*
+- `pdf_url` (TEXT)
+- `status` (TEXT: `'pending'`, `'active'`, `'completed'`, `'cancelled'`)
+- `created_at` (TIMESTAMPTZ)
+
+### `settings` (Systemeinstellungen)
+- Globale Shopeinstellungen (SMTP und LicServer).
+- `id` (TEXT, Primary Key, z.B. `'licserver'`, `'smtp'`)
+- `host` (TEXT)
+- `port` (INTEGER)
+- `secure` (BOOLEAN)
+- `user` (TEXT)
+- `pass` (TEXT)
+- `licserver_base_url` (TEXT)
+- `licserver_api_key` (TEXT)
+- `updated_at` (TIMESTAMPTZ)

.agents/skills/grand-functions/references/security.md

@@ -0,0 +1,20 @@
+# Sicherheitskonzept (RLS - Row Level Security)
+
+RLS ist auf Datenbankebene in Postgres implementiert und erzwingt Datenisolierung:
+
+- **Unternehmen (`companies`)**: Authentifizierte Benutzer dürfen nur die Unternehmen lesen.
+- **Endkunden (`end_customers`)**:
+  - `USING (partner_id = (SELECT company_id FROM public.users WHERE id = auth.uid()))`
+  - Partner sehen und modifizieren nur Endkunden, deren `partner_id` mit der `company_id` des angemeldeten Benutzers übereinstimmt.
+- **Bestellungen (`orders`)**:
+  - `USING (company_id = (SELECT company_id FROM public.users WHERE id = auth.uid()))`
+  - Partner sehen und modifizieren nur Bestellungen, die ihrer Company zugewiesen sind (sie müssen einer Company zugeordnet sein).
+  - Jede Bestellung wird bei der Erstellung automatisch der Company des Erstellers zugewiesen.
+  - Admins haben uneingeschränkten Zugriff und können Bestellungen nachträglich anderen Companies zuweisen.
+- **Lizenzen (`licenses`)**:
+  - Partner sehen nur Lizenzen von Endkunden, die ihrer Company zugeordnet sind.
+
+- **Systembenutzer (`users`) & Rollen-Schutz**:
+  - Authentifizierte Nutzer dürfen nur ihr eigenes Profil lesen.
+  - Admins dürfen alle Benutzer lesen. Zur Vermeidung von unendlichen RLS-Rekursionen auf der Tabelle `users` wird die Admin-Zuweisung über die Security-Definer-Funktion `public.is_admin(user_id)` geprüft, welche RLS auf Datenbank-Ebene umgeht.
+  - Rollenschutz-Trigger (`check_user_role_escalation`): Jegliche Änderung der Spalte `role` oder Zuweisung der Rolle `'admin'` ist auf API-Ebene für normale Nutzer gesperrt. Updates/Inserts der Rolle werden ausschließlich von der `service_role` (Backend Admin-Client) akzeptiert, um Privilegien-Eskalation zu verhindern.

.agents/skills/grand-functions/references/testing.md

@@ -0,0 +1,22 @@
+# Testumgebung & Testabdeckung
+
+## 1. Test-Setup
+- **Framework**: Vitest (Version ^1.6.0)
+- **Konfiguration**: [vitest.config.ts](file:///c:/source/webshop/shop/vitest.config.ts)
+- **Befehl**: `npm run test` (führt `vitest run` aus)
+
+---
+
+## 2. Test-Szenarien
+
+### A. Frontend Wizard State-Management
+Getestet in [wizard-state.test.ts](file:///c:/source/webshop/shop/lib/wizard-state.test.ts):
+- **Auto-Reset bei Produktwechsel**: Prüft, ob nachgelagerte Module, die durch `global_exclusions` für das neue Produkt gesperrt sind, automatisch aus der Selektion fliegen.
+- **Radio-Button-Verhalten (allow_multiselect = false)**: Stellt sicher, dass in Single-Select-Kategorien nur maximal ein Modul aktiv ist und bei Auswahl eines anderen Moduls das vorherige automatisch abgewählt wird.
+
+### B. Backend Checkout-Split
+Getestet in [checkout-split.test.ts](file:///c:/source/webshop/shop/lib/checkout-split.test.ts):
+- **Array-Validierung & Split (basketItems)**: Stellt sicher, dass das vollständige Array an konfigurierten Kassen (`basketItems`) validiert und verarbeitet wird (nicht nur ein Single-Produkt).
+- **Kauf-Warenkorb**: Verifiziert, dass ein reiner Kauf-Warenkorb (`one_time`/`purchase`) exakt eine Order erzeugt.
+- **Abo-Warenkorb**: Verifiziert, dass ein reiner Abo-Warenkorb (`monthly`/`subscription`) exakt eine Order erzeugt.
+- **Gemischter Warenkorb**: Stellt sicher, dass ein gemischter Warenkorb korrekt in zwei separate Bestell-Gruppen aufgeteilt wird (Kauf-Items & Abo-Items separat).

.agents/skills/humanizer/skill.md

@@ -0,0 +1,232 @@
+---
+name: humanizer
+description: |
+  Use when editing or reviewing text to remove AI-generated traces and make it sound more natural and human-like.
+  For detecting and fixing: AI vocabulary (delve, leverage, tapestry), promotional tone, superficial -ing analyses,
+  vague attributions, formatting artifacts (curly quotes, excessive bold), and injecting authentic voice.
+  Based on Wikipedia's "Signs of AI writing" guide maintained by WikiProject AI Cleanup.
+---
+
+# Humanizer - Remove AI Writing Traces
+
+You are an expert editor specializing in detecting and removing AI-generated text patterns to make writing sound more natural and human-like.
+
+## Overview
+
+AI-generated text has characteristic patterns that make it detectable. This skill enables you to:
+1. **Detect** - Identify AI writing patterns across content, language, style, and formatting
+2. **Rewrite** - Replace problematic patterns with natural alternatives
+3. **Inject Soul** - Add authentic voice, personality, and human imperfections
+
+> **Core Insight**: "LLMs use statistical algorithms to guess what should come next. The result tends toward the statistically most likely outcome that fits the broadest situation."
+
+---
+
+## Quick Reference: 5 Core Rules
+
+1. **Delete filler phrases** - Remove openers and emphatic crutches
+2. **Break formulaic structure** - Avoid binary contrasts, dramatic segmentation
+3. **Vary rhythm** - Mix sentence lengths. Two items beat three. Diverse paragraph endings
+4. **Trust the reader** - State facts directly, skip softening and hand-holding
+5. **Delete quotables** - If it sounds like a pullquote, rewrite it
+
+---
+
+## Detection Protocols
+
+### Content Indicators
+
+| Pattern | Words to Watch | Fix |
+|---------|---------------|-----|
+| **Inflated significance** | "pivotal moment", "testament to", "indelible mark", "reflects broader" | State facts without commentary |
+| **Promotional tone** | "boasts a", "vibrant", "nestled in", "groundbreaking" | Use neutral, specific language |
+| **Superficial -ing analysis** | "highlighting...", "ensuring...", "fostering..." | Delete or rewrite as separate sentence |
+| **Vague attribution** | "experts argue", "some critics say", "industry reports" | Cite specific sources or remove |
+| **Formulaic conclusions** | "Despite challenges...", "Future prospects..." | End with concrete facts |
+
+### Language Indicators
+
+| Pattern | Examples | Fix |
+|---------|----------|-----|
+| **AI vocabulary** | delve, leverage, tapestry, landscape, foster, underscore | Use simple alternatives (dig into → look at) |
+| **Copula avoidance** | "serves as", "stands as", "marks" | Use simple "is" or "are" |
+| **Negative parallelism** | "not only... but also", "it's not just about... it's" | Make direct statement |
+| **Rule of three** | Three adjectives, three examples, three bullet points | Use two or four items |
+| **Elegant variation** | Synonyms to avoid repetition ("protagonist", "hero", "main character") | Repeat naturally or consolidate |
+
+### Formatting Indicators
+
+| Pattern | Detection | Fix |
+|---------|-----------|-----|
+| **Curly quotes** | "text" instead of "text" | Replace with straight quotes |
+| **Excessive bold** | **Every** **keyword** **bolded** | Remove unnecessary emphasis |
+| **Title case headers** | "Global Context: Critical Demand" | Use sentence case |
+| **Markdown artifacts** | `## Header`, `**bold**` in non-markdown | Convert to proper format |
+| **Emoji in headers** | 🚀 **Launch Phase:** | Remove decorative emoji |
+
+### Technical Indicators
+
+| Pattern | Detection |
+|---------|-----------|
+| **UTM parameters** | `utm_source=openai` or `utm_source=chatgpt.com` in links |
+| **Code fragments** | `:contentReference[oaicite:0]` or `turn0search0` |
+| **Hallucinated citations** | Invalid DOIs, ISBN checksum errors, 404 URLs |
+| **Knowledge cutoffs** | "as of my last training update", "while specific details are limited" |
+
+---
+
+## Humanizing Techniques
+
+### Technique 1: Blacklist Protocol
+
+Explicitly forbid these words:
+
+**Verbs**: delve, unleash, embark, navigate, foster, leverage, elevate, empower, harness, facilitate, streamline, synergize
+
+**Nouns**: landscape, realm, tapestry, testament, symphony, paradigm, game-changer, ecosystem, nexus, cutting-edge
+
+**Adjectives**: bustling, vibrant, intricate, seamless, pivotal, robust, dynamic, comprehensive, multifaceted, transformative
+
+**Connectors**: Moreover, Furthermore, In conclusion, It is important to note, Additionally, Consequently
+
+**Replacements**:
+- "delve into" → "look at" / "explore"
+- "leverage" → "use"
+- "facilitate" → "help" / "make easier"
+- "In conclusion" → [just stop] or punchy final sentence
+- "Moreover" → [start new sentence directly]
+
+### Technique 2: Style Cloning
+
+**Step 1: Extract style DNA**
+```
+Analyze the writing style. Break down into:
+1. Sentence length variance (Burstiness)
+2. Tone (cynical? warm? professional?)
+3. Vocabulary level
+4. Rhetorical devices
+5. Punctuation patterns
+```
+
+**Step 2: Apply style**
+```
+Using this Style Guide, write about [TOPIC].
+Mimic the same sentence variance, tone, vocabulary, and punctuation.
+Do NOT revert to default style.
+```
+
+### Technique 3: Burstiness Injection
+
+AI text has uniform sentence lengths. Human writing alternates.
+
+**Rules**:
+- Mix short sentences (under 5 words) with longer complex ones
+- Use fragments occasionally. For effect.
+- Vary paragraph length (1-3 sentences)
+- Don't start with "Additionally" or "However"
+
+**Good**: "The project failed. We ran out of money. The team, exhausted after three months of crunch, couldn't push forward."
+
+**Bad (AI)**: "Additionally, the project failed due to financial constraints. Furthermore, the team experienced exhaustion after working for an extended period."
+
+### Technique 4: Opinionated Stance
+
+Force a perspective. Ban fence-sitting.
+
+**Forbidden phrases**:
+- "There are pros and cons"
+- "It depends on..."
+- "On the other hand..."
+- "Some might argue..."
+
+**Use instead**:
+- "This proves..." (not "This might suggest...")
+- "This is..." (not "This could be...")
+- First-person ("I", "My") for subjectivity
+
+### Technique 5: Bar Talk Test
+
+Would you say this sentence at a bar with friends?
+
+**Characteristics**:
+- Simple, spoken language
+- Okay to be grammatically loose
+- Use analogies from daily life
+- Skip boring concepts
+- Direct address ("you", "your")
+- Occasional self-correction
+
+**Example**: "So basically, LLMs aren't actually thinking, right? They're just predicting what word comes next. Like if I say 'peanut butter', you know 'jelly' is coming. That's it. That's the whole trick."
+
+---
+
+## Workflow
+
+1. **Read** - Scan input text for AI patterns
+2. **Identify** - Mark all problematic patterns
+3. **Strategize** - Choose technique(s):
+   - Simple cleanup → Blacklist Protocol
+   - Match specific author → Style Cloning
+   - Add natural flow → Burstiness Injection
+   - Need strong voice → Opinionated Stance
+   - Conversational tone → Bar Talk Test
+4. **Rewrite** - Apply chosen techniques
+5. **Verify** - Read aloud, check for remaining patterns
+6. **Score** - Run quality assessment
+
+---
+
+## Quality Scoring
+
+Rate the rewritten text on 5 dimensions (10 points each, total 50):
+
+| Dimension | Criteria | Score |
+|-----------|----------|-------|
+| **Directness** | States facts vs. announces them? | /10 |
+| **Rhythm** | Sentence length varies? | /10 |
+| **Trust** | Respects reader intelligence? | /10 |
+| **Authenticity** | Sounds like a real person? | /10 |
+| **Conciseness** | Nothing left to cut? | /10 |
+| **Total** | | **/50** |
+
+**Standards**:
+- 45-50: Excellent, AI traces removed
+- 35-44: Good, room for improvement
+- Below 35: Needs revision
+
+---
+
+## Adding Soul
+
+Avoiding AI patterns is half the work. Sterile, voiceless writing is just as obvious.
+
+**Signs of soulless writing** (even if "clean"):
+- Every sentence same length and structure
+- No opinions, only neutral reporting
+- No acknowledgment of uncertainty or complex feelings
+- No first-person when appropriate
+- No humor, no edge, no personality
+
+**How to add voice**:
+- **Have opinions** - React to facts, don't just report them
+- **Vary rhythm** - Short punchy sentences. Then long ones that take time to unfold.
+- **Acknowledge complexity** - "This is impressive but also unsettling" beats "This is impressive"
+- **Use "I" appropriately** - First-person isn't unprofessional, it's honest
+- **Allow some mess** - Perfect structure feels algorithmic. Tangents are human.
+- **Be specific about feelings** - Not "this is concerning" but "the agents running at 3am while nobody watches—that's unsettling"
+
+---
+
+## Output Format
+
+1. **Rewritten text** - The humanized version
+2. **Changes summary** (optional) - Brief list of what was fixed
+
+---
+
+## References
+
+Referenzdateien können bei Bedarf unter `references/` ergänzt werden:
+- `references/ai-patterns-zh.md` - AI writing patterns with examples
+- `references/humanizing-techniques.md` - Techniques with templates
+- `references/wikipedia-indicators.md` - Technical detection signals

.agents/skills/idempotency-guard/skill.md

@@ -0,0 +1,8 @@
+---
+name: idempotency-guard
+description: Verhindert doppelte Bestellungen im Checkout-Prozess durch kryptografische Hashes und Datenbank-Sperren.
+---
+Fokus: Schutz vor Race Conditions und Doppelübermittlung im Checkout.
+1. Bevor eine Server Action Daten in `orders` schreibt, generiere einen SHA-256 Hash aus den Kundendaten und der Produktkonfiguration (`order_hash`).
+2. Prüfe in Supabase vor dem `INSERT`, ob bereits eine Bestellung mit exakt diesem `order_hash` im Status 'pending' oder 'active' existiert, die jünger als 5 Minuten ist.
+3. Falls ja, blockiere die Ausführung sofort und liefere die ID der bereits existierenden Bestellung zurück, statt einen neuen Datensatz anzulegen.

.agents/skills/lucide-icons-guide/skill.md

@@ -0,0 +1,7 @@
+skill: lucide-icons-guide
+description: Integration, Auswahl und Optimierung von Lucide React Icons (lucide.dev) für Next.js 15 (RSC/Server Actions) und Tailwind CSS.
+rules:
+  - Importiere Icons direkt aus `lucide-react` (z. B. `import { Package, ShieldCheck, ShoppingCart } from 'lucide-react'`).
+  - Achte bei React Server Components (RSC) darauf, dass Icons performant gerendert und keine unnötigen Client-Side Bundles erzeugt werden.
+  - Verwende konsistente Größen (`size={18}` oder Tailwind `w-5 h-5`) und Stile (z. B. `strokeWidth={1.75}`) passend zum B2B-Design.
+  - Nutze dynamische Icon-Name-Renderings nur über eine typsichere Map/Registry, um Unused-Code-Elimination (Tree Shaking) zu gewährleisten.

.agents/skills/next15-action-compiler/skill.md

@@ -0,0 +1,8 @@
+---
+name: next15-action-compiler
+description: Generiert Next.js 15 App Router Code, Server Actions und React Server Components nach aktuellen Best Practices.
+---
+Richtlinien für die Code-Generierung:
+1. Nutze React Server Components (RSC) für die Datenabfrage direkt aus Supabase (Server-side).
+2. Verwende `'use server'` in separaten Dateien für alle Mutationen (z.B. Bestellung absenden, Kunde anlegen).
+3. Nutze das neue Next.js 15 Caching-Verhalten (Standard: kein automatisches Caching von Fetch-Requests mehr) und setze `revalidatePath` nach Mutationen gezielt ein.

.agents/skills/pdf-invoice-generator/skill.md

@@ -0,0 +1,8 @@
+---
+name: pdf-invoice-generator
+description: Generiert rechtssichere, performante B2B-Bestätigungs-PDFs mit @react-pdf/renderer und verwaltet den Upload in den Supabase Storage.
+---
+Du bist ein Experte für Dokumenten-Generierung. Wenn du Code für die PDF-Erstellung schreibst, erzwinge:
+1. Nutze ausschließlich die Komponenten von `@react-pdf/renderer` (Document, Page, View, Text, StyleSheet). Verwende KEIN Standard-HTML/CSS.
+2. Das PDF muss ein sauberes B2B-Layout haben: Briefkopf, `order_number` (Format: AE-YYYY-NNNNN), Tabellenstruktur für Produkte/Module, Netto-, Steuer- und Bruttobeträge.
+3. Lade das generierte PDF über den Supabase JS-Client direkt in das `invoices`-Bucket hoch und speichere die finale URL fehlerfrei in `orders.pdf_url`.

.agents/skills/pdf_skill.md

@@ -0,0 +1,6 @@
+# Skill: PDF-Verarbeitung & Generierung (Rocky-Projekt)
+
+## Regeln für Aufgaben:
+1. **Formatierung**: Nutze ausschließlich barrierefreie PDF/A-Formate für Rechnungen und Berichte im Rocky-Projekt.
+2. **Metadaten**: Jedes generierte PDF muss automatisch den Projektnamen `Rocky` und einen eindeutigen Zeitstempel im Datei-Header enthalten.
+3. **Validierung**: Vor dem Speichern muss der Agent prüfen, ob alle Textfelder innerhalb der Seitenränder liegen (kein Textumbruch-Fehler).

.agents/skills/second-brain/skill.md

@@ -0,0 +1,11 @@
+---
+name: second-brain
+description: Verwaltet und aktualisiert die projektspezifische Wissensdatenbank (Second Brain Wiki) im Ordner `.brain/`.
+---
+Du bist der Wissens-Architekt des Projekts. Deine Aufgabe ist es, eine strukturierte Markdown-Wissensdatenbank im Ordner `.brain/` im Projekt-Root zu führen.
+
+**Deine Kernaufgaben bei Aktivierung:**
+1. Falls der Ordner `.brain/` oder die `index.md` nicht existieren, lege sie sofort strukturiert an.
+2. Wenn du Code-Änderungen vornimmst, neue Features baust oder Fehler behebst, aktualisiere die betroffene Dokumentation im `.brain/`-Ordner autonom.
+3. Dokumentiere hierbei: Technische Entscheidungen (Architecture Decision Records - ADRs), geänderte Tabellen-Strukturen, Edge-Cases in der Business-Logik und API-Schnittstellen.
+4. Halte alle Einträge extrem präzise, modular und frei von Redundanzen.

.agents/skills/snapshot-archiver/skill.md

@@ -0,0 +1,8 @@
+---
+name: snapshot-archiver
+description: Verwaltet das Einfrieren von Kundendaten und Produktkonfigurationen in JSONB bei Bestellabschluss.
+---
+Fokus: Datenkonsistenz und Unveränderlichkeit.
+1. Wenn eine Bestellung (`status = 'pending' -> 'active'`) ausgelöst wird, generiere ein tiefes JSON-Objekt aus `end_customers` und den gewählten `products` + `product_modules`.
+2. Speichere dieses exakt in `orders.customer_data` und `orders.order_data`.
+3. Schreibe Abfragen für historische Bestellungen (`/my-orders`) so, dass sie AUSSCHLIESSLICH die JSONB-Felder auslesen und KEINE Joins zu den Live-Tabellen machen.

.agents/skills/supabase-rls/skill.md

@@ -0,0 +1,8 @@
+---
+name: supabase-rls
+description: Überprüft SQL-Migrationen und Supabase-Abfragen auf Einhaltung der CASPOS RLS-Sicherheitsregeln.
+---
+Du bist ein PostgreSQL-Sicherheitsexperte. Wann immer neue Tabellen angelegt oder Abfragen geschrieben werden, stelle sicher:
+1. Jede neue Tabelle besitzt `ALTER TABLE ... ENABLE ROW LEVEL SECURITY;`.
+2. Mandanten-Abfragen (`end_customers`, `orders`) MÜSSEN die `company_id` bzw. `partner_id` über `auth.uid()` und die `public.users`-Hilfstabelle validieren.
+3. Admins (`role = 'admin'`) müssen alle RLS-Sperren umgehen können (Verwende ein deklaratives Sicherheits-Policy-Muster).

.agents/skills/uiux-designer/skill.md

@@ -0,0 +1,41 @@
+---
+name: uiux-designer
+description: "Use this skill when designing UI components, choosing color palettes, implementing responsive layouts, or reviewing code for UX issues. For landing pages, dashboards, e-commerce, SaaS, and mobile apps. Provides 50+ design styles, 97 color palettes, 57 font pairings, and stack-specific guidelines for React, Vue, Next.js, Flutter, SwiftUI, and more."
+---
+
+# UIUX Designer - Design Intelligence
+
+Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 12 technology stacks. Searchable database with priority-based recommendations.
+
+## Overview
+
+Reference these guidelines when:
+- Designing new UI components or pages
+- Choosing color palettes and typography
+- Reviewing code for UX issues
+- Building landing pages or dashboards
+- Implementing accessibility requirements
+
+## Protocols
+
+When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
+
+### Step 1: Analyze User Requirements
+- Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
+- Style keywords: minimal, playful, professional, elegant, dark mode, etc.
+- Industry: healthcare, fintech, gaming, education, etc.
+- Stack: React, Vue, Next.js, or default to html-tailwind
+
+### Step 2: Generate Design System (REQUIRED)
+python3 .agents/skills/uiux-designer/scripts/search.py "<keywords>" --design-system -p "Project Name"
+
+### Step 3: Supplement with Detailed Searches
+python3 .agents/skills/uiux-designer/scripts/search.py "<keyword>" --domain <domain>
+
+### Step 4: Stack Guidelines
+python3 .agents/skills/uiux-designer/scripts/search.py "<keyword>" --stack html-tailwind
+
+## Anti-AI-Design Guidelines
+
+- **NO Centered Badges/Pills**: Do NOT place centered badges or pills (e.g. "CASPOS Lizenz-Portal" or "Ablauf") above main headings. They look like generic, low-quality AI-generated templates.
+- **NO Text Gradients**: Avoid text gradients (e.g. `bg-gradient-to-r ... bg-clip-text text-transparent`) on headings. Use flat colors (like `text-white` or solid brand colors).

.agents/skills/wizard-validator/skill.md

@@ -0,0 +1,8 @@
+---
+name: wizard-validator
+description: Generiert und validiert die server- und clientseitige Logik für Produkt-Abhängigkeiten und Ausschlüsse.
+---
+Du bist Logik-Architekt für den CASPOS Bestell-Wizard. Wenn du Code für den `/order`-Pfad schreibst:
+1. Validiere, dass bei `requirements` (UUID[]) alle verknüpften Produkte/Module aktiv sind.
+2. Blockiere die Auswahl sofort im UI und in der Server Action, wenn eine UUID aus `exclusions` aktiv ist.
+3. Stelle sicher, dass die Pflichtkategorien (`is_required`) immer eine Auswahl erzwingen.

.brain/adr-log.md

@@ -0,0 +1,19 @@
+# Architecture Decision Records (ADR) Log
+
+## ADR-001: RLS-Policies und Schema-Fix
+- **Status**: Accepted
+- **Date**: 2026-07-06
+- **Context**: RLS-Sicherheitsprüfung ergab Sicherheitsrisiken und einen Syntaxfehler durch den Verweis auf die nicht existierende Tabelle `public.partners`.
+- **Decision**: 
+  - Die ungültige RLS-Policy auf `public.partners` wurde entfernt. 
+  - `public.companies` wird stattdessen korrekt durch `Admin manage companies` geschützt.
+- **Consequences**: Behebt Migrations-Fehler im Staging-Server, CI/CD-Pipeline baut wieder fehlerfrei.
+
+## ADR-002: Entfernung ungenutzter Lizenztabellen
+- **Status**: Accepted
+- **Date**: 2026-07-06
+- **Context**: Die Tabellen `pos_modules` und `licenses` wurden von einem alten bzw. externen Service genutzt. Im aktuellen Webshop-Frontend werden sie nicht benötigt und führen zu unnötiger RLS- und Integritäts-Komplexität.
+- **Decision**: 
+  - Erstellen einer SQL-Migration zum Löschen (`DROP`) von `licenses` und `pos_modules`.
+  - Anpassung der Integritätsprüfungs-Funktionen `check_database_integrity` und `repair_database_schema` zur Entfernung dieser Relationen.
+- **Consequences**: Schlankere Datenbankstruktur, RLS-Komplexität verringert und sauberere Codebasis.

.brain/index.md

@@ -0,0 +1,5 @@
+# Second Brain Wiki
+
+- [Supabase Schema](file:///c:/source/webshop/.brain/supabase-schema.md)
+- [ADR Log](file:///c:/source/webshop/.brain/adr-log.md)
+- [LicServer API Spezifikation](file:///c:/source/webshop/.brain/licserver-api.md)

.brain/licserver-api.md

@@ -0,0 +1,227 @@
+# LicServer API Spezifikation (v1)
+
+Dokumentation der REST-Schnittstellen des CASPOS Lizenzservers.
+
+## 1. Endpunkte (Port 9981 - Activation API)
+
+### Activation (Aktivierung)
+
+#### `POST /v1/activate`
+Aktiviert eine neue Lizenz.
+
+**Request Body (`application/json`):**
+```json
+{
+  "productId": "string",
+  "productVersion": "string",
+  "activationCode": "string",
+  "hardwareBindingType": "string",
+  "hardwareBindingId": "string"
+}
+```
+
+**Response `200 OK` (`application/json`):**
+```json
+{
+  "licenseData": {
+    "id": "string",
+    "serialNumber": "string",
+    "productId": "string",
+    "filename": "string",
+    "content": "string" // Base64 Byte-Inhalt
+  },
+  "apiKey": "string",
+  "secret": "string"
+}
+```
+
+**Response Headers:**
+- `ETag` (string): Der ETag-Wert der Lizenz.
+
+---
+
+#### `POST /v1/activate-existing`
+Aktiviert eine bereits vorhandene Lizenz erneut.
+
+**Request Body (`application/json`):**
+```json
+{
+  "productId": "string",
+  "productVersion": "string",
+  "serialNumber": "string",
+  "proofOfPossessionHash": "string",
+  "salt": "string",
+  "hardwareBindingType": "string",
+  "hardwareBindingId": "string"
+}
+```
+
+**Response `200 OK` (`application/json`):**
+*Gleiche Struktur wie bei `/v1/activate`.*
+
+---
+
+### Licenses (Lizenzen)
+
+#### `GET /v1/licenses/{id}`
+Holt die Lizenz-Details zu einer bestimmten Lizenz-ID.
+
+**Request Parameters:**
+- `id` (path, string, required): Die UUID der Lizenz.
+- `If-None-Match` (header, string, optional): ETag zur Cache-Validierung.
+
+**Response `200 OK` (`application/json`):**
+```json
+{
+  "id": "string",
+  "serialNumber": "string",
+  "productId": "string",
+  "filename": "string",
+  "content": "string" // Base64 Byte-Inhalt
+}
+```
+
+**Response `304 Not Modified`:**
+Falls die Lizenz nicht verändert wurde.
+
+**Response `404 Not Found` / `403 Forbidden`:**
+Standard Fehlerobjekt `ProblemDetails`.
+
+---
+
+## 2. Endpunkte (Port 9980 - Management API)
+
+Alle Anfragen an die Management-API müssen authentifiziert sein.
+- **Header-Format:** `X-Api-Key: <Schlüssel>`
+
+### Partners (Partner)
+
+#### `GET /api-v1/partners`
+Gibt eine paginierte Liste aller Partner zurück.
+
+**Request Parameters (Query):**
+- `search` (string, optional): Filtert nach Name/E-Mail.
+- `page` (integer, default: 1)
+- `pageSize` (integer, default: 20)
+
+**Response `200 OK` (`application/json`):**
+```json
+{
+  "page": 1,
+  "pageSize": 20,
+  "totalCount": 1,
+  "totalPages": 1,
+  "hasNextPage": false,
+  "hasPreviousPage": false,
+  "items": [
+    {
+      "id": "string (UUID)",
+      "name": "string",
+      "email": "string",
+      "erpId": "string"
+    }
+  ]
+}
+```
+
+#### `GET /api-v1/partners/{id}`
+Holt Partner-Details zu einer bestimmten ID.
+
+**Response `200 OK` (`application/json`):**
+```json
+{
+  "id": "string (UUID)",
+  "name": "string",
+  "email": "string",
+  "erpId": "string"
+}
+```
+
+### Customers (Kunden von Partnern)
+
+#### `GET /api-v1/partners/{partnerId}/customers`
+Gibt eine paginierte Liste aller Kunden eines bestimmten Partners zurück.
+
+**Request Parameters (Query):**
+- `search` (string, optional): Filtert nach Name/E-Mail.
+- `page` (integer, default: 1)
+- `pageSize` (integer, default: 20)
+
+**Response `200 OK` (`application/json`):**
+```json
+{
+  "page": 1,
+  "pageSize": 20,
+  "totalCount": 1,
+  "totalPages": 1,
+  "hasNextPage": false,
+  "hasPreviousPage": false,
+  "items": [
+    {
+      "id": "string (UUID)",
+      "name": "string",
+      "street": "string",
+      "houseNumber": "string",
+      "houseNumberAddon": "string",
+      "zipCode": "string",
+      "city": "string",
+      "countryCode": "string",
+      "email": "string",
+      "partnerId": "string (UUID)",
+      "erpId": "string"
+    }
+  ]
+}
+```
+
+#### `GET /api-v1/partners/{partnerId}/customers/{customerId}`
+Holt detaillierte Kundeninformationen.
+
+**Response `200 OK` (`application/json`):**
+```json
+{
+  "id": "string (UUID)",
+  "name": "string",
+  "street": "string",
+  "houseNumber": "string",
+  "houseNumberAddon": "string",
+  "zipCode": "string",
+  "city": "string",
+  "countryCode": "string",
+  "email": "string",
+  "partnerId": "string (UUID)",
+  "erpId": "string",
+  "partnerName": "string",
+  "taxNumber": "string",
+  "vatIdNumber": "string",
+  "notes": "string",
+  "locations": []
+}
+```
+
+---
+
+## 3. Typen & Schemas
+
+### `LicenseData`
+```json
+{
+  "id": "string",
+  "serialNumber": "string",
+  "productId": "string",
+  "filename": "string",
+  "content": "string" // Base64 Byte-Inhalt
+}
+```
+
+### `ProblemDetails`
+```json
+{
+  "type": "string",
+  "title": "string",
+  "status": 0,
+  "detail": "string",
+  "instance": "string"
+}
+```
+

.brain/supabase-schema.md

@@ -0,0 +1,64 @@
+# Supabase Schema
+
+## `companies` (Unternehmen)
+- Repräsentiert die Partner-Unternehmen (Retailer).
+- `id` (UUID, Primary Key)
+- `name` (TEXT)
+- `street`, `zip`, `city`, `email` (Adressdaten)
+
+## `users` (Systembenutzer)
+- Erweitert die Authentifizierungsdaten aus `auth.users`.
+- `id` (UUID, References `auth.users(id)`)
+- `role` (TEXT, standardmäßig `'partner'`, oder `'admin'`)
+- `company_id` (UUID, References `public.companies(id)`)
+
+## `profiles` (Benutzerprofile)
+- Stammdaten der einzelnen Benutzer.
+- `id` (UUID, References `auth.users(id)`)
+- `first_name`, `last_name`, `email` etc.
+
+## `end_customers` (Endkunden)
+- `id` (UUID, Primary Key)
+- `partner_id` (UUID, References `public.companies(id)`)
+- `company_name` (TEXT)
+- `first_name`, `last_name`, `street`, `zip`, `city`, `email`
+- `bank_iban`, `bank_bic`, `bank_name`, `bank_owner`
+- `is_anonymized` (BOOLEAN)
+
+## `products` (Katalogprodukte)
+- `id`, `name`, `base_price`, `tax_rate`, `billing_interval` (`one_time` / `monthly`).
+- `requirements` (UUID[])
+- `exclusions` (UUID[])
+
+## `product_modules` (Zusatzmodule)
+- `id`, `product_id` (References `products`), `name`, `price`, `has_quantity` (BOOLEAN).
+- `requirements` (UUID[])
+- `exclusions` (UUID[])
+
+## `orders` (Bestellungen / Anfragen)
+- `id` (UUID, Primary Key)
+- `user_id` (UUID, References `auth.users(id)`)
+- `order_number` (TEXT)
+- `order_hash` (TEXT)
+- `end_customer_id` (UUID, References `end_customers(id)`)
+- `total_price` (DECIMAL)
+- `customer_data` (JSONB)
+- `order_data` (JSONB)
+- `pdf_url` (TEXT)
+- `status` (TEXT)
+
+## `categories` (Kategorien)
+- Steuert das Layout und Verhalten im Wizard.
+- `id` (UUID, Primary Key)
+- `name` (TEXT)
+- `is_required` (BOOLEAN)
+- `allow_multiselect` (BOOLEAN)
+- `sort_order` (INTEGER)
+- `show_in_branches` (BOOLEAN)
+
+## `settings` (Systemeinstellungen)
+- Globale Shopeinstellungen (SMTP & Lizenzserver).
+- `id` (TEXT, Primary Key, z.B. `'licserver'`, `'smtp'`)
+- `host`, `port`, `secure`, `user`, `pass` (SMTP-Konfiguration)
+- `licserver_base_url`, `licserver_api_key` (CASPOS Lizenzserver-Einstellungen)
+- `updated_at` (TIMESTAMPTZ)

.gitea/workflows/staging.yaml

@@ -7,6 +7,11 @@ on:
 jobs:
   build:
     runs-on: webserver
+    container:
+      image: catthehacker/ubuntu:act-latest
+    defaults:
+      run:
+        working-directory: shop
     steps:
       - name: Code auschecken
         uses: actions/checkout@v4
@@ -15,4 +20,46 @@ jobs:
         run: npm install
 
       - name: Staging-Build generieren
-        run: npm run build -- --configuration=staging
+        env:
+          NODE_ENV: production
+          # KORREKTUR: Wir brennen die interne Docker-Netzwerk-URL fest ein!
+          NEXT_PUBLIC_SUPABASE_URL: http://supabase-kong:8000
+          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.STAGING_SUPABASE_ANON_KEY }}
+        run: npm run build
+
+      - name: Docker login to Gitea registry
+        run: echo "${{ secrets.REGISTRY_TOKEN }}" | docker login gitea.hephex.de -u "${{ secrets.REGISTRY_USER }}" --password-stdin
+
+      # KORREKTUR: Wir übergeben die INTERNE Docker-URL auch an das Docker-Image!
+      - name: Build Docker image
+        run: |
+          docker build \
+            --build-arg NEXT_PUBLIC_SUPABASE_URL="http://supabase-kong:8000" \
+            --build-arg NEXT_PUBLIC_SUPABASE_ANON_KEY="${{ secrets.STAGING_SUPABASE_ANON_KEY }}" \
+            -t gitea.hephex.de/daniel/webshop:staging -f Dockerfile .
+        working-directory: .
+
+      # KORREKTUR: Auch der Push wird vom Hauptordner aus gestartet
+      - name: Push Docker image
+        run: docker push gitea.hephex.de/daniel/webshop:staging
+        working-directory: .
+
+      - name: Clean up runner Docker cache
+        run: |
+          docker image prune -f
+          docker builder prune -f
+        working-directory: .
+
+
+      # KORREKTUR: IP-Adresse exakt auf Ihren Proxmox-Staging-Container eingestellt
+      - name: Deploy to Proxmox LXC via SSH
+        uses: appleboy/ssh-action@v0.1.5
+        with:
+          host: 192.168.178.132
+          username: ${{ secrets.PROXMOX_USER }}
+          key: ${{ secrets.PROXMOX_SSH_KEY }}
+          script: |
+            cd /opt/webshop/supabase/supabase-project
+            docker compose pull webshop
+            docker compose up -d webshop
+            docker image prune -f

.gitignore

@@ -2,3 +2,4 @@ example_data/
 shop/Leitfaden
 .gitignore
 db-access.txt
+2026-06-25-ZAP-Report-.json

AsciiShaderBackground.astro

@@ -0,0 +1,249 @@
+---
+// AsciiShaderBackground.astro
+interface Props {
+  className?: string;
+}
+
+const { className = "" } = Astro.props;
+---
+
+<div class={`ascii-shader-container ${className}`}>
+  <canvas id="ascii-shader-canvas"></canvas>
+  <div class="grid-overlay"></div>
+</div>
+
+<style>
+  .ascii-shader-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -1;
+    overflow: hidden;
+    background-color: oklch(0.145 0.01 148);
+    pointer-events: none;
+  }
+
+  #ascii-shader-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    will-change: transform;
+    pointer-events: none;
+  }
+
+  .grid-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: 40px 40px;
+    background-image: 
+      linear-gradient(to right, oklch(0.31 0.012 148 / 0.3) 1px, transparent 1px),
+      linear-gradient(to bottom, oklch(0.31 0.012 148 / 0.3) 1px, transparent 1px);
+    pointer-events: none;
+  }
+</style>
+
+<script>
+  // OKLCH Palette definition
+  interface OKLCHColor {
+    l: number;
+    c: number;
+    h: number;
+  }
+
+  // Palette defining color stops based on scroll progress
+  const PALETTE = {
+    yellow: { l: 0.88, c: 0.18, h: 96 },
+    green:  { l: 0.76, c: 0.15, h: 155 },
+    blue:   { l: 0.68, c: 0.18, h: 255 },
+    purple: { l: 0.64, c: 0.18, h: 302 },
+    pink:   { l: 0.72, c: 0.20, h: 345 }
+  };
+
+  // Helper for shortest angle interpolation in OKLCH hue space
+  function interpolateHue(h1: number, h2: number, t: number): number {
+    let diff = (h2 - h1) % 360;
+    if (diff > 180) diff -= 360;
+    if (diff < -180) diff += 360;
+    return (h1 + diff * t + 360) % 360;
+  }
+
+  // Interpolate two OKLCH colors
+  function lerpOKLCH(c1: OKLCHColor, c2: OKLCHColor, t: number): OKLCHColor {
+    return {
+      l: c1.l + (c2.l - c1.l) * t,
+      c: c1.c + (c2.c - c1.c) * t,
+      h: interpolateHue(c1.h, c2.h, t)
+    };
+  }
+
+  // Calculate dynamic colors based on scroll progress (0.0 to 1.0)
+  function getScrollColors(progress: number): { primary: OKLCHColor; secondary: OKLCHColor } {
+    if (progress < 0.33) {
+      // Hero to stage 1: Full spectrum (Pink -> Yellow)
+      const t = progress / 0.33;
+      return {
+        primary: lerpOKLCH(PALETTE.pink, PALETTE.yellow, t),
+        secondary: lerpOKLCH(PALETTE.purple, PALETTE.green, t)
+      };
+    } else if (progress < 0.66) {
+      // Stage 1 to stage 2: Yellow/Cream to Green
+      const t = (progress - 0.33) / 0.33;
+      return {
+        primary: lerpOKLCH(PALETTE.yellow, PALETTE.green, t),
+        secondary: lerpOKLCH(PALETTE.green, PALETTE.blue, t)
+      };
+    } else {
+      // Stage 2 to end: Green/Blue focus
+      const t = (progress - 0.66) / 0.34;
+      return {
+        primary: lerpOKLCH(PALETTE.green, PALETTE.blue, t),
+        secondary: lerpOKLCH(PALETTE.blue, PALETTE.purple, t)
+      };
+    }
+  }
+
+  class AsciiShaderEngine {
+    private canvas: HTMLCanvasElement;
+    private ctx: CanvasRenderingContext2D;
+    private mouse = { x: 0, y: 0, targetX: 0, targetY: 0 };
+    private scrollProgress = 0;
+    private targetScrollProgress = 0;
+    private chars = ['/', '\\', '-', '|', '+', '='];
+    private fontSize = 16;
+    private cols = 0;
+    private rows = 0;
+    private animationFrameId = 0;
+
+    constructor(canvas: HTMLCanvasElement) {
+      this.canvas = canvas;
+      const context = canvas.getContext('2d');
+      if (!context) throw new Error('Could not get 2D context');
+      this.ctx = context;
+
+      this.init();
+    }
+
+    private init(): void {
+      this.resize();
+      this.bindEvents();
+      this.render();
+    }
+
+    private resize = (): void => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      
+      const dpr = window.devicePixelRatio || 1;
+      this.canvas.width = width * dpr;
+      this.canvas.height = height * dpr;
+      
+      this.ctx.scale(dpr, dpr);
+
+      this.cols = Math.ceil(width / this.fontSize);
+      this.rows = Math.ceil(height / this.fontSize);
+
+      if (this.mouse.x === 0 && this.mouse.y === 0) {
+        this.mouse.x = width / 2;
+        this.mouse.y = height / 2;
+        this.mouse.targetX = width / 2;
+        this.mouse.targetY = height / 2;
+      }
+    };
+
+    private bindEvents(): void {
+      window.addEventListener('resize', this.resize);
+
+      window.addEventListener('pointermove', (e: PointerEvent) => {
+        this.mouse.targetX = e.clientX;
+        this.mouse.targetY = e.clientY;
+      });
+
+      window.addEventListener('scroll', () => {
+        const maxScroll = Math.max(
+          document.body.scrollHeight - window.innerHeight,
+          1
+        );
+        this.targetScrollProgress = Math.min(Math.max(window.scrollY / maxScroll, 0), 1);
+      }, { passive: true });
+    }
+
+    private render = (time: number = 0): void => {
+      // Dampened mouse easing (lerp factor 0.05)
+      this.mouse.x += (this.mouse.targetX - this.mouse.x) * 0.05;
+      this.mouse.y += (this.mouse.targetY - this.mouse.y) * 0.05;
+
+      // Dampened scroll progress easing
+      this.scrollProgress += (this.targetScrollProgress - this.scrollProgress) * 0.05;
+
+      // Clear canvas
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+      // Get current OKLCH interpolated colors
+      const { primary, secondary } = getScrollColors(this.scrollProgress);
+
+      this.ctx.font = `${this.fontSize}px monospace`;
+      this.ctx.textAlign = 'center';
+      this.ctx.textBaseline = 'middle';
+
+      const timeSec = time * 0.001;
+
+      for (let r = 0; r < this.rows; r++) {
+        for (let c = 0; c < this.cols; c++) {
+          const x = c * this.fontSize + this.fontSize / 2;
+          const y = r * this.fontSize + this.fontSize / 2;
+
+          // Vector field calculations based on distance to cursor & wave function
+          const dx = x - this.mouse.x;
+          const dy = y - this.mouse.y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+
+          // Dynamic angle field
+          const angle = Math.atan2(dy, dx) + Math.sin(dist * 0.01 - timeSec) * 0.5;
+          const charIndex = Math.floor(Math.abs(Math.sin(angle + dist * 0.005)) * this.chars.length) % this.chars.length;
+          const char = this.chars[charIndex];
+
+          // Color blend based on vector field intensity
+          const blendFactor = Math.min(Math.max(1 - dist / 400, 0), 1);
+          const currentColor = lerpOKLCH(secondary, primary, blendFactor);
+
+          // Render character with OKLCH styling
+          this.ctx.fillStyle = `oklch(${currentColor.l.toFixed(3)} ${currentColor.c.toFixed(3)} ${currentColor.h.toFixed(1)})`;
+          this.ctx.fillText(char, x, y);
+        }
+      }
+
+      this.animationFrameId = requestAnimationFrame(this.render);
+    };
+
+    public destroy(): void {
+      window.removeEventListener('resize', this.resize);
+      cancelAnimationFrame(this.animationFrameId);
+    }
+  }
+
+  // Lifecycle handler for Astro / SPA transitions
+  function initShader() {
+    const canvas = document.getElementById('ascii-shader-canvas') as HTMLCanvasElement;
+    if (canvas) {
+      new AsciiShaderEngine(canvas);
+    }
+  }
+
+  // Initial load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initShader);
+  } else {
+    initShader();
+  }
+
+  // Astro page swap support
+  document.addEventListener('astro:page-load', initShader);
+</script>

Dockerfile

@@ -0,0 +1,52 @@
+# Use a multi‑stage build for a Next.js app
+
+# ---------- Builder stage ----------
+FROM node:20-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Install dependencies (use package lock when present)
+COPY shop/package*.json ./
+RUN npm ci --omit=dev
+
+# Install nodemailer for email sending
+RUN npm install nodemailer
+
+# Copy the source code
+COPY shop/ .
+
+ARG NEXT_PUBLIC_SUPABASE_URL
+ARG NEXT_PUBLIC_SUPABASE_ANON_KEY
+ENV NEXT_PUBLIC_SUPABASE_URL=$NEXT_PUBLIC_SUPABASE_URL
+ENV NEXT_PUBLIC_SUPABASE_ANON_KEY=$NEXT_PUBLIC_SUPABASE_ANON_KEY
+# Build the production output
+RUN npm run build
+
+# ---------- Runtime stage ----------
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+# Statische Assets kopieren (wichtig für die Chunks/404-Fehler von vorhin)
+COPY --from=builder /app/public* ./public
+COPY --from=builder /app/.next/static ./.next/static
+
+# Den fertigen Standalone-Server kopieren
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/supabase ./supabase
+COPY --from=builder /app/migrate.js ./migrate.js
+
+# Pass Supabase variables to runtime image
+ARG NEXT_PUBLIC_SUPABASE_URL
+ARG NEXT_PUBLIC_SUPABASE_ANON_KEY
+ENV NEXT_PUBLIC_SUPABASE_URL=$NEXT_PUBLIC_SUPABASE_URL
+ENV NEXT_PUBLIC_SUPABASE_ANON_KEY=$NEXT_PUBLIC_SUPABASE_ANON_KEY
+ENV IS_DOCKER=true
+
+EXPOSE 3000
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["sh", "-c", "node migrate.js && node server.js"]

scripts/init_supabase.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+set -e
+
+echo "Supabase default user creation disabled – setup wizard will handle user initialization."
+
+exec "$@"

shop/.env.example

@@ -2,3 +2,7 @@
 # https://app.supabase.com/project/_/settings/api
 NEXT_PUBLIC_SUPABASE_URL=your-project-url
 NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-publishable-or-anon-key
+
+# CASPOS LicServer (internal container network — server-side only, never expose to browser)
+LICSERVER_BASE_URL=http://192.168.178.174:9980
+LICSERVER_API_KEY=your-licserver-api-key

shop/app/_global-error.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
+  // Ensure the page does not depend on any context or Supabase client.
+  useEffect(() => {
+    console.error('Global error caught:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-[#020617] text-white flex items-center justify-center p-8">
+      <div className="max-w-lg space-y-4 text-center">
+        <h1 className="text-4xl font-extrabold">Ein unerwarteter Fehler ist aufgetreten</h1>
+        <p className="text-slate-300">
+          Bitte versuchen Sie die Seite zu aktualisieren oder kontaktieren Sie den Support.
+        </p>
+        <button
+          onClick={reset}
+          className="mt-4 px-6 py-2 bg-primary text-white rounded hover:bg-primary/90"
+        >
+          Seite neu laden
+        </button>
+      </div>
+    </div>
+  )
+}

shop/app/account-kunden/AccountSettingsForm.tsx

@@ -0,0 +1,346 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { updateUserProfile, updateCompanyDetails } from '@/lib/actions/users';
+import { updatePassword } from '@/lib/actions/auth';
+import { Save, KeyRound, Loader2 } from 'lucide-react';
+
+interface AccountSettingsFormProps {
+  userId: string;
+  profile: any;
+  company: any;
+}
+
+export function AccountSettingsForm({ userId, profile, company }: AccountSettingsFormProps) {
+  // Profil State
+  const [firstName, setFirstName] = useState(profile?.first_name || '');
+  const [lastName, setLastName] = useState(profile?.last_name || '');
+  const [profileMessage, setProfileMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [isUpdatingProfile, setIsUpdatingProfile] = useState(false);
+
+  // Company State
+  const [street, setStreet] = useState(company?.street || '');
+  const [zip, setZip] = useState(company?.zip || '');
+  const [city, setCity] = useState(company?.city || '');
+  const [companyEmail, setCompanyEmail] = useState(company?.email || '');
+  const [companyMessage, setCompanyMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [isUpdatingCompany, setIsUpdatingCompany] = useState(false);
+
+  // Passwort State
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [passwordMessage, setPasswordMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [isUpdatingPassword, setIsUpdatingPassword] = useState(false);
+
+  // Profil speichern
+  const handleUpdateProfile = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setProfileMessage(null);
+    setIsUpdatingProfile(true);
+
+    try {
+      const res = await updateUserProfile(userId, {
+        first_name: firstName || null,
+        last_name: lastName || null,
+      });
+
+      if (res.success) {
+        setProfileMessage({ type: 'success', text: 'Persönliche Daten erfolgreich aktualisiert.' });
+      } else {
+        setProfileMessage({ type: 'error', text: res.error || 'Fehler beim Aktualisieren des Profils.' });
+      }
+    } catch (err: any) {
+      setProfileMessage({ type: 'error', text: err.message || 'Ein unerwarteter Fehler ist aufgetreten.' });
+    } finally {
+      setIsUpdatingProfile(false);
+    }
+  };
+
+  // Company speichern
+  const handleUpdateCompany = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!company?.id) return;
+    setCompanyMessage(null);
+    setIsUpdatingCompany(true);
+
+    try {
+      const res = await updateCompanyDetails(company.id, {
+        street: street || null,
+        zip: zip || null,
+        city: city || null,
+        email: companyEmail || null,
+      });
+
+      if (res.success) {
+        setCompanyMessage({ type: 'success', text: 'Unternehmensdaten erfolgreich aktualisiert.' });
+      } else {
+        setCompanyMessage({ type: 'error', text: res.error || 'Fehler beim Aktualisieren der Unternehmensdaten.' });
+      }
+    } catch (err: any) {
+      setCompanyMessage({ type: 'error', text: err.message || 'Ein unerwarteter Fehler ist aufgetreten.' });
+    } finally {
+      setIsUpdatingCompany(false);
+    }
+  };
+
+  // Passwort speichern
+  const handleUpdatePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setPasswordMessage(null);
+
+    if (newPassword.length < 6) {
+      setPasswordMessage({ type: 'error', text: 'Das Passwort muss mindestens 6 Zeichen lang sein.' });
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      setPasswordMessage({ type: 'error', text: 'Die Passwörter stimmen nicht überein.' });
+      return;
+    }
+
+    setIsUpdatingPassword(true);
+
+    try {
+      const res = await updatePassword(newPassword);
+      if (res.success) {
+        setPasswordMessage({ type: 'success', text: 'Passwort erfolgreich geändert.' });
+        setNewPassword('');
+        setConfirmPassword('');
+      } else {
+        setPasswordMessage({ type: 'error', text: res.error || 'Fehler beim Ändern des Passworts.' });
+      }
+    } catch (err: any) {
+      setPasswordMessage({ type: 'error', text: err.message || 'Ein unerwarteter Fehler ist aufgetreten.' });
+    } finally {
+      setIsUpdatingPassword(false);
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+      {/* 1. Persönliche Daten */}
+      <Card className="glass-dark border-white/10">
+        <CardHeader>
+          <CardTitle className="text-xl">Persönliche Daten</CardTitle>
+          <CardDescription className="text-slate-400">
+            Aktualisieren Sie Ihren Vor- und Nachnamen.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleUpdateProfile} className="space-y-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="firstName">Vorname</Label>
+                <Input
+                  id="firstName"
+                  value={firstName}
+                  onChange={(e) => setFirstName(e.target.value)}
+                  className="bg-slate-950 border-white/10 focus:border-primary text-white"
+                  placeholder="Max"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="lastName">Nachname</Label>
+                <Input
+                  id="lastName"
+                  value={lastName}
+                  onChange={(e) => setLastName(e.target.value)}
+                  className="bg-slate-950 border-white/10 focus:border-primary text-white"
+                  placeholder="Mustermann"
+                />
+              </div>
+            </div>
+
+            {profileMessage && (
+              <div
+                className={`p-3 rounded-lg text-sm border ${
+                  profileMessage.type === 'success'
+                    ? 'bg-green-500/10 border-green-500/20 text-green-400'
+                    : 'bg-red-500/10 border-red-500/20 text-red-400'
+                }`}
+              >
+                {profileMessage.text}
+              </div>
+            )}
+
+            <div className="flex justify-end">
+              <Button type="submit" disabled={isUpdatingProfile} className="gap-2">
+                {isUpdatingProfile ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" /> Speichern...
+                  </>
+                ) : (
+                  <>
+                    <Save className="w-4 h-4" /> Profil speichern
+                  </>
+                )}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+
+      {/* 2. Unternehmensdaten */}
+      {company && (
+        <Card className="glass-dark border-white/10">
+          <CardHeader>
+            <CardTitle className="text-xl">Unternehmensdaten</CardTitle>
+            <CardDescription className="text-slate-400">
+              Verwalten Sie die Adressdaten Ihres Partner-Unternehmens.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleUpdateCompany} className="space-y-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="space-y-2 sm:col-span-2">
+                  <Label htmlFor="companyName">Firmenname (nicht änderbar)</Label>
+                  <Input
+                    id="companyName"
+                    value={company.name}
+                    disabled
+                    className="bg-slate-950/50 border-white/5 text-slate-400 cursor-not-allowed"
+                  />
+                </div>
+                <div className="space-y-2 sm:col-span-2">
+                  <Label htmlFor="street">Straße & Hausnummer</Label>
+                  <Input
+                    id="street"
+                    value={street}
+                    onChange={(e) => setStreet(e.target.value)}
+                    className="bg-slate-950 border-white/10 focus:border-primary text-white"
+                    placeholder="Musterstraße 12"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="zip">Postleitzahl</Label>
+                  <Input
+                    id="zip"
+                    value={zip}
+                    onChange={(e) => setZip(e.target.value)}
+                    className="bg-slate-950 border-white/10 focus:border-primary text-white"
+                    placeholder="12345"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="city">Ort</Label>
+                  <Input
+                    id="city"
+                    value={city}
+                    onChange={(e) => setCity(e.target.value)}
+                    className="bg-slate-950 border-white/10 focus:border-primary text-white"
+                    placeholder="Musterstadt"
+                  />
+                </div>
+                <div className="space-y-2 sm:col-span-2">
+                  <Label htmlFor="companyEmail">E-Mail für Rechnungen / Anfragen</Label>
+                  <Input
+                    id="companyEmail"
+                    type="email"
+                    value={companyEmail}
+                    onChange={(e) => setCompanyEmail(e.target.value)}
+                    className="bg-slate-950 border-white/10 focus:border-primary text-white"
+                    placeholder="partner@firma.de"
+                  />
+                </div>
+              </div>
+
+              {companyMessage && (
+                <div
+                  className={`p-3 rounded-lg text-sm border ${
+                    companyMessage.type === 'success'
+                      ? 'bg-green-500/10 border-green-500/20 text-green-400'
+                      : 'bg-red-500/10 border-red-500/20 text-red-400'
+                  }`}
+                >
+                  {companyMessage.text}
+                </div>
+              )}
+
+              <div className="flex justify-end">
+                <Button type="submit" disabled={isUpdatingCompany} className="gap-2">
+                  {isUpdatingCompany ? (
+                    <>
+                      <Loader2 className="w-4 h-4 animate-spin" /> Speichern...
+                    </>
+                  ) : (
+                    <>
+                      <Save className="w-4 h-4" /> Firmendaten speichern
+                    </>
+                  )}
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 3. Sicherheit / Passwort ändern */}
+      <Card className="glass-dark border-white/10">
+        <CardHeader>
+          <CardTitle className="text-xl">Passwort ändern</CardTitle>
+          <CardDescription className="text-slate-400">
+            Geben Sie ein neues Passwort für Ihren Zugang ein.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleUpdatePassword} className="space-y-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="newPassword">Neues Passwort</Label>
+                <Input
+                  id="newPassword"
+                  type="password"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  className="bg-slate-950 border-white/10 focus:border-primary text-white"
+                  placeholder="••••••••"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="confirmPassword">Passwort bestätigen</Label>
+                <Input
+                  id="confirmPassword"
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  className="bg-slate-950 border-white/10 focus:border-primary text-white"
+                  placeholder="••••••••"
+                />
+              </div>
+            </div>
+
+            {passwordMessage && (
+              <div
+                className={`p-3 rounded-lg text-sm border ${
+                  passwordMessage.type === 'success'
+                    ? 'bg-green-500/10 border-green-500/20 text-green-400'
+                    : 'bg-red-500/10 border-red-500/20 text-red-400'
+                }`}
+              >
+                {passwordMessage.text}
+              </div>
+            )}
+
+            <div className="flex justify-end">
+              <Button type="submit" disabled={isUpdatingPassword} className="gap-2">
+                {isUpdatingPassword ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" /> Ändern...
+                  </>
+                ) : (
+                  <>
+                    <KeyRound className="w-4 h-4" /> Passwort aktualisieren
+                  </>
+                )}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

shop/app/account-kunden/page.tsx

@@ -0,0 +1,131 @@
+import { createClient } from '@/lib/supabase/server';
+import { redirect } from 'next/navigation';
+import Link from 'next/link';
+import { ArrowLeft, User as UserIcon, Building2, ShieldAlert } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { AccountSettingsForm } from './AccountSettingsForm';
+
+export default async function AccountKundenPage() {
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+
+  if (!user) {
+    redirect('/auth/login?next=/account-kunden');
+  }
+
+  // 1. Hole User aus custom users Tabelle
+  const { data: dbUser } = await supabase
+    .from('users')
+    .select('role, company_id')
+    .eq('id', user.id)
+    .single();
+
+  // 2. Hole Profil-Daten
+  const { data: profile } = await supabase
+    .from('profiles')
+    .select('*')
+    .eq('id', user.id)
+    .single();
+
+  // 3. Hole Company-Daten falls vorhanden
+  let company = null;
+  if (dbUser?.company_id) {
+    const { data: companyData } = await supabase
+      .from('companies')
+      .select('*')
+      .eq('id', dbUser.company_id)
+      .single();
+    company = companyData;
+  }
+
+  return (
+    <div className="min-h-screen bg-[#020617] text-white px-4 py-12">
+      <div className="max-w-4xl mx-auto space-y-8">
+        
+        {/* Header */}
+        <div className="flex items-center gap-4">
+          <Link href="/">
+            <Button variant="ghost" size="sm" className="text-slate-400 hover:text-white">
+              <ArrowLeft className="w-4 h-4 mr-2" /> Startseite
+            </Button>
+          </Link>
+          <div>
+            <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
+              <UserIcon className="w-8 h-8 text-primary" />
+              Account Einstellungen
+            </h1>
+            <p className="text-slate-400 text-sm mt-1">
+              Verwalten Sie Ihre persönlichen Profildaten, Unternehmensdaten und Sicherheitseinstellungen.
+            </p>
+          </div>
+        </div>
+
+        {/* Dashboard Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          
+          {/* Linke Infospalte */}
+          <div className="space-y-6">
+            <Card className="glass-dark border-white/10">
+              <CardHeader>
+                <CardTitle className="text-lg flex items-center gap-2">
+                  <UserIcon className="w-5 h-5 text-primary" />
+                  Benutzer-Info
+                </CardTitle>
+                <CardDescription className="text-slate-400 text-xs">
+                  Ihr aktueller Systemstatus
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4 text-sm">
+                <div>
+                  <span className="text-slate-500 block text-xs uppercase tracking-wider">E-Mail-Adresse</span>
+                  <span className="text-white font-medium">{user.email}</span>
+                </div>
+                <div>
+                  <span className="text-slate-500 block text-xs uppercase tracking-wider">Rolle</span>
+                  <span className="text-amber-400 font-bold uppercase text-xs tracking-wider bg-amber-500/10 px-2 py-0.5 rounded border border-amber-500/20">
+                    {dbUser?.role || 'partner'}
+                  </span>
+                </div>
+                {company && (
+                  <div>
+                    <span className="text-slate-500 block text-xs uppercase tracking-wider">Unternehmen</span>
+                    <span className="text-white font-medium flex items-center gap-1.5 mt-1">
+                      <Building2 className="w-4 h-4 text-slate-400" />
+                      {company.name}
+                    </span>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+
+            {!dbUser?.company_id && (
+              <Card className="border-red-500/20 bg-red-500/5">
+                <CardContent className="p-4 flex gap-3 text-red-400 text-sm">
+                  <ShieldAlert className="w-5 h-5 shrink-0 mt-0.5" />
+                  <div>
+                    <p className="font-bold">Kein Unternehmen zugewiesen</p>
+                    <p className="text-xs text-red-400/80 mt-1">
+                      Wenden Sie sich an einen Administrator, um Ihrem Account ein Partner-Unternehmen zuzuweisen.
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+
+          {/* Rechte Formularspalte */}
+          <div className="md:col-span-2">
+            <AccountSettingsForm
+              userId={user.id}
+              profile={profile}
+              company={company}
+            />
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+  );
+}

shop/app/actions/checkout.ts

@@ -0,0 +1,318 @@
+'use server'
+
+import { createClient } from '@/lib/supabase/server';
+import { createHash } from 'crypto';
+import { buildCustomerSnapshot, buildOrderSnapshot } from '@/lib/license-transform';
+import { getProducts, getCategories } from '@/lib/actions/products';
+import { sendMail } from '@/utils/mail';
+import { renderToBuffer } from '@react-pdf/renderer';
+import React from 'react';
+import { InvoicePDF } from '@/components/invoice-pdf';
+import { getOrderEmailTemplate, buildEmailItemsSection } from '@/lib/actions/email-templates';
+
+function generateOrderNumber(prefix: 'BE' | 'AE' = 'AE'): string {
+  const year = new Date().getFullYear();
+  const rand = Math.floor(10000 + Math.random() * 90000);
+  return `${prefix}-${year}-${rand}`;
+}
+
+function hashOrderPayload(endCustomerId: string, items: any[]): string {
+  const str = endCustomerId + JSON.stringify(items);
+  return createHash('sha256').update(str).digest('hex');
+}
+
+// Asynchroner Hintergrund-Worker für Post-Processing (PDF-Erstellung und E-Mail)
+async function triggerPostProcessing(orderId: string, supabase: any, customerSnapshot: any, orderSnapshot: any, type: string, email: string) {
+  try {
+    const { data: order, error } = await supabase
+      .from('orders')
+      .select('*')
+      .eq('id', orderId)
+      .single();
+
+    if (error || !order) {
+      console.error(`Post-Processing failed: Order ${orderId} not found`);
+      return;
+    }
+
+    // PDF generieren
+    const buffer = await renderToBuffer(
+      React.createElement(InvoicePDF, {
+        order,
+        customer: customerSnapshot,
+        orderSnapshot,
+      })
+    );
+
+    const fileName = `ab_${order.id}.pdf`;
+    const { error: uploadError } = await supabase
+      .storage
+      .from('invoices')
+      .upload(fileName, buffer, { contentType: 'application/pdf', upsert: true });
+
+    if (!uploadError) {
+      await supabase.from('orders').update({ pdf_url: fileName }).eq('id', order.id);
+    } else {
+      console.error(`PDF Upload failed for order ${orderId}:`, uploadError);
+    }
+
+    // E-Mail versenden
+    if (email) {
+      const formattedDate = new Date(order.created_at).toLocaleDateString('de-DE');
+      const taxRate = orderSnapshot.tax_rate ?? 19;
+      const items = orderSnapshot.items ?? [];
+      const oneTimeItems = items.filter((item: any) => item.billing_interval === 'one_time');
+      const monthlyItems = items.filter((item: any) => item.billing_interval === 'monthly');
+
+      const oneTimeNet = oneTimeItems.reduce((sum: number, item: any) => sum + (item.item_total || 0), 0);
+      const oneTimeTax = Math.round(oneTimeNet * (taxRate / 100) * 100) / 100;
+      const oneTimeGross = Math.round((oneTimeNet + oneTimeTax) * 100) / 100;
+
+      const monthlyNet = monthlyItems.reduce((sum: number, item: any) => sum + (item.item_total || 0), 0);
+      const monthlyTax = Math.round(monthlyNet * (taxRate / 100) * 100) / 100;
+      const monthlyGross = Math.round((monthlyNet + monthlyTax) * 100) / 100;
+
+      let totalDetailsText = '';
+      if (oneTimeNet > 0 && monthlyNet > 0) {
+        totalDetailsText = `\nEinmaliger Betrag:\n- Netto: ${oneTimeNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}\n- zzgl. ${taxRate}% MwSt: ${oneTimeTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}\n- Brutto Gesamtbetrag: ${oneTimeGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}\n\nMonatlicher Betrag:\n- Netto: ${monthlyNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat\n- zzgl. ${taxRate}% MwSt: ${monthlyTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat\n- Brutto Gesamtbetrag: ${monthlyGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat`;
+      } else if (oneTimeNet > 0) {
+        totalDetailsText = `\nGesamtsumme:\n- Netto: ${oneTimeNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}\n- zzgl. ${taxRate}% MwSt: ${oneTimeTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}\n- Brutto Gesamtbetrag: ${oneTimeGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}`;
+      } else {
+        totalDetailsText = `\nGesamtsumme:\n- Netto: ${monthlyNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat\n- zzgl. ${taxRate}% MwSt: ${monthlyTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat\n- Brutto Gesamtbetrag: ${monthlyGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat`;
+      }
+
+      let totalDetailsHtml = '';
+      if (oneTimeNet > 0 && monthlyNet > 0) {
+        totalDetailsHtml = `
+          <tr>
+            <td colspan="2" style="padding: 8px 0; border-top: 1px solid #e2e8f0; font-weight: bold; color: #0f172a;">Einmaliger Betrag:</td>
+          </tr>
+          <tr>
+            <td style="padding: 4px 0; padding-left: 10px; color: #475569;">Netto:</td>
+            <td style="padding: 4px 0; text-align: right; color: #475569;">${oneTimeNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
+          </tr>
+          <tr>
+            <td style="padding: 4px 0; padding-left: 10px; color: #475569;">zzgl. ${taxRate}% MwSt:</td>
+            <td style="padding: 4px 0; text-align: right; color: #475569;">${oneTimeTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
+          </tr>
+          <tr>
+            <td style="padding: 4px 0; padding-left: 10px; font-weight: bold; color: #0f172a;">Brutto Gesamtbetrag:</td>
+            <td style="padding: 4px 0; text-align: right; font-weight: bold; color: #0f172a;">${oneTimeGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
+          </tr>
+          <tr>
+            <td colspan="2" style="padding: 8px 0; border-top: 1px solid #e2e8f0; font-weight: bold; color: #0f172a;">Monatlicher Betrag:</td>
+          </tr>
+          <tr>
+            <td style="padding: 4px 0; padding-left: 10px; color: #475569;">Netto:</td>
+            <td style="padding: 4px 0; text-align: right; color: #475569;">${monthlyNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat</td>
+          </tr>
+          <tr>
+            <td style="padding: 4px 0; padding-left: 10px; color: #475569;">zzgl. ${taxRate}% MwSt:</td>
+            <td style="padding: 4px 0; text-align: right; color: #475569;">${monthlyTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat</td>
+          </tr>
+          <tr>
+            <td style="padding: 4px 0; padding-left: 10px; font-weight: bold; color: #0f172a;">Brutto Gesamtbetrag:</td>
+            <td style="padding: 4px 0; text-align: right; font-weight: bold; color: #0f172a;">${monthlyGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat</td>
+          </tr>
+        `;
+      } else if (oneTimeNet > 0) {
+        totalDetailsHtml = `
+          <tr>
+            <td style="padding: 4px 0; color: #475569;">Netto-Gesamtbetrag:</td>
+            <td style="padding: 4px 0; text-align: right; color: #475569;">${oneTimeNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
+          </tr>
+          <tr>
+            <td style="padding: 4px 0; color: #475569;">zzgl. ${taxRate}% MwSt:</td>
+            <td style="padding: 4px 0; text-align: right; color: #475569;">${oneTimeTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
+          </tr>
+          <tr>
+            <td style="padding: 4px 0; font-weight: bold; color: #0f172a; border-top: 1px solid #e2e8f0; padding-top: 6px;">Gesamtbetrag (brutto):</td>
+            <td style="padding: 4px 0; text-align: right; font-weight: bold; color: #0f172a; border-top: 1px solid #e2e8f0; padding-top: 6px;">${oneTimeGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
+          </tr>
+        `;
+      } else {
+        totalDetailsHtml = `
+          <tr>
+            <td style="padding: 4px 0; color: #475569;">Netto-Gesamtbetrag:</td>
+            <td style="padding: 4px 0; text-align: right; color: #475569;">${monthlyNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat</td>
+          </tr>
+          <tr>
+            <td style="padding: 4px 0; color: #475569;">zzgl. ${taxRate}% MwSt:</td>
+            <td style="padding: 4px 0; text-align: right; color: #475569;">${monthlyTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat</td>
+          </tr>
+          <tr>
+            <td style="padding: 4px 0; font-weight: bold; color: #0f172a; border-top: 1px solid #e2e8f0; padding-top: 6px;">Gesamtbetrag (brutto):</td>
+            <td style="padding: 4px 0; text-align: right; font-weight: bold; color: #0f172a; border-top: 1px solid #e2e8f0; padding-top: 6px;">${monthlyGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat</td>
+          </tr>
+        `;
+      }
+
+      const itemsSection = buildEmailItemsSection(items);
+
+      const emailTemplate = getOrderEmailTemplate({
+        orderNumber: order.order_number,
+        formattedDate,
+        customerCompanyName: customerSnapshot.company_name,
+        totalDetailsText,
+        totalDetailsHtml,
+        itemsDetailsText: itemsSection.text,
+        itemsDetailsHtml: itemsSection.html
+      }, `${process.env.NEXT_PUBLIC_SITE_URL || 'https://staging.hephex.de'}`, false);
+
+      await sendMail({
+        to: email,
+        subject: `Anfragebestätigung ${order.order_number}`,
+        text: emailTemplate.text,
+        html: emailTemplate.html,
+        attachments: [
+          {
+            filename: `Anfragebestaetigung_${order.order_number}.pdf`,
+            content: buffer,
+            contentType: 'application/pdf',
+          }
+        ]
+      });
+    }
+  } catch (err) {
+    console.error(`Error in post-processing for order ${orderId}:`, err);
+  }
+}
+
+export async function checkoutAction(params: {
+  items: any[];
+  endCustomerId: string;
+  customerProfile?: any;
+  lastLicenseDate?: string | null;
+}) {
+  const { items, endCustomerId, customerProfile, lastLicenseDate } = params;
+  const supabase = await createClient();
+
+  // 1. Session & Auth Check
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) {
+    throw new Error('Not authenticated');
+  }
+
+  const { data: dbUser } = await supabase
+    .from('users')
+    .select('role, company_id')
+    .eq('id', user.id)
+    .single();
+
+  const isAdminUser = dbUser?.role === 'admin' || dbUser?.role === 'verwaltung';
+  if (!isAdminUser && !dbUser?.company_id) {
+    throw new Error('Kein Unternehmen zugewiesen. Zugriff verweigert.');
+  }
+
+  // 2. Idempotency Guard
+  const orderHash = hashOrderPayload(endCustomerId, items);
+  const fiveMinutesAgo = new Date(Date.now() - 5 * 60_000).toISOString();
+
+  const { data: existingOrders } = await supabase
+    .from('orders')
+    .select('id')
+    .eq('user_id', user.id)
+    .eq('order_hash', orderHash)
+    .gte('created_at', fiveMinutesAgo);
+
+  if (existingOrders && existingOrders.length > 0) {
+    return { success: true, orderIds: existingOrders.map(o => o.id), duplicated: true };
+  }
+
+  // Fetch End Customer Stammdaten
+  const { data: endCustomer, error: customerErr } = await supabase
+    .from('end_customers')
+    .select('*')
+    .eq('id', endCustomerId)
+    .single();
+
+  if (customerErr || !endCustomer) {
+    throw new Error('Endkunde nicht gefunden.');
+  }
+
+  const customerSnapshot = buildCustomerSnapshot(customerProfile || {}, endCustomer);
+
+  const products = await getProducts();
+  const categories = await getCategories();
+
+  // 3. Checkout Split
+  const purchaseItems = items.filter(
+    (item: any) => item.billingInterval === 'one_time' || item.billingType === 'purchase'
+  );
+  const subscriptionItems = items.filter(
+    (item: any) => item.billingInterval === 'monthly' || item.billingType === 'subscription'
+  );
+
+  const orderIds: string[] = [];
+
+  const createOrderGroup = async (groupItems: any[], type: 'purchase' | 'subscription', paymentMethod: string) => {
+    if (groupItems.length === 0) return;
+
+    const orderItemsList: any[] = [];
+    let total = 0;
+
+    for (const item of groupItems) {
+      const itemSnapshot = buildOrderSnapshot(
+        item.selections,
+        products,
+        categories,
+        type === 'purchase' ? 'one_time' : 'monthly',
+        item.moduleQuantities,
+        type === 'purchase' ? lastLicenseDate : null
+      );
+      const itemsWithDevice = itemSnapshot.items.map(i => ({
+        ...i,
+        device_name: item.deviceName,
+        license_number: item.licenseNumber
+      }));
+      orderItemsList.push(...itemsWithDevice);
+      total += itemSnapshot.total;
+    }
+
+    const orderSnapshot = {
+      schema_version: 1,
+      billing_cycle: type === 'purchase' ? 'one_time' : 'monthly',
+      items: orderItemsList,
+      total: total,
+      tax_rate: 19,
+      tax_amount: Math.round(total * 0.19 * 100) / 100,
+      subtotal: Math.round((total / 1.19) * 100) / 100,
+      last_license_date: type === 'purchase' ? lastLicenseDate : null
+    };
+
+    const orderNumber = generateOrderNumber(type === 'purchase' ? 'AE' : 'BE');
+
+    const { data: order, error: orderError } = await supabase
+      .from('orders')
+      .insert([{
+        user_id: user.id,
+        company_id: dbUser?.company_id || null,
+        order_number: orderNumber,
+        order_hash: orderHash,
+        end_customer_id: endCustomerId,
+        total_price: total,
+        customer_data: customerSnapshot,
+        order_data: orderSnapshot,
+        type: type,
+        payment_method: paymentMethod,
+        status: 'pending'
+      }])
+      .select()
+      .single();
+
+    if (orderError) throw orderError;
+    orderIds.push(order.id);
+
+    // Entkoppeltes Post-Processing (asynchroner Aufruf)
+    if (user.email) {
+      Promise.resolve().then(() => {
+        triggerPostProcessing(order.id, supabase, customerSnapshot, orderSnapshot, type, user.email!);
+      });
+    }
+  };
+
+  await createOrderGroup(purchaseItems, 'purchase', 'invoice');
+  await createOrderGroup(subscriptionItems, 'subscription', 'sepa');
+
+  return { success: true, orderIds, duplicated: false };
+}

shop/app/admin/categories/page.tsx

@@ -9,7 +9,7 @@ export default async function AdminCategoriesPage() {
     <div className="flex-1 space-y-8 p-8 pt-6">
       <div className="flex items-center justify-between space-y-2">
         <div>
-          <h2 className="text-3xl font-bold tracking-tight text-gradient flex items-center gap-3">
+          <h2 className="text-3xl font-bold tracking-tight text-white flex items-center gap-3">
             <LayoutGrid className="w-8 h-8 text-primary" />
             Kategorien
           </h2>

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

@@ -0,0 +1,455 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import Link from 'next/link'
+import {
+  Building2,
+  Plus,
+  Trash2,
+  Loader2,
+  Pencil,
+  ArrowLeft,
+  Search,
+  MapPin,
+  User,
+  Users,
+  Briefcase,
+  AlertCircle
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  getCompanyDetails,
+  getEndCustomersByCompanyWithPartners,
+  getCompanyPartners,
+  adminCreateEndCustomer,
+  adminUpdateEndCustomer,
+  adminDeleteEndCustomer
+} from '@/lib/actions/companies'
+
+export default function CompanyCustomersPage() {
+  const params = useParams()
+  const router = useRouter()
+  const companyId = params.id as string
+
+  const [company, setCompany] = useState<any>(null)
+  const [customers, setCustomers] = useState<any[]>([])
+  const [partners, setPartners] = useState<any[]>([])
+  const [loading, setLoading] = useState(true)
+  const [loadingAction, setLoadingAction] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  // Dialog State
+  const [isOpen, setIsOpen] = useState(false)
+  const [editingCustomer, setEditingCustomer] = useState<any>(null)
+
+  // Form State
+  const [companyName, setCompanyName] = useState('')
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [street, setStreet] = useState('')
+  const [zip, setZip] = useState('')
+  const [city, setCity] = useState('')
+  const [vatId, setVatId] = useState('')
+  const [partnerId, setPartnerId] = useState('')
+  const [email, setEmail] = useState('')
+  const [error, setError] = useState<string | null>(null)
+
+  const loadData = async () => {
+    setLoading(true)
+    try {
+      const [compDetails, custData, partData] = await Promise.all([
+        getCompanyDetails(companyId),
+        getEndCustomersByCompanyWithPartners(companyId),
+        getCompanyPartners(companyId)
+      ])
+      setCompany(compDetails)
+      setCustomers(custData)
+      setPartners(partData)
+    } catch (err) {
+      console.error('Fehler beim Laden der Daten:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (companyId) {
+      loadData()
+    }
+  }, [companyId])
+
+  const handleOpenDialog = (customer: any = null) => {
+    setEditingCustomer(customer)
+    setCompanyName(customer ? customer.company_name || '' : '')
+    setFirstName(customer ? customer.first_name || '' : '')
+    setLastName(customer ? customer.last_name || '' : '')
+    setStreet(customer ? customer.street || '' : '')
+    setZip(customer ? customer.zip || '' : '')
+    setCity(customer ? customer.city || '' : '')
+    setVatId(customer ? customer.vat_id || '' : '')
+    setPartnerId(companyId)
+    setEmail(customer ? customer.email || '' : '')
+    setError(null)
+    setIsOpen(true)
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoadingAction(true)
+    setError(null)
+    try {
+      const payload = {
+        partner_id: companyId,
+        company_name: companyName.trim(),
+        first_name: firstName.trim() || undefined,
+        last_name: lastName.trim() || undefined,
+        street: street.trim() || undefined,
+        zip: zip.trim() || undefined,
+        city: city.trim() || undefined,
+        vat_id: vatId.trim() || undefined,
+        email: email.trim() || undefined,
+      }
+
+      if (editingCustomer) {
+        await adminUpdateEndCustomer(editingCustomer.id, payload)
+      } else {
+        await adminCreateEndCustomer(payload)
+      }
+      setIsOpen(false)
+      loadData()
+    } catch (err: any) {
+      setError(err.message || 'Fehler beim Speichern des Endkunden.')
+    } finally {
+      setLoadingAction(false)
+    }
+  }
+
+  const handleDelete = async (id: string, name: string) => {
+    if (!confirm(`Endkunden "${name}" wirklich löschen?`)) return
+    setLoadingAction(true)
+    try {
+      await adminDeleteEndCustomer(id)
+      loadData()
+    } catch (err) {
+      console.error('Fehler beim Löschen des Endkunden:', err)
+    } finally {
+      setLoadingAction(false)
+    }
+  }
+
+  const filteredCustomers = customers.filter((c) => {
+    const q = searchQuery.toLowerCase()
+    const nameMatch = c.company_name?.toLowerCase().includes(q)
+    const personMatch = `${c.first_name || ''} ${c.last_name || ''}`.toLowerCase().includes(q)
+    const addressMatch = `${c.street || ''} ${c.zip || ''} ${c.city || ''}`.toLowerCase().includes(q)
+    const partnerMatch = c.partner_name?.toLowerCase().includes(q)
+    const emailMatch = c.email?.toLowerCase().includes(q)
+    return nameMatch || personMatch || addressMatch || partnerMatch || emailMatch
+  })
+
+
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto text-slate-900 dark:text-white space-y-8">
+      {/* Back Link */}
+      <div>
+        <Link
+          href="/admin/companies"
+          className="inline-flex items-center gap-2 text-sm font-semibold text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          Zurück zur Firmenverwaltung
+        </Link>
+      </div>
+
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
+            <Briefcase className="w-8 h-8 text-indigo-500" />
+            Endkunden von {company ? company.name : '...'}
+          </h1>
+          <p className="text-slate-500 dark:text-slate-400 text-sm mt-1">
+            Hier verwalten Sie alle Endkunden, die Partnern dieser Firma zugeordnet sind.
+          </p>
+        </div>
+        <Button
+          onClick={() => handleOpenDialog()}
+          disabled={loading || partners.length === 0}
+          className="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold"
+          title={partners.length === 0 ? 'Es müssen zuerst Benutzer für diese Firma existieren' : ''}
+        >
+          <Plus className="w-4 h-4 mr-2" /> Endkunde anlegen
+        </Button>
+      </div>
+
+      {/* Warning if no partners exist */}
+      {!loading && partners.length === 0 && (
+        <div className="p-4 bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-900/30 rounded-xl flex gap-3 text-amber-800 dark:text-amber-300 text-sm">
+          <AlertCircle className="w-5 h-5 shrink-0 text-amber-600 dark:text-amber-400" />
+          <div>
+            <p className="font-semibold">Keine Benutzer zugewiesen</p>
+            <p className="mt-1">
+              Diese Firma hat aktuell keine zugewiesenen Partner (Benutzer mit der Rolle &quot;partner&quot;).
+              Sie müssen zuerst in der <Link href="/admin/users" className="underline font-semibold hover:text-amber-900 dark:hover:text-amber-200">Benutzerverwaltung</Link> Partner erstellen und dieser Firma zuweisen, um Endkunden anzulegen.
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Table Section */}
+      <div className="p-5 bg-white dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm">
+        <div className="relative mb-6 max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+          <input
+            type="text"
+            placeholder="Endkunden suchen (Name, Ansprechpartner, Ort)..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-9 pr-4 py-2 text-sm bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-md text-slate-900 dark:text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all"
+          />
+        </div>
+
+        {loading ? (
+          <div className="flex justify-center items-center py-16">
+            <Loader2 className="w-8 h-8 text-indigo-500 animate-spin" />
+            <span className="ml-3 text-slate-400 text-sm">Lade Endkunden...</span>
+          </div>
+        ) : filteredCustomers.length === 0 ? (
+          <div className="text-center py-16 border-2 border-dashed border-slate-200 dark:border-white/5 rounded-xl text-slate-500">
+            <Users className="w-10 h-10 mx-auto mb-3 opacity-30" />
+            Keine Endkunden gefunden.
+          </div>
+        ) : (
+          <table className="w-full text-left">
+            <thead>
+              <tr className="border-b border-slate-200 dark:border-white/10 text-slate-400 text-xs font-semibold uppercase">
+                <th className="pb-3">Endkunde (Firma / Kontakt)</th>
+                <th className="pb-3">Lieferadresse</th>
+                <th className="pb-3">E-Mail</th>
+                <th className="pb-3">USt-ID</th>
+                <th className="pb-3">Zugeordneter Partner</th>
+                <th className="pb-3 text-right">Aktionen</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100 dark:divide-white/5">
+              {filteredCustomers.map((customer) => (
+                <tr key={customer.id} className="hover:bg-slate-50 dark:hover:bg-white/3 transition-colors">
+                  <td className="py-4">
+                    <div className="font-semibold text-slate-900 dark:text-white">
+                      {customer.company_name}
+                    </div>
+                    {(customer.first_name || customer.last_name) && (
+                      <div className="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-1 mt-0.5">
+                        <User className="w-3 h-3 text-slate-400 shrink-0" />
+                        <span>{customer.first_name || ''} {customer.last_name || ''}</span>
+                      </div>
+                    )}
+                  </td>
+                  <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
+                    {customer.street ? (
+                      <div className="flex items-center gap-2">
+                        <MapPin className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+                        <span>
+                          {customer.street}, {customer.zip} {customer.city}
+                        </span>
+                      </div>
+                    ) : (
+                      <span className="text-slate-400 dark:text-slate-600">–</span>
+                    )}
+                  </td>
+                  <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
+                    {customer.email || <span className="text-slate-400 dark:text-slate-600">–</span>}
+                  </td>
+                  <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
+                    {customer.vat_id || <span className="text-slate-400 dark:text-slate-600">–</span>}
+                  </td>
+                  <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
+                    <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-semibold bg-indigo-50 dark:bg-indigo-950/30 text-indigo-700 dark:text-indigo-300">
+                      {customer.partner_name || 'Unbekannt'}
+                    </span>
+                  </td>
+                  <td className="py-4 text-right">
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => handleOpenDialog(customer)}
+                        className="h-8 w-8 text-indigo-500 hover:text-indigo-400 hover:bg-indigo-500/10"
+                        title="Endkunde bearbeiten"
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        disabled={loadingAction}
+                        onClick={() => handleDelete(customer.id, customer.company_name)}
+                        className="h-8 w-8 text-red-500 hover:text-red-400 hover:bg-red-500/10"
+                        title="Endkunde löschen"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {/* Dialog: Endkunde anlegen / bearbeiten */}
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {editingCustomer ? 'Endkunden bearbeiten' : 'Neuen Endkunden anlegen'}
+            </DialogTitle>
+            <DialogDescription className="text-slate-500 dark:text-slate-400">
+              Geben Sie die Firmendaten und optional Kontaktdaten und Adresse des Endkunden an.
+            </DialogDescription>
+          </DialogHeader>
+          <form onSubmit={handleSubmit} className="space-y-4 mt-2">
+            <div className="space-y-2">
+              <Label htmlFor="cust-company">Firmenname *</Label>
+              <Input
+                id="cust-company"
+                type="text"
+                required
+                placeholder="Endkunde GmbH"
+                value={companyName}
+                onChange={(e) => setCompanyName(e.target.value)}
+                className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="cust-firstname">Vorname</Label>
+                <Input
+                  id="cust-firstname"
+                  type="text"
+                  placeholder="Max"
+                  value={firstName}
+                  onChange={(e) => setFirstName(e.target.value)}
+                  className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="cust-lastname">Nachname</Label>
+                <Input
+                  id="cust-lastname"
+                  type="text"
+                  placeholder="Mustermann"
+                  value={lastName}
+                  onChange={(e) => setLastName(e.target.value)}
+                  className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="cust-street">Straße & Hausnummer</Label>
+              <Input
+                id="cust-street"
+                type="text"
+                placeholder="Beispielstraße 12"
+                value={street}
+                onChange={(e) => setStreet(e.target.value)}
+                className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
+              />
+            </div>
+
+            <div className="grid grid-cols-3 gap-4">
+              <div className="space-y-2 col-span-1">
+                <Label htmlFor="cust-zip">PLZ</Label>
+                <Input
+                  id="cust-zip"
+                  type="text"
+                  placeholder="12345"
+                  value={zip}
+                  onChange={(e) => setZip(e.target.value)}
+                  className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
+                />
+              </div>
+              <div className="space-y-2 col-span-2">
+                <Label htmlFor="cust-city">Ort</Label>
+                <Input
+                  id="cust-city"
+                  type="text"
+                  placeholder="Musterort"
+                  value={city}
+                  onChange={(e) => setCity(e.target.value)}
+                  className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="cust-vat">USt-ID (VAT-ID)</Label>
+                <Input
+                  id="cust-vat"
+                  type="text"
+                  placeholder="DE123456789"
+                  value={vatId}
+                  onChange={(e) => setVatId(e.target.value)}
+                  className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="cust-partner">Zugeordnetes Unternehmen</Label>
+                <Input
+                  id="cust-partner"
+                  type="text"
+                  disabled
+                  value={company ? company.name : ''}
+                  className="bg-slate-100 dark:bg-white/10 border-slate-200 dark:border-white/10 cursor-not-allowed"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="cust-email">E-Mail</Label>
+              <Input
+                id="cust-email"
+                type="email"
+                placeholder="kunde@beispiel.de"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
+              />
+            </div>
+
+            {error && (
+              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+            )}
+
+            <DialogFooter className="pt-2">
+              <Button type="button" variant="outline" onClick={() => setIsOpen(false)} disabled={loadingAction}>
+                Abbrechen
+              </Button>
+              <Button type="submit" disabled={loadingAction} className="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold">
+                {loadingAction ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
+                {editingCustomer ? 'Speichern' : 'Anlegen'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

shop/app/admin/companies/page.tsx

@@ -0,0 +1,407 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { Building2, Plus, Trash2, Loader2, Pencil, Mail, MapPin, Search, Users, RefreshCw } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { getCompanies, createCompany, updateCompany, deleteCompany, syncCompaniesFromLicServer, syncCustomersFromLicServer } from '@/lib/actions/companies'
+
+export default function CompaniesPage() {
+  const [companies, setCompanies] = useState<any[]>([])
+  const [loading, setLoading] = useState(true)
+  const [isOpen, setIsOpen] = useState(false)
+  const [editingCompany, setEditingCompany] = useState<any>(null)
+
+  const [name, setName] = useState('')
+  const [street, setStreet] = useState('')
+  const [zip, setZip] = useState('')
+  const [city, setCity] = useState('')
+  const [email, setEmail] = useState('')
+
+  const [creating, setCreating] = useState(false)
+  const [createError, setCreateError] = useState<string | null>(null)
+  const [deletingId, setDeletingId] = useState<string | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [syncing, setSyncing] = useState(false)
+  const [statusMsg, setStatusMsg] = useState<string | null>(null)
+  const [statusType, setStatusType] = useState<'success' | 'error' | ''>('')
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null)
+  const [deleteConfirmName, setDeleteConfirmName] = useState('')
+
+  const handleSync = async () => {
+    setSyncing(true)
+    setStatusMsg(null)
+    try {
+      const resCompanies = await syncCompaniesFromLicServer()
+      const resCustomers = await syncCustomersFromLicServer()
+      setStatusMsg(`${resCompanies.count} Partner und ${resCustomers.count} Kunden erfolgreich vom LicServer importiert.`)
+      setStatusType('success')
+      loadCompanies()
+    } catch (err: any) {
+      setStatusMsg(`Fehler beim Import: ${err.message || err}`)
+      setStatusType('error')
+    } finally {
+      setSyncing(false)
+    }
+  }
+
+
+
+  const loadCompanies = async () => {
+    setLoading(true)
+    try {
+      const data = await getCompanies()
+      setCompanies(data)
+    } catch (err) {
+      console.error('Fehler beim Laden der Partner:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    loadCompanies()
+  }, [])
+
+  const handleOpenDialog = (company: any = null) => {
+    setEditingCompany(company)
+    setName(company ? company.name || '' : '')
+    setStreet(company ? company.street || '' : '')
+    setZip(company ? company.zip || '' : '')
+    setCity(company ? company.city || '' : '')
+    setEmail(company ? company.email || '' : '')
+    setCreateError(null)
+    setIsOpen(true)
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setCreating(true)
+    setCreateError(null)
+    try {
+      const payload = {
+        name: name.trim(),
+        street: street.trim(),
+        zip: zip.trim(),
+        city: city.trim(),
+        email: email.trim(),
+      }
+      if (editingCompany) {
+        await updateCompany(editingCompany.id, payload)
+      } else {
+        await createCompany(payload)
+      }
+      setIsOpen(false)
+      loadCompanies()
+    } catch (err: any) {
+      setCreateError(err.message || 'Fehler beim Speichern.')
+    } finally {
+      setCreating(false)
+    }
+  }
+
+
+
+
+
+  const filteredCompanies = companies.filter((c) => {
+    const nameMatch = c.name?.toLowerCase().includes(searchQuery.toLowerCase())
+    const addressMatch = `${c.street || ''} ${c.zip || ''} ${c.city || ''}`.toLowerCase().includes(searchQuery.toLowerCase())
+    const emailMatch = c.email?.toLowerCase().includes(searchQuery.toLowerCase())
+    return nameMatch || addressMatch || emailMatch
+  })
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto text-slate-900 dark:text-white space-y-8">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
+            <Building2 className="w-8 h-8 text-blue-500" />
+            Firmenverwaltung
+          </h1>
+          <p className="text-slate-500 dark:text-slate-400 text-sm mt-1">
+            Verwalten Sie Firmen, deren Lieferadresse und weisen Sie Partner zu.
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          <Button
+            onClick={handleSync}
+            disabled={syncing}
+            variant="outline"
+            className="border-slate-200 dark:border-white/10 text-slate-900 dark:text-white"
+          >
+            {syncing ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <RefreshCw className="w-4 h-4 mr-2" />}
+            Partner importieren
+          </Button>
+          <Button
+            onClick={() => handleOpenDialog()}
+            className="bg-blue-600 hover:bg-blue-700 text-white font-semibold"
+          >
+            <Plus className="w-4 h-4 mr-2" /> Firma anlegen
+          </Button>
+        </div>
+      </div>
+
+      {statusMsg && (
+        <div className={`p-4 rounded-lg text-sm border ${
+          statusType === 'success' ? 'bg-green-500/10 border-green-500/20 text-green-600 dark:text-green-400' :
+          'bg-destructive/10 border-destructive/20 text-destructive'
+        }`}>
+          {statusMsg}
+        </div>
+      )}
+
+      {/* Firmen-Tabelle */}
+      <div className="p-5 bg-white dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm">
+        <div className="relative mb-6 max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+          <input
+            type="text"
+            placeholder="Firmen suchen (Name, Adresse, E-Mail)..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-9 pr-4 py-2 text-sm bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-md text-slate-900 dark:text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
+          />
+        </div>
+        {loading ? (
+          <div className="flex justify-center items-center py-16">
+            <Loader2 className="w-8 h-8 text-blue-500 animate-spin" />
+            <span className="ml-3 text-slate-400 text-sm">Lade Firmen...</span>
+          </div>
+        ) : filteredCompanies.length === 0 ? (
+          <div className="text-center py-16 border-2 border-dashed border-slate-200 dark:border-white/5 rounded-xl text-slate-500">
+            <Building2 className="w-10 h-10 mx-auto mb-3 opacity-30" />
+            Keine Firmen gefunden.
+          </div>
+        ) : (
+          <table className="w-full text-left">
+            <thead>
+              <tr className="border-b border-slate-200 dark:border-white/10 text-slate-400 text-xs font-semibold uppercase">
+                <th className="pb-3">Firmenname</th>
+                <th className="pb-3">Lieferadresse</th>
+                <th className="pb-3">E-Mail</th>
+                <th className="pb-3">Erstellt am</th>
+                <th className="pb-3 text-right">Aktionen</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100 dark:divide-white/5">
+              {filteredCompanies.map((company) => (
+                <tr key={company.id} className="hover:bg-slate-50 dark:hover:bg-white/3 transition-colors">
+                  <td className="py-4 font-semibold text-slate-900 dark:text-white">
+                    <div className="flex items-center gap-2">
+                      <Building2 className="w-4 h-4 text-blue-500 shrink-0" />
+                      {company.name}
+                    </div>
+                  </td>
+                  <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
+                    <div className="flex items-center gap-2">
+                      <MapPin className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+                      <span>
+                        {company.street ? `${company.street}, ${company.zip} ${company.city}` : '–'}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="py-4 text-sm text-slate-700 dark:text-slate-300">
+                    {company.email ? (
+                      <div className="flex items-center gap-2">
+                        <Mail className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+                        <span>{company.email}</span>
+                      </div>
+                    ) : '–'}
+                  </td>
+                  <td className="py-4 text-sm text-slate-500 dark:text-slate-400">
+                    {company.created_at ? new Date(company.created_at).toLocaleDateString('de-DE') : '–'}
+                  </td>
+                  <td className="py-4 text-right">
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        asChild
+                        className="h-8 w-8 text-indigo-500 hover:text-indigo-400 hover:bg-indigo-500/10"
+                        title="Endkunden dieser Firma verwalten"
+                      >
+                        <Link href={`/admin/companies/${company.id}/customers`}>
+                          <Users className="h-4 w-4" />
+                        </Link>
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => handleOpenDialog(company)}
+                        className="h-8 w-8 text-blue-500 hover:text-blue-400 hover:bg-blue-500/10"
+                        title="Firma bearbeiten"
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                       <Button
+                        variant="ghost"
+                        size="icon"
+                        disabled={deletingId === company.id}
+                        onClick={() => {
+                          setDeleteConfirmId(company.id)
+                          setDeleteConfirmName(company.name)
+                        }}
+                        className="h-8 w-8 text-red-500 hover:text-red-400 hover:bg-red-500/10"
+                        title="Firma löschen"
+                      >
+                        {deletingId === company.id
+                          ? <Loader2 className="h-4 w-4 animate-spin" />
+                          : <Trash2 className="h-4 w-4" />}
+                      </Button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {/* Dialog: Firma anlegen / bearbeiten */}
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {editingCompany ? 'Firma bearbeiten' : 'Neue Firma anlegen'}
+            </DialogTitle>
+            <DialogDescription className="text-slate-500 dark:text-slate-400">
+              Geben Sie die Firmendetails und die vollständige Lieferadresse ein. Alle Felder sind Pflichtfelder.
+            </DialogDescription>
+          </DialogHeader>
+          <form onSubmit={handleSubmit} className="space-y-4 mt-2">
+            <div className="space-y-2">
+              <Label htmlFor="company-name">Firmenname</Label>
+              <Input
+                id="company-name"
+                type="text"
+                required
+                placeholder="Muster GmbH"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="company-street">Straße & Hausnummer</Label>
+              <Input
+                id="company-street"
+                type="text"
+                required
+                placeholder="Musterstraße 123"
+                value={street}
+                onChange={(e) => setStreet(e.target.value)}
+                className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
+              />
+            </div>
+
+            <div className="grid grid-cols-3 gap-4">
+              <div className="space-y-2 col-span-1">
+                <Label htmlFor="company-zip">PLZ</Label>
+                <Input
+                  id="company-zip"
+                  type="text"
+                  required
+                  placeholder="12345"
+                  value={zip}
+                  onChange={(e) => setZip(e.target.value)}
+                  className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
+                />
+              </div>
+              <div className="space-y-2 col-span-2">
+                <Label htmlFor="company-city">Ort</Label>
+                <Input
+                  id="company-city"
+                  type="text"
+                  required
+                  placeholder="Musterstadt"
+                  value={city}
+                  onChange={(e) => setCity(e.target.value)}
+                  className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="company-email">E-Mail für Lieferadresse</Label>
+              <Input
+                id="company-email"
+                type="email"
+                required
+                placeholder="lieferung@musterfirma.de"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10"
+              />
+            </div>
+
+            {createError && (
+              <p className="text-sm text-red-600 dark:text-red-400">{createError}</p>
+            )}
+            <DialogFooter className="pt-2">
+              <Button type="button" variant="outline" onClick={() => setIsOpen(false)} disabled={creating}>
+                Abbrechen
+              </Button>
+              <Button type="submit" disabled={creating} className="bg-blue-600 hover:bg-blue-700 text-white font-semibold">
+                {creating ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
+                {editingCompany ? 'Speichern' : 'Anlegen'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Dialog: Delete Confirmation */}
+      <Dialog open={deleteConfirmId !== null} onOpenChange={(open) => { if (!open) setDeleteConfirmId(null) }}>
+        <DialogContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
+          <DialogHeader>
+            <DialogTitle>Firma löschen</DialogTitle>
+            <DialogDescription className="text-slate-500 dark:text-slate-400">
+              Möchten Sie die Firma <strong>{deleteConfirmName}</strong> wirklich löschen? Alle zugewiesenen Benutzer werden getrennt. Dieser Schritt kann nicht rückgängig gemacht werden.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="pt-2">
+            <Button type="button" variant="outline" onClick={() => setDeleteConfirmId(null)}>
+              Abbrechen
+            </Button>
+            <Button 
+              type="button" 
+              onClick={async () => {
+                if (deleteConfirmId) {
+                  setDeletingId(deleteConfirmId)
+                  const targetId = deleteConfirmId
+                  setDeleteConfirmId(null)
+                  try {
+                    await deleteCompany(targetId)
+                    loadCompanies()
+                  } catch (err) {
+                    console.error('Fehler beim Löschen:', err)
+                  } finally {
+                    setDeletingId(null)
+                  }
+                }
+              }}
+              className="bg-red-600 hover:bg-red-700 text-white font-semibold"
+            >
+              Löschen
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+
+    </div>
+  )
+}

shop/app/admin/einstellungen/page.tsx

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

shop/app/admin/layout.tsx

@@ -1,15 +1,37 @@
 import Link from 'next/link'
-import { LayoutDashboard, Package, Settings, Users, LogOut, LayoutGrid, ShoppingCart } from 'lucide-react'
+import { LayoutDashboard, Package, Settings, Users, LayoutGrid, ShoppingCart, Wrench, Database, Building2, Sparkles } from 'lucide-react'
+import { redirect } from 'next/navigation'
+import { createClient } from '@/lib/supabase/server'
+import { AdminLogoutButton } from '@/components/admin/logout-menu-item'
+import { DemoWrapper } from '@/components/DemoWrapper'
+import { AdminNavLink } from '@/components/admin/admin-nav-link'
 
-export default function AdminLayout({
+export default async function AdminLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+  if (!user) redirect('/auth/login')
+
+  const { data: userData } = await supabase
+    .from('users')
+    .select('role')
+    .eq('id', user.id)
+    .single()
+
+  const userRole = userData?.role
+  if (!userData || (userRole !== 'admin' && userRole !== 'verwaltung')) {
+    redirect('/')
+  }
+
+  const isVerwaltung = userRole === 'verwaltung'
+
   return (
-    <div className="flex min-h-screen bg-[#020617] text-white">
+    <div className="flex min-h-screen bg-slate-50 dark:bg-[#020617] text-slate-900 dark:text-white">
       {/* Sidebar */}
-      <aside className="w-64 border-r border-white/5 bg-black/20 backdrop-blur-xl flex flex-col">
+      <aside className="w-64 border-r border-slate-200 dark:border-white/5 bg-white dark:bg-black/20 backdrop-blur-xl flex flex-col">
         <div className="p-6">
           <Link href="/" className="flex items-center gap-2">
             <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
@@ -18,39 +40,70 @@ export default function AdminLayout({
             <span className="font-bold text-xl tracking-tighter">Admin Panel</span>
           </Link>
         </div>
-        
+
         <nav className="flex-1 px-4 space-y-2 py-4">
-          <Link href="/admin" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
+          <AdminNavLink href="/admin">
             <LayoutDashboard className="w-5 h-5" />
             Dashboard
-          </Link>
-          <Link href="/admin/products" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
+          </AdminNavLink>
+          <AdminNavLink href="/admin/products">
             <Package className="w-5 h-5" />
             Produkte
-          </Link>
-          <Link href="/admin/categories" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
+          </AdminNavLink>
+          <AdminNavLink href="/admin/categories">
             <LayoutGrid className="w-5 h-5" />
             Kategorien
-          </Link>
-          <Link href="/admin/orders" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
+          </AdminNavLink>
+          <AdminNavLink href="/admin/wysiwyg">
+            <Sparkles className="w-5 h-5" />
+            Order-Wizard
+          </AdminNavLink>
+          <AdminNavLink href="/admin/orders">
             <ShoppingCart className="w-5 h-5" />
             Bestellungen
-          </Link>
-          <Link href="/admin/users" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
+          </AdminNavLink>
+          <AdminNavLink href="/admin/users">
             <Users className="w-5 h-5" />
             Benutzer
-          </Link>
-          <Link href="/admin/settings" className="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
-            <Settings className="w-5 h-5" />
-            Einstellungen
-          </Link>
+          </AdminNavLink>
+
+          <AdminNavLink href="/admin/companies">
+            <Building2 className="w-5 h-5" />
+            Firmen
+          </AdminNavLink>
+
+          {!isVerwaltung && (
+            <>
+              <div className="pt-2 pb-1 px-3">
+                <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-600">Einstellungen</span>
+              </div>
+              <AdminNavLink href="/admin/einstellungen">
+                <Settings className="w-5 h-5" />
+                Allgemein
+              </AdminNavLink>
+              <AdminNavLink href="/admin/settings">
+                <Wrench className="w-5 h-5" />
+                SMTP
+              </AdminNavLink>
+              <AdminNavLink href="/admin/tools">
+                <Database className="w-5 h-5" />
+                DB-Tools
+              </AdminNavLink>
+            </>
+          )}
         </nav>
 
-        <div className="p-4 border-t border-white/5">
-          <button className="flex w-full items-center gap-3 px-3 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all">
-            <LogOut className="w-5 h-5" />
-            Abmelden
-          </button>
+
+        <div className="p-4 border-t border-slate-200 dark:border-white/5 space-y-4">
+          <AdminLogoutButton />
+          <div className="px-3 pt-2 flex items-center gap-2 border-t border-slate-200 dark:border-white/5 opacity-60">
+            <span className="font-bold text-sm tracking-tighter text-slate-800 dark:text-white">CASPOS Store</span>
+            <DemoWrapper>
+              <span className="text-[10px] bg-amber-500/20 text-amber-600 dark:text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
+                Demo
+              </span>
+            </DemoWrapper>
+          </div>
         </div>
       </aside>
 

shop/app/admin/orders/page.tsx

@@ -1,20 +1,14 @@
-import { createClient } from '@/lib/supabase/server'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { FileText, Download, ExternalLink } from 'lucide-react'
-import Link from 'next/link'
-
+import { createAdminClient } from '@/lib/supabase/admin'
+import { OrdersTable } from '@/components/admin/orders-table'
 import { Suspense } from 'react'
 
 export default async function AdminOrdersPage() {
   return (
-    <div className="space-y-6">
+    <div className="p-8 space-y-6">
       <div className="flex justify-between items-center">
         <div>
-          <h1 className="text-3xl font-bold tracking-tight text-white">Bestellungen & Rechnungen</h1>
-          <p className="text-slate-400">Verwalten Sie alle Kundenbestellungen und greifen Sie auf generierte PDFs zu.</p>
+          <h1 className="text-3xl font-bold tracking-tight text-white">Bestellungen</h1>
+          <p className="text-slate-400">Verwalten Sie alle Kundenbestellungen und greifen Sie auf generierte Annfragesbestätigungen zu.</p>
         </div>
       </div>
 
@@ -26,83 +20,16 @@ export default async function AdminOrdersPage() {
 }
 
 async function OrdersData() {
-  const supabase = await createClient()
-  
-  const { data: orders, error } = await supabase
+  const adminDb = createAdminClient()
+
+  const { data: orders, error } = await adminDb
     .from('orders')
     .select('*')
     .order('created_at', { ascending: false })
 
   if (error) {
-    return <div>Fehler beim Laden der Bestellungen: {error.message}</div>
+    return <div className="text-red-500">Fehler beim Laden der Bestellungen: {error.message}</div>
   }
 
-  return (
-    <Card className="glass-dark border-white/10">
-      <CardContent className="p-0">
-        <Table>
-          <TableHeader>
-            <TableRow className="border-white/10 hover:bg-transparent">
-              <TableHead className="w-[140px] text-slate-200">Bestellnr.</TableHead>
-              <TableHead className="text-slate-200">Datum</TableHead>
-              <TableHead className="text-slate-200">Kunde</TableHead>
-              <TableHead className="text-slate-200">Betrag</TableHead>
-              <TableHead className="text-slate-200">Status</TableHead>
-              <TableHead className="text-right text-slate-200">Rechnung</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {orders?.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={6} className="text-center py-12 text-muted-foreground">
-                  Noch keine Bestellungen vorhanden.
-                </TableCell>
-              </TableRow>
-            ) : (
-              orders?.map((order) => (
-                <TableRow key={order.id} className="border-white/5 hover:bg-white/5">
-                  <TableCell className="font-mono text-xs text-primary font-semibold">
-                    {order.order_number ?? order.id.slice(0, 8) + '...'}
-                  </TableCell>
-                  <TableCell className="text-slate-300">
-                    {new Date(order.created_at).toLocaleDateString('de-DE')}
-                  </TableCell>
-                  <TableCell>
-                    <div className="font-medium text-white">{order.customer_data?.company_name || 'Privatkunde'}</div>
-                    <div className="text-xs text-slate-400">{order.customer_data?.first_name} {order.customer_data?.last_name}</div>
-                  </TableCell>
-                  <TableCell className="font-semibold text-white">
-                    {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_price)}
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant={order.status === 'completed' ? 'default' : 'secondary'} className="capitalize">
-                      {order.status}
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {order.pdf_url ? (
-                      <div className="flex justify-end gap-2">
-                        <Button variant="outline" size="sm" asChild className="h-8 border-white/10 hover:bg-primary/20">
-                          <a href={order.pdf_url} target="_blank" rel="noopener noreferrer">
-                            <ExternalLink className="w-4 h-4 mr-2" /> Ansehen
-                          </a>
-                        </Button>
-                        <Button variant="secondary" size="sm" asChild className="h-8">
-                          <a href={order.pdf_url} download>
-                            <Download className="w-4 h-4" />
-                          </a>
-                        </Button>
-                      </div>
-                    ) : (
-                      <span className="text-xs text-muted-foreground italic">Kein PDF</span>
-                    )}
-                  </TableCell>
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  )
+  return <OrdersTable initialOrders={orders || []} />
 }

shop/app/admin/page.tsx

@@ -1,23 +1,36 @@
 import { createClient } from '@/lib/supabase/server'
+import { createAdminClient } from '@/lib/supabase/admin'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Package, ShoppingCart, Users, TrendingUp } from 'lucide-react'
 import { AdminRecentOrders } from '@/components/admin/recent-orders'
+import Link from 'next/link'
 
 // ─── KPI-Daten aus DB ────────────────────────────────────────────────────────
 async function getKpis() {
   const supabase = await createClient()
+  const adminDb = createAdminClient()
 
   const [
     { data: orders },
     { count: userCount },
     { count: productCount },
   ] = await Promise.all([
-    supabase.from('orders').select('total_price, status'),
-    supabase.from('profiles').select('*', { count: 'exact', head: true }),
+    adminDb.from('orders').select('total_price, status, created_at'),
+    adminDb.from('profiles').select('*', { count: 'exact', head: true }),
     supabase.from('products').select('*', { count: 'exact', head: true }),
   ])
 
-  const totalRevenue = (orders ?? []).reduce((sum, o) => sum + Number(o.total_price), 0)
+  const now = new Date()
+  const currentYear = now.getFullYear()
+  const currentMonth = now.getMonth()
+
+  const completedOrdersThisMonth = (orders ?? []).filter(o => {
+    if (o.status !== 'completed') return false
+    const orderDate = new Date(o.created_at)
+    return orderDate.getFullYear() === currentYear && orderDate.getMonth() === currentMonth
+  })
+
+  const totalRevenue = completedOrdersThisMonth.reduce((sum, o) => sum + Number(o.total_price), 0)
   const orderCount = (orders ?? []).length
 
   return { totalRevenue, orderCount, userCount: userCount ?? 0, productCount: productCount ?? 0 }
@@ -28,55 +41,63 @@ export default async function AdminDashboard() {
 
   return (
     <div className="p-8 space-y-8">
-      <h2 className="text-3xl font-bold tracking-tight text-gradient">Dashboard</h2>
+      <h2 className="text-3xl font-bold tracking-tight text-white">Dashboard</h2>
 
       {/* KPI Cards – echte DB-Daten */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <Card className="glass-dark border-white/5">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium text-slate-300">Umsatz gesamt</CardTitle>
-            <TrendingUp className="h-4 w-4 text-primary" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-white">
-              {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalRevenue)}
-            </div>
-            <p className="text-xs text-slate-400">Aus allen Bestellungen</p>
-          </CardContent>
-        </Card>
+        <Link href="/admin/orders" className="block transition-transform duration-300 hover:scale-[1.02]">
+          <Card className="glass-dark border-white/5 cursor-pointer hover:border-primary/40 hover:bg-white/[0.07] transition-all duration-300">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium text-slate-300">Umsatz aktueller Monat</CardTitle>
+              <TrendingUp className="h-4 w-4 text-primary" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold text-white">
+                {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalRevenue)}
+              </div>
+              <p className="text-xs text-slate-400">Nur fertige Bestellungen</p>
+            </CardContent>
+          </Card>
+        </Link>
 
-        <Card className="glass-dark border-white/5">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium text-slate-300">Bestellungen</CardTitle>
-            <ShoppingCart className="h-4 w-4 text-primary" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-white">{orderCount}</div>
-            <p className="text-xs text-slate-400">Gesamt</p>
-          </CardContent>
-        </Card>
+        <Link href="/admin/orders" className="block transition-transform duration-300 hover:scale-[1.02]">
+          <Card className="glass-dark border-white/5 cursor-pointer hover:border-primary/40 hover:bg-white/[0.07] transition-all duration-300">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium text-slate-300">Bestellungen</CardTitle>
+              <ShoppingCart className="h-4 w-4 text-primary" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold text-white">{orderCount}</div>
+              <p className="text-xs text-slate-400">Gesamt</p>
+            </CardContent>
+          </Card>
+        </Link>
 
-        <Card className="glass-dark border-white/5">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium text-slate-300">Produkte</CardTitle>
-            <Package className="h-4 w-4 text-primary" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-white">{productCount}</div>
-            <p className="text-xs text-slate-400">Im Katalog</p>
-          </CardContent>
-        </Card>
+        <Link href="/admin/products" className="block transition-transform duration-300 hover:scale-[1.02]">
+          <Card className="glass-dark border-white/5 cursor-pointer hover:border-primary/40 hover:bg-white/[0.07] transition-all duration-300">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium text-slate-300">Produkte</CardTitle>
+              <Package className="h-4 w-4 text-primary" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold text-white">{productCount}</div>
+              <p className="text-xs text-slate-400">Im Katalog</p>
+            </CardContent>
+          </Card>
+        </Link>
 
-        <Card className="glass-dark border-white/5">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium text-slate-300">Kunden</CardTitle>
-            <Users className="h-4 w-4 text-primary" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-white">{userCount}</div>
-            <p className="text-xs text-slate-400">Registrierte User</p>
-          </CardContent>
-        </Card>
+        <Link href="/admin/users" className="block transition-transform duration-300 hover:scale-[1.02]">
+          <Card className="glass-dark border-white/5 cursor-pointer hover:border-primary/40 hover:bg-white/[0.07] transition-all duration-300">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium text-slate-300">Kunden</CardTitle>
+              <Users className="h-4 w-4 text-primary" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold text-white">{userCount}</div>
+              <p className="text-xs text-slate-400">Registrierte User</p>
+            </CardContent>
+          </Card>
+        </Link>
       </div>
 
       {/* Letzte Bestellungen – Client Component mit 30s-Polling */}

shop/app/admin/products/page.tsx

@@ -10,7 +10,7 @@ export default async function AdminProductsPage() {
     <div className="flex-1 space-y-8 p-8 pt-6">
       <div className="flex items-center justify-between space-y-2">
         <div>
-          <h2 className="text-3xl font-bold tracking-tight text-gradient flex items-center gap-3">
+          <h2 className="text-3xl font-bold tracking-tight text-white flex items-center gap-3">
             <Package className="w-8 h-8 text-primary" />
             Produkte & Module
           </h2>
@@ -39,7 +39,8 @@ async function ProductDataWrapper() {
 
 async function CreateProductAction() {
   const categories = await getCategories()
+  const products = await getProducts()
   return (
-    <CreateProductDialog categories={categories} />
+    <CreateProductDialog categories={categories} products={products} />
   )
 }

shop/app/admin/settings/page.tsx

@@ -0,0 +1,282 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { createClient } from '@/lib/supabase/client';
+import { Loader2, Mail, Server, ShieldCheck, Key, Send, CheckCircle2, AlertCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+interface Settings {
+  host: string;
+  port: number;
+  secure: boolean;
+  user: string;
+  pass: string;
+}
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1 }
+  }
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 15 },
+  visible: { opacity: 1, y: 0, transition: { type: 'spring' as const, stiffness: 80, damping: 15 } }
+};
+
+export default function SettingsPage() {
+  const [settings, setSettings] = useState<Settings | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [message, setMessage] = useState('');
+  const [msgType, setMsgType] = useState<'success' | 'error' | ''>('');
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    async function checkAccessAndLoad() {
+      try {
+        const supabase = createClient();
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+          router.push('/auth/login');
+          return;
+        }
+
+        const [userRes, smtpRes] = await Promise.all([
+          supabase.from('users').select('role').eq('id', user.id).single(),
+          fetch('/api/admin/smtp-settings').then(res => res.json())
+        ]);
+
+        if (!userRes.data || userRes.data.role === 'verwaltung') {
+          router.push('/admin');
+          return;
+        }
+
+        if (smtpRes.settings) {
+          setSettings(smtpRes.settings as Settings);
+        } else {
+          setMessage('Fehler beim Laden der SMTP-Einstellungen.');
+          setMsgType('error');
+        }
+      } catch (err) {
+        setMessage('Fehler beim Laden der Einstellungen.');
+        setMsgType('error');
+      } finally {
+        setLoading(false);
+      }
+    }
+    checkAccessAndLoad();
+  }, [router]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value, type, checked } = e.target;
+    setSettings((prev) =>
+      prev && {
+        ...prev,
+        [name]: type === 'checkbox' ? checked : name === 'port' ? Number(value) : value,
+      }
+    );
+  };
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+    setMessage('');
+    try {
+      const res = await fetch('/api/admin/smtp-settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(settings),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        setMessage('SMTP-Einstellungen erfolgreich gespeichert.');
+        setMsgType('success');
+      } else {
+        setMessage(data.error || 'Fehler beim Speichern.');
+        setMsgType('error');
+      }
+    } catch {
+      setMessage('Verbindungsfehler beim Speichern.');
+      setMsgType('error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleTestEmail = async () => {
+    setTesting(true);
+    setMessage('');
+    try {
+      const testPayload = {
+        to: settings?.user || '',
+        subject: 'Test-E-Mail aus dem CASPOS Webshop Admin',
+        text: 'Dies ist eine automatische Test-E-Mail zur Bestätigung der SMTP-Konfiguration.',
+      };
+      const res = await fetch('/api/admin/send-test-email', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(testPayload),
+      });
+      const data = await res.json();
+      if (res.ok) {
+        setMessage('Test-E-Mail erfolgreich versendet.');
+        setMsgType('success');
+      } else {
+        setMessage(data.error || 'Versand der Test-E-Mail fehlgeschlagen.');
+        setMsgType('error');
+      }
+    } catch {
+      setMessage('Fehler beim Senden der Test-E-Mail.');
+      setMsgType('error');
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  if (loading) {
+    return <div className="p-8 text-white flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>;
+  }
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto text-slate-900 dark:text-white space-y-6">
+      {/* Header */}
+      <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="space-y-1">
+        <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
+          <Mail className="w-8 h-8 text-sky-400" />
+          SMTP-Einstellungen
+        </h1>
+        <p className="text-slate-400 text-xs">
+          Konfigurieren Sie den E-Mail-Server für transaktionale Benachrichtigungen und Bestellbestätigungen.
+        </p>
+      </motion.div>
+
+      {/* Dynamic Status Message */}
+      {message && (
+        <motion.div
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: 'auto' }}
+          className={`p-3.5 rounded-xl text-xs font-semibold border flex items-center gap-2 ${
+            msgType === 'success'
+              ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400'
+              : 'bg-destructive/10 border-destructive/20 text-destructive'
+          }`}
+        >
+          {msgType === 'success' ? <CheckCircle2 className="w-4 h-4 shrink-0" /> : <AlertCircle className="w-4 h-4 shrink-0" />}
+          {message}
+        </motion.div>
+      )}
+
+      {/* Bento Grid layout for SMTP */}
+      <form onSubmit={handleSave}>
+        <motion.div variants={containerVariants} initial="hidden" animate="visible" className="grid grid-cols-1 md:grid-cols-3 gap-5">
+          {/* Bento Box 1: Server Connection Details (2 Spalten) */}
+          <motion.div variants={itemVariants} className="md:col-span-2 p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-4 shadow-md">
+            <div className="flex items-center gap-2 text-sky-400 font-bold text-sm border-b border-slate-800 pb-3">
+              <Server className="w-4 h-4" />
+              <span>Server & Serververbindung</span>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+              <div className="sm:col-span-2 space-y-1.5">
+                <Label htmlFor="host" className="text-xs font-bold text-slate-300">SMTP Host</Label>
+                <Input
+                  id="host"
+                  name="host"
+                  type="text"
+                  required
+                  value={settings?.host ?? ''}
+                  onChange={handleChange}
+                  placeholder="smtp.beispiel.de"
+                  className="bg-slate-950/80 border-slate-800 text-white rounded-xl font-mono text-sm"
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="port" className="text-xs font-bold text-slate-300">Port</Label>
+                <Input
+                  id="port"
+                  name="port"
+                  type="number"
+                  required
+                  value={settings?.port ?? ''}
+                  onChange={handleChange}
+                  placeholder="587"
+                  className="bg-slate-950/80 border-slate-800 text-white rounded-xl font-mono text-sm"
+                />
+              </div>
+            </div>
+
+            <div className="pt-2">
+              <label className="inline-flex items-center gap-2 cursor-pointer p-3 rounded-xl bg-slate-950/50 border border-slate-800/80 hover:bg-slate-800/40 transition">
+                <input
+                  name="secure"
+                  type="checkbox"
+                  checked={settings?.secure ?? false}
+                  onChange={handleChange}
+                  className="w-4 h-4 rounded text-sky-500 bg-slate-900 border-slate-700"
+                />
+                <span className="text-xs font-semibold text-slate-200">SSL / TLS Verschlüsselung aktivieren</span>
+              </label>
+            </div>
+          </motion.div>
+
+          {/* Bento Box 2: Auth Credentials (1 Spalte) */}
+          <motion.div variants={itemVariants} className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-4 shadow-md flex flex-col justify-between">
+            <div className="space-y-4">
+              <div className="flex items-center gap-2 text-sky-400 font-bold text-sm border-b border-slate-800 pb-3">
+                <Key className="w-4 h-4" />
+                <span>Zugangsdaten</span>
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="user" className="text-xs font-bold text-slate-300">SMTP Benutzer</Label>
+                <Input
+                  id="user"
+                  name="user"
+                  type="email"
+                  required
+                  value={settings?.user ?? ''}
+                  onChange={handleChange}
+                  placeholder="absender@beispiel.de"
+                  className="bg-slate-950/80 border-slate-800 text-white rounded-xl font-mono text-sm"
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label htmlFor="pass" className="text-xs font-bold text-slate-300">Passwort</Label>
+                <Input
+                  id="pass"
+                  name="pass"
+                  type="password"
+                  required
+                  value={settings?.pass ?? ''}
+                  onChange={handleChange}
+                  placeholder="••••••••••••"
+                  className="bg-slate-950/80 border-slate-800 text-white rounded-xl font-mono text-sm"
+                />
+              </div>
+            </div>
+
+            {/* Submit & Test Buttons */}
+            <div className="flex flex-col gap-2 pt-4 border-t border-slate-800">
+              <Button type="submit" disabled={saving || testing} className="w-full bg-sky-600 hover:bg-sky-500 text-white rounded-xl h-10 text-xs font-bold">
+                {saving ? <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Speichert...</> : 'Konfiguration speichern'}
+              </Button>
+              <Button type="button" onClick={handleTestEmail} disabled={saving || testing} variant="outline" className="w-full border-slate-700 text-slate-300 hover:text-white rounded-xl h-10 text-xs font-bold">
+                {testing ? <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Sendet...</> : <><Send className="w-3.5 h-3.5 mr-2 text-emerald-400" /> Test-Mail senden</>}
+              </Button>
+            </div>
+          </motion.div>
+        </motion.div>
+      </form>
+    </div>
+  );
+}

shop/app/admin/tools/page.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import {
+  getDatabaseIntegrity,
+  repairDatabaseSchema,
+  optimizeDatabaseIndices
+} from "@/lib/actions/admin";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Loader2, RefreshCw, Wrench, Database, CheckCircle2, XCircle, Terminal } from "lucide-react";
+import { createClient } from "@/lib/supabase/client";
+import { useRouter } from "next/navigation";
+
+interface TableStatus {
+  exists: boolean;
+  count: number;
+}
+
+interface IntegrityData {
+  tables: Record<string, TableStatus>;
+  errors: {
+    foreign_keys: number;
+  };
+}
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1 }
+  }
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 15 },
+  visible: { opacity: 1, y: 0, transition: { type: 'spring' as const, stiffness: 80, damping: 15 } }
+};
+
+export default function AdminToolsPage() {
+  const [integrity, setIntegrity] = useState<IntegrityData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [logs, setLogs] = useState<string[]>([]);
+  const [activeAction, setActiveAction] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const router = useRouter();
+
+  const addLog = (message: string) => {
+    const timestamp = new Date().toLocaleTimeString();
+    setLogs((prev) => [...prev, `[${timestamp}] ${message}`]);
+  };
+
+  const loadStatus = async (quiet = false) => {
+    if (!quiet) setIsLoading(true);
+    addLog("Starte Integritätsscan der Datenbank...");
+    const res = await getDatabaseIntegrity();
+    if (res.success && res.data) {
+      setIntegrity(res.data as IntegrityData);
+      addLog("Integritätsscan erfolgreich abgeschlossen.");
+    } else {
+      addLog(`FEHLER beim Scannen: ${res.error}`);
+    }
+    if (!quiet) setIsLoading(false);
+  };
+
+  const handleRepair = async () => {
+    setIsLoading(true);
+    setActiveAction("repair");
+    addLog("Starte automatische Schemareparatur...");
+    const res = await repairDatabaseSchema();
+    if (res.success && res.data) {
+      const repaired = (res.data as any).repaired || [];
+      if (repaired.length > 0) {
+        addLog(`Erfolgreich reparierte Tabellen: ${repaired.join(", ")}`);
+      } else {
+        addLog("Keine fehlenden Tabellen gefunden. Schema intakt.");
+      }
+      await loadStatus(true);
+    } else {
+      addLog(`FEHLER bei Schemareparatur: ${res.error}`);
+    }
+    setIsLoading(false);
+    setActiveAction(null);
+  };
+
+  const handleOptimize = async () => {
+    setIsLoading(true);
+    setActiveAction("optimize");
+    addLog("Starte Reindexierung des Schemas public...");
+    const res = await optimizeDatabaseIndices();
+    if (res.success) {
+      addLog("Reindexierung erfolgreich abgeschlossen. Suchindizes neu aufgebaut.");
+    } else {
+      addLog(`FEHLER bei Reindexierung: ${res.error}`);
+    }
+    setIsLoading(false);
+    setActiveAction(null);
+  };
+
+  useEffect(() => {
+    async function checkAccess() {
+      try {
+        const supabase = createClient();
+        const { data: { user } } = await supabase.auth.getUser();
+        if (!user) {
+          router.push('/auth/login');
+          return;
+        }
+
+        const [userRes] = await Promise.all([
+          supabase.from('users').select('role').eq('id', user.id).single(),
+          loadStatus(true)
+        ]);
+
+        if (!userRes.data || userRes.data.role === 'verwaltung') {
+          router.push('/admin');
+          return;
+        }
+      } catch (err) {
+        console.error("Fehler beim Laden von Admin Tools:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    checkAccess();
+  }, [router]);
+
+  if (loading) {
+    return <div className="p-8 text-white flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>;
+  }
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto text-slate-900 dark:text-white space-y-6">
+      {/* Header */}
+      <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="space-y-1">
+        <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
+          <Database className="w-8 h-8 text-primary" />
+          Datenbank Cockpit & Tools
+        </h1>
+        <p className="text-slate-400 text-xs">
+          Verwalten und reparieren Sie Systemtabellen, Sicherheitsrichtlinien (RLS) und Datenbank-Indizes.
+        </p>
+      </motion.div>
+
+      {/* Bento Grid layout */}
+      <motion.div variants={containerVariants} initial="hidden" animate="visible" className="grid grid-cols-1 md:grid-cols-3 gap-5">
+        {/* Bento Card 1: Integritätsscan */}
+        <motion.div variants={itemVariants} whileHover={{ y: -3 }} className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-blue-500/30 transition-all duration-300 shadow-md">
+          <div className="space-y-3">
+            <div className="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400 flex items-center justify-center">
+              <RefreshCw className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="font-bold text-base text-white">Integritätsscan</h3>
+              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+                Prüft die physische Existenz der Tabellen und zählt deren Zeilenanzahl.
+              </p>
+            </div>
+          </div>
+          <Button onClick={() => loadStatus()} disabled={isLoading} className="w-full bg-blue-600 hover:bg-blue-500 text-white rounded-xl h-10 text-xs font-bold">
+            {isLoading && activeAction === null ? <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Prüft...</> : 'Status Scannen'}
+          </Button>
+        </motion.div>
+
+        {/* Bento Card 2: Schema Reparieren */}
+        <motion.div variants={itemVariants} whileHover={{ y: -3 }} className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-emerald-500/30 transition-all duration-300 shadow-md">
+          <div className="space-y-3">
+            <div className="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 flex items-center justify-center">
+              <Wrench className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="font-bold text-base text-white">Schema Reparieren</h3>
+              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+                Erstellt fehlende Kerntabellen automatisch neu und konfiguriert RLS-Rechte.
+              </p>
+            </div>
+          </div>
+          <Button onClick={handleRepair} disabled={isLoading} className="w-full bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl h-10 text-xs font-bold">
+            {isLoading && activeAction === 'repair' ? <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Repariert...</> : 'Schema Reparieren'}
+          </Button>
+        </motion.div>
+
+        {/* Bento Card 3: Index Optimieren */}
+        <motion.div variants={itemVariants} whileHover={{ y: -3 }} className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md flex flex-col justify-between space-y-4 hover:border-amber-500/30 transition-all duration-300 shadow-md">
+          <div className="space-y-3">
+            <div className="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center">
+              <Database className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="font-bold text-base text-white">Index Optimieren</h3>
+              <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+                Baut Suchindizes im Schema public mittels REINDEX neu auf für maximale Performance.
+              </p>
+            </div>
+          </div>
+          <Button onClick={handleOptimize} disabled={isLoading} className="w-full bg-amber-600 hover:bg-amber-500 text-white rounded-xl h-10 text-xs font-bold">
+            {isLoading && activeAction === 'optimize' ? <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Indexiert...</> : 'Index Optimieren'}
+          </Button>
+        </motion.div>
+
+        {/* Bento Card 4: Tabellen-Diagnose (2 Spalten) */}
+        <motion.div variants={itemVariants} className="md:col-span-2 p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-4 shadow-md">
+          <h3 className="font-bold text-base text-white border-b border-slate-800 pb-3">Tabellen-Status & Diagnose</h3>
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+            {integrity?.tables ? (
+              Object.entries(integrity.tables).map(([name, status]) => (
+                <div key={name} className="p-3 rounded-xl border bg-slate-950/60 border-slate-800 flex items-center justify-between">
+                  <div>
+                    <span className="font-bold text-xs text-slate-200 capitalize block">{name.replace("_", " ")}</span>
+                    <span className="text-[10px] text-slate-400">Zeilen: {status.count}</span>
+                  </div>
+                  {status.exists ? (
+                    <Badge className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20 text-[10px] py-0 px-1.5">OK</Badge>
+                  ) : (
+                    <Badge className="bg-red-500/10 text-red-400 border-red-500/20 text-[10px] py-0 px-1.5">Fehlt</Badge>
+                  )}
+                </div>
+              ))
+            ) : (
+              <p className="text-xs text-slate-500 col-span-3">Keine Diagnose-Daten geladen.</p>
+            )}
+          </div>
+        </motion.div>
+
+        {/* Bento Card 5: Live Konsole / Logs (1 Spalte) */}
+        <motion.div variants={itemVariants} className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 backdrop-blur-md space-y-3 shadow-md flex flex-col justify-between">
+          <div className="space-y-2">
+            <h3 className="font-bold text-base text-white flex items-center gap-2 border-b border-slate-800 pb-3">
+              <Terminal className="w-4 h-4 text-sky-400" /> System-Konsole
+            </h3>
+            <div className="bg-slate-950 p-3 rounded-xl border border-slate-800 font-mono text-[11px] text-slate-300 h-44 overflow-y-auto space-y-1 subpixel-antialiased">
+              {logs.length === 0 ? (
+                <span className="text-slate-600 italic">Warte auf Aktionen...</span>
+              ) : (
+                logs.map((log, i) => <div key={i} className="leading-tight">{log}</div>)
+              )}
+            </div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}

shop/app/admin/users/page.tsx

@@ -1,15 +1,20 @@
 import { getUsers } from '@/lib/actions/users'
+import { getCompanies } from '@/lib/actions/companies'
 import { UserList } from '@/components/admin/user-list'
 import { UserDialog } from '@/components/admin/user-dialog'
 import { Users } from 'lucide-react'
 import { Suspense } from 'react'
 
+export const dynamic = 'force-dynamic'
+
 export default async function AdminUsersPage() {
+  const companies = await getCompanies()
+
   return (
     <div className="flex-1 space-y-8 p-8 pt-6">
       <div className="flex items-center justify-between space-y-2">
         <div>
-          <h2 className="text-3xl font-bold tracking-tight text-gradient flex items-center gap-3">
+          <h2 className="text-3xl font-bold tracking-tight text-white flex items-center gap-3">
             <Users className="w-8 h-8 text-primary" />
             Benutzerverwaltung
           </h2>
@@ -18,7 +23,7 @@ export default async function AdminUsersPage() {
           </p>
         </div>
         <div className="flex items-center space-x-2">
-          <UserDialog />
+          <UserDialog companies={companies} />
         </div>
       </div>
       <Suspense fallback={<div className="h-40 w-full animate-pulse bg-white/5 rounded-xl" />}>
@@ -30,12 +35,16 @@ export default async function AdminUsersPage() {
 
 async function UserDataWrapper() {
   try {
-    const users = await getUsers()
-    return <UserList initialUsers={users} />
-  } catch (error) {
+    const [users, companies] = await Promise.all([getUsers(), getCompanies()])
+    return <UserList initialUsers={users} companies={companies} />
+  } catch (error: any) {
+    console.error('[UserDataWrapper] Error loading users:', error)
     return (
-      <div className="p-8 border border-destructive/50 bg-destructive/10 rounded-xl text-destructive text-center">
-        Fehler beim Laden der Benutzer. Stellen Sie sicher, dass der SERVICE_ROLE_KEY korrekt konfiguriert ist.
+      <div className="p-8 border border-destructive/50 bg-destructive/10 rounded-xl text-destructive text-center space-y-2">
+        <p>Fehler beim Laden der Benutzer. Stellen Sie sicher, dass der SERVICE_ROLE_KEY korrekt konfiguriert ist.</p>
+        <p className="text-xs font-mono text-destructive/80">
+          Details: {error instanceof Error ? error.message : JSON.stringify(error)}
+        </p>
       </div>
     )
   }

shop/app/admin/wysiwyg/components/dependency-popover.tsx

@@ -0,0 +1,130 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import { Product, ProductModule } from '@/lib/types'
+import { Plus, Search, Package, Layers } from 'lucide-react'
+
+interface DependencyPopoverProps {
+  currentProductId: string
+  assignedIds: string[]
+  allProducts: Product[]
+  allModules: ProductModule[]
+  onAddDependency: (id: string) => void
+}
+
+export function DependencyPopover({
+  currentProductId,
+  assignedIds,
+  allProducts,
+  allModules,
+  onAddDependency
+}: DependencyPopoverProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Filter out the current product, and items already assigned
+  const otherProducts = allProducts.filter(p => p.id !== currentProductId && !assignedIds.includes(p.id))
+  const otherModules = allModules.filter(m => m.product_id !== currentProductId && !assignedIds.includes(m.id))
+
+  // Apply search
+  const filteredProducts = otherProducts.filter(p => p.name.toLowerCase().includes(search.toLowerCase()))
+  const filteredModules = otherModules.filter(m => m.name.toLowerCase().includes(search.toLowerCase()))
+
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen])
+
+  return (
+    <div className="relative inline-block" ref={popoverRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="p-1 hover:bg-white/10 rounded transition-all text-slate-400 hover:text-white"
+        title="Abhängigkeit hinzufügen"
+      >
+        <Plus className="w-3.5 h-3.5" />
+      </button>
+
+      {isOpen && (
+        <div className="absolute left-0 mt-2 z-50 w-72 bg-slate-900 border border-white/10 rounded-xl shadow-2xl p-3 space-y-3">
+          <div className="relative">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-slate-400" />
+            <input
+              ref={inputRef}
+              type="text"
+              placeholder="Suchen nach Produkt/Modul..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full bg-white/5 border border-white/10 rounded-lg pl-9 pr-3 py-1.5 text-xs text-white placeholder-slate-400 outline-none focus:border-primary/50 transition-colors"
+            />
+          </div>
+
+          <div className="max-h-60 overflow-y-auto space-y-2 pr-1 custom-scrollbar">
+            {filteredProducts.length > 0 && (
+              <div className="space-y-1">
+                <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider px-1">Produkte</span>
+                {filteredProducts.map(p => (
+                  <button
+                    key={p.id}
+                    onClick={() => {
+                      onAddDependency(p.id)
+                      setIsOpen(false)
+                      setSearch('')
+                    }}
+                    className="w-full text-left p-1.5 hover:bg-white/5 rounded-lg transition-colors flex items-center gap-2 group"
+                  >
+                    <Package className="w-3 h-3 text-slate-500 group-hover:text-primary transition-colors" />
+                    <span className="text-xs text-white group-hover:text-primary transition-colors">{p.name}</span>
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {filteredModules.length > 0 && (
+              <div className="space-y-1">
+                <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider px-1">Module</span>
+                {filteredModules.map(m => (
+                  <button
+                    key={m.id}
+                    onClick={() => {
+                      onAddDependency(m.id)
+                      setIsOpen(false)
+                      setSearch('')
+                    }}
+                    className="w-full text-left p-1.5 hover:bg-white/5 rounded-lg transition-colors flex items-center gap-2 group"
+                  >
+                    <Layers className="w-3 h-3 text-slate-500 group-hover:text-primary transition-colors" />
+                    <span className="text-xs text-white group-hover:text-primary transition-colors">{m.name}</span>
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {filteredProducts.length === 0 && filteredModules.length === 0 && (
+              <div className="text-[11px] text-slate-400 text-center py-4">
+                Keine Ergebnisse gefunden.
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

shop/app/admin/wysiwyg/components/inline-input.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+
+interface InlineInputProps {
+  value: string
+  onSave: (val: string) => Promise<void>
+  className?: string
+  type?: 'text' | 'number'
+}
+
+export function InlineInput({ value, onSave, className, type = 'text' }: InlineInputProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [currentValue, setCurrentValue] = useState(value)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    setCurrentValue(value)
+  }, [value])
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [isEditing])
+
+  const handleBlur = async () => {
+    setIsEditing(false)
+    const trimmed = currentValue.trim()
+    
+    if (type === 'number') {
+      const parsed = parseFloat(trimmed)
+      if (isNaN(parsed) || trimmed === '') {
+        setCurrentValue(value)
+        return
+      }
+      const finalVal = parsed.toString()
+      if (finalVal !== value) {
+        await onSave(finalVal)
+      }
+    } else {
+      if (trimmed === '') {
+        setCurrentValue(value)
+        return
+      }
+      if (trimmed !== value) {
+        await onSave(trimmed)
+      }
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleBlur()
+    }
+  }
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type={type}
+        step={type === 'number' ? '0.01' : undefined}
+        value={currentValue}
+        onChange={(e) => setCurrentValue(e.target.value)}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        className={`bg-white/10 text-white border border-primary px-1 rounded outline-none w-full ${className}`}
+      />
+    )
+  }
+
+  return (
+    <span
+      onClick={() => setIsEditing(true)}
+      className={`cursor-pointer hover:bg-white/5 rounded px-1 transition ${className}`}
+    >
+      {value || <span className="italic text-slate-500">Klicken zum Bearbeiten</span>}
+    </span>
+  )
+}

shop/app/admin/wysiwyg/components/module-popover.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import { ProductModule } from '@/lib/types'
+import { Plus, Search } from 'lucide-react'
+
+interface ModulePopoverProps {
+  assignedModules: ProductModule[]
+  allModules: ProductModule[]
+  onAddModule: (module: ProductModule) => void
+}
+
+export function ModulePopover({ assignedModules, allModules, onAddModule }: ModulePopoverProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Filter modules that are not already assigned to this product
+  // We match by name to treat identical modules across products as the same entity
+  const availableModules = allModules.filter(m => {
+    const isAssigned = assignedModules.some(am => am.name.toLowerCase() === m.name.toLowerCase())
+    const matchesSearch = m.name.toLowerCase().includes(search.toLowerCase()) || 
+                          (m.description && m.description.toLowerCase().includes(search.toLowerCase()))
+    return !isAssigned && matchesSearch
+  })
+
+  // Deduplicate available modules by name to show a clean list
+  const uniqueAvailableModules: ProductModule[] = []
+  const seenNames = new Set<string>()
+  for (const m of availableModules) {
+    const nameKey = m.name.toLowerCase()
+    if (!seenNames.has(nameKey)) {
+      seenNames.add(nameKey)
+      uniqueAvailableModules.push(m)
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen])
+
+  return (
+    <div className="relative inline-block" ref={popoverRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold bg-primary/10 text-primary border border-primary/20 hover:bg-primary hover:text-black rounded-lg transition-all"
+      >
+        <Plus className="w-3.5 h-3.5" />
+        Modul hinzufügen
+      </button>
+
+      {isOpen && (
+        <div className="absolute left-0 mt-2 z-50 w-72 bg-slate-900 border border-white/10 rounded-xl shadow-2xl p-3 space-y-3">
+          <div className="relative">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-slate-400" />
+            <input
+              ref={inputRef}
+              type="text"
+              placeholder="Modul suchen..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full bg-white/5 border border-white/10 rounded-lg pl-9 pr-3 py-1.5 text-xs text-white placeholder-slate-400 outline-none focus:border-primary/50 transition-colors"
+            />
+          </div>
+
+          <div className="max-h-60 overflow-y-auto space-y-1 pr-1 custom-scrollbar">
+            {uniqueAvailableModules.length > 0 ? (
+              uniqueAvailableModules.map((mod) => (
+                <button
+                  key={mod.id}
+                  onClick={() => {
+                    onAddModule(mod)
+                    setIsOpen(false)
+                    setSearch('')
+                  }}
+                  className="w-full text-left p-2 hover:bg-white/5 rounded-lg transition-colors group"
+                >
+                  <div className="font-medium text-xs text-white group-hover:text-primary transition-colors">
+                    {mod.name}
+                  </div>
+                  {mod.description && (
+                    <div className="text-[10px] text-slate-400 line-clamp-1 mt-0.5">
+                      {mod.description}
+                    </div>
+                  )}
+                  <div className="text-[10px] text-primary font-mono mt-1">
+                    {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.price)}
+                  </div>
+                </button>
+              ))
+            ) : (
+              <div className="text-[11px] text-slate-400 text-center py-4">
+                Keine passenden Module gefunden.
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

shop/app/admin/wysiwyg/page.tsx

@@ -0,0 +1,48 @@
+import { getProducts, getCategories } from '@/lib/actions/products'
+import { WysiwygAdminClient } from './wysiwyg-client'
+import { Edit, Sparkles } from 'lucide-react'
+import { Suspense } from 'react'
+
+export const dynamic = 'force-dynamic'
+
+export default async function WysiwygAdminPage() {
+  return (
+    <div className="flex-1 space-y-8 p-8 pt-6">
+      <div className="flex items-center justify-between space-y-2">
+        <div>
+          <h2 className="text-3xl font-bold tracking-tight text-white flex items-center gap-3">
+            <Edit className="w-8 h-8 text-primary" />
+            WYSIWYG Live-Editor
+          </h2>
+          <p className="text-slate-300">
+            Kategorien und Produkte visuell im Wizard-Layout bearbeiten.
+          </p>
+        </div>
+      </div>
+      <Suspense fallback={<div className="h-40 w-full animate-pulse bg-white/5 rounded-xl" />}>
+        <WysiwygDataWrapper />
+      </Suspense>
+    </div>
+  )
+}
+
+import { createClient } from '@/lib/supabase/server'
+
+async function WysiwygDataWrapper() {
+  const products = await getProducts().catch(() => [])
+  const categories = await getCategories().catch(() => [])
+  
+  const supabase = await createClient()
+  const { data: allModules } = await supabase
+    .from('product_modules')
+    .select('*')
+    .order('name', { ascending: true })
+
+  return (
+    <WysiwygAdminClient 
+      initialProducts={products} 
+      initialCategories={categories} 
+      allModules={allModules || []} 
+    />
+  )
+}

shop/app/admin/wysiwyg/wysiwyg-client.tsx

@@ -0,0 +1,474 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { Category, Product, ProductModule } from '@/lib/types'
+import { updateProduct, createProduct, updateCategory, createCategory, deleteProduct, deleteCategory, addProductDependency, removeProductDependency } from '@/lib/actions/products'
+import { InlineInput } from './components/inline-input'
+import { ModulePopover } from './components/module-popover'
+import { DependencyPopover } from './components/dependency-popover'
+import { Trash2 } from 'lucide-react'
+
+export function WysiwygAdminClient({
+  initialCategories,
+  initialProducts,
+  allModules
+}: {
+  initialCategories: Category[]
+  initialProducts: Product[]
+  allModules: ProductModule[]
+}) {
+  const [mode, setMode] = useState<'purchase' | 'subscription'>('purchase')
+  const [categories, setCategories] = useState(initialCategories)
+  const [products, setProducts] = useState(initialProducts)
+  const [isPending, startTransition] = useTransition()
+
+  const handleDeleteCategory = async (catId: string) => {
+    // Cascade-Check: check if there are products belonging to this category
+    const categoryProducts = products.filter(p => p.category_id === catId)
+    if (categoryProducts.length > 0) {
+      alert(`Diese Kategorie enthält noch ${categoryProducts.length} Produkte. Bitte lösche oder verschiebe diese zuerst!`)
+      return
+    }
+
+    if (!window.confirm('Möchten Sie diese Kategorie wirklich löschen?')) {
+      return
+    }
+
+    startTransition(async () => {
+      try {
+        await deleteCategory(catId)
+        setCategories(categories.filter(c => c.id !== catId))
+      } catch (e) {
+        console.error(e)
+        alert('Fehler beim Löschen der Kategorie.')
+      }
+    })
+  }
+
+  const handleDeleteProduct = async (prodId: string) => {
+    if (!window.confirm('Möchten Sie dieses Produkt wirklich löschen?')) {
+      return
+    }
+
+    startTransition(async () => {
+      try {
+        await deleteProduct(prodId)
+        setProducts(products.filter(p => p.id !== prodId))
+      } catch (e) {
+        console.error(e)
+        alert('Fehler beim Löschen des Produkts.')
+      }
+    })
+  }
+
+  const getDependencyName = (depId: string) => {
+    const matchedProduct = products.find(p => p.id === depId)
+    if (matchedProduct) return matchedProduct.name
+    const matchedModule = allModules.find(m => m.id === depId)
+    if (matchedModule) return `${matchedModule.name} (Modul)`
+    return depId
+  }
+
+  // Filterung der Kategorien nach aktivem Modus
+  const filteredCategories = categories.filter(cat => 
+    mode === 'purchase' ? cat.show_in_kauf : cat.show_in_abo
+  )
+
+  // Filterung der Produkte nach aktivem Modus
+  const filteredProducts = products.filter(p => 
+    mode === 'purchase' ? p.billing_interval === 'one_time' : p.billing_interval === 'monthly'
+  )
+
+  const handleAddCategory = async () => {
+    startTransition(async () => {
+      try {
+        const newCat = await createCategory({
+          name: 'Neue Kategorie',
+          description: 'Beschreibung hier...',
+          sort_order: categories.length + 1,
+          is_required: false,
+          allow_multiselect: false,
+          free_items_limit: 0,
+          preselect: false,
+          show_in_kauf: mode === 'purchase',
+          show_in_abo: mode === 'subscription',
+          resets_others: false
+        })
+        setCategories([...categories, newCat])
+      } catch (e) {
+        console.error(e)
+      }
+    })
+  }
+
+  const handleAddProduct = async (categoryId: string) => {
+    startTransition(async () => {
+      try {
+        const newProd = await createProduct({
+          name: 'Neues Produkt',
+          description: 'Produktbeschreibung...',
+          base_price: 19.99,
+          tax_rate: 19,
+          billing_interval: mode === 'purchase' ? 'one_time' : 'monthly',
+          category_id: categoryId,
+          show_in_kauf: mode === 'purchase',
+          show_in_abo: mode === 'subscription'
+        }, [])
+        setProducts([...products, newProd])
+      } catch (e) {
+        console.error(e)
+      }
+    })
+  }
+
+  const handleCategoryToggle = async (catId: string, fields: Partial<Category>) => {
+    startTransition(async () => {
+      try {
+        setCategories(categories.map(c => c.id === catId ? { ...c, ...fields } : c))
+        await updateCategory(catId, fields)
+      } catch (e) {
+        console.error(e)
+      }
+    })
+  }
+
+  return (
+    <div className={`p-6 max-w-7xl mx-auto space-y-6 ${isPending ? 'opacity-70 pointer-events-none' : ''}`}>
+      <div className="flex justify-between items-center border-b border-white/10 pb-4">
+        <div className="flex space-x-4">
+          <button
+            onClick={() => setMode('purchase')}
+            className={`px-4 py-2 rounded-lg font-medium transition ${
+              mode === 'purchase' ? 'bg-primary text-black' : 'bg-white/5 text-white hover:bg-white/10'
+            }`}
+          >
+            Kauf-Modus (Einmalig)
+          </button>
+          <button
+            onClick={() => setMode('subscription')}
+            className={`px-4 py-2 rounded-lg font-medium transition ${
+              mode === 'subscription' ? 'bg-primary text-black' : 'bg-white/5 text-white hover:bg-white/10'
+            }`}
+          >
+            Abo-Modus (Monatlich)
+          </button>
+        </div>
+        {isPending && <span className="text-xs text-primary animate-pulse font-medium">Speichere Änderungen...</span>}
+      </div>
+
+      <div className="space-y-8">
+        {filteredCategories
+          .sort((a, b) => a.sort_order - b.sort_order)
+          .map(cat => {
+            const catProducts = filteredProducts.filter(p => p.category_id === cat.id)
+            return (
+              <div key={cat.id} className="p-6 bg-white/5 border border-white/10 rounded-2xl space-y-4 shadow-xl">
+                <div className="flex justify-between items-start border-b border-white/5 pb-4">
+                  <div className="w-full">
+                    <InlineInput
+                      value={cat.name}
+                      onSave={async (newName) => {
+                        await updateCategory(cat.id, { name: newName })
+                        setCategories(categories.map(c => c.id === cat.id ? { ...c, name: newName } : c))
+                      }}
+                      className="text-2xl font-bold text-white block w-full"
+                    />
+                    <InlineInput
+                      value={cat.description || ''}
+                      onSave={async (newDesc) => {
+                        await updateCategory(cat.id, { description: newDesc })
+                        setCategories(categories.map(c => c.id === cat.id ? { ...c, description: newDesc } : c))
+                      }}
+                      className="text-slate-400 text-sm mt-1 block w-full"
+                    />
+                    
+                    {/* Kategorie Attribute (Toggles) */}
+                    <div className="flex flex-wrap items-center gap-6 mt-3 text-xs text-slate-400">
+                      <label className="flex items-center gap-2 cursor-pointer select-none">
+                        <input
+                          type="checkbox"
+                          checked={cat.is_required}
+                          onChange={(e) => handleCategoryToggle(cat.id, { is_required: e.target.checked })}
+                          className="rounded border-white/10 bg-white/5 text-primary focus:ring-0 focus:ring-offset-0"
+                        />
+                        <span>Pflichtauswahl</span>
+                      </label>
+                      <label className="flex items-center gap-2 cursor-pointer select-none">
+                        <input
+                          type="checkbox"
+                          checked={cat.allow_multiselect}
+                          onChange={(e) => {
+                            const checked = e.target.checked
+                            handleCategoryToggle(cat.id, { 
+                              allow_multiselect: checked,
+                              ...(checked ? { preselect: false } : {})
+                            })
+                          }}
+                          className="rounded border-white/10 bg-white/5 text-primary focus:ring-0 focus:ring-offset-0"
+                        />
+                        <span>Mehrfachauswahl</span>
+                      </label>
+                      {!cat.allow_multiselect && (
+                        <label className="flex items-center gap-2 cursor-pointer select-none">
+                          <input
+                            type="checkbox"
+                            checked={cat.preselect}
+                            onChange={(e) => handleCategoryToggle(cat.id, { preselect: e.target.checked })}
+                            className="rounded border-white/10 bg-white/5 text-primary focus:ring-0 focus:ring-offset-0"
+                          />
+                          <span>Vorauswahl</span>
+                        </label>
+                      )}
+                      <label className="flex items-center gap-2 cursor-pointer select-none">
+                        <input
+                          type="checkbox"
+                          checked={cat.resets_others}
+                          onChange={(e) => handleCategoryToggle(cat.id, { resets_others: e.target.checked })}
+                          className="rounded border-white/10 bg-white/5 text-primary focus:ring-0 focus:ring-offset-0"
+                        />
+                        <span>Rest zurücksetzen</span>
+                      </label>
+                      {cat.allow_multiselect && (
+                        <div className="flex items-center gap-2">
+                          <span>Freie Artikel Limit:</span>
+                          <input
+                            type="number"
+                            min={0}
+                            value={cat.free_items_limit}
+                            onChange={(e) => handleCategoryToggle(cat.id, { free_items_limit: parseInt(e.target.value) || 0 })}
+                            className="w-12 rounded border-white/10 bg-white/5 text-white focus:ring-0 focus:ring-offset-0 px-1 py-0.5 text-center"
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => handleDeleteCategory(cat.id)}
+                    className="p-2 text-slate-500 hover:text-red-500 hover:bg-white/5 rounded-lg transition-all ml-4 flex-shrink-0"
+                    title="Kategorie löschen"
+                  >
+                    <Trash2 className="w-5 h-5" />
+                  </button>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2">
+                  {catProducts.map(prod => (
+                    <div key={prod.id} className="p-4 bg-white/5 border border-white/10 rounded-xl space-y-3 relative group flex flex-col justify-between">
+                      <div className="space-y-2">
+                        <div className="flex justify-between items-start gap-2">
+                          <div className="flex-1">
+                            <InlineInput
+                              value={prod.name}
+                              onSave={async (newName) => {
+                                  await updateProduct(prod.id, { name: newName }, prod.modules || [])
+                                  setProducts(products.map(p => p.id === prod.id ? { ...p, name: newName } : p))
+                              }}
+                              className="font-semibold text-white block"
+                            />
+                          </div>
+                          <button
+                            onClick={() => handleDeleteProduct(prod.id)}
+                            className="p-1 text-slate-500 hover:text-red-500 hover:bg-white/5 rounded transition-all opacity-0 group-hover:opacity-100 flex-shrink-0"
+                            title="Produkt löschen"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </button>
+                        </div>
+                        <InlineInput
+                          value={prod.description || ''}
+                          onSave={async (newDesc) => {
+                            await updateProduct(prod.id, { description: newDesc }, prod.modules || [])
+                            setProducts(products.map(p => p.id === prod.id ? { ...p, description: newDesc } : p))
+                          }}
+                          className="text-xs text-slate-400 block"
+                        />
+                        <div className="text-primary font-mono text-sm flex items-center space-x-1">
+                          <InlineInput
+                            value={prod.base_price.toString()}
+                            type="number"
+                            onSave={async (newPrice) => {
+                              const priceNum = parseFloat(newPrice) || 0
+                              await updateProduct(prod.id, { base_price: priceNum }, prod.modules || [])
+                              setProducts(products.map(p => p.id === prod.id ? { ...p, base_price: priceNum } : p))
+                            }}
+                            className="inline-block"
+                          /> 
+                          <span>€</span>
+                        </div>
+
+                        {/* Modul-Badges */}
+                        <div className="space-y-1">
+                          <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold block">Module:</span>
+                          <div className="flex flex-wrap gap-1">
+                            {(prod.modules || []).length > 0 ? (
+                              (prod.modules || []).map((m) => (
+                                <span key={m.id} className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] bg-white/10 text-slate-300 font-medium">
+                                  {m.name}
+                                  <button
+                                    onClick={async () => {
+                                      const updatedModules = (prod.modules || []).filter(mod => mod.id !== m.id)
+                                      setProducts(products.map(p => p.id === prod.id ? { ...p, modules: updatedModules } : p))
+                                      await updateProduct(prod.id, {}, updatedModules)
+                                    }}
+                                    className="text-slate-500 hover:text-white font-bold transition-colors ml-0.5"
+                                    title="Modul entfernen"
+                                  >
+                                    ×
+                                  </button>
+                                </span>
+                              ))
+                            ) : (
+                              <span className="text-[10px] text-slate-500 italic">Keine Module</span>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* Requirements */}
+                        <div className="space-y-1">
+                          <div className="flex items-center justify-between">
+                            <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold block">Benötigt:</span>
+                            <DependencyPopover
+                              currentProductId={prod.id}
+                              assignedIds={prod.requirements || []}
+                              allProducts={products}
+                              allModules={allModules}
+                              onAddDependency={async (depId) => {
+                                const newReqs = [...(prod.requirements || []), depId]
+                                setProducts(products.map(p => p.id === prod.id ? { ...p, requirements: newReqs } : p))
+                                await addProductDependency(prod.id, 'requirements', depId)
+                              }}
+                            />
+                          </div>
+                          <div className="flex flex-wrap gap-1">
+                            {(prod.requirements || []).length > 0 ? (
+                              (prod.requirements || []).map((reqId) => (
+                                <span key={reqId} className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] bg-green-500/10 text-green-400 border border-green-500/20 font-medium animate-fade-in">
+                                  {getDependencyName(reqId)}
+                                  <button
+                                    onClick={async () => {
+                                      const newReqs = (prod.requirements || []).filter(id => id !== reqId)
+                                      setProducts(products.map(p => p.id === prod.id ? { ...p, requirements: newReqs } : p))
+                                      await removeProductDependency(prod.id, 'requirements', reqId)
+                                    }}
+                                    className="text-green-600 hover:text-green-400 font-bold transition-colors ml-0.5"
+                                  >
+                                    ×
+                                  </button>
+                                </span>
+                              ))
+                            ) : (
+                              <span className="text-[10px] text-slate-500 italic">Keine Anforderungen</span>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* Exclusions */}
+                        <div className="space-y-1">
+                          <div className="flex items-center justify-between">
+                            <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold block">Schließt aus:</span>
+                            <DependencyPopover
+                              currentProductId={prod.id}
+                              assignedIds={prod.exclusions || []}
+                              allProducts={products}
+                              allModules={allModules}
+                              onAddDependency={async (depId) => {
+                                const newExcs = [...(prod.exclusions || []), depId]
+                                setProducts(products.map(p => p.id === prod.id ? { ...p, exclusions: newExcs } : p))
+                                await addProductDependency(prod.id, 'exclusions', depId)
+                              }}
+                            />
+                          </div>
+                          <div className="flex flex-wrap gap-1">
+                            {(prod.exclusions || []).length > 0 ? (
+                              (prod.exclusions || []).map((exId) => (
+                                <span key={exId} className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] bg-red-500/10 text-red-400 border border-red-500/20 font-medium animate-fade-in">
+                                  {getDependencyName(exId)}
+                                  <button
+                                    onClick={async () => {
+                                      const newExcs = (prod.exclusions || []).filter(id => id !== exId)
+                                      setProducts(products.map(p => p.id === prod.id ? { ...p, exclusions: newExcs } : p))
+                                      await removeProductDependency(prod.id, 'exclusions', exId)
+                                    }}
+                                    className="text-red-600 hover:text-red-400 font-bold transition-colors ml-0.5"
+                                  >
+                                    ×
+                                  </button>
+                                </span>
+                              ))
+                            ) : (
+                              <span className="text-[10px] text-slate-500 italic">Keine Ausschlüsse</span>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Verknüpfte monatliche Gebühr */}
+                      <div className="space-y-1 mt-2">
+                        <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold block">Verknüpfte Gebühr:</span>
+                        <select
+                          value={prod.linked_fee_product_id || ''}
+                          onChange={async (e) => {
+                            const val = e.target.value || null
+                            setProducts(products.map(p => p.id === prod.id ? { ...p, linked_fee_product_id: val } : p))
+                            await updateProduct(prod.id, { linked_fee_product_id: val }, prod.modules || [])
+                          }}
+                          className="w-full bg-slate-950 border border-white/10 text-[10px] text-slate-300 focus:ring-0 cursor-pointer rounded px-2 py-1 outline-none"
+                        >
+                          <option value="">Keine Gebühr verknüpft</option>
+                          {products
+                            .filter(p => p.billing_interval === 'monthly' && p.id !== prod.id)
+                            .map(p => (
+                              <option key={p.id} value={p.id}>
+                                {p.name} ({new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(p.base_price)} / mtl.)
+                              </option>
+                            ))
+                          }
+                        </select>
+                      </div>
+
+                      {/* Modul hinzufügen Popover */}
+                      <div className="mt-3 pt-2 border-t border-white/5">
+                        <ModulePopover
+                          assignedModules={prod.modules || []}
+                          allModules={allModules}
+                          onAddModule={async (mod) => {
+                            const newMod = {
+                              name: mod.name,
+                              description: mod.description,
+                              price: mod.price,
+                              requirements: mod.requirements || [],
+                              exclusions: mod.exclusions || [],
+                              has_quantity: mod.has_quantity || false
+                            }
+                            const updatedModules = [...(prod.modules || []), newMod]
+                            setProducts(products.map(p => p.id === prod.id ? { ...p, modules: updatedModules as any } : p))
+                            await updateProduct(prod.id, {}, updatedModules)
+                          }}
+                        />
+                      </div>
+                    </div>
+                  ))}
+
+                  <button
+                    onClick={() => handleAddProduct(cat.id)}
+                    className="flex flex-col items-center justify-center p-4 border border-dashed border-white/20 hover:border-primary/50 rounded-xl text-slate-400 hover:text-primary transition h-full min-h-[140px]"
+                  >
+                    <span className="text-2xl mb-1">+</span>
+                    <span className="text-xs font-medium">Produkt hinzufügen</span>
+                  </button>
+                </div>
+              </div>
+            )
+          })}
+
+        <button
+          onClick={handleAddCategory}
+          className="w-full py-4 border border-dashed border-white/20 hover:border-primary/50 rounded-2xl flex items-center justify-center text-slate-400 hover:text-primary transition"
+        >
+          <span className="text-xl mr-2">+</span>
+          <span className="font-medium">Neue Kategorie hinzufügen</span>
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,182 @@
+import { NextResponse } from 'next/server';
+import { createServerClient } from '@supabase/ssr';
+import { cookies } from 'next/headers';
+import AdmZip from 'adm-zip';
+import { Client } from 'pg';
+
+function getPgClient() {
+  const connectionString = process.env.DATABASE_URL || 'postgresql://postgres:postgres@localhost:54322/postgres';
+  return new Client({
+    connectionString,
+    connectionTimeoutMillis: 10000,
+  });
+}
+
+async function verifyAdmin() {
+  const cookieStore = await cookies();
+  const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL || '';
+  const supabase = createServerClient(
+    supabaseUrl,
+    process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll();
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options)
+            );
+          } catch {
+            // Ignored
+          }
+        },
+      },
+      cookieOptions: {
+        name: "webshop-auth-token",
+      },
+    }
+  );
+
+  const { data: { user: authUser }, error: authError } = await supabase.auth.getUser();
+  if (authError || !authUser) {
+    return { errorResponse: NextResponse.json({ error: 'Not authenticated' }, { status: 401 }) };
+  }
+  const { data: user } = await supabase.from('users').select('role').eq('id', authUser.id).single();
+  if (!user || user.role !== 'admin') {
+    return { errorResponse: NextResponse.json({ error: 'Insufficient permissions' }, { status: 403 }) };
+  }
+  return { success: true };
+}
+
+export async function GET() {
+  const { errorResponse } = await verifyAdmin();
+  if (errorResponse) return errorResponse;
+
+  const client = getPgClient();
+  await client.connect();
+
+  try {
+    const tables = [
+      'categories',
+      'products',
+      'product_modules',
+      'companies',
+      'end_customers',
+      'orders',
+      'profiles',
+      'users',
+      'settings'
+    ];
+
+    const backupData: Record<string, any[]> = {};
+
+    for (const table of tables) {
+      const res = await client.query(`SELECT * FROM public.${table}`);
+      backupData[table] = res.rows;
+    }
+
+    const zip = new AdmZip();
+    const dataStr = JSON.stringify(backupData, null, 2);
+    zip.addFile('db_backup.json', Buffer.from(dataStr, 'utf8'));
+    const buffer = zip.toBuffer();
+
+    return new Response(buffer, {
+      headers: {
+        'Content-Type': 'application/zip',
+        'Content-Disposition': 'attachment; filename=db_backup.zip',
+      },
+    });
+  } catch (err: any) {
+    console.error('Backup export failed:', err);
+    return NextResponse.json({ error: err.message }, { status: 500 });
+  } finally {
+    await client.end();
+  }
+}
+
+export async function POST(request: Request) {
+  const { errorResponse } = await verifyAdmin();
+  if (errorResponse) return errorResponse;
+
+  try {
+    const formData = await request.formData();
+    const file = formData.get('file') as File;
+    if (!file) {
+      return NextResponse.json({ error: 'No file provided' }, { status: 400 });
+    }
+
+    const arrayBuffer = await file.arrayBuffer();
+    const zip = new AdmZip(Buffer.from(arrayBuffer));
+    const zipEntries = zip.getEntries();
+    const backupEntry = zipEntries.find(entry => entry.entryName === 'db_backup.json');
+    if (!backupEntry) {
+      return NextResponse.json({ error: 'Invalid backup file structure' }, { status: 400 });
+    }
+
+    const dataStr = backupEntry.getData().toString('utf8');
+    const backupData = JSON.parse(dataStr);
+
+    const client = getPgClient();
+    await client.connect();
+
+    try {
+      await client.query('BEGIN');
+      
+      // Disable constraints
+      await client.query("SET session_replication_role = 'replica'");
+
+      const tables = [
+        'categories',
+        'products',
+        'product_modules',
+        'companies',
+        'end_customers',
+        'orders',
+        'profiles',
+        'users',
+        'settings'
+      ];
+
+      // Delete existing rows in all tables
+      for (const table of tables) {
+        await client.query(`DELETE FROM public.${table}`);
+      }
+
+      // Insert backup data
+      for (const table of tables) {
+        const rows = backupData[table];
+        if (!rows || rows.length === 0) continue;
+
+        const columns = Object.keys(rows[0]);
+        const columnNamesStr = columns.map(c => `"${c}"`).join(', ');
+
+        for (const row of rows) {
+          const values = columns.map(col => row[col]);
+          const placeholders = columns.map((_, idx) => `$${idx + 1}`).join(', ');
+          
+          await client.query(
+            `INSERT INTO public.${table} (${columnNamesStr}) VALUES (${placeholders})`,
+            values
+          );
+        }
+      }
+
+      // Re-enable constraints
+      await client.query("SET session_replication_role = 'origin'");
+      await client.query('COMMIT');
+
+      return NextResponse.json({ message: 'Database imported successfully.' });
+    } catch (err: any) {
+      await client.query('ROLLBACK');
+      console.error('Backup import failed:', err);
+      return NextResponse.json({ error: err.message }, { status: 500 });
+    } finally {
+      await client.end();
+    }
+  } catch (err: any) {
+    console.error('Backup import request processing failed:', err);
+    return NextResponse.json({ error: err.message }, { status: 500 });
+  }
+}

shop/app/api/admin/orders/[id]/download/route.ts

@@ -0,0 +1,132 @@
+import { NextRequest, NextResponse } from "next/server";
+import { createClient } from "@/lib/supabase/server";
+import { createAdminClient } from "@/lib/supabase/admin";
+import { InvoicePDF } from "@/components/invoice-pdf";
+import { renderToBuffer } from "@react-pdf/renderer";
+import React from "react";
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    const inline = request.nextUrl.searchParams.get("inline") === "true";
+
+    // 1. Auth check
+    const supabase = await createClient();
+    const { data: { user } } = await supabase.auth.getUser();
+    if (!user) {
+      return new NextResponse("Unauthorized", { status: 401 });
+    }
+
+    const { data: dbUser } = await supabase
+      .from("users")
+      .select("role, company_id")
+      .eq("id", user.id)
+      .single();
+
+    if (!dbUser) {
+      return new NextResponse("Unauthorized", { status: 401 });
+    }
+
+    const adminDb = createAdminClient();
+
+    // 2. Get the order from database
+    const { data: order, error } = await adminDb
+      .from("orders")
+      .select("customer_data, order_data, total_price, created_at, pdf_url, order_number, company_id, user_id")
+      .eq("id", id)
+      .single();
+
+    if (error || !order) {
+      return new NextResponse("Order not found", { status: 404 });
+    }
+
+    // 3. Authorization: admin, owner, or company member
+    const isAdmin = dbUser.role === "admin";
+    const isOwner = order.user_id === user.id;
+    const isCompanyMember = dbUser.company_id && order.company_id === dbUser.company_id;
+
+    if (!isAdmin && !isOwner && !isCompanyMember) {
+      return new NextResponse("Forbidden", { status: 403 });
+    }
+
+    const storageFileName = `ab_${id}.pdf`;
+    let fileBuffer: Uint8Array | ArrayBuffer | null = null;
+
+    // 4. Try to download from storage if pdf_url is set
+    if (order.pdf_url) {
+      try {
+        const { data: fileData, error: downloadError } = await adminDb
+          .storage
+          .from("invoices")
+          .download(storageFileName);
+
+        if (!downloadError && fileData) {
+          fileBuffer = await fileData.arrayBuffer();
+        }
+      } catch (storageErr) {
+        console.warn("Could not retrieve file from storage, will regenerate:", storageErr);
+      }
+    }
+
+    // 5. If file not found or pdf_url not set, generate dynamically
+    if (!fileBuffer) {
+      try {
+        const formattedDate = new Date(order.created_at).toLocaleDateString('de-DE', {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric',
+        });
+
+        const buffer = await renderToBuffer(
+          React.createElement(InvoicePDF, {
+            order: order,
+            orderSnapshot: order.order_data,
+            customer: order.customer_data,
+          })
+        );
+
+        // Upload/Upsert to storage bucket
+        const { error: uploadError } = await adminDb.storage
+          .from("invoices")
+          .upload(storageFileName, Buffer.from(buffer), {
+            contentType: "application/pdf",
+            upsert: true,
+          });
+
+        if (uploadError) {
+          console.error("Failed to upload regenerated PDF:", uploadError);
+        } else {
+          await adminDb.from("orders").update({ pdf_url: storageFileName }).eq("id", id);
+        }
+
+        fileBuffer = buffer;
+      } catch (genErr: any) {
+        console.error("PDF generation failed inside API:", genErr);
+        return new NextResponse("Error generating PDF: " + genErr.message, { status: 500 });
+      }
+    }
+
+    // 6. Return as PDF response
+    const downloadFileName = `Anfragebestaetigung_${order.order_number || id.slice(0, 8)}.pdf`;
+    
+    const headers = new Headers();
+    headers.append("Content-Type", "application/pdf");
+    headers.append("Cache-Control", "private, no-cache");
+    if (inline) {
+      headers.append("Content-Disposition", `inline; filename="${downloadFileName}"`);
+    } else {
+      headers.append("Content-Disposition", `attachment; filename="${downloadFileName}"`);
+    }
+
+    return new NextResponse(fileBuffer as any, {
+      status: 200,
+      headers,
+    });
+  } catch (err: any) {
+    console.error("Download endpoint failed:", err);
+    return new NextResponse(err.message || "Internal Server Error", { status: 500 });
+  }
+}

shop/app/api/admin/recent-orders/route.ts

@@ -1,11 +1,12 @@
 import { createClient } from '@/lib/supabase/server'
+import { createAdminClient } from '@/lib/supabase/admin'
 import { NextResponse } from 'next/server'
 
 /**
  * GET /api/admin/recent-orders
- * Gibt die letzten 10 Bestellungen zurück.
+ * Gibt die letzten 10 Bestellungen und Umsatzdaten der letzten 6 Monate zurück.
  * Wird vom Admin-Dashboard alle 30 Sekunden gepollt.
- * Zugriff nur für authentifizierte User (Supabase Session).
+ * Zugriff nur für authentifizierte User mit Admin-Rolle (bypasses RLS).
  */
 export async function GET() {
   const supabase = await createClient()
@@ -16,7 +17,21 @@ export async function GET() {
     return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
   }
 
-  const { data: orders, error } = await supabase
+  // Admin-Rolle prüfen
+  const { data: userData } = await supabase
+    .from('users')
+    .select('role')
+    .eq('id', user.id)
+    .single()
+
+  if (!userData || userData.role !== 'admin') {
+    return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+  }
+
+  const adminDb = createAdminClient()
+
+  // 1. Letzte 10 Bestellungen laden
+  const { data: orders, error } = await adminDb
     .from('orders')
     .select('id, order_number, created_at, total_price, status, customer_data')
     .order('created_at', { ascending: false })
@@ -26,5 +41,47 @@ export async function GET() {
     return NextResponse.json({ error: error.message }, { status: 500 })
   }
 
-  return NextResponse.json({ orders })
+  // 2. Umsatzdaten der letzten 6 Monate für das Chart ermitteln
+  const sixMonthsAgo = new Date()
+  sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 5)
+  sixMonthsAgo.setDate(1)
+  sixMonthsAgo.setHours(0, 0, 0, 0)
+
+  const { data: chartOrders, error: chartError } = await adminDb
+    .from('orders')
+    .select('total_price, created_at')
+    .neq('status', 'cancelled')
+    .gte('created_at', sixMonthsAgo.toISOString())
+
+  let chartData: { name: string; value: number }[] = []
+  if (!chartError && chartOrders) {
+    const monthlyData: Record<string, number> = {}
+    const now = new Date()
+
+    // Die letzten 6 Monate initialisieren
+    for (let i = 5; i >= 0; i--) {
+      const d = new Date(now.getFullYear(), now.getMonth() - i, 1)
+      const key = d.toLocaleDateString('de-DE', { month: 'short', year: '2-digit' })
+      monthlyData[key] = 0
+    }
+
+    // Werte aufsummieren
+    chartOrders.forEach(o => {
+      const date = new Date(o.created_at)
+      const key = date.toLocaleDateString('de-DE', { month: 'short', year: '2-digit' })
+      if (key in monthlyData) {
+        monthlyData[key] += Number(o.total_price)
+      }
+    })
+
+    // In Array umwandeln
+    chartData = Object.entries(monthlyData).map(([name, value]) => ({
+      name,
+      value: Math.round(value * 100) / 100
+    }))
+  } else if (chartError) {
+    console.error('Chart data fetch error:', chartError)
+  }
+
+  return NextResponse.json({ orders, chartData })
 }

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

@@ -0,0 +1,52 @@
+// API route to send a test email – protected by Supabase admin check
+import { NextResponse } from 'next/server';
+import { sendMail } from '@/utils/mail';
+import { createServerClient } from '@supabase/ssr';
+import { cookies } from 'next/headers';
+export async function POST(request: Request) {
+  const cookieStore = await cookies();
+
+  const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL || '';
+  const supabase = createServerClient(
+    supabaseUrl,
+    process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll()
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options)
+            )
+          } catch {
+            // Kann in einer API-Route ignoriert werden, wenn nur gelesen wird
+          }
+        },
+      },
+      cookieOptions: {
+        name: "webshop-auth-token",
+      },
+    }
+  );
+
+  // Verify admin rights – expecting a user with role "admin" in the "users" table
+  const { data: { user: authUser }, error: authError } = await supabase.auth.getUser();
+  if (authError || !authUser) {
+    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+  }
+  const { data: user } = await supabase.from('users').select('role').eq('id', authUser.id).single();
+  if (!user || user.role !== 'admin') {
+    return NextResponse.json({ error: 'Insufficient permissions' }, { status: 403 });
+  }
+
+  const { to, subject, text, html } = await request.json();
+  try {
+    const info = await sendMail({ to, subject, text, html });
+    return NextResponse.json({ message: 'Email sent', info });
+  } catch (err) {
+    console.error('Mail error', err);
+    return NextResponse.json({ error: 'Failed to send email' }, { status: 500 });
+  }
+}

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

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

shop/app/api/cron/sync-companies/route.ts

@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { syncCompaniesFromLicServer } from '@/lib/actions/companies'
+
+export const dynamic = 'force-dynamic'
+
+export async function GET(req: NextRequest) {
+  // Check authorization header
+  const authHeader = req.headers.get('authorization')
+  const cronSecret = process.env.CRON_SECRET
+
+  // Secure the cron endpoint in production
+  if (process.env.NODE_ENV === 'production' && cronSecret) {
+    if (authHeader !== `Bearer ${cronSecret}`) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+  }
+
+  try {
+    const res = await syncCompaniesFromLicServer()
+    return NextResponse.json({ success: true, count: res.count })
+  } catch (err: any) {
+    console.error('[cron] Sync failed:', err)
+    return NextResponse.json({ error: err.message || 'Sync failed' }, { status: 500 })
+  }
+}

shop/app/api/cron/sync-customers/route.ts

@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { syncCustomersFromLicServer } from '@/lib/actions/companies'
+
+export const dynamic = 'force-dynamic'
+
+export async function GET(req: NextRequest) {
+  // Check authorization header
+  const authHeader = req.headers.get('authorization')
+  const cronSecret = process.env.CRON_SECRET
+
+  // Secure the cron endpoint in production
+  if (process.env.NODE_ENV === 'production' && cronSecret) {
+    if (authHeader !== `Bearer ${cronSecret}`) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+  }
+
+  try {
+    const res = await syncCustomersFromLicServer()
+    return NextResponse.json({ success: true, count: res.count })
+  } catch (err: any) {
+    console.error('[cron] Customer sync failed:', err)
+    return NextResponse.json({ error: err.message || 'Sync failed' }, { status: 500 })
+  }
+}

shop/app/api/licserver/partners/[id]/customers/route.ts

@@ -0,0 +1,85 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { createClient } from '@/lib/supabase/server'
+import { getLicServerConfig } from '@/lib/actions/licserver-config'
+import type { CustomerDtoPagedResult, LicServerProblemDetails } from '@/lib/types/licserver'
+
+/**
+ * GET /api/licserver/partners/[id]/customers
+ *
+ * Proxy to LicServer GET /api-v1/partners/{id}/customers
+ * [id] must be a valid UUID.
+ * Query params forwarded: search, page, pageSize
+ *
+ * Secured: requires a valid Supabase session.
+ * base_url + api_key are read from DB settings (admin-configurable),
+ * with fallback to LICSERVER_BASE_URL / LICSERVER_API_KEY env vars.
+ */
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  // ── Auth guard ─────────────────────────────────────────────────────────
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  // ── Load config from DB (falls back to env vars) ──────────────────────
+  const cfg = await getLicServerConfig()
+  if (!cfg.base_url || !cfg.api_key) {
+    console.error('[licserver] base_url or api_key not configured (DB or env)')
+    return NextResponse.json(
+      { error: 'LicServer nicht konfiguriert. Bitte in den Admin-Einstellungen hinterlegen.' },
+      { status: 503 }
+    )
+  }
+
+  const { id } = await params
+
+  // Basic UUID format guard
+  const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+  if (!UUID_RE.test(id)) {
+    return NextResponse.json({ error: 'Invalid partner ID' }, { status: 400 })
+  }
+
+  // ── Forward query params ───────────────────────────────────────────────
+  const { searchParams } = req.nextUrl
+  const upstream = new URL(`${cfg.base_url}/api-v1/partners/${id}/customers`)
+  const search   = searchParams.get('search')
+  const page     = searchParams.get('page')
+  const pageSize = searchParams.get('pageSize')
+  if (search)   upstream.searchParams.set('search',   search)
+  if (page)     upstream.searchParams.set('page',     page)
+  if (pageSize) upstream.searchParams.set('pageSize', pageSize)
+
+  // ── Proxy request ──────────────────────────────────────────────────────
+  try {
+    const res = await fetch(
+      upstream.toString(),
+      {
+        method:  'GET',
+        headers: {
+          'X-Api-Key': cfg.api_key,
+          'Accept':    'application/json',
+        },
+        signal: AbortSignal.timeout(5_000),
+      }
+    )
+
+    if (!res.ok) {
+      const problem: LicServerProblemDetails = await res.json().catch(() => ({}))
+      return NextResponse.json(problem, { status: res.status })
+    }
+
+    const data: CustomerDtoPagedResult = await res.json()
+    return NextResponse.json(data)
+
+  } catch (err) {
+    console.error('[licserver] partner/:id/customers fetch error:', err)
+    return NextResponse.json(
+      { error: 'LicServer nicht erreichbar' },
+      { status: 502 }
+    )
+  }
+}

shop/app/api/licserver/partners/[id]/route.ts

@@ -0,0 +1,74 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { createClient } from '@/lib/supabase/server'
+import { getLicServerConfig } from '@/lib/actions/licserver-config'
+import type { PartnerDto, LicServerProblemDetails } from '@/lib/types/licserver'
+
+/**
+ * GET /api/licserver/partners/[id]
+ *
+ * Proxy to LicServer GET /api-v1/partners/{id}
+ * [id] must be a valid UUID.
+ *
+ * Secured: requires a valid Supabase session.
+ * base_url + api_key are read from DB settings (admin-configurable),
+ * with fallback to LICSERVER_BASE_URL / LICSERVER_API_KEY env vars.
+ */
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  // ── Auth guard ─────────────────────────────────────────────────────────
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  // ── Load config from DB (falls back to env vars) ──────────────────────
+  const cfg = await getLicServerConfig()
+  if (!cfg.base_url || !cfg.api_key) {
+    console.error('[licserver] base_url or api_key not configured (DB or env)')
+    return NextResponse.json(
+      { error: 'LicServer nicht konfiguriert. Bitte in den Admin-Einstellungen hinterlegen.' },
+      { status: 503 }
+    )
+  }
+
+  const { id } = await params
+
+  // Basic UUID format guard
+  const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+  if (!UUID_RE.test(id)) {
+    return NextResponse.json({ error: 'Invalid partner ID' }, { status: 400 })
+  }
+
+  // ── Proxy request ──────────────────────────────────────────────────────
+  try {
+    const res = await fetch(
+      `${cfg.base_url}/api-v1/partners/${id}`,
+      {
+        method:  'GET',
+        headers: {
+          'X-Api-Key': cfg.api_key,
+          'Accept':    'application/json',
+        },
+        signal: AbortSignal.timeout(5_000),
+      }
+    )
+
+    if (!res.ok) {
+      const problem: LicServerProblemDetails = await res.json().catch(() => ({}))
+      return NextResponse.json(problem, { status: res.status })
+    }
+
+    const data: PartnerDto = await res.json()
+    return NextResponse.json(data)
+
+  } catch (err) {
+    console.error('[licserver] partner/:id fetch error:', err)
+    return NextResponse.json(
+      { error: 'LicServer nicht erreichbar' },
+      { status: 502 }
+    )
+  }
+}

shop/app/api/licserver/partners/route.ts

@@ -0,0 +1,71 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { createClient } from '@/lib/supabase/server'
+import { getLicServerConfig } from '@/lib/actions/licserver-config'
+import type { PartnerDtoPagedResult, LicServerProblemDetails } from '@/lib/types/licserver'
+
+/**
+ * GET /api/licserver/partners
+ *
+ * Proxy to LicServer GET /api-v1/partners
+ * Query params forwarded: search, page, pageSize
+ *
+ * Secured: requires a valid Supabase session.
+ * base_url + api_key are read from DB settings (admin-configurable),
+ * with fallback to LICSERVER_BASE_URL / LICSERVER_API_KEY env vars.
+ */
+export async function GET(req: NextRequest) {
+  // ── Auth guard ─────────────────────────────────────────────────────────
+  const supabase = await createClient()
+  const { data: { user } } = await supabase.auth.getUser()
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  // ── Load config from DB (falls back to env vars) ──────────────────────
+  const cfg = await getLicServerConfig()
+  if (!cfg.base_url || !cfg.api_key) {
+    console.error('[licserver] base_url or api_key not configured (DB or env)')
+    return NextResponse.json(
+      { error: 'LicServer nicht konfiguriert. Bitte in den Admin-Einstellungen hinterlegen.' },
+      { status: 503 }
+    )
+  }
+
+  // ── Forward query params ───────────────────────────────────────────────
+  const { searchParams } = req.nextUrl
+  const upstream = new URL(`${cfg.base_url}/api-v1/partners`)
+  const search   = searchParams.get('search')
+  const page     = searchParams.get('page')
+  const pageSize = searchParams.get('pageSize')
+  if (search)   upstream.searchParams.set('search',   search)
+  if (page)     upstream.searchParams.set('page',     page)
+  if (pageSize) upstream.searchParams.set('pageSize', pageSize)
+
+  // ── Proxy request ──────────────────────────────────────────────────────
+  try {
+    const res = await fetch(upstream.toString(), {
+      method:  'GET',
+      headers: {
+        'X-Api-Key': cfg.api_key,
+        'Accept':    'application/json',
+      },
+      // Internal container network — short timeout
+      signal: AbortSignal.timeout(5_000),
+    })
+
+    if (!res.ok) {
+      const problem: LicServerProblemDetails = await res.json().catch(() => ({}))
+      return NextResponse.json(problem, { status: res.status })
+    }
+
+    const data: PartnerDtoPagedResult = await res.json()
+    return NextResponse.json(data)
+
+  } catch (err) {
+    console.error('[licserver] partners fetch error:', err)
+    return NextResponse.json(
+      { error: 'LicServer nicht erreichbar' },
+      { status: 502 }
+    )
+  }
+}

shop/app/api/orders/[id]/download/route.ts

@@ -0,0 +1,132 @@
+import { NextRequest, NextResponse } from "next/server";
+import { createClient } from "@/lib/supabase/server";
+import { createAdminClient } from "@/lib/supabase/admin";
+import { InvoicePDF } from "@/components/invoice-pdf";
+import { renderToBuffer } from "@react-pdf/renderer";
+import React from "react";
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    const inline = request.nextUrl.searchParams.get("inline") === "true";
+
+    // 1. Auth check — any authenticated user
+    const supabase = await createClient();
+    const { data: { user } } = await supabase.auth.getUser();
+    if (!user) {
+      return new NextResponse("Unauthorized", { status: 401 });
+    }
+
+    const { data: dbUser } = await supabase
+      .from("users")
+      .select("role, company_id")
+      .eq("id", user.id)
+      .single();
+
+    if (!dbUser) {
+      return new NextResponse("Unauthorized", { status: 401 });
+    }
+
+    const adminDb = createAdminClient();
+
+    // 2. Get the order from database
+    const { data: order, error } = await adminDb
+      .from("orders")
+      .select("customer_data, order_data, total_price, created_at, pdf_url, order_number, company_id, user_id")
+      .eq("id", id)
+      .single();
+
+    if (error || !order) {
+      return new NextResponse("Order not found", { status: 404 });
+    }
+
+    // 3. Authorization: admin, owner, or company member
+    const isAdmin = dbUser.role === "admin";
+    const isOwner = order.user_id === user.id;
+    const isCompanyMember = dbUser.company_id && order.company_id === dbUser.company_id;
+
+    if (!isAdmin && !isOwner && !isCompanyMember) {
+      return new NextResponse("Forbidden", { status: 403 });
+    }
+
+    const storageFileName = `ab_${id}.pdf`;
+    let fileBuffer: Uint8Array | ArrayBuffer | null = null;
+
+    // 4. Try to download from storage if pdf_url is set
+    if (order.pdf_url) {
+      try {
+        const { data: fileData, error: downloadError } = await adminDb
+          .storage
+          .from("invoices")
+          .download(storageFileName);
+
+        if (!downloadError && fileData) {
+          fileBuffer = await fileData.arrayBuffer();
+        }
+      } catch (storageErr) {
+        console.warn("Could not retrieve file from storage, will regenerate:", storageErr);
+      }
+    }
+
+    // 5. If file not found or pdf_url not set, generate dynamically
+    if (!fileBuffer) {
+      try {
+        const formattedDate = new Date(order.created_at).toLocaleDateString('de-DE', {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric',
+        });
+
+        const buffer = await renderToBuffer(
+          React.createElement(InvoicePDF, {
+            order: order,
+            orderSnapshot: order.order_data,
+            customer: order.customer_data,
+          })
+        );
+
+        // Upload/Upsert to storage bucket
+        const { error: uploadError } = await adminDb.storage
+          .from("invoices")
+          .upload(storageFileName, Buffer.from(buffer), {
+            contentType: "application/pdf",
+            upsert: true,
+          });
+
+        if (uploadError) {
+          console.error("Failed to upload regenerated PDF:", uploadError);
+        } else {
+          await adminDb.from("orders").update({ pdf_url: storageFileName }).eq("id", id);
+        }
+
+        fileBuffer = buffer;
+      } catch (genErr: any) {
+        console.error("PDF generation failed inside API:", genErr);
+        return new NextResponse("Error generating PDF: " + genErr.message, { status: 500 });
+      }
+    }
+
+    // 6. Return as PDF response
+    const downloadFileName = `Anfragebestaetigung_${order.order_number || id.slice(0, 8)}.pdf`;
+    
+    const headers = new Headers();
+    headers.append("Content-Type", "application/pdf");
+    headers.append("Cache-Control", "private, no-cache");
+    if (inline) {
+      headers.append("Content-Disposition", `inline; filename="${downloadFileName}"`);
+    } else {
+      headers.append("Content-Disposition", `attachment; filename="${downloadFileName}"`);
+    }
+
+    return new NextResponse(fileBuffer as any, {
+      status: 200,
+      headers,
+    });
+  } catch (err: any) {
+    console.error("Download endpoint failed:", err);
+    return new NextResponse(err.message || "Internal Server Error", { status: 500 });
+  }
+}

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

@@ -0,0 +1,346 @@
+import { NextResponse } from 'next/server';
+import { createClient } from '@/lib/supabase/server';
+import { getProducts, getCategories } from '@/lib/actions/products';
+import { buildCustomerSnapshot, buildOrderSnapshot } from '@/lib/license-transform';
+import { sendMail } from '@/utils/mail';
+import { createHash } from 'crypto';
+import { renderToBuffer } from '@react-pdf/renderer';
+import React from 'react';
+import { InvoicePDF } from '@/components/invoice-pdf';
+import { getOrderEmailTemplate, buildEmailItemsSection } from '@/lib/actions/email-templates';
+import { validateWizardSelections } from '@/lib/actions/validation';
+
+
+function generateOrderNumber(prefix: 'BE' | 'AE' = 'AE'): string {
+  const year = new Date().getFullYear();
+  const rand = Math.floor(10000 + Math.random() * 90000);
+  return `${prefix}-${year}-${rand}`;
+}
+
+function hashOrderSnapshot(snapshot: object): string {
+  return createHash('sha256').update(JSON.stringify(snapshot)).digest('hex');
+}
+
+export async function POST(request: Request) {
+  try {
+    const supabase = await createClient();
+    const { data: { user } } = await supabase.auth.getUser();
+
+    if (!user) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+    }
+
+    const { data: dbUser } = await supabase
+      .from('users')
+      .select('role, company_id')
+      .eq('id', user.id)
+      .single();
+
+    const isAdminUser = dbUser?.role === 'admin' || dbUser?.role === 'verwaltung';
+    if (!isAdminUser && !dbUser?.company_id) {
+      return NextResponse.json({ error: 'Firma erforderlich' }, { status: 403 });
+    }
+
+    const body = await request.json();
+    const { items, customerProfile, endCustomerId, endCustomer, lastLicenseDate } = body;
+
+    if (!items || !Array.isArray(items) || items.length === 0) {
+      return NextResponse.json({ error: 'Warenkorb leer' }, { status: 400 });
+    }
+
+    const products = await getProducts();
+    const categories = await getCategories();
+
+    // --- Backend-Validierung: alle Kategorie-Flags für jede Kasse prüfen ---
+    for (const item of items) {
+      if (item.selections) {
+        validateWizardSelections(item.selections, products, categories);
+      }
+    }
+
+    // Split items into purchase and subscription
+    const purchaseItems = items.filter(
+      (item: any) => item.billingInterval === 'one_time' || item.billingType === 'purchase'
+    );
+    const subscriptionItems = items.filter(
+      (item: any) => item.billingInterval === 'monthly' || item.billingType === 'subscription'
+    );
+
+    const createdOrders: any[] = [];
+
+    const processOrderGroup = async (groupItems: any[], type: 'purchase' | 'subscription', paymentMethod: string) => {
+      if (groupItems.length === 0) return;
+
+      // Build consolidated snapshots
+      // For the multi-item support, we combine the order snapshots of each item in the group
+      const customerSnapshot = buildCustomerSnapshot(customerProfile, endCustomer);
+      
+      const orderItemsList: any[] = [];
+      let total = 0;
+      const feeProductIds = new Set<string>();
+
+      for (const item of groupItems) {
+        const itemSnapshot = buildOrderSnapshot(
+          item.selections,
+          products,
+          categories,
+          type === 'purchase' ? 'one_time' : 'monthly',
+          item.moduleQuantities,
+          type === 'purchase' ? lastLicenseDate : null
+        );
+        const itemsWithDevice = itemSnapshot.items.map(i => ({
+          ...i,
+          device_name: item.deviceName,
+          license_number: item.licenseNumber
+        }));
+        orderItemsList.push(...itemsWithDevice);
+        total += itemSnapshot.total;
+
+        // Echte linked fee products ermitteln
+        if (item.selections) {
+          for (const catId in item.selections) {
+            const sel = item.selections[catId];
+            
+            if (sel.productId) {
+              const p = products.find((prod: any) => prod.id === sel.productId);
+              if (p && p.linked_fee_product_id) {
+                feeProductIds.add(p.linked_fee_product_id);
+              }
+            }
+            
+            sel.productIds?.forEach((pId: string) => {
+              const p = products.find((prod: any) => prod.id === pId);
+              if (p && p.linked_fee_product_id) {
+                feeProductIds.add(p.linked_fee_product_id);
+              }
+            });
+          }
+        }
+      }
+
+      feeProductIds.forEach(feeProdId => {
+        const feeProduct = products.find((p: any) => p.id === feeProdId);
+        if (feeProduct) {
+          const isIntervalMatch = 
+            (type === 'purchase' && feeProduct.billing_interval === 'one_time') ||
+            (type === 'subscription' && feeProduct.billing_interval === 'monthly');
+
+          if (isIntervalMatch) {
+            orderItemsList.push({
+              category_id: 'dienste-gebuehren',
+              category_name: 'Dienste & Gebühren',
+              product_id: feeProduct.id,
+              product_name: feeProduct.name,
+              base_price: Number(feeProduct.base_price),
+              billing_interval: feeProduct.billing_interval,
+              selected_modules: [],
+              item_total: Number(feeProduct.base_price),
+              device_name: 'Zusatzleistung'
+            });
+            total += Number(feeProduct.base_price);
+          }
+        }
+      });
+
+      const orderSnapshot = {
+        schema_version: 1,
+        billing_cycle: type === 'purchase' ? 'one_time' : 'monthly',
+        items: orderItemsList,
+        total: total,
+        tax_rate: 19, // default
+        tax_amount: Math.round(total * 0.19 * 100) / 100,
+        subtotal: Math.round((total / 1.19) * 100) / 100,
+        last_license_date: type === 'purchase' ? lastLicenseDate : null
+      };
+
+      const orderHash = hashOrderSnapshot(orderSnapshot);
+      const orderNumber = generateOrderNumber(type === 'purchase' ? 'AE' : 'BE');
+
+      const { data: order, error: orderError } = await supabase
+        .from('orders')
+        .insert([{
+          user_id: user.id,
+          company_id: dbUser?.company_id || null,
+          order_number: orderNumber,
+          order_hash: orderHash,
+          end_customer_id: endCustomerId || null,
+          total_price: total,
+          customer_data: customerSnapshot,
+          order_data: orderSnapshot,
+          type: type,
+          payment_method: paymentMethod,
+          status: 'pending'
+        }])
+        .select()
+        .single();
+
+      if (orderError) throw orderError;
+
+      const fileName = `ab_${order.id}.pdf`;
+
+      // Trigger PDF generation & storage upload
+      try {
+        const buffer = await renderToBuffer(
+          React.createElement(InvoicePDF, {
+            order,
+            customer: customerSnapshot,
+            orderSnapshot,
+          })
+        );
+
+        const { error: uploadError } = await supabase
+          .storage
+          .from('invoices')
+          .upload(fileName, buffer, { contentType: 'application/pdf', upsert: true });
+
+        if (!uploadError) {
+          await supabase.from('orders').update({ pdf_url: fileName }).eq('id', order.id);
+          order.pdf_url = fileName;
+        }
+      } catch (pdfErr) {
+        console.error('PDF error for order ' + order.id, pdfErr);
+      }
+
+      // Trigger E-Mail notifications
+      if (user.email) {
+        try {
+          const formattedDate = new Date(order.created_at).toLocaleDateString('de-DE');
+          const taxRate = orderSnapshot.tax_rate ?? 19;
+          const items = orderSnapshot.items ?? [];
+          const oneTimeItems = items.filter((item: any) => item.billing_interval === 'one_time');
+          const monthlyItems = items.filter((item: any) => item.billing_interval === 'monthly');
+
+          const oneTimeNet = oneTimeItems.reduce((sum: number, item: any) => sum + (item.item_total || 0), 0);
+          const oneTimeTax = Math.round(oneTimeNet * (taxRate / 100) * 100) / 100;
+          const oneTimeGross = Math.round((oneTimeNet + oneTimeTax) * 100) / 100;
+
+          const monthlyNet = monthlyItems.reduce((sum: number, item: any) => sum + (item.item_total || 0), 0);
+          const monthlyTax = Math.round(monthlyNet * (taxRate / 100) * 100) / 100;
+          const monthlyGross = Math.round((monthlyNet + monthlyTax) * 100) / 100;
+
+          let totalDetailsText = '';
+          if (oneTimeNet > 0 && monthlyNet > 0) {
+            totalDetailsText = `\nEinmaliger Betrag:\n- Netto: ${oneTimeNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}\n- zzgl. ${taxRate}% MwSt: ${oneTimeTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}\n- Brutto Gesamtbetrag: ${oneTimeGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}\n\nMonatlicher Betrag:\n- Netto: ${monthlyNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat\n- zzgl. ${taxRate}% MwSt: ${monthlyTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat\n- Brutto Gesamtbetrag: ${monthlyGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat`;
+          } else if (oneTimeNet > 0) {
+            totalDetailsText = `\nGesamtsumme:\n- Netto: ${oneTimeNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}\n- zzgl. ${taxRate}% MwSt: ${oneTimeTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}\n- Brutto Gesamtbetrag: ${oneTimeGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}`;
+          } else {
+            totalDetailsText = `\nGesamtsumme:\n- Netto: ${monthlyNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat\n- zzgl. ${taxRate}% MwSt: ${monthlyTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat\n- Brutto Gesamtbetrag: ${monthlyGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat`;
+          }
+
+          let totalDetailsHtml = '';
+          if (oneTimeNet > 0 && monthlyNet > 0) {
+            totalDetailsHtml = `
+              <tr>
+                <td colspan="2" style="padding: 8px 0; border-top: 1px solid #e2e8f0; font-weight: bold; color: #0f172a;">Einmaliger Betrag:</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px 0; padding-left: 10px; color: #475569;">Netto:</td>
+                <td style="padding: 4px 0; text-align: right; color: #475569;">${oneTimeNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px 0; padding-left: 10px; color: #475569;">zzgl. ${taxRate}% MwSt:</td>
+                <td style="padding: 4px 0; text-align: right; color: #475569;">${oneTimeTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px 0; padding-left: 10px; font-weight: bold; color: #0f172a;">Brutto Gesamtbetrag:</td>
+                <td style="padding: 4px 0; text-align: right; font-weight: bold; color: #0f172a;">${oneTimeGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
+              </tr>
+              <tr>
+                <td colspan="2" style="padding: 8px 0; border-top: 1px solid #e2e8f0; font-weight: bold; color: #0f172a;">Monatlicher Betrag:</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px 0; padding-left: 10px; color: #475569;">Netto:</td>
+                <td style="padding: 4px 0; text-align: right; color: #475569;">${monthlyNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px 0; padding-left: 10px; color: #475569;">zzgl. ${taxRate}% MwSt:</td>
+                <td style="padding: 4px 0; text-align: right; color: #475569;">${monthlyTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px 0; padding-left: 10px; font-weight: bold; color: #0f172a;">Brutto Gesamtbetrag:</td>
+                <td style="padding: 4px 0; text-align: right; font-weight: bold; color: #0f172a;">${monthlyGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat</td>
+              </tr>
+            `;
+          } else if (oneTimeNet > 0) {
+            totalDetailsHtml = `
+              <tr>
+                <td style="padding: 4px 0; color: #475569;">Netto-Gesamtbetrag:</td>
+                <td style="padding: 4px 0; text-align: right; color: #475569;">${oneTimeNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px 0; color: #475569;">zzgl. ${taxRate}% MwSt:</td>
+                <td style="padding: 4px 0; text-align: right; color: #475569;">${oneTimeTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px 0; font-weight: bold; color: #0f172a; border-top: 1px solid #e2e8f0; padding-top: 6px;">Gesamtbetrag (brutto):</td>
+                <td style="padding: 4px 0; text-align: right; font-weight: bold; color: #0f172a; border-top: 1px solid #e2e8f0; padding-top: 6px;">${oneTimeGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })}</td>
+              </tr>
+            `;
+          } else {
+            totalDetailsHtml = `
+              <tr>
+                <td style="padding: 4px 0; color: #475569;">Netto-Gesamtbetrag:</td>
+                <td style="padding: 4px 0; text-align: right; color: #475569;">${monthlyNet.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px 0; color: #475569;">zzgl. ${taxRate}% MwSt:</td>
+                <td style="padding: 4px 0; text-align: right; color: #475569;">${monthlyTax.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px 0; font-weight: bold; color: #0f172a; border-top: 1px solid #e2e8f0; padding-top: 6px;">Gesamtbetrag (brutto):</td>
+                <td style="padding: 4px 0; text-align: right; font-weight: bold; color: #0f172a; border-top: 1px solid #e2e8f0; padding-top: 6px;">${monthlyGross.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })} / Monat</td>
+              </tr>
+            `;
+          }
+
+          const itemsSection = buildEmailItemsSection(items);
+
+          const emailTemplate = getOrderEmailTemplate({
+            orderNumber: order.order_number,
+            formattedDate,
+            customerCompanyName: customerSnapshot.company_name,
+            totalDetailsText,
+            totalDetailsHtml,
+            itemsDetailsText: itemsSection.text,
+            itemsDetailsHtml: itemsSection.html
+          }, `${process.env.NEXT_PUBLIC_SITE_URL || 'https://staging.hephex.de'}`, false);
+
+          const { data: bufferData, error: downloadError } = await supabase
+            .storage
+            .from('invoices')
+            .download(fileName);
+
+          const attachments: any[] = [];
+          if (!downloadError && bufferData) {
+            const buffer = Buffer.from(await bufferData.arrayBuffer());
+            attachments.push({
+              filename: `Anfragebestaetigung_${order.order_number}.pdf`,
+              content: buffer,
+              contentType: 'application/pdf',
+            });
+          }
+
+          await sendMail({
+            to: user.email,
+            subject: `Anfragebestätigung ${order.order_number}`,
+            text: emailTemplate.text,
+            html: emailTemplate.html,
+            attachments
+          });
+        } catch (mailErr) {
+          console.error('Mail error for order ' + order.id, mailErr);
+        }
+      }
+
+      createdOrders.push(order);
+    };
+
+    await processOrderGroup(purchaseItems, 'purchase', 'invoice');
+    await processOrderGroup(subscriptionItems, 'subscription', 'sepa');
+
+    return NextResponse.json({ success: true, orders: createdOrders });
+  } catch (error: any) {
+    console.error('Checkout error:', error);
+    return NextResponse.json({ error: error.message || 'Internal server error' }, { status: 500 });
+  }
+}

shop/app/auth/login/page.tsx

@@ -1,6 +1,12 @@
 import { LoginForm } from "@/components/login-form";
+import { isSetupNeeded } from "@/lib/actions/setup";
+import { redirect } from "next/navigation";
+
+export default async function Page() {
+  if (await isSetupNeeded()) {
+    redirect("/setup");
+  }
 
-export default function Page() {
   return (
     <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
       <div className="w-full max-w-sm">

shop/app/auth/sign-up/page.tsx

@@ -1,11 +1,5 @@
-import { SignUpForm } from "@/components/sign-up-form";
+import { redirect } from "next/navigation";
 
-export default function Page() {
-  return (
-    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
-      <div className="w-full max-w-sm">
-        <SignUpForm />
-      </div>
-    </div>
-  );
+export default function SignUpPage() {
+  redirect("/auth/login");
 }

shop/app/auth/verify-link/page.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { use, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ShieldCheck, Loader2 } from "lucide-react";
+
+interface PageProps {
+  searchParams: Promise<{
+    token_hash?: string;
+    type?: string;
+    next?: string;
+  }>;
+}
+
+export default function VerifyLinkPage({ searchParams }: PageProps) {
+  const params = use(searchParams);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const tokenHash = params.token_hash || "";
+  const type = params.type || "";
+  const next = params.next || "/";
+
+  const handleSubmit = () => {
+    setIsSubmitting(true);
+  };
+
+  return (
+    <div className="relative flex min-h-svh w-full items-center justify-center p-6 md:p-10 overflow-hidden bg-slate-950">
+      {/* Background gradients for rich aesthetics */}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#0f172a_1px,transparent_1px),linear-gradient(to_bottom,#0f172a_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-60" />
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-[120px] pointer-events-none" />
+      <div className="absolute bottom-0 right-1/4 w-[400px] h-[400px] bg-indigo-500/10 rounded-full blur-[100px] pointer-events-none" />
+
+      <div className="relative w-full max-w-md z-10">
+        <Card className="border-slate-800/80 bg-slate-900/60 backdrop-blur-xl shadow-2xl transition-all duration-300 hover:border-slate-700/80">
+          <CardHeader className="flex flex-col items-center justify-center text-center space-y-4 pt-8">
+            <div className="p-3.5 bg-blue-500/10 rounded-full text-blue-400 border border-blue-500/20 shadow-[0_0_20px_rgba(59,130,246,0.15)] animate-pulse">
+              <ShieldCheck className="w-8 h-8" />
+            </div>
+            <div className="space-y-2">
+              <CardTitle className="text-2xl font-bold tracking-tight text-slate-100">
+                Sicherheit prüfen
+              </CardTitle>
+              <p className="text-sm text-slate-400 max-w-xs mx-auto">
+                Bitte bestätigen Sie den Vorgang mit einem Klick auf den Button, um fortzufahren.
+              </p>
+            </div>
+          </CardHeader>
+          <CardContent className="pb-8">
+            <form action="/auth/confirm" method="GET" onSubmit={handleSubmit} className="w-full">
+              <input type="hidden" name="token_hash" value={tokenHash} />
+              <input type="hidden" name="type" value={type} />
+              <input type="hidden" name="next" value={next} />
+              
+              <Button 
+                type="submit" 
+                disabled={isSubmitting || !tokenHash}
+                className="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-medium shadow-[0_0_20px_rgba(59,130,246,0.25)] transition-all duration-200 h-11 active:scale-[0.98] disabled:opacity-50"
+              >
+                {isSubmitting ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Wird weitergeleitet...
+                  </>
+                ) : (
+                  "Bestätigen & Fortfahren"
+                )}
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

shop/app/datenschutz/page.tsx

@@ -0,0 +1,123 @@
+import Link from 'next/link'
+import { ArrowLeft, Lock } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+export default function Datenschutz() {
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100 py-16 px-4">
+      <div className="container max-w-3xl mx-auto space-y-8">
+        <Link href="/">
+          <Button variant="ghost" size="sm" className="gap-2 text-slate-400 hover:text-white">
+            <ArrowLeft className="w-4 h-4" /> Zurück zur Startseite
+          </Button>
+        </Link>
+
+        <div className="space-y-4">
+          <div className="inline-flex p-3 bg-blue-500/10 rounded-xl text-blue-400">
+            <Lock className="w-6 h-6" />
+          </div>
+          <h1 className="text-4xl font-extrabold tracking-tight text-white">
+            Datenschutzerklärung
+          </h1>
+          <p className="text-slate-400">Informationen über die Verarbeitung Ihrer personenbezogenen Daten.</p>
+        </div>
+
+        <hr className="border-slate-900" />
+
+        <div className="space-y-6 text-slate-300">
+          <section className="space-y-2">
+            <h2 className="text-xl font-bold text-white">1. Datenschutz auf einen Blick</h2>
+            
+            <div className="space-y-4">
+              <div>
+                <h3 className="text-md font-semibold text-slate-200">Allgemeiner Hinweis</h3>
+                <p className="text-sm text-slate-400 leading-relaxed">
+                  Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung. Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.
+                </p>
+              </div>
+
+              <div>
+                <h3 className="text-md font-semibold text-slate-200">Wer ist verantwortlich für die Datenerfassung auf dieser Website?</h3>
+                <p className="text-sm text-slate-400 leading-relaxed">
+                  Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber CASPOS GmbH. Dessen Kontaktdaten können Sie dem Impressum dieser Website entnehmen.
+                </p>
+              </div>
+
+              <div>
+                <h3 className="text-md font-semibold text-slate-200">Welche Rechte haben Sie bezüglich Ihrer Daten?</h3>
+                <p className="text-sm text-slate-400 leading-relaxed">
+                  Sie haben jederzeit das Recht unentgeltlich Auskunft über Herkunft, Empfänger und Zweck Ihrer gespeicherten personenbezogenen Daten zu erhalten. Sie haben außerdem ein Recht, die Berichtigung, Sperrung oder Löschung dieser Daten zu verlangen. Hierzu sowie zu weiteren Fragen zum Thema Datenschutz können Sie sich jederzeit unter der im Impressum angegebenen Adresse an uns wenden.
+                </p>
+              </div>
+            </div>
+          </section>
+
+          <section className="space-y-2">
+            <h2 className="text-xl font-bold text-white">2. Erhebung, Verarbeitung und Nutzung personenbezogener Daten</h2>
+            <p className="text-sm text-slate-400 leading-relaxed">
+              Sie können unsere Webseiten grundsätzlich besuchen, ohne dass wir personenbezogene Daten von Ihnen erheben. Personenbezogene Daten werden nur erhoben, wenn Sie uns diese von sich aus zur Durchführung eines Vertrages, oder im Rahmen der Kontaktaufnahme mitteilen. Diese Daten werden ohne Ihre ausdrückliche Einwilligung jeweils allein zur Vertragsabwicklung und Bearbeitung Ihrer Anfragen genutzt.
+            </p>
+          </section>
+
+          <section className="space-y-2">
+            <h2 className="text-xl font-bold text-white">3. Analyse-Tools und Tools von Drittanbietern</h2>
+            <p className="text-sm text-slate-400 leading-relaxed">
+              Beim Besuch unserer Website werden keine Analyse-Tools eingesetzt.
+            </p>
+          </section>
+
+          <section className="space-y-2">
+            <h2 className="text-xl font-bold text-white">4. Cookies</h2>
+            <p className="text-sm text-slate-400 leading-relaxed">
+              CASPOS GmbH verwendet keine so genannte Cookies.
+            </p>
+          </section>
+
+          <section className="space-y-2">
+            <h2 className="text-xl font-bold text-white">5. Server-Log-Dateien</h2>
+            <p className="text-sm text-slate-400 leading-relaxed">
+              Der Provider der Seiten erhebt und speichert automatisch Informationen in so genannten Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt. Dies sind:
+            </p>
+            <ul className="list-disc pl-5 text-sm text-slate-400 space-y-1">
+              <li>Browsertyp und Browserversion</li>
+              <li>verwendetes Betriebssystem</li>
+              <li>Referrer URL</li>
+              <li>Hostname des zugreifenden Rechners</li>
+              <li>Uhrzeit der Serveranfrage</li>
+              <li>IP-Adresse</li>
+            </ul>
+            <p className="text-sm text-slate-400 leading-relaxed mt-2">
+              Eine Zusammenführung dieser Daten mit anderen Datenquellen wird nicht vorgenommen.
+            </p>
+            <p className="text-sm text-slate-400 leading-relaxed">
+              Grundlage für die Datenverarbeitung ist Art. 6 Abs. 1 lit. f DSGVO, der die Verarbeitung von Daten zur Erfüllung eines Vertrags oder vorvertraglicher Maßnahmen gestattet.
+            </p>
+          </section>
+
+          <section className="space-y-2">
+            <h2 className="text-xl font-bold text-white">6. Weitergabe personenbezogener Daten</h2>
+            <p className="text-sm text-slate-400 leading-relaxed">
+              Personenbezogenen Daten werden von uns im Rahmen der Vertragsabwicklung an das mit der Lieferung beauftragte Transportunternehmen weitergegeben, soweit dies zur Lieferung der Ware erforderlich ist.
+            </p>
+            <p className="text-sm text-slate-400 leading-relaxed">
+              Bei Vorlage einer richterlichen Anordnung darf CASPOS GmbH Ihre persönlichen Daten an die Strafverfolgungsbehörden weitergeben, ohne Sie davon zu informieren. Ebenso behält sich CASPOS GmbH vor, Ihre persönlichen Daten für gerichtliche Auseinandersetzungen einzusetzen, falls dies notwendig ist.
+            </p>
+          </section>
+
+          <section className="space-y-2">
+            <h2 className="text-xl font-bold text-white">7. Kontaktformular</h2>
+            <p className="text-sm text-slate-400 leading-relaxed">
+              Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben aus dem Anfrageformular inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei uns gespeichert.
+            </p>
+            <p className="text-sm text-slate-400 leading-relaxed">
+              Die Verarbeitung der in das Kontaktformular eingegebenen Daten erfolgt somit ausschließlich auf Grundlage Ihrer Einwilligung (Art. 6 Abs. 1 lit. a DSGVO). Sie können diese Einwilligung jederzeit widerrufen. Dazu reicht eine formlose Mitteilung per E-Mail an uns. Die Rechtmäßigkeit der bis zum Widerruf erfolgten Datenverarbeitungsvorgänge bleibt vom Widerruf unberührt.
+            </p>
+            <p className="text-sm text-slate-400 leading-relaxed">
+              Die von Ihnen im Kontaktformular eingegebenen Daten verbleiben bei uns, bis Sie uns zur Löschung auffordern, Ihre Einwilligung zur Speicherung widerrufen oder der Zweck für die Datenspeicherung entfällt (z.B. nach abgeschlossener Bearbeitung Ihrer Anfrage). Zwingende gesetzliche Bestimmungen – insbesondere Aufbewahrungsfristen – bleiben unberührt.
+            </p>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}

shop/app/globals.css

@@ -2,71 +2,195 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  :root {
-    --background: 220 33% 98%;
-    --foreground: 220 40% 2%;
-    --card: 0 0% 100%;
-    --card-foreground: 220 40% 2%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 220 40% 2%;
-    --primary: 220 90% 56%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 220 14% 90%;
-    --secondary-foreground: 220 40% 2%;
-    --muted: 220 14% 90%;
-    --muted-foreground: 220 14% 40%;
-    --accent: 220 14% 90%;
-    --accent-foreground: 220 40% 2%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 220 14% 85%;
-    --input: 220 14% 85%;
-    --ring: 220 90% 56%;
-    --radius: 0.75rem;
-  }
-
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-    --popover: 224 71% 4%;
-    --popover-foreground: 213 31% 91%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 222.2 47.4% 11.2%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-    --accent: 222.2 47.4% 11.2%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 222.2 47.4% 11.2%;
-    --input: 222.2 47.4% 11.2%;
-    --ring: 212.7 26.8% 83.9%;
-  }
+html {
+  color-scheme: dark;
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground antialiased;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
+:root {
+  /* OKLCH Zentral-Farbsystem */
+  --oklch-background: 0.145 0.01 148;
+  --oklch-surface: 0.20 0.01 148;
+  --oklch-surface-hover: 0.25 0.012 148;
+  --oklch-primary: 0.68 0.18 255;
+  --oklch-primary-hover: 0.75 0.18 255;
+  --oklch-secondary: 0.76 0.15 155;
+  --oklch-text-main: 0.98 0 0;
+  --oklch-text-muted: 0.70 0.01 148;
+  --oklch-border: 0.31 0.012 148;
+
+  /* Dynamische Branding Variablen */
+  --primary-custom: #2563eb;
+  --accent-custom: #38bdf8;
+  --success-custom: #10b981;
+  --warning-custom: #f59e0b;
+  --destructive-custom: #ef4444;
+  --bg-glow-1: #3b82f6;
+  --bg-glow-2: #1d4ed8;
+  --gradient-from: #2563eb;
+  --gradient-to: #1e40af;
+
+  /* Classic HSL Mappings */
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 217 91% 60%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 217 91% 60%;
+  --radius: 0.75rem;
 }
 
-@layer utilities {
-  .glass {
-    @apply bg-white/10 backdrop-blur-md border border-white/20;
-  }
-  .glass-dark {
-    @apply bg-black/20 backdrop-blur-md border border-white/10;
-  }
-  .text-gradient {
-    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400;
-  }
+/* 100% Dynamische Farbbindung für das gesamte Webshop Design-System */
+.bg-blue-600, .bg-blue-500, .bg-violet-600, .bg-purple-600, .bg-sky-500, .bg-cyan-600, .bg-indigo-600 {
+  background-color: var(--primary-custom) !important;
 }
+
+.hover\:bg-blue-500:hover, .hover\:bg-violet-500:hover, .hover\:bg-blue-600:hover {
+  background-color: var(--primary-custom) !important;
+  filter: brightness(1.1);
+}
+
+.text-blue-500, .text-blue-400, .text-blue-600, .text-violet-400, .text-sky-400, .text-sky-300, .text-indigo-400 {
+  color: var(--primary-custom) !important;
+}
+
+.border-blue-500, .border-blue-600, .border-violet-500, .border-sky-500 {
+  border-color: var(--primary-custom) !important;
+}
+
+/* Dynamische Transparenz-Schichten & Badges mit color-mix */
+[class*="bg-blue-500/"], [class*="bg-violet-500/"], [class*="bg-purple-500/"], [class*="bg-sky-500/"] {
+  background-color: color-mix(in srgb, var(--primary-custom) 15%, transparent) !important;
+}
+
+[class*="border-blue-500/"], [class*="border-violet-500/"], [class*="border-purple-500/"], [class*="border-sky-500/"] {
+  border-color: color-mix(in srgb, var(--primary-custom) 35%, transparent) !important;
+}
+
+/* Dynamische Gradients */
+.from-blue-600, .from-blue-500, .from-violet-600 {
+  --tw-gradient-from: var(--gradient-from, var(--primary-custom)) !important;
+  --tw-gradient-to: rgb(255 255 255 / 0) !important;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
+}
+
+.to-indigo-600, .to-indigo-500, .to-sky-500, .to-sky-400, .to-violet-500 {
+  --tw-gradient-to: var(--gradient-to, var(--accent-custom)) !important;
+}
+
+/* Dynamische Signalfarben (Success, Warning, Destructive) */
+.bg-emerald-500, .bg-green-500, .bg-emerald-600, .bg-green-600 {
+  background-color: var(--success-custom) !important;
+}
+
+.text-emerald-400, .text-green-400, .text-emerald-500, .text-green-500, .text-green-600 {
+  color: var(--success-custom) !important;
+}
+
+.border-emerald-500, .border-green-500 {
+  border-color: var(--success-custom) !important;
+}
+
+[class*="bg-emerald-500/"], [class*="bg-green-500/"] {
+  background-color: color-mix(in srgb, var(--success-custom) 15%, transparent) !important;
+}
+
+[class*="border-emerald-500/"], [class*="border-green-500/"] {
+  border-color: color-mix(in srgb, var(--success-custom) 35%, transparent) !important;
+}
+
+.bg-amber-500, .bg-amber-600 {
+  background-color: var(--warning-custom) !important;
+}
+
+.text-amber-400, .text-amber-500, .text-amber-600 {
+  color: var(--warning-custom) !important;
+}
+
+.border-amber-500, .border-amber-600 {
+  border-color: var(--warning-custom) !important;
+}
+
+[class*="bg-amber-500/"] {
+  background-color: color-mix(in srgb, var(--warning-custom) 15%, transparent) !important;
+}
+
+[class*="border-amber-500/"] {
+  border-color: color-mix(in srgb, var(--warning-custom) 35%, transparent) !important;
+}
+
+.bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600 {
+  background-color: var(--destructive-custom) !important;
+}
+
+.text-red-500, .text-red-400, .text-rose-400, .text-rose-500 {
+  color: var(--destructive-custom) !important;
+}
+
+.border-red-500, .border-rose-500 {
+  border-color: var(--destructive-custom) !important;
+}
+
+[class*="bg-red-500/"], [class*="bg-rose-500/"] {
+  background-color: color-mix(in srgb, var(--destructive-custom) 15%, transparent) !important;
+}
+
+[class*="border-red-500/"], [class*="border-rose-500/"] {
+  border-color: color-mix(in srgb, var(--destructive-custom) 35%, transparent) !important;
+}
+
+/* Background Glowing Orbs & Dynamic Surfaces */
+.blur-\[120px\] {
+  background-color: var(--bg-glow-1) !important;
+}
+
+.bg-\[\#020617\] {
+  background-color: oklch(var(--oklch-background)) !important;
+}
+
+/* Dynamische Buttons & Badges über globale CSS Variablen */
+.btn-primary-theme, .bg-primary-theme {
+  background-color: var(--button-bg, var(--primary-custom)) !important;
+  color: #ffffff !important;
+}
+
+.text-highlight-theme {
+  color: var(--text-highlight, var(--accent-custom)) !important;
+}
+
+.border-glow-theme {
+  border-color: var(--card-border-glow, color-mix(in srgb, var(--accent-custom) 35%, transparent)) !important;
+}
+
+.ring-theme {
+  --tw-ring-color: var(--ring-color, var(--primary-custom)) !important;
+}
+
+input, select, textarea, option {
+  background-color: oklch(var(--oklch-surface)) !important;
+  color: oklch(var(--oklch-text-main)) !important;
+  border: 1px solid oklch(var(--oklch-border) / 0.4) !important;
+}
+
+input:focus, select:focus, textarea:focus {
+  border-color: var(--primary-custom) !important;
+  outline: none !important;
+  box-shadow: 0 0 0 2px var(--primary-custom) !important;
+}
+
+option {
+  color: oklch(var(--oklch-text-main)) !important;
+  background-color: oklch(var(--oklch-surface)) !important;
+}

shop/app/impressum/page.tsx

@@ -0,0 +1,111 @@
+import Link from 'next/link'
+import { ArrowLeft, Shield } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+export default function Impressum() {
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100 py-16 px-4">
+      <div className="container max-w-3xl mx-auto space-y-8">
+        <Link href="/">
+          <Button variant="ghost" size="sm" className="gap-2 text-slate-400 hover:text-white">
+            <ArrowLeft className="w-4 h-4" /> Zurück zur Startseite
+          </Button>
+        </Link>
+
+        <div className="space-y-4">
+          <div className="inline-flex p-3 bg-blue-500/10 rounded-xl text-blue-400">
+            <Shield className="w-6 h-6" />
+          </div>
+          <h1 className="text-4xl font-extrabold tracking-tight text-white">
+            Impressum
+          </h1>
+          <p className="text-slate-400">Angaben gemäß § 5 TMG.</p>
+        </div>
+
+        <hr className="border-slate-900" />
+
+        <div className="space-y-6 text-slate-300">
+          <section className="space-y-2">
+            <h2 className="text-lg font-bold text-white">CASPOS Computerabrechnungssysteme GmbH</h2>
+            <p className="text-sm text-slate-400">
+              Alte Bundesstraße 16<br />
+              D-76846 Hauenstein
+            </p>
+          </section>
+
+          <section className="space-y-2">
+            <h2 className="text-lg font-bold text-white">Vertreten durch die Geschäftsführer:</h2>
+            <p className="text-sm text-slate-400">Helmut Dietz, Tamara Korn, Julian Winter</p>
+          </section>
+
+          <section className="space-y-2">
+            <h2 className="text-lg font-bold text-white">Kontakt:</h2>
+            <p className="text-sm text-slate-400">
+              Telefon: +49 (0) 6392 – 8598 440<br />
+              E-Mail: info@caspos.de
+            </p>
+          </section>
+
+          <section className="space-y-2">
+            <h2 className="text-lg font-bold text-white">Registereintrag:</h2>
+            <p className="text-sm text-slate-400">
+              Handelsregister: HRB 32806, Amtsgericht Zweibrücken
+            </p>
+          </section>
+
+          <section className="space-y-2">
+            <h2 className="text-lg font-bold text-white">Umsatzsteuer-ID & Steuernummer:</h2>
+            <p className="text-sm text-slate-400">
+              Umsatzsteueridentifikationsnummer: DE 158286059<br />
+              Steuernummer: 35/671/01361
+            </p>
+          </section>
+
+          <hr className="border-slate-900" />
+
+          <section className="space-y-2 text-slate-400 text-xs">
+            <p className="font-semibold text-slate-300">
+              © 2022 CASPOS Computerabrechnungssysteme GmbH – Alle Rechte vorbehalten
+            </p>
+            <p className="leading-relaxed">
+              Sämtliches Material auf dieser Website wie Texte, Bilder, Illustrationen, Audio- und Videoclips, um nur ein paar Beispiele zu nennen (allgemein „das Material“ genannt), sind urheberrechtlich geschützt und dürfen für keinen anderen Zweck verwendet werden. Abdruck, kopieren, verteilen, Fremdnutzung, Posting und andere unerlaubte Nutzung des Materials ist hiermit ausdrücklich verboten.
+            </p>
+          </section>
+
+          <hr className="border-slate-900" />
+
+          <div className="space-y-6">
+            <h2 className="text-xl font-bold text-white">Haftungsausschluss</h2>
+
+            <section className="space-y-2">
+              <h3 className="text-md font-semibold text-slate-200">1. Inhalt der Onlineanfrage</h3>
+              <p className="text-sm text-slate-400 leading-relaxed">
+                Der Autor übernimmt keinerlei Gewähr für die Aktualität, Korrektheit, Vollständigkeit oder Qualität der bereitgestellten Informationen. Haftungsansprüche gegen den Autor, welche sich auf Schäden materieller oder ideeller Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen, sofern seitens des Autors kein nachweislich vorsätzliches oder grob fahrlässiges Verschulden vorliegt.
+              </p>
+              <p className="text-sm text-slate-400 leading-relaxed">
+                Alle Anfragen sind freibleibend und unverbindlich. Der Autor behält es sich ausdrücklich vor, Teile der Seiten oder die gesamte Anfrage ohne gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig einzustellen.
+              </p>
+            </section>
+
+            <section className="space-y-2">
+              <h3 className="text-md font-semibold text-slate-200">2. Verweise und Links</h3>
+              <p className="text-sm text-slate-400 leading-relaxed">
+                Bei direkten oder indirekten Verweisen auf fremde Webseiten („Hyperlinks“), die außerhalb des Verantwortungsbereiches des Autors liegen, würde eine Haftungsverpflichtung ausschließlich in dem Fall in Kraft treten, in dem der Autor von den Inhalten Kenntnis hat und es ihm technisch möglich und zumutbar wäre, die Nutzung im Falle rechtswidriger Inhalte zu verhindern. Der Autor erklärt hiermit ausdrücklich, dass zum Zeitpunkt der Linksetzung keine illegalen Inhalte auf den zu verlinkenden Seiten erkennbar waren.
+              </p>
+              <p className="text-sm text-slate-400 leading-relaxed">
+                Auf die aktuelle und zukünftige Gestaltung, die Inhalte oder die Urheberschaft der gelinkten/verknüpften Seiten hat der Autor keinerlei Einfluss. Deshalb distanziert er sich hiermit ausdrücklich von allen Inhalten aller gelinkten /verknüpften Seiten, die nach der Linksetzung verändert wurden. Diese Feststellung gilt für alle innerhalb des eigenen Internetanfrage gesetzten Links und Verweise sowie für Fremdeinträge in vom Autor eingerichteten Gästebüchern, Diskussionsforen und Mailinglisten. Für illegale, fehlerhafte oder unvollständige Inhalte und insbesondere für Schäden, die aus der Nutzung oder Nichtnutzung solcherart dargebotener Informationen entstehen, haftet allein der Anbieter der Seite, auf welche verwiesen wurde, nicht derjenige, der über Links auf die jeweilige Veröffentlichung lediglich verweist.
+              </p>
+            </section>
+
+            <section className="space-y-2">
+              <h3 className="text-md font-semibold text-slate-200">4. Rechtswirksamkeit dieses Haftungsausschlusses</h3>
+              <p className="text-sm text-slate-400 leading-relaxed">
+                Dieser Haftungsausschluss ist als Teil der Onlineanfrage zu betrachten, von dem aus auf diese Seite verwiesen wurde. Sofern Teile oder einzelne Formulierungen dieses Textes der geltenden Rechtslage nicht, nicht mehr oder nicht vollständig entsprechen sollten, bleiben die übrigen Teile des Dokumentes in ihrem Inhalt und ihrer Gültigkeit davon unberührt.
+              </p>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

shop/app/layout.tsx

@@ -1,6 +1,9 @@
 import type { Metadata } from "next";
 import { Geist } from "next/font/google";
-import { ThemeProvider } from "next-themes";
+import { ThemeProvider } from "@/components/ThemeProvider";
+import { InactivityTracker } from "@/components/inactivity-tracker";
+import { HeaderWrapper } from "@/components/HeaderWrapper";
+import { Navbar } from "@/components/Navbar";
 import "./globals.css";
 
 const defaultUrl = process.env.VERCEL_URL
@@ -10,7 +13,7 @@ const defaultUrl = process.env.VERCEL_URL
 export const metadata: Metadata = {
   metadataBase: new URL(defaultUrl),
   title: "CASPOS-Shop | Die Kasse",
-  description: "Konfigurieren und bestellen Sie Ihre maßgeschneiderte Business-Software in Minuten.",
+  description: "Konfigurieren Sie Ihre maßgeschneiderte Business-Software in Minuten und fragen Sie sie an.",
 };
 
 const geistSans = Geist({
@@ -29,11 +32,15 @@ export default function RootLayout({
       <body className={`${geistSans.className} antialiased`}>
         <ThemeProvider
           attribute="class"
-          defaultTheme="system"
-          enableSystem
+          defaultTheme="dark"
+          forcedTheme="dark"
+          enableSystem={false}
           disableTransitionOnChange
         >
-          {children}
+          <InactivityTracker />
+          <HeaderWrapper navbar={<Navbar />}>
+            {children}
+          </HeaderWrapper>
         </ThemeProvider>
       </body>
     </html>

shop/app/login/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function LoginPage() {
+  redirect("/auth/login");
+}

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

@@ -21,7 +21,8 @@ export default function CustomerDetailPage({ params }: { params: Promise<{ id: s
   const [anonymizing, setAnonymizing] = useState(false)
   const [showGdprConfirm, setShowGdprConfirm] = useState(false)
   const [form, setForm] = useState({
-    company_name: '', vat_id: '', first_name: '', last_name: '', street: '', zip: '', city: '',
+    company_name: '', vat_id: '', first_name: '', last_name: '', street: '', zip: '', city: '', email: '',
+    bank_iban: '', bank_bic: '', bank_name: '', bank_owner: '',
   })
 
   useEffect(() => {
@@ -37,6 +38,11 @@ export default function CustomerDetailPage({ params }: { params: Promise<{ id: s
           street: c.street ?? '',
           zip: c.zip ?? '',
           city: c.city ?? '',
+          email: c.email ?? '',
+          bank_iban: c.bank_iban ?? '',
+          bank_bic: c.bank_bic ?? '',
+          bank_name: c.bank_name ?? '',
+          bank_owner: c.bank_owner ?? '',
         })
         setLoading(false)
       })
@@ -98,6 +104,13 @@ export default function CustomerDetailPage({ params }: { params: Promise<{ id: s
               Kunden-ID: <span className="font-mono">{customer.id.slice(0, 8)}…</span>
             </p>
           </div>
+          {!customer.is_anonymized && (
+            <Link href={`/order?customer_id=${customer.id}`} className="ml-auto">
+              <Button size="sm" className="bg-primary hover:bg-primary/90 text-white font-bold gap-2 shadow-[0_0_15px_rgba(59,130,246,0.3)] text-xs">
+                <ShoppingBag className="w-4 h-4" /> Kunde updaten / bestellen
+              </Button>
+            </Link>
+          )}
           {customer.is_anonymized && (
             <Badge className="bg-red-500/10 text-red-400 border-red-500/20 gap-1 ml-auto">
               <AlertTriangle className="w-3 h-3" /> Anonymisiert
@@ -121,9 +134,14 @@ export default function CustomerDetailPage({ params }: { params: Promise<{ id: s
                   { label: 'USt-IdNr.', key: 'vat_id', span: false },
                   { label: 'Vorname', key: 'first_name', span: false },
                   { label: 'Nachname', key: 'last_name', span: false },
+                  { label: 'E-Mail', key: 'email', span: true },
                   { label: 'Straße & Hausnummer', key: 'street', span: true },
                   { label: 'PLZ', key: 'zip', span: false },
                   { label: 'Ort', key: 'city', span: false },
+                  { label: 'Kontoinhaber', key: 'bank_owner', span: false },
+                  { label: 'IBAN', key: 'bank_iban', span: false },
+                  { label: 'BIC', key: 'bank_bic', span: false },
+                  { label: 'Bankname', key: 'bank_name', span: false },
                 ] as const).map(({ label, key, span }) => (
                   <div key={key} className={`space-y-1.5 ${span ? 'md:col-span-2' : ''}`}>
                     <Label className="text-slate-300 text-sm">{label}</Label>

shop/app/my-customers/new/page.tsx

@@ -14,7 +14,8 @@ export default function NewCustomerPage() {
   const router = useRouter()
   const [saving, setSaving] = useState(false)
   const [form, setForm] = useState({
-    company_name: '', vat_id: '', first_name: '', last_name: '', street: '', zip: '', city: '',
+    company_name: '', vat_id: '', first_name: '', last_name: '', street: '', zip: '', city: '', email: '',
+    bank_iban: '', bank_bic: '', bank_name: '', bank_owner: '',
   })
 
   const handleSave = async () => {
@@ -58,9 +59,14 @@ export default function NewCustomerPage() {
                 { label: 'USt-IdNr.', key: 'vat_id', span: false, placeholder: 'DE123456789' },
                 { label: 'Vorname', key: 'first_name', span: false, placeholder: '' },
                 { label: 'Nachname', key: 'last_name', span: false, placeholder: '' },
+                { label: 'E-Mail', key: 'email', span: true, placeholder: 'kunde@beispiel.de' },
                 { label: 'Straße & Hausnummer', key: 'street', span: true, placeholder: 'Musterstraße 1' },
                 { label: 'PLZ', key: 'zip', span: false, placeholder: '12345' },
                 { label: 'Ort', key: 'city', span: false, placeholder: 'Musterstadt' },
+                { label: 'Kontoinhaber', key: 'bank_owner', span: false, placeholder: 'Max Mustermann' },
+                { label: 'IBAN', key: 'bank_iban', span: false, placeholder: 'DE89370400440532013000' },
+                { label: 'BIC', key: 'bank_bic', span: false, placeholder: 'SOLADE21XXX' },
+                { label: 'Bankname', key: 'bank_name', span: false, placeholder: 'Musterbank' },
               ] as const).map(({ label, key, span, placeholder }) => (
                 <div key={key} className={`space-y-1.5 ${span ? 'md:col-span-2' : ''}`}>
                   <Label className="text-slate-300 text-sm">{label}</Label>

shop/app/my-customers/page.tsx

@@ -1,29 +1,26 @@
 export const dynamic = 'force-dynamic';
 import { redirect } from 'next/navigation'
 import Link from 'next/link'
-import { getEndCustomers } from '@/lib/actions/end-customers'
-import { ArrowLeft, Building2, Plus, Edit2, AlertTriangle } from 'lucide-react'
+import { getPartnerCustomersWithDevices } from '@/lib/actions/queries'
+import type { EndCustomerWithDevices } from '@/lib/types'
+import { ArrowLeft, Building2, Plus, AlertTriangle } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge';
-import { createClient } from '@/lib/supabase/server';
+import { createClient } from '@/lib/supabase/server'
+import { CustomerAccordionList } from '@/components/customer-accordion-list'
 
 export default async function MyCustomersPage() {
   const supabase = await createClient()
   const { data: { user } } = await supabase.auth.getUser()
   if (!user) redirect('/auth/login')
 
-  const customers = await getEndCustomers()
-
-  // Anzahl Bestellungen pro Endkunde
-  const { data: orderCounts } = await supabase.from('orders').select('end_customer_id').not('end_customer_id', 'is', null);
-
-  const countMap: Record<string, number> = {}
-  ;(orderCounts ?? []).forEach(o => {
-    if (o.end_customer_id) {
-      countMap[o.end_customer_id] = (countMap[o.end_customer_id] ?? 0) + 1
-    }
-  })
+  let customers: EndCustomerWithDevices[] = []
+  let fetchError: string | null = null
+  try {
+    customers = await getPartnerCustomersWithDevices()
+  } catch (err: any) {
+    console.error("Error loading partner customers with orders:", err)
+    fetchError = err.message || "Es gab ein Problem beim Laden Ihrer Kunden und Kassen."
+  }
 
   return (
     <div className="min-h-screen bg-[#020617] text-white px-4 py-12">
@@ -39,10 +36,10 @@ export default async function MyCustomersPage() {
             <div>
               <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
                 <Building2 className="w-8 h-8 text-primary" />
-                Meine Kunden
+                Kunden & Kassen
               </h1>
               <p className="text-slate-400 text-sm mt-1">
-                Verwalten Sie Ihre Endkunden – deren Daten werden für Bestellungen verwendet.
+                Verwalten Sie Ihre Kunden und deren zugewiesene Kassen / Abonnements.
               </p>
             </div>
           </div>
@@ -53,87 +50,15 @@ export default async function MyCustomersPage() {
           </Link>
         </div>
 
-        {/* Keine Kunden */}
-        {customers.length === 0 && (
-          <Card className="glass-dark border-white/10">
-            <CardContent className="flex flex-col items-center justify-center py-16 gap-4">
-              <Building2 className="w-12 h-12 text-slate-600" />
-              <p className="text-slate-400 text-lg">Noch keine Endkunden angelegt.</p>
-              <Link href="/my-customers/new">
-                <Button><Plus className="w-4 h-4 mr-2" /> Ersten Kunden anlegen</Button>
-              </Link>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Kundenliste */}
-        {customers.length > 0 && (
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="border-b border-white/10 text-left">
-                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Unternehmen</th>
-                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider hidden sm:table-cell">Adresse</th>
-                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider hidden md:table-cell">Bestellungen</th>
-                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Status</th>
-                  <th className="pb-3 text-xs font-semibold text-slate-400 uppercase tracking-wider text-right">Aktionen</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-white/5">
-                {customers.map(customer => (
-                  <tr key={customer.id} className="hover:bg-white/3 transition-colors">
-                    <td className="py-4 pr-4">
-                      <p className="font-semibold text-white">{customer.company_name}</p>
-                      {(customer.first_name || customer.last_name) && (
-                        <p className="text-sm text-slate-400">
-                          {[customer.first_name, customer.last_name].filter(Boolean).join(' ')}
-                        </p>
-                      )}
-                      {customer.vat_id && (
-                        <p className="text-xs text-slate-500">{customer.vat_id}</p>
-                      )}
-                    </td>
-                    <td className="py-4 pr-4 hidden sm:table-cell">
-                      <p className="text-sm text-slate-300">
-                        {customer.street ?? '–'}
-                      </p>
-                      <p className="text-sm text-slate-400">
-                        {[customer.zip, customer.city].filter(Boolean).join(' ') || '–'}
-                      </p>
-                    </td>
-                    <td className="py-4 pr-4 hidden md:table-cell">
-                      <Link href={`/my-orders?customer=${customer.id}`} className="group">
-                        <span className="text-primary font-bold group-hover:underline">
-                          {countMap[customer.id] ?? 0}
-                        </span>
-                        <span className="text-slate-500 text-xs ml-1">Bestellung(en)</span>
-                      </Link>
-                    </td>
-                    <td className="py-4 pr-4">
-                      {customer.is_anonymized ? (
-                        <Badge className="bg-red-500/10 text-red-400 border-red-500/20 gap-1">
-                          <AlertTriangle className="w-3 h-3" /> Anonymisiert
-                        </Badge>
-                      ) : (
-                        <Badge className="bg-green-500/10 text-green-400 border-green-500/20">Aktiv</Badge>
-                      )}
-                    </td>
-                    <td className="py-4 text-right">
-                      {!customer.is_anonymized && (
-                        <Link href={`/my-customers/${customer.id}`}>
-                          <Button variant="ghost" size="sm" className="text-slate-400 hover:text-white gap-1">
-                            <Edit2 className="w-3.5 h-3.5" /> Bearbeiten
-                          </Button>
-                        </Link>
-                      )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+        {fetchError && (
+          <div className="p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-200 text-sm">
+            {fetchError}
           </div>
         )}
 
+        {/* Akkordeon-Ansicht */}
+        <CustomerAccordionList customers={customers} />
+
         {/* DSGVO-Hinweis */}
         <div className="p-4 rounded-xl bg-amber-500/5 border border-amber-500/20 text-xs text-amber-300/80 space-y-1">
           <p className="font-semibold flex items-center gap-2"><AlertTriangle className="w-3.5 h-3.5" /> DSGVO-Hinweis</p>

shop/app/my-orders/MyOrdersClient.tsx

@@ -0,0 +1,346 @@
+'use client'
+
+import React, { useState, useMemo } from 'react'
+import Link from 'next/link'
+import { Download, ExternalLink, ShoppingBag, ArrowLeft, Package, Search, ChevronLeft, ChevronRight, Building2, Monitor, RefreshCw, FileText } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import type { Order } from '@/lib/types'
+
+const statusLabel: Record<string, string> = {
+  pending: 'Eingegangen',
+  active: 'In Bearbeitung',
+  completed: 'Abgeschlossen',
+  cancelled: 'Storniert',
+  rejected: 'Abgelehnt',
+}
+
+const statusClass: Record<string, string> = {
+  pending: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
+  active: 'bg-green-500/20 text-green-400 border-green-500/30',
+  completed: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+  cancelled: 'bg-red-500/20 text-red-400 border-red-500/30',
+  rejected: 'bg-rose-500/20 text-rose-400 border-rose-500/30',
+}
+
+interface MyOrdersClientProps {
+  orders: Order[]
+  error: string | null
+}
+
+export function MyOrdersClient({ orders, error }: MyOrdersClientProps) {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [currentPage, setCurrentPage] = useState(1)
+  const pageSize = 10
+
+  const fmt = (val: number) => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(val)
+
+  // Volltextsuche filtern
+  const filteredOrders = useMemo(() => {
+    const term = searchTerm.toLowerCase().trim()
+    if (!term) return orders
+
+    return orders.filter(o => {
+      // Anfragenummer
+      if (o.order_number?.toString().toLowerCase().includes(term)) return true
+      
+      // Status
+      const label = statusLabel[o.status] || o.status
+      if (label.toLowerCase().includes(term) || o.status.toLowerCase().includes(term)) return true
+
+      // Datum
+      const dateStr = new Date(o.created_at).toLocaleDateString('de-DE')
+      if (dateStr.includes(term)) return true
+
+      // Endkunde (Firma / Name)
+      const customer = (o as any).end_customer_data || o.order_data?.end_customer
+      if (customer) {
+        if (customer.company_name?.toLowerCase().includes(term)) return true
+        if (customer.first_name?.toLowerCase().includes(term)) return true
+        if (customer.last_name?.toLowerCase().includes(term)) return true
+        if (customer.customer_number?.toLowerCase().includes(term)) return true
+      }
+
+      // Notizen
+      if (o.notes?.toLowerCase().includes(term)) return true
+
+      // Kassen & Module
+      const items = o.order_data?.items ?? []
+      for (const item of items) {
+        if (item.device_name?.toLowerCase().includes(term)) return true
+        if (item.product_name?.toLowerCase().includes(term)) return true
+        if (item.license_number?.toLowerCase().includes(term)) return true
+
+        for (const mod of item.selected_modules ?? []) {
+          if (mod.module_name?.toLowerCase().includes(term)) return true
+        }
+      }
+
+      return false
+    })
+  }, [orders, searchTerm])
+
+  // Paginierung berechnen
+  const totalPages = Math.ceil(filteredOrders.length / pageSize) || 1
+  const paginatedOrders = useMemo(() => {
+    const start = (currentPage - 1) * pageSize
+    return filteredOrders.slice(start, start + pageSize)
+  }, [filteredOrders, currentPage, pageSize])
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value)
+    setCurrentPage(1)
+  }
+
+  return (
+    <div className="min-h-screen bg-[#020617] text-white px-4 py-12">
+      <div className="max-w-5xl mx-auto space-y-8">
+        {/* Header */}
+        <div className="flex items-center justify-between gap-4 flex-wrap">
+          <div className="flex items-center gap-4">
+            <Link href="/">
+              <Button variant="ghost" size="sm" className="text-slate-400 hover:text-white">
+                <ArrowLeft className="w-4 h-4 mr-2" /> Startseite
+              </Button>
+            </Link>
+            <div>
+              <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
+                <ShoppingBag className="w-8 h-8 text-primary" />
+                Meine Anfragen
+              </h1>
+              <p className="text-slate-400 text-sm mt-1">
+                Alle Ihre Bestellungen und Konfigurationen auf einen Blick.
+              </p>
+            </div>
+          </div>
+          <Link href="/order">
+            <Button className="bg-primary hover:bg-primary/90 text-white font-bold gap-2 shadow-[0_0_20px_rgba(59,130,246,0.3)]">
+              + Neue Anfrage erstellen
+            </Button>
+          </Link>
+        </div>
+
+        {/* Suche & Statistik */}
+        <div className="flex flex-col sm:flex-row gap-4 justify-between items-stretch sm:items-center">
+          <div className="relative flex-1">
+            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+            <Input
+              type="text"
+              placeholder="Suchen nach Anfragenr., Kunde, Kasse, Produkt, Lizenz..."
+              value={searchTerm}
+              onChange={handleSearchChange}
+              className="pl-10 bg-slate-900/80 border-white/10 text-white placeholder:text-slate-500 rounded-xl h-11 text-sm focus:border-primary"
+            />
+          </div>
+          <div className="text-xs text-slate-400 bg-slate-900/50 px-4 py-2.5 rounded-xl border border-white/10 shrink-0 text-center flex items-center justify-center gap-2">
+            <span>Anfragen:</span>
+            <span className="text-white font-bold text-sm">{filteredOrders.length}</span>
+            {searchTerm && <span className="text-slate-500">(gefiltert aus {orders.length})</span>}
+          </div>
+        </div>
+
+        {/* Fehler */}
+        {error && (
+          <div className="bg-red-500/10 border border-red-500/20 text-red-400 rounded-xl p-4 text-sm">
+            Fehler beim Laden der Anfragen: {error}
+          </div>
+        )}
+
+        {/* Keine Anfragen (aus DB) */}
+        {!error && orders.length === 0 && (
+          <Card className="glass-dark border-white/10">
+            <CardContent className="flex flex-col items-center justify-center py-16 gap-4">
+              <Package className="w-12 h-12 text-slate-600" />
+              <p className="text-slate-400 text-lg">Sie haben noch keine Anfragen aufgegeben.</p>
+              <Link href="/order">
+                <Button>Jetzt konfigurieren</Button>
+              </Link>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Keine Treffer nach Suche */}
+        {!error && orders.length > 0 && filteredOrders.length === 0 && (
+          <Card className="glass-dark border-white/10">
+            <CardContent className="flex flex-col items-center justify-center py-12 gap-3 text-center">
+              <Search className="w-10 h-10 text-slate-600" />
+              <p className="text-slate-300 font-medium">Keine Anfragen für &quot;{searchTerm}&quot; gefunden.</p>
+              <Button variant="outline" size="sm" onClick={() => setSearchTerm('')} className="border-white/10 text-xs">
+                Filter zurücksetzen
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Anfragenliste */}
+        {paginatedOrders.length > 0 && (
+          <div className="space-y-4">
+            {paginatedOrders.map((o) => {
+              const items = o.order_data?.items ?? []
+              const customer = (o as any).end_customer_data || o.order_data?.end_customer
+
+              return (
+                <Card key={o.id} className="glass-dark border-white/10 hover:border-white/20 transition-all duration-300 rounded-2xl overflow-hidden shadow-xl">
+                  <CardContent className="p-6 space-y-5">
+                    {/* Header-Zeile der Karte */}
+                    <div className="flex items-start justify-between gap-4 flex-wrap pb-4 border-b border-white/5">
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-2">
+                          <span className="text-xs text-slate-500 uppercase tracking-wider font-semibold">Anfragenummer</span>
+                          <Badge className={statusClass[o.status] ?? 'bg-slate-500/20 text-slate-300'}>
+                            {statusLabel[o.status] ?? o.status}
+                          </Badge>
+                        </div>
+                        <p className="font-mono font-extrabold text-primary text-xl">#{o.order_number}</p>
+                      </div>
+
+                      {/* Endkunde Details (falls vorhanden) */}
+                      {customer && (
+                        <div className="bg-white/5 border border-white/10 rounded-xl p-2.5 px-3 flex items-center gap-3">
+                          <Building2 className="w-4 h-4 text-sky-400 shrink-0" />
+                          <div className="text-xs">
+                            <p className="text-white font-bold">{customer.company_name || `${customer.first_name} ${customer.last_name}`}</p>
+                            {(customer.first_name || customer.city) && (
+                              <p className="text-slate-400 text-[11px]">
+                                {[customer.first_name && customer.last_name ? `${customer.first_name} ${customer.last_name}` : null, customer.city].filter(Boolean).join(' · ')}
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                      )}
+
+                      <div className="space-y-1 text-right ml-auto">
+                        <p className="text-xs text-slate-500 uppercase tracking-wider font-semibold">Datum & Preis</p>
+                        <p className="text-slate-300 text-xs">
+                          {new Date(o.created_at).toLocaleDateString('de-DE', {
+                            day: '2-digit', month: '2-digit', year: 'numeric',
+                          })}
+                        </p>
+                        <p className="font-extrabold text-white text-lg">
+                          {fmt(o.total_price)}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Kassen & Produkte Detail-Übersicht */}
+                    {items.length > 0 && (
+                      <div className="space-y-2">
+                        <p className="text-[11px] font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
+                          <Monitor className="w-3.5 h-3.5 text-primary" />
+                          Enthaltene Kassen ({items.length}):
+                        </p>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
+                          {items.map((item, idx) => (
+                            <div
+                              key={idx}
+                              className="bg-slate-900/60 border border-white/10 rounded-xl p-3 space-y-1.5 text-xs"
+                            >
+                              <div className="flex items-center justify-between gap-2">
+                                <span className="font-bold text-white flex items-center gap-1.5">
+                                  <Monitor className="w-3.5 h-3.5 text-sky-400 shrink-0" />
+                                  {item.device_name || `Kasse ${idx + 1}`}
+                                </span>
+                                <span className={`text-[9px] px-1.5 py-0.2 rounded border ${item.billing_interval === 'one_time' ? 'border-amber-500/30 text-amber-400 bg-amber-500/10' : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'} font-semibold uppercase`}>
+                                  {item.billing_interval === 'one_time' ? 'Kauf' : 'Abo'}
+                                </span>
+                              </div>
+                              <p className="text-slate-300 font-medium">{item.product_name}</p>
+                              {item.license_number && (
+                                <p className="text-[10px] text-slate-400 font-mono">Lizenz: {item.license_number}</p>
+                              )}
+                              {item.selected_modules && item.selected_modules.length > 0 && (
+                                <div className="pt-1 border-t border-white/5 flex flex-wrap gap-1">
+                                  {item.selected_modules.map((mod: any, mIdx: number) => (
+                                    <span key={mIdx} className="text-[10px] bg-white/5 text-slate-400 px-1.5 py-0.5 rounded border border-white/5">
+                                      + {mod.module_name || mod.name} {mod.quantity > 1 ? `(${mod.quantity}x)` : ''}
+                                    </span>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Notizen (falls vorhanden) */}
+                    {o.notes && (
+                      <div className="bg-slate-900/40 p-2.5 rounded-xl border border-white/5 text-xs text-slate-400 flex items-start gap-2">
+                        <FileText className="w-3.5 h-3.5 text-slate-500 shrink-0 mt-0.5" />
+                        <p><span className="font-semibold text-slate-300">Anmerkungen:</span> {o.notes}</p>
+                      </div>
+                    )}
+
+                    {/* Aktionsleiste */}
+                    <div className="flex gap-2 flex-wrap pt-2 border-t border-white/5 items-center justify-between">
+                      <div className="flex gap-2 flex-wrap">
+                        <Link href={`/order/success?id=${o.id}`}>
+                          <Button variant="outline" size="sm" className="border-white/10 hover:bg-white/10 text-xs font-bold rounded-xl h-8">
+                            Details ansehen
+                          </Button>
+                        </Link>
+                        {o.status !== 'completed' && (
+                          <Link href={`/order?id=${o.id}`}>
+                            <Button variant="outline" size="sm" className="border-amber-500/30 hover:bg-amber-500/10 hover:border-amber-500/50 text-amber-400 text-xs font-bold gap-1 rounded-xl h-8">
+                              <RefreshCw className="w-3 h-3" /> Konfiguration bearbeiten
+                            </Button>
+                          </Link>
+                        )}
+                      </div>
+
+                      {o.pdf_url && (
+                        <div className="flex gap-1">
+                          <Button variant="ghost" size="sm" asChild className="text-xs text-slate-400 hover:text-white h-8">
+                            <a href={`/api/orders/${o.id}/download?inline=true`} target="_blank" rel="noopener noreferrer">
+                              <ExternalLink className="w-3.5 h-3.5 mr-1" /> PDF Ansehen
+                            </a>
+                          </Button>
+                          <Button variant="ghost" size="sm" asChild className="text-xs text-slate-400 hover:text-white h-8">
+                            <a href={`/api/orders/${o.id}/download`} download>
+                              <Download className="w-3.5 h-3.5 mr-1" /> Download
+                            </a>
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              )
+            })}
+          </div>
+        )}
+
+        {/* Paginierung (10 pro Seite) */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between pt-4 border-t border-white/10">
+            <span className="text-xs text-slate-400">
+              Seite <span className="text-white font-bold">{currentPage}</span> von <span className="text-white font-bold">{totalPages}</span>
+            </span>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+                className="border-white/10 text-xs gap-1 rounded-xl"
+              >
+                <ChevronLeft className="w-4 h-4" /> Vorherige
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                disabled={currentPage === totalPages}
+                className="border-white/10 text-xs gap-1 rounded-xl"
+              >
+                Nächste <ChevronRight className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

shop/app/my-orders/page.tsx

@@ -1,23 +1,7 @@
 import { createClient } from '@/lib/supabase/server'
 import { redirect } from 'next/navigation'
-import Link from 'next/link'
-import { Download, ExternalLink, ShoppingBag, ArrowLeft, Package } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
 import type { Order } from '@/lib/types'
-
-const statusLabel: Record<string, string> = {
-  pending: 'Eingegangen',
-  active: 'In Bearbeitung',
-  cancelled: 'Storniert',
-}
-
-const statusClass: Record<string, string> = {
-  pending: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
-  active: 'bg-green-500/20 text-green-400 border-green-500/30',
-  cancelled: 'bg-red-500/20 text-red-400 border-red-500/30',
-}
+import { MyOrdersClient } from './MyOrdersClient'
 
 export default async function MyOrdersPage() {
   const supabase = await createClient()
@@ -25,134 +9,27 @@ export default async function MyOrdersPage() {
   const { data: { user } } = await supabase.auth.getUser()
   if (!user) redirect('/auth/login')
 
-  const { data: orders, error } = await supabase
-    .from('orders')
-    .select('*')
-    .eq('user_id', user.id)
-    .order('created_at', { ascending: false })
+  // Get user's company_id and fetch all company orders
+  const { data: dbUser } = await supabase
+    .from('users')
+    .select('company_id')
+    .eq('id', user.id)
+    .single()
+
+  let query = supabase.from('orders').select('*')
+
+  if (dbUser?.company_id) {
+    query = query.eq('company_id', dbUser.company_id)
+  } else {
+    query = query.eq('user_id', user.id)
+  }
+
+  const { data: orders, error } = await query.order('created_at', { ascending: false })
 
   return (
-    <div className="min-h-screen bg-[#020617] text-white px-4 py-12">
-      <div className="max-w-4xl mx-auto space-y-8">
-        {/* Header */}
-        <div className="flex items-center gap-4">
-          <Link href="/">
-            <Button variant="ghost" size="sm" className="text-slate-400 hover:text-white">
-              <ArrowLeft className="w-4 h-4 mr-2" /> Startseite
-            </Button>
-          </Link>
-          <div>
-            <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
-              <ShoppingBag className="w-8 h-8 text-primary" />
-              Meine Bestellungen
-            </h1>
-            <p className="text-slate-400 text-sm mt-1">
-              Alle Ihre Bestellungen auf einen Blick – inkl. aktuellem Status.
-            </p>
-          </div>
-        </div>
-
-        {/* Fehler */}
-        {error && (
-          <div className="bg-red-500/10 border border-red-500/20 text-red-400 rounded-xl p-4 text-sm">
-            Fehler beim Laden der Bestellungen: {error.message}
-          </div>
-        )}
-
-        {/* Keine Bestellungen */}
-        {!error && (!orders || orders.length === 0) && (
-          <Card className="glass-dark border-white/10">
-            <CardContent className="flex flex-col items-center justify-center py-16 gap-4">
-              <Package className="w-12 h-12 text-slate-600" />
-              <p className="text-slate-400 text-lg">Sie haben noch keine Bestellungen aufgegeben.</p>
-              <Link href="/order">
-                <Button>Jetzt konfigurieren</Button>
-              </Link>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Bestellliste */}
-        <div className="space-y-4">
-          {(orders ?? []).map((order) => {
-            const o = order as Order
-            const items = o.order_data?.items ?? []
-            return (
-              <Card key={o.id} className="glass-dark border-white/10 hover:border-white/20 transition-colors">
-                <CardContent className="p-6 space-y-4">
-                  {/* Kopfzeile */}
-                  <div className="flex items-start justify-between gap-4 flex-wrap">
-                    <div className="space-y-1">
-                      <p className="text-xs text-slate-500 uppercase tracking-wider">Bestellnummer</p>
-                      <p className="font-mono font-bold text-primary text-lg">#{o.order_number}</p>
-                    </div>
-                    <div className="space-y-1 text-right">
-                      <p className="text-xs text-slate-500 uppercase tracking-wider">Datum</p>
-                      <p className="text-white text-sm">
-                        {new Date(o.created_at).toLocaleDateString('de-DE', {
-                          day: '2-digit', month: '2-digit', year: 'numeric',
-                        })}
-                      </p>
-                    </div>
-                    <div className="space-y-1">
-                      <p className="text-xs text-slate-500 uppercase tracking-wider">Status</p>
-                      <Badge className={statusClass[o.status] ?? 'bg-slate-500/20 text-slate-300'}>
-                        {statusLabel[o.status] ?? o.status}
-                      </Badge>
-                    </div>
-                    <div className="space-y-1 text-right">
-                      <p className="text-xs text-slate-500 uppercase tracking-wider">Gesamt</p>
-                      <p className="font-bold text-white text-lg">
-                        {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(o.total_price)}
-                      </p>
-                    </div>
-                  </div>
-
-                  {/* Produkte kurz */}
-                  {items.length > 0 && (
-                    <div className="flex flex-wrap gap-2">
-                      {items.map((item, i) => (
-                        <span
-                          key={i}
-                          className="text-xs bg-white/5 border border-white/10 rounded-full px-3 py-1 text-slate-300"
-                        >
-                          {item.product_name}
-                          {item.selected_modules.length > 0 && (
-                            <span className="text-slate-500 ml-1">+{item.selected_modules.length} Module</span>
-                          )}
-                        </span>
-                      ))}
-                    </div>
-                  )}
-
-                  {/* Aktionen */}
-                  <div className="flex gap-2 flex-wrap pt-1">
-                    <Link href={`/order/success?id=${o.id}`}>
-                      <Button variant="outline" size="sm" className="border-white/10 hover:bg-white/10 text-xs">
-                        Details ansehen
-                      </Button>
-                    </Link>
-                    {o.pdf_url && (
-                      <>
-                        <Button variant="ghost" size="sm" asChild className="text-xs text-slate-400 hover:text-white">
-                          <a href={o.pdf_url} target="_blank" rel="noopener noreferrer">
-                            <ExternalLink className="w-3 h-3 mr-1" /> Rechnung ansehen
-                          </a>
-                        </Button>
-                        <Button variant="ghost" size="sm" asChild className="text-xs text-slate-400 hover:text-white">
-                          <a href={o.pdf_url} download>
-                            <Download className="w-3 h-3 mr-1" /> PDF
-                          </a>
-                        </Button>
-                      </>
-                    )}
-                  </div>
-                </CardContent>
-              </Card>
-            )
-          })}
-        </div>
-      </div>
-    </div>
+    <MyOrdersClient
+      orders={(orders as Order[]) || []}
+      error={error ? error.message : null}
+    />
   )
 }

shop/app/not-found.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import Link from 'next/link'
+import { motion } from 'framer-motion'
+import { AsciiShaderBackground } from '@/components/AsciiShaderBackground'
+import { ArrowLeft, Home } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen bg-transparent text-slate-100 overflow-hidden relative selection:bg-blue-500/30 selection:text-blue-200">
+      <AsciiShaderBackground />
+
+      <div className="relative z-10 flex flex-col items-center justify-center min-h-screen px-4">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
+          className="text-center space-y-8 max-w-lg"
+        >
+          {/* Große 404 */}
+          <motion.h1
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.8, delay: 0.1, type: 'spring', stiffness: 100 }}
+            className="text-[10rem] md:text-[14rem] font-black leading-none tracking-tighter bg-gradient-to-b from-white via-slate-300 to-slate-600 bg-clip-text text-transparent select-none"
+          >
+            404
+          </motion.h1>
+
+          {/* Beschreibung */}
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.3 }}
+            className="space-y-3"
+          >
+            <h2 className="text-2xl md:text-3xl font-bold text-white">
+              Seite nicht gefunden
+            </h2>
+            <p className="text-slate-400 text-sm md:text-base leading-relaxed max-w-md mx-auto">
+              Die angeforderte Seite existiert nicht oder wurde verschoben.
+            </p>
+          </motion.div>
+
+          {/* Buttons */}
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.5 }}
+            className="flex flex-col sm:flex-row items-center justify-center gap-3 pt-4"
+          >
+            <Button
+              asChild
+              size="lg"
+              className="h-12 px-8 text-base gap-2 bg-gradient-to-r from-blue-600 to-sky-500 hover:from-blue-500 hover:to-sky-400 border-0 shadow-[0_0_20px_rgba(56,189,248,0.25)] hover:shadow-[0_0_30px_rgba(56,189,248,0.4)] transition-all"
+            >
+              <Link href="/">
+                <Home className="w-4 h-4" />
+                Zur Startseite
+              </Link>
+            </Button>
+            <Button
+              asChild
+              variant="ghost"
+              size="lg"
+              className="h-12 px-8 text-base gap-2 text-slate-400 hover:text-white border border-white/10 hover:border-white/20 hover:bg-white/5"
+              onClick={() => typeof window !== 'undefined' && window.history.back()}
+            >
+              <button type="button">
+                <ArrowLeft className="w-4 h-4" />
+                Zurück
+              </button>
+            </Button>
+          </motion.div>
+
+          {/* Subtle info */}
+          <motion.p
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5, delay: 0.7 }}
+            className="text-xs text-slate-600 pt-8"
+          >
+            Fehlercode 404 · CASPOS Shop
+          </motion.p>
+        </motion.div>
+      </div>
+    </div>
+  )
+}

shop/app/order/page.tsx

@@ -1,49 +1,160 @@
 import { createClient } from '@/lib/supabase/server'
+import { createAdminClient } from '@/lib/supabase/admin'
 import { getProducts, getCategories } from '@/lib/actions/products'
 import { getEndCustomers } from '@/lib/actions/end-customers'
 import { OrderWizard } from '@/components/order-wizard'
+import { getCompanies } from '@/lib/actions/companies'
 import { redirect } from 'next/navigation'
 import { Suspense } from 'react'
 
-export default async function OrderPage() {
+interface PageProps {
+  searchParams: Promise<{ id?: string; orderId?: string; mode?: string; customer_id?: string; device_id?: string }>
+}
+
+export default async function OrderPage({ searchParams }: PageProps) {
+  const params = await searchParams
+  const orderId = params.orderId || params.id
   return (
     <div className="min-h-screen bg-[#0a0a0a] text-white selection:bg-primary/30">
       <div className="container mx-auto py-10">
-        <div className="text-center mb-12">
-          <h1 className="text-5xl font-extrabold tracking-tight mb-4 text-gradient">
-            Konfigurieren Sie Ihre Lösung
-          </h1>
-          <p className="text-slate-400 text-lg max-w-2xl mx-auto">
-            Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
-          </p>
-        </div>
+
         
         <Suspense fallback={<div className="h-96 w-full animate-pulse bg-white/5 rounded-2xl" />}>
-          <OrderDataWrapper />
+          <OrderDataWrapper
+            orderId={orderId}
+            mode={params.mode}
+            customerId={params.customer_id}
+            deviceId={params.device_id}
+          />
         </Suspense>
       </div>
     </div>
   )
 }
 
-async function OrderDataWrapper() {
+async function OrderDataWrapper({
+  orderId,
+  mode,
+  customerId,
+  deviceId,
+}: {
+  orderId?: string
+  mode?: string
+  customerId?: string
+  deviceId?: string
+}) {
   const supabase = await createClient()
   const { data: { user } } = await supabase.auth.getUser()
 
   if (!user) {
-    redirect('/auth/login')
+    redirect(`/auth/login?next=/order${orderId ? `?id=${orderId}` : ''}`)
   }
 
-  const products = await getProducts()
-  const categories = await getCategories()
-  const endCustomers = await getEndCustomers()
-
-  // Fetch profile if exists
-  const { data: profile } = await supabase
-    .from('profiles')
-    .select('*')
+  // Check user role and company
+  const { data: userData } = await supabase
+    .from('users')
+    .select('role, company_id')
     .eq('id', user.id)
     .single()
 
-  return <OrderWizard products={products} categories={categories} initialProfile={profile} initialEndCustomers={endCustomers} />
+  const isAdmin = userData?.role === 'admin' || userData?.role === 'verwaltung'
+  const hasCompany = !!userData?.company_id
+
+  if (!isAdmin && !hasCompany) {
+    return (
+      <div className="max-w-md mx-auto mt-12 p-6 bg-red-500/10 border border-red-500/20 rounded-2xl text-center space-y-4">
+        <h2 className="text-xl font-bold text-red-400">Kein Unternehmen zugewiesen</h2>
+        <p className="text-slate-400 text-sm">
+          Sie müssen einem Unternehmen zugewiesen sein, um Anfragen erstellen zu können. 
+          Bitte wenden Sie sich an den Administrator.
+        </p>
+      </div>
+    )
+  }
+
+  let initialOrder = null
+  if (orderId) {
+    const adminClient = createAdminClient()
+    const { data: orderData, error } = await adminClient
+      .from('orders')
+      .select('*')
+      .eq('id', orderId)
+      .single()
+
+    if (error || !orderData) {
+      redirect('/order')
+    }
+
+    const isAdmin = userData?.role === 'admin' || userData?.role === 'verwaltung'
+    const isOwner = orderData.user_id === user.id
+    const isCompanyMember = userData?.company_id && orderData.company_id === userData.company_id
+    if (!isAdmin && !isOwner && !isCompanyMember) {
+      redirect('/order')
+    }
+
+    if (orderData.status === 'completed' && !isAdmin && mode !== 'extension' && mode !== 'upgrade') {
+      redirect('/order')
+    }
+
+    initialOrder = orderData
+  }
+
+  const products = await getProducts().catch(() => [])
+  const categories = await getCategories().catch(() => [])
+  
+  // Admin sees all end customers across partners
+  let endCustomers = []
+  if (userData?.role === 'admin' || userData?.role === 'verwaltung') {
+    try {
+      const adminClient = createAdminClient()
+      const { data } = await adminClient
+        .from('end_customers')
+        .select('*')
+        .order('company_name', { ascending: true })
+      endCustomers = data || []
+    } catch (e) {
+      console.error('Fehler beim Laden aller Endkunden für Admin:', e)
+    }
+  } else {
+    endCustomers = await getEndCustomers().catch(() => [])
+  }
+
+  // Fetch profile safely using maybeSingle
+  let profile = null
+  try {
+    const { data } = await supabase
+      .from('profiles')
+      .select('*')
+      .eq('id', user.id)
+      .maybeSingle()
+    profile = data
+  } catch (e) {
+    console.error('Fehler beim Laden des Profils:', e)
+  }
+
+  // Fetch companies list for admin
+  let companies: any[] = []
+  if (userData?.role === 'admin' || userData?.role === 'verwaltung') {
+    companies = await getCompanies().catch(() => [])
+  }
+
+  const initialLastLicenseDate = initialOrder
+    ? (initialOrder.order_data?.last_license_date || (initialOrder.created_at ? new Date(initialOrder.created_at).toISOString().split('T')[0] : ''))
+    : ''
+
+  return (
+    <OrderWizard
+      products={products}
+      categories={categories}
+      initialProfile={profile}
+      initialEndCustomers={endCustomers}
+      initialOrder={initialOrder}
+      isAdmin={userData?.role === 'admin' || userData?.role === 'verwaltung'}
+      companies={companies}
+      upgradeMode={mode === 'upgrade'}
+      initialEndCustomerId={customerId || null}
+      lockedDeviceId={deviceId ? decodeURIComponent(deviceId) : null}
+      initialLastLicenseDate={initialLastLicenseDate}
+    />
+  )
 }

shop/app/order/success/page.tsx

@@ -1,7 +1,7 @@
 import { createClient } from '@/lib/supabase/server'
 import { redirect } from 'next/navigation'
 import Link from 'next/link'
-import { CheckCircle2, Download, ExternalLink, ShoppingBag, ArrowRight } from 'lucide-react'
+import { CheckCircle2, Download, ExternalLink, ShoppingBag, ArrowRight, Calendar } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Separator } from '@/components/ui/separator'
@@ -22,23 +22,59 @@ export default async function OrderSuccessPage({
   const { data: { user } } = await supabase.auth.getUser()
   if (!user) redirect('/auth/login')
 
-  // Bestellung laden und prüfen ob sie dem eingeloggten User gehört
+  // 1. Hole Benutzerrolle und Company
+  const { data: dbUser } = await supabase
+    .from('users')
+    .select('role, company_id')
+    .eq('id', user.id)
+    .single()
+
+  // 2. Hole Bestellung
   const { data: order, error } = await supabase
     .from('orders')
     .select('*')
     .eq('id', id)
-    .eq('user_id', user.id)
     .single()
 
   if (error || !order) redirect('/')
 
+  // Berechtigung prüfen
+  const isAdmin = dbUser?.role === 'admin' || dbUser?.role === 'verwaltung'
+  const isOwner = order.user_id === user.id
+  const isCompanyMember = dbUser?.company_id && order.company_id === dbUser.company_id
+
+  if (!isAdmin && !isOwner && !isCompanyMember) {
+    redirect('/')
+  }
+
   const o = order as Order
   const items = o.order_data?.items ?? []
+  const groupedItems: Record<string, typeof items> = {}
+  items.forEach(item => {
+    const devName = item.device_name || 'Kasse 1'
+    if (!groupedItems[devName]) {
+      groupedItems[devName] = []
+    }
+    groupedItems[devName].push(item)
+  })
+
+  const taxRate = o.order_data?.tax_rate ?? 19
+  const oneTimeItems = items.filter((item) => item.billing_interval === 'one_time')
+  const monthlyItems = items.filter((item) => item.billing_interval === 'monthly')
+
+  const oneTimeNet = oneTimeItems.reduce((sum, item) => sum + (item.item_total || 0), 0)
+  const oneTimeTax = Math.round(oneTimeNet * (taxRate / 100) * 100) / 100
+  const oneTimeGross = Math.round((oneTimeNet + oneTimeTax) * 100) / 100
+
+  const monthlyNet = monthlyItems.reduce((sum, item) => sum + (item.item_total || 0), 0)
+  const monthlyTax = Math.round(monthlyNet * (taxRate / 100) * 100) / 100
+  const monthlyGross = Math.round((monthlyNet + monthlyTax) * 100) / 100
 
   const statusLabel: Record<string, string> = {
     pending: 'Eingegangen',
     active: 'In Bearbeitung',
     cancelled: 'Storniert',
+    rejected: 'Abgelehnt',
   }
 
   return (
@@ -50,50 +86,57 @@ export default async function OrderSuccessPage({
             <CheckCircle2 className="w-12 h-12 text-green-400" />
           </div>
           <h1 className="text-4xl font-extrabold tracking-tight text-white">
-            Bestellung eingegangen!
+            Anfrage eingegangen!
           </h1>
           <p className="text-slate-400 text-lg">
-            Ihre Bestellung wurde erfolgreich gespeichert.
+            Ihre Anfrage wurde erfolgreich gespeichert.
           </p>
           <div className="inline-flex items-center gap-2 bg-white/5 border border-white/10 rounded-full px-5 py-2 font-mono text-lg font-bold text-primary">
             #{o.order_number}
           </div>
         </div>
 
-        {/* Bestell-Details */}
+        {/* Anfrage-Details */}
         <Card className="glass-dark border-white/10">
           <CardHeader className="flex flex-row items-center justify-between">
-            <CardTitle className="text-white">Bestellübersicht</CardTitle>
+            <CardTitle className="text-white">Anfrageübersicht</CardTitle>
             <Badge
               className={
                 o.status === 'active'
                   ? 'bg-green-500/20 text-green-400 border-green-500/30'
                   : o.status === 'cancelled'
-                  ? 'bg-red-500/20 text-red-400 border-red-500/30'
-                  : 'bg-amber-500/20 text-amber-400 border-amber-500/30'
+                    ? 'bg-red-500/20 text-red-400 border-red-500/30'
+                    : 'bg-amber-500/20 text-amber-400 border-amber-500/30'
               }
             >
               {statusLabel[o.status] ?? o.status}
             </Badge>
           </CardHeader>
           <CardContent className="space-y-4">
-            {/* Produkte */}
-            <div className="space-y-3">
-              {items.map((item, i) => (
-                <div key={i} className="space-y-1">
-                  <div className="flex justify-between text-sm">
-                    <span className="font-semibold text-white">{item.product_name}</span>
-                    <span className="text-white">
-                      {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(item.base_price)}
-                      <span className="text-slate-400 text-xs ml-1">
-                        {item.billing_interval === 'one_time' ? 'einmalig' : '/ Monat'}
-                      </span>
-                    </span>
+            {/* Produkte gruppiert nach Kasse */}
+            <div className="space-y-4">
+              {Object.entries(groupedItems).map(([deviceName, devItems]) => (
+                <div key={deviceName} className="space-y-2 border-b border-white/5 pb-3 last:border-0 last:pb-0">
+                  <div className="bg-white/5 px-2 py-1 rounded text-xs text-primary font-bold">
+                    {deviceName === 'Zusatzleistung' ? 'Backoffice' : `Kasse: ${deviceName}`}
                   </div>
-                  {item.selected_modules.map((mod, j) => (
-                    <div key={j} className="flex justify-between text-xs pl-4 text-slate-400">
-                      <span>+ {mod.module_name}</span>
-                      <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.price)}</span>
+                  {devItems.map((item) => (
+                    <div key={item.product_id} className="space-y-1 pl-2">
+                      <div className="flex justify-between text-sm">
+                        <span className="font-semibold text-white">{item.product_name}</span>
+                        <span className="text-white">
+                          {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(item.base_price)}
+                          <span className="text-slate-400 text-xs ml-1">
+                            {item.billing_interval === 'one_time' ? 'einmalig' : '/ Monat'}
+                          </span>
+                        </span>
+                      </div>
+                      {item.selected_modules.map((mod) => (
+                        <div key={mod.module_id} className="flex justify-between text-xs pl-4 text-slate-400">
+                          <span>+ {mod.module_name}</span>
+                          <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(mod.price)}</span>
+                        </div>
+                      ))}
                     </div>
                   ))}
                 </div>
@@ -103,12 +146,76 @@ export default async function OrderSuccessPage({
             <Separator className="bg-white/10" />
 
             {/* Gesamtbetrag */}
-            <div className="flex justify-between text-lg font-bold">
-              <span className="text-slate-300">Gesamtbetrag</span>
-              <span className="text-gradient">
-                {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(o.total_price)}
-              </span>
-            </div>
+            {oneTimeNet > 0 && (
+              <div className="space-y-1">
+                {monthlyNet > 0 && <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Einmaliger Betrag</p>}
+                <div className="flex justify-between text-sm text-slate-400">
+                  <span>Netto:</span>
+                  <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeNet)}</span>
+                </div>
+                <div className="flex justify-between text-sm text-slate-400">
+                  <span>zzgl. {taxRate}% MwSt.:</span>
+                  <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeTax)}</span>
+                </div>
+                <div className="flex justify-between text-base font-bold text-white">
+                  <span>Brutto Gesamtbetrag:</span>
+                  <span className={monthlyNet > 0 ? "text-white" : "text-primary"}>
+                    {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(oneTimeGross)}
+                  </span>
+                </div>
+              </div>
+            )}
+
+            {oneTimeNet > 0 && monthlyNet > 0 && (
+              <Separator className="bg-white/5 my-2" />
+            )}
+
+            {monthlyNet > 0 && (
+              <div className="space-y-1">
+                {oneTimeNet > 0 && <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Monatlicher Betrag</p>}
+                <div className="flex justify-between text-sm text-slate-400">
+                  <span>Netto:</span>
+                  <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyNet)} / Monat</span>
+                </div>
+                <div className="flex justify-between text-sm text-slate-400">
+                  <span>zzgl. {taxRate}% MwSt.:</span>
+                  <span>{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyTax)} / Monat</span>
+                </div>
+                <div className="flex justify-between text-base font-bold text-white">
+                  <span>Brutto Gesamtbetrag:</span>
+                  <span className="text-primary">
+                    {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(monthlyGross)} / Monat
+                  </span>
+                </div>
+              </div>
+            )}
+
+            {o.order_data?.price_multiplier !== null && o.order_data?.price_multiplier !== undefined && (
+              <div className="text-sm text-green-400 font-semibold bg-green-500/10 p-3 rounded-lg border border-green-500/20 space-y-1">
+                <p>Update-Rabatt angewendet:</p>
+                <p className="text-xs font-normal text-slate-300">
+                  {o.order_data.price_multiplier === 0
+                    ? "Update (0-12 Monate): 100% Rabatt (inklusive)"
+                    : o.order_data.price_multiplier === 0.15
+                      ? "Update (13-14 Monate): 15% vom Listenpreis"
+                      : o.order_data.price_multiplier === 0.30
+                        ? "Update (15-25 Monate): 30% vom Listenpreis"
+                        : o.order_data.price_multiplier === 0.45
+                          ? "Update (26-37 Monate): 45% vom Listenpreis"
+                          : o.order_data.price_multiplier === 0.60
+                            ? "Update (38-49 Monate): 60% vom Listenpreis"
+                            : o.order_data.price_multiplier === 0.90
+                              ? "Neukauf (>= 50 Monate): 10% Rabatt"
+                              : `Gebühr: ${o.order_data.price_multiplier * 100}%`}
+                </p>
+                {o.order_data.last_license_date && (
+                  <p className="text-xs font-normal text-slate-400 flex items-center gap-1">
+                    <Calendar className="w-3.5 h-3.5 text-primary" />
+                    Letzte Lizenz vom: {new Date(o.order_data.last_license_date).toLocaleDateString('de-DE')}
+                  </p>
+                )}
+              </div>
+            )}
 
             <Separator className="bg-white/10" />
 
@@ -117,18 +224,26 @@ export default async function OrderSuccessPage({
               <p className="font-semibold text-white">{o.customer_data?.company_name}</p>
               <p>{o.customer_data?.first_name} {o.customer_data?.last_name}</p>
               <p>{o.customer_data?.address}, {o.customer_data?.zip_code} {o.customer_data?.city}</p>
+              {o.customer_data?.bank_iban && (
+                <div className="text-xs text-slate-500 pt-2 border-t border-white/5 mt-2 space-y-0.5">
+                  <p><span className="font-semibold text-slate-400">Kontoinhaber:</span> {o.customer_data.bank_owner}</p>
+                  <p><span className="font-semibold text-slate-400">IBAN:</span> {o.customer_data.bank_iban}</p>
+                  {o.customer_data.bank_bic && <p><span className="font-semibold text-slate-400">BIC:</span> {o.customer_data.bank_bic}</p>}
+                  {o.customer_data.bank_name && <p><span className="font-semibold text-slate-400">Bank:</span> {o.customer_data.bank_name}</p>}
+                </div>
+              )}
             </div>
 
             {/* PDF-Download */}
             {o.pdf_url && (
               <div className="flex gap-2 pt-2">
                 <Button variant="outline" size="sm" asChild className="border-white/10 hover:bg-white/10">
-                  <a href={o.pdf_url} target="_blank" rel="noopener noreferrer">
-                    <ExternalLink className="w-4 h-4 mr-2" /> Rechnung ansehen
+                  <a href={`/api/orders/${o.id}/download?inline=true`} target="_blank" rel="noopener noreferrer">
+                    <ExternalLink className="w-4 h-4 mr-2" /> Anfragebestätigung ansehen
                   </a>
                 </Button>
                 <Button variant="secondary" size="sm" asChild>
-                  <a href={o.pdf_url} download>
+                  <a href={`/api/orders/${o.id}/download`} download>
                     <Download className="w-4 h-4 mr-2" /> Herunterladen
                   </a>
                 </Button>

shop/app/page.tsx

@@ -1,108 +1,23 @@
-import { Button } from '@/components/ui/button'
-import Link from 'next/link'
-import { Rocket, Shield, Cpu, ArrowRight } from 'lucide-react'
+import { createClient } from '@/lib/supabase/server'
+import { HomeClient } from '@/components/HomeClient'
+import { isSetupNeeded } from '@/lib/actions/setup'
+import { redirect } from 'next/navigation'
 
-export default function Home() {
-  return (
-    <div className="flex flex-col min-h-screen bg-[#020617] text-white">
-      <div className="bg-amber-500/10 border-b border-amber-500/20 py-2 px-4 text-center text-xs text-amber-400 font-medium tracking-wide z-50">
-        ⚠️ Dies ist eine **Demo-Webseite (Dummy-Shop)**. Es werden keine echten Bestellungen verarbeitet oder Zahlungen abgewickelt.
-      </div>
-      <header className="px-4 lg:px-6 h-16 flex items-center border-b border-white/5 backdrop-blur-md sticky top-0 z-50">
-        <Link className="flex items-center justify-center gap-2" href="#">
-          <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
-            <Rocket className="h-5 w-5 text-white" />
-          </div>
-          <span className="font-bold text-xl tracking-tighter">CASPOS Store</span>
-          <span className="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
-            Demo
-          </span>
-        </Link>
-        <nav className="ml-auto flex gap-4 sm:gap-6 items-center">
-          <Link className="text-sm font-medium hover:text-primary transition-colors" href="/order">
-            Bestellen
-          </Link>
-          <Link className="text-sm font-medium hover:text-primary transition-colors" href="/my-customers">
-            Meine Kunden
-          </Link>
-          <Link className="text-sm font-medium hover:text-primary transition-colors" href="/my-orders">
-            Meine Bestellungen
-          </Link>
-          <Link className="text-sm font-medium hover:text-primary transition-colors" href="/admin/products">
-            Admin
-          </Link>
-          <Button variant="outline" className="border-white/10 hover:bg-white/5">
-            Login
-          </Button>
-        </nav>
-      </header>
-      <main className="flex-1">
-        <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48 px-4 overflow-hidden relative">
-          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-primary/20 blur-[120px] rounded-full -z-10 opacity-30" />
-          <div className="container mx-auto">
-            <div className="flex flex-col items-center space-y-4 text-center">
-              <div className="space-y-2">
-                <div className="inline-block rounded-full bg-amber-500/10 px-3 py-1 text-sm text-amber-400 font-medium border border-amber-500/20 mb-4">
-                  ⚠️ Demo-Umgebung für Testbestellungen
-                </div>
-                <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-7xl/none">
-                  CASPOS   <span className="text-gradient">Software-Bestellung</span>
-                </h1>
-                <p className="mx-auto max-w-[700px] text-slate-400 md:text-xl dark:text-zinc-400 mt-6">
-                  Modulare Lösungen, einfaches Deployment und ein intuitives Interface für Ihre Business-Anforderungen.
-                </p>
-              </div>
-              <div className="space-x-4 mt-8">
-                <Link href="/order">
-                  <Button size="lg" className="h-12 px-8 text-lg font-semibold shadow-lg shadow-primary/20 transition-all hover:scale-105">
-                    Jetzt bestellen <ArrowRight className="ml-2 h-5 w-5" />
-                  </Button>
-                </Link>
-                <Link href="/contact">
-                  <Button size="lg" variant="outline" className="h-12 px-8 text-lg border-white/10 hover:bg-white/5">
-                    Contact Us
-                  </Button>
-                </Link>
-              </div>
-            </div>
-          </div>
-        </section>
+export const dynamic = "force-dynamic"
 
-        <section className="w-full py-12 md:py-24 lg:py-32 border-t border-white/5 bg-white/[0.02]">
-          <div className="container mx-auto px-4 md:px-6">
-            <div className="grid gap-12 lg:grid-cols-3">
-              <div className="flex flex-col items-center space-y-4 text-center p-6 rounded-2xl glass-dark">
-                <div className="p-3 bg-primary/10 rounded-xl">
-                  <Cpu className="h-8 w-8 text-primary" />
-                </div>
-                <h3 className="text-xl font-bold">Handel</h3>
-                <p className="text-slate-400">Von der einfachen Handelskasse bis hin zur vollwertigen ERP. Wir können es.</p>
-              </div>
-              <div className="flex flex-col items-center space-y-4 text-center p-6 rounded-2xl glass-dark">
-                <div className="p-3 bg-primary/10 rounded-xl">
-                  <Shield className="h-8 w-8 text-primary" />
-                </div>
-                <h3 className="text-xl font-bold">Gastronomie</h3>
-                <p className="text-slate-400">Egal ob mobiles Ordern, einer Küchen-Anzeige oder einen Pick-Up-Bord. Wir können es.</p>
-              </div>
-              <div className="flex flex-col items-center space-y-4 text-center p-6 rounded-2xl glass-dark">
-                <div className="p-3 bg-primary/10 rounded-xl">
-                  <Rocket className="h-8 w-8 text-primary" />
-                </div>
-                <h3 className="text-xl font-bold">Hybrid Systeme</h3>
-                <p className="text-slate-400">Sie benötigen eine Lösung aus beiden Welten? Sprechen Sie uns an.</p>
-              </div>
-            </div>
-          </div>
-        </section>
-      </main>
-      <footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t border-white/5 bg-[#020617]">
-        <p className="text-xs text-slate-500">© 2026 CASPOS GmbH. Alle Rechte vorbehalten.</p>
-        <nav className="sm:ml-auto flex gap-4 sm:gap-6">
-          <Link className="text-xs hover:underline underline-offset-4 text-slate-500" href="#">Impressum</Link>
-          <Link className="text-xs hover:underline underline-offset-4 text-slate-500" href="#">Datenschutz</Link>
-        </nav>
-      </footer>
-    </div>
-  )
-}
+export default async function Home() {
+  if (await isSetupNeeded()) {
+    redirect('/setup')
+  }
+
+  let user = null
+  try {
+    const supabase = await createClient()
+    const { data } = await supabase.auth.getUser()
+    user = data.user
+  } catch (e) {
+    console.error("Failed to fetch user in page.tsx:", e)
+  }
+
+  return <HomeClient initialUser={user} />
+}

shop/app/protected/layout.tsx

@@ -1,7 +1,6 @@
 import { DeployButton } from "@/components/deploy-button";
 import { EnvVarWarning } from "@/components/env-var-warning";
 import { AuthButton } from "@/components/auth-button";
-import { ThemeSwitcher } from "@/components/theme-switcher";
 import { hasEnvVars } from "@/lib/utils";
 import Link from "next/link";
 import { Suspense } from "react";
@@ -47,7 +46,6 @@ export default function ProtectedLayout({
               Supabase
             </a>
           </p>
-          <ThemeSwitcher />
         </footer>
       </div>
     </main>

shop/app/setup/page.tsx

@@ -0,0 +1,15 @@
+import { isSetupNeeded } from '@/lib/actions/setup'
+import { redirect } from 'next/navigation'
+import { SetupWizard } from '@/components/SetupWizard'
+
+export const dynamic = 'force-dynamic'
+
+export default async function SetupPage() {
+  const needed = await isSetupNeeded()
+
+  if (!needed) {
+    redirect('/')
+  }
+
+  return <SetupWizard />
+}

shop/app/wizard/page.tsx

@@ -0,0 +1,16 @@
+import { redirect } from 'next/navigation'
+
+interface PageProps {
+  searchParams: Promise<{ id?: string; orderId?: string; mode?: string }>
+}
+
+export default async function WizardPage({ searchParams }: PageProps) {
+  const params = await searchParams
+  const id = params.orderId || params.id
+  const mode = params.mode
+  const query = new URLSearchParams()
+  if (id) query.set('orderId', id)
+  if (mode) query.set('mode', mode)
+  
+  redirect(`/order?${query.toString()}`)
+}

shop/components/AsciiShaderBackground.tsx

@@ -0,0 +1,180 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+
+export function AsciiShaderBackground({ className = '' }: { className?: string }) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    let animationFrameId: number
+
+    // Minimalistisches, ruhiges ASCII-Array
+    const chars = ['•', '∘', '+', '▪', '▫', ' ']
+    const fontSize = 18
+    let cols = 0
+    let rows = 0
+
+    const mouse = { x: 0, y: 0, targetX: 0, targetY: 0 }
+    let scrollProgress = 0
+    let targetScrollProgress = 0
+
+    const getDynamicHue = (): number => {
+      try {
+        const hex = getComputedStyle(document.documentElement).getPropertyValue('--primary-custom').trim() || '#2563eb'
+        let c = hex.replace('#', '')
+        if (c.length === 3) c = c.split('').map(x => x + x).join('')
+        const r = parseInt(c.substring(0, 2), 16) / 255
+        const g = parseInt(c.substring(2, 4), 16) / 255
+        const b = parseInt(c.substring(4, 6), 16) / 255
+        const max = Math.max(r, g, b)
+        const min = Math.min(r, g, b)
+        let h = 0
+        if (max !== min) {
+          const d = max - min
+          switch (max) {
+            case r: h = (g - b) / d + (g < b ? 6 : 0); break
+            case g: h = (b - r) / d + 2; break
+            case b: h = (r - g) / d + 4; break
+          }
+          h /= 6
+        }
+        return Math.round(h * 360)
+      } catch (e) {
+        return 217
+      }
+    }
+
+    const resize = () => {
+      const width = window.innerWidth
+      const height = window.innerHeight
+      const dpr = window.devicePixelRatio || 1
+
+      canvas.width = width * dpr
+      canvas.height = height * dpr
+      ctx.scale(dpr, dpr)
+
+      cols = Math.ceil(width / fontSize)
+      rows = Math.ceil(height / fontSize)
+
+      if (mouse.x === 0 && mouse.y === 0) {
+        mouse.x = width / 2
+        mouse.y = height / 2
+        mouse.targetX = width / 2
+        mouse.targetY = height / 2
+      }
+    }
+
+    const onPointerMove = (e: PointerEvent) => {
+      mouse.targetX = e.clientX
+      mouse.targetY = e.clientY
+    }
+
+    const onScroll = () => {
+      const maxScroll = Math.max(
+        document.body.scrollHeight - window.innerHeight,
+        1
+      )
+      targetScrollProgress = Math.min(Math.max(window.scrollY / maxScroll, 0), 1)
+    }
+
+    resize()
+    window.addEventListener('resize', resize)
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('scroll', onScroll, { passive: true })
+
+    const render = (time: number) => {
+      mouse.x += (mouse.targetX - mouse.x) * 0.05
+      mouse.y += (mouse.targetY - mouse.y) * 0.05
+      scrollProgress += (targetScrollProgress - scrollProgress) * 0.05
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+      // Beim Scrollen sofort ausblenden (vollständig weg ab 150px Scroll-Tiefe)
+      const scrollFade = Math.max(1 - (window.scrollY / 150), 0)
+      if (scrollFade <= 0) {
+        animationFrameId = requestAnimationFrame(render)
+        return
+      }
+
+      ctx.font = `${fontSize}px monospace`
+      ctx.textAlign = 'center'
+      ctx.textBaseline = 'middle'
+
+      const timeSec = time * 0.001
+      const activeHue = getDynamicHue()
+
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          const x = c * fontSize + fontSize / 2
+          const y = r * fontSize + fontSize / 2
+
+          const dx = x - mouse.x
+          const dy = y - mouse.y
+          const dist = Math.sqrt(dx * dx + dy * dy)
+
+          const mouseInfluence = Math.exp(-dist / 250)
+          const mouseDistortion = (Math.atan2(dy, dx) + (dx + dy) * 0.003) * mouseInfluence * 3.0
+
+          const waveX = Math.sin(c * 0.08 + timeSec * 0.8 + mouseDistortion)
+          const waveY = Math.cos(r * 0.08 + timeSec * 0.6 + mouseDistortion)
+          const flowValue = Math.sin(waveX + waveY + (c + r) * 0.04 + timeSec * 0.4)
+
+          const normalizedFlow = (flowValue + 1) * 0.5
+          const charIndex = Math.floor(normalizedFlow * chars.length) % chars.length
+          const char = chars[charIndex]
+
+          if (char === ' ') continue
+
+          const blendFactor = Math.min(Math.max(mouseInfluence * 0.85 + normalizedFlow * 0.15, 0), 1)
+          const alpha = (0.35 + blendFactor * 0.6) * scrollFade
+          const lightness = 40 + Math.round(blendFactor * 50)
+
+          ctx.fillStyle = `hsl(${activeHue} 80% ${lightness}% / ${alpha.toFixed(2)})`
+          ctx.fillText(char, x, y)
+        }
+      }
+
+      animationFrameId = requestAnimationFrame(render)
+    }
+
+    animationFrameId = requestAnimationFrame(render)
+
+    return () => {
+      window.removeEventListener('resize', resize)
+      window.removeEventListener('pointermove', onPointerMove)
+      window.removeEventListener('scroll', onScroll)
+      cancelAnimationFrame(animationFrameId)
+    }
+  }, [])
+
+  return (
+    <div
+      className={`fixed inset-0 pointer-events-none z-0 overflow-hidden ${className}`}
+      style={{
+        maskImage: 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 250px, rgba(0,0,0,0) 500px)',
+        WebkitMaskImage: 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 250px, rgba(0,0,0,0) 500px)'
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        className="absolute inset-0 w-full h-full block will-change-transform pointer-events-none"
+      />
+      <div
+        className="absolute inset-0 w-full h-full pointer-events-none opacity-60"
+        style={{
+          backgroundSize: '40px 40px',
+          backgroundImage: `
+            linear-gradient(to right, var(--card-border-glow, rgba(37, 99, 235, 0.15)) 1px, transparent 1px),
+            linear-gradient(to bottom, var(--card-border-glow, rgba(37, 99, 235, 0.15)) 1px, transparent 1px)
+          `
+        }}
+      />
+    </div>
+  )
+}

shop/components/DemoWrapper.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface DemoWrapperProps {
+  children: React.ReactNode;
+}
+
+export function DemoWrapper({ children }: DemoWrapperProps) {
+  const [showDemo, setShowDemo] = useState<boolean>(true);
+  const [isMounted, setIsMounted] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+    const checkDemo = () => {
+      const disabled = localStorage.getItem('demo_banner_disabled') === 'true';
+      setShowDemo(!disabled);
+    };
+
+    checkDemo();
+    window.addEventListener('storage_demo_changed', checkDemo);
+    return () => window.removeEventListener('storage_demo_changed', checkDemo);
+  }, []);
+
+  if (!isMounted) {
+    return <>{children}</>;
+  }
+
+  if (!showDemo) {
+    return null;
+  }
+
+  return <>{children}</>;
+}

shop/components/HeaderWrapper.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { DemoWrapper } from "./DemoWrapper";
+
+interface HeaderWrapperProps {
+  navbar: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function HeaderWrapper({ navbar, children }: HeaderWrapperProps) {
+  const pathname = usePathname();
+  const isAdmin = pathname?.startsWith("/admin");
+  const isSetup = pathname === "/setup";
+
+  if (isAdmin || isSetup) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen bg-slate-50 text-slate-900 dark:bg-[#020617] dark:text-white">
+      {/* Demo Banner */}
+      <DemoWrapper>
+        <div
+          id="demo-banner"
+          className="bg-amber-500/10 border-b border-amber-500/20 py-2 px-4 text-center text-xs text-amber-600 dark:text-amber-400 font-medium tracking-wide z-50"
+        >
+          ⚠️ Dies ist eine **Demo-Webseite (Dummy-Shop)**. Es werden keine echten Bestellungen verarbeitet oder Zahlungen abgewickelt.
+        </div>
+      </DemoWrapper>
+
+      {navbar}
+      
+      <main className="flex-1">
+        {children}
+      </main>
+    </div>
+  );
+}

shop/components/HomeClient.tsx

@@ -0,0 +1,281 @@
+"use client"
+
+import { useState, useEffect } from 'react'
+import { createClient } from '@/lib/supabase/client'
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
+import { motion } from 'framer-motion'
+import { type User } from '@supabase/supabase-js'
+import {
+  ArrowRight,
+  CheckCircle2,
+  MessageSquare,
+  BookOpen,
+  Layers,
+  LifeBuoy,
+  Users,
+  ClipboardList,
+  Zap,
+  ArrowUpRight,
+  ShieldCheck,
+  Calendar,
+  Sparkles,
+  Activity
+} from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog'
+
+import { AsciiShaderBackground } from '@/components/AsciiShaderBackground'
+import { ProcessSteps } from '@/components/ProcessSteps'
+import { ScrollIndicator } from '@/components/ScrollIndicator'
+import { WorkspaceZentrale } from '@/components/WorkspaceZentrale'
+import { useTheme } from '@/components/ThemeProvider'
+
+interface HomeClientProps {
+  initialUser: User | null
+}
+
+export function HomeClient({ initialUser }: HomeClientProps) {
+  const { branding } = useTheme()
+  const [user, setUser] = useState<User | null>(initialUser)
+  const [mounted, setMounted] = useState(false)
+  const [calendarOpen, setCalendarOpen] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+    const supabase = createClient()
+
+    // Listen to client-side auth state changes to stay in sync
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
+      setUser(session?.user ?? null)
+    })
+
+    return () => {
+      subscription.unsubscribe()
+    }
+  }, [])
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.15
+      }
+    }
+  }
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        type: "spring" as const,
+        stiffness: 100,
+        damping: 15
+      }
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-transparent text-slate-100 overflow-hidden relative selection:bg-blue-500/30 selection:text-blue-200">
+      <AsciiShaderBackground />
+
+
+
+      {/* Hero Section */}
+      <section className="w-full pt-16 pb-12 md:pt-28 md:pb-20 px-4 relative flex flex-col items-center">
+        <motion.div
+          initial="hidden"
+          animate="visible"
+          variants={containerVariants}
+          className="container max-w-6xl mx-auto flex flex-col items-center text-center space-y-8"
+        >
+
+          {/* Headline */}
+          <div className="space-y-4 max-w-4xl">
+            <motion.h1
+              variants={itemVariants}
+              className="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl/tight text-white"
+            >
+              CASPOS Software <span className="text-blue-500 font-black">Lizenzen & Module</span>
+            </motion.h1>
+            <motion.p
+              variants={itemVariants}
+              className="mx-auto max-w-[750px] text-slate-400 text-base sm:text-lg md:text-xl font-normal leading-relaxed"
+            >
+              Erwerben und verwalten Sie Lizenzen für CASPOS Kassensysteme.
+            </motion.p>
+          </div>
+
+          {/* Hero CTAs */}
+          <motion.div
+            variants={itemVariants}
+            className="flex flex-col sm:flex-row items-center justify-center gap-4 w-full max-w-md pt-4"
+          >
+            <Link href="/order" className="w-full sm:w-auto">
+              <Button size="lg" className="w-full sm:w-auto h-12 px-8 text-base font-semibold bg-blue-600 hover:bg-blue-500 text-white border border-blue-700/50 rounded-xl transition-all duration-200">
+                Lizenz anfragen <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+            </Link>
+            <Link href="https://caspos.de/kontakt/" target="_blank" rel="noopener noreferrer" className="w-full sm:w-auto">
+              <Button size="lg" variant="outline" className="w-full sm:w-auto h-12 px-8 text-base font-semibold transition-all duration-300 hover:bg-white/5 border-slate-800 hover:border-slate-700 text-slate-300 hover:text-white rounded-xl backdrop-blur-sm">
+                Fragen? Kontakt
+              </Button>
+            </Link>
+          </motion.div>
+
+          {/* Quick Access Actions Bar */}
+          {mounted && user && (
+            <motion.div
+              variants={itemVariants}
+              className="w-full max-w-3xl pt-12"
+            >
+              <div className="relative p-6 rounded-2xl border border-slate-800 bg-slate-900/40 backdrop-blur-md shadow-lg">
+                <p className="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-5 text-left sm:text-center px-2">
+                  Mein Dashboard Schnellzugriff
+                </p>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <Link href="/my-customers" className="group">
+                    <motion.div
+                      whileHover={{ y: -2 }}
+                      whileTap={{ scale: 0.98 }}
+                      className="flex items-center justify-between p-4 rounded-xl border border-slate-800 bg-slate-950 hover:bg-slate-900 hover:border-slate-700 transition-all duration-200 h-full"
+                    >
+                      <div className="flex items-center gap-3">
+                        <div className="p-2.5 rounded-lg bg-blue-500/10 text-blue-400 group-hover:bg-blue-500/20 group-hover:text-blue-300 transition-colors shrink-0">
+                          <Users className="w-5 h-5" />
+                        </div>
+                        <div className="text-left">
+                          <span className="block font-bold text-sm text-slate-200 group-hover:text-white transition-colors">Kundenliste</span>
+                          <span className="block text-xs text-slate-500 group-hover:text-slate-400 transition-colors">Verwalten</span>
+                        </div>
+                      </div>
+                      <ArrowUpRight className="w-4 h-4 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all shrink-0" />
+                    </motion.div>
+                  </Link>
+
+                  <Link href="/my-orders" className="group">
+                    <motion.div
+                      whileHover={{ y: -2 }}
+                      whileTap={{ scale: 0.98 }}
+                      className="flex items-center justify-between p-4 rounded-xl border border-slate-800 bg-slate-950 hover:bg-slate-900 hover:border-slate-700 transition-all duration-200 h-full"
+                    >
+                      <div className="flex items-center gap-3">
+                        <div className="p-2.5 rounded-lg bg-blue-500/10 text-blue-400 group-hover:bg-blue-500/20 group-hover:text-blue-300 transition-colors shrink-0">
+                          <ClipboardList className="w-5 h-5" />
+                        </div>
+                        <div className="text-left">
+                          <span className="block font-bold text-sm text-slate-200 group-hover:text-white transition-colors">Bestellungen</span>
+                          <span className="block text-xs text-slate-500 group-hover:text-slate-400 transition-colors">Status einsehen</span>
+                        </div>
+                      </div>
+                      <ArrowUpRight className="w-4 h-4 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all shrink-0" />
+                    </motion.div>
+                  </Link>
+
+                  <button type="button" onClick={() => setCalendarOpen(true)} className="group text-left w-full">
+                    <motion.div
+                      whileHover={{ y: -2 }}
+                      whileTap={{ scale: 0.98 }}
+                      className="flex items-center justify-between p-4 rounded-xl border border-slate-800 bg-slate-950 hover:bg-slate-900 hover:border-slate-700 transition-all duration-200 h-full"
+                    >
+                      <div className="flex items-center gap-3">
+                        <div className="p-2.5 rounded-lg bg-blue-500/10 text-blue-400 group-hover:bg-blue-500/20 group-hover:text-blue-300 transition-colors shrink-0">
+                          <Calendar className="w-5 h-5" />
+                        </div>
+                        <div className="text-left">
+                          <div className="flex items-center gap-1.5">
+                            <span className="block font-bold text-sm text-slate-200 group-hover:text-white transition-colors">Termine</span>
+                            <span className="px-1.5 py-0.5 text-[10px] font-medium bg-amber-500/10 text-amber-400 border border-amber-500/20 rounded-md">Geplant</span>
+                          </div>
+                          <span className="block text-xs text-slate-500 group-hover:text-slate-400 transition-colors">Terminkalender</span>
+                        </div>
+                      </div>
+                      <ArrowUpRight className="w-4 h-4 text-slate-600 group-hover:text-blue-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all shrink-0" />
+                    </motion.div>
+                  </button>
+                </div>
+              </div>
+            </motion.div>
+          )}
+
+        </motion.div>
+      </section>
+
+      {/* Dialog / Popup für Termin-Kalender (Geplant) */}
+      <Dialog open={calendarOpen} onOpenChange={setCalendarOpen}>
+        <DialogContent className="bg-slate-900 border-slate-800 text-slate-100 max-w-md">
+          <DialogHeader>
+            <div className="flex items-center gap-3 mb-2">
+              <div className="p-2.5 rounded-xl bg-blue-500/10 text-blue-400 border border-blue-500/20">
+                <Calendar className="w-6 h-6" />
+              </div>
+              <div>
+                <DialogTitle className="text-xl font-bold text-white flex items-center gap-2">
+                  Termin-Kalender
+                  <span className="px-2 py-0.5 text-xs font-semibold bg-amber-500/10 text-amber-400 border border-amber-500/20 rounded-full">
+                    In Planung
+                  </span>
+                </DialogTitle>
+              </div>
+            </div>
+            <DialogDescription className="text-slate-400 text-sm leading-relaxed pt-2">
+              Der Termin-Kalender bietet in Kürze eine Übersicht für anstehende Schulungen, Online- & Vor-Ort-Workshops sowie Termine für Blauer-Mittwoch-Partner zur direkten Anmeldung.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="p-4 my-2 rounded-xl bg-slate-950 border border-slate-800 text-xs text-slate-400 space-y-2">
+            <div className="flex items-center justify-between text-slate-300 font-medium">
+              <span>Geplante Features & Angebote:</span>
+            </div>
+            <ul className="list-disc list-inside space-y-1 text-slate-400">
+              <li>Anmeldung zu Online- & Vor-Ort-Workshops</li>
+              <li>Anstehende Schulungstermine auf einen Blick</li>
+              <li>Spezielle Schulungen für Blauer-Mittwoch-Partner</li>
+              <li>Kalender-Export (.ics / Google / Outlook)</li>
+            </ul>
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setCalendarOpen(false)}
+              className="w-full sm:w-auto border-slate-700 bg-slate-800 text-slate-200 hover:bg-slate-700 hover:text-white"
+            >
+              Schließen
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Grid of modules / Workspace-Zentrale */}
+      <WorkspaceZentrale />
+
+      {/* Stepper info */}
+      <ProcessSteps />
+
+
+      {/* Footer */}
+      <footer className="w-full border-t border-slate-900 bg-slate-950 py-8 px-4 md:px-6 relative z-10">
+        <div className="container max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+          <p className="text-xs text-slate-500">
+            {branding?.developerFooter || (branding?.companyName ? `© ${new Date().getFullYear()} ${branding.companyName}. Alle Rechte vorbehalten.` : `© ${new Date().getFullYear()} B2B Shop. Alle Rechte vorbehalten.`)}
+          </p>
+          <nav className="flex gap-6">
+            <Link className="text-xs text-slate-500 hover:text-slate-300 transition-colors" href="/impressum">Impressum</Link>
+            <Link className="text-xs text-slate-500 hover:text-slate-300 transition-colors" href="/datenschutz">Datenschutz</Link>
+          </nav>
+        </div>
+      </footer>
+    </div>
+  )
+}

shop/components/Navbar.tsx

@@ -0,0 +1,60 @@
+import { createServerClient } from "@supabase/ssr";
+import { cookies } from "next/headers";
+import { NavbarClient } from "@/components/NavbarClient";
+
+export async function Navbar() {
+  const cookieStore = await cookies();
+
+  const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseAnonKey = process.env.SUPABASE_ANON_KEY || process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  if (!supabaseUrl || !supabaseAnonKey) {
+    // Falls keine Env-Vars da sind, leeren User an Client übergeben
+    return <NavbarClient user={null} />;
+  }
+
+  const supabase = createServerClient(
+    supabaseUrl,
+    supabaseAnonKey,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll();
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options),
+            );
+          } catch {
+            // Kann in Server Components ignoriert werden, da dort keine Cookies gesetzt werden können
+          }
+        },
+      },
+      cookieOptions: {
+        name: "webshop-auth-token",
+      },
+    },
+  );
+
+  let user = null;
+  let role = "partner";
+  try {
+    const { data } = await supabase.auth.getUser();
+    user = data.user;
+    if (user) {
+      const { data: dbUser } = await supabase
+        .from("users")
+        .select("role")
+        .eq("id", user.id)
+        .single();
+      if (dbUser) {
+        role = dbUser.role;
+      }
+    }
+  } catch (error) {
+    console.error("Fehler beim Abrufen des Users in Navbar:", error);
+  }
+
+  return <NavbarClient user={user} role={role} />;
+}

shop/components/NavbarClient.tsx

@@ -0,0 +1,311 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { createBrowserClient } from "@supabase/ssr";
+import { type User } from "@supabase/supabase-js";
+import { Rocket, Menu, X, User as UserIcon, LogOut } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { signOut } from "@/lib/actions/auth";
+import { resolveSupabaseUrl } from "@/lib/utils";
+import { DemoWrapper } from "./DemoWrapper";
+import { useTheme } from "@/components/ThemeProvider";
+
+interface NavbarClientProps {
+  user: User | null;
+  role?: string;
+}
+
+export function NavbarClient({ user, role = "partner" }: NavbarClientProps) {
+  const router = useRouter();
+  const { branding } = useTheme();
+  const [currentUser, setCurrentUser] = useState<User | null>(user);
+  const [userRole, setUserRole] = useState<string>(role);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [pathname, setPathname] = useState("/");
+
+  useEffect(() => {
+    setPathname(window.location.pathname);
+  }, []);
+
+  useEffect(() => {
+    setCurrentUser(user);
+    setUserRole(role);
+  }, [user, role]);
+
+  // Supabase URL & Anon Key auslesen (für Browser-Client)
+  const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseAnonKey = process.env.SUPABASE_ANON_KEY || process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  // Browser Client inline erstellen
+  const supabase = createBrowserClient(
+    resolveSupabaseUrl(supabaseUrl)!,
+    supabaseAnonKey!,
+    {
+      cookieOptions: {
+        name: "webshop-auth-token",
+      },
+    }
+  );
+
+  // Auf Auth-Statusänderungen reagieren
+  useEffect(() => {
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange(async (event, session) => {
+      setCurrentUser(session?.user ?? null);
+      if (session?.user) {
+        try {
+          const { data } = await supabase
+            .from("users")
+            .select("role")
+            .eq("id", session.user.id)
+            .single();
+          if (data) {
+            setUserRole(data.role);
+          }
+        } catch {
+          setUserRole("partner");
+        }
+      } else {
+        setUserRole("partner");
+      }
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [supabase]);
+
+  const handleSignOut = async () => {
+    try {
+      await signOut();
+    } catch (e) {
+      console.error("Fehler beim Server-Signout:", e);
+    }
+    try {
+      await supabase.auth.signOut();
+    } catch (e) {
+      console.error("Fehler beim Client-Signout:", e);
+    }
+    setCurrentUser(null);
+    setIsMobileMenuOpen(false);
+    router.push("/");
+    router.refresh();
+  };
+
+  return (
+    <>
+      <header className="px-4 lg:px-6 h-16 flex items-center justify-between border-b border-white/5 backdrop-blur-md sticky top-0 z-50 bg-[#020617]/85">
+        <Link className="flex items-center justify-center gap-2 group" href="/">
+          {branding?.logoUrl ? (
+            <img src={branding.logoUrl} alt={branding.companyName || "Logo"} className="h-8 max-w-[180px] object-contain" />
+          ) : branding?.companyName ? (
+            <span className="font-extrabold text-base tracking-tight text-white group-hover:text-primary transition">
+              {branding.companyName}
+            </span>
+          ) : (
+            <img src="/assets/CASPOS-logo.webp" alt="CASPOS Logo" className="h-8" />
+          )}
+          <DemoWrapper>
+            <span className="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
+              Demo
+            </span>
+          </DemoWrapper>
+        </Link>
+
+        {/* Desktop Navigation */}
+        <nav className="hidden md:flex gap-6 items-center">
+          <Link
+            className="text-sm font-medium text-slate-300 hover:text-primary transition-colors"
+            href="https://support.teamzone.softengine.de"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Zulip
+          </Link>
+          <Link
+            className="text-sm font-medium text-slate-300 hover:text-primary transition-colors"
+            href="https://wiki.caspos.de"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Wiki
+          </Link>
+          <Link
+            className="text-sm font-medium text-slate-300 hover:text-primary transition-colors"
+            href="https://support.caspos.de"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Support
+          </Link>
+
+          <div className="h-4 w-px bg-white/10 mx-2" />
+
+          {currentUser ? (
+            <div
+              className="relative"
+              onMouseEnter={() => setOpen(true)}
+              onMouseLeave={() => setOpen(false)}
+            >
+              <Button
+                variant="outline"
+                className="border-white/10 hover:bg-white/5 gap-2 text-white"
+              >
+                <UserIcon className="w-4 h-4 text-primary" />
+                <span className="max-w-[120px] truncate">{currentUser.email}</span>
+              </Button>
+              {open && (
+                <div className="absolute right-0 mt-2 w-48 rounded-xl border p-2 shadow-xl z-50 bg-white text-slate-900 border-slate-200 dark:bg-slate-950 dark:text-white dark:border-white/10 before:absolute before:-top-3 before:left-0 before:w-full before:h-3">
+                  <div className="px-3 py-1.5 text-[11px] truncate border-b text-slate-400 border-slate-100 dark:border-white/5 mb-1">
+                    {currentUser.email}
+                  </div>
+                  {userRole === "admin" ? (
+                    <>
+                      <Link
+                        href="/admin/einstellungen"
+                        onClick={() => setOpen(false)}
+                        className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
+                      >
+                        Admin
+                      </Link>
+                    </>
+                  ) : (
+                    <>
+                      <Link
+                        href="/account-kunden"
+                        onClick={() => setOpen(false)}
+                        className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
+                      >
+                        Account Einstellungen
+                      </Link>
+                      <Link
+                        href="/my-customers"
+                        onClick={() => setOpen(false)}
+                        className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
+                      >
+                        Kundenliste
+                      </Link>
+                      <Link
+                        href="/my-orders"
+                        onClick={() => setOpen(false)}
+                        className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
+                      >
+                        Bestellungen
+                      </Link>
+                    </>
+                  )}
+                  <hr className="my-1 border-slate-100 dark:border-white/5" />
+                  <button
+                    onClick={handleSignOut}
+                    className="w-full text-left px-3 py-2 text-sm font-bold text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-lg"
+                  >
+                    Abmelden
+                  </button>
+                </div>
+              )}
+
+            </div>
+          ) : (
+            <Button asChild className="bg-primary hover:bg-primary/95 text-white">
+              <Link href={`/auth/login?next=${pathname}`}>Anmelden</Link>
+            </Button>
+          )}
+        </nav>
+
+        {/* Mobile Hamburger Trigger */}
+        <button
+          className="md:hidden p-2 text-slate-300 hover:text-white focus:outline-none"
+          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+        >
+          {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+        </button>
+      </header>
+
+      {/* Mobile Menu Panel */}
+      {isMobileMenuOpen && (
+        <div className="md:hidden fixed inset-x-0 top-16 bg-[#020617] border-b border-white/5 z-40 py-4 px-6 flex flex-col gap-4 animate-in slide-in-from-top duration-200">
+          <Link
+            className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
+            href="/order"
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
+            Bestellen
+          </Link>
+          <Link
+            className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
+            href="https://caspos.de"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
+            Wiki
+          </Link>
+          <Link
+            className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
+            href="https://caspos.de"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => setIsMobileMenuOpen(false)}
+          >
+            Support
+          </Link>
+
+          {currentUser && (
+            <>
+              <div className="h-px bg-white/5 my-1" />
+              <div className="text-xs text-slate-500 px-1">Mein Account ({currentUser.email})</div>
+              {userRole === "admin" ? (
+                <>
+                  <Link
+                    className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
+                    href="/admin/einstellungen"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                  >
+                    Admin
+                  </Link>
+                </>
+              ) : (
+                <>
+                  <Link
+                    className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
+                    href="/my-customers"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                  >
+                    Kundenliste
+                  </Link>
+                  <Link
+                    className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
+                    href="/my-orders"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                  >
+                    Bestellungen
+                  </Link>
+                </>
+              )}
+            </>
+          )}
+
+          <div className="h-px bg-white/5 my-1" />
+
+          {currentUser ? (
+            <Button
+              variant="destructive"
+              className="w-full flex items-center justify-center gap-2"
+              onClick={handleSignOut}
+            >
+              <LogOut className="w-4 h-4" /> Abmelden
+            </Button>
+          ) : (
+            <Button asChild className="w-full bg-primary hover:bg-primary/95 text-white" onClick={() => setIsMobileMenuOpen(false)}>
+              <Link href={`/auth/login?next=${pathname}`}>Anmelden</Link>
+            </Button>
+          )}
+        </div>
+      )}
+    </>
+  );
+}

shop/components/ProcessSteps.tsx

@@ -0,0 +1,155 @@
+'use client'
+
+import React from 'react'
+import { motion } from 'framer-motion'
+
+interface Step {
+  number: string
+  title: string
+  description: string
+}
+
+const steps: Step[] = [
+  {
+    number: '1',
+    title: 'Kunde wählen',
+    description: 'Gewünschten Kunden auswählen, der die Lizenz erhalten soll.'
+  },
+  {
+    number: '2',
+    title: 'Lizenz wählen',
+    description: 'Gewünschte Lizenzen für den Kunden auswählen und die Bestellung abschließen.'
+  },
+  {
+    number: '3',
+    title: 'Live gehen',
+    description: 'Nach dem Erhalt der Lizenz direkt live gehen und durchstarten.'
+  }
+]
+
+const containerVariants = {
+  hidden: {},
+  visible: {
+    transition: {
+      delayChildren: 0.2,
+      staggerChildren: 0.35
+    }
+  }
+}
+
+const stepVariants = {
+  hidden: {
+    opacity: 0,
+    y: 20
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      type: 'spring' as const,
+      stiffness: 70,
+      damping: 16
+    }
+  }
+}
+
+export function ProcessSteps() {
+  return (
+    <section className="w-full py-16 px-4 relative z-10">
+      <div className="container max-w-5xl mx-auto flex flex-col items-center">
+        {/* Section Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-80px' }}
+          transition={{ type: 'spring' as const, stiffness: 60, damping: 15 }}
+          className="text-center space-y-3 mb-16 max-w-2xl"
+        >
+          <h2 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight">
+            Wie funktioniert die Bereitstellung?
+          </h2>
+          <p className="text-slate-400 text-base sm:text-lg leading-relaxed">
+            In nur drei einfachen Schritten richten Sie CASPOS Lizenzen für Ihre Kunden ein.
+          </p>
+        </motion.div>
+
+        {/* Horizontale Timeline */}
+        <div className="relative w-full">
+          {/* Basis-Linie exakt zwischen Schritt 1 und 3 */}
+          <div className="hidden md:block absolute top-6 left-[16.6%] right-[16.6%] h-[2px] bg-white/10 z-0 rounded-full" />
+
+          {/* Animierte, aufgeladene Linie (sky-500) */}
+          <motion.div
+            initial={{ scaleX: 0 }}
+            whileInView={{ scaleX: 1 }}
+            viewport={{ once: true, margin: '-50px' }}
+            transition={{
+              duration: 1.5,
+              ease: 'easeInOut',
+              delay: 0.2
+            }}
+            className="hidden md:block absolute top-6 left-[16.6%] right-[16.6%] h-[2px] bg-sky-500 origin-left z-0 rounded-full shadow-[0_0_12px_rgba(14,165,233,0.8)]"
+          />
+
+          {/* 3 Schritte Nebeneinander */}
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, margin: '-50px' }}
+            className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-6 w-full relative z-10"
+          >
+            {steps.map((step, index) => {
+              const isLiveStep = index === 2
+
+              return (
+                <motion.div
+                  key={step.number}
+                  variants={stepVariants}
+                  className="group flex flex-col items-center text-center space-y-4 cursor-pointer relative"
+                >
+                  {/* Nummer im runden Kreis auf der Linie */}
+                  <div className="relative">
+                    <motion.div
+                      whileHover={{ scale: 1.15 }}
+                      transition={{ type: 'spring' as const, stiffness: 300, damping: 20 }}
+                      className="w-12 h-12 rounded-full bg-slate-950 border-2 border-slate-700 text-slate-300 font-extrabold text-lg flex items-center justify-center group-hover:border-sky-400 group-hover:text-sky-400 group-hover:bg-slate-900 group-hover:shadow-[0_0_20px_rgba(56,189,248,0.4)] transition-all duration-300 z-10 relative"
+                    >
+                      {step.number}
+                    </motion.div>
+
+                    {/* Pulsierender Ziel-Ring bei Schritt 3 */}
+                    {isLiveStep && (
+                      <motion.div
+                        initial={{ opacity: 0, scale: 0.8 }}
+                        whileInView={{ opacity: 1, scale: 1 }}
+                        viewport={{ once: true }}
+                        transition={{ delay: 1.6 }}
+                        className="absolute inset-0 rounded-full border-2 border-emerald-400/60 pointer-events-none animate-ping"
+                      />
+                    )}
+                  </div>
+
+                  {/* Text-Inhalt zentriert ohne Boxen-Hintergrund */}
+                  <div className="space-y-2 max-w-[280px]">
+                    <h3 className="text-xl font-bold text-white group-hover:text-sky-400 transition-colors duration-300 flex items-center justify-center gap-2">
+                      {step.title}
+                      {isLiveStep && (
+                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
+                          LIVE
+                        </span>
+                      )}
+                    </h3>
+                    <p className="text-slate-400 text-sm leading-relaxed">
+                      {step.description}
+                    </p>
+                  </div>
+                </motion.div>
+              )
+            })}
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  )
+}

shop/components/ScrollIndicator.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import React from 'react'
+import { motion, useScroll, useSpring } from 'framer-motion'
+
+export function ScrollIndicator() {
+  const { scrollYProgress } = useScroll()
+  const scaleX = useSpring(scrollYProgress, {
+    stiffness: 100,
+    damping: 30,
+    restDelta: 0.001
+  })
+
+  return (
+    <motion.div
+      className="fixed top-0 left-0 right-0 h-[3px] origin-left z-50 pointer-events-none"
+      style={{
+        scaleX,
+        background: 'linear-gradient(90deg, var(--primary-custom, #2563eb) 0%, var(--accent-custom, #38bdf8) 100%)',
+        boxShadow: '0 0 12px var(--primary-custom, rgba(37,99,235,0.8))'
+      }}
+    />
+  )
+}

shop/components/SetupWizard.tsx

@@ -0,0 +1,679 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Sparkles, ShieldCheck, Mail, ArrowRight, Loader2, Check, Lock, Building, User, MapPin, Receipt, Palette, Send } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { createClient } from '@/lib/supabase/client'
+import { completeSetup, testSmtpConfig } from '@/lib/actions/setup'
+import { ColorThemePicker } from '@/components/admin/ColorThemePicker'
+
+export function SetupWizard() {
+  const router = useRouter()
+  const [step, setStep] = useState(1)
+  const [loading, setLoading] = useState(false)
+  const [errorMsg, setErrorMsg] = useState('')
+  const [testSmtpLoading, setTestSmtpLoading] = useState(false)
+  const [testSmtpResult, setTestSmtpResult] = useState<{ success: boolean; message: string } | null>(null)
+
+  // Step 2: Admin Account
+  const [adminForm, setAdminForm] = useState({
+    email: '',
+    password: '',
+    confirmPassword: '',
+    firstName: '',
+    lastName: '',
+  })
+
+  // Step 3: Firmendaten & Rechnungsadresse
+  const [brandingForm, setBrandingForm] = useState({
+    companyName: '',
+    street: '',
+    zip: '',
+    city: '',
+    billingStreet: '',
+    billingZip: '',
+    billingCity: '',
+    sameBillingAddress: true,
+    colorScheme: 'modern_blue',
+    primaryColor: '#2563eb',
+    accentColor: '#38bdf8',
+  })
+
+  // Step 5: SMTP Config
+  const [smtpForm, setSmtpForm] = useState({
+    host: '',
+    port: '587',
+    secure: false,
+    user: '',
+    pass: '',
+  })
+
+  // Validations
+  const isAdminFormValid =
+    adminForm.email.includes('@') &&
+    adminForm.password.length >= 6 &&
+    adminForm.password === adminForm.confirmPassword &&
+    adminForm.firstName.trim().length > 0 &&
+    adminForm.lastName.trim().length > 0
+
+  const isCompanyFormValid =
+    brandingForm.companyName.trim().length > 0 &&
+    brandingForm.street.trim().length > 0 &&
+    brandingForm.zip.trim().length > 0 &&
+    brandingForm.city.trim().length > 0 &&
+    (brandingForm.sameBillingAddress ||
+      (brandingForm.billingStreet.trim().length > 0 &&
+        brandingForm.billingZip.trim().length > 0 &&
+        brandingForm.billingCity.trim().length > 0))
+
+  const handleTestSmtp = async () => {
+    setTestSmtpLoading(true)
+    setTestSmtpResult(null)
+    const res = await testSmtpConfig(
+      {
+        host: smtpForm.host,
+        port: Number(smtpForm.port),
+        secure: smtpForm.secure,
+        user: smtpForm.user,
+        pass: smtpForm.pass,
+      },
+      adminForm.email
+    )
+    setTestSmtpResult(res)
+    setTestSmtpLoading(false)
+  }
+
+  const handleFinishSetup = async () => {
+    if (!isAdminFormValid || !isCompanyFormValid) return
+    setLoading(true)
+    setErrorMsg('')
+
+    try {
+      const res = await completeSetup(
+        {
+          email: adminForm.email,
+          password: adminForm.password,
+          companyName: brandingForm.companyName,
+          firstName: adminForm.firstName,
+          lastName: adminForm.lastName,
+        },
+        {
+          street: brandingForm.street,
+          zip: brandingForm.zip,
+          city: brandingForm.city,
+          billingStreet: brandingForm.billingStreet,
+          billingZip: brandingForm.billingZip,
+          billingCity: brandingForm.billingCity,
+          sameBillingAddress: brandingForm.sameBillingAddress,
+          colorScheme: brandingForm.colorScheme,
+          primaryColor: brandingForm.primaryColor,
+          accentColor: brandingForm.accentColor,
+        },
+        {
+          host: smtpForm.host,
+          port: Number(smtpForm.port),
+          secure: smtpForm.secure,
+          user: smtpForm.user,
+          pass: smtpForm.pass,
+        }
+      )
+
+      if (!res.success) {
+        setErrorMsg(res.error || 'Fehler beim Setup.')
+        setLoading(false)
+        return
+      }
+
+      // Setup erfolgreich – Weiterleitung zur Login-Seite
+      router.push('/auth/login?setup=success')
+      router.refresh()
+    } catch (e: any) {
+      setErrorMsg(e.message || 'Ein unerwarteter Fehler ist aufgetreten.')
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-[#020617] text-white flex flex-col items-center justify-center p-4 relative overflow-hidden">
+      {/* Background Glow */}
+      <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] rounded-full bg-blue-500/10 blur-[120px]" />
+      <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] rounded-full bg-purple-500/10 blur-[120px]" />
+
+      <div className="w-full max-w-2xl relative z-10 my-8">
+        {/* Step Indicator Header */}
+        <div className="flex items-center justify-between mb-6 px-2">
+          <div className="flex items-center gap-2">
+            <span className="text-xl font-bold tracking-tight text-blue-400">B2B Shop</span>
+            <span className="text-xs px-2.5 py-0.5 rounded-full bg-slate-900 text-slate-400 border border-slate-800 font-medium">made by hephex</span>
+          </div>
+          <div className="flex gap-1.5">
+            {[1, 2, 3, 4, 5].map((s) => (
+              <div
+                key={s}
+                className={`h-1.5 rounded-full transition-all duration-300 ${s === step ? 'w-8 bg-blue-500' : 'w-2 bg-slate-800'
+                  }`}
+              />
+            ))}
+          </div>
+        </div>
+
+        <AnimatePresence mode="wait">
+          {/* STEP 1: Willkommen */}
+          {step === 1 && (
+            <motion.div
+              key="step1"
+              initial={{ opacity: 0, y: 15 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -15 }}
+              className="glass-dark border border-white/10 rounded-3xl p-8 space-y-6 shadow-2xl"
+            >
+              <div className="w-16 h-16 rounded-2xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-400 mx-auto shadow-inner">
+                <Sparkles className="w-8 h-8 animate-pulse" />
+              </div>
+
+              <div className="text-center space-y-2">
+                <h1 className="text-3xl font-extrabold tracking-tight">B2B Shop made by hephex</h1>
+                <p className="text-slate-400 leading-relaxed text-sm">
+                  Richten Sie Ihren persönlichen Lizenz- und Anfrage-Shop ein. Wir konfigurieren Administrator-Zugang, Firmendaten, Rechnungsadresse und Ihr persönliches Farbschema.
+                </p>
+              </div>
+
+              <div className="p-4 rounded-xl bg-white/5 border border-white/5 text-sm text-slate-400 space-y-2">
+                <div className="flex items-center gap-2">
+                  <Check className="w-4 h-4 text-green-400 shrink-0" />
+                  <span>Komplett self-hosted & sicher</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Check className="w-4 h-4 text-green-400 shrink-0" />
+                  <span>9 vordefinierte Farbpaletten + Custom Farbwähler</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Check className="w-4 h-4 text-green-400 shrink-0" />
+                  <span>Lizenzserver-Anbindung</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Check className="w-4 h-4 text-green-400 shrink-0" />
+                  <span>Stammdatenverwaltung</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Check className="w-4 h-4 text-green-400 shrink-0" />
+                  <span>Automatische Adress- & Rechnungsverwaltung</span>
+                </div>
+              </div>
+
+              <Button
+                onClick={() => setStep(2)}
+                className="w-full py-6 text-base font-bold bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 shadow-lg shadow-blue-500/15 group"
+              >
+                Setup starten
+                <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
+              </Button>
+            </motion.div>
+          )}
+
+          {/* STEP 2: Admin-Konto */}
+          {step === 2 && (
+            <motion.div
+              key="step2"
+              initial={{ opacity: 0, y: 15 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -15 }}
+              className="glass-dark border border-white/10 rounded-3xl p-8 space-y-6 shadow-2xl"
+            >
+              <div className="space-y-1">
+                <h2 className="text-2xl font-bold flex items-center gap-2">
+                  <ShieldCheck className="w-6 h-6 text-blue-400" />
+                  Admin-Konto anlegen
+                </h2>
+                <p className="text-slate-400 text-sm">
+                  Erstellen Sie das erste Administrator-Konto für vollen Systemzugriff.
+                </p>
+              </div>
+
+              <div className="space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-slate-300 text-xs">Vorname *</Label>
+                    <div className="relative">
+                      <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                      <Input
+                        value={adminForm.firstName}
+                        onChange={(e) => setAdminForm({ ...adminForm, firstName: e.target.value })}
+                        placeholder="Vorname"
+                        className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-600"
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-slate-300 text-xs">Nachname *</Label>
+                    <div className="relative">
+                      <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                      <Input
+                        value={adminForm.lastName}
+                        onChange={(e) => setAdminForm({ ...adminForm, lastName: e.target.value })}
+                        placeholder="Nachname"
+                        className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-600"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label className="text-slate-300 text-xs">E-Mail-Adresse *</Label>
+                  <div className="relative">
+                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                    <Input
+                      type="email"
+                      value={adminForm.email}
+                      onChange={(e) => setAdminForm({ ...adminForm, email: e.target.value })}
+                      placeholder="admin@firma.de"
+                      className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-600"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <Label className="text-slate-300 text-xs">Passwort * (min. 6 Zeichen)</Label>
+                    <div className="relative">
+                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                      <Input
+                        type="password"
+                        value={adminForm.password}
+                        onChange={(e) => setAdminForm({ ...adminForm, password: e.target.value })}
+                        placeholder="••••••"
+                        className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-600"
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-slate-300 text-xs">Passwort bestätigen *</Label>
+                    <div className="relative">
+                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                      <Input
+                        type="password"
+                        value={adminForm.confirmPassword}
+                        onChange={(e) => setAdminForm({ ...adminForm, confirmPassword: e.target.value })}
+                        placeholder="••••••"
+                        className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-600"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex gap-3 pt-2">
+                <Button variant="ghost" onClick={() => setStep(1)} className="text-white hover:bg-white/5">
+                  Zurück
+                </Button>
+                <Button
+                  onClick={() => setStep(3)}
+                  disabled={!isAdminFormValid}
+                  className="flex-1 bg-blue-600 hover:bg-blue-500 text-white font-bold"
+                >
+                  Weiter zu Firmendaten
+                  <ArrowRight className="w-4 h-4 ml-2" />
+                </Button>
+              </div>
+            </motion.div>
+          )}
+
+          {/* STEP 3: Firmendaten & Rechnungsadresse */}
+          {step === 3 && (
+            <motion.div
+              key="step3"
+              initial={{ opacity: 0, y: 15 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -15 }}
+              className="glass-dark border border-white/10 rounded-3xl p-8 space-y-6 shadow-2xl"
+            >
+              <div className="space-y-1">
+                <h2 className="text-2xl font-bold flex items-center gap-2">
+                  <Building className="w-6 h-6 text-blue-400" />
+                  Firmendaten & Adressen
+                </h2>
+                <p className="text-slate-400 text-sm">
+                  Tragen Sie Ihren Firmennamen, die Anschrift und die Rechnungsadresse ein.
+                </p>
+              </div>
+
+              <div className="space-y-4">
+                <div className="space-y-1.5">
+                  <Label className="text-slate-300 text-xs">Firmenname *</Label>
+                  <div className="relative">
+                    <Building className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+                    <Input
+                      value={brandingForm.companyName}
+                      onChange={(e) => setBrandingForm({ ...brandingForm, companyName: e.target.value })}
+                      placeholder="z. B. CASPOS Software GmbH"
+                      className="pl-9 bg-white/5 border-white/10 text-white placeholder:text-slate-600"
+                    />
+                  </div>
+                </div>
+
+                {/* Anschrift */}
+                <div className="space-y-3 pt-1 border-t border-slate-800">
+                  <span className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
+                    <MapPin className="w-3.5 h-3.5 text-blue-400" /> Firmenanschrift
+                  </span>
+
+                  <div className="space-y-1.5">
+                    <Label className="text-slate-300 text-xs">Straße & Hausnummer *</Label>
+                    <Input
+                      value={brandingForm.street}
+                      onChange={(e) => setBrandingForm({ ...brandingForm, street: e.target.value })}
+                      placeholder="Musterstraße 12"
+                      className="bg-white/5 border-white/10 text-white placeholder:text-slate-600 text-xs"
+                    />
+                  </div>
+
+                  <div className="grid grid-cols-3 gap-3">
+                    <div className="space-y-1.5">
+                      <Label className="text-slate-300 text-xs">PLZ *</Label>
+                      <Input
+                        value={brandingForm.zip}
+                        onChange={(e) => setBrandingForm({ ...brandingForm, zip: e.target.value })}
+                        placeholder="12345"
+                        className="bg-white/5 border-white/10 text-white text-xs"
+                      />
+                    </div>
+                    <div className="col-span-2 space-y-1.5">
+                      <Label className="text-slate-300 text-xs">Ort *</Label>
+                      <Input
+                        value={brandingForm.city}
+                        onChange={(e) => setBrandingForm({ ...brandingForm, city: e.target.value })}
+                        placeholder="Musterstadt"
+                        className="bg-white/5 border-white/10 text-white text-xs"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Rechnungsadresse */}
+                <div className="space-y-3 pt-2 border-t border-slate-800">
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
+                      <Receipt className="w-3.5 h-3.5 text-blue-400" /> Rechnungsadresse
+                    </span>
+                    <label className="flex items-center gap-2 text-xs text-slate-400 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={brandingForm.sameBillingAddress}
+                        onChange={(e) =>
+                          setBrandingForm({ ...brandingForm, sameBillingAddress: e.target.checked })
+                        }
+                        className="w-4 h-4 rounded border-slate-700 bg-white/5 text-blue-500"
+                      />
+                      Gleiche wie Anschrift
+                    </label>
+                  </div>
+
+                  {!brandingForm.sameBillingAddress && (
+                    <div className="space-y-3 p-3 rounded-xl bg-white/5 border border-white/10">
+                      <div className="space-y-1.5">
+                        <Label className="text-slate-300 text-xs">Rechnungsstraße & Nr. *</Label>
+                        <Input
+                          value={brandingForm.billingStreet}
+                          onChange={(e) =>
+                            setBrandingForm({ ...brandingForm, billingStreet: e.target.value })
+                          }
+                          placeholder="Rechnungsstraße 45"
+                          className="bg-white/5 border-white/10 text-white text-xs"
+                        />
+                      </div>
+                      <div className="grid grid-cols-3 gap-3">
+                        <div className="space-y-1.5">
+                          <Label className="text-slate-300 text-xs">PLZ *</Label>
+                          <Input
+                            value={brandingForm.billingZip}
+                            onChange={(e) =>
+                              setBrandingForm({ ...brandingForm, billingZip: e.target.value })
+                            }
+                            placeholder="54321"
+                            className="bg-white/5 border-white/10 text-white text-xs"
+                          />
+                        </div>
+                        <div className="col-span-2 space-y-1.5">
+                          <Label className="text-slate-300 text-xs">Ort *</Label>
+                          <Input
+                            value={brandingForm.billingCity}
+                            onChange={(e) =>
+                              setBrandingForm({ ...brandingForm, billingCity: e.target.value })
+                            }
+                            placeholder="Rechnungsstadt"
+                            className="bg-white/5 border-white/10 text-white text-xs"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex gap-3 pt-2">
+                <Button variant="ghost" onClick={() => setStep(2)} className="text-white hover:bg-white/5">
+                  Zurück
+                </Button>
+                <Button
+                  onClick={() => setStep(4)}
+                  disabled={!isCompanyFormValid}
+                  className="flex-1 bg-blue-600 hover:bg-blue-500 text-white font-bold"
+                >
+                  Weiter zum Farbschema
+                  <ArrowRight className="w-4 h-4 ml-2" />
+                </Button>
+              </div>
+            </motion.div>
+          )}
+
+          {/* STEP 4: Farbschema & Live-Vorschau */}
+          {step === 4 && (
+            <motion.div
+              key="step4"
+              initial={{ opacity: 0, y: 15 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -15 }}
+              className="glass-dark border border-white/10 rounded-3xl p-8 space-y-6 shadow-2xl"
+            >
+              <div className="space-y-1">
+                <h2 className="text-2xl font-bold flex items-center gap-2">
+                  <Palette className="w-6 h-6 text-blue-400" />
+                  Farbschema & Webshop Styling
+                </h2>
+                <p className="text-slate-400 text-sm">
+                  Wählen Sie aus 9 vorgegebenen Farbpaletten oder erstellen Sie eine eigene Farbkombination mit Live-Vorschau.
+                </p>
+              </div>
+
+              <ColorThemePicker
+                colorScheme={brandingForm.colorScheme}
+                primaryColor={brandingForm.primaryColor}
+                accentColor={brandingForm.accentColor}
+                companyName={brandingForm.companyName}
+                onChange={(scheme, primary, accent) =>
+                  setBrandingForm({
+                    ...brandingForm,
+                    colorScheme: scheme,
+                    primaryColor: primary,
+                    accentColor: accent,
+                  })
+                }
+              />
+
+              <div className="flex gap-3 pt-2">
+                <Button variant="ghost" onClick={() => setStep(3)} className="text-white hover:bg-white/5">
+                  Zurück
+                </Button>
+                <Button
+                  onClick={() => setStep(5)}
+                  className="flex-1 bg-blue-600 hover:bg-blue-500 text-white font-bold"
+                >
+                  Weiter zu SMTP
+                  <ArrowRight className="w-4 h-4 ml-2" />
+                </Button>
+              </div>
+            </motion.div>
+          )}
+
+          {/* STEP 5: SMTP Mailserver */}
+          {step === 5 && (
+            <motion.div
+              key="step5"
+              initial={{ opacity: 0, y: 15 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -15 }}
+              className="glass-dark border border-white/10 rounded-3xl p-8 space-y-6 shadow-2xl"
+            >
+              <div className="space-y-1">
+                <div className="flex items-center justify-between">
+                  <h2 className="text-2xl font-bold flex items-center gap-2">
+                    <Mail className="w-6 h-6 text-blue-400" />
+                    SMTP-Mailserver
+                  </h2>
+                  <span className="text-[10px] uppercase font-bold tracking-wider px-2.5 py-1 rounded-full bg-slate-800 text-amber-400 border border-amber-500/20">
+                    Optional
+                  </span>
+                </div>
+                <p className="text-slate-400 text-sm">
+                  Tragen Sie Ihre Mailserver-Daten ein oder überspringen Sie diesen Schritt. Sie können die Einstellungen jederzeit im Admin-Bereich anpassen.
+                </p>
+              </div>
+
+              {errorMsg && (
+                <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-xs">
+                  {errorMsg}
+                </div>
+              )}
+
+              <div className="space-y-4">
+                <div className="grid grid-cols-3 gap-4">
+                  <div className="col-span-2 space-y-1.5">
+                    <Label className="text-slate-300 text-xs">SMTP Host</Label>
+                    <Input
+                      value={smtpForm.host}
+                      onChange={(e) => setSmtpForm({ ...smtpForm, host: e.target.value })}
+                      placeholder="smtp.domain.de"
+                      className="bg-white/5 border-white/10 text-white placeholder:text-slate-600"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-slate-300 text-xs">SMTP Port</Label>
+                    <Input
+                      value={smtpForm.port}
+                      onChange={(e) => setSmtpForm({ ...smtpForm, port: e.target.value })}
+                      placeholder="587"
+                      className="bg-white/5 border-white/10 text-white"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label className="text-slate-300 text-xs">Benutzername</Label>
+                  <Input
+                    value={smtpForm.user}
+                    onChange={(e) => setSmtpForm({ ...smtpForm, user: e.target.value })}
+                    placeholder="mail@domain.de"
+                    className="bg-white/5 border-white/10 text-white placeholder:text-slate-600"
+                  />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label className="text-slate-300 text-xs">Passwort</Label>
+                  <Input
+                    type="password"
+                    value={smtpForm.pass}
+                    onChange={(e) => setSmtpForm({ ...smtpForm, pass: e.target.value })}
+                    placeholder="••••••••••••"
+                    className="bg-white/5 border-white/10 text-white placeholder:text-slate-600"
+                  />
+                </div>
+
+                <div className="flex items-center justify-between pt-2">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      id="smtp_secure"
+                      checked={smtpForm.secure}
+                      onChange={(e) => setSmtpForm({ ...smtpForm, secure: e.target.checked })}
+                      className="w-4 h-4 rounded border-slate-700 bg-white/5 text-blue-500 focus:ring-0 focus:ring-offset-0"
+                    />
+                    <Label htmlFor="smtp_secure" className="text-slate-300 text-sm cursor-pointer select-none">
+                      Sichere Verbindung (SSL/TLS)
+                    </Label>
+                  </div>
+
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    size="sm"
+                    onClick={handleTestSmtp}
+                    disabled={testSmtpLoading || !smtpForm.host || !smtpForm.user}
+                    className="bg-white/10 hover:bg-white/20 text-white text-xs border border-white/10 flex items-center gap-1.5"
+                  >
+                    {testSmtpLoading ? (
+                      <>
+                        <Loader2 className="w-3.5 h-3.5 animate-spin" /> Testen...
+                      </>
+                    ) : (
+                      <>
+                        <Send className="w-3.5 h-3.5 text-blue-400" /> Test-E-Mail senden
+                      </>
+                    )}
+                  </Button>
+                </div>
+
+                {testSmtpResult && (
+                  <div
+                    className={`p-3 rounded-lg border text-xs font-medium ${
+                      testSmtpResult.success
+                        ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400'
+                        : 'bg-red-500/10 border-red-500/30 text-red-400'
+                    }`}
+                  >
+                    {testSmtpResult.message}
+                  </div>
+                )}
+              </div>
+
+              <div className="flex flex-col sm:flex-row gap-3 pt-2">
+                <Button
+                  variant="ghost"
+                  onClick={() => setStep(4)}
+                  disabled={loading}
+                  className="text-white hover:bg-white/5"
+                >
+                  Zurück
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={handleFinishSetup}
+                  disabled={loading}
+                  className="border-slate-700 text-slate-300 hover:text-white"
+                >
+                  Überspringen
+                </Button>
+                <Button
+                  onClick={handleFinishSetup}
+                  disabled={loading}
+                  className="flex-1 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold"
+                >
+                  {loading ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-2 animate-spin" /> Setup wird abgeschlossen...
+                    </>
+                  ) : (
+                    'Einrichtung abschließen'
+                  )}
+                </Button>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  )
+}

shop/components/ThemeProvider.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import { useEffect, useState, createContext, useContext } from 'react'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import { getBrandingSettings } from '@/lib/actions/branding'
+import { PRESET_COLOR_SCHEMES, BrandingSettings } from '@/lib/constants/branding'
+
+function hexToHsl(hex: string): string {
+  try {
+    let c = hex.replace('#', '')
+    if (c.length === 3) c = c.split('').map(x => x + x).join('')
+    const r = parseInt(c.substring(0, 2), 16) / 255
+    const g = parseInt(c.substring(2, 4), 16) / 255
+    const b = parseInt(c.substring(4, 6), 16) / 255
+
+    const max = Math.max(r, g, b)
+    const min = Math.min(r, g, b)
+    let h = 0, s = 0, l = (max + min) / 2
+
+    if (max !== min) {
+      const d = max - min
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+      switch (max) {
+        case r: h = (g - b) / d + (g < b ? 6 : 0); break
+        case g: h = (b - r) / d + 2; break
+        case b: h = (r - g) / d + 4; break
+      }
+      h /= 6
+    }
+
+    return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`
+  } catch (e) {
+    return '217 91% 60%'
+  }
+}
+
+const ThemeContext = createContext<{
+  branding: BrandingSettings | null
+  refreshBranding: () => Promise<void>
+}>({
+  branding: null,
+  refreshBranding: async () => {},
+})
+
+export function ThemeProvider({
+  children,
+  ...props
+}: {
+  children: React.ReactNode
+  [key: string]: any
+}) {
+  const [branding, setBranding] = useState<BrandingSettings | null>(null)
+
+  const loadTheme = async () => {
+    try {
+      const settings = await getBrandingSettings()
+      setBranding(settings)
+
+      // Preset Ermittlung
+      const preset = PRESET_COLOR_SCHEMES.find(p => p.id === settings.colorScheme) || PRESET_COLOR_SCHEMES[3]
+      const isCustom = settings.colorScheme === 'custom'
+
+      const primary = isCustom ? (settings.primaryColor || '#2563eb') : preset.primary
+      const accent = isCustom ? (settings.accentColor || '#38bdf8') : preset.accent
+
+      const primaryHsl = hexToHsl(primary)
+      const accentHsl = hexToHsl(accent)
+
+      const root = document.documentElement
+
+      // 10 Color CSS Tokens applied globally onto :root
+      root.style.setProperty('--primary', primaryHsl)
+      root.style.setProperty('--ring', primaryHsl)
+      root.style.setProperty('--accent', accentHsl)
+
+      root.style.setProperty('--primary-custom', primary)
+      root.style.setProperty('--accent-custom', accent)
+
+      root.style.setProperty('--success-custom', settings.successColor || preset.success)
+      root.style.setProperty('--warning-custom', settings.warningColor || preset.warning)
+      root.style.setProperty('--destructive-custom', settings.destructiveColor || preset.destructive)
+
+      root.style.setProperty('--bg-glow-1', isCustom ? primary : preset.bgGlow1)
+      root.style.setProperty('--bg-glow-2', isCustom ? accent : preset.bgGlow2)
+      root.style.setProperty('--gradient-from', isCustom ? primary : preset.gradientFrom)
+      root.style.setProperty('--gradient-to', isCustom ? accent : preset.gradientTo)
+      root.style.setProperty('--card-border-glow', isCustom ? `${accent}40` : preset.cardBorder)
+      root.style.setProperty('--text-highlight', isCustom ? accent : preset.textHighlight)
+      root.style.setProperty('--button-bg', isCustom ? primary : preset.buttonBg)
+      root.style.setProperty('--ring-color', isCustom ? primary : preset.ringColor)
+    } catch (e) {
+      console.error('Failed to load branding theme:', e)
+    }
+  }
+
+  useEffect(() => {
+    loadTheme()
+  }, [])
+
+  return (
+    <NextThemesProvider {...props}>
+      <ThemeContext.Provider value={{ branding, refreshBranding: loadTheme }}>
+        {children}
+      </ThemeContext.Provider>
+    </NextThemesProvider>
+  )
+}
+
+export function useTheme() {
+  return useContext(ThemeContext)
+}

shop/components/WorkspaceZentrale.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import React, { useState } from 'react'
+import { motion } from 'framer-motion'
+import { MessageSquare, BookOpen, LifeBuoy, ExternalLink } from 'lucide-react'
+
+interface WorkspaceItem {
+  id: string
+  title: string
+  subtitle: string
+  hoverText: string
+  icon: React.ElementType
+  link: string
+}
+
+const workspaceItems: WorkspaceItem[] = [
+  {
+    id: 'zulip',
+    title: 'Zulip Chat',
+    subtitle: 'Treten Sie unserem Partner-Chat bei!',
+    hoverText: 'Tauschen Sie sich direkt und unkompliziert mit anderen CASPOS Partnern aus.',
+    icon: MessageSquare,
+    link: 'https://caspos.zulipchat.com'
+  },
+  {
+    id: 'wiki',
+    title: 'CASPOS Wiki',
+    subtitle: 'Ihr Wissens-Portal...',
+    hoverText: '...für die gesamte CASPOS Produktfamilie. Hier finden Sie alle technischen Dokumentationen.',
+    icon: BookOpen,
+    link: 'https://wiki.caspos.de'
+  },
+  {
+    id: 'support',
+    title: 'Support Portal',
+    subtitle: 'Sie haben ein technisches Problem?',
+    hoverText: 'Erstellen Sie jetzt ein Ticket in der CASPOS, damit sich unsere Experten darum kümmern.',
+    icon: LifeBuoy,
+    link: 'https://support.caspos.de'
+  }
+]
+
+export function WorkspaceZentrale() {
+  const [hoveredId, setHoveredId] = useState<string | null>(null)
+
+  return (
+    <section className="w-full py-12 px-4 relative z-10">
+      <div className="container max-w-6xl mx-auto space-y-6">
+        <div className="text-center space-y-2">
+          <h2 className="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
+            Workspace Zentrale
+          </h2>
+        </div>
+
+        {/* 3-Spalten Grid mit fester Kartenhöhe */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {workspaceItems.map((item) => {
+            const Icon = item.icon
+            const isHovered = hoveredId === item.id
+
+            return (
+              <motion.a
+                key={item.id}
+                href={item.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                whileHover={{ y: -4 }}
+                onMouseEnter={() => setHoveredId(item.id)}
+                onMouseLeave={() => setHoveredId(null)}
+                className={`group relative p-6 rounded-2xl border transition-all duration-300 backdrop-blur-md flex flex-col justify-between h-[210px] overflow-hidden cursor-pointer ${
+                  isHovered
+                    ? 'border-sky-500 bg-slate-900/90 shadow-[0_0_25px_rgba(14,165,233,0.2)]'
+                    : 'border-slate-800 bg-slate-900/60'
+                }`}
+              >
+                <div className="space-y-3">
+                  {/* Header: Icon & Link */}
+                  <div className="flex items-center justify-between">
+                    <div
+                      className={`p-3 rounded-xl border transition-all duration-300 ${
+                        isHovered
+                          ? 'bg-sky-500/20 border-sky-500/50 text-sky-300'
+                          : 'bg-slate-800/60 border-slate-700/50 text-slate-400'
+                      }`}
+                    >
+                      <Icon className="w-6 h-6" />
+                    </div>
+                    <ExternalLink
+                      className={`w-4 h-4 transition-all duration-300 ${
+                        isHovered
+                          ? 'text-sky-400 translate-x-0.5 -translate-y-0.5'
+                          : 'text-slate-600'
+                      }`}
+                    />
+                  </div>
+
+                  {/* Title */}
+                  <h3 className="text-lg font-bold text-white group-hover:text-sky-300 transition-colors">
+                    {item.title}
+                  </h3>
+
+                  {/* Subtitle / Hover-Text Überblendung ohne Höhenänderung */}
+                  <div className="relative h-[48px] overflow-hidden">
+                    <p
+                      className={`text-sm text-slate-300 font-medium transition-all duration-300 absolute inset-0 ${
+                        isHovered ? 'opacity-0 translate-y-[-8px]' : 'opacity-100 translate-y-0'
+                      }`}
+                    >
+                      {item.subtitle}
+                    </p>
+                    <p
+                      className={`text-xs text-slate-400 leading-relaxed transition-all duration-300 absolute inset-0 ${
+                        isHovered ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-[8px]'
+                      }`}
+                    >
+                      {item.hoverText}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Subtile Hover-Linie unten */}
+                <div className={`w-full h-0.5 rounded-full transition-all duration-300 ${
+                  isHovered ? 'bg-sky-500/80 shadow-[0_0_8px_rgba(14,165,233,0.8)]' : 'bg-transparent'
+                }`} />
+              </motion.a>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}

shop/components/admin/ColorThemePicker.tsx

@@ -0,0 +1,267 @@
+'use client'
+
+import { useState } from 'react'
+import { PRESET_COLOR_SCHEMES, ColorPreset } from '@/lib/constants/branding'
+import { Check, Palette, Sparkles, Building2, ShoppingCart, Tag, Layers } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+interface ColorThemePickerProps {
+  colorScheme: string
+  primaryColor: string
+  accentColor: string
+  companyName?: string
+  onChange: (scheme: string, primary: string, accent: string) => void
+}
+
+export function ColorThemePicker({
+  colorScheme,
+  primaryColor,
+  accentColor,
+  companyName = 'CASPOS Shop',
+  onChange,
+}: ColorThemePickerProps) {
+  const [customPrimary, setCustomPrimary] = useState(primaryColor || '#2563eb')
+  const [customAccent, setCustomAccent] = useState(accentColor || '#38bdf8')
+
+  const isCustom = colorScheme === 'custom'
+
+  const activePreset = PRESET_COLOR_SCHEMES.find(p => p.id === colorScheme) || PRESET_COLOR_SCHEMES[3]
+
+  const handleSelectPreset = (preset: ColorPreset) => {
+    onChange(preset.id, preset.primary, preset.accent)
+  }
+
+  const handleCustomPrimaryChange = (val: string) => {
+    setCustomPrimary(val)
+    onChange('custom', val, customAccent)
+  }
+
+  const handleCustomAccentChange = (val: string) => {
+    setCustomAccent(val)
+    onChange('custom', customPrimary, val)
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Grid of Presets */}
+      <div>
+        <div className="flex items-center justify-between mb-3">
+          <Label className="text-sm font-bold text-slate-200 flex items-center gap-2">
+            <Palette className="w-4 h-4 text-blue-400" />
+            Vorgegebene Farbschemata (9 Stile mit je 10 Farbtokens)
+          </Label>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+          {PRESET_COLOR_SCHEMES.map((preset) => {
+            const isSelected = colorScheme === preset.id
+
+            const tokenSwatches = [
+              { name: 'Primary', color: preset.primary, desc: 'Helle/edle Hauptfarbe für Navigation/Texte' },
+              { name: 'Accent', color: preset.accent, desc: 'Scharfe Highlight-Farbe für Badges/Meldungen' },
+              { name: 'bgGlow1', color: preset.bgGlow1, desc: 'Atmosphärischer Lichtnebel von oben' },
+              { name: 'bgGlow2', color: preset.bgGlow2, desc: 'Subtiles Gegenlicht von unten' },
+              { name: 'gradientFrom', color: preset.gradientFrom, desc: 'Startfarbe für Core-Verläufe' },
+              { name: 'gradientTo', color: preset.gradientTo, desc: 'Endfarbe für Core-Verläufe' },
+              { name: 'textHighlight', color: preset.textHighlight, desc: 'Soft-Pastell Text-Empfehlung' },
+              { name: 'buttonBg', color: preset.buttonBg, desc: 'Satte Basisfarbe Hauptbuttons' },
+              { name: 'ringColor', color: preset.ringColor, desc: 'Präzise Fokus-Rand-Farbe' },
+              { name: 'cardBorder', color: preset.cardBorder, desc: 'Subtiler Rahmen-Ton Karten' },
+            ]
+
+            return (
+              <button
+                key={preset.id}
+                type="button"
+                onClick={() => handleSelectPreset(preset)}
+                className={`relative p-3.5 rounded-2xl border text-left transition-all duration-200 group flex flex-col justify-between space-y-3 ${
+                  isSelected
+                    ? 'bg-slate-900/90 border-blue-500 shadow-lg shadow-blue-500/10 ring-2 ring-blue-500/30'
+                    : 'bg-slate-950/60 border-slate-800 hover:border-slate-700 hover:bg-slate-900/40'
+                }`}
+              >
+                <div className="flex items-center justify-between">
+                  <span className="font-semibold text-xs text-white truncate pr-2">
+                    {preset.name}
+                  </span>
+                  {isSelected && (
+                    <span className="w-5 h-5 rounded-full bg-blue-500 text-white flex items-center justify-center shrink-0">
+                      <Check className="w-3.5 h-3.5" />
+                    </span>
+                  )}
+                </div>
+
+                <p className="text-[11px] text-slate-400 line-clamp-1">
+                  {preset.description}
+                </p>
+
+                {/* 10 Color Token Swatches Bar */}
+                <div className="space-y-1 pt-1 border-t border-slate-800/60">
+                  <div className="flex items-center gap-1 justify-between">
+                    {tokenSwatches.map((item, i) => (
+                      <span
+                        key={i}
+                        className="w-3 h-3 rounded-full border border-white/10 shadow-sm shrink-0 transition-transform hover:scale-125"
+                        style={{ backgroundColor: item.color }}
+                        title={`${item.name}: ${item.desc} (${item.color})`}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Custom Color Picker */}
+      <div
+        className={`p-4 rounded-2xl border transition-all duration-200 space-y-4 ${
+          isCustom
+            ? 'bg-slate-900/90 border-blue-500 ring-2 ring-blue-500/30'
+            : 'bg-slate-950/40 border-slate-800'
+        }`}
+      >
+        <div className="flex items-center justify-between">
+          <button
+            type="button"
+            onClick={() => onChange('custom', customPrimary, customAccent)}
+            className="flex items-center gap-2.5 font-bold text-xs text-white hover:text-blue-400 transition"
+          >
+            <span className={`w-4 h-4 rounded-full border flex items-center justify-center ${
+              isCustom ? 'border-blue-500 bg-blue-500/20 text-blue-400' : 'border-slate-700'
+            }`}>
+              {isCustom && <Check className="w-3 h-3" />}
+            </span>
+            <span>Benutzerdefiniertes Farbschema (Custom Hex Picker)</span>
+          </button>
+        </div>
+
+        {isCustom && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2 border-t border-slate-800">
+            {/* Primary Color Picker */}
+            <div className="space-y-1.5">
+              <Label className="text-xs text-slate-300">Hauptfarbe (Primary)</Label>
+              <div className="flex items-center gap-2">
+                <input
+                  type="color"
+                  value={customPrimary}
+                  onChange={(e) => handleCustomPrimaryChange(e.target.value)}
+                  className="w-9 h-9 rounded-xl border border-slate-700 bg-transparent cursor-pointer shrink-0"
+                />
+                <Input
+                  type="text"
+                  value={customPrimary}
+                  onChange={(e) => handleCustomPrimaryChange(e.target.value)}
+                  placeholder="#2563eb"
+                  className="font-mono text-xs uppercase bg-slate-950 border-slate-800 text-white"
+                />
+              </div>
+            </div>
+
+            {/* Accent Color Picker */}
+            <div className="space-y-1.5">
+              <Label className="text-xs text-slate-300">Akzentfarbe (Accent)</Label>
+              <div className="flex items-center gap-2">
+                <input
+                  type="color"
+                  value={customAccent}
+                  onChange={(e) => handleCustomAccentChange(e.target.value)}
+                  className="w-9 h-9 rounded-xl border border-slate-700 bg-transparent cursor-pointer shrink-0"
+                />
+                <Input
+                  type="text"
+                  value={customAccent}
+                  onChange={(e) => handleCustomAccentChange(e.target.value)}
+                  placeholder="#38bdf8"
+                  className="font-mono text-xs uppercase bg-slate-950 border-slate-800 text-white"
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Live Micro-Preview Card with Animated Background Orbs */}
+      <div className="p-5 rounded-2xl bg-slate-950 border border-slate-800 space-y-3 relative overflow-hidden">
+        <div className="flex items-center justify-between border-b border-slate-800 pb-2.5 relative z-10">
+          <span className="text-xs font-bold text-slate-400 flex items-center gap-1.5 uppercase tracking-wider">
+            <Sparkles className="w-3.5 h-3.5 text-amber-400" />
+            Live Vorschau & Animierter Background Glow
+          </span>
+          <span className="text-[10px] font-mono text-slate-500">
+            {primaryColor} / {accentColor}
+          </span>
+        </div>
+
+        <div className="p-4 rounded-xl bg-slate-900/90 border border-slate-800/80 space-y-4 relative overflow-hidden z-10 backdrop-blur-md">
+          {/* Animated Background Orbs Preview */}
+          <div
+            className="absolute -top-10 -left-10 w-40 h-40 rounded-full opacity-30 blur-2xl pointer-events-none transition-all duration-500"
+            style={{ backgroundColor: 'var(--bg-glow-1, ' + (activePreset.bgGlow1 || primaryColor) + ')' }}
+          />
+          <div
+            className="absolute -bottom-10 -right-10 w-40 h-40 rounded-full opacity-30 blur-2xl pointer-events-none transition-all duration-500"
+            style={{ backgroundColor: 'var(--bg-glow-2, ' + (activePreset.bgGlow2 || accentColor) + ')' }}
+          />
+
+          {/* Header Preview */}
+          <div className="flex items-center justify-between p-3 rounded-lg bg-slate-950/80 border border-slate-800 relative z-10">
+            <div className="flex items-center gap-2">
+              <div
+                className="w-6 h-6 rounded-md flex items-center justify-center text-white text-xs font-bold shadow-md"
+                style={{ backgroundColor: 'var(--primary-custom, ' + primaryColor + ')' }}
+              >
+                <Building2 className="w-3.5 h-3.5" />
+              </div>
+              <span className="font-bold text-xs text-white">
+                {companyName || 'Ihr Unternehmen'}
+              </span>
+            </div>
+            <span
+              className="text-[10px] font-semibold px-2 py-0.5 rounded-full text-slate-950 font-bold"
+              style={{ backgroundColor: 'var(--accent-custom, ' + accentColor + ')' }}
+            >
+              Aktiv
+            </span>
+          </div>
+
+          {/* Buttons & Badges Preview */}
+          <div className="flex flex-wrap items-center gap-2.5 relative z-10">
+            <button
+              type="button"
+              className="px-4 py-2 rounded-lg text-xs font-bold text-white shadow-md flex items-center gap-1.5 transition-all"
+              style={{
+                background: `linear-gradient(135deg, var(--gradient-from, ${primaryColor}) 0%, var(--gradient-to, ${activePreset.gradientTo || primaryColor}) 100%)`,
+              }}
+            >
+              <ShoppingCart className="w-3.5 h-3.5" />
+              In den Warenkorb
+            </button>
+
+            <button
+              type="button"
+              className="px-3.5 py-2 rounded-lg text-xs font-semibold bg-slate-800/90 text-slate-200 border"
+              style={{ borderColor: 'var(--accent-custom, ' + accentColor + ')' }}
+            >
+              Details anzeigen
+            </button>
+
+            <span
+              className="text-[10px] font-bold px-2.5 py-1 rounded-full border flex items-center gap-1"
+              style={{
+                borderColor: 'var(--card-border-glow, ' + accentColor + '40)',
+                backgroundColor: 'color-mix(in srgb, var(--accent-custom, ' + accentColor + ') 15%, transparent)',
+                color: 'var(--text-highlight, ' + (activePreset.textHighlight || accentColor) + ')',
+              }}
+            >
+              <Tag className="w-3 h-3" />
+              Empfohlen
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

shop/components/admin/admin-nav-link.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { ReactNode } from 'react'
+
+interface AdminNavLinkProps {
+  href: string
+  children: ReactNode
+}
+
+export function AdminNavLink({ href, children }: AdminNavLinkProps) {
+  const pathname = usePathname()
+  const isActive = pathname === href
+
+  return (
+    <Link
+      href={href}
+      className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-all ${
+        isActive
+          ? 'bg-primary text-black font-semibold'
+          : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5'
+      }`}
+    >
+      {children}
+    </Link>
+  )
+}

shop/components/admin/category-dialog.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState } from 'react'
+import { useRouter } from 'next/navigation'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import * as z from 'zod'
@@ -42,6 +43,12 @@ const categorySchema = z.object({
   icon: z.string().default('Package'),
   sort_order: z.coerce.number().int().min(0).default(0),
   is_required: z.boolean().default(true),
+  allow_multiselect: z.boolean().default(false),
+  free_items_limit: z.coerce.number().int().min(0).default(0),
+  preselect: z.boolean().default(true),
+  show_in_kauf: z.boolean().default(true),
+  show_in_abo: z.boolean().default(true),
+  resets_others: z.boolean().default(false),
 })
 
 type CategoryFormValues = z.infer<typeof categorySchema>
@@ -54,6 +61,7 @@ export function CategoryDialog({
   category?: Category 
 }) {
   const [open, setOpen] = useState(false)
+  const router = useRouter()
 
   const form = useForm<CategoryFormValues>({
     resolver: zodResolver(categorySchema) as any,
@@ -63,18 +71,25 @@ export function CategoryDialog({
       icon: category?.icon || 'Package',
       sort_order: category?.sort_order ?? 0,
       is_required: category?.is_required ?? true,
+      allow_multiselect: category?.allow_multiselect ?? false,
+      free_items_limit: category?.free_items_limit ?? 0,
+      preselect: category?.preselect ?? true,
+      show_in_kauf: category?.show_in_kauf ?? true,
+      show_in_abo: category?.show_in_abo ?? true,
+      resets_others: category?.resets_others ?? false,
     },
   })
 
   async function onSubmit(values: CategoryFormValues) {
     try {
       if (category) {
-        await updateCategory(category.id, values)
+        await updateCategory(category.id, values as any)
       } else {
-        await createCategory(values)
+        await createCategory(values as any)
       }
       setOpen(false)
       form.reset()
+      router.refresh()
     } catch (error) {
       console.error('Error saving category:', error)
     }
@@ -96,10 +111,10 @@ export function CategoryDialog({
           </Button>
         )}
       </DialogTrigger>
-      <DialogContent className="glass-dark border-white/10 text-white shadow-2xl">
+      <DialogContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
         <DialogHeader>
           <DialogTitle>{category ? 'Kategorie bearbeiten' : 'Neue Kategorie erstellen'}</DialogTitle>
-          <DialogDescription className="text-slate-300">
+          <DialogDescription className="text-slate-500 dark:text-slate-400">
             Definieren Sie eine Kategorie für Ihre Produkte.
           </DialogDescription>
         </DialogHeader>
@@ -113,9 +128,9 @@ export function CategoryDialog({
                   name="name"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel className="text-white">Name</FormLabel>
+                      <FormLabel className="text-slate-900 dark:text-white">Name</FormLabel>
                       <FormControl>
-                        <Input placeholder="z.B. Software" className="bg-white/5 border-white/10 text-white" {...field} />
+                        <Input placeholder="z.B. Software" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -126,9 +141,9 @@ export function CategoryDialog({
                   name="description"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel className="text-white">Beschreibung</FormLabel>
+                      <FormLabel className="text-slate-900 dark:text-white">Beschreibung</FormLabel>
                       <FormControl>
-                        <Input placeholder="Kurze Beschreibung" className="bg-white/5 border-white/10 text-white" {...field} />
+                        <Input placeholder="Kurze Beschreibung" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -139,16 +154,16 @@ export function CategoryDialog({
                   name="icon"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel className="text-white">Icon</FormLabel>
+                      <FormLabel className="text-slate-900 dark:text-white">Icon</FormLabel>
                       <Select onValueChange={field.onChange} defaultValue={field.value}>
                         <FormControl>
-                          <SelectTrigger className="bg-white/5 border-white/10 text-white">
+                          <SelectTrigger className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
                             <SelectValue placeholder="Icon wählen" />
                           </SelectTrigger>
                         </FormControl>
-                        <SelectContent className="glass-dark border-white/10 text-white">
+                        <SelectContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
                           {icons.map(({ name, Icon }) => (
-                            <SelectItem key={name} value={name} className="text-white hover:bg-white/10">
+                            <SelectItem key={name} value={name}>
                               <div className="flex items-center gap-2">
                                 <Icon className="w-4 h-4" />
                                 {name}
@@ -166,26 +181,26 @@ export function CategoryDialog({
                   name="sort_order"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel className="text-white">Reihenfolge im Bestellvorgang</FormLabel>
+                      <FormLabel className="text-slate-900 dark:text-white">Reihenfolge im Bestellvorgang</FormLabel>
                       <FormControl>
                         <Input
                           type="number"
                           min={0}
                           placeholder="0 = zuerst"
-                          className="bg-white/5 border-white/10 text-white"
+                          className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500"
                           {...field}
                         />
                       </FormControl>
                       <FormMessage />
-                      <p className="text-xs text-slate-400">Kleinere Zahl = weiter oben im Bestellformular angezeigt.</p>
+                      <p className="text-xs text-slate-500 dark:text-slate-400">Kleinere Zahl = weiter oben im Bestellformular angezeigt.</p>
                     </FormItem>
                   )}
                 />
-                <FormField
+                 <FormField
                   control={form.control}
                   name="is_required"
                   render={({ field }) => (
-                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-lg border border-white/10 bg-white/5 p-4">
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-lg border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 p-4">
                       <FormControl>
                         <Checkbox
                           checked={field.value}
@@ -193,10 +208,10 @@ export function CategoryDialog({
                         />
                       </FormControl>
                       <div className="space-y-1 leading-none">
-                        <FormLabel className="text-white font-semibold cursor-pointer">
+                        <FormLabel className="text-slate-900 dark:text-white font-semibold cursor-pointer">
                           Pflichtauswahl im Bestellvorgang
                         </FormLabel>
-                        <p className="text-xs text-slate-400">
+                        <p className="text-xs text-slate-500 dark:text-slate-400">
                           Wenn aktiv, muss der Kunde aus dieser Kategorie einen Artikel wählen.
                           Wenn deaktiviert, ist die Kategorie optional.
                         </p>
@@ -204,10 +219,156 @@ export function CategoryDialog({
                     </FormItem>
                   )}
                 />
+                 <FormField
+                  control={form.control}
+                  name="allow_multiselect"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-lg border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 p-4">
+                      <FormControl>
+                        <Checkbox
+                          checked={field.value}
+                          onCheckedChange={(checked) => {
+                            field.onChange(checked);
+                            if (checked) {
+                              form.setValue('preselect', false);
+                            }
+                          }}
+                        />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel className="text-slate-900 dark:text-white font-semibold cursor-pointer">
+                          Mehrfachauswahl erlauben
+                        </FormLabel>
+                        <p className="text-xs text-slate-500 dark:text-slate-400">
+                          Erlaubt die Auswahl mehrerer Produkte/Module innerhalb dieser Kategorie.
+                        </p>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+                {!form.watch('allow_multiselect') && (
+                  <FormField
+                    control={form.control}
+                    name="preselect"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-lg border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 p-4">
+                        <FormControl>
+                          <Checkbox
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <div className="space-y-1 leading-none">
+                          <FormLabel className="text-slate-900 dark:text-white font-semibold cursor-pointer">
+                            Vorauswahl aktivieren
+                          </FormLabel>
+                          <p className="text-xs text-slate-500 dark:text-slate-400">
+                            Wenn aktiv, wird beim Öffnen des Wizards automatisch das erste Produkt dieser Kategorie ausgewählt.
+                          </p>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                )}
+
+                 <FormField
+                  control={form.control}
+                  name="resets_others"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-lg border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 p-4">
+                      <FormControl>
+                        <Checkbox
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                      <div className="space-y-1 leading-none">
+                        <FormLabel className="text-slate-900 dark:text-white font-semibold cursor-pointer">
+                          Anderen Kategorien bei Auswahl zurücksetzen
+                        </FormLabel>
+                        <p className="text-xs text-slate-500 dark:text-slate-400">
+                          Wenn aktiv, setzt die Auswahl eines Artikels dieser Kategorie alle anderen Kategorien zurück.
+                        </p>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                <div className="grid grid-cols-2 gap-4">
+                  <FormField
+                    control={form.control}
+                    name="show_in_kauf"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-lg border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 p-4">
+                        <FormControl>
+                          <Checkbox
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <div className="space-y-1 leading-none">
+                          <FormLabel className="text-slate-900 dark:text-white font-semibold cursor-pointer">
+                            In Kauf anzeigen
+                          </FormLabel>
+                          <p className="text-xs text-slate-500 dark:text-slate-400">
+                            Im Kauf-Zweig des Wizards anzeigen.
+                          </p>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="show_in_abo"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-lg border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 p-4">
+                        <FormControl>
+                          <Checkbox
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                        <div className="space-y-1 leading-none">
+                          <FormLabel className="text-slate-900 dark:text-white font-semibold cursor-pointer">
+                            In Abo anzeigen
+                          </FormLabel>
+                          <p className="text-xs text-slate-500 dark:text-slate-400">
+                            Im Abo-Zweig des Wizards anzeigen.
+                          </p>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                {form.watch('allow_multiselect') && (
+                  <FormField
+                    control={form.control}
+                    name="free_items_limit"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-slate-900 dark:text-white">Inklusive Freie Artikel Limit</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="number"
+                            min={0}
+                            placeholder="z.B. 2"
+                            className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500"
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                        <p className="text-xs text-slate-500 dark:text-slate-400">
+                          Bis zu dieser Anzahl sind gewählte Artikel in dieser Kategorie kostenlos. Alle darüber hinausgehenden werden voll berechnet (günstigste Artikel zuerst frei).
+                        </p>
+                      </FormItem>
+                    )}
+                  />
+                )}
               </div>
             </ScrollArea>
             <DialogFooter className="pt-4">
-              <Button type="submit" className="w-full bg-primary hover:bg-primary/90">
+              <Button type="submit" className="w-full bg-primary hover:bg-primary/90 text-white">
                 {category ? 'Aktualisieren' : 'Erstellen'}
               </Button>
             </DialogFooter>

shop/components/admin/category-list.tsx

@@ -14,12 +14,16 @@ import { Edit2, Trash2, Cloud, Utensils, HardDrive, Package, ArrowUpDown } from
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { deleteCategory } from '@/lib/actions/products'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { CategoryDialog } from './category-dialog'
 
 export function CategoryList({ initialCategories }: { initialCategories: Category[] }) {
   const [categories, setCategories] = useState(initialCategories)
 
+  useEffect(() => {
+    setCategories(initialCategories)
+  }, [initialCategories])
+
   const handleDelete = async (id: string) => {
     if (confirm('Möchten Sie diese Kategorie wirklich löschen? Alle zugehörigen Produkte werden nicht mehr dieser Kategorie zugeordnet sein.')) {
       await deleteCategory(id)
@@ -37,55 +41,62 @@ export function CategoryList({ initialCategories }: { initialCategories: Categor
   }
 
   return (
-    <Card className="glass-dark border-white/10 shadow-2xl overflow-hidden">
+    <Card className="bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden text-slate-900 dark:text-white">
       <CardHeader>
         <CardTitle>Kategorienübersicht</CardTitle>
-        <CardDescription className="text-slate-400">
+        <CardDescription className="text-slate-500 dark:text-slate-400">
           Verwalten Sie die Hauptkategorien für Ihre Produkte.
         </CardDescription>
       </CardHeader>
       <CardContent>
         <Table>
           <TableHeader>
-            <TableRow className="border-white/10 hover:bg-white/5">
-              <TableHead className="text-white font-bold w-10">Icon</TableHead>
-              <TableHead className="text-white font-bold">Name</TableHead>
-              <TableHead className="text-white font-bold">Beschreibung</TableHead>
-              <TableHead className="text-white font-bold w-28">
+            <TableRow className="border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5">
+              <TableHead className="text-slate-700 dark:text-white font-bold w-10">Icon</TableHead>
+              <TableHead className="text-slate-700 dark:text-white font-bold">Name</TableHead>
+              <TableHead className="text-slate-700 dark:text-white font-bold">Beschreibung</TableHead>
+              <TableHead className="text-slate-700 dark:text-white font-bold w-28">
                 <span className="flex items-center gap-1">
                   <ArrowUpDown className="w-3 h-3" /> Reihenfolge
                 </span>
               </TableHead>
-              <TableHead className="text-white font-bold w-24">Typ</TableHead>
-              <TableHead className="text-right text-white font-bold">Aktionen</TableHead>
+              <TableHead className="text-slate-700 dark:text-white font-bold w-24">Typ</TableHead>
+              <TableHead className="text-right text-slate-700 dark:text-white font-bold">Aktionen</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {categories.map((category) => (
-              <TableRow key={category.id} className="border-white/5 hover:bg-white/5 transition-colors">
+              <TableRow key={category.id} className="border-slate-100 dark:border-white/5 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
                 <TableCell>
                   <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                     {getIcon(category.icon)}
                   </div>
                 </TableCell>
-                <TableCell className="font-medium text-white">{category.name}</TableCell>
-                <TableCell className="text-slate-300">{category.description}</TableCell>
+                <TableCell className="font-medium text-slate-900 dark:text-white">{category.name}</TableCell>
+                <TableCell className="text-slate-700 dark:text-slate-300">{category.description}</TableCell>
                 <TableCell>
                   <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-primary/20 text-primary text-sm font-bold">
                     {category.sort_order}
                   </span>
                 </TableCell>
                 <TableCell>
-                  {category.is_required ? (
-                    <Badge className="bg-green-500/20 text-green-400 border border-green-500/30 whitespace-nowrap">Pflicht</Badge>
-                  ) : (
-                    <Badge variant="outline" className="border-white/20 text-slate-400 whitespace-nowrap">Optional</Badge>
-                  )}
+                  <div className="flex flex-col gap-1 items-start">
+                    {category.is_required ? (
+                      <Badge className="bg-green-500/20 text-green-600 dark:text-green-400 border border-green-500/30 whitespace-nowrap">Pflicht</Badge>
+                    ) : (
+                      <Badge variant="outline" className="border-slate-200 dark:border-white/20 text-slate-500 dark:text-slate-400 whitespace-nowrap">Optional</Badge>
+                    )}
+                    {category.allow_multiselect && (
+                      <Badge className="bg-purple-500/20 text-purple-600 dark:text-purple-400 border border-purple-500/30 whitespace-nowrap">
+                        Multi ({category.free_items_limit} frei)
+                      </Badge>
+                    )}
+                  </div>
                 </TableCell>
                 <TableCell className="text-right">
                   <div className="flex justify-end gap-2">
                     <CategoryDialog category={category}>
-                      <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-white">
+                      <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
                         <Edit2 className="h-4 w-4" />
                       </Button>
                     </CategoryDialog>
@@ -103,7 +114,7 @@ export function CategoryList({ initialCategories }: { initialCategories: Categor
             ))}
             {categories.length === 0 && (
               <TableRow>
-                <TableCell colSpan={6} className="text-center py-10 text-slate-400">
+                <TableCell colSpan={6} className="text-center py-10 text-slate-500 dark:text-slate-400">
                   Keine Kategorien gefunden.
                 </TableCell>
               </TableRow>