/* ═══════════════════════════════════════════════════════════════════════════════
 * ViCORE — MASTER-DETAIL DER VORGANGSLISTE (Pilot B) · Namensraum .cases-split / .cq-
 * Nur Tokens aus css/design-system.css.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Ohne geteilte Ansicht bleibt der Container unsichtbar — die Liste verhält sich
   exakt wie vorher. Die Detailspalte kommt erst mit `.is-split` dazu. */
.cases-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.cases-split.is-split { grid-template-columns: minmax(0, 1fr) minmax(316px, 356px); }
.cases-split__list { min-width: 0; }
.cases-split__detail {
  min-width: 0; align-self: start;
  background: var(--color-surface);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky; top: var(--space-2);
  max-height: calc(100vh - 220px); overflow-y: auto;
}
.cases-split__detail[hidden] { display: none; }

.cq-head { padding: var(--space-4) var(--space-5) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.cq-head__eyebrow { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.cq-nr { font-size: var(--text-sm); color: var(--gray-500); font-variant-numeric: tabular-nums; }
.cq-status {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-2);
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--fw-semibold);
  background: var(--gray-100); color: var(--gray-700);
}
.cq-title {
  margin: 0; font-size: var(--text-lg); font-weight: var(--fw-semibold);
  letter-spacing: -0.01em; color: var(--gray-900); line-height: var(--lh-snug);
}
.cq-obj { margin: 4px 0 var(--space-4); font-size: var(--text-sm); color: var(--gray-500); }
.cq-open { width: 100%; justify-content: center; }

.cq-sec { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); }
.cq-sec:first-of-type { border-top: 0; }
.cq-sec__t {
  margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--gray-500);
}

/* Fakten als zweispaltige Definitionsliste: Beschriftung links schmal, Wert rechts.
   Kein Rahmen je Feld — das wäre Karte-in-Karte in der Detailspalte. */
.cq-facts { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cq-fact { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.cq-fact__k { font-size: var(--text-sm); color: var(--gray-500); }
.cq-fact__v { margin: 0; font-size: var(--text-md); color: var(--gray-900); min-width: 0; overflow-wrap: anywhere; }
.cq-na { color: var(--gray-400); font-style: italic; }

.cq-next { margin: 0; font-size: var(--text-md); color: var(--gray-900); }
.cq-next__d { color: var(--color-danger-ink); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* Sprungziele in die bestehenden Reiter — eine Liste, keine Knopfwand. */
.cq-jumps { display: flex; flex-direction: column; }
.cq-jump {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 9px 0; border: 0; border-top: 1px solid var(--border-subtle);
  background: transparent; color: var(--gray-900); font: inherit; border-radius: 0;
}
.cq-jumps > .cq-jump:first-child { border-top: 0; }
.cq-jump:hover .cq-jump__l { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
.cq-jump:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cq-jump__l { font-size: var(--text-md); }
.cq-jump__n {
  font-size: var(--text-xs); color: var(--gray-500); background: var(--gray-100);
  border-radius: var(--radius-pill); padding: 1px var(--space-2); font-variant-numeric: tabular-nums;
}

.cq-empty { padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: 3px; }
.cq-empty__t { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--gray-900); }
.cq-empty__s { font-size: var(--text-sm); color: var(--gray-500); }

/* Unter 1100 px gibt es keine geteilte Ansicht: zwei zu schmale Spalten sind
   schlechter als eine gute Liste. */
@media (max-width: 1099px) {
  .cases-split.is-split { grid-template-columns: minmax(0, 1fr); }
  .cases-split__detail { position: static; max-height: none; }
}