/* ==========================================================================
   Lageplan (SVG): ruhige Farblogik – Freies leuchtet, Vermietetes tritt zurück.
   Wird nur auf Seiten mit Plan geladen (Objektseite, Verwaltung).
   ========================================================================== */
:root {
  --plan-bg: #f3f4ee;
  --plan-dot: #cdd3c8;
  --plan-line: #c6cdc1;
  --free: #2f9e62;
  --free-line: #1f7a49;
  --held: #e8a93a;
  --held-line: #bf8218;
  --held-ink: #3b2a05;
  --taken: #d7dce4;
  --taken-line: #b6bec9;
  --taken-ink: #566070;
}
@media (prefers-color-scheme: dark) {
  :root {
    --plan-bg: #16201d; --plan-dot: #2b3a35; --plan-line: #34453f;
    --free: #3dbb7b; --free-line: #2c8d5b;
    --held: #d9a037; --held-line: #a87a1c; --held-ink: #2a1e03;
    --taken: #3a4552; --taken-line: #566273; --taken-ink: #c6cfdb;
  }
}

.plan-card { padding: 14px; background: linear-gradient(180deg, var(--surface), var(--bg)); }
.plan-wrap { position: relative; }
.plan { width: 100%; height: auto; display: block; border-radius: 10px; touch-action: manipulation; background: var(--plan-bg); box-shadow: inset 0 0 0 1px var(--line); }
.plan.zoomed { touch-action: none; cursor: grab; }
.plan.zoomed:active { cursor: grabbing; }
.plan.editable { touch-action: none; cursor: crosshair; user-select: none; }
.plan-ground { fill: var(--plan-bg); }
.plan-dot { fill: var(--plan-dot); }
.plan-frame { fill: color-mix(in srgb, var(--surface) 55%, transparent); stroke: var(--plan-line); stroke-width: 1.5; }
.plan-caption { fill: var(--muted); font-weight: 650; letter-spacing: .02em; }

.plan-tools { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
.plan-tool { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.plan-tool:hover { border-color: var(--brand); }

/* ---- Einheiten ---- */
.unit { outline: none; }
.unit-rect { stroke-width: 1.5; cursor: pointer; transition: fill-opacity .15s, stroke-width .15s, filter .15s; }
.plan.editable .unit-rect { cursor: move; }
.unit.status-available .unit-rect { fill: var(--free); stroke: var(--free-line); }
.unit.status-reserved .unit-rect { fill: var(--held); stroke: var(--held-line); }
.unit.status-rented .unit-rect { fill: var(--taken); stroke: var(--taken-line); }
.plan.has-image .unit-rect { fill-opacity: .62; }
.plan.has-image .unit.status-rented .unit-rect { fill-opacity: .5; }

.unit-label { fill: #fff; font-weight: 650; letter-spacing: .01em; pointer-events: none; }
.unit-size { fill: #fff; opacity: .9; font-weight: 500; pointer-events: none; }
.unit.status-reserved .unit-label, .unit.status-reserved .unit-size { fill: var(--held-ink); }
.unit.status-rented .unit-label, .unit.status-rented .unit-size { fill: var(--taken-ink); }
.plan.has-image .unit.status-rented .unit-label { fill: #3b4452; }

.unit:hover .unit-rect { filter: brightness(1.06); stroke-width: 2.5; }
.unit:focus-visible .unit-rect { stroke: var(--accent); stroke-width: 4; }
.unit.selected .unit-rect { stroke: var(--ink); stroke-width: 3.5; }
.unit.dim { opacity: .2; }

/* Hallensegmente: dünner, damit Raster und Zeichnung dahinter lesbar bleiben */
.unit.kind-segment .unit-rect { stroke-width: 1; }
.unit.kind-segment .unit-label { font-weight: 600; }

/* Auswahl und Leuchten (Zufahrt + angrenzende Segmente) */
.unit.picked .unit-rect { stroke: var(--accent); stroke-width: 4; fill-opacity: 1; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 60%, transparent)); }
.unit.candidate .unit-rect { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 8 5; fill-opacity: .9; animation: unit-glow 1.4s ease-in-out infinite; }
@keyframes unit-glow { 0%, 100% { stroke-opacity: .35; } 50% { stroke-opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .unit.candidate .unit-rect { animation: none; stroke-opacity: 1; } }

/* Editor */
.ghost { fill: color-mix(in srgb, var(--accent) 25%, transparent); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
.handle { fill: #fff; stroke: #111; stroke-width: 2; cursor: nwse-resize; }

/* ---- Legende ---- */
.legend { display: flex; gap: 8px 18px; flex-wrap: wrap; padding: 14px 4px 2px; font-size: .88rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1.5px solid transparent; }
.swatch.available { background: var(--free); border-color: var(--free-line); }
.swatch.reserved { background: var(--held); border-color: var(--held-line); }
.swatch.rented { background: var(--taken); border-color: var(--taken-line); }
.swatch.picked { background: var(--accent); }
.swatch.candidate { background: transparent; border: 2px dashed var(--accent); }