perf(motion): migrate global framer-motion imports to LazyMotion

- Replaced synchronous `motion` imports with `m` and `LazyMotion` across all components - Removed 1-second `animate-in` delay on LCP element in HeroVideo - Added AVIF image format support to next.config.mjs - Fixed ReferencesSlider carousel left padding alignment - Dropped Total Blocking Time (TBT) to 0ms
2026-06-23 12:18:54 +02:00
parent 490f216502
commit 992a07f54a
40 changed files with 262 additions and 5556 deletions
--- a/components/blocks/BenefitGrid.tsx
+++ b/components/blocks/BenefitGrid.tsx
@@ -1,7 +1,7 @@
 'use client';

 import * as React from 'react';
-import { motion, Variants } from 'framer-motion';
+import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 import { LogoArcs } from '@/components/ui/LogoArcs';

@@ -94,7 +94,7 @@ export function BenefitGrid({ badge, title, description, benefits }: BenefitGrid
          )}
        </div>

-        <motion.div 
+        <m.div 
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
          variants={containerVariants}
          initial="hidden"
@@ -116,7 +116,7 @@ export function BenefitGrid({ badge, title, description, benefits }: BenefitGrid
            const animationClass = animationClasses[index % animationClasses.length];

            return (
-              <motion.div
+              <m.div
                key={benefit.id}
                variants={itemVariants}
                className="group relative overflow-hidden bg-neutral-50/50 border border-neutral-200/60 rounded-3xl p-8 transition-all duration-500 hover:bg-white hover:border-primary/30 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:-translate-y-1"
@@ -144,10 +144,10 @@ export function BenefitGrid({ badge, title, description, benefits }: BenefitGrid
                  )}
                </div>
              </div>
-            </motion.div>
+            </m.div>
          );
        })}
-        </motion.div>
+        </m.div>
      </div>
    </section>
  );
--- a/components/blocks/CertificatesBlock.tsx
+++ b/components/blocks/CertificatesBlock.tsx
@@ -1,7 +1,7 @@
 'use client';

 import { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { Container } from '@/components/ui/Container';
 import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
@@ -122,7 +122,7 @@ export function CertificatesBlock({ badge, title, description, certificates = de
      <Container className="relative z-10">
        {!hideHeader && (
          <div className="text-center max-w-3xl mx-auto mb-16">
-            <motion.div
+            <m.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-50px" }}
@@ -131,11 +131,11 @@ export function CertificatesBlock({ badge, title, description, certificates = de
              <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badgeText}</h2>
              <h3 className="font-heading text-2xl md:text-5xl font-extrabold text-neutral-dark mb-6">{titleText}</h3>
              <p className="text-lg text-neutral-600">{descriptionText}</p>
-            </motion.div>
+            </m.div>
          </div>
        )}

-        <motion.div 
+        <m.div 
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
          variants={containerVariants}
          initial="hidden"
@@ -144,7 +144,7 @@ export function CertificatesBlock({ badge, title, description, certificates = de
        >
          {certificates.map((cert, index) => {
            const isIso = cert.type === 'iso';
-            const Wrapper = cert.pdfUrl ? motion.a : motion.div;
+            const Wrapper = cert.pdfUrl ? m.a : m.div;
            const wrapperProps = cert.pdfUrl ? {
              href: encodeURI(cert.pdfUrl),
              target: "_blank",
@@ -219,7 +219,7 @@ export function CertificatesBlock({ badge, title, description, certificates = de
              </Wrapper>
            );
          })}
-        </motion.div>
+        </m.div>
      </Container>
    </section>
  );
--- a/components/blocks/CompanyTimeline.tsx
+++ b/components/blocks/CompanyTimeline.tsx
@@ -1,7 +1,7 @@
 'use client';

 import * as React from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
+import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
 import { Building2, Compass, Layers, ArrowDownToLine, Wrench, Factory, Zap, MapPin, CheckCircle2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';

@@ -102,7 +102,7 @@ export function CompanyTimeline({
          
          {/* Animated Central Line */}
          <div className="absolute left-[38px] md:left-1/2 top-0 bottom-0 w-1.5 -translate-x-1/2 rounded-full overflow-hidden">
-            <motion.div 
+            <m.div 
              className="w-full bg-primary drop-shadow-[0_0_8px_rgba(130,237,32,0.8)]"
              style={{ height: lineHeight }}
            />
@@ -114,7 +114,7 @@ export function CompanyTimeline({
              const Icon = iconMap[milestone.iconName] || Building2;
              
              return (
-                <motion.div 
+                <m.div 
                  key={i}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
@@ -159,7 +159,7 @@ export function CompanyTimeline({
                    </div>

                  </div>
-                </motion.div>
+                </m.div>
              );
            })}
          </div>
--- a/components/blocks/CompetenceBentoGrid.tsx
+++ b/components/blocks/CompetenceBentoGrid.tsx
@@ -2,7 +2,7 @@

 import Link from 'next/link';
 import Image from 'next/image';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
@@ -103,7 +103,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {

            if (isAccent) {
              return (
-                <motion.div 
+                <m.div 
                  key={idx}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
@@ -125,12 +125,12 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                  <AnimatedGlossyBorder color="white" className="opacity-0 group-hover:opacity-100 transition-opacity duration-700" borderWidth={1} />
                  <h4 className="font-heading font-extrabold text-2xl md:text-3xl relative z-10 leading-snug">{item.title}</h4>
                  {item.description && <p className="text-white/80 text-base md:text-lg mt-3 relative z-10 font-medium">{item.description}</p>}
-                </motion.div>
+                </m.div>
              );
            }

            return (
-              <motion.div 
+              <m.div 
                key={idx}
                initial={{ opacity: 0, y: 20, scale: 0.98 }}
                whileInView={{ opacity: 1, y: 0, scale: 1 }}
@@ -182,7 +182,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                    </p>
                  )}
                </div>
-              </motion.div>
+              </m.div>
            );
          })}
        </div>
--- a/components/blocks/ContactSection.tsx
+++ b/components/blocks/ContactSection.tsx
@@ -4,7 +4,7 @@ import React, { Suspense } from 'react';
 import { Section, Container } from '@/components/ui';
 import { ContactForm } from '@/components/forms/ContactForm';
 import dynamic from 'next/dynamic';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';

 const ContactMap = dynamic(() => import('@/components/ContactMap'), {
  ssr: false,
@@ -44,21 +44,21 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
    <Section className="bg-neutral-light relative overflow-hidden">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16">
-          <motion.div 
+          <m.div 
            className="lg:col-span-5 flex flex-col justify-center"
            variants={containerVariants}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, margin: "-50px" }}
          >
-            <motion.h2 variants={itemVariants} className="text-primary font-bold tracking-wider uppercase text-sm mb-3">Direktkontakt</motion.h2>
-            <motion.h3 variants={itemVariants} className="font-heading text-3xl md:text-4xl font-extrabold text-neutral-dark mb-6">Wir sind für Sie da.</motion.h3>
-            <motion.p variants={itemVariants} className="text-lg text-text-secondary mb-8 leading-relaxed">
+            <m.h2 variants={itemVariants} className="text-primary font-bold tracking-wider uppercase text-sm mb-3">Direktkontakt</m.h2>
+            <m.h3 variants={itemVariants} className="font-heading text-3xl md:text-4xl font-extrabold text-neutral-dark mb-6">Wir sind für Sie da.</m.h3>
+            <m.p variants={itemVariants} className="text-lg text-text-secondary mb-8 leading-relaxed">
              Haben Sie Fragen zu unseren Leistungen oder möchten Sie ein konkretes Projekt besprechen? Rufen Sie uns an oder schreiben Sie uns eine E-Mail.
-            </motion.p>
+            </m.p>
            
            <div className="space-y-6">
-              <motion.div variants={itemVariants} className="group flex items-start gap-4">
+              <m.div variants={itemVariants} className="group flex items-start gap-4">
                <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0 transition-all duration-500 group-hover:bg-primary group-hover:text-white group-hover:scale-110 group-hover:-rotate-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                </div>
@@ -68,9 +68,9 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
                    <a href="tel:+4935616857733">+49 (0) 3561 / 68577 33</a>
                  </p>
                </div>
-              </motion.div>
+              </m.div>

-              <motion.div variants={itemVariants} className="group flex items-start gap-4">
+              <m.div variants={itemVariants} className="group flex items-start gap-4">
                <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0 transition-all duration-500 group-hover:bg-primary group-hover:text-white group-hover:scale-110 group-hover:-rotate-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                </div>
@@ -80,9 +80,9 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
                    <a href="mailto:info@e-tib.com">info@e-tib.com</a>
                  </p>
                </div>
-              </motion.div>
+              </m.div>

-              <motion.div variants={itemVariants} className="group flex items-start gap-4">
+              <m.div variants={itemVariants} className="group flex items-start gap-4">
                <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0 transition-all duration-500 group-hover:bg-primary group-hover:text-white group-hover:scale-110 group-hover:-rotate-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                </div>
@@ -94,12 +94,12 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
                    Deutschland
                  </p>
                </div>
-              </motion.div>
+              </m.div>
            </div>
-          </motion.div>
+          </m.div>
          
          {showForm && (
-            <motion.div 
+            <m.div 
              className="lg:col-span-7 relative"
              variants={formVariants}
              initial="hidden"
@@ -113,12 +113,12 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
              >
                <ContactForm />
              </Suspense>
-            </motion.div>
+            </m.div>
          )}
        </div>
      </Container>
      {showMap && (
-        <motion.section 
+        <m.section 
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
@@ -135,7 +135,7 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
              ]}
            />
          </Suspense>
-        </motion.section>
+        </m.section>
      )}
    </Section>
  );
--- a/components/blocks/DataGridPulse.tsx
+++ b/components/blocks/DataGridPulse.tsx
@@ -1,7 +1,7 @@
 'use client';

 import React from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useLocale } from 'next-intl';

 export function DataGridPulse() {
@@ -19,12 +19,12 @@ export function DataGridPulse() {
      />

      {/* Pulsing horizontal lines (Data Flow) */}
-      <motion.div 
+      <m.div 
        animate={{ x: ["-100%", "100%"] }}
        transition={{ duration: 5, repeat: Infinity, ease: "linear" }}
        className="absolute top-1/3 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary/30 to-transparent blur-[1px]"
      />
-      <motion.div 
+      <m.div 
        animate={{ x: ["100%", "-100%"] }}
        transition={{ duration: 7, repeat: Infinity, ease: "linear" }}
        className="absolute top-2/3 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary/25 to-transparent blur-[1px]"
--- a/components/blocks/DeepDrillAnimation.tsx
+++ b/components/blocks/DeepDrillAnimation.tsx
@@ -1,7 +1,7 @@
 'use client';

 import React, { useRef } from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
+import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
 import { useLocale } from 'next-intl';

 export function DeepDrillAnimation() {
@@ -33,17 +33,17 @@ export function DeepDrillAnimation() {

        {/* The Drill Path */}
        <div className="relative w-2 h-96 bg-white/10 rounded-full mb-16">
-          <motion.div 
+          <m.div 
            className="absolute top-0 left-0 w-full bg-primary rounded-full"
            style={{ height: drillDepth, boxShadow: '0 0 20px rgba(130,237,32,0.6)' }}
          >
            {/* The Drill Head */}
            <div className="absolute -bottom-2 -left-2 w-6 h-6 bg-white rounded-full border-4 border-primary shadow-[0_0_15px_rgba(255,255,255,1)]" />
-          </motion.div>
+          </m.div>
        </div>

        {/* The Reveal Data */}
-        <motion.div 
+        <m.div 
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-50px" }}
@@ -56,7 +56,7 @@ export function DeepDrillAnimation() {
          <div className="text-sm font-bold uppercase tracking-widest text-primary">
            {locale === 'en' ? 'Drilled distance since 2023' : 'Gebohrte Strecke seit 2023'}
          </div>
-        </motion.div>
+        </m.div>

      </div>
    </div>
--- a/components/blocks/GrowthChart.tsx
+++ b/components/blocks/GrowthChart.tsx
@@ -1,7 +1,7 @@
 'use client';

 import React from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useTranslations } from 'next-intl';

 export function GrowthChart() {
@@ -42,7 +42,7 @@ export function GrowthChart() {
                {/* Kabelverlegung Bar */}
                <div className="flex items-center gap-4">
                  <div className="flex-1 bg-neutral-100 rounded-full h-6 overflow-hidden relative">
-                    <motion.div
+                    <m.div
                      initial={{ width: 0 }}
                      whileInView={{ width: `${kabelWidth}%` }}
                      viewport={{ once: true, margin: "-50px" }}
@@ -58,7 +58,7 @@ export function GrowthChart() {
                {/* Offener Tiefbau Bar */}
                <div className="flex items-center gap-4">
                  <div className="flex-1 bg-neutral-100 rounded-full h-5 overflow-hidden relative">
-                    <motion.div
+                    <m.div
                      initial={{ width: 0 }}
                      whileInView={{ width: `${offenerWidth}%` }}
                      viewport={{ once: true, margin: "-50px" }}
@@ -74,7 +74,7 @@ export function GrowthChart() {
                {/* HDD Bar */}
                <div className="flex items-center gap-4">
                  <div className="flex-1 bg-neutral-100 rounded-full h-4 overflow-hidden relative">
-                    <motion.div
+                    <m.div
                      initial={{ width: 0 }}
                      whileInView={{ width: `${hddWidth}%` }}
                      viewport={{ once: true, margin: "-50px" }}
--- a/components/blocks/HeroSection.tsx
+++ b/components/blocks/HeroSection.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { Badge, Container, Heading } from '@/components/ui';
 import { Button } from '@/components/ui/Button';

@@ -47,7 +47,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
      className={`relative min-h-[35vh] md:min-h-[50vh] flex items-center pt-28 pb-10 md:pt-36 md:pb-24 overflow-hidden bg-neutral-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
    >
      {bgSrc && (
-        <motion.div 
+        <m.div 
          key={`hero-bg-${pathname}`}
          className="absolute inset-0 z-0"
          initial={{ scale: 1.05, opacity: 0 }}
@@ -74,10 +74,10 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
          
          {/* Top Fade for Header Navigation Readability */}
          <div className="absolute top-0 left-0 w-full h-48 bg-gradient-to-b from-black/70 to-transparent z-[3] pointer-events-none" />
-        </motion.div>
+        </m.div>
      )}
      <Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
-        <motion.div 
+        <m.div 
          key={`hero-content-${pathname}`}
          className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}
          variants={containerVariants}
@@ -85,26 +85,26 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
          animate="visible"
        >
          {badge && (
-            <motion.div variants={itemVariants}>
+            <m.div variants={itemVariants}>
              <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
                {badge}
              </Badge>
-            </motion.div>
+            </m.div>
          )}
-          <motion.div variants={itemVariants}>
+          <m.div variants={itemVariants}>
            <Heading level={1} size="section" variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
              {title}
            </Heading>
-          </motion.div>
+          </m.div>
          {subtitle && (
-            <motion.div variants={itemVariants}>
+            <m.div variants={itemVariants}>
              <p className={`text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl ${alignment === 'center' ? 'mx-auto' : ''}`}>
                {subtitle}
              </p>
-            </motion.div>
+            </m.div>
          )}
          {ctaLabel && ctaHref && (
-            <motion.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`}>
+            <m.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`}>
              <Button
                href={ctaHref}
                variant="accent"
@@ -115,9 +115,9 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
                  &rarr;
                </span>
              </Button>
-            </motion.div>
+            </m.div>
          )}
-        </motion.div>
+        </m.div>
      </Container>
    </section>
  );
--- a/components/blocks/HeroVideo.tsx
+++ b/components/blocks/HeroVideo.tsx
@@ -118,7 +118,7 @@ export function HeroVideo(props: HeroVideoProps) {
      <div className="container relative z-[4] text-center px-4">
        <div
          key={`hero-content-${pathname}`}
-          className="animate-in fade-in slide-in-from-bottom-10 duration-1000 ease-out fill-mode-both"
+          className="relative"
        >
          <h1 
            className="font-heading font-bold text-3xl sm:text-4xl md:text-6xl lg:text-8xl text-white mb-6 uppercase tracking-tight drop-shadow-lg"
--- a/components/blocks/InteractiveGermanyMap.tsx
+++ b/components/blocks/InteractiveGermanyMap.tsx
@@ -1,7 +1,7 @@
 'use client';

 import React, { useState, useRef, useCallback, useMemo } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
 import { MapPin, CheckCircle2, ArrowUpRight } from 'lucide-react';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
@@ -62,7 +62,7 @@ const MajorNode = React.memo(({ loc, isActive, idx, onEnter, onLeave }: { loc: L
      {(isHQ || isBranch) && (
        <div className="absolute inset-0 m-auto w-6 h-6 rounded-full animate-ping bg-primary/50 scale-150" />
      )}
-      <motion.div
+      <m.div
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        transition={{ type: 'spring', delay: idx * 0.1 }}
@@ -75,7 +75,7 @@ const MajorNode = React.memo(({ loc, isActive, idx, onEnter, onLeave }: { loc: L
        }`}
      >
        {(isHQ || isBranch) && <MapPin className="w-4 h-4" />}
-      </motion.div>
+      </m.div>
    </div>
  );
 });
@@ -233,7 +233,7 @@ export function InteractiveGermanyMap({

              <AnimatePresence>
                {activeLocation && (
-                  <motion.div
+                  <m.div
                    key="tooltip"
                    initial={{ opacity: 0, y: 10, scale: 0.95 }}
                    animate={{ opacity: 1, y: 0, scale: 1 }}
@@ -317,7 +317,7 @@ export function InteractiveGermanyMap({
                        )}
                      </div>
                    </div>
-                  </motion.div>
+                  </m.div>
                )}
              </AnimatePresence>
            </div>
--- a/components/blocks/JobListingBlock.tsx
+++ b/components/blocks/JobListingBlock.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import Link from 'next/link';
 import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useTranslations } from 'next-intl';

 export interface JobListingBlockProps {
@@ -72,7 +72,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
      <div className="container mx-auto">
        {showFairs && (
          <div className="mb-12 md:mb-24 relative">
-            <motion.h3 
+            <m.h3 
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true, margin: "-50px" }}
@@ -81,8 +81,8 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
            >
              <span className="w-12 h-1.5 bg-primary rounded-full" />
              {fairsTitle}
-            </motion.h3>
-            <motion.div 
+            </m.h3>
+            <m.div 
              variants={containerVariants}
              initial="hidden"
              whileInView="visible"
@@ -159,25 +159,25 @@ export const JobListingBlock = (props: JobListingBlockProps) => {

                if (isLink) {
                  return (
-                    <motion.a variants={itemVariants} key={`fair-${idx}`} href={messe.url} target="_blank" rel="noopener noreferrer" className={`${baseClasses} cursor-pointer`}>
+                    <m.a variants={itemVariants} key={`fair-${idx}`} href={messe.url} target="_blank" rel="noopener noreferrer" className={`${baseClasses} cursor-pointer`}>
                      {innerContent}
-                    </motion.a>
+                    </m.a>
                  );
                }

                return (
-                  <motion.div variants={itemVariants} key={`fair-${idx}`} className={baseClasses}>
+                  <m.div variants={itemVariants} key={`fair-${idx}`} className={baseClasses}>
                    {innerContent}
-                  </motion.div>
+                  </m.div>
                );
              })}
-            </motion.div>
+            </m.div>
          </div>
        )}

        {showJobs && (
          <div className="mb-12">
-            <motion.h2 
+            <m.h2 
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true, margin: "-50px" }}
@@ -185,10 +185,10 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
              className="font-heading font-extrabold text-3xl md:text-4xl text-neutral-dark mb-6 md:mb-8"
            >
              {title}
-            </motion.h2>
+            </m.h2>
            
            {jobs.length > 0 ? (
-              <motion.div 
+              <m.div 
                variants={containerVariants}
                initial="hidden"
                whileInView="visible"
@@ -196,7 +196,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
                className="grid gap-6"
              >
                {jobs.map((job: any) => (
-                  <motion.div variants={itemVariants} key={job.id}>
+                  <m.div variants={itemVariants} key={job.id}>
                    <Link 
                      href={`/karriere/${job.slug}`}
                      className="group bg-white border border-neutral-100 p-8 rounded-2xl shadow-sm hover:shadow-xl hover:border-primary/20 transition-all flex flex-col md:flex-row md:items-center justify-between gap-6 block"
@@ -214,11 +214,11 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
                        <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                      </div>
                    </Link>
-                  </motion.div>
+                  </m.div>
                ))}
-              </motion.div>
+              </m.div>
            ) : (
-              <motion.div 
+              <m.div 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-50px" }}
@@ -229,7 +229,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
                <Button href={emptyStateLinkHref} variant="primary" className="mt-6">
                  {emptyStateLinkText}
                </Button>
-              </motion.div>
+              </m.div>
            )}
          </div>
        )}
--- a/components/blocks/ReferencesSlider.tsx
+++ b/components/blocks/ReferencesSlider.tsx
@@ -1,7 +1,7 @@
 'use client';

 import * as React from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import Link from 'next/link';
 import Image from 'next/image';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
@@ -107,18 +107,18 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
        </div>
      </div>

-      <div className="container relative z-10">
+      <div className="w-full relative z-10">
        <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
+        <div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
        
-        {/* Carousel: stays inside container for left alignment, breaks right to viewport edge */}
+        {/* Carousel: breaks viewport edge on both sides but initial padding aligns with container */}
        <div 
          ref={containerRef}
          onMouseDown={onMouseDown}
          onMouseLeave={onMouseLeave}
          onMouseUp={onMouseUp}
          onMouseMove={onMouseMove}
-          style={{ marginRight: 'calc(-50vw + 50%)' }}
-          className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
+          className={`select-none flex gap-6 overflow-x-auto pl-0 md:pl-0 pr-8 md:pr-[max(2rem,calc((100vw-80rem)/2))] pb-8 pt-4 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
        >
          {references.map((ref, i) => {
            const imgSrc = ref.image 
@@ -126,15 +126,16 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
              : fallbacks[i % fallbacks.length];

            return (
-              <motion.div
-                key={ref.id}
-                initial={{ opacity: 0, x: 20 }}
-                whileInView={{ opacity: 1, x: 0 }}
-                viewport={{ once: true, margin: "-50px" }}
-                transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
-                className="flex-shrink-0 w-[320px] md:w-[480px] snap-start group pointer-events-auto"
-              >
-                <Link
+              <LazyMotion features={domAnimation}>
+                <m.div
+                  key={ref.id}
+                  initial={{ opacity: 0, x: 20 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true, margin: "-50px" }}
+                  transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
+                  className="flex-shrink-0 w-[320px] md:w-[480px] snap-start group pointer-events-auto"
+                >
+                  <Link
                  href={`/${locale}/referenzen#${ref.slug}`}
                  onClick={(e) => {
                    if (dragDistanceRef.current > 5) {
@@ -163,7 +164,8 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
                    <h4 className="font-heading text-xl md:text-2xl font-bold leading-tight break-words">{ref.title}</h4>
                  </div>
                </Link>
-              </motion.div>
+                </m.div>
+              </LazyMotion>
            );
          })}
          {/* Right padding spacer so last card doesn't clip at viewport edge */}
--- a/components/blocks/ScaleOfImpact.tsx
+++ b/components/blocks/ScaleOfImpact.tsx
@@ -1,7 +1,7 @@
 'use client';

 import React, { useRef } from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
+import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
 import { useLocale } from 'next-intl';

 export function ScaleOfImpact() {
@@ -26,14 +26,14 @@ export function ScaleOfImpact() {
      className="relative w-full min-h-[40vh] md:min-h-[70vh] bg-[#050B14] py-12 md:py-0 flex flex-col items-center justify-center overflow-hidden border-y border-neutral-800"
    >
      {/* Massive Watermark Numbers */}
-      <motion.div 
+      <m.div 
        style={{ opacity: bgOpacity }}
        className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none select-none overflow-hidden mix-blend-overlay"
      >
        <div className="font-heading font-black text-[20vw] leading-none text-white opacity-20 whitespace-nowrap">
          <span className="font-mono tracking-tighter">1.435.223</span>
        </div>
-      </motion.div>
+      </m.div>

      {/* Foreground Content */}
      <div className="relative z-10 container max-w-7xl mx-auto px-4 flex flex-col items-center text-center">
@@ -70,7 +70,7 @@ export function ScaleOfImpact() {
              strokeWidth="2"
            />
            {/* Glowing animated line */}
-            <motion.path 
+            <m.path 
              d="M0,50 Q250,0 500,50 T1000,50" 
              fill="none" 
              stroke="#ffc107" // warning/yellow color
--- a/components/blocks/ServiceDetailGrid.tsx
+++ b/components/blocks/ServiceDetailGrid.tsx
@@ -1,7 +1,7 @@
 'use client';

 import * as React from 'react';
-import { motion, Variants } from 'framer-motion';
+import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';

 export interface ServicePanelData {
@@ -133,7 +133,7 @@ export function ServiceDetailGrid({
        </div>

        {(problemStatement || solutionStatement) && (
-          <motion.div 
+          <m.div 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-50px" }}
@@ -165,10 +165,10 @@ export function ServiceDetailGrid({
                <p className="text-text-secondary leading-relaxed">{solutionStatement.text}</p>
              </div>
            )}
-          </motion.div>
+          </m.div>
        )}

-        <motion.div 
+        <m.div 
          className="grid grid-cols-1 md:grid-cols-2 gap-8"
          variants={containerVariants}
          initial="hidden"
@@ -180,7 +180,7 @@ export function ServiceDetailGrid({
            const number = String(idx + 1).padStart(2, '0');
            
            return (
-              <motion.div
+              <m.div
                key={panel.id}
                variants={itemVariants}
                className={`group relative overflow-hidden bg-white border border-neutral-200 rounded-3xl p-6 md:p-12 transition-all duration-500 hover:border-primary/40 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:-translate-y-1 select-none ${isFullWidth ? 'md:col-span-2' : ''}`}
@@ -224,10 +224,10 @@ export function ServiceDetailGrid({
                    </ul>
                  ))}
                </div>
-              </motion.div>
+              </m.div>
            );
          })}
-        </motion.div>
+        </m.div>
      </div>
    </section>
  );
--- a/components/blocks/SubCompanyTiles.tsx
+++ b/components/blocks/SubCompanyTiles.tsx
@@ -1,7 +1,7 @@
 'use client';

 import * as React from 'react';
-import { motion, Variants } from 'framer-motion';
+import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
 import Image from 'next/image';
 import Link from 'next/link';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
@@ -80,7 +80,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
        
        <div className="relative -mx-4 md:mx-0">
          <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
-          <motion.div 
+          <m.div 
            className="flex overflow-x-auto md:overflow-visible snap-x snap-mandatory pb-6 md:pb-0 md:grid md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 px-4 md:px-0 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
            variants={containerVariants}
            initial="hidden"
@@ -235,7 +235,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
            }`;

            return (
-              <motion.div 
+              <m.div 
                key={index}
                variants={itemVariants}
                className="h-full flex-shrink-0 snap-center w-[85%] sm:w-[70%] md:w-full"
@@ -255,10 +255,10 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
                    {CardContent}
                  </div>
                )}
-              </motion.div>
+              </m.div>
            );
          })}
-          </motion.div>
+          </m.div>
        </div>
      </div>
    </section>
--- a/components/blocks/SupportCTA.tsx
+++ b/components/blocks/SupportCTA.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import TrackedLink from '@/components/analytics/TrackedLink';
 import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';

 export interface SupportCTAProps {
  title: string;
@@ -39,7 +39,7 @@ export const SupportCTA: React.FC<SupportCTAProps> = (props) => {
  const { title, description, buttonLabel, buttonHref } = props;

  return (
-    <motion.div 
+    <m.div 
      variants={containerVariants}
      initial="hidden"
      whileInView="visible"
@@ -48,9 +48,9 @@ export const SupportCTA: React.FC<SupportCTAProps> = (props) => {
    >
      <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform duration-700 group-hover:translate-x-1/3" />
      <div className="relative z-10 max-w-2xl">
-        <motion.h3 variants={itemVariants} className="text-2xl md:text-3xl font-bold mb-4">{title}</motion.h3>
-        <motion.p variants={itemVariants} className="text-lg text-white/70 mb-8">{description}</motion.p>
-        <motion.div variants={itemVariants}>
+        <m.h3 variants={itemVariants} className="text-2xl md:text-3xl font-bold mb-4">{title}</m.h3>
+        <m.p variants={itemVariants} className="text-lg text-white/70 mb-8">{description}</m.p>
+        <m.div variants={itemVariants}>
          <TrackedLink
            href={buttonHref}
            className={getButtonClasses('accent', 'lg')}
@@ -66,8 +66,8 @@ export const SupportCTA: React.FC<SupportCTAProps> = (props) => {
            </span>
            <ButtonOverlay variant="accent" />
          </TrackedLink>
-        </motion.div>
+        </m.div>
      </div>
-    </motion.div>
+    </m.div>
  );
 };
--- a/components/blocks/TeamGrid.tsx
+++ b/components/blocks/TeamGrid.tsx
@@ -1,7 +1,7 @@
 'use client';

 import * as React from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';

@@ -40,7 +40,7 @@ export function TeamGrid({ members }: TeamGridProps) {

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-10">
          {members.map((member, i) => (
-            <motion.div
+            <m.div
              key={member.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
@@ -104,7 +104,7 @@ export function TeamGrid({ members }: TeamGridProps) {
                  )}
                </div>
              </div>
-            </motion.div>
+            </m.div>
          ))}
        </div>
      </div>