Phase 5: App-Shell mit responsivem Layout, Navigation und Theme

Zwei Layouts aus derselben Zusammensetzung: unter 1000px Tab-Leiste unten,
darueber Seitenleiste links mit Brotkrume statt Zurueck-Pfeil. Navigation
ist wie im alten Panel ein flacher Zustand mit fester ZURUECK-Tabelle statt
eines Router-Pakets - die Verschachtelung ist hoechstens dreistufig.

Theme und Tab-Beschriftung ueberleben einen Neustart (localStorage,
abgesichert fuer den Privatmodus), Startwert folgt der Systemeinstellung.
Symbole aus dem alten Panel uebernommen, damit App und Panel gleich aussehen.

Neun Rendertests belegen die Abnahmekriterien: Layoutwechsel in beide
Richtungen, Zurueck-Ziel ueber die Tabelle, Zahnrad statt Tab-Leiste fuer
die Einstellungen, Theme-Persistenz.

companion-app/src/hooks/useBreiterBildschirm.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react"
+
+/**
+ * Ab dieser Breite wechselt die App vom Handy- aufs Flächenlayout: Navigation
+ * wandert von unten nach links, Inhalte dürfen mehrspaltig werden. Der Wert
+ * stammt aus dem Design-Auftrag ("ab ca. 1000px").
+ */
+export const BREITER_BILDSCHIRM = "(min-width: 1000px)"
+
+export function useBreiterBildschirm(): boolean {
+  const [breit, setzeBreit] = useState<boolean>(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false
+    return window.matchMedia(BREITER_BILDSCHIRM).matches
+  })
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return
+    const abfrage = window.matchMedia(BREITER_BILDSCHIRM)
+    const beiAenderung = (ereignis: MediaQueryListEvent) => setzeBreit(ereignis.matches)
+    abfrage.addEventListener("change", beiAenderung)
+    setzeBreit(abfrage.matches)
+    return () => abfrage.removeEventListener("change", beiAenderung)
+  }, [])
+
+  return breit
+}