From f37415eb0654a855e53f1ad66b2cff4cb8a76f90 Mon Sep 17 00:00:00 2001
From: Sebastian Pachon <gsebastianp@gmail.com>
Date: Tue, 2 Jun 2026 22:04:01 +0200
Subject: [PATCH] Mobile: put Schnell-Check image on top, text below

On the homepage "SIND SIE BERECHTIGT?" section the image rendered after
the text on mobile (text-first source order in a single-column grid). Use
CSS order to place the award image as a header band on top on mobile, then
the heading, copy and criteria checklist below it. The image now fades
downward into the text background (#E4E2E3) on mobile while keeping the
original leftward fade on desktop. Desktop layout unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/pages/Home.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 5c0ea35..e09eefa 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -208,8 +208,8 @@ const Home: React.FC = () => {
       <section style={{ overflow: 'hidden', position: 'relative', isolation: 'isolate' }}>
         <MunichSkylineBg />
         <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '55% 45%' }}>
-          {/* Left — text */}
-          <div style={{ background: '#E4E2E3', padding: isMobile ? '48px 24px' : '80px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+          {/* Left (desktop) / Bottom (mobile) — text */}
+          <div style={{ background: '#E4E2E3', padding: isMobile ? '36px 24px 48px' : '80px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center', order: isMobile ? 2 : 0 }}>
             <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 10, color: '#4A8FC9', textTransform: 'uppercase', letterSpacing: '0.3em', fontWeight: 700, display: 'block', marginBottom: 16 }}>Schnell-Check</span>
             <h2 style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: 'clamp(1.8rem, 2.8vw, 2.5rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '0 0 20px' }}>
               SIND SIE<br />BERECHTIGT?
@@ -247,15 +247,16 @@ const Home: React.FC = () => {
             </Link>
           </div>
 
-          {/* Right — full-bleed image */}
-          <div style={{ position: 'relative', minHeight: isMobile ? 280 : 560, overflow: 'hidden' }}>
+          {/* Right (desktop) / Top (mobile) — full-bleed image */}
+          <div style={{ position: 'relative', minHeight: isMobile ? 230 : 560, overflow: 'hidden', order: isMobile ? 1 : 0 }}>
             <img
               src="/images/buehne-gewinner.jpg"
               alt="Preisverleihung Bühne"
               style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center center' }}
             />
-            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to left, transparent 40%, #E4E2E3 100%)' }} />
-            {/* Gold bottom line */}
+            {/* Fade: into the text bg — downward on mobile, leftward on desktop */}
+            <div style={{ position: 'absolute', inset: 0, background: isMobile ? 'linear-gradient(to bottom, transparent 45%, #E4E2E3 100%)' : 'linear-gradient(to left, transparent 40%, #E4E2E3 100%)' }} />
+            {/* Gold accent line — bottom edge */}
             <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'linear-gradient(to right, rgba(239,191,4,0.2), #EFBF04, rgba(239,191,4,0.2))' }} />
           </div>
         </div>