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)/equipment/page.tsx

@@ -9,14 +9,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { PageHeader } from "@/components/page-header";
 import { EmptyState } from "@/components/empty-state";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { ListItemCard } from "@/components/list-item-card";
 
 export default function EquipmentPage() {
   const { data: equipmentList, isLoading, isError } = useQuery({
@@ -54,35 +47,19 @@ export default function EquipmentPage() {
       ) : null}
 
       {equipmentList && equipmentList.length > 0 ? (
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Inventarnummer</TableHead>
-              <TableHead>Bezeichnung</TableHead>
-              <TableHead>Standort</TableHead>
-              <TableHead>Zustand</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {equipmentList.map((item) => (
-              <TableRow key={item.id}>
-                <TableCell>
-                  <Link
-                    className="font-mono font-medium text-primary underline-offset-4 hover:underline"
-                    href={`/equipment/${item.id}`}
-                  >
-                    {item.inventoryNumber}
-                  </Link>
-                </TableCell>
-                <TableCell>{item.name}</TableCell>
-                <TableCell>{item.location ?? "—"}</TableCell>
-                <TableCell>
-                  <Badge variant={statusTone(item.condition)}>{item.condition}</Badge>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+        <div className="flex flex-col gap-2">
+          {equipmentList.map((item) => (
+            <ListItemCard
+              key={item.id}
+              href={`/equipment/${item.id}`}
+              icon={Wrench}
+              gradient="var(--gradient-sage)"
+              title={item.name}
+              subtitle={`${item.inventoryNumber} · ${item.location ?? "—"}`}
+              trailing={<Badge variant={statusTone(item.condition)}>{item.condition}</Badge>}
+            />
+          ))}
+        </div>
       ) : null}
     </main>
   );