Integration der rechtlichen Dokumente (Frontend)

dev/lobby-frontend/src/css/auth.css

@@ -115,6 +115,17 @@
     cursor: pointer;
 }
 
+.checkbox-group a {
+    color: var(--color-cyan-bright);
+    text-decoration: none; /* Unterstrich entfernen für einen cleaneren Look */
+    transition: text-shadow 0.2s ease, color 0.2s ease;
+}
+
+.checkbox-group a:hover {
+    color: var(--color-text-main);
+    text-shadow: 0 0 8px var(--color-cyan-bright);
+}
+
 .checkbox-group input[type="checkbox"] {
     appearance: none;
     width: 18px;
@@ -215,3 +226,42 @@
     pointer-events: auto;
     transition: color 0.2s ease, text-shadow 0.2s ease;
 }
+
+
+
+#dev-warning-banner {
+    position: absolute;
+    top: 35px; /* Leichter Abstand zum oberen Bildschirmrand */
+    left: 50%;
+    transform: translateX(-50%); /* Zentriert das Banner horizontal */
+    
+    /* Optik: Roter, halbtransparenter Hintergrund mit rotem Rahmen */
+    background: rgba(255, 68, 68, 0.3); 
+    border: 1px solid var(--color-error);
+    box-shadow: 0 0 15px rgba(255, 68, 68, 0.8); /* Sanfter roter Glow */
+    
+    color: var(--color-text-main);
+    padding: 12px 25px;
+    font-size: 14px;
+    font-family: var(--font-main);
+    text-align: center;
+    letter-spacing: 1px;
+    
+    /* Z-Index hoch ansetzen, damit es garantiert über allem anderen liegt */
+    z-index: 100;
+    pointer-events: auto; /* Erlaubt das Markieren des Textes mit der Maus */
+}
+
+/* ----------------------------------------------------------------------
+ * Hervorhebung des Warn-Icons innerhalb des Banners
+ * ---------------------------------------------------------------------- */
+#dev-warning-banner .warning-icon {
+    color: var(--color-error);
+    font-size: 16px;
+    margin-right: 5px;
+    text-shadow: 0 0 8px var(--color-error);
+}
+
+#dev-warning-banner strong {
+    color: var(--color-error);
+}

dev/lobby-frontend/src/i18n.js

@@ -28,7 +28,7 @@ export const translations = {
         ph_otp: "6-stelliger Code",
         
         // --- Labels ---
-        lbl_agb: "Ich akzeptiere die AGB & Spielregeln",
+        lbl_agb: "Ich akzeptiere die <a href='agb.html' target='_blank'>AGB</a>, <a href='regeln.html' target='_blank'>Spielregeln</a> & den <a href='datenschutz.html' target='_blank'>Datenschutz</a>",
         lbl_remember: "Angemeldet bleiben",
 
         // --- OTP Modus ---
@@ -45,6 +45,8 @@ export const translations = {
         MSG_SECTOR_JOINED_SUCCESS: "Sektor erfolgreich beigetreten!",        
 
         // --- Footer ---
+        link_agb: "AGB",
+        link_rules: "Spielregeln",
         link_imprint: "Impressum",
         link_privacy: "Datenschutz",
 
@@ -93,8 +95,7 @@ export const translations = {
         ph_otp: "6-digit code",
         
         // --- Labels ---
-        lbl_agb: "I accept the Terms & Rules",
-        lbl_remember: "Keep me logged in",
+        lbl_agb: "I accept the <a href='agb.html' target='_blank'>Terms of Service</a>, <a href='regeln.html' target='_blank'>Rules</a> & <a href='datenschutz.html' target='_blank'>Privacy Policy</a>",        lbl_remember: "Keep me logged in",
         
         // --- OTP Modus ---
         txt_otp_instruction: "Please enter the 6-digit code from your e-mail.",
@@ -110,6 +111,8 @@ export const translations = {
         MSG_SECTOR_JOINED_SUCCESS: "Successfully joined the sector!",
 
         // --- Footer ---
+        link_agb: "Terms of Service",
+        link_rules: "Game Rules",
         link_imprint: "Imprint",
         link_privacy: "Privacy Policy",
 

dev/lobby-frontend/src/ui/dropdowns.js

@@ -8,7 +8,7 @@ export function updateTranslations() {
     const elements = document.querySelectorAll('[data-i18n]');
     elements.forEach(el => {
         const key = el.getAttribute('data-i18n');
-        el.textContent = t(key);
+        el.innerHTML = t(key);
     });
 }