Sektor-Onboarding & Charaktererstellung (Frontend)

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

@@ -162,8 +162,8 @@
     top: 50%;
     transform: translate(-50%, -50%); 
     pointer-events: auto; 
+    transition: opacity 0.3s ease; 
 }
-
 #sector-tab-container {
     position: absolute;
     top: 20px;
@@ -190,15 +190,19 @@
     height: 540px;
     overflow-y: auto;
     overflow-x: hidden;
-    padding: 20px 40px; 
+    padding: 20px 40px; /* Zurück zu den perfekten 40px */
     box-sizing: border-box;
+    
+    /* Zurück zum Grid für eine saubere Matrix-Optik */
     display: grid;
     grid-template-columns: repeat(4, 270px); 
     grid-auto-rows: 90px;
     row-gap: 20px;
     column-gap: 25px;
     align-content: start;
-    justify-content: flex-start;
+    
+    /* Zentriert den gesamten Grid-Block (inkl. Lücken) mittig im Container */
+    justify-content: center; 
 }
 
 .sector-card-link {

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

@@ -0,0 +1,108 @@
+/* Haupt-Ebene abdunklung entfernen, das macht jetzt PixiJS */
+#sector-onboarding-layer {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 50; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none; 
+}
+
+#onboarding-form {
+    position: relative;
+    width: 450px;
+    height: 550px;
+    background: transparent;
+    pointer-events: auto;
+}
+
+#local-username {
+    position: absolute;
+    left: 75px;
+    top: 250px;
+    width: 300px;
+    height: 50px;
+    background: transparent;
+    border: none;
+    color: var(--color-text-main);
+    padding: 0 15px;
+    font-size: 16px;
+    font-family: inherit;
+    outline: none;
+    box-sizing: border-box;
+}
+
+#local-username::placeholder {
+     color: var(--color-text-placeholder); 
+}
+#local-username:focus { 
+    text-shadow: 0 0 8px var(--color-cyan-dark); 
+}
+
+#btn-gender-male { 
+    position: absolute; 
+    left: 75px; 
+    top: 320px; 
+    width: 140px; 
+    height: 50px; 
+}
+
+#btn-gender-female { 
+    position: absolute; 
+    left: 235px; 
+    top: 320px; 
+    width: 140px; 
+    height: 50px; 
+}
+
+#btn-cancel-onboarding { 
+    position: absolute; 
+    left: 75px; 
+    top: 460px; 
+    width: 140px; 
+    height: 50px; 
+}
+
+#btn-submit-onboarding { 
+    position: absolute; 
+    left: 235px; 
+    top: 460px; 
+    width: 140px; 
+    height: 50px; 
+}
+
+#onboarding-form button {
+    background: transparent;
+    border: none;
+    color: var(--color-text-inactive);
+    font-size: 14px;
+    font-family: inherit;
+    text-transform: uppercase;
+    cursor: pointer;
+    outline: none;
+    transition: color 0.2s ease, text-shadow 0.2s ease;
+}
+
+#onboarding-form button:hover,
+#onboarding-form button.active {
+    color: var(--color-text-main);
+    text-shadow: 0 0 8px var(--color-cyan-bright);
+}
+
+#onboarding-msg-box {
+    position: absolute;
+    top: 400px; /* Zwischen Geschlecht und Buttons */
+    width: 100%;
+    text-align: center;
+    color: var(--color-error);
+    font-size: 14px;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 30px;
+}