/* Afrekenbaar: één stylesheet voor site, beheer en klantportaal.
   Contrast is overal minimaal 4,5:1 in beide thema's. We verkopen toegankelijkheid,
   dus onze eigen site moet door onze eigen scanner komen zonder bevindingen. */

@font-face{
  font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;
  src:url('/lettertype/manrope-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;
  src:url('/lettertype/manrope-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --paper:#fff; --vlak:#fafafa; --kaart:#fff;
  --ink:#0e1013; --zacht:#61676f; --lijn:#e8e9eb;
  --accent:#b93f0c; --accent-diep:#8f3009; --accent-zacht:#fdefe7;
  --goed:#166534; --waarschuwing:#8a5a00; --slecht:#a4231d;
  --logo-teken:#fff; --knop-tekst:#fff;
  --slot-vlak:#14171a; --slot-ink:#f7f8f8; --slot-zacht:#c3c9cd;
  --rond:12px; --rond-klein:8px;
  --tekst:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,'Cascadia Mono',monospace;
  --breed:78rem; --smal:42rem;
  color-scheme: light;   /* geen donker thema: de site is bewust licht */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 clamp(16px,1vw + .8rem,17px)/1.6 var(--tekst);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img,svg{max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:.18em}
a:hover{color:var(--accent-diep)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.overslaan{position:absolute;left:-9999px;top:.5rem;background:var(--ink);color:var(--paper);
  padding:.7rem 1.1rem;border-radius:var(--rond-klein);z-index:20;font-weight:600}
.overslaan:focus{left:.5rem}
.breed{max-width:var(--breed);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}

/* ---------- typografie ---------- */
h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.02;margin:0 0 1rem;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem);letter-spacing:-.038em;max-width:17ch}
h2{font-size:clamp(1.9rem,4vw,3rem);max-width:24ch}
h3{font-size:1.06rem;font-weight:650;letter-spacing:-.014em;line-height:1.35;margin-bottom:.4rem}
p{margin:0 0 1.1rem;max-width:60ch}
/* Tweetonige kop: eerste zin donker, vervolg grijs, zelfde grootte. */
.vervolg{color:var(--zacht)}
.leidend{font-size:clamp(1.08rem,1.3vw,1.22rem);color:var(--zacht);max-width:46ch;line-height:1.5}
.klein{font-size:.92rem;color:var(--zacht)}
.pil{display:inline-block;font-size:.83rem;font-weight:600;letter-spacing:-.005em;color:var(--accent);
  background:var(--accent-zacht);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  padding:.28rem .75rem;border-radius:99px;margin:0 0 1.4rem}

/* ---------- kop ---------- */
.kop{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--lijn)}
@supports not (backdrop-filter:blur(1px)){.kop{background:var(--paper)}}
.kop .breed{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:62px}
.merk{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;letter-spacing:-.03em;
  font-size:1.08rem;color:var(--ink);text-decoration:none}
.merk svg{width:24px;height:24px;color:var(--ink);flex:none}
.merk-teken{display:inline-flex;flex:none}
.kop nav ul{list-style:none;display:flex;align-items:center;gap:clamp(.9rem,2vw,1.7rem);margin:0;padding:0}
.kop nav a{color:var(--zacht);text-decoration:none;font-size:.95rem;font-weight:550;white-space:nowrap}
.kop nav a:hover,.kop nav a[aria-current]{color:var(--ink)}
.kop .knop{padding:.5rem 1rem;font-size:.92rem}
@media (max-width:52rem){.kop nav .verbergbaar{display:none}}

/* ---------- knoppen ---------- */
/* Knoptekst via een token, niet via een media-override: anders wint een specifiekere
   menuregel en staat er lichtgrijs op oranje. Onze eigen scanner ving dat. */
.knop,.kop nav a.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  white-space:nowrap;background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  border-radius:8px;padding:.62rem 1.1rem;font:600 .95rem/1.35 var(--tekst);text-decoration:none;
  cursor:pointer;transition:background .18s ease,transform .12s ease}
.knop:hover,.kop nav a.knop:hover{background:color-mix(in srgb,var(--ink) 82%,var(--paper));
  border-color:color-mix(in srgb,var(--ink) 82%,var(--paper));color:var(--paper)}
.knop:active{transform:translateY(1px)}
.knop.rustig{background:var(--kaart);color:var(--ink);border-color:var(--lijn);
  box-shadow:0 1px 2px rgb(14 16 19 / .05)}
.knop.rustig:hover{background:var(--vlak);color:var(--ink);border-color:var(--zacht)}
@media (prefers-reduced-motion:reduce){.knop{transition:none}}
.rij{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* ---------- secties ---------- */
/* Haarlijnenraster: secties worden gescheiden door één lijn die doorloopt tot de rand,
   en de inhoud staat binnen een omkaderde kolom. Dat geeft de pagina structuur zonder kaders
   om alles heen. */
section{padding-block:clamp(4.5rem,9vw,9rem);border-top:1px solid var(--lijn);position:relative}
section:first-child{border-top:0}
.vlak{background:var(--vlak)}
.randen{border-inline:1px solid var(--lijn)}
.rasterlijn,.cijferband,.bento,.prijzen{display:grid;
  border-top:1px solid var(--lijn);border-left:1px solid var(--lijn)}
.rasterlijn>*,.cijferband>*,.bento>*,.prijzen>*{border-right:1px solid var(--lijn);
  border-bottom:1px solid var(--lijn);padding:clamp(1.5rem,3vw,2.5rem)}

/* hero: asymmetrische splitsing */
.hero{padding-top:clamp(4rem,8vw,7.5rem);padding-bottom:0;overflow:hidden}
.kolom{max-width:56rem;margin-inline:auto;text-align:center}
/* Binnen een gecentreerde kolom mag de kop niet in een smalle linkerbak blijven hangen:
   dat leest als scheef. */
.kolom h1,.kolom h2{max-width:none;margin-inline:auto}
.kolom p{margin-inline:auto}
.kolom .leidend{margin-inline:auto}
.kolom .rij{justify-content:center}
.hero h1{max-width:none;margin-inline:auto}
.hero .leidend{margin-inline:auto;max-width:52ch}
.hero .rij{justify-content:center;margin-top:2rem}
/* Laadmeter tijdens het meten. Native progress-element, dus toegankelijk zonder extra werk,
   en zichtbaar ook als JavaScript uitstaat (dan blijft hij op de beginwaarde staan). */
.meter{margin:2.25rem auto 0;max-width:26rem}
.meter progress{appearance:none;-webkit-appearance:none;width:100%;height:8px;border:0;
  border-radius:99px;background:var(--vlak);overflow:hidden;display:block}
.meter progress::-webkit-progress-bar{background:var(--vlak);border-radius:99px}
.meter progress::-webkit-progress-value{background:var(--accent);border-radius:99px;
  transition:width .4s linear}
.meter progress::-moz-progress-bar{background:var(--accent);border-radius:99px}
.meter-tekst{margin:.7rem 0 0;font-size:.92rem;color:var(--zacht);text-align:center}
.stap-lijst{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.45rem;
  max-width:26rem;margin-inline:auto;text-align:left;font-size:.92rem;color:var(--zacht)}
.stap-lijst li{display:flex;gap:.6rem;align-items:center}
.stap-lijst svg{flex:none;color:var(--lijn)}
.stap-lijst li[data-klaar] svg{color:var(--accent)}
.stap-lijst li[data-klaar]{color:var(--ink)}

/* Scanbalk in de hero: het product is de eerste handeling, niet een formulier erachter. */
.scanbalk{max-width:34rem;margin:2.25rem auto 0;text-align:left}
.scanbalk label{font-size:.88rem;font-weight:600;margin-bottom:.4rem;color:var(--zacht)}
.scanbalk-rij{display:flex;gap:.5rem}
.scanbalk input{flex:1;min-width:0;padding:.72rem .85rem;border-radius:8px}
.scanbalk .knop{flex:none;padding-inline:1.15rem}
@media (max-width:34rem){.scanbalk-rij{flex-direction:column}.scanbalk .knop{width:100%}}
.vinkjes{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.4rem;
  margin:1.35rem 0 0;padding:0;font-size:.9rem;color:var(--zacht)}
.vinkjes li{padding-left:1.4rem;position:relative}
.vinkjes li::before{content:'';position:absolute;left:0;top:.5em;width:.62rem;height:.34rem;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.melding[role=alert]{text-align:left;max-width:34rem;margin-inline:auto}
.bestelformulier .melding[role=alert]{margin-inline:0;max-width:none}

/* Het product staat in een echte vensterlijst. De inhoud van het venster is een echte
   schermafbeelding van een echt rapport, geen nagebouwde interface. */
.venster{margin:clamp(3.5rem,7vw,6rem) auto 0;max-width:64rem;border:1px solid var(--lijn);
  border-radius:14px 14px 0 0;background:var(--kaart);overflow:hidden;
  box-shadow:0 -1px 0 rgb(255 255 255 / .6) inset,0 40px 80px -40px rgb(14 16 19 / .28)}
.venster-balk{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;
  border-bottom:1px solid var(--lijn);background:var(--vlak)}
.venster-balk i{width:10px;height:10px;border-radius:50%;background:var(--lijn);flex:none}
.venster-balk span{margin-left:.6rem;font-size:.8rem;color:var(--zacht);font-family:var(--mono)}
.venster img{display:block;width:100%}
/* Het venster wordt bewust afgesneden: je ziet het begin van een echt rapport,
   niet de hele pagina uitgerold. */
.venster-inhoud{max-height:clamp(20rem,46vw,32rem);overflow:hidden}
.hero-achtergrond{position:absolute;inset:auto 0 0;height:60%;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%)}
figcaption{margin-top:.8rem;font-size:.88rem;color:var(--zacht);text-align:center}

/* cijferband */
.cijferband{grid-template-columns:repeat(3,1fr);margin-top:2.5rem}
.cijferband>*{display:flex;flex-direction:column}
.cijfer{font-size:clamp(2.8rem,5.5vw,4rem);font-weight:600;letter-spacing:-.05em;line-height:.9;
  display:block;margin-bottom:.9rem;color:var(--accent)}
.cijferband p{max-width:32ch;margin:0;color:var(--zacht);font-size:.98rem}
.cijferband cite{display:block;margin-top:.9rem;font-size:.82rem;color:var(--zacht);font-style:normal;
  font-family:var(--mono)}
@media (max-width:56rem){.cijferband{grid-template-columns:1fr}}

/* bento */
.bento{grid-template-columns:1.35fr 1fr;margin-top:3rem}
.bento .groot{display:grid;gap:1.5rem;align-content:start}
.bento img{border:1px solid var(--lijn);border-radius:var(--rond-klein);display:block;width:100%}
.bento p{margin-bottom:0}
.bento p + .klein{margin-top:.9rem}
@media (max-width:56rem){.bento{grid-template-columns:1fr}}

/* stappen */
.stappen{list-style:none;margin:3rem 0 0;padding:0;counter-reset:stap;
  display:grid;gap:0;border-top:1px solid var(--lijn);max-width:52rem}
.stappen li{counter-increment:stap;display:grid;gap:.35rem 2rem;
  grid-template-columns:3rem 1fr;padding:1.75rem 0;border-bottom:1px solid var(--lijn)}
.stappen li::before{content:counter(stap,decimal-leading-zero);grid-row:span 2;
  font:500 .95rem/1.6 var(--mono);color:var(--zacht)}
.stappen h3{margin:0}
.stappen p{margin:0;color:var(--zacht)}

/* prijzen */
.prijzen{grid-template-columns:1.15fr 1fr;margin-top:3rem}
.prijzen .uitgelicht{background:var(--vlak)}
.bedrag{font-size:2.5rem;font-weight:600;letter-spacing:-.045em;display:block;margin:.6rem 0 .2rem}
.bedrag span{font-size:.95rem;font-weight:450;color:var(--zacht);letter-spacing:-.01em;display:block;margin-top:.35rem}
.prijzen ul{list-style:none;margin:1.1rem 0 0;padding:0}
.prijzen li{padding-left:1.6rem;position:relative;margin-bottom:.5rem;color:var(--zacht)}
.prijzen li::before{content:'';position:absolute;left:0;top:.55em;width:.7rem;height:.38rem;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
@media (max-width:52rem){.prijzen{grid-template-columns:1fr}}

/* vraag en antwoord */
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{cursor:pointer;padding:1.15rem 0;font-weight:650;font-size:1.05rem;
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;list-style:none}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:'+';color:var(--accent);font-weight:700;font-size:1.3rem;line-height:1}
.vraag[open] summary::after{content:'\2212'}
.vraag p{padding-bottom:1.15rem;color:var(--zacht)}

/* slot: eigen tokens, zodat de sectie in beide thema's donker blijft en de pagina
   niet halverwege omklapt naar een ander thema */
.slot{background:var(--slot-vlak);color:var(--slot-ink)}
.slot .knop{background:var(--slot-ink);color:var(--slot-vlak);border-color:var(--slot-ink)}
.slot .knop:hover{background:color-mix(in srgb,var(--slot-ink) 85%,var(--slot-vlak));
  border-color:color-mix(in srgb,var(--slot-ink) 85%,var(--slot-vlak));color:var(--slot-vlak)}
.slot h2{color:var(--slot-ink)}
.slot p{color:var(--slot-zacht)}
.slot .knop.rustig{background:transparent;color:var(--slot-ink);
  border-color:color-mix(in srgb,var(--slot-ink) 42%,transparent)}
.slot .knop.rustig:hover{background:color-mix(in srgb,var(--slot-ink) 12%,transparent);color:var(--slot-ink)}

/* voet */
.voet{border-top:1px solid var(--lijn);padding-block:2.5rem;color:var(--zacht);font-size:.92rem}
.voet .breed{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:start}
.voet ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1.1rem}
.voet a{color:var(--zacht)}
.voet a:hover{color:var(--ink)}

/* ---------- formulieren ---------- */
form{max-width:var(--smal)}
.veld{margin-bottom:1.15rem}
label{display:block;font-weight:650;margin-bottom:.3rem}
.hint{display:block;font-weight:400;color:var(--zacht);font-size:.9rem;margin-bottom:.4rem}
input,select,textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--zacht);
  border-radius:var(--rond-klein);font:400 1rem/1.5 var(--tekst);background:var(--kaart);color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--zacht);opacity:1}
textarea{min-height:7.5rem;resize:vertical}
.melding{background:var(--accent-zacht);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:var(--rond);padding:1rem 1.15rem;margin-bottom:1.5rem}
.melding.fout{background:color-mix(in srgb,var(--slecht) 10%,var(--paper));border-color:var(--slecht)}
.melding p:last-child{margin-bottom:0}

/* uitlegraster met iconen */
.uitleg-raster{display:grid;gap:0;grid-template-columns:repeat(2,1fr);margin-top:2.5rem;
  border-top:1px solid var(--lijn);border-left:1px solid var(--lijn)}
.uitleg-raster>div{border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  padding:clamp(1.35rem,3vw,2rem)}
.uitleg-raster svg{color:var(--accent);margin-bottom:.9rem;display:block}
.uitleg-raster h3{margin-bottom:.4rem}
.uitleg-raster p{margin-bottom:0}
@media (max-width:52rem){.uitleg-raster{grid-template-columns:1fr}}
.prijzen.drie{grid-template-columns:repeat(3,1fr)}
.prijzen.vier{grid-template-columns:repeat(4,1fr)}
.prijzen.twee{grid-template-columns:1fr 1fr}
@media (max-width:52rem){.prijzen.twee{grid-template-columns:1fr}}
@media (max-width:72rem){.prijzen.vier{grid-template-columns:repeat(2,1fr)}}
@media (max-width:44rem){.prijzen.vier{grid-template-columns:1fr}}
.prijzen h3{display:flex;align-items:center;gap:.45rem}
.prijzen h3 svg{color:var(--accent);flex:none}
@media (max-width:60rem){.prijzen.drie{grid-template-columns:1fr}}

/* ---------- tekeningen ---------- */
.tekening{margin:2.5rem 0 0;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--lijn);
  border-radius:var(--rond);background:var(--kaart)}
.tekening.smal{max-width:44rem}
.tekening svg{display:block;overflow:visible}
.tekening figcaption{text-align:left;margin-top:1.25rem;max-width:60ch}
.tekening-scroll{overflow-x:auto;padding-bottom:.25rem}
.tekening-scroll svg{min-width:44rem}

/* ---------- eaa-check ---------- */
.eaa{max-width:none}
.eaa fieldset{border:0;padding:0;margin:0 0 2.5rem}
.eaa legend{display:flex;gap:.7rem;align-items:baseline;font-weight:650;font-size:1.12rem;
  letter-spacing:-.014em;margin-bottom:.35rem;padding:0}
.eaa .nummer{font:500 .9rem/1.6 var(--mono);color:var(--zacht);flex:none}
.eaa .hint{margin:0 0 .9rem 1.9rem}
.keuzes{display:grid;gap:.5rem;margin-left:1.9rem}
.keuze{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;margin:0;
  border:1px solid var(--lijn);border-radius:var(--rond-klein);padding:.7rem .9rem;cursor:pointer}
.keuze:hover{border-color:var(--zacht);background:var(--vlak)}
.keuze input{width:1.1rem;height:1.1rem;flex:none;margin-top:.18rem;accent-color:var(--accent)}
.keuze:has(input:checked){border-color:var(--accent);background:var(--accent-zacht)}
.keuze:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}

/* ---------- bestellen ---------- */
.bestellay{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  align-items:start;margin-top:2.5rem}
@media (max-width:56rem){.bestellay{grid-template-columns:1fr}}
.bestelformulier{max-width:none}
.bestelformulier .tussenkop{display:block;max-width:none;font-size:1.05rem;letter-spacing:-.012em;margin:2rem 0 1rem;padding-top:1.5rem;border-top:1px solid var(--lijn)}
.bestelformulier fieldset{border:0;padding:0;margin:0 0 2rem}
.bestelformulier legend{font-weight:650;font-size:1.05rem;letter-spacing:-.012em;
  padding:0 0 .9rem;border-bottom:1px solid var(--lijn);width:100%;margin-bottom:1.15rem}
.veld-rij{display:grid;gap:0 1rem;grid-template-columns:1fr 1fr}
@media (max-width:34rem){.veld-rij{grid-template-columns:1fr}}
.akkoord{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1.75rem}
.akkoord input{width:1.15rem;height:1.15rem;flex:none;margin-top:.22rem;accent-color:var(--accent)}
.akkoord label{font-weight:400;margin:0}
.bestelkaart{border:1px solid var(--lijn);border-radius:var(--rond);padding:1.5rem;
  background:var(--vlak);position:sticky;top:5rem}
.bestelkaart h2{font-size:1.1rem;margin-bottom:.35rem}
.bestelkaart dl{margin:1.25rem 0 0;display:grid;gap:.55rem}
.bestelkaart dl>div{display:flex;justify-content:space-between;gap:1rem}
.bestelkaart dt{color:var(--zacht)}
.bestelkaart dd{margin:0;font-variant-numeric:tabular-nums}
.bestelkaart .totaal{border-top:1px solid var(--lijn);padding-top:.7rem;margin-top:.3rem;font-weight:700}
.bestelkaart .totaal dt{color:var(--ink)}
.bestelkaart .doorlopend dt,.bestelkaart .doorlopend dd{color:var(--zacht);font-size:.94rem}
.vinkjes.rechts{justify-content:flex-start;flex-direction:column;gap:.4rem;margin-top:1.25rem;text-align:left}
.bevestiging{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr 1fr;margin-top:2.5rem}
@media (max-width:56rem){.bevestiging{grid-template-columns:1fr}}
.bevestiging .stappen{margin-top:1rem}
.knop svg{margin-right:-.1rem}

/* ---------- tabellen ---------- */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.95rem}
th,td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--lijn);vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--zacht);font-weight:700}
.getal{font-variant-numeric:tabular-nums}
td.getal,th.getal{text-align:right}
.leeg{color:var(--zacht);font-style:italic}
.merkje{display:inline-block;padding:.12rem .5rem;border-radius:99px;font-size:.78rem;font-weight:650;
  background:var(--vlak);border:1px solid var(--lijn);color:var(--ink)}
.merkje.open{background:color-mix(in srgb,var(--waarschuwing) 14%,var(--paper));border-color:var(--waarschuwing);color:var(--waarschuwing)}
.merkje.betaald,.merkje.opgelost{background:color-mix(in srgb,var(--goed) 12%,var(--paper));border-color:var(--goed);color:var(--goed)}
.merkje.verlopen{background:color-mix(in srgb,var(--slecht) 12%,var(--paper));border-color:var(--slecht);color:var(--slecht)}

/* ---------- paneel: beheer en klantportaal ---------- */
.paneel{display:flex;min-height:100vh;flex-wrap:wrap}
.paneel aside{width:15.5rem;background:var(--vlak);border-right:1px solid var(--lijn);padding:1.35rem}
.paneel aside .merk{display:inline-flex;margin-bottom:.2rem}
.paneel .rol{margin:0 0 1.4rem;color:var(--zacht);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.paneel aside ul{list-style:none;margin:0;padding:0}
.paneel aside a{display:block;padding:.45rem .6rem;border-radius:var(--rond-klein);
  text-decoration:none;color:var(--ink);font-weight:550;font-size:.96rem}
.paneel aside a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.paneel aside a[aria-current]{background:var(--ink);color:var(--paper)}
.paneel main{flex:1;min-width:min(100%,20rem);padding:2rem clamp(1.15rem,3vw,2rem) 5rem;max-width:64rem}
.paneel main h1{font-size:clamp(1.7rem,3vw,2.2rem);margin-bottom:1.25rem;max-width:none}
.paneel main h2{font-size:1.3rem;margin-top:2.5rem;max-width:none}
.paneel main p{max-width:70ch}
.rustig-tekst{color:var(--zacht)}
/* Doorklikken naar de volledige lijsten, zonder ze allemaal in het menu te zetten. */
.meer{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:.75rem 0 0;font-size:.92rem}
.meer a{color:var(--zacht)}
.meer a:hover{color:var(--accent)}
/* De concept-toegankelijkheidsverklaring in het klantportaal: een blok dat je kunt
   selecteren en overnemen op je eigen site. */
.verklaring{border:1px solid var(--lijn);border-radius:var(--rond);padding:1.5rem;
  background:var(--kaart)}
.verklaring h1{font-size:1.4rem;margin-bottom:.9rem}
.verklaring h2{font-size:1.05rem;margin-top:1.5rem}
@media (max-width:48rem){.paneel aside{width:100%;border-right:0;border-bottom:1px solid var(--lijn)}}
.kaartjes{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  margin:0 0 2rem;border-top:1px solid var(--lijn);border-left:1px solid var(--lijn)}
.kaartjes>div{border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  padding:1.15rem 1.25rem;background:var(--kaart)}
.kaartjes b{display:block;font-size:1.75rem;font-weight:650;letter-spacing:-.04em;line-height:1.15}
.kaartjes span{display:block;color:var(--zacht);font-size:.88rem;margin-top:.2rem}
.kaartjes .erbij{color:var(--zacht);font-size:.82rem;font-weight:400;letter-spacing:0}
.kaartjes .let b{color:var(--accent)}
/* Berichten in de helpdesk: een kaart, maar niet dezelfde als een kengetal. */
.bericht{border:1px solid var(--lijn);border-radius:var(--rond);padding:1.1rem 1.25rem;
  margin:.75rem 0;background:var(--kaart)}
.bericht h3{margin-bottom:.15rem}
.bericht .wie{color:var(--zacht);font-size:.85rem;margin:0 0 .6rem}
.bericht p:last-child{margin-bottom:0}
/* Trechter: stappen met een pijl ertussen in plaats van losse tegels. */
.trechter{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  border-top:1px solid var(--lijn);border-left:1px solid var(--lijn);margin:1rem 0 2rem}
.trechter>div{border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  padding:1.15rem 1.25rem;background:var(--kaart);position:relative}
.trechter b{display:block;font-size:1.6rem;font-weight:650;letter-spacing:-.04em;line-height:1.15}
.trechter span{display:block;color:var(--zacht);font-size:.88rem;margin-top:.2rem}
.trechter .stap{font:500 .78rem/1.6 var(--mono);color:var(--zacht);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:.35rem}
.trechter .verlies{color:var(--accent);font-size:.82rem;margin-top:.35rem}
.paneel main{max-width:76rem}
code{font-family:var(--mono);font-size:.9em;background:var(--vlak);padding:.1rem .35rem;border-radius:4px}
pre{background:var(--vlak);border:1px solid var(--lijn);padding:.8rem;border-radius:var(--rond-klein);overflow-x:auto;font-size:.82rem}

@media print{.kop,.voet,.paneel aside{display:none}body{background:#fff}}

/* Startaanbod: oude prijs doorgestreept, en een verborgen 'was' voor wie het niet ziet. */
.bedrag .oud{text-decoration:line-through;color:var(--zacht);font-weight:400;margin-right:.3rem}
.vo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.aanbodregel{margin:-1rem 0 1.5rem;color:var(--accent);font-weight:600}
.aanbodregel code{font-size:.95em}