UI polish batch + fix genuinely-invisible map pins, Apple HIG audit

Battery voltage stat cutoff 13.2V -> 12.8V (values above that are already
alternator output, not the battery); fixed the battery chart's Y-axis
"stretching" on zoom by computing it once from the full dataset; removed
two explanatory paragraphs from the battery detail view; Tankfuellung now
shows "X % / X l"; removed the "noch etwa X l im Tank" suffix; fuel bar
color now matches the headline instead of a red/yellow/green gradient;
active/primary buttons are grey again, not red (destructive stays red per
HIG); select fields gained an Apple-HIG pull-down chevron (appearance:none
had removed the native one with nothing replacing it); selected menu icon
is white on desktop, matching mobile; Reifenfoto crops from the right edge;
"Montiert" button rebuilt as a compact top-right pill with a 44px invisible
tap target; tab-bar active highlight now covers icon+label, not just the
icon; removed two leftover explanatory texts from Einstellungen.

Root-caused the map pins looking "transparent": the CI poi-car/poi icons
are pure contour forms (nonzero-fill-rule ring + thin detail lines, only
13-40% of their own bounding box actually filled). Fixed by extracting each
icon's own first sub-path (the true outer balloon silhouette, verified by
rasterizing it in isolation) as a solid-filled layer behind the original
icon, applied to both the vehicle and station markers.

Read Color/Typography/Layout/Buttons/Materials on developer.apple.com and
applied the user-approved subset (11px text floor, 44px tap targets);
declined items (font weight, materials) documented with rationale.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

homeassistant/www/audi-dashboard-ios.css

@@ -122,14 +122,15 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
   letter-spacing:0;text-transform:none;color:var(--fg2)}
 .seg button.on{background:var(--tile-2);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.25)}
 
-/* Rot bleibt Akzent/Primäraktion/destruktiv, nicht Flächenfarbe jeder Aktion
-   (Design-Review 2026-08-13 §B): .aktion allein ist die neutrale
-   Sekundäraktion, .primaer die einzige rot gefüllte Fläche. */
+/* Aktive/Primär-Buttons sind grau, nicht rot (Nutzerwunsch 2026-08-16): Rot
+   bleibt nur noch für destruktive Aktionen (.loeschen). .aktion allein ist
+   die neutrale Sekundäraktion, .primaer die grau gefüllte Hauptaktion -
+   dieselbe Fläche wie die Grundauflage (var(--fg)/var(--canvas)). */
 .aktion{margin-top:18px;padding:15px;border:0;border-radius:14px;
   background:var(--ios-fill);color:var(--fg);font-size:16px;font-weight:400;
   letter-spacing:0;text-transform:none}
 .aktion:hover{background:var(--tile-2)}
-.aktion.primaer{background:var(--ios-tint);color:#fff}
+.aktion.primaer{background:var(--fg);color:var(--canvas)}
 .aktion.primaer:hover{filter:brightness(1.08)}
 .aktion.loeschen{background:var(--ios-fill);color:var(--bad);border:0}
 .aktion.loeschen:hover{background:var(--bad);color:#fff;filter:none}
@@ -151,6 +152,18 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
 .feld input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
 .feld select{background:var(--ios-fill);padding:8px 10px}
 .feld input:focus,.feld select:focus{color:var(--fg)}
+/* Pull-down-Button-Optik (Apple HIG): ein einzelner Abwaerts-Chevron statt
+   des (durch appearance:none in audi-dashboard.css bereits entfernten)
+   nativen Browser-Pfeils - macht die Auswahlfelder als solche erkennbar,
+   ohne ein eigenes Menue-Widget nachzubauen. Farbe fix auf --ios-grau, das
+   ist bereits die Farbe aller anderen Chevrons (.chev) in beiden Themes. */
+.feld select{
+  padding-right:28px;
+  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%238E8E93' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat:no-repeat;
+  background-position:right 9px center;
+  background-size:10px 10px;
+}
 .notiz{background:var(--ios-fill);border:0;border-radius:12px;font-size:16px}
 
 .switch{width:51px;height:31px}
@@ -201,6 +214,13 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
 .tab.on{color:var(--fg);border-top-color:transparent}
 .tab.on .tabpille{background:rgba(255,255,255,.14)}
 :host([data-theme="tag"]) .tab.on .tabpille{background:rgba(0,0,0,.07)}
+/* Ist die Beschriftung sichtbar (nicht .tabbar.ohne), soll die graue Flaeche
+   Icon UND Text umschliessen statt nur die enge Pille ums Icon - die Flaeche
+   wandert dafuer vom Icon-Symbol auf den ganzen Tab-Knopf. Im reinen
+   Icon-Modus bleibt die enge Pille wie zuvor. */
+.tabbar:not(.ohne) .tab.on{background:rgba(255,255,255,.14);border-radius:14px}
+:host([data-theme="tag"]) .tabbar:not(.ohne) .tab.on{background:rgba(0,0,0,.07)}
+.tabbar:not(.ohne) .tab.on .tabpille{background:none}
 .tabbar.ohne .tab{padding:11px 2px 10px}
 
 :focus-visible{outline:2px solid var(--ios-tint);outline-offset:2px}
@@ -254,9 +274,9 @@ main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smo
   .tabpille{width:auto;height:auto;border-radius:0;background:none}
   .tab.on .tabpille{background:none}
   .tab:hover{background:var(--tile)}
-  /* Aktive Navigation: Rot bleibt Text-/Icon-Akzent, die Fläche wird neutral
-     statt rosa hinterlegt (Design-Review §B - Rot nicht als Flächenfarbe). */
-  .tab.on{background:var(--ios-fill);color:var(--ios-tint)}
+  /* Aktives Symbol: dieselbe Farbe wie die Kopfzeile (--fg), nicht mehr Rot -
+     Fläche bleibt neutral hinterlegt statt rosa (Design-Review §B). */
+  .tab.on{background:var(--ios-fill);color:var(--fg)}
   .tabbar.ohne .tab span{display:block}
   .tabbar.ohne .tab{padding:12px 14px;gap:14px}
   .tabbar.ohne .tab svg{width:22px;height:22px}