/* ════════════════════════════════════════════════════════════════════════════════
   KI-ÜBERBLICK — nur das, was es vorher nicht gab (30.10.2026)
   ────────────────────────────────────────────────────────────────────────────────
   Kartenrahmen, Ladeskelett, Leerzustand, Hinweisband und Knöpfe kommen aus der
   Bausteinschicht (`vi-components.css` · `design-system.css`). Hier stehen DREI
   Dinge, für die es keinen Baustein gibt: die Abschnittsliste, die Quellenmarke
   und der Block „Nicht berücksichtigt".

   Tokenrein: kein Hexwert, kein Pixelmaß außerhalb der `--space-*`-Leiter, keine
   Versalien. Namensraum ausschließlich `.kiu-`.
   ════════════════════════════════════════════════════════════════════════════════ */

/* Der Einbauort selbst zeichnet nichts — die Karte darin bringt ihre Fläche mit. */
.kiu-host { display: block; }

/* Band und Fehlermeldung bringen ihren Abstand nach unten nicht mit — in dieser
   Karte folgt direkt darunter der erste Abschnitt. */
.kiu-host .vic-alert + .kiu-sec,
.kiu-host .vic-alert + .vic-empty,
.kiu-host .vic-alert + .vic-alert { margin-top: var(--space-4); }

/* ── Abschnitt: Überschrift + Punkte ──────────────────────────────────────────── */
.kiu-sec + .kiu-sec { margin-top: var(--space-4); }

.kiu-sec-t {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-500);
}

.kiu-list { margin: 0; padding: 0; list-style: none; }

.kiu-p {
  display: block;
  padding: var(--space-1) 0;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--gray-900);
}
.kiu-p + .kiu-p { border-top: 1px solid var(--gray-200); }

/* Unbelegt ist LEISE gekennzeichnet, nicht alarmiert: es ist eine ehrliche Angabe,
   kein Fehler. Rot wäre hier eine Handlungsaufforderung, die es nicht gibt. */
.kiu-p--unbelegt .kiu-p-t { color: var(--gray-700); }

.kiu-unbelegt {
  margin-left: var(--space-2);
  padding: 0 var(--space-1);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: var(--text-xxs);
  color: var(--gray-500);
  white-space: nowrap;
}

/* ── Quellenmarken ────────────────────────────────────────────────────────────── */
.kiu-refs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-left: var(--space-2);
  vertical-align: baseline;
}

.kiu-ref {
  padding: 0 var(--space-1);
  border: 1px solid var(--green-200);
  border-radius: var(--radius-sm);
  background: var(--green-50);
  color: var(--green-700);
  font: inherit;
  font-size: var(--text-xxs);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  cursor: pointer;
}
.kiu-ref:hover { border-color: var(--green-700); }
.kiu-ref:focus-visible { outline: 2px solid var(--green-700); outline-offset: 1px; }

/* ── „Nicht berücksichtigt" ───────────────────────────────────────────────────── */
.kiu-hinweise {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gray-200);
}

.kiu-hinweise-t {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-500);
}

.kiu-hinweise ul {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--gray-500);
}

/* Auf dem Telefon bekommen die Punkte mehr Luft. Die Marken bleiben am Satzende
   und brechen mit um — ihr linker Abstand bleibt, sonst kleben sie am Punkt. */
@media (max-width: 720px) {
  .kiu-p { padding: var(--space-2) 0; }
}