/* CoreForge · Build-Space, API Studio, Testlab und Betrieb (Welle A3, Entwurf D7-S9, D7-S11, D8-S7,
   D8-S10). Nur Klassen mit dem Präfix „bt-“; die Bausteine (Karte, Chip, Tabelle, Panel, Formular)
   stylt komponenten.css. Farben ausschließlich über die Variablen aus tokens.css, damit Hell und
   Dunkel aus derselben Regel folgen. */

.bt-seite { display: grid; gap: var(--cf-abstand-4); min-width: 0; }

/* ---------- Kopfzeile mit Stand und Aktionen ---------- */

.bt-kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--cf-abstand-2) var(--cf-abstand-3);
}
.bt-kopf-aktionen, .bt-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-abstand-2); }
.bt-reihe-ende { justify-content: flex-end; }
.bt-stand, .bt-hinweis, .bt-lade { margin: 0; font-size: var(--cf-groesse-meta); color: var(--cf-text-leise); }
.bt-leise { color: var(--cf-text-leise); }
.bt-fehler {
  margin: 0; padding: var(--cf-abstand-2) var(--cf-abstand-3); color: var(--cf-text);
  background: var(--cf-gefahr-weich); border: 1px solid var(--cf-gefahr); border-radius: var(--cf-radius);
}
.bt-mono { font-family: var(--cf-schrift-mono); font-size: 0.92em; overflow-wrap: anywhere; }
.bt-mono-feld { font-family: var(--cf-schrift-mono); font-size: var(--cf-groesse-meta); line-height: 1.5; min-height: 320px; }
.bt-stapel { display: grid; gap: var(--cf-abstand-4); min-width: 0; align-content: start; }
.bt-stapel-eng { display: grid; gap: var(--cf-abstand-3); min-width: 0; }
.bt-abschnitt, .bt-klein-titel {
  margin: 0; font-size: var(--cf-groesse-klein); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cf-text-leise);
}
.bt-gesperrt { opacity: 0.6; cursor: not-allowed; }
.bt-dl {
  display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
  gap: var(--cf-abstand-2) var(--cf-abstand-4); margin: 0;
}
.bt-dl dt { color: var(--cf-text-leise); }
.bt-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.bt-formular-rahmen {
  display: grid; gap: var(--cf-abstand-2); padding: var(--cf-abstand-3);
  background: var(--cf-flaeche); border: 1px solid var(--cf-rahmen); border-radius: var(--cf-radius);
}

/* ---------- API Studio: Baum und Hauptfläche ---------- */

.bt-studio {
  display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: var(--cf-abstand-4); align-items: start; min-width: 0;
}
.bt-studio-haupt { display: grid; gap: var(--cf-abstand-4); min-width: 0; }
.bt-baum {
  display: grid; gap: var(--cf-abstand-3); padding: var(--cf-abstand-3);
  background: var(--cf-karte); border: 1px solid var(--cf-rahmen); border-radius: var(--cf-radius-karte);
  position: sticky; top: var(--cf-abstand-3);
}
.bt-baum-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--cf-abstand-2); }
.bt-baum-titel { margin: 0; font-size: var(--cf-groesse-karte); font-weight: 600; }
.bt-baum-liste, .bt-baum-endpunkte, .bt-incidents, .bt-dienste, .bt-drift-liste { margin: 0; padding: 0; list-style: none; }
.bt-baum-liste { display: grid; gap: 2px; max-height: 60vh; overflow-y: auto; }
.bt-baum-vertrag, .bt-baum-endpunkt {
  display: flex; align-items: center; gap: var(--cf-abstand-2); width: 100%; min-height: 36px;
  padding: var(--cf-abstand-1) var(--cf-abstand-2); font: inherit; text-align: left; color: var(--cf-text);
  background: transparent; border: 1px solid transparent; border-radius: var(--cf-radius); cursor: pointer;
}
.bt-baum-vertrag:hover, .bt-baum-endpunkt:hover { background: var(--cf-flaeche); }
.bt-baum-vertrag[aria-current="true"] { background: var(--cf-akzent-weich); color: var(--cf-akzent-schrift); font-weight: 600; }
.bt-baum-endpunkt[aria-current="true"] { background: var(--cf-flaeche); border-color: var(--cf-rahmen); }
.bt-baum-vertrag:focus-visible, .bt-baum-endpunkt:focus-visible, .bt-incident:focus-visible {
  outline: 2px solid var(--cf-fokus); outline-offset: 1px;
}
.bt-baum-pfeil { width: 1em; color: var(--cf-text-leise); }
.bt-baum-protokoll { font-size: var(--cf-groesse-klein); color: var(--cf-text-leise); }
.bt-baum-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bt-baum-zahl { margin: var(--cf-abstand-1) 0 0 calc(1em + var(--cf-abstand-4)); font-size: var(--cf-groesse-klein); color: var(--cf-text-leise); }
.bt-baum-endpunkte { display: grid; gap: 2px; padding-left: calc(1em + var(--cf-abstand-3)); }
.bt-baum-fuss {
  margin: 0; padding-top: var(--cf-abstand-2); font-size: var(--cf-groesse-meta);
  color: var(--cf-text-leise); border-top: 1px solid var(--cf-rahmen);
}
.bt-pfad { display: flex; flex-wrap: wrap; gap: var(--cf-abstand-1); font-size: var(--cf-groesse-meta); color: var(--cf-text-leise); }
.bt-pfad strong { color: var(--cf-text); }
.bt-endpunkt-titel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-abstand-3); margin: 0; font-size: var(--cf-groesse-titel); }
.bt-zwei { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--cf-abstand-4); align-items: start; }
.bt-konsole { display: grid; gap: var(--cf-abstand-3); }
.bt-konsole-zeile { display: grid; grid-template-columns: minmax(110px, 140px) minmax(0, 1fr) auto; gap: var(--cf-abstand-3); align-items: end; }
.bt-konsole-antwort {
  display: grid; gap: var(--cf-abstand-2); padding: var(--cf-abstand-3);
  background: var(--cf-flaeche); border: 1px dashed var(--cf-rahmen); border-radius: var(--cf-radius);
}

/* ---------- Drift ---------- */

.bt-drift-liste { display: grid; gap: var(--cf-abstand-2); }
.bt-drift-eintrag {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--cf-abstand-3); align-items: start;
  padding: var(--cf-abstand-3); background: var(--cf-karte); border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius-karte);
}
.bt-drift-art {
  font-size: var(--cf-groesse-klein); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cf-text-leise); padding-top: 2px;
}
.bt-drift-text { display: grid; gap: var(--cf-abstand-1); min-width: 0; }

/* ---------- Kacheln (Kennzahlen) ---------- */

.bt-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--cf-abstand-3); }
.bt-kachel {
  display: grid; gap: var(--cf-abstand-1); align-content: start; padding: var(--cf-abstand-3) var(--cf-abstand-4);
  background: var(--cf-karte); border: 1px solid var(--cf-rahmen); border-radius: var(--cf-radius-karte);
}
.bt-kachel-titel { margin: 0; font-size: var(--cf-groesse-meta); font-weight: 500; color: var(--cf-text-leise); }
.bt-kachel-wert { margin: 0; font-size: var(--cf-groesse-kennzahl); font-weight: 600; font-variant-numeric: tabular-nums; }
.bt-kachel-zusatz { margin: 0; font-size: var(--cf-groesse-meta); color: var(--cf-text-leise); }
.bt-verlauf { width: 100%; height: 32px; margin-top: var(--cf-abstand-1); }
.bt-gut { color: var(--cf-erfolg-schrift); }
.bt-schlecht { color: var(--cf-gefahr); }
.bt-befunde { margin: 0; padding-left: 1.2em; text-align: left; }

/* ---------- Betrieb: drei Spalten, Incidents, Zeitachse ---------- */

.bt-drei {
  display: grid; grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: var(--cf-abstand-4); align-items: start;
}
.bt-dienste { display: grid; }
.bt-dienst {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cf-abstand-2);
  padding: var(--cf-abstand-2) 0; border-bottom: 1px solid var(--cf-rahmen);
}
.bt-dienst:last-child { border-bottom: 0; }
.bt-incidents { display: grid; gap: var(--cf-abstand-2); }
.bt-incident {
  display: grid; gap: var(--cf-abstand-2); width: 100%; padding: var(--cf-abstand-3); font: inherit;
  text-align: left; color: var(--cf-text); background: var(--cf-karte); border: 1px solid var(--cf-rahmen);
  border-radius: var(--cf-radius-karte); cursor: pointer;
}
.bt-incident:hover { background: var(--cf-flaeche); }
.bt-incident[aria-current="true"] { background: var(--cf-akzent-weich); border-color: var(--cf-akzent); }
.bt-incident-kopf, .bt-incident-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-abstand-2); }
.bt-incident-titel { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bt-incident-gross { margin: 0; font-size: var(--cf-groesse-karte); }
.bt-abgeschlossen summary, .bt-fassungen summary { cursor: pointer; font-size: var(--cf-groesse-meta); color: var(--cf-text-leise); }
.bt-abgeschlossen[open] summary { margin-bottom: var(--cf-abstand-2); }
.bt-fassungen ul { margin: var(--cf-abstand-2) 0 0; padding-left: 1.2em; font-size: var(--cf-groesse-meta); }
.bt-zeitachse { display: grid; gap: var(--cf-abstand-2); }
.bt-zeitachse-liste { display: grid; gap: var(--cf-abstand-2); margin: 0; padding: 0; list-style: none; }
.bt-zeitachse-liste li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--cf-abstand-3); align-items: baseline; }
.bt-zeitpunkt { width: 8px; height: 8px; border-radius: var(--cf-radius-voll); background: var(--cf-akzent); }
.bt-pruefsumme { margin: 0; padding: var(--cf-abstand-2) var(--cf-abstand-3); background: var(--cf-flaeche); border-radius: var(--cf-radius); font-size: var(--cf-groesse-meta); }
/* Das Postmortem liegt wie im Entwurf als Schublade rechts über der Übersicht, statt sie zu stauchen. */
.bt-md[data-offen="true"] { grid-template-columns: minmax(0, 1fr); }
.bt-md .cfk-md-panel {
  position: fixed; top: var(--cf-kopf-hoehe); right: 0; bottom: 0; z-index: 40;
  width: min(680px, 100vw); max-height: none; border-radius: 0;
  border-width: 0 0 0 1px; box-shadow: var(--cf-schatten);
}

/* ---------- Schmale Breiten ---------- */

@media (max-width: 1280px) {
  .bt-drei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bt-drei > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .bt-studio, .bt-zwei, .bt-drei, .bt-konsole-zeile { grid-template-columns: minmax(0, 1fr); }
  .bt-baum { position: static; }
}
.bt-kachel-wert-text { font-size: var(--cf-groesse-karte); color: var(--cf-text-leise); }

/* ---------- Belege, Filter, Auswahl in Dialogen ---------- */

.bt-belege { display: grid; gap: var(--cf-abstand-2); margin: 0; padding: 0; list-style: none; }
.bt-beleg {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-abstand-2); min-width: 0;
  padding: var(--cf-abstand-2) var(--cf-abstand-3); background: var(--cf-flaeche);
  border: 1px solid var(--cf-rahmen); border-radius: var(--cf-radius);
}
.bt-beleg .bt-mono { flex: 1 1 12em; min-width: 0; }
.bt-filter {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, max-content);
  gap: var(--cf-abstand-2); align-items: end;
}
.bt-haken-liste {
  display: grid; gap: var(--cf-abstand-1); margin: 0; padding: var(--cf-abstand-2) var(--cf-abstand-3);
  max-height: 40vh; overflow-y: auto; border: 1px solid var(--cf-rahmen); border-radius: var(--cf-radius);
}
.bt-haken-liste legend { padding: 0 var(--cf-abstand-1); font-size: var(--cf-groesse-meta); color: var(--cf-text-leise); }

@media (max-width: 960px) {
  .bt-filter { grid-template-columns: minmax(0, 1fr); }
}