dfbds

public/css/launcher.css

@@ -1,3 +1,98 @@
+/* ================================================
+   launcher.css  –  Dynasty of Knights Launcher
+================================================ */
+
+/* ── Fonts ─────────────────────────────────────── */
+
+@font-face {
+  font-family: "Cinzel Decorative";
+  src:
+    url("/fonts/CinzelDecorative-Regular.woff2") format("woff2"),
+    url("/fonts/CinzelDecorative-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Cinzel Decorative";
+  src:
+    url("/fonts/CinzelDecorative-Bold.woff2") format("woff2"),
+    url("/fonts/CinzelDecorative-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Cinzel Decorative";
+  src:
+    url("/fonts/CinzelDecorative-Black.woff2") format("woff2"),
+    url("/fonts/CinzelDecorative-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Cinzel";
+  src: url("/fonts/Cinzel-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Cinzel";
+  src: url("/fonts/Cinzel-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Cinzel";
+  src: url("/fonts/Cinzel-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Cinzel";
+  src: url("/fonts/Cinzel-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Cinzel";
+  src: url("/fonts/Cinzel-ExtraBold.ttf") format("truetype");
+  font-weight: 800;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Cinzel";
+  src: url("/fonts/Cinzel-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Tangerine";
+  src:
+    url("/fonts/Tangerine-Regular.woff2") format("woff2"),
+    url("/fonts/Tangerine-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Tangerine";
+  src:
+    url("/fonts/Tangerine-Bold.woff2") format("woff2"),
+    url("/fonts/Tangerine-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+
+/* ── Base ───────────────────────────────────────── */
+
 html,
 body {
   margin: 0;
@@ -11,6 +106,8 @@ body {
   justify-content: center;
 }
 
+/* ── Worldmap ───────────────────────────────────── */
+
 .worldmap {
   position: relative;
   width: 2037px;
@@ -51,7 +148,8 @@ body {
   stroke: #6ec6ff;
 }
 
-/* ── Map Tooltip ───────────────────────────────── */
+/* ── Map Tooltip ────────────────────────────────── */
+
 #map-tooltip {
   position: fixed;
   pointer-events: none;
@@ -74,44 +172,31 @@ body {
   margin: 6px 0;
 }
 
+/* ── Chat ───────────────────────────────────────── */
+
 #game-chat {
   position: fixed;
-
   left: 20px;
   bottom: 20px;
-
   width: 400px;
   height: 300px;
-
   background: linear-gradient(#2b2115, #1a140d);
-
   border: 3px solid #8b6a3c;
-
   color: #f3e6c5;
-
   font-family: serif;
-
   display: flex;
   flex-direction: column;
-
   z-index: 1000;
 }
 
 #chat-messages {
   flex: 1;
-
   resize: none;
-
   background: #1b140b;
-
   border: none;
-
   color: #f3e6c5;
-
   padding: 5px;
-
   font-size: 13px;
-
   overflow-y: auto;
 }
 
@@ -123,80 +208,54 @@ body {
 
 .chat-channels button {
   background: linear-gradient(#6b4a25, #3a2512);
-
   border: 1px solid #caa46a;
-
   color: #f3e6c5;
-
   font-family: serif;
-
   font-size: 13px;
-
   padding: 3px 8px;
-
   cursor: pointer;
-
   transition: all 0.15s ease;
 }
 
 .chat-channels button:hover {
   background: linear-gradient(#8a6235, #4a3018);
-
   border-color: #ffd27a;
-
   box-shadow: 0 0 6px rgba(255, 210, 120, 0.6);
 }
 
 .chat-channels button.active {
   background: linear-gradient(#a37742, #5c3a1a);
-
   border-color: #ffd27a;
-
   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
 }
 
-.global-chat {
+.global-chat  { color: #e6c48a; }
-  color: #e6c48a;
+.guild-chat   { color: #6ed37c; }
-}
+.private-chat { color: #7ec8ff; }
-.guild-chat {
+
-  color: #6ed37c;
+/* ── Online-User-Liste ──────────────────────────── */
-}
-.private-chat {
-  color: #7ec8ff;
-}
 
 #online-users {
   position: fixed;
-
   left: 20px;
   bottom: 340px;
-
   width: 350px;
-
   background: linear-gradient(#2b2115, #1a140d);
-
   border: 3px solid #8b6a3c;
-
   color: #f3e6c5;
-
   font-family: serif;
-
   overflow-y: auto;
 }
 
 .online-header {
   background: #3a2a17;
-
   padding: 5px;
-
   text-align: center;
-
   border-bottom: 2px solid #8b6a3c;
 }
 
 #online-list div {
   padding: 4px;
-
   cursor: pointer;
 }
 
@@ -214,7 +273,8 @@ body {
   box-shadow: 0 0 6px #3cff3c;
 }
 
-/* ── Music Control ─────────────────────────────── */
+/* ── Music Control ──────────────────────────────── */
+
 #music-control {
   position: fixed;
   bottom: 16px;

views/launcher.ejs

@@ -8,84 +8,6 @@
       href="/images/favicon/dok_favicon_32px.ico"
       type="image/x-icon"
     />
-    <style>
-      @font-face {
-        font-family: "Cinzel Decorative";
-        src:
-          url("/fonts/CinzelDecorative-Regular.woff2") format("woff2"),
-          url("/fonts/CinzelDecorative-Regular.ttf") format("truetype");
-        font-weight: 400;
-        font-style: normal;
-      }
-      @font-face {
-        font-family: "Cinzel Decorative";
-        src:
-          url("/fonts/CinzelDecorative-Bold.woff2") format("woff2"),
-          url("/fonts/CinzelDecorative-Bold.ttf") format("truetype");
-        font-weight: 700;
-        font-style: normal;
-      }
-      @font-face {
-        font-family: "Cinzel Decorative";
-        src:
-          url("/fonts/CinzelDecorative-Black.woff2") format("woff2"),
-          url("/fonts/CinzelDecorative-Black.ttf") format("truetype");
-        font-weight: 900;
-        font-style: normal;
-      }
-      @font-face {
-        font-family: "Cinzel";
-        src: url("/fonts/Cinzel-Regular.ttf") format("truetype");
-        font-weight: 400;
-        font-style: normal;
-      }
-      @font-face {
-        font-family: "Cinzel";
-        src: url("/fonts/Cinzel-Medium.ttf") format("truetype");
-        font-weight: 500;
-        font-style: normal;
-      }
-      @font-face {
-        font-family: "Cinzel";
-        src: url("/fonts/Cinzel-SemiBold.ttf") format("truetype");
-        font-weight: 600;
-        font-style: normal;
-      }
-      @font-face {
-        font-family: "Cinzel";
-        src: url("/fonts/Cinzel-Bold.ttf") format("truetype");
-        font-weight: 700;
-        font-style: normal;
-      }
-      @font-face {
-        font-family: "Cinzel";
-        src: url("/fonts/Cinzel-ExtraBold.ttf") format("truetype");
-        font-weight: 800;
-        font-style: normal;
-      }
-      @font-face {
-        font-family: "Cinzel";
-        src: url("/fonts/Cinzel-Black.ttf") format("truetype");
-        font-weight: 900;
-        font-style: normal;
-      }
-      @font-face {
-        font-family: "Tangerine";
-        src:
-          url("/fonts/Tangerine-Regular.woff2") format("woff2"),
-          url("/fonts/Tangerine-Regular.ttf") format("truetype");
-        font-weight: 400;
-        font-style: normal;
-      }
-      @font-face {
-        font-family: "Tangerine";
-        src:
-          url("/fonts/Tangerine-Bold.woff2") format("woff2"),
-          url("/fonts/Tangerine-Bold.ttf") format("truetype");
-        font-weight: 700;
-        font-style: normal;
-      }
-    </style>
     <link rel="stylesheet" href="/css/launcher.css" />
     <link rel="stylesheet" href="/css/global.css" />
     <link rel="stylesheet" href="/css/building.css" />
@@ -260,525 +182,71 @@
         </svg>
       </div>
 
-      <!-- Header -->
       <div class="popup-header">
-        <div class="popup-title-wrap">
+        <span class="popup-title" id="popup-building-name">Gebäude</span>
-          <div class="popup-title-gem"></div>
+        <button class="popup-close" id="popup-close-btn">✕</button>
-          <span id="popup-title">Gebäude</span>
-          <div class="popup-title-gem"></div>
-        </div>
-        <span class="popup-close">✕</span>
       </div>
 
-      <!-- Body: Sidebar + Content -->
-      <div class="popup-body">
-        <!-- Vertikale Tab-Sidebar -->
       <div class="popup-tabs">
-          <!-- Info Tab -->
+        <button class="popup-tab active" data-tab="info">Info</button>
-          <button class="tab active" data-tab="info">
+        <button class="popup-tab" data-tab="actions">Aktionen</button>
-            <svg
+        <button class="popup-tab" data-tab="upgrade">Upgrade</button>
-              class="tab-icon tab-icon-default"
-              viewBox="0 0 26 26"
-              fill="none"
-            >
-              <path
-                d="M13 3 L22 7 L22 14 C22 18.5 17.5 22 13 23 C8.5 22 4 18.5 4 14 L4 7 Z"
-                stroke="#6a4820"
-                stroke-width="1.5"
-                fill="#1a0e04"
-              />
-              <path
-                d="M13 6 L19.5 9 L19.5 14 C19.5 17.5 16.5 20.2 13 21 C9.5 20.2 6.5 17.5 6.5 14 L6.5 9 Z"
-                stroke="#7a5828"
-                stroke-width="1"
-                fill="#221408"
-              />
-              <circle cx="13" cy="13" r="2" fill="#6a4820" />
-              <line
-                x1="13"
-                y1="9"
-                x2="13"
-                y2="11"
-                stroke="#6a4820"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <line
-                x1="13"
-                y1="15"
-                x2="13"
-                y2="17"
-                stroke="#6a4820"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-            </svg>
-            <svg
-              class="tab-icon tab-icon-active"
-              viewBox="0 0 26 26"
-              fill="none"
-            >
-              <path
-                d="M13 3 L22 7 L22 14 C22 18.5 17.5 22 13 23 C8.5 22 4 18.5 4 14 L4 7 Z"
-                stroke="#c8960c"
-                stroke-width="1.5"
-                fill="#3a2208"
-              />
-              <path
-                d="M13 6 L19.5 9 L19.5 14 C19.5 17.5 16.5 20.2 13 21 C9.5 20.2 6.5 17.5 6.5 14 L6.5 9 Z"
-                stroke="#e0b040"
-                stroke-width="1"
-                fill="#4a3010"
-              />
-              <circle cx="13" cy="13" r="2" fill="#f0d060" />
-              <line
-                x1="13"
-                y1="9"
-                x2="13"
-                y2="11"
-                stroke="#f0d060"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <line
-                x1="13"
-                y1="15"
-                x2="13"
-                y2="17"
-                stroke="#f0d060"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-            </svg>
-            <div class="tab-tip">Info</div>
-          </button>
-
-          <!-- Aktionen Tab -->
-          <button class="tab" data-tab="actions">
-            <svg
-              class="tab-icon tab-icon-default"
-              viewBox="0 0 26 26"
-              fill="none"
-            >
-              <line
-                x1="5"
-                y1="5"
-                x2="21"
-                y2="21"
-                stroke="#6a4820"
-                stroke-width="2"
-                stroke-linecap="round"
-              />
-              <line
-                x1="21"
-                y1="5"
-                x2="5"
-                y2="21"
-                stroke="#6a4820"
-                stroke-width="2"
-                stroke-linecap="round"
-              />
-              <line
-                x1="2"
-                y1="10"
-                x2="8"
-                y2="6"
-                stroke="#6a4820"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <line
-                x1="24"
-                y1="10"
-                x2="18"
-                y2="6"
-                stroke="#6a4820"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <line
-                x1="3"
-                y1="7"
-                x2="7"
-                y2="3"
-                stroke="#5a3810"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <line
-                x1="23"
-                y1="7"
-                x2="19"
-                y2="3"
-                stroke="#5a3810"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <circle
-                cx="13"
-                cy="13"
-                r="2"
-                fill="#1a0e04"
-                stroke="#5a3810"
-                stroke-width="1"
-              />
-            </svg>
-            <svg
-              class="tab-icon tab-icon-active"
-              viewBox="0 0 26 26"
-              fill="none"
-            >
-              <line
-                x1="5"
-                y1="5"
-                x2="21"
-                y2="21"
-                stroke="#d4a030"
-                stroke-width="2"
-                stroke-linecap="round"
-              />
-              <line
-                x1="21"
-                y1="5"
-                x2="5"
-                y2="21"
-                stroke="#d4a030"
-                stroke-width="2"
-                stroke-linecap="round"
-              />
-              <line
-                x1="2"
-                y1="10"
-                x2="8"
-                y2="6"
-                stroke="#f0d060"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <line
-                x1="24"
-                y1="10"
-                x2="18"
-                y2="6"
-                stroke="#f0d060"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <line
-                x1="3"
-                y1="7"
-                x2="7"
-                y2="3"
-                stroke="#c8960c"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <line
-                x1="23"
-                y1="7"
-                x2="19"
-                y2="3"
-                stroke="#c8960c"
-                stroke-width="1.5"
-                stroke-linecap="round"
-              />
-              <circle
-                cx="13"
-                cy="13"
-                r="2.5"
-                fill="#3a2208"
-                stroke="#f0d060"
-                stroke-width="1"
-              />
-            </svg>
-            <div class="tab-tip">Aktionen</div>
-          </button>
-
-          <!-- Upgrade Tab -->
-          <button class="tab" data-tab="upgrade">
-            <svg
-              class="tab-icon tab-icon-default"
-              viewBox="0 0 26 26"
-              fill="none"
-            >
-              <rect
-                x="5"
-                y="18"
-                width="16"
-                height="3"
-                rx="1"
-                fill="#3a2808"
-                stroke="#5a3810"
-                stroke-width="1"
-              />
-              <rect
-                x="7"
-                y="14"
-                width="12"
-                height="5"
-                rx="1"
-                fill="#2a1c08"
-                stroke="#5a3810"
-                stroke-width="1"
-              />
-              <rect
-                x="14"
-                y="5"
-                width="7"
-                height="5"
-                rx="1"
-                fill="#2a1c08"
-                stroke="#6a4820"
-                stroke-width="1.2"
-              />
-              <line
-                x1="16"
-                y1="10"
-                x2="9"
-                y2="17"
-                stroke="#6a4820"
-                stroke-width="2"
-                stroke-linecap="round"
-              />
-              <circle cx="8" cy="13" r="0.8" fill="#6a4820" />
-              <circle cx="6" cy="11" r="0.5" fill="#5a3810" />
-            </svg>
-            <svg
-              class="tab-icon tab-icon-active"
-              viewBox="0 0 26 26"
-              fill="none"
-            >
-              <rect
-                x="5"
-                y="18"
-                width="16"
-                height="3"
-                rx="1"
-                fill="#4a3010"
-                stroke="#c8960c"
-                stroke-width="1"
-              />
-              <rect
-                x="7"
-                y="14"
-                width="12"
-                height="5"
-                rx="1"
-                fill="#3a2208"
-                stroke="#c8960c"
-                stroke-width="1"
-              />
-              <rect
-                x="14"
-                y="5"
-                width="7"
-                height="5"
-                rx="1"
-                fill="#4a3010"
-                stroke="#f0d060"
-                stroke-width="1.2"
-              />
-              <line
-                x1="16"
-                y1="10"
-                x2="9"
-                y2="17"
-                stroke="#d4a030"
-                stroke-width="2"
-                stroke-linecap="round"
-              />
-              <circle cx="8" cy="13" r="1" fill="#f0d060" />
-              <circle cx="6" cy="11" r="0.7" fill="#c8960c" />
-              <circle cx="10" cy="11" r="0.6" fill="#f0d060" />
-            </svg>
-            <div class="tab-tip">Upgrade</div>
-          </button>
       </div>
 
-        <!-- Tab-Inhalte -->
+      <div class="popup-body">
-        <div class="popup-content">
         <div class="tab-content active" id="tab-info"></div>
         <div class="tab-content" id="tab-actions"></div>
         <div class="tab-content" id="tab-upgrade"></div>
       </div>
     </div>
-    </div>
-
-    <div id="online-users">
-      <div class="online-header">Spieler Online</div>
-
-      <div id="online-list"></div>
-    </div>
-
-    <div id="game-chat">
-      <div class="chat-header" id="chat-title">Globalchat</div>
-
-      <div class="chat-channels">
-        <button data-channel="global" class="active">Global</button>
-        <button data-channel="guild">Gilde</button>
-        <button data-channel="private">Privat</button>
-      </div>
-
-      <textarea id="chat-messages" readonly></textarea>
-
-      <div class="chat-input">
-        <input id="chat-text" placeholder="Nachricht..." />
-        <button id="chat-send">Senden</button>
-      </div>
-    </div>
-    <div id="map-tooltip"></div>
 
     <!-- ================================
          HUD
     ================================ -->
-    <div id="hud">
+    <div id="hud"></div>
-      <!-- Charakter Panel -->
-      <div id="hud-character">
-        <div id="hud-avatar-wrap">
-          <img
-            id="hud-avatar"
-            src="/images/avatar_placeholder.svg"
-            alt="Avatar"
-          />
-          <div id="hud-vip">VIP 0</div>
-        </div>
-        <div id="hud-info">
-          <div id="hud-name">...</div>
-          <div id="hud-energy">
-            <span id="hud-energy-label">Energie</span>
-            <div id="hud-energy-bar-wrap">
-              <span id="hud-energy-value">40 / 40</span>
-              <div id="hud-energy-plus">+</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Währungs Panel -->
-      <div id="hud-currency">
-        <div class="hud-res-row">
-          <div class="hud-res">
-            <span class="hud-res-icon">⚪</span>
-            <span class="hud-res-value" id="hud-silver">0</span>
-          </div>
-          <div class="hud-sep"></div>
-          <div class="hud-res">
-            <span class="hud-res-icon">💠</span>
-            <span class="hud-res-value" id="hud-gems">0</span>
-          </div>
-          <div class="hud-sep"></div>
-          <div class="hud-res">
-            <span class="hud-res-icon">🪙</span>
-            <span class="hud-res-value" id="hud-gold">0</span>
-          </div>
-          <button id="hud-gold-btn">Gold</button>
-        </div>
-
-        <div class="hud-res-row">
-          <div class="hud-res">
-            <span class="hud-res-icon">🪵</span>
-            <span class="hud-res-value" id="hud-wood">0</span>
-          </div>
-          <div class="hud-sep"></div>
-          <div class="hud-res">
-            <span class="hud-res-icon">🪨</span>
-            <span class="hud-res-value" id="hud-stone">0</span>
-          </div>
-        </div>
-      </div>
-    </div>
 
     <!-- ================================
-         Quick Menu Panel
+         QUICKMENU
     ================================ -->
-    <div id="quickmenu-panel">
+    <div id="quickmenu">
-      <div class="qm-slot" data-popup="qm-popup-carddeck">
+      <div class="qm-slot" data-popup="carddeck">
-        <img
+        <span class="qm-slot-icon">🃏</span>
-          src="/images/quickmenu/carddeck.png"
-          alt=""
-          onerror="this.style.display = 'none'"
-        />
         <span class="qm-slot-label">Kartendeck</span>
       </div>
-
+      <div class="qm-slot" data-popup="events">
-      <div class="qm-slot" data-popup="qm-popup-events">
+        <span class="qm-slot-icon">📅</span>
-        <img
-          src="/images/quickmenu/events.png"
-          alt=""
-          onerror="this.style.display = 'none'"
-        />
         <span class="qm-slot-label">Tägliche Events</span>
       </div>
-
+      <div class="qm-slot" data-popup="heldenbonus">
-      <div class="qm-slot" data-popup="qm-popup-heldenbonus">
+        <span class="qm-slot-icon">⚔️</span>
-        <img
-          src="/images/quickmenu/heldenbonus.png"
-          alt=""
-          onerror="this.style.display = 'none'"
-        />
         <span class="qm-slot-label">Helden Bonus</span>
       </div>
-
+      <div class="qm-slot" data-popup="sealedliga">
-      <div class="qm-slot" data-popup="qm-popup-sealedliga">
+        <span class="qm-slot-icon">🏆</span>
-        <img
-          src="/images/quickmenu/sealedliga.png"
-          alt=""
-          onerror="this.style.display = 'none'"
-        />
         <span class="qm-slot-label">Sealed Liga</span>
       </div>
-
+      <div class="qm-slot" data-popup="beschwoerer">
-      <div class="qm-slot" data-popup="qm-popup-beschwoerer">
+        <span class="qm-slot-icon">💀</span>
-        <img
-          src="/images/quickmenu/beschwoerer.png"
-          alt=""
-          onerror="this.style.display = 'none'"
-        />
         <span class="qm-slot-label">Beschwörer der Seelen</span>
       </div>
-
+      <div class="qm-slot" data-popup="onlinebonus">
-      <div class="qm-slot" data-popup="qm-popup-onlinebonus">
+        <span class="qm-slot-icon">🎁</span>
-        <img
-          src="/images/quickmenu/onlinebonus.png"
-          alt=""
-          onerror="this.style.display = 'none'"
-        />
         <span class="qm-slot-label">Online Bonus</span>
       </div>
-
+      <div class="qm-slot" data-popup="aktionen">
-      <div class="qm-slot" data-popup="qm-popup-aktionen">
+        <span class="qm-slot-icon">⚡</span>
-        <img
-          src="/images/quickmenu/aktionen.png"
-          alt=""
-          onerror="this.style.display = 'none'"
-        />
         <span class="qm-slot-label">Aktionen</span>
       </div>
-
+      <div class="qm-slot" data-popup="basar">
-      <div class="qm-slot" data-popup="qm-popup-basar">
+        <span class="qm-slot-icon">🏪</span>
-        <img
-          src="/images/quickmenu/basar.png"
-          alt=""
-          onerror="this.style.display = 'none'"
-        />
         <span class="qm-slot-label">Basar</span>
       </div>
-
+      <div class="qm-slot" data-popup="boosteraktion">
-      <div class="qm-slot" data-popup="qm-popup-boosteraktion">
+        <span class="qm-slot-icon">🎴</span>
-        <img
-          src="/images/quickmenu/boosteraktion.png"
-          alt=""
-          onerror="this.style.display = 'none'"
-        />
         <span class="qm-slot-label">10 Booster Aktion</span>
       </div>
-
+      <div class="qm-slot" data-popup="boosterjagd">
-      <div class="qm-slot" data-popup="qm-popup-boosterjagd">
+        <span class="qm-slot-icon">🎯</span>
-        <img
-          src="/images/quickmenu/boosterjagd.png"
-          alt=""
-          onerror="this.style.display = 'none'"
-        />
         <span class="qm-slot-label">Boosterjagd</span>
       </div>
     </div>
@@ -885,6 +353,7 @@
         <button class="notification-btn" id="notification-ok">OK</button>
       </div>
     </div>
+
     <!-- Music -->
     <div id="music-control">
       <button id="music-mute-btn" title="Musik ein/ausschalten">🔊</button>
@@ -930,12 +399,7 @@
           audio.src = shuffled[i];
           audio.muted = muted;
           if (!muted) {
-            audio
+            audio.play().then(() => { started = true; }).catch(() => {});
-              .play()
-              .then(() => {
-                started = true;
-              })
-              .catch(() => {});
           }
         }
 
@@ -950,27 +414,16 @@
           localStorage.setItem("dok_muted", muted);
           if (!muted) {
             if (!audio.src) playTrack(index);
-            audio
+            audio.play().then(() => { started = true; }).catch(() => {});
-              .play()
-              .then(() => {
-                started = true;
-              })
-              .catch(() => {});
           }
         }
 
-        muteBtn.addEventListener("click", () => {
+        muteBtn.addEventListener("click", () => { muted = !muted; applyMute(); });
-          muted = !muted;
-          applyMute();
-        });
 
         vol.addEventListener("input", () => {
           audio.volume = parseFloat(vol.value);
           localStorage.setItem("dok_vol", vol.value);
-          if (parseFloat(vol.value) > 0 && muted) {
+          if (parseFloat(vol.value) > 0 && muted) { muted = false; applyMute(); }
-            muted = false;
-            applyMute();
-          }
           muteBtn.textContent = parseFloat(vol.value) === 0 ? "🔇" : "🔊";
         });
 
@@ -979,12 +432,7 @@
 
         function tryResume() {
           if (!muted && (audio.paused || !started)) {
-            audio
+            audio.play().then(() => { started = true; }).catch(() => {});
-              .play()
-              .then(() => {
-                started = true;
-              })
-              .catch(() => {});
           }
         }
         document.addEventListener("click", tryResume);
@@ -1006,11 +454,7 @@
     </script>
 
     <script>
-      window.showNotification = function (
+      window.showNotification = function (message, title = "Hinweis", icon = "⚔️") {
-        message,
-        title = "Hinweis",
-        icon = "⚔️",
-      ) {
         document.getElementById("notification-message").textContent = message;
         document.getElementById("notification-title").textContent  = title;
         document.getElementById("notification-icon").textContent   = icon;