From dec524989b9f339d83b17028644d4861739f0197 Mon Sep 17 00:00:00 2001 From: Kevin Adametz Date: Thu, 16 Jul 2026 09:33:49 +0000 Subject: [PATCH] =?UTF-8?q?web:=20Responsive-/Mobile-Fixes=20f=C3=BCrs=20?= =?UTF-8?q?=C3=B6ffentliche=20Frontend?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Behebt strukturelle Mobile-Bugs (320/390px) über presseecho, businessportal24 und den pressekonto-Hub hinweg: - Focus-/Kategorie-/Newsroom-Hero: Text im Flow (min-h + flex) statt fester Höhe, responsive Typo — Overlay überläuft nicht mehr nach oben. - Quality-Summary: Grid stackt auf Mobile (behebt Seiten-Overflow). - Hub: Utility-Bar mit Wrap, Header mit Mobile-Burger, Footer stackt, Architektur-Diagramm als gestapelte Mobile-Variante. - Sticky-Header (Portal): fehlende .header-sticky-CSS ergänzt und Script mit Platzhalter, damit der Header beim Scrollen sichtbar bleibt. - Header-Overflow bei 320px entschärft (Portal + Hub); Hub-Hero-H1 verkleinert, damit die Wortmarke "businessportal24" umbricht. - Mobile-Nav um Preise/FAQ/API ergänzt; Industry-Index-Dichte, Touch-Targets und Preise-Einzel-PM-Block für kleine Screens verbessert. - Homepages/Shared: px-8 → px-4 sm:px-6 lg:px-8. Co-authored-by: Cursor --- resources/css/web/shared-styles.css | 18 ++++ .../views/components/web/focus-hero.blade.php | 46 +++++----- .../web/hub/brand-context-banner.blade.php | 2 +- .../components/web/hub/site-footer.blade.php | 6 +- .../components/web/hub/site-header.blade.php | 86 ++++++++++++++++--- .../web/hub/top-utility-bar.blade.php | 44 +++++----- .../components/web/industry-index.blade.php | 6 +- .../web/industry-spotlight.blade.php | 2 +- .../components/web/pricing-teaser.blade.php | 2 +- .../components/web/quality-summary.blade.php | 9 +- .../components/web/site-header.blade.php | 25 ++++-- .../views/web/businessportal24.blade.php | 2 +- resources/views/web/kategorie.blade.php | 15 ++-- .../views/web/layouts/web-master.blade.php | 41 ++++++--- resources/views/web/newsroom.blade.php | 15 ++-- resources/views/web/preise.blade.php | 2 +- resources/views/web/presseecho.blade.php | 2 +- resources/views/web/pressekonto.blade.php | 56 +++++++++--- .../views/web/veroeffentlichen.blade.php | 2 +- 19 files changed, 263 insertions(+), 118 deletions(-) diff --git a/resources/css/web/shared-styles.css b/resources/css/web/shared-styles.css index 93ff6982..d1cc7380 100644 --- a/resources/css/web/shared-styles.css +++ b/resources/css/web/shared-styles.css @@ -837,6 +837,24 @@ width: 100%; } + /* ============================================ + STICKY HEADER (Portal-Frontend) + Das Inline-Script in web-master.blade.php schaltet auf + .header-sticky um, sobald die Topbar weggescrollt ist, und + schiebt einen Platzhalter in den Fluss, damit der Inhalt nicht + springt. Ohne diese Regeln blieb der Header wirkungslos. + ============================================ */ + .header-sticky { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 50; + box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.08), + 0 6px 20px rgba(0, 0, 0, 0.05); + } + /* ============================================ PAGINATION - Gradient für aktive Seite ============================================ */ diff --git a/resources/views/components/web/focus-hero.blade.php b/resources/views/components/web/focus-hero.blade.php index 6e204c76..9f8d4527 100644 --- a/resources/views/components/web/focus-hero.blade.php +++ b/resources/views/components/web/focus-hero.blade.php @@ -22,7 +22,7 @@ @endphp @if ($leadRelease) -
+

{{ __('web.hero.title') }} @@ -32,43 +32,41 @@
- {{-- HERO --}} + {{-- HERO: Text im Flow (min-h + flex), damit lange Titel auf Mobile nicht nach oben überlaufen --}}
-
- -
- @if ($leadImageUrl) - {{ $leadTitle }} -
- @elseif ($leadPlaceholderUrl) - - @else - - @endif -
+ +
+ @if ($leadImageUrl) + {{ $leadTitle }} +
+ @elseif ($leadPlaceholderUrl) + + @else + + @endif -
+
{{ __('web.hero.top_story') }} @if (in_array($leadRelease->id, $boostedIds, true)) {{ __('web.shared.boosted_placement') }} @endif
-
@if ($leadCategoryName)
{{ $leadCategoryName }}
@endif -

+

{{ $leadTitle }}

-

+

{{ $leadTeaser }}

-
+
@if ($leadCompany) {{ $leadCompany }} @@ -82,8 +80,8 @@ {{ __('web.shared.read_time', ['minutes' => $leadReadTime]) }}
- -
+
+
{{-- SIDEBAR: Was sonst zählt --}} diff --git a/resources/views/components/web/hub/brand-context-banner.blade.php b/resources/views/components/web/hub/brand-context-banner.blade.php index 49f8ec7c..b9c928cd 100644 --- a/resources/views/components/web/hub/brand-context-banner.blade.php +++ b/resources/views/components/web/hub/brand-context-banner.blade.php @@ -19,7 +19,7 @@ @if ($context)
-
+
diff --git a/resources/views/components/web/hub/site-footer.blade.php b/resources/views/components/web/hub/site-footer.blade.php index f69be1a4..ba3f75f8 100644 --- a/resources/views/components/web/hub/site-footer.blade.php +++ b/resources/views/components/web/hub/site-footer.blade.php @@ -11,9 +11,9 @@ @endphp
-
+
-
+
@@ -82,7 +82,7 @@
-
+
{{ $footerLegal }}
diff --git a/resources/views/components/web/hub/site-header.blade.php b/resources/views/components/web/hub/site-header.blade.php index ed677f38..d2f0b90e 100644 --- a/resources/views/components/web/hub/site-header.blade.php +++ b/resources/views/components/web/hub/site-header.blade.php @@ -24,49 +24,109 @@ ]; @endphp -
-
+
+
- - + - {{ $brandTagline }} + -
diff --git a/resources/views/components/web/hub/top-utility-bar.blade.php b/resources/views/components/web/hub/top-utility-bar.blade.php index 4fa67473..596be0e1 100644 --- a/resources/views/components/web/hub/top-utility-bar.blade.php +++ b/resources/views/components/web/hub/top-utility-bar.blade.php @@ -8,6 +8,7 @@ @php $displayDate = $date ?? now()->locale('de')->isoFormat('dddd, D. MMMM YYYY'); + $shortDate = now()->locale('de')->isoFormat('dd, D. MMM'); $defaultUrls = [ 'presseecho' => config('domains.domain_presseecho_url'), @@ -16,36 +17,39 @@ @endphp
-
+
- - {{ $displayDate }} + + + {{ $shortDate }} - - + + - Publisher-Hub für - @foreach ($siblingPortals as $index => $portal) - @php - $brandKey = $portal['brand'] ?? 'presseecho'; - $portalUrl = $portal['url'] ?? ($defaultUrls[$brandKey] ?? '#'); - @endphp - - - - @if (! $loop->last) - · - @endif - @endforeach + + + @foreach ($siblingPortals as $index => $portal) + @php + $brandKey = $portal['brand'] ?? 'presseecho'; + $portalUrl = $portal['url'] ?? ($defaultUrls[$brandKey] ?? '#'); + @endphp + + + + @if (! $loop->last) + · + @endif + @endforeach + - + - + FAQ Hilfe diff --git a/resources/views/components/web/industry-index.blade.php b/resources/views/components/web/industry-index.blade.php index f8f4e4fe..28793dd8 100644 --- a/resources/views/components/web/industry-index.blade.php +++ b/resources/views/components/web/industry-index.blade.php @@ -17,7 +17,7 @@ @endphp @if (! empty($industries)) -
+

{{ __('web.industry_index.title') }}

{{ __('web.industry_index.window') }} @@ -35,9 +35,9 @@ $barClass = $delta < 0 ? 'bg-brand' : 'bg-gain'; @endphp + class="block px-4 sm:px-5 py-4 sm:py-[18px] {{ $isLastInRow ? '' : 'md:border-r border-bg-rule' }} {{ $isTopRow ? '' : 'border-t border-bg-rule' }} cursor-pointer hover:bg-bg-elev transition-colors group">
- {{ $industry['name'] }} + {{ $industry['name'] }} +

{{ __('web.spotlight.title') }} · {{ $industry }} diff --git a/resources/views/components/web/pricing-teaser.blade.php b/resources/views/components/web/pricing-teaser.blade.php index 0f55e8f7..2f86ace8 100644 --- a/resources/views/components/web/pricing-teaser.blade.php +++ b/resources/views/components/web/pricing-teaser.blade.php @@ -16,7 +16,7 @@ @endphp @if ($plans->isNotEmpty()) -
+

{{ __('web.pricing_teaser.title') }}

 diff --git a/resources/views/components/web/quality-summary.blade.php b/resources/views/components/web/quality-summary.blade.php index abe9cdcd..56685591 100644 --- a/resources/views/components/web/quality-summary.blade.php +++ b/resources/views/components/web/quality-summary.blade.php @@ -1,15 +1,14 @@ @props(['stats' => []]) -
-
+
+
- diff --git a/resources/views/components/web/site-header.blade.php b/resources/views/components/web/site-header.blade.php index 74be7195..4c6fe1a4 100644 --- a/resources/views/components/web/site-header.blade.php +++ b/resources/views/components/web/site-header.blade.php @@ -64,7 +64,7 @@ @foreach ($editions as $edition) -
- -
+
+ +
diff --git a/resources/views/web/businessportal24.blade.php b/resources/views/web/businessportal24.blade.php index b26b45f2..0e211591 100644 --- a/resources/views/web/businessportal24.blade.php +++ b/resources/views/web/businessportal24.blade.php @@ -27,7 +27,7 @@ :side-releases="$sideReleases ?? []" :boosted-ids="$boostedIds ?? []" /> -
+
diff --git a/resources/views/web/kategorie.blade.php b/resources/views/web/kategorie.blade.php index 21b5a8dd..e80ab19c 100644 --- a/resources/views/web/kategorie.blade.php +++ b/resources/views/web/kategorie.blade.php @@ -119,8 +119,9 @@
- {{-- Kein hatch-dark: dessen background-image würde den bg-hero-grad-Verlauf überschreiben. --}} -
+ {{-- Kein hatch-dark: dessen background-image würde den bg-hero-grad-Verlauf überschreiben. + Text im Flow (min-h + flex), damit lange Titel auf Mobile nicht geclippt werden. --}} +
@if ($leadImageUrl) {{ $leadRelease->title }} @elseif ($leadPlaceholderUrl) @@ -128,23 +129,23 @@ @else @endif -
+
{{ __('web.hero.top_story') }} @if (in_array($leadRelease->id, $boostedIds ?? [], true)) {{ __('web.shared.boosted_placement') }} @endif
-
+
@if ($leadCatName)
{{ $leadCatName }}
@endif -

+

{{ $leadRelease->title }}

@if ($leadLead) -

{{ $leadLead }}

+

{{ $leadLead }}

@endif -
+
@if ($leadCompany) diff --git a/resources/views/web/layouts/web-master.blade.php b/resources/views/web/layouts/web-master.blade.php index df076f28..9873dd22 100644 --- a/resources/views/web/layouts/web-master.blade.php +++ b/resources/views/web/layouts/web-master.blade.php @@ -84,31 +84,48 @@ let topbarHeight = topbar.offsetHeight; let isHeaderSticky = false; + // Platzhalter hält im Fluss die Header-Höhe frei, sobald der + // Header per position:fixed aus dem Fluss genommen wird — + // ohne den Spacer würde der Inhalt beim Fixieren nach oben springen. + const spacer = document.createElement('div'); + spacer.setAttribute('aria-hidden', 'true'); + + function makeSticky() { + spacer.style.height = header.offsetHeight + 'px'; + header.parentNode.insertBefore(spacer, header); + header.classList.remove('header-normal'); + header.classList.add('header-sticky'); + isHeaderSticky = true; + } + + function clearSticky() { + header.classList.remove('header-sticky'); + header.classList.add('header-normal'); + if (spacer.parentNode) { + spacer.parentNode.removeChild(spacer); + } + isHeaderSticky = false; + } + function updateHeaderPosition() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (scrollTop >= topbarHeight && !isHeaderSticky) { - // TopBar ist nicht mehr sichtbar - Header wird sticky - header.classList.remove('header-normal'); - header.classList.add('header-sticky'); - isHeaderSticky = true; + makeSticky(); } else if (scrollTop < topbarHeight && isHeaderSticky) { - // TopBar ist wieder sichtbar - Header wird normal - header.classList.remove('header-sticky'); - header.classList.add('header-normal'); - isHeaderSticky = false; + clearSticky(); } } - // Initial check updateHeaderPosition(); - // Listen for scroll events - window.addEventListener('scroll', updateHeaderPosition); + window.addEventListener('scroll', updateHeaderPosition, { passive: true }); - // Listen for resize events (in case topbar height changes) window.addEventListener('resize', function() { topbarHeight = topbar.offsetHeight; + if (isHeaderSticky) { + spacer.style.height = header.offsetHeight + 'px'; + } updateHeaderPosition(); }); }); diff --git a/resources/views/web/newsroom.blade.php b/resources/views/web/newsroom.blade.php index 48160d7a..96226785 100644 --- a/resources/views/web/newsroom.blade.php +++ b/resources/views/web/newsroom.blade.php @@ -148,8 +148,9 @@
- {{-- Kein hatch-dark: dessen background-image würde den bg-hero-grad-Verlauf überschreiben. --}} -
+ {{-- Kein hatch-dark: dessen background-image würde den bg-hero-grad-Verlauf überschreiben. + Text im Flow (min-h + flex), damit lange Titel auf Mobile nicht geclippt werden. --}} +
@if ($leadImageUrl) {{ $leadRelease->title }} @elseif ($leadPlaceholderUrl) @@ -157,20 +158,20 @@ @else @endif -
+
{{ __('web.newsroom_page.latest') }}
-
+
@if ($leadCatName)
{{ $leadCatName }}
@endif -

+

{{ $leadRelease->title }}

@if ($leadLead) -

{{ $leadLead }}

+

{{ $leadLead }}

@endif -
+
@if ($leadRelease->published_at) {{ $leadRelease->published_at->translatedFormat('d.m.Y · H:i') }} diff --git a/resources/views/web/preise.blade.php b/resources/views/web/preise.blade.php index 02001038..f1dc1c36 100644 --- a/resources/views/web/preise.blade.php +++ b/resources/views/web/preise.blade.php @@ -154,7 +154,7 @@

{{ __('pricing.single.description') }}

-
+
{{ $euro($singlePmPriceCents) }} €
{{ __('pricing.single.price_suffix') }} · {{ __('pricing.single.net') }}
diff --git a/resources/views/web/presseecho.blade.php b/resources/views/web/presseecho.blade.php index 2746c288..d617edc1 100644 --- a/resources/views/web/presseecho.blade.php +++ b/resources/views/web/presseecho.blade.php @@ -27,7 +27,7 @@ :side-releases="$sideReleases ?? []" :boosted-ids="$boostedIds ?? []" /> -
+
diff --git a/resources/views/web/pressekonto.blade.php b/resources/views/web/pressekonto.blade.php index d84bf78b..83f42f25 100644 --- a/resources/views/web/pressekonto.blade.php +++ b/resources/views/web/pressekonto.blade.php @@ -25,13 +25,13 @@ {{-- ============== HERO ============== --}}
+ class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 pt-12 sm:pt-16 lg:pt-20 pb-16 sm:pb-20 lg:pb-24 grid items-start gap-10 lg:gap-12 grid-cols-1 lg:grid-cols-[1.4fr_1fr]">
Publisher-Hub

+ class="text-[34px] sm:text-[48px] lg:text-[56px] font-bold leading-[1.05] tracking-[-1.2px] text-ink m-0"> Ein Konto.
Zwei Reichweiten.
und . @@ -102,7 +102,41 @@
Architektur
-
+ {{-- Mobile: gestapelte Karten. Ab lg: Diagramm mit absolut positionierten Knoten. --}} +
+
+
Brand-Portal
+
+ +
+
Branchen-Presse · Archiv
+
+
+
Hub
+
+ +
+
+
+
Brand-Portal
+
+ +
+
Wirtschaft · Live
+
+
+
+
Veröffentlichung
+
2× Portale, 1× Klick
+
+
+
Reichweite
+
zusammengeführt
+
+
+
+ +