htm, body{margin: 0px;padding: 0px;}
body{font-family: 'Signika', sans-serif;font-size: 13px;color:#000;min-width: 300px;font-weight: 300;}

#footer{background:#1a1a1a;}
footer{margin: 0px auto; width: 100%;max-width: 1100px;overflow: hidden;box-sizing: border-box; padding: 0;}
#footer small{text-align: center;font-size: 12px;padding: 20px 0;display: block;color:#78720a;border-top: 1px solid #737a36;}
#footer small label{text-decoration: underline;}
#footer small label:hover{color:#f2e559;cursor: pointer;}
#footer figure a{color: #f2e559;text-decoration: none;vertical-align: middle;margin-left: 20px;display: inline-block;}
#footer figure address{display: inline-block;font-style: normal;color: #f2e559;margin-left: 20px;}
#footer figure p{margin: 0px;padding: 0;}
#footer figure .telephone a{vertical-align: 50%;}
#footer figure .email a{vertical-align: 25%;}
#footer figure .address address{vertical-align: 0%;}
#footer figure img{display: inline-block;}
#footer figure{
    font-size: 16px;
    margin: 25px 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "address email telephone";
    grid-gap: 15px 15px;
    justify-items: center;
}
#footer figure .address{grid-area: address;align-self: center;}
#footer figure .email{grid-area: email;align-self: center;}
#footer figure .telephone{grid-area: telephone;align-self: center;}


#impressum{overflow: hidden;margin: 0px auto; background: #f2e559;width: 100%;max-width: 1100px;box-sizing: border-box; padding: 0 15px;
           display: grid;
           grid-template-columns: 1fr 1fr 1fr 1fr;
           grid-template-rows: auto;
           grid-template-areas:
               "title title title title"
               "logo logo impressum impressum"
               "odr odr odr odr";
           grid-gap: 16px 16px;
           justify-items: stretch;
}
#impressum .title{grid-area: title;justify-self: center ;}
#impressum .logo{grid-area: logo;justify-self: end ;align-self: center;padding-right: 45px;}
#impressum .odr{grid-area: odr;justify-self: center;padding: 30px 0;text-align: center; line-height: 19px;}
#impressum .impressum{grid-area: impressum;justify-self:  start;padding-left: 45px;color:#78720a;font-size: 14px;line-height: 19px;position: relative;}
#impressum .odr p{padding: 0px;margin: 0px;color:#78720a;}
#impressum a{color:#1a1a1a;}
#impressum a.tel{text-decoration: none;}
h2{font-size: 30px;}
#impressum .impressum strong{font-weight: normal;color:#000;font-size: 16px;}
#impressum .impressum address{font-style: normal;}
#impressum .impressum p{margin-bottom: 0px;}
#impressum .impressum:before{position: absolute;content: "";display: block;height: 100%;width: 1px;background: #c4b72b;top: 0px;left: -8px;}
#impressum .impressum:after{position: absolute;content: url(images/layout/basil.png);display: block;top: -8px;left: -18px;}

header h1{font-weight: normal;font-size: 17px;color:#3c271f;line-height: 19px;margin: 0px;}
header h1 span{display: block;color:#78720a;}
header{overflow: hidden;margin: 0px auto; background: #f2e559;width: 100%;max-width: 1100px;box-sizing: border-box; padding: 25px 15px;
       display: grid;
       grid-template-columns: 0.45fr 0.25fr 0.30fr;
       grid-template-rows: auto;
       grid-template-areas: "logo motto phone";
       grid-gap: 16px 16px;
       justify-items: stretch;
}
header .logo{grid-area: logo;justify-self: end;align-self: center;padding-right:  20px;}
header .motto{grid-area: motto;justify-self: start;align-self: center;position: relative;padding: 10px 0 10px 10px;}
header .motto p{margin: 0px;}
header .motto:after{position: absolute;content: "";display: block;height: 100%;width: 1px;background: #c4b72b;top: 0px;left: -8px;}
header .telephone{grid-area: phone;justify-self: end;align-self: center;padding-right:  20px;}
header .telephone a{text-decoration: none;color:#000; font-size: 17px; color: #3c271f; line-height: 19px;}
header .telephone img{margin-right: 10px; vertical-align: text-bottom;}

main{overflow: hidden;margin: 0px auto; width: 100%;max-width: 1100px;box-sizing: border-box; padding: 0px;}
main .intro{text-align: center;}
main .intro p{margin: 0px;font-size: 15px;line-height: 22px;text-align: left;}
main .intro h2{color:#5e3c30;margin: 50px auto 20px;}
main .product-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 30px;
    justify-items: stretch;
    margin: 30px auto 60px;
    width: 100%;
}
main .product-grid .item{position: relative;width: 100%;}
main .product-grid .item img{display: block;width: 100%;}
main .product-grid .item h3{margin: 0px;position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;background:transparent;
                            -webkit-transition: all 0.75s ease;
                            -moz-transition: all 0.75s ease;
                            -ms-transition: all 0.75s ease;
                            -o-transition: all 0.75s ease;
                            transition: all 0.75s ease;}
main .product-grid .item h3 span{display: block;position: absolute;width: 100%;text-align: center;top: 50%;
                                 -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%);
                                 font-size: 20px;color:#f2e559;
                                 -webkit-transition: all 1s ease;
                                 -moz-transition: all 1s ease;
                                 -ms-transition: all 1s ease;
                                 -o-transition: all 1s ease;
                                 transition: all 1s ease;}
main .product-grid .item:hover h3{background: #f2e559;}
main .product-grid .item:hover h3 span{color:#000;}

#privacy{position: fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;background: rgba(0,0,0,0.3);visibility: hidden;opacity: 0;}
#privacy .privacy-wrapper ol{padding: 0px 25px 0 15px;}
#privacy .privacy-box{position: absolute; top: 0px;left: 25px;bottom: 25px;right: 0px;}
#privacy .privacy-wrapper ol li{margin-bottom: 10px;font-weight: bold;color: #efda00;}
#privacy .privacy-wrapper ol span{color:#000;font-weight: normal;}
#privacy .privacy-wrapper ol strong{color:#000;display: block;}
#privacy .privacy-wrapper h3{margin: 25px 25px 10px 0;}
#privacy .privacy-text{width: 100%;max-height: 95%;overflow: auto;}
#privacy .closebox{width: 45px;height: 45px;background: #f2e559; position: absolute;right: 0px;top: 0px;cursor: pointer;}
#privacy .closebox:before{content: "";position: absolute;top: 22px;left: 12px;background:#000;width: 20px;height: 1px;
                          -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
#privacy .closebox:after{content: "";position: absolute;top: 22px;left: 12px;background:#000;width: 20px;height: 1px;
                         -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
input[name="show-policy"]:checked ~ #footer #privacy{visibility: visible;opacity: 1;}
input[name="show-policy"]{display: none;}

@media (min-width: 768px){
    #impressum .odr p span{display: block;}

    #privacy .privacy-wrapper{max-width: 760px;position: relative;top: 100px;left: 50%;background:#fff;max-height: 80%;box-sizing: border-box;min-height: 75%;
                              -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%);}
}
@media (max-width: 767px){
    #privacy .privacy-wrapper{width: 100%;height: 100%;position: relative;background:#fff;box-sizing: border-box;}

    input[name="show-policy"]:checked ~ #content figure,
    input[name="show-policy"]:checked ~ #content,
    input[name="show-policy"]:checked ~ #header{display: none;}

    main .intro{padding: 0 15px;}
    #footer small label{display: block;}

    #footer figure{
        grid-template-columns: 1fr;
        grid-template-areas: "address" "email" "telephone";
    }
    #footer figure .email{margin: 15px auto;}
    header .telephone{display: none;}
    header{ grid-template-columns: 0.45fr 0.55fr;}
}
@media (min-width: 561px) and  (max-width: 767px){
    main .product-grid{
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
    }
}
@media (max-width: 560px){
    #impressum{
        grid-template-columns: 0.10fr 0.8fr 0.10fr;
        grid-template-areas:
            "title title title"
            ". logo ."
            ". impressum ."
            "odr odr odr";
    }
    #impressum  h2{margin: 25px auto 15px; }
    #impressum .logo{padding-right: 0px;justify-self: center;margin-bottom: 15px;}
    #impressum .impressum{padding-left: 0px;justify-self: center ;text-align: center;}

    #impressum .impressum:before,
    #impressum .impressum:after{display: none;}

    main .product-grid{
        grid-template-columns: 1fr 1fr;
        grid-gap: 15px;
    }

    header h1{font-size: 15px;}
    header h1 span{line-height: 14px;font-size: 14px;}
    header .motto{padding-left: 10px;}
    header .logo{padding-right: 10px;}
    main .intro h2{margin: 20px auto;font-size: 23px;}
    main .intro p{text-align: left;}
    main .product-grid .item h3 span{font-size: 14px;line-height: 16px;}
}