diff --git a/public/css/events.css b/public/css/events.css
index 02c2972..87ebc48 100644
--- a/public/css/events.css
+++ b/public/css/events.css
@@ -341,7 +341,7 @@
 /* Kristalle – mittig unten */
 .bs-rarity {
   position: absolute;
-  top: 72%;
+  top: 62%;
   left: 0;
   right: 0;
   display: flex;
@@ -353,6 +353,41 @@
   pointer-events: none;
 }
 
+/* Reichweite & Laufen Badges */
+.bs-range-race {
+  position: absolute;
+  top: 74%;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  gap: 3px;
+  pointer-events: none;
+  z-index: 6;
+}
+.bs-badge-range,
+.bs-badge-race {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 1px 4px;
+  border-radius: 20px;
+  font-family: "Cinzel", serif;
+  font-size: 8px;
+  font-weight: bold;
+  line-height: 1;
+}
+.bs-badge-range {
+  background: rgba(30, 20, 0, 0.85);
+  border: 1px solid #e8b84b;
+  color: #e8b84b;
+}
+.bs-badge-race {
+  background: rgba(0, 25, 0, 0.85);
+  border: 1px solid #7de87d;
+  color: #7de87d;
+}
+
 /* Kartenname – ganz unten */
 .bs-card-name {
   position: absolute;
diff --git a/public/js/quickmenu/events.js b/public/js/quickmenu/events.js
index 69239a1..073356c 100644
--- a/public/js/quickmenu/events.js
+++ b/public/js/quickmenu/events.js
@@ -1,6 +1,12 @@
 /* ================================
    Kristall-Mapping (aus carddeck.js)
 ================================ */
+/* ================================
+   Stat-Icons SVG
+================================ */
+const BS_SVG_RANGE = `<svg viewBox="0 0 16 16" width="10" height="10" style="display:inline;vertical-align:middle;flex-shrink:0" fill="none" stroke="#e8b84b" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2 Q1 8 4 14"/><line x1="4" y1="2" x2="4" y2="14" stroke-width="0.7" stroke-dasharray="2,1.5"/><line x1="4" y1="8" x2="13" y2="8"/><polyline points="11,6 13,8 11,10"/><line x1="5" y1="7" x2="4" y2="8"/><line x1="5" y1="9" x2="4" y2="8"/></svg>`;
+const BS_SVG_RACE  = `<svg viewBox="0 0 16 16" width="10" height="10" style="display:inline;vertical-align:middle;flex-shrink:0" fill="none" stroke="#7de87d" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="2.5" r="1.4" fill="#7de87d" stroke="none"/><line x1="9" y1="4" x2="8" y2="9"/><line x1="8" y1="9" x2="10" y2="14"/><line x1="8" y1="9" x2="6" y2="13"/><line x1="8.5" y1="5.5" x2="11" y2="8"/><line x1="8.5" y1="5.5" x2="6" y2="7"/></svg>`;
+
 const RARITY_CRYSTALS = {
   1: "roter-cristal.png",
   2: "blauer-cristal.png",
@@ -35,6 +41,11 @@ function cardHTML(card, isFront = true) {
     ${card?.defends != null ? `<span class="bs-stat-def">${card.defends}</span>` : ""}
     ${card?.cooldown != null ? `<span class="bs-stat-cd">${card.cooldown}</span>` : ""}
     ${card?.rarity ? `<div class="bs-rarity">${rarityImgs(card.rarity, 11)}</div>` : ""}
+    ${(card?.range != null || card?.race != null) ? `
+    <div class="bs-range-race">
+      ${card?.range != null ? `<span class="bs-badge-range">${BS_SVG_RANGE}&thinsp;${card.range}</span>` : ""}
+      ${card?.race  != null ? `<span class="bs-badge-race">${BS_SVG_RACE}&thinsp;${card.race}</span>`   : ""}
+    </div>` : ""}
     <div class="bs-card-name">${card?.name || ""}</div>
   `;
 }