design v5: Übersicht als Vorschau, Grundbausteine im neuen Look

Tiefblauer Grund mit Lichtflecken in den Bereichsfarben, Glasflächen mit
Lichtkante (flaeche), ruhigere Schrift (Überschriften normal geschrieben,
Großbuchstaben nur als kleines Etikett) und dezente Bewegung.

- Startseite neu: Geräte-Ring mit Gesamtlage, drei Eckwerte, Instrumente
  (8 Messringe), Bereichskarten mit Kacheln je Modell, Baustein und Gerät
  (Symbol, Zustandspunkt, Update direkt an der Kachel), Speicher/NAS,
  Zeitleisten „Als Nächstes“ und „Zuletzt eingespielt“.
- Panel, Schildchen, Kennzahl, Verlaufslinie, Seitenleiste und Kopf im
  neuen Look — wirkt schon auf allen Seiten.
- Symbole je Gerät (lib/geraetebild): Farbe des Bereichs, Zustände nur als
  Punkt. Vorbilder: Heimdall, Dashy, Homepage, umbrelOS, Pulse.

Noch nicht ausgerollt (kein dist): erst nach dem Ja des Users.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/components/cockpit/Geraetesymbol.tsx

@@ -0,0 +1,48 @@
+import { cn } from "cn"
+import { type Geraetebild, PUNKT, type Punktzustand } from "@/lib/geraetebild"
+
+// Kachel in der Farbe des Bereichs; Zustände trägt nur der Punkt (grün/bernstein/rot/cyan) — nie das Symbol.
+const BEREICH = {
+  box: "from-box/30 to-box/[0.05] ring-box/35 text-box-text",
+  homelab: "from-lab/30 to-lab/[0.05] ring-lab/35 text-lab-text",
+} as const
+
+const LEUCHTEN = {
+  box: "shadow-[0_0_28px_-6px_var(--box)]",
+  homelab: "shadow-[0_0_28px_-6px_var(--lab)]",
+} as const
+
+const GROESSE = {
+  sm: { kachel: "size-8 rounded-[10px]", icon: "size-4", punkt: "size-2.5" },
+  md: { kachel: "size-10 rounded-xl", icon: "size-5", punkt: "size-2.5" },
+  lg: { kachel: "size-12 rounded-2xl", icon: "size-6", punkt: "size-3" },
+} as const
+
+/**
+ * Das Symbol eines Geräts oder Dienstes als kleine Kachel, optional mit Zustandspunkt unten rechts. Rein
+ * schmückend (aria-hidden) — Name und Zustand stehen daneben als Text.
+ */
+export function Geraetesymbol({ bild, groesse = "md", punkt, leuchtet = false, className }: {
+  bild: Geraetebild
+  groesse?: keyof typeof GROESSE
+  punkt?: Punktzustand | null
+  /** Weicher Schein in der Bereichsfarbe — für die großen Kacheln im Kopf der Bereichskarten. */
+  leuchtet?: boolean
+  className?: string
+}) {
+  const g = GROESSE[groesse]
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        "relative inline-flex shrink-0 items-center justify-center bg-gradient-to-br ring-1 ring-inset",
+        BEREICH[bild.bereich], g.kachel, leuchtet && LEUCHTEN[bild.bereich], className,
+      )}
+    >
+      <bild.Icon className={g.icon} strokeWidth={1.75} />
+      {punkt && (
+        <span className={cn("absolute -right-0.5 -bottom-0.5 rounded-full ring-2 ring-[#0b0f16]", g.punkt, PUNKT[punkt])} />
+      )}
+    </span>
+  )
+}