feat(frontend): Icon-Badges auf Detailseiten-Karten (Volk/Bienenstand/Königin)

Header von ColonyEditCard, ApiaryEditCard und QueenEditCard um Icon-Badge
im Honig-/Salbei-Gradient ergänzt, passend zum bereits überarbeiteten
Look der Listen- und Übersichtsseiten.

Zusätzlich Bug behoben: ColonyEditCard und QueenEditCard nutzten bislang
ein hartcodiertes ACTIVE-Ternary statt der gemeinsamen statusTone()-Hilfsfunktion,
wodurch z. B. WEAK/CONSPICUOUS/DISSOLVED-Völker und LOST/DECEASED-Königinnen
auf der eigenen Detailseite nur als neutrales "secondary"-Badge statt in
Warn-/Fehlerfarbe erschienen.

ApiCore-Frontend/src/app/(app)/apiaries/[id]/apiary-edit-card.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { FormEvent, useState } from "react";
+import { MapPin } from "lucide-react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { deactivateApiary, reactivateApiary, updateApiary } from "@/lib/apiaries/api";
@@ -66,7 +67,15 @@ export function ApiaryEditCard({ apiary }: { apiary: Apiary }) {
   return (
     <Card className="max-w-lg">
       <CardHeader className="flex flex-row items-center justify-between">
-        <CardTitle>{apiary.name}</CardTitle>
+        <div className="flex items-center gap-2.5">
+          <span
+            className="flex size-8 items-center justify-center rounded-lg text-white shadow-[var(--shadow-soft)]"
+            style={{ background: "var(--gradient-honey)" }}
+          >
+            <MapPin className="size-4" />
+          </span>
+          <CardTitle>{apiary.name}</CardTitle>
+        </div>
         <Badge variant={apiary.status === "ACTIVE" ? "default" : "secondary"}>
           {apiary.status === "ACTIVE" ? "Aktiv" : "Inaktiv"}
         </Badge>

ApiCore-Frontend/src/app/(app)/colonies/[id]/colony-edit-card.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { FormEvent, useState } from "react";
+import { Layers } from "lucide-react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { updateColony } from "@/lib/colonies/api";
 import { Colony } from "@/lib/colonies/types";
+import { statusTone } from "@/lib/status-tone";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
@@ -47,10 +49,16 @@ export function ColonyEditCard({ colony }: { colony: Colony }) {
   return (
     <Card className="max-w-lg">
       <CardHeader className="flex flex-row items-center justify-between">
-        <CardTitle>{colony.code}</CardTitle>
+        <div className="flex items-center gap-2.5">
-        <Badge variant={colony.status === "ACTIVE" ? "default" : "secondary"}>
+          <span
-          {colony.status}
+            className="flex size-8 items-center justify-center rounded-lg text-white shadow-[var(--shadow-soft)]"
-        </Badge>
+            style={{ background: "var(--gradient-honey)" }}
+          >
+            <Layers className="size-4" />
+          </span>
+          <CardTitle className="font-mono">{colony.code}</CardTitle>
+        </div>
+        <Badge variant={statusTone(colony.status)}>{colony.status}</Badge>
       </CardHeader>
       <CardContent>
         <form className="flex flex-col gap-4" onSubmit={handleSubmit}>

ApiCore-Frontend/src/app/(app)/queens/[id]/queen-edit-card.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { FormEvent, useState } from "react";
+import { Crown } from "lucide-react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { updateQueen } from "@/lib/queens/api";
 import { Queen, QueenStatus } from "@/lib/queens/types";
+import { statusTone } from "@/lib/status-tone";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
@@ -63,10 +65,16 @@ export function QueenEditCard({ queen }: { queen: Queen }) {
   return (
     <Card className="max-w-lg">
       <CardHeader className="flex flex-row items-center justify-between">
-        <CardTitle>{queen.code}</CardTitle>
+        <div className="flex items-center gap-2.5">
-        <Badge variant={queen.status === "ACTIVE" ? "default" : "secondary"}>
+          <span
-          {queen.status}
+            className="flex size-8 items-center justify-center rounded-lg text-white shadow-[var(--shadow-soft)]"
-        </Badge>
+            style={{ background: "var(--gradient-sage)" }}
+          >
+            <Crown className="size-4" />
+          </span>
+          <CardTitle className="font-mono">{queen.code}</CardTitle>
+        </div>
+        <Badge variant={statusTone(queen.status)}>{queen.status}</Badge>
       </CardHeader>
       <CardContent>
         <form className="flex flex-col gap-4" onSubmit={handleSubmit}>