/* <cw-asset3d-baukasten-overlay> — Port Asset3DManagementOverlay.vue
   (SPEC-0126). Drei-Spalten-Verwaltungssicht.

   HÖHENKETTE (Nutzermeldung „nicht mehr nutzbar", gemessen 2026-08-06):
   Diese Datei hatte `grid-template-rows: auto auto 1fr auto` — und verließ
   sich darauf, dass Fehler- und Meldungszeile IMMER Rasterkinder stellen.
   Sie sind aber bedingt. Im Normalfall (kein Fehler, keine Meldung) hat das
   Overlay nur ZWEI Kinder: Kopfzeile und Körper. Der Körper landete damit in
   der zweiten `auto`-Zeile und war 196 px hoch, während die `1fr`-Zeile mit
   682 px leer darunter stand — der ganze Dialog steckte in einem Streifen.
   Sobald eine Statuszeile erschien, sprang derselbe Körper auf 840 px.
   Deshalb jetzt Flex-Spalte mit `flex: 1` am Körper, genau wie der Bestand
   (`.asset3d-shell` display:flex, `.asset3d-layout` flex:1): die Höhe hängt
   an der Struktur, nicht an der Anzahl gerade sichtbarer Zeilen.

   FARBEN/MASSE: Tokenkette und Maße sind aus dem Bestand übernommen
   (Asset3DManagementOverlay.vue:1465-2182), damit der Dialog in allen vier
   Themen so aussieht wie dort. */
.asset3d-baukasten-overlay {
  --asset3d-bg: var(--area-builder-panel-bg, var(--surface));
  --asset3d-surface: var(--area-builder-side-panel-bg, var(--surface));
  --asset3d-surface-strong: var(--area-builder-tree-row-bg, var(--surface-elevated));
  --asset3d-surface-soft: var(--area-builder-structure-bg, color-mix(in srgb, var(--surface-elevated) 72%, transparent));
  --asset3d-text: var(--area-builder-text-primary, var(--text));
  --asset3d-text-strong: var(--area-builder-text-strong, var(--text));
  --asset3d-muted: var(--area-builder-text-secondary, var(--text-muted));
  --asset3d-muted-soft: var(--area-builder-text-tertiary, var(--text-muted));
  --asset3d-border: var(--area-builder-border-panel-side, var(--border));
  --asset3d-border-soft: var(--area-builder-border-structure, color-mix(in srgb, var(--border) 72%, transparent));
  --asset3d-control-bg: var(--area-builder-button-bg, var(--surface-elevated));
  --asset3d-control-hover: var(--area-builder-row-hover-bg, color-mix(in srgb, var(--primary) 12%, transparent));
  --asset3d-active-bg: var(--area-builder-row-active-bg, color-mix(in srgb, var(--primary) 18%, transparent));
  --asset3d-accent: var(--area-builder-border-active-strong, var(--primary));
  --asset3d-input-bg: var(--area-builder-input-bg, var(--surface-elevated));
  --asset3d-danger-bg: var(--danger-soft);
  --asset3d-danger-border: var(--area-builder-border-danger-strong, var(--danger));
  --asset3d-danger-text: var(--danger);
  /* RAHMUNG (Nutzermeldung „überlappt das Menü", 2026-08-07):
     Hier stand `position: absolute; inset: 16px 24px 24px 88px; z-index: 360`.
     Absolut positioniert sucht sich der Dialog den nächsten positionierten
     Vorfahren — das ist NICHT der Inhaltsbereich der Shell, sondern der
     Viewport. Die 88 Pixel links waren auf die EINGEKLAPPTE Seitenleiste
     gerechnet; sobald das Menü offen ist, legt sich der Dialog darüber.
     Der Bestand macht es anders (Asset3DManagementOverlay.vue:1485
     `.asset3d-shell`): `position: relative; width: 100%; height: 100%` — die
     Maske FÜLLT ihren Wirt, und wo dieser liegt, entscheidet die Shell. Genau
     das steht jetzt hier; `.vc-shell-overlay` gibt die Fläche neben dem
     Menüpanel vor. */
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--asset3d-bg);
  color: var(--asset3d-text);
  border: 1px solid var(--asset3d-border);
  box-shadow: none;
}

.baukasten-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 24px 18px;
  border-bottom: 1px solid var(--area-builder-border-header, var(--asset3d-border));
}
.baukasten-header h3 {
  margin: 0;
  color: var(--asset3d-text);
  font-size: 25px;
  line-height: 1.12;
  font-weight: 850;
}
.baukasten-header .eyebrow {
  margin: 0 0 4px;
  color: var(--asset3d-muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
}
.baukasten-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.baukasten-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(420px, 1fr) minmax(300px, 380px);
}
.baukasten-folders,
.baukasten-list,
.baukasten-detail {
  min-height: 0;
  overflow: auto;
  padding: 16px 18px;
}
.baukasten-folders,
.baukasten-detail { background: var(--asset3d-surface); }
.baukasten-list {
  border-inline: 1px solid var(--asset3d-border);
  background: color-mix(in srgb, var(--asset3d-surface) 76%, transparent);
}
.baukasten-folders { display: flex; flex-direction: column; gap: 10px; }
.baukasten-detail { display: flex; flex-direction: column; gap: 12px; }

/* ---- Strukturbaum ------------------------------------------------------ */
.asset3d-baukasten-overlay .pane-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
  color: var(--asset3d-text-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}
.asset3d-baukasten-overlay .pane-title > .material-icons {
  font-size: 24px;
  color: var(--asset3d-text);
}
.asset3d-baukasten-overlay .tree-add-action { margin-left: auto; }
.folder-search {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin-bottom: 4px;
  padding: 0 8px;
  border: 1px solid var(--area-builder-border-input, var(--asset3d-border));
  border-radius: 8px;
  background: var(--asset3d-input-bg);
  color: var(--asset3d-muted);
}
.folder-search input {
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--area-builder-text-input, var(--asset3d-text));
  font: inherit;
}
.folder-search .material-icons { font-size: 20px; }
.asset3d-baukasten-overlay .folder-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.asset3d-baukasten-overlay .folder-node {
  display: grid;
  grid-template-columns: calc(var(--tree-level, 0) * 18px) 24px 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 10px;
  background: var(--area-builder-tree-row-bg, var(--asset3d-surface-strong));
  color: var(--asset3d-text);
  text-align: left;
  cursor: pointer;
}
.asset3d-baukasten-overlay .folder-node:hover {
  background: var(--asset3d-control-hover);
  border-color: var(--area-builder-border-hover, var(--asset3d-border));
  transform: translateX(2px);
}
.asset3d-baukasten-overlay .folder-node[aria-pressed='true'] {
  background: var(--asset3d-active-bg);
  border-color: var(--area-builder-border-active, var(--primary));
  box-shadow: 0 0 0 1px var(--area-builder-border-active-strong, var(--asset3d-accent)) inset;
}
.asset3d-baukasten-overlay .folder-node--root {
  --tree-level: 0;
  border-color: var(--asset3d-border-soft);
  background: var(--asset3d-surface-soft);
}
.folder-node__indent { width: calc(var(--tree-level, 0) * 18px); }
.asset3d-baukasten-overlay .folder-node__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: default;
}
.asset3d-baukasten-overlay .folder-node__toggle .material-icons { font-size: 22px; }
.asset3d-baukasten-overlay .folder-node__toggle.is-visible,
.folder-node--root .folder-node__toggle {
  color: var(--area-builder-text-secondary, var(--asset3d-muted));
  cursor: pointer;
}
.asset3d-baukasten-overlay .folder-node__toggle:disabled { pointer-events: none; }
.folder-node__icon {
  justify-self: center;
  font-size: 24px;
  color: var(--asset3d-text);
}
.folder-node__copy { min-width: 0; display: grid; gap: 2px; }
.folder-node__copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.15;
}
.folder-node__copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--asset3d-muted);
  font-size: 12px;
  font-weight: 650;
}
.folder-empty {
  margin: 4px 0 0;
  padding: 12px;
  border: 1px dashed var(--asset3d-border);
  border-radius: 8px;
  color: var(--asset3d-muted);
  background: var(--asset3d-surface-soft);
  text-align: center;
  font-weight: 650;
}

/* ---- Modell-Liste ------------------------------------------------------ */
.search-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(110px, 0.55fr) minmax(140px, 0.65fr) minmax(150px, 0.7fr) 42px;
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px;
  background: var(--area-builder-toolbar-sticky-bg, var(--asset3d-surface-soft));
  border: 1px solid var(--asset3d-border);
  border-radius: 8px;
}
.asset3d-baukasten-overlay label {
  display: grid;
  gap: 6px;
  color: var(--asset3d-muted);
  font-size: 12px;
  font-weight: 800;
}
.asset3d-baukasten-overlay input,
.asset3d-baukasten-overlay select,
.asset3d-baukasten-overlay textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--area-builder-border-input, var(--asset3d-border));
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--asset3d-input-bg);
  color: var(--area-builder-text-input, var(--asset3d-text));
  font: inherit;
  outline: none;
}
/* SPEC-0646 — Klasse A, schwerster Fall: dieses Blatt schaltete den Fokusring
   fuer ALLE Eingabefelder der Maske ab (`outline: none` oben, `outline: 0` am
   Ordner-Suchfeld) und hatte im ganzen Blatt keine einzige Fokusregel. Die
   3D-Baukasten-Maske war mit der Tastatur blind bedienbar. */
.asset3d-baukasten-overlay input:focus-visible,
.asset3d-baukasten-overlay select:focus-visible,
.asset3d-baukasten-overlay textarea:focus-visible {
  border-color: var(--primary, var(--asset3d-border));
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Das Ordner-Suchfeld ist rahmenlos in einem umrandeten Kasten — der Ring
   gehoert an den Kasten, sonst haengt er an einer Kante, die es nicht gibt.
   Das Feld selbst nimmt den Ring darum ausdruecklich ZURUECK; ohne diese
   Zeile stuenden dort zwei Ringe ineinander, weil die Regel oben mit
   `:focus-visible` spezifischer ist als `… .folder-search input` darunter. */
.folder-search:focus-within {
  border-color: var(--primary, var(--asset3d-border));
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.asset3d-baukasten-overlay .folder-search input:focus-visible {
  box-shadow: none;
}

.asset3d-baukasten-overlay textarea { resize: vertical; }
.asset3d-baukasten-overlay .folder-search input { min-height: 0; border: 0; padding: 0; }
.status-line { padding: 10px; color: var(--asset3d-muted); }
.asset-rows { display: grid; gap: 10px; align-content: start; }
.asset3d-baukasten-overlay .asset-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  min-height: 78px;
  padding: 10px;
  text-align: left;
  background: var(--area-builder-tree-row-bg, var(--asset3d-surface-strong));
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--asset3d-text);
  font: inherit;
  cursor: pointer;
}
.asset3d-baukasten-overlay .asset-row:hover {
  background: var(--asset3d-control-hover);
  border-color: var(--area-builder-border-hover, var(--asset3d-border));
}
.asset3d-baukasten-overlay .asset-row[aria-pressed='true'] {
  background: var(--asset3d-active-bg);
  border-color: var(--area-builder-border-active, var(--primary));
  box-shadow: 0 0 0 1px var(--area-builder-border-active-strong, var(--asset3d-accent)) inset;
}
.asset-thumb, .preview-box {
  display: grid;
  place-items: center;
  background: var(--asset3d-surface-soft);
  border: 1px solid var(--asset3d-border-soft);
  border-radius: 8px;
  overflow: hidden;
}
.asset-thumb { width: 58px; height: 58px; }
.asset-thumb img, .preview-box img { width: 100%; height: 100%; object-fit: cover; }
.asset-row__main { display: grid; gap: 3px; min-width: 0; }
.asset-row__main strong { color: var(--asset3d-text); font-weight: 850; }
.asset-row__main small, .asset-row__tags {
  color: var(--asset3d-muted-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-row__badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

/* ---- Detail ------------------------------------------------------------ */
.preview-box {
  flex: 0 0 clamp(160px, 24vh, 260px);
  height: clamp(160px, 24vh, 260px);
  min-height: 160px;
  margin-bottom: 12px;
  background: var(--area-builder-stage-3d-bg, var(--asset3d-surface-soft));
  border-color: var(--area-builder-border-3d-stage, var(--asset3d-border-soft));
  box-shadow: var(--area-builder-shadow-stage, none);
}
.preview-box .material-icons { font-size: 64px; color: var(--asset3d-muted); }
/* Parametrische Vorschau füllt den Kasten randlos (Bestand: :deep-Regeln auf
   .asset3d-parametric-preview). */
.preview-box .asset3d-parametric-preview {
  display: block;
  width: 100%;
  height: 100%;
}
.preview-box .asset3d-parametric-preview canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.baukasten-detail .detail-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.baukasten-detail .detail-title h4 {
  margin: 0;
  color: var(--asset3d-text-strong);
  font-size: 17px;
  line-height: 1.2;
}
.detail-grid {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--asset3d-border-soft);
  border-radius: 8px;
  background: var(--asset3d-surface-soft);
  font-size: 12px;
}
.detail-label { color: var(--asset3d-muted); }
.detail-value { overflow-wrap: anywhere; }
/* Bestand: zwei Spalten, die erste Aktion über die volle Breite. */
.detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.lifecycle-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 2px;
}
.detail-actions > *, .lifecycle-actions > * { min-width: 0; width: 100%; }
.detail-actions > *:first-child { grid-column: 1 / -1; }
.detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid var(--area-builder-border-button, var(--asset3d-border));
  border-radius: 8px;
  padding: 0 10px;
  background: var(--asset3d-control-bg);
  color: var(--area-builder-text-button, var(--asset3d-text));
  font-weight: 750;
  text-decoration: none;
}
.detail-link:hover {
  background: var(--asset3d-control-hover);
  border-color: var(--asset3d-accent);
}
.detail-link .material-icons { font-size: 20px; }
.detail-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 2px 0 0;
}
.asset3d-baukasten-overlay .tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--area-builder-border-button, var(--asset3d-border));
  border-radius: 8px;
  background: var(--asset3d-control-bg);
  color: var(--area-builder-text-button, var(--asset3d-text));
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.asset3d-baukasten-overlay .tab-button:hover {
  background: var(--asset3d-control-hover);
  border-color: var(--asset3d-accent);
}
.asset3d-baukasten-overlay .tab-button[aria-pressed='true'] {
  background: var(--asset3d-active-bg);
  color: var(--area-builder-text-object-light, var(--asset3d-text));
  border-color: var(--area-builder-border-active, var(--asset3d-border));
}
.detail-panel { display: grid; gap: 6px; align-content: start; }
.detail-panel .detail-field { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 8px; font-size: 13px; }
.detail-hint {
  margin: 0;
  border: 1px solid var(--asset3d-border-soft);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--asset3d-surface-soft);
  color: var(--asset3d-muted);
  font-size: 12px;
}
.empty-inline {
  padding: 12px;
  border: 1px dashed var(--asset3d-border);
  border-radius: 6px;
  color: var(--asset3d-muted);
  background: var(--asset3d-surface-soft);
  font-size: 12px;
}
.lod-list {
  display: grid;
  gap: 5px;
  border: 1px solid var(--asset3d-border-soft);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--asset3d-surface-soft);
  color: var(--asset3d-text);
  font-size: 12px;
}
.lod-list span { color: var(--asset3d-muted); }
.job-list, .mapping-list { display: grid; gap: 6px; font-size: 12px; }
.job-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.job-error { color: var(--asset3d-danger-text); }
.mapping-row {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--asset3d-border-soft);
  border-radius: 8px;
  background: var(--area-builder-tree-row-bg, var(--asset3d-surface-strong));
}
.mapping-row small, .asset3d-baukasten-overlay .node-row small { color: var(--asset3d-muted); }
/* Bestand: Baum und Mapping-Bereich bekommen eine eigene Höhengrenze, damit
   die Detailspalte nicht durch lange Bäume zerläuft (max-height 330). */
.assembly-tree, .mapping-form + .mapping-list, .detail-panel.assembly-tree {
  max-height: 330px;
  overflow: auto;
}
.assembly-tree { gap: 8px; }
.asset3d-baukasten-overlay .node-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
  background: var(--area-builder-tree-row-bg, var(--asset3d-surface-strong));
  color: var(--asset3d-text);
  font: inherit;
  cursor: pointer;
}
.asset3d-baukasten-overlay .node-row:hover { background: var(--asset3d-control-hover); }
.asset3d-baukasten-overlay .node-row[aria-pressed='true'] {
  border-color: var(--area-builder-border-active, var(--asset3d-border));
  background: var(--asset3d-active-bg);
}
.asset3d-baukasten-overlay .metadata {
  margin: 0;
  padding: 10px;
  overflow: auto;
  max-height: 160px;
  border: 1px solid var(--asset3d-border-soft);
  border-radius: 8px;
  background: var(--asset3d-input-bg);
  color: var(--asset3d-text);
  font-size: 12px;
}

/* --- Schreibwege (SPEC-0158) --------------------------------------------- */
.folder-node__actions { display: inline-flex; gap: 4px; }
.asset3d-baukasten-overlay .folder-node__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--area-builder-border-icon-button, var(--asset3d-border));
  border-radius: 8px;
  background: var(--area-builder-icon-button-bg, var(--asset3d-control-bg));
  color: var(--asset3d-text);
  cursor: pointer;
}
.asset3d-baukasten-overlay .folder-node__action .material-icons { font-size: 18px; }
.asset3d-baukasten-overlay .folder-node__action:hover:not(:disabled) {
  background: var(--asset3d-control-hover);
  border-color: var(--asset3d-accent);
}
.asset3d-baukasten-overlay .folder-node__action--danger {
  color: var(--asset3d-danger-text);
  border-color: var(--asset3d-danger-border);
}
.asset3d-baukasten-overlay .folder-node__action:disabled { opacity: 0.45; cursor: not-allowed; }

/* Bestand .edit-panel: ZWEI feste Spalten (nicht auto-fit) — sonst springt die
   Feldanordnung mit jeder Breitenänderung der Detailspalte. */
.edit-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: start;
}
.edit-panel label { align-content: start; }
.asset3d-baukasten-overlay .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.asset3d-baukasten-overlay .check-row input { width: auto; min-height: 0; }
/* Bestand .optimization-panel__check: die Schalter des Konvertierungs-Reiters
   sitzen in eigenen Kästchen auf Feldhöhe. */
.detail-panel .check-row {
  align-self: end;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--asset3d-border-soft);
  border-radius: 8px;
  background: var(--asset3d-surface-soft);
  color: var(--asset3d-text);
  font-weight: 800;
  font-size: 12px;
}
.edit-panel__wide { grid-column: 1 / -1; }
.edit-panel .job-list, .edit-panel .lod-list { grid-column: 1 / -1; }
.edit-panel .detail-hint { grid-column: 1 / -1; }

.mapping-form { display: grid; gap: 10px; }

.asset3d-baukasten-overlay .dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface-overlay, rgba(0, 0, 0, 0.62)) 72%, transparent);
}
.asset3d-baukasten-overlay .upload-dialog {
  display: grid;
  gap: 12px;
  width: min(720px, calc(100vw - 40px));
  max-height: calc(100dvh - 44px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--area-builder-border-panel-side, var(--asset3d-border));
  border-radius: 8px;
  background: var(--asset3d-bg);
  color: var(--asset3d-text);
  box-shadow: var(--shadow-overlay);
}
.upload-dialog header, .upload-dialog footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.upload-dialog header h4 {
  margin: 0;
  color: var(--asset3d-text-strong);
  font-size: 17px;
  line-height: 1.2;
}
.asset3d-baukasten-overlay .upload-dialog header button,
.asset3d-baukasten-overlay .upload-dialog footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid var(--area-builder-border-button, var(--asset3d-border));
  border-radius: 8px;
  padding: 0 10px;
  background: var(--asset3d-control-bg);
  color: var(--area-builder-text-button, var(--asset3d-text));
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.asset3d-baukasten-overlay .upload-dialog header button:hover:not(:disabled),
.asset3d-baukasten-overlay .upload-dialog footer button:hover:not(:disabled) {
  background: var(--asset3d-control-hover);
  border-color: var(--asset3d-accent);
}
.upload-dialog footer button:disabled { opacity: 0.45; cursor: not-allowed; }
.upload-dialog label small {
  display: block;
  margin-top: 4px;
  color: var(--asset3d-muted);
  font-size: 12px;
  font-weight: 650;
}
.upload-dialog label small.upload-file-error { color: var(--asset3d-danger-text); }
.upload-dialog .scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
.upload-dialog .upload-optimization {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 0;
  border: 1px solid var(--asset3d-border-soft);
  border-radius: 8px;
  padding: 10px 12px 12px;
  background: color-mix(in srgb, var(--asset3d-surface-soft) 72%, transparent);
}
.upload-dialog .upload-optimization legend {
  padding: 0 6px;
  color: var(--asset3d-muted);
  font-size: 12px;
  font-weight: 700;
}
.upload-dialog .upload-optimization .check-row {
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--asset3d-border-soft);
  border-radius: 6px;
  background: var(--asset3d-control-bg);
  color: var(--asset3d-text);
}
.upload-dialog small { color: var(--asset3d-muted); }

/* Bestands-Umbrüche (Asset3DManagementOverlay.vue:2168-2181). */
@media (max-width: 1100px) {
  .baukasten-body { grid-template-columns: 210px minmax(320px, 1fr); }
  .baukasten-detail { display: none; }
}
@media (max-width: 760px) {
  .edit-panel,
  .upload-dialog .scope-grid,
  .upload-dialog .upload-optimization {
    grid-template-columns: 1fr;
  }
}
/* Ordnerzeilen sind seit SPEC-0158 div[role=button] (innere Aktions-Buttons
   dürfen nicht in einem <button> verschachtelt werden). */
.asset3d-baukasten-overlay .folder-node { box-sizing: border-box; }

/* --- Three.js-Detailsicht (SPEC-0160 §B, read-only) ----------------------- */
.asset3d-detail-viewer .detail-viewer__backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--core-surface-overlay, rgba(15, 23, 42, 0.55));
  display: flex;
}
.asset3d-detail-viewer .detail-viewer__dialog {
  flex: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  margin: 16px;
  overflow: hidden;
  border: 1px solid var(--core-border-strong, var(--core-border, var(--border)));
  border-radius: var(--core-radius-md, 6px);
  background: var(--core-surface-elevated, var(--core-surface, var(--surface)));
  color: inherit;
}
.asset3d-detail-viewer .detail-viewer__topbar {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--core-border, var(--border));
}
.asset3d-detail-viewer .detail-viewer__topbar span {
  color: var(--core-text-muted, var(--text-muted));
  font-size: 12px;
}
.asset3d-detail-viewer .detail-viewer__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 16px;
  border-bottom: 1px solid var(--core-border, var(--border));
}
.asset3d-detail-viewer .detail-viewer__spacer { flex: 1; }
/* Wie im Bestand ein Knopf, kein nackter Link (viewer-actions --toolbar). */
.asset3d-detail-viewer .detail-viewer__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--core-radius-md, 6px);
  background: var(--core-surface-elevated, var(--surface-elevated));
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.asset3d-detail-viewer .detail-viewer__download:hover {
  border-color: var(--core-accent, var(--accent));
}
.asset3d-detail-viewer .detail-viewer__download .material-icons { font-size: 16px; }
.asset3d-detail-viewer .detail-viewer__body {
  display: grid;
  grid-template-columns: minmax(280px, 26vw) minmax(0, 1fr);
  min-height: 0;
}
.asset3d-detail-viewer .detail-viewer__body.is-tree-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}
.asset3d-detail-viewer .detail-viewer__tree {
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--core-border, var(--border));
}
.asset3d-detail-viewer .is-tree-collapsed .detail-viewer__tree { display: none; }
.asset3d-detail-viewer .detail-viewer__tree-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--core-border, var(--border));
}
.asset3d-detail-viewer .tree-empty {
  padding: 14px;
  color: var(--core-text-muted, var(--text-muted));
}
.asset3d-detail-viewer .detail-viewer__node {
  display: grid;
  grid-template-columns: 26px 26px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 12px;
}
.asset3d-detail-viewer .detail-viewer__node.is-active {
  background: var(--core-primary-soft, rgba(59, 130, 246, 0.16));
  box-shadow: inset 3px 0 0 var(--core-primary, var(--primary, #3b82f6));
}
.asset3d-detail-viewer .detail-viewer__node.is-hidden .detail-viewer__node-label {
  opacity: 0.52;
  text-decoration: line-through;
}
.asset3d-detail-viewer .detail-viewer__node-toggle,
.asset3d-detail-viewer .detail-viewer__node-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--core-border, var(--border));
  border-radius: 5px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.asset3d-detail-viewer .detail-viewer__node-toggle { visibility: hidden; }
.asset3d-detail-viewer .detail-viewer__node-toggle.is-visible { visibility: visible; }
.asset3d-detail-viewer .detail-viewer__node-toggle .material-icons,
.asset3d-detail-viewer .detail-viewer__node-eye .material-icons { font-size: 16px; }
.asset3d-detail-viewer .detail-viewer__node-label {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.asset3d-detail-viewer .detail-viewer__node-label .material-icons { font-size: 15px; }
.asset3d-detail-viewer .detail-viewer__node-label small {
  color: var(--core-text-muted, var(--text-muted));
  font-weight: 700;
}
.asset3d-detail-viewer .detail-viewer__stage {
  position: relative;
  min-width: 0;
  min-height: 0;
}
.asset3d-detail-viewer .detail-viewer__stage canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.asset3d-detail-viewer .detail-viewer__status {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 12px;
  border: 1px solid var(--core-border, var(--border));
  border-radius: var(--core-radius-md, 6px);
  background: var(--core-surface-elevated, var(--core-surface, var(--surface)));
}
.asset3d-detail-viewer .detail-viewer__node-info {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: grid;
  gap: 3px;
  max-width: min(320px, 40%);
  font-size: 12px;
  pointer-events: none;
}
.asset3d-detail-viewer .detail-viewer__node-info span {
  color: var(--core-text-muted, var(--text-muted));
}

/* Nav-Pad und Ansichten (Bestand Asset3DDetailViewerDialog.vue:133-166). */
.asset3d-detail-viewer .detail-viewer__view-controls {
  position: absolute;
  right: 16px;
  top: 16px;
  display: grid;
  gap: 10px;
  justify-items: end;
}
.asset3d-detail-viewer .detail-viewer__nav-pad {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  grid-template-rows: repeat(3, 34px);
  gap: 2px;
}
.asset3d-detail-viewer .pad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--core-border, var(--border));
  border-radius: 6px;
  background: var(--core-surface-elevated, var(--surface-elevated));
  color: inherit;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.asset3d-detail-viewer .pad-btn:hover { border-color: var(--core-accent, var(--accent)); }
.asset3d-detail-viewer .pad-btn--up { grid-area: 1 / 2; }
.asset3d-detail-viewer .pad-btn--left { grid-area: 2 / 1; }
.asset3d-detail-viewer .pad-btn--center { grid-area: 2 / 2; }
.asset3d-detail-viewer .pad-btn--right { grid-area: 2 / 3; }
.asset3d-detail-viewer .pad-btn--down { grid-area: 3 / 2; }
.asset3d-detail-viewer .pad-btn--minus { grid-area: 3 / 1; }
.asset3d-detail-viewer .pad-btn--plus { grid-area: 3 / 3; }
.asset3d-detail-viewer .detail-viewer__view-menu {
  display: grid;
  gap: 6px;
  justify-items: end;
}
.asset3d-detail-viewer .detail-viewer__view-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--core-border, var(--border));
  border-radius: 6px;
  background: var(--core-surface-elevated, var(--surface-elevated));
}
.asset3d-detail-viewer .detail-viewer__view-buttons button,
.asset3d-detail-viewer .detail-viewer__views-toggle {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--core-border, var(--border));
  border-radius: 5px;
  background: var(--core-surface, var(--surface));
  color: inherit;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.asset3d-detail-viewer .detail-viewer__view-buttons button.wide { grid-column: 1 / -1; }
.asset3d-detail-viewer .detail-viewer__view-buttons button.is-active,
.asset3d-detail-viewer .detail-viewer__views-toggle.is-active {
  border-color: var(--core-accent, var(--accent));
  background: var(--core-primary-soft, rgba(59, 130, 246, 0.16));
}

/* --- Bewegung nachgezogen (Bestand Asset3DManagementOverlay.vue:1694/1767) -
 *
 * BEFUND (2026-08-04): diese Datei enthielt KEINEN einzigen Übergang. Der
 * Bestand blendet die Zeilenaktionen beim Überfahren ein (`opacity: 0` →
 * sichtbar) und färbt Baumzeilen weich um. Im Port sprang beides hart — die
 * Aktionen waren dauerhaft sichtbar und drängten sich in jede Zeile.
 */
.folder-node__actions {
  opacity: 0;
  transition: opacity 140ms ease;
}

.folder-node:hover .folder-node__actions,
.folder-node:focus-within .folder-node__actions,
.folder-node[aria-pressed='true'] .folder-node__actions {
  opacity: 1;
}

.folder-node {
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

/* ====== SPEC-0646 — Windows-Kontrastmodus =============================== *
 * Edge/Chromium zeichnen unter `forced-colors: active` KEINEN `box-shadow`
 * und zwingen jede Rahmen- und Flaechenfarbe auf eine Systemfarbe. Damit
 * faellt jeder Fokusring dieses Blattes dort ersatzlos aus — der ring-lose
 * Rahmenwechsel ebenso, weil dann jeder Rahmen dieselbe Farbe traegt.
 * `outline` WIRD gezeichnet und ist das einzige Mittel, das dort traegt.
 * `Highlight` ist die Systemfarbe fuer Auswahl und hebt sich per Definition
 * vom `Canvas` des Nutzers ab; `outline-offset` haelt den Ring von der
 * eigenen Kante frei, die dort ebenfalls `CanvasText` traegt.
 * KEIN `forced-color-adjust: none` — das naehme dem Nutzer genau die
 * Farbwahl, um die es hier geht (SPEC-0646, Entscheidung E3).
 * ====================================================================== */
@media (forced-colors: active) {
  .asset3d-baukasten-overlay input:focus-visible,
  .asset3d-baukasten-overlay select:focus-visible,
  .asset3d-baukasten-overlay textarea:focus-visible,
  .folder-search:focus-within {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}