Add lightweight mode to Character3D component: Introduce a new lightweight prop for optimized model loading based on age group. Update NoLoginView to utilize lightweight characters. Adjust styling for better layout and overflow handling in home view components.

frontend/src/components/Character3D.vue

@@ -60,6 +60,10 @@ export default {
     noBackground: {
       type: Boolean,
       default: false
+    },
+    lightweight: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -290,29 +294,35 @@ export default {
         const prefix = base ? `${base}${MODELS_API_PATH}` : MODELS_API_PATH;
         
         // Fallback-Hierarchie:
-        // 1. Zuerst versuchen, Modell für genaues Alter zu laden (z.B. female_1y.glb)
-        // 2. Falls nicht vorhanden, Altersbereich verwenden (z.B. female_toddler.glb)
-        // 3. Falls auch nicht vorhanden, Basis-Modell verwenden (z.B. female.glb)
+        // Standard:
+        // 1. Exaktes Altersmodell
+        // 2. Altersbereich
+        // 3. Basis-Modell
+        // Lightweight:
+        // 1. Altersbereich
+        // 2. Basis-Modell
         const exactAgePath = this.exactAgeModelPath;
         const ageGroupPath = this.modelPath;
         const fallbackPath = `${prefix}/${this.actualGender}.glb`;
 
         let gltf;
         try {
-          // Versuche zuerst genaues Alter
-          try {
-            gltf = await loader.loadAsync(exactAgePath);
-            console.debug(`Loaded exact age model: ${exactAgePath}`);
-          } catch (exactAgeError) {
-            // Falls genaues Alter nicht existiert, versuche Altersbereich
+          if (this.lightweight) {
             try {
               gltf = await loader.loadAsync(ageGroupPath);
-              console.debug(`Loaded age group model: ${ageGroupPath}`);
             } catch (ageGroupError) {
-              // Falls Altersbereich nicht existiert, verwende Basis-Modell
-              console.warn(`Could not load ${ageGroupPath}, trying fallback model`);
               gltf = await loader.loadAsync(fallbackPath);
             }
+          } else {
+            try {
+              gltf = await loader.loadAsync(exactAgePath);
+            } catch (exactAgeError) {
+              try {
+                gltf = await loader.loadAsync(ageGroupPath);
+              } catch (ageGroupError) {
+                gltf = await loader.loadAsync(fallbackPath);
+              }
+            }
           }
         } finally {
           dracoLoader.dispose();

frontend/src/views/home/NoLoginView.vue

@@ -5,7 +5,7 @@
         </div>
         <div class="home-structure">
             <div class="mascot">
-                <Character3D gender="male" />
+                <Character3D gender="male" :lightweight="true" />
             </div>
             <div class="actions">
                 <section class="actions-panel actions-panel--story surface-card">
@@ -95,7 +95,7 @@
                 </section>
             </div>
             <div class="mascot">
-                <Character3D gender="female" />
+                <Character3D gender="female" :lightweight="true" />
             </div>
             <RandomChatDialog ref="randomChatDialog" />
             <RegisterDialog ref="registerDialog" />
@@ -185,6 +185,7 @@ export default {
     height: 100%;
     flex: 1;
     min-height: 0;
+    overflow: hidden;
 }
 
 .home-structure>div {
@@ -214,10 +215,13 @@ export default {
     gap: 1rem;
     flex: 1 1 auto;
     min-height: 0;
+    height: 100%;
+    overflow: hidden;
 }
 
 .actions-panel {
-    flex: 1;
+    flex: 0 0 40%;
+    max-height: 40%;
     min-height: 0;
     background:
         linear-gradient(180deg, rgba(255, 251, 246, 0.96) 0%, rgba(248, 240, 231, 0.96) 100%);
@@ -433,9 +437,13 @@ export default {
 
     .actions {
         min-height: auto;
+        height: auto;
+        overflow: visible;
     }
 
     .actions-panel {
+        flex: 0 0 auto;
+        max-height: none;
         min-height: 260px;
     }