/* /////////////////////////////////////////////////////////// */
/* BG-SLIDER CSS ------------------------------------------  */

#bg-slider { width: 100%; margin: 70px auto 100px; }

.slider { position: relative; z-index: 999; width: 75%; max-width: 1200px;
  height: auto; /* Höhe nicht fix */
  margin: 0 auto;
  background: #fff;
}
.slider::before { display: block; content: ""; padding-bottom: 50%;   /* 1:2 = 50% Höhe */
}
.slider > * { position: absolute; /* ! */ top: 0; left: 0; width: 100%; height: 100%; }

.slider ul li { position: absolute; z-index: 10; display: block; left: 0; top: 0; width: 100%; height: 100%; list-style: none; }
.slider ul li p { position: relative; width: 100%; }
.slider ul li .bg-title { position: absolute; z-index: 999; bottom: -85px; padding-bottom: 30px; text-align: center; 
	font-size: 0.9em; 
	font-weight: 300; 
	font-style: italic; 
	color: grey; 
	}

.slider .arrow { position: absolute; z-index: 2000; top: 0; left: 0; width: 100%; height: 100%; transition: background .5s, opacity .5s; }
.slider .arrow-left, 
.slider .arrow-right { position: absolute; display: block; top: 50%; margin-top: -5px; 
	width: 40px; 
	height: 40px; 
	opacity: 0.5; 
	cursor: pointer; 
	transition: background .5s, opacity .5s; 
	}
.slider .arrow-left:hover, 
.slider .arrow-right:hover { opacity: 1; }

.slider .arrow-left { left: 40px; background: url("../pix/controls/bg-arrow-left.png") no-repeat center / cover; }
.slider .arrow-right { right: 40px; background: url("../pix/controls/bg-arrow-right.png") no-repeat center / cover; }


/* Für Hauptslider (#bg-slider) */
#bg-slider .arrow { opacity: 0; transition: opacity .5s; }
#bg-slider:hover .arrow { opacity: 1; }


/* Media Queries -----------------------------------  */

@media screen and (max-width: 1199.98px) {
.slider::before { padding-bottom: 60%; }
}

@media screen and (max-width: 991.98px) {
.slider::before { padding-bottom: 65%; }
}


@media screen and (max-width: 767.98px) {
#bg-slider { margin: 50px auto 60px; }
.slider::before { padding-bottom: 75%; }
}

@media screen and (max-width: 575.98px) {
#bg-slider { margin: 40px auto 60px; }
.slider { width: 85%; }
.slider::before { padding-bottom: 85%; }
.slider .arrow-left, .slider .arrow-right { margin-top: -15px; width: 35px; height: 35px; }
.slider .arrow-left { left: 10px; }
.slider .arrow-right { right: 10px; }
}

@media screen and (max-width: 480px) {
#bg-slider { margin: 40px auto 60px; }
.slider { width: 100%; }
.slider::before { padding-bottom: 100%; }
.slider .arrow-left { left: 5px; }
.slider .arrow-right { right: 5px; }
}

@media screen and (max-width: 375px) {
#bg-slider { margin-top: 50px; }
.slider::before { padding-bottom: 100%; }
.slider .arrow-left, .slider .arrow-right { margin-top: -10px; width: 30px; height: 30px; }
.slider .arrow-left { left: 0; }
.slider .arrow-right { right: 0; }
.slider ul li .bg-title { bottom: -13vw; padding-bottom: 0; }
}