gitmedia/presseportale
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

web: Responsive-/Mobile-Fixes fürs öffentliche Frontend

Browse source 
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 <cursoragent@cursor.com>
This commit is contained in:
Kevin Adametz 2026-07-16 09:33:49 +00:00
parent 9c67fc6c14
commit dec524989b
19 changed files with 263 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

18
resources/css/web/shared-styles.css
View file

@ -837,6 +837,24 @@
width: 100%; 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 PAGINATION - Gradient für aktive Seite
============================================ */ ============================================ */

46
resources/views/components/web/focus-hero.blade.php
View file

@ -22,7 +22,7 @@
@endphp @endphp
@if ($leadRelease) @if ($leadRelease)
<section class="max-w-layout mx-auto px-8 pt-8"> <section class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 pt-8">
<header class="flex items-baseline justify-between mb-4 flex-wrap gap-2"> <header class="flex items-baseline justify-between mb-4 flex-wrap gap-2">
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink"> <h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink">
{{ __('web.hero.title') }} {{ __('web.hero.title') }}
@ -32,43 +32,41 @@
<hr class="rule-strong mb-6"> <hr class="rule-strong mb-6">
<div class="grid gap-9 lg:grid-cols-[1.7fr_1fr] grid-cols-1"> <div class="grid gap-9 lg:grid-cols-[1.7fr_1fr] grid-cols-1">
{{-- HERO --}} {{-- HERO: Text im Flow (min-h + flex), damit lange Titel auf Mobile nicht nach oben überlaufen --}}
<article> <article>
<div class="relative"> <a href="{{ $leadHref }}" class="block group cursor-pointer">
<a href="{{ $leadHref }}" class="block group cursor-pointer"> <div class="relative overflow-hidden bg-hero-grad min-h-[320px] sm:min-h-[420px] lg:min-h-[500px] flex flex-col justify-end">
<div class="relative overflow-hidden bg-hero-grad h-[500px]"> @if ($leadImageUrl)
@if ($leadImageUrl) <img src="{{ $leadImageUrl }}" alt="{{ $leadTitle }}"
<img src="{{ $leadImageUrl }}" alt="{{ $leadTitle }}" class="absolute inset-0 h-full w-full object-cover opacity-90 transition-opacity group-hover:opacity-100"
class="absolute inset-0 h-full w-full object-cover opacity-90 transition-opacity group-hover:opacity-100" loading="eager">
loading="eager"> <div class="absolute inset-0 bg-black/10"></div>
<div class="absolute inset-0 bg-black/10"></div> @elseif ($leadPlaceholderUrl)
@elseif ($leadPlaceholderUrl) <img src="{{ $leadPlaceholderUrl }}" alt="" aria-hidden="true"
<img src="{{ $leadPlaceholderUrl }}" alt="" aria-hidden="true" class="absolute inset-0 h-full w-full object-cover" loading="eager">
class="absolute inset-0 h-full w-full object-cover" loading="eager"> @else
@else <x-web.hero-fallback />
<x-web.hero-fallback /> @endif
@endif
</div>
<div class="absolute top-6 left-6 flex gap-2"> <div class="absolute top-4 left-4 sm:top-6 sm:left-6 z-10 flex gap-2">
<span class="bp-tag">{{ __('web.hero.top_story') }}</span> <span class="bp-tag">{{ __('web.hero.top_story') }}</span>
@if (in_array($leadRelease->id, $boostedIds, true)) @if (in_array($leadRelease->id, $boostedIds, true))
<span class="bp-tag">{{ __('web.shared.boosted_placement') }}</span> <span class="bp-tag">{{ __('web.shared.boosted_placement') }}</span>
@endif @endif
</div> </div>
<div class="absolute left-0 right-0 bottom-0 px-9 pb-8 pt-[60px] text-white" <div class="relative z-10 px-4 sm:px-9 pb-6 sm:pb-8 pt-16 sm:pt-[60px] text-white"
style="background:linear-gradient(180deg,transparent,rgba(0,0,0,0.92));"> style="background:linear-gradient(180deg,transparent,rgba(0,0,0,0.92));">
@if ($leadCategoryName) @if ($leadCategoryName)
<div class="eyebrow on-dark mb-3">{{ $leadCategoryName }}</div> <div class="eyebrow on-dark mb-3">{{ $leadCategoryName }}</div>
@endif @endif
<h1 class="font-serif text-[38px] font-semibold m-0 leading-[1.1] tracking-[-0.7px] max-w-[680px]"> <h1 class="font-serif text-[24px] sm:text-[32px] lg:text-[38px] font-semibold m-0 leading-[1.1] tracking-[-0.7px] max-w-[680px]">
{{ $leadTitle }} {{ $leadTitle }}
</h1> </h1>
<p class="font-serif text-[15px] leading-[1.5] mt-3.5 max-w-[580px] text-white/85"> <p class="font-serif text-[13.5px] sm:text-[15px] leading-[1.5] mt-3 sm:mt-3.5 max-w-[580px] text-white/85">
{{ $leadTeaser }} {{ $leadTeaser }}
</p> </p>
<div class="mt-4 flex items-center gap-3.5 text-[12px] text-white/65 flex-wrap"> <div class="mt-3 sm:mt-4 flex items-center gap-3.5 text-[12px] text-white/65 flex-wrap">
@if ($leadCompany) @if ($leadCompany)
<span>{{ $leadCompany }}</span> <span>{{ $leadCompany }}</span>
<span aria-hidden="true">·</span> <span aria-hidden="true">·</span>
@ -82,8 +80,8 @@
<span>{{ __('web.shared.read_time', ['minutes' => $leadReadTime]) }}</span> <span>{{ __('web.shared.read_time', ['minutes' => $leadReadTime]) }}</span>
</div> </div>
</div> </div>
</a> </div>
</div> </a>
</article> </article>
{{-- SIDEBAR: Was sonst zählt --}} {{-- SIDEBAR: Was sonst zählt --}}

2
resources/views/components/web/hub/brand-context-banner.blade.php
View file

@ -19,7 +19,7 @@
@if ($context) @if ($context)
<div class="bg-hub-soft border-b border-hub-soft-2"> <div class="bg-hub-soft border-b border-hub-soft-2">
<div class="max-w-layout mx-auto px-8 py-3 flex items-center gap-4"> <div class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center gap-4 flex-wrap">
<span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-hub text-white flex-shrink-0"> <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-hub text-white flex-shrink-0">
<svg width="11" height="11" viewBox="0 0 12 12" fill="none"> <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
<path d="M7.5 2.5L4 6l3.5 3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /> <path d="M7.5 2.5L4 6l3.5 3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />

6
resources/views/components/web/hub/site-footer.blade.php
View file

@ -11,9 +11,9 @@
@endphp @endphp
<footer class="bg-hub-grad-2 text-ink-on-dark"> <footer class="bg-hub-grad-2 text-ink-on-dark">
<div class="max-w-layout mx-auto px-8 py-14 grid gap-10" style="grid-template-columns:1.5fr 1fr 1fr 1fr;"> <div class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-14 grid gap-10 grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1.5fr_1fr_1fr_1fr]">
<div> <div class="sm:col-span-2 lg:col-span-1">
<div class="text-[24px] font-bold leading-none tracking-[-0.5px]"> <div class="text-[24px] font-bold leading-none tracking-[-0.5px]">
<x-web.brand-mark brand="pressekonto" variant="on-dark" :serif="false" /> <x-web.brand-mark brand="pressekonto" variant="on-dark" :serif="false" />
</div> </div>
@ -82,7 +82,7 @@
</div> </div>
<div class="border-t border-white/15"> <div class="border-t border-white/15">
<div class="max-w-layout mx-auto px-8 py-5 flex items-center justify-between gap-4 text-[11.5px] text-white/55"> <div class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 py-5 flex flex-wrap items-center justify-between gap-4 text-[11.5px] text-white/55">
<span>{{ $footerLegal }}</span> <span>{{ $footerLegal }}</span>
</div> </div>
</div> </div>

86
resources/views/components/web/hub/site-header.blade.php
View file

@ -24,49 +24,109 @@
]; ];
@endphp @endphp
<header class="bg-bg-elev border-b border-bg-rule"> <header class="bg-bg-elev border-b border-bg-rule" x-data="{ menuOpen: false }" @keydown.escape.window="menuOpen = false">
<div class="max-w-layout mx-auto px-8 py-[18px] grid items-center gap-6" style="grid-template-columns:auto 1fr auto;"> <div class="max-w-layout mx-auto px-3 sm:px-6 lg:px-8 py-3 sm:py-[18px] flex items-center gap-2 sm:gap-4">
<a href="{{ route('home') }}" class="flex items-baseline gap-2.5 cursor-pointer group" <a href="{{ route('home') }}" class="flex items-baseline gap-2.5 cursor-pointer group min-w-0 flex-shrink-0"
aria-label="pressekonto Startseite"> aria-label="pressekonto Startseite">
<span class="text-[24px] font-bold tracking-[-0.5px] leading-none text-hub"> <span class="text-[19px] sm:text-[24px] font-bold tracking-[-0.5px] leading-none text-hub">
<x-web.brand-mark brand="pressekonto" :serif="false" /> <x-web.brand-mark brand="pressekonto" :serif="false" />
</span> </span>
<span class="hidden md:inline-block w-px h-[18px] bg-bg-rule"></span> <span class="hidden md:inline-block w-px h-[18px] bg-bg-rule"></span>
<span class="eyebrow muted text-[9.5px] tracking-[0.22em]">{{ $brandTagline }}</span> <span class="eyebrow muted text-[9.5px] tracking-[0.22em] hidden md:inline">{{ $brandTagline }}</span>
</a> </a>
<nav class="hidden lg:flex items-center justify-center gap-1 text-[13.5px] font-medium"> <nav class="hidden lg:flex flex-1 items-center justify-center gap-1 text-[13.5px] font-medium">
@foreach ($navigation as $item) @foreach ($navigation as $item)
<a href="{{ $item['href'] }}" <a href="{{ $item['href'] }}"
class="px-3.5 py-2 text-ink-2 hover:text-hub transition-colors">{{ $item['label'] }}</a> class="px-3.5 py-2 text-ink-2 hover:text-hub transition-colors">{{ $item['label'] }}</a>
@endforeach @endforeach
</nav> </nav>
<div class="flex items-center gap-2"> <span class="flex-1 lg:hidden"></span>
<div class="flex items-center gap-1.5 sm:gap-2 flex-shrink-0">
@auth @auth
<a href="{{ \App\Support\LoginRedirect::homeFor(auth()->user()) }}" <a href="{{ \App\Support\LoginRedirect::homeFor(auth()->user()) }}"
class="inline-flex items-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors"> class="inline-flex items-center gap-2 px-3 sm:px-[18px] py-2 sm:py-2.5 text-[12.5px] sm:text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors">
Zum pressekonto <span class="sm:hidden">Konto</span>
<svg width="11" height="11" viewBox="0 0 12 12" fill="none"> <span class="hidden sm:inline">Zum pressekonto</span>
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="hidden sm:inline" aria-hidden="true">
<path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" <path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" /> stroke-linejoin="round" />
</svg> </svg>
</a> </a>
@else @else
{{-- Auf Mobile in das Burger-Panel verlagert, damit die Kopfzeile bei 320px nicht überläuft. --}}
<a href="{{ route('login') }}" <a href="{{ route('login') }}"
class="inline-flex items-center gap-2 px-4 py-2.5 text-[13px] font-semibold text-ink rounded-[4px] hover:bg-bg transition-colors"> class="hidden sm:inline-flex items-center gap-2 px-2.5 sm:px-4 py-2 sm:py-2.5 text-[12.5px] sm:text-[13px] font-semibold text-ink rounded-[4px] hover:bg-bg transition-colors">
Anmelden Anmelden
</a> </a>
<a href="{{ route('register') }}" <a href="{{ route('register') }}"
class="inline-flex items-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors"> class="hidden sm:inline-flex items-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors">
Konto erstellen Konto erstellen
<svg width="11" height="11" viewBox="0 0 12 12" fill="none"> <svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" <path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" /> stroke-linejoin="round" />
</svg> </svg>
</a> </a>
<a href="{{ route('register') }}"
class="sm:hidden inline-flex items-center justify-center px-3 py-2 text-[12.5px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors">
Registrieren
</a>
@endauth @endauth
<button type="button"
class="lg:hidden inline-flex items-center justify-center w-10 h-10 text-ink rounded-[4px] hover:bg-bg transition-colors cursor-pointer"
@click="menuOpen = !menuOpen"
:aria-expanded="menuOpen.toString()"
aria-controls="hub-mobile-nav"
aria-label="Menü öffnen">
<svg x-show="!menuOpen" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
</svg>
<svg x-show="menuOpen" x-cloak width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path d="M5 5l10 10M15 5L5 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
</svg>
</button>
</div> </div>
</div> </div>
<div id="hub-mobile-nav"
x-show="menuOpen"
x-cloak
x-transition.opacity.duration.150ms
class="lg:hidden border-t border-bg-rule bg-bg-elev">
<nav class="max-w-layout mx-auto px-4 sm:px-6 py-3 flex flex-col gap-0.5 text-[14px] font-medium" aria-label="Hauptnavigation">
@foreach ($navigation as $item)
<a href="{{ $item['href'] }}"
@click="menuOpen = false"
class="px-3 py-3 text-ink-2 hover:text-hub hover:bg-bg rounded-[4px] transition-colors">
{{ $item['label'] }}
</a>
@endforeach
{{-- Auth-Einstiege für Mobile (auf sm+ liegen sie in der Kopfzeile). --}}
<div class="mt-2 pt-2 border-t border-bg-rule flex flex-col gap-0.5">
@auth
<a href="{{ \App\Support\LoginRedirect::homeFor(auth()->user()) }}"
@click="menuOpen = false"
class="px-3 py-3 font-semibold text-hub hover:bg-bg rounded-[4px] transition-colors">
Zum pressekonto
</a>
@else
<a href="{{ route('login') }}"
@click="menuOpen = false"
class="px-3 py-3 text-ink-2 hover:text-hub hover:bg-bg rounded-[4px] transition-colors">
Anmelden
</a>
<a href="{{ route('register') }}"
@click="menuOpen = false"
class="px-3 py-3 font-semibold text-hub hover:bg-bg rounded-[4px] transition-colors">
Konto erstellen
</a>
@endauth
</div>
</nav>
</div>
</header> </header>

44
resources/views/components/web/hub/top-utility-bar.blade.php
View file

@ -8,6 +8,7 @@
@php @php
$displayDate = $date ?? now()->locale('de')->isoFormat('dddd, D. MMMM YYYY'); $displayDate = $date ?? now()->locale('de')->isoFormat('dddd, D. MMMM YYYY');
$shortDate = now()->locale('de')->isoFormat('dd, D. MMM');
$defaultUrls = [ $defaultUrls = [
'presseecho' => config('domains.domain_presseecho_url'), 'presseecho' => config('domains.domain_presseecho_url'),
@ -16,36 +17,39 @@
@endphp @endphp
<div class="bg-hub-grad text-ink-on-dark-2 border-b border-black/40"> <div class="bg-hub-grad text-ink-on-dark-2 border-b border-black/40">
<div class="max-w-layout mx-auto px-8 flex items-stretch text-[11.5px] tracking-wide"> <div class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[11.5px] tracking-wide py-2 sm:py-0 sm:items-stretch">
<span class="flex items-center pr-4 py-2.5 whitespace-nowrap border-r border-white/10"> <span class="flex items-center sm:pr-4 sm:py-2.5 sm:border-r sm:border-white/10 whitespace-nowrap">
{{ $displayDate }} <span class="hidden sm:inline">{{ $displayDate }}</span>
<span class="sm:hidden">{{ $shortDate }}</span>
</span> </span>
<span class="flex items-center gap-2.5 px-4 py-2.5 whitespace-nowrap text-white/70"> <span class="flex items-center gap-2 sm:gap-2.5 sm:px-4 sm:py-2.5 min-w-0 text-white/70">
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" class="opacity-65"> <svg width="13" height="13" viewBox="0 0 16 16" fill="none" class="opacity-65 shrink-0 hidden sm:block">
<rect x="2" y="2" width="5.5" height="5.5" stroke="currentColor" stroke-width="1.2" /> <rect x="2" y="2" width="5.5" height="5.5" stroke="currentColor" stroke-width="1.2" />
<rect x="8.5" y="2" width="5.5" height="5.5" stroke="currentColor" stroke-width="1.2" /> <rect x="8.5" y="2" width="5.5" height="5.5" stroke="currentColor" stroke-width="1.2" />
<rect x="2" y="8.5" width="12" height="5.5" stroke="currentColor" stroke-width="1.2" /> <rect x="2" y="8.5" width="12" height="5.5" stroke="currentColor" stroke-width="1.2" />
</svg> </svg>
<span>Publisher-Hub für</span> <span class="hidden md:inline shrink-0">Publisher-Hub für</span>
@foreach ($siblingPortals as $index => $portal) <span class="flex items-center gap-1.5 sm:gap-2 min-w-0 flex-wrap">
@php @foreach ($siblingPortals as $index => $portal)
$brandKey = $portal['brand'] ?? 'presseecho'; @php
$portalUrl = $portal['url'] ?? ($defaultUrls[$brandKey] ?? '#'); $brandKey = $portal['brand'] ?? 'presseecho';
@endphp $portalUrl = $portal['url'] ?? ($defaultUrls[$brandKey] ?? '#');
<a href="{{ $portalUrl }}" class="text-white font-semibold hover:underline"> @endphp
<x-web.brand-mark :brand="$brandKey" variant="on-dark" :serif="false" /> <a href="{{ $portalUrl }}" class="text-white font-semibold hover:underline">
</a> <x-web.brand-mark :brand="$brandKey" variant="on-dark" :serif="false" />
@if (! $loop->last) </a>
<span class="text-white/30">·</span> @if (! $loop->last)
@endif <span class="text-white/30">·</span>
@endforeach @endif
@endforeach
</span>
</span> </span>
<span class="flex-1"></span> <span class="flex-1 hidden sm:block"></span>
<span class="flex items-center gap-4 py-2.5 whitespace-nowrap text-white/65"> <span class="flex items-center gap-3 sm:gap-4 sm:py-2.5 whitespace-nowrap text-white/65 ml-auto sm:ml-0">
<a href="{{ route('faq', ['edition' => 'de']) }}" class="hover:text-white transition-colors">FAQ</a> <a href="{{ route('faq', ['edition' => 'de']) }}" class="hover:text-white transition-colors">FAQ</a>
<a href="{{ route('hilfe', ['edition' => 'de']) }}" class="hover:text-white transition-colors">Hilfe</a> <a href="{{ route('hilfe', ['edition' => 'de']) }}" class="hover:text-white transition-colors">Hilfe</a>
<button type="button" x-data @click="$dispatch('open-contact-modal')" class="hover:text-white cursor-pointer">Kontakt</button> <button type="button" x-data @click="$dispatch('open-contact-modal')" class="hover:text-white cursor-pointer">Kontakt</button>

6
resources/views/components/web/industry-index.blade.php
View file

@ -17,7 +17,7 @@
@endphp @endphp
@if (! empty($industries)) @if (! empty($industries))
<section class="max-w-layout mx-auto px-8 mt-16"> <section class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 mt-16">
<header class="flex items-baseline justify-between mb-4 flex-wrap gap-3"> <header class="flex items-baseline justify-between mb-4 flex-wrap gap-3">
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink">{{ __('web.industry_index.title') }}</h2> <h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink">{{ __('web.industry_index.title') }}</h2>
<span class="eyebrow muted">{{ __('web.industry_index.window') }}</span> <span class="eyebrow muted">{{ __('web.industry_index.window') }}</span>
@ -35,9 +35,9 @@
$barClass = $delta < 0 ? 'bg-brand' : 'bg-gain'; $barClass = $delta < 0 ? 'bg-brand' : 'bg-gain';
@endphp @endphp
<a href="{{ $industry['href'] ?? route('web.home') }}" <a href="{{ $industry['href'] ?? route('web.home') }}"
class="block px-5 py-[18px] {{ $isLastInRow ? '' : 'md:border-r border-bg-rule' }} {{ $isTopRow ? '' : 'border-t border-bg-rule' }} cursor-pointer hover:bg-bg-elev transition-colors group"> 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">
<div class="flex justify-between items-baseline mb-2 gap-2"> <div class="flex justify-between items-baseline mb-2 gap-2">
<span class="text-[14px] font-semibold text-ink group-hover:text-brand transition-colors">{{ $industry['name'] }}</span> <span class="text-[13px] sm:text-[14px] font-semibold text-ink group-hover:text-brand transition-colors">{{ $industry['name'] }}</span>
<span class="font-mono text-[12px] font-semibold <span class="font-mono text-[12px] font-semibold
@if ($direction === 'gain') text-gain @if ($direction === 'gain') text-gain
@elseif ($direction === 'loss') text-loss @elseif ($direction === 'loss') text-loss

2
resources/views/components/web/industry-spotlight.blade.php
View file

@ -10,7 +10,7 @@
@endphp @endphp
@if ($industry && $releases->isNotEmpty()) @if ($industry && $releases->isNotEmpty())
<section class="max-w-layout mx-auto px-8 mt-16"> <section class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 mt-16">
<header class="flex items-baseline justify-between mb-4 flex-wrap gap-3"> <header class="flex items-baseline justify-between mb-4 flex-wrap gap-3">
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink"> <h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink">
{{ __('web.spotlight.title') }} <span class="text-brand">· {{ $industry }}</span> {{ __('web.spotlight.title') }} <span class="text-brand">· {{ $industry }}</span>

2
resources/views/components/web/pricing-teaser.blade.php
View file

@ -16,7 +16,7 @@
@endphp @endphp
@if ($plans->isNotEmpty()) @if ($plans->isNotEmpty())
<section class="max-w-layout mx-auto px-8 mt-16"> <section class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 mt-16">
<header class="flex items-baseline justify-between mb-4 flex-wrap gap-3"> <header class="flex items-baseline justify-between mb-4 flex-wrap gap-3">
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink">{{ __('web.pricing_teaser.title') }}</h2> <h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink">{{ __('web.pricing_teaser.title') }}</h2>
<a href="{{ $pricingHref }}" class="eyebrow muted hover:text-ink transition-colors inline-flex items-center gap-1.5 cursor-pointer"> <a href="{{ $pricingHref }}" class="eyebrow muted hover:text-ink transition-colors inline-flex items-center gap-1.5 cursor-pointer">

9
resources/views/components/web/quality-summary.blade.php
View file

@ -1,15 +1,14 @@
@props(['stats' => []]) @props(['stats' => []])
<section class="max-w-layout mx-auto mt-12 px-8"> <section class="max-w-layout mx-auto mt-12 px-4 sm:px-6 lg:px-8">
<div class="grid items-center gap-7 p-6 bg-bg-card-warm border border-bg-rule-strong" <div class="grid grid-cols-1 sm:grid-cols-[auto_minmax(0,1fr)_auto] items-start sm:items-center gap-4 sm:gap-7 p-5 sm:p-6 bg-bg-card-warm border border-bg-rule-strong">
style="grid-template-columns: auto 1fr auto;">
<div class="w-11 h-11 rounded-full flex-shrink-0 bg-white border border-bg-rule-strong flex items-center justify-center text-brand"> <div class="w-11 h-11 rounded-full flex-shrink-0 bg-white border border-bg-rule-strong flex items-center justify-center text-brand">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M12 2l9 4v6c0 5-3.5 9-9 10-5.5-1-9-5-9-10V6z" stroke="currentColor" stroke-width="1.6" fill="none" /> <path d="M12 2l9 4v6c0 5-3.5 9-9 10-5.5-1-9-5-9-10V6z" stroke="currentColor" stroke-width="1.6" fill="none" />
<path d="M8 12l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /> <path d="M8 12l3 3 5-6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</svg> </svg>
</div> </div>
<div> <div class="min-w-0">
<div class="eyebrow mb-1">{{ __('web.quality.eyebrow') }}</div> <div class="eyebrow mb-1">{{ __('web.quality.eyebrow') }}</div>
<div class="text-[13.5px] text-ink leading-[1.5] font-medium"> <div class="text-[13.5px] text-ink leading-[1.5] font-medium">
{{ __('web.quality.claim') }} {{ __('web.quality.claim') }}
@ -18,7 +17,7 @@
</span> </span>
</div> </div>
</div> </div>
<a href="{{ route('richtlinien') }}" class="text-[12px] font-semibold text-brand whitespace-nowrap underline underline-offset-[3px] decoration-brand/40 cursor-pointer hover:text-brand-deep hover:decoration-brand transition-colors"> <a href="{{ route('richtlinien') }}" class="text-[12px] font-semibold text-brand sm:whitespace-nowrap underline underline-offset-[3px] decoration-brand/40 cursor-pointer hover:text-brand-deep hover:decoration-brand transition-colors">
{{ __('web.quality.guidelines') }} → {{ __('web.quality.guidelines') }} →
</a> </a>
</div> </div>

25
resources/views/components/web/site-header.blade.php
View file

@ -64,7 +64,7 @@
@foreach ($editions as $edition) @foreach ($editions as $edition)
<a href="{{ route('web.home', ['edition' => $edition['code']]) }}" <a href="{{ route('web.home', ['edition' => $edition['code']]) }}"
class="flex items-center gap-1 sm:gap-1.5 px-1.5 sm:px-2.5 py-2 text-[11px] sm:text-[11.5px] whitespace-nowrap -mb-px border-b-2 transition-colors class="flex items-center gap-1 sm:gap-1.5 px-2 sm:px-2.5 py-2.5 text-[11px] sm:text-[11.5px] whitespace-nowrap -mb-px border-b-2 transition-colors
@if ($edition['code'] === $activeEdition) font-semibold text-ink-on-dark bg-white/[0.06] border-brand @if ($edition['code'] === $activeEdition) font-semibold text-ink-on-dark bg-white/[0.06] border-brand
@else font-medium text-ink-on-dark-2 border-transparent hover:text-ink-on-dark hover:bg-white/[0.04] @endif" @else font-medium text-ink-on-dark-2 border-transparent hover:text-ink-on-dark hover:bg-white/[0.04] @endif"
aria-label="{{ __('web.header.edition') }} {{ $edition['label'] }}" aria-label="{{ __('web.header.edition') }} {{ $edition['label'] }}"
@ -103,9 +103,9 @@
@keydown.escape.window="searchOpen = false; loginOpen = false" @keydown.escape.window="searchOpen = false; loginOpen = false"
@keydown.window.prevent.cmd.k="$refs.desktopSearch ? $refs.desktopSearch.focus() : searchOpen = true" @keydown.window.prevent.cmd.k="$refs.desktopSearch ? $refs.desktopSearch.focus() : searchOpen = true"
@keydown.window.prevent.ctrl.k="$refs.desktopSearch ? $refs.desktopSearch.focus() : searchOpen = true"> @keydown.window.prevent.ctrl.k="$refs.desktopSearch ? $refs.desktopSearch.focus() : searchOpen = true">
<div class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 py-3 lg:py-[18px] flex items-center gap-3 sm:gap-4 lg:gap-6"> <div class="max-w-layout mx-auto px-3 sm:px-6 lg:px-8 py-3 lg:py-[18px] flex items-center gap-2 sm:gap-4 lg:gap-6">
<a href="{{ route('web.home') }}" class="block cursor-pointer group flex-shrink-0" aria-label="{{ $brandName }}{{ $brandAccent }} {{ __('web.header.homepage') }}"> <a href="{{ route('web.home') }}" class="block cursor-pointer group flex-shrink-0 min-w-0" aria-label="{{ $brandName }}{{ $brandAccent }} {{ __('web.header.homepage') }}">
<div class="text-[22px] sm:text-[24px] lg:text-[28px] font-semibold leading-none tracking-[-0.5px]"> <div class="text-[19px] sm:text-[24px] lg:text-[28px] font-semibold leading-none tracking-[-0.5px] truncate">
<x-web.brand-mark :brand="$themeKey" /> <x-web.brand-mark :brand="$themeKey" />
</div> </div>
<div class="eyebrow muted mt-1 text-[9.5px] tracking-[0.18em] hidden sm:block"> <div class="eyebrow muted mt-1 text-[9.5px] tracking-[0.18em] hidden sm:block">
@ -168,7 +168,7 @@
{{-- Veröffentlichen --}} {{-- Veröffentlichen --}}
<a href="{{ route('veroeffentlichen') }}" <a href="{{ route('veroeffentlichen') }}"
class="inline-flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 lg:px-[18px] py-2 lg:py-2.5 text-[12.5px] sm:text-[13px] font-semibold text-white bg-brand cursor-pointer hover:bg-brand-deep rounded-[2px] transition-colors whitespace-nowrap" class="inline-flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 lg:px-[18px] py-2 lg:py-2.5 text-[12.5px] sm:text-[13px] font-semibold text-white bg-brand cursor-pointer hover:bg-brand-deep rounded-[2px] transition-colors whitespace-nowrap"
aria-label="{{ __('web.header.publish_aria') }}"> aria-label="{{ __('web.header.publish_aria') }}">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" class="sm:hidden" aria-hidden="true"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" class="sm:hidden" aria-hidden="true">
<path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" /> <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" />
@ -391,7 +391,7 @@
<div class="max-w-layout mx-auto px-4 sm:px-6 py-2"> <div class="max-w-layout mx-auto px-4 sm:px-6 py-2">
@foreach (collect($navigation)->concat($moreNavigation) as $item) @foreach (collect($navigation)->concat($moreNavigation) as $item)
<a href="{{ $item['href'] }}" <a href="{{ $item['href'] }}"
class="flex items-center justify-between px-3 py-3 text-[14px] border-b border-bg-rule last:border-b-0 cursor-pointer transition-colors class="flex items-center justify-between px-3 py-3 text-[14px] border-b border-bg-rule cursor-pointer transition-colors
@if ($item['active'] ?? false) font-semibold text-brand bg-brand/[0.04] @if ($item['active'] ?? false) font-semibold text-brand bg-brand/[0.04]
@else font-medium text-ink-2 hover:text-ink hover:bg-bg @endif"> @else font-medium text-ink-2 hover:text-ink hover:bg-bg @endif">
<span>{{ $item['label'] }}</span> <span>{{ $item['label'] }}</span>
@ -406,6 +406,19 @@
@endif @endif
</a> </a>
@endforeach @endforeach
{{-- Service-Links: auf Mobile sonst nur im Footer erreichbar (FAQ/API liegen in der Topbar hinter lg:). --}}
<div class="mt-1 pt-1">
@foreach ([['label' => __('web.header.pricing'), 'href' => route('preise')], ['label' => 'FAQ', 'href' => route('faq')], ['label' => 'API', 'href' => route('api')]] as $service)
<a href="{{ $service['href'] }}"
class="flex items-center justify-between px-3 py-3 text-[13.5px] border-b border-bg-rule last:border-b-0 font-medium text-ink-3 hover:text-ink hover:bg-bg cursor-pointer transition-colors">
<span>{{ $service['label'] }}</span>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="text-ink-4" aria-hidden="true">
<path d="M4 2l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
@endforeach
</div>
</div> </div>
</div> </div>
</nav> </nav>

2
resources/views/web/businessportal24.blade.php
View file

@ -27,7 +27,7 @@
:side-releases="$sideReleases ?? []" :side-releases="$sideReleases ?? []"
:boosted-ids="$boostedIds ?? []" /> :boosted-ids="$boostedIds ?? []" />
<section class="max-w-layout mx-auto px-8 mt-16"> <section class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 mt-16">
<div class="grid gap-9 grid-cols-1 lg:grid-cols-[1.7fr_1fr]"> <div class="grid gap-9 grid-cols-1 lg:grid-cols-[1.7fr_1fr]">
<livewire:web.press-release-feed :portal="\App\Enums\Portal::Businessportal24->value" :language="app()->getLocale()" /> <livewire:web.press-release-feed :portal="\App\Enums\Portal::Businessportal24->value" :language="app()->getLocale()" />

15
resources/views/web/kategorie.blade.php
View file

@ -119,8 +119,9 @@
<div class="grid gap-9 lg:grid-cols-[1.7fr_1fr]"> <div class="grid gap-9 lg:grid-cols-[1.7fr_1fr]">
<article> <article>
<a href="{{ route('release.detail', ['slug' => $leadRelease->slug]) }}" class="block group"> <a href="{{ route('release.detail', ['slug' => $leadRelease->slug]) }}" class="block group">
{{-- 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.
<div class="relative overflow-hidden bg-hero-grad" style="aspect-ratio: 16 / 10;"> Text im Flow (min-h + flex), damit lange Titel auf Mobile nicht geclippt werden. --}}
<div class="relative overflow-hidden bg-hero-grad min-h-[240px] sm:min-h-[300px] lg:min-h-[360px] flex flex-col justify-end">
@if ($leadImageUrl) @if ($leadImageUrl)
<img src="{{ $leadImageUrl }}" alt="{{ $leadRelease->title }}" class="absolute inset-0 w-full h-full object-cover" loading="lazy"> <img src="{{ $leadImageUrl }}" alt="{{ $leadRelease->title }}" class="absolute inset-0 w-full h-full object-cover" loading="lazy">
@elseif ($leadPlaceholderUrl) @elseif ($leadPlaceholderUrl)
@ -128,23 +129,23 @@
@else @else
<x-web.hero-fallback /> <x-web.hero-fallback />
@endif @endif
<div class="absolute top-5 left-5 flex gap-2"> <div class="absolute top-4 left-4 sm:top-5 sm:left-5 z-10 flex gap-2">
<span class="bp-tag">{{ __('web.hero.top_story') }}</span> <span class="bp-tag">{{ __('web.hero.top_story') }}</span>
@if (in_array($leadRelease->id, $boostedIds ?? [], true)) @if (in_array($leadRelease->id, $boostedIds ?? [], true))
<span class="bp-tag">{{ __('web.shared.boosted_placement') }}</span> <span class="bp-tag">{{ __('web.shared.boosted_placement') }}</span>
@endif @endif
</div> </div>
<div class="absolute left-0 right-0 bottom-0 px-6 sm:px-9 pb-8 pt-[70px] text-white" style="background:linear-gradient(180deg,transparent,rgba(0,0,0,0.92));"> <div class="relative z-10 px-4 sm:px-9 pb-6 sm:pb-8 pt-14 sm:pt-[70px] text-white" style="background:linear-gradient(180deg,transparent,rgba(0,0,0,0.92));">
@if ($leadCatName) @if ($leadCatName)
<div class="eyebrow mb-3" style="color:#FF8B6F;">{{ $leadCatName }}</div> <div class="eyebrow mb-3" style="color:#FF8B6F;">{{ $leadCatName }}</div>
@endif @endif
<h2 class="font-serif text-[26px] sm:text-[32px] font-semibold m-0 leading-[1.12] tracking-[-0.6px] max-w-[680px] group-hover:text-white"> <h2 class="font-serif text-[22px] sm:text-[28px] lg:text-[32px] font-semibold m-0 leading-[1.12] tracking-[-0.6px] max-w-[680px] group-hover:text-white">
{{ $leadRelease->title }} {{ $leadRelease->title }}
</h2> </h2>
@if ($leadLead) @if ($leadLead)
<p class="font-serif text-[14.5px] leading-[1.5] mt-3.5 max-w-[600px] text-white/85">{{ $leadLead }}</p> <p class="font-serif text-[13.5px] sm:text-[14.5px] leading-[1.5] mt-3 sm:mt-3.5 max-w-[600px] text-white/85">{{ $leadLead }}</p>
@endif @endif
<div class="mt-[18px] flex items-center gap-3.5 text-[12px] text-white/70 flex-wrap"> <div class="mt-3.5 sm:mt-[18px] flex items-center gap-3.5 text-[12px] text-white/70 flex-wrap">
@if ($leadCompany) @if ($leadCompany)
<span class="inline-flex items-center gap-1.5"> <span class="inline-flex items-center gap-1.5">
<svg width="11" height="11" viewBox="0 0 11 11" style="color:#5BC07A;" aria-hidden="true"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg> <svg width="11" height="11" viewBox="0 0 11 11" style="color:#5BC07A;" aria-hidden="true"><circle cx="5.5" cy="5.5" r="5" fill="currentColor"/><path d="M3 5.5l1.8 1.8L8 4" stroke="white" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg>

41
resources/views/web/layouts/web-master.blade.php
View file

@ -84,31 +84,48 @@
let topbarHeight = topbar.offsetHeight; let topbarHeight = topbar.offsetHeight;
let isHeaderSticky = false; 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() { function updateHeaderPosition() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop >= topbarHeight && !isHeaderSticky) { if (scrollTop >= topbarHeight && !isHeaderSticky) {
// TopBar ist nicht mehr sichtbar - Header wird sticky makeSticky();
header.classList.remove('header-normal');
header.classList.add('header-sticky');
isHeaderSticky = true;
} else if (scrollTop < topbarHeight && isHeaderSticky) { } else if (scrollTop < topbarHeight && isHeaderSticky) {
// TopBar ist wieder sichtbar - Header wird normal clearSticky();
header.classList.remove('header-sticky');
header.classList.add('header-normal');
isHeaderSticky = false;
} }
} }
// Initial check
updateHeaderPosition(); updateHeaderPosition();
// Listen for scroll events window.addEventListener('scroll', updateHeaderPosition, { passive: true });
window.addEventListener('scroll', updateHeaderPosition);
// Listen for resize events (in case topbar height changes)
window.addEventListener('resize', function() { window.addEventListener('resize', function() {
topbarHeight = topbar.offsetHeight; topbarHeight = topbar.offsetHeight;
if (isHeaderSticky) {
spacer.style.height = header.offsetHeight + 'px';
}
updateHeaderPosition(); updateHeaderPosition();
}); });
}); });

15
resources/views/web/newsroom.blade.php
View file

@ -148,8 +148,9 @@
<section class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 mt-10"> <section class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 mt-10">
<article> <article>
<a href="{{ route('release.detail', ['slug' => $leadRelease->slug]) }}" class="block group"> <a href="{{ route('release.detail', ['slug' => $leadRelease->slug]) }}" class="block group">
{{-- 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.
<div class="relative overflow-hidden bg-hero-grad" style="aspect-ratio: 16 / 9;"> Text im Flow (min-h + flex), damit lange Titel auf Mobile nicht geclippt werden. --}}
<div class="relative overflow-hidden bg-hero-grad min-h-[220px] sm:min-h-[280px] lg:min-h-[340px] flex flex-col justify-end">
@if ($leadImageUrl) @if ($leadImageUrl)
<img src="{{ $leadImageUrl }}" alt="{{ $leadRelease->title }}" class="absolute inset-0 w-full h-full object-cover" loading="lazy"> <img src="{{ $leadImageUrl }}" alt="{{ $leadRelease->title }}" class="absolute inset-0 w-full h-full object-cover" loading="lazy">
@elseif ($leadPlaceholderUrl) @elseif ($leadPlaceholderUrl)
@ -157,20 +158,20 @@
@else @else
<x-web.hero-fallback /> <x-web.hero-fallback />
@endif @endif
<div class="absolute top-5 left-5 flex gap-2"> <div class="absolute top-4 left-4 sm:top-5 sm:left-5 z-10 flex gap-2">
<span class="bp-tag">{{ __('web.newsroom_page.latest') }}</span> <span class="bp-tag">{{ __('web.newsroom_page.latest') }}</span>
</div> </div>
<div class="absolute left-0 right-0 bottom-0 px-6 sm:px-9 pb-8 pt-[70px] text-white" style="background:linear-gradient(180deg,transparent,rgba(0,0,0,0.92));"> <div class="relative z-10 px-4 sm:px-9 pb-6 sm:pb-8 pt-14 sm:pt-[70px] text-white" style="background:linear-gradient(180deg,transparent,rgba(0,0,0,0.92));">
@if ($leadCatName) @if ($leadCatName)
<div class="eyebrow mb-3" style="color:#FF8B6F;">{{ $leadCatName }}</div> <div class="eyebrow mb-3" style="color:#FF8B6F;">{{ $leadCatName }}</div>
@endif @endif
<h2 class="font-serif text-[26px] sm:text-[34px] font-semibold m-0 leading-[1.12] tracking-[-0.6px] max-w-[760px] group-hover:text-white"> <h2 class="font-serif text-[22px] sm:text-[28px] lg:text-[34px] font-semibold m-0 leading-[1.12] tracking-[-0.6px] max-w-[760px] group-hover:text-white">
{{ $leadRelease->title }} {{ $leadRelease->title }}
</h2> </h2>
@if ($leadLead) @if ($leadLead)
<p class="font-serif text-[14.5px] leading-[1.5] mt-3.5 max-w-[640px] text-white/85">{{ $leadLead }}</p> <p class="font-serif text-[13.5px] sm:text-[14.5px] leading-[1.5] mt-3 sm:mt-3.5 max-w-[640px] text-white/85">{{ $leadLead }}</p>
@endif @endif
<div class="mt-[18px] flex items-center gap-3.5 text-[12px] text-white/70 flex-wrap"> <div class="mt-3.5 sm:mt-[18px] flex items-center gap-3.5 text-[12px] text-white/70 flex-wrap">
@if ($leadRelease->published_at) @if ($leadRelease->published_at)
<span class="font-mono">{{ $leadRelease->published_at->translatedFormat('d.m.Y · H:i') }}</span> <span class="font-mono">{{ $leadRelease->published_at->translatedFormat('d.m.Y · H:i') }}</span>
<span aria-hidden="true">·</span> <span aria-hidden="true">·</span>

2
resources/views/web/preise.blade.php
View file

@ -154,7 +154,7 @@
<p class="text-[13.5px] leading-[1.6] text-ink-2 m-0 max-w-[560px]"> <p class="text-[13.5px] leading-[1.6] text-ink-2 m-0 max-w-[560px]">
{{ __('pricing.single.description') }} {{ __('pricing.single.description') }}
</p> </p>
<div class="flex items-center gap-6 md:flex-col md:items-end md:gap-3"> <div class="flex flex-wrap items-center gap-4 md:flex-col md:flex-nowrap md:items-end md:gap-3">
<div class="md:text-right"> <div class="md:text-right">
<div class="font-serif text-[34px] font-semibold leading-none tracking-[-0.6px] text-ink">{{ $euro($singlePmPriceCents) }}&nbsp;€</div> <div class="font-serif text-[34px] font-semibold leading-none tracking-[-0.6px] text-ink">{{ $euro($singlePmPriceCents) }}&nbsp;€</div>
<div class="text-[11.5px] text-ink-3 mt-1">{{ __('pricing.single.price_suffix') }} · {{ __('pricing.single.net') }}</div> <div class="text-[11.5px] text-ink-3 mt-1">{{ __('pricing.single.price_suffix') }} · {{ __('pricing.single.net') }}</div>

2
resources/views/web/presseecho.blade.php
View file

@ -27,7 +27,7 @@
:side-releases="$sideReleases ?? []" :side-releases="$sideReleases ?? []"
:boosted-ids="$boostedIds ?? []" /> :boosted-ids="$boostedIds ?? []" />
<section class="max-w-layout mx-auto px-8 mt-16"> <section class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 mt-16">
<div class="grid gap-9 grid-cols-1 lg:grid-cols-[1.7fr_1fr]"> <div class="grid gap-9 grid-cols-1 lg:grid-cols-[1.7fr_1fr]">
<livewire:web.press-release-feed :portal="\App\Enums\Portal::Presseecho->value" :language="app()->getLocale()" /> <livewire:web.press-release-feed :portal="\App\Enums\Portal::Presseecho->value" :language="app()->getLocale()" />

56
resources/views/web/pressekonto.blade.php
View file

@ -25,13 +25,13 @@
{{-- ============== HERO ============== --}} {{-- ============== HERO ============== --}}
<section class="hero-grid"> <section class="hero-grid">
<div <div
class="max-w-layout mx-auto px-8 pt-16 lg:pt-20 pb-20 lg:pb-24 grid items-start gap-10 lg:gap-12 grid-cols-1 lg:grid-cols-[1.4fr_1fr]"> 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]">
<div> <div>
<div class="section-eyebrow mb-6">Publisher-Hub</div> <div class="section-eyebrow mb-6">Publisher-Hub</div>
<h1 <h1
class="text-[40px] sm:text-[48px] lg:text-[56px] font-bold leading-[1.05] tracking-[-1.2px] text-ink m-0"> class="text-[34px] sm:text-[48px] lg:text-[56px] font-bold leading-[1.05] tracking-[-1.2px] text-ink m-0">
Ein Konto.<br /> Ein Konto.<br />
Zwei Reichweiten.<br /> Zwei Reichweiten.<br />
<x-web.brand-mark brand="presseecho" /> und <x-web.brand-mark brand="businessportal24" />. <x-web.brand-mark brand="presseecho" /> und <x-web.brand-mark brand="businessportal24" />.
@ -102,7 +102,41 @@
<div class="relative bg-bg-elev border border-bg-rule rounded-[4px] p-7"> <div class="relative bg-bg-elev border border-bg-rule rounded-[4px] p-7">
<div class="eyebrow muted mb-5">Architektur</div> <div class="eyebrow muted mb-5">Architektur</div>
<div class="relative mx-auto" style="width:100%;height:320px;"> {{-- Mobile: gestapelte Karten. Ab lg: Diagramm mit absolut positionierten Knoten. --}}
<div class="lg:hidden flex flex-col gap-3">
<div class="px-3.5 py-3 bg-white border border-bg-rule rounded-[3px]">
<div class="text-[10px] font-bold tracking-[0.18em] uppercase text-ink-3">Brand-Portal</div>
<div class="text-[14px] font-bold text-ink mt-0.5 tracking-[-0.2px]">
<x-web.brand-mark brand="presseecho" />
</div>
<div class="text-[10.5px] text-ink-3 mt-0.5">Branchen-Presse · Archiv</div>
</div>
<div class="mx-auto w-[120px] h-[120px] rounded-full bg-hub-grad flex flex-col items-center justify-center text-white shadow-lg shadow-hub/30 text-center">
<div class="text-[10px] font-bold tracking-[0.22em] uppercase text-hub-line">Hub</div>
<div class="text-[14px] font-bold tracking-[-0.3px] mt-1">
<x-web.brand-mark brand="pressekonto" variant="on-dark" :serif="false" />
</div>
</div>
<div class="px-3.5 py-3 bg-white border border-bg-rule rounded-[3px]">
<div class="text-[10px] font-bold tracking-[0.18em] uppercase text-ink-3">Brand-Portal</div>
<div class="text-[14px] font-bold text-ink mt-0.5 tracking-[-0.2px]">
<x-web.brand-mark brand="businessportal24" />
</div>
<div class="text-[10.5px] text-ink-3 mt-0.5">Wirtschaft · Live</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div class="px-3.5 py-2 bg-bg border border-bg-rule rounded-[3px]">
<div class="text-[10px] text-ink-3 tracking-[0.14em] uppercase font-semibold">Veröffentlichung</div>
<div class="font-mono text-[13px] font-semibold text-ink mt-0.5">2× Portale, 1× Klick</div>
</div>
<div class="px-3.5 py-2 bg-bg border border-bg-rule rounded-[3px]">
<div class="text-[10px] text-ink-3 tracking-[0.14em] uppercase font-semibold">Reichweite</div>
<div class="font-mono text-[13px] font-semibold text-ink mt-0.5">zusammengeführt</div>
</div>
</div>
</div>
<div class="relative mx-auto hidden lg:block" style="width:100%;height:320px;">
<svg class="absolute inset-0" width="100%" height="100%" viewBox="0 0 380 320" <svg class="absolute inset-0" width="100%" height="100%" viewBox="0 0 380 320"
preserveAspectRatio="none"> preserveAspectRatio="none">
<line x1="190" y1="160" x2="80" y2="60" stroke="var(--color-hub)" <line x1="190" y1="160" x2="80" y2="60" stroke="var(--color-hub)"
@ -168,7 +202,7 @@
<hr class="rule mt-2" /> <hr class="rule mt-2" />
<div class="grid grid-cols-3 gap-4 mt-4"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
<div> <div>
<div <div
class="font-mono text-[20px] font-semibold text-hub leading-none tracking-[-0.3px] tabular-nums"> class="font-mono text-[20px] font-semibold text-hub leading-none tracking-[-0.3px] tabular-nums">
@ -201,7 +235,7 @@
<hr class="rule" /> <hr class="rule" />
{{-- ============== WAS SIE HIER KÖNNEN ============== --}} {{-- ============== WAS SIE HIER KÖNNEN ============== --}}
<section class="max-w-layout mx-auto px-8 pt-16 lg:pt-20 pb-12 lg:pb-16"> <section class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 pt-16 lg:pt-20 pb-12 lg:pb-16">
<header class="mb-10 flex flex-col lg:flex-row lg:items-baseline lg:justify-between gap-3"> <header class="mb-10 flex flex-col lg:flex-row lg:items-baseline lg:justify-between gap-3">
<div> <div>
<div class="section-eyebrow mb-4">Was Sie hier können</div> <div class="section-eyebrow mb-4">Was Sie hier können</div>
@ -307,7 +341,7 @@
</section> </section>
{{-- ============== SO FUNKTIONIERT ES — 4 STEPS ============== --}} {{-- ============== SO FUNKTIONIERT ES — 4 STEPS ============== --}}
<section id="funktion" class="max-w-layout mx-auto px-8 pt-8 lg:pt-10 pb-16 lg:pb-20"> <section id="funktion" class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 pt-8 lg:pt-10 pb-16 lg:pb-20">
<header class="mb-8"> <header class="mb-8">
<div class="section-eyebrow mb-4">So funktioniert es</div> <div class="section-eyebrow mb-4">So funktioniert es</div>
<h2 <h2
@ -383,7 +417,7 @@
{{-- ============== TARIFE ============== --}} {{-- ============== TARIFE ============== --}}
<section id="tarife" class="bg-hub-soft/40 border-y border-bg-rule" x-data="{ interval: 'monthly' }"> <section id="tarife" class="bg-hub-soft/40 border-y border-bg-rule" x-data="{ interval: 'monthly' }">
<div class="max-w-layout mx-auto px-8 pt-16 lg:pt-20 pb-16 lg:pb-20"> <div class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 pt-16 lg:pt-20 pb-16 lg:pb-20">
<header class="mb-10 lg:mb-12 grid items-end gap-6 grid-cols-1 lg:grid-cols-[1fr_auto]"> <header class="mb-10 lg:mb-12 grid items-end gap-6 grid-cols-1 lg:grid-cols-[1fr_auto]">
<div> <div>
@ -531,7 +565,7 @@
</section> </section>
{{-- ============== PLATTFORM-FAMILIE ============== --}} {{-- ============== PLATTFORM-FAMILIE ============== --}}
<section id="familie" class="max-w-layout mx-auto px-8 pt-16 lg:pt-20 pb-12 lg:pb-16"> <section id="familie" class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 pt-16 lg:pt-20 pb-12 lg:pb-16">
<header class="mb-10"> <header class="mb-10">
<div class="section-eyebrow mb-4">Hinter pressekonto</div> <div class="section-eyebrow mb-4">Hinter pressekonto</div>
<h2 <h2
@ -661,7 +695,7 @@
<hr class="rule" /> <hr class="rule" />
{{-- ============== PLATTFORM IN ZAHLEN ============== --}} {{-- ============== PLATTFORM IN ZAHLEN ============== --}}
<section class="max-w-layout mx-auto px-8 pt-12 lg:pt-16 pb-12 lg:pb-16"> <section class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 pt-12 lg:pt-16 pb-12 lg:pb-16">
<header class="mb-8 grid items-baseline gap-2 lg:gap-6 grid-cols-1 lg:grid-cols-[auto_1fr]"> <header class="mb-8 grid items-baseline gap-2 lg:gap-6 grid-cols-1 lg:grid-cols-[auto_1fr]">
<div class="section-eyebrow">Die Plattform in Zahlen</div> <div class="section-eyebrow">Die Plattform in Zahlen</div>
<div class="text-[12px] text-ink-3 font-mono text-left lg:text-right">Stand <div class="text-[12px] text-ink-3 font-mono text-left lg:text-right">Stand
@ -712,7 +746,7 @@
{{-- ============== FAQ ============== --}} {{-- ============== FAQ ============== --}}
<section id="faq" class="bg-bg-elev border-y border-bg-rule"> <section id="faq" class="bg-bg-elev border-y border-bg-rule">
<div <div
class="max-w-layout mx-auto px-8 pt-12 lg:pt-16 pb-12 lg:pb-16 grid gap-10 lg:gap-12 grid-cols-1 lg:grid-cols-[1fr_2fr]"> class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 pt-12 lg:pt-16 pb-12 lg:pb-16 grid gap-10 lg:gap-12 grid-cols-1 lg:grid-cols-[1fr_2fr]">
<div> <div>
<div class="section-eyebrow mb-4">Häufige Fragen</div> <div class="section-eyebrow mb-4">Häufige Fragen</div>
@ -890,7 +924,7 @@
</section> </section>
{{-- ============== CTA-Wiederholung ============== --}} {{-- ============== CTA-Wiederholung ============== --}}
<section class="max-w-layout mx-auto px-8 pt-12 lg:pt-16 pb-12 lg:pb-16"> <section class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 pt-12 lg:pt-16 pb-12 lg:pb-16">
<div <div
class="grid items-center gap-6 lg:gap-8 px-6 lg:px-10 py-10 lg:py-12 bg-hub-grad text-ink-on-dark rounded-[4px] relative overflow-hidden grid-cols-1 lg:grid-cols-[1fr_auto]"> class="grid items-center gap-6 lg:gap-8 px-6 lg:px-10 py-10 lg:py-12 bg-hub-grad text-ink-on-dark rounded-[4px] relative overflow-hidden grid-cols-1 lg:grid-cols-[1fr_auto]">
<svg class="absolute inset-0 opacity-10 pointer-events-none" width="100%" height="100%" <svg class="absolute inset-0 opacity-10 pointer-events-none" width="100%" height="100%"

2
resources/views/web/veroeffentlichen.blade.php
View file

@ -405,7 +405,7 @@
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="transition-transform group-open:rotate-45"><path d="M6 2v8M2 6h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> <svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="transition-transform group-open:rotate-45"><path d="M6 2v8M2 6h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</span> </span>
</summary> </summary>
<div class="text-[14px] leading-[1.6] text-ink-2 max-w-[640px] pb-[22px] pl-[60px]">{{ $faq['a'] }}</div> <div class="text-[14px] leading-[1.6] text-ink-2 max-w-[640px] pb-[22px] pl-0 sm:pl-[60px]">{{ $faq['a'] }}</div>
</details> </details>
@endforeach @endforeach
</div> </div>