Bedienbarkeit, CSS-Robustheit und drei Anzeigefehler

Befund 9: In Telefonbreite blendet die iOS-Auflage das Zahnrad aus, die Ringe
waren dort der einzige Zugang zu den Einstellungen - als div mit
pointer-events:none aber weder fokussierbar noch fuer Sprachausgabe
erreichbar. Sie sind jetzt ein echter Knopf mit aria-label, in jeder Breite
bedienbar und unabhaengig davon, ob die Auflage geladen wurde.

Befund 10: .navmarke{display:none} stand nur in der iOS-Auflage. Ohne sie
waere der Markenklon ein sechstes Element im fuenfspaltigen Raster und die
Menueleiste zerfiele. Die Regel steht jetzt in der Basis-CSS, die
Sichtbarkeit in der Auflage - genau andersherum als bisher.

Befund 13: Das Setup-Fenster deklariert role=dialog aria-modal=true, hielt den
Vertrag aber nicht ein. Escape schliesst jetzt (Reihenfolge: Auswahlliste,
dann Fenster), der Tabulator wandert im Fenster im Kreis statt in den
verdeckten Hintergrund, und der Filterschalter hat einen zugaenglichen Namen.

CSS-Spezifitaet: main{padding} in der Auflage verlor gegen main#view in der
Basis - auf grossen Bildschirmen blieb der Seitenrand bei 20px statt 44px.
Der Rand liegt jetzt in einer Variablen, die auch der negative Rand der
randlosen Standortkarte benutzt; sonst haette deren Ausgleich nach dem Fix
nicht mehr gepasst.

Drei Anzeigefehler, im Browser gegen die Testinstanz gefunden und behoben:
ein unlesbares Datum ergab NaN/N statt eines Strichs (das Profil wird laut
INSTALL.md von Hand gepflegt, ein ISO-Datum genuegt), ein fehlender
Tanksensor ergab 0 Prozent statt unbekannt, und neben dem Typenschild stand
die Ausfuehrung doppelt, wenn sie schon im Modellnamen steckt.

Alles im echten Panel geprueft: #marke ist ein BUTTON mit aria-label, der
Markenklon ist ohne die Auflage versteckt, der Seitenrand folgt der
Variablen, und die drei Anzeigen zeigen jetzt Striche statt Rechenreste.

homeassistant/www/audi-dashboard.css

@@ -165,10 +165,23 @@
 .themebtn:hover { background: var(--tile-2); color: var(--fg); }
 .themebtn:active { background: var(--tile-2); color: var(--fg); transform: scale(.92); }
 .themebtn svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
-/* D4: die Ringe sind Marke, kein Knopf - sie sitzen links neben dem
-   Fahrzeugnamen und nehmen keine Tipps an. */
-.rings { width: 42px; height: 24px; color: var(--fg); pointer-events: none; }
+/* D4 war urspruenglich: die Ringe sind Marke, kein Knopf. Seit die
+   iOS-Auflage in Telefonbreite das Zahnrad ausblendet, sind sie dort aber der
+   einzige Zugang zu den Einstellungen - und als reines div mit
+   pointer-events:none war dieser Zugang fuer Tastatur und Sprachausgabe gar
+   nicht erreichbar. Sie sind deshalb jetzt ein echter Knopf, in jeder Breite
+   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; }
+
+/* Der Markenklon in der Seitenleiste wird vom Skript unbedingt in die
+   Menueleiste gehaengt; sichtbar macht ihn erst die iOS-Auflage ab 860px.
+   Das Verstecken gehoert deshalb hierher: laedt die Auflage nicht (404,
+   Cache), waere er sonst ein sechstes Element im fuenfspaltigen Raster und
+   die Menueleiste zerfiele. */
+.navmarke { display: none; }
 .profilbtn {
   display: inline-flex; align-items: center; justify-content: center;
   width: 44px; height: 44px; border-radius: 50%;
@@ -195,11 +208,16 @@
 @keyframes drehen { to { transform: rotate(360deg); } }
 
 main#view {
+  /* Der seitliche Rand steht als Variable, weil randlose Elemente ihn per
+     negativem Rand ausgleichen muessen (siehe .standort-vollbild). Wer das
+     Padding aendert, ohne die Variable zu benutzen, verschiebt die randlosen
+     Elemente unbemerkt. */
+  --seitenrand: 20px;
   flex: 1 1 0;
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: 10px 20px 34px;
+  padding: 10px var(--seitenrand) 34px;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
@@ -691,7 +709,7 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
 }
 @keyframes user-pulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
 
-.standort-vollbild { position: relative; height: min(640px, calc(100dvh - 190px)); border-radius: var(--r-tile); overflow: hidden; margin: 0 -20px; }
+.standort-vollbild { position: relative; height: min(640px, calc(100dvh - 190px)); border-radius: var(--r-tile); overflow: hidden; margin: 0 calc(-1 * var(--seitenrand)); }
 .standort-karte { width: 100%; height: 100%; }
 
 .kartensteuerung {