@font-face {
    font-family: 'Boska-Extralight';
    src: url('fonts/Boska-Extralight.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
    font-style: normal;
  }
@font-face {
    font-family: 'Boska-ExtralightItalic';
    src: url('fonts/Boska-ExtralightItalic.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
    font-style: italic;
  }
@font-face {
    font-family: 'Boska-Light';
    src: url('fonts/Boska-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: normal;
  }
@font-face {
    font-family: 'Boska-LightItalic';
    src: url('fonts/Boska-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: italic;
  }
@font-face {
    font-family: 'Boska-Regular';
    src: url('fonts/Boska-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }
@font-face {
    font-family: 'Boska-Italic';
    src: url('fonts/Boska-Italic.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: italic;
  }
@font-face {
    font-family: 'Boska-Medium';
    src: url('fonts/Boska-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
  }
@font-face {
    font-family: 'Boska-MediumItalic';
    src: url('fonts/Boska-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: italic;
  }
@font-face {
    font-family: 'Boska-Bold';
    src:  url('fonts/Boska-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
  }
@font-face {
    font-family: 'Boska-BoldItalic';
    src: url('fonts/Boska-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: italic;
  }
@font-face {
    font-family: 'Boska-Black';
    src: url('fonts/Boska-Black.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
    font-style: normal;
  }
@font-face {
    font-family: 'Boska-BlackItalic';
    src: url('fonts/Boska-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
    font-style: italic;
  }

@font-face {
    font-family: 'Satoshi-regular';
    src: url('fonts/Satoshi-Regular.otf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }


:root{
    --nav-size: 72px;
    --wpforms-button-background-color: #5e548e;
    --wpforms-field-background-color: #f0e7fb;
    --wpforms-field-border-color: #211130;
    --wpforms-field-text-color: #211130;
    --wpforms-label-color: #211130;
    --wpforms-label-error-color: #211130;
    --wpforms-button-border-radius: 16px;
    --wpforms-field-size-input-height: 50px;
    --wpforms-button-size-height: 50px;
    --wpforms-label-size-font-size: clamp(16px, 1.6vw, 28px);
    --color-primary: #685e9a;
    --color-primary-light: #bba2dc;
    --color-secondary: #b173ba;
    --color-secondary-light: #e5c9ea;
    --color-white: #f6f2fb;
    --color-black-shaddow: #606060;
    --color-black: #211130;
    --margin-extra-big: 120px;
    --margin-big: 80px;
    --margin-medium: 50px;
    --margin-small: 25px;
    --margin-extra-small: 10px;
    --Fosi-big: clamp(45px, 4.5vw, 110px);
    --Fosi-medium-big: clamp(38px, 3.8vw, 80px);
    --Fosi-medium: clamp(26px, 3.2vw, 60px);
    --Fosi-medium-small: clamp(22px, 2.4vw, 38px);
    --Fosi-small: clamp(12px, 1.4vw, 24px);
    --Fosi-extra-small: clamp(10px, 1.2vw, 15px);
    --tasten-height-white: 12.49dvh;
    --tasten-height-black: 8.32vh;
}

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

html{
  scroll-behavior: smooth;
  max-width: 100%;
}

body{
  background-color: var(--color-white);

}

h1{
    font-family: 'Boska-Black';
    font-weight: 900;
    font-display: swap;
    font-style: normal;
    font-size: var(--Fosi-big);
    color: var(--color-primary);
    margin-bottom: var(--margin-small);
}

h2{
  font-family: 'Boska-BoldItalic';
  font-weight: 700;
  font-display: swap;
  font-style: italic;
  font-size: var(--Fosi-medium);
  color: var(--color-primary);
  text-align: left;
}

h3{
  font-family: 'Boska-Bold';
  font-weight: 700;
  font-display: swap;
  font-style: normal;
  font-size: var(--Fosi-medium-small);
  color: var(--color-primary);
  margin-bottom: var(--margin-extra-small);
  margin-top: var(--Fosi-medium);
}

h4{
  font-family: 'Boska-Medium';
  font-weight: 500;
  font-display: swap;
  font-style: normal;
  font-size: var(--Fosi-small);
  color: var(--color-black);
}

h5{
  font-family: 'Boska-Bold';
  font-weight: 700;
  font-display: swap;
  font-style: normal;
  font-size: var(--Fosi-medium);
  color: var(--color-black);
  margin-bottom: var(--Fosi-small);
}

h6{
  font-family: 'Boska-BoldItalic';
  font-weight: 700;
  font-display: swap;
  font-style: italic;
  font-size: var(--Fosi-medium-big);
  color: var(--color-primary);
  text-align: left;
}

p, li{
  font-family: 'Satoshi-regular';
  font-weight: 400;
  font-display: swap;
  font-style: normal;
  font-size: var(--Fosi-small);
  color: var(--color-black);
  margin-bottom: 4px;
}

ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-left: 20px;
}

a{
  font-family: 'Satoshi-regular';
    font-weight: 400;
  font-display: swap;
  font-style: normal;
  font-size: var(--Fosi-small);
  color: var(--color-black);
  margin-bottom: 4px;
}


/*-----NAV-----*/

nav{
  background-color: var(--color-primary);
  margin-inline: auto;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  box-shadow: 0px 5px 20px var(--color-black-shaddow);
}

.nav-container{
  height: var(--nav-size);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  max-width: 1400px;
}

.nav-logo{
  width: 10%;
  height: var(--nav-size);
  display: flex;
  justify-content: start; 
  align-items: center;
}

.nav-logo img{
  width: 50px;
  height: 50px;
}

.nav-container .nav-content{
  width: 79.9%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-size);
}

.nav-container .nav-burgermenu{
  width: 10%;
  height: var(--nav-size);
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
}

.nav-container .bar1{
  width: 28px;
  height: 4px;
  background-color: var(--color-white);
  border-radius: 4px;
  margin-bottom: 5px;
}

.nav-container .bar2{
  width: 34px;
  height: 4px;
  background-color: var(--color-white);
  border-radius: 4px;
  margin-bottom: 5px;
}

.nav-container .bar3{
  width: 28px;
  height: 4px;
  background-color: var(--color-white);
  border-radius: 4px;
}

nav .nav-container ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  list-style: none;
}

nav .nav-content a{
  height: var(--nav-size);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
  color: var(--color-white);
  font-size: var(--Fosi-small);
  font-family: 'boska-medium';
  text-decoration: none;
}

nav .nav-content a:hover{
  transition: 0.7s ease-in-out;
  text-decoration: underline;
}

@media(max-width: 1024px){

  .nav-logo{
  width: 25%;
  }

  .nav-container .nav-content{
    display: none;
  }

  .nav-container .nav-burgermenu{
  width: 25%;
  }

  .nav-container{
    width: 80%;
    gap: 49.9%;
  }
}

/*-----BURGER-----*/

.nav-burger-content .nav-content{
  width: 60%;
}

.nav-burger-content .nav-content ul, .nav-burger-content .nav-content li{
  width: 100%;
}

.touches{
  position: fixed;
  top: 0;
  right: -45%;
  width: 40%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: end;
  z-index: 999;
  transition: ease-in-out 0.7s;
  box-shadow: -2px -1px 40px var(--color-black);
}

.touche{
  width: 100%;
  height: var(--tasten-height-white);
  border-top: black 4px solid;
  background-color: var(--color-white);
}

.nav-burger-content{
  position: fixed;
  height: 100dvh;
  top: 0;
  right: -40%;
  height: 100%;
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: end;
  z-index: 9999;
  transition: ease-in-out 0.7s;
}

.nav-burger-content a{
  padding: 0;
  margin: 0;
}

.close-burger{
  margin-top: calc(var(--tasten-height-white) - var(--tasten-height-black) / 2);
  height: var(--tasten-height-black);
  display: flex;
  justify-content: start;
  align-items: center;
  width: 60%;
  background-color: var(--color-black);
  padding-left: 12px;
  cursor: pointer;
}

#close-burger{
    padding: 24px 16px;
}

#menu-item-257{
  margin-top: calc(var(--tasten-height-white) - var(--tasten-height-black));
}

#menu-item-258{
  margin-top: calc((var(--tasten-height-white) - var(--tasten-height-black) / 2) * 2);
}

#menu-item-259{
  margin-top: calc(var(--tasten-height-white) - var(--tasten-height-black));
}

#menu-item-27{
  margin-top: calc(var(--tasten-height-white) - var(--tasten-height-black));
}

#menu-item-257, #menu-item-258,#menu-item-259, #menu-item-27{
  height: var(--tasten-height-black);
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  background-color: var(--color-black);
  padding-left: 12px;
  cursor: pointer;
}

#menu-item-38{
  margin-top: calc((var(--tasten-height-white) - var(--tasten-height-black) / 2) * 2);
  height: calc(var(--tasten-height-black) / 2);
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  background-color: var(--color-black);
  padding-left: 12px;
  cursor: pointer;
}

.nav-burger-content .menu{
  margin: 0;
  padding: 0;
}

nav .nav-burger-content a{
  color: var(--color-white);
  font-size: var(--Fosi-medium-small);
  font-family: 'boska-medium';
  text-decoration: none;
} 

#menu-item-38 a{
  font-size: var(--Fosi-extra-small);
}

nav .nav-burger-content #close-burger img{
  height: 50px;
}

@media(max-width: 1024px){
  .nav-burger-content .nav-content{
  width: 60%;
  visibility: visible;
  }

  .touches{
  position: fixed;
  top: 0;
  right: -65%;
  width: 60%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: end;
  z-index: 999;
  transition: ease-in-out 0.7s;
  box-shadow: -2px -1px 40px var(--color-black);
  }

  .nav-burger-content{
  position: fixed;
  top: 0;
  right: -60%;
  height: 100%;
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: end;
  z-index: 9999;
  transition: ease-in-out 0.7s;
  }

  .close-burger{
    width: 60%;
  }
}

@media(max-width: 550px){
  .nav-burger-content .nav-content{
  width: 80%;
  visibility: visible;
  }

  .touches{
  position: fixed;
  top: 0;
  right: -85%;
  width: 80%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: end;
  z-index: 999;
  transition: ease-in-out 0.7s;
  box-shadow: -2px -1px 40px var(--color-black);
  }

  .nav-burger-content{
  position: fixed;
  top: 0;
  right: -70%;
  height: 100%;
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: end;
  z-index: 9999;
  transition: ease-in-out 0.7s;
  }

  .close-burger{
    width: 80%;
  }
}

/*-----FOOTER-----*/

footer{
  padding-block: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 10%;
  background-color: var(--color-secondary-light);
  margin: 0;
}

.footer-left{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  width: 30%;
}

.footer-middle{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 30%;
}

.footer-middle img{
  height: 100px;
  object-fit: contain;
}

.footer-nav{
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
  width: 30%;
}

.footer-nav ul{
  list-style: none;
  text-decoration: none;
  text-align: right;
  padding: 0;
  margin: 0;
}

.footer-nav a{
    text-decoration: none;
}

.footer-nav a:hover{
    text-decoration: underline;
    transition: ease-in-out 0.7s;
}

.custom-logo{
  max-width: 100%;
}

@media(max-width: 600px){
  footer{
  padding-block: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-inline: 10%;
  gap: 24px;
}

.footer-nav ul{
  text-align: center;
}

.footer-left p{
  text-align: center;
}

.custom-logo{
  height: 75px;
}

.footer-left, .footer-middle, .footer-nav, #menu-burger-menu-1{
  width: 100%;
  align-items: center;
  margin: 0;
  padding: 0;
}

}

/*-----MAINTENANCE-404-----*/

.maintenance-404{
  height: 100vh;
  width: 100%;
  color: var(--color-primary-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center ;
}

.maintenance-404-logo img{
  height: 200px;
  width: auto;
  object-fit: cover;
}

/*-----PASSWORD-----*/

.post-password-form{
  height: calc(100vh - var(--nav-size));
  padding: 100px;
}

/*-----HOME-NEW-----*/

.box-height{
  height: calc(100vh - var(--nav-size));
}

/*-----HEADER-----*/

.header-in-die-mitte-bitte{
  width: 80%;
  height: calc(100vh - var(--nav-size));
  background-image: url('bg-img/header-bg.png');
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: -2px 5px 20px var(--color-black-shaddow);
  position: relative;
  z-index: 9;

}

.header-text{
  background-color: var(--color-secondary-light);
  box-shadow: 1px 1px 20px var(--color-secondary);
  width: 45%;
  height: 40vh;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: calc((100% - var(--nav-size) - 40%) / 2);
  left: 10%;
  padding-inline: 24px;
}

.header-title{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: 10%;
  height: 50vh;
}

.header-title-left{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  height: 100%;;
}

.wp-block-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-title-right {
  height: 100%;
  width: 100%;
}


.header-title-right img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: -2px 5px 20px var(--color-black-shaddow);

}

.scroll-down img{
  width: 100px;
  height: 150px;
}

@media(max-width: 782px){

.header-title{
  height: 55vh;
  margin: 0;
}

.header-in-die-mitte-bitte{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-inline: 10%;
}

.header-text{
  bottom: calc((100% - var(--nav-size) - 20%) / 2);
  left: 10%;
}

.header-title-left{
  height: 0%;;
  margin-bottom: var(--margin-medium);
}

}

/*-----SECTION-HOME-----*/

.section-primary{
  height: 100vh;
  max-height: 1200px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-secondary-light);
  gap: 0px;
}

.section-secondary{
  height: 100vh;
  max-height: 1200px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0px; 
}

.img-container-left{
  height: 100vh;
  max-height: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 10%;
  background-color: var(--color-primary);
  gap: 9.9%;
  position: relative;
}

.img-container-right{
  height: 100vh;
  max-height: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-right: 10%;
  background-color: var(--color-secondary);
  gap: 9.9%;
  position: relative;
}

.img-container-left img{
  position: absolute;
  top: 20%;
  left: 20%;
  width: 160%;
  height: 60%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 2px 5px 20px var(--color-black-shaddow);

}

.img-container-right img{
  position: absolute;
  top: 20%;
  right: 20%;
  width: 160%;
  height: 60%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: -2px 5px 20px var(--color-black-shaddow);

}

.text-container-right{
  height: 100vh;
  max-height: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10% 10% 10% 12.5%;
  background-color: var(--color-primary-light);
}

.text-container-left{
  height: 100vh;
  max-height: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10% 12.5% 10% 10%;
  background-color: var(--color-secondary-light);
}

.text-container-left p, .text-container-left h5{
  text-align: right;
}

.text-container-right p, .text-container-right, h5{
  text-align: left;
}

.img-container-left .wp-image-13{
  width: 100%;
  margin-left: 5%;
}

.img-container-right .wp-image-13{
  width: 100%;
  margin-right: 5%;
}

.kt-btn-inner-text{
  font-size: var(--Fosi-small);
}

.maps{
  border-radius: 10px;
}

@media(max-width: 782px){

.section-primary{
  display: flex;
  justify-content: center;
}

.text-container-left p, .text-container-left h5{
  text-align: left;
}

.wp-block-kadence-advancedbtn.kb-btns53_604a3f-71{
  justify-content: start;
}

.section-secondary{
  display: flex;
  justify-content: center;
}

.img-container-left{
  height: 40vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 0%;
  background-color: var(--color-primary);
  gap: 9.9%;
  position: relative;
}

.img-container-right{
  height: 40vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-right: 0%;
  background-color: var(--color-secondary);
  gap: 9.9%;
  position: relative;
}

.img-container-left img{
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 100%;
  object-fit: cover;
}

.img-container-right img{
  position: absolute;
  top: -10%;
  left: 10%;
  width: 80%;
  height: 100%;
  object-fit: cover;
}

.text-container-right{
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start !important;
  background-color: var(--color-primary-light);
  text-align: left !important;
}

.text-container-left{
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-secondary-light);
}


.img-container-left .wp-image-13{
  width: 80%;
  margin-left: 0%;
}

.img-container-right .wp-image-13{
  width: 80%;
  margin-right: 0%;
}
}

@media(max-width:767px){
  .wp-block-kadence-advancedbtn .kb-btn53_194a01-26.kb-button{
    border-left: 2px solid #231942;
    border-right: 2px solid #231942;
    border-top: 2px solid #231942;
    border-bottom: 2px solid #231942;
  }
}

/*-----INSCRIPTION----*/

.block-container{
  max-width: 1400px;
  width: 80%;
  margin-inline: auto;
}

.wp-block-image .alignright{
  margin: 0;
}

.check-yes{
  width: 35px;
  height: 35px;
  margin: 0;
}

.wp-image-227{
  width: 35px;
  height: 35px;
  margin: 0;
}

@media(max-width: 900px){
  figure .check-yes{
  width: 25px;
  height: 25px;
}

.wp-block-column .is-vertically-aligned-center .opposition-check-yes .is-layout-flow .wp-block-column-is-layout-flow{
  flex-basis: 94%;
}

.wp-block-column .is-vertically-aligned-center .row-check-yes .is-layout-flow .wp-block-column-is-layout-flow{
  flex-basis: 5%;
}
}

@media(max-width: 700px){
 figure .check-yes{
  width: 25px;
  height: 25px;
}
}

/*-----BOOKING-FORM-----*/

div .wpbs-container div .wpbs-calendars{
  display: flex;
  justify-content: center;
}

.wpbs-calendars th, .wpbs-date-number span{
  font-family: 'Boska-Regular';
  font-weight: 400;
  font-display: swap;
  font-style: normal;
  font-size: var(--Fosi-extra-small);
  color: var(--color-black);
  margin-bottom: 4px;
}

.wpbs-calendar{
  border-radius: 15px;
  margin-inline: auto;
}

.wpbs-calendars tr, .wpbs-calendars span{ 
  font-family: 'Boska-Regular';
  font-weight: 400;
  font-display: swap;
  font-style: normal;
  font-size: var(--Fosi-small);
  color: var(--color-black);}

.wpbs-legend{
    border-radius: 15px;
}

.wpbs-calendar-header{
  border-radius: 15px;
}

td, td .wpbs-date, .wpbs-legend-item-1, .wpbs-date-inner, .wpbs-legend-item-icon-color {
  border-radius: 10px;
  border: none;
}

tr .wpbs-legend-item-icon-color{
  border: none;
}

.wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-prev, .wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header .wpbs-calendar-header-navigation .wpbs-next{
  background: var(--color-black);
  border-radius: 10px;
}

#wpforms-form-174{
  display: flex;
  flex-direction: column;
  align-items: center;
}

div .wpforms-field-container{
  width: 100%;
}