{{--
    The public front page.

    Rebuilt, not recoloured — the first attempt kept the old page's skeleton
    (eight numbered sections, a split hero, a comparison matrix) and only
    changed the palette, which is why it still read as the old site.

    What the page does now, in order: show the product, say what is in it, say
    how it arrives, show the evidence, answer the obvious objection, quote the
    price, take the questions, and ask for the call.
--}}
<x-layouts.site
    title="CluPilot Cloud — Ihre firmeneigene Cloud, betrieben und belegbar"
    description="Eigene isolierte Cloud-Instanz für Kanzleien, Praxen und KMU. Serverstandort EU, tägliche verschlüsselte Sicherung mit monatlichem Wiederherstellungstest, AV-Vertrag inklusive, Betreuung auf Deutsch."
>

{{-- ════ Hero ═══════════════════════════════════════════════════════════
     Centred and quiet, with the product directly underneath. The old hero
     described the product beside a table of facts; a visitor had to read two
     columns before seeing anything. --}}
<section class="relative overflow-hidden">
    {{-- One warm bloom behind the headline, drawn as a blurred shape rather
         than a radial-gradient so the colour comes from the token instead of a
         literal rgba() nobody would think to update. --}}
    <div class="pointer-events-none absolute -top-56 left-1/2 size-[720px] -translate-x-1/2 rounded-pill bg-accent opacity-[0.09] blur-3xl" aria-hidden="true"></div>

    <div class="relative mx-auto max-w-[1120px] px-5 pt-36 text-center sm:px-6 lg:pt-44">
        <a href="#sicherheit" class="lbl inline-flex items-center gap-2 rounded-pill border border-line bg-surface px-3.5 py-2 shadow-xs transition-colors hover:border-accent-border">
            <span class="relative flex size-1.5">
                <span class="absolute inline-flex size-full animate-ping rounded-pill bg-success-bright opacity-60"></span>
                <span class="relative inline-flex size-1.5 rounded-pill bg-success-bright"></span>
            </span>
            Serverstandort EU · täglich gesichert · monatlich getestet
        </a>

        <h1 class="mx-auto mt-8 max-w-[15ch] text-[clamp(2.6rem,6.2vw,4.6rem)] font-bold leading-[1.02] tracking-[-0.04em] text-ink">
            Ihre firmeneigene Cloud.
        </h1>
        <p class="mx-auto mt-6 max-w-[54ch] text-lg leading-relaxed text-muted">
            Eine eigene, isolierte Instanz — eingerichtet, täglich gesichert und laufend überwacht.
            Was wir tun, können Sie nachweisen: mit Protokoll, Prüfbericht und AV-Vertrag.
        </p>

        <div class="mt-9 flex flex-wrap justify-center gap-3">
            <x-ui.button href="#preise" variant="ink" size="lg">Preise ansehen</x-ui.button>
            <x-ui.button href="#kontakt" variant="secondary" size="lg">Erstgespräch vereinbaren</x-ui.button>
        </div>
        <p class="mt-4 text-sm text-muted">Fixer Preis pro Firma · keine Abrechnung pro Kopf</p>
    </div>

    {{-- The product itself, cropped by the section below it. Built from the
         same tokens as the real console, because it is a picture of the real
         console — a mock in a different design language would be a promise the
         first sign-in breaks. --}}
    <div class="relative mx-auto mt-16 max-w-[1120px] px-5 sm:px-6">
        <div class="overflow-hidden rounded-xl border border-line bg-surface shadow-md">
            <div class="flex items-center gap-2 border-b border-line bg-surface-2 px-4 py-3">
                <span class="size-2.5 rounded-pill bg-line-strong"></span>
                <span class="size-2.5 rounded-pill bg-line-strong"></span>
                <span class="size-2.5 rounded-pill bg-line-strong"></span>
                <span class="mx-auto flex items-center gap-1.5 rounded-pill border border-line bg-surface px-3 py-1 font-mono text-xs text-muted">
                    <x-ui.icon name="lock" class="size-3" />cloud.kanzlei-berger.at
                </span>
            </div>

            <div class="flex">
                <aside class="hidden w-52 shrink-0 bg-plate p-3 sm:block">
                    <div class="flex items-center gap-2 px-2 py-2">
                        <span class="grid size-6 place-items-center rounded-sm bg-accent text-[11px] font-bold text-white">B</span>
                        <span class="text-sm font-semibold text-white">Kanzlei Berger</span>
                    </div>
                    <div class="mt-4 space-y-0.5">
                        @foreach ([['gauge', 'Übersicht', true], ['cloud', 'Dateien', false], ['users', 'Benutzer', false], ['shield-check', 'Sicherungen', false], ['receipt', 'Rechnungen', false]] as [$icon, $label, $active])
                            <span @class([
                                'flex items-center gap-2.5 rounded px-2.5 py-2 text-sm',
                                'bg-plate-2 text-white' => $active,
                                'text-plate-muted' => ! $active,
                            ])>
                                <x-ui.icon name="{{ $icon }}" class="size-4" />{{ $label }}
                            </span>
                        @endforeach
                    </div>
                </aside>

                <div class="min-w-0 flex-1 p-5 sm:p-7">
                    <div class="flex flex-wrap items-center gap-3">
                        <h2 class="text-lg font-bold tracking-[-0.02em] text-ink">Übersicht</h2>
                        <span class="inline-flex items-center gap-1.5 rounded-pill border border-success-border bg-success-bg px-2.5 py-1 text-xs font-medium text-success">
                            <span class="size-1.5 rounded-pill bg-success-bright"></span>Alle Dienste aktiv
                        </span>
                        <span class="ml-auto font-mono text-xs text-muted">EU</span>
                    </div>

                    <div class="mt-5 grid gap-3 sm:grid-cols-3">
                        @foreach ([
                            ['Speicher', '235', 'von 500 GB', 47],
                            ['Benutzer', '8', 'von 25 Plätzen', 32],
                            ['Verfügbarkeit', '99,98', '% letzte 30 Tage', 100],
                        ] as [$label, $value, $sub, $fill])
                            <div class="rounded-lg border border-line bg-surface-2 p-4">
                                <p class="lbl">{{ $label }}</p>
                                <p class="mt-2 text-xl font-bold tabular-nums tracking-[-0.03em] text-ink">{{ $value }}</p>
                                <p class="text-xs text-muted">{{ $sub }}</p>
                                <div class="mt-3 h-1 overflow-hidden rounded-pill bg-surface-hover">
                                    <span class="block h-full rounded-pill bg-accent" style="width: {{ $fill }}%"></span>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="mt-4 rounded-lg border border-line">
                        <p class="lbl border-b border-line px-4 py-3">Heute erledigt</p>
                        @foreach ([
                            ['Sicherung verschlüsselt & geprüft', '03:12'],
                            ['Sicherheitsupdates eingespielt', '04:05'],
                            ['8 Benutzer synchronisiert', '07:30'],
                        ] as [$done, $when])
                            <div class="flex items-center gap-2.5 border-b border-line px-4 py-2.5 text-sm last:border-0">
                                <x-ui.icon name="check" class="size-4 shrink-0 text-success" />
                                <span class="truncate text-body">{{ $done }}</span>
                                <time class="ml-auto font-mono text-xs tabular-nums text-muted">{{ $when }}</time>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ════ The quiet number line ══════════════════════════════════════════ --}}
<section class="mx-auto mt-16 max-w-[1120px] px-5 sm:px-6 lg:mt-24">
    <div class="flex flex-wrap items-center justify-between gap-x-10 gap-y-6 border-y border-line py-7">
        @foreach ([
            ['99,95', '99.95', 2, '% Verfügbarkeit'],
            ['365', '365', 0, 'Sicherungen pro Jahr'],
            ['12', '12', 0, 'Wiederherstellungstests'],
            ['20', '20', 0, 'Minuten bis zum Betrieb'],
            ['0', '0', 0, 'Datenverluste'],
        ] as [$shown, $target, $decimals, $label])
            <div class="flex items-baseline gap-2.5">
                <b class="text-lg font-bold tabular-nums tracking-[-0.02em] text-ink" data-count="{{ $target }}" data-decimals="{{ $decimals }}">{{ $shown }}</b>
                <span class="text-sm text-muted">{{ $label }}</span>
            </div>
        @endforeach
    </div>
</section>

{{-- ════ What is in it — one asymmetric grid ════════════════════════════
     Six equal cards in two rows was the old page's answer to every section.
     Tiles of different weight let the important thing be bigger than the rest,
     which is the whole point of having a layout. --}}
<section id="produkt" class="mx-auto max-w-[1120px] px-5 py-24 sm:px-6 lg:py-32">
    <div class="rv max-w-[46ch]">
        <p class="lbl !text-accent-text">Was enthalten ist</p>
        <h2 class="mt-3 text-[clamp(2rem,4vw,3.1rem)] font-bold leading-[1.06] tracking-[-0.035em] text-ink">
            Für Ihr Team ist es firmeneigene Software. Wir betreiben sie nur.
        </h2>
    </div>

    <div class="mt-12 grid gap-4 lg:grid-cols-3">
        <div class="rv flex flex-col justify-between rounded-xl border border-line bg-surface p-7 shadow-xs lg:col-span-2 lg:row-span-2 lg:p-9">
            <div>
                <x-ui.icon name="globe" class="size-6 text-accent-text" />
                <h3 class="mt-5 max-w-[18ch] text-xl font-bold tracking-[-0.025em] text-ink">Ihre Adresse, Ihr Logo, Ihre Ordnerstruktur.</h3>
                <p class="mt-3 max-w-[52ch] text-sm leading-relaxed text-muted">
                    Eigene Domain, eigenes Erscheinungsbild, und eine Ablage, die nach Branchenvorlage
                    schon steht, bevor die erste Datei hochgeladen wird.
                </p>
            </div>
            <div class="mt-8 grid gap-2 sm:grid-cols-2">
                @foreach ([
                    ['cloud', 'Dateien &amp; Synchronisation'],
                    ['file-text', 'Office im Browser'],
                    ['calendar', 'Kalender, Kontakte, Aufgaben'],
                    ['users', 'Videokonferenz &amp; Chat'],
                    ['external-link', 'Freigabelinks mit Ablauf'],
                    ['rotate-ccw', 'Versionierung &amp; Papierkorb'],
                ] as [$icon, $feature])
                    <div class="flex items-center gap-2.5 rounded-lg bg-surface-2 px-3.5 py-3 text-sm text-body">
                        <x-ui.icon name="{{ $icon }}" class="size-4 shrink-0 text-muted" />{!! $feature !!}
                    </div>
                @endforeach
            </div>
        </div>

        <div class="rv d1 rounded-xl border border-line bg-plate p-7 text-plate-text shadow-xs">
            <x-ui.icon name="shield-check" class="size-6 text-accent" />
            <h3 class="mt-5 text-lg font-bold tracking-[-0.02em] text-white">Getrennt von allen anderen.</h3>
            <p class="mt-3 text-sm leading-relaxed text-plate-muted">
                Eine eigene virtuelle Maschine je Kunde. Keine geteilte Datenbank, kein gemeinsamer Speicher.
            </p>
            <dl class="mt-6 space-y-2.5 border-t border-plate-rule pt-5 font-mono text-xs">
                @foreach (['Instanz' => 'dediziert', 'Standort' => 'EU', 'Transfer' => 'kein Drittland'] as $k => $v)
                    <div class="flex justify-between"><dt class="text-plate-muted">{{ $k }}</dt><dd class="text-white">{{ $v }}</dd></div>
                @endforeach
            </dl>
        </div>

        <div class="rv d2 rounded-xl border border-accent-border bg-accent-subtle p-7 shadow-xs">
            <x-ui.icon name="tag" class="size-6 text-accent-text" />
            <h3 class="mt-5 text-lg font-bold tracking-[-0.02em] text-ink">Ein Preis. Für die Firma.</h3>
            <p class="mt-3 text-sm leading-relaxed text-body">
                Kein Aufpreis für die vierzehnte Kollegin. Wächst das Team, bleibt die Rechnung gleich.
            </p>
        </div>

        <div class="rv rounded-xl border border-line bg-surface p-7 shadow-xs lg:col-span-2">
            <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                <x-ui.icon name="plus" class="size-5 text-accent-text" />
                <h3 class="text-lg font-bold tracking-[-0.02em] text-ink">Zubuchbare Module</h3>
                <span class="text-sm text-muted">jederzeit, ohne Umzug</span>
            </div>
            <div class="mt-5 grid gap-3 sm:grid-cols-3">
                @foreach ([
                    ['Vaultwarden', 'Team-Passwörter', true],
                    ['Paperless-ngx', 'Dokumentenarchiv', true],
                    ['Digitale Signatur', 'in Vorbereitung', false],
                ] as [$module, $what, $ready])
                    <div class="rounded-lg border border-line bg-surface-2 px-4 py-3.5">
                        <b class="block text-sm font-semibold text-ink">{{ $module }}</b>
                        <span class="text-xs {{ $ready ? 'text-muted' : 'text-warning' }}">{{ $what }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="rv d1 flex flex-col rounded-xl border border-line bg-surface p-7 shadow-xs">
            <x-ui.icon name="life-buoy" class="size-6 text-accent-text" />
            <h3 class="mt-5 text-lg font-bold tracking-[-0.02em] text-ink">Jemand, den Sie anrufen.</h3>
            <p class="mt-3 flex-1 text-sm leading-relaxed text-muted">
                Auf Deutsch, mit Antwort am selben Werktag. Kein Callcenter, keine Warteschleife.
            </p>
        </div>
    </div>

    {{-- The industries, dense. Six cards saying almost the same thing was
         repetition; what a visitor actually looks for is their own trade. --}}
    <div class="rv mt-4 overflow-hidden rounded-xl border border-line bg-surface shadow-xs">
        <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1 border-b border-line px-7 py-5">
            <h3 class="text-lg font-bold tracking-[-0.02em] text-ink">Ordnerstruktur nach Branchenvorlage</h3>
            <span class="text-sm text-muted">ab dem ersten Tag, änderbar</span>
        </div>
        <div class="grid sm:grid-cols-2">
            @foreach ([
                ['Steuerberatung', 'Mandanten / Jahresabschluss / Belege'],
                ['Rechtsanwälte', 'Akten / Schriftsätze / Fristen'],
                ['Ärzte &amp; Therapeuten', 'Verwaltung / Befunde / Abrechnung'],
                ['Architektur &amp; Planung', 'Projekte / Pläne / Freigaben'],
                ['Handwerk &amp; Bau', 'Baustellen / Aufmaß / Abnahme'],
                ['Immobilienverwaltung', 'Objekte / Verträge / Abrechnung'],
            ] as $i => [$trade, $template])
                <div class="flex flex-wrap items-baseline gap-x-4 gap-y-1 border-b border-line px-7 py-4 sm:odd:border-r">
                    <b class="text-sm font-semibold text-ink">{!! $trade !!}</b>
                    <span class="font-mono text-xs text-muted">{{ $template }}</span>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ════ The dark hinge — how it arrives ════════════════════════════════ --}}
<section id="ablauf" class="bg-plate py-24 text-plate-text lg:py-32">
    <div class="mx-auto max-w-[1120px] px-5 sm:px-6">
        <div class="rv max-w-[46ch]">
            <p class="lbl !text-accent">In 20 Minuten betriebsbereit</p>
            <h2 class="mt-3 text-[clamp(2rem,4vw,3.1rem)] font-bold leading-[1.06] tracking-[-0.035em] text-white">
                Nur der erste Schritt ist Ihrer.
            </h2>
        </div>

        <div class="mt-14 grid gap-12 lg:grid-cols-[.85fr_1.15fr] lg:gap-16">
            <ol class="rv space-y-8">
                @foreach ([
                    ['Sie', 'Paket wählen', 'Zwei Minuten online. Die Instanz wird unmittelbar danach automatisch erstellt.'],
                    ['Wir', 'Einrichtung', 'Benutzer und Rechte, Ordnerstruktur, Ihr Logo, Ihre Domain. Auf Wunsch übernehmen wir Bestandsdaten aus Dropbox, OneDrive oder vom alten Server — mit schriftlichem Übernahmeprotokoll.'],
                    ['Gemeinsam', 'Einschulung', '45 Minuten für Ihr Team per Videokonferenz, Kurzanleitung als PDF mit Ihren eigenen Screenshots.'],
                ] as $i => [$who, $what, $body])
                    <li class="relative pl-14">
                        <span class="absolute left-0 top-0 grid size-10 place-items-center rounded-pill border border-plate-rule bg-plate-2 font-mono text-sm font-medium text-accent">{{ $i + 1 }}</span>
                        @if ($i < 2)
                            <span class="absolute bottom-[-2rem] left-5 top-12 w-px bg-plate-rule"></span>
                        @endif
                        <span class="lbl !text-plate-muted">{{ $who }}</span>
                        <h3 class="mt-1 text-lg font-bold tracking-[-0.02em] text-white">{{ $what }}</h3>
                        <p class="mt-2 max-w-[46ch] text-sm leading-relaxed text-plate-muted">{{ $body }}</p>
                    </li>
                @endforeach
            </ol>

            {{-- self-start: a grid cell stretches by default, and the empty
                 dark space under the last line reads as a panel that failed to
                 load rather than as breathing room. --}}
            <div id="deploy-log" class="self-start overflow-hidden rounded-xl border border-plate-rule bg-plate-2">
                <div class="flex items-center justify-between border-b border-plate-rule px-5 py-3.5">
                    <span class="lbl !text-plate-muted">Bereitstellungsprotokoll</span>
                    <span class="rounded-sm bg-plate px-2 py-0.5 font-mono text-xs text-plate-muted">Beispiel</span>
                </div>
                @foreach ([
                    ['0:40', 'Instanz erstellt und gestartet'],
                    ['1:10', 'Verschlüsselung und Firewall aktiv'],
                    ['2:30', 'Domain verbunden, Zertifikat ausgestellt'],
                    ['4:15', 'Erste Sicherung angelegt und geprüft'],
                    ['5:00', 'Logo und Farben hinterlegt'],
                ] as [$at, $what])
                    <div class="logline flex items-center gap-4 border-b border-plate-rule px-5 py-3.5 font-mono text-sm">
                        <time class="w-10 shrink-0 tabular-nums text-plate-muted">{{ $at }}</time>
                        <span class="min-w-0 flex-1 truncate text-plate-text">{{ $what }}</span>
                        <span class="shrink-0 text-xs font-medium text-success-bright">OK</span>
                    </div>
                @endforeach
                <p class="flex items-center gap-2.5 px-5 py-4 text-sm font-medium text-white">
                    <x-ui.icon name="check" class="size-4 text-success-bright" />
                    Instanz betriebsbereit in unter 20 Minuten.
                </p>
            </div>
        </div>
    </div>
</section>

{{-- ════ Evidence ═══════════════════════════════════════════════════════
     A three-column table was the old page's version of this. What a visitor
     needs from it is the pairing — measure, rhythm, and the piece of paper
     they can hand to somebody — so the pairing is what the row shows. --}}
<section id="sicherheit" class="mx-auto max-w-[1120px] px-5 py-24 sm:px-6 lg:py-32">
    <div class="rv max-w-[46ch]">
        <p class="lbl !text-accent-text">Sicherheit &amp; Nachweis</p>
        <h2 class="mt-3 text-[clamp(2rem,4vw,3.1rem)] font-bold leading-[1.06] tracking-[-0.035em] text-ink">
            Jede Maßnahme hat einen Nachweis.
        </h2>
        <p class="mt-5 text-md leading-relaxed text-muted">
            Sie bekommen sie schriftlich — für Ihre eigene Dokumentation, Ihre Prüfung, Ihre Versicherung.
        </p>
    </div>

    <div class="rv mt-12 overflow-hidden rounded-xl border border-line bg-surface shadow-xs">
        @foreach ([
            ['shield', 'Eigene isolierte Instanz', 'Eine virtuelle Maschine je Kunde, strikt getrennt von allen anderen.', 'dauerhaft', 'Instanzkennung im Kundenbereich'],
            ['database', 'Verschlüsselte Sicherung', 'Clientseitig verschlüsselt, getrennt vom Produktivsystem gelagert.', 'täglich', 'Sicherungsprotokoll mit Zeitstempel'],
            ['rotate-ccw', 'Wiederherstellungstest', 'Eine Sicherung wird tatsächlich zurückgespielt — nicht nur geprüft.', 'monatlich', 'Testbericht mit Ergebnis'],
            ['refresh', 'Sicherheitsupdates', 'Betriebssystem und Anwendung, eingespielt außerhalb Ihrer Arbeitszeit.', 'laufend', 'Wartungsprotokoll'],
            ['activity', 'Überwachung', 'Erreichbarkeit, Speicher und Dienste — Alarm, bevor Sie es merken.', 'rund um die Uhr', 'Verfügbarkeitsbericht'],
            ['globe', 'Serverstandort EU', 'Kein Transfer in Drittländer, keine Abhängigkeit von US-Anbietern.', 'vertraglich', 'AV-Vertrag &amp; TOM-Dokumentation'],
        ] as [$icon, $measure, $detail, $rhythm, $proof])
            <div class="grid items-start gap-x-6 gap-y-3 border-b border-line p-6 last:border-0 hover:bg-surface-2 lg:grid-cols-[1.6fr_.5fr_1fr] lg:p-7">
                <div class="flex gap-4">
                    <x-ui.icon name="{{ $icon }}" class="mt-0.5 size-5 shrink-0 text-accent-text" />
                    <div>
                        <b class="block font-semibold text-ink">{{ $measure }}</b>
                        <span class="mt-1 block max-w-[46ch] text-sm leading-relaxed text-muted">{{ $detail }}</span>
                    </div>
                </div>
                <div class="pl-9 lg:pl-0">
                    <span class="inline-block rounded-pill bg-surface-2 px-3 py-1 font-mono text-xs text-body">{{ $rhythm }}</span>
                </div>
                <div class="flex items-center gap-2 pl-9 text-sm text-body lg:pl-0">
                    <x-ui.icon name="file-text" class="size-4 shrink-0 text-muted" />{!! $proof !!}
                </div>
            </div>
        @endforeach
    </div>
</section>

{{-- ════ The objection ══════════════════════════════════════════════════ --}}
<section class="border-y border-line bg-surface-2 py-24 lg:py-32">
    <div class="mx-auto max-w-[1120px] px-5 sm:px-6">
        <div class="rv max-w-[46ch]">
            <p class="lbl !text-accent-text">Der ehrliche Vergleich</p>
            <h2 class="mt-3 text-[clamp(2rem,4vw,3.1rem)] font-bold leading-[1.06] tracking-[-0.035em] text-ink">
                Warum nicht einfach …?
            </h2>
            <p class="mt-5 text-md leading-relaxed text-muted">
                Berechtigte Frage — samt der Punkte, die gegen uns sprechen.
            </p>
        </div>

        <div class="mt-12 grid items-start gap-4 lg:grid-cols-3">
            @foreach ([
                ['Bei der US-Cloud bleiben', 'Dropbox, OneDrive & Co.', false, [
                    [true, 'Bequem und sofort verfügbar'],
                    [false, 'Daten bei US-Konzernen — Drittlandtransfer als Dauerthema Ihrer Dokumentation'],
                    [false, 'Preis pro Kopf: Jeder neue Mitarbeiter erhöht die Rechnung'],
                    [false, 'Support über ein Ticketsystem in Übersee'],
                ]],
                ['Einen eigenen Server', 'Selbst betreiben', false, [
                    [true, 'Volle Kontrolle über alles'],
                    [false, 'Updates, Sicherung und Ausfälle sind Ihr Problem — auch am Wochenende'],
                    [false, 'Braucht dauerhaft echtes IT-Wissen im Haus'],
                    [false, 'Ein vergessenes Update kann sehr teuer werden'],
                ]],
                ['CluPilot Cloud', 'Ihre Cloud, von uns betrieben', true, [
                    [true, 'Eigene isolierte Instanz, Standort EU, AV-Vertrag inklusive'],
                    [true, 'Fixer Firmenpreis, unabhängig von der Kopfzahl'],
                    [true, 'Betrieb, Sicherung und Überwachung nachweislich durch uns'],
                    [false, 'Einrichtung kostet einmalig — wir richten wirklich ein, statt nur freizuschalten'],
                ]],
            ] as $i => [$option, $subtitle, $ours, $points])
                <div @class([
                    'rv rounded-xl border p-7',
                    'd'.$i,
                    'border-ink bg-surface shadow-md lg:-mt-4 lg:pb-9 lg:pt-9' => $ours,
                    'border-line bg-surface/60' => ! $ours,
                ])>
                    <div class="flex items-center gap-2.5">
                        <h3 class="text-md font-bold tracking-[-0.02em] text-ink">{{ $option }}</h3>
                        @if ($ours)
                            <span class="rounded-pill bg-accent-active px-2 py-0.5 font-mono text-[10px] font-medium uppercase tracking-[0.07em] text-on-accent">Wir</span>
                        @endif
                    </div>
                    <span class="lbl mt-1 block">{{ $subtitle }}</span>
                    <ul class="mt-6 space-y-3.5">
                        @foreach ($points as [$good, $point])
                            <li class="flex gap-2.5 text-sm leading-relaxed {{ $ours ? 'text-body' : 'text-muted' }}">
                                <x-ui.icon name="{{ $good ? 'check' : 'x' }}" class="mt-0.5 size-4 shrink-0 {{ $good ? 'text-success' : 'text-danger' }}" />
                                {{ $point }}
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ════ Price ══════════════════════════════════════════════════════════
     Cards, with the matrix folded away underneath. The matrix was the first
     thing a visitor met on the old page: twelve rows of ticks before a single
     price was legible. --}}
<section id="preise" class="mx-auto max-w-[1120px] px-5 py-24 sm:px-6 lg:py-32">
    <div class="rv mx-auto max-w-[46ch] text-center">
        <p class="lbl !text-accent-text">Preise</p>
        <h2 class="mt-3 text-[clamp(2rem,4vw,3.1rem)] font-bold leading-[1.06] tracking-[-0.035em] text-ink">
            Ein fixer Preis pro Firma.
        </h2>
        <p class="mt-5 text-md leading-relaxed text-muted">
            Netto pro Monat. Keine Staffelung nach Benutzern, keine Nachverrechnung bei Zuwachs.
        </p>
    </div>

    @if (empty($plans))
        {{-- The catalogue could not be read. Showing a number we might not
             honour would be worse than showing none. --}}
        <div class="rv mx-auto mt-12 max-w-[640px] rounded-xl border border-line bg-surface p-10 text-center shadow-xs">
            <h3 class="text-lg font-bold text-ink">Preise derzeit auf Anfrage</h3>
            <p class="mx-auto mt-3 max-w-[52ch] text-sm leading-relaxed text-muted">
                Die Paketübersicht steht gerade nicht zur Verfügung. Wir nennen Ihnen die aktuellen Konditionen gerne direkt.
            </p>
            <x-ui.button href="#kontakt" variant="ink" size="lg" class="mt-7">Preise anfragen</x-ui.button>
        </div>
    @else
        @php
            // Written out rather than interpolated: Tailwind builds its
            // stylesheet by reading these files as text, so a class name
            // assembled at render time is a class name that was never compiled.
            $planColumns = ['lg:grid-cols-1', 'lg:grid-cols-2', 'lg:grid-cols-3', 'lg:grid-cols-4'][min(count($plans), 4) - 1];
        @endphp
        {{-- Stretched, not items-start: the cards carry different numbers of
             features, and four "anfragen" buttons at four different heights is
             the first thing the eye picks up on a price sheet. --}}
        <div class="mt-14 grid gap-4 sm:grid-cols-2 {{ $planColumns }}">
            @foreach ($plans as $i => $plan)
                <div @class([
                    'rv flex flex-col rounded-xl border p-7',
                    'd'.($i % 3),
                    'border-ink bg-surface shadow-md lg:-mt-5 lg:pb-9 lg:pt-9' => $plan['recommended'],
                    'border-line bg-surface shadow-xs' => ! $plan['recommended'],
                ])>
                    <div class="flex items-center gap-2">
                        <h3 class="text-md font-bold tracking-[-0.02em] text-ink">{{ $plan['name'] }}</h3>
                        @if ($plan['recommended'])
                            <span class="rounded-pill bg-accent-active px-2 py-0.5 font-mono text-[10px] font-medium uppercase tracking-[0.07em] text-on-accent">Empfohlen</span>
                        @endif
                    </div>
                    {{-- A plan can exist before its copy is written — the empty
                         string renders nothing rather than an empty paragraph
                         with margin above it and nothing in it. --}}
                    @if ($plan['audience'])
                        <p class="mt-1 text-sm text-muted">{{ $plan['audience'] }}</p>
                    @endif

                    <p class="mt-6 flex items-baseline gap-1.5">
                        <span class="text-[2.4rem] font-bold leading-none tabular-nums tracking-[-0.04em] text-ink">{{ $plan['price'] }}</span>
                        <span class="text-sm text-muted">/Monat</span>
                    </p>
                    <p class="mt-1.5 text-xs text-muted">zzgl. einmaliger Einrichtung</p>

                    <dl class="mt-6 space-y-2 border-y border-line py-5 text-sm">
                        @foreach ([
                            'Speicher' => $plan['storage'],
                            'Datenvolumen' => $plan['traffic'],
                            'Benutzer' => 'bis '.$plan['seats'],
                        ] as $term => $value)
                            <div class="flex justify-between gap-4">
                                <dt class="text-muted">{{ $term }}</dt>
                                <dd class="font-mono tabular-nums text-ink">{{ $value }}</dd>
                            </div>
                        @endforeach
                    </dl>

                    {{-- Six, then a pointer to the table. A card listing eleven
                         features is a table with worse alignment. --}}
                    <ul class="mt-5 flex-1 space-y-2.5 text-sm">
                        @foreach (array_slice($plan['features'], 0, 6) as $feature)
                            <li class="flex gap-2.5 text-body">
                                <x-ui.icon name="check" class="mt-0.5 size-4 shrink-0 text-success" />{{ $feature }}
                            </li>
                        @endforeach
                        @if (count($plan['features']) > 6)
                            <li class="pl-[26px] text-muted">und {{ count($plan['features']) - 6 }} weitere Merkmale</li>
                        @endif
                    </ul>

                    <x-ui.button href="#kontakt" :variant="$plan['recommended'] ? 'ink' : 'secondary'" class="mt-7 w-full">
                        {{ $plan['name'] }} anfragen
                    </x-ui.button>
                </div>
            @endforeach
        </div>

        <details class="faq rv group mt-6 overflow-hidden rounded-xl border border-line bg-surface shadow-xs">
            <summary class="flex min-h-14 items-center gap-4 px-6 py-4 text-sm font-medium text-ink transition-colors hover:bg-surface-hover">
                Alle Merkmale im direkten Vergleich
                <x-ui.icon name="chevron-down" class="ml-auto size-4 shrink-0 text-muted transition-transform duration-200 group-open:rotate-180" />
            </summary>
            <div class="overflow-x-auto border-t border-line">
                <table class="w-full min-w-[680px] border-collapse text-left text-sm">
                    <caption class="sr-only">Pakete und Merkmale im Vergleich</caption>
                    <thead>
                        <tr class="border-b border-line">
                            <th scope="col" class="px-6 py-4"><span class="sr-only">Merkmal</span></th>
                            @foreach ($plans as $plan)
                                <th scope="col" class="px-6 py-4 font-semibold text-ink">{{ $plan['name'] }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($featureRows as $feature)
                            <tr class="border-b border-line last:border-0">
                                <th scope="row" class="px-6 py-3 font-medium text-muted">{{ $feature }}</th>
                                @foreach ($plans as $plan)
                                    <td class="px-6 py-3">
                                        @if (in_array($feature, $plan['features'], true))
                                            <x-ui.icon name="check" class="size-4 text-success" aria-label="enthalten" />
                                        @else
                                            <span class="text-faint" aria-label="nicht enthalten">—</span>
                                        @endif
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </details>

        <p class="rv mt-8 text-center text-sm leading-relaxed text-muted">
            <b class="font-semibold text-ink">In jedem Paket:</b> tägliche verschlüsselte Sicherung mit monatlichem Wiederherstellungstest ·
            Updates, Wartung und Überwachung · AV-Vertrag und TOM-Dokumentation · Support auf Deutsch am selben Werktag.
        </p>
    @endif
</section>

{{-- ════ Questions ══════════════════════════════════════════════════════ --}}
<section id="fragen" class="border-t border-line bg-surface-2 py-24 lg:py-32">
    <div class="mx-auto grid max-w-[1120px] gap-12 px-5 sm:px-6 lg:grid-cols-[.75fr_1.25fr] lg:gap-20">
        <div class="rv lg:sticky lg:top-28 lg:self-start">
            <p class="lbl !text-accent-text">Häufige Fragen</p>
            <h2 class="mt-3 text-[clamp(2rem,4vw,3.1rem)] font-bold leading-[1.06] tracking-[-0.035em] text-ink">
                Klare Antworten.
            </h2>
            <p class="mt-5 max-w-[36ch] text-md leading-relaxed text-muted">
                Steht Ihre Frage nicht dabei, schreiben Sie uns — wir antworten am selben Werktag.
            </p>
            <a href="mailto:office&#64;clupilot.com" class="mt-5 inline-flex items-center gap-2 text-sm font-medium text-accent-text underline-offset-4 hover:underline">
                <x-ui.icon name="mail" class="size-4" />office&#64;clupilot.com
            </a>
        </div>

        <div class="faq rv d1 divide-y divide-line border-y border-line">
            @foreach ([
                ['Was passiert mit unseren Daten, wenn wir kündigen?', 'Sie erhalten vor Vertragsende einen vollständigen Export in offenen Standardformaten. Ihre Cloud basiert auf Open-Source-Software — Sie sind nie eingesperrt. Nach der Übergabe löschen wir Instanz und Sicherungen und bestätigen das schriftlich.'],
                ['Ersetzt das Microsoft 365?', 'Es ersetzt den Dateiteil. Viele Kunden behalten Microsoft für E-Mail und nutzen die Cloud als zentrale, sichere Ablage statt OneDrive oder Dropbox — zum fixen Firmenpreis statt pro Benutzer.'],
                ['Wie lange dauert die Einrichtung?', 'Die Instanz läuft wenige Minuten nach der Bestellung. Die vollständige Einrichtung — Benutzer und Rechte, Ordnerstruktur nach Branchenvorlage, Ihr Logo, Ihre Domain und die Einschulung — ist in drei bis sieben Werktagen abgeschlossen. Die Übernahme Ihrer Bestandsdaten aus Dropbox, OneDrive oder vom alten Server bieten wir gesondert an, inklusive schriftlichem Übernahmeprotokoll.'],
                ['Was, wenn jemand versehentlich Dateien löscht?', 'Papierkorb und Versionierung fangen den Alltag ab. Darüber hinaus gibt es tägliche Sicherungen mit 30 Tagen Aufbewahrung: Ein Anruf genügt, wir stellen den gewünschten Stand wieder her.'],
                ['Brauchen wir eigene IT-Kenntnisse?', 'Nein. Bedienen kann es jeder, der mit Ordnern und Dateien umgeht — dafür gibt es die Einschulung. Alles Technische übernehmen wir dauerhaft.'],
                ['Mit wem spreche ich bei Fragen?', 'Direkt mit uns, per E-Mail oder Telefon, auf Deutsch, mit Antwort am selben Werktag. Kein Callcenter, keine Warteschleife.'],
                ['Wo genau stehen die Server?', 'In Rechenzentren innerhalb der EU. Es findet kein Transfer in Drittländer statt. Den Standort Ihrer Instanz halten wir im AV-Vertrag fest.'],
            ] as [$question, $answer])
                <details class="group">
                    <summary class="flex min-h-16 items-center gap-4 py-4 text-md font-medium text-ink">
                        {{ $question }}
                        <x-ui.icon name="plus" class="ml-auto size-4 shrink-0 text-muted transition-transform duration-200 group-open:rotate-45" />
                    </summary>
                    <p class="max-w-[68ch] pb-5 text-sm leading-relaxed text-muted">{{ $answer }}</p>
                </details>
            @endforeach
        </div>
    </div>
</section>

{{-- ════ Close ══════════════════════════════════════════════════════════
     The one large accent area. Orange appears in few places on this page, and
     this is allowed to be all of it. --}}
<section id="kontakt" class="bg-accent-active">
    <div class="mx-auto max-w-[1120px] px-5 py-24 text-center sm:px-6 lg:py-32">
        {{-- The old headline asked who you call when a folder is missing on a
             Monday morning. It promised the wrong thing: what happens inside a
             customer's own Nextcloud is their own house — the recycle bin and
             the version history are right there, and a provider presenting
             itself as the first call for somebody else's user error is offering
             a service it does not run.

             What is actually sold is the opposite: the part they would have to
             do themselves and would rather not. The comparison section already
             says it in the operator's own words — "Updates, Sicherung und
             Ausfälle sind Ihr Problem, auch am Wochenende" — so the closing
             question asks exactly that. --}}
        <p class="lbl !text-white/70">Erstgespräch</p>
        <h2 class="mx-auto mt-4 max-w-[22ch] text-[clamp(2rem,4.4vw,3.4rem)] font-bold leading-[1.06] tracking-[-0.035em] text-white">
            Wer kümmert sich um Updates, Sicherung und Ausfälle?
        </h2>
        <p class="mx-auto mt-6 max-w-[54ch] text-md leading-relaxed text-white/85">
            Bei uns: wir — nachweislich, mit Protokoll. Ein unverbindliches Gespräch dauert 20 Minuten,
            danach wissen Sie, welches Paket passt und wie Ihre Daten sicher umziehen.
        </p>

        <div class="mt-9 flex flex-wrap justify-center gap-3">
            <a href="mailto:office&#64;clupilot.com" class="inline-flex min-h-[46px] items-center justify-center gap-2 rounded-[10px] bg-white px-[22px] text-[15px] font-semibold leading-none text-accent-active transition hover:bg-accent-subtle">
                <x-ui.icon name="mail" class="size-4" />Erstgespräch anfragen
            </a>
            <a href="#preise" class="inline-flex min-h-[46px] items-center justify-center rounded-[10px] border border-white/40 px-[22px] text-[15px] font-semibold leading-none text-white transition hover:bg-white/10">
                Preise ansehen
            </a>
        </div>

        <dl class="mx-auto mt-14 grid max-w-[760px] grid-cols-2 gap-y-8 border-t border-white/20 pt-10 sm:grid-cols-4">
            @foreach ([
                'Antwortzeit' => 'selber Werktag',
                'Sprache' => 'Deutsch',
                'Sitz' => 'Österreich',
                'Gespräch' => 'unverbindlich',
            ] as $term => $value)
                <div>
                    <dt class="lbl !text-white/60">{{ $term }}</dt>
                    <dd class="mt-1.5 font-semibold text-white">{{ $value }}</dd>
                </div>
            @endforeach
        </dl>
    </div>
</section>

</x-layouts.site>