fix: clean location names in reference badges and detail pages

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

@@ -135,7 +135,9 @@ export default async function ReferenceDetail(props: { params: Promise<{ locale:
                 <MapPin className="w-8 h-8 text-primary shrink-0" />
                 <div>
                   <p className="text-sm text-white/50 mb-1 uppercase tracking-wider font-bold">Ort</p>
-                  <p className="font-semibold text-lg">{reference.frontmatter.location}</p>
+                  <p className="font-semibold text-lg">
+                    {reference.frontmatter.location ? reference.frontmatter.location.split('/')[0].replace(/\b\d{5}\b/g, '').trim() : ''}
+                  </p>
                 </div>
               </div>
               <div className="flex items-start gap-4 p-6 bg-white/5 rounded-2xl border border-white/10 backdrop-blur-sm">

app/[locale]/referenzen/page.tsx

@@ -8,6 +8,7 @@ import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
 import { SITE_URL } from '@/lib/schema';
 import Image from 'next/image';
 import { InteractiveGermanyMap } from '@/components/blocks/InteractiveGermanyMap';
+import { HeroSection } from '@/components/blocks/HeroSection';
 import { defaultLocations } from '@/lib/map-data';
 
 interface PageProps {
@@ -41,6 +42,16 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
 
   const references = await getAllReferences(locale);
   
+  // Helper to clean up location names (remove PLZ and keep only first location if multiple)
+  const cleanLocation = (locStr: string | undefined) => {
+    if (!locStr) return '';
+    // Take first part before slash
+    let cleaned = locStr.split('/')[0].trim();
+    // Remove 5-digit PLZ
+    cleaned = cleaned.replace(/\b\d{5}\b/g, '').trim();
+    return cleaned;
+  };
+  
   // Enrich the static map locations with dynamic project data (images, details)
   const enrichedLocations = defaultLocations.map(loc => {
     if (loc.type === 'project') {
@@ -61,12 +72,21 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
 
   return (
     <div className="flex flex-col min-h-screen bg-neutral-50 pb-16 md:pb-24">
-      {/* Map Hero Section */}
+      {/* Hero Section */}
+      <HeroSection
+        badge="Referenzen"
+        title="Erfolgreich umgesetzte Projekte."
+        subtitle="Vom Breitbandausbau bis zur komplexen 110kV-Trasse: Ein Auszug unserer bundesweiten Projekte, bei denen wir Infrastruktur für die Zukunft geschaffen haben."
+        alignment="center"
+        backgroundImage={{ url: '/assets/photos/DSC08653.JPG' }}
+      />
+
+      {/* Map Section */}
       <InteractiveGermanyMap
-        isHero={true}
-        badge="Unsere Referenzen"
-        title={<>Erfolgreich umgesetzte<br/>Projekte.</>}
-        description="Vom Breitbandausbau bis zur komplexen 110kV-Trasse: Ein Auszug unserer bundesweiten Projekte, bei denen wir Infrastruktur für die Zukunft geschaffen haben. Entdecken Sie unsere Standorte."
+        isHero={false}
+        badge="Einsatzgebiete"
+        title="Deutschlandweit für Sie im Einsatz."
+        description="Entdecken Sie unsere strategischen Standorte und eine Auswahl unserer deutschlandweiten Referenzprojekte."
         locations={enrichedLocations}
       />
 
@@ -104,7 +124,7 @@ export default async function ReferenzenOverview(props: { params: Promise<{ loca
                   <div className="absolute top-4 left-4 z-10">
                     <span className="bg-white/95 backdrop-blur-md text-neutral-dark px-3 py-1.5 rounded-sm text-[10px] font-bold uppercase tracking-widest flex items-center gap-1.5 shadow-sm border border-neutral-200">
                       <MapPin className="w-3 h-3 text-primary" />
-                      {ref.frontmatter.location}
+                      {cleanLocation(ref.frontmatter.location)}
                     </span>
                   </div>
                 </div>

components/blocks/InteractiveGermanyMap.tsx

@@ -45,7 +45,7 @@ export function InteractiveGermanyMap({
     <div className={isHero ? "relative w-full" : "relative w-full max-w-7xl mx-auto py-16 md:py-24 px-4 sm:px-6 mt-16 md:mt-20"}>
       <div className={`bg-[#050B14] ${isHero ? 'pt-32 pb-16 md:pt-40 md:pb-24' : 'rounded-[2.5rem] md:rounded-[3.5rem] shadow-2xl border border-white/5'} overflow-visible relative group/map`}>
         {/* Animated Border Glow */}
-        {!isHero && <AnimatedGlossyBorder opacity={0.7} className="z-30" />}
+        <AnimatedGlossyBorder opacity={0.7} className="z-30" />
         
         {/* Background Effects */}
         <div className={`absolute inset-0 bg-gradient-to-br from-[#050B14] via-[#0A1322] to-[#050B14] ${!isHero && 'rounded-[2.5rem] md:rounded-[3.5rem]'} overflow-hidden`} />