Navigation: Theme-Schalter und Kontakt-Button bekommen wieder Mausklicks

Der Link-Container der Desktop-Navigation ist "absolute inset-0" (hält die
Links mittig), lag dadurch aber über .navbar-actions und schluckte alle
Mausklicks auf Theme-Schalter und Kontakt-Button ab 1024 px. Der Container
ist jetzt pointer-events-none, die Links pointer-events-auto; Position und
Optik bleiben identisch, die Hover-Pille der Links funktioniert weiter.

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

src/components/ui/resizable-navbar.tsx

@@ -105,7 +105,9 @@ export const NavItems = ({
     <motion.div
       onMouseLeave={() => setHovered(null)}
       className={cn(
-        "absolute inset-0 hidden flex-1 flex-row items-center justify-center space-x-2 text-sm font-medium text-zinc-600 transition duration-200 hover:text-zinc-800 lg:flex lg:space-x-2",
+        // absolute inset-0 hält die Links mittig, liegt aber über Theme-Schalter und Kontakt-Button:
+        // der Container nimmt deshalb keine Mausklicks an (pointer-events-none), nur die Links selbst.
+        "pointer-events-none absolute inset-0 hidden flex-1 flex-row items-center justify-center space-x-2 text-sm font-medium text-zinc-600 transition duration-200 hover:text-zinc-800 lg:flex lg:space-x-2",
         className
       )}
     >
@@ -114,7 +116,7 @@ export const NavItems = ({
         const commonProps = {
           onMouseEnter: () => setHovered(idx),
           onClick: onItemClick,
-          className: "relative px-4 py-2 text-neutral-900 dark:text-neutral-300",
+          className: "pointer-events-auto relative px-4 py-2 text-neutral-900 dark:text-neutral-300",
           key: `link-${idx}`,
         };
         const inner = (

src/test/sofort-paket.test.tsx

@@ -471,3 +471,18 @@ describe("A2 Hintergrundbilder nur im dunklen Modus", () => {
     expect(bild).toHaveClass("hidden", "dark:block");
   });
 });
+
+describe("A3 Navigation: Theme-Schalter, Kontakt und Logo bekommen echte Mausklicks", () => {
+  it("der absolut gelegte Link-Container fängt keine Mausklicks ab, die Links selbst schon", () => {
+    zeige(<Header />);
+    const link = screen.getAllByRole("link", { name: "Leistungen" })[0];
+    const container = link.parentElement as HTMLElement;
+    // bleibt mittig über die ganze Leiste gelegt (Optik unverändert) …
+    expect(container).toHaveClass("absolute", "inset-0", "justify-center");
+    // … lässt Klicks aber zum Theme-Schalter, zum Kontakt-Button und zum Logo durch
+    expect(container).toHaveClass("pointer-events-none");
+    for (const name of ["Über uns", "Leistungen", "Ablauf"]) {
+      expect(screen.getAllByRole("link", { name })[0]).toHaveClass("pointer-events-auto");
+    }
+  });
+});