fix: interactive map visuals and docker dev setup

- Removed confusing SVG lines from map

- Restored distinct clickable markers for major references

- Fixed corepack failing to install pnpm v11 in Docker by explicitly forcing v10

- Added direct port mapping 3001:3001 to bypass proxy issues

components/blocks/InteractiveGermanyMap.tsx

@@ -6,7 +6,10 @@ import { MapPin, Factory, Zap, CheckCircle2, ArrowUpRight } from 'lucide-react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { AnimatedGlossyBorder } from '@/components/ui/AnimatedGlossyBorder';
-import { Location, defaultLocations } from '@/lib/map-data';
+import { Location, defaultLocations, minorLocations } from '@/lib/map-data';
+import { useLocale } from 'next-intl';
+
+const allLocations = [...defaultLocations, ...minorLocations];
 
 interface Stat {
   value: string;
@@ -31,15 +34,17 @@ export function InteractiveGermanyMap({
     { value: '100', suffix: '%', label: 'Überregionale Reichweite' },
     { value: '2', suffix: '+', label: 'Operative Standorte' },
   ],
-  locations = defaultLocations,
+  locations = allLocations,
   isHero = false
 }: InteractiveGermanyMapProps) {
   const [activeLocation, setActiveLocation] = useState<Location | null>(null);
   const router = useRouter();
+  const locale = useLocale();
 
   const hq = locations.find((l) => l.type === 'hq');
   const branch = locations.find((l) => l.type === 'branch');
   const projects = locations.filter((l) => l.type === 'project');
+  const minorNodes = locations.filter((l) => l.type === 'minor_node');
 
   return (
     <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"}>
@@ -91,80 +96,49 @@ export function InteractiveGermanyMap({
           </div>
 
           {/* Map Right */}
-          <div className="xl:col-span-7 relative flex items-center justify-center lg:justify-end mt-8 lg:mt-0 z-10">
+          <div className="xl:col-span-7 relative flex items-center justify-center min-h-[500px] lg:min-h-[700px] z-10 pointer-events-none">
             {/* Map Container - Enforce strict aspect ratio matching the SVG (1024x1024) */}
-            <div className="relative w-full max-w-[600px] aspect-square z-10">
+            <div className="relative w-full max-w-[600px] aspect-square group pointer-events-auto">
+              
               {/* Map SVG */}
-              <div className="absolute inset-0 opacity-[0.25] mix-blend-screen drop-shadow-2xl brightness-200">
+              <div className="absolute inset-0 opacity-[0.25] mix-blend-screen drop-shadow-2xl brightness-200 pointer-events-none">
                 <Image
                   src="/germany-map.svg"
-                  alt="Deutschlandkarte"
+                  alt={locale === 'en' ? "Map of Germany" : "Deutschlandkarte"}
                   fill
                   className="object-cover"
                   priority
                 />
               </div>
 
-              {/* Connections (Lines) */}
-              <svg className="absolute inset-0 w-full h-full pointer-events-none z-10">
-                {hq && branch && (
-                  <motion.line
-                    x1={`${hq.x}%`}
-                    y1={`${hq.y}%`}
-                    x2={`${branch.x}%`}
-                    y2={`${branch.y}%`}
-                    stroke="rgba(130,237,32,0.6)"
-                    strokeWidth="2"
-                    strokeDasharray="6 6"
-                    initial={{ pathLength: 0, opacity: 0 }}
-                    animate={{ pathLength: 1, opacity: 1 }}
-                    transition={{ duration: 2, ease: "easeOut" }}
-                  />
-                )}
-                {hq && projects.map((proj, idx) => (
-                  <motion.line
-                    key={proj.id}
-                    x1={`${hq.x}%`}
-                    y1={`${hq.y}%`}
-                    x2={`${proj.x}%`}
-                    y2={`${proj.y}%`}
-                    stroke="rgba(130,237,32,0.3)"
-                    strokeWidth="1.5"
-                    initial={{ pathLength: 0, opacity: 0 }}
-                    animate={{ pathLength: 1, opacity: 1 }}
-                    transition={{ duration: 1.5, delay: 0.5 + idx * 0.2 }}
-                  />
-                ))}
-              </svg>
+              {/* Minor Location Markers (The 100+ generic projects) */}
+              {locations.filter(l => l.type === 'minor_node').map((loc, idx) => (
+                <div
+                  key={`minor-${idx}`}
+                  className="absolute z-10 group/minor cursor-pointer w-10 h-10 flex items-center justify-center"
+                  style={{
+                    left: `${loc.x}%`,
+                    top: `${loc.y}%`,
+                    transform: 'translate(-50%, -50%)',
+                  }}
+                  onMouseEnter={() => setActiveLocation(loc)}
+                  onMouseLeave={() => setActiveLocation(null)}
+                >
+                  <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" />
+                </div>
+              ))}
 
-              {/* Location Pins */}
-              {locations.map((loc, idx) => {
+              {/* Major & Reference Location Markers (HQ, Branch, Project) */}
+              {locations.filter(l => l.type !== 'minor_node').map((loc, idx) => {
                 const isHQ = loc.type === 'hq';
                 const isBranch = loc.type === 'branch';
                 const isActive = activeLocation?.id === loc.id;
 
-                const isNearLeft = loc.x < 50;
-                const isNearRight = loc.x >= 50;
-                const isNearTop = loc.y < 55; // 55% threshold to strongly avoid the top header
-
-                const tooltipClasses = [
-                  'absolute w-[280px] sm:w-64 bg-white text-neutral-dark p-5 rounded-2xl shadow-2xl z-[9999] border border-neutral-100',
-                  isNearLeft ? 'left-1/2 sm:left-0 -translate-x-1/2 sm:translate-x-0' : 'left-1/2 sm:left-auto sm:right-0 -translate-x-1/2 sm:translate-x-0',
-                  isNearTop 
-                    ? 'top-full mt-4 before:absolute before:-top-6 before:left-0 before:w-full before:h-6' 
-                    : 'bottom-full mb-4 before:absolute before:-bottom-6 before:left-0 before:w-full before:h-6'
-                ].join(' ');
-
-                const arrowClasses = [
-                  'absolute border-8 border-transparent drop-shadow-sm hidden sm:block',
-                  isNearLeft ? 'left-6' : 'right-6',
-                  isNearTop ? '-top-4 border-b-white border-t-0' : '-bottom-4 border-t-white border-b-0'
-                ].join(' ');
-
                 return (
                   <div
                     key={loc.id}
-                    className={`absolute transform -translate-x-1/2 -translate-y-1/2 group cursor-pointer w-16 h-16 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-20'}`}
+                    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)}
@@ -177,121 +151,125 @@ export function InteractiveGermanyMap({
                       <div className="absolute inset-0 m-auto w-6 h-6 rounded-full animate-ping bg-primary/50 scale-150" />
                     )}
 
-                    {/* Marker Dot */}
+                    {/* Elegant Marker Dot */}
                     <motion.div
                       initial={{ scale: 0 }}
                       animate={{ scale: 1 }}
                       transition={{ type: 'spring', delay: idx * 0.1 }}
-                      className={`relative flex items-center justify-center rounded-full shadow-[0_0_20px_rgba(130,237,32,0.4)] transition-transform duration-300 ${
-                        isActive ? 'scale-125 z-30 ring-4 ring-primary/30' : 'scale-100'
+                      className={`relative flex items-center justify-center rounded-full shadow-[0_0_20px_rgba(130,237,32,0.6)] transition-transform duration-300 ${
+                        isActive ? 'scale-125 z-30 ring-4 ring-primary/40' : 'scale-100 group-hover/pin:scale-110'
                       } ${
                         isHQ || isBranch
-                          ? 'w-6 h-6 bg-primary text-[#050B14]'
+                          ? 'w-7 h-7 bg-primary text-[#050B14]'
                           : 'w-4 h-4 bg-white ring-[3px] ring-primary'
                       }`}
                     >
-                      {(isHQ || isBranch) && <MapPin className="w-3.5 h-3.5" />}
+                      {(isHQ || isBranch) && <MapPin className="w-4 h-4" />}
                     </motion.div>
-
-                    {/* Tooltip */}
-                    <AnimatePresence>
-                      {isActive && (
-                        <motion.div
-                          variants={{
-                            hidden: { opacity: 0, y: isNearTop ? -15 : 15, scale: 0.9 },
-                            visible: { 
-                              opacity: 1, y: 0, scale: 1,
-                              transition: { 
-                                type: "spring", stiffness: 350, damping: 25,
-                                staggerChildren: 0.05, delayChildren: 0.05
-                              }
-                            },
-                            exit: { 
-                              opacity: 0, y: isNearTop ? -10 : 10, scale: 0.95, 
-                              transition: { duration: 0.15, ease: "easeIn" } 
-                            }
-                          }}
-                          initial="hidden"
-                          animate="visible"
-                          exit="exit"
-                          className={`${tooltipClasses} overflow-hidden p-0`}
-                        >
-                          {loc.featuredImage && (
-                            <motion.div 
-                              variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }}
-                              className="relative w-full h-32 bg-neutral-100 overflow-hidden"
-                            >
-                              <Image
-                                src={loc.featuredImage}
-                                alt={loc.name}
-                                fill
-                                className="object-cover transform transition-transform duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-110"
-                              />
-                              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-80" />
-                              <div className="absolute bottom-3 left-4 flex items-center gap-2">
-                                {isHQ ? <Factory className="w-4 h-4 text-primary drop-shadow" /> : <Zap className="w-4 h-4 text-primary drop-shadow" />}
-                                <span className="font-extrabold text-sm leading-tight text-white drop-shadow-md">{loc.name}</span>
-                              </div>
-                            </motion.div>
-                          )}
-                          
-                          <div className={loc.featuredImage ? "p-5 pt-4" : "p-5"}>
-                            {!loc.featuredImage && (
-                              <motion.div 
-                                variants={{ hidden: { opacity: 0, x: -5 }, visible: { opacity: 1, x: 0 } }}
-                                className="flex items-center gap-2 mb-2"
-                              >
-                                {isHQ ? <Factory className="w-4 h-4 text-primary" /> : <Zap className="w-4 h-4 text-primary" />}
-                                <span className="font-extrabold text-sm leading-tight text-neutral-dark">{loc.name}</span>
-                              </motion.div>
-                            )}
-                            
-                            <motion.p 
-                              variants={{ hidden: { opacity: 0, y: 5 }, visible: { opacity: 1, y: 0 } }}
-                              className="text-xs text-neutral-500 font-medium"
-                            >
-                              {loc.description}
-                            </motion.p>
-                          
-                          {loc.details && (
-                            <ul className="mt-4 space-y-2">
-                              {loc.details.map((detail, i) => (
-                                <motion.li 
-                                  key={i} 
-                                  variants={{ hidden: { opacity: 0, x: -5 }, visible: { opacity: 1, x: 0 } }}
-                                  className="text-[11px] text-neutral-dark flex items-center gap-2 font-semibold"
-                                >
-                                  <div className="w-4 h-4 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
-                                    <CheckCircle2 className="w-3 h-3 text-primary" />
-                                  </div>
-                                  {detail}
-                                </motion.li>
-                              ))}
-                            </ul>
-                          )}
-                          
-                          {loc.href && (
-                            <motion.div 
-                              variants={{ hidden: { opacity: 0, y: 5 }, visible: { opacity: 1, y: 0 } }}
-                              className="mt-4 pt-3 border-t border-neutral-100 text-xs font-bold text-primary flex items-center gap-1 group/link"
-                            >
-                              Zum Projekt 
-                              <span className="text-base leading-none translate-y-[1px] transform transition-transform duration-300 group-hover:translate-x-1.5">&rarr;</span>
-                            </motion.div>
-                          )}
-                          </div>
-                          
-                          {/* Arrow Down/Up */}
-                          <div className={arrowClasses} />
-                        </motion.div>
-                      )}
-                    </AnimatePresence>
                   </div>
                 );
               })}
+
+              {/* Global Tooltip */}
+              <AnimatePresence>
+                {activeLocation && (
+                  <motion.div
+                    key="tooltip"
+                    initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                    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"
+                    style={{
+                      left: `${activeLocation.x}%`,
+                      top: `${activeLocation.y}%`,
+                      transform: activeLocation.x < 50 ? 'translate(20px, -50%)' : 'translate(calc(-100% - 20px), -50%)',
+                    }}
+                  >
+                    <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">
+                      
+                      {activeLocation.featuredImage && (
+                        <div className="relative w-full h-32 bg-neutral-900">
+                          <Image
+                            src={activeLocation.featuredImage}
+                            alt={activeLocation.name}
+                            fill
+                            className="object-cover"
+                          />
+                          <div className="absolute inset-0 bg-gradient-to-t from-[#050B14] to-transparent opacity-90" />
+                        </div>
+                      )}
+
+                      <div className="p-4">
+                        <div className="flex items-center gap-2 mb-1">
+                          <MapPin className="w-3.5 h-3.5 text-primary" />
+                          <span className="text-xs font-bold text-primary uppercase tracking-wider">
+                            {activeLocation.type === 'hq' ? 'Hauptsitz' : 
+                             activeLocation.type === 'branch' ? 'Niederlassung' : 
+                             activeLocation.type === 'minor_node' ? 'Projekt' : 'Referenz'}
+                          </span>
+                        </div>
+                        <div className="font-heading font-bold text-lg leading-tight mb-2">
+                          {activeLocation.name}
+                        </div>
+                        {activeLocation.type !== 'minor_node' ? (
+                          <div className="text-white/60 text-sm line-clamp-3 mb-3">
+                            {activeLocation.description}
+                          </div>
+                        ) : (
+                          <div className="text-white/60 text-xs mb-3">
+                            {activeLocation.description === 'wind' ? 'Errichtung Leitungstrassen & Netzanbindung für Windpark-Infrastruktur.' :
+                             activeLocation.description === 'pv' ? 'Bau von Mittelspannungstrassen zur Einspeisung der PV-Anlage.' :
+                             activeLocation.description === 'fiber' ? 'Komplexer FTTx Breitbandausbau inkl. LWL-Montage & Tiefbau.' :
+                             activeLocation.description === 'power' ? '110kV Hochspannungstrasse Erdkabelverlegung.' :
+                             activeLocation.description === 'battery' ? 'Infrastrukturausbau für BESS (Batteriespeicher).' :
+                             'Komplexes Infrastrukturprojekt (Tiefbau & HDD).'}
+                          </div>
+                        )}
+                        
+                        {(activeLocation.details || activeLocation.type === 'minor_node') && (
+                          <ul className="mb-3 space-y-1.5 border-t border-white/10 pt-3">
+                            {activeLocation.type === 'minor_node' ? (
+                              <>
+                                <li className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
+                                  <CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
+                                  <span>{
+                                    activeLocation.description === 'wind' ? 'Netzanbindung Windpark' :
+                                    activeLocation.description === 'pv' ? 'Einspeisung PV-Anlage' :
+                                    activeLocation.description === 'fiber' ? 'FTTx Infrastruktur' :
+                                    activeLocation.description === 'power' ? '110kV Trasse' :
+                                    activeLocation.description === 'battery' ? 'BESS Anschluss' : 'Infrastrukturprojekt'
+                                  }</span>
+                                </li>
+                                <li className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
+                                  <CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
+                                  <span>Tiefbau & Spülbohrung (HDD)</span>
+                                </li>
+                              </>
+                            ) : (
+                              activeLocation.details?.map((detail, i) => (
+                                <li key={i} className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
+                                  <CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
+                                  <span>{detail}</span>
+                                </li>
+                              ))
+                            )}
+                          </ul>
+                        )}
+
+                        {activeLocation.href && (
+                          <div className="inline-flex items-center text-xs font-bold text-primary">
+                            {locale === 'en' ? 'Learn more' : 'Zum Projekt'}
+                            <ArrowUpRight className="w-3.5 h-3.5 ml-1" />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
             </div>
           </div>
-          
         </div>
       </div>
     </div>