:root {
  --danger: #e94747;
  --danger-hover: #eb5252;
  --danger-ultra-light: #fce8e8;
  --danger-light: #f7bbbb;
  --danger-semi-light: #ec5f5f;
  --danger-semi-dark: #a01313;
  --danger-dark: #720d0d;
  --danger-ultra-dark: #2e0505;
  --warning: #ffc20a;
  --warning-hover: #ffcc32;
  --warning-ultra-light: #fff9e6;
  --warning-light: #ffecb3;
  --warning-semi-light: #ffd24d;
  --warning-semi-dark: #b38600;
  --warning-dark: #4d3900;
  --warning-ultra-dark: #332600;
  --success: #399e1a;
  --success-hover: #4acf22;
  --success-ultra-light: #edfbe9;
  --success-light: #caf4bd;
  --success-semi-light: #83e665;
  --success-semi-dark: #379a19;
  --success-dark: #276e12;
  --success-ultra-dark: #102c07;
  --info: #17a2b8;
  --info-hover: #1cbcd5;
  --info-ultra-light: #e8f9fc;
  --info-light: #bbeef6;
  --info-semi-light: #61d8ea;
  --info-semi-dark: #158c9e;
  --info-dark: #093c44;
  --info-ultra-dark: #06282d;

  --donation: #92b0b9;
}

.no-children {
  font-weight: bold;
  margin-top: 10px;
  border-bottom: solid 1px var(--shade-light-trans-50);
  width: 100%;
}

.api-data {
  border-top: none !important;
}

.rate-description {
  font-size: var(--text-xs);
  width: 100%;
  text-wrap: balance;
  hyphens: auto;
}

.label {
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 13px;
}

p.label {
  margin-top: 10px;
}

.policies span {
  cursor: pointer;
}

.popup-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.popup-content {
  position: relative;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 800px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s ease-in-out;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  text-decoration: none;
  background: #f5f5f5;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  transition: background 0.3s ease;
}

.close-button:hover {
  background: #ddd;
}

.popup-body {
  margin-top: 20px;
}

.popup-body ul {
  padding: 0;
  padding-left: 20px;
}

/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.carousel-ratio {
  aspect-ratio: 4/3;
  object-fit: cover;
}

.image-carousel {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.carousel img {
  width: 100%;
  display: block;
  border-radius: 0 !important;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  /* Vertical center */
  transform: translateY(-50%);
  width: var(--space-l);
  height: var(--space-l);
  background-color: var(--white-trans-70);
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--text-l);
  line-height: 1;
  color: var(--action-dark);
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 4px var(--black-trans-20);
  transition: 0.3s ease;

  &:hover {
    background-color: var(--white);
  }
}

.carousel-prev {
  left: 1ch;

  &:hover {
    left: 0.5ch;
  }
}

.carousel-next {
  right: 1ch;

  &:hover {
    right: 0.5ch;
  }
}

.image-counter {
  position: absolute;
  bottom: 1ch;
  right: 1ch;
  background-color: var(--black-trans-50);
  color: var(--white);
  font-size: var(--text-xs);
  padding: 1ch 2ch;
  border-radius: 4px;
  z-index: 10;
}

.max-persons {
  font-size: 13px;
  font-weight: normal;
}

.availability-form {
  display: flex;
  align-items: flex-start;
  background-color: var(--white);
  padding: 20px;
  border: 1px solid var(--neutral-light);
  border-radius: 4px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  gap: 20px;
  width: 100%;
  position: relative;
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  position: relative;
}

/*.form-group label {
font-size: 14px;
margin-bottom: 5px;
}

.form-group input {
padding: 0 5px 0 5px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
width: 100%;
transition: border-color 0.3s;
}

.form-group input:focus {
border-color: #7cb342;
}

.form-group input[type="radio"] {
width: initial !important;
} */

.form-group-flex-0 {
  flex: 0;
}

#brxe-jezvzm {
  z-index: 1001;
}

.flyout-container {
  position: relative;
  flex: 1;
}

.flyout {
  display: none;
  position: absolute;
  top: calc(100%);
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 997;
  width: 100%;
}

.flyout.visible {
  display: block;
}

.flyout .child-age-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.flyout .child-age-group label {
  font-size: 14px;
  margin-bottom: 5px;
}

.flyout .child-age-group input {
  width: 100%;
  padding: 0 3px 0 3px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

.availability-check {
  padding: 0 5px 0 5px;
  height: 42px;
}

.no-available-rooms {
  text-align: center;
  width: 100%;
  background-color: #b35a4d;
  color: #fff;
  padding: 15px;
}

.sgh--alert {
  width: 100%;
  text-align: center;
  padding: var(--space-xs);
  line-height: 1.2;
  color: var(--white);
  font-weight: var(--link-weight);
  border: 1px solid;

  & a {
    color: currentColor;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: var(--link-underline-offset, 0.125em);
    transition: var(--link-transition, var(--transition));

    &:hover {
      text-decoration-style: solid !important;
      color: currentColor !important;
      text-decoration: underline;
    }
  }

  &.alert--default {
    background-color: var(--action-ultra-light);
    color: var(--action-dark);
    border-color: var(--action-light);
  }

  &.alert--danger {
    background-color: var(--danger-ultra-light);
    color: var(--danger-dark);
    border-color: var(--danger-light);
  }

  &.alert--warning {
    background-color: var(--warning-ultra-light);
    color: var(--warning-dark);
    border-color: var(--warning-light);
  }

  &.alert--info {
    background-color: var(--info-ultra-light);
    color: var(--info-dark);
    border-color: var(--info-light);
  }

  &.alert--info-closure {
    padding: var(--space-m);
    font-size: var(--text-m);
  }

  &.alert--success {
    background-color: var(--success-ultra-light);
    color: var(--success-dark);
    border-color: var(--success-light);
  }

  &.alert--confirmation {
    display: flex;
    flex-direction: column;
    gap: 1lh;
    padding: var(--space-m);

    & .alert--icon {
      font-size: 2.25em;
      align-self: center;
    }

    & .alert--heading {
      font-weight: var(--heading-font-weight);
      font-size: 1.25em;
    }

    & .alert--content {
      line-height: var(--text-line-height);
      align-self: center;
      text-wrap: balance;
      hyphens: none;
      display: flex;
      flex-direction: column;
      gap: 1lh;

      @media (min-width: 1392px) {
        max-width: 80ch;
      }
    }
  }
}

.sgh--alert_mini {
  margin-top: 0;
  text-align: left;
  padding: 1ch;
  font-size: 0.875em;
  display: inline;
  width: auto;

  &.alert--danger {}

  &.alert--warning {}

  &.alert--info {
    color: var(--info-dark);
    border-color: var(--info-light);
    background-color: var(--info-ultra-light);
  }

  &.alert--success {
    color: var(--success-dark);
    border-color: var(--success-light);
    background-color: var(--success-ultra-light);
  }
}

.rate-pricing {
  font-size: 13px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
}
.rate-pricing strong {
  font-weight: 700;
  color: var(--action-dark);
}

.slider-alignment {
  align-items: start !important;
}

.booking-heading-spacer-top {
  margin-top: 20px;
}

.booking-heading-spacer-bottom {
  margin-bottom: 20px;
}

.booking-terms-and-conditions-wrapper {
  padding-top: 20px;
  margin-bottom: 30px;
  border-top: 1px solid #dcdbd8;
}

.booking-terms-and-conditions-spacer {
  margin-bottom: 20px;
}

.booking-terms-and-conditions-subheading-spacer {
  margin-bottom: 5px;
}

.booking-accept-terms-and-conditions-wrapper {
  display: flex;
  align-items: baseline;
}

label.booking-accept-terms-and-conditions-label {
  font-weight: normal !important;
  margin-left: 5px;
  font-size: 15px;
}

.booking-donation-description-wrapper {
  font-size: var(--text-xs);
  line-height: var(--text-line-height);
  display: none;
}

.creditcard-icons-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1ch 2ch;
  justify-content: space-between;
  align-items: center;

  @media (min-width: 1080px) {
    flex-wrap: nowrap;
  }
}

.creditcard-icons {
  display: flex;
  gap: 1ch;
  color: var(--action);
  order: 1;
}

.creditcard-icons svg {
  width: 40px;
  height: auto;
  fill: currentColor;

  &.active {
    color: var(--action);
    fill: var(--action);
  }

  &.inactive {
    color: var(--neutral-semi-light);
    fill: var(--neutral-semi-light);
  }

  & * {
    fill: currentColor;
  }
}

.creditcard-icons-right {
  flex-grow: 1;
  color: var(--neutral-semi-light);
  display: flex;
  justify-content: flex-end;
  justify-self: flex-end;
  order: 2;

  @media (min-width: 960px) {
    order: 3;
  }
}

.creditcard-icons-right svg {
  fill: var(--action) !important;
  width: 48px;
  height: auto;
}

.creditcard-secure-transmission {
  font-size: calc(var(--text-xs) * 0.9);
  color: var(--neutral-semi-dark);
  font-style: italic;
  flex-grow: 1;
  line-height: 1.2;
  order: 3;
  width: 100%;

  @media (min-width: 960px) {
    order: 2;
    width: auto;
  }
}

.grid3 {
  grid-template-columns: repeat(3, 1fr);
}

.error-field {
  & label {
    color: var(--danger-dark) !important;

    &:before {
      content: "\f047";
      font-family: uicons-regular-straight !important;
    }
  }

  & span {
    color: var(--danger-dark) !important;
    background-color: var(--danger-ultra-light);
    border: 1px solid var(--danger-light);
    padding: 1ch;
    font-size: 0.875em;
    font-size: var(--text-xs);
  }

  & input,
  & select {
    border-color: 1px var(--danger) !important;
    box-shadow: inset 1px 1px 0 var(--danger), inset -1px -1px 0 var(--danger) !important;
    background-color: var(--danger-ultra-light) !important;
    color: var(--danger-dark) !important;
  }
}

#brxe-echecm {
  flex: 0 0 0%;
  margin-bottom: 0;
}

#brxe-sbwkej {
  flex: 0 0 0%;
  margin-bottom: var(--space-m);
}

#special-request-add-field-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  width: var(--space-m);
  height: var(--space-m);
  color: var(--action);
  background-color: var(--action-ultra-light);
  border-radius: 50%;
  transition: 0.3s;

  &:hover {
    color: var(--white);
    background-color: var(--action);
  }
}

.form-field-special-request {
  width: 95% !important;
}

@media (max-width: 768px) {
  .form-field-special-request {
    width: 80% !important;
  }
}

.special-request-remove-field-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  width: var(--space-l);
  height: var(--space-l);
  margin-left: var(--space-xs);
  color: var(--action);
  background-color: var(--action-ultra-light);
  border-radius: 50%;
  transition: 0.3s;

  &:hover {
    color: var(--white);
    background-color: var(--action);
  }
}

.booking-confirmation {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1lh;
  color: var(--action-dark);
  width: auto;
  padding: var(--space-m);
  background-color: var(--white);
  align-self: center;

  & .booking-title {
    font-weight: var(--heading-font-weight);
    font-size: 1.25em;
    color: var(--action-dark);
  }

  & .booking-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    --divider-gap: 1ch;

    & .booking-detail {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: var(--space-m);
      align-items: baseline;
      line-height: 1.2;
    }

    & .booking-label {
      font-weight: var(--heading-font-weight);
    }
  }
}

.thank-you {
  text-align: center;
  margin-top: 20px;
  font-size: 20px;
  color: var(--action);
}

.cancel-your-booking {
  text-align: center;
  margin-top: 20px;
}

.cancellation-form {
  margin-top: 50px;
  max-width: 512px;
}

@media (max-width: 767px) {
  #brxe-mwuguf {
    grid-template-columns: var(--grid-1);
  }
}

/* _________________________ */
/* EDIT by AB */
/* _________________________ */
.sgh-room--policies {
  font-size: var(--text-xs);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1ch;
  line-height: 1;
  flex-grow: 1;
  justify-items: flex-end;
  align-items: flex-end;

  & .popup-link {
    margin: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    transition: 0.3s;
    text-decoration-thickness: 1px;
    text-decoration-style: dotted;
    font-weight: var(--link-weight);
    color: var(--action);
    display: flex;
    gap: 1ch;

    &:hover {
      text-decoration-style: solid;
      color: var(--action-hover);
    }

    &:last-of-type {
      &+.separator {
        display: none;
      }
    }
  }
}

.sgh-room--bookings {
  grid-column: 1 / span all;
  /*border-top: 1px solid var(--neutral-light);*/
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;

  &.divider--all {
    /*--divider: 1px solid var(--neutral-light);
--divider-gap: 1px;*/
    --divider: none;
    --divider-gap: 0px;
  }

  & .sgh-room--nonAvailable {
    display: none;

    & .sgh-room-booking {
      &:last-child {
        border-bottom: unset;
      }
    }
  }

  & .sgh-room--nonAvailable--link {
    font-size: var(--text-xs);
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-start;
    line-height: 1;
    gap: 0.375ch;
    justify-content: flex-end;
    justify-self: flex-end;
    padding-top: 2ch;

    & span {
      margin: 0;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 0.25em;
      transition: 0.3s;
      text-decoration-thickness: 1px;
      text-decoration-style: dotted;
      font-weight: var(--link-weight);
      color: var(--action);
      display: flex;
    }

    &:hover {
      & span {
        text-decoration-style: solid;
        color: var(--action-hover);
      }
    }
  }

  & .sgh-room-booking {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: var(--space-s);
    align-items: stretch;
    border: none;
    padding: var(--space-m);

    background-color: var(--white);
    /*border-left: var(--divider);
border-right: var(--divider);*/

    /* &:last-child {
  border-bottom: var(--divider);
}*/

    @media (max-width: 1080px) {
      grid-template-columns: 1fr;
    }

    &:nth-child(odd) {
      background: var(--primary-ultra-light);

      &+.sgh-room--nonAvailable {
        & .sgh-room-booking {
          &:nth-child(odd) {
            background-color: var(--white);
          }

          &:nth-child(even) {
            background-color: var(--primary-ultra-light);
          }
        }
      }
    }

    & .sgh-room-booking--content {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1lh;
      width: 100%;
      max-width: 100%;
      color: var(--neutral);

      & .sgh-room--title {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1ch;
        align-content: flex-start;

        &>span {
          font-weight: var(--heading-font-weight);
          font-size: var(--text-m);
          color: var(--action-dark);
        }
      }
    }
  }
}

.sgh-room-booking--pricing {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);

  @media (max-width: 960px) {
    grid-template-columns: 1fr;
    margin-top: 1lh;
  }

  & .sgh-room-booking--pricing--price {
    display: grid;
    grid-column: 1 / span 2;
    grid-template-columns: 1fr;
    grid-gap: 0;
    justify-self: flex-end;
    align-self: flex-start;
    order: 1;

    @media (max-width: 960px) {
      grid-column: 1 / span 1;
      justify-self: flex-start;
      text-align: left !important;
    }
  }

  & .sgh-room-booking--pricing--buttons-book {
    order: 3;
    width: 100%;

    @media (max-width: 960px) {
      order: 2;
    }
  }

  & .sgh-room-booking--email-request {
    grid-column: 2;

    @media (max-width: 960px) {
      grid-column: 1;
    }
  }

  & .sgh-room-booking--pricing--buttons-request {
    order: 2;

    @media (max-width: 960px) {
      width: 100%;
      order: 3;
    }
  }

  & .sgh-room-booking--pricing--buttons-book,
  & .sgh-room-booking--pricing--buttons-request {
    display: flex;
    align-self: flex-end;
    justify-self: flex-end;

    @media (max-width: 960px) {
      align-self: flex-start;
      justify-self: flex-start;
    }

    & form {
      width: 100%;

      & button {
        width: 100%;
      }
    }
  }

  & *:only-child,
  & .sgh-room-booking--no-booking-available {
    grid-column: 1 / 2 span;
    width: 100%;
    align-self: flex-start;
  }

  & .btn--action.btn--outline {
    --btn-background: transparent;
    --btn-background-hover: var(--action);
    --btn-text-color: var(--action);
    --btn-text-color-hover: var(--base);
    --btn-border-width: 0.1rem;
    --btn-border-color: var(--action);
    --btn-border-color-hover: var(--action);
    --focus-color: var(--action);
  }
}

.availability-form-container {
  background-color: var(--base);
  gap: 1ch;
  padding-top: calc(var(--gutter) / 2);
  top: 0;
  position: sticky;
  z-index: 997;

  @media (max-width: 1080px) {
    position: relative;
  }
}

form.availability-form {
  display: grid;
  background-color: var(--white);
  padding: var(--space-s);
  border: none;
  border-radius: 0;
  box-shadow: none;
  gap: var(--space-s);
  width: 100%;
  position: relative;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  & .form-group {
    display: grid;
    position: relative;
    grid-gap: var(--space-xs, 8px);
    border-right: 1px solid var(--neutral-semi-light);
    padding-right: var(--space-s, 20px);
    line-height: 1;

    &:last-of-type {
      border-right: none;
      padding-right: 0;
    }

    & label {
      font-size: calc(var(--text-xs, 14px) * 0.875);
      margin-bottom: 0;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: 0.45px;
      color: var(--neutral);
      font-weight: 300;
    }

    & input:not([type="submit"]) {
      padding: 0;
      font-size: var(--text-l, 20px);
      border: none;
      border-radius: 0;
      outline: none;
      width: 100%;
      transition: border-color 0.3s;
      color: var(--neutral);
      line-height: 1;

      &::placeholder {
        color: var(--neutral);
        opacity: 0.5;
      }

      &::-ms-input-placeholder {
        color: var(--neutral);
        opacity: 0.5;
      }

      &:focus {
        border: none;
        box-shadow: none;
      }
    }
  }

  & input[type="submit"] {
    height: 100%;
    font-size: var(--text-m, 16px);
    letter-spacing: 0.45px;
    min-height: 50px;

    /* @AB: 25-05-28 */
    z-index: 100;
  }
}

@media (max-width: 1429px) {
  form.availability-form {
    & input[type="submit"] {
      grid-column: 1 / 3 span;
    }
  }
}

@media (max-width: 1080px) {
  form.availability-form {
    grid-template-columns: 1fr;
    /* gap: var(--space-m, 28px);*/
    /* @AB: 25-05-28 */
    padding: 1ch 2ch;
    gap: 1ch;

    & input[type="submit"] {
      grid-column: 1 / 1 span;
      /* @AB: 25-05-28 */
      min-height: unset;
      padding: 1.875ch 1ch;
    }

    & .form-group {
      border-right: unset;
      padding-right: unset;
      border-bottom: 1px solid var(--neutral-semi-light);
      /*padding-bottom: var(--space-s, 20px);*/
      /* @AB: 25-05-28 */
      padding-bottom: 1ch;
      grid-gap: 0.375ch;
    }
  }
}

.sgh-rooms-list {
  position: relative;
  width: 1100px;
  /* @AB: 25-05-28 */
  scroll-margin-top: calc(var(--gutter) * 3) !important;

  @media (max-width: 960px) {
    scroll-margin-top: calc(var(--gutter) * 1.5) !important;

  }
}

.sgh-rooms-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--white-trans-70);
  backdrop-filter: blur(15px);
  padding: var(--space-xxl);

  /* @AB: 25-05-28 */
  /*display: none;*/
  z-index: 200;
  opacity: 1;

  & .sgh-overlay-content {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    font-weight: var(--heading-font-weight);
    font-family: "Clearface Serial Bold";
    color: var(--action-dark);
    gap: 1ch;
    position: sticky;
    top: calc(var(--gutter) * 4);
  }

  & .spinner {
    width: var(--space-m);
    height: var(--space-m);
    border: 4px solid var(--action-trans-20);
    border-top: 4px solid var(--action-dark);
    border-radius: 50%;
    animation: spin 1s linear infinite !important;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* NEW EDITS BY AB 25-04-29 */
.sgh-hotel--teaser {
  position: relative;
  padding: 0;

  &>.inner {
    position: relative;
    padding: var(--gutter);
    row-gap: var(--gutter) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center !important;
    text-align: center;


    /* @AB 25-05-28 */
    @media (max-width: 960px) {
      padding: 3ch 2ch;
    }


    &.withImage {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    @media (min-width: 1392px) {
      /*
    aspect-ratio: 3/1;
    overflow: hidden;
    */
      padding: calc(var(--gutter) * 2) var(--gutter);
    }

    &:after {
      content: "";
      width: 100%;
      height: 100%;
      z-index: 0;
      top: 0;
      left: 0;
      position: absolute;
      background: linear-gradient(to bottom,
      transparent 0%,
      var(--black-trans-80) 100%);
    }

    &>* {
      z-index: 2;
    }

    & .sgh-hotel--heading {
      display: flex;
      flex-direction: column;
      gap: 1ch;
      align-items: center;
      justify-content: center;
      flex-grow: 1;
      text-align: center;
      color: var(--white);
      text-shadow: 0 0 15px var(--black);

      & h1 {
        display: flex;
        align-items: center;
        max-width: 24ch;
        line-height: 1.1;
        text-wrap: balance;

        /* @AB 25-05-28 */
        @media (max-width: 960px) {
          font-size: 7.2vw;
        }
      }

      & .sgh-hotel--hotel-name {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 1ch;
        line-height: 1;
        font-weight: 400;
        align-items: center;
        font-size: var(--text-l);
      }
    }

    & nav {
      align-items: baseline;
      overflow: visible !important;
      width: 100%;

      /* @AB : 25-05-28 */
      display: flex;
      text-align: center;
      align-self: center !important;

      & a {
        color: var(--white);
        font-weight: var(--link-weight);
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.375ch;
        line-height: 1.2;
        letter-spacing: 0.025ch;
        border: none;
        padding: unset;
        text-decoration: none;
        border-radius: 0;
        text-align: center;
        justify-self: center;
        /* @AB : 25-05-28 */
        width: unset !important;

        &>span {
          text-decoration: underline;
          text-decoration-style: dotted;
          text-underline-offset: var(--link-underline-offset, 0.125em);
          transition: var(--link-transition, var(--transition));
        }

        &:hover {
          &>span {
            text-decoration-style: solid;
          }
        }
      }
    }

    & .sgh-hotel--featured-image {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
      }
    }
  }
}

.sgh--section {
  gap: var(--space-m);
  position: relative;
  padding-top: 0;

  @media (min-width: 1392px) {
    top: calc(0px - (var(--gutter) * 1.5));
  }

  &>.content--feature {
    position: relative;
    row-gap: var(--content-gap);

    /* @AB : 25-05-28 */
    @media (max-width: 960px) {
      row-gap: var(--space-xs);
    }

    &:not(.with__availability-form) {
      padding-top: calc(var(--gutter) / 2);
    }
  }

  & .sgh--request-confirmation {
    padding-bottom: calc(var(--gutter) / 2);
    gap: 2lh;
  }

  & .sgh--request-form {
    gap: 1lh;
  }

  & .sgh--request-heading {
    max-width: 100%;
    font-size: var(--text-l);
    font-weight: var(--heading-font-weight);
    color: var(--action-dark);
    margin-bottom: 0 !important;
    line-height: var(--text-line-height);
  }

  & .sgh--request-container {
    display: grid;
    gap: 1lh var(--gutter);
    position: static;
    grid-template-columns: 1fr !important;

    @media (min-width: 1080px) {
      grid-template-columns: 2fr minmax(300px, 1fr) !important;
    }

    & .sgh--request-main {
      display: flex;
      flex-direction: column;
      gap: var(--content-gap) !important;

      & .sgh--fieldset {
        background: var(--white);
        padding: var(--space-m);
        border: unset;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--space-m) !important;

        @media (min-width: 1080px) {
          gap: 1lh !important;
        }

        color: var(--neutral);

        &.divider--all {
          gap: 0 !important;
        }

        & .anfrage-spalten-wrapper {
          grid-template-columns: repeat(auto-fit,
          minmax(200px, 1fr)) !important;
          gap: var(--space-m);
        }

        & .sgh--fieldset-title {
          font-weight: var(--heading-font-weight) !important;
          font-size: var(--text-m);
          color: var(--action-dark) !important;
          font-family: inherit !important;
          display: inline-flex;
          align-items: baseline;
          gap: 1ch;
        }

        & .sgh--request-guest {
          display: flex;
          flex-direction: column;
          gap: var(--space-m);
          color: var(--neutral);

          @media (min-width: 1080px) {
            gap: 1ch;
          }
        }

        & .anfrage-anzahl-wrapper {
          gap: 1lh;
        }

        & .form-group {
          margin: 0;
          padding: 0;

          display: flex;
          flex-direction: column;
          width: 100%;
          align-items: stretch;
          gap: 1ch;
          flex: 1;
          position: relative;

          &.form-group-duplicates {
            & input {
              max-width: calc(100% - var(--space-l) - var(--space-s));
            }
          }

          &.form-group-radio {
            width: 100%;
            margin-block: 1lh;

            & .options-wrapper {
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              column-gap: var(--space-m);
              row-gap: 1lh;

              &>li {
                display: grid;
                grid-template-columns: 1.125em 1fr;
                align-items: baseline;
                line-height: 1.125;
                gap: 1ch;

                & input {
                  width: 1.125em;
                  height: 1.125em;
                }

                & label {
                  align-self: center;
                }
              }
            }
          }

          & .withIcon {
            display: flex;
            align-items: baseline;
            position: relative;
            flex-wrap: nowrap;
            border-radius: 4px;
            overflow: hidden;

            &>i {
              width: 6ch;
              line-height: 1;
              height: 100%;
              position: absolute;
              display: flex;
              align-items: center;
              justify-content: center;
              pointer-events: none;
              color: var(--action-dark);
            }

            & input {
              padding-left: 6ch !important;
            }
          }

          & label {
            font-size: calc(var(--text-xs, 14px) * 0.875);
            margin-bottom: 0;
            line-height: 1;
            text-transform: uppercase;
            letter-spacing: 0.45px;
            color: var(--neutral);
            font-weight: 400;
            display: flex;
            flex-wrap: wrap;
            gap: 1ch;
            margin: 0;

            & small {
              text-transform: none;
              font-weight: 400;
              font-size: 1em;
            }
          }
        }
      }
    }

    & .sgh--request-sidebar {
      display: flex;
      flex-direction: column;
      align-self: flex-start;
      row-gap: var(--content-gap);
      color: var(--action-dark);
      font-weight: var(--text-font-weight);

      @media (min-width: 1080px) {
        position: sticky;
        top: var(--gutter);
      }

      & .sgh--sidebar-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1lh;
        background: var(--white);
        padding: var(--space-m);

        & .box--heading {
          margin: 0 !important;
          font-weight: var(--heading-font-weight);
          font-size: 1.125em;
          line-height: var(--text-line-height);
          color: currentcolor;
          text-wrap: balance;
        }

        &.sgh--sidebar-box--why {
          background: var(--action-light);
          position: relative;
          overflow: hidden;

          &>*:not(.why--icon) {
            position: relative;
            z-index: 1;
          }

          & .why--heading {
            font-weight: var(--heading-font-weight);
            font-size: 1.125em;
          }

          & .why--content {
            & ul {
              padding-inline-start: 0;
              list-style: none;
              display: flex;
              flex-direction: column;
              gap: 1ch;

              & li {
                display: inline-flex;
                flex-wrap: nowrap;
                gap: 1.375ch;
                align-items: baseline;
                font-weight: var(--link-weight);

                & .fi {
                  font-size: 1.125em;
                  line-height: 1;
                }

                & strong,
                & b {
                  font-weight: var(--heading-font-weight);
                }
              }
            }
          }

          & .why--icon {
            mix-blend-mode: multiply;
            position: absolute;
            /* bottom: calc(0px - var(--space-m));
        right: calc(0px - var(--space-m));*/
            bottom: 0;
            right: 0;
            color: var(--action-light);
            z-index: 0;
            font-size: 15em;
            opacity: 0.1;
            background-image: url(../img/sgh-donation-bg--action.svg);
            background-repeat: no-repeat;
            background-position: -212.5% calc(0px - var(--space-m));
            background-size: 125%;
            width: 100%;
            height: 100%;
            pointer-events: none;
          }
        }

        & .sgh--request--options {
          --divider-gap: 1.375ch;

          & .sgh--request--option {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 1ch;
            align-items: baseline;
            color: var(--action-dark);
            line-height: 1.2;

            &.rate {
              & .name {
                grid-column: 1 / span all;

                & small {
                  color: var(--neutral-semi-light);
                  font-size: var(--text-xs);
                }
              }
            }

            &.check-in,
            &.check-out {
              & .value:empty {
                &:before {
                  content: attr(data-placeholder);
                  opacity: 0.6;
                }
              }
            }

            &.rate {
              grid-template-columns: auto 1fr;
            }

            & .name {
              text-align: left;
            }

            & .value {
              text-align: right;
              font-weight: var(--link-weight);
              display: flex;
              flex-direction: column;
              gap: 0.375ch;

              &>* {
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                align-items: baseline;
                gap: 1ch;
              }
            }
          }
        }
      }
    }
  }
}

.sgh__roomlist__special {
  background-color: var(--action-light);
  color: var(--action);
  padding: 1ch;
  line-height: 1;
  font-size: var(--text-xs);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1ch;
  align-items: center;
  text-align: center;

  & .icon {
    font-size: var(--text-s);
  }

  & b {
    font-weight: 600;
  }
}

.sgh--request--donation {
  background-color: var(--donation);
  color: var(--white);
  padding: var(--space-m) !important;
  hyphens: auto;
  text-wrap: pretty;
  gap: var(--space-xs);
  margin-block: 1lh;
  line-height: var(--text-line-height);
  font-size: var(--text-xs);

  & select {
    font-size: var(--text-xs) !important;
  }

  & label {
    margin: 0;
    line-height: var(--text-line-height);
    letter-spacing: 0;
    font-weight: inherit;
    hyphens: auto;
    text-wrap: pretty;
    font-size: var(--text-xs);
  }

  & a {
    color: currentcolor !important;
    font-weight: var(--link-weight);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: var(--link-underline-offset, 0.125em);
    transition: var(--link-transition, var(--transition));

    &:hover {
      text-decoration: underline;
      text-decoration-style: solid;
    }
  }

  & *:not(select):not(a) {
    color: currentcolor;
    hyphens: auto;
    text-wrap: pretty;
  }
}

.sgh--request--submit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  --divider-gap: 1lh;

  & .checkbox--accept {
    display: grid;
    grid-template-columns: 1.125em 1fr;
    align-items: flex-start;
    gap: 1ch;

    & label {
      margin: 0;
      hyphens: auto;
      text-wrap: pretty;
      flex-grow: 1;
      line-height: var(--text-line-height);
      font-size: var(--text-xs);
    }

    & input {
      height: 1.125em;
    }
  }

  & .pricing--totals {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1ch;
    align-items: baseline;
    color: var(--action-dark) !important;
    line-height: var(--text-line-height);
    border: none !important;

    &>* {
      display: flex;
      flex-direction: column;
      font-size: var(--text-l);
      font-weight: var(--heading-font-weight) !important;
      gap: 0.375ch;

      &>*:not(.total) {
        font-size: var(--text-s) !important;
        color: var(--action-semi-dark) !important;
        font-weight: 400 !important;
        display: table !important;

        &:before {
          content: attr(data-value-before);
        }
      }
    }

    & .total-total {
      text-align: right;
    }

    &.request--reservation {
      & .total-nights {
        font-size: var(--text-s) !important;
        color: var(--action-semi-dark) !important;
        font-weight: 400 !important;

        &:before {
          content: attr(data-title-night);
          font-size: var(--text-l) !important;
          font-weight: var(--heading-font-weight) !important;
          color: var(--action-dark) !important;
        }

        &:empty::after {
          content: attr(data-value-night);
        }
      }
    }
  }
}

.sgh-rooms-list--single {
  display: grid;
  gap: 0;
  align-items: stretch !important;
  grid-template-columns: minmax(400px, 1fr) minmax(0, 2fr) !important;

  @media (max-width: 1080px) {
    display: flex !important;
    flex-direction: column;
    /*grid-template-columns: repeat(1, minmax(0, 1fr)) !important;*/
  }

  & .sgh-room--media {
    background: var(--white);

    /*&:after {
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background-image: url(../img/sgh-donation-bg--action.svg);
    z-index: 0;
    background-size: var(--text-s);
    background-repeat: repeat;
    background-position: center center;
    opacity: 0.15;
  }*/

    & .sgh--media--carousel {
      position: relative;
      z-index: 1;

      /* @NOTE HINZUGEFUEGT AB 25-5-20 */
      & .carousel {
        aspect-ratio: unset;
      }
    }

    /* @NOTE HINZUGEFUEGT AB 25-5-20 */
    /* 1. Um das Seitenverhältnis 4:3 sicherzustellen */
    & .slick-list {
      position: relative;
      width: 100%;
      padding-bottom: 75%;
      /* 4:3 Verhältnis = 3/4 = 75% */
      height: 0;
      overflow: hidden;
    }

    /* 2. Track und Bilder korrekt positionieren */
    .slick-track {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      display: flex;
    }

    .rooms-card-image {
      position: relative;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .rooms-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* @NOTE END */
  }

  @media (max-width: 1080px) {
    & .sgh-room--media {
      max-width: 100%;

      /* @NOTE AUSKOMMENTIERT AB 25-5-20 */
      /*& .slick-list {
      aspect-ratio: inherit;
      overflow: hidden;

      & .slick-track {
        height: 100%;

        & figure {
          aspect-ratio: inherit;

          & img {
            aspect-ratio: inherit;
          }
        }
      }
    } */
    }
  }

  /*
@media (min-width: 1080px) {
  & .sgh-room--media {
    height: 100%;

    & .slick-list {
      height: 100%;
      & .slick-track {
        height: 100%;
      }
    }
  }
} */
  & .sgh-room--below {
    grid-column: 1 / span all;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    gap: 1lh;
    padding: var(--space-m);
  }

  & .sgh-room--content {
    padding: var(--space-m);
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    /*border: 1px solid var(--neutral-light);*/
    gap: 1lh;

    & .sgh__roomlist__title {
      font-size: var(--text-xl);
      color: var(--action-dark);
      font-family: inherit;
    }

    & .sgh__roomlist__special {
      position: absolute;
      top: 0;
      right: 0;
      text-align: right;
      padding: 1ch 2ch;

      &+.sgh__roomlist__title {
        margin-top: 1ch;
      }
    }

    & .sgh__roomlist__keyfacts {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      column-gap: 3ch;
      row-gap: 1ch;

      & .keyfacts__single {
        display: flex;
        flex-wrap: nowrap;
        gap: 1ch;
        color: var(--action);
        line-height: 1;
        font-weight: 400;
        align-items: center;
      }
    }

    & .sgh__roomlist__desc {
      color: var(--action-dark);
      hyphens: auto;
      text-wrap: balance;
      flex-grow: 1;
    }
  }

  & .sgh-room--features {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1ch !important;
    row-gap: 1ch !important;
    line-height: 1;
    color: var(--action-dark);
    font-size: var(--text-xs);
    text-transform: uppercase;
    position: relative;
    justify-items: flex-end;
    align-items: flex-end;
    flex-grow: 1;



    /* @AB: 25-05-28 */

    &>.inner {
      display: flex;
      flex-wrap: wrap;
      column-gap: 1ch !important;
      row-gap: 1ch !important;
      line-height: 1;
      color: var(--action-dark);
      font-size: var(--text-xs);
      text-transform: uppercase;
      position: relative;
      justify-items: flex-end;
      align-items: flex-end;
      flex-grow: 1;


    }

    &.max-height {
      &>.inner {
        max-height: 4lh;
        overflow: hidden;
      }
    }

    &.expanded-features.max-height {
      &>.inner {
        max-height: unset;
      }
    }

    @media (min-width:960px) {
      &.only--desktop {
        display: flex;
      }

      &.only--mobile {

        display: none;
      }

    }

    @media (max-width:960px) {
      &.only--mobile {
        display: flex;
      }

      &.only--desktop {
        display: none;
      }
    }

    & .features__single {
      border-radius: var(--radius-xs);
      border: 1px solid;
      line-height: 1;
      padding: 0.75ch 1ch;
      font-size: 0.875em;

      &.hidden-feature {
        display: none;
      }
    }

    & .feature__button {
      display: block;
      position: relative;
      width: 100%;
      margin-top: 1ch;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;

      & button {
        background: unset;
        font-weight: var(--link-weight);
        color: var(--action);
        position: relative;
        z-index: 2;
        display: inline-flex;
        flex-wrap: wrap;
        align-items: flex-start;
        line-height: 1;
        gap: 0.375ch;

        & .name {
          text-decoration: underline;
          text-decoration-style: dotted;
          text-underline-offset: var(--link-underline-offset, 0.125em);
          transition: var(--link-transition, var(--transition));
        }

        &:hover {
          color: var(--action-hover);

          & .name {
            text-decoration-style: solid;
          }
        }
      }
    }

    &:not(.expanded-features) {
      & .feature__button {
        &:after {
          content: "";
          position: absolute;
          height: calc(100% + 5lh);
          width: 100%;
          bottom: 0;
          left: 0;
          background: linear-gradient(to top,
          var(--white) 2.5lh,
          transparent 100%);
        }
      }
    }
  }
}

.sgh--request-form {

  & select,
  & input[type="text"],
  & input[type="number"],
  & input[type="date"],
  & input[type="email"],
  & input[type="tel"],
  & [id^="form-field-birthday"],
  & textarea {
    border-radius: 4px;
    padding: 16px;
    background-color: var(--white);
    border: var(--divider);

    /* @AB : 25-05-28 */
    line-height: 1.2;
    font-size: 16px !important;
    color: var(--neutral);
    hyphens: auto;
    text-wrap: auto;
    white-space: normal;
    box-sizing: border-box;
    text-align: left;
    appearance: none;
    min-height: calc(1lh + 32px);
    /* nur in manchen Browsern hilfreich */

    &::placeholder {
      color: var(--neutral-semi-light);
    }

    & option {
      color: inherit;
    }

    &:focus {
      border-color: var(--action);
      box-shadow: inset 1px 1px 0 var(--action), inset -1px -1px 0 var(--action);
      /* @AB : 25-05-28 */
      font-size: 16px !important;
      box-sizing: border-box;
    }
  }

  & textarea {
    resize: vertical;
    min-height: 4lh !important;
  }

  & input:not([type="submit"]),
  & [id^="form-field-birthday"],
  & textarea,
  & select option {
    font-size: 16px !important;
    box-sizing: border-box;
  }
}

.sgh--request--terms-conditions {
  display: flex;
  flex-direction: column;
  --divider-gap: 1.375ch;

  & .sgh--request--terms-single {
    display: flex;
    flex-direction: column;
    gap: 1.375ch;
    color: var(--action-dark);

    & .term--heading {
      cursor: pointer;
      line-height: 1;
      font-size: var(--text-xs);
      display: flex;
      width: 100%;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1ch;

      &>span {
        font-weight: var(--link-weight);
        transition: var(--link-transition, var(--transition));
        flex-grow: 1;
        line-height: var(--text-line-height);
      }

      &:hover {
        &>span {
          color: var(--action);
        }
      }
    }

    & .term--content {
      font-size: var(--text-xs);
      display: none;

      & ul {
        padding-inline-start: 0;
        margin-inline-start: 1em;
      }
    }
  }
}

.sgh-room--freeCancelation {
  display: flex;
  flex-wrap: nowrap;
  gap: 1ch;
  line-height: 1;
  color: var(--action-dark);
  font-weight: var(--link-weight);
  align-items: flex-start;
  font-size: var(--text-xs);
}

.sgh-rooms--unavailable-header {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 1ch;
  padding: var(--space-m);
  color: var(--neutral);
  width: 100%;
}

.sgh-rooms--unavailable-toggle {
  background: unset;
  font-weight: var(--link-weight);
  color: var(--action);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375ch;
  line-height: 1;
}

.sgh-rooms--unavailable-toggle .name {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.25em;
}

.sgh-rooms--unavailable-toggle:hover .name {
  text-decoration-style: solid;
  color: var(--action-hover);
}