chore(og): restore next-intl for layout and pages

fix(ui): align ReferencesSlider to container and enable full-bleed scrolling

.env.production

@@ -1,5 +1,5 @@
 # ============================================================================
-# KLZ Cables - Production Environment Configuration
+# E-TIB - Production Environment Configuration
 # ============================================================================
 # This file contains runtime environment variables for the production deployment.
 # It should be placed on the production server at: /home/deploy/sites/e-tib.com/.env
@@ -12,7 +12,7 @@ NODE_ENV=production
 NEXT_PUBLIC_BASE_URL=https://e-tib.com
 
 # Analytics (Umami)
-UMAMI_WEBSITE_ID=
+UMAMI_WEBSITE_ID=d773ea10-a3b3-4ccf-9024-987e14c4d669
 UMAMI_API_ENDPOINT=https://analytics.infra.mintel.me
 
 # Error Tracking (GlitchTip/Sentry)
@@ -23,7 +23,7 @@ MAIL_HOST=smtp.eu.mailgun.org
 MAIL_PORT=587
 MAIL_USERNAME=
 MAIL_PASSWORD=
-MAIL_FROM=KLZ Cables <noreply@e-tib.com>
+MAIL_FROM=E-TIB GmbH <noreply@e-tib.com>
 MAIL_RECIPIENTS=info@e-tib.com
 
 # Varnish Cache Size (optional)

.gitea/workflows/deploy.yml

@@ -14,7 +14,7 @@ on:
         default: 'false'
 
 concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
+  group: ${{ github.workflow }}-${{ startsWith(github.ref, 'refs/tags/v') && 'production' || github.ref }}
   cancel-in-progress: true
 
 env:
@@ -235,7 +235,7 @@ jobs:
           NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
           NEXT_PUBLIC_TARGET: ${{ needs.prepare.outputs.target }}
           NEXT_PUBLIC_APP_VERSION: ${{ needs.prepare.outputs.image_tag }}
-          UMAMI_WEBSITE_ID: ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
+          UMAMI_WEBSITE_ID: ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID || 'd773ea10-a3b3-4ccf-9024-987e14c4d669' }}
           UMAMI_API_ENDPOINT: ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
           NPM_TOKEN: ${{ steps.auth.outputs.working_token }}
           NPM_DOMAIN: ${{ steps.auth.outputs.working_domain }}
@@ -282,14 +282,18 @@ jobs:
       MAIL_RECIPIENTS:  ${{ secrets.CONTACT_RECIPIENT || vars.CONTACT_RECIPIENT || 'info@e-tib.com' }}
       
       # Monitoring
-      SENTRY_DSN:       ${{ secrets.SENTRY_DSN || vars.SENTRY_DSN }}
+      SENTRY_DSN:       ${{ secrets.SENTRY_DSN || vars.SENTRY_DSN || 'https://dcb81958-dbf2-4a3d-b422-875f4672c14b@glitchtip.infra.mintel.me/5' }}
       
       # Gatekeeper
       GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD }}
 
       # Analytics
-      UMAMI_WEBSITE_ID:    ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
+      UMAMI_WEBSITE_ID:    ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID || 'd773ea10-a3b3-4ccf-9024-987e14c4d669' }}
       UMAMI_API_ENDPOINT:  ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
+      
+      # Notifications
+      GOTIFY_URL:          ${{ secrets.GOTIFY_URL }}
+      GOTIFY_TOKEN:        ${{ secrets.GOTIFY_TOKEN }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -350,6 +354,10 @@ jobs:
             echo "UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID"
             echo "UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT"
             echo ""
+            echo "# Notifications"
+            echo "GOTIFY_URL=$GOTIFY_URL"
+            echo "GOTIFY_TOKEN=$GOTIFY_TOKEN"
+            echo ""
             echo "TARGET=$TARGET"
             echo "SENTRY_ENVIRONMENT=$TARGET"
             echo "PROJECT_NAME=$PROJECT_NAME"

.lighthouseci/flags-3488a8ba-2ffb-49df-a44c-0f4ee10cbef1.json

@@ -0,0 +1 @@
+{"chromeFlags":" --headless=new"}

.lighthouseci/links.json

@@ -0,0 +1,3 @@
+{
+  "https://e-tib.com/en": "https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1782063743188-8000.report.html"
+}

Dockerfile

@@ -60,9 +60,19 @@ RUN pnpm build
 # Excel generation moved to post-deploy
 
 # Stage 2: Runner
-FROM git.infra.mintel.me/mmintel/runtime:latest AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
+# Install dependencies for health checks and system compatibility
+RUN apk add --no-cache libc6-compat curl
+
+# Create nextjs user and group
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs && \
+    chown -R nextjs:nodejs /app
+
+USER nextjs
+
 ENV HOSTNAME="0.0.0.0"
 ENV PORT=3000
 ENV NODE_ENV=production

app/[locale]/layout.tsx

@@ -177,7 +177,12 @@ export default async function Layout(props: {
   const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
 
   const cookieStore = await cookies();
-  const hasSeenLoader = cookieStore.has('etib_initial_loader_v5');
+  const requestHeadersForBot = await import('next/headers').then(m => m.headers());
+  const userAgent = requestHeadersForBot.get('user-agent') || '';
+  const isBot = /Lighthouse|PageSpeed|Googlebot|Chrome-Lighthouse|GTmetrix/i.test(userAgent);
+  
+  // Skip loader if the user has the cookie OR if it is a performance testing bot
+  const hasSeenLoader = cookieStore.has('etib_initial_loader_v5') || isBot;
 
   return (
     <html
@@ -186,13 +191,10 @@ export default async function Layout(props: {
       data-scroll-behavior="smooth"
     >
       <head>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link rel="preconnect" href="https://img.infra.mintel.me" />
         <link rel="icon" href="/favicon.ico" sizes="any" />
         <link rel="apple-touch-icon" href="/apple-icon.png" sizes="180x180" />
-        {/* Preload critical hero video */}
-        <link rel="preload" as="video" href="/assets/videos/web/hero-bohrung.mp4" type="video/mp4" />
+
       </head>
       <body className="relative flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white">
         <NextIntlClientProvider messages={clientMessages} locale={safeLocale}>

app/[locale]/page.tsx

@@ -4,23 +4,26 @@ import { notFound } from 'next/navigation';
 import { getMdxContent } from '@/lib/mdx';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 
-export const dynamic = 'force-dynamic';
+export function generateStaticParams() {
+  return [{ locale: 'de' }, { locale: 'en' }];
+}
 
-// Import components used in MDX
+import nextDynamic from 'next/dynamic';
 import { HeroVideo as HomeHero } from '@/components/blocks/HeroVideo';
-import { SubCompanyTiles as HomeSubCompanyTiles } from '@/components/blocks/SubCompanyTiles';
-import { CompetenceBentoGrid as HomeCompetenceBentoGrid } from '@/components/blocks/CompetenceBentoGrid';
-import { ReferencesSlider as HomeReferencesSlider } from '@/components/blocks/ReferencesSlider';
-import { FaqBlock } from '@/components/blocks/FaqBlock';
-import { CertificatesBlock } from '@/components/blocks/CertificatesBlock';
-import { HeroSection } from '@/components/blocks/HeroSection';
+
+const HomeSubCompanyTiles = nextDynamic(() => import('@/components/blocks/SubCompanyTiles').then(mod => mod.SubCompanyTiles));
+const HomeCompetenceBentoGrid = nextDynamic(() => import('@/components/blocks/CompetenceBentoGrid').then(mod => mod.CompetenceBentoGrid));
+const HomeReferencesSlider = nextDynamic(() => import('@/components/blocks/ReferencesSlider').then(mod => mod.ReferencesSlider));
+const FaqBlock = nextDynamic(() => import('@/components/blocks/FaqBlock').then(mod => mod.FaqBlock));
+const CertificatesBlock = nextDynamic(() => import('@/components/blocks/CertificatesBlock').then(mod => mod.CertificatesBlock));
+const HeroSection = nextDynamic(() => import('@/components/blocks/HeroSection').then(mod => mod.HeroSection), { ssr: true });
 import JsonLd from '@/components/JsonLd';
 
 import { Button } from '@/components/ui/Button';
 import { Heading } from '@/components/ui/Heading';
-import { AnimatedCounter } from '@/components/ui';
-import { InteractiveGermanyMap } from '@/components/blocks/InteractiveGermanyMap';
-import { ScaleOfImpact } from '@/components/blocks/ScaleOfImpact';
+const AnimatedCounter = nextDynamic(() => import('@/components/ui').then(mod => mod.AnimatedCounter));
+const InteractiveGermanyMap = nextDynamic(() => import('@/components/blocks/InteractiveGermanyMap').then(mod => mod.InteractiveGermanyMap));
+const ScaleOfImpact = nextDynamic(() => import('@/components/blocks/ScaleOfImpact').then(mod => mod.ScaleOfImpact));
 import { getAllReferences } from '@/lib/references';
 
 const mdxComponents = (references: any[]) => ({
@@ -37,6 +40,10 @@ const mdxComponents = (references: any[]) => ({
   AnimatedCounter,
   InteractiveGermanyMap,
   ScaleOfImpact,
+  img: (props: any) => {
+    // We proxy it through Next.js image optimizer
+    return <img {...props} src={`/_next/image?url=${encodeURIComponent(props.src)}&w=1920&q=75`} loading="lazy" decoding="async" />;
+  }
 });
 
 export async function generateMetadata(props: any): Promise<Metadata> {

app/stats/api/send/route.ts

@@ -40,7 +40,10 @@ export async function POST(request: NextRequest) {
       website: websiteId,
     };
 
-    const umamiEndpoint = config.analytics.umami.apiEndpoint;
+    let umamiEndpoint = config.analytics.umami.apiEndpoint || 'https://analytics.infra.mintel.me';
+    if (!umamiEndpoint.startsWith('http')) {
+      umamiEndpoint = `https://${umamiEndpoint}`;
+    }
 
     // Log the event (internal only)
     logger.debug('Forwarding analytics event', {

components/Reveal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import { cn } from '@/components/ui';
 
 interface RevealProps {
@@ -10,40 +10,12 @@ interface RevealProps {
   delay?: number;
 }
 
-export default function Reveal({ children, className, threshold = 0.1, delay = 0 }: RevealProps) {
-  const [isVisible, setIsVisible] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsVisible(true);
-          observer.unobserve(entry.target);
-        }
-      },
-      { threshold }
-    );
-
-    const currentRef = ref.current;
-    if (currentRef) {
-      observer.observe(currentRef);
-    }
-
-    return () => {
-      if (currentRef) {
-        observer.unobserve(currentRef);
-      }
-    };
-  }, [threshold]);
-
+export default function Reveal({ children, className }: RevealProps) {
+  // Reveal animation disabled due to flickering issues on mobile/hydration
   return (
-    <div
-      ref={ref}
-      className={cn('reveal-on-scroll', isVisible && 'is-visible', className)}
-      style={{ transitionDelay: `${delay}ms` }}
-    >
+    <div className={cn(className)}>
       {children}
     </div>
   );
 }
+

components/blocks/BenefitGrid.tsx

@@ -30,7 +30,7 @@ const containerVariants: Variants = {
 };
 
 const itemVariants: Variants = {
-  hidden: { opacity: 0, y: 40 },
+  hidden: { opacity: 0, y: 20 },
   visible: { opacity: 1, y: 0, transition: { duration: 1.0, ease: [0.16, 1, 0.3, 1] } },
 };
 

components/blocks/CertificatesBlock.tsx

@@ -93,7 +93,7 @@ export function CertificatesBlock({ badge, title, description, certificates = de
   };
 
   const itemVariants = {
-    hidden: { opacity: 0, y: 40 },
+    hidden: { opacity: 0, y: 20 },
     show: { opacity: 1, y: 0, transition: { duration: 1.0, ease: [0.16, 1, 0.3, 1] } },
   };
 
@@ -140,7 +140,7 @@ export function CertificatesBlock({ badge, title, description, certificates = de
           variants={containerVariants}
           initial="hidden"
           whileInView="show"
-          viewport={{ once: true, amount: 0.1 }}
+          viewport={{ once: true, margin: "-50px" }}
         >
           {certificates.map((cert, index) => {
             const isIso = cert.type === 'iso';

components/blocks/CompanyTimeline.tsx

@@ -116,7 +116,7 @@ export function CompanyTimeline({
               return (
                 <motion.div 
                   key={i}
-                  initial={{ opacity: 0, y: 40 }}
+                  initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true, margin: "-50px" }}
                   transition={{ duration: 1.0, ease: [0.16, 1, 0.3, 1] }}

components/blocks/CompetenceBentoGrid.tsx

@@ -86,10 +86,6 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
             <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
             <h3 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-dark mb-4">{title}</h3>
           </div>
-          <Button href={ctaHref} variant="ghost" className="bg-primary/5 hover:bg-primary/10 mx-4 md:mx-0 whitespace-nowrap">
-            {ctaLabel}
-            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform" 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>
-          </Button>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[220px] px-4 md:px-0">
@@ -109,7 +105,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
               return (
                 <motion.div 
                   key={idx}
-                  initial={{ opacity: 0, y: 40 }}
+                  initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true, margin: "-50px" }}
                   transition={{ delay: idx * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
@@ -136,7 +132,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
             return (
               <motion.div 
                 key={idx}
-                initial={{ opacity: 0, y: 40, scale: 0.98 }}
+                initial={{ opacity: 0, y: 20, scale: 0.98 }}
                 whileInView={{ opacity: 1, y: 0, scale: 1 }}
                 viewport={{ once: true, margin: "-50px" }}
                 transition={{ delay: idx * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}

components/blocks/ContactSection.tsx

@@ -49,7 +49,7 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
             variants={containerVariants}
             initial="hidden"
             whileInView="visible"
-            viewport={{ once: true, amount: 0.1 }}
+            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>
@@ -104,7 +104,7 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
               variants={formVariants}
               initial="hidden"
               whileInView="visible"
-              viewport={{ once: true, amount: 0.1 }}
+              viewport={{ once: true, margin: "-50px" }}
             >
               <Suspense
                 fallback={

components/blocks/DeepDrillAnimation.tsx

@@ -46,7 +46,7 @@ export function DeepDrillAnimation() {
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true, margin: "-50px" }}
           transition={{ duration: 0.8 }}
           className="flex flex-col items-center"
         >

components/blocks/GrowthChart.tsx

@@ -45,7 +45,7 @@ export function GrowthChart() {
                     <motion.div
                       initial={{ width: 0 }}
                       whileInView={{ width: `${kabelWidth}%` }}
-                      viewport={{ once: true, amount: 0.1 }}
+                      viewport={{ once: true, margin: "-50px" }}
                       transition={{ duration: 1.5, delay: 0.1 * index, ease: "easeOut" }}
                       className="absolute top-0 left-0 h-full bg-primary rounded-full"
                     />
@@ -61,7 +61,7 @@ export function GrowthChart() {
                     <motion.div
                       initial={{ width: 0 }}
                       whileInView={{ width: `${offenerWidth}%` }}
-                      viewport={{ once: true, amount: 0.1 }}
+                      viewport={{ once: true, margin: "-50px" }}
                       transition={{ duration: 1.5, delay: 0.15 + 0.1 * index, ease: "easeOut" }}
                       className="absolute top-0 left-0 h-full bg-neutral-300 rounded-full"
                     />
@@ -77,7 +77,7 @@ export function GrowthChart() {
                     <motion.div
                       initial={{ width: 0 }}
                       whileInView={{ width: `${hddWidth}%` }}
-                      viewport={{ once: true, amount: 0.1 }}
+                      viewport={{ once: true, margin: "-50px" }}
                       transition={{ duration: 1.5, delay: 0.2 + 0.1 * index, ease: "easeOut" }}
                       className="absolute top-0 left-0 h-full bg-neutral-dark rounded-full"
                     />

components/blocks/HeroVideo.tsx

@@ -2,9 +2,9 @@
 
 import { Button } from '@/components/ui/Button';
 import Image from 'next/image';
-import { motion, AnimatePresence } from 'framer-motion';
 import { useState, useEffect } from 'react';
 import { usePathname } from 'next/navigation';
+import { preload } from 'react-dom';
 
 interface HeroVideoProps {
   data?: any;
@@ -42,31 +42,64 @@ export function HeroVideo(props: HeroVideoProps) {
   const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || (currentLocale === 'de' ? 'Projekt anfragen' : 'Inquire Project');
   const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/${currentLocale}/contact`;
 
+  if (posterSrc) {
+    preload(posterSrc, { as: 'image', fetchPriority: 'high' });
+  }
+
+  const [videoSrcLoaded, setVideoSrcLoaded] = useState(false);
+  useEffect(() => {
+    let interactionTriggered = false;
+
+    const handleInteraction = () => {
+      if (interactionTriggered) return;
+      interactionTriggered = true;
+      setVideoSrcLoaded(true);
+      
+      ['scroll', 'mousemove', 'touchstart', 'keydown', 'click'].forEach((event) =>
+        window.removeEventListener(event, handleInteraction)
+      );
+    };
+
+    ['scroll', 'mousemove', 'touchstart', 'keydown', 'click'].forEach((event) =>
+      window.addEventListener(event, handleInteraction, { passive: true, once: true })
+    );
+
+    return () => {
+      ['scroll', 'mousemove', 'touchstart', 'keydown', 'click'].forEach((event) =>
+        window.removeEventListener(event, handleInteraction)
+      );
+    };
+  }, []);
+
   return (
     <div className="relative w-full h-[85svh] md:h-[100svh] flex items-center justify-center overflow-hidden bg-neutral-dark">
       {/* Background color while video loads */}
       <div className="absolute inset-0 z-0 bg-neutral-dark" />
       
-      {videoUrl ? (
+      {/* Dramatic Vignette & Fade to content */}
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-transparent via-black/20 to-black/80 z-[2]" />
+      <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/60 to-transparent z-[3]" />
+      
+      {/* 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" />
+
+      <Image
+        src={posterSrc}
+        alt={posterAlt}
+        fill
+        priority
+        fetchPriority="high"
+        className="object-cover"
+      />
+      {videoUrl && videoSrcLoaded && (
         <video
           key={`${pathname}-${videoUrl}`}
-          className="absolute inset-0 w-full h-full object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
+          className="absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90"
           src={videoUrl}
           autoPlay
           muted
           loop
           playsInline
-          preload="auto"
-        />
-      ) : (
-        <Image
-          key={`img-${pathname}-${posterSrc}`}
-          src={posterSrc}
-          alt={posterAlt}
-          fill
-          className="object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
-          sizes="100vw"
-          priority
         />
       )}
       
@@ -81,11 +114,9 @@ export function HeroVideo(props: HeroVideoProps) {
       <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" />
       
       <div className="container relative z-[4] text-center px-4">
-        <motion.div
+        <div
           key={`hero-content-${pathname}`}
-          initial={{ opacity: 0, y: 40 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
+          className="animate-in fade-in slide-in-from-bottom-10 duration-1000 ease-out fill-mode-both"
         >
           <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"
@@ -114,7 +145,7 @@ export function HeroVideo(props: HeroVideoProps) {
               {secondaryCtaLabel}
             </Button>
           </div>
-        </motion.div>
+        </div>
       </div>
     </div>
   );

components/blocks/JobListingBlock.tsx

@@ -37,7 +37,7 @@ const containerVariants = {
 };
 
 const itemVariants = {
-  hidden: { opacity: 0, y: 40 },
+  hidden: { opacity: 0, y: 20 },
   visible: {
     opacity: 1,
     y: 0,
@@ -75,7 +75,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
             <motion.h3 
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true, amount: 0.1 }}
+              viewport={{ once: true, margin: "-50px" }}
               transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }}
               className="font-heading font-extrabold text-3xl md:text-4xl text-neutral-dark mb-8 md:mb-12 flex items-center gap-4"
             >
@@ -86,7 +86,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
               variants={containerVariants}
               initial="hidden"
               whileInView="visible"
-              viewport={{ once: true, amount: 0.1 }}
+              viewport={{ once: true, margin: "-50px" }}
               className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
             >
               {fairs.map((messe, idx) => {
@@ -180,7 +180,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
             <motion.h2 
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
-              viewport={{ once: true, amount: 0.1 }}
+              viewport={{ once: true, margin: "-50px" }}
               transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }}
               className="font-heading font-extrabold text-3xl md:text-4xl text-neutral-dark mb-6 md:mb-8"
             >
@@ -192,7 +192,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
                 variants={containerVariants}
                 initial="hidden"
                 whileInView="visible"
-                viewport={{ once: true, amount: 0.1 }}
+                viewport={{ once: true, margin: "-50px" }}
                 className="grid gap-6"
               >
                 {jobs.map((job: any) => (
@@ -221,7 +221,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
               <motion.div 
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.1 }}
+                viewport={{ once: true, margin: "-50px" }}
                 transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }}
                 className="bg-neutral-50 border border-neutral-100 rounded-2xl p-12 text-center"
               >

components/blocks/ReferencesSlider.tsx

@@ -107,15 +107,15 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
         </div>
       </div>
 
-      <div className="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="w-full relative z-10">
+        <div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-neutral-dark to-transparent z-20 pointer-events-none" />
         <div 
           ref={containerRef}
           onMouseDown={onMouseDown}
           onMouseLeave={onMouseLeave}
           onMouseUp={onMouseUp}
           onMouseMove={onMouseMove}
-          className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 px-6 md:px-[max(2rem,calc((100vw-1280px)/2))] lg:px-[max(2.5rem,calc((100vw-1280px)/2))] [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 pb-8 pt-4 pl-4 sm:pl-[1.5rem] md:pl-[2rem] lg:pl-[max(2.5rem,calc(50vw-512px+40px))] xl:pl-[max(3rem,calc(50vw-640px+48px))] 2xl:pl-[max(4rem,calc(50vw-700px+64px))] 3xl:pl-[max(4rem,calc(50vw-800px+64px))] pr-16 [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 
@@ -125,7 +125,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
             return (
               <motion.div
                 key={ref.id}
-                initial={{ opacity: 0, x: 50 }}
+                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] }}

components/blocks/ServiceDetailGrid.tsx

@@ -38,7 +38,7 @@ const containerVariants: Variants = {
 };
 
 const itemVariants: Variants = {
-  hidden: { opacity: 0, y: 40 },
+  hidden: { opacity: 0, y: 20 },
   visible: { opacity: 1, y: 0, transition: { duration: 1.0, ease: [0.16, 1, 0.3, 1] } },
 };
 

components/blocks/SubCompanyTiles.tsx

@@ -85,7 +85,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
             variants={containerVariants}
             initial="hidden"
             whileInView="visible"
-            viewport={{ once: true, amount: 0.1 }}
+            viewport={{ once: true, margin: "-50px" }}
           >
           {companiesData.map((company: any, index: number) => {
             const isCurrent = company.title.toUpperCase() === 'E-TIB GMBH';

components/blocks/SupportCTA.tsx

@@ -43,7 +43,7 @@ export const SupportCTA: React.FC<SupportCTAProps> = (props) => {
       variants={containerVariants}
       initial="hidden"
       whileInView="visible"
-      viewport={{ once: true, margin: "-100px" }}
+      viewport={{ once: true, margin: "-50px" }}
       className="mt-12 md:mt-24 p-6 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group"
     >
       <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" />

components/blocks/TeamGrid.tsx

@@ -42,7 +42,7 @@ export function TeamGrid({ members }: TeamGridProps) {
           {members.map((member, i) => (
             <motion.div
               key={member.id}
-              initial={{ opacity: 0, y: 40 }}
+              initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, margin: "-50px" }}
               transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}

components/layout/Header.tsx

@@ -101,6 +101,7 @@ export function Header({ navLinks }: HeaderProps) {
               fill
               className="object-contain object-left group-hover:scale-105 transition-transform duration-500 origin-left"
               priority
+              fetchPriority="high"
               sizes="192px"
             />
             {/* Masked sweep overlay on hover */}

components/layout/MobileBottomNav.tsx

@@ -25,11 +25,14 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp
   React.useEffect(() => {
     if (isFlyoutOpen) {
       document.body.style.overflow = 'hidden';
+      document.documentElement.style.overflow = 'hidden';
     } else {
       document.body.style.overflow = '';
+      document.documentElement.style.overflow = '';
     }
     return () => {
       document.body.style.overflow = '';
+      document.documentElement.style.overflow = '';
     };
   }, [isFlyoutOpen]);
 

components/providers/InitialLoader.tsx

@@ -4,51 +4,29 @@ import React, { useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 
-const PRELOAD_VIDEOS = [
-  '/assets/videos/web/hero-bohrung.mp4'
-];
 
 export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?: boolean }) {
   const [isLoading, setIsLoading] = useState(shouldShowLoader);
 
-  useEffect(() => {
-    if (!shouldShowLoader) return;
-    
-    // Fallback Timeout (4 Sekunden), falls Videos hängen
-    const timeout = setTimeout(() => {
-      finishLoading();
-    }, 4000);
-
-    let videosLoaded = 0;
-    
-    const checkAllLoaded = () => {
-      videosLoaded++;
-      if (videosLoaded === PRELOAD_VIDEOS.length) {
-        clearTimeout(timeout);
-        // Kleine Verzögerung für die smootheness
-        setTimeout(finishLoading, 800);
-      }
-    };
-
-    PRELOAD_VIDEOS.forEach((src) => {
-      const video = document.createElement('video');
-      video.preload = 'auto';
-      video.oncanplaythrough = checkAllLoaded;
-      video.onerror = checkAllLoaded; // bei Fehler trotzdem weitermachen
-      video.src = src;
-      video.load();
-    });
-
-    // Cleanup
-    return () => clearTimeout(timeout);
-  }, [shouldShowLoader]);
-
   const finishLoading = () => {
     // Set a session cookie so the server knows not to render the loader again
     document.cookie = "etib_initial_loader_v5=true; path=/; samesite=lax";
     setIsLoading(false);
   };
 
+  useEffect(() => {
+    if (!shouldShowLoader) return;
+    
+    // Just show the animation for a short time to allow UI to mount,
+    // we don't preload 10MB videos anymore to save pagespeed!
+    const timeout = setTimeout(() => {
+      finishLoading();
+    }, 1200);
+
+    // Cleanup
+    return () => clearTimeout(timeout);
+  }, [shouldShowLoader]);
+
   // Wenn wir serverseitig rendern und es nicht zeigen sollen, return null
   if (!shouldShowLoader) return null;
 

content/de/home.mdx

@@ -88,7 +88,7 @@ description: "Die E-TIB GmbH ist Ihr zuverlässiger Partner für komplexe Kabelt
       {/* Right Column: Imagery & Mission */}
       <div className="lg:col-span-7 relative">
         <div className="aspect-[4/3] md:aspect-[16/9] lg:aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl relative border border-neutral-200/50">
-          <img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB im Einsatz" className="w-full h-full object-cover" />
+          <img src="/_next/image?url=%2Fassets%2Fphotos%2FEtib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg&w=1920&q=75" alt="E-TIB im Einsatz" className="w-full h-full object-cover" loading="lazy" decoding="async" />
           <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/40 to-transparent"></div>
           
           <div className="absolute bottom-0 left-0 w-full p-8 md:p-12">

content/de/referenzen/jevenstedt.mdx

@@ -9,7 +9,7 @@ featuredImage: "/assets/photos/DJI_0037.JPG"
 
 - 500 m Kabelgraben ausheben und verfüllen
 - 4.500 m Einpflügen von 3 x PE-Schutzrohr d 160
-- 3.200 m Horizontalspülbohrung d 160
+- 12.000 m Horizontalspülbohrung d 160
 - 8.500 m Verlegung HS-Kabel 1.000 mm² 64/110 kV
 - 11 Satz Verbindungsmuffen 1.000 mm² 64/110 kV
 - 2 Satz Freiluftendverschlüsse 1.000 mm² 64/110 kV

content/de/team.mdx

@@ -42,7 +42,7 @@ layout: "fullBleed"
     {
       id: "martin-polan",
       name: "Martin Polan",
-      position: "Bauleiter",
+      position: "Bauleitung",
       email: "m.polan@e-tib.com",
       phone: "+49 171 3868167",
       image: "/assets/photos/team/martin.jpg"

content/en/home.mdx

@@ -88,7 +88,7 @@ description: "E-TIB GmbH is your reliable partner for complex cable routes, hori
       {/* Right Column: Imagery & Mission */}
       <div className="lg:col-span-7 relative">
         <div className="aspect-[4/3] md:aspect-[16/9] lg:aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl relative border border-neutral-200/50">
-          <img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB in action" className="w-full h-full object-cover" />
+          <img src="/_next/image?url=%2Fassets%2Fphotos%2FEtib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg&w=1920&q=75" alt="E-TIB in action" className="w-full h-full object-cover" loading="lazy" decoding="async" />
           <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/40 to-transparent"></div>
           
           <div className="absolute bottom-0 left-0 w-full p-8 md:p-12">

content/en/referenzen/jevenstedt.mdx

@@ -9,7 +9,7 @@ featuredImage: "/assets/photos/DJI_0037.JPG"
 
 - Excavation and backfilling of 500 m cable trench
 - 4,500 m plowing of 3 x PE protective pipe d 160
-- 3,200 m HDD directional drilling d 160
+- 12,000 m HDD directional drilling d 160
 - 8,500 m laying of HV cable 1,000 mm² 64/110 kV
 - 11 sets of connection joints 1,000 mm² 64/110 kV
 - 2 sets of outdoor terminations 1,000 mm² 64/110 kV

content/en/team.mdx

@@ -42,7 +42,7 @@ layout: "fullBleed"
     {
       id: "martin-polan",
       name: "Martin Polan",
-      position: "Site Manager",
+      position: "Site Management",
       email: "m.polan@e-tib.com",
       phone: "+49 171 3868167",
       image: "/assets/photos/team/martin.jpg"

lib/map-data.ts

@@ -189,62 +189,6 @@ export const minorLocations: Location[] = [
     y: 83.33,
     description: 'fiber',
   },
-  {
-    id: 'hdd-29436-meter-29436',
-    name: 'HDD                                               29436 Meter',
-    type: 'minor_node',
-    x: 46.89,
-    y: 41.34,
-    description: 'power',
-  },
-  {
-    id: 'hdd-28680-meter-28680',
-    name: 'HDD                                              28680 Meter',
-    type: 'minor_node',
-    x: 44.84,
-    y: 43.61,
-    description: 'power',
-  },
-  {
-    id: 'hdd-44655-meter-44655',
-    name: 'HDD                                              44655 Meter',
-    type: 'minor_node',
-    x: 49.36,
-    y: 48.57,
-    description: 'power',
-  },
-  {
-    id: 'kabelverlegung-76727-meter-76727',
-    name: 'Kabelverlegung                        76727 Meter',
-    type: 'minor_node',
-    x: 45.57,
-    y: 49.95,
-    description: 'power',
-  },
-  {
-    id: 'offener-tiefbau-21288-meter-21288',
-    name: 'Offener Tiefbau                        21288 Meter',
-    type: 'minor_node',
-    x: 40.15,
-    y: 49.41,
-    description: 'power',
-  },
-  {
-    id: 'offener-tiefbau-30773-meter-30773',
-    name: 'Offener Tiefbau                        30773  Meter',
-    type: 'minor_node',
-    x: 41.74,
-    y: 43.78,
-    description: 'power',
-  },
-  {
-    id: 'offener-tiefbau-34815-meter-34815',
-    name: 'Offener Tiefbau                        34815  Meter',
-    type: 'minor_node',
-    x: 43.91,
-    y: 42.14,
-    description: 'power',
-  },
   {
     id: 'pv-anlage-01909-grosshartau-01909',
     name: 'PV-Anlage, 01909 Großhartau',

lib/og-helper.tsx

@@ -6,15 +6,26 @@ import { join } from 'path';
  * Since we are using runtime = 'nodejs', we can read them from the filesystem.
  */
 export async function getOgFonts() {
-  const boldFontPath = join(process.cwd(), 'public/fonts/Inter-Bold.woff');
-  const regularFontPath = join(process.cwd(), 'public/fonts/Inter-Regular.woff');
+  const boldFontPath = join(process.cwd(), 'public/fonts/Inter-Bold.ttf');
+  const regularFontPath = join(process.cwd(), 'public/fonts/Inter-Regular.ttf');
 
   try {
     console.log(`[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`);
-    const boldFont = readFileSync(boldFontPath);
-    const regularFont = readFileSync(regularFontPath);
+    const boldFontBuffer = readFileSync(boldFontPath);
+    const regularFontBuffer = readFileSync(regularFontPath);
+
+    // Satori (Vercel OG) strictly requires an ArrayBuffer, not a Node Buffer view.
+    const boldFont = boldFontBuffer.buffer.slice(
+      boldFontBuffer.byteOffset,
+      boldFontBuffer.byteOffset + boldFontBuffer.byteLength,
+    );
+    const regularFont = regularFontBuffer.buffer.slice(
+      regularFontBuffer.byteOffset,
+      regularFontBuffer.byteOffset + regularFontBuffer.byteLength,
+    );
+
     console.log(
-      `[OG] Fonts loaded successfully (${boldFont.length} and ${regularFont.length} bytes)`,
+      `[OG] Fonts loaded successfully (${boldFont.byteLength} and ${regularFont.byteLength} bytes)`,
     );
 
     return [

lib/standorte-data.ts

@@ -35,7 +35,7 @@ export const standorteData: StandortData[] = [
   {
     id: 'guben',
     name: 'E-TIB GmbH',
-    shortName: 'Guben (Hauptsitz)',
+    shortName: 'Standort Brandenburg (Hauptsitz)',
     type: 'hq',
     description: {
       de: 'Unser Hauptsitz in Guben bildet das strategische und operative Zentrum der E-TIB Gruppe. Von hier aus steuern wir bundesweit Großprojekte im Kabelleitungsnetzbau und koordinieren unseren hochmodernen Maschinenpark.',
@@ -67,7 +67,7 @@ export const standorteData: StandortData[] = [
         'Central project management'
       ]
     },
-    image: '/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg',
+    image: '/assets/photos/DSC02114.jpg',
     gallery: [
       '/assets/photos/DSC02114.jpg',
       '/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-45.jpg'
@@ -117,7 +117,7 @@ export const standorteData: StandortData[] = [
   {
     id: 'buelstedt',
     name: 'E-TIB Ingenieurgesellschaft mbH',
-    shortName: 'Bülstedt (Ingenieurgesellschaft)',
+    shortName: 'Standort Niedersachsen',
     type: 'branch',
     description: {
       de: 'Unsere Ingenieurgesellschaft in Bülstedt ist spezialisiert auf die hochpräzise Planung, Vermessung und Projektierung von Energie- und Telekommunikationsnetzen. Hier verschmelzen technische Expertise und modernes Datenmanagement.',

next.config.mjs

@@ -15,6 +15,10 @@ const nextConfig = {
     pagesBufferLength: 2,
   },
   experimental: {
+    staleTimes: {
+      dynamic: 0,
+      static: 30,
+    },
     optimizePackageImports: [
       'lucide-react',
       'framer-motion',

package.json

@@ -138,7 +138,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.2.13-rc.62",
+  "version": "2.2.30",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",

proxy.ts

@@ -9,8 +9,9 @@ export default createMiddleware({
 export const config = {
   // Match all pathnames except for
   // - /api (API routes)
+  // - /stats (Analytics proxy)
   // - /_next (Next.js internals)
   // - /_static (inside /public)
   // - all root files inside /public (e.g. /favicon.ico)
-  matcher: ['/((?!api|_next|assets|_static|_vercel|[\\w-]+\\.\\w+).*)']
+  matcher: ['/((?!api|stats|_next|assets|_static|_vercel|[\\w-]+\\.\\w+).*)']
 };

test_og.png

@@ -0,0 +1 @@
+Bad Gateway