html {
    box-sizing: border-box;
}

*, *:after, *:before {
    box-sizing: border-box;
}

@font-face {
    font-family:'euclid';
    src: url('fonts/EuclidCircularA-Regular-WebS.woff2') format('woff2'),
         url('fonts/EuclidCircularA-Regular-WebS.woff') format('woff');
}

.body {

    margin: 0;
    font-family: 'euclid';
}

body .de,
body .en {
    display: none;
}

body.de .de, 
body.en .en {
    display: initial;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {

    color: rgb(204, 204, 204);
}

.projekte__projekt {
    
    padding: 0 30px 60px 30px;
    width: 33.33%;
    position: relative;

}

.projekte__projektinhalt {

    position: relative;

}

.projekte__bild {

    width: 100%;
    display: block;
    opacity: 1;
    
}

.projekte__text {

    position: absolute; 
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    /* align-items: center; */
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    /* background-color: rgb(201, 201, 201); */
    background-color: white;
    font-size: 40px;
    transition-duration: 00.2s;
    left: 0;
    top: 0;
    /* text-align: center; */
    color: black;

}

.projekte__text:hover {

    transition-duration: 0.2s;
    opacity: 1;
    

}


.projekte__text__klein {
    
    font-size: 20px;
    z-index: 1;

}

.menueleiste {

    background-color: white;
    display: flex;
    justify-content: space-between;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 3;
    

}

.menueleiste__text1:hover {

    color: rgb(201, 201, 201);
    text-decoration: none;
    justify-content: flex-start;
}

.menueleiste__text1 {
    
    display: flex;
    justify-content: flex-start;
}

.menueleiste__text2:hover {

    color: rgb(201, 201, 201);
    text-decoration: none ;
    justify-content: center;
}


.video-container{

    display: block;;
    width: 100%;
    position: relative;
    
}

.sprachumschalter:hover {

    color: rgb(201, 201, 201);
    justify-content: end;
    padding: 0px 0px 0px 20px;
}

.sprachumschalter{
    padding: 0px 0px 0px 20px;
    cursor: pointer;
}

.sprachen__nebeneinander {
    display: flex;
}

.menueleiste__text__1 {

    size: 20px;
    color: black;
}


.projektintro__bild {

    width: 100%;
    display: block;
    background-color: blue;

}

.projektbilder__box {
    
    width: 50%;
    padding: 30px 30px 30px 30px;

}

.projektbilder__box--breit {

    width: 100%;

}


.menuleiste__unten {

    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0px 30 15px 30px;
    align-items: flex-end;
    left: 0px;
    right: 0px;
}

.menueleiste__unten__text {
    color: black;
    font-size: 20px;
}

.menueleiste__unten__text1:hover {

    color: rgb(201, 201, 201);
    text-decoration: none;
}

.menueleiste__unten__text2:hover {

    color: rgb(201, 201, 201);
    text-decoration: none;
}

.mein-link {
    color: black;
    text-decoration: none;
}
  

.mein-link:hover {
    color: blue;
    text-decoration: underline;
}
  



@media (max-width: 900px) {

    .body {

        padding: 48px 15px 15px 15px;

    }

    .projekte__projekt {
    
        padding: 30px 0 0 0;
        width: 100%;
    
    }
    
    .menueleiste {

        background-color: white;
        display: flex;
        justify-content: space-between;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 3;
        padding: 15px 15px 15px 15px;
        text-decoration: none ;
    
    }

    .projektintro__daten {
    
        width: 100%;
        margin-top: 5px;
        padding: 30px 15px 0px 15px;
        /* text-align: right; */
        /* align-self: flex-end; */
        font-size: 12px;
        margin: 0px;
        order: 2;
        
    }

    
    .projektbilder__box {
    
        width: 100%;
        padding: 15px 0 15px 0;
        
    
    }

    .menuleiste__unten {

        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0px 15px 15px 15px;
        align-items: flex-end;
        left: 0px;
        right: 0px;
    }

    .projektintro__projekt {
    
        /* padding: 0px 0px 0px 60px; */
        margin: 0 -15px 0 -15px;
        order: 1;
    
    }

    .projektintro__text {

        width: 100%;
        font-size: 20px;
        order: 2;
        
    }

    .projektintro {
    
        flex-direction: column;

    }

    .projektintro__box{
        
        display: flex;
        flex-direction: column;
    }

    .projektintro__absatz {

       padding: 15px 15px 30px 15px;
       margin: 0px;
    
    }

    .projektintro__header{

        font-size: 30px;
        margin: 0px;
        padding: 30px 15px 0px 15px;

    }

    .projektbilder__bild {

        width: 100%;
        padding: ;
       
    }

    .projektintro__faehigkeiten{
        display: flex;
        /* padding: 0 30px 60px 30px; */
        width: calc(100% * 3/6);
        width: 100%;
        margin-top: 30px;
    
    }
    
    .projektintro__programme {
    
        font-size: 20px;
        margin: 0px;
        padding: 0px 30px 0px 15px;    
        
    }
    
    .projektintro__sprache{
        font-size: 20px;
        margin: 0px;
       
        
    }
}

@media (min-width: 901px) {
    
    .body {

        padding: 50px 60px 60px 60px;

    }

    .projektintro {

        display: flex;
        align-items: flex-start;
    
    } 
    .menueleiste {

        padding: 15px 60px 15px 60px;

    }

    .projekte {

        display: flex;
        margin: 0 -30px 0 -30px;
        flex-wrap: wrap;
    
    }

    .projektbilder {

        display: flex;
        flex-wrap: wrap;
        margin: 0 -30px;
    
    }

    .projektintro__daten {
    
        width: calc(100% * 1/3);
        margin-top: 5px;
        /* padding: 0 30px 60px 30px; */
        text-align: right;
        align-self: flex-end;
        font-size: 15px;
        margin: 0px;
        padding: 0px 30px 0px 0px;
    
    }

    .projektintro__text{

        padding: 0 30px 60px 30px;
        width: calc(100% * 3/6);
        font-size: 20px;
        
    }

    .projektintro {

        margin: 0 -30px 0 -30px;
        flex-direction: row;

    }


    .projektintro__projekt {
        
        padding: 0 30px 0px 30px;
        width: calc(100% * 2/3);

    }

    .projektintro__absatz {

        margin: 0;
    
    }

    .projektintro__header{

        font-size: 40px;
        margin: 0px 0px 20px 0px;
    }

    .projektbilder__bild {

        width: 100%;
        
    }

    .projektintro__box{
        display: flex;
        flex-direction: row;
        width: calc(100% * 3/6);
        padding: 0px 0px 30px 0px;
       
    }

    .projektintro__faehigkeiten{
        display: flex;
        /* padding: 0 30px 60px 30px; */
        width: calc(100% * 3/6);
        width: 100%;
        margin-top: 30px;
    
    }
    
    .projektintro__programme {
    
        font-size: 20px;
        margin: 0px;
        padding: 0px 30px 0px 15px;    
        
    }
    
    .projektintro__sprache{
        font-size: 20px;
        margin: 0px;
       
        
    }
    
}