style: hide scrollbars on mobile and fix desktop overlay scrollbars for company tiles

app/globals.css

@@ -10,11 +10,13 @@
   }
   
   .hide-scrollbar {
-    -ms-overflow-style: none;  /* IE and Edge */
+    -ms-overflow-style: none !important;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
+    scrollbar-width: none !important;  /* Firefox */
   }
   .hide-scrollbar::-webkit-scrollbar {
-    display: none; /* Chrome, Safari and Opera */
+    display: none !important; /* Chrome, Safari and Opera */
+    width: 0 !important;
+    height: 0 !important;
   }
 
   @keyframes bg-pulse-15 {

components/blocks/SubCompanyTiles.tsx

@@ -79,7 +79,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
         )}
         
         <motion.div 
-          className="flex overflow-x-auto snap-x snap-mandatory pb-6 md:pb-0 md:grid md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 hide-scrollbar -mx-4 px-4 md:mx-0 md:px-0"
+          className="flex overflow-x-auto md:overflow-visible snap-x snap-mandatory pb-6 md:pb-0 md:grid md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 hide-scrollbar -mx-4 px-4 md:mx-0 md:px-0"
           variants={containerVariants}
           initial="hidden"
           whileInView="visible"

components/decorations/EUFundingBadge.tsx

@@ -8,20 +8,34 @@ export function EUFundingBadge() {
     <motion.div 
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
-      transition={{ duration: 2, ease: [0.16, 1, 0.3, 1] }}
+      transition={{ duration: 1.5, ease: [0.16, 1, 0.3, 1] }}
-      className="absolute top-0 right-0 w-[350px] md:w-[550px] h-[350px] md:h-[550px] z-[40] pointer-events-none select-none"
+      className="absolute top-0 right-0 w-[260px] md:w-[380px] h-[260px] md:h-[380px] z-[40] pointer-events-none select-none overflow-hidden"
       style={{
-        maskImage: 'radial-gradient(ellipse at top right, black 10%, transparent 70%)',
+        // Perfekter weicher Fade, der sicherstellt, dass harte Kanten komplett unsichtbar werden
-        WebkitMaskImage: 'radial-gradient(ellipse at top right, black 10%, transparent 70%)',
+        maskImage: 'radial-gradient(100% 100% at top right, black 10%, rgba(0,0,0,0.8) 30%, transparent 70%)',
+        WebkitMaskImage: 'radial-gradient(100% 100% at top right, black 10%, rgba(0,0,0,0.8) 30%, transparent 70%)',
       }}
     >
-      <Image
+      {/* Background Flag */}
-        src="/assets/eu-flag-perspective.png"
+      <div className="absolute inset-0 w-full h-full opacity-95">
-        alt="European Union Background"
+        <Image
-        fill
+          src="/assets/eu-flag.webp"
-        className="object-cover object-top opacity-70"
+          alt="European Union Background"
-        priority
+          fill
-      />
+          className="object-cover object-top"
+          priority
+        />
+      </div>
+      
+      {/* Text overlaid on the flag */}
+      <div className="absolute top-0 right-0 p-5 md:p-8 flex flex-col items-end text-right z-10 drop-shadow-[0_2px_8px_rgba(0,0,0,0.9)]">
+        <span className="block text-[9px] md:text-[11px] font-bold text-white/90 tracking-wide leading-snug drop-shadow-md">
+          Kofinanziert von der
+        </span>
+        <span className="block text-[11px] md:text-[13px] font-extrabold text-white tracking-wider leading-snug uppercase drop-shadow-md">
+          Europäischen Union
+        </span>
+      </div>
     </motion.div>
   );
 }