From 7a3ae0ea5380b25098ab13499fad5c6e0af08f11 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sun, 19 Jul 2026 19:57:28 +0000
Subject: [PATCH] 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                   |  74 ++++++++++++++++++
 app/components/Divider.tsx         |   5 +-
 app/components/Footer.tsx          |   9 ++-
 app/components/Navbar.tsx          |  10 +--
 app/components/NewsletterModal.tsx |  50 ++++++++++--
 app/components/VersandModal.tsx    |   6 +-
 app/globals.css                    |   6 ++
 app/lib/payload.ts                 |  13 +++-
 app/widerruf/page.tsx              | 117 +++++++++++++++++++++++++++++
 9 files changed, 270 insertions(+), 20 deletions(-)
 create mode 100644 app/agb/page.tsx
 create mode 100644 app/widerruf/page.tsx

diff --git a/app/agb/page.tsx b/app/agb/page.tsx
new file mode 100644
index 0000000..ce3602f
--- /dev/null
+++ b/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 />
+    </>
+  );
+}
diff --git a/app/components/Divider.tsx b/app/components/Divider.tsx
index 30e63f7..4ebb9bd 100644
--- a/app/components/Divider.tsx
+++ b/app/components/Divider.tsx
@@ -25,7 +25,10 @@ function Arrow() {
 
 export function Divider() {
   return (
-    <Reveal className="flex items-center justify-center flex-wrap gap-x-8 gap-y-3 pb-5 pt-12 px-[var(--layout-padding-x)] w-full bg-bg-base text-center">
+    <Reveal
+      delay={0.3}
+      className="flex items-center justify-center flex-wrap gap-x-8 gap-y-3 pb-5 pt-12 px-[var(--layout-padding-x)] w-full bg-bg-base text-center"
+    >
 
       {/* Word + its trailing icon are grouped into one shrink-0 flex unit
           so flex-wrap only ever breaks BETWEEN pairs, never leaving an
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 2052fed..848a7ad 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -33,12 +33,15 @@ export function Footer() {
           </div>
 
           {/* Social handle — Lora Regular (weight 400) */}
-          <p
-            className="font-normal text-bg-white text-h-small text-center leading-[1.2] whitespace-nowrap shrink-0"
+          <a
+            href="https://www.instagram.com/einfach.produktiv/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-normal text-bg-white text-h-small text-center leading-[1.2] whitespace-nowrap shrink-0 hover:text-brand transition-colors"
             style={{ fontFamily: "var(--font-lora)", fontWeight: 400 }}
           >
             @einfach.produktiv
-          </p>
+          </a>
 
           {/* Legal links — wrap + center below md instead of a rigid row */}
           <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 shrink-0">
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index ae12921..b65d208 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -9,7 +9,7 @@ import { NewsletterModal } from "./NewsletterModal";
 import { useCartFly } from "./CartFly";
 
 const NAVBAR_HEIGHT = 100; // px — matches h-[6.25rem]
-const SCROLL_DURATION = 800; // ms
+const SCROLL_DURATION = 200; // ms
 
 function smoothScrollTo(targetY: number) {
   const startY = window.scrollY;
@@ -224,13 +224,13 @@ export function Navbar() {
     const focusables = panel?.querySelectorAll<HTMLElement>(
       'a[href], button:not([disabled])'
     );
-    focusables?.[0]?.focus();
+    focusables?.[0]?.focus({ preventScroll: true });
 
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
         e.preventDefault();
         setMobileOpen(false);
-        hamburgerRef.current?.focus();
+        hamburgerRef.current?.focus({ preventScroll: true });
         return;
       }
       if (e.key !== "Tab" || !focusables || focusables.length === 0) return;
@@ -238,10 +238,10 @@ export function Navbar() {
       const last = focusables[focusables.length - 1];
       if (e.shiftKey && document.activeElement === first) {
         e.preventDefault();
-        last.focus();
+        last.focus({ preventScroll: true });
       } else if (!e.shiftKey && document.activeElement === last) {
         e.preventDefault();
-        first.focus();
+        first.focus({ preventScroll: true });
       }
     };
 
diff --git a/app/components/NewsletterModal.tsx b/app/components/NewsletterModal.tsx
index 4b54fd1..e9de47f 100644
--- a/app/components/NewsletterModal.tsx
+++ b/app/components/NewsletterModal.tsx
@@ -34,13 +34,40 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
   const dialogRef = useRef<HTMLDivElement>(null);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
 
-  // Body scroll lock while open.
+  // Background scroll lock while open — intercepts and cancels the wheel/
+  // touch input that would cause scrolling, instead of toggling
+  // overflow/position on body or html. Two earlier approaches (plain
+  // overflow:hidden on body; position:fixed with a negative top offset to
+  // compensate) each fixed one symptom while causing another — overflow
+  // alone reset scrollY to 0 for a frame when opened away from the top of
+  // the page (e.g. parked at #ueber-bjoern), and position:fixed took body
+  // out of normal flow, which detached the Navbar's `position: sticky`
+  // from its scrolling container and made it visibly snap. Neither is a
+  // risk here: scrollY, overflow and layout are never touched at all, so
+  // there's nothing that can jump, reflow, or need restoring on close —
+  // the events that would move the page just never get to.
+  // `{ passive: false }` is required for preventDefault() to have any
+  // effect on wheel/touchmove. Events that originate inside the dialog
+  // (which has its own overflow-y-auto) are let through untouched, so the
+  // modal's own content still scrolls normally.
   useEffect(() => {
     if (!open) return;
-    const prevOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
+
+    const isInsideDialog = (target: EventTarget | null) =>
+      target instanceof Node && !!dialogRef.current?.contains(target);
+
+    const onWheel = (e: WheelEvent) => {
+      if (!isInsideDialog(e.target)) e.preventDefault();
+    };
+    const onTouchMove = (e: TouchEvent) => {
+      if (!isInsideDialog(e.target)) e.preventDefault();
+    };
+
+    document.addEventListener("wheel", onWheel, { passive: false });
+    document.addEventListener("touchmove", onTouchMove, { passive: false });
     return () => {
-      document.body.style.overflow = prevOverflow;
+      document.removeEventListener("wheel", onWheel);
+      document.removeEventListener("touchmove", onTouchMove);
     };
   }, [open]);
 
@@ -50,7 +77,16 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
   useEffect(() => {
     if (!open) return;
 
-    closeButtonRef.current?.focus();
+    // preventScroll: true — otherwise the browser's implicit
+    // scrollIntoView on focus() sees this button sitting close to the
+    // viewport's top edge and "corrects" for the global
+    // scroll-padding-top (reserved for the sticky Navbar, see
+    // globals.css) by nudging the whole page upward — pointless here
+    // since the modal is position:fixed and always fully in view
+    // regardless of document scroll, but that nudge is exactly the
+    // "page scrolls up a bit and the modal lands in a weird position"
+    // jank on open.
+    closeButtonRef.current?.focus({ preventScroll: true });
 
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
@@ -67,10 +103,10 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
       const last = focusables[focusables.length - 1];
       if (e.shiftKey && document.activeElement === first) {
         e.preventDefault();
-        last.focus();
+        last.focus({ preventScroll: true });
       } else if (!e.shiftKey && document.activeElement === last) {
         e.preventDefault();
-        first.focus();
+        first.focus({ preventScroll: true });
       }
     };
 
diff --git a/app/components/VersandModal.tsx b/app/components/VersandModal.tsx
index d5bbeae..7ec5d27 100644
--- a/app/components/VersandModal.tsx
+++ b/app/components/VersandModal.tsx
@@ -26,7 +26,7 @@ export function VersandModal({ open, onClose }: { open: boolean; onClose: () =>
   useEffect(() => {
     if (!open) return;
 
-    closeButtonRef.current?.focus();
+    closeButtonRef.current?.focus({ preventScroll: true });
 
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
@@ -43,10 +43,10 @@ export function VersandModal({ open, onClose }: { open: boolean; onClose: () =>
       const last = focusables[focusables.length - 1];
       if (e.shiftKey && document.activeElement === first) {
         e.preventDefault();
-        last.focus();
+        last.focus({ preventScroll: true });
       } else if (!e.shiftKey && document.activeElement === last) {
         e.preventDefault();
-        first.focus();
+        first.focus({ preventScroll: true });
       }
     };
 
diff --git a/app/globals.css b/app/globals.css
index fac1c0f..49611e5 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -141,6 +141,12 @@
 
 html {
   scroll-padding-top: 6.25rem; /* navbar height */
+  /* Reserves the scrollbar's width permanently, so any modal's
+     overflow:hidden scroll lock (NewsletterModal, VersandModal) never
+     removes/re-adds the scrollbar itself — without this, losing the
+     scrollbar on open widens the viewport by its width and every fixed/sticky
+     element (Navbar included) visibly snaps sideways for one frame. */
+  scrollbar-gutter: stable;
 }
 
 body {
diff --git a/app/lib/payload.ts b/app/lib/payload.ts
index 8d88c74..0b21412 100644
--- a/app/lib/payload.ts
+++ b/app/lib/payload.ts
@@ -119,18 +119,21 @@ export type LegalPage = {
   type: LegalPageType;
   title: string;
   content: unknown;
+  attachment: { url: string; title: string } | null;
 };
 
 type PayloadLegalPage = {
   type: LegalPageType;
   title: string;
   content: unknown;
+  attachment: { url: string; title: string } | number | null;
 };
 
 export async function getLegalPage(type: LegalPageType): Promise<LegalPage | null> {
   const params = new URLSearchParams({
     "where[tenant.slug][equals]": TENANT_SLUG,
     "where[type][equals]": type,
+    depth: "1",
     limit: "1",
   });
 
@@ -145,5 +148,13 @@ export async function getLegalPage(type: LegalPageType): Promise<LegalPage | nul
   const data: { docs?: PayloadLegalPage[] } = await res.json();
   const doc = data.docs?.[0];
   if (!doc) return null;
-  return { type: doc.type, title: doc.title, content: doc.content };
+  return {
+    type: doc.type,
+    title: doc.title,
+    content: doc.content,
+    attachment:
+      typeof doc.attachment === "object" && doc.attachment
+        ? { url: doc.attachment.url, title: doc.attachment.title }
+        : null,
+  };
 }
diff --git a/app/widerruf/page.tsx b/app/widerruf/page.tsx
new file mode 100644
index 0000000..311da24
--- /dev/null
+++ b/app/widerruf/page.tsx
@@ -0,0 +1,117 @@
+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: "Widerrufsrecht",
+  description: "Widerrufsbelehrung und Muster-Widerrufsformular für einfach produktiv.",
+  alternates: { canonical: "/widerruf" },
+};
+
+export default async function WiderrufPage() {
+  const page = await getLegalPage("widerruf");
+  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">Widerruf</span>
+          </p>
+          <p
+            className="font-semibold text-h-feature text-text-primary"
+            style={{ fontFamily: "var(--font-lora)" }}
+          >
+            Widerrufsrecht
+          </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/AGB 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)" }}
+              >
+                Nachhaltig handeln
+              </p>
+              <p className="text-body-sm text-text-muted">
+                Wir setzen auf digitale Produkte und vermeiden unnötige Ressourcenverschwendung.
+              </p>
+              <p className="text-body-sm text-text-muted">Für eine bessere Zukunft – für uns alle.</p>
+              <div className="h-[0.125rem] w-8 bg-brand" />
+            </div>
+          </div>
+
+          <div className="w-full lg:flex-1 min-w-0 flex flex-col gap-8">
+            {page ? (
+              <RichText content={page.content} />
+            ) : (
+              <p className="text-body text-text-muted">Inhalte werden gerade aktualisiert.</p>
+            )}
+
+            {page?.attachment && (
+              <a
+                href={page.attachment.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                download
+                className="group flex items-center gap-5 bg-bg-muted hover:bg-bg-white border border-border rounded-md p-6 transition-colors"
+              >
+                <div className="flex size-12 shrink-0 items-center justify-center rounded-sm bg-bg-white border border-border text-brand">
+                  <svg viewBox="0 0 24 24" className="size-6" fill="none" aria-hidden="true">
+                    <path
+                      d="M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Z"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinejoin="round"
+                    />
+                    <path d="M15 2v5h5" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+                    <path
+                      d="M8.5 17.5v-5h1.4c.94 0 1.6.62 1.6 1.5s-.66 1.5-1.6 1.5H8.5m5.2 2v-5h1.2c1.16 0 1.9.9 1.9 2.5s-.74 2.5-1.9 2.5h-1.2Z"
+                      stroke="currentColor"
+                      strokeWidth="1.3"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </div>
+                <div className="flex flex-col gap-0.5 flex-1 min-w-0">
+                  <p className="font-semibold text-body text-text-primary">
+                    {page.attachment.title || "Muster-Widerrufsformular (PDF)"}
+                  </p>
+                  <p className="text-body-sm text-text-muted">Herunterladen</p>
+                </div>
+                <svg
+                  viewBox="0 0 24 24"
+                  className="size-5 shrink-0 text-text-muted group-hover:text-brand group-hover:translate-y-0.5 transition-all"
+                  fill="none"
+                  aria-hidden="true"
+                >
+                  <path d="M12 4v13m0 0-5-5m5 5 5-5M5 21h14" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </a>
+            )}
+          </div>
+        </div>
+
+        <TrustRow />
+      </main>
+      <Footer />
+    </>
+  );
+}