gdhkmjdtgh

public/css/1v1.css

@@ -425,7 +425,7 @@ body {
     box-shadow 0.2s ease,
     opacity 0.2s ease;
   position: relative;
-  z-index: 0; /* eigener Stacking-Context: img z-index:2 schlaegt ::before sicher – kein isolation:isolate (GPU-Compositing-Bug mit overflow:hidden) */
+  z-index: 0; /* eigener Stacking-Context ohne GPU-Compositing-Bug */
   overflow: visible;
   box-shadow: 0 calc(var(--s) * 4) calc(var(--s) * 12) rgba(0, 0, 0, 0.4);
 }
@@ -433,7 +433,6 @@ body {
   content: "";
   position: absolute;
   inset: 0;
-  z-index: 0; /* explizit unter dem Karten-Image (z-index:2) */
   background: linear-gradient(
     160deg,
     rgba(255, 255, 255, 0.06) 0%,
@@ -726,12 +725,9 @@ body {
   border-color: rgba(255, 215, 80, 0.6);
 }
 
-/* Hand-Slot: Karte ist drin
-   - background transparent damit der dunkle Slot-Hintergrund nicht durchscheint
-   - overflow:hidden clippt das absolute img auf den border-radius
-   - ::before Gradient-Overlay ausblenden */
+/* Hand-Slot: Karte ist drin – background-image wird via JS gesetzt,
+   overflow:hidden clippt an border-radius */
 .hand-slot.hand-slot--filled {
-  background: transparent !important;
   overflow: hidden !important;
 }
 .hand-slot.hand-slot--filled::before {

views/1v1-battlefield.ejs

@@ -428,8 +428,11 @@
         if (!slot) return;
 
         if (!state) {
-          // Inline-Styles aus dem Karten-Render wieder entfernen
-          slot.style.background = "";
+          // Alle Inline-Styles aus dem Karten-Render zurücksetzen
+          slot.style.backgroundImage    = "";
+          slot.style.backgroundSize     = "";
+          slot.style.backgroundPosition = "";
+          slot.style.backgroundColor    = "";
           slot.style.overflow           = "";
           slot.innerHTML = '<span class="hs-icon">🃏</span>';
           slot.classList.remove("hand-slot-ready", "hand-slot--filled");
@@ -464,17 +467,22 @@
             ? `<div class="hand-slot-ready-badge">SPIELEN</div>`
             : "";
 
-        // Slot direkt stylen – umgeht Compositing-Probleme von backdrop-filter
-        slot.style.background = "transparent";
-        slot.style.overflow = "hidden";
+        // ── Karte als CSS background-image rendern ────────────────────────────
+        // Kein <img> mit position:absolute mehr → kein z-index/Compositing-Konflikt.
+        // CSS background-image liegt IMMER hinter Kindelementen, unabhängig vom Browser.
+        if (card.image) {
+          slot.style.backgroundImage  = `url('/images/cards/${card.image}')`;
+          slot.style.backgroundSize   = 'cover';
+          slot.style.backgroundPosition = 'center';
+        } else {
+          slot.style.backgroundImage = 'none';
+        }
+        // Solides Backing damit kein Hintergrund durchscheint
+        slot.style.backgroundColor = 'rgba(18,13,6,0.97)';
+        slot.style.overflow = 'hidden';
 
         slot.innerHTML = card.image
-          ? `<img src="/images/cards/${card.image}"
-                  onerror="this.src='/images/items/rueckseite.png'"
-                  title="${card.name}"
-                  draggable="false"
-                  style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;z-index:2;">
-             ${statsHtml}${readyBadge}`
+          ? `${statsHtml}${readyBadge}`
           : `<div style="display:flex;flex-direction:column;align-items:center;
                justify-content:center;height:100%;gap:4px;font-family:Cinzel,serif;">
                <span style="font-size:18px;">⚔️</span>