/* Ersatz fuer Planeten.swf (Flash, 600x580 px, 21 fps).
   Alle Koordinaten stammen unveraendert aus der SWF-Datei; skaliert wird
   ausschliesslich ueber die Variable --planeten-s, die planeten.js setzt.
   Saemtliche Namen sind mit "planeten-" praefixiert, damit sie nicht mit dem
   uebrigen Stylesheet der Website kollidieren. */

.planeten-wrap {
  width: 100%;
  /* Referenzbreite fuer die Skalierung. Kein eigener Hintergrund, damit sich
     der Block in das Layout der Seite einfuegt. */
}

.planeten-fit {
  width: calc(600px * var(--planeten-s, 1));
  height: calc(580px * var(--planeten-s, 1));
  margin: 0 auto;
}

.planeten-stage {
  position: relative;
  width: 600px;
  height: 580px;
  background: #000066;
  overflow: hidden;
  transform: scale(var(--planeten-s, 1));
  transform-origin: top left;
}

.planeten-stage div,
.planeten-stage img {
  position: absolute;
}

/* Weisser Lichthof: im Original ein radialer Verlauf weiss -> transparent,
   der in jedem Symbol hinter dem Bitmap liegt. */
.planeten-glow {
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
              rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Ein Planet wird als Ganzes bewegt; Hof und Bitmap sitzen relativ dazu. */
.planeten-planet { left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.planeten-planet .planeten-glow { width: 92.3px; height: 92.3px; }
.planeten-planet img { left: -30px; top: -30px; }

/* Z-Reihenfolge exakt wie die Depths in der SWF: der aeussere Planet liegt
   ueber den inneren, die Sonne ueber allem. */
#planeten-text    { z-index: 1; left: 120.95px; top: 460.55px; width: 351.1px; height: 32.4px; }
#planeten-planet5 { z-index: 2; }
#planeten-planet4 { z-index: 3; }
#planeten-planet3 { z-index: 4; }
#planeten-sun     { z-index: 16; }

#planeten-sun img            { left: 225px; top: 217.95px; }
#planeten-sun .planeten-glow { left: 299px; top: 287.9px; width: 219.5px; height: 219.5px; }

/* Startwerte fuer Frame 0 (Winkel 0 / 1 / 2 rad, Deckkraft 20 %). Damit steht
   das Bild auch dann richtig, wenn JavaScript abgeschaltet ist. */
#planeten-planet5 { transform: translate3d(300px, 430px, 0); }
#planeten-planet4 { transform: translate3d(460px, 393px, 0); }
#planeten-planet3 { transform: translate3d(519px, 191px, 0); }
#planeten-text    { opacity: .2; }