/* Top-of-page stack behavior:
   the Offers section slides over the hero video, then About continues in normal flow.
   FAQ keeps its existing sticky behavior. */
.home-page .stack-slide {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  overflow: visible !important;
}

.home-page .stack-slide.faq-section {
  position: sticky !important;
  top: 0 !important;
}

.home-page .stack-slide.hero,
.home-page .stack-slide.hero-video-only {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.home-page .stack-slide.services-section {
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
}

.home-page .stack-slide.about-section {
  position: relative !important;
  top: auto !important;
  z-index: 3 !important;
}

/* Strong, visible, hardware-accelerated reveal motions. JavaScript removes
   these temporary classes after each reveal, preserving existing hover effects. */
.motion-item {
  opacity: 0 !important;
  filter: blur(8px) !important;
  transition-property: opacity, transform, filter !important;
  transition-duration: 920ms, 1080ms, 760ms !important;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
  transition-delay: var(--motion-delay, 0ms) !important;
  will-change: opacity, transform, filter;
}

.motion-left {
  transform: translate3d(-110px, 0, 0) rotate(-1.2deg) scale(.975) !important;
}

.motion-right {
  transform: translate3d(110px, 0, 0) rotate(1.2deg) scale(.975) !important;
}

.motion-up {
  transform: translate3d(0, 86px, 0) scale(.975) !important;
}

.motion-scale {
  transform: translate3d(0, 34px, 0) scale(.91) !important;
}

.motion-fade {
  transform: scale(1.08) !important;
}

.motion-item.motion-in {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translate3d(0, 0, 0) rotate(0) scale(1) !important;
}

.motion-item,
.motion-item > * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

.home-page .stack-slide > *,
.section-shell,
.two-column,
.services-layout,
.about-layout,
.gallery-slider-shell,
.reviews-shell,
.elements-shell,
.faq-shell {
  min-width: 0;
  max-width: 100%;
}

/* Compact, centered FAQ instead of a full-width FAQ wall. */
#fragen.faq-section {
  min-height: 100vh !important;
  min-height: 100svh !important;
  height: auto !important;
  padding: clamp(104px, 9vw, 138px) 0 clamp(68px, 7vw, 104px) !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

#fragen .faq-shell {
  width: min(calc(100% - (2 * var(--site-gutter, 24px))), 980px) !important;
  max-width: 980px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

#fragen .section-heading {
  width: min(100%, 680px) !important;
  margin: 0 auto clamp(28px, 4vw, 46px) !important;
  text-align: center !important;
}

#fragen .section-heading .eyebrow {
  justify-content: center !important;
}

#fragen .faq-list {
  width: 100% !important;
  max-width: 980px !important;
  margin-inline: auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: clamp(30px, 4vw, 58px) !important;
  row-gap: 0 !important;
  align-items: start !important;
}

#fragen .faq-item {
  min-width: 0 !important;
  align-self: start !important;
}

#fragen .faq-question {
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}

#fragen .faq-question > span:first-child,
#fragen .faq-answer,
#fragen .faq-answer > p {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

/* Final no-clipping layer for every viewport and content length. */
.home-page .stack-slide:not(.hero-video-only),
.detail-section,
.guide-detail-section,
.cart-section,
.detail-content-section,
.site-footer {
  height: auto !important;
  overflow: visible !important;
}

.section-shell,
.detail-layout,
.guide-layout,
.cart-layout,
.service-item,
.services-copy,
.about-media,
.benefits-grid,
.review-video-grid,
.elements-grid,
.faq-list {
  min-width: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

.copy-block,
.section-heading,
.detail-copy,
.guide-copy,
.legal-shell,
.cart-shell,
.faq-question,
.faq-answer {
  overflow-wrap: break-word;
  word-break: normal;
}

.service-actions,
.hero-actions,
.guide-switcher,
.eventfrog-placeholder-actions {
  max-width: 100%;
  flex-wrap: wrap;
}

/* Reliable menu interaction above every video, section and consent layer. */
.left-rail {
  z-index: 10030 !important;
  pointer-events: auto !important;
}

#menu-toggle {
  position: relative !important;
  z-index: 10031 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 9px !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation;
}

#menu-toggle svg {
  width: 24px !important;
  height: 24px !important;
  pointer-events: none !important;
}

#side-drawer {
  z-index: 10040 !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto !important;
}

#drawer-backdrop {
  z-index: 10035 !important;
}

body.menu-open {
  overflow: hidden !important;
}

.drawer-close,
.drawer-links a {
  position: relative;
  z-index: 1;
  pointer-events: auto !important;
  touch-action: manipulation;
}

.drawer-close {
  min-width: 44px !important;
  min-height: 44px !important;
  cursor: pointer !important;
}

.drawer-links a {
  display: flex !important;
  align-items: center !important;
  min-height: 46px !important;
}

.hero-bg-video,
.hero-video-only video,
.hero-video-only iframe {
  pointer-events: none !important;
}

#angebote,
#termine,
#ueber-uns,
#momente,
#begleitung,
#elemente,
#wirkung,
#fragen {
  scroll-margin-top: 84px;
}

@media (max-width: 980px) {
  .home-page .stack-slide.services-section,
  .home-page .stack-slide.faq-section {
    align-items: flex-start !important;
  }

  .motion-left {
    transform: translate3d(-64px, 0, 0) scale(.98) !important;
  }

  .motion-right {
    transform: translate3d(64px, 0, 0) scale(.98) !important;
  }

  .motion-up {
    transform: translate3d(0, 62px, 0) scale(.98) !important;
  }

  .motion-item.motion-in {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  #fragen.faq-section {
    align-items: flex-start !important;
    padding-top: clamp(96px, 12vw, 124px) !important;
    padding-bottom: clamp(64px, 9vw, 90px) !important;
  }

  #fragen .faq-shell {
    width: min(calc(100% - (2 * var(--site-gutter, 24px))), 760px) !important;
    max-width: 760px !important;
  }

  #fragen .faq-list {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 760px !important;
  }
}

@media (max-width: 720px) {
  .home-page .header-actions {
    max-width: calc(100vw - 92px) !important;
  }

  .motion-item {
    filter: blur(5px) !important;
    transition-duration: 760ms, 880ms, 620ms !important;
  }

  .motion-left {
    transform: translate3d(-46px, 28px, 0) scale(.985) !important;
  }

  .motion-right {
    transform: translate3d(46px, 28px, 0) scale(.985) !important;
  }

  .motion-up {
    transform: translate3d(0, 54px, 0) scale(.985) !important;
  }

  .motion-scale {
    transform: translate3d(0, 24px, 0) scale(.94) !important;
  }

  .motion-item.motion-in {
    filter: blur(0) !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  #fragen.faq-section {
    min-height: 0 !important;
    padding-top: 94px !important;
    padding-bottom: 64px !important;
  }

  #fragen .faq-shell {
    width: calc(100% - 32px) !important;
    max-width: 640px !important;
  }

  #fragen .section-heading {
    margin-bottom: 24px !important;
  }

  #fragen .faq-question {
    padding: 18px 0 !important;
    gap: 12px !important;
  }

  #fragen .faq-answer > p {
    padding-right: 4px !important;
  }
}

@media (max-width: 380px) {
  #fragen .faq-shell {
    width: calc(100% - 24px) !important;
  }

  .section-shell,
  .gallery-slider-shell,
  .reviews-shell,
  .elements-shell {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-item,
  .motion-item.motion-in {
    filter: none !important;
    transition-duration: 340ms !important;
  }

  .motion-item {
    transform: translate3d(0, 18px, 0) !important;
  }

  .motion-item.motion-in {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }
}


/* ===== 2026-09-17 layout pass 2: tighter typography, larger side margins,
   gallery/profile image framing, swapped section images, menu cleanup ===== */
:root {
  --site-gutter: clamp(24px, 4.2vw, 72px);
  --content-max: 1320px;
  --title-h1-size: clamp(2rem, 4.15vw, 3.6rem);
  --title-h2-size: clamp(1.5rem, 2.9vw, 2.35rem);
}

.section-shell,
.eventfrog-shell,
.eventfrog-booking-shell,
.legal-shell,
.cart-shell {
  width: min(calc(100% - (2 * var(--site-gutter))), var(--content-max)) !important;
  max-width: var(--content-max) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

.zip-gallery-wrap {
  width: min(calc(100% - (2 * var(--site-gutter))), 1520px) !important;
  max-width: 1520px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

.zip-gallery {
  width: 100% !important;
}

h1,
.hero h1,
.detail-copy h1,
.guide-copy h1,
.cart-heading h1,
.legal-shell h1 {
  font-size: var(--title-h1-size) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
  font-weight: 300 !important;
}

h2,
.section-heading h2,
.services-copy h2,
.about-section .left-copy h2,
.elements-section .elements-heading h2,
.detail-content-section h2,
.eventfrog-heading h2,
.profile-copy-panel h2,
.cart-summary h2,
.legal-item h2,
.detail-subsection h2 {
  font-size: var(--title-h2-size) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.018em !important;
  font-weight: 300 !important;
}

.about-section .left-copy h2,
.services-section .services-copy h2,
.section-heading.centered h2,
.elements-section .elements-heading h2,
.benefits-section .section-heading h2,
.faq-section .section-heading h2 {
  max-width: 18ch !important;
}

p,
li,
.faq-question span:first-child,
.service-subtitle,
.profile-role,
.detail-copy p,
.guide-copy p,
.cart-shell p,
.legal-shell p {
  font-size: clamp(0.96rem, 0.7vw + 0.72rem, 1.04rem) !important;
}

.home-page .services-layout,
.home-page .about-layout,
.detail-layout,
.guide-layout,
.cart-layout,
.profiles-layout {
  gap: clamp(28px, 4vw, 64px) !important;
}

/* Better image framing */
.about-section .about-video-card img,
.youtube-play-card img,
.guide-marco img,
.zip-photo-card.guide-marco img {
  object-position: center 16% !important;
}

.guide-tikvah img,
.zip-photo-card.guide-tikvah img,
.about-section .about-video-card:nth-child(2) img,
.youtube-play-card[href*="x1vztE-32E8"] img {
  object-position: center 30% !important;
}

.guide-jonas img,
.zip-photo-card.guide-jonas img,
.about-section .about-video-card:nth-child(3) img,
.youtube-play-card[href*="ilhAFJA9bG8"] img {
  object-position: 36% 28% !important;
}

.zip-photo-card img {
  transform: scale(1.02) !important;
}

.zip-photo-card:hover img,
.zip-photo-card:focus-visible img {
  transform: scale(1) !important;
}

.guide-detail-section,
.detail-section {
  padding-top: clamp(108px, 10vw, 138px) !important;
  padding-bottom: clamp(56px, 6vw, 88px) !important;
}

.about-section .about-main-image,
.about-section .about-video-card,
.services-images .image-card,
.zip-photo-card,
.youtube-play-card {
  overflow: hidden !important;
}

/* Cleaner anchor navigation */
html {
  scroll-padding-top: 88px;
}

.home-page section[id],
.detail-section[id],
.guide-detail-section[id],
.eventfrog-booking-shell[id] {
  scroll-margin-top: 88px !important;
}

/* More balanced mobile spacing and no excess green bands */
@media (max-width: 980px) {
  :root {
    --site-gutter: clamp(18px, 4.2vw, 28px);
    --title-h1-size: clamp(1.82rem, 7.4vw, 2.65rem);
    --title-h2-size: clamp(1.32rem, 5.4vw, 1.88rem);
  }

  .home-page .stack-slide.about-section,
  .home-page .stack-slide.gallery-slider-section,
  .home-page .stack-slide.reviews-section,
  .home-page .stack-slide.zip-section,
  .home-page .stack-slide.elements-section,
  .home-page .stack-slide.benefits-section,
  .home-page .stack-slide.faq-section {
    padding-top: clamp(44px, 7vw, 78px) !important;
    padding-bottom: clamp(44px, 7vw, 78px) !important;
  }

  .about-section .about-video-grid {
    gap: 10px !important;
  }

  .zip-gallery {
    height: min(62vh, 580px) !important;
  }
}

@media (max-width: 720px) {
  :root {
    --site-gutter: 18px;
  }

  .zip-gallery-wrap,
  .section-shell,
  .eventfrog-shell,
  .eventfrog-booking-shell,
  .legal-shell,
  .cart-shell {
    width: calc(100% - (2 * var(--site-gutter))) !important;
  }

  .left-rail {
    width: calc(100% - (2 * var(--site-gutter))) !important;
    left: var(--site-gutter) !important;
    right: var(--site-gutter) !important;
  }

  .home-page .stack-slide.about-section,
  .home-page .stack-slide.gallery-slider-section,
  .home-page .stack-slide.reviews-section,
  .home-page .stack-slide.zip-section,
  .home-page .stack-slide.elements-section,
  .home-page .stack-slide.benefits-section,
  .home-page .stack-slide.faq-section,
  .guide-detail-section,
  .detail-section {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .zip-gallery {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .zip-photo-card {
    min-height: 280px !important;
    flex: none !important;
  }

  .zip-gallery:hover .zip-photo-card:not(:hover) {
    flex: none !important;
    opacity: 1 !important;
  }

  .zip-card-copy {
    padding: 14px !important;
  }

  .about-section .about-main-image {
    aspect-ratio: 4 / 3 !important;
  }

  .about-section .about-video-card,
  .youtube-play-card {
    aspect-ratio: 4 / 3 !important;
  }

  .youtube-play-card img,
  .about-section .about-video-card img,
  .zip-photo-card.guide-marco img {
    object-position: center 14% !important;
  }

  .faq-shell,
  #fragen .faq-shell {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  :root {
    --site-gutter: 16px;
  }

  .zip-photo-card {
    min-height: 250px !important;
  }

  .about-section .about-video-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ===== 2026-09-17 publish pass: title line, boldness, moments alignment ===== */
h1,
h2,
.hero h1,
.detail-copy h1,
.guide-copy h1,
.cart-heading h1,
.legal-shell h1,
.section-heading h2,
.services-copy h2,
.about-section .left-copy h2,
.elements-section .elements-heading h2,
.detail-content-section h2,
.eventfrog-heading h2,
.profile-copy-panel h2,
.cart-summary h2,
.legal-item h2,
.detail-subsection h2 {
  font-weight: 500 !important;
}

.services-section .services-copy h2 {
  font-size: clamp(1.56rem, 1.72vw, 2rem) !important;
  line-height: 1.14 !important;
  max-width: none !important;
}

.gallery-slider-section .section-heading h2 {
  font-size: clamp(2rem, 2.4vw, 2.8rem) !important;
  line-height: 1.08 !important;
}

.about-section .left-copy h2,
.services-section .services-copy h2,
.section-heading.centered h2,
.elements-section .elements-heading h2,
.benefits-section .section-heading h2,
.faq-section .section-heading h2 {
  max-width: none !important;
}

.gallery-slider-shell {
  overflow: visible !important;
}

.auto-slider {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  mask-image: none !important;
}

.auto-slider-track {
  justify-content: flex-start !important;
  gap: 14px !important;
}

.slider-card {
  flex: 0 0 clamp(230px, 24vw, 420px) !important;
}

@media (min-width: 981px) {
  .services-section .services-copy h2,
  .about-section .left-copy h2,
  .gallery-slider-section .section-heading h2,
  .reviews-section .section-heading h2,
  .elements-section .elements-heading h2,
  .benefits-section .section-heading h2,
  .faq-section .section-heading h2,
  .eventfrog-heading h2 {
    white-space: nowrap !important;
  }
}

@media (max-width: 980px) {
  .services-section .services-copy h2,
  .about-section .left-copy h2,
  .gallery-slider-section .section-heading h2,
  .reviews-section .section-heading h2,
  .elements-section .elements-heading h2,
  .benefits-section .section-heading h2,
  .faq-section .section-heading h2,
  .eventfrog-heading h2 {
    white-space: normal !important;
  }

  .services-section .services-copy h2 {
    font-size: clamp(1.38rem, 4.5vw, 1.78rem) !important;
  }

  .gallery-slider-section .section-heading h2 {
    font-size: clamp(1.48rem, 6.2vw, 2.02rem) !important;
  }

  .auto-slider {
    overflow: hidden !important;
  }
}


/* ===== 2026-09-17 responsive polish final ===== */
/* Reduce oversized green gaps and compact every section rhythm */
.home-page .stack-slide.services-section,
.home-page .stack-slide.about-section,
.home-page .stack-slide.gallery-slider-section,
.home-page .stack-slide.reviews-section,
.home-page .stack-slide.zip-section,
.home-page .stack-slide.elements-section,
.home-page .stack-slide.benefits-section,
.home-page .stack-slide.faq-section {
  padding-top: clamp(26px, 4.2vw, 54px) !important;
  padding-bottom: clamp(26px, 4.2vw, 54px) !important;
}

/* Make offers/services section feel fuller and better balanced */
.services-section .section-shell {
  width: min(calc(100% - (2 * var(--site-gutter))), 1380px) !important;
  max-width: 1380px !important;
}

.services-section .services-layout {
  grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr) !important;
  gap: clamp(30px, 4vw, 60px) !important;
  align-items: start !important;
}

.services-section .services-images {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  gap: 14px !important;
}

.services-section .services-images .image-card {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 8.2 !important;
}

.services-section .services-copy {
  min-height: 0 !important;
  padding-top: 0 !important;
}

.services-section .services-copy > p {
  margin-bottom: 12px !important;
  max-width: 68ch !important;
}

/* FAQ section: remove giant empty area and give cleaner mobile gutter */
#fragen.faq-section {
  min-height: 0 !important;
  padding-top: clamp(30px, 4.8vw, 58px) !important;
  padding-bottom: clamp(24px, 4.4vw, 48px) !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

#fragen .faq-shell {
  width: min(calc(100% - (2 * var(--site-gutter))), 1040px) !important;
  max-width: 1040px !important;
}

#fragen .section-heading {
  margin-bottom: clamp(14px, 2.2vw, 24px) !important;
}

#fragen .faq-list {
  row-gap: 0 !important;
}

#fragen .faq-question {
  padding: 16px 0 !important;
}

/* General section heading spacing tighter */
.section-heading {
  margin-bottom: clamp(16px, 2.8vw, 28px) !important;
}

.gallery-slider-section .section-heading,
.reviews-section .section-heading,
.elements-section .section-heading,
.benefits-section .section-heading,
.faq-section .section-heading {
  margin-bottom: clamp(16px, 2.8vw, 28px) !important;
}

@media (max-width: 980px) {
  .home-page .stack-slide.services-section,
  .home-page .stack-slide.about-section,
  .home-page .stack-slide.gallery-slider-section,
  .home-page .stack-slide.reviews-section,
  .home-page .stack-slide.zip-section,
  .home-page .stack-slide.elements-section,
  .home-page .stack-slide.benefits-section,
  .home-page .stack-slide.faq-section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .services-section .services-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .services-section .services-images {
    width: 100% !important;
  }

  .services-section .services-images .image-card {
    aspect-ratio: 16 / 9 !important;
  }

  #fragen .faq-shell {
    width: calc(100% - 40px) !important;
    max-width: 760px !important;
  }
}

@media (max-width: 720px) {
  :root {
    --site-gutter: 20px;
  }

  .section-shell,
  .eventfrog-shell,
  .eventfrog-booking-shell,
  .legal-shell,
  .cart-shell,
  .zip-gallery-wrap {
    width: calc(100% - 40px) !important;
  }

  .left-rail {
    width: calc(100% - 40px) !important;
    left: 20px !important;
    right: 20px !important;
  }

  .home-page .stack-slide.services-section,
  .home-page .stack-slide.about-section,
  .home-page .stack-slide.gallery-slider-section,
  .home-page .stack-slide.reviews-section,
  .home-page .stack-slide.zip-section,
  .home-page .stack-slide.elements-section,
  .home-page .stack-slide.benefits-section,
  .home-page .stack-slide.faq-section,
  .guide-detail-section,
  .detail-section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .services-section .services-images .image-card {
    aspect-ratio: 16 / 10 !important;
  }

  .services-section .services-copy > p,
  .services-section .service-item p {
    line-height: 1.5 !important;
  }

  #fragen.faq-section {
    padding-top: 24px !important;
    padding-bottom: 20px !important;
  }

  #fragen .faq-shell {
    width: calc(100% - 40px) !important;
    max-width: none !important;
  }

  #fragen .section-heading {
    margin-bottom: 14px !important;
  }

  #fragen .faq-question {
    padding: 15px 0 !important;
  }

  #fragen .faq-question > span:first-child {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 480px) {
  :root {
    --site-gutter: 18px;
  }

  .section-shell,
  .eventfrog-shell,
  .eventfrog-booking-shell,
  .legal-shell,
  .cart-shell,
  .zip-gallery-wrap,
  #fragen .faq-shell {
    width: calc(100% - 36px) !important;
  }

  .left-rail {
    width: calc(100% - 36px) !important;
    left: 18px !important;
    right: 18px !important;
  }
}


/* ===== 2026-09-17 final mobile alignment + gap fix ===== */
/* Remove leftover full-screen heights that create large green gaps */
.home-page .stack-slide.services-section,
.home-page .stack-slide.about-section,
.home-page .stack-slide.gallery-slider-section,
.home-page .stack-slide.reviews-section,
.home-page .stack-slide.zip-section,
.home-page .stack-slide.elements-section,
.home-page .stack-slide.benefits-section,
.home-page .stack-slide.faq-section {
  min-height: 0 !important;
  height: auto !important;
}

.gallery-slider-section,
.gallery-slider-shell,
.auto-slider,
.auto-slider-track {
  min-height: 0 !important;
}

/* Prevent title clipping on desktop for long headings */
.about-section .left-copy h2,
.elements-section .elements-heading h2,
.benefits-section .section-heading h2 {
  white-space: normal !important;
  overflow: visible !important;
}

@media (max-width: 720px) {
  /* Single consistent mobile side gap everywhere */
  :root {
    --site-gutter: 20px !important;
  }

  .section-shell,
  .gallery-slider-shell,
  .reviews-shell,
  .faq-shell,
  .elements-shell,
  .eventfrog-shell,
  .eventfrog-booking-shell,
  .legal-shell,
  .cart-shell,
  .zip-gallery-wrap,
  #fragen .faq-shell {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .left-rail {
    width: calc(100% - 40px) !important;
    left: 20px !important;
    right: 20px !important;
  }

  /* Tighten section rhythm on phone */
  .home-page .stack-slide.services-section,
  .home-page .stack-slide.about-section,
  .home-page .stack-slide.gallery-slider-section,
  .home-page .stack-slide.reviews-section,
  .home-page .stack-slide.zip-section,
  .home-page .stack-slide.elements-section,
  .home-page .stack-slide.benefits-section,
  .home-page .stack-slide.faq-section {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* Remove the big gap after Momente */
  .gallery-slider-section {
    padding-bottom: 12px !important;
  }

  .gallery-slider-section .section-heading {
    margin-bottom: 12px !important;
  }

  .gallery-slider-shell {
    overflow: visible !important;
  }

  .auto-slider {
    width: 100% !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  .auto-slider-track {
    gap: 10px !important;
    align-items: stretch !important;
  }

  .slider-card {
    flex: 0 0 min(58vw, 210px) !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
  }

  /* Keep service titles and about title readable without cutting */
  .services-section .services-copy h2,
  .about-section .left-copy h2,
  .gallery-slider-section .section-heading h2,
  .reviews-section .section-heading h2,
  .elements-section .elements-heading h2,
  .benefits-section .section-heading h2,
  .faq-section .section-heading h2,
  .eventfrog-heading h2 {
    white-space: normal !important;
    overflow: visible !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Pull the next section closer so there is no empty band */
  .home-page .stack-slide.about-section {
    padding-top: 14px !important;
  }
}

@media (max-width: 480px) {
  :root {
    --site-gutter: 18px !important;
  }

  .section-shell,
  .gallery-slider-shell,
  .reviews-shell,
  .faq-shell,
  .elements-shell,
  .eventfrog-shell,
  .eventfrog-booking-shell,
  .legal-shell,
  .cart-shell,
  .zip-gallery-wrap,
  #fragen .faq-shell {
    width: calc(100% - 36px) !important;
  }

  .left-rail {
    width: calc(100% - 36px) !important;
    left: 18px !important;
    right: 18px !important;
  }

  .gallery-slider-section {
    padding-bottom: 10px !important;
  }

  .slider-card {
    flex-basis: min(56vw, 190px) !important;
  }
}


/* ===== 2026-09-17 review section black background fix ===== */
.reviews-section,
.reviews-shell,
.review-video-grid {
  background: transparent !important;
}

.review-video-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,0.10) !important;
}

.review-video-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
}

.review-video-card::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.12)) !important;
}

@media (max-width: 720px) {
  .review-video-card {
    background: rgba(255, 255, 255, 0.05) !important;
  }
}


/* ===== 2026-09-17 audio/menu/logo final fix ===== */
.site-header .brand-centered {
  transition: opacity 0.24s ease, transform 0.24s ease !important;
}

.site-header.is-scrolled .brand-centered {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(-8px) !important;
}

.drawer-socials {
  display: none;
}

@media (max-width: 720px) {
  .home-page .header-actions > .header-pill,
  .home-page .header-actions .header-socials {
    display: none !important;
  }

  .home-page .header-actions {
    width: auto !important;
    display: flex !important;
    grid-template-columns: none !important;
    right: 20px !important;
  }

  .home-page .header-actions > .sound-toggle-inline {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 8px !important;
  }

  .drawer-socials {
    display: block !important;
  }

  .drawer-social-links {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .drawer-social-link {
    min-height: 48px !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
    background: rgba(255,255,255,0.04) !important;
  }
}


/* ===== 2026-09-17 final targeted fixes: reviews bg, mobile audio, image framing ===== */
/* Restore clean section background behind Stimmen cards */
.reviews-section {
  background: var(--page-gradient) !important;
  isolation: isolate !important;
}

.reviews-shell,
.review-video-grid {
  background: transparent !important;
}

/* Ensure the phone sound button is always tappable */
#audio-toggle,
.sound-toggle-inline {
  position: relative !important;
  z-index: 10060 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Fix head crop on the left offers image */
.services-section .services-images .image-card:first-child img {
  object-position: center 18% !important;
}

@media (max-width: 980px) {
  .services-section .services-images .image-card:first-child img {
    object-position: center 14% !important;
  }
}

@media (max-width: 720px) {
  .reviews-section {
    background: var(--page-gradient) !important;
  }

  .home-page .header-actions,
  #audio-toggle {
    z-index: 10060 !important;
  }

  .services-section .services-images .image-card:first-child img {
    object-position: center 12% !important;
  }
}


/* ===== 2026-09-17 review thumbnail no-shade fix ===== */
.review-video-card {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.06) !important;
}

.review-video-card img {
  opacity: 1 !important;
  filter: none !important;
  background: transparent !important;
}

.review-video-card::after {
  content: none !important;
  background: none !important;
}

.review-video-card:hover img,
.review-video-card:focus-visible img {
  opacity: 1 !important;
}


/* ===== 2026-09-18 final no-black-play-shade + reliable mobile sound ===== */
.review-video-card {
  background: transparent !important;
  box-shadow: none !important;
}

.review-video-card::before,
.review-video-card::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

.review-video-card img {
  opacity: 1 !important;
  filter: none !important;
}

.review-play {
  filter: none !important;
  text-shadow: none !important;
}

.review-play circle {
  fill: transparent !important;
  stroke: rgba(255,255,255,0.96) !important;
  stroke-width: 2 !important;
}

.review-play path {
  fill: rgba(255,255,255,0.98) !important;
}

#audio-toggle {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#audio-toggle svg,
#audio-toggle svg * {
  pointer-events: none !important;
}


/* ===== 2026-09-18 definitive mobile audio + review shade fix ===== */
.site-header {
  z-index: 10050 !important;
  pointer-events: none !important;
}
.site-header .header-actions,
.site-header #audio-toggle {
  position: fixed !important;
  z-index: 10080 !important;
  pointer-events: auto !important;
}
#audio-toggle {
  touch-action: manipulation !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
#audio-toggle,
#audio-toggle * {
  pointer-events: auto !important;
}
#audio-toggle svg,
#audio-toggle svg * {
  pointer-events: none !important;
}
.review-video-card,
.review-video-card img {
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}
.review-video-card::before,
.review-video-card::after {
  content: none !important;
  display: none !important;
}
.review-play {
  filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.review-play circle {
  fill: none !important;
  stroke: #fff !important;
}
.review-play path {
  fill: #fff !important;
}


/* ===== 2026-09-18 sound overlap final fix ===== */
.site-header .header-actions {
  position: fixed !important;
  top: 22px !important;
  right: 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.site-header #audio-toggle,
.home-page .header-actions > .sound-toggle-inline {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  flex: 0 0 auto !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
}

.site-header #audio-toggle svg {
  display: block !important;
}

@media (max-width: 720px) {
  .site-header .header-actions {
    top: 10px !important;
    right: 12px !important;
    gap: 8px !important;
  }

  .site-header #audio-toggle,
  .home-page .header-actions > .sound-toggle-inline {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}


/* ===== 2026-09-19 iOS gallery loading + icon consistency ===== */
.slider-card picture,
.slider-card picture img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.slider-card picture img {
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
}

.auto-slider-track,
.slider-card,
.slider-card picture,
.slider-card img {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.rail-icon,
.sound-toggle-inline,
.social-icon,
.drawer-social-link,
.about-video-play,
.review-play {
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.rail-icon svg,
.sound-toggle-inline svg,
.social-icon svg,
.drawer-social-link svg,
.about-video-play svg,
.review-play svg {
  display: block !important;
  flex: 0 0 auto !important;
  shape-rendering: geometricPrecision;
}

.social-icon svg,
.drawer-social-link svg {
  width: 20px !important;
  height: 20px !important;
}

.about-video-play {
  font-size: 0 !important;
}

.about-video-play svg {
  width: 14px !important;
  height: 14px !important;
}

@media (max-width: 720px) {
  .social-icon svg,
  .drawer-social-link svg {
    width: 20px !important;
    height: 20px !important;
  }

  .auto-slider-track {
    will-change: transform !important;
  }
}

.review-video-card .review-picture,
.review-video-card .review-picture img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.review-video-card .review-picture img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* ===== 2026-09-19 canonical gallery loop only ===== */
/* Remove visual seams between home sections. */
.home-page .stack-slide,
.home-page .stack-slide::before,
.home-page .stack-slide::after,
.home-page .gallery-slider-section,
.home-page .reviews-section {
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.home-page .gallery-slider-section,
.home-page .reviews-section {
  margin-top: -1px !important;
}

/* One gallery implementation only. JS Web Animations API owns transform. */
#momente .auto-slider {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  overscroll-behavior: none !important;
  touch-action: pan-y !important;
}

#momente .auto-slider-track {
  display: flex !important;
  align-items: stretch !important;
  width: max-content !important;
  gap: 14px !important;
  animation: none !important;
  -webkit-animation: none !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

#momente .slider-card {
  flex: 0 0 clamp(250px, 24vw, 420px) !important;
  height: clamp(250px, 38vh, 430px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

#momente .slider-card picture,
#momente .slider-card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

#momente .slider-card img {
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
}

@media (max-width: 980px) {
  #momente .auto-slider-track { gap: 12px !important; }
  #momente .slider-card {
    flex-basis: clamp(220px, 42vw, 340px) !important;
    height: clamp(220px, 32vh, 320px) !important;
  }
}

@media (max-width: 720px) {
  #momente .auto-slider-track { gap: 10px !important; }
  #momente .slider-card {
    flex-basis: min(82vw, 300px) !important;
    height: min(56vw, 215px) !important;
  }
}


/* ===== 2026-09-22 MORE-INFO DETAIL PAGE MATCH =====
   Keep the three “Mehr erfahren” pages on the same responsive type scale
   and horizontal rhythm as the homepage. No gallery/media behaviour changed. */
body.detail-page .detail-content-shell {
  width: min(calc(100% - (2 * var(--site-gutter))), var(--content-max)) !important;
  max-width: var(--content-max) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

body.detail-page .detail-hero-layout .detail-copy h1 {
  max-width: 18ch !important;
  font-family: "Roboto", Arial, sans-serif !important;
  font-size: var(--title-h1-size) !important;
  font-weight: 500 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
}

body.detail-page .detail-content-section h2,
body.detail-page .eventfrog-heading h2 {
  max-width: none !important;
  font-family: "Roboto", Arial, sans-serif !important;
  font-size: var(--title-h2-size) !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.018em !important;
}

body.detail-page .detail-content-section h3,
body.detail-page .detail-method-card h3,
body.detail-page .detail-list-heading,
body.detail-page .detail-highlight h3 {
  font-family: "Roboto", Arial, sans-serif !important;
  font-size: clamp(1.06rem, 1.15vw, 1.28rem) !important;
  font-weight: 500 !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
}

body.detail-page .detail-hero-layout .detail-copy p,
body.detail-page .detail-content-section p,
body.detail-page .detail-content-section li,
body.detail-page .eventfrog-heading p,
body.detail-page .eventfrog-direct-copy p {
  font-size: clamp(0.96rem, 0.7vw + 0.72rem, 1.04rem) !important;
  line-height: 1.62 !important;
}

body.detail-page .detail-highlight p {
  font-family: "Roboto", Arial, sans-serif !important;
  font-size: clamp(1.02rem, 1.25vw, 1.2rem) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

body.detail-page .detail-closing-emphasis,
body.detail-page .detail-quote-panel p,
body.detail-page .detail-quote-panel strong {
  font-family: "Roboto", Arial, sans-serif !important;
  font-size: clamp(1.55rem, 2.9vw, 2.35rem) !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.018em !important;
}

@media (max-width: 980px) {
  body.detail-page .detail-content-shell {
    width: min(calc(100% - (2 * var(--site-gutter))), var(--content-max)) !important;
    padding: 56px 0 70px !important;
  }

  body.detail-page .detail-hero-layout .detail-copy {
    padding: clamp(42px, 7vw, 64px) var(--site-gutter) clamp(52px, 8vw, 74px) !important;
  }
}

@media (max-width: 720px) {
  body.detail-page .detail-content-shell {
    width: calc(100% - (2 * var(--site-gutter))) !important;
    padding: 42px 0 58px !important;
  }

  body.detail-page .detail-hero-layout .detail-image-wrap {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }

  body.detail-page .detail-hero-layout .detail-copy {
    padding: 34px var(--site-gutter) 48px !important;
  }

  body.detail-page .detail-content-section,
  body.detail-page .detail-content-grid--two .detail-content-section,
  body.detail-page .detail-content-grid--two .detail-content-section + .detail-content-section {
    padding: 36px 0 !important;
  }

  body.detail-page .detail-program-list li,
  body.detail-page .detail-check-list li {
    padding-left: 22px !important;
  }

  body.detail-page .detail-hero-layout .primary-btn,
  body.detail-page .detail-hero-layout .ghost-btn,
  body.detail-page .eventfrog-direct-btn {
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* ===== 2026-09-22 Journey detail hero images: unique + uncropped ===== */
body.detail-page .detail-hero-layout .detail-image-wrap {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--detail-cream) !important;
}

body.detail-page .detail-hero-layout .detail-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  display: block !important;
}