@extends('web.layouts.web-master')

@php
    $brand = config('domains.domains.presseportale.brand', []);
    $from = request()->query('from');
    $todayDate = now()->locale('de')->isoFormat('dddd, D. MMMM YYYY');
@endphp

@section('title', $brand['meta_title'] ?? 'presseportale – Publisher-Hub')
@section('meta_description',
    $brand['meta_description'] ??
    'Der gemeinsame Publisher-Hub für presseecho und
    businessportal24.')

@section('content')
    <x-web.hub.top-utility-bar :date="$todayDate" />
    <x-web.hub.site-header />
    <x-web.hub.brand-context-banner :from="$from" />

    <main class="bg-bg text-ink">

        {{-- ============== HERO ============== --}}
        <section class="hero-grid">
            <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]">

                <div>
                    <div class="section-eyebrow mb-6">Publisher-Hub</div>

                    <h1
                        class="text-[40px] sm:text-[48px] lg:text-[56px] font-bold leading-[1.05] tracking-[-1.2px] text-ink m-0">
                        Ein Konto.<br />
                        Zwei Reichweiten.<br />
                        <x-web.brand-mark brand="presseecho" /> und <x-web.brand-mark brand="businessportal24" />.
                    </h1>

                    <p class="text-[16px] lg:text-[17px] leading-[1.55] text-ink-2 mt-7 m-0 max-w-[560px]">
                        <x-web.brand-mark brand="presseportale" :serif="false" /> ist der gemeinsame Publisher-Bereich für
                        unsere beiden Pressefachportale. Pressemitteilungen schreiben, redaktionell prüfen lassen, auf
                        beiden Reichweiten veröffentlichen — und Reichweite, Empfänger und Abrechnung an einem Ort
                        verwalten.
                    </p>

                    <div class="mt-8 flex flex-wrap items-center gap-3">
                        <a href="{{ route('register') }}"
                            class="inline-flex items-center gap-2.5 px-7 py-3.5 text-[15px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[6px] transition-colors cursor-pointer">
                            Konto erstellen
                            <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
                                <path d="M3 13L13 3M13 3H6M13 3v7" stroke="currentColor" stroke-width="1.6"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                        <a href="{{ route('login') }}"
                            class="inline-flex items-center gap-2 px-6 py-3.5 text-[15px] font-semibold text-hub border border-hub/25 hover:border-hub/60 rounded-[6px] transition-colors cursor-pointer">
                            Anmelden
                        </a>
                    </div>

                    <div class="mt-9 flex flex-wrap items-center gap-x-7 gap-y-3 text-[12.5px] text-ink-3">
                        <span class="flex items-center gap-2">
                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" class="text-hub">
                                <path d="M8 1.5l5.5 2.5v4c0 3.3-2.2 5.8-5.5 6.5C4.7 13.8 2.5 11.3 2.5 8V4z"
                                    stroke="currentColor" stroke-width="1.3" fill="none" />
                                <path d="M5.5 8l2 2 3.5-4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                            Redaktionelle Prüfung
                        </span>
                        <span class="flex items-center gap-2">
                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" class="text-hub">
                                <rect x="2" y="3" width="12" height="10" stroke="currentColor" stroke-width="1.3" />
                                <path d="M2 6h12" stroke="currentColor" stroke-width="1.3" />
                            </svg>
                            Transparente Tarife
                        </span>
                        <span class="flex items-center gap-2">
                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" class="text-hub">
                                <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.3" />
                                <path d="M8 4v4l2.5 1.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" />
                            </svg>
                            Monatlich kündbar
                        </span>
                    </div>
                </div>

                {{-- Architektur-Diagramm --}}
                <div class="relative">
                    <div class="relative bg-bg-elev border border-bg-rule rounded-[4px] p-7">
                        <div class="eyebrow muted mb-5">Architektur</div>

                        <div class="relative mx-auto" style="width:100%;height:320px;">
                            <svg class="absolute inset-0" width="100%" height="100%" viewBox="0 0 380 320"
                                preserveAspectRatio="none">
                                <line x1="190" y1="160" x2="80" y2="60" stroke="var(--color-hub)"
                                    stroke-width="1" stroke-dasharray="3 3" opacity="0.45" />
                                <line x1="190" y1="160" x2="300" y2="60" stroke="var(--color-hub)"
                                    stroke-width="1" stroke-dasharray="3 3" opacity="0.45" />
                                <line x1="190" y1="160" x2="80" y2="260" stroke="var(--color-hub)"
                                    stroke-width="1" stroke-dasharray="3 3" opacity="0.3" />
                                <line x1="190" y1="160" x2="300" y2="260" stroke="var(--color-hub)"
                                    stroke-width="1" stroke-dasharray="3 3" opacity="0.3" />
                            </svg>

                            <div class="absolute" style="top:50%;left:50%;transform:translate(-50%,-50%);">
                                <div
                                    class="w-[140px] h-[140px] 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-[15px] font-bold tracking-[-0.3px] mt-1">
                                        <x-web.brand-mark brand="presseportale" :serif="false" />
                                    </div>
                                </div>
                            </div>

                            <div class="absolute" style="top:10px;left:0;">
                                <div class="px-3.5 py-2.5 bg-white border border-bg-rule rounded-[3px] min-w-[160px]">
                                    <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>

                            <div class="absolute" style="top:10px;right:0;">
                                <div
                                    class="px-3.5 py-2.5 bg-white border border-bg-rule rounded-[3px] min-w-[160px] text-right">
                                    <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>

                            <div class="absolute" style="bottom:10px;left:0;">
                                <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>

                            <div class="absolute" style="bottom:10px;right:0;">
                                <div class="px-3.5 py-2 bg-bg border border-bg-rule rounded-[3px] text-right">
                                    <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>

                        <hr class="rule mt-2" />

                        <div class="grid grid-cols-3 gap-4 mt-4">
                            <div>
                                <div
                                    class="font-mono text-[20px] font-semibold text-hub leading-none tracking-[-0.3px] tabular-nums">
                                    8.412</div>
                                <div class="text-[10.5px] text-ink-3 mt-1 leading-tight">Mitteilungen<br />veröffentlicht
                                    2025</div>
                            </div>
                            <div>
                                <div
                                    class="font-mono text-[20px] font-semibold text-hub leading-none tracking-[-0.3px] tabular-nums">
                                    1.247</div>
                                <div class="text-[10.5px] text-ink-3 mt-1 leading-tight">aktive<br />Newsrooms</div>
                            </div>
                            <div>
                                <div
                                    class="font-mono text-[20px] font-semibold text-hub leading-none tracking-[-0.3px] tabular-nums">
                                    ~ 4 h</div>
                                <div class="text-[10.5px] text-ink-3 mt-1 leading-tight">Ø Prüfzeit<br />Werktags</div>
                            </div>
                        </div>
                    </div>

                    <div
                        class="absolute -bottom-3 -right-3 px-3 py-1.5 bg-accent-soft border border-accent/30 text-accent-deep text-[10.5px] font-bold tracking-[0.14em] uppercase rounded-[2px]">
                        Live-Architektur
                    </div>
                </div>
            </div>
        </section>

        <hr class="rule" />

        {{-- ============== WAS SIE HIER KÖNNEN ============== --}}
        <section class="max-w-layout mx-auto 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">
                <div>
                    <div class="section-eyebrow mb-4">Was Sie hier können</div>
                    <h2
                        class="text-[28px] lg:text-[34px] font-bold m-0 tracking-[-0.7px] text-ink leading-[1.15] max-w-[700px]">
                        Pressearbeit von der Mitteilung bis zur Auswertung — an einem zentralen Ort.
                    </h2>
                </div>
                <a href="#funktion"
                    class="text-[12.5px] font-semibold text-hub hover:underline whitespace-nowrap cursor-pointer">
                    So funktioniert es im Detail →
                </a>
            </header>

            <div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

                <article class="bg-bg-card border border-bg-rule rounded-[4px] p-7 flex flex-col">
                    <div
                        class="w-11 h-11 rounded-[4px] bg-hub-soft border border-hub-soft-2 flex items-center justify-center text-hub mb-5">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                            <path d="M4 4h12l4 4v12H4z" stroke="currentColor" stroke-width="1.6"
                                stroke-linejoin="round" />
                            <path d="M16 4v4h4" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" />
                            <path d="M7 11h10M7 14h10M7 17h6" stroke="currentColor" stroke-width="1.4"
                                stroke-linecap="round" />
                        </svg>
                    </div>
                    <div class="eyebrow mb-2">01 · Veröffentlichen</div>
                    <h3 class="text-[19px] font-semibold m-0 tracking-[-0.3px] text-ink leading-[1.25]">
                        Pressemitteilungen auf beiden Portalen
                    </h3>
                    <p class="text-[13.5px] leading-[1.6] text-ink-2 mt-3 m-0">
                        Eine Mitteilung schreiben, redaktionell prüfen lassen, auf <x-web.brand-mark brand="presseecho"
                            :serif="false" /> und <x-web.brand-mark brand="businessportal24" :serif="false" />
                        gleichzeitig veröffentlichen. Vorschau und Versionsverlauf inklusive.
                    </p>
                    <ul class="mt-5 space-y-1.5 text-[12.5px] text-ink-3 list-none p-0">
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> Editor mit
                            Quellen-Linking</li>
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> Embargo- und
                            Erscheinungsdatum</li>
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> Anhänge:
                            PDF, Bild, Pressekontakt</li>
                    </ul>
                </article>

                <article class="bg-bg-card border border-bg-rule rounded-[4px] p-7 flex flex-col">
                    <div
                        class="w-11 h-11 rounded-[4px] bg-hub-soft border border-hub-soft-2 flex items-center justify-center text-hub mb-5">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                            <rect x="3" y="5" width="18" height="14" stroke="currentColor" stroke-width="1.6" />
                            <path d="M3 9h18" stroke="currentColor" stroke-width="1.6" />
                            <circle cx="6.5" cy="7" r="0.6" fill="currentColor" />
                            <circle cx="8.5" cy="7" r="0.6" fill="currentColor" />
                            <path d="M6 12h7M6 15h10" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
                        </svg>
                    </div>
                    <div class="eyebrow mb-2">02 · Newsrooms verwalten</div>
                    <h3 class="text-[19px] font-semibold m-0 tracking-[-0.3px] text-ink leading-[1.25]">
                        Eigene Unternehmens-Pressestelle
                    </h3>
                    <p class="text-[13.5px] leading-[1.6] text-ink-2 mt-3 m-0">
                        Jeder Newsroom mit Logo, Kontaktperson, Themen-Schwerpunkten und vollständiger Mitteilungs-Historie.
                        Mehrere Newsrooms pro Konto möglich, mit getrennten Berechtigungen.
                    </p>
                    <ul class="mt-5 space-y-1.5 text-[12.5px] text-ink-3 list-none p-0">
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> Mehrere
                            Redakteure pro Newsroom</li>
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span>
                            Verifizierungs-Badge möglich</li>
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> RSS-Feed je
                            Newsroom</li>
                    </ul>
                </article>

                <article class="bg-bg-card border border-bg-rule rounded-[4px] p-7 flex flex-col">
                    <div
                        class="w-11 h-11 rounded-[4px] bg-hub-soft border border-hub-soft-2 flex items-center justify-center text-hub mb-5">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                            <path d="M4 20V8M10 20v-6M16 20V4M22 20V12" stroke="currentColor" stroke-width="1.7"
                                stroke-linecap="round" />
                            <path d="M3 21h19" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
                        </svg>
                    </div>
                    <div class="eyebrow mb-2">03 · Reichweite messen</div>
                    <h3 class="text-[19px] font-semibold m-0 tracking-[-0.3px] text-ink leading-[1.25]">
                        Statistiken, Empfänger, Aufrufe
                    </h3>
                    <p class="text-[13.5px] leading-[1.6] text-ink-2 mt-3 m-0">
                        Aufrufe je Mitteilung über beide Portale aggregiert. Empfänger-Listen, Themen-Resonanz,
                        Verweildauer, Quellen-Backlinks. CSV-Export für Reporting.
                    </p>
                    <ul class="mt-5 space-y-1.5 text-[12.5px] text-ink-3 list-none p-0">
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span>
                            Portal-übergreifende Zahlen</li>
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> Monats- und
                            Jahres-Reports</li>
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> CSV-Export
                            &amp; API</li>
                    </ul>
                </article>
            </div>
        </section>

        {{-- ============== 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">
            <header class="mb-8">
                <div class="section-eyebrow mb-4">So funktioniert es</div>
                <h2
                    class="text-[26px] lg:text-[30px] font-bold m-0 tracking-[-0.6px] text-ink leading-[1.18] max-w-[680px]">
                    Vier Schritte von der Registrierung bis zur veröffentlichten Mitteilung.
                </h2>
            </header>

            <hr class="rule-strong" />

            <ol class="grid gap-0 list-none p-0 m-0 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
                <li class="relative px-7 py-7 border-r border-b lg:border-b-0 border-bg-rule">
                    <div class="flex items-baseline gap-3 mb-3">
                        <span class="font-mono text-[11px] font-bold tracking-[0.18em] text-accent">01</span>
                        <span class="h-px flex-1 bg-bg-rule"></span>
                    </div>
                    <div class="text-[16.5px] font-semibold text-ink tracking-[-0.2px] mb-2">Registrieren</div>
                    <p class="text-[12.5px] text-ink-2 leading-[1.55] m-0">
                        Konto in unter zwei Minuten anlegen. Mit E-Mail oder über Magic-Link. Direkt freigeschaltet für
                        beide Portale.
                    </p>
                </li>
                <li class="relative px-7 py-7 border-r border-b lg:border-b-0 border-bg-rule">
                    <div class="flex items-baseline gap-3 mb-3">
                        <span class="font-mono text-[11px] font-bold tracking-[0.18em] text-accent">02</span>
                        <span class="h-px flex-1 bg-bg-rule"></span>
                    </div>
                    <div class="text-[16.5px] font-semibold text-ink tracking-[-0.2px] mb-2">Erstellen</div>
                    <p class="text-[12.5px] text-ink-2 leading-[1.55] m-0">
                        Mitteilung im Editor verfassen — mit Quellenangaben, Anhängen, Pressekontakt. Newsroom und
                        Themen-Tags zuweisen.
                    </p>
                </li>
                <li class="relative px-7 py-7 border-r border-bg-rule bg-accent-soft/40">
                    <div class="flex flex-wrap items-baseline gap-3 mb-3">
                        <span class="font-mono text-[11px] font-bold tracking-[0.18em] text-accent-deep">03</span>
                        <span
                            class="inline-flex items-center gap-1.5 text-[9.5px] font-bold tracking-[0.16em] uppercase text-accent-deep px-1.5 py-0.5 border border-accent/35 rounded-[2px]">
                            <span class="w-1 h-1 bg-accent-deep rounded-full"></span> Unsere Qualitätssicherung
                        </span>
                        <span class="h-px flex-1 bg-accent/25"></span>
                    </div>
                    <div class="text-[16.5px] font-semibold text-ink tracking-[-0.2px] mb-2">Prüfen lassen</div>
                    <p class="text-[12.5px] text-ink-2 leading-[1.55] m-0">
                        Redaktionelle Prüfung auf Quellenqualität, Relevanz und formale Korrektheit. Ø vier Stunden
                        werktags. Feedback im Editor sichtbar.
                    </p>
                </li>
                <li class="relative px-7 py-7">
                    <div class="flex items-baseline gap-3 mb-3">
                        <span class="font-mono text-[11px] font-bold tracking-[0.18em] text-accent">04</span>
                        <span class="h-px flex-1 bg-bg-rule"></span>
                    </div>
                    <div class="text-[16.5px] font-semibold text-ink tracking-[-0.2px] mb-2">Veröffentlichen</div>
                    <p class="text-[12.5px] text-ink-2 leading-[1.55] m-0">
                        Auf <x-web.brand-mark brand="presseecho" :serif="false" /> und <x-web.brand-mark
                            brand="businessportal24" :serif="false" /> gleichzeitig live. Themen-Verknüpfung im Archiv
                        automatisch. Statistik beginnt zu laufen.
                    </p>
                </li>
            </ol>

            <hr class="rule-strong" />

            <div class="mt-5 px-5 py-3 bg-bg-card-warm border-l-2 border-accent text-[12.5px] text-ink-2 leading-[1.55]">
                <strong class="text-ink font-semibold">Redaktionelle Prüfung</strong> ist Teil unseres
                Qualitätsversprechens — keine PR-Wand, kein automatisierter Durchlauf. Das gilt für alle Tarife, auch den
                Starter.
            </div>
        </section>

        {{-- ============== TARIFE ============== --}}
        <section id="tarife" class="bg-hub-soft/40 border-y border-bg-rule">
            <div class="max-w-layout mx-auto 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]">
                    <div>
                        <div class="section-eyebrow mb-4">Tarife</div>
                        <h2
                            class="text-[28px] lg:text-[34px] font-bold m-0 tracking-[-0.7px] text-ink leading-[1.15] max-w-[760px]">
                            Ein Konto, beide Portale. Keine versteckten Aufschläge für Reichweite.
                        </h2>
                        <p class="text-[14.5px] text-ink-2 leading-[1.55] m-0 mt-4 max-w-[640px]">
                            Alle Tarife enthalten redaktionelle Prüfung, einen verifizierten Newsroom und die
                            Veröffentlichung auf <strong class="text-ink font-semibold"><x-web.brand-mark
                                    brand="presseecho" :serif="false" /></strong> und <strong
                                class="text-ink font-semibold"><x-web.brand-mark brand="businessportal24"
                                    :serif="false" /></strong> ohne Mehrkosten.
                        </p>
                    </div>

                    <div class="flex items-center gap-1 p-1 bg-white border border-bg-rule rounded-[4px] w-fit">
                        <button type="button"
                            class="px-4 py-2 text-[12.5px] font-semibold text-ink-3 rounded-[3px] cursor-pointer">Monatlich</button>
                        <button type="button"
                            class="px-4 py-2 text-[12.5px] font-semibold text-white bg-hub rounded-[3px] cursor-pointer">Jährlich
                            · −20 %</button>
                    </div>
                </header>

                <div class="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

                    {{-- Starter --}}
                    <article class="relative bg-white border border-bg-rule rounded-[4px] p-7 flex flex-col">
                        <div class="eyebrow muted mb-3">Starter</div>
                        <div class="text-[15.5px] text-ink-2 m-0">Für Einzelne und Erst-Anwender</div>
                        <div class="mt-6 flex items-baseline gap-1.5">
                            <span class="text-[42px] font-bold text-ink tracking-[-1.2px] leading-none">0&nbsp;€</span>
                            <span class="text-[12.5px] text-ink-3">/ Monat</span>
                        </div>
                        <div class="text-[11.5px] text-ink-3 mt-1.5 min-h-[16px]">Dauerhaft kostenlos</div>

                        <a href="{{ route('register') }}"
                            class="mt-6 inline-flex items-center justify-center gap-2 px-4 py-2.5 text-[13px] font-semibold text-hub border border-hub/30 hover:border-hub rounded-[4px] transition-colors cursor-pointer">
                            Tarif wählen
                        </a>

                        <hr class="rule my-6" />

                        <ul class="space-y-2.5 text-[12.5px] text-ink-2 list-none p-0 m-0">
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span><strong class="font-semibold">1 Mitteilung</strong> pro Monat</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>Beide Portale</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>1 Newsroom</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>Redaktionelle Prüfung</span>
                            </li>
                            <li class="flex items-start gap-2.5 text-ink-3">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-ink-4 flex-shrink-0 mt-[3px]">
                                    <path d="M4 8h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
                                </svg>
                                <span>Basis-Statistiken</span>
                            </li>
                            <li class="flex items-start gap-2.5 text-ink-4">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="flex-shrink-0 mt-[3px]">
                                    <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.4"
                                        stroke-linecap="round" />
                                </svg>
                                <span>Verifizierungs-Badge</span>
                            </li>
                        </ul>
                    </article>

                    {{-- Standard --}}
                    <article class="relative bg-white border border-bg-rule rounded-[4px] p-7 flex flex-col">
                        <div class="eyebrow muted mb-3">Standard</div>
                        <div class="text-[15.5px] text-ink-2 m-0">Regelmäßige Pressearbeit</div>
                        <div class="mt-6 flex items-baseline gap-1.5">
                            <span class="text-[42px] font-bold text-ink tracking-[-1.2px] leading-none">49&nbsp;€</span>
                            <span class="text-[12.5px] text-ink-3">/ Monat</span>
                        </div>
                        <div class="text-[11.5px] text-ink-3 mt-1.5 min-h-[16px]">jährl. abger. · 588 € / Jahr</div>

                        <a href="{{ route('register') }}"
                            class="mt-6 inline-flex items-center justify-center gap-2 px-4 py-2.5 text-[13px] font-semibold text-hub border border-hub/30 hover:border-hub rounded-[4px] transition-colors cursor-pointer">
                            Tarif wählen
                        </a>

                        <hr class="rule my-6" />

                        <ul class="space-y-2.5 text-[12.5px] text-ink-2 list-none p-0 m-0">
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span><strong class="font-semibold">5 Mitteilungen</strong> pro Monat</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>Beide Portale</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>3 Newsrooms · 2 Redakteure</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>Redaktionelle Prüfung</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>Erweiterte Statistiken</span>
                            </li>
                            <li class="flex items-start gap-2.5 text-ink-4">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="flex-shrink-0 mt-[3px]">
                                    <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.4"
                                        stroke-linecap="round" />
                                </svg>
                                <span>Verifizierungs-Badge</span>
                            </li>
                        </ul>
                    </article>

                    {{-- Pro --}}
                    <article
                        class="relative bg-white border-2 border-hub rounded-[4px] p-7 pt-12 flex flex-col shadow-lg shadow-hub/10 lg:-mt-2">
                        <div class="ribbon-recommend">Empfohlen für Unternehmen</div>

                        <div class="eyebrow mb-3">Pro</div>
                        <div class="text-[15.5px] text-ink-2 m-0">Für aktive Presseteams</div>
                        <div class="mt-6 flex items-baseline gap-1.5">
                            <span class="text-[42px] font-bold text-hub tracking-[-1.2px] leading-none">149&nbsp;€</span>
                            <span class="text-[12.5px] text-ink-3">/ Monat</span>
                        </div>
                        <div class="text-[11.5px] text-ink-3 mt-1.5 min-h-[16px]">jährl. abger. · 1.788 € / Jahr</div>

                        <a href="{{ route('register') }}"
                            class="mt-6 inline-flex items-center justify-center gap-2 px-4 py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors cursor-pointer">
                            Tarif wählen
                            <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
                                <path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>

                        <hr class="rule my-6" />

                        <ul class="space-y-2.5 text-[12.5px] text-ink-2 list-none p-0 m-0">
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span><strong class="font-semibold">20 Mitteilungen</strong> pro Monat</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>Beide Portale</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>10 Newsrooms · 10 Redakteure</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span><strong class="font-semibold">Prioritäts-Prüfung</strong> (Ø 2 h)</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>Verifizierungs-Badge</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>API &amp; RSS-Feeds</span>
                            </li>
                        </ul>
                    </article>

                </div>

                {{-- Enterprise-Streifen --}}
                <article
                    class="mt-6 relative bg-hub text-ink-on-dark rounded-[4px] overflow-hidden grid items-stretch grid-cols-1 lg:grid-cols-[1.1fr_1.5fr_auto]">

                    <div class="px-8 py-7 border-r border-white/10">
                        <div class="eyebrow on-dark mb-3">Enterprise</div>
                        <div class="text-[14px] text-ink-on-dark-2 m-0">Verlagsgruppen &amp; Konzerne</div>
                        <div class="mt-4 flex items-baseline gap-2">
                            <span class="text-[32px] font-bold text-white tracking-[-0.8px] leading-none">Auf
                                Anfrage</span>
                        </div>
                        <div class="text-[11.5px] text-ink-on-dark-2 mt-2 font-mono">ab 25 Mitteilungen / Monat</div>
                    </div>

                    <div class="px-8 py-7 border-r border-white/10">
                        <div class="eyebrow on-dark mb-3.5">Im Tarif enthalten</div>
                        <ul
                            class="grid gap-x-7 gap-y-2 text-[12.5px] text-ink-on-dark-2 list-none p-0 m-0 grid-cols-1 sm:grid-cols-2">
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub-line flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span><strong class="font-semibold text-white">Unbegrenzte Mitteilungen</strong></span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub-line flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>Multi-Mandanten · SSO</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub-line flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>Dediziertes Account-Mgmt</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub-line flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>SLA · 99,9 % Verfügbarkeit</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub-line flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>Custom-API-Integration</span>
                            </li>
                            <li class="flex items-start gap-2.5">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                    class="text-hub-line flex-shrink-0 mt-[3px]">
                                    <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>DPA · ISO 27001</span>
                            </li>
                        </ul>
                    </div>

                    <div class="px-8 py-7 flex flex-col justify-center items-stretch min-w-[260px]">
                        <a href="#"
                            class="inline-flex items-center justify-center gap-2 px-5 py-3 text-[13.5px] font-semibold text-hub bg-white hover:bg-bg rounded-[4px] whitespace-nowrap transition-colors cursor-pointer">
                            Vertrieb kontaktieren
                            <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
                                <path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                        <div class="text-[11px] text-ink-on-dark-2 text-center mt-3 leading-[1.5]">
                            Rückruf werktags innerhalb von 4&nbsp;h<br />
                            <a href="mailto:vertrieb@presseportale.com"
                                class="text-white/85 underline underline-offset-[3px] decoration-white/30">vertrieb@presseportale.com</a>
                        </div>
                    </div>
                </article>

                <div
                    class="mt-10 grid items-center gap-5 px-6 py-5 bg-white border border-bg-rule rounded-[4px] grid-cols-1 lg:grid-cols-[auto_1fr_auto]">
                    <div
                        class="w-10 h-10 rounded-full bg-hub-soft border border-hub-soft-2 flex items-center justify-center text-hub flex-shrink-0">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                            <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.6" />
                            <path d="M12 8v5l3 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
                        </svg>
                    </div>
                    <div class="text-[13px] text-ink-2 leading-[1.55]">
                        <strong class="text-ink font-semibold">Alle Tarife monatlich kündbar.</strong>
                        14 Tage testen, ohne Hinterlegung von Zahlungsdaten. Rechnung per SEPA-Lastschrift, Kreditkarte oder
                        Überweisung. MwSt. ausweisbar.
                    </div>
                    <a href="#"
                        class="text-[12.5px] font-semibold text-hub whitespace-nowrap hover:underline cursor-pointer">
                        Vollständiger Tarif-Vergleich →
                    </a>
                </div>
            </div>
        </section>

        {{-- ============== PLATTFORM-FAMILIE ============== --}}
        <section id="familie" class="max-w-layout mx-auto px-8 pt-16 lg:pt-20 pb-12 lg:pb-16">
            <header class="mb-10">
                <div class="section-eyebrow mb-4">Hinter presseportale</div>
                <h2
                    class="text-[26px] lg:text-[32px] font-bold m-0 tracking-[-0.6px] text-ink leading-[1.18] max-w-[820px]">
                    Zwei eigenständige Pressefachportale. Eine kuratierte Verlags-Familie.
                </h2>
                <p class="text-[14.5px] text-ink-2 leading-[1.55] m-0 mt-4 max-w-[760px]">
                    <x-web.brand-mark brand="presseportale" :serif="false" /> ist nicht „irgendein Tool" — es ist die
                    zentrale Plattform für unsere beiden redaktionell geführten Pressefachportale. Jedes Portal hat einen
                    eigenen Charakter, eigene Leserschaft und eigene Themen-Schwerpunkte.
                </p>
            </header>

            <div class="grid gap-6 grid-cols-1 lg:grid-cols-2">

                {{-- presseecho --}}
                <article class="bg-bg-card border border-bg-rule rounded-[4px] overflow-hidden">
                    <div class="px-7 pt-7 pb-6 text-white"
                        style="background:linear-gradient(135deg, rgb(26, 61, 46) 0%, rgb(18, 45, 34) 100%);">
                        <div class="text-[11px] font-bold tracking-[0.20em] uppercase mb-3" style="color:#9BD5B2;">
                            Brand-Portal · 01</div>
                        <div class="flex items-baseline gap-3 mb-2">
                            <span class="text-[28px] lg:text-[34px] font-bold tracking-[-0.8px] leading-none">
                                <x-web.brand-mark brand="presseecho" variant="on-dark" />
                            </span>
                        </div>
                        <div class="text-[12.5px] tracking-[0.12em] uppercase font-semibold" style="color:#9BD5B2;">
                            Branchen-Presse · Archiv seit 2012
                        </div>
                    </div>
                    <div class="px-7 py-7">
                        <p class="text-[13.5px] leading-[1.6] text-ink-2 m-0">
                            Themen-Sammlung und Langzeit-Archiv für Pressemitteilungen aus DACH. Editorial-Charakter,
                            Themen-Tiefe, redaktionell erschlossen — der Ort, an dem eine Mitteilung über Jahre auffindbar
                            bleibt.
                        </p>
                        <hr class="rule my-5" />
                        <div class="grid gap-4 mb-5 grid-cols-2">
                            <div>
                                <div class="font-mono text-[18px] font-semibold text-ink leading-none tabular-nums">100.247
                                </div>
                                <div class="text-[11px] text-ink-3 mt-1">Mitteilungen im Archiv</div>
                            </div>
                            <div>
                                <div class="font-mono text-[18px] font-semibold text-ink leading-none tabular-nums">11
                                    Branchen</div>
                                <div class="text-[11px] text-ink-3 mt-1">Bildung – Tourismus</div>
                            </div>
                        </div>
                        <a href="{{ config('domains.domain_presseecho_url') }}"
                            class="inline-flex items-center gap-2 text-[13px] font-semibold hover:underline"
                            style="color:#1F4D3A;">
                            Zur Plattform: <x-web.brand-mark brand="presseecho" :serif="false"
                                class="font-semibold" />
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                    </div>
                </article>

                {{-- businessportal24 --}}
                <article class="bg-bg-card border border-bg-rule rounded-[4px] overflow-hidden">
                    <div class="px-7 pt-7 pb-6 text-white"
                        style="background:linear-gradient(135deg, rgb(26, 31, 38) 0%, rgb(35, 42, 51) 100%);">
                        <div class="text-[11px] font-bold tracking-[0.20em] uppercase mb-3" style="color:#C84A1E;">
                            Brand-Portal · 02</div>
                        <div class="flex items-baseline gap-3 mb-2">
                            <span class="text-[28px] lg:text-[34px] font-bold tracking-[-0.8px] leading-none">
                                <x-web.brand-mark brand="businessportal24" variant="on-dark" />
                            </span>
                        </div>
                        <div class="text-[12.5px] tracking-[0.12em] uppercase font-semibold" style="color:#C84A1E;">
                            Wirtschaft &amp; Märkte · Live-Charakter
                        </div>
                    </div>
                    <div class="px-7 py-7">
                        <p class="text-[13.5px] leading-[1.6] text-ink-2 m-0">
                            Pressemitteilungen aus Wirtschaft, Märkten, Finanzen. Tageszeitlicher Rhythmus, Live-Ticker,
                            Branchen-fokussiert. Der Ort, an dem eine Mitteilung am Erscheinungstag die größte Sichtbarkeit
                            bekommt.
                        </p>
                        <hr class="rule my-5" />
                        <div class="grid gap-4 mb-5 grid-cols-2">
                            <div>
                                <div class="font-mono text-[18px] font-semibold text-ink leading-none tabular-nums">~ 140
                                </div>
                                <div class="text-[11px] text-ink-3 mt-1">Mitteilungen pro Tag</div>
                            </div>
                            <div>
                                <div class="font-mono text-[18px] font-semibold text-ink leading-none tabular-nums">8
                                    Märkte</div>
                                <div class="text-[11px] text-ink-3 mt-1">DAX–MDAX–TecDAX</div>
                            </div>
                        </div>
                        <a href="{{ config('domains.domain_businessportal_url') }}"
                            class="inline-flex items-center gap-2 text-[13px] font-semibold hover:underline"
                            style="color:#C84A1E;">
                            Zur Plattform: <x-web.brand-mark brand="businessportal24" :serif="false"
                                class="font-semibold" />
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                    </div>
                </article>
            </div>

            <div class="mt-7 px-6 py-5 bg-hub text-ink-on-dark-2 rounded-[4px] flex items-center gap-5">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                    class="text-hub-line flex-shrink-0">
                    <path d="M3 12c2-2 4-2 6 0M21 12c-2-2-4-2-6 0" stroke="currentColor" stroke-width="1.5"
                        stroke-linecap="round" />
                    <path d="M9 12h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                </svg>
                <div class="text-[13px] leading-[1.55]">
                    Pressemitteilungen, die Sie über <x-web.brand-mark brand="presseportale" variant="on-dark"
                        :serif="false" /> einreichen, erscheinen auf <strong class="text-white font-semibold">beiden
                        Portalen</strong> — ohne Aufpreis, ohne doppelte Eingabe. Sie haben eine zentrale
                    Mitteilungs-Verwaltung und eine zentrale Reichweiten-Statistik.
                </div>
            </div>
        </section>

        <hr class="rule" />

        {{-- ============== SOCIAL PROOF — AKTIVE NEWSROOMS ============== --}}
        <section class="max-w-layout mx-auto 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]">
                <div class="section-eyebrow">Aktive Newsrooms</div>
                <div class="text-[12px] text-ink-3 font-mono text-left lg:text-right">Stand
                    {{ now()->locale('de')->isoFormat('D. MMMM YYYY') }} · 1.247 verifizierte Newsrooms</div>
            </header>
            <hr class="rule-strong mb-7" />

            <div class="grid gap-10 grid-cols-1 lg:grid-cols-[2fr_1fr]">

                <div>
                    <p class="text-[15px] lg:text-[16px] leading-[1.7] text-ink-2 m-0">
                        Über <x-web.brand-mark brand="presseportale" :serif="false" /> veröffentlichen unter anderem
                        <a class="text-hub font-semibold underline underline-offset-[3px] decoration-hub/25 hover:decoration-hub"
                            href="#">Siemens AG</a>,
                        <a class="text-hub font-semibold underline underline-offset-[3px] decoration-hub/25 hover:decoration-hub"
                            href="#">BASF SE</a>,
                        <a class="text-hub font-semibold underline underline-offset-[3px] decoration-hub/25 hover:decoration-hub"
                            href="#">Deutsche Bank</a>,
                        <a class="text-hub font-semibold underline underline-offset-[3px] decoration-hub/25 hover:decoration-hub"
                            href="#">Allianz</a>,
                        <a class="text-hub font-semibold underline underline-offset-[3px] decoration-hub/25 hover:decoration-hub"
                            href="#">EnBW</a>,
                        <a class="text-hub font-semibold underline underline-offset-[3px] decoration-hub/25 hover:decoration-hub"
                            href="#">RWE</a>,
                        <a class="text-hub font-semibold underline underline-offset-[3px] decoration-hub/25 hover:decoration-hub"
                            href="#">SAP</a>,
                        <a class="text-hub font-semibold underline underline-offset-[3px] decoration-hub/25 hover:decoration-hub"
                            href="#">Lufthansa</a>,
                        <a class="text-hub font-semibold underline underline-offset-[3px] decoration-hub/25 hover:decoration-hub"
                            href="#">Bayer</a>,
                        <a class="text-hub font-semibold underline underline-offset-[3px] decoration-hub/25 hover:decoration-hub"
                            href="#">Stadtwerke München</a>,
                        <a class="text-hub font-semibold underline underline-offset-[3px] decoration-hub/25 hover:decoration-hub"
                            href="#">Fraunhofer-Gesellschaft</a>,
                        <a class="text-hub font-semibold underline underline-offset-[3px] decoration-hub/25 hover:decoration-hub"
                            href="#">Hochschulrektorenkonferenz</a>
                        sowie über 1.200 weitere Unternehmen, Verbände und öffentliche Einrichtungen aus Deutschland,
                        Österreich und der Schweiz. Jeder Newsroom ist redaktionell verifiziert; die Veröffentlichungen
                        unterliegen unserem Qualitätsstandard.
                    </p>
                    <p class="text-[13px] leading-[1.65] text-ink-3 m-0 mt-5">
                        Verteilung nach Sektoren: Industrie und Energie führen mit zusammen 38 %, gefolgt von Finanzen (17
                        %), Mobilität (12 %), Bildung (10 %), Gesundheit (9 %), Technologie (8 %) und übrigen Branchen (6
                        %).
                    </p>
                </div>

                <aside class="bg-bg-card-warm border border-bg-rule-strong rounded-[4px] p-6">
                    <div class="eyebrow mb-4">Plattform im Überblick</div>
                    <hr class="rule mb-5" />
                    <dl class="space-y-4 m-0">
                        <div class="flex items-baseline justify-between gap-3">
                            <dt class="text-[12.5px] text-ink-3">Mitteilungen 2025</dt>
                            <dd class="font-mono text-[16px] font-semibold text-ink m-0 tabular-nums">8.412</dd>
                        </div>
                        <div class="flex items-baseline justify-between gap-3">
                            <dt class="text-[12.5px] text-ink-3">Veröffentlichungen / Werktag</dt>
                            <dd class="font-mono text-[16px] font-semibold text-ink m-0 tabular-nums">~ 38</dd>
                        </div>
                        <div class="flex items-baseline justify-between gap-3">
                            <dt class="text-[12.5px] text-ink-3">Verifizierte Newsrooms</dt>
                            <dd class="font-mono text-[16px] font-semibold text-ink m-0 tabular-nums">1.247</dd>
                        </div>
                        <div class="flex items-baseline justify-between gap-3">
                            <dt class="text-[12.5px] text-ink-3">Ø Prüfzeit Werktags</dt>
                            <dd class="font-mono text-[16px] font-semibold text-ink m-0 tabular-nums">3 h 47</dd>
                        </div>
                        <div class="flex items-baseline justify-between gap-3">
                            <dt class="text-[12.5px] text-ink-3">Annahme-Quote (Erstprüfung)</dt>
                            <dd class="font-mono text-[16px] font-semibold text-ink m-0 tabular-nums">82 %</dd>
                        </div>
                    </dl>
                </aside>
            </div>
        </section>

        {{-- ============== FAQ ============== --}}
        <section id="faq" class="bg-bg-elev border-y border-bg-rule">
            <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]">

                <div>
                    <div class="section-eyebrow mb-4">Häufige Fragen</div>
                    <h2 class="text-[24px] lg:text-[28px] font-bold m-0 tracking-[-0.5px] text-ink leading-[1.2]">
                        Antworten zu Konto, Prüfung, Tarifen und Rechtlichem.
                    </h2>
                    <p class="text-[13px] text-ink-3 leading-[1.55] mt-4 m-0">
                        Sie finden hier nicht, was Sie suchen?
                        <a class="text-hub font-semibold underline underline-offset-[3px] decoration-hub/30 hover:decoration-hub"
                            href="#">Schreiben Sie unserem Support</a> — Werktags Antwort innerhalb von 4 Stunden.
                    </p>
                </div>

                <div>
                    <hr class="rule-strong" />

                    <details class="border-b border-bg-rule group" open>
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Was kostet ein
                                Konto?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Ein Konto selbst kostet nichts. Sie zahlen für die Pressemitteilungen, die Sie veröffentlichen —
                            entweder pro Stück (Starter-Tarif, 0 € / Monat) oder über einen Monats- bzw. Jahres-Tarif
                            (Standard, Pro, Enterprise). Die redaktionelle Prüfung und die Veröffentlichung auf beiden
                            Portalen sind in allen Tarifen enthalten.
                        </div>
                    </details>

                    <details class="border-b border-bg-rule group">
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Wie läuft die
                                redaktionelle Prüfung?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Sobald Sie eine Mitteilung einreichen, prüfen unsere Redakteure formale Korrektheit,
                            Quellenqualität, Themenrelevanz und Plausibilität. Werktags im Schnitt nach ca. vier Stunden,
                            Pro-Tarif nach ca. zwei. Bei Rückfragen erhalten Sie Feedback direkt im Editor — kein PR-Filter,
                            sondern verlegerische Qualitätssicherung.
                        </div>
                    </details>

                    <details class="border-b border-bg-rule group">
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Auf welchen Portalen
                                erscheint meine Mitteilung?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Auf <strong class="text-ink font-semibold"><x-web.brand-mark brand="presseecho"
                                    :serif="false" /></strong> und <strong
                                class="text-ink font-semibold"><x-web.brand-mark brand="businessportal24"
                                    :serif="false" /></strong> — beide. Welche Sektion und welche Branchen-Rubrik die
                            Mitteilung erhält, wird automatisch aus Ihren Themen-Tags abgeleitet und in der Vorschau
                            angezeigt. Sie können bei Bedarf Hinweise hinzufügen.
                        </div>
                    </details>

                    <details class="border-b border-bg-rule group">
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Wie lange dauert die
                                Veröffentlichung?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Werktags zwischen 8:00 und 18:00 Uhr im Schnitt rund vier Stunden vom Einreichen bis zur
                            Live-Schaltung. Sie können ein Embargo-Datum setzen, dann erscheint die Mitteilung sekundengenau
                            zum gewünschten Zeitpunkt — geprüft und freigegeben ist sie davor.
                        </div>
                    </details>

                    <details class="border-b border-bg-rule group">
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Kann ich monatlich
                                kündigen?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Ja. Alle Tarife sind monatlich kündbar. Bei Jahres-Abrechnung wird die Restlaufzeit anteilig
                            erstattet. Ihr Konto und Ihre Newsroom-Archive bleiben dauerhaft bestehen — auch nach Kündigung
                            sind veröffentlichte Mitteilungen weiter im Archiv auffindbar.
                        </div>
                    </details>

                    <details class="border-b border-bg-rule group">
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Wie steht es um DSGVO und
                                Datenverarbeitung?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Alle Daten werden ausschließlich in der EU verarbeitet (Frankfurt &amp; München, ISO 27001
                            zertifizierte Rechenzentren). Ein DPA / AV-Vertrag ist im Konto-Bereich abrufbar. Detaillierte
                            Informationen zu Speicherdauer, Auftragsverarbeitung und Betroffenenrechten finden Sie in der <a
                                class="text-hub underline underline-offset-[3px] decoration-hub/30 hover:decoration-hub"
                                href="#">Datenschutzerklärung</a>.
                        </div>
                    </details>

                    <details class="border-b border-bg-rule group">
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Was passiert, wenn ich vom
                                Brand-Portal komme?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Wenn Sie über den „Publisher-Bereich"-Button auf <x-web.brand-mark brand="presseecho"
                                :serif="false" /> oder <x-web.brand-mark brand="businessportal24" :serif="false" />
                            hier ankommen, wird Ihnen oben angezeigt, woher Sie kommen — und dass Ihr Konto auf beiden
                            Portalen gilt. Sie können jederzeit zurück auf das ursprüngliche Portal, ohne Anmeldung zu
                            verlieren.
                        </div>
                    </details>

                    <details class="group">
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Gibt es eine API für meine
                                PR-Tools?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Ab dem Pro-Tarif. REST-API mit OAuth2, vollständig dokumentiert, mit Sandbox-Modus. Mitteilungen
                            einreichen, Status abfragen, Statistiken auslesen, Newsrooms verwalten. Webhooks für
                            Veröffentlichungs- und Status-Ereignisse. Enterprise-Kunden erhalten zusätzlich
                            Custom-Integrationen.
                        </div>
                    </details>
                </div>
            </div>
        </section>

        {{-- ============== CTA-Wiederholung ============== --}}
        <section class="max-w-layout mx-auto px-8 pt-12 lg:pt-16 pb-12 lg:pb-16">
            <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]">
                <svg class="absolute inset-0 opacity-10 pointer-events-none" width="100%" height="100%"
                    preserveAspectRatio="none">
                    <defs>
                        <pattern id="hub-grid" x="0" y="0" width="48" height="48" patternUnits="userSpaceOnUse">
                            <path d="M48 0H0V48" stroke="white" stroke-width="0.5" fill="none" />
                        </pattern>
                    </defs>
                    <rect width="100%" height="100%" fill="url(#hub-grid)" />
                </svg>

                <div class="relative">
                    <div class="section-eyebrow on-dark mb-4">Loslegen</div>
                    <h2
                        class="text-[26px] lg:text-[34px] font-bold m-0 tracking-[-0.7px] text-white leading-[1.15] max-w-[680px]">
                        In zwei Minuten registriert. Eine Mitteilung im Starter-Tarif inklusive.
                    </h2>
                    <p class="text-[13.5px] lg:text-[14px] text-ink-on-dark-2 leading-[1.55] mt-4 m-0 max-w-[600px]">
                        Keine Kreditkarte erforderlich. 14 Tage zum Testen. Monatlich kündbar.
                    </p>
                </div>
                <div class="relative flex flex-col gap-2.5">
                    <a href="{{ route('register') }}"
                        class="inline-flex items-center justify-center gap-2.5 px-7 py-3.5 text-[15px] font-semibold text-hub bg-white hover:bg-bg rounded-[6px] whitespace-nowrap transition-colors cursor-pointer">
                        Konto erstellen
                        <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
                            <path d="M3 13L13 3M13 3H6M13 3v7" stroke="currentColor" stroke-width="1.6"
                                stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </a>
                    <a href="{{ route('login') }}"
                        class="inline-flex items-center justify-center gap-2 px-7 py-3 text-[13px] font-medium text-white/85 hover:text-white whitespace-nowrap transition-colors cursor-pointer">
                        Bereits Konto? Anmelden →
                    </a>
                </div>
            </div>
        </section>
    </main>

    <x-web.hub.site-footer />
@endsection