From 682d79b42d96603f90c97e27e607793a7d2b496a Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Thu, 9 Jul 2026 10:17:17 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20K=C3=B6Pi=20-=20Bild=20volle=20Breite=20?=
 =?UTF-8?q?oben=20in=20der=20Karte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/tools/koepi.jsx | 65 +++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 35 deletions(-)

diff --git a/frontend/src/tools/koepi.jsx b/frontend/src/tools/koepi.jsx
index 168436f..2fbdbe1 100644
--- a/frontend/src/tools/koepi.jsx
+++ b/frontend/src/tools/koepi.jsx
@@ -34,43 +34,38 @@ function OfferCard({ offer }) {
       border:'1px solid rgba(255,255,255,0.1)',
       display:'flex', flexDirection:'column', gap:8,
     }}>
-      {/* Oben: Bild links + Info rechts */}
-      <div style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
-        {/* Bild */}
-        <div style={{ width:80, height:80, flexShrink:0, background:'#f5f5f5', borderRadius:6, overflow:'hidden', display:'flex', alignItems:'center', justifyContent:'center' }}>
-          {offer.image
-            ? <img src={offer.image} alt="König Pilsener"
-                style={{ width:'100%', height:'100%', objectFit:'contain' }}
-                onError={e => { e.target.parentElement.style.background='transparent'; e.target.style.display='none'; }}
-              />
-            : <span style={{ fontSize:28 }}>🍺</span>
-          }
-        </div>
-        {/* Info */}
-        <div style={{ flex:1, minWidth:0 }}>
-          <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:3, flexWrap:'wrap' }}>
-            <span style={{
-              background:`${color}22`, border:`1px solid ${color}55`,
-              borderRadius:4, padding:'2px 7px',
-              color, fontFamily:'monospace', fontSize:10, fontWeight:700,
-            }}>{offer.retailer}</span>
-            {offer.oldPrice && <span style={{ background:'#e2001a', color:'#fff', borderRadius:4, padding:'2px 6px', fontSize:9, fontFamily:'monospace', fontWeight:700 }}>-29%</span>}
-          </div>
-          {offer.address && (
-            <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:9, marginBottom:3 }}>
-              📍 {offer.address}
-            </div>
-          )}
-          <div style={{ color:'#fff', fontFamily:'monospace', fontSize:13, fontWeight:600 }}>
-            König Pilsener
-          </div>
-          {offer.description && (
-            <div style={{ color:'rgba(255,255,255,0.45)', fontFamily:'monospace', fontSize:9, marginTop:2, lineHeight:1.4 }}>
-              {offer.description}
-            </div>
-          )}
+      {/* Bild oben, volle Breite */}
+      {offer.image && (
+        <div style={{ margin:'-12px -14px 8px -14px', height:160, background:'#f0f0f0', borderRadius:'8px 8px 0 0', overflow:'hidden', display:'flex', alignItems:'center', justifyContent:'center' }}>
+          <img src={offer.image} alt="König Pilsener"
+            style={{ width:'100%', height:'100%', objectFit:'contain' }}
+            onError={e => { e.target.parentElement.style.display='none'; }}
+          />
         </div>
+      )}
+
+      {/* Händler + Adresse */}
+      <div style={{ display:'flex', alignItems:'center', gap:6, flexWrap:'wrap' }}>
+        <span style={{
+          background:`${color}22`, border:`1px solid ${color}55`,
+          borderRadius:4, padding:'2px 7px',
+          color, fontFamily:'monospace', fontSize:10, fontWeight:700,
+        }}>{offer.retailer}</span>
+        {offer.oldPrice && <span style={{ background:'#e2001a', color:'#fff', borderRadius:4, padding:'2px 6px', fontSize:9, fontFamily:'monospace', fontWeight:700 }}>-29%</span>}
       </div>
+      {offer.address && (
+        <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:9 }}>
+          📍 {offer.address}
+        </div>
+      )}
+
+      {/* Name + Beschreibung */}
+      <div style={{ color:'#fff', fontFamily:'monospace', fontSize:13, fontWeight:600 }}>König Pilsener</div>
+      {offer.description && (
+        <div style={{ color:'rgba(255,255,255,0.45)', fontFamily:'monospace', fontSize:10, lineHeight:1.4 }}>
+          {offer.description}
+        </div>
+      )}
 
       {/* Preis */}
       <div style={{ display:'flex', alignItems:'baseline', gap:8 }}>