/* 🗺️ Pläne (js/plans.js, js/plansedit.js) — Viewer, Editor, Upload-Dialog.
   Retro-Look wie der Rest (harte Kanten, Drop-Shadows), keine CSS-Gradients (Software-Renderer), Farben aus den
   Theme-Tokens. Flächenfarbe je Fläche über --c. */

.page.pl-page { max-width: none; padding: 8px 10px 10px; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
.pl-viewer { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 6px; }
.pl-viewer.inline { min-height: 360px; }
.pl-muted { color: var(--muted); font-size: .85rem; }
.pl-warn { color: var(--danger); font-size: .85rem; margin: 4px 0; }
.pl-busy { color: var(--danger); }
.pl-free { color: var(--ok); }
.pl-inline { display: inline-flex; align-items: center; gap: 6px; }
.pl-sub { font-family: var(--px); font-size: .6rem; font-weight: 700; color: var(--muted); text-transform: uppercase; margin: 12px 0 4px; }
.pl-ul { margin: 4px 0; padding-left: 18px; font-size: .9rem; }
.pl-ul li.past { color: var(--muted); }
.pl-newform .grid-2, .pl-panel .grid-2, .pl-up .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pl-newform label, .pl-panel label { display: block; margin-bottom: 10px; }
.pl-newform input[type=text], .pl-newform input[type=number], .pl-newform select,
.pl-panel input[type=text], .pl-panel input[type=number], .pl-panel input[type=search], .pl-panel select { width: 100%; box-sizing: border-box; }
.pl-kind { border: 2px solid var(--border); margin: 0 0 12px; padding: 6px 10px; }

/* ---- Kopf: Brotkrumen, Werkzeuge, Stockwerke ---- */
.pl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pl-crumbs { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1 1 260px; min-width: 0; }
.pl-crumbs::-webkit-scrollbar { display: none; }
.pl-crumb { flex: none; padding: 4px 8px; border: 2px solid var(--line); background: var(--surface); color: var(--text);
  font-family: var(--px); font-size: .6rem; font-weight: 700; white-space: nowrap; box-shadow: 2px 2px 0 var(--shadow-c); }
.pl-crumb.cur { background: var(--accent); color: #fff; }
.pl-sep { color: var(--muted); flex: none; }
.pl-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pl-tools .btn { padding: 7px 10px; }
.pl-floors.tabs { width: 100%; margin: 0; position: static; }
.pl-search { position: relative; }
.pl-search input { width: 190px; max-width: 60vw; padding: 7px 8px; border: 2px solid var(--line); background: var(--surface-2); }
.pl-search.big input { width: 100%; max-width: none; box-sizing: border-box; padding: 11px 12px; font-size: 1rem; }
.pl-results { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: min(92vw, 460px);
  max-height: 60vh; overflow: auto; background: var(--surface); border: 2px solid var(--line); box-shadow: 4px 4px 0 var(--shadow-c); }
.pl-search.big .pl-results { width: 100%; max-width: none; }
.pl-hit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 8px 10px;
  border: 0; border-bottom: 1px solid var(--border); background: transparent; cursor: pointer; }
.pl-hit:hover, .pl-hit.on { background: var(--accent-soft); }
.pl-hit .t { font-weight: 600; }
.pl-hit .p { color: var(--muted); font-size: .78rem; }
.pl-hit.new .t { color: var(--accent); font-weight: 500; }
.pl-res-empty { padding: 8px 10px; }

/* ---- Körper: Bühne + Seitenleiste ---- */
.pl-body { display: flex; flex: 1; min-height: 0; gap: 8px; position: relative; }
.pl-stagebox { flex: 1; min-width: 0; min-height: 260px; }
.pl-panel { width: 300px; flex: none; overflow: auto; background: var(--surface); border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow-c); padding: 12px 14px; position: relative; box-sizing: border-box; }
.pl-panel h3 { margin: 0 22px 6px 0; font-size: .95rem; color: var(--text); text-transform: none; }
.pl-panel .pl-path { color: var(--muted); font-size: .8rem; margin: 0 0 8px; }
.pl-x { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; font-size: 1rem; cursor: pointer; color: var(--muted); }
.pl-grip { display: none; }
.pl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 2px solid var(--line); background: var(--surface-2);
  color: var(--text); font-weight: 600; max-width: 100%; }
.pl-chip-x { border: 0; background: transparent; cursor: pointer; color: var(--muted); }
.pl-list { list-style: none; margin: 6px 0; padding: 0; }
.pl-list li { margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.pl-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; border: 1px solid var(--border);
  background: var(--surface-2); cursor: pointer; }
.pl-row.on { border-color: var(--accent); background: var(--accent-soft); }
.pl-row.off { opacity: .45; text-decoration: line-through; }
.pl-row small { margin-left: auto; color: var(--muted); }
.sw { width: 14px; height: 14px; flex: none; border: 1px solid var(--line); background: var(--accent); }
.sw.locked { background-color: var(--surface-2); background-image: var(--hatch); background-size: 8px 8px; }
.sw.busy { background: var(--danger); }
.sw.free { background: var(--ok); }
.pl-colors { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pl-col { width: 26px; height: 26px; border: 2px solid var(--line); cursor: pointer; }
.pl-col.on { outline: 3px solid var(--text); outline-offset: 1px; }
.pl-colors input[type=color] { width: 34px; height: 30px; padding: 0; border: 2px solid var(--line); background: none; }
.pl-keys { padding-left: 16px; }

/* ---- Bühne ---- */
.pl-stage { position: relative; overflow: hidden; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none;
  background-color: var(--bg); background-image: var(--dither); background-size: 4px 4px; border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow-c); cursor: grab; outline: none; box-sizing: border-box; }
.pl-stage:focus-visible { border-color: var(--accent); }
.pl-stage.panning { cursor: grabbing; }
.pl-stage.edit[data-tool="rect"], .pl-stage.edit[data-tool="poly"], .pl-stage.edit[data-tool="pin"], .pl-stage.edit[data-tool="scale"] { cursor: crosshair; }
.pl-stage.edit[data-tool="select"] { cursor: default; }
.pl-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.pl-img { position: absolute; left: 0; top: 0; display: block; pointer-events: none; image-rendering: auto; background: #fff; }
.pl-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.pl-area { --c: var(--accent); cursor: pointer; outline: none; }
.pl-area polygon, .pl-area circle { fill: var(--c); fill-opacity: .2; stroke: var(--c); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pl-area:hover polygon, .pl-area:focus polygon { fill-opacity: .34; }
.pl-area.drill polygon { stroke-width: 3; }
.pl-area.locked polygon { stroke-dasharray: 6 4; fill: var(--muted); fill-opacity: .18; stroke: var(--muted); }
.pl-area.sel polygon, .pl-area.sel circle { stroke-width: 4; fill-opacity: .36; stroke: var(--text); }
.pl-area.hl polygon, .pl-area.hl circle { stroke: var(--c); stroke-width: 5; fill-opacity: .45; animation: pl-pulse .8s ease-in-out 3; }
.pl-area.dim { opacity: .22; }
.pl-area.busy polygon { fill: var(--danger); stroke: var(--danger); fill-opacity: .35; }
.pl-area.free polygon { fill: var(--ok); stroke: var(--ok); fill-opacity: .28; }
.pl-pin .pl-pinc { fill-opacity: .9; stroke: #fff; stroke-width: 2; }
@keyframes pl-pulse { 50% { fill-opacity: .12; stroke-width: 2; } }
@media (prefers-reduced-motion: reduce) { .pl-area.hl polygon, .pl-area.hl circle { animation: none; } }

.pl-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pl-lbl { position: absolute; transform: translate(-50%, -50%); padding: 1px 5px; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); font-size: .72rem; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; box-shadow: 2px 2px 0 var(--shadow-c); }
.pl-lbl.pin { transform: translate(-50%, calc(-100% - 12px)); }
.pl-lbl.big { font-size: .85rem; border-color: var(--accent); z-index: 2; }
.pl-lbl.dim { opacity: .3; }
.pl-lbl .e { margin-right: 3px; }
.pl-lbl .b { margin-left: 4px; color: var(--muted); font-size: .66rem; }
.pl-ui { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pl-ui [data-h] { pointer-events: all; cursor: pointer; }
.pl-h { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.pl-h.first { fill: var(--accent); }
.pl-h.mid { fill: var(--accent); fill-opacity: .5; stroke-width: 1; }
.pl-h.rot { fill: var(--accent); cursor: grab; }
.pl-hl { stroke: var(--accent); stroke-width: 1.5; }
.pl-draft { fill: var(--accent); fill-opacity: .12; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
polyline.pl-draft { fill: none; }
.pl-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.pl-zoom .btn { padding: 6px 10px; min-width: 36px; }
.pl-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 20px; color: var(--muted); }
.pl-kids { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ---- Editor-Werkzeugleiste ---- */
.pl-etools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pl-etools .btn { padding: 6px 10px; min-width: 38px; }
.pl-tsep { width: 8px; }
.pl-hint { color: var(--muted); font-size: .8rem; flex: 1 1 220px; }

/* ---- Übersicht ---- */
.page.pl-over { max-width: 980px; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; }
.pl-card { display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--line); box-shadow: 4px 4px 0 var(--shadow-c); color: var(--text); }
.pl-card:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shadow-c); }
.pl-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; border-bottom: 2px solid var(--line); }
.pl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pl-thumb-e { font-size: 3rem; }
.pl-card-t { padding: 8px 10px 0; font-weight: 700; }
.pl-card-m { padding: 2px 10px 10px; color: var(--muted); font-size: .8rem; }

/* ---- Termin, Gegenstand ---- */
.pl-evplace { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pl-evplace > span { flex: 1 1 240px; }
.pl-evplace .pl-occ-warn { flex-basis: 100%; }
.pl-pick { margin: 4px 0 12px; }
.pl-pick > label { margin-bottom: 4px; }
.pl-pick-q { width: 100%; box-sizing: border-box; }
.pl-pick-cur { margin-bottom: 6px; }
.pl-pick-list { max-height: 220px; overflow: auto; border: 1px solid var(--border); }
.pl-pick-list:empty { display: none; }
.pl-itemplace { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }

/* ---- Upload-Dialog ---- */
.pl-up-bg { position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, .6); display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 16px 8px; }
.pl-up { position: relative; background: var(--surface); border: 2px solid var(--line); box-shadow: 6px 6px 0 var(--shadow-c); padding: 14px 16px; width: min(1160px, 100%); box-sizing: border-box; }
.pl-up-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pl-up-head h2 { margin: 0 0 8px; font-size: 1.05rem; }
.pl-up-head .pl-x { position: static; }
.pl-drop { border: 3px dashed var(--line); padding: 36px 16px; text-align: center; outline: none; }
.pl-drop.over, .pl-drop:focus { border-color: var(--accent); background: var(--accent-soft); }
.pl-up-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.pl-up-tools .btn { padding: 6px 10px; }
.pl-seg { display: inline-flex; gap: 4px; }
.pl-up-canvas { position: relative; display: flex; justify-content: center; margin: 6px 0; touch-action: none; }
.pl-up-canvas > canvas:first-child { max-width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.pl-up-ov { position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 100%; height: auto; }
.pu-shade { fill: #000; fill-opacity: .5; pointer-events: none; }
.pu-frame { fill: transparent; stroke: #fff; stroke-width: 2; stroke-dasharray: 6 4; cursor: move; }
polygon.pu-frame { fill: var(--accent); fill-opacity: .12; stroke: var(--accent); stroke-dasharray: none; cursor: default; pointer-events: none; }
.pu-h { fill: var(--accent); stroke: #fff; stroke-width: 2; cursor: pointer; touch-action: none; }
.pu-err { fill: #ff4d5a; font-size: 13px; font-weight: 700; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.pl-loupe { position: absolute; width: 120px; height: 120px; border: 3px solid var(--accent); border-radius: 50%; pointer-events: none; background: #fff; box-shadow: 3px 3px 0 var(--shadow-c); }
.pl-up-info { font-size: .85rem; margin: 6px 0; }
.pl-up-remap { border: 2px solid var(--border); margin: 8px 0; padding: 4px 10px; }
.pu-status { min-height: 1.2em; }

/* ---- Eingebettet (Gruppen-Hub, Editionen): Seitenleiste unter der Bühne ---- */
.pl-viewer.inline .pl-body { flex-direction: column; }
.pl-viewer.inline .pl-stagebox { flex: none; height: min(62vh, 520px); }
.pl-viewer.inline .pl-panel { width: auto; position: relative; max-height: none; }

/* ---- Handy: Seitenleiste als Blatt von unten ---- */
@media (max-width: 760px) {
  .page.pl-page { padding: 6px; }
  .pl-search input { width: 150px; }
  .pl-viewer:not(.inline) .pl-panel { position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-height: 46%; z-index: 20;
    border-width: 2px 0 0; box-shadow: 0 -4px 0 var(--shadow-c); padding-top: 18px; }
  .pl-viewer:not(.inline) .pl-grip { display: block; position: absolute; top: 6px; left: 50%; width: 44px; height: 4px; margin-left: -22px; background: var(--line); }
  .pl-editor .pl-panel { max-height: 45%; }
  .pl-hint { display: none; }
  .pl-zoom { bottom: auto; top: 8px; }
  .pl-lbl { font-size: .66rem; }
}