*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }

.stage{
  position:fixed;
  inset:0;
  overflow:hidden;
}

.bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* Hotspot sitzt auf der Kugel (keine eigene Kugel zeichnen) */
.hotspot{
  position:absolute;
  left: var(--x, 55%);
  top:  var(--y, 76%);
  width: 140px;                 /* große Klickfläche */
  height: 140px;
  transform: translate(-50%, -50%);
  border:0;
  border-radius:999px;
  background: transparent;
  cursor:pointer;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
}

/* Debug: rote Kontur (wird per JS bei D-Taste aktiviert) */
.hotspot.debug{
  outline: 2px dashed rgba(255,0,0,0.65);
  background: rgba(255,0,0,0.06);
}

/* Glitzer nur auf der Kugel (klein, zentriert) */
.hotspot::before,
.hotspot::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 64px;                 /* sichtbarer Effektbereich */
  height: 64px;
  transform: translate(-50%, -50%) scale(1);
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transition: opacity 160ms ease, transform 180ms ease, filter 180ms ease;
}

/* goldener Glow (klein) */
.hotspot::before{
  background: radial-gradient(circle at 35% 30%,
    rgba(255,255,255,0.55),
    rgba(210,178,118,0.55) 38%,
    rgba(175,138,72,0.18) 62%,
    rgba(255,255,255,0.00) 74%
  );
  filter: blur(2px);
  mix-blend-mode: screen;
}

/* Funkeln: wenige “Sternchen” über box-shadow (sieht nicht nach Punkten-Muster aus) */
.hotspot::after{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  box-shadow:
    18px -16px 0 rgba(255,255,255,0.85),
    -20px -6px 0 rgba(210,178,118,0.85),
    22px 10px 0 rgba(255,255,255,0.70),
    -14px 18px 0 rgba(255,255,255,0.65),
    0px 26px 0 rgba(210,178,118,0.55),
    -26px 6px 0 rgba(255,255,255,0.55);
  filter: blur(0.2px);
  animation: twinkle 900ms ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes twinkle{
  0%,100% { opacity: 0.70; transform: translate(-50%, -50%) scale(1); }
  50%     { opacity: 1.00; transform: translate(-50%, -50%) scale(1.08); }
}

/* Aktiv (Hover oder JS “near”) => größer + sichtbar */
.hotspot:hover::before,
.hotspot:hover::after,
.hotspot.is-hot::before,
.hotspot.is-hot::after{
  opacity:1;
  transform: translate(-50%, -50%) scale(1.35);
}

/* Overlay */
.overlay{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background: rgba(160,175,190,0.20);
  backdrop-filter: blur(16px);
  opacity:0;
  pointer-events:none;
  transition: opacity 220ms ease;
  z-index: 100;
}
.overlay.active{ opacity:1; pointer-events:auto; }

.modal{
  width: min(360px, 90vw);
  padding: 2.6rem 2.2rem 2.2rem;
  border-radius: 26px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(24px);
  box-shadow: 0 25px 70px rgba(0,0,0,0.12);
  position: relative;
  text-align: center;
  font-family: system-ui, sans-serif;
}

.close{
  position:absolute; top:1rem; right:1.2rem;
  background:none; border:0; cursor:pointer;
  color:#999; font-size:1rem;
}

.modal h2{
  font-weight:500;
  font-size:.9rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#666;
  margin-bottom:1.6rem;
}

.modal input{
  width:100%;
  padding:.9rem 1rem;
  border-radius:14px;
  border:1px solid rgba(210,178,118,0.25);
  background: rgba(255,255,255,0.65);
  margin-bottom:.8rem;
  outline:none;
}

.submit{
  width:100%;
  padding:1rem;
  border:0;
  border-radius:14px;
  cursor:pointer;
  background: linear-gradient(135deg, rgba(210,178,118,0.90), rgba(175,138,72,0.90));
  color:#fff;
  letter-spacing:.12em;
  text-transform:uppercase;
}