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