/* ============================================================
   AKT 1: DIE TÜR (fixes Overlay über der Hero)
   ============================================================ */
.doorOverlay{
  position:fixed;inset:0;z-index:110;
  pointer-events:none;
}
.doorOverlay .doorAct__sound{pointer-events:auto}
.doorAct__stage{
  position:absolute;inset:0;
  will-change:opacity;
}
#doorCanvas{position:absolute;inset:0}
#doorCanvas canvas{display:block;width:100%;height:100%}
.doorAct__vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 72% 64% at 50% 46%, transparent 48%, rgba(0,0,0,.45) 78%, rgba(0,0,0,.8) 100%);
}
.doorAct__hint{
  position:absolute;bottom:7vh;left:50%;transform:translateX(-50%);
  font-family:var(--display);
  font-size:.85rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--grey);
  animation:hintPulse 2.4s ease-in-out infinite;
  white-space:nowrap;
  z-index:3;
}
@keyframes hintPulse{0%,100%{opacity:.45}50%{opacity:1}}
.doorAct__enter{
  position:absolute;bottom:13vh;left:50%;transform:translateX(-50%);
  z-index:4;pointer-events:auto;
  font-family:var(--display);
  font-size:.95rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--purple);color:var(--black);
  border:0;cursor:pointer;
  padding:13px 28px;
  box-shadow:4px 4px 0 var(--purple-deep);
  transition:background .15s,opacity .3s;
}
.doorAct__enter:hover{background:var(--purple-hot)}
.doorAct__sound{
  position:absolute;top:20px;right:22px;z-index:5;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);
  border:1px solid var(--line);
  background:rgba(20,19,22,.5);cursor:pointer;
  padding:8px 14px;
}
.doorAct__sound[aria-pressed="true"]{color:var(--purple-hot);border-color:var(--purple)}