<!-- Contactpagina · Fysiotherapie Vliet & Duin, Leiden · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="vdf">
<div class="vdf__top"><div class="vdf__in vdf__top-in">
  <p class="vdf__top-txt vdf__nu">Vandaag open in Leiden van 7:30 tot 20:00</p>
  <p class="vdf__top-txt"><a href="tel:0711234567">071 123 4567</a></p>
</div></div>

<div class="vdf__head" role="banner"><div class="vdf__in vdf__head-in">
  <a href="#" class="vdf__logo" aria-label="Fysiotherapie Vliet en Duin, naar home">Vliet &amp; Duin<span>fysiotherapie</span></a>
  <nav class="vdf__nav" aria-label="Hoofdmenu">
    <a href="#">Klachten</a><a href="#">Behandelingen</a><a href="#">Team</a><a href="#">Vergoeding</a><a href="#" aria-current="page">Contact</a>
  </nav>
  <a href="#vdf-form" class="vdf__btn vdf__btn--head">Afspraak maken</a>
  <button class="vdf__menu-knop" type="button" aria-expanded="false" aria-controls="vdf-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="vdf__menu" id="vdf-menu" hidden>
  <a href="#">Klachten</a><a href="#">Behandelingen</a><a href="#">Team</a><a href="#">Vergoeding</a><a href="#" aria-current="page">Contact</a><a href="#vdf-form" class="vdf__btn">Afspraak maken</a>
</div>
</div>

<div class="vdf__hero"><div class="vdf__in vdf__hero-in">
  <div class="vdf__hero-l">
    <h1 class="vdf__h1">Contact en vestigingen</h1>
    <p class="vdf__lead">Bel, mail of loop binnen. Je kunt zonder verwijzing van de huisarts bij ons terecht, meestal binnen drie werkdagen.</p>
    <ul class="vdf__vest" aria-label="Kies een vestiging">
      <li><button type="button" class="vdf__v is-aan" data-v="leiden"><span class="vdf__v-naam">Leiden Centrum</span><span class="vdf__v-sub"><span>Breestraat 112</span><span class="vdf__v-open" data-open="leiden"></span></span></button></li>
      <li><button type="button" class="vdf__v" data-v="oegstgeest"><span class="vdf__v-naam">Oegstgeest</span><span class="vdf__v-sub"><span>Lange Voort 40</span><span class="vdf__v-open" data-open="oegstgeest"></span></span></button></li>
      <li><button type="button" class="vdf__v" data-v="voorschoten"><span class="vdf__v-naam">Voorschoten</span><span class="vdf__v-sub"><span>Schoolstraat 12</span><span class="vdf__v-open" data-open="voorschoten"></span></span></button></li>
    </ul>
  </div>
  <div class="vdf__hero-foto" aria-hidden="true">
    <img class="is-aan" data-v="leiden" src="https://neddev.com/lab-media/page-contact-vestigingen-1.webp" alt="" width="1408" height="768">
    <img data-v="oegstgeest" src="https://neddev.com/lab-media/page-contact-vestigingen-2.webp" alt="" width="900" height="491">
    <img data-v="voorschoten" src="https://neddev.com/lab-media/page-contact-vestigingen-3.webp" alt="" width="900" height="491">
  </div>
</div></div>

<div class="vdf__contact" id="vdf-form"><div class="vdf__in vdf__contact-in">
  <div class="vdf__form-blok">
    <h2 class="vdf__h2">Stuur ons een bericht</h2>
    <form class="vdf__form" novalidate>
      <div class="vdf__rij2">
        <label class="vdf__veld"><span>Naam</span><input name="naam" autocomplete="name" required><em class="vdf__fout" hidden>Vul je naam in.</em></label>
        <label class="vdf__veld"><span>Telefoonnummer</span><input name="tel" type="tel" autocomplete="tel" required><em class="vdf__fout" hidden>Vul een telefoonnummer van tien cijfers in.</em></label>
      </div>
      <label class="vdf__veld"><span>E-mailadres, als je liever mail krijgt</span><input name="mail" type="email" autocomplete="email"><em class="vdf__fout" hidden>Dit e-mailadres klopt niet.</em></label>
      <label class="vdf__veld"><span>Vestiging</span><select name="vest"><option value="leiden">Leiden Centrum</option><option value="oegstgeest">Oegstgeest</option><option value="voorschoten">Voorschoten</option></select></label>
      <fieldset class="vdf__keus"><legend>Waar gaat het over?</legend>
        <label><input type="radio" name="soort" value="afspraak" checked> Een afspraak maken</label>
        <label><input type="radio" name="soort" value="vergoeding"> Een vraag over vergoeding</label>
        <label><input type="radio" name="soort" value="anders"> Iets anders</label>
      </fieldset>
      <label class="vdf__veld"><span>Je bericht</span><textarea name="bericht" rows="4" placeholder="Bijvoorbeeld: sinds twee weken pijn in mijn onderrug na het tuinieren."></textarea></label>
      <button class="vdf__btn" type="submit">Verstuur bericht</button>
    </form>
    <p class="vdf__klaar" role="status" hidden></p>
  </div>
  <div class="vdf__direct">
    <img src="https://neddev.com/lab-media/page-contact-vestigingen-5.webp" alt="De receptie in Leiden met twee stoelen, een plant en een kapstok" width="900" height="491" loading="lazy">
    <h3 class="vdf__h3">Liever direct contact</h3>
    <p><a class="vdf__groot" href="tel:0711234567">071 123 4567</a></p>
    <p>Marieke en Joyce nemen op van 8:00 tot 17:00. Daarna spreek je de voicemail in en bellen we de volgende ochtend terug.</p>
    <p><a href="mailto:info@voorbeeld.nl">info@voorbeeld.nl</a>, antwoord binnen één werkdag.</p>
    <p>Afzeggen kan tot 24 uur van tevoren. Later afzeggen of niet komen kost €35.</p>
  </div>
</div></div>

<div class="vdf__route" id="vdf-route"><div class="vdf__in">
  <h2 class="vdf__h2">Route en openingstijden</h2>
  <div class="vdf__tabs" role="tablist" aria-label="Vestigingen">
    <button role="tab" id="vdf-t-leiden" aria-controls="vdf-p-leiden" aria-selected="true" data-v="leiden">Leiden Centrum</button>
    <button role="tab" id="vdf-t-oegstgeest" aria-controls="vdf-p-oegstgeest" aria-selected="false" tabindex="-1" data-v="oegstgeest">Oegstgeest</button>
    <button role="tab" id="vdf-t-voorschoten" aria-controls="vdf-p-voorschoten" aria-selected="false" tabindex="-1" data-v="voorschoten">Voorschoten</button>
  </div>

  <div class="vdf__paneel" role="tabpanel" id="vdf-p-leiden" aria-labelledby="vdf-t-leiden">
    <div class="vdf__p-foto"><img src="https://neddev.com/lab-media/page-contact-vestigingen-7.webp" alt="De Breestraat-buurt in Leiden met grachtenpanden en fietsen langs het water" width="900" height="491" loading="lazy"></div>
    <div class="vdf__p-txt">
      <p class="vdf__adres">Breestraat 112, 2311 CV Leiden. Eerste verdieping, met lift.</p>
      <h3 class="vdf__h3">Zo kom je er</h3>
      <p><strong>Met het OV.</strong> Vanaf Leiden Centraal twaalf minuten lopen, of bus 3 en 4 tot halte Breestraat.</p>
      <p><strong>Met de fiets.</strong> Stallen kan in de Breestraat zelf of in de bewaakte stalling Garenmarkt, de eerste 24 uur gratis.</p>
      <p><strong>Met de auto.</strong> Parkeergarage Garenmarkt, vier minuten lopen. Neem je parkeerkaart mee, dan krijg je bij ons een uitrijkaart van €2.</p>
    </div>
    <table class="vdf__uren"><caption>Openingstijden Leiden Centrum</caption><tbody>
      <tr data-dag="1"><th scope="row">Maandag</th><td>7:30 tot 20:00</td></tr><tr data-dag="2"><th scope="row">Dinsdag</th><td>7:30 tot 20:00</td></tr><tr data-dag="3"><th scope="row">Woensdag</th><td>7:30 tot 20:00</td></tr><tr data-dag="4"><th scope="row">Donderdag</th><td>7:30 tot 20:00</td></tr><tr data-dag="5"><th scope="row">Vrijdag</th><td>7:30 tot 18:00</td></tr><tr data-dag="6"><th scope="row">Zaterdag</th><td>9:00 tot 13:00</td></tr><tr data-dag="0"><th scope="row">Zondag</th><td>gesloten</td></tr>
    </tbody></table>
  </div>

  <div class="vdf__paneel" role="tabpanel" id="vdf-p-oegstgeest" aria-labelledby="vdf-t-oegstgeest" hidden>
    <div class="vdf__p-foto"><img src="https://neddev.com/lab-media/page-contact-vestigingen-6.webp" alt="Een oudere vrouw doet een balansoefening met de fysiotherapeut naast zich" width="900" height="491" loading="lazy"></div>
    <div class="vdf__p-txt">
      <p class="vdf__adres">Lange Voort 40, 2341 KD Oegstgeest. In gezondheidscentrum De Voort, begane grond.</p>
      <h3 class="vdf__h3">Zo kom je er</h3>
      <p><strong>Met het OV.</strong> Bus 20 vanaf Leiden Centraal, halte Lange Voort, twee minuten lopen.</p>
      <p><strong>Met de fiets.</strong> Overdekte stalling direct naast de ingang.</p>
      <p><strong>Met de auto.</strong> Gratis parkeren voor de deur, twee plekken voor mensen met een gehandicaptenkaart.</p>
    </div>
    <table class="vdf__uren"><caption>Openingstijden Oegstgeest</caption><tbody>
      <tr data-dag="1"><th scope="row">Maandag</th><td>8:00 tot 18:00</td></tr><tr data-dag="2"><th scope="row">Dinsdag</th><td>8:00 tot 18:00</td></tr><tr data-dag="3"><th scope="row">Woensdag</th><td>8:00 tot 18:00</td></tr><tr data-dag="4"><th scope="row">Donderdag</th><td>8:00 tot 18:00</td></tr><tr data-dag="5"><th scope="row">Vrijdag</th><td>8:00 tot 14:00</td></tr><tr data-dag="6"><th scope="row">Zaterdag</th><td>gesloten</td></tr><tr data-dag="0"><th scope="row">Zondag</th><td>gesloten</td></tr>
    </tbody></table>
  </div>

  <div class="vdf__paneel" role="tabpanel" id="vdf-p-voorschoten" aria-labelledby="vdf-t-voorschoten" hidden>
    <div class="vdf__p-foto"><img src="https://neddev.com/lab-media/page-contact-vestigingen-8.webp" alt="Een fysiotherapeut onderzoekt de knie van een hardloper op de behandelbank" width="900" height="491" loading="lazy"></div>
    <div class="vdf__p-txt">
      <p class="vdf__adres">Schoolstraat 12, 2251 BJ Voorschoten. Naast de bibliotheek, gelijkvloers.</p>
      <h3 class="vdf__h3">Zo kom je er</h3>
      <p><strong>Met het OV.</strong> Vanaf station Voorschoten acht minuten lopen, of bus 45 tot halte Schoolstraat.</p>
      <p><strong>Met de fiets.</strong> Fietsenrekken voor de deur.</p>
      <p><strong>Met de auto.</strong> Blauwe zone op het Schoolplein, maximaal twee uur met parkeerschijf.</p>
    </div>
    <table class="vdf__uren"><caption>Openingstijden Voorschoten</caption><tbody>
      <tr data-dag="1"><th scope="row">Maandag</th><td>8:00 tot 17:30</td></tr><tr data-dag="2"><th scope="row">Dinsdag</th><td>13:00 tot 20:00</td></tr><tr data-dag="3"><th scope="row">Woensdag</th><td>8:00 tot 17:30</td></tr><tr data-dag="4"><th scope="row">Donderdag</th><td>8:00 tot 17:30</td></tr><tr data-dag="5"><th scope="row">Vrijdag</th><td>8:00 tot 12:30</td></tr><tr data-dag="6"><th scope="row">Zaterdag</th><td>gesloten</td></tr><tr data-dag="0"><th scope="row">Zondag</th><td>gesloten</td></tr>
    </tbody></table>
  </div>
</div></div>

<div class="vdf__faq"><div class="vdf__in vdf__faq-in">
  <img src="https://neddev.com/lab-media/page-contact-vestigingen-4.webp" alt="Een fysiotherapeut behandelt de schouder van een man op de behandeltafel" width="900" height="491" loading="lazy">
  <div>
    <h2 class="vdf__h2">Voor je eerste afspraak</h2>
    <details><summary>Heb ik een verwijzing nodig?</summary><p>Nee. Je kunt direct bij ons terecht. Bij de eerste afspraak doen we een korte screening; heb je wel een verwijsbrief, neem hem dan mee.</p></details>
    <details><summary>Wordt fysiotherapie vergoed?</summary><p>Alleen vanuit een aanvullende verzekering, of vanaf de 21e behandeling bij een chronische aandoening op de lijst van het Zorginstituut. Wij hebben contracten met alle grote verzekeraars en declareren rechtstreeks.</p></details>
    <details><summary>Wat neem ik mee?</summary><p>Je zorgpas of een geldig legitimatiebewijs, een handdoek en kleding waarin je kunt bewegen. De eerste afspraak duurt 45 minuten.</p></details>
    <details><summary>Kan ik bij een andere vestiging verder?</summary><p>Ja. Je dossier staat op alle drie de plekken klaar, dus je kunt wisselen als dat beter uitkomt.</p></details>
  </div>
</div></div>

<div class="vdf__voet" role="contentinfo"><div class="vdf__in">
  <div class="vdf__voet-raster">
    <div><p class="vdf__voet-logo">Vliet &amp; Duin</p><p>Fysiotherapie Vliet &amp; Duin<br>Breestraat 112<br>2311 CV Leiden</p></div>
    <div><p class="vdf__voet-kop">Praktijk</p><a href="#">Klachten</a><a href="#">Behandelingen</a><a href="#">Team</a><a href="#">Vergoeding</a></div>
    <div><p class="vdf__voet-kop">Vestigingen</p><a href="#vdf-route">Leiden Centrum</a><a href="#vdf-route">Oegstgeest</a><a href="#vdf-route">Voorschoten</a></div>
    <div><p class="vdf__voet-kop">Kwaliteit</p><p>Lid KNGF<br>Kwaliteitsregister Paramedici<br>Klachtenregeling via het KNGF</p></div>
  </div>
  <p class="vdf__voet-klein">KvK 28123456 · BTW NL002345678B01 · AGB-code 04012345 · <a href="#">Privacy</a></p>
</div></div>
</div>
</div>

/* Contactpagina · Fysiotherapie Vliet & Duin, Leiden · NedDev · eigen werk. */
/* fonts (Fontshare): recia@600 + supreme@400,500 */
.vdf{--bg:#FFFFFF;--opp:#F7F2F5;--tekst:#170F14;--gedempt:#5A4B54;--lijn:#E6DAE1;--accent:#B8174F;--op-accent:#FFFFFF;--r:4px;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:48px;--fs6:84px;--sectie:clamp(72px,9vw,128px);--kader:1660px;--lees:720px;--zij:20px;--kop:'Recia',Georgia,serif;
  container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Supreme',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.6}
.vdf *{box-sizing:border-box}
.vdf [hidden]{display:none!important}
.vdf a{color:inherit}
.vdf img{display:block;max-width:100%;height:auto}
.vdf__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,56px)}
.vdf__top{background:var(--opp)}
.vdf__top-in{display:flex;justify-content:space-between;gap:16px;padding-top:6px;padding-bottom:6px}
.vdf__top-txt{margin:0;font-size:var(--fs1);color:var(--gedempt);padding:3px 0}
.vdf__top-txt a{color:var(--tekst);text-decoration:none;display:inline-block;padding:3px 0}
.vdf__head{position:sticky;top:0;z-index:20}
.vdf__head-in{display:flex;align-items:center;gap:32px;height:76px;background:var(--bg);border-bottom:1px solid var(--lijn)}
.vdf__logo{text-decoration:none;font-family:var(--kop);font-weight:600;font-size:var(--fs4);display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.vdf__logo span{font-family:'Supreme',sans-serif;font-weight:400;font-size:var(--fs1);color:var(--gedempt)}
.vdf__nav{display:flex;gap:28px;margin-left:auto}
.vdf__nav a{text-decoration:none;color:var(--gedempt);transition:color .18s}
.vdf__nav a:hover,.vdf__nav a[aria-current]{color:var(--tekst)}
.vdf__nav a[aria-current]{border-bottom:2px solid var(--accent);padding-bottom:4px}
.vdf__btn{display:inline-block;background:var(--accent);color:var(--op-accent)!important;text-decoration:none;font-family:inherit;font-weight:500;font-size:var(--fs2);padding:13px 22px;border-radius:var(--r);border:0;cursor:pointer;transition:background-color .18s}
.vdf__btn:hover{background:#96113f}
.vdf__menu-knop{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--lijn);border-radius:var(--r);background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.vdf__menu-knop span{display:block;width:20px;height:2px;background:var(--tekst)}
.vdf__menu{display:flex;flex-direction:column;padding:8px var(--zij) 20px;background:var(--bg);border-bottom:1px solid var(--lijn)}
.vdf__menu a{padding:12px 0;text-decoration:none;font-size:var(--fs3);border-bottom:1px solid var(--lijn)}
.vdf__menu .vdf__btn{margin-top:16px;text-align:center;border:0}
.vdf__hero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);padding-top:clamp(40px,5vw,80px);padding-bottom:var(--sectie);align-items:start}
.vdf__h1{font-family:var(--kop);font-weight:600;font-size:var(--fs4);line-height:1.2;margin:0 0 12px}
.vdf__lead{margin:0 0 clamp(28px,4vw,48px);color:var(--gedempt);font-size:var(--fs3);max-width:44ch}
.vdf__vest{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.vdf__v{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;padding:clamp(14px,2vw,26px) 0;border-bottom:1px solid var(--lijn)}
.vdf__v-naam{display:block;font-family:var(--kop);font-weight:600;font-size:var(--fs6);line-height:1;letter-spacing:-.02em;color:#B9AAB3;transition:color .2s}
.vdf__v.is-aan .vdf__v-naam,.vdf__v:hover .vdf__v-naam,.vdf__v:focus-visible .vdf__v-naam{color:var(--tekst)}
.vdf__v:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.vdf__v-sub{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px;color:var(--gedempt)}
.vdf__v-open.is-open{color:var(--accent)}
.vdf__hero-foto{position:sticky;top:100px;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--opp)}
.vdf__hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .35s,transform .6s}
.vdf__hero-foto img.is-aan{opacity:1;transform:none}
.vdf__contact{background:var(--opp);padding:var(--sectie) 0}
.vdf__contact-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,112px)}
.vdf__h2{font-family:var(--kop);font-weight:600;font-size:var(--fs5);line-height:1.08;letter-spacing:-.015em;margin:0 0 32px}
.vdf__h3{font-family:var(--kop);font-weight:600;font-size:var(--fs4);line-height:1.2;margin:28px 0 12px}
.vdf__form{display:grid;gap:18px;max-width:var(--lees)}
.vdf__rij2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.vdf__veld{display:grid;gap:6px}
.vdf__veld>span,.vdf__keus legend{font-weight:500}
.vdf__veld input,.vdf__veld select,.vdf__veld textarea{font:inherit;color:var(--tekst);background:var(--bg);border:1px solid #CDBFC7;border-radius:var(--r);padding:12px 14px;min-height:48px;width:100%}
.vdf__veld input:focus,.vdf__veld select:focus,.vdf__veld textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.vdf__veld.is-fout input{border-color:var(--accent)}
.vdf__fout{font-style:normal;color:var(--accent);font-size:var(--fs1)}
.vdf__keus{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.vdf__keus legend{margin-bottom:8px;padding:0}
.vdf__keus label{display:flex;align-items:center;gap:8px;border:1px solid #CDBFC7;border-radius:var(--r);padding:10px 14px;background:var(--bg);cursor:pointer}
.vdf__keus label:has(input:checked){border-color:var(--tekst)}
.vdf__keus input{accent-color:var(--accent);margin:0;width:24px;height:24px}
.vdf__form .vdf__btn{justify-self:start}
.vdf__klaar{font-size:var(--fs3);max-width:46ch;padding:24px;background:var(--bg);border-left:3px solid var(--accent);margin:0}
.vdf__direct img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.vdf__direct p{margin:0 0 12px;color:var(--gedempt)}
.vdf__direct .vdf__h3{margin-top:28px}
.vdf__groot{font-family:var(--kop);font-weight:600;font-size:var(--fs4);color:var(--tekst)!important;text-decoration:none}
.vdf__route{padding:var(--sectie) 0}
.vdf__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px;border-bottom:1px solid var(--lijn)}
.vdf__tabs button{font:inherit;font-size:var(--fs3);background:none;border:0;padding:12px 4px;margin-right:24px;color:var(--gedempt);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.vdf__tabs button[aria-selected=true]{color:var(--tekst);border-bottom-color:var(--accent)}
.vdf__paneel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:start}
.vdf__p-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.vdf__p-txt p{margin:0 0 14px;color:var(--gedempt)}
.vdf__p-txt strong{color:var(--tekst);font-weight:500}
.vdf__adres{font-size:var(--fs3);color:var(--tekst)!important}
.vdf__p-txt .vdf__h3{margin-top:24px}
.vdf__uren{width:100%;border-collapse:collapse}
.vdf__uren caption{text-align:left;font-weight:500;padding-bottom:10px}
.vdf__uren th,.vdf__uren td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--lijn);font-weight:400}
.vdf__uren td{color:var(--gedempt);text-align:right;white-space:nowrap}
.vdf__uren tr.is-vandaag{background:var(--opp)}
.vdf__uren tr.is-vandaag th,.vdf__uren tr.is-vandaag td{color:var(--accent);font-weight:500}
.vdf__faq{background:var(--opp);padding:var(--sectie) 0}
.vdf__faq-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,6vw,112px);align-items:start}
.vdf__faq-in img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.vdf__faq details{border-top:1px solid var(--lijn)}
.vdf__faq details:last-child{border-bottom:1px solid var(--lijn)}
.vdf__faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-size:var(--fs3);position:relative}
.vdf__faq summary::-webkit-details-marker{display:none}
.vdf__faq summary::after{content:'';position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--tekst);border-bottom:2px solid var(--tekst);transform:translateY(-75%) rotate(45deg);transition:transform .18s}
.vdf__faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.vdf__faq details p{margin:0 0 20px;color:var(--gedempt);max-width:60ch}
.vdf__voet{padding:64px 0 40px;font-size:var(--fs1);color:var(--gedempt)}
.vdf__voet-raster{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px;padding-bottom:40px;border-bottom:1px solid var(--lijn)}
.vdf__voet p{margin:0}
.vdf__voet a{display:block;text-decoration:none;padding:3px 0}
.vdf__voet a:hover{color:var(--tekst)}
.vdf__voet-logo{font-family:var(--kop);font-weight:600;font-size:var(--fs4);color:var(--tekst);margin-bottom:10px!important}
.vdf__voet-kop{color:var(--tekst);font-weight:500;margin-bottom:8px!important}
.vdf__voet-klein{padding-top:20px}
.vdf__voet-klein a{display:inline;text-decoration:underline}
@container (max-width:1100px){
  .vdf__paneel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vdf__p-foto{grid-column:1/-1}
}
@container (max-width:980px){
  .vdf__nav,.vdf__btn--head{display:none}
  .vdf__menu-knop{display:flex}
  .vdf__hero-in,.vdf__contact-in,.vdf__faq-in{grid-template-columns:minmax(0,1fr)}
  .vdf__hero-foto{position:relative;top:0;aspect-ratio:16/10;order:-1}
  .vdf__faq-in img{aspect-ratio:16/10}
  .vdf__voet-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:640px){
  .vdf>*{--fs5:34px;--fs6:44px}
  .vdf__logo span{display:none}
  .vdf__top-in{flex-direction:column;gap:0}
  .vdf__rij2,.vdf__paneel{grid-template-columns:minmax(0,1fr)}
  .vdf__tabs button{font-size:var(--fs2);margin-right:12px}
  .vdf__voet-raster{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.vdf *{transition:none!important}}

// Contactpagina · Fysiotherapie Vliet & Duin, Leiden · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.vdf');if(!s)return;
var knop=s.querySelector('.vdf__menu-knop'),menu=s.querySelector('.vdf__menu');
knop.addEventListener('click',function(){var open=menu.hidden;menu.hidden=!open;knop.setAttribute('aria-expanded',String(open));knop.setAttribute('aria-label',open?'Menu sluiten':'Menu openen');});
menu.addEventListener('click',function(e){if(e.target.closest('a')){menu.hidden=true;knop.setAttribute('aria-expanded','false');}});
var namen={leiden:'Leiden',oegstgeest:'Oegstgeest',voorschoten:'Voorschoten'};
var uren={leiden:[null,['7:30','20:00'],['7:30','20:00'],['7:30','20:00'],['7:30','20:00'],['7:30','18:00'],['9:00','13:00']],
  oegstgeest:[null,['8:00','18:00'],['8:00','18:00'],['8:00','18:00'],['8:00','18:00'],['8:00','14:00'],null],
  voorschoten:[null,['8:00','17:30'],['13:00','20:00'],['8:00','17:30'],['8:00','17:30'],['8:00','12:30'],null]};
var nu=new Date(),dag=nu.getDay(),min=nu.getHours()*60+nu.getMinutes();
function m(t){var p=t.split(':');return +p[0]*60+ +p[1];}
function status(v){var u=uren[v][dag];if(!u)return {t:'vandaag gesloten',open:false};if(min<m(u[0]))return {t:'vandaag open vanaf '+u[0],open:false};if(min<m(u[1]))return {t:'nu open tot '+u[1],open:true};return {t:'vandaag gesloten vanaf '+u[1],open:false};}
s.querySelectorAll('.vdf__v-open').forEach(function(el){var st=status(el.getAttribute('data-open'));el.textContent=st.t;el.classList.toggle('is-open',st.open);});
var top=s.querySelector('.vdf__nu'),open=Object.keys(uren).filter(function(v){return status(v).open;});
top.textContent=open.length?'Nu open in '+open.map(function(v){return namen[v];}).join(', '):'Nu gesloten. Bel gerust, dan spreek je de voicemail in';
s.querySelectorAll('.vdf__uren tr[data-dag="'+dag+'"]').forEach(function(tr){tr.classList.add('is-vandaag');var th=tr.querySelector('th');th.textContent=th.textContent+', vandaag';});
var fotos=s.querySelectorAll('.vdf__hero-foto img'),knoppen=s.querySelectorAll('.vdf__v');
function toon(v){fotos.forEach(function(f){f.classList.toggle('is-aan',f.getAttribute('data-v')===v);});knoppen.forEach(function(k){k.classList.toggle('is-aan',k.getAttribute('data-v')===v);});}
var tabs=[].slice.call(s.querySelectorAll('.vdf__tabs [role=tab]'));
function kies(v){tabs.forEach(function(t){var aan=t.getAttribute('data-v')===v;t.setAttribute('aria-selected',String(aan));t.tabIndex=aan?0:-1;s.querySelector('#'+t.getAttribute('aria-controls')).hidden=!aan;});}
tabs.forEach(function(t,i){t.addEventListener('click',function(){kies(t.getAttribute('data-v'));});t.addEventListener('keydown',function(e){var n=e.key==='ArrowRight'?1:e.key==='ArrowLeft'?-1:0;if(n){var x=tabs[(i+n+tabs.length)%tabs.length];x.focus();kies(x.getAttribute('data-v'));}});});
var form=s.querySelector('.vdf__form');
knoppen.forEach(function(k){var v=k.getAttribute('data-v');k.addEventListener('mouseenter',function(){toon(v);});k.addEventListener('focus',function(){toon(v);});
  k.addEventListener('click',function(){toon(v);kies(v);form.vest.value=v;var r=s.querySelector('#vdf-route');if(r&&r.scrollIntoView)r.scrollIntoView({behavior:window.matchMedia('(prefers-reduced-motion: reduce)').matches?'auto':'smooth',block:'start'});});});
var klaar=s.querySelector('.vdf__klaar');
function zet(veld,fout){var l=veld.closest('.vdf__veld');l.classList.toggle('is-fout',fout);l.querySelector('.vdf__fout').hidden=!fout;}
form.addEventListener('submit',function(e){e.preventDefault();
  var naam=form.naam.value.trim(),tel=form.tel.value.replace(/[^0-9+]/g,''),mail=form.mail.value.trim();
  var fn=!naam,ft=tel.replace('+31','0').length<10,fm=!!mail&&!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(mail);
  zet(form.naam,fn);zet(form.tel,ft);zet(form.mail,fm);
  if(fn||ft||fm){(fn?form.naam:ft?form.tel:form.mail).focus();return;}
  var soort=form.querySelector('input[name=soort]:checked').value;
  var wat={afspraak:'om een afspraak te plannen',vergoeding:'over je vraag over de vergoeding',anders:'over je bericht'}[soort];
  form.hidden=true;klaar.hidden=false;
  klaar.textContent='Dank je, '+naam.split(' ')[0]+'. Je bericht is binnen bij onze vestiging '+namen[form.vest.value]+'. We bellen je '+wat+', vandaag nog als het voor 15:00 is en anders morgenochtend.';});
}
init(document.querySelector('.jouw-container'));