/* ---------- De letters ----------
   Zelf gehost, zodat de pagina niet eerst naar een ander domein hoeft. Beide
   families zijn variabel: een bestand dekt het hele gewichtsbereik. De
   browser haalt de cursieve serif alleen op als een pagina hem gebruikt. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/sourceserif4-latin.woff2) format('woff2');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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400 700;font-display:swap;src:url(/assets/fonts/sourceserif4-italic-latin.woff2) format('woff2');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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* =========================================================
   Gedeeld stijlfundament, tweede stijlrichting
   Gebaseerd op dealdrive-staging.netlify.app
   Papier, inkt, geel. Serif-koppen, scherpe hoeken, badges.
   Gebruikt door Saleshunters (4940) en SalesLegends (4950).
   ========================================================= */

:root{
  --papier:#FAFAF7;
  --wit:#FFFFFF;
  --inkt:#0A0A0A;
  --inkt-2:#2A2A2A;
  --inkt-3:#161616;
  --grijs:#6B6B6B;
  --grijs-licht:#8C8C8C;
  --lijn:#D8D4C8;
  --lijn-hard:#928D80;
  --geel:#FED800;
  --geel-diep:#E8C400;
  --geel-zacht:rgba(254,216,0,.14);
  --rood:#C0392B;
  --groen:#2E7D4F;
  --breed:1240px;
  --smal:760px;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --tekst:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --kop-hoogte:104px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:130px}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font-family:var(--tekst);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
::selection{background:var(--geel);color:var(--inkt)}
:focus-visible{outline:2px solid var(--inkt);outline-offset:3px}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);font-weight:700;margin:0;color:inherit;
  letter-spacing:-.02em;line-height:1.08;
}
h1{font-size:clamp(38px,5.4vw,74px)}
h2{font-size:clamp(29px,3.4vw,48px);line-height:1.1}
h3{font-size:clamp(21px,1.9vw,27px);line-height:1.18;letter-spacing:-.015em}
h4{font-size:19px;line-height:1.25;letter-spacing:-.01em}
.kop-klein{font-size:19px;line-height:1.25;letter-spacing:-.01em}

.kicker{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--tekst);font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--inkt);line-height:1;
}
.kicker::before{content:"";width:22px;height:3px;background:var(--geel);flex:0 0 22px}
.kicker-kaal::before{display:none}
.lede{font-size:19px;line-height:1.6;color:var(--grijs);max-width:64ch}
.lede-groot{font-size:21px}
.grijs{color:var(--grijs)}
.klein{font-size:14px;line-height:1.55}
.mini{
  font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grijs);
}
.serif{font-family:var(--serif)}
.cursief{font-family:var(--serif);font-style:italic;color:var(--grijs)}

/* ---------- Layout ---------- */
.container{max-width:var(--breed);margin:0 auto;padding:0 28px;width:100%}
.container-smal{max-width:860px;margin:0 auto;padding:0 28px;width:100%}
.vak{padding:96px 0;border-top:1px solid var(--lijn)}
.vak-strak{padding:64px 0;border-top:1px solid var(--lijn)}
.vak-naadloos{border-top:0}
.vak-wit{background:var(--wit)}
.kop-blok{max-width:66ch;margin-bottom:48px}
.kop-blok h2{margin:18px 0 18px}
.rij-tussen{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.rij-tussen h2{margin:14px 0 0}
.raster-2{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.raster-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.raster-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.streep{height:1px;background:var(--lijn);border:0;margin:56px 0}

/* ---------- Kop en navigatie ---------- */
.kop{position:fixed;top:0;left:0;right:0;z-index:80}
.tikker{
  background:var(--inkt);color:rgba(255,255,255,.78);
  font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  padding:9px 0;line-height:1;
}
.tikker .container{display:flex;align-items:center;justify-content:space-between;gap:20px}
.tikker-links{display:flex;align-items:center;gap:10px;color:var(--geel)}
.stip{width:7px;height:7px;background:var(--geel);border-radius:50%;flex:0 0 7px;animation:pols 2.4s ease-in-out infinite}
@keyframes pols{0%,100%{opacity:1}50%{opacity:.35}}
.tikker-rechts{color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav{background:var(--papier);border-bottom:1px solid var(--lijn);transition:box-shadow .25s ease}
.nav.vast{box-shadow:0 6px 22px rgba(10,10,10,.07)}
.nav-binnen{
  max-width:var(--breed);margin:0 auto;padding:0 28px;height:70px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;
}
.merk{display:flex;align-items:center;gap:17px}
.merk-teken{
  width:29px;height:29px;flex:0 0 29px;background:var(--inkt);color:var(--geel);
  display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:17px;
  border-radius:2px;
}
.merk-naam{display:block;font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.02em;line-height:1}
.merk-naam em{font-style:normal;color:var(--geel-diep)}
/* De payoff sluit strak aan op de naam: de afstand tussen de basislijnen
   volgt dezelfde verhouding als in de primaire lockup. */
.merk-sub{
  display:block;font-family:var(--tekst);font-size:7.8px;font-weight:600;letter-spacing:.55px;
  text-transform:uppercase;color:var(--grijs);margin-top:1px;line-height:1;
}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{
  font-size:13.5px;font-weight:500;color:var(--inkt);padding:10px 13px;border-radius:2px;
  transition:background .18s ease;
}
.nav-link:hover{background:rgba(10,10,10,.05)}
.nav-link.actief{font-weight:700;box-shadow:inset 0 -2px 0 var(--geel)}
.nav-knop{margin-left:12px}
.nav-schakel{
  display:none;background:none;border:1px solid var(--lijn-hard);color:var(--inkt);
  width:42px;height:38px;cursor:pointer;font-size:15px;border-radius:2px;
}

/* ---------- Knoppen ---------- */
.knop,.knop-geel,.knop-lijn{
  display:inline-flex;align-items:center;gap:8px;border-radius:2px;
  padding:14px 26px;font-size:14px;font-weight:700;letter-spacing:.28px;line-height:1;
  font-family:var(--tekst);border:1px solid transparent;transition:background .18s,color .18s,border-color .18s;
}
.knop{background:var(--inkt);color:var(--geel);border-color:var(--inkt)}
.knop:hover{background:var(--inkt-2);border-color:var(--inkt-2)}
.knop-geel{background:var(--geel);color:var(--inkt);border-color:var(--geel)}
.knop-geel:hover{background:var(--geel-diep);border-color:var(--geel-diep)}
.knop-lijn{background:transparent;color:var(--inkt);border-color:var(--lijn-hard)}
.knop-lijn:hover{border-color:var(--inkt)}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pijllink{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;padding-bottom:4px;
  border-bottom:2px solid var(--geel);transition:gap .2s ease;
}
.pijllink:hover{gap:13px}

/* ---------- Badges ---------- */
.badge{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  padding:5px 8px;border-radius:2px;background:var(--geel);color:var(--inkt);line-height:1.1;
}
.badge-inkt{background:var(--inkt);color:#fff}
.badge-rood{background:var(--rood);color:#fff}
.badge-lijn{background:transparent;color:var(--grijs);border:1px solid var(--lijn-hard)}
.badges{display:flex;flex-wrap:wrap;gap:7px}

/* ---------- Hero ---------- */
.hero{padding:calc(var(--kop-hoogte) + 76px) 0 84px}
.hero h1{margin:22px 0 26px;max-width:17ch}
.hero .lede{margin-bottom:34px}
.hero-raster{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.hero-quote{
  font-family:var(--serif);font-style:italic;font-size:17px;color:var(--grijs);
  margin-top:30px;padding-top:22px;border-top:1px solid var(--lijn);
}

/* ---------- Voorpagina-blok ---------- */
.voorpagina{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
.voorpagina h2{margin:20px 0 20px}

/* ---------- Monogram ---------- */
.monogram{
  aspect-ratio:1;background:var(--inkt);color:var(--geel);display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;letter-spacing:-.04em;border-radius:2px;
  font-size:clamp(44px,6vw,88px);position:relative;overflow:hidden;
}
.monogram-breed{aspect-ratio:4/3}
.monogram::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--geel);
}
.monogram-klein{font-size:20px;aspect-ratio:1;width:46px;border-radius:2px}

/* ---------- Beeld ---------- */
.beeld{margin:0;position:relative}
.media{position:relative;overflow:hidden;background:var(--wit);border:1px solid var(--lijn);border-radius:2px}
.media img{width:100%;height:100%;object-fit:cover}
.v-16-9{aspect-ratio:16/9}
.v-4-3{aspect-ratio:4/3}
.v-1-1{aspect-ratio:1/1}
.v-5-6{aspect-ratio:5/6}
.bijschrift{
  margin-top:12px;font-size:12.5px;color:var(--grijs);display:flex;gap:10px;align-items:baseline;
}
.bijschrift b{color:var(--inkt);font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}
.beeld-duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.beeld-duo-om{direction:rtl}
.beeld-duo-om > *{direction:ltr}
.galerij{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.galerij .media:first-child{grid-column:span 2;grid-row:span 2}

/* Video */
.video{position:relative;display:block;cursor:pointer}
.video-laag{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(10,10,10,.05),rgba(10,10,10,.6))}
.speelknop{
  width:70px;height:70px;border-radius:50%;background:var(--geel);color:var(--inkt);
  display:grid;place-items:center;transition:transform .22s ease;
}
.speelknop svg{width:21px;height:21px;margin-left:3px}
.video:hover .speelknop{transform:scale(1.08)}
.video-meta{position:absolute;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px;color:#fff}
.video-meta h3{color:#fff;max-width:24ch}
.video-duur{font-size:11px;font-weight:700;letter-spacing:1.4px;background:rgba(255,255,255,.16);padding:4px 8px;border-radius:2px}
.video-badge{position:absolute;left:20px;top:18px}

/* ---------- Dossierlijst ---------- */
.dossier{border-top:1px solid var(--lijn)}
.dossier-regel{
  display:grid;grid-template-columns:112px 1fr 150px;gap:28px;align-items:start;
  padding:28px 0;border-bottom:1px solid var(--lijn);transition:background .18s ease;
}
.dossier-regel:hover{background:rgba(10,10,10,.025)}
.dossier-datum{font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--grijs);padding-top:4px}
.dossier-regel h3{margin-bottom:10px}
.dossier-regel p{color:var(--grijs);max-width:64ch;margin-bottom:14px}
.dossier-zij{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding-top:4px}
.auteur{display:flex;align-items:center;gap:10px;font-size:13px}
.auteur em{font-style:normal;color:var(--grijs);display:block;font-size:11.5px}

/* ---------- Borden ---------- */
.borden{display:grid;grid-template-columns:repeat(3,1fr);background:var(--wit);border:1px solid var(--lijn);border-radius:2px}
.bord{padding:26px 24px;border-left:1px solid var(--lijn)}
.bord:first-child{border-left:0}
.bord-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--lijn);margin-bottom:18px}
.bord-telling{background:var(--inkt);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:2px}
.bord-telling.geel{background:var(--geel);color:var(--inkt)}
.bord-item{padding:16px 0;border-bottom:1px solid var(--lijn)}
.bord-item:last-child{border-bottom:0;padding-bottom:0}
.bord-item h3{font-size:16px;margin-bottom:4px}
.bord-item p{font-size:13.5px;color:var(--grijs);margin-bottom:9px}

/* ---------- Kaarten ---------- */
.kaart{
  background:var(--wit);border:1px solid var(--lijn);border-radius:2px;padding:30px;
  display:flex;flex-direction:column;gap:13px;transition:border-color .2s,transform .2s;
}
.kaart:hover{border-color:var(--lijn-hard);transform:translateY(-2px)}
.kaart h3{margin:0}
.kaart p{color:var(--grijs);margin:0}
.kaart-nummer{
  font-family:var(--serif);font-weight:700;font-size:34px;line-height:1;color:var(--geel-diep);
  letter-spacing:-.03em;
}
.kaart-lijst{display:flex;flex-direction:column;gap:8px}
.kaart-lijst li{font-size:14px;color:var(--grijs);padding-left:18px;position:relative;line-height:1.5}
.kaart-lijst li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--geel)}
.kaart-voet{margin-top:auto;padding-top:16px}
.kaart-beeld{padding:0;overflow:hidden}
.kaart-beeld .kaart-tekst{padding:26px 30px 30px;display:flex;flex-direction:column;gap:13px}

/* ---------- Donker paneel ---------- */
.paneel{background:var(--inkt);color:#fff;border-radius:2px;padding:46px 44px}
.paneel h2,.paneel h3{color:#fff}
.paneel .kicker{color:var(--geel)}
.paneel .lede,.paneel p{color:rgba(255,255,255,.72)}
.paneel-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:32px}
.tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.tegel{background:var(--inkt-3);border:1px solid rgba(255,255,255,.12);border-radius:2px;padding:20px}
.tegel-uit{background:rgba(254,216,0,.1);border-color:rgba(254,216,0,.4)}
.tegel span{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:10px}
.tegel b{display:block;font-family:var(--serif);font-weight:700;font-size:38px;line-height:1;letter-spacing:-.03em;color:#fff}
.tegel em{display:block;font-style:normal;font-size:12px;color:rgba(255,255,255,.5);margin-top:8px}
.paneel .pijllink{color:var(--geel)}

/* ---------- Citaat ---------- */
.citaat{background:var(--wit);border:1px solid var(--lijn);border-left:4px solid var(--geel);border-radius:2px;padding:44px 46px}
.citaat blockquote{
  margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(23px,2.6vw,34px);
  line-height:1.24;letter-spacing:-.02em;max-width:26ch;
}
.citaat-onder{display:flex;align-items:center;gap:14px;margin-top:26px}
.citaat-onder div strong{display:block;font-size:14px}
.citaat-onder div span{font-size:12px;color:var(--grijs)}
.citaat-duo{display:grid;grid-template-columns:1fr 220px;gap:44px;align-items:center}

/* ---------- Stappen ---------- */
.stappen{border-top:1px solid var(--lijn)}
.stap{display:grid;grid-template-columns:88px 1fr;gap:28px;padding:34px 0;border-bottom:1px solid var(--lijn);align-items:start}
.stap-num{font-family:var(--serif);font-weight:700;font-size:36px;line-height:1;letter-spacing:-.03em;color:var(--geel-diep)}
.stap h3{margin-bottom:10px}
.stap p{color:var(--grijs);max-width:64ch}
.stap-detail{margin-top:14px}

/* ---------- Cijferbalk ---------- */
.cijfers{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--lijn);background:var(--wit);border-radius:2px}
.cijfer{padding:28px 24px;border-left:1px solid var(--lijn)}
.cijfer:first-child{border-left:0}
.cijfer b{display:block;font-family:var(--serif);font-weight:700;font-size:44px;line-height:1;letter-spacing:-.03em;margin-bottom:8px}
.cijfer span{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grijs)}

/* ---------- Tabel ---------- */
.tabel-wrap{overflow-x:auto;background:var(--wit);border:1px solid var(--lijn);border-radius:2px}
.tabel{width:100%;border-collapse:collapse;font-size:14px}
.tabel th,.tabel td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--lijn);vertical-align:top}
.tabel th{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grijs);background:var(--papier)}
.tabel tr:last-child td{border-bottom:0}
.tabel td{color:var(--grijs)}
.tabel td:first-child{color:var(--inkt);font-weight:500}

/* ---------- Case ---------- */
.case{background:var(--wit);border:1px solid var(--lijn);border-radius:2px;display:flex;flex-direction:column}
.case-tekst{padding:30px;display:flex;flex-direction:column;gap:14px;flex:1}
.case-cijfers{display:flex;gap:30px;flex-wrap:wrap;margin-top:4px;padding-top:18px;border-top:1px solid var(--lijn)}
.case-cijfers div b{display:block;font-family:var(--serif);font-weight:700;font-size:32px;line-height:1;letter-spacing:-.03em}
.case-cijfers div span{font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--grijs)}

/* ---------- Regels ---------- */
.regels{border-top:1px solid var(--lijn)}
.regel{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--lijn);transition:padding-left .2s}
.regel:hover{padding-left:8px}
.regel h3{margin:0 0 5px}
.regel-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--grijs)}

/* ---------- Logostroom ---------- */
.stroom{
  overflow:hidden;padding:24px 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.stroom-spoor{display:flex;gap:48px;width:max-content;animation:schuif 96s linear infinite}
.stroom:hover .stroom-spoor{animation-play-state:paused}
.stroom-spoor span{
  font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:-.02em;
  color:var(--grijs);white-space:nowrap;
}
@keyframes schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Portret ---------- */
.portret{display:flex;flex-direction:column;gap:14px}
.portret-naam{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.02em}
.portret-rol{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grijs);margin-top:3px}
.portret p{color:var(--grijs);font-size:14.5px;margin-top:8px}

/* ---------- Vraag en antwoord ---------- */
.vraag{border-bottom:1px solid var(--lijn);padding:22px 0}
.vraag summary{
  cursor:pointer;list-style:none;font-family:var(--serif);font-weight:700;font-size:20px;
  letter-spacing:-.015em;display:flex;justify-content:space-between;gap:20px;align-items:center;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"+";font-family:var(--tekst);font-weight:700;color:var(--geel-diep);font-size:19px}
.vraag[open] summary::after{content:"\2013"}
.vraag p{margin-top:13px;color:var(--grijs);max-width:66ch}

/* ---------- Formulier ---------- */
.formulier{display:grid;gap:16px}
.veld{display:grid;gap:7px}
.veld label{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grijs)}
.veld input,.veld select,.veld textarea{
  background:var(--wit);border:1px solid var(--lijn-hard);color:var(--inkt);
  padding:13px 15px;font-family:var(--tekst);font-size:15px;border-radius:2px;width:100%;
}
.veld textarea{min-height:128px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--inkt);box-shadow:0 0 0 3px var(--geel-zacht)}
.veld-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- Paginakop ---------- */
.paginakop{padding:calc(var(--kop-hoogte) + 52px) 0 56px;border-bottom:1px solid var(--lijn)}
.paginakop h1{font-size:clamp(34px,4.4vw,58px);margin:20px 0 20px;max-width:19ch}
.paginakop-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.kruimel{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grijs);margin-bottom:22px}
.kruimel a:hover{color:var(--inkt)}

/* ---------- Afsluiter ---------- */
.afsluiter{background:var(--inkt);color:#fff;padding:88px 0}
.afsluiter h2{color:#fff;margin:20px 0 20px;max-width:18ch}
.afsluiter .lede{color:rgba(255,255,255,.72);margin-bottom:32px}
.afsluiter .kicker{color:var(--geel)}

/* ---------- Voettekst ---------- */
.voet{background:var(--papier);border-top:1px solid var(--lijn);padding:64px 0 30px}
.voet-boven{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--lijn)}
.voet-kop{display:block;font-family:var(--tekst);font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grijs);margin-bottom:16px}
.voet ul{display:grid;gap:10px}
.voet ul a{font-size:14px;color:var(--grijs)}
.voet ul a:hover{color:var(--inkt)}
.voet-brief p{font-size:14px;color:var(--grijs);max-width:38ch}
.brief-form{display:flex;gap:8px;margin-top:16px;max-width:380px}
.brief-form input{flex:1;background:var(--wit);border:1px solid var(--lijn-hard);color:var(--inkt);padding:12px 14px;font-family:var(--tekst);font-size:14px;border-radius:2px}
.brief-form input:focus{outline:none;border-color:var(--inkt)}
.brief-form button{background:var(--inkt);border:1px solid var(--inkt);color:var(--geel);padding:12px 18px;border-radius:2px;font-family:var(--tekst);font-size:13px;font-weight:700;cursor:pointer}
.brief-form button:hover{background:var(--inkt-2)}
.colofon{display:flex;flex-wrap:wrap;gap:8px 26px;padding-top:24px;font-size:12px;color:var(--grijs)}
.colofon-merk{display:flex;align-items:center;gap:17px;margin-bottom:16px}

/* ---------- Beweging ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.zichtbaar{opacity:1;transform:none}
.geen-js .reveal,.direct .reveal{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .stroom-spoor,.stip{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsief ---------- */
@media (max-width:1080px){
  .hero-raster,.voorpagina,.paginakop-raster,.beeld-duo{grid-template-columns:1fr;gap:40px}
  .beeld-duo-om{direction:ltr}
  .citaat-duo{grid-template-columns:1fr;gap:28px}
  .voet-boven{grid-template-columns:1fr 1fr;gap:34px}
  .borden{grid-template-columns:1fr}
  .bord{border-left:0;border-top:1px solid var(--lijn)}
  .bord:first-child{border-top:0}
  .tegels{grid-template-columns:repeat(2,1fr)}
  .galerij{grid-template-columns:repeat(2,1fr)}
  .galerij .media:first-child{grid-column:span 2;grid-row:auto}
  .dossier-regel{grid-template-columns:104px 1fr}
  .dossier-zij{grid-column:2;flex-direction:row;align-items:center;gap:16px}
}
@media (max-width:860px){
  .nav-schakel{display:block}
  .nav-links{
    display:none;position:absolute;top:70px;left:0;right:0;background:var(--wit);
    border-bottom:1px solid var(--lijn);box-shadow:0 12px 24px rgba(10,10,10,.08);
    flex-direction:column;align-items:stretch;padding:10px 16px 20px;
  }
  .nav-links.open{display:flex}
  .nav-link{padding:13px 8px;border-bottom:1px solid var(--lijn)}
  .nav-link.actief{box-shadow:none;border-left:3px solid var(--geel)}
  .nav-knop{margin:14px 8px 0;justify-content:center}
  .raster-2,.raster-3,.raster-4,.cijfers,.veld-2{grid-template-columns:1fr}
  .cijfer{border-left:0;border-top:1px solid var(--lijn)}
  .cijfer:first-child{border-top:0}
  .vak{padding:68px 0}
  .hero{padding:calc(var(--kop-hoogte) + 36px) 0 56px}
  .paginakop{padding:calc(var(--kop-hoogte) + 26px) 0 40px}
  .dossier-regel,.stap{grid-template-columns:1fr;gap:14px}
  .dossier-zij{grid-column:auto}
  .paneel{padding:32px 24px}
  .citaat{padding:32px 26px}
  .tikker-rechts{display:none}
  .video-meta{left:16px;right:16px;bottom:14px;flex-direction:column;align-items:flex-start}
  .speelknop{width:58px;height:58px}
}
@media (max-width:560px){
  /* Op een telefoon is achtentwintig pixels aan weerszijden te veel:
     de regels worden er kort van. Twintig leest rustiger. */
  .container,.container-smal{padding:0 20px}
  .voet-boven{grid-template-columns:1fr}
  .tegels{grid-template-columns:1fr}
  .galerij{grid-template-columns:1fr}
  .galerij .media:first-child{grid-column:auto}
  .brief-form{flex-direction:column;max-width:none}
}

/* ---------- Genummerde kaarten met een rustiger cijfer ---------- */
.nummers-klein .kaart-nummer{font-size:19px;letter-spacing:-.01em}

/* ---------- Vacaturefilter ---------- */
.filterregel{display:flex;gap:9px;align-items:center;cursor:pointer}
.filterregel input{width:auto;padding:0}
.filterwis{background:none;border:0;border-bottom:2px solid var(--lijn-hard);padding:0 0 2px;cursor:pointer;font:inherit}
.vacatureregel[hidden]{display:none}
.geenresultaat{margin-top:26px;padding:18px;border:1px solid var(--lijn-hard);background:var(--wit)}
.geenresultaat[hidden]{display:none}
.afleveringkop{
  display:flex;align-items:center;gap:16px;margin-top:28px;padding-top:24px;
  border-top:1px solid var(--lijn);
}
.afleveringkop strong{display:block;font-family:var(--serif);font-size:17px}
.afleveringkop .klein{display:block}
.afleveringknop{
  width:56px;height:56px;flex:0 0 56px;border-radius:50%;background:var(--inkt);color:var(--geel);
  display:grid;place-items:center;font-size:17px;border:0;cursor:pointer;transition:background .2s,color .2s;
}
.afleveringknop:hover{background:var(--geel);color:var(--inkt)}

/* ---------- Beeldmerk in de kop en de voettekst ---------- */
/* Het beeldmerk loopt van de bovenkant van de kapitaal tot de basislijn van
   de payoff, net als in de primaire lockup. Daar hoort deze maat bij. */
.merk-kwadrant{
  background:none;border-radius:0;padding:0;display:block;
  width:25px;height:25px;flex:0 0 25px;
}
.merk-kwadrant svg{width:100%;height:100%;display:block}
.merk-sub{white-space:nowrap}

/* ---------- Referenties ---------- */
.referenties{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.referentie{
  margin:0;background:var(--wit);padding:34px 32px 30px;
  display:flex;flex-direction:column;gap:18px;position:relative;
}
.referentie-teken{
  font-family:var(--serif);font-weight:700;font-size:52px;line-height:.6;
  color:var(--geel);display:block;height:22px;
}
.referentie blockquote{margin:0;font-size:15.5px;line-height:1.62;color:var(--inkt)}
.referentie figcaption{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:auto;padding-top:18px;border-top:1px solid var(--lijn);
}
.referentie figcaption strong{display:block;font-size:14px}
.referentie figcaption span{display:block;font-size:12px;color:var(--grijs)}
.referentie figcaption .badge{margin-left:auto}
@media (max-width:1080px){ .referenties{grid-template-columns:1fr 1fr} }
@media (max-width:720px){
  .referenties{grid-template-columns:1fr}
  .referentie{padding:28px 24px 26px}
  .referentie figcaption .badge{margin-left:0}
}

/* ---------- Hoe wij het aanpakken: gecentreerd blok ---------- */
.aanpak-midden .kop-blok{text-align:center;margin-left:auto;margin-right:auto;max-width:60ch}
.aanpak-midden .kop-blok .kicker{justify-content:center}
.aanpak-midden .kop-blok .lede{margin-left:auto;margin-right:auto}
.aanpak-midden .stappen{max-width:760px;margin:0 auto}
.aanpak-midden .stap{grid-template-columns:64px 1fr;gap:22px}
.aanpak-midden .stap p{max-width:none}
@media (max-width:700px){
  .aanpak-midden .stap{grid-template-columns:1fr;gap:8px}
}
.brief-kop{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--geel-diep);margin:14px 0 8px;
}
.brief-onder{display:block;margin-top:10px;font-size:11.5px;color:var(--grijs)}

/* =========================================================
   Uitbreiding: megamenu en nieuwsonderdelen
   Nieuwspresentatie naar het model van bnr.nl, in het
   bestaande papier/inkt/geel-palet.
   ========================================================= */

/* ---------- Megamenu ---------- */
.nav{position:relative}
/* Het paneel moet over de volle breedte staan, niet binnen de container */
.nav-binnen{position:static}
.nav-item{position:static;display:flex;align-items:center}
.nav-item > .nav-link{display:inline-flex;align-items:center;gap:7px}
.nav-item > .nav-link::after{
  content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--grijs);transition:transform .2s ease;
}
.nav-item:hover > .nav-link::after{transform:rotate(180deg)}

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--wit);border-top:1px solid var(--lijn);border-bottom:2px solid var(--inkt);
  box-shadow:0 20px 44px rgba(10,10,10,.14);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:90;
}
.nav-item:hover > .mega,
.nav-item:focus-within > .mega,
.nav-item.open > .mega{opacity:1;visibility:visible;transform:none}
.mega-binnen{
  max-width:var(--breed);margin:0 auto;padding:34px 28px 36px;
  display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:44px;
}
.mega-kolom h5{
  font-family:var(--tekst);font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--grijs);margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--inkt);
}
.mega-link{display:block;padding:10px 0;border-bottom:1px solid var(--lijn)}
.mega-link:last-child{border-bottom:0}
.mega-link strong{
  display:block;font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:-.01em;line-height:1.25;
}
.mega-link span{display:block;font-size:12.5px;color:var(--grijs);margin-top:3px}
.mega-link:hover strong{
  text-decoration:underline;text-decoration-color:var(--geel);
  text-decoration-thickness:2px;text-underline-offset:3px;
}
.mega-uit{background:var(--papier);border:1px solid var(--lijn);border-radius:2px;overflow:hidden}
.mega-uit .media{border:0;border-radius:0}
.mega-uit-tekst{padding:18px 20px 20px}
.mega-uit-titel{display:block;font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1.25;margin:10px 0 8px}
.mega-uit-tekst p{font-size:13.5px;color:var(--grijs);margin:0 0 14px}
.mega-voet{
  border-top:1px solid var(--lijn);background:var(--papier);
}
.mega-voet-binnen{
  max-width:var(--breed);margin:0 auto;padding:14px 28px;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
}
.mega-voet-binnen span{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grijs)}
.mega-voet-binnen a{font-size:13px;color:var(--inkt)}
.mega-voet-binnen a:hover{color:var(--grijs)}

/* ---------- Live balk ---------- */
.livebalk{background:var(--inkt);color:#fff;border-bottom:2px solid var(--geel)}
.livebalk-binnen{display:flex;align-items:center;gap:18px;padding-top:13px;padding-bottom:13px}
.live-badge{
  background:var(--rood);color:#fff;font-size:10px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;padding:5px 9px;border-radius:2px;display:inline-flex;align-items:center;gap:7px;
  flex:0 0 auto;
}
.live-badge i{width:6px;height:6px;background:#fff;border-radius:50%;animation:pols 1.8s ease-in-out infinite}
.live-speel{
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:var(--geel);color:var(--inkt);
  display:grid;place-items:center;transition:transform .2s ease;
}
.live-speel svg{width:15px;height:15px;margin-left:2px}
.livebalk a.live-speel:hover{transform:scale(1.07)}
.live-tekst{flex:0 0 auto}
.live-tekst strong{display:block;font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:-.01em}
.live-tekst span{font-size:11.5px;color:rgba(255,255,255,.55)}
.ticker{
  flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.ticker-spoor{display:flex;gap:40px;width:max-content;animation:schuif 55s linear infinite}
.ticker:hover .ticker-spoor{animation-play-state:paused}
.ticker-spoor a{
  white-space:nowrap;font-size:13.5px;color:rgba(255,255,255,.8);display:inline-flex;align-items:center;gap:10px;
}
.ticker-spoor a::before{content:"";width:5px;height:5px;background:var(--geel);border-radius:50%;flex:0 0 5px}
.ticker-spoor a:hover{color:#fff}

/* ---------- Nieuwslijst ---------- */
.nieuwslijst{border-top:2px solid var(--inkt)}
.nieuwsregel{display:block;padding:15px 0;border-bottom:1px solid var(--lijn)}
.nieuwsregel-titel{
  font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.26;letter-spacing:-.012em;
}
.nieuwsregel:hover .nieuwsregel-titel{
  text-decoration:underline;text-decoration-color:var(--geel);
  text-decoration-thickness:2px;text-underline-offset:3px;
}
.nieuwsregel-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:6px;font-size:12px;color:var(--grijs)}
.nieuwsregel-meta i{width:4px;height:4px;background:var(--geel);border-radius:50%;flex:0 0 4px}
.nieuwsregel-meta em{font-style:normal;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;font-size:10.5px;color:var(--inkt)}
.lijstkop{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:11px;border-bottom:2px solid var(--inkt);margin-bottom:0;
}
.lijstkop h3{font-size:21px}
.lijstkop a{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.lijstkop a:hover{color:var(--grijs)}

/* ---------- Voorpagina nieuws ---------- */
.nieuwsvoorpagina{display:grid;grid-template-columns:1.3fr .7fr;gap:44px;align-items:start}
.leadartikel .media{margin-bottom:22px}
.leadartikel h2{font-size:clamp(28px,3.5vw,44px);margin-bottom:16px}
.leadartikel .lede{font-size:17.5px}
.leadmeta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
.subartikelen{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px;padding-top:32px;border-top:1px solid var(--lijn)}
.subartikel .media{margin-bottom:14px}
.subartikel h3{margin-bottom:8px}

/* ---------- Rubrieken ---------- */
.rubrieken{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:2px}
.rubriek{background:var(--wit);padding:26px 24px}
.rubriek-kop{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:11px;border-bottom:2px solid var(--inkt);margin-bottom:16px;
}
.rubriek-kop h3{font-size:20px}
.rubriek-kop a{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--grijs)}
.rubriek-kop a:hover{color:var(--inkt)}
.rubriek .media{margin-bottom:14px}
.rubriek-lead h3{margin:10px 0 8px}
.rubriek-lead p{font-size:13.5px;color:var(--grijs)}

/* ---------- Mediarij ---------- */
.mediarij{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mediakaart{display:block}
.mediakaart .media{margin-bottom:12px}
.mediakaart h3{font-size:16.5px;line-height:1.28}
.mediakaart:hover h4{
  text-decoration:underline;text-decoration-color:var(--geel);
  text-decoration-thickness:2px;text-underline-offset:3px;
}
.mediakaart .nieuwsregel-meta{margin-top:8px}
.duurbadge{
  position:absolute;right:10px;bottom:10px;background:rgba(10,10,10,.88);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.4px;padding:4px 8px;border-radius:2px;
}
.kleinspeel{
  position:absolute;left:10px;bottom:10px;width:36px;height:36px;border-radius:50%;
  background:var(--geel);color:var(--inkt);display:grid;place-items:center;
}
.kleinspeel svg{width:13px;height:13px;margin-left:2px}
.mediakaart:hover .kleinspeel{background:#fff}

/* ---------- Podcast ---------- */
.podcastlijst{border-top:2px solid var(--inkt)}
.podcast{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--lijn)}
.podcast-speel{
  width:48px;height:48px;flex:0 0 48px;border-radius:50%;background:var(--inkt);color:var(--geel);
  display:grid;place-items:center;transition:background .2s,color .2s;
}
.podcast-speel svg{width:16px;height:16px;margin-left:3px}
.podcast:hover .podcast-speel{background:var(--geel);color:var(--inkt)}
.podcast-tekst{flex:1;min-width:0}
.podcast-tekst h3{margin-bottom:5px}
.podcast-tekst p{font-size:13.5px;color:var(--grijs);margin:0 0 8px}
.podcast-golf{display:flex;align-items:flex-end;gap:2px;height:22px;flex:0 0 auto}
.podcast-golf i{width:3px;background:var(--lijn-hard);border-radius:1px}
.podcast:hover .podcast-golf i{background:var(--geel)}

/* ---------- Uitzendschema ---------- */
.schema{border-top:2px solid var(--inkt)}
.schema-regel{
  display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--lijn);
}
.schema-tijd{font-family:var(--serif);font-weight:700;font-size:18px;letter-spacing:-.02em}
.schema-regel h3{font-size:17px;margin:0 0 3px}
.schema-regel p{font-size:13px;color:var(--grijs);margin:0}
.schema-regel.nu{background:var(--geel-zacht);padding-left:14px;padding-right:14px;border-bottom-color:var(--geel)}
.schema-regel.nu .schema-tijd{color:var(--inkt)}

/* ---------- Vaste speler ---------- */
/* De speler is verborgen tot iemand op afspelen drukt; het script zet dan de ruimte onderaan. */
body{padding-bottom:0}
.speler{
  position:fixed;left:0;right:0;bottom:0;z-index:75;background:var(--inkt);color:#fff;
  border-top:2px solid var(--geel);
}
.speler-binnen{display:flex;align-items:center;gap:18px;padding:13px 0}
.speler-knop{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--geel);color:var(--inkt);
  display:grid;place-items:center;border:0;cursor:pointer;
}
.speler-knop svg{width:15px;height:15px;margin-left:2px}
.speler-tekst{flex:0 0 auto;min-width:0}
.speler-tekst strong{display:block;font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:-.01em}
.speler-tekst span{font-size:11.5px;color:rgba(255,255,255,.55)}
.speler-balk{flex:1;min-width:60px;height:4px;background:rgba(255,255,255,.18);position:relative;border-radius:2px}
.speler-balk i{position:absolute;left:0;top:0;bottom:0;width:36%;background:var(--geel);border-radius:2px}
.speler-tijd{font-size:12px;color:rgba(255,255,255,.6);flex:0 0 auto;font-variant-numeric:tabular-nums}
.speler-sluit{
  background:none;border:0;color:rgba(255,255,255,.5);font-size:20px;cursor:pointer;line-height:1;
  padding:4px 6px;flex:0 0 auto;
}
.speler-sluit:hover{color:#fff}

/* ---------- Responsief ---------- */
@media (max-width:1080px){
  .mega-binnen{grid-template-columns:1fr 1fr;gap:32px}
  .mega-uit{grid-column:span 2}
  .nieuwsvoorpagina{grid-template-columns:1fr;gap:36px}
  .subartikelen{grid-template-columns:1fr 1fr}
  .rubrieken{grid-template-columns:1fr}
  .mediarij{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav-item{display:block}
  .nav-item > .nav-link{justify-content:space-between;width:100%}
  .mega{
    position:static;opacity:1;visibility:visible;transform:none;display:none;
    box-shadow:none;border:0;background:var(--papier);
  }
  .nav-item.open > .mega{display:block}
  .nav-item:hover > .mega{display:none}
  .nav-item.open:hover > .mega{display:block}
  .mega-binnen{grid-template-columns:1fr;gap:22px;padding:14px 8px 18px}
  .mega-uit{grid-column:auto;display:none}
  .mega-voet{display:none}
  .livebalk-binnen{flex-wrap:wrap;gap:12px;padding-top:11px;padding-bottom:11px}
  .ticker{flex-basis:100%;order:3}
  .subartikelen{grid-template-columns:1fr}
  .mediarij{grid-template-columns:1fr}
  .schema-regel{grid-template-columns:76px 1fr;gap:14px}
  .speler-tekst{display:none}
}

/* ---------- Hogere vaste kop wanneer de livebalk meedraait ----------
   Dit zijn terugvalwaarden voor het geval JavaScript uitstaat. Met script
   meet de kop zichzelf op en zet die de maat exact. */
body[data-live]{--kop-hoogte:152px}
@media (max-width:860px){
  body[data-live]{--kop-hoogte:170px}
}

/* ---------- Rasterkolommen mogen krimpen ----------
   Zonder min-width:0 nemen grid- en flexitems hun min-content-breedte
   over, waardoor smalle schermen horizontaal gaan schuiven. */
.raster-2 > *,.raster-3 > *,.raster-4 > *,
.hero-raster > *,.voorpagina > *,.beeld-duo > *,.paginakop-raster > *,
.nieuwsvoorpagina > *,.subartikelen > *,.rubrieken > *,.mediarij > *,
.borden > *,.tegels > *,.galerij > *,.citaat-duo > *,
.dossier-regel > *,.stap > *,.schema-regel > *,.regel > *{min-width:0}

/* ---------- Vacature-indeling ----------
   Als eigen klasse, want een inline grid-breedte wint het van de media query. */
.vacature-indeling{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start}
.vacature-indeling > *{min-width:0}
.vacature-filter{position:sticky;top:calc(var(--kop-hoogte) + 20px)}
@media (max-width:1080px){
  .vacature-indeling{grid-template-columns:1fr;gap:28px}
  .vacature-filter{position:static}
}

/* ---------- Blogartikel met inhoudsopgave ---------- */
.artikel-indeling{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:start}
.artikel-indeling > *{min-width:0}
.artikel-kop{margin-bottom:34px}
.artikel-meta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:18px;font-size:12.5px;color:var(--grijs)}
.artikel-kop h1{font-size:clamp(30px,3.8vw,50px);margin-bottom:18px}
.artikel-kop .lede{font-size:19px}
.artikel-tekst{max-width:70ch}
.artikel-tekst h2{
  font-size:clamp(23px,2.4vw,30px);margin:44px 0 16px;scroll-margin-top:calc(var(--kop-hoogte) + 24px);
}
.artikel-tekst h2:first-child{margin-top:0}
.artikel-tekst p{font-size:16.5px;line-height:1.72;color:var(--inkt);margin-bottom:1.1em}
.artikel-tekst p strong{font-weight:700}
.artikel-tekst > ul{margin:0 0 1.4em;display:grid;gap:10px}
.artikel-tekst > ul li{padding-left:20px;position:relative;color:var(--grijs);line-height:1.6}
.artikel-tekst > ul li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:2px;background:var(--geel)}
.artikel-streep{height:1px;background:var(--lijn);border:0;margin:46px 0}

.inhoud{
  position:sticky;top:calc(var(--kop-hoogte) + 24px);
  border-left:2px solid var(--inkt);padding-left:20px;
}
.inhoud h4{
  font-family:var(--tekst);font-size:10.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--grijs);margin-bottom:14px;
}
.inhoud ol{display:grid;gap:2px;counter-reset:ih}
.inhoud a{
  display:block;padding:7px 0;font-size:13.5px;line-height:1.4;color:var(--grijs);
  border-bottom:1px solid var(--lijn);
}
.inhoud li:last-child a{border-bottom:0}
.inhoud a::before{
  counter-increment:ih;content:counter(ih,decimal-leading-zero);
  font-family:var(--serif);font-weight:700;color:var(--geel-diep);margin-right:9px;
}
.inhoud a:hover{color:var(--inkt)}
.inhoud-deel{margin-top:22px;padding-top:18px;border-top:1px solid var(--lijn)}
.inhoud-deel span{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grijs);display:block;margin-bottom:10px}
.inhoud-deel a{display:inline-block;border:0;padding:0;margin-right:14px;font-size:13px;color:var(--inkt)}
.inhoud-deel a::before{content:none}

.auteur-blok{display:flex;gap:16px;align-items:flex-start;padding:26px 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);margin:40px 0}
.auteur-blok .monogram{width:56px;flex:0 0 56px;font-size:20px}
.auteur-blok strong{display:block;font-family:var(--serif);font-size:18px;letter-spacing:-.01em}
.auteur-blok span{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--grijs)}
.auteur-blok p{font-size:14px;color:var(--grijs);margin:8px 0 0}

.hubblok{
  background:var(--geel-zacht);border-left:3px solid var(--geel);border-radius:2px;
  padding:20px 22px;margin:0 0 32px;
}
.hubblok span{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grijs);display:block;margin-bottom:8px}
.hubblok strong{display:block;font-family:var(--serif);font-size:18px;letter-spacing:-.01em;margin-bottom:5px}
.hubblok p{font-size:13.5px;color:var(--grijs);margin:0}

@media (max-width:1080px){
  .artikel-indeling{grid-template-columns:1fr;gap:34px}
  .inhoud{position:static;border-left:0;border-top:2px solid var(--inkt);padding-left:0;padding-top:18px;order:-1}
}

/* ---------- Blogoverzicht met zijkolom ---------- */
.blog-indeling{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:start}
.blog-indeling > *{min-width:0}
@media (max-width:1080px){
  .blog-indeling{grid-template-columns:1fr;gap:30px}
}

/* ---------- Overslaan naar hoofdinhoud (a11y) ---------- */
.overslaan{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--inkt);color:var(--geel);padding:14px 22px;border-radius:0 0 2px 0;
  font-size:14px;font-weight:700;
}
.overslaan:focus{left:0}
main:focus{outline:none}

/* ---------- Voettekst als sitemap (hoofdstuk 8.3) ---------- */
.voet-boven{grid-template-columns:1.4fr repeat(var(--voet-kolommen,3),minmax(0,1fr))}
.voet-kop{
  font-family:var(--tekst);font-size:10.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--grijs);margin-bottom:16px;
}
@media (max-width:1080px){ .voet-boven{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:860px){ .voet-boven{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .voet-boven{grid-template-columns:1fr} }

/* ---------- Artikelonderdelen ---------- */
.artikel-tekst .artikel-lijst{margin:0 0 22px;padding:0;list-style:none}
.artikel-tekst .artikel-lijst li{position:relative;padding-left:24px;margin-bottom:10px;color:var(--grijs);line-height:1.6}
.artikel-tekst .artikel-lijst li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:2px;background:var(--geel)}
.artikel-tekst .artikel-lijst li strong{color:var(--inkt)}
.artikel-tekst .artikel-stappen{margin:0 0 24px;padding:0;list-style:none;counter-reset:stapje}
.artikel-tekst .artikel-stappen li{counter-increment:stapje;position:relative;padding-left:44px;margin-bottom:16px}
.artikel-tekst .artikel-stappen li::before{
  content:counter(stapje,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--serif);font-weight:700;font-size:19px;color:var(--geel-diep);
}
.artikel-tekst .artikel-stappen li strong{display:block;font-family:var(--serif);font-size:18px;letter-spacing:-.01em;margin-bottom:3px}
.artikel-tekst .artikel-stappen li span{color:var(--grijs);line-height:1.6}
.artikel-kader{background:var(--wit);border:1px solid var(--lijn);border-left:3px solid var(--geel);border-radius:2px;padding:20px 22px;margin:0 0 24px}
.artikel-kader strong{display:block;font-family:var(--tekst);font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grijs);margin-bottom:8px}
.artikel-kader p{margin:0;color:var(--inkt)}
.artikel-tekst .tabel-wrap{margin:0 0 24px}
.artikel-tekst a{text-decoration:underline;text-decoration-color:var(--geel);text-decoration-thickness:2px;text-underline-offset:3px}
.artikel-tekst a:hover{color:var(--grijs)}

/* ---------- Nieuwscarrousel ---------- */
.carrousel{position:relative}
.carrousel-venster{overflow:hidden}
.carrousel-spoor{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.carrousel-dia{
  flex:0 0 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start;
}
.nieuwskaart{
  display:flex;flex-direction:column;background:var(--wit);border:1px solid var(--lijn);
  border-radius:2px;overflow:hidden;transition:border-color .2s,transform .2s;height:100%;
}
.nieuwskaart:hover{border-color:var(--lijn-hard);transform:translateY(-2px)}
.nieuwskaart .media{border:0;border-radius:0}
.nieuwskaart-tekst{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.nieuwskaart-tekst p{color:var(--grijs);font-size:14.5px;margin:0}
.nieuwskaart-tekst .pijllink{margin-top:auto;align-self:flex-start;padding-top:6px}
.nieuwskaart:hover h3{
  text-decoration:underline;text-decoration-color:var(--geel);
  text-decoration-thickness:2px;text-underline-offset:3px;
}
.carrousel-bediening{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--lijn);
}
.carrousel-stippen{display:flex;gap:8px}
.carrousel-stip{
  width:26px;height:4px;border:0;background:var(--lijn-hard);cursor:pointer;padding:0;
  border-radius:2px;transition:background .2s;
}
.carrousel-stip.actief{background:var(--geel)}
.carrousel-pijlen{display:flex;gap:8px}
.carrousel-knop{
  width:38px;height:38px;border:1px solid var(--lijn-hard);background:transparent;
  color:var(--inkt);cursor:pointer;border-radius:2px;font-size:15px;line-height:1;
  transition:background .18s,border-color .18s;
}
.carrousel-knop:hover{background:var(--inkt);color:var(--geel);border-color:var(--inkt)}
.carrousel-wissel{font-size:12px;color:var(--grijs)}
@media (max-width:1080px){ .carrousel-dia{grid-template-columns:repeat(2,1fr)} }
@media (max-width:860px){ .carrousel-dia{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .carrousel-spoor{transition:none} }

/* ---------- Bronvermelding ---------- */
.bronblok{
  background:var(--wit);border:1px solid var(--lijn);border-left:3px solid var(--inkt);
  border-radius:2px;padding:22px 24px;margin-top:32px;
}
.bronblok span{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--grijs);margin-bottom:8px;
}
.bronblok strong{display:block;font-family:var(--serif);font-size:18px;margin-bottom:6px}
.bronblok p{color:var(--grijs);font-size:14.5px;margin:0 0 12px}

/* ---------- Merkpagina ---------- */
.merkraster{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.merkkaart{margin:0;background:var(--wit);border:1px solid var(--lijn);border-radius:2px;overflow:hidden}
.merkvlak{border-bottom:1px solid var(--lijn);background:var(--papier);display:grid;place-items:center;padding:14px}
.merkvlak svg{width:100%;height:auto;max-width:420px;display:block}
.merkkaart figcaption{padding:20px 22px 22px}
.merkkaart figcaption h3{margin:0 0 6px}
.faviconraster{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.faviconkaart{margin:0;background:var(--wit);border:1px solid var(--lijn);border-radius:2px;padding:18px;text-align:center;position:relative}
.favicongroot svg{width:64px;height:64px;margin:0 auto;border-radius:2px}
.faviconklein{position:absolute;top:14px;right:14px}
.faviconklein svg{width:16px;height:16px;border-radius:1px}
.faviconkaart figcaption{margin-top:12px}
.faviconkaart figcaption strong{display:block;font-family:var(--serif);font-size:16px}
.faviconkaart figcaption span{font-size:11.5px;color:var(--grijs)}
@media (max-width:860px){
  .merkraster{grid-template-columns:1fr}
  .faviconraster{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Weekcarrousel ---------- */
.weekcarrousel{position:relative}
.carrousel-week[hidden]{display:none}
.weekbalk{
  display:flex;align-items:center;gap:10px;
  margin:0 0 18px;padding:9px 14px;
  border:1px solid var(--lijn-hard);
  background:var(--papier);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--inkt);
}
.weekbalk strong{font-weight:700}
.weekbalk-punt{
  width:8px;height:8px;flex:0 0 8px;border-radius:50%;
  background:var(--geel);box-shadow:0 0 0 3px rgba(254,216,0,.28);
}
@media (max-width:620px){
  .weekbalk{text-transform:none;letter-spacing:0;font-size:12.5px;align-items:flex-start}
  .weekbalk-punt{margin-top:5px}
}
.weekbalk-scheiding{width:4px;height:4px;flex:0 0 4px;border-radius:50%;background:var(--lijn-hard)}
@media (max-width:620px){ .weekbalk{flex-wrap:wrap} .weekbalk-scheiding{display:none} }

/* ---------- Voorpagina als carrousel ---------- */
.carrousel-dia.dia-lead{grid-template-columns:1fr;gap:0}
.voorpagina-carrousel .carrousel-bediening{margin-top:22px;padding-top:16px}
.leadartikel .leadtitel{font-size:clamp(26px,3.2vw,42px);line-height:1.1;margin:0 0 16px}
.leadartikel .leadtitel a{color:inherit;text-decoration:none}
.leadartikel .leadtitel a:hover{
  text-decoration:underline;text-decoration-color:var(--geel);
  text-decoration-thickness:3px;text-underline-offset:4px;
}
.weekcarrousel .nieuwsvoorpagina{align-items:start}
@media (max-width:1080px){
  .carrousel-dia.dia-lead{grid-template-columns:1fr}
}

/* ---------- Podcastregel als blok met eigen speelknop ---------- */
.podcast{cursor:default}
.podcast-speel{border:0;padding:0;cursor:pointer;font:inherit}
.podcast h3 a{color:inherit;text-decoration:none}
.podcast:hover h3 a,.podcast h3 a:hover{
  text-decoration:underline;text-decoration-color:var(--geel);
  text-decoration-thickness:2px;text-underline-offset:3px;
}
.speler[hidden]{display:none}
.speler audio{display:none}

/* ---------- Voorpagina, kolommen onderaan uitgelijnd ---------- */
.weekcarrousel .nieuwsvoorpagina{align-items:stretch}
.weekcarrousel .voorpagina-carrousel{display:flex;flex-direction:column}
.weekcarrousel .voorpagina-carrousel .carrousel-venster{flex:0 0 auto}
.weekcarrousel .voorpagina-carrousel .carrousel-bediening{margin-top:auto}
.voorpagina-lijst{display:flex;flex-direction:column}
.voorpagina-lijst .nieuwslijst{flex:1}
.voorpagina-lijst .nieuwsregel:last-child{border-bottom:0}
@media (max-width:1080px){
  .weekcarrousel .voorpagina-carrousel .carrousel-bediening{margin-top:22px}
}


/* ---------- Beeldmerken ---------- */
.beeldmerkraster{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.beeldmerkkaart{margin:0;background:var(--wit);display:flex;flex-direction:column}
.beeldmerkvlak{
  display:grid;place-items:center;padding:34px 20px;background:var(--papier);
  border-bottom:1px solid var(--lijn);
}
.beeldmerkvlak svg{width:108px;height:108px;display:block}
.beeldmerkkaart figcaption{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px}
.beeldfaviconraster{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.beeldfaviconkaart{margin:0;background:var(--wit);padding:20px;display:flex;flex-direction:column;gap:12px;align-items:center}
.beeldfaviconpaar{display:flex;gap:8px}
.beeldfaviconpaar svg{width:56px;height:56px;display:block;border:1px solid var(--lijn)}
.beeldfaviconklein{display:flex;gap:8px}
.beeldfaviconklein svg{width:16px;height:16px;display:block}
.beeldfaviconkaart figcaption{display:flex;gap:8px;align-items:baseline;font-size:12px;color:var(--grijs)}
.beeldfaviconkaart figcaption strong{font-family:var(--serif);color:var(--inkt)}
@media (max-width:1080px){
  .beeldmerkraster{grid-template-columns:repeat(3,1fr)}
  .beeldfaviconraster{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:760px){
  .beeldmerkraster{grid-template-columns:repeat(2,1fr)}
  .beeldfaviconraster{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Merkontwerp, serie twee ---------- */
.merkserie{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.merkserie-kaart{margin:0;background:var(--wit);display:flex;flex-direction:column}
.merkserie-vlak{
  display:grid;place-items:center;padding:40px 20px;background:var(--papier);
  border-bottom:1px solid var(--lijn);
}
.merkserie-vlak svg{width:96px;height:96px;display:block}
.merkserie-kaart figcaption{padding:20px 22px 24px;display:flex;flex-direction:column;gap:7px;flex:1}
.merkserie-oordeel{
  color:var(--grijs);margin-top:auto;padding-top:12px;
  border-top:1px solid var(--lijn);font-style:italic;
}
.merkserie-favicons{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.merkserie-faviconkaart{
  margin:0;background:var(--wit);padding:20px;display:flex;flex-direction:column;
  gap:12px;align-items:center;
}
.merkserie-faviconpaar{display:flex;gap:6px}
.merkserie-faviconpaar svg{width:54px;height:54px;display:block}
.merkserie-faviconklein{display:flex;gap:6px}
.merkserie-faviconklein svg{width:16px;height:16px;display:block}
.merkserie-faviconkaart figcaption{display:flex;gap:8px;align-items:baseline;font-size:12px;color:var(--grijs)}
.merkserie-faviconkaart figcaption strong{font-family:var(--serif);color:var(--inkt)}
@media (max-width:1080px){
  .merkserie{grid-template-columns:repeat(3,1fr)}
  .merkserie-favicons{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:760px){
  .merkserie{grid-template-columns:repeat(2,1fr)}
  .merkserie-favicons{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Logopagina ---------- */
.logotoon{
  border:1px solid var(--lijn);background:var(--papier);
  padding:44px;display:grid;place-items:center;overflow-x:auto;
}
.logotoon-groot{padding:64px 44px;margin-top:30px}
.logotoon svg{max-width:100%;height:auto;display:block}
.logoraster{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.logoraster-vier{grid-template-columns:repeat(4,1fr)}
.logokaart{margin:0;background:var(--wit);display:flex;flex-direction:column}
.logovlak{
  display:grid;place-items:center;padding:34px 24px;background:var(--papier);
  border-bottom:1px solid var(--lijn);min-height:150px;overflow-x:auto;
}
.logovlak svg{max-width:100%;height:auto;display:block}
.logovlak-donker{background:#141414}
.logovlak-strak{padding:24px;background:var(--papier)}
.logovlak-tegel{gap:14px;grid-auto-flow:column;align-items:center}
.logotegel-klein{display:grid;place-items:center;width:16px}
.logokaart figcaption{padding:18px 22px 22px}
@media (max-width:900px){
  .logoraster,.logoraster-vier{grid-template-columns:1fr}
  .logotoon{padding:26px}
}

/* ---------- Verhalen van kandidaten ---------- */
.verhalen .carrousel-dia{grid-template-columns:1fr;gap:0}
.verhalen .citaat{width:100%}
.verhaal-route{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
@media (max-width:860px){
  .verhalen .citaat{padding:30px 26px}
  .verhalen .citaat-duo{grid-template-columns:1fr}
}

/* ---------- Slotblok ---------- */
.slot-binnen{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.slot-onder{margin-top:22px;font-size:13px;color:rgba(255,255,255,.5)}
.slot-punten{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14)}
.slot-punt{background:var(--inkt);padding:24px 22px}
.slot-punt strong{
  display:block;font-family:var(--serif);font-weight:700;font-size:34px;
  letter-spacing:-.02em;line-height:1;color:var(--geel);
}
.slot-punt span{display:block;margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.66);line-height:1.45}
@media (max-width:900px){
  .slot-binnen{grid-template-columns:1fr;gap:40px}
}
.speler-balk{border:0;padding:0;cursor:pointer;appearance:none}
.speler-balk:hover i{background:#fff}
.speler-balk:focus-visible{outline:2px solid var(--geel);outline-offset:3px}

/* ---------- Salesbazen in de balk ---------- */
.live-merk{
  display:inline-block;margin-left:10px;font-style:normal;
  font-size:9px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--geel);border:1px solid rgba(254,216,0,.45);padding:2px 7px;border-radius:2px;
  vertical-align:1px;
}
.live-keuze{flex:0 0 auto;display:block;min-width:0}
.live-item{display:flex;align-items:center;gap:14px}
.live-item[hidden]{display:none}
.live-speel{border:0;padding:0;cursor:pointer;font:inherit}
.livebalk .live-speel:hover{transform:scale(1.07)}
.live-tekst strong{max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tikker-vacature::before{background:#fff !important}
.tikker-vacature{color:rgba(255,255,255,.62) !important}
@media (max-width:1180px){ .live-tekst span{display:none} }
@media (max-width:980px){ .live-merk{display:none} }
.speler-balk{height:6px;padding:0;touch-action:none}
.speler-balk:hover{height:8px;margin-top:-1px}
/* De tikker staat op een telefoon op een eigen regel, dus de titel van de
   aflevering mag daar breder zijn dan hij was. */
@media (max-width:860px){ .live-tekst strong{max-width:26ch} }
@media (max-width:420px){ .live-tekst strong{max-width:21ch} }

/* ---------- Kandidaatverhalen: geen kader, geen foto, rustiger gezet ---------- */
.verhalen .citaat{
  background:none;border:0;border-left:3px solid var(--geel);
  padding:4px 0 4px 30px;border-radius:0;
}
.verhalen blockquote{font-size:19px;line-height:1.55;max-width:76ch}
.verhalen .citaat-onder{margin-top:22px}
.verhalen .verhaal-route{margin-top:16px}
@media (max-width:860px){
  .verhalen blockquote{font-size:17px}
  .verhalen .citaat{padding-left:20px}
}

/* ---------- Schermweergaven van DealDrive ---------- */
.crmbeelden{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.crmbeeld{margin:0}
.crmbeeld figcaption{margin-top:16px}
.crmbeeld figcaption strong{
  display:block;font-family:var(--serif);font-weight:700;font-size:18px;
  letter-spacing:-.01em;margin-bottom:6px;
}
.crmbeeld figcaption span{display:block;font-size:14px;color:var(--grijs);line-height:1.6}
@media (max-width:900px){ .crmbeelden{grid-template-columns:1fr;gap:28px} }

/* ---------- Events ---------- */
.eventindeling{display:grid;grid-template-columns:1.45fr .55fr;gap:44px;align-items:start}
.eventkaart .kaart-lijst li{font-size:13.5px}
.aanmeldkaart{margin-top:38px}
.aanmeldvorm .veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){
  .eventindeling{grid-template-columns:1fr;gap:32px}
  .aanmeldvorm .veld-rij{grid-template-columns:1fr}
}

/* ---------- Plan een afspraak ---------- */
.afspraakindeling{display:grid;grid-template-columns:1.4fr .6fr;gap:44px;align-items:start}
.afspraakzij{display:grid;gap:20px}
.afspraakvorm .veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.keuzerij{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.keuze{
  display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--lijn-hard);background:var(--papier);font-size:13.5px;
  transition:border-color .15s,background .15s;
}
.keuze:hover{background:var(--wit)}
.keuze input{width:auto;padding:0;margin:0;flex:0 0 auto}
.keuze:has(input:checked){border-color:var(--inkt);background:var(--wit);box-shadow:inset 3px 0 0 var(--geel)}
@media (max-width:900px){
  .afspraakindeling{grid-template-columns:1fr;gap:32px}
  .afspraakvorm .veld-rij,.keuzerij{grid-template-columns:1fr}
}

/* ---------- Uitdagingen op de marktpaginas ---------- */
.uitdagingen{display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.uitdaging{
  position:relative;background:var(--wit);display:grid;
  grid-template-columns:96px 1fr;gap:26px;align-items:center;
  padding:30px 34px;transition:background .2s;
}
.uitdaging:hover{background:var(--papier)}
.uitdaging-nummer{
  font-family:var(--serif);font-weight:700;font-size:46px;line-height:1;
  letter-spacing:-.03em;color:var(--geel-diep);
}
.uitdaging-label{
  display:block;font-size:10px;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--grijs);margin-bottom:8px;
}
.uitdaging-tekst h3{font-size:21px;line-height:1.28;margin:0;max-width:64ch}
.uitdaging-streep{
  position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--geel);
  transform:scaleY(0);transform-origin:top;transition:transform .28s ease;
}
.uitdaging:hover .uitdaging-streep{transform:scaleY(1)}
@media (max-width:680px){
  .uitdaging{grid-template-columns:1fr;gap:10px;padding:24px 22px}
  .uitdaging-nummer{font-size:32px}
  .uitdaging-tekst h3{font-size:18px}
}

/* ---------- Vacaturedetail ---------- */
.vacature-blok{padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--lijn)}
.vacature-blok:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.deelrij{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.deelknop{
  font-size:12px;font-weight:600;padding:7px 12px;border:1px solid var(--lijn-hard);
  border-radius:2px;color:var(--inkt);
}
.deelknop:hover{background:var(--inkt);color:var(--geel);border-color:var(--inkt)}
@media (max-width:860px){
}

/* ---------- Prompt bij een AI-beeld ---------- */
.prompt{
  background:var(--inkt);color:#E8E6E0;padding:20px 22px;margin:16px 0 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.62;white-space:pre-wrap;word-break:break-word;
  border-left:3px solid var(--geel);
}
.prompt b{display:block;color:var(--geel);font-family:var(--sans);font-size:10.5px;
  font-weight:700;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:10px}
.prompt + .prompt{margin-top:10px}
.prompt-uit{border-left-color:#8C8A84;color:#B9B7B1}
.prompt-uit b{color:#B9B7B1}
.opname{border-top:1px solid var(--lijn);padding-top:34px;margin-top:34px}
.opname:first-child{border-top:0;padding-top:0;margin-top:0}
.opname-kop{display:flex;align-items:baseline;gap:16px;margin-bottom:6px}
.opname-num{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--geel-diep)}
.opname-waar{font-size:12.5px;color:var(--grijs);margin:0 0 20px}
@media (max-width:860px){ .prompt{padding:18px;font-size:12.5px} }

/* ---------- Aanraakvlakken ----------
   Op een telefoon moet een knop minstens 44 bij 44 pixels te raken zijn. Een
   aantal bedieningselementen zat daaronder. Waar het beeld niet groter mag
   worden, vergroot een pseudo-element het raakvlak zonder de vorm te wijzigen. */
@media (max-width: 860px) {
  .nav-schakel { width: 44px; height: 44px; }
  .live-speel { width: 44px; height: 44px; flex: 0 0 44px; }
  .carrousel-knop { width: 44px; height: 44px; }
  .brief-form button { min-height: 44px; }
  .pijllink { position: relative; display: inline-flex; padding: 13px 0; }
  .lijstkop a { display: inline-flex; align-items: center; min-height: 44px; }
  .knop, .knop-lijn, .knop-geel { min-height: 44px; }
  .merk { min-height: 44px; align-items: center; }
}
/* De stippen onder een carrousel zijn vier pixels hoog. Het zichtbare streepje
   blijft, het raakvlak wordt drie keer zo hoog. */
.carrousel-stip { position: relative; }
.carrousel-stip::after {
  content: ""; position: absolute; left: 0; right: 0; top: -20px; bottom: -20px;
}

/* ---------- Rekenhulp ---------- */
.reken{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.reken-groep{margin-bottom:30px}
.reken-groep > span{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--geel-diep);margin-bottom:14px;
}
.reken-veld{display:grid;grid-template-columns:1fr 128px;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--lijn)}
.reken-veld label{font-size:14.5px;line-height:1.4;display:block}
.reken-veld em{display:block;font-style:normal;font-size:12.5px;color:var(--grijs);margin-top:3px}
.reken-invoer{display:flex;align-items:center;gap:7px;justify-self:end}
.reken-invoer span{font-size:13px;color:var(--grijs);min-width:14px}
.reken-invoer input{
  width:92px;padding:9px 10px;border:1px solid var(--lijn-hard);background:var(--wit);
  font:inherit;font-size:15px;text-align:right;border-radius:2px;min-height:44px;
}
.reken-invoer input:focus{outline:2px solid var(--geel);outline-offset:1px}
.reken-uit{background:var(--inkt);color:#fff;padding:34px 32px;position:sticky;top:calc(var(--kop-hoogte) + 24px)}
.reken-uit h3{color:#fff;font-size:20px;margin:0 0 4px}
.reken-uit > p{color:rgba(255,255,255,.6);font-size:13.5px;margin:0 0 26px}
.reken-rij{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:14.5px}
.reken-rij span{color:rgba(255,255,255,.66)}
.reken-rij b{font-variant-numeric:tabular-nums;white-space:nowrap}
.reken-totaal{margin-top:22px;padding-top:20px;border-top:2px solid var(--geel)}
.reken-totaal .reken-rij{border:0;padding:5px 0;font-size:16px}
.reken-slot{margin-top:22px;padding:18px 20px;background:rgba(255,255,255,.06);border-left:3px solid var(--geel)}
.reken-slot b{display:block;font-family:var(--serif);font-size:19px;margin-bottom:6px}
.reken-slot span{font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.6}
.reken-balk{height:8px;background:rgba(255,255,255,.14);margin:6px 0 16px;overflow:hidden}
.reken-balk i{display:block;height:100%;background:var(--geel);transition:width .3s ease}
@media (max-width:900px){
  .reken{grid-template-columns:1fr;gap:34px}
  .reken-uit{position:static}
}
@media (max-width:520px){
  .reken-veld{grid-template-columns:1fr;gap:8px}
  .reken-invoer{justify-self:start}
}

/* ---------- Wat je krijgt: de opleveringen ----------
   Zelfde familie als het zwarte resultaatblok erboven: een genummerde regel
   met een gele streep, zodat de twee blokken bij elkaar horen. */
.oplevering{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;border-top:2px solid var(--inkt)}
.oplevering-regel{
  display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--lijn);
}
.oplevering-num{
  font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.2;
  color:var(--geel-diep);padding-top:1px;
}
.oplevering-regel p{margin:0;font-size:15.5px;line-height:1.5}
.oplevering-regel::after{content:none}
@media (max-width:760px){
  .oplevering{grid-template-columns:1fr;gap:0}
}

/* ---------- Downloadlinks in een tabel ----------
   In een tabel valt een gewone link niet op, want de cellen zijn al grijs. */
.bestandlink{color:var(--inkt);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--lijn)}
.bestandlink:hover{text-decoration-color:var(--inkt)}

/* ---------- Kopblok in het midden ----------
   Voor secties waarvan de inhoud in kolommen of rijen onder de kop
   staat: dan hangt een kop links los, en in het midden staat hij boven
   het geheel. */
.kop-midden{text-align:center}
.kop-midden p{margin-left:auto;margin-right:auto}

/* ---------- Vacature: de kaart bovenaan ----------
   Links een inktvlak met de rol, de plaats en het salaris, rechts de
   tekening. De tekeningen hebben hun onderwerp in een hoek staan, dus tekst
   eroverheen legt precies dat onderwerp toe. Naast elkaar blijven ze allebei
   leesbaar. */
.vac-kop{
  display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--inkt);margin-top:18px;overflow:hidden;
}
.vac-kop-inhoud{display:flex;flex-direction:column;justify-content:flex-end;padding:38px 36px 34px}
.vac-kop-inhoud h1{
  color:var(--papier);font-size:clamp(30px,3.4vw,46px);line-height:1.02;
  letter-spacing:-.02em;margin:16px 0 20px;
}
.vac-kop-beeld{width:100%;height:100%;min-height:340px;object-fit:cover;object-position:center 62%;display:block}
.vac-pillen{display:flex;flex-wrap:wrap;gap:8px}
.vac-pil{
  display:inline-flex;align-items:center;padding:7px 14px;
  background:rgba(250,250,247,.12);border:1px solid rgba(250,250,247,.28);
  color:var(--papier);font-size:13px;font-weight:600;letter-spacing:.01em;
}
.vac-pil-geel{background:var(--geel);border-color:var(--geel);color:var(--inkt)}
.vac-pil-lijn{background:transparent}

/* ---------- Vacature: tekst links, kern rechts ----------
   De kolom rechts blijft staan tijdens het scrollen, zodat salaris, plaats
   en de knop altijd in beeld zijn. */
.vac-indeling{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start}
.vac-indeling > *{min-width:0}
.vac-zij{position:sticky;top:calc(var(--kop-hoogte, 90px) + 20px);display:grid;gap:20px}
.vac-kort{background:var(--inkt);color:var(--papier);padding:26px 24px}
.vac-kort h2{color:var(--papier);font-size:20px;margin:0 0 16px}
.vac-kort-lijst{list-style:none;margin:0 0 22px;padding:0}
.vac-kort-lijst li{
  display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid rgba(250,250,247,.16);font-size:14px;
}
.vac-kort-lijst li:last-child{border-bottom:0}
.vac-kort-lijst li span:first-child{color:rgba(250,250,247,.6)}
.vac-kort-lijst li span:last-child{font-weight:600;text-align:right}
.vac-kort .knop{width:100%;justify-content:space-between}
@media (max-width:980px){
  .vac-indeling{grid-template-columns:1fr;gap:36px}
  .vac-zij{position:static}
}
@media (max-width:820px){
  .vac-kop{grid-template-columns:1fr}
  .vac-kop-beeld{grid-row:1;min-height:0;aspect-ratio:16/9}
  .vac-kop-inhoud{padding:26px 22px 24px}
}

/* ---------- Zeven kaarten naast elkaar ----------
   Zeven past niet in drie kolommen: dan blijft er een kaart alleen op de
   laatste rij over. In twaalf kolommen worden het er vier en drie, en
   staan beide rijen vol. */
.raster-zeven{display:grid;grid-template-columns:repeat(12,1fr);gap:28px}
.raster-zeven > *{grid-column:span 4}
.raster-zeven > *:nth-child(-n+4){grid-column:span 3}
@media (max-width:1080px){
  .raster-zeven{grid-template-columns:repeat(6,1fr)}
  .raster-zeven > *,.raster-zeven > *:nth-child(-n+4){grid-column:span 3}
  .raster-zeven > *:last-child{grid-column:span 6}
}
@media (max-width:760px){
  .raster-zeven{grid-template-columns:1fr;gap:20px}
  .raster-zeven > *,.raster-zeven > *:nth-child(-n+4),.raster-zeven > *:last-child{grid-column:span 1}
}

/* ---------- Lange woorden in de kleine kaarten ----------
   Hier stond hyphens:auto, om te voorkomen dat een lang woord het kader
   uit liep. Dat werkte, maar het brak ook gewone woorden af: reactief
   wer-ken, de te-lefoon. In een opsomming van vier kaarten naast elkaar
   leest dat als een drukfout.

   De teksten zijn nu kort genoeg om zonder streepjes te passen.
   overflow-wrap blijft als vangnet: een woord dat echt niet past breekt
   zonder streepje in plaats van over de rand te lopen. */
.nummers-klein .kaart h3,.nummers-klein .kaart p,.kaart h3,.kaart-lijst li{
  overflow-wrap:break-word;word-break:normal;hyphens:manual;
}

/* ---------- Schuifrij met de andere diensten ----------
   Zeven routes passen niet naast elkaar op een dienstpagina. In een rij die
   opzij schuift wel, en dan blijft de pagina eronder rustig. Alleen de naam,
   want de omschrijving staat op de pagina zelf. */
.schuifrij{
  display:flex;gap:16px;overflow-x:auto;padding-bottom:14px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.schuifrij::-webkit-scrollbar{height:6px}
.schuifrij::-webkit-scrollbar-thumb{background:var(--lijn)}
.schuifkaart{
  flex:0 0 auto;min-width:238px;max-width:300px;scroll-snap-align:start;
  display:grid;gap:10px;padding:22px 20px;border:1px solid var(--lijn);
  background:var(--wit);text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease;
}
.schuifkaart:hover{border-color:var(--inkt);transform:translateY(-2px)}
.schuifkaart-kicker{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--geel-diep);
}
.schuifkaart-naam{font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.2;letter-spacing:-.01em}
.schuifkaart-pijl{font-size:15px;color:var(--grijs)}
.schuifkaart:hover .schuifkaart-pijl{color:var(--inkt)}
@media (max-width:760px){
  .schuifkaart{min-width:200px;padding:18px 16px}
}

/* ---------- Balkitem dat alleen het menu opent ----------
   Het is een knop, geen link, want er zit geen pagina achter. Hij moet
   er wel hetzelfde uitzien als de rest van de balk. */
.nav-link-menu{
  /* Alleen weghalen wat een knop van zichzelf meebrengt. De maat, het
     gewicht en de ruimte komen uit .nav-link, net als bij de andere items. */
  -webkit-appearance:none;appearance:none;
  background:none;border:0;color:inherit;font-family:inherit;
  line-height:inherit;text-align:inherit;cursor:pointer;
}

/* ---------- Toestemming bij het inschrijfformulier ----------
   Wat er met de gegevens gebeurt hoort naast het formulier te staan, niet
   achter een link. Daarom een eigen vlak met een rand eromheen. */
.avg{border:1px solid var(--lijn);background:var(--wit);padding:22px 22px 18px;display:grid;gap:14px}
.avg .kop-klein{margin:0}
.avg .kaart-lijst{margin:0}
.avg .kaart-lijst li{font-size:14px}
.keuzeregel{
  display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;
  font-size:14px;line-height:1.5;cursor:pointer;
}
.keuzeregel input{width:18px;height:18px;margin-top:2px;accent-color:var(--geel-diep)}
.vormfout{border-color:#B00020 !important}

/* ---------- Genummerde groepen in een formulier ----------
   Een aanmelding met vijftien velden leest als een muur. In vier groepen
   met een eigen kop weet je waar je bent en hoeveel er nog komt. */
.vormgroep{border:0;border-top:1px solid var(--lijn);margin:0;padding:22px 0 0;display:grid;gap:16px}
.vormgroep:first-of-type{border-top:0;padding-top:0}
.vormgroep legend{
  padding:0;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--geel-diep);
}
[data-prijsregel]{padding:12px 14px;background:var(--wit);border:1px solid var(--lijn)}

/* ---------- Keuzelijsten ----------
   De maatvoering komt uit .veld input, zodat een keuzelijst en een invulveld
   naast elkaar precies even hoog zijn. Alleen het pijltje tekenen wij zelf,
   want dat van het besturingssysteem past bij geen enkele huisstijl. */
.veld select{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A0A0A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:11px 8px;
}
.veld select:invalid,.veld select option[value=""]{color:var(--grijs)}

/* Aanvullingen die alleen voor de Sales Campus-mock-up gelden. */

.afsluiter h2{max-width:40ch}

/* Prijskaarten */
.prijs-groot{
  font-family:var(--serif);font-weight:700;font-size:34px;letter-spacing:-.02em;line-height:1.1;
  margin:18px 0 6px;
}
.prijs-groot span{font-family:var(--tekst);font-weight:500;font-size:14px;color:var(--grijs);letter-spacing:0;margin-left:6px}
.prijs-onder{font-size:13px;color:var(--grijs);margin:0 0 4px}
.kaart-uitgelicht{border-color:var(--inkt);box-shadow:0 0 0 2px var(--inkt) inset;position:relative}
.kaart-uitgelicht::before{
  content:"Meest gekozen";position:absolute;top:-1px;right:18px;background:var(--geel);color:var(--inkt);
  font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:6px 10px;border-radius:0 0 2px 2px;
}
.kaart-uitgelicht .kicker{visibility:hidden}

/* Rekentabel prijzen: het goedkoopste vak per rij springt eruit */
.tabel .laagste{font-weight:700;background:rgba(254,216,0,.4);padding:3px 9px;border-radius:2px;white-space:nowrap}

/* Wat AI wel en niet doet */
.welniet{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.welniet .kaart ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.welniet .kaart li{padding-left:26px;position:relative;font-size:15px}
.welniet .kaart li::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:2px;background:var(--geel);
}
.welniet .kaart.niet li::before{background:var(--papier);border:2px solid var(--inkt);width:10px;height:10px}
@media (max-width:760px){.welniet{grid-template-columns:1fr}}

/* Artikelpagina */
.artikel{max-width:72ch;margin:0 auto}
.artikel p{font-size:17.5px;line-height:1.7;margin:0 0 22px}
.artikel p strong{font-family:var(--serif);font-size:19px}
.artikel-kopfoto{margin:0 0 34px}

/* Formulier demo */
.inschrijfvorm{display:grid;gap:18px}
.inschrijfvorm .veld-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.inschrijfvorm .veld-2{grid-template-columns:1fr}}
.inschrijfvorm label{display:block;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--grijs);margin-bottom:6px}
.inschrijfvorm input,.inschrijfvorm select,.inschrijfvorm textarea{
  width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--lijn);border-radius:2px;background:#fff;color:var(--inkt);
}
.inschrijfvorm textarea{min-height:120px;resize:vertical}
.inschrijfvorm input:focus,.inschrijfvorm select:focus,.inschrijfvorm textarea:focus{outline:2px solid var(--geel);outline-offset:1px;border-color:var(--inkt)}
.inschrijfvorm .vormfout{border-color:#B00020}
.inschrijfvorm .akkoord{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--grijs);text-transform:none;letter-spacing:0;font-weight:400;margin:0}
.inschrijfvorm .akkoord input{width:auto;margin-top:3px}
.lokvak{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Beeld met zwarte laag, voor de foto's in de paginakop */
.beeldlaag{position:relative;overflow:hidden;border-radius:2px}
.beeldlaag .media{border:0;border-radius:0}
.beeldlaag::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,10,.82) 0%,rgba(10,10,10,.3) 44%,rgba(10,10,10,0) 100%);
}
.beeldlaag-label{
  position:absolute;left:18px;bottom:16px;z-index:1;color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  max-width:76%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.beeldlaag-label::before{
  content:"";display:inline-block;width:18px;height:2px;background:var(--geel);vertical-align:middle;margin-right:9px;
}

/* Schermafdrukken niet bijsnijden */
.scherm .media{aspect-ratio:auto;background:#fff}
.scherm .media img{height:auto;object-fit:contain}

/* Werkpagina SEO: rustige tabel */
.werkpagina .tabel td:first-child{font-weight:700;white-space:nowrap}

/* Zoeken */
.zoekvorm .mini{display:block;margin-bottom:8px}
.zoekrij{display:flex;gap:10px;max-width:560px}
.zoekrij input{flex:1;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--lijn);border-radius:2px;background:#fff;min-width:0}
.zoekrij input:focus{outline:2px solid var(--geel);outline-offset:1px;border-color:var(--inkt)}
@media (max-width:560px){.zoekrij{flex-direction:column}}

/* Artikelpagina met zijkolom */
.artikel-raster{display:grid;grid-template-columns:280px minmax(0,1fr);gap:44px;align-items:start}
.artikel-zij{position:sticky;top:calc(var(--kop-hoogte) + 20px);display:grid;gap:18px}
.inhoud-lijst{list-style:none;counter-reset:inhoud;margin:12px 0 0;padding:0;display:grid;gap:8px}
.inhoud-lijst li{counter-increment:inhoud;display:flex;gap:10px;font-size:14px;line-height:1.4}
.inhoud-lijst li::before{content:counter(inhoud,decimal-leading-zero);font-family:var(--serif);font-weight:700;color:var(--geel-diep);min-width:22px}
.inhoud-lijst a:hover{text-decoration:underline;text-decoration-color:var(--geel);text-decoration-thickness:2px;text-underline-offset:3px}
.artikel h2{margin:38px 0 14px;font-size:clamp(24px,2.4vw,32px)}
.artikel h3{margin:26px 0 10px;font-size:21px}
.artikel ul,.artikel ol{margin:0 0 22px 22px;padding:0;display:grid;gap:8px;font-size:17px;line-height:1.6}
.artikel ul{list-style:none;margin-left:0}
.artikel ul li{padding-left:24px;position:relative}
.artikel ul li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:12px;background:var(--geel);border-radius:2px}
.artikel ol{list-style:decimal}
.artikel ol li::marker{font-family:var(--serif);font-weight:700}
.artikel a{text-decoration:underline;text-decoration-color:var(--geel);text-decoration-thickness:2px;text-underline-offset:3px}
.artikel a:hover{background:var(--geel-zacht)}
.auteur-kaart{display:flex;gap:16px;align-items:flex-start;margin-top:34px;padding:22px;border:1px solid var(--lijn);border-radius:2px;background:#fff}
.auteur-kaart strong{display:block;font-family:var(--serif);font-size:18px;margin-bottom:4px}
.auteur-kaart p{font-size:14.5px;color:var(--grijs);margin:0}
.paginakop .auteur{display:inline-flex;gap:12px;align-items:center}
.paginakop .auteur strong{display:block}
.paginakop .auteur em{display:block;font-style:normal;font-size:13px;color:var(--grijs)}
@media (max-width:960px){.artikel-raster{grid-template-columns:1fr}.artikel-zij{position:static}}

/* Twee knoppen in de kop: nooit afbreken in het midden van een knop. */
.nav .nav-knop{white-space:nowrap}
@media (max-width:1080px) and (min-width:861px){.nav-links{gap:14px}.nav .nav-knop{padding-left:12px;padding-right:12px}}

/* De slotkop als alinea, met de maat van een h2. */
.afsluiter p.slot-kop{font-family:var(--serif);font-weight:700;font-size:clamp(29px,3.4vw,48px);line-height:1.1;letter-spacing:-.02em;color:#fff;margin:20px 0 20px;max-width:18ch}
.artikel blockquote,.citaatblok{margin:0;padding:22px 26px;border-left:4px solid var(--geel);background:#fff;font-family:var(--serif);font-size:clamp(20px,2vw,26px);line-height:1.35;letter-spacing:-.01em}

/* Overlay over elke foto, zoals op salesfinders.nl: een donkere verloop
   van onderaf, zodat een label of kop erop leesbaar is. Schermafdrukken en
   tekeningen blijven vrij. Binnen .beeldlaag zit de laag al op de wrapper. */
.media:has(> img[src^="/assets/foto/"]):not(.beeldlaag .media)::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(10,10,10,.68) 0%,rgba(10,10,10,.22) 42%,rgba(10,10,10,0) 100%)}

/* Abonnementen: specificatietabel */
.abo-kaart .kaart-lijst li{text-transform:none}
.spec-tabel th{vertical-align:top}
.spec-tabel thead th{font-family:var(--serif);font-size:18px;letter-spacing:-.01em;text-transform:none}
.spec-prijs{display:block;font-family:var(--tekst);font-size:12px;font-weight:600;color:var(--grijs);margin-top:4px;letter-spacing:0}
.spec-tabel .spec-groep th{background:var(--inkt);color:var(--geel);font-family:var(--tekst);font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:10px 14px}
.spec-tabel td strong{display:block;font-family:var(--serif);font-size:16px}
.spec-uitleg{display:block;font-size:13px;color:var(--grijs);margin-top:2px}
.spec-cel{text-align:center;vertical-align:middle}
.spec-tabel .spec-uit{background:rgba(254,216,0,.12)}
.spec-ja,.spec-nee{display:inline-block;width:16px;height:16px;border-radius:2px;vertical-align:middle}
.spec-ja{background:var(--geel);box-shadow:0 0 0 2px var(--inkt) inset}
.spec-nee{border:2px solid var(--lijn);background:transparent}
.spec-tekst{display:inline-block;font-weight:700;font-size:14px;white-space:nowrap}
.spec-legenda{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--grijs)}
.spec-legenda span{display:inline-flex;align-items:center;gap:8px}
.spec-legenda i{font-style:normal}
@media (max-width:760px){.spec-tabel td strong{font-size:14.5px}.spec-uitleg{display:none}}

/* Abonnementen, tweede ronde: vinkjes en kruisjes, plakkende kop, sterkere kaarten */
.spec-ja,.spec-nee{width:auto;height:auto;border:0;background:none;box-shadow:none;display:inline-flex;vertical-align:middle}
.spec-ja svg,.spec-nee svg{display:block}
.spec-tekst{font-family:var(--serif);font-size:16px;font-weight:700}
.spec-tabel{border-collapse:separate;border-spacing:0}
/* Geen plakkende tabelkop: de vaste sitekop heeft geen vaste hoogte (podcastbalk open of dicht), waardoor de rij over de tabel heen zweefde. */
.spec-tabel thead th{position:static;background:var(--papier);border-bottom:2px solid var(--inkt);text-align:center;padding:16px 14px}
.spec-tabel thead th:first-child{text-align:left}
.spec-tabel thead th.spec-uit{background:var(--geel)}
.spec-tabel thead th.spec-uit .spec-prijs{color:var(--inkt)}
.spec-tabel tbody tr:nth-child(even):not(.spec-groep) td{background:#fff}
.spec-tabel tbody td{padding:14px 14px;border-bottom:1px solid var(--lijn)}
.spec-tabel .spec-groep th{padding:12px 14px;font-size:12px}
.spec-uitleg{display:block;font-size:14px;line-height:1.45;color:var(--grijs);margin-top:4px;max-width:62ch}
.spec-tabel td strong{font-size:17px}
.spec-tabel td.spec-cel{width:150px}
.abo-kaart{position:relative;padding-top:34px}
.abo-kaart::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--lijn)}
.abo-kaart.kaart-uitgelicht::before{background:var(--geel)}
.abo-kaart:last-child::before{background:var(--inkt)}
.abo-kaart .prijs-groot{font-size:40px}
.abo-kaart .kaart-lijst li{font-size:15px}
@media (max-width:760px){.spec-tabel thead th{position:static}.spec-tabel td.spec-cel{width:auto}}

/* De featurezin altijd onder de feature, ook op een smal scherm, in lichtgrijs. */
.spec-tabel .spec-uitleg{display:block;color:var(--grijs-licht);font-size:13.5px;font-weight:400;line-height:1.5;margin-top:5px;max-width:64ch}
@media (max-width:760px){.spec-tabel .spec-uitleg{display:block;font-size:13px}}

/* Nieuwsbrief in de footer: statusregel onder het veld. */
.brief-form{flex-wrap:wrap}.brief-status{flex-basis:100%;font-size:12.5px;color:var(--grijs);line-height:1.4}.brief-status:empty{display:none}

/* Het e-mailveld mag krimpen, zodat veld en knop op een regel passen. */
.brief-form input[type=email]{flex:1 1 160px;min-width:0}

/* De nieuwsbriefkolom krijgt meer ruimte, zodat veld en knop op een regel passen naast vijf linkkolommen. */
@media (min-width:1081px){.voet-boven{grid-template-columns:2.2fr repeat(var(--voet-kolommen,3),minmax(0,1fr));gap:32px}}

/* Het nieuwsbriefformulier deelt het script met het demoformulier, maar niet de rasterindeling. */
.brief-form.inschrijfvorm{display:flex;gap:8px}.brief-form.inschrijfvorm input[type=email]{width:auto;padding:12px 14px;font-size:14px}.brief-form.inschrijfvorm input[type=email]:focus{outline:none;border-color:var(--inkt)}

/* Een kolom zonder kop (Oplossingen, tweede kolom) krijgt een lege regel, zodat de lijn op dezelfde hoogte staat als in de kolom ernaast. */
.mega-kolom h5:empty::before{content:"\00a0"}

/* Waarom, hoe en wat van Sales Legends Group. */
.wwh{display:grid;gap:16px;margin:22px 0 0}
.wwh div{border-left:3px solid var(--geel);padding:2px 0 2px 16px}
.wwh dt{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grijs);margin-bottom:4px}
.wwh dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--inkt)}
.wwh-rij{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:8px}
.wwh-rij div{border-left:0;border-top:3px solid var(--geel);padding:18px 0 0}
.wwh-rij dt{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--inkt);margin-bottom:10px}
.wwh-slot{font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.35;margin:22px 0 0;max-width:34ch}
@media (max-width:860px){.wwh-rij{grid-template-columns:1fr;gap:22px}}

/* Het Sales Legends-model en de bedrijven. */
.model-beeld{margin:0;background:var(--papier);border:1px solid var(--lijn);border-radius:2px;padding:22px}
.model-beeld img{display:block;width:100%;height:auto}
.model-beeld .bijschrift{margin-top:14px}
.model-lijst{margin:20px 0 0;padding:0;list-style:none;counter-reset:m;display:grid;gap:8px}
.model-lijst li{counter-increment:m;display:grid;grid-template-columns:30px 1fr;column-gap:10px;font-size:15px;color:var(--grijs);line-height:1.5}
.model-lijst li::before{content:counter(m);grid-row:span 2;width:26px;height:26px;border-radius:50%;background:var(--inkt);color:var(--geel);font-weight:700;font-size:12.5px;display:grid;place-items:center}
.model-lijst li b{color:var(--inkt);font-family:var(--serif);font-size:16.5px}
.eco-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.eco-kaart{display:flex;flex-direction:column}
.eco-kaart h3{margin:12px 0 10px}
.eco-kaart .kaart-voet{margin-top:auto;padding-top:16px}
@media (max-width:1000px){.eco-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.eco-raster{grid-template-columns:1fr}}

/* Werkpagina met logovoorstellen. */
.lv-vlak{background:#FAFAF7;border:1px solid var(--lijn);border-radius:2px;padding:18px 20px;display:grid;place-items:center}
.lv-vlak svg{width:100%;height:auto;max-width:440px;display:block}
.lv-donker{background:#0A0A0A;border-color:#0A0A0A}
.lv-familie figcaption{margin-top:12px;display:grid;gap:2px}
.lv-familie figcaption span{font-size:13.5px;color:var(--grijs)}
.lv-lijst{display:grid;gap:28px}
.lv-kaart{background:#fff;border:1px solid var(--lijn);border-radius:2px;padding:26px}
.lv-kop-tekst{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.lv-kop-tekst > div{flex:1;min-width:200px}
.lv-kop-tekst h3{margin:0;font-size:22px}
.lv-nummer{font-family:var(--serif);font-weight:700;font-size:30px;line-height:1;color:var(--inkt);border-bottom:3px solid var(--geel);padding-bottom:4px}
.lv-payoff{margin:6px 0 0;font-size:11.5px;font-weight:700;letter-spacing:2px;color:var(--grijs)}
.lv-vlakken{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lv-gebruik{display:grid;grid-template-columns:auto 1fr;gap:18px;margin-top:14px;align-items:stretch}
.lv-tekens{display:flex;align-items:center;gap:14px;border:1px solid var(--lijn);border-radius:2px;padding:12px 16px;flex-wrap:wrap}
.lv-tekens svg{display:block;border:1px solid var(--lijn)}
.lv-site{display:flex;align-items:center;gap:18px;border:1px solid var(--lijn);border-radius:2px;padding:10px 16px;background:#fff;font-size:12.5px;font-weight:600;color:var(--inkt-2);overflow:hidden}
.lv-site-logo{width:170px;flex:0 0 auto;margin-right:auto}
.lv-site-logo svg{width:100%;height:auto;display:block}
.lv-site-knop{font-style:normal;background:var(--inkt);color:var(--geel);padding:7px 12px;border-radius:2px;white-space:nowrap}
.lv-idee{margin:16px 0 0;color:var(--grijs);max-width:80ch}
.lv-vragen{display:grid;gap:14px;padding-left:20px}
@media (max-width:900px){.lv-vlakken,.lv-gebruik{grid-template-columns:1fr}.lv-site span{display:none}}

/* Prijsschakelaar per maand of per jaar, en de prijs per dag. */
[data-maand][hidden],[data-jaar][hidden]{display:none!important}
.prijs-kop{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:22px}
.prijs-kop p{margin:0;max-width:62ch}
.prijs-schakelaar{display:inline-flex;border:1px solid var(--inkt);border-radius:2px;padding:3px;background:#fff}
.prijs-schakelaar button{font:inherit;font-size:13.5px;font-weight:700;border:0;background:none;color:var(--inkt);padding:9px 16px;border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.prijs-schakelaar button.actief{background:var(--inkt);color:var(--geel)}
.prijs-schakelaar button:focus-visible{outline:2px solid var(--geel);outline-offset:2px}
.prijs-korting{font-size:11px;font-weight:700;letter-spacing:.4px;background:var(--geel);color:var(--inkt);padding:2px 7px;border-radius:2px}
.prijs-blok{margin:10px 0 14px}
.prijs-vanaf{margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grijs)}
.prijs-blok .prijs-groot{margin:0}
.prijs-dag{margin:8px 0 0;font-size:14.5px}
.prijs-dag b{background:linear-gradient(transparent 62%,rgba(254,216,0,.55) 62%)}
.prijs-blok .prijs-onder{margin-top:6px}
.spec-prijs span[data-maand],.spec-prijs span[data-jaar]{display:block}

/* De payoff onder de naam loopt links en rechts gelijk met "Sales Campus",
   net als bij Sales Legends. Gemeten in de browser: de naam is 127 px breed,
   de payoff zonder letterafstand 85 px over 19 tekens, dus 0,3em extra per
   teken. De negatieve marge haalt de afstand achter de laatste letter weg. */
.merk-sub{letter-spacing:.3em;margin-right:-.3em;white-space:nowrap}

/* Kolomkoppen in het megamenu zijn alinea's, geen koppen: anders staan er op
   elke pagina koppen van niveau 5 boven de h1. Zelfde uiterlijk. */
.mega-kolom .mega-kop{font-family:var(--tekst);font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grijs);margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--inkt);line-height:1.2}
.mega-kolom .mega-kop:empty::before{content:"\00a0"}

/* Alleen voor schermlezers, zoekmachines en taalmodellen. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* De pillar in de zijbalk van een artikel: oogt als een kaarttitel, is geen kop. */
.zij-titel{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:-.01em;line-height:1.25;margin:12px 0 8px;color:var(--inkt)}

/* Sitemap voor mensen. */
.sitemap-raster{columns:3 300px;column-gap:44px}
.sitemap-groep{break-inside:avoid;margin:0 0 34px}
.sitemap-groep h2{font-size:20px;margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--inkt)}
.sitemap-groep ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sitemap-groep a{font-size:14.5px;color:var(--inkt-2)}
.sitemap-groep a:hover{text-decoration:underline;text-decoration-color:var(--geel);text-decoration-thickness:2px}