diff --git a/public/css/events.css b/public/css/events.css
new file mode 100644
index 0000000..45c9b37
--- /dev/null
+++ b/public/css/events.css
@@ -0,0 +1,139 @@
+.events-grid {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  flex-wrap: nowrap;
+  padding: 10px 4px;
+}
+
+.event-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+  transition: transform 0.15s ease, filter 0.15s ease;
+}
+
+.event-card:hover {
+  transform: translateY(-3px);
+  filter: brightness(1.15);
+}
+
+.event-card:active {
+  transform: translateY(0px) scale(0.96);
+}
+
+.event-card-img-wrap {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  box-sizing: border-box;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.event-card:hover .event-card-img-wrap {
+  border-color: rgba(255, 200, 80, 0.5);
+  box-shadow: 0 0 10px rgba(255, 180, 50, 0.2);
+}
+
+.event-card-img-wrap img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  image-rendering: pixelated;
+}
+
+.event-card-label {
+  font-size: 11px;
+  color: #cccccc;
+  text-align: center;
+  line-height: 1.3;
+  word-break: break-word;
+}
+
+/* ================================
+   Detail-Popup (Overlay)
+================================ */
+
+#event-detail-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  z-index: 9999;
+  align-items: center;
+  justify-content: center;
+}
+
+#event-detail-overlay.active {
+  display: flex;
+}
+
+#event-detail-popup {
+  background: #1e1a14;
+  border: 1px solid rgba(255, 200, 80, 0.3);
+  border-radius: 12px;
+  padding: 24px;
+  min-width: 280px;
+  max-width: 420px;
+  width: 90%;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
+  position: relative;
+  animation: eventDetailIn 0.18s ease;
+}
+
+@keyframes eventDetailIn {
+  from { opacity: 0; transform: scale(0.92) translateY(8px); }
+  to   { opacity: 1; transform: scale(1)    translateY(0);   }
+}
+
+#event-detail-popup .edp-close {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 18px;
+  cursor: pointer;
+  line-height: 1;
+  transition: color 0.1s;
+}
+
+#event-detail-popup .edp-close:hover {
+  color: #fff;
+}
+
+#event-detail-popup .edp-img {
+  display: block;
+  margin: 0 auto 14px;
+  width: 80px;
+  height: 80px;
+  object-fit: contain;
+  image-rendering: pixelated;
+}
+
+#event-detail-popup .edp-title {
+  text-align: center;
+  font-size: 15px;
+  font-weight: bold;
+  color: #f5c842;
+  margin-bottom: 10px;
+}
+
+#event-detail-popup .edp-body {
+  font-size: 13px;
+  color: #cccccc;
+  line-height: 1.7;
+  text-align: center;
+}
diff --git a/public/js/quickmenu/events.js b/public/js/quickmenu/events.js
index 720207d..4bd011a 100644
--- a/public/js/quickmenu/events.js
+++ b/public/js/quickmenu/events.js
@@ -2,7 +2,91 @@ export async function loadEvents() {
   const body = document.getElementById("qm-body-events");
   if (!body) return;
 
+  /* ================================
+     CSS einmalig laden
+  ================================ */
+  if (!document.querySelector('link[href="/css/events.css"]')) {
+    const link = document.createElement("link");
+    link.rel  = "stylesheet";
+    link.href = "/css/events.css";
+    document.head.appendChild(link);
+  }
+
+  /* ================================
+     Event-Daten (hier später befüllen)
+  ================================ */
+  const events = [
+    { id: 1, img: "/images/items/runenhaufen.png", label: "Textzeile 1" },
+    { id: 2, img: "/images/items/runenhaufen.png", label: "Textzeile 2" },
+    { id: 3, img: "/images/items/runenhaufen.png", label: "Textzeile 3" },
+    { id: 4, img: "/images/items/runenhaufen.png", label: "Textzeile 4" },
+    { id: 5, img: "/images/items/runenhaufen.png", label: "Textzeile 5" },
+  ];
+
+  /* ================================
+     Haupt-HTML injizieren
+  ================================ */
   body.innerHTML = `
-    <p>Inhalt folgt...</p>
+    <!-- 5er Event-Grid -->
+    <div class="events-grid">
+      ${events
+        .map(
+          (ev) => `
+        <div class="event-card" data-event-id="${ev.id}">
+          <div class="event-card-img-wrap">
+            <img src="${ev.img}" alt="${ev.label}" draggable="false">
+          </div>
+          <span class="event-card-label">${ev.label}</span>
+        </div>`
+        )
+        .join("")}
+    </div>
+
+    <!-- Detail-Popup -->
+    <div id="event-detail-overlay">
+      <div id="event-detail-popup">
+        <button class="edp-close" id="edp-close-btn">✕</button>
+        <img class="edp-img" id="edp-img" src="" alt="">
+        <div class="edp-title" id="edp-title"></div>
+        <div class="edp-body" id="edp-body">Inhalt folgt...</div>
+      </div>
+    </div>
   `;
+
+  /* ================================
+     Event-Karten klickbar machen
+  ================================ */
+
+  const overlay  = body.querySelector("#event-detail-overlay");
+  const edpImg   = body.querySelector("#edp-img");
+  const edpTitle = body.querySelector("#edp-title");
+  const edpBody  = body.querySelector("#edp-body");
+
+  body.querySelectorAll(".event-card").forEach((card) => {
+    card.addEventListener("click", () => {
+      const id = Number(card.dataset.eventId);
+      const ev = events.find((e) => e.id === id);
+      if (!ev) return;
+
+      edpImg.src           = ev.img;
+      edpImg.alt           = ev.label;
+      edpTitle.textContent = ev.label;
+      edpBody.textContent  = "Inhalt folgt..."; // hier später befüllen
+
+      overlay.classList.add("active");
+    });
+  });
+
+  /* Detail-Popup schließen */
+  body.querySelector("#edp-close-btn").addEventListener("click", () => {
+    overlay.classList.remove("active");
+  });
+
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) overlay.classList.remove("active");
+  });
+
+  document.addEventListener("keydown", function edpEsc(e) {
+    if (e.key === "Escape") overlay.classList.remove("active");
+  });
 }