@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=Calligraffitti&family=Dancing+Script:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=Dancing+Script:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps:wght@400;700&display=swap');

@media (prefers-reduced-motion: no-preference) {
	html,
	body {
		margin: 0;
		padding: 0;
		scroll-snap-type: y mandatory;
		scroll-behavior: smooth;
		scroll-padding: 0;
	}
}

/*****************************************************************************/

:root {
    --pc-packages: #D7C599;
    --pc-packages-dark: color-mix(in srgb, var(--pc-packages), black 20%);
    --pc-packages-strong-dark: color-mix(in srgb, var(--pc-packages), black 60%);
    --pc-packages-light-even: color-mix(in srgb, var(--pc-packages), white 20%);
    --pc-packages-light-odd: color-mix(in srgb, var(--pc-packages), white 40%);
}

/*****************************************************************************/  

.amatic-sc-regular {
    font-family: "Amatic SC", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.amatic-sc-bold {
    font-family: "Amatic SC", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.calligraffitti-regular {
    font-family: "Calligraffitti", cursive;
    font-weight: 400;
    font-style: normal;
}

.bad-script-regular {
    font-family: "Bad Script", cursive;
    font-weight: 400;
    font-style: normal;
}

.oleo-script-swash-caps-regular {
    font-family: "Oleo Script Swash Caps", system-ui;
    font-weight: 0;
    font-style: normal;
}

/*****************************************************************************/  

html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: "Oleo Script Swash Caps";
    margin-bottom: 60px;
    background-image: url(../_images/background.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: var(--pc-packages);
    position: relative;
    overflow-x: hidden;
}

a {
    cursor: pointer;
}

.navbar {
    font-family: Helvetica, Arial, sans-serif;
}

section {
	min-height: 100vh;
	padding-top: 150px;
    height: 100%;

    h2 {
        font-family: "Calligraffitti";
        font-weight: 400;
        font-size: 4em;
        text-align: center;
        line-height: 2rem;
        -webkit-backface-visibility: hidden;
    }

    p {
        padding: 2.5em;
    }
}

section > * {
	margin-top: 50px;
}

.hd-logo {
    height: 100px;
}

.wrapper-start {
    text-align: center;
    margin-top: 10px;

    .start-img {
        width: 50%;
        margin: 0 auto;
    }
}

.wrapper-praxis {
    iframe {
        box-shadow: 0px 4px 17px 5px rgba(0,0,0,0.75);
    }

    video {
        float: left;
        margin-right: 20px;
    }
}

.wrapper-aboutme {
    [class^='col-'] {
        border-left: 2px solid var(--pc-packages-dark);
        padding-left: 50px;
        padding-right: 50px;
    }

    img {
        width: 75%;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 10px;
    }

    .fam {
        float: right;
        border: 5px solid #fff;
        width: 25%;
    }

    a {
        color: var(--pc-packages-strong-dark);
    }

    a:hover {
        text-decoration: none;
    }
}

.wrapper-treatments {
    [class^='col-'] {
        border-left: 2px solid var(--pc-packages-dark);
        padding-left: 50px;
        padding-right: 50px;
    }

    .klangschalen, .fusspflege, .bio {
        float: right;
        max-width: 200px;
        margin-left: 15px;
    }

    .aroma {
        float: left;
        max-width: 200px;
        margin-right: 15px;
    }

    .fa-circle-check {
        color: var(--pc-packages-dark);
    }

    padding-bottom: 100px;
}

.wrapper-packages {

    .packages-table {
        width: 75%;
        margin: 0 auto;
        margin-top: 50px;
        font-size: 12pt;

        .fa-circle-check {
            color: var(--pc-packages-dark);
        }

        th {
            text-align:left;
            background-color: var(--pc-packages-dark);
            padding: 7px;
        }

        tr:nth-child(even) {
            background-color: var(--pc-packages-light-even);
        }

        tr:nth-child(odd) {
            background-color: var(--pc-packages-light-odd);
        }

        td {
            text-align:left;
            padding: 7px;

            a {
                color: var(--pc-packages-strong-dark);
            }

            a:hover {
                text-decoration: none;
            }
        }

        .packages-table-advice-row {
            background-color: var(--pc-packages) !important;
        }

        .packages-table-advice {
            text-align: center;
            font-size: 10pt;
        }
    }
}

.wrapper-contact {

    font-family: Helvetica, Arial, sans-serif;

    .privacy-stmt {
        float:left; 
        max-width: 530px;
        font-size: 9pt;
    }

    .privacy-checkbox {
        float:left; 
        width: 50px; 
        margin-top: -5px;
    }

    button {
        margin-top: 10px;
    }

}

.modal {
    font-family: Helvetica, Arial, sans-serif;
    max-height: 500px;

    .impressum {
        overflow-y: scroll;
        max-height: 100%;
    }
}

#modal-impressum {
    max-width: unset !important;
    max-height: unset !important;
    width: 75% !important;
    height: 75% !important;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; /* Set the fixed height of the footer here */
    line-height: 60px; /* Vertically center the text there */
    background-color: #000;
    font-size: 9pt;
    font-family: Helvetica, Arial, sans-serif;

    a {
        color: #f0f0f0;
    }

    a:hover {
        text-decoration: none;
    }
}

.container {
    width: auto;
    max-width: 680px;
    padding: 0 15px;
}

@media screen and (max-width: 64em) {
    section {
        h2 {
            line-height: 7rem;
        }
	}
}

@media screen and (max-width: 48em) {
    section {
        h2 {
            line-height: 7rem;
        }
	}
}

@media screen and (max-width: 32em) {
	section {

        padding-top: 1px;

        p {
            margin-top: 0;
        }

        h2 {
            font-size: 2.5em;
            text-align: center;
            line-height: 4rem;
            padding: 10px;
        }
	}

    .wrapper-start {
        padding-top: 150px !important; 

        .start-img {
            width: 90%;
            margin: 0 auto;
        }
    }

    .wrapper-aboutme {
        .fam {
            display: none;
        }
    }

    .wrapper-treatments {
        img, video {
            display: none;
        }
    }
}