Ueberschritten: nur die Zeile hinterlegen, Farbe je Schwelle trennen

Zwei Rueckmeldungen des Eigentuemers vom 07.09.2026.

1. Die Service-Kachel auf "Mein Audi" war als Ganzes gelb hinterlegt. Gelb
   wird jetzt nur das ueberschrittene Feld, analog zur Termingruppe im
   Service-Blatt: .row.ueberschritten bzw. .dm-wertzeile--ueberschritten,
   12 % --warn mit -12px Aussenabstand bis an den Kachelrand. Die dafuer
   gebaute Hilfsfunktion serviceUeberschritten() entfaellt ersatzlos.

2. Auch #C55300 wirkte braeunlich. Das ist die Schwelle, nicht der Geschmack:
   Apples systemOrange #FF9500 kommt auf Weiss nur auf 2,20:1, jedes Orange
   mit 4,5:1 liest sich als Braun. Deshalb traegt jetzt jedes Element seine
   eigene WCAG-Schwelle:

     --warn-fig   32px = Grosstext, 3:1   -> #DD6000 (3,65:1 auf Weiss)
     die Marke    10,5px = Kleintext, 4,5:1 -> gefuellte Pille #C55300 mit
                  weisser Schrift (4,55:1) statt duenner Schrift

   Nachts #FF9F0A (8,41:1) bzw. #FFA056 mit #171B21 (8,57:1).

Im Panel live gemessen (Testcontainer, Tagmodus): Kachelgrund rgb(255,255,255),
nur die HU-Zeile rgba(255,159,10,0.12) und um 2 x 12px breiter als die uebrigen
Zeilen, Marke rgb(255,255,255) auf rgb(197,83,0), Kennzahl rgb(221,96,0).
Damit ist Abschnitt DJ auch im Panel optisch geprueft - OFFEN.md 3b angepasst.

327/327 Tests, tsc sauber, Buendel auf 2026.9.6.9 neu gebaut.

Co-Authored-By: Claude Opus 5 <[email protected]>

custom_components/audi_dashboard/frontend/audi-dashboard-app.js

@@ -2483,18 +2483,20 @@ function vHome() {
     const nebenzeile = restKm !== null && datum
       ? `voraussichtlich am ${dedat(datum)}`
       : t.art;
-    const figMarkup = artIcon
-      ? `<div class="fig-zeile">${ciSVG(artIcon, 31)}<div class="fig" style="font-size:${zahlGroesse}px">${hauptwert}</div></div>`
-      : `<div class="fig" style="font-size:${zahlGroesse}px;margin-top:8px">${hauptwert}</div>`;
     // Auf der Uebersicht wechselt zusaetzlich die Kennzahl selbst die Farbe -
     // sie ist hier die Aussage, nicht nur ihr Rahmen (Ansage des Eigentuemers).
     const ueber = terminUeberschritten(datum, t.datum);
+    // Immer eine fig-zeile, auch ohne Icon: die Marke steht neben der Kennzahl
+    // (Nutzerwunsch 07.09.2026 - die Kachel soll durch sie nicht hoeher werden),
+    // und ohne diese Zeile haette sie dort keinen Platz.
+    const figMarkup = `<div class="fig-zeile">${artIcon ? ciSVG(artIcon, 31) : ""}`
+      + `<div class="fig" style="font-size:${zahlGroesse}px">${hauptwert}</div>`
+      + `${ueber ? UEBERSCHRITTEN_MARKE : ""}</div>`;
     return `<div class="tile" style="margin-bottom:22px">
         <button class="serviceblock${ueber ? " ueberschritten" : ""}" 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>
           ${figMarkup}
-          ${ueber ? `<div class="servicemarke">${UEBERSCHRITTEN_MARKE}</div>` : ""}
           <span class="label" style="margin-top:8px">${nebenzeile}</span>
         </button>
         ${kmZeile}
@@ -2667,16 +2669,16 @@ function vAudi() {
         if (fm.ts == null && fm.km == null) {
           const x = terminText(t);
           const ueber = terminUeberschritten(t.ziel, t.datum);
-          return `<div class="row" ${letzte}>
+          return `<div class="row${ueber ? " ueberschritten" : ""}" ${letzte}>
             <dt>${t.art}${t.art === "Inspektion" ? eigen : ""}</dt>
-            <dd>${x.haupt}${ueber ? UEBERSCHRITTEN_MARKE : ""}${x.neben ? `<small style="text-align:left">${x.neben}</small>` : ""}</dd></div>`;
+            <dd>${ueber ? UEBERSCHRITTEN_MARKE : ""}${x.haupt}${x.neben ? `<small style="text-align:left">${x.neben}</small>` : ""}</dd></div>`;
         }
         const haupt = fm.ts ? dedat(new Date(fm.ts)) : "";
         const neben = fm.km != null ? "in " + de(fm.km) + " km" : "";
         const ueber = terminUeberschritten(fm.ts, t.ziel, t.datum);
-        return `<div class="row" ${letzte}>
+        return `<div class="row${ueber ? " ueberschritten" : ""}" ${letzte}>
           <dt>${t.art}${eigen}</dt>
-          <dd>${haupt}${ueber ? UEBERSCHRITTEN_MARKE : ""}${neben ? `<span style="display:block">${neben}</span>` : ""}</dd></div>`;
+          <dd>${ueber ? UEBERSCHRITTEN_MARKE : ""}${haupt}${neben ? `<span style="display:block">${neben}</span>` : ""}</dd></div>`;
       }).join("")}
     </dl></button>
   <button class="tile tilebtn" data-go="vers:x">