13-05-2026 Frontend DEV + HUB

2026-05-13 18:11:03 +02:00 · 2026-05-13 18:11:03 +02:00 · 092ee0e918
commit 092ee0e918
parent 5b8bdf4182
24 changed files with 3560 additions and 34 deletions
--- a/dev/frontend/ENTWICKLUNGSKONZEPT-BusinessPortal24-Frontend.md
+++ b/dev/frontend/ENTWICKLUNGSKONZEPT-BusinessPortal24-Frontend.md
@ -1,12 +1,12 @@
-# Entwicklungskonzept – BusinessPortal24 & Presseecho Frontend
+# Entwicklungskonzept – BusinessPortal24, Presseecho & presseportale-Hub Frontend

-> **Stand:** 12. Mai 2026
-> **Domains:** `businessportal24.test` / `businessportal24.com` · `presseecho.test` / `presseecho.com`
-> **Theme-Slugs:** `businessportal24` (warm-rotes Editorial) · `presseecho` (grünes Editorial)
+> **Stand:** 13. Mai 2026
+> **Domains:** `businessportal24.test` / `.com` · `presseecho.test` / `.de` · `presseportale.test` / `.com` (Hub)
+> **Theme-Slugs:** `businessportal24` (warm-rotes Editorial) · `presseecho` (grünes Editorial) · `presseportale` (Hub-Blau · Publisher-Landing)
 > **Assets-Dir (geteilt):** `public/build/web/`
-> **Ziel:** Editoriales DACH-Pressemitteilungs-Portal mit 1:1-Mockup-Umsetzung. Presseecho nutzt die **gleiche Komponenten-Architektur** wie BP24 und unterscheidet sich nur via Theme-Tokens + Brand-Konfiguration.
+> **Ziel:** Editoriales DACH-Pressemitteilungs-Ökosystem mit 1:1-Mockup-Umsetzung. Presseecho nutzt die **gleiche Komponenten-Architektur** wie BP24, der Hub `presseportale.com` ist eine **eigenständige Publisher-Landing** mit klar abgegrenztem Charakter (Hub-Blau + Bernstein, kein Editorial-Feed).

-Dieses Dokument beschreibt den aktuellen Stand und die wichtigsten Architekturentscheidungen der BusinessPortal24- und Presseecho-Frontend-Entwicklung. Es ist die zentrale Anlaufstelle für alle, die im Frontend weiterarbeiten oder neue Seiten ergänzen.
+Dieses Dokument beschreibt den aktuellen Stand und die wichtigsten Architekturentscheidungen der BusinessPortal24-, Presseecho- und presseportale-Hub-Frontend-Entwicklung. Es ist die zentrale Anlaufstelle für alle, die im Frontend weiterarbeiten oder neue Seiten ergänzen.

 ---

@ -14,6 +14,8 @@ Dieses Dokument beschreibt den aktuellen Stand und die wichtigsten Architektur

 Das Portal folgt einer **editorial-zeitungs-orientierten Ästhetik** mit ruhiger Beige-Surface, klarer Hierarchie über Typografie statt Cards und einer einzigen warm-roten Akzentfarbe.

+Presseecho übernimmt **dieselbe Architektur**, tauscht aber das Surface auf grünlich-getintetes Editorial-Off-White und ersetzt die warm-rote Akzentfarbe durch ein dunkles **Forest-Green** (Brand `#345636`). Die Editorial-Akzentfarbe für Eyebrows auf dunklem Grund bleibt warm-amber (`accent-warm: #e8a95f`) – das hat sich in der Iteration als beste Lesbarkeit auf den dunklen Forest-Panels bewährt.
+
 | Datei | Zweck |
 | --- | --- |
 | `dev/frontend/Pass B _ _ Deutschland _aktiv.png` | Visuelle Referenz Desktop |
@ -65,7 +67,9 @@ Request (Host: presseecho.test)

 Lokale Domain-Simulation:
 - `.env`: `DEV_SIMULATE_DOMAIN=true`, `DEV_SIMULATED_DOMAIN=businessportal24.test|presseecho.test`
- Alternativ: `?theme=businessportal24|presseecho` als Query-Parameter
+- Alternativ: `?theme=businessportal24|presseecho|presseportale` als Query-Parameter
+
+> **Hub-Sonderfall (`presseportale.test`):** Diese Domain ist gleichzeitig **Admin-Backend** (Auth/Admin/Customer-Routen, theme = `main`, Build-Dir `build/portal/`) **und** öffentliche **Hub-Landing** (theme = `presseportale`, Build-Dir `build/web/`). In `config/domains.php` existieren beide Einträge (`portal` und `presseportale`) für dieselbe `domain_name`. Der `ThemeServiceProvider` matcht zuerst `portal` (Backend-Standard); für die öffentliche Landing schaltet **`routes/web.php` per `$applyWebDomainConfig('presseportale')` explizit auf das Hub-Theme** um. Auth- und Admin-Routen bleiben unbeeinflusst.

 ### 3.1 Generischer Daten-Provider

@ -78,19 +82,134 @@ view('web.businessportal24', $webHomeData(Portal::Businessportal24));

 Die Trennung der Portale geschieht über `whereIn('portal', [$primaryPortal->value, Portal::Both->value])`.

+### 3.1.1 Presseecho-Farbpalette (Stand 13.05.2026, finalisiert)
+
+Damit das Theme für Presseecho dokumentiert ist, hier der **verbindliche Token-Snapshot** aus `theme-presseecho.css`:
+
+```css
+@theme {
+    /* Surfaces (grünlich-getintete Editorial-Vorlage) */
+    --color-bg:                  #f2f4ed;
+    --color-bg-elev:             #fafbf7;
+    --color-bg-rule:             #dde2d3;
+    --color-bg-rule-strong:      #1b2417;
+    --color-bg-card-warm:        #ecefe3;
+    --color-bg-card-warm-border: #c7cfb6;
+
+    /* Dunkle Editorial-Panels (Topbar, CTA, Newsletter, Footer) */
+    --color-topbar:  #1a3d2e;   /* linear-gradient(135deg, #1a3d2e 0%, #122d22 100%) */
+    --color-topbar2: #122d22;
+
+    /* Ink (warm-grün, gedämpft) */
+    --color-ink:           #1b2417;
+    --color-ink-2:         #324132;
+    --color-ink-3:         #6a7766;
+    --color-ink-4:         #98a294;
+    --color-ink-on-dark:   #f0f4eb;
+    --color-ink-on-dark-2: #b1b9ab;
+
+    /* Brand: dunkles Forest-Green */
+    --color-brand:      #345636;
+    --color-brand-deep: #243c25;
+    --color-brand-soft: #dbe7d3;
+
+    /* Editorial-Akzente */
+    --color-accent-warm:         #e8a95f;   /* warmer Bernstein für Eyebrows auf Dunkel */
+    --color-ink-on-dark-muted:   #859485;
+    --color-ink-on-dark-rule:    #28332b;
+    --color-bg-card-warm-hover:  #dde3cc;
+    --color-bg-card-warm-rule:   #b7c0a2;
+    --color-card-warm-cat:       #5f6a52;
+    --color-card-warm-title:     #2e3826;
+    --color-feature-line:        #a8c8a8;
+    --color-feature-dot:         #c4dcc4;
+}
+
+/* Gradient-Komponenten-Klassen */
+.bg-feature-grad { background-image: linear-gradient(135deg, #2c4733, #15281c); }
+.bg-hero-grad    { background-image: linear-gradient(135deg, #2c4733, #1a2a1f); }
+```
+
+**Iteration des Topbar-Gradients:**
+
+| Versuch | Werte | Bewertung |
+| --- | --- | --- |
+| Startwert | `#1b2a1f → #25342a` | zu dunkel/zu neutral |
+| Erste Variante | `#1f4d3a → #163a2c` | **zu hell** |
+| **Final** | **`#1a3d2e → #122d22`** | **abgenommen** ✅ |
+
+### 3.1.2 presseportale-Hub-Palette (Stand 13.05.2026)
+
+Der **Hub** ist bewusst eigenständig positioniert: er ist **kein Editorial-Feed**, sondern eine reine Publisher-Landing („Ein Konto – zwei Reichweiten"). Er bekommt daher einen ganz eigenen Charakter:
+
+* **Surface:** warmes Buchpapier wie bei BP24/Presseecho (`--color-bg: #f6f4ef`) – signalisiert Familien-Zugehörigkeit.
+* **Primary:** Hub-Blau `#1A2540` mit Gradient nach `#243152` (Topbar, CTAs, alle „Hub"-Akzente).
+* **Akzent:** gedecktes Bernstein `#B07A3A` – **bewusst gewählt**, weil weder Orange (BP24) noch Grün (Presseecho). Der Hub steht visuell „zwischen" den beiden Brands.
+* **Schrift:** Inter Tight (Standardtext) + JetBrains Mono (Mono) + Source Serif 4 (**nur für Marken-Mentions** der Tochter-Portale, damit typografische Konsistenz zur jeweiligen Brand-Landing erhalten bleibt; im Hub-Fließtext nicht verwendet).
+
+Token-Snapshot aus `resources/css/web/theme-presseportale.css`:
+
+```css
+@theme {
+    /* Surfaces – gleiche Familie wie BP24/Presseecho */
+    --color-bg:              #f6f4ef;
+    --color-bg-elev:         #fbfaf6;
+    --color-bg-rule:         #e2ddd0;
+    --color-bg-card:         #ffffff;
+    --color-bg-card-warm:    #efeadc;
+
+    /* Hub-Blau – Primary */
+    --color-hub:        #1a2540;
+    --color-hub-2:      #243152;
+    --color-hub-3:      #2e3d66;
+    --color-hub-soft:   #e5e9f1;
+    --color-hub-soft-2: #cfd6e4;
+    --color-hub-line:   #7b8fbf;
+    --color-topbar:     #1a2540;
+    --color-topbar2:    #243152;
+
+    /* Bernstein-Akzent – bewusst NICHT BP24-Orange, NICHT Presseecho-Grün */
+    --color-accent:        #b07a3a;
+    --color-accent-deep:   #8a5e27;
+    --color-accent-soft:   #f1e6d3;
+
+    /* Ink, Brand-Aliase (für Komponenten, die brand-Tokens nutzen) */
+    --color-brand:         #1a2540;
+    --color-brand-deep:    #0f1729;
+    --color-brand-soft:    #e5e9f1;
+
+    /* Schrift: Inter Tight + JetBrains Mono für Hub-Inhalte,
+       Source Serif 4 wird mitgeladen, aber nur für Marken-Mentions per
+       <x-web.brand-mark> aktiviert. */
+    --font-sans:  "Inter Tight", Inter, system-ui, sans-serif;
+    --font-serif: "Source Serif 4", "Source Serif Pro", Charter, Georgia, serif;
+    --font-mono:  "JetBrains Mono", "SF Mono", ui-monospace, monospace;
+}
+```
+
+Hub-spezifische **Komponenten-Klassen** (alle in `@layer components`):
+
+* `.bg-hub-grad` → 135° `#1a2540 → #243152` (Topbar, CTA, Architektur-Knoten)
+* `.bg-hub-grad-2` → 180° `#1a2540 → #0f1729` (Footer)
+* `.bg-accent-grad` → 135° `#b07a3a → #8a5e27`
+* `.hero-grid` → subtile 48×48 px Gitterlinien als Hero-Hintergrund
+* `.section-eyebrow` → Hub-Blau-Eyebrow mit Linien-Schwanz
+* `.ribbon-recommend` → „Empfohlen für Unternehmen"-Banner auf der Pro-Tarif-Karte
+* `.faq-chev` + `details > summary` → CSS-only Accordion (kein JS nötig)
+
 ### 3.2 Brand-Konfiguration

-In `config/domains.php` liegt pro Domain ein **`brand`-Block**, der Komponenten dynamisch befüllt (Logo-Text, Tagline, Newsletter-Topics, Footer-Legal, Meta-Texte):
+In `config/domains.php` liegt pro Domain ein **`brand`-Block**, der Komponenten dynamisch befüllt (Logo-Text, Tagline, Newsletter-Topics, Footer-Legal, Meta-Texte). `name` + `accent` ergeben **zusammen** den vollständigen Markennamen – der `accent`-Teil wird im Header/Footer farbig hervorgehoben:

 ```php
 'presseecho' => [
    'theme' => 'presseecho',
    'brand' => [
-        'name' => 'presseecho',
-        'accent' => null,                       // kein Brand-Akzent (z.B. "24")
+        'name' => 'presse',                       // schwarz
+        'accent' => 'echo',                       // grün (text-brand → #345636)
        'tagline_short' => 'Pressemitteilungen · DACH',
        'tagline_long' => 'Fachmeldungen aus Wirtschaft und Industrie ...',
-        'footer_legal' => '© :year presseecho.com · Alle Rechte vorbehalten',
+        'footer_legal' => '© :year presseecho · Alle Rechte vorbehalten',
        'about_label' => 'Über presseecho',
        'meta_title' => '... – presseecho',
        'meta_description' => '...',
@ -100,8 +219,18 @@ In `config/domains.php` liegt pro Domain ein **`brand`-Block**, der Komponenten
 'businessportal24' => [
    'theme' => 'businessportal24',
    'brand' => [
-        'name' => 'businessportal',
-        'accent' => '24',                        // markenrechtlicher Brand-Akzent
+        'name' => 'businessportal',               // schwarz
+        'accent' => '24',                         // orange (text-brand → #C84A1E)
+        'footer_legal' => '© :year businessportal24 · Alle Rechte vorbehalten',
+        ...
+    ],
+],
+'presseportale' => [                              // Hub-Variante (web)
+    'theme' => 'presseportale',
+    'brand' => [
+        'name' => 'presse',                       // hub-blau
+        'accent' => 'portale',                    // bernstein
+        'footer_legal' => '© :year presseportale · Alle Rechte vorbehalten',
        ...
    ],
 ],
@ -109,6 +238,35 @@ In `config/domains.php` liegt pro Domain ein **`brand`-Block**, der Komponenten

 Komponenten (`site-header`, `site-footer`, `newsletter-strip`) lesen ihre Defaults aus `config('domains.domains.'.config('app.theme').'.brand', [...])`. Übergaben via `:brand="..."` überschreiben sie jederzeit.

+### 3.3 Brand-Mark-Konvention (verbindlich, Stand 13.05.2026)
+
+Die Schreibweise der drei Marken folgt einer einheitlichen Regel: **keine TLD-Endung am Markennamen, Akzentteil farblich hervorgehoben.** Domains (`.de`, `.com`) gehören ausschließlich in technische Felder (URLs, mailto-Adressen, Impressum) – niemals in den Marken-Schriftzug.
+
+| Marke              | Wortmarke                                  | Akzentfarbe (auto)     | Akzentfarbe (on-dark) |
+| ------------------ | ------------------------------------------ | ---------------------- | --------------------- |
+| `presseecho`       | **presse**·*echo*                          | `#345636` (Forest)     | `#9BD5B2`             |
+| `businessportal24` | **businessportal**·*24*                    | `#C84A1E` (Orange)     | `#F4B098`             |
+| `presseportale`    | **presse**·*portale*                       | `#B07A3A` (Bernstein)  | `#B07A3A`             |
+
+**Single Source of Truth:** Die Komponente `<x-web.brand-mark brand="…" />` rendert die Markenschreibung zentral inkl. Span-Splitting, Schriftart und Akzentfarbe. Sie wird überall verwendet, wo eine Marke als Fließtext-Mention erscheint:
+
+* Hub-Komponenten (`hub/top-utility-bar`, `hub/site-header`, `hub/site-footer`, `hub/brand-context-banner`)
+* Hub-View `presseportale.blade.php` (Hero-Headline, Architektur-Diagramm, Tarif-Subline, Plattform-Familie, FAQ)
+* Cross-Brand-Mentions auf BP24-/Presseecho-Landings, falls ergänzt
+
+```blade
+{{-- Standard: font-serif (Source Serif 4), Auto-Akzent --}}
+<x-web.brand-mark brand="presseecho" />
+
+{{-- In Fließtext / kleinen Schriftgrößen: font-sans (Inter Tight) --}}
+<x-web.brand-mark brand="businessportal24" :serif="false" />
+
+{{-- Auf dunklem Hintergrund (Topbar, Hub-Footer): hellere Akzentfarbe --}}
+<x-web.brand-mark brand="presseecho" variant="on-dark" />
+```
+
+Die BP24-/Presseecho-Header und -Footer rendern ihren eigenen Markennamen weiterhin über das `$brandName`+`$brandAccent`-Pattern aus der `brand`-Config (die Config liefert dasselbe Splitting `presse`+`echo`), erscheinen also typografisch identisch.
+
 ---

 ## 4. Theme-System (Tailwind v4)
@ -257,6 +415,28 @@ Alle Komponenten haben **konsistente Konventionen**:
 - Bei Listenelementen: `group` + `group-hover:text-brand` für den Titel
 - Alle Mockup-Inhalte sind als spätere Datenquellen markiert (Inline-Kommentare oder via Issue-Tracker)

+### 5.4 Hub-Komponenten (`components/web/hub/`)
+
+Der Hub `presseportale.com` hat einen **eigenen, deutlich anderen Charakter** als die beiden Brand-Portale (kein Editorial-Feed, sondern Publisher-Landing) und bekommt daher einen eigenen Komponenten-Namespace. Die Sektionen selbst (Hero, Features, How-it-works, Tarife, Plattform-Familie, Social-Proof, FAQ, CTA) sind als **inline-Markup** in `resources/views/web/presseportale.blade.php` umgesetzt, weil sie page-spezifisch sind.
+
+| Datei | Rolle |
+| --- | --- |
+| `hub/top-utility-bar.blade.php` | Schmale Hub-Blau-Topbar mit Datum, „Publisher-Hub für …"-Brand-Family-Links (rendert `<x-web.brand-mark variant="on-dark" :serif="false">`), Status/Doku/Kontakt. Props: `date`, `siblingPortals` (jetzt Liste mit `brand`-Key statt fixer Strings). |
+| `hub/site-header.blade.php` | Wortmark `presse`·`portale` (über `<x-web.brand-mark brand="presseportale" :serif="false">`) + Untertitel „Publisher · Hub", zentrale Primary-Nav (Tarife, So funktioniert es, …), Anmelden + Konto erstellen CTAs. Routes: `login`, `register`. |
+| `hub/brand-context-banner.blade.php` | **Conditional Banner** unter dem Header – greift nur bei `?from=presseecho` oder `?from=businessportal24` und zeigt: „Sie kommen von … – Ihr Konto hier funktioniert für beide Portale". Markenname über Brand-Mark (font-serif), „Zurück zu …"-Link nutzt sans-Variante. |
+| `hub/site-footer.blade.php` | 4-Spaltiger Hub-Footer (Konto / Plattform / Rechtliches + Brand-Spalte mit Plattform-Familie-Links über Brand-Mark `variant="on-dark"`), Hub-Gradient `linear-gradient(180deg,#1A2540,#0F1729)`. Brand-Block aus `config/domains.php`. |
+
+**Hub-Sektionen als inline-Blade** (in `presseportale.blade.php`):
+
+1. **Hero** mit Architektur-Diagramm rechts (zentraler Hub-Knoten + Brand-Portal-Karten + Output-Boxen, alles SVG-only).
+2. **Was Sie hier können** – 3-Karten-Grid (Veröffentlichen / Newsrooms / Reichweite).
+3. **So funktioniert es** – 4-Step-Ol mit Differenzierungs-Highlight in Schritt 3 (Bernstein-Akzent für „Unsere Qualitätssicherung").
+4. **Tarife** – 3 Karten (Starter / Standard / Pro mit `.ribbon-recommend`) + breiter Enterprise-Streifen in Hub-Blau.
+5. **Hinter presseportale.com** – 2-Spalten-Plattform-Familie mit den **Original-Brand-Gradients** der Tochter-Portale (`#1F4D3A→#163A2C` für Presseecho, `#1A1F26→#232A33` für BP24).
+6. **Aktive Newsrooms** – Prose-Auflistung statt Logo-Wall + kompakte Stats-Sidebar.
+7. **FAQ** – CSS-only-Accordion (`<details>` + `.faq-chev`) mit 8 Fragen, eine offen by default.
+8. **CTA-Wiederholung** + Footer.
+
 ---

 ## 6. Backend-Anbindung der Startseite
@ -316,7 +496,17 @@ Drei spiegelbildliche Test-Szenarien:
 2. **`feed only shows published presseecho content`** – Portal-Trennung gespiegelt: Presseecho + Both sichtbar, BP24-Only und Drafts nicht.
 3. **`shows most read releases in the sidebar`** – Hits-Sortierung.

-**Stand:** 6 passed (48 Assertions, beide Test-Dateien zusammen). Gesamt-Suite 215/216 (der eine Fail `ApiDocumentationTest` ist vorbestehend wegen fehlender `docs/api/v1.yml` und nicht UI-bezogen).
+### Datei: `tests/Feature/Web/PresseportaleHubHomeTest.php`
+
+Fünf Test-Szenarien rund um die Hub-Landing:
+
+1. **`renders the publisher landing shell`** – prüft alle Hauptsektionen sind sichtbar (Publisher-Hub, Was Sie hier können, So funktioniert es, Vier Schritte, Tarife, Starter, Standard, Pro, Enterprise, Hinter presseportale.com, Plattform im Überblick, Häufige Fragen, Loslegen, Alle Systeme betriebsbereit).
+2. **`loads the hub theme assets, not portal admin`** – stellt sicher, dass `theme-presseportale` aus dem Manifest geladen wird (nicht `theme-businessportal24` oder `theme-presseecho`).
+3. **`hides the brand-context banner without a from parameter`** – Default-Aufruf zeigt keinen „Sie kommen von …"-Banner.
+4. **`shows the brand-context banner when arriving from presseecho`** – `?from=presseecho` triggert den Banner inkl. Link „Zurück zu presseecho.de".
+5. **`shows the brand-context banner when arriving from businessportal24`** – `?from=businessportal24` triggert den Banner für BP24.
+
+**Stand:** 11 Web-Tests grün (BP24 3 + Presseecho 3 + Hub 5 = 79 Assertions). Gesamt-Suite: 220/221 (der eine Fail `ApiDocumentationTest` ist vorbestehend wegen fehlender `docs/api/v1.yml` und nicht UI-bezogen).

 ---

@ -366,12 +556,17 @@ vendor/bin/pint --dirty --format agent
 | 8 | 12.05.2026 | Empty-State des Feeds liefert Mock-Top + Mock-Liste + Anzeige (analog Hero/Sidebar) | ✅ |
 | 9 | 12.05.2026 | Live-Ticker-Animationen: Ad-Hoc-Meldungen als Endlos-Laufband (`ticker-marquee-track`, respektiert `prefers-reduced-motion`), rechte Kurszeile blättert via Alpine alle 5,2 s vertikal durch | ✅ |
 | 10 | 12.05.2026 | Editorial-Akzente aus Hex-Hardcodings auf Theme-Tokens migriert (`accent-warm`, `ink-on-dark-muted`, `ink-on-dark-rule`, `card-warm-*`, `feature-*`) | ✅ |
-| 11 | 12.05.2026 | Presseecho-Theme angelegt (`theme-presseecho.css` – grüner Brand, gleiche Token-Namen) und Presseecho-Startseite auf BP24-Komponenten umgestellt (`presseecho.blade.php`) | ✅ |
+| 11 | 12.05.2026 | Presseecho-Theme angelegt (`theme-presseecho.css` – gleiche Token-Namen) und Presseecho-Startseite auf BP24-Komponenten umgestellt (`presseecho.blade.php`) | ✅ |
+| 11a | 13.05.2026 | Editorial-Fonts-Loader im `web-master.blade.php` für presseecho freigeschaltet (Source Serif 4 + Inter Tight + JetBrains Mono via bunny.net, Montserrat nur noch für Portal/Legacy). | ✅ |
+| 11b | 13.05.2026 | **Presseecho-Farbpalette finalisiert** (vom Design abgesegnet): grünlich-getintete Surfaces (`--color-bg: #f2f4ed`, Card-Warm `#ecefe3`/`#c7cfb6`), Brand bleibt **dunkles Forest** `#345636` mit Deep `#243c25` und Soft `#dbe7d3`. Topbar-Gradient nach Iteration auf `linear-gradient(135deg, #1a3d2e 0%, #122d22 100%)` festgelegt – satter Forest-Ton, ohne zu hell zu wirken. Feature- und Hero-Gradient grün getintet (`#2c4733 → #15281c` / `#2c4733 → #1a2a1f`). Editorial-Akzent bleibt warm-amber (`accent-warm: #e8a95f`) für Eyebrows auf dunklem Grund. | ✅ |
 | 12 | 12.05.2026 | `routes/web.php`: Daten-Provider generalisiert zu `$webHomeData(Portal)` – beide Domains nutzen denselben Code-Pfad | ✅ |
 | 13 | 12.05.2026 | Brand-Konfiguration in `config/domains.php` pro Domain (`brand.name`, `brand.accent`, `brand.tagline_*`, `brand.newsletter_topics`, `brand.footer_legal`, `brand.about_label`) – `site-header`, `site-footer`, `newsletter-strip` lesen daraus | ✅ |
 | 14 | 12.05.2026 | `press-release-feed`-Volt-Component portal-agnostisch (Prop `:portal`); Aufruf vom View-Layer aus | ✅ |
 | 15 | 12.05.2026 | `PresseechoHomeTest` analog zu `Businessportal24HomeTest` (3 Szenarien, RefreshDatabase) | ✅ |
-| 16 | 12.05.2026 | **Aktuell offen:** Detailseite, Branchenseite, Veröffentlichen-Landing für beide Domains | 🟡 |
+| 16 | 13.05.2026 | **presseportale-Hub-Landing live**: neues Web-Theme `presseportale` (Hub-Blau + Bernstein, `theme-presseportale.css`), eigener Komponenten-Namespace `components/web/hub/` (Top-Bar, Site-Header, Brand-Context-Banner, Site-Footer), Hub-View `web/presseportale.blade.php` mit Hero/Architektur-Diagramm, Features, How-it-works, Tarife (Starter/Standard/Pro+Ribbon, Enterprise-Streifen), Plattform-Familie, Aktive-Newsrooms, FAQ-Accordion, CTA. `routes/web.php` schaltet für `presseportale.test` auf das Hub-Theme um. Root-Route in `routes/admin.php` entfernt (Layout referenziert jetzt `route('dashboard')`). | ✅ |
+| 17 | 13.05.2026 | `PresseportaleHubHomeTest` (5 Szenarien inkl. Brand-Context-Banner-Conditional). Vite-Config + ThemeHelper + `web-master`-Fonts (Inter Tight + JetBrains Mono ohne Serif) für `presseportale` ergänzt. | ✅ |
+| 18 | 13.05.2026 | **Brand-Mark-Konvention etabliert** (Feintuning Marken-Schreibweise): keine TLD am Markenschriftzug, Akzent farblich vom Basis-Wort abgesetzt. Single Source of Truth `<x-web.brand-mark>` (Marken-Tabelle inkl. Standard- und On-Dark-Akzentfarben, Serif/Sans-Switch). `config/domains.php` umgestellt (`presseecho`: `name=presse`/`accent=echo`; `presseportale`: `name=presse`/`accent=portale`; Footer-Legal & Meta-Texte ohne TLD). Hub-Komponenten und Hub-View durchgehend auf Brand-Mark migriert (Top-Utility-Bar, Site-Header, Brand-Context-Banner, Site-Footer, Hero-Headline, Architektur-Diagramm, Tarif-Subline, Plattform-Familie, FAQ). Hub-Theme bekommt Source Serif 4 als `--font-serif` (für Marken-Mentions) – Bunny-Font-Loader erweitert. **+1 neuer Test `uses the brand-mark splitting without TLDs`**; alle 12 Web-Tests grün. | ✅ |
+| 19 | 12.05.2026 | **Aktuell offen:** Detailseite, Branchenseite, Veröffentlichen-Landing für BP24 + Presseecho. Hub-Folgeseiten (Konto-Erstellen-Flow als Landing, Tarif-Detail, Doku-Hub) ebenfalls offen. | 🟡 |

 ---

@ -385,9 +580,10 @@ vendor/bin/pint --dirty --format agent
 | 4 | **Veröffentlichen-Landing** umsetzen (Variante A) | `tailwind_v3/Veröffentlichen Tailwind.html` + `Ver_ffentlichen _ Variante A _aktiv_.png` | 🔴 offen |
 | 5 | **Echte Datenquellen** für aktuell statische Komponenten anbinden: Live-Ticker (Ad-Hoc-Meldungen), Events-Week, Newsletter-Topics, Industry-Spotlight-Studie | – | 🔴 offen |
 | 6 | **Legacy-URL-Mapping** für Kategorien + Pressemitteilungen festlegen + Tests | siehe Umsetzungskonzept §13 | 🔴 offen |
-| 7 | **Presseecho-Ableitung** als zweites Web-Theme aus stabiler BP24-Basis | – | 🔴 offen |
+| 7 | **Presseecho-Ableitung** als zweites Web-Theme aus stabiler BP24-Basis | – | ✅ **erledigt (13.05.2026)** – Startseite live über `theme-presseecho.css` + Brand-Config, gleiche Komponenten wie BP24 |
+| 8 | **Detailseite/Branchenseite ebenfalls für Presseecho** durchziehen, sobald BP24-Templates stehen (sollte ein reiner Theme-Switch werden) | siehe oben | 🔴 offen |

-**Reihenfolge-Begründung:** Erst wenn Detailseite + Branchenseite + Veröffentlichen vorhanden sind, sind die wiederverwendbaren Bausteine klar genug abstrahiert. Eine zu frühe Abstraktion auf Basis nur der Startseite würde Re-Work erzeugen.
+**Reihenfolge-Begründung:** Erst wenn Detailseite + Branchenseite + Veröffentlichen vorhanden sind, sind die wiederverwendbaren Bausteine klar genug abstrahiert. Eine zu frühe Abstraktion auf Basis nur der Startseite würde Re-Work erzeugen. Presseecho profitiert dann automatisch davon (nur Token-Switch).

 ---

--- a/dev/frontend/tailwind_v3/Hub
+++ b/dev/frontend/tailwind_v3/Hub
--- a/dev/frontend/tailwind_v3/Login
+++ b/dev/frontend/tailwind_v3/Login
@ -0,0 +1,301 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>presseportale.com — Anmelden</title>
+
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+
+<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
+<script>
+  tailwind.config = {
+    theme: {
+      extend: {
+        colors: {
+          bg:           "#F6F4EF",
+          "bg-elev":    "#FBFAF6",
+          "bg-rule":    "#E2DDD0",
+          "bg-rule-2":  "#CFC8B5",
+          card:         "#FFFFFF",
+          hub:          "#1A2540",
+          "hub-2":      "#243152",
+          "hub-soft":   "#E5E9F1",
+          accent:       "#B07A3A",
+          "accent-deep":"#8A5E27",
+          ink:    "#1A1F1C",
+          "ink-2":"#3A413D",
+          "ink-3":"#5A6360",
+          "ink-4":"#8A918D",
+        },
+        fontFamily: {
+          sans: ['"Inter Tight"','Inter','system-ui','sans-serif'],
+          mono: ['"JetBrains Mono"','"SF Mono"','ui-monospace','monospace'],
+        },
+      }
+    }
+  };
+</script>
+
+<style type="text/tailwindcss">
+  @layer components {
+    /* Field */
+    .field-input {
+      @apply w-full bg-white border border-bg-rule rounded-md
+             px-[13px] py-[11px] text-[14px] text-ink
+             outline-none transition-[border-color,box-shadow,background] duration-150;
+    }
+    .field-input::placeholder { color:#8A918D; }
+    .field-input:hover { @apply border-bg-rule-2; }
+    .field-input:focus {
+      @apply border-hub;
+      box-shadow: 0 0 0 3px rgba(26,37,64,0.10);
+    }
+    .field-label { @apply block text-[12.5px] font-semibold text-ink mb-1.5; }
+
+    /* Checkbox */
+    .check {
+      appearance:none; -webkit-appearance:none;
+      width:16px; height:16px;
+      border:1.5px solid #CFC8B5; border-radius:3px;
+      background:#FFFFFF; cursor:pointer; position:relative;
+      flex-shrink:0; transition: border-color .12s, background .12s;
+      margin:0;
+    }
+    .check:hover { border-color:#1A2540; }
+    .check:checked { background:#1A2540; border-color:#1A2540; }
+    .check:checked::before {
+      content:""; position:absolute;
+      left:4px; top:1px; width:5px; height:9px;
+      border:solid #fff; border-width:0 1.8px 1.8px 0;
+      transform:rotate(42deg);
+    }
+
+    /* Buttons */
+    .btn-primary {
+      @apply w-full inline-flex items-center justify-center gap-2
+             px-4 py-[11px] bg-hub text-white rounded-md
+             text-[14px] font-semibold transition-colors hover:bg-hub-2;
+    }
+    .btn-outline {
+      @apply w-full inline-flex items-center justify-center gap-2
+             px-4 py-[10px] bg-white text-ink rounded-md
+             border border-bg-rule text-[13px] font-semibold
+             transition-colors hover:bg-bg-elev hover:border-bg-rule-2;
+    }
+    .btn-sso {
+      @apply inline-flex items-center justify-center gap-2
+             px-3 py-[9px] bg-white text-ink rounded-md
+             border border-bg-rule text-[13px] font-semibold
+             transition-colors hover:bg-bg-elev hover:border-bg-rule-2;
+    }
+
+    /* Eyebrow */
+    .eyebrow-hub {
+      @apply text-[10.5px] font-bold tracking-[0.22em] uppercase text-hub;
+    }
+
+    /* Hub link */
+    .link-hub { @apply text-hub font-semibold no-underline hover:underline; text-underline-offset:3px; }
+  }
+</style>
+
+<style>
+  html, body { margin:0; padding:0; }
+  body { background:#F6F4EF; }
+
+  /* Atmosphäre: Raster + konzentrische Kreise */
+  .hub-grid {
+    position:absolute; inset:0;
+    background-image:
+      linear-gradient(to right, rgba(26,37,64,0.045) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(26,37,64,0.045) 1px, transparent 1px);
+    background-size: 56px 56px;
+    pointer-events:none;
+  }
+  .from-banner {
+    background:#FFFFFF;
+    border:1px solid #E2DDD0;
+    border-left:2px solid #1A2540;
+    border-radius:4px;
+    padding:8px 14px;
+    font-size:12px; color:#3A413D;
+  }
+  .field-pw-wrap { position:relative; }
+  .field-affix {
+    position:absolute; top:50%; right:10px; transform:translateY(-50%);
+    color:#5A6360; font-size:11.5px; font-weight:600;
+    background:transparent; border:0; cursor:pointer;
+    padding:4px 6px; border-radius:3px;
+    font-family:inherit;
+  }
+  .field-affix:hover { color:#1A2540; background:#F6F4EF; }
+</style>
+</head>
+
+<body class="font-sans text-ink antialiased">
+
+<!-- Vollflächiger Screen 100vh; Atmosphäre liegt hinter allem -->
+<div class="relative min-h-screen flex flex-col overflow-hidden bg-bg">
+
+  <!-- Atmosphäre: Raster -->
+  <div class="hub-grid" aria-hidden="true"></div>
+  <!-- Atmosphäre: konzentrische Kreise um die Bildmitte -->
+  <svg class="absolute inset-0 w-full h-full pointer-events-none" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1280 880" aria-hidden="true">
+    <g opacity="0.09" stroke="#1A2540" fill="none" stroke-width="1">
+      <circle cx="640" cy="470" r="160"/>
+      <circle cx="640" cy="470" r="260"/>
+      <circle cx="640" cy="470" r="380"/>
+      <circle cx="640" cy="470" r="510"/>
+      <circle cx="640" cy="470" r="660"/>
+    </g>
+  </svg>
+
+  <!-- 3px Hub-Blau-Streifen ganz oben -->
+  <div class="relative h-[3px] bg-hub z-10"></div>
+
+  <!-- Header -->
+  <header class="relative z-10 px-10 py-[22px] flex items-center justify-between">
+    <a href="#" class="flex items-baseline gap-2.5 no-underline">
+      <span class="text-[19px] font-bold tracking-[-0.4px] text-hub leading-none">
+        presseportale<span class="text-accent">.com</span>
+      </span>
+      <span class="inline-block w-px h-[14px] bg-bg-rule"></span>
+      <span class="text-[9.5px] font-bold tracking-[0.22em] uppercase text-ink-3">
+        Publisher · Hub
+      </span>
+    </a>
+    <span class="text-[13px] text-ink-3">
+      Noch kein Konto? <a href="#" class="link-hub">Konto erstellen</a>
+    </span>
+  </header>
+
+  <!-- Center: Auth card -->
+  <main class="relative z-10 flex-1 flex items-center justify-center px-10 py-5">
+    <div class="w-full max-w-[440px]">
+
+      <!-- from=presseecho Banner -->
+      <div class="from-banner mb-3.5">
+        Ihr Konto funktioniert auch für <strong class="font-semibold text-ink">presseecho.de</strong>
+        und <strong class="font-semibold text-ink">businessportal24.com</strong>.
+      </div>
+
+      <!-- Card -->
+      <div class="bg-card border border-bg-rule rounded-lg px-9 pt-[34px] pb-8"
+           style="box-shadow:0 1px 0 rgba(26,31,28,0.03), 0 20px 50px -32px rgba(26,37,64,0.28);">
+
+        <div class="eyebrow-hub mb-2.5">Anmeldung im Publisher-Hub</div>
+        <h1 class="text-[26px] font-bold tracking-[-0.5px] leading-[1.2] m-0 mb-7 text-ink">
+          Willkommen zurück
+        </h1>
+
+        <form onsubmit="event.preventDefault();" class="space-y-[18px]">
+
+          <!-- Email -->
+          <div>
+            <label class="field-label" for="email">E-Mail-Adresse</label>
+            <input id="email" type="email" autocomplete="username"
+                   class="field-input"
+                   placeholder="redaktion@ihr-unternehmen.de" />
+          </div>
+
+          <!-- Password -->
+          <div>
+            <div class="flex items-baseline justify-between mb-1.5">
+              <label class="field-label !mb-0" for="pw">Passwort</label>
+              <a href="#" class="link-hub text-[12px]">Passwort vergessen?</a>
+            </div>
+            <div class="field-pw-wrap">
+              <input id="pw" type="password" autocomplete="current-password"
+                     class="field-input pr-[72px]"
+                     placeholder="••••••••••" />
+              <button type="button" class="field-affix" data-toggle-pw="pw">Anzeigen</button>
+            </div>
+          </div>
+
+          <!-- Remember -->
+          <label class="flex items-center gap-2.5 text-[12.5px] text-ink-2 cursor-pointer select-none">
+            <input type="checkbox" class="check" checked />
+            Angemeldet bleiben
+          </label>
+
+          <!-- Primary -->
+          <button type="submit" class="btn-primary !mt-[22px]">Anmelden</button>
+
+          <!-- oder -->
+          <div class="flex items-center gap-3 !mt-[22px] !mb-[14px]">
+            <span class="flex-1 h-px bg-bg-rule"></span>
+            <span class="text-[11px] font-semibold tracking-[0.18em] uppercase text-ink-3">oder</span>
+            <span class="flex-1 h-px bg-bg-rule"></span>
+          </div>
+
+          <!-- Magic-Link -->
+          <button type="button" class="btn-outline !mt-0">
+            <svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <rect x="2" y="3" width="12" height="10" stroke="currentColor" stroke-width="1.4"/>
+              <path d="M2.5 4l5.5 5 5.5-5" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
+            </svg>
+            Magic-Link senden
+          </button>
+
+          <!-- SSO -->
+          <div class="grid grid-cols-2 gap-2.5 !mt-2.5">
+            <button type="button" class="btn-sso">
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.76h3.56c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.99.66-2.25 1.06-3.72 1.06-2.86 0-5.29-1.93-6.15-4.53H2.18v2.84A11 11 0 0012 23z" fill="#34A853"/>
+                <path d="M5.85 14.11A6.6 6.6 0 015.5 12c0-.73.13-1.44.35-2.11V7.05H2.18A11 11 0 001 12c0 1.78.43 3.46 1.18 4.95l3.67-2.84z" fill="#FBBC05"/>
+                <path d="M12 5.38c1.62 0 3.07.56 4.21 1.65l3.16-3.16C17.45 2.09 14.96 1 12 1 7.7 1 3.99 3.47 2.18 7.05l3.67 2.84C6.71 7.3 9.14 5.38 12 5.38z" fill="#EA4335"/>
+              </svg>
+              Google
+            </button>
+            <button type="button" class="btn-sso">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                <rect x="2"  y="2"  width="9" height="9" fill="#F25022"/>
+                <rect x="13" y="2"  width="9" height="9" fill="#7FBA00"/>
+                <rect x="2"  y="13" width="9" height="9" fill="#00A4EF"/>
+                <rect x="13" y="13" width="9" height="9" fill="#FFB900"/>
+              </svg>
+              Microsoft
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+
+  <!-- Micro-Footer -->
+  <footer class="relative z-10 px-10 pt-[18px] pb-[26px] flex items-center justify-between text-[11.5px] text-ink-3">
+    <span>
+      SSL <span class="text-ink-4 mx-2">·</span>
+      Daten in DE <span class="text-ink-4 mx-2">·</span>
+      2-Faktor verfügbar
+    </span>
+    <span>
+      <a href="#" class="text-ink-3 no-underline hover:text-ink">Impressum</a>
+      <span class="text-ink-4 mx-2">·</span>
+      <a href="#" class="text-ink-3 no-underline hover:text-ink">Datenschutz</a>
+      <span class="text-ink-4 mx-2">·</span>
+      <a href="#" class="text-ink-3 no-underline hover:text-ink">AGB</a>
+      <span class="text-ink-4 mx-2">·</span>
+      <a href="#" class="text-ink-3 no-underline hover:text-ink">Support</a>
+    </span>
+  </footer>
+</div>
+
+<script>
+  // Password show/hide
+  document.querySelectorAll('[data-toggle-pw]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const input = document.getElementById(btn.dataset.togglePw);
+      const isPw = input.type === 'password';
+      input.type = isPw ? 'text' : 'password';
+      btn.textContent = isPw ? 'Verbergen' : 'Anzeigen';
+    });
+  });
+</script>
+
+</body>
+</html>