body{ margin:0; }

.debug{
        position: absolute; left: 8px; top: 8px; padding: 6px 8px;
        background: rgba(0,0,0,.4); color:#fff; font: 12px/1.3 sans-serif; border-radius:6px;
        pointer-events: none; /* wichtig: blockiert keine Klicks */
      }
      
      /* === Scroll-Panel Overlay (sichtbar über der 3D-Leinwand) === */

/* Wähle, was bei dir passt — am besten alle drei Selektoren lassen */
#scroll-panel,
.scroll-panel,
[data-role="scroll-panel"] {
  position: fixed;    /* überlagert die Seite, unabhängig vom Scroll */
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2000;      /* sicher über dem A-Frame Canvas */
  display: none;      /* Standard: versteckt, bis geöffnet */
  pointer-events: auto;
  box-sizing: border-box;
}

/* Zustand „offen“ – wenn dein JS eine Klasse setzt */
#scroll-panel.open,
.scroll-panel.open,
[data-role="scroll-panel"].open {
  display: block;
}

/* Falls dein Panel ein zentriertes Innen-Fenster rendert: */
#scroll-panel .scroll-dialog,
.scroll-panel .scroll-dialog,
[data-role="scroll-panel"] .scroll-dialog {
  max-width: min(800px, 90vw);
  max-height: min(80vh, 900px);
  margin: 5vh auto;
  overflow: auto;
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 12px;
}