:root {
  --page-wrapper-pt: 120px;
  --page-wrapper-pb: 120px;
  --page-wrapper-py: var(--page-wrapper-pt) 0 var(--page-wrapper-pb);
}

.httxt {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
table td {
  padding: 0.25rem;
  border: 1px solid var(--color-on-background);
}

main {
  margin: var(--page-wrapper-py) 0;
}

.content {
  position: relative;
  width: 100%;
}
.content-hidden {
  transition: var(--transition-default) all;
}
.content-hidden.hide {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  opacity: 0;
  max-height: 0;
}
.content-center {
  display: flex;
  flex-direction: column;
  place-content: center;
}
.content-bottom {
  display: flex;
  flex-direction: column;
  place-content: flex-end;
  height: 100%;
}

.hidden {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  opacity: 0;
  transition: var(--transition-default) all;
}

.sticky {
  position: sticky;
  top: 0;
}
.sticky--bottom {
  top: unset;
  bottom: 0;
}


/* =============================================================
   Booking Steps
   ============================================================= */
.list-booking-steps {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--number-space-4);
  counter-reset: booking-step;
}
@media (min-width: 576px) {
  .list-booking-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .list-booking-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.booking-step--item {
  display: flex;
  flex-direction: column;
  gap: var(--number-space-2);
  padding: var(--number-space-4) !important;
  border-radius: var(--number-corner-2);
  background: var(--color-static-background-light-primary);
  list-style: none;
}
.booking-step--item p {
  margin: 0;
  line-height: var(--text-line-height-default);
}
.booking-step--number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--number-corner-8);
  background: var(--color-key-primary);
  color: #fff;
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
}


/* =============================================================
   Content USP list (Finca vs. Hotel / Kosten)
   ============================================================= */
.list-content-usp {
  display: flex;
  flex-direction: column;
  gap: var(--number-space-2);
  padding: 0;
}
.list-content-usp li {
  position: relative;
  padding-left: 1.25rem;
  line-height: var(--text-line-height-default);
}
.list-content-usp li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-key-primary);
  font-family: var(--font-family-bold);
}


/* =============================================================
   Travel Seasons
   ============================================================= */
.list-travel-seasons {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--number-space-4);
  width: 100%;
}
@media (min-width: 576px) {
  .list-travel-seasons {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .list-travel-seasons {
    grid-template-columns: repeat(4, 1fr);
  }
}

.travel-season--item {
  padding: var(--number-space-4);
  border-radius: var(--number-corner-2);
  background: var(--color-static-background-light-primary);
}
.travel-season--item h4 {
  margin-top: 0;
  margin-bottom: var(--number-space-2);
  color: var(--color-key-primary);
}
.travel-season--item p {
  margin: 0;
  font-size: var(--font-size-small);
  line-height: var(--text-line-height-default);
}


/* =============================================================
   SEO Links
   ============================================================= */
.section-seo-links {
  border-top: 1px solid var(--color-static-background-light-variant-30);
}

.seo-links-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--number-space-6) var(--number-space-5);
  padding: var(--number-space-5) 0;
}
@media (min-width: 768px) {
  .seo-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .seo-links-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.seo-links-col--headline {
  margin-top: 0;
  margin-bottom: var(--number-space-2);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  color: var(--color-static-on-background-light-neutral);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.seo-links-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--number-space-1);
  padding: 0;
  margin: 0;
}
.seo-links-col ul li a {
  font-size: var(--font-size-small);
  line-height: var(--text-line-height-default);
  color: var(--color-static-on-background-light-variant-10);
  text-decoration: none;
}
.seo-links-col ul li a:hover {
  color: var(--color-key-primary);
  text-decoration: underline;
}