File: public\views\internal\builder-support\builder-support-workbench.css
/* ═══════════════════════════════════════════════════════════════════
   ELMETIC ServiceHub – Bauherrenbegleitung Master-CSS
   Referenz: docs/internal-bauherrenbegleitung-master-template.md
   Farben: BG #BDBABA | Akzent #E73D25 | Panels #FFF | Sidebar #1E1E2D
   ═══════════════════════════════════════════════════════════════════ */

/* ── Basis-Layout ─────────────────────────────────────────────── */
.builder-workbench {
  display: grid;
  gap: 18px;
  padding: 4px 0;
}

/* ── Projektkopf ──────────────────────────────────────────────── */
.builder-workbench .builder-project-header {
  background: #fff;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.builder-workbench .builder-project-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.builder-workbench .builder-project-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1F2937;
}
.builder-workbench .builder-project-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: #6B7280;
}
.builder-workbench .builder-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}

/* ── KPI-Cards ────────────────────────────────────────────────── */
.builder-workbench .builder-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.builder-workbench .builder-kpi {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.15s ease;
}
.builder-workbench .builder-kpi:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.builder-workbench .builder-kpi .label {
  margin: 0;
  font-size: 12px;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.builder-workbench .builder-kpi .value {
  margin: 6px 0 0;
  font-size: 26px;
  font-weight: 700;
  color: #1F2937;
}
.builder-workbench .builder-kpi .value--accent {
  color: #E73D25;
}

/* ── Topbar / Breadcrumb ──────────────────────────────────────── */
.builder-workbench .builder-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.builder-workbench .builder-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6B7280;
}
.builder-workbench .builder-breadcrumb a {
  color: #6B7280;
  text-decoration: none;
}
.builder-workbench .builder-breadcrumb a:hover {
  color: #E73D25;
}
.builder-workbench .builder-breadcrumb .sep {
  color: #D1D5DB;
}
.builder-workbench .builder-breadcrumb .current {
  color: #1F2937;
  font-weight: 600;
}

/* ── Tab-Navigation ───────────────────────────────────────────── */
.builder-workbench .builder-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.builder-workbench .builder-tabs .tab-btn {
  padding: 8px 18px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.15s ease;
}
.builder-workbench .builder-tabs .tab-btn:hover {
  background: #F3F4F6;
  color: #1F2937;
}
.builder-workbench .builder-tabs .tab-btn.active,
.builder-workbench .builder-tabs a.active {
  background: #E73D25;
  color: #fff;
  font-weight: 600;
}

/* ── Chips / Badges ───────────────────────────────────────────── */
.builder-workbench .builder-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #E5E7EB;
  background: #F9FAFB;
  font-weight: 500;
}
.builder-workbench .builder-chip--ok {
  color: #065F46;
  border-color: #A7F3D0;
  background: #D1FAE5;
}
.builder-workbench .builder-chip--warn {
  color: #92400E;
  border-color: #FCD34D;
  background: #FEF3C7;
}
.builder-workbench .builder-chip--accent {
  color: #fff;
  border-color: #E73D25;
  background: #E73D25;
}

/* ── Aktions-Buttons ──────────────────────────────────────────── */
.builder-workbench .builder-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.builder-workbench .builder-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: none;
  border-radius: 10px;
  background: #E73D25;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.builder-workbench .builder-btn-primary:hover {
  background: #D42D17;
  box-shadow: 0 2px 8px rgba(231,61,37,0.25);
}
.builder-workbench .builder-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #fff;
  color: #1F2937;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.builder-workbench .builder-btn-secondary:hover {
  border-color: #E73D25;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ── Formular-Grid ────────────────────────────────────────────── */
.builder-workbench .builder-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.builder-workbench .builder-form-grid .field-label {
  margin-bottom: 0;
}

/* ── Cards / Panels ───────────────────────────────────────────── */
.builder-workbench .builder-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.builder-workbench .builder-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.builder-workbench .builder-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1F2937;
}

/* ══════════════════════════════════════════════════════════════════
   ROOMTOUR EDITOR – 3-Column Layout (rt-*)
   ══════════════════════════════════════════════════════════════════ */

/* ── Root Editor Container ──────────────────────────────────────── */
.rt-editor {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  min-height: 500px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* ── Top Toolbar ────────────────────────────────────────────────── */
.rt-toolbar {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: #FAFBFC;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
  font-size: 13px;
}
.rt-toolbar-project {
  font-weight: 700;
  color: #1F2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.rt-toolbar-divider {
  width: 1px;
  height: 20px;
  background: #D1D5DB;
  flex-shrink: 0;
}
.rt-toolbar .select {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  max-width: 160px;
}
.rt-toolbar-scene-name {
  font-weight: 600;
  color: #374151;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rt-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.rt-toolbar-actions .btn {
  font-size: 12px;
  padding: 4px 10px;
}

/* ── 3-Column Workspace ─────────────────────────────────────────── */
.rt-workspace {
  display: grid;
  grid-template-columns: 210px 1fr 300px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Left: Scene List ───────────────────────────────────────────── */
.rt-scene-list {
  background: #F9FAFB;
  border-right: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.rt-scene-list-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  flex-shrink: 0;
  border-bottom: 1px solid #E5E7EB;
}
.rt-scene-list-header .builder-chip {
  font-size: 10px;
  margin-left: auto;
}
.rt-scene-list-items {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.rt-scene-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  transition: background 0.12s, border-color 0.12s;
  position: relative;
}
.rt-scene-item:hover {
  background: #EFF6FF;
}
.rt-scene-item.active {
  background: #EFF6FF;
  border-left-color: #E73D25;
}
.rt-scene-item-thumb {
  width: 48px;
  height: 34px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #E5E7EB;
  flex-shrink: 0;
}
.rt-scene-item-thumb-empty {
  width: 48px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px dashed #D1D5DB;
  color: #9CA3AF;
  font-size: 10px;
  flex-shrink: 0;
  background: #F3F4F6;
}
.rt-scene-item-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.rt-scene-item-title {
  font-weight: 600;
  color: #1F2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-size: 12px;
}
.rt-scene-item-meta {
  font-size: 10px;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.rt-scene-item-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rt-scene-item-status--published { background: #10B981; }
.rt-scene-item-status--draft { background: #F59E0B; }
.rt-scene-item-status--archived { background: #9CA3AF; }
.rt-scene-item-sort {
  display: none;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
.rt-scene-item:hover .rt-scene-item-sort {
  display: flex;
}
.rt-scene-item-sort button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 10px;
  color: #6B7280;
  line-height: 1;
}
.rt-scene-item-sort button:hover {
  color: #E73D25;
}
.rt-scene-list-add {
  flex-shrink: 0;
  padding: 8px;
  border-top: 1px solid #E5E7EB;
}
.rt-scene-list-add .btn {
  width: 100%;
  font-size: 12px;
}
/* Scene item: room name */
.rt-scene-item-room {
  font-size: 10px;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
/* Scene item: thumbnail */
.rt-scene-thumb {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.rt-scene-thumb-empty {
  width: 48px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px dashed #D1D5DB;
  color: #9CA3AF;
  font-size: 10px;
  flex-shrink: 0;
  background: #F3F4F6;
}
/* Publish dot */
.rt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rt-dot--ok { background: #10B981; }
.rt-dot--warn { background: #9CA3AF; }
.rt-dot--draft { background: #F59E0B; }
/* Sort buttons */
.rt-scene-sort-btns {
  display: none;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
.rt-scene-item:hover .rt-scene-sort-btns {
  display: flex;
}
.rt-sort-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 10px;
  color: #6B7280;
  line-height: 1;
}
.rt-sort-btn:hover { color: #E73D25; }
.rt-sort-btn:disabled { opacity: 0.3; cursor: default; }
/* Scene list empty state */
.rt-scene-list-empty {
  text-align: center;
  color: #9CA3AF;
  font-size: 12px;
  padding: 24px 12px;
}
/* Empty hint (generic) */
.rt-empty-hint {
  text-align: center;
  color: #9CA3AF;
  font-size: 12px;
  padding: 16px 8px;
}
/* Hotspot list item active */
.rt-hotspot-list-item--active {
  background: #FEF2F2;
  border-left: 3px solid #E73D25;
  padding-left: 5px;
}
/* Hotspot action buttons in list */
.rt-hs-action {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: #6B7280;
  padding: 2px 4px;
  border-radius: 3px;
}
.rt-hs-action:hover { color: #1F2937; background: #F3F4F6; }
.rt-hs-action--danger:hover { color: #DC2626; background: #FEF2F2; }

/* ── Center: Viewer Area ────────────────────────────────────────── */
.rt-viewer-area {
  position: relative;
  background: #111827;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rt-viewer-area #rtPannellumContainer {
  width: 100%;
  height: 100%;
}
.rt-viewer-empty {
  color: #6B7280;
  font-size: 14px;
  text-align: center;
  padding: 40px 20px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rt-place-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
}
.rt-viewer-area.placing-hotspot {
  cursor: crosshair;
}

/* Pannellum Hotspot Styles */
.rt-editor-hotspot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.rt-editor-hotspot:hover {
  transform: scale(1.2);
  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}
.rt-editor-hotspot--info {
  background: #E73D25;
  color: #fff;
  box-shadow: 0 2px 8px rgba(231,61,37,0.5);
}
.rt-editor-hotspot--scene {
  background: #2563EB;
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.5);
}

/* ── Inline Hotspot Mini-Dialog ─────────────────────────────────── */
.rt-hotspot-mini-dialog {
  position: absolute;
  z-index: 100;
  width: 260px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 14px;
}
.rt-hotspot-mini-dialog .field-label {
  margin-bottom: 6px;
}
.rt-hotspot-mini-dialog .input,
.rt-hotspot-mini-dialog .select {
  font-size: 12px;
  padding: 5px 8px;
}
.rt-hotspot-mini-dialog-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  align-items: center;
}
.rt-hotspot-mini-dialog-actions .btn {
  font-size: 12px;
  padding: 4px 10px;
}
.rt-hotspot-mini-dialog-advanced {
  font-size: 11px;
  color: #6366F1;
  margin-left: auto;
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
}

/* ── Right: Sidebar ─────────────────────────────────────────────── */
.rt-sidebar {
  background: #fff;
  border-left: 1px solid #E5E7EB;
  overflow-y: auto;
  min-height: 0;
}
.rt-sidebar-panel {
  display: none;
}
.rt-sidebar-panel.is-active {
  display: block;
}
.rt-sidebar .builder-card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #E5E7EB;
}
.rt-sidebar .builder-card-header {
  padding: 10px 14px;
}
.rt-sidebar .builder-card-title {
  font-size: 13px;
}
.rt-sidebar .builder-form-grid {
  padding: 0 14px 12px;
  gap: 8px;
}
.rt-sidebar .field-label span {
  font-size: 11px;
}
.rt-sidebar .input,
.rt-sidebar .select,
.rt-sidebar .textarea {
  font-size: 12px;
  padding: 5px 8px;
}

/* Scene info card in sidebar */
.rt-scene-info-card {
  border-left: 3px solid #E73D25 !important;
}
.rt-scene-info-title {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.rt-scene-info-meta {
  padding: 4px 14px 6px;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.rt-scene-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 14px 8px;
}
.rt-scene-quick-actions .btn {
  font-size: 11px;
  padding: 3px 8px;
}

/* Hotspot list in scene panel */
.rt-hotspot-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid #F3F4F6;
}
.rt-hotspot-list-item:hover {
  background: #F9FAFB;
}
.rt-hotspot-list-item.active {
  background: #EFF6FF;
}
.rt-hotspot-list-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  flex-shrink: 0;
}
.rt-hotspot-list-icon--info { background: #E73D25; }
.rt-hotspot-list-icon--scene { background: #2563EB; }
.rt-hotspot-list-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1F2937;
}
.rt-hotspot-list-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.rt-hotspot-list-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 12px;
  color: #6B7280;
  border-radius: 4px;
}
.rt-hotspot-list-actions button:hover {
  background: #F3F4F6;
  color: #E73D25;
}

/* ── Bottom Bar ─────────────────────────────────────────────────── */
.rt-bottom {
  flex-shrink: 0;
  border-top: 1px solid #E5E7EB;
  background: #FAFBFC;
}
.rt-statusbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
}
.rt-statusbar--ok { color: #065F46; }
.rt-statusbar--error { color: #991B1B; }
.rt-bottom .builder-card {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* ── Responsive (< 1100px) ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .rt-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 80px 1fr auto;
  }
  .rt-scene-list {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid #E5E7EB;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .rt-scene-list-header { display: none; }
  .rt-scene-list-items { flex-direction: row; padding: 6px; gap: 6px; display: flex; overflow-x: auto; overflow-y: hidden; }
  .rt-scene-item { width: auto; min-width: 120px; flex-shrink: 0; }
  .rt-scene-list-add { border-top: none; border-left: 1px solid #E5E7EB; padding: 6px; }
  .rt-scene-list-add .btn { width: auto; white-space: nowrap; }
  .rt-viewer-area { min-height: 300px; }
  .rt-sidebar { border-left: none; border-top: 1px solid #E5E7EB; max-height: 50vh; overflow-y: auto; }
}

/* ── Hotspot-Detailpanel (kept for compatibility) ────────────────── */
.builder-workbench .builder-detail-panel {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.builder-workbench .builder-detail-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1F2937;
}
.builder-workbench .builder-detail-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
}
.builder-workbench .builder-detail-label {
  font-weight: 600;
  color: #6B7280;
  min-width: 100px;
  flex-shrink: 0;
}
.builder-workbench .builder-detail-value {
  color: #1F2937;
  word-break: break-word;
}

/* ── Medienliste ──────────────────────────────────────────────── */
.builder-workbench .builder-media-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.builder-workbench .builder-media-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.builder-workbench .builder-media-item:hover {
  border-color: #E73D25;
  background: #FEF2F2;
}
.builder-workbench .builder-media-item.active {
  border-color: #E73D25;
  background: #FEF2F2;
}
.builder-workbench .builder-media-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #E5E7EB;
  flex-shrink: 0;
}
.builder-workbench .builder-media-name {
  font-size: 13px;
  font-weight: 500;
  color: #1F2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.builder-workbench .builder-media-type {
  font-size: 11px;
  color: #6B7280;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Medienvorschau ───────────────────────────────────────────── */
.builder-workbench .builder-media-preview {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
  background: #F9FAFB;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.builder-workbench .builder-media-preview img {
  width: 100%;
  display: block;
}

/* ── Bauphasen-Switcher ───────────────────────────────────────── */
.builder-workbench .builder-phase-switcher {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.builder-workbench .builder-phase-btn {
  padding: 6px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.15s ease;
}
.builder-workbench .builder-phase-btn:hover {
  border-color: #E73D25;
  color: #1F2937;
}
.builder-workbench .builder-phase-btn.active {
  background: #E73D25;
  border-color: #E73D25;
  color: #fff;
  font-weight: 600;
}

/* ── Abschnitte / Sektions-Titel ──────────────────────────────── */
.builder-workbench .builder-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1F2937;
}
.builder-workbench .builder-dual-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.builder-workbench .builder-table-note {
  font-size: 12px;
  color: #6B7280;
  margin-top: 8px;
}

/* ── Status-Badges ────────────────────────────────────────────── */
.builder-workbench .builder-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.builder-workbench .builder-status--internal {
  color: #1f2937;
  background: #EEF2FF;
}
.builder-workbench .builder-status--released {
  color: #065F46;
  background: #D1FAE5;
}
.builder-workbench .builder-status--extern {
  color: #0C4A6E;
  background: #E0F2FE;
}
.builder-workbench .builder-status--draft {
  color: #92400E;
  background: #FEF3C7;
}
.builder-workbench .builder-status--archived {
  color: #6B7280;
  background: #F3F4F6;
}

/* ── Leere Zustände ───────────────────────────────────────────── */
.builder-workbench .builder-empty {
  color: #6B7280;
  padding: 24px 0;
  text-align: center;
  font-size: 14px;
}

/* ── Foto-Vorschau ────────────────────────────────────────────── */
.builder-workbench .builder-photo-preview {
  max-width: 90px;
  max-height: 62px;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  object-fit: cover;
}
.builder-workbench .builder-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.builder-workbench .builder-visibility-col {
  white-space: nowrap;
}

/* ── Roomtour Workflow-Steps ──────────────────────────────────── */
.builder-workflow-steps {
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.builder-wf-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px;
  position: relative;
  border-bottom: 3px solid #E5E7EB;
  transition: border-color 0.15s ease;
}
.builder-wf-step.active {
  border-bottom-color: #E73D25;
}
.builder-wf-step + .builder-wf-step::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: #E5E7EB;
}
.builder-wf-num {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #E73D25;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}
.builder-wf-label {
  font-weight: 600;
  font-size: 13px;
  color: #1F2937;
}
.builder-wf-hint {
  font-size: 11px;
  color: #6B7280;
  margin-top: 2px;
}

/* ── Szenen-Thumbnails ────────────────────────────────────────── */
.builder-scene-thumb {
  width: 64px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  display: block;
}
.builder-scene-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 44px;
  border-radius: 10px;
  border: 1px dashed #D1D5DB;
  color: #6B7280;
  font-size: 11px;
}
.builder-scene-table th:first-child,
.builder-scene-table td:first-child {
  width: 76px;
}

/* ── Szenen-Aktionen ──────────────────────────────────────────── */
.builder-scene-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── Erfolgsleiste nach Anlegen ────────────────────────────────── */
.builder-after-create {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-top: 12px;
  border-radius: 12px;
  background: #D1FAE5;
  border: 1px solid #A7F3D0;
}
.builder-after-create-label {
  font-weight: 600;
  font-size: 13px;
  color: #065F46;
}

/* ── Scene Advanced Toggle ────────────────────────────────────── */
.builder-scene-advanced summary {
  cursor: pointer;
  user-select: none;
}

/* ── Statuszeile / Feedback ───────────────────────────────────── */
.builder-workbench .builder-statusbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  transition: opacity 0.3s ease;
}
.builder-workbench .builder-statusbar--success {
  background: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}
.builder-workbench .builder-statusbar--error {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}
.builder-workbench .builder-statusbar--info {
  background: #EEF2FF;
  color: #3730A3;
  border: 1px solid #C7D2FE;
}

/* ── Unterer Übersichtsbereich ────────────────────────────────── */
.builder-workbench .builder-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.builder-workbench .builder-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}
.builder-workbench .builder-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
}
.builder-workbench .builder-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E73D25;
  margin-top: 4px;
  flex-shrink: 0;
}
.builder-workbench .builder-timeline-dot--done {
  background: #059669;
}
.builder-workbench .builder-timeline-dot--pending {
  background: #D1D5DB;
}
.builder-workbench .builder-timeline-text {
  color: #1F2937;
}
.builder-workbench .builder-timeline-date {
  color: #6B7280;
  font-size: 11px;
}

/* ── Progress-Bar ─────────────────────────────────────────────── */
.builder-workbench .builder-progress {
  height: 8px;
  background: #E5E7EB;
  border-radius: 999px;
  overflow: hidden;
}
.builder-workbench .builder-progress-fill {
  height: 100%;
  background: #E73D25;
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* (old viewer/hotspot-pin/strip styles removed – replaced by rt-* above) */

/* ── Portal-Checkliste ─────────────────────────────────────────── */
.builder-workbench .ov-checklist {
  list-style: none;
  padding: 4px 14px 10px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.builder-workbench .ov-check-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
}
.builder-workbench .ov-check-icon {
  font-size: 13px;
  flex-shrink: 0;
}
.builder-workbench .ov-check-label {
  flex: 1;
  color: #1F2937;
}
.builder-workbench .ov-check-hint {
  color: #9CA3AF;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════
   KOMMUNIKATION
   ═══════════════════════════════════════════════════════════════════════ */
.builder-workbench .builder-comm-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.builder-workbench .builder-comm-tab {
  padding: 6px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.builder-workbench .builder-comm-tab:hover { background: #F3F4F6; }
.builder-workbench .builder-comm-tab.active {
  background: #E73D25;
  color: #fff;
  border-color: #E73D25;
}
.builder-workbench .builder-comm-thread {
  max-height: 500px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px;
  background: #FAFAFA;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}
.builder-workbench .builder-comm-msg {
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #E5E7EB;
}
.builder-workbench .builder-comm-msg--customer {
  border-left: 3px solid #10B981;
  background: #F0FDF4;
}
.builder-workbench .builder-comm-msg--internal {
  border-left: 3px solid #6366F1;
  background: #EEF2FF;
}
.builder-workbench .builder-comm-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 4px;
}
.builder-workbench .builder-comm-text {
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
}
.builder-workbench .builder-comm-actions {
  margin-top: 6px;
  text-align: right;
}
.builder-workbench .builder-comm-form {
  border-top: 1px solid #E5E7EB;
  padding-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   KUNDEN-UPLOADS
   ═══════════════════════════════════════════════════════════════════════ */
.builder-workbench .builder-upload-request {
  margin-bottom: 16px;
}
.builder-workbench .builder-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.builder-workbench .builder-upload-card {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.15s;
}
.builder-workbench .builder-upload-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.builder-workbench .builder-upload-preview {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.builder-workbench .builder-upload-file-icon {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: #F9FAFB;
}
.builder-workbench .builder-upload-info {
  padding: 8px 12px;
}
.builder-workbench .builder-upload-info p {
  margin: 0;
  font-size: 12px;
}
.builder-workbench .builder-upload-actions {
  padding: 4px 12px 8px;
}
.builder-workbench .builder-upload-card-sm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid #F3F4F6;
  border-radius: 6px;
  background: #fff;
}
.builder-workbench .builder-upload-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.builder-workbench .builder-upload-thumb-empty {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F4F6;
  border-radius: 4px;
  font-size: 16px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   ERWEITERTE BAUPHASEN
   ═══════════════════════════════════════════════════════════════════════ */
.builder-workbench .builder-phase-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.builder-workbench .builder-phase-card {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  transition: box-shadow 0.15s;
}
.builder-workbench .builder-phase-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.builder-workbench .builder-phase-card--done {
  border-left: 4px solid #10B981;
  background: #F0FDF4;
}
.builder-workbench .builder-phase-card--active {
  border-left: 4px solid #E73D25;
  background: #FEF2F2;
}
.builder-workbench .builder-phase-card--pending {
  border-left: 4px solid #D1D5DB;
}
.builder-workbench .builder-phase-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.builder-workbench .builder-phase-card-header h3 {
  margin: 0;
  font-size: 14px;
  flex: 1;
}
.builder-workbench .builder-phase-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #E73D25;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.builder-workbench .builder-phase-card--done .builder-phase-num { background: #10B981; }
.builder-workbench .builder-phase-card--pending .builder-phase-num { background: #9CA3AF; }
.builder-workbench .builder-phase-stats {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #6B7280;
  margin-top: 8px;
  flex-wrap: wrap;
}
.builder-workbench .builder-phase-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTENT CONTAINER
   ═══════════════════════════════════════════════════════════════════════ */
.builder-workbench .builder-content {
  padding: 16px 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   TECHNISCHE HOTSPOT-FELDER
   ═══════════════════════════════════════════════════════════════════════ */
.builder-workbench .builder-fieldset-tech {
  grid-column: 1 / -1;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 6px;
  padding: 12px 14px 10px;
  margin: 4px 0 8px;
  background: var(--bg-subtle, #fafbfc);
}
.builder-workbench .builder-fieldset-tech legend {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  padding: 0 6px;
}
.builder-workbench .builder-fieldset-tech .field-label {
  margin-bottom: 6px;
}
.builder-workbench .builder-tech-cell {
  font-size: 0.82rem;
  line-height: 1.5;
  max-width: 200px;
}
.builder-workbench .builder-tech-cell em {
  color: var(--text-secondary, #6b7280);
  font-style: italic;
}
.builder-workbench .builder-chip--sm {
  font-size: 0.7rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--accent-light, #e0e7ff);
  color: var(--accent, #4f46e5);
}

/* (old cockpit layout styles removed – replaced by rt-* above) */