/* Uplights verteilen (raum/uplights-ui.js): Fenster über der 3D-Ansicht, Gruppennummern, Plan von oben */
.ul-drawer { width: min(480px, calc(100% - 24px)); }
.ul-free { display: flex; align-items: center; gap: 8px; }
.ul-step { flex: none; width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 20px; cursor: pointer; }
.ul-free input { width: 76px; height: 48px; text-align: center; font-size: 18px; font-weight: 700; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); -moz-appearance: textfield; appearance: textfield; }
.ul-free input::-webkit-outer-spin-button, .ul-free input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ul-split { min-width: 0; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.ul-suggest { width: 100%; min-height: 44px; }
.ul-suggest.is-on { border-color: var(--accent); color: var(--accent); background: rgba(255, 176, 32, .1); }
.ul-why { margin: 0; }
.ul-mypacks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ul-mypack { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); overflow: hidden; }
.ul-mypack.is-on { border-color: var(--accent); background: rgba(255, 176, 32, .1); }
.ul-mypack > button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
.ul-mypack > button:first-child { gap: 6px; padding: 0 4px 0 12px; font-size: 12.5px; }
.ul-mypack small { color: var(--muted); font-size: 11.5px; }
.ul-mypack-x { width: 34px; color: var(--muted) !important; font-size: 15px; }
.ul-pack-new { min-height: 44px; }
.ul-newpack { display: flex; gap: 6px; }
.ul-newpack[hidden] { display: none; }
.ul-newpack input { flex: 1; min-width: 0; height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); }

.ul-pats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ul-pat { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: center; text-align: left; padding: 7px; min-height: 66px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; }
.ul-pat.is-on { border-color: var(--accent); background: rgba(255, 176, 32, .1); }
.ul-pat-tx { display: grid; gap: 2px; min-width: 0; }
.ul-pat-tx b { font-size: 12.5px; line-height: 1.25; }
.ul-seq { color: var(--muted); font-family: var(--mono); font-size: 10px; overflow-wrap: anywhere; line-height: 1.25; }
.ul-tag { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px; background: rgba(255, 176, 32, .16); color: var(--accent); font-size: 10px; font-weight: 600; vertical-align: 1px; }
.ul-mini-box { display: block; line-height: 0; }
.ul-mini { width: 100%; height: auto; display: block; }
.ul-m-room { fill: #0c0e12; stroke: #313744; stroke-width: .18; }
.ul-hint { margin: 0; min-height: 2.8em; }

.ul-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ul-probes { display: flex; gap: 6px; }
.ul-probes .chip.is-on { border-color: var(--accent); color: var(--accent); background: rgba(255, 176, 32, .1); }
.ul-plan { touch-action: none; line-height: 0; }
.ul-plan-svg { width: 100%; height: auto; display: block; max-height: 330px; }
.ul-room { fill: #0c0e12; stroke: #4a5263; stroke-width: .06; }
.ul-obj { fill: #1e222b; stroke: #313744; stroke-width: .04; }
.ul-obj.is-booth { fill: #2a2110; stroke: #5a4415; }
.ul-cell { fill: #171a21; stroke: #0c0e12; stroke-width: .05; cursor: pointer; }
.ul-cell:hover { fill: #242833; }
.ul-cell.is-off { fill: #0c0e12; }
.ul-cell.is-own { fill: #5a4415; }
.ul-post { fill: #9aa1ae; stroke: #111318; stroke-width: .04; }
.ul-lamp.is-post circle { stroke: #fff; stroke-width: .1; }
.ul-axis { stroke: var(--accent); stroke-width: .05; stroke-dasharray: .3 .3; opacity: .55; }
.ul-lamp { pointer-events: none; }
.ul-lamp text { fill: #111318; font-weight: 700; font-family: var(--font); }

.ul-notes { display: grid; gap: 6px; }
.ul-notes:empty { display: none; }
.ul-note-row { display: flex; align-items: center; gap: 10px; }
.ul-note-row .chip { flex: none; }
.ul-walls { display: flex; flex-wrap: wrap; gap: 6px; }
.ul-walls .chip { min-height: 36px; }
.ul-walls .chip.is-on { border-color: var(--accent); color: var(--accent); background: rgba(255, 176, 32, .1); }
.ul-more { border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .015); }
.ul-more > summary { padding: 10px; cursor: pointer; font-size: 12.5px; color: var(--muted); }
.ul-more-in { display: grid; gap: 8px; padding: 0 10px 10px; }
.ul-groups { display: grid; gap: 2px; }
.ul-group small { margin-left: auto; }
.ul-gname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ul-up { flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; }
.ul-dot { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--g, #313744); color: #111318; font-size: 11.5px; font-weight: 700; }
.ul-sumgroups { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ul-sumg { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }

/* Gruppennummern über den Lampen in 3D */
.ul-badges { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ul-badge { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--g, #ffb020); color: #111318; font: 700 12.5px/1 var(--font); box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); will-change: transform; }
body.embed .ul-badges { display: none; }
/* Geräteliste: Gruppe je Lampe */
.fx-grp { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--g, #ffb020); color: #111318; font-size: 10.5px; font-weight: 700; }
.wb-note.is-warn { color: var(--accent); }
@media (max-width: 760px) {
  .ul-drawer { width: auto; }
  .ul-pats { grid-template-columns: 1fr; }
}