<!-- MHC De Wielewaal · hockeyvereniging, Nijmegen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="wwl">
<div class="wwl__top"><div class="wwl__in wwl__top-in">
  <p class="wwl__kantine">Clubhuis vandaag open van 08:00 tot 18:00</p>
  <p>Wedstrijdsecretariaat <a href="tel:0241234567">024 123 4567</a> · <a href="#wwl-lid">Wachtlijst jongste jeugd</a></p>
</div></div>

<div class="wwl__kop" role="banner"><div class="wwl__in wwl__kop-in">
  <a href="#" class="wwl__logo" aria-label="MHC De Wielewaal, naar home"><svg viewBox="0 0 40 40" width="36" height="36" aria-hidden="true"><circle cx="20" cy="20" r="18" fill="none" stroke="currentColor" stroke-width="2.5"/><path d="M9 24c5-1 8-5 11-9 2 3 6 5 11 5-3 4-8 7-13 7-4 0-7-1-9-3z" fill="#FFD23F"/><circle cx="25" cy="17" r="1.6" fill="currentColor"/></svg><span>De Wielewaal</span></a>
  <nav class="wwl__nav" aria-label="Hoofdmenu">
    <a href="#wwl-programma">Programma</a><a href="#wwl-programma" data-tab="uitslagen">Uitslagen</a><a href="#wwl-jeugd">Jeugd</a><a href="#wwl-clubhuis">Clubhuis</a><a href="#wwl-nieuws">Nieuws</a><a href="#wwl-contact">Contact</a>
  </nav>
  <a href="#wwl-lid" class="wwl__knop wwl__knop--kop">Lid worden</a>
  <button class="wwl__menuknop" type="button" aria-expanded="false" aria-controls="wwl-menu" aria-label="Menu openen"><span></span><span></span><span></span></button>
</div>
<div class="wwl__menu" id="wwl-menu" hidden>
  <a href="#wwl-programma">Programma</a><a href="#wwl-programma" data-tab="uitslagen">Uitslagen</a><a href="#wwl-jeugd">Jeugd</a><a href="#wwl-clubhuis">Clubhuis</a><a href="#wwl-nieuws">Nieuws</a><a href="#wwl-contact">Contact</a><a href="#wwl-lid" class="wwl__knop">Lid worden</a>
</div>
</div>

<div class="wwl__hero">
  <img class="wwl__hero-img" src="https://neddev.com/lab-media/site-vereniging-1.webp" alt="Dames van De Wielewaal in blauw en geel tijdens een thuiswedstrijd op het waterveld" width="1408" height="768">
  <div class="wwl__hero-tekst"><div class="wwl__in">
    <h1 class="wwl__h1">Hockey aan de Hatertseweg</h1>
    <p class="wwl__lead">Mixed Hockeyclub De Wielewaal: 980 leden, vier velden en een clubhuis dat op vrijwilligers draait. Van zesjarigen bij de Funkeys tot veteranen van zeventig.</p>
    <div class="wwl__acties"><a href="#wwl-lid" class="wwl__knop">Word lid</a><a href="#wwl-programma" class="wwl__link">Programma van zaterdag</a></div>
  </div></div>
</div>

<div class="wwl__prog" id="wwl-programma"><div class="wwl__in">
  <div class="wwl__prog-kop">
    <h2 class="wwl__h2">Programma</h2>
    <div class="wwl__tabs" role="tablist" aria-label="Programma of uitslagen">
      <button type="button" role="tab" aria-selected="true" data-tab="programma" class="wwl__tab">Zaterdag</button>
      <button type="button" role="tab" aria-selected="false" data-tab="uitslagen" class="wwl__tab">Uitslagen vorige week</button>
    </div>
  </div>
  <div class="wwl__filters">
    <div class="wwl__groep" role="group" aria-label="Categorie">
      <button type="button" aria-pressed="true" data-cat="alle">Alle teams</button><button type="button" aria-pressed="false" data-cat="jeugd">Jeugd</button><button type="button" aria-pressed="false" data-cat="sen">Senioren</button><button type="button" aria-pressed="false" data-cat="vet">Veteranen</button>
    </div>
    <label class="wwl__waar">Thuis of uit <select><option value="alle">Alles</option><option value="thuis">Thuis</option><option value="uit">Uit</option></select></label>
  </div>
  <div class="wwl__prog-body">
    <div>
      <p class="wwl__datum"></p>
      <ul class="wwl__wedstrijden" aria-live="polite"></ul>
    </div>
    <div class="wwl__park">
      <svg viewBox="0 0 400 330" role="img" aria-label="Plattegrond sportpark met vier velden, clubhuis en fietsenstalling">
        <g class="wwl__veld" data-veld="1"><rect x="8" y="8" width="186" height="130"/><line x1="101" y1="8" x2="101" y2="138"/><path d="M8 48a26 26 0 0 1 0 50M194 48a26 26 0 0 0 0 50"/><text x="101" y="78">Veld 1</text></g>
        <g class="wwl__veld" data-veld="2"><rect x="206" y="8" width="186" height="130"/><line x1="299" y1="8" x2="299" y2="138"/><path d="M206 48a26 26 0 0 1 0 50M392 48a26 26 0 0 0 0 50"/><text x="299" y="78">Veld 2</text></g>
        <g class="wwl__veld" data-veld="3"><rect x="8" y="150" width="186" height="130"/><line x1="101" y1="150" x2="101" y2="280"/><path d="M8 190a26 26 0 0 1 0 50M194 190a26 26 0 0 0 0 50"/><text x="101" y="220">Veld 3</text></g>
        <g class="wwl__veld" data-veld="4"><rect x="206" y="150" width="120" height="130"/><line x1="266" y1="150" x2="266" y2="280"/><text x="266" y="220">Veld 4</text></g>
        <g class="wwl__gebouw"><rect x="336" y="150" width="56" height="78"/><text x="364" y="194">Club</text></g>
        <g class="wwl__gebouw"><rect x="336" y="236" width="56" height="44"/><text x="364" y="262">Fiets</text></g>
        <text class="wwl__weg" x="200" y="312">Hatertseweg, ingang bij de slagboom</text>
      </svg>
      <p class="wwl__park-uitleg">Wijs een wedstrijd aan en je ziet op welk veld hij wordt gespeeld.</p>
    </div>
  </div>
</div></div>

<div class="wwl__nieuws" id="wwl-nieuws"><div class="wwl__in">
  <h2 class="wwl__h2">Nieuws</h2>
  <div class="wwl__n-raster">
    <a href="#" class="wwl__n wwl__n--groot"><img src="https://neddev.com/lab-media/site-vereniging-8.webp" alt="Dames 1 in een kring op het veld voor de wedstrijd" width="900" height="491" loading="lazy"><h3 class="wwl__h3">Dames 1 wint derby en staat bovenaan</h3><p>Met 3-1 tegen Maasduinen, twee doelpunten uit strafcorners van Noor Hendriks. Volgende week thuis tegen de nummer twee.</p><time datetime="2026-10-05">5 oktober 2026</time></a>
    <a href="#" class="wwl__n"><img src="https://neddev.com/lab-media/site-vereniging-13.webp" alt="Twee vrijwilligers dragen een doel over het veld in de ochtendmist" width="900" height="491" loading="lazy"><h3 class="wwl__h3">Wie zet zaterdag om 07:30 de doelen klaar?</h3><p>We zoeken nog vier ouders voor de vroege ploeg. Koffie en een broodje staan klaar.</p><time datetime="2026-10-02">2 oktober 2026</time></a>
    <a href="#" class="wwl__n"><img src="https://neddev.com/lab-media/site-vereniging-11.webp" alt="Avondtraining onder de lampen op veld 3" width="900" height="491" loading="lazy"><h3 class="wwl__h3">Veld 3 krijgt ledverlichting</h3><p>De gemeente betaalt de helft. Vanaf november trainen de B-teams daar tot 22:00.</p><time datetime="2026-09-28">28 september 2026</time></a>
  </div>
  <ul class="wwl__n-lijst">
    <li><a href="#">Scheidsrechterscursus voor ouders start 22 oktober</a><time datetime="2026-09-24">24 september 2026</time></li>
    <li><a href="#">Nieuwe trainingstijden zaalhockey vanaf december</a><time datetime="2026-09-19">19 september 2026</time></li>
    <li><a href="#">Algemene ledenvergadering: stukken staan online</a><time datetime="2026-09-12">12 september 2026</time></li>
  </ul>
</div></div>

<div class="wwl__lid" id="wwl-lid"><div class="wwl__in wwl__lid-in">
  <div class="wwl__lid-tekst">
    <h2 class="wwl__h2">Lid worden</h2>
    <p>Vul je geboortejaar in en je ziet meteen in welke groep je speelt en wat een seizoen kost. Eerst proberen mag: je traint drie keer gratis mee.</p>
    <p>Elk lid, of een ouder, draait drie bardiensten per seizoen. Zo blijft de contributie laag.</p>
    <img src="https://neddev.com/lab-media/site-vereniging-12.webp" alt="Een meisje in blauw en geel dribbelt met de bal" width="900" height="491" loading="lazy">
  </div>
  <form class="wwl__form" novalidate>
    <label class="wwl__veldje">Geboortejaar<input name="jaar" type="number" inputmode="numeric" min="1940" max="2021" placeholder="bijvoorbeeld 2015"></label>
    <fieldset class="wwl__ervaring"><legend>Speel je al hockey?</legend>
      <label><input type="radio" name="ervaring" value="nee" checked> Nee, ik begin</label>
      <label><input type="radio" name="ervaring" value="ja"> Ja, bij een andere club</label>
    </fieldset>
    <label class="wwl__vink" hidden><input type="checkbox" name="student"> Ik studeer in Nijmegen (collegekaart)</label>
    <div class="wwl__uitkomst" aria-live="polite"><p>Vul een geboortejaar in om je groep en contributie te zien.</p></div>
    <div class="wwl__stap2">
      <label class="wwl__veldje">Naam van het nieuwe lid<input name="naam" autocomplete="name"></label>
      <label class="wwl__veldje">E-mail<input name="mail" type="email" autocomplete="email"></label>
    </div>
    <p class="wwl__fout" role="alert" hidden></p>
    <button type="submit" class="wwl__knop">Aanmelden</button>
  </form>
  <p class="wwl__klaar" role="status" hidden></p>
</div></div>

<div class="wwl__jeugd" id="wwl-jeugd"><div class="wwl__in wwl__jeugd-in">
  <img class="wwl__jeugd-a" src="https://neddev.com/lab-media/site-vereniging-15.webp" alt="Jeugdtraining met een trainster op het blauwe veld" width="900" height="491" loading="lazy">
  <img class="wwl__jeugd-b" src="https://neddev.com/lab-media/site-vereniging-14.webp" alt="Trimhockey onder de lampen op woensdagavond" width="900" height="491" loading="lazy">
  <div class="wwl__jeugd-tekst">
    <h2 class="wwl__h2">Jeugd en trimhockey</h2>
    <p>Bijna zeshonderd leden zijn jonger dan achttien. Hun trainers zijn oudere jeugdleden en ouders met een KNHB-cursus, begeleid door twee betaalde hoofdtrainers.</p>
    <p>Trimhockey is op woensdag om 20:30, voor volwassenen die willen beginnen of terugkomen. Geen competitie, wel na afloop een drankje.</p>
    <a href="#wwl-lid" class="wwl__link">Gratis meetrainen</a>
  </div>
</div></div>

<div class="wwl__club" id="wwl-clubhuis"><div class="wwl__in wwl__club-in">
  <div class="wwl__club-beeld">
    <img src="https://neddev.com/lab-media/site-vereniging-16.webp" alt="Vrijwilligers achter de bar in het clubhuis, met uitzicht op het veld" width="900" height="491" loading="lazy">
    <img src="https://neddev.com/lab-media/site-vereniging-5.webp" alt="Ouders op het terras kijken naar een wedstrijd" width="900" height="491" loading="lazy">
  </div>
  <div class="wwl__club-tekst">
    <h2 class="wwl__h2">Het clubhuis</h2>
    <p>Koffie voor de wedstrijd, tosti na de training. Achter de bar staan leden en ouders; de winst gaat naar materiaal voor de jeugd. De zaal boven is te huur voor verjaardagen en vergaderingen, vanaf €95 per dagdeel.</p>
    <ul class="wwl__tijden">
      <li data-dag="1"><span>maandag</span><span>18:00 tot 23:00</span></li>
      <li data-dag="2"><span>dinsdag</span><span>16:30 tot 23:00</span></li>
      <li data-dag="3"><span>woensdag</span><span>13:00 tot 23:30</span></li>
      <li data-dag="4"><span>donderdag</span><span>16:30 tot 23:00</span></li>
      <li data-dag="5"><span>vrijdag</span><span>18:00 tot 00:00</span></li>
      <li data-dag="6"><span>zaterdag</span><span>08:00 tot 20:00</span></li>
      <li data-dag="0"><span>zondag</span><span>09:30 tot 19:00</span></li>
    </ul>
  </div>
</div></div>

<div class="wwl__beeld"><div class="wwl__in">
  <h2 class="wwl__h2">Zaterdag in beeld</h2>
  <div class="wwl__galerij">
    <img class="wwl__g1" src="https://neddev.com/lab-media/site-vereniging-4.webp" alt="Keeper in geel tenue voor het doel" width="900" height="491" loading="lazy">
    <img class="wwl__g2" src="https://neddev.com/lab-media/site-vereniging-7.webp" alt="Veteranen geven elkaar een hand na de wedstrijd" width="900" height="491" loading="lazy">
    <img class="wwl__g3" src="https://neddev.com/lab-media/site-vereniging-3.webp" alt="Stick en bal op het natte waterveld" width="900" height="491" loading="lazy">
    <img class="wwl__g4" src="https://neddev.com/lab-media/site-vereniging-10.webp" alt="Volle fietsenstalling met sticks in de kratten" width="900" height="491" loading="lazy">
    <img class="wwl__g5" src="https://neddev.com/lab-media/site-vereniging-9.webp" alt="Scheidsrechter fluit tijdens een wedstrijd" width="900" height="491" loading="lazy">
  </div>
  <p class="wwl__sponsors">Met dank aan onze sponsors: Bouwbedrijf Van Kessel, Bakkerij Arts, Fysiotherapie Hatert, Rijwielhandel De Klokkenberg en Notariskantoor Smeets.</p>
</div></div>

<div class="wwl__voet" role="contentinfo" id="wwl-contact"><div class="wwl__in">
  <div class="wwl__voet-kol">
    <div><p class="wwl__voet-naam">MHC De Wielewaal</p><p>Hatertseweg 410<br>6533 GT Nijmegen</p><p><a href="tel:0241234567">024 123 4567</a><br><a href="mailto:secretariaat@voorbeeld.nl">secretariaat@voorbeeld.nl</a></p></div>
    <div><p class="wwl__voet-kop">Spelen</p><a href="#wwl-programma">Programma</a><a href="#wwl-programma">Uitslagen</a><a href="#">Trainingsschema</a><a href="#">Zaalhockey</a></div>
    <div><p class="wwl__voet-kop">Vereniging</p><a href="#wwl-lid">Lid worden</a><a href="#">Contributie</a><a href="#">Vrijwilligers</a><a href="#">Vertrouwenspersoon</a></div>
    <div><p class="wwl__voet-kop">Clubhuis</p><a href="#wwl-clubhuis">Openingstijden</a><a href="#">Zaal huren</a><a href="#">Sponsor worden</a><a href="#wwl-nieuws">Nieuws</a></div>
  </div>
  <p class="wwl__voet-regel">Mixed Hockeyclub De Wielewaal · KvK 40145678 · btw NL801234567B01 · aangesloten bij de KNHB · <a href="#">Privacy</a> · <a href="#">Statuten</a></p>
</div></div>
</div>
</div>

/* MHC De Wielewaal · hockeyvereniging, Nijmegen · NedDev · eigen werk. */
/* fonts (Fontshare): bespoke-slab@700 + bespoke-sans@400,700 */
.wwl{--bg:#1D3FD6;--opp:#2A4BE0;--tekst:#FFFFFF;--gedempt:#DCE3FF;--lijn:#4D68E6;--accent:#FFD23F;--op-accent:#000;--r:0;--fs1:13px;--fs2:15px;--fs3:18px;--fs4:24px;--fs5:36px;--fs6:60px;--sectie:clamp(48px,6vw,88px);--gat:clamp(16px,2vw,28px);--kader:1660px;--lees:720px;--zij:20px;
  container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Bespoke Sans',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.55;-webkit-font-smoothing:antialiased}
.wwl *{box-sizing:border-box}
.wwl [hidden]{display:none!important}
.wwl a{color:inherit}
.wwl img{display:block;max-width:100%;height:auto}
.wwl :where(p){margin:0}
.wwl__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,56px)}
.wwl__h1,.wwl__h2,.wwl__h3{font-family:'Bespoke Slab',serif;font-weight:700;margin:0;line-height:1.05}
.wwl__h1{font-size:var(--fs6);max-width:13ch}
.wwl__h2{font-size:var(--fs5);margin-bottom:20px}
.wwl__h3{font-size:var(--fs3);line-height:1.25;margin:12px 0 6px}
.wwl__knop{display:inline-block;background:var(--accent);color:var(--op-accent)!important;text-decoration:none;font:inherit;font-weight:700;padding:12px 22px;border:0;border-radius:var(--r);cursor:pointer;transition:background .18s}
.wwl__knop:hover{background:#FFE07A}
.wwl a:focus-visible,.wwl button:focus-visible,.wwl input:focus-visible,.wwl select:focus-visible,.wwl li:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wwl__link{display:inline-block;padding:4px 0;font-weight:700;text-underline-offset:4px;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.wwl__link:hover{color:var(--accent)}

.wwl__top{background:#13309F;font-size:var(--fs1);color:var(--gedempt)}
.wwl__top-in{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.wwl__top a{color:var(--tekst)}
.wwl__kop{position:sticky;top:0;z-index:5}
.wwl__kop-in{display:flex;align-items:center;gap:28px;padding-top:14px;padding-bottom:14px;background:var(--bg);border-bottom:1px solid var(--lijn)}
.wwl__logo{display:flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;font-family:'Bespoke Slab',serif;font-weight:700;font-size:var(--fs4)}
.wwl__nav{display:flex;gap:24px;margin-left:auto}
.wwl__nav a{text-decoration:none;color:var(--gedempt);transition:color .18s}
.wwl__nav a:hover{color:var(--tekst)}
.wwl__knop--kop{padding:9px 18px}
.wwl__menuknop{display:none;margin-left:auto;width:44px;height:44px;background:none;border:1px solid var(--lijn);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.wwl__menuknop span{display:block;width:20px;height:2px;background:var(--tekst)}
.wwl__menu{display:flex;flex-direction:column;padding:6px var(--zij) 20px;background:var(--bg);border-bottom:1px solid var(--lijn)}
.wwl__menu a{padding:10px 0;text-decoration:none;font-size:var(--fs3);border-bottom:1px solid var(--lijn)}
.wwl__menu .wwl__knop{margin-top:14px;text-align:center;border:0;font-size:var(--fs2)}

.wwl__hero{position:relative;height:clamp(480px,52vw,680px);overflow:hidden;background:#0A1A5C}
.wwl__hero-img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;object-position:center 40%}
.wwl__hero-tekst{position:absolute;left:0;right:0;bottom:0;padding:120px 0 44px;background:linear-gradient(to top,rgba(5,14,56,.88) 0%,rgba(5,14,56,.6) 55%,rgba(5,14,56,0) 100%)}
.wwl__lead{font-size:var(--fs3);max-width:52ch;margin:16px 0 24px;color:var(--gedempt)}
.wwl__acties{display:flex;gap:24px;align-items:center;flex-wrap:wrap}

.wwl__prog{padding:var(--sectie) 0}
.wwl__prog-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.wwl__prog-kop .wwl__h2{margin:0}
.wwl__tabs{display:flex;border:1px solid var(--lijn)}
.wwl__tab{background:none;border:0;color:var(--gedempt);font:inherit;padding:10px 16px;cursor:pointer}
.wwl__tab[aria-selected="true"]{background:var(--tekst);color:var(--bg);font-weight:700}
.wwl__filters{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);margin-bottom:8px}
.wwl__groep{display:flex;flex-wrap:wrap;gap:6px}
.wwl__groep button{background:none;border:1px solid var(--lijn);color:var(--tekst);font:inherit;padding:8px 14px;cursor:pointer;transition:background .18s}
.wwl__groep button:hover{border-color:var(--gedempt)}
.wwl__groep button[aria-pressed="true"]{background:var(--accent);color:var(--op-accent);border-color:var(--accent);font-weight:700}
.wwl__waar{display:flex;align-items:center;gap:10px;color:var(--gedempt)}
.wwl__waar select{font:inherit;color:var(--tekst);background:var(--opp);border:1px solid var(--lijn);padding:8px 10px;border-radius:0}
.wwl__prog-body{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.wwl__datum{color:var(--gedempt);padding:10px 0}
.wwl__wedstrijden{list-style:none;margin:0;padding:0}
.wwl__w{display:grid;grid-template-columns:64px 130px minmax(0,1fr) 120px;gap:14px;align-items:baseline;padding:11px 8px;border-bottom:1px solid var(--lijn);cursor:default;transition:background .15s}
.wwl__w time{font-weight:700}
.wwl__w-team{font-weight:700}
.wwl__w-tegen{color:var(--gedempt)}
.wwl__w-tegen small{display:block;font-size:var(--fs1);color:var(--gedempt);opacity:.85}
.wwl__w-waar{text-align:right}
.wwl__w.is-uit .wwl__w-waar{color:var(--gedempt)}
.wwl__w.is-aan{background:var(--opp)}
.wwl__w.is-aan .wwl__w-waar{color:var(--accent);font-weight:700}
.wwl__score{font-family:'Bespoke Slab',serif;font-weight:700;font-size:var(--fs3);text-align:right}
.wwl__score.is-winst{color:var(--accent)}
.wwl__leeg{padding:20px 8px;color:var(--gedempt)}
.wwl__park{position:sticky;top:96px}
.wwl__park svg{width:100%;height:auto;display:block}
.wwl__veld rect{fill:#2A4BE0;stroke:var(--gedempt);stroke-width:1.5;transition:fill .2s}
.wwl__veld line,.wwl__veld path{stroke:var(--gedempt);stroke-width:1.2;fill:none;opacity:.7}
.wwl__veld text,.wwl__gebouw text{fill:var(--tekst);font-family:'Bespoke Sans',sans-serif;font-size:15px;text-anchor:middle;font-weight:700}
.wwl__veld.is-aan rect{fill:var(--accent)}
.wwl__veld.is-aan text{fill:#000}
.wwl__veld.is-aan line,.wwl__veld.is-aan path{stroke:#000}
.wwl__gebouw rect{fill:#13309F;stroke:var(--lijn)}
.wwl__gebouw text{font-size:12px;font-weight:400}
.wwl__weg{fill:var(--gedempt);font-family:'Bespoke Sans',sans-serif;font-size:13px;text-anchor:middle}
.wwl__park-uitleg{color:var(--gedempt);font-size:var(--fs1);margin-top:10px}

.wwl__nieuws{background:var(--tekst);color:#0B1A5E;padding:var(--sectie) 0}
.wwl__nieuws .wwl__h2{color:var(--bg)}
.wwl__n-raster{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--gat);align-items:start}
.wwl__n{text-decoration:none;display:block}
.wwl__n img{width:100%;aspect-ratio:4/3;object-fit:cover}
.wwl__n--groot img{aspect-ratio:16/10}
.wwl__n p{color:#33416E;max-width:56ch;margin-bottom:8px}
.wwl__n time,.wwl__n-lijst time{font-size:var(--fs1);color:#4A5784}
.wwl__n:hover .wwl__h3{text-decoration:underline;text-decoration-color:var(--bg);text-underline-offset:4px}
.wwl__n-lijst{list-style:none;margin:32px 0 0;padding:0;border-top:2px solid var(--bg)}
.wwl__n-lijst li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #C9D2F5}
.wwl__n-lijst a{font-weight:700;text-decoration:none}
.wwl__n-lijst a:hover{text-decoration:underline}

.wwl__lid{padding:var(--sectie) 0}
.wwl__lid-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.wwl__lid-tekst p{color:var(--gedempt);max-width:50ch;margin-bottom:14px}
.wwl__lid-tekst img{margin-top:24px;width:100%;aspect-ratio:16/9;object-fit:cover}
.wwl__form{background:var(--opp);padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:16px;border-top:4px solid var(--accent)}
.wwl__veldje{display:flex;flex-direction:column;gap:6px;color:var(--gedempt);font-size:var(--fs1)}
.wwl__veldje input{font:inherit;font-size:var(--fs3);color:#000;background:#fff;border:0;padding:12px 14px;border-radius:0;width:100%}
.wwl__ervaring{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.wwl__ervaring legend{color:var(--gedempt);font-size:var(--fs1);margin-bottom:8px;padding:0}
.wwl__ervaring label,.wwl__vink{display:flex;gap:8px;align-items:center;cursor:pointer}
.wwl__ervaring input,.wwl__vink input{accent-color:var(--accent);width:18px;height:18px}
.wwl__uitkomst{background:var(--bg);padding:18px 20px;min-height:84px}
.wwl__uitkomst p{color:var(--gedempt)}
.wwl__uitkomst strong{font-family:'Bespoke Slab',serif;display:block;font-size:var(--fs4);color:var(--tekst);margin-bottom:4px}
.wwl__uitkomst .wwl__bedrag{color:var(--accent);font-weight:700}
.wwl__stap2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wwl__form .wwl__knop{align-self:flex-start}
.wwl__fout{color:var(--accent)}
.wwl__klaar{grid-column:2;font-size:var(--fs3);background:var(--opp);padding:24px;border-top:4px solid var(--accent)}

.wwl__jeugd{padding:0 0 var(--sectie)}
.wwl__jeugd-in{display:grid;grid-template-columns:4fr 4fr 5fr;grid-template-rows:auto auto;column-gap:clamp(24px,4vw,64px);align-items:center}
.wwl__jeugd-a{grid-column:1/3;grid-row:1;width:100%;aspect-ratio:16/8;object-fit:cover}
.wwl__jeugd-b{grid-column:2/3;grid-row:2;width:calc(100% + 120px);max-width:none;aspect-ratio:4/3;object-fit:cover;margin:-90px 0 0 -120px;position:relative;border:6px solid var(--bg)}
.wwl__jeugd-tekst{grid-column:3;grid-row:1/3}
.wwl__jeugd-tekst p{color:var(--gedempt);margin-bottom:14px;max-width:46ch}

.wwl__club{background:#13309F;padding:var(--sectie) 0}
.wwl__club-in{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,5vw,80px);align-items:start}
.wwl__club-beeld{display:grid;grid-template-columns:3fr 2fr;gap:12px;align-items:end}
.wwl__club-beeld img{width:100%;object-fit:cover}
.wwl__club-beeld img:first-child{aspect-ratio:4/5}
.wwl__club-beeld img:last-child{aspect-ratio:3/4}
.wwl__club-tekst p{color:var(--gedempt);max-width:50ch;margin-bottom:20px}
.wwl__tijden{list-style:none;margin:0;padding:0;max-width:420px}
.wwl__tijden li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--lijn);color:var(--gedempt)}
.wwl__tijden li.is-vandaag{color:var(--accent);font-weight:700}
.wwl__tijden li.is-vandaag span:first-child::after{content:", vandaag"}

.wwl__beeld{padding:var(--sectie) 0}
.wwl__galerij{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:220px 220px;gap:10px}
.wwl__galerij img{width:100%;height:100%!important;object-fit:cover}
.wwl__g1{grid-column:1/3;grid-row:1/3}
.wwl__g2{grid-column:3/5;grid-row:1}
.wwl__g3{grid-column:5/7;grid-row:1}
.wwl__g4{grid-column:3/4;grid-row:2}
.wwl__g5{grid-column:4/7;grid-row:2}
.wwl__sponsors{color:var(--gedempt);margin-top:28px;max-width:var(--lees)}

.wwl__voet{background:#0B1A5E;padding:56px 0 28px;font-size:var(--fs1);color:var(--gedempt)}
.wwl__voet-kol{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--gat);margin-bottom:40px}
.wwl__voet-kol p{margin-bottom:10px}
.wwl__voet-kol a{display:block;text-decoration:none;padding:3px 0}
.wwl__voet-kol a:hover{color:var(--tekst)}
.wwl__voet-naam{font-family:'Bespoke Slab',serif;font-weight:700;font-size:var(--fs4);color:var(--tekst)}
.wwl__voet-kop{color:var(--tekst);font-weight:700}
.wwl__voet-regel{border-top:1px solid #2A3A86;padding-top:18px}

@container (max-width:1040px){
  .wwl__nav,.wwl__knop--kop{display:none}
  .wwl__menuknop{display:flex}
  .wwl__prog-body{grid-template-columns:1fr}
  .wwl__park{position:static;max-width:480px}
}
@container (max-width:760px){
  .wwl__top-in{flex-direction:column;gap:2px}
  .wwl__h1{font-size:var(--fs5)}
  .wwl__h2{font-size:var(--fs4)}
  .wwl__hero{height:560px}
  .wwl__hero-tekst{padding:100px 0 28px}
  .wwl__w{grid-template-columns:52px minmax(0,1fr);gap:2px 12px;padding:10px 4px}
  .wwl__w-tegen,.wwl__w-waar,.wwl__score{grid-column:2;text-align:left}
  .wwl__n-raster{grid-template-columns:1fr 1fr}
  .wwl__n--groot{grid-column:1/-1}
  .wwl__n-lijst li{flex-direction:column;gap:2px}
  .wwl__lid-in,.wwl__club-in{grid-template-columns:1fr}
  .wwl__klaar{grid-column:1}
  .wwl__stap2{grid-template-columns:1fr}
  .wwl__jeugd-in{grid-template-columns:1fr 1fr}
  .wwl__jeugd-a{grid-column:1/-1;grid-row:1}
  .wwl__jeugd-b{grid-column:2;grid-row:2;width:100%;margin:-40px 0 0;border-width:4px}
  .wwl__jeugd-tekst{grid-column:1/-1;grid-row:3}
  .wwl__galerij{grid-template-columns:1fr 1fr;grid-template-rows:200px 130px 130px}
  .wwl__g1{grid-column:1/-1;grid-row:1}
  .wwl__g2{grid-column:1;grid-row:2}
  .wwl__g3{grid-column:2;grid-row:2}
  .wwl__g4{grid-column:1;grid-row:3}
  .wwl__g5{grid-column:2;grid-row:3}
  .wwl__voet-kol{grid-template-columns:1fr 1fr}
  .wwl__voet-kol>div:first-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.wwl *{transition:none!important;scroll-behavior:auto!important}}

// MHC De Wielewaal · hockeyvereniging, Nijmegen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.wwl');if(!s)return;
var knop=s.querySelector('.wwl__menuknop'),menu=s.querySelector('.wwl__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');knop.setAttribute('aria-label','Menu openen');}});
var nu=new Date(),dag=nu.getDay();
var kantine={0:'09:30 tot 19:00',1:'18:00 tot 23:00',2:'16:30 tot 23:00',3:'13:00 tot 23:30',4:'16:30 tot 23:00',5:'18:00 tot 00:00',6:'08:00 tot 20:00'};
s.querySelector('.wwl__kantine').textContent='Clubhuis vandaag open van '+kantine[dag];
var tl=s.querySelector('.wwl__tijden li[data-dag="'+dag+'"]');if(tl)tl.classList.add('is-vandaag');
var mnd=['januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december'];
var za=new Date(nu.getFullYear(),nu.getMonth(),nu.getDate()+((6-dag+7)%7));var vza=new Date(za.getFullYear(),za.getMonth(),za.getDate()-7);
var PR=[
 ['08:30','JO8-1','HC Ooijpolder JO8-2',1,'jeugd','Fluiten: ouders JO8-1'],
 ['08:30','MO8-2','MHC Berg en Dal MO8-1',2,'jeugd','Fluiten: ouders MO8-2'],
 ['09:45','JO10-3','MHC Lingewaard JO10-2',2,'jeugd','Fluiten: MO16-2'],
 ['09:45','MO11-1','HC Maasduinen MO11-1','Cuijk','jeugd','Vertrek 08:45 vanaf het clubhuis'],
 ['11:00','MO14-1','MHC Wijchen-Noord MO14-1',1,'jeugd','Fluiten: Heren 4'],
 ['11:00','JO16-1','HC Elst JO16-1','Elst','jeugd','Vertrek 10:00 vanaf het clubhuis'],
 ['11:15','Veteranen 1','MHC Berg en Dal V1',4,'vet','Bardienst: Veteranen 2'],
 ['12:30','Heren 3','HC Ooijpolder H2',3,'sen','Fluiten: Dames 4'],
 ['13:00','Dames 2','MHC Lingewaard D1','Bemmel','sen','Verzamelen 11:45'],
 ['14:45','Dames 1','HC Maasduinen D1',1,'sen','Bondsscheidsrechters'],
 ['14:45','Heren 2','MHC Druten H1',2,'sen','Fluiten: Heren 5'],
 ['16:30','Heren 1','HC Rivierenland H1','Tiel','sen','Bus vertrekt 14:45'],
 ['17:00','Veteranen 2','HC Elst V1',3,'vet','Fluiten: Veteranen 1']];
var UI=[
 ['JO8-1','MHC Lingewaard JO8-1','4-2',1],['MO11-1','HC Ooijpolder MO11-2','1-3',0],['MO14-1','HC Elst MO14-1','2-2',2],['JO16-1','MHC Druten JO16-1','5-0',1],
 ['Veteranen 1','HC Rivierenland V1','3-1',1],['Dames 2','HC Maasduinen D2','0-1',0],['Dames 1','MHC Wijchen-Noord D1','3-1',1],['Heren 1','MHC Berg en Dal H1','2-2',2]];
var catOf=function(t){return /^(J|M)O/.test(t)?'jeugd':/^Vet/.test(t)?'vet':'sen';};
var lijst=s.querySelector('.wwl__wedstrijden'),datum=s.querySelector('.wwl__datum'),velden=s.querySelectorAll('.wwl__veld'),uitleg=s.querySelector('.wwl__park-uitleg');
var tab='programma',cat='alle',waar='alle',kiesWaar=s.querySelector('.wwl__waar select');
function licht(v,el){velden.forEach(function(g){g.classList.toggle('is-aan',g.getAttribute('data-veld')===String(v));});
  lijst.querySelectorAll('.wwl__w').forEach(function(x){x.classList.toggle('is-aan',x===el);});
  if(el){uitleg.textContent=v?el.dataset.team+' speelt op veld '+v+'. Vanaf de slagboom '+(v==='1'||v==='3'?'links':'rechts')+' van het clubhuis.':el.dataset.team+' speelt uit in '+el.dataset.plaats+'.';}}
function render(){lijst.innerHTML='';var n=0;
  if(tab==='programma'){datum.textContent='Zaterdag '+za.getDate()+' '+mnd[za.getMonth()]+', '+PR.length+' wedstrijden';
    PR.forEach(function(r){var thuis=typeof r[3]==='number';if(cat!=='alle'&&r[4]!==cat)return;if(waar==='thuis'&&!thuis)return;if(waar==='uit'&&thuis)return;n++;
      var li=document.createElement('li');li.className='wwl__w'+(thuis?'':' is-uit');li.tabIndex=0;li.dataset.team=r[1];li.dataset.plaats=thuis?'':r[3];var v=thuis?String(r[3]):'';
      li.innerHTML='<time>'+r[0]+'</time><span class="wwl__w-team">'+r[1]+'</span><span class="wwl__w-tegen">tegen '+r[2]+'<small>'+r[5]+'</small></span><span class="wwl__w-waar">'+(thuis?'Veld '+r[3]:'Uit, '+r[3])+'</span>';
      ['mouseenter','focus','click'].forEach(function(ev){li.addEventListener(ev,function(){licht(v,li);});});lijst.appendChild(li);});}
  else{datum.textContent='Zaterdag '+vza.getDate()+' '+mnd[vza.getMonth()]+', uitslagen';
    UI.forEach(function(r){if(cat!=='alle'&&catOf(r[0])!==cat)return;n++;var li=document.createElement('li');li.className='wwl__w';
      li.innerHTML='<span></span><span class="wwl__w-team">'+r[0]+'</span><span class="wwl__w-tegen">tegen '+r[1]+'</span><span class="wwl__score'+(r[3]===1?' is-winst':'')+'">'+r[2]+'</span>';lijst.appendChild(li);});}
  if(!n){var l=document.createElement('li');l.className='wwl__leeg';l.textContent='Geen wedstrijden met deze keuze.';lijst.appendChild(l);}
  licht(null,null);uitleg.textContent=tab==='programma'?'Wijs een wedstrijd aan en je ziet op welk veld hij wordt gespeeld.':'De plattegrond hoort bij het programma van deze zaterdag.';}
var tabs=[].slice.call(s.querySelectorAll('.wwl__tab'));
function zetTab(t){tab=t;tabs.forEach(function(b){var aan=b.dataset.tab===t;b.setAttribute('aria-selected',String(aan));b.tabIndex=aan?0:-1;});kiesWaar.disabled=t!=='programma';render();}
tabs.forEach(function(b,i){b.addEventListener('click',function(){zetTab(b.dataset.tab);});b.addEventListener('keydown',function(e){if(e.key==='ArrowRight'||e.key==='ArrowLeft'){var v=tabs[1-i];v.focus();zetTab(v.dataset.tab);}});});
s.querySelectorAll('a[data-tab]').forEach(function(a){a.addEventListener('click',function(){zetTab(a.dataset.tab);});});
s.querySelectorAll('.wwl__groep button').forEach(function(b,_,alle){b.addEventListener('click',function(){cat=b.dataset.cat;alle.forEach(function(x){x.setAttribute('aria-pressed',String(x===b));});render();});});
kiesWaar.addEventListener('change',function(){waar=kiesWaar.value;render();});
zetTab('programma');
var G=[[5,6,'Funkeys',190,'Zaterdagochtend 09:00 tot 10:00, met een ouder op het veld. Er is een wachtlijst van ongeveer drie maanden.'],
 [7,8,'F- en E-jeugd',310,'Training op woensdagmiddag, wedstrijden op zaterdagochtend.'],
 [9,10,'D-jeugd',360,'Twee keer training per week, tussen 17:00 en 18:30.'],
 [11,12,'C-jeugd',395,'Twee keer training per week, wedstrijden op het hele veld.'],
 [13,14,'B-jeugd',420,'Twee keer training per week, ook op vrijdagavond.'],
 [15,17,'A-jeugd',440,'Twee keer training per week, overstap naar de senioren in zicht.'],
 [18,29,'Senioren',495,'Training op dinsdag of donderdag vanaf 20:00.'],
 [30,99,'Veteranen',455,'Eén keer training per week, wedstrijden op zaterdag of zondag.']];
var f=s.querySelector('.wwl__form'),uit=s.querySelector('.wwl__uitkomst'),vink=s.querySelector('.wwl__vink'),fout=s.querySelector('.wwl__fout'),klaar=s.querySelector('.wwl__klaar'),groep=null;
var seizoen=nu.getMonth()>=6?nu.getFullYear():nu.getFullYear()-1;
function bereken(){var j=parseInt(f.jaar.value,10);groep=null;
  if(!j||j<1930||j>nu.getFullYear()){uit.innerHTML='<p>Vul een geboortejaar in om je groep en contributie te zien.</p>';vink.hidden=true;return;}
  var lft=seizoen-j;if(lft<5){uit.innerHTML='<p>Hockey begint bij ons vanaf vijf jaar. Zet je kind alvast op de wachtlijst van de Funkeys.</p>';groep=G[0];vink.hidden=true;return;}
  for(var i=0;i<G.length;i++){if(lft>=G[i][0]&&lft<=G[i][1]){groep=G[i];break;}}
  vink.hidden=!(lft>=17&&lft<=27);var bedrag=groep[3];if(!vink.hidden&&f.student.checked&&groep[2]==='Senioren')bedrag=365;
  var extra=f.ervaring.value==='ja'?' Kom je over van een andere club, dan vraagt de KNHB je overschrijving voor je aan.':'';
  uit.innerHTML='<strong>'+groep[2]+'</strong><p>'+groep[4]+'</p><p><span class="wwl__bedrag">€'+bedrag+' per seizoen</span>, plus eenmalig €35 inschrijfgeld. Betalen kan in vier termijnen.'+extra+'</p>';}
f.addEventListener('input',bereken);f.addEventListener('change',bereken);
f.addEventListener('submit',function(e){e.preventDefault();bereken();var naam=f.naam.value.trim(),mail=f.mail.value.trim();
  var msg=!groep?'Vul eerst een geboortejaar in.':!naam?'Vul de naam van het nieuwe lid in.':!/.+@.+\..+/.test(mail)?'Vul een geldig e-mailadres in.':'';
  if(msg){fout.textContent=msg;fout.hidden=false;return;}fout.hidden=true;f.hidden=true;klaar.hidden=false;
  klaar.textContent='Dank je. '+naam.split(' ')[0]+' staat aangemeld voor de '+groep[2]+'. De ledenadministratie mailt binnen een week naar '+mail+' met de eerste proeftraining.';});
}
init(document.querySelector('.jouw-container'));