sfgnjsfr

public/css/launcher.css

@@ -194,6 +194,36 @@ body {
   display: flex;
   flex-direction: column;
   z-index: 1000;
+  transition: transform 0.3s ease;
+}
+
+#game-chat.chat-collapsed {
+  transform: translateX(calc(-100% - 23px));
+}
+
+#chat-toggle {
+  position: fixed;
+  left: 273px; /* 20px + 250px + 3px border */
+  bottom: calc(30px + 130px);
+  width: 22px;
+  height: 40px;
+  background: linear-gradient(#6b4a25, #3a2512);
+  border: 2px solid #8b6a3c;
+  border-left: none;
+  border-radius: 0 6px 6px 0;
+  color: #f3e6c5;
+  font-size: 12px;
+  cursor: pointer;
+  z-index: 1001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: left 0.3s ease, background 0.15s;
+}
+
+#chat-toggle:hover {
+  background: linear-gradient(#8a6235, #4a3018);
+  border-color: #ffd27a;
 }
 
 #chat-messages {

views/launcher.ejs

@@ -605,6 +605,7 @@
       </div>
     </div>
 
+    <button id="chat-toggle" title="Chat ausblenden">◀</button>
     <div id="game-chat">
       <div class="chat-header" id="chat-title">Globalchat</div>
 
@@ -1046,5 +1047,21 @@
         };
       };
     </script>
+    <script>
+      (function () {
+        const chat = document.getElementById("game-chat");
+        const btn  = document.getElementById("chat-toggle");
+        let hidden = false;
+
+        btn.addEventListener("click", () => {
+          hidden = !hidden;
+          chat.classList.toggle("chat-collapsed", hidden);
+          btn.textContent = hidden ? "▶" : "◀";
+          btn.title       = hidden ? "Chat einblenden" : "Chat ausblenden";
+          // Button wandert mit: rechts vom Chat (273px) oder am Rand (20px)
+          btn.style.left  = hidden ? "20px" : "273px";
+        });
+      })();
+    </script>
   </body>
 </html>