feat: Füge Debug-Overlay und Alters-/Geschlechtsanpassungen für 3D-Charaktere hinzu

frontend/src/views/falukant/AllCharactersTest.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="all-characters-test">
+    <h1>All 3D Characters (Ages × Genders)</h1>
+    <div class="controls">
+      <label><input type="checkbox" v-model="useLightweight"> Use lightweight models</label>
+      <label><input type="checkbox" v-model="noBackground"> No background</label>
+    </div>
+
+    <div class="grid">
+      <div v-for="(age, idx) in ages" :key="`age-${age}`" class="card">
+        <div class="label">Alter: {{ age }}</div>
+        <div class="row">
+          <div class="cell">
+            <div class="mini-shell">
+              <Character3D :gender="'female'" :age="age" :lightweight="useLightweight" :noBackground="noBackground" />
+            </div>
+            <div class="sub">weiblich</div>
+          </div>
+          <div class="cell">
+            <div class="mini-shell">
+              <Character3D :gender="'male'" :age="age" :lightweight="useLightweight" :noBackground="noBackground" />
+            </div>
+            <div class="sub">männlich</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Character3D from '@/components/Character3D.vue';
+
+export default {
+  name: 'AllCharactersTest',
+  components: { Character3D },
+  data() {
+    return {
+      // Show ages 0..17 and some representative adults
+      ages: [...Array(18).keys()].concat([25, 40, 70]),
+      useLightweight: true,
+      noBackground: true
+    };
+  }
+};
+</script>
+
+<style scoped>
+.all-characters-test { padding: 16px }
+.controls { margin-bottom: 12px }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px }
+.card { border: 1px solid #e0e0e0; padding: 8px; border-radius: 6px; background: #fff }
+.label { font-weight: 600; margin-bottom: 6px }
+.row { display: flex; gap: 8px }
+.cell { flex: 1; text-align: center }
+.mini-shell { width: 100%; height: 220px }
+.sub { margin-top: 6px; font-size: 12px; color: #666 }
+</style>