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>

AGENTS.md

@@ -12799,6 +12799,48 @@ Und die Ausgangsfrage: die **Fläche** ist Apple (die 2026-08-13 übernommene
 iOS-Palette), das Audi-CI-Gelb `#ffaa00` wurde damals abgelöst und liefert als
 Schrift nur 1,91:1. Die **Schrift** ist gemessen, nicht übernommen.
 
+### Nachtrag 07.09.2026: eine Farbe reichte nicht, zwei Rollen reichen
+
+Auch `#C55300` meldete der Eigentümer als „bräunlich". Der Befund ist keine
+Geschmacksfrage, sondern die Schwelle selbst: **kräftiges Orange ist bei 4,5:1
+nicht zu haben.** Apples systemOrange `#FF9500` kommt auf Weiß auf **2,20:1**;
+jedes Orange, das 4,5:1 schafft, ist so dunkel, dass es als Braun gelesen wird.
+
+Deshalb tragen die beiden Elemente jetzt **jeweils ihre eigene Schwelle**:
+
+| Element | Größe | WCAG-Schwelle | Wert | gemessen |
+|---|---|---|---|---|
+| Kennzahl `--warn-fig` | 32 px = Großtext | 3:1 | `#DD6000` | 3,65:1 auf Weiß, 3,34:1 auf der Hülle |
+| Marke, Tag | 10,5 px = Kleintext | 4,5:1 | `#C55300` **gefüllt**, Schrift weiß | 4,55:1 |
+| Kennzahl nachts | 32 px | 3:1 | `#FF9F0A` | 8,41:1 auf `#171B21` |
+| Marke, Nacht | 10,5 px | 4,5:1 | `#FFA056` gefüllt, Schrift `#171B21` | 8,57:1 |
+
+Der Kniff bei der Marke: **nicht dünne Schrift, sondern eine gefüllte Pille.**
+Derselbe Ton liest sich als Fläche eindeutig als Orange, während er als
+1 px starker Buchstabenstrich bräunlich wirkt - und weiße Schrift auf `#C55300`
+erfüllt die 4,5:1 exakt so, wie es umgekehrt nicht ginge.
+
+Tokens dafür: `--warn-fig`, `--warn-marke-grund`, `--warn-marke-schrift` in
+`audi-dashboard-ios.css` und `design-system/src/tokens/tokens.css`.
+
+### Nachtrag 07.09.2026: nur die Zeile, nicht die Kachel
+
+Die Service-Kachel auf „Mein Audi" war kurzzeitig **als Ganzes** hinterlegt
+(`.tile.ueberschritten`). Der Eigentümer hat das zurückgewiesen: gelb wird nur
+das überschrittene Feld, analog zur Termingruppe im Service-Blatt. Die Kachel
+trägt jetzt keinen Sonderstil mehr, stattdessen bekommt die betroffene Zeile
+`.row.ueberschritten` (App: `.dm-wertzeile--ueberschritten`) - 12 % `--warn`,
+`--r-tile`, und über `margin-left/right: -12px` läuft die Tönung bis an den
+Kachelrand. Die dafür gebaute Hilfsfunktion `serviceUeberschritten()` ist
+ersatzlos entfallen; die App-Seite reicht `ueberschritten` als Eigenschaft an
+`Wertzeile` durch.
+
+**Gemessen im Panel (Testcontainer, 2026.9.6.9):** Kachelgrund
+`rgb(255,255,255)`, nur die HU-Zeile `rgba(255,159,10,0.12)` und mit 752 px
+gegenüber 728 px der ungetönten Zeilen um genau 2 × 12 px breiter - die Tönung
+reicht also bis an den Rand. Marke: `rgb(255,255,255)` auf `rgb(197,83,0)`.
+Kennzahl der Übersicht: `rgb(221,96,0)`.
+
 ### Geprüft
 
 * **15 Fälle** gegen die echten Panel-Funktionen (aus der Panel-Quelle

OFFEN.md

@@ -100,14 +100,15 @@ Beispielzahlen in der Statistik und ein überholter TODO-Kommentar.
 
 ## 3b. Optisch noch nicht gesehen
 
-**Das Panel.** Die Markierung überschrittener Servicetermine (Abschnitt DJ) ist
+**Erledigt am 07.09.2026.** Die Markierung überschrittener Servicetermine
-in der **App** live geprüft, im **Panel** nicht - dafür fehlt eine angemeldete
+(Abschnitt DJ) ist jetzt auch im **Panel** live gesehen und gemessen -
-Home-Assistant-Sitzung. Belegt ist es dort über den Paritätstest gegen die
+Übersicht und „Mein Audi", Tagmodus, Fassung 2026.9.6.9.
-echten Panel-Funktionen und den Modul-Parse.
 
-*Was zu tun ist:* bei nächster Gelegenheit mit angemeldeter Sitzung einmal
+*Offen bleibt allein:* das Erstzulassungsdatum im Testcontainer steht
-ansehen; ein vorübergehend zurückdatiertes Erstzulassungsdatum erzeugt den Fall
+vorübergehend auf **01.03.2020**, damit der Fall überhaupt auftritt. Das
-(hinterher zurückstellen).
+Original liegt unter `/config/audi_dashboard/fahrzeugprofil.json.ansicht` und
+ist zurückzustellen, sobald der Eigentümer sagt, dass er fertig geschaut hat.
+Der **Nachtmodus** ist nur gerechnet, nicht gesehen.
 
 ## 4. Gemeldet, aber nicht reproduzierbar
 

companion-app/src/screens/MeinAudi.tsx

@@ -255,7 +255,14 @@ export function MeinAudi({ geheZu }: { geheZu: (name: SeitenName, id?: string) =
         />
       </Tile>
 
-      <Tile variant="button" chevron onClick={() => geheZu("service")}>
+      {/* Die Kachel wird als Ganzes hinterlegt, wenn IRGENDEIN Termin
+          überschritten ist - sie fasst alle drei zusammen; die Marke in der
+          Zeile sagt welcher (Nutzerwunsch 07.09.2026). */}
+      <Tile
+        variant="button"
+        chevron
+        onClick={() => geheZu("service")}
+      >
         <span className="ads-eyebrow">Service</span>
         <Werteliste
           kinder={
@@ -276,13 +283,14 @@ export function MeinAudi({ geheZu }: { geheZu: (name: SeitenName, id?: string) =
                 wert={
                   t.ueber ? (
                     <>
-                      {t.haupt} <UeberschrittenMarke />
+                      <UeberschrittenMarke /> {t.haupt}
                     </>
                   ) : (
                     t.haupt
                   )
                 }
                 {...(t.neben ? { zusatz: t.neben } : {})}
+                ueberschritten={t.ueber}
               />
             ))
           }

companion-app/src/screens/Uebersicht.tsx

@@ -267,20 +267,17 @@ export function Uebersicht({ geheZu }: { geheZu: (name: SeitenName, id?: string)
                   size={32}
                 />
               )
-              return Symbol ? (
+              /* Immer die Zeile, auch ohne Symbol: die Marke steht neben der
+                 Kennzahl (Nutzerwunsch 07.09.2026 - die Kachel soll durch sie
+                 nicht höher werden), und ohne sie hätte die Marke keinen Platz. */
+              return (
                 <div className="dm-servicefig">
-                  <Symbol groesse={31} />
+                  {Symbol && <Symbol groesse={31} />}
                   {fig}
+                  {serviceUeber && <UeberschrittenMarke />}
                 </div>
-              ) : (
-                fig
               )
             })()}
-            {serviceUeber && (
-              <div className="dm-servicemarke">
-                <UeberschrittenMarke />
-              </div>
-            )}
             {/* Im Panel ist auch diese Nebenzeile ein `.label` (13px, --fg3),
                 nicht die kleinere Fußnote (11,5px/300), die hier stand. */}
             <span className="ads-eyebrow" style={{ marginTop: "8px" }}>

companion-app/src/screens/bausteine.tsx

@@ -266,6 +266,7 @@ export function Wertzeile({
   zusatz,
   hinweis,
   warnung,
+  ueberschritten,
 }: {
   label: ReactNode
   wert: ReactNode
@@ -277,9 +278,12 @@ export function Wertzeile({
   /** Hebt den Wert als abweichend hervor (var(--warn)), wie das Panel es bei
       einem Dongle-Wert tut, der nicht zu unserer Einstellung passt. */
   warnung?: boolean
+  /** Hinterlegt die ganze Zeile blass gelb - fuer einen ueberschrittenen
+      Servicetermin. Nur die Zeile, nicht die Kachel (Nutzerwunsch 07.09.2026). */
+  ueberschritten?: boolean
 }) {
   return (
-    <div className="dm-wertzeile">
+    <div className={`dm-wertzeile${ueberschritten ? " dm-wertzeile--ueberschritten" : ""}`}>
       <dt>{label}</dt>
       <dd
         className={

companion-app/src/stile/screens.css

@@ -2417,21 +2417,31 @@ input[type="range"] {
   margin-top: 4px;
 }
 
-/* Überschrittene Servicetermine: dezent hinterlegt statt umgefärbt, damit die
+/* Überschrittene Servicetermine. --warn ist die FLÄCHE (12 % hinterlegt),
-   Zeile lesbar bleibt und der Hinweis trotzdem auffällt (Ansage des
+   --warn-text die SCHRIFT - dieselbe Rollenteilung wie bei --bad/--bad-flaeche
-   Eigentümers 07.09.2026). --warn ist die Fläche, --warn-text die Schrift -
+   im Panel.
-   dieselbe Rollenteilung wie bei --bad/--bad-flaeche im Panel, und aus
-   demselben Grund: #FF9F0A als Text auf Weiß sind 2.06:1.
 
-   Warum nicht Apples eigener Kontrastwert? Am 07.09.2026 auf
+   Die Schrift ist Apples eigener Kontrastwert: Orange "Increased contrast",
-   developer.apple.com/design/human-interface-guidelines/color nachgeschlagen:
+   #C55300 hell und #FFA056 dunkel, am 07.09.2026 auf
-   Yellow "Increased contrast (light)" ist #A16A00, Orange #C55300 - auf UNSEREM
+   developer.apple.com/design/human-interface-guidelines/color nachgeschlagen
-   Grund nur 4.19 bzw. 4.16:1. Apples Schwelle gilt für Schrift auf einfarbigem
+   (die Hexwerte stehen dort nur im Alternativtext der Farbfelder). Vorher stand
-   Grund; die 12%-Hinterlegung hier senkt sie darunter. Deshalb der gemessene
+   hier ein selbst hergeleitetes #A15800 - rechnerisch kontraststärker, vom
-   Wert #A15800 (4.90:1) statt eines übernommenen.
+   Eigentümer aber zu Recht als "braun statt gelb" gemeldet.
 
-   Auf dem hinterlegten Grund (#FFF3E2 tags, #33311E nachts) misst --warn-text
+   Auch #C55300 wurde als bräunlich gemeldet (07.09.2026). Ursache ist die
-   4.90:1 bzw. 9.30:1 - beides über der 4.5:1-Grenze für kleine Schrift. */
+   Schwelle, nicht der Geschmack: kräftiges Orange ist dunkel genug für 4.5:1
+   nicht zu haben - Apples systemOrange #FF9500 kommt auf Weiß nur auf 2.20:1.
+   Deshalb sind die beiden Rollen jetzt getrennt, jede an IHRER Schwelle:
+
+     --warn-fig  32px = Großtext, Schwelle 3:1  -> #DD6000 (3.65:1 auf Weiß,
+                 3.34:1 auf der Hülle; nachts #FF9F0A mit 8.41:1)
+     die Marke   10.5px = Kleintext, Schwelle 4.5:1 -> keine dünne Schrift,
+                 sondern eine GEFÜLLTE Pille: #C55300 mit weißer Schrift
+                 (4.55:1; nachts #FFA056 mit #171B21, 8.57:1). Als Fläche
+                 liest sich derselbe Ton als Orange, nicht als Braun.
+
+   Alle Werte am 07.09.2026 nach WCAG 2.1 gerechnet, Hülle = 12 % --warn auf
+   dem jeweiligen Kachelgrund. */
 .dm-termingruppe--ueberschritten {
   background: color-mix(in srgb, var(--warn) 12%, transparent);
   border-radius: var(--r-tile);
@@ -2440,25 +2450,38 @@ input[type="range"] {
   margin-left: -12px;
   margin-right: -12px;
 }
-/* Die Trennlinie zur Vorgängerzeile liefe über die abgerundete Fläche - die
-   übernimmt hier die Abgrenzung. */
 .dm-termingruppe--ueberschritten,
 .dm-termingruppe--ueberschritten + .dm-termingruppe {
   border-top: 0;
 }
 .dm-ueberschritten-marke {
   font-size: 10.5px;
-  color: var(--warn-text);
+  font-weight: 600;
-  border: 1px solid var(--warn-text);
+  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;
 }
 .dm-tgkopf .dm-ueberschritten-marke { margin-left: auto; }
-/* Auf der Übersicht wechselt zusätzlich die Kennzahl die Farbe - dort ist sie
-   die Aussage, nicht nur ihr Rahmen. */
 .dm-serviceblock--ueberschritten .ads-fig,
-.dm-serviceblock--ueberschritten .ads-fig * { color: var(--warn-text); }
+.dm-serviceblock--ueberschritten .ads-fig * { color: var(--warn-fig); }
-.dm-servicemarke { display: inline-flex; margin-top: 8px; }
+/* Auf der Übersicht neben der Kennzahl, nicht darunter - die Kachel soll durch
+   die Markierung nicht höher werden (Nutzerwunsch 07.09.2026). */
+.dm-servicefig .dm-ueberschritten-marke { margin-left: 10px; }
+/* In "Mein Audi" links vom Wert. */
+.dm-wertzeile .dm-ueberschritten-marke { margin-right: 8px; }
+/* In "Mein Audi" wird NUR die überschrittene Zeile hinterlegt, nicht die ganze
+   Kachel - analog zur Termingruppe im Service-Blatt (Nutzerwunsch 07.09.2026).
+   Der volle Rand kommt über die negativen Außenabstände. */
+.dm-wertzeile--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;
+}

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
+/* Ueberschrittene Servicetermine. --warn ist die FLAECHE (12% hinterlegt),
-   Zeile lesbar bleibt und der Hinweis trotzdem auffaellt (Ansage des
+   --warn-text die SCHRIFT - dieselbe Rollenteilung wie bei --bad/--bad-flaeche.
-   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.
 
-   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):
+   (die Hexwerte stehen dort nur im Alternativtext der Farbfelder). Vorher stand
-   Yellow "Increased contrast (light)" ist #A16A00, Orange #C55300. Beide
+   hier ein selbst hergeleitetes #A15800 - rechnerisch kontraststaerker, vom
-   liefern auf UNSEREM Grund nur 4.19 bzw. 4.16:1 - Apples Schwelle gilt fuer
+   Eigentuemer aber zu Recht als "braun statt gelb" gemeldet.
-   Schrift auf einfarbigem Grund, die 12%-Hinterlegung hier senkt sie darunter.
-   Deshalb der gemessene Wert #A15800 (4.90:1) statt eines uebernommenen.
 
-   Nebenbefund derselben Recherche: die Seite zeigt inzwischen die neue
+   Auch #C55300 wurde als braeunlich gemeldet (07.09.2026). Ursache ist die
-   ("unified") Palette - systemRed dunkel steht dort auf #FF4245, dieses Projekt
+   Schwelle, nicht der Geschmack: kraeftiges Orange ist dunkel genug fuer 4.5:1
-   fuehrt #FF453A aus der aelteren. Einen einzelnen Wert aus der neuen Generation
+   nicht zu haben - Apples systemOrange #FF9500 kommt auf Weiss nur auf 2.20:1.
-   hereinzunehmen waere ohnehin inkonsistent gewesen.
+   Deshalb sind die beiden Rollen jetzt getrennt, jede an IHRER Schwelle:
 
-   Auf dem hier hinterlegten Grund (#FFF3E2 tags, #33311E nachts) misst
+     --warn-fig  32px = Grosstext, Schwelle 3:1  -> #DD6000 (3.65:1 auf Weiss,
-   --warn-text 4.90:1 bzw. 9.30:1. */
+                 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);
+  font-size: 10.5px; font-weight: 600;
-  border: 1px solid var(--warn-text); border-radius: var(--r-pill);
+  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": [

design-system/src/tokens/tokens.css

@@ -38,7 +38,10 @@
   --fg3: #8E8E93;
   --ok: #30D158;
   --warn: #FFD60A;
-  --warn-text: #FFD60A;
+  --warn-text: #FFA056;
+  --warn-fig: #FF9F0A;
+  --warn-marke-grund: #FFA056;
+  --warn-marke-schrift: #171B21;
   --bad: #FF453A;
   /* Rot als FLAECHE, nicht als Schrift.
 
@@ -85,7 +88,10 @@
   --fg3: #6B6B70;
   --ok: #34C759;
   --warn: #FF9F0A;
-  --warn-text: #A15800;
+  --warn-text: #C55300;
+  --warn-fig: #DD6000;
+  --warn-marke-grund: #C55300;
+  --warn-marke-schrift: #FFFFFF;
   /* #FF3B30 (Apples systemRed) auf #F2F2F7 ergab 3,18 - unter den 4,5 fuer
      16px-Schrift. #D70015 ist Apples systemRed fuer erhoehten Kontrast und
      kommt auf 4,83 (auf Weiss 5,38). Gemessen am 04.09.2026 am