fix: KöPi - klickbar, Bilder via Proxy, Datum angezeigt

frontend/src/tools/koepi.jsx

@@ -33,16 +33,21 @@ function publisherColor(name) {
 // ── Prospekt-Angebot Karte ────────────────────────────────────────────────────
 function BrochureOfferCard({ offer }) {
   const color = publisherColor(offer.store);
+  const Wrapper = offer.url
+    ? ({children}) => <a href={offer.url} target="_blank" rel="noopener noreferrer" style={{textDecoration:'none'}}>{children}</a>
+    : ({children}) => <div>{children}</div>;
   return (
+    <Wrapper>
     <div style={{
-      ...S.card, padding:0, overflow:'hidden',
+      ...S.card, padding:0, overflow:'hidden', cursor: offer.url ? 'pointer' : 'default',
       border:'1px solid rgba(255,255,255,0.08)',
       display:'flex', flexDirection:'column',
     }}>
       {/* Prospektseite als Bild */}
       {offer.productImage && (
         <div style={{ position:'relative', height:160, overflow:'hidden', flexShrink:0 }}>
-          <img src={offer.productImage} alt={`König Pilsener bei ${offer.store}`}
+          <img src={`/api/tools/koepi/img?url=${encodeURIComponent(offer.productImage)}`}
+            alt={`König Pilsener bei ${offer.store}`}
             style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}
             onError={e => { e.target.style.display='none'; }}
           />
@@ -80,19 +85,20 @@ function BrochureOfferCard({ offer }) {
           </div>
         )}
         {/* Gültigkeit */}
-        {offer.validity && (
-          <div style={{ color: offer.validity.includes('Noch') ? '#f59e0b' : 'rgba(255,255,255,0.4)',
-            fontFamily:'monospace', fontSize:10, marginTop:4 }}>
-            🕐 {offer.validity}
+        {offer.dateRange && (
+          <div style={{ color:'rgba(255,255,255,0.5)', fontFamily:'monospace', fontSize:10, marginTop:4 }}>
+            📅 {offer.dateRange}
           </div>
         )}
-        {offer.dateRange && (
-          <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:10, marginTop:2 }}>
-            {offer.dateRange}
+        {offer.validity && (
+          <div style={{ color: offer.validity.includes('Noch') ? '#f59e0b' : '#4ecdc4',
+            fontFamily:'monospace', fontSize:10, marginTop:2 }}>
+            ⏰ {offer.validity}
           </div>
         )}
       </div>
     </div>
+    </Wrapper>
   );
 }
 
@@ -108,7 +114,8 @@ function GridOfferCard({ offer }) {
     }}>
       {offer.image && (
         <div style={{ height:130, overflow:'hidden', flexShrink:0, background:'#fff', display:'flex', alignItems:'center', justifyContent:'center' }}>
-          <img src={offer.image} alt={offer.name}
+          <img src={`/api/tools/koepi/img?url=${encodeURIComponent(offer.image)}`}
+            alt={offer.name}
             style={{ width:'auto', height:'100%', maxWidth:'100%', objectFit:'contain', display:'block' }}
             onError={e => { e.target.parentElement.style.display='none'; }}
           />