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

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:

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.