AI 2

public/css/building.css

@@ -543,38 +543,6 @@ body {
   }
 }
 
-/* =========================
-   Schwarzmarkt
-========================= */
-
-.market-page {
-  padding: 8px 12px;
-
-  border: 1px solid #8b6a3c;
-
-  background: rgba(0, 0, 0, 0.15);
-}
-
-.market-page.owned {
-  color: #3cff3c;
-}
-
-.market-page.buy {
-  cursor: pointer;
-
-  background: #6b4b2a;
-
-  color: white;
-}
-
-.market-page.buy:hover {
-  background: #8b6a3c;
-}
-
-.market-page.locked {
-  opacity: 0.4;
-}
-
 /* =========================
    Schwarzmarkt Tabs
 ========================= */
@@ -582,32 +550,43 @@ body {
 .market-tabs {
   display: flex;
   gap: 6px;
-  margin-bottom: 10px;
+  margin-bottom: 16px;
+  border-bottom: 2px solid #8b6a3c;
+  padding-bottom: 8px;
 }
 
 .market-tab {
-  padding: 8px 14px;
+  padding: 8px 20px;
 
-  background: #5c3b20;
+  background: linear-gradient(#5c3b20, #3a2513);
   color: #e7d9b4;
 
   border: 1px solid #8b6a3c;
+  border-radius: 4px;
 
   cursor: pointer;
-
   font-family: "Cinzel", serif;
+  font-size: 13px;
+  font-weight: bold;
+
+  letter-spacing: 0.5px;
+  transition: 0.2s;
 }
 
 .market-tab:hover {
-  background: #8b6a3c;
+  background: linear-gradient(#8b6a3c, #5c3b20);
+  box-shadow: 0 0 8px rgba(200, 160, 80, 0.4);
 }
 
 .market-tab.active {
-  background: #d4b97a;
+  background: linear-gradient(#d4b97a, #9c7a3a);
   color: #2b1b0f;
+  border-color: #f0d9a6;
 }
 
-/* Tab Inhalte */
+/* =========================
+   Schwarzmarkt Tab Inhalte
+========================= */
 
 .market-tab-content {
   display: none;
@@ -617,21 +596,147 @@ body {
   display: block;
 }
 
+/* =========================
+   Schwarzmarkt Seiten Grid
+========================= */
+
 #market-pages {
   display: grid;
-
+  grid-template-columns: repeat(4, 1fr);
-  grid-template-columns: repeat(4, 120px);
+  gap: 16px;
-
+  padding: 10px 4px;
-  gap: 14px;
-
-  justify-content: center;
-
-  margin-top: 15px;
-
-  /* Ehemals doppelt definiert – zusammengeführt */
 }
 
+/* =========================
+   Schwarzmarkt Slot Karten
+========================= */
+
+.market-slot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 14px 10px;
+  gap: 8px;
+
+  border-radius: 8px;
+  border: 2px solid #8b6a3c;
+
+  background: linear-gradient(
+    160deg,
+    rgba(80, 50, 20, 0.6),
+    rgba(40, 25, 10, 0.8)
+  );
+
+  box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 220, 100, 0.1);
+
+  transition: 0.2s;
+  min-height: 150px;
+  position: relative;
+}
+
+/* Besessen */
+
+.market-slot.owned {
+  border-color: #3caa3c;
+  background: linear-gradient(
+    160deg,
+    rgba(20, 60, 20, 0.6),
+    rgba(10, 35, 10, 0.8)
+  );
+}
+
+.market-slot.owned .bag-status {
+  font-size: 22px;
+  color: #3cff3c;
+  text-shadow: 0 0 8px #3cff3c;
+}
+
+/* Kaufbar */
+
+.market-slot.buy {
+  cursor: pointer;
+  border-color: #caa24b;
+}
+
+.market-slot.buy:hover {
+  transform: translateY(-3px);
+  border-color: #f0d060;
+  box-shadow:
+    0 8px 20px rgba(0, 0, 0, 0.5),
+    0 0 15px rgba(200, 160, 60, 0.3);
+}
+
+/* Gesperrt */
+
+.market-slot.locked {
+  opacity: 0.4;
+  filter: grayscale(60%);
+}
+
+/* =========================
+   Schwarzmarkt Slot Inhalt
+========================= */
+
 .bag-icon {
-  width: 60px;
+  width: 64px;
-  height: 60px;
+  height: 64px;
+  object-fit: contain;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
+}
+
+.bag-label {
+  font-family: "Cinzel", serif;
+  font-size: 12px;
+  font-weight: bold;
+  color: #e7d9b4;
+  letter-spacing: 0.5px;
+}
+
+.bag-price {
+  font-family: "Cinzel", serif;
+  font-size: 14px;
+  font-weight: bold;
+  color: #ffd700;
+  text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.buy-button {
+  padding: 6px 16px !important;
+  font-size: 12px !important;
+  font-family: "Cinzel", serif !important;
+  font-weight: bold !important;
+  background: linear-gradient(#7a5a2a, #caa24b) !important;
+  border: 1px solid #e0c67b !important;
+  border-radius: 4px;
+  color: #1a1206 !important;
+  cursor: pointer;
+  transition: 0.2s;
+  margin-top: 0 !important;
+  width: 100%;
+}
+
+.buy-button:hover {
+  transform: scale(1.05);
+  box-shadow:
+    0 0 8px #ffd66b,
+    0 0 18px #caa24b;
+}
+
+/* Placeholder Texte */
+
+.market-placeholder {
+  text-align: center;
+  padding: 30px 20px;
+  color: #8b6a3c;
+  font-family: "Cinzel", serif;
+  font-size: 14px;
+  font-style: italic;
+  letter-spacing: 0.5px;
 }

public/js/buildings/schwarzmarkt.js

@@ -26,11 +26,11 @@ Geheimhandel
 </div>
 
 <div class="market-tab-content" id="market-artifacts">
-<p>Noch keine Artefakte verfügbar</p>
+<p class="market-placeholder">⚗️ Noch keine Artefakte verfügbar</p>
 </div>
 
 <div class="market-tab-content" id="market-special">
-<p>Schwarzmarkt Angebote folgen bald</p>
+<p class="market-placeholder">🤫 Schwarzmarkt Angebote folgen bald...</p>
 </div>
 
 </div>
@@ -59,41 +59,26 @@ async function loadPages() {
       if (data.ownedPages.includes(i)) {
         html += `
 <div class="market-slot owned">
-
+  <img src="/images/items/beutel.png" class="bag-icon">
-<img src="/images/items/beutel.png" class="bag-icon">
+  <div class="bag-label">Seite ${i}</div>
-
+  <div class="bag-status">✔</div>
-<div class="bag-status owned">
-✔
-</div>
-
 </div>
 `;
       } else if (price) {
         html += `
 <div class="market-slot buy" data-page="${i}">
-
+  <img src="/images/items/beutel.png" class="bag-icon">
-<img src="/images/items/beutel.png" class="bag-icon">
+  <div class="bag-label">Seite ${i}</div>
-
+  <div class="bag-price">${price.price} 🪙</div>
-<div class="bag-price">
+  <button class="buy-button">Kaufen</button>
-${price.price} <span class="gold-icon">🪙</span>
-</div>
-
-<button class="buy-button">
-Kaufen
-</button>
-
 </div>
 `;
       } else {
         html += `
 <div class="market-slot locked">
-
+  <img src="/images/items/beutel.png" class="bag-icon">
-<img src="/images/items/beutel.png" class="bag-icon">
+  <div class="bag-label">Seite ${i}</div>
-
+  <div class="bag-status">🔒</div>
-<div class="bag-status locked">
-🔒
-</div>
-
 </div>
 `;
       }

public/js/map-ui.js

@@ -39,10 +39,9 @@ document.querySelectorAll(".building").forEach((building) => {
     e.preventDefault();
 
     try {
-      const name = building.querySelector("title")?.textContent || "Gebäude";
       const url = building.getAttribute("href");
 
-      title.innerText = name;
+      title.innerText = "Lädt...";
 
       popup.style.left = "50%";
       popup.style.top = "50%";
@@ -55,7 +54,8 @@ document.querySelectorAll(".building").forEach((building) => {
       if (!res.ok) throw new Error("API Fehler");
 
       const data = await res.json();
-      console.log("Gebäude API Antwort:", data);
+
+      title.innerText = data.name;
 
       const infoTab = document.getElementById("tab-info");
       const actionsTab = document.getElementById("tab-actions");