* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --spc-8: 0.5rem;
  --spc-16: 1rem;
  --spc-24: 1.5rem;
  --spc-32: 2rem;
  --spc-48: 3rem;
  --spc-96: 6rem;
  --spc-142: 8.875rem;
  --spc-192: 12rem;

  --clr-haupt: #F2EADD;
  --clr-zweit: #2E2E2C;
  --clr-akzent: #A2B7A8;
  --clr-extra: #506E66;

  --font-text: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  --font-bold: 700;

  --text-xl: 2.5rem;
  --text-lg: 2.25rem;
  --text-md: 1.75rem;
  --text-base: 1.25rem;
  --text-sm: 1rem;
}



/* quicksand-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/quicksand-v37-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/quicksand-v37-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/quicksand-v37-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/quicksand-v37-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/quicksand-v37-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/quicksand-v37-latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */
}
/* quicksand-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/quicksand-v37-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../fonts/quicksand-v37-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/quicksand-v37-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/quicksand-v37-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/quicksand-v37-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/quicksand-v37-latin-700.svg#Quicksand') format('svg'); /* Legacy iOS */
}


html {
    background-color: var(--clr-haupt);
    font-family: var(--font-text);
    font-size: 75%;
    scroll-behavior: smooth;
    scroll-padding-top: 2em;
}

body {
    font-size: var(--text-base);
    min-block-size: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;
}

:is(h1, h2) {
    font-size: var(--text-md);
    text-wrap: balance;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

:is(h3, h4) {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    text-wrap: balance;
}

:is(p, li) {
    font-size: var(--text-base);
    line-height: 145%;
    text-wrap: pretty;
}

li {
    margin-left: var(--spc-48);
}

a {
    color: inherit;
}

/* .section + .section { */
    /* margin-top: var(--spc-192); */
/* } */

:is(h1, h2) + :is(p, div) {
    margin-top: var(--spc-48);
}

:is(h3, h4) + :is(p, ul, div),
ul + p {
    margin-top: var(--spc-16);
}

p + :is(p, h2, h3, ul) {
    margin-top: var(--spc-16);
}

section:not(section.contact),
.footer {
    max-width: 120rem;
    margin-inline: auto;
    padding: 0 var(--spc-24);
}

.page-bg {
    position: relative;
    isolation: isolate;
    /* min-height: 100vh; */
    min-height: auto;
    overflow: hidden;
    margin-bottom: var(--spc-96);
}

.page-bg::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4rem;
  bottom: 4rem;
  left: 10%;
  right: -8%;

  background:
     radial-gradient(
        circle at 60% 30%,
        #e6eadf 0%,
        #d9ded1 40%,
        #cdd3c4 100%
     );

  border-radius: 30% 70% 22% 78% / 18% 22% 78% 82%;
  transform: rotate(-4deg);
}


.page-bg-second {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
}

.page-bg-second::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4rem;
  bottom: 4rem;
  left: -8%;
  right: 24%;

  background:
     radial-gradient(
        circle at 60% 30%,
        #e6eadf 0%,
        #d9ded1 40%,
        #cdd3c4 100%
     );

border-radius: 90% 20% 10% 80% / 20% 80% 30% 70%;
    transform: rotate(-4deg);
}

figure {
    overflow: hidden;
}


figure a img {
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;

    &:hover {
        transform: scale(105%);
    }
}

img {
    width: 100%;
    height: auto;
}

.centered {
    text-align: center;
    /* text-decoration: underline; */
    /* text-decoration-style: dotted; */

    &::after {
        content: '';
        display: block;
        margin: var(--spc-16) auto 0 auto;
        /* width: 50%; */
        /* border-bottom: 4px dotted var(--clr-zweit); */
    }

}

.boxed {
    max-width: 90%;
    margin: 0 auto;
}

.boxed-plus {
    max-width: 75%;
    margin: 0 auto;
}

.grid {
    --columns: 4;
    --gutter: var(--spc-48);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-inline: auto;
}

.grid .column {
    grid-column: span var(--columns);
}


.items-center {
    align-items: center;
}


.grid > .column {
  margin-bottom: var(--gutter);
}

.flex {
    display: flex;
}



.btn {
    font-weight: 400;
    font-size: var(--text-base);
    background-color: transparent;
    padding: var(--spc-8) var(--spc-16);
    border: 1px solid var(--clr-zweit);
    text-decoration: none;

    &:hover {
        background-color: var(--clr-zweit);
        color: var(--clr-haupt);
    }
}

.btn-secondary {
    background-color: var(--clr-zweit);
    color: var(--clr-haupt);

    &:hover {
        background-color: transparent;
        color: var(--clr-zweit);
    }
}

.btn-wrapper {
    margin-top: var(--spc-24);
    display: flex;
    gap: var(--spc-8);
    flex-wrap: wrap;
}

/********************
* Hero
*********************/

.hero-grid {
    display: flex;
    flex-direction: column;
}

.hero-hello {
    grid-row: 1 / 2;
    grid-column: 5 / 13;
    font-size: 6dvw;
    font-weight: var(--font-bold);
    margin-bottom: var(--spc-16);
    order: 2;

    @media (min-width:64rem) {
        font-size: 3dvw;
        padding-top: var(--spc-96);
    }
}

.hero-logo {
    grid-row: 1 / 3;
    grid-column: 1 / 5;
    z-index: 2;
    width: 30%;
    padding-bottom: var(--spc-16);
    order: 1;
    }

.hero-grid img:not(.hero-about img, .hero-logo img) {
    width: 100%;
    display: block;
    grid-column: 3 / 13;
    grid-row: 2 / 12;
    position: relative;
    z-index: 1;
    order: 3;
}

.hero-content {
    grid-column: 1 / 5;
    grid-row: 3 / 13;
    background-color: var(--clr-akzent);
    padding: var(--spc-16);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    order:4;
}

.zitat {
    margin: var(--spc-48) 0;
}

.zitat p {
    font-size: var(--text-md);
}

.hero-about {
    display: flex;
    /* flex-wrap: wrap; */
    gap: 5%;
    align-items: center;
    padding-top: var(--spc-24);
    border-top: 1px solid var(--clr-zweit);
}

.hero-about img {
    max-width: 25%;
    border-radius: 100%;
}

.hero-about-text {
    max-width: 70%;
}

.hero-about p {
    text-wrap: balance;
    font-size: var(--text-base);
}

.hero-about .btn {
    font-size: var(--text-sm);
}


/********************
* Urlaub
*********************/

.vacation-wrapper {
    margin-block: var(--spc-96);
    display: grid;
    justify-content: center;
}

.vacation {
    max-width: 900px;
    background-color: var(--clr-extra);
    color: var(--clr-haupt);
    padding: var(--spc-48);
    border: 2px solid var(--clr-haupt);
    outline: 8px solid var(--clr-extra);
}

/********************
* Praxis
*********************/

.praxis .boxed {
    margin-bottom: var(--spc-96);
}

.room-content {
    background-color: var(--clr-akzent);
    padding: var(--spc-48);
}


/********************
* Leistungen
*********************/

.leistung {
    margin: var(--spc-48) 0;
}

/* .leistungen .leistung:nth-child(odd) { */
    /* text-align: right; */
/* } */



/********************
* About
*********************/

.milestones {
    margin-top: var(--spc-24);
}

.milestone {
    display: grid;
    grid-template-columns: auto 2fr auto;
    gap: var(--spc-16);
    align-items: end;
    line-height: 160%;
}

/* .milestone-dots { */
    /* border-bottom: 1px dotted var(--clr-zweit); */
    /* margin-inline: 2px; */
/* } */

/********************
* Kontakt
*********************/

.contact {
    background: linear-gradient(to bottom, var(--clr-haupt) 96px, #cdd3c4  96px);
    margin-top: var(--spc-96);
    padding-bottom: var(--spc-96);
}

.contact h3 {
    font-size: var(--text-lg);
}

.contact-wrapper {
    background-color: var(--clr-akzent);
    padding: var(--spc-96);

    @media (min-width: 96rem) {
        max-width: 75%;
    }
}

.contact-wrapper p:not(.info-box p) {
    margin-bottom: var(--spc-24);
}

.contact-content {
    display: flex;
    flex-direction: column;
    gap: var(--spc-24);
}

.contact-content-inner {
    display: block;

    @media (min-width:60rem) {
        display: flex;
        gap: var(--spc-48);
    }

    img {
        max-width: 70%;
    }
}

.info-box {
    margin-bottom: var(--spc-24);
    background-color: var(--clr-haupt);
    padding: var(--spc-24);
    font-size: var(--text-md);
}


/********************
* Footer
*********************/

footer {
    padding: var(--spc-24) 0;
}

.copyright {
    display: block;

    @media (min-width: 40rem) {
        display: flex;
        justify-content: space-between;
    }
}

.dev-info {
    font-size: var(--text-sm);
    margin-top: var(--spc-48);

    @media (min-width:40rem)  {
        line-height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2px;
        text-align: center;
    }

    svg {
        display: inline;
        transform: scale(75%);
    }

    a {
        text-decoration: none;
    }
}

.dev-info-a {
    display: flex;
    flex-direction: row;
    align-items: center;
}



/*** Anmeldeformular ***/



.honeypot {
    position: absolute;
    left: -9999px;
}

input[type="text"],
input[type="email"] {
    font-size: var(--text-base);
    padding: 4px;
    background-color: var(--clr-haupt);
}

textarea {
    min-height: 100px;
    background-color: var(--clr-haupt);
    padding: 4px;
    font-size: var(--text-base);
}

label {
    font-size: var(--text-sm);
}

.datenschutz {
    display: flex;
    align-items: flex-start;
    gap: var(--spc-16);
}

form p {
    font-size: var(--text-sm);
}

.honeypot {
    position: absolute;
    left: -9999px;
}

.field {
     margin-bottom: var(--spc-16);
  }

.anmeldeformular-feld {
      display: block;
      width: 100%;
      border: none;
}

.anmeldeformular-feld::placeholder {
    padding: 1px;
    opacity: 1;
  }

  .anmeldeform-datenschutz p {
    padding-left: var(--spc-24);
  }


/********************
* Menue
*********************/

.default-logo {
    max-width: 150px;
    margin-bottom: var(--spc-48);
}

nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: var(--spc-24);
}

menu span {
    font-size: var(--text-base);
    cursor: pointer;

    @media screen and (min-width: 64rem) {
        font-size: var(--text-md);
    }
}

.overlay {
    height: 100vh;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: 0.5s;
	z-index: 9999;
    background-color: var(--clr-akzent);
}

.overlay-content {
    position: relative;
    top: 15%;
    margin-top: var(--spc-24);
}

.overlay a {
    display: block;
    font-size: var(--text-md);
    margin-bottom: var(--spc-48);
    font-weight: var(--font-bold);
    text-decoration: none;
    text-align: center;

    &:hover {
        text-decoration: underline;
    }
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: var(--text-lg);

    &:hover {
        text-decoration: none;
    }

}

.logo-desktop img {
    width: 10%;
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 9;
}



/********************
* Error
*********************/

#error {
    margin-top: var(--spc-96);
}

#error img {
    max-width: 200px;
    margin-bottom: var(--spc-24);;
}


/********************
* Glider Slider
*********************/

.slider-nav {
    display: flex;
}

.slider-nav svg {
    fill: var(--clr-zweit);
    width: var(--spc-48);
    height: auto;
}

.glider-dots {
    align-content: center;
}


.glider-dot.active {
    background-color: var(--clr-extra);
}

.glider-dot {
    width: 6px;
    height: 6px;
}




/* --1024px-- */
@media screen and (min-width: 64rem) {

    :is(h1, h2) {
        font-size: var(--text-lg);
    }

    /* body { */
        /* padding: 0 var(--spc-24); */
    /* } */

    .grid {
        --columns: 12;
        --gutter: var(--spc-96);
        display: grid;
        grid-gap: var(--gutter);
        grid-template-columns: repeat(12, 1fr);
        margin-inline: auto;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spc-24);

        img {
            height: 100%;
        }
    }

    .boxed {
        max-width: 75%;
        margin: 0 auto;
    }

    .boxed-plus {
        max-width: 50%;
        margin: 0 auto;
    }

    .hero-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(12, auto);
        max-width: 90%;
        margin-inline: auto;
    }

    .hero-logo {
        width: 280px;
    }

    .hero-content {
        padding: var(--spc-48);
    }

    .room {
        --overlap: 1rem;
        display: grid;
        grid-template-rows: auto auto;
        margin-bottom: var(--overlap);
    }

    .room img {
        width: 100%;
        display: block;
    }

    .room-content {
        z-index: 2;
        position: relative;
    }

}


/* --1280px-- */
@media screen and (min-width: 80rem) {

    html {
        font-size: 100%;
    }

    body {
        padding: 0;
    }

    /* .hero-logo { */
        /* width: 350px; */
    /* } */

    .room {
        --overlap: 4rem;
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 10% 80% 10%;
        margin-bottom: var(--overlap);
    }

    .room img {
        grid-row: 1 / 2;
        grid-column: 1 / 3;
        width: 100%;
        display: block;
    }

    .room-content {
        margin-left: var(--spc-48);
        margin-top: calc(var(--overlap) * -1);
        grid-column: 2 / 4;
        grid-row: 2 / 3;
        z-index: 2;
        position: relative;
    }


}

/* --1440px-- */
@media screen and (min-width: 90rem) {

    :is(h1, h2) {
        font-size: var(--text-xl);
    }

    .logo-desktop img {
         width: auto;
    }

    .hero-logo {
         width: 350px;
    }

}

/* 1280px - 1376px und 2000px*/
@media screen and (min-width: 80rem) and (max-width: 86rem) and (orientation: landscape),
@media screnn and (min-width: 125rem) {

    .hero-hello {
        font-size: 3rem;
        grid-column: 3 / 13;
    }

    .hero-logo {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }

    .hero-logo img {
        width: 300px;
    }

    .hero-grid img:not(.hero-about img, .hero-logo img) {
        grid-column: 2 / 13;
    }

    .hero-content {
        grid-column: 1 / 4;

        h1 {
            font-size: var(--text-md);
        }
    }

}



.glider-img {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.glider-img img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
}