<!-- Tandartspraktijk Assendorp · tandarts, Zwolle · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tpa">
<div class="tpa__top"><div class="tpa__in tpa__top-in">
  <p class="tpa__top-txt">Pijn of een ongeluk? Bel <a href="#">038 123 4567</a>, ook als je nog geen patiënt bent.</p>
  <p class="tpa__top-txt tpa__top-r"><span class="tpa__vandaag">Vandaag open van 8:00 tot 17:00</span></p>
</div></div>

<div class="tpa__head" role="banner"><div class="tpa__in tpa__head-in">
  <a href="#" class="tpa__logo" aria-label="Tandartspraktijk Assendorp, naar home">Tandartspraktijk Assendorp</a>
  <nav class="tpa__nav" aria-label="Hoofdmenu">
    <a href="#tpa-behandelingen">Behandelingen</a><a href="#tpa-afspraak">Nieuwe patiënten</a><a href="#tpa-vergoeding">Vergoedingen</a><a href="#tpa-team">Team</a><a href="#tpa-afspraak">Spoed</a><a href="#tpa-contact">Contact</a>
  </nav>
  <button class="tpa__menu-knop" type="button" aria-expanded="false" aria-controls="tpa-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="tpa__menu" id="tpa-menu" hidden>
  <a href="#tpa-behandelingen">Behandelingen</a><a href="#tpa-afspraak">Nieuwe patiënten</a><a href="#tpa-vergoeding">Vergoedingen</a><a href="#tpa-team">Team</a><a href="#tpa-afspraak">Spoed</a><a href="#tpa-contact">Contact</a>
</div>
</div>

<div class="tpa__hero" id="tpa-afspraak"><div class="tpa__in tpa__hero-in">
  <div class="tpa__hero-txt">
    <h1 class="tpa__h1">Nieuwe patiënten welkom</h1>
    <p class="tpa__lead">Drie tandartsen en twee mondhygiënisten in een oud pakhuis aan de Assendorperstraat. We nemen tot het eind van het jaar nieuwe patiënten aan, ook gezinnen.</p>
    <p class="tpa__klein">Kies hiernaast een tijd. Je eerste afspraak duurt 30 minuten, met foto's en een plan op papier.</p>
    <img class="tpa__hero-foto" src="https://neddev.com/lab-media/site-tandarts-1.webp" alt="Behandelkamer met tandartsstoel en een groot raam met bomen" width="1408" height="768">
  </div>
  <div class="tpa__plek" data-modus="afspraak">
    <div class="tpa__schakel" role="radiogroup" aria-label="Waarvoor kom je?">
      <button type="button" role="radio" aria-checked="true" data-m="afspraak">Ik wil een afspraak</button>
      <button type="button" role="radio" aria-checked="false" data-m="spoed">Ik heb nu pijn</button>
    </div>
    <div class="tpa__afspraak">
      <label class="tpa__veld">Soort afspraak<select class="tpa__soort"><option value="kennis">Kennismaking, nieuwe patiënt</option><option value="controle">Controle</option><option value="mh">Mondhygiënist</option></select></label>
      <div class="tpa__dagen"></div>
      <form class="tpa__boek" novalidate hidden>
        <p class="tpa__gekozen"></p>
        <div class="tpa__rij">
          <label class="tpa__veld">Naam<input type="text" name="naam" autocomplete="name" required></label>
          <label class="tpa__veld">Telefoon<input type="tel" name="tel" autocomplete="tel" required></label>
        </div>
        <button type="submit" class="tpa__btn">Zet deze afspraak vast</button>
        <p class="tpa__fout" role="alert" hidden>Vul je naam en een telefoonnummer van tien cijfers in.</p>
      </form>
      <p class="tpa__klaar" role="status" hidden></p>
    </div>
    <div class="tpa__spoed" hidden>
      <p class="tpa__spoed-kop">Bel 038 123 4567</p>
      <p>We houden elke werkdag spoedplekken vrij. Bel voor 10:00, dan zie je vandaag nog een tandarts. Ook als je bij een andere praktijk staat ingeschreven.</p>
      <p class="tpa__spoed-vandaag"></p>
      <p>Buiten openingstijden bel je de tandartsenspoedpost IJsselland: 038 765 4321. Bij een uitgeslagen tand: bewaar hem in melk en bel meteen.</p>
    </div>
  </div>
</div></div>

<div class="tpa__praktijk"><div class="tpa__in tpa__praktijk-in">
  <figure class="tpa__pr-a"><img src="https://neddev.com/lab-media/site-tandarts-2.webp" alt="Wachtkamer met houten bank, planten en een groot raam" width="900" height="491" loading="lazy"></figure>
  <div class="tpa__pr-txt">
    <h2 class="tpa__h2">Geen witte gang</h2>
    <p class="tpa__p">In 2019 verbouwden we het pakhuis van een voormalige zadelmakerij. De wachtkamer kijkt uit op de straat, de behandelkamers op de binnentuin. Wie bang is voor de tandarts, krijgt eerst een gesprek zonder stoel.</p>
    <p class="tpa__p">Rolstoel of rollator? Alles is gelijkvloers en er is een invalidenparkeerplaats voor de deur.</p>
  </div>
  <figure class="tpa__pr-b"><img src="https://neddev.com/lab-media/site-tandarts-7.webp" alt="Tandheelkundige instrumenten netjes op een blad" width="900" height="491" loading="lazy"></figure>
</div></div>

<div class="tpa__beh" id="tpa-behandelingen"><div class="tpa__in">
  <h2 class="tpa__h2">Waarvoor je bij ons komt</h2>
  <div class="tpa__beh-in">
    <figure class="tpa__beh-groot"><img src="https://neddev.com/lab-media/site-tandarts-6.webp" alt="Tandarts laat een meisje een spiegeltje zien" width="900" height="491" loading="lazy">
      <figcaption><h3 class="tpa__h3">Kinderen</h3>Vanaf de eerste tand. Tot 18 jaar betaalt de basisverzekering, je zit dus nergens aan vast. Kinderen mogen eerst een ritje in de stoel maken.</figcaption></figure>
    <ul class="tpa__beh-lijst">
      <li><img src="https://neddev.com/lab-media/site-tandarts-5.webp" alt="Mondhygiënist legt instrumenten klaar" width="900" height="491" loading="lazy"><div><h3 class="tpa__h3">Mondhygiëne</h3><p>Gebitsreiniging, tandvlees meten en advies. Je mag direct naar de mondhygiënist, zonder verwijzing.</p></div></li>
      <li><img src="https://neddev.com/lab-media/site-tandarts-9.webp" alt="Tandarts bespreekt een röntgenfoto met een patiënt" width="900" height="491" loading="lazy"><div><h3 class="tpa__h3">Vullingen en kronen</h3><p>Je ziet de foto op het scherm voordat we beginnen. Kronen maakt een tandtechnicus in Kampen, binnen tien dagen.</p></div></li>
      <li><img src="https://neddev.com/lab-media/site-tandarts-12.webp" alt="Doorzichtige beugel en tandenborstel op een plank" width="900" height="491" loading="lazy"><div><h3 class="tpa__h3">Onzichtbare beugel</h3><p>Voor volwassenen met scheve voortanden. Eerst een scan en een gesprek over kosten, pas daarna een plan.</p></div></li>
    </ul>
  </div>
</div></div>

<div class="tpa__verg" id="tpa-vergoeding"><div class="tpa__in tpa__verg-in">
  <div class="tpa__verg-txt">
    <h2 class="tpa__h2">Wat betaal je zelf?</h2>
    <p class="tpa__p">Onze tarieven zijn de NZa-tarieven van 2026, die zijn voor elke tandarts gelijk. Wat je zelf betaalt hangt af van je leeftijd en je aanvullende verzekering.</p>
    <form class="tpa__check" novalidate>
      <label class="tpa__veld">Behandeling<select name="beh">
        <option value="62">Controle met gebitsreiniging, 62 euro</option>
        <option value="84">Vulling van twee vlakken, 84 euro</option>
        <option value="395">Wortelkanaalbehandeling, 395 euro</option>
        <option value="640" data-uit="Een kroon">Kroon op een kies, 640 euro</option>
        <option value="2900" data-uit="Een beugel">Onzichtbare beugel, 2.900 euro</option>
      </select></label>
      <div class="tpa__rij">
        <label class="tpa__veld">Leeftijd<select name="leeftijd"><option value="volw">18 jaar of ouder</option><option value="kind">jonger dan 18</option></select></label>
        <label class="tpa__veld">Aanvullende tandartsverzekering<select name="verz"><option value="0|0">geen</option><option value="0.75|250">75% tot 250 euro</option><option value="1|500">100% tot 500 euro</option><option value="1|1000">100% tot 1.000 euro</option></select></label>
      </div>
    </form>
    <div class="tpa__uitkomst" aria-live="polite">
      <p class="tpa__eigen">€ 62</p>
      <p class="tpa__uitleg">Dit betaal je zelf. Zonder aanvullende verzekering vergoedt de basisverzekering vanaf 18 jaar geen tandarts.</p>
    </div>
    <p class="tpa__klein">Indicatie per jaar, als je dat jaar nog niets declareerde. Wij sturen de nota direct naar je verzekeraar.</p>
  </div>
  <img class="tpa__verg-foto" src="https://neddev.com/lab-media/site-tandarts-10.webp" alt="Assistente helpt een patiënt aan de balie" width="900" height="491" loading="lazy">
</div></div>

<div class="tpa__team" id="tpa-team"><div class="tpa__in">
  <h2 class="tpa__h2">Wie je ziet</h2>
  <div class="tpa__team-in">
    <figure class="tpa__t1"><img src="https://neddev.com/lab-media/site-tandarts-3.webp" alt="Tandarts Esther van Dijk in een behandelkamer" width="900" height="491" loading="lazy"><figcaption><strong>Esther van Dijk</strong> Tandarts en praktijkhouder. Studeerde in Groningen, werkt hier sinds 2012 en behandelt vooral angstige patiënten.</figcaption></figure>
    <figure class="tpa__t2"><img src="https://neddev.com/lab-media/site-tandarts-4.webp" alt="Tandarts Ruud Hendriks bij het raam" width="900" height="491" loading="lazy"><figcaption><strong>Ruud Hendriks</strong> Tandarts, kronen en bruggen. Dertig jaar ervaring, waarvan twintig in Zwolle.</figcaption></figure>
    <figure class="tpa__t3"><img src="https://neddev.com/lab-media/site-tandarts-11.webp" alt="Tandarts in gesprek met een oudere patiënt" width="900" height="491" loading="lazy"><figcaption><strong>Yasmina el Amrani</strong> Tandarts, kinderen en ouderen. Gaat ook op huisbezoek in verpleeghuis De Vecht.</figcaption></figure>
  </div>
</div></div>

<div class="tpa__stem"><div class="tpa__in tpa__stem-in">
  <blockquote class="tpa__stem-groot">„Ik ben twaalf jaar niet bij een tandarts geweest. Esther nam eerst een half uur om te praten. Na drie afspraken was alles klaar en ik heb geen moment gepaniekt.”<cite>Jeroen Smit, Zwolle</cite></blockquote>
  <div class="tpa__stem-rest">
    <blockquote>„Onze zoon van vier wil nu elke keer mee als ik ga.”<cite>Laura Prins, Hattem</cite></blockquote>
    <blockquote>„Op een zaterdag een stuk kies afgebroken. Maandag om half negen gebeld, om tien uur stond er een kroon op de planning.”<cite>Wim Kolk, Zwolle</cite></blockquote>
    <p class="tpa__klein">9,2 gemiddeld uit 318 waarderingen op ZorgkaartNederland.</p>
  </div>
</div></div>

<div class="tpa__contact" id="tpa-contact"><div class="tpa__in tpa__contact-in">
  <div class="tpa__contact-a">
    <img src="https://neddev.com/lab-media/site-tandarts-8.webp" alt="De gevel van de praktijk aan de Assendorperstraat, met fietsen ervoor" width="900" height="491" loading="lazy">
    <h2 class="tpa__h2">Assendorperstraat 64</h2>
    <p class="tpa__p">8012 DK Zwolle. Tien minuten lopen van station Zwolle, bus 1 stopt om de hoek. Fietsen kunnen in de binnentuin.</p>
    <ul class="tpa__uren" aria-label="Openingstijden">
      <li data-dag="1"><span>Maandag</span><span>8:00 tot 17:00</span></li>
      <li data-dag="2"><span>Dinsdag</span><span>8:00 tot 20:00</span></li>
      <li data-dag="3"><span>Woensdag</span><span>8:00 tot 17:00</span></li>
      <li data-dag="4"><span>Donderdag</span><span>8:00 tot 17:00</span></li>
      <li data-dag="5"><span>Vrijdag</span><span>8:00 tot 13:00</span></li>
      <li data-dag="6"><span>Zaterdag</span><span>gesloten, spoedpost</span></li>
      <li data-dag="0"><span>Zondag</span><span>gesloten, spoedpost</span></li>
    </ul>
  </div>
  <div class="tpa__faq">
    <details><summary>Hoe schrijf ik me in?</summary><p>Kies een kennismakingsafspraak bovenaan deze pagina. Neem je identiteitsbewijs en je zorgpas mee; je oude tandarts vragen wij om je dossier.</p></details>
    <details><summary>Wat als ik moet afzeggen?</summary><p>Tot 24 uur vooraf kosteloos, telefonisch of via de link in je bevestiging. Daarna rekenen we 25 euro per kwartier.</p></details>
    <details><summary>Ik ben erg bang voor de tandarts.</summary><p>Zeg het bij het boeken. Je krijgt een langere afspraak bij Esther, eerst alleen een gesprek. Verdoving en lachgas zijn mogelijk.</p></details>
    <details><summary>Hoe zit het met mijn privacy?</summary><p>Je dossier staat in een Nederlands systeem dat voldoet aan NEN 7510. We delen niets zonder jouw toestemming, ook niet met je verzekeraar.</p></details>
  </div>
</div></div>

<div class="tpa__voet" role="contentinfo"><div class="tpa__in">
  <div class="tpa__voet-kol">
    <div><p class="tpa__voet-logo">Tandartspraktijk Assendorp</p><p>Assendorperstraat 64<br>8012 DK Zwolle<br><a href="#">038 123 4567</a><br><a href="mailto:balie@voorbeeld.nl">balie@voorbeeld.nl</a></p></div>
    <div><p class="tpa__voet-kop">Behandelingen</p><a href="#tpa-behandelingen">Kinderen</a><a href="#tpa-behandelingen">Mondhygiëne</a><a href="#tpa-behandelingen">Kronen</a><a href="#tpa-behandelingen">Beugel</a></div>
    <div><p class="tpa__voet-kop">Patiënten</p><a href="#tpa-afspraak">Inschrijven</a><a href="#tpa-vergoeding">Vergoedingen</a><a href="#tpa-afspraak">Spoed</a><a href="#">Klachtenregeling</a></div>
    <div><p class="tpa__voet-kop">Praktijk</p><a href="#tpa-team">Team</a><a href="#">Werken bij</a><a href="#">Privacy</a><a href="#tpa-contact">Contact</a></div>
  </div>
  <p class="tpa__voet-regel">Tandartspraktijk Assendorp B.V. · KvK 70123458 · btw NL858123470B01 · AGB-code 12-345678 · Lid KNMT · Ingeschreven in het Kwaliteitsregister Tandartsen · Aangesloten bij Geschillencommissie Mondzorg · <a href="#">Privacy</a></p>
</div></div>
</div>
</div>

/* Tandartspraktijk Assendorp · tandarts, Zwolle · NedDev · eigen werk. */
/* fonts (Fontshare): ranade@400,700 */
.tpa{--bg:#E2DAF2;--opp:#EFEAF8;--tekst:#1A1424;--gedempt:#4F4561;--lijn:#CBC0E3;--accent:#A33A00;--op-accent:#FFFFFF;--r:4px;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:48px;--fs6:84px;--sectie:clamp(56px,7vw,104px);--gat:clamp(24px,3vw,48px);--kader:1660px;--lees:720px;--zij:20px;
  container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Ranade',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.55;-webkit-font-smoothing:antialiased}
.tpa *{box-sizing:border-box}
.tpa [hidden]{display:none!important}
.tpa a{color:inherit}
.tpa img{display:block;max-width:100%;height:auto}
.tpa figure{margin:0}
.tpa__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,56px)}
.tpa__top{background:var(--tekst);color:#f1ecf9}
.tpa__top-in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:6px;padding-bottom:6px}
.tpa__top-txt{margin:0;font-size:var(--fs1)}
.tpa__top-txt a{font-weight:700;white-space:nowrap;display:inline-block;padding:3px 0}
.tpa__head{position:sticky;top:0;z-index:20}
.tpa__head-in{display:flex;align-items:center;gap:32px;height:72px;background:var(--bg);border-bottom:1px solid var(--lijn)}
.tpa__logo{font-weight:700;font-size:var(--fs3);text-decoration:none;letter-spacing:-.01em}
.tpa__nav{display:flex;gap:26px;margin-left:auto}
.tpa__nav a{text-decoration:none;color:var(--gedempt);transition:color .18s}
.tpa__nav a:hover{color:var(--accent)}
.tpa__btn{display:inline-block;background:var(--accent);color:var(--op-accent)!important;text-decoration:none;font-weight:700;font-size:var(--fs2);padding:14px 22px;border-radius:var(--r);border:0;cursor:pointer;font-family:inherit;transition:background-color .18s}
.tpa__btn:hover{background:#7f2d00}
.tpa__menu-knop{display:none;width:44px;height:44px;background:none;border:1px solid var(--tekst);border-radius:var(--r);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin-left:auto}
.tpa__menu-knop span{display:block;width:18px;height:2px;background:var(--tekst)}
.tpa__menu{background:var(--bg);border-bottom:1px solid var(--lijn);padding:8px var(--zij) 20px}
.tpa__menu a{display:block;padding:12px 0;font-size:var(--fs3);text-decoration:none;border-bottom:1px solid var(--lijn)}
.tpa__hero{padding:clamp(40px,5vw,72px) 0 var(--sectie)}
.tpa__hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,96px);align-items:start}
.tpa__h1{font-size:var(--fs6);font-weight:700;line-height:.98;letter-spacing:-.035em;margin:0 0 28px;max-width:8em}
.tpa__lead{font-size:var(--fs3);margin:0 0 16px;max-width:32em;line-height:1.45}
.tpa__klein{font-size:var(--fs1);color:var(--gedempt);margin:0 0 32px;max-width:40em}
.tpa__hero-foto{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--r)}
.tpa__plek{background:var(--opp);border-radius:var(--r);padding:clamp(20px,2.5vw,36px);position:sticky;top:96px;transition:background-color .25s,color .25s}
.tpa__plek[data-modus="spoed"]{background:var(--accent);color:#fff}
.tpa__schakel{display:flex;border:1px solid var(--tekst);border-radius:var(--r);margin-bottom:24px;overflow:hidden}
.tpa__plek[data-modus="spoed"] .tpa__schakel{border-color:#fff}
.tpa__schakel button{flex:1;font:inherit;font-weight:700;padding:13px 10px;background:none;border:0;color:inherit;cursor:pointer;transition:background-color .18s,color .18s}
.tpa__schakel button[aria-checked="true"]{background:var(--tekst);color:var(--opp)}
.tpa__plek[data-modus="spoed"] .tpa__schakel button[aria-checked="true"]{background:#fff;color:var(--accent)}
.tpa__schakel button:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.tpa__veld{display:grid;gap:6px;font-size:var(--fs1);color:var(--gedempt)}
.tpa__veld input,.tpa__veld select{font:inherit;font-size:var(--fs2);color:var(--tekst);background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:11px 14px;min-height:48px;width:100%}
.tpa__veld input:focus,.tpa__veld select:focus{outline:2px solid var(--accent);outline-offset:1px}
.tpa__dagen{margin-top:20px}
.tpa__dag{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;padding:13px 0;border-top:1px solid var(--lijn)}
.tpa__dag-n{font-weight:700;font-size:var(--fs3);line-height:1.25}
.tpa__dag-n small{display:block;font-weight:400;color:var(--gedempt);font-size:var(--fs1)}
.tpa__tijden{display:flex;flex-wrap:wrap;gap:6px}
.tpa__tijd{font:inherit;font-weight:700;font-size:var(--fs3);padding:9px 16px;border:1px solid var(--tekst);border-radius:var(--r);background:#fff;color:var(--tekst);cursor:pointer;transition:background-color .18s,color .18s}
.tpa__tijd:hover,.tpa__tijd[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.tpa__vol{font-size:var(--fs1);color:var(--gedempt)}
.tpa__boek{display:grid;gap:14px;margin-top:20px;border-top:2px solid var(--tekst);padding-top:18px}
.tpa__gekozen{margin:0;font-size:var(--fs3);font-weight:700}
.tpa__rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tpa__boek .tpa__btn{justify-self:start}
.tpa__fout{color:var(--accent);margin:0;font-weight:700}
.tpa__klaar{font-size:var(--fs3);font-weight:700;margin:20px 0 0;line-height:1.35}
.tpa__spoed p{margin:0 0 16px;max-width:34em}
.tpa__spoed-kop{font-size:var(--fs5);font-weight:700;line-height:1;letter-spacing:-.03em}
.tpa__spoed-vandaag{font-size:var(--fs3);font-weight:700;border-top:1px solid #ffffff66;border-bottom:1px solid #ffffff66;padding:14px 0}
.tpa__h2{font-size:var(--fs5);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin:0 0 20px}
.tpa__h3{font-size:var(--fs3);font-weight:700;line-height:1.2;margin:0 0 6px;color:var(--tekst)}
.tpa__p{color:var(--gedempt);margin:0 0 18px;max-width:var(--lees)}
.tpa__praktijk{padding:0 0 var(--sectie)}
.tpa__praktijk-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:var(--gat);align-items:center}
.tpa__praktijk img{width:100%;object-fit:cover;border-radius:var(--r)}
.tpa__pr-a img{aspect-ratio:1/1}
.tpa__pr-b{align-self:end}
.tpa__pr-b img{aspect-ratio:3/4}
.tpa__beh{background:var(--opp);padding:var(--sectie) 0}
.tpa__beh-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);margin-top:12px}
.tpa__beh-groot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.tpa figcaption{color:var(--gedempt);margin-top:16px;max-width:36em}
.tpa figcaption strong{display:block;color:var(--tekst);font-size:var(--fs3)}
.tpa__beh-lijst{list-style:none;margin:0;padding:0;display:grid;gap:28px;align-content:start}
.tpa__beh-lijst li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;align-items:start;border-top:1px solid var(--lijn);padding-top:28px}
.tpa__beh-lijst li:first-child{border-top:0;padding-top:0}
.tpa__beh-lijst img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.tpa__beh-lijst p{margin:0;color:var(--gedempt)}
.tpa__verg{padding:var(--sectie) 0}
.tpa__verg-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:start}
.tpa__check{display:grid;gap:16px;max-width:680px;margin-top:8px}
.tpa__uitkomst{border-top:2px solid var(--tekst);margin-top:28px;padding-top:18px;max-width:680px}
.tpa__eigen{font-size:var(--fs6);font-weight:700;line-height:1;letter-spacing:-.04em;margin:0 0 10px;color:var(--accent)}
.tpa__uitleg{margin:0 0 14px;font-size:var(--fs3);line-height:1.4;max-width:30em}
.tpa__verg-foto{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r)}
.tpa__team{padding:0 0 var(--sectie)}
.tpa__team-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:var(--gat);align-items:end}
.tpa__team img{width:100%;object-fit:cover;border-radius:var(--r)}
.tpa__t1 img{aspect-ratio:4/5}
.tpa__t2 img{aspect-ratio:1/1}
.tpa__t3 img{aspect-ratio:3/4}
.tpa__stem{background:var(--tekst);color:#f1ecf9;padding:var(--sectie) 0}
.tpa__stem-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px)}
.tpa blockquote{margin:0}
.tpa cite{display:block;font-style:normal;font-size:var(--fs1);margin-top:12px;color:#bdb3cf}
.tpa__stem-groot{font-size:var(--fs4);font-weight:700;line-height:1.25;letter-spacing:-.015em}
.tpa__stem-rest{display:grid;gap:26px;align-content:end}
.tpa__stem-rest blockquote{font-size:var(--fs3);border-top:1px solid #3a3148;padding-top:16px}
.tpa__stem .tpa__klein{color:#bdb3cf;margin:0}
.tpa__contact{padding:var(--sectie) 0}
.tpa__contact-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,96px)}
.tpa__contact-a img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);margin-bottom:28px}
.tpa__uren{list-style:none;margin:0;padding:0;max-width:480px}
.tpa__uren li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--lijn);color:var(--gedempt)}
.tpa__uren li.is-vandaag{color:var(--tekst);font-weight:700;border-bottom-color:var(--accent)}
.tpa__uren li.is-vandaag span:first-child::after{content:", vandaag";color:var(--accent)}
.tpa__faq{align-self:start}
.tpa__faq details{border-bottom:1px solid var(--lijn)}
.tpa__faq details:first-child{border-top:1px solid var(--lijn)}
.tpa__faq summary{cursor:pointer;padding:16px 36px 16px 0;font-weight:700;font-size:var(--fs3);list-style:none;position:relative}
.tpa__faq summary::-webkit-details-marker{display:none}
.tpa__faq summary::after{content:"+";position:absolute;right:4px;top:13px;font-size:var(--fs4);line-height:1;color:var(--accent)}
.tpa__faq details[open] summary::after{content:"\2212"}
.tpa__faq p{margin:0 0 18px;color:var(--gedempt)}
.tpa__voet{background:var(--opp);border-top:1px solid var(--lijn);padding:56px 0 32px;color:var(--gedempt)}
.tpa__voet-kol{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.tpa__voet-kol a{display:block;text-decoration:none;padding:3px 0;transition:color .18s}
.tpa__voet-kol a:hover{color:var(--accent)}
.tpa__voet-kol p{margin:0}
.tpa__voet-logo{font-weight:700;font-size:var(--fs3);color:var(--tekst);margin-bottom:12px!important}
.tpa__voet-kop{color:var(--tekst);font-weight:700;margin-bottom:8px!important}
.tpa__voet-regel{font-size:var(--fs1);border-top:1px solid var(--lijn);padding-top:20px;margin:0}
@container (max-width:1060px){
  .tpa__nav{display:none}
  .tpa__menu-knop{display:flex}
}
@container (max-width:900px){
  .tpa__top-r{display:none}
  .tpa__hero-in,.tpa__beh-in,.tpa__verg-in,.tpa__stem-in,.tpa__contact-in{grid-template-columns:minmax(0,1fr)}
  .tpa__plek{position:relative;top:0}
  .tpa .tpa__hero-foto{display:none}
  .tpa__h1{font-size:52px}
  .tpa__h2{font-size:var(--fs4)}
  .tpa__klein{margin-bottom:0}
  .tpa__praktijk-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tpa__pr-txt{grid-column:1/-1;order:-1}
  .tpa__pr-a img,.tpa__pr-b img{aspect-ratio:4/5}
  .tpa__verg-foto{aspect-ratio:16/10}
  .tpa__team-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tpa__t1{grid-column:1/-1}
  .tpa__t1 img{aspect-ratio:16/10}
  .tpa__t2 img,.tpa__t3 img{aspect-ratio:3/4}
  .tpa__stem-groot{font-size:var(--fs3)}
  .tpa__eigen{font-size:var(--fs5)}
  .tpa__voet-kol{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tpa__voet-kol>div:first-child{grid-column:1/-1}
}
@container (max-width:560px){
  .tpa__h1{font-size:40px}
  .tpa__logo{font-size:var(--fs2)}
  .tpa__dag{grid-template-columns:1fr;gap:6px}
  .tpa__rij{grid-template-columns:1fr}
  .tpa__beh-lijst li{grid-template-columns:minmax(0,1fr)}
  .tpa__team-in{grid-template-columns:minmax(0,1fr)}
  .tpa__t2 img,.tpa__t3 img{aspect-ratio:4/3}
  .tpa__schakel button{font-size:var(--fs1)}
}
@media (prefers-reduced-motion:reduce){.tpa *{transition:none!important}}

// Tandartspraktijk Assendorp · tandarts, Zwolle · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.tpa');if(!s)return;
var knop=s.querySelector('.tpa__menu-knop'),menu=s.querySelector('.tpa__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 nu=new Date(),dag=nu.getDay();var li=s.querySelector('.tpa__uren li[data-dag="'+dag+'"]');if(li)li.classList.add('is-vandaag');
var tt={0:'Vandaag gesloten, spoed via de spoedpost',1:'Vandaag open van 8:00 tot 17:00',2:'Vandaag open tot 20:00, avondspreekuur',3:'Vandaag open van 8:00 tot 17:00',4:'Vandaag open van 8:00 tot 17:00',5:'Vandaag open van 8:00 tot 13:00',6:'Vandaag gesloten, spoed via de spoedpost'};s.querySelector('.tpa__vandaag').textContent=tt[dag];
var nl=['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'],mnd=['januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december'];
var tijdenPer={kennis:['8:30','9:15','11:00','13:30','14:15','15:45','16:30'],controle:['8:00','8:45','10:15','11:30','13:00','14:30','16:00'],mh:['8:15','9:30','10:45','12:30','14:00','15:15','16:15']};
var dagenEl=s.querySelector('.tpa__dagen'),soort=s.querySelector('.tpa__soort'),boek=s.querySelector('.tpa__boek'),gekozen=s.querySelector('.tpa__gekozen'),klaar=s.querySelector('.tpa__klaar'),keus=null;
function werkdagen(n){var uit=[],d=new Date(nu.getFullYear(),nu.getMonth(),nu.getDate());while(uit.length<n){d=new Date(d.getFullYear(),d.getMonth(),d.getDate()+1);if(d.getDay()>0&&d.getDay()<6)uit.push(d);}return uit;}
function bouw(){var t=tijdenPer[soort.value];dagenEl.innerHTML='';boek.hidden=true;keus=null;
  werkdagen(5).forEach(function(d,i){var rij=document.createElement('div');rij.className='tpa__dag';
    var n=document.createElement('p');n.className='tpa__dag-n';n.style.margin='0';n.innerHTML=(i===0?'Morgen':nl[d.getDay()].charAt(0).toUpperCase()+nl[d.getDay()].slice(1))+'<small>'+d.getDate()+' '+mnd[d.getMonth()]+'</small>';
    var w=document.createElement('div');w.className='tpa__tijden';
    var vrij=t.filter(function(x,j){var uur=parseInt(x,10);if(d.getDay()===5&&uur>=13)return false;return (j*7+d.getDate()*3+i)%5<2;});
    if(!vrij.length){var v=document.createElement('span');v.className='tpa__vol';v.textContent='Vol, wachtlijst via de balie';w.appendChild(v);}
    vrij.forEach(function(x){var b=document.createElement('button');b.type='button';b.className='tpa__tijd';b.textContent=x;b.setAttribute('aria-pressed','false');
      b.addEventListener('click',function(){dagenEl.querySelectorAll('.tpa__tijd').forEach(function(y){y.setAttribute('aria-pressed','false');});b.setAttribute('aria-pressed','true');
        keus=nl[d.getDay()]+' '+d.getDate()+' '+mnd[d.getMonth()]+' om '+x;gekozen.textContent=soort.options[soort.selectedIndex].text+', '+keus;boek.hidden=false;});
      w.appendChild(b);});
    rij.appendChild(n);rij.appendChild(w);dagenEl.appendChild(rij);});}
soort.addEventListener('change',bouw);bouw();
var fout=s.querySelector('.tpa__fout');
boek.addEventListener('submit',function(e){e.preventDefault();var naam=boek.naam.value.trim(),tel=boek.tel.value.replace(/\D/g,'');if(!naam||tel.length<10){fout.hidden=false;return;}fout.hidden=true;boek.hidden=true;dagenEl.hidden=true;soort.parentNode.hidden=true;klaar.hidden=false;
  klaar.textContent='Dank je, '+naam.split(' ')[0]+'. Je afspraak staat op '+keus+'. Je krijgt een sms met de bevestiging en een herinnering de dag ervoor.';});
var plek=s.querySelector('.tpa__plek'),schakel=s.querySelectorAll('.tpa__schakel button'),sp=s.querySelector('.tpa__spoed'),af=s.querySelector('.tpa__afspraak'),spv=s.querySelector('.tpa__spoed-vandaag');
var uur=nu.getHours();spv.textContent=(dag===0||dag===6)?'Vandaag zijn we dicht. Bel de spoedpost, maandag vanaf 8:00 hebben we weer spoedplekken.':(uur<10?'Vandaag nog vrij: 10:45, 13:15 en 13:30.':(uur<13?'Vandaag nog vrij: 13:15 en 13:30.':(dag===5?'Vandaag vol. Maandag vrij om 8:15 en 10:45.':'Vandaag vol. Morgen vrij om 8:15 en 10:45.')));
function modus(m){plek.setAttribute('data-modus',m);schakel.forEach(function(b){b.setAttribute('aria-checked',String(b.dataset.m===m));});sp.hidden=m!=='spoed';af.hidden=m==='spoed';}
schakel.forEach(function(b,i){b.addEventListener('click',function(){modus(b.dataset.m);});b.addEventListener('keydown',function(e){if(e.key==='ArrowRight'||e.key==='ArrowLeft'){var o=schakel[1-i];o.focus();modus(o.dataset.m);}});});
var ch=s.querySelector('.tpa__check'),eigen=s.querySelector('.tpa__eigen'),uitleg=s.querySelector('.tpa__uitleg');
function euro(x){return '€ '+Math.round(x).toString().replace(/\B(?=(\d{3})+(?!\d))/g,'.');}
function check(){var opt=ch.beh.options[ch.beh.selectedIndex],k=+ch.beh.value,uit18=opt.dataset.uit||'',kind=ch.leeftijd.value==='kind',v=ch.verz.value.split('|'),pct=+v[0],max=+v[1],basis=0,aanv=0,txt;
  if(kind&&!uit18){basis=k;txt='De basisverzekering betaalt alles tot je 18e. Je eigen risico geldt hier niet.';}
  else{aanv=Math.min(k*pct,max);if(kind&&uit18)txt=uit18+' valt ook onder 18 niet in de basisverzekering. ';else txt='Vanaf 18 jaar vergoedt de basisverzekering geen tandarts. ';
    txt+=aanv>0?'Je aanvullende verzekering betaalt '+euro(aanv)+(k*pct>max?', daar zit het maximum van '+euro(max)+' per jaar.':'.'):'Met een aanvullende verzekering betaal je minder.';}
  eigen.textContent=euro(k-basis-aanv);uitleg.textContent='Dit betaal je zelf van '+euro(k)+'. '+txt;}
ch.addEventListener('change',check);check();
}
init(document.querySelector('.jouw-container'));