tobias
4af38d7e65
Der 15-Minuten-Timer war doppelt: der FMM003 wartet laut Konfiguration (Trip \ Odometer, Ignition OFF Timeout) selbst 900 s, die App noch einmal 15 Minuten. Zusammen eine halbe Stunde. Die Pausenregel ist damit entfallen - in der Live-Erkennung, im Historienimport und in beiden Oberflaechen. Der Schwellwert "ab wann ist es ein Parkplatz" hing an derselben Einstellung, hat damit aber nichts zu tun und steht jetzt als eigene Zahl. Hoechst- und Durchschnittsgeschwindigkeit je Fahrt. Der Durchschnitt folgt aus Strecke und Dauer, vmax aus der neuen Rolle GESCHWINDIGKEIT_SENSOR - laut Konfiguration liest das Geraet die Geschwindigkeit vom OBD/CAN. Es ist der groesste gemeldete Wert, nicht die tatsaechliche Spitze: alle zehn Sekunden ein Datensatz. So ist es auch beschriftet. Der Langzeitverbrauch war um einen ganzen Tankinhalt zu hoch. Gemessen wird die Strecke ZWISCHEN erstem und letztem Tankstop; verbraucht wurde darauf, was ab dem ZWEITEN hineinkam - der erste fuellte die Strecke davor. Bei 13 Tankvorgaengen rund 8 Prozent, im Testfall 16,7 statt 8,3 l/100 km. Der Test hatte die falsche Rechnung festgeschrieben und ist mitkorrigiert. Eine negative Strecke (falscher Kilometerstand an einem Tankvorgang) gilt jetzt als unplausibel statt als Null ohne Erklaerung. Verbrauch je Fahrt bekommt Grenzen: am Sensor nachgemessen loest can_fuel_volume 0,1 l auf, ein Schritt entspricht also 10/Strecke l/100 km Fehler. Unter 3 km sagt die Differenz nichts mehr, ueber 60 l/100 km ist es kein Verbrauch. Statistik: zusaetzlich "Absolut", und die Einheit steht jetzt in eckigen Klammern an der Rubrik statt vier Mal am Zeitraum. Fuenf Spalten passen auf einem Telefon nicht nebeneinander, das Raster bricht um. Radfoto in Reifen war ein reines <Bild> - Ersetzen und Loeschen von dort aus gar nicht erreichbar. Jetzt BildMitMenue wie im Panel. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1945 lines
47 KiB
CSS
1945 lines
47 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;
|
|
/* 26/96 statt 42/78: der Verlauf soll die harte Bildkante ausblenden,
|
|
nicht das Fahrzeug. Mit 42% Hoehe und Vollton ab 78% war das untere
|
|
Drittel des Fotos praktisch einfarbig - Raeder und Schweller lagen
|
|
darunter (gemeldet vom Eigentuemer, 2026-08-31). */
|
|
height: 26%;
|
|
background: linear-gradient(to bottom, transparent, var(--canvas) 96%);
|
|
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. */
|
|
/* 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. */
|
|
.dm-quad {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(84px, 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;
|
|
}
|
|
|
|
/* 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));
|
|
}
|
|
|
|
/* ------------------------------------------------------------ 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;
|
|
/* 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. */
|
|
.dm-marke {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.dm-marke img {
|
|
/* Auf Zeilenhoehe, siehe .dm-markenlogo weiter unten. */
|
|
height: 16px;
|
|
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);
|
|
}
|
|
|
|
.dm-beleg-knoepfe {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp-2);
|
|
margin-top: var(--sp-3);
|
|
}
|
|
/* 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: 16px;
|
|
width: auto;
|
|
vertical-align: middle;
|
|
}
|