/*-----------------------------------------------------------*/
/* Pura Vida CSS                                                  */
/*-----------------------------------------------------------*/

body {
  -webkit-hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-lines: 2;

  -moz-hyphenate-limit-chars: 6 3 3;

  -ms-hyphenate-limit-lines: 2;
  -ms-hyphenate-limit-chars: 6 3 3;

  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

svg {
  display: block;
}

/* Utility Classes */

[lang]:not([lang="de"]) [cb-lang-element="de"],
[lang]:not([lang="fr"]) [cb-lang-element="fr"],
[lang]:not([lang="it"]) [cb-lang-element="it"],
[lang]:not([lang="en"]) [cb-lang-element="en"] {
  display: none;
}

.utl__hidden {
  display: none;
}

.utl__inline {
  display: inline;
}

.utl__hyphens {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* Hide Scrollbar */

[cb-scrollbar-hidden="true"]::-webkit-scrollbar {
  display: none;
}

[cb-scrollbar-hidden="true"]::-webkit-scrollbar {
  display: none;
}

body.utl-locked {
  overflow: hidden !important;
}

/* remove webkit styles from Form Fields */

input,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Different CSS for touch devices */

@media (hover: hover) and (pointer: fine) {}

@media (hover: none) and (pointer: coarse) {}

/* Rich Text */

.utl__rich-text ol li {
  counter-increment: step-counter;
}

.utl__rich-text ol li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  width: 26px;
  height: 26px;
  font-size: 14px;
  color: #111111;
  font-weight: 500;
  background-color: #f3f4f5;
  border-radius: 99px;
  text-align: center;
  line-height: 28px;
}

/* Remove top padding and top margin on the first elements of the default rich text fields */

.utl__rich-text>*:first-child {
  margin-top: 0;
  padding-top: 0;
}

/* Colored selection */

/*
::selection {
  background: rgb(67, 83, 255);
  color: white;
}
::-moz-selection {
  background: rgb(67, 83, 255);
  color: white;
}
*/

/* Hides Headings and Links in the Header Symbols when they're empty */

.utl-header__text-wrapper .wf-empty,
.utl-header__text-wrapper *:empty,
.utl-header__wrapper .utl__button[href="#"] {
  display: none;
}

/* hides the last paragraph in rich text elements when they're empty */

.w-richtext p:last-child:empty {
  display: none;
}

/* hides the progressbar from Weglot */

body .wg-progress {
  background-color: transparent;
  box-shadow: none;
  display: none;
}

body .wg-progress-bar {
  background-color: transparent;
  box-shadow: none;
  display: none;
}

/*-----------------------------------------------------------*/
/* Templates                                                 */
/*-----------------------------------------------------------*/

/* Modal */

.utl-modal.hidden,
.utl-modal__background {
  pointer-events: none;
}

.utl-modal.hidden {
  z-index: 999990;
}

.utl-modal__background * {
  pointer-events: auto;
}

.utl-modal {
  overflow-y: scroll;
}

.utl-modal.hidden .utl-modal__block {
  -webkit-transform: translate(0, 20px);
  -ms-transform: translate(0, 20px);
  transform: translate(0, 20px);
  opacity: 0;
}

.utl-modal.hidden .utl-modal__background {
  opacity: 0;
}

/*-----------------------------------------------------------*/
/* Custom CSS                                                */
/*-----------------------------------------------------------*/

@media (pointer: fine) and (hover: hover) {

  .utl__button:hover {}

  .utl__button:hover .utl__button__text {
    opacity: 0;
    scale: 0.5;
  }

  .utl__button:hover .utl__button__icon-wrapper {
    opacity: 1;
    transform: translateX(4px);
  }

  .utl__button.is-external:hover .utl__button__icon-embed {
    transform: rotate(-30deg) translate(0px, -4px);
  }

  .swiper-button-prev:hover {
    transform: translateX(-4px);
    opacity: 0.8;
    ;
  }

  .swiper-button-next:hover {
    transform: translateX(4px);
    opacity: 0.8;
    ;
  }

  .kls__scroll__item:hover .utl__kls__point {
    width: 30px;
  }
}

/*-----------------------------------------------------------*/
/* Stories Hover                                              */
/*-----------------------------------------------------------*/
@media (pointer: fine) and (hover: hover) {

  .h__sto__coll__item:hover,
  .sto__coll__item:hover {

    .utl__sto__img {
      scale: 1.075;
    }

    .utl__sto__title {
      transform: translateX(0px);
    }

    .utl__sto__subline {
      transform: translateX(0px);
    }

    .utl__sto__img-wrapper {
      scale: 1;
    }

  }
}

/*
.h__sto__coll__wrapper:hover .h__sto__coll__item,
.sto__coll__wrapper:hover .sto__coll__item {
  opacity: 1;
  transition: opacity 1.75s ease;
  color: #afafaf;
}

.h__sto__coll__wrapper .h__sto__coll__item:hover,
.sto__coll__wrapper .sto__coll__item:hover {
  opacity: 1;
  color: black;
}

.h__sto__coll__wrapper:hover .h__sto__coll__item,
.sto__coll__wrapper:hover .sto__coll__item {
  scale: 1;
  transition: all 0.5s ease;
}

.h__sto__coll__wrapper .h__sto__coll__item:hover,
.sto__coll__wrapper:hover .sto__coll__item {
  scale: 1;
  transition: all 0.5s ease;

}
*/

.utl__button__text-wrapper:not(:first-child) {
  position: absolute;
  top: 100%;
}

.utl__button:hover .utl__button__text-wrapper {
  transform: translateY(-100%);
}

/*-----------------------------------------------------------*/
/* Footer Hover                                              */
/*-----------------------------------------------------------*/

.foo__rows__link {
  transform: translateX(0px);
}

@media (pointer: fine) and (hover: hover) {
  .foo__rows__link {
    transform: translateX(-12px);
  }
}

.foo__arrow-embed {
  opacity: 0
}

@media (pointer: coarse) and (hover: none) {
  .foo__arrow-embed {
    opacity: 1;
  }
}

@media (pointer: fine) and (hover: hover) {

  .foo__rows__link__wrapper:hover .foo__rows__link {
    transform: translateX(12px);
  }

  .foo__rows__link__wrapper:hover .foo__arrow-embed {
    opacity: 1
  }
}

/*-----------------------------------------------------------*/
/* Nav Hover                                              */
/*-----------------------------------------------------------*/
@media (pointer: fine) and (hover: hover) {
  .utl__link {
    transform: translateX(-12px);
  }
}

@media (pointer: fine) and (hover: hover) {
  .nav__link {
    transform: translateX(-12px);
  }
}

@media (pointer: fine) and (hover: hover) {
  .link__arrow-embed {
    opacity: 0
  }
}

@media (pointer: fine) and (hover: hover) {

  .utl__link__wrapper:hover .utl__link {
    transform: translateX(12px);
  }

  .utl__link__wrapper:hover .link__arrow-embed {
    opacity: 1
  }

  .nav__link__wrapper:hover .nav__link {
    transform: translateX(12px);
  }

  .nav__link__wrapper:hover .link__arrow-embed {
    opacity: 1
  }

  .nav__burger:hover {
    background-color: #fffb7f;
  }

  .nav__burger:hover .nav__burger__wrapper {
    transform: rotate(-5deg)
  }

  .utl__bc__link:hover {
    font-weight: 700;
  }
}

body.nav-open .nav__wrapper {
  height: 100vh;
  opacity: 1;
  transform: translateY(0%);
}

/* Burger Mobile                                             */

body.nav-open .nav__burger__line.top {
  transform: translate(0px, 6px) rotate(-40deg);
}

body.nav-open .nav__burger__line.mid {
  width: 0px;
}

body.nav-open .nav__burger__line.bottom {
  transform: translate(0px, -6px) rotate(40deg);
}

/* Burger larger Screens                                             */

@media screen and (min-width: 768px) {

  body.nav-open .nav__burger__line.top {
    transform: translate(0px, 10px) rotate(-40deg);
  }

  body.nav-open .nav__burger__line.mid {
    width: 0px;
  }

  body.nav-open .nav__burger__line.bottom {
    transform: translate(0px, -10px) rotate(40deg);
  }

}

/*-----------------------------------------------------------*/
/* Pop-Ups                                              */
/*-----------------------------------------------------------*/

@media (pointer: fine) and (hover: hover) {

  .contact__button:hover .utl__button__text {
    opacity: 0;
    scale: 0.5;
  }

  .contact__button:hover .utl__button__icon-wrapper {
    opacity: 1;
    transform: translateX(4px);
  }

  .contact__close:hover,
  .sf__close:hover,
  .st__close:hover {
    background-color: #fffb7f;
  }

  .contact__close:hover .close__button__wrapper,
  .st__close:hover .close__button__wrapper,
  .sf__close:hover .close__button__wrapper {
    transform: rotate(-5deg)
  }
}

body.contact-open .contact__wrapper {
  transform: translateY(0%);
}

body.sf-open .sf__wrapper {
  transform: translateY(0%);

}

body.st-open .st__wrapper {
  transform: translateY(0%);

}

body.contact-open,
body.sf-open,
body.st-open,
body.nav-open {
  overflow: hidden;
}

body {
  overscroll-behavior: none;
}

/*-----------------------------------------------------------*/
/* Dropdowns                                                 */
/*-----------------------------------------------------------*/

[cb-dd-element=list] {
  height: 0px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(0px);
  transition: height 0.3s ease, opacity 0.3s ease, transform 0.6s ease;

}

[cb-dd-element=item].dd-open [cb-dd-element=list] {
  height: var(--height);
  transform: translateY(0px);
  opacity: 1;
}

@media (pointer: fine) and (hover: hover) {

  .utl__dd__item:hover .utl__dd__heading {
    transform: translateX(40px);
  }
}

.utl__dd__item.dd-open .utl__dd__icon {
  transform: rotate(90deg);
}

/*
.faq__coll__item:nth-child(4n + 1) {
  background-color: #fe5543;

}

.faq__coll__item:nth-child(4n + 2) {
  background-color: #4872ff;
  color: #f2f1ec;
}

.faq__coll__item:nth-child(4n + 3) {
  background-color: #bbe2e9;
}

.faq__coll__item:nth-child(4n + 4) {
  background-color: #fffb7f;
}

*/

/*-----------------------------------------------------------*/
/* Cursor and Hovers                                                 */
/*-----------------------------------------------------------*/

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 100%;
  background: transparent;
  /* test */
  pointer-events: none;
  /* so it doesn’t block clicks */
  transform: translate(0%, 0%);
  z-index: 9999;
}

body:has(.h__pv__cta-element:hover) .cursor_circle {
  width: 150px;
  height: 150px;
  border-color: yellow;
  color: yellow;
  background-color: transparent;
}

body:has(.h__pv__cta-element:hover) .cursor__text.mehr {
  opacity: 1;
}

body:has(.h__link-block__wrapper:hover) .cursor__text.mehr {
  opacity: 1;
}

body:has(.h__link-block__wrapper.is-sf:hover, .h__link-block__wrapper.is-st:hover) .cursor__text.mehr {
  opacity: 0;
}

body:has(.h__link-block__wrapper.is-sf:hover, .h__link-block__wrapper.is-st:hover) .cursor__text.buchen {
  opacity: 1;
}

body:has(.h__link-block__wrapper:hover) .cursor_circle {
  width: 150px;
  height: 150px;
  border-color: yellow;
  color: yellow;
  background-color: transparent;
}

.h__pv__cta-element:hover {
  background-color: #fe5543;
}

.h__pv__cta-element.is-2:hover {
  background-color: #bbe2e9;
}

.h__pv__cta-element.is-3:hover {
  background-color: #4872ff;
  color: #f2f1ec;
}

@media (hover: none) and (pointer: coarse) {
  .cursor {
    display: none;
  }
}

* {
  cursor: none;
}

/*-----------------------------------------------------------*/
/* Team Arrangement                                                */
/*-----------------------------------------------------------*/
@media screen and (min-width: 768px) {

  .tem__coll__item {
    position: relative;
  }

  /* Applies to the 1st and 4th item in every cycle of 6 */
  .tem__coll__item:nth-child(6n + 1),
  .tem__coll__item:nth-child(6n + 4) {
    left: 0%;
  }

  /* Applies to the 2nd and 5th item in every cycle of 6 */
  .tem__coll__item:nth-child(6n + 2),
  .tem__coll__item:nth-child(6n + 5) {
    left: 10%;
  }

  /* Applies to the 3rd and 6th item in every cycle of 6 */
  .tem__coll__item:nth-child(6n + 3),
  .tem__coll__item:nth-child(6n + 6) {
    left: 20%;
  }
}

/*-----------------------------------------------------------*/
/* Logo Animation                                            */
/*-----------------------------------------------------------*/
@media (min-width: 479px) {
  .utl__logo__wrapper {

    transition: all 1.5s ease-in-out;
  }

  .body-ready .utl__logo__wrapper.top-left {
    top: 40px;
    left: 40px;
    transform: translate(0, 0);
  }

  .body-ready .utl__logo__wrapper.bottom-right {
    top: auto;
    left: auto;
    bottom: 20px;
    right: 40px;
    transform: translate(0, 0);
  }
}

@media (max-width: 479px) {
  .utl__logo__wrapper {

    transition: all 1.5s ease-in-out;
  }

  .body-ready .utl__logo__wrapper.top-left {
    top: 20px;
    left: 20px;
    transform: translate(0, 0);
    /* Reset the transform */
  }

  .body-ready .utl__logo__wrapper.bottom-right {
    top: auto;
    left: auto;
    bottom: 20px;
    right: 20px;
    transform: translate(0, 0);
  }
}