diff --git a/node/server/public/app.js b/node/server/public/app.js
index e4b077e..48cfece 100644
--- a/node/server/public/app.js
+++ b/node/server/public/app.js
@@ -436,6 +436,20 @@ let lastOverlaySpiritData = null;
 
 // Overlay zentriert in der Mitte mit Schließen-X
 function showSpiritOverlay(spirit) {
+    // Entferne evtl. vorherige Overlay-Elemente
+    document.getElementById('spirit-info-backdrop')?.remove();
+
+    // Erzeuge einen semi-transparenten Backdrop
+    const backdrop = document.createElement('div');
+    backdrop.id = 'spirit-info-backdrop';
+    backdrop.style = `
+        position: fixed;
+        inset: 0;
+        background: rgba(0,0,0,0.55);
+        z-index: 9998;
+    `;
+    document.body.appendChild(backdrop);
+
     let el = document.getElementById('spirit-info');
     if (!el) {
         el = document.createElement('div');
@@ -445,31 +459,32 @@ function showSpiritOverlay(spirit) {
             left: 50%; top: 50%;
             transform: translate(-50%,-50%);
             color: white;
-            background: rgba(0,0,0,0.87);
-            padding: 24px 32px 20px 32px;
-            border-radius: 16px;
+            background: rgba(0,0,0,0.94);
+            padding: 28px 36px 24px 36px;
+            border-radius: 18px;
             font-family: 'Segoe UI', sans-serif;
             z-index: 9999;
-            max-width: 540px;
-            min-width: 300px;
-            box-shadow: 0 6px 48px #000a;
+            max-width: 560px;
+            min-width: 320px;
+            box-shadow: 0 12px 64px #000a;
             text-align: left;
         `;
         document.body.appendChild(el);
     }
-    // Bild-URL (falls vorhanden)
-    let img = "";
-    if (spirit["Image URL"]) {
-        img = `<img src="${spirit["Image URL"]}" 
-                 style="display:block; margin:0 auto 20px auto; max-width:70%; max-height:220px; border-radius:8px; box-shadow: 0 0 16px #0008;" 
-                 alt="Spirit Image">`;
-    }
     el.innerHTML = `
         <button id="spirit-overlay-close" style="
-            position:absolute; right:12px; top:12px; border:none; background:none;
-            color:#fff; font-size:1.5em; cursor:pointer; padding:0; line-height:1;
-        " title="Schließen">&times;</button>
-        ${img}
+            position:absolute; right:-16px; top:-16px;
+            width:56px; height:56px;
+            background:none; border:none; border-radius:50%;
+            color:#fff; font-size:2.5em; cursor:pointer;
+            line-height:1; display:flex; align-items:center; justify-content:center;
+            box-shadow: 0 0 16px #0008;
+            transition: background 0.18s;
+        " title="Schließen" tabindex="0"
+        onmouseover="this.style.background='rgba(255,255,255,0.10)'"
+        onmouseout="this.style.background='none'"
+        >&times;</button>
+        ${spirit['Image URL'] ? `<img src="${spirit['Image URL']}" alt="Spirit Image" style="display:block; margin:0 auto 18px auto; max-width:240px; max-height:180px; border-radius:9px; background:#222;">` : ''}
         <h2 style='padding:0; margin:0 0 8px 0; font-weight:700; letter-spacing:0.04em;'>${spirit.Name || 'Spirit'}</h2>
         <b>${spirit.Kategorie || ''}</b><br><br>
         <b>Mythos:</b> ${spirit["Mythos/Legende"] || ''}<br><br>
@@ -480,10 +495,24 @@ function showSpiritOverlay(spirit) {
     el.style.display = "block";
     lastOverlaySpiritData = spirit;
 
-    // Close-Button Event
-    el.querySelector("#spirit-overlay-close").onclick = () => {
-        el.style.display = "none";
+    // Close-Button Event (X + Fläche)
+    el.querySelector("#spirit-overlay-close").onclick = () => closeSpiritOverlay();
+
+    // Schließen beim Klick auf den Backdrop
+    backdrop.onclick = (e) => {
+        if (e.target === backdrop) closeSpiritOverlay();
     };
+    // Schließen bei Escape bleibt:
+    document.onkeydown = (e) => {
+        if (e.key === 'Escape') closeSpiritOverlay();
+    };
+}
+
+// Ausgelagerte Close-Logik (zentral, für mehrfaches Schließen)
+function closeSpiritOverlay() {
+    document.getElementById('spirit-info')?.remove();
+    document.getElementById('spirit-info-backdrop')?.remove();
+    document.onkeydown = null;
 }
 
 // Mouse-Picking (zentral)