/* =========================================================================
   CarOnSale · Vehicle Insights – Komponenten-Layer
   Basiert vollständig auf dem COS-Design-System (cos-tokens.css).
   Regeln: keine Hex-/Shadow-/Radius-/Spacing-Literale – nur var(--cos-*).
   Schriftgrößen/Zeilenhöhen folgen der Typo-Rampe (§2) und den
   Komponenten-Specs (§4) des Design-Systems; dafür gibt es keine Tokens.
   Fonts: Poppins 400/500/600, selbst gehostet (DSGVO – kein CDN).
   ========================================================================= */
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/poppins-400.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/poppins-500.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/poppins-600.ttf") format("truetype");
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Klassen mit eigenem display (grid/flex) würden [hidden] sonst überstimmen. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { font-size: 14px; line-height: 20px; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }
:focus-visible {
  outline: var(--cos-border-width-focus) solid var(--cos-border-color-focus);
  outline-offset: var(--cos-space-2);
  border-radius: var(--cos-corner-s);
}

/* Zahlen in Preisen/Tabellen laufen tabellarisch */
.num, .pv, .sh-km, .spec .v, .load-elapsed { font-variant-numeric: tabular-nums; }

/* ---------- Buttons (§4) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--cos-gap-xs);
  padding: var(--cos-pad-s) var(--cos-pad-l);
  border-radius: var(--cos-corner-s);
  border: var(--cos-border-width-default) solid transparent;
  font-weight: 500; font-size: 14px; line-height: 18px; letter-spacing: .07px;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--cos-black); color: var(--cos-white); }
.btn-primary:hover { background: var(--cos-black-light-2); }
.btn-secondary { background: var(--cos-grey-light-1); color: var(--cos-black); }
.btn-secondary:hover { background: var(--cos-grey); }
.btn-ghost { background: transparent; color: var(--cos-black); }
.btn-ghost:hover { background: var(--cos-grey-light-2); }
/* Gelb nur für die eine entscheidende CTA pro Screen */
.btn-accent { background: var(--cos-accent); color: var(--cos-fg-on-yellow); }
.btn-accent:hover { background: var(--cos-accent-hover); color: var(--cos-fg-on-black); }
.btn-lg { padding: var(--cos-pad-m) var(--cos-space-20); font-size: 16px; line-height: 20px; }
.btn-sm { padding: var(--cos-space-4) var(--cos-pad-m); font-size: 12px; line-height: 16px; }
.btn:disabled {
  background: var(--cos-grey-light-1); color: var(--cos-grey);
  cursor: not-allowed; transform: none;
}
.btn-block { width: 100%; }

/* ---------- Badges (§4) ---------- */
.verdict {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--cos-gap-2xs);
  font-size: 12px; line-height: 16px; font-weight: 500;
  border-radius: var(--cos-corner-s);
  padding: var(--cos-space-2) var(--cos-space-8);
  white-space: nowrap;
}
.verdict.ok   { background: var(--cos-success-bg); color: var(--cos-success-strong); }
.verdict.warn { background: var(--cos-warning-bg); color: var(--cos-warning-strong); }
.verdict.info { background: var(--cos-bg-subtle);  color: var(--cos-fg-muted); }
.verdict.bad  { background: var(--cos-error-bg);   color: var(--cos-error-strong); }

/* Quellen-/Hinweiszeile unter Kartentiteln */
.src { display: block; font-size: 12px; line-height: 16px; color: var(--cos-fg-muted); margin-top: var(--cos-space-4); }

/* Ausstattungs-Tags */
.tags { display: flex; flex-wrap: wrap; gap: var(--cos-gap-xs); margin-top: var(--cos-space-12); }
.tag {
  font-size: 12px; line-height: 16px; font-weight: 500;
  background: var(--cos-bg-subtle); color: var(--cos-fg);
  border-radius: var(--cos-corner-s);
  padding: var(--cos-space-2) var(--cos-space-8);
}
.tag code { font-family: var(--cos-font-sans); font-size: 12px; font-weight: 500; color: var(--cos-fg-muted); margin-right: var(--cos-space-4); }

/* ---------- Topbar (schwarzes Chrome, 64px) ---------- */
.topbar { background: var(--cos-bg-inverse); color: var(--cos-fg-on-black); position: sticky; top: 0; z-index: 60; }
.topbar-inner {
  max-width: var(--cos-container); margin: 0 auto; height: var(--cos-space-64);
  padding: 0 var(--cos-space-24);
  display: flex; align-items: center; gap: var(--cos-gap-m);
}
.wordmark { font-weight: 600; font-size: 20px; line-height: 28px; color: var(--cos-fg-on-black); text-decoration: none; }
.wordmark:hover { color: var(--cos-fg-on-black); text-decoration: none; }
.wordmark b { font-weight: 600; color: var(--cos-yellow); }
.topbar .divider { width: var(--cos-border-width-default); height: var(--cos-space-20); background: var(--cos-grey-dark-3); }
.topbar .feature {
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cos-grey);
  /* Einzeilig bleiben: seit der Export-Schalter daneben liegt, wäre auf
     dem Handy sonst der Produktname zweizeilig und die Leiste schief. */
  white-space: nowrap;
}
.topbar .spacer { flex: 1; }
.livechip {
  display: inline-flex; align-items: center; gap: var(--cos-gap-xs);
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--cos-grey-light-1);
  background: var(--cos-black-light-1);
  border: var(--cos-border-width-default) solid var(--cos-grey-dark-3);
  border-radius: var(--cos-corner-round);
  padding: var(--cos-space-4) var(--cos-space-12);
}

/* PDF-Export in der Kopfleiste: die einzige Aktion dort, deshalb in der
   Markenfarbe – sie ist auf Schwarz der einzige Akzent und damit ohne
   Suchen zu finden. */
.topbar-pdf {
  display: inline-flex; align-items: center; gap: var(--cos-gap-xs);
  font-family: inherit; font-size: 13px; line-height: 20px; font-weight: 600;
  color: var(--cos-fg-on-yellow); background: var(--cos-yellow);
  border: var(--cos-border-width-default) solid var(--cos-yellow);
  border-radius: var(--cos-corner-round);
  padding: var(--cos-space-8) var(--cos-space-16);
  cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.topbar-pdf:hover { background: var(--cos-yellow-light-1); border-color: var(--cos-yellow-light-1); }
.topbar-pdf:active { background: var(--cos-yellow-dark-1); border-color: var(--cos-yellow-dark-1); }
.topbar-pdf:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,205,25,.45); }
.topbar-pdf svg { flex: none; }
/* Auf schmalen Schirmen konkurrieren Live-Chip und Export um dieselbe
   Zeile – der Chip ist Beiwerk, der Export die Aktion. */
@media (max-width: 750px) {
  .topbar .livechip { display: none; }
}
@media (max-width: 480px) {
  .topbar-pdf span { display: none; }
  .topbar-pdf { padding: var(--cos-space-8); }
}

/* ---------- Views ---------- */
.view { display: none; }
.view.active { display: block; }

/* ---------- View 1: Eingabe ---------- */
#view-input { background: var(--cos-bg-inverse); min-height: calc(100vh - var(--cos-space-64)); }
.hero {
  max-width: var(--cos-container); margin: 0 auto;
  padding: var(--cos-space-80) var(--cos-space-24) var(--cos-space-96);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--cos-gap-3xl);
  align-items: center;
}
.hero h1 { font-weight: 600; font-size: 32px; line-height: 42px; color: var(--cos-fg-on-black); }
.hero h1 .hl { color: var(--cos-yellow); }
.hero .sub { color: var(--cos-grey); margin-top: var(--cos-space-16); font-size: 16px; line-height: 24px; max-width: 48ch; }
.hero .kpis { display: flex; gap: var(--cos-gap-xl); margin-top: var(--cos-space-32); }
.kpi .num { font-weight: 600; font-size: 26px; line-height: 32px; color: var(--cos-fg-on-black); }
.kpi .lbl { font-size: 12px; line-height: 16px; color: var(--cos-grey-dark-1); margin-top: var(--cos-space-4); max-width: 18ch; }

.vin-card {
  background: var(--cos-surface); border: var(--cos-border-width-default) solid var(--cos-border);
  border-radius: var(--cos-corner-l);
  padding: var(--cos-pad-2xl) var(--cos-pad-2xl) var(--cos-pad-xl);
}
.vin-card h2 { font-weight: 600; font-size: 20px; line-height: 28px; color: var(--cos-fg-strong); }
.vin-card > p { color: var(--cos-fg-muted); font-size: 14px; line-height: 20px; margin-top: var(--cos-space-4); }
.vin-field { margin-top: var(--cos-space-20); }
.vin-field label {
  display: block; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cos-fg-muted); margin-bottom: var(--cos-space-8);
}
.vin-field input {
  width: 100%; height: var(--cos-space-40);
  font-size: 14px; line-height: 20px;
  padding: 0 var(--cos-pad-m);
  border: var(--cos-border-width-default) solid var(--cos-border-color-strong);
  border-radius: var(--cos-corner-s);
  background: var(--cos-bg); color: var(--cos-fg);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
/* "optional" am Label – bewusst leise, damit das Feld nicht wie eine
   Pflichtangabe wirkt und den Submit nicht ausbremst. */
.vin-field label .opt {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--cos-fg-subtle);
}
.vin-field input#vin { text-transform: uppercase; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.vin-field input#mileage { font-variant-numeric: tabular-nums; }
.vin-field input:focus { outline: none; border-color: var(--cos-fg-strong); box-shadow: var(--cos-focus-ring); }
.vin-field input[aria-invalid="true"] {
  border-width: var(--cos-border-width-error);
  border-color: var(--cos-border-color-error);
}
.hint { font-size: 12px; line-height: 16px; color: var(--cos-fg-muted); margin-top: var(--cos-space-8); }
.error { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--cos-error); margin-top: var(--cos-space-8); }

.consent {
  display: flex; gap: var(--cos-gap-xs); align-items: flex-start;
  font-size: 12px; line-height: 16px; color: var(--cos-fg-muted); margin-top: var(--cos-space-20);
}
.consent input {
  appearance: none; -webkit-appearance: none;
  width: var(--cos-space-16); height: var(--cos-space-16); flex: 0 0 var(--cos-space-16);
  margin-top: var(--cos-space-2);
  background: var(--cos-grey-light-2);
  border: var(--cos-border-width-default) solid var(--cos-border-strong);
  border-radius: var(--cos-corner-s);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms ease, border-color 150ms ease;
}
.consent input:checked {
  background-color: var(--cos-yellow); border-color: var(--cos-yellow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  background-size: var(--cos-space-12) var(--cos-space-12);
}
.consent a { color: var(--cos-fg); font-weight: 500; text-decoration: underline; text-underline-offset: var(--cos-space-4); }
.consent a:hover { color: var(--cos-fg-strong); }
.btn-primary.btn-block, .btn-accent.btn-block { margin-top: var(--cos-space-16); }
.trust {
  margin-top: var(--cos-space-20); padding-top: var(--cos-space-16);
  border-top: var(--cos-border-width-default) solid var(--cos-divider);
  font-size: 12px; line-height: 16px; color: var(--cos-fg-muted);
}
.trust b { color: var(--cos-fg); font-weight: 500; }

/* ---------- View 2: Laden ---------- */
#view-loading {
  background: var(--cos-bg-inverse); min-height: calc(100vh - var(--cos-space-64));
  display: none; align-items: center; justify-content: center;
  padding: var(--cos-space-40) var(--cos-space-24);
}
#view-loading.active { display: flex; }
.load-card {
  background: var(--cos-surface); border: var(--cos-border-width-default) solid var(--cos-border);
  border-radius: var(--cos-corner-l);
  padding: var(--cos-pad-2xl); width: min(540px, 100%);
}
.load-card h2 { font-weight: 600; font-size: 20px; line-height: 28px; color: var(--cos-fg-strong); }
.load-card .vin-echo {
  font-size: 12px; line-height: 16px; color: var(--cos-fg-muted);
  margin-top: var(--cos-space-4); letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
.load-steps { margin-top: var(--cos-space-24); display: flex; flex-direction: column; gap: var(--cos-gap-s); }
.load-step {
  display: flex; align-items: center; gap: var(--cos-gap-s);
  font-size: 14px; line-height: 20px; color: var(--cos-fg-subtle);
  transition: color 200ms ease;
}
.load-step.running, .load-step.done { color: var(--cos-fg); }
.load-step.failed { color: var(--cos-fg-muted); }
.ls-icon { width: var(--cos-space-24); height: var(--cos-space-24); flex: 0 0 var(--cos-space-24); display: inline-flex; align-items: center; justify-content: center; }
.ls-icon svg { width: var(--cos-space-16); height: var(--cos-space-16); display: block; }
.spinner {
  width: var(--cos-space-16); height: var(--cos-space-16);
  border: var(--cos-border-width-hover) solid var(--cos-grey-light-1);
  border-top-color: var(--cos-fg-strong);
  border-radius: var(--cos-corner-round);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.check {
  width: var(--cos-space-20); height: var(--cos-space-20); flex: 0 0 var(--cos-space-20);
  border-radius: var(--cos-corner-round);
  background: var(--cos-success-bg); color: var(--cos-success-strong);
  display: inline-flex; align-items: center; justify-content: center;
}
.check svg { width: var(--cos-space-12); height: var(--cos-space-12); display: block; }
.load-step.failed .check { background: var(--cos-bg-subtle); color: var(--cos-fg-muted); }
.ls-hint {
  margin-left: auto; font-size: 12px; line-height: 16px; color: var(--cos-fg-muted);
  background: var(--cos-bg-subtle); border-radius: var(--cos-corner-round);
  padding: var(--cos-space-2) var(--cos-space-8); white-space: nowrap;
}
.load-bar {
  height: var(--cos-space-4); background: var(--cos-bg-muted);
  border-radius: var(--cos-corner-round); margin-top: var(--cos-space-24); overflow: hidden;
}
.load-bar i {
  display: block; height: 100%; width: 0;
  background: var(--cos-fg-strong); border-radius: var(--cos-corner-round);
  transition: width 200ms ease;
}
.load-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--cos-gap-s); margin-top: var(--cos-space-12); min-height: var(--cos-space-20);
}
.load-live { display: inline-flex; align-items: center; gap: var(--cos-gap-xs); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--cos-fg); }
.pulse-dot { width: var(--cos-space-8); height: var(--cos-space-8); border-radius: var(--cos-corner-round); background: var(--cos-success); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.load-elapsed { font-size: 12px; line-height: 16px; color: var(--cos-fg-muted); }
.load-notice {
  margin-top: var(--cos-space-16); padding: var(--cos-pad-m) var(--cos-pad-l);
  border-radius: var(--cos-corner-m);
  background: var(--cos-info-bg);
  border: var(--cos-border-width-default) solid var(--cos-cyan-light-1);
  font-size: 12px; line-height: 16px; color: var(--cos-info-strong);
}
.load-notice strong { font-weight: 600; }

/* ---------- View 3: Dashboard ---------- */
.id-strip { background: var(--cos-bg-inverse); color: var(--cos-fg-on-black); padding: var(--cos-space-32) 0; }
.id-inner {
  max-width: var(--cos-container); margin: 0 auto; padding: 0 var(--cos-space-24);
  display: grid; grid-template-columns: 1fr auto; gap: var(--cos-gap-xl); align-items: center;
}
.id-eyebrow {
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cos-yellow);
}
.id-title { font-weight: 600; font-size: 32px; line-height: 44px; color: var(--cos-fg-on-black); margin-top: var(--cos-space-4); }
.id-meta { display: flex; flex-wrap: wrap; gap: var(--cos-gap-xs); margin-top: var(--cos-space-12); }
.meta-chip {
  background: var(--cos-black-light-1);
  border: var(--cos-border-width-default) solid var(--cos-grey-dark-3);
  border-radius: var(--cos-corner-round);
  padding: var(--cos-space-4) var(--cos-space-12);
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--cos-grey-light-1);
}
.id-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cos-gap-m); margin-top: var(--cos-space-12); }
.id-vin { font-size: 12px; line-height: 16px; color: var(--cos-grey-dark-1); letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* Datenabdeckung: kompakter Ring statt des vorherigen 230-px-Halbkreises.
   Sie sagt etwas über die Vollständigkeit des Reports, nicht über das Auto –
   und darf darum nicht das größte Element der Seite sein. */
.cov { display: inline-flex; align-items: center; gap: var(--cos-gap-2xs); }
.cov-ring { flex: 0 0 auto; }
.cov-track { stroke: var(--cos-grey-dark-3); }
.cov-arc { stroke: var(--cos-yellow); transition: stroke-dashoffset 200ms ease; }
.cov-txt { font-size: 12px; line-height: 16px; color: var(--cos-grey); }
.cov-txt b { color: var(--cos-fg-on-black); font-weight: 600; font-variant-numeric: tabular-nums; }
.cov-txt em { color: var(--cos-yellow); font-style: normal; }
.cov-txt em:not(:empty)::before { content: "· "; color: var(--cos-grey-dark-1); }

/* ---------- "Auf einen Blick": die vier Entscheidungs-Kacheln ---------- */
.verdicts-wrap { max-width: var(--cos-container); margin: 0 auto; padding: 0 var(--cos-space-24); }
.verdicts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cos-gap-s);
  margin-top: var(--cos-space-8);
}
/* Die Kacheln sind Sprünge in die Detailbereiche – ohne Beschriftung sah man
   ihnen das nicht an. */
.verdicts-hint {
  margin-top: var(--cos-space-24);
  font-size: 12px; line-height: 16px; color: var(--cos-grey-dark-1);
}
.vtile {
  display: flex; flex-direction: column; gap: var(--cos-space-2);
  text-align: left; cursor: pointer; font: inherit;
  background: var(--cos-black-light-1);
  border: var(--cos-border-width-default) solid var(--cos-grey-dark-3);
  border-left-width: 3px;
  border-radius: var(--cos-corner-m);
  padding: var(--cos-pad-m) var(--cos-pad-l);
  transition: background 150ms ease, border-color 150ms ease;
}
.vtile:hover { background: var(--cos-black-light-2); border-color: var(--cos-grey-dark-2); }
.vtile:focus-visible { outline: var(--cos-border-width-focus) solid var(--cos-yellow); outline-offset: 2px; }
.vt-l { font-size: 12px; line-height: 16px; color: var(--cos-grey); }
.vt-v {
  font-weight: 600; font-size: 26px; line-height: 32px; color: var(--cos-fg-on-black);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vt-s { font-size: 12px; line-height: 16px; color: var(--cos-grey-dark-1); }
/* Der Befund trägt Farbe an der Kante – kein Text wird dadurch ersetzt. */
.vtile.lvl-accent { border-left-color: var(--cos-yellow); }
.vtile.lvl-ok     { border-left-color: var(--cos-green); }
.vtile.lvl-warn   { border-left-color: var(--cos-orange); }
.vtile.lvl-bad    { border-left-color: var(--cos-red); }
.vtile.lvl-muted  { border-left-color: var(--cos-grey-dark-2); }
.vtile.lvl-warn .vt-s { color: var(--cos-orange); }
.vtile.lvl-bad .vt-s  { color: var(--cos-red); }

/* ---------- Kapitel-Leiste ----------
   Kein Umschalter, ein Inhaltsverzeichnis: alle Kapitel liegen auf derselben
   Seite, die Leiste sagt nur, wo man ist und was noch kommt. Sie muss darum
   flach aussehen (Chips in einer Zeile, kein Rahmen um die Gruppe) – eine
   Schiene mit erhabener Kachel würde wieder als Segmented Control gelesen und
   den Eindruck erzeugen, dass die anderen Kapitel gerade nicht da sind.
   Der Punkt je Chip trägt den Befund des Kapitels, der Zähler die Zahl der
   offenen Punkte; beide werden aus dem Kapitel-Kopf gelesen. */
.repnav {
  position: sticky; top: var(--cos-space-64); z-index: 50;
  background: var(--cos-bg);
  border-bottom: var(--cos-border-width-default) solid var(--cos-border);
}
.repnav-inner {
  max-width: var(--cos-container); margin: 0 auto;
  padding: var(--cos-space-8) var(--cos-space-24);
  display: flex; align-items: center; gap: var(--cos-gap-s);
}
.repnav-track {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--cos-space-4);
  overflow-x: auto; scrollbar-width: none;
}
.repnav-track::-webkit-scrollbar { display: none; }
/* Weiche Kante rechts, aber NUR wenn die Leiste tatsächlich scrollt (die
   Klasse setzt JS, CSS kann Scrollbarkeit nicht abfragen). Ein hart
   abgeschnittener Chip liest sich wie ein Layoutfehler, eine auslaufende Kante
   wie "hier geht es weiter" – auf dem Desktop, wo alle Kapitel hineinpassen,
   wäre dieselbe Kante dagegen ein grundlos verblasster letzter Chip. */
@supports (mask-image: linear-gradient(90deg, #000, transparent)) {
  .repnav-track.is-scrollable {
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
}
.repnav-chip {
  flex: 0 0 auto; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--cos-gap-3xs);
  color: var(--cos-fg-muted); background: none;
  border: var(--cos-border-width-default) solid transparent;
  border-radius: var(--cos-corner-round);
  padding: var(--cos-space-4) var(--cos-pad-m) var(--cos-space-4) var(--cos-space-8);
  font-size: 13px; line-height: 20px; white-space: nowrap;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.repnav-chip:hover { color: var(--cos-fg-strong); background: var(--cos-bg-subtle); }
.repnav-chip:focus-visible { outline: var(--cos-border-width-focus) solid var(--cos-border-color-focus); outline-offset: 1px; }
/* Gelesenes Kapitel: der Scroll-Spy markiert, wo man steht. Bewusst nur
   Fläche + Rahmen, keine Elevation – die Leiste bleibt Orientierung, nicht
   Bedienelement mit Zuständen. */
.repnav-chip.is-active {
  color: var(--cos-fg-strong); background: var(--cos-surface);
  border-color: var(--cos-border-strong); font-weight: 600;
}
.repnav-no {
  flex: none; font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--cos-fg-subtle); font-variant-numeric: tabular-nums;
  min-width: var(--cos-space-12); text-align: right;
}
.repnav-chip.is-active .repnav-no { color: var(--cos-fg-muted); }
.repnav-l { min-width: 0; }
.repnav-dot {
  flex: none; width: 6px; height: 6px; border-radius: var(--cos-corner-round);
  background: var(--cos-grey-dark-2);
}
.repnav-dot.lvl-ok   { background: var(--cos-success); }
.repnav-dot.lvl-warn { background: var(--cos-warning); }
.repnav-dot.lvl-bad  { background: var(--cos-error); }
.repnav-dot.lvl-info { background: var(--cos-grey-light-2); }
.repnav-cnt {
  flex: none; min-width: 16px; padding: 0 var(--cos-space-4);
  border-radius: var(--cos-corner-round);
  background: var(--cos-warning-bg); color: var(--cos-warning-strong);
  font-size: 10px; line-height: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: center;
}
.repnav-all, .repnav-cta {
  flex: none; font: inherit; cursor: pointer; white-space: nowrap;
  border-radius: var(--cos-corner-s);
  padding: var(--cos-space-4) var(--cos-pad-m);
  font-size: 12px; line-height: 16px; font-weight: 500;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.repnav-all {
  background: none; color: var(--cos-fg-muted);
  border: var(--cos-border-width-default) solid var(--cos-border);
}
.repnav-all:hover { color: var(--cos-fg-strong); border-color: var(--cos-border-color-strong); }
.repnav-all[hidden] { display: none; }
.repnav-cta {
  background: var(--cos-black); color: var(--cos-white);
  border: var(--cos-border-width-default) solid transparent;
}
.repnav-cta:hover { background: var(--cos-black-light-2); }
.repnav-all:focus-visible, .repnav-cta:focus-visible {
  outline: var(--cos-border-width-focus) solid var(--cos-border-color-focus); outline-offset: 2px;
}

.content { max-width: var(--cos-container); margin: 0 auto; padding: var(--cos-space-32) var(--cos-space-24) var(--cos-space-64); }
/* Die eine Scroll-Achse des Reports: Kapitel untereinander. Vorher lag hier
   ein zweispaltiges Raster, in dem aber jede Karte .full war – die zweite
   Spalte war seit Längem ungenutzt. */
.report { display: flex; flex-direction: column; gap: var(--cos-gap-l); }
.card {
  background: var(--cos-surface);
  border: var(--cos-border-width-default) solid var(--cos-border);
  border-radius: var(--cos-corner-l);
  padding: var(--cos-pad-xl);
  overflow: hidden;
  scroll-margin-top: var(--cos-space-128);
  transition: box-shadow 150ms ease;
}
.card:hover { box-shadow: var(--cos-elevation-1); }
.card.full { grid-column: 1 / -1; }
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--cos-gap-m); margin-bottom: var(--cos-space-16);
}
.card-title { font-weight: 600; font-size: 20px; line-height: 28px; color: var(--cos-fg-strong); }
.ai-text { font-size: 16px; line-height: 24px; color: var(--cos-fg); margin: 0; }

/* =================================================================
   Kapitel
   -----------------------------------------------------------------
   Ein Kapitel hat zwei Ebenen und die müssen sich unterscheiden lassen:
   Der Peek (Kopfzeile, Kernaussage, Kernvisual) liegt offen auf der
   Kartenfläche, das Detail hinter genau einem breiten Schalter am Fuß.
   Der Hover-Schatten der Karte entfällt hier – ein Kapitel ist keine
   Kachel, die man anklickt, sondern ein Abschnitt, den man liest.
   ================================================================= */
.chap { scroll-margin-top: var(--cos-space-128); }
.chap:hover { box-shadow: none; }
.chap[hidden] { display: none; }

.chap-head { align-items: flex-start; }
/* Die Nummer zählt nur sichtbare Kapitel und wird aus dem DOM gesetzt –
   sie gibt der langen Seite ein Gefühl für Umfang und Position. */
.chap-no {
  flex: none; margin-top: var(--cos-space-4);
  min-width: var(--cos-space-24);
  font-family: var(--cos-font-display);
  font-size: 13px; line-height: 20px; font-weight: 600;
  color: var(--cos-fg-subtle); font-variant-numeric: tabular-nums;
}
.chap-h { flex: 1 1 auto; min-width: 0; }
.chap-side {
  flex: none; display: flex; align-items: center; gap: var(--cos-gap-2xs);
  flex-wrap: wrap; justify-content: flex-end;
}
/* Zähler am Kapitel: so viele Punkte hat dieses Kapitel offen. */
.chap-badge {
  min-width: 18px; height: 18px; padding: 0 var(--cos-space-4);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--cos-corner-round);
  background: var(--cos-warning-bg); color: var(--cos-warning-strong);
  font-size: 11px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums;
}
.chap-badge[hidden] { display: none; }

/* Die Kernaussage: der eine Satz, der ein zugeklapptes Kapitel lesbar macht.
   Größer als Fließtext, damit er als Aussage gelesen wird und nicht als
   Einleitung – und bewusst nicht geklemmt: ein abgeschnittenes Urteil ist
   schlimmer als keins. */
.chap-take {
  font-size: 17px; line-height: 26px; color: var(--cos-fg);
  margin: 0 0 var(--cos-space-20); max-width: 88ch;
}
.chap-take[hidden] { display: none; }
.chap-take:empty { display: none; }

/* Chip-Zeile unter dem Kernvisual (z. B. die Annahmen der Bewertung). */
.chap-flags {
  display: flex; flex-wrap: wrap; gap: var(--cos-gap-2xs);
  margin-top: var(--cos-space-12);
}
.chap-flags:empty { display: none; }

.specs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cos-gap-xs) var(--cos-gap-l); }
.card.full .specs { grid-template-columns: 1fr 1fr 1fr; }
.spec {
  display: flex; justify-content: space-between; gap: var(--cos-gap-s);
  font-size: 14px; line-height: 20px;
  border-bottom: var(--cos-border-width-default) solid var(--cos-border-color-subtle);
  padding-bottom: var(--cos-space-8);
}
.spec .k { color: var(--cos-fg-muted); }
.spec .v { font-weight: 500; text-align: right; color: var(--cos-fg); min-width: 0; overflow-wrap: anywhere; }
.subhead {
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cos-fg-muted);
  margin: var(--cos-space-16) 0 var(--cos-space-8);
}
.note { font-size: 12px; line-height: 16px; color: var(--cos-fg-muted); margin-top: var(--cos-space-12); }
.empty-note {
  font-size: 14px; line-height: 20px; color: var(--cos-fg-muted);
  background: var(--cos-bg-subtle);
  border: var(--cos-border-width-default) solid var(--cos-border);
  border-radius: var(--cos-corner-m);
  padding: var(--cos-pad-l);
}

/* =================================================================
   UI-Primitive
   -----------------------------------------------------------------
   Ein Aufklapper, ein Info-Punkt, ein "mehr anzeigen" – überall
   dasselbe Verhalten und dieselbe Optik, damit der Report nicht in
   zehn Sonderfälle zerfällt.
   ================================================================= */

/* ---------- Disclosure ---------- */
.disc {
  border-top: var(--cos-border-width-default) solid var(--cos-border-color-subtle);
  margin-top: var(--cos-space-16);
}
.disc[hidden] { display: none; }
.disc-head {
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  background: none; border: 0;
  display: flex; align-items: center; gap: var(--cos-gap-xs);
  padding: var(--cos-space-12) 0;
  color: var(--cos-fg-strong);
}
.disc-head:hover .disc-title { color: var(--cos-fg-strong); }
.disc-head:hover .disc-chev { color: var(--cos-fg-strong); }
.disc-head:focus-visible { outline: var(--cos-border-width-focus) solid var(--cos-border-color-focus); outline-offset: 2px; }
.disc-chev {
  flex: 0 0 auto; width: 16px; height: 16px; color: var(--cos-fg-muted);
  display: inline-flex; transition: transform 150ms ease, color 150ms ease;
}
.disc-chev svg { width: 100%; height: 100%; }
.disc[data-open="true"] > .disc-head .disc-chev { transform: rotate(90deg); }
.disc-title { font-size: 14px; line-height: 20px; font-weight: 600; }
/* Die Zusammenfassung ist der Grund, warum Zuklappen kein Verstecken ist:
   sie sagt, was drin steckt. Darum schrumpft sie zuletzt. */
.disc-sum {
  font-size: 12px; line-height: 16px; color: var(--cos-fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.disc-head > .verdict { margin-left: auto; flex: 0 0 auto; }
.disc-body { padding-bottom: var(--cos-space-16); }
.disc-body[hidden] { display: none; }
.disc-body > .src { margin-bottom: var(--cos-space-12); }

/* ---------- Kapitel-Schalter (.disc-chap) ----------
   Dieselbe Mechanik wie jeder Aufklapper, aber als Einladung gebaut: eine
   breite Fläche am Fuß des Peek, links die Aufforderung, rechts was dahinter
   liegt. Ohne diese Aufwertung sah der wichtigste Schalter der Seite genauso
   aus wie eine beliebige Detailzeile darin – und nach dem Umbau steckt hinter
   ihm der halbe Report.
   Die Verschachtelung braucht drei unterscheidbare Ebenen: Kapitel-Schalter
   (Fläche), innere Aufklapper (Trennlinie), Punkt-Zeilen (eigene Karte). */
.disc-chap {
  border-top: 0; margin-top: var(--cos-space-24);
}
.disc-chap > .disc-head {
  background: var(--cos-bg-subtle);
  border: var(--cos-border-width-default) solid var(--cos-border);
  border-radius: var(--cos-corner-m);
  padding: var(--cos-pad-m) var(--cos-pad-l);
  gap: var(--cos-gap-xs);
  transition: border-color 150ms ease, background 150ms ease;
}
.disc-chap > .disc-head:hover {
  background: var(--cos-surface); border-color: var(--cos-border-color-strong);
}
.disc-chap > .disc-head > .disc-title {
  font-size: 15px; line-height: 22px; color: var(--cos-fg-strong);
}
/* Was dahinter liegt, steht rechts – und darf dort nicht auf die volle Breite
   drücken, sonst rutscht die Aufforderung aus der Zeile. */
.disc-chap > .disc-head > .disc-sum {
  margin-left: auto; text-align: right;
}
.disc-chap[data-open="true"] > .disc-head {
  background: var(--cos-surface); border-color: var(--cos-border-strong);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.disc-chap > .disc-body {
  border: var(--cos-border-width-default) solid var(--cos-border-strong);
  border-top: 0;
  border-bottom-left-radius: var(--cos-corner-m);
  border-bottom-right-radius: var(--cos-corner-m);
  padding: 0 var(--cos-pad-l) var(--cos-pad-l);
}
.disc-chap > .disc-body > .subhead:first-child { margin-top: var(--cos-space-20); }

/* ---------- Info-Punkt für Quellen- und Haftungstexte ---------- */
.tip-wrap { position: relative; display: inline-flex; vertical-align: middle; margin-left: var(--cos-space-4); }
.tip {
  width: 16px; height: 16px; padding: 0; cursor: pointer;
  background: none; border: 0; color: var(--cos-fg-muted);
  display: inline-flex; transition: color 150ms ease;
}
.tip svg { width: 100%; height: 100%; }
.tip:hover { color: var(--cos-fg-strong); }
.tip:focus-visible { outline: var(--cos-border-width-focus) solid var(--cos-border-color-focus); outline-offset: 2px; border-radius: var(--cos-corner-round); }
.tip-pop {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  z-index: 60; width: max-content; max-width: 300px;
  background: var(--cos-bg-inverse); color: var(--cos-fg-on-black);
  border-radius: var(--cos-corner-m); box-shadow: var(--cos-elevation-2);
  padding: var(--cos-pad-m) var(--cos-pad-l);
  font-size: 12px; line-height: 16px; font-weight: 400;
  text-transform: none; letter-spacing: normal;
  opacity: 0; visibility: hidden; transition: opacity 150ms ease, visibility 150ms ease;
}
.tip-wrap:hover .tip-pop,
.tip-wrap.is-open .tip-pop,
.tip-wrap:focus-within .tip-pop { opacity: 1; visibility: visible; }
.tip-on-dark .tip { color: var(--cos-grey); }
.tip-on-dark .tip:hover { color: var(--cos-fg-on-black); }
.tip-on-dark .tip-pop { background: var(--cos-surface); color: var(--cos-fg); }
/* Am rechten Rand nach links ausrichten, damit die Karte nicht überläuft. */
.card-head .tip-pop { left: 0; transform: none; }

/* ---------- "mehr anzeigen" ---------- */
.link-more {
  align-self: start; margin-top: var(--cos-space-8);
  font: inherit; font-size: 12px; line-height: 16px; font-weight: 500;
  cursor: pointer; color: var(--cos-fg-muted);
  background: none; border: var(--cos-border-width-default) solid var(--cos-border);
  border-radius: var(--cos-corner-s);
  padding: var(--cos-space-4) var(--cos-space-12);
  transition: color 150ms ease, border-color 150ms ease;
}
.link-more:hover { color: var(--cos-fg-strong); border-color: var(--cos-border-color-strong); }
.link-more:focus-visible { outline: var(--cos-border-width-focus) solid var(--cos-border-color-focus); outline-offset: 2px; }

/* ---------- Kernangaben-Raster (die Zeilen, die offen stehen) ----------
   Label über Wert statt Label|Wert in einer Zeile: die fünf Kernangaben sind
   die "auf einen Blick"-Ebene der Karte und lesen sich gestapelt wie die
   Kacheln im Kopf. Nebeneffekt: lange Werte ("Pro Performance (TESTDATEN)")
   brechen im eigenen Feld um, statt in die Nachbarspalte zu laufen. */
.card.full .specs.specs-lead {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--cos-gap-m) var(--cos-gap-l);
}
.specs-lead .spec {
  display: flex; flex-direction: column; gap: var(--cos-space-2);
  min-width: 0; border-bottom: 0; padding-bottom: 0;
}
.specs-lead .spec .k { font-size: 12px; line-height: 16px; }
.specs-lead .spec .v {
  font-size: 16px; line-height: 24px; font-weight: 600;
  text-align: left; color: var(--cos-fg-strong);
  overflow-wrap: anywhere;
}

/* ---------- EK → VK als Balken ---------- */
.pspread { margin-top: var(--cos-space-16); }
.pspread[hidden] { display: none; }
.pspread-bar {
  position: relative; height: 8px; border-radius: var(--cos-corner-round);
  background: var(--cos-success-bg); overflow: hidden;
}
.pspread-fill {
  display: block; height: 100%; border-radius: var(--cos-corner-round);
  background: var(--cos-yellow);
}
.pspread-legend {
  display: flex; flex-wrap: wrap; gap: var(--cos-gap-m);
  margin-top: var(--cos-space-8);
  font-size: 12px; line-height: 16px; color: var(--cos-fg-muted);
}
.pspread-item { display: inline-flex; align-items: center; gap: var(--cos-gap-3xs); }
.pspread-item::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--cos-corner-round);
  background: currentColor;
}
.pspread-item.sp-ek { color: var(--cos-yellow-dark-1); }
.pspread-item.sp-margin { color: var(--cos-success-strong); }
.pspread-item.sp-vk { color: var(--cos-fg-muted); }

/* ---------- Gekürzter Fließtext (Prosa-Einordnungen) ---------- */
.ai-text.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =================================================================
   KI-Markteinschätzung
   -----------------------------------------------------------------
   Das einzige Kapitel, dessen Inhalt generiert ist – und das einzige,
   das keine Belege hat, sondern einen Text. Beides darf man sehen:
   die Karte trägt eine Verlaufskante und einen Farbschimmer in den
   oberen Ecken, der Titel ein Funkenzeichen. Bewusst nur Kante und
   Schimmer: die Fläche bleibt weiß, damit der Text so gut lesbar ist
   wie im Rest des Reports.

   Der Text selbst ist EINE Ebene. Vorher stand der Auftakt offen und
   der Rest lag in einem .disc-chap am Fuß der Karte – zwei Kästen für
   einen Absatz. Jetzt läuft die Fortsetzung zwei Zeilen weiter, blendet
   über eine Maske aus und wächst auf Klick an derselben Stelle nach
   unten (aiSetOpen() in app.js setzt die Höhe, hier steht die Bewegung).
   ================================================================= */
.ai-card {
  position: relative;
  /* Verlaufskante über den Doppel-Hintergrund: die innere Fläche endet an
     der padding-box, der Verlauf füllt die border-box. */
  border-color: transparent;
  background:
    linear-gradient(var(--cos-surface), var(--cos-surface)) padding-box,
    linear-gradient(115deg,
      var(--cos-yellow), var(--cos-cyan) 45%, var(--cos-yellow-light-1)) border-box;
}
/* Der Schimmer liegt als eigene Ebene unter dem Inhalt – so bleibt er von
   der Kartenrundung beschnitten (.card hat overflow: hidden) und fängt
   keine Klicks ab. */
.ai-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 100% at 0% 0%, var(--cos-yellow-light-3), transparent 62%),
    radial-gradient(100% 90% at 100% 0%, var(--cos-cyan-light-3), transparent 58%);
}
.ai-card > * { position: relative; z-index: 1; }

/* Titelzeile mit Funkenzeichen: die Karte sagt schon in der Kopfzeile, dass
   hier ein Modell spricht und kein Datensatz. Das Zeichen läuft IM Textfluss
   mit (inline, nicht flex) – auf dem Handy bricht der Titel sonst nicht mehr
   um, sondern aus der Karte heraus. */
.ai-spark {
  vertical-align: middle;
  margin-right: var(--cos-space-4);
  width: var(--cos-space-24); height: var(--cos-space-24);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--cos-corner-s);
  color: var(--cos-fg-strong);
  background: linear-gradient(135deg,
    var(--cos-yellow), var(--cos-cyan-light-1) 55%, var(--cos-cyan));
  background-size: 220% 220%;
  animation: ai-spark-drift 9s ease-in-out infinite alternate;
}
.ai-spark svg { width: var(--cos-space-16); height: var(--cos-space-16); }
@keyframes ai-spark-drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Auftakt und Fortsetzung sind ein Textfluss – deshalb hier der
   Absatzabstand statt des Kapitel-Abstands, den .chap-take sonst hält. */
.ai-read > .chap-take { margin-bottom: var(--cos-space-12); }

/* Geklappt wird die Höhe, nicht die Sichtbarkeit: nur so kann der Text
   ausblenden statt zu verschwinden. Die Maske arbeitet allein mit der
   Deckkraft des Verlaufs – die Farbe darin ist beliebig, sie muss nur
   deckend sein. */
.ai-rest {
  overflow: hidden;
  transition: height 280ms cubic-bezier(.22, .61, .36, 1);
}
.ai-rest.is-teaser {
  -webkit-mask-image: linear-gradient(to bottom, var(--cos-fg) 35%, transparent);
          mask-image: linear-gradient(to bottom, var(--cos-fg) 35%, transparent);
}
.ai-meta { margin-top: var(--cos-space-12); }
.ai-read[data-open="false"] .ai-meta { display: none; }

/* Der Schalter ist kein Kasten mehr, sondern eine Pille am Ende des Textes:
   Er unterbricht den Absatz nicht, sondern schließt ihn ab. */
.ai-more {
  margin-top: var(--cos-space-12);
  display: inline-flex; align-items: center; gap: var(--cos-gap-2xs);
  padding: var(--cos-pad-xs) var(--cos-pad-m);
  border: var(--cos-border-width-default) solid var(--cos-border);
  border-radius: var(--cos-corner-round);
  background: var(--cos-surface); color: var(--cos-fg-strong);
  font-size: 13px; line-height: 20px; font-weight: 500;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.ai-more:hover {
  border-color: var(--cos-border-color-accent);
  background: var(--cos-yellow-light-3);
  box-shadow: var(--cos-elevation-1);
}
.ai-more-sum { color: var(--cos-fg-muted); font-weight: 400; }
.ai-more-sum:empty { display: none; }
/* Aufgeklappt stehen die Sätze da – dann muss nicht mehr auf dem Schalter
   stehen, wie viele es sind ("Weniger anzeigen · noch 2 Sätze"). */
.ai-read[data-open="true"] .ai-more-sum { display: none; }
.ai-more-chev {
  width: var(--cos-space-16); height: var(--cos-space-16);
  display: inline-flex; color: var(--cos-fg-subtle);
  transition: transform 200ms ease;
}
.ai-more-chev svg { width: 100%; height: 100%; }
.ai-read[data-open="true"] .ai-more-chev { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .ai-spark { animation: none; }
  .ai-rest { transition: none; }
  .ai-more-chev { transition: none; }
}

/* ---------- Service-Historie: "Digitales Serviceheft" ----------
   Highlight-Sektion: Kennzahlen, Laufleistungs-Kurve + Plausibilitätscheck,
   darunter die Einzeleinträge als Karten-Raster. */
.sh-card { padding: var(--cos-pad-2xl); }
.sh-card .price-tiles { margin-bottom: var(--cos-space-24); }
/* Kachelwerte sind hier länger als Preise ("14.754 km/Jahr") – umbrechen
   statt abschneiden. */
.sh-card .ptile .pv { white-space: normal; }

.sh-main {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--cos-gap-l); margin-bottom: var(--cos-space-8);
}
/* Seit dem Umbau steht die Kurve allein im Peek und nicht mehr neben dem
   Plausibilitätscheck. Über die volle Kartenbreite (~1050 px) würde die feste
   viewBox 720×300 auf über 430 px Höhe skalieren – die Kurve allein wäre dann
   mehr als die halbe Bildschirmhöhe. Deshalb eine Maximalbreite, zentriert:
   das Panel bleibt die Fläche des Kapitels, die Grafik behält ihr Format. */
.sh-main.single { grid-template-columns: 1fr; }
.sh-main.single .sh-chart { max-width: 880px; margin-left: auto; margin-right: auto; }
.sh-panel {
  background: var(--cos-bg-subtle);
  border: var(--cos-border-width-default) solid var(--cos-border);
  border-radius: var(--cos-corner-l);
  padding: var(--cos-pad-xl);
  min-width: 0;
}
.sh-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--cos-gap-s); margin-bottom: var(--cos-space-16);
}
.sh-panel-title { font-weight: 600; font-size: 16px; line-height: 24px; color: var(--cos-fg-strong); }
.sh-panel-note { font-size: 12px; line-height: 16px; color: var(--cos-fg-muted); margin-top: var(--cos-space-16); }

/* Kurve */
.sh-chart {
  background: var(--cos-surface);
  border: var(--cos-border-width-default) solid var(--cos-border);
  border-radius: var(--cos-corner-m);
  padding: var(--cos-pad-s);
}
.sh-svg { display: block; width: 100%; height: auto; }
.sh-grid { stroke: var(--cos-border-color-default); stroke-width: 1; }
.sh-grid-v { stroke: var(--cos-border-color-subtle); }
.sh-axis { fill: var(--cos-fg-muted); font-size: 11px; font-family: var(--cos-font-sans); font-variant-numeric: tabular-nums; }
.sh-axis-y { text-anchor: end; }
.sh-axis-x { text-anchor: middle; }
.sh-area { fill: var(--cos-yellow-light-3); }
.sh-line { stroke: var(--cos-fg-strong); stroke-width: 2.5; stroke-linecap: round; }
.sh-line-jump { stroke: var(--cos-orange); stroke-dasharray: 6 4; }
.sh-line-rollback { stroke: var(--cos-red); stroke-width: 3; }
/* Abschnitt vom letzten dokumentierten Stand bis zur Kunden-Angabe: nicht
   belegt, deshalb gestrichelt und in Akzentfarbe statt durchgezogen. */
.sh-line-input { stroke: var(--cos-yellow-dark-1); stroke-dasharray: 7 5; }
/* Abschnitt von der Erstzulassung (0 km) zum ersten dokumentierten Stand:
   dazwischen ist nichts belegt, deshalb gestrichelt und zurückgenommen. */
.sh-line-origin { stroke: var(--cos-fg-muted); stroke-width: 2; stroke-dasharray: 3 4; }
.sh-ref { stroke: var(--cos-grey-dark-1); stroke-width: 1.5; stroke-dasharray: 5 5; }
.sh-dot { fill: var(--cos-yellow); stroke: var(--cos-fg-strong); stroke-width: 2; }
.sh-dot-jump { fill: var(--cos-orange); stroke: var(--cos-orange-dark-1); }
.sh-dot-rollback { fill: var(--cos-red); stroke: var(--cos-red-dark-1); }
.sh-dot-input { fill: var(--cos-surface); stroke: var(--cos-yellow-dark-1); stroke-width: 2.5; }
.sh-dot-origin { fill: var(--cos-surface); stroke: var(--cos-fg-muted); stroke-width: 2; }
.sh-hit { fill: transparent; }
.sh-dot-g:hover .sh-dot { stroke-width: 3; }
.sh-lastval {
  fill: var(--cos-fg-strong); font-size: 14px; font-weight: 600;
  font-family: var(--cos-font-sans); font-variant-numeric: tabular-nums;
  /* Kontur in Flächenfarbe, damit der Wert auch über der Kurve lesbar ist */
  paint-order: stroke; stroke: var(--cos-surface); stroke-width: 4px; stroke-linejoin: round;
}
.sh-legend {
  display: flex; flex-wrap: wrap; gap: var(--cos-gap-xs) var(--cos-gap-m);
  margin-top: var(--cos-space-12);
  font-size: 12px; line-height: 16px; color: var(--cos-fg-muted);
}
.sh-legend-item { display: inline-flex; align-items: center; gap: var(--cos-gap-2xs); }
.sh-legend-item i { display: inline-block; width: var(--cos-space-16); height: var(--cos-space-2); border-radius: var(--cos-corner-round); }
.sh-legend-item i.lg-line { background: var(--cos-fg-strong); }
.sh-legend-item i.lg-ref { background: repeating-linear-gradient(90deg, var(--cos-grey-dark-1) 0 4px, transparent 4px 8px); }
.sh-legend-item i.lg-input { background: repeating-linear-gradient(90deg, var(--cos-yellow-dark-1) 0 5px, transparent 5px 9px); }
.sh-legend-item i.lg-origin { background: repeating-linear-gradient(90deg, var(--cos-fg-muted) 0 3px, transparent 3px 7px); }
.sh-legend-item i.lg-bad { background: var(--cos-red); }

/* Plausibilitätscheck */
.sh-checks { list-style: none; display: flex; flex-direction: column; gap: var(--cos-gap-s); }
.sh-check { display: flex; gap: var(--cos-gap-xs); font-size: 14px; line-height: 20px; }
.sh-check > div { display: flex; flex-direction: column; gap: var(--cos-space-2); min-width: 0; }
.sh-check strong { font-weight: 600; color: var(--cos-fg-strong); }
.sh-check span { color: var(--cos-fg-muted); font-size: 12px; line-height: 16px; }
.sh-check-ico { flex: 0 0 var(--cos-space-20); width: var(--cos-space-20); height: var(--cos-space-20); margin-top: var(--cos-space-2); }
.sh-check-ico svg { width: var(--cos-space-20); height: var(--cos-space-20); display: block; }
.sh-check.ok   .sh-check-ico { color: var(--cos-success); }
.sh-check.warn .sh-check-ico { color: var(--cos-warning); }
.sh-check.bad  .sh-check-ico { color: var(--cos-error); }
.sh-check.info .sh-check-ico { color: var(--cos-fg-subtle); }

/* ---------- Modelltypische Schwachstellen (KI) ----------
   Bausteine der Sektion "Worauf du achten solltest": Kennzahlen im dunklen
   Kopf, Silhouette, Punkte-Zeilen und ihre Chips. Der Rahmen der Sektion
   (.lc, .lc-hero, .lc-body) steht weiter unten beim Lebenszyklus-Block.
   Farbe trägt die Schwere (linke Kante der Zeile), Chips tragen Bereich,
   Kilometer-Relevanz und Konfidenz. */

/* Kennzahl im dunklen Kopf: Zahl groß, Bezug klein. Proportionale Ziffern,
   weil die Werte nicht untereinander ausgerichtet stehen. */
.mdx-stat { min-width: 0; }
.mdx-stat-v {
  font-family: var(--cos-font-display);
  font-size: 26px; line-height: 32px; font-weight: 600;
  color: var(--cos-fg-on-black);
}
.mdx-stat.hot .mdx-stat-v { color: var(--cos-accent); }
.mdx-stat-l {
  font-size: 12px; line-height: 16px; color: var(--cos-grey-dark-1);
  margin-top: var(--cos-space-2);
}

/* Silhouette: Linienzeichnung auf weißer Fläche. Die Marker sind das einzige
   farbige Element – sie sollen die Aufmerksamkeit bekommen, nicht das Auto. */
.mdx-car-stage { max-width: 520px; margin: var(--cos-space-8) auto 0; }
.mdx-car-svg { width: 100%; height: auto; display: block; overflow: visible; }
.mdx-car-body {
  fill: var(--cos-grey-light-2); stroke: var(--cos-grey-dark-2);
  stroke-width: 1.6; stroke-linejoin: round;
}
.mdx-car-glass { fill: var(--cos-surface); stroke: var(--cos-grey-dark-1); stroke-width: 1.2; }
.mdx-car-tyre { fill: var(--cos-grey-light-1); stroke: var(--cos-grey-dark-2); stroke-width: 1.6; }
.mdx-car-rim { fill: var(--cos-surface); stroke: var(--cos-grey-dark-1); stroke-width: 1.2; }
.mdx-car-ground { fill: var(--cos-grey-light-1); }
/* Marker: gelb gefüllt mit schwarzer Nummer – hoher Kontrast, Markenfarbe,
   und die Nummer verweist auf Karte und Zeitachse. */
.mdx-spot { cursor: default; outline: none; transition: opacity 150ms ease; }
.mdx-spot-halo { fill: var(--cos-accent); opacity: .22; }
.mdx-spot-dot { fill: var(--cos-accent); stroke: var(--cos-fg-strong); stroke-width: 1.5; }
.mdx-spot-num {
  font-family: var(--cos-font-sans); font-size: 11px; font-weight: 700;
  fill: var(--cos-fg-on-yellow); text-anchor: middle;
}
/* Punkte, die dieses Fahrzeug jetzt betreffen, tragen einen kräftigeren Ring. */
.mdx-spot.now .mdx-spot-dot { stroke-width: 2.5; }
.mdx-spot:not(.now) .mdx-spot-dot { fill: var(--cos-surface); }
.mdx-spot:not(.now) .mdx-spot-halo { opacity: 0; }
.mdx-spot:not(.now) .mdx-spot-num { fill: var(--cos-fg-muted); }
.mdx-spot:focus-visible .mdx-spot-halo { opacity: .45; }

/* Zonen-Zuordnung unter der Silhouette (auch ohne Hover lesbar). Seit dem
   Umbau ein Button je Baugruppe: Unter 560px entfällt die Silhouette, dann ist
   diese Zeile die einzige Verortung – und muss dieselbe Sprungmarke sein wie
   die Marken darüber. */
.mdx-zones {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--cos-gap-xs); margin-top: var(--cos-space-12);
}
.mdx-zone {
  display: inline-flex; align-items: center; gap: var(--cos-gap-3xs);
  font-family: inherit;
  font-size: 12px; line-height: 18px; color: var(--cos-fg-muted);
  padding: var(--cos-pad-2xs) var(--cos-pad-s) var(--cos-pad-2xs) var(--cos-pad-2xs);
  background: var(--cos-bg-subtle); border: none; border-radius: var(--cos-corner-round);
  cursor: pointer; text-align: left;
  transition: background 150ms ease, color 150ms ease;
}
.mdx-zone:hover, .mdx-zone:focus-visible {
  background: var(--cos-grey-light-1); color: var(--cos-fg-strong);
}
.mdx-zone-num {
  width: 17px; height: 17px; border-radius: var(--cos-corner-round);
  background: var(--cos-accent); color: var(--cos-fg-on-yellow);
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
  font-style: normal; margin-right: var(--cos-space-2);
}

/* Unter ~560px wird die Silhouette so klein, dass die Marker-Nummern nicht
   mehr lesbar sind (die SVG-Schrift skaliert mit der viewBox). Dann trägt die
   Zonen-Zeile die Zuordnung – als Text bleibt sie in jeder Größe lesbar, und
   als Button ist sie dort die vollständige Navigation in den Rundgang.

   Steht bewusst NACH den Basisregeln: Die Media-Query hat dieselbe
   Spezifität, stand vorher davor und wurde deshalb von
   ".mdx-zones { justify-content: center }" überschrieben – die Zeile blieb auf
   dem Handy zentriert, obwohl sie linksbündig gedacht war. */
@media (max-width: 560px) {
  .mdx-car-stage { display: none; }
  .mdx-zones { justify-content: flex-start; margin-top: 0; }
}

/* Quer-Hervorhebung zwischen Silhouette und Punkt-Zeilen */
.mdx-spot.is-dim { opacity: .3; }
.mdx-item.is-dim { opacity: .45; }
.mdx-spot.is-focus .mdx-spot-halo { opacity: .5; }
.mdx-item.is-focus {
  box-shadow: var(--cos-elevation-2);
  border-color: var(--cos-border-strong);
}

/* ---------- Ankauf-Guide "Worauf du achten solltest" ----------
   Aufbau wie beim Rest des Reports: dunkler Kopf mit der Kernaussage, darunter
   die Grafik – seit dem Umbau die Silhouette – auf weißer Fläche. Eine
   Datengrafik auf invertierter Fläche bräuchte eine eigene, gegen Schwarz
   geprüfte Farbstufung – die gibt es im Token-Set nicht.
   (Die Klassen heißen aus Gründen der Historie weiter .lc-*.) */
.lc {
  margin-top: var(--cos-space-24);
  background: var(--cos-bg-subtle);
  border: var(--cos-border-width-default) solid var(--cos-border);
  border-radius: var(--cos-corner-xl);
  overflow: hidden; /* der dunkle Kopf soll die Rundung mitnehmen */
}
/* Feiner Verlauf plus Akzent-Schein oben rechts: gibt dem Kopf Tiefe, ohne
   eine zweite Farbe einzuführen – der Schein ist die Markenfarbe bei 7 %. */
.lc-hero {
  background:
    radial-gradient(90% 150% at 100% 0%, rgba(255, 205, 25, .07) 0%, transparent 50%),
    linear-gradient(155deg, var(--cos-black-light-1) 0%, var(--cos-bg-inverse) 62%);
  color: var(--cos-fg-on-black);
  padding: var(--cos-pad-xl);
}
.lc-hero-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--cos-gap-m);
}
.lc-eyebrow {
  font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cos-accent);
}
.lc-hero-title {
  font-family: var(--cos-font-display);
  font-size: 20px; line-height: 28px; font-weight: 600;
  color: var(--cos-fg-on-black); margin-top: var(--cos-space-2);
}
.lc-beta {
  flex: none; font-size: 11px; line-height: 16px; font-weight: 600;
  padding: var(--cos-pad-xs) var(--cos-pad-s);
  border-radius: var(--cos-corner-round);
  border: var(--cos-border-width-default) solid var(--cos-grey-dark-3);
  color: var(--cos-grey); white-space: nowrap;
}
.lc-summary {
  font-size: 16px; line-height: 24px; color: var(--cos-grey-light-1);
  margin: var(--cos-space-12) 0 0; max-width: 92ch;
}
.lc-summary:empty { display: none; }
/* Die KI-Zusammenfassung ist 300–450 Zeichen lang und stand dauerhaft offen.
   Zwei Zeilen tragen die Aussage, der Rest kommt über den Schalter – damit
   beginnt die Sektion mit einem Kopf, den man in einem Blick erfasst. */
.lc-summary.is-clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.lc-more {
  font: inherit; font-size: 12px; line-height: 16px; font-weight: 600;
  margin-top: var(--cos-space-8); padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--cos-accent); text-decoration: underline;
  text-underline-offset: 3px;
}
.lc-more[hidden] { display: none; }
.lc-more:hover { color: var(--cos-fg-on-black); }
.lc-more:focus-visible {
  outline: var(--cos-border-width-focus) solid var(--cos-accent); outline-offset: 2px;
}
/* ---------- Übersichtszeile im Kopf ----------
   Links die Prüfaufwand-Kachel, rechts die Kennzahlen – alle als flache
   Karten auf dem dunklen Grund (Aufheller statt zweiter Flächenfarbe). */
.lc-overview {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: var(--cos-gap-s);
  margin-top: var(--cos-space-20);
  padding-top: var(--cos-space-16);
  border-top: var(--cos-border-width-default) solid var(--cos-grey-dark-3);
}
.lc-risk {
  flex: 1 1 220px; min-width: 200px;
  padding: var(--cos-pad-l);
  background: rgba(255, 255, 255, .04);
  border: var(--cos-border-width-default) solid var(--cos-grey-dark-3);
  border-radius: var(--cos-corner-l);
}
.lc-risk[hidden] { display: none; }
.lc-risk-label {
  font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cos-grey-dark-1);
}
/* Das Wort trägt die Aussage, das Meter illustriert sie nur – deshalb bleibt
   das Wort weiß und die Statusfarbe sitzt allein auf den Segmenten. */
.lc-risk-word {
  font-family: var(--cos-font-display);
  font-size: 26px; line-height: 32px; font-weight: 600;
  color: var(--cos-fg-on-black); margin-top: var(--cos-space-2);
}
.lc-risk-meter { display: flex; gap: var(--cos-space-4); margin-top: var(--cos-space-8); }
.lc-risk-meter i {
  height: 6px; flex: 1 1 0; border-radius: var(--cos-corner-round);
  background: var(--cos-grey-dark-3);
}
.lc-risk.low  .lc-risk-meter i.on { background: var(--cos-green); }
.lc-risk.mid  .lc-risk-meter i.on { background: var(--cos-orange); }
.lc-risk.high .lc-risk-meter i.on { background: var(--cos-red); }
.lc-risk-why {
  font-size: 12px; line-height: 17px; color: var(--cos-grey);
  margin-top: var(--cos-space-8);
}
/* Kennzahlen-Reihe: Zahl groß, Bezug klein – jede Kennzahl als eigene
   Kachel neben der Prüfaufwand-Karte. */
.lc-stats {
  flex: 2 1 320px;
  display: flex; flex-wrap: wrap; gap: var(--cos-gap-s);
}
/* min-width erzwingt den Umbruch: auf schmalen Viewports stehen die Kacheln
   2×2 statt sich in eine Zeile zu quetschen, bis die Zahlen überlappen. */
.lc-stats .mdx-stat {
  flex: 1 1 120px; min-width: 140px;
  padding: var(--cos-pad-l);
  background: rgba(255, 255, 255, .04);
  border: var(--cos-border-width-default) solid var(--cos-grey-dark-3);
  border-radius: var(--cos-corner-l);
}

/* ---------- Rundgang-Leiste im Kopf ----------
   Das Inhaltsverzeichnis des Guides: nummerierte Schritte, klickbar als
   Sprungmarke in die jeweilige Gruppe der Liste. */
.lc-route {
  margin-top: var(--cos-space-16);
}
.lc-route[hidden] { display: none; }
.lc-route-label {
  font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cos-grey-dark-1);
  margin-bottom: var(--cos-space-8);
}
.lc-route-steps { display: flex; flex-wrap: wrap; gap: var(--cos-gap-xs); }
.lc-route-step {
  display: inline-flex; align-items: center; gap: var(--cos-gap-2xs);
  font: inherit; font-size: 12px; line-height: 16px; font-weight: 600;
  color: var(--cos-grey-light-1);
  background: rgba(255, 255, 255, .05);
  border: var(--cos-border-width-default) solid var(--cos-grey-dark-3);
  border-radius: var(--cos-corner-round);
  padding: var(--cos-pad-2xs) var(--cos-pad-m) var(--cos-pad-2xs) var(--cos-pad-2xs);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.lc-route-step:hover { border-color: var(--cos-grey-dark-1); background: rgba(255, 255, 255, .09); }
.lc-route-step:focus-visible {
  outline: var(--cos-border-width-focus) solid var(--cos-accent); outline-offset: 2px;
}
.lc-route-num {
  flex: none; width: 20px; height: 20px; border-radius: var(--cos-corner-round);
  background: var(--cos-accent); color: var(--cos-fg-on-yellow);
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.lc-route-cnt { color: var(--cos-grey-dark-1); font-weight: 500; }
.lc-route-step.hot .lc-route-cnt { color: var(--cos-accent); font-weight: 600; }
/* Weiße Fläche unter dem Kopf: die Punkte-Liste und darunter die zugeklappten
   Zusatzansichten. Ein Padding für alle – vorher trug jeder Block sein
   eigenes, was beim Zuklappen ungleiche Abstände hinterließ. */
.lc-body {
  background: var(--cos-surface);
  padding: var(--cos-pad-xl);
}
.lc-body > .subhead:first-child { margin-top: 0; }
/* Silhouette im Peek: das Kernvisual des Kapitels, offen auf der weißen Fläche
   unter dem dunklen Kopf – und zugleich die Navigation in den Rundgang. Sie lag
   vorher im Detail unter den Punkten, also hinter dem Schalter, den sie bedient.

   An dieser Stelle standen die Regeln des Kilometer-Zeitstrahls (Achse, Bänder,
   Kilometer-Marke, Legende). Er ist entfallen: Das Laufleistungsfenster ist im
   Prompt bewusst kein Pflichtwert, also trugen nur einzelne Punkte eines – eine
   Achse mit einem von acht Punkten liest sich als vollständige Karte und ist
   keine. Die Fälligkeit steht jetzt an der Zeile des Punkts. */
.lc-car { margin-top: var(--cos-space-8); }
.lc-car[hidden] { display: none; }

/* Silhouetten-Marke und Zonen-Zeile liegen im Peek, die zugehörige Punkt-Zeile
   im Detail: der Klick öffnet das Kapitel und springt hin. Ohne Zeiger sähe die
   Grafik nach reiner Anzeige aus. */
.mdx-jump { cursor: pointer; }
/* Kilometer-Hinweis: der einzige Teil, der direkt am Tachostand hängt –
   deshalb als Callout in Markenfarbe abgesetzt. Sitzt im Aufklapper
   "Einordnung", das Seitenpadding trägt .lc-body. */
.mdx-note {
  padding: var(--cos-pad-l);
  background: var(--cos-bg-subtle);
  border-radius: var(--cos-corner-l);
  border-left: 3px solid var(--cos-accent);
}
.mdx-note-label {
  display: block; font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cos-fg-muted);
}
/* HU-Einordnung: zweiter Kasten direkt unter dem Kilometer-Hinweis. Andere
   Kantenfarbe, damit die beiden nicht als ein Block verschwimmen – der eine
   hängt am Tachostand, der andere an der Prüfordnung. */
.lc-hu-note { border-left-color: var(--cos-fg-strong); margin-top: var(--cos-space-12); }
.mdx-note p {
  margin: var(--cos-space-4) 0 0; font-size: 14px; line-height: 21px; color: var(--cos-fg);
}
/* Die Punkte stehen als Liste von Zeilen, nicht mehr als Raster offener
   Karten: jede Zeile trägt Nummer, Bauteil, Kosten und Befund, der Rest
   kommt auf Klick. Bei acht Punkten spart das rund drei Bildschirmhöhen. */
.mdx-grid { display: flex; flex-direction: column; }

/* ---------- Rundgang-Gruppen (Stepper) ----------
   Jede Gruppe ist ein Schritt der Begutachtung: Schritt-Nummer links,
   Verbindungslinie zum nächsten Schritt, die Punkt-Zeilen eingerückt
   darunter. Die Nummern entsprechen der Leiste im dunklen Kopf. */
.mdx-phase {
  position: relative;
  margin-top: var(--cos-space-24);
  padding-left: 44px;
  /* Sprungziel der Rundgang-Leiste: nicht bündig am Viewport-Rand landen. */
  scroll-margin-top: var(--cos-space-16);
}
.mdx-phase:first-child { margin-top: var(--cos-space-8); }
.mdx-phase::before {
  content: ""; position: absolute; left: 15px; top: 36px;
  bottom: calc(-1 * var(--cos-space-24)); width: 2px;
  background: var(--cos-grey-light-1);
}
.mdx-phase:last-child::before { display: none; }
.mdx-phase-step {
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: var(--cos-corner-round);
  background: var(--cos-bg-inverse); color: var(--cos-fg-on-black);
  font-family: var(--cos-font-display);
  font-size: 14px; font-weight: 700; line-height: 32px; text-align: center;
}
.mdx-phase-head {
  display: flex; align-items: flex-start; gap: var(--cos-gap-s);
  min-height: 32px;
}
.mdx-phase-titles { flex: 1 1 auto; min-width: 0; }
.mdx-phase-title {
  font-weight: 600; font-size: 15px; line-height: 20px; color: var(--cos-fg-strong);
}
.mdx-phase-desc {
  font-size: 12px; line-height: 16px; color: var(--cos-fg-muted);
  margin-top: var(--cos-space-2);
}
.mdx-phase-count {
  flex: none; font-size: 12px; line-height: 16px; font-weight: 600;
  color: var(--cos-fg-muted); background: var(--cos-bg-subtle);
  border-radius: var(--cos-corner-round);
  padding: var(--cos-pad-2xs) var(--cos-pad-s);
  white-space: nowrap;
}
.mdx-phase-count.hot { background: var(--cos-fg-strong); color: var(--cos-accent); }
.mdx-phase-items { margin-top: var(--cos-space-4); }
/* Auf schmalen Viewports frisst die Einrückung zu viel Zeilenbreite –
   Linie und Nummer rücken zusammen. */
@media (max-width: 560px) {
  .mdx-phase { padding-left: 34px; }
  .mdx-phase::before { left: 12px; }
  .mdx-phase-step { width: 26px; height: 26px; font-size: 12px; line-height: 26px; }
}
.mdx-item {
  position: relative; min-width: 0;
  background: var(--cos-surface);
  border: var(--cos-border-width-default) solid var(--cos-border);
  border-left: 3px solid var(--cos-border-strong);
  border-radius: var(--cos-corner-m);
  margin-top: var(--cos-space-8);
}
.mdx-item > .disc-head { padding: var(--cos-space-12) var(--cos-pad-l); }
.mdx-item > .disc-body { padding: 0 var(--cos-pad-l) var(--cos-pad-l); }
.mdx-item.sev-high { border-left-color: var(--cos-error); }
.mdx-item.sev-mid  { border-left-color: var(--cos-warning); }
.mdx-item.sev-low  { border-left-color: var(--cos-grey); }
/* Punkte, die bei DIESEM Kilometerstand zählen, treten hervor. */
.mdx-item.is-due { box-shadow: var(--cos-elevation-1); }
/* 150–200 ms ease laut Motion-Spec; keine Entrance-Animation auf Daten. */
.mdx-item { transition: box-shadow 150ms ease; }
.mdx-item:hover { box-shadow: var(--cos-elevation-2); }
@media (prefers-reduced-motion: reduce) {
  .mdx-item, .mdx-zone, .mdx-spot { transition: none; }
}
/* Nummer wie auf der Silhouette – gleiche Größe, gleiche Farbe. */
.mdx-num {
  flex: none; width: 20px; height: 20px; border-radius: var(--cos-corner-round);
  background: var(--cos-accent); color: var(--cos-fg-on-yellow);
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.mdx-item > .disc-head .mdx-item-title { flex: 1 1 auto; min-width: 0; }
.mdx-item-title {
  font-weight: 600; font-size: 14px; line-height: 20px; color: var(--cos-fg-strong);
}
/* Kosten und Badges als Gruppe: rechtsbündig auf dem Desktop, auf schmalen
   Bildschirmen bricht dieser Block als Ganzes um (statt den Titel von seiner
   Nummer zu trennen). */
.mdx-item-meta {
  display: inline-flex; align-items: center; gap: var(--cos-gap-xs);
  margin-left: auto; flex: 0 0 auto;
}
.mdx-item-cost {
  font-weight: 600; font-size: 14px; line-height: 20px; color: var(--cos-fg-strong);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mdx-item-meta > .verdict { margin-left: 0; }
.mdx-chips {
  display: flex; flex-wrap: wrap; gap: var(--cos-gap-2xs); margin-top: var(--cos-space-8);
}
.mdx-chip {
  font-size: 11px; line-height: 16px; font-weight: 500;
  padding: var(--cos-pad-2xs) var(--cos-pad-s);
  border-radius: var(--cos-corner-round);
  background: var(--cos-bg-muted); color: var(--cos-fg-muted);
  white-space: nowrap;
}
.mdx-chip.area { background: var(--cos-bg-inverse); color: var(--cos-fg-on-black); }
.mdx-chip.due {
  background: var(--cos-fg-strong); color: var(--cos-accent); font-weight: 600;
}
.mdx-chip.win { background: var(--cos-surface); box-shadow: inset 0 0 0 1px var(--cos-border); }
/* HU-Einordnung des Punktes. Bewusst als Kontur statt als Füllung: die Schwere
   daneben ist bereits farbig gefüllt, zwei gefüllte Warnchips auf einer Karte
   heben sich gegenseitig auf. "Erheblich" heißt durchgefallen und trägt
   deshalb als Einziges eine Statusfarbe. */
.mdx-chip.hu {
  background: var(--cos-surface); color: var(--cos-fg);
  box-shadow: inset 0 0 0 1px var(--cos-border-color-strong);
}
.mdx-chip.hu.erheblich {
  color: var(--cos-error-strong);
  box-shadow: inset 0 0 0 1.5px var(--cos-error);
}
/* Schwere: Farbe + Wort (Status-Farben nie ohne Label). */
.mdx-chip.sev.high { background: var(--cos-error-bg); color: var(--cos-error-strong); }
.mdx-chip.sev.mid { background: var(--cos-warning-bg); color: var(--cos-warning-strong); }
.mdx-chip.sev.low { background: var(--cos-bg-muted); color: var(--cos-fg-muted); }
.mdx-chip.conf.niedrig { color: var(--cos-fg-subtle); font-style: italic; }
.mdx-item-txt {
  font-size: 14px; line-height: 20px; color: var(--cos-fg-muted);
  margin: var(--cos-space-12) 0 0;
}
.mdx-item-hint {
  font-size: 12px; line-height: 18px; color: var(--cos-warning-strong);
  margin: var(--cos-space-8) 0 0;
}
.mdx-item-check {
  font-size: 14px; line-height: 20px; color: var(--cos-fg);
  margin: var(--cos-space-12) 0 0;
}
.mdx-item-check strong { color: var(--cos-fg-strong); }
/* Die Einordnungs-Specs folgen dem Prüfpunkte-Raster – sichtbar absetzen. */
#sec-hu .specs { margin-top: var(--cos-space-24); }

/* Einzeleinträge: Karten-Raster (in der breiten Sektion mehrspaltig) */
.sh {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--cos-gap-m); margin: var(--cos-space-2) 0 var(--cos-space-4);
}
.sh > .sh-pending, .sh > .empty-note { grid-column: 1 / -1; }
.sh-pending {
  display: flex; align-items: center; gap: var(--cos-gap-s);
  font-size: 14px; line-height: 20px; color: var(--cos-fg-muted);
  background: var(--cos-bg-subtle);
  border: var(--cos-border-width-default) solid var(--cos-border);
  border-radius: var(--cos-corner-m);
  padding: var(--cos-pad-l);
}
.sh-pending .spinner { flex: none; }
.sh-entry {
  background: var(--cos-surface);
  border: var(--cos-border-width-default) solid var(--cos-border);
  border-radius: var(--cos-corner-m);
  padding: var(--cos-pad-l) var(--cos-pad-l) var(--cos-pad-m);
}
.sh-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cos-space-2) var(--cos-gap-xs); margin-bottom: var(--cos-space-8); font-size: 14px; line-height: 20px; }
.sh-ico { flex: 0 0 var(--cos-space-16); width: var(--cos-space-16); height: var(--cos-space-16); color: var(--cos-fg-subtle); align-self: flex-start; margin-top: var(--cos-space-2); }
.sh-ico svg { width: var(--cos-space-16); height: var(--cos-space-16); display: block; }
.sh-month { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--cos-fg-strong); }
.sh-km { font-weight: 600; color: var(--cos-fg-strong); white-space: nowrap; }
.sh-delta { color: var(--cos-fg-muted); font-size: 12px; line-height: 16px; }
.sh-delta.bad { color: var(--cos-error-strong); font-weight: 500; }
.sh-loc { color: var(--cos-fg); }
.sh-badge {
  display: inline-block; margin: var(--cos-space-4) 0 var(--cos-space-2) var(--cos-space-24);
  background: var(--cos-info-bg); color: var(--cos-info-strong);
  border-radius: var(--cos-corner-s);
  padding: var(--cos-space-2) var(--cos-space-8);
  font-size: 12px; line-height: 16px; font-weight: 500;
}
.sh-actions {
  margin: var(--cos-space-8) 0 var(--cos-space-8) var(--cos-space-24);
  padding-left: var(--cos-space-16);
  display: flex; flex-direction: column; gap: var(--cos-gap-2xs);
  font-size: 14px; line-height: 20px;
}
.sh-actions li::marker { color: var(--cos-fg-subtle); }
/* Hinweis anstelle der Arbeitspositionen, wenn die Werkstatt keine
   Positionen gemeldet hat – kein Listenpunkt, sonst liest es sich wie
   eine durchgeführte Arbeit. */
.sh-note {
  margin: var(--cos-space-8) 0 var(--cos-space-8) var(--cos-space-24);
  color: var(--cos-fg-muted);
  font-size: 14px; line-height: 20px;
}

/* ---------- Kennzahl-Kacheln (Marktwerte, HU) ---------- */
.price-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cos-gap-m); margin: var(--cos-space-8) 0 var(--cos-space-4); }
.ptile {
  background: var(--cos-bg-subtle);
  border: var(--cos-border-width-default) solid var(--cos-border);
  border-radius: var(--cos-corner-m);
  padding: var(--cos-pad-l);
}
.ptile .pl {
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cos-fg-muted); white-space: nowrap;
}
.ptile .pv { font-weight: 600; font-size: 26px; line-height: 32px; color: var(--cos-fg-strong); margin-top: var(--cos-space-4); white-space: nowrap; }
.ptile .ps { font-size: 12px; line-height: 16px; color: var(--cos-fg-muted); margin-top: var(--cos-space-2); }
.ptile.primary { background: var(--cos-yellow-light-3); border-color: var(--cos-yellow-light-1); }
.ptile.alert { background: var(--cos-error-bg); border-color: var(--cos-red-light-1); }
.price-tiles .empty-note { grid-column: 1 / -1; }
.tags .empty-note { flex: 1 1 100%; }

/* ---------- Rückruf-Themen im Peek ----------
   Alle Mangel-Themen auf einen Blick. Vorher stand genau EINE Aktion
   ausgeklappt da: man sah das neueste Thema und musste für die übrigen klicken,
   ohne zu wissen, worum es dabei überhaupt geht. Amtlich überwachte Aktionen
   tragen die Warnfarbe – das ist der Schweregrad, den die Datenbank hergibt. */
.rc-topics { display: flex; flex-wrap: wrap; gap: var(--cos-gap-2xs); }
.rc-topics:empty { display: none; }
.rc-topic {
  font-size: 13px; line-height: 18px;
  padding: var(--cos-space-4) var(--cos-pad-m);
  border-radius: var(--cos-corner-round);
  background: var(--cos-bg-subtle); color: var(--cos-fg);
  border: var(--cos-border-width-default) solid var(--cos-border);
}
.rc-topic.sup {
  background: var(--cos-warning-bg); color: var(--cos-warning-strong);
  border-color: var(--cos-border-color-warning); font-weight: 500;
}

/* ---------- Rückrufe ----------
   Mangel und Datum stehen in der Zeile, die Maßnahme und die Referenz-Nummern
   liegen darunter: bis zu zwölf Aktionen waren vorher alle offen. */
.rc-list { display: flex; flex-direction: column; }
.rc-list > .disc {
  background: var(--cos-bg);
  border: var(--cos-border-width-default) solid var(--cos-border);
  border-radius: var(--cos-corner-m);
  margin-top: var(--cos-space-8);
}
.rc-list > .disc > .disc-head { padding: var(--cos-space-12) var(--cos-pad-l); }
.rc-list > .disc > .disc-body { padding: 0 var(--cos-pad-l) var(--cos-pad-l); }
.rc-list > .disc .disc-sum { white-space: nowrap; }
.rc-list > .disc .disc-title { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.rc-remedy { font-size: 14px; line-height: 20px; }
.rc-remedy .rl {
  display: block; font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cos-fg-muted);
  margin-bottom: var(--cos-space-2);
}
.rc-meta { display: flex; flex-wrap: wrap; gap: var(--cos-gap-2xs); margin-top: var(--cos-space-12); }
.rc-chip {
  font-size: 12px; line-height: 16px; font-weight: 500;
  background: var(--cos-bg-subtle); color: var(--cos-fg-muted);
  border-radius: var(--cos-corner-s);
  padding: var(--cos-space-2) var(--cos-space-8);
}
.rc-chip code { font-family: var(--cos-font-sans); font-size: 12px; color: var(--cos-fg); }
.rc-chip.sup { background: var(--cos-success-bg); color: var(--cos-success-strong); }

/* ---------- Nächste FIN (Conversion-Karte, dunkle Variante) ---------- */
.next-fin { background: var(--cos-bg-inverse); border-color: var(--cos-bg-inverse); color: var(--cos-fg-on-black); padding: var(--cos-pad-2xl); }
.next-fin:hover { box-shadow: none; }
.next-fin .eyebrow {
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cos-yellow);
}
.next-fin h2 { font-weight: 600; font-size: 26px; line-height: 32px; color: var(--cos-fg-on-black); margin-top: var(--cos-space-4); }
.next-fin .sub { color: var(--cos-grey); margin-top: var(--cos-space-8); max-width: 70ch; font-size: 14px; line-height: 20px; }
.next-fin .btn { margin-top: var(--cos-space-24); }

/* ---------- View 4: Meldung ---------- */
#view-message {
  background: var(--cos-bg-inverse); min-height: calc(100vh - var(--cos-space-64));
  display: none; align-items: center; justify-content: center;
  padding: var(--cos-space-40) var(--cos-space-24);
}
#view-message.active { display: flex; }
.msg-card { text-align: center; }
.msg-card h2 { font-weight: 600; font-size: 20px; line-height: 28px; color: var(--cos-fg-strong); }
.msg-icon {
  width: var(--cos-space-48); height: var(--cos-space-48);
  margin: 0 auto var(--cos-space-16);
  border-radius: var(--cos-corner-round);
  background: var(--cos-warning-bg); color: var(--cos-warning-strong);
  display: inline-flex; align-items: center; justify-content: center;
}
.msg-icon.err { background: var(--cos-error-bg); color: var(--cos-error-strong); }
.msg-icon svg { width: var(--cos-space-24); height: var(--cos-space-24); display: block; }
.msg-text { color: var(--cos-fg-muted); margin-top: var(--cos-space-8); font-size: 14px; line-height: 20px; }
.msg-card .btn { margin-top: var(--cos-space-20); }

/* ---------- Footer ---------- */
.foot {
  max-width: var(--cos-container); margin: 0 auto;
  padding: var(--cos-space-20) var(--cos-space-24) var(--cos-space-40);
  font-size: 12px; line-height: 16px; color: var(--cos-fg-muted);
}

/* ---------- Motion & Responsive ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
/* Breakpoints laut Token-Layer: tablet = --cos-breakpoint-tablet (1080px),
   mobile = --cos-breakpoint-mobile (750px). CSS erlaubt in Media Queries
   keine var()-Werte – die Zahlen spiegeln exakt die Tokens. */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; padding: var(--cos-space-48) var(--cos-space-20) var(--cos-space-64); gap: var(--cos-gap-xl); }
  .id-inner { grid-template-columns: 1fr; gap: var(--cos-gap-l); }
  .card.full .specs { grid-template-columns: 1fr 1fr; }
  .price-tiles { grid-template-columns: 1fr 1fr; }
  .verdicts { grid-template-columns: 1fr 1fr; }
  .sh-main { grid-template-columns: 1fr; }
}
@media (max-width: 750px) {
  .hero h1 { font-size: 32px; line-height: 44px; }
  .id-title { font-size: 26px; line-height: 32px; }
  .card.full .specs { grid-template-columns: 1fr; }
  .specs { grid-template-columns: 1fr; }
  .card.full .specs.specs-lead { grid-template-columns: 1fr; }
  .price-tiles { grid-template-columns: 1fr 1fr; }
  .sh-card { padding: var(--cos-pad-xl); }
  .sh-card .price-tiles { grid-template-columns: 1fr; }
  .sh-card .ptile .pv { font-size: 20px; line-height: 28px; }
  .sh-panel { padding: var(--cos-pad-l); }
  .sh { grid-template-columns: 1fr; }
  /* Die Kurve skaliert über die viewBox mit – Schrift und Linien im SVG
     müssen dafür größer werden, sonst sind sie auf dem Handy unlesbar. */
  .sh-axis { font-size: 19px; }
  .sh-lastval { font-size: 22px; stroke-width: 6px; }
  .sh-line { stroke-width: 4; }
  .sh-line-rollback { stroke-width: 5; }
  .sh-ref { stroke-width: 2.5; stroke-dasharray: 8 8; }
  .sh-line-origin { stroke-width: 3; stroke-dasharray: 5 6; }
  .sh-dot { stroke-width: 3; r: 7px; }
  .kpi .num { font-size: 20px; line-height: 28px; }
  .hero .kpis { gap: var(--cos-gap-l); }

  /* ---- Mobil aggressiver: Kacheln 2×2, Kopfzeilen dürfen umbrechen ----
     Was eingeklappt startet, entscheidet JS (isMobile() ignoriert data-open) –
     hier geht es nur um das Layout dessen, was übrig bleibt. */
  /* ---- Kapitel-Leiste mobil ----
     Acht Chips passen nicht auf 375 px – die Leiste scrollt hier waagerecht,
     genau wie die alte Schiene. Der "Weitere FIN"-CTA weicht (die Karte am
     Seitenende trägt ihn), der Alle-öffnen-Schalter bleibt: auf dem Handy
     startet ausnahmslos jedes Detail zugeklappt, dort ist er am nützlichsten. */
  .repnav-inner { padding: var(--cos-space-8) var(--cos-space-20); gap: var(--cos-gap-2xs); }
  .repnav-cta { display: none; }
  .repnav-chip { font-size: 12px; padding: var(--cos-space-4) var(--cos-pad-s); }
  .repnav-all { padding: var(--cos-space-4) var(--cos-pad-s); }

  /* Der Peek eines Kapitels muss auf dem Handy in Bildschirmhöhe passen –
     sonst kostet die Ein-Seiten-Struktur mehr Scroll als die Tabs. */
  .chap-take { font-size: 15px; line-height: 23px; margin-bottom: var(--cos-space-16); }
  .chap-no { min-width: var(--cos-space-20); font-size: 12px; }
  /* Der Kapitel-Schalter bricht zweizeilig um: Aufforderung oben,
     Inhaltsangabe darunter – auf 375 px stehen sie nicht nebeneinander. */
  .disc-chap > .disc-head { padding: var(--cos-space-12) var(--cos-pad-m); }
  .disc-chap > .disc-head > .disc-sum { margin-left: 0; text-align: left; }
  .disc-chap > .disc-body { padding: 0 var(--cos-pad-m) var(--cos-pad-m); }

  .verdicts { grid-template-columns: 1fr 1fr; gap: var(--cos-gap-2xs); margin-top: var(--cos-space-16); }
  .vtile { padding: var(--cos-pad-s) var(--cos-pad-m); border-left-width: 3px; }
  .vt-v { font-size: 20px; line-height: 28px; }
  /* Auf 375px passen Titel, Zusammenfassung und Badge nicht in eine Zeile. */
  .disc-head { flex-wrap: wrap; }
  /* Der Titel muss dabei umbrechen DÜRFEN. Basis 0 statt auto ist der Punkt:
     mit flex-wrap entscheidet der Browser über den Umbruch, BEVOR er schrumpft
     – ein langer Titel ("Wann welche Probleme wahrscheinlich werden") rutscht
     sonst komplett unter das Chevron, statt neben ihm zweizeilig zu stehen. */
  .disc-title { flex: 1 1 0; min-width: 0; }
  .disc-sum { white-space: normal; flex: 1 1 100%; padding-left: var(--cos-space-24); }
  .disc-head > .verdict { margin-left: var(--cos-space-24); }
  .mdx-item > .disc-head { padding: var(--cos-space-12) var(--cos-pad-m); }
  .mdx-item > .disc-body { padding: 0 var(--cos-pad-m) var(--cos-pad-m); }
  /* Zeile 1: Chevron, Nummer, Titel. Zeile 2: Kosten und Badges, eingerückt
     unter dem Titel – so bleibt die Nummer immer bei ihrem Punkt. Die Badges
     müssen dabei untereinander umbrechen dürfen: Kosten + Schwere +
     Fälligkeit sind auf 390 px sonst breiter als die Karte und liefen unter
     dem Kartenrand heraus. */
  .mdx-item > .disc-head .mdx-item-title { flex: 1 1 0; }
  .mdx-item-meta {
    flex: 1 1 100%; margin-left: 0; flex-wrap: wrap;
    padding-left: var(--cos-space-40); justify-content: flex-start;
  }
  .lc-body { padding: var(--cos-pad-m); }
  /* Kennzahlen nebeneinander statt untereinander – gestapelt war der dunkle
     Kopf allein 360 px hoch. Spalten über auto-flow statt fester Zahl oder
     Mindestbreite: es sind zwei Kacheln, wenn kein Punkt einen
     Kostenrichtwert hat, und drei mit. Beide Fälle füllen so die Zeile. */
  .lc-stats {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: var(--cos-gap-s);
  }
  .rc-list > .disc .disc-sum { white-space: normal; }
  /* Der Info-Punkt darf nicht über den Bildschirmrand hinauslaufen. */
  .tip-pop { max-width: min(280px, calc(100vw - 48px)); }
  .card-head .tip-pop, .tip-wrap .tip-pop { left: auto; right: 0; transform: none; }
}

/* =====================================================================
   PDF-Report – zwei DIN-A4-Seiten
   ---------------------------------------------------------------------
   Eigenes Dokument, kein Druck-Stylesheet auf den Bildschirm-Report: der
   Report ist eine lange Seite aus aufklappbaren Kapiteln, das PDF soll
   zwei Blätter für den Besichtigungstermin sein. Aufgebaut wird es in
   app.js (buildPrintDoc) aus demselben Ergebnis-Objekt.

   Warum die Regeln NICHT in @media print stehen: app.js misst die beiden
   Seiten vor dem Druck aus und kürzt, was nicht mehr draufpasst (prFit).
   Messen geht nur mit angewandtem Layout – der Container hängt deshalb
   während des Exports sichtbar, aber außerhalb des Bildschirms
   (.is-measuring). Im Druck ist er das einzig Sichtbare.
   ===================================================================== */

.prdoc { display: none; }
/* Nur während des Exports: Layout aktiv, aber neben dem Bildschirm –
   so lässt sich die Seitenhöhe messen, ohne dass etwas aufblitzt. */
.prdoc.is-measuring {
  display: block; position: fixed; top: 0; left: -300vw;
  width: 210mm; pointer-events: none;
}

.prdoc {
  color: var(--cos-fg); background: var(--cos-white);
  font-family: var(--cos-font-sans); font-size: 11px; line-height: 1.45;
}
.pr-page {
  width: 210mm; height: 296mm; padding: 0 13mm 8mm;
  /* Feste Höhe – das ist die Zusage "nie mehr als zwei Seiten". prFit()
     kürzt vorher so weit, dass hier nichts anliegt; overflow ist die
     letzte Sicherung, nicht der Normalfall. */
  overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  background: var(--cos-white);
}

/* ---------- Kopfbalken (voll bis an die Blattkante) ---------- */
.pr-top {
  flex: none; margin: 0 -13mm 12px; padding: 0 13mm; height: 44px;
  background: var(--cos-black); color: var(--cos-white);
  display: flex; align-items: center; gap: 10px;
}
.pr-top-slim { height: 34px; margin-bottom: 10px; }
.pr-brand { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.pr-brand b { font-weight: 600; color: var(--cos-yellow); }
.pr-top-slim .pr-brand { font-size: 14px; }
.pr-top-div { width: 1px; height: 16px; background: var(--cos-grey-dark-3); }
.pr-feature {
  font-size: 9.5px; font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; color: var(--cos-grey);
}
.pr-top-sp { flex: 1; }
.pr-top-meta { font-size: 9.5px; font-weight: 500; color: var(--cos-grey-light-1); }

/* ---------- Identität + Datenabdeckung ---------- */
.pr-id {
  flex: none; display: flex; align-items: flex-start; gap: 16px;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 2px solid var(--cos-yellow);
}
.pr-id-main { flex: 1; min-width: 0; }
.pr-eyebrow {
  font-size: 8.5px; font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; color: var(--cos-fg-subtle); margin-bottom: 3px;
}
.pr-title {
  font-size: 23px; line-height: 1.15; font-weight: 600;
  color: var(--cos-fg-strong); letter-spacing: -.01em;
}
.pr-meta { font-size: 11px; color: var(--cos-fg-muted); margin-top: 3px; }
.pr-vin {
  font-size: 10px; font-weight: 500; color: var(--cos-fg-subtle);
  letter-spacing: .04em; margin-top: 3px;
}
/* Die Datenabdeckung ist eine Aussage ÜBER den Report, nicht über das
   Fahrzeug – deshalb klein neben dem Titel und nicht als Kachel. */
.pr-cov {
  flex: none; text-align: right; padding-left: 14px;
  border-left: 1px solid var(--cos-border);
}
.pr-cov-num { font-size: 22px; font-weight: 600; color: var(--cos-fg-strong); line-height: 1.1; }
.pr-cov-num span { font-size: 12px; font-weight: 500; color: var(--cos-fg-subtle); }
.pr-cov-lbl { font-size: 8.5px; color: var(--cos-fg-muted); margin-top: 1px; }

/* ---------- Die vier Kennzahlen ---------- */
.pr-tiles {
  flex: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 12px;
}
.pr-tile {
  border: 1px solid var(--cos-border); border-top: 3px solid var(--cos-grey);
  border-radius: var(--cos-corner-m); padding: 8px 9px 9px;
  background: var(--cos-white);
}
.pr-tile-l {
  font-size: 8.5px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cos-fg-muted);
}
.pr-tile-v {
  font-size: 17px; font-weight: 600; line-height: 1.2;
  color: var(--cos-fg-strong); margin: 3px 0 2px;
}
.pr-tile-s { font-size: 8.5px; line-height: 1.3; color: var(--cos-fg-muted); }
.pr-tile.lvl-accent { border-top-color: var(--cos-yellow); background: var(--cos-yellow-light-3); }
.pr-tile.lvl-ok     { border-top-color: var(--cos-green); background: var(--cos-green-light-3); }
.pr-tile.lvl-warn   { border-top-color: var(--cos-orange); background: var(--cos-orange-light-3); }
.pr-tile.lvl-bad    { border-top-color: var(--cos-red); background: var(--cos-red-light-3); }
.pr-tile.lvl-muted  { border-top-color: var(--cos-grey); background: var(--cos-grey-light-2); }

/* ---------- Karten ---------- */
.pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
/* Spalte mit mehreren Karten untereinander – die Karten bleiben oben
   bündig, statt sich über die Spaltenhöhe zu strecken. */
.pr-col { display: grid; gap: 10px; align-content: start; }
.pr-grid + .pr-grid, .pr-grid + .pr-card,
.pr-card + .pr-grid, .pr-card + .pr-card { margin-top: 10px; }
.pr-card {
  border: 1px solid var(--cos-border); border-radius: var(--cos-corner-m);
  padding: 9px 11px 10px; background: var(--cos-white); break-inside: avoid;
}
.pr-card-head {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 6px; margin-bottom: 7px;
  border-bottom: 1px solid var(--cos-divider);
}
.pr-card-title {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 600;
  color: var(--cos-fg-strong);
}
.pr-verdict {
  flex: none; font-size: 8.5px; font-weight: 600; border-radius: var(--cos-corner-round);
  padding: 2px 7px; white-space: nowrap;
}
.pr-verdict.lvl-ok   { background: var(--cos-green-light-3); color: var(--cos-green-dark-2); }
.pr-verdict.lvl-warn { background: var(--cos-orange-light-3); color: var(--cos-orange-dark-2); }
.pr-verdict.lvl-bad  { background: var(--cos-red-light-3); color: var(--cos-red-dark-2); }
.pr-verdict.lvl-info { background: var(--cos-grey-light-2); color: var(--cos-grey-dark-2); }

.pr-kv {
  display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
  border-bottom: 1px solid var(--cos-border-color-subtle); font-size: 10px;
}
.pr-kv:last-child { border-bottom: 0; }
.pr-kv .k { flex: 1; min-width: 0; color: var(--cos-fg-muted); }
.pr-kv .v { flex: none; font-weight: 600; color: var(--cos-fg-strong); text-align: right; }
.pr-empty, .pr-note { font-size: 9.5px; line-height: 1.4; color: var(--cos-fg-muted); }
.pr-note { margin-top: 6px; }
.pr-sub {
  font-size: 8.5px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cos-fg-muted); margin: 8px 0 5px;
}

/* ---------- EK → VK ---------- */
.pr-spread { margin-bottom: 9px; }
.pr-spread-bar {
  height: 9px; border-radius: var(--cos-corner-round);
  background: var(--cos-yellow); overflow: hidden;
}
.pr-spread-fill { display: block; height: 100%; background: var(--cos-black-light-1); }
.pr-spread-leg {
  display: flex; justify-content: space-between; gap: 6px; margin-top: 4px;
  font-size: 9px; font-weight: 600;
}
.pr-spread-leg .sp-ek { color: var(--cos-fg-strong); }
.pr-spread-leg .sp-margin { color: var(--cos-yellow-dark-1); }
.pr-spread-leg .sp-vk { color: var(--cos-fg-muted); }

.pr-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.pr-flag {
  font-size: 8.5px; font-weight: 500; border-radius: var(--cos-corner-round);
  padding: 2px 7px;
}
.pr-flag.ok   { background: var(--cos-green-light-3); color: var(--cos-green-dark-2); }
.pr-flag.warn { background: var(--cos-orange-light-3); color: var(--cos-orange-dark-2); }

/* ---------- Tachostand ---------- */
.pr-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; margin-bottom: 8px; }
.pr-fact-v { font-size: 13px; font-weight: 600; color: var(--cos-fg-strong); line-height: 1.2; }
.pr-fact-l { font-size: 8.5px; line-height: 1.3; color: var(--cos-fg-muted); }
.pr-chart { margin-bottom: 7px; }
.pr-chart-svg { display: block; width: 100%; height: auto; }
.pr-chart-base { stroke: var(--cos-border); stroke-width: 1; }
.pr-chart-area { fill: var(--cos-yellow-light-3); }
.pr-chart-line { stroke: var(--cos-yellow-dark-1); stroke-width: 1.8; stroke-linecap: round; }
.pr-chart-line.is-input { stroke: var(--cos-grey-dark-1); stroke-dasharray: 3 2.5; }
.pr-chart-line.is-anom { stroke: var(--cos-red); stroke-width: 2.2; }
.pr-chart-line.is-origin { stroke: var(--cos-grey-dark-1); stroke-width: 1.4; stroke-dasharray: 2 2; }
.pr-chart-dot { fill: var(--cos-black-light-1); }
.pr-chart-dot.is-input { fill: var(--cos-white); stroke: var(--cos-grey-dark-1); stroke-width: 1.4; }
.pr-chart-dot.is-origin { fill: var(--cos-white); stroke: var(--cos-grey-dark-1); stroke-width: 1.2; }
.pr-chart-dot.is-anom { fill: var(--cos-red); }
.pr-chart-cap { font-size: 8.5px; line-height: 1.3; color: var(--cos-fg-subtle); margin-top: 3px; }

.pr-checks { list-style: none; }
.pr-check {
  padding: 4px 0 4px 9px; border-left: 2px solid var(--cos-grey);
  border-bottom: 1px solid var(--cos-border-color-subtle);
}
.pr-check:last-child { border-bottom: 0; padding-bottom: 0; }
.pr-check.lvl-ok   { border-left-color: var(--cos-green); }
.pr-check.lvl-warn { border-left-color: var(--cos-orange); }
.pr-check.lvl-bad  { border-left-color: var(--cos-red); }
.pr-check.lvl-info { border-left-color: var(--cos-cyan-dark-1); }
.pr-check-t { display: block; font-size: 10px; font-weight: 600; color: var(--cos-fg-strong); }
.pr-check-x { display: block; font-size: 9px; line-height: 1.35; color: var(--cos-fg-muted); }

/* ---------- KI-Markteinschätzung ---------- */
.pr-ai-text { font-size: 10.5px; line-height: 1.5; color: var(--cos-fg); }
.pr-ai-meta { font-size: 8.5px; color: var(--cos-fg-subtle); margin-top: 5px; }

/* ---------- Serviceeinträge (Tabelle) ---------- */
.pr-se {
  display: grid; grid-template-columns: 62px 68px 1fr 1fr; gap: 0 10px;
  font-size: 9.5px; align-items: baseline;
}
.pr-se-h {
  font-size: 8px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cos-fg-subtle); padding-bottom: 3px;
  border-bottom: 1px solid var(--cos-divider);
}
/* Die Zeile ist ein eigenes Element, damit prFit sie am Stück kürzen kann –
   liegt aber im Raster der Tabelle statt daneben. */
.pr-se-row { display: contents; }
.pr-se-c {
  padding: 3px 0; border-bottom: 1px solid var(--cos-border-color-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-se-c.num { font-weight: 600; color: var(--cos-fg-strong); }
.pr-se-c.dim { color: var(--cos-fg-muted); }

/* ---------- Seite 2: der Prüfrundgang ---------- */
.pr-guide { flex: none; margin-bottom: 10px; }
.pr-guide-head {
  background: var(--cos-black-light-1); color: var(--cos-white);
  border-radius: var(--cos-corner-m); padding: 11px 13px;
  display: grid; grid-template-columns: 1fr 210px; gap: 14px; align-items: start;
}
.pr-guide-head .pr-eyebrow { color: var(--cos-yellow); }
.pr-guide-title { font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--cos-white); }
.pr-guide-sum { font-size: 9.5px; line-height: 1.45; color: var(--cos-grey-light-1); margin-top: 5px; }

.pr-risk { margin-bottom: 8px; }
.pr-risk-l {
  font-size: 8px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cos-grey-dark-1);
}
.pr-risk-w { font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--cos-white); }
.pr-risk-meter { display: flex; gap: 3px; margin-top: 4px; }
.pr-risk-meter i {
  display: block; width: 20px; height: 4px; border-radius: var(--cos-corner-round);
  background: var(--cos-grey-dark-3);
}
.pr-risk.lvl-low  .pr-risk-meter i.on { background: var(--cos-green); }
.pr-risk.lvl-mid  .pr-risk-meter i.on { background: var(--cos-yellow); }
.pr-risk.lvl-high .pr-risk-meter i.on { background: var(--cos-orange); }

.pr-guide-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.pr-gstat { border-top: 2px solid var(--cos-grey-dark-3); padding-top: 4px; }
.pr-gstat.hot { border-top-color: var(--cos-yellow); }
.pr-gstat .v { display: block; font-size: 13px; font-weight: 600; color: var(--cos-white); line-height: 1.15; }
.pr-gstat .l { display: block; font-size: 8px; line-height: 1.25; color: var(--cos-grey); }

.pr-guide-body { margin-top: 9px; }
.pr-phase { margin-bottom: 7px; }
.pr-phase:last-child { margin-bottom: 0; }
.pr-phase-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.pr-phase-no {
  flex: none; width: 14px; height: 14px; border-radius: var(--cos-corner-round);
  background: var(--cos-yellow); color: var(--cos-fg-on-yellow);
  font-size: 9px; font-weight: 600; text-align: center; line-height: 14px;
}
.pr-phase-t { font-size: 10.5px; font-weight: 600; color: var(--cos-fg-strong); }
.pr-phase-d { font-size: 8.5px; color: var(--cos-fg-subtle); }

/* Auf Papier ist der Guide eine Checkliste – jede Zeile bekommt ein
   Kästchen zum Abhaken beim Termin. */
.pr-item {
  display: grid; grid-template-columns: 13px 1fr 132px; gap: 7px;
  align-items: start; padding: 4px 0 4px 20px;
  border-top: 1px solid var(--cos-border-color-subtle);
}
.pr-item.is-due { background: var(--cos-orange-light-3); }
.pr-item-box {
  width: 10px; height: 10px; margin-top: 2px;
  border: 1.2px solid var(--cos-grey-dark-1); border-radius: 2px;
}
.pr-item-main { min-width: 0; }
.pr-item-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; }
.pr-item-n { font-size: 9.5px; font-weight: 600; color: var(--cos-fg-subtle); }
.pr-item-title { font-size: 10px; font-weight: 600; color: var(--cos-fg-strong); }
.pr-item-area { font-size: 8.5px; color: var(--cos-fg-subtle); }
.pr-item-check { font-size: 9px; line-height: 1.35; color: var(--cos-fg-muted); }
.pr-item-badges { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.pr-badge {
  font-size: 8px; font-weight: 500; border-radius: var(--cos-corner-round);
  padding: 1px 6px; white-space: nowrap;
  background: var(--cos-grey-light-2); color: var(--cos-grey-dark-2);
}
.pr-badge.due  { background: var(--cos-orange); color: var(--cos-white); font-weight: 600; }
.pr-badge.cost { background: var(--cos-yellow-light-3); color: var(--cos-yellow-dark-1); }
.pr-badge.sev  { background: var(--cos-red-light-3); color: var(--cos-red-dark-2); }
.pr-more { font-size: 9px; color: var(--cos-fg-subtle); margin-top: 6px; }

/* ---------- Seite 2: Rückrufe & Fahrzeugdaten ---------- */
.pr-rc { list-style: none; }
.pr-rc-item { padding: 4px 0; border-bottom: 1px solid var(--cos-border-color-subtle); }
.pr-rc-item:last-child { border-bottom: 0; }
.pr-rc-d { display: block; font-size: 9.5px; font-weight: 500; color: var(--cos-fg); line-height: 1.35; }
.pr-rc-m { display: flex; gap: 6px; font-size: 8.5px; color: var(--cos-fg-subtle); margin-top: 1px; }
.pr-rc-m .sup { color: var(--cos-orange-dark-2); font-weight: 500; }

.pr-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.pr-tag {
  font-size: 8.5px; border-radius: var(--cos-corner-s); padding: 2px 6px;
  background: var(--cos-yellow-light-3); color: var(--cos-fg);
  border: 1px solid var(--cos-yellow-light-1);
}
.pr-tag.more { background: var(--cos-grey-light-2); border-color: var(--cos-border); color: var(--cos-fg-muted); }

/* ---------- Fuß ---------- */
.pr-foot {
  margin-top: auto; padding-top: 7px; border-top: 2px solid var(--cos-yellow);
  font-size: 7.5px; line-height: 1.4; color: var(--cos-fg-subtle);
}

@media print {
  /* Randlos, damit der schwarze Markenbalken bis an die Blattkante geht –
     die Seitenränder setzt .pr-page selbst. */
  @page { size: A4 portrait; margin: 0; }

  /* Flächen und Markenfarben müssen mitdrucken. print-color-adjust: exact
     überstimmt die Voreinstellung "Hintergrundgrafiken aus" im Druckdialog
     – sonst käme der Report als Graustufen-Umriss. */
  html, body {
    background: var(--cos-white) !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body > *:not(.prdoc) { display: none !important; }
  .prdoc, .prdoc.is-measuring {
    display: block; position: static; left: auto; top: auto; width: auto;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .prdoc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-page-1 { break-after: page; page-break-after: always; }
}