web: Boost als „Gebuchte Platzierung“ mit Erklärung gekennzeichnet

Label „Gebuchte Platzierung“ (en „Booked placement“) statt „Top-Platzierung“
auf Start- und Branchenseite. Die Erklärung „Das Unternehmen hat diesen Platz
gebucht …“ erscheint am Desktop beim Überfahren und auf Mobil per Tipp, ohne
den umgebenden Link zu öffnen; Screenreader lesen sie mit. Kopfzeile über dem
Aufmacher „Aktuell“ statt „Top-Auswahl“ (automatische Auswahl, keine
Redaktion). Preisseite nennt die Kennzeichnung (Rechtspaket U10).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Kevin Adametz 2026-10-13 10:16:21 +00:00
parent 8124d20946
commit 2150d4b7ae
12 changed files with 72 additions and 27 deletions

View file

@ -0,0 +1,27 @@
@props([
// tag = Schild auf dem Aufmacher-Bild, inline = kleiner Rahmen hinter der Überschrift in Listen
'variant' => 'inline',
])
{{-- Kennzeichnung gebuchter Platzierungen (Rechtspaket 10/2026, U10): das
Label allein sagt, dass der Platz gebucht wurde; die Erklärung erscheint
am Desktop beim Überfahren und auf Mobil per Tipp, ohne dass der Tipp den
umgebenden Link öffnet. Screenreader lesen die Erklärung als Teil des
Linktexts mit. --}}
<span x-data="{ hover: false, pinned: false }"
@mouseenter="hover = true" @mouseleave="hover = false"
@click.prevent.stop="pinned = ! pinned" @click.outside="pinned = false"
class="relative {{ $variant === 'tag' ? 'inline-flex' : 'inline' }} cursor-help" data-boosted-label>
@if ($variant === 'tag')
<span class="bp-tag">{{ __('web.shared.boosted_placement') }}</span>
@else
<span class="inline-flex items-center whitespace-nowrap align-middle border border-brand/30 bg-brand/[0.04] px-1.5 py-px font-mono text-[9.5px] font-bold uppercase tracking-[0.1em] text-brand">{{ __('web.shared.boosted_placement') }}</span>
@endif
<span class="sr-only">: {{ __('web.shared.boosted_placement_hint') }}</span>
<span x-show="hover || pinned" style="display: none" aria-hidden="true" data-boosted-label-hint
@class([
'z-30 bg-bg-dark px-3 py-2 font-sans text-[12px] font-normal normal-case leading-[1.45] tracking-normal text-white shadow-lg',
'absolute left-0 top-full mt-1.5 w-64 max-w-[calc(100vw-3rem)]' => $variant === 'tag',
'mt-1.5 block sm:absolute sm:right-0 sm:top-full sm:w-64' => $variant !== 'tag',
])>{{ __('web.shared.boosted_placement_hint') }}</span>
</span>

View file

@ -28,7 +28,7 @@
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink">
{{ __('web.hero.title') }}
</h2>
<div class="eyebrow muted">{{ ucfirst(now()->isoFormat(__('web.hero.clock_format'))) }} · {{ __('web.hero.editorial_pick') }}</div>
<div class="eyebrow muted">{{ ucfirst(now()->isoFormat(__('web.hero.clock_format'))) }} · {{ __('web.hero.latest') }}</div>
</header>
<hr class="rule-strong mb-6">
@ -52,10 +52,10 @@
<x-web.hero-fallback />
@endif
<div class="absolute top-4 left-4 sm:top-6 sm:left-6 z-10 flex gap-2">
<div class="absolute top-4 left-4 sm:top-6 sm:left-6 z-20 flex gap-2">
<span class="bp-tag">{{ __('web.hero.top_story') }}</span>
@if (in_array($leadRelease->id, $boostedIds, true))
<span class="bp-tag">{{ __('web.shared.boosted_placement') }}</span>
<x-web.boosted-label variant="tag" />
@endif
</div>

View file

@ -47,9 +47,7 @@
<h3 class="font-serif text-[15.5px] leading-[1.3] m-0 font-medium tracking-[-0.1px] text-ink group-hover:text-brand transition-colors">
{{ $title }}
@if ($boosted)
<span class="inline-flex items-center whitespace-nowrap align-middle border border-brand/30 bg-brand/[0.04] px-1.5 py-px font-mono text-[9.5px] font-bold uppercase tracking-[0.1em] text-brand">
{{ __('web.shared.boosted_placement') }}
</span>
<x-web.boosted-label />
@endif
</h3>
<div class="text-[11.5px] text-ink-3 mt-1.5 flex items-center gap-1.5">

View file

@ -183,10 +183,10 @@
@else
<x-web.hero-fallback />
@endif
<div class="absolute top-4 left-4 sm:top-5 sm:left-5 z-10 flex gap-2">
<div class="absolute top-4 left-4 sm:top-5 sm:left-5 z-20 flex gap-2">
<span class="bp-tag">{{ __('web.hero.top_story') }}</span>
@if (in_array($leadRelease->id, $boostedIds ?? [], true))
<span class="bp-tag">{{ __('web.shared.boosted_placement') }}</span>
<x-web.boosted-label variant="tag" />
@endif
</div>
<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));">
@ -233,9 +233,7 @@
<h3 class="font-serif text-[17px] leading-[1.28] m-0 font-semibold tracking-[-0.2px] text-ink group-hover:text-brand transition-colors">
{{ $top->title }}
@if (in_array($top->id, $boostedIds ?? [], true))
<span class="inline-flex items-center whitespace-nowrap align-middle border border-brand/30 bg-brand/[0.04] px-1.5 py-px font-mono text-[9.5px] font-bold uppercase tracking-[0.1em] text-brand">
{{ __('web.shared.boosted_placement') }}
</span>
<x-web.boosted-label />
@endif
</h3>
@if ($top->company?->name)