feat: upgrade UI with premium industrial aesthetics, purely visual language switch, and resilient error pages

Former-commit-id: e4d801c24e64c41816f86de9767b47894abb6806

app/[locale]/contact/page.tsx

@@ -106,15 +106,15 @@ export default async function ContactPage({ params }: ContactPageProps) {
           url: SITE_URL,
           address: {
             '@type': 'PostalAddress',
-            streetAddress: 'Raiffeisenstraße 22',
-            addressLocality: 'Remshalden',
-            postalCode: '73630',
+            streetAddress: 'Gewerbestraße 22',
+            addressLocality: 'Guben',
+            postalCode: '03172',
             addressCountry: 'DE',
           },
           geo: {
             '@type': 'GeoCoordinates',
-            latitude: 48.8144,
-            longitude: 9.4144,
+            latitude: 51.94276,
+            longitude: 14.71764,
           },
           openingHoursSpecification: [
             {
@@ -257,7 +257,7 @@ export default async function ContactPage({ params }: ContactPageProps) {
             </div>
           }
         >
-          <ContactMap address={t('info.address')} lat={48.8144} lng={9.4144} />
+          <ContactMap address={t('info.address')} lat={51.94276} lng={14.71764} />
         </Suspense>
       </section>
     </div>

app/[locale]/error.tsx

@@ -39,37 +39,55 @@ export default function Error({
 
   return (
     <>
-      <Container className="relative py-32 mt-16 flex flex-col items-center justify-center text-center min-h-[70vh] overflow-hidden">
-      {/* Industrial Background Element */}
-      <div className="absolute inset-0 -z-10 opacity-[0.03] pointer-events-none flex items-center justify-center">
-        <span className="text-[20rem] font-bold select-none">500</span>
+      <div className="relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden bg-[#050B14] py-24 px-4 mt-16">
+        {/* Deep Tech Grid Background */}
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] pointer-events-none" />
+        
+        {/* Glowing Orb */}
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-red-500/20 blur-[120px] rounded-full pointer-events-none" />
+
+        <div className="relative z-10 w-full max-w-2xl mx-auto">
+          <div className="group relative bg-[#050B14]/80 backdrop-blur-xl rounded-[2.5rem] p-12 md:p-16 border border-white/10 shadow-2xl overflow-hidden text-center">
+            {/* Inner Shimmer */}
+            <div className="absolute inset-0 bg-gradient-to-br from-white/[0.05] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
+            
+            <div className="relative mb-8">
+              <h1 className="text-8xl md:text-9xl font-heading font-black text-transparent bg-clip-text bg-gradient-to-b from-white to-white/20 drop-shadow-[0_0_30px_rgba(255,255,255,0.1)]">
+                500
+              </h1>
+              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-1 bg-red-500/40 blur-md skew-y-[-10deg]" />
+              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-px bg-red-500 skew-y-[-10deg] shadow-[0_0_15px_rgba(239,68,68,1)]" />
+            </div>
+
+            <div className="inline-flex items-center gap-3 px-4 py-1.5 mb-6 rounded-full bg-red-500/10 border border-red-500/20 text-xs font-bold uppercase tracking-wider text-red-400">
+              <span className="w-2 h-2 rounded-full bg-red-500 animate-[ping_2s_infinite] shadow-[0_0_10px_rgba(239,68,68,0.8)]" />
+              SYSTEM PROTOCOL: CRITICAL ERROR
+            </div>
+
+            <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-white">
+              {t('title')}
+            </Heading>
+
+            <p className="text-white/60 mb-10 max-w-md text-lg mx-auto leading-relaxed">
+              {t('description')}
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button onClick={() => reset()} variant="primary" className="shadow-[0_0_20px_rgba(var(--color-primary),0.3)]">
+                {t('tryAgain')}
+              </Button>
+              <Button href="/" variant="outline" className="border-white/20 text-white hover:bg-white/5">
+                {t('goHome')}
+              </Button>
+            </div>
+          </div>
+          
+          {/* Decorative Base Line */}
+          <div className="w-full flex justify-center mt-12 opacity-50">
+            <div className="w-px h-24 bg-gradient-to-t from-red-500/50 to-transparent" />
+          </div>
+        </div>
       </div>
-
-      <div className="relative mb-8">
-        <Heading level={1} className="text-6xl md:text-8xl font-bold mb-2 text-saturated">
-          500
-        </Heading>
-        <Scribble variant="underline" className="w-full h-6 -bottom-2 left-0 text-saturated/40" />
-      </div>
-
-      <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-primary">
-        {t('title')}
-      </Heading>
-
-      <p className="text-text-secondary mb-10 max-w-md text-lg mx-auto">{t('description')}</p>
-
-      <div className="flex flex-col sm:flex-row gap-4 justify-center">
-        <Button onClick={() => reset()} variant="saturated" size="lg">
-          {t('tryAgain')}
-        </Button>
-        <Button href="/" variant="outline" size="lg">
-          {t('goHome')}
-        </Button>
-      </div>
-
-      {/* Decorative Industrial Line */}
-      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-px h-24 bg-gradient-to-b from-saturated/50 to-transparent" />
-    </Container>
     </>
   );
 }

app/[locale]/kontakt/page.tsx

@@ -0,0 +1 @@
+export { default, generateMetadata } from '../contact/page';

app/[locale]/not-found.tsx

@@ -15,56 +15,56 @@ export default async function NotFound() {
     <>
       <script dangerouslySetInnerHTML={{ __html: `document.body.setAttribute('data-force-solid-header', 'true');` }} />
       <ClientNotFoundTracker path="" />
-      <Container className="relative py-32 mt-16 flex flex-col items-center justify-center text-center min-h-[70vh] overflow-hidden">
-        {/* Industrial Background Element */}
-        <div className="absolute inset-0 -z-10 opacity-[0.03] pointer-events-none flex items-center justify-center">
-          <span className="text-[20rem] font-bold select-none">404</span>
-        </div>
+      
+      <div className="relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden bg-[#050B14] py-24 px-4 mt-16">
+        {/* Deep Tech Grid Background */}
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] pointer-events-none" />
+        
+        {/* Glowing Orb */}
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-primary/20 blur-[120px] rounded-full pointer-events-none" />
 
-        <div className="relative mb-8">
-          <Heading level={1} className="text-6xl md:text-8xl font-bold mb-2">
-            404
-          </Heading>
-          <Scribble
-            variant="circle"
-            className="w-[150%] h-[150%] -top-[25%] -left-[25%] text-accent/40"
-          />
-        </div>
+        <div className="relative z-10 w-full max-w-2xl mx-auto">
+          <div className="group relative bg-[#050B14]/80 backdrop-blur-xl rounded-[2.5rem] p-12 md:p-16 border border-white/10 shadow-2xl overflow-hidden text-center">
+            {/* Inner Shimmer */}
+            <div className="absolute inset-0 bg-gradient-to-br from-white/[0.05] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
+            
+            <div className="relative mb-8">
+              <h1 className="text-8xl md:text-9xl font-heading font-black text-transparent bg-clip-text bg-gradient-to-b from-white to-white/20 drop-shadow-[0_0_30px_rgba(255,255,255,0.1)]">
+                404
+              </h1>
+              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-1 bg-primary/40 blur-md skew-y-[-10deg]" />
+              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-px bg-primary skew-y-[-10deg] shadow-[0_0_15px_rgba(var(--color-primary),1)]" />
+            </div>
 
-        <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-primary">
-          {t('title')}
-        </Heading>
+            <div className="inline-flex items-center gap-3 px-4 py-1.5 mb-6 rounded-full bg-red-500/10 border border-red-500/20 text-xs font-bold uppercase tracking-wider text-red-400">
+              <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse shadow-[0_0_10px_rgba(239,68,68,0.8)]" />
+              SYSTEM PROTOCOL: NOT FOUND
+            </div>
 
-        <p className="text-text-secondary mb-10 max-w-md text-lg mx-auto">{t('description')}</p>
+            <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-white">
+              {t('title')}
+            </Heading>
 
-        {suggestedUrl && (
-          <div className="mb-12 p-6 bg-accent/10 border border-accent/20 rounded-2xl animate-fade-in shadow-lg relative overflow-hidden group">
-            <div className="absolute inset-0 bg-accent/5 -skew-x-12 translate-x-full group-hover:translate-x-0 transition-transform duration-700" />
-            <div className="relative z-10">
-              <h3 className="text-primary font-bold mb-2 text-lg">
-                Did you mean to visit the {suggestedLang} version?
-              </h3>
-              <p className="text-text-secondary text-sm mb-4">
-                This page exists, but in another language.
-              </p>
-              <Button href={suggestedUrl} variant="accent" size="md" className="w-full sm:w-auto">
-                Go to {suggestedLang} Version
+            <p className="text-white/60 mb-10 max-w-md text-lg mx-auto leading-relaxed">
+              {t('description')}
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button href="/" variant="primary" className="shadow-[0_0_20px_rgba(var(--color-primary),0.3)]">
+                {t('cta')}
+              </Button>
+              <Button href="/kontakt" variant="outline" className="border-white/20 text-white hover:bg-white/5">
+                Support kontaktieren
               </Button>
             </div>
           </div>
-        )}
-
-        <div className="flex flex-col sm:flex-row gap-4 justify-center">
-          <Button href="/" variant={suggestedUrl ? 'outline' : 'accent'} size="lg">
-            {t('cta')}
-          </Button>
-          <Button href="/contact" variant={suggestedUrl ? 'ghost' : 'outline'} size="lg">
-            Contact Support
-          </Button>
+          
+          {/* Decorative Base Line */}
+          <div className="w-full flex justify-center mt-12 opacity-50">
+            <div className="w-px h-24 bg-gradient-to-t from-primary to-transparent" />
+          </div>
         </div>
-
-        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-24 bg-gradient-to-t from-accent/50 to-transparent" />
-      </Container>
+      </div>
     </>
   );
 }

components/ContactForm.tsx

@@ -160,6 +160,7 @@ export default function ContactForm() {
             name="name"
             autoComplete="name"
             enterKeyHint="next"
+            placeholder={t('form.namePlaceholder') || 'Ihr Name'}
             onFocus={() => handleFocus('contact-name')}
             required
           />

components/blocks/HeroVideo.tsx

@@ -34,8 +34,17 @@ export function HeroVideo(props: HeroVideoProps) {
   const ctaLabel = props.ctaLabel || props.linkText || data?.ctaLabel || 'Unternehmen entdecken';
   const ctaHref = props.ctaHref || props.linkHref || data?.ctaHref || '#unternehmen';
   
-  const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || 'Projekt anfragen';
-  const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || '/kontakt';
+  let currentLocale = 'de';
+  try {
+    // We can't unconditionally call hooks if they might fail outside context, but HeroVideo is usually in context.
+    // However, to be safe and avoid adding new imports, we can use window.location or default to 'de' if not available.
+    if (typeof window !== 'undefined') {
+      currentLocale = window.location.pathname.startsWith('/en') ? 'en' : 'de';
+    }
+  } catch (e) {}
+
+  const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || (currentLocale === 'de' ? 'Projekt anfragen' : 'Inquire Project');
+  const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/${currentLocale}/${currentLocale === 'de' ? 'contact' : 'contact'}`;
 
   return (
     <div className="relative w-full h-[100svh] flex items-center justify-center overflow-hidden bg-neutral-dark">
@@ -72,7 +81,7 @@ export function HeroVideo(props: HeroVideoProps) {
         >
           <h1 
             className="font-heading font-bold text-4xl md:text-6xl lg:text-8xl text-white mb-6 uppercase tracking-tight drop-shadow-lg"
-            dangerouslySetInnerHTML={{ __html: title.replace('KABELTIEFBAU', '<span class="text-primary-light">KABELTIEFBAU</span>').replace(/\n/g, '<br />') }}
+            dangerouslySetInnerHTML={{ __html: title.replace('KABELTIEFBAU', '<span class="text-primary-light">KABELTIEFBAU</span>').replace(/\\n|\n/g, '<br />') }}
           />
           
           <p className="text-lg md:text-xl lg:text-2xl text-white/90 max-w-3xl mx-auto mb-12 drop-shadow">

components/blocks/JobListingBlock.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
 import Link from 'next/link';
 import { Button } from '@/components/ui/Button';
+import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 
 export interface JobListingBlockProps {
   title?: string;
   showJobs?: boolean;
   showFairs?: boolean;
   fairsTitle?: string;
-  fairs?: Array<{ name: string; date: string; type: string }>;
+  fairs?: Array<{ 
+    name: string; 
+    date: string; 
+    type: string;
+    location?: string;
+    booth?: string;
+    url?: string;
+  }>;
   emptyStateMessage?: string;
   emptyStateLinkText?: string;
   emptyStateLinkHref?: string;
@@ -20,9 +28,9 @@ export const JobListingBlock = async (props: JobListingBlockProps) => {
     showFairs,
     fairsTitle = 'Nächste Messetermine 2026',
     fairs = [
-      { name: 'Intersolar München', date: '19. - 21. Juni 2026', type: 'Energie-Messe' },
-      { name: 'Windenergietage Linstow', date: '04. - 06. November 2026', type: 'Fachkongress' },
-      { name: 'Kabelwerkstatt Wiesbaden', date: '02. - 03. Dezember 2026', type: 'Fachmesse' }
+      { name: 'Intersolar München', date: '19. - 21. Juni 2026', type: 'Energie-Messe', location: 'Messe München', booth: 'Halle A3, Stand 110', url: 'https://www.intersolar.de' },
+      { name: 'Windenergietage Linstow', date: '04. - 06. November 2026', type: 'Fachkongress', location: 'Van der Valk Resort Linstow', booth: 'Stand 42', url: 'https://windenergietage.de' },
+      { name: 'Kabelwerkstatt Wiesbaden', date: '02. - 03. Dezember 2026', type: 'Fachmesse', location: 'RheinMain CongressCenter', booth: 'Halle 1, Stand B20' }
     ],
     emptyStateMessage = 'Aktuell sind alle Positionen besetzt. Senden Sie uns gerne eine Initiativbewerbung!',
     emptyStateLinkText = 'Jetzt Kontakt aufnehmen',
@@ -34,27 +42,97 @@ export const JobListingBlock = async (props: JobListingBlockProps) => {
 
   return (
     <div className="py-12 md:py-24">
-      <div className="container max-w-4xl mx-auto">
+      <div className="container mx-auto">
         {showFairs && (
-          <div className="bg-neutral-dark rounded-2xl p-8 md:p-12 mb-16 text-white overflow-hidden relative group">
-            <div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 blur-3xl -translate-y-1/2 translate-x-1/2" />
-            <h3 className="font-heading font-bold text-3xl mb-8 relative z-10 flex items-center gap-3">
-              <span className="w-8 h-1 bg-primary" />
+          <div className="mb-24 relative">
+            <h3 className="font-heading font-extrabold text-4xl text-neutral-dark mb-12 flex items-center gap-4">
+              <span className="w-12 h-1.5 bg-primary rounded-full" />
               {fairsTitle}
             </h3>
-            <ul className="space-y-6 relative z-10">
-              {fairs.map((messe) => (
-                <li key={messe.name} className="flex flex-col md:flex-row md:items-center justify-between border-b border-white/10 pb-6 group/item hover:bg-white/5 transition-colors p-4 -m-4 rounded-2xl">
-                  <div>
-                    <span className="text-primary-light font-bold text-sm uppercase tracking-widest block mb-1">{messe.type}</span>
-                    <span className="font-heading font-bold text-2xl">{messe.name}</span>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              {fairs.map((messe, idx) => {
+                const isLink = !!messe.url;
+                const innerContent = (
+                  <>
+                    {/* Glass Background Elements */}
+                    <div className="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
+                    <div className="absolute -top-32 -right-32 w-64 h-64 bg-primary/20 blur-[100px] rounded-full group-hover:bg-primary/30 transition-colors duration-700" />
+                    
+                    <HoverShineOverlay shineColor="via-primary/10" />
+
+                    <div className="relative z-10 flex-grow flex flex-col">
+                      <div className="flex justify-between items-start mb-6">
+                        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/[0.05] border border-white/10 text-xs font-bold uppercase tracking-wider text-primary-light backdrop-blur-sm">
+                          <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse shadow-[0_0_8px_rgba(var(--color-primary),1)]" />
+                          {messe.type}
+                        </div>
+                        {isLink && (
+                          <div className="w-8 h-8 rounded-full bg-white/[0.05] border border-white/10 flex items-center justify-center text-white/40 group-hover:text-primary transition-colors group-hover:bg-primary/10">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17l9.2-9.2M17 17V7H7"/></svg>
+                          </div>
+                        )}
+                      </div>
+
+                      <h4 className="font-heading font-bold text-3xl text-white mb-8 group-hover:text-primary-light transition-colors leading-tight">
+                        {messe.name}
+                      </h4>
+
+                      <div className="mt-auto space-y-4">
+                        <div className="flex items-start gap-3">
+                          <div className="w-8 h-8 rounded-full bg-white/[0.05] flex items-center justify-center text-primary shrink-0 mt-0.5">
+                            <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                          </div>
+                          <div>
+                            <p className="text-xs text-white/40 uppercase tracking-widest font-heading mb-1">Datum</p>
+                            <p className="text-white/90 font-medium">{messe.date}</p>
+                          </div>
+                        </div>
+
+                        {messe.location && (
+                          <div className="flex items-start gap-3">
+                            <div className="w-8 h-8 rounded-full bg-white/[0.05] flex items-center justify-center text-primary shrink-0 mt-0.5">
+                              <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
+                            </div>
+                            <div>
+                              <p className="text-xs text-white/40 uppercase tracking-widest font-heading mb-1">Location</p>
+                              <p className="text-white/90 font-medium">{messe.location}</p>
+                            </div>
+                          </div>
+                        )}
+
+                        {messe.booth && (
+                          <div className="flex items-start gap-3">
+                            <div className="w-8 h-8 rounded-full bg-white/[0.05] flex items-center justify-center text-primary shrink-0 mt-0.5">
+                              <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                            </div>
+                            <div>
+                              <p className="text-xs text-white/40 uppercase tracking-widest font-heading mb-1">Stand</p>
+                              <p className="text-primary-light font-bold text-sm">{messe.booth}</p>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </>
+                );
+
+                const baseClasses = "group relative bg-[#050B14] rounded-[2rem] p-8 overflow-hidden border border-white/5 shadow-2xl transition-all duration-500 hover:scale-[1.02] hover:shadow-primary/10 flex flex-col h-full";
+
+                if (isLink) {
+                  return (
+                    <a key={`fair-${idx}`} href={messe.url} target="_blank" rel="noopener noreferrer" className={`${baseClasses} cursor-pointer`}>
+                      {innerContent}
+                    </a>
+                  );
+                }
+
+                return (
+                  <div key={`fair-${idx}`} className={baseClasses}>
+                    {innerContent}
                   </div>
-                  <div className="mt-2 md:mt-0 text-right">
-                    <span className="text-white/60 font-medium block">{messe.date}</span>
-                  </div>
-                </li>
-              ))}
-            </ul>
+                );
+              })}
+            </div>
           </div>
         )}
 

components/layout/Footer.tsx

@@ -18,115 +18,136 @@ export function Footer({ companyInfo }: FooterProps) {
   const locale = useLocale();
 
   return (
-    <footer className="bg-neutral-dark text-neutral-light py-16 relative overflow-hidden">
-      <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+    <footer className="bg-[#050B14] text-neutral-light py-16 relative overflow-hidden border-t border-white/5">
+      {/* Subtle background tech grid */}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
       
-      <div className="container grid grid-cols-1 md:grid-cols-4 lg:grid-cols-12 gap-12 lg:gap-8 mb-12">
-        {/* Brand Column */}
-        <div className="col-span-1 md:col-span-2 lg:col-span-4 space-y-6">
-          <TransitionLink href={`/${locale}`} className="relative block h-14 w-48 mb-6 group">
-            <Image
-              src="/assets/logo-white.png"
-              alt="E-TIB Gruppe"
-              fill
-              className="object-contain object-left transition-transform duration-500 group-hover:scale-105"
-            />
-          </TransitionLink>
-          <p className="text-white/60 text-base leading-relaxed max-w-sm">
-            {locale === 'de' 
-              ? 'Die Experten für Kabeltiefbau, Horizontalspülbohrungen und umfassende Infrastrukturprojekte. Qualität und Zuverlässigkeit aus Guben.'
-              : 'Experts in cable construction, horizontal directional drilling, and comprehensive infrastructure projects. Quality and reliability from Guben.'}
-          </p>
+      {/* Top glowing edge */}
+      <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" />
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/3 h-[200px] bg-primary/20 blur-[100px] rounded-full pointer-events-none opacity-50" />
+
+      <div className="container relative z-10 grid grid-cols-1 md:grid-cols-4 lg:grid-cols-12 gap-6 lg:gap-8 mb-12">
+        {/* Brand Column Bento */}
+        <div className="col-span-1 md:col-span-4 lg:col-span-5 flex flex-col justify-between bg-white/[0.02] border border-white/5 rounded-3xl p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-br from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
+          
+          <div className="space-y-6 relative z-10">
+            <TransitionLink href={`/${locale}`} className="relative block h-14 w-48 mb-6 group/logo">
+              <Image
+                src="/assets/logo-white.png"
+                alt="E-TIB Gruppe"
+                fill
+                className="object-contain object-left transition-transform duration-500 group-hover/logo:scale-105 origin-left"
+              />
+            </TransitionLink>
+            <p className="text-white/60 text-base leading-relaxed max-w-sm">
+              {locale === 'de' 
+                ? 'Die Experten für Kabeltiefbau, Horizontalspülbohrungen und umfassende Infrastrukturprojekte. Qualität und Zuverlässigkeit aus Guben.'
+                : 'Experts in cable construction, horizontal directional drilling, and comprehensive infrastructure projects. Quality and reliability from Guben.'}
+            </p>
+          </div>
+
           {companyInfo && (
-            <div className="text-white/70 text-sm space-y-3 mt-8 border-t border-white/10 pt-6 max-w-xs">
-              <p className="whitespace-pre-line font-medium">{companyInfo.address}</p>
-              <p>Email: <a href={`mailto:${companyInfo.contactEmail}`} className="hover:text-primary transition-colors">{companyInfo.contactEmail}</a></p>
-              <p>Tel: <a href={`tel:${companyInfo.contactPhone.replace(/\s+/g, '')}`} className="hover:text-primary transition-colors">{companyInfo.contactPhone}</a></p>
+            <div className="text-white/70 text-sm space-y-4 mt-12 relative z-10">
+              <div className="flex gap-4 p-4 rounded-2xl bg-white/[0.03] border border-white/[0.05] hover:bg-white/[0.05] transition-colors">
+                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
+                  <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+                </div>
+                <div>
+                  <p className="text-xs text-white/40 uppercase tracking-wider mb-1 font-heading">{locale === 'de' ? 'Hauptsitz' : 'Headquarters'}</p>
+                  <p className="whitespace-pre-line font-medium text-white/90">{companyInfo.address}</p>
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <a href={`mailto:${companyInfo.contactEmail}`} className="flex flex-col gap-2 p-4 rounded-2xl bg-white/[0.03] border border-white/[0.05] hover:bg-white/[0.08] hover:border-primary/30 transition-all group/contact">
+                  <p className="text-xs text-white/40 uppercase tracking-wider font-heading">E-Mail</p>
+                  <p className="font-medium text-white/90 group-hover/contact:text-primary transition-colors truncate">{companyInfo.contactEmail}</p>
+                </a>
+                <a href={`tel:${companyInfo.contactPhone.replace(/\s+/g, '')}`} className="flex flex-col gap-2 p-4 rounded-2xl bg-white/[0.03] border border-white/[0.05] hover:bg-white/[0.08] hover:border-primary/30 transition-all group/contact">
+                  <p className="text-xs text-white/40 uppercase tracking-wider font-heading">{locale === 'de' ? 'Telefon' : 'Phone'}</p>
+                  <p className="font-medium text-white/90 group-hover/contact:text-primary transition-colors truncate">{companyInfo.contactPhone}</p>
+                </a>
+              </div>
             </div>
           )}
         </div>
 
-        {/* Company Column */}
-        <div className="col-span-1 lg:col-span-3 lg:col-start-6">
-          <h4 className="font-heading font-bold uppercase tracking-widest text-xs mb-6 text-white/40">
-            {locale === 'de' ? 'Unternehmen' : 'Company'}
-          </h4>
-          <ul className="space-y-4">
-            <li>
-              <TransitionLink href={`/${locale}/kompetenzen`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
-                {locale === 'de' ? 'Kompetenzen' : 'Competencies'}
-              </TransitionLink>
-            </li>
-            <li>
-              <TransitionLink href={`/${locale}/ueber-uns`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
-                {locale === 'de' ? 'Über uns' : 'About us'}
-              </TransitionLink>
-            </li>
-            <li>
-              <TransitionLink href={`/${locale}/karriere`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
-                {locale === 'de' ? 'Karriere' : 'Career'}
-              </TransitionLink>
-            </li>
-            <li>
-              <TransitionLink href={`/${locale}/messen`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
-                {locale === 'de' ? 'Messen & Events' : 'Fairs & Events'}
-              </TransitionLink>
-            </li>
-            <li>
-              <TransitionLink href={`/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
-                {locale === 'de' ? 'Kontakt' : 'Contact'}
-              </TransitionLink>
-            </li>
-          </ul>
-        </div>
+        {/* Navigation Bento Grid */}
+        <div className="col-span-1 md:col-span-4 lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-6 lg:gap-8">
+          
+          {/* Company Column */}
+          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
+            <div className="absolute inset-0 bg-gradient-to-bl from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
+            <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-8 text-white">
+              {locale === 'de' ? 'Unternehmen' : 'Company'}
+              <span className="block w-8 h-1 bg-primary mt-3 rounded-full" />
+            </h4>
+            <ul className="space-y-4 relative z-10 flex-grow">
+              {[
+                { label: locale === 'de' ? 'Kompetenzen' : 'Competencies', href: `/${locale}/kompetenzen` },
+                { label: locale === 'de' ? 'Über uns' : 'About us', href: `/${locale}/ueber-uns` },
+                { label: locale === 'de' ? 'Karriere' : 'Career', href: `/${locale}/karriere` },
+                { label: locale === 'de' ? 'Messen & Events' : 'Fairs & Events', href: `/${locale}/messen` },
+                { label: locale === 'de' ? 'Kontakt' : 'Contact', href: `/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}` },
+              ].map((link) => (
+                <li key={link.href}>
+                  <TransitionLink href={link.href} className="group/link flex items-center text-white/60 hover:text-white transition-colors py-1">
+                    <span className="w-0 h-px bg-primary mr-0 group-hover/link:w-4 group-hover/link:mr-3 transition-all duration-300" />
+                    <span className="font-medium">{link.label}</span>
+                  </TransitionLink>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Legal Column */}
+          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
+            <div className="absolute inset-0 bg-gradient-to-tr from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
+            <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-8 text-white">
+              {locale === 'de' ? 'Rechtliches' : 'Legal'}
+              <span className="block w-8 h-1 bg-primary mt-3 rounded-full opacity-50" />
+            </h4>
+            <ul className="space-y-4 relative z-10 flex-grow">
+              {[
+                { label: locale === 'de' ? 'Impressum' : 'Imprint', href: `/${locale}/impressum` },
+                { label: locale === 'de' ? 'Datenschutz' : 'Privacy Policy', href: `/${locale}/datenschutz` },
+                { label: locale === 'de' ? 'AGB' : 'Terms', href: `/${locale}/${locale === 'de' ? 'agb' : 'terms'}` },
+              ].map((link) => (
+                <li key={link.href}>
+                  <TransitionLink href={link.href} className="group/link flex items-center text-white/50 hover:text-white transition-colors py-1">
+                    <span className="w-0 h-px bg-white/30 mr-0 group-hover/link:w-3 group-hover/link:mr-3 transition-all duration-300" />
+                    <span className="font-medium">{link.label}</span>
+                  </TransitionLink>
+                </li>
+              ))}
+            </ul>
+
+            {/* Built Info inside Legal box for compact layout */}
+            <div className="mt-12 pt-6 border-t border-white/5 text-white/30 text-xs">
+              <a href="https://mintel.me" target="_blank" rel="noopener noreferrer" className="hover:text-white/60 transition-colors flex items-center gap-2">
+                <span>Designed & Engineered by Mintel</span>
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17l9.2-9.2M17 17V7H7"/></svg>
+              </a>
+            </div>
+          </div>
 
-        {/* Legal Column */}
-        <div className="col-span-1 lg:col-span-3">
-          <h4 className="font-heading font-bold uppercase tracking-widest text-xs mb-6 text-white/40">
-            {locale === 'de' ? 'Rechtliches' : 'Legal'}
-          </h4>
-          <ul className="space-y-4">
-            <li>
-              <TransitionLink href={`/${locale}/impressum`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
-                {locale === 'de' ? 'Impressum' : 'Imprint'}
-              </TransitionLink>
-            </li>
-            <li>
-              <TransitionLink href={`/${locale}/datenschutz`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
-                {locale === 'de' ? 'Datenschutz' : 'Privacy Policy'}
-              </TransitionLink>
-            </li>
-            <li>
-              <TransitionLink href={`/${locale}/${locale === 'de' ? 'agb' : 'terms'}`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
-                {locale === 'de' ? 'AGB' : 'Terms'}
-              </TransitionLink>
-            </li>
-          </ul>
         </div>
       </div>
 
-      <div className="container">
-        <div className="pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-6 text-white/50 text-sm">
-          <p>&copy; {new Date().getFullYear()} E-TIB GmbH. {locale === 'de' ? 'Alle Rechte vorbehalten.' : 'All rights reserved.'}</p>
-          <div className="flex items-center gap-4">
+      <div className="container relative z-10">
+        <div className="flex flex-col md:flex-row justify-between items-center gap-6 py-6 px-8 rounded-2xl bg-white/[0.02] border border-white/5 backdrop-blur-md">
+          <p className="text-white/50 text-sm font-medium">&copy; {new Date().getFullYear()} E-TIB GmbH. {locale === 'de' ? 'Alle Rechte vorbehalten.' : 'All rights reserved.'}</p>
+          <div className="flex items-center gap-6">
              <LanguageSwitcher isSolidMode={false} />
           </div>
         </div>
 
         {/* Quality Badges */}
-        <div className="pt-8 mt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6 text-white/30 text-xs">
-          <div>
-            <a href="https://mintel.me" target="_blank" rel="noopener noreferrer" className="hover:text-white/60 transition-colors">
-              Website developed by Mintel
-            </a>
-          </div>
-          <div className="flex flex-wrap justify-center gap-x-6 gap-y-3">
-            <div className="flex items-center gap-1.5"><ShieldCheck className="w-3.5 h-3.5" /><span>SSL Secured</span></div>
-            <div className="flex items-center gap-1.5"><Leaf className="w-3.5 h-3.5" /><span>Green Hosting</span></div>
-            <div className="flex items-center gap-1.5"><Lock className="w-3.5 h-3.5" /><span>DSGVO Compliant</span></div>
-            <div className="flex items-center gap-1.5"><Accessibility className="w-3.5 h-3.5" /><span>WCAG</span></div>
-            <div className="flex items-center gap-1.5"><Zap className="w-3.5 h-3.5" /><span>PageSpeed 90+</span></div>
-          </div>
+        <div className="mt-6 flex flex-wrap justify-center gap-x-8 gap-y-4 text-white/30 text-xs font-medium uppercase tracking-wider">
+          <div className="flex items-center gap-2"><ShieldCheck className="w-4 h-4 text-white/40" /><span>SSL Secured</span></div>
+          <div className="flex items-center gap-2"><Leaf className="w-4 h-4 text-primary/60" /><span>Green Hosting</span></div>
+          <div className="flex items-center gap-2"><Lock className="w-4 h-4 text-white/40" /><span>DSGVO Compliant</span></div>
+          <div className="flex items-center gap-2"><Zap className="w-4 h-4 text-white/40" /><span>High Performance</span></div>
         </div>
       </div>
     </footer>

components/layout/LanguageSwitcher.tsx

@@ -26,27 +26,31 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
   if (mobile) {
     return (
       <div className="flex flex-col gap-3">
-        {locales.map((loc) => (
-          <TransitionLink
-            key={loc.code}
-            href={getSwitchedUrl(loc.code)}
-            className={`group relative overflow-hidden flex items-center gap-3 px-5 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${
-              currentLocale === loc.code
-                ? 'bg-primary/10 text-primary border border-primary/20'
-                : 'text-text-secondary hover:bg-neutral-50 border border-transparent'
-            }`}
-          >
-            <HoverShineOverlay shineColor="via-primary/5" />
-            
-            <span className="relative z-10 text-2xl" aria-hidden="true">{loc.flag}</span>
-            <span className="relative z-10">{loc.fullLabel}</span>
-            {currentLocale === loc.code && (
-              <svg className="relative z-10 w-5 h-5 ml-auto text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-            )}
-          </TransitionLink>
-        ))}
+        {locales.map((loc) => {
+          const currentLocObj = locales.find(l => l.code === currentLocale) || locales[0];
+          return (
+            <TransitionLink
+              key={loc.code}
+              href={getSwitchedUrl(loc.code)}
+              transitionMessage={currentLocale === loc.code ? undefined : `LANG_SWITCH:${currentLocObj.flag}:${loc.flag}`}
+              className={`group relative overflow-hidden flex items-center gap-3 px-5 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${
+                currentLocale === loc.code
+                  ? 'bg-primary/10 text-primary border border-primary/20'
+                  : 'text-text-secondary hover:bg-neutral-50 border border-transparent'
+              }`}
+            >
+              <HoverShineOverlay shineColor="via-primary/5" />
+              
+              <span className="relative z-10 text-2xl" aria-hidden="true">{loc.flag}</span>
+              <span className="relative z-10">{loc.fullLabel}</span>
+              {currentLocale === loc.code && (
+                <svg className="relative z-10 w-5 h-5 ml-auto text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              )}
+            </TransitionLink>
+          );
+        })}
       </div>
     );
   }
@@ -72,10 +76,13 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
             : 'text-white/70 hover:text-white';
         }
 
+        const currentLocObj = locales.find(l => l.code === currentLocale) || locales[0];
+
         return (
           <TransitionLink
             key={loc.code}
             href={getSwitchedUrl(loc.code)}
+            transitionMessage={isActive ? undefined : `LANG_SWITCH:${currentLocObj.flag}:${loc.flag}`}
             className={`relative z-10 flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider transition-all duration-300 ${linkClass}`}
             aria-label={`Switch to ${loc.fullLabel}`}
           >

components/providers/PageTransitionShutter.tsx

@@ -6,7 +6,7 @@ import { useTransition } from './TransitionProvider';
 import Image from 'next/image';
 
 export function PageTransitionShutter() {
-  const { isTransitioning } = useTransition();
+  const { isTransitioning, transitionMessage } = useTransition();
 
   return (
     <AnimatePresence>
@@ -58,9 +58,95 @@ export function PageTransitionShutter() {
               />
             </div>
             
+            {/* Transition Message or Graphical Visualizer */}
+            <AnimatePresence>
+              {transitionMessage && (
+                transitionMessage.startsWith('LANG_SWITCH:') ? (
+                  (() => {
+                    const [, fromLang, toLang] = transitionMessage.split(':');
+                    return (
+                      <motion.div
+                        key="lang-switch-graphic"
+                        initial={{ opacity: 0, scale: 0.8 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        exit={{ opacity: 0, scale: 1.2 }}
+                        className="mt-12 mb-4 flex items-center gap-6 sm:gap-10 drop-shadow-[0_0_30px_rgba(255,255,255,0.1)]"
+                      >
+                        {/* Old Language Flag - Fading out */}
+                        <div className="w-20 h-20 sm:w-28 sm:h-28 rounded-[2rem] bg-white/5 border border-white/10 backdrop-blur-md flex items-center justify-center text-5xl sm:text-7xl relative overflow-hidden group grayscale opacity-50">
+                          <motion.div 
+                            className="absolute inset-0 bg-white/10"
+                            animate={{ scale: [1, 2], opacity: [0.5, 0] }}
+                            transition={{ duration: 1.5, repeat: Infinity }}
+                          />
+                          <span className="relative z-10 leading-none">{fromLang}</span>
+                        </div>
+                        
+                        {/* Animated Arrow connecting them */}
+                        <div className="flex flex-col items-center gap-3">
+                          <motion.div 
+                            animate={{ x: [0, 20, 0] }} 
+                            transition={{ duration: 1.2, repeat: Infinity, ease: "easeInOut" }}
+                            className="text-primary drop-shadow-[0_0_15px_rgba(var(--color-primary),0.8)]"
+                          >
+                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                               <line x1="5" y1="12" x2="19" y2="12"></line>
+                               <polyline points="12 5 19 12 12 19"></polyline>
+                            </svg>
+                          </motion.div>
+                          <div className="flex gap-2 opacity-50">
+                             <span className="w-2 h-2 rounded-full bg-primary animate-pulse shadow-[0_0_8px_rgba(var(--color-primary),1)]" />
+                             <span className="w-2 h-2 rounded-full bg-primary animate-pulse shadow-[0_0_8px_rgba(var(--color-primary),1)]" style={{ animationDelay: '150ms' }} />
+                             <span className="w-2 h-2 rounded-full bg-primary animate-pulse shadow-[0_0_8px_rgba(var(--color-primary),1)]" style={{ animationDelay: '300ms' }} />
+                          </div>
+                        </div>
+
+                        {/* New Language Flag - Intense Glow */}
+                        <div className="w-24 h-24 sm:w-32 sm:h-32 rounded-[2.5rem] bg-primary/10 border border-primary/50 shadow-[0_0_80px_rgba(var(--color-primary),0.5)] backdrop-blur-xl flex items-center justify-center text-6xl sm:text-8xl relative overflow-hidden ring-4 ring-primary/30">
+                          <span className="relative z-10 drop-shadow-[0_0_15px_rgba(255,255,255,0.6)] leading-none">{toLang}</span>
+                          <motion.div 
+                            className="absolute inset-0 w-[200%] h-full bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-[-20deg]"
+                            animate={{ x: ['-100%', '100%'] }}
+                            transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
+                          />
+                        </div>
+                      </motion.div>
+                    );
+                  })()
+                ) : (
+                  <motion.div
+                    key="text-message"
+                    initial={{ opacity: 0, y: 15, scale: 0.9 }}
+                    animate={{ opacity: 1, y: 0, scale: 1 }}
+                    exit={{ opacity: 0, y: -15, scale: 0.9 }}
+                    transition={{ type: "spring", stiffness: 300, damping: 25 }}
+                    className="mt-10 mb-2 px-6 py-2.5 rounded-full border border-primary/40 bg-primary/10 shadow-[0_0_40px_rgba(var(--color-primary),0.3)] backdrop-blur-xl relative overflow-hidden flex items-center justify-center"
+                  >
+                    <motion.div 
+                      className="absolute inset-0 w-[200%] h-full bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-20deg]"
+                      animate={{ x: ['-100%', '100%'] }}
+                      transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
+                    />
+                    <span className="text-white font-heading tracking-[0.2em] uppercase text-xs sm:text-sm font-extrabold flex items-center gap-3 relative z-10 drop-shadow-[0_0_8px_rgba(255,255,255,0.5)]">
+                      <motion.svg 
+                        animate={{ rotate: 360 }}
+                        transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
+                        xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-primary-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
+                      >
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="2" y1="12" x2="22" y2="12"></line>
+                        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+                      </motion.svg>
+                      {transitionMessage}
+                    </span>
+                  </motion.div>
+                )
+              )}
+            </AnimatePresence>
+            
             {/* Extremely minimalist transition indicator */}
             <motion.div 
-              className="mt-6 flex gap-1"
+              className={`${transitionMessage ? 'mt-4' : 'mt-6'} flex gap-1`}
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ delay: 0.3 }}

components/providers/TransitionProvider.tsx

@@ -5,16 +5,18 @@ import { useRouter } from 'next/navigation';
 
 interface TransitionContextType {
   isTransitioning: boolean;
-  startTransition: (href: string) => void;
+  transitionMessage: string | null;
+  startTransition: (href: string, message?: string | null) => void;
 }
 
 const TransitionContext = createContext<TransitionContextType | undefined>(undefined);
 
 export function TransitionProvider({ children }: { children: ReactNode }) {
   const [isTransitioning, setIsTransitioning] = useState(false);
+  const [transitionMessage, setTransitionMessage] = useState<string | null>(null);
   const router = useRouter();
 
-  const startTransition = useCallback((href: string) => {
+  const startTransition = useCallback((href: string, message: string | null = null) => {
     // Wenn wir bereits navigieren, nichts tun
     if (isTransitioning) return;
     
@@ -25,6 +27,7 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
        return;
     }
 
+    setTransitionMessage(message);
     setIsTransitioning(true);
 
     // Die Animation des Shutters abwarten (ca. 700ms), dann pushen
@@ -35,12 +38,14 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
       // Next.js Route-Changes sind fast sofort da, aber wir geben dem Cache kurz Zeit
       setTimeout(() => {
         setIsTransitioning(false);
+        // Message etwas verzögert zurücksetzen, damit es während dem Ausblenden nicht verschwindet
+        setTimeout(() => setTransitionMessage(null), 300);
       }, 300);
     }, 700);
   }, [isTransitioning, router]);
 
   return (
-    <TransitionContext.Provider value={{ isTransitioning, startTransition }}>
+    <TransitionContext.Provider value={{ isTransitioning, transitionMessage, startTransition }}>
       {children}
     </TransitionContext.Provider>
   );

components/ui/TransitionLink.tsx

@@ -8,9 +8,10 @@ interface TransitionLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchor
   children: React.ReactNode;
   className?: string;
   href: string;
+  transitionMessage?: string;
 }
 
-export function TransitionLink({ children, href, onClick, ...props }: TransitionLinkProps) {
+export function TransitionLink({ children, href, onClick, transitionMessage, ...props }: TransitionLinkProps) {
   const { startTransition } = useTransition();
 
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -26,7 +27,7 @@ export function TransitionLink({ children, href, onClick, ...props }: Transition
     e.preventDefault();
     
     // Die Transition starten (welche intern pusht)
-    startTransition(href.toString());
+    startTransition(href.toString(), transitionMessage);
   };
 
   return (

messages/de.json

@@ -110,6 +110,7 @@
       "title": "Nachricht senden",
       "subtitle": "Senden Sie uns Ihr Anliegen",
       "name": "Name",
+      "namePlaceholder": "Max Mustermann",
       "email": "E-Mail",
       "emailPlaceholder": "ihre@email.de",
       "message": "Nachricht",

messages/en.json

@@ -110,6 +110,7 @@
       "title": "Send a Message",
       "subtitle": "Send us your inquiry",
       "name": "Name",
+      "namePlaceholder": "John Doe",
       "email": "Email",
       "emailPlaceholder": "your@email.com",
       "message": "Message",

next.config.mjs

@@ -479,10 +479,6 @@ const nextConfig = {
           source: '/de/produkte/:path*',
           destination: '/de/products/:path*',
         },
-        {
-          source: '/de/kontakt',
-          destination: '/de/contact',
-        },
         // Safety rewrites for English locale using German slugs (legacy or content errors)
         {
           source: '/en/produkte',
@@ -492,10 +488,6 @@ const nextConfig = {
           source: '/en/produkte/:path*',
           destination: '/en/products/:path*',
         },
-        {
-          source: '/en/kontakt',
-          destination: '/en/contact',
-        },
         {
           source: '/en/impressum',
           destination: '/en/legal-notice',