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 <noreply@anthropic.com>

homeassistant/www/audi-dashboard-app.js

@@ -1925,8 +1925,8 @@ function vEinst() {
   <div class="tile"><span class="label">Version</span>
     <dl class="rows">
       <div class="row"><dt>Dashboard</dt><dd>${esc(CONFIG.version)}</dd></div>
-      <div class="row"><dt>Fahrzeugdaten</dt><dd>EU Data Act<small>Abruf alle 15 Minuten</small></dd></div>
-      <div class="row" style="border-bottom:0"><dt>Position</dt><dd>iPhone<small>Companion App</small></dd></div>
+      <div class="row"><dt>Fahrzeugdaten</dt><dd>FMM003<small>Zündung · Batterie</small></dd></div>
+      <div class="row" style="border-bottom:0"><dt>Position</dt><dd>FMM003<small>GPS-Tracker</small></dd></div>
     </dl>
     ${(() => {
       const s = UPDATE_STATUS;

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

homeassistant/www/audi-dashboard-version.json

@@ -1 +1 @@
-{"version": 1786730400}
+{"version": 1786744000}

homeassistant/www/audi-dashboard.css

@@ -173,8 +173,13 @@
    bedienbar. Auf grossen Bildschirmen gibt es damit zwei Wege in die
    Einstellungen (Ringe und Zahnrad) - unschaedlich, und der Zugang haengt
    nicht mehr davon ab, ob audi-dashboard-ios.css geladen wurde. */
-.rings { width: 42px; height: 24px; color: var(--fg); }
-.rings svg { width: 42px; height: auto; }
+/* Design-Audit 2026-08-13: in Telefonbreite ist dies der einzige Zugang zu
+   den Einstellungen (siehe Kommentar oben), war mit 42px aber deutlich
+   kleiner als jeder andere Symbol-Knopf in der Kopfzeile (.themebtn/
+   .profilbtn/.back sind alle 44px) und lag damit unter der ueblichen
+   44px-Mindestgroesse fuer Tippflaechen. */
+.rings { width: 58px; height: 32px; color: var(--fg); }
+.rings svg { width: 58px; height: auto; }
 
 /* Der Markenklon in der Seitenleiste wird vom Skript unbedingt in die
    Menueleiste gehaengt; sichtbar macht ihn erst die iOS-Auflage ab 860px.
@@ -490,7 +495,10 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
   min-height: 56px;
   border-bottom: 1px solid var(--line);
 }
-.feld label { font-size: 14px; color: var(--fg2); flex: 1 1 auto; min-width: 0; line-height: 1.35; }
+/* :not(.switch): der Schalter (Tanken/Einstellungen etc.) ist selbst ein
+   <label class="switch">, kein Textlabel - ohne den Ausschluss erbte er
+   dieselbe flex:1 1 auto-Regel und zog sich über die ganze Zeilenbreite. */
+.feld label:not(.switch) { font-size: 14px; color: var(--fg2); flex: 1 1 auto; min-width: 0; line-height: 1.35; }
 /* Eingaben nie breiter als die Kachel: die im Markup gesetzten festen
    Breiten (width:132px) bleiben Obergrenze, schrumpfen aber mit. */
 .feld input, .feld select, .notiz {
@@ -619,7 +627,12 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
 .acc-h { transition: background .15s; }
 .acc-h:active { background: var(--tile-2); }
 .mark {
-  width: 6px; height: 10px;
+  /* Design-Audit 2026-08-13: die Border-Ecken-Technik (zwei Kanten +
+     45deg-Drehung) braucht ein Quadrat, um einen sauberen Chevron zu
+     ergeben - bei 6x10px (nicht quadratisch, wie fuer die SVG-Chevrons
+     .chev/.go gedacht) sind die beiden Kantenlaengen ungleich lang und das
+     Ergebnis sah eher wie ein Haekchen als ein Pfeil aus. */
+  width: 8px; height: 8px;
   border-right: 1.4px solid var(--fg3);
   border-bottom: 1.4px solid var(--fg3);
   transform: rotate(-45deg);