/* FRAMO kennisbanken, inhoudseditie 26 oktober 2026. Mobiele basis. */
:root{--framo-sticky-height:112px;--framo-sticky-top:0px;--kb-footer-height:calc(80px + env(safe-area-inset-bottom,0px))}
html{scroll-padding-top:calc(var(--framo-sticky-height) + var(--framo-sticky-top) + 16px);scroll-padding-bottom:calc(var(--kb-footer-height) + 16px)}
body{padding-bottom:var(--kb-footer-height)!important}
.framo-sticky-masthead{position:sticky;top:var(--framo-sticky-top);z-index:1001;isolation:isolate;width:100%;background:#fff;box-shadow:0 3px 16px rgb(0 0 0 / .08)}
.framo-sticky-masthead>.site-header{position:relative!important;top:auto!important;z-index:auto;transform:none;filter:none;backdrop-filter:none}
.framo-sticky-masthead .header-row,.framo-sticky-masthead .header-inner{min-width:0}
.framo-sticky-masthead .brand{min-width:0;overflow-wrap:anywhere}
.framo-sticky-masthead .topline .wrap{min-width:0;flex-wrap:wrap;gap:4px 12px}
.framo-sticky-masthead .topline span{white-space:normal}
.framo-sticky-masthead .framo-sticky-panel{position:fixed!important;top:calc(var(--framo-sticky-height) + var(--framo-sticky-top))!important;bottom:auto!important;left:0!important;right:0!important;width:100%!important;max-width:none!important;max-height:calc(100vh - var(--framo-sticky-height) - var(--framo-sticky-top) - var(--kb-footer-height) - 8px)!important;max-height:max(72px,calc(100dvh - var(--framo-sticky-height) - var(--framo-sticky-top) - var(--kb-footer-height) - 8px))!important;overflow-y:auto!important;overflow-x:hidden;overscroll-behavior:contain;background:#fff!important;color:var(--ink,#173c31);box-shadow:0 14px 24px rgb(0 0 0 / .16);z-index:5;box-sizing:border-box}
.framo-sticky-masthead .framo-sticky-panel a{min-height:44px}
.framo-sticky-masthead :is(button,summary,a):focus-visible{outline:2px solid currentColor;outline-offset:4px}
main [id],.content-body section{scroll-margin-top:calc(var(--framo-sticky-height) + var(--framo-sticky-top) + 16px)}
main h1,main h2,main h3{overflow-wrap:anywhere}
main,article,.content-body,.article-content,.article-grid>*,.article-layout>*{min-width:0}
input,select,textarea,button,[tabindex]{scroll-margin-bottom:calc(var(--kb-footer-height) + 16px)}
.skip,.skip-link{z-index:1002}
body .kb-sticky-footer{display:block;position:fixed!important;inset:auto 0 0;z-index:1000;box-sizing:border-box;background:#10372d;color:#fff;border-top:1px solid #2b6750;box-shadow:0 -4px 18px rgb(16 55 45 / .12);padding:8px max(0px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(0px,env(safe-area-inset-left,0px));margin:0}
body .kb-sticky-footer[hidden]{display:none!important}
body .kb-sticky-footer-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:8px;max-width:720px}
body .kb-sticky-footer a{display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px;padding:10px 6px;border:1px solid #6b9682;border-radius:9px;text-decoration:none;text-align:center;font-size:clamp(.78rem,2.8vw,.95rem);font-weight:700;line-height:1.25;overflow-wrap:anywhere;color:#fff;background:transparent}
body .kb-sticky-footer a:hover{background:#245c44}
body .kb-sticky-footer a:focus-visible{outline:3px solid #fff;outline-offset:2px}
body .kb-sticky-footer .kb-footer-shop{background:#2ecc71;color:#10372d;border-color:#2ecc71}
body .kb-sticky-footer .kb-footer-shop:hover{background:#6be09d}
.faq-block details{border-block-start:1px solid var(--line,#d9e4dd);background:#fff}
.faq-block details:last-child{border-bottom:1px solid var(--line,#d9e4dd)}
.faq-block summary{font-weight:650;line-height:1.5;padding:1rem .3rem;min-height:52px;cursor:pointer}
.faq-block details>p{padding:0 .4rem 1rem;margin:0}
.library-search{background:var(--wash,#f4f8f5);padding:1rem;border:1px solid var(--line,#d9e4dd);border-radius:.75rem}
.library-search label{display:block;font-weight:650;margin-bottom:.5rem}
.library-search input{width:100%;max-width:100%;min-height:48px;padding:.7rem;border:1px solid #6e8779;border-radius:.45rem;background:#fff;color:#163b2d;font-size:1rem}
.kb-product-media{background:#fff;border:1px solid var(--line,#d9e4dd);border-radius:1rem;padding:1rem;margin:1.5rem 0;max-width:600px}
.kb-product-media img{display:block;width:min(100%,480px);height:auto;margin:auto;object-fit:contain;background:#fff}
.kb-product-media figcaption{font-size:.8rem;line-height:1.5;color:#476452;margin-top:.75rem}
.material-compare{display:grid;gap:1rem}
.material-compare article{border:1px solid #ccded3;border-radius:1rem;padding:1.3rem;background:#fff;min-width:0}
.material-compare h3{font-size:1.15rem;margin:0 0 .7rem}
.material-compare p{margin:0 0 1rem}
.material-compare a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
/* Alle tabelkolommen blijven als gelabelde velden op smalle schermen leesbaar. */
table{max-width:100%}
@media(max-width:649px){
 .content-body table.kb-responsive-table{display:block;min-width:0;width:100%}
 .content-body table.kb-responsive-table thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .content-body table.kb-responsive-table tbody{display:block}
 .content-body table.kb-responsive-table tr{display:block;padding:.7rem 0;border-bottom:1px solid var(--line,#d9e4dd)}
 .content-body table.kb-responsive-table td,.content-body table.kb-responsive-table tbody th{display:block;width:100%;min-width:0;padding:.5rem .8rem;border:0;overflow-wrap:anywhere;background:transparent}
 .content-body table.kb-responsive-table [data-label]::before{content:attr(data-label);display:block;font-size:.74rem;font-weight:750;color:var(--accent,#175c3d);margin-bottom:.2rem}
 .content-body table.kb-responsive-table tbody th{font-weight:750}
 .content-body .table-wrap{max-width:100%;overflow-x:auto}
}
@media(min-width:760px){body .kb-sticky-footer-inner{gap:14px}body .kb-sticky-footer a{padding-inline:18px}.material-compare{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:820px){.article-grid>aside,.article-sidebar{top:calc(var(--framo-sticky-height) + var(--framo-sticky-top) + 16px)}}
@media(max-height:480px) and (orientation:landscape){.framo-sticky-masthead .topline{display:none}.framo-sticky-masthead .header-row,.framo-sticky-masthead .header-inner{min-height:56px;padding-block:.35rem}.framo-sticky-masthead .brand small{display:none}body .kb-sticky-footer{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}body .kb-sticky-footer a{min-height:44px;padding-block:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{body{padding-bottom:0!important}.kb-sticky-footer{display:none!important}.framo-sticky-masthead{position:static;box-shadow:none}html{scroll-padding:0}main [id],.content-body section{scroll-margin:0}.material-compare{display:block}.material-compare article{break-inside:avoid;margin-bottom:1rem}.kb-product-media{break-inside:avoid}}
