Enhance backend configuration and error handling: Update CORS settings to allow dynamic origins, improve RabbitMQ connection handling in chat services, and adjust API server host configuration. Refactor environment variables for better flexibility and add fallback mechanisms for WebSocket and chat services. Update frontend environment files for consistent API and WebSocket URLs.

frontend/src/components/Character3D.vue

@@ -1,5 +1,13 @@
 <template>
-  <div ref="container" class="character-3d-container"></div>
+  <div class="character-3d-shell">
+    <div v-show="!showFallback" ref="container" class="character-3d-container"></div>
+    <img
+      v-if="showFallback"
+      class="character-fallback"
+      :src="fallbackImageSrc"
+      :alt="`Character ${actualGender}`"
+    />
+  </div>
 </template>
 
 <script>
@@ -41,7 +49,8 @@ export default {
       animationId: null,
       mixer: null,
       clock: markRaw(new THREE.Clock()),
-      baseYPosition: 0 // Basis-Y-Position für Animation
+      baseYPosition: 0,
+      showFallback: false
     };
   },
   computed: {
@@ -93,6 +102,11 @@ export default {
       const base = getApiBaseURL();
       const prefix = base ? `${base}${MODELS_API_PATH}` : MODELS_API_PATH;
       return `${prefix}/${this.actualGender}_${age}y.glb`;
+    },
+    fallbackImageSrc() {
+      return this.actualGender === 'female'
+        ? '/images/mascot/mascot_female.png'
+        : '/images/mascot/mascot_male.png';
     }
   },
   watch: {
@@ -115,6 +129,7 @@ export default {
     init3D() {
       const container = this.$refs.container;
       if (!container) return;
+      this.showFallback = false;
 
       // Scene erstellen - markRaw verwenden, um Vue's Reactivity zu vermeiden
       this.scene = markRaw(new THREE.Scene());
@@ -301,6 +316,7 @@ export default {
         }
       } catch (error) {
         console.error('Error loading 3D model:', error);
+        this.showFallback = true;
       }
     },
 
@@ -375,10 +391,25 @@ export default {
 </script>
 
 <style scoped>
+.character-3d-shell {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  position: relative;
+}
+
 .character-3d-container {
   width: 100%;
   height: 100%;
+  min-height: 0;
   position: relative;
   overflow: hidden;
 }
+
+.character-fallback {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center bottom;
+}
 </style>