presseportale/dev/archive/frontend-audits/frontend-optimize-grok.md

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:

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.