fix: media – TMDb img-src in CSP, Platzierungs-Badge auf Postern

frontend/src/tools/media.jsx

@@ -113,7 +113,7 @@ export default function Media({ toast, mobile, nav }) {
 }
 
 // ── Film-Karte ────────────────────────────────────────────────────────────────
-function MovieCard({ movie, favIds, onToggleFav }) {
+function MovieCard({ movie, rank, favIds, onToggleFav }) {
   const isFav = favIds.has(movie.id);
   const releaseDE = movie.release_date
     ? new Date(movie.release_date).toLocaleDateString('de-DE', { day:'2-digit', month:'2-digit', year:'numeric' })
@@ -131,6 +131,14 @@ function MovieCard({ movie, favIds, onToggleFav }) {
           : <div style={{ width:'100%', height:'100%', display:'flex', alignItems:'center',
               justifyContent:'center', fontSize:36, color:'rgba(255,255,255,0.1)' }}>🎬</div>
         }
+        {rank && (
+          <div style={{
+            position:'absolute', bottom:6, left:6,
+            background:'rgba(0,0,0,0.85)', borderRadius:5,
+            padding:'2px 8px', fontSize:13, color:'#fff', fontWeight:900,
+            fontFamily:"'Space Mono',monospace", lineHeight:1.4,
+          }}>#{rank}</div>
+        )}
         {movie.vote_average > 0 && (
           <div style={{
             position:'absolute', top:6, left:6,
@@ -221,8 +229,8 @@ function KinoGrid({ endpoint, emptyText }) {
       gridTemplateColumns:'repeat(auto-fill, minmax(130px, 1fr))',
       gap:12,
     }}>
-      {movies.map(m => (
-        <MovieCard key={m.id} movie={m} favIds={favIds} onToggleFav={toggleFav} />
+      {movies.map((m, i) => (
+        <MovieCard key={m.id} movie={m} rank={i+1} favIds={favIds} onToggleFav={toggleFav} />
       ))}
     </div>
   );