Rijschool Noorderbaan · autorijles, Groningen New

<!-- Rijschool Noorderbaan · autorijles, Groningen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="nrb">
<div class="nrb__top"><div class="nrb__in nrb__top-in">
  <p class="nrb__vrij">Proefles deze week nog vrij op donderdag 16:00 en zaterdag 10:00.</p>
  <p class="nrb__top-r"><a href="tel:0501234567">050 123 4567</a></p>
</div></div>

<div class="nrb__kop" role="banner"><div class="nrb__in nrb__kop-in">
  <a href="#" class="nrb__logo" aria-label="Rijschool Noorderbaan, naar home">Noorderbaan</a>
  <nav class="nrb__nav" aria-label="Hoofdmenu">
    <a href="#nrb-pak">Pakketten</a><a href="#nrb-proef">Proefles</a><a href="#nrb-mensen">Instructeurs</a><a href="#nrb-examen">Examen</a><a href="#nrb-geslaagd">Geslaagd</a><a href="#nrb-voet">Contact</a>
  </nav>
  <a href="#nrb-proef" class="nrb__knop nrb__knop--kop">Plan je proefles</a>
  <button class="nrb__menuknop" type="button" aria-expanded="false" aria-controls="nrb-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="nrb__menu" id="nrb-menu" hidden>
  <a href="#nrb-pak">Pakketten</a><a href="#nrb-proef">Proefles</a><a href="#nrb-mensen">Instructeurs</a><a href="#nrb-examen">Examen</a><a href="#nrb-geslaagd">Geslaagd</a><a href="#nrb-voet">Contact</a>
</div>
</div>

<div class="nrb__held"><div class="nrb__in nrb__held-in">
  <img class="nrb__c1" src="https://neddev.com/lab-media/site-rijschool-22.webp" alt="Leerling achter het stuur van de lesauto, de instructeur wijst naast haar de weg" width="1408" height="768">
  <img class="nrb__c2" src="https://neddev.com/lab-media/site-rijschool-10.webp" alt="Handen aan het stuur, de stad wazig door de voorruit" width="900" height="491">
  <div class="nrb__held-txt">
    <h1 class="nrb__h1">Rijden leer je in Stad</h1>
    <p class="nrb__lead">Lessen door de binnenstad, over de ring en de provinciale weg naar Winsum. Daar waar je straks ook examen doet. Gemiddeld slaagden onze leerlingen vorig jaar na 34 lessen, 71 procent in één keer.</p>
    <a href="#nrb-proef" class="nrb__knop">Plan je proefles</a>
  </div>
</div></div>

<div class="nrb__pak" id="nrb-pak"><div class="nrb__in">
  <div class="nrb__pak-kop">
    <h2 class="nrb__h2">Hoeveel lessen heb jij nodig?</h2>
    <p>Vier vragen, dan wijzen we het pakket aan dat bij jou past. Je zit nergens aan vast: na de proefles kies je pas.</p>
  </div>
  <form class="nrb__vragen" novalidate>
    <fieldset><legend>Hoe oud ben je?</legend>
      <label><input type="radio" name="leeftijd" value="17" checked><span>16 of 17, met 2toDrive</span></label>
      <label><input type="radio" name="leeftijd" value="18"><span>18 of ouder</span></label>
    </fieldset>
    <fieldset><legend>Heb je al eens gereden?</legend>
      <label><input type="radio" name="ervaring" value="0" checked><span>Nog nooit</span></label>
      <label><input type="radio" name="ervaring" value="1"><span>Op een parkeerplaats</span></label>
      <label><input type="radio" name="ervaring" value="2"><span>Brommer of scooter</span></label>
    </fieldset>
    <fieldset><legend>Schakel of automaat?</legend>
      <label><input type="radio" name="bak" value="schakel" checked><span>Schakel</span></label>
      <label><input type="radio" name="bak" value="auto"><span>Automaat</span></label>
    </fieldset>
    <fieldset><legend>Wanneer wil je examen doen?</legend>
      <label><input type="radio" name="haast" value="0" checked><span>Geen haast</span></label>
      <label><input type="radio" name="haast" value="1"><span>Binnen een maand</span></label>
    </fieldset>
  </form>
  <p class="nrb__advies" aria-live="polite">We schatten 33 tot 39 lessen. Pakket Ommeland past het best.</p>
  <ul class="nrb__pakketten">
    <li data-p="los" style="--n:1"><span class="nrb__pn">Losse les</span><span class="nrb__balk"><i></i></span><span class="nrb__pi">60 minuten, ophalen bij huis of school</span><span class="nrb__pp">€ 62</span></li>
    <li data-p="stad" style="--n:20"><span class="nrb__pn">Pakket Stad</span><span class="nrb__balk"><i></i></span><span class="nrb__pi">20 lessen en het praktijkexamen</span><span class="nrb__pp">€ 1.545</span></li>
    <li data-p="ring" style="--n:30"><span class="nrb__pn">Pakket Ring</span><span class="nrb__balk"><i></i></span><span class="nrb__pi">30 lessen en het praktijkexamen</span><span class="nrb__pp">€ 2.165</span></li>
    <li data-p="ommeland" style="--n:40"><span class="nrb__pn">Pakket Ommeland</span><span class="nrb__balk"><i></i></span><span class="nrb__pi">40 lessen, tussentijdse toets en examen</span><span class="nrb__pp">€ 2.890</span></li>
    <li data-p="spoed" style="--n:30"><span class="nrb__pn">Spoedopleiding</span><span class="nrb__balk"><i></i></span><span class="nrb__pi">30 lessen in drie weken, examen in week vier</span><span class="nrb__pp">€ 2.495</span></li>
  </ul>
  <p class="nrb__klein">De balk is het aantal lessen. Automaat: 3 euro per les extra. Betalen in drie termijnen kan zonder rente.</p>
</div></div>

<div class="nrb__proef" id="nrb-proef"><div class="nrb__in nrb__proef-in">
  <div class="nrb__proef-beeld">
    <img src="https://neddev.com/lab-media/site-rijschool-20.webp" alt="Instructeur en leerling bekijken de route op een tablet in de lesauto" width="900" height="491" loading="lazy">
    <img src="https://neddev.com/lab-media/site-rijschool-2.webp" alt="Groene lesauto aan een Groningse gracht" width="900" height="491" loading="lazy">
  </div>
  <form class="nrb__plan" novalidate>
    <h2 class="nrb__h2">Plan je proefles</h2>
    <p>Een uur rijden voor 45 euro. Neem je daarna een pakket, dan trekken we het ervan af. Je instructeur haalt je op, je rijdt zelf al na tien minuten en na afloop hoor je eerlijk hoeveel lessen hij of zij verwacht.</p>
    <fieldset class="nrb__dagen"><legend>Dag</legend><div class="nrb__dagrij"></div></fieldset>
    <fieldset class="nrb__tijden"><legend>Tijd</legend><div class="nrb__tijdrij"></div></fieldset>
    <div class="nrb__velden">
      <label>Je naam<input name="naam" autocomplete="name"></label>
      <label>Telefoon<input name="tel" type="tel" autocomplete="tel"></label>
    </div>
    <p class="nrb__fout" hidden></p>
    <button type="submit" class="nrb__knop">Vastzetten</button>
    <p class="nrb__klaar" hidden aria-live="polite"></p>
  </form>
</div></div>

<div class="nrb__mensen" id="nrb-mensen"><div class="nrb__in nrb__mensen-in">
  <h2 class="nrb__h2 nrb__mensen-h">Drie instructeurs, drie lesauto's</h2>
  <figure class="nrb__m1"><img src="https://neddev.com/lab-media/site-rijschool-16.webp" alt="Instructeur Jelle leunt tegen de lesauto" width="896" height="1200" loading="lazy">
    <figcaption><strong>Jelle Bakker</strong> Begon de rijschool in 2014. Rustig, droog, en goed met leerlingen die al eens zijn gezakt.</figcaption></figure>
  <figure class="nrb__m2"><img src="https://neddev.com/lab-media/site-rijschool-17.webp" alt="Instructeur Ilse bij het open portier van de lesauto" width="768" height="1376" loading="lazy">
    <figcaption><strong>Ilse Dijkstra</strong> Geeft les in de elektrische automaat. Veel leerlingen met faalangst kiezen voor haar.</figcaption></figure>
  <figure class="nrb__m3"><img src="https://neddev.com/lab-media/site-rijschool-7.webp" alt="Instructeur Mats zit in de geopende lesauto" width="768" height="1376" loading="lazy">
    <figcaption><strong>Mats Hoekstra</strong> Doet de spoedopleidingen en de avondlessen. Twee jaar geleden zelf nog leerling hier.</figcaption></figure>
  <p class="nrb__mensen-txt">Alle drie de auto's hebben dubbele bediening en een dashcam die je na elke les kunt terugkijken. Je krijgt één vaste instructeur, die je ook naar het examen brengt. Klikt het niet, dan wissel je gewoon, zonder gedoe en zonder kosten. Theorie doe je bij ons online, met een oefenexamen per hoofdstuk.</p>
</div></div>

<div class="nrb__examen" id="nrb-examen"><div class="nrb__in nrb__examen-in">
  <div>
    <h2 class="nrb__h2">Waar het examen wordt beslist</h2>
    <p>Het CBR in Groningen rijdt bijna altijd dezelfde stukken. Die oefenen we tot je ze kunt dromen. Twee weken voor je examen rijden we de route op het tijdstip van je examen, zodat je weet hoe druk het daar dan is.</p>
    <dl class="nrb__plekken">
      <dt>Rotonde Europaplein</dt><dd>Fietsers die voorrang hebben, en fietsers die denken dat ze het hebben. Hier zakken de meeste leerlingen.</dd>
      <dt>De zuidelijke ringweg</dt><dd>Invoegen op snelheid, nu de ring verdiept ligt. Kort invoegvak, dus vroeg kijken en doorrijden.</dd>
      <dt>Provinciale weg naar Winsum</dt><dd>Tachtig kilometer per uur, landbouwverkeer en inhalen. Het stuk waar je laat zien dat je vooruitkijkt.</dd>
    </dl>
  </div>
  <div class="nrb__examen-beeld">
    <img class="nrb__e1" src="https://neddev.com/lab-media/site-rijschool-4.webp" alt="Rotonde met een rood fietspad en veel fietsers" width="900" height="491" loading="lazy">
    <img class="nrb__e2" src="https://neddev.com/lab-media/site-rijschool-12.webp" alt="Auto op een provinciale weg tussen weilanden" width="900" height="491" loading="lazy">
  </div>
</div></div>

<div class="nrb__geslaagd" id="nrb-geslaagd"><div class="nrb__in nrb__geslaagd-in">
  <img class="nrb__g1" src="https://neddev.com/lab-media/site-rijschool-19.webp" alt="Lotte lacht naast de lesauto na haar examen" width="900" height="491" loading="lazy">
  <div class="nrb__g-txt">
    <h2 class="nrb__h2">Geslaagd in oktober</h2>
    <blockquote class="nrb__quote">"Ik ben twee keer gezakt bij een andere rijschool. Jelle liet me eerst een les alleen maar invoegen. Derde keer gehaald."<cite>Lotte Mulder, 19, Helpman</cite></blockquote>
    <p class="nrb__namen">Ook gehaald deze maand: Bram (17, 29 lessen), Fatima (22, automaat, 31 lessen), Sven (18, 36 lessen), Noor (17, 27 lessen), Yusuf (24, spoedopleiding), Femke (17, 33 lessen) en Daan (19, 41 lessen). Wie slaagt, krijgt de laatste les gratis: dan rijden we samen naar huis en mag jij de radio kiezen.</p>
  </div>
  <img class="nrb__g2" src="https://neddev.com/lab-media/site-rijschool-18.webp" alt="Bram houdt de autosleutel omhoog naast de lesauto" width="900" height="491" loading="lazy">
</div></div>

<div class="nrb__voet" id="nrb-voet" role="contentinfo"><div class="nrb__in">
  <p class="nrb__woord">Noorderbaan</p>
  <div class="nrb__voet-rij">
    <p><a href="tel:0501234567">050 123 4567</a> · <a href="mailto:les@voorbeeld.nl">les@voorbeeld.nl</a> · App ons gerust, ook 's avonds.</p>
    <p>Lesadres Oosterhamrikkade 88, 9714 BG Groningen. We halen je op in Stad, Haren, Ten Boer en Zuidhorn.</p>
    <p>KvK 01234567 · btw NL001234567B01 · Kwaliteitsregeling Rijscholen (KRM) · <a href="#">Privacy</a> · <a href="#">Lesvoorwaarden</a></p>
  </div>
</div></div>
</div>
</div>

/* Rijschool Noorderbaan · autorijles, Groningen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
/* fonts (Fontshare): tanker@400 + switzer@400,500 */
.nrb{--bg:#FF8DB8;--opp:#FFA3C6;--tekst:#1A0A12;--gedempt:#3F1A2B;--lijn:#F07AA6;--accent:#00402F;--op-accent:#FFFFFF;--r:4px;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:48px;--fs6:84px;--sectie:clamp(96px,12vw,176px);--gat:clamp(24px,3vw,48px);--kader:1660px;--lees:720px;--zij:20px;
  container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Switzer',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.55;-webkit-font-smoothing:antialiased}
.nrb *{box-sizing:border-box}
.nrb [hidden]{display:none!important}
.nrb a{color:inherit;text-underline-offset:4px}
.nrb img{display:block;max-width:100%;height:auto;border-radius:var(--r)}
.nrb p{margin:0 0 14px}
.nrb__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,56px)}
.nrb__top{background:var(--accent);color:#fff;font-size:var(--fs1)}
.nrb__top-in{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}
.nrb__top p{margin:0}
.nrb__top a{white-space:nowrap;display:inline-block;padding:4px 0}
.nrb__kop{position:sticky;top:0;z-index:20}
.nrb__kop-in{display:flex;align-items:center;gap:30px;height:78px;background:var(--bg)}
.nrb__logo{font-family:'Tanker',sans-serif;font-weight:400;font-size:var(--fs5);line-height:1;text-decoration:none;margin-right:auto;padding:6px 0}
.nrb__nav{display:flex;gap:24px;font-weight:500}
.nrb__nav a{text-decoration:none;transition:color .18s}
.nrb__nav a:hover{color:var(--accent)}
.nrb__knop{display:inline-block;background:var(--accent);color:var(--op-accent)!important;font:inherit;font-weight:500;padding:15px 24px;border:0;border-radius:var(--r);text-decoration:none;cursor:pointer;transition:background-color .18s}
.nrb__knop:hover{background:#00281D}
.nrb__menuknop{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:10px}
.nrb__menuknop span{display:block;height:2px;background:var(--tekst)}
.nrb__menu{display:flex;flex-direction:column;background:var(--bg);padding:8px var(--zij) 20px;border-bottom:1px solid var(--lijn)}
.nrb__menu a{padding:12px 0;font-size:var(--fs3);text-decoration:none;border-bottom:1px solid var(--lijn)}
.nrb__held{padding:24px 0 96px}
.nrb__held-in{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto;gap:0 var(--gat);position:relative}
.nrb .nrb__c1{grid-column:5/13;grid-row:1/3;width:100%;height:100%;min-height:520px;object-fit:cover}
.nrb .nrb__c2{grid-column:1/5;grid-row:1;align-self:start;width:calc(100% + 72px);max-width:none;aspect-ratio:4/3;object-fit:cover;position:relative;z-index:2;margin-top:48px;border:6px solid var(--bg)}
.nrb__held-txt{display:contents}
.nrb__h1{font-family:'Tanker',sans-serif;font-weight:400;font-size:var(--fs6);line-height:.95;margin:0;grid-column:1/5;grid-row:2;align-self:end;padding-top:32px}
.nrb__lead{font-size:var(--fs3);max-width:34em;grid-column:5/11;grid-row:3;margin:28px 0 0!important}
.nrb__held-txt .nrb__knop{grid-column:1/5;grid-row:3;justify-self:start;align-self:start;margin-top:32px}
.nrb__h2{font-family:'Tanker',sans-serif;font-weight:400;font-size:var(--fs5);line-height:1;margin:0 0 20px}
.nrb__pak{background:var(--opp);padding:96px 0 80px}
.nrb__pak-kop{display:grid;grid-template-columns:6fr 5fr;gap:var(--gat);align-items:end;margin-bottom:36px}
.nrb__pak-kop p{max-width:28em;margin:0}
.nrb__vragen{display:grid;grid-template-columns:5fr 6fr;gap:24px 48px;margin-bottom:36px}
.nrb__vragen fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.nrb__vragen legend{font-weight:500;padding:0;margin-bottom:10px}
.nrb__vragen label,.nrb__dagen label,.nrb__tijden label{position:relative;cursor:pointer}
.nrb__vragen input,.nrb__dagen input,.nrb__tijden input{position:absolute;opacity:0}
.nrb__vragen span,.nrb__dagen span,.nrb__tijden span{display:block;padding:10px 16px;border:2px solid var(--tekst);border-radius:var(--r);transition:background-color .18s,color .18s}
.nrb input:checked+span{background:var(--tekst);color:var(--bg)}
.nrb input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.nrb__advies{font-family:'Tanker',sans-serif;font-size:var(--fs4);line-height:1.15;max-width:26em;margin-bottom:24px!important;color:var(--accent)}
.nrb__pakketten{list-style:none;margin:0;padding:0;border-top:2px solid var(--tekst)}
.nrb__pakketten li{display:grid;grid-template-columns:200px 1fr 300px 100px;gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--lijn);transition:background-color .2s}
.nrb__pn{font-family:'Tanker',sans-serif;font-size:var(--fs4);line-height:1}
.nrb__balk{display:block;height:14px}
.nrb__balk i{display:block;height:100%;width:calc(var(--n) * 2.5%);min-width:6px;background:var(--tekst);border-radius:var(--r);transition:background-color .2s}
.nrb__pi{color:var(--gedempt)}
.nrb__pp{font-weight:500;font-size:var(--fs3);text-align:right}
.nrb__pakketten li.is-advies .nrb__balk i{background:var(--accent)}
.nrb__pakketten li.is-advies .nrb__pn,.nrb__pakketten li.is-advies .nrb__pp{color:var(--accent)}
.nrb__pakketten li.is-advies{background:var(--bg);box-shadow:-12px 0 0 var(--bg),12px 0 0 var(--bg)}
.nrb__klein{font-size:var(--fs1);color:var(--gedempt);margin-top:16px!important}
.nrb__proef{padding:96px 0}
.nrb__proef-in{display:grid;grid-template-columns:6fr 5fr;gap:72px;align-items:start}
.nrb__proef-beeld{position:relative;padding-bottom:120px}
.nrb__proef-beeld img:first-child{width:86%;aspect-ratio:4/3;object-fit:cover}
.nrb__proef-beeld img:last-child{position:absolute;right:0;bottom:0;width:52%;aspect-ratio:4/3;object-fit:cover;border:6px solid var(--bg)}
.nrb__plan{display:grid;gap:16px}
.nrb__plan>p{max-width:30em}
.nrb__dagen,.nrb__tijden{border:0;margin:0;padding:0}
.nrb__dagen legend,.nrb__tijden legend{font-weight:500;padding:0;margin-bottom:10px}
.nrb__dagrij,.nrb__tijdrij{display:flex;flex-wrap:wrap;gap:8px}
.nrb__dagen span{text-align:center;min-width:64px;line-height:1.25}
.nrb__velden{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nrb__velden label{display:grid;gap:6px;font-size:var(--fs1);font-weight:500}
.nrb__velden input{font:inherit;font-size:var(--fs2);padding:12px;border:2px solid var(--tekst);border-radius:var(--r);background:var(--opp);color:var(--tekst);min-width:0;width:100%}
.nrb__velden input:focus{outline:3px solid var(--accent);outline-offset:1px}
.nrb__plan .nrb__knop{justify-self:start}
.nrb__fout{color:#7A0026;font-weight:500}
.nrb__klaar{font-family:'Tanker',sans-serif;font-size:var(--fs4);line-height:1.15;color:var(--accent)}
.nrb__mensen{background:var(--accent);color:#fff;padding:96px 0}
.nrb__mensen-in{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gat);align-items:start}
.nrb__mensen-h{grid-column:1/6;grid-row:1}
.nrb__mensen-in figure{margin:0}
.nrb__mensen-in img{width:100%;aspect-ratio:3/4;object-fit:cover;margin-bottom:12px}
.nrb__mensen-in figcaption{font-size:var(--fs1);color:#CDE3DA;max-width:26em}
.nrb__mensen-in strong{display:block;font-family:'Tanker',sans-serif;font-weight:400;font-size:var(--fs4);color:#fff;margin-bottom:4px}
.nrb__m1{grid-column:1/6;grid-row:2}
.nrb__m2{grid-column:6/9;grid-row:1/3;margin-top:24px!important}
.nrb__m3{grid-column:9/13;grid-row:1/3;margin-top:140px!important}
.nrb__mensen-txt{grid-column:1/8;font-size:var(--fs3);max-width:32em;margin:0!important;color:#E8F2EE}
.nrb__examen{padding:96px 0}
.nrb__examen-in{display:grid;grid-template-columns:5fr 6fr;gap:72px;align-items:start}
.nrb__examen-in>div>p{max-width:30em}
.nrb__plekken{margin:28px 0 0;border-top:2px solid var(--tekst)}
.nrb__plekken dt{font-family:'Tanker',sans-serif;font-size:var(--fs4);line-height:1;padding-top:18px}
.nrb__plekken dd{margin:8px 0 0;padding-bottom:18px;border-bottom:1px solid var(--lijn);max-width:32em}
.nrb__examen-beeld{position:relative;padding-bottom:180px}
.nrb__e1{width:100%;aspect-ratio:16/10;object-fit:cover}
.nrb__e2{position:absolute;left:-48px;bottom:0;width:58%;aspect-ratio:4/3;object-fit:cover;border:6px solid var(--bg)}
.nrb__geslaagd{background:var(--opp);padding:96px 0}
.nrb__geslaagd-in{display:grid;grid-template-columns:4fr 5fr 3fr;gap:var(--gat);align-items:center}
.nrb__g1{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:35% 50%}
.nrb__g2{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:62% 50%;align-self:end}
.nrb__quote{margin:0 0 20px;font-size:var(--fs3);line-height:1.45;font-weight:500;max-width:30em}
.nrb__quote cite{display:block;font-style:normal;font-weight:400;font-size:var(--fs1);margin-top:10px;color:var(--gedempt)}
.nrb__namen{color:var(--gedempt);max-width:32em}
.nrb__voet{background:var(--tekst);color:#F6D9E5;padding:64px 0 28px}
.nrb__woord{font-family:'Tanker',sans-serif;font-size:var(--fs6);line-height:.9;color:var(--bg);margin:0 0 28px!important}
.nrb__voet-rij{display:grid;grid-template-columns:4fr 4fr 5fr;gap:var(--gat);font-size:var(--fs1);border-top:1px solid #4A2636;padding-top:20px}
.nrb__voet-rij p{margin:0}
@container (max-width:1060px){
  .nrb__nav,.nrb__knop--kop{display:none}
  .nrb__menuknop{display:flex}
  .nrb__vrij{display:none}
  .nrb .nrb__c1{grid-column:1/13;grid-row:1;height:auto;min-height:0;aspect-ratio:4/3}
  .nrb .nrb__c2{grid-column:7/13;grid-row:2;width:100%;margin:-48px 0 0;justify-self:end}
  .nrb__h1{grid-column:1/13;grid-row:3;font-size:var(--fs5);padding-top:24px}
  .nrb__lead{grid-column:1/13;grid-row:4;margin-top:16px!important}
  .nrb__held-txt .nrb__knop{grid-column:1/13;grid-row:5;margin-top:24px}
  .nrb__pak-kop,.nrb__vragen,.nrb__proef-in,.nrb__examen-in,.nrb__voet-rij{grid-template-columns:1fr}
  .nrb__pakketten li{grid-template-columns:1fr auto;gap:6px 16px}
  .nrb__balk{grid-column:1/-1;grid-row:2}
  .nrb__pi{grid-column:1/-1}
  .nrb__pp{grid-row:1;grid-column:2}
  .nrb__mensen-in>*{grid-column:1/-1!important;grid-row:auto!important;margin-top:0!important}
  .nrb__mensen-in{grid-template-columns:1fr 1fr}
  .nrb__m1,.nrb__m2,.nrb__m3{grid-column:auto!important}
  .nrb__m1{grid-column:1/2!important}.nrb__m2{grid-column:2/3!important}
  .nrb__m3{grid-column:1/2!important}
  .nrb__mensen-txt{grid-column:2/3!important;align-self:center}
  .nrb__e2{left:auto;right:0}
  .nrb__geslaagd-in{grid-template-columns:1fr 1fr}
  .nrb__g-txt{grid-column:1/-1;order:-1}
}
@container (max-width:560px){
  .nrb__logo{font-size:var(--fs4)}
  .nrb__h1{font-size:var(--fs5)}
  .nrb__h2{font-size:var(--fs4)}
  .nrb .nrb__c2{grid-column:5/13}
  .nrb__mensen-in{grid-template-columns:1fr}
  .nrb__mensen-in>*{grid-column:1/-1!important}
  .nrb__velden{grid-template-columns:1fr}
  .nrb__proef-beeld{padding-bottom:80px}
  .nrb__examen-beeld{padding-bottom:110px}
  .nrb__woord{font-size:var(--fs5)}
  .nrb__geslaagd-in{grid-template-columns:1fr}
  .nrb__g1{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){.nrb *{transition:none!important}}

// Rijschool Noorderbaan · autorijles, Groningen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.nrb');if(!s)return;
var knop=s.querySelector('.nrb__menuknop'),menu=s.querySelector('.nrb__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 v=s.querySelector('.nrb__vragen'),adv=s.querySelector('.nrb__advies'),rijen=s.querySelectorAll('.nrb__pakketten li');
var NAAM={stad:'Pakket Stad',ring:'Pakket Ring',ommeland:'Pakket Ommeland',spoed:'De spoedopleiding'};
function schat(){var l=v.leeftijd.value,e=+v.ervaring.value,auto=v.bak.value==='auto',h=v.haast.value==='1';
  var basis=l==='17'?36:40;basis-=e*4;if(auto)basis-=6;var lo=basis-3,hi=basis+3;
  var p=h?'spoed':hi<=24?'stad':hi<=34?'ring':'ommeland';
  if(h&&lo>30)p='spoed';
  var extra=p==='ring'&&hi>32?' met een paar losse lessen erbij':p==='stad'&&hi>20?' met een paar losse lessen erbij':'';
  adv.textContent='We schatten '+lo+' tot '+hi+' lessen'+(auto?' in de automaat':'')+'. '+NAAM[p]+extra+' past het best.'+(h?' Examen kan dan in week vier.':'');
  rijen.forEach(function(r){r.classList.toggle('is-advies',r.getAttribute('data-p')===p);});}
v.addEventListener('change',schat);schat();
var dagrij=s.querySelector('.nrb__dagrij'),tijdrij=s.querySelector('.nrb__tijdrij'),kort=['zo','ma','di','wo','do','vr','za'],lang=['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'],mnd=['jan','feb','mrt','apr','mei','jun','jul','aug','sep','okt','nov','dec'];
var TIJD={1:['16:00','17:00','19:30'],2:['9:00','14:00','16:00'],3:['13:00','15:00'],4:['16:00','18:30'],5:['9:00','11:00','15:00'],6:['10:00','12:00']};
var d0=new Date(),dagen=[];for(var i=1;dagen.length<6&&i<14;i++){var x=new Date(d0.getFullYear(),d0.getMonth(),d0.getDate()+i);if(x.getDay()===0)continue;dagen.push(x);}
dagen.forEach(function(x,i){var l=document.createElement('label');l.innerHTML='<input type="radio" name="dag" value="'+i+'"'+(i===0?' checked':'')+'><span>'+kort[x.getDay()]+'<br>'+x.getDate()+' '+mnd[x.getMonth()]+'</span>';dagrij.appendChild(l);});
function tijden(){var x=dagen[+s.querySelector('.nrb__plan').dag.value];tijdrij.innerHTML='';(TIJD[x.getDay()]||['10:00']).forEach(function(t,i){var l=document.createElement('label');l.innerHTML='<input type="radio" name="tijd" value="'+t+'"'+(i===0?' checked':'')+'><span>'+t+'</span>';tijdrij.appendChild(l);});}
var plan=s.querySelector('.nrb__plan');plan.addEventListener('change',function(e){if(e.target.name==='dag')tijden();});tijden();
var vrij=s.querySelector('.nrb__vrij');if(vrij){vrij.textContent='Proefles deze week nog vrij op '+lang[dagen[0].getDay()]+' '+TIJD[dagen[0].getDay()][0]+' en '+lang[dagen[2].getDay()]+' '+TIJD[dagen[2].getDay()][0]+'.';}
var fout=s.querySelector('.nrb__fout'),klaar=s.querySelector('.nrb__klaar');
plan.addEventListener('submit',function(e){e.preventDefault();var n=plan.naam.value.trim(),t=plan.tel.value.replace(/\D/g,'');
  if(!n){fout.hidden=false;fout.textContent='Vul je naam in.';plan.naam.focus();return;}
  if(t.length<10){fout.hidden=false;fout.textContent='Vul een telefoonnummer van tien cijfers in, dan sturen we de bevestiging per app.';plan.tel.focus();return;}
  fout.hidden=true;var x=dagen[+plan.dag.value];[].forEach.call(plan.children,function(c){if(c!==klaar&&c.tagName!=='H2')c.hidden=true;});klaar.hidden=false;
  klaar.textContent='Staat vast, '+n.split(' ')[0]+': '+lang[x.getDay()]+' '+x.getDate()+' '+mnd[x.getMonth()]+' om '+plan.tijd.value+'. We halen je op waar je wilt; dat vragen we morgen even per app.';});
}
init(document.querySelector('.jouw-container'));