CSS


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #1f0e24;
  overflow-x: hidden; /* Verhindert seitliches Scrollen */
  overflow-y: auto;   /* Erlaubt normales Scrollen nach unten am Desktop */
}

/* === 1. DESKTOP & QUERFORMAT (100% Breite, nichts abgeschnitten, scrollbar) === */
.stage {
  position: relative;
  width: 100%;
}

.interactive-svg {
  width: 100%;
  height: auto; /* Berechnet die volle 16:9-Höhe automatisch ohne Abschneiden */
  display: block;
}

/* === 2. HANDY & HOCHFORMAT (Fixiertes Vollbild wie bisher) === */
@media (orientation: portrait) {
  html, body {
    height: 100%;
    overflow: hidden; /* Auf dem Handy kein Scrollen nötig */
  }

  .stage {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
  }

  .interactive-svg {
    width: 100%;
    height: 100%;
  }
}

/* === HOVER- & LEUCHTEFFEKTE === */
.hover-zone {
  fill: url(#warm-glow);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.3s ease, filter 0.3s ease;
  pointer-events: all;
  -webkit-tap-highlight-color: transparent;
}

.hover-zone:hover,
.hover-zone:active {
  opacity: 1;
  filter: url(#soft-edge) drop-shadow(0 0 15px rgba(255, 230, 160, 0.75));
}

.footer-zone:hover,
.footer-zone:active {
  filter: url(#soft-edge) drop-shadow(0 0 8px rgba(255, 240, 190, 0.95));
}