Add /widerruf and /agb legal pages, fix newsletter modal scroll jank

- New /widerruf page: CMS-driven content via getLegalPage("widerruf"),
  sidebar TOC + "Nachhaltig handeln" callout, TrustRow, and a download
  card for the Muster-Widerrufsformular PDF attachment.
- New /agb page, same legal-page shell pattern as Impressum/Datenschutz.
- lib/payload.ts: getLegalPage now also resolves the optional `attachment`
  media relation (depth=1) for legal pages that have a downloadable file.
- NewsletterModal: replaced the body overflow/position scroll-lock hacks
  (which fought with the sticky Navbar and the global scroll-smooth CSS)
  with a wheel/touch event interceptor that never touches scroll position
  at all, plus `preventScroll: true` on all modal/drawer focus() calls to
  stop the browser's implicit scrollIntoView from nudging the page for
  elements near the sticky navbar's reserved scroll-padding-top zone.
  Same preventScroll fix applied to VersandModal and the Navbar mobile
  drawer for consistency.
- globals.css: scrollbar-gutter: stable, so a modal's overflow:hidden
  lock never causes a scrollbar-width layout shift.
- Divider: stagger its reveal animation slightly (delay 0.3s) behind the
  section above it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/agb/page.tsx

@@ -0,0 +1,74 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Reveal } from "../components/Reveal";
+import { Footer } from "../components/Footer";
+import { TrustRow } from "../components/TrustRow";
+import { RichText, extractHeadings } from "../components/RichText";
+import { SectionTOC } from "../components/SectionTOC";
+import { getLegalPage } from "../lib/payload";
+
+export const metadata: Metadata = {
+  title: "AGB",
+  description: "Allgemeine Geschäftsbedingungen von einfach produktiv.",
+  alternates: { canonical: "/agb" },
+};
+
+export default async function AgbPage() {
+  const page = await getLegalPage("agb");
+  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">AGB</span>
+          </p>
+          <p
+            className="font-semibold text-h-feature text-text-primary"
+            style={{ fontFamily: "var(--font-lora)" }}
+          >
+            Allgemeine Geschäftsbedingungen
+          </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/Datenschutz pages' own callout cards. */}
+            <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)" }}
+              >
+                Unser Anspruch
+              </p>
+              <p className="text-body-sm text-text-muted">
+                Wir entwickeln Produkte, die dich im Alltag wirklich weiterbringen – mit Klarheit,
+                Qualität und einem bewussten Umgang mit Ressourcen.
+              </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>
+
+        <TrustRow />
+      </main>
+      <Footer />
+    </>
+  );
+}