feat: modernize main list pages from tables to card-based rows

New shared ListItemCard component: icon avatar, title/subtitle, trailing
badges/actions, chevron affordance when linked to a detail page. Applied
to the 9 primary data-list pages (Bienenstaende, Voelker, Koeniginnen,
Honigchargen, Aufgaben, Lager, Produkte, Inventar, Wiederkehrende
Aufgaben), replacing the plain HTML tables with the same rounded-card
list aesthetic already used elsewhere in the app (inspections,
treatments, varroa, etc.), for a consistent look across the whole
product. Admin/settings tables (Benutzer, Webhooks, Audit-Log, Import)
intentionally left as tables per user's scoping choice.

ApiCore-Frontend/src/app/(app)/colonies/page.tsx

@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { PageHeader } from "@/components/page-header";
 import { EmptyState } from "@/components/empty-state";
+import { ListItemCard } from "@/components/list-item-card";
 import {
   Select,
   SelectContent,
@@ -19,14 +20,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 
 const STATUS_OPTIONS: ColonyStatus[] = [
   "ACTIVE",
@@ -104,33 +97,18 @@ export default function ColoniesPage() {
       ) : null}
 
       {colonies && colonies.length > 0 ? (
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Code</TableHead>
-              <TableHead>Typ</TableHead>
-              <TableHead>Status</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {colonies.map((colony) => (
-              <TableRow key={colony.id}>
-                <TableCell>
-                  <Link
-                    className="font-mono font-medium text-primary underline-offset-4 hover:underline"
-                    href={`/colonies/${colony.id}`}
-                  >
-                    {colony.code}
-                  </Link>
-                </TableCell>
-                <TableCell>{colony.colonyType}</TableCell>
-                <TableCell>
-                  <Badge variant={statusTone(colony.status)}>{colony.status}</Badge>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <div className="flex flex-col gap-2">
+          {colonies.map((colony) => (
+            <ListItemCard
+              key={colony.id}
+              href={`/colonies/${colony.id}`}
+              icon={Layers}
+              title={<span className="font-mono">{colony.code}</span>}
+              subtitle={colony.colonyType}
+              trailing={<Badge variant={statusTone(colony.status)}>{colony.status}</Badge>}
+            />
+          ))}
+        </div>
       ) : null}
     </main>
   );