tobias
a08922e9a0
Fahrzeug-Pin auf der Standortkarte fehlte: die Marker-Effekte lesen Refs, die erst im asynchronen Leaflet-Import gesetzt werden. Beim ersten Lauf leer, Effekt steigt aus - und weil die Koordinaten sich danach nicht mehr aendern, lief er nie wieder. Ein Bereitschaftsschalter in den Abhaengigkeiten behebt das fuer Marker, Kachelebene und eigene Position zugleich. Kachelpfeil auf "Mein Audi" sass auf halber Kachelhoehe statt oben neben der Ueberschrift; Auswahlfelder hatten nach appearance:none ueberhaupt keinen Aufklapp-Pfeil mehr. SmartDeal: das Datumsfeld war fehlerhaft und die Abfrage, bis wann der Rabatt gilt, fehlte ganz. Das Panel fragt beim Einschalten und zeigt danach nur an - genau daran haengt, dass der Rabatt von selbst auslaufen kann. Portiert. Adressen statt Koordinaten: Nominatim drosselt uns inzwischen. Beide Apps fielen korrekt zurueck, merkten sich Treffer aber nur bis zum Neuladen. Jetzt dauerhaft im selben Cache wie die Tankstellensuche. Ziehen zum Aktualisieren auf dem Geraet: dem Scrollbehaelter fehlte overscroll-behavior, das native Overscroll nahm die Geste weg - derselbe Befund, den das Panel am 2026-08-17 hatte. Ausserdem: Platzhalter wieder in voller Groesse, FIN statt Fahrgestellnummer, Details als Hinweiszeile, Chevron an der Batteriespannung, Reifenzeile "aktuell montiert:", Zahnrad statt Stift am Anzugsmoment, Radkilometer in der Zahlenschrift, Layer-Icon zentriert, share-s beim Teilen, Schliessen-Knopf nur bei aufgezogener Karte. Nicht nachstellbar und zurueckgemeldet: "Fahrten/Tanken, grauer Hintergrund" - Panel und App sind dort deckungsgleich. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1850 lines
43 KiB
CSS
1850 lines
43 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;
|
|
}
|
|
|
|
.dm-auswahl option {
|
|
color: var(--fg);
|
|
background: var(--tile);
|
|
}
|
|
|
|
/* `.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;
|
|
padding: 32px;
|
|
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;
|
|
}
|
|
|
|
.dm-szene::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 42%;
|
|
background: linear-gradient(to bottom, transparent, var(--canvas) 78%);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Bodenschatten unter dem Fahrzeug (`.szene.strasse::after` /
|
|
`.szene.winter::after` im Panel, abschaltbar über den Schalter „Boden" in
|
|
den Einstellungen). */
|
|
.dm-szene--strasse::after,
|
|
.dm-szene--winter::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 8%;
|
|
right: 8%;
|
|
bottom: 6px;
|
|
height: 26px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(ellipse at center, var(--shade), transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dm-szene--winter::after {
|
|
background: radial-gradient(ellipse at center, rgba(150, 190, 255, .16), transparent 70%);
|
|
}
|
|
|
|
/* Panel: .carbox ~120px, .szene ~130px hoch - ein schmales, breites Band,
|
|
nicht das 4:3-Seitenverhältnis, das ImagePlaceholder sonst für Galerien
|
|
verwendet (dort korrekt, hier war es das nie - "carfix klein" im Panel ist
|
|
16:8). Scoped auf die Übersicht-Szene, damit andere ImagePlaceholder-
|
|
Stellen (Mein Audi, Reifen, ...) ihre eigene, richtige Größe behalten. */
|
|
.dm-szene .ads-bildbox {
|
|
aspect-ratio: 16 / 8;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.dm-zahnrad {
|
|
position: absolute;
|
|
top: 11px;
|
|
right: 11px;
|
|
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;
|
|
}
|
|
|
|
.dm-bildmenu-fang {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.dm-bildmenu {
|
|
position: absolute;
|
|
z-index: 1001;
|
|
bottom: var(--sp-5);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
min-width: 160px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 0;
|
|
border-radius: 14px;
|
|
padding: var(--sp-2);
|
|
background: rgba(40, 44, 52, .92);
|
|
-webkit-backdrop-filter: saturate(180%) blur(22px);
|
|
backdrop-filter: saturate(180%) blur(22px);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
[data-theme="tag"] .dm-bildmenu {
|
|
background: rgba(250, 250, 252, .92);
|
|
}
|
|
|
|
.dm-bildmenu--rad {
|
|
bottom: auto;
|
|
top: 90px;
|
|
left: 22px;
|
|
transform: none;
|
|
}
|
|
|
|
.dm-bildmenu button {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
background: none;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
color: var(--fg);
|
|
font-family: inherit;
|
|
font-size: 16px;
|
|
padding: 13px 16px;
|
|
min-height: 46px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dm-bildmenu button:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.dm-bildmenu button:active {
|
|
background: var(--shade);
|
|
}
|
|
|
|
.dm-bildmenu__loeschen {
|
|
color: var(--bad);
|
|
}
|
|
|
|
/* 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. */
|
|
.dm-quad {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 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);
|
|
}
|
|
|
|
/* "Letzte Fahrt"/"Letzte Tankung" auf der Übersicht - deckungsgleich mit
|
|
.leaf .v/.leaf .v small im Panel (15px/400/var(--fg2), Zusatzzeile
|
|
12.5px/var(--fg3), KEINE Wide-Schrift/Hero-Zahl). War hier 20px/300 ohne
|
|
Farbangabe - eine erfundene "große Zahl"-Behandlung, die dieser Kachel im
|
|
Panel nie zustand (Parität-Audit 2026-08-30). Nur hier verwendet (die
|
|
anderen NaviKachel-Aufrufe in MeinAudi.tsx/Service.tsx/Versicherung.tsx
|
|
nutzen .dm-navikachel__wert direkt, unangetastet). */
|
|
.dm-navikachel__zahl {
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
color: var(--fg2);
|
|
}
|
|
.dm-navikachel__wert .dm-navikachel__zahl + small {
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.dm-navikachel__wert small,
|
|
.dm-wertzeile small {
|
|
display: block;
|
|
margin-top: 2px;
|
|
font-size: 12.5px;
|
|
color: var(--fg3);
|
|
}
|
|
|
|
.dm-aktionen {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: var(--sp-2) 0 var(--sp-4);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
/* 16:9, wie carImg("galerie") im Panel ("carfix", nicht "carfix klein" -
|
|
das 16:8-Maß gilt nur für die Übersicht-Szene). */
|
|
.dm-galerie-wechsel .ads-bildbox {
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
.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. */
|
|
.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. */
|
|
.dm-blatt__k {
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
font-size: 16px;
|
|
line-height: 1.35;
|
|
color: var(--fg);
|
|
}
|
|
|
|
.dm-blatt__v {
|
|
flex: 0 0 auto;
|
|
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;
|
|
}
|
|
|
|
.dm-detail__zahl {
|
|
font-size: 40px;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
/* Einzelfahrt/Einzelbeleg: das Panel zeichnet die Distanz- bzw. Liter-Zahl in
|
|
vTrip()/dem Tankvorgang-Detail eigens bei 52px (style="font-size:52px"),
|
|
größer als die übrigen Detailseiten mit ihrer gemeinsamen 40px-.fig - kein
|
|
Versehen, sondern die Hauptzahl der jeweiligen Seite. */
|
|
.dm-detail__zahl--gross {
|
|
font-size: 52px;
|
|
}
|
|
|
|
.dm-detail__einheit {
|
|
font-size: 15px;
|
|
color: var(--fg2);
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.dm-detail__marken {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.dm-karte {
|
|
height: 240px;
|
|
width: 100%;
|
|
border-radius: var(--r-func);
|
|
overflow: hidden;
|
|
margin-top: var(--sp-3);
|
|
background: var(--tile-2);
|
|
}
|
|
|
|
/* ------------------------------------------------------------ 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);
|
|
}
|
|
|
|
.dm-liste__serie {
|
|
color: var(--fg2);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
.dm-waehlen {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--sp-2);
|
|
margin-top: var(--sp-3);
|
|
}
|
|
|
|
.dm-waehlen__knopf {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 10px 16px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--r-pill);
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
color: var(--fg);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dm-waehlen__knopf:hover {
|
|
background: var(--shade);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.dm-standort-leer {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
color: var(--fg3);
|
|
text-align: center;
|
|
padding: 0 30px;
|
|
background: var(--tile);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.dm-standortmenu {
|
|
position: absolute;
|
|
z-index: 410;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
--dm-standort-peek: 96px;
|
|
background: var(--canvas);
|
|
border-radius: var(--r-tile) var(--r-tile) 0 0;
|
|
box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
|
|
padding: 0 20px max(18px, env(safe-area-inset-bottom));
|
|
transform: translateY(calc(100% - var(--dm-standort-peek)));
|
|
transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
}
|
|
.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;
|
|
}
|
|
.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(--tile);
|
|
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. */
|
|
.dm-marke {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.dm-marke img {
|
|
height: 13px;
|
|
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-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;
|
|
}
|