/* Modul: Hero */

.hero-slider-container {
  background-color: var(--darkgrey-color);
}

.hero-left{
  background-color: var(--darkgrey-color);
}

.hero-image-filter {
  background-color: var(--darkgrey-color);
}

.hero-fit .hero-headline h1 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  font-size: 3em;
}

.hero-teaser {
  font-size: 1.3125em;
}

.hero-pagination li {
  font-size: 1.3125em;
}

.hero-pagination li:after {
  color: var(--white-color);
}

.hero-pagination li button {
  color: var(--white-color);
}

.hero-pagination li.slick-active button {
  color: var(--accent2-color);
}

.slick-slider .hero-pagination button:hover {
  color: var(--accent2-color);
}





/* Tablet Portrait */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {


  /* Hero */

  .hero-dach {
    font-size: 14px;
  }

  .hero-headline h1,
  .hero-fit .hero-headline h1 {
    font-size: 2.5em;
  }

  .hero-teaser {
    font-size: 16px;
  }

  .hero-pagination li {
    font-size: 16px;
  }

  .hero-pagination li:after {
    font-size: 16px;
  }



}


/* Tablet Landscape */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  .hero-headline h1,
  .hero-fit .hero-headline h1 {
    font-size: 3em;
  }

  .hero-teaser {
    font-size: 1.125em;
  }

}


/* Mobile Portrait */
@media only screen and (max-width: 767px) {


  /* Hero */

  .hero-fit .hero-left .hero-headline h1 {
    font-size: 38px;
  }

  .hero-slide.noslide .hero-left ul li.checkbig {
    line-height: 1;
  }

  .hero-dach p {
    font-size: 13px;
  }

  .hero-teaser {
    font-size: 16px;
  }

  .hero-pagination li button {
    font-size: 16px;
  }

  .hero-pagination li:after {
    font-size: 16px;
  }

  .hero-fit .hero-headline h1 {
    font-size: 3em;
  }

  .hero-right #Hero-1 {background-size:contain;background-repeat: no-repeat;background-position: left bottom;}

}


/*Änderungen*/
 .hero-pagination li button {color: var(--white-color);}
 .hero-pagination li.slick-active button{color: var(--accent1-color);}
.hero-pagination li:after {color: var(--white-color);}

@media only screen and (min-width:1400px){
  .hero-fit .hero-left-inner, .hero-fit .hero-left-inner-noslide {max-width: calc(700px - 3em);padding-right: 2em;padding-left: 2em;}
  .hero-fit .hero-headline h1 {font-size: 4em;}
}
#Hero-1 {background-position: center bottom;}