:root{
    /*--color1:rgb(250,140,170);*/
    --DoNgreen:#C0FD0F;
    --DoNgreen2:#00F39B;
    --DoNblue:#00C1FF;
    --DoNviolet:#8538FF;
    --DoNred:#FF1A5D;    
    --DoNgrey:#BBC4D8;    
}

@font-face {
    font-family: 'fk_displayregular_alt';
    src: url('../fonts/fkdisplay-regularalt-webfont.woff2') format('woff2'),
         url('../fonts/fkdisplay-regularalt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


* {
    margin: 0 auto;
    padding: 0;

}
body{   
    font-family: 'fk_displayregular_alt', Arial, Helvetica, sans-serif;
    -webkit-text-fill-color: black;    
    font-size: medium;
    
}
#bodyblock{
    max-width: 950px;
}

#headercontainer{
    width: 100vw;
    height: 36vw;
    max-height: 350px;
    overflow: hidden;
}
#headercontainer-page2{
    width: 100vw;
    height: 21vw;
    max-height: 150px;
    overflow: hidden;
}
#headerimg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}




a {
	word-wrap: break-word;
    text-decoration: underline;
}

a:hover{
    -webkit-text-fill-color: var(--DoNgreen2); 
}
a:visited{
    -webkit-text-fill-color: black; 
}



.textblock{
    width: 70%;
    left: 15%;
}

.logoblock{
    width: 100%;
    height: 12vw;
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0;
}


.socialmedia{
    margin-bottom: 5vh;;
}
.scialmedia_image{
    height:8vw;
    max-height:50px;
    position:absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}
.smimg1{
    left: 45%;
}
.smimg2{
    left: 55%;
}
.smimg1:hover{
    content:url('../images/instagram_hov.png');
    cursor: pointer;
}
.smimg2:hover{
    content:url('../images/linkedin_hov.png');
    cursor: pointer;
}



.logoimg{
    width: 24%;
    height: auto;
    padding: 2vw;
    max-height: 8vw;
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}
.img1{
    left: 18%;
}
.img2{
    left: 50%;
}
.img3{
    left: 82%;
}

#toplogofont{
    position: absolute;
    margin: 3vw;
}


.top{
    font-size: large;
}



#sprachwahl{
    position: absolute;
    margin: 3vw;
    right: 0px;
    -webkit-text-fill-color: var(--DoNgrey); 
}
#sprachwahl a{
    text-decoration: none!important;
    -webkit-text-fill-color: var(--DoNgrey); 

}
#sprachwahl a:hover, #sprachwahl a:visited:hover {
    -webkit-text-fill-color: black; 
}
#sprachwahl a:visited{
    -webkit-text-fill-color: var(--DoNgrey); 
}
.selected{
    -webkit-text-fill-color: black; 
}





p{
    margin-top: 5vh;
    margin-bottom: 5vh;
}
.smaller{
    font-size: small;
}
.bigger{
    font-size: large;
}

.footer{
    font-size: x-small;
    text-align: center;
    margin-top: 5vh;
    margin-bottom: 5vh;

}





.outer {
    width: 100%;
    text-align: center;
    margin-top: 5vw;
    margin-bottom: 5vw;
  }
  
  .inner {
    display: inline-block;
  }








.button{
    display:inline-block;
    border-radius: 20px;
    cursor:pointer;
   /* vertical-align:middle;*/
    width: 200px;
    height: 40px;
    padding: 5px;
    text-align: center;
    line-height: 40px;

}

.button a{
    text-decoration: none  !important;
}
.button:hover{
    -webkit-text-fill-color: white !important;
}
.button a:hover{
    -webkit-text-fill-color: white !important;
}
.button a:visited{
    -webkit-text-fill-color: white !important;
}


.button:active {
    color:red;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.6);
}


.green2{
    background:var(--DoNgreen2);
}

.green1{
    background:var(--DoNgreen);
}


input{
    padding: 0.5vmin;
    font-size: medium;
    margin-top: 2vmin;
    margin-bottom: 1vmin;
}
  ::placeholder {
    color: var(--DoNgrey);
    opacity: 1; /* Firefox */
    -webkit-text-fill-color:var(--DoNgrey);
}
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--DoNgrey);
    -webkit-text-fill-color:var(--DoNgrey);

  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--DoNgrey);
    -webkit-text-fill-color:var(--DoNgrey);
}









/*mobile responsive*/

@media all and (max-width: 600px) { /*schmale desktop site*/
    body{
       /* background:red !important;*/
    }   
}

/*mobile geräte*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 320px) and (max-device-width: 820px) and (orientation: portrait) ,
only screen and (   min--moz-device-pixel-ratio: 2) and (min-device-width: 320px) and (max-device-width: 820px) and (orientation: portrait) ,
only screen and (     -o-min-device-pixel-ratio: 2/1) and (min-device-width: 320px) and (max-device-width: 820px)and (orientation: portrait)  ,
only screen and (        min-device-pixel-ratio: 2) and (min-device-width: 320px) and (max-device-width: 820px)and (orientation: portrait)  { 
    body{
      /*  -webkit-text-fill-color: blue !important;   */     
    }   

    body{
        font-size: 4vmin;
    }
    .textblock {
        width: 90%;
        left: 5%;
    }
    #bodyblock {
        max-width: none;
    }
    .smaller {
        font-size: 2.2vmin;
    }
    .bigger{
        font-size: 5.5vmin;

    }
    .top{
        font-size: 6vw;
    }
    .footer{
        font-size: 1.8vmin;

    }

    .button,input {
        border-radius: 4vmin;
        width: auto;
        height: 10vmin;
        padding: 3vmin;
        padding-left:10vmin;
        padding-right:10vmin;
        text-align: center;
        font-size: 5.5vmin;
        line-height: 10vmin;
    }


    .logoblock {
        width: 100%;
        height: 90vw;
        position: relative;
        display: inline-block;
        overflow: hidden;
        margin: 0;
    }

    .logoimg {
        width: 40vw;
        height: auto;
        padding: 10vw;
        display: block;
        padding-top: 5vmin;
        max-height: none;
        position: static;
        top: 0;
        transform: none;

    }

}