/* Bg-Slider ------------------------------------------------ */

#bg-box {position: relative; width: 100%; padding-top: 100%; /* quadratisch */
padding-bottom: 120px; /* für Captions */
margin: 0 0 100px; 
overflow: hidden;
}
.bg-slider {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.bgslide {position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-size: contain; /* oder cover, je nach Wunsch */
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  -webkit-transition: opacity 1.2s ease-in-out;
  -moz-transition: opacity 1.2s ease-in-out;
  -o-transition: opacity 1.2s ease-in-out;
  transition: opacity 1.2s ease-in-out;
}

.bgslide.active { opacity: 1; }

.bg-caption { position: absolute; width: 100%; bottom: -10px; text-align: center; font-style: italic; font-weight: 300; color: grey; }



/* M E D I A  Q U E R I E S  ----------------------------------- */

@media (max-width: 480px) {
.bg-caption {bottom: -25px; }
}

@media (max-width: 375px) {
#bg-box {padding-bottom: 130px; }
.bg-caption {bottom: -20px; }
}