FEAT-6: wire tab content into animal detail (Fotos/Gesundheit/Gewicht) + profile photo in header + tab styles

gerbil-manager-web/src/pages/GerbilDetailPage.tsx

@@ -6,6 +6,11 @@ import { listColorVarieties, listContacts, listEnclosures, listLitters } from '.
 import { useApi } from '../hooks/useApi'
 import { formatDate, genderLabel, statusLabel } from '../format/labels'
 import { fromDisplayString, genotypeToFarbschlag, toDisplayString } from '../genetics'
+// FEAT-6 (Oscar): Tab-Inhalte + Profilfoto
+import GerbilHealthTab from '../components/GerbilHealthTab'
+import GerbilPhotosTab from '../components/GerbilPhotosTab'
+import GerbilProfilePhoto from '../components/GerbilProfilePhoto'
+import GerbilWeightTab from '../components/GerbilWeightTab'
 
 type DetailTab = 'photos' | 'health' | 'weight'
 
@@ -79,6 +84,7 @@ export default function GerbilDetailPage() {
     <section className="page">
       <header className="page-head">
         <div>
+          <GerbilProfilePhoto gerbilId={g.id} />
           <h2>{g.name}</h2>
           <span className={`badge badge--${g.status.toLowerCase()}`}>{statusLabel(g.status)}</span>
         </div>
@@ -158,7 +164,9 @@ export default function GerbilDetailPage() {
         ))}
       </div>
       <div className="tab-panel" role="tabpanel">
-        <p className="muted">{t.detail.tabPlaceholder}</p>
+        {tab === 'photos' && <GerbilPhotosTab gerbilId={g.id} />}
+        {tab === 'health' && <GerbilHealthTab gerbilId={g.id} />}
+        {tab === 'weight' && <GerbilWeightTab gerbilId={g.id} />}
       </div>
     </section>
   )