/* ============================================================================
   Q4 Track — App-eigene Ergänzungen zum Design-System.
   ds.css bleibt unangetastet; hier steht nur, was die App zusätzlich braucht.
   Alle Farben und Abstände kommen aus den --ds-Tokens.
   ========================================================================== */

/* --- Anmeldung ------------------------------------------------------------ */
.app-login{min-height:-webkit-fill-available;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--ds-6) + var(--ds-safe-t)) max(var(--ds-4),var(--ds-safe-r))
          calc(var(--ds-6) + var(--ds-safe-b)) max(var(--ds-4),var(--ds-safe-l));
  background:var(--ds-bg-sub)}
.app-login-card{width:min(360px,100%);display:flex;flex-direction:column;gap:var(--ds-4)}
.app-login-brand{display:flex;align-items:center;gap:var(--ds-3)}
.app-login-card .ds-error{display:flex;align-items:center;gap:var(--ds-1)}
.app-login-card .ds-error svg{width:14px;height:14px}

/* --- Topbar --------------------------------------------------------------- */
.app-tenant{gap:var(--ds-2)}
.app-sel-sm{height:var(--ds-ctrl-h-sm);min-height:var(--ds-ctrl-h-sm);padding:0 var(--ds-6) 0 6px;
  font-size:var(--ds-fs-sm);max-width:200px}

/* --- Übersicht ------------------------------------------------------------ */
.app-cards{display:grid;gap:var(--ds-3);grid-template-columns:repeat(auto-fill,minmax(296px,1fr))}
/* Rasterfelder sind von Haus aus min-width:auto — lange IMEIs sprengen sonst die Spalte. */
.app-cards > *{min-width:0}
.app-vehicle-link{color:inherit;text-decoration:none;display:block}
.app-vehicle-link:hover{text-decoration:none}
.app-vehicle-link:hover .ds-vehicle{border-color:var(--ds-line-strong)}
.app-vehicle-link .ds-vehicle{height:100%}
.app-meta{font-size:var(--ds-fs-sm);color:var(--ds-text-3)}

/* --- Werkzeugleisten ------------------------------------------------------ */
.app-toolbar{display:flex;align-items:center;gap:var(--ds-2);flex-wrap:wrap;margin-bottom:var(--ds-2)}
.app-toolbar .ds-seg{flex:none}
.app-period{min-width:168px;text-align:center}

/* --- Fahrtenbuch-Tabelle (nur ab 900 px — darunter Karten) ---------------- */
.app-fb-wrap{max-height:calc(100dvh - 230px);min-height:260px}
.app-fb .ds-table th:first-child,.app-fb .ds-table td:first-child{padding-left:var(--ds-3)}
.app-fb td.app-c-check{width:1%;padding-top:7px}
.app-fb td.app-c-check input{accent-color:var(--ds-accent);width:13px;height:13px;margin:0}
.app-fb tr.is-cursor > td{box-shadow:inset 2px 0 0 var(--ds-accent)}
.app-fb tr.is-picked > td{background:var(--ds-accent-soft)}
.app-fb tr.is-superseded > td{color:var(--ds-text-3);font-style:italic}
.app-fb tr.is-superseded > td .ds-badge{text-decoration:none}
.app-seg-cat{padding:1px;gap:1px}
.app-seg-cat > button{height:19px;min-width:20px;padding:0 5px;font-size:var(--ds-fs-micro);font-family:var(--ds-font-mono)}
.app-seg-cat > button[disabled]{opacity:.5;cursor:default}
/* Höchstens zwei Zeilen je Adresspaar — der volle Text steht im title. */
.app-route-cell{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.35}
.app-fb .ds-table td{padding:5px 5px}
.app-fb .ds-table th{padding-left:5px;padding-right:5px}
.app-fb .ds-td-route{min-width:190px}
/* Stufenweise ausdünnen, damit die Statusspalte (Frist!) ohne Querscrollen sichtbar bleibt.
   Fahrer und Partner stehen in der Aufklappzeile. */
@media (max-width:1400px){.app-fb .app-c-drv{display:none} .app-fb .ds-td-route{min-width:170px}}
@media (max-width:1300px){.app-fb .app-c-part{display:none}}
.app-locked-icon{color:var(--ds-text-3)}
.app-locked-icon svg{width:12px;height:12px;display:inline-block}

/* --- Aufgeklappte Zeile --------------------------------------------------- */
.app-detail{display:grid;gap:var(--ds-4);grid-template-columns:minmax(260px,1fr) minmax(240px,1fr) minmax(220px,.8fr)}
@media (max-width:1100px){.app-detail{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.app-detail{grid-template-columns:1fr}}
.app-detail-col{display:flex;flex-direction:column;gap:var(--ds-2);min-width:0}
.app-map{height:196px;border:1px solid var(--ds-line);border-radius:var(--ds-r-sm);
  background:var(--ds-surface-2);overflow:hidden}
.app-map .leaflet-container{height:100%;width:100%;background:var(--ds-surface-2);font:400 var(--ds-fs-sm) var(--ds-font)}
.app-chips{display:flex;flex-wrap:wrap;gap:var(--ds-1)}
.app-chip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border:1px dashed var(--ds-accent-line);
  border-radius:var(--ds-r-sm);background:var(--ds-accent-soft);color:var(--ds-accent);
  font-size:var(--ds-fs-sm);cursor:pointer;font-family:inherit}
.app-chip:hover{border-style:solid}
.app-chip svg{width:11px;height:11px}
.app-timeline{display:flex;flex-direction:column;gap:var(--ds-1);font-size:var(--ds-fs-sm);color:var(--ds-text-2);
  max-height:150px;overflow:auto}
.app-timeline li{display:flex;gap:var(--ds-2);align-items:baseline;border-left:1px solid var(--ds-line);
  padding:1px 0 1px var(--ds-2);margin-left:2px}
.app-timeline time{font-family:var(--ds-font-mono);font-size:var(--ds-fs-micro);color:var(--ds-text-3);flex:none}
.app-timeline b{font-weight:500;color:var(--ds-text)}
.app-inline-form{display:grid;gap:var(--ds-2);grid-template-columns:1fr 1fr}
.app-inline-form .app-span2{grid-column:1 / -1}

/* --- Listen / Detailraster ------------------------------------------------ */
.app-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--ds-3)}
.app-kv > div{display:flex;flex-direction:column;gap:2px}
.app-kv b{font-family:var(--ds-font-mono);font-weight:500}
.app-list{display:flex;flex-direction:column}
.app-list-row{display:flex;align-items:center;gap:var(--ds-3);padding:var(--ds-3) var(--ds-4);
  border-bottom:1px solid var(--ds-line);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;
  width:100%;text-align:left;font:inherit;color:inherit}
.app-list-row:last-child{border-bottom:0}
.app-list-row:hover{background:var(--ds-surface-2)}
.app-verify{border:1px solid var(--ds-ok-line);background:var(--ds-ok-soft);border-radius:var(--ds-r-sm);padding:var(--ds-3)}
.app-verify.is-bad{border-color:var(--ds-danger-line);background:var(--ds-danger-soft)}
.app-verify code{display:block;font-family:var(--ds-font-mono);font-size:var(--ds-fs-micro);color:var(--ds-text-2);
  overflow-wrap:anywhere}
.app-consequences{margin:var(--ds-3) 0 0;display:flex;flex-direction:column;gap:var(--ds-1);
  font-size:var(--ds-fs-sm);color:var(--ds-text-2)}
.app-consequences li{display:flex;gap:var(--ds-2)}
.app-consequences li::before{content:"–";color:var(--ds-text-3)}

/* --- Karten-Seiten -------------------------------------------------------- */
.app-fullmap{position:relative;z-index:0;height:calc(100dvh - var(--ds-topbar-h) - var(--ds-12));min-height:360px;
  border:1px solid var(--ds-line);border-radius:var(--ds-r-md);overflow:hidden;background:var(--ds-surface-2)}
.app-fullmap .leaflet-container{height:100%;width:100%;font:400 var(--ds-fs-sm) var(--ds-font)}
.app-mapsplit{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--ds-3);align-items:start}
@media (max-width:900px){.app-mapsplit{grid-template-columns:1fr}}  /* Höhen: siehe Telefon-Block */
.app-plate-label{font-family:var(--ds-font-mono);font-size:11px;font-weight:500;color:var(--ds-text);
  background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:3px;padding:0 3px;white-space:nowrap}

/* --- Drawer-Varianten ----------------------------------------------------- */
.app-drawer--wide{width:min(560px,96vw)}
.app-drawer-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-3)}
.app-drawer-grid .app-span2{grid-column:1 / -1}

/* --- Einstellungen -------------------------------------------------------- */
.app-prose{max-width:76ch;display:flex;flex-direction:column;gap:var(--ds-3);font-size:var(--ds-fs-base);color:var(--ds-text-2)}
.app-prose h3{font-size:var(--ds-fs-md);font-weight:500;color:var(--ds-text);margin:var(--ds-2) 0 0}
.app-prose ul{display:flex;flex-direction:column;gap:var(--ds-1);padding-left:var(--ds-4)}
.app-prose li{list-style:disc;color:var(--ds-text-2)}
.app-prose b{color:var(--ds-text);font-weight:500}
.app-prose a{overflow-wrap:anywhere}

/* --- Kleinigkeiten -------------------------------------------------------- */
.app-hint-row{display:flex;align-items:center;gap:var(--ds-2);flex-wrap:wrap;
  font-size:var(--ds-fs-sm);color:var(--ds-text-3);margin-top:var(--ds-2)}
.app-hint-row .ds-kbd{margin-left:2px}
.app-sumbar{position:sticky;bottom:0;z-index:var(--ds-z-sticky)}
[hidden]{display:none !important}

/* ==========================================================================
   Telefon (≤ 900 px). Die Fahrtentabelle wird durch eine Kartenliste ersetzt;
   die Tabelle rendert die Seite unterhalb dieser Breite gar nicht mehr.
   ========================================================================== */
@media (max-width:900px){
  .app-detail{gap:var(--ds-3)}
  .app-drawer--wide{width:auto}          /* Vollbild-Blatt, siehe ds.css §11 */
  .app-drawer-grid{grid-template-columns:1fr}
  .app-inline-form{grid-template-columns:1fr}
  .app-map{height:180px}
  .app-timeline{max-height:180px;overscroll-behavior:contain}

  /* Kopfzeile: Fahrzeugwahl bekommt eine eigene Zeile und die volle Breite. */
  .app-fb-vsel{flex:1 1 100%;gap:var(--ds-2)}
  .app-fb-vsel .ds-select{flex:1;max-width:none;height:var(--ds-ctrl-h-md);min-height:var(--ds-ctrl-h-md)}

  /* Zeitraumleiste: eine Zeile, die sauber umbricht. */
  .app-toolbar{gap:var(--ds-2);margin-bottom:var(--ds-2)}
  .app-toolbar--period{gap:var(--ds-2)}
  .app-toolbar--period .ds-btn-group{flex:1 1 auto;display:flex}
  .app-toolbar--period .app-period{flex:1;min-width:0}
  .app-toolbar--acts{margin-bottom:var(--ds-3)}
  .app-toolbar .ds-btn--sm{height:var(--ds-ctrl-h-sm)}
  .app-period{min-width:0}
  #fbSelect.is-on-sel{background:var(--ds-accent-soft);border-color:var(--ds-accent-line);color:var(--ds-accent)}

  /* --- Fahrtenkarte ------------------------------------------------------
     Aufbau: Kopfzeile (Datum · Zeitspanne · Frist) → Streckenblock mit Punkt,
     Haarlinie, Punkt → Kennzahlenzeile (km groß, Dauer) → Kategorie-Segment.
     Tachostand und laufende Nummer stehen bewusst erst in der Aufklappfläche. */
  .app-cardlist{display:flex;flex-direction:column;gap:var(--ds-2)}
  .app-tcard{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);overflow:hidden}
  /* Offene Fahrt: schmaler Balken links in der Farbe der Frist. */
  .app-tcard--grey{box-shadow:inset 3px 0 0 var(--ds-line-strong)}
  .app-tcard--yellow,.app-tcard--orange{box-shadow:inset 3px 0 0 var(--ds-warn)}
  .app-tcard--red{box-shadow:inset 3px 0 0 var(--ds-danger)}
  .app-tcard.is-picked{border-color:var(--ds-accent);box-shadow:inset 3px 0 0 var(--ds-accent)}
  .app-tcard.is-open{border-color:var(--ds-line-strong)}
  .app-tcard.is-superseded .app-tcard-main{color:var(--ds-text-3);font-style:italic}
  .app-tcard-body{display:flex;flex-direction:column}
  .app-tcard-row{display:flex;align-items:stretch}
  .app-tcard-stack{flex:1;min-width:0;display:flex;flex-direction:column}
  /* Die Auswahlspalte läuft über die ganze Kartenhöhe — sonst endet ihre Linie mittendrin. */
  .app-tcard-pick{display:flex;align-items:center;justify-content:center;width:44px;flex:none;
    border-right:1px solid var(--ds-line);background:var(--ds-surface-2)}
  .app-tcard-pick input{accent-color:var(--ds-accent);width:20px;height:20px;margin:0}
  .app-tcard-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--ds-3);
    padding:var(--ds-3) var(--ds-4);border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
  .app-tcard-main:active{background:var(--ds-surface-2)}

  .app-tcard-when{display:flex;align-items:baseline;gap:var(--ds-2);min-width:0}
  .app-tcard-date{font-size:var(--ds-fs-md);font-weight:500;flex:none}
  .app-tcard-span{font-size:var(--ds-fs-table);color:var(--ds-text-3);flex:none}
  .app-tcard-state{display:flex;align-items:baseline;gap:var(--ds-1);flex:none}

  .app-tcard-route{display:flex;flex-direction:column;gap:var(--ds-2);min-width:0}
  .app-tcard-leg{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:var(--ds-2);
    align-items:start;min-width:0}
  /* Die Marke reicht über die ganze Etappe — nur so trifft die Haarlinie unten
     auch dann den Zielpunkt, wenn die erste Adresse zwei Zeilen braucht. */
  .app-tcard-mark{position:relative;width:14px;min-height:20px;align-self:stretch}
  .app-tcard-mark::before{content:"";position:absolute;left:3px;top:6px;width:8px;height:8px;
    border-radius:var(--ds-r-dot);box-sizing:border-box}
  .app-tcard-leg--start .app-tcard-mark::before{border:1.5px solid var(--ds-text-3);background:var(--ds-surface)}
  .app-tcard-leg--end .app-tcard-mark::before{background:var(--ds-text-2)}
  /* Haarlinie vom Start- bis zum Zielpunkt — reicht über die Lücke hinweg und
     bleibt richtig, egal ob die erste Adresse eine oder zwei Zeilen braucht. */
  .app-tcard-leg--start .app-tcard-mark::after{content:"";position:absolute;left:6px;top:16px;bottom:-18px;
    width:1px;background:var(--ds-line-strong)}
  .app-tcard-addr{min-width:0;font-size:var(--ds-fs-base);line-height:1.42;color:var(--ds-text);
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
  .app-tcard-coord{display:flex;align-items:center;gap:var(--ds-1);min-width:0;min-height:20px;
    font-family:var(--ds-font-mono);font-size:12px;color:var(--ds-text-3)}
  .app-tcard-coord svg{width:12px;height:12px;flex:none}
  .app-tcard-coord > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .app-tcard-nums{display:flex;align-items:baseline;gap:var(--ds-2);min-width:0}
  .app-tcard-km{font-size:16px;font-weight:600;color:var(--ds-text);font-variant-numeric:tabular-nums}
  .app-tcard-dur{font-size:var(--ds-fs-table);color:var(--ds-text-2)}
  .app-tcard-chev{color:var(--ds-text-3);transition:transform .15s;flex:none;align-self:center}
  .app-tcard.is-open .app-tcard-chev{transform:rotate(180deg)}

  .app-tcard-cat{padding:0 var(--ds-4) var(--ds-3)}
  .app-tcard .app-seg-wide{display:flex;margin:0 var(--ds-4) var(--ds-3);padding:2px;border-radius:var(--ds-r-sm)}
  /* Der Kategorie-Knopf ist die meistbenutzte Fläche der Seite — volle 44 px. */
  .app-tcard .app-seg-wide > button{flex:1;min-width:0;height:44px;padding:0 2px;
    font-size:var(--ds-fs-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app-seg-letter{display:none;font-family:var(--ds-font-mono);font-size:var(--ds-fs-md)}
  /* Unter 360 px reicht die Breite nur noch für die Anfangsbuchstaben. */
  @media (max-width:359px){
    .app-seg-word{display:none}
    .app-seg-letter{display:inline}
  }
  .app-tcard-detail{padding:var(--ds-4);border-top:1px solid var(--ds-line-strong);background:var(--ds-surface-2)}

  /* Summenleiste klebt unten und hält Abstand zum Home-Indikator. */
  .app-sum-m{position:sticky;bottom:0;z-index:var(--ds-z-sticky);display:flex;align-items:center;
    flex-wrap:wrap;gap:0 6px;
    margin-top:var(--ds-2);padding:var(--ds-3) var(--ds-4) calc(var(--ds-3) + var(--ds-safe-b));
    background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md) var(--ds-r-md) 0 0;
    box-shadow:0 -4px 12px -8px rgba(11,18,32,.3);font-size:var(--ds-fs-table);color:var(--ds-text-2)}
  .app-sum-m > span{display:inline-flex;align-items:baseline;gap:var(--ds-1);white-space:nowrap}
  .app-sum-m b{font-family:var(--ds-font-mono);font-size:var(--ds-fs-md);font-weight:500;color:var(--ds-text)}
  .app-sum-m .app-sum-sep{color:var(--ds-text-3);margin-right:var(--ds-1)}
  .app-sum-m .app-sum-open{color:var(--ds-warn)}
  .app-sum-m .ds-btn{flex:none}
  .app-sum-m .ds-spacer{flex:1}
  /* Im Auswahlmodus stehen Knöpfe statt Zahlen in der Leiste — die brechen nicht um. */
  .app-sum-m.is-select{flex-wrap:nowrap;gap:var(--ds-2)}

  /* Übersicht: Kacheln zu zweit, Fahrzeugkarten über die volle Breite. */
  .app-cards{grid-template-columns:1fr}
  .app-vehicle-link .ds-vehicle{position:relative}
  .app-vehicle-link .ds-vehicle::after{content:"";position:absolute;right:var(--ds-4);top:var(--ds-4);
    width:7px;height:7px;border-right:1.5px solid var(--ds-text-3);border-top:1.5px solid var(--ds-text-3);
    transform:rotate(45deg)}
  .app-vehicle-link .ds-vehicle-head{padding-right:var(--ds-4)}

  /* Tacho-Abgleiche als Karten statt sechsspaltiger Tabelle. */
  .app-odo-cards{display:flex;flex-direction:column;gap:var(--ds-2)}
  .app-odo-card{border:1px solid var(--ds-line);border-radius:var(--ds-r-sm);padding:var(--ds-2) var(--ds-3);
    background:var(--ds-surface)}
  .app-odo-card .app-kv{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-2)}

  /* Tachofoto: der Auslöser ist der wichtigste Knopf im Formular. */
  .app-photo [data-pick]{flex:1 1 100%;height:var(--ds-ctrl-h-md);font-size:var(--ds-fs-base)}
  .app-photo [data-pick] svg{width:18px;height:18px}
  .app-photo-thumb{width:112px;height:84px}

  /* Orte: Karte knapp die halbe Höhe, Formular und Liste scrollen darunter. */
  .app-fullmap{height:45dvh;min-height:220px}
  .app-mapsplit{gap:var(--ds-2)}
}

/* --- Live-Karte: Fahrzeugliste (Schreibtisch: Seitenliste) ---------------- */
.app-sheet-grip,.app-sheet-chev{display:none}
.app-sheet-sum{display:flex;align-items:center;gap:var(--ds-2);flex:1;min-width:0}
.app-sheet-count{font-size:var(--ds-fs-sm);color:var(--ds-text-3)}
.app-live-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.app-live-who .ds-plate{font-size:var(--ds-fs-base)}
.app-live-when{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:none;
  font-size:var(--ds-fs-sm);color:var(--ds-text-2)}
.app-live-when b{font-weight:500;color:var(--ds-text)}

/* --- Live-Karte: ziehbares Blatt über der Karte (Telefon) ----------------- */
@media (max-width:900px){
  /* Die Karte füllt den Rest des Bildschirms; unten bleibt der Streifen für das
     Fahrzeug-Blatt frei, damit die OpenStreetMap-Nennung sichtbar bleibt. */
  .app-live{position:relative;display:flex;flex-direction:column;overflow:hidden;
    height:calc(100dvh - var(--ds-topbar-h));padding-top:0;padding-bottom:calc(96px + var(--ds-safe-b))}
  /* Überschrift und Untertitel wiederholen nur die Topbar und den Text der
     Griffleiste — auf dem Telefon kosten sie 90 px Karte. Vom Kopf bleibt der
     Aktualisieren-Knopf, der wie die Zoom-Knöpfe über der Karte schwebt. */
  .app-live .ds-page-head{position:absolute;z-index:var(--ds-z-sticky);margin:0;
    top:var(--ds-2);right:calc(var(--ds-gutter-r) + var(--ds-2))}
  .app-live .ds-page-head > div,.app-live .ds-page-head .ds-spacer{display:none}
  .app-live #liveRefresh{width:44px;height:44px;min-height:44px}
  .app-live #liveRefresh svg{width:18px;height:18px}
  .app-live .app-mapsplit{display:block;flex:1;min-height:0}
  .app-live .app-fullmap{height:100%;min-height:0;border-radius:var(--ds-r-md) var(--ds-r-md) 0 0}

  /* Das Blatt steht immer auf voller Höhe und wird per transform nach unten
     geschoben — sichtbare Höhe = Rastpunkt (peek/half/full), siehe live.js. */
  .app-livesheet{position:fixed;left:0;right:0;bottom:0;z-index:var(--ds-z-tabbar);
    display:flex;flex-direction:column;
    border:0;border-top:1px solid var(--ds-line);border-radius:var(--ds-r-md) var(--ds-r-md) 0 0;
    box-shadow:0 -6px 20px -12px rgba(11,18,32,.4);
    padding-bottom:var(--ds-safe-b);will-change:transform}

  /* Griff + Zusammenfassung = die Zugfläche (96 px hoch, das ist der Peek). */
  .app-livesheet .app-sheet-head{flex-direction:column;align-items:stretch;gap:var(--ds-3);
    padding:12px var(--ds-gutter) 16px;touch-action:none;cursor:grab;
    user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
  .app-livesheet .app-sheet-head:active{cursor:grabbing}
  .app-sheet-grip{display:block;width:40px;height:4px;border-radius:2px;flex:none;
    margin:0 auto;background:var(--ds-line-strong)}
  .app-livesheet .ds-label{display:none}
  .app-livesheet .app-sheet-sum{min-height:52px}
  .app-sheet-count{font-size:var(--ds-fs-md);color:var(--ds-text)}
  .app-sheet-chev{display:block;flex:none;color:var(--ds-text-3);transition:transform .2s}
  .app-livesheet:not(.is-peek) .app-sheet-chev{transform:rotate(180deg)}

  /* Höhe setzt live.js (= sichtbare Resthöhe über dem Griff). */
  .app-livesheet .app-list{flex:none;height:0;overflow:hidden auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .app-livesheet.is-peek .app-list{overflow:hidden}
  .app-livesheet .app-list-row{min-height:56px;padding:var(--ds-2) var(--ds-gutter)}
}
@media (prefers-reduced-motion:reduce){
  .app-livesheet{transition:none !important}
}

/* --- Tachofoto ------------------------------------------------------------ */
.app-photo-body{margin-top:var(--ds-2)}
.app-photo-thumb{width:96px;height:72px;object-fit:cover;border:1px solid var(--ds-line);
  border-radius:var(--ds-r-sm);background:var(--ds-surface-2);flex:none}
.app-photo-thumb.is-clickable{cursor:zoom-in}
.app-photo-full{display:flex;justify-content:center}
.app-photo-full img{max-width:100%;max-height:70vh;border:1px solid var(--ds-line);border-radius:var(--ds-r-md)}
.app-photo-link{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:0;
  color:var(--ds-accent);cursor:pointer}
.app-photo-link:hover{color:var(--ds-accent-hover)}