header {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-align: center;
}

header:before {
	-webkit-animation: pop-in 3s 2.0s cubic-bezier(0, 0.5, 0, 1) forwards;
	animation: pop-in 3s 2.0s cubic-bezier(0, 0.5, 0, 1) forwards;
	animation-duration: 3s;
	
  bottom: 0;
	content: "";
  left: 0;
	opacity: 0;
	position: absolute;
  right: 0;
  top: 0;
	z-index: -1;
}

#home header.t1:before {background-image: url(../img/titelbilder/home_lg_1.jpg);}
#home header.t2:before {background-image: url(../img/titelbilder/home_lg_2.jpg);}
#home header.t3:before {background-image: url(../img/titelbilder/home_lg_3.jpg);}
#home header.t4:before {background-image: url(../img/titelbilder/home_lg_4.jpg);}
#home header.t5:before {background-image: url(../img/titelbilder/home_lg_5.jpg);}

#ueberuns header.t1:before {background-image: url(../img/titelbilder/ueberuns_lg_1.jpg);}
#ueberuns header.t2:before {background-image: url(../img/titelbilder/ueberuns_lg_2.jpg);}
#ueberuns header.t3:before {background-image: url(../img/titelbilder/ueberuns_lg_3.jpg);}
#ueberuns header.t4:before {background-image: url(../img/titelbilder/ueberuns_lg_4.jpg);}
#ueberuns header.t5:before {background-image: url(../img/titelbilder/ueberuns_lg_5.jpg);}

#service header.t1:before {background-image: url(../img/titelbilder/service_lg_1.jpg);}
#service header.t2:before {background-image: url(../img/titelbilder/service_lg_2.jpg);}
#service header.t3:before {background-image: url(../img/titelbilder/service_lg_3.jpg);}
#service header.t4:before {background-image: url(../img/titelbilder/service_lg_4.jpg);}
#service header.t5:before {background-image: url(../img/titelbilder/service_lg_5.jpg);}

#home header.t1:before,
#home header.t2:before, 
#home header.t3:before,
#home header.t4:before, 
#home header.t5:before,
#ueberuns header.t1:before,
#ueberuns header.t2:before, 
#ueberuns header.t3:before,
#ueberuns header.t4:before, 
#ueberuns header.t5:before,
#service header.t1:before,
#service header.t2:before, 
#service header.t3:before,
#service header.t4:before, 
#service header.t5:before {
	background-size: cover;
	background-repeat: no-repeat;
	background-position-y: bottom;
	-webkit-filter: brightness(50%);
	filter: brightness(50%);
}


@media screen and (max-width: 767.98px) {
	#home header.t1:before {background-image: url(../img/titelbilder/home_md_1.jpg);}
	#home header.t2:before {background-image: url(../img/titelbilder/home_md_2.jpg);}
	#home header.t3:before {background-image: url(../img/titelbilder/home_md_3.jpg);}
	#home header.t4:before {background-image: url(../img/titelbilder/home_md_4.jpg);}
	#home header.t5:before {background-image: url(../img/titelbilder/home_md_5.jpg);}

	#ueberuns header.t1:before {background-image: url(../img/titelbilder/ueberuns_md_1.jpg);}
	#ueberuns header.t2:before {background-image: url(../img/titelbilder/ueberuns_md_2.jpg);}
	#ueberuns header.t3:before {background-image: url(../img/titelbilder/ueberuns_md_3.jpg);}
	#ueberuns header.t4:before {background-image: url(../img/titelbilder/ueberuns_md_4.jpg);}
	#ueberuns header.t5:before {background-image: url(../img/titelbilder/ueberuns_md_5.jpg);}

	#service header.t1:before {background-image: url(../img/titelbilder/service_md_1.jpg);}
	#service header.t2:before {background-image: url(../img/titelbilder/service_md_2.jpg);}
	#service header.t3:before {background-image: url(../img/titelbilder/service_md_3.jpg);}
	#service header.t4:before {background-image: url(../img/titelbilder/service_md_4.jpg);}
	#service header.t5:before {background-image: url(../img/titelbilder/service_md_5.jpg);}
}

@media screen and (max-width: 575.98px) {
	#home header.t1:before {background-image: url(../img/titelbilder/home_sm_1.jpg);}
	#home header.t2:before {background-image: url(../img/titelbilder/home_sm_2.jpg);}
	#home header.t3:before {background-image: url(../img/titelbilder/home_sm_3.jpg);}
	#home header.t4:before {background-image: url(../img/titelbilder/home_sm_4.jpg);}
	#home header.t5:before {background-image: url(../img/titelbilder/home_sm_5.jpg);}

	#ueberuns header.t1:before {background-image: url(../img/titelbilder/ueberuns_sm_1.jpg);}
	#ueberuns header.t2:before {background-image: url(../img/titelbilder/ueberuns_sm_2.jpg);}
	#ueberuns header.t3:before {background-image: url(../img/titelbilder/ueberuns_sm_3.jpg);}
	#ueberuns header.t4:before {background-image: url(../img/titelbilder/ueberuns_sm_4.jpg);}
	#ueberuns header.t5:before {background-image: url(../img/titelbilder/ueberuns_sm_5.jpg);}

	#service header.t1:before {background-image: url(../img/titelbilder/service_sm_1.jpg);}
	#service header.t2:before {background-image: url(../img/titelbilder/service_sm_2.jpg);}
	#service header.t3:before {background-image: url(../img/titelbilder/service_sm_3.jpg);}
	#service header.t4:before {background-image: url(../img/titelbilder/service_sm_4.jpg);}
	#service header.t5:before {background-image: url(../img/titelbilder/service_sm_5.jpg);}
}


#homelink-first { animation-delay: 1000ms; }
#homelink-second { animation-delay: 1200ms; }
#homelink-third { animation-delay: 1400ms; }
#homelink-fourth { animation-delay: 1600ms; }
#homelink-fifth { animation-delay: 1800ms; }


.home-pop-in {
  -webkit-animation: pop-in 2.6s cubic-bezier(0, 0.5, 0.3, 1.2) forwards;
          animation: pop-in 2.6s cubic-bezier(0, 0.5, 0.3, 1.2) forwards;
  opacity: 0;
}

.home-hamburger-pop-in {  
  -webkit-animation: pop-in 2.6s cubic-bezier(0, 0.5, 0.3, 1.2) forwards;
          animation: pop-in 2.6s cubic-bezier(0, 0.5, 0.3, 1.2) forwards;
		  animation-delay: 3.0s;
  opacity: 0;
}

.pop-in  {
  -webkit-animation: pop-in 1.6s cubic-bezier(0, 0.5, 0.3, 1.0) forwards;
          animation: pop-in 1.6s cubic-bezier(0, 0.5, 0.3, 1.0) forwards;
  opacity: 0;
}

/* für Nebenseiten */
.pop-in-quick  {
  -webkit-animation: pop-in 1.6s cubic-bezier(0, 0.5, 0.3, 1.0) forwards;
          animation: pop-in 1.6s cubic-bezier(0, 0.5, 0.3, 1.0) forwards;
  opacity: 0;
}


/* Animations */
@-webkit-keyframes pop-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-4rem) scale(.8);
            transform: translateY(-4rem) scale(.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes pop-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-4rem) scale(.8);
            transform: translateY(-4rem) scale(.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}