/* MomentumMKB, gedeelde stijlen. Gegenereerd uit het herontwerp op 21-8-2026.
   Kleuren en maten staan bij de elementen zelf (inline), hier staat alleen wat gedeeld is. */

/* --- lettertypen, lokaal gehost, geen externe requests --- */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/Newsreader-normal.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 500;font-display:swap;src:url(fonts/Newsreader-italic.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/InstrumentSans-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/InstrumentSans-italic.woff2) format('woff2')}

/* De reveal-animaties starten 64 px buiten beeld; op smalle schermen gaf dat 40 px
   zijwaartse scroll, omdat overflow-x op body niet naar het venster doorwerkt. */
html{ overflow-x: clip; }
@supports not (overflow: clip){ html{ overflow-x: hidden; } }
body{ margin: 0px; background: rgb(244, 241, 235); overflow-x: clip; }
a{ color: #9A5325; text-decoration: none; }
a:hover{ color: rgb(126, 67, 25); }
::selection{ background: rgb(234, 217, 198); }
@keyframes rise { 
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}
.js [data-reveal]{ opacity: 0; transform: translateY(16px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); }
.js [data-reveal][data-reveal-from="right"]{ transform: translateX(64px); transition: opacity 0.9s, transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1); }
.js [data-reveal][data-reveal-from="left"]{ transform: translateX(-64px); transition: opacity 0.9s, transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1); }
.js [data-reveal].in{ opacity: 1; transform: none; }
.js [data-irow]{ opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.5s; }
.js .demo-on [data-irow]{ opacity: 1; transform: none; }
.js [data-ipill]{ opacity: 0; transform: scale(0.55); transition: opacity 0.35s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.js .pills-on [data-ipill]{ opacity: 1; transform: none; }
.js [data-ostep]{ opacity: 0.28; transition: opacity 0.5s; }
.js [data-ostep].step-on{ opacity: 1; }
.js [data-odot]{ background: rgb(220, 214, 201); transition: background 0.5s; }
.js [data-ostep].step-on [data-odot]{ background: rgb(167, 92, 41); }
@media (prefers-reduced-motion: reduce) {
*{ animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
.js [data-reveal]{ opacity: 1; transform: none; }
}
@media (max-width: 760px) {
[data-m~="stack"]{ display: flex !important; flex-direction: column !important; align-items: stretch !important; }
[data-m~="tight"]{ gap: 32px !important; }
[data-m~="row"]{ gap: 10px !important; }
[data-m~="steps"] > div{ border-right: none !important; padding: 24px 0px 8px !important; }
[data-m~="mhide"]{ display: none !important; }
[data-m~="h1"]{ font-size: clamp(38px, 11.5vw, 52px) !important; }
}
summary::-webkit-details-marker{ display: none; }
@media (max-width: 980px) {
[data-m~="navrow"]{ gap: 14px !important; min-height: 64px !important; }
[data-m~="navrow"] nav{ gap: 12px !important; flex-wrap: nowrap !important; padding: 0px !important; }
[data-m~="mnav"]{ display: none !important; }
[data-m~="burger"]{ display: block !important; }
[data-m~="navcta"]{ padding: 9px 16px !important; font-size: 14px !important; }
[data-m~="navlogo"] img{ width: 28px !important; height: 28px !important; }
[data-m~="navlogo"] span{ font-size: 16px !important; }
}
details summary::-webkit-details-marker{ display: none; }
details summary{ list-style: none; }
[data-plus]{ transition: transform 0.3s; transform-origin: center center; }
.js [data-vstep]{ opacity: 0.35; transition: opacity 0.55s, border-color 0.55s, background 0.55s; }
.js [data-vstep].step-on{ opacity: 1; border-color: rgb(90, 70, 48) !important; background: rgb(38, 35, 28) !important; }
.js [data-varr]{ opacity: 0.3; transition: opacity 0.55s, color 0.55s; }
.js [data-varr].step-on{ opacity: 1; color: rgb(217, 154, 95); }
details[open] [data-plus]{ transform: rotate(45deg); }
[data-lift]{ transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.35s; will-change: transform; }
[data-lift]:hover{ transform: translateY(-6px); }
[data-lift="light"]:hover{ box-shadow: rgba(28, 27, 23, 0.14) 0px 18px 36px -12px; }
.js [data-draw]{ stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(0.3, 0, 0.2, 1); }
.js .draw-in [data-draw]{ stroke-dashoffset: 0; }
.js [data-dot]{ opacity: 0; transition: opacity 0.5s 1.3s; }
.js .draw-in [data-dot]{ opacity: 1; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{ display: none; appearance: none; margin: 0px; }
input[type="number"]{ appearance: textfield; }
@media (prefers-reduced-motion: reduce) {
*{ animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
.js [data-reveal]{ opacity: 1; transform: none; }
.js [data-draw]{ stroke-dashoffset: 0; }
.js [data-dot]{ opacity: 1; }
}
[data-lift]{ transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.35s, border-color 0.35s; will-change: transform; }
[data-lift="light"]:hover{ box-shadow: rgba(28, 27, 23, 0.14) 0px 18px 36px -12px; border-color: rgb(201, 194, 177) !important; }
[data-lift="dark"]:hover{ box-shadow: rgba(0, 0, 0, 0.5) 0px 18px 36px -10px; border-color: rgb(90, 70, 48) !important; }
@media (prefers-reduced-motion: reduce) {
*{ animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
.js [data-reveal]{ opacity: 1; transform: none; }
[data-lift]:hover{ transform: none; }
}
input, textarea{ font-family: "Instrument Sans", sans-serif; font-size: 15.5px; color: rgb(28, 27, 23); background: rgb(244, 241, 235); border: 1px solid rgb(201, 194, 177); border-radius: 8px; padding: 13px 16px; width: 100%; box-sizing: border-box; outline: none; transition: border-color 0.25s, box-shadow 0.25s; }
input:focus, textarea:focus{ border-color: rgb(167, 92, 41); box-shadow: rgba(167, 92, 41, 0.14) 0px 0px 0px 3px; }
input::placeholder, textarea::placeholder{ color: rgb(162, 155, 139); }

/* --- toegevoegd bij de conversie naar statische HTML (21-8-2026) --- */
html{-webkit-text-size-adjust:100%}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px}
input:focus-visible,textarea:focus-visible{outline:2px solid #9A5325;outline-offset:2px}
summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media (max-width:980px){
  [data-m~="mnav"]{min-height:44px;display:flex;align-items:center}
  [data-m~="navcta"]{min-height:44px;display:inline-flex;align-items:center}
  details[data-m~="burger"] a{min-height:44px;display:flex;align-items:center}
  details[data-m~="burger"]>summary{width:44px!important;height:44px!important}
}
.zc-btn{font-family:'Instrument Sans',sans-serif;font-size:15px;font-weight:600;color:#54514A;
  background:#FBF9F5;border:1px solid #C9C2B1;border-radius:100px;padding:11px 26px;min-height:44px;
  cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.zc-btn:hover{border-color:#9A5325;color:#1C1B17}
.zc-btn[aria-pressed="true"]{background:#1C1B17;border-color:#1C1B17;color:#FBF9F5}
#zelfcheck-uitkomst{display:none}
#zelfcheck-uitkomst.zichtbaar{display:block}
#zelfcheck-uitkomst h3{margin:0 0 12px;font-family:'Newsreader',serif;font-weight:500;font-size:22px;line-height:1.25;letter-spacing:-0.01em;color:#1C1B17}
#zelfcheck-uitkomst p{margin:0 0 14px;font-size:16px;line-height:1.65;color:#54514A}
#zelfcheck-uitkomst p:last-child{margin-bottom:0}
#zelfcheck-uitkomst .btn{display:inline-flex;align-items:center;min-height:44px;background:#1C1B17;color:#FBF9F5;
  padding:12px 26px;border-radius:100px;font-weight:600;font-size:15px}
#zelfcheck-uitkomst .btn:hover{background:#38352D;color:#FBF9F5}

/* --- hover- en focusstijlen uit het ontwerp --- */
.h1:hover{color: rgb(28, 27, 23) !important;}
.h2:hover{background: rgb(126, 67, 25) !important; color: rgb(251, 249, 245) !important;}
.h3:hover{background: rgb(244, 241, 235) !important; color: rgb(28, 27, 23) !important;}
.h4:hover{background: rgb(56, 53, 45) !important; color: rgb(251, 249, 245) !important;}
.h5:hover{background: rgb(200, 118, 60) !important; color: rgb(251, 249, 245) !important;}
.h6:hover{border-color: rgb(244, 241, 235) !important; color: rgb(244, 241, 235) !important;}
.h7:hover{color: rgb(167, 92, 41) !important;}
.h8:hover{color: rgb(240, 181, 126) !important;}
.h9:focus{border-color: rgb(217, 154, 95) !important; outline: none !important;}
.h10:hover{color: rgb(217, 154, 95) !important;}
.h11:hover{color: rgb(244, 241, 235) !important;}
.h12:hover{background: rgb(56, 53, 45) !important;}