CHARAKTERBOGEN-2 (E1): Trait-Katalog in 4 Kategorien + 10 neue Traits + Warnsignale

- de.ts: traits-Array -> traitCategories (4 Kategorien: Sozialverhalten / Eignung &
  Umgang / Hobbys & Eigenarten / Wesen & Temperament); alle 15 bestehenden Keys
  erhalten (stored auf Live-Tieren); 10 neue Keys additiv; warn:true auf
  schwer-vergesellschaftbar + territorial.
- format/traits.ts: TraitEntry/TraitCategory-Interface, TRAIT_CATEGORIES-Export,
  ALL_TRAITS via flatMap, neuer isWarnTrait()-Helper.
- Charakterbogen.tsx: grouped-Rendering nach Kategorie (section + h4); warn-Chips
  mit trait-chip--warn-Klasse + trait-warn-badge.
- charakterbogen.css: .trait-category__heading + .trait-chip--warn (amber) +
  .trait-warn-badge.
- format/__tests__/traits.test.ts: 14 neue Vitest-Tests (Kategorien, Keys, warn,
  traitLabel/traitLabels).
- Gate: vitest 122/122, tsc clean, build clean, eslint clean.

gerbil-manager-web/src/components/Charakterbogen.tsx

@@ -1,5 +1,5 @@
 import { de } from '../strings/de'
-import { ALL_TRAITS } from '../format/traits'
+import { ALL_TRAITS, TRAIT_CATEGORIES } from '../format/traits'
 import './charakterbogen.css'
 
 export interface CharakterbogenProps {
@@ -10,12 +10,6 @@ export interface CharakterbogenProps {
   onNoteChange: (note: string) => void
 }
 
-/**
- * FEAT-14: character sheet — a checkbox grid of traits + a free note.
- * Controlled & reusable: rendered on the animal detail page (persisted) and in
- * the Abgabe listing composer (feeds the AI sale-text). German labels from
- * de.character.traits; the stored value is the trait KEY.
- */
 export default function Charakterbogen({
   traits,
   note,
@@ -29,26 +23,32 @@ export default function Charakterbogen({
     const next = new Set(selected)
     if (next.has(key)) next.delete(key)
     else next.add(key)
-    // Preserve the vocabulary order for stable output.
+    // Preserve vocabulary (category) order for stable output.
     onTraitsChange(ALL_TRAITS.filter((tr) => next.has(tr.key)).map((tr) => tr.key))
   }
 
   return (
     <div className="charakterbogen">
-      <ul className="trait-grid">
-        {ALL_TRAITS.map((tr) => (
-          <li key={tr.key}>
-            <label className="trait-chip">
-              <input
-                type="checkbox"
-                checked={selected.has(tr.key)}
-                onChange={() => toggle(tr.key)}
-              />
-              <span>{tr.label}</span>
-            </label>
-          </li>
-        ))}
-      </ul>
+      {TRAIT_CATEGORIES.map((cat) => (
+        <section key={cat.category} className="trait-category">
+          <h4 className="trait-category__heading">{cat.category}</h4>
+          <ul className="trait-grid">
+            {cat.traits.map((tr) => (
+              <li key={tr.key}>
+                <label className={`trait-chip${tr.warn ? ' trait-chip--warn' : ''}`}>
+                  <input
+                    type="checkbox"
+                    checked={selected.has(tr.key)}
+                    onChange={() => toggle(tr.key)}
+                  />
+                  <span>{tr.label}</span>
+                  {tr.warn && <span className="trait-warn-badge">{t.warnLabel}</span>}
+                </label>
+              </li>
+            ))}
+          </ul>
+        </section>
+      ))}
       <label className="field">
         <span>{t.noteLabel}</span>
         <textarea