@font-face{font-family:'Funnel Sans';font-style:normal;font-weight:400;font-display:swap;src:url(./eed1093105ea5e04.woff2) format('woff2')}
@font-face{font-family:'Funnel Sans';font-style:normal;font-weight:500;font-display:swap;src:url(./9346c01625c2afc3.woff2) format('woff2')}
@font-face{font-family:'Funnel Sans';font-style:normal;font-weight:600;font-display:swap;src:url(./eef8f3bf8a9912de.woff2) format('woff2')}
@font-face{font-family:'Funnel Sans';font-style:normal;font-weight:700;font-display:swap;src:url(./e825260250551b96.woff2) format('woff2')}
@font-face{font-family:'Funnel Display';font-style:normal;font-weight:700;font-display:swap;src:url(./ddd29aac511233a9.woff2) format('woff2')}
@font-face{font-family:'Funnel Display';font-style:normal;font-weight:800;font-display:swap;src:url(./76d9900b48ce832f.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(./215a93c696f44203.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(./3787a5a419171630.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(./08949f728dc52d52.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(./01d285447409c8a5.woff2) format('woff2')}

:root{
--color-steel-ink:#002429;--color-deep-steel:#001a1e;--color-steel-mid:#09383f;--color-paper:#fff;
--color-fog:#eaf4f5;--color-mist:#d6e6e9;--color-hairline:#bed4d8;
--color-slate:#396269;--color-pewter:#1d4c53;
--color-signal:#008b93;--color-signal-light:#89d3d9;
--font-display:"Funnel Display","Funnel Sans",ui-sans-serif,system-ui,sans-serif;
--font-sans:"Funnel Sans",Inter,ui-sans-serif,system-ui,sans-serif;
--font-label:"Barlow Condensed","Archivo Narrow",ui-sans-serif,system-ui,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
--text-micro:13px;--text-label:15px;--text-body-s:16px;--text-body:18px;--text-body-l:21px;
--text-heading-s:24px;--text-heading:32px;--text-heading-m:40px;--text-heading-l:56px;
--text-display:80px;
--space-4:4px;--space-8:8px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;
--space-32:32px;--space-40:40px;--space-48:48px;--space-64:64px;--space-80:80px;
--radius-control:4px;--radius-card:8px;--radius-pill:9999px;
--page-max-width:1280px;--measure:68ch;--measure-kop:22ch;--measure-kop-xl:16ch;
--section-gap:80px;--gutter:clamp(20px,4vw,40px);
color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-paper);color:var(--color-steel-ink);
font-family:var(--font-sans);font-size:var(--text-body);line-height:1.55;
-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
p{margin:0 0 var(--space-16)}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:700;line-height:1.1}
h1{font-size:clamp(40px,6vw,var(--text-display));letter-spacing:-.025em;max-width:var(--measure-kop-xl);margin-bottom:var(--space-20)}
h2{font-size:clamp(32px,4.4vw,var(--text-heading-l));letter-spacing:-.02em;max-width:var(--measure-kop);margin-bottom:var(--space-20)}
h3{font-size:var(--text-heading);letter-spacing:-.015em;line-height:1.15}
:focus-visible{outline:3px solid var(--color-signal);outline-offset:2px}

.wrap{max-width:var(--page-max-width);margin-inline:auto;padding-inline:var(--gutter)}
.tekst{max-width:var(--measure)}
/* tekst met een klein beeld ernaast */
.tweeluik{display:grid;gap:var(--space-32);align-items:start}
@media(min-width:56rem){
  .tweeluik{grid-template-columns:260px min(var(--measure),100%);
    justify-content:start;gap:var(--space-40)}
  /* het beeld staat links, maar blijft in de bron achter de tekst staan:
     voorlezen volgt de bron, niet de kolomvolgorde */
  .tweeluik .draai{order:-1}
}
/* de connector van twee kanten */
.draai{margin:0;max-width:260px}
.draai__vlak{position:relative;display:block;width:100%;aspect-ratio:8/9;
  margin:0;padding:0;border:0;overflow:hidden;cursor:pointer;
  border-radius:var(--radius-card);background:var(--color-fog)}
.draai__vlak img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.draai__b{opacity:0;transition:opacity 300ms var(--ease-uit)}
.draai.is-om .draai__b{opacity:1}
/* wit op Signal haalt 4,1; norm voor een teken is 3 */
.draai__loep{position:absolute;right:var(--space-8);bottom:var(--space-8);
  width:28px;height:28px;border-radius:var(--radius-pill);
  background:var(--color-signal);color:#fff;display:grid;place-items:center;
  transition:opacity 220ms var(--ease-uit)}
.draai.is-om .draai__loep{opacity:0}
/* Het overvloeien is een doffing en blijft ook bij reduced motion staan.
   Het duwtje naar voren is beweging en gaat daar wel uit. */
@media (prefers-reduced-motion: no-preference){
  .draai__vlak img{transition:transform 600ms var(--ease-uit)}
  .draai__b{transform:scale(1.06);
    transition:opacity 300ms var(--ease-uit),transform 600ms var(--ease-uit)}
  .draai.is-om .draai__a{transform:scale(1.04)}
  .draai.is-om .draai__b{transform:none}
}
.band{padding-block:var(--section-gap)}
.band--staal{background:var(--color-deep-steel);color:#fff}
.band--staal h2,.band--staal h3{color:#fff}
.band--fog{background:var(--color-fog)}

/* label-register */
.label{font-family:var(--font-label);font-weight:600;text-transform:uppercase;
font-size:var(--text-label);letter-spacing:.06em;line-height:1.2;margin:0 0 var(--space-16);
color:var(--color-slate)}
.label--signal{color:var(--color-signal)}
.band--staal .label{color:var(--color-signal-light)}
.micro{font-family:var(--font-label);font-weight:600;text-transform:uppercase;
font-size:var(--text-micro);letter-spacing:.08em;color:var(--color-slate)}
.mono{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.02em}

.lead{font-size:var(--text-body-l);max-width:44ch;color:var(--color-slate)}
.band--staal .lead{color:var(--color-mist)}
.band--staal .onderschrift,.split__tekst .onderschrift{color:var(--color-mist)}
/* Het slotblok onder de vier kaarten. De streep loopt over de volle breedte,
   de tekst blijft op leeslengte. De link is Slate en niet Signal: Signal
   haalt 4,1 op wit en dat is te weinig voor tekst van deze grootte. */
.meer{margin-top:var(--space-40);padding-top:var(--space-24);
  border-top:1px solid var(--color-hairline)}
.meer p{margin:0;max-width:var(--measure);font-size:var(--text-body-s)}
.meer a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.onderschrift{font-size:var(--text-body-s);color:var(--color-slate);max-width:52ch;
margin:var(--space-12) 0 0;line-height:1.45}
.band--staal .onderschrift{color:var(--color-mist)}

/* splitband */
.split{display:grid;min-height:min(88vh,720px)}
@media(min-width:56rem){.split{grid-template-columns:1fr 1fr}}
.split__tekst{background:var(--color-deep-steel);color:#fff;display:flex;flex-direction:column;
justify-content:center;padding:var(--space-64) var(--gutter)}
.split__binnen{max-width:34rem;margin-inline:auto;width:100%}
.split__beeld{background:var(--color-mist);position:relative;min-height:420px}
.split__beeld img{width:100%;height:100%;object-fit:cover;border-radius:0}
.split--om .split__tekst{order:2}
.split h1,.split h2{color:#fff}
.split .lead{color:var(--color-mist);max-width:38ch;margin-top:0}
.split h1,.split h2{font-size:clamp(32px,3.6vw,var(--text-heading-l));max-width:20ch}

/* knoppen */
.knoppen{display:flex;flex-wrap:wrap;gap:var(--space-12);margin-top:var(--space-32)}
.knop{display:inline-flex;align-items:center;font-family:var(--font-label);font-weight:600;
text-transform:uppercase;font-size:var(--text-body-s);letter-spacing:.05em;line-height:1;
padding:14px 24px;border-radius:var(--radius-control);border:1px solid transparent;
text-decoration:none;cursor:pointer;transition:background 160ms,border-color 160ms,opacity 160ms}
.knop--vol{background:var(--color-steel-ink);color:#fff}
.knop--vol:hover{background:var(--color-deep-steel)}
.knop--lijn{background:transparent;color:var(--color-steel-ink);border-color:var(--color-steel-ink)}
.band--staal .knop--vol,.split__tekst .knop--vol{background:#fff;color:var(--color-steel-ink)}
.band--staal .knop--vol:hover,.split__tekst .knop--vol:hover{opacity:.85}
.band--staal .knop--lijn,.split__tekst .knop--lijn{color:#fff;border-color:#fff}
.knop--tekst{padding:0;background:none;border:0;color:var(--color-steel-ink);font-size:var(--text-label);
border-bottom:1px solid transparent;border-radius:0}
.knop--tekst:hover{border-bottom-color:var(--color-steel-ink)}

/* statuskaart */
.kaarten{display:grid;gap:var(--space-24);margin-top:var(--space-48)}
@media(min-width:48rem){.kaarten{grid-template-columns:1fr 1fr}}
.kaart{background:var(--color-paper);border:1px solid var(--color-hairline);
border-radius:var(--radius-card);padding:var(--space-24);border-top:4px solid var(--color-mist)}
.kaart--signal{border-top-color:var(--color-signal)}
.kaart .micro{color:var(--color-pewter);display:block;margin-bottom:var(--space-12)}
.kaart h3{margin-bottom:var(--space-12)}
.kaart p{color:var(--color-slate);margin:0;font-size:var(--text-body-s);max-width:62ch}
.kaart .mono{display:block;margin-top:var(--space-16);color:var(--color-slate)}

/* specificatieraster, geleend bij freitag */
.rasterhoes{overflow-x:auto;margin-top:var(--space-40);-webkit-overflow-scrolling:touch}
.raster{width:100%;min-width:44rem;border-collapse:collapse;
border:1px solid var(--color-hairline)}
.raster th,.raster td{border:1px solid var(--color-hairline);padding:var(--space-16);
text-align:left;vertical-align:top}
.raster th{font-family:var(--font-sans);font-weight:600;
font-size:var(--text-label);color:var(--color-steel-ink);background:var(--color-paper)}
.raster td{font-size:var(--text-body-s);color:var(--color-steel-ink)}
.raster td .mono{color:var(--color-slate);display:block;margin-bottom:var(--space-4)}
.raster td.uit{color:var(--color-slate)}

/* volle breedte film met de uitspraak erover */
.filmband{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(420px,52vw,620px);padding-block:var(--space-64);
  background:var(--color-deep-steel);color:#fff}
.filmband__film,.filmband__waas{position:absolute;inset:0;width:100%;height:100%}
.filmband__film{object-fit:cover;display:block}
.filmband__waas{background:
  linear-gradient(180deg,rgba(0,26,30,.58) 0%,rgba(0,26,30,.62) 55%,rgba(0,26,30,.78) 100%)}
.filmband .wrap{position:relative;z-index:1;width:100%}
.filmband h2{color:#fff;margin:0;max-width:30ch;
  font-size:clamp(32px,3.6vw,var(--text-heading-l))}
@supports(text-wrap:balance){ .filmband h2{ text-wrap:balance } }
/* De lus loopt langer dan vijf seconden en start vanzelf, dus hij moet te
   stoppen zijn. Wit op deze knop haalt 8,4, ook boven het helderste frame. */
.filmknop{position:absolute;z-index:2;right:var(--gutter);bottom:var(--space-24);
  width:36px;height:36px;padding:0;border:0;border-radius:var(--radius-pill);
  background:rgba(0,26,30,.62);color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:background 160ms ease}
.filmknop:hover{background:rgba(0,26,30,.85)}
.filmknop b{display:block;width:4px;height:12px;
  border-left:3px solid currentColor;border-right:3px solid currentColor}
.filmknop.is-pauze b{width:0;height:0;border:0;margin-left:3px;
  border-left:11px solid currentColor;
  border-top:7px solid transparent;border-bottom:7px solid transparent}

/* product op wit */
.duo{display:grid;gap:var(--space-32);align-items:center;margin-top:var(--space-48)}
@media(min-width:56rem){.duo{grid-template-columns:5fr 7fr;gap:var(--space-64)}}
.duo img{border-radius:var(--radius-card);width:100%}

.badge{display:inline-block;background:var(--color-pewter);color:#fff;
font-family:var(--font-label);font-weight:600;text-transform:uppercase;font-size:var(--text-micro);
letter-spacing:.08em;padding:4px 12px;border-radius:var(--radius-control)}

/* kop en strook */
.strook{background:var(--color-deep-steel);color:#fff;text-align:center;padding:11px var(--gutter);
font-family:var(--font-label);font-weight:600;text-transform:uppercase;font-size:var(--text-micro);
letter-spacing:.08em}
.kop{background:var(--color-paper);border-bottom:1px solid var(--color-mist);
position:sticky;top:0;z-index:10}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);
height:64px}
.merk{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.03em;
color:var(--color-steel-ink);text-decoration:none}
.kop nav{display:flex;align-items:center;gap:var(--space-24)}
.kop nav a{font-family:var(--font-label);font-weight:600;text-transform:uppercase;font-size:var(--text-label);
letter-spacing:.06em;color:var(--color-slate);text-decoration:none}

/* invoer */
.veld{margin-bottom:var(--space-20);max-width:32rem}
.veld label{display:block;font-family:var(--font-sans);font-weight:600;
font-size:var(--text-label);color:var(--color-steel-ink);margin-bottom:6px}
.veld input{width:100%;height:48px;background:var(--color-fog);border:1px solid var(--color-slate);
border-radius:var(--radius-control);padding:0 14px;font-family:var(--font-sans);
font-size:var(--text-body);color:var(--color-steel-ink)}
.veld .hint{font-size:var(--text-body-s);color:var(--color-slate);margin:6px 0 0}
.band--fog .veld input,.band--fog .veld textarea{background:var(--color-paper)}

.voet{background:var(--color-deep-steel);color:var(--color-mist);padding-block:var(--space-48)}
.voet .merk{color:#fff}
.voet p{font-size:var(--text-body-s);max-width:36ch;margin-top:var(--space-16)}

.uitleg{background:var(--color-fog);border-left:8px solid var(--color-pewter);
padding:var(--space-20) var(--space-24);margin:var(--space-32) 0;max-width:var(--measure)}
.uitleg p{font-size:var(--text-body-s);color:var(--color-slate);margin:0 0 8px}
.uitleg p:last-child{margin:0}
.uitleg strong{color:var(--color-steel-ink)}

/* --- aanvullingen voor de site --- */
.strook{display:flex;justify-content:center;align-items:center;gap:var(--space-16);flex-wrap:wrap}
.strook a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* drie stappen */
.stappen{display:grid;gap:var(--space-32);margin-top:var(--space-48);padding:0;list-style:none;
counter-reset:s}
@media(min-width:48rem){.stappen{grid-template-columns:repeat(3,1fr);gap:var(--space-40)}}
.stappen li{counter-increment:s;border-top:1px solid var(--color-hairline);padding-top:var(--space-20)}
.band--staal .stappen li{border-top-color:rgba(255,255,255,.28)}
.stappen li::before{content:counter(s,decimal-leading-zero);display:block;
font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.02em;color:var(--color-signal);
margin-bottom:var(--space-12)}
.band--staal .stappen li::before{color:var(--color-signal-light)}
.stappen h3{font-size:var(--text-heading-s);margin-bottom:var(--space-8)}
.stappen p{font-size:var(--text-body-s);color:var(--color-slate);margin:0}
.band--staal .stappen p{color:var(--color-mist)}

/* drie kolommen tekst */
.kolommen{display:grid;gap:var(--space-32);margin-top:var(--space-48)}
@media(min-width:48rem){.kolommen{grid-template-columns:repeat(3,1fr);gap:var(--space-40)}}
.kolom{border-top:1px solid var(--color-hairline);padding-top:var(--space-20)}
.band--staal .kolom{border-top-color:rgba(255,255,255,.28)}
.kolom h3{font-size:var(--text-heading-s);margin-bottom:var(--space-16)}
.kolom ul{margin:0;padding:0;list-style:none}
.kolom li{font-size:var(--text-body-s);color:var(--color-slate);padding:var(--space-8) 0;
border-bottom:1px solid var(--color-mist)}
.band--staal .kolom li{color:var(--color-mist);border-bottom-color:rgba(255,255,255,.18)}
.kolom li:last-child{border-bottom:0}

/* cijferrij */
.cijfers{display:flex;flex-wrap:wrap;gap:var(--space-48);margin-top:var(--space-40);
padding-top:var(--space-24);border-top:1px solid rgba(255,255,255,.28)}
.cijfers div{min-width:7rem}
.cijfers dt{font-family:var(--font-label);font-weight:600;text-transform:uppercase;
font-size:var(--text-micro);letter-spacing:.08em;color:var(--color-signal-light)}
.cijfers dd{margin:6px 0 0;font-family:var(--font-display);font-weight:700;font-size:var(--text-heading-m);
line-height:1;letter-spacing:-.02em;color:#fff}

/* beeldduo */
.trio{display:grid;gap:var(--space-24);margin-top:var(--space-48)}
@media(min-width:48rem){.trio{grid-template-columns:repeat(3,1fr)}}
.trio figure{margin:0}
.trio img{border-radius:var(--radius-card);width:100%;aspect-ratio:4/5;object-fit:cover}
.trio figcaption{font-size:var(--text-body-s);color:var(--color-slate);margin-top:var(--space-12);
line-height:1.45}

/* formulier */
.form{margin-top:var(--space-48);max-width:34rem}
.keuze{display:grid;gap:var(--space-12);margin-bottom:var(--space-32)}
.keuze label{display:flex;gap:var(--space-12);align-items:flex-start;
border:1px solid var(--color-slate);border-radius:var(--radius-control);padding:var(--space-16);
cursor:pointer;font-size:var(--text-body-s);color:var(--color-slate)}
.keuze label strong{display:block;font-family:var(--font-sans);font-weight:700;
font-size:var(--text-body-s);color:var(--color-steel-ink);margin-bottom:4px}
.keuze input{margin-top:2px;width:18px;height:18px;accent-color:var(--color-signal);flex:none}
.keuze label:has(input:checked){border-color:var(--color-signal);border-width:2px;padding:15px}
.veld textarea{width:100%;background:var(--color-fog);border:1px solid var(--color-slate);
border-radius:var(--radius-control);padding:12px 14px;font-family:var(--font-sans);
font-size:var(--text-body);color:var(--color-steel-ink);resize:vertical}
.klein{font-size:var(--text-body-s);color:var(--color-slate);margin-top:var(--space-20)}

/* voet */
.voet__rijen{display:flex;flex-wrap:wrap;gap:var(--space-48);justify-content:space-between}
.voet nav{display:flex;flex-direction:column;gap:var(--space-12)}
.voet nav a{font-family:var(--font-label);font-weight:600;text-transform:uppercase;font-size:var(--text-label);
letter-spacing:.06em;color:var(--color-mist);text-decoration:none}

/* doelgrootte 2.5.8 en smalle schermen */
.strook a,.voet nav a,.kop nav a{display:inline-flex;align-items:center;min-height:24px;padding-block:4px}
@media(max-width:30rem){
  .kop .wrap{height:auto;padding-block:var(--space-12);flex-wrap:wrap;row-gap:var(--space-8)}
  .kop nav{gap:var(--space-16);flex-wrap:wrap}
  .kop nav a:not(.knop){font-size:var(--text-micro)}
  .kop .knop{padding:12px 16px;font-size:var(--text-label)}
  .strook{flex-direction:column;gap:var(--space-4);text-align:center}
  .cijfers{gap:var(--space-32)}
}

/* Graphite haalt 4,07 op Fog en zakt onder de norm. Op een Fog-band wordt hij Slate. */
.band--fog .kolom li,
.band--fog .stappen p,
.band--fog .onderschrift,
.band--fog .klein,
.band--fog p{color:var(--color-slate)}
.band--fog .kaart p{color:var(--color-slate)}

/* de navigatiekleur mag de gevulde knop niet overschrijven */
.kop nav a.knop--vol{color:#fff}
/* een splitband is een donkere band, ook al draagt hij die class niet */
.split__tekst .label{color:var(--color-signal-light)}


/* prototypemarkeringen: gaan er in de productieversie uit */
.todo{background:#fff3c4;border-left:8px solid #d9a800;border-radius:0 var(--radius-control) var(--radius-control) 0;
padding:var(--space-16) var(--space-20);margin:var(--space-32) 0 0;max-width:var(--measure)}
.todo p{font-size:var(--text-body-s);color:#4a3c00;margin:0;line-height:1.5}
.todo strong{color:#3a2f00}
.todo-inline{color:#8a6d00;font-style:italic}

/* uitspraakregel en citaat: stonden als inline style in de markup */
.uitspraak{font-family:var(--font-display);font-weight:700;
font-size:clamp(var(--text-heading),5vw,var(--text-heading-l));line-height:1.05;
letter-spacing:-.025em;max-width:18ch;margin:var(--space-80) 0 0;color:var(--color-steel-ink)}
.citaat{margin:var(--space-32) 0 0;border-left:8px solid var(--color-signal);
padding-left:var(--space-20)}
.citaat blockquote{margin:0;font-family:var(--font-display);font-weight:700;
font-size:var(--text-heading-s);line-height:1.25;letter-spacing:-.015em}
.stappen img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:var(--space-16);
border-radius:var(--radius-card)}
.tussenkop{margin-top:var(--space-48)}

/* faq */
.faq{margin-top:var(--space-40)}
.faq details{border-top:1px solid var(--color-hairline);padding:var(--space-16) 0}
.faq details:last-child{border-bottom:1px solid var(--color-hairline)}
.faq summary{cursor:pointer;font-weight:600;font-size:var(--text-body);color:var(--color-steel-ink)}
.faq summary::marker{color:var(--color-signal)}
.faq p{margin:var(--space-12) 0 0;font-size:var(--text-body-s);color:var(--color-slate);max-width:62ch}

/* ankeroffset onder de sticky header */
section[id],main[id]{scroll-margin-top:72px}

/* nieuwe-productstrook: licht teal, donkere tekst */
.strook--nieuw{background:var(--color-signal-light);color:var(--color-steel-ink)}
.strook--nieuw a{color:var(--color-steel-ink);font-weight:700}

/* vink- en kruislijsten */
ul.check li::before{content:"\2713";color:var(--color-signal);font-weight:700;margin-right:10px}
ul.kruis li::before{content:"\2715";color:var(--color-slate);font-weight:700;margin-right:10px}

/* smal scherm: raster gestapeld, geen zijwaartse scroll */
@media(max-width:40rem){
  .rasterhoes{overflow:visible}
  .raster{min-width:0}
  .raster thead{position:absolute;left:-9999px}
  .raster tr{display:block;border:0;border-bottom:1px solid var(--color-hairline);padding:var(--space-12) 0}
  .raster td{display:block;border:0;padding:2px 0}
}
/* smal scherm: nav compact (logo + CTA), strook compacter */
@media(max-width:30rem){
  .kop nav a:not(.knop){display:none}
  .strook{padding-block:6px;font-size:var(--text-micro)}
}

/* lange koppen mogen breken; graceful op 320px */
.kaarten>.kaart{min-width:0}
.kaart h3{overflow-wrap:break-word;hyphens:auto}

/* vergelijkingstabel: kolomlabels bij gestapelde mobiele weergave */
@media(max-width:40rem){
  .raster--vs td[data-k]::before{content:attr(data-k);display:block;font-family:var(--font-label);
  font-weight:600;text-transform:uppercase;font-size:var(--text-micro);letter-spacing:.08em;
  color:var(--color-slate);margin-bottom:2px}
}

/* faq: tweede niveau achter een toggle */
.faq-meer{margin-top:var(--space-48);border-top:2px solid var(--color-slate) !important}
.faq-meer>summary{font-family:var(--font-label);font-weight:700;text-transform:uppercase;
letter-spacing:.06em;font-size:var(--text-label);color:var(--color-steel-ink);padding:var(--space-8) 0}

/* productkaarten, webshopstijl */
.prod{background:#fff;border:1px solid var(--color-hairline);border-radius:var(--radius-card);
overflow:hidden;display:flex;flex-direction:column}
.prod__beeld{position:relative}
.prod__beeld img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:0}
.prod__badges{position:absolute;top:12px;left:12px;display:flex;gap:8px;flex-wrap:wrap}
.prod__body{padding:var(--space-16) var(--space-20) var(--space-20);display:flex;
flex-direction:column;gap:6px;flex:1}
.prod__body h3{font-size:var(--text-heading-s);letter-spacing:-.01em}
.prod__body .mono{color:var(--color-slate)}
.prod__uitleg{font-size:var(--text-body-s);color:var(--color-slate);margin:0}
.prod__prijs{font-family:var(--font-display);font-weight:700;font-size:var(--text-heading);
letter-spacing:-.02em;margin:var(--space-8) 0 0;margin-top:auto;padding-top:var(--space-8)}