fix(typography): replace generic prose with industrial mdx components on content pages

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

@@ -59,23 +59,32 @@ export default async function ReferenceDetail(props: { params: Promise<{ locale:
     notFound();
   }
 
-  // MDX components mapping can be expanded if we use custom components in reference MDX
+  // MDX components mapping for industrial typography
   const mdxComponents = {
-    ul: ({ children }: any) => <ul className="space-y-4 my-8 pl-0 list-none">{children}</ul>,
-    li: ({ children }: any) => (
-      <li className="flex items-start gap-4 p-4 bg-neutral-50 rounded-2xl border border-neutral-100 shadow-sm">
-        <div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center shrink-0 mt-0.5">
-          <div className="w-2.5 h-2.5 rounded-full bg-primary" />
-        </div>
-        <span className="text-lg font-medium text-neutral-800">{children}</span>
-      </li>
+    Heading,
+    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} />,
+    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} />,
+    p: (props: any) => <p className="text-base md:text-lg text-text-secondary leading-[1.8] mb-6 font-medium 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-medium 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-medium max-w-3xl" {...props} />,
+    li: (props: any) => (
+      <li className="relative pl-6 before:content-[''] before:absolute before:left-0 before:top-[0.6em] before:w-2 before:h-2 before:bg-primary/50 before:rounded-sm" {...props} />
     ),
+    a: (props: any) => <a className="text-primary hover:text-primary-dark underline decoration-primary/30 underline-offset-4 hover:decoration-primary transition-all font-bold" {...props} />,
+    strong: (props: any) => <strong className="font-bold text-neutral-900" {...props} />,
+    blockquote: (props: any) => (
+      <blockquote className="border-l-4 border-primary pl-6 py-3 my-10 italic bg-neutral-50 rounded-r-2xl text-neutral-700 font-medium max-w-3xl shadow-sm" {...props} />
+    ),
+    hr: (props: any) => <hr className="my-16 border-t-2 border-neutral-100 max-w-3xl" {...props} />,
+    img: (props: any) => <img className="rounded-2xl shadow-2xl my-12 max-w-full h-auto border border-neutral-100" {...props} />,
   };
 
   return (
     <div className="flex flex-col min-h-screen bg-white">
       {/* Hero Section */}
-      <section className="bg-[#050B14] text-white py-20 md:py-32 relative overflow-hidden">
+      <section className="bg-[#050B14] text-white pt-40 pb-16 md:pt-48 md:pb-20 min-h-[35vh] flex flex-col justify-end relative overflow-hidden">
         {reference.frontmatter.featuredImage && (
           <div className="absolute inset-0 z-0">
             <Image
@@ -143,7 +152,7 @@ export default async function ReferenceDetail(props: { params: Promise<{ locale:
         <div className="max-w-4xl mx-auto">
           <h2 className="text-3xl font-bold text-neutral-dark mb-8">Leistungsumfang & Projektbeschreibung</h2>
           
-          <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary">
+          <div className="w-full">
             <MDXRemote source={reference.content} components={mdxComponents} />
           </div>