/**
 * Kollegiumteaser Block Styles
 * Swiper.js Slider mit Custom-Styling
 */

.kollegium-block-content{
  text-align: center;
}

.kollegium__wrapper.videoteaser{
  position:relative;
  height:650px;
  overflow:hidden;
}

.kollegium__wrapper.personteaser .col-md-6{
  margin-bottom:30px;
}
.kollegium__wrapper.personteaser .item{
  background:var(--white);
  height:100%;
}

.kollegium__wrapper.personteaser .item span{
  display:block;
}
.kollegium__wrapper.personteaser .item .person-hover span{
  display:block;
  color: #fff ;
}
.kollegium__wrapper.personteaser .item .name{
  font-size:135%;
  font-weight:800;
  margin-bottom:5px;
  padding: 15px;
}
.kollegium__wrapper.personteaser .item .title{
  font-size:100%;
  font-weight:700;
  margin-bottom:5px;
  margin-top:15px;
}
.kollegium__wrapper.personteaser .item .faecher{
  min-height:45px;
}
.kollegium__wrapper.personteaser .item .email{
  font-size:100%;
  font-weight:400;
  margin-bottom:5px;
  margin-top:15px;
  display:block;
  color: #fff;
  padding-left:30px;
  position:relative;
}
.kollegium__wrapper.personteaser .item .email:before{content: '';
  display: block;
  height: 14px;
  width: 20px;
  background: url('../../assets/img/mail.svg') no-repeat center center;
    background-size: auto;
  background-size: cover;
  position: absolute;
  top: 6px;
  left: 0;
}


.kollegium-block-videoteaser .kollegium-block-content .kollegium-topline,
.kollegium-block-videoteaser .kollegium-block-content .kollegium-headline,
.kollegium-block-videoteaser .kollegium-block-content .kollegium-content p{
  color:var(--white);
}


.kollegium__wrapper .swiper{
  padding:35px 0 75px;
  position:absolute;
  top:0;
  left:-100px;
  width:calc(100vw + 200px);
}

.kollegium__wrapper .swiper-slide{
  height:auto;
}
.kollegium__wrapper .swiper-slide .item{
  background-color:var(--white);
  height:525px;
}
.kollegium__wrapper .swiper-slide .item .teaserbild{
  width:100%;
  height:535px;
  border:none;
  position:relative;
}
.kollegium__wrapper .swiper-slide .item .teaserbild::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
  z-index: 4;
  pointer-events: none;
  opacity: 0.75;
}
.kollegium__wrapper .swiper-slide .item .teaserbild .bildunterschrift{
  position: absolute;
  bottom: 25px;
  left: 25px;
  color: var(--white);
  font-size:125%;
  font-weight:700;
  width:calc(100% - 50px);
  z-index: 9;
  text-align:left;
}
.kollegium__wrapper .swiper-slide .item .teaserbild img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.kollegium__wrapper .swiper-slide .item .modal{
  display:none;
}

.kollegium__wrapper .swiper-slide .item video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.kollegium__wrapper .swiper-pagination{
  position:absolute;
  bottom:15px!important;
  right:15%;
  left:unset;
  transform:unset;
  z-index:5;
  text-align:center;
  width:100%!important;
}
.kollegium__wrapper .swiper-pagination .swiper-pagination-bullet{
  transform:none;
  width:40px;
  height:10px;
  border-radius:5px;
  background:var(--brand-secondary-color-lightest);
  transition:all 0.3s ease;
  left:0!important;
  opacity:1;
}
.kollegium__wrapper .swiper-pagination .swiper-pagination-bullet-active{
  width:80px;
  background:var(--brand-accent-color);
  transition:all 0.3s ease;
}
.kollegium__wrapper .swiper-button-prev{
  top:unset;
  left:unset;
  bottom:0;
  right:calc(70% - 55px);
  background:url('../../assets/img/arrow-left-slider.svg') no-repeat center center;
  width:55px;
  height:40px;
  box-shadow:none;
  filter: brightness(0) invert(1);
}
.kollegium__wrapper .swiper-button-next{
  top:unset;
  left:unset;
  bottom:0;
  right:30%;
  background:url('../../assets/img/arrow-right-slider.svg') no-repeat center center;
  width:55px;
  height:40px;
  box-shadow:none;
  filter: brightness(0) invert(1);
}
.kollegium__wrapper .swiper-button-prev:after,
.kollegium__wrapper .swiper-button-next:after{
  display:none;
}


.video-modal {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.video-modal.is-open {
    display: flex;
}

.video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

.video-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
}

.video-modal__content {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.video-modal__video,
.video-modal__iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}

.video-modal__video[hidden],
.video-modal__iframe[hidden] {
    display: none;
}

.video-modal__close {
    position: absolute;
    z-index: 2;
    top: -45px;
    right: 0;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 42px;
    line-height: 1;
    cursor: pointer;
}

body.video-modal-open {
    overflow: hidden;
}

.kollegiumteaser .person-bild{
  position: relative;
  overflow: hidden;
}

.kollegiumteaser .person-bild img{
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.kollegiumteaser .person-hover{
  opacity: 0;
  visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 100%;
  height: 100%;
  padding: 15px 15px 20px;
  background-color: color-mix(
      in srgb,
      var(--brand-accent-color) 60%,
      transparent
  );
  transition: opacity .3s ease, visibility .3s ease;
}

.kollegiumteaser .person-bild:hover .person-hover{
  opacity: 1;
  visibility: visible;
}

/* Responsive */



@media (max-width: 991px) {

  .kollegium__wrapper .swiper{
    left:15px;
    width:calc(100vw - 30px);
  }

}

/* -------------------------------------------------------------------------------------------------------------------------------- */

@media (max-width: 1480px) {

  .kollegium__wrapper .swiper-button-prev{right: calc(75% - 55px);}
  .kollegium__wrapper .swiper-button-next{right: unset;left: calc(75% - 55px);}
  
}

@media (max-width: 1199px) {

}

@media (max-width: 991px) {

  .kollegium__wrapper .swiper-button-prev{right: calc(100% - 55px);}
  .kollegium__wrapper .swiper-button-next{left: calc(100% - 55px);}

}

@media (max-width: 767px) {

  .kollegium__wrapper.personteaser .item .name{font-size: 120%;}

}

@media (max-width: 600px) {

  .kollegium__wrapper .swiper-pagination{width: 50%!important;}
  .kollegiumteaser .person-bild img{height: 450px;}

}

@media (max-width: 400px) {

}