:root{--tekst:#6b7280;--tekst-kop:#111827;--achtergrond:#f2f2f0;--rand:#e5e7eb;--accent:#15803d;--accent-bg:#16a34a14;--sans:"Inter", system-ui, sans-serif;--header-hoogte:72px;--fw-normaal:400;--fw-medium:500;--fw-vet:600;--fw-zwaar:700;--fs-body:17px;--fs-klein:13px;--fs-bijschrift:12px;--fs-nav:15px;--fs-h3:20px;--fs-h2:28px;--fs-h1:48px;font:var(--fs-body)/160% var(--sans)}@media (width<=768px){:root{--fs-h1:36px;--fs-h2:22px}}@media (width<=480px){:root{--fs-h1:28px;--fs-h2:20px}}:root{color:var(--tekst);background:var(--achtergrond)}*,:before,:after{box-sizing:border-box}body{margin:0}#root{flex-direction:column;min-height:100svh;display:flex}main{padding:64px 48px}@media (width<=768px){main{padding:40px 24px}}@media (width<=480px){main{padding:32px 20px}}h1,h2,h3{font-weight:var(--fw-vet);color:var(--tekst-kop);margin:0;line-height:1.15}h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}p{font-size:var(--fs-body);margin:0}.header{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rand);z-index:100;background:#f9f9f7d9;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 48px;display:grid;position:sticky;top:0}@media (width<=768px){.header{grid-template-columns:1fr auto;padding:14px 24px}}@media (width<=480px){.header{grid-template-columns:1fr;justify-items:center;gap:12px;padding:14px 20px}}.header__logo{font-size:var(--fs-h3);font-weight:var(--fw-zwaar);color:var(--tekst-kop);letter-spacing:-.3px;text-decoration:none}.header__nav{gap:4px;margin:0;padding:0;list-style:none;display:flex}@media (width<=480px){.header__nav{gap:2px}}.footer{border-top:1px solid var(--rand);justify-content:space-between;align-items:center;margin-top:auto;padding:20px 48px;display:flex}@media (width<=768px){.footer{padding:18px 24px}}@media (width<=480px){.footer{text-align:center;flex-direction:column;gap:12px;padding:18px 20px}}.footer__copyright{font-size:var(--fs-klein);color:var(--tekst)}.footer__links{gap:4px;margin:0;padding:0;list-style:none;display:flex}.footer__link{color:var(--tekst);font-size:var(--fs-klein);border-radius:8px;padding:5px 12px;text-decoration:none;transition:color .15s,background .15s}.footer__link:hover{color:var(--tekst-kop);background:var(--accent-bg)}.header__nav-link{color:var(--tekst);font-size:var(--fs-nav);border-radius:8px;padding:7px 16px;text-decoration:none;transition:color .15s,background .15s}@media (width<=768px){.header__nav-link{font-size:var(--fs-klein);padding:7px 12px}}@media (width<=480px){.header__nav-link{font-size:var(--fs-bijschrift);padding:6px 10px}}.header__nav-link:hover{color:var(--tekst-kop);background:var(--accent-bg)}.header__nav-link--actief{color:var(--accent);background:var(--accent-bg);font-weight:var(--fw-medium)}.header__nav-link--actief:nth-child(2n){color:var(--accent2);background:var(--accent2-bg)}.puzzle{outline:none;flex-direction:column;align-items:center;gap:20px;display:flex}.puzzle:focus-visible{outline-offset:6px;border-radius:4px;outline:2px solid #c9a84c}.puzzle__grid{background:#0e1c3a;border-radius:8px;gap:3px;width:min(320px,90vw);padding:3px;display:grid;position:relative;box-shadow:0 2px 12px #0000004d}.puzzle__cell{aspect-ratio:1;border-radius:3px;justify-content:center;align-items:center;display:flex;position:relative}.puzzle__cell--wall{background-color:#7c4a1e;background-image:repeating-linear-gradient(90deg,#0000 0 calc(50% - 1px),#00000040 calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px) 100%),repeating-linear-gradient(0deg,#ffffff12 0 33%,#0003 33% 34%,#0000 34% 66%,#0003 66% 67%,#0000 67% 100%);box-shadow:inset 0 0 0 1px #0000004d}.puzzle__cell--empty{background:#e0d9c8}.puzzle__cell--gat{background-color:#ff505080;box-shadow:inset 0 0 0 1px #ff505080}.puzzle__cell--peel{background:#e8c840}.puzzle__cell--exit{background:#3abe4599;box-shadow:inset 0 0 0 2px #fff8e0}.puzzle__banaan{object-fit:contain;width:70%;height:70%;position:absolute}@keyframes glijden{0%,to{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}@keyframes vallen{0%{opacity:1;transform:rotate(0)scale(1)}60%{opacity:.6;transform:rotate(360deg)scale(.4)}to{opacity:0;transform:rotate(720deg)scale(0)}}.puzzle__player{object-fit:contain;width:90%;height:90%;image-rendering:pixelated;z-index:1;position:absolute}.puzzle__player--glijdt{animation:.15s linear infinite glijden}.puzzle__player--valt{animation:.9s ease-in forwards vallen}.puzzle__message{font-size:var(--fs-h3);font-weight:var(--fw-vet);color:#10af0d}.puzzle__message--reset{color:#e05050}.puzzle__message{letter-spacing:.05em;margin:0}.puzzle__buttons{grid-template-rows:repeat(3,44px);grid-template-columns:repeat(3,44px);gap:5px;display:grid}.puzzle__buttons .puzzle__button--up{grid-area:1/2}.puzzle__buttons .puzzle__button--left{grid-area:2/1}.puzzle__buttons .puzzle__button--reset{grid-area:2/2}.puzzle__buttons .puzzle__button--right{grid-area:2/3}.puzzle__buttons .puzzle__button--down{grid-area:3/2}.puzzle__button{cursor:pointer;color:#c9a84c;background:#0e1c3a;border:1px solid #7a5e1a;border-radius:6px;width:44px;height:44px;padding:0;font-size:0}.puzzle__button .material-icons{font-size:20px}.puzzle__button{transition:background .15s,border-color .15s}.puzzle__button:hover{background:#1a2f5e;border-color:#c9a84c}.puzzle__button--secondary{color:#8a9bb8}.puzzle__button--secondary:hover{color:#c9a84c}.puzzle__uitleg{font-size:var(--fs-klein);color:#4a3a1a;text-align:center;max-width:300px;margin:0;line-height:1.5}.puzzle__legenda{font-size:var(--fs-klein);color:#4a3a1a;gap:16px;margin:0;padding:0;list-style:none;display:flex}.puzzle__legenda li{align-items:center;gap:6px;display:flex}.puzzle__legenda .puzzle__cell{border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;font-size:.7rem;display:flex}.puzzle__legenda .puzzle__cell img{object-fit:contain;width:100%;height:100%}.puzzle__hint{font-size:var(--fs-klein);color:#7a6a4a;margin:0}@media (width<=1024px){.puzzle__hint{display:none}}.puzzels-sectie{background:#0a1628;margin-inline:-48px;padding:64px 48px}@media (width<=768px){.puzzels-sectie{margin-inline:-24px;padding:48px 24px}}.puzzels-sectie__header{text-align:center;margin-bottom:40px}.puzzels-sectie__titel{font-size:var(--fs-h2);font-weight:var(--fw-vet);color:#c9a84c;letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px}.puzzels-sectie__titel:after{content:"";opacity:.6;background:#c9a84c;width:60px;height:2px;margin:10px auto 0;display:block}.puzzels-sectie__layton{opacity:.9;width:80px;margin:50px auto 0;display:block}.puzzels-sectie__intro{font-size:var(--fs-body);color:#8a9bb8;max-width:520px;margin:16px auto 0;line-height:1.7}.puzzels-sectie__rij{flex-wrap:wrap;justify-content:center;gap:32px;margin:0;padding:0;list-style:none;display:flex}.puzzel-kaart{background:#0e1c3a;border:2px solid #c9a84c;border-radius:12px;flex-direction:column;align-items:center;padding:8px;transition:transform .2s,box-shadow .2s;display:flex;position:relative;box-shadow:0 0 0 1px #7a5e1a,0 12px 40px #0009,0 4px 12px #0006}.puzzel-kaart:hover{transform:translateY(-3px);box-shadow:0 0 0 1px #c9a84c,0 20px 50px #000000b3,0 6px 16px #0006}.puzzel-kaart:before,.puzzel-kaart:after{content:"✦";color:#c9a84c;pointer-events:none;font-size:10px;position:absolute;top:6px}.puzzel-kaart:before{left:8px}.puzzel-kaart:after{right:8px}.puzzel-kaart__titel{font-size:var(--fs-nav);font-weight:var(--fw-vet);color:#c9a84c;letter-spacing:.08em;text-transform:uppercase;text-align:center;align-self:stretch;margin:0;padding:10px 16px 12px}.puzzel-kaart__inhoud{background:#fdf0c8;border:1px solid #b8912e;border-radius:8px;flex-direction:column;align-items:center;gap:20px;width:100%;padding:20px;display:flex}.over-mij__inhoud{flex-direction:column;gap:80px;max-width:1100px;margin:0 auto 48px;display:flex}.over-mij__sectie{align-items:center;gap:60px;display:flex}.over-mij__sectie--groen{background:var(--accent-bg);border:1px solid #16a34a26;border-radius:16px;padding:44px}@media (width<=700px){.over-mij__sectie--groen{padding:24px}}.over-mij__sectie--bg{background:#fff;border-radius:16px;padding:44px;box-shadow:0 2px 16px #00000012}@media (width<=700px){.over-mij__sectie--bg{padding:24px}.over-mij__sectie{flex-direction:column;gap:28px}}.over-mij__tekst{flex:1;min-width:0}.over-mij__tekst h1,.over-mij__tekst h2{margin:0 0 16px}.over-mij__tekst h1:before,.over-mij__tekst h2:before{content:"";background:var(--accent);border-radius:2px;width:36px;height:4px;margin-bottom:14px;display:block}.over-mij__tekst h3{font-size:var(--fs-nav);font-weight:var(--fw-medium);color:var(--accent);margin:-8px 0 20px}.over-mij__tekst p{line-height:1.7}.over-mij__tekst p:first-of-type{font-size:calc(var(--fs-body) + 1px);color:var(--tekst-kop);font-weight:var(--fw-medium)}.over-mij__tekst p+p{color:var(--tekst);font-weight:var(--fw-normaal);margin-top:12px}.over-mij__foto-wrapper{border-radius:12px;flex-shrink:0;width:340px;height:430px;overflow:hidden;box-shadow:0 6px 28px #00000021}@media (width<=700px){.over-mij__foto-wrapper{width:100%;height:260px}}.over-mij__foto{object-fit:cover;object-position:center;width:100%;height:100%}.over-mij__foto--quinten{object-position:center 65%}.over-mij__foto--f1{object-position:center 55%}.over-mij__foto--wenen{object-position:center top}.projecten__inhoud{max-width:1100px;margin:0 auto}.projecten__titel{margin-bottom:72px}.projecten__titel:before{content:"";background:var(--accent);border-radius:2px;width:36px;height:4px;margin-bottom:14px;display:block}.projecten__lijst{flex-direction:column;display:flex}.project-kaart{border-top:1px solid var(--rand);grid-template-columns:1fr 1fr;align-items:center;gap:64px;padding:56px 0;display:grid}.project-kaart:last-child{border-bottom:1px solid var(--rand)}.project-kaart--omgekeerd .project-kaart__afbeelding-wrapper{order:2}.project-kaart--omgekeerd .project-kaart__inhoud{order:1}.project-kaart__afbeelding{border-radius:12px;width:auto;max-width:100%;height:auto;max-height:380px;margin:0 auto;transition:transform .4s;display:block;box-shadow:0 8px 32px #0000001f}.project-kaart__inhoud{flex-direction:column;display:flex}.project-kaart__nummer{font-size:88px;font-weight:var(--fw-zwaar);color:var(--accent-bg);letter-spacing:-4px;-webkit-user-select:none;user-select:none;margin-bottom:-12px;line-height:1;display:block}.project-kaart__naam{font-size:var(--fs-h2);margin:0 0 16px}.project-kaart__naam:before{content:"";background:var(--accent);border-radius:2px;width:36px;height:4px;margin-bottom:14px;display:block}.project-kaart__stack{flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none;display:flex}.project-kaart__tag{font-size:var(--fs-klein);font-weight:var(--fw-medium);color:var(--tekst-kop);border:1px solid var(--rand);background:#fff;border-radius:99px;align-items:center;gap:6px;padding:5px 12px;display:inline-flex;box-shadow:0 1px 4px #0000000f}.project-kaart__tag svg{flex-shrink:0;font-size:14px}.project-kaart__tekst{color:var(--tekst);line-height:1.75;font-size:var(--fs-body)}.project-kaart__tekst+.project-kaart__tekst{margin-top:10px}.project-kaart__github{font-size:var(--fs-klein);font-weight:var(--fw-medium);color:var(--accent);background:var(--accent-bg);border:1px solid #0000;border-radius:8px;align-self:flex-start;align-items:center;gap:6px;margin-top:24px;padding:9px 18px;text-decoration:none;transition:background .15s,border-color .15s;display:inline-flex}.project-kaart__github .material-icons{font-size:16px}.project-kaart__github:hover{border-color:var(--accent);background:#16a34a24}@media (width<=768px){.project-kaart{grid-template-columns:1fr;gap:28px;padding:40px 0}.project-kaart--omgekeerd .project-kaart__afbeelding-wrapper,.project-kaart--omgekeerd .project-kaart__inhoud{order:unset}}.contact{min-height:calc(100vh - var(--header-hoogte));justify-content:center;align-items:center;display:flex}.contact__inhoud{width:100%;max-width:480px}.contact__tekst{margin-bottom:40px}.contact__tekst h1{margin:0 0 12px}.contact__tekst h1:before{content:"";background:var(--accent);border-radius:2px;width:36px;height:4px;margin-bottom:14px;display:block}.contact__tekst p{line-height:1.7}.contact__email{border:1px solid var(--rand);color:var(--tekst-kop);font-weight:var(--fw-medium);font-size:var(--fs-body);background:#fff;border-radius:12px;align-items:center;gap:10px;margin-bottom:12px;padding:16px 20px;text-decoration:none;transition:border-color .15s,box-shadow .15s;display:flex;box-shadow:0 2px 8px #0000000d}.contact__email .material-icons{color:var(--accent);font-size:20px}.contact__email:hover{border-color:var(--accent);box-shadow:0 2px 12px #16a34a1f}.contact__links{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.contact__link{border:1px solid var(--rand);color:var(--tekst-kop);font-weight:var(--fw-medium);font-size:var(--fs-body);background:#fff;border-radius:12px;align-items:center;gap:10px;padding:16px 20px;text-decoration:none;transition:border-color .15s,box-shadow .15s;display:flex;box-shadow:0 2px 8px #0000000d}.contact__link .material-icons{color:var(--accent);font-size:20px}.contact__link:hover{border-color:var(--accent);box-shadow:0 2px 12px #16a34a1f}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}.home{padding:0}.home__scherm{min-height:calc(100vh - var(--header-hoogte));flex-direction:column;display:flex;position:relative}.hero{box-sizing:border-box;justify-content:space-between;align-items:center;gap:64px;width:100%;max-width:1000px;margin:auto;padding:48px;display:flex}@media (width<=768px){.hero{text-align:center;flex-direction:column-reverse;gap:40px;padding:32px 24px}}.hero__tekst,.hero__foto-wrapper,.hero__groet,.hero__naam,.hero__subtitel,.hero__bio,.hero__vaardigheden,.hero__acties{animation:.5s both fadeUp}.hero__foto-wrapper{animation-delay:50ms}.hero__groet{animation-delay:.15s}.hero__naam{animation-delay:.25s}.hero__subtitel{animation-delay:.35s}.hero__bio{animation-delay:.45s}.hero__vaardigheden{animation-delay:.55s}.hero__acties{animation-delay:.65s}.hero__tekst{flex:1;min-width:0}.hero__foto-wrapper{flex-shrink:0;width:280px;height:320px;position:relative}@media (width<=768px){.hero__foto-wrapper{width:200px;height:230px}}.hero__foto{z-index:1;object-fit:cover;object-position:center top;border-radius:24px;width:100%;height:100%;position:relative;box-shadow:0 8px 32px #00000024}.hero__groet{margin:0 0 12px}.hero__groet-badge{background:var(--accent-bg);color:var(--accent);font-size:var(--fs-klein);font-weight:var(--fw-medium);border:1px solid #16a34a33;border-radius:99px;align-items:center;gap:6px;padding:5px 14px;display:inline-flex}.hero__naam{font-size:var(--fs-h1);font-weight:var(--fw-zwaar);margin:0 0 12px;line-height:1.1}.hero__naam--donker{color:var(--tekst-kop)}.hero__naam--groen{color:var(--accent)}.hero__subtitel{font-size:var(--fs-h3);color:var(--tekst);font-weight:var(--fw-medium);margin:0 0 16px}.hero__bio{max-width:460px;margin:0 0 24px;line-height:1.6}.hero__vaardigheden{flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:0;list-style:none;display:flex}@media (width<=768px){.hero__vaardigheden{justify-content:center}}.hero__tag{font-size:var(--fs-klein);font-weight:var(--fw-medium);color:var(--tekst-kop);border:1px solid var(--rand);background:#fff;border-radius:99px;align-items:center;gap:6px;padding:5px 12px;display:inline-flex;box-shadow:0 1px 4px #0000000f}.hero__tag svg{flex-shrink:0;font-size:14px}.hero__acties{flex-wrap:wrap;gap:12px;display:flex}@media (width<=768px){.hero__acties{justify-content:center}}.hero__cta{background:var(--accent);color:#fff;font-size:var(--fs-nav);font-weight:var(--fw-medium);border-radius:8px;padding:12px 28px;text-decoration:none;transition:background .15s,transform .15s;display:inline-block}.hero__cta:hover{background:#166534;transform:translateY(-2px)}.hero__cta--secundair{color:var(--accent);border:1.5px solid var(--accent);background:0 0}.hero__cta--secundair:hover{background:var(--accent-bg);transform:translateY(-2px)}.hero__scroll{color:var(--tekst);opacity:.45;flex-direction:column;align-items:center;gap:2px;animation:1.6s ease-in-out infinite bounce;display:flex;position:absolute;bottom:24px;left:0;right:0}.hero__scroll .material-icons{font-size:24px}@media (width<=768px){.hero__scroll{display:none}}.hero__scroll-tekst{font-size:var(--fs-bijschrift);font-weight:var(--fw-medium);letter-spacing:.04em}.techstack{box-sizing:border-box;width:100%;max-width:1100px;margin:0 auto;padding:80px 48px}@media (width<=768px){.techstack{padding:56px 24px}}.techstack__titel{font-size:var(--fs-h2);font-weight:var(--fw-vet);color:var(--tekst-kop);margin:0 0 40px}.techstack__titel:before{content:"";background:var(--accent);border-radius:2px;width:36px;height:4px;margin-bottom:14px;display:block}.techstack__rij{grid-template-columns:repeat(2,1fr);gap:24px;margin:0;padding:0;list-style:none;display:grid}@media (width<=540px){.techstack__rij{grid-template-columns:1fr}}.techstack__kaart{border:1px solid var(--rand);background:#fff;border-radius:12px;flex-direction:column;transition:transform .15s,box-shadow .15s;display:flex;overflow:hidden;box-shadow:0 2px 8px #0000000d}.techstack__kaart-header{background:var(--accent-bg);border-bottom:1px solid #16a34a1f;align-items:center;gap:12px;padding:20px 24px 16px;display:flex}.techstack__kaart:nth-child(2n) .techstack__kaart-header{background:var(--accent2-bg);border-bottom-color:#dc26261f}.techstack__icon{color:var(--accent);flex-shrink:0;font-size:22px}.techstack__kaart:nth-child(2n) .techstack__icon{color:var(--accent2)}.techstack__kaart-titel{font-size:var(--fs-nav);font-weight:var(--fw-vet);color:var(--accent);letter-spacing:.04em;text-transform:uppercase;margin:0}.techstack__kaart:nth-child(2n) .techstack__kaart-titel{color:var(--accent2)}.techstack__skills{grid-template-columns:repeat(2,1fr);gap:10px 16px;margin:0;padding:16px 24px 20px;list-style:none;display:grid}.techstack__skill{font-size:var(--fs-klein);color:var(--tekst-kop);font-weight:var(--fw-medium);align-items:center;gap:8px;display:flex}.techstack__skill svg{flex-shrink:0;font-size:18px}.techstack__skill-placeholder{flex-shrink:0;width:18px;height:18px}