sfrjnsr

public/css/events.css

@@ -1,3 +1,23 @@
+/* ================================================
+   events.css  –  Tägliche Events Quickmenü-Popup
+   Die Popup-Basisgrösse kommt von .qm-popup in
+   quickmenu.css – hier wird sie per ID überschrieben.
+================================================ */
+
+/* Popup-Grösse für Events (ID schlägt Klasse) */
+#qm-popup-events {
+  width: 900px;
+  height: 600px;
+}
+
+/* Body-Padding anpassen (war auf 1800px ausgelegt) */
+#qm-popup-events .qm-popup-body {
+  padding: 20px 30px;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+/* ── Event Grid ─────────────────────────────────── */
 .events-grid {
   display: flex;
   gap: 10px;
@@ -78,8 +98,14 @@
 }
 
 @keyframes eventDetailIn {
-  from { opacity: 0; transform: translateY(6px); }
+  from {
-  to   { opacity: 1; transform: translateY(0);   }
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 #event-detail-popup .edp-close {

public/js/quickmenu/events.js

@@ -2,16 +2,6 @@ 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)
   ================================ */
@@ -37,7 +27,7 @@ export async function loadEvents() {
             <img src="${ev.img}" alt="${ev.label}" draggable="false">
           </div>
           <span class="event-card-label">${ev.label}</span>
-        </div>`
+        </div>`,
         )
         .join("")}
     </div>
@@ -57,10 +47,10 @@ export async function loadEvents() {
      Event-Karten klickbar machen
   ================================ */
 
-  const overlay  = body.querySelector("#event-detail-overlay");
+  const overlay = body.querySelector("#event-detail-overlay");
-  const edpImg   = body.querySelector("#edp-img");
+  const edpImg = body.querySelector("#edp-img");
   const edpTitle = body.querySelector("#edp-title");
-  const edpBody  = body.querySelector("#edp-body");
+  const edpBody = body.querySelector("#edp-body");
 
   body.querySelectorAll(".event-card").forEach((card) => {
     card.addEventListener("click", () => {
@@ -68,10 +58,10 @@ export async function loadEvents() {
       const ev = events.find((e) => e.id === id);
       if (!ev) return;
 
-      edpImg.src           = ev.img;
+      edpImg.src = ev.img;
-      edpImg.alt           = ev.label;
+      edpImg.alt = ev.label;
       edpTitle.textContent = ev.label;
-      edpBody.textContent  = "Inhalt folgt..."; // hier später befüllen
+      edpBody.textContent = "Inhalt folgt..."; // hier später befüllen
 
       overlay.classList.add("active");
     });

views/launcher.ejs

@@ -91,6 +91,7 @@
     <link rel="stylesheet" href="/css/building.css" />
     <link rel="stylesheet" href="/css/popup.css" />
     <link rel="stylesheet" href="/css/quickmenu.css" />
+    <link rel="stylesheet" href="/css/events.css" />
     <link rel="stylesheet" href="/css/hud.css" />
     <link rel="stylesheet" href="/css/mine.css" />
   </head>