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


/* Slider Box (nur für Breite + Positionierung */
.bg-slider-box { position: relative; width: 100%; max-width: 800px; margin: 70px auto 70px auto;}  

.bg-slider-container { position: relative; width: 100%; overflow: hidden; }
.bg-slider { position: relative; width: 100%; min-height: 300px; }

.bg-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0;
  transition: opacity 1s ease-in-out;
  }
.bg-slide.active { z-index: 1; opacity: 1; }

.bg-slide img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.bg-slide > p { position: absolute; z-index: 2; font-weight: 300; font-size: 15px; font-style: italic; color: grey;	
  text-align: center;
  width: 100%;
  bottom: -75px; /* Position Trick (siehe JS Gap)*/
  height: 50px;   
}

.one-for-all-caption { position: relative; z-index: 9; width: 100%; font-weight: 300; font-size: 15px; font-style: italic;
  text-align: center;	
  margin-top: -70px; /* Position Trick (siehe JS Gap)*/
  height: 50px; 
  text-align: center;
  color: grey;
}


/* Navigation Controls */
.slider-controls { position: absolute; z-index: 10; top: 50%; width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}

.slider-btn { position: absolute; font-family: "Assistant", Arial, sans-serif; font-size: 2.4em;     
  color: white;
  width: 55px; 
  height: 55px; 
  margin-top: -30px;  
  border-radius: 50%;
  border: none; 
  background: rgba(0, 0, 0, 0.5);
  transition: background 0.3s;
  cursor: pointer;
  pointer-events: auto;
}
.slider-btn:hover { background: rgba(0, 0, 0, 0.8); color: #f46363; }

.slider-btn-prev { left: 2%; }
.slider-btn-next { right: 2%; }

/* Control Dreieck-Symbole stylen */
.tr-prev, 
.tr-next { display: inline-block; text-align: center; padding-top: 5%; }
.tr-prev { transform: scaleX(-0.7); margin-left: -17% }  /* horizontal gespiegelt */ 
.tr-next { transform: scaleX(0.7); margin-right: -17% }




/* Optional: Responsive Controls für Mobile */
@media (max-width: 991px) {
.tr-prev, .tr-next { padding-top: 5%; }
.slider-btn {width: 50px; height: 50px; font-size: 2.2em; }
}


@media (max-width: 767px) {
.bg-slider-box {width: 80%; }
.bg-slide p, .one-for-all-caption {font-size: 14px; }
.slider-btn {width: 45px; height: 45px; font-size: 1.7em; }
}

@media (max-width: 479px) {
.bg-slider-box {width: 96%; }
.bg-slide p, .one-for-all-caption {font-size: 13px; }
.slider-controls { top: 53%; }
.slider-btn {width: 40px; height: 40px; font-size: 1.5em; }
}