# Bestandsaufnahme: Frontend Responsive / Mobile

> **Erstellt:** 16.07.2026  
> **Status:** Audit + **P0/P1-Fixes umgesetzt** (16.07.2026, zweite Session)  
> **Viewport:** 390×844 (iPhone-ähnlich), `mobile: true`  
> **Scope:** Öffentliches Web-Frontend (presseecho, businessportal24, pressekonto-Hub)  
> **Nicht im Scope:** Admin/Portal (Flux), Customer-Bereich

---

## Methode

1. Live-Check im Browser (CDP-Layout-Metriken: `scrollWidth`, Overlay-Bounding-Boxes, Grid-Spalten, Touch-Targets)
2. Code-Review der Blade-Komponenten unter `resources/views/web/**` und `resources/views/components/web/**`
3. Stichproben: Startseiten beider Portale, Preise, Release-Detail, Kategorie, Veröffentlichen, Hub-Landing

**Hinweis zu Screenshots:** Das Browser-Capture zeigt die emulierte Seite oft als schmalen Streifen links im Fenster (Tooling-Artefakt). Maßgeblich sind die CDP-Messungen (`clientWidth` / `scrollWidth` / Element-Rechtecke), nicht die leere Fläche rechts im Screenshot.

**Hinweis Debugbar:** Laravel Debugbar ist lokal sichtbar und verdeckt Inhalt – kein Produktionsproblem, bei visueller QA ausblenden.

---

## Kurzfazit

Die Desktop-Layouts sind weitgehend stimmig. Auf Mobile gibt es **wenige, aber schwere strukturelle Bugs**, die sich themenübergreifend wiederholen:

| Priorität | Thema | Betrifft |
|-----------|--------|----------|
| P0 | Hero-Text-Overlay läuft aus dem Bild nach oben und überdeckt Section-Header | Portal-Startseiten, Kategorie (und analog Newsroom) |
| P0 | Horizontaler Seiten-Scroll durch Quality-Summary (3-Spalten-Grid + `nowrap`-Link) | Portal-Startseiten |
| P0 | Hub-Utility-Bar + Header-CTAs sprengen die Viewport-Breite (~245px Overflow) | pressekonto.test |
| P1 | Hub-Footer fest 4 Spalten; Architektur-Diagramm mit überlappenden Karten | pressekonto.test |
| P1 | Hub-Navigation ab `lg` ausgeblendet **ohne** Mobile-Menü-Ersatz | pressekonto.test |
| P2 | Hartes `px-8` / große Type auf Homepages; kleine Touch-Targets in Topbar | Portale |

Seiten wie **Preise**, **Release-Detail** und **Veröffentlichen** sind mobil schon deutlich robuster (`px-4 sm:px-6 lg:px-8`, kein Seiten-Overflow in der Stichprobe).

---

## Geprüfte Seiten (Überblick)

| Seite | URL (Beispiel) | Mobil-Status |
|-------|----------------|--------------|
| Startseite presseecho | `https://presseecho.test/de` | Kritisch: Hero-Overlap + H-Scroll |
| Startseite businessportal24 | `https://businessportal24.test/de` | Kritisch: gleiches Muster |
| Hub pressekonto | `https://pressekonto.test/` | Kritisch: Utility/Header/Footer/Diagramm |
| Preise | `…/de/preise` | Weitgehend ok |
| Release-Detail | `…/de/press-release/…` | Weitgehend ok; Hero-Bild sehr flach (21:9) |
| Kategorie | `…/de/category/sonstiges` | Kritisch: Hero-Overlay-Overflow |
| Veröffentlichen | `…/de/veroeffentlichen` | Weitgehend ok |
| Suche / FAQ / API / Newsrooms | Code-Review + Muster | Keine P0 in Stichprobe; API-Tabellen bewusst `overflow-x-auto` |

---

## Befunde im Detail

### P0-01 — Focus-Hero: Overlay überdeckt „Im Fokus“

**Schwere:** Kritisch  
**Wo:** `resources/views/components/web/focus-hero.blade.php` (Zeilen ~39–67)  
**Portale:** presseecho + businessportal24 (gleiche Komponente)

**Messung (390px, Lead mit langem Titel/Teaser):**
- Parent-Bildbox: `h-[500px]` → Höhe 500px
- Absolutes Bottom-Overlay: Höhe **734px** (presseecho) bzw. **586px** (businessportal24)
- Overlay ragt **~234px nach oben** aus dem Container und liegt über dem Section-Header („Im Fokus“ + Datum)

**Ursache:**
- Feste Höhe `h-[500px]` + `overflow-hidden` am Bild
- Overlay absolut `bottom-0` mit Headline `text-[38px]` (ohne Mobile-Downscale), Teaser und Meta
- Inhalt des Overlays ist höher als die Bildbox → wächst nach oben aus dem `relative`-Wrapper (Parent der `<a>` hat kein `overflow:hidden`)

**Darstellung:** Titel/Teaser überdecken die Überschrift „Im Fokus“; Lesbarkeit und Hierarchie kaputt.

**Fix-Richtung (später):** Responsive Type (`text-[24px] sm:text-[32px] lg:text-[38px]`), Overlay-Padding `px-4 sm:px-9`, ggf. `min-h` statt fester Höhe oder Overlay in den Flow legen / `overflow-hidden` am äußeren `relative`.

---

### P0-02 — Kategorie-/Newsroom-Hero: gleiches Overlay-Problem

**Schwere:** Kritisch (Kategorie verifiziert) / Hoch (Newsroom analog im Code)  
**Wo:**
- `resources/views/web/kategorie.blade.php` ~123–147 (`aspect-ratio: 16/10`)
- `resources/views/web/newsroom.blade.php` ~152–180 (`aspect-ratio: 16/9`)

**Messung Kategorie (390px):**
- Hero-Box ~224×358
- Overlay-Höhe **459px**, `topDelta` ca. **−236px** (ragt nach oben heraus)

Trotz etwas kleinerer Type (`text-[26px] sm:text-[32px]`) reicht langer Titel + Teaser + Meta, um das flache Aspect-Ratio-Hero zu sprengen.

---

### P0-03 — Horizontaler Scroll auf Portal-Startseiten (Quality-Summary)

**Schwere:** Kritisch  
**Wo:** `resources/views/components/web/quality-summary.blade.php`  
**Messung:** `scrollWidth = 457` bei `vw = 390` (Δ ≈ **67px**) auf beiden Portal-Homes

**Isolation:** Ausblenden der Quality-Summary-Section → `scrollWidth = 390`. Andere Home-Sections allein verursachen den Overflow nicht.

**Ursache:**
```html
style="grid-template-columns: auto 1fr auto;"
```
bleibt auf Mobile **3 Spalten**. Der Link „Veröffentlichungsrichtlinien →“ hat `whitespace-nowrap` und endet bei `right ≈ 458` (> 390).

**Fix-Richtung:** Grid auf Mobile stacken (`grid-cols-1 sm:grid-cols-[auto_1fr_auto]` o. ä.), Link umbrechen lassen oder unter den Text legen; Section-Padding auf `px-4 sm:px-6 lg:px-8`.

---

### P0-04 — Hub pressekonto: massiver Horizontal-Scroll

**Schwere:** Kritisch  
**Wo:**
- `resources/views/components/web/hub/top-utility-bar.blade.php`
- `resources/views/components/web/hub/site-header.blade.php`

**Messung (390px):**
- `scrollWidth = 635` (Δ ≈ **245px**)
- Utility-Bar-Kinder summiert bis `right = 635` (Datum + „Publisher-Hub für …“ + FAQ/Hilfe/Kontakt, alles `whitespace-nowrap`, kein Wrap/`overflow-x`)
- Header-CTA-Gruppe („Anmelden“ + „Konto erstellen“) `right = 472`

**Zusätzlich:** Haupt-Nav ist `hidden lg:flex` – auf Mobile **komplett weg, ohne Hamburger/Drawer**. Anker (Tarife, Funktion, …) sind im Header nicht erreichbar.

---

### P1-01 — Hub-Footer: 4 Spalten auf Mobile

**Schwere:** Hoch  
**Wo:** `resources/views/components/web/hub/site-footer.blade.php` Zeile ~14  
`style="grid-template-columns:1.5fr 1fr 1fr 1fr;"` ohne Media Query

**Messung:** Spaltenbreiten ca. 133 / 63 / 84 / 151 px – Linklisten unbenutzbar schmal.

---

### P1-02 — Hub Architektur-Diagramm: Überlappung

**Schwere:** Hoch  
**Wo:** `resources/views/web/pressekonto.blade.php` ~105–167

**Messung:** Containerbreite ~268px bei `height:320px`; Brand-Karten jeweils `min-w-[160px]` links und rechts oben → Überlappung (~52px). Hub-Kreis und Eck-Labels kollidieren.

**Zusätzlich:** Stats darunter `grid-cols-3` in derselben engen Karte.

---

### P1-03 — Hartes `px-8` auf Homepages (Content-Breite)

**Schwere:** Hoch (UX/Dichte), kein Overflow allein  
**Wo u. a.:**
- `focus-hero.blade.php`, `industry-index`, `industry-spotlight`, `pricing-teaser`
- `presseecho.blade.php` / `businessportal24.blade.php` Feed-Section
- Hub-Seiten durchgängig `px-8`

Unterseiten (Preise, Detail, Suche, …) nutzen bereits korrekt `px-4 sm:px-6 lg:px-8`.

Bei 390px Viewport bleiben mit `px-8` nur ~326px Content – verschärft Hero- und Grid-Probleme.

---

### P2-01 — Industry-Index: 2 Spalten ab Mobile

**Schwere:** Mittel  
**Wo:** `industry-index.blade.php` – `grid-cols-2` + `px-5`  
Lange Branchennamen + Delta in einer Zeile wirken gequetscht.

---

### P2-02 — Quality-Summary / Stat-Strips / Sidebar-Grids

**Schwere:** Mittel  
- Quality-Summary: siehe P0-03  
- Kategorie/Newsrooms/Veröffentlichen: `grid-cols-2` Stat-Strips mit großen Zahlen – Labels wrapen unschön  
- `focus-side-item`: 3-Spalten-Grid in gestapelter Sidebar – funktional ok, aber dicht  
- Release-Detail-Hero `aspect-ratio: 21/9` → auf Mobile nur ~153px Bildhöhe

---

### P2-03 — Touch-Targets Header (Portale)

**Schwere:** Mittel  
Topbar DE/EN (~42×35), „Preise“-Link (~33×17), teils unter 44×44-Empfehlung. Suche/Anmelden sind mit ~40×40 besser, aber Topbar bleibt eng.

---

### P2-04 — Live-Ticker

**Schwere:** Niedrig–Mittel (kein alleiniger H-Scroll-Auslöser in der Isolation)  
Marquee mit `width: max-content` ist beabsichtigt und liegt in `overflow-hidden`.  
Market-Slot (`max-w-[min(92vw,280px)]` + `shrink-0`) kann auf sehr schmalen Screens den Ticker-Bereich stark einengen, wenn Kursdaten aktiv sind – bei der Stichprobe war der Market-Slot oft leer.

---

### P2-05 — API-Seite Tabellen

**Schwere:** Niedrig (bewusst)  
`overflow-x-auto` + `whitespace-nowrap` an Field-Namen → horizontales Scrollen in der Tabelle, nicht der ganzen Seite.

---

## Was mobil bereits gut wirkt

- Portal-`site-header`: Suche als Icon-Modal, verkürzte Topbar, Burger für Rubriken
- Preise: Tarif-Grid `grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`, kein Seiten-Overflow
- Release-Detail: Padding-Pattern, Body-Breite ~358px, Share-Buttons in 2 Spalten
- Veröffentlichen: kein H-Scroll in der Stichprobe; FAQ-Zeilen als 3-Spalten-Grid eher Dichte-Thema
- Viele Unterseiten schon auf `px-4 sm:px-6 lg:px-8` umgestellt

---

## Empfohlene Bearbeitungsreihenfolge (noch nicht umsetzen)

1. **P0-01 / P0-02** – Hero-Overlays (Focus-Hero, Kategorie, Newsroom): Type + Overflow-Containment  
2. **P0-03** – Quality-Summary responsive machen (behebt Portal-H-Scroll)  
3. **P0-04 / P1-01 / P1-02** – Hub: Utility-Bar, Header (Mobile-Nav!), Footer-Grid, Architektur-Diagramm  
4. **P1-03** – Homepages/Shared: `px-8` → `px-4 sm:px-6 lg:px-8`  
5. **P2** – Industry-Index, Touch-Targets, flaches Detail-Hero, Feinschliff

---

## Testmatrix für spätere Fixes

| Breakpoint | Geräte-Proxy |
|------------|----------------|
| 320×568 | iPhone SE |
| 390×844 | iPhone 14/15 |
| 430×932 | große Phones |
| 768×1024 | Tablet |

Pro Fix mindestens: beide Portal-Homes + Hub + eine Kategorie + eine PM-Detailseite; `document.documentElement.scrollWidth <= clientWidth`.

---

## Dateien mit höchster Hebelwirkung

1. `resources/views/components/web/focus-hero.blade.php`  
2. `resources/views/components/web/quality-summary.blade.php`  
3. `resources/views/web/kategorie.blade.php` / `newsroom.blade.php` (Hero-Blöcke)  
4. `resources/views/components/web/hub/top-utility-bar.blade.php`  
5. `resources/views/components/web/hub/site-header.blade.php`  
6. `resources/views/components/web/hub/site-footer.blade.php`  
7. `resources/views/web/pressekonto.blade.php` (Architektur-Diagramm + `px-8`)

---

## Umsetzung (16.07.2026)

P0/P1 aus der Reihenfolge oben sind umgesetzt. Verifikation bei 390px:

| Check | Vorher | Nachher |
|-------|--------|---------|
| Portal-Home `scrollWidth` | 457 | 390 |
| Hero: H1 unter „Im Fokus“ | Overlay überdeckte Header | Hierarchie ok (`h1Top > h2Bottom`) |
| Hub `scrollWidth` | 635 | 390 |
| Hub-Footer-Spalten | 4 | 1 (stackt ab `sm`/`lg`) |
| Hub Mobile-Nav | fehlte | Burger + Panel |

**Geänderte Dateien:** Focus-Hero, Quality-Summary, Kategorie-/Newsroom-Hero, Hub Utility/Header/Footer/Banner, Homepages + Industry-/Pricing-Teaser-Paddings, Architektur-Diagramm (Mobile-Stack).

**Tests:** `PresseechoHomeTest`, `Businessportal24HomeTest`, `PressekontoHubHomeTest`, `HubStaticPageShellTest` — 32 passed.

**Offen (P2):** kleinere Touch-Targets in Portal-Topbar, Industry-Index-Dichte, flaches Release-Detail-Hero 21:9.