fix: provide ResponsiveImage component to MDXRemote in dynamic routes to prevent crashes

app/[locale]/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import { notFound, redirect } from 'next/navigation';
+import { getImageProps } from 'next/image';
 import { Container, Badge, Heading } from '@/components/ui';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
@@ -54,6 +55,26 @@ const mdxComponents = {
   GrowthChart,
   DeepDrillAnimation,
   DataGridPulse,
+  ResponsiveImage: (props: any) => {
+    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) {}
+    }
+    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" />
+    );
+  },
   // Standard HTML element mapping for consistent E-TIB typography
   h1: (props: any) => <Heading level={1} size="2" className="hidden" {...props} />, // Hidden because Hero handles H1
   h2: (props: any) => <Heading level={2} size="3" className="mt-16 mb-6 border-b border-neutral-100 pb-4" {...props} />,

app/[locale]/blog/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import { notFound, redirect } from 'next/navigation';
+import { getImageProps } from 'next/image';
 import JsonLd from '@/components/JsonLd';
 import { SITE_URL } from '@/lib/schema';
 import {
@@ -24,6 +25,26 @@ const mdxComponents = {
   h2: (props: any) => <Heading level={2} size="3" className="mt-16 mb-6 border-b border-neutral-100 pb-4" {...props} />,
   h3: (props: any) => <Heading level={3} size="4" className="mt-12 mb-4 text-primary" {...props} />,
   h4: (props: any) => <Heading level={4} size="5" className="mt-8 mb-4 uppercase tracking-widest text-neutral-500" {...props} />,
+  ResponsiveImage: (props: any) => {
+    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) {}
+    }
+    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" />
+    );
+  },
   p: (props: any) => <p className="text-base md:text-lg text-text-secondary leading-[1.8] mb-6 font-normal max-w-3xl" {...props} />,
   ul: (props: any) => <ul className="list-none mb-8 space-y-3 text-base md:text-lg text-text-secondary font-normal max-w-3xl" {...props} />,
   ol: (props: any) => <ol className="list-decimal pl-6 mb-8 space-y-3 text-base md:text-lg text-text-secondary font-normal max-w-3xl" {...props} />,

app/[locale]/referenzen/page.tsx

@@ -1,4 +1,5 @@
 import { Container, Heading, Badge } from '@/components/ui';
+import { getImageProps } from 'next/image';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import { getAllReferences } from '@/lib/references';
@@ -40,6 +41,26 @@ const mdxComponents = {
   li: CustomLi,
   p: (props: any) => <p className="text-neutral-600 text-sm mb-4 leading-relaxed" {...props} />,
   Heading,
+  ResponsiveImage: (props: any) => {
+    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) {}
+    }
+    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" />
+    );
+  },
 };
 
 interface PageProps {