Hero: Neue Programmer-Grafik hinzugefügt (vektorisiert aus Programmierer.png)

- Neue Komponente programmer-graphic.tsx erstellt
- SVG-Grafik aus PNG vektorisiert mit potrace
- alte system-diagram.tsx wird nicht mehr verwendet
- Grafiken zeigen 1976-2026 Timeline mit 50 Jahre Badge

components/programmer-graphic.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+
+export function ProgrammerGraphic() {
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.8 }}
+      className="relative w-full max-w-md mx-auto aspect-[3/5] lg:aspect-square"
+    >
+      <div className="relative w-full h-full">
+        <Image
+          src="/programmierer-vector.svg"
+          alt="Programmierung: Von 1976 bis heute – 50 Jahre Code"
+          fill
+          className="object-contain drop-shadow-lg dark:invert"
+          priority
+        />
+      </div>
+      
+      {/* Subtle decorative elements */}
+      <div className="absolute inset-0 pointer-events-none">
+        {/* 1976 Badge */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.5, duration: 0.6 }}
+          className="absolute top-4 left-4 font-mono text-xs text-accent bg-background/80 px-2 py-1 rounded border border-border/50"
+        >
+          1976
+        </motion.div>
+        
+        {/* 2026 Badge */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.7, duration: 0.6 }}
+          className="absolute bottom-4 right-4 font-mono text-xs text-accent bg-background/80 px-2 py-1 rounded border border-border/50"
+        >
+          2026
+        </motion.div>
+        
+        {/* 50 Years Center Badge */}
+        <motion.div
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 1, duration: 0.8 }}
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-mono text-2xl font-bold text-accent/30"
+        >
+          50
+        </motion.div>
+      </div>
+    </motion.div>
+  )
+}