style: harmonize mobile and desktop vertical spacing across all components

components/blocks/BenefitGrid.tsx

@@ -75,7 +75,7 @@ const Icons = {
 
 export function BenefitGrid({ badge, title, description, benefits }: BenefitGridProps) {
   return (
-    <section className="bg-white py-12 md:py-24 relative overflow-hidden border-t border-neutral-100">
+    <section className="bg-white py-16 md:py-24 lg:py-32 relative overflow-hidden border-t border-neutral-100">
       <div className="container px-4 max-w-7xl mx-auto relative z-10">
         
         <div className="max-w-3xl mx-auto text-center mb-16">

components/blocks/CertificatesBlock.tsx

@@ -99,7 +99,7 @@ export function CertificatesBlock({ badge, title, description, certificates = de
 
   if (!isMounted) {
     return (
-      <section className="py-12 md:py-24 bg-neutral-50 relative overflow-hidden">
+    <section className="py-16 md:py-24 lg:py-32 bg-neutral-50 relative overflow-hidden">
         <Container>
           {!hideHeader && (
             <div className="text-center max-w-3xl mx-auto mb-16">

components/blocks/CompanyTimeline.tsx

@@ -80,7 +80,7 @@ export function CompanyTimeline({
   const lineHeight = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
 
   return (
-    <section className="py-12 md:py-32 bg-[#FAFAFA] relative overflow-hidden">
+    <section className="py-16 md:py-24 lg:py-32 bg-[#FAFAFA] relative overflow-hidden">
       {/* Background Decor */}
       <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-primary/5 rounded-full blur-[100px] pointer-events-none -translate-y-1/2 translate-x-1/3" />
       <div className="absolute bottom-0 left-0 w-[800px] h-[800px] bg-neutral-200/40 rounded-full blur-[120px] pointer-events-none translate-y-1/3 -translate-x-1/3" />

components/blocks/CompetenceBentoGrid.tsx

@@ -62,7 +62,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
   // Static fallback for SSR
   if (!isMounted) {
     return (
-      <section className="py-12 md:py-24 bg-neutral text-neutral-dark overflow-hidden relative">
+      <section className="py-16 md:py-24 lg:py-32 bg-neutral text-neutral-dark overflow-hidden relative">
         <Container>
           <div className="flex flex-col md:flex-row justify-between items-end mb-12">
             <div className="max-w-2xl">

components/blocks/ContactSection.tsx

@@ -41,7 +41,7 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
   const { showForm, showMap } = props;
 
   return (
-    <Section className="bg-neutral-light py-12 md:py-28 relative overflow-hidden">
+    <Section className="bg-neutral-light relative overflow-hidden">
       <Container>
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16">
           <motion.div 

components/blocks/FaqBlock.tsx

@@ -21,7 +21,7 @@ export const FaqBlock: React.FC<FaqBlockProps> = ({
   if (!questions || questions.length === 0) return null;
 
   return (
-    <section className="py-12 md:py-16">
+    <section className="py-16 md:py-24 lg:py-32">
       <div className="max-w-3xl mx-auto">
         <div className="mb-10 text-center">
           {subtitle && (

components/blocks/InteractiveGermanyMap.tsx

@@ -165,10 +165,12 @@ export function InteractiveGermanyMap({
               </div>
 
               {/* Minor Location Markers (The 100+ generic projects) */}
-              {finalLocations.filter(l => l.type === 'minor_node').map((loc, idx) => (
+              {finalLocations.filter(l => l.type === 'minor_node').map((loc, idx) => {
+                const isActive = activeLocation === loc;
+                return (
                 <div
                   key={`minor-${idx}`}
-                  className="absolute z-10 group/minor cursor-pointer w-10 h-10 flex items-center justify-center"
+                  className={`absolute group/minor cursor-pointer w-8 h-8 md:w-5 md:h-5 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-10 hover:z-30'}`}
                   style={{
                     left: `${loc.x}%`,
                     top: `${loc.y}%`,
@@ -176,12 +178,13 @@ export function InteractiveGermanyMap({
                   }}
                   onMouseEnter={() => handleMouseEnter(loc)}
                   onMouseLeave={handleMouseLeave}
+                  onTouchStart={() => handleMouseEnter(loc)}
                   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={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${isActive ? 'bg-white scale-150 shadow-[0_0_10px_rgba(130,237,32,1)]' : 'bg-primary/80 group-hover/minor:bg-white group-hover/minor:scale-150'}`} />
                   <div className="absolute inset-0 m-auto w-2 h-2 bg-primary rounded-full opacity-0 group-hover/minor:animate-ping" />
                 </div>
-              ))}
+              )})}
 
               {/* Major Location Markers (HQ, Branch, Project) */}
               {finalLocations.filter(l => l.type !== 'minor_node').map((loc, idx) => {
@@ -192,10 +195,11 @@ export function InteractiveGermanyMap({
                 return (
                   <div
                     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'}`}
+                    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 hover:z-40'}`}
                     style={{ left: `${loc.x}%`, top: `${loc.y}%` }}
                     onMouseEnter={() => handleMouseEnter(loc)}
                     onMouseLeave={handleMouseLeave}
+                    onTouchStart={() => handleMouseEnter(loc)}
                     onClick={() => handleMouseEnter(loc)}
                   >
                     {/* Ping Animation for HQ / Branch */}

components/blocks/ReferencesSlider.tsx

@@ -94,7 +94,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
 
 
   return (
-    <section id="referenzen" className="py-12 md:py-24 bg-neutral-dark text-white relative overflow-hidden">
+    <section id="referenzen" className="py-16 md:py-24 lg:py-32 bg-neutral-dark text-white relative overflow-hidden">
       <div className="absolute inset-0 bg-gradient-to-b from-neutral-dark via-neutral-900 to-neutral-dark z-0" />
       
       <div className="container relative z-10 mb-12 flex flex-col md:flex-row justify-between items-end gap-6">

components/blocks/ServiceDetailGrid.tsx

@@ -105,7 +105,7 @@ export function ServiceDetailGrid({
   panels
 }: ServiceDetailGridProps) {
   return (
-    <section className="bg-neutral-50 py-12 md:py-24 border-b border-neutral-100 relative overflow-hidden">
+    <section className="bg-neutral-50 py-16 md:py-24 lg:py-32 border-b border-neutral-100 relative overflow-hidden">
       
       <div className="container relative z-10 px-4 max-w-7xl mx-auto">
         <div className="max-w-3xl mb-12 md:mb-20 text-left">

components/blocks/SubCompanyTiles.tsx

@@ -68,7 +68,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
   })) || defaultCompanies;
   
   return (
-    <section id="unternehmen" className="py-12 md:py-24 bg-neutral-dark border-b border-neutral-800 relative overflow-hidden">
+    <section id="unternehmen" className="py-16 md:py-24 lg:py-32 bg-neutral-dark border-b border-neutral-800 relative overflow-hidden">
       <div className="container relative z-10 px-4">
         
         {(badge || title) && (

components/blocks/TeamGrid.tsx

@@ -28,7 +28,7 @@ export function TeamGrid({ members }: TeamGridProps) {
   if (!members || members.length === 0) return null;
 
   return (
-    <section className="py-12 md:py-24 bg-white relative overflow-hidden">
+    <section className="py-16 md:py-24 lg:py-32 bg-white relative overflow-hidden">
       <div className="container relative z-10">
         <div className="mb-12">
           <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{t('badge')}</h2>

components/home/CTA.tsx

@@ -7,7 +7,7 @@ export default function CTA({ data }: { data?: any }) {
   const locale = useLocale();
 
   return (
-    <Section className="bg-primary text-white py-16 md:py-32 relative overflow-hidden">
+    <Section className="bg-primary text-white relative overflow-hidden">
       <div className="absolute top-0 right-0 w-1/3 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
       <div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-primary/10 rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
 

components/home/Experience.tsx

@@ -7,7 +7,7 @@ export default function Experience({ data }: { data?: any }) {
   const t = useTranslations('Home.experience');
 
   return (
-    <Section className="relative py-16 md:py-48 overflow-hidden text-white">
+    <Section className="relative overflow-hidden text-white">
       <div className="absolute inset-0 z-0">
         <Image
           src="/uploads/2024/12/1694273920124-copy-2.webp"

components/home/GallerySection.tsx

@@ -24,7 +24,7 @@ export default function GallerySection({ data }: { data?: any }) {
   const lightboxIndex = photoParam ? parseInt(photoParam, 10) : 0;
 
   return (
-    <Section className="bg-white text-white py-16 md:py-32">
+    <Section className="bg-white text-white">
       <Container>
         <Heading level={2} subtitle={data?.subtitle || t('subtitle')} align="center">
           {data?.title || t('title')}

components/home/MeetTheTeam.tsx

@@ -9,7 +9,7 @@ export default function MeetTheTeam({ data }: { data?: any }) {
   const locale = useLocale();
 
   return (
-    <Section className="relative py-16 md:py-48 overflow-hidden">
+    <Section className="relative overflow-hidden">
       <div className="absolute inset-0 z-0">
         <Image
           src="/uploads/2024/12/DSC08036-Large.webp"

components/team/Gallery.tsx

@@ -22,7 +22,7 @@ export default function Gallery() {
   ];
 
   return (
-    <Section className="bg-primary-dark py-16 md:py-32">
+    <Section className="bg-primary-dark">
       <Container>
         <Heading level={2} subtitle={t('gallery.subtitle')} align="center" className="text-white mb-12 md:mb-20">
           <span className="text-white">{t('gallery.title')}</span>

components/ui/Section.tsx

@@ -3,7 +3,7 @@ import { cn } from './utils';
 
 export function Section({ className, children, ...props }: React.HTMLAttributes<HTMLElement>) {
   return (
-    <section className={cn('py-12 md:py-28 lg:py-36 overflow-hidden content-visibility-auto', className)} {...props}>
+    <section className={cn('py-16 md:py-24 lg:py-32 overflow-hidden content-visibility-auto', className)} {...props}>
       {children}
     </section>
   );