body{
    font-family: sans-serif, Arial, Helvetica;
    background-color: #fff;
    color: #1d1d1f;
    scroll-behavior: smooth;
    position: relative;
    transition: top 2s;
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: #1d1d1f;
}

h1,
h2{
    font-size: 52px;
    font-weight: 100;
}

h2{
    margin: 0;
}

h3{
    font-size: 35px;
    font-weight: 100;
    margin: 0;
}

p{
    font-size: 17px;
    font-weight: 100;
    margin: 0;
    letter-spacing: 1px;
    line-height: 1.4;
    
}







#header{
    position: fixed;
    top: 0;
    width: 100%;
    display: block;
    transition: top 0.5s;
    z-index: 12;
    background-color: #fff;
}


#headerContent{
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 0 ;
}

#logo{
    float: left;
    width: 60px;
    margin: 0 0 0 20px;
}

/*menu klein*/
#naviKlein{
   max-width: 700px;
   margin: 0 auto;
   padding-left: 40px;
}

#naviKlein ul{
    margin: 0;
    padding: 0px 49px;
    float: left;
}

#naviKlein ul li{
 display: inline-block;
 font-size: 12px;
 padding: 15px 20px;
 cursor: pointer;
}


#naviKlein ul li:hover{
    border-color: #f31199;
    border-width: 0 0 1px 0;
    border-style: solid;
    padding: 14px 20px;
}

#naviKlein ul li a{
    color: #1d1d1f;
   }

   #naviKlein ul li:hover a{
    color: #f31199;
}



#body-home .menu-home a,
#body-portrait .menu-portrait a,
#body-labor-leistungen .menu-labor-leistungen a,
#body-service-leistungen .menu-service-leistungen a,
#body-Kontakt .menu-kontakt a{
    color: #f31199;
}


.topIcon{
    float: right;
    position: relative;
    right: 20px;
}

/*menu*/

#menu{
    float: right;
    margin: 10px 20px 0 0;
    z-index: 16;
    position: relative;
}

.menuStrich{
    width: 25px;
    height: 2px;
    background-color: #000;
    margin: 5px 0;
    left: 0;
    transition: transform 1s, opacity 1s, left 0.5s;
   position: relative;
}

#nav{
    position: fixed;
    background: #fff;
  /*  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);*/
    width: 400px;
    height: 100%;
    top: 0;
    z-index: 10;
    transition-timing-function: ease;
    transition: right 1s, opacity 1s;
    overflow: auto;
}

.navAuf{
    opacity: 1;
    right: 0px;
}

.navZu{
    opacity: 0;
    right: -2000px;
}

#nav ul{
    max-width: 500px;
    margin: 0 auto;
    top: 100px;
    position: relative;
}

#nav ul li{
    display: block;
    font-size: 22px;
    margin: 15px 0;
    font-weight: 100;
    color: #1d1d1f;
}






/*arnea*/

section{
    padding: 100px 0;
}

.arena{
    max-width: 1400px;
    margin: 0 auto;
}

.arena0{
    margin: 0 auto;
    padding: 50px;
}

.arena900{
    max-width:900px;
    margin: 0 auto;

}

.arena1100{
    max-width:1100px;
    margin: 0 auto;

}


.arena25{
    width: 21%;
    margin: 2%;
 
}

.arena30{
    width: 26%;
    margin: 2%;

}

.arena33{
    width: 29.333333%;
    margin: 2%;

}

.arena33-2{
    width: 25.333333%;
    margin: 4%;

}

.arena50{
    width: 46%;
    margin: 2%;

}

.arena70{
    width: 66%;
    margin: 2%;

}



/*footer*/

footer p{
    font-size: 12px;
    margin: 0 5px 0 0;
}

footer a{
    color: #888888;
}

footer ul{
    margin:0;
    padding:0;
}

footer ul li{
    display: block;
    margin: 5px 0;
}

footer .strichUnten{
    margin-bottom: 10px;
}

footer ul p{
    font-size: 10px;
    
}


/*KontaktForm*/

#kontaktForm input,
#kontaktForm textarea,
#kontaktForm button{
    padding: 2%;
    border: none;
    margin: 20px 0;
    font-size: 15px;
    width: 96%;
}

#kontaktForm .check{
    transform: scale3d(2, 2, 1.5);
    filter: hue-rotate(111deg);
    width: 60px;
}

#kontaktForm button{
    cursor: pointer;
    width: 100%
}


/*home*/

.home33{
    width: 21.333333%;
    margin: 2%;
    padding: 4%;
    min-height: 400px;
    transform: rotate3d(0, 0, 0, 45deg);
    box-shadow: 0 0 0 0px #d7d7d7;
    transition: transform 0.3s, box-shadow 0.3s ;
}

.home33:hover{
    box-shadow: 0 0 54px 0px #00000045;
    transform: scale3d(1.02, 1.02, 1.02);
}

.galleryArena{
    width: 100%;
    overflow: hidden;
    display: flex;
}

.galleryBox{
    width: fit-content;
    display: flex;
    animation: scroll 200s linear infinite;
}

.galleryBox_2{
    width: fit-content;
    display: flex;
    animation: scroll_2 200s linear infinite;
}

.galleryDiv{
    background-position: center;
    background-size: cover;
    margin: 10px;
    padding: 200px 350px;
}

.galleryArena:hover .galleryBox,
.galleryArena:hover .galleryBox_2{
    animation-play-state: paused;
}

@keyframes scroll{
    0%{
        transform: translateX(0);
    }

    100%{
        transform: translateX(-100%);
    }
}

@keyframes scroll_2{
    100%{
        transform: translateX(0);
    }

    0%{
        transform: translateX(-100%);
    }
}



.schweben{
   position: relative;
   top: 0;
    animation: schwebenAni 3s linear infinite;;
}

@keyframes schwebenAni{
    0%{
        top: 0;
    }

    50%{
        top: 20px;
    }

    100%{
        top: 0px;
    }
}













/*scroll Animation*/
.aniDiv{
    position: relative;
    transition: top 1s;
    opacity: 0;
    top: 0px;
}
.aniDivOne{
    animation: aniDivOne 0.5s linear ;
    animation-fill-mode: forwards;
    
}
@keyframes aniDivOne{
    0%{
        top: 100px;
        opacity: 0;
    }
   

    100%{
        top: 0px;
        opacity: 1;
    }
}




.aniDiv2{
    transition: top 1s;
    opacity: 0;
}
.aniDivOne2{
    animation: aniDivOne2 1s linear ;
    animation-fill-mode: forwards;
    
}
@keyframes aniDivOne2{
    0%{
        opacity: 0;
    }
   

    100%{
        opacity: 1;
    }
}


.widthAni{
    transition: width 0.2s;
}






/*background style*/

.bag_style {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.backFilter{
    filter: contrast(0.3);
}



/*video*/
.videoStop{
    width: 35px;
    border-radius: 35px;
    background-color: #d5d5d5;
    position: relative;
    float: right;
    height: 35px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.videoStop:hover{
    box-shadow: 2px 3px 4px 0px #00000052;
}



/*position übereinander*/

.po1{
    position: relative;
    overflow: hidden;
    padding: 0;
    height: 70vh;
    top: 40px;
}

.po2{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.po3{
    position: relative;
    overflow: hidden;
    padding: 0;
    top: 40px;
}


li::marker {
    color :#f31199;
  }


.weiter{
    background-color: #f1f1f1;
    padding: 14px 22px;
    border: none;
    cursor: pointer;
}


.borderStyle{
    border-radius: 30px;
    border: none;
    overflow: hidden;
   
}

.strichLR{
    border-style: solid;
    border-width:  0 1px;
    border-color: #f31199;
}

.strichUnten{
    border-style: solid;
    border-width:  0 0 1px 0;
    border-color: #b3b3b3;
}

.textCenter{
    text-align: center;
}

.textLeft{
    text-align: left;
}


.boxSchatten{
    box-shadow: 0 0 17px 0px #00000029;
}


.none{
    display: none;
}

.popup{
    position: fixed;
    top: 20px;
    width: 100%;
    /* max-width: 1000px; */
    z-index: 9;
}


.sticky{
    position: sticky;
    top: 50px;
}

.flex{
    display: flex;
    align-items: center;
    justify-content: left;
}

.flex2{
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row-reverse;
}

.flex1{
    flex: 1;
}

.left{
    float: left;
}

.right{
    float: right;
}

.bagImg{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

img{
    max-width: 100%;
    margin: 0;
    border: none;
    padding: 0;
    position: relative;
}

.clear{
    clear: both;
}





/*color*/

.c1{ color: #f31199;}
.b1{background-color:  #f31199;}

.c2{ color: #ffffff;}
.b2{background-color:  #ffffff;}

.c3{ color: #f7f7f7;}
.b3{background-color:  #f7f7f7;}

.c4{ color: #888888;}
.b4{background-color:  #888888;}

.c5{ color: #e3e3e3;}
.b5{background-color:  #e3e3e3;}


.c6{ color: #000;}
.b6{background-color:  #000;}

.c7{ color: #86868b;}
.b7{background-color:  #86868b;}

.c8{ color: #1a1a1a;}
.b8{background-color:  #1a1a1a;}


/*mobile */



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

body{
    margin: 0;
}


h1, h2{
    font-size: 60px;
}

h3{
    font-size: 30px;
}

#headerContent {
    padding: 10px;
}


.arena,
.arena1100,
.arena900,
.arena25,
.arena30,
.arena33-2,
.arena33,
.arena50,
.arena70,
.home33{
    width: 92%;
    margin: 4%;

}

.arena0 {
    margin: 0 auto;
    padding: 15px;
}

.home33{
    text-align: center;
    margin: 20px 2%;
    padding-top: 50px;
    padding-bottom: 50px;;
}

#nav{
width: 100%;
}

#sectionCounter .strichLR{
    border-style: solid;
    border-width: 1px 0;
    border-color: #e3e3e3;
    padding: 20px 0;
}

/*kontakt*/
#kontaktForm input, #kontaktForm textarea, #kontaktForm button {
    padding: 5%;
    border: none;
    margin: 20px 0;
    font-size: 15px;
    width: 90%;
}


#kontaktForm button{
    width: 100%
}

#kontaktForm .check {
    transform: translate(10px, 10px);
    filter: hue-rotate(111deg);
    width: 60px;
}

/*Portraid*/





.left, .right{
    float: none;
}

.flex{
    flex-direction: column;
}

.flex2{
    flex-direction: column;
}

#naviKlein {
    display: none;
}



/*video*/
#labor-leistungen-video{
    width: 200%;
    transform: translate(-24%, 0px);
}


}



@media screen and (max-width: 450px) {
    h1, h2{
        font-size: 32px;
    }

    h3{
        font-size: 22px;
    }

    p{
        font-size: 15px;
    }

}