Performance: Mobile-Optimierungen für besseren PageSpeed

- Portrait-Bild von 1.2MB auf ~20KB optimiert (300px/600px + WebP)
- Hero-Animation entfernt für schnelleren LCP
- WebP srcset für alle Projekt-Bilder (6 Größen: 200-1200px)
- Korrekte sizes-Attribute für Mobile (350px statt 1200px)
- Supabase lazy laden via dynamischen Import
- Admin-Check verzögert mit requestIdleCallback
- Hauptbundle von 461KB auf 358KB reduziert

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/pages/home/components/Hero.tsx

@@ -63,25 +63,34 @@ const Hero = () => {
 
             {/* Main Content */}
             <div className="flex flex-col items-center justify-start min-h-screen px-4 pt-20 relative" style={{ zIndex: 30 }}>
-                {/* Profile Image */}
-                <motion.div
-                    initial={{ opacity: 0, scale: 0.9 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    transition={{ duration: 0.5 }}
+                {/* Profile Image - keine Animation beim Initial Load für bessere LCP */}
+                <div
                     className="w-56 h-56 sm:w-72 sm:h-72 mb-8 rounded-full overflow-hidden border-2 border-zinc-800"
-                    style={{ transform: 'translateZ(0)', backfaceVisibility: 'hidden' }}
+                    style={{ transform: 'translateZ(0)' }}
                 >
-                    <img
-                        src="/portrait.jpg"
-                        alt={t('pages.home.hero.image.alt')}
-                        className="w-full h-full object-cover"
-                        loading="eager"
-                        fetchPriority="high"
-                        width={288}
-                        height={288}
-                        style={{ transform: 'scale(1.01)' }}
-                    />
-                </motion.div>
+                    <picture>
+                        <source
+                            srcSet="/portrait-300.webp 300w, /portrait-600.webp 600w"
+                            sizes="(max-width: 640px) 224px, 288px"
+                            type="image/webp"
+                        />
+                        <source
+                            srcSet="/portrait-300.jpg 300w, /portrait-600.jpg 600w"
+                            sizes="(max-width: 640px) 224px, 288px"
+                            type="image/jpeg"
+                        />
+                        <img
+                            src="/portrait-600.jpg"
+                            alt={t('pages.home.hero.image.alt')}
+                            className="w-full h-full object-cover"
+                            loading="eager"
+                            fetchPriority="high"
+                            width={288}
+                            height={288}
+                            decoding="sync"
+                        />
+                    </picture>
+                </div>
 
                 {/* Title and Name */}
                 <motion.p