From 927ce977f2c5627002cc4088ca40a59e7602d302 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sat, 21 Feb 2026 13:26:14 +0100
Subject: [PATCH] chore: release v1.2.6 with Next.js LCP, Hydration and
 Prod-Visibility fixes

---
 .gitignore                                   |   4 +-
 app/[locale]/blog/[slug]/page.tsx            |  10 +-
 components/Header.tsx                        | 591 +++++++------------
 components/Lightbox.tsx                      |   4 +-
 components/Scribble.tsx                      |  91 ++-
 components/home/GallerySection.tsx           |   3 +-
 components/home/Hero.tsx                     | 249 +++-----
 components/record-mode/PlaybackCursor.tsx    |   4 +-
 components/record-mode/RecordModeOverlay.tsx |   4 +-
 components/record-mode/RecordModeVisuals.tsx |   8 +-
 components/team/Gallery.tsx                  |   3 +-
 config/lighthouserc.json                     |  11 +-
 docker-compose.yml                           |   6 +-
 lib/framer-features.ts                       |   2 +
 next-env.d.ts                                |   2 +-
 scripts/pagespeed-sitemap.ts                 |   7 +-
 16 files changed, 372 insertions(+), 627 deletions(-)
 create mode 100644 lib/framer-features.ts

diff --git a/.gitignore b/.gitignore
index 6e743d84..a63033c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,4 +11,6 @@ lighthouserc.cjs
 directus/uploads
 !directus/extensions/
 !directus/schema/
-!directus/migrations/
\ No newline at end of file
+!directus/migrations/
+
+.next-docker
\ No newline at end of file
diff --git a/app/[locale]/blog/[slug]/page.tsx b/app/[locale]/blog/[slug]/page.tsx
index b3a729cb..cdee0661 100644
--- a/app/[locale]/blog/[slug]/page.tsx
+++ b/app/[locale]/blog/[slug]/page.tsx
@@ -96,18 +96,18 @@ export default async function BlogPost({ params }: BlogPostProps) {
               <div className="max-w-4xl">
                 {post.frontmatter.category && (
                   <div className="overflow-hidden mb-6">
-                    <span className="inline-block px-4 py-1.5 bg-accent text-neutral-dark text-xs font-bold uppercase tracking-[0.2em] rounded-sm animate-slight-fade-in-from-bottom">
+                    <span className="inline-block px-4 py-1.5 bg-accent text-neutral-dark text-xs font-bold uppercase tracking-[0.2em] rounded-sm">
                       {post.frontmatter.category}
                     </span>
                   </div>
                 )}
                 <Heading
                   level={1}
-                  className="text-white mb-8 drop-shadow-2xl animate-slight-fade-in-from-bottom [animation-delay:200ms]"
+                  className="text-white mb-8 drop-shadow-2xl"
                 >
                   {post.frontmatter.title}
                 </Heading>
-                <div className="flex flex-wrap items-center gap-6 text-white/80 text-sm md:text-base font-medium animate-slight-fade-in-from-bottom [animation-delay:400ms]">
+                <div className="flex flex-wrap items-center gap-6 text-white/80 text-sm md:text-base font-medium">
                   <time dateTime={post.frontmatter.date}>
                     {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                       year: 'numeric',
@@ -157,7 +157,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
           <div className="sticky-narrative-content">
             {/* Excerpt/Lead paragraph if available */}
             {post.frontmatter.excerpt && (
-              <div className="mb-16 animate-slight-fade-in-from-bottom [animation-delay:600ms]">
+              <div className="mb-16">
                 <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-medium border-l-4 border-primary pl-8 py-2 italic">
                   {post.frontmatter.excerpt}
                 </p>
@@ -165,7 +165,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
             )}
 
             {/* Main content with enhanced styling */}
-            <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-2xl prose-img:shadow-2xl prose-blockquote:border-primary prose-blockquote:bg-primary/5 prose-blockquote:rounded-r-2xl prose-strong:text-primary animate-slight-fade-in-from-bottom [animation-delay:800ms]">
+            <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-2xl prose-img:shadow-2xl prose-blockquote:border-primary prose-blockquote:bg-primary/5 prose-blockquote:rounded-r-2xl prose-strong:text-primary">
               <MDXRemote source={post.content} components={mdxComponents} />
             </div>
 
diff --git a/components/Header.tsx b/components/Header.tsx
index c0a6e913..2e3c6f03 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -2,7 +2,6 @@
 
 import Link from 'next/link';
 import Image from 'next/image';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useTranslations } from 'next-intl';
 import { usePathname } from 'next/navigation';
 import { Button } from './ui';
@@ -18,7 +17,6 @@ export default function Header() {
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const mobileMenuRef = useRef<HTMLDivElement>(null);
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
 
   // Extract locale from pathname
   const currentLocale = pathname.split('/')[1] || 'en';
@@ -35,7 +33,6 @@ export default function Header() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
-  // Prevent scroll when mobile menu is open
   // Prevent scroll when mobile menu is open and handle focus trap
   useEffect(() => {
     if (isMobileMenuOpen) {
@@ -102,7 +99,7 @@ export default function Header() {
   ];
 
   const headerClass = cn(
-    'fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu',
+    'fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu animate-in fade-in slide-in-from-top-12 fill-mode-both',
     {
       'bg-transparent py-4 md:py-8': isHomePage && !isScrolled && !isMobileMenuOpen,
       'bg-primary py-3 md:py-4 shadow-2xl': !isHomePage || isScrolled || isMobileMenuOpen,
@@ -114,263 +111,41 @@ export default function Header() {
 
   return (
     <>
-      <LazyMotion strict features={domAnimation}>
-        <m.header
-          className={headerClass}
-          initial={{ y: -100, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.8, ease: 'easeOut' }}
-        >
-          <div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
-            <m.div
-              className="flex-shrink-0 group touch-target"
-              initial={{ scale: 0.8, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              transition={{ duration: 0.6, ease: 'easeOut', delay: 0.1 }}
+      <header className={headerClass} style={{ animationDuration: '800ms' }}>
+        <div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
+          <div
+            className="flex-shrink-0 group touch-target animate-in fade-in zoom-in-90 fill-mode-both"
+            style={{ animationDuration: '600ms', animationDelay: '100ms' }}
+          >
+            <Link
+              href={`/${currentLocale}`}
+              onClick={() =>
+                trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                  target: 'home_logo',
+                  location: 'header',
+                })
+              }
             >
-              <Link
-                href={`/${currentLocale}`}
-                onClick={() =>
-                  trackEvent(AnalyticsEvents.BUTTON_CLICK, {
-                    target: 'home_logo',
-                    location: 'header',
-                  })
-                }
-              >
-                <Image
-                  src={logoSrc}
-                  alt={t('home')}
-                  width={120}
-                  height={120}
-                  className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
-                  priority
-                />
-              </Link>
-            </m.div>
-
-            <m.div
-              className="flex items-center gap-4 md:gap-12"
-              initial="hidden"
-              animate="visible"
-              variants={{
-                visible: {
-                  transition: {
-                    staggerChildren: 0.08,
-                    delayChildren: 0.3,
-                  },
-                },
-              }}
-            >
-              <m.nav className="hidden lg:flex items-center space-x-10" variants={navVariants}>
-                {menuItems.map((item, _idx) => (
-                  <m.div key={item.href} variants={navLinkVariants}>
-                    <Link
-                      href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
-                      onClick={() => {
-                        setIsMobileMenuOpen(false);
-                        trackEvent(AnalyticsEvents.LINK_CLICK, {
-                          label: item.label,
-                          href: item.href,
-                          location: 'header_nav',
-                        });
-                      }}
-                      className={cn(
-                        textColorClass,
-                        'hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5',
-                      )}
-                    >
-                      {item.label}
-                      <span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-500 group-hover:w-full rounded-full shadow-[0_0_12px_rgba(130,237,32,0.6)]" />
-                    </Link>
-                  </m.div>
-                ))}
-              </m.nav>
-
-              <m.div
-                className={cn('hidden lg:flex items-center space-x-8', textColorClass)}
-                variants={headerRightVariants}
-              >
-                <m.div
-                  className="flex items-center space-x-4 text-xs md:text-sm font-extrabold tracking-widest uppercase"
-                  initial={{ opacity: 0, x: 20 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ duration: 0.5, delay: 0.6 }}
-                >
-                  <m.div
-                    initial={{ opacity: 0, scale: 0.8 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    transition={{ duration: 0.4, delay: 0.65 }}
-                  >
-                    <Link
-                      href={getPathForLocale('en')}
-                      onClick={() =>
-                        trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
-                          type: 'language',
-                          from: currentLocale,
-                          to: 'en',
-                          location: 'header',
-                        })
-                      }
-                      className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
-                    >
-                      EN
-                    </Link>
-                  </m.div>
-                  <m.div
-                    className="w-px h-4 bg-current opacity-20"
-                    initial={{ scaleY: 0 }}
-                    animate={{ scaleY: 1 }}
-                    transition={{ duration: 0.4, delay: 0.7 }}
-                  />
-                  <m.div
-                    initial={{ opacity: 0, scale: 0.8 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    transition={{ duration: 0.4, delay: 0.75 }}
-                  >
-                    <Link
-                      href={getPathForLocale('de')}
-                      onClick={() =>
-                        trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
-                          type: 'language',
-                          from: currentLocale,
-                          to: 'de',
-                          location: 'header',
-                        })
-                      }
-                      className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
-                    >
-                      DE
-                    </Link>
-                  </m.div>
-                </m.div>
-
-                <m.div
-                  initial={{ scale: 0.9, opacity: 0 }}
-                  animate={{ scale: 1, opacity: 1 }}
-                  transition={{ duration: 0.6, type: 'spring', stiffness: 400, delay: 0.7 }}
-                >
-                  <Button
-                    href={`/${currentLocale}/contact`}
-                    variant="white"
-                    size="md"
-                    className="px-8 shadow-xl"
-                    onClick={() =>
-                      trackEvent(AnalyticsEvents.BUTTON_CLICK, {
-                        label: t('contact'),
-                        location: 'header_cta',
-                      })
-                    }
-                  >
-                    {t('contact')}
-                  </Button>
-                </m.div>
-              </m.div>
-
-              {/* Mobile Menu Button */}
-              <m.button
-                className={cn(
-                  'lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-50',
-                  textColorClass,
-                )}
-                aria-label={t('toggleMenu')}
-                aria-expanded={isMobileMenuOpen}
-                aria-controls="mobile-menu"
-                initial={{ scale: 0.8, opacity: 0, rotate: -180 }}
-                animate={{ scale: 1, opacity: 1, rotate: 0 }}
-                transition={{
-                  duration: 0.6,
-                  type: 'spring',
-                  stiffness: 300,
-                  damping: 20,
-                  delay: 0.5,
-                }}
-                onClick={() => {
-                  const newState = !isMobileMenuOpen;
-                  setIsMobileMenuOpen(newState);
-                  trackEvent(AnalyticsEvents.BUTTON_CLICK, {
-                    type: 'mobile_menu',
-                    action: newState ? 'open' : 'close',
-                  });
-                }}
-              >
-                <m.svg
-                  className="w-7 h-7"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  initial={{ scale: 0 }}
-                  animate={{ scale: 1 }}
-                  transition={{ duration: 0.3, delay: 0.6 }}
-                >
-                  {isMobileMenuOpen ? (
-                    <m.path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M6 18L18 6M6 6l12 12"
-                      initial={{ pathLength: 0 }}
-                      animate={{ pathLength: 1 }}
-                      transition={{ duration: 0.4, delay: 0.7 }}
-                    />
-                  ) : (
-                    <m.path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M4 6h16M4 12h16M4 18h16"
-                      initial={{ pathLength: 0 }}
-                      animate={{ pathLength: 1 }}
-                      transition={{ duration: 0.4, delay: 0.7 }}
-                    />
-                  )}
-                </m.svg>
-              </m.button>
-            </m.div>
+              <Image
+                src={logoSrc}
+                alt={t('home')}
+                width={120}
+                height={120}
+                className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
+                priority
+              />
+            </Link>
           </div>
 
-          {/* Mobile Menu Overlay */}
           <div
-            className={cn(
-              'fixed inset-0 bg-primary z-40 lg:hidden transition-all duration-500 ease-in-out flex flex-col',
-              isMobileMenuOpen
-                ? 'opacity-100 translate-y-0'
-                : 'opacity-0 -translate-y-full pointer-events-none',
-            )}
-            id="mobile-menu"
-            role="dialog"
-            aria-modal="true"
-            aria-label={t('menu')}
-            ref={mobileMenuRef}
+            className="flex items-center gap-4 md:gap-12"
           >
-            <m.nav
-              className="flex-grow flex flex-col justify-center items-center p-8 space-y-8"
-              initial="closed"
-              animate={isMobileMenuOpen ? 'open' : 'closed'}
-              variants={{
-                open: {
-                  transition: {
-                    staggerChildren: 0.1,
-                    delayChildren: 0.2,
-                  },
-                },
-              }}
-            >
+            <nav className="hidden lg:flex items-center space-x-10">
               {menuItems.map((item, idx) => (
-                <m.div
+                <div
                   key={item.href}
-                  variants={{
-                    closed: { opacity: 0, y: 50, scale: 0.9 },
-                    open: {
-                      opacity: 1,
-                      y: 0,
-                      scale: 1,
-                      transition: {
-                        duration: 0.6,
-                        ease: 'easeOut',
-                        delay: idx * 0.08,
-                      },
-                    },
-                  }}
+                  className="animate-in fade-in slide-in-from-bottom-4 fill-mode-both"
+                  style={{ animationDuration: '500ms', animationDelay: `${150 + idx * 80}ms` }}
                 >
                   <Link
                     href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
@@ -379,128 +154,214 @@ export default function Header() {
                       trackEvent(AnalyticsEvents.LINK_CLICK, {
                         label: item.label,
                         href: item.href,
-                        location: 'mobile_menu',
+                        location: 'header_nav',
                       });
                     }}
-                    className="text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4"
+                    className={cn(
+                      textColorClass,
+                      'hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5',
+                    )}
                   >
                     {item.label}
+                    <span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-500 group-hover:w-full rounded-full shadow-[0_0_12px_rgba(130,237,32,0.6)]" />
                   </Link>
-                </m.div>
+                </div>
               ))}
+            </nav>
 
-              <m.div
-                className="pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8"
-                initial={{ opacity: 0, y: 30 }}
-                animate={isMobileMenuOpen ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-                transition={{ duration: 0.5, delay: 0.8 }}
+            <div
+              className={cn('hidden lg:flex items-center space-x-8 animate-in fade-in slide-in-from-right-8 fill-mode-both', textColorClass)}
+              style={{ animationDuration: '600ms', animationDelay: '300ms' }}
+            >
+              <div
+                className="flex items-center space-x-4 text-xs md:text-sm font-extrabold tracking-widest uppercase animate-in fade-in slide-in-from-left-4 fill-mode-both"
+                style={{ animationDuration: '500ms', animationDelay: '600ms' }}
               >
-                <m.div
-                  className="flex items-center space-x-8 text-lg md:text-xl font-extrabold tracking-widest uppercase text-white"
-                  initial={{ opacity: 0, scale: 0.8 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  transition={{ duration: 0.4, delay: 0.9 }}
-                >
-                  <m.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ duration: 0.3, delay: 1.0 }}
+                <div>
+                  <Link
+                    href={getPathForLocale('en')}
+                    onClick={() =>
+                      trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
+                        type: 'language',
+                        from: currentLocale,
+                        to: 'en',
+                        location: 'header',
+                      })
+                    }
+                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
                   >
-                    <Link
-                      href={getPathForLocale('en')}
-                      className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
-                    >
-                      EN
-                    </Link>
-                  </m.div>
-                  <m.div
-                    className="w-px h-6 bg-white/20"
-                    initial={{ scaleX: 0 }}
-                    animate={{ scaleX: 1 }}
-                    transition={{ duration: 0.4, delay: 1.05 }}
+                    EN
+                  </Link>
+                </div>
+                <div className="w-px h-4 bg-current opacity-20" />
+                <div>
+                  <Link
+                    href={getPathForLocale('de')}
+                    onClick={() =>
+                      trackEvent(AnalyticsEvents.TOGGLE_SWITCH, {
+                        type: 'language',
+                        from: currentLocale,
+                        to: 'de',
+                        location: 'header',
+                      })
+                    }
+                    className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
+                  >
+                    DE
+                  </Link>
+                </div>
+              </div>
+
+              <div
+                className="animate-in fade-in zoom-in-95 fill-mode-both"
+                style={{ animationDuration: '600ms', animationDelay: '700ms' }}
+              >
+                <Button
+                  href={`/${currentLocale}/contact`}
+                  variant="white"
+                  size="md"
+                  className="px-8 shadow-xl hover:scale-105 transition-transform"
+                  onClick={() =>
+                    trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                      label: t('contact'),
+                      location: 'header_cta',
+                    })
+                  }
+                >
+                  {t('contact')}
+                </Button>
+              </div>
+            </div>
+
+            {/* Mobile Menu Button */}
+            <button
+              className={cn(
+                'lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-50 transition-all duration-300',
+                textColorClass,
+                isMobileMenuOpen ? 'rotate-90 scale-110' : 'rotate-0 scale-100'
+              )}
+              aria-label={t('toggleMenu')}
+              aria-expanded={isMobileMenuOpen}
+              aria-controls="mobile-menu"
+              onClick={() => {
+                const newState = !isMobileMenuOpen;
+                setIsMobileMenuOpen(newState);
+                trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                  type: 'mobile_menu',
+                  action: newState ? 'open' : 'close',
+                });
+              }}
+            >
+              <svg
+                className="w-7 h-7 transition-transform duration-300"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                {isMobileMenuOpen ? (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
                   />
-                  <m.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ duration: 0.3, delay: 1.1 }}
-                  >
-                    <Link
-                      href={getPathForLocale('de')}
-                      className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
-                    >
-                      DE
-                    </Link>
-                  </m.div>
-                </m.div>
-
-                <m.div
-                  initial={{ scale: 0.9, opacity: 0, y: 20 }}
-                  animate={{ scale: 1, opacity: 1, y: 0 }}
-                  transition={{ type: 'spring', stiffness: 400, damping: 20, delay: 1.2 }}
-                >
-                  <Button
-                    href={`/${currentLocale}/contact`}
-                    variant="accent"
-                    size="lg"
-                    className="w-full max-w-xs py-6 text-lg md:text-xl shadow-2xl"
-                  >
-                    {t('contact')}
-                  </Button>
-                </m.div>
-              </m.div>
-
-              {/* Bottom Branding */}
-              <m.div
-                className="p-12 flex justify-center opacity-20"
-                initial={{ opacity: 0, scale: 0.8 }}
-                animate={isMobileMenuOpen ? { opacity: 0.2, scale: 1 } : { opacity: 0, scale: 0.8 }}
-                transition={{ duration: 0.5, delay: 1.4 }}
-              >
-                <m.div
-                  initial={{ scale: 0.5 }}
-                  animate={{ scale: 1 }}
-                  transition={{ type: 'spring', stiffness: 300, delay: 1.5 }}
-                >
-                  <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
-                </m.div>
-              </m.div>
-            </m.nav>
+                ) : (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 6h16M4 12h16M4 18h16"
+                  />
+                )}
+              </svg>
+            </button>
           </div>
-        </m.header>
-      </LazyMotion>
+        </div>
+
+        {/* Mobile Menu Overlay */}
+        <div
+          className={cn(
+            'fixed inset-0 bg-primary z-40 lg:hidden transition-all duration-500 ease-in-out flex flex-col',
+            isMobileMenuOpen
+              ? 'opacity-100 translate-y-0'
+              : 'opacity-0 -translate-y-full pointer-events-none',
+          )}
+          id="mobile-menu"
+          role="dialog"
+          aria-modal="true"
+          aria-label={t('menu')}
+          ref={mobileMenuRef}
+        >
+          <nav className="flex-grow flex flex-col justify-center items-center p-8 space-y-8">
+            {menuItems.map((item, idx) => (
+              <div
+                key={item.href}
+                className={cn('transition-all duration-500 transform', isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8')}
+                style={{ transitionDelay: `${isMobileMenuOpen ? 200 + idx * 80 : 0}ms` }}
+              >
+                <Link
+                  href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                  onClick={() => {
+                    setIsMobileMenuOpen(false);
+                    trackEvent(AnalyticsEvents.LINK_CLICK, {
+                      label: item.label,
+                      href: item.href,
+                      location: 'mobile_menu',
+                    });
+                  }}
+                  className="text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4"
+                >
+                  {item.label}
+                </Link>
+              </div>
+            ))}
+
+            <div
+              className={cn('pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8 transition-all duration-500', isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8')}
+              style={{ transitionDelay: isMobileMenuOpen ? '600ms' : '0ms' }}
+            >
+              <div className="flex items-center space-x-8 text-lg md:text-xl font-extrabold tracking-widest uppercase text-white">
+                <div>
+                  <Link
+                    href={getPathForLocale('en')}
+                    className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
+                  >
+                    EN
+                  </Link>
+                </div>
+                <div className="w-px h-6 bg-white/20" />
+                <div>
+                  <Link
+                    href={getPathForLocale('de')}
+                    className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
+                  >
+                    DE
+                  </Link>
+                </div>
+              </div>
+
+              <div className="w-full max-w-xs">
+                <Button
+                  href={`/${currentLocale}/contact`}
+                  variant="accent"
+                  size="lg"
+                  className="w-full py-6 text-lg md:text-xl shadow-2xl hover:scale-105 transition-transform"
+                >
+                  {t('contact')}
+                </Button>
+              </div>
+            </div>
+
+            {/* Bottom Branding */}
+            <div
+              className={cn('p-12 flex justify-center transition-all duration-700', isMobileMenuOpen ? 'opacity-20 scale-100' : 'opacity-0 scale-75')}
+              style={{ transitionDelay: isMobileMenuOpen ? '800ms' : '0ms' }}
+            >
+              <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
+            </div>
+          </nav>
+        </div>
+      </header>
     </>
   );
 }
-
-const navVariants = {
-  hidden: { opacity: 0 },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.06,
-      delayChildren: 0.1,
-    },
-  },
-} as const;
-
-const navLinkVariants = {
-  hidden: { opacity: 0, y: 20, scale: 0.9 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    transition: {
-      duration: 0.5,
-      ease: 'easeOut',
-    },
-  },
-} as const;
-
-const headerRightVariants = {
-  hidden: { opacity: 0, x: 30 },
-  visible: {
-    opacity: 1,
-    x: 0,
-    transition: { duration: 0.6, ease: 'easeOut' },
-  },
-} as const;
diff --git a/components/Lightbox.tsx b/components/Lightbox.tsx
index 15757019..e168c75e 100644
--- a/components/Lightbox.tsx
+++ b/components/Lightbox.tsx
@@ -3,7 +3,7 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import Image from 'next/image';
 import { createPortal } from 'react-dom';
-import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
+import { m, LazyMotion, AnimatePresence } from 'framer-motion';
 import { useRouter, useSearchParams, usePathname } from 'next/navigation';
 
 interface LightboxProps {
@@ -139,7 +139,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
   if (!mounted) return null;
 
   return createPortal(
-    <LazyMotion strict features={domAnimation}>
+    <LazyMotion strict features={() => import('@/lib/framer-features').then(res => res.default)}>
       <AnimatePresence>
         {isOpen && (
           <div
diff --git a/components/Scribble.tsx b/components/Scribble.tsx
index e46d08e5..321099c4 100644
--- a/components/Scribble.tsx
+++ b/components/Scribble.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
 import { cn } from '@/components/ui';
 
 interface ScribbleProps {
@@ -11,67 +10,49 @@ interface ScribbleProps {
 }
 
 export default function Scribble({ variant, className, color = '#82ed20' }: ScribbleProps) {
-  const pathVariants: Variants = {
-    hidden: { pathLength: 0, opacity: 0 },
-    visible: {
-      pathLength: 1,
-      opacity: 1,
-      transition: {
-        duration: 1.8,
-        ease: 'easeInOut',
-      },
-    },
-  };
-
   if (variant === 'circle') {
     return (
-      <LazyMotion strict features={domAnimation}>
-        <svg
-          className={cn('absolute pointer-events-none', className)}
-          aria-hidden="true"
-          viewBox="0 0 800 350"
-          preserveAspectRatio="none"
-        >
-          <m.path
-            variants={pathVariants}
-            initial="hidden"
-            whileInView="visible"
-            viewport={{ once: true }}
-            transform="matrix(0.9791300296783447,0,0,0.9791300296783447,400,179)"
-            strokeLinejoin="miter"
-            fillOpacity="0"
-            strokeMiterlimit="4"
-            stroke={color}
-            strokeOpacity="1"
-            strokeWidth="20"
-            d=" M253,-161 C253,-161 -284.78900146484375,-201.4600067138672 -376,-21 C-469,163 67.62300109863281,174.2100067138672 256,121 C564,34 250.82899475097656,-141.6929931640625 19.10700035095215,-116.93599700927734"
-          />
-        </svg>
-      </LazyMotion>
+      <svg
+        className={cn('absolute pointer-events-none', className)}
+        aria-hidden="true"
+        viewBox="0 0 800 350"
+        preserveAspectRatio="none"
+      >
+        <path
+          className="animate-draw-stroke"
+          pathLength="1"
+          style={{ strokeDasharray: 1, strokeDashoffset: 1, animation: 'draw-stroke 1.8s ease-in-out 0.5s forwards' }}
+          transform="matrix(0.9791300296783447,0,0,0.9791300296783447,400,179)"
+          strokeLinejoin="miter"
+          fillOpacity="0"
+          strokeMiterlimit="4"
+          stroke={color}
+          strokeOpacity="1"
+          strokeWidth="20"
+          d=" M253,-161 C253,-161 -284.78900146484375,-201.4600067138672 -376,-21 C-469,163 67.62300109863281,174.2100067138672 256,121 C564,34 250.82899475097656,-141.6929931640625 19.10700035095215,-116.93599700927734"
+        />
+      </svg>
     );
   }
 
   if (variant === 'underline') {
     return (
-      <LazyMotion strict features={domAnimation}>
-        <svg
-          className={cn('absolute pointer-events-none', className)}
-          aria-hidden="true"
-          viewBox="-400 -55 730 60"
-          preserveAspectRatio="none"
-        >
-          <m.path
-            variants={pathVariants}
-            initial="hidden"
-            whileInView="visible"
-            viewport={{ once: true }}
-            d="m -383.25 -6 c 55.25 -22 130.75 -33.5 293.25 -38 c 54.5 -0.5 195 -2.5 401 15"
-            stroke={color}
-            strokeWidth="20"
-            fill="none"
-          />
-        </svg>
-      </LazyMotion>
+      <svg
+        className={cn('absolute pointer-events-none', className)}
+        aria-hidden="true"
+        viewBox="-400 -55 730 60"
+        preserveAspectRatio="none"
+      >
+        <path
+          className="animate-draw-stroke"
+          pathLength="1"
+          style={{ strokeDasharray: 1, strokeDashoffset: 1, animation: 'draw-stroke 1.8s ease-in-out 0.5s forwards' }}
+          d="m -383.25 -6 c 55.25 -22 130.75 -33.5 293.25 -38 c 54.5 -0.5 195 -2.5 401 15"
+          stroke={color}
+          strokeWidth="20"
+          fill="none"
+        />
+      </svg>
     );
   }
 
diff --git a/components/home/GallerySection.tsx b/components/home/GallerySection.tsx
index f13b3602..ee2c6551 100644
--- a/components/home/GallerySection.tsx
+++ b/components/home/GallerySection.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import { Section, Container, Heading } from '../../components/ui';
-import Lightbox from '../Lightbox';
+import dynamic from 'next/dynamic';
+const Lightbox = dynamic(() => import('../Lightbox'), { ssr: false });
 import { useSearchParams } from 'next/navigation';
 
 export default function GallerySection() {
diff --git a/components/home/Hero.tsx b/components/home/Hero.tsx
index e8d5b5fe..88035822 100644
--- a/components/home/Hero.tsx
+++ b/components/home/Hero.tsx
@@ -2,7 +2,6 @@
 
 import Scribble from '@/components/Scribble';
 import { Button, Container, Heading, Section } from '@/components/ui';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useTranslations, useLocale } from 'next-intl';
 import dynamic from 'next/dynamic';
 import { useAnalytics } from '../analytics/useAnalytics';
@@ -16,185 +15,79 @@ export default function Hero() {
 
   return (
     <Section className="relative min-h-[85vh] md:h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
-      <LazyMotion strict features={domAnimation}>
-        <Container className="relative z-10 text-center md:text-left text-white w-full order-2 md:order-none">
-          <m.div
-            className="max-w-5xl mx-auto md:mx-0"
-            initial="hidden"
-            animate="visible"
-            variants={containerVariants}
-          >
-            <m.div variants={headingVariants}>
-              <Heading
-                level={1}
-                className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]"
-              >
-                {t.rich('title', {
-                  green: (chunks) => (
-                    <span className="relative inline-block">
-                      <m.span
-                        className="relative z-10 text-accent italic"
-                        variants={accentVariants}
-                      >
-                        {chunks}
-                      </m.span>
-                      <m.div
-                        variants={scribbleVariants}
-                        className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10"
-                      >
-                        <Scribble variant="circle" />
-                      </m.div>
-                    </span>
-                  ),
-                })}
-              </Heading>
-            </m.div>
-            <m.div variants={subtitleVariants}>
-              <p className="text-lg md:text-xl text-white/90 leading-relaxed max-w-2xl mb-10 md:mb-12">
-                {t('subtitle')}
-              </p>
-            </m.div>
-            <m.div
-              className="flex flex-col sm:flex-row justify-center md:justify-start gap-4 md:gap-6"
-              variants={buttonContainerVariants}
+      <Container className="relative z-10 text-center md:text-left text-white w-full order-2 md:order-none">
+        <div className="max-w-5xl mx-auto md:mx-0">
+          <div className="animate-in fade-in slide-in-from-bottom-8 duration-700 ease-out fill-mode-both" style={{ animationDelay: '100ms' }}>
+            <Heading
+              level={1}
+              className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]"
             >
-              <m.div variants={buttonVariants}>
-                <Button
-                  href="/contact"
-                  variant="accent"
-                  size="lg"
-                  className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg"
-                  onClick={() =>
-                    trackEvent(AnalyticsEvents.BUTTON_CLICK, {
-                      label: t('cta'),
-                      location: 'home_hero_primary',
-                    })
-                  }
-                >
-                  {t('cta')}
-                  <span className="transition-transform group-hover/btn:translate-x-1">&rarr;</span>
-                </Button>
-              </m.div>
-              <m.div variants={buttonVariants}>
-                <Button
-                  href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
-                  variant="white"
-                  size="lg"
-                  className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none"
-                  onClick={() =>
-                    trackEvent(AnalyticsEvents.BUTTON_CLICK, {
-                      label: t('exploreProducts'),
-                      location: 'home_hero_secondary',
-                    })
-                  }
-                >
-                  {t('exploreProducts')}
-                </Button>
-              </m.div>
-            </m.div>
-          </m.div>
-        </Container>
-
-        <m.div
-          className="relative md:absolute inset-0 z-0 w-full h-[40vh] md:h-full order-1 md:order-none mb-[-80px] md:mb-0 mt-[80px] md:mt-0 overflow-visible pointer-events-none"
-          initial={{ opacity: 0, scale: 0.95, filter: 'blur(20px)' }}
-          animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
-          transition={{ duration: 2.2, ease: 'easeOut', delay: 0.05 }}
-        >
-          <HeroIllustration />
-        </m.div>
-
-        <m.div
-          className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block"
-          initial={{ opacity: 0, y: 16 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1, ease: 'easeOut', delay: 3 }}
-        >
-          <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
-            <m.div
-              className="w-1 h-2 bg-white rounded-full"
-              animate={{ y: [0, -10, 0] }}
-              transition={{
-                duration: 1.5,
-                repeat: Infinity,
-                ease: 'easeInOut',
-              }}
-            />
+              {t.rich('title', {
+                green: (chunks) => (
+                  <span className="relative inline-block">
+                    <span className="relative z-10 text-accent italic animate-in fade-in zoom-in-95 duration-700 ease-out fill-mode-both inline-block" style={{ animationDelay: '300ms' }}>
+                      {chunks}
+                    </span>
+                    <div className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both" style={{ animationDelay: '500ms' }}>
+                      <Scribble variant="circle" />
+                    </div>
+                  </span>
+                ),
+              })}
+            </Heading>
           </div>
-        </m.div>
-      </LazyMotion>
+          <div className="animate-in fade-in slide-in-from-bottom-4 duration-700 ease-out fill-mode-both" style={{ animationDelay: '400ms' }}>
+            <p className="text-lg md:text-xl text-white/90 leading-relaxed max-w-2xl mb-10 md:mb-12">
+              {t('subtitle')}
+            </p>
+          </div>
+          <div className="flex flex-col sm:flex-row justify-center md:justify-start gap-4 md:gap-6 animate-in fade-in slide-in-from-bottom-6 duration-700 ease-out fill-mode-both" style={{ animationDelay: '600ms' }}>
+            <div>
+              <Button
+                href="/contact"
+                variant="accent"
+                size="lg"
+                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg hover:scale-105 transition-transform"
+                onClick={() =>
+                  trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                    label: t('cta'),
+                    location: 'home_hero_primary',
+                  })
+                }
+              >
+                {t('cta')}
+                <span className="transition-transform group-hover/btn:translate-x-1">&rarr;</span>
+              </Button>
+            </div>
+            <div>
+              <Button
+                href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
+                variant="white"
+                size="lg"
+                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none hover:scale-105 transition-transform"
+                onClick={() =>
+                  trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                    label: t('exploreProducts'),
+                    location: 'home_hero_secondary',
+                  })
+                }
+              >
+                {t('exploreProducts')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Container>
+
+      <div className="relative md:absolute inset-0 z-0 w-full h-[40vh] md:h-full order-1 md:order-none mb-[-80px] md:mb-0 mt-[80px] md:mt-0 overflow-visible pointer-events-none animate-in fade-in zoom-in-95 duration-1000 ease-out fill-mode-both" style={{ animationDelay: '100ms' }}>
+        <HeroIllustration />
+      </div>
+
+      <div className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block animate-in fade-in slide-in-from-bottom-4 duration-1000 ease-out fill-mode-both" style={{ animationDelay: '2000ms' }}>
+        <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
+          <div className="w-1 h-2 bg-white rounded-full animate-bounce" />
+        </div>
+      </div>
     </Section>
   );
 }
-
-const containerVariants = {
-  hidden: { opacity: 1 },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.1,
-      delayChildren: 0.1,
-    },
-  },
-} as const;
-
-const headingVariants = {
-  hidden: { opacity: 1, y: 10, scale: 0.98 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    transition: { duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] },
-  },
-} as const;
-
-const accentVariants = {
-  hidden: { opacity: 0, scale: 0.9, rotate: -5 },
-  visible: {
-    opacity: 1,
-    scale: 1,
-    rotate: 0,
-    transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] },
-  },
-} as const;
-
-const scribbleVariants = {
-  hidden: { opacity: 0, scale: 0, rotate: 180 },
-  visible: {
-    opacity: 1,
-    scale: 1,
-    rotate: 0,
-    transition: { duration: 1, type: 'spring', stiffness: 300, damping: 20 },
-  },
-} as const;
-
-const subtitleVariants = {
-  hidden: { opacity: 1, y: 20, scale: 0.98 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    transition: { duration: 0.6, ease: [0.25, 0.46, 0.45, 0.94], delay: 0.1 },
-  },
-} as const;
-
-const buttonContainerVariants = {
-  hidden: { opacity: 1 },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.15,
-      delayChildren: 0.4,
-    },
-  },
-} as const;
-
-const buttonVariants = {
-  hidden: { opacity: 1, y: 30, scale: 0.9 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    transition: { type: 'spring', stiffness: 400, damping: 20 },
-  },
-} as const;
diff --git a/components/record-mode/PlaybackCursor.tsx b/components/record-mode/PlaybackCursor.tsx
index b3b21d60..6b7f603f 100644
--- a/components/record-mode/PlaybackCursor.tsx
+++ b/components/record-mode/PlaybackCursor.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
+import { m, LazyMotion, AnimatePresence } from 'framer-motion';
 import { useRecordMode } from './RecordModeContext';
 
 export function PlaybackCursor() {
@@ -24,7 +24,7 @@ export function PlaybackCursor() {
   if (!isPlaying) return null;
 
   return (
-    <LazyMotion strict features={domAnimation}>
+    <LazyMotion strict features={() => import('@/lib/framer-features').then(res => res.default)}>
       <m.div
         className="fixed z-[10000] pointer-events-none"
         animate={{
diff --git a/components/record-mode/RecordModeOverlay.tsx b/components/record-mode/RecordModeOverlay.tsx
index 619d680a..bec660f4 100644
--- a/components/record-mode/RecordModeOverlay.tsx
+++ b/components/record-mode/RecordModeOverlay.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { useRecordMode } from './RecordModeContext';
-import { Reorder, AnimatePresence, LazyMotion, domAnimation } from 'framer-motion';
+import { Reorder, AnimatePresence, LazyMotion } from 'framer-motion';
 import {
   Play,
   Square,
@@ -146,7 +146,7 @@ export function RecordModeOverlay() {
   }
 
   return (
-    <LazyMotion strict features={domAnimation}>
+    <LazyMotion strict features={() => import('@/lib/framer-features').then(res => res.default)}>
       <div className="fixed inset-0 z-[9998] pointer-events-none font-sans">
         {/* 1. Global Toolbar - Slim Industrial Bar */}
         <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[10000] pointer-events-auto">
diff --git a/components/record-mode/RecordModeVisuals.tsx b/components/record-mode/RecordModeVisuals.tsx
index a2174d5b..9378ed95 100644
--- a/components/record-mode/RecordModeVisuals.tsx
+++ b/components/record-mode/RecordModeVisuals.tsx
@@ -10,7 +10,6 @@ export function RecordModeVisuals({ children }: { children: React.ReactNode }) {
   const [iframeUrl, setIframeUrl] = React.useState<string | null>(null);
 
   React.useEffect(() => {
-    setMounted(true);
     // Explicit non-magical detection
     const embedded =
       window.location.search.includes('embedded=true') || window.name === 'record-mode-iframe';
@@ -21,13 +20,12 @@ export function RecordModeVisuals({ children }: { children: React.ReactNode }) {
       url.searchParams.set('embedded', 'true');
       setIframeUrl(url.toString());
     }
-  }, [isEmbedded]);
-
-  // Hydration Guard: Match server on first render
-  if (!mounted) return <>{children}</>;
+  }, []);
 
   // Recursion Guard: If we are already in an embedded iframe,
   // strictly return just the children to prevent Inception.
+  // Note: This causes a hydration mismatch remount ONLY when actually embedded (e.g. inside Directus).
+  // Standard users and Lighthouse bots will NOT suffer a remount.
   if (isEmbedded) {
     return (
       <>
diff --git a/components/team/Gallery.tsx b/components/team/Gallery.tsx
index 83e9b9b1..7fec0a32 100644
--- a/components/team/Gallery.tsx
+++ b/components/team/Gallery.tsx
@@ -3,7 +3,8 @@
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import Image from 'next/image';
-import Lightbox from '@/components/Lightbox';
+import dynamic from 'next/dynamic';
+const Lightbox = dynamic(() => import('@/components/Lightbox'), { ssr: false });
 import { Section, Container, Heading } from '@/components/ui';
 
 export default function Gallery() {
diff --git a/config/lighthouserc.json b/config/lighthouserc.json
index e46f1edd..9716768d 100644
--- a/config/lighthouserc.json
+++ b/config/lighthouserc.json
@@ -1,10 +1,15 @@
 {
   "ci": {
     "collect": {
-      "numberOfRuns": 1,
+      "numberOfRuns": 3,
       "settings": {
         "preset": "desktop",
-        "onlyCategories": ["performance", "accessibility", "best-practices", "seo"],
+        "onlyCategories": [
+          "performance",
+          "accessibility",
+          "best-practices",
+          "seo"
+        ],
         "chromeFlags": "--no-sandbox --disable-setuid-sandbox"
       }
     },
@@ -49,4 +54,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index be795f4e..4fe8fe1c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -183,9 +183,9 @@ services:
       # This fixes the Next.js URL-decoding bug on dynamic image proxy paths
       - "traefik.http.routers.${PROJECT_NAME:-klz}-img.rule=(Host(`${TRAEFIK_HOST:-klz.localhost}`) || Host(`staging.klz-cables.com`) || Host(`testing.klz-cables.com`)) && PathPrefix(`/_img`)"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-img.priority=99999"
-      - "traefik.http.routers.${PROJECT_NAME:-klz}-img.entrypoints=websecure"
-      - "traefik.http.routers.${PROJECT_NAME:-klz}-img.tls=true"
-      - "traefik.http.routers.${PROJECT_NAME:-klz}-img.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-le}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-img.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-img.tls=${TRAEFIK_TLS:-false}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-img.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-img.service=${PROJECT_NAME:-klz}-imgproxy-svc"
       - "traefik.http.services.${PROJECT_NAME:-klz}-imgproxy-svc.loadbalancer.server.port=8080"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-img.middlewares=${PROJECT_NAME:-klz}-img-strip"
diff --git a/lib/framer-features.ts b/lib/framer-features.ts
new file mode 100644
index 00000000..b18409fc
--- /dev/null
+++ b/lib/framer-features.ts
@@ -0,0 +1,2 @@
+import { domAnimation } from 'framer-motion';
+export default domAnimation;
diff --git a/next-env.d.ts b/next-env.d.ts
index c4b7818f..9edff1c7 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/scripts/pagespeed-sitemap.ts b/scripts/pagespeed-sitemap.ts
index 369e73f8..29c08922 100644
--- a/scripts/pagespeed-sitemap.ts
+++ b/scripts/pagespeed-sitemap.ts
@@ -58,9 +58,10 @@ async function main() {
         `⚠️  Too many pages (${urls.length}). Limiting to ${limit} representative pages.`,
       );
       // Try to pick a variety: home, some products, some blog posts
-      const home = urls.filter((u) => u.endsWith('/de') || u.endsWith('/en') || u === targetUrl);
-      const others = urls.filter((u) => !home.includes(u));
-      urls = [...home, ...others.slice(0, limit - home.length)];
+      const homeEN = urls.filter((u) => u.endsWith('/en') || u === targetUrl);
+      const homeDE = urls.filter((u) => u.endsWith('/de'));
+      const others = urls.filter((u) => !homeEN.includes(u) && !homeDE.includes(u));
+      urls = [...homeEN, ...homeDE, ...others.slice(0, limit - (homeEN.length + homeDE.length))];
     }
 
     console.log(`🧪 Pages to be tested:`);