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

.dm-kopf {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: calc(env(safe-area-inset-top, 0px) + var(--sp-4)) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}

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

.dm-kopf__zurueck,
.dm-kopf__aktion {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg2);
  cursor: pointer;
}

.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 */

.dm-inhalt {
  flex: 1;
  padding: var(--sp-4) var(--sp-5) calc(env(safe-area-inset-bottom, 0px) + var(--sp-5));
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

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

.dm-tableiste {
  flex: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--line);
  background: var(--canvas);
}

.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;
  gap: var(--sp-3);
  flex-wrap: wrap;
}