# Bestandsaufnahme: Frontend Responsive / Mobile

> **Erstellt:** 16.07.2026  
> **Status:** Nur Audit – **kein Code geändert**  
> **Viewports:** 320×568 (kleines Smartphone) und 390×844 (iPhone-ähnlich), jeweils `mobile: true`  
> **Scope:** Öffentliches Web-Frontend (presseecho, businessportal24, pressekonto-Hub)  
> **Nicht im Scope:** Admin/Portal (Flux), Customer-Bereich

---

## Methode

1. Live-Check im Browser bei 320 px und 390 px Breite (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 |
| P1 | Sticky-Header-Script schaltet Klassen um, für die keine CSS-Regeln existieren | Portal-Seiten |
| 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 (320/390 px verifiziert) |
| Startseite businessportal24 | `https://businessportal24.test/de` | Kritisch: gleiches Muster (390 px verifiziert) |
| Hub pressekonto | `https://pressekonto.test/` | Kritisch: Utility/Header/Footer/Diagramm (320/390 px verifiziert) |
| 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` |

Das Routen-Inventar umfasst darüber hinaus Newsroom-Detail, Tombstone, Suche mit Filterzuständen, Hilfe sowie die öffentlichen Rechts-/Formularseiten. Diese Seitentypen wurden statisch erfasst, aber in dieser ersten Runde nicht in allen Zuständen und auf beiden Sprachen live durchgeklickt. Admin, Auth und Customer bleiben bewusst außerhalb dieses Audits.

---

## 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 (Lead mit langem Titel/Teaser):**
- Parent-Bildbox: `h-[500px]` → Höhe 500px
- Bei 390px: absolutes Bottom-Overlay **734px** hoch (presseecho) bzw. **586px** (businessportal24)
- Bei 390px ragt das presseecho-Overlay **~234px nach oben** aus dem Container und liegt über dem Section-Header („Im Fokus“ + Datum)
- Bei 320px wird das presseecho-Overlay **~917px** hoch und ragt **~417px nach oben** aus der 500px-Bildbox; der Fehler verschärft sich auf kleinen Smartphones deutlich

**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. Bei `vw = 320` bleibt die Seite 457px breit (Δ ≈ **137px**).

**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:**
- Bei 390px: `scrollWidth = 635` (Δ ≈ **245px**)
- Bei 320px: weiterhin `scrollWidth = 635` (Δ ≈ **315px**)
- 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.

---

### P1-04 — Sticky-Header ist funktional wirkungslos

**Schwere:** Hoch  
**Wo:**
- `resources/views/web/layouts/web-master.blade.php` ~76–114
- `resources/views/components/web/site-header.blade.php` ~101

Das Script ersetzt beim Scrollen `header-normal` durch `header-sticky`. Weder in den Web-CSS-Quellen noch im aktuellen Web-Build existieren Regeln für diese Klassen. Der Header wird deshalb nicht sticky; auf langen Mobilseiten gehen Suche, Login und Veröffentlichungs-CTA beim Scrollen verloren.

---

### 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), Suche 40×40 und Anmelden ~34×34. Mehrere Ziele bleiben damit unter der 44×44-Empfehlung; die große Rubrik-Zeile erreicht 358×44.

---

### 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.

---

### P2-06 — Bedingter Hub-Kontextbanner ohne Mobile-Umbruch

**Wo:** `resources/views/components/web/hub/brand-context-banner.blade.php`  
**Wann sichtbar:** Hub-Aufruf mit `?from=presseecho` oder `?from=businessportal24`

Fließtext, Marken und „Zurück zu …“-Link liegen in einer einzigen Flex-Zeile ohne `flex-wrap` oder Mobile-Stacking. Dieser optionale Zustand wurde statisch als Overflow-/Kompressionsrisiko identifiziert und sollte bei der späteren Browser-QA separat geprüft werden.

---

### P2-07 — Weitere Dichte- und Touch-Themen

- FAQ-Antworten auf „Veröffentlichen“ behalten mobil `pl-[60px]` und verschenken auf 320px viel Textbreite.
- Credit-Pakete auf „Preise“ starten bereits mobil zweispaltig.
- Pagination und mehrere Modal-Schließen-Buttons liegen mit ca. 32–36px unter dem 44×44-Richtwert.
- FAQ/API fehlen in der mobilen Kopf-Navigation und sind mobil nur über den Footer direkt erreichbar.

---

## 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: bei 390px kein H-Scroll; bei 320px stammen die gemessenen 6px Überbreite ausschließlich von der lokalen Debugbar, nicht vom Seitenlayout. FAQ-Zeilen als 3-Spalten-Grid bleiben eher ein 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-04** – Sticky-Header-CSS bzw. gewünschtes Scroll-Verhalten herstellen  
5. **P1-03** – Homepages/Shared: `px-8` → `px-4 sm:px-6 lg:px-8`  
6. **P2** – Kontextbanner, Industry-Index, FAQ-Dichte, 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`)  
8. `resources/views/web/layouts/web-master.blade.php` + Web-CSS (Sticky-Header)  
9. `resources/views/components/web/hub/brand-context-banner.blade.php`

---

*Ende der Bestandsaufnahme. Nächster Schritt nach Freigabe: Fixes in der Reihenfolge P0 → P1 → P2.*