/* static/css/plans.css — Gebäude-Arbeitsbereich (BuildingWorkspace / PlanEditor / PlanImport / Building3DView).
   Aus bibber übernommen (plans.css), Geräte-/Zeitleisten-Teile entfernt, LoRaMapper-Teile unten ergänzt. */

.plans-page { --pe-bg: #e6eaf1; --p3d-line: #56647d; display: grid; gap: .6rem; container-type: inline-size; container-name: plans; }
.plans-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.plans-edit { font-size: .9rem; }
.plans-edit .form-check-input, .plans-edit .form-check-label { cursor: pointer; }
.plans-tabs { display: inline-flex; background: var(--tw-surface); border: 1px solid #dfe3ea; border-radius: .6rem; padding: .2rem; }
.plans-tab { border: 0; background: transparent; padding: .35rem .8rem; border-radius: .45rem; font-size: .88rem; font-weight: 600; color: #56647d; }
.plans-tab.is-active { background: #1a1f2e; color: #fff; }
.plans-save { font-size: .8rem; color: #6c757d; }
.plans-save[data-state="error"] { color: #c92a2a; }
.plans-save[data-state="saved"] { color: #2f9e6a; }
.plans-floors, .plans-steps { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.plans-tab, .plans-floor { text-decoration: none; display: inline-block; }
.plans-tab:hover { color: #1a1f2e; }
.plans-tab.is-active:hover { color: #fff; }
.plans-floor { border: 1px solid #d5dbe5; background: var(--tw-surface); border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; font-weight: 600; color: #1a1f2e; }
.plans-floor.is-active { background: #3d7be0; border-color: #3d7be0; color: #fff; }
.plans-floor-add { border-style: dashed; color: #3d7be0; }
.plans-suggest { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; width: 100%; }
.plans-step { border: 1px solid #dfe3ea; background: var(--tw-surface); border-radius: .5rem; padding: .25rem .6rem .25rem .3rem; font-size: .8rem; color: #56647d; display: inline-flex; align-items: center; gap: .4rem; }
.plans-step:disabled { opacity: .7; }
.plans-step-no { width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; background: #eef1f6; font-weight: 700; font-size: .72rem; }
.plans-step.is-done { color: #1a1f2e; }
.plans-step.is-done .plans-step-no { background: #2f9e6a; color: #fff; }
.plans-blank { background: var(--tw-surface); border: 1px dashed #cfd6e2; border-radius: .75rem; padding: 3rem 1rem; text-align: center; }

.pe { display: grid; grid-template-rows: auto 1fr auto; height: max(420px, calc(100dvh - 260px)); background: var(--tw-surface); border: 1px solid #dfe3ea; border-radius: .75rem; overflow: hidden; }
.pe-toolbar { display: flex; gap: .5rem; align-items: center; padding: .4rem; border-bottom: 1px solid #e6eaf1; overflow-x: auto; scrollbar-width: thin; }
.pe-tools, .pe-actions { display: flex; gap: .25rem; }
.pe-actions { margin-left: auto; padding-left: .5rem; border-left: 1px solid #e6eaf1; }
.pe-tool { border: 1px solid transparent; background: transparent; border-radius: .45rem; padding: .35rem .55rem; font-size: .82rem; color: #3f4656; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.pe-tool:hover { background: #eef1f6; }
.pe-tool[aria-pressed="true"] { background: #1a1f2e; color: #fff; }
.pe-tool:disabled { opacity: .35; }
.pe-tool:focus-visible { outline: 2px solid #3d7be0; outline-offset: 1px; }
.pe-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; min-height: 0; position: relative; }
.pe-panel-toggle, .pe-panel-close, .pe-backdrop { display: none; }
.pe-stage { position: relative; min-height: 0; overflow: hidden; background: var(--pe-bg); touch-action: none; outline: none; }
.pe-stage canvas { display: block; touch-action: none; }
.pe-drawbar { position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%); display: flex; gap: .4rem; padding: .35rem; border-radius: .6rem; background: rgba(26, 31, 46, .88); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.pe-empty { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.pe-empty-inner { pointer-events: auto; text-align: center; background: rgba(255, 255, 255, .94); border-radius: .75rem; padding: 1.25rem 1.5rem; max-width: 320px; box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }
.pe-panel { border-left: 1px solid #e6eaf1; padding: .75rem .85rem; overflow-y: auto; }
.pe-panel-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: #6c757d; font-weight: 700; margin-bottom: .5rem; }
.pe-keys { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .25rem; color: #3f4656; }
.pe-keys kbd { background: #eef1f6; color: #1a1f2e; border: 1px solid #dde2ea; font-size: .72rem; padding: .05rem .3rem; }
.pe-import-drop { border: 2px dashed #cfd6e2; border-radius: .6rem; padding: 1.1rem .75rem; text-align: center; color: #6c757d; cursor: pointer; font-size: .85rem; }
.pe-import-drop.dragging, .pe-import-drop:focus-visible { border-color: #3d7be0; background: rgba(61, 123, 224, .07); outline: none; }
.pe-fix { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .35rem .5rem; border: 1px solid #e6eaf1; border-radius: .45rem; background: var(--tw-surface); font-size: .82rem; text-align: left; }
.pe-fix.is-active { border-color: #c2255c; box-shadow: inset 3px 0 0 #c2255c; }
.pe-fix-no { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #c2255c; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .72rem; flex: none; }
.pe-status { display: flex; gap: 1rem; padding: .3rem .75rem; border-top: 1px solid #e6eaf1; font-size: .76rem; color: #56647d; }
.pe-coords { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }

.p3d { display: grid; grid-template-columns: minmax(0, 1fr) 250px; height: max(420px, calc(100dvh - 220px)); background: var(--tw-surface); border: 1px solid #dfe3ea; border-radius: .75rem; overflow: hidden; }
.p3d-stage { position: relative; min-height: 0; min-width: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #f7f9fc 0%, #dfe5ee 100%); }
.p3d-stage canvas { display: block; touch-action: none; cursor: grab; }
.p3d-stage canvas:active { cursor: grabbing; }
.p3d-loading { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.p3d-panel { border-left: 1px solid #e6eaf1; padding: .75rem .85rem; overflow-y: auto; }
.p3d-floor { display: flex; align-items: center; gap: .45rem; margin-bottom: .2rem; }
.p3d-floor .form-check-input { margin: 0; flex: none; }
.p3d-floor-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: .35rem; border: 1px solid transparent; background: transparent; border-radius: .4rem; padding: .2rem .4rem; font-size: .84rem; text-align: left; color: inherit; }
.p3d-floor-name i { color: #8a94a6; font-size: .75rem; }
.p3d-floor-name:hover { background: #eef1f6; }
.p3d-floor.is-focus .p3d-floor-name { border-color: #3d7be0; background: rgba(61, 123, 224, .08); font-weight: 600; }
.p3d-floor.is-focus .p3d-floor-name i { color: #3d7be0; }
.p3d-legend { position: absolute; left: .6rem; bottom: .6rem; display: flex; flex-wrap: wrap; gap: .6rem; font-size: .76rem; background: rgba(255, 255, 255, .88); border-radius: .5rem; padding: .3rem .55rem; }
.p3d-legend i, .p3d-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .3rem; vertical-align: -1px; }
.p3d-tip { position: absolute; pointer-events: none; background: rgba(26, 31, 46, .94); color: #fff; font-size: .78rem; border-radius: .45rem; padding: .45rem .6rem; max-width: 240px; z-index: 3; }

/* Plansatz-Import (PlanImport.js) */
.plans-floor-import { background: #1a1f2e; border-color: #1a1f2e; color: #fff; }
.plans-step.is-check { color: #1a1f2e; border-color: #f1c84b; }
.plans-step.is-check .plans-step-no { background: #f1c84b; color: #1a1f2e; }
.pi { position: relative; background: var(--tw-surface); border: 1px solid #dfe3ea; border-radius: .75rem; padding: 1rem 1.1rem 1.1rem; }
.pi-head { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .85rem; }
.pi-title { font-weight: 700; font-size: 1.05rem; }
.pi-drop { display: flex; flex-direction: column; align-items: center; text-align: center; border: 2px dashed #cfd6e2; border-radius: .75rem; padding: 2.5rem 1rem; color: #56647d; cursor: pointer; margin: 0; }
.pi-drop.dragging, .pi-drop:focus-visible { border-color: #3d7be0; background: rgba(61, 123, 224, .06); outline: none; }
.pi-reading { text-align: center; padding: 2.5rem 1rem; max-width: 420px; margin: 0 auto; }
.pi-summary { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; color: #56647d; margin-bottom: .6rem; }
.pi-rows { display: grid; gap: .45rem; }
.pi-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .75rem; align-items: center; padding: .45rem; border: 1px solid #e6eaf1; border-radius: .6rem; }
.pi-row.is-empty { background: #f7f8fb; }
.pi-row.is-empty .pi-thumb { opacity: .55; }
.pi-row-main { display: grid; gap: .35rem; min-width: 0; }
.pi-row-name { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.pi-row-name .pi-name { max-width: 14rem; }
.pi-thumb { width: 96px; height: 68px; border: 1px solid #dfe3ea; border-radius: .4rem; background: #fff; display: grid; place-items: center; overflow: hidden; padding: 0; color: #8a94a6; }
.pi-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
button.pi-thumb:not(:disabled) { cursor: zoom-in; }
.pi-chip { font-size: .7rem; font-weight: 600; border-radius: 999px; padding: .08rem .5rem; white-space: nowrap; }
.pi-chip.is-new { background: rgba(61, 123, 224, .12); color: #2d62b8; }
.pi-chip.is-replace { background: rgba(241, 200, 75, .25); color: #7a5c00; }
.pi-section { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: #6c757d; font-weight: 700; margin: 1.1rem 0 .5rem; }
.pi-unused { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.pi-card { display: grid; gap: .3rem; border: 1px solid #e6eaf1; border-radius: .6rem; padding: .4rem; }
.pi-card .pi-thumb { width: 100%; height: 96px; }
.pi-card-label { color: #56647d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-opts { display: grid; gap: .15rem; }
.pi-foot { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.1rem; flex-wrap: wrap; }
.pi-row.is-status { grid-template-columns: 72px minmax(0, 1fr); }
.pi-row.is-status .pi-thumb { width: 72px; height: 52px; }
.pi-lightbox { position: fixed; inset: 0; z-index: 1080; background: rgba(15, 20, 32, .82); display: grid; place-items: center; padding: 1rem; cursor: zoom-out; }
.pi-lightbox img { max-width: 100%; max-height: 100%; background: #fff; border-radius: .4rem; }
.pi-lightbox .btn-close { position: absolute; top: 1rem; right: 1rem; }

/* Kompakt, sobald der Platz fehlt (Handy, Tablet mit offener Seitenleiste) — richtet sich
   nach der Breite der Seite selbst, nicht nach dem Fenster. */
@container plans (max-width: 760px) {
  .pe { height: auto; grid-template-rows: auto auto auto; }
  .pe-tool span { display: none; }
  .pe-tool { padding: .45rem .6rem; font-size: .95rem; }
  /* Panel als Seitenleiste von rechts (Knopf „Details“), der Plan nutzt die ganze Fläche */
  .pe-body { grid-template-columns: minmax(0, 1fr); }
  .pe-stage { height: 66dvh; min-height: 340px; }
  .pe-panel {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; width: min(320px, 88%);
    background: var(--tw-surface); border-left: 1px solid #e6eaf1; box-shadow: -10px 0 28px rgba(15, 20, 30, .2);
    transform: translateX(105%); transition: transform .22s ease; padding-top: 2.4rem;
  }
  .pe.panel-open .pe-panel { transform: none; }
  .pe-backdrop {
    display: block; position: absolute; inset: 0; z-index: 5; background: rgba(15, 20, 30, .28);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .pe.panel-open .pe-backdrop { opacity: 1; pointer-events: auto; }
  .pe-panel-toggle { display: inline-flex; align-items: center; position: absolute; top: .6rem; right: .6rem; z-index: 3; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
  .pe-panel-close { display: block; position: absolute; top: .7rem; right: .8rem; }
  .plans-step { font-size: .74rem; }
  .pi { padding: .75rem; }
  .pi-row { grid-template-columns: 72px minmax(0, 1fr); gap: .55rem; }
  .pi-thumb { width: 72px; height: 54px; }
  .pi-row-name .pi-name { max-width: none; flex: 1; }
  .pi-unused { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-foot .btn { flex: 1; }
}


/* 3D-Schnellansicht (Modal vollbild, Gebäudeübersicht) */
.p3dq .modal-body { padding: 0; display: flex; overflow: hidden; }
.p3dq .modal-header { gap: .5rem; }
.p3dq .modal-header .btn-close { margin-left: 0; }
.p3dq .modal-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p3dq-host { flex: 1; min-height: 0; display: flex; --p3d-line: #56647d; container-type: inline-size; container-name: p3dq; }
.p3dq-host > * { flex: 1; }
.p3d-compact { grid-template-columns: minmax(0, 1fr); height: 100%; border: 0; border-radius: 0; }
.p3d-compact .p3d-stage { height: 100%; }
.p3d-explode-bar {
  position: absolute; right: .6rem; bottom: .6rem; width: min(300px, calc(100% - 1.2rem)); z-index: 2;
  background: rgba(255, 255, 255, .92); border-radius: .5rem; padding: .35rem .7rem .1rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.p3d-explode-bar label { display: block; color: #3f4656; }
.p3d-tip-seen { margin-top: .2rem; color: #c9d1de; }
/* schmal: Legende über den Schieber (richtet sich nach dem Modal, nicht nach dem Fenster) */
@container p3dq (max-width: 640px) {
  .p3d-compact .p3d-legend { bottom: 4.6rem; right: .6rem; }
}


/* 3D: Umschalter Technik/Wärme + Nur Probleme (Panel bzw. über dem Bild in der Schnellansicht) */
.p3d-modes { display: flex; flex-direction: column; gap: .5rem; }
.p3d-modes .p3d-view { width: 100%; }
.p3d-modes .p3d-view .btn { flex: 1; white-space: nowrap; }
.p3d-modes-overlay {
  position: absolute; left: .6rem; top: .6rem; z-index: 2; background: rgba(255, 255, 255, .94);
  border-radius: .55rem; padding: .45rem .55rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
}
.p3d-modes-overlay .p3d-modes { flex-direction: row; align-items: center; gap: .75rem; flex-wrap: wrap; }
.p3d-modes-overlay .p3d-view { width: auto; }
.p3d-modes-overlay .btn-outline-dark { background: #fff; }
/* Legende der Wärmeansicht: Farbskala */
.p3d-legend.is-heat { display: block; min-width: 220px; padding: .4rem .6rem .3rem; }
.p3d-heat-title { font-weight: 600; margin-bottom: .25rem; }
.p3d-heatbar { height: .6rem; border-radius: .3rem; }
.p3d-heatticks { display: flex; justify-content: space-between; margin-top: .15rem; color: #56647d; font-variant-numeric: tabular-nums; }
.p3d-floor-temp { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .05rem .45rem; font-variant-numeric: tabular-nums; }
.p3d-floor-temp.is-none { background: #eef1f6; color: #8a94a6; }

/* Räume (Stufe 1): Rückmeldung nach dem Platzieren und Raumliste im Werkzeug „Räume" */
.pe-roombar {
  position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%); z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem;
  max-width: calc(100% - 1.5rem); padding: .4rem .5rem; border-radius: .6rem;
  background: rgba(26, 31, 46, .92); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); font-size: .85rem;
}
.pe-roombar-text { padding: 0 .3rem; }
.pe-roombar .form-control { width: 11rem; }
.pe-roomlist { display: grid; gap: .2rem; max-height: 46vh; overflow-y: auto; }
.pe-roomsugg { border: 1px solid var(--bs-primary-border-subtle, #b6d4fe); background: var(--bs-primary-bg-subtle, #eef4ff); border-radius: .5rem; padding: .5rem; }
.pe-roomsugg-list { display: grid; gap: .25rem; max-height: 30vh; overflow-y: auto; }
.pe-roomsugg-row { display: flex; align-items: center; gap: .4rem; }
.pe-roomsugg-name { flex: 1; min-width: 0; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-roomsugg-name small { display: block; color: var(--bs-secondary-color, #6c757d); overflow: hidden; text-overflow: ellipsis; }
.pe-room small.text-muted { margin-right: .35rem; }
.pe-room {
  display: flex; align-items: center; gap: .4rem; width: 100%; border: 1px solid transparent; background: transparent;
  border-radius: .4rem; padding: .25rem .45rem; font-size: .84rem; text-align: left; color: inherit;
}
.pe-room span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-room small { color: #56647d; flex: none; }
.pe-room:hover { background: #eef1f6; }
.pe-room.is-selected { border-color: #3d7be0; background: rgba(61, 123, 224, .08); font-weight: 600; }
.pe-roomsel { border-bottom: 1px solid #e6eaf1; padding-bottom: .6rem; }
.pe-roomhint { color: #9a5b00; }
.pe-roomsel .select2-container { font-size: .875rem; }
@container plans (max-width: 760px) {
  .pe-roombar { left: .5rem; right: .5rem; transform: none; max-width: none; }
  .pe-roombar .form-control { flex: 1 1 8rem; width: auto; }
  .pe-roomlist { max-height: 30dvh; }
}

/* Etagen bearbeiten (Modal: eine Zeile je Etage, sortieren per Ziehen) */
.plans-floor-edit { padding-left: .6rem; padding-right: .6rem; color: #3f4656; }
.pf-rows { display: grid; gap: .4rem; }
.pf-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .35rem .45rem;
  border: 1px solid #e6eaf1; border-radius: .55rem; background: var(--tw-surface, #fff);
}
.pf-row.is-dragging { box-shadow: 0 6px 18px rgba(26, 31, 46, .18); border-color: #3d7be0; position: relative; z-index: 2; }
.pf-row.is-confirm { border-color: #f1aeb5; background: #fff5f5; justify-content: space-between; }
.pf-grip {
  border: 0; background: transparent; color: #8a94a6; padding: .45rem .35rem; border-radius: .4rem;
  cursor: grab; touch-action: none; flex: none;   /* Finger: ziehen statt scrollen */
}
.pf-grip:hover, .pf-grip:focus-visible { background: #eef1f6; color: #1a1f2e; }
.pf-row.is-dragging .pf-grip { cursor: grabbing; }
.pf-thumb { width: 72px; height: 48px; border-radius: .35rem; border: 1px solid #e6eaf1; background: #fff; flex: none; }
.pf-thumb.is-empty { display: grid; place-items: center; color: #b3bccb; }
.pf-level { min-width: 2.2rem; text-align: center; font-weight: 700; font-size: .8rem; color: #3f4656; background: #eef1f6; border-radius: 999px; padding: .15rem .45rem; font-variant-numeric: tabular-nums; flex: none; }
.pf-name { width: 11rem; flex: 0 1 11rem; }
.pf-devs { min-width: 3rem; flex: none; }
.pf-height { width: 6.5rem; flex: none; margin-left: auto; }
.pf-del { flex: none; }
.pf-confirm { min-width: 0; flex: 1 1 16rem; }
@media (max-width: 575.98px) {
  /* zwei Zeilen je Etage: Griff, Vorschau, Ebene, Name | Geräte, Höhe, Löschen */
  .pf-thumb { width: 52px; height: 36px; }
  .pf-name { flex: 1 1 5rem; width: auto; min-width: 0; }
  .pf-devs { margin-left: 2.1rem; }
  .pf-height { margin-left: auto; }
}


/* 3D-Schnellansicht = volle 3D-Ansicht im Modal (seit v0.40.0): füllt das Modal */
.p3dq .p3d { height: auto; align-self: stretch; border: 0; border-radius: 0; }

/* 3D-Einstellungen: breit Panel rechts, schmal Seitenleiste von rechts (Knopf „Einstellungen“) — gilt für die
   Grundriss-Seite (Container .plans-page) und das Modal (Container .p3dq-host) gleichermassen */
.p3d { position: relative; }
.p3d-panel-toggle, .p3d-panel-close, .p3d-backdrop { display: none; }
@container (max-width: 760px) {
  .p3d { grid-template-columns: minmax(0, 1fr); height: 72dvh; min-height: 380px; }
  .p3dq .p3d { height: auto; min-height: 0; }
  .p3d-stage { height: 100%; min-height: 0; }
  .p3d-panel {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; width: min(300px, 86%);
    background: var(--tw-surface); border-left: 1px solid #e6eaf1; box-shadow: -10px 0 28px rgba(15, 20, 30, .2);
    transform: translateX(105%); transition: transform .22s ease; padding-top: 2.4rem;
  }
  .p3d.panel-open .p3d-panel { transform: none; }
  .p3d-backdrop {
    display: block; position: absolute; inset: 0; z-index: 5; background: rgba(15, 20, 30, .28);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .p3d.panel-open .p3d-backdrop { opacity: 1; pointer-events: auto; }
  .p3d-panel-toggle { display: inline-flex; align-items: center; position: absolute; top: .6rem; right: .6rem; z-index: 3; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
  .p3d-panel-close { display: block; position: absolute; top: .7rem; right: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .p3d-panel, .p3d-backdrop, .pe-panel, .pe-backdrop { transition: none; } }

/* ── LoRaMapper: Arbeitsbereich füllt den Inhalt (Reiter, Etagen, Schritte, Arbeitsfläche) ── */
.ws { display: flex; flex-direction: column; gap: .55rem; min-height: 0; }
.ws .plans-work { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ws .plans-work > .pe, .ws .plans-work > .p3d { flex: 1 1 auto; height: auto; min-height: 440px; }
.ws .plans-work > .pi, .ws .plans-work > .plans-blank { flex: 0 0 auto; }
.plans-tab span { white-space: nowrap; }
.ws-label { font-size: .8rem; font-weight: 600; color: #56647d; margin-right: .2rem; }
.ws-camp { font-weight: 500; }
.ws-counts { font-variant-numeric: tabular-nums; }
.ws-detail { border: 1px solid #e6eaf1; border-radius: .55rem; padding: .55rem .6rem; margin-bottom: .6rem; background: #f8fafc; }
.ws-list { display: grid; gap: .15rem; max-height: 26vh; overflow-y: auto; }
.pe-toolbar-title { font-size: .82rem; font-weight: 600; color: #3f4656; padding: .35rem .5rem; }
.pe-tip { position: absolute; pointer-events: none; background: rgba(26, 31, 46, .94); color: #fff; font-size: .78rem; border-radius: .45rem; padding: .45rem .6rem; max-width: 260px; z-index: 4; }
.pe-tip .p3d-tip-seen { color: #c9d1de; }
.pe-legend { position: absolute; left: .6rem; bottom: .6rem; z-index: 2; font-size: .76rem; background: rgba(255, 255, 255, .92); border-radius: .5rem; padding: .4rem .6rem .3rem; min-width: 220px; box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.pe-matdot, .hm-gwdot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; flex: none; }
.pe-matlist { display: grid; gap: .2rem; }
.hm-modegroup { display: flex; }
.hm-modegroup .btn { flex: 1 1 0; min-width: 0; font-size: .74rem; padding: .3rem .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-modegroup .btn i { margin-right: .2rem !important; }
.ws .p3d { grid-template-columns: minmax(0, 1fr) 280px; }
.p3d-panel { overflow-x: hidden; }
.hm-gwlist { display: grid; gap: .15rem; max-height: 28vh; overflow-y: auto; }
.hm-gw { display: flex; align-items: center; gap: .45rem; font-size: .83rem; padding: .15rem .1rem; cursor: pointer; margin: 0; }
.hm-gw .form-check-input { margin: 0; flex: none; }
.hm-gwname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-gwname small { display: block; color: #8a94a6; font-size: .72rem; }
.hm-model summary { cursor: pointer; }
/* Gelerntes Modell (Decken je Etage, core/calibration.js) */
.hm-calib { margin-top: .5rem; }
.hm-calib td, .hm-calib th { padding: .15rem .25rem; vertical-align: middle; white-space: nowrap; }
.hm-calib td:first-child { white-space: normal; }
.hm-calib .hm-lockrow td { padding-top: 0; }
.hm-cst { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #6b7280; vertical-align: baseline; }
.hm-calib .hm-calib-sub td { padding-top: .4rem; font-weight: 600; color: var(--bs-secondary-color, #6c757d); }
.hm-cst.is-learned { background: #047857; }
.hm-cst.is-prelim { background: #b45309; }
.hm-cst.is-locked { background: #1d4ed8; }
.hm-lock { color: inherit; opacity: .55; }
.pe-room.ws-calib { min-width: 0; }
.pe-room.ws-calib > span { min-width: 0; }
.hm-calib tr.is-locked .hm-lock, .hm-lock:hover { opacity: 1; }
.p3d-legend.is-heat { display: block; min-width: 220px; padding: .4rem .6rem .3rem; }
.p3d-heat-title { font-weight: 600; margin-bottom: .25rem; }
.p3d-heatbar { height: .6rem; border-radius: .3rem; }
.p3d-heatticks { display: flex; justify-content: space-between; margin-top: .15rem; color: #56647d; font-variant-numeric: tabular-nums; }
.p3d-floor-temp { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .05rem .45rem; font-variant-numeric: tabular-nums; }
.p3d-floor-temp.is-none { background: #eef1f6; color: #8a94a6; }
@container plans (max-width: 760px) {
  .ws .plans-work > .pe { min-height: 0; }
  .ws .p3d { grid-template-columns: minmax(0, 1fr); }
  .plans-tab { padding: .35rem .55rem; }
  .plans-tab span { display: none; }
  .plans-tab i { margin: 0 !important; }
  .pe-legend { min-width: 0; right: .6rem; }
}

/* ── v1.8 Messablauf: Runden, Geräte, Status der Messorte ── */
.ws-round { border: 1px solid #cfe3d6; background: #f3fbf6; border-radius: .6rem; padding: .55rem .6rem; margin-bottom: .6rem; }
.ws-round.is-ended { border-color: #dfe3ea; background: #f6f7f9; }
.ws-rgw { border-top: 1px dashed #d5dbe5; padding-top: .4rem; margin-top: .4rem; }
.ws-floorchips { display: flex; flex-wrap: wrap; gap: .25rem; }
.ws-fchip { border: 1px solid #d5dbe5; background: #fff; border-radius: 999px; padding: .1rem .55rem; font-size: .76rem; color: #56647d; }
.ws-fchip.is-on { background: #1a1f2e; border-color: #1a1f2e; color: #fff; }
.ws-fchip:disabled { opacity: .75; }
.ws-round-dot { font-size: .55rem; vertical-align: 1px; }
.ws-round-dot.is-live { color: #2f9e6a; }
.plans-floor.is-active .ws-round-dot { color: #fff; }
.ws-cnt { display: inline-flex; align-items: center; margin-right: .55rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ws-cnt.is-open { color: #3b82f6; }
.ws-cnt.is-probing { color: #e8590c; }
.ws-cnt.is-done { color: #2f9e6a; }
.ws-st { font-weight: 600; }
.ws-st.is-open { color: #3b82f6; }
.ws-st.is-probing { color: #e8590c; }
.ws-st.is-measured { color: #2f9e6a; }
.ws-st.is-other, .ws-st.is-out { color: #8a94a6; }
@container plans (max-width: 760px) {
  .ws-counts { width: 100%; margin-left: 0 !important; }
}

/* ── Pläne zusammensetzen (views/PlanStitch.js) ─────────────────────────── */
#planStitch .st-body { display: flex; flex-direction: column; min-height: 0; }
#planStitch .st-head { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
#planStitch .st-panes { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; min-height: 0; }
#planStitch .st-pane { position: relative; display: flex; flex-direction: column; min-height: 0; }
#planStitch .st-pane-title { font-size: .8rem; font-weight: 600; color: #5a6475; margin-bottom: .25rem; }
#planStitch .st-c { flex: 1; width: 100%; min-height: 0; border: 1px solid #d5dbe3; border-radius: 8px; cursor: crosshair; display: block; }
#planStitch .st-preview { flex: 1; display: flex; min-height: 0; }
#planStitch .st-preview .st-c { cursor: grab; }
#planStitch .st-loading { position: absolute; inset: 1.5rem 0 0 0; display: flex; align-items: center; justify-content: center; }
#planStitch .st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--st-w, 220px), 1fr)); gap: .75rem; }
#planStitch .st-grid[data-size="s"] { --st-w: 150px; }
#planStitch .st-grid[data-size="m"] { --st-w: 240px; }
#planStitch .st-grid[data-size="l"] { --st-w: 400px; }
#planStitch .st-page { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .5rem; border: 2px solid #e3e7ee; border-radius: 8px; }
#planStitch .st-page.is-on { border-color: #2563eb; background: #eef4ff; }
#planStitch .st-thumb { position: relative; width: 100%; aspect-ratio: 1.41; display: flex; align-items: center; justify-content: center; background: #f6f7f9; border: 0; padding: 0; cursor: zoom-in; }
#planStitch .st-thumb img { max-width: 100%; max-height: 100%; }
#planStitch .st-zoom { position: absolute; right: .35rem; bottom: .35rem; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(26,31,46,.75); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; }
#planStitch .st-page label { cursor: pointer; }
#planStitch .st-big { position: absolute; inset: 0; z-index: 5; background: #fff; display: flex; flex-direction: column; padding: .75rem; }
#planStitch .st-big-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
#planStitch .st-big-body { position: relative; flex: 1; display: flex; min-height: 0; }
#planStitch .st-big-body .st-c { cursor: grab; }
#planStitch .st-big-body .st-loading { inset: 0; }
@media (max-width: 767.98px) {
  #planStitch .st-panes { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  #planStitch .st-c { min-height: 32vh; }
}

/* Einklappbare Abschnitte im 3D-Panel */
.p3d-collapse { display: flex; align-items: center; width: 100%; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
.p3d-sec { border-top: 1px solid #e6eaf1; margin-top: .75rem; padding-top: .65rem; }
.p3d-sec .p3d-collapse { margin-bottom: .45rem; }
.p3d-sec .p3d-collapse.is-collapsed { margin-bottom: 0; }
.p3d-sec .hm-calc > :first-child { margin-top: 0 !important; }
.p3d-collapse i { font-size: .7rem; transition: transform .15s; opacity: .7; }
.p3d-collapse.is-collapsed i { transform: rotate(-90deg); }

/* Einfluss eines Gateways im 3D (Klick aufs Gateway) */
.p3d-infl { position: absolute; top: .75rem; left: .75rem; z-index: 4; background: rgba(26, 31, 46, .92); color: #fff; border-radius: .6rem; padding: .6rem .75rem; max-width: min(360px, calc(100% - 1.5rem)); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.p3d-infl .p3d-infl-table { --bs-table-bg: transparent; --bs-table-color: #fff; }
.p3d-infl .p3d-infl-table th { font-weight: 500; opacity: .7; }

/* Gateway online? (v1.9.5, „zuletzt gehört") */
.gwh-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .35rem; vertical-align: 0; background: #adb5bd; }
.gwh-dot.is-ok { background: #198754; box-shadow: 0 0 0 2px rgba(25, 135, 84, .2); }
.gwh-dot.is-stale { background: #ffc107; }
.gwh-dot.is-off, .gwh-dot.is-never { background: #dc3545; animation: gwh-blink 1.4s ease-in-out infinite; }
@keyframes gwh-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .gwh-dot.is-off, .gwh-dot.is-never { animation: none; } }