);
}
/* ─────────── Nav ──────────────────────────────────────────────────────── */
function Nav({ route, onNavigate }) {
const [open, setOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 12);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
// Kontakt-only: subtle scroll-driven logo growth.
// Range = one viewport height (so it feels paced the same on mobile and desktop).
// Max scale: 1.30 on desktop, 1.18 on mobile (where header height is the bottleneck).
useEffect(() => {
if (route !== "kontakt") {
document.documentElement.style.setProperty("--logo-scale", "1");
return;
}
const compute = () => {
const y = window.scrollY;
const vh = window.innerHeight || 800;
const isMobile = window.innerWidth < 720;
const maxScale = isMobile ? 1.22 : 1.38;
const range = vh;
const s = 1 + Math.min(y, range) / range * (maxScale - 1);
document.documentElement.style.setProperty("--logo-scale", s.toFixed(4));
};
compute();
window.addEventListener("scroll", compute, { passive: true });
window.addEventListener("resize", compute);
return () => {
window.removeEventListener("scroll", compute);
window.removeEventListener("resize", compute);
document.documentElement.style.setProperty("--logo-scale", "1");
};
}, [route]);
useEffect(() => { setOpen(false); }, [route]);
const links = [
{ id: "standorte", label: "Standorte" },
{ id: "barsbuettel", label: "Barsbüttel", indent: true },
{ id: "ahrensburg", label: "Ahrensburg", indent: true },
{ id: "kontakt", label: "Kontakt" },
];
const activeTop = route === "barsbuettel" || route === "ahrensburg" ? "standorte" : route;
return (
