html{
 font-size: 13px
}
#headerlinks, 
#map{
    display: none;
}
#logo{
    height: 10%;
left: 0;
top: 0;
right: 0;
width: 100%;
background-color: var(--dark);
height: 64px;

}
#logo.lefthidden{
    display: none;
}
#logo a {
    position: fixed;
    right: 10px;
    top: 10px;
    width: 40%;
    display: block;
    z-index: 305;

}
#navtrigger {
  position: fixed;
  top: 16px;
  left: 16px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  z-index: 302;
}
#navtrigger div {
  width: 40px;
  height: 4px;
  margin: 6px 0;
  transition: 0.4s;
  background-color: var(--textcolor);
}
#navtrigger div:first-child{
-webkit-border-top-left-radius: 2px;
-moz-border-radius-topleft: 2px;
border-top-left-radius: 2px;
width: 32px;

}
#navtrigger div:last-child{
-webkit-border-bottom-right-radius: 2px;
-moz-border-radius-bottomright: 2px;
border-bottom-right-radius: 2px;
width: 32px;
margin-left: 8px;
}

.sidenav{
    position: absolute;
    margin: 0;
    left: 24px
}
.sidenav.lefthidden{
    left: 24px;
}
.mobile_box{
    background-color:  var(--dark);
    top: 0;
     position: fixed;
     width: 60%;
    left: -60%;
    z-index: 305;
    bottom:0 ;
   transition: left 0.5s ease;
}
.mobile_box.clicked{
    left: 0;
}
@media (max-width:600px){
.mobile_box{
         width: 85%;
    left: -85%;
}
}
.darkoverlay{
    width: 100%;
    height: 100%;
     position: fixed;
     left: 0;
     top: 0;
     right: 0;
     border: 0;
     background-color: rgba(0,0,0,0.4);
     display: none;
     z-index: 304;
}
.mobile_box.clicked + .darkoverlay{
    display: block;
}

nav {
  position: absolute;
  top: 0;
  padding: 50px 2% 2%;
  left: 0;
  z-index: 9999;
  right: 0;
  display: none;
  bottom: 0;
  background-color: var(--secondary);
  height: 100% !important;
  width: 100% !important;
  float: none;
  box-sizing: border-box;
}

.closenav {
  position: absolute;
  right: 32px;
  top: 16px;
  width: 40px;
  cursor: pointer;
  height: 40px;
  opacity: 0.4;
}
.closenav:hover {
  opacity: 1;
}
.closenav:before, .closenav:after {
  position: absolute;
  left: 20px;
  content: ' ';
  height: 40px;
  width: 3px;
  background-color:  var(--textcolor);
}
.closenav:before {
  transform: rotate(45deg);
}
.closenav:after {
  transform: rotate(-45deg);
}

.starthead .starttext {
  left: 5%;
  top: 40%;
}

.starthead{
    height: 40%;
}
#pusteblume{
    top: 72%;
}

 #section0 .left-60,
 #section0 .right-40{
float: left;
width: 60%;
height: 100%;
}
 #section0 .right-40{
    float: right;
    width: 40%;
 }

/* #section1 */ .left-60,
/* #section1 */ .right-40{
    width: 100%;
    float: none;
    height: 50%;       

}

.left-60{
    display: none!important;
}

 #backgroundvideo-unternehmen, 
 #backgroundvideo-imagevideo,
 .videoplacesholder-mobile{
     width: 100%;
      height: 50%;  
      position: relative;
   /*    top: -100%; */
 }    
 #backgroundvideo-unternehmen video, 
 #backgroundvideo-imagevideo video,
 .videoplacesholder-mobile{
     height: 100%!important;
 }
.backgroundvideo.rechts_ausrichten{
    right: 0;
}

.left-60{
    height: calc(50% - 64px);
    height: 50%;
   
}                    
/* #section1 */ .right-40{
      height: 50%;
      bottom: 0;
}
.videoplacesholder-mobile
{
    background-color: var(--grey);
}
.fp-slidesNav.fp-bottom{
    left: auto!important;
    right: 5%;
}
.fp-slidesNav{
    z-index: 310;
}
.leistungen li {
position: static;
}
.content{
    padding: 16px 16px 0 16px;
} 
.align-to-bottom {
    left: 16px;
    right: 16px;
    bottom: 20px;
}
.align-to-bottom.pajax {
    bottom: 64px;
}
.postbox{
    height: 150px;
}
.ul-wrap li{
    padding-bottom: 16px;
    height: 150px;
}
.previewcontent{
  overflow: hidden;
  text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 7; /* number of lines to show */
           line-clamp: 7; 
   -webkit-box-orient: vertical;
}
.ul-wrap,
#posts-ajax {
    height: 316px;
}

#moldcontent img{
    max-height: 40px;
    width: auto;
}
ul.leistungen{
    padding:0;
    width: 100%;
}
ul.leistungen li,
ul.geschichte li{
    font-size: 0.925rem;
    padding: 0;
    left: 16px;
    right: 16px;
    margin: 0;
}
ul.leistungen li.pos1,
ul.leistungen li.pos2,
ul.leistungen li.pos3,
ul.leistungen li.pos4,
ul.leistungen li.pos5, 
ul.geschichte li.pos1,
ul.geschichte li.pos2,
ul.geschichte li.pos3,
ul.geschichte li.pos4,
ul.geschichte li.pos11,
ul.geschichte li.pos12,
ul.geschichte li.pos13{
    display: none;
}
ul.geschichte li.pos5,
ul.geschichte li.ex-visible{
    top: -80%;
    z-index: 99;
    visibility: hidden;
}
ul.leistungen li.pos6,
ul.geschichte li.pos6{
    top: 12%;
    font-size: 1.125rem;
}
ul.geschichte li.pos6{
    top: 12%
}
ul.leistungen li.pos7,
ul.geschichte li.pos7{
    top: 33%;
}
ul.leistungen li.pos8,
ul.geschichte li.pos8{
    top: 58%;
    font-size: 0.8rem;
}
ul.leistungen li.pos9,
ul.geschichte li.pos9{
    top: 79%;
    font-size: 0.7rem;
}
ul.geschichte li.pos10{
    top:88%
}
#imagevid{
    height: 0;
    padding-bottom: 56.25%;
    width: 100%;
    position: relative;
}
#imagevid iframe{
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
.geschichte li .number {
width: auto!important;
font-size: 2rem!important;
float: left!important;      
line-height: 40px!important;
}
.geschichte li.pos6 .number {
font-size: 4rem!important;
}
.geschichte li .text{
    width: calc(100% - 120px);
}
img.max-fit, 
.content h2{
    top: -120px;
    position: absolute;
    height: 120px;
    margin: 0;
}
.content h2,
.content h2,
.headlinebox{
    height: 40px;
     top: -40px;
     left: 16px;
}
.headlinebox {
    height: auto;
}
.headlinebox h3{
    margin-top: 30px;
}

p{
    margin-bottom: 1rem;
}    
#section11 .right-40,
#section14 .right-40,
#section14 .carouselbranchen,
#section11 .carouselMold{
    position: absolute;
    left: 0;
    right: 0;
    
    height: 50%;
}
#section11 .right-40,
#section14  .right-40{
    bottom: 0;    
}
#section14 .carouselbranchen,
#section11  .carouselMold{
top: 0;
}
#section11 .carouselMold{
    height: calc(50% - 64px);
    top: 64px;
}
.carouselMold li.moldpos1,
.carouselMold li.moldpos2,
.carouselMold li.moldpos4,
.carouselMold li.moldpos5, 
.carouselbranchen li.branchenpos1, 
.carouselbranchen li.branchenpos2, 
.carouselbranchen li.branchenpos4, 
.carouselbranchen li.branchenpos5, 
.carouselbranchen li.ex-visible, 
#mold-subnav .navlabel,
#branchen-subnav .navlabel,
.carouselMold li.ex-visible{
    display: none;
}
.sameas{
    display: none!important;
}
.sameas.showOnMobile{
    display: block!important;
    height: 40%;
}
.sameas.showOnMobile h4{
    margin-bottom: 16px;
}
.align-to-bottom.showOnMobile{
    bottom: 40%!important;
}
.carouselMold li.moldpos3,
.carouselbranchen li.branchenpos3{
    width: 80%;
    margin: 0 10% 0 -40%;
  left: 50%;
  bottom: 0;
  top: 0;
  
    text-align: center;
}
.carouselbranchen li.branchenpos3{
    top: auto
}
#mold-subnav ul,
#branchen-subnav ul{
    display: inline-block;    
}
#mold-subnav,
#branchen-subnav {
    left: 10px!important;
    top: 40%!important;
    width: 100%;
    text-align: center;
}
.fp-slidesNav ul li a{
    
} 
.fp-slidesNav ul li a span{
 width: 15px!important;
    height: 15px!important;
    border-radius:50%!important;
}

.fp-slidesNav ul li{
     width: 15px!important;
    height: 15px!important;
    border-radius:50% ;
    float: left;
    margin: 0 10px!important;
}   

.align-to-bottom.mod, 
.align-to-bottom.mod.modder{
    bottom: 5%; 
}
#moldcontent,
#branch{
    font-size: 0.9rem;
    line-height: 1.1;
}
#moldheadline{
    margin-top: -32px;
}


.carouselMold li img,
.carouselbranchen li img{

    max-width: 70%;

}
#mobibilesub{
    width: calc(100% - 32px);
}
#mobibilesub{
    position: absolute;
    bottom: 0;
    left: 32px;
    text-align: left;
}
#mobibilesub li{
    display: none;
}
#mobibilesub li.pair{
display: block;
width: 50%;
height: 32px;
}
.hide-on-mob{
    display: none;
}


#startvideo-mobile{
    display: block;
    height: 100vh!important;
    width: 100%;
}
#startvideo,
#a9, 
#a7{
    display: none;
}    
#section17 .backgroundvideo{
    height: 1%;
}
#section17 .right-40{
    height: 99%;
}
#section17 h2{
    top: 64px;
}
.backgroundvideo {
    background-color: var(--grey);    
}
ul.geschichte .floatright{
    width: calc(100% - 150px);
}
ul.geschichte li {
  height: 40px;
  line-height: 40px;
}
.imagepadding{
    padding: 0 0 65%
}