html {
    box-sizing: border-box;
}

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

@font-face {
    font-family: 'Glypha';
    src: url('28ee96d9-04b2-4057-85da-c1098a81970a.woff2') format('woff2'),
        url('c211664d-2fe0-4bf4-bb9f-28e00e2e0916.woff') format('woff');
    font-weight: 400;
}


.container__prozess {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: min-content;
    flex-wrap: wrap;
    padding: 1.65vw;
    padding-bottom: calc(1.65vw + 3.3vw);
    justify-content: flex-end;
    background-color: lightgray;
}

.container__prozess.aktiv {
    display: flex;
}

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


    .variante {
        width: 50%;
        /* schriftgrösse(25) / bildschirmbreite(1600) * 100 */
        font-size: 3.2vw;
    }


    .boxen__link:hover .boxen__box-hover {
        opacity: 1;
        transition: 0.8s;
        display: none;
    }


.balken__plus {
    display: none;
}

    .kentnisse {
        width: 9.9vw;
        float: right;
        margin-top: 6.3vw;
        margin-right: -0.4vw;
    }

    .kentnisse__ausnahme {
        font-size: 2.8vw;
        align-items: center;
        margin-top: 1.8vw;
        margin-bottom: 0;
        margin-left: -0.5vw;
        line-height: 1.9vw;
        width: 75%;
        line-height:3.3vw;
    }

    .kentnisse__lauftext {
        font-size: 2.8vw;
        align-items: center;
        margin-top: -0.9vw;
        margin-bottom: 0;
        margin-left: -0.5vw;
        line-height: 1.9vw;
        width: 75%;
        line-height: 3.4vw;
    }

    .text__endseite {
        font-size: 2.8vw;
        ;
        align-items: center;
        margin-top: -0.9vw;
        margin-bottom: 0;
        margin-left: -0.8vw;
        line-height: 1.9vw;
        width: 106%;
        line-height: 3.4vw;
    
    }

    #hamburger-close {
        display: none;
        width: 5vw;
    }
    
    
    #hamburger-open {
        display: block;
        width: 5vw;
    }

    .menue {
        position: absolute;
        left: 0;
        top: 0;
        display: none;
        background-color: white;
        border: 0.4vw solid black;
        z-index: 90;
        /* Breite/Höhe: 100% minus margin auf beiden Seiten */
        width: calc(100% - -13.8vw);
        height: calc(100% - -14.2vw);
        margin-top: 1.2vw;
        margin-left: -15.2vw;
        padding: 2.2vw;
    }

    .menue__sprachen {
        font-size: 3.2vw;
    }
    
    .repros_1 {
        width: 93.5vw;
        height: auto;
        margin: 1.65vw;
    }

    .stimmungsbild {
        margin-top: 60vw;
        width: 100%;
       align-self: center;
    }

    .stimmungsbild__ausnahme {
        margin-top: 60vw;
        width: 107%;
       align-self: center;
    }

    .repros--transform__quer {
        transform: translate(0, 3.3vw);
        width: 45vw;
        height: auto;
        margin: 1.65vw;
    }


    .repros--transform {
        transform: translate(0, 3.3vw);
        width: 45vw;
        height: auto;
        margin: 1.65vw;
    }


    .repros {
        width: 45vw;
        height: auto;
        margin: 1.65vw;
    }

    .repros_1 {
        width: 93.5vw;
        height: auto;
        margin: 1.65vw;
    }

    .repros__3 {
        width: 93.5vw;
        height: auto;
        margin: 1.65vw;
    }

    
   

    .text {
        padding: 3.3vw;
        position: absolute;
        top: 0;
        left: 0;
        width: 95vw;
        
    }

    .titel {
        font-size: 5.56vw;
        text-decoration: underline 0.4vw;
        text-underline-position: under;
        margin: 0;
    
    }
    
    .lauftext {
        font-size: 3.2vw;
        
    }
    
    .lauftext__ausnahme {
        font-size: 3.2vw;
        
    }
    
    .lauftext__ausnahme_2 {
        font-size: 3.2vw;
        
    }

    .boxen__link {
        width: calc(50% + 0.99vw);
        margin: -1vw 0 0 -1vw;
        position: relative;
    }

    .variante__container {
        display: flex;
        align-items: flex-end;
        height: 93%;
        flex-wrap: wrap;
    }

}


@media screen and (min-width: 833px) {

    .variante {
        width: 50%;
        /* schriftgrösse(25) / bildschirmbreite(1600) * 100 */
        font-size: 1.56vw;
    }

    .boxen__link:hover .boxen__box-hover {
        opacity: 1;
        transition: 0.8s;
        
    }

    .variante__container {
        display: flex;
        align-items: flex-end;
        height: 94.5%;
        flex-wrap: wrap;
    }

    .menue__sprachen {
        font-size: 1.56vw;
    }

    #hamburger-close {
        display: none;
    }

    .kentnisse {
        width: 5.5vw;
        float: right;
        margin-top: 3.6vw;
        margin-right: -0.4vw;
    }
    
    .kentnisse__ausnahme {
        font-size: 1.56vw;
        align-items: center;
        margin-top: 1.8vw;
        margin-bottom: 0;
        margin-left: -0.5vw;
        line-height: 1.9vw;
        width: 75%;
        line-height: 1.95vw;
    }
    
    .text__endseite {
        font-size: 1.56vw;
        ;
        align-items: center;
        margin-top: -0.9vw;
        margin-bottom: 0;
        margin-left: -0.5vw;
        line-height: 1.9vw;
        width: 106%;
        line-height: 1.95vw;
    
    }

    .kentnisse__lauftext {
        font-size: 1.56vw;
        align-items: center;
        margin-top: -0.9vw;
        margin-bottom: 0;
        margin-left: -0.5vw;
        line-height: 1.9vw;
        width: 75%;
        line-height: 1.95vw;
    }
    
    #hamburger-open {
        display: block;
    }

    .menue {
        position: absolute;
        left: 0;
        top: 0;
        display: none;
        background-color: white;
        border: 0.15vw solid black;
        z-index: 90;
        /* Breite/Höhe: 100% minus margin auf beiden Seiten */
        width: calc(100% - 1.8vw);
        height: calc(100% - 1.8vw);
        margin-top: 0.8vw;
        margin-left: 0.8vw;
        padding: 2.2vw;
    }
    
    .body {

        margin-right: 300px;
    }
    
    .boxen__link {
        width: calc(33.33% + 1vw);
        margin: -1vw 0 0 -1vw;
        position: relative;
    }

    .repros__3 {
        width: 63.5vw;
        height: auto;
        margin: 1.65vw;
    }

    .stimmungsbild {
        width: 100%;
    }

    .stimmungsbild__ausnahme {
        width: 100%;
    }

    .repros_1 {
        width: 63.5vw;
        height: auto;
        margin: 1.65vw;
    }

    .repros {
        width: 30vw;
        height: auto;
        margin: 1.65vw;
    }


    .text {
        padding: 3.3vw;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        width: 35vw;
        height: 100vh;
    }

    .repros--transform__quer {
        transform: translate(0, 3.3vw);
        width: 30vw;
        height: 20vw;
        margin: 1.65vw;
    }
    
    .titel {
        font-size: 1.56vw;
        text-decoration: underline 0.112vw;
        text-underline-position: under;
        margin: 0;
    
    }
    
    .lauftext {
        font-size: 1.2vw;
        padding-right: 3vw;
    }
    
    .lauftext__ausnahme {
        font-size: 1.2vw;
        padding-right: 2vw;
    }
    
    .lauftext__ausnahme_2 {
        font-size: 1.2vw;
        padding-right: 4vw;
    }
    
    .repros--transform {
        transform: translate(0, 3.3vw);
        width: 30vw;
        height: auto;
        margin: 1.65vw;
    }

    .container__prozess {
        display: none;
    }

}


body .de,
body .en,
body .it,
body .fr,
body .es {
    display: none;
}

body.de .de,
body.en .en,
body.fr .fr,
body.it .it,
body.es .es {
    display: initial;
}

.sprachumschalter {
    cursor: pointer;
}



.body {
    margin: 0;
    font-family: Glypha, serif;
}

.hamburger {
    position: absolute;
    z-index: 100;
    right: 3.2vw;
    top: 3.2vw;
    width: 2.5vw;
    cursor: pointer;
}





.menue__projekte {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    height: 25.52vw;
    right: -0.1vw;
    top: 0;
    width: 34.1vw;
    height: 34.1vw;

}



.menue__sprache:hover {
    color: #4079A3;
    cursor: pointer;
}



.menue__endseite {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(255, 255, 255);
    opacity: 80%;
    z-index: 90;
    /* Breite/Höhe: 100% minus margin auf beiden Seiten */
    width: calc(100% - 8.8vw);
    height: calc(100% - 9.1vw);
    margin: 4.4vw 4.4vw 4.7vw 4.4vw;
    padding: 2.5vw;
}








.variante__text:not(:nth-last-child(1)) {
    margin-bottom: calc(2.5vw / 2);
}



.variante__link__ausnahme {
    text-decoration: none;
    color: #4079A3;
}


.variante__link {
    text-decoration: none;
    color: black;
}

.variante__link:hover {
    cursor: pointer;
    color: #4079A3;
}


.boxen {
    display: flex;
    flex-wrap: wrap;
    padding: 1vw 0 0 1vw;

}



.boxen__box {
    width: 100%;
    display: block;
}

.boxen__box-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.6s;
}







.Burgermenu {
    font-size: 35px;
    padding: 30px;
    border: 1px solid black;
    margin: 20px;
}



.Bilder {
    display: block;
    width: 30%;
    background-image: url();
}

.Bilder:hover {
    width: 30%;
}



.container {
    display: flex;
    align-items: flex-end;
    height: 96%;
    flex-wrap: wrap;
    gap: 5px;

}



.container__ich {
    margin-left: 7.75vw;
}



.container__link {
    text-decoration: none;
    color: black;
}

.container__link:hover {
    cursor: pointer;
    color: #4079A3;
}








.container__repros__essen {
    display: flex;
    width: 100%;
    height: min-content;
    flex-wrap: wrap;
    padding: 1.65vw;
    padding-bottom: calc(1.65vw + 3.3vw);
    justify-content: flex-end;
    background-color: rgba(255, 228, 93, 0.569);
}

.container__repros__master {
    display: flex;
    width: 100%;
    height: min-content;
    flex-wrap: wrap;
    padding: 1.65vw;
    padding-bottom: calc(1.65vw + 3.3vw);
    justify-content: flex-end;
    background-color: rgba(255, 0, 191, 0.516);
}

.container__repros__lutz {
    display: flex;
    width: 100%;
    height: min-content;
    flex-wrap: wrap;
    padding: 1.65vw;
    padding-bottom: 1.65;
    justify-content: flex-end;
    background-color: rgba(103, 103, 103, 0.624);
}


.container__repros__envirobot {
    display: flex;
    width: 100%;
    height: min-content;
    flex-wrap: wrap;
    padding: 1.65vw;
    padding-bottom: 1.65;
    justify-content: flex-end;
    background-color: rgba(255, 242, 0, 0.516);
}

.container__repros__TR {
    display: flex;
    width: 100%;
    height: min-content;
    flex-wrap: wrap;
    padding: 1.65vw;
    padding-bottom: 1.65;
    justify-content: flex-end;
    background-color: rgba(180, 180, 180, 0.269);
}

.container__repros__siebdruck {
    display: flex;
    width: 100%;
    height: min-content;
    flex-wrap: wrap;
    padding: 1.65vw;
    padding-bottom: calc(1.65vw + 3.3vw);
    justify-content: flex-end;
    background-color: rgba(185, 93, 255, 0.299);
}


.container__repros__energie {
    display: flex;
    width: 100%;
    height: min-content;
    flex-wrap: wrap;
    padding: 1.65vw;
    padding-bottom: 1.65vw;
    justify-content: flex-end;
    background-color: rgba(255, 0, 0, 0.299);
}

.container__repros__london {
    display: flex;
    width: 100%;
    height: min-content;
    flex-wrap: wrap;
    padding: 1.65vw;
    padding-bottom: calc(1.65vw + 3.3vw);
    justify-content: flex-end;
    background-color: rgba(0, 255, 42, 0.299);
}

.container__repros__lausanne {
    display: flex;
    width: 100%;
    height: min-content;
    flex-wrap: wrap;
    padding: 1.65vw;
    padding-bottom: calc(1.65vw + 3.3vw);
    justify-content: flex-end;
    background-color: rgba(255, 221, 0, 0.299);
    margin-top: -0.3vw;
}

.container__repros__london {
    display: flex;
    width: 100%;
    height: min-content;
    flex-wrap: wrap;
    padding: 1.65vw;
    padding-bottom: calc(1.65vw + 3.3vw);
    justify-content: flex-end;
    background-color: rgba(0, 255, 81, 0.299);
    margin-top: -0.3vw;
}

.container__repros__BT {
    display: flex;
    width: 100%;
    height: min-content;
    flex-wrap: wrap;
    padding: 1.65vw;
    padding-bottom: 1.65;
    justify-content: flex-end;
    background-color: rgba(0, 166, 255, 0.624);
}

.container__repros__dino {
    display: flex;
    width: 100%;
    height: min-content;
    flex-wrap: wrap;
    padding: 1.65vw;
    padding-bottom: 1.65vw;
    justify-content: flex-end;
    background-color: rgba(255, 166, 0, 0.299);
}





.prozess {
    width: 30vw;
    height: auto;
    margin: 1.65vw;
}


.prozess__quer {
    width: 30vw;
    height: 20vw;
    margin: 1.65vw;
}










.kentnisse__text {
    position: absolute;
    z-index: 100;
    /* Breite/Höhe: 100% minus margin auf beiden Seiten */
    width: calc(100% - 8.8vw);
    height: calc(100% - 9.1vw);
    margin: 4.4vw 4.4vw 4.7vw 4.4vw;
    padding: 2.5vw;
}














.verlinkung {
    color: #4079A3;
    text-decoration: none;
}

.grauer__bereich {
    width: 100%;
    height: 0;
    transition: 1s all ease;
}

/* .grauer__bereich--open {
    height: auto;
    width: 100%;
    background-color: lightgray;
} */

.grauer__balken {
    background-color: lightgrey;
    opacity: 1;
    width: 100%;
    height: 6.6vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grauer__balken--open {
    opacity: 0;
}

.balken__plus {
    opacity: 1;
    transition: 1s all ease;
    margin: 0;
    font-size: calc(3.3vw + 1.65vw);
}

.balken__plus.aktiv .open {
    display: none;
}

.balken__plus.aktiv .close {
    display: block;
}





.open {
    width: 3.5vw;
    cursor: pointer;
}

.close {
    width: 2.5vw;
    cursor: pointer;
    display: none;
}