/* ==========================================================================
   Swiss Alp Chalets — Blatten bei Naters
   ========================================================================== */
:root{
  --sneeuw:      #FAF9FA;
  --linnen:      #F0EDEE;
  --hout:        #A43C4C;
  --hout-diep:   #A43C4C;
  --den:         #4B3542;
  --den-diep:    #3C2A35;
  --inkt:        #2A2026;
  --inkt-zacht:  #6E626A;
  --lijn:        #DCD8DA;
  --lijn-donker: rgba(255,255,255,.16);
  --rood:        #D61F33;
  --lucht:       #4474BC;
  --lucht-licht: #94ACC4;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mid:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--sneeuw);color:var(--inkt);
  font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.005em}

.mid{max-width:var(--mid);margin:0 auto;padding:0 30px}
.eng{max-width:760px}
section{padding:clamp(64px,8vw,120px) 0}
.op-den{background:var(--den);color:var(--sneeuw)}
.op-den .zacht{color:#D8CFD2}
.op-linnen{background:var(--linnen)}

.oog{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--hout);margin:0 0 22px}
.op-den .oog{color:#CFD1D8}
.zacht{color:var(--inkt-zacht)}
.groot{font-size:clamp(38px,6.2vw,76px);line-height:1.03}
.kop{font-size:clamp(30px,4.2vw,52px);line-height:1.1}
.klein{font-size:clamp(21px,2.5vw,30px);line-height:1.2}
.leid{font-size:clamp(18px,2vw,23px);line-height:1.52;font-weight:300;max-width:44ch}
p{max-width:62ch}

.knoppen{display:flex;flex-wrap:wrap;gap:13px;margin-top:36px}
.knop{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;padding:16px 30px;
  background:var(--hout-diep);color:var(--sneeuw);border:1px solid var(--hout-diep)}
.knop.leeg{background:transparent;color:inherit;border-color:currentColor;opacity:.9}
.knop.leeg:hover{border-color:var(--lucht);opacity:1}
.knop:hover{opacity:.85}

.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;
  background:var(--den-diep);color:var(--sneeuw);overflow:hidden;padding-bottom:clamp(52px,7vw,88px)}
.hero .foto{position:absolute;inset:0}
.hero .foto img{width:100%;height:100%;object-fit:cover}
.hero .foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(60,42,53,.45) 0%,rgba(60,42,53,.30) 45%,rgba(60,42,53,.90) 100%)}
.hero .mid{position:relative}
.merkje{font-size:12px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;margin:0 0 18px}

.taal{display:inline-flex;border:1px solid currentColor;border-radius:2px;overflow:hidden;opacity:.85}
.taal a{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding:7px 10px}
.taal a[aria-current="true"]{background:currentColor}
.taal a[aria-current="true"] span{color:var(--den);mix-blend-mode:normal}
.kop-balk{position:absolute;top:0;left:0;right:0;z-index:5;padding:22px 0}
.kop-balk .mid{display:flex;justify-content:space-between;align-items:center;color:var(--sneeuw)}
.kop-rechts{display:inline-flex;align-items:center;gap:clamp(10px,2vw,20px);flex-shrink:0}
.merk-logo{display:block;height:clamp(20px,2.6vw,30px);width:auto}
.kop-balk a{display:flex;align-items:center}
.ig{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:inherit;
  border:1px solid currentColor;border-radius:2px;padding:7px 12px;opacity:.9;white-space:nowrap}
.ig::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rood);flex:0 0 auto}
.ig:hover{opacity:1;background:rgba(255,255,255,.08)}
.volg{background:var(--lucht);color:var(--sneeuw);padding:clamp(54px,8vw,92px) 0 clamp(40px,6vw,64px);
  text-align:center}
.volg .hart{height:clamp(40px,6vw,62px);width:auto;display:block;margin:0 auto 22px}
.volg p{font-family:var(--serif);font-size:clamp(21px,2.6vw,30px);line-height:1.35;
  max-width:22ch;margin:0 auto 26px;color:var(--sneeuw)}
.knop.rood{background:var(--rood);border-color:var(--rood);color:#fff}
.volg .knop{background:#fff;border-color:#fff;color:var(--lucht)}
.volg .knop:hover{background:transparent;color:#fff}
.huisband{position:relative;padding:0;background:var(--diep,#3C2A35)}
.huisband img{width:100%;height:clamp(300px,58vh,640px);object-fit:cover;display:block}
.huisband .bij{position:absolute;left:0;right:0;bottom:0;padding:26px 30px;
  background:linear-gradient(0deg,rgba(60,42,53,.85),rgba(60,42,53,0));
  color:#fff;font-family:var(--serif);font-size:clamp(19px,2.4vw,28px);text-align:center}
.film{margin-top:44px}
.film video{width:100%;display:block;border-radius:2px}
.film p{margin-top:12px;font-size:14px}
.knop.rood:hover{opacity:.88}
.boek p a{color:var(--lucht);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
footer.voet .mid a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}

.feiten{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--lijn);
  border:1px solid var(--lijn);margin-top:52px}
.feit{background:var(--sneeuw);padding:26px 22px}
.feit b{display:block;font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);line-height:1;color:var(--wijnrood,#A43C4C)}
.feit span{display:block;margin-top:8px;font-size:13px;color:var(--inkt-zacht)}

.raster{display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn);margin-top:44px}
.raster.v2{grid-template-columns:repeat(2,1fr)}
.raster.v3{grid-template-columns:repeat(3,1fr)}
.vak{background:var(--sneeuw);padding:30px 26px 34px}
.op-den .raster{background:var(--lijn-donker);border-color:var(--lijn-donker)}
.op-den .vak{background:var(--den)}
.vak h3{font-size:24px;margin:0 0 6px}
.vak .sub{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hout);margin:0 0 16px}
.vak p{font-size:15.5px;line-height:1.56;max-width:none;margin:0 0 .8em}
.vak p:last-child{margin-bottom:0}
.vak .beeld{aspect-ratio:4/3;overflow:hidden;margin:-30px -26px 22px}
.vak .beeld img{width:100%;height:100%;object-fit:cover}

.lijst{margin:26px 0 0;padding:0;list-style:none;max-width:none}
.lijst li{padding:12px 0 12px 26px;border-bottom:1px solid var(--lijn);position:relative;font-size:16px}
.lijst li::before{content:"";position:absolute;left:0;top:21px;width:11px;height:1px;background:var(--lucht)}
.op-den .lijst li{border-color:var(--lijn-donker)}
.op-den .lijst li::before{background:var(--lucht-licht)}

.galerij{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:44px}
.galerij span{display:block;aspect-ratio:4/3;overflow:hidden}
.galerij img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.galerij span:hover img{transform:scale(1.04)}
.galerij .breed{grid-column:span 2;aspect-ratio:8/3}

.citaten{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--lijn-donker);
  border:1px solid var(--lijn-donker);margin-top:44px}
.citaten blockquote{background:var(--den);margin:0;padding:28px 26px}
.citaten p{font-family:var(--serif);font-size:19px;line-height:1.4;margin:0 0 12px;max-width:none}
.citaten footer{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#CFD1D8}

.huiskop{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,30px);
  margin:clamp(40px,5vw,64px) 0 4px;line-height:1.25}
.subscores{font-size:14px;color:#D8CFD2;margin:0;max-width:60ch}
.stil{font-size:14px;color:#D8CFD2;margin-top:18px;max-width:72ch}
.citaten{margin-top:22px}
.boek{border:1px solid var(--lijn);background:var(--linnen);padding:clamp(30px,4vw,52px);margin-top:44px}

footer.voet{background:var(--lucht);color:#E8EEF6;padding:52px 0;font-size:14px}
footer.voet .mid{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}

@media (max-width:900px){
  .feiten{grid-template-columns:repeat(2,1fr)}
  .raster.v3,.raster.v2{grid-template-columns:1fr}
  .galerij{grid-template-columns:repeat(2,1fr)}
  .galerij .breed{grid-column:span 2}
  .citaten{grid-template-columns:1fr}
}
@media (max-width:560px){
  .mid{padding:0 20px}
  .galerij{grid-template-columns:1fr}
  .galerij .breed{grid-column:span 1;aspect-ratio:4/3}
}