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