# Hub × FluxUI — Visuelle Vereinheitlichung Portal ↔ Hub

> **Ziel**: Das Portal-Backend (User-Panel, Admin-Bereich) wird visuell an den
> Hub-Stil (`pressekonto.test`-Landing + Auth-Seiten) angeglichen, **ohne
> FluxUI aufzugeben**. Die FluxUI-Komponenten werden über Design-Tokens und
> CSS-Overrides ans Hub-Design adaptiert.

## Status

| Phase | Beschreibung | Status |
|-------|--------------|--------|
| 0 | Design-Tokens vereinheitlichen | **✅ abgeschlossen** (2026-05-19) |
| 1 | Portal-Shell (Sidebar, Layout, Brand-Mark) | **✅ abgeschlossen** (2026-05-19) |
| 2 | Customer-Dashboard auf Mockup-Stil | **✅ abgeschlossen** (in P1, verfeinert in 4J) |
| 3 | Admin-Dashboard konsistent | **✅ abgeschlossen** (in P1, verfeinert in 4J) |
| 4 | Listen-/Detail-Pages (4A–4J) | **✅ abgeschlossen** (2026-05-20) |
| 5 | Dark Mode konsistent | **✅ abgeschlossen** (2026-05-20) |
| 6 | Auth-Cleanup | **✅ abgeschlossen** (2026-05-20) |
| 7 | Press-Release-Form-Refactor (7A–7F) | **✅ abgeschlossen** (2026-05-22) |

Die hub-flux-Roadmap (Phase 0–6) ist vollständig abgeschlossen; Phase 7
(PM-Form-Refactor) als Folge-Initiative ebenfalls. Detail-Plan für Phase 7:
[`19-PHASE-7-PRESS-RELEASE-FORM.md`](./19-PHASE-7-PRESS-RELEASE-FORM.md).

→ Tagesaktueller Fortschritt: [`PROGRESS.md`](./PROGRESS.md)

## Dokumente in diesem Verzeichnis

| Datei | Zweck |
|-------|-------|
| [`README.md`](./README.md) | Diese Übersicht: Entscheidung, Architektur, Status |
| [`01-PHASE-0-TOKENS.md`](./01-PHASE-0-TOKENS.md) | Phase 0: Tokens vereinheitlichen (aktiv) |
| [`02-PHASE-1-PORTAL-SHELL.md`](./02-PHASE-1-PORTAL-SHELL.md) | Phase 1: Portal-Shell ans Hub-Design angleichen |
| [`03-WEITERE-PHASEN.md`](./03-WEITERE-PHASEN.md) | Outline für Phasen 2–6 |
| [`PROGRESS.md`](./PROGRESS.md) | Fortschritts-Log + Notizen |

## Visuelle Vorlagen

Maßgebliche Mockups für diese Arbeit:

- `dev/frontend/tailwind_v3/User Dashboard presseportale.html` — Light-Variante
- `dev/frontend/tailwind_v3/User Dashboard presseportale Dark.html` — Dark-Variante
- `dev/frontend/tailwind_v3/Login pressekonto A3 Tailwind.html` — Hub-Auth-Vorlage (bereits umgesetzt)
- `dev/frontend/tailwind_v3/Hub Landing pressekonto-2.html` — Hub-Landing-Vorlage (bereits umgesetzt)

## Architektur-Entscheidung

### Plan B (gewählt) — Tokens teilen, Komponenten getrennt lassen

```
┌─────────────────────────────────────────────────────────────────┐
│                  shared/design-tokens.css                       │
│  (Hub-Blau, Bernstein, Buchpapier, Inter Tight, JetBrains Mono) │
└────────────────┬────────────────────────┬───────────────────────┘
                 │                        │
        ┌────────▼─────────┐    ┌─────────▼──────────┐
        │   portal.css     │    │  theme-pressekonto │
        │   + FluxUI       │    │  + shared-styles   │
        │   (Backend)      │    │  (Hub-Landing/Auth)│
        └──────────────────┘    └────────────────────┘
        build/portal             build/web
```

**Warum nicht alles in FluxUI?**
- Die Hub-Landing lebt von Atmosphäre (konzentrische Kreise, Hub-Grid, eigene
  Eyebrows, Bridge-Cards), die mit FluxUI-Komponenten nicht 1:1 abbildbar ist
- FluxUI würde im Hub-Frontend zur unnötigen Bundle-Last
- Der gerade gebaute Hub-Login wäre verloren

**Warum nicht alles Custom?**
- 77 Blade-Dateien nutzen FluxUI – ein Rewrite wäre Aufwand ohne Mehrwert
- FluxUI-Tabellen, -Forms, -Modals, -Date-Picker sind im Backend Gold wert
- FluxUI ist sehr gut **customizable** über CSS-Custom-Properties
  und `[data-flux-*]`-Selectoren

### Verworfen — Plan A (alles FluxUI) & Plan C (alles im Web-Build)

Siehe Chat-Historie für die Begründung. Kurz: zu viel Aufwand, zu wenig
Mehrwert, würde bereits gelieferte Hub-Atmosphäre verschlechtern.

## Branding & Tokens

### Brand
- **Marke**: pressekonto (verbindlich, für Portal und Hub)
- **Wortmarke**: `<x-web.brand-mark brand="pressekonto" />` — auch im Portal
- **Logo-Komponente** `<x-app-logo>` wird im Portal **abgelöst**

### Farben (Light)

| Token | Wert | Rolle |
|-------|------|-------|
| `--color-hub` | `#1A2540` | **Primärer Akzent** (Sidebar-Active, Primary-Buttons, Eyebrows) |
| `--color-hub-2` | `#243152` | Hover-Stufe von `--color-hub` |
| `--color-hub-3` | `#2E3D66` | Tertiäre Stufe (Dekoration auf dunklem Grund) |
| `--color-hub-soft` | `#E5E9F1` | Active-Pill-Hintergrund in der Sidebar |
| `--color-accent` | `#B07A3A` | **Sekundärer Akzent** (Bernstein – Notifications, Datenqualität, Empfehlungs-Ribbon) |
| `--color-accent-deep` | `#8A5E27` | Akzent-Hover/Text |
| `--color-bg` | `#F6F4EF` | Warmes Buchpapier — Haupt-Hintergrund |
| `--color-bg-elev` | `#FBFAF6` | Elevation 1 (Sidebar, Topbar, leichte Cards) |
| `--color-bg-card` | `#FFFFFF` | Reine Cards |
| `--color-bg-rule` | `#E2DDD0` | Standard-Trennlinien |
| `--color-ink` | `#1A1F1C` | Primärtext |
| `--color-ink-2` | `#3A413D` | Sekundärtext (Begleittexte) |
| `--color-ink-3` | `#5A6360` | Meta, Labels |
| `--color-ink-4` | `#8A918D` | Disabled, Hintergrund-Meta |

### Farben (Dark) — laut Mockup
Wird in Phase 5 ausgearbeitet. Hub-Blau wird heller (`#5A78C2`), Akzent
wärmer (`#D9A560`), Hintergrund tief Anthrazit (`#0E1218`). Wichtig: die
Token-Namen bleiben gleich, nur die Werte tauschen — keine doppelte
UI-Pflege.

### Typografie

| Token | Wert |
|-------|------|
| `--font-sans` | `"Inter Tight", Inter, system-ui, sans-serif` |
| `--font-mono` | `"JetBrains Mono", "SF Mono", ui-monospace, monospace` |
| `--font-serif` | `"Source Serif 4", Georgia, serif` (nur für Brand-Mark) |

Aktuell im Portal: **Instrument Sans** → wird in Phase 1 abgelöst.

## Konventionen

- **Light Mode** ist Default. `class="dark"` auf `<html>` wird entfernt.
- Dark Mode wird via `prefers-color-scheme` + Flux Appearance-Switcher
  gesteuert. Token-Layer übernimmt die Umschaltung.
- Token-Names sind **identisch** zwischen Hub-Theme und Portal-Theme.
  Sowohl `bg-bg-elev` als auch `bg-hub-soft` funktionieren in beiden Welten.
- FluxUI-Komponenten werden **nicht überschrieben**, sondern über
  `[data-flux-*]`-Selectoren in `portal.css` ergänzt — minimaler Eingriff,
  maximale Kompatibilität mit FluxUI-Updates.

## Was wir bewusst NICHT machen

- **Kein FluxUI-Rewrite**. Nur Token-Anpassung + Selektor-Overrides.
- **Keine zweite UI-Pflege für Dark Mode**. Tokens-only-Ansatz.
- **Kein Verschmelzen der Builds** (Phase 6 optional).
- **Keine Änderung an Volt-/Livewire-Logik** in dieser Arbeit.

## Wer ändert was

- **Diese Doku** wird mit jeder Phase aktualisiert. `PROGRESS.md` enthält
  die Tages-Notes.
- Code-Änderungen sind kleinteilig und werden in eigenen Commits gebündelt
  (`hub-flux: phase 0 — tokens vereinheitlicht`, etc.).
- Bei Unklarheiten/Entscheidungen: kurz in `PROGRESS.md` festhalten,
  damit nachvollziehbar bleibt warum etwas so und nicht anders.