SM3

public/css/building.css

@@ -569,3 +569,45 @@ body {
 .market-page.locked {
   opacity: 0.4;
 }
+
+/* =========================
+   Schwarzmarkt Tabs
+========================= */
+
+.market-tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.market-tab {
+  padding: 8px 14px;
+
+  background: #5c3b20;
+  color: #e7d9b4;
+
+  border: 1px solid #8b6a3c;
+
+  cursor: pointer;
+
+  font-family: "Cinzel", serif;
+}
+
+.market-tab:hover {
+  background: #8b6a3c;
+}
+
+.market-tab.active {
+  background: #d4b97a;
+  color: #2b1b0f;
+}
+
+/* Tab Inhalte */
+
+.market-tab-content {
+  display: none;
+}
+
+.market-tab-content.active {
+  display: block;
+}

public/js/buildings/schwarzmarkt.js

@@ -2,12 +2,45 @@ export async function loadSchwarzmarkt() {
   const ui = document.querySelector(".building-ui");
 
   ui.innerHTML = `
-<h2>Schwarzmarkt</h2>
 
+<div class="market-tabs">
+
+<button class="market-tab active" data-tab="inventory">
+Inventar
+</button>
+
+<button class="market-tab" data-tab="artifacts">
+Artefakte
+</button>
+
+<button class="market-tab" data-tab="special">
+Geheimhandel
+</button>
+
+</div>
+
+
+<div class="market-content">
+
+<div class="market-tab-content active" id="market-inventory">
 <div id="market-pages"></div>
+</div>
+
+<div class="market-tab-content" id="market-artifacts">
+<p>Noch keine Artefakte verfügbar</p>
+</div>
+
+<div class="market-tab-content" id="market-special">
+<p>Schwarzmarkt Angebote folgen bald</p>
+</div>
+
+</div>
+
 `;
 
   loadPages();
+
+  initMarketTabs();
 }
 
 async function loadPages() {
@@ -65,3 +98,23 @@ document.addEventListener("click", async (e) => {
 
   loadPages();
 });
+
+function initMarketTabs() {
+  document.querySelectorAll(".market-tab").forEach((tab) => {
+    tab.addEventListener("click", () => {
+      document
+        .querySelectorAll(".market-tab")
+        .forEach((t) => t.classList.remove("active"));
+
+      tab.classList.add("active");
+
+      document
+        .querySelectorAll(".market-tab-content")
+        .forEach((c) => c.classList.remove("active"));
+
+      document
+        .getElementById("market-" + tab.dataset.tab)
+        .classList.add("active");
+    });
+  });
+}