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

Protokoll & Bestandsaufnahme: Frontend Responsive / Mobile (Re-Audit)

Erstellt: 16.07.2026 (dritte Session) Status: Audit + P1-Fixes umgesetzt (16.07.2026) Viewports: 320×568 (iPhone SE) und 390×844 (iPhone 14/15), mobile: true Scope: Öffentliches Web-Frontend (presseecho, businessportal24, pressekonto-Hub) Nicht im Scope: Admin/Portal (Flux), Auth, Customer-Bereich Grundlage: Code-Review (aktueller Stand) + Live-CDP-Messung im Browser

---

Zweck dieses Dokuments

Frische Bestandsaufnahme nach den bereits umgesetzten Fixes aus dev/frontend-optimize-grok.md. Dieses Protokoll

1. verifiziert, welche früheren P0/P1-Befunde jetzt tatsächlich behoben sind (Code + Live),
2. listet die noch offenen Punkte (v. a. aus dev/frontend-optimize-56.md), und
3. dokumentiert einen neuen, bisher nicht erfassten Fehler bei 320px.

Es wurde bewusst noch kein Code geändert.

---

Kurzfazit

Die schweren strukturellen P0-Bugs aus den beiden Vor-Audits sind im aktuellen Code behoben und live bestätigt (bei 390px kein Seiten-Overflow mehr, Hero-Hierarchie intakt, Hub mit Mobile-Nav/Burger, Footer stackt, Architektur-Diagramm gestapelt).

Offen bleiben:

Priorität	Thema	Betrifft	Quelle
P1	Sticky-Header funktional wirkungslos – Script schaltet Klassen header-normal/header-sticky um, für die keine CSS-Regeln existieren	Portal-Seiten (presseecho, businessportal24)	56.md P1-04, hier live bestätigt
P1 (neu)	Header-Button-Gruppe bricht bei 320px aus → horizontaler Seiten-Scroll auf sehr kleinen Phones	Portal-Home (+38px) & Hub (+62px)	Neu in diesem Audit
P2	Industry-Index: grid-cols-2 + px-5 ab Mobile (gequetscht)	Portal-Homes	56.md P2-01
P2	Touch-Targets in Portal-Topbar unter 44×44 (DE/EN, „Preise")	Portale	56.md P2-03
P2	Stat-Strips grid-cols-2 mit großen Zahlen, Labels wrappen	Kategorie/Newsroom/Veröffentlichen	56.md P2-02
P2	FAQ-Antworten pl-[60px], Credit-Pakete 2-spaltig, kleine Pagination/Modal-Close-Buttons, FAQ/API fehlen in mobiler Portal-Nav	Veröffentlichen/Preise/diverse	56.md P2-07
P3	API-Tabellen overflow-x-auto (bewusst, kein Seiten-Overflow)	API-Seite	56.md P2-05

---

Methode

1. Code-Review der High-Leverage-Blades unter resources/views/web/** und resources/views/components/web/**.
2. Live-Check im Browser mit CDP-Emulation (Emulation.setDeviceMetricsOverride) bei 320px und 390px; Messung von document.documentElement.scrollWidth, Element-Bounding-Boxes und getComputedStyle.
3. Overflow-Isolation: Elemente mit right > clientWidth gefiltert und um solche bereinigt, die einen klippenden Vorfahren (overflow-x: hidden/clip/auto/scroll) haben, sowie um die lokale Laravel-Debugbar.

Hinweis Debugbar: Lokal sichtbar, wurde bei allen Messungen ausgeschlossen (kein Produktionsproblem).

---

Teil A — Verifiziert behoben (aus grok.md)

Befund	Datei(en)	Beleg (Code + Live)
P0-01 Focus-Hero-Overlay überdeckt „Im Fokus"	components/web/focus-hero.blade.php	Overlay jetzt im Flow: min-h-[320px] sm:min-h-[420px] lg:min-h-[500px] flex flex-col justify-end, Type text-[24px] sm:text-[32px] lg:text-[38px]. Live 390px: h1Top=407 > imFokusBottom=250 → Hierarchie intakt.
P0-03 Quality-Summary erzeugt H-Scroll	components/web/quality-summary.blade.php	Grid jetzt grid-cols-1 sm:grid-cols-[auto_minmax(0,1fr)_auto], Link sm:whitespace-nowrap, Padding px-4 sm:px-6 lg:px-8. Live 390px Portal-Home: scrollWidth = 390 (kein Overflow).
P0-02 Kategorie-/Newsroom-Hero gleicher Overlay-Overflow	web/kategorie.blade.php, web/newsroom.blade.php	Beide Heroes jetzt min-h-[…] flex flex-col justify-end statt fester Höhe / Aspect-Ratio.
P0-04 Hub-Utility-Bar + Header sprengen Viewport	components/web/hub/top-utility-bar.blade.php, hub/site-header.blade.php	Utility-Bar flex-wrap, kurzes Datum (sm:hidden), Mobile-Burger + Panel (x-data menuOpen). Live 390px Hub: scrollWidth = 390.
P1-01 Hub-Footer 4 Spalten auf Mobile	components/web/hub/site-footer.blade.php	Jetzt grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1.5fr_1fr_1fr_1fr].
P1-02 Hub-Architektur-Diagramm überlappt	web/pressekonto.blade.php	Mobile-Variante gestapelt (lg:hidden flex flex-col), absolut positioniertes Diagramm nur noch hidden lg:block.
P1-03 Hartes px-8 auf Homepages	focus-hero, quality-summary, industry-index u. a.	Umgestellt auf px-4 sm:px-6 lg:px-8.

---

Teil B — Noch offene Befunde

P1-04 — Sticky-Header ist funktional wirkungslos (live bestätigt)

Schwere: Hoch Wo:

• resources/views/web/layouts/web-master.blade.php (Inline-Script ~76–115)
• resources/views/components/web/site-header.blade.php (id="topbar" Z. 54, id="header" class="header-normal …" Z. 101)

Problem: Beim Scrollen tauscht das Script header-normal ↔ header-sticky. Für diese beiden Klassen existieren keine CSS-Regeln – bestätigt per Repo-Suche: Treffer nur in Blade/JS sowie in dev/_old/-Altbuilds, nicht in den aktiven Web-CSS-Quellen/Builds.

Live-Messung (390px, businessportal24, nach scrollTo(0, 700)):

• header.className = "header-normal …" (Klasse wechselt nicht wirksam)
• getComputedStyle(header).position = "static"
• Header-top = -665 → Header komplett aus dem Viewport gescrollt, nicht sichtbar

Auswirkung: Auf langen Mobilseiten verschwinden Suche, Anmelden und der Veröffentlichungs-CTA beim Scrollen. Der gewünschte Sticky-Effekt tritt nie ein.

Fix-Richtung (später): Entweder CSS für .header-sticky (position: sticky/fixed, Top-Offset, Schatten, Platzhalterhöhe) ergänzen, oder das Script entfernen und stattdessen position: sticky; top: 0 direkt am Header-Container setzen.

---

P1-05 (NEU) — Header-Button-Gruppe bricht bei 320px aus → H-Scroll

Schwere: Hoch (nur ≤ 320px; bei 390px sauber) Status: In den Vor-Audits nicht erfasst (dort wurde vor dem Fix 635/457px gemessen).

Live-Messung 320px:

Seite	scrollWidth	Overflow	Verursacher (kein klippender Vorfahre)
Portal-Home (businessportal24)	358	+38px	Header-rechts-Cluster flex items-center gap-1 sm:gap-2 flex-shrink-0 (right=358), darin PM-Button
Hub (pressekonto)	382	+62px	Header-rechts-Cluster flex items-center gap-1.5 sm:gap-2 flex-shrink-0 (right=383), „Registrieren"-Button + Burger

Ursache:

• Portal (components/web/site-header.blade.php ~144–182): Logo + Such-Icon (40px) + „Anmelden" + PM-Button liegen alle in einer nicht umbrechenden Zeile; flex-shrink-0 verhindert Schrumpfen. Bei 320px reicht die Breite nicht.
• Hub (components/web/hub/site-header.blade.php ~48–91): Logo + „Anmelden" + „Registrieren" + 40px-Burger. Der zusätzliche „Registrieren"-Button (sm:hidden) neben Burger und „Anmelden" ist bei 320px zu breit.

Fix-Richtung (später): Bei ≤ 320px Buttons weiter verkürzen (Icon-only bzw. „Registrieren" in den Burger verlagern), engere Gaps, min-w-0/kürzere Labels; Ziel scrollWidth <= clientWidth auch bei 320px.

---

P2-01 — Industry-Index: 2 Spalten + px-5 ab Mobile

Schwere: Mittel Wo: components/web/industry-index.blade.php (grid-cols-2 md:grid-cols-4, Kacheln px-5) Lange Branchennamen + Delta in einer Zeile wirken bei 320/390px gequetscht. Kein Seiten-Overflow.

P2-02 — Stat-Strips / Sidebar-Grids (Dichte)

Schwere: Mittel Kategorie/Newsroom Stat-Strips grid-cols-2 mit text-[32px]-Zahlen → Labels wrappen unschön. focus-side-item als 3-Spalten-Grid in gestapelter Sidebar funktional ok, aber dicht. Release-Detail-Hero aspect-ratio: 21/9 → mobil sehr flach (~153px Bildhöhe).

P2-03 — Touch-Targets Portal-Topbar

Schwere: Mittel DE/EN-Umschalter und „Preise"-Link in der Topbar bleiben unter der 44×44-Empfehlung. Suche/Anmelden mit ~40×40 grenzwertig; die große Rubrik-Zeile (Burger) erreicht ~358×44.

P2-04 — Brand-Kontextbanner (Hub, ?from=…)

Schwere: Niedrig – weitgehend entschärft components/web/hub/brand-context-banner.blade.php hat jetzt flex-wrap. Live 320px (?from=businessportal24): „Zurück zu"-Link right = 304 (< 320) → kein Overflow. Der flex-1-Spacer ohne min-w-0 am Text ist ein kleines Restrisiko bei extrem langen Marken – niedrig.

P2-05 — API-Seite Tabellen (bewusst)

overflow-x-auto + whitespace-nowrap → Scrollen innerhalb der Tabelle, nicht der Seite. Kein Handlungsbedarf.

P2-06 — Weitere Dichte-/Touch-Themen (aus 56.md P2-07)

• FAQ-Antworten „Veröffentlichen" mit pl-[60px] verschenken auf 320px Textbreite.
• Credit-Pakete auf „Preise" starten bereits mobil zweispaltig.
• Pagination und mehrere Modal-Close-Buttons ~32–36px (< 44×44).
• FAQ/API sind in der mobilen Portal-Kopf-Navigation nicht direkt erreichbar (nur hidden lg:inline in der Topbar bzw. über den Footer). Der Mobile-Burger listet nur Rubriken.

---

Live-Messmatrix (dieses Audit)

Seite	Viewport	scrollWidth	clientWidth	Overflow	Bewertung
Portal-Home (businessportal24)	390	390	390	0	ok
Portal-Home (businessportal24)	320	358	320	+38	Header-Cluster (P1-05)
Hub (pressekonto, ?from=…)	390	390	390	0	ok
Hub (pressekonto, ?from=…)	320	382	320	+62	Header-Cluster (P1-05)
Sticky-Header (Portal, Scroll 700)	390	–	–	–	position: static, scrollt weg (P1-04)

---

Empfohlene Bearbeitungsreihenfolge (noch nicht umsetzen)

1. P1-04 – Sticky-Header: CSS herstellen oder auf position: sticky am Container umstellen.
2. P1-05 (neu) – Header-Button-Cluster bei ≤ 320px entschärfen (Portal + Hub).
3. P2 – Industry-Index-Dichte, Stat-Strips, Touch-Targets, FAQ-Padding, Credit-Pakete, mobile Nav-Erreichbarkeit von FAQ/API.

Akzeptanzkriterium je Fix: document.documentElement.scrollWidth <= clientWidth bei 320/390/430px, plus visuelle Prüfung Portal-Home + Hub + eine Kategorie + eine PM-Detailseite.

---

Dateien mit höchster Hebelwirkung (offen)

1. resources/views/web/layouts/web-master.blade.php + Web-CSS (Sticky-Header, P1-04)
2. resources/views/components/web/site-header.blade.php (Portal-Header 320px, P1-05)
3. resources/views/components/web/hub/site-header.blade.php (Hub-Header 320px, P1-05)
4. resources/views/components/web/industry-index.blade.php (P2-01)
5. Preise-/Veröffentlichen-Views (P2-06: Credit-Pakete, FAQ-Padding)

---

Umsetzung (16.07.2026)

Die beiden P1-Punkte sind umgesetzt und live (320/390px) verifiziert.

Check	Vorher	Nachher
Sticky-Header Portal (nach Scroll)	position: static, scrollt weg	position: fixed; top:0; z-index:50, sichtbar; Platzhalter verhindert Sprung; setzt oben sauber zurück
Portal-Home scrollWidth @320px	358 (+38)	320 (0)
Hub scrollWidth @320px	382 (+62)	320 (0)
presseecho-Home scrollWidth @320/390	–	320 / 390 (0)
Hub/Portal scrollWidth @390px	390	390 (unverändert ok)

Geänderte Dateien:

• resources/css/web/shared-styles.css — CSS-Regeln für .header-sticky ergänzt (P1-04).
• resources/views/web/layouts/web-master.blade.php — Sticky-Script mit Platzhalter (kein Layout-Sprung) (P1-04).
• resources/views/components/web/site-header.blade.php — Portal-Header bei ≤320px verschlankt (Padding/Gap/Logo/CTA) (P1-05).
• resources/views/components/web/hub/site-header.blade.php — Hub-Header verschlankt; „Anmelden" auf Mobile ins Burger-Panel verlagert (P1-05).
• resources/views/web/pressekonto.blade.php — Hub-Hero-H1 Basisgröße text-[34px] (Wortmarke „businessportal24" passte bei 320px nicht) (P1-05).

Tests: PresseechoHomeTest, Businessportal24HomeTest, PressekontoHubHomeTest, HubStaticPageShellTest — 32 passed. Pint sauber.

Hinweis: Web-Assets wurden neu gebaut (npm run build:web). Sail/Docker war nicht aktiv; Build lief direkt über npm.

Umsetzung P2 (16.07.2026)

Punkt	Änderung	Datei
P2 Nav	FAQ, API und Preise ins Mobile-Burger-Menü aufgenommen (vorher mobil nur im Footer)	components/web/site-header.blade.php
P2-03	Edition-Tabs (DE/EN) in der Topbar: py-2 → py-2.5, px-1.5 → px-2 (größere Tap-Fläche)	components/web/site-header.blade.php
P2-01	Industry-Index: px-5 → px-4 sm:px-5, py-[18px] → py-4 sm:py-[18px], Branchenname text-[13px] sm:text-[14px]	components/web/industry-index.blade.php
P2-07	„Veröffentlichen"-FAQ-Antwort: pl-[60px] → pl-0 sm:pl-[60px] (volle Textbreite auf Mobile)	web/veroeffentlichen.blade.php
P2 (neu)	Preise „Einzel-PM"-Block: gap-6 → flex-wrap gap-4 (behebt 11px-Overflow bei 320px)	web/preise.blade.php

Live-Verifikation @320px: Preise scrollWidth 331 → 320; Veröffentlichen ohne echten Layout-Overflow (verbleibende 6px = Debugbar); Mobile-Burger enthält jetzt Preise/FAQ/API.

Tests: 105 passed (u. a. Home-, Hub-, Preise-, Publish-Suites). Pint sauber. Web-Assets neu gebaut.

Bewusst belassen: Credit-Pakete (grid-cols-2) — kompakte Kacheln, bei 320px kein Overflow. Pagination-Buttons (~36px) als optionaler Feinschliff offen.

---

Ende des Protokolls. P1 + P2 umgesetzt und verifiziert.