From 28451452a2e7103c8333d7ec98d0638410121034 Mon Sep 17 00:00:00 2001
From: dschlueter <dschlueter@kitux.de>
Date: Sat, 25 Apr 2026 19:30:19 +0200
Subject: [PATCH] Mobile: SVG-Grafik, auf kleinen Screens sichtbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- programmer-graphic.tsx: programmierer-vector.svg statt PNG (336 KB statt 1,6 MB)
- hero.tsx: hidden lg:block entfernt, Grafik jetzt auch auf Mobile sichtbar
- Mobile-Größe: max-w-xs/sm, Desktop: max-w-md

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/hero.tsx               | 2 +-
 components/programmer-graphic.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/hero.tsx b/components/hero.tsx
index e7d7206..e4c5f2c 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -83,7 +83,7 @@ export function Hero() {
             initial={{ opacity: 0, scale: 0.95 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{ duration: 0.8, delay: 0.3 }}
-            className="lg:col-span-5 hidden lg:block"
+            className="lg:col-span-5"
           >
             <ProgrammerGraphic />
           </motion.div>
diff --git a/components/programmer-graphic.tsx b/components/programmer-graphic.tsx
index 44699d8..6f832ff 100644
--- a/components/programmer-graphic.tsx
+++ b/components/programmer-graphic.tsx
@@ -2,7 +2,7 @@
 
 import { motion } from 'framer-motion'
 import Image from 'next/image'
-import programmiererImg from '../public/Programmierer.png'
+import programmiererSvg from '../public/programmierer-vector.svg'
 
 export function ProgrammerGraphic() {
   return (
@@ -10,10 +10,10 @@ export function ProgrammerGraphic() {
       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"
+      className="relative w-full max-w-xs mx-auto aspect-[3/5] sm:max-w-sm lg:max-w-md lg:aspect-square"
     >
       <Image
-        src={programmiererImg}
+        src={programmiererSvg}
         alt="Programmierung: Von 1976 bis heute – 50 Jahre Code"
         fill
         className="object-contain drop-shadow-lg"