/* Gedeelde opbouw voor landingspagina's (bnb.html, kas.html),
naar ontwerp/Landingspagina-B&B.pdf (artboard 1440 breed).
De gradient (.page) verschilt per pagina en staat in css/.css */
/* landingspagina's zijn altijd licht, net als het ontwerp */
body{background:#F7F3EC;color:#222B1F}
.wrap{max-width:1440px;padding:0 clamp(1.25rem,7.5vw,110px)}
h1,h2{font:400 clamp(34px,4.6vw,66px)/1.05 'Titan One','Arial Black',Impact,sans-serif;text-transform:none;margin:0 0 .45em}
h3{font:700 clamp(18px,1.8vw,26px)/1.2 var(--body);text-transform:none}
.body{font-size:clamp(18px,2.1vw,30px);line-height:1.25;max-width:54ch;margin:0 0 1.2em}
.page{background-color:#F7F3EC;background-repeat:no-repeat}
/* placeholder: nog aan te vullen tekst, makkelijk terug te vinden */
.todo{background:var(--pink);color:#222B1F;padding:0 .3em;border-radius:4px;font-style:normal}
/* fotokader: dikke rand, ronde hoeken, smalle harde schaduw */
.frame{border:5px solid #222B1F;border-radius:clamp(24px,3.2vw,46px);overflow:hidden;box-shadow:5px 6px 0 #222B1F}
.frame img{width:100%;height:100%;object-fit:cover}
.frame.leeg{display:grid;place-items:center;text-align:center;padding:1rem;border-style:dashed;box-shadow:none;background:#F7F3EC;font-weight:700;color:#222B1F99}
/* hero */
.hero{padding:2.5rem 0 4.5rem}
.logo{width:clamp(170px,18vw,260px);height:auto;margin:0 auto 2.2rem}
.hero .frame{aspect-ratio:2/1;margin-bottom:clamp(2.5rem,4vw,4rem)}
/* fotohero: grote beeldvullende foto, logo bovenin, kop in lime (hoofdletters, lusstreep) over de foto.
Fotopositie en kopgrootte/-hoogte per pagina in css/.css */
.hero.foto{padding:0}
.hero.foto .groot{position:relative;height:min(76vh,800px);min-height:420px;overflow:hidden}
.hero.foto .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero.foto .logo-link{z-index:1;position:absolute;top:clamp(1.25rem,3vw,2.5rem);left:50%;transform:translateX(-50%)}
.hero.foto .logo{margin:0}
.hero.foto h1{position:absolute;left:0;right:0;top:55%;text-transform:uppercase;transform:translateY(-50%);margin:0;padding:0 1.25rem;text-align:center;color:#DADB14;font:400 clamp(44px,8vw,130px)/.95 'Titan One','Arial Black',Impact,sans-serif}
.intro{padding-top:2.5rem}
/* menubalk: blijft bovenin staan tijdens scrollen */
.menu{position:sticky;top:0;z-index:10;display:flex;justify-content:center;gap:.7rem;padding:1rem 1.25rem}
.menu a{flex:none;background:#FFFDF8;color:#222B1F;font-weight:700;font-size:.9rem;text-decoration:none;padding:.5rem .9rem;border:3px solid #222B1F;border-radius:14px 4px 14px 4px;box-shadow:4px 4px 0 #222B1F;transition:transform .15s}
.menu a:hover{transform:translateY(-2px)}
.menu a.on{background:var(--lime)}
/* blokken */
.blok{padding:4rem 0 2.5rem}
.blok[id]{scroll-margin-top:4.5rem} /* kop niet onder de menubalk na een menuklik */
.blok.aansluitend{padding:1.5rem 0 3rem}
/* drie kaarten (kamers, cactussen) */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3.4vw,50px);margin-top:2rem}
.card{background:#F7F3EC;border:5px solid #222B1F;border-radius:clamp(30px,3.8vw,55px) 10px clamp(30px,3.8vw,55px) 10px;padding:clamp(1rem,1.8vw,26px);min-height:clamp(400px,40vw,580px);display:flex;flex-direction:column;gap:.8rem}
.card .ph{aspect-ratio:1;border:5px dashed #222B1F;border-radius:20px;display:grid;place-items:center;font-weight:700;color:#222B1F99}
.card .foto{aspect-ratio:1;width:100%;object-fit:cover;border:5px solid #222B1F;border-radius:20px}
.card p{margin:0;font-size:1rem;line-height:1.4}
.card .prijs{margin-top:auto;font:700 clamp(18px,1.6vw,24px) var(--body)}
/* fotoslider: horizontaal swipen/scrollen, volgende foto piept rechts in beeld;
knoppen in de stijl van de menubalk-blokjes. Script staat onderaan de pagina */
.slider{margin-top:2rem}
.slides{display:flex;gap:clamp(1rem,2.5vw,32px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:0 12px 14px 0;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 72%;margin:0;aspect-ratio:16/10;scroll-snap-align:start}
.slider-nav{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1.25rem;font-weight:700}
.slider-nav button{font:700 1.1rem/1 var(--body);color:#222B1F;background:#FFFDF8;border:3px solid #222B1F;border-radius:14px 4px 14px 4px;box-shadow:4px 4px 0 #222B1F;padding:.55rem .95rem;cursor:pointer;transition:transform .15s}
.slider-nav button:hover{transform:translateY(-2px)}
.slider-nav button:disabled{opacity:.35;cursor:default;transform:none}
/* twee foto's naast elkaar */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,3vw,40px);margin-bottom:clamp(2.5rem,4vw,4rem)}
.duo .frame{aspect-ratio:1.5}
@media (max-width:820px){
.cards,.duo{grid-template-columns:minmax(0,1fr)}
.slide{flex-basis:88%}
.card{min-height:0}
.menu{justify-content:flex-start;overflow-x:auto}
.frame{border-width:4px;box-shadow:4px 4px 0 #222B1F}
.hero .frame{aspect-ratio:3/2}
}
/* tarievenlijst: per regel omschrijving links, bedrag rechts, in een vak met de menubalk-rand */
.tarieven{margin:2rem 0 0;max-width:820px;background:#FFFDF8;border:3px solid #222B1F;border-radius:14px 4px 14px 4px;box-shadow:4px 4px 0 #222B1F;padding:.5rem 1.4rem}
.tarieven div{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:2px dashed #222B1F33}
.tarieven div:last-child{border-bottom:0}
.tarieven dt{font-weight:700}
.tarieven dd{margin:0;text-align:right}
@media (max-width:520px){.tarieven div{flex-direction:column;gap:.2rem}.tarieven dd{text-align:left}}
/* kaart (Google Maps): zelfde fotokader; eerst een startscherm met knop, daarna de echte kaart */
.kaart{aspect-ratio:16/9;margin:2rem 0 0;background:#FFFDF8}
.kaart iframe{width:100%;height:100%;border:0;display:block}
.kaart-start{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;padding:1.5rem;background:radial-gradient(ellipse 60% 70% at 20% 20%,rgba(218,219,20,.35),rgba(218,219,20,0)),#FFFDF8}
.kaart-start p{margin:0;max-width:52ch;line-height:1.4}
.kaart-start .klein{font-size:.85rem}
@media (max-width:820px){.kaart{aspect-ratio:4/5}}