feat(frontend): Statistik-Seite mit animierten Auswertungen (Modul 27)

Tab-basierte /statistics-Seite (Voelker, Koeniginnen, Bienenstaende,
Varroa, Honig, Futter) mit animierten Balkendiagrammen, Sidebar-Eintrag
und Live-Verifikation ueber alle Tabs sowie Mobile-Breakpoint.

ApiCore-Frontend/src/components/stat-bar-list.tsx

@@ -0,0 +1,41 @@
+interface StatBarItem {
+  label: string;
+  value: number;
+  unit?: string;
+}
+
+interface StatBarListProps {
+  items: StatBarItem[];
+  emptyText?: string;
+  formatValue?: (value: number) => string;
+}
+
+export function StatBarList({ items, emptyText = "Keine Daten vorhanden.", formatValue }: StatBarListProps) {
+  if (items.length === 0) {
+    return <p className="text-sm text-muted-foreground">{emptyText}</p>;
+  }
+
+  const max = Math.max(...items.map((item) => item.value), 1);
+
+  return (
+    <div className="flex flex-col gap-3">
+      {items.map((item) => (
+        <div key={item.label} className="flex flex-col gap-1">
+          <div className="flex items-center justify-between gap-3 text-sm">
+            <span className="truncate font-medium">{item.label}</span>
+            <span className="shrink-0 tabular-nums text-muted-foreground">
+              {formatValue ? formatValue(item.value) : item.value}
+              {item.unit ? ` ${item.unit}` : ""}
+            </span>
+          </div>
+          <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
+            <div
+              className="h-full rounded-full bg-primary motion-safe:transition-[width] motion-safe:duration-700 motion-safe:ease-out"
+              style={{ width: `${item.value > 0 ? Math.max((item.value / max) * 100, 4) : 0}%` }}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}