/* static/css/plans.css — Grundrisse & 3D (PlansView / PlanEditor / Plan3D) */
.bcard-plan-btn {
  position: absolute; right: 3.2rem; bottom: .6rem; z-index: 2; display: inline-flex; align-items: center;
  height: 2.1rem; padding: 0 .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: rgba(255, 255, 255, .92); color: #1a1f2e; text-decoration: none;
}
.bcard-plan-btn:hover, .bcard-plan-btn:focus-visible { background: #fff; color: #1a1f2e; }

.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-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-devsearch { position: relative; margin-bottom: .45rem; }
.pe-devsearch i { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: #8a94a6; font-size: .75rem; pointer-events: none; }
.pe-devsearch input { padding-left: 1.75rem; }
.pe-devnone { margin-bottom: .6rem; }
.pe-devlist { display: grid; gap: .25rem; max-height: 46vh; overflow-y: auto; margin-bottom: .6rem; }
.pe-dev { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 1px solid #e6eaf1; border-radius: .45rem; font-size: .82rem; cursor: pointer; background: var(--tw-surface); }
.pe-dev:hover { border-color: #3d7be0; }
.pe-dev.is-placing { border-color: #3d7be0; background: rgba(61, 123, 224, .08); }
.pe-dev.is-selected { box-shadow: inset 3px 0 0 #3d7be0; }
.pe-dev.is-placed { color: #6c757d; }
.pe-dev-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.pe-dev-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-dev-name small { display: block; color: #8a94a6; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; }
.pe-deveui { font-family: var(--bs-font-monospace); font-size: .7rem; letter-spacing: .01em; }
.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-devdetail { border-top: 1px solid #e6eaf1; padding-top: .6rem; }
.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, .95); color: #fff; font-size: .78rem; border-radius: .5rem; padding: .5rem .65rem; width: max-content; max-width: 280px; min-width: 200px; z-index: 3; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.p3d-tip-past { font-weight: 600; color: #ffd43b; margin-bottom: .25rem; }
.p3d-tip-name { font-weight: 600; font-size: .84rem; }
.p3d-tip-eui { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .7rem; color: #9aa6ba; letter-spacing: .02em; }
.p3d-tip-where { color: #c9d1de; margin-bottom: .35rem; }
.p3d-tip-grid { display: grid; grid-template-columns: auto 1fr; gap: .12rem .7rem; align-items: baseline; }
.p3d-tip-k { color: #9aa6ba; white-space: nowrap; }
.p3d-tip-k i { width: 1.05rem; text-align: center; margin-right: .3rem; }
.p3d-tip-v { font-weight: 600; }
.p3d-tip-v small { font-weight: 400; color: #c9d1de; margin-left: .35rem; }
.p3d-tip-bar { display: inline-block; vertical-align: middle; width: 52px; height: 5px; margin-left: .45rem; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.p3d-tip-bar i { display: block; height: 100%; background: #2fbf71; }
.p3d-tip-flag { margin-top: .3rem; color: #ffd43b; }
.p3d-tip-foot { display: flex; justify-content: space-between; gap: .8rem; margin-top: .4rem; padding-top: .3rem; border-top: 1px solid rgba(255, 255, 255, .12); color: #c9d1de; }
.p3d-tip-hint { margin-top: .15rem; font-size: .7rem; color: #8a94a6; }
.p3d-tip-chart { margin-top: .4rem; }
.p3d-tip-chart canvas { display: block; }
.p3d-tip-legend { display: flex; flex-wrap: wrap; gap: .1rem .55rem; font-size: .68rem; color: #c9d1de; margin-top: .1rem; min-height: 1em; }
.p3d-tip-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .25rem; vertical-align: -1px; }

/* 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; }
}

@media (max-width: 767.98px) { .bcard-plan-btn { right: 3.1rem; padding: 0 .6rem; } }

/* 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; }
}

/* Gerätehöhe im Raum: ein Knopf mit drei Stufen (Boden → Mitte → Decke) */
.pe-level { margin-bottom: .7rem; }
.pe-level-btn {
  width: 100%; display: flex; align-items: center; gap: .6rem; border: 1px solid #cfd6e2; background: var(--tw-surface, #fff);
  border-radius: .5rem; padding: .4rem .6rem; font-size: .88rem; font-weight: 600; color: #1a1f2e; text-align: left;
}
.pe-level-btn:hover:not(:disabled) { border-color: #3d7be0; background: rgba(61, 123, 224, .06); }
.pe-level-btn:disabled { opacity: 1; }
.pe-level-icon { display: grid; grid-template-rows: repeat(3, 5px); gap: 3px; width: 20px; flex: none; }
.pe-level-icon i { border-radius: 2px; background: #d9dfe8; }
.pe-level-btn[data-state="ceiling"] .pe-level-icon i:nth-child(1),
.pe-level-btn[data-state="mid"] .pe-level-icon i:nth-child(2),
.pe-level-btn[data-state="floor"] .pe-level-icon i:nth-child(3) { background: #3d7be0; }

/* 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-Wärmeansicht: Messgrösse und Zeitleiste (Verlauf 14 Tage) */
.p3d-modes .p3d-metric { width: 100%; }
.p3d-modes .p3d-metric .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .74rem; padding: .25rem .3rem; }
.p3d-panel .p3d-metric .btn .p3d-mlabel { display: none; }   /* schmales Panel: 5 Messgrössen nur als Symbol (Name im Tooltip + Legende) */
.p3d-panel .p3d-metric .btn { padding: .3rem 0; }
@media (max-width: 575.98px) { .p3d-modes .p3d-metric .btn .p3d-mlabel { display: none; } }
.p3d-timeline {
  position: absolute; left: .6rem; right: .6rem; bottom: .6rem; z-index: 2;
  display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem;
  background: rgba(255, 255, 255, .92); border-radius: .6rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.p3d-stage.has-timeline .p3d-legend { bottom: 5.4rem; }
.p3d-tl-main { flex: 1; min-width: 0; }
.p3d-tl-head { display: flex; align-items: baseline; gap: .6rem; font-size: .8rem; margin-bottom: .1rem; }
.p3d-tl-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.p3d-tl-status { color: #6c757d; font-size: .75rem; }
.p3d-tl-track { position: relative; height: 32px; }
.p3d-tl-spark { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: .3rem; background: #f1f4f9; }
.p3d-tl-range { position: absolute; inset: 0; height: 100%; background: transparent; }
.p3d-tl-range::-webkit-slider-runnable-track { background: transparent; }
.p3d-tl-range::-moz-range-track { background: transparent; }
.p3d-tl-days { position: relative; height: 1rem; font-size: .68rem; color: #56647d; overflow: hidden; }
.p3d-tl-days span { position: absolute; top: 0; transform: translateX(-2px); white-space: nowrap; }
.p3d-tl-play { width: 2.2rem; height: 2.2rem; border-radius: 50%; padding: 0; flex: none; }
.p3d-tl-now.active { background: #1a1f2e; color: #fff; }

/* 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; }
  .p3d-timeline { left: .4rem; right: .4rem; bottom: .4rem; gap: .4rem; padding: .35rem .45rem; }
  .p3d-tl-now { padding: .15rem .4rem; font-size: .75rem; }
  .p3d-stage.has-timeline .p3d-legend { bottom: 5.2rem; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .p3d-panel, .p3d-backdrop, .pe-panel, .pe-backdrop { transition: none; } }