diff --git a/app.js b/app.js
index 04b7e31..8df9010 100644
--- a/app.js
+++ b/app.js
@@ -1,4 +1,4 @@
-require("dotenv").config();
+require("dotenv").config();
 
 const express = require("express");
 const path = require("path");
@@ -21,8 +21,8 @@ const avatar = require("./routes/avatar");
 const equip = require("./routes/equip");
 const equipment = require("./routes/equipment");
 const blackmarket = require("./routes/blackmarket");
-const mineRoute = require("./routes/mine_route");
-const arenaRoutes = require("./routes/routes_arena");
+const mineRoute = require("./routes/mine");
+const arenaRoutes = require("./routes/arena");
 const { registerArenaHandlers } = require("./sockets/arena");
 const { registerChatHandlers }  = require("./sockets/chat");
 
diff --git a/public/css/building.css b/public/css/building.css
index 75d3978..faad0d6 100644
--- a/public/css/building.css
+++ b/public/css/building.css
@@ -1,3 +1,9 @@
+/* ================================================
+   building.css  –  Charakter, Equipment, Inventar
+   Dynasty of Knights
+   Popup/Tooltip/Notification → popup.css
+================================================ */
+
 /* =========================
    Base
 ========================= */
@@ -27,195 +33,6 @@ body {
   box-shadow: 0 0 6px #3cff3c;
 }
 
-/* =========================
-   Popup Fenster
-========================= */
-
-.building-popup {
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-
-  width: 900px;
-  max-width: 90vw;
-  max-height: 1000px;
-
-  background: url("/images/parchment.png") center / cover no-repeat;
-
-  border: 4px solid #6b4b2a;
-  border-radius: 10px;
-
-  box-shadow:
-    0 0 40px rgba(0, 0, 0, 0.9),
-    inset 0 0 25px rgba(0, 0, 0, 0.5);
-
-  display: none;
-  flex-direction: column;
-  z-index: 1000;
-
-  animation: popupFade 0.25s ease;
-}
-
-.building-popup.active {
-  display: flex;
-}
-
-/* =========================
-   Popup Header
-========================= */
-
-.popup-header {
-  padding: 14px;
-  font-family: "Tangerine", serif;
-  font-size: 36px;
-
-  background: linear-gradient(#6b4b2a, #3c2414);
-
-  border-bottom: 2px solid #8b6a3c;
-
-  display: flex;
-  justify-content: space-between;
-
-  color: #f0d9a6;
-  text-shadow: 0 2px 4px black;
-}
-
-.popup-header span {
-  cursor: pointer;
-}
-
-/* =========================
-   Tabs
-========================= */
-
-.popup-tabs {
-  display: flex;
-  border-bottom: 2px solid #8b6a3c;
-}
-
-.popup-tabs button {
-  flex: 1;
-  padding: 10px;
-
-  font-family: "Cinzel", serif;
-  font-weight: bold;
-
-  background: linear-gradient(#5c3b20, #3a2513);
-
-  border: 1px solid #8b6a3c;
-  color: #e7d9b4;
-
-  cursor: pointer;
-  transition: 0.2s;
-}
-
-.popup-tabs button:hover {
-  background: linear-gradient(#8b6a3c, #5c3b20);
-}
-
-.popup-tabs button.active {
-  background: linear-gradient(#d4b97a, #9c7a3a);
-  color: #2b1b0f;
-}
-
-/* =========================
-   Popup Inhalt
-========================= */
-
-.popup-content {
-  padding: 16px 60px 16px 60px;
-
-  font-size: 15px;
-  line-height: 1.6;
-  letter-spacing: 0.5px;
-
-  background: rgba(255, 255, 255, 0.08);
-  border-radius: 6px;
-
-  color: #2b1b0f;
-
-  overflow-y: auto;
-  flex: 1;
-}
-
-.popup-content h3 {
-  font-family: "Tangerine", serif;
-  font-size: 32px;
-  color: #3b2412;
-  margin-top: 0;
-}
-
-.popup-content p {
-  color: #3a2413;
-}
-
-/* =========================
-   Tab Inhalte
-========================= */
-
-.tab-content {
-  display: none;
-}
-
-.tab-content.active {
-  display: block;
-}
-
-/* =========================
-   Buttons
-========================= */
-
-.popup-content button {
-  margin-top: 10px;
-
-  background: linear-gradient(#7a5a2a, #caa24b);
-
-  border: 1px solid #e0c67b;
-  padding: 10px 18px;
-
-  color: #1a1206;
-  font-weight: bold;
-
-  cursor: pointer;
-  transition: 0.2s;
-}
-
-.popup-content button:hover {
-  transform: scale(1.05);
-  box-shadow:
-    0 0 10px #ffd66b,
-    0 0 25px #caa24b;
-}
-
-/* =========================
-   Tooltip
-========================= */
-
-#map-tooltip {
-  position: fixed;
-  pointer-events: none;
-
-  background: rgba(0, 0, 0, 0.85);
-  color: #fff;
-
-  padding: 8px 12px;
-  border-radius: 6px;
-
-  font-size: 14px;
-
-  display: none;
-  z-index: 9999;
-
-  max-width: 200px;
-
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
-}
-
-#map-tooltip strong {
-  color: #ffd700;
-}
-
 /* =========================
    Character Window
 ========================= */
@@ -601,127 +418,6 @@ body {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
 }
 
-/* =========================
-   Game Notification
-========================= */
-
-#game-notification {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(0.85);
-
-  z-index: 9999;
-
-  width: 360px;
-  max-width: 90vw;
-
-  background: url("/images/parchment.png") center / cover no-repeat;
-
-  border: 3px solid #6b4b2a;
-  border-radius: 10px;
-
-  box-shadow:
-    0 0 40px rgba(0, 0, 0, 0.9),
-    inset 0 0 20px rgba(0, 0, 0, 0.4);
-
-  display: none;
-  opacity: 0;
-
-  transition:
-    opacity 0.2s ease,
-    transform 0.2s ease;
-}
-
-#game-notification.show {
-  display: block;
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
-}
-
-.notification-header {
-  padding: 12px 16px;
-
-  background: linear-gradient(#6b4b2a, #3c2414);
-  border-bottom: 2px solid #8b6a3c;
-  border-radius: 7px 7px 0 0;
-
-  font-family: "Tangerine", serif;
-  font-size: 28px;
-  color: #f0d9a6;
-  text-shadow: 0 2px 4px black;
-
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.notification-body {
-  padding: 20px 20px 10px 20px;
-
-  font-family: "Cinzel", serif;
-  font-size: 15px;
-  color: #2b1b0f;
-  line-height: 1.8;
-  text-align: center;
-  white-space: pre-line;
-}
-
-.notification-footer {
-  padding: 10px 20px 16px 20px;
-  display: flex;
-  justify-content: center;
-}
-
-.notification-btn {
-  padding: 8px 28px !important;
-  font-size: 14px !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;
-}
-
-.notification-btn:hover {
-  transform: scale(1.05);
-  box-shadow:
-    0 0 10px #ffd66b,
-    0 0 20px #caa24b;
-}
-
-#game-notification-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 9998;
-  display: none;
-}
-
-#game-notification-overlay.show {
-  display: block;
-}
-
-/* =========================
-   Animation
-========================= */
-
-@keyframes popupFade {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -40%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%);
-  }
-}
-
 /* =========================
    Schwarzmarkt Tabs
 ========================= */
diff --git a/public/css/hud.css b/public/css/hud.css
index 2ca23dd..ce37e12 100644
--- a/public/css/hud.css
+++ b/public/css/hud.css
@@ -206,108 +206,24 @@
 }
 
 .hud-res-icon {
-  font-size: 0;           /* Emoji unsichtbar */
+  font-size: 0; /* Emoji unsichtbar */
   color: transparent;
   display: inline-block;
   width: 20px;
   height: 20px;
   flex-shrink: 0;
-  background: url("/images/items/blauer%20cristal.png") center / contain no-repeat;
+  background: url("/images/items/blauer%20cristal.png") center / contain
+    no-repeat;
   filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
   vertical-align: middle;
 }
 
-/* Blauer Kristall / Gems – Bild aus der Datenbank */
-.hud-res-icon-gem {
-  width: 28px;
-  height: 28px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.hud-res-icon-gem img {
-  width: 28px;
-  height: 28px;
-  object-fit: contain;
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
-  display: block;
-}
-
-/* Silbermünze – Bild aus der Datenbank */
-.hud-res-icon-silver {
-  width: 28px;
-  height: 28px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.hud-res-icon-silver img {
-  width: 28px;
-  height: 28px;
-  object-fit: contain;
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
-  display: block;
-}
-
-/* Holz – Bild aus der Datenbank */
-.hud-res-icon-wood {
-  width: 28px;
-  height: 28px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.hud-res-icon-wood img {
-  width: 28px;
-  height: 28px;
-  object-fit: contain;
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
-  display: block;
-}
-
-/* Stein – Bild aus der Datenbank */
-.hud-res-icon-stone {
-  width: 28px;
-  height: 28px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.hud-res-icon-stone img {
-  width: 28px;
-  height: 28px;
-  object-fit: contain;
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
-  display: block;
-}
-
-/* Goldmünze – Bild aus der Datenbank */
-.hud-res-icon-gold {
-  width: 28px;
-  height: 28px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.hud-res-icon-gold img {
-  width: 28px;
-  height: 28px;
-  object-fit: contain;
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
-  display: block;
-}
-
-/* Eisen – Bild aus der Datenbank */
+/* Ressource Icons (gem, silver, wood, stone, gold, iron) – einheitliche Größe */
+.hud-res-icon-gem,
+.hud-res-icon-silver,
+.hud-res-icon-wood,
+.hud-res-icon-stone,
+.hud-res-icon-gold,
 .hud-res-icon-iron {
   width: 28px;
   height: 28px;
@@ -317,6 +233,11 @@
   justify-content: center;
 }
 
+.hud-res-icon-gem img,
+.hud-res-icon-silver img,
+.hud-res-icon-wood img,
+.hud-res-icon-stone img,
+.hud-res-icon-gold img,
 .hud-res-icon-iron img {
   width: 28px;
   height: 28px;
@@ -376,6 +297,6 @@
   height: 18px;
   object-fit: contain;
   vertical-align: middle;
-  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
   display: inline-block;
 }
diff --git a/public/css/launcher-dev.css b/public/css/launcher-dev.css
new file mode 100644
index 0000000..c806312
--- /dev/null
+++ b/public/css/launcher-dev.css
@@ -0,0 +1,31 @@
+/* ================================================
+   launcher-dev.css  –  Map Developer Tool
+   Dynasty of Knights
+================================================ */
+
+body {
+  margin: 0;
+  background: #000;
+  display: flex;
+  justify-content: center;
+}
+
+.wrapper {
+  position: relative;
+}
+
+img {
+  display: block;
+}
+
+svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+polygon {
+  fill: rgba(255, 0, 0, 0.35);
+  stroke: red;
+  stroke-width: 2;
+}
diff --git a/public/css/launcher.css b/public/css/launcher.css
index bc0379c..deb5405 100644
--- a/public/css/launcher.css
+++ b/public/css/launcher.css
@@ -171,3 +171,54 @@
   margin-right: 6px;
   box-shadow: 0 0 6px #3cff3c;
 }
+
+/* ── Music Control ─────────────────────────────── */
+#music-control {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(10, 5, 0, 0.85);
+  border: 1px solid #c8960c;
+  border-radius: 8px;
+  padding: 6px 10px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
+}
+
+#music-mute-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+  padding: 0;
+  color: #f0d080;
+  transition: transform 0.15s;
+}
+
+#music-mute-btn:hover {
+  transform: scale(1.2);
+}
+
+#music-volume {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 80px;
+  height: 4px;
+  background: #3a2000;
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+
+#music-volume::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #c8960c;
+  cursor: pointer;
+}
diff --git a/public/css/login.css b/public/css/login.css
new file mode 100644
index 0000000..16a68ad
--- /dev/null
+++ b/public/css/login.css
@@ -0,0 +1,165 @@
+/* ================================================
+   login.css  –  Login-Seite & Register-Seite
+   Dynasty of Knights
+================================================ */
+
+/* ── Base ──────────────────────────────────────── */
+* {
+  box-sizing: border-box;
+  font-family: "Tangerine", serif;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: url("/images/background_login.png") center / cover no-repeat fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* ── Nebel ─────────────────────────────────────── */
+.fog {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 40%;
+  z-index: 0;
+  pointer-events: none;
+}
+
+@keyframes fogmove {
+  0%   { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
+/* ── Login Panel ───────────────────────────────── */
+.launcher {
+  width: 380px;
+  padding: 30px;
+  position: relative;
+  z-index: 2;
+  font-family: "Tangerine", serif;
+  font-size: 16px;
+  background: rgba(10, 15, 20, 0.75);
+  backdrop-filter: blur(10px);
+  border-radius: 10px;
+  border: 1px solid rgba(100, 170, 255, 0.4);
+  box-shadow:
+    0 0 40px rgba(0, 0, 0, 0.8),
+    0 0 20px rgba(70, 120, 255, 0.5);
+}
+
+/* ── Register Box ──────────────────────────────── */
+.register-box {
+  width: 380px;
+  padding: 30px;
+  background: rgba(10, 15, 20, 0.8);
+  border-radius: 10px;
+  border: 1px solid rgba(100, 170, 255, 0.4);
+  box-shadow:
+    0 0 40px rgba(0, 0, 0, 0.8),
+    0 0 20px rgba(70, 120, 255, 0.5);
+}
+
+/* ── Charakter Box ─────────────────────────────── */
+.box {
+  background: rgba(0, 0, 0, 0.7);
+  padding: 40px;
+  border-radius: 10px;
+  text-align: center;
+  width: 400px;
+}
+
+/* ── Inputs / Selects / Buttons ────────────────── */
+input,
+select,
+button,
+.register,
+.server-status {
+  width: 100%;
+  padding: 13px;
+  font-size: 24px;
+  margin-bottom: 15px;
+  font-family: "Tangerine", serif;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 6px;
+  color: white;
+}
+
+/* ── Login Button ──────────────────────────────── */
+.login {
+  width: 100%;
+  padding: 14px;
+  font-size: 32px;
+  background: linear-gradient(45deg, #3da2ff, #7dd3ff);
+  border: none;
+  border-radius: 6px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: 0.25s;
+}
+
+.login:hover {
+  transform: scale(1.05);
+  box-shadow:
+    0 0 20px #4aa3ff,
+    0 0 40px #4aa3ff;
+}
+
+/* ── Register Link ─────────────────────────────── */
+.register {
+  display: block;
+  text-align: center;
+  margin-top: 10px;
+  color: #ccc;
+  text-decoration: none;
+}
+
+.register:hover {
+  color: white;
+}
+
+/* ── Zurück Link ───────────────────────────────── */
+.back {
+  display: block;
+  text-align: center;
+  color: #ccc;
+  margin-top: 10px;
+  text-decoration: none;
+}
+
+.back:hover {
+  color: white;
+}
+
+/* ── Server Status Box ─────────────────────────── */
+.server-status {
+  margin-top: 18px;
+  font-size: 24px;
+  padding: 10px;
+  background: rgba(0, 0, 0, 0.45);
+  border-radius: 6px;
+}
+
+.online { color: #3cff5a; }
+.offline { color: #ff4b4b; }
+
+/* ── Fehler-Meldung ────────────────────────────── */
+.error {
+  color: red;
+  margin-bottom: 15px;
+}
+
+/* ── Charakter-Seite: Input/Button ─────────────── */
+.box input,
+.box button {
+  width: 100%;
+  padding: 14px;
+  margin-top: 10px;
+  border-radius: 6px;
+  border: none;
+  box-sizing: border-box;
+}
diff --git a/public/css/mine.css b/public/css/mine.css
index b8ab3b8..785314d 100644
--- a/public/css/mine.css
+++ b/public/css/mine.css
@@ -68,7 +68,9 @@
   border: 1px solid rgba(122, 90, 26, 0.3);
   border-radius: 6px;
   padding: 7px 12px;
-  transition: border-color 0.2s, background 0.2s;
+  transition:
+    border-color 0.2s,
+    background 0.2s;
 }
 
 .mine-resource-row.mine-resource-ready {
@@ -85,97 +87,12 @@
   justify-content: center;
 }
 
-/* Blauer Kristall / Gems – Bild aus der Datenbank */
-.mine-resource-icon-gem {
-  width: 100px;
-  height: 100px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mine-resource-icon-gem img {
-  width: 100px;
-  height: 100px;
-  object-fit: contain;
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
-  display: block;
-}
-
-/* Silbermünze – Bild aus der Datenbank */
-.mine-resource-icon-silver {
-  width: 100px;
-  height: 100px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mine-resource-icon-silver img {
-  width: 100px;
-  height: 100px;
-  object-fit: contain;
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
-  display: block;
-}
-
-/* Holz – Bild aus der Datenbank */
-.mine-resource-icon-wood {
-  width: 100px;
-  height: 100px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mine-resource-icon-wood img {
-  width: 100px;
-  height: 100px;
-  object-fit: contain;
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
-  display: block;
-}
-
-/* Stein – Bild aus der Datenbank */
-.mine-resource-icon-stone {
-  width: 100px;
-  height: 100px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mine-resource-icon-stone img {
-  width: 100px;
-  height: 100px;
-  object-fit: contain;
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
-  display: block;
-}
-
-/* Goldmünze – Bild aus der Datenbank */
-.mine-resource-icon-gold {
-  width: 100px;
-  height: 100px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mine-resource-icon-gold img {
-  width: 100px;
-  height: 100px;
-  object-fit: contain;
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
-  display: block;
-}
-
-/* Eisen – Bild aus der Datenbank */
+/* Ressource Icons (gem, silver, wood, stone, gold, iron) – einheitliche Größe */
+.mine-resource-icon-gem,
+.mine-resource-icon-silver,
+.mine-resource-icon-wood,
+.mine-resource-icon-stone,
+.mine-resource-icon-gold,
 .mine-resource-icon-iron {
   width: 100px;
   height: 100px;
@@ -185,6 +102,11 @@
   justify-content: center;
 }
 
+.mine-resource-icon-gem img,
+.mine-resource-icon-silver img,
+.mine-resource-icon-wood img,
+.mine-resource-icon-stone img,
+.mine-resource-icon-gold img,
 .mine-resource-icon-iron img {
   width: 100px;
   height: 100px;
@@ -253,7 +175,9 @@
   font-weight: bold;
   cursor: pointer;
   letter-spacing: 0.04em;
-  transition: filter 0.15s, transform 0.1s;
+  transition:
+    filter 0.15s,
+    transform 0.1s;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
   width: 100%;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
@@ -291,8 +215,13 @@
 }
 
 @keyframes minePulse {
-  0%, 100% { opacity: 1; }
-  50%       { opacity: 0.45; }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
 }
 
 .mine-error {
diff --git a/public/js/buildings/schwarzmarkt.js b/public/js/buildings/blackmarket.js
similarity index 97%
rename from public/js/buildings/schwarzmarkt.js
rename to public/js/buildings/blackmarket.js
index b846a48..e628a51 100644
--- a/public/js/buildings/schwarzmarkt.js
+++ b/public/js/buildings/blackmarket.js
@@ -1,6 +1,6 @@
-import { showNotification } from "../notification.js";
+import { showNotification } from "../notification.js";
 
-export async function loadSchwarzmarkt() {
+export async function loadBlackmarket() {
   const ui = document.querySelector(".building-ui");
 
   ui.innerHTML = `
diff --git a/public/js/buildings/wohnhaus.js b/public/js/buildings/character-house.js
similarity index 99%
rename from public/js/buildings/wohnhaus.js
rename to public/js/buildings/character-house.js
index f99d9d6..52ca111 100644
--- a/public/js/buildings/wohnhaus.js
+++ b/public/js/buildings/character-house.js
@@ -3,7 +3,7 @@ const slotsPerPage = 32;
 let inventoryItems = [];
 let totalInventoryPages = 1;
 
-export async function loadWohnhaus() {
+export async function loadCharacterHouse() {
   const ui = document.querySelector(".building-ui");
 
   ui.innerHTML = `
diff --git a/public/js/map-ui.js b/public/js/map-ui.js
index c2a9502..16cc4ce 100644
--- a/public/js/map-ui.js
+++ b/public/js/map-ui.js
@@ -1,5 +1,5 @@
-import { loadWohnhaus } from "./buildings/wohnhaus.js";
-import { loadSchwarzmarkt } from "./buildings/schwarzmarkt.js";
+import { loadCharacterHouse } from "./buildings/character-house.js";
+import { loadBlackmarket } from "./buildings/blackmarket.js";
 import { loadMine } from "./buildings/mine.js";
 const popup = document.getElementById("building-popup");
 const title = document.getElementById("popup-title");
@@ -8,8 +8,8 @@ const tooltip = document.getElementById("map-tooltip");
 const tooltipCache = {};
 
 const buildingModules = {
-  11: loadWohnhaus,   // Tabs ausblenden, eigenes UI
-  12: loadSchwarzmarkt, // Tabs ausblenden, eigenes UI
+  11: loadCharacterHouse,   // Tabs ausblenden, eigenes UI
+  12: loadBlackmarket, // Tabs ausblenden, eigenes UI
   10: loadMine,       // Tabs bleiben sichtbar, nur Aktionen-Tab befüllen
 };
 
@@ -70,7 +70,7 @@ document.querySelectorAll(".building").forEach((building) => {
   <div class="popup-info-title">${data.name}</div>
   <div class="popup-stat-row"><span class="popup-stat-key">Level</span><span class="popup-stat-val">${data.level}</span></div>
   <div class="popup-stat-row"><span class="popup-stat-key">Punkte</span><span class="popup-stat-val">${data.points} / ${data.nextLevelPoints}</span></div>
-  <p class="popup-desc">${data.description}</p>
+  <p class="popup-desc" style="color:#cccccc !important;font-size:13px;line-height:1.8;">${data.description}</p>
   <div class="popup-xp-wrap">
     <div class="popup-xp-label">Fortschritt zum nächsten Level</div>
     <div class="popup-xp-track">
diff --git a/public/js/quickmenu.js b/public/js/quickmenu.js
index 62c6da8..1f0663b 100644
--- a/public/js/quickmenu.js
+++ b/public/js/quickmenu.js
@@ -1,26 +1,26 @@
-import { loadGlucksbox } from "./quickmenu/glucksbox.js";
+import { loadLuckyBox } from "./quickmenu/lucky-box.js";
 import { loadEvents } from "./quickmenu/events.js";
-import { loadHeldenbonus } from "./quickmenu/heldenbonus.js";
-import { loadSealedliga } from "./quickmenu/sealedliga.js";
-import { loadBeschwoerer } from "./quickmenu/beschwoerer.js";
+import { loadHeroBonus } from "./quickmenu/hero-bonus.js";
+import { loadSealedLeague } from "./quickmenu/sealed-league.js";
+import { loadSummoner } from "./quickmenu/summoner.js";
 import { loadOnlinebonus } from "./quickmenu/onlinebonus.js";
-import { loadAktionen } from "./quickmenu/aktionen.js";
-import { loadBasar } from "./quickmenu/basar.js";
-import { loadBoosteraktion } from "./quickmenu/boosteraktion.js";
-import { loadBoosterjagd } from "./quickmenu/boosterjagd.js";
+import { loadActions } from "./quickmenu/actions.js";
+import { loadBazaar } from "./quickmenu/bazaar.js";
+import { loadBoosterAction } from "./quickmenu/booster-action.js";
+import { loadBoosterHunt } from "./quickmenu/booster-hunt.js";
 
 /* Popup-ID → Loader Funktion */
 const popupLoaders = {
-  "qm-popup-glucksbox": loadGlucksbox,
+  "qm-popup-glucksbox": loadLuckyBox,
   "qm-popup-events": loadEvents,
-  "qm-popup-heldenbonus": loadHeldenbonus,
-  "qm-popup-sealedliga": loadSealedliga,
-  "qm-popup-beschwoerer": loadBeschwoerer,
+  "qm-popup-heldenbonus": loadHeroBonus,
+  "qm-popup-sealedliga": loadSealedLeague,
+  "qm-popup-beschwoerer": loadSummoner,
   "qm-popup-onlinebonus": loadOnlinebonus,
-  "qm-popup-aktionen": loadAktionen,
-  "qm-popup-basar": loadBasar,
-  "qm-popup-boosteraktion": loadBoosteraktion,
-  "qm-popup-boosterjagd": loadBoosterjagd,
+  "qm-popup-aktionen": loadActions,
+  "qm-popup-basar": loadBazaar,
+  "qm-popup-boosteraktion": loadBoosterAction,
+  "qm-popup-boosterjagd": loadBoosterHunt,
 };
 
 /* ================================
diff --git a/public/js/quickmenu/aktionen.js b/public/js/quickmenu/actions.js
similarity index 76%
rename from public/js/quickmenu/aktionen.js
rename to public/js/quickmenu/actions.js
index b0511b2..1e67dd3 100644
--- a/public/js/quickmenu/aktionen.js
+++ b/public/js/quickmenu/actions.js
@@ -1,4 +1,4 @@
-export async function loadAktionen() {
+export async function loadActions() {
   const body = document.getElementById("qm-body-aktionen");
   if (!body) return;
 
diff --git a/public/js/quickmenu/basar.js b/public/js/quickmenu/bazaar.js
similarity index 77%
rename from public/js/quickmenu/basar.js
rename to public/js/quickmenu/bazaar.js
index 6a0c775..2e9651d 100644
--- a/public/js/quickmenu/basar.js
+++ b/public/js/quickmenu/bazaar.js
@@ -1,4 +1,4 @@
-export async function loadBasar() {
+export async function loadBazaar() {
   const body = document.getElementById("qm-body-basar");
   if (!body) return;
 
diff --git a/public/js/quickmenu/boosteraktion.js b/public/js/quickmenu/booster-action.js
similarity index 75%
rename from public/js/quickmenu/boosteraktion.js
rename to public/js/quickmenu/booster-action.js
index 12f7fb4..5eb5081 100644
--- a/public/js/quickmenu/boosteraktion.js
+++ b/public/js/quickmenu/booster-action.js
@@ -1,4 +1,4 @@
-export async function loadBoosteraktion() {
+export async function loadBoosterAction() {
   const body = document.getElementById("qm-body-boosteraktion");
   if (!body) return;
 
diff --git a/public/js/quickmenu/boosterjagd.js b/public/js/quickmenu/booster-hunt.js
similarity index 75%
rename from public/js/quickmenu/boosterjagd.js
rename to public/js/quickmenu/booster-hunt.js
index ecd7317..44b2865 100644
--- a/public/js/quickmenu/boosterjagd.js
+++ b/public/js/quickmenu/booster-hunt.js
@@ -1,4 +1,4 @@
-export async function loadBoosterjagd() {
+export async function loadBoosterHunt() {
   const body = document.getElementById("qm-body-boosterjagd");
   if (!body) return;
 
diff --git a/public/js/quickmenu/heldenbonus.js b/public/js/quickmenu/hero-bonus.js
similarity index 76%
rename from public/js/quickmenu/heldenbonus.js
rename to public/js/quickmenu/hero-bonus.js
index c7e67bd..8308887 100644
--- a/public/js/quickmenu/heldenbonus.js
+++ b/public/js/quickmenu/hero-bonus.js
@@ -1,4 +1,4 @@
-export async function loadHeldenbonus() {
+export async function loadHeroBonus() {
   const body = document.getElementById("qm-body-heldenbonus");
   if (!body) return;
 
diff --git a/public/js/quickmenu/glucksbox.js b/public/js/quickmenu/lucky-box.js
similarity index 76%
rename from public/js/quickmenu/glucksbox.js
rename to public/js/quickmenu/lucky-box.js
index 3089821..1cf9060 100644
--- a/public/js/quickmenu/glucksbox.js
+++ b/public/js/quickmenu/lucky-box.js
@@ -1,4 +1,4 @@
-export async function loadGlucksbox() {
+export async function loadLuckyBox() {
   const body = document.getElementById("qm-body-glucksbox");
   if (!body) return;
 
diff --git a/public/js/quickmenu/sealedliga.js b/public/js/quickmenu/sealed-league.js
similarity index 75%
rename from public/js/quickmenu/sealedliga.js
rename to public/js/quickmenu/sealed-league.js
index ed4aca4..a4d74c8 100644
--- a/public/js/quickmenu/sealedliga.js
+++ b/public/js/quickmenu/sealed-league.js
@@ -1,4 +1,4 @@
-export async function loadSealedliga() {
+export async function loadSealedLeague() {
   const body = document.getElementById("qm-body-sealedliga");
   if (!body) return;
 
diff --git a/public/js/quickmenu/beschwoerer.js b/public/js/quickmenu/summoner.js
similarity index 76%
rename from public/js/quickmenu/beschwoerer.js
rename to public/js/quickmenu/summoner.js
index bf93e66..1ba074b 100644
--- a/public/js/quickmenu/beschwoerer.js
+++ b/public/js/quickmenu/summoner.js
@@ -1,4 +1,4 @@
-export async function loadBeschwoerer() {
+export async function loadSummoner() {
   const body = document.getElementById("qm-body-beschwoerer");
   if (!body) return;
 
diff --git a/rename-all.ps1 b/rename-all.ps1
new file mode 100644
index 0000000..2b72268
--- /dev/null
+++ b/rename-all.ps1
@@ -0,0 +1,215 @@
+# ============================================================
+#  Dynasty of Knights — Datei-Umbenennung (Windows PowerShell)
+#  Ausfuehren im ROOT-Verzeichnis des Projekts:  .\rename-all.ps1
+# ============================================================
+
+Write-Host "Starte Umbenennung..." -ForegroundColor Cyan
+
+# ============================================================
+#  1. BACKEND ROUTES
+# ============================================================
+
+Rename-Item "routes\mine_route.js"   "mine.js"
+Rename-Item "routes\routes_arena.js" "arena.js"
+
+Write-Host "Backend-Routes umbenannt" -ForegroundColor Green
+
+# ============================================================
+#  2. FRONTEND — BUILDING-MODULE
+# ============================================================
+
+Rename-Item "public\js\buildings\schwarzmarkt.js" "blackmarket.js"
+Rename-Item "public\js\buildings\wohnhaus.js"      "character-house.js"
+
+Write-Host "Building-Module umbenannt" -ForegroundColor Green
+
+# ============================================================
+#  3. FRONTEND — QUICKMENU-MODULE
+# ============================================================
+
+Rename-Item "public\js\quickmenu\glucksbox.js"     "lucky-box.js"
+Rename-Item "public\js\quickmenu\heldenbonus.js"   "hero-bonus.js"
+Rename-Item "public\js\quickmenu\sealedliga.js"    "sealed-league.js"
+Rename-Item "public\js\quickmenu\beschwoerer.js"   "summoner.js"
+Rename-Item "public\js\quickmenu\aktionen.js"      "actions.js"
+Rename-Item "public\js\quickmenu\basar.js"         "bazaar.js"
+Rename-Item "public\js\quickmenu\boosteraktion.js" "booster-action.js"
+Rename-Item "public\js\quickmenu\boosterjagd.js"   "booster-hunt.js"
+
+Write-Host "Quickmenu-Module umbenannt" -ForegroundColor Green
+
+# ============================================================
+#  4. VIEW-TEMPLATE
+# ============================================================
+
+Rename-Item "views\1v1_spielfeld.ejs" "1v1-battlefield.ejs"
+
+Write-Host "EJS-Template umbenannt" -ForegroundColor Green
+
+Write-Host ""
+Write-Host "Starte Code-Aenderungen..." -ForegroundColor Cyan
+
+# ============================================================
+#  HILFSFUNKTION: Text in Datei ersetzen
+# ============================================================
+
+function Replace-InFile($path, $oldText, $newText) {
+    $content = Get-Content $path -Raw -Encoding UTF8
+    $updated = $content -replace [regex]::Escape($oldText), $newText
+    Set-Content $path $updated -Encoding UTF8 -NoNewline
+}
+
+# ============================================================
+#  app.js
+# ============================================================
+
+Replace-InFile "app.js" `
+    'require("./routes/mine_route")' `
+    'require("./routes/mine")'
+
+Replace-InFile "app.js" `
+    'require("./routes/routes_arena")' `
+    'require("./routes/arena")'
+
+Write-Host "app.js aktualisiert" -ForegroundColor Green
+
+# ============================================================
+#  routes\arena.js  (ehem. routes_arena.js)
+# ============================================================
+
+Replace-InFile "routes\arena.js" `
+    'res.render("1v1_spielfeld"' `
+    'res.render("1v1-battlefield"'
+
+Write-Host "routes\arena.js aktualisiert" -ForegroundColor Green
+
+# ============================================================
+#  public\js\buildings\character-house.js
+# ============================================================
+
+Replace-InFile "public\js\buildings\character-house.js" `
+    'export async function loadWohnhaus' `
+    'export async function loadCharacterHouse'
+
+Write-Host "character-house.js aktualisiert" -ForegroundColor Green
+
+# ============================================================
+#  public\js\buildings\blackmarket.js
+# ============================================================
+
+Replace-InFile "public\js\buildings\blackmarket.js" `
+    'export async function loadSchwarzmarkt' `
+    'export async function loadBlackmarket'
+
+Write-Host "blackmarket.js aktualisiert" -ForegroundColor Green
+
+# ============================================================
+#  public\js\map-ui.js
+# ============================================================
+
+Replace-InFile "public\js\map-ui.js" `
+    'import { loadWohnhaus } from "./buildings/wohnhaus.js"' `
+    'import { loadCharacterHouse } from "./buildings/character-house.js"'
+
+Replace-InFile "public\js\map-ui.js" `
+    'import { loadSchwarzmarkt } from "./buildings/schwarzmarkt.js"' `
+    'import { loadBlackmarket } from "./buildings/blackmarket.js"'
+
+Replace-InFile "public\js\map-ui.js" `
+    'loadWohnhaus' `
+    'loadCharacterHouse'
+
+Replace-InFile "public\js\map-ui.js" `
+    'loadSchwarzmarkt' `
+    'loadBlackmarket'
+
+Write-Host "map-ui.js aktualisiert" -ForegroundColor Green
+
+# ============================================================
+#  Quickmenu-Dateien — Funktionsnamen
+# ============================================================
+
+Replace-InFile "public\js\quickmenu\lucky-box.js"     'export async function loadGlucksbox'    'export async function loadLuckyBox'
+Replace-InFile "public\js\quickmenu\hero-bonus.js"    'export async function loadHeldenbonus'  'export async function loadHeroBonus'
+Replace-InFile "public\js\quickmenu\sealed-league.js" 'export async function loadSealedliga'   'export async function loadSealedLeague'
+Replace-InFile "public\js\quickmenu\summoner.js"      'export async function loadBeschwoerer'  'export async function loadSummoner'
+Replace-InFile "public\js\quickmenu\actions.js"       'export async function loadAktionen'     'export async function loadActions'
+Replace-InFile "public\js\quickmenu\bazaar.js"        'export async function loadBasar'        'export async function loadBazaar'
+Replace-InFile "public\js\quickmenu\booster-action.js" 'export async function loadBoosteraktion' 'export async function loadBoosterAction'
+Replace-InFile "public\js\quickmenu\booster-hunt.js"  'export async function loadBoosterjagd'  'export async function loadBoosterHunt'
+
+Write-Host "Quickmenu-Funktionsnamen aktualisiert" -ForegroundColor Green
+
+# ============================================================
+#  public\js\quickmenu.js — Imports + Funktionsreferenzen
+# ============================================================
+
+Replace-InFile "public\js\quickmenu.js" `
+    'import { loadGlucksbox } from "./quickmenu/glucksbox.js"' `
+    'import { loadLuckyBox } from "./quickmenu/lucky-box.js"'
+
+Replace-InFile "public\js\quickmenu.js" `
+    'import { loadHeldenbonus } from "./quickmenu/heldenbonus.js"' `
+    'import { loadHeroBonus } from "./quickmenu/hero-bonus.js"'
+
+Replace-InFile "public\js\quickmenu.js" `
+    'import { loadSealedliga } from "./quickmenu/sealedliga.js"' `
+    'import { loadSealedLeague } from "./quickmenu/sealed-league.js"'
+
+Replace-InFile "public\js\quickmenu.js" `
+    'import { loadBeschwoerer } from "./quickmenu/beschwoerer.js"' `
+    'import { loadSummoner } from "./quickmenu/summoner.js"'
+
+Replace-InFile "public\js\quickmenu.js" `
+    'import { loadAktionen } from "./quickmenu/aktionen.js"' `
+    'import { loadActions } from "./quickmenu/actions.js"'
+
+Replace-InFile "public\js\quickmenu.js" `
+    'import { loadBasar } from "./quickmenu/basar.js"' `
+    'import { loadBazaar } from "./quickmenu/bazaar.js"'
+
+Replace-InFile "public\js\quickmenu.js" `
+    'import { loadBoosteraktion } from "./quickmenu/boosteraktion.js"' `
+    'import { loadBoosterAction } from "./quickmenu/booster-action.js"'
+
+Replace-InFile "public\js\quickmenu.js" `
+    'import { loadBoosterjagd } from "./quickmenu/boosterjagd.js"' `
+    'import { loadBoosterHunt } from "./quickmenu/booster-hunt.js"'
+
+Replace-InFile "public\js\quickmenu.js" 'loadGlucksbox'    'loadLuckyBox'
+Replace-InFile "public\js\quickmenu.js" 'loadHeldenbonus'  'loadHeroBonus'
+Replace-InFile "public\js\quickmenu.js" 'loadSealedliga'   'loadSealedLeague'
+Replace-InFile "public\js\quickmenu.js" 'loadBeschwoerer'  'loadSummoner'
+Replace-InFile "public\js\quickmenu.js" 'loadAktionen'     'loadActions'
+Replace-InFile "public\js\quickmenu.js" 'loadBasar'        'loadBazaar'
+Replace-InFile "public\js\quickmenu.js" 'loadBoosteraktion' 'loadBoosterAction'
+Replace-InFile "public\js\quickmenu.js" 'loadBoosterjagd'  'loadBoosterHunt'
+
+Write-Host "quickmenu.js aktualisiert" -ForegroundColor Green
+
+# ============================================================
+#  ZUSAMMENFASSUNG
+# ============================================================
+
+Write-Host ""
+Write-Host "============================================================" -ForegroundColor Cyan
+Write-Host "  FERTIG! 12 Dateien umbenannt + alle Referenzen angepasst." -ForegroundColor Cyan
+Write-Host "============================================================" -ForegroundColor Cyan
+Write-Host ""
+Write-Host "Geaenderte Dateien:" -ForegroundColor Yellow
+Write-Host "  app.js"
+Write-Host "  routes\arena.js              (war: routes_arena.js)"
+Write-Host "  routes\mine.js               (war: mine_route.js)"
+Write-Host "  views\1v1-battlefield.ejs    (war: 1v1_spielfeld.ejs)"
+Write-Host "  public\js\map-ui.js"
+Write-Host "  public\js\quickmenu.js"
+Write-Host "  public\js\buildings\character-house.js   (war: wohnhaus.js)"
+Write-Host "  public\js\buildings\blackmarket.js        (war: schwarzmarkt.js)"
+Write-Host "  public\js\quickmenu\lucky-box.js          (war: glucksbox.js)"
+Write-Host "  public\js\quickmenu\hero-bonus.js         (war: heldenbonus.js)"
+Write-Host "  public\js\quickmenu\sealed-league.js      (war: sealedliga.js)"
+Write-Host "  public\js\quickmenu\summoner.js           (war: beschwoerer.js)"
+Write-Host "  public\js\quickmenu\actions.js            (war: aktionen.js)"
+Write-Host "  public\js\quickmenu\bazaar.js             (war: basar.js)"
+Write-Host "  public\js\quickmenu\booster-action.js     (war: boosteraktion.js)"
+Write-Host "  public\js\quickmenu\booster-hunt.js       (war: boosterjagd.js)"
diff --git a/routes/routes_arena.js b/routes/arena.js
similarity index 95%
rename from routes/routes_arena.js
rename to routes/arena.js
index 8726109..3f21142 100644
--- a/routes/routes_arena.js
+++ b/routes/arena.js
@@ -1,4 +1,4 @@
-const express = require("express");
+const express = require("express");
 const router = express.Router();
 const db = require("../database/database");
 
@@ -63,7 +63,7 @@ router.get("/1v1", requireLogin, async (req, res) => {
 
   // Kein matchId → direkte Vorschau ohne Matchmaking (z.B. für Tests)
   if (!matchId) {
-    return res.render("1v1_spielfeld", {
+    return res.render("1v1-battlefield", {
       title: "1v1 Kampf",
       matchId: null,
       mySlot: "player1",
@@ -102,7 +102,7 @@ router.get("/1v1", requireLogin, async (req, res) => {
 
     const isPlayer1 = slot === "player1";
 
-    res.render("1v1_spielfeld", {
+    res.render("1v1-battlefield", {
       title: "⚔️ 1v1 Kampf",
       matchId,
       mySlot: slot || "player1",
@@ -125,7 +125,7 @@ router.get("/1v1", requireLogin, async (req, res) => {
 ================================ */
 
 router.get("/2v2", (req, res) => {
-  res.render("1v1_spielfeld", {
+  res.render("1v1-battlefield", {
     title: "2v2 Kampf",
     matchId: null,
     mySlot: "player1",
@@ -144,7 +144,7 @@ router.get("/2v2", (req, res) => {
 ================================ */
 
 router.get("/4v4", (req, res) => {
-  res.render("1v1_spielfeld", {
+  res.render("1v1-battlefield", {
     title: "4v4 Kampf",
     matchId: null,
     mySlot: "player1",
diff --git a/routes/mine_route.js b/routes/mine.js
similarity index 100%
rename from routes/mine_route.js
rename to routes/mine.js
diff --git a/views/1v1_spielfeld.ejs b/views/1v1-battlefield.ejs
similarity index 100%
rename from views/1v1_spielfeld.ejs
rename to views/1v1-battlefield.ejs
diff --git a/views/create-character.ejs b/views/create-character.ejs
index 77453aa..68d95b2 100644
--- a/views/create-character.ejs
+++ b/views/create-character.ejs
@@ -1,57 +1,11 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-<meta charset="UTF-8">
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Charakter erstellen</title>
-
-<style>
-
-body{
-
-margin:0;
-height:100vh;
-
-background:url("/images/background_login.png") center / cover no-repeat;
-
-display:flex;
-justify-content:center;
-align-items:center;
-
-font-family:sans-serif;
-color:white;
-
-}
-
-.box{
-
-background:rgba(0,0,0,0.7);
-padding:40px;
-border-radius:10px;
-text-align:center;
-width:400px;
-
-}
-
-input,
-button{
- width: 100%;
-  padding: 14px;
-  margin-top: 10px;
-
-  border-radius: 6px;
-  border: none;
-
-  box-sizing: border-box;
-}
-
-.error{
-
-color:red;
-margin-bottom:10px;
-
-}
-
-</style>
+<link rel="stylesheet" href="/css/global.css" />
+<link rel="stylesheet" href="/css/login.css" />
 
 </head>
 
diff --git a/views/index.ejs b/views/index.ejs
index 7474221..5aa6a34 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -8,144 +8,8 @@
         href="/images/favicon/dok_favicon_32px.ico"
         type="image/x-icon"
       />
-    <link rel="stylesheet" href="/css/global.css">
-
-    <style>
-      * {
-        box-sizing: border-box;
-        font-family: "Tangerine", serif;
-      }
-
-      body {
-        margin: 0;
-        min-height: 100vh;
-        background: url("/images/background_login.png") center / cover no-repeat fixed;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      /* Nebel über Tal */
-
-      .fog {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 40%;        
-        z-index: 0;
-        pointer-events: none;
-      }
-
-      @keyframes fogmove {
-        0% {
-          transform: translateX(0);
-        }
-        100% {
-          transform: translateX(-50%);
-        }
-      }
-
-      /* Login Panel */
-
-      .launcher {
-        width: 380px;
-        padding: 30px;
-        position: relative;
-        z-index: 2;
-        font-family: "Tangerine", serif;
-        font-size: 16px;
-        background: rgba(10, 15, 20, 0.75);
-        backdrop-filter: blur(10px);
-        border-radius: 10px;
-        border: 1px solid rgba(100, 170, 255, 0.4);
-
-        box-shadow:
-          0 0 40px rgba(0, 0, 0, 0.8),
-          0 0 20px rgba(70, 120, 255, 0.5);
-      }
-
-      /* Inputs */
-
-      input,
-      select,
-      button,
-      .register,
-      .server-status {
-        width: 100%;
-        padding: 13px;
-        font-size: 24px;
-        margin-bottom: 15px;
-        font-family: "Tangerine", serif;
-        background: rgba(255, 255, 255, 0.08);
-
-        border: 1px solid rgba(255, 255, 255, 0.15);
-        border-radius: 6px;
-
-        color: white;
-      }
-
-      /* Login Button */
-
-      .login {
-        width: 100%;
-        padding: 14px;
-        font-size: 32px;
-        background: linear-gradient(45deg, #3da2ff, #7dd3ff);
-
-        border: none;
-        border-radius: 6px;
-
-        font-weight: bold;
-
-        cursor: pointer;
-
-        transition: 0.25s;
-      }
-
-      .login:hover {
-        transform: scale(1.05);
-
-        box-shadow:
-          0 0 20px #4aa3ff,
-          0 0 40px #4aa3ff;
-      }
-
-      /* Register */
-
-      .register {
-        display: block;
-        text-align: center;
-
-        margin-top: 10px;
-
-        color: #ccc;
-
-        text-decoration: none;
-      }
-
-      .register:hover {
-        color: white;
-      }
-
-      /* Server Status */
-
-      .server-status {
-        margin-top: 18px;
-        font-size: 24px;
-        padding: 10px;
-        background: rgba(0, 0, 0, 0.45);
-        border-radius: 6px;
-      }
-
-      .online {
-        color: #3cff5a;
-      }
-
-      .offline {
-        color: #ff4b4b;
-      }
-    </style>
+        <link rel="stylesheet" href="/css/global.css" />
+    <link rel="stylesheet" href="/css/login.css" />
   </head>
 
   <body>
diff --git a/views/launcher-dev.ejs b/views/launcher-dev.ejs
index f2493da..2246270 100644
--- a/views/launcher-dev.ejs
+++ b/views/launcher-dev.ejs
@@ -5,35 +5,7 @@
 
     <title>Map Developer</title>
     <link rel="stylesheet" href="/css/global.css" />
-
-    <style>
-      body {
-        margin: 0;
-        background: #000;
-        display: flex;
-        justify-content: center;
-      }
-
-      .wrapper {
-        position: relative;
-      }
-
-      img {
-        display: block;
-      }
-
-      svg {
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
-
-      polygon {
-        fill: rgba(255, 0, 0, 0.35);
-        stroke: red;
-        stroke-width: 2;
-      }
-    </style>
+    <link rel="stylesheet" href="/css/launcher-dev.css" />
   </head>
 
   <body>
diff --git a/views/launcher.ejs b/views/launcher.ejs
index 91d28de..eef2645 100644
--- a/views/launcher.ejs
+++ b/views/launcher.ejs
@@ -10,7 +10,10 @@
     />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="/css/launcher.css" />
     <link rel="stylesheet" href="/css/global.css" />
     <link rel="stylesheet" href="/css/building.css" />
@@ -18,76 +21,6 @@
     <link rel="stylesheet" href="/css/quickmenu.css" />
     <link rel="stylesheet" href="/css/hud.css" />
     <link rel="stylesheet" href="/css/mine.css" />
-    <style>
-      body {
-        margin: 0;
-        height: 100vh;
-
-        background: #000;
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        font-family: sans-serif;
-        color: white;
-      }
-
-      .panel {
-        background: rgba(0, 0, 0, 0.6);
-        padding: 40px;
-        border-radius: 10px;
-        text-align: center;
-        width: 400px;
-      }
-
-      /* ── Music Control ── */
-      #music-control {
-        position: fixed;
-        bottom: 16px;
-        right: 16px;
-        z-index: 9999;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        background: rgba(10, 5, 0, 0.85);
-        border: 1px solid #c8960c;
-        border-radius: 8px;
-        padding: 6px 10px;
-        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
-      }
-      #music-mute-btn {
-        background: none;
-        border: none;
-        cursor: pointer;
-        font-size: 20px;
-        line-height: 1;
-        padding: 0;
-        color: #f0d080;
-        transition: transform 0.15s;
-      }
-      #music-mute-btn:hover {
-        transform: scale(1.2);
-      }
-      #music-volume {
-        -webkit-appearance: none;
-        appearance: none;
-        width: 80px;
-        height: 4px;
-        background: #3a2000;
-        border-radius: 2px;
-        outline: none;
-        cursor: pointer;
-      }
-      #music-volume::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
-        background: #c8960c;
-        cursor: pointer;
-      }
-    </style>
   </head>
 
   <body>
@@ -222,34 +155,33 @@
          BUILDING POPUP
     ================================ -->
     <div id="building-popup" class="building-popup">
-
       <!-- Eckornamente -->
       <div class="popup-corner c-tl">
         <svg viewBox="0 0 30 30" width="30" height="30">
-          <path d="M2,2 L14,2 L8,8 L2,8 Z" fill="#c8960c"/>
-          <path d="M2,2 L2,14 L8,8 L8,2 Z" fill="#9a7a28"/>
-          <circle cx="4" cy="4" r="2.5" fill="#f0d060"/>
+          <path d="M2,2 L14,2 L8,8 L2,8 Z" fill="#c8960c" />
+          <path d="M2,2 L2,14 L8,8 L8,2 Z" fill="#9a7a28" />
+          <circle cx="4" cy="4" r="2.5" fill="#f0d060" />
         </svg>
       </div>
       <div class="popup-corner c-tr">
         <svg viewBox="0 0 30 30" width="30" height="30">
-          <path d="M2,2 L14,2 L8,8 L2,8 Z" fill="#c8960c"/>
-          <path d="M2,2 L2,14 L8,8 L8,2 Z" fill="#9a7a28"/>
-          <circle cx="4" cy="4" r="2.5" fill="#f0d060"/>
+          <path d="M2,2 L14,2 L8,8 L2,8 Z" fill="#c8960c" />
+          <path d="M2,2 L2,14 L8,8 L8,2 Z" fill="#9a7a28" />
+          <circle cx="4" cy="4" r="2.5" fill="#f0d060" />
         </svg>
       </div>
       <div class="popup-corner c-bl">
         <svg viewBox="0 0 30 30" width="30" height="30">
-          <path d="M2,2 L14,2 L8,8 L2,8 Z" fill="#c8960c"/>
-          <path d="M2,2 L2,14 L8,8 L8,2 Z" fill="#9a7a28"/>
-          <circle cx="4" cy="4" r="2.5" fill="#f0d060"/>
+          <path d="M2,2 L14,2 L8,8 L2,8 Z" fill="#c8960c" />
+          <path d="M2,2 L2,14 L8,8 L8,2 Z" fill="#9a7a28" />
+          <circle cx="4" cy="4" r="2.5" fill="#f0d060" />
         </svg>
       </div>
       <div class="popup-corner c-br">
         <svg viewBox="0 0 30 30" width="30" height="30">
-          <path d="M2,2 L14,2 L8,8 L2,8 Z" fill="#c8960c"/>
-          <path d="M2,2 L2,14 L8,8 L8,2 Z" fill="#9a7a28"/>
-          <circle cx="4" cy="4" r="2.5" fill="#f0d060"/>
+          <path d="M2,2 L14,2 L8,8 L2,8 Z" fill="#c8960c" />
+          <path d="M2,2 L2,14 L8,8 L8,2 Z" fill="#9a7a28" />
+          <circle cx="4" cy="4" r="2.5" fill="#f0d060" />
         </svg>
       </div>
 
@@ -265,74 +197,327 @@
 
       <!-- Body: Sidebar + Content -->
       <div class="popup-body">
-
         <!-- Vertikale Tab-Sidebar -->
         <div class="popup-tabs">
-
           <!-- Info Tab -->
           <button class="tab active" data-tab="info">
-            <svg 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
+              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
+              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
+              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
+              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
+              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
+              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 -->
@@ -341,7 +526,6 @@
           <div class="tab-content" id="tab-actions"></div>
           <div class="tab-content" id="tab-upgrade"></div>
         </div>
-
       </div>
     </div>
 
@@ -676,7 +860,12 @@
           audio.src = shuffled[i];
           audio.muted = muted;
           if (!muted) {
-            audio.play().then(() => { started = true; }).catch(() => {});
+            audio
+              .play()
+              .then(() => {
+                started = true;
+              })
+              .catch(() => {});
           }
         }
 
@@ -691,7 +880,12 @@
           localStorage.setItem("dok_muted", muted);
           if (!muted) {
             if (!audio.src) playTrack(index);
-            audio.play().then(() => { started = true; }).catch(() => {});
+            audio
+              .play()
+              .then(() => {
+                started = true;
+              })
+              .catch(() => {});
           }
         }
 
@@ -715,7 +909,12 @@
 
         function tryResume() {
           if (!muted && (audio.paused || !started)) {
-            audio.play().then(() => { started = true; }).catch(() => {});
+            audio
+              .play()
+              .then(() => {
+                started = true;
+              })
+              .catch(() => {});
           }
         }
         document.addEventListener("click", tryResume);
diff --git a/views/register.ejs b/views/register.ejs
index 275c73a..1bfd238 100644
--- a/views/register.ejs
+++ b/views/register.ejs
@@ -3,93 +3,8 @@
 <head>
 <meta charset="UTF-8">
 <title>Registrieren - Dynasty of Knights</title>
-<link rel="stylesheet" href="/css/global.css">
-<style>
-
-body {
-  margin:0;
-  min-height:100vh;
-
-  background:url("/images/background_login.png") center / cover no-repeat;
-
-  display:flex;
-  justify-content:center;
-  align-items:center;
-
-  font-family:sans-serif;
-}
-
-.register-box {
-
-  width:380px;
-  padding:30px;
-
-  background:rgba(10,15,20,0.8);
-
-  border-radius:10px;
-
-  border:1px solid rgba(100,170,255,0.4);
-
-  box-shadow:
-  0 0 40px rgba(0,0,0,0.8),
-  0 0 20px rgba(70,120,255,0.5);
-
-}
-
-input, select, button {
-
-  width:100%;
-  padding:12px;
-  margin-bottom:15px;
-
-  border-radius:6px;
-
-  border:1px solid rgba(255,255,255,0.2);
-
-  background:rgba(255,255,255,0.1);
-
-  color:white;
-
-}
-
-button {
-
-  background:linear-gradient(45deg,#3da2ff,#7dd3ff);
-
-  border:none;
-
-  cursor:pointer;
-
-}
-
-button:hover {
-
-  box-shadow:
-  0 0 20px #4aa3ff,
-  0 0 40px #4aa3ff;
-
-}
-
-.error {
-
-  color:red;
-  margin-bottom:15px;
-
-}
-
-.back {
-
-  display:block;
-  text-align:center;
-  color:#ccc;
-  margin-top:10px;
-}
-
-.back:hover {
-  color:white;
-}
-
-</style>
+<link rel="stylesheet" href="/css/global.css" />
+<link rel="stylesheet" href="/css/login.css" />
 
 </head>