/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

html {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

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

@font-face {
    font-family: 'GT-Super';
    src: url('fonts/GT-Super/WOFF2/GT-Super-Display-Light.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: "thal";
    src: url("fonts/thal.eot"); /* IE9 Compat Modes */
    src: url("fonts/thal.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
      url("fonts/thal.otf") format("opentype"), /* Open Type Font */
      url("fonts/thal.svg") format("svg"), /* Legacy iOS */
      url("fonts/thal.ttf") format("truetype"), /* Safari, Android, iOS */
      url("fonts/thal.woff") format("woff"), /* Modern Browsers */
      url("fonts/thal.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
  }

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




  .nextproject{  
      text-decoration: none;
      color: white;
  }
  .backtowork{
      text-decoration: none;
      color: white;
  }

body {
    background-color: black;
    color: white;
    font-family: "GT-Super";
    margin: 0;
    padding: 125px 42px 42px 42px;
    cursor: pointer;
    font-weight: 400;
}


.kopfzeile {
    display: flex;
    font-size: 30px;
    padding: 42px 42px 75px 42px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    justify-content: space-between;
    z-index: 10;
}

.kopfzeilemove{

    justify-content: center;
    display: flex;
    font-size: 30px;
    padding-bottom: 100px;  
    width: 100%;
    left: 0;
    top: 0;
}

.fusszeile {
    font-size: 30px;
    text-align: right;
    right: 0;
    bottom: 0;
}


.nextproject {
    padding-top: 5px;
}

.menue {
    display: flex;
    flex: 1;
    z-index: 100;
    justify-content: space-between;
}


.work {
    padding-right: 50px;
    text-decoration: none;
    color: white;
}

.index {
    padding-right: 50px;
    cursor: pointer;
}

.sprachen {
    display: flex;
    justify-content: center;
}

.sprache {
    padding: 0 5px;
}

.noeline {
    width: 380px;
    text-align: right;
}

.nextproject {
    text-decoration: none;
    color: white;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 0 42px 42px 0;
}

.lastproject{
    text-decoration: none;
    color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 0 42px 42px;
    
}

.vanitas7 {
    grid-column: 1 / span 10;
    grid-row: 3 / span 13;
}

.paris1 {
    grid-column: 12 / span 6;
    grid-row: 3 / span 9;
}

.london1 {
    grid-column: 19 / span 13;
    grid-row: 3 / span 9; 
}
.designermoebel2 {
    grid-column: 22 / span 10;
    grid-row: 47 / span 7; 
}
.ot {
    grid-column: 12/ span 8;
    grid-row: 40/ span 10; 
}
.font1 {
    grid-column: 1/ span 9;
    grid-row: 17/ span 8; 
}
.weltklasse1 {
    grid-column: 3/ span 9;
    grid-row: 25/ span 15; 
}

.apg1 {
    grid-column: 15/ span 5;
    grid-row: 26/ span 11; 
}

.bildwelten {
    grid-column: 22/ span 9;
    grid-row: 20/ span 11; 
}

.fotolayout3 {
    grid-column: 1/ span 9;
    grid-row: 44/ span 7; 
}
 
.vorprojekt1 {
    grid-column: 22/ span 8;
    grid-row: 34/ span 10; 
}

.apg2 {
    grid-column: 12/ span 8;
    grid-row: 13/ span 11; 
}
 
.fiveleafclover {
    grid-column: 22 / span 10;
    grid-row: 13 / span 15; 
}   

.corporate {
    grid-column: 1/ span 16;
    grid-row: 52/ span 20; 
}   
.illustration1 { 
    grid-column: 19 / span 9;
    grid-row: 55/ span 20; 
} 


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


.thal {
    font-family: 'thal';
    letter-spacing: -0.01em;
    font-size: 200px;

}


.text { 
    font-size: 30px;
    color: white;
    margin: 0;
}

.angaben {
    columns: 1;
    margin: 0%;
    font-size: 15px;
    line-height: 21px;
}

.titel {
    margin: 0px;
    font-size: 30px;   
    padding: 55px 0 5px 0;
   
}

.projektinfo {
    display: flex;
    
}

.vanitasbild1 {
    flex: 1;
}

.vanitasbild2 {
    
    flex: 3;
}


.projektbild {
    padding: 0 20px 0 20px;
    max-height: 80vh;
    width: 100%;
    object-fit: contain;
}
.projektbildmehrpadding {
    padding: 0 20px 100px 20px;
    max-height: 80vh;
    width: 100%;
    object-fit: contain;
}

.projektbild-box {
    text-align: center;
}
.projektbild-box-20 {
    width: 20%;
}
.projektbild-box-26 {
    width: 26%;
}
.projektbild-box-36 {
    width: 36%;
}
.projektbild-box-32 {
    width: 32%;
}
.projektbild-box-30 {
    width: 30%;
}
.projektbild-box-40 {
    width: 40%;
}

.projektbild-box-50 {
    width: 50%;
}
.projektbild-box-54 {
    width: 54%;
}
.projektbild-box-60 {
    width: 60%;
}

.projektbild-box-64 {
    width: 64%;
}
.projektbild-box-66 {
    width: 66%;
}
.projektbild-box-68 {
    width: 68%;
}
.projektbild-box-70 {
    width: 70%;
}
.projektbild-box-72 {
    width: 72%;
}
.projektbild-box-80{
    width: 80%;
}
.projektbild-box-85 {
    width: 85%;
}
.projektbild-box-85 {
    width: 100%;
}

.noelinee {
    font-size: 30px;
}


.gleichklang.aktiv {
    display: block;  
}   

.noelineschliesser {
    text-align: left;
    left: 0;
    color: white;
    text-decoration: none;
    display: block;
    padding: 0 0 10px 0;
    line-height: 90px;  
}

.indexliste {
    position: fixed;
    left: 0;
    top: 0;
    padding: 175px 42px 42px 42px;
    font-size: 70px;
    overflow-y: scroll;
    box-shadow: 20px 0 20px rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    display: none;
    width: 70%;
    background-color: black;
    
}

.indexliste.aktiv {
    display: block; 
}

.indexliste-link {
    color: white;
    text-decoration: none;
    display: block;
    padding: 0 0 10px 0;
    line-height: 90px;  
}

.indexliste-link:hover {
    font-style: italic;
}

.indexschliesser {
    text-align: right;
    right: 0;
    color: white;
    text-decoration: none;
    display: block;
    
     
}


/* Smartphone */
@media (max-width: 859px) {
    .text {
        font-size: 20px;
        color: white;
        margin: 0;
    
    }
    .noelinee {
        display:none;
    }
    .noeline-ohne {
        font-size: 20px;
    }
    
    .kopfzeile {
        font-size: 20px;
        padding: 21px 21px 21px 21px;
    }
    .noeline {
        width: 780px;
        flex-grow:1;
    }
    .sprache {
        padding: 0 2px;
    }

    .sprachen{
        max-width: 300px;
        right: 0;
    }
    .work {
        padding-right: 15px;
    }
    .index {
        padding-right: 15px;

    }
    .gleichklang.noelinee{
        font-size: 20px;
}
    .angaben {
        font-size: 12px;
        columns: 1;
        margin: 0%;
        padding-top: 15px;
        line-height: 18px
    }

    body {
        padding: 84px 21px 37.5px 21px;
    }

    .indexliste-link {
        color: white;
        text-decoration: none;
        display: block;
        padding: 0 0 7px 0;
        line-height: 20px;
        font-size: 20px;
        line-height: 23px ;
    }
    
    .indexliste {
        background-color: black;
        position: fixed;
        left: 0;
        top: 0;
        max-width: 70vw ;
        padding: 87.5px 21px 21px 21px;
        display: none;
        font-size: 15px;
        max-height: 700px;
        font-size: 20px;
       
    }
    .nextproject {
        text-decoration: none;
        color: white;
        position: fixed;
        bottom: 0;
        right: 0;
        padding: 0 21px 21px 0;
        font-size: 20px;
    }
    
    .lastproject{
        text-decoration: none;
        color: white;
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 0 0 21px 21px;
        font-size: 20px;
    }
    .titel {
        margin: 0px;
        font-size: 20px;   
        padding: 0px 0 5px 0;
       
    }
    .projektinfo {
        flex-direction: column;
        padding: 0 0 50px 0;
    }
    .projektbild {
        padding: 0 10px 0 10px;
        max-height: 90vh;
        justify-content: center;
        width: 90vw;
        padding: 25px 0px 25px 0px;
    }
    
    .impressum {
        position: absolute;   
        position: bottom;
    }

    .rasterbild{
        padding: 20px 0px 20px 0px;
    }
    .textnoeline {
        display: none;
        font-size: 20px;
        position: fixed;
        max-width: 70vw;
        right: 0;
        top:0;
        padding: 87.5px 21px 21px 21px;
        overflow-y: scroll;
        max-height: 500px;
        background-color: black;
    }
    .p{ 
        margin: 0;
    }

}

    


/* Desktop */
@media (min-width: 860px) {
    .text {
        background-color: black;
        max-width: 70%;
    }
    .angaben {
        width: 30%;
        padding-left: 80px;
        padding-top: 8px;
        line-height: 22px;
    }
    .startseite {
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(31, 1fr);
        grid-template-rows: repeat(66, calc( (100vw - 84px) / 31) );
    }
    
    .projektbilder {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
    }
   
    .projektbild{
        padding: 30px 30px 30px 30px;
    }
    .projektinfo {
        padding: 0 0 90px 0;
    }
    .indexliste {
        max-height: 45vw;
    }
    .textnoeline {
        display: none;
        font-size: 30px;
        position: fixed;
        max-width: 45vw;
        right: 0;
        padding: 35px 42px 42px 42px;
        overflow-y: scroll;
        max-height: 50vw;
        background-color: black;
    }
    .noeline-ohne {
        display:none;
    }
}