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/screens/Typenschild.tsx

@@ -0,0 +1,52 @@
+/**
+ * Modell-Typenschild und Vier-Ringe-Zeichen.
+ *
+ * Beide wechseln mit dem Erscheinungsbild: auf dunklem Grund die negative,
+ * auf hellem die positive Fassung. Es gibt nur die Modelle, für die ein
+ * Typenschild vorliegt — für alles andere zeigt die App nichts statt eines
+ * falschen Schildes.
+ */
+
+import ringeHell from "../assets/audi/audi-rings-white.svg"
+import ringeDunkel from "../assets/audi/audi-rings-black.svg"
+import { useTheme } from "../theme"
+
+const SCHILDER = import.meta.glob<string>("../assets/audi/typenschilder/*.svg", {
+  eager: true,
+  import: "default",
+  query: "?url",
+})
+
+/** Modellname aus dem Profil → Dateikürzel des Typenschilds. */
+export function schildKuerzel(titel: string): string | null {
+  const norm = titel.toLowerCase().replace(/\s+/g, " ").trim()
+  const treffer = /\b(rs)\s?([34567])\b/.exec(norm) ?? /\b(s)\s?(q7|3)\b/.exec(norm)
+  if (!treffer) return null
+  const [, reihe, zahl] = treffer
+  return `${reihe}${zahl}`.replace("sq7", "sq7")
+}
+
+export function Typenschild({ modell, hoehe = 22 }: { modell: string; hoehe?: number }) {
+  const [theme] = useTheme()
+  const kuerzel = schildKuerzel(modell)
+  if (!kuerzel) return null
+
+  const variante = theme === "nacht" ? "negative" : "positive"
+  const pfad = `../assets/audi/typenschilder/${kuerzel}-${variante}.svg`
+  const quelle = SCHILDER[pfad]
+  if (!quelle) return null
+
+  return <img src={quelle} alt={modell} height={hoehe} style={{ height: hoehe, width: "auto" }} />
+}
+
+export function VierRinge({ hoehe = 20 }: { hoehe?: number }) {
+  const [theme] = useTheme()
+  return (
+    <img
+      src={theme === "nacht" ? ringeHell : ringeDunkel}
+      alt="Audi"
+      height={hoehe}
+      style={{ height: hoehe, width: "auto" }}
+    />
+  )
+}

companion-app/src/screens/Uebersicht.tsx

@@ -15,6 +15,7 @@ import { datum, datumZeit, dauer, de, deOderStrich, eur } from "../format"
 import type { SeitenName } from "../navigation"
 import { Leerzustand, NaviKachel, Wertzeile, Werteliste } from "./bausteine"
 import { Bild } from "./Bild"
+import { Typenschild } from "./Typenschild"
 
 export function Uebersicht({ geheZu }: { geheZu: (name: SeitenName, id?: string) => void }) {
   const { fahrzeug, einstellungen, fahrten, tankvorgaenge, jetztAktualisieren, statusStand } =
@@ -57,11 +58,14 @@ export function Uebersicht({ geheZu }: { geheZu: (name: SeitenName, id?: string)
           name="Fahrzeugbild"
         />
         <div className="dm-szene__text">
-          <div className="ads-title">
-            {einstellungen.fahrzeugtitel}{" "}
-            {einstellungen.fahrzeugzusatz && (
-              <span className="ads-sport">{einstellungen.fahrzeugzusatz}</span>
-            )}
+          <div className="dm-szene__marke">
+            <Typenschild modell={einstellungen.fahrzeugtitel} hoehe={20} />
+            <div className="ads-title">
+              {einstellungen.fahrzeugtitel}{" "}
+              {einstellungen.fahrzeugzusatz && (
+                <span className="ads-sport">{einstellungen.fahrzeugzusatz}</span>
+              )}
+            </div>
           </div>
           <span className="ads-eyebrow">
             {einstellungen.kennzeichen || "Kennzeichen nicht hinterlegt"}