style(frontend): grundlegendes Redesign (Design-System, Farben, Typografie)

Neues Design-System: warme Honig-/Wachs-Farbpalette (Amber-Primaer,
Salbeigruen-Sekundaer) statt Standard-Graustufen, Space Grotesk fuer
Ueberschriften, Inter fuer Fliesstext, IBM Plex Mono fuer Codes/IDs.
Card-Komponente mit weicher Schattierung statt Ring, neuer
Badge-Warning-Variante und statusTone()-Helper fuer semantische
Status-Farben (Voelker/Honigchargen). Navigation umgebaut: aktiver
Link-Zustand, Hexagon-Markenzeichen, "Mehr"-Dropdown fuer Admin-Links.
Dashboard-Kacheln mit Icons/Farbakzenten, Login-Seite mit dezentem
Waben-Hintergrundmuster als wiederkehrendes Signature-Element.

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

@@ -23,7 +23,7 @@ export default function ColonyDetailPage() {
   }
   if (isError || !colony) {
     return (
-      <p role="alert" className="p-4 text-sm text-red-600 sm:p-6">
+      <p role="alert" className="p-4 text-sm text-destructive sm:p-6">
         Volk konnte nicht geladen werden.
       </p>
     );

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

@@ -114,7 +114,7 @@ export default function NewColonyPage() {
               </Select>
             </div>
             {error ? (
-              <p role="alert" className="text-sm text-red-600">
+              <p role="alert" className="text-sm text-destructive">
                 {error}
               </p>
             ) : null}

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

@@ -6,6 +6,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { fetchColonies } from "@/lib/colonies/api";
 import { ColonyStatus } from "@/lib/colonies/types";
 import { exportColoniesCsv } from "@/lib/export/api";
+import { statusTone } from "@/lib/status-tone";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -48,7 +49,7 @@ export default function ColoniesPage() {
   return (
     <main className="flex flex-col gap-4 p-4 sm:p-6">
       <div className="flex items-center justify-between">
-        <h1 className="text-xl font-semibold">Völker</h1>
+        <h1 className="text-2xl font-semibold tracking-tight">Völker</h1>
         <div className="flex gap-2">
           <Button
             variant="outline"
@@ -82,7 +83,7 @@ export default function ColoniesPage() {
 
       {isLoading ? <p className="text-sm text-muted-foreground">Lädt…</p> : null}
       {isError ? (
-        <p role="alert" className="text-sm text-red-600">
+        <p role="alert" className="text-sm text-destructive">
           Völker konnten nicht geladen werden.
         </p>
       ) : null}
@@ -100,15 +101,16 @@ export default function ColoniesPage() {
             {colonies.map((colony) => (
               <TableRow key={colony.id}>
                 <TableCell>
-                  <Link className="underline" href={`/colonies/${colony.id}`}>
+                  <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={colony.status === "ACTIVE" ? "default" : "secondary"}>
-                    {colony.status}
-                  </Badge>
+                  <Badge variant={statusTone(colony.status)}>{colony.status}</Badge>
                 </TableCell>
               </TableRow>
             ))}