Frontend: Zeitangabe als Milchglas-Overlay über dem Bild

- Zeit („heute 12:27 Uhr") wandert aus card-content nach oben
  über das Bild/Thumbnail als absolutes Overlay
- Milchglas-Effekt: rgba(255,255,255,0.28) + backdrop-filter blur(10px)
- Rote Schrift (#dc3545) für gute Lesbarkeit auf hellem Grund
- Abgerundete Ecken (10px), dezenter Schatten
- Spart Platz in der Karte, sieht edler aus
- Text-only-Karten behalten die Zeit inline im card-content

app.py

@@ -1750,8 +1750,17 @@ def public_frontend():
             pass
 
         text_only_class = " text-only" if not media_first else ""
+        time_block = ""
+        if time_html:
+            time_overlay = f'<div class="story-time-overlay">{time_html}</div>'
+            if media_first:
+                time_block = time_overlay
+            else:
+                time_block = f'<div class="story-time">{time_html}</div>'
+        elif not media_first:
+            time_block = f'<div class="story-time">{date_str}</div>'
         cards += f"""<article class="story-card{text_only_class}">
-  """ + media_first + """
+  """ + media_first + time_block + """
   """ + (f'<div class="story-halle-badge">📍 {r["halle"]}</div>' if r["halle"] else '') + """
   """ + (f'<div class="story-ausverkauft-badge">🚫 AUSVERKAUFT: {r["spiel_titel"]}</div>' if r["category"] == "ausverkauft" and r["spiel_titel"] else '') + """
   <div class="card-content">
@@ -1759,7 +1768,6 @@ def public_frontend():
       <span class="story-type">""" + type_emoji + """</span>
       <span class="story-author">""" + name + """</span>
     </div>
-    """ + (f'<div class="story-time">{time_html}</div>' if time_html else f'<div class="story-time">{date_str}</div>') + """
     <p class="story-preview">""" + preview + """</p>
   </div>
 </article>"""
@@ -1803,7 +1811,9 @@ def public_frontend():
   .story-author { font-weight:600; color:#20228a; font-size:0.78rem; }
   .story-date { color:#999; font-size:0.7rem; margin-left:auto; }
   .story-time { font-size:0.7rem; color:#666; font-weight:500; }
-  .story-time-rel { color:#20228a; font-weight:700; }
+  .story-time-rel { color:#dc3545; font-weight:700; }
+  .story-time-overlay { position:absolute; bottom:8px; left:8px; z-index:5; background:rgba(255,255,255,0.28); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#dc3545; padding:0.3rem 0.65rem; border-radius:10px; font-size:0.8rem; font-weight:700; letter-spacing:0.02em; line-height:1.3; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
+  .story-time-overlay .story-time-rel { color:#dc3545; }
   .story-preview { display:none; }
   .text-only .story-preview { display:block; font-size:0.8rem; line-height:1.4; color:#444; }
   .text-only .card-content { padding-top:0.4rem; }