Ueberschrittene Servicetermine werden markiert

Wunsch des Eigentuemers: faellige oder ueberschrittene Termine dezent
gelb/orange hinterlegen und mit "ueberschritten" markieren - Service-Seite und
Mein Audi; auf der Uebersicht zusaetzlich die Kennzahl im Warnton.

Erkannt wird am DATUM, nicht an den Restkilometern. Gemessen: die Sensoren
melden -28600 bzw. -22000 bei Faelligkeit 2028 bzw. 2027, negativ heisst hier
also "noch so weit hin". Welches Vorzeichen ein tatsaechlich ueberschrittener
Wert traegt, ist an den vorliegenden Daten nicht beobachtbar - geraten wird es
nicht. Der km-Fall faellt ohnehin unter die Datumsregel: servicePrognose()
setzt datum auf heute, sobald restKm auf 0 laeuft. Der Faelligkeitstag zaehlt
mit ("bereits faellig bzw. ueberschritten").

Dabei eine Luecke im Panel gefunden, vom Test und nicht im Betrieb:
datumAusText() ist verankert und nimmt keine vollen Zeitstempel - die
Fahrzeugmeldung ist aber genau das und bei Oelwechsel und Inspektion die
Hauptquelle. Sie waere still nie als ueberschritten erkannt worden.
zeitstempelAlsDatum() schliesst sie; die App hatte die Luecke nie.

Farbe nach Rolle geteilt wie --bad/--bad-flaeche: --warn ist die Flaeche,
--warn-text die Schrift. Grund: #FF9F0A als Text auf Weiss sind 2.06:1. Auf dem
12% hinterlegten Grund misst --warn-text 4.90:1 (Tag, #A15800) bzw. 9.30:1
(Nacht).

Geprueft: 15 Faelle gegen die echten Panel-Funktionen, 7 in der App, 14
Paritaetsfaelle Panel gegen App, 3 Rendertests ueber alle drei Anzeigestellen.
Gegenprobe: mit ausgehaengter Entscheidung fallen 9 Tests. 327/327, tsc sauber,
Panel als Modul geparst, Manifest und Buendel auf 2026.9.6.6, Container sauber
gestartet.

Offen: optisch nicht gesehen - der Testbestand enthaelt keinen ueberschrittenen
Termin. In OFFEN.md vermerkt.

custom_components/audi_dashboard/frontend/audi-dashboard.css

@@ -21,6 +21,7 @@
   --fg3: #8a94a3;
   --ok: #15da15;
   --warn: #ffaa00;
+  --warn-text: #ffaa00;
   --bad: #fd2c4e;
   --shade: rgba(255,255,255,.05);
   --font-stack: "Audi Type", Helvetica, Arial, sans-serif;
@@ -50,6 +51,7 @@
   --fg3: #666666;
   --ok: #0DA20D;
   --warn: #ffaa00;
+  --warn-text: #ffaa00;
   --bad: #eb0d3f;
   --shade: rgba(0,0,0,.04);
 }
@@ -653,6 +655,32 @@ button.leaf:active { background: var(--tile-2); }
 .tg-wert.leer { font-family: var(--font-stack); font-weight: 400; font-size: 15px; color: var(--fg3); margin-top: 8px; }
 .tg-prognose { font-size: 12.5px; color: var(--fg2); margin-top: 6px; }
 
+/* Ueberschrittene Servicetermine: dezent hinterlegt statt umgefaerbt, damit die
+   Zeile lesbar bleibt und der Hinweis trotzdem auffaellt (Ansage des
+   Eigentuemers 07.09.2026). --warn ist die Flaeche, --warn-text die Schrift -
+   dieselbe Rollenteilung wie bei --bad/--bad-flaeche, und aus demselben Grund:
+   #FF9F0A als Text auf Weiss sind 2.06:1. Auf dem hier hinterlegten Grund
+   (#FFF3E2 tags, #33311E nachts) misst --warn-text 4.90:1 bzw. 9.30:1. */
+.termingruppe.ueberschritten {
+  background: color-mix(in srgb, var(--warn) 12%, transparent);
+  border-radius: var(--r-tile); padding-left: 12px; padding-right: 12px;
+  margin-left: -12px; margin-right: -12px;
+}
+/* Die Trennlinie zur Vorgaengerzeile wuerde ueber die abgerundete Flaeche
+   laufen - die uebernimmt hier die Abgrenzung. */
+.termingruppe.ueberschritten, .termingruppe.ueberschritten + .termingruppe { border-top: 0; }
+.ueberschritten-marke {
+  font-size: 10.5px; color: var(--warn-text);
+  border: 1px solid var(--warn-text); border-radius: var(--r-pill);
+  padding: 3px 8px; white-space: nowrap; flex: 0 0 auto;
+}
+/* Auf der Uebersicht wechselt zusaetzlich die Schrift der Kennzahl - dort ist
+   sie die Aussage, nicht nur ihr Rahmen. */
+.serviceblock.ueberschritten .fig, .serviceblock.ueberschritten .fig .unit { color: var(--warn-text); }
+.servicemarke { display: inline-flex; margin-top: 8px; }
+/* In der Zeilenliste von "Mein Audi" reicht die Marke neben dem Wert. */
+.row .ueberschritten-marke { margin-left: 8px; vertical-align: middle; }
+
 .badge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
 .badge img { height: 18px; width: auto; display: none; }
 :host([data-theme=nacht]) .badge img.negative { display: block; }