/* site.css — één stylesheet voor de hele site. Geen framework, geen JavaScript. */
:root{
  --paper:#F5F2EB; --raised:#FBF9F4; --ink:#1A1A1A; --soft:#3D3D3D; --muted:#6B6B6B;
  --rule:#C9C2B2; --hair:#DCD5C6; --gold:#B08A50; --gold-deep:#7A5A2E; --label:#6E5227;
  --signaal:#C0392B;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --text:'Source Serif 4',Georgia,serif;
  --sans:'Inter','Liberation Sans',Helvetica,Arial,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper) url('/merk/achtergrond.jpg') right -8rem bottom -6rem/1600px auto no-repeat fixed;
  color:var(--ink);font-family:var(--text);
  font-size:1.125rem;line-height:1.62;text-rendering:optimizeLegibility}
@media (max-width:900px){body{background-attachment:scroll;background-position:right -4rem bottom -3rem}}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.6rem}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
a:hover h1,a:hover h2,a:hover h3{color:var(--gold-deep)}

/* kop */
.masthead{padding:2.6rem 0 1rem;border-bottom:2px solid var(--ink)}
.masthead__top{display:flex;justify-content:space-between;gap:1rem;font-family:var(--sans);
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.masthead__naam{display:block;font-family:var(--serif);font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;font-size:clamp(1.9rem,5.6vw,3.6rem);line-height:1;color:var(--ink)}
.nav{display:flex;gap:1.5rem;align-items:baseline;padding:.9rem 1.6rem;border-bottom:1px solid var(--hair);
  font-family:var(--sans);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.nav a{padding-bottom:.2rem;border-bottom:2px solid transparent}
.nav a.aan{border-bottom-color:var(--ink);color:var(--ink);font-weight:600}
.nav__pdf{margin-left:auto;color:var(--gold-deep);font-weight:600}

/* voorpagina */
.kopregel{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-family:var(--sans);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:1.1rem 0;border-bottom:1px solid var(--hair)}
.front{display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,3fr);gap:3.2rem;
  padding:2.6rem 0 1.5rem}
.label{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--label);font-weight:600}
.lead h1{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.06;letter-spacing:-.01em;margin:.5rem 0 1rem;text-wrap:balance}
.lead .dek{font-size:1.3rem;line-height:1.5;color:var(--soft);margin:0 0 1.5rem;
  padding-bottom:1.5rem;border-bottom:1px solid var(--hair)}
.lead p{margin:0 0 1rem;max-width:33em}
.lead p:first-of-type::first-letter{font-family:var(--serif);float:left;font-size:3.4em;
  line-height:.8;padding:.05em .1em 0 0;color:var(--gold-deep)}
.bronnen{font-family:var(--sans);font-size:.8125rem;color:var(--muted);margin:1.2rem 0 0;
  padding-top:.9rem;border-top:1px solid var(--hair)}
.rail{border-left:1px solid var(--hair);padding-left:1.5rem}
.rail h2{font-family:var(--sans);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 1rem}
.rail ol{list-style:none;margin:0;padding:0}
.rail li{border-bottom:1px solid var(--hair);padding:.75rem 0}
.rail time{display:block;font-family:var(--sans);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
.rail li span{font-size:.95rem;line-height:1.4}

.raster{display:grid;grid-template-columns:repeat(2,1fr);gap:2.6rem 2rem;
  border-top:1px solid var(--rule);padding-top:2.4rem}
.verhaal h3{font-family:var(--serif);font-size:1.4rem;line-height:1.22;margin:.4rem 0 .5rem}
.verhaal .dek{font-size:1rem;line-height:1.5;color:var(--soft);margin:0}
.verhaal .bronnen{margin-top:.7rem;padding-top:.6rem;font-size:.75rem}

.opinie{margin:3rem 0;padding:2rem 0 0;border-top:3px solid var(--gold);background:var(--raised);
  padding-left:1.6rem;padding-right:1.6rem;padding-bottom:2rem}
.opinie h2{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;margin:.4rem 0 .8rem}
.opinie .dek{font-size:1.05rem;color:var(--soft);margin:0}

.cijferregel{font-family:var(--sans);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border-top:1px solid var(--ink);border-bottom:1px solid var(--hair);
  padding:.9rem 0;margin:2.5rem 0 4rem}

/* verhaalpagina */
.verhaalpagina{max-width:44rem;margin:0 auto;padding:2.8rem 0 4rem}
.verhaalpagina h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4.2vw,2.9rem);
  line-height:1.08;margin:.5rem 0 1rem;text-wrap:balance}
.verhaalpagina .dek{font-size:1.28rem;line-height:1.5;color:var(--soft);margin:0 0 1rem}
.verhaalpagina .byline{font-family:var(--sans);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair);padding-bottom:1rem}
.verhaalpagina .body{margin-top:1.8rem}
.verhaalpagina .body p{margin:0 0 1.15rem}
.verhaalpagina .body p:first-of-type::first-letter{font-family:var(--serif);float:left;
  font-size:3.2em;line-height:.82;padding:.05em .1em 0 0;color:var(--gold-deep)}

.koppenblok{margin:2.6rem 0 0;padding-top:1.6rem;border-top:2px solid var(--ink)}
.koppenblok h2{font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 1rem}
.koppen{list-style:none;margin:0;padding:0}
.koppen li{display:grid;grid-template-columns:8.5rem 1fr;gap:1.2rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--hair)}
.koppen .krant{font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--label)}
.koppen a{font-family:var(--serif);font-size:1.05rem;line-height:1.35}

.elders{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--hair)}
.elders h2{font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 .8rem}
.elders ul{list-style:none;margin:0;padding:0}
.elders li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.6rem 0;border-bottom:1px solid var(--hair)}
.elders a{font-size:1rem;line-height:1.4}
.elders .label{white-space:nowrap;font-size:.625rem}

/* archief */
.pagina__kop{font-family:var(--serif);font-size:clamp(2rem,4.5vw,3rem);line-height:1.05;
  margin:2.6rem 0 .6rem}
.pagina__dek{color:var(--muted);font-family:var(--sans);font-size:.8125rem;letter-spacing:.04em;
  margin:0 0 2rem;border-bottom:1px solid var(--hair);padding-bottom:1rem}
.archief{list-style:none;margin:0 0 4rem;padding:0}
.archief li{border-bottom:1px solid var(--hair)}
.archief a{display:grid;grid-template-columns:11rem 1fr auto;gap:1.5rem;align-items:baseline;
  padding:1rem 0}
.archief time{font-family:var(--sans);font-size:.8125rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--label)}
.archief .kop{font-family:var(--serif);font-size:1.2rem;line-height:1.3}
.archief .meta{font-family:var(--sans);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.editieblok{margin:0 0 2.4rem;padding:1.6rem;background:var(--raised);border:1px solid var(--hair)}
.editieblok h2{font-family:var(--serif);font-size:1.4rem;margin:0 0 .4rem}
.editielijst{list-style:none;margin:1rem 0 0;padding:0}
.editielijst li{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;
  padding:.7rem 0;border-top:1px solid var(--hair)}
.editielijst a{font-family:var(--serif);font-size:1.1rem;line-height:1.3}
.editielijst .label{white-space:nowrap;font-size:.625rem}
.terug{font-family:var(--sans);font-size:.8125rem;margin:2rem 0 4rem}

footer{border-top:2px solid var(--ink);padding:1.6rem 0 4rem;font-family:var(--sans);
  font-size:.75rem;color:var(--muted);display:flex;justify-content:space-between;gap:1rem 2rem;
  flex-wrap:wrap}
footer a{text-decoration:underline;text-decoration-color:var(--hair)}
.voet__merk{display:inline-flex;align-items:center;gap:.6rem}
.voet__merk img{width:24px;height:24px;opacity:.75}
@media (max-width:520px){footer{gap:.6rem 1rem}}

@media (max-width:900px){
  .front{grid-template-columns:1fr;gap:2.2rem}
  .rail{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:1.4rem}
  .raster{grid-template-columns:1fr}
  .archief a{grid-template-columns:1fr;gap:.3rem}
  .koppen li{grid-template-columns:1fr;gap:.3rem}
  body{font-size:1.0625rem}
}
@media (max-width:520px){
  .wrap{padding:0 1.1rem}
  .nav{gap:1rem;padding:.8rem 1.1rem;font-size:.6875rem;overflow-x:auto}
  .nav__pdf{margin-left:0}
  .lead p{max-width:none}
  .masthead__naam{letter-spacing:.15em}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- thuis: uitleg, cijfers, tijdlijn, carrousels --- */
.uitleg{max-width:46rem;margin:2.8rem 0 2rem}
.uitleg h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4vw,2.9rem);
  line-height:1.1;margin:.5rem 0 1.2rem;text-wrap:balance}
.uitleg p{margin:0 0 1rem;color:var(--soft)}
.uitleg p:first-of-type{font-size:1.1875rem}
.kerncijfers{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  margin:2.2rem 0 3rem;padding:0;background:var(--hair);border:1px solid var(--hair)}
.kerncijfers li{background:var(--paper);padding:1.1rem 1rem}
.kerncijfers b{display:block;font-family:var(--serif);font-size:2rem;line-height:1;margin-bottom:.3rem}
.kerncijfers span{font-family:var(--sans);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.tijdlijnblok{margin:0 0 3rem;padding-top:2.2rem;border-top:2px solid var(--ink)}
.tijdlijnblok h2{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.9rem);margin:.4rem 0 1.6rem}
.tijdlijn{list-style:none;margin:0;padding:0 0 0 1.4rem;border-left:1px solid var(--rule)}
.tijdlijn li{position:relative;padding:0 0 1.5rem 1.4rem;display:grid;
  grid-template-columns:5.5rem 1fr;gap:1.2rem;align-items:baseline}
.tijdlijn li::before{content:"";position:absolute;left:-1.72rem;top:.45rem;width:.6rem;height:.6rem;
  background:var(--gold);border-radius:50%}
.tijdlijn time{font-family:var(--sans);font-size:.8125rem;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:var(--label)}
.tijdlijn strong{font-family:var(--serif);font-size:1.125rem;display:block}
.tijdlijn p{margin:.2rem 0 0;font-size:.9375rem;line-height:1.5;color:var(--soft);max-width:52ch}

.carrouselblok{margin:0 0 3rem;border-top:2px solid var(--ink);padding-top:1.4rem}
.carrouselblok__kop{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.carrouselblok__kop h2{font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);margin:0}
.carrousel__meer{font-family:var(--sans);font-size:.75rem;letter-spacing:.06em;color:var(--soft);
  border-bottom:1px solid var(--gold)}
.carrousel{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1.2rem;-webkit-overflow-scrolling:touch}
.carrousel > *{flex:0 0 clamp(15rem,27vw,20rem);scroll-snap-align:start}
.kaart{border-top:1px solid var(--hair);padding-top:.9rem}
.kaart h3{font-family:var(--serif);font-size:1.1875rem;line-height:1.24;margin:.4rem 0 .5rem}
.kaart p{font-size:.9375rem;line-height:1.5;color:var(--soft);margin:0 0 .6rem}
.kaart__meta{font-family:var(--sans);font-size:.6875rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.kaart--rubriek h3{font-size:1.0625rem}
.thuis__slot{max-width:52rem;font-size:1rem;color:var(--soft);border-top:1px solid var(--hair);
  padding-top:1.2rem;margin:0 0 4rem}
.thuis__slot a{text-decoration:underline;text-decoration-color:var(--gold)}

@media (max-width:900px){
  .kerncijfers{grid-template-columns:repeat(2,1fr)}
  .tijdlijn li{grid-template-columns:1fr;gap:.1rem}
  .carrousel > *{flex-basis:min(78vw,20rem)}
}

/* --- werkwijze: de zes stappen --- */
.werkwijze{margin:0 0 3rem;padding:2.2rem 0 0;border-top:2px solid var(--ink)}
.werkwijze h2{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.15;
  margin:.4rem 0 1.8rem;max-width:34ch}
.stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.8rem 2rem}
.stappen li{border-top:1px solid var(--rule);padding-top:.9rem}
.stap{display:block;font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;color:var(--gold)}
.stappen h3{font-family:var(--serif);font-size:1.1875rem;margin:.35rem 0 .5rem}
.stappen p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--soft)}
.werkwijze__slot{font-family:var(--sans);font-size:.8125rem;color:var(--muted);margin:1.6rem 0 0}
.werkwijze__slot a{text-decoration:underline;text-decoration-color:var(--gold)}
@media (max-width:900px){.stappen{grid-template-columns:1fr;gap:1.2rem}}

/* --- methode --- */
.methode{max-width:44rem;margin:0 auto;padding:2.6rem 0 4rem}
.methode h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4vw,2.8rem);
  line-height:1.08;margin:.5rem 0 1rem}
.methode .dek{font-size:1.1875rem;line-height:1.55;color:var(--soft);margin:0 0 1rem}
.methode .byline{font-family:var(--sans);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--hair);padding-bottom:1rem}
.methode h2{font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin:2.4rem 0 .9rem}
.methode p{margin:0 0 1rem}
.methode__stappen{list-style:none;margin:0;padding:0;counter-reset:stap}
.methode__stappen li{position:relative;padding:0 0 1.1rem 2.6rem;counter-increment:stap}
.methode__stappen li::before{content:counter(stap,decimal-leading-zero);position:absolute;left:0;top:.15rem;
  font-family:var(--sans);font-size:.75rem;letter-spacing:.1em;color:var(--gold)}
.methode__stappen strong{font-family:var(--serif);font-size:1.0625rem}
.methode__niet{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.methode__niet li{padding:.75rem 0;border-bottom:1px solid var(--hair);font-size:1rem;color:var(--soft)}

/* --- thuis, tweede pas: eerst wat het is en wat er vandaag staat --- */
.hero{padding:3.2rem 0 1.4rem;max-width:52rem}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.4rem,6.2vw,4.2rem);
  line-height:.98;letter-spacing:-.015em;margin:.6rem 0 1.1rem;text-wrap:balance}
.hero__dek{font-size:1.25rem;line-height:1.5;color:var(--soft);margin:0 0 1.6rem;max-width:42rem}
.hero__links{display:flex;gap:.8rem;flex-wrap:wrap;margin:0}
.knop{display:inline-block;font-family:var(--sans);font-size:.8125rem;letter-spacing:.04em;
  padding:.7rem 1.1rem;background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.knop:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--paper)}
.knop--stil{background:transparent;color:var(--ink)}
.knop--stil:hover{background:transparent;color:var(--gold-deep);border-color:var(--gold-deep)}
.vandaag{font-family:var(--sans);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-top:1px solid var(--ink);border-bottom:1px solid var(--hair);
  padding:.8rem 0;margin:0 0 2.2rem}
.uitlegkort{max-width:44rem;margin:0 0 3rem}
.uitlegkort h2,.werkwijze h2,.tijdlijnblok h2{font-family:var(--sans);font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 1rem}
.uitlegkort p{margin:0 0 .9rem;color:var(--soft);max-width:40rem}
.uitlegkort a{text-decoration:underline;text-decoration-color:var(--gold)}
.stappen{grid-template-columns:repeat(3,1fr);gap:1.3rem 1.8rem}
.stappen li{border-top:1px solid var(--hair);padding-top:.7rem}
.stappen strong{font-family:var(--serif);font-size:1rem;display:block;margin:.15rem 0 .3rem}
.stappen p{font-size:.875rem;line-height:1.45}
.tijdlijn{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem 1.8rem;
  list-style:none;margin:0;padding:0;border-left:0}
.tijdlijn li{display:block;padding:.6rem 0 0;border-top:1px solid var(--hair);position:static}
.tijdlijn li::before{display:none}
.tijdlijn time{font-family:var(--sans);font-size:.8125rem;color:var(--label);
  font-variant-numeric:tabular-nums;display:block}
.tijdlijn strong{font-family:var(--serif);font-size:1rem;font-weight:600}
@media (max-width:900px){
  .stappen,.tijdlijn{grid-template-columns:1fr 1fr}
  .hero{padding-top:2.2rem}
}
@media (max-width:560px){.stappen,.tijdlijn{grid-template-columns:1fr}}

/* --- hero tweedelig: belofte links, de editie van vandaag rechts --- */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4.2fr);gap:3rem;
  padding:2.4rem 0 1.2rem;align-items:start;max-width:none}
.hero__tekst{max-width:38rem}
.hero h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:.5rem 0 .9rem}
.hero__dek{font-size:1.125rem;line-height:1.5;margin:0 0 1.3rem}
.hero__vandaag{border-left:1px solid var(--hair);padding-left:1.6rem}
.hero__vandaag h2{font-family:var(--sans);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 .7rem}
.hero__vandaag ol{list-style:none;margin:0;padding:0;counter-reset:top}
.hero__vandaag li{border-top:1px solid var(--hair);padding:.7rem 0}
.hero__vandaag li:first-child{border-top:0;padding-top:0}
.hero__vandaag a{font-family:var(--serif);font-size:1.0625rem;line-height:1.25;display:block;margin-top:.15rem}
.hero__vandaag .label{font-size:.625rem}
.hero__meer{display:inline-block;margin-top:.8rem;font-family:var(--sans);font-size:.75rem;
  letter-spacing:.06em;color:var(--soft);border-bottom:1px solid var(--gold)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:1.6rem}
  .hero__vandaag{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:1.1rem}
}

/* --- eerste scherm: masthead en hero compacter zodat de eerste verhalenrij past --- */
.masthead{padding:1.9rem 0 .8rem}
.masthead__top{margin-bottom:.35rem}
.masthead__naam{font-size:clamp(1.7rem,4.4vw,2.9rem)}
.nav{padding:.7rem 1.6rem}
.hero{padding:1.5rem 0 .9rem;gap:2.4rem}
.hero h1{font-size:clamp(2rem,4.4vw,3rem);margin:.35rem 0 .7rem}
.hero__dek{font-size:1.0625rem;margin:0 0 1rem;max-width:33rem}
.knop{padding:.6rem 1rem;font-size:.75rem}
.vandaag{padding:.65rem 0;margin:0 0 1.5rem;font-size:.6875rem}
.carrouselblok{padding-top:1.1rem}
.carrouselblok__kop{margin-bottom:.7rem}
.kaart{padding-top:.7rem}
.kaart h3{font-size:1.125rem;margin:.3rem 0 .4rem}
.kaart p{font-size:.875rem;line-height:1.45}

/* --- het voorbeeld in de hero: drie koppen over hetzelfde feit --- */
.koppen-mini{list-style:none;margin:0;padding:0}
.koppen-mini li{border-top:1px solid var(--hair);padding:.6rem 0;display:block}
.koppen-mini li:first-child{border-top:0;padding-top:0}
.koppen-mini .krant{display:block;font-family:var(--sans);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--label);margin-bottom:.15rem}
.koppen-mini .kop{font-family:var(--serif);font-size:.9375rem;line-height:1.3;color:var(--ink)}

/* --- details eerste scherm --- */
.hero__meer{margin-top:1.1rem;padding-top:.7rem;border-top:1px solid var(--hair);display:block}
.carrousel{mask-image:linear-gradient(to right,#000 93%,rgba(0,0,0,.15) 100%);
  -webkit-mask-image:linear-gradient(to right,#000 93%,rgba(0,0,0,.15) 100%)}

/* --- wat opvalt: de vergelijking zelf, boven de koppenlijst --- */
.verschil{margin:2.2rem 0 0;padding:1.4rem 1.5rem;background:var(--raised);border-left:3px solid var(--gold)}
.verschil h2{font-family:var(--sans);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 .5rem}
.verschil p{margin:0;font-size:1.0625rem;line-height:1.55}

/* --- het woordmerk als beeld in de masthead --- */
.masthead__naam{display:block;line-height:0;margin:.35rem 0 .9rem}
.masthead__logo{display:block;height:clamp(30px,4.9vw,52px);width:auto}
@media (max-width:520px){.masthead__logo{height:clamp(24px,7vw,32px)}}

/* --- wallpaper-pagina --- */
.wpinleiding{max-width:46rem;padding:2.6rem 0 1.6rem}
.wpinleiding h1{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,4.6vw,3rem);
  line-height:1.05;margin:.5rem 0 1rem;text-wrap:balance}
.wpinleiding p{margin:0;color:var(--soft);max-width:42rem}
.wpraster{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem 2rem;padding:2rem 0 3rem;
  border-top:1px solid var(--ink)}
.wp{margin:0}
.wp img{width:100%;height:auto;display:block;border:1px solid var(--hair);background:var(--raised)}
.wp figcaption{padding-top:.8rem}
.wp strong{display:block;font-family:var(--serif);font-size:1.0625rem;margin-bottom:.2rem}
.wp span{display:block;font-size:.875rem;line-height:1.45;color:var(--soft);margin-bottom:.5rem}
.wp a{font-family:var(--sans);font-size:.75rem;letter-spacing:.06em;border-bottom:1px solid var(--gold)}
.merkblok{max-width:44rem;border-top:2px solid var(--ink);padding:1.6rem 0 4rem;margin-bottom:2rem}
.merkblok h2{font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 .8rem}
.merkblok p{margin:0 0 1rem;color:var(--soft)}
.merklijn{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.merklijn img{width:64px;height:64px}
.merklijn a{font-family:var(--sans);font-size:.8125rem;border-bottom:1px solid var(--gold)}
@media (max-width:900px){.wpraster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.wpraster{grid-template-columns:1fr}}

/* De masthead zette met padding:1.9rem 0 .8rem de horizontale marge van .wrap op nul,
   waardoor de naam en de metaregel tegen de schermrand stonden. Alleen boven en onder. */
.masthead{padding:1.9rem 1.6rem .8rem}
@media (max-width:520px){.masthead{padding:1.6rem 1.1rem .6rem}}

/* --- wallpaper-pagina: koppen per formaat, brede previews, gebruik --- */
.wpkop{font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin:2rem 0 0}
.wpraster--breed{grid-template-columns:repeat(2,1fr);border-top:1px solid var(--hair);padding-top:1.4rem}
.wp--breed img{aspect-ratio:2560/1440;object-fit:cover}
.gebruik{max-width:44rem;margin:1rem 0 3rem;padding-top:1.6rem;border-top:2px solid var(--ink)}
.gebruik h2{font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 1rem}
.gebruik ol{margin:0 0 1rem;padding-left:1.2rem}
.gebruik li{margin-bottom:.5rem;color:var(--soft)}
.gebruik p{color:var(--muted);font-size:.9375rem;margin:0}
@media (max-width:900px){.wpraster--breed{grid-template-columns:1fr}}

/* --- het merk: proefblad en monogram naast elkaar --- */
.merkbeelden{display:grid;grid-template-columns:1.15fr .85fr;gap:1.8rem;margin:1.4rem 0 1.6rem;
  align-items:start}
.merkbeelden figure{margin:0}
.merkbeelden img{width:100%;height:auto;display:block;border:1px solid var(--hair)}
.merkbeelden figcaption{font-family:var(--sans);font-size:.75rem;line-height:1.45;color:var(--muted);
  padding-top:.6rem}
@media (max-width:760px){.merkbeelden{grid-template-columns:1fr}}

/* --- merkstrook op de voorpagina --- */
.merkstrip{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:2.6rem;align-items:center;
  margin:3rem 0 0;padding:2.2rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--hair)}
.merkstrip__tekst h2{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.12;
  margin:.45rem 0 .8rem}
.merkstrip__tekst p{margin:0 0 1.1rem;color:var(--soft);font-size:1rem;line-height:1.5;max-width:30rem}
.merkstrip__beelden{display:grid;grid-template-columns:repeat(2,minmax(0,14rem));gap:1.2rem;align-items:end;
  justify-content:end}
.merkstrip__een{display:block;border:1px solid var(--hair);background:var(--raised);padding:.4rem}
.merkstrip__een img{width:100%;height:auto;display:block}
@media (max-width:900px){.merkstrip{grid-template-columns:1fr;gap:1.6rem}
  .merkstrip__beelden{grid-template-columns:repeat(2,1fr);gap:.7rem}}

/* --- de horizontale schuifbalk van de carrousels dempen --- */
.carrousel{scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.carrousel::-webkit-scrollbar{height:6px}
.carrousel::-webkit-scrollbar-track{background:transparent}
.carrousel::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}
.carrousel::-webkit-scrollbar-thumb:hover{background:var(--gold)}
/* merkstrook: kaarten mogen niet wegvallen op een dof scherm */
.merkstrip__een{border-color:var(--rule)}

/* --- de vergelijkingspagina --- */
.vergelijk{margin:0 0 2.6rem;padding:0 0 2rem;border-bottom:1px solid var(--hair)}
.vergelijk h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.1rem,2vw,1.35rem);
  line-height:1.25;margin:.35rem 0 .7rem;color:var(--soft);letter-spacing:.01em}
.vergelijk .dek{color:var(--soft);margin:0 0 .9rem;font-size:1.02rem;line-height:1.5;max-width:44rem}
.verschil__tekst{margin:0 0 1.1rem;padding:.9rem 1.1rem;background:var(--raised);
  border-left:3px solid var(--gold);font-size:.98rem;line-height:1.55;color:var(--ink)}
.koppen--vergelijk{margin-top:.4rem}
.koppen--vergelijk li{grid-template-columns:9.5rem 1fr}
.vergelijkwijzer{margin:2rem 0 0;font-family:var(--sans);font-size:.8125rem;letter-spacing:.04em}
.vergelijkwijzer a{border-bottom:1px solid var(--gold);padding-bottom:.1rem}
@media (max-width:620px){.koppen--vergelijk li{grid-template-columns:1fr}}

/* --- de nieuwsbrief --- */
.samenstelling{font-size:.9375rem;color:var(--muted);max-width:44rem}
.uitlegblok{margin:2rem 0 2.4rem;max-width:44rem}
.uitlegblok h2,.inschrijfblok h2{font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 .9rem}
.opsomming{margin:0 0 1rem;padding-left:1.1rem;color:var(--soft)}
.opsomming li{margin-bottom:.45rem}
.inschrijfblok{padding-top:1.6rem;border-top:2px solid var(--ink);max-width:44rem}
.inschrijf label{font-family:var(--sans);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:.5rem}
.inschrijf__rij{display:flex;gap:.6rem;flex-wrap:wrap}
.inschrijf input[type=email]{flex:1 1 16rem;padding:.85rem 1rem;border:1px solid var(--rule);
  background:var(--raised);font-family:var(--sans);font-size:1rem;color:var(--ink)}
.inschrijf input[type=email]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.inschrijf button{font-family:var(--sans);font-size:.875rem;letter-spacing:.04em;padding:.85rem 1.4rem;
  background:var(--ink);color:var(--paper);border:0;cursor:pointer}
.inschrijf button:hover{background:#000}
.inschrijf__klein{margin:.9rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--muted);max-width:32rem}
.inschrijf__verborgen{position:absolute;left:-9999px}

.inschrijf__status{font-family:var(--serif);font-size:1.02rem;line-height:1.65;color:var(--soft);max-width:38rem;margin:.4rem 0 .9rem}
.inschrijf__status a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold)}