/* Dans L'Otello — concept dan.tdgdigital.com
   Kleuren uit het erf: houtskool van de zwarte schuur, kalk van het witte huis, het groen van het logo,
   het donkere kozijngroen, cognac van de leren schorten, de gloed van de lampjes, het doek van de tent. */
:root{
  --houtskool:#191815; --roet:#24221e; --kalk:#f1ece2; --papier:#faf7f1; --doek:#d9cbad;
  --groen:#47704c; --kozijn:#21392b; --cognac:#a35d29; --gloed:#efae5c; --inkt:#1b1a17; --grijs:#6d685f;
  --serif:"Gloock",Georgia,serif; --sans:"Schibsted Grotesk",system-ui,sans-serif; --mono:"Courier Prime","Courier New",monospace;
  --rand:clamp(16px,4vw,56px); --max:1320px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--papier);color:var(--inkt);font:400 17px/1.6 var(--sans);overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em;hyphens:auto;overflow-wrap:break-word}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.02;margin:0;letter-spacing:-.01em;hyphens:manual;overflow-wrap:break-word}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.boven{font:600 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px;display:flex;gap:12px;align-items:baseline}
.boven b{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:0}
:focus-visible{outline:2px solid var(--gloed);outline-offset:3px}

/* knoppen: gewoon tekst met een streep, of een vlak in de kleur van het hoofdstuk */
.knop{display:inline-flex;align-items:center;gap:12px;padding:15px 22px;background:var(--inkt);color:var(--papier);
  text-decoration:none;font:600 15px/1 var(--sans);letter-spacing:.02em;border:0;cursor:pointer;transition:background .2s,color .2s}
.knop:hover{background:var(--groen)}
.knop svg{width:18px;height:12px;transition:transform .25s}
.knop:hover svg{transform:translateX(4px)}
.knop.licht{background:var(--papier);color:var(--inkt)}
.knop.licht:hover{background:var(--gloed)}
.knop.gloed{background:var(--gloed);color:var(--houtskool)}
.knop.gloed:hover{background:var(--papier)}
.link{font-weight:600;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.link:hover{color:var(--cognac)}
.knoppen{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:26px}

/* ===== kop ===== */
.kop{position:fixed;inset:0 0 auto;z-index:50;color:var(--papier);transition:background .3s,color .3s,box-shadow .3s}
.kop .wrap{display:flex;align-items:center;gap:28px;height:76px;max-width:none}
.kop .merk{display:block;width:clamp(150px,16vw,210px);color:inherit}
.kop .merk svg{width:100%;height:auto}
.kop nav{margin-left:auto;display:flex;gap:28px;align-items:center}
.kop nav a{text-decoration:none;font-weight:600;font-size:15px;padding:6px 0;border-bottom:2px solid transparent}
.kop nav a:hover,.kop nav a[aria-current]{border-color:currentColor}
.kop .knop{padding:12px 18px;font-size:14px}
.kop.vast,.kop.licht{background:var(--papier);color:var(--inkt);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.kop:not(.vast):not(.licht) .knop{background:var(--papier);color:var(--inkt)}
.kop:not(.vast):not(.licht) .knop:hover{background:var(--gloed)}
.menuknop{display:none;margin-left:auto;background:none;border:0;color:inherit;font:600 15px var(--sans);gap:10px;align-items:center;cursor:pointer;padding:10px 0 10px 12px;min-height:46px;flex-shrink:0}
.menuknop i{display:block;width:22px;height:2px;background:currentColor;position:relative}
.menuknop i::before,.menuknop i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;top:-7px}
.menuknop i::after{top:7px}
.lade{position:fixed;inset:0;z-index:60;background:var(--houtskool);color:var(--papier);padding:22px var(--rand);display:flex;flex-direction:column;
  transform:translateY(-100%);transition:transform .45s cubic-bezier(.7,0,.2,1);visibility:hidden}
.lade.open{transform:none;visibility:visible}
.lade .boven-rij{display:flex;justify-content:space-between;align-items:center}
.lade .boven-rij svg{width:160px}
.lade button{background:none;border:0;color:inherit;font:600 15px var(--sans);cursor:pointer;padding:10px 0}
.lade nav{margin:auto 0;display:flex;flex-direction:column;gap:6px}
.lade nav a{font:400 clamp(40px,12vw,64px)/1.1 var(--serif);text-decoration:none;display:flex;align-items:baseline;gap:14px}
.lade nav a small{font:600 13px var(--sans);letter-spacing:.12em;color:var(--gloed)}
.lade .adres{font-size:15px;opacity:.75}
@media (max-width:900px){.kop nav{display:none}.menuknop{display:flex}.kop .wrap{height:64px}}

/* ===== held (home) ===== */
.held{position:relative;min-height:100svh;color:var(--papier);background:#14161c;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.held video,.held .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.held::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,14,.45) 0%,rgba(10,10,14,0) 22%,rgba(10,10,14,0) 42%,rgba(10,10,14,.78) 100%)}
.held .inhoud{position:relative;z-index:2;padding-bottom:clamp(24px,4vw,44px)}
.held .plek{font:600 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-bottom:16px}
.held h1{font-size:clamp(44px,7.4vw,118px);max-width:12.5em;line-height:.98}
.held h1 em{font-style:normal;color:var(--gloed)}
.held .drie{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(28px,5vw,60px);border-top:1px solid rgba(255,255,255,.35)}
.held .drie a{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:18px 18px 4px 0;text-decoration:none;align-items:baseline}
.held .drie a + a{padding-left:18px;border-left:1px solid rgba(255,255,255,.35)}
.held .drie b{font:400 15px var(--serif);color:var(--gloed);grid-row:span 2}
.held .drie strong{font:400 clamp(24px,2.4vw,34px)/1.1 var(--serif)}
.held .drie span{font-size:14px;opacity:.8;margin-top:4px}
.held .drie a:hover strong{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
@media (max-width:700px){
  .held .drie{grid-template-columns:1fr}
  .held .drie a,.held .drie a + a{padding:12px 0;border-left:0;border-bottom:1px solid rgba(255,255,255,.25)}
  .held .drie span{grid-column:2}
}

/* ===== het erf ===== */
.erf{background:var(--kalk);padding:clamp(70px,9vw,130px) 0 clamp(50px,6vw,80px)}
.erf .intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(30px,4vw,56px)}
.erf h2{font-size:clamp(40px,5.4vw,80px)}
.erf .intro p{font-size:clamp(17px,1.4vw,20px);max-width:34em;margin:0}
.erf-tekening{overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--rand)*-1);padding:0 var(--rand)}
.erf-tekening::-webkit-scrollbar{display:none}
.erf-svg{width:100%;height:auto;overflow:visible}
@media (max-width:700px){.erf-svg{min-width:860px}}
.erf-svg .lijn{fill:none;stroke:var(--inkt);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.erf-svg .dun{stroke-width:1.2}
.erf-svg .mini{font:600 12px var(--sans);letter-spacing:.08em;fill:var(--grijs);stroke:none;text-transform:uppercase}
.erf-svg .hit{fill:transparent}
.erf-svg .vlak{fill:transparent;transition:fill .35s}
.erf-svg .vuur{fill:var(--cognac);transform-origin:1398px 362px;animation:flakker 1.6s ease-in-out infinite}
.erf-svg .rook{stroke:var(--grijs);stroke-width:1.4;stroke-dasharray:14 10;animation:rook 3s linear infinite}
.erf-svg .rook.r2{animation-duration:8s}
.erf-svg .lampjes circle{fill:var(--gloed);transition:filter .3s}
.erf-svg .label circle{fill:var(--inkt);transition:fill .3s}
.erf-svg .label text{fill:var(--papier);font:400 19px var(--serif);text-anchor:middle}
.erf-svg .label text.woord{fill:var(--inkt);font:600 13px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.erf-svg .zone{cursor:pointer;outline:none}
.erf-svg .zone:is(:hover,:focus-visible,.aan) .label circle{fill:var(--cognac)}
.erf-svg .zone:is(:hover,:focus-visible,.aan) .muur{fill:#fff}
.erf-svg .zone:is(:hover,:focus-visible,.aan) .dak{fill:var(--inkt)}
.erf-svg .zone:is(:hover,:focus-visible,.aan) .raam{fill:var(--gloed)}
.erf-svg .zone:is(:hover,:focus-visible,.aan) .doek{fill:var(--doek)}
.erf-svg .zone:is(:hover,:focus-visible,.aan) .ei{fill:var(--kozijn)}
.erf-svg .zone:is(:hover,:focus-visible,.aan) .corten{fill:var(--cognac)}
.erf-svg .zone:is(:hover,:focus-visible,.aan) .lampjes circle{filter:drop-shadow(0 0 5px var(--gloed))}
@keyframes flakker{0%,100%{transform:scale(1,1)}40%{transform:scale(.9,1.18)}70%{transform:scale(1.08,.92)}}
@keyframes rook{to{stroke-dashoffset:-24}}
/* intekenen zodra de tekening in beeld komt */
/* lengtes en vertraging zet site.js per lijn; van de dijk naar het water */
.erf-svg .teken{transition:stroke-dashoffset 1.3s cubic-bezier(.45,0,.2,1)}
.js .erf-svg .rook,.js .erf-svg .vuur,.js .erf-svg .lampjes{opacity:0;transition:opacity 1s 2.6s}
.js .erf-svg.getekend .rook,.js .erf-svg.getekend .vuur,.js .erf-svg.getekend .lampjes{opacity:1}
.js .erf-svg .label{opacity:0;transition:opacity .6s 1.4s}
.js .erf-svg.getekend .label{opacity:1}
.erf .veeg{display:none;font-size:13px;color:var(--grijs);margin:10px 0 0}
@media (max-width:900px){.erf .intro{grid-template-columns:1fr}}
@media (max-width:700px){.erf .veeg{display:block}}
.deuren{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px);margin-top:clamp(30px,4vw,50px)}
.deur{display:block;text-decoration:none;border-top:2px solid var(--inkt);padding-top:16px;transition:color .25s}
.deur .nr{font:400 15px var(--serif);color:var(--cognac)}
.deur h3{font-size:clamp(26px,2.6vw,36px);margin:6px 0 10px}
.deur p{font-size:15px;color:var(--grijs);margin:0 0 14px}
.deur .beeld{aspect-ratio:4/3;overflow:hidden;background:var(--doek)}
.deur .beeld img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.deur:is(:hover,.aan) .beeld img{transform:scale(1.04)}
.deur:is(:hover,.aan) h3{color:var(--cognac)}
@media (max-width:760px){.deuren{grid-template-columns:1fr}.deur .beeld{aspect-ratio:16/9}}

/* ===== hoofdstukken op home ===== */
.hst{padding:clamp(80px,10vw,150px) 0;position:relative}
.hst h2{font-size:clamp(46px,6.6vw,104px)}
.hst .lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55}

/* 1. vuur — houtskool */
.vuur-h{background:var(--houtskool);color:var(--kalk)}
.vuur-h .boven{color:var(--gloed)}
.vuur-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:start}
.vuur-grid .foto{position:relative}
.vuur-grid .foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.stempel{position:absolute;right:clamp(-10px,-1vw,0px);bottom:clamp(-30px,-2vw,-10px);width:clamp(120px,13vw,170px);aspect-ratio:1;border-radius:50%;
  background:var(--gloed);color:var(--houtskool);display:grid;place-content:center;text-align:center;transform:rotate(-8deg)}
.stempel b{font:400 clamp(48px,5.4vw,72px)/.9 var(--serif);display:block}
.stempel span{font:600 11px/1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.gereedschap{list-style:none;padding:0;margin:30px 0 0;border-top:1px solid rgba(241,236,226,.25)}
.gereedschap li{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(241,236,226,.25);font-size:17px}
.gereedschap li b{font:400 14px var(--serif);color:var(--gloed);min-width:24px}
.gereedschap li span{margin-left:auto;font-size:14px;opacity:.6;text-align:right}
.strook{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:10px;margin-top:clamp(50px,7vw,100px)}
.strook img{width:100%;height:clamp(160px,20vw,300px);object-fit:cover}
@media (max-width:700px){.vuur-grid{grid-template-columns:1fr}}
@media (max-width:860px){.strook{grid-template-columns:1fr 1fr}.strook img{height:clamp(130px,36vw,240px)}}
.vuur-h .knop{background:var(--gloed);color:var(--houtskool)}
.vuur-h .knop:hover{background:var(--kalk)}
.vuur-h .link:hover{color:var(--gloed)}

/* 2. winkel — kalk + kassabon */
.winkel-h{background:var(--kalk)}
.winkel-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:center}
.winkel-grid .foto{position:relative;padding-bottom:40px}
.winkel-grid .foto img{width:86%;aspect-ratio:5/6;object-fit:cover}
.bon{position:absolute;right:0;bottom:0;width:min(300px,62%);background:#fff;color:#2a2925;font:400 14px/1.45 var(--mono);padding:22px 20px 28px;
  box-shadow:0 18px 40px rgba(25,24,21,.18);transform:rotate(2.5deg);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%}
.bon .bonkop{text-align:center;border-bottom:1px dashed #999;padding-bottom:10px;margin-bottom:10px}
.bon .bonkop svg{width:150px;margin:0 auto 6px;color:#2a2925}
.bon ul{list-style:none;margin:0;padding:0}
.bon li{display:flex;gap:6px}
.bon li::after{content:"";order:1;flex:1;border-bottom:1px dotted #aaa;margin-bottom:5px}
.bon li i{order:2;font-style:normal}
.bon .tot{border-top:1px dashed #999;margin-top:10px;padding-top:10px;display:flex;justify-content:space-between;font-weight:700}
.bon .dank{text-align:center;margin-top:12px;font-size:12px}
.status{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-weight:600;margin:24px 0 0}
.status i{width:10px;height:10px;border-radius:50%;background:var(--grijs);flex-shrink:0;transform:translateY(-1px)}
.status.open i{background:var(--groen);box-shadow:0 0 0 4px rgba(71,112,76,.18)}
.status span{font-weight:400;color:var(--grijs)}
@media (max-width:700px){.winkel-grid{grid-template-columns:1fr}.winkel-grid .foto{order:2;padding-bottom:0}.winkel-grid .foto img{width:100%;aspect-ratio:4/3}
  .bon{position:relative;width:min(300px,86%);margin:-70px 0 0 auto}}

/* 3. B&B — papier + kozijngroen */
.bb-h{background:var(--papier)}
.bb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,90px);align-items:start}
.bb-grid .foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.bb-h .boven{color:var(--kozijn)}
.kamer{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #d8d1c3}
.kamer li{padding:12px 12px 12px 0;border-bottom:1px solid #d8d1c3;font-size:16px}
.kamer li:nth-child(even){padding-left:14px;border-left:1px solid #d8d1c3}
.bb-h .knop{background:var(--kozijn)}
.bb-h .knop:hover{background:var(--groen)}
@media (max-width:700px){.bb-grid{grid-template-columns:1fr}}

/* kompas: Ursem en de steden eromheen, hemelsbreed */
.kompas{margin-top:44px;display:grid;grid-template-columns:minmax(0,250px) 1fr;gap:28px;align-items:center}
.kompas svg{width:100%;height:auto;overflow:visible}
.kompas .ring{fill:none;stroke:#cfc7b6;stroke-width:1}
.kompas .straal{stroke:var(--kozijn);stroke-width:1.2;stroke-dasharray:3 4}
.kompas .stip{fill:var(--kozijn)}
.kompas .thuis{fill:var(--cognac)}
.kompas text{font:600 12px var(--sans);fill:var(--inkt);letter-spacing:.02em}
.kompas text.km{font-weight:400;fill:var(--grijs)}
.kompas p{font-size:15px;color:var(--grijs);margin:0}
@media (max-width:420px){.kompas{grid-template-columns:1fr}.kompas svg{max-width:220px}}

/* ===== gastvrijheid + gastenboek ===== */
.gast{background:var(--kozijn);color:var(--kalk);padding:0}
.gast .beeld{height:clamp(280px,48vw,640px);background:center/cover no-repeat}
.gast-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(30px,6vw,100px);padding-top:clamp(60px,8vw,120px);padding-bottom:clamp(60px,8vw,120px)}
.gast h2{font-size:clamp(38px,4.6vw,68px)}
.gast .boven{color:var(--gloed)}
.boek{position:relative}
.boek blockquote{margin:0;display:none}
.boek blockquote.aan{display:block;animation:blad .6s ease}
@keyframes blad{from{opacity:0;transform:translateY(8px)}}
.boek blockquote p{font:400 clamp(22px,2.2vw,30px)/1.35 var(--serif);hyphens:manual}
.boek blockquote p:first-child::before{content:"\201C";color:var(--gloed)}
.boek blockquote p:last-of-type::after{content:"\201D";color:var(--gloed)}
.boek cite{display:block;font-style:normal;font-weight:600;margin-top:18px}
.boek cite span{font-weight:400;opacity:.7}
.blader{display:flex;align-items:center;gap:18px;margin-top:30px}
.blader button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(241,236,226,.5);background:none;color:inherit;cursor:pointer;display:grid;place-content:center}
.blader button:hover{background:var(--kalk);color:var(--kozijn)}
.blader svg{width:18px;height:12px}
.blader output{font:400 15px var(--serif);min-width:3.5em}
@media (max-width:700px){.gast-grid{grid-template-columns:1fr}}

/* ===== Martin & Anita / contact ===== */
.wij{background:var(--kalk);padding:clamp(80px,10vw,140px) 0}
.wij-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,100px);align-items:center}
.wij-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.wij h2{font-size:clamp(40px,5vw,74px)}
.handtekening{font:400 clamp(30px,3vw,40px) var(--serif);color:var(--cognac);margin-top:10px}
.gegevens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 30px;margin-top:34px;border-top:1px solid #cfc7b6;padding-top:24px}
.gegevens h3{font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grijs);margin-bottom:6px}
.gegevens p{margin:0;font-size:16px}
.gegevens a{text-decoration:none;border-bottom:1px solid currentColor}
@media (max-width:700px){.wij-grid{grid-template-columns:1fr}}
@media (max-width:400px){.gegevens{grid-template-columns:1fr}}

/* ===== voet ===== */
.voet{background:var(--houtskool);color:var(--kalk);padding:clamp(60px,8vw,100px) 0 30px;font-size:15px}
.voet .groot{width:100%;color:var(--kalk);opacity:.95}
.voet .regel{display:block;width:min(100%,560px);margin-top:14px;color:var(--gloed)}
.voet-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin-top:clamp(40px,6vw,70px);border-top:1px solid rgba(241,236,226,.2);padding-top:30px}
.voet h3{font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gloed);margin-bottom:10px}
.voet p{margin:0 0 6px}
.voet a{text-decoration:none}
.voet a:hover{text-decoration:underline}
.voet .status{display:block;margin-top:10px}.voet .status i{display:inline-block;margin-right:8px}.voet .status span{display:block;margin-left:18px}
.voet .klein{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;margin-top:50px;font-size:13px;opacity:.6}
@media (max-width:860px){.voet-grid{grid-template-columns:1fr 1fr}}
@media (max-width:440px){.voet-grid{grid-template-columns:1fr}}

/* ===== subpagina's ===== */
.pkop{position:relative;min-height:min(86svh,820px);display:flex;align-items:flex-end;color:var(--papier);background:var(--houtskool);overflow:hidden}
.pkop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pkop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.4),rgba(10,10,10,0) 30%,rgba(10,10,10,.1) 50%,rgba(10,10,10,.72))}
.pkop .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(30px,5vw,60px)}
.pkop h1{font-size:clamp(50px,9vw,150px);line-height:.92}
.pkop .boven{color:var(--gloed);text-shadow:0 1px 8px rgba(0,0,0,.55)}
.pkop .onder{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:22px;font-size:15px}
.pkop .onder span{display:flex;gap:10px;align-items:baseline}
.pkop .onder b{font:400 15px var(--serif);color:var(--gloed)}
.pkop .status span{color:inherit;opacity:.75}
.pkop .status i{background:var(--kalk)}

.blok{padding:clamp(70px,9vw,130px) 0}
.blok.kalk{background:var(--kalk)}
.blok.donker{background:var(--houtskool);color:var(--kalk)}
.blok.donker .boven{color:var(--gloed)}
.blok.groen{background:var(--kozijn);color:var(--kalk)}
.blok.groen .boven{color:var(--gloed)}
.blok h2{font-size:clamp(38px,5vw,76px);margin-bottom:24px}
.twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:center}
.twee.boven-uit{align-items:start}
.twee img{width:100%;aspect-ratio:4/5;object-fit:cover}
.twee img.breed{aspect-ratio:4/3}
.twee .omgekeerd{order:-1}
@media (max-width:700px){.twee{grid-template-columns:1fr}.twee .omgekeerd{order:0}}
.groot-p{font:400 clamp(24px,2.6vw,36px)/1.3 var(--serif);max-width:26em;hyphens:manual}

/* middag-tijdlijn */
.middag{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin:50px 0 0;padding:0}
.middag li{list-style:none;border-top:2px solid var(--gloed);padding-top:18px}
.middag img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:18px}
.middag time{font:400 15px var(--serif);color:var(--gloed)}
.middag h3{font-size:clamp(24px,2.2vw,32px);margin:6px 0 10px}
.middag p{font-size:16px;opacity:.85}
@media (max-width:860px){.middag{grid-template-columns:1fr}}

/* proeverijen */
.proef{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid #cfc7b6;margin-top:40px}
.proef article{padding:26px 26px 30px 0}
.proef article + article{padding-left:26px;border-left:1px solid #cfc7b6}
.proef h3{font-size:clamp(26px,2.4vw,34px);margin:4px 0 12px}
.proef .wie{font-size:14px;color:var(--grijs);margin-top:auto}
.proef .wanneer{font:400 15px var(--serif);color:var(--cognac)}
@media (max-width:860px){.proef{grid-template-columns:1fr}.proef article,.proef article + article{padding:22px 0;border-left:0;border-bottom:1px solid #cfc7b6}}

/* boekformulier */
.formulier{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;margin-top:10px}
.formulier label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.formulier .heel{grid-column:1/-1}
.formulier input,.formulier select{min-height:50px}
.formulier select{-webkit-appearance:none;appearance:none;padding-right:40px!important;background:rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f1ece2' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center/12px 8px}
.formulier input,.formulier select,.formulier textarea{font:400 17px var(--sans);padding:13px 14px;border:1px solid rgba(241,236,226,.35);background:rgba(255,255,255,.04);color:inherit;border-radius:0;width:100%}
.formulier select option{color:#000}
.formulier textarea{min-height:130px;resize:vertical}
.formulier input:focus,.formulier select:focus,.formulier textarea:focus{outline:2px solid var(--gloed);outline-offset:0;border-color:transparent}
.formulier .noot{font-size:14px;opacity:.7;grid-column:1/-1;margin:0}
@media (max-width:600px){.formulier{grid-template-columns:1fr}}

/* fotorij en citaat */
.rij{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,31%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--rand) 8px;scrollbar-width:thin}
.rij img{width:100%;aspect-ratio:3/4;object-fit:cover;scroll-snap-align:start}
@media (max-width:600px){.rij{grid-auto-columns:78%}}
.citaat{max-width:900px}
.citaat p{font:400 clamp(26px,3vw,42px)/1.3 var(--serif);hyphens:manual}
.citaat cite{font-style:normal;font-weight:600}
.legaal{max-width:780px;padding-top:140px}
.legaal h1{font-size:clamp(40px,6vw,72px);margin-bottom:30px}
.legaal h2{font-size:28px;margin:30px 0 12px}
.legaal p,.legaal li{font-size:16px}

/* tussenmaat (tablet staand): twee kolommen, kleinere tussenruimte */
@media (min-width:701px) and (max-width:900px){
  .vuur-grid,.winkel-grid,.bb-grid,.gast-grid,.wij-grid,.twee{gap:32px}
  .kamer{grid-template-columns:1fr}.kamer li:nth-child(even){padding-left:0;border-left:0}
  .kompas{grid-template-columns:1fr}.kompas svg{max-width:240px}
  .winkel-grid .foto{padding-bottom:0}.winkel-grid .foto img{width:100%;aspect-ratio:4/5}
  .bon{position:relative;width:88%;margin:-90px 0 0 auto}
}
/* telefoon liggend: lage held, titel onder de kop */
@media (max-height:520px) and (orientation:landscape){
  .held{padding-top:80px;min-height:auto}
  .held .inhoud{padding-top:40px}
  .held h1{font-size:clamp(32px,5.4vw,48px)}
  .held .drie{margin-top:20px}.held .drie strong{font-size:20px}
  .pkop{min-height:auto;padding-top:120px}
  .pkop h1{font-size:clamp(40px,7vw,64px)}
  .lade nav a{font-size:34px;min-height:44px;align-items:center}
  .lade nav{gap:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .erf-svg .teken{stroke-dasharray:none!important}
  .js .erf-svg .rook,.js .erf-svg .vuur,.js .erf-svg .lampjes{opacity:1}
  .js .erf-svg .label{opacity:1}
}

/* ===== nieuwsbrief: blok boven contact + rustige pop-up (2026-10-05) ===== */
.nieuws{background:var(--kozijn);color:var(--kalk);padding:clamp(70px,9vw,120px) 0}
.nieuws-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:center}
.nieuws h2{font-size:clamp(40px,5vw,74px)}
.nieuws .boven{color:var(--gloed)}
.nieuws .lead{font-size:clamp(18px,1.5vw,21px);margin-top:22px;opacity:.9}
.nb-form{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.nb-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.nb-form .heel{grid-column:1/-1}
.nb-form input{font:400 17px var(--sans);min-height:50px;padding:13px 14px;border:1px solid rgba(241,236,226,.35);background:rgba(255,255,255,.05);color:inherit;border-radius:0;width:100%}
.nb-form input:focus{outline:2px solid var(--gloed);outline-offset:0;border-color:transparent}
.nb-form .noot{grid-column:1/-1;margin:0;font-size:14px;opacity:.8}
.nb-hi{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:700px){.nieuws-grid{grid-template-columns:1fr}}
@media (max-width:440px){.nb-form{grid-template-columns:1fr}}
.gegevens .tweede{margin-top:4px}

.nb-pop{position:fixed;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);z-index:60;width:min(380px,calc(100vw - 24px));
  background:var(--houtskool);color:var(--kalk);padding:28px 26px 24px;box-shadow:0 18px 50px rgba(0,0,0,.35);
  transform:translateY(24px);opacity:0;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s}
.nb-pop.aan{transform:none;opacity:1}
.nb-pop .boven{color:var(--gloed);margin-bottom:10px}
.nb-pop h2{font-size:32px;margin-bottom:10px}
.nb-pop > p{font-size:15px;opacity:.85;margin-bottom:16px}
.nb-pop .nb-form{grid-template-columns:1fr;gap:12px}
.nb-pop .knop{width:100%;justify-content:center}
.nb-dicht{position:absolute;z-index:2;top:6px;right:6px;width:44px;height:44px;border:0;background:none;color:inherit;font:400 28px/1 var(--sans);cursor:pointer}
.nb-dicht:hover{color:var(--gloed)}
@media (max-width:500px){.nb-pop{right:12px;left:12px;bottom:12px;width:auto;padding:22px 20px 18px}.nb-pop h2{font-size:26px}}

/* vuurfoto als korte lus */
.vuur-grid .foto video{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--roet)}
.stempel b.lang{font-size:clamp(34px,3.8vw,50px)}
/* pop-up op lage schermen (telefoon liggend): compacter en nooit hoger dan het scherm */
.nb-pop{max-height:calc(100svh - 24px);overflow-y:auto}
@media (max-height:520px){.nb-pop{padding:16px 20px 14px}.nb-pop > p,.nb-pop .boven{display:none}.nb-pop h2{font-size:24px;margin:0 40px 10px 0}.nb-pop .nb-form label{gap:4px}}

/* tikdoelen >= 40px (livegang danslotello.nl, 2026-10-05) */
.kop .merk{display:flex;align-items:center;min-height:44px}
.kop nav a{padding:11px 0;min-width:40px;text-align:center}
.lade button{min-height:44px}
.knoppen .link{display:inline-block;padding:11px 0;border-bottom:0;background:linear-gradient(currentColor,currentColor) left calc(100% - 9px)/100% 2px no-repeat}
.voet .klein a{display:inline-block;padding:12px 0}
.legaal a[href^="tel:"],.legaal a[href^="mailto:"]{display:inline-block;padding:6px 0}
@media (min-width:701px) and (max-width:900px){.formulier .soort,.formulier .datum{grid-column:1/-1}}