@charset "UTF-8";

body
{
    
    padding: 0em;
	margin:0em;
    background-color:#F4ECE2;
    line-height: 0;
   
    color:black;

   
    font-family: "baskerville-poster-pt", serif;
    font-weight:lighter;
    font-style: normal;

}

a:link {text-decoration: none; color: black;}
a:hover {text-decoration: none; color: black;}
a:visited {text-decoration: none; color: black;}

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

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

#CookiebotWidget
{
    display: none !important;

}

#story-title
{
    z-index:10;
    display: block;
    color: white;
    font-size: 4.4vw;
    margin-top: 31vw;
    position: absolute;
    width: 40vw;
    line-height: 90%;
    margin-left: 13.5vw;
}

@media screen and (orientation: portrait)
{
    #story-title
    {
        
        font-size: 9vw;
        margin-top: 73dvh;
        width: 60vw;
        line-height: 90%;
        margin-left: 5vw;
    }
}



#story-title-fish
{
    z-index:10;
    display: block;
    color: white;
    margin-top: 22vw;
    position: absolute;
    margin-left: 5.55vw;
}

@media screen and (orientation: portrait)
{
    #story-title-fish
    {
        z-index:10;
        display: block;
        color: white;
        margin-top: 55dvh;
        position: absolute;
        margin-left: 20.55vw;
    }
}

#story-title-fish img
{
    width: 21vw;
    height: auto;
}

@media screen and (orientation: portrait)
{
    #story-title-fish img
    {
        width: 50vw;
        height: auto;
    }
    }

#top-nav
{
    position: fixed;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: end;
    align-items: center;

    z-index: 100;
    background-color:#F4ECE2;
    width: 100vw;
    top:0;
    left:0;
    height: 2.4vw;

    font-size: 0.9vw;
    line-height: normal;

    /*border-bottom: 1px solid rgb(146, 146, 146);*/
    
}

@media screen and (orientation: portrait)
{
    #top-nav
    {
        position: fixed;
        
        display: flex;
        flex-direction:row;
        flex-wrap: nowrap;
        justify-content: end;
        align-items: center;
        top:0;
        left:0;
        z-index: 100;
        background-color:#F4ECE2;
        width: 100vw;
        
        height: 8.4vw;

        font-size: 2.6vw;
        line-height: normal;
        padding-top:0.2vw;

        /*border-bottom: 1px solid rgb(146, 146, 146);*/
        
    }
}

#weingut
{
    margin-right:2vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: end;
    align-items: center;
    cursor: pointer;
}

@media screen and (orientation: portrait)
{
    #weingut
    {
        margin-right:3.5vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: end;
        align-items: center;
    }
}

#nav-weingut-dot
{
    background-color: black;
    width: 0.1vw;
    height: 0.1vw;
    border-radius: 100%;
    margin-right: 0.3vw;
    visibility: hidden;
}

@media screen and (orientation: portrait)
{
    #nav-weingut-dot
    {
        background-color: black;
        width: 0.3vw;
        height: 0.3vw;
        border-radius: 100%;
        margin-right: 0.7vw;
    }
}




#nav-kontakt-dot
{
    background-color: black;
    width: 0.1vw;
    height: 0.1vw;
    border-radius: 100%;
    margin-right: 0.3vw;
    visibility: hidden;
}

@media screen and (orientation: portrait)
{
    #nav-kontakt-dot
    {
        background-color: black;
        width: 0.3vw;
        height: 0.3vw;
        border-radius: 100%;
        margin-right: 0.7vw;
        visibility: hidden;
    }
}


#kontakt
{
    margin-right:1.2vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: end;
    align-items: center;
    cursor: pointer;
}

@media screen and (orientation: portrait)
{
   #kontakt
    {
        margin-right:3vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: end;
        align-items: center;
    }
}


#weinliste
{
    margin-right:1.2vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: end;
    align-items: center;
    cursor: pointer;
}

@media screen and (orientation: portrait)
{
    #weinliste
    {
        margin-right:3.5vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: end;
        align-items: center;
    }
}

#nav-weinliste-dot
{
    background-color: black;
    width: 0.1vw;
    height: 0.1vw;
    border-radius: 100%;
    margin-right: 0.3vw;
    visibility: hidden;
}

@media screen and (orientation: portrait)
{
    #nav-weinliste-dot
    {
        background-color: black;
        width: 0.3vw;
        height: 0.3vw;
        border-radius: 100%;
        margin-right: 0.7vw;
        visibility: hidden;
    
    }
}





@media screen and (orientation: portrait)
{
    .hide-on-mobile
    {
    
        
        display: none !important;

    }
}

.flex-wrap
{
   
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    width: 100dvw;
    margin-bottom:1.4vw;

}

@media screen and (orientation: portrait)
{
    .flex-wrap
    {
    
        
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: start;
        align-items: start;
        width: 100dvw;
        margin-bottom:4.4vw;

    }
}

.flex-wrap-cover
{
   
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    width: 100dvw;
    margin-bottom:1.4vw;

}

@media screen and (orientation: portrait)
{
    .flex-wrap-cover
    {
    
        
        display: flex;
        flex-direction:column-reverse;
        flex-wrap: wrap;
        justify-content: start;
        align-items: start;
        width: 100dvw;
        margin-bottom:4.4vw;

    }
}




.half-vw
{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    width: 50vw;

}

@media screen and (orientation: portrait)
{
    .half-vw
    {

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: start;
        align-items: start;
        width: 100vw;

    }
}





#framed-orange-1
{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 50vw;
    background-color:#D37654;
    


}

@media screen and (orientation: portrait)
{
    #framed-orange-1
    {

        
        width: 100vw;
        


    }
}

#framed-orange-1 div
{

    width:30vw;

}

@media screen and (orientation: portrait)
{
    #framed-orange-1 div
    {

        width:65vw;

    }
}

#framed-orange-2
{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 50vw;
    background-color:#D37654;
    


}

@media screen and (orientation: portrait)
{
    #framed-orange-2
    {

        
        width: 100vw;
        


    }
}

#framed-orange-2 div
{

    width:30vw;

}

@media screen and (orientation: portrait)
{
    #framed-orange-2 div
    {

        width:65vw;

    }
}


#framed-right-top-1
{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: end;
    align-items: start;
    width: 50vw;
    


}

@media screen and (orientation: portrait)
{
    #framed-right-top-1
    {

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: end;
        align-items: start;
        width: 100vw;
        


    }
}

#framed-right-top-1 div
{

    width:30vw;

}

@media screen and (orientation: portrait)
{
    #framed-right-top-1 div
{

    width:100vw;

}
}



#framed-right-top-2
{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: end;
    align-items: start;
    width: 50vw;
    


}

@media screen and (orientation: portrait)
{
    #framed-right-top-2
    {

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: end;
        align-items: start;
        width: 100vw;
        


    }
}

#framed-right-top-2 div
{

    width:30vw;

}

@media screen and (orientation: portrait)
{
    #framed-right-top-2 div
    {

        width:100vw;

    }
}

.text-up-and-down
    {

        display: flex;
        flex-direction:row;
        flex-wrap: wrap;
        justify-content: end;
        align-items: start;
        width: 100vw;
        


    }

@media screen and (orientation: portrait)
{
    .text-up-and-down
    {

        display: flex;
        flex-direction:column-reverse;
        flex-wrap: wrap;
        justify-content: end;
        align-items: start;
        width: 100vw;
        


    }
}

.text-up-and-down-2
    {

        display: flex;
        flex-direction:row;
        flex-wrap: wrap;
        justify-content: end;
        align-items: start;
        width: 100vw;
        


    }

@media screen and (orientation: portrait)
{
    .text-up-and-down-2
    {

        display: flex;
        flex-direction:column-reverse;
        flex-wrap: wrap;
        justify-content: end;
        align-items: start;
        width: 100vw;
        


    }
}




.text-1
{

    font-size: 0.9vw;
    line-height: 160%;
    padding-left:2.4vw;
    padding-right:2.4vw;
    padding-bottom:14vw;
}

@media screen and (orientation: portrait)
{
    .text-1
    {

        font-size: 3.2vw;
        line-height: 160%;
        padding-left:4vw;
        padding-right:4vw;
        padding-bottom:20vw;
        margin-top:4vw;
    }
}


.text-3
{
    
    font-size: 0.9vw;
    line-height: 160%;
    padding-left:2.4vw;
    padding-right:2.4vw;
    padding-bottom:14vw;
    padding-top:6vw;
    width: 50vw;
}

@media screen and (orientation: portrait)
{
    .text-3
    {

        font-size: 3.2vw;
        line-height: 160%;
        padding-left:4vw;
        padding-right:4vw;
        padding-bottom:20vw;
        margin-top:4vw;
        width: 92vw;
    }
}

h1, h2, h3, h4
{
    font-size: 0.9vw;
    line-height: 160%;
    margin: 0;
    padding: 0;
    padding-top: 4vw;
    font-weight: normal;
    text-decoration: underline;
}

@media screen and (orientation: portrait)
{
    h1, h2, h3, h4
    {
        font-size: 3.2vw;
        line-height: 160%;
        padding-top: 20vw;
        text-decoration: underline;
    }
}



#framed-turquoise-1
{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 50vw;
    background-color:#91BBBA;
    


}

@media screen and (orientation: portrait)
{
    #framed-turquoise-1
    {

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100vw;
        background-color:#91BBBA;
        


    }
}



#framed-turquoise-1 div
{

    width:30vw;

}

@media screen and (orientation: portrait)
{
    #framed-turquoise-1 div
    {

        width:65vw;

    }
}

#framed-turquoise-2
{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 50vw;
    background-color:#91BBBA;
    
    


}

@media screen and (orientation: portrait)
{
    #framed-turquoise-2
    {

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100vw;
        background-color:#91BBBA;
        


    }
}

#framed-turquoise-2 div
{

    width:30vw;

}

@media screen and (orientation: portrait)
{
    #framed-turquoise-2 div
    {

        width:65vw;

    }
}

.text-2
{

    font-size: 0.9vw;
    line-height: 160%;
    padding-left:2.4vw;
    padding-right:2.4vw;
    padding-bottom:5vw;
}

@media screen and (orientation: portrait)
{
    .text-2
    {

        font-size: 3.2vw;
        line-height: 160%;
        padding-left:4vw;
        padding-right:4vw;
        padding-bottom:20vw;
        margin-top:4vw;
    }
}


#framed-right-top-2
{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: end;
    align-items: start;
    width: 50vw;
    


}

@media screen and (orientation: portrait)
{
    #framed-right-top-2
    {

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: end;
        align-items: start;
        width: 100vw;
        


    }
}


#framed-right-top-2 div
{

    width:30vw;

}

@media screen and (orientation: portrait)
{
    #framed-right-top-2 div
    {

        width:100vw;

    }
}


#text-wrap-kontakt
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    margin-top:15vw;

    
}

.text-kontakt
{

    font-size: 0.9vw;
    line-height: 160%;
    padding-left:2.4vw;
    padding-right:2.4vw;
    padding-bottom:5vw;
    width:15vw;
}

@media screen and (orientation: portrait)
{
    .text-kontakt
    {

        font-size: 3.2vw;
        line-height: 160%;
        padding-left:4vw;
        padding-right:4vw;
        padding-bottom:15vw;
        width:100vw;
    }
}

.text-rechtliches
{

    font-size: 0.9vw;
    line-height: 160%;
    padding-left:2.4vw;
    padding-right:2.4vw;
    padding-bottom:5vw;
}

@media screen and (orientation: portrait)
{
    .text-rechtliches
    {

        font-size: 2.2vw;
        line-height: 160%;
        padding-left:4vw;
        padding-right:4vw;
        padding-bottom:5vw;
        width:100vw;
    }
}