@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap');
@import url(//db.onlinewebfonts.com/c/6c8668bcbf5ffda0931f0fedcf2977a9?family=Kohinoor);

      
    
@media all and (max-width: 480px){}
@media all and (min-width: 481px) and (max-width: 768px){}
@media all and (min-width: 769px) and (max-width: 1024px){}
@media all and (min-width: 1025px) and (max-width: 1200px){}
@media all and (min-width: 1200px) {}



/*html {
    font-size: 16px;
}*/

.button-container {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 7vw;
    margin-right: 6vw;
    margin-left: 6vw;
}

.language_container {
    display: flex;
}

#pin {
    font-family: 'Quicksand', sans-serif;
    font-size: calc(0.8rem + 0.5vw);
}

.language {
    text-decoration: none;
    color: black;
    font-family: 'Quicksand', sans-serif;
    font-size: calc(0.8rem + 0.5vw);
    padding: 0 5px;
    margin: 0;
}

.language:hover {
    color: red;
    transition: all 0.4s ease 0s;
}


#chosen_language {
    text-decoration: none;
    color: black;
    font-family: 'Quicksand', sans-serif;
    font-size: calc(0.8rem + 0.5vw);
    font-weight: bold;
    padding: 0 5px;
}

.example_b {
    text-decoration: none;
    background: #EE1D24;
    /*width: 6vw;
    height: 6vw;*/
    width: calc(3.052rem + 2vw);
    height: calc(3.052rem + 2vw);
    border-radius: 100%;
    display: inline-flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease 0s;
    }

.example_b:hover {
        background: darkgrey;
        color: white;
        border-radius: 100%;
        display: inline-flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        transition: all 0.4s ease 0s;
        }

.example_b img {
    width: 60%;
}

.center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.divider-one {
    height: calc(3.052rem + 0.5vw);
}

.divider-two  {
    height: calc(2.441rem + 0.5vw);
}

.divider-three {
    height: calc(1.953rem + 0.5vw);
    
}

h1 {
    font-size: calc(3.052rem + 0.5vw);
    font-family: 'Quicksand', sans-serif;
    font-weight:700;
    text-align: center;
    margin: 0;
  }

h2 {
    font-size: calc(1.953rem + 0.5vw);
    font-family: 'Quicksand', sans-serif;
    font-weight:lighter;
    margin: 0;

}

h3 {
    font-family: 'Quicksand', sans-serif;
    font-size: calc(1.563rem + 0.5vw);
    margin-top: 10vw;
}


.img-round {
    border-radius: 50% 50%;
    width: calc(14.552rem + 10vw);
    text-align: center;
    margin-top: 4vw;
    margin-bottom: 4vw; 
}

p {
    font-family: 'Quicksand', sans-serif;
    font-size: calc(0.8rem + 0.5vw);
    margin: 0;
}

.impressum {
    font-size: calc(0.6rem + 0.5vw);
}

.zahlen-grid {
    margin-top: 10vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 6vw;
}

.zahlen {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*
.zahlen-text {
    font-family: 'Quicksand', sans-serif;
    font-size: 3vw;
    font-weight: 500;
}

.zahl {
    font-family: 'Quicksand', sans-serif;
    font-size: 6vw;
    font-weight: 900;
}*/

.impressum-grid {
    width: 65vw;
    display: grid;
    grid-template-columns: repeat(1, minmax(100px, 2fr));
    grid-gap: 10vw;
}

.col-impressum {
    font-family: 'Quicksand', sans-serif;
    font-size: calc(1rem + 0.5vw);
    line-height: normal; 
}


.schrift-container {
    width: 65vw;
}
.p {
    font-family: 'Quicksand', sans-serif;
    font-size: calc(0.8rem + 0.5vw);
    margin: 0; 
}

#keine-luecke {
    margin-bottom: 0;
}

#kleine-luecke {
    margin-top: 1vw;
}

.grosse-luecke {
    margin-top: 2vw;
}

.pfeil {
    width: 3.5vw;
    margin-top: 7vw;
}

#margin-top-fuer-pfeil{
    margin-top: 9vw;
}

.show-mobile {
    display: none;
  }
  
  .hide-mobile {
      /*width: 50vw;*/
      width: calc(18.19rem + 30vw);
      display: grid;
      grid-template-columns: repeat(4, minmax(100px, 1fr));
      /*grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));*/
      gap: 2vw;
  }
  
  .hide-mobile > div {
      display: grid;
      place-items: center;
      /*position: relative;*/
  }
  
  .hide-mobile > div::before {
      content: "";
      padding-top: 100%;
      display: block;
      grid-area: 1 / 1 / 4 / 4; 
    }
  
  .hide-mobile > div > img {
      width: 100%;
      grid-area: 1 / 1 / 4 / 4;
      /*display: none;*/
    }

    #leica {
        padding: 2.5vw 2.5vw 2.5vw 2.5vw;
        display: grid;
        place-items: center; 
      }
    
    #snp {
        padding: 2vw;
        display: grid;
        place-items: center; 
      }
    
    #schindler {
        padding: 2vw;
        display: grid;
        place-items: center; 
      }
    
    #telekom {
        padding: 2vw 2vw 2vw 3vw;
        display: grid;
        place-items: center; 
      }
    
    #bundesdruckerei {
        padding: 2vw;
        display: grid;
        place-items: center;  
    }
    
    #seidensticker {
        display: grid;
        place-items: center; 
    }
    
    
    #output-no-padding {
    padding: 0;
    }
    
    .glühbirne {
        width: calc(3.052rem + 4vw);
        height: calc(3.052rem + 4vw); 
        padding-top: 4vw;
        padding-bottom: 4vw;  
    }
    
    .wolke {
        width: calc(18.19rem + 40vw);
        padding-bottom: 0; 
    }
    
    
    .example_c {
        text-decoration: none;
        background: #EE1D24;
        /*background: #50414D;*/
        /*width: 11vw;
        height: 11vw;*/
        width: calc(3.052rem + 2vw);
        height: calc(3.052rem + 2vw);
        border-radius: 100%;
        display: inline-flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        transition: all 0.4s ease 0s;
        margin-top: 2vw;
        margin-bottom: 20vw;
        }
    
    .example_c:hover {
            /*background: #8D818A;
            background: #F5D27B;
            background: #84B69C;*/
            /*opacity: 0.65;*/
            background: darkgrey;
            color: white;
            /*background: #5D3C42;*/
            border-radius: 100%;
            display: inline-flex;
            text-align: center;
            justify-content: center;
            align-items: center;
            transition: all 0.4s ease 0s;
            }
    
    .example_c img {
        width: 60%;
    }

    .impressum-grid {
        width: 65vw;
        display: grid;
        grid-template-columns: repeat(2, minmax(100px, 1fr));
        grid-gap: 10vw;
        }

    #the-end {
        margin-bottom: 10vw;
    }
    
@media all and (max-width: 480px){
    
    h1 {
        font-size: calc(1.953rem + 0.5vw);
      }
    
    h2 {
        font-size: calc(1.25rem + 0.5vw);
    }

    h3 {
        font-size: calc(1.25rem + 0.5vw);
    }

    .img-round {
        width: calc(14.552rem);
    }

    p {
        font-size: calc(0.8rem + 0.5vw);
    }

    .p {
        font-size: calc(0.8rem + 0.5vw);
    }

    
    ul {
        margin-left: -4vw;
    }

    .show-mobile {
        width: 65vw;
        display: grid;
        grid-template-columns: repeat(3, minmax(50px, 99px));
        /*grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));*/
        justify-content: center;
        grid-row-gap: 0vw;
        grid-column-gap: 4vw;
        margin-top: 3vw;
    }
    
    .show-mobile > div {
        /*background-color: rosybrown;*/
        display: grid;
        place-items: center;
        /*position: relative;*/
    }
    
    .show-mobile > div::before {
        content: "";
        padding-top: 100%;
        display: block;
        grid-area: 1 / 1 / 4 / 4; 
      }
    
    .show-mobile > div > img {
        width: 100%;
        grid-area: 1 / 1 / 4 / 4;
        /*display: none;*/
      }

    .hide-mobile {
      display: none;
    }

    .zahlen-grid {
    grid-template-columns: repeat(1, 1fr);
    }

    .wolke {
        width: calc(18.19rem + 20vw);
    }

    .impressum-grid {
    width: 65vw;
    display: grid;
    grid-template-columns: repeat(1, minmax(100px, 1fr));
    grid-gap: 10vw;
    }

}

 
@media all and (min-width: 481px) and (max-width: 768px){

    ul {
        margin-left: -2vw;
    }

    /*
    .zahlen-text {
        font-family: 'Quicksand', sans-serif;
        font-size: 5vw;
        font-weight: 500;
    }
    
    .zahl {
        font-family: 'Quicksand', sans-serif;
        font-size: 10vw;
        font-weight: 900;
    }*/

    .show-mobile {
        width: 75vw;
        display: grid;
        grid-template-columns: repeat(3, minmax(50px, 99px));
        /*grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));*/
        justify-content: center;
        grid-row-gap: 0vw;
        grid-column-gap: 4vw;
        margin-top: 3vw;
    }
    
    .show-mobile > div {
        /*background-color: rosybrown;*/
        display: grid;
        place-items: center;
        /*position: relative;*/
    }
    
    .show-mobile > div::before {
        content: "";
        padding-top: 100%;
        display: block;
        grid-area: 1 / 1 / 4 / 4; 
      }
    
    .show-mobile > div > img {
        width: 100%;
        grid-area: 1 / 1 / 4 / 4;
        /*display: none;*/
      }

    .hide-mobile {
      display: none;
    }

    .zahlen-grid {
    grid-template-columns: repeat(1, 1fr);
    }

    .impressum-grid {
    width: 65vw;
    display: grid;
    grid-template-columns: repeat(1, minmax(100px, 1fr));
    grid-gap: 10vw;
    }

}

@media all and (min-width: 769px) and (max-width: 1024px){
    ul {
        margin-left: -1vw;
    }
}

@media all and (min-width: 1025px){

    ul {
        margin-left: -0.5vw;
    }

  
}