/* ---------------------------------------------------------
 * Reset & basic styles
 * ---------------------------------------------------------
 */
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}

/* ---------------------------------------------------------
 * Fonts
 * ---------------------------------------------------------
 */
@font-face {
  font-family: 'Noto Serif';
  src: local('Noto Serif Regular'), local('NotoSerif-Regular'),
    url('../fonts/NotoSerif-Regular.woff2') format('woff2'),
    url('../fonts/NotoSerif-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Noto Serif';
  src: local('Noto Serif Bold'), local('NotoSerif-Bold'),
    url('../fonts/NotoSerif-Bold.woff2') format('woff2'),
    url('../fonts/NotoSerif-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Oleo Script';
  src: local('Oleo Script'), local('OleoScript-Regular'),
    url('../fonts/OleoScript-Regular.woff2') format('woff2'),
    url('../fonts/OleoScript-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* ---------------------------------------------------------
 * Variables
 * ---------------------------------------------------------
 */
:root {
  /* CSS custom properities (colors) */
  --color-dark-hue: 30;
  --color-dark-sat: 18%;
  --color-dark: hsl(var(--color-dark-hue), var(--color-dark-sat), 20%);
  --color-bright: hsl(26, 54%, 97%);
  --color-prim-hue: 143;
  --color-prim-sat: 20%;
  --color-prim: hsl(var(--color-prim-hue), var(--color-prim-sat), 28%);
  --color-prim-light: hsl(var(--color-prim-hue), var(--color-prim-sat), 80%);
  --color-prim-lighter: hsl(var(--color-prim-hue), var(--color-prim-sat), 85%);
  --color-sec-hue: 200;
  --color-sec-sat: 58%;
  --color-sec: hsl(var(--color-sec-hue), var(--color-sec-sat), 30%);
  --color-sec-light: hsl(var(--color-sec-hue), var(--color-sec-sat), 92%);
  --color-sec-lighter: hsl(var(--color-sec-hue), var(--color-sec-sat), 98%);
  --gradient-prim: linear-gradient(90deg, hsl(var(--color-prim-hue), var(--color-prim-sat), 96%), hsl(var(--color-prim-hue), var(--color-prim-sat), 91%));
  --gradient-sec: linear-gradient(90deg, var(--color-sec-lighter), hsl(var(--color-sec-hue), var(--color-sec-sat), 95%));
  --bkg-summer: url('../svg/bkg-summer.svg');
  --bkg-winter: url('../svg/bkg-winter.svg');

  /* CSS custom properities layout */
  --w-content: 1110px;
  --w-content-nar: calc(var(--w-content) * 0.83333333);
  --w-border: 1px;
  --h-header: 48px;
  --r: 8px;
  --z-header: 50;

  /* CSS custom properties (font sizees) */
  --fs-sm: clamp(0.71rem, 0.08vi + 0.69rem, 0.75rem);
  --fs-base: clamp(0.89rem, 0.23vi + 0.84rem, 1rem);
  --fs-md: clamp(1.11rem, 0.45vi + 1.01rem, 1.33rem);
  --fs-lg: clamp(1.39rem, 0.79vi + 1.21rem, 1.78rem);
  --fs-xl: clamp(1.74rem, 1.29vi + 1.45rem, 2.37rem);

  /* CSS custom properities (spaces & animation time) */
  --sp-xs: 0.625rem;
  --sp-s: 0.75rem;
  --sp-m: 2.8rem;
  --sp-l: 4.8rem;
  --sp-xl: 8rem;
  --trans-short: 0;
  --trans-long: 0;
}

@media screen and (prefers-reduced-motion: no-preference) {
  :root {
    --trans-short: 0.3s;
    --trans-long: 0.6s;  
  }
}

/* ---------------------------------------------------------
* General styles
* ---------------------------------------------------------
*/
:root {
  color-scheme: only light;
}

html {
  font-size: 18px;
}

body {
  font-family: 'Noto Serif';
  font-size: var(--fs-base);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  color: var(--color-dark);
  background-color: var(--color-prim-lighter);
  background-image: var(--bkg-summer);
  background-repeat: repeat;
  overflow-x: hidden;
  overflow-y: auto;
  accent-color: var(--color-prim);
}
body.theme-winter {
  background-color: var(--color-sec-lighter);
  background-image: var(--bkg-winter);
  accent-color: var(--color-sec);
}
body.admin-bar .header {
  margin-block-start: 46px;
}

p {
  font-size: var(--fs-base);
  line-height: 1.5;
}
:where(.main) p {
  margin-block-end: var(--sp-s);
}
.font-title {
  font-family: 'Oleo Script', serif;
  font-weight: normal;
  font-style: normal;
}
strong {
  font-weight: bold;
}

a,
a:visited {
  font-weight: bold;
  color: currentColor;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: all var(--trans-short);
}
a:hover {
  text-decoration: none;
  transition: all var(--trans-short);
}
button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: currentColor;
  font-family: inherit;
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  text-align: left;
}
:focus-visible {
  outline-width: calc(var(--w-border) * 2);
  outline-style: solid;
  outline-offset: calc(var(--w-border) * 2);
  outline-color: var(--color-prim);
  transition: none;
}

h1, h2, h3 {
  font-family: 'Oleo Script', serif;
  font-weight: normal;
  overflow-wrap: break-word;
}
h1, h2 {
  font-size: var(--fs-xl);
}
:where(:not(body.home)) h2 {
  margin-block-end: var(--sp-s);
  font-size: var(--fs-lg);
}
:where(:not(body.home)) h2:not(:first-of-type) {
  margin-block-start: var(--sp-m);
}
h3 {
  margin-block-end: var(--sp-s);
  font-size: var(--fs-md);
}
:where(body.home) h3 {
  margin-block-end: var(--sp-m);
}
h4 {
  margin-block: var(--sp-l) var(--sp-s);
  font-size: var(--fs-base);
  font-weight: normal;
  text-transform: uppercase;
}
:where(body.home) h4 {
  margin-block: 0 var(--sp-s);
}

:where(#header) ul,
:where(#footer) ul {
  list-style-type: none;
}
:where(#main) ul,
:where(#main) ol {
  margin-block: var(--sp-s);
  padding-inline-end: var(--sp-s);
}
:where(#main) ul li,
:where(#main) ol li {
  line-height: 1.5;
}
:where(#main) ul li:not(:last-of-type, .slide),
:where(#main) ol li:not(:last-of-type, .slide) {
  margin-block-end: var(--sp-s);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  object-fit: cover;
}
:where(.icon) svg path,
:where(.icon) svg line {
  stroke: currentColor;
}
figure {
  margin: 0;
  overflow: hidden;
}

.shadow {
  box-shadow: 0 1px 50px 0 hsla(0, 0%, 0%, 0.1), 0 1px 4px 0 hsla(0, 0%, 0%, 0.05);
}
.shadow--card {
  box-shadow: 1px 4px 8px 0 hsla(from var(--color-dark) h s l / 0.2), 0 0 1px 0 hsla(from var(--color-dark) h s l / 0.3);
}
.shadow--title {
  text-shadow: 2px 2px 0 var(--color-dark);
}

.gradient {
  --gradient-start: 96%;
  --gradient-end: 91%;
  --gradient-opacity: 0.9;
  background: linear-gradient(90deg, hsla(var(--color-prim-hue), var(--color-prim-sat), var(--gradient-start), var(--gradient-opacity)), hsla(var(--color-prim-hue), var(--color-prim-sat), var(--gradient-end), var(--gradient-opacity)));
  transition: all var(--trans-long);
}
body.theme-winter .gradient {
  --gradient-start: 98%;
  --gradient-end: 95%;
  background: linear-gradient(90deg, hsla(var(--color-sec-hue), var(--color-sec-sat), var(--gradient-start), var(--gradient-opacity)), hsla(var(--color-sec-hue), var(--color-sec-sat), var(--gradient-end), var(--gradient-opacity)));
}

.filter--blur {
  backdrop-filter: blur(3px);
}

.border {
  border: var(--w-border) solid var(--color-prim);
}

.radius {
  border-radius: var(--r);
}
.radius--l {
  border-radius: calc(2 * var(--r));
}

.text-s,
.text-s p,
.text-s a {
  font-size: var(--fs-sm);
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.winter {
  display: none;
}
body.theme-winter .summer {
  display: none;
}
body.theme-winter .winter {
  display: inherit
}

/* ---------------------------------------------------------
 * Components
 * ---------------------------------------------------------
 */
/* Button */
.btn,
.wp-block-button {
  position: relative;
  display: inline-block;
}
.btn > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link), 
.wp-block-button > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link),
.buchen .card .wpbc_container.wpbc_container_booking_form .wpbc_button_light {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 9px 12px;
  background-color: var(--color-prim);
  border: var(--w-border) solid var(--color-prim);
  border-radius: var(--r);
  font-family: inherit;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: var(--color-bright);
  cursor: pointer;
  transition: all var(--trans-short);
}
.btn > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link):hover, 
.wp-block-button > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link):hover,
.buchen .card .wpbc_container.wpbc_container_booking_form .wpbc_button_light:hover {
  background-color: var(--color-prim-light);
  color: var(--color-prim);
  transition: all var(--trans-short);
}
.btn > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link):focus-visible, 
.wp-block-button > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link):focus-visible,
.buchen .card .wpbc_container.wpbc_container_booking_form .wpbc_button_light:focus-visible {
  background-color: var(--color-prim-light);
  color: var(--color-prim);
  transition: all var(--trans-short);
}

.btn.btn--sec > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link) {
    background-color: var(--color-prim-light);
    border-color: var(--color-prim);
    color: var(--color-prim);
}
.btn.btn--sec > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link):hover {
  background-color: var(--color-prim);
  color: var(--color-bright);
}
body.theme-winter .btn > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link), 
body.theme-winter .wp-block-button > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link),
body.theme-winter .buchen .card .wpbc_container.wpbc_container_booking_form .wpbc_button_light {
  background-color: var(--color-sec);
  border-color: var(--color-sec);
}
body.theme-winter .btn > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link):hover, 
body.theme-winter .wp-block-button > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link):hover,
body.theme-winter .buchen .card .wpbc_container.wpbc_container_booking_form .wpbc_button_light:hover {
  background-color: var(--color-sec-light);
  color: var(--color-sec);
}
body.theme-winter .btn > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link):focus-visible, 
body.theme-winter .wp-block-button > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link):focus-visible,
body.theme-winter .buchen .card .wpbc_container.wpbc_container_booking_form .wpbc_button_light:focus-visible {
  background-color: var(--color-sec-light);
  color: var(--color-sec);
}
body.theme-winter .btn.btn--sec > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link) {
    background-color: var(--color-sec-light);
    border-color: var(--color-sec);
    color: var(--color-sec);
}
body.theme-winter .btn.btn--sec > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link):hover {
  background-color: var(--color-sec);
  color: var(--color-bright);
}
/* button icon with text */
.btn.btn--icon-text > :is(a, a:visited, button, input[type="submit"], input[type="button"], .wp-block-button__link) {
  padding-block: 6px;
}

/* theme toggle button */
.theme-toggle label {
  cursor: pointer;
}
.theme-toggle label span {
  color: var(--color-prim);
  font-size: 10px;
}
.theme-toggle .toggle-btn {
  width: 50px;
  height: 26px;
  margin-inline: 1ch;
  background-color: hsla(from var(--color-bright) h s l / 50%);
  border: var(--w-border) solid var(--color-prim);
  border-radius: 14px;
  outline-width: calc(var(--w-border) * 2);
  outline-style: none;
  outline-offset: calc(var(--w-border) * 2);
  outline-color: var(--color-prim);
  transition: none;

}
.theme-toggle input[type="checkbox"] {
  display: inline;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  appearance: none;
}
.theme-toggle input[type="checkbox"]:focus-visible {
  outline: none;
}
.theme-toggle label:focus-within .toggle-btn {
  outline-style: solid;
}
.theme-toggle .toggle-btn__slider {
  width: 20px;
  height: 20px;
  margin: 2px;
  padding: 2px 0 2px 1px;
  background-color: var(--color-prim-lighter);
  border: var(--w-border) solid var(--color-prim);
  border-radius: 10px;
  transition: all var(--trans-long);
}
.theme-toggle .toggle-btn__slider svg:first-of-type {
  display: block;
}
.theme-toggle .toggle-btn__slider svg:last-of-type {
  display: none;
}
.theme-toggle input[type="checkbox"]:checked + .toggle-btn__slider {
  margin-inline-start: 26px;
  background-color: var(--color-sec-lighter);
  border-color: var(--color-sec);
  color: var(--color-sec);
}
.theme-toggle input[type="checkbox"]:checked + .toggle-btn__slider svg:first-of-type {
  display: none;
}
.theme-toggle input[type="checkbox"]:checked + .toggle-btn__slider svg:last-of-type {
  display: block;
}
.theme-toggle label:hover .toggle-btn__slider {
  background-color: var(--color-prim);
  color: var(--color-bright);
  transition: all var(--trans-short);
}
.theme-toggle label:hover input[type="checkbox"]:checked + .toggle-btn__slider {
  background-color: var(--color-sec);
  color: var(--color-bright);
}
body.theme-winter .theme-toggle .toggle-btn {
  outline-color: var(--color-sec);
}
body.theme-winter .theme-toggle label span {
  color: var(--color-sec);
}
body.theme-winter .theme-toggle label .toggle-btn {
  border-color: var(--color-sec);
}
/* desktop only */
@media screen and (min-width: calc(670px + 1px)) {
  .theme-toggle label span {
    opacity: 0;
    transition: opacity var(--trans-long);
  }
  .header:hover .theme-toggle label span,
  .theme-toggle label:focus-within span {
    opacity: 1;
    transition: opacity var(--trans-short);
  }
}
  
/* Card */
.card {
  background-color: var(--color-bright);
  padding: 4px;
}
body:not(.home) .card {
  margin-block-start: var(--sp-s);
  padding: 1.5rem 2ch;
}
.card figure {
  border-radius: calc(var(--r) / 2);
}
.card--hero {
  max-width: 760px;
  margin-block-start: 2vh;
  margin-inline: auto;
  transform: rotate(-1.2deg);
}
.card--hero figure {
  margin: 0;
  border: 0.5rem solid var(--color-bright);
}
.card--hero figure img {
  border-radius: calc(var(--r) / 4);
}
.card--hero h1 {
  max-width: 18ch;
  margin-block: 1rem;
  line-height: 1.2;
  color: var(--color-bright);
}
/* desktop only */
@container (min-width: calc(670px)) {
  .card--hero h1 {
    position: absolute;
    top: 1.4rem;
    left: 8%;
  }
  .card--hero figure {
    border-width: 0.8rem;
  }
}

/* gallery */
.gallery figure img {
  max-width: 300px;
}
  
/* Slider */
.slide__content {
  padding-block-end: calc(36px * 2);
}
.splide.card {
  padding: 14px;
}
.splide .splide__list figure > img {
  aspect-ratio: 1.2;
}
.splide .splide__track {
  cursor: grab;
}
.splide .splide__arrows {
  position: absolute;
  bottom: calc(36px + var(--sp-xs));
  left: 0;
  width: 120px;
  margin-inline-start: 0.5ch;
}
.splide .splide__arrow {
  width: 36px;
  height: 36px;
  padding: 5px;
  background-color: transparent;
  border: var(--w-border) solid var(--color-prim);
  border-radius: 100%;
  color: var(--color-prim);
  opacity: 1;
}
.splide .splide__arrow svg {
  width: 24px;
  height: 24px;
  fill: transparent;
}
.splide .splide__arrow:hover {
  background-color: var(--color-prim);
  color: var(--color-bright);
}
.splide.is-focus-in .splide__arrow:focus,
.splide .splide__arrow:focus-visible,
.splide.is-focus-in .splide__pagination__page:focus,
.splide__pagination__page:focus-visible {
  background-color: var(--color-prim);
  outline-width: calc(var(--w-border) * 2);
  outline-style: solid;
  outline-offset: calc(var(--w-border) * 2);
  outline-color: var(--color-prim);
  color: var(--color-bright);
  transition: none;
}
.splide .splide__pagination {
  bottom: calc(-1 * var(--sp-m));
  gap: var(--sp-s);
}
.splide .splide__pagination > li {
  margin-block-end: 0;
}
.splide .splide__pagination__page {
  width: var(--fs-base);
  height: var(--fs-base);
  background: var(--color-bright);
  border: var(--w-border) solid var(--color-prim);
  opacity: 1;
}   
.splide .splide__pagination__page.is-active,
.splide .splide__pagination__page:hover {
  background: var(--color-prim);
  transform: none;
}
body.theme-winter .splide .splide__arrow {
  border-color: var(--color-sec);
  color: var(--color-sec);
}
body.theme-winter .splide .splide__arrow:hover {
  background-color: var(--color-sec);
  color: var(--color-bright);
}
body.theme-winter .splide.is-focus-in .splide__arrow:focus,
body.theme-winter .splide .splide__arrow:focus-visible,
body.theme-winter .splide.is-focus-in .splide__pagination__page:focus,
body.theme-winter .splide__pagination__page:focus-visible {
  background-color: var(--color-sec);
  outline-color: var(--color-sec);
}
body.theme-winter .splide .splide__pagination__page {
  border-color: var(--color-sec);
}
body.theme-winter .splide .splide__pagination__page.is-active,
body.theme-winter .splide .splide__pagination__page:hover {
  background: var(--color-sec);
}
/* desktop only */
@media screen and (min-width: calc(900px + 1px)) {
  .slide__img {
    flex-basis: 60%;
  }
  .slide__content {
    flex-basis: 40%;
    align-self: stretch;
    padding-block-start: var(--sp-s);
  }
  .splide .splide__arrows {
    left: calc(60% + var(--sp-s) - calc(36px / 2));
  }
  .splide .splide__pagination {
    bottom: calc(var(--fs-sm) + var(--sp-s));
    left: 0;
    right: auto;
    gap: var(--sp-xs);
    width: 60%;
  }
  .splide .splide__pagination__page {
    width: var(--fs-sm);
    height: var(--fs-sm);
    background: hsla(from var(--color-bright) h s l / 50%);
    border: var(--w-border) solid var(--color-bright);
  }   
  .splide .splide__pagination__page.is-active,
  .splide .splide__pagination__page:hover {
    background: var(--color-bright);
  }
  .splide.is-focus-in .splide__pagination__page:focus,
  .splide__pagination__page:focus-visible {
    background-color: var(--color-bright);
    outline-color: var(--color-bright);
  }
  body.theme-winter .splide .splide__pagination__page {
    border-color: var(--color-bright);
  }   
  body.theme-winter .splide .splide__pagination__page.is-active,
  body.theme-winter .splide .splide__pagination__page:hover {
    background: var(--color-bright);
  }
}
/* mobile only */
@media screen and (max-width: 900px) {
  .slide.flex.flex--pos-y-start {
    flex-direction: column;
    justify-content: flex-start;
  }
  .splide .splide__list {
    min-height: 35em;
  }
  .splide .splide__list figure > img {
    aspect-ratio: 1.5;
  }
}

/* Accordion */
.accordion {
  width: 100%;
  height: 536px;
  border: 4px solid var(--color-bright);
}
.accordion__nav {
  position: absolute;
  top: var(--sp-s);
  right: var(--sp-s);
  z-index: 30;
  width: fit-content;
  height: auto;
  border-color: var(--color-prim-light);
}
.accordion__nav ul {
  padding: 0 12px;
  list-style: none;
}
.accordion__nav li {
  overflow-x: hidden;
}
.accordion__nav li button {
  background-repeat: no-repeat;
  font-weight: normal;
  cursor: pointer;
}
.accordion__nav li button span.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
}
.accordion__nav li button span.icon.active {
  display: none;
}
.accordion__nav li button span.text {
  display: inline-block;
  width: 0;
  padding-inline-start: 0;
  font-size: 0;
  transition: all var(--trans-short) 0.5s;
}
.accordion__nav li button:hover,
.accordion__nav li button:focus,
.accordion__nav li button[aria-expanded="true"] {
  color: var(--color-prim);
}
.accordion__nav li:focus-within {
  outline-width: calc(var(--w-border) * 2);
  outline-style: solid;
  outline-offset: calc(var(--w-border) * 2);
  outline-color: var(--color-prim);
}
.accordion__nav li button:hover span.default,
.accordion__nav li button:hover span.active.sec,
.accordion__nav li button[aria-expanded="true"] span.default,
.accordion__nav li button[aria-expanded="true"] span.active.sec {
  display: none;
}
.accordion__nav li button:hover span.active.prim,
.accordion__nav li button[aria-expanded="true"] span.active.prim {
  display: inline-block;
}
.accordion__nav li button:hover li button[aria-expanded="true"] {
  font-weight: bold;
}
.accordion__nav:hover,
.accordion__nav:focus,
.accordion__nav li button:focus {
  width: 238px;
}
.accordion__nav:hover li button span.text,
.accordion__nav:focus li button span.text,
.accordion__nav:focus-within li button span.text {
  width: 188px;
  padding-inline-start: 6px;
  font-size: inherit;
  transition: all var(--trans-short);
}
body.theme-winter .accordion__nav {
  border-color: var(--color-sec-light);
}
body.theme-winter .accordion__nav li button:hover,
body.theme-winter .accordion__nav li button[aria-expanded="true"] {
  color: var(--color-sec);
}
body.theme-winter .accordion__nav li:focus-within {
  outline-color: var(--color-sec);
}
body.theme-winter .accordion__nav li button:hover span.default,
body.theme-winter .accordion__nav li button:hover span.active.prim,
body.theme-winter .accordion__nav li button[aria-expanded="true"] span.default,
body.theme-winter .accordion__nav li button[aria-expanded="true"] span.active.prim {
  display: none;
}
body.theme-winter .accordion__nav li button:hover span.active.sec,
body.theme-winter .accordion__nav li button[aria-expanded="true"] span.active.sec {
  display: inline-block;
}
.accordion__wrapper {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: calc(var(--r) * 1.5);
}
.accordion__content {
  width: calc(var(--w-content) - 2 * 4px);
  height: calc(536px - 2 * 4px);
}
.accordion__content figure > img {
  max-height: calc(536px - 2 * 4px);
  border-radius: calc(var(--r) + (var(--r) / 2));
}
/* desktop only */
@media screen and (min-width: 1110px) {
  .accordion__border,
  .accordion__scrollbar {
    display: none;
  }
}
/* mobile only */
@media screen and (max-width: 1109px) {
  .accordion__border {
    position: absolute;
    inset: -4px;
    z-index: 5;
    box-sizing: content-box;
    border: 4px solid var(--color-bright);
    border-radius: calc(2 * var(--r));
    box-shadow: 10px 0 20px inset hsla(var(--color-dark-hue) var(--color-dark-sat) 20% / 0.5);
    clip-path: polygon(
      30px 0,
      100% 0,
      100% 100%,
      0 100%,
      0 0,
      30px 0,
      30px calc(100% - 20px),
      calc(100% - 10px) calc(100% - 20px),
      calc(100% - 10px) 20px,
      30px 20px
    );
  }
  .accordion__scrollbar {
    position: absolute;
    bottom: 0.5rem;
    left: 1rem;
    z-index: 10;
    width: calc(100% - 2rem);
  }
  .accordion__scrollbar label {
    width: fit-content;
    margin-block-end: 8px;
    padding-inline: 6px;
  }
  .accordion__scrollbar label:not(:has(+ input[aria-valuenow="0"])) {
    display: none;
  }
  .accordion__scrollbar input[type="range"] {
    outline-offset: 8px;
    cursor: grab;
    background-color: transparent;
  }
  .accordion__scrollbar input[type="range"]::-moz-range-thumb {
    background: var(--color-prim-lighter) url(../svg/24px/tabler_arrows-horizontal-prim.svg) no-repeat center center;
    width: 36px;
    height: 28px;
    border: 2px solid var(--color-prim);
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--color-dark);
    box-sizing: border-box;
    cursor: grab;
  }
  .accordion__scrollbar input[type="range"]::-moz-range-track {
    background: hsla(var(--color-prim-hue) var(--color-prim-sat) 85% / 0.7);
    height: 8px;
    border: 1px solid var(--color-prim);
    border-radius: 5px;
  }
  .accordion__scrollbar input[type="range"]::-webkit-slider-container {
    background: hsla(var(--color-prim-hue) var(--color-prim-sat) 85% / 0.7);
    height: 8px;
    border: 1px solid var(--color-prim);
    border-radius: 5px;
  }
}

/* Tooltip */
.tooltip {
  --arrow-w: 16px;
  --arrow-h: 10px;
  --arrow-pos-x: 8px;
  --arrow-pos-y: 0;
  position: absolute;
  right: 50px;
  top: 50px;
  width: fit-content;
  height: auto;
  cursor: pointer;
}
.tooltip .tooltip__content {
  background-repeat: no-repeat;
  background-position: var(--sp-s) center;
  border: var(--w-border) solid var(--color-prim-light);
}
.tooltip .tooltip__content p {
  margin: var(--sp-xs) var(--sp-s) var(--sp-xs) calc((2 * var(--sp-s)) + 24px);
  font-size: var(--fs-sm);
}
.tooltip .tooltip__arrow {
  position: absolute;
  width: var(--arrow-w);
  height: var(--arrow-h);
  background-color: var(--color-prim-light);
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 0% 0%);
}
.tooltip .tooltip__arrow.center-left {
  --arrow-pos-x: calc(-1 * (var(--arrow-h) + 2px));
}
.tooltip:hover .tooltip__content {
  border-color: var(--color-prim);
}
.tooltip:hover .tooltip__arrow {
  background-color: var(--color-prim);
}
body.theme-winter .tooltip__arrow {
  background-color: var(--color-sec-light);
}
body.theme-winter .tooltip:hover .tooltip__content {
  border-color: var(--color-prim);
}
body.theme-winter .tooltip:hover .tooltip__arrow {
  background-color: var(--color-sec);
}

/* Booking Form */
.buchen .card .wpbc_container_booking_form {
  margin-top: 0;
  padding: 14px;
}
.buchen .card .booking_form_div hr {
  display: none;
}
@supports not (rgb(from var(--wpbc_cal-selected-day-color) r g b / max(var(--wpbc_cal-day-bg-color-opacity), var(--wpbc_cal-selected-day-bg-color-opacity)))) {
  .buchen .card .datepick-inline div.datepick-one-month .datepick td.datepick-current-day .wpbc-cell-box {
    background-color: #7aa0d3;
  }
}
.buchen .card .wpbc_container.wpbc_container_booking_form .wpbc_button_light {
  margin-bottom: 0;
}
.buchen .card .wpbc_container_booking_form .wpbc__field:not(.wpbc__cal) {
  margin: 0;
}
.buchen .card .wpbc_container.wpbc_container_booking_form .wpbc_button_light:focus-visible {
  outline-width: calc(var(--w-border) * 2);
  outline-style: solid;
  outline-offset: calc(var(--w-border) * 2);
  outline-color: var(--color-prim);
  transition: none;
}
.buchen .card .wpbc_booking_form_simple .wpbc_wizard_step2 > .wpbc__row {
  margin-block-start: var(--sp-m);
}
.buchen .card .wpbc_booking_form_simple .wpbc__form__div .wpbc__row:not(.wpbc_r_calendar) .wpbc__field:first-of-type > :where(.wpbc_button_light.wpbc_wizard_step_button.wpbc_wizard_step_1) {
  background-color: var(--color-prim-light);
  color: var(--color-prim);
}
.buchen .card .wpbc_container_booking_form .wpbc__field label {
  font-size: var(--fs-sm);
  font-weight: normal;
}
.buchen .card .wpbc_container.wpbc_form input,
.buchen .card .wpbc_container.wpbc_form textarea {
  margin-block-end: var(--sp-s);
  padding: 9px 12px;
  border: var(--w-border) solid var(--color-dark);
  border-radius: var(--r);
  font-family: 'Noto Serif', serif;
  font-size: var(--fs-sm);
}
.buchen .card .wpbc_container.wpbc_form input:hover,
.buchen .card .wpbc_container.wpbc_form textarea:hover {
  border-color: var(--color-prim);
}
.buchen .card .wpbc_container.wpbc_form input:focus-visible,
.buchen .card .wpbc_container.wpbc_form textarea:focus-visible {
  border-color: var(--color-prim);
  outline-width: calc(var(--w-border) * 2);
  outline-style: solid;
  outline-offset: 0;
  outline-color: var(--color-prim);
  transition: none;    
}
.buchen .card .wpbc_container.wpbc_form input:focus,
.buchen .card .wpbc_container.wpbc_form textarea:focus {
  box-shadow: none;
}
.buchen .card .wpbc_after_booking_thank_you_section .wpbc_ty__message {
  padding-inline: 10px;
}
.buchen .card .wpbc_after_booking_thank_you_section .wpbc_ty__message h3 {
  margin-block-end: var(--sp-s);
}
.buchen .card .wpbc_after_booking_thank_you_section .wpbc_ty__container {
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: var(--fs-base);
}
      
.buchen .card .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__header {
  margin-left: 0;
  padding-inline: 0;
  border: none;
}
.buchen .card .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text {
  border: none;
}
.buchen .card .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__section_header {
  margin-bottom: 0;
}

body.theme-winter .buchen .card .wpbc_container.wpbc_container_booking_form .wpbc_button_light:focus-visible {
  outline-color: var(--color-sec);
}
body.theme-winter .buchen .card .wpbc_booking_form_simple .wpbc__form__div .wpbc__row:not(.wpbc_r_calendar) .wpbc__field:first-of-type > :where(.wpbc_button_light.wpbc_wizard_step_button.wpbc_wizard_step_1) {
  background-color: var(--color-sec-light);
  color: var(--color-sec);
}
body.theme-winter .buchen .card .wpbc_container.wpbc_form input:hover,
body.theme-winter .buchen .card .wpbc_container.wpbc_form textarea:hover {
  border-color: var(--color-sec);
}
body.theme-winter .buchen .card .wpbc_container.wpbc_form input:focus-visible,
body.theme-winter .buchen .card .wpbc_container.wpbc_form textarea:focus-visible {
  border-color: var(--color-sec);
  outline-color: var(--color-sec);
}
/* mobile only */
@media (max-width: 782px) {
  .buchen .card div.bk_calendar_frame:not(.cal_month_num_1) {
    padding-inline: 4vw;
  }
}
/* ---------------------------------------------------------
 * Layout
 * ---------------------------------------------------------
 */
.wrapper {
  width: 100%;
  height: 100vh;
}
.content {
  max-width: var(--w-content);
  width: 94%;
  margin: 0 auto;
}
.content--text {
  max-width: calc(var(--w-content) * 0.5);
  margin-inline: auto;
}
.content.content--narrow {
  max-width: var(--w-content-nar);
}

.width-full {
  width: 100%;
}

.pos-rel {
  position: relative;
}

.sp-y-s {
  margin-block-end: var(--sp-s);
}
.sp-y-m {
  margin-block-end: var(--sp-m);
}
.sp-y-l {
  margin-block-end: var(--sp-l);
}
.sp-y-xl {
  margin-block-end: var(--sp-xl);
}

@media screen and (max-width: calc(730px + 15px)) {
  .sp-y-2xl {
    margin-block-end: var(--sp-xl);
  }
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex.flex--wrap {
  flex-wrap: wrap;
}
.flex.flex--gap-s {
  gap: var(--sp-s);
}
.flex.flex--gap-m {
  gap: var(--sp-m);
}
.flex.flex--pos-x-start {
  justify-content: flex-start;
}
.flex.flex--pos-x-center {
  justify-content: center;
}
.flex.flex--pos-y-start {
  align-items: flex-start;
}

.sr-only {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
}
.mobile-only {
  display: none;
}
.desktop-only {
  display: none;
}

/* desktop only */
@media screen and (min-width: calc(670px + 1px)) {
  .desktop-only {
    display: inherit;
  }
}

/* mobile only */
@media screen and (max-width: calc(670px)) {
  .mobile-only {
    display: inherit;
  }
}

/* Header */
.header {
  position: fixed;
  top: 20px;
  right: 0;
  left: 0;
  z-index: var(--z-header);
  width: 100%;
  max-width: 992px;
  height: auto;
  margin-inline: auto;
  padding: 8px 30px 8px 10px;
  border-color: var(--color-prim-light);
}
.btn--menu button > div {
  cursor: pointer;
}
.mainnav > ul {
  gap: 2vw;
  padding-inline-start: 0;
}
.mainnav > ul > li > a {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  text-underline-offset: 0.2rem;
}
.mainnav > ul > li > a:hover {
  text-decoration: underline;
  color: var(--color-prim);
}
body.theme-winter .header {
  border-color: var(--color-sec-light);
}
body.theme-winter .header:not(:hover).gradient {
  background: linear-gradient(90deg, hsla(var(--color-sec-hue), var(--color-sec-sat), 98%, 0.5), hsla(var(--color-sec-hue), var(--color-sec-sat), 95%, 0.5));
}
/* desktop only */
@media screen and (min-width: calc(670px + 1px)) {
  .header:not(:hover).gradient {
    --gradient-opacity: 0.5;
  }
}
/* mobile only */
@media screen and (max-width: calc(670px)) {
  .header {
    top: 16px;
    right: 5%;
    left: auto;
    width: fit-content;
    padding: 6px 8px;
  }
  .header button {
    display: inline-block ;
    padding: 6px;
    background-color: transparent;
    border: none;
    color: var(--color-dark);
  }
  .header[data-state="closed"] .btn--menu button div:first-of-type {
    display: block;
  }
  .header[data-state="closed"] .btn--menu button div:last-of-type {
    display: none;
  }
  .header[data-state="opened"] .btn--menu button div:first-of-type {
    display: none;
  }
  .header[data-state="opened"] .btn--menu button div:last-of-type {
    display: block;
  }
  .mainnav {
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: 6px 8px 6px 8px;
    overflow: hidden;
    transition: all var(--trans-short);
  }
  .action-button {
    order: 3;
  }
  .mainnav > ul {
    flex-direction: column;
  }
  .header[data-state="closed"] .mainnav {
    width: 0;
    height: 0;
    padding-block: 0;
    visibility: hidden;
    transform: translateX(100vw);
    transition: all var(--trans-short);
  }
}

/* Footer */
.footer {
  padding-block: 20px;
  background-color: var(--color-prim);
  color: var(--color-bright);
}
.footer a:focus-visible {
  outline-color: var(--color-bright);
}
.footer__privacy > ul {
  padding-inline-start: 0;
}
body.theme-winter .footer {
  background-color: var(--color-sec);
}

/* main */
.main {
  container-type: inline-size;
}
.main section {
  scroll-margin-block-start: calc(var(--h-header) + var(--sp-l));
}
/* desktop only */
@media screen and (min-width: calc(670px + 1px)) {
  .main {
    margin-block-start: calc(var(--h-header) +  var(--sp-l));
  }
}