fix(lcp): revert DynamicFramerMotion wrapper to prevent React 18 Suspense DOM deletion during hydration

app/[locale]/layout.tsx

@@ -209,7 +209,7 @@ export default async function Layout(props: {
             <JsonLd />
             <AnalyticsShell />
 
-            {feedbackEnabled && <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />}
+            <FeedbackClientWrapper />
           </TransitionProvider>
         </NextIntlClientProvider>
       </body>

app/[locale]/standorte/page.tsx

@@ -7,8 +7,7 @@ import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
 import { SITE_URL } from '@/lib/schema';
 import Image from 'next/image';
 import { standorteData, standorteLocations } from '@/lib/standorte-data';
-import nextDynamic from 'next/dynamic';
-const InteractiveGermanyMap = nextDynamic(() => import('@/components/blocks/InteractiveGermanyMap').then(mod => mod.InteractiveGermanyMap));
+import { InteractiveGermanyMap } from '@/components/blocks/InteractiveGermanyMap';
 
 interface PageProps {
   params: Promise<{

components/FeedbackClientWrapper.tsx

@@ -2,17 +2,17 @@
 
 import dynamic from 'next/dynamic';
 
-const FeedbackOverlay = dynamic(
-  () => import('@mintel/next-feedback/FeedbackOverlay').then((mod) => mod.FeedbackOverlay),
-  { ssr: false },
-);
+const IS_ENABLED = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
 
-interface FeedbackClientWrapperProps {
-  feedbackEnabled: boolean;
-}
+const FeedbackOverlay = IS_ENABLED 
+  ? dynamic(
+      () => import('@mintel/next-feedback/FeedbackOverlay').then((mod) => mod.FeedbackOverlay),
+      { ssr: false },
+    )
+  : () => null;
 
-export default function FeedbackClientWrapper({ feedbackEnabled }: FeedbackClientWrapperProps) {
-  if (!feedbackEnabled) return null;
+export default function FeedbackClientWrapper() {
+  if (!IS_ENABLED) return null;
 
   return <FeedbackOverlay />;
 }

components/blocks/HeroVideo.tsx

@@ -34,7 +34,7 @@ export function HeroVideo(props: HeroVideoProps) {
 
   let defaultPoster = "/assets/photos/DJI_0048.JPG";
   if (videoUrl && videoUrl.endsWith('.mp4')) {
-    defaultPoster = videoUrl.replace('.mp4', '-poster.jpg');
+    defaultPoster = videoUrl.replace('.mp4', '-poster.webp');
   }
 
   const posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || defaultPoster;
@@ -86,12 +86,14 @@ export function HeroVideo(props: HeroVideoProps) {
         src={posterSrc}
         alt={posterAlt}
         fill
-        className="object-cover z-[1] pointer-events-none filter contrast-125 saturate-110 brightness-90"
+        className="object-cover z-[1] pointer-events-none"
         sizes="100vw"
         quality={25}
         priority
         fetchPriority="high"
       />
+      {/* Fast compositing layer to replace the heavy CSS filters on the image */}
+      <div className="absolute inset-0 bg-black/20 z-[1] pointer-events-none mix-blend-multiply" />
 
       {/* Render video on top if available, but defer src to avoid blocking LCP */}
       {videoUrl && (

components/blocks/ReferencesSlider.tsx

@@ -47,19 +47,6 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
   const isDraggingRef = React.useRef(false);
   const [isDragging, setIsDragging] = React.useState(false);
 
-  // Center the first card on mount so it appears in the middle with peek on both sides
-  React.useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    // Wait for layout to settle
-    requestAnimationFrame(() => {
-      const firstCard = el.querySelector('[data-card]') as HTMLElement | null;
-      if (!firstCard) return;
-      const cardCenter = firstCard.offsetLeft + firstCard.offsetWidth / 2;
-      const containerCenter = el.offsetWidth / 2;
-      el.scrollLeft = cardCenter - containerCenter;
-    });
-  }, [references.length]);
 
   const badge = props.badge || data?.badge || t('badge');
   const title = props.title || data?.title || t('title');

lib/og-helper.tsx

@@ -5,7 +5,9 @@ import { join } from 'path';
  * Loads the Inter fonts for use in Satori (Next.js OG Image generation).
  * Since we are using runtime = 'nodejs', we can read them from the filesystem.
  */
+let cachedFonts: any[] | null = null;
 export async function getOgFonts() {
+  if (cachedFonts) return cachedFonts;
   const boldFontPath = join(process.cwd(), 'public/fonts/Inter-Bold.woff');
   const regularFontPath = join(process.cwd(), 'public/fonts/Inter-Regular.woff');
 
@@ -28,7 +30,7 @@ export async function getOgFonts() {
       `[OG] Fonts loaded successfully (${boldFont.byteLength} and ${regularFont.byteLength} bytes)`,
     );
 
-    return [
+    cachedFonts = [
       {
         name: 'Inter',
         data: boldFont,
@@ -42,28 +44,35 @@ export async function getOgFonts() {
         style: 'normal' as const,
       },
     ];
+    return cachedFonts;
   } catch (error) {
     console.error(`[OG] Failed to load fonts from ${process.cwd()}:`, error);
     return [];
   }
 }
 
+let cachedBackground: string | null = null;
 export function getOgBackground() {
+  if (cachedBackground) return cachedBackground;
   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}`;
+    cachedBackground = `data:image/jpeg;base64,${bgBase64}`;
+    return cachedBackground;
   } catch (err) {
     console.error('[OG] Failed to load background', err);
     return undefined;
   }
 }
 
+let cachedLogo: string | null = null;
 export function getOgLogo() {
+  if (cachedLogo) return cachedLogo;
   try {
     const logoPath = join(process.cwd(), 'public/assets/logo-white.png');
     const logoBase64 = readFileSync(logoPath, 'base64');
-    return `data:image/png;base64,${logoBase64}`;
+    cachedLogo = `data:image/png;base64,${logoBase64}`;
+    return cachedLogo;
   } catch (err) {
     console.error('[OG] Failed to load logo', err);
     return undefined;

next.config.mjs

@@ -449,7 +449,7 @@ const nextConfig = {
   },
   images: {
     qualities: [25, 50, 75, 100],
-    formats: ['image/avif', 'image/webp'],
+    formats: ['image/webp'],
     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     remotePatterns: [
       {

package.json

@@ -139,7 +139,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.2.91",
+  "version": "2.2.94",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",