@font-face{font-family:"Audi Type";src:url(data:font/woff2;base64,[encoded data, 30492 characters]) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Audi Type Wide";src:url(data:font/woff2;base64,[encoded data, 20432 characters]) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Audi Type Extended";src:url(data:font/woff2;base64,[encoded data, 20664 characters]) format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* audi-dashboard.css — Stil des Panels, aufgebaut auf den Tokens und
   Komponenten des Design-Systems AudiDashUI (_ds_bundle.css). Klassennamen
   wie im Prototyp/Panel (unpräfixiert), Werte 1:1 aus dem Design-System. */

:host {
  --red: #F50537;
  --r-tile: 20px;
  --r-pill: 999px;
  --r-func: 8px;
  --rahmen-hg: #111;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px;
  --canvas: #161b23;
  --tile: #1f2733;
  --tile-2: #2a3341;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.20);
  --fg: #FFFFFF;
  --fg2: #9aa1ad;
  /* A2: von #657081 (3,0:1 auf --tile) auf 4,6:1 angehoben. Unterhalb von
     12 px wird diese Farbe nicht mehr verwendet. */
  --fg3: #8a94a3;
  --ok: #15da15;
  --warn: #ffaa00;
  --bad: #fd2c4e;
  --shade: rgba(255,255,255,.05);
  --font-stack: "Audi Type", Helvetica, Arial, sans-serif;
  /* Bugfix: in der echten HA-Einbettung liefert partial-panel-resolver
     (display:inline, height:auto) keine definierte Höhe - eine
     height:100%-Kette von hier nach oben rechnet also gegen eine
     Auto-Box und kollabiert auf die Inhaltshöhe (nur Topbar+Tabbar
     sichtbar, main#view ohne Fläche zum Scrollen). Deshalb wie im
     ursprünglichen Prototyp direkt an der Viewport-Höhe verankert,
     unabhängig von der Elternkette - und zentriert wie eine
     Telefon-Karte, statt randlos zu füllen. */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
:host([data-theme=tag]) {
  --canvas: #FFFFFF;
  --tile: #f2f2f2;
  --tile-2: #e5e5e5;
  --line: rgba(0,0,0,.10);
  --line-strong: rgba(0,0,0,.22);
  --fg: #000000;
  --fg2: #4c4c4c;
  --fg3: #666666;
  --ok: #0DA20D;
  --warn: #ffaa00;
  --bad: #eb0d3f;
  --shade: rgba(0,0,0,.04);
}

* { box-sizing: border-box; }

/* Sichtbarer Tastatur-Fokus. Bis hierher gab es .feld input:focus als einzige
   Fokus-Regel im ganzen Blatt - alle Knöpfe, Kacheln und Tabs waren zwar
   fokussierbar, aber ohne jede sichtbare Markierung. Auf dem Telefon fällt das
   nicht auf, per Bluetooth-Tastatur (iPadOS/Desktop über Tailscale) oder mit
   iOS-Vollzugriff per Tastatur ist die App dadurch praktisch unbedienbar.
   :focus-visible statt :focus, damit Maus- und Tipp-Bedienung unverändert
   ohne Rahmen bleibt - der Browser entscheidet, was "echte" Tastaturnavigation
   ist. */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Zwischen-Wrapper, den _aufbauen() in den Shadow Root haengt - bekommt hier
   die einzige "echte" (viewport-verankerte) Höhe der ganzen Kette; .phone
   darunter kann sich dann gefahrlos mit height:100% darauf beziehen. */
:host > div {
  width: 100%;
  max-width: 412px;
  height: min(880px, calc(100vh - 24px));
  height: min(880px, calc(100dvh - 24px));
  min-height: 0;
  /* Verhindert, dass eine Zieh-Geste, die main#view unten nach oben hin
     verlaesst, an die dahinterliegende HA-Seite weitergereicht wird - sonst
     kann der Browser selbst ein natives Overscroll/Pull-to-Refresh starten
     und der eigene Ziehen-zum-Aktualisieren-Indikator bekommt die Geste nie
     zu Ende. */
  overscroll-behavior: none;
}

/* ------------------------------------------------------------- Gerüst */
.phone {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  /* B4: Bezugsrahmen für Action Sheet und Popups. */
  position: relative;
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--font-stack);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  /* B2: kein graues Safari-Rechteck beim Tippen - Rückmeldung kommt aus den
     :active-Regeln unten. */
  -webkit-tap-highlight-color: transparent;
}
.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  /* B1: oben Platz für Statusbalken/Dynamic Island. */
  padding: max(22px, calc(env(safe-area-inset-top) + 10px)) 20px 14px;
  flex: 0 0 auto;
  background: var(--canvas);
}
.back {
  /* B6: 44 px Trefferfläche. */
  width: 44px; height: 44px;
  margin-left: -5px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: none;
  color: var(--fg3);
  cursor: pointer;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.back.on { opacity: 1; pointer-events: auto; }
.back:hover { background: var(--tile-2); color: var(--fg); }
.back:active { background: var(--tile-2); color: var(--fg); transform: scale(.92); }
.head { flex: 1; min-width: 0; }
.eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg3);
  min-height: 12px;
}
.title {
  font-size: 23px;
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sync {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--fg3);
  white-space: nowrap;
}
.themebtn, .rings {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--fg3);
  cursor: pointer; padding: 0; flex: 0 0 auto;
}
.themebtn { width: 44px; height: 44px; border-radius: 50%; }
/* A6: Die Topbar-Taste ist entfallen - die Wahl liegt in den Einstellungen und
   folgt sonst der Systemeinstellung. display:inline-flex oben würde das
   hidden-Attribut sonst überstimmen. */
.themebtn[hidden] { display: none; }
.themebtn:hover { background: var(--tile-2); color: var(--fg); }
.themebtn:active { background: var(--tile-2); color: var(--fg); transform: scale(.92); }
.themebtn svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
/* Wie .themebtn (44px Trefferflaeche), aber ohne die Kontur-Stroke-Regel -
   fuer CI-Symbole (ciSVG()), deren Pfade ihr eigenes fill="currentColor"
   mitbringen (z. B. list-s im Kopf der Batteriespannungs-Kachel). */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: none; color: var(--fg3);
  cursor: pointer; padding: 0; flex: 0 0 auto;
}
.iconbtn:hover { background: var(--tile-2); color: var(--fg); }
.iconbtn:active { background: var(--tile-2); color: var(--fg); transform: scale(.92); }
/* D4 war urspruenglich: die Ringe sind Marke, kein Knopf. Seit die
   iOS-Auflage in Telefonbreite das Zahnrad ausblendet, sind sie dort aber der
   einzige Zugang zu den Einstellungen - und als reines div mit
   pointer-events:none war dieser Zugang fuer Tastatur und Sprachausgabe gar
   nicht erreichbar. Sie sind deshalb jetzt ein echter Knopf, in jeder Breite
   bedienbar. Auf grossen Bildschirmen gibt es damit zwei Wege in die
   Einstellungen (Ringe und Zahnrad) - unschaedlich, und der Zugang haengt
   nicht mehr davon ab, ob audi-dashboard-ios.css geladen wurde. */
/* Design-Audit 2026-08-13: in Telefonbreite ist dies der einzige Zugang zu
   den Einstellungen (siehe Kommentar oben), war mit 42px aber deutlich
   kleiner als jeder andere Symbol-Knopf in der Kopfzeile (.themebtn/
   .profilbtn/.back sind alle 44px) und lag damit unter der ueblichen
   44px-Mindestgroesse fuer Tippflaechen. */
.rings { width: 58px; height: 32px; color: var(--fg); }
.rings svg { width: 58px; height: auto; }

/* Der Markenklon in der Seitenleiste wird vom Skript unbedingt in die
   Menueleiste gehaengt; sichtbar macht ihn erst die iOS-Auflage ab 860px.
   Das Verstecken gehoert deshalb hierher: laedt die Auflage nicht (404,
   Cache), waere er sonst ein sechstes Element im fuenfspaltigen Raster und
   die Menueleiste zerfiele. */
.navmarke { display: none; }
.profilbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: var(--tile); color: var(--fg2);
  cursor: pointer; padding: 0; flex: 0 0 auto;
}
.profilbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.profilbtn:hover { color: var(--fg); }
.profilbtn:active { background: var(--tile-2); color: var(--fg); transform: scale(.94); }

.ptr {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--fg3);
  font-size: 12.5px;
  transition: height .2s;
  flex: 0 0 auto;
}
.ptr.spin svg { animation: drehen 1s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

main#view {
  /* Der seitliche Rand steht als Variable, weil randlose Elemente ihn per
     negativem Rand ausgleichen muessen (siehe .standort-vollbild). Wer das
     Padding aendert, ohne die Variable zu benutzen, verschiebt die randlosen
     Elemente unbemerkt. */
  --seitenrand: 20px;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px var(--seitenrand) 34px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Ohne das hier greift auf echten Touch-Geraeten oft das native
     Overscroll/Pull-to-Refresh des Browsers, sobald am oberen Rand weiter
     nach unten gezogen wird - das nimmt der eigenen "Ziehen zum
     Aktualisieren"-Geste (siehe ptrY0-Logik in ereignisseVerdrahten()) die
     Kontrolle weg, obwohl deren JS/CSS für sich genommen korrekt arbeitet. */
  overscroll-behavior-y: contain;
}
main#view::-webkit-scrollbar { width: 0; height: 0; }

#overlay:empty { display: none; }

.tabbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  flex: 0 0 auto;
  background: var(--canvas);
  /* B1: Luft über dem Home-Indikator. */
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}
/* B5: kein roter Oberkantenstrich (Desktop-Muster), sondern eine gefüllte
   Pille um das aktive Symbol - wie in der myAudi-App. */
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 0 10px;
  background: none; border: none;
  color: var(--fg3);
  font-family: inherit;
  cursor: pointer;
  transition: color .15s;
}
.tab.on { color: var(--fg); }
/* Die Pille ist ein eigenes Feld um das Symbol - so bleibt ihre Groesse
   unabhaengig vom Symbol und der Wechsel laeuft sauber ueber background. */
.tabpille {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 34px; border-radius: var(--r-pill);
  transition: background .18s;
}
.tab.on .tabpille { background: var(--tile-2); }
.tab svg {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s;
}
.tab svg.voll { fill: currentColor; stroke: none; }
.tab:active svg { transform: scale(.9); }
.tab span { font-size: 11px; letter-spacing: .01em; }
/* :not(.tabpille) - die Icon-Huelle ist selbst ein <span>, ein blosses
   ".tab span" hier hiess frueher auch der Pille (samt Icon) display:none.
   Ueberschrieben von derselben Regel in audi-dashboard-ios.css (dieselbe
   Spezifitaet, spaeter geladen), aber auch hier falsch und daher fixiert. */
.tabbar.ohne .tab span:not(.tabpille) { display: none; }
.tabbar.ohne .tab { padding: 14px 0 12px; }
.tabbar.ohne .tab svg { width: 26px; height: 26px; }

/* -------------------------------------------------------------- Kacheln */
.tile {
  background: var(--tile);
  border-radius: var(--r-tile);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  position: relative;
}
.tile.flat { background: none; padding: 0; }
button.tile, .tilebtn {
  display: block;
  width: 100%;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
button.tile:hover { background: var(--tile-2); }
button.tile:active, .tilebtn:active { background: var(--tile-2); transform: scale(.99); }
button.tile, .tilebtn { transition: background .15s, transform .1s; }
.go {
  position: absolute;
  top: var(--sp-5); right: var(--sp-5);
  width: 6px; height: 10px;
  color: var(--fg3);
  fill: none; stroke: currentColor; stroke-width: 1.4;
}
.zahnrad {
  position: absolute;
  top: 11px; right: 11px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: none; color: var(--fg3);
  cursor: pointer; padding: 0;
}
.zahnrad:hover { background: var(--tile-2); color: var(--fg); }
.zahnrad:active { background: var(--tile-2); color: var(--fg); transform: scale(.92); }
.zahnrad svg { width: 17px; height: 17px; }
/* Titelzeile nie unter dem Zahnrad/Chevron hindurchlaufen lassen */
.tile:has(> .zahnrad) > .label:first-child,
.tile:has(> .go) > .label:first-child { padding-right: 44px; }

/* C1: Abschnittstitel gemischt geschrieben, 14 px, ohne Sperrung - wie in der
   aktuellen myAudi-App. Versalien trägt nur noch .eyebrow über dem Seitentitel. */
.label {
  font-size: 14px;
  letter-spacing: normal;
  color: var(--fg2);
  display: block;
  line-height: 1.3;
}
/* HIG "Loading": statt reinem Text ein sichtbar laufender Indikator, solange
   DATEN_GELADEN false ist - hilft auch, "lädt noch" optisch von "hängt fest"
   zu unterscheiden (dieser Bildschirm hatte schon ein echtes Hänger-Problem). */
.lade-spinner {
  width: 16px; height: 16px; flex: none;
  border: 2px solid var(--line-strong);
  border-top-color: var(--fg2);
  border-radius: 50%;
  animation: lade-spin .8s linear infinite;
}
@keyframes lade-spin { to { transform: rotate(360deg); } }
/* Echte Überschrift innerhalb einer Kachel (z.B. "Sommerräder"/"Winterräder")
   statt des sonst üblichen kleinen, gedämpften .label-Abschnittstitels -
   selbe Typografie-Stufe wie .title (Seitentitel), nur etwas kleiner, weil
   sie innerhalb einer Kachel steht statt in der Kopfzeile. */
.tile-headline {
  font-size: 20px;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--fg);
  display: block;
}
/* Icon + Text statt reinem Fließtext-Label (z.B. Batterie-Symbol vor
   "Ruhespannung") - dieselbe Zeilen-Geometrie wie .sync in der Kopfzeile. */
.bv-skala-kopf { display: flex; align-items: center; gap: 6px; }

/* A4: Messwerte erben nie mehr das uppercase der Label-Klasse. */
.wert {
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--fg2);
}
.fig {
  font-family: "Audi Type Wide", var(--font-stack);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: .95;
  color: var(--fg);
}
.fig .unit {
  /* A3: relativ zur Zahl, aber nie unter der Lesbarkeitsgrenze - bei einer
     29-px-Zahl ergäbe .32em nur 9,3 px. */
  font-size: max(11px, .32em);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--fg2);
  margin-left: .32em;
}
.werte { font-size: 14px; color: var(--fg); display: block; }

.rows { margin: 0; }
.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.row dt { font-size: 13.5px; color: var(--fg2); line-height: 1.4; }
.row dd { margin: 0; font-size: 14.5px; color: var(--fg); text-align: right; }
.row dd small { display: block; font-size: 11.5px; color: var(--fg3); margin-top: 3px; }
.rows-fest dd { min-width: 120px; }
/* Fussnote unter einer Zeile, ueber die volle Kachelbreite statt in der
   rechten Spalte: dort blieben nur ~217px, in die eine Prognose wie
   "9.029 km, voraussichtlich am 12.04.2027" zwangslaeufig umbrach.
   :has() grenzt das Umbrechen auf genau die Zeilen ein, die eine Fussnote
   fuehren - alle anderen .row bleiben unveraendert einzeilig. */
.row:has(.row-fussnote) { flex-wrap: wrap; }
/* Sammelzeilen der Sicherheit-Ansicht (vSicherheit()): Kreis-Häkchen + Text
   + optionaler Chevron statt dt/dd. Erbt Abstand/Trennlinie von .row, ersetzt
   aber dessen space-between-Layout und setzt die Button-Vorgaben zurück, wenn
   die Zeile klickbar ist (Türen und Klappen). */
.sicherheitszeile {
  justify-content: flex-start;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}
button.sicherheitszeile { cursor: pointer; }
button.sicherheitszeile:active { background: var(--tile-2); }
.sicherheitsliste .sicherheitszeile:last-child { border-bottom: 0; }
.sicherheitszeile-text { flex: 1; font-size: 14.5px; color: var(--fg); }
.sicherheitszeile .chev { margin-left: auto; }
.row-fussnote {
  flex: 1 0 100%;
  text-align: left;
  font-size: 11.5px;
  color: var(--fg3);
  margin-top: 4px;
}

.leaf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  background: none; border: none;
  font-family: inherit; text-align: left;
  padding: 14px 0 14px 40px;
  min-height: 56px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  color: inherit;
}
.leaf .k { font-size: 14px; color: var(--fg); display: flex; flex-direction: column; gap: 3px; line-height: 1.35; }
.leaf .k small { font-size: 12px; color: var(--fg3); }
.leaf .v { font-size: 13px; color: var(--fg2); text-align: right; display: flex; flex-direction: column; flex: 0 0 auto; }
.leaf .v small { font-size: 12px; color: var(--fg3); }
.leaf { transition: background .15s; }
.leaf:active { background: var(--tile-2); }
.chev { width: 6px; height: 10px; color: var(--fg3); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* ------------------------------------------------------------- Status */
.status {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  background: none; border: none; padding: 16px 0 0;
  min-height: 44px;
  text-align: left; font-family: inherit; cursor: pointer;
  color: inherit;
}
.dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; background: var(--ok); display: inline-block; }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); }
/* Kreis-Häkchen statt einfarbigem Punkt - für die Sicherheit-Ansicht
   (vSicherheit()/vTuerenKlappen()), nach Nutzer-Vorlage: erfüllt/offen/
   unbekannt sofort am Symbol erkennbar, nicht nur an der Farbe. */
.statuskreis { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: var(--ok); display: inline-flex; align-items: center; justify-content: center; }
.statuskreis.warn { background: var(--warn); }
.statuskreis.bad { background: var(--bad); }
.status .t { font-size: 14px; color: var(--fg); }
.status { transition: opacity .15s; }
.status:active { opacity: .55; }

/* -------------------------------------------------------------- Übersicht */
.tankzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.pct { font-size: 15px; color: var(--fg2); padding-bottom: 6px; }
.balken { height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--fg); border-radius: var(--r-pill); }
/* Der Außenabstand sitzt am Raster, nicht an den Kacheln - sonst wird er im
   2×2-Raster (vHome) zum zusätzlichen internen Zeilenabstand und der Abstand
   innerhalb der Gruppe wäre größer als der zur nächsten. */
/* Übersicht: "Nächster Service" als tippbare Kennzahl, darunter der
   Kilometerstand als Wertezeile (siehe Kommentar in vHome()). Der Knopf sitzt
   INNERHALB einer normalen .tile - nicht die Kachel selbst ist der Knopf,
   sondern nur ihr oberer Teil, damit die Kilometerstand-Zeile erkennbar reine
   Anzeige bleibt. Der Chevron steht deshalb auf right:0 relativ zum Knopf und
   landet damit genau auf demselben Innenabstand wie ein normales .go in einer
   gepolsterten Kachel. */
.serviceblock {
  position: relative;
  display: block; width: 100%;
  border: 0; background: none; padding: 0;
  font-family: inherit; text-align: left; color: inherit; cursor: pointer;
}
.serviceblock > .go { top: 3px; right: 0; }
/* Rückmeldung beim Tippen: ein Hintergrundwechsel wie bei .tilebtn ginge hier
   nicht, der Knopf liegt ja schon auf der Kachelfläche. */
.serviceblock:active { opacity: .55; }
/* Beschriftung nie unter dem Chevron hindurchlaufen lassen */
.serviceblock > .label:first-child { padding-right: 24px; }
/* Serviceart-Icon links der Kennzahl statt des Wortes "bis zum/zur ...". */
.fig-zeile { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.fig-zeile svg { color: var(--fg2); flex: 0 0 auto; }
.servicezeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  border-top: 1px solid var(--line);
  margin-top: 14px; padding-top: 13px;
}

/* Anstehende Termine (vService): drei sichtbar getrennte Bloecke statt einer
   dt/dd-Liste - Apple HIG ("essential information... don't obscure it by
   crowding it with nonessential details") plus Audi-CI (Flaeche mit Haarlinien
   statt Karten, eigene Groessenklasse fuer Zahlen). Trennung ueber Abstand und
   eine Haarlinie zwischen den Bloecken, nicht ueber verschachtelte Kacheln.
   Jeder Block: Kopfzeile (Icon + Art-Name, optional ein Chip fuer einen
   vereinbarten Werkstatttermin), optionale Herstellervorgabe-Zeile, der Wert,
   optional die eigene Prognose als Fusszeile. */
.termingruppe { padding: 18px 0; border-top: 1px solid var(--line); }
.termingruppe:first-of-type { padding-top: 2px; border-top: 0; }
.tg-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tg-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tg-name svg { color: var(--fg2); flex: 0 0 auto; }
.tg-name span { font-size: 16.5px; color: var(--fg); font-weight: 400; }
/* Chip statt rotem Fliesstext fuer einen vereinbarten Werkstatttermin - Rot
   bleibt Akzent (Text/Rahmen), nie Flaeche, wie im Rest der App. */
.tg-chip {
  font-size: 10.5px; color: var(--red);
  border: 1px solid var(--red); border-radius: var(--r-pill);
  padding: 3px 8px; white-space: nowrap; flex: 0 0 auto;
}
.tg-vorgabe { font-size: 11.5px; color: var(--fg2); margin-top: 8px; }
.tg-wert {
  font-family: "Audi Type Wide", var(--font-stack); font-weight: 300;
  font-size: 22px; color: var(--fg); letter-spacing: -.005em; margin-top: 4px;
}
.tg-wert.leer { font-family: var(--font-stack); font-weight: 400; font-size: 15px; color: var(--fg3); margin-top: 8px; }
.tg-prognose { font-size: 12px; color: var(--fg2); margin-top: 6px; }

.badge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge img { height: 18px; width: auto; display: none; }
:host([data-theme=nacht]) .badge img.negative { display: block; }
:host([data-theme=tag]) .badge img.positive { display: block; }
.badge .zusatz { font-size: 13px; color: var(--fg2); }

.szene { position: relative; padding: 8px 0 18px; }
/* C5: randloses Fahrzeugbild - hebt die 20 px Seitenrand von main#view auf und
   blendet nach unten in die Fläche aus. */
.szene.bleed { margin: -10px -20px 0; padding: 0 0 10px; }
.szene.bleed .carbox { padding: 0 8px; }
.szene.bleed::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(to bottom, transparent, var(--canvas) 78%);
  pointer-events: none;
  z-index: 1;
}
.szene.strasse::after, .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%);
}
.szene.winter::after { background: radial-gradient(ellipse at center, rgba(150,190,255,.16), transparent 70%); }
.carbox { position: relative; }
.carfix { width: 100%; aspect-ratio: 16 / 9; }
.carfix.klein { aspect-ratio: 16 / 8; }
/* Reifenfoto ist oft eine breite Aufnahme; statt beide Ränder symmetrisch
   wegzuschneiden (object-fit:cover-Standard), bleibt bewusst der rechte Rand
   des Originalfotos erhalten - dort sitzt das Rad meist im Bild. */
.radbild { object-position: right center; }
/* .bildbox.radbild statt .radbild allein: .bildbox unten setzt width/aspect-
   ratio auf derselben Spezifitaet (eine Klasse) und gewinnt als spaeter
   notierte Regel sonst automatisch - die Box blieb dadurch bislang die volle
   Kachelbreite im 4:3-Format statt eines echten 96x96-Quadrats. Rechtsbündig
   sitzt es jetzt ueber .radkopf-row (display:flex; justify-content:space-
   between), kein margin-left:auto mehr noetig. */
.bildbox.radbild { width: 96px; height: 96px; aspect-ratio: 1 / 1; }

.bildbox { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.bildbox img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bildbox .platzhalter { display: none; position: absolute; inset: 0; }
.bildbox.bild-fehlt img { display: none; }
.bildbox.bild-fehlt .platzhalter { display: flex; }
/* D1: Solange kein Foto vorliegt, bleibt die Bildfläche flach - vorher standen
   260 px gestrichelte Leerfläche vor der Reichweite, der wichtigsten Zahl der
   App. Mit Foto gilt wieder das volle Seitenverhältnis. */
.bildbox.bild-fehlt.carfix { aspect-ratio: auto; height: 132px; }
.bildbox.bild-fehlt.carfix.klein { height: 120px; }
.szene.bleed:has(.bild-fehlt)::before { display: none; }
.szene.bleed:has(.bild-fehlt) { margin-left: 0; margin-right: 0; }
.szene.bleed:has(.bild-fehlt) .carbox { padding: 0; }

/* A5/C5: kein gestrichelter Rahmen und kein Dateiname mehr - Motivname plus
   Aufforderung, die Fläche ist tippbar. */
.platzhalter {
  width: 100%; height: 100%;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: var(--shade);
  border: 1px solid var(--line);
  border-radius: inherit;
  color: var(--fg3);
  text-align: center;
  padding: var(--sp-3);
}
.platzhalter-icon { width: 26px; height: 26px; color: var(--fg3); }
.platzhalter-label { font-size: 13px; letter-spacing: normal; color: var(--fg2); }
.platzhalter-aktion { font-size: 12px; color: var(--fg3); }

.dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
.dots i.on { background: var(--red); }

.marke { display: inline-flex; align-items: center; gap: 6px; }
.marke-logo { display: inline-flex; align-items: center; }
.marke-logo img { height: 13px; width: auto; }
.marke-logo .ph { display: none; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); }
.marke-logo.logo-fehlt img { display: none; }
.marke-logo.logo-fehlt .ph { display: inline; }

/* -------------------------------------------------------------- Formulare */
.feld {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4);
  padding: 14px 0;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
}
/* :not(.switch): der Schalter (Tanken/Einstellungen etc.) ist selbst ein
   <label class="switch">, kein Textlabel - ohne den Ausschluss erbte er
   dieselbe flex:1 1 auto-Regel und zog sich über die ganze Zeilenbreite. */
.feld label:not(.switch) { font-size: 14px; color: var(--fg2); flex: 1 1 auto; min-width: 0; line-height: 1.35; }
/* Eingaben nie breiter als die Kachel: die im Markup gesetzten festen
   Breiten (width:132px) bleiben Obergrenze, schrumpfen aber mit. */
.feld input, .feld select, .notiz {
  background: var(--tile-2);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: inherit;
  /* Muss >= 16px bleiben: Safari/WKWebView (und damit auch die HA-Companion-App
     auf dem iPhone) zoomt die Seite beim Fokussieren automatisch hinein, wenn
     das Feld kleiner als 16px gesetzt ist - der Nutzer muss dann nach jedem
     Feld von Hand wieder herauszoomen. Vorher standen hier 15px. */
  font-size: 16px;
  padding: 11px 13px;
  border-radius: 12px;
  text-align: right;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  -webkit-appearance: none;
  appearance: none;
}
.feld input:focus, .feld select:focus, .notiz:focus { outline: none; border-color: var(--red); }
/* Label und Eingabe untereinander statt nebeneinander, die Eingabe über die
   volle Zeilenbreite - für Felder, deren Wert typischerweise länger ist als
   ein Kurztext (Kommentar bei Sommer-/Winterrädern, live wie archiviert).
   Sonst gilt .feld input oben: die Eingabe wächst nie über ihre intrinsische
   Breite, nur das Label tut das (flex:1 1 auto) - für einen Reifenkommentar
   ("Profiltiefe 5,1 mm bei der letzten Montage") reichte das nicht. */
.feld--breit { display: block; }
.feld--breit label { display: block; margin-bottom: 8px; }
.feld--breit input { width: 100%; text-align: left; }
/* Das AUFGEKLAPPTE <select>-Popup ist Browser-/OS-Chrome, kein Teil des
   Seiten-DOMs - color-scheme (siehe :host weiter oben) beeinflusst es nur
   teilweise, der Rest bleibt hell. Einzige zuverlaessige Stellschraube:
   Chrome (u.a.) rendert die Zeilen im Popup tatsaechlich mit dem hier
   gesetzten background-color/color statt Systemfarben - deckende Werte,
   var(--tile-2) im Nacht-Theme ist transparent und wuerde durchscheinen. */
.feld select option { background-color: var(--canvas); color: var(--fg); }
/* Pull-down-Button-Optik (Apple HIG): einzelner Abwaerts-Chevron statt des
   durch appearance:none oben entfernten nativen Browser-Pfeils. */
.feld select {
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%238a94a3' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 10px 10px;
}
:host([data-theme=tag]) .feld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%23666666' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.feld > span { flex: 0 1 auto; min-width: 0; }
.mitEinheit { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; }
.mitEinheit input { min-width: 0; width: 96px; text-align: right; }
.mitEinheit span:last-child { font-size: 13px; color: var(--fg2); }
.druckfeld { width: 58px !important; min-width: 0 !important; }
.notiz { width: 100%; text-align: left; margin-top: 14px; line-height: 1.55; resize: vertical; }

.switch { position: relative; display: inline-block; flex-shrink: 0; width: 46px; height: 27px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; min-width: 0; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--tile-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: background .18s;
  pointer-events: none;
}
.switch .track::before {
  content: ""; position: absolute; left: 2px; top: 1px;
  width: 23px; height: 23px; background: #fff; border-radius: 50%;
  transition: transform .18s;
}
/* A7: Rot bleibt Akzent und Destruktiv. Der aktive Schalter trägt --fg mit
   dunklem Knopf. */
.switch input:checked + .track { background: var(--fg); border-color: var(--fg); }
.switch input:checked + .track::before { transform: translateX(19px); background: var(--canvas); }

/* C3: gemischt geschrieben, 15 px, 48 px hoch. .primaer ist gefüllt,
   .aktion allein bleibt die Umriss-Sekundäraktion. */
.aktion {
  display: block; width: 100%;
  font-family: inherit; font-size: 15px;
  letter-spacing: normal;
  color: var(--fg);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 14px 18px;
  min-height: 48px;
  margin-top: var(--sp-4);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s, opacity .15s;
}
.aktion + .aktion, .aktion + label.aktion { margin-top: 10px; }
.aktion:hover { border-color: var(--line-strong); background: var(--shade); }
.aktion:active { transform: scale(.985); background: var(--shade); }
.aktion.primaer { background: var(--fg); border-color: var(--fg); color: var(--canvas); }
.aktion.primaer:hover { opacity: .9; background: var(--fg); }
.aktion.primaer:active { opacity: .8; background: var(--fg); }
.aktion.loeschen { color: var(--bad); border-color: var(--bad); background: none; }
.aktion.loeschen:hover { background: var(--bad); color: #fff; }
.aktion.loeschen:active { background: var(--bad); color: #fff; }

/* C4: eine Bahn mit wanderndem Knopf statt zwei getrennter Umrisspillen. */
.seg {
  display: flex; gap: 0;
  background: var(--tile-2);
  border-radius: var(--r-pill);
  padding: 3px;
}
.seg button {
  flex: 1;
  border: none;
  background: none;
  color: var(--fg2);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: normal;
  padding: 11px 8px;
  min-height: 44px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.seg button.on { background: var(--fg); color: var(--canvas); }
.seg button:active { opacity: .8; }

.pill {
  display: inline-flex; align-items: center;
  font-size: 12px; letter-spacing: normal;
  color: var(--fg2);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 6px 12px;
}

/* ------------------------------------------------------------ Akkordeon */
.acc-h {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  background: none; border: none;
  font-family: inherit; text-align: left;
  padding: 15px 0;
  min-height: 56px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  color: inherit;
}
.acc-h .k { flex: 1; font-size: 15px; color: var(--fg); }
.acc-h .v { font-size: 12.5px; color: var(--fg2); text-align: right; white-space: nowrap; flex: 0 0 auto; }
.acc-h { transition: background .15s; }
.acc-h:active { background: var(--tile-2); }
.mark {
  /* Design-Audit 2026-08-13: die Border-Ecken-Technik (zwei Kanten +
     45deg-Drehung) braucht ein Quadrat, um einen sauberen Chevron zu
     ergeben - bei 6x10px (nicht quadratisch, wie fuer die SVG-Chevrons
     .chev/.go gedacht) sind die beiden Kantenlaengen ungleich lang und das
     Ergebnis sah eher wie ein Haekchen als ein Pfeil aus. */
  width: 8px; height: 8px;
  border-right: 1.4px solid var(--fg3);
  border-bottom: 1.4px solid var(--fg3);
  transform: rotate(-45deg);
  transition: transform .15s, border-color .15s;
  flex: 0 0 auto;
}
/* A8: ein Chevron, eine Farbe - nur die Drehung zeigt den Zustand. */
.acc-h[aria-expanded=true] .mark { transform: rotate(45deg); }
.acc-b { display: none; }
.acc-b.on { display: block; }
.lvl2 { margin-left: 22px; }
.lvl2 .acc-h .k { font-size: 13px; }

.tile-h {
  display: block; width: 100%;
  background: none; border: none;
  font-family: inherit; text-align: left;
  padding: 0; cursor: pointer; color: inherit;
}
.tile-b { display: none; }
.tile-b.on { display: block; }

/* -------------------------------------------------------------- Statistik */
.quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); }
.quad .n { display: block; font-family: "Audi Type Wide", var(--font-stack); font-size: 16px; font-weight: 300; color: var(--fg); line-height: 1.2; }
.quad .l { display: block; margin-top: 4px; font-size: 11px; letter-spacing: normal; color: var(--fg3); line-height: 1.3; }
.bar { display: flex; height: 4px; border-radius: var(--r-pill); overflow: hidden; gap: 2px; }
.bar i { display: block; border-radius: var(--r-pill); }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); font-size: 11px; color: var(--fg2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* -------------------------------------------------------------- Wischen */
.swipe-wrap { position: relative; overflow: hidden; }
/* Der rote Loeschknopf liegt dauerhaft hinter der Zeile. Zeilenhoehen sind
   gebrochen (z. B. 66,28 px), dadurch fiel die Kante von .swipe-content nicht
   aufs Geraetepixelraster und der rote Knopf blitzte als duenne Linie an den
   Zeilenraendern durch - sichtbar als roter Teilrahmen um jede Listenzeile.
   Er wird deshalb erst sichtbar, sobald wirklich gewischt wird ("wischt"
   waehrend der Geste, "swiped" fuer die offen stehende Zeile). */
.swipe-delete { position: absolute; inset: 0 0 0 auto; width: 84px; display: flex; visibility: hidden; }
.swipe-wrap.wischt .swipe-delete,
.swipe-wrap.swiped .swipe-delete { visibility: visible; }
.swipe-loeschen {
  width: 100%;
  background: var(--bad); color: #fff; border: none;
  font-family: inherit; font-size: 13px;
  letter-spacing: normal;
  cursor: pointer;
}
.swipe-loeschen:active { filter: brightness(.88); }
.swipe-content { position: relative; background: var(--tile); touch-action: pan-y; transition: transform .18s; }
.swipe-wrap.swiped .swipe-content { transform: translateX(-84px); }

/* -------------------------------------------------------------- Karte */
/* position:relative, damit der Zentrieren-Knopf im Einzelbeleg (absolut
   positioniert, siehe .kartensteuerung-klein) sich an dieser Kachel ausrichtet
   und nicht am naechsten Vorfahren weiter oben. */
.mapbox { position: relative; border-radius: var(--r-tile); overflow: hidden; height: 210px; background: var(--tile); }
.mapbox #map { width: 100%; height: 100%; }

/* --------------------------------------------------------- Standort
   Vorschau-Kachel (Übersicht) + Vollbildansicht + Fahrzeug-Menü. Höhen sind
   bewusst fest statt prozentual/vererbt - eine relative Höhe wird von
   panel_custom nicht zuverlässig durchgereicht (siehe audi-dashboard-
   ios.css-Kommentar zur selben Falle). */
.standort-kachel { padding: 0; overflow: hidden; }
.standort-kachelbtn {
  display: block; width: 100%; position: relative;
  border: none; padding: 0; margin: 0; background: none; cursor: pointer;
}
.standort-vorschau { width: 100%; height: 190px; background: var(--tile); }
.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);
}

.fahrzeug-pin-wrap { background: none; border: none; }
/* poi-car/poi aus dem CI-Satz sind reine Konturformen (Ring aus zwei
   gegenlaeufigen Randlinien + duenne Detaillinien) - eine Pixelprobe ergab
   nur 13-40% gefuellte Flaeche in der eigenen Bounding-Box und war auf
   Kartenkacheln praktisch unsichtbar (Nutzer-Feedback "Pin ist transparent").
   fahrzeugMarkerSVG()/tankstellenMarkerSVG() rendern deshalb zusaetzlich eine
   Vollton-Silhouette (CI.*Sil, exakt der aeussere Ballon-Umriss desselben
   CI-Pfads, keine Neuzeichnung) als unterste Ebene; die Iconfarbe hier ist
   deshalb weiss statt dunkel, damit Umriss und Detaillinien auf der jetzt
   massiven Flaeche lesbar bleiben. Feste Farben statt Theme-Variablen, damit
   die Nadeln in Tag- und Nachtansicht gleich aussehen. */
.fahrzeug-pin {
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.user-pin-wrap { background: none; border: none; }
.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,.3);
}
.user-pin::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  background: rgba(10,132,255,.18);
  animation: user-pulse 2.4s ease-out infinite;
}
@keyframes user-pulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }

.standort-vollbild { position: relative; height: min(640px, calc(100dvh - 190px)); border-radius: var(--r-tile); overflow: hidden; margin: 0 calc(-1 * var(--seitenrand)); }
.standort-karte { width: 100%; height: 100%; }

.kartensteuerung {
  position: absolute; z-index: 400; top: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.kartensteuerung button {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 20, 26, .84); color: #fff;
  border: none; box-shadow: 0 4px 14px rgba(0,0,0,.32);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  cursor: pointer; padding: 0;
}
/* Tag-Theme: helle Kapsel mit dunklem Symbol - die CI-Symbole selbst tragen
   fill="currentColor" und folgen der Textfarbe, es gibt keine zweite Datei. */
:host([data-theme="tag"]) .kartensteuerung button {
  background: rgba(255,255,255,.92); color: #101418;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.kartensteuerung button:active { transform: scale(.94); }
:host([data-theme="tag"]) .kartensteuerung button:active { background: #fff; }
/* Variante in der Belegkarte: die Karte ist dort nur 210px hoch, ein 48er-
   Knopf mit 16px Abstand wuerde ein Viertel davon verdecken. */
.kartensteuerung-klein { top: 10px; right: 10px; }
.kartensteuerung-klein button { width: 36px; height: 36px; }
.kartensteuerung-klein button:disabled { opacity: .45; cursor: default; }
.kartensteuerung-klein button:disabled:active { transform: none; }

/* Sichtbarer Anteil im geschlossenen Zustand (STANDORT_PEEK_PX im Frontend) -
   beide Werte müssen zusammenpassen, siehe Kommentar dort. Der Rest des
   Blatts wird nach unten geschoben und mit einem Zug nach oben geöffnet. */
.standortmenu {
  position: absolute; z-index: 410; left: 0; right: 0; bottom: 0;
  --standort-peek: 96px;
  /* Deckend, nicht durchscheinend - unter dem Blatt liegt die Karte. */
  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,.35);
  padding: 0 20px max(18px, env(safe-area-inset-bottom));
  transform: translateY(calc(100% - var(--standort-peek)));
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.standortmenu.offen { transform: translateY(0); }
.standortmenu-griffzone { padding: 10px 0 14px; touch-action: none; cursor: grab; position: relative; }
/* Der Griff ist jetzt ein Knopf (Tastaturzugang zum Menue). Die Knopf-
   Voreinstellungen des Browsers werden deshalb zurueckgesetzt; die
   Trefferflaeche waechst per Pseudo-Element auf 44px, ohne den sichtbaren
   Strich zu vergroessern. */
.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;
}
.standortmenu-griff::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 88px; height: 44px;
}
.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(--tile); border: none; color: var(--fg2); cursor: pointer; padding: 0;
}
.standortmenu-kopf { margin-top: 8px; padding-right: 44px; }
.standortmenu-name { font-size: 17px; color: var(--fg); }
.standortmenu-distanz { font-size: 12.5px; color: var(--fg3); margin-top: 4px; }
/* Abstand als leere Zeile zwischen Kopf und Details */
.standortmenu-adresse { font-size: 13.5px; color: var(--fg2); margin-top: 20px; }
.standortmenu-status { display: flex; align-items: center; gap: 9px; margin-top: 8px; font-size: 13.5px; color: var(--fg2); }
.standortmenu-status svg { color: var(--fg3); flex: 0 0 auto; }
.standortmenu-werte { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13.5px; color: var(--fg2); }
.standortmenu-werte svg { color: var(--fg3); flex: 0 0 auto; }
.standortmenu-aktionen { display: flex; gap: 10px; margin-top: 18px; padding-bottom: 4px; }
/* Beide Pillen folgen der Knopfsprache des restlichen Panels (.aktion /
   .aktion.primaer weiter oben): Umriss fuer die Nebenaktion, gefuellt fuer
   die Hauptaktion.

   Vorher stand hier background: var(--tile) fuer "Teilen" und
   background: var(--line-strong) fuer "Route". Beides ging im Tagmodus
   schief: das Blatt darunter ist var(--tile-deckend), und die iOS-Auflage
   (audi-dashboard-ios.css) setzt im Tagmodus --tile UND --tile-deckend
   beide auf #FFFFFF - "Teilen" war damit weiss auf weiss, Kontrast 1,0:1,
   also schlicht unsichtbar. --line-strong als Flaeche war ausserdem eine
   Linienfarbe in der Rolle einer Fuellung.

   Der Umriss haengt jetzt an denselben Tokens wie jeder andere Knopf und
   traegt deshalb in beiden Themes und auch unter der iOS-Auflage, ohne dass
   hier eine eigene Farbe gepflegt werden muss. */
.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-family: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
}
.standort-pille.primaer {
  background: var(--fg); border-color: var(--fg); color: var(--canvas);
}
.standort-pille:active { transform: scale(.97); }
.standort-pille[disabled] { opacity: .4; pointer-events: none; }

/* ------------------------------------------------------- Bilderverwaltung */
.bildmenu-catcher { position: fixed; inset: 0; z-index: 1000; }
.bildmenu {
  position: absolute; z-index: 1001;
  background: var(--tile-2);
  border-radius: 14px;
  padding: var(--sp-2);
  display: flex; flex-direction: column;
  min-width: 160px;
}
.bildmenu.rad { top: 90px; left: 22px; }
/* "Bild der Übersicht": das Vorschaubild füllt die ganze Kachelbreite, seine
   Unterkante liegt daher immer nah an der Kachel-Unterkante - das Menü von
   dort aus verankern statt mit einem festen top-Wert, der bei jedem
   Bildseitenverhältnis neu nachgemessen werden müsste. */
.bildmenu.ansicht { bottom: var(--sp-5); left: 50%; transform: translateX(-50%); }
.bildmenu button {
  display: block; width: 100%; text-align: left;
  background: none; border: none;
  color: var(--fg); font-family: inherit; font-size: 15px;
  padding: 13px 10px; min-height: 46px; border-radius: 10px;
  cursor: pointer;
}
.bildmenu button:active { background: var(--shade); }
.bildmenu button.loeschen { color: var(--bad); }

.sdpopup {
  position: absolute; z-index: 1001;
  left: var(--sp-5); right: var(--sp-5); top: 60px;
  background: var(--tile-2);
  border-radius: 14px;
  padding: var(--sp-4);
}

/* Beleg-Fenster: PDF hineinziehen (Rechner) oder einfügen (Telefon). */
.beleg-catcher {
  position: absolute; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.45);
  animation: sheet-fade .18s ease-out;
}
.beleg-popup {
  position: absolute; z-index: 1001;
  left: var(--sp-5); right: var(--sp-5);
  top: 50%; transform: translateY(-50%);
  /* Wie .setup-popup: --tile-2 ist im Nacht-Theme transluzent, ein frei
     schwebendes Fenster braucht einen blickdichten Grund. */
  background: var(--tile-deckend, var(--canvas));
  border-radius: var(--r-tile);
  padding: var(--sp-4);
}
.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;
}
.beleg-drop strong { font-size: 15px; color: var(--fg); }
.beleg-drop span { font-size: 12.5px; color: var(--fg2); }
.beleg-drop.darueber { border-color: var(--fg); border-style: solid; background: var(--shade); }

/* Kopfzeile der Reifen-Kachel: Überschrift+km links, Radfoto rechts, beide
   oben bündig - ersetzt die frühere Überlagerung (Montiert absolut über dem
   Foto), seit Überschrift und km ihren eigenen Platz über Montiert bekommen
   haben. */
.radkopf-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.radkopf { display: flex; flex-direction: column; }

/* Editier-Symbol links neben der km-Anzeige (Audi-CI edit-s) - oeffnet das
   Korrekturfeld fuer den manuell gepflegten Kilometerstand des Reifensatzes.
   44x44pt Tippflaeche per unsichtbarem ::before wie bei .montiert/.zahnrad,
   optisch bleibt nur das kleine Symbol sichtbar. */
.km-edit {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: none; background: none; color: var(--fg3);
  padding: 0; cursor: pointer; flex: 0 0 auto;
}
.km-edit::before { content: ""; position: absolute; inset: -11px; }
.km-edit:hover { color: var(--fg); }
.km-edit:active { color: var(--fg); transform: scale(.92); }

/* Zeile aus einer bearbeitbaren Liste entfernen (z. B. Selbstbeteiligung im
   Vertrag) - 44x44pt Tippflaeche per unsichtbarem ::before wie bei .km-edit,
   optisch bleibt nur das kleine × sichtbar. */
.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;
}
.zeile-loeschen::before { content: ""; position: absolute; inset: -11px; }
.zeile-loeschen:hover { color: var(--bad); }
.zeile-loeschen:active { color: var(--bad); transform: scale(.92); }

/* Kompakte Pille statt voller Breite (Apple-HIG-Pull-down-Maß): normale
   Flusslage unter der Kachel-Überschrift/km, nicht mehr über dem Foto
   überlagert (das saß nur dort, solange Überschrift+km diesen Platz noch
   nicht beanspruchten). */
.montiert {
  position: relative; margin-top: var(--sp-4);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 12px; letter-spacing: normal;
  color: var(--fg2);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 7px 13px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
/* Optisch bleibt die Pille klein, die Tippflaeche wird per unsichtbarem
   Pseudo-Element auf Apple-HIG-Mindestmass 44x44pt gebracht (Klick auf die
   Flaeche des ::before zaehlt als Klick auf den echten Button). */
.montiert::before { content: ""; position: absolute; top: -8px; bottom: -8px; left: 0; right: 0; }
.montiert:hover { background: var(--shade); }
.montiert:active { transform: scale(.96); background: var(--shade); }
.montiert.on { background: var(--fg); border-color: var(--fg); color: var(--canvas); }

/* ------------------------------------------------- B4: Action Sheet
   Ersetzt confirm()/alert(). Von unten eingeblendet, destruktive Zeile rot,
   Abbrechen abgesetzt - iOS-Muster. */
.sheet-catcher {
  position: absolute; inset: 0; z-index: 1200;
  background: rgba(0,0,0,.45);
  animation: sheet-fade .18s ease-out;
}
.sheet {
  position: absolute; z-index: 1201;
  left: 10px; right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
  animation: sheet-rein .24s cubic-bezier(.22,.61,.36,1);
}
@keyframes sheet-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sheet-rein { from { transform: translateY(18px); opacity: 0 } to { transform: none; opacity: 1 } }
.sheet-gruppe {
  /* --tile-2 is translucent in the iOS overlay's night theme (rgba white,
     meant for tile-on-tile layering) - a confirm sheet sits directly over
     whatever page content triggered it, so a see-through card made titles
     like "Doppelt zugeordnet" hard to read against the busy background
     bleeding through. Same fix already applied to .setup-popup/.standortmenu
     for the same reason - opaque surface token, with the --canvas fallback
     this file already uses elsewhere for when the (purely additive, in
     principle removable) overlay isn't loaded. */
  background: var(--tile-deckend, var(--canvas));
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.sheet-kopf {
  padding: 15px 18px 14px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.sheet-kopf strong { font-size: 15px; font-weight: 400; color: var(--fg); }
.sheet-kopf span { font-size: 13px; color: var(--fg2); line-height: 1.45; }
.sheet-gruppe button {
  background: none; border: none;
  font-family: inherit; font-size: 16px;
  color: var(--fg);
  padding: 16px 18px; min-height: 52px;
  text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.sheet-gruppe button:last-child { border-bottom: none; }
.sheet-gruppe button:active { background: var(--shade); }
.sheet-gruppe button.loeschen { color: var(--bad); }
.sheet-abbrechen {
  background: var(--tile-deckend, var(--canvas)); border: none; border-radius: 16px;
  font-family: inherit; font-size: 16px; color: var(--fg);
  padding: 16px; min-height: 52px; cursor: pointer;
}
.sheet-abbrechen:active { background: var(--shade); }

/* ------------------------------------------------------- Setup-Popup
   Sensor-zu-Entität-Zuordnung (Einstellungen -> Fahrzeug einrichten ->
   Setup). Gleiche Catcher/Karten-Bauweise wie .bildmenu/.sdpopup oben,
   aber großformatig und scrollbar statt Bottom-Sheet-Größe; nutzt die
   bereits vorhandenen sheet-fade/sheet-rein-Keyframes. z-index bewusst
   unter .sheet (1200er), damit ein Fehlerhinweis (hinweis()) bei
   fehlgeschlagenem Speichern über dem noch offenen Setup-Popup liegt. */
.setup-catcher {
  position: absolute; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.45);
  animation: sheet-fade .18s ease-out;
}
.setup-popup {
  position: absolute; z-index: 1001;
  left: 10px; right: 10px;
  top: max(10px, env(safe-area-inset-top));
  bottom: max(10px, env(safe-area-inset-bottom));
  /* --tile-2 ist inzwischen transluzent (rgba(255,255,255,.1) im Nacht-
     Theme) - fuer ein frei ueber dem Inhalt schwebendes Popup braucht es
     einen blickdichten Hintergrund, gleiches Muster wie .standortmenu
     oben. */
  background: var(--tile-deckend, var(--canvas));
  border-radius: var(--r-tile);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: sheet-rein .24s cubic-bezier(.22,.61,.36,1);
}
.setup-kopf {
  flex: 0 0 auto;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.setup-kopf strong { font-size: 17px; font-weight: 400; color: var(--fg); }
.setup-kopf span { font-size: 13px; color: var(--fg2); line-height: 1.45; }
.setup-kopf-schalter { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.setup-kopf-schalter span { font-size: 13.5px; color: var(--fg); }
.setup-koerper { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 4px 20px 20px; }
.setup-gruppe { margin-top: 18px; }
.setup-gruppe:first-child { margin-top: 6px; }
.setup-gruppe-titel { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); margin-bottom: 6px; }
.setup-feldzeile { padding: 12px 0; border-bottom: 1px solid var(--line); }
.setup-feldzeile:last-child { border-bottom: none; }
.setup-feld-kopf { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.setup-feld-label { font-size: 14.5px; color: var(--fg); }
.setup-feld-hinweis { font-size: 12.5px; color: var(--fg2); line-height: 1.4; }
.setup-unterfelder { display: flex; flex-direction: column; gap: 12px; }
.setup-unterfeld { display: flex; flex-direction: column; gap: 4px; }
.setup-unterfeld-label { font-size: 12px; color: var(--fg3); }

.entitaet-combo { position: relative; }
.entitaet-combo-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--fg3); display: flex; pointer-events: none;
}
.entitaet-combo-input {
  width: 100%; box-sizing: border-box;
  background: var(--tile-deckend, var(--canvas)); border: 1px solid var(--line); color: var(--fg);
  font-family: inherit; font-size: 16px; /* siehe .feld input weiter oben: >=16px gegen Safari-Autozoom */
  padding: 11px 34px 11px 36px;
  border-radius: 12px;
  text-align: left;
  -webkit-appearance: none; appearance: none;
}
.entitaet-combo-input:focus { outline: none; border-color: var(--red); }
.entitaet-combo-reset {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--fg3); cursor: pointer; padding: 0;
}
.entitaet-combo-reset:active { color: var(--fg); }
.entitaet-liste {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 240px; overflow-y: auto;
  background: var(--tile-deckend, var(--canvas)); border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.entitaet-eintrag {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--line);
  color: var(--fg); font-family: inherit;
  padding: 9px 12px; cursor: pointer;
}
.entitaet-eintrag:last-child { border-bottom: none; }
.entitaet-eintrag:active, .entitaet-eintrag.aktiv { background: var(--shade); }
.entitaet-eintrag-name { font-size: 14px; color: var(--fg); }
.entitaet-eintrag-id { font-size: 11.5px; color: var(--fg3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.entitaet-eintrag-wert { font-size: 11.5px; color: var(--fg2); margin-top: 1px; }
.entitaet-eintrag-wert.unbekannt { color: var(--warn); }
.entitaet-leer { padding: 14px 12px; font-size: 13px; color: var(--fg2); }
.setup-feld-warnung { font-size: 12px; color: var(--warn); line-height: 1.4; margin-top: 6px; }

.setup-fuss {
  flex: 0 0 auto;
  display: flex; gap: 10px;
  padding: 14px 20px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.setup-fuss .aktion { flex: 1; margin-top: 0; }

/* ------------------------------------------------- B3: Push/Pop
   Seitenwechsel wie auf iOS: neue Ebene kommt von rechts, zurück geht sie
   dorthin. */
.push-rein { animation: push-rein .26s cubic-bezier(.32,.72,0,1); }
.push-raus { animation: push-raus .26s cubic-bezier(.32,.72,0,1); }
@keyframes push-rein { from { transform: translateX(26px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes push-raus { from { transform: translateX(-18px); opacity: 0 } to { transform: none; opacity: 1 } }

/* D5: Leerzustand nennt die Ursache und die nächste Handlung. */
.leer { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 2px; }
.leer strong { font-size: 16px; font-weight: 400; color: var(--fg); }
.leer p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--fg2); text-wrap: pretty; }

/* B7 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
