/* ============================================================
   openKITTI — KI-Auftrag: Assistent in fuenf Schritten

   Ein Klick-Dummy, der aus Auswahlen und eigenen Angaben einen
   einheitlichen Auftrag an die Assistenz zusammensetzt. Nur
   Rollen aus stil.css; kein eigener Farbwert.
   ============================================================ */

.ka-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  gap: calc(var(--spacing) * 5);
  align-items: start;
}

@media (max-width: 1099px) {
  .ka-raster { grid-template-columns: 1fr; }
}

/* ---------- Der aktuelle Schritt ---------------------------- */

.ka-schritt {
  padding: calc(var(--spacing) * 5);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1), var(--kante-licht);
}

.ka-schritt .rubrik { margin-bottom: calc(var(--spacing) * 2); }

.ka-schritt-frage { margin: 0 0 calc(var(--spacing) * 5); color: var(--color-text-muted); }

.ka-schritt .ab-feld { margin-bottom: calc(var(--spacing) * 5); }

.ka-schritt .ab-feld > legend,
.ka-schritt .ab-feld > label { display: block; margin-bottom: calc(var(--spacing) * 2); font-weight: 700; }

.ka-schritt .chipreihe { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); }

/* Gruppen der Vorgaenge im ersten Schritt. */
.ka-gruppe { margin: calc(var(--spacing) * 5) 0 calc(var(--spacing) * 2); }

.ka-gruppe:first-of-type { margin-top: 0; }

/* Vorgaenge als Karten: Icon, Name, Bereich. */
.ka-vorgaenge {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 2);
}

.ka-vorgang {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-canvas);
  cursor: pointer;
  transition: border-color var(--dauer-zustand) var(--kurve), box-shadow var(--dauer-zustand) var(--kurve);
}

.ka-vorgang:hover { border-color: var(--color-border-brand); }

.ka-vorgang:has(:checked) { border-color: var(--color-border-brand); box-shadow: inset 0 0 0 1px var(--color-border-brand); }

.ka-vorgang:has(:focus-visible) { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

.ka-vorgang input { margin: calc(var(--spacing) * 1) 0 0; }

.ka-vorgang b { display: block; }

.ka-vorgang small { display: block; font-size: 0.8125rem; color: var(--color-text-muted); }

.ka-vorgang .ab-icon { flex: 0 0 auto; margin-top: 2px; color: var(--color-text-accent); }

/* Eigene Angaben: in jedem Schritt aufklappbar, deutlich sichtbar. */
/* Die Flaeche traegt ihre Textrolle selbst (15.09.2026): sie setzte
   einen Grund, aber keine Farbe, und lieh sich den Text von oben. Das
   ging gut, solange der Inhalt hell war; seit dunkel die Vorgabe ist
   (B6), las die Barrierefreiheitspruefung hier dunkel auf dunkel.
   Grund und Text gehoeren an dieselbe Stelle. */
.ka-zusatz {
  margin: calc(var(--spacing) * 2) 0 calc(var(--spacing) * 5);
  border: 1px dashed var(--color-border-control);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-canvas);
  color: var(--color-text-primary);
}

.ka-zusatz summary {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  font-weight: 700;
  color: var(--color-interactive);
  cursor: pointer;
  list-style: none;
}

.ka-zusatz summary::-webkit-details-marker { display: none; }

.ka-zusatz summary::after { content: "+"; margin-left: auto; font-family: var(--font-display); font-size: 1.25rem; line-height: 1; }

.ka-zusatz[open] summary::after { content: "−"; }

.ka-zusatz .ab-feld { margin: 0; padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 4); }

.ka-zusatz textarea { width: 100%; }

.ka-schritt .ab-reihe { justify-content: space-between; }

/* ---------- Vorschau: der Auftrag entsteht ------------------ */

.ka-vorschau {
  position: sticky;
  top: calc(var(--spacing) * 20);
  padding: calc(var(--spacing) * 5);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--kante-licht);
}

@media (max-width: 1099px) { .ka-vorschau { position: static; } }

.ka-prompt {
  margin: 0;
  padding: 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
}

.ka-prompt-block {
  display: block;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-left: 3px solid var(--color-border-hairline);
  transition: background-color var(--dauer-zustand) var(--kurve), border-color var(--dauer-zustand) var(--kurve);
}

.ka-prompt-block[data-aktuell] {
  border-left-color: var(--color-border-brand);
  background-color: var(--color-surface-sunken);
}

.ka-prompt-block[data-offen] { color: var(--color-text-muted); }

.ka-prompt-leer { color: var(--color-text-muted); }

/* ---------- Der Auftrag im Assistenz-Fenster --------------- */

.ka-auftrag-details summary { cursor: pointer; font-size: 0.8125rem; color: var(--color-interactive); }

.ka-auftrag-details pre {
  max-height: 10rem;
  margin: calc(var(--spacing) * 2) 0 0;
  overflow: auto;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Ergebnis --------------------------------------- */

.ka-ergebnis textarea {
  width: 100%;
  min-height: 22rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.ka-zusammenfassung {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
  margin: 0 0 calc(var(--spacing) * 5);
  font-size: 0.9375rem;
}

.ka-zusammenfassung dt { color: var(--color-text-muted); }

.ka-zusammenfassung dd { margin: 0; }

.ka-ergebnis .ab-reihe { justify-content: flex-start; }

.ka-meldung { min-height: 1.5rem; margin: calc(var(--spacing) * 2) 0 0; }