DataMetric360 Board aus Claude Design importieren: iOS/Großbildschirm-Optikauflage

Neuer Vergleichsentwurf (Smartphone + Großbildschirm nebeneinander) direkt per
Claude-Design-MCP importiert. Enthaelt die responsive Grossbildschirm-Umsetzung
(Tab-Leiste wird zur Seitennavigation ab 860px) als reine CSS-Auflage.

audi-dashboard-app.js aus dem Export weicht 641 Zeilen vom produktiven Stand ab
(fehlende Vier-Kacheln-Kurzwahl, Balkenfarbe, Resttank-Liter) - deshalb NICHT
uebernommen, nur die CSS-Auflage (audi-dashboard-ios.css) nach homeassistant/www/
kopiert, aber noch nicht in die Panel-Ladelogik eingebunden. Entscheidung zur
Aktivierung und zur Aufloesung der JS-Abweichung steht noch aus.

design/README.md

@@ -13,6 +13,11 @@ Das ist der **Entwurf**, nicht der lauffähige Code. Umgesetzt wird er später i
 |---|---|
 | `DataMetric360.dc.html` | Einstiegsdatei des Entwurfs |
 | `DM360.dc.html` | Die eigentlichen Bildschirme und Zustände |
+| `DataMetric360 Board.dc.html` | Vergleichsansicht: dieselbe App gleichzeitig als Smartphone- und Großbildschirm-Rahmen nebeneinander, mit Bildschirm-/Theme-Umschalter. Steuert beide Rahmen per `postMessage`. |
+| `dm360-host.html` | Lädt `audi-dashboard-app.js` in einem eigenen `<audi-dashboard-panel>`, hängt danach `audi-dashboard-ios.css` in dessen Shadow-Root - der eigentliche Träger hinter dem Board. |
+| `ios-frame.jsx` | iOS-26-Gerätekachel (Statusleiste, Dynamic Island, Home-Indikator) - reine Optik, keine App-Logik. |
+| `audi-dashboard-ios.css` | **Die eigentliche Neuerung dieses Exports.** Optik-Auflage über `audi-dashboard.css`: iOS-natives Erscheinungsbild (44-px-Zeilen, transluzente Tab-Leiste, iOS-Schalter) plus - wichtig - die responsive Großbildschirm-Umsetzung per `@container (min-width:860px)` (Tab-Leiste wird zur seitlichen Navigation). Nach eigener Aussage der Datei rein additiv, rührt `audi-dashboard.css` und die App-Logik nicht an. **Nicht verifiziert, ob das zutrifft** - noch nicht in `homeassistant/www/` scharf geschaltet. |
+| `datametric360-ios.css` | Dieselbe Optik-Auflage, aber für die `@audi-dash/ui`-Komponentenklassen (`.ads-*`) statt für die Panel-eigenen Klassen - für später, wenn `companion-app/` eine UI bekommt. |
 | `support.js` | Hilfsfunktionen des Entwurfs |
 | `assets/` | Icons, Logos, Typenschilder und Schriften, die der Entwurf verwendet |
 | `uploads/` | Rohdateien, die ins Design-Projekt hochgeladen wurden (Schriften, Ringe, alle RS-/S-Typenschilder) |
@@ -20,8 +25,9 @@ Das ist der **Entwurf**, nicht der lauffähige Code. Umgesetzt wird er später i
 
 ## Stand dieses Exports
 
-Heruntergeladen am 2026-08-11. Zwei bekannte Abweichungen, die im Design-Projekt bereits als Korrektur
-beauftragt, in *diesem* Export aber noch nicht enthalten sind:
+Heruntergeladen am 2026-08-11 direkt per Claude-Design-MCP (nicht per ZIP). Zwei bekannte Abweichungen,
+die im Design-Projekt bereits als Korrektur beauftragt, in *diesem* Export aber noch nicht enthalten
+sind:
 
 1. **Falsches Modell:** zeigt „Audi RS 6 Avant" mit RS-6-Typenschild. Richtig ist der
    **RS 4 Avant competition** (siehe `../SPECIFICATION.md` §1).
@@ -31,6 +37,16 @@ beauftragt, in *diesem* Export aber noch nicht enthalten sind:
    Kfz-Steuer, Reifen, Fahrt-Detail, Tankvorgang-Detail sowie deutlich umfangreichere Einstellungen)
    - vollständige Liste in `../SPECIFICATION.md` §3.
 
+**Drittens, neu und wichtig:** das im Board-Entwurf verwendete `audi-dashboard-app.js` weicht vom
+tatsächlich in `../homeassistant/www/` laufenden Stand ab (641 Zeilen Unterschied im Diff). Der
+Design-Entwurf scheint auf einem älteren Stand aufzusetzen und enthält nicht alle seither gemachten
+Anpassungen - u. a. fehlen die Vier-Kacheln-Kurzwahl auf der Übersicht (Fahrzeugstatus/Service/
+Reifen/Tanken), die füllstandsabhängige Balkenfarbe und die Resttank-in-Liter-Angabe. **Deshalb wurde
+nur `audi-dashboard-ios.css` übernommen (reine CSS-Auflage, keine Logik) - `audi-dashboard-app.js`
+selbst wurde NICHT aus diesem Export übernommen**, um diese bereits fertigen Funktionen nicht zu
+verlieren. Bevor diese Auflage produktiv geschaltet wird, muss geklärt werden, ob/wie sie mit dem
+aktuellen `audi-dashboard-app.js` zusammenpasst.
+
 Dieser Ordner wird beim nächsten Export komplett ersetzt.
 
 ## Markenrechtlicher Hinweis