From 11b9e4630bb960ecfb1f05b52b2f2ab7205624ec Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Mon, 15 Jun 2026 15:29:23 +0200
Subject: [PATCH] feat(ui): add EU Funding Badge to global layout

---
 app/[locale]/layout.tsx                   |  2 ++
 components/decorations/EUFundingBadge.tsx | 44 +++++++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 components/decorations/EUFundingBadge.tsx

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index f44ed2528..60a28177c 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -19,6 +19,7 @@ import { TransitionProvider } from '@/components/providers/TransitionProvider';
 import { PageTransitionShutter } from '@/components/providers/PageTransitionShutter';
 import { InitialLoader } from '@/components/providers/InitialLoader';
 import { CorporateBackground } from '@/components/decorations/CorporateBackground';
+import { EUFundingBadge } from '@/components/decorations/EUFundingBadge';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -202,6 +203,7 @@ export default async function Layout(props: {
             <PageTransitionShutter />
             <SkipLink />
             <Header navLinks={navLinks} />
+            <EUFundingBadge />
             <MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} />
             
             <main
diff --git a/components/decorations/EUFundingBadge.tsx b/components/decorations/EUFundingBadge.tsx
new file mode 100644
index 000000000..f00f7cf24
--- /dev/null
+++ b/components/decorations/EUFundingBadge.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+export function EUFundingBadge() {
+  return (
+    <motion.div 
+      initial={{ opacity: 0, x: 20 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ duration: 0.8, delay: 0.8, ease: [0.16, 1, 0.3, 1] }}
+      className="fixed top-24 right-4 md:right-6 lg:right-8 z-40 pointer-events-none select-none"
+    >
+      <div className="bg-white p-2.5 rounded-sm shadow-[0_8px_30px_rgba(0,0,0,0.12)] border border-neutral-200/60 flex flex-col items-center w-[110px] sm:w-[130px]">
+        {/* EU Flag */}
+        <svg viewBox="0 0 810 540" xmlns="http://www.w3.org/2000/svg" className="w-full h-auto">
+          <path d="M0 0h810v540H0z" fill="#003399"/>
+          <g fill="#fc0" transform="translate(405 270)">
+            <use href="#eu-star" y="-180"/>
+            <use href="#eu-star" y="180"/>
+            <use href="#eu-star" x="-180"/>
+            <use href="#eu-star" x="180"/>
+            <use href="#eu-star" x="-155.885" y="-90"/>
+            <use href="#eu-star" x="155.885" y="90"/>
+            <use href="#eu-star" x="-155.885" y="90"/>
+            <use href="#eu-star" x="155.885" y="-90"/>
+            <use href="#eu-star" x="-90" y="-155.885"/>
+            <use href="#eu-star" x="90" y="155.885"/>
+            <use href="#eu-star" x="-90" y="155.885"/>
+            <use href="#eu-star" x="90" y="-155.885"/>
+          </g>
+          <defs>
+            <path id="eu-star" d="m0-30 7.053 21.708H29.39L10.36 7.64l7.054 21.709L0 15.692l-17.414 13.657 7.054-21.71L-29.39-8.292h22.337z"/>
+          </defs>
+        </svg>
+        {/* Text */}
+        <div className="mt-2 text-center w-full">
+          <span className="block text-[9.5px] sm:text-[11.5px] font-bold text-[#003399] leading-[1.25] tracking-tight font-sans">
+            Kofinanziert von der<br />Europäischen Union
+          </span>
+        </div>
+      </div>
+    </motion.div>
+  );
+}