/* Deals, Fall-Detail, Rechner, Meine Autos, Dokumente.
   Nur Tokens aus app.css (var(--…)), keine Hex-Farben, Klassen mit Präfix .dls-. Keine Bewegung außer den Bausteinen des Systems. */

/* Zeilentext der Listen: Titel und Zeile untereinander (spans in .li__body) */
.dls-view .li__title, .dls-view .li__sub { display: block; }
.dls-view .li__title .demo { margin-left: var(--s1); }

/* ---------- Deals: große Foto-Karten ---------- */
a.dls-case { display: flex; flex-direction: column; gap: var(--s2); min-height: 26rem; padding: var(--s5); background-position: center 28%; }
.dls-case h3 { margin-top: calc(var(--s1) * -1); }
.dls-case__tag { align-self: flex-start; margin-bottom: auto; color: var(--ink); }
.dls-case__fig { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s2); }
.dls-case__go { display: inline-flex; align-items: center; gap: var(--s1); margin-top: var(--s2); min-height: 44px; font-weight: 600; }
.dls-case__go .chev { color: inherit; }
@media (min-width: 1024px) { a.dls-case { min-height: 30rem; } }

/* ---------- Deals: Angebote ohne Foto ---------- */
.dls-offer { display: flex; flex-direction: column; gap: var(--s3); }
.dls-offer[hidden] { display: none; }
.dls-offer__top { display: flex; align-items: center; gap: var(--s3); }
.dls-offer__top .li__body { min-width: 0; }
.dls-offer__fig { display: flex; flex-direction: column; gap: 2px; }
.dls-offer .btn { align-self: flex-start; }

/* ---------- Schlüssel/Wert-Zeilen (Eckdaten, Kosten, Zusammenfassung) ---------- */
.dls-kv { margin: 0; padding: 0; }
.dls-kv > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3);
  padding: var(--s3) 0; border-top: 1px solid var(--line); }
.dls-kv > div:first-child { border-top: 0; padding-top: 0; }
.dls-kv dt { color: var(--ink-2); font-size: var(--fs-sub); }
.dls-kv dd { margin: 0 0 0 auto; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.dls-kv .is-total dt { color: var(--ink); font-weight: 600; }
.dls-kv .is-total dd { font-size: var(--fs-body); }
.card--dark .dls-kv > div { border-top: 0; padding: var(--s2) 0; }
.card--dark .dls-kv dt { color: var(--dark-ink-2); }

/* ---------- Fall-Detail ---------- */
.dls-detail { display: grid; gap: var(--s5); }
.dls-fig { margin: 0; }
.dls-hero { aspect-ratio: 4 / 3; border-radius: var(--r-card); border: 1px solid var(--line); }
.dls-hero img { object-position: center 30%; }
@media (min-width: 900px) {
  .dls-detail { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: var(--s6); }
  .dls-fig { position: sticky; top: var(--s5); }
  .dls-hero { aspect-ratio: 4 / 5; }
}

/* ---------- Rechner ---------- */
.dls-calc { display: grid; gap: var(--s4); }
.dls-calc__side { min-width: 0; }
@media (min-width: 1024px) {
  .dls-calc { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; gap: var(--s5); }
  .dls-calc__side { position: sticky; top: var(--s5); }
}
.dls-cols { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 600px) { .dls-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 9rem); } }
.dls-total { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s3);
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-2); font-size: var(--fs-s); font-weight: 700; letter-spacing: -.017em; }
.dls-confirm { display: flex; align-items: flex-start; gap: var(--s3); margin: 0; color: var(--ok); font-size: var(--fs-sub); font-weight: 600; line-height: 1.4; }
.dls-confirm .check { margin-top: 1px; }
.dls-result .h-l { min-height: 1.2em; }

/* Wahl A | B: zwei gleichwertige Karten */
button.dls-opt { display: flex; flex-direction: column; gap: var(--s2); position: relative; padding: var(--s5); padding-right: calc(var(--s5) + var(--s6)); color: inherit; }
button.dls-opt > span { display: block; }
button.dls-opt[aria-pressed="true"] { background: var(--bg); box-shadow: inset 0 0 0 2px var(--ink); }
.dls-opt__mark { position: absolute; top: var(--s4); right: var(--s4); }
button.dls-opt > .dls-opt__fig { display: flex; flex-direction: column; gap: 2px; }
.dls-opt__go { margin-top: auto; padding-top: var(--s2); font-weight: 600; }

/* ---------- Meine Autos ---------- */
a.dls-car { display: flex; flex-direction: column; gap: var(--s3); }
.dls-car__top { display: flex; align-items: center; gap: var(--s3); }
.dls-car__top .li__body { min-width: 0; }
.dls-ol { list-style: none; margin: 0; }
.dls-car-grid { align-items: start; }

/* ---------- Dokumente ---------- */
.dls-panel[hidden] { display: none; }
.dls-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.dls-fs legend { padding: 0; }
.dls-sheet-h { padding-right: var(--s7); }
.dls-sheetdoc { display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--r-row); background: var(--surface); border: 1px solid var(--line); }
.dls-sheetdoc i { display: block; height: 10px; border-radius: 99px; background: var(--surface-2); }
.dls-sheetdoc i:nth-child(3n) { width: 72%; }
.dls-sheetdoc i:nth-child(4n) { width: 55%; }
.dls-sheetdoc i:first-child { width: 40%; height: 14px; }
/* Text der Fall-Karten sitzt unten auf der dunklen Abdunklung, nicht oben auf hellem Himmel (BI6, F4) */
a.dls-case { justify-content: flex-end; }