Merge fix/ui-and-map-formatting

components/blocks/InteractiveGermanyMap.tsx

@@ -38,6 +38,20 @@ export function InteractiveGermanyMap({
   hideStandorte = false
 }: InteractiveGermanyMapProps) {
   const [activeLocation, setActiveLocation] = useState<Location | null>(null);
+  const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>(null);
+
+  const handleMouseEnter = (loc: Location) => {
+    if (hoverTimeout) clearTimeout(hoverTimeout);
+    setActiveLocation(loc);
+  };
+
+  const handleMouseLeave = () => {
+    const timeout = setTimeout(() => {
+      setActiveLocation(null);
+    }, 200);
+    setHoverTimeout(timeout);
+  };
+
   const router = useRouter();
   const pathname = usePathname();
   const locale = useLocale();
@@ -68,7 +82,7 @@ export function InteractiveGermanyMap({
   }, [locations, hideStandorte]);
 
   return (
-    <div key={isHero ? `hero-map-${pathname}` : undefined} 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 key={isHero ? `hero-map-${pathname}` : undefined} className={isHero ? "relative w-full" : "relative w-full max-w-7xl mx-auto py-12 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 */}
         <AnimatedGlossyBorder opacity={0.7} className="z-30" />
@@ -87,11 +101,11 @@ export function InteractiveGermanyMap({
             </div>
             
             {isHero ? (
-              <h1 className="font-heading text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 text-balance">
+              <h1 className="font-heading text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 text-balance">
                 {finalTitle}
               </h1>
             ) : (
-              <h3 className="font-heading text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 text-balance">
+              <h3 className="font-heading text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 text-balance">
                 {finalTitle}
               </h3>
             )}
@@ -107,7 +121,7 @@ export function InteractiveGermanyMap({
                   <div className={`bg-white/5 border border-white/10 rounded-2xl p-6 backdrop-blur-md relative overflow-hidden group h-full ${stat.href ? 'cursor-pointer' : ''}`}>
                     <div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                     <div className="relative z-10 flex flex-col h-full justify-between">
-                      <div className="text-4xl font-extrabold text-white mb-1 flex items-baseline gap-1">
+                      <div className="text-3xl md:text-4xl font-extrabold text-white mb-1 flex items-baseline gap-1">
                         {stat.value}<span className="text-xl text-primary">{stat.suffix}</span>
                       </div>
                       <div className={`text-sm text-white/50 font-medium flex items-center ${stat.href ? 'group-hover:text-primary transition-colors' : ''}`}>
@@ -157,8 +171,9 @@ export function InteractiveGermanyMap({
                     top: `${loc.y}%`,
                     transform: 'translate(-50%, -50%)',
                   }}
-                  onMouseEnter={() => setActiveLocation(loc)}
-                  onMouseLeave={() => setActiveLocation(null)}
+                  onMouseEnter={() => handleMouseEnter(loc)}
+                  onMouseLeave={handleMouseLeave}
+                  onClick={() => handleMouseEnter(loc)}
                 >
                   <div className="w-1.5 h-1.5 bg-primary/80 rounded-full group-hover/minor:bg-white group-hover/minor:scale-150 transition-all duration-300" />
                   <div className="absolute inset-0 m-auto w-2 h-2 bg-primary rounded-full opacity-0 group-hover/minor:animate-ping" />
@@ -176,14 +191,9 @@ export function InteractiveGermanyMap({
                     key={loc.id}
                     className={`absolute transform -translate-x-1/2 -translate-y-1/2 group/pin cursor-pointer w-16 h-16 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-20'}`}
                     style={{ left: `${loc.x}%`, top: `${loc.y}%` }}
-                    onMouseEnter={() => setActiveLocation(loc)}
-                    onMouseLeave={() => setActiveLocation(null)}
-                    onClick={() => {
-                      if (loc.href) {
-                        const href = loc.href.startsWith('/') ? `/${locale}${loc.href}` : loc.href;
-                        router.push(href);
-                      }
-                    }}
+                    onMouseEnter={() => handleMouseEnter(loc)}
+                    onMouseLeave={handleMouseLeave}
+                    onClick={() => handleMouseEnter(loc)}
                   >
                     {/* Ping Animation for HQ / Branch */}
                     {(isHQ || isBranch) && (
@@ -218,12 +228,14 @@ export function InteractiveGermanyMap({
                     animate={{ opacity: 1, y: 0, scale: 1 }}
                     exit={{ opacity: 0, y: 10, scale: 0.95 }}
                     transition={{ duration: 0.2 }}
-                    className="absolute z-[9999] pointer-events-none"
+                    className="absolute z-[9999] pointer-events-auto"
                     style={{
                       left: `${activeLocation.x}%`,
                       top: `${activeLocation.y}%`,
                       transform: activeLocation.x < 50 ? 'translate(20px, -50%)' : 'translate(calc(-100% - 20px), -50%)',
                     }}
+                    onMouseEnter={() => handleMouseEnter(activeLocation)}
+                    onMouseLeave={handleMouseLeave}
                   >
                     <div className="bg-[#050B14]/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl min-w-[200px] w-max max-w-[300px] text-white overflow-hidden">
                       
@@ -284,10 +296,14 @@ export function InteractiveGermanyMap({
                         )}
 
                         {activeLocation.href && (activeLocation.type === 'hq' || activeLocation.type === 'branch') && (
-                          <div className="inline-flex items-center text-xs font-bold text-primary">
+                          <Link 
+                            href={activeLocation.href.startsWith('/') ? `/${locale}${activeLocation.href}` : activeLocation.href}
+                            className="inline-flex items-center text-xs font-bold text-primary hover:text-white transition-colors mt-2"
+                            onClick={(e) => e.stopPropagation()}
+                          >
                             {t('learnMore')}
                             <ArrowUpRight className="w-3.5 h-3.5 ml-1" />
-                          </div>
+                          </Link>
                         )}
                       </div>
                     </div>