@import "fonts.css";
@import "usercentrics.css";

:root {
    --green: #3d7a25;
    --dgreen: #1e3824;
    --white: #fff;
    --black: #000;
    --main-font: 'Antic', sans-serif;
    --deco-font: 'Poiret One', cursive;
}


/*================================== SCHRIFTEN ===================================*/

p, label {
    font-family: var(--main-font);
    font-size: 18px;
}
p.highlight {
    font-family: var(--deco-font);
    color: var(--black);
    font-size: 22px;
}

h1, .h1 {
    font-family: var(--deco-font);
    font-size: 40px;
    font-weight: 400;
}
h2, .h2 {
    font-family: var(--deco-font);
    font-size: 28px;
    font-weight: 700;
    color: #333333;
}
h3, .h3 {
}
h4, .h4 {}
h5, .h5 {}
h6, .h6 {}

h1,h2,h3,h4,h5,h6 {}

.subtitle {
    font-family: var(--deco-font);
    font-size: 20px;
    color: #333333;
    margin: 0 0 30px 0;
}
.subtitle + * {margin-top: 0;}

.center {text-align: center;}
.green {color: var(--green);}
.up {text-transform: uppercase;}
.white {color: var(--white);}



.uk-link, a,
.uk-link-toggle:focus .uk-link, .uk-link-toggle:hover .uk-link, .uk-link:hover, a:hover{
    color: var(--green);
}

.height {
    margin-top: 30px;
}
hr.small {
    border-color: var(--black);
    max-width: 33%;
    margin: 7px auto;
}
/*================================ SCHRIFTEN ENDE ================================*/




/*================================== NAVIGATION ==================================*/
.sticky-wrapper {
    background-color: transparent;
    position: relative;
    z-index: 900;
    padding: 20px 0;
}
.sticky-wrapper.uk-active {
    background-color: var(--white);
    box-shadow: 0 0 25px rgb(0 0 0 / 10%);
    padding: 5px 0;
}
.uk-navbar-nav > li > a {
    font-family: var(--deco-font);
    font-size: 22px;
    color: var(--black);
    font-weight: 600;
    text-transform: none;
}
.offcanvas-nav {
    list-style-type: none;
    padding: 0;
}
.offcanvas-nav > li > a {
    font-family: var(--deco-font);
    font-size: 20px;
    color: var(--black);
    font-weight: 600;
    text-transform: none;
    padding: 7px 0;
    display: block;
}

.uk-offcanvas-bar {
    width: 100vw;
    text-align: center;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-logo {
    max-width: 70%;
}

/*=============================== NAVIGATION ENDE ================================*/




/*================================== SLIDESHOW ===================================*/
section.slider {
    background-image: url("../images/ThonPho01.jpg");
    background-size: cover;
    background-position: center;
    height: 100vh;
    position: relative;
    top: -122px;
    margin-bottom: -122px;
}
section.statisch {
    background-image: url("../images/ThonPho01.jpg");
    background-size: cover;
    background-position: center;
    height: 400px;
}
.inhalt {
    padding: 100px 0;
}
/*=============================== SLIDESHOW ENDE =================================*/




/*=================================== SECTIONS ===================================*/
section.massagen {
    padding: 100px 0;
}
section.bonuskarte {
    padding: 100px 0;
    background-color: #fff3dd;
}
section.gutschein {
    padding: 100px 0;
    background-color: #fff3dd;
}
section.zertifikat {
    padding: 100px 0;
    background-color: #fff3dd;
}
section.impressionen {
    padding: 100px 0;
}
section.kontakt {
    padding: 100px 0;
    background-color: #fff3dd;
}
/*================================= SECTIONS ENDE ================================*/




/*==================================== GALERIE ===================================*/
.galery-image {
    width: 100%;
    background-size: cover;
    background-position: center;
}
.galery-image.wide {
    height: 300px;
}
.galery-image.large {
    height: 600px;
}
a + a .wide {
    margin-top: 15px;
}

/*================================= GALERIE ENDE =================================*/




/*=================================== FORMULAR ===================================*/
label {
    display: block;
}
input[type="text"],
input[type="email"] {
    width: 100%;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
}
textarea {
    width: 100%;
    height: 150px;
}
input[type="checkbox"] {
    float: left;
    margin: 8px 10px 0 0;
}
/*================================= FORMULAR ENDE ================================*/




/*=================================== KONTAKT ====================================*/
.icon {
    background-repeat: no-repeat;
    padding-left: 45px;
    background-position: left -3px;
}
.adresse {background-image: url('../images/adress.svg');}
.phone {background-image: url('../images/phone.svg');}
.mobile {background-image: url('../images/mobile.svg');}
.email {background-image: url('../images/mail.svg');}
/*================================= KONTAKT ENDE =================================*/




/*==================================== FOOTER ====================================*/
footer {
    background-color: var(--dgreen);
    padding: 100px 0;
}
footer p {
    color: var(--white);
}
footer a {
    color: var(--white);
    text-decoration: none;
}
footer a:hover {
    color: var(--white);
}
/*================================== FOOTER ENDE =================================*/

.menu-open {
    padding: 5px 10px;
    border-radius: 6px;
    box-shadow: 0 0 20px rgb(0 0 0 / 20%);
    height: 35px;
    background-color: var(--white);
}
.uk-active .menu-open {
    padding: 5px 10px;
    border-radius: 6px;
    box-shadow: none;
    height: 35px;
    background-color: transparent;
    margin-top: 5px;
}


/*================================= MEDIA QUERIES ================================*/
@media screen and (max-width: 1220px) {
    .uk-navbar-nav > li > a {
        font-size: 20px;
        font-weight: 700;
        padding: 14px;
    }
    img.logo {
        max-width: 240px;
    }
}
@media screen and (max-width: 1070px) {
    .uk-navbar-nav > li > a {
        font-size: 18px;
        font-weight: 700;
        padding: 10px;
    }
    img.logo {
        max-width: 200px;
    }
    section.slider {
        height: auto;
        padding-top: 66%;
    }
}
@media screen and (max-width: 768px) {
    h1, .h1 {
        font-size: 30px;
        font-weight: 700;
    }
    h2, .h2 {
        font-size: 23px;
    }
    p.highlight, p {
        font-size: 17px;
        font-family: var(--main-font);
    }
    footer {
        padding: 50px 0;
    }
    section.bonuskarte,
    section.gutschein,
    section.massagen,
    section.zertifikat,
    section.impressionen,
    section.kontakt {
        padding: 80px 0;
    }
    footer .uk-grid > div {
        margin-bottom: 50px;
    }
    footer .uk-grid > div:last-of-type {
        margin-bottom: 0;
    }
}
/*=============================== MEDIA QUERIES ENDE =============================*/