{{--
    Impressum, Datenschutz, AGB.

    Placeholders still — the texts are the company's to write, not mine to
    invent. What changed is that they are now pages OF the website rather than
    a standalone card in a different design: same header, same footer, so
    somebody following the imprint link from the footer does not land on what
    looks like a stranded error page.
--}}
<x-layouts.site :title="$title.' — CluPilot Cloud'" robots="noindex">

<article class="mx-auto max-w-[820px] px-5 pb-20 pt-32 sm:px-8 lg:pb-28 lg:pt-40">
    <p class="lbl">Rechtliches</p>
    <h1 class="mt-4 text-[clamp(2rem,4vw,3rem)] font-bold leading-[1.08] tracking-[-0.035em] text-ink">{{ $title }}</h1>

    <div class="mt-10 rounded-xl border border-line bg-surface p-8 shadow-xs lg:p-10">
        <p class="text-md leading-relaxed text-body">Dieser Inhalt wird noch ergänzt.</p>
        <p class="mt-4 text-md leading-relaxed text-body">
            Bei Fragen erreichen Sie uns unter
            <a href="mailto:office&#64;clupilot.com" class="font-medium text-accent-text underline-offset-4 hover:underline">office&#64;clupilot.com</a>.
        </p>

        <x-ui.button href="{{ route('home') }}" variant="secondary" class="mt-8">
            <x-ui.icon name="arrow-left" class="size-4" />
            Zurück zur Startseite
        </x-ui.button>
    </div>
</article>

</x-layouts.site>