From 696c8834b879833a30df0e3ae0201d49b65dc52a Mon Sep 17 00:00:00 2001
From: nexxo <nexxo@clupilot.local>
Date: Wed, 29 Jul 2026 11:43:25 +0200
Subject: [PATCH] Redesign the public website instead of recolouring it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Correctly rejected: the last pass was the old page in new paint. It kept the
skeleton — eight numbered sections, a split hero, a twelve-row comparison
matrix — and changed only the palette. A palette is not a design.

What is actually different now:

- The § numbering is gone. Numbered sections with a drawn rule are a document
  convention, and the document voice is exactly what the product's design
  system dropped.
- The hero shows the product instead of describing it: centred type, then a
  wide panel built from the real console's own tokens, cropped by the section
  below. The old hero put a table of facts beside the headline, so a visitor
  read two columns before seeing anything.
- Six identical cards, then six more, then six more became one asymmetric
  grid — a large panel, a dark tile, an accent tile, a wide module row — so
  the important thing is allowed to be bigger than the rest.
- The industries are one dense two-column list instead of six cards repeating
  each other's shape.
- The page has one dark hinge in the middle (the deployment) rather than a
  dark section among seven light ones.
- The evidence table became rows that pair the measure with the piece of
  paper you can hand somebody, which is what it is for.
- Prices are cards, with the full matrix folded away underneath. The matrix
  used to be the first thing a visitor met: twelve rows of ticks before a
  single price was legible.
- The FAQ heading sits still while the questions scroll past it.
- The footer is a real footer.

The header is a floating bar rather than a full-width band, and opaque in
both states — translucency plus backdrop-blur reads as a rendering fault over
the dark panels that scroll under it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 VERSION                                       |   2 +-
 resources/css/app.css                         |   7 -
 .../views/components/layouts/site.blade.php   | 173 +--
 .../components/site/section-head.blade.php    |  17 -
 resources/views/landing.blade.php             | 986 +++++++++---------
 tests/Feature/SiteDesignSystemTest.php        |   1 -
 6 files changed, 602 insertions(+), 584 deletions(-)
 delete mode 100644 resources/views/components/site/section-head.blade.php

diff --git a/VERSION b/VERSION
index d0149fe..80e78df 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-1.3.4
+1.3.5
diff --git a/resources/css/app.css b/resources/css/app.css
index 69d613a..520f218 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -100,12 +100,6 @@
 .rv.d1 { transition-delay: 0.07s; }
 .rv.d2 { transition-delay: 0.14s; }
 
-/* The section rule draws across as its heading arrives. Slower than the
-   heading it belongs to, so it reads as a consequence rather than as a second
-   thing happening at the same time. */
-.rv .fill { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) 0.1s; }
-.rv.in .fill { transform: scaleX(1); }
-
 .logline { opacity: 0; transform: translateX(-10px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
 .logline.in { opacity: 1; transform: none; }
 
@@ -116,7 +110,6 @@
 
 @media (prefers-reduced-motion: reduce) {
     .rv, .logline { opacity: 1 !important; transform: none !important; }
-    .rv .fill { transform: scaleX(1) !important; }
 }
 
 /* ── Metric visuals ───────────────────────────────────────────────────────
diff --git a/resources/views/components/layouts/site.blade.php b/resources/views/components/layouts/site.blade.php
index 1f7ada6..4838f8f 100644
--- a/resources/views/components/layouts/site.blade.php
+++ b/resources/views/components/layouts/site.blade.php
@@ -9,82 +9,63 @@
     @if ($description)<meta name="description" content="{{ $description }}">@endif
     @if ($robots)<meta name="robots" content="{{ $robots }}">@endif
     <x-shell.head :title="$title" />
-    {{-- Everything below the fold arrives on scroll, which an observer decides.
-         Without JavaScript nothing is ever observed, so the whole page would be
-         a headline over a blank sheet. --}}
-    <noscript><style>.rv,.logline{opacity:1!important;transform:none!important}.rv .fill{transform:scaleX(1)!important}</style></noscript>
+    {{-- Parts of the page arrive on scroll, which an observer decides. Without
+         JavaScript nothing is ever observed. --}}
+    <noscript><style>.rv,.logline{opacity:1!important;transform:none!important}</style></noscript>
 </head>
 {{--
     The public website.
 
-    It used to be a self-contained page with its own design system inside a
-    <style> block: warm paper, a serif headline, 3px corners, its own scale of
-    greys. It predated the token file, and by the time the portal and the
-    console had been rebuilt it was the only surface left speaking the old
-    language — a visitor moved from the website to the sign-in form and arrived
-    somewhere that looked like a different company.
+    Two rewrites. The first only recoloured the old page — same eight numbered
+    sections, same split hero, same comparison matrix — and was correctly called
+    out as the old thing in new paint. A palette is not a design.
 
-    So it draws from resources/css/portal-tokens.css like everything else. Same
-    colours, same radii, same buttons, same small-caps label. What still differs
-    is density and rhythm, which is what a marketing page is allowed to differ
-    in: wider measure, larger type, more air between sections.
+    What actually changed on the second pass: the § numbering is gone (a
+    document convention, and the document voice was exactly what the redesign
+    dropped), the hero shows the product instead of describing it, the uniform
+    card rows became one asymmetric grid, the price matrix became price cards
+    with the full table folded away underneath, and the page now has one dark
+    hinge in the middle instead of a dark section among seven light ones.
 --}}
-{{-- Column, so the footer sits at the bottom of the viewport on a short page
-     rather than halfway up it with the ground colour showing underneath. --}}
 <body class="flex min-h-screen flex-col bg-bg text-body antialiased">
     <div id="site-progress" class="fixed inset-x-0 top-0 z-[120] h-0.5 w-0 bg-accent" aria-hidden="true"></div>
 
-    <header
-        x-data="{ open: false, stuck: false }"
-        @scroll.window="stuck = window.scrollY > 8"
-        {{-- Opaque in both states. A translucent bar over a page of cards and
-             tables lets whatever is underneath show through the wordmark, and
-             backdrop-blur does not hide dark text on a light ground — it only
-             makes it look like a rendering fault. --}}
-        class="fixed inset-x-0 top-0 z-[110] border-b transition-colors duration-200"
-        :class="stuck ? 'border-line bg-surface shadow-xs' : 'border-transparent bg-bg'"
-    >
-        <div class="mx-auto flex h-16 max-w-[1180px] items-center gap-8 px-5 sm:px-8">
-            <a href="{{ route('home') }}" class="flex items-center gap-2.5">
-                <x-ui.logo class="size-8" />
-                <span class="text-md font-bold tracking-[-0.02em] text-ink">CluPilot</span>
-            </a>
+    {{-- A floating bar rather than a full-width band: it reads as an object on
+         the page instead of a browser chrome bolted to the top, and it lets the
+         hero start at the very top of the viewport. --}}
+    <header x-data="{ open: false }" class="fixed inset-x-0 top-0 z-[110] px-4 pt-4 sm:px-6">
+        {{-- Opaque. Translucency plus backdrop-blur looks like glass over a
+             photograph and like a rendering fault over a dark panel, which is
+             exactly what scrolls under this bar. --}}
+        <div class="mx-auto max-w-[1120px] rounded-xl border border-line bg-surface shadow-sm">
+            <div class="flex h-14 items-center gap-8 pl-4 pr-3">
+                <a href="{{ route('home') }}" class="flex items-center gap-2.5">
+                    <x-ui.logo class="size-7" />
+                    <span class="font-bold tracking-[-0.02em] text-ink">CluPilot</span>
+                </a>
 
-            <nav class="ml-auto hidden items-center gap-7 text-sm text-muted lg:flex">
-                @foreach ([
-                    '#produkt' => 'Produkt',
-                    '#ablauf' => 'Ablauf',
-                    '#sicherheit' => 'Sicherheit',
-                    '#pakete' => 'Pakete',
-                    '#faq' => 'Fragen',
-                ] as $href => $label)
-                    <a href="{{ route('home') }}{{ $href }}" class="relative py-1 transition-colors hover:text-ink after:absolute after:inset-x-0 after:-bottom-px after:h-px after:origin-left after:scale-x-0 after:bg-accent after:transition-transform after:duration-300 hover:after:scale-x-100">{{ $label }}</a>
+                <nav class="hidden items-center gap-1 text-sm text-muted lg:flex">
+                    @foreach (['#produkt' => 'Produkt', '#ablauf' => 'Ablauf', '#sicherheit' => 'Sicherheit', '#preise' => 'Preise', '#fragen' => 'Fragen'] as $href => $label)
+                        <a href="{{ route('home') }}{{ $href }}" class="rounded px-3 py-1.5 transition-colors hover:bg-surface-hover hover:text-ink">{{ $label }}</a>
+                    @endforeach
+                </nav>
+
+                <div class="ml-auto flex items-center gap-2">
+                    <a href="{{ route('login') }}" class="hidden rounded px-3 py-1.5 text-sm text-muted transition-colors hover:bg-surface-hover hover:text-ink sm:block">Anmelden</a>
+                    <x-ui.button href="{{ route('home') }}#preise" variant="ink" size="sm">Preise</x-ui.button>
+                    <button type="button" class="grid size-9 place-items-center rounded text-muted transition-colors hover:bg-surface-hover hover:text-ink lg:hidden" @click="open = !open" :aria-expanded="open" aria-label="Menü">
+                        <x-ui.icon name="menu" class="size-5" x-show="!open" />
+                        <x-ui.icon name="x" class="size-5" x-show="open" x-cloak />
+                    </button>
+                </div>
+            </div>
+
+            <nav x-show="open" x-cloak @click="open = false" class="border-t border-line px-4 pb-2 lg:hidden">
+                @foreach (['#produkt' => 'Produkt', '#ablauf' => 'Ablauf', '#sicherheit' => 'Sicherheit', '#preise' => 'Preise', '#fragen' => 'Fragen', route('login') => 'Anmelden'] as $href => $label)
+                    <a href="{{ Str::startsWith($href, '#') ? route('home').$href : $href }}" class="flex min-h-11 items-center border-b border-line text-sm text-body last:border-0">{{ $label }}</a>
                 @endforeach
             </nav>
-
-            <div class="ml-auto flex items-center gap-3 lg:ml-0">
-                <a href="{{ route('login') }}" class="hidden text-sm text-muted transition-colors hover:text-ink sm:block">Anmelden</a>
-                <x-ui.button href="{{ route('home') }}#pakete" variant="ink" size="sm">Pakete ansehen</x-ui.button>
-
-                <button type="button" class="-mr-1 grid size-9 place-items-center rounded text-muted transition-colors hover:bg-surface-hover hover:text-ink lg:hidden" @click="open = !open" :aria-expanded="open" aria-label="Menü">
-                    <x-ui.icon name="menu" class="size-5" x-show="!open" />
-                    <x-ui.icon name="x" class="size-5" x-show="open" x-cloak />
-                </button>
-            </div>
         </div>
-
-        <nav x-show="open" x-cloak @click="open = false" class="border-t border-line bg-surface px-5 py-2 sm:px-8 lg:hidden">
-            @foreach ([
-                '#produkt' => 'Produkt',
-                '#ablauf' => 'Ablauf',
-                '#sicherheit' => 'Sicherheit',
-                '#pakete' => 'Pakete',
-                '#faq' => 'Fragen',
-                route('login') => 'Anmelden',
-            ] as $href => $label)
-                <a href="{{ Str::startsWith($href, '#') ? route('home').$href : $href }}" class="flex min-h-11 items-center border-b border-line text-sm text-body last:border-0">{{ $label }}</a>
-            @endforeach
-        </nav>
     </header>
 
     <main class="flex-1">
@@ -92,28 +73,53 @@
     </main>
 
     <footer class="border-t border-line bg-surface">
-        <div class="mx-auto flex max-w-[1180px] flex-col gap-5 px-5 py-9 text-sm text-muted sm:px-8 lg:flex-row lg:items-center">
-            <div class="flex items-center gap-2.5">
-                <x-ui.logo class="size-6" />
-                <span class="font-semibold tracking-[-0.02em] text-ink">CluPilot Cloud</span>
-            </div>
-            <span class="lbl">© {{ date('Y') }} · Österreich</span>
+        <div class="mx-auto max-w-[1120px] px-5 py-14 sm:px-6">
+            <div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
+                <div class="lg:col-span-2">
+                    <div class="flex items-center gap-2.5">
+                        <x-ui.logo class="size-7" />
+                        <span class="font-bold tracking-[-0.02em] text-ink">CluPilot Cloud</span>
+                    </div>
+                    <p class="mt-4 max-w-[38ch] text-sm leading-relaxed text-muted">
+                        Eine eigene, isolierte Cloud für Ihr Unternehmen — eingerichtet, gesichert und
+                        überwacht von uns, mit Serverstandort in der EU.
+                    </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="flex flex-wrap gap-x-6 gap-y-2 lg:ml-auto">
-                <a href="{{ route('legal.impressum') }}" class="transition-colors hover:text-ink">Impressum</a>
-                <a href="{{ route('legal.datenschutz') }}" class="transition-colors hover:text-ink">Datenschutz</a>
-                <a href="{{ route('legal.agb') }}" class="transition-colors hover:text-ink">AGB</a>
-                <a href="{{ route('status') }}" class="transition-colors hover:text-ink">Status</a>
-                <a href="{{ route('login') }}" class="transition-colors hover:text-ink">Anmelden</a>
+                <div>
+                    <p class="lbl">Produkt</p>
+                    <div class="mt-4 flex flex-col gap-2.5 text-sm text-muted">
+                        <a href="{{ route('home') }}#produkt" class="transition-colors hover:text-ink">Was enthalten ist</a>
+                        <a href="{{ route('home') }}#ablauf" class="transition-colors hover:text-ink">Ablauf</a>
+                        <a href="{{ route('home') }}#sicherheit" class="transition-colors hover:text-ink">Sicherheit</a>
+                        <a href="{{ route('home') }}#preise" class="transition-colors hover:text-ink">Preise</a>
+                    </div>
+                </div>
+
+                <div>
+                    <p class="lbl">Rechtliches &amp; Betrieb</p>
+                    <div class="mt-4 flex flex-col gap-2.5 text-sm text-muted">
+                        <a href="{{ route('legal.impressum') }}" class="transition-colors hover:text-ink">Impressum</a>
+                        <a href="{{ route('legal.datenschutz') }}" class="transition-colors hover:text-ink">Datenschutz</a>
+                        <a href="{{ route('legal.agb') }}" class="transition-colors hover:text-ink">AGB</a>
+                        <a href="{{ route('status') }}" class="transition-colors hover:text-ink">Betriebsstatus</a>
+                        <a href="{{ route('login') }}" class="transition-colors hover:text-ink">Anmelden</a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mt-12 flex flex-col gap-2 border-t border-line pt-6 sm:flex-row sm:items-center">
+                <span class="lbl">© {{ date('Y') }} CluPilot Cloud · Österreich</span>
+                <span class="lbl sm:ml-auto">Serverstandort EU · Support auf Deutsch</span>
             </div>
         </div>
     </footer>
 
     @verbatim
     <script>
-        // Three small behaviours, none of which Alpine expresses more clearly
-        // than an IntersectionObserver does: a scroll indicator, sections that
-        // arrive as they are reached, and figures that count up once.
         (function () {
             const reduce = matchMedia('(prefers-reduced-motion:reduce)').matches;
             const progress = document.getElementById('site-progress');
@@ -128,7 +134,7 @@
                 if (!entry.isIntersecting) return;
                 entry.target.classList.add('in');
                 reveal.unobserve(entry.target);
-            }), { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
+            }), { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
             document.querySelectorAll('.rv').forEach(el => reveal.observe(el));
 
             // Tabular figures are set on the element, so counting never shifts
@@ -143,22 +149,21 @@
                 if (reduce) { el.textContent = format(target); return; }
                 const start = performance.now();
                 (function tick(now) {
-                    const p = Math.min((now - start) / 1200, 1);
+                    const p = Math.min((now - start) / 1100, 1);
                     el.textContent = format(target * (1 - Math.pow(1 - p, 3)));
                     if (p < 1) requestAnimationFrame(tick);
                 })(start);
             }), { threshold: 0.6 });
             document.querySelectorAll('[data-count]').forEach(el => count.observe(el));
 
-            // The provisioning log writes itself out, line by line.
             const log = document.getElementById('deploy-log');
             if (log) {
                 const lines = new IntersectionObserver(entries => entries.forEach(entry => {
                     if (!entry.isIntersecting) return;
                     lines.unobserve(log);
-                    const rows = log.querySelectorAll('.logline');
-                    rows.forEach((row, i) => setTimeout(() => row.classList.add('in'), reduce ? 0 : 240 + i * 400));
-                }), { threshold: 0.35 });
+                    log.querySelectorAll('.logline').forEach((row, i) =>
+                        setTimeout(() => row.classList.add('in'), reduce ? 0 : 200 + i * 340));
+                }), { threshold: 0.3 });
                 lines.observe(log);
             }
         })();
diff --git a/resources/views/components/site/section-head.blade.php b/resources/views/components/site/section-head.blade.php
deleted file mode 100644
index b306f1a..0000000
--- a/resources/views/components/site/section-head.blade.php
+++ /dev/null
@@ -1,17 +0,0 @@
-@props([
-    'number',
-    'label',
-    // The security band sits on --plate, where the muted token has no contrast.
-    'dark' => false,
-])
-{{--
-    The rubric above every section of the public site: a number, a name, and a
-    rule that draws itself across as the section is reached. Written once
-    because eight of them by hand is how the numbering and the spacing end up
-    disagreeing with each other.
---}}
-<div {{ $attributes->merge(['class' => 'rv mb-7 flex items-center gap-4']) }}>
-    <span class="font-mono text-xs font-medium {{ $dark ? 'text-accent' : 'text-accent-text' }}">§&nbsp;{{ $number }}</span>
-    <span class="lbl {{ $dark ? '!text-plate-muted' : '' }}">{{ $label }}</span>
-    <span class="fill h-px flex-1 {{ $dark ? 'bg-plate-rule' : 'bg-line' }}"></span>
-</div>
diff --git a/resources/views/landing.blade.php b/resources/views/landing.blade.php
index bbed15a..a77f646 100644
--- a/resources/views/landing.blade.php
+++ b/resources/views/landing.blade.php
@@ -1,280 +1,301 @@
 {{--
-    The public price sheet and everything around it.
+    The public front page.
 
-    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.
+    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."
 >
 
-@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 ═══════════════════════════════════════════════════════════
+     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>
 
-{{-- ── 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 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>
 
-    <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.
+        <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-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 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>
-</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">
+    {{-- 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="ml-3 rounded-pill border border-line bg-surface px-3 py-1 font-mono text-xs text-muted">cloud.kanzlei-berger.at</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="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 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-7 h-1.5 overflow-hidden rounded-pill bg-surface-hover">
-                        <span class="block h-full w-[47%] rounded-pill bg-accent"></span>
+                    <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>
-                    <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>
+                </aside>
 
-                <div class="bg-surface p-6 lg:p-8">
-                    <p class="lbl">Heute erledigt</p>
-                    <ul class="mt-4 space-y-3">
+                <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 · Wien</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'],
-                            ['Verfügbarkeit 99,98 %', 'laufend'],
                         ] as [$done, $when])
-                            <li class="flex items-center gap-2.5 text-sm">
+                            <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="text-body">{{ $done }}</span>
+                                <span class="truncate text-body">{{ $done }}</span>
                                 <time class="ml-auto font-mono text-xs tabular-nums text-muted">{{ $when }}</time>
-                            </li>
+                            </div>
                         @endforeach
-                    </ul>
+                    </div>
                 </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]" />
+{{-- ════ 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>
 
-        <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.
+{{-- ════ 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="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 ([
-                ['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>
+                ['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>
 
-        <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">
+{{-- ════ 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'],
@@ -282,100 +303,86 @@
                     ['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 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>
-            <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.
+        </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>
-</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">
+        <div class="mt-12 grid items-start gap-4 lg: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, [
+                ['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, [
+                ['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'],
@@ -387,18 +394,23 @@
                     [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])
+            ] as $i => [$option, $subtitle, $ours, $points])
                 <div @class([
-                    'rv rounded-lg border p-6 lg:p-7',
+                    'rv rounded-xl border p-7',
                     'd'.$i,
-                    'border-accent-border bg-accent-subtle shadow-sm' => $ours,
-                    'border-line bg-surface shadow-xs' => ! $ours,
+                    'border-ink bg-surface shadow-md lg:-mt-4 lg:pb-9 lg:pt-9' => $ours,
+                    'border-line bg-surface/60' => ! $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>
+                    <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 text-body">
+                            <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>
@@ -410,121 +422,156 @@
     </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.
+{{-- ════ 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="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 class="mt-5 text-md leading-relaxed text-muted">
+            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>
+
+    @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>
+                    <p class="mt-1 text-sm text-muted">{{ $plan['audience'] }}</p>
+
+                    <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>
 
-{{-- ── §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]" />
+{{-- ════ 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>
 
-        <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">
+        <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.'],
@@ -534,63 +581,54 @@
                 ['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">
+                <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-[70ch] px-6 pb-5 text-sm leading-relaxed text-muted">{{ $answer }}</p>
+                    <p class="max-w-[68ch] 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>
+{{-- ════ 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">
+        <p class="lbl !text-white/70">Erstgespräch</p>
+        <h2 class="mx-auto mt-4 max-w-[20ch] text-[clamp(2rem,4.4vw,3.4rem)] font-bold leading-[1.06] tracking-[-0.035em] text-white">
+            Wen rufen Sie an, wenn Montagfrüh ein Ordner fehlt?
+        </h2>
+        <p class="mx-auto mt-6 max-w-[54ch] text-md leading-relaxed text-white/85">
+            Genau dafür gibt es uns. 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>
 
-        <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>
+        <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>
-                @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>
+            @endforeach
+        </dl>
     </div>
 </section>
 
diff --git a/tests/Feature/SiteDesignSystemTest.php b/tests/Feature/SiteDesignSystemTest.php
index 1e05bdf..28528b5 100644
--- a/tests/Feature/SiteDesignSystemTest.php
+++ b/tests/Feature/SiteDesignSystemTest.php
@@ -22,7 +22,6 @@ function sitePages(): array
         'landing.blade.php',
         'legal.blade.php',
         'components/layouts/site.blade.php',
-        'components/site/section-head.blade.php',
     ];
 }