Desktop-Sidebar-Markenklon (.navmarke) aus Claude Design nachziehen

audi-dashboard-app.js war bereits mit dem Design-Projekt identisch, aber
audi-dashboard-ios.css war seit einer Weile nicht mehr neu gezogen worden:
Design hatte inzwischen einen Rings-Klon oben in der Desktop-Sidebar
(.navmarke) sowie einen gefuellten Pill-Stil fuer den aktiven Tab ergaenzt.
Nach Byte-Diff-Pruefung (nur additive CSS-Aenderungen) komplett uebernommen,
in Docker deployt und bei 402px/1400px verifiziert.

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

AGENTS.md

@@ -286,6 +286,20 @@ capacitor/iframe/browser (`umgebung.ts`), types + entity table (`types.ts`), fac
       viewport-anchored, not parent-relative) inside `@container (min-width:860px)`. Verified live at
       both narrow (mobile tab bar, full content) and wide (1144px container, grid side-nav,
       navigation clicks, settings back-arrow) — screenshots taken, no regressions found.
+- [x] Desktop-Sidebar-Markenklon (`.navmarke`) nachgezogen — done 2026-08-12. The user compared the
+      deployed app against the live Claude Design "Board" (the two-viewport comparison page, which
+      genuinely iframes this project's own `audi-dashboard-app.js`/`-ios.css`, not a static mockup)
+      and asked why the desktop Audi-rings placement differed: Design showed the rings pinned above
+      the sidebar nav list, ours showed them in the content header next to the title. Root cause,
+      confirmed via `DesignSync get_file` + byte-diff: `audi-dashboard-app.js` was already fully in
+      sync (identical), but `audi-dashboard-ios.css` had drifted — the Design project had since
+      added a `.navmarke` sidebar clone of the rings (only visible in the `@container
+      (min-width:860px)` block; `.rings{display:none!important}` hides the header copy there so the
+      mark appears once) plus a filled-pill active-tab style (`.tabpille`), neither pulled back
+      locally. Diffed the two full files first to confirm every change was additive/CSS-only, then
+      replaced the local file wholesale. Verified in `audi_ha_test` at both 402px and 1400px: rings
+      now sit above the nav list on desktop, gear icon alone in the content header, mobile view
+      unaffected, no console errors beyond the pre-existing missing-vehicle-photo 404 gap.
 - [x] Standort-Kachel (live vehicle GPS position on the Übersicht, above "Zuletzt") — done
       2026-08-12. New tile with a real (non-fake) Leaflet mini-map, opens a fullscreen "Standort"
       route on tap; fullscreen has 4 floating controls (map style, center-on-vehicle,

homeassistant/www/audi-dashboard-ios.css

@@ -72,7 +72,13 @@ html,body{height:100%}
 .sync svg{width:13px;height:13px}
 .themebtn{width:36px;height:36px;border:0;background:var(--ios-fill);color:var(--fg2)}
 .themebtn:hover{background:var(--tile-2);color:var(--fg)}
+/* Telefonbreite: die Ringe stehen oben rechts und oeffnen die Einstellungen
+   (Stand nach dem Design-Audit). Das Zahnrad entfaellt dort, damit oben rechts
+   nur ein Element sitzt. */
+.rings{order:9;margin-left:8px;margin-right:-10px;pointer-events:auto;cursor:pointer;
+  min-width:44px;min-height:44px;height:44px;justify-content:flex-end;padding:0 10px}
 .rings svg{height:17px}
+.profilbtn{display:none}
 /* Unterseite: kompakter, zentrierter Titel wie in einer iOS-Navigationsleiste */
 .phone:has(.back.on) .topbar{padding:54px 16px 6px;gap:8px}
 .phone:has(.back.on) .head{align-items:center}
@@ -158,14 +164,18 @@ main{padding:0 16px 30px;scroll-behavior:smooth}
   background:rgba(12,16,20,.72);
   -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px)}
 :host([data-theme="tag"]) .tabbar{background:rgba(242,242,247,.78)}
-.tab{border-top:0;margin-top:0;padding:9px 2px 7px;gap:3px;
+.tab{border-top:0;margin-top:0;padding:7px 2px 6px;gap:3px;
   font-size:10px;letter-spacing:0;text-transform:none;color:var(--ios-grau)}
 /* Beschriftung folgt weiter dem Schalter in den Einstellungen */
 .tabbar.ohne .tab span{display:none}
 .tab svg{width:26px;height:26px;stroke-width:1.5}
-.tab.on{color:var(--ios-tint);border-top-color:transparent}
-.tab.on svg polygon{fill:var(--ios-tint);stroke:var(--ios-tint)}
-.tabbar.ohne .tab{padding:14px 2px 12px}
+/* myAudi-Menueleiste: das aktive Symbol sitzt hell in einer gefuellten Pille,
+   die uebrigen bleiben grau - kein farbiger Tint, kein Oberkantenstrich. */
+.tabpille{width:63px;height:39px;border-radius:20px}
+.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)}
+.tabbar.ohne .tab{padding:11px 2px 10px}
 
 :focus-visible{outline:2px solid var(--ios-tint);outline-offset:2px}
 
@@ -180,6 +190,9 @@ main{padding:0 16px 30px;scroll-behavior:smooth}
    begrenzte Spalte. Container-Abfrage statt @media, weil die App in einem
    eigenen Rahmen sitzt und nicht die Fensterbreite messen darf. Schwelle 860 px.
    ================================================================== */
+/* Klon der Ringe in der Menueleiste - nur im Spaltenlayout sichtbar */
+.navmarke{display:none}
+
 @container (min-width:860px){
   /* Ab hier keine schwebende Telefonkarte mehr - die 880px-Deckelung faellt,
      die App fuellt die tatsaechliche (weiterhin viewport-verankerte) Hoehe. */
@@ -202,10 +215,22 @@ main{padding:0 16px 30px;scroll-behavior:smooth}
     padding:12px 14px;border-radius:12px;font-size:15px;letter-spacing:0}
   .tab span{display:block}
   .tab svg{width:22px;height:22px}
+  .tabpille{width:auto;height:auto;border-radius:0;background:none}
+  .tab.on .tabpille{background:none}
   .tab:hover{background:var(--tile)}
   .tab.on{background:rgba(245,5,55,.14);color:var(--ios-tint)}
   .tabbar.ohne .tab span{display:block}
-  .tabbar.ohne .tab{padding:12px 14px}
+  .tabbar.ohne .tab{padding:12px 14px;gap:14px}
+  .tabbar.ohne .tab svg{width:22px;height:22px}
+  /* Marke am Kopf der Seitenspalte, dafuer keine Ringe in der Kopfzeile
+     (Design-Audit: die Marke soll nur einmal im Bild stehen). */
+  .navmarke{display:block;margin:2px 0 26px 14px;color:var(--fg)}
+  .navmarke svg{width:54px;height:auto;display:block}
+  /* Grosser Bildschirm: Marke am Kopf der Spalte, Zahnrad wieder oben rechts */
+  .profilbtn{display:inline-flex}
+  /* Die Kopf-Ringe setzt die App per Inline-Stil (display:inline-flex),
+     deshalb hier mit !important. */
+  .rings{display:none !important}
 
   .duo{grid-template-columns:repeat(3,minmax(0,1fr))}
   .carfix,.bildbox.carfix{height:260px}

homeassistant/www/audi-dashboard-version.json

@@ -1 +1 @@
-{"version": 1786536000}
+{"version": 1786543200}