/* Stijl van de website: eigen opmaak (zie LEESMIJ.md). Kleuren en lettertypen
   als variabelen; breekpunten zoals de site ze altijd had: 1366, 1200, 1024 en 767 px. */
@font-face{font-family:byker;src:url(/fonts/byker-regular.woff2) format("woff2");font-weight:100 599;font-style:normal;font-display:swap}
@font-face{font-family:byker;src:url(/fonts/byker-bold.woff2) format("woff2");font-weight:600 799;font-style:normal;font-display:swap}
@font-face{font-family:byker;src:url(/fonts/byker-black.woff2) format("woff2");font-weight:800 900;font-style:normal;font-display:swap}
/* Deze Byker-bestanden zetten sierverbindingen (ct, sp, st, ch, Th ...) standaard aan; bij Adobe stonden die uit. */
html,html *{font-variant-ligatures:none!important;font-feature-settings:"liga" 0,"clig" 0,"dlig" 0,"hlig" 0,"calt" 0!important}
:root{--groen:#a5c35c;--donker:#20211c;--wit:#fff;--grijs:#69727d}
.schermlezer{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* breedte van de inhoud, 1280 / 1140 / 960 / 720 / 340 px */
.binnen{max-width:1280px;margin-left:auto;margin-right:auto}
@media (max-width:1366px){.binnen{max-width:1140px}}
@media (max-width:1200px){.binnen{max-width:960px}}
@media (max-width:1024px){.binnen{max-width:720px}}
@media (max-width:767px){.binnen{max-width:340px}}

/* ---------------------------------------------------------------------------------------------------- voet */
.voet{font-family:Asap,sans-serif}
.voet ul{list-style:none;margin:0;padding:0}
.voet-boven{position:relative;background:var(--donker);padding:100px 0 0}
.voet-vorm{position:absolute;top:-1px;left:0;width:100%;overflow:hidden;line-height:0}
.voet-vorm svg{position:relative;display:block;left:50%;width:calc(100% + 1.3px);height:120px;transform:translateX(-50%)}
.voet-vorm path{fill:var(--wit)}
.voet-binnen{display:flex}
.voet-merk{width:30%;padding:10px;text-align:center}
.voet-merk img{display:inline-block;width:275px;height:auto;margin-bottom:20px;vertical-align:middle}
.voet-merk h3{margin:0;font:800 2rem/1.3 byker,sans-serif;text-transform:uppercase;color:var(--wit)}
.voet-merk .x7-support{margin-top:25px}
.voet-kolommen{display:flex;flex-wrap:wrap;align-content:flex-start;width:70%;padding:50px 10px 10px}
.voet-kolommen>.voet-kolom{width:25%;padding:10px}
.voet-kolommen>.voet-kolom:nth-child(3){width:27.828%}
.voet-kolommen>.voet-kolom:nth-child(4){width:22.14%}
/* het kopje staat op de basislijn van een regel van 16/24 px, ook als de letters kleiner zijn (zoals in de oude voet) */
.voet-kop{display:block;margin-bottom:10px;font:400 16px/24px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}
.voet-kop>span{font:700 1rem/1 Asap,sans-serif;text-transform:uppercase;color:var(--groen)}
.voet-lijst{margin-bottom:30px!important}
.voet-lijst:last-child{margin-bottom:0!important}
.voet-lijst li,.voet-lijst a{display:flex;align-items:center}
.voet-lijst span{font:500 .9rem/24px Asap,sans-serif;color:var(--wit);transition:color .3s}
.voet-lijst a:hover span{color:var(--groen)}
.voet-lijst svg{flex-shrink:0;width:14px;height:14px;fill:var(--wit)}
.voet-lijst svg+span{padding-left:5px}
.voet-contact svg{width:16px;height:16px;margin-right:4px;fill:var(--groen)}
.voet-contact li:not(:last-child){padding-bottom:2.5px}
.voet-contact li:not(:first-child){margin-top:2.5px}
.voet-bol svg{width:6px;height:6px;margin-right:1.5px}
.voet-keurmerk{text-align:center}
.voet-keurmerk img{display:inline-block;width:170px;height:auto;vertical-align:middle}
/* past het niet op een regel, dan loopt de laatste knop door naar de volgende (zoals in de oude voet) */
.voet-sociaal{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 20px;width:95.976%;margin-top:10px}
.voet-sociaal a{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--groen);transition:background .3s}
.voet-sociaal svg{width:20px;height:20px;fill:var(--wit);transition:fill .3s}
.voet-sociaal a:hover{background:var(--wit)}
.voet-sociaal a:hover svg{fill:var(--groen)}
.voet-onder{padding-bottom:10px;background:var(--donker) url(/uploads/footer-visual.svg) no-repeat 0 0/cover}
.voet-onder>.binnen{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;align-content:flex-end;min-height:130px;padding:10px}
.voet-copyright{font:400 .9rem/1 Asap,sans-serif;color:var(--donker)}
.voet-copyright a{color:inherit}
/* zoals de oude voet: 40 px marge rechts, de lijst steekt 8 px buiten zijn vak */
.voet-links{display:flex;margin:0 32px 0 -8px!important}
.voet-links li{display:flex;margin:0 8px}
.voet-links a{font:400 .9rem/24px Asap,sans-serif;color:var(--donker);transition:color .1s}
.voet-links a:hover{color:var(--groen)}
@media (max-width:1366px){
  .voet-boven{padding-top:60px}
  .voet-vorm svg{height:80px}
  .voet-merk{width:25%}
  .voet-merk img{width:70%}
  .voet-merk h3{font-size:1.5rem}
  .voet-sociaal{gap:0 15px}
}
@media (max-width:1200px){
  .voet-vorm svg{height:60px}
  .voet-merk{width:20%}
  .voet-kolommen{width:80%}
  .voet-merk h3{margin-bottom:10px;font-size:1rem}
  .voet-merk .x7-support{margin-top:35px}
  .voet-kop>span{font-size:.9rem}
  .voet-sociaal a{width:36px;height:36px}
  .voet-sociaal svg{width:18px;height:18px}
}
@media (max-width:1024px){
  .voet-merk{width:30%}
  .voet-kolommen{width:70%}
  .voet-kolommen>.voet-kolom,.voet-kolommen>.voet-kolom:nth-child(n){width:50%}
  .voet-merk h3{font-size:min(1.5rem,2.6vw)}
}
@media (max-width:767px){
  .voet-binnen{flex-direction:column}
  .voet-merk,.voet-kolommen,.voet-kolommen>.voet-kolom,.voet-kolommen>.voet-kolom:nth-child(n){width:100%}
  .voet-merk img{width:min(275px,78vw);margin-bottom:20px}
  .voet-merk h3{font-size:min(2rem,8.9vw)}
  .voet-kolommen{padding-top:10px}
  .voet-sociaal{margin-top:30px}
  .voet-onder{padding:12px 0 10px;background:var(--wit)}
  .voet-onder>.binnen{display:block;min-height:0;padding:0 10px;text-align:center}
  .voet-copyright{font-size:.8rem;line-height:1.5}
  .voet-links{margin:0 0 0 -8px!important}
  .voet-links a{font-size:.8rem}
}

/* ---------------------------------------------------------------------------------------------------- knoppen */
.knoppen{display:flex;flex-wrap:wrap;align-items:center}
.knop{display:inline-block;margin:0 15px;padding:12px 36px;border:1px solid var(--groen);background:var(--groen);
  color:var(--wit);font:700 1rem/1 Asap,sans-serif;text-transform:uppercase;text-align:center;transform:skew(-35deg);transition:all .3s}
.knop>span{display:inline-block;transform:skew(35deg)}
.knop:hover,.knop:focus{background:var(--wit);color:var(--groen)}
.knop-rand{background:transparent;color:var(--groen)}
.knop-rand:hover,.knop-rand:focus{background:var(--groen);color:var(--wit)}
.knoppen-midden{justify-content:center}
@media (max-width:1366px){.knop{padding:8px 24px}.knop-rand{margin-top:10px}}
@media (max-width:767px){.knop{margin:0 15px 15px}.knop-rand{margin:0 15px}}

/* ---------------------------------------------------------------------------------------------------- inloopanimatie (site.js) */
[data-animatie]:not(.animated){visibility:hidden}
.animated.fadeInUp{animation:fadeInUp 2s both}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------------------------------------------- kopbeeld */
.kopbeeld{position:relative;display:flex;align-items:flex-end;min-height:240px;
  background:url(/uploads/24x7-achtergrond-pagetitle-4.jpg) no-repeat bottom center/cover}
.kopbeeld::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--groen) 70%,#00000024 100%);opacity:.8;mix-blend-mode:multiply}
.kopbeeld-vorm{position:absolute;bottom:-1px;left:0;width:100%;overflow:hidden;line-height:0;transform:rotate(180deg)}
.kopbeeld-vorm svg{position:relative;left:50%;display:block;width:calc(100% + 1.3px);height:78px;transform:translateX(-50%) rotateY(180deg)}
.kopbeeld-vorm path{fill:var(--wit)}
.kopbeeld>.binnen{position:relative;width:100%;padding:10px}
.kopbeeld h1,.kopbeeld .kopbeeld-titel{margin:0 0 50px;font:800 2.6rem/1.4 byker,sans-serif;text-transform:uppercase;color:var(--wit)}
.kopbeeld,.blok-995>.blok-element-d3e9604{margin-bottom:12px}
@media (max-width:1366px){.kopbeeld{min-height:220px}.kopbeeld h1,.kopbeeld-titel{font-size:2.4rem}}
@media (max-width:1200px){.kopbeeld{min-height:200px}.kopbeeld h1,.kopbeeld-titel{font-size:2rem}}
@media (max-width:1024px){.kopbeeld{min-height:180px}.kopbeeld h1,.kopbeeld-titel{font-size:1.8rem}}
@media (max-width:767px){.kopbeeld{min-height:100px}.kopbeeld h1,.kopbeeld-titel{font-size:1.3rem}}

/* ---------------------------------------------------------------------------------------------------- landingspagina */
.lp-twee{display:flex;align-items:center}
.lp-twee>*{width:50%;padding:10px}
.lp-boven{align-items:flex-start}
.lp-beeld{display:flex}
.lp-tekst{display:flow-root}
.lp-beeld-rechts{justify-content:flex-end}
.lp-beeld img{max-width:100%;height:auto}
/* h2 in hetzelfde tekstblok (intro, stappen): eigen marge; in het waarom-blok was de kop een los blok (+10 px) */
.lp-tekst>h2{margin:0 0 .7em}
/* leeg kopje direct na de blokkop: marges tellen op, zoals vroeger in een apart tekstblok */
/* 10 px onder het laatste tekstblok (alinea 10 px, lijst 24 px): opgeteld, zoals bij de losse blokken van vroeger */
.lp-tekst>.knoppen{margin-top:0;padding-top:10px}
/* ondertitel: inline tekst op een regel van 16/24 px in de systeemletter, zoals in de oude band */
/* belang: afbeelding rechts in de linkerkolom, tekst bovenaan (zoals de oude pagina's) */
/* stappen: kop en tekst 10 px naar binnen; tekstvakken 93,316% van de kolom met 10 px boven en 20 px onder */
/* onderaan 20 px, of de eigen marge als die groter is (een lijst: 24 px); de marges vielen vroeger samen */
@media (max-width:767px){
  .lp-twee{flex-direction:column}.lp-twee>*,.lp-twee>*:nth-child(n){width:100%}
}

/* ---------------------------------------------------------------------------------------------------- eigen pagina's */
/* .pg: de inhoud van een pagina in eigen opmaak (één blok in de flexcontainer van het thema) */
.pg{width:100%;font-family:Asap,sans-serif}
.titel{margin:0;font:800 2.8rem/1.3em byker,sans-serif;text-transform:uppercase;color:var(--groen)}
/* tweede knop direct naast (of onder) de eerste, zonder de extra ruimte van de landingspagina's */
.pg .knop-rand{margin-top:0}
/* kopbeeld van de gewone pagina's: regelhoogte in em (zoals vroeger; een getal rondt 1/64 px anders af) */
.pg .kopbeeld h1{line-height:1.4em}
/* lijst met groene pijltjes (de lijsten in Markdown binnen .pijlen) */
.pijlen ul{margin:0;padding:0;list-style:none}
.pijlen li{display:flex;align-items:center}
.pijlen li:not(:last-child){padding-bottom:2.5px}
.pijlen li+li{margin-top:2.5px}
/* paginanaam in de kopfoto als gewone tekst (de hoofdtitel staat dan in de pagina): zelfde opmaak als een h1 */
.blok-widget-heading p.blok-heading-title{line-height:1.4em;clear:both}
/* Standaard opsommingsteken van de huisstijl: het schuine driehoekje van pijl.svg, voor alle lijsten en vinkjes op de
   site. Hier ook voor de lijsten van blogs en de pagina's in eigen opmaak; "body" ervoor zodat het voor hun eigen opmaak gaat.
   Als teken: een <b> voor de tekst (kleur = tekstkleur van de <b>) of een ::before (groen). */
:root{--teken:url(/img/pijl.svg) center/contain no-repeat}
.main-content-post ul li::before,body .p24x7-p :is(.p-check,.p-feat li,.p-checks li,.g-check,.chk li)::before{content:"";width:12px;height:16px;background:var(--groen);-webkit-mask:var(--teken);mask:var(--teken)}
body .p24x7-p :is(.p-check,.p-mini span,.p-usps span,.p-trust,.m-li)>b:first-child{display:inline-block;overflow:hidden;flex:0 0 12px;width:12px;height:16px;font-size:0;vertical-align:-2px;margin:3px 10px 0 0;background:currentColor;-webkit-mask:var(--teken);mask:var(--teken)}
/* vinkjes van Font Awesome (menu, Jouw AI-paneel): ook het driehoekje, in de kleur van het icoon */
body i.fa-check::before{content:"";display:inline-block;width:10px;height:13px;background:currentColor;-webkit-mask:var(--teken);mask:var(--teken)}
/* gewone lijsten in productomschrijvingen, uitklapvakken en de privacy- en cookieteksten: ook het driehoekje */
body :is(.shop-product-details__short-description,.shop-Tabs-panel,.p-acc-body,.ck-document) ul{list-style:none;padding-left:0}
body :is(.shop-product-details__short-description,.shop-Tabs-panel,.p-acc-body,.ck-document) ul>li{position:relative;padding-left:24px;list-style:none}
body :is(.shop-product-details__short-description,.shop-Tabs-panel,.p-acc-body,.ck-document) ul>li::before{content:"";position:absolute;left:0;top:.25em;width:12px;height:16px;background:var(--groen);-webkit-mask:var(--teken);mask:var(--teken)}
.pijlen li::before{content:"";flex:none;width:16px;height:16px;margin-right:9px;background:var(--groen);
  -webkit-mask:url(/img/pijl.svg) center/contain no-repeat;mask:url(/img/pijl.svg) center/contain no-repeat}
/* kaders met een groene rand naast elkaar (werkplek- en serverbeheer): kop, lijst met pijltjes, knop */
.kaders{display:flex}
.kaders>div{flex:1 1 0;margin:10px;padding:10px;border:4px solid var(--groen)}
.kaders>div>p{margin:0 0 10px;font-weight:600;color:var(--groen)}
.kaders .pijlen ul,.kaders>.pijlen>ul{margin-bottom:30px}
/* YouTube-video met een afbeelding ervoor: de video laadt pas na een klik (site.js) */
.video{position:relative;aspect-ratio:16/9;overflow:hidden}
.video iframe{display:block;width:100%;height:100%;border:0;background:#000}
.video-start{position:absolute;inset:0;width:100%;padding:0;cursor:pointer}
/* knopopmaak van het thema (rand, achtergrondkleur) niet op de afbeelding */
.video .video-start,.video .video-start:hover,.video .video-start:focus{border:0;border-radius:0;background-color:transparent;
  background-position:center;background-size:cover;background-repeat:no-repeat}
.video-start svg{position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-53px 0 0 -50px;fill:var(--wit);opacity:.8}
@media (max-width:1366px){.titel{font-size:2.3rem}}
@media (max-width:1200px){.titel{font-size:1.8rem}}
@media (max-width:767px){.titel{font-size:1.5rem}.kaders{flex-direction:column}}
/* afspraakpagina van een medewerker (/dennis24x7ict/, /bart24x7ict/): foto of initialen, naam, uitleg en de agenda
   van leads.24x7.nl (de hoogte van de agenda regelt site.js) */
.afspraak{max-width:1040px;margin:48px auto 64px;padding:0 16px;color:var(--donker)}
.afspraak-kop{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.afspraak-foto{flex:none;display:flex;align-items:center;justify-content:center;width:76px;height:76px;border:3px solid var(--groen);
  border-radius:50%;object-fit:cover;background:var(--donker);color:var(--groen);font:800 24px byker,sans-serif}
.afspraak h1{margin:0 0 6px;font-size:30px;line-height:1.2;color:var(--donker)}
.afspraak-kop p{margin:0;font-size:15px;line-height:1.5;color:#55564e}
.afspraak-agenda{display:block;width:100%;min-height:640px;border:0}
@media (max-width:640px){.afspraak{margin:28px auto 40px}.afspraak h1{font-size:23px}.afspraak-foto{width:58px;height:58px;font-size:18px}}

/* ---------------------------------------------------------------------------------------------------- kop */
/* tijdelijke storingsmelding boven de kop (sjablonen/kop.html) */
.storing{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 16px;background:#f2b134;color:#2b2a26}
.storing-icoon{flex:none}
.storing-tekst,.kop .storing-tekst{margin:0;font:400 16px/22px Asap,sans-serif;color:#2b2a26;text-align:center}
.storing-tekst strong{font-weight:700}
.storing-tekst .storing-link{color:#2b2a26;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.storing-tekst .storing-link:hover{color:#000;text-decoration-thickness:2px}
@media (max-width:767px){.storing{padding:8px 12px;gap:8px}.storing-icoon{width:18px;height:18px}.kop .storing-tekst{font-size:13px;line-height:18px;text-align:left}}
.kop-balk{display:flex;align-items:center;justify-content:center;gap:10px;min-height:62px;padding:4px 10px;background:var(--donker)}
.kop-balk-icoon svg{display:block;width:32px;height:32px;margin:-7px 0 -5px}
.kop-balk-tekst,.kop .kop-balk-tekst{margin:0;font:400 17px/24px Asap,sans-serif;color:var(--groen)}
.kop-balk-tekst a{color:var(--groen)}
.kop-hoofd{position:relative;z-index:99;display:flex;align-items:flex-start;min-height:120px;padding:10px;background:var(--wit);box-shadow:0 0 2px 0 rgba(0,0,0,.5)}
.kop-binnen{display:flex;align-items:center;width:100%;max-width:1280px;margin:0 auto}
/* logo-vak 20% en de rest 100%: samen te breed, dus beide krimpen naar verhouding (zoals de oude kop) */
.kop-logo{flex:0 1 20%;display:flex;min-width:0;margin-right:10px}
.kop-logo img{width:200px;max-width:100%;height:auto}
.kop-rechts{flex:0 1 100%;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.kop-knoppen{display:flex;justify-content:flex-end;gap:10px}
/* elk vak mag krimpen, de knop zelf niet verder dan zijn langste woord (zo brak de tekst ook in de oude kop af) */
.kop-knop-vak{display:flex;align-items:flex-start;min-width:0}
.kop-knop{display:inline-block;margin-right:20px;padding:12px 16px;border:1px solid var(--groen);background:var(--groen);color:var(--wit);
  font:700 16px/1 Asap,sans-serif;text-transform:uppercase;text-align:center;transform:skew(-35deg);transition:all .3s}
.kop-knop>span{display:inline-block;transform:skew(35deg)}
.kop-knop:hover,.kop-knop:focus{background:var(--wit);color:var(--groen)}
.kop-knop-rand{background:var(--wit);color:var(--groen)}
.kop-knop-rand:hover,.kop-knop-rand:focus{background:var(--groen);color:var(--wit)}
.menu{display:flex;justify-content:flex-end}
/* .kop ervoor: de knopstijl van de site (groen vlak) mag hier niet gelden */
.kop .menu-knop,.kop .menu-knop:hover,.kop .menu-knop:focus,.kop .menu-knop:active{display:none;width:34px;height:34px;padding:4px;border:0;border-radius:0;
  background:none;box-shadow:none;color:#1f2124;cursor:pointer;-webkit-tap-highlight-color:transparent}
.menu-knop svg{display:block;width:26px;height:26px;fill:#1f2124}
.menu-knop .menu-knop-dicht,.menu-knop[aria-expanded=true] .menu-knop-open{display:none}
.menu-knop[aria-expanded=true] .menu-knop-dicht{display:block}
.menu-lijst{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:30px;margin:0;padding:0;list-style:none}
.menu-item{display:flex;align-items:center}
.menu-link{display:flex;align-items:center;font:600 1rem/24px Asap,sans-serif;color:#1f2124;white-space:nowrap;transition:color .3s}
.menu-link:hover,.menu-link.is-actief,.heeft-paneel:hover>.menu-link{color:var(--groen)}
.menu-icoon{display:flex;margin-right:5px}
.menu-icoon svg{width:16px;height:16px;fill:currentColor}
.menu-icoon .icon-inactive~*,.menu-icoon .icon-active{display:none}
.kop .menu-pijl,.kop .menu-pijl:hover,.kop .menu-pijl:focus{display:flex;align-items:center;height:24px;margin-left:5px;padding:0;border:0;border-radius:0;
  background:none;box-shadow:none;color:#1f2124;cursor:pointer}
.menu-pijl svg{width:16px;height:16px;fill:currentColor}
.heeft-paneel:hover .menu-pijl svg,.heeft-paneel:focus-within .menu-pijl svg,.heeft-paneel.open .menu-pijl svg{transform:rotate(180deg)}
.alleen-mobiel{display:none}
/* uitklappaneel: onder de kopbalk, over de volle breedte; open bij aanwijzen, toetsenbordfocus of een tik op de pijl */
.menu-paneel{position:absolute;top:100%;left:0;right:0;z-index:99;display:none;max-width:1280px;margin:0 auto;padding:0;
  justify-content:flex-end;animation:paneelIn .4s;pointer-events:none}
/* alleen het zichtbare paneel houdt het menu open, niet de lege ruimte ernaast in de houder */
.menu-paneel>*{pointer-events:auto}
/* de grote panelen (Oplossingen, Jouw AI): 85% van de kopbreedte, net als in de oude kop; tot 1366 px de volle breedte */
.menu-paneel-breed>div{flex:0 0 auto;width:calc(83.7199% - 20px);margin:1px calc(1px + 1.2801%) 0 0}
.heeft-paneel:hover>.menu-paneel,.heeft-paneel:focus-within>.menu-paneel,.heeft-paneel.open>.menu-paneel{display:flex}
.heeft-paneel>.menu-link{position:relative}
.heeft-paneel>.menu-link::after{content:"";position:absolute;left:-15px;right:-30px;top:100%;height:40px}
@keyframes paneelIn{from{opacity:0}to{opacity:1}}
.menu-contact{box-sizing:border-box;width:175px;margin:0 75px 0 0;padding:10px 20px;list-style:none;background:var(--wit)}
.menu-contact a{display:flex;align-items:center;color:#20211c;font:400 1rem/24px Asap,sans-serif}
.menu-contact a>span{padding-left:5px}
.menu-contact a:hover{color:var(--groen)}
.menu-contact li:not(:last-child){padding-bottom:2.5px}.menu-contact li:not(:first-child){margin-top:2.5px}
.menu-contact svg{width:14px;height:14px;margin-right:3.5px;fill:var(--groen)}
.m24-holder{position:absolute;top:0;left:0;width:0;height:0}
@media (max-width:1366px){.kop-binnen{max-width:1140px}.menu-paneel{max-width:1140px}
  .menu-paneel.menu-paneel-breed{max-width:none}.menu-paneel-breed>div{width:calc(98.494% - 20px);margin:-2px calc(1px + 1.506%) 0 0}
  .menu-contact{margin-top:-3px}}
@media (max-width:1200px){
  .kop-hoofd{min-height:110px}.kop-binnen{max-width:960px}
  .kop-logo,.kop-rechts{flex:1 1 0}.kop-logo img{width:30%}
  .kop-knop{padding:6px 12px;font-size:.9rem;line-height:1}
  .menu-lijst{display:none}.kop .menu-knop,.kop .menu-knop:hover,.kop .menu-knop:focus,.kop .menu-knop:active{display:block}
}
@media (max-width:1024px){
  .kop-hoofd{min-height:83px}.kop-binnen{max-width:720px}.kop-logo img{width:32%}
  .kop-rechts{flex-direction:row;justify-content:space-between;align-items:center}
}
/* tablet: het vak met de menuknop is 80 px en krimpt mee met de knoppen (zoals de oude kop) */
@media (min-width:768px) and (max-width:1024px){.kop-knoppen{flex:0 1 100%;min-width:0}.menu{flex:0 1 80px}}
@media (max-width:767px){
  .kop-balk{min-height:42px;padding:4px 15px}.kop-balk-icoon{display:none}
  .kop .kop-balk-tekst{padding-right:4px;font-size:10px;text-align:center}
  .kop-hoofd{min-height:75px}.kop-binnen{max-width:none}
  /* zoals de oude kop: logo 33%, rechts 66% met de menuknop in een gecentreerd blok van 66% */
  .kop-logo{flex:0 0 33%;margin-right:0}.kop-logo img{width:100%}
  .kop-knoppen{display:none}.kop-rechts{flex:0 0 66%;justify-content:center}.menu{width:66%;margin-top:10px}
}

/* losse pop-up met een formulier (NIS2-folder), zie js/site.js */
.los-popup{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(32,33,28,.75)}
.los-popup[hidden]{display:none}
.los-popup-venster{position:relative;width:100%;max-width:620px;max-height:92vh;overflow:auto;background:#fff;font-family:"Asap",sans-serif}
.los-popup-venster .p-form-card{border:0;border-radius:0;padding:44px 36px 30px}
.los-popup-venster h2{text-align:center;margin-bottom:12px;font-family:"Byker","Asap",sans-serif;font-weight:800}
.los-popup-venster .los-popup-intro{text-align:center;margin-bottom:24px}
.los-popup-sluit{position:absolute;top:0;right:0;z-index:1;width:44px;height:44px;padding:0;border:0;border-radius:0;background:#20211c;color:#fff;font-size:26px;line-height:44px;cursor:pointer}
.los-popup-sluit:hover,.los-popup-sluit:focus{background:#a5c35c;color:#fff}
body.los-popup-open{overflow:hidden}
@media (max-width:767px){.los-popup-venster .p-form-card{padding:48px 20px 24px}}

/* samensteller op de productpagina's (samensteller.php, js/site.js): alle keuzes, directe prijs en bestellen */
.sam{width:100%;font-family:Asap,sans-serif;color:var(--donker);text-align:left}
.sam *,.sam *::before,.sam *::after{box-sizing:border-box}
.sam-raster{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}
.sam-melding{position:relative;margin:0 0 24px;padding:14px 18px 14px 26px;background:#f3f7ea;font-size:15px;line-height:1.5}
.sam-melding::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--groen);transform:skew(-12deg);transform-origin:top}
.sam-melding-fout{background:#fbeceb}.sam-melding-fout::before{background:#c0392b}
.sam-uitleg{margin:-6px 0 18px;color:var(--grijs);font-size:14px}
.sam-groep{margin:0 0 22px;padding:0;border:0;min-width:0}
.sam-groep legend{display:flex;align-items:baseline;gap:10px;width:100%;padding:0 0 8px;margin-bottom:10px;border-bottom:2px solid var(--donker)}
.sam-groep-titel{font-family:byker,Asap,sans-serif;font-weight:700;font-size:19px}
.sam-groep-label{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs)}
.sam-optie{position:relative;display:grid;grid-template-columns:22px auto minmax(0,1fr) auto auto;align-items:center;gap:14px;margin:0 0 8px;padding:12px 16px;
  background:#fff;border:1px solid #dfe2d8;cursor:pointer;transition:border-color .15s,background .15s}
.sam-optie:hover{border-color:var(--groen)}
.sam-optie.is-gekozen{border-color:var(--groen);background:#f6f9ef;box-shadow:inset 4px 0 0 var(--groen)}
.sam-optie.is-vast,.sam-groep-product .sam-optie{cursor:default}
.sam-groep-product .sam-optie{grid-template-columns:22px minmax(0,1fr) auto auto;background:var(--donker);border-color:var(--donker);color:#fff;box-shadow:inset 4px 0 0 var(--groen)}
.sam-groep-product .sam-sub{color:#c9ccc2}
.sam-optie-geen{grid-template-columns:22px minmax(0,1fr)}
.sam-optie>input[type=checkbox],.sam-optie>input[type=radio]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sam-optie>input:focus-visible~.sam-vink{outline:2px solid var(--donker);outline-offset:3px}
.sam-vink{position:relative;width:20px;height:20px;border:2px solid #b8bdb0;background:#fff;transform:skew(-12deg)}
.sam-optie.is-gekozen .sam-vink{border-color:var(--groen);background:var(--groen)}
.sam-optie.is-gekozen .sam-vink::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:skew(12deg) rotate(45deg)}
.sam-foto{width:56px;height:56px;object-fit:contain;background:#fff}
.sam-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.sam-naam{font-weight:700;font-size:15px;line-height:1.3;cursor:inherit}
.sam-sub{font-size:13px;color:var(--grijs);line-height:1.35}
.sam-meer,.sam-inbegrepen{position:relative;z-index:1;align-self:flex-start;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--groen)}
.sam-meer:hover{text-decoration:underline}
.sam-prijs{font-weight:700;font-size:15px;white-space:nowrap;text-align:right}
.sam-prijs small{display:block;font-weight:400;font-size:11px;color:var(--grijs)}
.sam-groep-product .sam-prijs small{color:#c9ccc2}
.sam-aantal{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--grijs)}
.sam-groep-product .sam-aantal{color:#c9ccc2}
.sam-aantal input{width:64px;padding:6px 4px;border:1px solid #c9ccc2;border-radius:0;background:#fff;color:var(--donker);font:700 15px Asap,sans-serif;text-align:center}
.sam-aantal input:disabled{opacity:.4}
.sam-overzicht{position:sticky;top:110px}
.sam-kader{position:relative;padding:26px 24px 22px;background:#fff;border:2px solid var(--donker)}
.sam-kader::before{content:"";position:absolute;top:-2px;left:22px;width:90px;height:8px;background:var(--groen);transform:skew(-35deg)}
.sam-kop{margin:0 0 14px;font-family:byker,Asap,sans-serif;font-weight:800;font-size:22px;line-height:1.2}
.sam-regels{margin:0 0 14px;padding:0;list-style:none;font-size:14px}
.sam-regels li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed #dfe2d8}
.sam-regels li span:last-child{white-space:nowrap;font-weight:700}
.sam-totaal{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700;font-size:16px}
.sam-totaal small{font-weight:400;color:var(--grijs)}
.sam-totaal strong{font-family:byker,Asap,sans-serif;font-size:26px;color:var(--groen)}
.sam-incl{margin:2px 0 18px;text-align:right;font-size:13px;color:var(--grijs)}
.sam-gegevens{padding-top:16px;border-top:2px solid var(--donker)}
.sam-gegevens h4{margin:0 0 10px;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.sam-veld{margin-bottom:10px}
.sam-veld label{display:block;margin-bottom:3px;font-size:13px;font-weight:700}
.sam-veld input,.sam-veld textarea{width:100%;padding:9px 10px;border:1px solid #c9ccc2;border-radius:0;background:#fff;font:15px Asap,sans-serif;color:var(--donker)}
.sam-veld input:focus,.sam-veld textarea:focus,.sam-aantal input:focus{outline:2px solid var(--groen);outline-offset:0;border-color:var(--groen)}
.sam-veld.heeft-fout input{border-color:#c0392b}
.sam-fout{display:block;margin-top:3px;font-size:13px;color:#c0392b}
.sam-lok{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sam .sam-knop{display:block;width:calc(100% - 24px);margin:16px 12px 12px;padding:14px 20px;font:700 15px Asap,sans-serif;text-transform:uppercase;cursor:pointer}
.sam-klein{margin:0;font-size:12px;line-height:1.5;color:var(--grijs)}
@media (max-width:1024px){.sam-raster{grid-template-columns:1fr}.sam-overzicht{position:static}}
/* samensteller naast het product: links foto en omschrijving, rechts de keuzes met overzicht en bestellen eronder */
.sam-naast>.blok-container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.sam-links{min-width:0}
.sam-links>.blok-column{width:100% !important;max-width:100%}
.sam-links .blok-element-populated{padding-left:0;padding-right:0}
.sam-rechts{min-width:0;padding:10px 0}
.sam-hoofdkop{margin:0 0 18px;font:700 1.6rem/1.25 byker,Asap,sans-serif;color:var(--donker)}
.sam-rechts .sam-raster{grid-template-columns:1fr;gap:20px}
.sam-rechts .sam-overzicht{position:static}
.sam-klaar .sam-kader{padding:36px 32px 30px;font-size:16px;line-height:1.6}
.sam-klaar .sam-kader p{margin:0 0 12px}
.sam-klaar-vink{display:block;flex:none;position:relative;width:44px;height:44px;margin:0;background:var(--groen);transform:skew(-12deg)}
.sam-klaar-vink::after{content:"";position:absolute;left:16px;top:8px;width:10px;height:20px;border:solid #fff;border-width:0 3px 3px 0;transform:skew(12deg) rotate(45deg)}
.sam-klaar-knoppen{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.sam-klaar-knoppen .knop{margin:0 0 0 12px}
@media (max-width:1024px){.sam-naast>.blok-container{grid-template-columns:1fr;gap:12px}}

@media (max-width:767px){
  .sam-optie{grid-template-columns:22px minmax(0,1fr) auto;gap:10px 12px;padding:12px}
  .sam-foto{display:none}
  .sam-optie .sam-aantal{grid-column:2/-1;flex-direction:row;justify-content:flex-start;gap:8px}
  .sam-groep-product .sam-optie{grid-template-columns:22px minmax(0,1fr) auto}
  .sam-groep-legend,.sam-groep legend{flex-wrap:wrap}
  .sam-kader{padding:24px 16px 18px}
}

/* webshop: productnaam en prijs boven de foto's, bestelvak niet onder de vaste kop na versturen */
#samensteller,#bestellen{scroll-margin-top:145px}
.sam-product-kop{padding:10px 0 18px;margin-bottom:18px;border-bottom:2px solid var(--donker)}
.sam-product-kop .product_title{margin:0;font:800 2rem/1.15 byker,Asap,sans-serif;color:var(--donker)}
.sam-product-kop .price{margin:10px 0 0;font:700 1.35rem/1.2 byker,Asap,sans-serif;color:var(--groen)}
.sam-product-kop .price small{font:400 13px Asap,sans-serif;color:var(--grijs)}
.sam-overzicht .sam-melding{margin:0 0 14px}
@media (max-width:767px){.kopbeeld-webshop{min-height:120px}.kopbeeld-webshop .kopbeeld-vorm svg{height:36px}.kopbeeld-webshop .kopbeeld-titel{margin-bottom:34px}.sam-product-kop .product_title{font-size:1.5rem}#samensteller,#bestellen{scroll-margin-top:100px}}
/* kleine foto's onder de productfoto: altijd vier naast elkaar (de vierde viel los op een eigen regel) */
.sam-links .flex-control-thumbs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sam-links .flex-control-thumbs li{width:auto!important;margin:0!important}
.sam-links .flex-control-thumbs img{width:100%;height:auto}
/* prijzen in één kolom: een optie zonder aantalvak krijgt een lege plek waar dat vak anders staat */
@media (min-width:768px){.sam-optie:not(.sam-optie-geen):not(:has(.sam-aantal))::after{content:"";width:64px}}
/* het vinkvakje laat de klik door naar het (onzichtbare) aanvinkveld eronder; anders werkte klikken op het vakje zelf niet */
.sam-optie .sam-vink{pointer-events:none}
/* beschrijving van het product in de linkerkolom, onder de foto's */
.sam-beschrijving{margin-top:28px;padding-top:22px;border-top:2px solid var(--donker);font-size:16px;line-height:1.65}
.sam-beschrijving-kop{margin:0 0 12px;font:800 1.4rem/1.2 byker,Asap,sans-serif;color:var(--donker)}
.sam-beschrijving p{margin:0 0 12px}
.sam-beschrijving ul{margin:0 0 12px;padding-left:20px}
/* bedankt na een bestelling: zelfde kader als "Jouw bestelling", met de bestelling erin */
.sam-klaar-kop{display:flex;align-items:center;gap:18px;margin:0 0 16px}
.sam-klaar-kop .sam-kop{margin:0;font:800 1.6rem/1.2 byker,Asap,sans-serif;color:var(--donker)}
.sam-klaar-sub{margin:22px 0 8px;font:700 13px/1.2 Asap,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--donker)}
.sam-klaar-verder{margin-top:18px!important;padding-top:16px;border-top:1px solid #dfe2d8}
.sam-knop.is-bezig{opacity:.75;cursor:progress}
/* telefoon: productnaam bovenin het kopbeeld, op dezelfde hoogte als bij de categorieën; lange namen iets kleiner */
@media (max-width:767px){.kopbeeld-webshop{align-items:flex-start;min-height:118px}.kopbeeld-webshop>.binnen{padding-top:16px}.kopbeeld-webshop .kopbeeld-titel{font-size:26px;line-height:1.2;margin-bottom:46px}}
/* Seven (onze eigen AI agent) en de X van het logo als achtergrond, alleen waar ruimte is. .x-merk op een licht vlak:
   de X gecentreerd erachter (zoals de oude site); op een donker vlak een lichte X rechts naast de kop. .met-seven: Seven
   rechtsboven in het vlak; op een AI-kaart (icoon p-i-ai) in een donker vlak staat hij vanzelf bovenop de kaart. */
@media (min-width:768px){body .p24x7-p .x-merk{background:url(/uploads/X-achtergrond-watermerk.svg) no-repeat center/contain}}
@media (min-width:1200px){
body .p24x7-p .p-section-dark.x-merk{background:#20211c url(/img/x-merk-donker.svg) no-repeat right max(24px,calc(50vw - 580px)) top 64px/auto 320px}
body .p24x7-p .met-seven,body .p24x7-p .p-card-dark:has(.p-i-ai){position:relative}
body .p24x7-p :is(.met-seven,.p-card-dark:has(.p-i-ai))::after{content:"";position:absolute;right:24px;top:-14px;width:170px;height:240px;background:url(/uploads/seven-ai-agent.webp) center bottom/contain no-repeat;pointer-events:none}
body .p24x7-p .p-card-dark:has(.p-i-ai)::after{right:16px;top:auto;bottom:calc(100% - 4px);width:92px;height:130px}
}
/* Webshop: menu met de productcategorieën naast de producten, in de stijl van het menu Oplossingen (geen submenu's) */
.shopmenu{padding:22px 20px 16px;background:#f7f8f4;border:1px solid #e6e8df;border-radius:10px}
.shopmenu .shopmenu-kop{margin:0 0 12px;font:700 13px/18px Asap,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--donker)}
.shopmenu .shopmenu-kop::after{content:"";display:block;width:57px;height:3px;margin-top:8px;background:var(--groen)}
.shopmenu ul{list-style:none;margin:0;padding:0}
.shopmenu li{margin:0;padding:0}
.shopmenu a{display:flex;align-items:center;gap:12px;margin:2px -10px 0;padding:10px;border-radius:6px;font:700 14px/20px Asap,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--donker);text-decoration:none;transition:background .15s,color .15s,padding-left .18s}
.shopmenu a i{flex:none;width:20px;font-size:15px;text-align:center;color:var(--groen)}
.shopmenu a:hover{padding-left:16px;background:#eef2e4;color:#7d9b3d}
.shopmenu a.is-actief{background:var(--donker);color:#fff}
/* Zuinige stand (html.licht, zie site.js): zonder grafische kaart, bijv. op een terminalserver, blijft alles bewegen,
   maar in stapjes (ongeveer 12 per seconde in plaats van 60), zodat processor en verbinding het bijhouden. De draaiende
   gloedrand op de portalpagina regelt zijn eigen tempo (portalscript). */
html.licht .p24x7-p :is(.hero,.sec.donker)::before{animation-timing-function:steps(216)!important}
html.licht .p24x7-p .hero-beeld,html.licht .jmm-hero>.jmm-beeld{animation-timing-function:steps(192)!important}
html.licht .p24x7-p .prompt{animation-timing-function:steps(72)!important}
html.licht .p24x7-p .gloed::before{animation:none!important}
html.licht .p24x7-p .gloed::after{animation:gloed-adem 2.5s steps(30) infinite!important}
html.licht .p24x7-p .x7ai .pw::before{animation-timing-function:steps(60)!important}
html.licht .p24x7-p .x7aicard::before,html.licht .jmm .jai-veldrand{animation-timing-function:steps(42)!important}
html.licht .jmm-hero::before,html.licht .jmm-hero::after{animation-timing-function:steps(96)!important}
html.licht dialog::backdrop{backdrop-filter:none!important}

/* Cookiemelding: de letter van de site; op de telefoon compact, met de twee keuzes naast elkaar */
.ck-cookiebanner,.ck-cookiebanner .ck-btn{font-family:Asap,sans-serif}
@media (max-width:767px){
.ck-cookiebanner{padding:12px 16px!important;grid-gap:8px!important;grid-row-gap:8px!important;border-radius:12px 12px 0 0}
.ck-cookiebanner .ck-message{font-size:13px;line-height:1.45;margin:0}
.ck-cookiebanner .ck-body{max-height:28vh}
.ck-cookiebanner .ck-buttons{flex-direction:row;flex-wrap:wrap;gap:8px}
.ck-cookiebanner .ck-buttons .ck-btn{flex:1 1 40%;width:auto;min-height:40px;padding:8px}
.ck-cookiebanner .ck-buttons .ck-btn.ck-view-preferences{flex-basis:100%;min-height:0;padding:2px;background:none;border:0;text-decoration:underline}
}

/* Kleine groene tekst op wit (links in blogs, onderwerpen, "Lees artikel"): donkerder groen, contrast 4,6:1 */
.main-content-post a,.listing-item .post-category span,.single-post .related-post .content-item::after,.single-post .related-post .readmore-blog span{color:#5f7f25}