audi-app/companion-app/src/stile/rahmen.css

/*
 * Rahmen der App (Shell.tsx): Kopfzeile, Seitenleiste, Inhaltsfläche.
 * Farben und Radien ausschließlich aus den Tokens von @audi-dash/ui.
 */

.dm-spalte {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ------------------------------------------------------------- Kopfzeile */

/* 1:1 die .topbar des Panels (audi-dashboard-ios.css:
   `padding:56px 20px 4px 16px; gap:4px`, keine Trennlinie). Die 56px oben sind
   dort die fest einkompilierte Statusleisten-Reserve - das Panel läuft auf dem
   Telefon als PWA und kennt env() gar nicht. Diese App läuft zusätzlich in
   einer nativen Hülle, wo die echte Reserve aus dem Gerät kommt; max() liefert
   deshalb im Browser exakt die 56px des Panels und auf dem Gerät den realen
   Sicherheitsabstand. */
.dm-kopf {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  /* Nur der sichere Bereich, kein Aufschlag: das Panel setzt hier zwar
     ebenfalls 56px (.topbar in audi-dashboard-ios.css), die liegen dort
     aber unter der eigenen Kopfleiste von Home Assistant. In der nativen
     Huelle steht darueber nichts ausser der Statusleiste, dieselbe Zahl
     ergab deshalb ein sichtbar leeres Band ueber der Ueberschrift.
     env(safe-area-inset-top) haelt die Statusleiste weiterhin frei -
     ohne Einzug (Browser, iPad, geraetelose Vorschau) beginnt der Titel
     jetzt direkt oben. */
  padding: env(safe-area-inset-top, 0px) 20px 4px 16px;
  background: var(--canvas);
}

/* Unterseite: kompakter, zentrierter Titel wie in einer iOS-Navigationsleiste
   (`.phone:has(.back.on) .topbar/.head/.title` im Panel). */
.dm-kopf--unterseite {
  padding: env(safe-area-inset-top, 0px) 16px 6px;
  gap: var(--sp-2);
}

.dm-kopf__titel {
  flex: 1;
  min-width: 0;
}

/* Mittig, und zwar mit Absicht: Apples Human Interface Guidelines kennen
   genau zwei Titelformen - den großen, linksbündigen Titel auf oberster
   Ebene und den kleinen, ZENTRIERTEN in der Navigationsleiste einer
   Detailseite. Beides steht hier nebeneinander: Hauptbereiche groß und
   links, Unterseiten 17px und mittig.

   Am 02.09.2026 kurzzeitig auf linksbündig gestellt (auf Ansage, "wie alle
   anderen auch") und auf Rückfrage des Eigentümers am selben Tag wieder
   zurückgenommen: die anderen Titel sind die der Hauptbereiche, und die
   folgen der anderen Regel. Nicht erneut ändern, ohne diese beiden Formen
   auseinanderzuhalten. */
.dm-kopf--unterseite .dm-kopf__titel {
  text-align: center;
}

.dm-kopf--unterseite .ads-title {
  font-size: 17px;
}

/* Datenstand unter dem Titel der Übersicht (`.sync` im Panel). */
.dm-stand {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--fg3);
}

/* Ziehen zum Aktualisieren (`.ptr` im Panel): ein Band der Höhe 0, das
   während der Geste wächst. */
.dm-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;
}

.dm-ptr--dreht svg {
  animation: dm-drehen 1s linear infinite;
}

@keyframes dm-drehen {
  to {
    transform: rotate(360deg);
  }
}

/* Maße und Farbe wie im Panel: `.back{width:34px;height:34px;margin-left:-8px}`
   mit `.back svg{width:22px;height:22px;color:var(--fg)}`, und
   `.rings{min-width:44px;min-height:44px;margin-left:8px;margin-right:-10px;
   padding:0 10px}`. Der Zurück-Pfeil war hier 44px breit und in --fg2 statt
   --fg - sichtbar heller und weiter eingerückt als im Panel. */
.dm-kopf__zurueck,
.dm-kopf__aktion {
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
}

.dm-kopf__zurueck {
  width: 34px;
  height: 34px;
  margin-left: -8px;
  color: var(--fg);
}

/* Spiegelbild des Zurueck-Pfeils auf der rechten Seite, damit der
   zentrierte Titel wirklich in der Mitte der Kopfzeile steht und nicht in
   der Mitte des Rests. Gleiche Masse, gleicher negativer Aussenabstand -
   die 34px, die links vom Pfeil samt Abstand belegt werden, stehen damit
   auch rechts. */
.dm-kopf__gegengewicht {
  flex: none;
  width: 34px;
  height: 34px;
  margin-right: -8px;
}

.dm-kopf__aktion {
  min-width: 44px;
  height: 44px;
  margin-left: var(--sp-2);
  margin-right: -10px;
  padding: 0 10px;
  color: var(--fg2);
}

.dm-kopf__zurueck:hover,
.dm-kopf__aktion:hover {
  background: var(--shade);
  color: var(--fg);
}

/* Kein rotes Aktiv-Signal hier: Rot bleibt Akzent/destruktiv, keine
   Navigationsfarbe (dieselbe Regel wie beim Panel-Zurückpfeil, den primären
   Aktionsknöpfen und der Arbeitsweg-Pille - siehe AGENTS.md 2026-08-13/17).
   Der Ringe-Knopf selbst hat im Panel auch kein eigenes Aktiv-Aussehen. */

/* ---------------------------------------------------------- Inhaltsfläche */

/* Seitenrand und Kachelabstand kommen 1:1 vom Panel (`main#view{--seitenrand:16px;
   padding:0 var(--seitenrand) 30px}` in audi-dashboard-ios.css). Bis 2026-08-30
   standen hier --sp-4/--sp-5 aus dem Design-System: 22px Seitenrand statt 16px
   (jede Kachel 20px schmaler als im Panel), 16px Innenabstand oben, den das Panel
   gar nicht hat, und zusätzlich zum margin-bottom der Kachel noch ein
   flex-gap - live gemessen ergab das 24px zwischen zwei Kacheln, wo das Panel
   14px zeigt. Das war app-weit der größte Formatunterschied überhaupt. Der
   Abstand kommt jetzt wie im Panel allein aus dem margin-bottom der Kachel,
   deshalb kein gap mehr. */
.dm-inhalt {
  --seitenrand: 16px;
  flex: 1;
  padding: 0 var(--seitenrand) 30px;
  display: flex;
  flex-direction: column;
}

/* Kachelmaße wie im Panel (`.tile{padding:16px 18px;margin-bottom:14px}`,
   audi-dashboard-ios.css). @audi-dash/ui leitet beides aus --sp-5/--sp-3 ab
   (22px rundum, 12px Abstand) - als markenneutraler Kit richtig, hier aber
   sichtbar anders als das Panel. Gleiches Muster wie die Schrift-Auflagen in
   audi-schrift.css: design-system bleibt unangetastet, companion-app legt
   lokal die gemessenen Panel-Werte darüber. */
.ads-tile {
  padding: 16px 18px;
  margin-bottom: 14px;
}

/* .tile.flat setzt im Panel nur das Padding zurück, der Abstand bleibt. */
.ads-tile--flat {
  padding: 0;
}

/* Inhalte dürfen nie gestaucht werden — die Fläche scrollt stattdessen.
   Ohne das quetscht Flex jeden Block mit `overflow: hidden` auf Höhe 0,
   sobald die Seite länger ist als der Bildschirm: `overflow: hidden` setzt
   die automatische Mindesthöhe auf 0, und dann greift flex-shrink ungebremst.
   Genau so verschwand das Fahrzeugbild samt Modellname und Kennzeichen. */
.dm-inhalt > * {
  flex: none;
}

.dm-inhalt--breit {
  padding: var(--sp-5) 32px 32px;
}

/* Mehrspaltige Anordnung auf großen Flächen: Kacheln nebeneinander statt
   untereinander. Die Screens setzen die Klasse dort, wo es sinnvoll ist. */
.dm-raster {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
  .dm-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .dm-raster--drei {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dm-raster__breit {
    grid-column: 1 / -1;
  }
}

/* Listen- und Detailansicht nebeneinander (Fahrten, Tanken auf großer Fläche) */
.dm-zweispalter {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1000px) {
  .dm-zweispalter {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  }
}

/* ----------------------------------------------------------- Seitenleiste */

.dm-seitenleiste {
  flex: 0 0 240px;
  width: 240px;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid var(--line);
  padding: 24px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--canvas);
}

.dm-seitenleiste__marke {
  padding: 0 10px var(--sp-4);
}

.dm-seitenleiste__punkt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-radius: var(--r-func);
  background: transparent;
  color: var(--fg2);
  font-size: 14px;
  font-weight: 300;
  text-align: left;
  cursor: pointer;
}

.dm-seitenleiste__punkt:hover {
  background: var(--shade);
  color: var(--fg);
}

.dm-seitenleiste__punkt--an {
  background: var(--tile);
  color: var(--fg);
}

.dm-seitenleiste__fuss {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

/* Zurück-Weg auf großer Fläche: als Brotkrume über dem Inhalt statt als
   Pfeil in der Kopfzeile — auf dem Handy nimmt der Pfeil den Platz ein. */
.dm-brotkrume {
  padding: var(--sp-4) 32px 0;
}

.dm-brotkrume button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--fg2);
  font-size: 13px;
  font-weight: 300;
  cursor: pointer;
  padding: 6px 0;
}

.dm-brotkrume button:hover {
  color: var(--fg);
}

/* ------------------------------------------------------------ Tab-Leiste */

/* Die Menüleiste des Panels liegt als durchscheinende, weichgezeichnete
   Fläche über dem Inhalt (`.tabbar` in audi-dashboard-ios.css:
   rgba(12,16,20,.72) bzw. rgba(242,242,247,.78) plus
   backdrop-filter:saturate(180%) blur(24px), dazu 26px Polster unten für den
   Home-Indikator). Hier war sie deckend und ohne dieses Polster. */
.dm-tableiste {
  flex: none;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 26px);
  border-top: 1px solid var(--line);
  background: rgba(12, 16, 20, .72);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
}

[data-theme="tag"] .dm-tableiste {
  background: rgba(242, 242, 247, .78);
}

.dm-seitenleiste__marke {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 10px var(--sp-4);
}

.dm-szene__marke {
  display: flex;
  align-items: center;
  /* `.badge` im Panel: 10px zwischen Typenschild und Zusatz. */
  gap: 10px;
  flex-wrap: wrap;
}