Add /impressum and /datenschutz pages backed by Payload

- lib/payload.ts: getLegalPage(type) alongside the existing
  getBlogPosts/getProducts fetchers
- New RichText component: small dependency-free Lexical JSON → JSX
  renderer for Payload's richText fields (headings get stable
  "section-N" ids for anchor/TOC linking)
- New SectionTOC: generalized from VersandTOC into a reusable
  scroll-spy sidebar driven by any {id, title}[] — Datenschutz needs one
  built from CMS-authored headings, not a hardcoded array. VersandTOC is
  now a thin wrapper around it. Sticky positioning moved from the nav
  itself to each page's sidebar wrapper, so a TOC and an extra card
  (Impressum/Datenschutz both have one) scroll together as one unit
  instead of the card drifting away independently
- TOC clicks set the active item immediately and hold it for ~1s over
  the scroll-spy observer, covering both "target already fully visible,
  nothing to scroll" and "an unrelated section flickers through the
  intersection band mid-scroll"
- Both pages follow the same breadcrumb+H1+TOC-sidebar+content layout
  established for /versand

app/datenschutz/page.tsx

@@ -0,0 +1,72 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Reveal } from "../components/Reveal";
+import { Footer } from "../components/Footer";
+import { RichText, extractHeadings } from "../components/RichText";
+import { SectionTOC } from "../components/SectionTOC";
+import { getLegalPage } from "../lib/payload";
+
+export const metadata: Metadata = {
+  title: "Datenschutzerklärung",
+  description: "Datenschutzerklärung von einfach produktiv — wie wir mit deinen Daten umgehen.",
+  alternates: { canonical: "/datenschutz" },
+};
+
+export default async function DatenschutzPage() {
+  const page = await getLegalPage("datenschutz");
+  const headings = page ? extractHeadings(page.content) : [];
+
+  return (
+    <>
+      <main className="flex flex-col flex-1 bg-bg-base">
+        <Reveal className="flex flex-col gap-3 items-start pb-6 pt-10 px-[var(--layout-padding-x)] w-full">
+          <p className="flex items-center gap-2 text-body-sm text-text-muted">
+            <Link href="/" className="hover:text-brand transition-colors">Startseite</Link>
+            <span>›</span>
+            <span className="text-text-primary">Datenschutz</span>
+          </p>
+          <p
+            className="font-semibold text-h-feature text-text-primary"
+            style={{ fontFamily: "var(--font-lora)" }}
+          >
+            Datenschutzerklärung
+          </p>
+          <p className="text-body text-text-muted">Stand: Juli 2026</p>
+        </Reveal>
+
+        <div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start pb-10 pt-2 px-[var(--layout-padding-x)] w-full">
+          <div className="hidden lg:flex flex-col gap-6 w-[22.5rem] shrink-0 lg:sticky lg:top-32 lg:self-start">
+            <SectionTOC sections={headings} />
+
+            {/* Static, not part of the CMS content — same reasoning as
+                the Impressum page's Nachhaltigkeit card: a bespoke brand
+                callout doesn't belong in the generic LegalPages richText
+                field shared across all 4 legal page types. */}
+            <div className="bg-bg-muted flex flex-col gap-3 items-start p-6 rounded-md w-full">
+              <img alt="" src="/icon-trust-leaf.png" className="size-7 object-contain" />
+              <p
+                className="font-semibold text-body text-text-primary"
+                style={{ fontFamily: "var(--font-lora)" }}
+              >
+                Nachhaltigkeit ist für uns mehr als ein Schlagwort.
+              </p>
+              <p className="text-body-sm text-text-muted">
+                Auch im digitalen Raum gehen wir bewusst und verantwortungsvoll mit Daten um.
+              </p>
+              <div className="h-[0.125rem] w-8 bg-brand" />
+            </div>
+          </div>
+
+          <div className="w-full lg:flex-1 min-w-0">
+            {page ? (
+              <RichText content={page.content} />
+            ) : (
+              <p className="text-body text-text-muted">Inhalte werden gerade aktualisiert.</p>
+            )}
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}