diff --git a/public/js/quickmenu/carddeck.js b/public/js/quickmenu/carddeck.js
index 6cad18f..1ce1949 100644
--- a/public/js/quickmenu/carddeck.js
+++ b/public/js/quickmenu/carddeck.js
@@ -419,17 +419,17 @@ function renderShell() {
 
       /* ── Rarity Kristalle ───────────────────── */
       .kd-rarity {
+        position: absolute;
+        bottom: 20px;
+        left: 0; right: 0;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-wrap: wrap;
         gap: 1px;
-        padding: 3px 4px;
-        background: rgba(0,0,0,0.82);
-        border-top: 1px solid #3a2810;
-        flex-shrink: 0;
-        min-height: 20px;
-        border-radius: 0;
+        padding: 0 4px;
+        pointer-events: none;
+        z-index: 4;
       }
 
       /* ── Empty / Loading States ──────────────── */
@@ -730,11 +730,11 @@ function renderCollectionGrid(grid, cards) {
              onerror="this.src='/images/avatar_placeholder.svg'">
         ${c.attack  != null ? `<span class="kd-stat-atk">${c.attack}</span>`  : ""}
         ${c.defense != null ? `<span class="kd-stat-def">${c.defense}</span>` : ""}
-        ${c.rarity ? `<div class="kd-rarity">${rarityImgs(c.rarity, 13)}</div>` : ""}
         <div class="kd-card-footer">
           <span class="kd-count-owned" title="Besitzt du">${c.amount}×</span>
           <span class="kd-count-deck"  title="Im Deck">🃏 ${inDeck}</span>
         </div>
+        ${c.rarity ? `<div class="kd-rarity">${rarityImgs(c.rarity, 13)}</div>` : ""}
       </div>`;
   }).join("");
 
@@ -768,6 +768,7 @@ function renderDeckGrid(grid, cards) {
       <div class="kd-deck-card-footer-counts">
         <span class="kd-deck-count-indeck" title="Im Deck">🃏 ${c.amount}</span>
       </div>
+      ${c.rarity ? `<div class="kd-rarity" style="bottom:42px;">${rarityImgs(c.rarity, 14)}</div>` : ""}
       ${c.rarity ? `<div class="kd-rarity">${rarityImgs(c.rarity, 14)}</div>` : ""}
     </div>`;
   }).join("");