EU-Data-Act-Reste bereinigt, Slider-Bug behoben, zwei Design-Audit-Runden umgesetzt

Entfernt die letzten Verweise auf die abgeloeste TommiG1/HA_VAG-EU-Data-Act-
Integration (Versionstile, Testumgebungs-Fixture) und ersetzt sie durch die
FMM003-Werte. Behebt eine CSS-Spezifitaetskollision, durch die alle iOS-
Toggle-Switches viel zu breit gerendert wurden. Dokumentiert und behebt sieben
Layout-Befunde aus zwei Design-Audit-Runden (Zahnrad-Ueberlauf auf breiten
Bildschirmen, zu kleine Ringe als mobiler Einstellungen-Zugang, zu breite
Popups, Kopfzeilen-Versatz, ueberlappende Kachel-Pfeile, fehlender
Editierbarkeits-Hinweis bei Auswahlfeldern, Haekchen-artige Auf/Zu-Pfeile) -
siehe DESIGN_AUDIT_2026-08-13.md fuer Root-Cause und Beleg je Befund.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

homeassistant/www/audi-dashboard-ios.css

@@ -91,7 +91,14 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
 .tile{padding:16px 18px;margin-bottom:14px;border-radius:var(--r-tile)}
 .tile.flat{padding:0}
 .tilebtn:hover{background:var(--tile-2)}
-.tilebtn .go{top:50%;margin-top:-5px;right:18px;stroke:var(--ios-grau);stroke-width:1.6}
+/* top/margin-top NICHT von der Basis uebernehmen: alle .go-Kacheln
+   (Fahrzeug/Service/Versicherung/Reifen/Schutzbrief) sind mehrzeilige
+   Kacheln mit .label oben plus einer ganzen dl.rows-Liste darunter - eine
+   vertikale 50%-Zentrierung landet dann mitten in der Zeilenliste statt
+   neben dem Titel und ueberlappt umgebrochenen Zeilentext (Design-Audit
+   2026-08-13). Bleibt bei top:var(--sp-5) aus der Basis, nur rechter
+   Abstand/Farbe werden fuer die iOS-Optik angepasst. */
+.tilebtn .go{right:18px;stroke:var(--ios-grau);stroke-width:1.6}
 .label{font-size:13px;letter-spacing:.01em;text-transform:none;color:var(--fg3)}
 .row{min-height:44px;padding:11px 0;border-bottom:1px solid var(--ios-sep)}
 .row dt{font-size:16px;color:var(--fg)}
@@ -131,6 +138,12 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
 .feld label{font-size:16px;color:var(--fg)}
 .feld input,.feld select{background:transparent;border:0;border-radius:8px;font-size:16px;
   padding:8px 4px;color:var(--fg2)}
+/* Design-Audit 2026-08-13: ein <select> (z.B. Oelwechsel-Intervall "10.000 km"/
+   "1 Jahr") sah wie reiner, nicht editierbarer Text aus, seit hier Rahmen/
+   Flaeche entfernt wurden - anders als bei freien Texteingaben zeigt iOS bei
+   Picker-Feldern wie diesem ueblicherweise die Akzentfarbe statt Fliesstext-
+   Grau als Hinweis "hier gibt es eine Auswahl". */
+.feld select{color:var(--ios-tint)}
 .feld input:focus,.feld select:focus{background:var(--ios-fill);color:var(--fg)}
 .mitEinheit input{background:var(--ios-fill);padding:8px 10px}
 .notiz{background:var(--ios-fill);border:0;border-radius:12px;font-size:16px}
@@ -207,12 +220,22 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
   :host > div{height:calc(100dvh - 24px)}
   .phone{display:grid;grid-template-columns:264px minmax(0,1fr);
     grid-template-rows:auto auto minmax(0,1fr)}
-  .topbar{grid-column:2;grid-row:1;padding:38px 44px 8px}
-  .phone:has(.back.on) .topbar{grid-column:2;grid-row:1;padding:34px 44px 8px;justify-content:flex-start}
+  /* max-width:860px muss zu main#view passen, sonst treibt der Flex-Inhalt
+     (.head{flex:1} schiebt .profilbtn nach rechts) das Zahnrad bis an den
+     Rand der vollen Grid-Spalte statt an den Rand der Inhaltsspalte darunter -
+     auf breiten Bildschirmen klaffte da eine sichtbare Luecke. */
+  .topbar{grid-column:2;grid-row:1;padding:38px 44px 8px;max-width:860px}
+  .phone:has(.back.on) .topbar{grid-column:2;grid-row:1;padding:34px 44px 8px;justify-content:flex-start;max-width:860px}
+  /* Design-Audit 2026-08-13: .back ist auch inaktiv (opacity:0) noch ein
+     44px breites Flex-Element plus Gap - auf Wurzelseiten ohne Zurueck-Pfeil
+     schob das die Kopfzeile (.head/.title) sichtbar weiter nach rechts als
+     main#view darunter beginnt. Auf Detailseiten (.back.on) bleibt der Platz
+     bewusst reserviert, das ist dort ein echter, bedienbarer Knopf. */
+  .back:not(.on){width:0;min-width:0;margin:0;overflow:hidden}
   .phone:has(.back.on) .head{align-items:flex-start}
   .phone:has(.back.on) .title{font-size:26px;text-align:left}
   .title{font-size:34px}
-  .ptr{grid-column:2;grid-row:2}
+  .ptr{grid-column:2;grid-row:2;max-width:860px}
   main#view{--seitenrand:44px;grid-column:2;grid-row:3;padding:8px var(--seitenrand) 48px;max-width:860px}
 
   .tabbar{grid-column:1;grid-row:1 / 4;display:flex;flex-direction:column;gap:4px;
@@ -247,6 +270,16 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
   .carfix.klein,.bildbox.carfix.klein{height:220px}
   .bildgrid{grid-template-columns:repeat(4,1fr)}
   .quad{gap:14px}
+
+  /* Design-Audit 2026-08-13: .setup-popup/.sdpopup/.sheet/.standortmenu sind
+     position:absolute relativ zu .phone (der vollen Rasterbreite, nicht nur
+     der Inhaltsspalte) mit left/right auf einen festen Abstand - auf breiten
+     Bildschirmen ergab das einen fast bildschirmbreiten Dialog statt einer
+     ruhigen Karte. max-width + margin:auto zentriert sie innerhalb des
+     bestehenden left/right-Abstands, ohne die transform-basierte
+     Einblend-Animation dieser Elemente zu beruehren. */
+  .setup-popup,.sdpopup,.sheet{max-width:560px;margin-left:auto;margin-right:auto}
+  .standortmenu{max-width:640px;margin-left:auto;margin-right:auto}
 }
 
 /* Fahrzeugbild randlos wie in einer Fahrzeug-App: der Platzhalter bleibt