/lijsten uit de WYSIWYG-editor — behoud alinea-ritme, geen dubbele witruimte onder de laatste alinea. */ .nb-acc__a>p,.nb-tl__desc>p,.nb-tl__intro>p,.nb-fcard__desc>p,.nb-fcard__intro>p,.nb-guide__desc>p,.nb-guide__intro>p,.nb-hero__sub>p,.nb-rev__quote>p{margin:0 0 .6em} .nb-acc__a>:last-child,.nb-tl__desc>:last-child,.nb-tl__intro>:last-child,.nb-fcard__desc>:last-child,.nb-fcard__intro>:last-child,.nb-guide__desc>:last-child,.nb-guide__intro>:last-child,.nb-hero__sub>:last-child,.nb-rev__quote>:last-child{margin-bottom:0} .nb-acc__a ul,.nb-acc__a ol,.nb-tl__desc ul,.nb-tl__desc ol,.nb-fcard__desc ul,.nb-fcard__desc ol,.nb-guide__desc ul,.nb-guide__desc ol,.nb-hero__sub ul,.nb-hero__sub ol,.nb-rev__quote ul,.nb-rev__quote ol{margin:.3em 0 .6em;padding-left:1.4em} .nb-acc{max-width:880px;border-top:1px solid var(--nb-line)} .nb-acc__item{border-bottom:1px solid var(--nb-line)} .nb-acc__q{display:flex;align-items:center;gap:20px;padding:22px 4px;cursor:pointer;list-style:none} .nb-acc__q::-webkit-details-marker{display:none} .nb-acc__q::marker{content:""} .nb-acc__qt{flex:1;font-size:clamp(16px,1.7vw,20px);font-weight:600;letter-spacing:-0.015em;color:var(--nb-text-soft);transition:color .25s} .nb-acc__item[open] .nb-acc__qt{color:var(--nb-text)} .nb-acc__plus{width:28px;height:28px;border:1px solid var(--nb-line);border-radius:50%;display:grid;place-items:center;color:var(--nb-text-soft);flex-shrink:0;transition:transform .3s,background .3s} .nb-acc__item[open] .nb-acc__plus{background:var(--nb-accent);border-color:var(--nb-accent);color:var(--nb-bg);transform:rotate(45deg)} .nb-acc__a{padding:0 48px 24px 4px;font-size:15.5px;line-height:1.74;color:var(--nb-text-soft)} @media (max-width:899px){.nb-acc__a{padding-right:8px}} .nb-answer{max-width:74ch} .nb-answer__label{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-family:var(--nb-font-mono);font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--nb-accent)} .nb-answer__label::after{content:"";flex:1;height:1px;background:var(--nb-line)} .nb-answer__q{margin:0 0 12px;font-family:var(--nb-font-display);font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:-0.02em;line-height:1.2;text-wrap:balance} .nb-answer__a{margin:0;font-size:clamp(15px,1.3vw,17px);line-height:1.68;max-width:70ch;text-wrap:pretty} .nb-answer__list{counter-reset:nb-answer-item;margin:24px 0 0;padding:0;list-style:none;border-top:1px solid var(--nb-line);font-size:clamp(14px,1.2vw,16px);line-height:1.55;color:var(--nb-text-soft)} .nb-answer__list li{counter-increment:nb-answer-item;display:flex;gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--nb-line)} .nb-answer__list li::before{content:counter(nb-answer-item,decimal-leading-zero);flex-shrink:0;font-family:var(--nb-font-mono);font-size:13px;font-weight:700;color:var(--nb-accent)} .nb-answer__meta{margin:16px 0 0;font-size:13px;color:var(--nb-text-soft)} [class*="nb--pe-"]{ --pe-charcoal:var(--gb-charcoal,var(--brand-bg-base,#0A0908)); --pe-black:var(--gb-black,var(--brand-bg-surface,#141210)); --pe-coal:var(--gb-coal,var(--brand-bg-elevated,#161616)); --pe-ash:var(--gb-ash,color-mix(in srgb, var(--pe-cream) 8%, transparent)); --pe-ash-2:var(--gb-ash-2,color-mix(in srgb, var(--pe-cream) 14%, transparent)); --pe-ember:var(--gb-ember,var(--gb-flame,var(--brand-accent,#F39019))); --pe-ember-hot:var(--brand-primary-hover,#FF7D33);--pe-ember-glow:rgba(var(--brand-primary-rgb, 243,144,25),0.16); --pe-cream:var(--gb-cream,var(--brand-text-primary,#EEE7DB)); --pe-bone:var(--gb-bone,color-mix(in srgb, var(--pe-cream) 78%, transparent)); --pe-fog:var(--gb-fog,color-mix(in srgb, var(--pe-cream) 50%, transparent)); --pe-faint:var(--gb-faint,color-mix(in srgb, var(--pe-cream) 28%, transparent)); --pe-font-display:var(--font-display,var(--brand-font-heading,inherit)); --pe-font-body:var(--font-body,var(--brand-font-body,inherit)); --pe-font-mono:var(--font-mono,'JetBrains Mono',ui-monospace,monospace); --pe-ease:var(--brand-easing-default,cubic-bezier(.16,1,.3,1));--pe-maxw:1320px; padding:0;border-top:0; background:var(--pe-charcoal);color:var(--pe-cream);font-family:var(--pe-font-body);font-size:15px;line-height:1.6; } [class*="nb--pe-"]>.nb-container{max-width:none;padding:0} :where([class*="nb--pe-"]) *,:where([class*="nb--pe-"]) *::before,:where([class*="nb--pe-"]) *::after{box-sizing:border-box} :where([class*="nb--pe-"]) img{display:block;max-width:100%} :where([class*="nb--pe-"]) a{color:inherit;text-decoration:none} :where([class*="nb--pe-"]) button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0} :where([class*="nb--pe-"]) h2,:where([class*="nb--pe-"]) h3{margin:0;font-family:var(--pe-font-display);font-weight:700;letter-spacing:-0.025em;line-height:1} :where([class*="nb--pe-"]) ::selection{background:var(--pe-ember);color:var(--pe-charcoal)} .pe-wrap{max-width:var(--pe-maxw);margin:0 auto;padding:0 40px} .pe-eyebrow{font-family:var(--pe-font-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--pe-ember);display:inline-flex;align-items:center;gap:10px} .pe-sec-head{max-width:760px;margin-bottom:64px} .pe-sec-head .pe-eyebrow{margin-bottom:22px} .pe-sec-title{font-size:clamp(36px,4.6vw,68px);font-weight:700;letter-spacing:-0.03em;line-height:0.98;white-space:pre-line} .pe-sec-title em{color:var(--pe-ember);font-style:normal} .pe-sec-lead{margin-top:22px;font-size:17px;line-height:1.65;color:var(--pe-bone);max-width:560px} .pe-sect{padding:96px 0;border-top:1px solid var(--pe-ash)} .pe-sect--alt{background:var(--pe-black)} .pe-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--pe-font-mono);font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;padding:16px 26px;border-radius:3px;cursor:pointer;transition:all .4s var(--pe-ease);white-space:nowrap} .pe-btn--primary{background:var(--pe-ember);color:var(--pe-charcoal)} .pe-btn--primary:hover{background:var(--pe-ember-hot);box-shadow:0 0 36px var(--pe-ember-glow);transform:translateY(-1px)} .pe-btn--ghost{border:1px solid var(--pe-ash-2);color:var(--pe-cream)} .pe-btn--ghost:hover{border-color:var(--pe-ember);color:var(--pe-ember)} .pe-arr{display:inline-flex;transition:transform .4s var(--pe-ease)} .pe-btn:hover .pe-arr{transform:translateX(4px)} :where([class*="nb--pe-"]) .rv{opacity:0;transform:translateY(28px);transition:opacity var(--brand-duration-dramatic,.9s) var(--pe-ease),transform var(--brand-duration-dramatic,.9s) var(--pe-ease)} :where([class*="nb--pe-"]) .rv.in{opacity:1;transform:none} :where([class*="nb--pe-"]).no-js .rv,:where([class*="nb--pe-"]) .no-js .rv{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){:where([class*="nb--pe-"]) .rv{opacity:1!important;transform:none!important;transition:none}} @media (max-width:880px){ .pe-wrap{padding:0 22px} .pe-sect{padding:64px 0} .pe-sec-head{margin-bottom:40px} .pe-sec-title{font-size:clamp(30px,8.5vw,46px)} .pe-sec-lead{font-size:15.5px;margin-top:16px} } .pe-subnav-host{position:relative} /* z-index:40 = onder het globale mega-menu (bundle-header backdrop z-45 / paneel z-46), zodat het opengeklapte menu over deze (gepinde) balk valt i.p.v. andersom. */ .pe-tabs{background:color-mix(in srgb, var(--pe-charcoal) 86%, transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--pe-ash);border-bottom:1px solid var(--pe-ash);z-index:40} .pe-subnav-host.is-pinned .pe-tabs{position:fixed;top:var(--gb-headerh,73px);left:0;right:0} .pe-tabs-row{max-width:var(--pe-maxw);margin:0 auto;padding:0 40px;display:flex;gap:4px;overflow-x:auto} /* width:'contained' — de balk loopt niet van rand tot rand maar blijft een eigen element binnen de contentbreedte: gecentreerd, met een rand en afgeronde hoeken. Ook gepind blijft hij gecentreerd: left/right:0 spant de fixed balk over de viewport en de auto-marges centreren hem daarbinnen op zijn eigen breedte, wat zowel in de normale flow als in position:fixed werkt. ⚠ De verticale plek NIET met top: zetten. initPeSubnav zet bar.style.top inline op de gemeten headerhoogte, en inline wint van deze stylesheet. Het luchtje onder de header gaat daarom via margin-top, die ernaast bestaat. */ .pe-subnav-host--contained .pe-tabs{border:1px solid var(--pe-ash);border-radius:999px;max-width:var(--pe-maxw);margin:0 auto;width:calc(100% - 80px)} /* Gepind hangt de balk onder een site-header die zelf een schaduw kan hebben. Zonder ruimte valt die schaduw óver de balk en lijken de twee één vuile laag. De 16px zet ze los, en een eigen schaduw maakt van de balk een herkenbaar tweede vlak in plaats van een strook die de header-schaduw opvangt. */ .pe-subnav-host--contained.is-pinned .pe-tabs{left:0;right:0;margin:16px auto 0;box-shadow:var(--brand-shadow-md,0 6px 24px rgba(0,0,0,0.10))} .pe-subnav-host--contained .pe-tabs-row{padding:0 12px;justify-content:center} /* Geen dubbele lijn: de eerste pe-sectie hierna laat z'n bovenrand vallen. */ [data-pe-subnav-width="contained"] + .nb .pe-sect{border-top:0} @media (max-width:880px){.pe-subnav-host--contained .pe-tabs{width:calc(100% - 28px);border-radius:14px}.pe-subnav-host--contained .pe-tabs-row{justify-content:flex-start}} .pe-tabs-row::-webkit-scrollbar{height:0} .pe-tab{padding:18px 20px;font-family:var(--pe-font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--pe-fog);position:relative;transition:color .2s;background:none;border:none;cursor:pointer;white-space:nowrap} .pe-tab:hover{color:var(--pe-bone)} .pe-tab.is-active{color:var(--pe-cream)} .pe-tab.is-active::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:2px;background:var(--pe-ember)} .pe-tab-ix{color:var(--pe-ember);margin-right:8px} @media (max-width:880px){.pe-tabs-row{padding:0 14px}.pe-tab{padding:16px 13px}} .nb--pe-spec-sheet .nb-ssheet__grid{display:grid;grid-template-columns:1fr 0.8fr;gap:clamp(32px,5vw,80px);align-items:start} .nb--pe-spec-sheet .nb-ssheet__grid--single{grid-template-columns:1fr} .nb--pe-spec-sheet .nb-ssheet__eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--nb-font-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--nb-muted);margin-bottom:22px} .nb--pe-spec-sheet .nb-ssheet__h2{font-family:var(--nb-font-display);font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-0.02em;line-height:1.08;margin:0 0 40px;color:var(--nb-text)} .nb--pe-spec-sheet .nb-ssheet__section{margin-bottom:36px} .nb--pe-spec-sheet .nb-ssheet__section:last-child{margin-bottom:0} .nb--pe-spec-sheet .nb-ssheet__sh{font-family:var(--nb-font-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--nb-accent);margin:0 0 10px;font-weight:600} .nb--pe-spec-sheet .nb-ssheet__table ul{list-style:none;margin:0;padding:0} .nb--pe-spec-sheet .nb-ssheet__row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:14px 0;border-bottom:1px solid var(--nb-line)} .nb--pe-spec-sheet .nb-ssheet__row .k{display:inline-flex;align-items:center;gap:9px;color:var(--nb-text-soft);font-size:13px;letter-spacing:0.01em} .nb--pe-spec-sheet .nb-ssheet__row .v{font-family:var(--nb-font-mono);font-size:13px;color:var(--nb-text);text-align:right} .nb--pe-spec-sheet .nb-ssheet__ic{width:18px;height:18px;flex:0 0 auto;object-fit:contain;opacity:0.85} .nb--pe-spec-sheet .nb-ssheet__info{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid color-mix(in srgb,var(--nb-text) 28%,transparent);background:none;color:var(--nb-muted);font-family:var(--nb-font-mono);font-size:9px;line-height:1;cursor:pointer;padding:0;transition:color .2s,border-color .2s} .nb--pe-spec-sheet .nb-ssheet__info:hover{color:var(--nb-accent);border-color:var(--nb-accent)} .nb--pe-spec-sheet .nb-ssheet__img{position:sticky;top:100px;border:1px solid var(--nb-line);border-radius:6px;overflow:hidden;background:var(--nb-surface)} .nb--pe-spec-sheet .nb-ssheet__img img{width:100%;height:auto;display:block} .nb--pe-spec-sheet .nb-ssheet__stamp{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:2px;padding:7px 11px;border:1px solid color-mix(in srgb,var(--nb-accent) 45%,transparent);border-radius:2px;background:color-mix(in srgb,var(--nb-bg) 72%,transparent);backdrop-filter:blur(8px);font-family:var(--nb-font-mono);font-size:10px;letter-spacing:0.1em;color:var(--nb-text-soft);text-align:right} .nb--pe-spec-sheet .nb-ssheet__stamp span:first-child{color:var(--nb-accent)} @media (max-width:900px){ .nb--pe-spec-sheet .nb-ssheet__grid{grid-template-columns:1fr;gap:40px} .nb--pe-spec-sheet .nb-ssheet__img{position:static} } .nb--pe-description .nb-desc__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;margin:0 0 32px} .nb--pe-description .nb-desc__eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--nb-font-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--nb-text-soft);margin:0 0 12px} .nb--pe-description .nb-desc__title{font-family:var(--nb-font-display);font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-0.02em;line-height:1.08;margin:0} .nb--pe-description .nb-desc__lead{max-width:420px;font-size:15px;line-height:1.7;color:var(--nb-text-soft)} .nb--pe-description .nb-desc__lead>p{margin:0 0 12px} .nb--pe-description .nb-desc__lead>p:last-child{margin-bottom:0} .nb--pe-description .nb-desc__body{max-width:720px;font-size:16px;line-height:1.7;color:var(--nb-text)} .nb--pe-description .nb-desc__body--wide{max-width:none} /* Descendant-selectors, net als de vaste .pdp-desc-regels uit de bundle. Child-selectors (>) zouden strenger zijn dan wat er vandaag live staat: WooCommerce-geïmporteerde omschrijvingen wikkelen hun inhoud vaak in een