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/diagramme/Kennzahl.tsx

@@ -26,11 +26,11 @@ export function Kennzahl({ label, wert, einheit, punkte, max, zustand = "ruhig",
 }) {
   const z = ZUSTAND[zustand]
   return (
-    <div className="flex min-w-0 flex-col gap-1.5 rounded-xl border border-linie bg-erhaben/50 px-3.5 pt-3 pb-2">
-      <span className="schild text-xs tracking-[0.18em] text-text-3">{label}</span>
+    <div className="flaeche-innen flex min-w-0 flex-col gap-1.5 rounded-xl px-3.5 pt-3 pb-2">
+      <span className="etikett text-[11px] text-text-3">{label}</span>
       <span className="flex items-baseline gap-2">
-        <span className={cn("font-anzeige text-[28px] leading-none font-bold", z.wert)}>{wertText(wert, einheit)}</span>
-        {z.marke && <span className={cn("schild text-[11px]", z.wert)}>{z.marke}</span>}
+        <span className={cn("font-anzeige text-[28px] leading-none font-semibold tabular-nums", z.wert)}>{wertText(wert, einheit)}</span>
+        {z.marke && <span className={cn("etikett text-[10.5px]", z.wert)}>{z.marke}</span>}
       </span>
       {punkte && punkte.length > 1 && (
         <Sparkline punkte={punkte} max={max} farbe={farbe} beschriftung={`${label}, ${zeitraumText}`} />