<!-- Logement Zeelucht · boutique-hotel, Domburg · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="zl-site">
  <div class="zl-top"><div class="zl-w zl-top__in">
    <span>Badhuisweg 7, Domburg · 180 m tot het strand</span>
    <span class="zl-top__r"><span>Gastbeoordeling <b>9,2</b> · 286 verblijven</span><a href="#">0118 123 456</a><span class="zl-lang"><b>NL</b><a href="#">DE</a><a href="#">EN</a></span></span>
  </div></div>

  <div class="zl-nav" role="banner"><div class="zl-w zl-nav__in">
    <ul class="zl-nav__l"><li><a href="#zl-kamers">Kamers</a></li><li><a href="#zl-arr">Arrangementen</a></li><li><a href="#zl-ontbijt">Ontbijt</a></li></ul>
    <a class="zl-logo" href="#" aria-label="Logement Zeelucht, naar de homepage">
      <svg viewBox="0 0 40 14" aria-hidden="true"><path d="M1 9c3-4 6-4 9 0s6 4 9 0 6-4 9 0 6 4 9 0"/><path d="M1 13c3-2 6-2 9 0s6 2 9 0 6-2 9 0 6 2 9 0" opacity=".45"/></svg>
      <b>Zeelucht</b><span>logement · Domburg · sinds 1912</span>
    </a>
    <ul class="zl-nav__r"><li><a href="#zl-omgeving">Omgeving</a></li><li><a href="#zl-praktisch">Praktisch</a></li><li><a class="zl-btn zl-btn--sm" href="#zl-boek">Boek direct</a></li></ul>
    <button class="zl-burger" type="button" aria-expanded="false" aria-label="Menu openen"><span></span><span></span></button>
  </div>
  <div class="zl-mnav" hidden><a href="#zl-kamers">Kamers</a><a href="#zl-arr">Arrangementen</a><a href="#zl-ontbijt">Ontbijt</a><a href="#zl-omgeving">Omgeving</a><a href="#zl-praktisch">Praktisch</a><a href="#zl-boek">Boek direct</a></div>
  </div>

  <div class="zl-hero">
    <img src="https://neddev.com/lab-media/site-hotel-1.webp" alt="Duinen en strand van Domburg met een rij strandhuisjes in avondlicht" loading="lazy">
    <div class="zl-w zl-hero__t">
      <p class="zl-kick">Villa uit 1912 · negen kamers · ontbijt inbegrepen</p>
      <h1>Slapen achter de duinen van Domburg</h1>
    </div>
  </div>

  <div class="zl-w zl-boekwrap" id="zl-boek">
    <form class="zl-boek" novalidate>
      <label class="zl-f"><span>Aankomst</span><input type="date" name="zl-in"></label>
      <label class="zl-f"><span>Vertrek</span><input type="date" name="zl-uit"></label>
      <label class="zl-f"><span>Gasten</span><select name="zl-gst"><option value="1">1 gast</option><option value="2" selected>2 gasten</option><option value="3">3 gasten</option><option value="4">4 gasten</option></select></label>
      <label class="zl-f"><span>Kamertype</span><select name="zl-type"><option value="alle">Alle kamers</option><option value="duin">Duinkamer</option><option value="tuin">Tuinkamer met terras</option><option value="zee">Zeekamer</option><option value="toren">Torenkamer</option><option value="familie">Familiekamer</option><option value="zolder">Zoldersuite</option></select></label>
      <button class="zl-btn zl-boek__go" type="submit">Beschikbaarheid</button>
    </form>
    <p class="zl-boek__note">Direct geboekt: laagste prijs, ontbijt inbegrepen en kosteloos annuleren tot 7 dagen voor aankomst.</p>
    <div class="zl-av" hidden aria-live="polite"></div>
  </div>

  <div class="zl-w zl-tide" aria-label="Getij en zon vandaag">
    <div class="zl-tide__l"><b>Getij bij Westkapelle</b><span>di 7 okt</span></div>
    <svg class="zl-tide__c" viewBox="0 0 600 60" preserveAspectRatio="none" aria-hidden="true"><path d="M0 46 C 60 46, 90 10, 150 10 S 240 46, 300 46 S 390 12, 450 12 S 540 46, 600 46"/><circle cx="150" cy="10" r="4"/><circle cx="450" cy="12" r="4"/></svg>
    <dl class="zl-tide__d">
      <div><dt>Hoogwater</dt><dd>06:12 · 18:41</dd></div>
      <div><dt>Laagwater</dt><dd>00:24 · 12:38</dd></div>
      <div><dt>Zon onder</dt><dd>18:57</dd></div>
      <div><dt>Zeewater</dt><dd>16 °C</dd></div>
    </dl>
  </div>

  <div class="zl-w zl-intro">
    <p class="zl-intro__big">Zeelucht staat aan de rand van het dorp, waar de Badhuisweg ophoudt en het duinpad begint. Een villa uit 1912 met negen kamers, een tuin vol hortensia's en een ontbijttafel waar we elke ochtend zelf achter staan.</p>
    <div class="zl-intro__side">
      <dl>
        <div><dt>Kamers</dt><dd>9, allemaal anders</dd></div>
        <div><dt>Naar het strand</dt><dd>180 m, 3 min lopen</dd></div>
        <div><dt>Inchecken</dt><dd>15:00 tot 20:00</dd></div>
        <div><dt>Fietsen</dt><dd>12 te huur, ook e-bikes</dd></div>
      </dl>
      <p class="zl-sig">Anne en Pieter Kodde<span>gastvrouw en gastheer sinds 2016</span></p>
    </div>
  </div>

  <div class="zl-sec" id="zl-kamers"><div class="zl-w">
    <div class="zl-h"><h2>Kamers</h2><p>Zes soorten kamers, verdeeld over drie verdiepingen. Geen kamer is hetzelfde; de prijzen zijn per nacht voor twee personen, inclusief ontbijt.</p></div>
    <article class="zl-room">
      <img src="https://neddev.com/lab-media/site-hotel-2.webp" alt="Lichte tweepersoonskamer met linnen beddengoed en uitzicht op de duinen" loading="lazy">
      <div class="zl-room__t">
        <span class="zl-room__nr">Kamer 1 en 2 · eerste verdieping</span>
        <h3>Duinkamer</h3>
        <p>Het raam kijkt recht op de helmgrasduinen. 's Ochtends valt het eerste licht op het bed; gordijnen van dik linnen houden het donker als u dat wilt.</p>
        <ul class="zl-spec"><li><b>18</b> m²</li><li><b>2</b> personen</li><li>bed <b>160</b> cm</li><li>inloopdouche</li></ul>
        <p class="zl-room__p">vanaf <b>€ 139</b> per nacht</p>
      </div>
    </article>
    <article class="zl-room zl-room--r">
      <img src="https://neddev.com/lab-media/site-hotel-4.webp" alt="Zoldersuite met schuin wit plafond en een vrijstaand bad bij het dakraam" loading="lazy">
      <div class="zl-room__t">
        <span class="zl-room__nr">Kamer 8 en 9 · onder de kap</span>
        <h3>Zoldersuite</h3>
        <p>De oude zolder met de originele spanten. Het bad staat bij het dakkapel-raam, met de zee in de verte. Onze rustigste kamers: er is niemand boven u.</p>
        <ul class="zl-spec"><li><b>38</b> m²</li><li><b>2</b> personen</li><li>bed <b>180</b> cm</li><li>vrijstaand bad</li></ul>
        <p class="zl-room__p">vanaf <b>€ 229</b> per nacht</p>
      </div>
    </article>
    <div class="zl-tbl">
      <table>
        <caption>Alle kamers op een rij</caption>
        <thead><tr><th>Kamer</th><th class="zl-n">Grootte</th><th class="zl-n">Pers.</th><th>Indeling</th><th>Uitzicht</th><th class="zl-n">Vanaf</th></tr></thead>
        <tbody><tr><td><b>Duinkamer</b><span>kamer 1 en 2</span></td><td class="zl-n">18 m²</td><td class="zl-n">2</td><td>Bed 160 x 200, inloopdouche</td><td>Duinen, eerste verdieping</td><td class="zl-n zl-pr">€ 139</td></tr><tr><td><b>Tuinkamer met terras</b><span>kamer 3</span></td><td class="zl-n">22 m²</td><td class="zl-n">2</td><td>Bed 180 x 200, douche, hond welkom</td><td>Tuin, begane grond</td><td class="zl-n zl-pr">€ 149</td></tr><tr><td><b>Zeekamer</b><span>kamer 4 en 5</span></td><td class="zl-n">24 m²</td><td class="zl-n">2</td><td>Bed 180 x 200, balkon, bad en douche</td><td>Zee tussen de duinen door</td><td class="zl-n zl-pr">€ 179</td></tr><tr><td><b>Torenkamer</b><span>kamer 7</span></td><td class="zl-n">20 m²</td><td class="zl-n">2</td><td>Bed 160 x 200, rond raam, douche</td><td>Dorp en duinen, tweede verdieping</td><td class="zl-n zl-pr">€ 169</td></tr><tr><td><b>Familiekamer</b><span>kamer 6</span></td><td class="zl-n">32 m²</td><td class="zl-n">4</td><td>Bed 180 x 200 en stapelbed, douche</td><td>Tuin en dorp</td><td class="zl-n zl-pr">€ 199</td></tr><tr><td><b>Zoldersuite</b><span>kamer 8 en 9</span></td><td class="zl-n">38 m²</td><td class="zl-n">2</td><td>Bed 180 x 200, vrijstaand bad</td><td>Zee en dorp, onder de kap</td><td class="zl-n zl-pr">€ 229</td></tr></tbody>
      </table>
    </div>
  </div></div>

  <div class="zl-sec zl-sec--ont" id="zl-ontbijt"><div class="zl-w zl-ont">
    <img src="https://neddev.com/lab-media/site-hotel-3.webp" alt="Ontbijttafel bij het raam met zuurdesembrood, eieren, kaas en jus d'orange" loading="lazy">
    <div class="zl-ont__card">
      <h2>Ontbijt</h2>
      <p class="zl-ont__time">Elke dag 8:00 tot 10:30, in het weekend tot 11:00</p>
      <ul class="zl-menu">
        <li><b>Zuurdesem en Zeeuwse bolus</b><span>van de bakker in de Ooststraat</span></li>
        <li><b>Eitje naar keuze</b><span>van de kippen bij Hoeve Klein Vreeswijk, Serooskerke</span></li>
        <li><b>Boerenkaas en roomboter</b><span>uit Walcheren, ongezouten of met zeezout</span></li>
        <li><b>Huisgemaakte jam</b><span>duindoorn, aardbei en wat het seizoen brengt</span></li>
        <li><b>Versgeperste jus en koffie</b><span>bonen van een branderij in Middelburg</span></li>
      </ul>
      <p class="zl-ont__x">Ontbijt op bed in de suites: € 7,50 per persoon extra. Glutenvrij of veganistisch? Laat het ons de dag ervoor weten.</p>
    </div>
  </div></div>

  <div class="zl-sec" id="zl-arr"><div class="zl-w">
    <div class="zl-h"><h2>Arrangementen</h2><p>Alle prijzen voor twee personen, inclusief ontbijt en toeristenbelasting.</p></div>
    <ul class="zl-arr">
      <li><div class="zl-arr__n"><span>2 nachten</span><b>Buiten het seizoen</b></div><p>Zondag tot en met donderdag, 1 november tot 1 april. Fles Zeeuwse wijn op de kamer en late check-out tot 13:00.</p><div class="zl-arr__p"><b>€ 298</b><a href="#zl-boek" class="zl-btn zl-btn--line">Data bekijken</a></div></li>
      <li><div class="zl-arr__n"><span>3 nachten</span><b>Fietsen over Walcheren</b></div><p>Twee e-bikes voor drie dagen, routes langs Veere, Westkapelle en het Oranjezon, en elke dag een lunchpakket uit onze keuken.</p><div class="zl-arr__p"><b>€ 545</b><a href="#zl-boek" class="zl-btn zl-btn--line">Data bekijken</a></div></li>
      <li><div class="zl-arr__n"><span>2 nachten</span><b>Winterstrand</b></div><p>Na de strandwandeling staat er soep klaar bij de kachel in de serre. December tot en met februari, ook rond de feestdagen.</p><div class="zl-arr__p"><b>€ 279</b><a href="#zl-boek" class="zl-btn zl-btn--line">Data bekijken</a></div></li>
    </ul>
  </div></div>

  <div class="zl-sec zl-sec--omg" id="zl-omgeving"><div class="zl-w zl-omg">
    <div>
      <div class="zl-h zl-h--s"><h2>Omgeving</h2><p>Domburg is het oudste badplaatsje van Zeeland. Vanaf hier is alles op Walcheren met de fiets te doen.</p></div>
      <ul class="zl-dist">
        <li><span>Strand en boulevard</span><b>180 m</b></li>
        <li><span>Dorpsstraat, winkels en restaurants</span><b>400 m</b></li>
        <li><span>Kasteel Westhove en de Oranjerie</span><b>1,6 km</b></li>
        <li><span>Westkapelle, dijk en vuurtoren</span><b>9 km</b></li>
        <li><span>Veere, haven en Grote Kerk</span><b>13 km</b></li>
        <li><span>Middelburg, binnenstad en station</span><b>15 km</b></li>
      </ul>
    </div>
    <figure class="zl-map">
      <svg viewBox="0 0 320 300" role="img" aria-label="Schematische kaart van Walcheren met Domburg, Westkapelle, Veere, Middelburg en Vlissingen">
        <path class="zl-map__land" d="M42 150 L 70 112 L 92 80 C 120 58, 170 48, 214 60 L 246 78 L 262 96 C 282 130, 284 176, 262 210 L 232 246 L 196 262 C 172 270, 146 262, 126 246 L 92 214 L 60 182 Z"/>
        <path class="zl-map__road" d="M95 82 C 130 110, 160 140, 185 170 M185 170 L 172 262 M185 170 C 210 150, 228 115, 240 84"/>
        <g class="zl-map__pt"><circle cx="95" cy="82" r="6" class="zl-map__me"/><text x="104" y="74">Domburg</text></g>
        <g class="zl-map__pt"><circle cx="46" cy="150" r="3.5"/><text x="54" y="154">Westkapelle</text></g>
        <g class="zl-map__pt"><circle cx="240" cy="84" r="3.5"/><text x="222" y="72">Veere</text></g>
        <g class="zl-map__pt"><circle cx="185" cy="170" r="3.5"/><text x="194" y="174">Middelburg</text></g>
        <g class="zl-map__pt"><circle cx="172" cy="262" r="3.5"/><text x="180" y="266">Vlissingen</text></g>
        <text class="zl-map__sea" x="20" y="40">Noordzee</text>
      </svg>
      <figcaption>Walcheren, schematisch. Bus naar station Middelburg: 25 minuten.</figcaption>
    </figure>
    <img class="zl-omg__img" src="https://neddev.com/lab-media/site-hotel-5.webp" alt="Fietspad tussen populieren door de Walcherse polder met een molen in de verte" loading="lazy">
  </div></div>

  <div class="zl-sec"><div class="zl-w zl-rev">
    <div class="zl-rev__sum">
      <h2>Wat gasten schrijven</h2>
      <p class="zl-rev__big">9,2<span>gemiddeld uit 286 verblijven, 2025 en 2026</span></p>
      <ul class="zl-bars">
        <li><span>Ontbijt</span><i style="--v:96%"></i><b>9,6</b></li>
        <li><span>Ligging</span><i style="--v:95%"></i><b>9,5</b></li>
        <li><span>Bedden</span><i style="--v:93%"></i><b>9,3</b></li>
        <li><span>Prijs en kwaliteit</span><i style="--v:87%"></i><b>8,7</b></li>
      </ul>
    </div>
    <div class="zl-rev__l">
      <blockquote><p>“We kwamen voor het strand en bleven elke ochtend een uur langer aan het ontbijt hangen. Pieter wist precies welk fietsrondje we bij die wind moesten nemen.”</p><footer><b>Saskia en Rob</b> · Utrecht · Zeekamer · augustus 2026 · <em>10</em></footer></blockquote>
      <blockquote><p>“Torenkamer met dat ronde raam is bijzonder. Klein, dat wel, maar je hoort 's nachts de zee als het stil is.”</p><footer><b>Jeroen V.</b> · Gent · Torenkamer · juni 2026 · <em>9</em></footer></blockquote>
      <blockquote><p>“Wir kommen seit drei Jahren jeden Herbst. Der Hund darf mit, und der Garten ist ein Traum.”</p><footer><b>Familie Hartmann</b> · Düsseldorf · Tuinkamer · oktober 2025 · <em>9</em></footer></blockquote>
    </div>
  </div></div>

  <div class="zl-sec zl-sec--pr" id="zl-praktisch"><div class="zl-w zl-pr2">
    <div>
      <div class="zl-h zl-h--s"><h2>Praktisch</h2></div>
      <dl class="zl-info">
        <div><dt>Inchecken</dt><dd>15:00 tot 20:00, later in overleg</dd></div>
        <div><dt>Uitchecken</dt><dd>tot 11:00</dd></div>
        <div><dt>Parkeren</dt><dd>6 plekken op eigen terrein, € 10 per nacht, laadpaal</dd></div>
        <div><dt>Honden</dt><dd>alleen in de Tuinkamer, € 15 per nacht</dd></div>
        <div><dt>Toeristenbelasting</dt><dd>€ 2,95 per persoon per nacht</dd></div>
        <div><dt>Annuleren</dt><dd>kosteloos tot 7 dagen voor aankomst</dd></div>
        <div><dt>Kinderen</dt><dd>welkom in de Familiekamer, tot 4 jaar gratis</dd></div>
        <div><dt>Bereikbaar</dt><dd>receptie 8:00 tot 21:00, 0118 123 456</dd></div>
      </dl>
    </div>
    <div class="zl-faq">
      <h3>Vaak gevraagd</h3>
      <div class="zl-faq__i is-open"><button type="button" aria-expanded="true">Is er een lift?</button><div class="zl-faq__a"><p>Nee, het is een oude villa met een houten trap. Wie slecht ter been is, raden we de Tuinkamer op de begane grond aan.</p></div></div>
      <div class="zl-faq__i"><button type="button" aria-expanded="false">Kan ik met de trein komen?</button><div class="zl-faq__a"><p>Ja. Neem de trein naar Middelburg en daar de bus naar Domburg, halte Markt. Vanaf daar is het vier minuten lopen.</p></div></div>
      <div class="zl-faq__i"><button type="button" aria-expanded="false">Hebben jullie strandstoelen of windschermen?</button><div class="zl-faq__a"><p>In de schuur staan strandstoelen, windschermen en een bolderkar. Gratis te gebruiken, terugzetten is genoeg.</p></div></div>
      <div class="zl-faq__i"><button type="button" aria-expanded="false">Kunnen we ook een kamer voor één nacht boeken?</button><div class="zl-faq__a"><p>Doordeweeks wel. Op vrijdag en zaterdag, en in juli en augustus, geldt een minimum van twee nachten.</p></div></div>
    </div>
  </div></div>

  <div class="zl-foot" role="contentinfo"><div class="zl-w">
    <div class="zl-foot__g">
      <div class="zl-foot__b"><b>Zeelucht</b><p>Badhuisweg 7<br>4357 AV Domburg</p><p><a href="#">0118 123 456</a><br><a href="#">logies@voorbeeld.nl</a></p></div>
      <div><h4>Verblijf</h4><a href="#zl-kamers">Kamers</a><a href="#zl-arr">Arrangementen</a><a href="#zl-ontbijt">Ontbijt</a><a href="#">Cadeaubon</a></div>
      <div><h4>Domburg</h4><a href="#zl-omgeving">Omgeving</a><a href="#">Fietsroutes</a><a href="#">Restauranttips</a><a href="#">Agenda</a></div>
      <div><h4>Informatie</h4><a href="#zl-praktisch">Praktisch</a><a href="#">Huisregels</a><a href="#">Voorwaarden</a><a href="#">Privacy</a></div>
      <form class="zl-news" onsubmit="return false"><h4>Twee keer per jaar post</h4><p>Wanneer het stil is aan zee en er nog plek is. Meer sturen we niet.</p><div><input type="email" placeholder="uw@voorbeeld.nl" aria-label="E-mailadres"><button type="submit" class="zl-btn zl-btn--sm">Aanmelden</button></div></form>
    </div>
    <div class="zl-foot__x"><span>Green Key zilver</span><span>Lid Koninklijke Horeca Nederland</span><span>KvK 22045678</span><span>BTW NL001234567B02</span><span>© 2026 Logement Zeelucht</span></div>
  </div></div>
</div>
</div>

/* Logement Zeelucht · boutique-hotel, Domburg · NedDev · eigen werk. */
/* fonts (Fontshare): gambarino@400 + satoshi@400,500,700 */
.zl-site{--sand:#f3ede2;--shell:#fbf8f2;--ink:#2b2622;--mute:#776d63;--line:#ddd3c3;--sea:#2e5b60;--sea2:#244a4e;--sun:#d4733c;
  container-type:inline-size;background:var(--sand);color:var(--ink);font:400 16px/1.6 'Satoshi',sans-serif;-webkit-font-smoothing:antialiased}
.zl-site *{box-sizing:border-box}
.zl-site a{color:inherit;text-decoration:none}
.zl-site img{display:block;max-width:100%}
.zl-site h1,.zl-site h2,.zl-site h3,.zl-site h4{margin:0;font-weight:400}
.zl-w{max-width:1200px;margin:0 auto;padding:0 32px}
.zl-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--sea);color:#fff!important;border:1px solid var(--sea);border-radius:999px;padding:13px 24px;font:500 15px/1 'Satoshi',sans-serif;cursor:pointer;transition:background .15s,color .15s}
.zl-btn:hover{background:var(--sea2)}
.zl-btn--sm{padding:9px 18px;font-size:14px}
.zl-btn--line{background:none;color:var(--sea)!important}
.zl-btn--line:hover{background:var(--sea);color:#fff!important}
.zl-top{border-bottom:1px solid var(--line);font-size:13px;color:var(--mute)}
.zl-top__in{display:flex;justify-content:space-between;gap:20px;padding-top:8px;padding-bottom:8px}
.zl-top__r{display:flex;gap:22px;align-items:center}
.zl-top b{color:var(--ink)}
.zl-top a:hover{color:var(--sea)}
.zl-lang{display:flex;gap:8px}
.zl-lang b,.zl-lang a{font-size:12px;letter-spacing:.06em}
.zl-nav{background:var(--sand);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line)}
.zl-nav__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:84px}
.zl-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center}
.zl-nav__r{justify-content:flex-end}
.zl-nav ul a:not(.zl-btn){font-size:15px;position:relative;padding:4px 0}
.zl-nav ul a:not(.zl-btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.zl-nav ul a:not(.zl-btn):hover::after{transform:scaleX(1)}
.zl-logo{display:flex;flex-direction:column;align-items:center;text-align:center}
.zl-logo svg{width:40px;height:14px;fill:none;stroke:var(--sea);stroke-width:1.4;margin-bottom:2px}
.zl-logo b{font:400 34px/1 'Gambarino',serif;letter-spacing:-.01em}
.zl-logo span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.zl-burger{display:none;justify-self:end;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.zl-burger span{width:16px;height:1.5px;background:var(--ink);transition:transform .2s}
.zl-burger[aria-expanded=true] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.zl-burger[aria-expanded=true] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.zl-mnav{padding:4px 20px 14px;border-top:1px solid var(--line)}
.zl-mnav a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}

.zl-hero{position:relative;height:540px;overflow:hidden;background:#2b2622}
.zl-hero img{width:100%;height:100%;object-fit:cover;object-position:center 60%;filter:saturate(.78) sepia(.08)}
.zl-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,22,19,.5) 0%,rgba(25,22,19,0) 55%),linear-gradient(180deg,rgba(25,22,19,0) 35%,rgba(25,22,19,.6) 100%)}
.zl-hero__t{position:absolute;left:0;right:0;bottom:104px;z-index:1;color:#fff}
.zl-kick{font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px;opacity:.92}
.zl-hero h1{text-shadow:0 2px 24px rgba(0,0,0,.35);font:400 64px/1 'Gambarino',serif;letter-spacing:-.015em;max-width:13ch;color:#fff}

.zl-boekwrap{position:relative;z-index:2;margin-top:-64px}
.zl-boek{display:grid;grid-template-columns:1fr 1fr .8fr 1.1fr auto;background:var(--shell);border:1px solid var(--line);border-radius:10px;box-shadow:0 22px 44px -26px rgba(43,38,34,.45);padding:8px}
.zl-f{display:flex;flex-direction:column;padding:10px 16px;border-right:1px solid var(--line);min-width:0}
.zl-f span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.zl-f input,.zl-f select{border:0;background:none;font:500 16px 'Satoshi',sans-serif;color:var(--ink);padding:4px 0 0;width:100%;min-width:0;outline:none;cursor:pointer}
.zl-f:focus-within{background:var(--sand);border-radius:6px}
.zl-f.is-bad span{color:#b2442a}
.zl-boek__go{margin:4px 4px 4px 12px;border-radius:7px;padding:0 28px}
.zl-boek__note{font-size:13px;color:var(--mute);margin:10px 0 0 4px}
.zl-av{margin-top:16px;background:var(--shell);border:1px solid var(--line);border-radius:10px;padding:8px 22px 14px;animation:zl-in .3s ease}
@keyframes zl-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.zl-av__h{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--mute)}
.zl-av__h b{color:var(--ink);font-weight:500}
.zl-av__r{display:grid;grid-template-columns:1.4fr 1fr .9fr .9fr auto;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.zl-av__r:last-child{border-bottom:0}
.zl-av__r b{font:400 20px 'Gambarino',serif}
.zl-av__r small{display:block;color:var(--mute);font-size:12.5px}
.zl-av__s{font-size:13px}
.zl-av__s i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5f8a54;margin-right:6px}
.zl-av__s.is-low i{background:var(--sun)}
.zl-av__s.is-vol{color:var(--mute)}
.zl-av__s.is-vol i{background:var(--line)}
.zl-av__p{font-variant-numeric:tabular-nums;text-align:right}
.zl-av__p strong{font-weight:600;font-size:17px;display:block}
.zl-av__r.is-vol{opacity:.55}
.zl-av__ok{margin:6px 0 0;padding:10px 12px;background:#e7efe4;border-radius:6px;font-size:14px}
.zl-av__err{color:#b2442a;font-size:14px;padding:12px 0 4px;margin:0}

.zl-tide{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding-top:36px;padding-bottom:36px}
.zl-tide__l b{display:block;font:400 20px 'Gambarino',serif}
.zl-tide__l span{font-size:13px;color:var(--mute)}
.zl-tide__c{width:100%;height:52px}
.zl-tide__c path{fill:none;stroke:var(--sea);stroke-width:1.5;vector-effect:non-scaling-stroke}
.zl-tide__c circle{fill:var(--sun)}
.zl-tide__d{display:flex;gap:28px;margin:0}
.zl-tide__d dt{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.zl-tide__d dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}

.zl-intro{display:grid;grid-template-columns:1.7fr 1fr;gap:64px;padding-top:56px;padding-bottom:88px;border-top:1px solid var(--line)}
.zl-intro__big{font:400 31px/1.32 'Gambarino',serif;margin:0;letter-spacing:-.005em}
.zl-intro__side dl{margin:0}
.zl-intro__side dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.zl-intro__side dt{color:var(--mute)}
.zl-intro__side dd{margin:0;font-weight:500;text-align:right}
.zl-sig{font:400 22px 'Gambarino',serif;margin:22px 0 0}
.zl-sig span{display:block;font:400 13px 'Satoshi',sans-serif;color:var(--mute)}

.zl-sec{padding:80px 0}
.zl-h{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:40px}
.zl-h h2{font:400 52px/1 'Gambarino',serif;letter-spacing:-.01em}
.zl-h p{margin:0;color:var(--mute);max-width:52ch}
.zl-h--s{grid-template-columns:1fr;gap:12px;margin-bottom:28px}
.zl-sec#zl-kamers{background:var(--shell);border-top:1px solid var(--line)}
.zl-room{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center;margin-bottom:56px}
.zl-room img{width:100%;height:380px;object-fit:cover;border-radius:6px;filter:saturate(.85) sepia(.05)}
.zl-room--r{grid-template-columns:1fr 1.35fr}
.zl-room--r img{order:2}
.zl-room__nr{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sun)}
.zl-room h3{font:400 38px/1.05 'Gambarino',serif;margin:8px 0 14px}
.zl-room p{margin:0 0 18px;color:#4c443d}
.zl-spec{display:flex;flex-wrap:wrap;list-style:none;margin:0 0 18px;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zl-spec li{padding:10px 18px 10px 0;margin-right:18px;font-size:14px;color:var(--mute);border-right:1px solid var(--line)}
.zl-spec li:last-child{border-right:0}
.zl-spec b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.zl-room__p{font-size:14px;color:var(--mute)!important}
.zl-room__p b{font:400 26px 'Gambarino',serif;color:var(--ink)}
.zl-tbl{margin-top:24px}
.zl-tbl table{width:100%;border-collapse:collapse;font-size:14.5px}
.zl-tbl caption{text-align:left;font:400 24px 'Gambarino',serif;padding-bottom:12px}
.zl-tbl th{text-align:left;font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:10px 14px 10px 0;border-bottom:1px solid var(--ink)}
.zl-tbl td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:top;color:#4c443d}
.zl-tbl td b{display:block;color:var(--ink);font-weight:600}
.zl-tbl td span{font-size:12.5px;color:var(--mute)}
.zl-tbl tbody tr{transition:background .15s}
.zl-tbl tbody tr:hover{background:var(--sand)}
.zl-n{text-align:right!important;font-variant-numeric:tabular-nums;white-space:nowrap}
.zl-tbl .zl-pr{font-weight:600;color:var(--ink);padding-right:0}
.zl-tbl th:last-child{padding-right:0}

.zl-ont{display:grid;grid-template-columns:1.2fr 1fr;align-items:center}
.zl-ont img{width:100%;height:520px;object-fit:cover;border-radius:6px 0 0 6px;filter:saturate(.85) sepia(.05)}
.zl-ont__card{background:var(--shell);border:1px solid var(--line);border-left:0;padding:44px 44px 36px;border-radius:0 6px 6px 0;margin-left:-1px}
.zl-ont__card h2{font:400 52px/1 'Gambarino',serif}
.zl-ont__time{font-size:14px;color:var(--sun);margin:10px 0 22px}
.zl-menu{list-style:none;margin:0;padding:0}
.zl-menu li{padding:12px 0;border-bottom:1px dotted #c9bda8}
.zl-menu b{display:block;font:400 19px 'Gambarino',serif}
.zl-menu span{font-size:13.5px;color:var(--mute)}
.zl-ont__x{font-size:13.5px;color:var(--mute);margin:18px 0 0}

.zl-sec#zl-arr{background:var(--sea);color:#e3ece9}
#zl-arr .zl-h h2{color:#fff}
#zl-arr .zl-h p{color:#b8cdca}
.zl-arr{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.25)}
.zl-arr li{display:grid;grid-template-columns:1fr 1.6fr auto;gap:40px;align-items:center;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.25);transition:padding .2s}
.zl-arr li:hover{padding-left:10px}
.zl-arr__n span{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#f0b48f}
.zl-arr__n b{display:block;font:400 30px/1.1 'Gambarino',serif;color:#fff;margin-top:4px}
.zl-arr p{margin:0;font-size:15px;color:#cfdedb}
.zl-arr__p{display:flex;align-items:center;gap:22px}
.zl-arr__p b{font:400 30px 'Gambarino',serif;color:#fff;font-variant-numeric:tabular-nums}
.zl-arr .zl-btn--line{border-color:rgba(255,255,255,.55);color:#fff!important}
.zl-arr .zl-btn--line:hover{background:#fff;color:var(--sea)!important}

.zl-omg{display:grid;grid-template-columns:1.1fr 1fr;gap:28px 56px;align-items:start}
.zl-dist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.zl-dist li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.zl-dist b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.zl-map{margin:0;background:var(--shell);border:1px solid var(--line);border-radius:6px;padding:18px}
.zl-map svg{width:100%;height:auto;display:block}
.zl-map__land{fill:#e8dfcf;stroke:var(--ink);stroke-width:1}
.zl-map__road{fill:none;stroke:#b9ab94;stroke-width:1.2;stroke-dasharray:4 3}
.zl-map__pt circle{fill:var(--ink)}
.zl-map__pt .zl-map__me{fill:var(--sun);stroke:var(--shell);stroke-width:2}
.zl-map__pt text{font:500 11px 'Satoshi',sans-serif;fill:var(--ink)}
.zl-map__sea{font:italic 400 13px 'Gambarino',serif;fill:var(--sea);letter-spacing:.1em}
.zl-map figcaption{font-size:12.5px;color:var(--mute);margin-top:8px}
.zl-omg__img{grid-column:1/-1;width:100%;height:340px;object-fit:cover;border-radius:6px;filter:saturate(.7) sepia(.1)}

.zl-sec--pr{background:var(--shell);border-top:1px solid var(--line)}
.zl-rev{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start;padding-top:0}
.zl-rev__sum h2{font:400 44px/1.05 'Gambarino',serif}
.zl-rev__big{font:400 92px/1 'Gambarino',serif;margin:20px 0 22px;color:var(--sea)}
.zl-rev__big span{display:block;font:400 13.5px 'Satoshi',sans-serif;color:var(--mute);margin-top:6px}
.zl-bars{list-style:none;margin:0;padding:0}
.zl-bars li{display:grid;grid-template-columns:130px 1fr 34px;gap:12px;align-items:center;font-size:14px;padding:5px 0}
.zl-bars i{height:4px;background:var(--line);position:relative;border-radius:2px}
.zl-bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--sea);border-radius:2px}
.zl-bars b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.zl-rev__l blockquote{margin:0;padding:24px 0;border-bottom:1px solid var(--line)}
.zl-rev__l blockquote:first-child{border-top:1px solid var(--ink)}
.zl-rev__l p{font:400 23px/1.35 'Gambarino',serif;margin:0 0 12px}
.zl-rev__l footer{font-size:13px;color:var(--mute)}
.zl-rev__l footer b{color:var(--ink);font-weight:600}
.zl-rev__l em{font-style:normal;display:inline-block;min-width:26px;text-align:center;background:var(--sea);color:#fff;border-radius:4px;font-weight:600;font-size:12px;padding:1px 6px;margin-left:4px}

.zl-pr2{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.zl-info{margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;border-top:1px solid var(--ink)}
.zl-info div{padding:12px 0;border-bottom:1px solid var(--line)}
.zl-info dt{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.zl-info dd{margin:2px 0 0;font-size:15px}
.zl-faq h3{font:400 30px 'Gambarino',serif;margin:10px 0 18px}
.zl-faq__i{border-top:1px solid var(--line)}
.zl-faq__i:last-child{border-bottom:1px solid var(--line)}
.zl-faq__i button{width:100%;display:flex;justify-content:space-between;gap:16px;text-align:left;background:none;border:0;padding:16px 0;font:500 16px 'Satoshi',sans-serif;color:var(--ink);cursor:pointer}
.zl-faq__i button::after{content:"+";font:300 22px/1 'Satoshi',sans-serif;color:var(--sea);transition:transform .2s}
.zl-faq__i.is-open button::after{transform:rotate(45deg)}
.zl-faq__i button:hover{color:var(--sea)}
.zl-faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.zl-faq__i.is-open .zl-faq__a{grid-template-rows:1fr}
.zl-faq__a>p{overflow:hidden;margin:0;color:#4c443d;font-size:15px}
.zl-faq__i.is-open .zl-faq__a>p{padding-bottom:16px}

.zl-foot{background:var(--ink);color:#b9ada0;font-size:14px;padding:64px 0 28px}
.zl-foot__g{display:grid;grid-template-columns:1.1fr .8fr .8fr .8fr 1.6fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.zl-foot__b b{font:400 34px 'Gambarino',serif;color:#fff}
.zl-foot__b p{margin:10px 0 0}
.zl-foot h4{font-weight:500;color:#fff;font-size:14px;margin-bottom:12px}
.zl-foot__g>div>a{display:block;padding:3px 0}
.zl-foot a:hover{color:#fff}
.zl-news p{margin:0 0 12px}
.zl-news div{display:flex;gap:8px}
.zl-news input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.25);background:none;border-radius:999px;padding:0 16px;height:40px;color:#fff;font:400 14px 'Satoshi',sans-serif}
.zl-news input::placeholder{color:#8d8276}
.zl-news .zl-btn{background:var(--sun);border-color:var(--sun)}
.zl-foot__x{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:22px;font-size:12.5px}

@container (max-width:1060px){
  .zl-nav__l,.zl-nav__r{display:none!important}
  .zl-burger{display:flex}
  .zl-nav__in{grid-template-columns:1fr auto}
  .zl-logo{align-items:flex-start;text-align:left}
  .zl-boek{grid-template-columns:1fr 1fr;row-gap:4px}
  .zl-f:nth-child(2n){border-right:0}
  .zl-f:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .zl-boek__go{grid-column:1/-1;margin:6px 0 0;height:48px}
  .zl-tide{grid-template-columns:1fr;gap:12px}
  .zl-tide__d{flex-wrap:wrap;gap:12px 24px}
  .zl-av__r{grid-template-columns:1.3fr 1fr auto}
  .zl-av__r>:nth-child(2){display:none}
}
@container (max-width:780px){
  .zl-w{padding:0 20px}
  .zl-top__in>span:first-child{display:none}
  .zl-top__r{width:100%;justify-content:space-between;gap:10px}
  .zl-top__r>span:first-child{display:none}
  .zl-nav__in{height:68px}
  .zl-logo b{font-size:28px}
  .zl-logo span{font-size:9px;letter-spacing:.12em}
  .zl-hero{height:420px}
  .zl-hero__t{bottom:84px}
  .zl-hero h1{font-size:40px}
  .zl-kick{font-size:11.5px}
  .zl-boekwrap{margin-top:-52px}
  .zl-f{padding:8px 10px}
  .zl-f input,.zl-f select{font-size:15px}
  .zl-av{padding:4px 14px 10px}
  .zl-av__r{grid-template-columns:1fr auto;gap:4px 12px}
  .zl-av__r>:nth-child(3){grid-column:1;grid-row:2}
  .zl-av__r>:nth-child(4){grid-column:2;grid-row:1}
  .zl-av__r>:nth-child(5){grid-column:2;grid-row:2}
  .zl-av__r .zl-btn{padding:8px 14px}
  .zl-intro,.zl-room,.zl-room--r,.zl-ont,.zl-omg,.zl-rev,.zl-pr2,.zl-h{grid-template-columns:1fr;gap:24px}
  .zl-intro{padding-top:36px;padding-bottom:56px}
  .zl-intro__big{font-size:23px}
  .zl-sec{padding:56px 0}
    .zl-h{margin-bottom:28px;gap:10px}
  .zl-h h2,.zl-ont__card h2{font-size:38px}
  .zl-room{margin-bottom:44px;gap:18px}
  .zl-room--r img{order:0}
  .zl-room img{height:240px}
  .zl-room h3{font-size:30px}
  .zl-tbl th:nth-child(4),.zl-tbl td:nth-child(4),.zl-tbl th:nth-child(5),.zl-tbl td:nth-child(5){display:none}
  .zl-ont img{height:260px;border-radius:6px 6px 0 0}
  .zl-ont__card{border-left:1px solid var(--line);border-top:0;margin:0;border-radius:0 0 6px 6px;padding:26px 20px}
  .zl-arr li{grid-template-columns:1fr;gap:10px}
  .zl-arr li:hover{padding-left:0}
  .zl-arr__p{justify-content:space-between}
  .zl-omg__img{height:220px}
  .zl-rev__big{font-size:72px}
  .zl-rev__l p{font-size:20px}
  .zl-bars li{grid-template-columns:110px 1fr 30px}
  .zl-info{grid-template-columns:1fr}
  .zl-foot__g{grid-template-columns:1fr 1fr}
  .zl-foot__b,.zl-news{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.zl-av,.zl-faq__a,.zl-arr li{animation:none;transition:none}}

// Logement Zeelucht · boutique-hotel, Domburg · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s = root.querySelector('.zl-site'); if (!s) return;
var bg = s.querySelector('.zl-burger'), mn = s.querySelector('.zl-mnav');
bg.addEventListener('click', function(){ var o = bg.getAttribute('aria-expanded') === 'true'; bg.setAttribute('aria-expanded', String(!o)); mn.hidden = o; });
mn.addEventListener('click', function(e){ if (e.target.tagName === 'A') { mn.hidden = true; bg.setAttribute('aria-expanded', 'false'); } });

s.querySelectorAll('.zl-faq__i button').forEach(function(b){
  b.addEventListener('click', function(){
    var it = b.parentNode, open = !it.classList.contains('is-open');
    s.querySelectorAll('.zl-faq__i').forEach(function(x){ x.classList.remove('is-open'); x.querySelector('button').setAttribute('aria-expanded', 'false'); });
    if (open) { it.classList.add('is-open'); b.setAttribute('aria-expanded', 'true'); }
  });
});

var ROOMS = [
  ['duin','Duinkamer','kamer 1 en 2',2,139,2],['tuin','Tuinkamer met terras','kamer 3, hond welkom',2,149,1],['zee','Zeekamer','kamer 4 en 5, balkon',2,179,2],
  ['toren','Torenkamer','kamer 7',2,169,1],['familie','Familiekamer','kamer 6, tot 4 personen',4,199,1],['zolder','Zoldersuite','kamer 8 en 9, vrijstaand bad',2,229,2]
];
var f = s.querySelector('.zl-boek'), av = s.querySelector('.zl-av');
var fin = f.querySelector('[name=zl-in]'), fout = f.querySelector('[name=zl-uit]');
function iso(d){ return d.getFullYear() + '-' + ('0' + (d.getMonth() + 1)).slice(-2) + '-' + ('0' + d.getDate()).slice(-2); }
function nl(d){ return d.toLocaleDateString('nl-NL', { weekday: 'short', day: 'numeric', month: 'short' }); }
var t = new Date(); t.setHours(12, 0, 0, 0);
var a0 = new Date(t); a0.setDate(a0.getDate() + ((5 - a0.getDay() + 7) % 7 || 7));
var b0 = new Date(a0); b0.setDate(b0.getDate() + 2);
fin.value = iso(a0); fout.value = iso(b0); fin.min = iso(t); fout.min = iso(new Date(t.getTime() + 864e5));
fin.addEventListener('change', function(){ var d = new Date(fin.value + 'T12:00'); if (!isNaN(d)) { var o = new Date(fout.value + 'T12:00'); if (isNaN(o) || o <= d) { d.setDate(d.getDate() + 2); fout.value = iso(d); } fout.min = fin.value; } });
function money(n){ return '€ ' + n.toFixed(2).replace('.', ',').replace(',00', ''); }
function render(){
  var din = new Date(fin.value + 'T12:00'), dout = new Date(fout.value + 'T12:00');
  var g = +f.querySelector('[name=zl-gst]').value, ty = f.querySelector('[name=zl-type]').value;
  s.querySelectorAll('.zl-f').forEach(function(x){ x.classList.remove('is-bad'); });
  av.hidden = false;
  var n = Math.round((dout - din) / 864e5);
  if (isNaN(n) || n < 1) { fout.parentNode.classList.add('is-bad'); av.innerHTML = '<p class="zl-av__err">Kies een vertrekdatum na de aankomstdatum.</p>'; return; }
  if (n > 14) { av.innerHTML = '<p class="zl-av__err">Langer dan 14 nachten? Bel ons op 0118 123 456, dan maken we een prijs op maat.</p>'; return; }
  var wk = false, zomer = false;
  for (var i = 0; i < n; i++) { var d = new Date(din.getTime() + i * 864e5); if (d.getDay() === 5 || d.getDay() === 6) wk = true; if (d.getMonth() >= 5 && d.getMonth() <= 7) zomer = true; }
  var minN = (wk || zomer) ? 2 : 1;
  var rows = ROOMS.filter(function(r){ return (ty === 'alle' || r[0] === ty); });
  var seed = din.getDate() * 7 + din.getMonth() * 13 + n;
  var html = '<div class="zl-av__h"><span><b>' + nl(din) + ' tot ' + nl(dout) + '</b> · ' + n + (n === 1 ? ' nacht' : ' nachten') + ' · ' + g + (g === 1 ? ' gast' : ' gasten') + '</span><span>incl. ontbijt en toeristenbelasting</span></div>';
  if (n < minN) html += '<p class="zl-av__err">In het weekend en in de zomer boekt u minimaal twee nachten.</p>';
  rows.forEach(function(r, k){
    var price = 0;
    for (var i = 0; i < n; i++) { var d = new Date(din.getTime() + i * 864e5); price += r[4] + ((d.getDay() === 5 || d.getDay() === 6) ? 20 : 0) + ((d.getMonth() >= 5 && d.getMonth() <= 7) ? 25 : 0); }
    var tax = 2.95 * g * n, tot = price + tax;
    var left = (seed + k * 5) % 4; if (left > r[5]) left = r[5];
    var vol = left === 0 || g > r[3] || n < minN;
    var st = g > r[3] ? '<span class="zl-av__s is-vol"><i></i>Te klein voor ' + g + ' gasten</span>' : left === 0 ? '<span class="zl-av__s is-vol"><i></i>Volgeboekt</span>' : left === 1 ? '<span class="zl-av__s is-low"><i></i>Nog 1 kamer vrij</span>' : '<span class="zl-av__s"><i></i>' + left + ' kamers vrij</span>';
    html += '<div class="zl-av__r' + (vol ? ' is-vol' : '') + '"><div><b>' + r[1] + '</b><small>' + r[2] + '</small></div><div>' + st + '</div><div class="zl-av__p"><small>gem. per nacht</small>' + money(price / n) + '</div><div class="zl-av__p"><small>totaal</small><strong>' + money(tot) + '</strong></div>' +
      (vol ? '<span></span>' : '<button type="button" class="zl-btn zl-btn--sm" data-r="' + r[1] + '" data-t="' + money(tot) + '">Kies</button>') + '</div>';
  });
  av.innerHTML = html;
}
f.addEventListener('submit', function(e){ e.preventDefault(); render(); });
av.addEventListener('click', function(e){
  var b = e.target.closest('button[data-r]'); if (!b) return;
  var old = av.querySelector('.zl-av__ok'); if (old) old.remove();
  var p = document.createElement('p'); p.className = 'zl-av__ok';
  p.textContent = b.dataset.r + ' staat 15 minuten voor u vast, totaal ' + b.dataset.t + '. In de echte site volgt hier de stap met uw gegevens (dit is een demo).';
  av.appendChild(p);
});
}
init(document.querySelector('.jouw-container'));