PageSourceSearch

https://mdb-nrg.netlify.app/

html mdb-nrg.netlify.app collected 2026-10-03 11:03:32 UTC 45,431 bytes, 683 lines download raw bytes

1<!DOCTYPE html>
2<html lang="nl">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<meta name="theme-color" content="#630D80">
7<link rel="icon" href="favicon.ico?v=1.19.1" sizes="any">
8<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png?v=1.19.1">
9<link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png?v=1.19.1">
10<link rel="apple-touch-icon" href="apple-touch-icon.png?v=1.19.1">
11<title>Energieloket · In 3 stappen naar een optimaal energieplan · MDB × NRG</title>
12<link rel="preconnect" href="https://fonts.googleapis.com">
13<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap" rel="stylesheet">
15<link rel="stylesheet" href="assets/loket.css?v=1.19.1">
16<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
17</head>
18<body>
19
20<header>
21  <div class="wrap bar">
22    <div class="brand">
23      <a class='logo' href='/'><img class="logo-img" src="assets/logo.png" alt="mdb | TBI"></a>
24      <span class="sep"></span>
25      <span class="loket">Energieloket</span>
26    </div>
27    <div class="navactions">
28      <a class="btn primary sm" href="#stap1">Doe de check</a>
29    </div>
30  </div>
31</header>
32
33<main>
34
35<!-- ============ HERO ============ -->
36<section class="hero">
37  <div class="wrap">
38    <span class="eyebrow">Het energieloket</span>
39    <h1>In 3 stappen naar een optimaal energieplan</h1>
40    <p class="lead">Van een snelle eerste check tot een concreet plan voor je bouwplaats. Zie meteen waar de kansen liggen en waar je aansluiting krap wordt, en laat een expert met je meedenken.</p>
41
42    <div class="flow" id="flow">
43      <button class="fstep active" onclick="goto('stap1')">
44        <div class="num">STAP 01</div><h3>Quickscan</h3>
45        <p>Gratis. Beantwoord een paar korte vragen over je project; wij kijken naar net en ERE-kansen.</p>
46      </button>
47      <button class="fstep" onclick="goto('stap2')">
48        <div class="num">STAP 02</div><h3>Energiescan</h3>
49        <p>Verdiepend: batterij nodig? Hoe verlaag je je energievraag?</p>
50      </button>
51      <button class="fstep" onclick="goto('stap3')">
52        <div class="num">STAP 03</div><h3>Energieplan</h3>
53        <p>Een concreet plan, klaar voor uitvoering en facturatie.</p>
54      </button>
55    </div>
56
57    <div class="herocta">
58      <a class="btn primary" href="#stap1">Doe de snelle check</a>
59      <a class="btn ghost" href="#stap2">Bekijk de scan en het plan</a>
60    </div>
61  </div>
62</section>
63
64<!-- ============ STAP 1 — QUICKSCAN ============ -->
65<section class="section" id="stap1">
66  <div class="wrap">
67    <div class="stepkicker"><b>Stap 1</b> Quickscan</div>
68    <h2>Doe de quickscan <span class="freebadge">Gratis</span></h2>
69    <p class="deck">Een paar korte vragen over jou en je project. De quickscan is een gratis uitwerking — wij kijken naar de netcapaciteit op je locatie en je ERE-kansen en nemen daarna contact met je op. Aan deze uitwerking zijn geen kosten verbonden.</p>
70
71    <!-- ====== WIZARD ====== -->
72    <div class="qwiz" id="qwiz">
73      <div class="qwiz-progress"><div class="qwiz-bar" id="qwizBar"></div></div>
74      <div class="qwiz-label" id="qwizLabel">Stap 1 van 10</div>
75
76      <div class="qscreen" data-screen="first">
77        <h3>Wat is je voornaam?</h3>
78        <input id="wzFirst" class="qwiz-input" placeholder="Voornaam" autocomplete="given-name">
79      </div>
80      <div class="qscreen" data-screen="last" hidden>
81        <h3>En je achternaam?</h3>
82        <input id="wzLast" class="qwiz-input" placeholder="Achternaam" autocomplete="family-name">
83      </div>
84      <div class="qscreen" data-screen="email" hidden>
85        <h3>Wat is je e-mailadres?</h3>
86        <input id="wzEmail" class="qwiz-input" type="email" placeholder="[email protected]" autocomplete="email">
87        <p class="hint">Hierop ontvang je de bevestiging met je projectnummer.</p>
88      </div>
89      <div class="qscreen" data-screen="phone" hidden>
90        <h3>Wat is je telefoonnummer?</h3>
91        <input id="wzPhone" class="qwiz-input" type="tel" placeholder="06 12345678" autocomplete="tel">
92        <p class="hint">Zodat we je snel kunnen bereiken over je aanvraag.</p>
93      </div>
94      <div class="qscreen" data-screen="company" hidden>
95        <h3>Voor welk bedrijf?</h3>
96        <input id="wzCompany" class="qwiz-input" placeholder="Bedrijfsnaam" autocomplete="organization">
97      </div>
98      <div class="qscreen" data-screen="project" hidden>
99        <h3>Wat is de naam van het project?</h3>
100        <input id="wzProject" class="qwiz-input" placeholder="Projectnaam">
101      </div>
102
103      <div class="qscreen" data-screen="net" hidden>
104        <h3>Is al bekend welk type netaansluiting nodig is voor de uitvoering?</h3>
105        <div class="choicegrid two">
106          <button type="button" class="choicecard sm" data-net="ja" id="netJaBtn">Ja</button>
107          <button type="button" class="choicecard sm" data-net="nee" id="netNeeBtn">Nee</button>
108        </div>
109        <div id="netJa" class="hideblock" style="margin-top:14px">
110          <label class="qlbl">Wat is de grootte van deze aansluiting?</label>
111          <input id="wzNetSize" class="qwiz-input" placeholder="Bijv. 3×80A, 250 kVA of 1×35A">
112          <div id="netAlarm" class="hideblock alarmbox" style="margin-top:12px">
113            <div class="alarm-h">
114              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.7 3.86a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
115              <b>Aansluiting groter dan 3×80A</b>
116            </div>
117            <p>Het verkrijgen van zo'n aansluiting is op dit moment zeer onzeker en kent lange doorlooptijden. Het laten uitvoeren van een energiescan is daarom noodzakelijk. Met een gedetailleerd energieplan kan de benodigde aansluiting vaak worden verkleind.</p>
118          </div>
119        </div>
120        <div id="netNee" class="hideblock netinfo" style="margin-top:14px">
121          <div class="netinfo-h">
122            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v5"/><path d="M12 16h.01"/></svg>
123            <b>Nog niet bekend?</b>
124          </div>
125          <p>Een verdiepende scan maakt inzichtelijk welke aansluiting nodig is voor de uitvoering en werkt de meest efficiënte optie uit.</p>
126          <button type="button" class="btn primary sm" id="wzNetAsk">Vraag aan</button>
127        </div>
128      </div>
129
130      <div class="qscreen" data-screen="laad" hidden>
131        <h3>Is al bekend of er laadpalen nodig zijn op het project?</h3>
132        <div class="choicegrid two">
133          <button type="button" class="choicecard sm" data-laad="ja" id="laadJaBtn">Ja</button>
134          <button type="button" class="choicecard sm" data-laad="nee" id="laadNeeBtn">Nee</button>
135        </div>
136        <div id="laadJa" class="hideblock" style="margin-top:14px">
137          <label class="qlbl">Hoeveel laadplekken zijn er nodig?</label>
138          <div class="stepper sm">
139            <button type="button" onclick="wzLaadBump(-1)" aria-label="minder">&minus;</button>
140            <input id="wzLaadAantal" class="mono" value="1" inputmode="numeric">
141            <button type="button" onclick="wzLaadBump(1)" aria-label="meer">+</button>
142          </div>
143          <p class="hint" style="margin-top:8px">Het aantal plekken waar tegelijk geladen moet kunnen worden.</p>
144        </div>
145        <div id="laadNee" class="hideblock netinfo" style="margin-top:14px">
146          <div class="netinfo-h">
147            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v5"/><path d="M12 16h.01"/></svg>
148            <b>Nog niet bekend?</b>
149          </div>
150          <p>Geen probleem — we bepalen samen met je of en hoeveel laadplekken er nodig zijn, en wat dat betekent voor je aansluiting en je ERE-opbrengst.</p>
151        </div>
152      </div>
153
154      <div class="qscreen" data-screen="eisen" hidden>
155        <h3>Spelen er eisen of kansen in de aanbesteding?</h3>
156        <p class="hint">Gelden er vanuit de opdrachtgever eisen, of kun je punten halen op een van deze onderdelen? Meerdere mogelijk.</p>
157        <div class="checkgrid" id="wzEisen">
158          <label class="checkopt"><input type="checkbox" value="Netbewust bouwen"><span>Netbewust bouwen</span></label>
159          <label class="checkopt"><input type="checkbox" value="Inzet van zero-emissiematerieel"><span>Inzet van zero-emissiematerieel</span></label>
160          <label class="checkopt"><input type="checkbox" value="Eisen rondom CO₂-uitstoot of stikstofdepositie"><span>Eisen rondom CO₂-uitstoot of stikstofdepositie</span></label>
161          <label class="checkopt"><input type="checkbox" value="Beperking energieverbruik"><span>Beperking energieverbruik</span></label>
162        </div>
163        <p class="hint">Niet van toepassing? Ga gewoon verder.</p>
164      </div>
165
166      <div class="qscreen" data-screen="loc" hidden>
167        <h3>Waar ligt het project?</h3>
168        <div id="locLaten" class="infonote">
169          <span class="infodot" aria-hidden="true">i</span>
170          <div>Wij gaan voor je na of er sprake is van netcongestie voor je project. In de quickscan bepalen we de haalbaarheid van het verkrijgen van de netaansluiting vóór start van de uitvoering.</div>
171        </div>
172        <div class="adresrow">
173          <input id="wzAddr" class="qwiz-input" placeholder="Adres of plaats" onkeydown="if(event.key==='Enter'){event.preventDefault();window.qwizSearch&&window.qwizSearch();}">
174          <button class="btn primary" type="button" id="wzAddrBtn">Zoek</button>
175        </div>
176        <p class="hint">Of sleep de speld naar de juiste plek op de kaart.</p>
177        <div id="wzMap" class="qwiz-map"></div>
178        <p class="hint" id="wzCoord"></p>
179        <div class="netinfo">
180          <div class="netinfo-h">
181            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.7 3.86a2 2 0 0 0-3.4 0Z"/></svg>
182            <b>Houd rekening met netcongestie</b>
183          </div>
184          <p>De doorlooptijd van een nieuwe aansluiting tot 3×80A is op veel plekken meer dan een jaar. In veel gebieden is een grotere aansluiting dan 3×80A binnen 3 tot 5 jaar niet te verkrijgen.</p>
185          <p>Ligt je bouwlocatie in een netcongestiegebied? Bekijk dan de capaciteit bij de netbeheerders en houd hier vroeg rekening mee in je planning.</p>
186          <a class="netinfo-link" href="https://data.partnersinenergie.nl/capaciteitskaart/totaal/afname" target="_blank" rel="noopener">Open de capaciteitskaart van de netbeheerders →</a>
187        </div>
188      </div>
189      <div class="qscreen" data-screen="term" hidden>
190        <h3>Wat is de looptijd van het project?</h3>
191        <div class="row2" style="max-width:440px">
192          <div class="field"><label>Van</label><input type="date" id="wzStart" class="qwiz-input"></div>
193          <div class="field"><label>Tot</label><input type="date" id="wzEnd" class="qwiz-input"></div>
194        </div>
195      </div>
196
197      <div id="wzMsg" class="authmsg" style="display:none"></div>
198      <div class="qwiz-nav">
199        <button class="btn ghost" type="button" id="wzBack" style="visibility:hidden">Terug</button>
200        <button class="btn primary" type="button" id="wzNext">Volgende</button>
201      </div>
202    </div>
203
204    <!-- bestaande quickscan-stappen, verschijnen na de wizard -->
205    <div id="qrest" style="display:none">
206
207    <!-- ROUTE: ZELF -->
208    <div class="routepanel show" id="route-zelf">
209
210      <div class="qcard hideblock" id="q2">
211        <div class="qh"><span class="qn">VRAAG 2</span><h3>Heb je laadinfra op je project?</h3></div>
212        <p class="ql">Denk aan laadpalen voor auto&rsquo;s en busjes of laadpunten voor elektrisch materieel zoals kranen.</p>
213        <div class="seg" style="max-width:420px">
214          <button id="liJa" aria-pressed="false" onclick="setLaadinfra(true)">Ja, of die komt er</button>
215          <button id="liNee" aria-pressed="false" onclick="setLaadinfra(false)">Nee, geen laadinfra</button>
216        </div>
217        <div class="hint" id="liAdvies" style="display:none;margin-top:12px"><b>Geen laadinfra, geen ERE.</b> ERE verdien je door stroom in vervoer en mobiele machines te laden &mdash; zonder laadinfra is de indicatie &euro;&nbsp;0. Komt er later wel materieel? Verstuur je aanvraag hieronder, dan denken we met je mee.</div>
218      </div>
219
220      <div class="hideblock" id="calcwrap" style="margin-top:16px">
221        <div class="qh" style="margin-bottom:4px"><span class="qn">UITKOMST</span><h3 style="font-family:var(--font-display);font-size:17px;font-weight:600">Jouw ERE-inzicht</h3></div>
222        <p class="ql" style="color:var(--muted);font-size:13.5px;margin-bottom:16px">Stel je laadinfra in en zie direct de opbrengst en of je aansluiting een knelpunt wordt.</p>
223        <div class="check">
224          <div>
225            <div class="panel">
226              <p class="ph"><span class="ix">
226<svg class="icn" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3 6 14h5l-1 7 8-11h-5l0-7z"/></svg></span> Wat staat er op je project?</p>
227              <div class="field">
228                <label>Type laadpunt <span class="lblhint">— meerdere mogelijk</span></label>
229                <div class="typelist" id="typeList">
230                  <div class="typerow" data-type="auto">
231                    <button type="button" class="typetog on" aria-pressed="true" onclick="toggleType('auto',this)"><span class="tk" aria-hidden="true"></span> Laadpaal auto</button>
232                    <div class="typectl">
233                      <div class="stepper sm">
234                        <button type="button" onclick="bumpType('auto',-1)" aria-label="minder">&minus;</button>
235                        <input id="cntAuto" class="mono" value="1" inputmode="numeric" onchange="readType('auto')">
236                        <button type="button" onclick="bumpType('auto',1)" aria-label="meer">+</button>
237                      </div>
238                      <div class="kwhin"><input id="kwhAuto" class="mono" value="300" inputmode="numeric" onchange="readType('auto')"><span>kWh/wk</span></div>
239                    </div>
240                  </div>
241                  <div class="typerow off" data-type="werktuig">
242                    <button type="button" class="typetog" aria-pressed="false" onclick="toggleType('werktuig',this)"><span class="tk" aria-hidden="true"></span> Laadpaal mobiele werktuigen</button>
243                    <div class="typectl">
244                      <div class="stepper sm">
245                        <button type="button" onclick="bumpType('werktuig',-1)" aria-label="minder">&minus;</button>
246                        <input id="cntWerktuig" class="mono" value="1" inputmode="numeric" onchange="readType('werktuig')">
247                        <button type="button" onclick="bumpType('werktuig',1)" aria-label="meer">+</button>
248                      </div>
249                      <div class="kwhin"><input id="kwhWerktuig" class="mono" value="1000" inputmode="numeric" onchange="readType('werktuig')"><span>kWh/wk</span></div>
250                    </div>
251                  </div>
252                  <div class="typerow off" data-type="eigen">
253                    <button type="button" class="typetog" aria-pressed="false" onclick="toggleType('eigen',this)"><span class="tk" aria-hidden="true"></span> Eigen invoer</button>
254                    <div class="typectl">
255                      <div class="stepper sm">
256                        <button type="button" onclick="bumpType('eigen',-1)" aria-label="minder">&minus;</button>
257                        <input id="cntEigen" class="mono" value="1" inputmode="numeric" onchange="readType('eigen')">
258                        <button type="button" onclick="bumpType('eigen',1)" aria-label="meer">+</button>
259                      </div>
260                      <div class="kwhin"><input id="kwhEigen" class="mono" value="500" inputmode="numeric" onchange="readType('eigen')"><span>kWh/wk</span></div>
261                    </div>
262                  </div>
263                </div>
264                <div class="hint">Vink de typen aan die op je project staan. Per type stel je het aantal en het weekverbruik per stuk in.</div>
265              </div>
266              <div class="field">
267                <label>Hoe wordt er geladen?</label>
268                <div class="seg green" id="segStroom">
269                  <button aria-pressed="false" onclick="setStroom('grijs',this)">Netstroom (grijs)</button>
270                  <button aria-pressed="true" onclick="setStroom('groen',this)">Groene bron (groen)</button>
271                </div>
272                <div class="hint">Groen tarief geldt met zon, GvO of een groen geladen batterij. Op enkel netstroom boek je grijs in.</div>
273              </div>
274              <div class="field">
275                <label>Batterij toevoegen?</label>
276                <div class="seg" id="segBat">
277                  <button aria-pressed="true" onclick="setBat(0,this)">Geen</button>
278                  <button aria-pressed="false" onclick="setBat(100,this)">100 kWh</button>
279                  <button aria-pressed="false" onclick="setBat(300,this)">300 kWh</button>
280                </div>
281                <div class="hint">Vergroent maximaal één lading per nacht en vangt pieken op je aansluiting op.</div>
282              </div>
283            </div>
284
285            <div class="panel">
286              <p class="ph"><span class="ix">
286<svg class="icn" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3v5M15 3v5M7 8h10v3a5 5 0 0 1-10 0V8zM12 16v5"/></svg></span> Je netaansluiting</p>
287              <div class="row2">
288                <div class="field">
289                  <label>Type aansluiting</label>
290                  <select id="aansl" onchange="readAansl()">
291                    <option value="17">3 × 25A (17 kW)</option>
292                    <option value="24">3 × 35A (24 kW)</option>
293                    <option value="35">3 × 50A (35 kW)</option>
294                    <option value="44" selected>3 × 63A (44 kW)</option>
295                    <option value="55">3 × 80A (55 kW)</option>
296                    <option value="86">3 × 125A (86 kW)</option>
297                    <option value="160">Grootverbruik (160 kW)</option>
298                  </select>
299                </div>
300                <div class="field">
301                  <label>Verwacht piekvermogen</label>
302                  <div class="sliderrow">
303                    <input type="range" id="piek" min="5" max="200" step="5" value="35" oninput="readPiek()">
304                    <span class="kwhbox" id="pieklab">35 kW</span>
305                  </div>
306                </div>
307              </div>
308              <details class="adv">
309                <summary>Tarieven aanpassen</summary>
310                <div class="advgrid">
311                  <div><label>ERE groen (€/kWh)</label><input id="tGroen" class="mono" value="0,12" onchange="readT()"></div>
312                  <div><label>ERE grijs (€/kWh)</label><input id="tGrijs" class="mono" value="0,05" onchange="readT()"></div>
313                  <div><label>Meet- en facturatie (€/jaar p.st.)</label><input id="tFee" class="mono" value="456" onchange="readT()"></div>
314                  <div><label>Nachten per week</label><input id="tNacht" class="mono" value="5" onchange="readT()"></div>
315                </div>
316                <div class="hint" style="margin-top:10px">Indicatieve tarieven. Bevestig de actuele ERE-koers voor je dit met een project deelt.</div>
317              </details>
318            </div>
319          </div>
320
321          <aside class="cockpit" id="cockpit">
322            <div class="cockhead">
323              <span class="t">Kansen · ERE-opbrengst</span>
324              <span class="badge go" id="kansBadge">Kansrijk</span>
325            </div>
326            <div class="bignum mono" id="big">€ 0</div>
327            <p class="sub" id="subline">per jaar</p>
328            <div class="compare">
329              <div class="crow"><span class="lab">Niets doen</span><div class="track"><div class="fill niets" id="fNiets"></div></div><span class="val">€ 0</span></div>
330              <div class="crow"><span class="lab">Grijs</span><div class="track"><div class="fill grijs" id="fGrijs"></div></div><span class="val mono" id="vGrijs">€ 0</span></div>
331              <div class="crow"><span class="lab">Groen</span><div class="track"><div class="fill groen" id="fGroen"></div></div><span class="val mono" id="vGroen">€ 0</span></div>
332            </div>
333            <div class="batline" id="batline" style="display:none">Met de batterij boek je <b id="batExtra">€ 0</b> extra per jaar groen in.</div>
334            <div class="divider"></div>
335            <div class="cockhead"><span class="t">Knelpunt · aansluiting</span><span class="badge go" id="netBadge">Ruim</span></div>
336            <div class="compare" style="margin-top:12px">
337              <div class="crow"><span class="lab">Capaciteit</span><div class="track"><div class="fill cap" id="fCap" style="width:100%"></div></div><span class="val mono" id="vCap">44 kW</span></div>
338              <div class="crow"><span class="lab">Piekvraag</span><div class="track"><div class="fill piek" id="fPiek"></div></div><span class="val mono" id="vPiek">35 kW</span></div>
339            </div>
340            <div class="verdict go" id="verdict"></div>
341            <p class="fineprint">Indicatie voor de eerste check. De energiescan rekent met je werkelijke profiel.</p>
342          </aside>
343        </div>
344      </div>
345
346      <div class="qcard hideblock" id="finalSubmit" style="margin-top:16px">
347        <h3 style="font-size:18px;font-weight:600">Aanvraag afronden</h3>
348        <p class="ql" style="margin:6px 0 14px">Stuur eventueel documenten mee en verstuur je aanvraag. Je ontvangt een bevestiging met je projectnummer.</p>
349        <div class="hp" aria-hidden="true"><label>Laat dit veld leeg<input id="wzHp" type="text" name="website" tabindex="-1" autocomplete="off"></label></div>
350        <div class="field">
351          <div class="drop" id="drop"><div><b>Sleep bestanden hierheen</b> of klik om te kiezen</div><div class="hint" style="margin-top:5px">Plattegrond, planning, materieellijst, aansluitgegevens</div><input type="file" id="files" multiple hidden></div>
352          <ul class="filelist" id="filelist"></ul>
353        </div>
354        <div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap">
355          <button class="btn primary" id="btnQuick">Aanvraag versturen</button>
356          <button class="btn ghost sm" onclick="goto('stap2')">Of bekijk de energiescan</button>
357        </div>
358        <div class="success" id="success" style="margin-top:16px">
359          <h3>Bedankt, je aanvraag staat klaar</h3>
360          <p>Een expert neemt binnen 2 werkdagen contact op.</p>
361          <div class="recap" id="recap"></div>
362        </div>
363      </div>
364    </div>
365
366    </div><!-- /qrest -->
367  </div>
368</section>
369
370<!-- ============ STAP 2 — ENERGIESCAN ============ -->
371<section class="section wash" id="stap2">
372  <div class="wrap">
373    <div class="stepkicker"><b>Stap 2</b> Energiescan</div>
374    <h2>De verdiepende energiescan</h2>
375    <p class="deck">De quickscan laat zien dát er iets speelt. De energiescan beantwoordt de vraag erachter, op basis van je werkelijke energieprofiel en planning.</p>
376    <div class="xgrid">
377      <div class="xcard"><div class="qi">
377<svg class="icn" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="8" width="15" height="9"/><path d="M21 11v3M7 11v3M11 11v3"/></svg></div><h3>Heb ik een batterij nodig?</h3><p>We bepalen of een batterij je pieken opvangt, je aansluiting ontlast en hoeveel extra groene ERE hij realistisch oplevert.</p></div>
378      <div class="xcard"><div class="qi"><svg class="icn" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v15M6 13l6 6 6-6"/></svg></div><h3>Hoe verlaag ik mijn energievraag?</h3><p>Welke maatregelen, fasebalancering en slim laden verlagen je piek en verbruik, zodat een zwaardere aansluiting niet nodig is.</p></div>
379      <div class="xcard"><div class="qi"><svg class="icn" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3.5"/></svg></div><h3>Hoe benut ik de kansen?</h3><p>We vertalen de kansen uit de quickscan naar concrete ERE-opbrengst en de route om groen te kunnen inboeken.</p></div>
380    </div>
381    <div class="herocta" style="margin-top:24px">
382      <button class="btn primary" onclick="openScanForm()">Vraag de verdiepende energiescan aan</button>
383    </div>
384
385    <div class="qcard hideblock" id="scanwrap" style="margin-top:24px">
386      <div id="intake2">
387        <h3 style="font-size:19px;font-weight:600">Aanvraag verdiepende energiescan</h3>
388        <p class="ql" style="margin:6px 0 18px">Hoe meer je meestuurt, hoe scherper de scan. Denk aan je planning, materieellijst, jaarverbruik en aansluitgegevens.</p>
389        <div class="row2">
390          <div class="field"><label>Projectlocatie *</label><input id="esLoc" placeholder="Plaats of adres van het project"></div>
391          <div class="field"><label>Gewenste startdatum</label><input id="esStart" placeholder="Bijv. zo snel mogelijk, of vanaf augustus"></div>
392        </div>
393        <div class="field"><label>Je vraagstelling *</label><textarea id="esVraag" placeholder="Bijv. heb ik een batterij nodig, kan ik mijn aansluiting verlichten, hoeveel ERE kan ik realistisch inboeken?"></textarea></div>
394        <div class="row2">
395          <div class="field"><label>Je naam *</label><input id="esNaam" placeholder="Voor- en achternaam"></div>
396          <div class="field"><label>E-mailadres *</label><input id="esMail" type="email" placeholder="[email protected]"></div>
397        </div>
398        <div class="field">
399          <label>Documenten meesturen</label>
400          <div class="drop" id="drop2"><div><b>Sleep bestanden hierheen</b> of klik om te kiezen</div><div class="hint" style="margin-top:5px">Planning, materieellijst, jaarverbruik, aansluitgegevens</div><input type="file" id="files2" multiple hidden></div>
401          <ul class="filelist" id="filelist2"></ul>
402          <p class="hint">Je bestanden worden veilig met je aanvraag meegestuurd.</p>
403        </div>
404        <div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap">
405          <button class="btn primary" id="btnScan" onclick="submitLead('energiescan')">Energiescan aanvragen</button>
406          <span class="hint" style="margin:0">We plannen binnen 2 werkdagen een intake. Je ontvangt vooraf een vaste prijs.</span>
407        </div>
408      </div>
409      <div class="success" id="success2">
410        <h3>Bedankt, je aanvraag is binnen</h3>
411        <p>Een NRG-expert neemt binnen 2 werkdagen contact op om de intake in te plannen.</p>
412        <div class="recap" id="recap2"></div>
413      </div>
414    </div>
415  </div>
416</section>
417
418<!-- ============ STAP 3 — ENERGIEPLAN ============ -->
419<section class="section dark" id="stap3">
420  <div class="wrap">
421    <div class="stepkicker"><b>Stap 3</b> Energieplan</div>
422    <h2>Je energieplan, klaar voor uitvoering</h2>
423    <p class="deck">Het resultaat is een concreet plan voor je bouwplaats. MDB regelt de uitvoering en NRG borgt dat je het overzicht behoudt.</p>
424    <div class="planstrip">
425      <div class="chip"><span class="d"></span> Aansluiting en batterij geregeld</div>
426      <div class="chip"><span class="d"></span> Slim laden ingericht</div>
427      <div class="chip"><span class="d"></span> Meting en MID-meters</div>
428      <div class="chip"><span class="d"></span> ERE inboeken en factureren</div>
429      <div class="chip"><span class="d"></span> Documenten netjes vastgelegd</div>
430    </div>
431    <div class="herocta" style="margin-top:24px">
432      <a class="btn primary" href="#stap1">Start met de quickscan</a>
433    </div>
434  </div>
435</section>
436
437<!-- ============ FAQ ============ -->
438<section class="section wash">
439  <div class="wrap" style="max-width:820px">
440    <div class="stepkicker"><b>FAQ</b> Veelgestelde vragen</div>
441    <h2 style="margin-bottom:18px">Goed om te weten</h2>
442    <div id="faq"></div>
443  </div>
444</section>
445
446</main>
447
448<footer>
449  <div class="wrap">
450    <div class="frow">
451      <a class='logo' href='/'>MDB · Energieloket</a>
452    </div>
453    <p class="disc">Energieloket als indicatie. Geen aanbod of garantie. Tarieven nog te bevestigen bij de inboekdienstverlener. Deze website wordt mede mogelijk gemaakt door <a class="site" href="https://nrggroup.nl/" target="_blank" rel="noopener">nrggroup.nl</a></p>
454  </div>
455</footer>
456
457<!-- Supabase + scripts -->
458<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
vendor: 1 bytes, line 458
458
459<script src="config.js?v=1.19.1"></script>
vendor: 1 bytes, line 459
459
460<script src="assets/app.js?v=1.19.1"></script>
vendor: 1 bytes, line 460
460
461<script>
462const nf=new Intl.NumberFormat('nl-NL',{style:'currency',currency:'EUR',maximumFractionDigits:0});
463const S={types:{auto:{on:true,aantal:1,kwh:300},werktuig:{on:false,aantal:1,kwh:1000},eigen:{on:false,aantal:1,kwh:500}},stroom:'groen',bat:0,tGroen:0.12,tGrijs:0.05,fee:456,nacht:5,cap:44,piek:35};
464const files=[];   // quickscan
465const files2=[];  // energiescan
466
467/* ---- navigatie ---- */
468function goto(id){
469  document.getElementById(id).scrollIntoView({behavior:'smooth'});
470  const map=['stap1','stap2','stap3'];
471  document.querySelectorAll('.fstep').forEach((f,i)=>f.classList.toggle('active',map[i]===id));
472}
473function setRoute(r){
474  ['zelf','hulp'].forEach(x=>{
475    document.getElementById('rc-'+x).classList.toggle('active',x===r);
476    document.getElementById('route-'+x).classList.toggle('show',x===r);
477  });
478}
479function openScanForm(){document.getElementById('scanwrap').classList.add('show');document.getElementById('scanwrap').scrollIntoView({behavior:'smooth',block:'center'});}
480
481/* ---- Vraag 1: adres via PDOK Locatieserver ---- */
482async function checkAdres(){
483  const q=document.getElementById('adres').value.trim();
484  const st=document.getElementById('locStatus');
485  if(!q){st.textContent='Vul eerst een adres of plaats in.';return;}
486  st.textContent='Locatie opzoeken…';
487  let doc=null;
488  try{
489    const r=await fetch('https://api.pdok.nl/bzk/locatieserver/search/v3/free?rows=1&fq=type:(adres OR weg OR woonplaats)&q='+encodeURIComponent(q));
490    const d=await r.json();
491    doc=d.response&&d.response.docs&&d.response.docs[0];
492  }catch(e){doc=null;}
493  const res=document.getElementById('locres');
494  if(doc){
495    st.textContent='';
496    document.getElementById('locNaam').textContent=doc.weergavenaam||q;
497    const det=[doc.gemeentenaam?('Gemeente '+doc.gemeentenaam):null,doc.provincienaam||null].filter(Boolean).join(' · ');
498    let co=null;const m=(doc.centroide_ll||'').match(/POINT\(([0-9.\-]+) ([0-9.\-]+)\)/);
499    if(m)co={lng:parseFloat(m[1]),lat:parseFloat(m[2])};
500    document.getElementById('locDetail').textContent=det+(co?(' · '+co.lat.toFixed(4)+', '+co.lng.toFixed(4)):'');
501    document.getElementById('capHint').textContent='Bekijk de actuele afnamecapaciteit rond '+(doc.woonplaatsnaam||doc.gemeentenaam||'je projectlocatie')+'. Oranje of rood? Dan is een batterij, slim laden of een gedeelde aansluiting waarschijnlijk nodig.';
502  }else{
503    st.textContent='Live opzoeken lukt nu niet of het adres is niet gevonden. Open de kaart en zoek handmatig.';
504    document.getElementById('locNaam').textContent=q;
505    document.getElementById('locDetail').textContent='Niet automatisch gevonden';
506  }
507  res.classList.add('show');
508  document.getElementById('q2').classList.add('show');
509}
510
511/* ---- Vraag 2: laadinfra ---- */
512function setLaadinfra(ja){
513  document.getElementById('liJa').setAttribute('aria-pressed',ja);
514  document.getElementById('liNee').setAttribute('aria-pressed',!ja);
515  document.getElementById('liJa').classList.toggle('on',ja);
516  document.getElementById('liNee').classList.toggle('on',!ja);
517  document.getElementById('liAdvies').style.display=ja?'none':'block';
518  const cw=document.getElementById('calcwrap');
519  if(ja){
520    cw.classList.add('show');
521    calc();
522  }else{
523    cw.classList.remove('show');
524    const big=document.getElementById('big'); if(big) big.textContent=nf.format(0);
525  }
526  // verzendblok verschijnt bij beide keuzes, zodat je altijd kunt aanvragen
527  const fs=document.getElementById('finalSubmit');
528  fs.classList.remove('hideblock');
529  (ja?cw:fs).scrollIntoView({behavior:'smooth',block:'start'});
530}
531
532/* ---- ERE-rekenmodule ---- */
533const TID={auto:'Auto',werktuig:'Werktuig',eigen:'Eigen'};
534const TLAB={auto:'laadpaal auto',werktuig:'mobiele werktuigen',eigen:'eigen invoer'};
535function toggleType(k,btn){S.types[k].on=!S.types[k].on;btn.setAttribute('aria-pressed',S.types[k].on);btn.classList.toggle('on',S.types[k].on);btn.closest('.typerow').classList.toggle('off',!S.types[k].on);calc();}
536function bumpType(k,n){const t=S.types[k];t.aantal=Math.max(1,t.aantal+n);document.getElementById('cnt'+TID[k]).value=t.aantal;calc();}
537function readType(k){const t=S.types[k];const a=parseInt(document.getElementById('cnt'+TID[k]).value)||1;t.aantal=Math.max(1,a);document.getElementById('cnt'+TID[k]).value=t.aantal;const w=parseInt(document.getElementById('kwh'+TID[k]).value)||0;t.kwh=Math.max(0,w);calc();}
538function setStroom(s,btn){S.stroom=s;
538[...btn.parentNode.children].forEach(b=>b.setAttribute('aria-pressed',b===btn));calc();}
539function setBat(v,btn){S.bat=v;[...btn.parentNode.children].forEach(b=>b.setAttribute('aria-pressed',b===btn));calc();}
540function readAansl(){S.cap=parseFloat(document.getElementById('aansl').value);document.getElementById('fCap').style.width='100%';calc();}
541function readPiek(){const v=parseInt(document.getElementById('piek').value);S.piek=v;const s=document.getElementById('piek');document.getElementById('pieklab').textContent=v+' kW';s.style.setProperty('--pct',((v-5)/195*100)+'%');calc();}
542function parseNum(id){return parseFloat(document.getElementById(id).value.replace(',','.'))||0;}
543function readT(){S.tGroen=parseNum('tGroen');S.tGrijs=parseNum('tGrijs');S.fee=parseNum('tFee');S.nacht=parseNum('tNacht');calc();}
544
545function animateBig(target){
546  const el=document.getElementById('big');
547  if(window.matchMedia('(prefers-reduced-motion: reduce)').matches){el.textContent=nf.format(Math.round(Math.max(0,target)));return;}
548  const start=parseFloat((el.textContent||'0').replace(/[^\d-]/g,''))||0;const t0=performance.now();
549  function step(t){const k=Math.min(1,(t-t0)/500);const v=start+(target-start)*(1-Math.pow(1-k,3));el.textContent=nf.format(Math.round(Math.max(0,v)));if(k<1)requestAnimationFrame(step);}
550  requestAnimationFrame(step);
551}
552function calc(){
553  let units=0,jaar=0,usedWeek=0;const parts=[];
554  for(const k in S.types){const t=S.types[k];if(!t.on)continue;units+=t.aantal;jaar+=t.kwh*t.aantal*52;usedWeek+=t.kwh*t.aantal;parts.push(t.aantal+'× '+TLAB[k]);}
555  const nettoGroen=jaar*S.tGroen-S.fee*units, nettoGrijs=jaar*S.tGrijs-S.fee*units;
556  const capWeek=S.bat*S.nacht, greenWeek=Math.min(usedWeek,capWeek);
557  const batExtra=greenWeek*52*(S.tGroen-S.tGrijs);
558  const chosen=units===0?0:(S.stroom==='groen'?nettoGroen:nettoGrijs+(S.bat>0?batExtra:0));
559  animateBig(chosen);
560  document.getElementById('subline').innerHTML=units===0?'Kies minimaal één type laadpunt':('per jaar · <b>'+parts.join(' + ')+'</b> · '+jaar.toLocaleString('nl-NL')+' kWh');
561  document.getElementById('vGrijs').textContent=nf.format(Math.round(Math.max(0,nettoGrijs)));
562  document.getElementById('vGroen').textContent=nf.format(Math.round(Math.max(0,nettoGroen)));
563  const mx=Math.max(nettoGroen,nettoGrijs,1);
564  document.getElementById('fGrijs').style.width=Math.max(0,nettoGrijs)/mx*100+'%';
565  document.getElementById('fGroen').style.width=Math.max(0,nettoGroen)/mx*100+'%';
566  document.getElementById('fNiets').style.width='2%';
567  const bl=document.getElementById('batline');
568  if(S.bat>0){bl.style.display='block';document.getElementById('batExtra').textContent=nf.format(Math.round(batExtra));}else bl.style.display='none';
569  const kb=document.getElementById('kansBadge');
570  if(chosen>=4000){kb.className='badge go';kb.textContent='Zeer kansrijk';}
571  else if(chosen>=800){kb.className='badge go';kb.textContent='Kansrijk';}
572  else{kb.className='badge warn';kb.textContent='Beperkt';}
573  const ratio=S.piek/S.cap;
574  document.getElementById('vCap').textContent=Math.round(S.cap)+' kW';
575  document.getElementById('vPiek').textContent=S.piek+' kW';
576  const fp=document.getElementById('fPiek');fp.style.width=Math.min(100,ratio*100)+'%';
577  const nb=document.getElementById('netBadge');let nstat;
578  if(ratio<=0.7){fp.className='fill piek';nb.className='badge go';nb.textContent='Ruim';nstat='ruim';}
579  else if(ratio<=1.0){fp.className='fill piek warn';nb.className='badge warn';nb.textContent='Krap';nstat='krap';}
580  else{fp.className='fill piek stop';nb.className='badge stop';nb.textContent='Tekort';nstat='tekort';}
581  const v=document.getElementById('verdict');
582  const kanstxt=chosen>=800?('Er liggen kansen: tot <b>'+nf.format(Math.round(Math.max(nettoGroen,chosen)))+' per jaar</b> aan ERE met groen inboeken.'):'De ERE-kansen zijn hier beperkt; kijk naar meer of zwaarder verbruik.';
583  let nettxt,cls;
584  if(nstat==='ruim'){nettxt='Je aansluiting heeft ruimte voor deze piek.';cls='go';}
585  else if(nstat==='krap'){nettxt='Je aansluiting wordt krap. Slim laden of een batterij voorkomt een zwaardere aansluiting.';cls='warn';}
586  else{nettxt='Je piekvraag overstijgt de aansluiting. Een batterij of maatregelen om de vraag te verlagen zijn waarschijnlijk nodig.';cls='stop';}
587  v.className='verdict '+cls;
588  v.innerHTML='<b>Eerste indicatie.</b> '+kanstxt+' '+nettxt;
589}
590
591/* ---- uploads (echte bestanden, worden bij de aanvraag meegestuurd) ---- */
592function wireDrop(dropId,inputId,listId,arr){
593  const drop=document.getElementById(dropId),inp=document.getElementById(inputId);
594  if(!drop) return;
595  const render=()=>{const ul=document.getElementById(listId);ul.innerHTML='';arr.forEach((f,i)=>{const li=document.createElement('li');li.innerHTML='<span>
595<svg class="icn" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11l-8 8a5 5 0 0 1-7-7l9-9a3.5 3.5 0 0 1 5 5l-9 9a2 2 0 0 1-3-3l8-8"/></svg> '+Loket.escape(f.name)+'</span><span class="x" title="verwijder">&times;</span>';li.querySelector('.x').onclick=()=>{arr.splice(i,1);render();};ul.appendChild(li);});};
596  drop.onclick=()=>inp.click();
597  inp.onchange=e=>{for(const f of e.target.files)arr.push(f);render();inp.value='';};
598  ['dragover','dragenter'].forEach(ev=>drop.addEventListener(ev,e=>{e.preventDefault();drop.classList.add('over');}));
599  ['dragleave','drop'].forEach(ev=>drop.addEventListener(ev,e=>{e.preventDefault();drop.classList.remove('over');}));
600  drop.addEventListener('drop',e=>{for(const f of e.dataTransfer.files)arr.push(f);render();});
601}
602wireDrop('drop2','files2','filelist2',files2);
603
604/* ---- aanvraag naar Supabase (accountvrij, met projectnummer) ---- */
605const EMAIL_RE=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;
606async function submitLead(type){
607  let payload, arr, recapEl, successEl, intakeEl, btn;
608  if(type==='quickscan'){
609    const loc=val('iLoc'),plan=val('iPlan'),werk=val('iWerk'),naam=val('iNaam'),mail=val('iMail');
610    if(!loc||!plan||!werk||!naam||!mail){Loket.toast('Vul locatie, planning, werkzaamheden, naam en e-mail in.','err');return;}
611    if(!EMAIL_RE.test(mail)){Loket.toast('Vul een geldig e-mailadres in.','err');return;}
612    payload={p_type:type,p_location:loc,p_planning:plan,p_description:werk,p_contact_name:naam,p_contact_email:mail,
613             p_ere:document.getElementById('big').textContent+' per jaar'};
614    arr=files;recapEl='recap';successEl='success';intakeEl='intake';btn=document.getElementById('btnQuick');
615  }else{
616    const loc=val('esLoc'),vraag=val('esVraag'),naam=val('esNaam'),mail=val('esMail');
617    if(!loc||!vraag||!naam||!mail){Loket.toast('Vul locatie, vraagstelling, naam en e-mail in.','err');return;}
618    if(!EMAIL_RE.test(mail)){Loket.toast('Vul een geldig e-mailadres in.','err');return;}
619    payload={p_type:type,p_location:loc,p_planning:val('esStart'),p_description:vraag,p_contact_name:naam,p_contact_email:mail,p_ere:null};
620    arr=files2;recapEl='recap2';successEl='success2';intakeEl='intake2';btn=document.getElementById('btnScan');
621  }
622  if(!window.sb){Loket.toast('Supabase nog niet ingesteld.','err');return;}
623  btn.disabled=true;const lbl=btn.textContent;btn.innerHTML='<span class="spinner"></span> Versturen…';
624  try{
625    // 1. bijlagen uploaden onder een eigen map
626    const folder=(crypto.randomUUID&&crypto.randomUUID())||('a'+Date.now()+Math.random().toString(36).slice(2));
627    const attachments=[];
628    for(const f of arr){
629      const safe=f.name.replace(/[^\w.\-]+/g,'_');
630      const path=folder+'/'+safe;
631      const {error:upErr}=await window.sb.storage.from('aanvragen').upload(path,f,{upsert:false});
632      if(upErr)throw upErr;
633      attachments.push({name:f.name,path,size:f.size});
634    }
635    // 2. aanvraag opslaan; projectnummer komt terug
636    const {data,error}=await window.sb.rpc('submit_lead',{...payload,p_attachments:attachments});
637    if(error)throw error;
638    const nr=(data&&data.project_no)||'—';
639    // 3. bevestiging tonen
640    document.getElementById(intakeEl).style.display='none';
641    const rec=document.getElementById(recapEl);
642    rec.innerHTML='<div><b>Aanvraagnummer:</b> '+Loket.escape(nr)+'</div>'+
643      '<div><b>Locatie:</b> '+Loket.escape(payload.p_location)+'</div>'+
644      (payload.p_planning?'<div><b>Planning:</b> '+Loket.escape(payload.p_planning)+'</div>':'')+
645      '<div><b>Vraag/werk:</b> '+Loket.escape(payload.p_description)+'</div>'+
646      '<div><b>Contact:</b> '+Loket.escape(payload.p_contact_name)+' · '+Loket.escape(payload.p_contact_email)+'</div>'+
647      (payload.p_ere?'<div><b>Indicatie:</b> '+Loket.escape(payload.p_ere)+'</div>':'')+
648      (attachments.length?'<div><b>Bijlagen:</b> '+attachments.length+'</div>':'')+
649      '<p class="hint" style="margin-top:10px">Bewaar je aanvraagnummer; je ontvangt ook een bevestiging per e-mail.</p>';
650    const su=document.getElementById(successEl);su.classList.add('show');su.scrollIntoView({behavior:'smooth',block:'center'});
651  }catch(err){
652    Loket.toast('Versturen mislukt: '+(err.message||err),'err');
653    btn.disabled=false;btn.textContent=lbl;
654  }
655}
656function val(id){return document.getElementById(id).value.trim();}
657
658/* ---- FAQ ---- */
659const FAQ=[
660 ['Wat doet de quickscan precies?','Op basis van locatie, planning en een korte omschrijving geeft een expert een eerste indicatie: liggen er ERE-kansen en zijn er knelpunten in de energievoorziening te verwachten? Je kunt documenten meesturen zodat we er meteen mee aan de slag kunnen.'],
661 ['Wat is het verschil met de energiescan?','De quickscan is de snelle eerste check. De energiescan gaat dieper in op de vraagstelling: heb je een batterij nodig, welke maatregelen verlagen je energievraag, en hoe benut je de kansen die er liggen? Die rekent met je werkelijke energieprofiel.'],
662 ['Wat is een ERE-certificaat?','Een Emissiereductie-eenheid staat voor 1 kg vermeden CO₂. Sinds 2026 de opvolger van het HBE-systeem onder de NEa. Door groene stroom in vervoer te leveren verdien je ERE’s, die brandstofleveranciers opkopen om aan hun CO₂-verplichting te voldoen.'],
663 ['Waarom levert groen meer op dan grijs?','Netstroom telt voor ca. 50,5% als hernieuwbaar, groene stroom uit eigen opwek of GvO voor 100%. Daardoor is de ERE-waarde per kWh bij groen ruim het dubbele van grijs.'],
664 ['Verdient een batterij zich terug uit ERE?','Niet op zichzelf. Een batterij vergroent maar één lading per nacht, dus de extra ERE dekt maar een deel van de huur. De batterij verdient zich terug op peakshaving, minder diesel en een kleinere aansluiting. ERE is daar een plus bovenop.'],
665];
666const faq=document.getElementById('faq');
667FAQ.forEach(qa=>{const d=document.createElement('div');d.className='qa';d.setAttribute('open-state','0');
668  d.innerHTML='<button aria-expanded="false"><span>'+qa[0]+'</span><span class="ic">+</span></button><div class="ans"><p>'+qa[1]+'</p></div>';
669  const btn=d.querySelector('button'),ans=d.querySelector('.ans'),ic=d.querySelector('.ic');
670  btn.onclick=()=>{const open=d.getAttribute('open-state')==='1';d.setAttribute('open-state',open?'0':'1');btn.setAttribute('aria-expanded',!open);ic.textContent=open?'+':'−';ans.style.maxHeight=open?'0':ans.scrollHeight+'px';};
671  faq.appendChild(d);});
672
673/* ---- scroll-spy stappen ---- */
674const secmap={stap1:0,stap2:1,stap3:2};
675const obs=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting&&secmap[e.target.id]!=null){document.querySelectorAll('.fstep').forEach((f,i)=>f.classList.toggle('active',i===secmap[e.target.id]));}});},{rootMargin:'-45% 0px -50% 0px'});
676['stap1','stap2','stap3'].forEach(id=>obs.observe(document.getElementById(id)));
677
678readPiek();calc();
679</script>
vendor: 1 bytes, line 679
679
680<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
vendor: 1 bytes, line 680
680
681<script src="assets/wizard.js?v=1.19.1"></script>
681
682</body>
683</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.