Rename Sommer/Winter to Sommerräder/Winterräder, reflow Reifen tile headline

The tile headline now reads "Sommerräder"/"Winterräder" and renders as an
actual headline (new .tile-headline class, 20px/var(--fg)) instead of the
small muted .label styling used for other in-tile section titles.

Headline + km now sit above "Montiert" instead of the wheel photo
overlaying it: new .radkopf-row (flex) puts headline/km and the photo
side by side at the tile's top; Montiert dropped position:absolute (no
longer needed once the photo stopped sharing its space) and is now a
normal-flow pill below the headline block.

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

AGENTS.md

@@ -1019,6 +1019,24 @@ wraps the web app for iPhone; a PWA home-screen install is the accepted intermed
       the ios one at matching specificity, but fixed too rather than left as a landmine). Verified live
       via screenshot: all 5 tab icons render correctly in icon-only mode, active tab still shows its
       filled pill.
+- [x] Eighth round the same day (2026-08-16) — Reifen tile relabel + reflow, per explicit request:
+      "Sommer"/"Winter" → **"Sommerräder"/"Winterräder"** (only the section headline text in
+      `vReifen()`'s `satz()`; the singular "Sommerrad"/"Winterrad" photo label and the `data-satz`
+      value compared against `CAR.reifen.aktiv` elsewhere were deliberately left untouched — the first
+      is grammatically correct as-is for a single wheel photo, the second is an internal state key, not
+      display text, and changing it would break the mount-toggle matching in the `[data-satz]` click
+      handler). That headline is now an actual **headline** — new `.tile-headline` class (20px,
+      `var(--fg)`, same typographic family as the page `.title` one step down) replacing the small,
+      muted `.label` styling every other in-tile section title uses.
+      Reflowed so the headline+km sit **above** "Montiert" instead of the wheel photo overlaying it:
+      new `.radkopf-row` (flex, `justify-content:space-between`) puts the headline/km block and the
+      wheel photo side by side at the tile's top, both top-aligned; `.montiert` dropped `position:
+      absolute` (no longer needs to float over the photo now that the photo isn't in that space) and
+      became a normal-flow pill with `margin-top` under the headline block — simpler than the previous
+      overlay hack, same 44×44pt invisible tap target via `::before`. `.bildbox.radbild`'s `margin-
+      left:auto` (added last round to right-align it under its old block-flow parent) was removed since
+      `.radkopf-row`'s flex layout does that job now. Deployed to `audi_ha_test`, confirmed live via
+      screenshot for both Sommerräder (mounted) and Winterräder (unmounted) tiles.
 - [ ] Fix remaining documentation drift (statistics claim, README gaps, obsolete TODO comment) —
       text-only changes; INSTALL.md's WLAN/TommiG1 drift and stale variable names were fixed
       2026-08-12 (see section B); `DESIGN_REVIEW_2026-08-13.md` and `REVIEW_main_2026-08-13.md`

homeassistant/installationspaket/www/audi-dashboard-app.js

@@ -2330,9 +2330,16 @@ function vReifen() {
     const t = r[k], aktiv = r.aktiv.toLowerCase() === k;
     const radDatei = `rad-${k}.webp`;
     const radLabel = k === "sommer" ? "Sommerrad" : "Winterrad";
+    const satzLabel = k === "sommer" ? "Sommerräder" : "Winterräder";
     return `<div class="tile">
-      <div data-bildklick="${radDatei}">
-        ${bildMitPlatzhalter(`/local/bilder/${radDatei}?v=${bildVersion}`, radDatei, radLabel, "radbild")}
+      <div class="radkopf-row">
+        <div class="radkopf">
+          <span class="tile-headline">${satzLabel}</span>
+          <div class="fig" style="font-size:32px;margin-top:14px">${t.km != null ? de(t.km) : "–"}<span class="unit">km</span></div>
+        </div>
+        <div data-bildklick="${radDatei}">
+          ${bildMitPlatzhalter(`/local/bilder/${radDatei}?v=${bildVersion}`, radDatei, radLabel, "radbild")}
+        </div>
       </div>
       <input type="file" accept="image/*" hidden data-bildupload="${radDatei}">
       ${bildMenuOffen === radDatei ? `
@@ -2342,10 +2349,6 @@ function vReifen() {
         <button type="button" class="loeschen" data-bildloeschen="${radDatei}">Löschen</button>
       </div>` : ""}
       <button data-satz="${k === "sommer" ? "Sommer" : "Winter"}" class="montiert ${aktiv ? "on" : ""}">Montiert</button>
-      <div class="radkopf">
-        <span class="label">${k === "sommer" ? "Sommer" : "Winter"}</span>
-        <div class="fig" style="font-size:32px;margin-top:14px">${t.km != null ? de(t.km) : "–"}<span class="unit">km</span></div>
-      </div>
       <div style="margin-top:22px">
         ${feld(k, "marke", "Hersteller")}
         ${feld(k, "modell", "Modell")}

homeassistant/installationspaket/www/audi-dashboard.css

@@ -329,6 +329,17 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
   display: block;
   line-height: 1.3;
 }
+/* Echte Überschrift innerhalb einer Kachel (z.B. "Sommerräder"/"Winterräder")
+   statt des sonst üblichen kleinen, gedämpften .label-Abschnittstitels -
+   selbe Typografie-Stufe wie .title (Seitentitel), nur etwas kleiner, weil
+   sie innerhalb einer Kachel steht statt in der Kopfzeile. */
+.tile-headline {
+  font-size: 20px;
+  letter-spacing: -.01em;
+  line-height: 1.2;
+  color: var(--fg);
+  display: block;
+}
 /* A4: Messwerte erben nie mehr das uppercase der Label-Klasse. */
 .wert {
   font-size: 14px;
@@ -453,10 +464,10 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
 /* .bildbox.radbild statt .radbild allein: .bildbox unten setzt width/aspect-
    ratio auf derselben Spezifitaet (eine Klasse) und gewinnt als spaeter
    notierte Regel sonst automatisch - die Box blieb dadurch bislang die volle
-   Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats.
-   margin-left:auto schiebt das feste 96px-Quadrat an den rechten Rand des
-   vollbreiten data-bildklick-Wrappers - Montiert sitzt links (siehe unten). */
-.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; margin-left: auto; }
+   Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats. Rechtsbündig
+   sitzt es jetzt ueber .radkopf-row (display:flex; justify-content:space-
+   between), kein margin-left:auto mehr noetig. */
+.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; }
 
 .bildbox { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
 .bildbox img { display: block; width: 100%; height: 100%; object-fit: cover; }
@@ -889,14 +900,19 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
   padding: var(--sp-4);
 }
 
-.radkopf { display: flex; flex-direction: column; margin-top: var(--sp-4); }
+/* Kopfzeile der Reifen-Kachel: Überschrift+km links, Radfoto rechts, beide
+   oben bündig - ersetzt die frühere Überlagerung (Montiert absolut über dem
+   Foto), seit Überschrift und km ihren eigenen Platz über Montiert bekommen
+   haben. */
+.radkopf-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
+.radkopf { display: flex; flex-direction: column; }
 
-/* Kompakte Pille statt voller Breite (Apple-HIG-Pull-down-Maß): oben links
-   in der Kachel, obere Kante auf Höhe des Radfotos, linker Abstand
-   identisch zum Texteinzug (beides var(--sp-5), die Kachel-Innen-
-   polsterung). */
+/* Kompakte Pille statt voller Breite (Apple-HIG-Pull-down-Maß): normale
+   Flusslage unter der Kachel-Überschrift/km, nicht mehr über dem Foto
+   überlagert (das saß nur dort, solange Überschrift+km diesen Platz noch
+   nicht beanspruchten). */
 .montiert {
-  position: absolute; top: var(--sp-5); left: var(--sp-5);
+  position: relative; margin-top: var(--sp-4);
   display: inline-flex; align-items: center; justify-content: center;
   font-family: inherit; font-size: 12px; letter-spacing: normal;
   color: var(--fg2);

homeassistant/www/audi-dashboard-app.js

@@ -2330,9 +2330,16 @@ function vReifen() {
     const t = r[k], aktiv = r.aktiv.toLowerCase() === k;
     const radDatei = `rad-${k}.webp`;
     const radLabel = k === "sommer" ? "Sommerrad" : "Winterrad";
+    const satzLabel = k === "sommer" ? "Sommerräder" : "Winterräder";
     return `<div class="tile">
-      <div data-bildklick="${radDatei}">
-        ${bildMitPlatzhalter(`/local/bilder/${radDatei}?v=${bildVersion}`, radDatei, radLabel, "radbild")}
+      <div class="radkopf-row">
+        <div class="radkopf">
+          <span class="tile-headline">${satzLabel}</span>
+          <div class="fig" style="font-size:32px;margin-top:14px">${t.km != null ? de(t.km) : "–"}<span class="unit">km</span></div>
+        </div>
+        <div data-bildklick="${radDatei}">
+          ${bildMitPlatzhalter(`/local/bilder/${radDatei}?v=${bildVersion}`, radDatei, radLabel, "radbild")}
+        </div>
       </div>
       <input type="file" accept="image/*" hidden data-bildupload="${radDatei}">
       ${bildMenuOffen === radDatei ? `
@@ -2342,10 +2349,6 @@ function vReifen() {
         <button type="button" class="loeschen" data-bildloeschen="${radDatei}">Löschen</button>
       </div>` : ""}
       <button data-satz="${k === "sommer" ? "Sommer" : "Winter"}" class="montiert ${aktiv ? "on" : ""}">Montiert</button>
-      <div class="radkopf">
-        <span class="label">${k === "sommer" ? "Sommer" : "Winter"}</span>
-        <div class="fig" style="font-size:32px;margin-top:14px">${t.km != null ? de(t.km) : "–"}<span class="unit">km</span></div>
-      </div>
       <div style="margin-top:22px">
         ${feld(k, "marke", "Hersteller")}
         ${feld(k, "modell", "Modell")}

homeassistant/www/audi-dashboard.css

@@ -329,6 +329,17 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
   display: block;
   line-height: 1.3;
 }
+/* Echte Überschrift innerhalb einer Kachel (z.B. "Sommerräder"/"Winterräder")
+   statt des sonst üblichen kleinen, gedämpften .label-Abschnittstitels -
+   selbe Typografie-Stufe wie .title (Seitentitel), nur etwas kleiner, weil
+   sie innerhalb einer Kachel steht statt in der Kopfzeile. */
+.tile-headline {
+  font-size: 20px;
+  letter-spacing: -.01em;
+  line-height: 1.2;
+  color: var(--fg);
+  display: block;
+}
 /* A4: Messwerte erben nie mehr das uppercase der Label-Klasse. */
 .wert {
   font-size: 14px;
@@ -453,10 +464,10 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
 /* .bildbox.radbild statt .radbild allein: .bildbox unten setzt width/aspect-
    ratio auf derselben Spezifitaet (eine Klasse) und gewinnt als spaeter
    notierte Regel sonst automatisch - die Box blieb dadurch bislang die volle
-   Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats.
-   margin-left:auto schiebt das feste 96px-Quadrat an den rechten Rand des
-   vollbreiten data-bildklick-Wrappers - Montiert sitzt links (siehe unten). */
-.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; margin-left: auto; }
+   Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats. Rechtsbündig
+   sitzt es jetzt ueber .radkopf-row (display:flex; justify-content:space-
+   between), kein margin-left:auto mehr noetig. */
+.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; }
 
 .bildbox { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
 .bildbox img { display: block; width: 100%; height: 100%; object-fit: cover; }
@@ -889,14 +900,19 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
   padding: var(--sp-4);
 }
 
-.radkopf { display: flex; flex-direction: column; margin-top: var(--sp-4); }
+/* Kopfzeile der Reifen-Kachel: Überschrift+km links, Radfoto rechts, beide
+   oben bündig - ersetzt die frühere Überlagerung (Montiert absolut über dem
+   Foto), seit Überschrift und km ihren eigenen Platz über Montiert bekommen
+   haben. */
+.radkopf-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
+.radkopf { display: flex; flex-direction: column; }
 
-/* Kompakte Pille statt voller Breite (Apple-HIG-Pull-down-Maß): oben links
-   in der Kachel, obere Kante auf Höhe des Radfotos, linker Abstand
-   identisch zum Texteinzug (beides var(--sp-5), die Kachel-Innen-
-   polsterung). */
+/* Kompakte Pille statt voller Breite (Apple-HIG-Pull-down-Maß): normale
+   Flusslage unter der Kachel-Überschrift/km, nicht mehr über dem Foto
+   überlagert (das saß nur dort, solange Überschrift+km diesen Platz noch
+   nicht beanspruchten). */
 .montiert {
-  position: absolute; top: var(--sp-5); left: var(--sp-5);
+  position: relative; margin-top: var(--sp-4);
   display: inline-flex; align-items: center; justify-content: center;
   font-family: inherit; font-size: 12px; letter-spacing: normal;
   color: var(--fg2);