/* Seventh Sense Retreats — clean responsive layer
   Keeps original content, colors, transitions and sticky stack animation.
   This file only controls responsive sizing/flow. */

*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; max-width: 100%; }
body { width: 100%; max-width: 100%; margin: 0; }
img, video, iframe, svg { max-width: 100%; }

.two-column > *, .services-layout > *, .about-layout > *, .detail-layout > *,
.cart-layout > *, .guide-layout > *, .service-item > *, .detail-content-grid > *,
.detail-method-grid > *, .cookie-consent-inner > *, .eventfrog-direct-booking > * { min-width: 0; }

p, li, a, h1, h2, h3, .faq-question span, .legal-shell, .detail-copy,
.detail-content-section, .cart-item-copy { overflow-wrap: break-word; word-break: normal; }

/* Keep the fixed header clear of page content on every device. */
.brand-centered { z-index: 42; }
.header-actions { z-index: 43; }
.left-rail, .back-home-pill { z-index: 44; }

/* Content-heavy sticky slides must be allowed to grow. Sticky animation stays intact. */
.home-page .stack-slide:not(.hero-video-only) {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}
@supports (min-height: 100svh) {
  .home-page .stack-slide:not(.hero-video-only) { min-height: 100svh !important; }
}

/* ---------- OFFERS: DESKTOP / LAPTOP ---------- */
@media (min-width: 1200px) {
  .home-page .stack-slide.services-section {
    padding: 118px 0 72px !important;
    align-items: center !important;
  }
  .services-section .section-shell {
    padding-inline: clamp(42px, 4vw, 76px) !important;
  }
  .services-section .services-layout {
    display: grid !important;
    grid-template-columns: minmax(340px, .72fr) minmax(650px, 1.28fr) !important;
    gap: clamp(42px, 4vw, 72px) !important;
    align-items: center !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .services-section .services-images {
    width: min(100%, 660px) !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 22px !important;
    align-self: center !important;
  }
  .services-section .services-images .image-card {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 2.45 / 1 !important;
  }
  .services-section .services-images .image-card img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
  }
  .services-section .services-event-card {
    min-height: 92px !important; height: auto !important; padding-top: 0 !important;
  }
  .services-section .services-copy {
    min-height: 0 !important; height: auto !important; padding-top: 0 !important;
    justify-content: center !important; overflow: visible !important;
  }
  .services-section .eyebrow { margin-bottom: 12px !important; }
  .services-section .services-copy h2 {
    max-width: 980px !important;
    font-size: clamp(2.45rem, 3vw, 3.65rem) !important;
    line-height: 1.02 !important;
    margin-bottom: 14px !important;
  }
  .services-copy > p {
    max-width: 920px !important;
    font-size: clamp(.98rem, .28vw + .72rem, 1.08rem) !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
  }
  .services-section .service-list { margin-top: 14px !important; gap: 0 !important; }
  .services-section .service-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important; align-items: center !important; padding: 11px 0 12px !important;
  }
  .services-section .service-item h3 {
    font-size: clamp(1.08rem, .35vw + .82rem, 1.28rem) !important;
    line-height: 1.18 !important; margin-bottom: 3px !important;
  }
  .services-section .service-subtitle {
    font-size: clamp(.92rem, .2vw + .76rem, 1.02rem) !important;
    line-height: 1.32 !important; margin-bottom: 4px !important;
  }
  .services-section .service-item p {
    max-width: 820px !important;
    font-size: clamp(.90rem, .2vw + .72rem, 1rem) !important;
    line-height: 1.42 !important; margin-bottom: 3px !important;
  }
  .services-section .service-actions { gap: 9px !important; padding-top: 0 !important; flex-wrap: nowrap !important; }
  .services-section .service-item .mini-cta {
    min-height: 38px !important; padding: 7px 12px !important; font-size: .9rem !important;
  }
}

/* Short laptops: reduce space/image before reducing type. */
@media (min-width: 1200px) and (max-height: 900px) {
  .home-page .stack-slide.services-section { padding-top: 92px !important; padding-bottom: 30px !important; }
  .services-section .services-layout { grid-template-columns: minmax(310px, .65fr) minmax(680px, 1.35fr) !important; gap: 30px !important; }
  .services-section .services-images { width: min(100%, 590px) !important; gap: 14px !important; }
  .services-section .services-images .image-card { aspect-ratio: 2.72 / 1 !important; }
  .services-section .services-event-card { min-height: 70px !important; }
  .services-section .services-copy h2 { font-size: clamp(2.25rem, 2.7vw, 3.15rem) !important; margin-bottom: 8px !important; }
  .services-copy > p { font-size: .95rem !important; line-height: 1.34 !important; margin-bottom: 4px !important; }
  .services-section .service-list { margin-top: 7px !important; }
  .services-section .service-item { padding: 5px 0 6px !important; gap: 12px !important; }
  .services-section .service-item h3 { font-size: 1.08rem !important; margin-bottom: 1px !important; }
  .services-section .service-item p { font-size: .88rem !important; line-height: 1.28 !important; margin-bottom: 2px !important; }
  .services-section .service-subtitle { font-size: .9rem !important; line-height: 1.22 !important; margin-bottom: 2px !important; }
  .services-section .service-item .mini-cta { min-height: 33px !important; padding: 5px 9px !important; font-size: .84rem !important; }
}

/* Compact laptops and landscape tablets. */
@media (min-width: 981px) and (max-width: 1199px) {
  .home-page .stack-slide.services-section { padding: 112px 0 66px !important; align-items: flex-start !important; }
  .services-section .services-layout {
    grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr) !important;
    gap: 34px !important; align-items: start !important; min-height: 0 !important; height: auto !important;
  }
  .services-section .services-images {
    width: 100% !important; height: auto !important; min-height: 0 !important;
    display: flex !important; flex-direction: column !important; gap: 18px !important; margin-top: 56px !important;
  }
  .services-section .services-images .image-card { height: auto !important; aspect-ratio: 2.25/1 !important; }
  .services-section .services-event-card { min-height: 84px !important; }
  .services-section .services-copy { min-height: 0 !important; padding-top: 0 !important; }
  .services-section .services-copy h2 { max-width: none !important; font-size: clamp(2.1rem, 3.5vw, 2.85rem) !important; line-height: 1.03 !important; }
  .services-copy > p, .services-section .service-item p { font-size: .95rem !important; line-height: 1.45 !important; }
  .services-section .service-item { grid-template-columns: 1fr !important; gap: 8px !important; padding: 12px 0 !important; }
  .services-section .service-actions { justify-content: flex-start !important; padding-top: 0 !important; flex-wrap: wrap !important; }
}

/* ---------- TABLET / PHONE ---------- */
@media (max-width: 1100px) {
  .social-icon-group.header-socials { display: none !important; }
}

@media (max-width: 980px) {
  :root { --site-gutter: clamp(20px, 4.5vw, 34px); }
  .section-shell, .zip-gallery-wrap, .reviews-shell, .gallery-slider-shell,
  .elements-section .elements-shell, .services-section .section-shell {
    padding-left: var(--site-gutter) !important; padding-right: var(--site-gutter) !important;
  }
  .two-column, .services-layout, .detail-layout, .cart-layout, .guide-layout {
    grid-template-columns: 1fr !important;
  }
  .home-page .stack-slide:not(.hero-video-only) {
    align-items: flex-start !important;
    padding-top: 108px !important; padding-bottom: 68px !important;
  }
  .services-section .services-layout { gap: 34px !important; min-height: 0 !important; height: auto !important; }
  .services-section .services-images {
    width: min(100%, 780px) !important; height: auto !important; min-height: 0 !important;
    display: flex !important; flex-direction: column !important; gap: 16px !important; margin: 0 auto !important;
  }
  .services-section .services-images .image-card { height: auto !important; min-height: 0 !important; aspect-ratio: 16/7 !important; }
  .services-section .services-event-card { min-height: 76px !important; padding: 0 !important; }
  .services-section .services-copy { min-height: 0 !important; height: auto !important; padding: 0 !important; }
  .services-section .services-copy h2 { max-width: 780px !important; font-size: clamp(2.25rem, 6vw, 3.15rem) !important; line-height: 1.04 !important; }
  .services-copy > p, .services-section .service-item p { font-size: clamp(1rem, 1.5vw, 1.08rem) !important; line-height: 1.55 !important; }
  .services-section .service-item { grid-template-columns: 1fr !important; gap: 10px !important; padding: 15px 0 !important; }
  .services-section .service-item h3 { font-size: 1.25rem !important; }
  .services-section .service-subtitle { font-size: 1rem !important; line-height: 1.4 !important; }
  .services-section .service-actions { justify-content: flex-start !important; padding-top: 0 !important; flex-wrap: wrap !important; }

  .about-layout { gap: 34px !important; }
  .about-media { height: auto !important; min-height: 0 !important; }
  .about-main-image { height: auto !important; aspect-ratio: 16/10 !important; }
  .about-video-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .review-video-grid { width: 100% !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .benefits-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .elements-grid.journey-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .zip-gallery { width: 100% !important; max-width: 100% !important; height: min(60vh, 540px) !important; }

  .detail-main, .cart-main { padding-top: 92px !important; }
  .detail-section, .cart-section { padding-top: 54px !important; padding-bottom: 72px !important; }
  .detail-layout { min-height: 0 !important; gap: 34px !important; }
  .detail-image-wrap { min-height: 0 !important; height: auto !important; aspect-ratio: 16/10 !important; }
  .detail-copy { align-self: start !important; }
  .detail-extra, .detail-content-grid, .detail-method-grid { grid-template-columns: 1fr !important; }
  .guide-detail-section { min-height: 0 !important; padding-top: 48px !important; padding-bottom: 72px !important; align-items: flex-start !important; }
  .guide-layout { gap: 32px !important; }
  .legal-shell, .cart-shell, .detail-content-shell { width: 100% !important; max-width: 100% !important; }
  .cart-item { grid-template-columns: 110px minmax(0,1fr) auto !important; }
}

@media (max-width: 720px) {
  :root { --site-gutter: 16px; }
  .site-header { padding-top: 8px !important; }
  .brand-centered { top: 9px !important; }
  .brand img { width: 62px !important; height: auto !important; }
  .left-rail { top: 13px !important; left: 12px !important; }
  .rail-icon { width: 36px !important; height: 36px !important; }
  .rail-icon svg { width: 22px !important; height: 22px !important; }

  .home-page .header-actions {
    top: 10px !important; right: 12px !important; width: 108px !important;
    display: grid !important; grid-template-columns: 62px 40px !important; gap: 6px !important;
  }
  .home-page .header-actions > .header-pill,
  .home-page .header-actions > .sound-toggle-inline,
  .home-page .header-actions > .cart-icon-btn {
    min-width: 0 !important; width: 100% !important; min-height: 36px !important; height: 36px !important;
    padding: 6px 7px !important; font-size: .72rem !important; line-height: 1 !important;
  }

  .detail-page .back-home-pill, .cart-page .back-home-pill {
    top: 12px !important; left: 12px !important; width: 38px !important; min-width: 38px !important;
    height: 38px !important; padding: 8px !important;
  }
  .detail-page .back-home-pill span, .cart-page .back-home-pill span { display: none !important; }
  .detail-page .header-actions, .cart-page .header-actions {
    top: 11px !important; right: 12px !important; gap: 6px !important;
  }
  .detail-page .header-actions .header-pill, .cart-page .header-actions .header-pill { display: none !important; }
  .detail-page .cart-icon-btn, .cart-page .cart-icon-btn { min-width: 38px !important; width: 38px !important; height: 38px !important; padding: 8px !important; }

  .home-page .stack-slide:not(.hero-video-only) { padding-top: 94px !important; padding-bottom: 58px !important; }
  .services-section .services-layout { gap: 28px !important; }
  .services-section .services-images .image-card { aspect-ratio: 16/9 !important; }
  .services-section .services-event-card { min-height: 68px !important; }
  .services-event-btn { padding: 13px 18px !important; font-size: .96rem !important; }
  .services-section .services-copy h2 { font-size: clamp(2rem, 9vw, 2.65rem) !important; line-height: 1.04 !important; }
  .services-copy > p, .services-section .service-item p,
  .copy-block p, .section-heading p, .faq-answer p, .legal-item p,
  .detail-subsection p, .detail-subsection li, .detail-copy p, .site-footer p {
    font-size: 1rem !important; line-height: 1.58 !important;
  }
  .services-section .service-item { padding: 14px 0 !important; }
  .services-section .service-actions { width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .services-section .service-actions .mini-cta { min-width: 0 !important; width: 100% !important; white-space: normal !important; min-height: 42px !important; }

  .about-video-grid { gap: 7px !important; }
  .about-video-overlay strong { font-size: .7rem !important; }
  .review-video-grid { grid-template-columns: 1fr !important; }
  .benefits-grid { grid-template-columns: 1fr !important; }
  .elements-grid.journey-grid { grid-template-columns: 1fr !important; }
  .slider-card { flex-basis: min(82vw, 420px) !important; height: auto !important; aspect-ratio: 4/3 !important; }
  .zip-gallery { height: 56vh !important; min-height: 360px !important; gap: 7px !important; }
  .faq-question { padding: 18px 0 !important; gap: 12px !important; }
  .faq-question > span:first-child { min-width: 0 !important; }

  .detail-main, .cart-main { padding-top: 78px !important; }
  .detail-section, .cart-section { padding-top: 38px !important; padding-bottom: 58px !important; }
  .detail-image-wrap { aspect-ratio: 4/3 !important; }
  .detail-copy h1, .legal-shell h1, .cart-heading h1, .guide-copy h1 { font-size: clamp(2.2rem, 11vw, 3.2rem) !important; line-height: 1 !important; }
  .hero-actions, .guide-switcher, .eventfrog-placeholder-actions { width: 100% !important; flex-wrap: wrap !important; }
  .hero-actions > *, .guide-switcher > * { max-width: 100% !important; }
  .cart-item { grid-template-columns: 1fr !important; gap: 12px !important; }
  .cart-item-thumb { width: 100% !important; height: auto !important; aspect-ratio: 16/8 !important; }
  .cart-item-meta { align-items: flex-start !important; }
  .cookie-consent { left: 12px !important; right: 12px !important; max-width: calc(100% - 24px) !important; }
  .cookie-consent-inner { grid-template-columns: 1fr !important; }
  .cookie-consent-actions { width: 100% !important; }
  .cookie-consent-actions button { flex: 1 1 100% !important; }
  .eventfrog-calendar-embed, .eventfrog-calendar-embed iframe { min-height: 580px !important; height: 580px !important; }
}

@media (max-width: 420px) {
  :root { --site-gutter: 14px; }
  .brand img { width: 56px !important; }
  .home-page .header-actions { right: 8px !important; width: 102px !important; grid-template-columns: 58px 38px !important; }
  .left-rail { left: 8px !important; }
  .services-section .services-copy h2 { font-size: clamp(1.9rem, 9vw, 2.35rem) !important; }
  .services-section .service-actions { grid-template-columns: 1fr !important; }
  .about-video-overlay strong { display: none !important; }
}

/* Prevent accidental horizontal expansion from wide decorative/embedded items. */
.auto-slider, .gallery-slider-shell, .review-video-grid, .zip-gallery,
.eventfrog-embed, .guide-video-shell, .detail-image-wrap { max-width: 100% !important; }

/* Narrow tablets: keep the centered logo clear; these links remain available in the menu. */
@media (min-width: 721px) and (max-width: 820px) {
  .home-page .header-actions > .header-pill,
  .detail-page .header-actions > .header-pill,
  .cart-page .header-actions > .header-pill { display: none !important; }
  .header-actions { right: 20px !important; gap: 8px !important; }
}

/* Prefer proper German hyphenation in headings instead of arbitrary letter breaks. */
h1, h2, h3 { overflow-wrap: normal !important; word-break: normal !important; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 720px) {
  .legal-shell h1 { overflow-wrap: anywhere !important; }
}

/* ============================================================
   ABOUT / ÜBER UNS — complete responsive layout repair
   The HTML uses about-media / about-video-* / mini-profile-link.
   These rules give those elements a bounded, responsive layout so
   media can never stretch the grid and push the copy off-screen.
   ============================================================ */
.about-section .about-layout {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
  gap: clamp(34px, 4.5vw, 76px) !important;
  align-items: center !important;
}

.about-section .left-copy {
  min-width: 0;
  max-width: 680px;
  align-self: center;
  justify-self: start;
}

.about-section .left-copy h2 {
  max-width: 13ch;
}

.about-section .mini-profile-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px !important;
  margin-top: 22px !important;
  width: 100%;
}

.about-section .mini-profile-link {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
  padding: 12px 13px;
  border: 1px solid rgba(255,255,255,0.24);
  color: inherit;
  background: rgba(255,255,255,0.025);
  transition: transform .25s ease, opacity .25s ease, background .25s ease;
}

.about-section .mini-profile-link:hover,
.about-section .mini-profile-link:focus-visible {
  transform: translateY(-1px);
  opacity: .92;
  background: rgba(255,255,255,0.055);
}

.about-section .mini-profile-link strong {
  display: block;
  font-size: clamp(.88rem, .35vw + .62rem, 1rem);
  line-height: 1.24;
}

.about-section .mini-profile-link span {
  display: block;
  border: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  opacity: .84;
  font-size: clamp(.76rem, .24vw + .58rem, .9rem);
  line-height: 1.35;
}

.about-section .about-media {
  min-width: 0;
  width: 100%;
  max-width: 820px;
  justify-self: end;
  align-self: center;
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
}

.about-section .about-main-image {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.about-section .about-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.about-section .about-video-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.about-section .about-video-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(0,0,0,.16);
}

.about-section .about-video-card img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 34%;
  transform: translateZ(0);
}

.about-section .about-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  color: #fff;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.56) 100%);
  pointer-events: none;
}

.about-section .about-video-play {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  font-size: .72rem;
  line-height: 1;
}

.about-section .about-video-overlay strong {
  min-width: 0;
  font-size: clamp(.75rem, .26vw + .57rem, .9rem);
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}

@media (min-width: 1200px) {
  .home-page .stack-slide.about-section {
    padding-top: clamp(112px, 11vh, 132px) !important;
    padding-bottom: clamp(56px, 6vh, 78px) !important;
  }
  .about-section .left-copy h2 {
    font-size: clamp(2.25rem, 3vw, 3.55rem) !important;
    line-height: 1.03 !important;
    margin-bottom: 18px !important;
  }
  .about-section .left-copy > p {
    font-size: clamp(.94rem, .28vw + .66rem, 1.06rem) !important;
    line-height: 1.56 !important;
    margin-bottom: 12px !important;
  }
}

/* Short laptops: retain readable type; reduce media/spacing instead of shrinking text. */
@media (min-width: 981px) and (max-height: 820px) {
  .home-page .stack-slide.about-section {
    padding-top: 100px !important;
    padding-bottom: 50px !important;
  }
  .about-section .about-layout {
    gap: clamp(30px, 3.5vw, 54px) !important;
  }
  .about-section .left-copy h2 {
    font-size: clamp(2rem, 2.6vw, 3rem) !important;
    margin-bottom: 14px !important;
  }
  .about-section .left-copy > p {
    font-size: clamp(.9rem, .22vw + .7rem, 1rem) !important;
    line-height: 1.48 !important;
    margin-bottom: 9px !important;
  }
  .about-section .mini-profile-grid {
    margin-top: 16px !important;
    gap: 8px !important;
  }
  .about-section .mini-profile-link {
    padding: 9px 10px;
  }
  .about-section .about-media {
    max-width: 720px;
    gap: 9px;
  }
  .about-section .about-video-grid {
    gap: 8px;
  }
}

/* Tablet: copy first, media second. No fixed heights; natural page scrolling. */
@media (max-width: 980px) {
  .about-section .about-layout {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    align-items: start !important;
  }
  .about-section .left-copy {
    max-width: 820px;
    width: 100%;
    justify-self: start;
  }
  .about-section .left-copy h2 {
    max-width: 15ch;
    font-size: clamp(2.25rem, 6vw, 3.45rem) !important;
    line-height: 1.04 !important;
  }
  .about-section .about-media {
    max-width: 820px;
    width: 100%;
    justify-self: center;
  }
  .about-section .about-main-image {
    aspect-ratio: 16 / 9 !important;
  }
  .about-section .about-video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .about-section .left-copy h2 {
    max-width: 100%;
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
  }
  .about-section .mini-profile-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }
  .about-section .mini-profile-link {
    padding: 11px 12px;
  }
  .about-section .about-media {
    gap: 9px;
  }
  .about-section .about-main-image {
    aspect-ratio: 4 / 3 !important;
  }
  .about-section .about-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .about-section .about-video-card {
    aspect-ratio: 16 / 10;
  }
  .about-section .about-video-overlay {
    padding: 8px;
  }
  .about-section .about-video-overlay strong {
    display: block !important;
    font-size: .78rem !important;
  }
}

@media (max-width: 480px) {
  .about-section .about-video-grid {
    grid-template-columns: 1fr !important;
  }
  .about-section .about-video-card {
    aspect-ratio: 16 / 9;
  }
  .about-section .about-video-overlay strong {
    font-size: .84rem !important;
  }
}