@font-face {
    font-family: 'Pitch';
    src: url(font/pitch-sans-bold.woff2) format('woff2');
}

body
{
    font-family:'Pitch';
    padding: 0em;
	margin:0em;
    background-color:rgb(108, 108, 108);
    background-color:rgb(97, 106, 206);
    background-color:rgb(50, 67, 255);
    background-color:rgb(76, 60, 56);
    background-color:rgb(75, 97, 95);
    background-color:rgb(79, 107, 84);
    background-color:rgb(0, 55, 255);
    background-color:#A55638;
    background-color:#7F897C;
    background-color:#ff7547;
    background-color:#486150;
    line-height: 0;
   
    color: #DBC9B1;

}


video
{
    content: normal;

}

body {
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

::-webkit-scrollbar
{ 
    display: none; 
}



a:link {text-decoration: none; color:#DBC9B1;}
a:hover {text-decoration: underline; color:#DBC9B1;}
a:visited {text-decoration: none; color:#DBC9B1;}



/* K G P */

#konrad
{
  
   position: fixed;
   top:0;
   left:0.5vw;
   font-size: 14vw;
   line-height:  90%;
   z-index: 100;
   transform: rotate(20deg);
   display: none;
   
}

#gustav
{
    position: fixed;
    top:0;
    right:0.5vw;
    font-size: 14vw;
    line-height: 60%;
    z-index: 100;
    transform: rotate(40deg);
    display: none;
}

#paula
{
    position: fixed;
    bottom:2vw;
    left:0.5vw;
    font-size: 14vw;
    line-height:  90%;
    z-index: 100;
    transform: rotate(-10deg);
    display: none;
}

#who
{
    position: fixed;
    top:1vw;
    right:2vw;
    z-index: 100;
}



#who img
{
    width:28vw;
}

@media screen and (orientation: portrait)
{
  #who img
    {
        display: none;
    }
}



#kgp-claim-logo
{
    display: flex;
    position: fixed;
    bottom:0vw;
    left:-1vw;
    z-index: 100;

}

#kgp-claim-logo img
{

    width: 20vw;
    
}

@media screen and (orientation: portrait)
{
  #kgp-claim-logo img
    {

        width: 60vw;
        
    }
}

#kgp-logo-short
{
    display: flex;
    position: fixed;
    bottom:0.8vw;
    left:24vw;
    z-index: 100;

}

@media screen and (orientation: portrait)
{
  #kgp-logo-short
    {
        display: flex;
        position: fixed;
        bottom:3vw;
        left:72vw;
        z-index: 100;

    }
}


#kgp-logo-short img
{

    width: 9vw;
    
}

@media screen and (orientation: portrait)
{
  #kgp-logo-short img
    {

        width: 20vw;
        
    }
}

#color-block
{
    display: flex;
    width: 100vw;
    height:1dvh;
    position: fixed;
    bottom:0vw;
    left:0vw;
    z-index: 100;
    background-color: #DBC9B1;
}





/* K G P Ende */


/* Navigation */

/*
#nav
{
    position: fixed;
   
    bottom:7vw;
    right:1vw;
    font-size: 1vw;
    line-height: normal;
    z-index: 100;
}*/

#nav
{
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: end;
    align-items: start;
    width:40vw;
    bottom:4vw;
    right:2vw;
    z-index: 100;
    
}

@media screen and (orientation: portrait)
{
    #nav
    {
        position: fixed;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        align-items: start;
        width:100vw;
        bottom:45dvh;
        right:2vw;
        z-index: 100;
        
    }

}

#nav div
{
    
    font-size: 1.5vw;
    line-height: normal;
    margin-left:0vw;
    backdrop-filter: blur(11px);
    padding:1vw;
    border-radius: 0.6vw;
}

@media screen and (orientation: portrait)
{
    #nav div
    {
        
        font-size: 4vw;
        line-height: normal;
        margin-left:0vw;
        backdrop-filter: blur(50px);
        padding:4vw;
        border-radius: 0.6vw;
    }

}

.nav_aktiv
{
    text-decoration: underline;
    font-size: 1.5vw;
    line-height: normal;
    margin-left:1vw;
}


#open-close-nav
{
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: end;
    align-items: start;
    bottom:14vw;
    right:2vw;
    z-index: 100;
    font-size: 2vw;
    line-height: normal;
    margin-left:0vw;
    backdrop-filter: blur(60px);
    padding:2vw;
    border-radius: 0.6vw;
    display: none;

    cursor: pointer;
    
}

@media screen and (orientation: portrait)
{
    #open-close-nav
    {
        position: fixed;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: end;
        align-items: start;
        bottom:84dvh;
        right:6vw;
        z-index: 100;
        font-size: 4vw;
        line-height: normal;
        margin-left:0vw;
        backdrop-filter: blur(60px);
        padding:8vw;
        border-radius: 0.6vw;
        display: none;
        
    }

}

/* Navigation Ende */

/* Filter */
#filter
{
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    z-index: 99;
    bottom:2vw;
    right:50vw;
    row-gap: 0.3vw;

}

.filter_name
{
    display: flex;
    justify-content:start;
    align-items:center;
    padding-left:0.5vw;
    margin-right:2vw;
}

.checkbox_frame
{
    display: flex;
    justify-content:center;
    align-items:center;
    height:3vw;
    width:3vw;
    background-color: white;
    border: 1px solid black;
}


#filter_wein
{
    display: flex;
    flex-wrap: wrap;
}

#checked_wein
{
    width:0.5vw;
    height:0.5vw;
    background-color: rgb(0, 0, 0);
    border-radius: 100%;
}

#filter_keinwein
{
    display: flex;
    flex-wrap: wrap;
}

#checked_keinwein
{
    width:0.5vw;
    height:0.5vw;
    background-color: rgb(0, 0, 0);
    border-radius: 100%;
}

/* Filter Ende */



/* Cover */

#cover
{
    position: absolute;
    top:0;
    left:0;
    width: 100vw;
    height:100dvh;
    background-image:url(cover/1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

}


.cover_text
{
    position: fixed;
    top:0;
    z-index:2;
    padding-left:9vw;
    font-size: 1vw;
    line-height: normal;
    width:50vw;
    text-transform: uppercase;
}

.call_us
{
    position: fixed;
    bottom:2vw;
    z-index:2;
    padding-left:9vw;
    font-size: 1vw;
    line-height: normal;
    width:50vw;
    text-transform: uppercase;
}

/* Cover Ende */

/* Studio */

#studio_textblocks
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-left:9vw;
    gap: 2vw;
    width:40vw;
    margin-bottom:3vw;

    min-height: 100dvh;
}


.studio_textblock
{
    text-transform: uppercase;
    line-height: normal;
}



/* Studio Ende */


/* Projekte */

#projekte
{
    
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: start;
    align-items: start;
}

#projekte div
{
    width:50dvw;
}

#projekte div video
{
    width:50dvw;
}

.projekte_projekt_name
{
    
    position:absolute;
    z-index: 80;
    text-transform: uppercase;
    line-height: normal;
}

.projekte_projekt_abbildung
{
    
    
    position: relative;
    
}

.projekte_projekt_abbildung img
{
    
    
    border-radius: 0.6vw;
    
}

.projekte_projekt_abbildung video
{
    
    
    border-radius: 0.6vw;
    
}


/* Projekte Ende */


/* Projekt */

#projekt
{
    display: grid;
    grid-template-columns: 1fr;
}

.projekt_name
{
    
    position:fixed;
    z-index: 90;
    top:0;
    text-transform: uppercase;
    line-height: normal;
}

.projekt_beschreibung
{
    
    /*position:fixed;
    z-index: 90;
    top:2vw;
    left:9vw;*/
    padding-top:2vw;
    padding-left:9vw;
    height:97dvh;
    text-transform: uppercase;
    line-height: normal;
    width:50vw;
}

.projekt_einspaltig_querformat
{
    display: grid;
    grid-template-columns: 1fr;
    
}



.projekt_einspaltig_querformat img
{
    width:100vw;
    height:auto;
}

.projekt_einspaltig_querformat video
{
    width:100vw;
    height:auto;
}


.projekt_einspaltig_hochformat
{
    display: flex;
    justify-content:center;
    align-items:center;
    height: 100dvh;
    background-color: black;
    
}

.projekt_einspaltig_hochformat img
{
    width:20vw;
    height:auto;
}

.projekt_einspaltig_hochformat video
{
    width:20vw;
    height:auto;
}



.projekt_zweispaltig_hochformat
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100dvh;
    background-color: black;
    
}

.projekt_zweispaltig_hochformat div
{
    display: flex;
    justify-content:center;
    align-items:center;
    gap: 20vw;
    
}

.projekt_zweispaltig_hochformat img
{
    width:20vw;
    height:auto;
}


.projekt_zweispaltig_querformat
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    
}

.projekt_zweispaltig_querformat div
{
    
    display: flex;
    justify-content:start;
    align-items:center;
    /*height: 30vw;*/
    overflow: hidden;
    
}

.projekt_zweispaltig_querformat img
{
    width:50vw;
    height:auto;
}

.projekt_zweispaltig_querformat video
{
    width:50vw;
    height:auto;
}

/* Projekt Ende */


/* Rechtliches */

#rechtliches
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-left:9vw;
    gap: 2vw;
    width:40vw;
    margin-bottom:3vw;
}

.rechtliches_textblock
{
    text-transform: uppercase;
    line-height: normal;

}
/* Rechtliches Ende */


/* ------------------------------------------------------------------------- */
/* Mobile */


@media screen and (orientation: portrait)
{

/* K G P */

#konrad
{
   top:2vw;
   left:0.5vw;
   font-size:30vw;
   
}

#gustav
{
    top:2vw;
    right:0.5vw;
    font-size:30vw;
}

#paula
{
    bottom:4vw;
    left:0.5vw;
    font-size:30vw;
}

/* K G P Ende */



/* Filter */
#filter
{
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    z-index: 99;
    bottom:4vw;
    right:10vw;
    row-gap: 0.3vw;
}

.filter_name
{
    display: flex;
    justify-content:start;
    align-items:center;
    padding-left:1.2vw;
    margin-right:3vw;
    font-size:3vw;
}

.checkbox_frame
{
    display: flex;
    justify-content:center;
    align-items:center;
    height:9vw;
    width:9vw;
    background-color: white;
    border: 1px solid black;
}


#filter_wein
{
    display: flex;
    flex-wrap: wrap;
}

#checked_wein
{
    width:1.5vw;
    height:1.5vw;
    background-color: rgb(0, 0, 0);
    border-radius: 100%;
}

#filter_keinwein
{
    display: flex;
    flex-wrap: wrap;
}

#checked_keinwein
{
    width:1.5vw;
    height:1.5vw;
    background-color: rgb(0, 0, 0);
    border-radius: 100%;
}

/* Filter Ende */

/* Cover */

.cover_text
{
    padding-left:10vw;
    font-size: 3vw;
    line-height: normal;
    width:80vw;
}

.call_us
{
    
    bottom:2vw;
    padding-left:10vw;
    font-size: 3vw;
    line-height: normal;
    width:80vw;
    text-transform: uppercase;
}


/* Cover Ende */

/* Studio */

#studio_textblocks
{
    display: grid;
    grid-template-columns: 1fr;
    margin-left:10vw;
    gap: 2vw;
    width:60vw;
    margin-bottom:3vw;
    font-size: 2.5vw;
}


.studio_textblock
{
    text-transform: uppercase;
    line-height: normal;
    margin-bottom:3vw;
}



/* Studio Ende */

/* Projekte */

#projekte
{
    /*display: grid;
    grid-template-columns: 1fr;*/

    
    flex-direction: column;
    width: 100vw;
    
}

#projekte div
{
    /*display: grid;
    grid-template-columns: 1fr;*/
    width:100vw;
}







.projekte_projekt_abbildung
{
    /*height: 60vw;*/
    overflow: hidden;
    position: relative;
    
}



#projekte div video
{
    width:100dvw;
}







/* Projekte ende */

/* Projekt */


.projekt_beschreibung
{
    
    font-size: 2.5vw;
    /*top:4vw;
    left:10vw;
    width:70vw;
    font-size: 2.3vw;*/
    padding-top:10vw;
    padding-left:9vw;
    height:50vh;
    width:60vw;
}

.projekt_einspaltig_querformat
{
    display: grid;
    grid-template-columns: 1fr;
    
}


.projekt_einspaltig_querformat img
{
    width:100vw;
    height:auto;
}



.projekt_einspaltig_hochformat
{
    display: flex;
    justify-content:center;
    align-items:center;
    height: 70dvh;
    background-color: black;
    
}

.projekt_einspaltig_hochformat img
{
    width:40vw;
    height:auto;
}

.projekt_einspaltig_hochformat video
{
    width:40vw;
    height:auto;
}

.projekt_zweispaltig_hochformat
{
    display: grid;
    grid-template-columns: 1fr;
    background-color: black;
    
}

.projekt_zweispaltig_hochformat div
{
    display: flex;
    justify-content:center;
    align-items:center;
    gap: 20vw;
    
}

.projekt_zweispaltig_hochformat img
{
    width:40vw;
    height:auto;
}

.projekt_zweispaltig_querformat
{
    display: grid;
    grid-template-columns: 1fr;
    
    
}

.projekt_zweispaltig_querformat div
{
    /*height: 60vw;*/
    overflow: hidden;
    
}

.projekt_zweispaltig_querformat img
{
    width:100vw;
    height:auto;
}

.projekt_zweispaltig_querformat video
{
    width:100vw;
    height:auto;
}

/* Projekt Ende */

/* Rechtliches */

#rechtliches
{
    display: grid;
    grid-template-columns: 1fr;
    margin-left:10vw;
    gap: 0vw;
    
    margin-bottom:3vw;
    font-size: 2.5vw;
}

.rechtliches_textblock
{
    text-transform: uppercase;
    width:50vw;

    line-height: 140%;
}
/* Rechtliches Ende */
  


}
/* Mobile Ende */