div#quad {
  background-color: none;
  font-size: 0;
  width: 60vw;
  margin: 5vh auto;
  box-shadow: 0 0 0 rgba(0,0,0,0.8);
}
div#quad figure {
  margin: 0;
  width: 30vw;
  height: auto;
  transition: 1s;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
div#quad figure:hover { cursor: pointer; z-index: 4; }
div#quad figure img {
  width: 100%;
  height: auto;
  /*Aufheben der .dark img Configuration */
  border: 0;
  border-radius: 0;
  padding: 0;
  display:block;
  margin-left: 0;
  margin-right: 0;
  background: none;
  box-shadow: 0;
}
div#quad figure:nth-child(1) { transform-origin: top left; }
div#quad figure:nth-child(2) { transform-origin: top right; }
div#quad figure:nth-child(3) { transform-origin: bottom left; }
div#quad figure:nth-child(4) { transform-origin: bottom right; }
div#quad figure figcaption {
  margin: 0; opacity: 0;
  background: rgba(0,0,0,0.3);
  color: #fff;
  padding: .3rem;
  font-size: 1.5vw;
  position: absolute;
  bottom: 0;
  width: 60vw;
	transition: 1s 1s opacity;
}
.expanded { transform: scale(2); z-index: 5;  }
div#quad figure.expanded figcaption { opacity: 1; }
div.full figure:not(.expanded) { pointer-events: none; }