tobias
b0ec8b4982
Gemessen statt geschaut: eine Pruefroutine lief auf jedem Bildschirm und
pruefte Ueberlauf, Tippziele, abgeschnittenen Text, Bilder ohne Quelle und
WCAG-Kontrast fuer jeden Textknoten. Dazu die Live-App mit echten Daten, die
Musterseite fuer Leerzustaende und das Panel zum Abgleich.
1. Deutsche Datumsangaben wurden falsch gelesen. new Date("01.03.2025")
liest amerikanisch: Tage bis 12 wurden still vertauscht, ab Tag 13 fiel
der Wert ganz weg. Die Erstzulassung stand auf zwei Bildschirmen
unterschiedlich da. alsZeitpunkt() erkennt jetzt ISO, TT.MM.JJJJ und
MM/JJJJ, weist unmoegliche Daten ab und fuehrt die Genauigkeit mit -
aus "08/2026" wird "August 2026", kein erfundener Erster.
2. Die Hauptuntersuchung war in beiden Oberflaechen unerreichbar. Das Panel
leitete sie aus der Erstzulassung ab, aber nur bei MM/JJJJ, und benutzte
den eingetragenen Wert gar nicht. Jetzt beide: eingetragene Faelligkeit
vor Servicebuch vor Erstzulassung + 24 Monate.
3. Die Tankstellenmarke stand zweimal da, wenn der Name kein Komma hat
("Shell München Ost"). ohneMarkeVorn() nimmt sie vorn ab.
4. Bilder wurden geholt, obwohl beide wussten, dass es sie nicht gibt -
fuenf 404 fuer dieselbe Datei in einem Ladevorgang. Jetzt gar keine
Adresse bei Stand 0; nachgemessen 4 Anfragen, alle 200.
5. Ein Bildelement ohne Quelle zeigte das kaputte Bildsymbol, und onerror
greift dort nicht: ohne src gibt es keinen Ladeversuch.
Dazu: leere Klammern beim Steuersatz, leere graue Kachel bei leerer
Leistungsgruppe, Umbruch auf dem Einrichtungsbildschirm, drei
Leerdarstellungen in einer Kachel, fehlende Grundschrift.
Apple HIG: Kontrast war an einer Stelle 3,18 statt 4,5, weisse Schrift auf
der Loeschflaeche 3,41/3,55. Rot als Schrift und Rot als Flaeche sind jetzt
getrennte Token (--bad / --bad-flaeche), beide Apples systemRed fuer
erhoehten Kontrast. Tippziele: unsichtbares 44x44-Overlay, wo die sichtbare
Groesse Teil des Bildes ist, echte Mindesthoehe, wo das Element Flaeche ist -
Formulare werden dadurch sichtbar hoeher.
Neu auf Wunsch: Wischen in der Bildergalerie (beide Richtungen) und die
HIG-konforme Loeschgeste - ein voller Wisch loescht ohne zweiten Tipp, ab
55 % der Zeilenbreite, mit wachsender roter Flaeche und erhaltener
Rueckfrage. Dabei fiel auf, dass der Zugwert aus dem React-Zustand gelesen
wurde und ein schneller Wisch dadurch verlorenging; er liegt jetzt in einer
Referenz.
Paritaet: alle 26 Routen und Titel decken sich, Fahrzeugstatus zeilengleich,
zwei ungeplante Abweichungen (Datumsformatierung, Herkunft der
Hauptuntersuchung) geschlossen.
tsc sauber, 271 Tests, vite build sauber, Design-System gebaut, Panel als
Modul geparst, audi_ha_test auf 2026.9.4.23 ohne Traceback. Live nachgemessen:
Datum auf beiden Bildschirmen gleich, keine 404 mehr, Zurueck-Pfeil sichtbar
34x34 und treffbar 44x44, Galerie wischt in beide Richtungen, voller Wisch
loest die Rueckfrage aus, keine Kontrast-Unterschreitung mehr.
2245 lines
61 KiB
CSS
2245 lines
61 KiB
CSS
/*
|
|
* Screen-übergreifende Bausteine: Eingabefelder, Hinweisleiste,
|
|
* Ersteinrichtung, Leerzustände, Ladeanzeige.
|
|
*/
|
|
|
|
/* -------------------------------------------------------- Eingabefelder */
|
|
|
|
.dm-eingabe,
|
|
.dm-auswahl {
|
|
font: inherit;
|
|
font-weight: 300;
|
|
font-size: 16px;
|
|
color: var(--fg);
|
|
background: none;
|
|
border: 0;
|
|
text-align: right;
|
|
outline: none;
|
|
min-width: 120px;
|
|
max-width: 60%;
|
|
padding: 0;
|
|
}
|
|
|
|
.dm-eingabe::placeholder {
|
|
color: var(--fg3);
|
|
}
|
|
|
|
/* Die 16px oben sind nicht Geschmack, sondern Pflicht: unterhalb davon zoomt
|
|
iOS beim Antippen eines Eingabefelds die ganze Seite heran, danach lässt
|
|
sich die Ansicht verschieben - in einer nativen Hülle wirkt das wie ein
|
|
Fehler (Nutzerbefund 2026-08-29, Willkommensbildschirm).
|
|
Sie kamen bisher nie an: @audi-dash/ui setzt ".ads-feld input" auf 13.5px,
|
|
und dieser Selektor ist spezifischer (Klasse + Typ) als das bloße
|
|
".dm-eingabe" - er gewinnt also, egal in welcher Reihenfolge geladen wird.
|
|
Deshalb hier dieselbe Angabe noch einmal, spezifisch genug um zu greifen.
|
|
@audi-dash/ui bleibt unangetastet, wie schon beim type=date-Fall unten. */
|
|
.ads-feld input.dm-eingabe,
|
|
.ads-feld select.dm-auswahl {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* type="date": ohne appearance-Reset behält Safari/WKWebView (die iOS-Hülle
|
|
dieser App) sein eigenes, stark abgerundetes natives Eingabe-Chrome statt
|
|
der Box-Optik aus @audi-dash/ui's Feld - beim Nutzer sichtbar als
|
|
"gestreckter Kreis statt Box" (Reifen.tsx, Wechseltermin). @audi-dash/ui
|
|
selbst bleibt unangetastet (kein appearance-Reset dort, andere Felder
|
|
zeigen den Fehler nicht) - der Reset sitzt hier, spezifisch für type=date,
|
|
höhere Selektor-Spezifität als das geteilte ".ads-feld input" schlägt
|
|
dessen feste min-width:132px, die hier breiter ist als "27.08.2026"
|
|
braucht. */
|
|
input[type="date"].dm-eingabe {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
/* Kein width:fit-content mehr. Das stammte aus der Zeit, als .ads-feld input
|
|
eine feste min-width von 132px hatte - die ist beim Paritaetsabgleich auf
|
|
min-width:0 umgestellt worden, seither zwang fit-content das Feld in eine
|
|
Breite, die je Datum und Stelle anders ausfiel. Jetzt bemisst es sich wie
|
|
jedes andere Eingabefeld (flex:0 1 auto aus @audi-dash/ui), genau wie
|
|
.feld input im Panel. */
|
|
text-align: right;
|
|
}
|
|
|
|
/* Eine Zeile aus einer bearbeitbaren Liste (z. B. Selbstbeteiligung im
|
|
Vertrag) - zwei Eingaben plus Löschen-Knopf in einer Reihe, deckungsgleich
|
|
mit .feld/.zeile-loeschen im Panel (audi-dashboard.css). */
|
|
.dm-selbst-zeile {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--sp-2);
|
|
}
|
|
|
|
.dm-zeile-loeschen {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
border: none;
|
|
background: none;
|
|
color: var(--fg3);
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.dm-zeile-loeschen::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -11px;
|
|
}
|
|
|
|
.dm-zeile-loeschen:active {
|
|
color: var(--bad);
|
|
}
|
|
|
|
.dm-auswahl {
|
|
text-align: right;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Deckend, NICHT --tile: die aufgeklappte Liste eines <select> malt der
|
|
Browser selbst, ausserhalb der Seite. Ein durchscheinender Wert laesst
|
|
dort den hellen Untergrund des Systems durch - im Panel steht aus genau
|
|
diesem Grund --canvas (.feld select option). */
|
|
.dm-auswahl option {
|
|
color: var(--fg);
|
|
background: var(--canvas);
|
|
}
|
|
|
|
/* `.notiz` im Panel: --ios-fill statt --tile-2, 12px Radius, 14px Abstand
|
|
nach oben, Zeilenhöhe 1,55 und normaler Schnitt. */
|
|
.dm-notiz {
|
|
font: inherit;
|
|
font-size: 16px;
|
|
color: var(--fg);
|
|
background: var(--ios-fill);
|
|
border: 0;
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
margin-top: 14px;
|
|
width: 100%;
|
|
min-height: 88px;
|
|
line-height: 1.55;
|
|
resize: vertical;
|
|
outline: none;
|
|
}
|
|
|
|
/* --------------------------------------------------------- Hinweisleiste */
|
|
|
|
.dm-hinweis {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-2);
|
|
padding: 9px var(--sp-5);
|
|
padding-top: calc(env(safe-area-inset-top, 0px) + 9px);
|
|
font-size: 12.5px;
|
|
font-weight: 300;
|
|
color: var(--fg);
|
|
background: var(--tile-2);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.dm-hinweis--offline {
|
|
color: var(--warn);
|
|
}
|
|
|
|
.dm-hinweis svg {
|
|
flex: none;
|
|
}
|
|
|
|
/* -------------------------------------------------------- Ersteinrichtung */
|
|
|
|
.dm-einrichtung {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* Seitlich 20 statt 32: auf 375 px blieben fuer die Beschriftung nur
|
|
87 px, und "Server-Adresse" brach dadurch am Bindestrich um -
|
|
ausgerechnet auf dem allerersten Bildschirm (gemessen 04.09.2026).
|
|
Oben und unten bleibt es bei 32. */
|
|
padding: 32px 20px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.dm-einrichtung__karte {
|
|
width: 100%;
|
|
max-width: 420px;
|
|
}
|
|
|
|
.dm-einrichtung__titel {
|
|
font-size: 28px;
|
|
font-weight: 300;
|
|
letter-spacing: -0.02em;
|
|
margin: 10px 0 12px;
|
|
}
|
|
|
|
.dm-einrichtung__text {
|
|
font-size: 14px;
|
|
font-weight: 300;
|
|
line-height: 1.55;
|
|
color: var(--fg2);
|
|
margin: 0 0 22px;
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
.dm-einrichtung__fehler {
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
line-height: 1.5;
|
|
color: var(--bad);
|
|
margin: 14px 0 0;
|
|
}
|
|
|
|
.dm-einrichtung__knoepfe {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: var(--sp-4);
|
|
}
|
|
|
|
.dm-einrichtung__hinweis {
|
|
font-size: 12.5px;
|
|
font-weight: 300;
|
|
line-height: 1.5;
|
|
color: var(--fg3);
|
|
margin: 18px 0 0;
|
|
}
|
|
|
|
/* ------------------------------------------------- Leer- und Ladezustände */
|
|
|
|
/* `.leer` im Panel: linksbündig und knapp gesetzt (gap 8px, padding 4px 0 2px),
|
|
Titel 16px/400 in --fg, Text 13,5px in --fg2. Hier war der Leerzustand
|
|
zentriert, mit 44px Polster und dünnerem Schnitt - deutlich mehr Fläche als
|
|
im Panel. */
|
|
.dm-leer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp-2);
|
|
padding: 4px 0 2px;
|
|
color: var(--fg2);
|
|
}
|
|
|
|
.dm-leer__titel {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: var(--fg);
|
|
}
|
|
|
|
.dm-leer__text {
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
margin: 0;
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
.dm-laden {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--sp-2);
|
|
padding: 44px 24px;
|
|
color: var(--fg2);
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
/* ------------------------------------------------------------ Übersicht */
|
|
|
|
/* Deckungsgleich mit .szene.bleed im Panel: randlos, keine Kartenfläche -
|
|
Fahrzeugbild und Name/Kennzeichen sitzen direkt auf dem Seitenhintergrund,
|
|
nicht in einer grauen Karte. War hier bis 2026-08-30 fälschlich als
|
|
Kachel mit Hintergrund gebaut (Parität-Audit). */
|
|
/* Randloses Fahrzeugbild wie im Panel (`.szene.bleed{margin:-10px -20px 0;
|
|
padding:0 0 10px}` plus `.szene.bleed .carbox{padding:0 8px}` und der
|
|
Verlauf nach unten in die Fläche). Hier war das Bild bisher auf die
|
|
Inhaltsbreite eingerückt und in eine abgerundete Kachel geschnitten -
|
|
im Panel läuft es über die volle Bildschirmbreite und blendet nach unten
|
|
aus. */
|
|
.dm-szene {
|
|
position: relative;
|
|
margin: -10px calc(-1 * var(--seitenrand)) 0;
|
|
padding: 0 8px 10px;
|
|
}
|
|
|
|
/* Die drei oberen Kacheln der Übersicht tragen im Panel eigene Abstände
|
|
(20/22/22 statt der 14 aller anderen). */
|
|
.dm-kopfblock {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.dm-tankkachel,
|
|
.dm-servicekachel {
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
/* Der Ausblend-Verlauf ist am 2026-08-31 entfallen: er lag ueber dem
|
|
unteren Teil des Fotos, und der Eigentuemer hat zweimal darum gebeten,
|
|
das Fahrzeug unverdeckt zu sehen. Ebenso der Bodenschatten, der hier
|
|
frueher als .dm-szene--strasse::after stand - samt dem Schalter dafuer. */
|
|
|
|
|
|
/* Das Fahrzeugfoto wird nicht mehr beschnitten.
|
|
|
|
Gemessen am echten Foto (2026-08-31): es ist 2000x1125 gross, also 16:9.
|
|
Der Kasten stand auf 16:8 - bei object-fit:cover wurde das Bild auf die
|
|
Kastenbreite skaliert und oben wie unten je ein Viertel abgeschnitten.
|
|
Das Dach lag darin.
|
|
|
|
Statt das Verhaeltnis auf 16:9 festzuschreiben - was beim naechsten Foto in
|
|
einem anderen Format wieder schneiden wuerde - bestimmt jetzt das Bild
|
|
selbst die Hoehe. Der Platzhalter behaelt sein festes Verhaeltnis, er hat
|
|
ja keines von sich aus. */
|
|
.dm-szene .ads-bildbox {
|
|
aspect-ratio: auto;
|
|
}
|
|
|
|
.dm-szene .ads-bildbox img {
|
|
height: auto;
|
|
}
|
|
|
|
/* Ohne Foto bleibt die Fläche flach und läuft nicht randlos: sonst stünden
|
|
172px leerer Platzhalter vor der Reichweite, der wichtigsten Zahl der
|
|
Seite (`.bildbox.bild-fehlt.carfix.klein{height:120px}` und
|
|
`.szene.bleed:has(.bild-fehlt)` im Panel). */
|
|
/* Der Platzhalter belegt denselben Kasten wie ein echtes Foto (16:8). Er war
|
|
zwischenzeitlich auf 120 und dann 72px gestaucht, um die Reichweite
|
|
hoeher zu ruecken - auf Ansage des Besitzers steht er wieder in voller
|
|
Groesse, weil ein Streifen nicht erkennen laesst, was dort hingehoert. */
|
|
.dm-szene .ads-bildbox:has(.ads-platzhalter) {
|
|
aspect-ratio: 16 / 8;
|
|
height: auto;
|
|
}
|
|
|
|
.dm-galerie-wechsel .ads-bildbox:has(.ads-platzhalter) {
|
|
aspect-ratio: auto;
|
|
height: 132px;
|
|
}
|
|
|
|
.dm-szene:has(.ads-platzhalter) {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.dm-szene:has(.ads-platzhalter)::before {
|
|
display: none;
|
|
}
|
|
|
|
/* Die Vorschau in den Einstellungen zeigt das ganze Foto.
|
|
|
|
Vorher galt der Regelkasten 4:3 mit object-fit:cover - ein Foto anderen
|
|
Formats wurde oben und unten beschnitten, bei der Frontansicht besonders
|
|
deutlich (gemeldet 02.09.2026). Wer prüfen will, ob das richtige Bild
|
|
hochgeladen ist, muss es ganz sehen. Dieselbe Entscheidung wie beim
|
|
Fahrzeugfoto der Übersicht (.carfix.klein im Panel): das Bild bestimmt die
|
|
Höhe, nicht der Kasten. Nur der Platzhalter behält ein festes Verhältnis,
|
|
er hat ja keines von sich aus. */
|
|
.dm-einstellbild .ads-bildbox {
|
|
aspect-ratio: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.dm-einstellbild .ads-bildbox img {
|
|
height: auto;
|
|
}
|
|
|
|
.dm-einstellbild .ads-bildbox:has(.ads-platzhalter) {
|
|
aspect-ratio: 4 / 3;
|
|
}
|
|
|
|
/* Die Draufsicht auf der Fahrzeugseite ist eine Beigabe, keine Szene: sie
|
|
steht über den Sicherheitszeilen und soll die Zeilen nicht nach unten
|
|
drängen. Statt randlos über die volle Breite (rund 374px auf einem Telefon,
|
|
mit 16:8 also 187px hoch) steht sie eingerückt und mittig — 60% Breite, die
|
|
Höhe geht im selben Verhältnis mit auf rund 112px zurück. Auf Ansage des
|
|
Eigentümers am 02.09.2026 („Draufsicht-Foto Bereich ist zu groß"):
|
|
schmaler, nicht flacher — flacher hätte bei einem Foto, das nicht sehr
|
|
breit ist, oben und unten geschnitten. Gleichlautend .szene.bleed.schmal
|
|
im Panel. Der :has()-Zweig oben setzt die Ränder bereits auf 0, wenn kein
|
|
Foto da ist; hier gilt es unabhängig davon. */
|
|
.dm-szene--schmal {
|
|
/* Der Abstand zum Fahrzeug kommt jetzt aus dem Layout, nicht aus leerem
|
|
Bildrand: das Foto ist seit dem 02.09.2026 freigestellt und eng
|
|
beschnitten. Oben und unten Luft wie im Vorbild des Eigentümers. */
|
|
margin: 0;
|
|
padding: 22px 0 26px;
|
|
}
|
|
|
|
.dm-szene--schmal .ads-bildbox {
|
|
width: 60%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Zum Löschen nach links wischen (WischLoeschen in bausteine.tsx).
|
|
|
|
Der Knopf liegt fest hinter dem Inhalt, verschoben wird nur der Inhalt
|
|
darüber — deshalb braucht er einen DECKENDEN Grund, sonst schiene das Rot
|
|
hindurch. --tile ist der Grund der Kachel, in der die Zeile sitzt.
|
|
|
|
touch-action: pan-y sagt dem Browser, dass die waagerechte Achse uns
|
|
gehört: senkrecht scrollt er weiter selbst, waagerecht wartet er auf uns,
|
|
statt die Geste nach ein paar Pixeln zu übernehmen. */
|
|
.dm-wisch {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Unsichtbar, solange nicht gewischt wird - siehe WischLoeschen und
|
|
.ads-swipe-delete im Design-System. */
|
|
.dm-wisch__loeschen {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 88px;
|
|
visibility: hidden;
|
|
border: 0;
|
|
padding: 0;
|
|
background: var(--bad-flaeche, var(--bad));
|
|
color: #fff;
|
|
font: inherit;
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dm-wisch--zeigt .dm-wisch__loeschen {
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Voll durchgewischt: die Flaeche wird kraeftiger, damit vor dem Loslassen
|
|
ablesbar ist, dass jetzt geloescht wird und nicht nur aufgeklappt.
|
|
Wortgleich mit .ads-swipe-delete--armed im Design-System. */
|
|
.dm-wisch__loeschen--scharf {
|
|
filter: brightness(1.12);
|
|
}
|
|
|
|
.dm-wisch__inhalt {
|
|
position: relative;
|
|
/* Deckend, NICHT --tile: die Zeile liegt auf einer Kachel, und die ist
|
|
im Nachtmodus selbst nur ein durchscheinender Schleier - zweimal
|
|
gemalt wird der Streifen heller als die Kachel um ihn herum, und der
|
|
rote Knopf darunter scheint durch. Dieselbe Regel wie bei
|
|
.ads-swipe-content und .swipe-content im Panel (Abschnitt AP). */
|
|
background: var(--tile-deckend, var(--canvas));
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.dm-szene .ads-bild,
|
|
.dm-szene img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* Kein linkes/rechtes Innenpolster: das Panel stellt Kennzeichen/Marke in
|
|
eine randlose "tile flat" (padding:0) - links/rechts eingerückt zu haben
|
|
ließ diesen Text nicht mit "Reichweite" & Co. auf einer Kante stehen
|
|
(Nutzerbericht "nicht linksbündig zum Rest der Seite", live gemessen:
|
|
38px hier gegen 22px bei "Reichweite" - im Panel beide bei 16px). Nur
|
|
oben/unten bleibt Abstand (zum Bild bzw. zur nächsten Kachel). */
|
|
/* Ohne eigenes Polster: im Panel sitzen Typenschild, Kennzeichen und
|
|
Statuszeile direkt in einer randlosen `.tile.flat` (padding 0), das
|
|
Kennzeichen mit 10px Abstand zum Schild. Die 16/22px hier machten den Block
|
|
36px höher als im Panel (dort 89px, hier gemessen 125px). */
|
|
.dm-szene__text > .ads-eyebrow {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Übersicht: "Nächster Service" als tippbare Kennzahl innerhalb der Kachel,
|
|
darunter der Kilometerstand als ruhige Wertezeile. Nur der obere Teil ist
|
|
ein Knopf, damit "differentiate controls from content" (Apple HIG) gilt -
|
|
deckungsgleich mit .serviceblock/.servicezeile im Panel
|
|
(audi-dashboard.css). */
|
|
.dm-serviceblock {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
border: 0;
|
|
background: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
font: inherit;
|
|
text-align: left;
|
|
color: inherit;
|
|
}
|
|
/* Nur wenn es wirklich ein Knopf ist (ein Termin vorhanden, siehe
|
|
Uebersicht.tsx) - der "kein Eintrag"-Zustand ist ein reines <div>, ohne
|
|
Zeigehand/Press-Feedback, deckungsgleich mit der nicht-klickbaren
|
|
.tile-Variante im Panel. */
|
|
button.dm-serviceblock {
|
|
cursor: pointer;
|
|
}
|
|
button.dm-serviceblock:active {
|
|
opacity: 0.55;
|
|
}
|
|
.dm-serviceblock__chevron {
|
|
position: absolute;
|
|
top: 3px;
|
|
right: 0;
|
|
width: 6px;
|
|
height: 10px;
|
|
color: var(--fg3);
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.4;
|
|
}
|
|
/* Serviceart-Icon links der Kennzahl statt des Wortes "bis zum/zur ..." -
|
|
deckungsgleich mit .fig-zeile im Panel (audi-dashboard.css). */
|
|
/* margin-top deckungsgleich mit .fig-zeile im Panel - fehlte hier, "Nächster
|
|
Service:" und die Kennzahl standen ohne Abstand aufeinander (Parität-
|
|
Audit 2026-08-30). Der zweite Selektor deckt den Fall ohne Serviceart-
|
|
Icon ab (Hauptuntersuchung), wo das Panel dasselbe margin-top direkt auf
|
|
.fig setzt statt auf eine Wrapper-Zeile. */
|
|
.dm-servicefig {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
.dm-serviceblock > .ads-fig {
|
|
margin-top: 8px;
|
|
}
|
|
.dm-servicefig svg {
|
|
color: var(--fg2);
|
|
flex: none;
|
|
}
|
|
/* `.zahnrad` im Panel: rechts oben in der Kachel, 44px Trefferfläche,
|
|
17px Symbol. */
|
|
.dm-kachel--zahnrad {
|
|
position: relative;
|
|
}
|
|
|
|
.dm-kachel--zahnrad > .ads-eyebrow:first-child {
|
|
padding-right: 44px;
|
|
}
|
|
|
|
/* Das Zahnrad ist 44px hoch (Trefferfläche), die Überschrift darunter nur
|
|
12px. Ohne reservierte Zeile ragte es also 20px in den Kachelinhalt und lag
|
|
sichtbar auf dem ersten Knopf - auf der Versicherungsseite auf "Inland ·
|
|
<Nummer>", von dort auch gemeldet (02.09.2026). Es fing dessen obere Hälfte
|
|
ab: der Knopf ließ sich am oberen Rand nicht wählen.
|
|
|
|
Statt das Zahnrad zu verkleinern (44px sind die Mindestgröße einer
|
|
Trefferfläche) bekommt die Kopfzeile die Höhe, die es braucht. Gleiche
|
|
Regel im Panel (.tile:has(> .zahnrad)). */
|
|
.dm-kachel--zahnrad > .ads-eyebrow:first-child,
|
|
.dm-kachel--zahnrad > .ads-title:first-child {
|
|
min-height: 34px;
|
|
padding-right: 48px;
|
|
}
|
|
|
|
.dm-zahnrad {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
width: 44px;
|
|
height: 44px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: none;
|
|
color: var(--fg3);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
|
|
.dm-zahnrad:hover,
|
|
.dm-zahnrad:active {
|
|
background: var(--tile-2);
|
|
color: var(--fg);
|
|
}
|
|
|
|
.dm-zahnrad:active {
|
|
transform: scale(.92);
|
|
}
|
|
|
|
/* Rufnummern der Notruf-Kachel: sehen aus wie Aktionsknöpfe, sind aber Links
|
|
(`<a class="aktion" href="tel:…">` im Panel). */
|
|
.dm-waehlknopf {
|
|
display: block;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
|
|
/* `.tile` der Kfz-Steuer steht im Panel mit 26px Abstand nach der
|
|
Vertragskachel. */
|
|
.dm-steuerkachel {
|
|
margin-top: 26px;
|
|
}
|
|
|
|
.dm-diagramm__fuss {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Der Zoom-Knopf ist im Panel eine schmale Variante von `.aktion`
|
|
(`padding:8px 16px;font-size:11px;width:auto;margin-top:0`). */
|
|
.dm-zoomzurueck {
|
|
width: auto;
|
|
min-height: 0;
|
|
margin-top: 0;
|
|
padding: 8px 16px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.dm-diagramm__tooltip {
|
|
margin-top: var(--sp-3);
|
|
font-size: 13px;
|
|
color: var(--fg2);
|
|
}
|
|
|
|
/* Ruhespannungs-Skala auf der Batterieseite (Panel: .bv-skala-kopf plus der
|
|
Farbverlauf rot → gelb → grün und die drei Eckwerte darunter). */
|
|
.dm-skalakopf {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 16px;
|
|
font-size: 13px;
|
|
letter-spacing: .01em;
|
|
color: var(--fg3);
|
|
}
|
|
|
|
.dm-skalabalken {
|
|
margin-top: 8px;
|
|
height: 8px;
|
|
border-radius: var(--r-pill);
|
|
background: linear-gradient(to right, var(--bad), var(--warn), var(--ok));
|
|
}
|
|
|
|
.dm-skalamarken {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.dm-skalamarken small {
|
|
font-size: 12.5px;
|
|
color: var(--fg3);
|
|
}
|
|
|
|
.dm-bewertung {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.dm-bewertungstext {
|
|
display: block;
|
|
margin-top: 10px;
|
|
color: var(--fg2);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Antipp-Menü am Fahrzeugfoto (`.bildmenu` im Panel, iOS-Auflage: kein
|
|
Rahmen, durchscheinend mit Weichzeichner). */
|
|
.dm-bildklick {
|
|
position: relative;
|
|
}
|
|
|
|
.dm-bildklick__flaeche {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
cursor: pointer;
|
|
}/* Name des Autohauses: 15px in --fg, wie im Panel. */
|
|
.dm-autohaus__name {
|
|
font-size: 15px;
|
|
margin-top: var(--sp-3);
|
|
}
|
|
|
|
/* Fehlender Wert im technischen Datenblatt: „noch offen" in --fg3, wie im
|
|
Panel (`<dd style="color:var(--fg3)">`). */
|
|
.dm-offen {
|
|
color: var(--fg3);
|
|
}
|
|
|
|
/* Zweitzeile unter der Bezeichnung eines Beitragspostens (SF + Beitragssatz). */
|
|
.dm-beitragsposten__sf {
|
|
color: var(--fg3);
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* ------------------------------------------------------------ Statistik */
|
|
|
|
/* `.tile-h` im Panel: der ganze Kachelkopf ist der Schalter zum Aufklappen,
|
|
ohne eigenes Aussehen. */
|
|
.dm-statkopf {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
font-family: inherit;
|
|
text-align: left;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dm-statkopf__kopfzeile {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--sp-3);
|
|
}
|
|
|
|
.dm-statkopf__kopfzeile .ads-eyebrow {
|
|
flex: 1;
|
|
}
|
|
|
|
.dm-statkopf[aria-expanded="true"] .ads-mark {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.dm-statkopf__zeile {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
margin-top: var(--sp-3);
|
|
}
|
|
|
|
.dm-statkopf__neben {
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
/* `.quad` im Panel: vier Werte nebeneinander, Zahl im Wide-Schnitt. */
|
|
/* Fuenf Spalten (Jahr/Monat/Woche/Tag/Absolut) passen auf einem Telefon nicht
|
|
nebeneinander: bei rund 300px Innenbreite blieben je 51px, und "209.177"
|
|
braucht bei 16px Audi Type Wide etwa 60. auto-fit bricht deshalb um - auf dem
|
|
Telefon drei plus zwei, auf einem breiten Bildschirm alle fuenf in einer
|
|
Reihe. Deckungsgleich mit .quad im Panel. */
|
|
/* Vier feste Spalten - Jahr, Monat, Woche, Tag muessen in EINE Zeile passen.
|
|
|
|
Vorher stand hier repeat(auto-fit, minmax(84px, 1fr)). Auf dem Telefon ist
|
|
die Kachel innen 307px breit, damit passten bei 12px Abstand nur drei
|
|
Spalten (3 x 84 + 2 x 12 = 276; vier waeren 372) - die vierte rutschte in
|
|
eine zweite Zeile.
|
|
|
|
Mit vier festen Spalten bleiben 67,75px je Spalte. Der laengste realistisch
|
|
vorkommende Wert ist ein sechsstelliger Kilometerstand wie "209.177": am
|
|
laufenden Panel gemessen 67px in Audi Type Wide 300 bei 16px. Es passt
|
|
also, aber ohne Reserve - eine fuenfte Spalte gaebe es nur mit kleinerer
|
|
Schrift, und genau deshalb steht der Gesamtwert jetzt in der Kopfzeile der
|
|
Kachel statt in einer eigenen Spalte.
|
|
|
|
Bewusst kein white-space:nowrap: waere ein Wert doch einmal breiter,
|
|
umbricht er innerhalb seiner Spalte, statt aus der Kachel zu laufen. */
|
|
.dm-quad {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: var(--sp-3);
|
|
margin-top: var(--sp-3);
|
|
}
|
|
|
|
.dm-quad__n {
|
|
display: block;
|
|
font-family: var(--font-wide);
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
color: var(--fg);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.dm-quad__l {
|
|
display: block;
|
|
margin-top: 4px;
|
|
font-size: 11px;
|
|
letter-spacing: normal;
|
|
color: var(--fg3);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.dm-warnton {
|
|
color: var(--warn);
|
|
}
|
|
|
|
/* `.wert` im Panel: der normale Fließtext einer Kachel. */
|
|
.dm-wert {
|
|
font-size: 14px;
|
|
letter-spacing: normal;
|
|
color: var(--fg2);
|
|
margin-top: var(--sp-2);
|
|
}
|
|
|
|
.dm-servicezeile {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--sp-4);
|
|
margin-top: 14px;
|
|
padding-top: 13px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
/* Service-Seite, "Anstehende Termine": drei sichtbar getrennte Bloecke statt
|
|
einer Wertzeilen-Liste - deckungsgleich mit .termingruppe im Panel
|
|
(audi-dashboard.css, vService()). Trennung ueber Abstand und eine Haarlinie
|
|
zwischen den Bloecken, nicht ueber verschachtelte Kacheln (Audi-CI). */
|
|
.dm-termingruppe {
|
|
padding: 18px 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.dm-termingruppe:first-of-type {
|
|
padding-top: 2px;
|
|
border-top: 0;
|
|
}
|
|
.dm-tgkopf {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
min-width: 0;
|
|
}
|
|
.dm-tgkopf svg {
|
|
color: var(--fg2);
|
|
flex: none;
|
|
}
|
|
.dm-tgkopf span {
|
|
font-size: 16px;
|
|
color: var(--fg);
|
|
font-weight: 400;
|
|
}
|
|
.dm-tgvorgabe {
|
|
font-size: 12.5px;
|
|
color: var(--fg2);
|
|
margin-top: 8px;
|
|
}
|
|
.dm-tgwert {
|
|
/* Fehlte hier ganz - fiel auf die schmale Grundschrift zurück statt auf
|
|
Audi Type Wide wie .tg-wert im Panel (Parität-Audit 2026-08-29). */
|
|
font-family: var(--font-wide);
|
|
font-weight: 300;
|
|
font-size: 22px;
|
|
color: var(--fg);
|
|
letter-spacing: -0.005em;
|
|
margin-top: 4px;
|
|
}
|
|
.dm-tgwert--leer {
|
|
font-weight: 400;
|
|
font-size: 15px;
|
|
color: var(--fg3);
|
|
margin-top: 8px;
|
|
}
|
|
.dm-tgprognose {
|
|
font-size: 12.5px;
|
|
color: var(--fg2);
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* Reichweiten-Kachel auf der Übersicht - deckungsgleich mit .tankzeile/.pct
|
|
im Panel (audi-dashboard.css). */
|
|
.dm-tankzeile {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.dm-tankzeile__pct {
|
|
font-size: 15px;
|
|
color: var(--fg2);
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.dm-navikachel__wert {
|
|
margin-top: var(--sp-1);
|
|
font-size: 15px;
|
|
font-weight: 300;
|
|
color: var(--fg);
|
|
}.dm-navikachel__wert small,
|
|
.dm-wertzeile small {
|
|
display: block;
|
|
margin-top: 2px;
|
|
font-size: 12.5px;
|
|
color: var(--fg3);
|
|
}.dm-textknopf {
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--fg2);
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
padding: 10px 14px;
|
|
border-radius: var(--r-pill);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dm-textknopf:hover:not(:disabled) {
|
|
background: var(--shade);
|
|
color: var(--fg);
|
|
}
|
|
|
|
.dm-textknopf:disabled {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
|
|
/* --------------------------------------------------------- Werteliste */
|
|
|
|
.dm-werteliste {
|
|
margin: var(--sp-3) 0 0;
|
|
}
|
|
|
|
/* Live am Panel gemessen (.row/dt/dd, audi-dashboard.css): beide Spalten
|
|
16px/400, dt (Feldname) in var(--fg) - NICHT grau, das ist der Wert (dd,
|
|
var(--fg2)) - genau umgekehrt zu dem, was hier vorher stand (13px/grau
|
|
Label, 14px/hell Wert). Betrifft jede Wertzeile app-weit (Parität-Audit
|
|
2026-08-30). */
|
|
.dm-wertzeile {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--sp-4);
|
|
padding: 11px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.dm-wertzeile:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.dm-wertzeile dt {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: var(--fg);
|
|
}
|
|
|
|
.dm-wertzeile dd {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: var(--fg2);
|
|
text-align: right;
|
|
}
|
|
|
|
/* Tankstelle im Einzelbeleg (Vorgabe des Eigentuemers, 04.09.2026).
|
|
|
|
Vorher eine gewoehnliche Wertzeile: Name rechts in der Wertespalte, die
|
|
ganze Anschrift als Kleintext darunter. Die Spalte ist rund 120px breit -
|
|
"Hermann Mogler Mineraloelg. GmbH, Heidenheimerstr.6, 89551 Koenigsbronn"
|
|
stand dort vier- bis fuenfzeilig. Hier bekommt sie die volle Kachelbreite
|
|
unter der Beschriftung, zwei Zeilen (Tankstelle und Strasse / Ort), und
|
|
fuehrt beim Tippen in den Kartendienst - deshalb der Chevron rechts.
|
|
|
|
Deckungsgleich mit .tankstellenzeile im Panel. */
|
|
.dm-tankstellenzeile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 11px 0;
|
|
border-bottom: 0;
|
|
}
|
|
.dm-tankstellenzeile dt {
|
|
font-size: 13px;
|
|
color: var(--fg2);
|
|
}
|
|
.dm-tankstellenzeile dd {
|
|
margin: 0;
|
|
}
|
|
.dm-tankstellenzeile__inhalt {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--sp-3);
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
a.dm-tankstellenzeile__inhalt:active {
|
|
opacity: 0.6;
|
|
}
|
|
.dm-tankstellenzeile__ort {
|
|
display: block;
|
|
font-size: 16px;
|
|
color: var(--fg);
|
|
line-height: 1.35;
|
|
min-width: 0;
|
|
}
|
|
.dm-tankstellenzeile__ort small {
|
|
display: block;
|
|
margin-top: 2px;
|
|
font-size: 13px;
|
|
color: var(--fg3);
|
|
}
|
|
|
|
.dm-abschnitt {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--sp-3);
|
|
padding: var(--sp-3) 2px 0;
|
|
}
|
|
|
|
/* Wechselbild "Mein Audi" - deckungsgleich mit carImg("galerie")/.dots im
|
|
Panel: ein antippbares Bild, das zum nächsten Galerieplatz weiterschaltet,
|
|
plus Punktanzeige darunter. */
|
|
.dm-galerie-wechsel {
|
|
display: block;
|
|
width: 100%;
|
|
border: 0;
|
|
background: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
/* Das Bild bestimmt die Höhe, wie im Panel ("carfix klein").
|
|
|
|
Bis zum 02.09.2026 stand hier ein fester 16:9-Kasten mit object-fit:cover.
|
|
Jedes Foto, dessen Verhältnis davon abweicht, verlor dabei oben und unten
|
|
etwas - bei der Frontansicht die Stoßstange, so gemeldet. Der Preis ist,
|
|
dass der Block beim Durchblättern seine Höhe ändert; das ist dieselbe
|
|
Abwägung, die die Übersicht-Szene am 31.08. entschieden hat. Der
|
|
Platzhalter behält sein festes Maß (Regel weiter oben), er hat ja kein
|
|
eigenes Verhältnis. */
|
|
.dm-galerie-wechsel .ads-bildbox {
|
|
aspect-ratio: auto;
|
|
}
|
|
|
|
.dm-galerie-wechsel .ads-bildbox img {
|
|
height: auto;
|
|
}
|
|
.dm-galerie-punkte {
|
|
display: flex;
|
|
gap: 6px;
|
|
justify-content: center;
|
|
margin-top: 12px;
|
|
}
|
|
.dm-galerie-punkte span {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: var(--line-strong);
|
|
}
|
|
.dm-galerie-punkte span.an {
|
|
background: var(--red);
|
|
}
|
|
|
|
/* Klickbare Wertzeile (Batteriespannung → Verlauf) - deckungsgleich mit
|
|
`.row[data-go]` im Panel: derselbe Zeilenaufbau wie .dm-wertzeile, nur als
|
|
<button> statt <div>, mit Chevron in der Wertespalte. */
|
|
.dm-wertzeile--knopf {
|
|
width: 100%;
|
|
border: 0;
|
|
background: none;
|
|
font: inherit;
|
|
text-align: inherit;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.dm-wertzeile--knopf dd {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
/* Gezeichneter Pfeil wie .chev im Panel - 6x10, Strichstaerke 1,4. Vorher
|
|
stand hier eine Schriftgroesse, weil an dieser Stelle einmal ein
|
|
Schriftzeichen als Pfeil diente. */
|
|
.dm-wertzeile__chevron {
|
|
width: 6px;
|
|
height: 10px;
|
|
flex: 0 0 auto;
|
|
color: var(--fg3);
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.4;
|
|
}
|
|
|
|
/* Wert als Kommentar statt als Angabe (siehe Wertzeile hinweis). Groesse und
|
|
Farbe wie jede andere Nebenzeile der App. */
|
|
.dm-wertzeile__hinweis {
|
|
font-size: 12.5px;
|
|
color: var(--fg3);
|
|
}
|
|
|
|
.dm-fussnote {
|
|
margin: var(--sp-3) 0 0;
|
|
font-size: 12.5px;
|
|
font-weight: 300;
|
|
line-height: 1.5;
|
|
color: var(--fg3);
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
/* ------------------------------------------------------ Fahrzeugstatus */
|
|
|
|
/* Kreis-Häkchen für die vier Sammelzeilen der Sicherheit-Seite - Zustand ist
|
|
so schon am Symbol erkennbar, nicht nur an der Farbe. Die Detailliste
|
|
"Türen und Klappen" (TuerenKlappen.tsx) verwendet stattdessen die
|
|
gewöhnliche .dm-wertzeile-Zeile mit dem einfachen @audi-dash/ui .ads-dot -
|
|
deckungsgleich mit dem Panel, dessen vTuerenKlappen() ebenfalls den
|
|
schlichten Punkt statt des Kreis-Häkchens zeigt. */
|
|
.dm-statuskreis {
|
|
flex: none;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--ok);
|
|
}
|
|
.dm-statuskreis--warn { background: var(--warn); }
|
|
.dm-statuskreis--bad { background: var(--bad); }
|
|
.dm-statuskreis svg { display: block; }
|
|
|
|
.dm-sicherheitsliste {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.dm-sicherheitszeile {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-3);
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
width: 100%;
|
|
background: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-top: none;
|
|
font: inherit;
|
|
color: inherit;
|
|
text-align: left;
|
|
}
|
|
.dm-sicherheitszeile:last-child { border-bottom: 0; }
|
|
button.dm-sicherheitszeile { cursor: pointer; }
|
|
button.dm-sicherheitszeile:active { background: var(--tile-2); }
|
|
.dm-sicherheitszeile__text { flex: 1; font-size: 14px; }
|
|
.dm-sicherheitszeile__chev { margin-left: auto; flex: none; color: var(--fg3); }
|
|
|
|
/* Sammelzeile über den vier Sicherheitszeilen - deckungsgleich mit dem
|
|
obersten Kasten in vSicherheit() (style="display:flex;align-items:center;
|
|
gap:12px;padding:16px 20px"), dasselbe Kreis-Häkchen-Symbol wie die Zeilen
|
|
darunter, keine Zeitangabe. */
|
|
.ads-tile.dm-sicherheitssammel {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px 20px;
|
|
}
|
|
.dm-sicherheitssammel span {
|
|
font-size: 15px;
|
|
color: var(--fg);
|
|
}
|
|
|
|
/* ------------------------------------------------------------ Galerie */
|
|
|
|
.dm-galerie {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
|
|
gap: var(--sp-2);
|
|
margin-top: var(--sp-3);
|
|
}
|
|
|
|
/* ------------------------------------------------------- Listenzeilen */
|
|
|
|
/* `.dm-zeile`/`.dm-zeile__wisch`/`.dm-zeile__menue` sind mit dem „···"-Knopf
|
|
entfallen (siehe Zeilenmenue.tsx) - die Zeile ist jetzt direkt die
|
|
Wischzeile, wie im Panel. */
|
|
|
|
/* Zuschnitt von `.leaf` im Panel (audi-dashboard.css + iOS-Auflage, live
|
|
gemessen): 12px oben/unten, 40px links (Platz der Wischspalte), min-height
|
|
56px, Trennlinie unten, Beschriftung 16px in --fg mit 12,5px-Zusatz in
|
|
--fg3, Wert 15px in --fg2 mit demselben Zusatz. */
|
|
/* Fahrten- und Tankliste: Abschnittsköpfe statt Einrückung.
|
|
|
|
Gemessen am 02.09.2026 im laufenden Panel (gleicher Aufbau): von der
|
|
Innenkante der Kachel bis zum Ortsnamen lagen 58px tote Breite - 22px
|
|
Einrückung der Monatsebene plus 40px linkes Polster der Zeile. Auf einem
|
|
Telefon brach "Eichstätt → Adelschlag" deshalb um.
|
|
|
|
Apples Richtlinien gruppieren nicht über Einrückung, sondern über
|
|
Abschnittsköpfe über die volle Breite; die Zeilen stehen alle auf
|
|
derselben Kante. Die Monatszeile bleibt kleiner und grau und liest sich
|
|
dadurch als Kopf, ohne Platz zu kosten. Beschränkt auf .dm-liste, weil das
|
|
linke Polster von .dm-blatt anderswo gewollt ist. Gleichlautend .liste im
|
|
Panel. */
|
|
.dm-liste .ads-accordion--lvl2 {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Jahr und Monat tragen DENSELBEN Kopf, die Fahrtzeile trägt den Inhalt.
|
|
|
|
In der Liste standen drei Elemente in drei Formaten: 2026 in 16px weiß,
|
|
September in 11px grau gesperrt in Versalien, der Ortsname wieder in 16px
|
|
weiß. Der Eigentümer hat das am 02.09.2026 als unprofessionell bezeichnet -
|
|
zu Recht: zwei Köpfe, die dasselbe tun, sollen auch gleich aussehen.
|
|
|
|
Beide jetzt 13px in der Zweitfarbe, gemischt geschrieben und ohne Sperrung.
|
|
Das ist zugleich die heutige Apple-Form: Abschnittsköpfe klein und in
|
|
Sekundärfarbe, aber gemischt - Versalien sind der Stil vor iOS 13. Der
|
|
Inhalt bleibt größer als sein Kopf, wie es die Richtlinien verlangen.
|
|
Unterschieden werden die beiden Ebenen über die Position, nicht über die
|
|
Schrift.
|
|
|
|
Von drei Vorschlägen (Monat als eigener Abschnitt ohne Aufklappen / beide
|
|
Köpfe gleich / Jahr als Seitenüberschrift) hat der Eigentümer diesen
|
|
gewählt: das Zusammenklappen ganzer Jahre bleibt erhalten. */
|
|
.dm-liste .ads-acc-h__k {
|
|
font-size: 13px;
|
|
color: var(--fg2);
|
|
}
|
|
|
|
/* 20px statt 0: die Zeilen standen sonst 34px vom Bildschirmrand entfernt und
|
|
damit sichtbar enger als alles andere in der Kachel (gemeldet 02.09.2026).
|
|
20px ist nicht geraten, sondern die Spalte des Aufklapp-Pfeils - die Zeilen
|
|
stehen damit auf derselben Kante wie der Text der Kopfzeilen, so wie iOS es
|
|
in gruppierten Listen macht.
|
|
|
|
Nachgemessen bei 375px: die Beschriftungsspalte behält 157px, der längste
|
|
Ortsname der Testdaten ("Ingolstadt → Adelschlag") braucht 142,7px. Von den
|
|
58px, die vorher verschenkt waren, bleiben 38 gewonnen. */
|
|
.dm-liste .dm-blatt {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.dm-blatt {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--sp-4);
|
|
width: 100%;
|
|
padding: 12px 0 12px 40px;
|
|
min-height: 56px;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
background: none;
|
|
font-family: inherit;
|
|
text-align: left;
|
|
color: inherit;
|
|
}
|
|
|
|
.dm-blatt--letzte {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
button.dm-blatt {
|
|
cursor: pointer;
|
|
transition: background .15s;
|
|
}
|
|
|
|
button.dm-blatt:active {
|
|
background: var(--tile-2);
|
|
}
|
|
|
|
/* `flex: 0 1 auto` wie `.leaf .k` im Panel — die Beschriftung nimmt ihre
|
|
natürliche Breite und schrumpft erst, wenn es sonst nicht passt. Mit
|
|
`1 1 auto` (dem Wert, den das Panel nur für die Zuletzt-Kachel setzt)
|
|
brach „Fahrt ohne Ortsangabe" hier auf zwei Zeilen um, obwohl es im Panel
|
|
einzeilig steht. */
|
|
/* flex:1 statt 0 1: das Label nimmt den freien Platz, damit space-between
|
|
keinen Raum ZWISCHEN Label, Werten und Pfeil verteilt - sonst stuende die
|
|
Wertespalte in der Mitte und ihre Lage haenge an der Laenge des Ortsnamens
|
|
(im Panel gemessen: 549px gegen 520px rechte Kante). */
|
|
.dm-blatt__k {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
font-size: 16px;
|
|
line-height: 1.35;
|
|
color: var(--fg);
|
|
}
|
|
/* Ein Flex-Kind darf nur mit min-width:0 unter seine Inhaltsbreite schrumpfen -
|
|
ohne das greift text-overflow nie und ein langer Ortsname draengt die Werte. */
|
|
.dm-blatt__k > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
/* Feste Mindestbreite, damit Strecke und Verbrauch ueber alle Zeilen hinweg in
|
|
einer Spalte stehen. Ohne sie waechst der Kasten mit dem Inhalt - im Panel
|
|
gemessen 86px bei "11,4 l/100 km" gegen 37px bei einer Zeile ohne Werte, und
|
|
die Zahlen standen entsprechend versetzt. */
|
|
.dm-blatt__v {
|
|
flex: 0 0 104px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
text-align: right;
|
|
font-size: 15px;
|
|
color: var(--fg2);
|
|
}
|
|
|
|
.dm-blatt__k small,
|
|
.dm-blatt__v small {
|
|
font-size: 12.5px;
|
|
color: var(--fg3);
|
|
}
|
|
|
|
.dm-blatt__chevron {
|
|
width: 6px;
|
|
height: 10px;
|
|
flex: 0 0 auto;
|
|
fill: none;
|
|
stroke: var(--fg3);
|
|
stroke-width: 1.6;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* Die Zuletzt-Kachel der Übersicht: ohne die linke Wischspalte, und beide
|
|
Werte auf einer gemeinsamen linken Kante (`.teaser .leaf .v{min-width:72px}`
|
|
im Panel, samt der dort ausführlich begründeten flex-Verteilung). */
|
|
.dm-teaser .dm-blatt {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.dm-teaser .dm-blatt__k {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.dm-teaser .dm-blatt__v {
|
|
min-width: 72px;
|
|
}
|
|
|
|
.dm-listenzeile {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-3);
|
|
width: 100%;
|
|
padding: 12px 2px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Cursor nur für echte Zeilen-Buttons (navigieren bei Klick, Fahrten.tsx/
|
|
Tanken.tsx) - BatterieListe.tsx ist bewusst ein reines <div>, keine
|
|
Zeilennavigation, nur Wischen zum Löschen; ein Hand-Cursor würde dort
|
|
fälschlich "hier passiert beim Klick etwas" versprechen. */
|
|
button.dm-listenzeile {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dm-listenzeile__haupt {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
|
|
.dm-listenzeile__titel {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--sp-2);
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.dm-listenzeile__neben {
|
|
font-size: 13px;
|
|
color: var(--fg2);
|
|
}
|
|
|
|
.dm-listenzeile__unter {
|
|
font-size: 12.5px;
|
|
font-weight: 300;
|
|
color: var(--fg3);
|
|
/* Umbrechen statt abschneiden: Datum, Uhrzeit und Dauer sind alle drei
|
|
wichtig, und "11.08.2026 · 12:27 Uhr · 3…" verliert genau die Angabe,
|
|
die man sucht. */
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* -------------------------------------------------------- Detailseiten */
|
|
|
|
.dm-detail__kopf {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--sp-3);
|
|
margin: var(--sp-2) 0 var(--sp-3);
|
|
flex-wrap: wrap;
|
|
}/* Deckend wie .mapbox im Panel (audi-dashboard-ios.css). --tile-2 ist im
|
|
Nachtmodus ein zweiter Schleier auf der ohnehin durchscheinenden Kachel -
|
|
die Flaeche hinter den Kartenkacheln wurde dadurch heller als vorgesehen. */
|
|
.dm-karte {
|
|
height: 240px;
|
|
width: 100%;
|
|
border-radius: var(--r-func);
|
|
overflow: hidden;
|
|
margin-top: var(--sp-3);
|
|
background: var(--tile-deckend, var(--tile-2));
|
|
}
|
|
|
|
/* Beleg wird gelesen: Zapfsäule, Kreisel, Text - siehe Tanken.tsx. */
|
|
.dm-belegladen {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: var(--sp-3);
|
|
padding: 12px 14px;
|
|
border-radius: 12px;
|
|
background: var(--tile-2);
|
|
color: var(--fg2);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.dm-belegladen svg {
|
|
color: var(--fg2);
|
|
flex: none;
|
|
}
|
|
|
|
/* ------------------------------------------------------------ Ladezustand */
|
|
|
|
/* HIG "Loading": ein unbestimmt langer Vorgang (Netzwerk, kein verlässlicher
|
|
Fortschritt) bekommt einen laufenden Indikator statt eines stumm
|
|
daliegenden Knopfes - sonst nicht von einem Hänger zu unterscheiden.
|
|
Deckungsgleich mit .lade-spinner im Panel. */
|
|
.dm-spinner {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: none;
|
|
border: 2px solid var(--line);
|
|
border-top-color: var(--fg2);
|
|
border-radius: 50%;
|
|
animation: dm-spin 0.8s linear infinite;
|
|
}
|
|
@keyframes dm-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.dm-ladezeile {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-2);
|
|
margin-top: var(--sp-3);
|
|
}
|
|
|
|
/* ------------------------------------------------------------ Meldungen */
|
|
|
|
.dm-fehler {
|
|
margin: var(--sp-3) 0 0;
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
line-height: 1.5;
|
|
color: var(--bad);
|
|
}
|
|
|
|
.dm-erfolg {
|
|
margin: var(--sp-3) 0 0;
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
line-height: 1.5;
|
|
color: var(--ok);
|
|
}
|
|
|
|
.dm-fussnote--warnung {
|
|
color: var(--warn);
|
|
}
|
|
|
|
/* Ergebniszeile des Historien-Imports - eine Stufe kräftiger als die
|
|
.dm-fussnote darunter, weil sie die eigentliche Antwort auf den Vorgang
|
|
ist und nicht dessen Kleingedrucktes. */
|
|
.dm-importergebnis {
|
|
margin: var(--sp-3) 0 0;
|
|
font-size: 14px;
|
|
font-weight: 300;
|
|
line-height: 1.6;
|
|
color: var(--fg);
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
/* --------------------------------------------------------- Listen, Text */
|
|
|
|
.dm-liste {
|
|
list-style: none;
|
|
margin: var(--sp-2) 0 0;
|
|
padding: 0;
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.dm-liste li {
|
|
padding-left: 14px;
|
|
position: relative;
|
|
}
|
|
|
|
.dm-liste li::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.72em;
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: var(--fg3);
|
|
}/* 170px hoch wie BV_H im Panel — 120px ließen die Kurve sichtbar flacher
|
|
wirken als dort. */
|
|
.dm-diagramm {
|
|
width: 100%;
|
|
height: 170px;
|
|
margin: 14px 0 0;
|
|
display: block;
|
|
touch-action: none;
|
|
}
|
|
|
|
.dm-knopfreihe {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--sp-2);
|
|
margin-top: var(--sp-4);
|
|
}
|
|
|
|
/* Ausklappbares Korrekturfeld (Anzugsmoment/Reifenkilometer) - deckungsgleich
|
|
mit dem entsprechenden Block im Panel (margin-top:14-18px, Trennlinie
|
|
darüber). */
|
|
.dm-bearbeiten-block {
|
|
margin-top: var(--sp-4);
|
|
padding-top: var(--sp-4);
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
/* Reifen-Kachel: Kopfzeile aus Überschrift+km links, Radfoto rechts, beide
|
|
oben bündig - deckungsgleich mit .radkopf-row/.radkopf/.tile-headline im
|
|
Panel. */
|
|
.dm-radkopf-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: var(--sp-4);
|
|
}
|
|
.dm-radkopf {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.dm-tile-headline {
|
|
font-size: 20px;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.2;
|
|
color: var(--fg);
|
|
display: block;
|
|
}
|
|
/* Der Kilometerstand des Radsatzes ist eine Kennzahl und traegt deshalb die
|
|
Zahlenschrift (.ads-fig, im Panel .fig mit font-size:32px) - er stand hier
|
|
bisher in der normalen Textschrift und Groesse. */
|
|
.dm-reifenzeile {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 14px;
|
|
font-size: 32px;
|
|
}
|
|
.dm-reifenzeile .ads-icon-button {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: var(--fg3);
|
|
}
|
|
.dm-reifenzeile .ads-icon-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.dm-radfoto .ads-bildbox {
|
|
width: 96px;
|
|
height: 96px;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
/* Kompakte Pille (Montiert) statt voller Breite - deckungsgleich mit
|
|
.montiert/.montiert.on im Panel. */
|
|
.dm-montiert-reihe {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: var(--sp-4);
|
|
}
|
|
.dm-montiert {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12.5px;
|
|
letter-spacing: normal;
|
|
color: var(--fg2);
|
|
background: none;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--r-pill);
|
|
padding: 7px 13px;
|
|
cursor: pointer;
|
|
}
|
|
.dm-montiert::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -8px;
|
|
bottom: -8px;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.dm-montiert:active {
|
|
transform: scale(0.96);
|
|
}
|
|
.dm-montiert--an {
|
|
background: var(--fg);
|
|
border-color: var(--fg);
|
|
color: var(--canvas);
|
|
}
|
|
.dm-archivbtn {
|
|
background: var(--tile-2);
|
|
color: var(--fg2);
|
|
}
|
|
.dm-archivbtn:hover,
|
|
.dm-archivbtn:active {
|
|
color: var(--fg);
|
|
}/* Bleibt beim Scrollen unten stehen, damit ungespeicherte Aenderungen nicht
|
|
aus dem Blick geraten. */
|
|
.dm-speicherleiste {
|
|
position: sticky;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-3);
|
|
padding: var(--sp-3) 0;
|
|
background: var(--canvas);
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
/* Dieselbe Leiste innerhalb einer Kachel (Regler "Fahrt beenden"): nicht
|
|
klebend, kein eigener Untergrund, keine Trennlinie - sie gehoert zur Kachel
|
|
und nicht an den Bildschirmrand. */
|
|
.dm-speicherleiste--kachel {
|
|
position: static;
|
|
margin-top: var(--sp-3);
|
|
padding: 0;
|
|
background: none;
|
|
border-top: 0;
|
|
}
|
|
/* Beide Knoepfe gleich breit: ein Paar aus Bestaetigen und Abbrechen ist
|
|
eine Entscheidung zwischen zwei Wegen, keine Haupt- und Nebensache. Welcher
|
|
davon der gewollte ist, sagt die Fuellung, nicht die Groesse. */
|
|
.dm-speicherleiste > * {
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
.dm-szene__zusatz {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Der Zusatz neben dem Typenschild darf umbrechen — abgeschnittener Text mit
|
|
Auslassungspunkten sieht nach Fehler aus, ein Umbruch nicht. Größe/Farbe
|
|
deckungsgleich mit ".badge .zusatz" im Panel (13px, var(--fg2), nicht
|
|
kursiv) - war hier 19px, geerbt von der (falschen) "ads-title"-Klasse am
|
|
Umschließer (Parität-Audit 2026-08-30). */
|
|
.dm-szene__zusatz {
|
|
min-width: 0;
|
|
white-space: normal;
|
|
overflow: visible;
|
|
text-overflow: clip;
|
|
font-size: 13px;
|
|
line-height: normal;
|
|
color: var(--fg2);
|
|
}
|
|
|
|
/* Die Galerie richtet sich nach der festen Kachelbreite der Bibliothek (78px),
|
|
damit die Kacheln nicht auseinandergezogen werden und ihre Beschriftung
|
|
innerhalb des Rahmens bleibt. */
|
|
.dm-galerie {
|
|
grid-template-columns: repeat(auto-fill, 78px);
|
|
justify-content: space-between;
|
|
gap: var(--sp-3);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- Standort
|
|
Live-GPS-Position des Fahrzeugs — deckungsgleich mit .standort-kachel/
|
|
.standort-vollbild/.standortmenu im Panel (audi-dashboard.css). War bis
|
|
2026-08-29 komplett unportiert (Parität-Audit). */
|
|
.dm-standort-kachelbtn {
|
|
display: block;
|
|
width: 100%;
|
|
position: relative;
|
|
border: none;
|
|
padding: 0;
|
|
/* 14px wie jede andere Kachel im Panel (.tile). */
|
|
margin: 0 0 14px;
|
|
background: none;
|
|
cursor: pointer;
|
|
border-radius: var(--r-tile);
|
|
overflow: hidden;
|
|
}
|
|
.dm-standort-vorschau {
|
|
width: 100%;
|
|
height: 190px;
|
|
/* Im Panel deklariert .standort-vorschau zwar var(--tile), gewinnt aber
|
|
nicht: Leaflet setzt der Karte selbst die Klasse .leaflet-container und
|
|
sein Blatt liegt dort hinter den App-Blaettern. Sichtbar sind also
|
|
tatsaechlich Leaflets eigene #ddd - waehrend die Kacheln laden und in
|
|
Luecken. Hier steht derselbe Wert ausdruecklich, damit die Reihenfolge
|
|
der gebuendelten Blaetter nichts daran aendert. */
|
|
background: #ddd;
|
|
}
|
|
/* Deckend und in der Zweitfarbe, NICHT --tile/--fg3: der Kasten liegt auf
|
|
Leaflets eigenem Hellgrau (#ddd), und das ist in beiden Themen hell.
|
|
--tile ist im Nachtmodus ein durchscheinender WEISSER Schleier - er macht
|
|
die Flaeche dort also noch heller, waehrend der Text der Nacht-Palette
|
|
folgt. Gemessen am 04.09.2026: 2,45:1 im Nachtmodus, deutlich unter den
|
|
4,5:1 dieses Projekts (dieselbe Regel, nach der --fg3 am 30.08. im
|
|
Tagmodus abgedunkelt wurde). Mit dem deckenden Kasten sind es 9,9:1, und
|
|
er hebt sich in beiden Themen von der Karte ab, statt mit ihr zu
|
|
verschwimmen. */
|
|
.dm-standort-leer {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
color: var(--fg2);
|
|
text-align: center;
|
|
padding: 0 30px;
|
|
background: var(--tile-deckend, var(--canvas));
|
|
}
|
|
|
|
.dm-fahrzeug-pin-wrap,
|
|
.dm-user-pin-wrap {
|
|
background: none;
|
|
border: none;
|
|
}
|
|
.dm-fahrzeug-pin {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
|
|
}
|
|
.dm-user-pin {
|
|
position: relative;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: #0a84ff;
|
|
border: 3px solid #fff;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
.dm-user-pin::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -14px;
|
|
border-radius: 50%;
|
|
background: rgba(10, 132, 255, 0.18);
|
|
animation: dm-user-pulse 2.4s ease-out infinite;
|
|
}
|
|
@keyframes dm-user-pulse {
|
|
0% {
|
|
transform: scale(0.4);
|
|
opacity: 0.9;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Füllt die verfügbare Höhe der Seite, statt bei 640px zu kappen und darunter
|
|
leeren, mit dem geschlossenen Blatt verwechselbaren Seitenhintergrund
|
|
stehen zu lassen (Nutzerbericht "Standort Slide Up ist leer" - der Inhalt
|
|
fehlte nicht, er saß nur unterhalb der Kappungsgrenze in leerem Weiß).
|
|
`.dm-inhalt > *{flex:none}` (rahmen.css) gilt für jede andere Seite zu
|
|
Recht - hier gezielt aufgehoben, die einzige Seite ohne weiteren Inhalt
|
|
unter einer einzelnen großen Fläche. */
|
|
.dm-inhalt > .dm-standort-vollbild {
|
|
flex: 1 1 auto;
|
|
}
|
|
.dm-standort-vollbild {
|
|
position: relative;
|
|
min-height: 400px;
|
|
border-radius: var(--r-tile);
|
|
overflow: hidden;
|
|
margin: 0 calc(-1 * var(--seitenrand));
|
|
}
|
|
.dm-standort-karte {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.dm-kartensteuerung {
|
|
position: absolute;
|
|
z-index: 400;
|
|
top: 16px;
|
|
right: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.dm-kartensteuerung button {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(16, 20, 26, 0.84);
|
|
color: #fff;
|
|
border: none;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
backdrop-filter: blur(10px);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
[data-theme="tag"] .dm-kartensteuerung button {
|
|
background: rgba(255, 255, 255, 0.92);
|
|
color: #101418;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
|
|
}
|
|
.dm-kartensteuerung button:active {
|
|
transform: scale(0.94);
|
|
}
|
|
|
|
/* Karte mit eigener Bedienung darauf (Einzelbeleg). Der Kasten traegt die
|
|
Positionierung, damit der Knopf sich an DIESER Karte ausrichtet und nicht am
|
|
naechsten Vorfahren weiter oben - dieselbe Ueberlegung wie .mapbox im Panel. */
|
|
.dm-kartenbox {
|
|
position: relative;
|
|
border-radius: var(--r-tile);
|
|
overflow: hidden;
|
|
}
|
|
/* Kleine Variante: die Belegkarte ist nur gut 200px hoch, ein 48er-Knopf mit
|
|
16px Abstand verdeckte davon ein Viertel. */
|
|
.dm-kartensteuerung--klein {
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
.dm-kartensteuerung--klein button {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
/* Die CI-Nadel traegt ihre Farben selbst; der Schatten hebt sie von den
|
|
Kartenkacheln ab, wie .fahrzeug-pin im Panel. */
|
|
.dm-nadel {
|
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
|
|
}
|
|
|
|
.dm-standortmenu {
|
|
position: absolute;
|
|
z-index: 410;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
--dm-standort-peek: 96px;
|
|
/* Deckend, nicht --canvas: unter dem Blatt liegt die Karte, und im
|
|
Nachtmodus ist --canvas nicht deckend genug. Das Panel nimmt hier
|
|
ebenfalls den deckenden Wert (.standortmenu in audi-dashboard.css). */
|
|
background: var(--tile-deckend, var(--canvas));
|
|
border-radius: var(--r-tile) var(--r-tile) 0 0;
|
|
box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
|
|
/* Kein env(safe-area-inset-bottom) mehr: das Blatt liegt nicht am unteren
|
|
Bildschirmrand, sondern ueber der Tableiste - und die haelt den Bereich
|
|
des Home-Indikators bereits frei. Der Einzug wurde dadurch doppelt
|
|
gezaehlt, das Blatt war auf dem Geraet rund 16px hoeher als noetig und
|
|
schob sich entsprechend weiter hoch. Am Rechner faellt das nicht auf,
|
|
dort ist der Einzug 0. */
|
|
padding: 0 20px 34px;
|
|
transform: translateY(calc(100% - var(--dm-standort-peek)));
|
|
transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
}
|
|
/* Aufgezogen bleibt unter den Knoepfen ein fester Abstand stehen, statt dass
|
|
sie buendig mit der Menueleiste abschliessen.
|
|
|
|
Vorher stand hier min-height:50% - Apples "medium detent". Gemessen ergab
|
|
das 89px (Panel) bzw. 76px (App) Luft unter dem letzten Knopf, und das war
|
|
sichtbar zu viel: das Blatt zog ueber die Haelfte des Bildschirms auf,
|
|
obwohl sein Inhalt dort laengst zu Ende war. Eine Raste ist nur dann
|
|
richtig, wenn zwischen ihr und der Inhaltshoehe kein grosses Loch klafft.
|
|
|
|
Jetzt bestimmt der Inhalt die Hoehe, und die 34px Fussabstand halten die
|
|
Knoepfe von der Leiste frei - hergeleitet aus der Beanstandung, nicht
|
|
geraten: 18px waren zu wenig, 76-89px zu viel. */
|
|
.dm-standortmenu--offen {
|
|
transform: translateY(0);
|
|
}
|
|
.dm-standortmenu__griffzone {
|
|
padding: 10px 0 14px;
|
|
position: relative;
|
|
}
|
|
.dm-standortmenu__griff {
|
|
position: relative;
|
|
display: block;
|
|
width: 36px;
|
|
height: 4px;
|
|
border: 0;
|
|
padding: 0;
|
|
border-radius: 2px;
|
|
background: var(--line-strong);
|
|
margin: 0 auto;
|
|
cursor: pointer;
|
|
}
|
|
/* --ios-fill statt --tile: das Blatt selbst ist deckend, im Tagmodus also
|
|
weiss - und --tile ist dort ebenfalls #FFFFFF. Der Knopf war damit weiss
|
|
auf weiss und als Knopf nicht zu erkennen. Nachts faellt es nicht auf,
|
|
weil --tile dort ein Schleier ueber dunklem Grund ist. --ios-fill ist in
|
|
diesem Projekt ohnehin das Zeichen fuer "das hier laesst sich bedienen"
|
|
und traegt in beiden Themes. */
|
|
.dm-standortmenu__schliessen {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--ios-fill);
|
|
border: none;
|
|
color: var(--fg2);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
.dm-standortmenu__kopf {
|
|
margin-top: 8px;
|
|
padding-right: 44px;
|
|
}
|
|
.dm-standortmenu__name {
|
|
font-size: 17px;
|
|
color: var(--fg);
|
|
}
|
|
.dm-standortmenu__distanz {
|
|
font-size: 12.5px;
|
|
color: var(--fg3);
|
|
margin-top: 4px;
|
|
}
|
|
.dm-standortmenu__adresse {
|
|
font-size: 13px;
|
|
color: var(--fg2);
|
|
margin-top: 20px;
|
|
}
|
|
.dm-standortmenu__status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
margin-top: 8px;
|
|
font-size: 13px;
|
|
color: var(--fg2);
|
|
}
|
|
.dm-standortmenu__status svg {
|
|
color: var(--fg3);
|
|
flex: none;
|
|
}
|
|
.dm-standortmenu__punkt {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--ok);
|
|
flex: none;
|
|
}
|
|
.dm-standortmenu__werte {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
font-size: 13px;
|
|
color: var(--fg2);
|
|
}
|
|
.dm-standortmenu__werte svg {
|
|
color: var(--fg3);
|
|
flex: none;
|
|
}
|
|
.dm-standortmenu__aktionen {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 18px;
|
|
padding-bottom: 4px;
|
|
}
|
|
.dm-standort-pille {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
height: 40px;
|
|
padding: 0 20px;
|
|
border-radius: var(--r-pill);
|
|
border: 1px solid var(--line-strong);
|
|
background: none;
|
|
color: var(--fg);
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
.dm-standort-pille--primaer {
|
|
background: var(--fg);
|
|
border-color: var(--fg);
|
|
color: var(--canvas);
|
|
}
|
|
.dm-standort-pille:active {
|
|
transform: scale(0.97);
|
|
}
|
|
.dm-standort-pille:disabled {
|
|
opacity: 0.4;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Erläuternder Absatz unter einer Kachelüberschrift. Das Panel setzt ihn als
|
|
`.label` mit einer Inline-Auflage (`color:var(--fg2);letter-spacing:0;
|
|
text-transform:none;font-size:12.5px;line-height:1.6`) - unter anderem bei
|
|
Fahrzeugprofil, Backup und Integration-Update.
|
|
|
|
Bewusst eine eigene Klasse statt einer Änderung an `.dm-fussnote`: die wird
|
|
an 35 Stellen in 13 Dateien für ganz unterschiedliche Kleintexte benutzt
|
|
(im Paritätsaudit zweimal als offener Punkt notiert). Wer die Panel-Optik
|
|
braucht, nimmt diese Klasse; alles andere bleibt unangetastet. */
|
|
.dm-erklaerung {
|
|
display: block;
|
|
margin: 10px 0 0;
|
|
font-size: 12.5px;
|
|
line-height: 1.6;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
color: var(--fg2);
|
|
}
|
|
|
|
/* Karte auf der Einzelfahrt/dem Einzelbeleg: das Panel setzt sie als eigene
|
|
Kachel ohne Innenabstand (`.mapbox`, 210px hoch, abgerundet). */
|
|
.dm-kartenkachel {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Die Distanz-Kachel der Einzelfahrt trägt im Panel eigene Abstände
|
|
(`style="margin:18px 0 14px"`). */
|
|
.dm-distanzkachel {
|
|
margin: 18px 0 14px;
|
|
}
|
|
|
|
/* `.marke` im Panel: Bildmarke und Text nebeneinander, z. B. vor
|
|
„SmartDeal-Ersparnis" auf dem Einzelbeleg. */
|
|
/* white-space:nowrap: ohne die brach "SmartDeal-Ersparnis" neben dem
|
|
Markenlogo um. Der Grund ist kein Platzmangel, sondern ein Rundungsfehler -
|
|
am Panel gemessen (04.09.2026): die Spalte war 150,00px breit, ihr eigener
|
|
Inhalt 150,20px, also brach der Text nach dem Logo in eine zweite Zeile und
|
|
die Zeile wurde 44,8px statt 26,4px hoch. Die Zeile hat reichlich Platz, sie
|
|
darf ihn nur nicht abgeschnitten bekommen. (Im Panel kommt dazu, dass die
|
|
Wertespalte dort eine feste Mindestbreite hat - siehe .row-marke.) */
|
|
.dm-marke {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dm-marke img {
|
|
/* Siehe .dm-markenlogo weiter unten. */
|
|
height: 19.2px;
|
|
width: auto;
|
|
}
|
|
|
|
/* Leere Kartenfläche, solange die Tankstellenadresse noch aufgelöst wird.
|
|
Maße wie `.mapbox` im Panel. */
|
|
.dm-kartenplatz {
|
|
height: 210px;
|
|
background: var(--tile-deckend, var(--tile-2));
|
|
}
|
|
|
|
/* Knopfzeile der SmartDeal-Abfrage - Abbrechen links, Bestaetigen rechts,
|
|
wie die .seg-Zeile im sdpopup des Panels. */
|
|
.dm-sd-knoepfe {
|
|
display: flex;
|
|
gap: var(--sp-2);
|
|
margin-top: 14px;
|
|
}
|
|
.dm-sd-knoepfe > * {
|
|
flex: 1;
|
|
}
|
|
|
|
/* --------------------------------------------------- Beleg-Fenster
|
|
Deckungsgleich mit .beleg-drop in audi-dashboard.css: gestrichelter Rahmen,
|
|
14px Radius, 28px Innenabstand, mittig, 15px kraeftige Zeile ueber 12.5px
|
|
gedaempfter. `--darueber` ist die Rueckmeldung beim Ziehen (nur am Rechner
|
|
erreichbar, am Telefon gibt es keine Ziehgeste fuer Dateien). */
|
|
.dm-beleg-drop {
|
|
margin-top: var(--sp-3);
|
|
border: 1px dashed var(--line-strong);
|
|
border-radius: 14px;
|
|
padding: 28px var(--sp-4);
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.dm-beleg-drop strong {
|
|
font-size: 15px;
|
|
color: var(--fg);
|
|
}
|
|
.dm-beleg-drop span {
|
|
font-size: 12.5px;
|
|
color: var(--fg2);
|
|
}
|
|
.dm-beleg-drop--darueber {
|
|
border-color: var(--fg);
|
|
border-style: solid;
|
|
background: var(--shade);
|
|
}/* Solldruck: vier Zeichen ("2,40"), nicht die volle Feldbreite.
|
|
Deckungsgleich mit .druckfeld in audi-dashboard.css (58px). Die Klasse
|
|
stand hier schon im Markup, hatte aber keine Regel - die Felder nahmen
|
|
deshalb die ganze Zeile ein. */
|
|
.ads-feld input.druckfeld {
|
|
width: 58px;
|
|
min-width: 0;
|
|
flex: none;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Markenlogo (Shell u. a.) auf die Hoehe der Feldbeschriftung daneben -
|
|
16px, siehe .ads-feld label. Mit 14px wirkte es neben "SmartDeal aktiv"
|
|
zu klein (gemeldet vom Eigentuemer, 2026-08-31). */
|
|
.dm-markenlogo {
|
|
height: 19.2px;
|
|
width: auto;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Knopf in einer Listenzeile - heute nur "Fahrt beenden" in der
|
|
Zuletzt-Kachel. Zwilling von .zeilenknopf im Panel: 36 px sichtbar,
|
|
44 px Trefferhoehe ueber das Pseudoelement, damit die Zeile nicht hoeher
|
|
wird als ihre Nachbarin. */
|
|
.dm-zeilenknopf {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
letter-spacing: .01em;
|
|
color: var(--fg);
|
|
background: none;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--r-pill);
|
|
padding: 8px 15px;
|
|
min-height: 36px;
|
|
cursor: pointer;
|
|
}
|
|
.dm-zeilenknopf:hover { background: var(--shade); }
|
|
.dm-zeilenknopf:active { opacity: .55; }
|
|
.dm-zeilenknopf:disabled { opacity: .4; cursor: default; }
|
|
.dm-zeilenknopf::before { content: ""; position: absolute; inset: -4px 0; }
|
|
|
|
/* Gruen wie der Sicherheits-Haken: es laeuft gerade etwas. */
|
|
.dm-blatt__k small .dm-laeuft, .dm-laeuft { color: var(--ok); }
|
|
.dm-vorlaeufig { color: var(--fg3); }
|
|
|
|
.dm-token-gesetzt { color: var(--ok); }
|
|
.dm-token-offen { color: var(--fg3); }
|
|
|
|
/* Abweichender Wert - im Panel steht er in var(--warn), hier ebenso. */
|
|
.dm-wertzeile__warnung {
|
|
color: var(--warn);
|
|
}
|
|
|
|
/* QR-Scanner der Ersteinrichtung.
|
|
|
|
Das Bild bleibt quadratisch und beschnitten (object-fit: cover): ein QR-Code
|
|
wird ohnehin mittig in den Rahmen gehalten, und ein hochkant gezerrtes
|
|
Kamerabild macht das Zielen schwerer statt leichter. */
|
|
.dm-qr {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
border-radius: var(--r-tile);
|
|
overflow: hidden;
|
|
background: #000;
|
|
}
|
|
.dm-qr__bild {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
/* Fest weiss, NICHT var(--fg): der Rahmen liegt auf dem Kamerabild, und das
|
|
ist dunkel. Im Tagmodus waere --fg fast schwarz - der Rahmen war dort
|
|
unsichtbar (am gerenderten Blatt gesehen, 04.09.2026). Der Schatten haelt
|
|
ihn auch vor einer hellen Wand ablesbar. */
|
|
.dm-qr__rahmen {
|
|
position: absolute;
|
|
inset: 18%;
|
|
border: 2px solid #fff;
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
|
|
border-radius: 12px;
|
|
opacity: 0.85;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Wortgleich zu .debugknopf im Panel: der stille Knopf zum Debug-Mode am
|
|
Seitenende. Kein Kachelgrund, keine Ueberschrift, Zweitfarbe - er soll
|
|
gefunden werden koennen, ohne sich anzubieten. Die 44px Trefferhoehe
|
|
kommen aus dem Innenabstand. */
|
|
.dm-debugknopf {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 15px 0;
|
|
border: 0;
|
|
background: none;
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
color: var(--fg3);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
.dm-debugknopf:active {
|
|
color: var(--fg2);
|
|
}
|
|
|
|
/* --- Apple HIG: 44x44 pt als kleinstes Tippziel -------------------------
|
|
Am 04.09.2026 gemessen und hier nachgezogen. Zwei Wege, je nach Element:
|
|
|
|
(a) Unsichtbares Overlay, wo die sichtbare Groesse Teil des Bildes ist -
|
|
der Griff des Standort-Blatts (36x4) und die Zahnrad-Knoepfe.
|
|
(b) Echte Mindesthoehe, wo das Element ohnehin eine Flaeche ist und 44px
|
|
nicht stoeren - Eingabefelder, Auswahlfelder, Pillen, Segmente.
|
|
|
|
(b) veraendert das Bild sichtbar: Formulare werden etwas hoeher. Das ist
|
|
Absicht - 36px hohe Eingabefelder sind auf dem Telefon zu knapp. */
|
|
|
|
.dm-standortmenu__griff {
|
|
position: relative;
|
|
}
|
|
|
|
.dm-standortmenu__griff::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 88px;
|
|
height: 44px;
|
|
}
|
|
|
|
.dm-standort-pille {
|
|
min-height: 44px;
|
|
}
|
|
|
|
.dm-montiert {
|
|
min-height: 44px;
|
|
}
|
|
|
|
.ads-feld input,
|
|
.ads-feld select,
|
|
input.dm-eingabe,
|
|
select.dm-auswahl {
|
|
min-height: 44px;
|
|
}
|
|
|
|
/* Das Druckfeld ist schmal (58px), aber die Hoehe gilt auch dort. */
|
|
.ads-feld input.druckfeld {
|
|
min-height: 44px;
|
|
}
|
|
|
|
.ads-seg button {
|
|
min-height: 44px;
|
|
}
|
|
|
|
/* Der Schieberegler traegt seinen Daumen selbst; die Bahn ist duenn, das
|
|
Element darum darf trotzdem 44px hoch treffen. */
|
|
input[type="range"] {
|
|
min-height: 44px;
|
|
}
|