<!DOCTYPE html>

<head>

<title>Spieren voor Spieren | Laat kinderen met een spierziekte niet verliezen</title>

<style>

/* ==========================================================

HUISSTIJL — overgenomen uit de live stylesheet + brandbeeld

Puffin Display Soft staat vooraan; Nunito is alleen de

fallback zodat dit prototype buiten hun server klopt.

========================================================== */

:root{

--petrol:#1d5570; /* koppen */

--petrol-dark:#16455c;

--ink:#1a252c; /* body, uit hun CSS */

--blue-mid:#58a5c2; /* badges, pijlen, accenten */

--blue-light:#c4e0ea; /* ballonvlakken */

--blue-pale:#e6f2f7;

--cream:#fcefcb; /* highlight-ballon */

--orange:#d0602a; /* conversiekleur */

--orange-dark:#b85222;

--white:#fff;

--line:#d7e5eb;

--shape-size:37px; /* uit hun CSS */

--base-spacing-vertical:4.75rem; /* uit hun CSS */

--spacing-small:calc(var(--base-spacing-vertical) * .75);

--spacing-medium:var(--base-spacing-vertical);

--spacing-large:calc(var(--base-spacing-vertical) * 1.25);

--radius:18px;

--font:'Puffin Display Soft', 'Nunito', Arial, sans-serif;

}

@media (max-width:47.99em){ :root{ --base-spacing-vertical:2.5rem; --shape-size:26px; } }

/* hun eigen responsive type-schaal */

body,html{font-size:20px}

@media (max-width:89.99em){ body,html{font-size:18px} }

@media (max-width:68.74em){ body,html{font-size:17px} }

@media (max-width:21.24em){ body,html{font-size:16px} }

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

body{margin:0;font-family:var(--font);font-weight:400;line-height:1.6;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}

h1,h2,h3,h4{font-weight:800;line-height:1.1;margin:0;color:var(--petrol)}

p{margin:0 0 .8em}

a{color:inherit}

img{max-width:100%;display:block}

button{font-family:inherit;font-size:inherit;cursor:pointer}

.wrap{max-width:63rem;margin:0 auto;padding:0 1.2rem}

.skip{position:absolute;left:-9999px;background:var(--petrol);color:#fff;padding:.6rem .9rem;z-index:300}

.skip:focus{left:.6rem;top:.6rem}

:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ---------- Ballonvorm: hun signature ---------- */

.bubble{position:relative;border-radius:var(--radius);background:var(--blue-light);padding:1.6rem 1.5rem}

.bubble::after{content:"";position:absolute;left:2rem;bottom:calc(var(--shape-size) * -1 + 1px);

border-left:var(--shape-size) solid var(--blue-light);

border-bottom:var(--shape-size) solid transparent;}

.bubble.cream{background:var(--cream)}

.bubble.cream::after{border-left-color:var(--cream)}

.bubble.white{background:#fff}

.bubble.white::after{border-left-color:#fff}

.bubble .num{position:absolute;top:-1.05rem;right:-.6rem;width:2.4rem;height:2.4rem;border-radius:50%;

background:var(--blue-mid);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem}

/* ---------- Buttons (pill, zoals hun huisstijl) ---------- */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-weight:700;font-size:.85rem;

padding:.7rem 1.4rem;border-radius:100px;border:0;text-decoration:none;transition:background .15s,color .15s}

.btn-primary{background:var(--orange);color:#fff}

.btn-primary:hover{background:var(--orange-dark)}

.btn-outline{background:transparent;color:var(--petrol);border:2px solid var(--blue-mid);padding:.6rem 1.3rem}

.btn-outline:hover{background:var(--blue-pale)}

.btn-lg{width:100%;padding:.85rem 1.4rem;font-size:.95rem}

/* ---------- Topbar ---------- */

.topbar{background:var(--blue-pale);color:var(--petrol);font-size:.68rem;border-bottom:1px solid var(--line)}

.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:2.1rem;gap:1rem}

.topbar a{color:var(--petrol);text-decoration:none}

.topbar a:hover{text-decoration:underline}

.topbar .sep{opacity:.45;margin:0 .45rem}

/* ---------- Header ---------- */

header.site{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}

.nav{display:flex;align-items:center;gap:1rem;min-height:4rem}

.logo img{height:2.1rem;width:auto}

.menu{display:flex;gap:.1rem;margin:0 auto 0 .8rem;padding:0;list-style:none}

.menu>li{position:relative}

.menu>li>a,.menu>li>button{display:flex;align-items:center;gap:.3rem;background:none;border:0;font-weight:700;

font-size:.78rem;color:var(--petrol);padding:.55rem .6rem;border-radius:10px;text-decoration:none;white-space:nowrap}

.menu>li>a:hover,.menu>li>button:hover{background:var(--blue-pale)}

.caret{width:.4rem;height:.4rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-.2rem;transition:transform .15s}

.menu li.open .caret{transform:rotate(-135deg);margin-top:.1rem}

.dd{position:absolute;top:calc(100% + .4rem);left:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);

box-shadow:0 12px 30px rgba(29,85,112,.13);padding:.5rem;min-width:14rem;opacity:0;visibility:hidden;transform:translateY(-4px);transition:.15s}

.menu li.open .dd{opacity:1;visibility:visible;transform:none}

.dd a{display:block;padding:.5rem .6rem;border-radius:10px;text-decoration:none;font-size:.78rem;font-weight:600;color:var(--ink)}

.dd a:hover{background:var(--blue-pale);color:var(--petrol)}

.dd .lbl{font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-mid);font-weight:700;padding:.5rem .6rem .2rem}

.mega{width:34rem;left:50%;transform:translate(-50%,-4px);display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem;padding:1rem}

.menu li.open .mega{transform:translate(-50%,0)}

.mega .give{border-right:1px solid var(--line);padding-right:1.2rem}

.mega .item{display:flex;gap:.6rem;padding:.55rem .6rem;border-radius:12px;text-decoration:none;align-items:flex-start}

.mega .item:hover{background:var(--blue-pale)}

.mega .item b{display:block;font-size:.8rem;color:var(--petrol)}

.mega .item span{font-size:.68rem;color:var(--ink);opacity:.75;line-height:1.35}

.mega .dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--blue-mid);flex:none;margin-top:.35rem}

.mega .item.hi .dot{background:var(--orange)}

.nav-actions{display:flex;align-items:center;gap:.6rem;margin-left:auto}

.icon-btn{background:none;border:0;padding:.4rem;border-radius:10px;color:var(--petrol);display:grid;place-items:center}

.icon-btn:hover{background:var(--blue-pale)}

.action-link{font-weight:700;font-size:.78rem;text-decoration:none;color:var(--petrol);white-space:nowrap}

.action-link:hover{text-decoration:underline}

.burger{display:none}

/* ---------- Mobiel menu ---------- */

.drawer{position:fixed;inset:0;background:#fff;z-index:200;transform:translateX(100%);transition:transform .25s ease;

display:flex;flex-direction:column;overflow-y:auto}

.drawer.on{transform:none}

.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}

.drawer-top img{height:2rem}

.drawer nav{padding:.6rem 1.2rem 1.4rem}

.acc{border-bottom:1px solid var(--line)}

.acc>button,.acc>a{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;

padding:.95rem 0;font-weight:700;font-size:1rem;color:var(--petrol);text-align:left;text-decoration:none}

.acc .panel{display:none;padding-bottom:.6rem}

.acc.open .panel{display:block}

.acc.open .caret{transform:rotate(-135deg)}

.acc .panel a{display:block;padding:.5rem 0 .5rem .9rem;font-size:.85rem;font-weight:600;color:var(--ink);text-decoration:none;opacity:.85}

.drawer-cta{margin-top:1.2rem;display:flex;flex-direction:column;gap:.6rem;padding:0 1.2rem 2rem}

/* ---------- Hero ---------- */

.hero{background:var(--blue-pale);padding:var(--spacing-medium) 0 calc(var(--spacing-medium) + 1rem);position:relative;overflow:hidden}

.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2.4rem;align-items:center}

.kicker{display:inline-block;background:var(--blue-mid);color:#fff;font-weight:700;font-size:.68rem;

padding:.35rem .9rem;border-radius:100px;margin-bottom:.9rem}

.hero h1{font-size:2.5rem;margin-bottom:.7rem}

.hero h1 .mark{color:var(--orange)}

.hero .lead{font-size:.95rem;max-width:26em;margin-bottom:1.2rem}

.hero-photo{border-radius:var(--radius);overflow:hidden;max-width:19rem;background:var(--blue-light)}

/* ---------- Donatiewidget ---------- */

.give-card{background:#fff;border-radius:var(--radius);padding:1.3rem;box-shadow:0 10px 30px rgba(29,85,112,.10)}

.give-card h2{font-size:1.1rem;margin-bottom:.15rem}

.give-card .sub{font-size:.72rem;opacity:.75;margin-bottom:.9rem}

.freq{display:grid;grid-template-columns:repeat(3,1fr);background:var(--blue-pale);border-radius:100px;padding:.2rem;margin-bottom:.9rem}

.freq button{background:none;border:0;padding:.5rem .2rem;border-radius:100px;font-weight:700;font-size:.72rem;color:var(--petrol);opacity:.6;position:relative}

.freq button[aria-selected="true"]{background:#fff;opacity:1;box-shadow:0 1px 3px rgba(29,85,112,.16)}

.freq .tag{position:absolute;top:-.55rem;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;

font-size:.5rem;letter-spacing:.05em;padding:.12rem .45rem;border-radius:100px;white-space:nowrap}

.amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.55rem}

.amt{border:2px solid var(--line);background:#fff;border-radius:14px;padding:.6rem .3rem;text-align:center;transition:.12s}

.amt strong{display:block;font-size:1.15rem;font-weight:800;color:var(--petrol)}

.amt span{display:block;font-size:.58rem;opacity:.7;margin-top:.1rem}

.amt:hover{border-color:var(--blue-mid)}

.amt[aria-pressed="true"]{border-color:var(--orange);background:#fdf4ee}

.amt[aria-pressed="true"] strong{color:var(--orange-dark)}

.custom{display:flex;align-items:center;gap:.5rem;border:2px solid var(--line);border-radius:14px;padding:.55rem .8rem;margin-bottom:.8rem}

.custom span{font-weight:800;opacity:.6}

.custom input{border:0;outline:0;font-family:inherit;font-weight:700;font-size:.85rem;width:100%;color:var(--ink);background:none}

.impact-line{background:var(--cream);border-radius:14px;padding:.65rem .8rem;font-size:.74rem;margin-bottom:.8rem;line-height:1.45}

.paylogos{display:flex;align-items:center;gap:.35rem;justify-content:center;margin-top:.75rem;flex-wrap:wrap;font-size:.62rem;opacity:.75}

.chip{border:1px solid var(--line);border-radius:6px;padding:.15rem .4rem;font-weight:700}

/* ---------- Impact ---------- */

.impact{padding:var(--spacing-medium) 0 0}

.impact .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1.4rem calc(var(--shape-size) + .6rem);align-items:start}

.impact .bubble{margin-bottom:var(--shape-size)}

.impact h3{font-size:.85rem;margin-bottom:.5rem}

.track{height:1rem;background:#fff;border-radius:100px;overflow:hidden;border:1px solid rgba(29,85,112,.12)}

.track i{display:block;height:100%;width:0;background:var(--blue-mid);border-radius:100px;transition:width 1.3s cubic-bezier(.2,.7,.3,1)}

.track-foot{font-size:.7rem;margin-top:.5rem;line-height:1.45}

.stat .n{font-size:2.1rem;font-weight:800;color:var(--petrol);line-height:1}

.stat .l{font-size:.72rem;margin-top:.25rem;line-height:1.4}

.ticker{display:flex;align-items:center;gap:.5rem;font-size:.72rem;background:var(--blue-pale);

border-radius:100px;padding:.45rem 1rem;width:max-content;max-width:100%;margin:.8rem auto 0}

.ticker .dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--orange);flex:none}

/* ---------- Secties ---------- */

section{padding:var(--spacing-medium) 0}

.sec-head{max-width:34rem;margin-bottom:1.8rem}

.sec-head .eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-mid);margin-bottom:.5rem}

.sec-head h2{font-size:1.85rem;margin-bottom:.5rem}

.sec-head p{font-size:.9rem;margin:0}

/* Besteding — staafjes, geen taartdiagram */

.spend{background:var(--blue-pale)}

.spend .grid{display:grid;grid-template-columns:1fr 1.25fr;gap:2.4rem;align-items:center}

.spend .headline{font-size:4rem;font-weight:800;color:var(--petrol);line-height:.9}

.spend .headline small{display:block;font-size:.85rem;font-weight:600;opacity:.75;margin-top:.4rem;line-height:1.45}

.rows{list-style:none;margin:0;padding:0}

.rows li{padding:.7rem 0;border-bottom:1px solid var(--line)}

.rows li:last-child{border:0}

.rows .top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.35rem}

.rows b{font-size:.85rem;color:var(--petrol)}

.rows .pct{font-weight:800;font-size:.95rem;color:var(--petrol)}

.rows .meter{height:.5rem;background:#fff;border-radius:100px;overflow:hidden}

.rows .meter i{display:block;height:100%;width:0;border-radius:100px;transition:width 1s ease}

.rows small{display:block;font-size:.68rem;opacity:.7;margin-top:.3rem}

/* Verhalen */

.filters{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.4rem}

.filters button{background:#fff;border:2px solid var(--line);border-radius:100px;padding:.35rem .9rem;font-weight:700;font-size:.72rem;color:var(--petrol)}

.filters button[aria-pressed="true"]{background:var(--petrol);border-color:var(--petrol);color:#fff}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}

.card{border-radius:var(--radius);overflow:hidden;background:var(--blue-pale);display:flex;flex-direction:column;transition:.15s}

.card:hover{transform:translateY(-3px)}

.card .ph{aspect-ratio:16/12;background:var(--blue-light);overflow:hidden}

.card .ph img{width:100%;height:100%;object-fit:cover}

.card .body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}

.tag{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;

color:#fff;background:var(--blue-mid);padding:.2rem .6rem;border-radius:100px;margin-bottom:.55rem;align-self:flex-start}

.card h3{font-size:1rem;margin-bottom:.35rem}

.card p{font-size:.75rem;margin-bottom:.8rem}

.card .more{margin-top:auto;font-weight:700;font-size:.75rem;color:var(--orange);text-decoration:none}

.card .more:hover{text-decoration:underline}

/* Quote */

.quote{background:var(--petrol);color:#fff}

.quote .grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:2.4rem;align-items:center}

.quote img{border-radius:var(--radius)}

.quote blockquote{margin:0;font-weight:800;font-size:1.7rem;line-height:1.22;color:#fff}

.quote .who{margin-top:1rem;font-size:.78rem;opacity:.8}

/* Kom in actie — hun eigen stappen-ballonnen */

.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem calc(var(--shape-size) + .4rem);margin-top:2rem}

.steps-grid .bubble{margin-bottom:var(--shape-size)}

.steps-grid h3{font-size:1rem;margin-bottom:.4rem}

.steps-grid p{font-size:.75rem;margin:0}

.steps-grid .bubble:nth-child(2){margin-top:1.6rem}

.steps-grid .bubble:nth-child(4){margin-top:1.6rem}

/* Trust */

.trust{background:var(--blue-pale);padding:calc(var(--spacing-medium) * .6) 0;border-top:1px solid var(--line)}

.trust .row{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap}

.trust img{height:2.6rem;width:auto}

.trust p{margin:0;font-size:.75rem;max-width:30em}

/* Footer */

footer{background:var(--petrol);color:#fff;padding:var(--spacing-medium) 0 1.2rem}

footer h4{color:#fff;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.7rem;opacity:.7}

footer a{color:rgba(255,255,255,.85);text-decoration:none;font-size:.78rem}

footer a:hover{color:#fff;text-decoration:underline}

.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;padding-bottom:1.6rem;border-bottom:1px solid rgba(255,255,255,.18)}

footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}

footer .logo-f img{height:2.3rem;margin-bottom:.8rem}

.news .field{display:flex;gap:.4rem;margin-top:.5rem}

.news input{flex:1;border:0;border-radius:100px;padding:.6rem .9rem;font-family:inherit;font-size:.78rem;color:var(--ink)}

.news small{display:block;margin-top:.45rem;font-size:.62rem;opacity:.65}

.fbot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1rem;font-size:.68rem;opacity:.75}

.fbot .service{display:flex;gap:1rem;flex-wrap:wrap}

/* Sticky mobiele CTA */

.mobile-cta{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);

padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));display:none;gap:.8rem;align-items:center;z-index:90;

box-shadow:0 -6px 20px rgba(29,85,112,.12)}

.mobile-cta .txt{font-size:.68rem;line-height:1.3}

/* Modal */

.overlay{position:fixed;inset:0;background:rgba(29,85,112,.55);display:none;place-items:center;z-index:250;padding:1rem}

.overlay.on{display:grid}

.modal{background:#fff;border-radius:var(--radius);max-width:26rem;width:100%;max-height:92vh;overflow:auto;padding:1.4rem;position:relative}

.modal .steps{display:flex;gap:.3rem;margin-bottom:1rem}

.modal .steps i{height:.25rem;flex:1;background:var(--line);border-radius:100px}

.modal .steps i.on{background:var(--orange)}

.modal h3{font-size:1.15rem;margin-bottom:.2rem}

.modal .sub{font-size:.75rem;opacity:.75;margin-bottom:1rem}

label.f{display:block;margin-bottom:.7rem;font-size:.7rem;font-weight:600;opacity:.85}

label.f input{width:100%;margin-top:.25rem;padding:.6rem .8rem;border:2px solid var(--line);border-radius:12px;font-family:inherit;font-size:.82rem;color:var(--ink)}

label.f input:focus{border-color:var(--blue-mid);outline:0}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}

.opt{display:flex;gap:.5rem;align-items:flex-start;background:var(--cream);border-radius:12px;padding:.65rem .8rem;margin:.2rem 0 .8rem;font-size:.72rem;line-height:1.45}

.paygrid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.9rem}

.pay{border:2px solid var(--line);border-radius:12px;padding:.65rem;background:#fff;font-weight:700;font-size:.75rem;color:var(--petrol)}

.pay:hover{border-color:var(--blue-mid)}

.pay[aria-pressed="true"]{border-color:var(--orange);background:#fdf4ee}

.summary{background:var(--blue-pale);border-radius:12px;padding:.65rem .8rem;margin-bottom:.9rem;display:flex;justify-content:space-between;align-items:center;font-size:.75rem}

.summary b{font-size:.95rem;color:var(--petrol)}

.back{background:none;border:0;font-size:.72rem;text-decoration:underline;opacity:.7;display:block;margin:.7rem auto 0;font-family:inherit}

.close{position:absolute;top:.8rem;right:.8rem}

/* ---------- Responsive ---------- */

@media (max-width:68.74em){

.hero .wrap{grid-template-columns:1fr;gap:1.6rem}

.hero-photo{max-width:14rem}

.impact .grid{grid-template-columns:1fr 1fr}

.impact .grid>.bubble:first-child{grid-column:1/-1}

.spend .grid,.quote .grid{grid-template-columns:1fr;gap:1.6rem}

.cards{grid-template-columns:1fr 1fr}

.steps-grid{grid-template-columns:1fr 1fr}

.steps-grid .bubble:nth-child(n){margin-top:0}

.fgrid{grid-template-columns:1fr 1fr}

}

@media (max-width:47.99em){

.topbar .hide-s{display:none}

.menu,.nav-actions .action-link,.nav-actions .btn{display:none}

.burger{display:grid}

.hero h1{font-size:1.9rem}

.sec-head h2{font-size:1.5rem}

.quote blockquote{font-size:1.25rem}

.spend .headline{font-size:3rem}

.impact .grid,.cards,.steps-grid,.fgrid{grid-template-columns:1fr}

.mobile-cta{display:flex}

body{padding-bottom:4rem}

}

</style>

</head>

<body>

<a class="skip" href="#main">Ga naar inhoud</a>

<span><b>CBF-erkend</b> · ANBI · 92% van elke euro naar het doel</span>

<span class="hide-s"><a href="#">Evenementen</a><span class="sep">·</span><a href="#">3FM Serious Request</a><span class="sep">·</span><a href="#">Contact</a></span>

</div>

</a>

<li>

<button aria-expanded="false" data-dd>Spierziekten bij kinderen <i class="caret"></i></button>

<a href="#">Over spierziekten</a><a href="#">Sport en bewegen</a>

<a href="#">Financiële ondersteuning</a><a href="#">Kind-ambassadeurs</a>

<a href="#">Podcast: De kracht van minder</a>

</div>

</li>

<li>

<button aria-expanded="false" data-dd>Steun ons <i class="caret"></i></button>

<div class="lbl">Geven</div>

<a class="item hi" href="#doneer"><span class="dot"></span><span><b>Eenmalig doneren</b><span>Direct met iDEAL of Apple Pay</span></span></a>

<a class="item" href="#doneer"><span class="dot"></span><span><b>Maandelijks geven</b><span>Vanaf €5 per maand</span></span></a>

<a class="item" href="#"><span class="dot"></span><span><b>Nalatenschap</b><span>Vraag de brochure aan</span></span></a>

</div>

<div>

<div class="lbl">In beweging komen</div>

<a class="item" href="#actie"><span class="dot"></span><span><b>Kom in actie</b><span>Start je eigen actiepagina</span></span></a>

<a class="item" href="#"><span class="dot"></span><span><b>Evenementenkalender</b><span>Loop, fiets of zwem mee</span></span></a>

<a class="item" href="#"><span class="dot"></span><span><b>Zet je bedrijf in</b><span>Partnerschap en sponsoring</span></span></a>

</div>

</li>

<li><a href="#besteding">Onze impact</a></li>

<li><a href="#verhalen">Verhalen</a></li>

<li>

<a href="#">Over Spieren voor Spieren</a><a href="#">Topsport-ambassadeurs</a>

<a href="#">Ons team</a><a href="#">Veelgestelde vragen</a>

<a href="#">Contact</a><a href="#">Downloads & pers</a>

</div>

</li>

</ul>

</button>

<a class="action-link" href="#actie">Kom in actie</a>

<a class="btn btn-primary" href="#doneer">Doneer</a>

</button>

</div>

</header>

</button>

</div>

<nav>

<button data-acc>Spierziekten bij kinderen <i class="caret"></i></button>

<div class="panel"><a href="#">Over spierziekten</a><a href="#">Sport en bewegen</a><a href="#">Financiële ondersteuning</a><a href="#">Kind-ambassadeurs</a><a href="#">Podcast</a></div>

</div>

<button data-acc>Steun ons <i class="caret"></i></button>

<div class="panel"><a href="#doneer">Eenmalig doneren</a><a href="#doneer">Maandelijks geven</a><a href="#actie">Kom in actie</a><a href="#">Evenementenkalender</a><a href="#">Zet je bedrijf in</a><a href="#">Nalatenschap</a></div>

</div>

<div class="acc"><a href="#besteding">Onze impact</a></div>

<div class="acc"><a href="#verhalen">Verhalen</a></div>

<div class="panel"><a href="#">Over Spieren voor Spieren</a><a href="#">Topsport-ambassadeurs</a><a href="#">Ons team</a><a href="#">FAQ</a><a href="#">Contact</a></div>

</div>

</nav>

<a class="btn btn-primary btn-lg" href="#doneer">Doneer</a>

<a class="btn btn-outline" href="#actie" style="justify-content:center">Kom in actie</a>

</div>

<div>

<span class="kicker">20.000 kinderen in Nederland</span>

<h1>Laat kinderen met een spierziekte <span class="mark">niet verliezen</span></h1>

<p class="lead">Hun lichaam laat hen langzaam in de steek, terwijl hun hoofd nog vol dromen zit. Kinderen met een spierziekte geven niet op. Wij dus ook niet.</p>

</div>

<h2>Ik steun kinderen met een spierziekte</h2>

<p class="sub">Jouw donatie gaat naar onderzoek, snellere diagnoses en sport & bewegen.</p>

<button role="tab" aria-selected="true" data-freq="maand">Maandelijks<span class="tag">MEESTE IMPACT</span></button>

<button role="tab" aria-selected="false" data-freq="eenmalig">Eenmalig</button>

<button role="tab" aria-selected="false" data-freq="jaar">Jaarlijks</button>

</div>

</div>

<button class="btn btn-primary btn-lg" id="startDonation">Doneer <span id="btnAmount"></span></button>

<span>Betaal met</span><span class="chip">iDEAL</span><span class="chip">Apple Pay</span>

<span class="chip">Google Pay</span><span class="chip">PayPal</span><span class="chip">Creditcard</span><span class="chip">Incasso</span>

</div>

</section>

<h3>Onderzoeksprogramma 2026–2028</h3>

<p class="track-foot"><b>€18.848.700</b> van €25.000.000 opgehaald. Dankzij 3FM Serious Request staat de teller op 75%. Er is nog <b>€6,2 miljoen</b> nodig voor alle vier de onderzoekslijnen.</p>

</div>

<div class="bubble white stat"><div class="n">20.000</div><div class="l">kinderen in Nederland leven met een spierziekte</div></div>

<div class="bubble white stat"><div class="n">14 mnd</div><div class="l">gemiddelde wachttijd tot een diagnose — dat moet korter</div></div>

</div>

</div>

<div class="eyebrow">Transparantie</div>

<h2>Zo wordt jouw geld besteed</h2>

<p>Geen belofte, maar een uitsplitsing. Onze jaarrekening is openbaar en wordt getoetst door het CBF.</p>

</div>

<div class="headline">92%<small>van elke euro gaat rechtstreeks naar onderzoek, diagnose en sport voor kinderen met een spierziekte.</small></div>

<li>

<div class="top"><b>Onderzoek naar behandeling</b><span class="pct">62%</span></div>

<small>Nieuwe medicijnen en therapieën</small>

</li>

<li>

<div class="top"><b>Snellere diagnose</b><span class="pct">20%</span></div>

<small>Het Kinderspiercentrum in het Radboudumc</small>

</li>

<li>

<div class="top"><b>Sport & bewegen</b><span class="pct">10%</span></div>

<small>Aangepast sporten en begeleiding</small>

</li>

<li>

<div class="top"><b>Werving en organisatie</b><span class="pct">8%</span></div>

<small>Kosten om nieuwe donateurs te bereiken</small>

</li>

</ul>

</div>

</section>

<div class="eyebrow">Verhalen die raken</div>

<h2>De kinderen achter de cijfers</h2>

<p>Eén plek voor alle verhalen, acties en nieuws. Filter op wat je zoekt.</p>

</div>

<button aria-pressed="true">Alles</button><button aria-pressed="false">Kinderen</button>

<button aria-pressed="false">In actie</button><button aria-pressed="false">Onderzoek</button>

<button aria-pressed="false">In de media</button>

</div>

<div class="body"><span class="tag">Kinderen</span><h3>Het verhaal van Riyad</h3>

<p>Riyad is 14, houdt van gamen en is gek op gezelligheid. Zijn leven wordt ook gekleurd door SMA type 1.</p>

<a class="more" href="#">Lees zijn verhaal →</a></div>

</article>

<div class="body"><span class="tag">In actie</span><h3>765 km in 24 uur op een surfboard</h3>

<p>Topsport-ambassadeur Bob van de Burgt surfte een etmaal lang door en zette een wereldrecord neer.</p>

</article>

<div class="body"><span class="tag">In actie</span><h3>235 kilometer voor Sven</h3>

<p>Vijf studenten uit Wageningen fietsten de Elfstedentocht op een tandem voor hun vriend Sven.</p>

</article>

</div>

<div style="margin-top:1.4rem"><a class="btn btn-outline" href="#">Alle verhalen bekijken</a></div>

</div>

</section>

<div>

<blockquote>“Voor gezonde kinderen is de toekomst een belofte. Voor kinderen met een spierziekte is het een race tegen de klok.”</blockquote>

<div class="who">Louis van Gaal — ere-ambassadeur Spieren voor Spieren</div>

</div>

</section>

<div class="eyebrow">Kom in actie</div>

<h2>Zet jouw gezonde spieren in</h2>

<p>In vier stappen sta je met je eigen actiepagina online.</p>

</div>

<div class="bubble"><span class="num">1</span><h3>Bedenk een (sportieve) actie</h3><p>Ren, fiets, wandel of zwem naar de overwinning. Verzamel lege flessen of verkoop spullen.</p></div>

<div class="bubble cream"><span class="num">2</span><h3>Maak een actiepagina aan</h3><p>Jouw motivatie inspireert. Vertel het anderen!</p>

<a class="btn btn-primary" href="#" style="margin-top:.7rem">Maak direct een actie aan</a></div>

<div class="bubble"><span class="num">3</span><h3>Deel je actie</h3><p>Delen maar! Hoe meer mensen je bereikt, hoe meer impact je maakt.</p></div>

<div class="bubble"><span class="num">4</span><h3>Zet je gezonde spieren in</h3><p>Let's go! Jij zet kracht om in hoop, voor kinderen die dat keihard nodig hebben.</p></div>

</div>

</section>

<p>Spieren voor Spieren is CBF-erkend en heeft de ANBI-status. Je gift is daardoor aftrekbaar van de belasting. Onze jaarrekening en bestedingen zijn openbaar.</p>

</div>

</main>

<div>

<p style="font-size:.78rem;opacity:.85;max-width:22em">Gezonde spieren zetten zich in voor zieke spieren. Al meer dan 25 jaar.</p>

<h4 style="margin-top:1rem">Blijf op de hoogte</h4>

<p style="font-size:.72rem;opacity:.8;margin:0">Eén keer per maand: verhalen, onderzoek en wat jouw steun oplevert.</p>

<button class="btn btn-primary">Aanmelden</button>

</div>

<small>Afmelden kan met één klik. We delen je adres nooit met derden.</small>

</div>

<div><h4>Steun ons</h4><ul>

<li><a href="#doneer">Eenmalig doneren</a></li><li><a href="#doneer">Maandelijks geven</a></li>

<li><a href="#actie">Kom in actie</a></li><li><a href="#">Evenementenkalender</a></li>

<li><a href="#">Zet je bedrijf in</a></li><li><a href="#">Nalatenschap</a></li></ul></div>

<li><a href="#">Over Spieren voor Spieren</a></li><li><a href="#besteding">Onze impact</a></li>

<li><a href="#">Spierziekten bij kinderen</a></li><li><a href="#">Topsport-ambassadeurs</a></li>

<li><a href="#">Kind-ambassadeurs</a></li><li><a href="#">Ons team</a></li></ul></div>

<div><h4>Hulp & service</h4><ul>

<li><a href="#">Veelgestelde vragen</a></li><li><a href="#">Contact</a></li>

<li><a href="#">Financiële ondersteuning</a></li><li><a href="#">Onze keurmerken</a></li>

<li><a href="#">Downloads & pers</a></li><li><a href="#">3FM Serious Request</a></li></ul></div>

</div>

<span class="service"><a href="#">Donatie wijzigen of opzeggen</a><a href="#">Privacy</a><a href="#">Voorwaarden</a><a href="#">Cookievoorkeuren</a></span>

</div>

</footer>

<div class="txt"><b>€10 per maand</b><br>= 1 uur onderzoek</div>

<a class="btn btn-primary" href="#doneer" style="margin-left:auto">Doneer nu</a>

</div>

</button>

<h3 id="modalTitle">Bijna klaar</h3>

<p class="sub">We vragen alleen wat we echt nodig hebben.</p>

<div class="summary"><span>Jouw donatie</span><b id="sumAmount"></b></div>

<label class="f">E-mailadres — voor je bevestiging<input type="email" placeholder="naam@voorbeeld.nl"></label>

<label for="anon" style="margin:0"><b>Ik doneer liever anoniem.</b> Dan bewaren we alleen je e-mailadres voor de bevestiging.</label>

</div>

<label class="f">Voornaam<input type="text"></label>

<label class="f">Achternaam<input type="text"></label>

</div>

<p style="font-size:.68rem;opacity:.7;margin:-.3rem 0 .8rem">Je adres vragen we alleen bij een machtiging of periodieke schenking.</p>

</div>

<button class="btn btn-primary btn-lg" id="toStep3">Kies betaalmethode</button>

</div>

<h3>Hoe wil je betalen?</h3>

<p class="sub">Met Apple Pay of Google Pay ben je in één tap klaar.</p>

<button class="pay" aria-pressed="true">Apple Pay</button><button class="pay" aria-pressed="false">iDEAL</button>

<button class="pay" aria-pressed="false">Google Pay</button><button class="pay" aria-pressed="false">PayPal</button>

<button class="pay" aria-pressed="false">Creditcard</button><button class="pay" aria-pressed="false">Bancontact</button>

</div>

<div class="summary"><span>Te betalen</span><b id="sumAmount2"></b></div>

<button class="btn btn-primary btn-lg">Doneer veilig</button>

<button class="back" id="backTo2">← Terug</button>

<p style="text-align:center;font-size:.65rem;opacity:.7;margin:.7rem 0 0">Beveiligde betaling · CBF-erkend · Stopzetten kan altijd</p>

</div>

/* ---- Donatiewidget ---- */

var SETS={

maand:[{a:5,t:'een sportles voor een kind, elke maand'},{a:10,t:'1 uur laboratoriumonderzoek per maand'},{a:25,t:'een deel van een genetische sneltest'}],

eenmalig:[{a:30,t:'een sportmiddag voor een kind met SMA'},{a:60,t:'een uur onderzoek naar nieuwe medicijnen'},{a:150,t:'een compleet spierkrachtonderzoek'}],

jaar:[{a:60,t:'een jaar aangepast sporten voor één kind'},{a:120,t:'12 uur onderzoek naar behandeling'},{a:300,t:'een volledige genetische sneltest'}]

};

var LABEL={maand:' per maand',eenmalig:'',jaar:' per jaar'};

var freq='maand',amount=10;

function euro(n){return '€'+String(n).replace('.',',');}

function render(){

var set=SETS[freq],box=document.getElementById('amounts');

box.innerHTML='';

set.forEach(function(o,i){

var b=document.createElement('button');

b.className='amt';

b.setAttribute('aria-pressed',o.a===amount?'true':'false');

b.innerHTML='<strong>'+euro(o.a)+'</strong><span>'+(i===1?'meest gekozen':' ')+'</span>';

b.onclick=function(){amount=o.a;document.getElementById('customAmount').value='';render();};

box.appendChild(b);

});

var m=set.filter(function(o){return o.a===amount;})[0];

document.getElementById('impactText').innerHTML=m?'<b>'+euro(amount)+'</b> = '+m.t:'Elke euro gaat naar onderzoek, diagnose en sport & bewegen.';

var lbl=euro(amount)+LABEL[freq];

document.getElementById('btnAmount').textContent=lbl;

document.getElementById('sumAmount').textContent=lbl;

document.getElementById('sumAmount2').textContent=lbl;

}

document.querySelectorAll('.freq button').forEach(function(btn){

btn.onclick=function(){

document.querySelectorAll('.freq button').forEach(function(b){b.setAttribute('aria-selected','false');});

btn.setAttribute('aria-selected','true');

freq=btn.dataset.freq;amount=SETS[freq][1].a;

document.getElementById('customAmount').value='';render();

};

});

document.getElementById('customAmount').addEventListener('input',function(e){

var v=parseFloat(e.target.value.replace(',','.'));

if(!isNaN(v)&&v>0){amount=v;render();}

});

render();

/* ---- Desktop dropdowns ---- */

document.querySelectorAll('[data-dd]').forEach(function(btn){

var li=btn.parentElement;

function set(state){

document.querySelectorAll('#menu li').forEach(function(x){if(x!==li)x.classList.remove('open');});

li.classList.toggle('open',state);

btn.setAttribute('aria-expanded',state?'true':'false');

}

btn.onclick=function(e){e.stopPropagation();set(!li.classList.contains('open'));};

li.onmouseenter=function(){set(true);};

li.onmouseleave=function(){set(false);};

});

document.addEventListener('click',function(){

document.querySelectorAll('#menu li').forEach(function(x){

x.classList.remove('open');

var b=x.querySelector('[data-dd]');if(b)b.setAttribute('aria-expanded','false');

});

/* ---- Mobiel menu (werkt nu wél) ---- */

var drawer=document.getElementById('drawer'),burger=document.getElementById('burger');

function openDrawer(on){

drawer.classList.toggle('on',on);

drawer.setAttribute('aria-hidden',on?'false':'true');

burger.setAttribute('aria-expanded',on?'true':'false');

document.body.style.overflow=on?'hidden':'';

if(on){var f=drawer.querySelector('button, a');if(f)f.focus();}else{burger.focus();}

}

burger.onclick=function(){openDrawer(true);};

document.getElementById('closeDrawer').onclick=function(){openDrawer(false);};

drawer.querySelectorAll('nav a, .drawer-cta a').forEach(function(a){

a.addEventListener('click',function(){openDrawer(false);});

});

document.querySelectorAll('[data-acc]').forEach(function(b){

b.onclick=function(){b.parentElement.classList.toggle('open');};

});

document.addEventListener('keydown',function(e){

if(e.key==='Escape'){

if(drawer.classList.contains('on'))openDrawer(false);

document.getElementById('overlay').classList.remove('on');

document.querySelectorAll('#menu li').forEach(function(x){x.classList.remove('open');});

}

});

/* ---- Filters ---- */

document.querySelectorAll('.filters button').forEach(function(b){

b.onclick=function(){

document.querySelectorAll('.filters button').forEach(function(x){x.setAttribute('aria-pressed','false');});

b.setAttribute('aria-pressed','true');

};

});

/* ---- Balken vullen bij scroll ---- */

function reveal(el,w){

new IntersectionObserver(function(en,obs){

en.forEach(function(e){if(e.isIntersecting){el.style.width=w+'%';obs.unobserve(e.target);}});

},{threshold:.35}).observe(el);

}

var fill=document.getElementById('barFill');reveal(fill,fill.dataset.target);

document.querySelectorAll('.meter i').forEach(function(i){reveal(i,i.dataset.w);});

/* ---- Social proof ---- */

var TICK=[['Henk uit Nijmegen','€25','5 minuten geleden'],

['Fatima uit Rotterdam','€10 per maand','18 minuten geleden'],

['Team De Vliegende Hollanders','€340','een uur geleden'],

['Sanne uit Groningen','€50','2 uur geleden']];

var ti=0,tEl=document.getElementById('tickerText');

function tick(){var t=TICK[ti%TICK.length];tEl.innerHTML='<b>'+t[0]+'</b> doneerde '+t[1]+' · '+t[2];ti++;}

tick();setInterval(tick,4200);

/* ---- Modal ---- */

var ov=document.getElementById('overlay');

document.getElementById('startDonation').onclick=function(){ov.classList.add('on');};

document.getElementById('closeModal').onclick=function(){ov.classList.remove('on');};

ov.onclick=function(e){if(e.target===ov)ov.classList.remove('on');};

document.getElementById('toStep3').onclick=function(){

document.getElementById('step2').hidden=true;

document.getElementById('step3').hidden=false;

document.getElementById('s2').classList.add('on');

document.getElementById('s3').classList.add('on');

};

document.getElementById('backTo2').onclick=function(){

document.getElementById('step3').hidden=true;

document.getElementById('step2').hidden=false;

document.getElementById('s3').classList.remove('on');

};

document.getElementById('anon').onchange=function(e){

document.getElementById('nameFields').style.display=e.target.checked?'none':'block';

};

document.querySelectorAll('.pay').forEach(function(p){

p.onclick=function(){

document.querySelectorAll('.pay').forEach(function(x){x.setAttribute('aria-pressed','false');});

p.setAttribute('aria-pressed','true');

};

});

</script>

</body>

</html>