Service-Kennzahl als Kachel mit Hintergrund statt flach

Nutzerwunsch nach dem ersten Stand: der Block soll als Box mit Hintergrund
erscheinen. .tile.flat -> .tile; die Haarlinie trennt jetzt innerhalb der
Kachel, statt die Kachel zu ersetzen.

Der Chevron bleibt unveraendert auf right:0 relativ zum Knopf - da der
Knopf innerhalb des Kachel-Paddings sitzt, landet er damit automatisch auf
demselben Innenabstand wie ein normales .go in einer gepolsterten Kachel,
ohne Sonderregel.

Neu: .serviceblock:active{opacity:.55} als Tipp-Rueckmeldung. Ein
Hintergrundwechsel wie bei .tilebtn geht hier nicht, weil der Knopf schon
auf der Kachelflaeche liegt und nur ihr oberer Teil ist.

Beide Themes geprueft: Kachelhintergrund und Haarlinie kommen aus Tokens
(Tag rgb(255,255,255) / Nacht rgba(255,255,255,.055)), der Knopf selbst
bleibt transparent.

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

AGENTS.md

@@ -1439,8 +1439,8 @@ wraps the web app for iPhone; a PWA home-screen install is the accepted intermed
       täglich schrumpfender Countdown). Beide Schulen sagen dazu dasselbe, sie unterscheiden sich
       nur im Mittel. Ergebnis nach drei Iterationen mit dem Nutzer (Zwischenstände jeweils als
       Mockup gezeigt, bevor Code angefasst wurde): das `.duo`-Raster entfällt, stattdessen eine
-      führende Kennzahl in einer `.tile.flat` (gleiche Ebene wie die Reichweite darüber, kein
+      führende Kennzahl in einer normalen `.tile` mit Hintergrund (erst flach entworfen, auf
-      eigener Kachelhintergrund) — Zeile „Nächster Service:“, Chevron bündig oben rechts, 40px-Zahl,
+      Nutzerwunsch dann doch als Box) — Zeile „Nächster Service:“, Chevron oben rechts, 40px-Zahl,
       Unterzeile „bis zum Ölwechsel · vsl. 15.04.2027“, Haarlinie, darunter der Kilometerstand als
       `.servicezeile`. Der Chevron sitzt bewusst nur am `.serviceblock`-Knopf, nicht über der ganzen
       Fläche: damit ist der obere Teil das Bedienelement und die Kilometerstand-Zeile reine

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

@@ -1259,18 +1259,17 @@ function vHome() {
        Gleichrangigkeit, die inhaltlich nicht besteht.
 
        Jetzt: eine führende Kennzahl, darunter der Kilometerstand als ruhige
-       Wertezeile, getrennt durch eine Haarlinie - Audi-CI (Flächen und
+       Wertezeile, getrennt durch eine Haarlinie - Hierarchie über Größe und
-       Haarlinien statt gestapelter Karten, Hierarchie über Größe und Farbe)
+       Farbe (Audi-CI) kombiniert mit Apple HIGs "differentiate controls from
-       kombiniert mit Apple HIGs "differentiate controls from content": der
+       content": der Chevron sitzt nur am Serviceblock, damit erkennbar bleibt,
-       Chevron sitzt nur am Serviceblock, damit erkennbar bleibt, welcher Teil
+       welcher Teil auf die Service-Seite führt und welcher reine Anzeige ist.
-       auf die Service-Seite führt und welcher reine Anzeige ist. Der Block
+       Beides zusammen in einer normalen .tile mit Hintergrund - die Haarlinie
-       liegt bewusst in derselben Ebene wie die Reichweite darüber (.tile flat,
+       trennt dann innerhalb der Kachel, statt die Kachel zu ersetzen. */
-       kein eigener Kachelhintergrund). */
     const kmZeile = `<div class="servicezeile">
         <span class="label">Kilometerstand</span>
         <div class="fig" style="font-size:20px">${CAR.odoBekannt ? de(CAR.odo) : "–"}<span class="unit">km</span></div>
       </div>`;
-    if (!t) return `<div class="tile flat" style="margin-bottom:22px">
+    if (!t) return `<div class="tile" style="margin-bottom:22px">
         <span class="label">Nächster Service:</span>
         <div class="wert" style="margin-top:8px">kein Eintrag im Servicebuch</div>
         ${kmZeile}
@@ -1288,7 +1287,7 @@ function vHome() {
     const nebenzeile = restKm !== null && datum
       ? `${bisText(t.art)} · vsl. ${dedat(datum)}`
       : bisText(t.art);
-    return `<div class="tile flat" style="margin-bottom:22px">
+    return `<div class="tile" style="margin-bottom:22px">
         <button class="serviceblock" data-go="service:x">
           <span class="label">Nächster Service:</span>
           <svg class="go" viewBox="0 0 6 10"><polyline points="1,1 5,5 1,9"/></svg>

homeassistant/installationspaket/www/audi-dashboard-version.json

@@ -1 +1 @@
-{"version": 1787006000}
+{"version": 1787007000}

homeassistant/installationspaket/www/audi-dashboard.css

@@ -463,11 +463,13 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
 /* Der Außenabstand sitzt am Raster, nicht an den Kacheln - sonst wird er im
    2×2-Raster (vHome) zum zusätzlichen internen Zeilenabstand und der Abstand
    innerhalb der Gruppe wäre größer als der zur nächsten. */
-/* Übersicht: "Nächster Service" als flache, tippbare Kennzahl, darunter der
+/* Übersicht: "Nächster Service" als tippbare Kennzahl, darunter der
-   Kilometerstand als Wertezeile (siehe Kommentar in vHome()). Der Block sitzt
+   Kilometerstand als Wertezeile (siehe Kommentar in vHome()). Der Knopf sitzt
-   in einer .tile.flat, hat also keinen eigenen Kachelhintergrund - deshalb
+   INNERHALB einer normalen .tile - nicht die Kachel selbst ist der Knopf,
-   sitzt der Chevron bündig am oberen rechten Rand statt auf --sp-5 eingerückt
+   sondern nur ihr oberer Teil, damit die Kilometerstand-Zeile erkennbar reine
-   wie sonst in einer gepolsterten Kachel. */
+   Anzeige bleibt. Der Chevron steht deshalb auf right:0 relativ zum Knopf und
+   landet damit genau auf demselben Innenabstand wie ein normales .go in einer
+   gepolsterten Kachel. */
 .serviceblock {
   position: relative;
   display: block; width: 100%;
@@ -475,6 +477,9 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
   font-family: inherit; text-align: left; color: inherit; cursor: pointer;
 }
 .serviceblock > .go { top: 3px; right: 0; }
+/* Rückmeldung beim Tippen: ein Hintergrundwechsel wie bei .tilebtn ginge hier
+   nicht, der Knopf liegt ja schon auf der Kachelfläche. */
+.serviceblock:active { opacity: .55; }
 /* Beschriftung nie unter dem Chevron hindurchlaufen lassen */
 .serviceblock > .label:first-child { padding-right: 24px; }
 .servicezeile {

homeassistant/www/audi-dashboard-app.js

@@ -1259,18 +1259,17 @@ function vHome() {
        Gleichrangigkeit, die inhaltlich nicht besteht.
 
        Jetzt: eine führende Kennzahl, darunter der Kilometerstand als ruhige
-       Wertezeile, getrennt durch eine Haarlinie - Audi-CI (Flächen und
+       Wertezeile, getrennt durch eine Haarlinie - Hierarchie über Größe und
-       Haarlinien statt gestapelter Karten, Hierarchie über Größe und Farbe)
+       Farbe (Audi-CI) kombiniert mit Apple HIGs "differentiate controls from
-       kombiniert mit Apple HIGs "differentiate controls from content": der
+       content": der Chevron sitzt nur am Serviceblock, damit erkennbar bleibt,
-       Chevron sitzt nur am Serviceblock, damit erkennbar bleibt, welcher Teil
+       welcher Teil auf die Service-Seite führt und welcher reine Anzeige ist.
-       auf die Service-Seite führt und welcher reine Anzeige ist. Der Block
+       Beides zusammen in einer normalen .tile mit Hintergrund - die Haarlinie
-       liegt bewusst in derselben Ebene wie die Reichweite darüber (.tile flat,
+       trennt dann innerhalb der Kachel, statt die Kachel zu ersetzen. */
-       kein eigener Kachelhintergrund). */
     const kmZeile = `<div class="servicezeile">
         <span class="label">Kilometerstand</span>
         <div class="fig" style="font-size:20px">${CAR.odoBekannt ? de(CAR.odo) : "–"}<span class="unit">km</span></div>
       </div>`;
-    if (!t) return `<div class="tile flat" style="margin-bottom:22px">
+    if (!t) return `<div class="tile" style="margin-bottom:22px">
         <span class="label">Nächster Service:</span>
         <div class="wert" style="margin-top:8px">kein Eintrag im Servicebuch</div>
         ${kmZeile}
@@ -1288,7 +1287,7 @@ function vHome() {
     const nebenzeile = restKm !== null && datum
       ? `${bisText(t.art)} · vsl. ${dedat(datum)}`
       : bisText(t.art);
-    return `<div class="tile flat" style="margin-bottom:22px">
+    return `<div class="tile" style="margin-bottom:22px">
         <button class="serviceblock" data-go="service:x">
           <span class="label">Nächster Service:</span>
           <svg class="go" viewBox="0 0 6 10"><polyline points="1,1 5,5 1,9"/></svg>

homeassistant/www/audi-dashboard-version.json

@@ -1 +1 @@
-{"version": 1787006000}
+{"version": 1787007000}

homeassistant/www/audi-dashboard.css

@@ -463,11 +463,13 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
 /* Der Außenabstand sitzt am Raster, nicht an den Kacheln - sonst wird er im
    2×2-Raster (vHome) zum zusätzlichen internen Zeilenabstand und der Abstand
    innerhalb der Gruppe wäre größer als der zur nächsten. */
-/* Übersicht: "Nächster Service" als flache, tippbare Kennzahl, darunter der
+/* Übersicht: "Nächster Service" als tippbare Kennzahl, darunter der
-   Kilometerstand als Wertezeile (siehe Kommentar in vHome()). Der Block sitzt
+   Kilometerstand als Wertezeile (siehe Kommentar in vHome()). Der Knopf sitzt
-   in einer .tile.flat, hat also keinen eigenen Kachelhintergrund - deshalb
+   INNERHALB einer normalen .tile - nicht die Kachel selbst ist der Knopf,
-   sitzt der Chevron bündig am oberen rechten Rand statt auf --sp-5 eingerückt
+   sondern nur ihr oberer Teil, damit die Kilometerstand-Zeile erkennbar reine
-   wie sonst in einer gepolsterten Kachel. */
+   Anzeige bleibt. Der Chevron steht deshalb auf right:0 relativ zum Knopf und
+   landet damit genau auf demselben Innenabstand wie ein normales .go in einer
+   gepolsterten Kachel. */
 .serviceblock {
   position: relative;
   display: block; width: 100%;
@@ -475,6 +477,9 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
   font-family: inherit; text-align: left; color: inherit; cursor: pointer;
 }
 .serviceblock > .go { top: 3px; right: 0; }
+/* Rückmeldung beim Tippen: ein Hintergrundwechsel wie bei .tilebtn ginge hier
+   nicht, der Knopf liegt ja schon auf der Kachelfläche. */
+.serviceblock:active { opacity: .55; }
 /* Beschriftung nie unter dem Chevron hindurchlaufen lassen */
 .serviceblock > .label:first-child { padding-right: 24px; }
 .servicezeile {