Phase 8: Audi-Schrift, Vier-Ringe und Typenschilder

Die drei Schriftschnitte stammen aus dem Panel, wo sie als base64 im
Stylesheet lagen - als eigene woff2-Dateien sind sie zwischenspeicherbar
statt bei jedem Laden erneut uebertragen zu werden. Typenschilder und Ringe
wechseln mit dem Erscheinungsbild.

Lizenzgrenze eingehalten und geprueft: design-system bleibt unveraendert und
enthaelt keine Markendateien, weil es nach aussen hochgeladen wird. Die App
darf sie nutzen, weil sie nur seitlich installiert wird.

Dabei noch eine Typungenauigkeit korrigiert: technik und ausstattung im
Profil sind Listen von Gruppen, waren aber wie die uebrigen Abschnitte als
Objekt deklariert.

companion-app/src/Shell.tsx

@@ -12,6 +12,7 @@ import type { ReactNode } from "react"
 import { TabBar } from "@audi-dash/ui"
 
 import { useBreiterBildschirm } from "./hooks/useBreiterBildschirm"
+import { VierRinge } from "./screens/Typenschild"
 import type { Hauptbereich, Route, SeitenName } from "./navigation"
 import { TITEL, ZURUECK, bereichVon, istHauptbereich } from "./navigation"
 import {
@@ -79,7 +80,10 @@ export function Shell({ route, geheZu, tabBeschriftung, hinweis, children }: She
     return (
       <>
         <nav className="dm-seitenleiste" aria-label="Hauptbereiche">
-          <span className="ads-eyebrow dm-seitenleiste__marke">DataMetric360</span>
+          <div className="dm-seitenleiste__marke">
+            <VierRinge hoehe={18} />
+            <span className="ads-eyebrow">DataMetric360</span>
+          </div>
           {BEREICHE.map((bereich) => (
             <button
               key={bereich.key}