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 <noreply@anthropic.com>

custom_components/audi_dashboard/frontend/app/bundle.json

@@ -1 +1 @@
-{"version":"2026.9.6.7","sha256":"1c9c672a258f7540a0186ebc12d32965d472478923ff3c44a013d46f58a3805d","bytes":379101,"gebaut":"2026-09-07T12:06:15Z"}
+{"version":"2026.9.6.9","sha256":"b7bb80fc6f108299e04a389a200756bc4b060767dbed3e157a7f1850b613e221","bytes":379205,"gebaut":"2026-09-07T12:34:09Z"}

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">

custom_components/audi_dashboard/frontend/audi-dashboard-ios.css

@@ -25,7 +25,8 @@
   --line:rgba(255,255,255,.13);
   --line-strong:rgba(255,255,255,.24);
   --fg:#FFFFFF; --fg2:#BFC4CC; --fg3:#8E8E93;
-  --ok:#30D158; --warn:#FFD60A; --bad:#FF453A; --bad-flaeche:#D70015; --warn-text:#FFD60A;
+  --ok:#30D158; --warn:#FFD60A; --bad:#FF453A; --bad-flaeche:#D70015; --warn-text:#FFA056;
+  --warn-fig:#FF9F0A; --warn-marke-grund:#FFA056; --warn-marke-schrift:#171B21;
   /* Ohne diese Angabe rendert der Browser native Steuerelemente (Dropdown-
      Aufklapp-Liste bei <select>, Scrollbars) in seiner Standard-Hellansicht,
      egal wie dunkel die App selbst ist - das liess z. B. "Modell" beim
@@ -45,7 +46,8 @@
        auf 4,75:1 bzw. 5,30:1, ohne den ruhigen Gesamteindruck zu aendern.
        Der Nachtwert bleibt #8E8E93 - dort sind es ohnehin 5,86:1. */
   --fg:#000000; --fg2:#3C3C43; --fg3:#6B6B70;
-  --ok:#34C759; --warn:#FF9F0A; --bad:#D70015; --bad-flaeche:#D70015; --warn-text:#A15800;
+  --ok:#34C759; --warn:#FF9F0A; --bad:#D70015; --bad-flaeche:#D70015; --warn-text:#C55300;
+  --warn-fig:#DD6000; --warn-marke-grund:#C55300; --warn-marke-schrift:#FFFFFF;
   --ios-sep:rgba(60,60,67,.16);
   --ios-fill:rgba(120,120,128,.16);
   --tile-deckend:#FFFFFF;

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; }

custom_components/audi_dashboard/manifest.json

@@ -1,7 +1,7 @@
 {
   "domain": "audi_dashboard",
   "name": "Audi Dashboard",
-  "version": "2026.9.6.7",
+  "version": "2026.9.6.9",
   "documentation": "https://gitea.nothaft.cloud/paul/audi-app/src/branch/main/README.md",
   "issue_tracker": "https://gitea.nothaft.cloud/paul/audi-app/issues",
   "codeowners": [