/* HotelBooqi (13 okt 2026): de opmaak van de scrollsectie voor hotel, zoals de film (animatie/HotelBooqi_animatie.mp4, v6).
   Alleen .ps--hotel; de sectie zelf (assets/css/parkscroll.css) blijft gedeeld en ongemoeid. Hotelgoud, wit en zacht lila,
   koppen van de kaartjes en vouchers in Cormorant (staat al in assets/fonts), vouchers als witte tekstvouchers zoals de
   hotel-dummies (Kempinski, Stanton): knipregel, codelabel, geen foto, geen pastel. */
.ps--hotel{background:#F7F5FC;color:#1F1B2E}
.ps--hotel .ps-bg{background:radial-gradient(1400px 900px at 70% 35%,#FFFFFF 0%,#F8F6FD 45%,#ECE7F7 100%)}
.ps--hotel .ps-balk,.ps--hotel .ps-tk small,.ps--hotel .ps-lab8 small,.ps--hotel .ps-onder small{background:none;color:#8A6516}
.ps--hotel .ps-balk{background:#C4A149}
.ps--hotel .ps-pl i{color:#8A6516}
.ps--hotel .ps-tk h3,.ps--hotel .ps-lab8 b,.ps--hotel .ps-onder h3{color:#1F1B2E}
.ps--hotel .ps-lijnen line{stroke:#8A6516}.ps--hotel .ps-lijnen .ps-d,.ps--hotel .ps-lijnen .ps-h{stroke:#8A6516}
.ps--hotel .ps-f{background-color:#FFFFFF}.ps--hotel .ps-b{background-color:#F7F5FC}
.ps--hotel .ps-f::after,.ps--hotel .ps-b::after{background:rgba(40,30,70,var(--sh,0))}
.ps--hotel .ps-vloer{background:radial-gradient(closest-side,rgba(60,45,110,.22),rgba(60,45,110,0))}
.ps--hotel #ps-c2_5>.ps-f,.ps--hotel #ps-c2_5>.ps-b{border-radius:5px;overflow:hidden}
.ps--hotel .ps-schaduw{background:radial-gradient(closest-side,rgba(30,24,40,.5),rgba(30,24,40,0));filter:blur(2px)}
.ps--hotel .ps-stand img{filter:drop-shadow(0 3px 4px rgba(30,25,40,.22))}
.ps--hotel .ps-nr{background:#C4A149}
.ps--hotel .ps-achter{border-radius:14px;box-shadow:0 30px 60px rgba(40,30,70,.25)}
.ps--hotel .ps-tik{background:rgba(196,161,73,.25);border-color:rgba(196,161,73,.6)}
.ps--hotel .ps-sc small{color:#8A6516}
.ps--hotel .ps-sc b{font-family:'Cormorant Garamond',serif;font-variant-numeric:lining-nums;font-weight:600;font-size:30px;line-height:1.05}
.ps--hotel .ps-sc{box-shadow:0 20px 44px rgba(40,30,70,.16);color:#1F1B2E}
.ps--hotel .ps-sc i{color:#D9A92E}
.ps--hotel .ps-sterren span{color:#D9A92E}
.ps--hotel .ps-bon{background:#fff !important;border-radius:0;padding:40px 26px 24px;height:410px;display:flex;flex-direction:column;box-shadow:0 22px 44px rgba(40,30,70,.2)}
.ps--hotel .ps-bon::after{inset:auto 18px auto 18px;top:17px;border:0;border-top:1.6px dashed #B9AD9F;border-radius:0}
.ps--hotel .ps-bf{display:none}
.ps--hotel .ps-bt{padding:0;display:flex;flex-direction:column;flex:1}
.ps--hotel .ps-bk{align-self:flex-start;background:#D9C08A;color:#1F1B2E;font-size:13px;letter-spacing:.16em;padding:4px 10px 3.5px;margin-bottom:16px}
.ps--hotel .ps-bh{font-family:'Cormorant Garamond',serif;font-variant-numeric:lining-nums;font-weight:600;font-size:38px;line-height:1;margin-bottom:14px;text-transform:none;letter-spacing:0}
.ps--hotel .ps-bs{font-size:17px;line-height:1.45;color:rgba(31,27,46,.84)}

/* De hotelpagina, 13 okt 2026 (Nout: rustige hero zonder mensen, geen beige; zoals museum.css en themepark.css). De hero is een
   zonnig zwembad aan zee zonder mensen (Pexels, hb fotobronnen.json), met een lichte waas links en donkere tekst; wit en zacht lila
   (#F7F5FC) in plaats van crème en steen, dezelfde tinten als het hotelverhaal (.ps--hotel) en de HotelBooqi-mockups. */
body.market-hotel .hbstory{--papier:#F7F5FC;--wit:#FFFFFF;--rand:#E4DEF3;background:#FFFFFF}
body.market-hotel .hbstory .topnav{background:rgba(255,255,255,.94) !important}
body.market-hotel .hbstory section#top,
body.market-hotel .hbstory section#who,
body.market-hotel .hbstory section#how,
body.market-hotel .hbstory section#pricing{background:#FFFFFF !important}
body.market-hotel .hbstory section#pijler-1,
body.market-hotel .hbstory section#opbrengst,
body.market-hotel .hbstory section#fits,
body.market-hotel .hbstory section#faq{background:#F7F5FC !important}
body.market-hotel .hbstory .h3kader{background:#E9E6F2}
body.market-hotel .hbstory .h3kader .h3beeld::before{
  background:linear-gradient(90deg,rgba(247,245,252,.92) 0%,rgba(247,245,252,.74) 34%,rgba(247,245,252,.16) 60%,rgba(247,245,252,0) 72%) !important}
body.market-hotel .hbstory .h3tekst,
body.market-hotel .hbstory .h3tekst h1,
body.market-hotel .hbstory .h3tekst .h3voor,
body.market-hotel .hbstory .h3tekst .h3pk,
body.market-hotel .hbstory .h3tekst .h3bewijs{color:#1F1B2E !important;text-shadow:none !important}
body.market-hotel .hbstory .h3tekst .h3sub{color:rgba(31,27,46,.84) !important;text-shadow:none !important}
body.market-hotel .hbstory .h3knoppen .btn.o{color:#1F1B2E !important;background:rgba(255,255,255,.74) !important;border-color:rgba(31,27,46,.28) !important}
/* Het dagverhaal is weg (het hotelverhaal bovenaan vertelt het nu), dus ook de links "See it in the day" */
body.market-hotel .hbstory .hnaar{display:none !important}
/* De hero rustig en leesbaar (13 okt 2026, Nout: "hotelbooqi hero is super rommelig en niet leesbaar de tekst"): geen drukke
   zwembadfoto achter de tekst maar een lichte, rustige achtergrond in het hotellila, de productmockup groot in de vrije ruimte rechts,
   het accentwoord in hotelgoud in plaats van wit, en de hero vult het eerste scherm (zoals museum). */
body.market-hotel .hbstory .h3kader{background:#F7F5FC}
/* 13 okt, Nout: "wel een foto, maar rustig zoals museum en themepark": een lichte kamer met zeezicht, zonder mensen (Pexels, hero/fotobron_hero.json),
   met een lichte waas links (zoals museum.css) zodat de donkere tekst leesbaar blijft */
body.market-hotel .hbstory .h3kader .h3beeld::before{
  background:linear-gradient(90deg,rgba(247,245,252,.94) 0%,rgba(247,245,252,.82) 36%,rgba(247,245,252,.28) 60%,rgba(247,245,252,.06) 76%) !important}
body.market-hotel .hbstory .h3 h1 .heel{color:#8A6516 !important;-webkit-text-fill-color:#8A6516 !important}
@media (min-width:821px){
  body.market-hotel .hbstory .h3kader{min-height:clamp(560px,calc(100svh - 65px),900px) !important}
  body.market-hotel .hbstory .h3hand{right:calc(var(--links) - 40px) !important;bottom:7% !important;height:84% !important;
    /* de kop is ~23,5vw + 280px breed: de mockup begint 40px daarna en loopt tot de rechterlijn */
    width:calc(100vw - 2 * var(--links) - 23.5vw - 280px) !important;max-width:none !important;left:auto !important;
    object-position:center center !important;object-fit:contain !important;filter:drop-shadow(0 24px 40px rgba(60,45,110,.16)) !important}
}
@media (max-width:820px){
  body.market-hotel .hbstory .h3beeld{height:clamp(240px,70vw,360px) !important}
  /* 13 okt (Nout: "overal gewoon die vette mockup met covers en telefoon in het midden"): de mockup heel en gecentreerd */
  body.market-hotel .hbstory .h3hand{left:50% !important;right:auto !important;transform:translateX(-50%) !important;height:92% !important;width:auto !important;max-width:94% !important;bottom:4% !important;object-fit:contain !important;object-position:center bottom !important;filter:none !important}
}

/* Hero overal hetzelfde (13 okt 2026, Nout: "zonder kader alleen die losse mockup", "alles hetzelfde doen altijd"): de uitgevouwen
   Booqi met de covers en de telefoon, als losse mockup. Desktop naast de kop; mobiel zonder fotokader, gecentreerd en heel. */
@media (min-width:821px){
  html body.market-hotel .hbstory .h3kader .h3hand{left:auto !important;right:calc(var(--links) - 40px) !important;bottom:7% !important;top:auto !important;
    height:84% !important;width:calc(100vw - 2 * var(--links) - 23.5vw - 280px) !important;max-width:none !important;transform:none !important;
    object-fit:contain !important;object-position:center center !important;filter:none !important}
}
@media (max-width:820px){
  html body.market-hotel .hbstory .h3kader .h3beeld{background:none !important;border-radius:0 !important;box-shadow:none !important;
    height:clamp(260px,78vw,440px) !important;overflow:visible !important;animation:none !important}
  html body.market-hotel .hbstory .h3kader .h3beeld::before,html body.market-hotel .hbstory .h3kader .h3beeld::after{display:none !important}
  html body.market-hotel .hbstory .h3kader .h3hand{left:50% !important;right:auto !important;top:auto !important;bottom:0 !important;transform:translateX(-50%) !important;
    height:100% !important;width:auto !important;max-width:100% !important;object-fit:contain !important;object-position:center bottom !important;filter:none !important}
}