/* Booking is a green chapter, with a gentle paper-to-green transition at each edge. */
#booking.booking-cards-section{
  --booking-pine:#003f34;
  position:relative;
  isolation:isolate;
  padding:76px 0 82px;
  background:var(--booking-pine);
  color:#fafbf2;
  border:0;
}
#booking.booking-cards-section::before,
#booking.booking-cards-section::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:58px;
  pointer-events:none;
  z-index:-1;
}
#booking.booking-cards-section::before{
  top:0;
  background:linear-gradient(to bottom,#fbfaf7 0%,#d5e1d6 15%,#789e8c 44%,#215e4c 73%,#003f34 100%);
}
#booking.booking-cards-section::after{
  bottom:0;
  background:linear-gradient(to top,#fbfaf7 0%,#d5e1d6 15%,#789e8c 44%,#215e4c 73%,#003f34 100%);
}
/* Chapters 02, 03 and 04 share chapter 01's content width. Chapter 01 is
   `.imported-product .chapter-inner`, i.e. min(1200px, 100% - 96px), dropping
   to 100% - 40px at 700. #booking gets it by having `.bc-layout` added to that
   selector list in imported-product.css; #flyter and #agenter are outside the
   @scope, so they are pinned here, by id so nothing downstream outranks them. */
#flyter .chapter-inner,#agenter .calm-agents-inner{max-width:1200px;width:calc(100% - 96px);margin-left:auto;margin-right:auto}
@media(max-width:700px){#flyter .chapter-inner,#agenter .calm-agents-inner{width:calc(100% - 40px)}}
#booking .bc-heading,#booking .bc-heading h2{color:#fafbf2}
#booking .bc-heading .chapter-number{color:rgba(255,255,255,.25)}
#booking .bc-heading .eyebrow{color:#9fc4b2}
.intro-transition:has(+ #booking) .acquisition{border-bottom:0}
#booking + .flows{border-top:0}
@media(max-width:620px){
  #booking.booking-cards-section{padding:58px 0 62px}
  #booking.booking-cards-section::before,#booking.booking-cards-section::after{height:38px}
}
/* Generated ink-and-forest artwork replaces the smooth color bands. */
#booking.booking-cards-section{padding-top:176px;padding-bottom:166px}
#booking.booking-cards-section::before,
#booking.booking-cards-section::after{
  height:148px;
  background-image:linear-gradient(to bottom,#fbfaf7 0%,transparent 12%,transparent 86%,#003f34 100%),url('/assets/editorial/booking-forest-seam.webp');
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
}
#booking.booking-cards-section::after{transform:rotate(180deg)}
@media(max-width:620px){
  #booking.booking-cards-section{padding-top:114px;padding-bottom:108px}
  #booking.booking-cards-section::before,#booking.booking-cards-section::after{height:90px;background-size:100% 100%}
}
/* Low rolling hills allow a much shallower landscape band. */
/* Trimmed with the compaction pass: the band is 78px, so this keeps ~10px of
   clearance between the hill line and the first card title. */
#booking.booking-cards-section{padding-top:46px;padding-bottom:42px}
#booking.booking-cards-section::before,#booking.booking-cards-section::after{
 height:44px;
 background-image:linear-gradient(to bottom,#fbfaf7 0%,transparent 12%,transparent 84%,#003f34 100%),url('/assets/editorial/booking-rolling-hills.webp');
 background-size:100% 100%;
}
@media(max-width:620px){
 #booking.booking-cards-section{padding-top:52px;padding-bottom:48px}
 #booking.booking-cards-section::before,#booking.booking-cards-section::after{height:42px}
}
/* The interlude (03 -> 04) and the dark closing (04 -> kontakt) get the same
   rolling-hills seam as chapter 02: paper into hills into the section's own
   ground at the top, mirrored at the bottom where the next section is paper. */
.interlude,.closing-dark{position:relative;isolation:isolate}
.interlude::before,.interlude::after,.closing-dark::before{
 content:"";position:absolute;left:0;right:0;height:44px;pointer-events:none;z-index:-1;
 background-image:linear-gradient(to bottom,#fbfaf7 0%,transparent 12%,transparent 84%,#003f34 100%),url('/assets/editorial/booking-rolling-hills.webp');
 background-size:100% 100%;background-position:center;background-repeat:no-repeat;
}
.interlude::before,.closing-dark::before{top:0}
.interlude::after{bottom:0;transform:rotate(180deg);background-image:linear-gradient(to bottom,#faf9f6 0%,transparent 12%,transparent 84%,#003f34 100%),url('/assets/editorial/booking-rolling-hills.webp')}
.closing-dark::before{background-image:linear-gradient(to bottom,#faf9f6 0%,transparent 12%,transparent 84%,#00251f 100%),url('/assets/editorial/booking-rolling-hills.webp')}
.flows:has(+ .interlude){border-bottom:0}
@media(max-width:620px){.interlude::before,.interlude::after,.closing-dark::before{height:42px}}