presseportale/dev/frontend/Umsetzungskonzept - Frontend BusinessPortal24 Startseite.md

# Umsetzungskonzept - Frontend BusinessPortal24 Startseite

**Stand:** 12. Mai 2026  
**Status:** Arbeits- und Umsetzungskonzept  
**Scope:** Startseite `businessportal24.test` / spaeter `businessportal24.com`  
**Referenzen:** `Pass B _ _ Deutschland _aktiv.html`, `Pass B _ _ Deutschland _aktiv.png`, `Mobile _ Startseite.html`, `Ver_ffentlichen _ Variante A _aktiv_.html`, Konzeptdokumente unter `docs/konzept/`

---

## 1. Ziel dieses Dokuments

Dieses Dokument uebersetzt das vorhandene Entwicklungskonzept und die Mockups in einen konkreten, abarbeitbaren Plan fuer die BusinessPortal24-Startseite.

Wichtig: Das Dokument ersetzt nicht die strategischen Konzepte, sondern passt sie an den realen Projektstand an. Im Projekt existieren bereits:

- ein Laravel-12-Backend mit Admin- und Customer-/Publisher-Bereichen,
- eine migrierte Datenbasis fuer Pressemitteilungen, Kategorien, Kontakte, Firmen und Legacy-Bezuege,
- eine config-basierte Multi-Domain-Struktur in `config/domains.php`,
- ein Web-Frontend unter `resources/views/web` und `resources/views/livewire/web`,
- ein separates Web-Asset-Bundle ueber `vite.web.config.js` und `tailwind.web.config.js`.

Das Ziel ist deshalb nicht, eine neue Multi-Brand-Architektur von null aufzubauen, sondern die bestehende Struktur zu konsolidieren, fachlich richtig auszurichten und die BusinessPortal24-Startseite aus dem Mockup heraus in echte Laravel-/Blade-/Volt-Komponenten zu ueberfuehren.

---

## 2. Relevante Ausgangslage

### 2.1 Strategische Leitplanken

BusinessPortal24 ist laut Positionierung kein allgemeines Magazin und kein Reichweiten-Versprechen. Die Marke steht fuer:

- aktuelle Unternehmens- und Wirtschaftsmeldungen,
- Mittelstand, Selbststaendige, PR-Agenturen und regionale Akteure,
- gepruefte Pressemitteilungen statt ungefiltertem SEO-Spam,
- dauerhaft auffindbare Inhalte,
- klare, sachliche, wirtschaftsnahe Tonalitaet.

Die Startseite muss deshalb eher wie ein dichter Wirtschaftsteil wirken als wie eine SaaS-Landingpage oder ein News-Magazin mit redaktionellen Versprechen.

Nicht verwenden:

- "fuehrende Plattform",
- "maximale Reichweite",
- "exklusive Interviews",
- "Analysen" als redaktionelles Versprechen, wenn diese nicht operativ erstellt werden,
- grosse Orange-/Rot-Gradienten als Hauptlook,
- generische Stock-/SaaS-Optik,
- harte Marketing-Funnels auf der Startseite.

### 2.2 Technischer Ist-Stand

Die Domain-Aufloesung ist aktuell config-basiert:

- `portal` nutzt `build/portal`, FluxUI und das Admin-/Publisher-Frontend.
- `businessportal24` nutzt `build/web`, Theme `businessportal24`, View-Prefix `web`.
- `presseecho` nutzt ebenfalls `build/web`, Theme `presseecho`, View-Prefix `web`.

Die aktuelle Web-Startseite ist unter `resources/views/web/businessportal24.blade.php` vorhanden. Sie nutzt:

- `web.layouts.web-master`,
- Volt-Komponenten wie `livewire:web.header`, `livewire:web.filter-bar`, `livewire:web.press-releases-grid`, `livewire:web.footer`,
- Blade-Komponenten wie `x-web.hero-banner`, `x-web.highlights-slider`, `x-web.section-header`, `x-web.pagination`.

Der aktuelle Stand ist aber noch stark mockdatengetrieben und stilistisch nicht voll kompatibel mit der neuen Positionierung.

### 2.3 Datenmodell-Realitaet

Die Migration ist nicht nur hypothetisch. Relevante Tabellen und Modelle existieren bereits:

- `press_releases` mit `portal`, `language`, `status`, `published_at`, `legacy_portal`, `legacy_id`,
- `categories` mit `portal`, Parent-Struktur und Legacy-Bezug,
- `press_release_images`,
- `companies`, `contacts`, Footer-Codes, Newsletter und weitere Admin-/Customer-Strukturen.

Das `Portal`-Enum kennt `presseecho`, `businessportal24` und `both`. Die Startseite muss deshalb von Anfang an mit echten Eloquent-Daten gedacht werden, nicht als statische Marketingseite.

---

## 3. Anpassung des bisherigen Entwicklungskonzepts

Das vorhandene Konzept beschreibt eine Zielarchitektur mit `BrandResolver`, `Brand`-Model, Middleware, View-Overrides und einer moeglichen `brands`-Tabelle. Dieser Ansatz ist langfristig plausibel, aber fuer den aktuellen Schritt zu gross.

Fuer die Startseite gilt:

1. Die bestehende `config/domains.php` bleibt zunaechst die fuehrende Brand-/Domain-Konfiguration.
2. `ThemeServiceProvider`, `ThemeHelper`, `web-master` und das bestehende Web-Bundle werden weiterverwendet.
3. Kein neues Brand-Model nur fuer die Startseite einfuehren.
4. Keine neue Base-Struktur unter `app/Brand` anlegen, solange der aktuelle Config-Ansatz reicht.
5. Komponenten werden dort neu gebaut oder ersetzt, wo das Mockup und die Positionierung es erzwingen.
6. Bestehende Admin-/Customer-/Publisher-Strukturen bleiben unberuehrt.

Langfristige Punkte aus dem Konzept bleiben als spaetere Ausbaustufe erhalten:

- Brand-Resolver mit DB-basierter Konfiguration,
- View-Override-Mechanik pro Brand,
- Score-/Quality-Tier-Anzeigen,
- Cross-Domain-Uebergabe zum Hub,
- differenziertere Presseecho-Logik.

### 3.1 Geklaerte Leitentscheidungen

Die offenen Fragen aus der ersten Konzeptfassung sind wie folgt entschieden:

- Region/Land wird nicht aus Legacy-Daten erwartet. Falls entsprechende Daten fehlen, wird die Information nicht angezeigt; die Felder koennen spaeter ergaenzt und dann in Filter/Metadaten aktiviert werden.
- Legacy-URLs duerfen nicht zu 404 fuehren. Bestehende Kategorie- und Pressemitteilungs-URLs muessen entweder direkt weiter rendern oder sauber auf neue kanonische Ziele gemappt werden.
- Qualitaetsstufen erscheinen auf der Startseite nur selektiv: sichtbar bei hohem Score oder Empfehlung, sonst keine Anzeige.
- `/veroeffentlichen` bleibt immer eine lokale Brand-Seite auf der jeweiligen Domain. Von dort fuehrt ein CTA in das zentrale Portal.
- Belastbare Zahlen wie Archivgroesse, Gruendungsjahr oder Anzahl aktueller Meldungen duerfen oeffentlich genutzt werden, wenn sie aus Datenbank/Import verifizierbar sind.
- Desktop ist die gesetzte Hauptvorlage. Mobile wird direkt parallel mitgeprueft; das mobile Mockup ist optische und funktionale Orientierung, die Inhalte folgen der Desktop-Variante.

---

## 4. Zielbild der BusinessPortal24-Startseite

Die Startseite beantwortet primaer: "Was ist aktuell bei Unternehmen los?"

Sie ist keine Verkaufsseite fuer Publisher. Der Publisher-CTA ist sichtbar, aber nicht der Hauptinhalt. Die Verkaufs-/Publishing-Argumentation gehoert auf die lokale Brand-Seite `/veroeffentlichen`; erst von dort fuehrt der naechste CTA in das zentrale Portal.

### Inhaltliche Hauptaufgaben

- aktuelle Pressemitteilungen schnell sichtbar machen,
- DACH-/Deutschland-Aktivitaet zeigen,
- Branchenzugang anbieten,
- Suche und Filter prominent, aber ruhig integrieren,
- Vertrauen ueber gepruefte Qualitaet und Archiv-Stabilitaet aufbauen,
- Publisher sauber zur lokalen Landing `/veroeffentlichen` fuehren.

### Visuelle Richtung aus Mockup

Die Mockups geben die konkrete Richtung vor:

- Desktop-Startseite: `Pass B _ _ Deutschland _aktiv.html` und `.png`,
- mobile Fassung: `Mobile _ Startseite.html`,
- spaetere Anschlussseiten: Detailseite und Branchenseite liegen ebenfalls im Ordner, sind aber nicht Teil dieses ersten Umsetzungsschritts.

Das Mockup ist als visuelle Zielvorgabe zu verwenden, nicht als HTML-Quelle fuer Copy-Paste. Die exportierten HTML-Dateien enthalten eingebettete Fonts und generierten Code und sollen in saubere Blade-/Tailwind-Komponenten uebersetzt werden.

---

## 5. Seitenstruktur Startseite

Die Startseite wird in klar getrennte Abschnitte zerlegt.

### 5.1 Header / Top-Navigation

Ziel:

- Marke sichtbar,
- Hauptnavigation mit Aktualitaetslogik,
- Suche erreichbar,
- CTA "Veroeffentlichen" vorhanden, aber nicht dominant.

Inhalte:

- Logo BusinessPortal24,
- Hauptnavigation: `Aktuell`, `Branchen`, `Unternehmen`, `Pressemitteilung veroeffentlichen`,
- Suche,
- optional Login/Publisher-Link.

Umsetzung:

- bestehende `livewire:web.header` pruefen und stark vereinfachen,
- bei rein statischem Header besser als Blade-Komponente `x-web.site-header` neu aufbauen,
- Livewire/Volt nur fuer mobile Suche oder interaktive Suche verwenden.

Entscheidung:

- Header-Grundmarkup als Blade-Komponente.
- Suchinteraktion spaeter als Volt-Komponente, wenn echte Suche angebunden wird.

### 5.2 Hero / Aktuell-Block

Ziel:

- sofort klarmachen: aktuelle Unternehmensmeldungen aus Deutschland/DACH,
- keine Reichweitenversprechen,
- erste Top-Meldung oder aktuelle Meldung prominent zeigen.

Moegliche Headline:

> Aktuelle Pressemitteilungen aus der deutschen Wirtschaft

Subline:

> Neue Unternehmensmeldungen, Personalien, Produktankündigungen und Wirtschaftsnachrichten aus Mittelstand, Industrie und Dienstleistung.

Umsetzung:

- keine reine Marketing-Hero-Section,
- eher Editorial-Header mit Datum, Region-/Land-Filter und Top-Meldung,
- Top-Meldung aus echten `PressRelease`-Daten laden,
- Fallback fuer leere Datenbank nur fuer lokale Entwicklung definieren.

### 5.3 Region-/Land- und Zeitfilter

Ziel:

- BusinessPortal24 folgt der Aktualitaetslogik.
- Der Zustand "Deutschland aktiv" aus dem Mockup wird als Startzustand interpretiert.

Filter:

- Region: `Deutschland`, `Oesterreich`, `Schweiz`, optional `DACH`,
- Zeitraum: `Heute`, `7 Tage`, `30 Tage`,
- Branche: optional im Hauptfilter oder als Branchenleiste.

Umsetzung:

- bestehende `livewire:web.filter-bar` kann als Ausgangspunkt dienen,
- Werte aus hardcodierten Listen spaeter in Kategorien/Region-Config ueberfuehren,
- Filterevents muessen mit `press-releases-grid` verbunden werden; aktuell ist die Grid-Komponente mockdatenbasiert.

### 5.4 Aktuelle Meldungsliste

Ziel:

- Hauptinhalt der Startseite.
- Timeline-first: neueste Pressemitteilungen stehen im Zentrum.

Darstellung:

- Listen-/Card-Hybrid statt Magazin-Kacheln,
- klare Metadaten: Firma, Kategorie/Branche, Region, Datum,
- kurze Teaser,
- optionale Bildvorschau, wenn vorhanden,
- Qualitaetslabel nur selektiv anzeigen: bei hohem Score oder ausdruecklicher Empfehlung; sonst keine Anzeige.

Umsetzung:

- `livewire:web.press-releases-grid` durch eine datenbasierte Komponente ersetzen oder umbauen,
- Query auf `PressRelease` mit `portal in (businessportal24, both)`, Status veroeffentlicht, Sprache `de`, `published_at desc`,
- Eager Loading fuer `company`, `category.translations`, erstes Bild,
- Pagination serverseitig.

Wichtig:

- Keine erfundenen Analyse-/Interview-Typen ausgeben, wenn die Daten nur Pressemitteilungen sind.
- Content-Type kann spaeter aus realen Feldern kommen, darf aber zum Start nicht redaktionelle Formate vortaeuschen.

### 5.5 Branchenzugang

Ziel:

- schneller Einstieg in relevante Themen,
- Startseite bleibt aktualitaetszentriert, bietet aber Branchenpfade.

Inhalte:

- Branchenliste aus aktiven Kategorien,
- optional Anzahl aktueller Meldungen je Kategorie,
- Link auf Branchenseiten wie `/kategorie/{slug}`.

Umsetzung:

- Blade-Komponente `x-web.industry-strip` oder `x-web.category-strip`,
- Query ueber `Category` mit aktiven Kategorien fuer `businessportal24` oder `both`,
- Uebersetzungen fuer `de` nutzen.

### 5.6 Vertrauens-/Qualitaetsblock

Ziel:

- BusinessPortal24 als geprueftes, dauerhaftes Pressearchiv positionieren,
- ohne Fake-Trust und ohne uebertriebene Reichweite.

Moegliche Inhalte:

- "Gepruefte Pressemitteilungen",
- "Dauerhaft auffindbar",
- "Archivierte Unternehmensmeldungen seit vielen Jahren",
- "Korrektur statt Loeschung".

Umsetzung:

- statische Blade-Komponente,
- Zahlen offensiv verwenden, wenn sie aus Datenbank/Import verifizierbar sind,
- bei Zahl "~100.000" erst nach Datenabgleich final anzeigen,
- "seit 2008" oder vergleichbare Historienhinweise nutzen, wenn sie fuer die jeweilige Domain belegbar sind.

### 5.7 Publisher-CTA

Ziel:

- sichtbarer, aber dezenter Uebergang zur Veroeffentlichung.

CTA:

- Primaer: `Pressemitteilung veroeffentlichen`
- Ziel immer zuerst: `/veroeffentlichen`
- von dort aus: CTA in das zentrale Portal / den Publisher-Bereich

Umsetzung:

- nicht als dominanter SaaS-Banner,
- als sachlicher Infokasten oder Footer-CTA,
- klare Sprache: "Die Einreichung startet auf BusinessPortal24 und wird im zentralen Publisher-Bereich fortgefuehrt."
- fuer die Ausarbeitung der Landing den Entwurf `Ver_ffentlichen _ Variante A _aktiv_.html` beruecksichtigen.

### 5.8 Footer

Ziel:

- rechtliche Links,
- Betreiberhinweis,
- dezenter Markenfamilien-Hinweis,
- RSS/Newsletter nur wenn funktional.

Aktuelle Footer-Crosslinks muessen sprachlich korrigiert werden:

- Nicht: "Fuer maximale Reichweite?"
- Besser: "Weitere Branchen- und Archivzugänge finden Sie bei Presseecho."

---

## 6. Komponentenplan

### 6.1 Blade-Komponenten

Diese Komponenten sollen statisch oder serverseitig gerendert werden:

- `x-web.site-header`
- `x-web.main-navigation`
- `x-web.home-hero`
- `x-web.press-release-list-item`
- `x-web.category-strip`
- `x-web.quality-summary`
- `x-web.publisher-cta`
- `x-web.site-footer`

Blade ist hier bevorzugt, weil diese Bausteine keine dauerhafte Livewire-Hydration brauchen.

### 6.2 Volt-Komponenten

Volt wird nur dort eingesetzt, wo echter State benoetigt wird:

- `livewire:web.press-release-feed` fuer Filter, Pagination und spaeter Suche,
- `livewire:web.search-box` falls Suchvorschlaege/autocomplete kommen,
- optional `livewire:web.region-filter`.

Die bestehende `press-releases-grid` kann als Arbeitsgrundlage dienen, soll aber von Mockdaten auf echte Daten umgestellt und fachlich umbenannt werden, wenn sie keine Grid-Komponente mehr ist.

### 6.3 Nicht fuer Sprint 1

Nicht in die Startseiten-Umsetzung aufnehmen:

- Score-Berechnung,
- Boost-Slots,
- Editorial-Pick-Admin-Workflow,
- Cross-Domain-Sanctum-Auth,
- vollstaendige Suchmaschine,
- Presseecho-Override-Architektur,
- neue Brand-DB-Tabelle.

---

## 7. Daten- und Query-Konzept

### 7.1 Startseiten-Feed

Basisquery:

- nur veroeffentlichte Pressemitteilungen,
- Portal `businessportal24` oder `both`,
- Sprache `de`,
- nach `published_at desc`,
- Soft-Deletes ausschliessen.

Benötigte Relationen:

- `company`,
- `category.translations`,
- erstes/primäres Bild aus `images`,
- optional Kontakte erst auf Detailseite.

### 7.2 Kategorien / Branchen

Basisquery:

- aktive Kategorien,
- Portal `businessportal24` oder `both`,
- Parent-Struktur beachten,
- deutsche Uebersetzung laden,
- Anzahl aktueller Meldungen optional per `withCount`.

### 7.3 Region / Land

Region und Land werden nicht verlaesslich aus den Legacy-Daten erwartet. Fuer die erste Startseitenfassung gilt:

- vorhandene Region-/Landdaten anzeigen, wenn sie sauber vorhanden sind,
- fehlende Daten nicht durch geratenen Text ersetzen,
- Filter fuer Region/Land erst aktivieren, wenn die Datenquelle klar ist,
- spaetere Ergaenzung ueber neue Felder oder normalisierte Zuordnung vorbereiten.

### 7.4 Fallbacks

Fuer migrierte Inhalte muessen Komponenten tolerant sein:

- fehlendes Bild,
- fehlende Kategorie,
- fehlende Firma,
- fehlende Region / fehlendes Land,
- altes oder sehr langes Textfeld,
- fehlender Teaser,
- Legacy-Slugs und Permalink-Stabilitaet.

Fallbacks duerfen nicht wie Demo-Daten wirken. Besser:

- Bildbereich weglassen,
- Firma als "Unternehmensmeldung" nur wenn kein Firmenname existiert,
- Region/Land ausblenden, solange keine sauberen Daten vorhanden sind,
- Teaser aus Text sauber kuerzen,
- keine Platzhalterbilder von externen Diensten.

---

## 8. Routing-Konzept

Aktueller Stand:

- `/` waehlt anhand des Hosts `web.businessportal24` oder `web.presseecho`.
- `/veroeffentlichen`, `/kategorien`, `/kategorie/{slug}`, `/release/{slug}` sind bereits angelegt.

Fuer die Startseite:

- Route `/` bleibt.
- View `web.businessportal24` wird zur echten Startseite.
- Keine neue Route noetig.

Fuer spaetere Unterseiten:

- Detailseite: neue Route darf existieren, aber Legacy-URLs muessen weiter funktionieren.
- Branchenseite: neue Route darf existieren, aber Legacy-Kategorie-URLs muessen weiter funktionieren.
- Veroeffentlichen-Landing: `/veroeffentlichen`.

Legacy-Beispiele:

- `https://www.businessportal24.com/de/category/kultur.html`
- `https://www.businessportal24.com/de/die-zehn-stufen-vom-haben-zum-sein-ein-wegweiser-zu-innerer-freiheit-und-echter-erfuellung.html`

Wichtig:

- Keine URLs in Komponenten hardcoden, wenn named routes existieren oder sinnvoll ergaenzt werden koennen.
- Legacy-Permalinks aus der Migration nicht durch neue Frontend-Pfade brechen.
- Kein Legacy-Aufruf darf zu 404 fuehren.
- Fuer neue, sauberere URLs kann spaeter eine kanonische Struktur entstehen. Dann ist pro URL-Typ zu entscheiden, ob die alte URL direkt rendert oder per 301 auf die neue kanonische URL weiterleitet.
- Kategorie- und Pressemitteilungs-Routing muessen vor Umsetzung der Detail- und Branchenseiten anhand der Legacy-Daten konkret gemappt werden.

---

## 9. Styling- und Asset-Konzept

### 9.1 Bestehende Basis

Das Web-Frontend nutzt:

- `resources/css/web/theme-businessportal24.css`,
- `resources/css/web/theme-presseecho.css`,
- `resources/css/web/shared-styles.css`,
- `tailwind.web.config.js`,
- `vite.web.config.js`,
- Build-Ausgabe `public/build/web`.

### 9.2 Anpassung fuer die neue Startseite

Das aktuelle BusinessPortal24-CSS enthaelt noch viel Glow-, Glass- und Gradient-Sprache. Das widerspricht der neuen Positionierung teilweise.

Neue Richtung:

- neutrale, helle Flaechen,
- Orange/Rot als Akzent,
- feine Linien,
- typografische Dichte,
- wenig Schatten,
- keine starken Glows,
- kein Glassmorphism als Grundmuster.

### 9.3 Design Tokens

Kurzfristig reichen die vorhandenen CSS-Variablen. Ergaenzen oder schaerfen:

- `--bp-surface`
- `--bp-surface-muted`
- `--bp-text`
- `--bp-text-muted`
- `--bp-accent`
- `--bp-border`

Nicht fuer Sprint 1 noetig:

- kompletter Umbau auf neue `@theme`-Token-Architektur,
- Tailwind-v4-Designsystem von Grund auf.

---

## 10. Umsetzungsschritte

### Schritt 1 - Bestandsseite sichern und fachlich bereinigen

Aufgaben:

- aktuelle `web.businessportal24` analysieren,
- Inhalte entfernen, die der Positionierung widersprechen,
- Mockdaten-Inhalte markieren oder ersetzen,
- Header-/Footer-Sprache korrigieren.

Ergebnis:

- klare, noch nicht finale Startseite ohne falsche Versprechen.

### Schritt 2 - Layout aus Mockup in Sektionen schneiden

Aufgaben:

- Desktop-Mockup in Abschnitte zerlegen,
- Mobile-Mockup gegenpruefen,
- Abstaende, Typografie, Spalten und Navigationszustaende dokumentieren,
- keine generierte HTML-Struktur uebernehmen.

Ergebnis:

- Komponentenliste mit Zuordnung zu Blade oder Volt.

### Schritt 3 - Statische Shell bauen

Aufgaben:

- neues Header-/Footer-Markup erstellen,
- Hero/Aktuell-Block als Blade-Komponente,
- Kategorie-/Branchenleiste als Blade-Komponente,
- Publisher-CTA als Blade-Komponente,
- CSS auf editorialen BusinessPortal24-Look reduzieren.

Ergebnis:

- Startseite sieht im Grundlayout wie das Mockup aus, nutzt aber noch einfache Daten/Fallbacks.

### Schritt 4 - Pressemitteilungen datenbasiert anbinden

Aufgaben:

- Feed-Komponente mit echter `PressRelease`-Query bauen,
- Relationen eager loaden,
- Pagination integrieren,
- leere/alte Daten sauber behandeln,
- Kategorie- und Datumsanzeige aus echten Feldern.

Ergebnis:

- Startseite zeigt echte migrierte/veroeffentlichte Meldungen.

### Schritt 5 - Filter aktivieren

Aufgaben:

- Zeitraum- und Branchenfilter mit Query verbinden,
- Region-/Landfilter erst aktivieren, wenn die Datenquelle sauber vorhanden ist,
- URL-State pruefen (`?region=de&zeitraum=7`), damit Links teilbar bleiben,
- Mobile-Darstellung aus Mockup umsetzen,
- Ladezustand minimal halten.

Ergebnis:

- aktive Filterzustaende funktionieren serverseitig nachvollziehbar; fehlende Region-/Landdaten werden nicht angezeigt.

### Schritt 6 - SEO und Meta-Basis

Aufgaben:

- Seitentitel und Description fuer BusinessPortal24 setzen,
- Open-Graph-Basisdaten,
- canonical URL je Domain,
- Legacy-URL-Strategie fuer Kategorie- und Detailseiten beruecksichtigen,
- keine noindex-/Demo-Reste,
- strukturierte Daten nur, wenn fachlich sauber.

Ergebnis:

- Startseite ist SEO-tauglich und teilbar.

### Schritt 7 - Tests und technische Abnahme

Aufgaben:

- Feature-Test fuer Startseite `businessportal24` anlegen/erweitern,
- Test fuer sichtbare Kerntexte,
- Test fuer veroeffentlichte BusinessPortal24-/Both-Meldungen im Feed,
- Test gegen Presseecho-Verwechslung,
- responsive Smoke-Check manuell im Browser.

Ergebnis:

- Startseite ist gegen Regressionen abgesichert.

---

## 11. Akzeptanzkriterien Startseite

Die Startseite gilt als fertig fuer den naechsten Schritt, wenn:

- `businessportal24.test/` ohne Fehler rendert,
- keine falschen Reichweiten-/Lead-/Exklusivversprechen sichtbar sind,
- keine Demo-Placeholders von externen Bilddiensten sichtbar sind,
- echte Pressemitteilungen aus der Datenbank angezeigt werden,
- Meldungen nach Portal-Kontext gefiltert werden,
- fehlende Region-/Landdaten nicht als Platzhalter angezeigt werden,
- selektive Qualitaets-/Empfehlungslabels nur bei vorhandenem Score/Flag erscheinen,
- Header, Navigation, Feed, Branchenzugang, Publisher-CTA und Footer responsiv funktionieren,
- die mobile Ansicht direkt parallel am Mockup `Mobile _ Startseite.html` orientiert ist,
- `/veroeffentlichen` lokal auf BusinessPortal24 bleibt und von dort ins Portal fuehrt,
- `php artisan test --compact` fuer die betroffenen Tests erfolgreich ist,
- `php bin pint --dirty --format agent` nach PHP-Aenderungen gelaufen ist,
- `php npm run build:web` oder der relevante Build erfolgreich ist, sobald CSS/JS geaendert wurden.

---

## 12. Dokumentationslog waehrend der Umsetzung

Dieses Dokument soll waehrend der Umsetzung fortgeschrieben werden. Pro abgeschlossenem Schritt:

- Datum eintragen,
- erledigte Dateien nennen,
- offene Punkte festhalten,
- bewusste Abweichungen vom Mockup begruenden.

### Log

| Datum | Schritt | Status | Notiz |
| --- | --- | --- | --- |
| 12.05.2026 | Konzept erstellt | offen | Startpunkt fuer Umsetzung der BusinessPortal24-Startseite |
| 12.05.2026 | Offene Fragen eingearbeitet | erledigt | Region-Fallbacks, Legacy-URLs, lokale Veroeffentlichen-Seite, Qualitaetslabels, Zahlen und Mobile-Vorgehen geklaert |
| 12.05.2026 | Mockup `Pass B _ _ Deutschland _aktiv` 1:1 in Blade/Volt-Sektionen ueberfuehrt | erledigt | Neue Komponenten: `site-header` (Top-Bar/Brand/Suche/Navigation/Live-Ticker), `focus-hero` (Hauptmeldung + 'Was sonst zaehlt'), Volt-Feed mit Tabs Alle/Heute/Diese Woche, Sidebar (`most-read`, `publisher-cta`, `active-newsrooms`), `industry-spotlight` (KPI + Liste + Studie), `events-week`, `industry-index`, `newsletter-strip` (dunkel), `quality-summary`, `site-footer`. Echte Daten aus `PressRelease`/`Category`/`Company`. Demo-Inhalte fuer Ticker, Termine, Newsletter-Topics, Studie bleiben statisch und sind als spaetere Datenquelle markiert. Theme-CSS auf editorialen Look (Source Serif 4 / Inter Tight / JetBrains Mono, neutrale Beige-Surface, ruhige Akzentfarbe `#cf3628`) umgestellt. |
| 12.05.2026 | Formatierung an `dev/frontend/tailwind_v3/Startseite Tailwind.html` angeglichen | erledigt | Theme-CSS auf vollstaendiges v3-Farbsystem migriert (`bg`/`bg-elev`/`bg-rule`/`bg-rule-strong`/`bg-card-warm`/`bg-card-warm-border`, `ink`/`ink-2..4`/`ink-on-dark*`, `brand`/`brand-deep`/`brand-soft`/`gain`/`loss`, Gradient-Tokens `bg-topbar-grad`/`bg-feature-grad`/`bg-hero-grad`, `max-w-layout: 1280px`, Akzentfarbe nun `#C84A1E`). Site-Header bekam dunkle Top-Bar mit Edition-Tabs (DE/AT/CH/EN), Suchfeld mit Cmd+K-Hinweis und "Erweiterte Suche", Underline-Navigation; neuer `live-ticker` mit Pulse-Dot + DAX-Sparkline. Focus-Hero: 500px-Hero mit `bg-hero-grad`, TOP-MELDUNG- und Audio-Tag, nummerierte Sidebar (01-04) mit 64×64 Bild-Block + Verifiziert-Icon, abgesetzte 4px-Pagination, eigene Anzeigen-Karte. Press-Release-Feed komplett auf flache 60/100/1fr-Liste umgestellt (Featured-Top mit 240×160-Bild, Empfehlung-Stern-Badge, In-Feed-Anzeigen mit `Anzeige`/`Ende Anzeige`-Hairlines auf `bg-card-warm`). Most-Read mit horizontalem Brand-Balkenindikator; Publisher-CTA, Newsletter-Strip und Site-Footer durchgehend auf `bg-topbar-grad` umgestellt; Active-Newsrooms mit Brand-Marken-Initial + Pulse-Badge "heute aktiv". Industry-Spotlight als 3-Spalten-Stat-Grid + Liste + warme Studien-Karte mit Brand-Topborder; Events-Week als zusammenhaengendes 7-Spalten-Grid mit "Heute"-Highlight; Industry-Index als 4×2-Grid mit Gain/Loss-Trend und Balken; Quality-Summary als warm-beige Card mit Schild-Icon. 215 Tests gruen (213 Tests bei 1095 Assertions; einziger Fail ist vorbestehender `api/v1.yml`-Test ohne Bezug zur Startseite). |

---

## 13. Entscheidungen und Restklaerungen

### 13.1 Geklaerte Entscheidungen

- Region/Land kommt nicht verlaesslich aus den Legacy-Daten. Fehlende Daten werden nicht angezeigt und koennen spaeter durch neue Felder oder Zuordnungen ergaenzt werden.
- Die komplette Legacy-URL-Struktur muss sauber migriert werden. Weder Kategorie- noch Detail-URLs duerfen zu 404 fuehren.
- Beispiel Kategorie alt: `https://www.businessportal24.com/de/category/kultur.html`
- Beispiel Pressemitteilung alt: `https://www.businessportal24.com/de/die-zehn-stufen-vom-haben-zum-sein-ein-wegweiser-zu-innerer-freiheit-und-echter-erfuellung.html`
- Neue, sauberere URLs sind zulaessig. Pro URL-Typ muss aber entschieden werden, ob alte URLs direkt rendern oder per 301 auf kanonische neue URLs leiten.
- Qualitaetsstufen koennen auf der Startseite sichtbar sein, aber nur selektiv bei hohem Score oder Empfehlung; sonst bleibt die Anzeige leer.
- `/veroeffentlichen` bleibt immer lokal auf der jeweiligen Brand-Domain. Von dort fuehrt ein CTA in das zentrale Portal. Der Entwurf `Ver_ffentlichen _ Variante A _aktiv_.html` ist fuer diese Landing zu beruecksichtigen.
- Oeffentliche Zahlen wie "100.000", "seit 2008" oder aktuelle Meldungszahlen duerfen genutzt werden, wenn sie belastbar sind und der Positionierung helfen.
- Desktop ist die gesetzte Vorlage. Mobile wird parallel geprueft und umgesetzt; das mobile Mockup liefert Optik/Funktion, die Inhalte folgen der Desktop-Variante.

### 13.2 Noch offen

- Header langfristig als statische Blade-Komponente oder als Volt-Komponente: vor Umsetzung anhand der tatsaechlichen Such-/Menue-Interaktion entscheiden.
- Konkretes Legacy-URL-Mapping fuer Kategorien und Pressemitteilungen anhand der migrierten Daten pruefen.
- Kanonische neue URL-Struktur fuer Kategorien und Pressemitteilungen festlegen.

---

## 14. Reihenfolge nach der Startseite

Nach finaler Desktop- und Mobile-Startseite werden die weiteren Mockups in dieser Reihenfolge umgesetzt:

1. Startseite Desktop auf Basis `Pass B _ _ Deutschland _aktiv` finalisieren.
2. Mobile Startseite parallel gegen `Mobile _ Startseite.html` pruefen und responsiv finalisieren.
3. Detailseite Pressemitteilung inklusive Legacy-URL-Mapping.
4. Branchenseite Energie/Klima als Vorlage fuer alle Kategorien inklusive Legacy-Kategorie-URLs.
5. Veroeffentlichen-Landing auf Basis `Ver_ffentlichen _ Variante A _aktiv_.html`.
6. Presseecho-Ableitung erst nach stabiler BusinessPortal24-Basis.

Diese Reihenfolge verhindert, dass gemeinsame Komponenten zu frueh abstrahiert werden. Erst wenn Startseite, Detailseite und Branchenseite konkret sind, ist sichtbar, welche Bausteine wirklich wiederverwendbar sind.