.dk-bausteine { margin: var(--a-1) 0 var(--a-3) var(--a-5); }


.dk-leiste {
  display: flex; align-items: center; gap: var(--a-3);
  margin-left: calc(-1 * var(--a-2)); padding: 3px var(--a-2);
  border-radius: var(--r-1);
  font-size: 11.5px; color: var(--text-3);
  cursor: pointer; user-select: none;
}
.dk-leiste:hover { color: var(--text-2); background: var(--linie-weich); }
.dk-leiste:focus-visible, .dk-kopf:focus-visible { outline: 2px solid var(--p-linie); outline-offset: -2px; }
.dk-leiste-icon { display: inline-flex; }
.dk-leiste-titel { font-weight: 600; }
.dk-anzahl { font-family: var(--mono); font-size: 10.5px; }
.dk-leiste-zustand {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10.5px; color: var(--p);
}
.dk-leiste-zustand:empty { display: none; }
.dk-leiste .info { margin-left: auto; }
.dk-chev { flex: none; transition: transform .15s ease; }
.dk-leiste[aria-expanded="true"] .dk-chev,
.dk-kopf[aria-expanded="true"] .dk-chev { transform: rotate(90deg); }


.denkkarte:not(.offen) > .dk-bausteine:not(.liste-offen) > .dk-liste,
.dk-bausteine.liste-zu > .dk-liste { display: none; }
.dk-liste {
  display: flex; flex-direction: column; gap: var(--a-1);
  margin-top: var(--a-1);
}


.dk-bau {
  border: 1px solid var(--linie); border-radius: var(--r-1);
  background: var(--flaeche); overflow: hidden;
}
.dk-bau.laeuft { border-color: var(--p-linie); }
.dk-kopf {
  display: flex; align-items: center; gap: var(--a-3); min-width: 0;
  padding: 4px var(--a-3);
  font-size: 11.5px; color: var(--text-2);
  cursor: pointer; user-select: none;
}
.dk-kopf:hover { background: var(--linie-weich); }
.dk-nr {
  min-width: 1.4em; text-align: right;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
}
.dk-sprache {
  padding: 1px 5px; border-radius: var(--r-rund);
  background: var(--p-flaeche); color: var(--p-tief);
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
}
.dk-titel {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: none; border: 0; padding: 0;
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
}
.dk-zeilen {
  white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
}
.dk-zustand {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 10.5px; color: var(--p);
}
.dk-zustand:empty { display: none; }
.dk-bau.abgebrochen .dk-zustand { color: var(--warn); }
.dk-zustand .punkt, .dk-leiste-zustand .punkt { background: var(--p); }

.dk-kopieren {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px; border: 0; border-radius: 6px;
  background: none; color: var(--text-3);
  cursor: pointer; opacity: 0;
}
.dk-kopf:hover .dk-kopieren, .dk-kopieren:focus-visible, .dk-kopieren.kopiert { opacity: 1; }
.dk-kopieren:hover { color: var(--text-2); background: var(--linie); }
.dk-kopieren.kopiert { color: var(--p); }


.dk-bau[data-stufe="zu"] .dk-code,
.dk-bau[data-stufe="zu"] .dk-mehr { display: none; }


.dk-code.md pre {
  margin: 0; padding: var(--a-3) var(--a-4);
  border: 0; border-top: 1px solid var(--linie); border-radius: 0;
  max-height: 70vh; overflow: auto;
}
.dk-bau.gekuerzt .dk-code { position: relative; }
.dk-bau.gekuerzt .dk-code::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.6em;
  background: linear-gradient(to bottom, transparent, var(--code-bg));
  pointer-events: none;
}
.dk-mehr {
  display: block; width: 100%;
  padding: 4px; border: 0; border-top: 1px solid var(--code-rand);
  background: var(--code-bg-2); color: var(--code-fg-3);
  font: inherit; font-size: 10.5px; cursor: pointer;
}
.dk-mehr:hover { background: var(--code-bg-3); color: var(--code-fg); }
.dk-mehr[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .dk-chev { transition: none; }
}