diff --git a/public/css/1v1.css b/public/css/1v1.css
index 7e5f5d0..10d4178 100644
--- a/public/css/1v1.css
+++ b/public/css/1v1.css
@@ -480,29 +480,31 @@ body {
   position: fixed;
   inset: 0;
   z-index: 200;
-  background: rgba(0,0,0,0.85);
+  background: rgba(0, 0, 0, 0.85);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-family: "Cinzel", serif;
-  color: rgba(255,215,80,0.85);
+  color: rgba(255, 215, 80, 0.85);
   font-size: 18px;
   letter-spacing: 3px;
 }
 #connecting-overlay p {
   margin-top: 12px;
   font-size: 12px;
-  color: rgba(255,255,255,0.4);
+  color: rgba(255, 255, 255, 0.4);
   letter-spacing: 2px;
 }
 @keyframes spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 #connecting-overlay .spinner {
   width: 40px;
   height: 40px;
-  border: 3px solid rgba(255,215,80,0.2);
+  border: 3px solid rgba(255, 215, 80, 0.2);
   border-top-color: #ffd750;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
@@ -520,7 +522,9 @@ body {
   font-size: 13px;
   font-weight: 700;
   color: #ffd750;
-  text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.7);
+  text-shadow:
+    0 1px 6px rgba(0, 0, 0, 0.9),
+    0 0 12px rgba(0, 0, 0, 0.7);
   letter-spacing: 1px;
   pointer-events: none;
   z-index: 10;
@@ -606,7 +610,7 @@ body {
 
 .tt-track {
   fill: none;
-  stroke: rgba(255,255,255,0.1);
+  stroke: rgba(255, 255, 255, 0.1);
   stroke-width: 4;
 }
 
@@ -619,7 +623,9 @@ body {
   transform-origin: center;
   stroke-dasharray: 113.1; /* 2π×18 */
   stroke-dashoffset: 0;
-  transition: stroke-dashoffset 0.9s linear, stroke 0.3s ease;
+  transition:
+    stroke-dashoffset 0.9s linear,
+    stroke 0.3s ease;
 }
 
 #turn-timer-num {
@@ -628,13 +634,20 @@ body {
   font-size: calc(var(--s) * 13);
   font-weight: 700;
   color: #fff;
-  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
   line-height: 1;
 }
 
 @keyframes tt-pulse {
-  0%, 100% { opacity: 1;   transform: scale(1); }
-  50%       { opacity: 0.6; transform: scale(1.15); }
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.15);
+  }
 }
 
 /* ── Karten-Stats Overlay – exakt wie Slotmaschine ── */
@@ -684,8 +697,8 @@ body {
 .cs-cd {
   position: absolute;
   bottom: calc(var(--s) * 7);
-  right:  calc(var(--s) * 2);
-  width:  calc(var(--s) * 18);
+  right: calc(var(--s) * 2);
+  width: calc(var(--s) * 18);
   height: calc(var(--s) * 18);
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.75);
@@ -706,13 +719,32 @@ body {
   border-color: rgba(255, 215, 80, 0.6);
 }
 
+/* Hand-Slot: Karte ist drin → Hintergrund + Overlay entfernen */
+.hand-slot.hand-slot--filled {
+  background: transparent !important;
+  backdrop-filter: none !important;
+}
+.hand-slot.hand-slot--filled::before {
+  display: none !important;
+}
+/* Karten-Bild immer über dem ::before pseudo-element */
+.hand-slot img {
+  position: relative;
+  z-index: 1;
+  border-radius: calc(var(--s) * 9);
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
 /* Hand-Slot: Karte ist spielbereit (CD = 0) */
 .hand-slot.hand-slot-ready {
   border-color: rgba(80, 220, 80, 0.9) !important;
   border-style: solid !important;
   box-shadow:
     0 0 calc(var(--s) * 18) rgba(60, 200, 60, 0.5),
-    0 calc(var(--s) * 4) calc(var(--s) * 12) rgba(0,0,0,0.4);
+    0 calc(var(--s) * 4) calc(var(--s) * 12) rgba(0, 0, 0, 0.4);
 }
 
 /* CD-Badge wenn Karte spielbereit */
@@ -729,7 +761,11 @@ body {
   top: calc(var(--s) * 4);
   left: 50%;
   transform: translateX(-50%);
-  background: linear-gradient(135deg, rgba(20,120,20,0.92), rgba(10,80,10,0.92));
+  background: linear-gradient(
+    135deg,
+    rgba(20, 120, 20, 0.92),
+    rgba(10, 80, 10, 0.92)
+  );
   border: 1px solid #60d060;
   border-radius: calc(var(--s) * 4);
   color: #a0ffa0;
@@ -741,7 +777,7 @@ body {
   pointer-events: none;
   z-index: 6;
   white-space: nowrap;
-  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
 }
 
 /* Spielfeld-Sperre */
@@ -771,7 +807,7 @@ body {
   border: 1px solid rgba(255, 215, 80, 0.35);
   border-radius: 16px;
   padding: 32px 40px;
-  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8);
   min-width: 260px;
 }
 #ready-timer-label {
@@ -791,7 +827,7 @@ body {
 }
 .timer-track {
   fill: none;
-  stroke: rgba(255,255,255,0.1);
+  stroke: rgba(255, 255, 255, 0.1);
   stroke-width: 6;
 }
 .timer-fill {
@@ -801,7 +837,9 @@ body {
   stroke-linecap: round;
   transform: rotate(-90deg);
   transform-origin: center;
-  transition: stroke-dashoffset 0.9s linear, stroke 0.3s ease;
+  transition:
+    stroke-dashoffset 0.9s linear,
+    stroke 0.3s ease;
 }
 #ready-timer-number {
   position: absolute;
@@ -809,12 +847,12 @@ body {
   font-size: 26px;
   font-weight: 700;
   color: #fff;
-  text-shadow: 0 0 10px rgba(0,0,0,0.8);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
 }
 #ready-timer-sub {
   font-family: "Cinzel", serif;
   font-size: 11px;
-  color: rgba(255,255,255,0.4);
+  color: rgba(255, 255, 255, 0.4);
   letter-spacing: 1px;
   text-align: center;
 }
@@ -825,7 +863,7 @@ body {
 .ready-pip {
   font-family: "Cinzel", serif;
   font-size: 12px;
-  color: rgba(255,255,255,0.5);
+  color: rgba(255, 255, 255, 0.5);
   letter-spacing: 1px;
   transition: color 0.3s;
 }
@@ -835,8 +873,8 @@ body {
 ═══════════════════════════════════════════════════════════ */
 
 /* Linke Zone (Slots 1–3): Gold/Amber für Spieler 1 */
-.board.my-side-left .card-row .card-slot:nth-child(-n+3),
-.board.my-side-right .card-row .card-slot:nth-last-child(-n+3) {
+.board.my-side-left .card-row .card-slot:nth-child(-n + 3),
+.board.my-side-right .card-row .card-slot:nth-last-child(-n + 3) {
   border-color: rgba(200, 150, 42, 0.75);
   background: rgba(180, 120, 20, 0.18);
   box-shadow:
@@ -846,8 +884,8 @@ body {
 }
 
 /* Hover auf eigener Zone: stärker leuchten */
-.board.my-side-left .card-row .card-slot:nth-child(-n+3):hover,
-.board.my-side-right .card-row .card-slot:nth-last-child(-n+3):hover {
+.board.my-side-left .card-row .card-slot:nth-child(-n + 3):hover,
+.board.my-side-right .card-row .card-slot:nth-last-child(-n + 3):hover {
   border-color: rgba(240, 190, 60, 1);
   background: rgba(200, 140, 30, 0.28);
   box-shadow:
@@ -857,8 +895,8 @@ body {
 }
 
 /* Zonen-Label oben im Slot (kleine Markierung) */
-.board.my-side-left .card-row .card-slot:nth-child(-n+3)::after,
-.board.my-side-right .card-row .card-slot:nth-last-child(-n+3)::after {
+.board.my-side-left .card-row .card-slot:nth-child(-n + 3)::after,
+.board.my-side-right .card-row .card-slot:nth-last-child(-n + 3)::after {
   content: "⚔";
   position: absolute;
   top: calc(var(--s) * 5);
@@ -868,16 +906,16 @@ body {
 }
 
 /* Gegner-Zone: dezentes Blau/Lila – nicht bespielbar */
-.board.my-side-left .card-row .card-slot:nth-last-child(-n+3),
-.board.my-side-right .card-row .card-slot:nth-child(-n+3) {
+.board.my-side-left .card-row .card-slot:nth-last-child(-n + 3),
+.board.my-side-right .card-row .card-slot:nth-child(-n + 3) {
   border-color: rgba(80, 130, 200, 0.45);
-  background: rgba(40, 80, 160, 0.10);
+  background: rgba(40, 80, 160, 0.1);
   cursor: not-allowed;
   opacity: 0.75;
 }
 
-.board.my-side-left .card-row .card-slot:nth-last-child(-n+3)::after,
-.board.my-side-right .card-row .card-slot:nth-child(-n+3)::after {
+.board.my-side-left .card-row .card-slot:nth-last-child(-n + 3)::after,
+.board.my-side-right .card-row .card-slot:nth-child(-n + 3)::after {
   content: "🛡";
   position: absolute;
   top: calc(var(--s) * 5);
@@ -916,8 +954,13 @@ body {
 }
 
 @keyframes pulse-zone {
-  0%, 100% { box-shadow: 0 0 8px rgba(240, 190, 60, 0.25); }
-  50%       { box-shadow: 0 0 22px rgba(240, 190, 60, 0.55); }
+  0%,
+  100% {
+    box-shadow: 0 0 8px rgba(240, 190, 60, 0.25);
+  }
+  50% {
+    box-shadow: 0 0 22px rgba(240, 190, 60, 0.55);
+  }
 }
 
 /* Hand-Slot nicht draggable (kein Cursor-Feedback) */