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.css

@@ -655,46 +655,60 @@ 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.
+/* Ueberschrittene Servicetermine. --warn ist die FLAECHE (12% hinterlegt),
+   --warn-text die SCHRIFT - dieselbe Rollenteilung wie bei --bad/--bad-flaeche.
 
-   Warum nicht Apples eigener Kontrastwert? Am 07.09.2026 auf
+   Die Schrift ist Apples eigener Kontrastwert: Orange "Increased contrast",
+   #C55300 hell und #FFA056 dunkel, am 07.09.2026 auf
    developer.apple.com/design/human-interface-guidelines/color nachgeschlagen
-   (die Werte stehen dort nur im Alternativtext der Farbfelder, nicht im Text):
-   Yellow "Increased contrast (light)" ist #A16A00, Orange #C55300. Beide
-   liefern auf UNSEREM Grund nur 4.19 bzw. 4.16:1 - Apples Schwelle gilt fuer
-   Schrift auf einfarbigem Grund, die 12%-Hinterlegung hier senkt sie darunter.
-   Deshalb der gemessene Wert #A15800 (4.90:1) statt eines uebernommenen.
+   (die Hexwerte stehen dort nur im Alternativtext der Farbfelder). Vorher stand
+   hier ein selbst hergeleitetes #A15800 - rechnerisch kontraststaerker, vom
+   Eigentuemer aber zu Recht als "braun statt gelb" gemeldet.
 
-   Nebenbefund derselben Recherche: die Seite zeigt inzwischen die neue
-   ("unified") Palette - systemRed dunkel steht dort auf #FF4245, dieses Projekt
-   fuehrt #FF453A aus der aelteren. Einen einzelnen Wert aus der neuen Generation
-   hereinzunehmen waere ohnehin inkonsistent gewesen.
+   Auch #C55300 wurde als braeunlich gemeldet (07.09.2026). Ursache ist die
+   Schwelle, nicht der Geschmack: kraeftiges Orange ist dunkel genug fuer 4.5:1
+   nicht zu haben - Apples systemOrange #FF9500 kommt auf Weiss nur auf 2.20:1.
+   Deshalb sind die beiden Rollen jetzt getrennt, jede an IHRER Schwelle:
 
-   Auf dem hier hinterlegten Grund (#FFF3E2 tags, #33311E nachts) misst
-   --warn-text 4.90:1 bzw. 9.30:1. */
+     --warn-fig  32px = Grosstext, Schwelle 3:1  -> #DD6000 (3.65:1 auf Weiss,
+                 3.34:1 auf der Huelle; nachts #FF9F0A mit 8.41:1)
+     die Marke   10.5px = Kleintext, Schwelle 4.5:1 -> keine duenne Schrift,
+                 sondern eine GEFUELLTE Pille: #C55300 mit weisser Schrift
+                 (4.55:1; nachts #FFA056 mit #171B21, 8.57:1). Als Flaeche
+                 liest sich derselbe Ton als Orange, nicht als Braun.
+
+   Alle Werte am 07.09.2026 nach WCAG 2.1 gerechnet, Huelle = 12% --warn auf
+   dem jeweiligen Kachelgrund. */
 .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; }
+/* Deckender Grund: sonst saesse die kleine Schrift auf der Huelle und faellt
+   unter 4.5:1 - siehe oben. */
 .ueberschritten-marke {
-  font-size: 10.5px; color: var(--warn-text);
-  border: 1px solid var(--warn-text); border-radius: var(--r-pill);
+  font-size: 10.5px; font-weight: 600;
+  color: var(--warn-marke-schrift); background: var(--warn-marke-grund);
+  border-radius: var(--r-pill);
   padding: 3px 8px; white-space: nowrap; flex: 0 0 auto;
+  display: inline-block; vertical-align: middle;
+}
+.serviceblock.ueberschritten .fig, .serviceblock.ueberschritten .fig .unit { color: var(--warn-fig); }
+/* Auf der Uebersicht neben der Kennzahl, nicht darunter - die Kachel soll durch
+   die Markierung nicht hoeher werden (Nutzerwunsch 07.09.2026). */
+.fig-zeile .ueberschritten-marke { margin-left: 10px; }
+/* In "Mein Audi" links vom Wert. */
+.row .ueberschritten-marke { margin-right: 8px; }
+/* In "Mein Audi" wird NUR die ueberschrittene Zeile hinterlegt, nicht die
+   ganze Kachel - analog zur Termingruppe im Service-Blatt (Nutzerwunsch
+   07.09.2026). Der volle Rand kommt ueber die negativen Aussenabstaende. */
+.row.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;
 }
-/* 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; }