diff --git a/public/css/1v1.css b/public/css/1v1.css
index c541097..ddda4f4 100644
--- a/public/css/1v1.css
+++ b/public/css/1v1.css
@@ -408,8 +408,8 @@ body {
   justify-content: center;
 }
 .hand-slot {
-  width: calc(var(--s) * 95);
-  height: calc(var(--s) * 155);
+  width: calc(var(--s) * 105);
+  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);
@@ -590,61 +590,61 @@ body {
   box-shadow: 0 0 calc(var(--s) * 16) rgba(255, 255, 255, 0.2);
 }
 
-/* ── Karten-Stats Overlay – Slotmaschinen-Style (Eck-Badges) ── */
+/* ── Karten-Stats Overlay – exakt wie Slotmaschine ── */
 .card-stat-overlay {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 5;
+  border-radius: calc(var(--s) * 7);
 }
 
-/* Basis-Badge: runder Kreis */
+/* Gemeinsamer Badge-Stil: runder Kreis */
 .cs-badge {
   position: absolute;
-  width:  calc(var(--s) * 22);
-  height: calc(var(--s) * 22);
+  width:  calc(var(--s) * 24);
+  height: calc(var(--s) * 24);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: "Cinzel", serif;
-  font-size: calc(var(--s) * 11);
+  font-size: calc(var(--s) * 12);
   font-weight: 700;
   line-height: 1;
-  box-shadow: 0 calc(var(--s) * 2) calc(var(--s) * 6) rgba(0,0,0,0.8);
+  box-shadow:
+    0 calc(var(--s) * 2) calc(var(--s) * 6) rgba(0,0,0,0.85),
+    inset 0 1px 0 rgba(255,255,255,0.2);
+  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
+  color: #fff;
 }
 
-/* ⚔ Angriff – blauer Kreis oben-links */
+/* ⚔ Angriff – blau, oben-links (wie Slotmaschine) */
 .cs-atk {
-  top:  calc(var(--s) * 6);
-  left: calc(var(--s) * 6);
-  background: radial-gradient(circle at 40% 35%, #4a90d9, #1a4a8a);
-  border: calc(var(--s) * 2) solid rgba(120, 180, 255, 0.8);
-  color: #fff;
+  top:  calc(var(--s) * 7);
+  left: calc(var(--s) * 7);
+  background: radial-gradient(circle at 38% 32%, #5ba8e8, #1a4f9a);
+  border: calc(var(--s) * 2) solid rgba(140, 200, 255, 0.85);
 }
 
-/* 🛡 Verteidigung – roter Kreis oben-rechts */
+/* 🛡 Verteidigung – rot, oben-rechts (wie Slotmaschine) */
 .cs-def {
-  top:   calc(var(--s) * 6);
-  right: calc(var(--s) * 6);
-  background: radial-gradient(circle at 40% 35%, #d94a4a, #8a1a1a);
-  border: calc(var(--s) * 2) solid rgba(255, 120, 120, 0.8);
-  color: #fff;
+  top:   calc(var(--s) * 7);
+  right: calc(var(--s) * 7);
+  background: radial-gradient(circle at 38% 32%, #e85b5b, #9a1a1a);
+  border: calc(var(--s) * 2) solid rgba(255, 140, 140, 0.85);
 }
 
-/* ⏱ Cooldown – gold Badge unten-rechts */
+/* ⏱ Cooldown – gold, unten-rechts (wie Slotmaschine) */
 .cs-cd {
-  bottom: calc(var(--s) * 6);
-  right:  calc(var(--s) * 6);
-  background: radial-gradient(circle at 40% 35%, #c8960c, #6b4b00);
-  border: calc(var(--s) * 2) solid rgba(255, 210, 60, 0.8);
-  color: #fff;
-  width:  calc(var(--s) * 20);
-  height: calc(var(--s) * 20);
-  font-size: calc(var(--s) * 10);
+  bottom: calc(var(--s) * 7);
+  right:  calc(var(--s) * 7);
+  background: radial-gradient(circle at 38% 32%, #d4a020, #7a5200);
+  border: calc(var(--s) * 2) solid rgba(255, 210, 80, 0.85);
+  font-size: calc(var(--s) * 11);
 }
 
-/* Belegte Feldslots: Rand golden statt gestrichelt */
+/* Belegte Feldslots */
 .card-slot.slot-occupied {
   border-style: solid;
   border-color: rgba(255, 215, 80, 0.6);
diff --git a/views/1v1-battlefield.ejs b/views/1v1-battlefield.ejs
index b7e9a60..efdc39d 100644
--- a/views/1v1-battlefield.ejs
+++ b/views/1v1-battlefield.ejs
@@ -271,23 +271,28 @@
             const slot = document.getElementById(id);
             if (!slot || !card) return;
 
-            const hasAtk = card.attack   != null;
-            const hasDef = card.defense  != null;
-            const hasCd  = card.cd       != null;
+            // Feldnamen aus der API (attack, defends, cooldown)
+            const atkVal = card.attack   ?? null;
+            const defVal = card.defends  ?? null;
+            const cdVal  = card.cooldown ?? null;
+
+            const hasAtk = atkVal != null;
+            const hasDef = defVal != null;
+            const hasCd  = cdVal  != null;
             const showStats = hasAtk || hasDef || hasCd;
 
             const statsHtml = showStats ? `
               <div class="card-stat-overlay">
-                ${hasAtk ? `<span class="cs-badge cs-atk">${card.attack}</span>`  : ""}
-                ${hasDef ? `<span class="cs-badge cs-def">${card.defense}</span>` : ""}
-                ${hasCd  ? `<span class="cs-badge cs-cd">${card.cd}</span>`       : ""}
+                ${hasAtk ? `<span class="cs-badge cs-atk">${atkVal}</span>` : ""}
+                ${hasDef ? `<span class="cs-badge cs-def">${defVal}</span>` : ""}
+                ${hasCd  ? `<span class="cs-badge cs-cd">${cdVal}</span>`   : ""}
               </div>` : "";
 
             slot.innerHTML = card.image
               ? `<img src="/images/cards/${card.image}"
                    onerror="this.src='/images/items/rueckseite.png'"
                    title="${card.name}"
-                   style="width:100%;height:100%;object-fit:contain;border-radius:7px;display:block;">
+                   style="width:100%;height:100%;object-fit:cover;border-radius:7px;display:block;">
                  ${statsHtml}`
               : `<div style="display:flex;flex-direction:column;align-items:center;
                    justify-content:center;height:100%;gap:4px;font-family:Cinzel,serif;">
@@ -296,6 +301,7 @@
                  </div>
                  ${statsHtml}`;
           });
+          });
         } catch(e) {
           console.error("[Battlefield] Deck laden:", e);
         }
@@ -304,14 +310,18 @@
       /* ── Hilfsfunktion: Karte mit Stats in einen Slot rendern ── */
       function renderCardInSlot(slot, card) {
         if (!slot || !card) return;
-        const hasAtk = card.attack  != null;
-        const hasDef = card.defense != null;
-        const hasCd  = card.cd      != null;
+        const atkVal = card.attack   ?? null;
+        const defVal = card.defends  ?? null;
+        const cdVal  = card.cooldown ?? null;
+
+        const hasAtk = atkVal != null;
+        const hasDef = defVal != null;
+        const hasCd  = cdVal  != null;
         const statsHtml = (hasAtk || hasDef || hasCd) ? `
           <div class="card-stat-overlay">
-            ${hasAtk ? `<span class="cs-badge cs-atk">${card.attack}</span>`  : ""}
-            ${hasDef ? `<span class="cs-badge cs-def">${card.defense}</span>` : ""}
-            ${hasCd  ? `<span class="cs-badge cs-cd">${card.cd}</span>`       : ""}
+            ${hasAtk ? `<span class="cs-badge cs-atk">${atkVal}</span>` : ""}
+            ${hasDef ? `<span class="cs-badge cs-def">${defVal}</span>` : ""}
+            ${hasCd  ? `<span class="cs-badge cs-cd">${cdVal}</span>`   : ""}
           </div>` : "";
 
         slot.classList.add("slot-occupied");
@@ -319,7 +329,7 @@
           ? `<img src="/images/cards/${card.image}"
                onerror="this.src='/images/items/rueckseite.png'"
                title="${card.name}"
-               style="width:100%;height:100%;object-fit:contain;border-radius:7px;display:block;">
+               style="width:100%;height:100%;object-fit:cover;border-radius:7px;display:block;">
              ${statsHtml}`
           : `<div style="display:flex;flex-direction:column;align-items:center;
                justify-content:center;height:100%;gap:4px;font-family:Cinzel,serif;padding:4px;">