chore: bump version to 2.2.44

.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:
@@ -290,6 +290,10 @@ jobs:
       # Analytics
       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"
@@ -392,10 +400,19 @@ jobs:
           scp docker-compose.yml root@alpha.mintel.me:$SITE_DIR/docker-compose.yml
           
           ssh root@alpha.mintel.me "docker system prune -f"
-          ssh root@alpha.mintel.me "docker rm -f \$(docker ps -a -q --filter name=${SLUG}-etib-) 2>/dev/null || true"
+
+          # ── Deterministic cleanup: stop the EXACT compose project we're about to redeploy ──
+          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${PROJECT_NAME}' --env-file '$ENV_FILE' down --remove-orphans 2>/dev/null || true"
+
+          # ── Safety net: kill ANY container whose Traefik host rule matches our target domain ──
+          # This catches ghost containers from prior deployments that used a different project name
+          # (e.g. 'e-tibcom' vs 'etib-production' due to Docker Compose defaulting to dir name)
+          ssh root@alpha.mintel.me "docker ps -q --filter label=traefik.http.routers.${PROJECT_NAME}.rule 2>/dev/null | xargs -r docker rm -f 2>/dev/null || true"
+          ssh root@alpha.mintel.me "docker ps --format '{{.Names}}' | grep -E '^e-tibcom-' | xargs -r docker rm -f 2>/dev/null || true"
+
           ssh root@alpha.mintel.me "cd $SITE_DIR && echo '${{ secrets.REGISTRY_PASS }}' | docker login registry.infra.mintel.me -u '${{ secrets.REGISTRY_USER }}' --password-stdin"
-          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' pull"
-          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' up -d --remove-orphans"
+          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${PROJECT_NAME}' --env-file '$ENV_FILE' pull"
+          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${PROJECT_NAME}' --env-file '$ENV_FILE' up -d --remove-orphans"
           ssh root@alpha.mintel.me "docker system prune -f --filter 'until=24h'"
 
   # ──────────────────────────────────────────────────────────────────────────────

.lighthouseci/flags-35c461a1-1737-443e-b40c-153ece4e7189.json

@@ -0,0 +1 @@
+{"chromeFlags":"--no-sandbox --disable-setuid-sandbox --disable-dev-shm-usage --headless=new","port":59457}

app/[locale]/[slug]/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getPageBySlug } from '@/lib/pages';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -20,12 +20,16 @@ export default async function Image({
   }
 
   const fonts = await getOgFonts();
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
   return new ImageResponse(
     <OGImageTemplate
-      title={pageData.frontmatter.title}
-      description={pageData.frontmatter.excerpt}
+      title="Die Experten für Kabelnetzbau"
+      description={`${pageData.frontmatter.title}`}
       label="Information"
+      image={bg}
+      logo={logo}
     />,
     {
       ...OG_IMAGE_SIZE,

app/[locale]/blog/[slug]/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getPostBySlug } from '@/lib/blog';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 import { SITE_URL } from '@/lib/schema';
 
 export const size = OG_IMAGE_SIZE;
@@ -52,13 +52,16 @@ export default async function Image({
   if (featuredImage) {
     base64Image = await fetchImageAsBase64(featuredImage);
   }
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
   return new ImageResponse(
     <OGImageTemplate
-      title={post.frontmatter.title}
-      description={post.frontmatter.excerpt}
+      title="Die Experten für Kabelnetzbau"
+      description={`${post.frontmatter.title}`}
       label={post.frontmatter.category || 'Blog'}
-      image={base64Image || featuredImage}
+      image={base64Image || featuredImage || bg}
+      logo={logo}
     />,
     {
       ...OG_IMAGE_SIZE,

app/[locale]/blog/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -11,9 +11,17 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Blog.meta' });
   const fonts = await getOgFonts();
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
   return new ImageResponse(
-    <OGImageTemplate title={t('title')} description={t('description')} label="Blog" />,
+    <OGImageTemplate 
+      title="Die Experten für Kabelnetzbau" 
+      description={t('title')} 
+      label="Blog" 
+      image={bg}
+      logo={logo}
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts,

app/[locale]/contact/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -11,12 +11,22 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Contact' });
   const fonts = await getOgFonts();
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
-  const title = t('meta.title') || t('title');
-  const description = t('meta.description') || t('subtitle');
+  let title = t('meta.title') || t('title');
+  if (title.startsWith('E-TIB GmbH | ')) {
+    title = title.substring('E-TIB GmbH | '.length);
+  }
 
   return new ImageResponse(
-    <OGImageTemplate title={title} description={description} label="Contact" />,
+    <OGImageTemplate 
+      title="Die Experten für Kabelnetzbau" 
+      description={title} 
+      label="Contact" 
+      image={bg}
+      logo={logo}
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts,

app/[locale]/contact/page.tsx

@@ -57,7 +57,7 @@ export async function generateStaticParams() {
 }
 
 export default async function ContactPage({ params }: ContactPageProps) {
-  console.log('--- RENDERING CONTACT PAGE FOR LOCALE ---');
+
   const { locale } = await params;
   setRequestLocale(locale);
   const t = await getTranslations({ locale, namespace: 'Contact' });

app/[locale]/layout.tsx

@@ -10,7 +10,7 @@ import { getMessages } from 'next-intl/server';
 import '../../styles/globals.css';
 import { SITE_URL } from '@/lib/schema';
 import FeedbackClientWrapper from '@/components/FeedbackClientWrapper';
-import AnnotatorClientWrapper from '@/components/AnnotatorClientWrapper';
+
 import { setRequestLocale } from 'next-intl/server';
 import { Inter } from 'next/font/google';
 import { mapFileSlugToTranslated } from '@/lib/slugs';
@@ -175,9 +175,7 @@ export default async function Layout(props: {
 
   // Read directly from process.env — bypasses all abstraction to guarantee correctness
   const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
-
-  const cookieStore = await cookies();
-  const hasSeenLoader = cookieStore.has('etib_initial_loader_v5');
+  const hasSeenLoader = true; // Disabled to allow static generation and instant LCP (Lighthouse 100)
 
   return (
     <html
@@ -186,11 +184,9 @@ export default async function Layout(props: {
       data-scroll-behavior="smooth"
     >
       <head>
-        <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}>
@@ -213,8 +209,7 @@ export default async function Layout(props: {
             <Footer companyInfo={companyInfo} />
             <JsonLd />
             <AnalyticsShell />
-            {/* Annotator vorübergehend deaktiviert auf Staging laut Anforderung */}
-            {/* process.env.TARGET !== 'production' && <AnnotatorClientWrapper /> */}
+
             {feedbackEnabled && <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />}
           </TransitionProvider>
         </NextIntlClientProvider>

app/[locale]/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, getOgBackground, getOgLogo, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -10,17 +10,21 @@ export const runtime = 'nodejs';
 export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Index.meta' });
+
   const fonts = await getOgFonts();
+  const bg = getOgBackground();
+  const logo = getOgLogo();
 
   return new ImageResponse(
     <OGImageTemplate
-      title={t('title')}
-      description={t('description')}
-      label="Reliable Energy Infrastructure"
+      title="Die Experten für Kabelnetzbau"
+      label="Kabelnetzbau & Infrastruktur"
+      image={bg}
+      logo={logo}
     />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
     },
   );
-}
+}

app/[locale]/page.tsx

@@ -4,17 +4,16 @@ import { notFound } from 'next/navigation';
 import { getMdxContent } from '@/lib/mdx';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 
-export const dynamic = 'force-dynamic';
-
 import nextDynamic from 'next/dynamic';
+import { getImageProps } from 'next/image';
 
-const HomeHero = nextDynamic(() => import('@/components/blocks/HeroVideo').then(mod => mod.HeroVideo), { ssr: true });
+import { HeroVideo as HomeHero } from '@/components/blocks/HeroVideo';
 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 { HeroSection } from '@/components/blocks/HeroSection';
 import JsonLd from '@/components/JsonLd';
 
 import { Button } from '@/components/ui/Button';
@@ -38,6 +37,42 @@ const mdxComponents = (references: any[]) => ({
   AnimatedCounter,
   InteractiveGermanyMap,
   ScaleOfImpact,
+  img: (props: any) => {
+    // Parse src if it's already a next image proxy
+    let src = props.src;
+    if (typeof src === 'string' && src.startsWith('/_next/image')) {
+      try {
+        const urlParam = new URLSearchParams(src.split('?')[1]).get('url');
+        if (urlParam) src = decodeURIComponent(urlParam);
+      } catch (e) {
+        // Fallback
+      }
+    }
+    
+    // Use Next.js getImageProps for responsive srcSet generation
+    const {
+      props: { srcSet, src: finalSrc, sizes }
+    } = getImageProps({
+      src,
+      alt: props.alt || '',
+      width: 1920,
+      height: 1080,
+      sizes: '(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 50vw',
+      quality: 80,
+    });
+
+    return (
+      <img 
+        {...props} 
+        src={finalSrc} 
+        srcSet={srcSet}
+        sizes={sizes}
+        loading="lazy" 
+        decoding="async" 
+        style={{ width: '100%', height: 'auto', ...props.style }}
+      />
+    );
+  }
 });
 
 export async function generateMetadata(props: any): Promise<Metadata> {

app/[locale]/referenzen/page.tsx

@@ -28,9 +28,9 @@ const CustomLi = ({ children, ...props }: any) => {
   else if (lowerText.includes('vlf') || lowerText.includes('otdr')) Icon = Zap;
   
   return (
-    <li className="flex items-start gap-3 p-3 bg-neutral-50/50 border border-neutral-100 rounded-xl" {...props}>
-      <Icon className="w-4 h-4 text-primary shrink-0 mt-[2px]" />
-      <span className="text-sm font-medium text-neutral-700 leading-tight">{children}</span>
+    <li className="flex items-start gap-3 pl-4 pr-6 py-3.5 bg-neutral-50/50 border border-neutral-100 rounded-xl" {...props}>
+      <Icon className="w-5 h-5 text-primary shrink-0 mt-0.5" />
+      <span className="text-sm font-medium text-neutral-700 leading-snug [&>p]:mb-0">{children}</span>
     </li>
   );
 };

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/OGImageTemplate.tsx

@@ -5,6 +5,7 @@ interface OGImageTemplateProps {
   description?: string;
   label?: string;
   image?: string;
+  logo?: string;
   mode?: 'dark' | 'light' | 'image';
 }
 
@@ -13,11 +14,11 @@ export function OGImageTemplate({
   description,
   label,
   image,
+  logo,
   mode = 'dark',
 }: OGImageTemplateProps) {
-  const primaryBlue = '#001a4d';
-  const accentGreen = '#10a379';
-  const saturatedBlue = '#011dff';
+  const backgroundDark = '#1a1a1a';
+  const primaryGreen = '#0e7a5c';
 
   const containerStyle: React.CSSProperties = {
     height: '100%',
@@ -26,7 +27,7 @@ export function OGImageTemplate({
     flexDirection: 'column',
     alignItems: 'flex-start',
     justifyContent: 'center',
-    backgroundColor: mode === 'light' ? '#ffffff' : primaryBlue,
+    backgroundColor: mode === 'light' ? '#ffffff' : backgroundDark,
     padding: '80px',
     position: 'relative',
     fontFamily: 'Inter',
@@ -65,7 +66,7 @@ export function OGImageTemplate({
               left: 0,
               right: 0,
               bottom: 0,
-              background: 'linear-gradient(to right, rgba(0,26,77,0.95), rgba(0,26,77,0.6))',
+              background: 'linear-gradient(135deg, rgba(26,26,26,0.98) 0%, rgba(26,26,26,0.85) 40%, rgba(14,122,92,0.4) 100%)',
             }}
           />
         </div>
@@ -75,101 +76,127 @@ export function OGImageTemplate({
       <div
         style={{
           position: 'absolute',
-          top: '-150px',
-          right: '-150px',
-          width: '600px',
-          height: '600px',
-          borderRadius: '300px',
-          backgroundColor: `${accentGreen}15`,
+          top: '-300px',
+          right: '-200px',
+          width: '800px',
+          height: '1200px',
+          backgroundColor: `${primaryGreen}1A`,
+          transform: 'rotate(25deg)',
           display: 'flex',
         }}
       />
 
-      <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 10 }}>
-        {/* Label / Category */}
-        {label && (
-          <div
-            style={{
-              fontSize: '24px',
-              fontWeight: 700,
-              color: accentGreen,
-              textTransform: 'uppercase',
-              letterSpacing: '0.3em',
-              marginBottom: '32px',
-              display: 'flex',
-            }}
-          >
-            {label}
-          </div>
-        )}
-
-        {/* Title */}
-        <div
-          style={{
-            fontSize: title.length > 40 ? '64px' : '82px',
-            fontWeight: 700,
-            color: 'white',
-            lineHeight: '1.05',
-            maxWidth: '950px',
-            marginBottom: '40px',
-            display: 'flex',
-            letterSpacing: '-0.02em',
-          }}
-        >
-          {title}
-        </div>
-
-        {/* Description */}
-        {description && (
-          <div
-            style={{
-              fontSize: '32px',
-              color: 'rgba(255,255,255,0.7)',
-              maxWidth: '850px',
-              lineHeight: '1.4',
-              display: 'flex',
-              fontWeight: 400,
-            }}
-          >
-            {description.length > 160 ? description.substring(0, 157) + '...' : description}
-          </div>
-        )}
-      </div>
-
-      {/* Brand Footer */}
+      {/* Main Content Wrapper */}
       <div
         style={{
-          position: 'absolute',
-          bottom: '80px',
-          left: '80px',
           display: 'flex',
-          alignItems: 'center',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          height: '100%',
+          width: '100%',
+          position: 'relative',
+          zIndex: 10,
         }}
       >
+        {/* Top: Text Content */}
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          {/* Label / Category */}
+          {label && (
+            <div
+              style={{
+                fontSize: '24px',
+                fontWeight: 700,
+                color: primaryGreen,
+                textTransform: 'uppercase',
+                letterSpacing: '0.25em',
+                marginBottom: '24px',
+                display: 'flex',
+              }}
+            >
+              {label}
+            </div>
+          )}
+
+          {/* Title */}
+          <div
+            style={{
+              fontSize: '72px',
+              fontWeight: 700,
+              color: 'white',
+              lineHeight: '1.1',
+              maxWidth: '900px',
+              marginBottom: '24px',
+              display: 'flex',
+              letterSpacing: '-0.02em',
+            }}
+          >
+            {title}
+          </div>
+
+          {/* Description */}
+          {description && (
+            <div
+              style={{
+                fontSize: '36px',
+                color: 'rgba(255,255,255,0.85)',
+                maxWidth: '850px',
+                lineHeight: '1.4',
+                display: '-webkit-box',
+                WebkitLineClamp: 3,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+                fontWeight: 400,
+              }}
+            >
+              {description}
+            </div>
+          )}
+        </div>
+
+        {/* Bottom: Brand Footer */}
         <div
           style={{
-            width: '80px',
-            height: '6px',
-            backgroundColor: accentGreen,
-            borderRadius: '3px',
-            marginRight: '24px',
-          }}
-        />
-        <div
-          style={{
-            fontSize: '24px',
-            fontWeight: 700,
-            color: 'white',
-            textTransform: 'uppercase',
-            letterSpacing: '0.15em',
             display: 'flex',
+            alignItems: 'center',
           }}
         >
-          KLZ Cables
+          {logo ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={logo}
+              alt="E-TIB GmbH"
+              height="56"
+              style={{ marginRight: '24px', objectFit: 'contain' }}
+            />
+          ) : (
+            <div
+              style={{
+                width: '80px',
+                height: '6px',
+                backgroundColor: primaryGreen,
+                borderRadius: '3px',
+                marginRight: '24px',
+              }}
+            />
+          )}
+          {!logo && (
+            <div
+              style={{
+                fontSize: '24px',
+                fontWeight: 700,
+                color: 'white',
+                textTransform: 'uppercase',
+                letterSpacing: '0.15em',
+                display: 'flex',
+              }}
+            >
+              E-TIB GmbH
+            </div>
+          )}
         </div>
       </div>
 
-      {/* Saturated Blue Brand Strip */}
+      {/* Primary Green Brand Strip */}
       <div
         style={{
           position: 'absolute',
@@ -177,7 +204,7 @@ export function OGImageTemplate({
           right: 0,
           width: '12px',
           height: '100%',
-          backgroundColor: saturatedBlue,
+          backgroundColor: primaryGreen,
         }}
       />
     </div>

components/blocks/CompetenceBentoGrid.tsx

@@ -70,7 +70,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
               <h3 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-dark mb-4">{title}</h3>
             </div>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[220px]">
+          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[minmax(220px,auto)]">
              {/* Simplified static grid */}
           </div>
         </Container>
@@ -88,7 +88,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
           </div>
         </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">
+        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[minmax(220px,auto)] px-4 md:px-0">
           {items.map((item, idx) => {
             const isLarge = item.size === 'large';
             const isMedium = item.size === 'medium';

components/blocks/HeroVideo.tsx

@@ -22,6 +22,8 @@ interface HeroVideoProps {
   badge?: string;
 }
 
+import placeholders from '@/lib/placeholders.json';
+
 export function HeroVideo(props: HeroVideoProps) {
   const { data } = props;
   const title = props.title || data?.title || 'DIE EXPERTEN FÜR KABELNETZBAU';
@@ -30,7 +32,12 @@ export function HeroVideo(props: HeroVideoProps) {
   const videoUrl = explicitNoVideo ? null : (props.videoUrl || data?.videoUrl || '/assets/dummy-hero.mp4');
   const pathname = usePathname();
 
-  const posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || "/assets/photos/DJI_0048.JPG";
+  let defaultPoster = "/assets/photos/DJI_0048.JPG";
+  if (videoUrl && videoUrl.endsWith('.mp4')) {
+    defaultPoster = videoUrl.replace('.mp4', '-poster.jpg');
+  }
+
+  const posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || defaultPoster;
   const posterAlt = props.backgroundImage?.alt || data?.posterImage?.alt || "E-TIB Gruppe Baustelle";
 
   const ctaLabel = props.ctaLabel || props.linkText || data?.ctaLabel || 'Unternehmen entdecken';
@@ -41,31 +48,60 @@ 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`;
 
+  const [videoSrcLoaded, setVideoSrcLoaded] = useState(false);
+  useEffect(() => {
+    let interactionTriggered = false;
+
+    const handleInteraction = () => {
+      if (interactionTriggered) return;
+      interactionTriggered = true;
+      setVideoSrcLoaded(true);
+      
+      // Cleanup listeners
+      ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
+        window.removeEventListener(event, handleInteraction)
+      );
+    };
+
+    // Listen for any user interaction
+    ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
+      window.addEventListener(event, handleInteraction, { passive: true, once: true })
+    );
+
+    return () => {
+      ['scroll', 'mousemove', 'touchstart', 'keydown'].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 ? (
+      {/* ALWAYS render the Next.js optimized Image as the LCP element */}
+      <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
+      />
+
+      {/* Render video on top if available, but defer src to avoid blocking LCP */}
+      {videoUrl && (
         <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"
-          src={videoUrl}
+          className={`absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90 transition-opacity duration-1000 ${videoSrcLoaded ? 'opacity-100' : 'opacity-0'}`}
+          src={videoSrcLoaded ? videoUrl : undefined}
           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
+          preload="none"
         />
       )}
       

components/blocks/InteractiveGermanyMap.tsx

@@ -239,7 +239,7 @@ export function InteractiveGermanyMap({
                     animate={{ opacity: 1, y: 0, scale: 1 }}
                     exit={{ opacity: 0, y: 10, scale: 0.95 }}
                     transition={{ duration: 0.2 }}
-                    className="absolute z-[9999] pointer-events-auto bottom-[-60px] left-1/2 -translate-x-1/2 w-[calc(100vw-2rem)] max-w-[320px] md:w-max md:bottom-auto md:left-[var(--md-left)] md:top-[var(--md-top)] md:[transform:var(--md-transform)]"
+                    className="absolute z-[9999] pointer-events-auto bottom-[-60px] left-1/2 -translate-x-1/2 w-[calc(100vw_-_2rem)] max-w-[320px] md:w-max md:bottom-auto md:left-[var(--md-left)] md:top-[var(--md-top)] md:[transform:var(--md-transform)]"
                     style={{
                       '--md-left': `${activeLocation.x}%`,
                       '--md-top': `${activeLocation.y}%`,

components/blocks/ReferencesSlider.tsx

@@ -107,15 +107,18 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
         </div>
       </div>
 
-      <div className="relative z-10">
+      <div className="container 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" />
+        
+        {/* Carousel: stays inside container for left alignment, breaks right to viewport edge */}
         <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'}`}
+          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'}`}
         >
           {references.map((ref, i) => {
             const imgSrc = ref.image 
@@ -163,6 +166,8 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
               </motion.div>
             );
           })}
+          {/* Right padding spacer so last card doesn't clip at viewport edge */}
+          <div className="flex-shrink-0 w-6" aria-hidden="true" />
         </div>
       </div>
 

components/blocks/ScaleOfImpact.tsx

@@ -84,19 +84,19 @@ export function ScaleOfImpact() {
         {/* Static Data Grid (No jumping text) */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-y-4 gap-x-2 md:gap-12 w-full max-w-5xl mt-4 md:mt-12">
           <div className="flex flex-col items-center">
-            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">200<span className="text-primary">+</span></div>
+            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">200<span className="text-emerald-400">+</span></div>
             <div className="text-xs font-bold uppercase tracking-widest text-white/50">{locale === 'en' ? 'Projects' : 'Projekte'}</div>
           </div>
           <div className="flex flex-col items-center">
-            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">974<span className="text-primary text-xl md:text-2xl ml-1">km</span></div>
+            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">974<span className="text-emerald-400 text-xl md:text-2xl ml-1">km</span></div>
             <div className="text-xs font-bold uppercase tracking-widest text-white/50">{locale === 'en' ? 'Cable Laying' : 'Kabelverlegung'}</div>
           </div>
           <div className="flex flex-col items-center">
-            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">300<span className="text-primary text-xl md:text-2xl ml-1">km</span></div>
+            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">300<span className="text-emerald-400 text-xl md:text-2xl ml-1">km</span></div>
             <div className="text-xs font-bold uppercase tracking-widest text-white/50">{locale === 'en' ? 'Open Trenching' : 'Offener Tiefbau'}</div>
           </div>
           <div className="flex flex-col items-center">
-            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">160<span className="text-primary text-xl md:text-2xl ml-1">km</span></div>
+            <div className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter mb-2">160<span className="text-emerald-400 text-xl md:text-2xl ml-1">km</span></div>
             <div className="text-xs font-bold uppercase tracking-widest text-white/50">{locale === 'en' ? 'HDD Drilling' : 'Spülbohrung'}</div>
           </div>
         </div>

components/blocks/SubCompanyTiles.tsx

@@ -73,7 +73,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
         
         {(badge || title) && (
           <div className="text-center md:text-left max-w-3xl mx-auto md:mx-0 mb-16">
-            {badge && <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>}
+            {badge && <h2 className="text-emerald-400 font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>}
             {title && <h3 className="font-heading text-3xl md:text-5xl font-extrabold text-white">{title}</h3>}
           </div>
         )}

components/layout/MobileBottomNav.tsx

@@ -94,7 +94,7 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp
 
   return (
     <>
-      <div className="md:hidden fixed bottom-0 left-0 right-0 z-[9999] px-2 pb-[calc(env(safe-area-inset-bottom)+12px)] pt-4 pointer-events-none flex justify-center">
+      <div className="md:hidden fixed bottom-0 left-0 right-0 z-[9999] px-2 pb-[calc(env(safe-area-inset-bottom)_+_12px)] pt-4 pointer-events-none flex justify-center">
         <nav className="flex justify-between items-center bg-white/75 backdrop-blur-2xl border border-white/60 shadow-[0_8px_32px_rgba(0,0,0,0.12)] rounded-3xl p-1.5 pointer-events-auto w-full max-w-[480px]">
           {items.map((item) => {
             const mappedUrl = item.url.startsWith('/') && !item.url.match(/^\/(en|de)/) 
@@ -129,8 +129,8 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp
                     {item.icon}
                   </motion.div>
                   <motion.span 
-                    animate={{ opacity: isActive ? 1 : 0.7, y: isActive ? 0 : 2 }}
-                    className="text-[9px] font-bold mt-1 tracking-wide"
+                    animate={{ y: isActive ? 0 : 2 }}
+                    className="text-[10px] font-bold mt-1 tracking-wide"
                   >
                     {item.label}
                   </motion.span>
@@ -144,7 +144,7 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp
                   key={item.label}
                   onClick={() => setIsFlyoutOpen(!isFlyoutOpen)}
                   className={`relative flex flex-col items-center justify-center flex-1 h-[62px] transition-colors duration-300 select-none w-full focus:outline-none ${
-                    isActive ? 'text-primary' : 'text-neutral-500 hover:text-neutral-900'
+                    isActive ? 'text-primary' : 'text-neutral-800 hover:text-neutral-900'
                   }`}
                   style={{ WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation' }}
                 >
@@ -159,7 +159,7 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp
                 href={mappedUrl}
                 onClick={() => setIsFlyoutOpen(false)}
                 className={`relative flex flex-col items-center justify-center flex-1 h-[62px] transition-colors duration-300 select-none ${
-                  isActive ? 'text-primary' : 'text-neutral-500 hover:text-neutral-900'
+                  isActive ? 'text-primary' : 'text-neutral-800 hover:text-neutral-900'
                 }`}
                 style={{ WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation' }}
               >
@@ -194,7 +194,7 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp
                   setIsFlyoutOpen(false);
                 }
               }}
-              className="fixed bottom-0 left-0 right-0 z-[9998] bg-white rounded-t-[32px] pt-4 pb-[calc(env(safe-area-inset-bottom)+7rem)] px-6 md:hidden shadow-[0_-20px_40px_rgba(0,0,0,0.1)] border-t border-neutral-100"
+              className="fixed bottom-0 left-0 right-0 z-[9998] bg-white rounded-t-[32px] pt-4 pb-[calc(env(safe-area-inset-bottom)_+_7rem)] px-6 md:hidden shadow-[0_-20px_40px_rgba(0,0,0,0.1)] border-t border-neutral-100"
             >
               <div className="w-16 h-1.5 bg-neutral-200 rounded-full mx-auto mb-6 cursor-grab active:cursor-grabbing" />
               <h3 className="text-xs font-bold uppercase tracking-widest text-neutral-400 mb-4 px-2">{currentLocale === 'de' ? 'Über uns & Mehr' : 'About us & More'}</h3>

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;
 

components/providers/TransitionProvider.tsx

@@ -15,8 +15,6 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
   const [isTransitioning, setIsTransitioning] = useState(false);
   const [transitionMessage, setTransitionMessage] = useState<string | null>(null);
   const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
 
   // We use a ref to track transition state without triggering the route change effect when it turns true
   const isTransitioningRef = React.useRef(isTransitioning);
@@ -24,18 +22,6 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
     isTransitioningRef.current = isTransitioning;
   }, [isTransitioning]);
 
-  // Watch for route changes to complete the transition
-  useEffect(() => {
-    if (isTransitioningRef.current) {
-      // The route has actually changed in the browser, or at least the RSC payload arrived
-      const timer = setTimeout(() => {
-        setIsTransitioning(false);
-        setTimeout(() => setTransitionMessage(null), 300);
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-  }, [pathname, searchParams]); // Run when pathname or search parameters change
-
   const startTransition = useCallback((href: string, message: string | null = null) => {
     // Wenn wir bereits navigieren, nichts tun
     if (isTransitioning) return;
@@ -75,11 +61,35 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
 
   return (
     <TransitionContext.Provider value={{ isTransitioning, transitionMessage, startTransition }}>
+      <React.Suspense fallback={null}>
+        <TransitionRouteWatcher 
+          isTransitioningRef={isTransitioningRef}
+          setIsTransitioning={setIsTransitioning}
+          setTransitionMessage={setTransitionMessage}
+        />
+      </React.Suspense>
       {children}
     </TransitionContext.Provider>
   );
 }
 
+function TransitionRouteWatcher({ isTransitioningRef, setIsTransitioning, setTransitionMessage }: any) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (isTransitioningRef.current) {
+      const timer = setTimeout(() => {
+        setIsTransitioning(false);
+        setTimeout(() => setTransitionMessage(null), 300);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [pathname, searchParams, setIsTransitioning, setTransitionMessage, isTransitioningRef]);
+
+  return null;
+}
+
 export function useTransition() {
   const context = useContext(TransitionContext);
   if (!context) {

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="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" 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/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="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" 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">

lib/og-helper.tsx

@@ -11,10 +11,21 @@ export async function getOgFonts() {
 
   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 strictly requires an ArrayBuffer.
+    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 [
@@ -37,6 +48,28 @@ export async function getOgFonts() {
   }
 }
 
+export function getOgBackground() {
+  try {
+    const bgPath = join(process.cwd(), 'public/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg');
+    const bgBase64 = readFileSync(bgPath, 'base64');
+    return `data:image/jpeg;base64,${bgBase64}`;
+  } catch (err) {
+    console.error('[OG] Failed to load background', err);
+    return undefined;
+  }
+}
+
+export function getOgLogo() {
+  try {
+    const logoPath = join(process.cwd(), 'public/assets/logo-white.png');
+    const logoBase64 = readFileSync(logoPath, 'base64');
+    return `data:image/png;base64,${logoBase64}`;
+  } catch (err) {
+    console.error('[OG] Failed to load logo', err);
+    return undefined;
+  }
+}
+
 /**
  * Common configuration for OG images
  */

lib/placeholders.json

@@ -0,0 +1,7 @@
+{
+  "/assets/photos/DJI_0048.JPG": "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAADwAQCdASoKAAcABUB8JYwCdH8AGDNIbaAA92kbyv6vgOVMTIAAAA==",
+  "/assets/videos/web/hero-bahnkreuzung-poster.jpg": "data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoKAAYABUB8JaQAA3AA/vDUoAA=",
+  "/assets/videos/web/hero-bohrung-poster.jpg": "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACwAQCdASoKAAYABUB8JZACdAEOO2gAAN5Rr3co8j7CDYNKNCAAAA==",
+  "/assets/videos/web/hero-kabelpflug-poster.jpg": "data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoKAAYABUB8JaQAA3AA/vDUoAA=",
+  "/assets/videos/web/hero-messe-poster.jpg": "data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoKAAYABUB8JaQAA3AA/vDUoAA="
+}

package.json

@@ -138,7 +138,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.2.17",
+  "version": "2.2.44",
   "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+).*)']
 };