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>

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
-   Zeile lesbar bleibt und der Hinweis trotzdem auffällt (Ansage des
-   Eigentümers 07.09.2026). --warn ist die Fläche, --warn-text die Schrift -
-   dieselbe Rollenteilung wie bei --bad/--bad-flaeche im Panel, und aus
-   demselben Grund: #FF9F0A als Text auf Weiß sind 2.06:1.
+/* Überschrittene Servicetermine. --warn ist die FLÄCHE (12 % hinterlegt),
+   --warn-text die SCHRIFT - dieselbe Rollenteilung wie bei --bad/--bad-flaeche
+   im Panel.
 
-   Warum nicht Apples eigener Kontrastwert? Am 07.09.2026 auf
-   developer.apple.com/design/human-interface-guidelines/color nachgeschlagen:
-   Yellow "Increased contrast (light)" ist #A16A00, Orange #C55300 - auf UNSEREM
-   Grund nur 4.19 bzw. 4.16:1. Apples Schwelle gilt für Schrift auf einfarbigem
-   Grund; die 12%-Hinterlegung hier senkt sie darunter. Deshalb der gemessene
-   Wert #A15800 (4.90:1) statt eines übernommenen.
+   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 Hexwerte stehen dort nur im Alternativtext der Farbfelder). Vorher stand
+   hier ein selbst hergeleitetes #A15800 - rechnerisch kontraststärker, vom
+   Eigentümer aber zu Recht als "braun statt gelb" gemeldet.
 
-   Auf dem hinterlegten Grund (#FFF3E2 tags, #33311E nachts) misst --warn-text
-   4.90:1 bzw. 9.30:1 - beides über der 4.5:1-Grenze für kleine Schrift. */
+   Auch #C55300 wurde als bräunlich gemeldet (07.09.2026). Ursache ist die
+   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);
-  border: 1px solid var(--warn-text);
+  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;
 }
 .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-servicemarke { display: inline-flex; margin-top: 8px; }
+.dm-serviceblock--ueberschritten .ads-fig * { color: var(--warn-fig); }
+/* 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;
+}