From 2abcd386f0fd2ebc5b1a4b7528d9a21150a73d2a Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sat, 13 Jun 2026 18:52:57 +0200
Subject: [PATCH] feat(referenzen): implement smart metric cards and typography
 improvements

---
 app/[locale]/referenzen/[slug]/page.tsx | 96 ++++++++++++++++---------
 app/[locale]/referenzen/page.tsx        | 10 +--
 components/blocks/ServiceDetailGrid.tsx |  2 +-
 3 files changed, 68 insertions(+), 40 deletions(-)

diff --git a/app/[locale]/referenzen/[slug]/page.tsx b/app/[locale]/referenzen/[slug]/page.tsx
index 2858825d1..8d57cad41 100644
--- a/app/[locale]/referenzen/[slug]/page.tsx
+++ b/app/[locale]/referenzen/[slug]/page.tsx
@@ -67,22 +67,48 @@ export default async function ReferenceDetail(props: { params: Promise<{ locale:
   const mdxComponents = {
     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} />,
+    h2: (props: any) => <Heading level={2} size="3" className="mt-16 mb-6 border-b border-neutral-100 pb-4 text-neutral-dark" {...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="grid grid-cols-1 md:grid-cols-2 gap-4 my-12" {...props} />,
+    ul: (props: any) => <ul className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 my-12" {...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="bg-neutral-50 p-6 rounded-2xl border border-neutral-100 flex items-start gap-4 hover:shadow-md transition-shadow group" {...props}>
-        <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5 group-hover:bg-primary/20 transition-colors">
-          <svg className="w-3.5 h-3.5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-          </svg>
-        </div>
-        <span className="text-neutral-700 font-semibold leading-snug">{props.children}</span>
-      </li>
-    ),
+    li: (props: any) => {
+      // Smart Metric Card Logic
+      let text = '';
+      if (typeof props.children === 'string') {
+        text = props.children;
+      } else if (Array.isArray(props.children)) {
+        text = props.children.map((c: any) => typeof c === 'string' ? c : '').join('');
+      }
+
+      const match = text.match(/^([\d.,]+)\s*(m|Satz|Stück|km|kV|Fasern)\b(.*)/);
+      
+      if (match && typeof props.children === 'string') {
+        const [, value, unit, rest] = match;
+        return (
+          <li className="bg-white p-6 md:p-8 rounded-3xl border border-neutral-100 flex flex-col justify-center hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:border-primary/30 transition-all duration-500 group hover:-translate-y-1 relative overflow-hidden">
+            <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-neutral-50 to-transparent rounded-bl-full -z-10 group-hover:from-primary/5 transition-colors duration-500" />
+            <div className="flex items-baseline gap-2 mb-3">
+              <span className="text-4xl md:text-5xl font-bold font-heading text-primary tracking-tight">{value}</span>
+              <span className="text-lg md:text-xl font-bold text-neutral-400">{unit}</span>
+            </div>
+            <span className="text-neutral-600 font-semibold text-sm md:text-base leading-snug">{rest.replace(/^[\s-]*\s/, '')}</span>
+          </li>
+        );
+      }
+
+      return (
+        <li className="bg-neutral-50 p-6 rounded-3xl border border-neutral-100 flex items-start gap-4 hover:shadow-md transition-all duration-300 group hover:-translate-y-1">
+          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5 group-hover:bg-primary/20 transition-colors">
+            <svg className="w-4 h-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <span className="text-neutral-700 font-semibold leading-relaxed">{props.children}</span>
+        </li>
+      );
+    },
     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) => (
@@ -95,62 +121,62 @@ export default async function ReferenceDetail(props: { params: Promise<{ locale:
   return (
     <div className="flex flex-col min-h-screen bg-white">
       {/* Hero Section */}
-      <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">
+      <section className="bg-[#050B14] text-white pt-40 pb-16 md:pt-52 md:pb-24 min-h-[45vh] flex flex-col justify-end relative overflow-hidden">
         {reference.frontmatter.featuredImage && (
           <div className="absolute inset-0 z-0">
             <Image
               src={reference.frontmatter.featuredImage}
               alt={reference.frontmatter.title}
               fill
-              className="object-cover opacity-25 mix-blend-luminosity scale-105"
+              className="object-cover opacity-30 mix-blend-luminosity scale-105"
               priority
             />
-            <div className="absolute inset-0 bg-gradient-to-t from-[#050B14] via-[#050B14]/60 to-transparent" />
-            <div className="absolute inset-0 bg-gradient-to-r from-[#050B14] via-transparent to-transparent" />
+            <div className="absolute inset-0 bg-gradient-to-t from-[#050B14] via-[#050B14]/70 to-transparent" />
+            <div className="absolute inset-0 bg-gradient-to-r from-[#050B14] via-[#050B14]/40 to-transparent" />
           </div>
         )}
-        <div className="absolute inset-0 opacity-20 z-0">
+        <div className="absolute inset-0 opacity-20 z-0 pointer-events-none">
           <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/30 via-transparent to-transparent" />
         </div>
         <Container className="relative z-10">
           <div className="mb-12">
             <TrackedLink
               href={`/${locale}/referenzen`}
-              className="inline-flex items-center gap-2 text-white/60 hover:text-white transition-colors"
+              className="inline-flex items-center gap-2 text-white/60 hover:text-white transition-colors uppercase tracking-widest text-xs font-bold"
               eventProperties={{ location: 'reference_back_btn' }}
             >
-              <ChevronLeft className="w-5 h-5" />
+              <ChevronLeft className="w-4 h-4" />
               {t('backToOverview')}
             </TrackedLink>
           </div>
-          <div className="max-w-4xl">
-            <Badge variant="accent" className="mb-4 md:mb-6">
+          <div className="max-w-5xl">
+            <Badge variant="accent" className="mb-6">
               {t('projectReference')}
             </Badge>
-            <Heading level={1} variant="white" className="mb-8 leading-tight">
+            <Heading level={1} variant="white" className="mb-10 leading-[1.1] md:text-6xl lg:text-7xl drop-shadow-lg">
               {reference.frontmatter.title}
             </Heading>
             
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
-              <div className="flex items-start gap-4 p-6 bg-white/5 rounded-2xl border border-white/10 backdrop-blur-sm">
-                <MapPin className="w-8 h-8 text-primary shrink-0" />
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 mt-12 md:mt-16">
+              <div className="flex items-start gap-4 p-6 md:p-8 bg-white/5 rounded-3xl border border-white/10 backdrop-blur-md transition-all hover:bg-white/10">
+                <MapPin className="w-8 h-8 text-primary shrink-0 opacity-80" />
                 <div>
-                  <p className="text-sm text-white/50 mb-1 uppercase tracking-wider font-bold">{t('location')}</p>
-                  <p className="font-semibold text-lg">{reference.frontmatter.location}</p>
+                  <p className="text-xs text-white/50 mb-1.5 uppercase tracking-widest font-bold">{t('location')}</p>
+                  <p className="font-semibold text-lg md:text-xl text-white/90">{reference.frontmatter.location}</p>
                 </div>
               </div>
-              <div className="flex items-start gap-4 p-6 bg-white/5 rounded-2xl border border-white/10 backdrop-blur-sm">
-                <Briefcase className="w-8 h-8 text-primary shrink-0" />
+              <div className="flex items-start gap-4 p-6 md:p-8 bg-white/5 rounded-3xl border border-white/10 backdrop-blur-md transition-all hover:bg-white/10">
+                <Briefcase className="w-8 h-8 text-primary shrink-0 opacity-80" />
                 <div>
-                  <p className="text-sm text-white/50 mb-1 uppercase tracking-wider font-bold">{t('client')}</p>
-                  <p className="font-semibold text-lg">{reference.frontmatter.client}</p>
+                  <p className="text-xs text-white/50 mb-1.5 uppercase tracking-widest font-bold">{t('client')}</p>
+                  <p className="font-semibold text-lg md:text-xl text-white/90 line-clamp-2">{reference.frontmatter.client}</p>
                 </div>
               </div>
-              <div className="flex items-start gap-4 p-6 bg-white/5 rounded-2xl border border-white/10 backdrop-blur-sm">
-                <Calendar className="w-8 h-8 text-primary shrink-0" />
+              <div className="flex items-start gap-4 p-6 md:p-8 bg-white/5 rounded-3xl border border-white/10 backdrop-blur-md transition-all hover:bg-white/10">
+                <Calendar className="w-8 h-8 text-primary shrink-0 opacity-80" />
                 <div>
-                  <p className="text-sm text-white/50 mb-1 uppercase tracking-wider font-bold">{t('period')}</p>
-                  <p className="font-semibold text-lg">{reference.frontmatter.dateString || new Date(reference.frontmatter.date).getFullYear()}</p>
+                  <p className="text-xs text-white/50 mb-1.5 uppercase tracking-widest font-bold">{t('period')}</p>
+                  <p className="font-semibold text-lg md:text-xl text-white/90">{reference.frontmatter.dateString || new Date(reference.frontmatter.date).getFullYear()}</p>
                 </div>
               </div>
             </div>
diff --git a/app/[locale]/referenzen/page.tsx b/app/[locale]/referenzen/page.tsx
index b81f814cf..61daf29c5 100644
--- a/app/[locale]/referenzen/page.tsx
+++ b/app/[locale]/referenzen/page.tsx
@@ -85,9 +85,11 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
       <Container className="relative z-20 mt-16 md:mt-24">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
           {references.map((ref) => (
-            <div
+            <TrackedLink
               key={ref.slug}
-              className="group flex flex-col bg-white border border-neutral-100 rounded-3xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 cursor-default"
+              href={`/${locale}/referenzen/${ref.slug}`}
+              eventProperties={{ location: 'reference_list_card', slug: ref.slug }}
+              className="group flex flex-col bg-white border border-neutral-100 rounded-3xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer block"
             >
               <div className="flex flex-col h-full relative">
                 {/* Image Section */}
@@ -117,7 +119,7 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
 
                 {/* Content Section */}
                 <div className="flex flex-col flex-grow p-6 md:p-8 bg-white">
-                  <h3 className="text-xl md:text-2xl font-bold font-heading text-neutral-dark mb-6 transition-colors line-clamp-3 leading-[1.2]">
+                  <h3 className="text-xl md:text-2xl font-bold font-heading text-neutral-dark mb-6 transition-colors line-clamp-3 leading-[1.2] group-hover:text-primary">
                     {ref.frontmatter.title}
                   </h3>
                   
@@ -140,7 +142,7 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
                   </div>
                 </div>
               </div>
-            </div>
+            </TrackedLink>
           ))}
         </div>
 
diff --git a/components/blocks/ServiceDetailGrid.tsx b/components/blocks/ServiceDetailGrid.tsx
index f6dc7ebb9..3c3ae93fb 100644
--- a/components/blocks/ServiceDetailGrid.tsx
+++ b/components/blocks/ServiceDetailGrid.tsx
@@ -195,7 +195,7 @@ export function ServiceDetailGrid({
 
                 <div className="relative z-10 flex flex-col md:flex-row justify-between items-start mb-12 gap-6">
                   <div className="pt-2 flex-1 min-w-0 pr-4">
-                    <h4 className="text-2xl md:text-3xl font-extrabold text-neutral-dark uppercase tracking-wider break-words hyphens-auto" lang="de">{panel.title}</h4>
+                    <h4 className="text-xl md:text-2xl font-extrabold text-neutral-dark uppercase tracking-wider text-balance break-words" lang="de">{panel.title}</h4>
                     <div className="h-1 w-12 bg-primary mt-6 transition-all duration-700 group-hover:w-24 rounded-full"></div>
                   </div>