/**
** Theme Container Image and Text
** This file contains the styles for the container with image and text element in the theme.
*/

.wp-block-uagb-container.cont-img-txt {
  align-items: stretch;
  gap: calc(var(--gap-l) * 2 + var(--gap-s));
}

.wp-block-uagb-container.cont-img-txt .col-img {
  width: 41.48%;
}

.wp-block-uagb-container.cont-img-txt .col-txt {
  gap: var(--gap-l);
  width: 50%;
}

/*
.wp-block-uagb-container.cont-img-txt p {
  margin-bottom: calc(var(--gap-m) / 1.4) !important;
}
*/

/** ----------------- **/

/** Zimmer **/

/* col img */

.wp-block-uagb-container.cont-zimmer .cont-img-txt {
  gap: 0 !important;
}

.wp-block-uagb-container.cont-zimmer .cont-img-txt .col-img {
  width: 50.37%;
}

/* gallery */

.wp-block-uagb-container.cont-zimmer .cont-img-txt .col-img .slick-slide > div {
  display: flex;
}

/*
.wp-block-uagb-container.cont-zimmer .col-img *:not(button) {
  height: 100%;
}
*/

.wp-block-uagb-container.cont-zimmer
  .cont-img-txt
  .col-img
  .spectra-image-gallery__layout--carousel {
  margin-bottom: 0 !important;
}

/* arrows */

.spectra-image-gallery__control-arrows svg {
  display: none !important;
}

.wp-block-uagb-image-gallery button.slick-arrow {
  --my-size: 20px;
  width: var(--my-size) !important;
  height: calc(var(--my-size) * 1.4);
  left: 0;
  top: 90%;
  background-repeat: no-repeat !important;
  background-position: center center;
  background-size: contain !important;
}

.wp-block-uagb-image-gallery button.slick-arrow.slick-next {
  right: 46% !important;
  background-image: url(../../img/icon-button-next.svg) !important;
  left: unset;
}

.wp-block-uagb-image-gallery button.slick-arrow.slick-prev {
  left: 46% !important;
  background-image: url(../../img/icon-button-prev.svg) !important;
}

/* col txt */

.wp-block-uagb-container.cont-zimmer .cont-img-txt .col-txt {
  background-color: var(--ast-global-color-0);
  width: 49.63%;
  padding: var(--gap-m) var(--gap-l);
}

.wp-block-uagb-container.cont-zimmer .cont-img-txt .col-txt {
  gap: var(--gap-s);
}

.wp-block-uagb-container.cont-zimmer .cont-img-txt .col-txt ul.wp-block-list {
  margin-top: var(--gap-s) !important;
}

/* buttons */

.wp-block-uagb-container.cont-zimmer .wp-block-uagb-buttons {
  max-width: 800px;
  background-color: var(--ast-global-color-4);
  border-radius: 500px;
}

.wp-block-uagb-container.cont-zimmer.zwei-buttons .wp-block-uagb-buttons {
  max-width: 550px;
}

.wp-block-uagb-container.cont-zimmer
  .wp-block-uagb-buttons
  .uagb-buttons__wrap {
  gap: calc(var(--gap-m) * 1.2);
}

.wp-block-uagb-container.cont-zimmer
  .wp-block-uagb-buttons
  .wp-block-uagb-buttons-child:not(.btn-buchen)
  .uagb-button__link {
  color: var(--ast-global-color-0);
}

.wp-block-uagb-container.cont-zimmer
  .wp-block-uagb-buttons
  .wp-block-button__link
  .uagb-button__link {
  transition: all 0.5s ease-in-out;
}

.wp-block-uagb-container.cont-zimmer
  .wp-block-uagb-buttons
  .wp-block-button__link {
  padding: 0.867em 2em !important;
  transition: all 0.5s ease-in-out;
}

.wp-block-uagb-container.cont-zimmer
  .wp-block-uagb-buttons
  .wp-block-uagb-buttons-child:not(.btn-buchen)
  .uagb-button__link::after {
  background-image: url(../../img/icon-button-pfeil-weiss.svg);
  transition: all 0.5s ease-in-out;
}

/* hover */

.wp-block-uagb-container.cont-zimmer
  .wp-block-uagb-buttons
  .wp-block-button__link:hover {
  background-color: var(--ast-global-color-4);
}

.wp-block-uagb-container.cont-zimmer
  .wp-block-uagb-buttons
  .wp-block-button__link:hover
  .uagb-button__link {
  color: var(--ast-global-color-3);
}

.wp-block-uagb-container.cont-zimmer
  .wp-block-uagb-buttons
  .wp-block-uagb-buttons-child.btn-buchen
  .wp-block-button__link:hover
  .uagb-button__link {
  color: var(--ast-global-color-0);
}

.wp-block-uagb-container.cont-zimmer
  .wp-block-uagb-buttons
  .wp-block-button__link:hover
  .uagb-button__link::after {
  background-image: url(../../img/icon-button-pfeil-gruen.svg);
}

.wp-block-uagb-container.cont-zimmer
  .wp-block-button.btn-buchen:hover
  .uagb-button__link::after {
  background-image: url(../../img/icon-button-pfeil-weiss.svg);
}

@media (max-width: 850px) {
  .wp-block-uagb-container.cont-img-txt {
    flex-direction: column;
  }
  .wp-block-uagb-container.cont-img-txt .col-img,
  .wp-block-uagb-container.cont-img-txt .col-txt {
    max-width: unset !important;
    width: 100% !important;
  }
}

@media (max-width: 765px) {
  .wp-block-uagb-container.cont-img-txt {
    gap: var(--gap-l);
  }
  .wp-block-uagb-container.cont-img-txt .wp-block-uagb-container {
    width: unset;
  }
  .wp-block-uagb-container.cont-img-txt .uagb-buttons__wrap {
    justify-content: flex-start;
  }
  .wp-block-uagb-container.cont-zimmer .wp-block-uagb-buttons {
    background-color: unset;
  }
  .wp-block-uagb-container.cont-zimmer
    .wp-block-uagb-buttons
    .uagb-buttons__wrap {
    flex-direction: column;
    gap: var(--gap-s);
  }
  .wp-block-uagb-container.cont-zimmer
    .wp-block-uagb-buttons
    .uagb-buttons__wrap
    .wp-block-button__link {
    width: 84vw;
  }
}

@media (max-width: 576px) {
  .wp-block-uagb-container.cont-zimmer
    .wp-block-uagb-image-gallery
    .spectra-image-gallery__control-arrows {
    --my-size: 25px;
    width: calc(var(--my-size) * 0.5) !important;
  }
  .wp-block-uagb-container.cont-zimmer .cont-img-txt .col-txt {
    padding: var(--gap-l) var(--gap-l);
  }
  .wp-block-uagb-image-gallery button.slick-arrow.slick-next {
    right: 44% !important;
  }
  .wp-block-uagb-image-gallery button.slick-arrow.slick-prev {
    left: 43% !important;
  }
}