feat(frontend): moderneres visuelles Redesign (Farben, Tiefe, Dashboard-Hero)

Kartenhintergrund und Seitenhintergrund waren fast farbgleich, wodurch
alles flach wirkte trotz vorhandenem Schatten. Staerkerer Kontrast
(--background/--card/--muted/--border), neue Gradient- und
Schatten-Tokens (--gradient-honey/-sage/-sky, --shadow-soft/-elevated).

Card-Komponente: rounded-2xl, echter sichtbarer Schatten, optionaler
Hover-Lift (interactive-Prop). Sidebar: solide Gradient-Badge, kraeftiger
Active-Pill-Zustand statt blassem Tint. Header: sticky mit Blur-Schatten
statt hartem Rand. Dashboard: Gradient-Hero mit Begruessung und
Honeycomb-Muster, farbige Gradient-Icon-Badges pro KPI-Kachel,
Hinweise-Zeilen mit Icon statt rohem Enum-Badge (dabei toten
CONSPICUOUS_COLONY-Style-Key gefunden und auf COLONY_ATTENTION
korrigiert). Honeycomb-Hintergrund aus der Login-Seite in eine
gemeinsame Komponente extrahiert und dort mit dem gleichen
Gradient-Badge-Header konsistent gemacht.

ApiCore-Frontend/src/app/(app)/sidebar.tsx

@@ -93,13 +93,18 @@ function SidebarLink({ item, pathname }: { item: NavItem; pathname: string }) {
       href={item.href}
       aria-current={isActive ? "page" : undefined}
       className={cn(
-        "flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-150",
+        "group relative flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm font-medium transition-all duration-150",
         isActive
-          ? "bg-primary/10 text-primary"
-          : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+          ? "bg-primary text-primary-foreground shadow-[var(--shadow-soft)]"
+          : "text-muted-foreground hover:bg-accent/70 hover:text-foreground",
       )}
     >
-      <Icon className="size-4.5 shrink-0" />
+      <Icon
+        className={cn(
+          "size-4.5 shrink-0 transition-transform duration-150",
+          !isActive && "group-hover:scale-110",
+        )}
+      />
       <span className="truncate">{item.label}</span>
     </Link>
   );
@@ -110,19 +115,24 @@ export function Sidebar({ user }: { user: AuthUser }) {
   const groups = user.role === "ADMIN" ? [...NAV_GROUPS, ADMIN_GROUP] : NAV_GROUPS;
 
   return (
-    <aside className="hidden w-60 shrink-0 flex-col gap-1 overflow-y-auto border-r bg-card px-3 py-4 sm:flex">
+    <aside className="relative z-10 hidden w-64 shrink-0 flex-col gap-1 overflow-y-auto bg-sidebar px-3 py-5 shadow-[var(--shadow-soft)] sm:flex">
       <Link
         href="/dashboard"
-        className="mb-4 flex items-center gap-2 px-2 font-heading text-lg font-semibold"
+        className="mb-5 flex items-center gap-2.5 px-2 font-heading text-lg font-semibold"
       >
-        <Hexagon className="size-5.5 fill-primary/15 text-primary" strokeWidth={2.25} />
+        <span
+          className="flex size-8 items-center justify-center rounded-xl shadow-[var(--shadow-soft)]"
+          style={{ background: "var(--gradient-honey)" }}
+        >
+          <Hexagon className="size-4.5 fill-white/25 text-white" strokeWidth={2.25} />
+        </span>
         ApiCore
       </Link>
-      <nav className="flex flex-1 flex-col gap-4">
+      <nav className="flex flex-1 flex-col gap-5">
         {groups.map((group, index) => (
           <div key={group.label ?? `group-${index}`} className="flex flex-col gap-0.5">
             {group.label ? (
-              <p className="px-3 pb-1 text-xs font-medium tracking-wide text-muted-foreground uppercase">
+              <p className="px-3 pb-1 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase">
                 {group.label}
               </p>
             ) : null}