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
-      eigener Kachelhintergrund) — Zeile „Nächster Service:“, Chevron bündig oben rechts, 40px-Zahl,
+      führende Kennzahl in einer normalen `.tile` mit Hintergrund (erst flach entworfen, auf
+      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
-       Haarlinien statt gestapelter Karten, Hierarchie über Größe und Farbe)
-       kombiniert mit Apple HIGs "differentiate controls from content": der
-       Chevron sitzt nur am Serviceblock, damit erkennbar bleibt, welcher Teil
-       auf die Service-Seite führt und welcher reine Anzeige ist. Der Block
-       liegt bewusst in derselben Ebene wie die Reichweite darüber (.tile flat,
-       kein eigener Kachelhintergrund). */
+       Wertezeile, getrennt durch eine Haarlinie - Hierarchie über Größe und
+       Farbe (Audi-CI) kombiniert mit Apple HIGs "differentiate controls from
+       content": der Chevron sitzt nur am Serviceblock, damit erkennbar bleibt,
+       welcher Teil auf die Service-Seite führt und welcher reine Anzeige ist.
+       Beides zusammen in einer normalen .tile mit Hintergrund - die Haarlinie
+       trennt dann innerhalb der Kachel, statt die Kachel zu ersetzen. */
     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
-   Kilometerstand als Wertezeile (siehe Kommentar in vHome()). Der Block sitzt
-   in einer .tile.flat, hat also keinen eigenen Kachelhintergrund - deshalb
-   sitzt der Chevron bündig am oberen rechten Rand statt auf --sp-5 eingerückt
-   wie sonst in einer gepolsterten Kachel. */
+/* Übersicht: "Nächster Service" als tippbare Kennzahl, darunter der
+   Kilometerstand als Wertezeile (siehe Kommentar in vHome()). Der Knopf sitzt
+   INNERHALB einer normalen .tile - nicht die Kachel selbst ist der Knopf,
+   sondern nur ihr oberer Teil, damit die Kilometerstand-Zeile erkennbar reine
+   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
-       Haarlinien statt gestapelter Karten, Hierarchie über Größe und Farbe)
-       kombiniert mit Apple HIGs "differentiate controls from content": der
-       Chevron sitzt nur am Serviceblock, damit erkennbar bleibt, welcher Teil
-       auf die Service-Seite führt und welcher reine Anzeige ist. Der Block
-       liegt bewusst in derselben Ebene wie die Reichweite darüber (.tile flat,
-       kein eigener Kachelhintergrund). */
+       Wertezeile, getrennt durch eine Haarlinie - Hierarchie über Größe und
+       Farbe (Audi-CI) kombiniert mit Apple HIGs "differentiate controls from
+       content": der Chevron sitzt nur am Serviceblock, damit erkennbar bleibt,
+       welcher Teil auf die Service-Seite führt und welcher reine Anzeige ist.
+       Beides zusammen in einer normalen .tile mit Hintergrund - die Haarlinie
+       trennt dann innerhalb der Kachel, statt die Kachel zu ersetzen. */
     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
-   Kilometerstand als Wertezeile (siehe Kommentar in vHome()). Der Block sitzt
-   in einer .tile.flat, hat also keinen eigenen Kachelhintergrund - deshalb
-   sitzt der Chevron bündig am oberen rechten Rand statt auf --sp-5 eingerückt
-   wie sonst in einer gepolsterten Kachel. */
+/* Übersicht: "Nächster Service" als tippbare Kennzahl, darunter der
+   Kilometerstand als Wertezeile (siehe Kommentar in vHome()). Der Knopf sitzt
+   INNERHALB einer normalen .tile - nicht die Kachel selbst ist der Knopf,
+   sondern nur ihr oberer Teil, damit die Kilometerstand-Zeile erkennbar reine
+   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 {