{{--
    The public price sheet and everything around it.

    Content unchanged from the previous edition; the clothes are new. Section
    headings, the small-caps label, the card, the button hierarchy and every
    colour now come from the shared token file, so this page and the sign-in
    form a visitor lands on next are recognisably the same product.
--}}
<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."
>

@php
    // The section rubric, written once. A number, a name, and the rule that
    // carries the eye across to the next block.
    $sections = [
        'branchen' => ['01', 'Für wen'],
        'produkt' => ['02', 'Das Produkt'],
        'ablauf' => ['03', 'Ablauf'],
        'sicherheit' => ['04', 'Sicherheit & Nachweis'],
        'vergleich' => ['05', 'Der ehrliche Vergleich'],
        'pakete' => ['06', 'Pakete & Preise'],
        'faq' => ['07', 'Häufige Fragen'],
        'kontakt' => ['08', 'Kontakt'],
    ];
@endphp

{{-- ── Hero ──────────────────────────────────────────────────────────── --}}
<section id="top" class="relative overflow-hidden border-b border-line">
    {{-- One soft accent bloom behind the headline. The ground is otherwise
         flat, and a page that is flat everywhere reads as unfinished rather
         than as restrained. --}}
    <div class="pointer-events-none absolute -right-40 -top-40 size-[620px] rounded-pill bg-accent/[0.07] blur-3xl" aria-hidden="true"></div>

    <div class="relative mx-auto grid max-w-[1180px] gap-14 px-5 pb-16 pt-32 sm:px-8 lg:grid-cols-[1.25fr_.75fr] lg:items-start lg:pb-24 lg:pt-40">
        <div>
            <p class="lbl inline-flex items-center gap-2 rounded-pill border border-accent-border bg-accent-subtle px-3 py-1.5 !text-accent-text">
                <span class="size-1.5 rounded-pill bg-accent"></span>
                Betriebene Private Cloud · Österreich
            </p>

            <h1 class="mt-6 text-[clamp(2.2rem,4.4vw,3.4rem)] font-bold leading-[1.05] tracking-[-0.035em] text-ink">
                Ihre firmeneigene Cloud.<br>
                <span class="text-muted">Betrieben, gesichert, belegbar.</span>
            </h1>

            <p class="mt-6 max-w-[58ch] text-lg leading-relaxed text-body">
                Eine eigene, isolierte Instanz für Ihr Unternehmen — 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-8 flex flex-wrap gap-3">
                <x-ui.button href="#pakete" variant="ink" size="lg">Pakete &amp; Preise</x-ui.button>
                <x-ui.button href="#kontakt" variant="secondary" size="lg">Erstgespräch vereinbaren</x-ui.button>
            </div>

            <dl class="mt-10 grid grid-cols-2 gap-x-8 gap-y-4 border-t border-line pt-7 sm:grid-cols-4">
                @foreach ([
                    'Serverstandort' => 'EU',
                    'Bereitstellung' => '< 20 Min.',
                    'Support' => 'Deutsch',
                    'Preis' => 'pro Firma',
                ] as $term => $value)
                    <div>
                        <dt class="lbl">{{ $term }}</dt>
                        <dd class="mt-1 text-md font-semibold text-ink">{{ $value }}</dd>
                    </div>
                @endforeach
            </dl>
        </div>

        {{-- The record sheet. Data, set in mono, in the order an auditor reads
             it — this is the page's one piece of furniture that says "we write
             things down". --}}
        <aside class="overflow-hidden rounded-xl border border-line bg-surface shadow-md" aria-label="Stammblatt">
            <div class="flex items-center justify-between border-b border-line bg-surface-2 px-5 py-3.5">
                <span class="lbl">Stammblatt</span>
                <span class="font-mono text-xs text-ink">Ausgabe {{ date('Y') }}</span>
            </div>
            <dl class="px-5">
                @foreach ([
                    ['Betriebsform', 'Eigene isolierte Instanz', false],
                    ['Serverstandort', 'EU', false],
                    ['Sicherung', 'Täglich, verschlüsselt', true],
                    ['Wiederherstellung', 'Monatlich getestet', true],
                    ['Updates & Wartung', 'Im Betrieb enthalten', true],
                    ['AV-Vertrag & TOMs', 'Inklusive', false],
                    ['Datenexport', 'Jederzeit, offene Formate', false],
                    ['Ansprechpartner', 'Persönlich, auf Deutsch', false],
                ] as [$term, $value, $confirmed])
                    <div class="flex items-baseline justify-between gap-4 border-b border-line py-3 last:border-0">
                        <dt class="text-sm text-muted">{{ $term }}</dt>
                        <dd class="flex items-center gap-1.5 text-right text-sm font-medium {{ $confirmed ? 'text-success' : 'text-ink' }}">
                            @if ($confirmed)<x-ui.icon name="check" class="size-3.5" />@endif
                            {{ $value }}
                        </dd>
                    </div>
                @endforeach
            </dl>
        </aside>
    </div>
</section>

{{-- ── Trust strip ───────────────────────────────────────────────────── --}}
<div class="border-b border-line bg-surface">
    <div class="mx-auto grid max-w-[1180px] grid-cols-2 gap-y-8 px-5 py-9 sm:px-8 lg:grid-cols-4">
        @foreach ([
            ['99,95', '99.95', 2, '% Verfügbarkeit / 12 Mon.'],
            ['365', '365', 0, 'Sicherungen pro Jahr'],
            ['12', '12', 0, 'Wiederherstellungstests'],
            ['20', '20', 0, 'Minuten bis zum Betrieb'],
        ] as [$shown, $target, $decimals, $label])
            <div class="lg:border-l lg:border-line lg:pl-6 lg:first:border-0 lg:first:pl-0">
                {{-- Sans, not mono. Mono gives every glyph a full cell, so the
                     decimal comma in "99,95" sits in a gap as wide as a digit
                     and the figure reads as three numbers. Tabular figures do
                     the one thing that was actually wanted here: keep the width
                     steady while the counter runs. --}}
                <b class="block text-[2rem] font-bold tabular-nums tracking-[-0.03em] text-ink" data-count="{{ $target }}" data-decimals="{{ $decimals }}">{{ $shown }}</b>
                <span class="mt-1 block text-sm text-muted">{{ $label }}</span>
            </div>
        @endforeach
    </div>
</div>

{{-- ── §01 Für wen ───────────────────────────────────────────────────── --}}
<section id="branchen" class="py-20 lg:py-28">
    <div class="mx-auto max-w-[1180px] px-5 sm:px-8">
        <x-site.section-head :number="$sections['branchen'][0]" :label="$sections['branchen'][1]" />

        <h2 class="rv max-w-[20ch] text-[clamp(1.8rem,3.4vw,2.7rem)] font-bold leading-[1.1] tracking-[-0.03em] text-ink">
            Gebaut für Betriebe, die Unterlagen aufbewahren müssen.
        </h2>
        <p class="rv d1 mt-5 max-w-[62ch] text-md leading-relaxed text-body">
            Wir liefern nicht einen leeren Baukasten, sondern eine Ablage, die zu Ihrem Fach passt —
            Ordnerstruktur, Zugriffsrechte und Aufbewahrung nach Branchenvorlage, ab dem ersten Tag.
        </p>

        <div class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ([
                ['Steuerberatung', 'Mandantentrennung mit sauberen Rechten, Jahresordner, Belegeingang.', 'Mandanten / Jahresabschluss / Belege'],
                ['Rechtsanwälte', 'Akten pro Verfahren, strikte Vertraulichkeit, nachvollziehbare Zugriffe.', 'Akten / Schriftsätze / Fristen'],
                ['Ärzte & Therapeuten', 'Getrennte Ablage für Verwaltung und Befunde, klar geregelte Rechte.', 'Verwaltung / Befunde / Abrechnung'],
                ['Architektur & Planung', 'Projektordner mit Plandateien, Versionen und Freigaben an Externe.', 'Projekte / Pläne / Freigaben'],
                ['Handwerk & Bau', 'Baustellen mit Fotos vom Handy, Aufmaß und Abnahmeprotokollen.', 'Baustellen / Aufmaß / Abnahme'],
                ['Immobilien & Verwaltung', 'Objekte und Einheiten, Verträge, Abrechnungen, Freigaben an Eigentümer.', 'Objekte / Verträge / Abrechnung'],
            ] as $i => [$name, $body, $template])
                <div class="rv d{{ $i % 3 }} group flex flex-col rounded-lg border border-line bg-surface p-6 shadow-xs transition-shadow duration-200 hover:shadow-sm">
                    <span class="font-mono text-xs font-medium text-accent-text">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</span>
                    <h3 class="mt-3 text-md font-semibold tracking-[-0.01em] text-ink">{{ $name }}</h3>
                    <p class="mt-2 flex-1 text-sm leading-relaxed text-muted">{{ $body }}</p>
                    <p class="mt-5 rounded-sm bg-surface-2 px-3 py-2 font-mono text-xs text-muted">{{ $template }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ── §02 Das Produkt ───────────────────────────────────────────────── --}}
<section id="produkt" class="border-y border-line bg-surface-2 py-20 lg:py-28">
    <div class="mx-auto max-w-[1180px] px-5 sm:px-8">
        <x-site.section-head :number="$sections['produkt'][0]" :label="$sections['produkt'][1]" />

        <h2 class="rv max-w-[20ch] text-[clamp(1.8rem,3.4vw,2.7rem)] font-bold leading-[1.1] tracking-[-0.03em] text-ink">
            Ihre Adresse, Ihr Logo, Ihre Ordnerstruktur.
        </h2>
        <p class="rv d1 mt-5 max-w-[62ch] text-md leading-relaxed text-body">
            Für Ihr Team sieht es aus wie firmeneigene Software — weil es das ist. Wir betreiben sie nur.
        </p>

        {{-- The product frame. A window chrome around a real-looking panel says
             "this is what you get" faster than a paragraph does. --}}
        <div class="rv d1 mt-12 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="ml-3 rounded-pill border border-line bg-surface px-3 py-1 font-mono text-xs text-muted">cloud.kanzlei-berger.at</span>
            </div>

            <div class="grid gap-px bg-line lg:grid-cols-2">
                <div class="bg-surface p-6 lg:p-8">
                    <p class="lbl">Instanz</p>
                    <div class="mt-4 flex items-center gap-3.5">
                        <span class="grid size-11 place-items-center rounded bg-accent-subtle text-lg font-bold text-accent-text">B</span>
                        <span>
                            <b class="block text-md font-semibold text-ink">Cloud der Kanzlei Berger</b>
                            <small class="text-sm text-muted">EU-Rechenzentrum · alle Dienste aktiv</small>
                        </span>
                    </div>
                    <div class="mt-7 h-1.5 overflow-hidden rounded-pill bg-surface-hover">
                        <span class="block h-full w-[47%] rounded-pill bg-accent"></span>
                    </div>
                    <div class="mt-2.5 flex justify-between text-sm">
                        <span class="text-muted">Speicher</span>
                        <span class="font-mono tabular-nums text-ink">235 / 500 GB</span>
                    </div>
                </div>

                <div class="bg-surface p-6 lg:p-8">
                    <p class="lbl">Heute erledigt</p>
                    <ul class="mt-4 space-y-3">
                        @foreach ([
                            ['Sicherung verschlüsselt & geprüft', '03:12'],
                            ['Sicherheitsupdates eingespielt', '04:05'],
                            ['8 Benutzer synchronisiert', '07:30'],
                            ['Verfügbarkeit 99,98 %', 'laufend'],
                        ] as [$done, $when])
                            <li class="flex items-center gap-2.5 text-sm">
                                <x-ui.icon name="check" class="size-4 shrink-0 text-success" />
                                <span class="text-body">{{ $done }}</span>
                                <time class="ml-auto font-mono text-xs tabular-nums text-muted">{{ $when }}</time>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>

        <div class="rv d2 mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ([
                ['cloud', 'Dateien & Synchronisation auf allen Geräten'],
                ['file-text', 'Office im Browser, gemeinsam bearbeiten'],
                ['calendar', 'Kalender, Kontakte & Aufgaben'],
                ['users', 'Videokonferenz & Chat'],
                ['external-link', 'Freigabelinks mit Ablauf & Passwort'],
                ['rotate-ccw', 'Versionierung & Papierkorb'],
            ] as [$icon, $feature])
                <div class="flex items-center gap-3 rounded-lg border border-line bg-surface px-4 py-3.5 text-sm text-body">
                    <x-ui.icon name="{{ $icon }}" class="size-4 shrink-0 text-accent-text" />
                    {{ $feature }}
                </div>
            @endforeach
        </div>

        <p class="rv d2 mt-6 max-w-[75ch] text-sm leading-relaxed text-muted">
            Zubuchbare Module: <b class="font-semibold text-ink">Vaultwarden</b> — Team-Passwörter ·
            <b class="font-semibold text-ink">Paperless-ngx</b> — digitales Dokumentenarchiv ·
            <b class="font-semibold text-ink">digitale Signatur</b> (in Vorbereitung).
            Preise auf Anfrage oder im Kundenbereich.
        </p>
    </div>
</section>

{{-- ── §03 Ablauf ────────────────────────────────────────────────────── --}}
<section id="ablauf" class="py-20 lg:py-28">
    <div class="mx-auto max-w-[1180px] px-5 sm:px-8">
        <x-site.section-head :number="$sections['ablauf'][0]" :label="$sections['ablauf'][1]" />

        <h2 class="rv max-w-[22ch] text-[clamp(1.8rem,3.4vw,2.7rem)] font-bold leading-[1.1] tracking-[-0.03em] text-ink">
            Von der Bestellung zum Betrieb. Nur der erste Schritt ist Ihrer.
        </h2>

        <div class="mt-12 grid gap-4 lg:grid-cols-3">
            @foreach ([
                ['Schritt 1 — Sie', 'Paket wählen', 'Zwei Minuten online. Ihre Instanz wird unmittelbar danach automatisch erstellt und ist wenige Minuten später erreichbar.'],
                ['Schritt 2 — Wir', 'Einrichtung', 'Benutzer und Rechte, Ordnerstruktur nach Branchenvorlage, Ihr Logo und Ihre Domain. Auf Wunsch übernehmen wir Bestandsdaten aus Dropbox, OneDrive oder vom alten Server — mit schriftlichem Übernahmeprotokoll.'],
                ['Schritt 3 — Gemeinsam', 'Einschulung', '45 Minuten für Ihr Team per Videokonferenz, Kurzanleitung als PDF mit Ihren eigenen Screenshots. Danach läuft es — bei Fragen rufen Sie an.'],
            ] as $i => [$who, $what, $body])
                <div class="rv d{{ $i }} relative rounded-lg border border-line bg-surface p-6 shadow-xs">
                    {{-- The accent rail marks the step as a stage in a sequence
                         without a numbered circle floating beside it. --}}
                    <span class="absolute inset-y-6 left-0 w-0.5 rounded-pill bg-accent/25"></span>
                    <span class="lbl !text-accent-text">{{ $who }}</span>
                    <h3 class="mt-2.5 text-lg font-semibold tracking-[-0.02em] text-ink">{{ $what }}</h3>
                    <p class="mt-2.5 text-sm leading-relaxed text-muted">{{ $body }}</p>
                </div>
            @endforeach
        </div>

        <div id="deploy-log" class="rv d2 mt-8 overflow-hidden rounded-xl border border-line bg-surface shadow-xs">
            <div class="flex items-center justify-between border-b border-line bg-surface-2 px-5 py-3.5">
                <span class="lbl">Bereitstellungsprotokoll</span>
                <span class="rounded-sm bg-surface px-2 py-0.5 font-mono text-xs text-muted">Beispiel</span>
            </div>
            <div class="divide-y divide-line">
                @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 px-5 py-3 text-sm">
                        <time class="w-12 shrink-0 font-mono tabular-nums text-muted">{{ $at }}</time>
                        <span class="text-body">{{ $what }}</span>
                        <span class="ml-auto rounded-pill bg-success-bg px-2 py-0.5 font-mono text-xs font-medium text-success">OK</span>
                    </div>
                @endforeach
            </div>
            <p class="border-t border-line bg-success-bg px-5 py-3.5 text-sm font-medium text-success">
                Abgeschlossen — Instanz betriebsbereit in unter 20 Minuten.
            </p>
        </div>
    </div>
</section>

{{-- ── §04 Sicherheit ────────────────────────────────────────────────── --}}
<section id="sicherheit" class="bg-plate py-20 text-plate-text lg:py-28">
    <div class="mx-auto max-w-[1180px] px-5 sm:px-8">
        <x-site.section-head :number="$sections['sicherheit'][0]" :label="$sections['sicherheit'][1]" dark />

        <h2 class="rv max-w-[18ch] text-[clamp(1.8rem,3.4vw,2.7rem)] font-bold leading-[1.1] tracking-[-0.03em] text-white">
            Sicherheit, die Sie vorlegen können.
        </h2>
        <p class="rv d1 mt-5 max-w-[62ch] text-md leading-relaxed text-plate-text">
            Jede Maßnahme hat einen Rhythmus und einen Nachweis. Beides bekommen Sie schriftlich —
            für Ihre eigene Dokumentation, Ihre Prüfung, Ihre Versicherung.
        </p>

        <div class="rv d1 mt-12 overflow-x-auto rounded-xl border border-plate-rule bg-plate-2">
            <table class="w-full min-w-[680px] text-left text-sm">
                <thead>
                    <tr class="border-b border-plate-rule">
                        <th scope="col" class="lbl !text-plate-muted px-6 py-4 font-normal">Maßnahme</th>
                        <th scope="col" class="lbl !text-plate-muted px-6 py-4 font-normal">Rhythmus</th>
                        <th scope="col" class="lbl !text-plate-muted px-6 py-4 font-normal">Nachweis</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ([
                        ['Eigene isolierte Instanz', 'Eine virtuelle Maschine je Kunde, strikt getrennt von allen anderen.', 'dauerhaft', 'Instanzkennung im Kundenbereich'],
                        ['Verschlüsselte Sicherung', 'Clientseitig verschlüsselt, getrennt vom Produktivsystem gelagert.', 'täglich', 'Sicherungsprotokoll mit Zeitstempel'],
                        ['Wiederherstellungstest', 'Eine Sicherung wird tatsächlich zurückgespielt — nicht nur geprüft.', 'monatlich', 'Testbericht mit Ergebnis'],
                        ['Sicherheitsupdates', 'Betriebssystem und Anwendung, eingespielt außerhalb Ihrer Arbeitszeit.', 'laufend', 'Wartungsprotokoll'],
                        ['Überwachung', 'Erreichbarkeit, Speicher und Dienste — Alarm, bevor Sie es merken.', 'rund um die Uhr', 'Verfügbarkeitsbericht'],
                        ['Serverstandort EU', 'Kein Transfer in Drittländer, keine Abhängigkeit von US-Anbietern.', 'vertraglich', 'AV-Vertrag & TOM-Dokumentation'],
                    ] as [$measure, $detail, $rhythm, $proof])
                        <tr class="border-b border-plate-rule last:border-0">
                            <td class="px-6 py-5 align-top">
                                <b class="block font-semibold text-white">{{ $measure }}</b>
                                <small class="mt-1 block max-w-[42ch] text-sm leading-relaxed text-plate-muted">{{ $detail }}</small>
                            </td>
                            <td class="whitespace-nowrap px-6 py-5 align-top font-mono text-xs text-accent">{{ $rhythm }}</td>
                            <td class="px-6 py-5 align-top text-plate-text">{{ $proof }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="mt-8 grid gap-4 sm:grid-cols-3">
            @foreach ([
                ['99,95', '99.95', 2, '% Verfügbarkeit, letzte 12 Monate'],
                ['30', '30', 0, 'Tage Aufbewahrung der Sicherungen'],
                ['0', '0', 0, 'Datenverluste seit Betriebsaufnahme'],
            ] as $i => [$shown, $target, $decimals, $label])
                <div class="rv d{{ $i }} rounded-lg border border-plate-rule bg-plate-2 p-6">
                    <b class="block text-[2rem] font-bold tabular-nums tracking-[-0.03em] text-white" data-count="{{ $target }}" data-decimals="{{ $decimals }}">{{ $shown }}</b>
                    <small class="mt-1.5 block text-sm text-plate-muted">{{ $label }}</small>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ── §05 Der ehrliche Vergleich ────────────────────────────────────── --}}
<section id="vergleich" class="py-20 lg:py-28">
    <div class="mx-auto max-w-[1180px] px-5 sm:px-8">
        <x-site.section-head :number="$sections['vergleich'][0]" :label="$sections['vergleich'][1]" />

        <h2 class="rv text-[clamp(1.8rem,3.4vw,2.7rem)] font-bold leading-[1.1] tracking-[-0.03em] text-ink">
            Warum nicht einfach …?
        </h2>
        <p class="rv d1 mt-5 max-w-[62ch] text-md leading-relaxed text-body">
            Berechtigte Frage. Hier die Antwort ohne Marketing-Nebel — samt der Punkte, die gegen uns sprechen.
        </p>

        <div class="mt-12 grid 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 => [$question, $subtitle, $ours, $points])
                <div @class([
                    'rv rounded-lg border p-6 lg:p-7',
                    'd'.$i,
                    'border-accent-border bg-accent-subtle shadow-sm' => $ours,
                    'border-line bg-surface shadow-xs' => ! $ours,
                ])>
                    <h3 class="text-lg font-semibold tracking-[-0.02em] text-ink">{{ $question }}</h3>
                    <span class="lbl mt-1.5 block {{ $ours ? '!text-accent-text' : '' }}">{{ $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 text-body">
                                <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>

{{-- ── §06 Pakete & Preise ───────────────────────────────────────────── --}}
<section id="pakete" class="border-y border-line bg-surface-2 py-20 lg:py-28">
    <div class="mx-auto max-w-[1180px] px-5 sm:px-8">
        <x-site.section-head :number="$sections['pakete'][0]" :label="$sections['pakete'][1]" />

        <h2 class="rv max-w-[20ch] text-[clamp(1.8rem,3.4vw,2.7rem)] font-bold leading-[1.1] tracking-[-0.03em] text-ink">
            Ein fixer Preis pro Firma. Nicht pro Kopf.
        </h2>
        <p class="rv d1 mt-5 max-w-[62ch] text-md leading-relaxed text-body">
            Alle Preise netto pro Monat. Keine Staffelung nach Benutzern, keine Nachverrechnung bei Zuwachs.
        </p>

        @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 d1 mt-12 rounded-xl border border-line bg-surface p-10 text-center shadow-xs">
                <h3 class="text-lg font-semibold 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
            <div class="rv d1 mt-12 overflow-hidden rounded-xl border border-line bg-surface shadow-md">
                <div class="overflow-x-auto">
                    <table class="w-full min-w-[720px] border-collapse text-left">
                        <caption class="sr-only">Pakete und Preise im Vergleich</caption>
                        <thead>
                            <tr class="border-b border-line">
                                <th scope="col" class="w-[26%] px-6 py-6"><span class="sr-only">Merkmal</span></th>
                                @foreach ($plans as $plan)
                                    <th scope="col" @class([
                                        'px-6 py-6 align-bottom border-l border-line',
                                        'bg-accent-subtle' => $plan['recommended'],
                                    ])>
                                        @if ($plan['recommended'])
                                            <span class="mb-2 inline-block rounded-pill bg-accent-active px-2.5 py-1 font-mono text-[11px] font-medium uppercase tracking-[0.07em] text-on-accent">Empfohlen</span>
                                        @endif
                                        <span class="block text-lg font-bold tracking-[-0.02em] text-ink">{{ $plan['name'] }}</span>
                                        <span class="mt-1 block text-sm font-normal text-muted">{{ $plan['audience'] }}</span>
                                    </th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody class="text-sm">
                            <tr class="border-b border-line">
                                <th scope="row" class="px-6 py-5 text-sm font-medium text-muted">Preis</th>
                                @foreach ($plans as $plan)
                                    <td @class(['px-6 py-5 border-l border-line', 'bg-accent-subtle' => $plan['recommended']])>
                                        <span class="text-2xl font-bold tabular-nums tracking-[-0.03em] text-ink">{{ $plan['price'] }}</span>
                                        <span class="text-sm font-normal text-muted">/Monat</span>
                                        <span class="mt-1 block text-xs text-muted">zzgl. einmaliger Einrichtung</span>
                                    </td>
                                @endforeach
                            </tr>
                            @foreach ([
                                ['Speicher', fn ($plan) => $plan['storage'], null],
                                ['Datenvolumen', fn ($plan) => $plan['traffic'], '/Monat'],
                                ['Benutzer', fn ($plan) => 'bis '.$plan['seats'], null],
                            ] as [$row, $value, $suffix])
                                <tr class="border-b border-line">
                                    <th scope="row" class="px-6 py-4 text-sm font-medium text-muted">{{ $row }}</th>
                                    @foreach ($plans as $plan)
                                        <td @class(['px-6 py-4 border-l border-line font-mono tabular-nums text-ink', 'bg-accent-subtle' => $plan['recommended']])>{{ $value($plan) }}@if ($suffix)<span class="text-muted">{{ $suffix }}</span>@endif</td>
                                    @endforeach
                                </tr>
                            @endforeach
                            @foreach ($featureRows as $feature)
                                <tr class="border-b border-line">
                                    <th scope="row" class="px-6 py-3.5 text-sm font-medium text-muted">{{ $feature }}</th>
                                    @foreach ($plans as $plan)
                                        @php $has = in_array($feature, $plan['features'], true); @endphp
                                        <td @class(['px-6 py-3.5 border-l border-line', 'bg-accent-subtle' => $plan['recommended']])>
                                            @if ($has)
                                                <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
                            <tr>
                                <th scope="row" class="px-6 py-6"></th>
                                @foreach ($plans as $plan)
                                    <td @class(['px-6 py-6 border-l border-line', 'bg-accent-subtle' => $plan['recommended']])>
                                        <x-ui.button href="#kontakt" :variant="$plan['recommended'] ? 'ink' : 'secondary'" size="sm">{{ $plan['name'] }} anfragen</x-ui.button>
                                    </td>
                                @endforeach
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <p class="mt-3 text-center font-mono text-xs text-muted lg:hidden">→ Tabelle seitlich scrollen</p>

            <p class="rv d2 mt-8 max-w-[80ch] text-sm leading-relaxed text-muted">
                <b class="font-semibold text-ink">In jedem Paket enthalten:</b> tägliche verschlüsselte Sicherung mit monatlichem Wiederherstellungstest ·
                Updates, Wartung und Überwachung · AV-Vertrag und TOM-Dokumentation · persönlicher Support auf Deutsch am selben Werktag.<br>
                Zusatzspeicher und Module sind jederzeit zubuchbar. Die einmalige Einrichtung richtet sich nach Umfang und Datenübernahme.
            </p>
        @endif
    </div>
</section>

{{-- ── §07 Häufige Fragen ────────────────────────────────────────────── --}}
<section id="faq" class="py-20 lg:py-28">
    <div class="mx-auto max-w-[1180px] px-5 sm:px-8">
        <x-site.section-head :number="$sections['faq'][0]" :label="$sections['faq'][1]" />

        <h2 class="rv max-w-[18ch] text-[clamp(1.8rem,3.4vw,2.7rem)] font-bold leading-[1.1] tracking-[-0.03em] text-ink">
            Klare Antworten, bevor Sie fragen müssen.
        </h2>

        <div class="faq rv d1 mt-12 max-w-[860px] overflow-hidden rounded-xl border border-line bg-surface shadow-xs">
            @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, in Österreich und Deutschland. Es findet kein Transfer in Drittländer statt. Den konkreten Standort Ihrer Instanz nennen wir Ihnen vor Vertragsabschluss und halten ihn im AV-Vertrag fest.'],
            ] as [$question, $answer])
                <details class="group border-b border-line last:border-0">
                    <summary class="flex min-h-14 items-center gap-4 px-6 py-4 text-md font-medium text-ink transition-colors hover:bg-surface-hover">
                        {{ $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-[70ch] px-6 pb-5 text-sm leading-relaxed text-muted">{{ $answer }}</p>
                </details>
            @endforeach
        </div>
    </div>
</section>

{{-- ── §08 Kontakt ───────────────────────────────────────────────────── --}}
<section id="kontakt" class="px-5 pb-20 sm:px-8 lg:pb-28">
    {{-- The one large accent area on the page. Orange appears in few places,
         but the closing panel is allowed to be all of it — the reverse, orange
         scattered thinly everywhere, reads as annotation rather than as brand. --}}
    <div class="mx-auto grid max-w-[1180px] gap-10 overflow-hidden rounded-xl bg-accent-active px-7 py-14 text-on-accent shadow-md sm:px-12 lg:grid-cols-[1.2fr_.8fr] lg:items-center lg:px-16 lg:py-20">
        <div>
            <p class="lbl !text-white/70">{{ $sections['kontakt'][0] }} — {{ $sections['kontakt'][1] }}</p>
            <h2 class="mt-4 max-w-[18ch] text-[clamp(1.7rem,3.2vw,2.5rem)] font-bold leading-[1.1] tracking-[-0.03em] text-white">
                Wen rufen Sie an, wenn Montagfrüh ein Ordner fehlt?
            </h2>
            <p class="mt-5 max-w-[54ch] text-md leading-relaxed text-white/85">
                Genau dafür gibt es uns. Ein unverbindliches Erstgespräch dauert 20 Minuten —
                danach wissen Sie, welches Paket passt und wie Ihre Daten sicher umziehen.
            </p>
            <div class="mt-8 flex flex-wrap 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">
                    Erstgespräch anfragen
                </a>
                <a href="#pakete" class="inline-flex min-h-[46px] items-center justify-center gap-2 rounded-[10px] border border-white/40 px-[22px] text-[15px] font-semibold leading-none text-white transition hover:bg-white/10">
                    Pakete vergleichen
                </a>
            </div>
        </div>

        <div class="rounded-lg border border-white/20 bg-white/10 p-6 backdrop-blur-sm">
            <p class="lbl !text-white/70">Erreichbarkeit</p>
            <dl class="mt-4">
                <div class="flex items-baseline justify-between gap-4 border-b border-white/15 py-3">
                    <dt class="text-sm text-white/75">E-Mail</dt>
                    <dd><a href="mailto:office&#64;clupilot.com" class="text-sm font-semibold text-white underline-offset-4 hover:underline">office&#64;clupilot.com</a></dd>
                </div>
                @foreach ([
                    'Antwortzeit' => 'selber Werktag',
                    'Sprache' => 'Deutsch',
                    'Sitz' => 'Österreich',
                    'Erstgespräch' => 'unverbindlich',
                ] as $term => $value)
                    <div class="flex items-baseline justify-between gap-4 border-b border-white/15 py-3 last:border-0">
                        <dt class="text-sm text-white/75">{{ $term }}</dt>
                        <dd class="text-sm font-semibold text-white">{{ $value }}</dd>
                    </div>
                @endforeach
            </dl>
        </div>
    </div>
</section>

</x-layouts.site>