@charset "utf-8";
/* CSS Document */

/* Burger-Item */
#burgerButton{
    position:fixed;
    right:20px;
    top:55px;
    line-height:30px;      
    cursor: pointer;
    font-size:1.4em;
    float:left;
    width:48px;
    display:none;
    border-radius: 7px;
    padding:4px;
    background-color: var(--darkcicolor);
    transition: 0.5s;
}
.smallerHeader #burgerButton{
    top:25px;
}
#nav-icon {
  display:inline-block;
  vertical-align:middle;
  width: 40px;
  height: 30px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  margin-right:20px;
}

body.highContrast #nav-icon span {
  background:black;
}

#nav-icon span {
  display: block;
  position: absolute;
  height:6px;
  width: 100%;
  background: #007d5b;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
  top: 11px;
}

#nav-icon span:nth-child(4) {
  top: 23px;
}

#nav-icon.open span:nth-child(1) {
  top: 11px;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 10px;
  width: 0%;
  left: 50%;
}
/* BURGER ENDE */
@media only screen and (max-width : 1250px) {
    :root {
      --websiteWidth:100%;
    }
    .websiteWidth{
        padding-left:20px;
        padding-right: 20px;
    }
}
@media only screen and (max-width : 990px) {
    
    
    
    nav#mainNav{
        position: absolute;
        top:80px;
        width:100%;
        background-color: white;
        left: 0px;
        font-size:1.5em;
    }
   
    nav#mainNav ul{
        display: none;
        width:100%;
        background-color: #fff;
        padding-top:1em;
        padding-bottom: 1em;
    }
    nav#mainNav ul li{
        width:100%;
        padding-right: 0px;
        line-height: 1.8em;
    }
    nav#mainNav ul li ul{
        position: relative;
        width:100%;
        text-align: center;
        font-size:0.8em;
        left: inherit;
        top:inherit;
        margin-left: 0px;
        margin-right: 0px;
    }
    nav#mainNav ul li a{
        white-space: inherit;
        text-align: left;
    }
    nav#mainNav ul li ul li a{
        white-space: inherit;
    }
    
    #burgerButton{
        display: block;
    }    
    
    .videoHeader .overlayerText .text{
        font-size:5vw;
    }
    .bildTextGray .bildText, .bildTextGray:nth-last-of-type(2n) div.bildText, .apen_ansprechpartnerListe, .logoItemsWrapper{
        grid-template-columns: 100%;
    }
    .bildTextGray:nth-last-of-type(2n) article{
        order:1;
    }
    .websiteWidthSmall, .websiteWidthSmallest, .frame-type-text, .frame-type-textpic, .websiteWidthSmall{
        width:100% !important;
    }
    
    .apen_ansprechpartnerListe .apen_ansprechpartner:nth-child(2n), .apen_ansprechpartner{
        grid-template-columns: 54% 20%;
        justify-content: center;
    }
    .apen_ansprechpartnerListe .apen_ansprechpartner:nth-child(2n) .textWrapper{
        order: 1;
    }
    .apen_ansprechpartnerListe .apen_ansprechpartner:nth-child(2n) .imageWrapper{
        order: 2;
    }
    .apen_ansprechpartner{
        margin-bottom: 1em;
    }
    .logoItemsWrapper .logoWrapper{
        width:150px;
        padding-left: 0px;
        margin-bottom: 1em;
    }
    .textCollapse{
        width:100%;
    }
    
    .linkItems, .mediaItems{
        grid-template-columns: 24% 24% 24% 24% ;
    }
    a.mediaItem{
      height: 100px;  
    }
}
@media only screen and (max-width : 750px) {
    
.logoMitTextWrapper .imageWrapper{
     padding-left:22%;
    padding-right: 22%;
    top:inherit;
    position: relative;
}
    
    .iconText{
        width:100%;
        margin-bottom: 1em;
    }
    .linkItems, .mediaItems{
        grid-template-columns: 32% 32% 32% ;
    }
    
    .logoMitTextWrapper{
        grid-template-columns: 100%;
    }
    .logoMitTextWrapper:nth-of-type(2) .imageWrapper{
        width: 250px;
    }
    .logoMitTextWrapper .imageWrapper{
        padding: 0px;
    }
    .logoMitTextWrapper .imageWrapper{
        width:150px;
        margin-bottom: 1em;
    }
    
    .introWrapper{
        grid-template-columns: 100%;
    }
    .introWrapper .imgWrapper{
        width:200px;
        margin-bottom:    1em;
    }


    
}


@media only screen and (max-width : 550px) {
    .linkItems, .mediaItems{
        grid-template-columns: 48% 48%;
    }
    
    .apen_ansprechpartnerListe .apen_ansprechpartner:nth-child(2n), .apen_ansprechpartner{
        grid-template-columns: 75% 20%;
    }
    
    .linedHeaderWrapper .line{
        display: none;
    }
    .linedHeaderWrapper h4{
        padding-left:0px;
        padding-right: 0px;
    }
    .projektPartnerItem{
        grid-template-columns: 100%;
        margin-bottom: 4em;
    }
    #DataTables_Table_0_wrapper{
        display: none;
    }
    header#pageHeader a.apenLogoWrapper img{
        height: 37px;
    }
    header#pageHeader{
        height: 111px;
    }
    #burgerButton{
        top:50px;
    }
    .spacer{
        height: var(--smallerHeaderHeight);
    }
    .innerFooter a{
        margin-left: 8px;
    }
    .innerFooter{
        justify-content: center;
    }
}
@media only screen and (max-width : 450px) {
    .iconText{
        grid-template-columns: 100%;
    }
        .iconText .imageWrapper{
        width:30%;
            margin-bottom: 0.3em;
    }

}



@media only screen and (max-width : 350px) {

    :root {
      --websiteWidth:340px;
    }
    
}