/* ============================================================
   ClassicDossier — Komponenten & wiederverwendbare Klassen
   Voraussetzung: tokens.css und fonts.css sind geladen.
   Framework-neutral (kein JS nötig). Datengetriebene Werte
   (Balkenbreiten, Segment-Flex) werden per inline-style gesetzt
   — im Jinja2-Template z. B. style="width: {{ pct }}%".
   Namenskonvention: .cd-<block>__<element> --<modifier>
   ============================================================ */

/* ---------- Typografie-Helfer ---------- */
.cd-eyebrow {
  font-family: var(--cd-font-body);
  font-size: var(--cd-fs-eyebrow);
  font-weight: var(--cd-fw-bold);
  letter-spacing: var(--cd-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cd-ink-soft);
  line-height: 1.3;
}
.cd-eyebrow--accent { color: var(--cd-accent); }
.cd-eyebrow--faint  { color: var(--cd-ink-faint); }

.cd-display {                       /* Serifen-Überschrift */
  font-family: var(--cd-font-display);
  font-weight: var(--cd-fw-semi);
  letter-spacing: var(--cd-tracking-head);
  line-height: var(--cd-lh-head);
  color: var(--cd-ink);
  margin: 0;
  text-wrap: balance;
}
.cd-display--page { font-size: var(--cd-fs-head-page); }
.cd-display--card { font-size: var(--cd-fs-head-card); }
.cd-display--sm   { font-size: var(--cd-fs-head-sm); }

.cd-figure {                        /* Zahlen / Beträge — immer so setzen */
  font-family: var(--cd-font-body);
  font-weight: var(--cd-fw-figure);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--cd-ink);
}
.cd-figure--display { font-size: var(--cd-fs-display); line-height: 1; }
.cd-figure--m       { font-size: var(--cd-fs-num-m); }
.cd-figure--card    { font-size: var(--cd-fs-num-card); }

.cd-meta { font-size: var(--cd-fs-meta); color: var(--cd-ink-soft); }

/* ---------- Flächen ---------- */
.cd-card {
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-card);
}
.cd-card--pad { padding: var(--cd-space-6); }
.cd-hairline { border: 0; border-top: 1px solid var(--cd-line); margin: 0; }

/* ---------- Buttons (Mindesthöhe 48px) ---------- */
.cd-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-space-2);
  min-height: var(--cd-touch-min);
  padding: 13px 22px;
  border-radius: var(--cd-radius-button);
  font-family: var(--cd-font-body);
  font-size: 0.91rem;
  font-weight: var(--cd-fw-semi);
  line-height: 1;
  cursor: pointer;
  border: 1px solid var(--cd-ink);
  background: var(--cd-ink);
  color: var(--cd-paper);
  text-decoration: none;
  transition: opacity 0.12s ease;
}
.cd-btn:hover { opacity: 0.86; }
.cd-btn--accent { background: var(--cd-accent); border-color: var(--cd-accent); color: #fff; }
.cd-btn--ghost  { background: transparent; color: var(--cd-ink); border-color: var(--cd-line); }
.cd-btn--ghost:hover { border-color: var(--cd-ink-faint); opacity: 1; }

/* ---------- Filter-Chips ---------- */
.cd-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--cd-touch-min);
  padding: 10px 18px;
  border-radius: var(--cd-radius-pill);
  border: 1px solid var(--cd-line);
  background: var(--cd-surface);
  color: var(--cd-ink-soft);
  font-family: var(--cd-font-body);
  font-size: 0.86rem;
  font-weight: var(--cd-fw-semi);
  cursor: pointer;
  white-space: nowrap;
}
.cd-chip:hover { border-color: var(--cd-ink-faint); color: var(--cd-ink); }
.cd-chip--on { background: var(--cd-ink); color: var(--cd-paper); border-color: var(--cd-ink); font-weight: var(--cd-fw-bold); }

/* ---------- Status (Punkt + Label) ---------- */
.cd-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--cd-fs-meta); font-weight: var(--cd-fw-semi); color: var(--cd-ink); white-space: nowrap; }
.cd-status__dot { width: 8px; height: 8px; border-radius: var(--cd-radius-circle); flex: none; background: var(--cd-ink-faint); }
.cd-status--pruefen     .cd-status__dot { background: var(--cd-accent); }   /* Zu prüfen */
.cd-status--bestaetigt  .cd-status__dot { background: var(--cd-positive); } /* Geprüft / Bestätigt */
.cd-status--fahrbereit  .cd-status__dot { background: var(--cd-positive); }
.cd-status--restaurierung .cd-status__dot { background: var(--cd-warn); }   /* In Restaurierung */
.cd-status--ueberfaellig .cd-status__dot { background: var(--cd-danger); }

/* Status als Pille (z. B. auf Foto in der Fahrzeugkarte) */
.cd-status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-pill);
}
.cd-status-pill .cd-status { font-size: var(--cd-fs-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; font-weight: var(--cd-fw-bold); }

/* ---------- Foto-Platzhalter / Leerzustand ---------- */
.cd-photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cd-surface-2);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,0.045) 14px 15px);
  overflow: hidden;
}
.cd-photo__tag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd-ink-faint);
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  padding: 5px 9px;
  border-radius: 3px;
  text-align: center;
}
/* Tatsächliches Bild ersetzt den Platzhalter 1:1 (object-fit: cover) */
.cd-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   BILANZ-BALKEN — Investiert vs. Marktwert
   Beide Balken auf gemeinsamen Maßstab skaliert:
   Breite = Wert / max(invest, wert) * 100%  (inline gesetzt).
   ============================================================ */
.cd-bilanz { display: flex; flex-direction: column; gap: var(--cd-space-5); }
.cd-bilanz__row { display: flex; flex-direction: column; gap: 8px; }
.cd-bilanz__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cd-bilanz__label { font-size: 0.92rem; color: var(--cd-ink-soft); }
.cd-bilanz__value { font-size: var(--cd-fs-num-m); }   /* kombiniere mit .cd-figure */
.cd-bilanz__track {
  height: var(--cd-bar-track);
  background: var(--cd-line-soft);
  border-radius: var(--cd-radius-pill);
  overflow: hidden;
}
.cd-bilanz__fill { height: 100%; border-radius: var(--cd-radius-pill); background: var(--cd-ink); }
.cd-bilanz__fill--invest { background: var(--cd-accent); }  /* Investition = Cognac */
.cd-bilanz__fill--value  { background: var(--cd-ink); }     /* Marktwert = Ink/Navy-Tinte */

/* Begleitsatz unter den Balken */
.cd-bilanz__note { display: flex; align-items: flex-start; gap: 11px; font-size: var(--cd-fs-body); line-height: 1.45; }
.cd-bilanz__note-dot { width: 9px; height: 9px; border-radius: var(--cd-radius-circle); background: var(--cd-positive); flex: none; margin-top: 6px; }

/* ============================================================
   KATEGORIE-VERTEILUNG
   1) Feines Segmentband (Überblick) — Segment-Flex = Betrag (inline)
   2) Detaillierte Balkenliste (Label · Betrag · % · Balken)
   ============================================================ */
.cd-distribution { display: flex; height: var(--cd-distribution); border-radius: var(--cd-radius-pill); overflow: hidden; gap: 1.5px; }
.cd-distribution__seg { height: 100%; }   /* flex: <betrag> inline; Farbe via .cd-c1..8 */

.cd-catbars { display: flex; flex-direction: column; gap: var(--cd-space-3); }
.cd-catbar__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 10px; }
.cd-catbar__label { display: inline-flex; align-items: center; gap: 9px; font-size: 0.92rem; color: var(--cd-ink); }
.cd-catbar__dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.cd-catbar__amount { font-size: 0.95rem; font-weight: var(--cd-fw-bold); font-variant-numeric: tabular-nums; }
.cd-catbar__pct { font-size: 0.82rem; color: var(--cd-ink-soft); width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.cd-catbar__values { display: inline-flex; gap: 10px; align-items: baseline; }
.cd-catbar__track { height: var(--cd-catbar-track); background: var(--cd-line-soft); border-radius: var(--cd-radius-pill); overflow: hidden; }
.cd-catbar__fill { height: 100%; border-radius: var(--cd-radius-pill); }   /* Breite inline; Farbe via .cd-c1..8 */

/* Diagramm-Farb-Utilities (gleiche Reihenfolge wie Datenkategorien) */
.cd-c1 { background-color: var(--cd-chart-1); }
.cd-c2 { background-color: var(--cd-chart-2); }
.cd-c3 { background-color: var(--cd-chart-3); }
.cd-c4 { background-color: var(--cd-chart-4); }
.cd-c5 { background-color: var(--cd-chart-5); }
.cd-c6 { background-color: var(--cd-chart-6); }
.cd-c7 { background-color: var(--cd-chart-7); }
.cd-c8 { background-color: var(--cd-chart-8); }

/* ============================================================
   FAHRZEUG-KARTE (Garage)
   ============================================================ */
.cd-vehicle-card {
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-card);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.cd-vehicle-card:hover { box-shadow: var(--cd-shadow-card-hover); transform: translateY(-2px); }
.cd-vehicle-card__media { position: relative; }
.cd-vehicle-card__photo { height: 184px; border-bottom: 1px solid var(--cd-line); }
.cd-vehicle-card__badge { position: absolute; top: 14px; left: 14px; }
.cd-vehicle-card__body { padding: 22px 26px 24px; }
.cd-vehicle-card__title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cd-vehicle-card__year { font-size: var(--cd-fs-meta); color: var(--cd-ink-soft); flex: none; margin-top: 6px; }
.cd-vehicle-card__sub { font-size: var(--cd-fs-meta); color: var(--cd-ink-soft); margin-top: 8px; }

/* Zwei Werte nebeneinander (Investiert | Marktwert) */
.cd-valuepair { display: flex; gap: 30px; margin-top: 20px; }
.cd-valuepair__item + .cd-valuepair__item { border-left: 1px solid var(--cd-line); padding-left: 30px; }
.cd-valuepair__label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cd-ink-soft); font-weight: var(--cd-fw-bold); }
.cd-valuepair__value { font-size: var(--cd-fs-num-card); margin-top: 6px; }  /* + .cd-figure */

.cd-vehicle-card__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; }
.cd-vehicle-card__footer-note { font-size: var(--cd-fs-meta); color: var(--cd-ink-soft); }
.cd-delta-pos { font-size: var(--cd-fs-meta); font-weight: var(--cd-fw-bold); color: var(--cd-positive); }
.cd-delta-neg { font-size: var(--cd-fs-meta); font-weight: var(--cd-fw-bold); color: var(--cd-warn); }

/* ---------- Summen-Zeile (Garage-Kopf) ---------- */
.cd-summary { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-radius-card); }
.cd-summary__cell { padding: 24px 28px; }
.cd-summary__cell + .cd-summary__cell { border-left: 1px solid var(--cd-line); }
.cd-summary__value { font-size: 2.05rem; white-space: nowrap; margin-top: 10px; }   /* + .cd-figure */
.cd-summary__sub { font-size: var(--cd-fs-meta); color: var(--cd-ink-soft); margin-top: 7px; }

/* ============================================================
   TABELLE (Belegliste)
   ============================================================ */
.cd-table { background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-radius-card); overflow: hidden; }
.cd-table__head, .cd-table__row { display: grid; align-items: center; gap: 12px; padding: 16px 24px; }
.cd-table__head {
  border-bottom: 2px solid var(--cd-ink);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cd-ink-soft); font-weight: var(--cd-fw-bold);
}
.cd-table__row { border-bottom: 1px solid var(--cd-line); }
.cd-table__row:last-child { border-bottom: 0; }
.cd-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   KARTEIKARTE / LOGBUCH
   ============================================================ */
.cd-stamm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 36px; }
.cd-stamm__item { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--cd-line); padding: 13px 0; }
.cd-stamm__key { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cd-ink-soft); font-weight: var(--cd-fw-bold); }
.cd-stamm__val { font-size: 1.02rem; font-variant-numeric: tabular-nums; }

.cd-timeline { position: relative; padding-left: 30px; }
.cd-timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--cd-line); }
.cd-timeline__item { position: relative; margin-bottom: 26px; }
.cd-timeline__item:last-child { margin-bottom: 0; }
.cd-timeline__dot { position: absolute; left: -30px; top: 4px; width: 16px; height: 16px; border-radius: var(--cd-radius-circle); background: var(--cd-accent); border: 3px solid var(--cd-paper); }
.cd-timeline__date { font-size: var(--cd-fs-meta); color: var(--cd-ink-soft); font-variant-numeric: tabular-nums; }
.cd-timeline__title { font-family: var(--cd-font-display); font-weight: var(--cd-fw-semi); font-size: 1.25rem; margin-top: 4px; }
.cd-timeline__body { font-size: var(--cd-fs-body); color: var(--cd-ink-soft); line-height: 1.5; margin-top: 6px; }

/* ============================================================
   SHELL — Masthead (mobil) / Sidebar (Desktop)
   ============================================================ */
.cd-masthead { background: var(--cd-masthead); color: var(--cd-masthead-ink); }
.cd-on-dark-accent { color: var(--cd-accent-on-dark); }

.cd-sidebar { background: var(--cd-masthead); color: var(--cd-masthead-ink); }
.cd-navitem {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--cd-touch-min);
  padding: 12px 14px; border-radius: var(--cd-radius-button);
  color: rgba(255,255,255,0.66); cursor: pointer;
}
.cd-navitem:hover { background: rgba(255,255,255,0.06); color: #fff; }
.cd-navitem--active { background: rgba(255,255,255,0.10); color: #fff; }
.cd-badge-count { font-size: 0.72rem; font-weight: var(--cd-fw-bold); background: var(--cd-accent); color: #fff; border-radius: var(--cd-radius-pill); padding: 1px 8px; font-variant-numeric: tabular-nums; }

/* Tabs (Fahrzeug-Detail) */
.cd-tabs { display: flex; gap: 26px; }
.cd-tab { position: relative; min-height: var(--cd-touch-min); display: flex; align-items: center; padding: 13px 2px; cursor: pointer; color: var(--cd-ink-soft); font-size: 0.95rem; font-weight: var(--cd-fw-semi); background: none; border: 0; border-bottom: 2px solid transparent; font-family: inherit; }
.cd-tab:hover { color: var(--cd-ink); }
.cd-tab--active { color: var(--cd-ink); border-bottom-color: var(--cd-accent); }

/* ---------- Layout-Helfer ---------- */
.cd-page { max-width: 1000px; margin: 0 auto; padding: var(--cd-page-pad-desktop); }
@media (max-width: 640px) { .cd-page { padding: var(--cd-page-pad-mobile); } }