feat: landing page overhaul with pilot framing and compliance-safe copy

frontend/public/photos/SOURCES.md

@@ -17,3 +17,4 @@ Dutch-language documents.
 | church-pews.webp       | Bright empty pews, checkerboard| https://www.pexels.com/photo/church-pews-7566207/ |
 | paperwork-desk.webp    | Desk with stamps and forms     | https://www.pexels.com/photo/desk-with-documents-and-stamps-18687845/ |
 | team-laptop.webp       | Team collaborating at laptop   | https://www.pexels.com/photo/a-team-looking-at-a-laptop-7793702/ |
+| pilot-meeting.webp     | Consultation meeting, notes    | https://www.pexels.com/photo/two-people-shaking-hands-5668858/ |

frontend/scripts/fetch-photos.py

@@ -50,6 +50,10 @@ PHOTOS = {
         pexels(7793702),
         "https://www.pexels.com/photo/a-team-looking-at-a-laptop-7793702/",
     ),
+    "pilot-meeting.webp": (
+        pexels(5668858),
+        "https://www.pexels.com/photo/two-people-shaking-hands-5668858/",
+    ),
 }
 
 

frontend/src/pages/StartPage.tsx

@@ -10,6 +10,7 @@ import {
   Group,
   Image,
   List,
+  SimpleGrid,
   Stack,
   Text,
   ThemeIcon,
@@ -17,69 +18,210 @@ import {
   Title,
 } from "@mantine/core";
 import {
+  IconArrowRight,
+  IconBook2,
   IconCheck,
   IconClipboardCheck,
+  IconCoins,
+  IconEye,
   IconFileText,
   IconInbox,
-  IconKey,
+  IconLink,
   IconLock,
+  IconPigMoney,
+  IconPlug,
+  IconScale,
   IconServer,
-  IconSparkles,
   IconUserCheck,
+  IconUsers,
+  IconWand,
 } from "@tabler/icons-react";
 import { useAuth } from "../auth";
 
-const CTA_LABEL = "Zugang anfragen";
+const CTA_LABEL = "Pilotgespräch vereinbaren";
+const CTA_TO = "/access";
 
 const facts = [
-  { icon: <IconServer size={20} />, text: "Gehostet in Deutschland" },
-  { icon: <IconKey size={20} />, text: "Login ohne Passwort" },
-  { icon: <IconClipboardCheck size={20} />, text: "Jeder Schritt protokolliert" },
+  { icon: <IconServer size={18} />, text: "Gehostet in Deutschland" },
+  {
+    icon: <IconLink size={18} />,
+    text: "Anmeldung per einmaligem Link — ohne Passwort",
+  },
+  { icon: <IconClipboardCheck size={18} />, text: "Jeder Schritt protokolliert" },
 ];
 
-const benefits = [
+const contrasts = [
   {
-    icon: <IconFileText size={28} />,
-    title: "In eigenen Worten",
-    text: "Mitarbeitende beschreiben Anliegen wie gewohnt — das System führt in verständlichen Schritten durch den Vorgang. Schluss mit Stempeln und Durchschlägen.",
-    photo: "/photos/paperwork-desk.webp",
-    alt: "Schreibtisch mit Stempeln und Formularen — so sieht es heute oft aus",
+    before: "Papiervorgänge und Durchschläge",
+    after: "Ein Vorgang, ein Ort, ein Stand",
   },
   {
-    icon: <IconSparkles size={28} />,
-    title: "Regeln automatisch geprüft",
-    text: "Schwellen, Zuständigkeiten und Abläufe prüft die Software selbst. Routine läuft durch, ohne dass jemand klicken muss.",
-    photo: "/photos/team-laptop.webp",
-    alt: "Team arbeitet gemeinsam am Laptop",
+    before: "E-Mail-Ketten zur Freigabe",
+    after: "Freigaben mit allen Fakten auf einen Blick",
   },
   {
-    icon: <IconUserCheck size={28} />,
-    title: "Mensch nur wo nötig",
-    text: "Echte Entscheidungen landen mit allen Fakten bei der zuständigen Person — Freigabe oder Ablehnung inklusive Notiz. Für alles andere bleibt Zeit.",
-    photo: "/photos/church-pews.webp",
-    alt: "Ruhiger Kirchenraum mit leeren Bänken",
+    before: "Wissen in Köpfen und Ordnern",
+    after: "Antworten mit Quellen, für alle abrufbar",
   },
 ];
 
 const steps = [
   {
-    title: "Zugang anfragen & anmelden",
-    text: "Anfrage stellen, per E-Mail-Link einloggen — ganz ohne Passwort.",
+    title: "Anliegen stellen",
+    text: "Sie beschreiben Ihr Anliegen in eigenen Worten.",
+    quote:
+      "Wir wollen das Dach unseres Gemeindehauses für 120.000 € sanieren.",
   },
   {
-    title: "Formular ausfüllen & starten",
-    text: "Vorgang wählen, Angaben machen, starten. Der Ablauf folgt automatisch.",
+    title: "Verstehen & Beratung — KI-gestützt",
+    text: "Die Wissens-KI erklärt, was zu beachten ist und welche Schritte erforderlich sind — mit Quellenangabe aus Kirchenrecht, Rundschreiben und Dienstanweisungen. Ihre Fachverantwortung bleibt unberührt: Die Beratung unterstützt, sie ersetzt keine rechtliche Prüfung im Einzelfall.",
   },
   {
-    title: "Ergebnis & Protokoll",
-    text: "Antwort erhalten, Freigaben erteilen — jeder Schritt bleibt nachvollziehbar.",
+    title: "Prozess starten",
+    text: "Der Prozessassistent führt Sie Schritt für Schritt, stellt Fragen und sammelt alle notwendigen Informationen.",
+  },
+  {
+    title: "Prüfen & automatisieren",
+    text: "Dokumente werden ausgelesen, Regeln nach dokumentierten Kriterien geprüft, Zuständigkeiten ermittelt — der Vorgang wird bearbeitet.",
+  },
+  {
+    title: "Entscheiden & abschließen",
+    text: "Regelkonforme Vorgänge werden automatisch zur Freigabe vorgemerkt. Bei Auffälligkeiten prüft ein Sachbearbeiter. Jede Entscheidung ist nachvollziehbar protokolliert.",
+  },
+];
+
+const portalAreas = [
+  "Bauen & Immobilien",
+  "Personal",
+  "Haushalt & Finanzen",
+  "Beschaffung & Vergabe",
+  "Zuschüsse & Fördermittel",
+  "Gremien & Beschlüsse",
+  "Recht & Genehmigungen",
+  "Wissen & Vorschriften",
+];
+
+const platformParts = [
+  {
+    icon: <IconBook2 size={28} />,
+    title: "Wissens-KI",
+    text: "Antworten mit Quellen aus Kirchenrecht, Rundschreiben, Dienstanweisungen und FAQ.",
+  },
+  {
+    icon: <IconWand size={28} />,
+    title: "Prozessassistent",
+    text: "Versteht Ihr Anliegen und führt Sie Schritt für Schritt durch den Prozess.",
+  },
+  {
+    icon: <IconFileText size={28} />,
+    title: "Dokumenten-KI",
+    text: "Liest, versteht und extrahiert Daten aus PDFs, E-Mails und Belegen.",
+  },
+  {
+    icon: <IconScale size={28} />,
+    title: "Regelengine",
+    text: "Prüft automatisch Regeln, Schwellenwerte, Zuständigkeiten und Vollständigkeit — nach dokumentierten Kriterien.",
+  },
+  {
+    icon: <IconClipboardCheck size={28} />,
+    title: "Workflow & Entscheidung",
+    text: "Standardfall: regelbasiert bis zur Freigabevormerkung. Sonderfall: gezielte menschliche Prüfung.",
+  },
+];
+
+const tiers = [
+  {
+    color: "green",
+    title: "Standardfall",
+    text: "Alle Regeln erfüllt — die Prüfung läuft automatisch nach dokumentierten Regeln bis zur Freigabevormerkung.",
+  },
+  {
+    color: "yellow",
+    title: "Auffälliger Fall",
+    text: "Kleine Abweichungen oder Unklarheiten — gezielte Prüfung durch den Sachbearbeiter, nur die offenen Punkte.",
+  },
+  {
+    color: "red",
+    title: "Risiko-/Sonderfall",
+    text: "Rechtlich oder finanziell kritisch — vollständige Fachprüfung mit allen Fakten auf einen Blick.",
+  },
+];
+
+const benefits = [
+  {
+    icon: <IconCoins size={28} />,
+    title: "Zeit sparen",
+    text: "Routinevorgänge laufen nach Regeln durch: bis zu 70 % weniger Bearbeitungszeit. Im Pilotprojekt messen wir Ihre tatsächliche Zeitersparnis — versprochen wird, was messbar ist.",
+  },
+  {
+    icon: <IconUsers size={28} />,
+    title: "Mitarbeitende entlasten",
+    text: "Weniger manuelle Prüfungen, mehr Zeit für Menschen und Ausnahmen.",
+  },
+  {
+    icon: <IconScale size={28} />,
+    title: "Rechtssicher & nachvollziehbar",
+    text: "Jede Entscheidung basiert auf dokumentierten Regeln und ist protokolliert.",
+  },
+  {
+    icon: <IconBook2 size={28} />,
+    title: "Wissen nutzen",
+    text: "Zentralisiertes Wissen macht Vorschriften, Zuständigkeiten und Prozesse für alle zugänglich.",
+  },
+  {
+    icon: <IconPigMoney size={28} />,
+    title: "Steuern & planen",
+    text: "Aktuelle Übersichten für Leitung und Verwaltung — bessere Entscheidungen.",
+  },
+] as const;
+
+const [timeBenefit, ...otherBenefits] = benefits;
+
+const integrations = [
+  "Finanzbuchhaltung",
+  "Personalwesen",
+  "DMS / Archiv",
+  "Kirchenbuch / Meldewesen",
+  "Microsoft 365",
+  "Weitere Fachverfahren",
+];
+
+const examples = [
+  "Bauvorhaben bis 200.000 € prüfen & genehmigen",
+  "Personaleinstellungen prüfen & bescheiden",
+  "Haushaltsentwurf erstellen & plausibilisieren",
+  "Zuschussanträge prüfen & bescheiden",
+  "Beschaffungen bis zur Vergabe freigeben",
+  "Ihr eigener Prozess: Gemeinsam bilden wir Ihr Prozessmodell ab.",
+];
+
+const trust = [
+  {
+    icon: <IconLock size={28} />,
+    title: "Datenschutz & Sicherheit",
+    text: "Entwickelt nach den Anforderungen von DSG-EKD und DSGVO: mit Auftragsverarbeitungsvertrag (AVV), technisch-organisatorischen Maßnahmen (TOMs) und Verarbeitungsübersicht. Verschlüsselte Verbindungen, Backups, Betrieb auf Servern in Deutschland.",
+  },
+  {
+    icon: <IconUserCheck size={28} />,
+    title: "Mensch im Mittelpunkt",
+    text: "KI unterstützt, der Mensch entscheidet. Jederzeit eingreifbar.",
+  },
+  {
+    icon: <IconEye size={28} />,
+    title: "Transparenz",
+    text: "Jede Antwort mit Quellenangabe. Jede Prüfung ist erklärbar und nachvollziehbar.",
+  },
+  {
+    icon: <IconPlug size={28} />,
+    title: "Flexibel & integrierbar",
+    text: "Offene Schnittstellen. Anbindung an bestehende Systeme.",
   },
 ];
 
 const faqs = [
   {
     q: "Was kostet Kirche Einfach?",
-    a: "Das Preismodell steht noch nicht fest. Stellen Sie eine Zugangsfrage — wir melden uns mit allen Details.",
+    a: "Das Angebot richtet sich nach Gemeindegröße und Anzahl der abgebildeten Vorgänge. Pilotgemeinden erhalten eine Sonderkondition. Im persönlichen Gespräch erhalten Sie ein verbindliches Angebot — und wir rechnen gemeinsam nach: Wie viele Stunden pro Woche sparen Ihre Mitarbeitenden ein, und was machen sie mit der gewonnenen Zeit?",
   },
   {
     q: "Was muss bei uns installiert werden?",
@@ -87,47 +229,88 @@ const faqs = [
   },
   {
     q: "Wo liegen unsere Daten?",
-    a: "Auf Servern in Deutschland. Es gibt keine externen Aufrufe an Drittdienste.",
+    a: "Betrieb und Verarbeitung auf Servern in Deutschland. Keine Nutzung Ihrer Daten zum Training von KI-Modellen; der rechtliche Rahmen ist ein Auftragsverarbeitungsvertrag mit uns als Anbieter.",
+  },
+  {
+    q: "Werden unsere Daten zum KI-Training verwendet?",
+    a: "Nein. Ihre Daten werden nicht zum Training von KI-Modellen verwendet. Verarbeitung ausschließlich nach Auftragsverarbeitungsvertrag (AVV); Verarbeitungsstandorte in Deutschland.",
+  },
+  {
+    q: "Wer verantwortet Kirchenrecht-Auskünfte der KI?",
+    a: "Die Wissens-KI nennt zu jeder Antwort die Quelle (z. B. Rundschreiben, Dienstanweisung). Den Wissensbestand pflegen und aktualisieren wir gemeinsam mit Ihnen. Die Verbindlichkeit im Einzelfall bleibt in Ihrer Fachverantwortung.",
   },
   {
     q: "Wer sieht welche Daten?",
-    a: "Jede Gemeinde arbeitet in ihrem eigenen Mandanten. Innerhalb davon steuern Rollen (Mitglied, Verwaltung), wer was sieht und entscheidet.",
+    a: "Jede Gemeinde arbeitet in ihrem eigenen, getrennten Bereich. Innerhalb davon steuern Rollen (Mitglied, Verwaltung), wer was sieht und entscheidet.",
   },
   {
     q: "Brauchen wir Passwörter?",
-    a: "Nein. Die Anmeldung läuft über einen persönlichen Link per E-Mail — gültig für eine Sitzung, nichts zu merken, nichts zu vergessen.",
+    a: "Nein. Die Anmeldung läuft über einen persönlichen Link per E-Mail. Der Link ist sitzungsgebunden und nur kurze Zeit gültig — auch bei geteilten Postfächern im Pfarrbüro bleibt jeder Zugriff einer Sitzung zugeordnet und nachvollziehbar.",
+  },
+  {
+    q: "Stimmt die 70-%-Angabe für uns?",
+    a: "Zielgröße für Routinevorgänge. Im Pilotprojekt messen wir Ihre tatsächliche Zeitersparnis gemeinsam.",
   },
 ];
 
+const pilotPoints = [
+  "Gemeinsame Ersteinrichtung Ihrer Vorgänge",
+  "Schulung für Verwaltung und Sachbearbeitung",
+  "Persönlicher Ansprechpartner während der gesamten Pilotphase",
+];
+
+function SectionTitle({ children }: { children: string }) {
+  return (
+    <Title order={2} mb="xs" ta="center">
+      {children}
+    </Title>
+  );
+}
+
 export default function StartPage() {
   const { me } = useAuth();
   return (
     <Stack gap="xl">
       {/* Hero: text left, parish photo right */}
       <Card withBorder padding="xl" radius="lg">
-        <Flex
-          direction={{ base: "column", md: "row" }}
-          gap="xl"
-          align="center"
-        >
+        <Flex direction={{ base: "column", md: "row" }} gap="xl" align="center">
           <Box style={{ flex: 7 }}>
-            <Badge mb="sm">Für Pfarrbüros und Kirchengemeinden</Badge>
+            <Badge mb="sm">
+              Für Pfarrbüros, Kirchengemeinden und Kirchenverwaltungen
+            </Badge>
             <Title order={1} mb="sm">
-              Weniger Verwaltung. Mehr Zeit für Menschen.
+              Kirche Einfach. Verwaltung. Einfach. Sicher.
             </Title>
-            <Text size="lg" c="dimmed" mb="lg">
-              Kirche Einfach führt Mitarbeitende in eigenen Worten durch
-              Vorgänge, prüft Regeln automatisch und fragt Menschen nur, wo
-              Urteil nötig ist — lückenlos protokolliert.
+            <Text size="lg" c="dimmed" mb="xs">
+              Die intelligente Verwaltungsplattform für Ihre Gemeinde. Statt
+              Formularen, E-Mail-Ketten und Excel-Listen: Anliegen in eigenen
+              Worten beschreiben — die Plattform führt durch den Prozess,
+              prüft Regeln nach dokumentierten Kriterien und dokumentiert
+              jeden Schritt.
+            </Text>
+            <Text size="lg" fw={600} mb="lg" c="kirchenblau.7">
+              Fragen. Verstehen. Prüfen. Genehmigen. Erledigt.
             </Text>
             <Group>
-              <Button component={Link} to="/access" size="lg">
+              <Button component={Link} to={CTA_TO} size="lg">
                 {CTA_LABEL}
               </Button>
               <Button component={Link} to="/login" size="lg" variant="light">
-                Zum Login
+                Zur Anmeldung
               </Button>
             </Group>
+            <Group gap="lg" mt="lg" wrap="wrap">
+              {facts.map((f) => (
+                <Group key={f.text} gap="xs">
+                  <ThemeIcon variant="light" size="sm">
+                    {f.icon}
+                  </ThemeIcon>
+                  <Text size="sm" fw={500}>
+                    {f.text}
+                  </Text>
+                </Group>
+              ))}
+            </Group>
             {me && (
               <Text mt="md">
                 Angemeldet als <strong>{me.email}</strong> ({me.tenant_id}).
@@ -140,34 +323,272 @@ export default function StartPage() {
               alt="Steinerner Kirchturm unter blauem Himmel"
               radius="lg"
               className="photo"
-              h={380}
+              h={420}
               fit="cover"
             />
           </Box>
         </Flex>
       </Card>
 
-      {/* Facts */}
-      <Group gap="lg">
-        {facts.map((f) => (
-          <Group key={f.text} gap="xs">
-            <ThemeIcon variant="light" size="lg">
-              {f.icon}
-            </ThemeIcon>
-            <Text size="sm" fw={500}>
-              {f.text}
-            </Text>
-          </Group>
-        ))}
-      </Group>
-
-      {/* Benefits: alternating photo/text rows */}
-      {benefits.map((b, i) => {
-        const photo = (
+      {/* Status quo problem */}
+      <Card withBorder padding="xl" radius="lg">
+        <Flex direction={{ base: "column", md: "row" }} gap="xl" align="center">
+          <Box style={{ flex: 7 }}>
+            <Title order={2} mb="md">
+              Verwaltung, die Zeit frisst.
+            </Title>
+            <Stack gap="sm">
+              {contrasts.map((c) => (
+                <Group key={c.before} gap="md" wrap="nowrap">
+                  <Text size="sm" c="dimmed" style={{ flex: 5 }}>
+                    {c.before}
+                  </Text>
+                  <ThemeIcon size="sm" variant="transparent" color="teal">
+                    <IconArrowRight size={16} />
+                  </ThemeIcon>
+                  <Text size="sm" fw={500} style={{ flex: 6 }}>
+                    {c.after}
+                  </Text>
+                </Group>
+              ))}
+            </Stack>
+          </Box>
           <Box style={{ flex: 5 }} w={{ base: "100%", md: "auto" }}>
             <Image
-              src={b.photo}
-              alt={b.alt}
+              src="/photos/paperwork-desk.webp"
+              alt="Schreibtisch mit Stempeln und Formularen — so sieht es heute oft aus"
+              radius="lg"
+              className="photo"
+              loading="lazy"
+              h={280}
+              fit="cover"
+            />
+          </Box>
+        </Flex>
+      </Card>
+
+      {/* 5-step process */}
+      <div>
+        <SectionTitle>So einfach funktioniert es</SectionTitle>
+        <Timeline bulletSize={32} lineWidth={2} mb="md">
+          {steps.map((s, i) => (
+            <Timeline.Item key={s.title} bullet={i + 1} title={s.title}>
+              <Text size="sm" c="dimmed" mb={s.quote ? "xs" : undefined}>
+                {s.text}
+              </Text>
+              {s.quote && (
+                <Card
+                  withBorder
+                  padding="sm"
+                  radius="md"
+                  bg="var(--mantine-color-kirchenblau-light)"
+                >
+                  <Text size="sm" style={{ fontStyle: "italic" }}>
+                    „{s.quote}“
+                  </Text>
+                </Card>
+              )}
+            </Timeline.Item>
+          ))}
+        </Timeline>
+      </div>
+
+      {/* Portal */}
+      <Card withBorder padding="xl" radius="lg">
+        <Title order={2} mb="xs" ta="center">
+          Ein Portal — alle Verwaltungsprozesse.
+        </Title>
+        <Text c="dimmed" mb="md" ta="center">
+          Von Bauvorhaben bis Zuschussantrag: alle Vorgänge an einem Ort —
+          übersichtlich, protokolliert, immer verfügbar.
+        </Text>
+        <Group gap="xs" justify="center" mb="lg" wrap="wrap">
+          {portalAreas.map((a) => (
+            <Badge key={a} variant="light" size="lg">
+              {a}
+            </Badge>
+          ))}
+        </Group>
+        <Image
+          src="/screenshots/workflows-light.png"
+          alt="Portal von Kirche Einfach mit Vorgangsformular"
+          radius="md"
+          className="photo"
+          loading="lazy"
+          bd="1px solid var(--mantine-color-default-border)"
+        />
+        <Text size="sm" c="dimmed" ta="center" mt="sm">
+          Eingabefeld im Portal: „Was möchten Sie erledigen?“
+        </Text>
+      </Card>
+
+      {/* Platform parts */}
+      <div>
+        <SectionTitle>Fünf Bausteine, die zusammenarbeiten</SectionTitle>
+        <Text c="dimmed" ta="center" mb="lg">
+          KI-gestützt, aber nicht KI-Alleingang — jede Prüfung nach
+          dokumentierten Regeln, jede Entscheidung mit Verantwortung beim
+          Menschen.
+        </Text>
+        <SimpleGrid cols={{ base: 1, xs: 2, md: 3 }} spacing="lg">
+          {platformParts.map((p) => (
+            <Card key={p.title} withBorder padding="lg" radius="lg">
+              <ThemeIcon size={44} radius="md" variant="light" mb="sm">
+                {p.icon}
+              </ThemeIcon>
+              <Title order={4} mb="xs">
+                {p.title}
+              </Title>
+              <Text size="sm" c="dimmed">
+                {p.text}
+              </Text>
+            </Card>
+          ))}
+        </SimpleGrid>
+      </div>
+
+      {/* Exception tiers */}
+      <div>
+        <SectionTitle>Geprüft wird, was geprüft werden muss</SectionTitle>
+        <Text c="dimmed" ta="center" mb="lg">
+          Ausnahmeverwaltung statt Vollprüfung — die Freigabe bleibt immer beim
+          Menschen.
+        </Text>
+        <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
+          {tiers.map((t) => (
+            <Card key={t.title} withBorder padding="lg" radius="lg">
+              <Badge color={t.color} variant="light" size="lg" mb="sm">
+                {t.title}
+              </Badge>
+              <Text size="sm" c="dimmed">
+                {t.text}
+              </Text>
+            </Card>
+          ))}
+        </SimpleGrid>
+      </div>
+
+      {/* Benefits */}
+      <div>
+        <SectionTitle>Mehr Zeit für das Wesentliche</SectionTitle>
+        <Card withBorder padding="xl" radius="lg" mb="lg">
+          <Flex direction={{ base: "column", sm: "row" }} gap="xl" align="center">
+            <Title order={1} c="kirchenblau.7" style={{ flex: 3 }} ta="center">
+              70 %
+            </Title>
+            <Box style={{ flex: 8 }}>
+              <Title order={3} mb="xs">
+                {timeBenefit.title}
+              </Title>
+              <Text c="dimmed">{timeBenefit.text}</Text>
+            </Box>
+          </Flex>
+        </Card>
+        <SimpleGrid cols={{ base: 1, xs: 2 }} spacing="lg">
+          {otherBenefits.map((b) => (
+            <Card key={b.title} withBorder padding="lg" radius="lg">
+              <ThemeIcon size={40} radius="md" variant="light" mb="sm">
+                {b.icon}
+              </ThemeIcon>
+              <Title order={4} mb="xs">
+                {b.title}
+              </Title>
+              <Text size="sm" c="dimmed">
+                {b.text}
+              </Text>
+            </Card>
+          ))}
+        </SimpleGrid>
+      </div>
+
+      {/* Integrations */}
+      <Card withBorder padding="xl" radius="lg">
+        <Title order={2} mb="xs" ta="center">
+          Passt zu Ihrer bestehenden IT
+        </Title>
+        <Text c="dimmed" ta="center" mb="lg">
+          Offene Schnittstellen, Anbindung an bewährte Fachverfahren.
+        </Text>
+        <Group gap="xs" justify="center" wrap="wrap">
+          {integrations.map((i) => (
+            <Badge key={i} variant="outline" size="lg">
+              {i}
+            </Badge>
+          ))}
+        </Group>
+      </Card>
+
+      {/* Examples */}
+      <div>
+        <SectionTitle>Typische Vorgänge — ab Tag eins einsatzbereit</SectionTitle>
+        <SimpleGrid cols={{ base: 1, md: 2 }} spacing="sm">
+          {examples.map((e) => (
+            <Group key={e} gap="sm" wrap="nowrap" align="flex-start">
+              <ThemeIcon size="sm" variant="light" mt={4}>
+                <IconCheck size={14} />
+              </ThemeIcon>
+              <Text size="sm">{e}</Text>
+            </Group>
+          ))}
+        </SimpleGrid>
+      </div>
+
+      {/* Trust */}
+      <div>
+        <SectionTitle>Darauf können Sie sich verlassen</SectionTitle>
+        <SimpleGrid cols={{ base: 1, xs: 2 }} spacing="lg">
+          {trust.map((t) => (
+            <Card key={t.title} withBorder padding="lg" radius="lg">
+              <ThemeIcon size={40} radius="md" variant="light" mb="sm">
+                {t.icon}
+              </ThemeIcon>
+              <Title order={4} mb="xs">
+                {t.title}
+              </Title>
+              <Text size="sm" c="dimmed">
+                {t.text}
+              </Text>
+            </Card>
+          ))}
+        </SimpleGrid>
+      </div>
+
+      {/* Pilot program */}
+      <Card withBorder padding="xl" radius="lg">
+        <Flex direction={{ base: "column", md: "row" }} gap="xl" align="center">
+          <Box style={{ flex: 7 }}>
+            <Title order={2} mb="xs">
+              Jetzt Pilotgemeinde werden
+            </Title>
+            <Text c="dimmed" mb="md">
+              Wir bringen Kirche Einfach gemeinsam mit Pilotgemeinden in den
+              Betrieb — mit Einrichtung, Schulung und persönlicher Betreuung.
+              Als Pilotgemeinde gestalten Sie Prozesse und Regelwerk aktiv
+              mit; Ihre tatsächliche Zeitersparnis messen wir von Tag eins an
+              mit.
+            </Text>
+            <List
+              spacing="xs"
+              size="sm"
+              icon={
+                <ThemeIcon size={20} radius="xl" variant="light">
+                  <IconCheck size={12} />
+                </ThemeIcon>
+              }
+              mb="md"
+            >
+              {pilotPoints.map((p) => (
+                <List.Item key={p}>{p}</List.Item>
+              ))}
+            </List>
+            <Button component={Link} to={CTA_TO} size="lg">
+              {CTA_LABEL}
+            </Button>
+          </Box>
+          <Box style={{ flex: 5 }} w={{ base: "100%", md: "auto" }}>
+            <Image
+              src="/photos/pilot-meeting.webp"
+              alt="Persönliches Beratungsgespräch mit Notizen am Tisch"
               radius="lg"
               className="photo"
               loading="lazy"
@@ -175,116 +596,12 @@ export default function StartPage() {
               fit="cover"
             />
           </Box>
-        );
-        const text = (
-          <Box style={{ flex: 7 }}>
-            <ThemeIcon size={48} radius="md" variant="light" mb="sm">
-              {b.icon}
-            </ThemeIcon>
-            <Title order={3} mb="xs">
-              {b.title}
-            </Title>
-            <Text c="dimmed">{b.text}</Text>
-          </Box>
-        );
-        return (
-          <Flex
-            key={b.title}
-            direction={{ base: "column", md: "row" }}
-            gap="xl"
-            align="center"
-          >
-            {i % 2 === 0 ? (
-              <>
-                {photo}
-                {text}
-              </>
-            ) : (
-              <>
-                {text}
-                {photo}
-              </>
-            )}
-          </Flex>
-        );
-      })}
-
-      {/* Product visual */}
-      <Card withBorder padding="lg" radius="lg">
-        <Title order={3} mb="xs">
-          So sieht die Arbeit aus
-        </Title>
-        <Text size="sm" c="dimmed" mb="md">
-          Formulare entstehen automatisch aus den Vorgängen — hier das
-          Aufnahmeformular mit allen Feldtypen.
-        </Text>
-        <Image
-          src="/screenshots/workflows-light.png"
-          alt="Workflow-Formular in Kirche Einfach"
-          radius="md"
-          className="photo"
-          loading="lazy"
-          bd="1px solid var(--mantine-color-default-border)"
-        />
-      </Card>
-
-      {/* Steps */}
-      <Card withBorder padding="lg" radius="lg">
-        <Title order={3} mb="md">
-          In drei Schritten dabei
-        </Title>
-        <Timeline bulletSize={28}>
-          {steps.map((s, i) => (
-            <Timeline.Item
-              key={s.title}
-              bullet={i + 1}
-              title={s.title}
-            >
-              <Text size="sm" c="dimmed">
-                {s.text}
-              </Text>
-            </Timeline.Item>
-          ))}
-        </Timeline>
-      </Card>
-
-      {/* Trust */}
-      <Card withBorder padding="lg" radius="lg">
-        <Title order={3} mb="md">
-          Darauf können Sie sich verlassen
-        </Title>
-        <List
-          spacing="sm"
-          icon={
-            <ThemeIcon size={24} radius="xl" variant="light">
-              <IconCheck size={14} />
-            </ThemeIcon>
-          }
-        >
-          <List.Item>
-            <strong>Datenhoheit:</strong> Betrieb auf Servern in Deutschland,
-            ohne Aufrufe an Drittdienste.
-          </List.Item>
-          <List.Item>
-            <strong>Klare Zuständigkeit:</strong> Rollen und Mandanten trennen,
-            wer sieht und wer entscheidet.
-          </List.Item>
-          <List.Item>
-            <strong>Sicher ohne Passwort:</strong> Einmal-Links per E-Mail
-            statt vergessener Kennwörter.
-          </List.Item>
-          <List.Item>
-            <strong>Nachvollziehbar:</strong> Läufe, Entscheidungen und Notizen
-            bleiben protokolliert.
-          </List.Item>
-        </List>
+        </Flex>
       </Card>
 
       {/* FAQ */}
       <div>
-        <Title order={3} mb="md">
-          Häufige Fragen
-        </Title>
+        <SectionTitle>Häufige Fragen</SectionTitle>
         <Accordion variant="separated">
           {faqs.map((f) => (
             <Accordion.Item key={f.q} value={f.q}>
@@ -299,17 +616,32 @@ export default function StartPage() {
 
       {/* Final CTA */}
       <Card withBorder padding="xl" radius="lg">
-        <Group gap="sm" mb="xs">
-          <IconInbox size={28} />
-          <Title order={3}>Bereit für weniger Papierkram?</Title>
-        </Group>
-        <Text c="dimmed" mb="md">
-          Stellen Sie eine Zugangsfrage — wir melden uns mit den nächsten
-          Schritten.
-        </Text>
-        <Button component={Link} to="/access" size="lg">
-          {CTA_LABEL}
-        </Button>
+        <Flex direction={{ base: "column", md: "row" }} gap="xl" align="center">
+          <Box style={{ flex: 7 }}>
+            <Group gap="sm" mb="xs">
+              <IconInbox size={28} />
+              <Title order={2}>Mehr Zeit für das Wesentliche.</Title>
+            </Group>
+            <Text c="dimmed" mb="md">
+              Vereinbaren Sie ein Pilotgespräch — wir melden uns persönlich
+              mit den nächsten Schritten.
+            </Text>
+            <Button component={Link} to={CTA_TO} size="lg">
+              {CTA_LABEL}
+            </Button>
+          </Box>
+          <Box style={{ flex: 5 }} w={{ base: "100%", md: "auto" }}>
+            <Image
+              src="/photos/church-pews.webp"
+              alt="Ruhiger Kirchenraum mit leeren Bänken"
+              radius="lg"
+              className="photo"
+              loading="lazy"
+              h={260}
+              fit="cover"
+            />
+          </Box>
+        </Flex>
       </Card>
 
       {/* Footer mini (Kontakt/Impressum liefert der Betreiber) */}
@@ -317,11 +649,14 @@ export default function StartPage() {
         <Text size="xs" c="dimmed">
           Kirche Einfach
         </Text>
-        <Anchor component={Link} to="/access" size="xs">
-          Zugang
+        <Anchor component={Link} to={CTA_TO} size="xs">
+          Pilotgespräch
         </Anchor>
         <Anchor component={Link} to="/login" size="xs">
-          Login
+          Anmeldung
+        </Anchor>
+        <Anchor component={Link} to={CTA_TO} size="xs">
+          Kontakt
         </Anchor>
         <Text size="xs" c="dimmed">
           {/* TODO Betreiber: Kontakt und Impressum ergänzen */}