diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 6f59ce22c..e14fbb523 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -13,6 +13,10 @@ import { setRequestLocale } from 'next-intl/server';
 import { Inter } from 'next/font/google';
 import { mapFileSlugToTranslated } from '@/lib/slugs';
 
+import { TransitionProvider } from '@/components/providers/TransitionProvider';
+import { PageTransitionShutter } from '@/components/providers/PageTransitionShutter';
+import { InitialLoader } from '@/components/providers/InitialLoader';
+
 const inter = Inter({
   subsets: ['latin'],
   display: 'swap',
@@ -164,21 +168,25 @@ export default async function Layout(props: {
       </head>
       <body className="flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white">
         <NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
-          <SkipLink />
-          <Header navLinks={navLinks} />
-          
-          <main
-            id="main-content"
-            className="flex-grow animate-fade-in overflow-visible"
-            tabIndex={-1}
-          >
-            {children}
-          </main>
+          <TransitionProvider>
+            <InitialLoader />
+            <PageTransitionShutter />
+            <SkipLink />
+            <Header navLinks={navLinks} />
+            
+            <main
+              id="main-content"
+              className="flex-grow animate-fade-in overflow-visible"
+              tabIndex={-1}
+            >
+              {children}
+            </main>
 
-          <Footer companyInfo={companyInfo} />
-          <JsonLd />
-          <AnalyticsShell />
-          {feedbackEnabled && <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />}
+            <Footer companyInfo={companyInfo} />
+            <JsonLd />
+            <AnalyticsShell />
+            {feedbackEnabled && <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />}
+          </TransitionProvider>
         </NextIntlClientProvider>
       </body>
     </html>
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
index 8ee7ca323..e9829bf83 100644
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { TransitionLink } from '@/components/ui/TransitionLink';
 import Image from 'next/image';
 import { useLocale } from 'next-intl';
 import { ShieldCheck, Leaf, Lock, Accessibility, Zap } from 'lucide-react';
@@ -24,14 +24,14 @@ export function Footer({ companyInfo }: FooterProps) {
       <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">
-          <Link href={`/${locale}`} className="relative block h-14 w-48 mb-6 group">
+          <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"
             />
-          </Link>
+          </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.'
@@ -53,29 +53,29 @@ export function Footer({ companyInfo }: FooterProps) {
           </h4>
           <ul className="space-y-4">
             <li>
-              <Link href={`/${locale}/kompetenzen`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <TransitionLink href={`/${locale}/kompetenzen`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                 {locale === 'de' ? 'Kompetenzen' : 'Competencies'}
-              </Link>
+              </TransitionLink>
             </li>
             <li>
-              <Link href={`/${locale}/ueber-uns`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <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'}
-              </Link>
+              </TransitionLink>
             </li>
             <li>
-              <Link href={`/${locale}/karriere`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <TransitionLink href={`/${locale}/karriere`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                 {locale === 'de' ? 'Karriere' : 'Career'}
-              </Link>
+              </TransitionLink>
             </li>
             <li>
-              <Link href={`/${locale}/messen`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <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'}
-              </Link>
+              </TransitionLink>
             </li>
             <li>
-              <Link href={`/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <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'}
-              </Link>
+              </TransitionLink>
             </li>
           </ul>
         </div>
@@ -87,19 +87,19 @@ export function Footer({ companyInfo }: FooterProps) {
           </h4>
           <ul className="space-y-4">
             <li>
-              <Link href={`/${locale}/impressum`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <TransitionLink href={`/${locale}/impressum`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                 {locale === 'de' ? 'Impressum' : 'Imprint'}
-              </Link>
+              </TransitionLink>
             </li>
             <li>
-              <Link href={`/${locale}/datenschutz`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <TransitionLink href={`/${locale}/datenschutz`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                 {locale === 'de' ? 'Datenschutz' : 'Privacy Policy'}
-              </Link>
+              </TransitionLink>
             </li>
             <li>
-              <Link href={`/${locale}/${locale === 'de' ? 'agb' : 'terms'}`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <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'}
-              </Link>
+              </TransitionLink>
             </li>
           </ul>
         </div>
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 70cc2df23..7f05fb111 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import Link from 'next/link';
+import { TransitionLink } from '@/components/ui/TransitionLink';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 import { motion, AnimatePresence, useScroll, useTransform } from 'framer-motion';
@@ -97,7 +98,7 @@ export function Header({ navLinks }: HeaderProps) {
             />
           </div>
 
-          <Link href={`/${currentLocale}`} className={`relative flex items-center transition-all duration-500 ease-out z-50 group ${isSolidMode ? 'h-9 w-36' : 'h-12 w-48'}`}>
+          <TransitionLink href={`/${currentLocale}`} className={`relative flex items-center transition-all duration-500 ease-out z-50 group ${isSolidMode ? 'h-9 w-36' : 'h-12 w-48'}`}>
             <Image
               src={(isSolidMode || isMobileMenuOpen) ? "/assets/logo.png" : "/assets/logo-white.png"}
               alt="E-TIB Gruppe"
@@ -106,7 +107,7 @@ export function Header({ navLinks }: HeaderProps) {
               priority
               sizes="192px"
             />
-          </Link>
+          </TransitionLink>
           
           <nav className="relative z-10 hidden md:flex items-center gap-8 lg:gap-10">
             {navLinks && navLinks.length > 0 && navLinks.map((link) => {
@@ -117,7 +118,7 @@ export function Header({ navLinks }: HeaderProps) {
               const isActive = pathname === mappedUrl || (mappedUrl !== `/${currentLocale}` && pathname?.startsWith(`${mappedUrl}/`));
                 
               return (
-                <Link 
+                <TransitionLink 
                   key={link.url}
                   href={mappedUrl} 
                   className={`relative font-bold text-xs lg:text-sm uppercase tracking-widest transition-colors duration-300 group py-2 ${
@@ -139,7 +140,7 @@ export function Header({ navLinks }: HeaderProps) {
                   
                   {/* Subtle hover underline */}
                   <span className={`absolute -bottom-1 left-1/2 w-0 h-0.5 -translate-x-1/2 rounded-full transition-all duration-300 ease-out group-hover:w-full ${isSolidMode ? 'bg-primary/30' : 'bg-white/30'} ${isActive ? 'opacity-0' : 'opacity-100'}`} />
-                </Link>
+                </TransitionLink>
               );
             })}
             
@@ -147,7 +148,7 @@ export function Header({ navLinks }: HeaderProps) {
             
             <LanguageSwitcher isSolidMode={isSolidMode} />
             
-            <Link
+            <TransitionLink
               href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`}
               className={`relative ml-2 px-7 py-2.5 rounded-full font-bold text-xs lg:text-sm uppercase tracking-widest transition-all duration-500 overflow-hidden group/cta isolate ${
                 isSolidMode
@@ -158,7 +159,7 @@ export function Header({ navLinks }: HeaderProps) {
               <span className="relative z-10 transition-transform duration-300 group-hover/cta:scale-105 inline-block">{currentLocale === 'de' ? 'Kontakt' : 'Contact'}</span>
               {/* Sleek shine sweep effect */}
               <span className="absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-[-20deg] group-hover/cta:left-[100%] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none" />
-            </Link>
+            </TransitionLink>
           </nav>
 
           {/* Mobile Nav Button */}
@@ -203,22 +204,24 @@ export function Header({ navLinks }: HeaderProps) {
                   : link.url;
                   
                 return (
-                  <Link 
+                  <TransitionLink 
                     key={link.url}
                     href={mappedUrl} 
                     className="text-2xl font-heading font-bold text-neutral-dark border-b border-neutral-100 pb-4"
+                    onClick={() => setIsMobileMenuOpen(false)}
                   >
                     {link.label}
-                  </Link>
+                  </TransitionLink>
                 );
               })}
               
-              <Link 
+              <TransitionLink 
                 href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`} 
                 className="text-2xl font-heading font-bold text-primary border-b border-neutral-100 pb-4"
+                onClick={() => setIsMobileMenuOpen(false)}
               >
                 {currentLocale === 'de' ? 'Kontakt' : 'Contact'}
-              </Link>
+              </TransitionLink>
               
               <div className="mt-8 pt-6">
                 <p className="text-text-secondary text-sm font-bold uppercase tracking-widest mb-4">Sprache wählen</p>
diff --git a/components/layout/LanguageSwitcher.tsx b/components/layout/LanguageSwitcher.tsx
index 6f4eb7536..30087385a 100644
--- a/components/layout/LanguageSwitcher.tsx
+++ b/components/layout/LanguageSwitcher.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import Link from 'next/link';
+import { TransitionLink } from '@/components/ui/TransitionLink';
 import { usePathname } from 'next/navigation';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 
@@ -27,7 +27,7 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
     return (
       <div className="flex flex-col gap-3">
         {locales.map((loc) => (
-          <Link
+          <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 ${
@@ -45,7 +45,7 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
                 <polyline points="20 6 9 17 4 12" />
               </svg>
             )}
-          </Link>
+          </TransitionLink>
         ))}
       </div>
     );
@@ -73,7 +73,7 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
         }
 
         return (
-          <Link
+          <TransitionLink
             key={loc.code}
             href={getSwitchedUrl(loc.code)}
             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}`}
@@ -81,7 +81,7 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
           >
             <span className="text-sm" aria-hidden="true">{loc.flag}</span>
             <span>{loc.label}</span>
-          </Link>
+          </TransitionLink>
         );
       })}
     </div>
diff --git a/components/providers/InitialLoader.tsx b/components/providers/InitialLoader.tsx
new file mode 100644
index 000000000..f34c028ad
--- /dev/null
+++ b/components/providers/InitialLoader.tsx
@@ -0,0 +1,125 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const PRELOAD_VIDEOS = [
+  '/assets/videos/web/hero-bohrung.mp4'
+];
+
+export function InitialLoader() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+    
+    // Prüfen, ob wir in dieser Session schon geladen haben
+    const hasLoaded = sessionStorage.getItem('etib_initial_load');
+    if (hasLoaded) {
+      setIsLoading(false);
+      return;
+    }
+
+    // Fallback Timeout (4 Sekunden), falls Videos hängen
+    const timeout = setTimeout(() => {
+      finishLoading();
+    }, 4000);
+
+    let videosLoaded = 0;
+    
+    const checkAllLoaded = () => {
+      videosLoaded++;
+      if (videosLoaded === PRELOAD_VIDEOS.length) {
+        clearTimeout(timeout);
+        // Kleine Verzögerung für die smootheness
+        setTimeout(finishLoading, 800);
+      }
+    };
+
+    PRELOAD_VIDEOS.forEach((src) => {
+      const video = document.createElement('video');
+      video.preload = 'auto';
+      video.oncanplaythrough = checkAllLoaded;
+      video.onerror = checkAllLoaded; // bei Fehler trotzdem weitermachen
+      video.src = src;
+      video.load();
+    });
+
+    // Cleanup
+    return () => clearTimeout(timeout);
+  }, []);
+
+  const finishLoading = () => {
+    sessionStorage.setItem('etib_initial_load', 'true');
+    setIsLoading(false);
+  };
+
+  // Wir rendern serverseitig nichts blockierendes (Hydration Mismatch verhindern)
+  if (!isClient) return null;
+
+  return (
+    <AnimatePresence>
+      {isLoading && (
+        <motion.div
+          key="initial-loader"
+          initial={{ y: 0 }}
+          exit={{ y: '-100%' }}
+          transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
+          className="fixed inset-0 z-[9999] bg-neutral-dark flex flex-col items-center justify-center overflow-hidden"
+        >
+          {/* E-TIB Premium Glow */}
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent opacity-60" />
+          
+          <motion.div 
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+            className="relative z-10 flex flex-col items-center"
+          >
+            {/* Minimalistisches Logo oder Loader */}
+            <div className="w-24 h-24 relative mb-8">
+              <motion.div 
+                className="absolute inset-0 border-2 border-primary/20 rounded-xl"
+                animate={{ rotate: 360 }}
+                transition={{ duration: 8, ease: "linear", repeat: Infinity }}
+              />
+              <motion.div 
+                className="absolute inset-2 border-2 border-accent/40 rounded-lg"
+                animate={{ rotate: -360 }}
+                transition={{ duration: 6, ease: "linear", repeat: Infinity }}
+              />
+              <motion.div 
+                className="absolute inset-4 border-2 border-white rounded-md bg-white/5 backdrop-blur-sm flex items-center justify-center"
+              >
+                <span className="text-white font-bold text-xl tracking-tighter">E-TIB</span>
+              </motion.div>
+            </div>
+            
+            <motion.div 
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.4 }}
+              className="h-1 w-48 bg-neutral-800 rounded-full overflow-hidden"
+            >
+              <motion.div 
+                className="h-full bg-primary"
+                initial={{ width: "0%" }}
+                animate={{ width: "100%" }}
+                transition={{ duration: 3.5, ease: [0.16, 1, 0.3, 1] }}
+              />
+            </motion.div>
+            <motion.p 
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.6 }}
+              className="mt-4 text-xs text-neutral-400 font-mono tracking-widest uppercase"
+            >
+              Loading Infrastructure
+            </motion.p>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/components/providers/PageTransitionShutter.tsx b/components/providers/PageTransitionShutter.tsx
new file mode 100644
index 000000000..9c187e1dc
--- /dev/null
+++ b/components/providers/PageTransitionShutter.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useTransition } from './TransitionProvider';
+
+export function PageTransitionShutter() {
+  const { isTransitioning } = useTransition();
+
+  return (
+    <AnimatePresence>
+      {isTransitioning && (
+        <motion.div
+          key="shutter"
+          initial={{ y: '100%' }}
+          animate={{ y: '0%' }}
+          exit={{ y: '-100%' }}
+          transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+          className="fixed inset-0 z-[9998] bg-primary-dark pointer-events-none flex flex-col items-center justify-center overflow-hidden"
+        >
+          {/* E-TIB Premium Glow inside the Shutter */}
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent/20 via-transparent to-transparent opacity-50" />
+          
+          <motion.div 
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 1.1 }}
+            transition={{ duration: 0.4, delay: 0.2 }}
+            className="w-16 h-16 border-t-2 border-r-2 border-primary rounded-full animate-spin"
+          />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/components/providers/TransitionProvider.tsx b/components/providers/TransitionProvider.tsx
new file mode 100644
index 000000000..97bfe7fed
--- /dev/null
+++ b/components/providers/TransitionProvider.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface TransitionContextType {
+  isTransitioning: boolean;
+  startTransition: (href: string) => void;
+}
+
+const TransitionContext = createContext<TransitionContextType | undefined>(undefined);
+
+export function TransitionProvider({ children }: { children: ReactNode }) {
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const router = useRouter();
+
+  const startTransition = useCallback((href: string) => {
+    // Wenn wir bereits navigieren, nichts tun
+    if (isTransitioning) return;
+    
+    // Aktuelle URL prüfen, falls es dieselbe ist, nicht navigieren
+    if (typeof window !== 'undefined' && window.location.pathname === href) {
+       // Optional: Wir könnten weich nach oben scrollen
+       window.scrollTo({ top: 0, behavior: 'smooth' });
+       return;
+    }
+
+    setIsTransitioning(true);
+
+    // Die Animation des Shutters abwarten (ca. 700ms), dann pushen
+    setTimeout(() => {
+      router.push(href);
+      
+      // Den Shutter wieder einfahren lassen, nachdem die Seite gewechselt hat
+      // Next.js Route-Changes sind fast sofort da, aber wir geben dem Cache kurz Zeit
+      setTimeout(() => {
+        setIsTransitioning(false);
+      }, 300);
+    }, 700);
+  }, [isTransitioning, router]);
+
+  return (
+    <TransitionContext.Provider value={{ isTransitioning, startTransition }}>
+      {children}
+    </TransitionContext.Provider>
+  );
+}
+
+export function useTransition() {
+  const context = useContext(TransitionContext);
+  if (!context) {
+    throw new Error('useTransition must be used within a TransitionProvider');
+  }
+  return context;
+}
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 327d6f6bb..f592d045f 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Link from 'next/link';
+import { TransitionLink } from '@/components/ui/TransitionLink';
 import { cn } from './utils';
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -88,9 +88,9 @@ export function Button({
 
   if (href) {
     return (
-      <Link href={href} className={styles}>
+      <TransitionLink href={href} className={styles}>
         {content}
-      </Link>
+      </TransitionLink>
     );
   }
 
diff --git a/components/ui/TransitionLink.tsx b/components/ui/TransitionLink.tsx
new file mode 100644
index 000000000..5e052884e
--- /dev/null
+++ b/components/ui/TransitionLink.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import Link, { LinkProps } from 'next/link';
+import { useTransition } from '@/components/providers/TransitionProvider';
+
+interface TransitionLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps>, LinkProps {
+  children: React.ReactNode;
+  className?: string;
+  href: string;
+}
+
+export function TransitionLink({ children, href, onClick, ...props }: TransitionLinkProps) {
+  const { startTransition } = useTransition();
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    // Falls ein eigener onClick Handler übergeben wurde
+    if (onClick) onClick(e);
+
+    // Nicht bei neuen Tabs, Command-Klick, etc. intervenieren
+    if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || props.target === '_blank') {
+      return;
+    }
+
+    // Default Link Navigation blockieren
+    e.preventDefault();
+    
+    // Die Transition starten (welche intern pusht)
+    startTransition(href.toString());
+  };
+
+  return (
+    <Link href={href} onClick={handleClick} {...props}>
+      {children}
+    </Link>
+  );
+}
