/* #region TEMPLATE */

/* #endregion template*/






/* #region BASIC */
:root {
    --accent:rgba(221, 112, 92, 1);
    --light: rgba(245, 245, 245, 1);
    --mid: rgba(227, 227, 227, 1);
    --dark: rgba(116, 116, 116, 1);
    --blue: rgba(31, 56, 85, 1);
}

html{font-size: 62.5%;
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--light);
    font-family: 'Open Sans', sans-serif;
    font-size: 1.9rem;
    color: var(--dark);
    padding: 0;
    margin: 0;
}

img{
    display: block; 
    max-width:100%;
    height: auto;}

.service img{
    min-width:100%;
    object-fit: cover;
}


h1, p {margin: 0; padding:0;}


/* Syle for text selection */
::-moz-selection { 
    color:var(--light); 
    background:var(--accent); 
    text-shadow: none; 
}
::selection { 
    color:var(--light); 
    background:var(--accent); 
    text-shadow: none;  
}



/* #endregion */






/* #region TYPOGRAPHY */
h1{
    font-family: 'Oswald', sans-serif;
    font-size: 3.2rem;
    line-height: 1.32em;
    font-weight: 500;
    padding-bottom: 0.4em;
}

p{
    line-height: 1.725em;  
}

span{
    font-weight: bold;
}

span,
a{
    color: var(--accent);
}

a{
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}


.qualitaet ul{
    list-style-type: none;
    padding: 0 0 0 .625em;
}

.qualitaet ul li:before{
    content: '';
    display: inline-block;
    width: .5em;
    height: .8em;
    margin: 0 .825em auto 0;
    background: url(../img/liElement.svg);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
}

.footerLink{
    font-size: 1em;
}

.copyright{
    font-size: 0.8em;
}

.impressumQuoteSubtitle{
    color: var(--accent);
}

@media (min-width:767px) and (max-width:1023px){

    h1{
        font-size: 5.4rem;
    }

    body{
        font-size: 2.2rem;
    }

}

@media (min-width:1024px) and (max-width:1289px){

    h1{
        font-size: 6.4rem;
    }

    body{
        font-size: 2.5rem;
    }

}

@media (min-width:1290px){

    h1{
        font-size: 7.4rem;
    }

    body{
        font-size: 2.8rem;
    }

}




/* #endregion */





/* #region GRID */

.heroTopRow{
    grid-row: 1;
    grid-column: 1/7;
}

.heroLogoContainer{
    grid-row: 2;
    grid-column: 2/6;
}

.heroGradient{
    grid-row: 2;
    grid-column: 1/7;
}

.hero,
.welcome,
.experience,
.qualitaet,
.interlude,
.service,
.shopContact,
.impressum{
    display: grid;
    grid-template-columns: 25px 1fr 20px 20px 1fr 25px;
}

.hero{
    grid-template-rows: 10vh min-content auto;
}

.welcome,
.experince,
.qualitaet,
.interlude,
.service,
.shopContact{
    grid-template-rows: auto auto;
}

.quote,
.image,
.content,
.shopQuote,
.contactQuote,
.interludeImage,
.impressumQuote{
    grid-column: 2 / 6;
}

.map,
.mapOverlay,
.footer{
    grid-column: 1/7;
}

.map,
.mapOverlay{
    grid-row: 2;
}

.shopQuote{
    grid-row: 1;
}

.contactQuote{
    grid-row: 2;
}

@media (min-width:767px) and (max-width:1023px){

    .hero,
    .welcome,
    .experience,
    .qualitaet,
    .interlude,
    .service,
    .shopContact{
        grid-template-columns: 80px 1fr 20px 20px 1fr 80px;
    }
}

@media (min-width:1024px) and (max-width:1289px){

    .hero,
    .welcome,
    .experience,
    .qualitaet,
    .interlude,
    .service,
    .shopContact{
        grid-template-columns: 120px 1fr 20px 20px 1fr 120px;
    }
}

/* @media (min-width:1290px){

    .hero,
    .welcome,
    .experience,
    .qualitaet,
    .interlude,
    .service,
    .shopContact{
        grid-template-columns: 180px 1fr 20px 20px 1fr 180px;
    }
} */

@media (min-width:1290px){

    .hero,
    .welcome,
    .experience,
    .qualitaet,
    .interlude,
    .service,
    .shopContact{
        grid-template-columns: 180px .5fr .5fr 40px 40px .5fr .5fr 180px;
    }

    .heroTopRow{
        grid-row: 1;
        grid-column: 1/9;
    }
    
    .heroLogoContainer{
        grid-row: 2;
        grid-column: 2/8;
    }
    
    .heroGradient{
        grid-row: 2;
        grid-column: 1/9;
    }



    .quote{
        grid-column: 2 / 4;
    }

    .image{
        grid-column: 6 / 8;
    }

    .content{
        grid-column: 2 / 7;
    }

    .shopQuote{
        grid-column: 2 / 4;
    }
    .contactQuote{
        grid-column: 6 / 8;
    }

    .interludeImage{
        grid-column: 2 / 8;
    }

    .map,
    .mapOverlay,
    .footer{
        grid-column: 5/9;
    }

    .map,
    .mapOverlay{
        grid-row: 1;
    }

    .shopQuote{
        grid-row: 1;
    }

    .contactQuote{
        grid-row: 1;
    }

}

@media (min-width:1921px){

    .hero,
    .welcome,
    .experience,
    .qualitaet,
    .interlude,
    .service,
    .shopContact{
        grid-template-columns: 15vw .5fr .5fr 40px 40px .5fr .5fr 15vw;
    }
}


/* #endregion */





/* #region COLORS */

.heroTopRow{
    background-color: var(--mid);

}

.heroGradient{
    background: linear-gradient(to bottom, var(--mid) 0%, var(--mid) 93.3%, var(--light) 93.3%, var(--light) 100%);
}


.welcome{
    background-color: var(--light);
}

.experience{
    background-color: var(--dark);
    color: var(--light);
}

.interlude{
    background: linear-gradient(to top, var(--mid) 0%, var(--mid) 50%, var(--light) 50%, var(--light) 100%);
}

.service{
    background-color: var(--mid);
}

.shopContact{
    background-color:var(--dark);
    color: var(--light);
}

.mapOverlay{
    background-color: rgba(245, 245, 245, 0.9);
}

.contactQuote{
    background: transparent;
    color: var(--dark);
}

.footer{
    background: var(--blue);
    color: var(--light);
}


/* #endregion */



/* #region PADDING */

.image{
    padding-top: 5rem;
}

.welcome{
    padding-top: 12rem;
}

.experience,
.qualitaet,
.service,
.shopQuote,
.contactQuote,
.footer,
.impressum{
    padding-top: 8.5rem;
}

.welcome,
.experience,
.qualitaet,
.service,
.shopQuote,
.contactQuote,
.impressum{
    padding-bottom: 6rem;
}

.interlude{
    padding-top: 5rem;
    padding-bottom: 3rem;
}

.footer{
    padding-bottom: 1.2em;
}

.impressumQuote{
    padding: 6em 7vw;
}

@media (min-width:767px) and (max-width:1023px){
    
    .welcome{
        padding-top: 20rem;
    }
    
    .experience,
    .qualitaet,
    .service,
    .shopQuote,
    .contactQuote,
    .footer{
        padding-top: 13rem;
    }
    
    .welcome,
    .experience,
    .qualitaet,
    .service,
    .shopQuote,
    .contactQuote{
        padding-bottom: 9rem;
    }

    .image{
        padding-top: 9rem;
    }
    
    .interlude{
        padding-top: 4rem;
        padding-bottom: 9rem;
    }

}

@media (min-width:1024px) and (max-width:1289px){

    .welcome{
        padding-top: 25rem;
    }
    
    .experience,
    .qualitaet,
    .service,
    .shopQuote,
    .contactQuote,
    .footer{
        padding-top: 18rem;
    }
    
    .welcome,
    .experience,
    .qualitaet,
    .service,
    .shopQuote,
    .contactQuote{
        padding-bottom: 12rem;
    }

    .image{
        padding-top: 12rem;
    }
    
    .interlude{
        padding-top: 6rem;
        padding-bottom: 12rem;
    }


}

@media (min-width:1290px){

    .welcome{
        padding-top: 30rem;
    }
    
    .experience,
    .qualitaet,
    .service,
    .shopQuote,
    .contactQuote,
    .footer{
        padding-top: 22rem;
    }
    
    .welcome,
    .experience,
    .qualitaet,
    .service,
    .shopQuote,
    .contactQuote{
        padding-bottom: 16rem;
    }

    .image{
        padding-top: 0;
    }
    
    .interlude{
        padding-top: 6rem;
        padding-bottom: 12rem;
    }

}



/* #endregion */



/* #region NAV */
.navWrapper{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1em 1em;
    background-color: transparent;
    z-index: 100;
}


.toggleMenu{
    z-index: 101;
    cursor: pointer; 
}

.impressumExitButton{
    visibility: hidden;
    z-index: 101;
    cursor: pointer;
    width: 0;
    height: 0;
    border-top: 21px solid transparent;
    border-right: 25px solid var(--accent);
    border-bottom: 21px solid transparent;
}

.impressumExitButton:hover{
    border-right: 25px solid var(--light);
}
.impressumExitButton:active{
    background-color: transparent;
}





.toggleMenu .topBar,
.toggleMenu .middleBar,
.toggleMenu .bottomBar{
    position: relative;
    width: 36px;
    height: 4px;
    margin-bottom: 8px;
    background-color: var(--accent);
    transition: .25s;
    border: solid 1px rgba(255,255,255,1);
    box-sizing: content-box;
}

.toggleMenu .topBar,
.toggleMenu .middleBar,
.toggleMenu .bottomBar{

    transform-origin: left;
}

.toggleMenu:hover div{
    background-color:  var(--blue);
}




.toggleMenu.active div:nth-child(1){

    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
} 

.toggleMenu.active div:nth-child(3){

    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    top:-1px;
}

.toggleMenu.active div:nth-child(2){

    transform: scaleX(0%);
    -webkit-transform: scale(0, 1);
    -o-transform: scale(0%), 0%;
}






/* .blur {
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
    -webkit-filter: url(#blur-filter);
    filter: url(#blur-filter);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    transition: .1s ease-in;
} */

.menu{
    visibility: hidden;
    background-color: rgba(31, 56, 85, 0.7);
    opacity:0;
    filter: opacity(0);
    z-index: 99;
    position: fixed;
    top:0px;
    left:0px;
    width: 100vw;
    height: 100vh;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu ul{
    list-style-type: none;
    padding: 0;
}

.menu li{
    color: var(--accent);
    font-family: 'Oswald', sans-serif;
    font-size: 6rem;
    font-weight: bold;
    padding: 0;
    margin: 0;
}
    
.menu li:focus,
.menu li:hover,
.menu li:active{
    text-decoration: underline;
    color: var(--light);
    cursor: pointer;
}







/* #endregion*/



/* #region HERO */

.top{
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' height='100px' width='100px'%3E%3Cpath d='m 0 100 l 100 0 l 0 -100 z ' style='fill:rgb(221, 112, 92)' /%3E%3C/svg%3E"),

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' height='100px' width='100px'%3E%3Cpath d='m 0 0 l 0 100 l 100 0 z ' style='fill:rgb(221, 112, 92)' /%3E%3C/svg%3E");
    background-color: greenyellow;
    background-size: 20vw;
    background-repeat: no-repeat;
    background-position: bottom right, bottom left;
}





.hero{
    height: 100vh;
    width:100%;
    background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' height='100px' width='100px'%3E%3Cpath d='m 0 0 l 0 100 l 60 0 z ' style='fill:rgb(221, 112, 92)' /%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' height='100px' width='100px'%3E%3Cpath d='m 40 100 l 60 0 l 0 -100 z ' style='fill:rgb(221, 112, 92)' /%3E%3C/svg%3E");
    background-size: 32vw;
    background-position: left bottom, right bottom;
    background-repeat: no-repeat;
    border:none !important;
    shape-rendering: crispEdges;
}


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

.heroLogo{
    margin: 0 auto;
    width: 50%;
    max-width: 200px;
}
.heroText{
    margin: 1.95rem auto auto;
    width: 40%;
    max-width: 150px;
}

@media (orientation:landscape){

    .hero{
        grid-template-rows: 20vh min-content auto;
        background-size: 32vh;
    }
    
    .heroLogoContainer{
        display: flex;
        flex-direction: row;
    }

    .heroGradient{
        background: linear-gradient(to bottom, var(--mid) 0%, var(--mid) 50%, var(--light) 50%, var(--light) 100%);
    }

    .heroLogo{
        margin: 0 0;
    }

    .heroText{
        margin: 4.35rem 2rem 0;
    }

}

/* #endregion */



/* #region WELCOME */
.welcome{
    background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' height='100px' width='100px'%3E%3Cpath d='m 0 0 l 60 0 l -100 100 z ' style='fill:rgb(221, 112, 92)' /%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' height='100px' width='100px'%3E%3Cpath d='m 40 0 l 100 0 l 0 100 z ' style='fill:rgb(221, 112, 92)' /%3E%3C/svg%3E");
    background-size: 32vw;
    background-position: left top, right top;
    background-repeat: no-repeat;
    border: none !important;
    shape-rendering: crispEdges;
}

@media (orientation:landscape) {

    .welcome{
        background-size: 32vh;
    }
}

/* #endregion */



/* #region INTERLUDE*/





/* #endregion*/



/* #region SHOPCONTACT */



.map{
    background: url(../img/map-trans.JPG);
    background-size: cover;
    background-repeat: no-repeat;
}

.amazonLogo{
    display: inline;
    border-radius: 1rem;
    border: solid .1rem var(--accent);
    width: 50%;
    max-width: 220px;
    margin-top: 2em;
}



/* #endregion*/



/* #region FOOTER */

.footer{
    text-align: center;
}

.footerLogo{
    margin: 0 auto;
}

.footerLink{
    padding: 2em 0 2.5rem 0;
}



/* #endregion */

/* #region IMPRESSUM*/


.impressum{
    display:none;
    z-index: 95;
    position: fixed;
    top: 0px;
    left:0px;
    width: 100%;
    height: 100%;    
    background-color:var(--blue);
    color: var(--light);
    opacity: 0;
    filter: opacity(0);
}

.impressumQuote{
    position: absolute;
    top:0px;
    bottom:0px;
    left:0px;
    width:100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    opacity:0;
    filter: opacity(0);
    background-color: transparent;
    overflow-y: scroll;
}


.impressumQuoteSubHeader{
    text-decoration: underline;
    line-height: 2.5em;
}

/*#endregion */

/* OPERATOR / ANIMATIONS */

.linkUnderline{
    display:inline-block;
}

.linkUnderline::after{
    content: "";
    display: block;
    width:0%;
    height:2px;
    padding: 0;
    margin: -0.3em 0;
    background-color: var(--accent);    
    transition: ease-in .2s;
}


.linkUnderline:focus::after,
.linkUnderline:hover::after{
    width: 100%;
}