diff --git a/public/js/quickmenu/carddeck.js b/public/js/quickmenu/carddeck.js
index 7d2baa8..af396be 100644
--- a/public/js/quickmenu/carddeck.js
+++ b/public/js/quickmenu/carddeck.js
@@ -1,22 +1,21 @@
 const CARDS_PER_PAGE = 18;
 
-let currentGroupId  = null;
-let currentPage     = 1;
-let currentDeckId   = null;
-let deckCards       = [];   // [{card_id, amount}]
-let userCardsCache  = [];   // aktuelle Seite: [{card_id, amount, name, image, rarity, attack, defense}]
-let decks           = [];   // [{id, name}]
-
+let currentGroupId = null;
+let currentPage = 1;
+let currentDeckId = null;
+let deckCards = []; // [{card_id, amount}]
+let userCardsCache = []; // aktuelle Seite: [{card_id, amount, name, image, rarity, attack, defense}]
+let decks = []; // [{id, name}]
 
 /* ── Kristall-Mapping ───────────────────────── */
 const RARITY_CRYSTALS = {
-  "1": "roter-cristal.png",
-  "2": "blauer-cristal.png",
-  "3": "gelber-cristal.png",
-  "4": "gruener-cristal.png",
-  "5": "oranger-cristal.png",
-  "6": "violet-cristal.png",
-  "7": "pinker-cristal.png",
+  1: "roter-cristal.png",
+  2: "blauer-cristal.png",
+  3: "gelber-cristal.png",
+  4: "gruener-cristal.png",
+  5: "oranger-cristal.png",
+  6: "violet-cristal.png",
+  7: "pinker-cristal.png",
 };
 
 function rarityImgs(rarity, size = 14) {
@@ -250,8 +249,8 @@ function renderShell() {
       }
       .kd-stat-atk {
         position: absolute;
-        right: 4px;
-        top: 50%;
+        right: 12px;
+        top: 36%;
         transform: translateY(-50%);
         background: rgba(180,40,20,0.88);
         border: 1px solid #ff6040;
@@ -261,8 +260,8 @@ function renderShell() {
       }
       .kd-stat-def {
         position: absolute;
-        left: 4px;
-        top: 50%;
+        left: 12px;
+        top: 36%;
         transform: translateY(-50%);
         background: rgba(20,80,180,0.88);
         border: 1px solid #4090ff;
@@ -272,8 +271,8 @@ function renderShell() {
       }
       .kd-stat-cd {
         position: absolute;
-        bottom: 3px;
-        right: 3px;
+        bottom: 16px;
+        right: 11px;
         width: 22px; height: 22px;
         border-radius: 50%;
         background: rgba(0,0,0,0.75);
@@ -516,16 +515,18 @@ function renderTabs(groups) {
   const container = document.getElementById("kd-tabs");
   if (!container) return;
 
-  container.innerHTML = groups.map((g, i) => {
-    const color = g.color || "#6b4b2a";
-    return `
+  container.innerHTML = groups
+    .map((g, i) => {
+      const color = g.color || "#6b4b2a";
+      return `
       <button class="kd-tab ${i === 0 ? "kd-tab-active" : ""}"
               data-group="${g.id}"
               style="border-color:${color};${i === 0 ? `background:${color}33;` : ""}">
         <span class="kd-tab-dot" style="background:${color};"></span>
         <span>${g.name}</span>
       </button>`;
-  }).join("");
+    })
+    .join("");
 
   container.querySelectorAll(".kd-tab").forEach((btn) => {
     btn.addEventListener("click", async () => {
@@ -550,7 +551,7 @@ function renderTabs(groups) {
        totalPages, total }
 ══════════════════════════════════════════════ */
 async function loadUserCards() {
-  const grid       = document.getElementById("kd-grid");
+  const grid = document.getElementById("kd-grid");
   const pagination = document.getElementById("kd-pagination");
   if (!grid) return;
 
@@ -558,7 +559,9 @@ async function loadUserCards() {
   pagination.innerHTML = "";
 
   try {
-    const res = await fetch(`/api/user-cards?group_id=${currentGroupId}&page=${currentPage}&limit=${CARDS_PER_PAGE}`);
+    const res = await fetch(
+      `/api/user-cards?group_id=${currentGroupId}&page=${currentPage}&limit=${CARDS_PER_PAGE}`,
+    );
     if (!res.ok) throw new Error("API Fehler");
     const data = await res.json();
     userCardsCache = data.cards || [];
@@ -588,8 +591,14 @@ async function loadDecks() {
 function renderDeckSelect() {
   const sel = document.getElementById("kd-deck-select");
   if (!sel) return;
-  sel.innerHTML = `<option value="">— Deck wählen —</option>` +
-    decks.map(d => `<option value="${d.id}" ${d.id === currentDeckId ? "selected" : ""}>${d.name}</option>`).join("");
+  sel.innerHTML =
+    `<option value="">— Deck wählen —</option>` +
+    decks
+      .map(
+        (d) =>
+          `<option value="${d.id}" ${d.id === currentDeckId ? "selected" : ""}>${d.name}</option>`,
+      )
+      .join("");
 }
 
 /* ══════════════════════════════════════════════
@@ -643,7 +652,7 @@ async function addCardToDeck(card) {
 
   // Rarity > 5: max. 1 Exemplar im Deck
   if (parseInt(card.rarity) > 5) {
-    const already = deckCards.find(c => c.card_id === card.card_id);
+    const already = deckCards.find((c) => c.card_id === card.card_id);
     if (already) {
       showToast("Karten ab Rarity 6 dürfen nur 1x im Deck sein.");
       return;
@@ -740,17 +749,18 @@ function renderCollectionGrid(grid, cards) {
 
   const totalInDeck = deckCards.reduce((s, c) => s + c.amount, 0);
 
-  grid.innerHTML = cards.map(c => {
-    const inDeck  = getDeckCount(c.card_id);
-    const maxed   = isMaxedOut(c, inDeck, totalInDeck);
-    return `
+  grid.innerHTML = cards
+    .map((c) => {
+      const inDeck = getDeckCount(c.card_id);
+      const maxed = isMaxedOut(c, inDeck, totalInDeck);
+      return `
       <div class="kd-card ${maxed ? "kd-card-maxed" : ""}"
            data-card-id="${c.card_id}"
            title="${c.name}">
         <img src="/images/cards/${c.image}" alt="${c.name}"
              onerror="this.src='/images/avatar_placeholder.svg'">
-        ${c.attack   != null ? `<span class="kd-stat-atk">${c.attack}</span>`   : ""}
-        ${c.defends  != null ? `<span class="kd-stat-def">${c.defends}</span>`  : ""}
+        ${c.attack != null ? `<span class="kd-stat-atk">${c.attack}</span>` : ""}
+        ${c.defends != null ? `<span class="kd-stat-def">${c.defends}</span>` : ""}
         ${c.cooldown != null ? `<span class="kd-stat-cd">${c.cooldown}</span>` : ""}
         <div class="kd-card-footer">
           <span class="kd-count-owned" title="Besitzt du">${c.amount}×</span>
@@ -758,11 +768,12 @@ function renderCollectionGrid(grid, cards) {
         </div>
         ${c.rarity ? `<div class="kd-rarity">${rarityImgs(c.rarity, 13)}</div>` : ""}
       </div>`;
-  }).join("");
+    })
+    .join("");
 
-  grid.querySelectorAll(".kd-card:not(.kd-card-maxed)").forEach(el => {
+  grid.querySelectorAll(".kd-card:not(.kd-card-maxed)").forEach((el) => {
     el.addEventListener("click", async () => {
-      const card = cards.find(c => c.card_id === parseInt(el.dataset.cardId));
+      const card = cards.find((c) => c.card_id === parseInt(el.dataset.cardId));
       if (card) await addCardToDeck(card);
     });
   });
@@ -777,10 +788,11 @@ function renderDeckGrid(grid, cards) {
     return;
   }
   // Owned-Anzahl aus userCardsCache auslesen
-  grid.innerHTML = cards.map(c => {
-    const ownedEntry = userCardsCache.find(u => u.card_id === c.card_id);
-    const ownedAmt = ownedEntry ? ownedEntry.amount : "?";
-    return `
+  grid.innerHTML = cards
+    .map((c) => {
+      const ownedEntry = userCardsCache.find((u) => u.card_id === c.card_id);
+      const ownedAmt = ownedEntry ? ownedEntry.amount : "?";
+      return `
     <div class="kd-deck-card" data-card-id="${c.card_id}" title="Klicken zum Entfernen: ${c.name}">
       <img src="/images/cards/${c.image}" alt="${c.name}"
            onerror="this.src='/images/avatar_placeholder.svg'">
@@ -789,11 +801,12 @@ function renderDeckGrid(grid, cards) {
       </div>
       ${c.rarity ? `<div class="kd-rarity" style="top:75%">${rarityImgs(c.rarity, 14)}</div>` : ""}
     </div>`;
-  }).join("");
+    })
+    .join("");
 
-  grid.querySelectorAll(".kd-deck-card").forEach(el => {
+  grid.querySelectorAll(".kd-deck-card").forEach((el) => {
     el.addEventListener("click", async () => {
-      const card = cards.find(c => c.card_id === parseInt(el.dataset.cardId));
+      const card = cards.find((c) => c.card_id === parseInt(el.dataset.cardId));
       if (card) await removeCardFromDeck(card);
     });
   });
@@ -806,19 +819,29 @@ function renderPagination(pagination, totalPages, total) {
   if (!totalPages || totalPages <= 1) return;
   pagination.innerHTML = `
     <button class="kd-page-btn" id="kd-prev" ${currentPage === 1 ? "disabled" : ""}>◀</button>
-    ${Array.from({ length: totalPages }, (_, i) => i + 1).map(p => `
+    ${Array.from({ length: totalPages }, (_, i) => i + 1)
+      .map(
+        (p) => `
       <button class="kd-page-btn ${p === currentPage ? "kd-page-active" : ""}" data-page="${p}">${p}</button>
-    `).join("")}
+    `,
+      )
+      .join("")}
     <button class="kd-page-btn" id="kd-next" ${currentPage === totalPages ? "disabled" : ""}>▶</button>
     <span class="kd-page-info">${total} Karten</span>`;
 
   pagination.querySelector("#kd-prev")?.addEventListener("click", async () => {
-    if (currentPage > 1) { currentPage--; await loadUserCards(); }
+    if (currentPage > 1) {
+      currentPage--;
+      await loadUserCards();
+    }
   });
   pagination.querySelector("#kd-next")?.addEventListener("click", async () => {
-    if (currentPage < totalPages) { currentPage++; await loadUserCards(); }
+    if (currentPage < totalPages) {
+      currentPage++;
+      await loadUserCards();
+    }
   });
-  pagination.querySelectorAll("[data-page]").forEach(btn => {
+  pagination.querySelectorAll("[data-page]").forEach((btn) => {
     btn.addEventListener("click", async () => {
       currentPage = parseInt(btn.dataset.page);
       await loadUserCards();
@@ -882,7 +905,10 @@ function showNewDeckModal() {
   modal.querySelector("#kd-modal-cancel").onclick = () => modal.remove();
   modal.querySelector("#kd-modal-confirm").onclick = async () => {
     const name = input.value.trim();
-    if (!name) { input.focus(); return; }
+    if (!name) {
+      input.focus();
+      return;
+    }
     modal.remove();
     await createDeck(name);
   };
@@ -901,14 +927,14 @@ function showNewDeckModal() {
    HELPERS
 ══════════════════════════════════════════════ */
 function getDeckCount(cardId) {
-  const entry = deckCards.find(c => c.card_id === cardId);
+  const entry = deckCards.find((c) => c.card_id === cardId);
   return entry ? entry.amount : 0;
 }
 
 function isMaxedOut(card, inDeck, totalInDeck) {
   if (!currentDeckId) return false;
   if (totalInDeck >= 30) return true;
-  if (inDeck >= card.amount) return true;              // mehr als besessen
+  if (inDeck >= card.amount) return true; // mehr als besessen
   if (parseInt(card.rarity) > 5 && inDeck >= 1) return true; // Rarity > 5: nur 1x
   return false;
 }