tobias
90efcc5b00
Die App blieb nach einem Neustart von Home Assistant auf dem alten Stand stehen, mit einer 502-Fehlerzeile, die erst ein Beenden der App wegbekam. Zwei Ursachen: 502/503/504 galten als harter Ladefehler statt als "Server faehrt gerade hoch", und nach dem Wiederverbinden wurde genau einmal nachgeladen - schlug das fehl, kam nie wieder ein Versuch. Beides behoben, vier Regressionstests dazu. OTA: das Buendel ist von HEAD ueber die Platte bis zu den ausgelieferten Bytes nachweislich deckungsgleich. Die Fassung haengt jetzt trotzdem als ?v= an der Adresse (der statische Pfad kommt ohne Cache-Control, aber mit ETag), und ein Pruefsummenfehler wird erklaert statt durchgereicht. Statistik: der Gesamtwert steht jetzt als grosse Zahl in der Kopfzeile, darunter bleiben vier Spalten - fuenf passen auf dem Telefon nachweislich nicht in eine Zeile. Fahrzeugfoto ohne Beschnitt und ohne Bodenschatten, damit auch ohne den Schalter dafuer. Setup filtert zusaetzlich nach dem Signalnamen aus dem Katalog. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1941 lines
48 KiB
CSS
1941 lines
48 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;
|
|
}
|
|
|
|
/* Der Ausblend-Verlauf ist am 2026-08-31 entfallen: er lag ueber dem
|
|
unteren Teil des Fotos, und der Eigentuemer hat zweimal darum gebeten,
|
|
das Fahrzeug unverdeckt zu sehen. Ebenso der Bodenschatten, der hier
|
|
frueher als .dm-szene--strasse::after stand - samt dem Schalter dafuer. */
|
|
|
|
|
|
/* Das Fahrzeugfoto wird nicht mehr beschnitten.
|
|
|
|
Gemessen am echten Foto (2026-08-31): es ist 2000x1125 gross, also 16:9.
|
|
Der Kasten stand auf 16:8 - bei object-fit:cover wurde das Bild auf die
|
|
Kastenbreite skaliert und oben wie unten je ein Viertel abgeschnitten.
|
|
Das Dach lag darin.
|
|
|
|
Statt das Verhaeltnis auf 16:9 festzuschreiben - was beim naechsten Foto in
|
|
einem anderen Format wieder schneiden wuerde - bestimmt jetzt das Bild
|
|
selbst die Hoehe. Der Platzhalter behaelt sein festes Verhaeltnis, er hat
|
|
ja keines von sich aus. */
|
|
.dm-szene .ads-bildbox {
|
|
aspect-ratio: auto;
|
|
}
|
|
|
|
.dm-szene .ads-bildbox img {
|
|
height: auto;
|
|
}
|
|
|
|
/* Ohne Foto bleibt die Fläche flach und läuft nicht randlos: sonst stünden
|
|
172px leerer Platzhalter vor der Reichweite, der wichtigsten Zahl der
|
|
Seite (`.bildbox.bild-fehlt.carfix.klein{height:120px}` und
|
|
`.szene.bleed:has(.bild-fehlt)` im Panel). */
|
|
/* Der Platzhalter belegt denselben Kasten wie ein echtes Foto (16:8). Er war
|
|
zwischenzeitlich auf 120 und dann 72px gestaucht, um die Reichweite
|
|
hoeher zu ruecken - auf Ansage des Besitzers steht er wieder in voller
|
|
Groesse, weil ein Streifen nicht erkennen laesst, was dort hingehoert. */
|
|
.dm-szene .ads-bildbox:has(.ads-platzhalter) {
|
|
aspect-ratio: 16 / 8;
|
|
height: auto;
|
|
}
|
|
|
|
.dm-galerie-wechsel .ads-bildbox:has(.ads-platzhalter) {
|
|
aspect-ratio: auto;
|
|
height: 132px;
|
|
}
|
|
|
|
.dm-szene:has(.ads-platzhalter) {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.dm-szene:has(.ads-platzhalter)::before {
|
|
display: none;
|
|
}
|
|
|
|
.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. */
|
|
/* Vier feste Spalten - Jahr, Monat, Woche, Tag muessen in EINE Zeile passen.
|
|
|
|
Vorher stand hier repeat(auto-fit, minmax(84px, 1fr)). Auf dem Telefon ist
|
|
die Kachel innen 307px breit, damit passten bei 12px Abstand nur drei
|
|
Spalten (3 x 84 + 2 x 12 = 276; vier waeren 372) - die vierte rutschte in
|
|
eine zweite Zeile.
|
|
|
|
Mit vier festen Spalten bleiben 67,75px je Spalte. Der laengste realistisch
|
|
vorkommende Wert ist ein sechsstelliger Kilometerstand wie "209.177": am
|
|
laufenden Panel gemessen 67px in Audi Type Wide 300 bei 16px. Es passt
|
|
also, aber ohne Reserve - eine fuenfte Spalte gaebe es nur mit kleinerer
|
|
Schrift, und genau deshalb steht der Gesamtwert jetzt in der Kopfzeile der
|
|
Kachel statt in einer eigenen Spalte.
|
|
|
|
Bewusst kein white-space:nowrap: waere ein Wert doch einmal breiter,
|
|
umbricht er innerhalb seiner Spalte, statt aus der Kachel zu laufen. */
|
|
.dm-quad {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: var(--sp-3);
|
|
margin-top: var(--sp-3);
|
|
}
|
|
|
|
.dm-quad__n {
|
|
display: block;
|
|
font-family: var(--font-wide);
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
color: var(--fg);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.dm-quad__l {
|
|
display: block;
|
|
margin-top: 4px;
|
|
font-size: 11px;
|
|
letter-spacing: normal;
|
|
color: var(--fg3);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.dm-warnton {
|
|
color: var(--warn);
|
|
}
|
|
|
|
/* `.wert` im Panel: der normale Fließtext einer Kachel. */
|
|
.dm-wert {
|
|
font-size: 14px;
|
|
letter-spacing: normal;
|
|
color: var(--fg2);
|
|
margin-top: var(--sp-2);
|
|
}
|
|
|
|
.dm-servicezeile {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--sp-4);
|
|
margin-top: 14px;
|
|
padding-top: 13px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
/* Service-Seite, "Anstehende Termine": drei sichtbar getrennte Bloecke statt
|
|
einer Wertzeilen-Liste - deckungsgleich mit .termingruppe im Panel
|
|
(audi-dashboard.css, vService()). Trennung ueber Abstand und eine Haarlinie
|
|
zwischen den Bloecken, nicht ueber verschachtelte Kacheln (Audi-CI). */
|
|
.dm-termingruppe {
|
|
padding: 18px 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.dm-termingruppe:first-of-type {
|
|
padding-top: 2px;
|
|
border-top: 0;
|
|
}
|
|
.dm-tgkopf {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
min-width: 0;
|
|
}
|
|
.dm-tgkopf svg {
|
|
color: var(--fg2);
|
|
flex: none;
|
|
}
|
|
.dm-tgkopf span {
|
|
font-size: 16px;
|
|
color: var(--fg);
|
|
font-weight: 400;
|
|
}
|
|
.dm-tgvorgabe {
|
|
font-size: 12.5px;
|
|
color: var(--fg2);
|
|
margin-top: 8px;
|
|
}
|
|
.dm-tgwert {
|
|
/* Fehlte hier ganz - fiel auf die schmale Grundschrift zurück statt auf
|
|
Audi Type Wide wie .tg-wert im Panel (Parität-Audit 2026-08-29). */
|
|
font-family: var(--font-wide);
|
|
font-weight: 300;
|
|
font-size: 22px;
|
|
color: var(--fg);
|
|
letter-spacing: -0.005em;
|
|
margin-top: 4px;
|
|
}
|
|
.dm-tgwert--leer {
|
|
font-weight: 400;
|
|
font-size: 15px;
|
|
color: var(--fg3);
|
|
margin-top: 8px;
|
|
}
|
|
.dm-tgprognose {
|
|
font-size: 12.5px;
|
|
color: var(--fg2);
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* Reichweiten-Kachel auf der Übersicht - deckungsgleich mit .tankzeile/.pct
|
|
im Panel (audi-dashboard.css). */
|
|
.dm-tankzeile {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.dm-tankzeile__pct {
|
|
font-size: 15px;
|
|
color: var(--fg2);
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.dm-navikachel__wert {
|
|
margin-top: var(--sp-1);
|
|
font-size: 15px;
|
|
font-weight: 300;
|
|
color: var(--fg);
|
|
}
|
|
|
|
/* "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;
|
|
}
|