design v5: alle Seiten im neuen Look

- Gemeinsamer Lagekopf für beide Cockpits (Statusblock mit Schein, Kacheln mit
  Logo/Symbol und Zustandspunkt); KI-Box-Lampen als Dienst-Kacheln, Texte in
  normaler Schreibung. Alte Lampen-Komponente und Leuchtenfarben entfernt.
- Instrumente, Zählwerk, Checkliste, Flugplan, Radar-Kasten im neuen Stil;
  Instrumente ruhig in Indigo, Farbe für Zustände erst ab der Grenze.
- Übrige Seiten (Updates, Modelle, Nutzung, Suche, Monitoring, Dienste,
  Einstellungen, Protokoll, Dialoge): Glasflächen, feine Linien, Etiketten
  statt Instrumenten-Schild, Glas-Eingabefelder, deckende Dialoge.
- Dienste der KI-Box und Geräte im Monitoring mit Symbol bzw. Logo.
- Einstellungen: Karten mit Bereichs-Schein; Lizenzhinweis der Logos.

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

frontend/src/components/cockpit/Warnpanel.tsx

@@ -1,39 +1,26 @@
-import { cn } from "cn"
+import { Lagekachel, Lagekopf } from "@/components/cockpit/Lagekopf"
+import { hauptleuchte } from "@/lib/anzeige"
+import { boxbild } from "@/lib/geraetebild"
 import type { Lampe as LampenDaten, Start } from "@/lib/typen"
-import { hauptleuchte, LEUCHTE } from "@/lib/anzeige"
-import { Lampe } from "./Lampe"
 
 type Zustand = Start["zustand"]
 
+/**
+ * Der Kopf des KI-Box-Cockpits: links die Hauptleuchte (drücken führt zur Checkliste, wenn etwas offen ist), rechts
+ * je Dienst eine Kachel — Motor, Hirn, Coder, Hermes, Aufträge, Sicherung, Platte, Updates.
+ */
 export function Warnpanel({ zustand, lampen, onAnsehen }: {
   zustand: Zustand
   lampen: LampenDaten[]
   onAnsehen: () => void
 }) {
   const h = hauptleuchte(zustand)
-  const aktiv = h.art === "gelb" || h.art === "rot"
   return (
-    <section aria-label="Warnpanel" className="grid gap-4 md:grid-cols-[260px_minmax(0,1fr)] md:gap-5">
-      <button
-        type="button"
-        onClick={onAnsehen}
-        disabled={!aktiv}
-        aria-label={`${h.oben} ${h.mitte}`}
-        className={cn(
-          "flex min-h-[130px] flex-col items-center justify-center gap-1 rounded-2xl border px-4 py-4 font-anzeige transition-colors",
-          LEUCHTE[h.art],
-          aktiv ? "cursor-pointer" : "cursor-default",
-        )}
-      >
-        <span className="schild text-sm tracking-[0.26em]">{h.oben}</span>
-        <span className="text-[40px] leading-none font-bold tracking-[0.04em] sm:text-[44px]">{h.mitte}</span>
-        <span className="font-sans text-sm opacity-80">{h.unten}</span>
-      </button>
-      <ul className="grid grid-cols-2 gap-2.5 rounded-2xl border border-linie bg-panel p-3 sm:grid-cols-4">
-        {lampen.map((l) => (
-          <Lampe key={l.id} lampe={l} />
-        ))}
-      </ul>
-    </section>
+    <Lagekopf art={h.art} oben={h.oben} mitte={h.mitte} unten={h.unten} aktiv={h.art === "gelb" || h.art === "rot"}
+      onAnsehen={onAnsehen} label="Warnpanel">
+      {lampen.map((l) => (
+        <Lagekachel key={l.id} bild={boxbild(l.id)} name={l.label} wert={l.wert} zustand={l.zustand} />
+      ))}
+    </Lagekopf>
   )
 }