iOS/Grossbildschirm-Auflage im HA-Panel scharf schalten

audi-dashboard-app.js laedt jetzt zusaetzlich audi-dashboard-ios.css in
den Shadow-Root (zweiter <link>, rein additiv neben audi-dashboard.css).
Im Docker-Testcontainer bei 375px (Tab-Leiste unten) und 1280px (Grid mit
264px-Seitennavigation) verifiziert.

Zwei Fixes an audi-dashboard-ios.css waren dafuer noetig:
- :host-Selektoren werden von diesem Browser innerhalb von @container
  verworfen (kein Fehler, die Regel fehlt einfach im CSSOM) - die alte
  412px-Zentrierung aus audi-dashboard.css wird deshalb unbedingt statt
  nur ab 860px aufgehoben.
- audi-dashboard-version.json hochgezaehlt, sonst liefert der Browser die
  alte Datei aus dem HTTP-Cache trotz neuem Serverstand.

design/README.md dokumentiert beide Fixes fuer kuenftige Aenderungen an
dieser Datei.

design/README.md

@@ -16,7 +16,7 @@ Das ist der **Entwurf**, nicht der lauffähige Code. Umgesetzt wird er später i
 | `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. |
+| `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). **Seit 2026-08-11 in `homeassistant/www/` scharf geschaltet und im Docker-Testcontainer bei 375px und 1280px verifiziert** - rührt `audi-dashboard-app.js` nicht an, wie behauptet. |
 | `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 |
@@ -44,8 +44,30 @@ Anpassungen - u. a. fehlen die Vier-Kacheln-Kurzwahl auf der Übersicht (Fahrzeu
 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.
+verlieren.
+
+**Aktivierung 2026-08-11:** `audi-dashboard-ios.css` ist jetzt in
+`../homeassistant/www/audi-dashboard-app.js` (Stylesheet-Loader, ~Zeile 3098) fest verdrahtet - als
+zweiter `<link>` neben `audi-dashboard.css`, rein additiv. Im Docker-Testcontainer bei 375px
+(Handy: `.phone` bleibt `flex`, Tab-Leiste unten) und 1280px (Desktop: `.phone` wird `grid`,
+264px-Seitennavigation, Inhalt bis 860px begrenzt) verifiziert.
+
+Dabei zwei Fixes nötig, die für künftige Arbeit an dieser Datei wichtig sind:
+1. **`:host`-Selektoren werden von diesem Browser innerhalb von `@container`-Blöcken verworfen**
+   (unbedingtes `:host > div{...}` parst und wirkt, dasselbe innerhalb `@container(){}` verschwindet
+   spurlos aus dem CSSOM - kein Syntaxfehler, die Regel fehlt einfach). Der alten `:host > div`-
+   Zentrierung aus `audi-dashboard.css` (`max-width:412px`, für die alte Einzelgröße gedacht) musste
+   deshalb **unbedingt** statt bedingt (nur ab 860px) die Deckelung genommen werden - auf schmalen
+   Bildschirmen macht der Viewport selbst die Breite eng genug, das ist folgenlos.
+2. **`audi-dashboard-version.json` muss bei jeder CSS-/JS-Änderung im Testcontainer hochgezählt
+   werden**, sonst liefert der Browser die alte Datei aus dem HTTP-Cache aus, obwohl der Server
+   längst die neue hat (an `audi-dashboard-panel.js`'s eigenem Cache-Busting-Mechanismus erkennbar,
+   siehe dessen Kommentar). Zusätzlich cacht `window.__audiDashboardStarten` das Ladeergebnis pro
+   Browser-Tab - eine SPA-interne Navigation zur selben Panel-URL lädt nicht neu; ein neuer Tab
+   (oder echter Hard-Reload) ist bei Verifikationen nötig.
+
+Bevor diese Auflage weitergehend produktiv genutzt wird, muss noch geklärt werden, ob/wie sie mit
+zukünftigen Änderungen am aktuellen `audi-dashboard-app.js` zusammenpasst.
 
 Dieser Ordner wird beim nächsten Export komplett ersetzt.
 

homeassistant/www/audi-dashboard-app.js

@@ -3100,6 +3100,13 @@ class AudiDashboardPanel extends HTMLElement {
     link.href = `/local/audi-dashboard.css?v=${CSS_VERSION}`;
     ROOT.appendChild(link);
 
+    /* iOS-native Optik + responsive Grossbildschirm-Layout (@container ab
+       860px), rein additive Auflage aus dem Claude-Design-Entwurf 2026-08-11. */
+    const linkIos = document.createElement("link");
+    linkIos.rel = "stylesheet";
+    linkIos.href = `/local/audi-dashboard-ios.css?v=${CSS_VERSION}`;
+    ROOT.appendChild(linkIos);
+
     const wrapper = document.createElement("div");
     wrapper.innerHTML = `
     <div class="phone">

homeassistant/www/audi-dashboard-ios.css

@@ -42,8 +42,13 @@
 
 body{padding:0;background:var(--canvas)}
 html,body{height:100%}
-/* Der von _aufbauen() eingefuegte Wrapper zwischen Host und .phone */
-:host > div{height:100%}
+/* Der von _aufbauen() eingefuegte Wrapper zwischen Host und .phone. Die
+   412px-Deckelung aus audi-dashboard.css (fuer die alte Einzelgroesse
+   gedacht) wird hier unbedingt aufgehoben, nicht nur ab 860px: auf
+   schmalen Bildschirmen macht der Viewport selbst die Breite eng genug,
+   :host-Selektoren innerhalb @container werden von diesem Browser aber
+   offenbar verworfen - deshalb unbedingt statt bedingt. */
+:host > div{height:100%;max-width:none}
 .phone{width:100%;max-width:none;height:100%;border-radius:0;
   font-family:"Audi Type",Helvetica,Arial,sans-serif;
   -webkit-font-smoothing:antialiased;letter-spacing:0}

homeassistant/www/audi-dashboard-version.json

@@ -1 +1 @@
-{"version": 1786377886}
+{"version": 1786377887}