#node2113442 #header .header__frame .header__image,
#node2113445 #header .header__frame .header__image {
  animation: changeBg1 40s infinite;
 -webkit-animation: changeBg1 40s infinit;
 -webkit-transition: all 0.2s ease;
 transition: all 0.2s ease;

  background: url("../img/tunnel.jpg") no-repeat transparent;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
  background-size: auto;
  width: 100%;
  background-size: 100%;
  background-position: center;
  height: 500px;
}
 
 


 #node2113442 #header .header__frame, 
 #node2113445 #header .header__frame {
  height: 500px;
  width: 100%;
  overflow: hidden;
}






.w50image img {
	height: auto;
	max-width: 100%;
	width: auto !important;
	margin-right:  0% !important;
	}
 .w50image img {
	width: 60% !important;
	}
	
	.flexitem a {  min-height:250px; background: #f4f1e5;display: block;text-align: center;}
	
	.flexitem a .w50image { position: absolute;   bottom: .25em;  height: 200px; display: flex;align-items: center;justify-content: center;width:100%}

	.flexitem a .titel {
		font-weight: bold;
		font-size: 1.0em;
		display: block;
		padding: .5em .25em 0 .25em;
	  }	
#zmEListe .gridlayout .bildbox.zmitem {margin:0 !important}



#node2113442 .header__frame::before,
#node2113445.header__frame::before {
  content: "Neuer Stadtraum";
  text-transform: Uppercase;
  position: absolute;
  left: 12%;
  top: 50%;
  z-index: 10;
  font-size: 60px;
  line-height: 100%;
  color: #fff;
  margin: 2em 0;
  letter-spacing: .1em;
  display: inline;
  padding: 0px .25em !important;
  text-shadow: 0 0 18px #000;
    font-family: 'Nunito Sans ExtraBold';
}

#node2113442 .header__text::before,
#node2113445.header__text::before {
      font-family: 'Nunito Sans ExtraBold';
  content: "an der Dreisam";
  text-transform: Uppercase;
  position: absolute;
  left: 12%;
  top: 60%;
  z-index: 10;
  font-size:60px;
  line-height: 100%;
  color: #fff;
  font-weight: 800;
  margin: 2em 0;
  letter-spacing: .1em;
  display: inline;
  padding: 0px .25em !important;
  text-shadow: 0 0 18px #000;
}



@media screen and (max-width: 1479.98px) {
	#node2113442 #header .header__frame, #node2113445 #header .header__frame {
	  height: 600px;
	  width: 100%;
	  overflow: hidden;
	}
	#node2113442 #header .header__frame .header__image,
    #node2113445 #header .header__frame .header__image { 
    height: 600px;
	background-size: 100%;
	background-position: center; }   

	 
	#node2113442 #header .header__frame,
	#node2113445 #header .header__frame 	{
	height: 600px; 
	width: 100%;  
	overflow:hidden
	}  
  }
  

  @media screen and (max-width: 1259.98px) {
 
	#node2113442 #header .header__frame .header__image,
    #node2113445 #header .header__frame .header__image { 
    height: 600px;
	background-size: cover;
	background-position: center top }   

	 
	#node2113442 #header .header__frame,
	#node2113445 #header .header__frame 	{
	height: 500px; 
	width: 100%;  
	overflow:hidden
	}  
  }

  @media screen and (max-width: 1079.98px) {
	#node2113442 #header .header__frame, #node2113445 #header .header__frame {
	  height: 400px;
	  width: 100%;
	  overflow: hidden;
	}
	#node2113442 #header .header__frame .header__image,
    #node2113445 #header .header__frame .header__image { 
 	height: 400px; 	
	background-size: cover;
	 background-position: center;}
   

	 #node2113442 .header__frame::before,		
	 #node2113445.header__frame::before {
	 top:46%;
	 font-size:50px;
	 }
 
	 #node2113442 .header__text::before,
	 #node2113445.header__text::before {
	 top:56%;
	 font-size:50px;
	 }


}
  

@media screen and (min-aspect-ratio: 10/6) and (min-width: 1079.98px)   {
  
	#xnone2113442 .header__frame::before,		
	#xnode2113445.header__frame::before {
	 top:30%;
  }
	
  #xnone2113442 .header__text::before,
  #xnode2113445.header__text::before {
	 top:42%;
  }
	
	}
	@media screen and (min-aspect-ratio: 14/9) and (min-width: 1079.98px) 
	{
	
  
	#xnone2113442 .header__frame::before,		
	#xnode2113445.header__frame::before {
	 top:30%;
  }
	
  #xnone2113442 .header__text::before,
  #xnode2113445.header__text::before {
	 top:42%;
  }
	
	
  }


  
  @media screen and (max-width: 991.98px) {
	#node2113442 #header .header__frame, #node2113445 #header .header__frame {
	  height: 500px;
	  width: 100%;
	  overflow: hidden;
	}
	#node2113442 #header .header__frame .header__image,
    #node2113445 #header .header__frame .header__image { 
 	height: 500px;
	 background-size: cover;
	 background-position: center; }

	 #node2113442 .header__frame::before,		
	 #node2113445.header__frame::before {
	 top:56%;
	 font-size:50px;
	 }
	 #node2113442 .header__text::before,
	 #node2113445.header__text::before {
	 top:65%;
	 font-size:50px;
	 }

  }
  
  @media screen and (max-width: 766px) {
	#node2113442 #header .header__frame, #node2113445 #header .header__frame {
	  height: 400px;
	  width: 100%;
	  overflow: hidden;
	}
	#node2113442 #header .header__frame .header__image,
    #node2113445 #header .header__frame .header__image { 
 	height: 400px; }

	 #node2113442 .header__frame::before,		
	 #node2113445.header__frame::before {
	 top:56%;
	 font-size:40px;
	 left: 5%;
	 }
	 #node2113442 .header__text::before,
	 #node2113445.header__text::before {
	 top:65%;
	 font-size:40px;
   left: 5%;
	 }


  }
  
  @media screen and (max-width: 576px) {
	#node2113442 #header .header__frame, #node2113445 #header .header__frame {
	  height: 400px;
	  width: 100%;
	  overflow: hidden;
	}

	#node2113442 .header__frame::before,		
	#node2113445.header__frame::before {
 	top:47%;
	left:2%;
 	font-size:30px;
}

	#node2113442 .header__text::before,	
	#node2113445.header__text::before {
	 top:55%;
	 font-size:30px;
	 left:2%;
	}

 	

  }

  @keyframes changeBg1
{
     0%   {background-image: url("../img/tunnel.jpg"); transform: scale(1); opacity: 1}
     35%  {background-image: url("../img/tunnel.jpg"); transform: scale(1.2) translate(0,3%); opacity: 1}    
     50%  {background-image: url("../img/tunnel.jpg"); transform: scale(1.1); opacity: 1 }
     100%  {background-image: url("../img/tunnel.jpg"); transform: scale(1); opacity: 1}
}

@-webkit-keyframes changeBg1
{
  0%   {background-image: url("../img/tunnel.jpg"); transform: scale(1); opacity: 1}
  35%  {background-image: url("../img/tunnel.jpg"); transform: scale(1.2) translate(0,6%); opacity: 1}    
  59%  {background-image: url("../img/tunnel.jpg"); transform: scale(1.1); opacity: 1 }
  100%  {background-image: url("../img/tunnel.jpg"); transform: scale(1); opacity: 1}
}


.stadttunnel {gap: 10px !important}

.box1 {order:1}
.box2 {order:4}
.box3 {order:2}
.box4 {order:5}
.box5 {order:3}
.box6 {order:6}

@media screen and (max-width: 991.98px) {
.box1 {order:1}
.box2 {order:3}
.box3 {order:2}
.box4 {order:4}
.box5 {order:5}
.box6 {order:6}
}

@media screen and (max-width: 766px) {
.box1 {order:1}
.box2 {order:2}
.box3 {order:3}
.box4 {order:4}
.box5 {order:5}
.box6 {order:6}
}