/* ------------------------------------------------------------------
   rundgang.css – gehört zu rundgang.js

   Wichtig: Alle Regeln, die Illustrator-Stile überschreiben müssen,
   sind zweistufig (.psv-tour__svg .psv-node). Die <style>-Angaben
   im SVG stehen im Body und würden einstufige Selektoren sonst
   schlagen, egal in welcher Reihenfolge das CSS geladen wird.
   ------------------------------------------------------------------ */

.psv-tour {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 360px;
  background: #000;
}

.psv-tour__viewer { position: absolute; inset: 0; }

.psv-tour__error {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  margin: 0; padding: 1rem;
  color: #a09a90; text-align: center;
}

/* --- Grundriss-Panel ----------------------------------------------
   Hell, weil der Plan mit schwarzen Linien gezeichnet ist.
   ------------------------------------------------------------------ */

.psv-tour__plan {
  position: absolute;
  left: 12px;
  bottom: 52px;                 /* oberhalb der PSV-Navbar */
  z-index: 90;
  width: min(340px, 48vw);
  margin: 0;
  padding: 12px 12px 8px;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}

.psv-tour--plan-open .psv-tour__plan {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .psv-tour__plan { transition: none; }
}

.psv-tour__svg svg { display: block; width: 100%; height: auto; }

.psv-tour__caption {
  margin: 10px 2px 2px;
  font-size: .8rem;
  line-height: 1.35;
  color: #51798d;
}

/* --- Standpunkte ---------------------------------------------------- */

.psv-tour__svg .psv-node {
  fill: #009de0;
  stroke: none;
  cursor: pointer;
  transition: fill .15s;
}

.psv-tour__svg .psv-node * {
  fill: inherit;
  stroke: none;
}

.psv-tour__svg circle.psv-hit {
  fill: transparent;
  stroke: none;
  cursor: pointer;
}

.psv-tour__svg .psv-hit:hover + .psv-node,
.psv-tour__svg .psv-node:hover { fill: #cc291b; }

.psv-tour__svg .psv-hit:focus-visible { outline: none; }
.psv-tour__svg .psv-hit:focus-visible + .psv-node { fill: #cc291b; }

.psv-tour__svg .psv-node.is-active { fill: #cc291b; }

/* --- Blickrichtungskegel --------------------------------------------- */

.psv-tour__svg .psv-cone {
  fill: #cc291b;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}

.psv-tour__svg .psv-cone path { fill: inherit; stroke: none; }
.psv-tour__svg .psv-cone.is-active { opacity: .3; }

/* --- Navbar-Schaltflächen ----------------------------------------------
   PSV skaliert eigene Buttons nicht selbst; Größe und Farbe hier.
   ------------------------------------------------------------------ */

.psv-tour .psv-tour__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.psv-tour .psv-tour__nav svg {
  width: 22px;
  height: 22px;
  display: block;
}

.psv-tour .psv-tour__nav--plan svg {
  width: 30px;
  height: 30px;
}

/* --- Ladezustand ------------------------------------------------------ */

.psv-tour.is-loading .psv-tour__plan { pointer-events: none; }
.psv-tour.is-loading .psv-node.is-active { fill: #b2d7ec; }
.psv-tour.is-loading .psv-cone.is-active { opacity: .12; }