diff --git a/src/pages/home/components/Hero.tsx b/src/pages/home/components/Hero.tsx
index 47cf399..1776857 100644
--- a/src/pages/home/components/Hero.tsx
+++ b/src/pages/home/components/Hero.tsx
@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
 import { Github, Linkedin, Mail } from 'lucide-react';
-import { motion } from 'framer-motion';
 
 const Hero = () => {
     const { t } = useTranslation();
@@ -92,47 +91,22 @@ const Hero = () => {
                     </picture>
                 </div>
 
-                {/* Title and Name */}
-                <motion.p
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: 0.2 }}
-                    className="text-zinc-400 text-sm sm:text-base tracking-wider mb-2"
-                >
+                {/* Title and Name - sofort sichtbar für LCP (keine opacity Animation!) */}
+                <p className="text-zinc-400 text-sm sm:text-base tracking-wider mb-2">
                     {t('pages.home.hero.title')}
-                </motion.p>
-                <motion.h1
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: 0.3 }}
-                    className="text-4xl sm:text-5xl font-bold mb-3 flex items-center"
-                >
+                </p>
+                <h1 className="text-4xl sm:text-5xl font-bold mb-3 flex items-center">
                     {t('pages.home.hero.name')}<span className="animate-pulse ml-1">|</span>
-                </motion.h1>
-                <motion.p
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: 0.35 }}
-                    className="text-zinc-300 text-sm sm:text-base max-w-xl text-center mb-2 px-4"
-                >
+                </h1>
+                <p className="text-zinc-300 text-sm sm:text-base max-w-xl text-center mb-2 px-4">
                     {t('pages.home.hero.description')}
-                </motion.p>
-                <motion.p
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: 0.38 }}
-                    className="text-zinc-500 text-xs sm:text-sm mb-8"
-                >
+                </p>
+                <p className="text-zinc-400 text-xs sm:text-sm mb-8">
                     {t('pages.home.hero.currentRole')}
-                </motion.p>
+                </p>
 
                 {/* Navigation */}
-                <motion.div
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: 0.4 }}
-                    className="flex flex-col sm:flex-row gap-4 sm:gap-8 text-white text-base sm:text-lg z-20"
-                >
+                <div className="flex flex-col sm:flex-row gap-4 sm:gap-8 text-white text-base sm:text-lg z-20">
                     <button
                         onClick={() => scrollToSection('experience')}
                         className="relative w-full sm:w-auto px-8 py-3 rounded-full uppercase cursor-pointer overflow-hidden group"
@@ -161,7 +135,7 @@ const Hero = () => {
                         <span className="relative z-10">{t('pages.home.hero.navigation.about')}</span>
                         <div className="absolute inset-0 bg-zinc-700/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full" />
                     </button>
-                </motion.div>
+                </div>
             </div>
 
             {/* Contact Button Bottom */}
diff --git a/tailwind.config.js b/tailwind.config.js
index 25c6767..fa01b18 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,6 +13,15 @@ module.exports = {
       fontFamily: {
         sans: ['Inter', 'system-ui', 'sans-serif'],
       },
+      animation: {
+        'slide-up': 'slideUp 0.5s ease-out forwards',
+      },
+      keyframes: {
+        slideUp: {
+          '0%': { transform: 'translateY(10px)' },
+          '100%': { transform: 'translateY(0)' },
+        },
+      },
       colors: {
         border: "rgb(var(--border))",
         input: "rgb(var(--input))",