From 408f935402a832da89ca5806d1060387402a391f Mon Sep 17 00:00:00 2001
From: cay <cay@joksch.ch>
Date: Mon, 13 Apr 2026 09:54:16 +0100
Subject: [PATCH] dtzjkdt

---
 public/css/1v1.css        | 40 +++++++++------------------------------
 views/1v1-battlefield.ejs | 33 +++++++++-----------------------
 2 files changed, 18 insertions(+), 55 deletions(-)

diff --git a/public/css/1v1.css b/public/css/1v1.css
index b86f6ea..ce9209d 100644
--- a/public/css/1v1.css
+++ b/public/css/1v1.css
@@ -412,37 +412,15 @@ body {
   height: calc(var(--s) * 160);
   border-radius: calc(var(--s) * 9);
   border: 2px dashed rgba(255, 215, 80, 0.35);
-  background: rgba(0, 0, 0, 0.4);
-  /* backdrop-filter BEWUSST ENTFERNT – erzeugt GPU-Compositing-Ebene
-     die position:absolute-Kinder verschluckt (Browser-Bug) */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition:
-    border-color 0.2s ease,
-    transform 0.2s ease,
-    box-shadow 0.2s ease,
-    opacity 0.2s ease;
   position: relative;
-  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);
-}
-.hand-slot::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    160deg,
-    rgba(255, 255, 255, 0.06) 0%,
-    transparent 50%
-  );
+  overflow: hidden;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: border-color 0.2s ease, transform 0.2s ease;
 }
 .hand-slot:hover {
   border-color: rgba(255, 215, 80, 0.9);
-  transform: translateY(calc(var(--s) * -10));
-  box-shadow: 0 calc(var(--s) * 16) calc(var(--s) * 28) rgba(255, 215, 80, 0.2);
+  transform: translateY(calc(var(--s) * -6));
 }
 .hand-slot .hs-icon {
   font-size: calc(var(--s) * 22);
@@ -725,13 +703,13 @@ body {
   border-color: rgba(255, 215, 80, 0.6);
 }
 
-/* Hand-Slot: Karte ist drin – background-image wird via JS gesetzt,
-   overflow:hidden clippt an border-radius */
+/* Hand-Slot: Karte ist drin */
 .hand-slot.hand-slot--filled {
-  overflow: hidden !important;
+  border-style: solid;
+  border-color: rgba(255, 215, 80, 0.5);
 }
 .hand-slot.hand-slot--filled::before {
-  display: none !important;
+  display: none;
 }
 
 /* Hand-Slot: Karte ist spielbereit (CD = 0) */
diff --git a/views/1v1-battlefield.ejs b/views/1v1-battlefield.ejs
index 0421a66..4bde676 100644
--- a/views/1v1-battlefield.ejs
+++ b/views/1v1-battlefield.ejs
@@ -428,13 +428,7 @@
         if (!slot) return;
 
         if (!state) {
-          // 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.innerHTML = '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;"><span class="hs-icon">🃏</span></div>';
           slot.classList.remove("hand-slot-ready", "hand-slot--filled");
           slot.draggable = false;
           delete slot.dataset.cardSlotId;
@@ -467,24 +461,15 @@
             ? `<div class="hand-slot-ready-badge">SPIELEN</div>`
             : "";
 
-        // ── 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';
-
+        // Bild als normales Block-Element – kein position:absolute, kein z-index-Konflikt
         slot.innerHTML = card.image
-          ? `${statsHtml}${readyBadge}`
-          : `<div style="display:flex;flex-direction:column;align-items:center;
-               justify-content:center;height:100%;gap:4px;font-family:Cinzel,serif;">
+          ? `<img src="/images/cards/${card.image}"
+                  onerror="this.src='/images/items/rueckseite.png'"
+                  title="${card.name}"
+                  draggable="false"
+                  style="width:100%;height:100%;display:block;object-fit:cover;">
+             ${statsHtml}${readyBadge}`
+          : `<div style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:Cinzel,serif;">
                <span style="font-size:18px;">⚔️</span>
                <span style="font-size:9px;color:#f0d9a6;text-align:center;">${card.name}</span>
              </div>${statsHtml}${readyBadge}`;