audi-app/companion-app/src/stile/screens.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;
}

/* 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;
}

.dm-wisch__loeschen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 88px;
  border: 0;
  padding: 0;
  background: var(--bad);
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.dm-wisch__inhalt {
  position: relative;
  background: var(--tile);
  touch-action: pan-y;
}

.dm-szene .ads-bild,
.dm-szene img {
  width: 100%;
  display: block;
}

/* Kein linkes/rechtes Innenpolster: das Panel stellt Kennzeichen/Marke in
   eine randlose "tile flat" (padding:0) - links/rechts eingerückt zu haben
   ließ diesen Text nicht mit "Reichweite" & Co. auf einer Kante stehen
   (Nutzerbericht "nicht linksbündig zum Rest der Seite", live gemessen:
   38px hier gegen 22px bei "Reichweite" - im Panel beide bei 16px). Nur
   oben/unten bleibt Abstand (zum Bild bzw. zur nächsten Kachel). */
/* Ohne eigenes Polster: im Panel sitzen Typenschild, Kennzeichen und
   Statuszeile direkt in einer randlosen `.tile.flat` (padding 0), das
   Kennzeichen mit 10px Abstand zum Schild. Die 16/22px hier machten den Block
   36px höher als im Panel (dort 89px, hier gemessen 125px). */
.dm-szene__text > .ads-eyebrow {
  margin-top: 10px;
}

/* Übersicht: "Nächster Service" als tippbare Kennzahl innerhalb der Kachel,
   darunter der Kilometerstand als ruhige Wertezeile. Nur der obere Teil ist
   ein Knopf, damit "differentiate controls from content" (Apple HIG) gilt -
   deckungsgleich mit .serviceblock/.servicezeile im Panel
   (audi-dashboard.css). */
.dm-serviceblock {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  color: inherit;
}
/* Nur wenn es wirklich ein Knopf ist (ein Termin vorhanden, siehe
   Uebersicht.tsx) - der "kein Eintrag"-Zustand ist ein reines <div>, ohne
   Zeigehand/Press-Feedback, deckungsgleich mit der nicht-klickbaren
   .tile-Variante im Panel. */
button.dm-serviceblock {
  cursor: pointer;
}
button.dm-serviceblock:active {
  opacity: 0.55;
}
.dm-serviceblock__chevron {
  position: absolute;
  top: 3px;
  right: 0;
  width: 6px;
  height: 10px;
  color: var(--fg3);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}
/* Serviceart-Icon links der Kennzahl statt des Wortes "bis zum/zur ..." -
   deckungsgleich mit .fig-zeile im Panel (audi-dashboard.css). */
/* margin-top deckungsgleich mit .fig-zeile im Panel - fehlte hier, "Nächster
   Service:" und die Kennzahl standen ohne Abstand aufeinander (Parität-
   Audit 2026-08-30). Der zweite Selektor deckt den Fall ohne Serviceart-
   Icon ab (Hauptuntersuchung), wo das Panel dasselbe margin-top direkt auf
   .fig setzt statt auf eine Wrapper-Zeile. */
.dm-servicefig {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.dm-serviceblock > .ads-fig {
  margin-top: 8px;
}
.dm-servicefig svg {
  color: var(--fg2);
  flex: none;
}
/* `.zahnrad` im Panel: rechts oben in der Kachel, 44px Trefferfläche,
   17px Symbol. */
.dm-kachel--zahnrad {
  position: relative;
}

.dm-kachel--zahnrad > .ads-eyebrow:first-child {
  padding-right: 44px;
}

/* Das Zahnrad ist 44px hoch (Trefferfläche), die Überschrift darunter nur
   12px. Ohne reservierte Zeile ragte es also 20px in den Kachelinhalt und lag
   sichtbar auf dem ersten Knopf - auf der Versicherungsseite auf "Inland ·
   <Nummer>", von dort auch gemeldet (02.09.2026). Es fing dessen obere Hälfte
   ab: der Knopf ließ sich am oberen Rand nicht wählen.

   Statt das Zahnrad zu verkleinern (44px sind die Mindestgröße einer
   Trefferfläche) bekommt die Kopfzeile die Höhe, die es braucht. Gleiche
   Regel im Panel (.tile:has(> .zahnrad)). */
.dm-kachel--zahnrad > .ads-eyebrow:first-child,
.dm-kachel--zahnrad > .ads-title:first-child {
  min-height: 34px;
  padding-right: 48px;
}

.dm-zahnrad {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fg3);
  cursor: pointer;
  padding: 0;
}

.dm-zahnrad:hover,
.dm-zahnrad:active {
  background: var(--tile-2);
  color: var(--fg);
}

.dm-zahnrad:active {
  transform: scale(.92);
}

/* Rufnummern der Notruf-Kachel: sehen aus wie Aktionsknöpfe, sind aber Links
   (`<a class="aktion" href="tel:…">` im Panel). */
.dm-waehlknopf {
  display: block;
  text-decoration: none;
  text-align: center;
}

/* `.tile` der Kfz-Steuer steht im Panel mit 26px Abstand nach der
   Vertragskachel. */
.dm-steuerkachel {
  margin-top: 26px;
}

.dm-diagramm__fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

/* Der Zoom-Knopf ist im Panel eine schmale Variante von `.aktion`
   (`padding:8px 16px;font-size:11px;width:auto;margin-top:0`). */
.dm-zoomzurueck {
  width: auto;
  min-height: 0;
  margin-top: 0;
  padding: 8px 16px;
  font-size: 11px;
}

.dm-diagramm__tooltip {
  margin-top: var(--sp-3);
  font-size: 13px;
  color: var(--fg2);
}

/* Ruhespannungs-Skala auf der Batterieseite (Panel: .bv-skala-kopf plus der
   Farbverlauf rot → gelb → grün und die drei Eckwerte darunter). */
.dm-skalakopf {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: .01em;
  color: var(--fg3);
}

.dm-skalabalken {
  margin-top: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--bad), var(--warn), var(--ok));
}

.dm-skalamarken {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.dm-skalamarken small {
  font-size: 12.5px;
  color: var(--fg3);
}

.dm-bewertung {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.dm-bewertungstext {
  display: block;
  margin-top: 10px;
  color: var(--fg2);
  font-size: 13px;
  line-height: 1.6;
}

/* Antipp-Menü am Fahrzeugfoto (`.bildmenu` im Panel, iOS-Auflage: kein
   Rahmen, durchscheinend mit Weichzeichner). */
.dm-bildklick {
  position: relative;
}

.dm-bildklick__flaeche {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}/* Name des Autohauses: 15px in --fg, wie im Panel. */
.dm-autohaus__name {
  font-size: 15px;
  margin-top: var(--sp-3);
}

/* Fehlender Wert im technischen Datenblatt: „noch offen" in --fg3, wie im
   Panel (`<dd style="color:var(--fg3)">`). */
.dm-offen {
  color: var(--fg3);
}

/* Zweitzeile unter der Bezeichnung eines Beitragspostens (SF + Beitragssatz). */
.dm-beitragsposten__sf {
  color: var(--fg3);
  font-size: 11px;
}

/* ------------------------------------------------------------ Statistik */

/* `.tile-h` im Panel: der ganze Kachelkopf ist der Schalter zum Aufklappen,
   ohne eigenes Aussehen. */
.dm-statkopf {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.dm-statkopf__kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.dm-statkopf__kopfzeile .ads-eyebrow {
  flex: 1;
}

.dm-statkopf[aria-expanded="true"] .ads-mark {
  transform: rotate(45deg);
}

.dm-statkopf__zeile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: var(--sp-3);
}

.dm-statkopf__neben {
  padding-bottom: 5px;
}

/* `.quad` im Panel: vier Werte nebeneinander, Zahl im Wide-Schnitt. */
/* Fuenf Spalten (Jahr/Monat/Woche/Tag/Absolut) passen auf einem Telefon nicht
   nebeneinander: bei rund 300px Innenbreite blieben je 51px, und "209.177"
   braucht bei 16px Audi Type Wide etwa 60. auto-fit bricht deshalb um - auf dem
   Telefon drei plus zwei, auf einem breiten Bildschirm alle fuenf in einer
   Reihe. Deckungsgleich mit .quad im Panel. */
/* Vier feste Spalten - Jahr, Monat, Woche, Tag muessen in EINE Zeile passen.

   Vorher stand hier repeat(auto-fit, minmax(84px, 1fr)). Auf dem Telefon ist
   die Kachel innen 307px breit, damit passten bei 12px Abstand nur drei
   Spalten (3 x 84 + 2 x 12 = 276; vier waeren 372) - die vierte rutschte in
   eine zweite Zeile.

   Mit vier festen Spalten bleiben 67,75px je Spalte. Der laengste realistisch
   vorkommende Wert ist ein sechsstelliger Kilometerstand wie "209.177": am
   laufenden Panel gemessen 67px in Audi Type Wide 300 bei 16px. Es passt
   also, aber ohne Reserve - eine fuenfte Spalte gaebe es nur mit kleinerer
   Schrift, und genau deshalb steht der Gesamtwert jetzt in der Kopfzeile der
   Kachel statt in einer eigenen Spalte.

   Bewusst kein white-space:nowrap: waere ein Wert doch einmal breiter,
   umbricht er innerhalb seiner Spalte, statt aus der Kachel zu laufen. */
.dm-quad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.dm-quad__n {
  display: block;
  font-family: var(--font-wide);
  font-size: 16px;
  font-weight: 300;
  color: var(--fg);
  line-height: 1.2;
}

.dm-quad__l {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: normal;
  color: var(--fg3);
  line-height: 1.3;
}

.dm-warnton {
  color: var(--warn);
}

/* `.wert` im Panel: der normale Fließtext einer Kachel. */
.dm-wert {
  font-size: 14px;
  letter-spacing: normal;
  color: var(--fg2);
  margin-top: var(--sp-2);
}

.dm-servicezeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

/* Service-Seite, "Anstehende Termine": drei sichtbar getrennte Bloecke statt
   einer Wertzeilen-Liste - deckungsgleich mit .termingruppe im Panel
   (audi-dashboard.css, vService()). Trennung ueber Abstand und eine Haarlinie
   zwischen den Bloecken, nicht ueber verschachtelte Kacheln (Audi-CI). */
.dm-termingruppe {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.dm-termingruppe:first-of-type {
  padding-top: 2px;
  border-top: 0;
}
.dm-tgkopf {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.dm-tgkopf svg {
  color: var(--fg2);
  flex: none;
}
.dm-tgkopf span {
  font-size: 16px;
  color: var(--fg);
  font-weight: 400;
}
.dm-tgvorgabe {
  font-size: 12.5px;
  color: var(--fg2);
  margin-top: 8px;
}
.dm-tgwert {
  /* Fehlte hier ganz - fiel auf die schmale Grundschrift zurück statt auf
     Audi Type Wide wie .tg-wert im Panel (Parität-Audit 2026-08-29). */
  font-family: var(--font-wide);
  font-weight: 300;
  font-size: 22px;
  color: var(--fg);
  letter-spacing: -0.005em;
  margin-top: 4px;
}
.dm-tgwert--leer {
  font-weight: 400;
  font-size: 15px;
  color: var(--fg3);
  margin-top: 8px;
}
.dm-tgprognose {
  font-size: 12.5px;
  color: var(--fg2);
  margin-top: 6px;
}

/* Reichweiten-Kachel auf der Übersicht - deckungsgleich mit .tankzeile/.pct
   im Panel (audi-dashboard.css). */
.dm-tankzeile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.dm-tankzeile__pct {
  font-size: 15px;
  color: var(--fg2);
  padding-bottom: 6px;
}

.dm-navikachel__wert {
  margin-top: var(--sp-1);
  font-size: 15px;
  font-weight: 300;
  color: var(--fg);
}.dm-navikachel__wert small,
.dm-wertzeile small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--fg3);
}.dm-textknopf {
  border: 0;
  background: transparent;
  color: var(--fg2);
  font-size: 13px;
  font-weight: 300;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
}

.dm-textknopf:hover:not(:disabled) {
  background: var(--shade);
  color: var(--fg);
}

.dm-textknopf:disabled {
  opacity: 0.5;
  cursor: default;
}

/* --------------------------------------------------------- Werteliste */

.dm-werteliste {
  margin: var(--sp-3) 0 0;
}

/* Live am Panel gemessen (.row/dt/dd, audi-dashboard.css): beide Spalten
   16px/400, dt (Feldname) in var(--fg) - NICHT grau, das ist der Wert (dd,
   var(--fg2)) - genau umgekehrt zu dem, was hier vorher stand (13px/grau
   Label, 14px/hell Wert). Betrifft jede Wertzeile app-weit (Parität-Audit
   2026-08-30). */
.dm-wertzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.dm-wertzeile:last-child {
  border-bottom: 0;
}

.dm-wertzeile dt {
  font-size: 16px;
  font-weight: 400;
  color: var(--fg);
}

.dm-wertzeile dd {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--fg2);
  text-align: right;
}

.dm-abschnitt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 2px 0;
}

/* Wechselbild "Mein Audi" - deckungsgleich mit carImg("galerie")/.dots im
   Panel: ein antippbares Bild, das zum nächsten Galerieplatz weiterschaltet,
   plus Punktanzeige darunter. */
.dm-galerie-wechsel {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
/* Das Bild bestimmt die Höhe, wie im Panel ("carfix klein").

   Bis zum 02.09.2026 stand hier ein fester 16:9-Kasten mit object-fit:cover.
   Jedes Foto, dessen Verhältnis davon abweicht, verlor dabei oben und unten
   etwas - bei der Frontansicht die Stoßstange, so gemeldet. Der Preis ist,
   dass der Block beim Durchblättern seine Höhe ändert; das ist dieselbe
   Abwägung, die die Übersicht-Szene am 31.08. entschieden hat. Der
   Platzhalter behält sein festes Maß (Regel weiter oben), er hat ja kein
   eigenes Verhältnis. */
.dm-galerie-wechsel .ads-bildbox {
  aspect-ratio: auto;
}

.dm-galerie-wechsel .ads-bildbox img {
  height: auto;
}
.dm-galerie-punkte {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}
.dm-galerie-punkte span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}
.dm-galerie-punkte span.an {
  background: var(--red);
}

/* Klickbare Wertzeile (Batteriespannung → Verlauf) - deckungsgleich mit
   `.row[data-go]` im Panel: derselbe Zeilenaufbau wie .dm-wertzeile, nur als
   <button> statt <div>, mit Chevron in der Wertespalte. */
.dm-wertzeile--knopf {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  color: inherit;
  cursor: pointer;
}
.dm-wertzeile--knopf dd {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Gezeichneter Pfeil wie .chev im Panel - 6x10, Strichstaerke 1,4. Vorher
   stand hier eine Schriftgroesse, weil an dieser Stelle einmal ein
   Schriftzeichen als Pfeil diente. */
.dm-wertzeile__chevron {
  width: 6px;
  height: 10px;
  flex: 0 0 auto;
  color: var(--fg3);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* Wert als Kommentar statt als Angabe (siehe Wertzeile hinweis). Groesse und
   Farbe wie jede andere Nebenzeile der App. */
.dm-wertzeile__hinweis {
  font-size: 12.5px;
  color: var(--fg3);
}

.dm-fussnote {
  margin: var(--sp-3) 0 0;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--fg3);
  text-wrap: pretty;
}

/* ------------------------------------------------------ Fahrzeugstatus */

/* Kreis-Häkchen für die vier Sammelzeilen der Sicherheit-Seite - Zustand ist
   so schon am Symbol erkennbar, nicht nur an der Farbe. Die Detailliste
   "Türen und Klappen" (TuerenKlappen.tsx) verwendet stattdessen die
   gewöhnliche .dm-wertzeile-Zeile mit dem einfachen @audi-dash/ui .ads-dot -
   deckungsgleich mit dem Panel, dessen vTuerenKlappen() ebenfalls den
   schlichten Punkt statt des Kreis-Häkchens zeigt. */
.dm-statuskreis {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ok);
}
.dm-statuskreis--warn { background: var(--warn); }
.dm-statuskreis--bad { background: var(--bad); }
.dm-statuskreis svg { display: block; }

.dm-sicherheitsliste {
  display: flex;
  flex-direction: column;
}
.dm-sicherheitszeile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  width: 100%;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  font: inherit;
  color: inherit;
  text-align: left;
}
.dm-sicherheitszeile:last-child { border-bottom: 0; }
button.dm-sicherheitszeile { cursor: pointer; }
button.dm-sicherheitszeile:active { background: var(--tile-2); }
.dm-sicherheitszeile__text { flex: 1; font-size: 14px; }
.dm-sicherheitszeile__chev { margin-left: auto; flex: none; color: var(--fg3); }

/* Sammelzeile über den vier Sicherheitszeilen - deckungsgleich mit dem
   obersten Kasten in vSicherheit() (style="display:flex;align-items:center;
   gap:12px;padding:16px 20px"), dasselbe Kreis-Häkchen-Symbol wie die Zeilen
   darunter, keine Zeitangabe. */
.ads-tile.dm-sicherheitssammel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
}
.dm-sicherheitssammel span {
  font-size: 15px;
  color: var(--fg);
}

/* ------------------------------------------------------------ Galerie */

.dm-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* ------------------------------------------------------- Listenzeilen */

/* `.dm-zeile`/`.dm-zeile__wisch`/`.dm-zeile__menue` sind mit dem „···"-Knopf
   entfallen (siehe Zeilenmenue.tsx) - die Zeile ist jetzt direkt die
   Wischzeile, wie im Panel. */

/* Zuschnitt von `.leaf` im Panel (audi-dashboard.css + iOS-Auflage, live
   gemessen): 12px oben/unten, 40px links (Platz der Wischspalte), min-height
   56px, Trennlinie unten, Beschriftung 16px in --fg mit 12,5px-Zusatz in
   --fg3, Wert 15px in --fg2 mit demselben Zusatz. */
/* Fahrten- und Tankliste: Abschnittsköpfe statt Einrückung.

   Gemessen am 02.09.2026 im laufenden Panel (gleicher Aufbau): von der
   Innenkante der Kachel bis zum Ortsnamen lagen 58px tote Breite - 22px
   Einrückung der Monatsebene plus 40px linkes Polster der Zeile. Auf einem
   Telefon brach "Eichstätt → Adelschlag" deshalb um.

   Apples Richtlinien gruppieren nicht über Einrückung, sondern über
   Abschnittsköpfe über die volle Breite; die Zeilen stehen alle auf
   derselben Kante. Die Monatszeile bleibt kleiner und grau und liest sich
   dadurch als Kopf, ohne Platz zu kosten. Beschränkt auf .dm-liste, weil das
   linke Polster von .dm-blatt anderswo gewollt ist. Gleichlautend .liste im
   Panel. */
.dm-liste .ads-accordion--lvl2 {
  margin-left: 0;
}

/* Jahr und Monat tragen DENSELBEN Kopf, die Fahrtzeile trägt den Inhalt.

   In der Liste standen drei Elemente in drei Formaten: 2026 in 16px weiß,
   September in 11px grau gesperrt in Versalien, der Ortsname wieder in 16px
   weiß. Der Eigentümer hat das am 02.09.2026 als unprofessionell bezeichnet -
   zu Recht: zwei Köpfe, die dasselbe tun, sollen auch gleich aussehen.

   Beide jetzt 13px in der Zweitfarbe, gemischt geschrieben und ohne Sperrung.
   Das ist zugleich die heutige Apple-Form: Abschnittsköpfe klein und in
   Sekundärfarbe, aber gemischt - Versalien sind der Stil vor iOS 13. Der
   Inhalt bleibt größer als sein Kopf, wie es die Richtlinien verlangen.
   Unterschieden werden die beiden Ebenen über die Position, nicht über die
   Schrift.

   Von drei Vorschlägen (Monat als eigener Abschnitt ohne Aufklappen / beide
   Köpfe gleich / Jahr als Seitenüberschrift) hat der Eigentümer diesen
   gewählt: das Zusammenklappen ganzer Jahre bleibt erhalten. */
.dm-liste .ads-acc-h__k {
  font-size: 13px;
  color: var(--fg2);
}

/* 20px statt 0: die Zeilen standen sonst 34px vom Bildschirmrand entfernt und
   damit sichtbar enger als alles andere in der Kachel (gemeldet 02.09.2026).
   20px ist nicht geraten, sondern die Spalte des Aufklapp-Pfeils - die Zeilen
   stehen damit auf derselben Kante wie der Text der Kopfzeilen, so wie iOS es
   in gruppierten Listen macht.

   Nachgemessen bei 375px: die Beschriftungsspalte behält 157px, der längste
   Ortsname der Testdaten ("Ingolstadt → Adelschlag") braucht 142,7px. Von den
   58px, die vorher verschenkt waren, bleiben 38 gewonnen. */
.dm-liste .dm-blatt {
  padding-left: 20px;
}

.dm-blatt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: 12px 0 12px 40px;
  min-height: 56px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font-family: inherit;
  text-align: left;
  color: inherit;
}

.dm-blatt--letzte {
  border-bottom: 0;
}

button.dm-blatt {
  cursor: pointer;
  transition: background .15s;
}

button.dm-blatt:active {
  background: var(--tile-2);
}

/* `flex: 0 1 auto` wie `.leaf .k` im Panel — die Beschriftung nimmt ihre
   natürliche Breite und schrumpft erst, wenn es sonst nicht passt. Mit
   `1 1 auto` (dem Wert, den das Panel nur für die Zuletzt-Kachel setzt)
   brach „Fahrt ohne Ortsangabe" hier auf zwei Zeilen um, obwohl es im Panel
   einzeilig steht. */
/* flex:1 statt 0 1: das Label nimmt den freien Platz, damit space-between
   keinen Raum ZWISCHEN Label, Werten und Pfeil verteilt - sonst stuende die
   Wertespalte in der Mitte und ihre Lage haenge an der Laenge des Ortsnamens
   (im Panel gemessen: 549px gegen 520px rechte Kante). */
.dm-blatt__k {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--fg);
}
/* Ein Flex-Kind darf nur mit min-width:0 unter seine Inhaltsbreite schrumpfen -
   ohne das greift text-overflow nie und ein langer Ortsname draengt die Werte. */
.dm-blatt__k > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Feste Mindestbreite, damit Strecke und Verbrauch ueber alle Zeilen hinweg in
   einer Spalte stehen. Ohne sie waechst der Kasten mit dem Inhalt - im Panel
   gemessen 86px bei "11,4 l/100 km" gegen 37px bei einer Zeile ohne Werte, und
   die Zahlen standen entsprechend versetzt. */
.dm-blatt__v {
  flex: 0 0 104px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
  font-size: 15px;
  color: var(--fg2);
}

.dm-blatt__k small,
.dm-blatt__v small {
  font-size: 12.5px;
  color: var(--fg3);
}

.dm-blatt__chevron {
  width: 6px;
  height: 10px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--fg3);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Die Zuletzt-Kachel der Übersicht: ohne die linke Wischspalte, und beide
   Werte auf einer gemeinsamen linken Kante (`.teaser .leaf .v{min-width:72px}`
   im Panel, samt der dort ausführlich begründeten flex-Verteilung). */
.dm-teaser .dm-blatt {
  padding-left: 0;
}

.dm-teaser .dm-blatt__k {
  flex: 1 1 auto;
}

.dm-teaser .dm-blatt__v {
  min-width: 72px;
}

.dm-listenzeile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 12px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

/* Cursor nur für echte Zeilen-Buttons (navigieren bei Klick, Fahrten.tsx/
   Tanken.tsx) - BatterieListe.tsx ist bewusst ein reines <div>, keine
   Zeilennavigation, nur Wischen zum Löschen; ein Hand-Cursor würde dort
   fälschlich "hier passiert beim Klick etwas" versprechen. */
button.dm-listenzeile {
  cursor: pointer;
}

.dm-listenzeile__haupt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dm-listenzeile__titel {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: 16px;
  font-weight: 300;
}

.dm-listenzeile__neben {
  font-size: 13px;
  color: var(--fg2);
}

.dm-listenzeile__unter {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--fg3);
  /* Umbrechen statt abschneiden: Datum, Uhrzeit und Dauer sind alle drei
     wichtig, und "11.08.2026 · 12:27 Uhr · 3…" verliert genau die Angabe,
     die man sucht. */
  line-height: 1.4;
}

/* -------------------------------------------------------- Detailseiten */

.dm-detail__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-3);
  flex-wrap: wrap;
}/* Deckend wie .mapbox im Panel (audi-dashboard-ios.css). --tile-2 ist im
   Nachtmodus ein zweiter Schleier auf der ohnehin durchscheinenden Kachel -
   die Flaeche hinter den Kartenkacheln wurde dadurch heller als vorgesehen. */
.dm-karte {
  height: 240px;
  width: 100%;
  border-radius: var(--r-func);
  overflow: hidden;
  margin-top: var(--sp-3);
  background: var(--tile-deckend, var(--tile-2));
}

/* Beleg wird gelesen: Zapfsäule, Kreisel, Text - siehe Tanken.tsx. */
.dm-belegladen {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-3);
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--tile-2);
  color: var(--fg2);
  font-size: 14px;
}

.dm-belegladen svg {
  color: var(--fg2);
  flex: none;
}

/* ------------------------------------------------------------ Ladezustand */

/* HIG "Loading": ein unbestimmt langer Vorgang (Netzwerk, kein verlässlicher
   Fortschritt) bekommt einen laufenden Indikator statt eines stumm
   daliegenden Knopfes - sonst nicht von einem Hänger zu unterscheiden.
   Deckungsgleich mit .lade-spinner im Panel. */
.dm-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  border: 2px solid var(--line);
  border-top-color: var(--fg2);
  border-radius: 50%;
  animation: dm-spin 0.8s linear infinite;
}
@keyframes dm-spin {
  to {
    transform: rotate(360deg);
  }
}
.dm-ladezeile {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* ------------------------------------------------------------ Meldungen */

.dm-fehler {
  margin: var(--sp-3) 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--bad);
}

.dm-erfolg {
  margin: var(--sp-3) 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ok);
}

.dm-fussnote--warnung {
  color: var(--warn);
}

/* Ergebniszeile des Historien-Imports - eine Stufe kräftiger als die
   .dm-fussnote darunter, weil sie die eigentliche Antwort auf den Vorgang
   ist und nicht dessen Kleingedrucktes. */
.dm-importergebnis {
  margin: var(--sp-3) 0 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--fg);
  text-wrap: pretty;
}

/* --------------------------------------------------------- Listen, Text */

.dm-liste {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
}

.dm-liste li {
  padding-left: 14px;
  position: relative;
}

.dm-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg3);
}/* 170px hoch wie BV_H im Panel — 120px ließen die Kurve sichtbar flacher
   wirken als dort. */
.dm-diagramm {
  width: 100%;
  height: 170px;
  margin: 14px 0 0;
  display: block;
  touch-action: none;
}

.dm-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* Ausklappbares Korrekturfeld (Anzugsmoment/Reifenkilometer) - deckungsgleich
   mit dem entsprechenden Block im Panel (margin-top:14-18px, Trennlinie
   darüber). */
.dm-bearbeiten-block {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* Reifen-Kachel: Kopfzeile aus Überschrift+km links, Radfoto rechts, beide
   oben bündig - deckungsgleich mit .radkopf-row/.radkopf/.tile-headline im
   Panel. */
.dm-radkopf-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
}
.dm-radkopf {
  display: flex;
  flex-direction: column;
}
.dm-tile-headline {
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--fg);
  display: block;
}
/* Der Kilometerstand des Radsatzes ist eine Kennzahl und traegt deshalb die
   Zahlenschrift (.ads-fig, im Panel .fig mit font-size:32px) - er stand hier
   bisher in der normalen Textschrift und Groesse. */
.dm-reifenzeile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 32px;
}
.dm-reifenzeile .ads-icon-button {
  width: 24px;
  height: 24px;
  color: var(--fg3);
}
.dm-reifenzeile .ads-icon-button svg {
  width: 16px;
  height: 16px;
}
.dm-radfoto .ads-bildbox {
  width: 96px;
  height: 96px;
  aspect-ratio: 1 / 1;
}

/* Kompakte Pille (Montiert) statt voller Breite - deckungsgleich mit
   .montiert/.montiert.on im Panel. */
.dm-montiert-reihe {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-4);
}
.dm-montiert {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  letter-spacing: normal;
  color: var(--fg2);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 7px 13px;
  cursor: pointer;
}
.dm-montiert::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 0;
  right: 0;
}
.dm-montiert:active {
  transform: scale(0.96);
}
.dm-montiert--an {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--canvas);
}
.dm-archivbtn {
  background: var(--tile-2);
  color: var(--fg2);
}
.dm-archivbtn:hover,
.dm-archivbtn:active {
  color: var(--fg);
}/* Bleibt beim Scrollen unten stehen, damit ungespeicherte Aenderungen nicht
   aus dem Blick geraten. */
.dm-speicherleiste {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  background: var(--canvas);
  border-top: 1px solid var(--line);
}

.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 {
  /* 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;
}