/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

/* Vollbild-Stage (auch auf Mobile stabil) */
.stage {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100dvh; /* dynamischer Viewport (besser auf Mobile) */
}

/* Zentrier-Wrap: echte Mitte über translate */
.mark {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 900px;              /* Referenzgröße */
  aspect-ratio: 744 / 360;

  transform: translate(-50%, -50%) scale(0.2);
  transform-origin: center center;
}

/* Shapes */
.mark > div {
  position: absolute;
  background: #fff;
}

/* Links oben */
.lt { left: 0%; top: 0%; width: 33.6%; height: 38.3%; }
/* Links unten */
.lb { left: 10.75%; top: 59.44%; width: 22.7%; height: 19.44%; }
/* Mitte */
.c  { left: 44.35%; top: 0%; width: 11.29%; height: 100%; }
/* Rechts oben */
.rt { left: 66.4%; top: 0%; width: 33.6%; height: 38.3%; }
/* Rechts unten */
.rb { left: 66.4%; top: 59.44%; width: 22.7%; height: 19.44%; }