/*
 * Screen-übergreifende Bausteine: Eingabefelder, Hinweisleiste,
 * Ersteinrichtung, Leerzustände, Ladeanzeige.
 */

/* -------------------------------------------------------- Eingabefelder */

.dm-eingabe,
.dm-auswahl {
  font: inherit;
  font-weight: 300;
  font-size: 16px;
  color: var(--fg);
  background: none;
  border: 0;
  text-align: right;
  outline: none;
  min-width: 120px;
  max-width: 60%;
  padding: 0;
}

.dm-eingabe::placeholder {
  color: var(--fg3);
}

/* Die 16px oben sind nicht Geschmack, sondern Pflicht: unterhalb davon zoomt
   iOS beim Antippen eines Eingabefelds die ganze Seite heran, danach lässt
   sich die Ansicht verschieben - in einer nativen Hülle wirkt das wie ein
   Fehler (Nutzerbefund 2026-08-29, Willkommensbildschirm).
   Sie kamen bisher nie an: @audi-dash/ui setzt ".ads-feld input" auf 13.5px,
   und dieser Selektor ist spezifischer (Klasse + Typ) als das bloße
   ".dm-eingabe" - er gewinnt also, egal in welcher Reihenfolge geladen wird.
   Deshalb hier dieselbe Angabe noch einmal, spezifisch genug um zu greifen.
   @audi-dash/ui bleibt unangetastet, wie schon beim type=date-Fall unten. */
.ads-feld input.dm-eingabe,
.ads-feld select.dm-auswahl {
  font-size: 16px;
}

/* type="date": ohne appearance-Reset behält Safari/WKWebView (die iOS-Hülle
   dieser App) sein eigenes, stark abgerundetes natives Eingabe-Chrome statt
   der Box-Optik aus @audi-dash/ui's Feld - beim Nutzer sichtbar als
   "gestreckter Kreis statt Box" (Reifen.tsx, Wechseltermin). @audi-dash/ui
   selbst bleibt unangetastet (kein appearance-Reset dort, andere Felder
   zeigen den Fehler nicht) - der Reset sitzt hier, spezifisch für type=date,
   höhere Selektor-Spezifität als das geteilte ".ads-feld input" schlägt
   dessen feste min-width:132px, die hier breiter ist als "27.08.2026"
   braucht. */
input[type="date"].dm-eingabe {
  -webkit-appearance: none;
  appearance: none;
  /* Kein width:fit-content mehr. Das stammte aus der Zeit, als .ads-feld input
     eine feste min-width von 132px hatte - die ist beim Paritaetsabgleich auf
     min-width:0 umgestellt worden, seither zwang fit-content das Feld in eine
     Breite, die je Datum und Stelle anders ausfiel. Jetzt bemisst es sich wie
     jedes andere Eingabefeld (flex:0 1 auto aus @audi-dash/ui), genau wie
     .feld input im Panel. */
  text-align: right;
}

/* Eine Zeile aus einer bearbeitbaren Liste (z. B. Selbstbeteiligung im
   Vertrag) - zwei Eingaben plus Löschen-Knopf in einer Reihe, deckungsgleich
   mit .feld/.zeile-loeschen im Panel (audi-dashboard.css). */
.dm-selbst-zeile {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.dm-zeile-loeschen {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--fg3);
  font-size: 18px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.dm-zeile-loeschen::before {
  content: "";
  position: absolute;
  inset: -11px;
}

.dm-zeile-loeschen:active {
  color: var(--bad);
}

.dm-auswahl {
  text-align: right;
  appearance: none;
  cursor: pointer;
}

.dm-auswahl option {
  color: var(--fg);
  background: var(--tile);
}

/* `.notiz` im Panel: --ios-fill statt --tile-2, 12px Radius, 14px Abstand
   nach oben, Zeilenhöhe 1,55 und normaler Schnitt. */
.dm-notiz {
  font: inherit;
  font-size: 16px;
  color: var(--fg);
  background: var(--ios-fill);
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 14px;
  width: 100%;
  min-height: 88px;
  line-height: 1.55;
  resize: vertical;
  outline: none;
}

/* --------------------------------------------------------- Hinweisleiste */

.dm-hinweis {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px var(--sp-5);
  padding-top: calc(env(safe-area-inset-top, 0px) + 9px);
  font-size: 12.5px;
  font-weight: 300;
  color: var(--fg);
  background: var(--tile-2);
  border-bottom: 1px solid var(--line);
}

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

.dm-hinweis svg {
  flex: none;
}

/* -------------------------------------------------------- Ersteinrichtung */

.dm-einrichtung {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow-y: auto;
}

.dm-einrichtung__karte {
  width: 100%;
  max-width: 420px;
}

.dm-einrichtung__titel {
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 10px 0 12px;
}

.dm-einrichtung__text {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0 0 22px;
  text-wrap: pretty;
}

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

.dm-einrichtung__knoepfe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--sp-4);
}

.dm-einrichtung__hinweis {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--fg3);
  margin: 18px 0 0;
}

/* ------------------------------------------------- Leer- und Ladezustände */

/* `.leer` im Panel: linksbündig und knapp gesetzt (gap 8px, padding 4px 0 2px),
   Titel 16px/400 in --fg, Text 13,5px in --fg2. Hier war der Leerzustand
   zentriert, mit 44px Polster und dünnerem Schnitt - deutlich mehr Fläche als
   im Panel. */
.dm-leer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 4px 0 2px;
  color: var(--fg2);
}

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

.dm-leer__text {
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

.dm-laden {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 44px 24px;
  color: var(--fg2);
  font-size: 13px;
  font-weight: 300;
}

/* ------------------------------------------------------------ Übersicht */

/* Deckungsgleich mit .szene.bleed im Panel: randlos, keine Kartenfläche -
   Fahrzeugbild und Name/Kennzeichen sitzen direkt auf dem Seitenhintergrund,
   nicht in einer grauen Karte. War hier bis 2026-08-30 fälschlich als
   Kachel mit Hintergrund gebaut (Parität-Audit). */
/* Randloses Fahrzeugbild wie im Panel (`.szene.bleed{margin:-10px -20px 0;
   padding:0 0 10px}` plus `.szene.bleed .carbox{padding:0 8px}` und der
   Verlauf nach unten in die Fläche). Hier war das Bild bisher auf die
   Inhaltsbreite eingerückt und in eine abgerundete Kachel geschnitten -
   im Panel läuft es über die volle Bildschirmbreite und blendet nach unten
   aus. */
.dm-szene {
  position: relative;
  margin: -10px calc(-1 * var(--seitenrand)) 0;
  padding: 0 8px 10px;
}

/* Die drei oberen Kacheln der Übersicht tragen im Panel eigene Abstände
   (20/22/22 statt der 14 aller anderen). */
.dm-kopfblock {
  margin-bottom: 20px;
}

.dm-tankkachel,
.dm-servicekachel {
  margin-bottom: 22px;
}

.dm-szene::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* 26/96 statt 42/78: der Verlauf soll die harte Bildkante ausblenden,
     nicht das Fahrzeug. Mit 42% Hoehe und Vollton ab 78% war das untere
     Drittel des Fotos praktisch einfarbig - Raeder und Schweller lagen
     darunter (gemeldet vom Eigentuemer, 2026-08-31). */
  height: 26%;
  background: linear-gradient(to bottom, transparent, var(--canvas) 96%);
  pointer-events: none;
  z-index: 1;
}

/* Bodenschatten unter dem Fahrzeug (`.szene.strasse::after` /
   `.szene.winter::after` im Panel, abschaltbar über den Schalter „Boden" in
   den Einstellungen). */
.dm-szene--strasse::after,
.dm-szene--winter::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 6px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--shade), transparent 70%);
  pointer-events: none;
}

.dm-szene--winter::after {
  background: radial-gradient(ellipse at center, rgba(150, 190, 255, .16), transparent 70%);
}

/* Panel: .carbox ~120px, .szene ~130px hoch - ein schmales, breites Band,
   nicht das 4:3-Seitenverhältnis, das ImagePlaceholder sonst für Galerien
   verwendet (dort korrekt, hier war es das nie - "carfix klein" im Panel ist
   16:8). Scoped auf die Übersicht-Szene, damit andere ImagePlaceholder-
   Stellen (Mein Audi, Reifen, ...) ihre eigene, richtige Größe behalten. */
.dm-szene .ads-bildbox {
  aspect-ratio: 16 / 8;
}

/* Ohne Foto bleibt die Fläche flach und läuft nicht randlos: sonst stünden
   172px leerer Platzhalter vor der Reichweite, der wichtigsten Zahl der
   Seite (`.bildbox.bild-fehlt.carfix.klein{height:120px}` und
   `.szene.bleed:has(.bild-fehlt)` im Panel). */
/* Der Platzhalter belegt denselben Kasten wie ein echtes Foto (16:8). Er war
   zwischenzeitlich auf 120 und dann 72px gestaucht, um die Reichweite
   hoeher zu ruecken - auf Ansage des Besitzers steht er wieder in voller
   Groesse, weil ein Streifen nicht erkennen laesst, was dort hingehoert. */
.dm-szene .ads-bildbox:has(.ads-platzhalter) {
  aspect-ratio: 16 / 8;
  height: auto;
}

.dm-galerie-wechsel .ads-bildbox:has(.ads-platzhalter) {
  aspect-ratio: auto;
  height: 132px;
}

.dm-szene:has(.ads-platzhalter) {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.dm-szene:has(.ads-platzhalter)::before {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.dm-bildklick__flaeche {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.dm-bildmenu-fang {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.dm-bildmenu {
  position: absolute;
  z-index: 1001;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 14px;
  padding: var(--sp-2);
  background: rgba(40, 44, 52, .92);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}

[data-theme="tag"] .dm-bildmenu {
  background: rgba(250, 250, 252, .92);
}

.dm-bildmenu--rad {
  bottom: auto;
  top: 90px;
  left: 22px;
  transform: none;
}

.dm-bildmenu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  font-family: inherit;
  font-size: 16px;
  padding: 13px 16px;
  min-height: 46px;
  border-radius: 10px;
  cursor: pointer;
}

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

.dm-bildmenu button:active {
  background: var(--shade);
}

.dm-bildmenu__loeschen {
  color: var(--bad);
}

/* Name des Autohauses: 15px in --fg, wie im Panel. */
.dm-autohaus__name {
  font-size: 15px;
  margin-top: var(--sp-3);
}

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

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

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

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

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

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

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

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

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

/* `.quad` im Panel: vier Werte nebeneinander, Zahl im Wide-Schnitt. */
/* Fuenf Spalten (Jahr/Monat/Woche/Tag/Absolut) passen auf einem Telefon nicht
   nebeneinander: bei rund 300px Innenbreite blieben je 51px, und "209.177"
   braucht bei 16px Audi Type Wide etwa 60. auto-fit bricht deshalb um - auf dem
   Telefon drei plus zwei, auf einem breiten Bildschirm alle fuenf in einer
   Reihe. Deckungsgleich mit .quad im Panel. */
.dm-quad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

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

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

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

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

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

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

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

.dm-navikachel__wert {
  margin-top: var(--sp-1);
  font-size: 15px;
  font-weight: 300;
  color: var(--fg);
}

/* "Letzte Fahrt"/"Letzte Tankung" auf der Übersicht - deckungsgleich mit
   .leaf .v/.leaf .v small im Panel (15px/400/var(--fg2), Zusatzzeile
   12.5px/var(--fg3), KEINE Wide-Schrift/Hero-Zahl). War hier 20px/300 ohne
   Farbangabe - eine erfundene "große Zahl"-Behandlung, die dieser Kachel im
   Panel nie zustand (Parität-Audit 2026-08-30). Nur hier verwendet (die
   anderen NaviKachel-Aufrufe in MeinAudi.tsx/Service.tsx/Versicherung.tsx
   nutzen .dm-navikachel__wert direkt, unangetastet). */
.dm-navikachel__zahl {
  font-size: 15px;
  font-weight: 400;
  color: var(--fg2);
}
.dm-navikachel__wert .dm-navikachel__zahl + small {
  font-size: 12.5px;
}

.dm-navikachel__wert small,
.dm-wertzeile small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--fg3);
}

.dm-aktionen {
  display: flex;
  justify-content: center;
  padding: var(--sp-2) 0 var(--sp-4);
}

.dm-textknopf {
  border: 0;
  background: transparent;
  color: var(--fg2);
  font-size: 13px;
  font-weight: 300;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
}

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

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

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

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

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

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

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

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

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

/* Wechselbild "Mein Audi" - deckungsgleich mit carImg("galerie")/.dots im
   Panel: ein antippbares Bild, das zum nächsten Galerieplatz weiterschaltet,
   plus Punktanzeige darunter. */
.dm-galerie-wechsel {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
/* 16:9, wie carImg("galerie") im Panel ("carfix", nicht "carfix klein" -
   das 16:8-Maß gilt nur für die Übersicht-Szene). */
.dm-galerie-wechsel .ads-bildbox {
  aspect-ratio: 16 / 9;
}
.dm-galerie-punkte {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}
.dm-galerie-punkte span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}
.dm-galerie-punkte span.an {
  background: var(--red);
}

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

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

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

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

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

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

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

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

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

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

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

/* Zuschnitt von `.leaf` im Panel (audi-dashboard.css + iOS-Auflage, live
   gemessen): 12px oben/unten, 40px links (Platz der Wischspalte), min-height
   56px, Trennlinie unten, Beschriftung 16px in --fg mit 12,5px-Zusatz in
   --fg3, Wert 15px in --fg2 mit demselben Zusatz. */
.dm-blatt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: 12px 0 12px 40px;
  min-height: 56px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font-family: inherit;
  text-align: left;
  color: inherit;
}

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

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

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

/* `flex: 0 1 auto` wie `.leaf .k` im Panel — die Beschriftung nimmt ihre
   natürliche Breite und schrumpft erst, wenn es sonst nicht passt. Mit
   `1 1 auto` (dem Wert, den das Panel nur für die Zuletzt-Kachel setzt)
   brach „Fahrt ohne Ortsangabe" hier auf zwei Zeilen um, obwohl es im Panel
   einzeilig steht. */
.dm-blatt__k {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--fg);
}

.dm-blatt__v {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
  font-size: 15px;
  color: var(--fg2);
}

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

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

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

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

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

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

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

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

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

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

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

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

.dm-detail__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-3);
  flex-wrap: wrap;
}

.dm-detail__zahl {
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Einzelfahrt/Einzelbeleg: das Panel zeichnet die Distanz- bzw. Liter-Zahl in
   vTrip()/dem Tankvorgang-Detail eigens bei 52px (style="font-size:52px"),
   größer als die übrigen Detailseiten mit ihrer gemeinsamen 40px-.fig - kein
   Versehen, sondern die Hauptzahl der jeweiligen Seite. */
.dm-detail__zahl--gross {
  font-size: 52px;
}

.dm-detail__einheit {
  font-size: 15px;
  color: var(--fg2);
  margin-left: 6px;
}

.dm-detail__marken {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

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

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

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

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

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

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

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

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

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

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

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

.dm-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg3);
}

.dm-liste__serie {
  color: var(--fg2);
}

/* 170px hoch wie BV_H im Panel — 120px ließen die Kurve sichtbar flacher
   wirken als dort. */
.dm-diagramm {
  width: 100%;
  height: 170px;
  margin: 14px 0 0;
  display: block;
  touch-action: none;
}

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

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

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

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

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

.dm-waehlen__knopf {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 300;
  color: var(--fg);
  text-decoration: none;
}

.dm-waehlen__knopf:hover {
  background: var(--shade);
}

/* Bleibt beim Scrollen unten stehen, damit ungespeicherte Aenderungen nicht
   aus dem Blick geraten. */
.dm-speicherleiste {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  background: var(--canvas);
  border-top: 1px solid var(--line);
}

.dm-szene__zusatz {
  min-width: 0;
}

/* Der Zusatz neben dem Typenschild darf umbrechen — abgeschnittener Text mit
   Auslassungspunkten sieht nach Fehler aus, ein Umbruch nicht. Größe/Farbe
   deckungsgleich mit ".badge .zusatz" im Panel (13px, var(--fg2), nicht
   kursiv) - war hier 19px, geerbt von der (falschen) "ads-title"-Klasse am
   Umschließer (Parität-Audit 2026-08-30). */
.dm-szene__zusatz {
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 13px;
  line-height: normal;
  color: var(--fg2);
}

/* Die Galerie richtet sich nach der festen Kachelbreite der Bibliothek (78px),
   damit die Kacheln nicht auseinandergezogen werden und ihre Beschriftung
   innerhalb des Rahmens bleibt. */
.dm-galerie {
  grid-template-columns: repeat(auto-fill, 78px);
  justify-content: space-between;
  gap: var(--sp-3);
}

/* ---------------------------------------------------------------- Standort
   Live-GPS-Position des Fahrzeugs — deckungsgleich mit .standort-kachel/
   .standort-vollbild/.standortmenu im Panel (audi-dashboard.css). War bis
   2026-08-29 komplett unportiert (Parität-Audit). */
.dm-standort-kachelbtn {
  display: block;
  width: 100%;
  position: relative;
  border: none;
  padding: 0;
  /* 14px wie jede andere Kachel im Panel (.tile). */
  margin: 0 0 14px;
  background: none;
  cursor: pointer;
  border-radius: var(--r-tile);
  overflow: hidden;
}
.dm-standort-vorschau {
  width: 100%;
  height: 190px;
  /* Im Panel deklariert .standort-vorschau zwar var(--tile), gewinnt aber
     nicht: Leaflet setzt der Karte selbst die Klasse .leaflet-container und
     sein Blatt liegt dort hinter den App-Blaettern. Sichtbar sind also
     tatsaechlich Leaflets eigene #ddd - waehrend die Kacheln laden und in
     Luecken. Hier steht derselbe Wert ausdruecklich, damit die Reihenfolge
     der gebuendelten Blaetter nichts daran aendert. */
  background: #ddd;
}
.dm-standort-leer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--fg3);
  text-align: center;
  padding: 0 30px;
  background: var(--tile);
}

.dm-fahrzeug-pin-wrap,
.dm-user-pin-wrap {
  background: none;
  border: none;
}
.dm-fahrzeug-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.dm-user-pin {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0a84ff;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.dm-user-pin::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: rgba(10, 132, 255, 0.18);
  animation: dm-user-pulse 2.4s ease-out infinite;
}
@keyframes dm-user-pulse {
  0% {
    transform: scale(0.4);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Füllt die verfügbare Höhe der Seite, statt bei 640px zu kappen und darunter
   leeren, mit dem geschlossenen Blatt verwechselbaren Seitenhintergrund
   stehen zu lassen (Nutzerbericht "Standort Slide Up ist leer" - der Inhalt
   fehlte nicht, er saß nur unterhalb der Kappungsgrenze in leerem Weiß).
   `.dm-inhalt > *{flex:none}` (rahmen.css) gilt für jede andere Seite zu
   Recht - hier gezielt aufgehoben, die einzige Seite ohne weiteren Inhalt
   unter einer einzelnen großen Fläche. */
.dm-inhalt > .dm-standort-vollbild {
  flex: 1 1 auto;
}
.dm-standort-vollbild {
  position: relative;
  min-height: 400px;
  border-radius: var(--r-tile);
  overflow: hidden;
  margin: 0 calc(-1 * var(--seitenrand));
}
.dm-standort-karte {
  width: 100%;
  height: 100%;
}

.dm-kartensteuerung {
  position: absolute;
  z-index: 400;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dm-kartensteuerung button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 20, 26, 0.84);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  padding: 0;
}
[data-theme="tag"] .dm-kartensteuerung button {
  background: rgba(255, 255, 255, 0.92);
  color: #101418;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.dm-kartensteuerung button:active {
  transform: scale(0.94);
}

.dm-standortmenu {
  position: absolute;
  z-index: 410;
  left: 0;
  right: 0;
  bottom: 0;
  --dm-standort-peek: 96px;
  /* Deckend, nicht --canvas: unter dem Blatt liegt die Karte, und im
     Nachtmodus ist --canvas nicht deckend genug. Das Panel nimmt hier
     ebenfalls den deckenden Wert (.standortmenu in audi-dashboard.css). */
  background: var(--tile-deckend, var(--canvas));
  border-radius: var(--r-tile) var(--r-tile) 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
  /* Kein env(safe-area-inset-bottom) mehr: das Blatt liegt nicht am unteren
     Bildschirmrand, sondern ueber der Tableiste - und die haelt den Bereich
     des Home-Indikators bereits frei. Der Einzug wurde dadurch doppelt
     gezaehlt, das Blatt war auf dem Geraet rund 16px hoeher als noetig und
     schob sich entsprechend weiter hoch. Am Rechner faellt das nicht auf,
     dort ist der Einzug 0. */
  padding: 0 20px 34px;
  transform: translateY(calc(100% - var(--dm-standort-peek)));
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Aufgezogen bleibt unter den Knoepfen ein fester Abstand stehen, statt dass
   sie buendig mit der Menueleiste abschliessen.

   Vorher stand hier min-height:50% - Apples "medium detent". Gemessen ergab
   das 89px (Panel) bzw. 76px (App) Luft unter dem letzten Knopf, und das war
   sichtbar zu viel: das Blatt zog ueber die Haelfte des Bildschirms auf,
   obwohl sein Inhalt dort laengst zu Ende war. Eine Raste ist nur dann
   richtig, wenn zwischen ihr und der Inhaltshoehe kein grosses Loch klafft.

   Jetzt bestimmt der Inhalt die Hoehe, und die 34px Fussabstand halten die
   Knoepfe von der Leiste frei - hergeleitet aus der Beanstandung, nicht
   geraten: 18px waren zu wenig, 76-89px zu viel. */
.dm-standortmenu--offen {
  transform: translateY(0);
}
.dm-standortmenu__griffzone {
  padding: 10px 0 14px;
  position: relative;
}
.dm-standortmenu__griff {
  position: relative;
  display: block;
  width: 36px;
  height: 4px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background: var(--line-strong);
  margin: 0 auto;
  cursor: pointer;
}
/* --ios-fill statt --tile: das Blatt selbst ist deckend, im Tagmodus also
   weiss - und --tile ist dort ebenfalls #FFFFFF. Der Knopf war damit weiss
   auf weiss und als Knopf nicht zu erkennen. Nachts faellt es nicht auf,
   weil --tile dort ein Schleier ueber dunklem Grund ist. --ios-fill ist in
   diesem Projekt ohnehin das Zeichen fuer "das hier laesst sich bedienen"
   und traegt in beiden Themes. */
.dm-standortmenu__schliessen {
  position: absolute;
  top: 14px;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ios-fill);
  border: none;
  color: var(--fg2);
  cursor: pointer;
  padding: 0;
}
.dm-standortmenu__kopf {
  margin-top: 8px;
  padding-right: 44px;
}
.dm-standortmenu__name {
  font-size: 17px;
  color: var(--fg);
}
.dm-standortmenu__distanz {
  font-size: 12.5px;
  color: var(--fg3);
  margin-top: 4px;
}
.dm-standortmenu__adresse {
  font-size: 13px;
  color: var(--fg2);
  margin-top: 20px;
}
.dm-standortmenu__status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--fg2);
}
.dm-standortmenu__status svg {
  color: var(--fg3);
  flex: none;
}
.dm-standortmenu__punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.dm-standortmenu__werte {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--fg2);
}
.dm-standortmenu__werte svg {
  color: var(--fg3);
  flex: none;
}
.dm-standortmenu__aktionen {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-bottom: 4px;
}
.dm-standort-pille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--fg);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.dm-standort-pille--primaer {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--canvas);
}
.dm-standort-pille:active {
  transform: scale(0.97);
}
.dm-standort-pille:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Erläuternder Absatz unter einer Kachelüberschrift. Das Panel setzt ihn als
   `.label` mit einer Inline-Auflage (`color:var(--fg2);letter-spacing:0;
   text-transform:none;font-size:12.5px;line-height:1.6`) - unter anderem bei
   Fahrzeugprofil, Backup und Integration-Update.

   Bewusst eine eigene Klasse statt einer Änderung an `.dm-fussnote`: die wird
   an 35 Stellen in 13 Dateien für ganz unterschiedliche Kleintexte benutzt
   (im Paritätsaudit zweimal als offener Punkt notiert). Wer die Panel-Optik
   braucht, nimmt diese Klasse; alles andere bleibt unangetastet. */
.dm-erklaerung {
  display: block;
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg2);
}

/* Karte auf der Einzelfahrt/dem Einzelbeleg: das Panel setzt sie als eigene
   Kachel ohne Innenabstand (`.mapbox`, 210px hoch, abgerundet). */
.dm-kartenkachel {
  padding: 0;
  overflow: hidden;
}

/* Die Distanz-Kachel der Einzelfahrt trägt im Panel eigene Abstände
   (`style="margin:18px 0 14px"`). */
.dm-distanzkachel {
  margin: 18px 0 14px;
}

/* `.marke` im Panel: Bildmarke und Text nebeneinander, z. B. vor
   „SmartDeal-Ersparnis" auf dem Einzelbeleg. */
.dm-marke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dm-marke img {
  /* Auf Zeilenhoehe, siehe .dm-markenlogo weiter unten. */
  height: 16px;
  width: auto;
}

/* Leere Kartenfläche, solange die Tankstellenadresse noch aufgelöst wird.
   Maße wie `.mapbox` im Panel. */
.dm-kartenplatz {
  height: 210px;
  background: var(--tile-deckend, var(--tile-2));
}

/* Knopfzeile der SmartDeal-Abfrage - Abbrechen links, Bestaetigen rechts,
   wie die .seg-Zeile im sdpopup des Panels. */
.dm-sd-knoepfe {
  display: flex;
  gap: var(--sp-2);
  margin-top: 14px;
}
.dm-sd-knoepfe > * {
  flex: 1;
}

/* --------------------------------------------------- Beleg-Fenster
   Deckungsgleich mit .beleg-drop in audi-dashboard.css: gestrichelter Rahmen,
   14px Radius, 28px Innenabstand, mittig, 15px kraeftige Zeile ueber 12.5px
   gedaempfter. `--darueber` ist die Rueckmeldung beim Ziehen (nur am Rechner
   erreichbar, am Telefon gibt es keine Ziehgeste fuer Dateien). */
.dm-beleg-drop {
  margin-top: var(--sp-3);
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  padding: 28px var(--sp-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dm-beleg-drop strong {
  font-size: 15px;
  color: var(--fg);
}
.dm-beleg-drop span {
  font-size: 12.5px;
  color: var(--fg2);
}
.dm-beleg-drop--darueber {
  border-color: var(--fg);
  border-style: solid;
  background: var(--shade);
}

.dm-beleg-knoepfe {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
/* Solldruck: vier Zeichen ("2,40"), nicht die volle Feldbreite.
   Deckungsgleich mit .druckfeld in audi-dashboard.css (58px). Die Klasse
   stand hier schon im Markup, hatte aber keine Regel - die Felder nahmen
   deshalb die ganze Zeile ein. */
.ads-feld input.druckfeld {
  width: 58px;
  min-width: 0;
  flex: none;
  text-align: right;
}

/* Markenlogo (Shell u. a.) auf die Hoehe der Feldbeschriftung daneben -
   16px, siehe .ads-feld label. Mit 14px wirkte es neben "SmartDeal aktiv"
   zu klein (gemeldet vom Eigentuemer, 2026-08-31). */
.dm-markenlogo {
  height: 16px;
  width: auto;
  vertical-align: middle;
}