/* ==========================================================================
   Eerlijk Over Erecties - gedeelde stijl
   Kleuren uit het logo: marineblauw #01133A en rood #DB0E19, op zandwit.
   Radius: panelen en foto's 18px, knoppen pill. Eén accentkleur: rood.
   Dit bestand wordt door elke pagina van de site gebruikt.
   ========================================================================== */

/* Figtree, lokaal geserveerd. Geen verzoeken naar Google.
   Variabel lettertype: een bestand dekt alle diktes van 300 tot 900.
   Licentie: SIL Open Font License 1.1, zie assets/fonts/figtree-OFL.txt */
@font-face{
  font-family:"Figtree";
  font-style:normal;
  font-display:swap;
  font-weight:300 900;
  src:url(/assets/fonts/figtree-latin.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Figtree";
  font-style:normal;
  font-display:swap;
  font-weight:300 900;
  src:url(/assets/fonts/figtree-latin-ext.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --navy:#01133A;
  --navy-700:#0B2352;
  --navy-500:#1C3566;
  --red:#DB0E19;
  --red-700:#B00A13;
  --red-tint:#FDE8E8;
  --sand:#F2EEE6;
  --sand-200:#E9E4D9;
  --sand-300:#DFD9CB;
  --papier:#FBF8F2;
  --baan-1:#FFFFFF;
  --baan-2:#ECF1F9;
  --baan-3:#F2EEE6;
  --baan-4:#FCEEEE;
  --white:#FFFFFF;
  --ink:#141B2E;
  --ink-soft:#4A5568;
  --ink-faint:#626B7E;
  --line:#DCD8CE;
  --radius:18px;
  --shadow-sm:0 1px 2px rgba(1,19,58,.06), 0 8px 20px -14px rgba(1,19,58,.35);
  --shadow-md:0 2px 4px rgba(1,19,58,.06), 0 24px 48px -28px rgba(1,19,58,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;background:var(--sand);color:var(--ink);
  font-family:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;height:auto}
picture{display:contents}
a{color:inherit}
p{margin:0}

h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.12;letter-spacing:-0.03em;text-wrap:balance}
h1{font-size:clamp(2.2rem,1.4rem + 2.9vw,3.7rem)}
h2{font-size:clamp(1.7rem,1.25rem + 1.7vw,2.5rem)}
h3{font-size:1.24rem;font-weight:700;letter-spacing:-0.02em;line-height:1.25}
h4{font-size:1.05rem;font-weight:700}

.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:24px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--white);padding:12px 18px;border-radius:0 0 12px 0}
.skip:focus{left:0}
:where(a,button,summary,input):focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}

.mark{background:linear-gradient(transparent 62%, rgba(219,14,25,.22) 62%);padding-inline:.06em}

/* ---------- Header ---------------------------------------------------- */

.site-head{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.logo img{height:46px;width:auto}
@media (max-width:520px){ .logo img{height:38px} }
.site-nav ul{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.site-nav a{position:relative;text-decoration:none;font-size:.97rem;font-weight:500;color:var(--navy);padding-block:6px;white-space:nowrap}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.site-nav a:hover::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
.site-nav a[aria-current="page"]{color:var(--red)}
.head-cta{display:inline-flex}
@media (max-width:1040px){ .site-nav,.head-cta{display:none} }
.mobile-nav{display:none;border-bottom:1px solid var(--line);background:var(--white)}
@media (max-width:1040px){ .mobile-nav{display:block} }
.mobile-nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:12px 24px;overflow-x:auto;scrollbar-width:none}
.mobile-nav ul::-webkit-scrollbar{display:none}
.mobile-nav a{text-decoration:none;font-size:.95rem;font-weight:500;color:var(--navy);white-space:nowrap}
.mobile-nav a[aria-current="page"]{color:var(--red)}

/* ---------- Knoppen --------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:999px;border:2px solid transparent;
  font:inherit;font-size:1rem;font-weight:700;letter-spacing:-0.01em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .14s cubic-bezier(.2,.7,.3,1), background-color .2s ease, border-color .2s ease;
}
.btn svg{flex:none;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.btn-red{background:var(--red);color:var(--white);box-shadow:0 10px 24px -12px rgba(219,14,25,.75)}
.btn-red:hover{background:var(--red-700);transform:translateY(-2px)}
.btn-red:hover svg{transform:translateX(3px)}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:var(--navy-700);transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--navy);border-color:rgba(1,19,58,.22)}
.btn-line:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn-light{background:var(--white);color:var(--navy)}
.btn-light:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:11px 20px;font-size:.95rem}

/* ---------- Homepage -------------------------------------------------- */

.hero{position:relative;overflow:hidden;padding-block:clamp(44px,5vw,76px) clamp(20px,3vw,40px)}
.hero::before{content:"";position:absolute;inset:auto auto 0 50%;width:1400px;height:1400px;transform:translate(-50%,62%);background:radial-gradient(circle, rgba(219,14,25,.07) 0%, rgba(219,14,25,0) 62%);pointer-events:none}
.hero-grid{position:relative;display:grid;align-items:center;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4vw,72px)}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} }
.hero h1{color:var(--navy);max-width:25ch}
.hero-lead{margin-top:24px;max-width:44ch;font-size:clamp(1.08rem,1rem + .45vw,1.28rem);color:var(--ink-soft)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-figure{position:relative}
.hero-figure img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-md);background:var(--sand-200);aspect-ratio:4/5;object-fit:cover}
.hero-figure::after{content:"";position:absolute;inset:auto -14px -14px auto;width:58%;height:52%;border-radius:var(--radius);background:var(--navy);z-index:-1}
.hero-badge{position:absolute;left:-18px;bottom:34px;background:var(--white);border-radius:16px;padding:16px 20px;box-shadow:var(--shadow-md);max-width:236px}
.hero-badge strong{display:block;white-space:nowrap;font-size:1.75rem;font-weight:800;color:var(--red);line-height:1.05;letter-spacing:-0.03em}
.hero-badge > span{display:block;margin-top:4px;font-size:.92rem;color:var(--ink-soft);line-height:1.4}
@media (max-width:900px){ .hero-badge{left:auto;right:12px} }
@media (max-width:520px){ .hero-badge{position:static;margin-top:16px;max-width:none} }

.facts{background:var(--navy);color:var(--white);margin-top:clamp(28px,4vw,56px)}
.facts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:800px){ .facts-grid{grid-template-columns:1fr} }
.fact{padding:34px 0;padding-right:36px}
.fact + .fact{border-left:1px solid rgba(255,255,255,.14);padding-left:36px}
@media (max-width:800px){ .fact{padding:24px 0} .fact + .fact{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-left:0} }
.fact b{display:block;font-size:1.55rem;font-weight:800;letter-spacing:-0.03em;line-height:1.15}
.fact b em{font-style:normal;color:#FF6B72}
.fact p{margin-top:7px;color:rgba(255,255,255,.74);font-size:.98rem}

.starts{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
@media (max-width:760px){ .starts{grid-template-columns:1fr} }
.start{display:flex;flex-direction:column;background:var(--white);border-radius:var(--radius);overflow:hidden;text-decoration:none;box-shadow:var(--shadow-sm);border:1px solid rgba(1,19,58,.06);transition:transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease}
.start:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.start-img{aspect-ratio:4/3;overflow:hidden;background:var(--sand-200)}
.start-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.start:hover .start-img img{transform:scale(1.04)}
.start-body{padding:26px 28px 30px}
.start-body h3{color:var(--navy);font-size:1.32rem}
.start-body p{margin-top:10px;color:var(--ink-soft);font-size:1rem}
.start-more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--red);font-weight:700;font-size:.98rem}
.start:hover .start-more svg{transform:translateX(4px)}
.start-more svg{transition:transform .22s cubic-bezier(.2,.7,.3,1)}

.quote-band{background:var(--navy);color:var(--white);padding-block:clamp(64px,7vw,112px);position:relative;overflow:hidden}
.quote-band::before{content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle, rgba(219,14,25,.30) 0%, rgba(219,14,25,0) 68%)}
.quote-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,64px);align-items:end}
@media (max-width:860px){ .quote-grid{grid-template-columns:1fr} }
.quote-grid h2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem);max-width:19ch}
.quote-grid .sub{margin-top:22px;color:rgba(255,255,255,.78);font-size:1.08rem;max-width:48ch}

.posts{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
@media (max-width:880px){ .posts{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .posts{grid-template-columns:1fr} }
.post{text-decoration:none;display:flex;flex-direction:column;gap:16px}
.post-img{border-radius:var(--radius);overflow:hidden;aspect-ratio:8/5;background:var(--sand-200);box-shadow:var(--shadow-sm)}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.post:hover .post-img img{transform:scale(1.05)}
.post h3{color:var(--navy);transition:color .18s ease}
.post:hover h3{color:var(--red)}
.post p{margin-top:8px;color:var(--ink-soft);font-size:.97rem}
.post-tag{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--red-tint);color:var(--red-700);font-size:.79rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;align-self:flex-start}

.moves{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
@media (max-width:860px){ .moves{grid-template-columns:1fr} }
.move{background:var(--white);border-radius:var(--radius);padding:30px 28px 32px;border:1px solid rgba(1,19,58,.06);box-shadow:var(--shadow-sm)}
.move-num{width:44px;height:44px;border-radius:999px;background:var(--red-tint);color:var(--red);display:grid;place-items:center;font-weight:800;font-size:1.05rem;margin-bottom:20px}
.move h3{color:var(--navy)}
.move p{margin-top:11px;color:var(--ink-soft);font-size:1rem}
.move a{color:var(--red);font-weight:600;text-underline-offset:3px}

/* ---------- Secties, algemeen ----------------------------------------- */

section{scroll-margin-top:96px}
.band{padding-block:clamp(60px,6.5vw,104px)}
.band-white{background:var(--papier)}
.band-sand{background:var(--sand-200)}
.head-2{max-width:56ch}
.head-2 h2{color:var(--navy)}
.head-2 p{margin-top:16px;color:var(--ink-soft);font-size:1.06rem}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--red-700)}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--red)}

.tags{display:flex;flex-wrap:wrap;gap:11px;margin-top:36px}
.tag{padding:11px 20px;border-radius:999px;background:var(--white);border:1px solid var(--line);text-decoration:none;font-size:.97rem;font-weight:500;color:var(--navy);transition:transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease}
.tag:hover{background:var(--navy);border-color:var(--navy);color:var(--white);transform:translateY(-2px)}

/* ---------- FAQ ------------------------------------------------------- */

.faq{margin-top:36px;max-width:920px}
.faq details{background:var(--white);border:1px solid rgba(1,19,58,.08);border-radius:14px;margin-bottom:12px;overflow:hidden}
.faq details[open]{border-color:rgba(219,14,25,.35)}
.faq summary{cursor:pointer;list-style:none;position:relative;padding:22px 62px 22px 26px;font-size:1.09rem;font-weight:700;color:var(--navy);letter-spacing:-0.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:50%;margin-top:-9px;width:18px;height:18px;background:linear-gradient(var(--red),var(--red)) center/18px 2.5px no-repeat, linear-gradient(var(--red),var(--red)) center/2.5px 18px no-repeat;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .answer{padding:0 26px 24px;color:var(--ink-soft);max-width:68ch}
.faq .answer p + p{margin-top:12px}
.faq .answer a{color:var(--red);font-weight:600;text-underline-offset:3px}

/* ---------- Nieuwsbrief en slot --------------------------------------- */

.closing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){ .closing{grid-template-columns:1fr} }
.about h2{color:var(--navy)}
.about p{margin-top:16px;color:var(--ink-soft);max-width:54ch}
.about ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.about a{color:var(--red-700);font-weight:600;text-underline-offset:3px}

.signup{background:var(--navy);color:var(--white);border-radius:var(--radius);padding:34px 32px 36px}
.signup h3{font-size:1.4rem;font-weight:800}
.signup > p{margin-top:12px;color:rgba(255,255,255,.78);font-size:1rem}
.signup form{margin-top:24px;display:grid;gap:12px}
.signup label{font-size:.94rem;font-weight:600}
.signup input{width:100%;padding:15px 17px;font:inherit;font-size:1rem;color:var(--navy);background:var(--white);border:2px solid transparent;border-radius:12px}
.signup input::placeholder{color:#8792A6}
.signup input:focus{outline:none;border-color:var(--red)}
.signup-lijst{margin:22px 0 0;padding-left:20px;display:grid;gap:10px}
.signup-lijst li{font-size:.99rem;line-height:1.5;color:rgba(255,255,255,.9)}
.signup-lijst li::marker{color:#FF6B72}
.signup .hint{margin-top:22px;font-size:.87rem;color:rgba(255,255,255,.62)}
.signup .hint a{color:rgba(255,255,255,.85)}

/* ---------- Footer ---------------------------------------------------- */

.site-foot{background:var(--navy);color:rgba(255,255,255,.88);padding-block:56px 40px;border-top:6px solid var(--red)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:36px}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} }
.foot-brand img{height:52px;width:auto;background:var(--white);border-radius:10px;padding:8px 12px}
.foot-brand p{margin-top:18px;max-width:36ch;font-size:.96rem}
.site-foot h2{font-size:.84rem;text-transform:uppercase;letter-spacing:.12em;color:var(--white);font-weight:700}
.site-foot ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.site-foot ul a{text-decoration:none;font-size:.97rem;transition:color .18s ease}
.site-foot ul a:hover{color:var(--white)}
.foot-bottom{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;font-size:.88rem}
.foot-bottom p{max-width:62ch}

/* ==========================================================================
   Artikelpagina's
   ========================================================================== */

.kruimels{padding-block:20px 0}
.kruimels ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-size:.88rem;color:var(--ink-faint)}
.kruimels li{display:flex;align-items:center;gap:8px}
.kruimels li:not(:last-child)::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--line)}
.kruimels a{text-decoration:none;color:var(--ink-faint)}
.kruimels a:hover{color:var(--red)}
.kruimels [aria-current="page"]{color:var(--ink-soft)}

.art-kop{
  padding-block:28px clamp(34px,4vw,56px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--sand-200) 82%, var(--sand)) 0%, var(--sand) 100%);
}
.art-kop-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,60px);align-items:center}
@media (max-width:900px){ .art-kop-grid{grid-template-columns:1fr} }
.art-kop h1{color:var(--navy);max-width:19ch}
.art-lead{margin-top:24px;font-size:clamp(1.12rem,1rem + .5vw,1.32rem);color:var(--ink-soft);max-width:52ch}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;font-size:.9rem;color:var(--ink-faint)}
.art-meta strong{color:var(--ink-soft);font-weight:600}
.art-figuur img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-md);background:var(--sand-200);aspect-ratio:4/3;object-fit:cover}

.art-body{padding-block:clamp(28px,3vw,48px) clamp(48px,6vw,88px);background:var(--sand)}
.art-grid{align-items:start}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:clamp(32px,4vw,64px);align-items:start}
@media (max-width:1000px){ .art-grid{grid-template-columns:1fr} }

.inhoud{position:sticky;top:100px;background:var(--white);border:1px solid rgba(1,19,58,.06);border-radius:var(--radius);padding:24px 24px 26px;box-shadow:var(--shadow-sm)}
@media (max-width:1000px){ .inhoud{position:static} }
.inhoud h2{font-size:.84rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);font-weight:700}
.inhoud ol{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:11px;counter-reset:i}
.inhoud a{text-decoration:none;font-size:.95rem;color:var(--navy);display:block;line-height:1.35;transition:color .18s ease}
.inhoud a:hover{color:var(--red)}

.tekst{max-width:none}

/* Elk hoofdstuk is een baan over de volle breedte met een eigen kleur.
   De tekst staat in een gecentreerde kolom, zodat de regels leesbaar blijven. */
.baan{padding-block:clamp(48px,5.4vw,86px)}
.baan .kolom{
  width:100%;max-width:706px;margin-inline:auto;padding-inline:24px;
  display:grid;gap:22px;
}
.baan[data-kleur="0"]{background:var(--baan-1)}
.baan[data-kleur="1"]{background:var(--baan-2)}
.baan[data-kleur="2"]{background:var(--baan-3)}
.baan[data-kleur="3"]{background:var(--baan-4)}
.baan-donker{background:var(--navy);color:#fff}
.baan-bron{background:var(--sand-200)}

/* Foto over de volle breedte, als adempauze tussen de hoofdstukken */
.baan-foto{padding:0;margin:0;background:var(--navy);position:relative}
.baan-foto img{
  width:100%;height:clamp(260px,36vw,470px);object-fit:cover;display:block;
}
.baan-foto figcaption{
  position:relative;z-index:1;
  padding-block:12px 14px;font-size:.88rem;color:var(--ink-faint);
  background:var(--papier);
}
.baan-foto figcaption .wrap{display:block}
@media (prefers-reduced-motion: no-preference){
  .baan-foto{overflow:hidden}
  .baan-foto img{
    transform:scale(1.12) translateY(var(--schuif,0px));
    transition:transform .1s linear;
    will-change:transform;
  }
}

/* Uitspraak over een foto heen */
.baan-citaat{position:relative;padding:0;background:var(--navy);overflow:hidden}
.baan-citaat img{
  width:100%;height:clamp(360px,44vw,560px);object-fit:cover;display:block;
  opacity:.62;
}
/* donkere sluier zodat de tekst leesbaar blijft, welke foto er ook onder ligt */
.baan-citaat::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(1,19,58,.90) 0%,rgba(1,19,58,.78) 50%,rgba(1,19,58,.34) 100%);
}
.citaat-inhoud{
  position:absolute;inset:0;display:grid;align-content:center;gap:16px;
  padding-block:40px;z-index:2;
}
.baan-citaat .citaat-tekst{
  color:#fff;font-weight:800;letter-spacing:-0.03em;line-height:1.15;
  font-size:clamp(1.6rem,1.1rem + 2.2vw,2.9rem);max-width:20ch;
  text-shadow:0 2px 24px rgba(1,19,58,.55);
}
.baan-citaat .citaat-onder{color:rgba(255,255,255,.92);font-size:1.05rem;max-width:48ch;line-height:1.6}
@media (prefers-reduced-motion: no-preference){
  .baan-citaat img{
    transform:scale(1.14) translateY(var(--schuif,0px));
    transition:transform .1s linear;will-change:transform;
  }
  .citaat-inhoud > *{opacity:0;transform:translateY(16px);transition:opacity .7s ease .25s, transform .7s cubic-bezier(.2,.7,.3,1) .25s}
  .baan-citaat.in .citaat-inhoud > *{opacity:1;transform:none}
  .baan-citaat.in .citaat-onder{transition-delay:.4s}
}

/* Twee foto's naast elkaar */
.baan-duo{padding-block:clamp(20px,3vw,44px);background:var(--sand)}
.duo-rij{
  width:100%;max-width:1120px;margin-inline:auto;padding-inline:24px;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,22px);
}
.duo-rij figure{margin:0}
.duo-rij img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);
  background:var(--sand-200);box-shadow:var(--shadow-sm);
}
.baan-duo .duo-onder{padding-top:14px;font-size:.9rem;color:var(--ink-faint);max-width:70ch}
@media (max-width:640px){ .duo-rij img{aspect-ratio:1/1} }

/* Hoofdstuk met een foto ernaast */
.baan-naast .kolom-breed{
  width:100%;max-width:1120px;margin-inline:auto;padding-inline:24px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.baan-naast .kolom-breed[data-kant="links"]{direction:rtl}
.baan-naast .kolom-breed[data-kant="links"] > *{direction:ltr}
.naast-tekst{display:grid;gap:22px;min-width:0}
.naast-foto{margin:0}
.naast-foto img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--shadow-md);background:var(--sand-200);
}
@media (max-width:900px){
  .baan-naast .kolom-breed{grid-template-columns:1fr}
  .baan-naast .kolom-breed[data-kant="links"]{direction:ltr}
  .naast-foto img{aspect-ratio:3/2}
}

.tekst h2{color:var(--navy);margin-top:0;scroll-margin-top:132px;position:relative;padding-top:20px}
.tekst h2::before{
  content:"";position:absolute;top:0;left:0;width:34px;height:3px;
  border-radius:3px;background:var(--red);
  transform-origin:left;
}
@media (prefers-reduced-motion: no-preference){
  .kolom h2::before{transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.7,.3,1) .15s}
  .kolom.in h2::before{transform:scaleX(1)}
  .kolom li{opacity:0;transform:translateY(10px);transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1)}
  .kolom.in li{opacity:1;transform:none}
  .kolom.in li:nth-child(1){transition-delay:.10s}
  .kolom.in li:nth-child(2){transition-delay:.17s}
  .kolom.in li:nth-child(3){transition-delay:.24s}
  .kolom.in li:nth-child(4){transition-delay:.31s}
  .kolom.in li:nth-child(5){transition-delay:.38s}
  .kolom.in li:nth-child(n+6){transition-delay:.44s}
}

/* De titel van een artikel komt bij het laden binnen */
@media (prefers-reduced-motion: no-preference){
  .art-kop h1,.art-kop .art-lead,.art-kop .art-meta,.art-kop .eyebrow,.art-figuur{
    animation:opkomen .8s cubic-bezier(.2,.7,.3,1) both;
  }
  .art-kop .eyebrow{animation-delay:.02s}
  .art-kop h1{animation-delay:.08s}
  .art-kop .art-lead{animation-delay:.16s}
  .art-kop .art-meta{animation-delay:.24s}
  .art-figuur{animation-delay:.14s}
  @keyframes opkomen{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

.tekst h3{color:var(--navy);margin-top:10px}
.tekst p{font-size:1.12rem;line-height:1.74;max-width:none;color:#243049}
.tekst a{color:var(--red-700);font-weight:600;text-underline-offset:3px}
.tekst ul,.tekst ol{margin:0;padding-left:22px;max-width:none;display:grid;gap:11px}
.tekst li{font-size:1.09rem;line-height:1.68;padding-left:6px;color:#243049}
.tekst li::marker{color:var(--red)}
.tekst strong{font-weight:700;color:var(--ink)}

.kort{color:#fff}
.kort h2{font-size:.86rem !important;margin:0 !important;color:#FF8A90;text-transform:uppercase;letter-spacing:.14em;padding-top:0}
.kort h2::before{display:none}
.kort ul{margin-top:4px;padding-left:20px;gap:12px}
.kort li{font-size:1.02rem;color:rgba(255,255,255,.84);line-height:1.6}
.kort li::marker{color:#FF6B72}
.kort strong{color:#fff}

.uitgelicht{background:var(--navy);color:var(--white);border-radius:var(--radius);padding:32px 34px}
.uitgelicht p{font-size:1.3rem;font-weight:700;line-height:1.3;letter-spacing:-0.02em;max-width:34ch}
.uitgelicht span{display:block;margin-top:14px;color:rgba(255,255,255,.76);font-size:1rem;font-weight:400;max-width:52ch}

.let-op{background:var(--red-tint);border-radius:var(--radius);padding:24px 28px}
.let-op h3{color:var(--red-700);font-size:1.08rem}
.let-op p{margin-top:10px;color:#6E1015;font-size:1.02rem;max-width:64ch}
.let-op a{color:var(--red-700)}

.tabel-schuif{overflow-x:auto;border:1px solid var(--sand-300);border-radius:var(--radius);background:var(--white)}
@media (min-width:1080px){
  .tabel-schuif,.uitgelicht,.let-op{margin-inline:-90px}
}
.tekst table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
.tekst th,.tekst td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.tekst th{background:var(--sand);font-weight:700;color:var(--navy);font-size:.92rem}
.tekst tr:last-child td{border-bottom:0}

.bron-blok{margin-top:56px;background:var(--sand);border:1px solid var(--sand-300);border-radius:var(--radius);padding:28px 30px}
.bron-blok h2{font-size:1.1rem !important;margin:0 !important;color:var(--navy)}
.bron-blok .regel{margin-top:14px;font-size:.97rem;color:var(--ink-soft)}
.bron-blok ul{margin-top:14px;padding-left:20px;gap:8px}
.bron-blok li{font-size:.97rem;color:var(--ink-soft)}
.bron-blok a{color:var(--red-700);font-weight:600}
.bron-blok .nagekeken{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.9rem;color:var(--ink-faint)}

.verder{padding-block:clamp(48px,5vw,80px);background:var(--papier)}
.verder-grid{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:860px){ .verder-grid{grid-template-columns:1fr} }
.verder-kaart{display:flex;flex-direction:column;background:var(--white);border:1px solid rgba(1,19,58,.07);border-radius:var(--radius);overflow:hidden;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease}
.verder-beeld{aspect-ratio:8/5;overflow:hidden;background:var(--sand-200)}
.verder-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.verder-kaart:hover .verder-beeld img{transform:scale(1.06)}
.verder-tekst{padding:24px 26px 28px}
.verder-kaart:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.verder-kaart h3{color:var(--navy)}
.verder-kaart p{margin-top:9px;color:var(--ink-soft);font-size:.97rem}
.verder-kaart .pijl{display:inline-flex;align-items:center;gap:7px;margin-top:16px;color:var(--red);font-weight:700;font-size:.95rem}
.verder-kaart:hover .pijl svg{transform:translateX(4px)}
.verder-kaart .pijl svg{transition:transform .22s cubic-bezier(.2,.7,.3,1)}

/* ---------- Scroll-onthulling ----------------------------------------- */

@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
}

/* ---------- Hoofdstukkenbalk ------------------------------------------ */

.hoofdstukken{
  background:var(--papier);border-block:1px solid var(--sand-300);
  position:sticky;top:76px;z-index:40;
}
@media (max-width:1040px){ .hoofdstukken{position:static;top:auto} }
.hoofdstukken-rij{display:flex;align-items:center;gap:18px;padding-block:11px}
.hoofdstukken-label{
  flex:none;font-size:.76rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;color:var(--ink-faint);
}
@media (max-width:760px){ .hoofdstukken-label{display:none} }
.hoofdstukken ol{
  display:flex;gap:8px;list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none;
}
.hoofdstukken ol::-webkit-scrollbar{display:none}
.hoofdstukken a{
  display:block;white-space:nowrap;text-decoration:none;
  font-size:.9rem;font-weight:500;color:var(--ink-soft);
  padding:7px 14px;border-radius:999px;border:1px solid transparent;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hoofdstukken a:hover{background:var(--sand-200);color:var(--navy)}
.hoofdstukken a[aria-current="true"]{background:var(--red);color:#fff;border-color:var(--red)}

/* ---------- Voortgangsbalk -------------------------------------------- */

.voortgang{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;
  background:transparent;
}
.voortgang span{
  display:block;height:100%;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){ .voortgang{display:none} }



/* Pagina's zonder kopbeeld, zoals de juridische pagina's */
.art-kop-smal{max-width:820px;margin-inline:auto}