From 5368f1a64df87bb023408bf20797f97bfb344353 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Mon, 15 Jun 2026 16:45:40 +0200
Subject: [PATCH] feat(ui): smooth radial fade on EU badge and setup custom
 image path

---
 components/decorations/EUFundingBadge.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/components/decorations/EUFundingBadge.tsx b/components/decorations/EUFundingBadge.tsx
index 6132d35af..304360fd9 100644
--- a/components/decorations/EUFundingBadge.tsx
+++ b/components/decorations/EUFundingBadge.tsx
@@ -9,29 +9,30 @@ export function EUFundingBadge() {
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 1.5, ease: [0.16, 1, 0.3, 1] }}
-      className="absolute top-0 right-0 w-[220px] md:w-[320px] h-[220px] md:h-[320px] z-[40] pointer-events-none select-none overflow-hidden"
+      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: 'linear-gradient(225deg, black 15%, transparent 65%)',
-        WebkitMaskImage: 'linear-gradient(225deg, black 15%, transparent 65%)',
+        // Perfekter weicher Fade, der sicherstellt, dass harte Kanten komplett unsichtbar werden
+        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%)',
       }}
     >
-      {/* Background Flag with Scaling to fill the corner */}
-      <div className="absolute inset-0 w-full h-full scale-[1.3] origin-top-right opacity-90">
+      {/* Background Flag */}
+      <div className="absolute inset-0 w-full h-full opacity-95">
         <Image
-          src="/assets/eu-flag-perspective.png"
+          src="/assets/eu-flag.jpg"
           alt="European Union Background"
           fill
-          className="object-cover object-center"
+          className="object-cover object-top"
           priority
         />
       </div>
       
       {/* Text overlaid on the flag */}
-      <div className="absolute top-0 right-0 p-4 md:p-6 flex flex-col items-end text-right z-10 drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)]">
-        <span className="block text-[8px] md:text-[10px] font-bold text-white/90 tracking-wide leading-snug">
+      <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-[10px] md:text-[12px] font-extrabold text-white tracking-wider leading-snug uppercase">
+        <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>