:root{
  --tooltip-bg:rgba(0,0,0,.88);
  --text:#fff;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#000;font-family:Arial,Helvetica,sans-serif}
#panorama{position:absolute;inset:0;background:#000}
#areaOverlay{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none}
.area-shape{pointer-events:auto;cursor:pointer;fill:transparent;stroke:transparent}
.area-shape.hover-enabled:hover{fill:var(--hover-fill)}
.area-shape.nadir-hover-fill:hover{fill:var(--nadir-hover-fill)}
.area-shape.nadir-hover-stroke:hover{stroke:var(--nadir-hover-stroke);stroke-width:var(--nadir-hover-stroke-width)}
.area-shape.area-panning{cursor:grabbing}
.area-shape{cursor:grab}

.pnlm-hotspot-base.lp-hotspot,
.pnlm-hotspot-base.lp-info-hotspot{z-index:26!important;margin-left:-11px!important;margin-top:-11px!important}

.lp-hotspot{
  width:22px;height:22px;border-radius:50%;
  display:grid!important;place-items:center;
  border:2px solid rgba(255,255,255,.95);
  background:rgba(0,0,0,.42);
  box-shadow:0 1px 5px rgba(0,0,0,.65);
  cursor:pointer;
}
.lp-hotspot::after{content:"";width:5px;height:5px;border-radius:50%;background:#fff}
.lp-info-hotspot{
  width:22px;height:22px;border-radius:50%;
  background:#111;color:#fff;border:1px solid #fff;
  display:grid!important;place-items:center;
  font:bold 14px Georgia,serif;cursor:pointer;
}
.lp-info-hotspot::after{content:"i"}

#hotspotTooltip{
  position:absolute;z-index:60;left:0;top:0;
  transform:translate(-50%,calc(-100% - 16px));
  padding:7px 10px;border-radius:5px;
  background:var(--tooltip-bg);color:#fff;
  font-size:13px;line-height:1.2;white-space:nowrap;
  opacity:0;visibility:hidden;pointer-events:none;
  box-shadow:0 3px 12px rgba(0,0,0,.35);
}
#hotspotTooltip::after{
  content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:6px solid rgba(0,0,0,.88)
}
#hotspotTooltip.visible{opacity:1;visibility:visible}

#infoDialog{
  border:0;padding:0;border-radius:8px;
  background:rgba(0,0,0,.88);color:#fff;
  width:min(520px,calc(100vw - 40px));
  box-shadow:0 12px 42px rgba(0,0,0,.55)
}
#infoDialog::backdrop{background:rgba(0,0,0,.36)}
.info-box{position:relative;padding:24px 48px 25px 24px;margin:0}
.info-box h3{margin:0 0 12px;font-size:20px}
#infoText{white-space:pre-wrap;line-height:1.5;color:#eee}
#infoLink{display:inline-block;margin-top:16px;color:#fff;text-decoration:underline;overflow-wrap:anywhere}
#infoClose{
  position:absolute;right:12px;top:10px;
  width:32px;height:32px;padding:0;border:0;border-radius:50%;
  color:#fff;background:transparent;font-size:26px;line-height:1;cursor:pointer
}
#infoClose:hover{background:rgba(255,255,255,.12)}
#infoClose:focus-visible{outline:2px solid #fff;outline-offset:1px}

.pnlm-panorama-info{background:rgba(0,0,0,.65)!important}
.pnlm-title-box,.pnlm-author-box{color:#fff!important}

#tourFullscreenBtn{
  position:absolute;z-index:80;left:4px;top:76px;width:28px;height:28px;
  padding:0;border:1px solid #bbb;border-radius:2px;background:#fff;color:#111;
  font-size:20px;line-height:24px;cursor:pointer
}
#tourFullscreenBtn:hover{background:#eee}
.area-shape.hover-active.hover-enabled{fill:var(--hover-fill)!important}

.hotspot-top-proxy{pointer-events:none}
.hotspot-top-proxy-ring{fill:rgba(0,0,0,.42);stroke:rgba(255,255,255,.95);stroke-width:2}
.hotspot-top-proxy-dot{fill:#fff}
.hotspot-top-proxy-info{fill:#fff;font:700 14px Georgia,serif;user-select:none}
.hotspot-top-proxy-hit{fill:transparent;stroke:none;pointer-events:all;cursor:pointer}


/* Smartphone / Touch: ausschließlich Hotspots.
   Polygonflächen und Klickkreise sind weder sichtbar noch touch-aktiv. */
html.mobile-hotspots-only .area-shape.area-circle,
html.mobile-hotspots-only .area-shape.area-polygon{
  display:none!important;
  pointer-events:none!important;
}
html.mobile-hotspots-only .hotspot-top-proxy-hit{
  r:22;
}


/* Touch-Nadir-Bestätigung:
   Ein erster Tipp zeigt nur die Sprechblase. Erst OK / Sprechblase öffnet den Link. */
.touch-nadir-prompt{
  position:absolute;
  z-index:90;
  left:50%;
  bottom:20px;
  transform:translateX(-50%) translateY(12px);
  display:flex;
  align-items:center;
  gap:12px;
  max-width:min(88vw,520px);
  padding:10px 12px 10px 14px;
  border-radius:8px;
  background:rgba(0,0,0,.88);
  color:#fff;
  font-size:14px;
  line-height:1.3;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;
}
.touch-nadir-prompt.visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.touch-nadir-prompt span{
  min-width:0;
  overflow-wrap:anywhere;
}
.touch-nadir-prompt button{
  flex:0 0 auto;
  min-width:44px;
  min-height:36px;
  padding:6px 12px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:5px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.touch-nadir-prompt button:active{
  background:rgba(255,255,255,.22);
}
@media (hover:hover) and (pointer:fine){
  .touch-nadir-prompt{display:none!important}
}