body[data-preload]
  {
    opacity: 0;
  }

  :root {
    --cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --duration-default: 0.735s;
    --duration-l: 1.2s;
    --cubic-smooth: ease-out;
    --duration-long: 1s;
    --animation-default: var(--duration-default) var(--cubic-default);
    --gap: 2em;
    --section-padding: calc(3.5em + (var(--gap) * 2));
    --container-padding: 4em;
    --header-height: calc(1.5em + (var(--gap) * 2));
    --footer-height: calc(2.785em + (var(--gap) * 2));

    --size-unit: 16;
    --size-container-ideal: 1728;
    --size-container-min: 992px;
    --size-container-max: 1920px;
    --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
    --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

    --header-height: 4.6em;
  }

  /* Tablet */
  @media screen and (max-width: 991px) {
    :root {
      --container-padding: 1.5em;
      --header-height: 5em;
      --size-container-ideal: 900;
      /* screen-size in design - no px */
      --size-container-min: 768px;
      --size-container-max: 991px;
    }
  }

  /* Mobile Landscape */
  @media screen and (max-width: 767px) {
    :root {
      --container-padding: 1.5em;
      --section-padding: calc(var(--gap) * 2);
      --header-height: 4em;
      --size-container-ideal: 600;
      /* screen-size in design - no px */
      --size-container-min: 480px;
      --size-container-max: 767px;
    }
  }

  /* Mobile Portrait */
  @media screen and (max-width: 479px) {
    :root {
      --header-height: 3.5em;
      --size-container-ideal: 395;
      /* screen-size in design - no px */
      --size-container-min: 280px;
      --size-container-max: 479px;
    }
  }


  /* ------------------------- Hide Scrollbar -------------------------------------------------- */

  /* body ::-webkit-scrollbar,
  body::-webkit-scrollbar {
  display: none;
  } */

  /* Chrome, Safari, Opera */
  /* body {
  -ms-overflow-style: none;
  } */

  /* IE & Edge */
  /* html {
  scrollbar-width: none;
  } */

  /* Firefox */

  /* ------------------------- Reset -------------------------------------------------- */




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

  html {
    /*scroll-behavior: initial;*/
  }

  .w-input,
  .w-select {


    border: unset;

  }

  html,
  body {
    -webkit-font-smoothing: antialiased;
  }

  svg {
    max-width: none;
    height: auto;
    box-sizing: border-box;
    vertical-align: middle;
  }

  a {
    color: inherit;
  }

  button, select,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    -webkit-appearance: none; /* Remove default Safari/Chrome styling */
    -moz-appearance: none;    /* Remove default Firefox styling */
    appearance: none;

    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    cursor: pointer;
    text-align: inherit;
    text-decoration: none;
    outline: none;            /* Remove focus outline. Consider reintroducing with custom focus styles for accessibility. */
  }



  /* Selection */
::selection {
  background-color: var(--color-accent);

  text-shadow: none;
  }

  ::-moz-selection {
  background-color: var(--color-accent);

  text-shadow: none;
  } 

  /* ------------------------- Button Primary -------------------------------------------------- */


  .btn001 .btn001__circle-container .btn001__circle-bg {
    transition: scale var(--duration-default) var(--cubic-default);
  }

  .btn001 .btn001__circle-container .btn001__circle-bg .btn001__arrow {
    transform: translate(-4.375em);
    transition: transform var(--duration-default) var(--cubic-default);
  }


  .btn001 .btn001__text-wrapper {
    transition: transform var(--duration-default) var(--cubic-default);
  }

  .btn001 .btn001__text-wrapper:after {
    content: "";
    position: absolute;
    width: 100%;
    height: .0625rem;
    background-color: var(--color-dark);
    bottom: -.25em;
    left: 0;
    transition: scale var(--duration-default) var(--cubic-default);
    transform-origin: right
  }

  .btn001.is--light .btn001__text-wrapper:after {

    background-color: var(--color-light);

  }

  .btn001:hover .btn001__circle-bg,
  .angebote-card:hover .btn001 .btn001__circle-bg,
  .res-card:hover .btn001 .btn001__circle-bg{
    scale: 1;
  }

  /* arrow translates to 0 */
  .btn001:hover .btn001__circle-bg .btn001__arrow,
  .angebote-card:hover .btn001 .btn001__circle-bg .btn001__arrow,
  .res-card:hover .btn001 .btn001__circle-bg .btn001__arrow {
    transform: translate(0);
  }

  /* text-wrapper translates */
  .btn001:hover .btn001__text-wrapper,
  .angebote-card:hover .btn001 .btn001__text-wrapper,
  .res-card:hover .btn001 .btn001__text-wrapper
  {
    transform: translate(.75em);
  }

  /* text-wrapper after scales */
  .btn001:hover .btn001__text-wrapper:after,
  .angebote-card:hover .btn001 .btn001__text-wrapper:after,
  .res-card:hover .btn001 .btn001__text-wrapper:after {
    scale: 0 1;
  }

  /* ------------------------- Links Navbar -------------------------------------------------- */

  a.btn-nav:after {
    content: "";
    position: absolute;
    height: .375em;
    width: .375em;
    background-color: var(--color-dark);
    top: 50%;
    transform: translateY(1.5em);
    opacity: 0;
    border-radius: 50%;
    transition: all var(--duration-default) var(--cubic-default)
  }

  a.btn-nav .btn-nav__text {
    text-shadow: 0px 1.1em 0px var(--color-dark);
    transition: transform 0s var(--cubic-default)
  }

  a.btn-nav:hover:after {
    transform: translateY(1em);
    opacity: 1
  }

  a.btn-nav:hover .btn-nav__text {
    transform: translateY(-1.1em);
    text-shadow: 0px 1.1em 0px var(--color-dark);
    transition: transform var(--duration-default) var(--cubic-default);
  }

  a.btn-nav.w--current:after {
    transform: translateY(1em);
    opacity: 1;
  }

  /* ------------------------- ANGEBOTE CARDS -------------------------------------------------- */

  .angebote-card img{
    transition: all var(--duration-default) var(--ease-out-quad);
    scale: 1.05;
  }
  .angebote-card:hover img{
    opacity: .8;
    scale: 1;
  }




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

  .underline-link::before,
  .underline-link.is--alt::before,
  .underline-link.is--alt::after{
    content: "";
    position: absolute;
    bottom: -0.2em;
    left: 0;
    width: 100%;
    height: min(0.0625em, 1px);
    background-color: #131313;
    transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
  }

  .underline-link.is--alt.is--big::before,
  .underline-link.is--alt.is--big::after{

    bottom: -.8em;

  }

  .underline-link:hover::before, .res-card:hover  .underline-link::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }

  /* Alt */
  .underline-link.is--alt::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }

  .underline-link.is--alt:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  .underline-link.is--alt::after {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  .underline-link.is--alt:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }


  /* ------------------------- mobile wrapper -------------------------------------------------- */

  .mobile-wrapper {
    transition: clip-path var(--duration-l) var(--cubic-default)
  }

  .mobile-wrapper .mobile-nav__text {
    transform: translateY(100%);
    transition: transform var(--duration-l) var(--cubic-default)
  }

  .mobile-wrapper .text-uppercase-small.is--navigation{
    transform: translateY(100%);
    transition: transform var(--duration-l) var(--cubic-default)
  }

  .mobile-wrapper[data-nav=open] {
    clip-path: inset(0 0 0 0);
    pointer-events: all
  }
  .mobile-wrapper[data-nav=open] .text-uppercase-small.is--navigation {
    transition-delay: .03s
  }

  .mobile-wrapper[data-nav=open] .mobile-nav__link:nth-child(1) .mobile-nav__text {
    transition-delay: .03s
  }

  .mobile-wrapper[data-nav=open] .mobile-nav__link:nth-child(2) .mobile-nav__text {
    transition-delay: .06s
  }

  .mobile-wrapper[data-nav=open] .mobile-nav__link:nth-child(3) .mobile-nav__text {
    transition-delay: .09s
  }

  .mobile-wrapper[data-nav=open] .mobile-nav__link:nth-child(4) .mobile-nav__text {
    transition-delay: .12s
  }

  .mobile-wrapper[data-nav=open] .mobile-nav__link:nth-child(5) .mobile-nav__text {
    transition-delay: .15s
  }

  .mobile-wrapper[data-nav=open] .mobile-nav__link:nth-child(6) .mobile-nav__text {
    transition-delay: .18s
  }

  .mobile-wrapper[data-nav=open] .mobile-nav__link:nth-child(7) .mobile-nav__text {
    transition-delay: .21s
  }

  .mobile-wrapper[data-nav=open] .mobile-nav__link:nth-child(8) .mobile-nav__text {
    transition-delay: .24s
  }

  .mobile-wrapper[data-nav=open] .mobile-nav__link:nth-child(9) .mobile-nav__text {
    transition-delay: .27s
  }

  .mobile-wrapper[data-nav=open] .mobile-nav__link:nth-child(10) .mobile-nav__text {
    transition-delay: .3s
  }

  .mobile-wrapper[data-nav=open] .mobile-nav__text , .mobile-wrapper[data-nav=open] .text-uppercase-small.is--navigation{
    transform: translateY(0)
  }
  
  
  .nav-wrapper .burger-text {
  opacity: 1;
  transition: all var(--duration-default) var(--ease-out-quad);
}

  .nav-wrapper .burger-text.is--closed{
  opacity: 0;
    filter: blur(4px);
}

/* data-nav="open" */
.nav-wrapper[data-nav="open"] .burger-text.is--open {
  opacity: 0;
  filter: blur(4px);
;}

.nav-wrapper[data-nav="open"] .burger-text.is--closed {
  opacity: 1;
   filter: blur(0px);
}

/* data-nav="closed" */
.nav-wrapper[data-nav="closed"] .burger-text.is--open {
  opacity: 1;
    filter: blur(0px);
}

.nav-wrapper[data-nav="closed"] .burger-text.is--closed {
  opacity: 0;
    filter: blur(4px);
}


  /* ------------------------- swiper -------------------------------------------------- */

  .swiper-buttons-container button.swiper-button-disabled {
    opacity: .4;
    pointer-events: none;
    transition: all var(--duration-default) var(--cubic-default)
  }

  .swiper-scrollbar {
    width: 100%;
    height: .0625em;
    background-color: var(--color-dark-10)
  }

  .swiper-scrollbar .swiper-scrollbar-drag {
    width: 100%;
    height: .0625em;
    background-color: var(--color-dark);
    position: relative
  }

  .swiper-scrollbar .swiper-scrollbar-drag:before {
    content: "";
    position: absolute;
    top: -.5em;
    right: -.5em;
    bottom: -.5em;
    left: -.5em
  }

  .swiper-wrapper:active {
    cursor: grabbing
  }

  .swiper-wrapper {
    -webkit-user-select: none;
    user-select: none
  }

  .swiper-button.is--next:hover .swiper-svg-inner {
    transform: translate(100%);
    transition: transform var(--duration-default) var(--cubic-default)
  }

  .swiper-button.is--prev:hover .swiper-svg-inner {
    transform: translate(-100%);
    transition: transform var(--duration-default) var(--cubic-default)
  }

  /* ------------------------- accordion faq -------------------------------------------------- */

  .accordion-css__item-bottom {
    transition: grid-template-rows .6s cubic-bezier(.625, .05, 0, 1)
  }

  [data-accordion-status=active] .accordion-css__item-bottom {
    grid-template-rows: 1fr
  }

  .accordion-css__item-icon {
    transition: transform .6s cubic-bezier(.625, .05, 0, 1)
  }

  [data-accordion-status=active] .accordion-css__item-icon {
    transform: rotate(.001deg)
  }


  /* ------------------------- header -------------------------------------------------- */


  .header {
 transition: transform var(--duration-l) var(--cubic-default), border-bottom var(--duration-default) var(--cubic-default);
  }

  .header .nav-wrapper {
    transition: padding-block var(--duration-l) var(--cubic-default)
  }

  [data-scrolling-started=true] .header {
    border-bottom: .0625em solid var(--color-dark-10);
  }

  [data-scrolling-started=true][data-scrolling-direction=down] header {
    transform: translateY(-100%) rotate(.001deg)
  }

  /* ------------------------- noise -------------------------------------------------- */

  .noise {
    display: block !important
  }

  .noise .noise__img {
    top: -10rem;
    left: -10rem;
    width: calc(100% + 20rem);
    height: calc(100% + 20rem);
    z-index: 2000;
    position: absolute;
    background-position: 50%;
    pointer-events: none;
    animation: noise 2s steps(2) infinite;
    opacity: .9
  }

  @keyframes noise {
    0% {
      transform: translate3d(0, 9rem, 0)
    }

    10% {
      transform: translate3d(-1rem, -4rem, 0)
    }

    20% {
      transform: translate3d(-8rem, 2rem, 0)
    }

    30% {
      transform: translate3d(9rem, -9rem, 0)
    }

    40% {
      transform: translate3d(-2rem, 7rem, 0)
    }

    50% {
      transform: translate3d(-9rem, -4rem, 0)
    }

    60% {
      transform: translate3d(2rem, 6rem, 0)
    }

    70% {
      transform: translate3d(7rem, -8rem, 0)
    }

    80% {
      transform: translate3d(-9rem, 1rem, 0)
    }

    90% {
      transform: translate3d(6rem, -5rem, 0)
    }

    to {
      transform: translate3d(-7rem, 0, 0)
    }
  }

  /* ------------------------- REST -------------------------------------------------- */

  .rich-text-angebote li{
    background-image: url(https://cdn.prod.website-files.com/67ca9ee164403547e81bb233/67e69e4fd0c12e12f6974db5_childless-flower.svg);
    background-repeat: no-repeat;
    padding-left: 1.5em;
    background-position: 0 .25em
  }

  .w-input,
  .w-select {
    border: unset
  }

  html.is-changing .transition-fade {
    transition: opacity .4s ease-out;
    opacity: 1
  }

  html.is-changing .nav-wrapper {
    transition: background-color .4s ease-out;
  }


  html.is-animating .transition-fade {
    opacity: 0
  }

  html.is-animating .nav-wrapper{
    background-color: white !important;
  }


  nav:hover a.btn-nav.w--current:not(:hover):after {
    opacity: 0
  }

  [data-nav].mobile-nav__link.w--current .mobile-nav__text {
    display: flex;
    align-items: center
  }

  [data-nav].mobile-nav__link.w--current .mobile-nav__text:before {
    content: "";
    display: block;
    width: .1875em;
    margin-top: -.0625em;
    height: .1875em;
    border-radius: 999px;
    background-color: var(--color-dark);
    margin-right: .4em
  }



  @media (min-width: 992px) {
    .collection-list .listitem:nth-child(1) {
      grid-column: 1/2;
      grid-row: 1/4
    }

    .collection-list .listitem:nth-child(2) {
      grid-column: 2/3;
      grid-row: 1/6
    }

    .collection-list .listitem:nth-child(3) {
      grid-column: 3/4;
      grid-row: 1/5
    }

    .collection-list .listitem:nth-child(4) {
      grid-column: 1/2;
      grid-row: 7/10
    }

    .collection-list .listitem:nth-child(5) {
      grid-column: 2/4;
      grid-row: 7/12
    }
  }

  @media (min-width: 992px) {
    .articles-wrapper.is--blogartikel .collection-list .listitem:nth-child(1) {
      grid-column: 1/2;
      grid-row: 1/4
    }

    .articles-wrapper.is--blogartikel .collection-list .listitem:nth-child(2) {
      grid-column: 2/3;
      grid-row: 1/6
    }

    .articles-wrapper.is--blogartikel .collection-list .listitem:nth-child(3) {
      grid-column: 3/4;
      grid-row: 1/5
    }
  }

  .arrow-wrapper {
    transition: all var(--duration-default) var(--cubic-default)
  }

  body[data-scrolling-started=true] .arrow-wrapper {
    transform: translateY(-50%);
    opacity: 0;
    filter: blur(10px)
  }

  select {
    color: var(--color-dark);
  }

  input[type=radio] {
    accent-color: var(--color-dark);
  }

  .pod-card__header[data-typ=Interview] {
    background-color: #e4e6ea
  }



  .article-wrapper:hover .img-article {
    transform: scale(1);
    opacity: .8
  }

  .article-wrapper:hover h2 {
    text-decoration: underline
  }

  .img-article {
    transition: all var(--duration-default) var(--ease-out-quad);
  }

  .hidden {
    display: none;
  }

  .spinner_V8m1 {
    opacity: 0;

  }

  .spinner_V8m1.animate {
    opacity: 1;
    transform-origin: center;
    animation: spinner_zKoa 2s linear infinite
  }

  .spinner_V8m1.animate circle {
    animation: spinner_YpZS 1.5s ease-in-out infinite
  }

  @keyframes spinner_zKoa {
    100% {
      transform: rotate(360deg)
    }
  }

  @keyframes spinner_YpZS {
    0% {
      stroke-dasharray: 0 150;
      stroke-dashoffset: 0
    }

    47.5% {
      stroke-dasharray: 42 150;
      stroke-dashoffset: -16
    }

    95%,
    100% {
      stroke-dasharray: 42 150;
      stroke-dashoffset: -59
    }
  }
  
html.wf-design-mode .preloader{
  display: none;
  }

/* Ajustes para el video hero */
.img-container video.image {
  width: 100%;
  height: auto; /* Para mantener la proporción del video */
  max-width: 100%; /* Asegura que no exceda el contenedor */
  display: block; /* Elimina espacios extra debajo del video */
  object-fit: cover; /* Cubre el área manteniendo la proporción, puede recortar */
}

.logo{
  max-width: 65px;
}

/* Estilos para el Formulario de Experiencias - Estilo Minimalista tipo imagen */
.contact-form-wrapper {
  background-color: transparent; /* Sin fondo */
  box-shadow: none; /* Sin sombra */
  padding: 2em 0; /* Solo padding vertical, sin padding lateral para efecto full-width dentro de su contenedor */
  max-width: 100%; /* Ocupa el ancho completo de su contenedor padre */
  margin-top: 2em; /* Espacio superior */
  margin-bottom: 2em; /* Espacio inferior */
}

.contact-form-wrapper .form-title {
  text-align: center;
  margin-bottom: 2em; /* Más espacio después del título */
  font-size: 1.8em;
  color: var(--color-dark);
}

.contact-form-wrapper .form-group {
  margin-bottom: 1.5em; /* Espacio entre cada grupo de label/input */
}

.contact-form-wrapper .form-label {
  display: block;
  margin-bottom: 0.5em;
  font-weight: normal; /* Peso normal como en la imagen */
  font-size: 0.9em; /* Ligeramente más pequeño */
  color: #555; /* Un gris oscuro para las etiquetas */
}

.contact-form-wrapper .w-input,
.contact-form-wrapper .w-text-area {
  width: 100%;
  padding: 10px 0px; /* Padding vertical, sin padding horizontal */
  border: none; /* Sin bordes excepto el inferior */
  border-bottom: 1px solid #ccc; /* Línea inferior gris claro */
  border-radius: 0; /* Sin bordes redondeados */
  font-size: 1em;
  color: var(--color-dark, #333);
  background-color: transparent; /* Fondo transparente */
  transition: border-color 0.3s ease;
}

.contact-form-wrapper .w-input:focus,
.contact-form-wrapper .w-text-area:focus {
  outline: none;
  border-bottom-color: var(--color-accent, #007bff); /* Color de acento en foco */
  box-shadow: none; /* Sin sombra en foco */
}

/* Estilos para el botón Submit del formulario de experiencias, más simple */
.contact-form-wrapper .form-group button.w-button.btn001 {
    background-color: transparent !important;
    border: 1px solid var(--color-dark, #333) !important; /* Borde oscuro */
    color: var(--color-dark, #333) !important; /* Texto oscuro */
    padding: 12px 30px !important; /* Padding ajustado */
    border-radius: 4px !important;
    font-weight: normal !important;
    text-transform: none !important; /* Sin transformación de texto */
    box-shadow: none !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
    display: block !important;
    width: fit-content !important; /* Ancho según el contenido */
    margin: 2.5em auto 0 auto !important; /* Margen superior generoso y centrado */
    line-height: normal !important; /* Asegurar altura de línea normal */
}

.contact-form-wrapper .form-group button.w-button.btn001 .btn001__circle-container {
    display: none !important; /* Ocultar el círculo animado */
}

.contact-form-wrapper .form-group button.w-button.btn001 .btn001__text-wrapper {
    transform: none !important; /* Sin transformaciones */
    padding: 0 !important;
    display: block !important; /* Asegurar que el contenedor de texto se comporte predeciblemente */
}
.contact-form-wrapper .form-group button.w-button.btn001 .btn001__text-p {
    color: inherit !important; /* Heredar color del botón */
    /* Aquí puedes añadir más estilos si es necesario para el texto del botón */
}


.contact-form-wrapper .form-group button.w-button.btn001 .btn001__text-wrapper:after {
    display: none !important; /* Ocultar la pseudo-clase :after si la usa para la línea inferior */
}

.contact-form-wrapper .form-group button.w-button.btn001:hover {
    background-color: var(--color-dark, #333) !important; /* Fondo oscuro en hover */
    color: #fff !important; /* Texto blanco en hover */
    border-color: var(--color-dark, #333) !important; /* Borde oscuro en hover */
}

/* Ajustes para input de fecha si es necesario */
.contact-form-wrapper .w-input[type="date"] {
    min-height: auto; /* Evitar alturas extrañas */
}

.contact-form-wrapper .w-input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.6; /* Hacer el icono del calendario un poco sutil */
    cursor: pointer;
}

/* Remover estilos anteriores que puedan estar en conflicto */
/* Nota: Si los estilos anteriores para .contact-form-wrapper, .w-input, etc. eran globales,
   estos nuevos estilos más específicos (dentro de .contact-form-wrapper) los sobreescribirán.
   Si había estilos específicos para el formulario que ahora queremos eliminar (como el fondo del wrapper),
   asegúrate de que las nuevas reglas los anulen o elimina las viejas.
   Los estilos aplicados en el paso anterior para .contact-form-wrapper (fondo, sombra, padding general)
   serán sobreescritos o anulados por estos. */

/* Ajustes responsivos para el nuevo estilo de formulario */
@media screen and (max-width: 767px) {
  .contact-form-wrapper {
    padding: 1.5em 0; /* Menos padding vertical en móviles */
  }
  .contact-form-wrapper .form-title {
    font-size: 1.6em; /* Título un poco más pequeño */
    margin-bottom: 1.5em;
  }
  .contact-form-wrapper .form-group button.w-button.btn001 {
    padding: 10px 25px !important; /* Botón ligeramente más pequeño */
  }
}