@charset "utf-8";
/* ============================================================================
   Gazete - een krant over yufka.
   Kolomlijnen, kaderregels, een editieregel en een uitneembaar zakenkatern.
   Palet, lettertypes en contrastwaarden komen uit design/tokens-10demos.md,
   richting 3. Alle contrastcijfers in de commentaarregels zijn nagerekend met
   de WCAG 2.1 formule, niet geschat.
   ========================================================================== */

/* ------------------------------------------------------------- lettertypes */
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader-cur.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/assets/fonts/publicsans.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --papier:       #F4F1EA;
  --vlak:         #E7E2D6;   /* het zakenkatern staat op getint papier */
  --tekst:        #141210;   /* 16,57:1 op papier, 14,46:1 op vlak */
  --gedempt:      #5C574E;   /*  6,36:1 op papier,  5,55:1 op vlak */
  --goud:         #C9A227;   /*  2,14:1 - uitsluitend decoratief */
  --goud-lijn:    #9C7E1E;   /*  3,44:1 op papier, 3,00:1 op vlak */
  --goud-tekst:   #7A6218;   /*  5,19:1 op papier, 4,53:1 op vlak */
  --rood:         #A81F1F;   /*  6,46:1 op papier, 5,64:1 op vlak */
  --knop-vlak:    #141210;
  --knop-tekst:   #F4F1EA;
  --focus:        #A81F1F;

  --kop:        'Newsreader', Georgia, 'Times New Roman', serif;
  --tekst-font: 'Public Sans', system-ui, -apple-system, sans-serif;
  --kop-gewicht: 600;

  --radius: 0;
  --kolommen: 12;
  --kolom-min: 24ch;         /* "conserveringsmiddelen" is 21 tekens */
  --kolom-lijn: 1px;
  --regel-dik: 3px;
  --veer: cubic-bezier(.16, 1, .3, 1);
  --duur: 1.2s;
  --perspectief: 1400px;
  --nav-ruimte: 22ch;

  --goot: 1.75rem;
  --rand: clamp(1rem, 4vw, 3rem);
  --breed: 1400px;
  --balk-hoog: 64px;
}

/* Nederlands en Duits hebben langere ondeelbare woorden dan Frans en Engels;
   daarom is de minimale kolombreedte per taal instelbaar. */
html:lang(de) { --kolom-min: 26ch; }
html:lang(nl) { --kolom-min: 25ch; }
html:lang(fr), html:lang(en), html:lang(tr) { --kolom-min: 23ch; }

/* --------------------------------------------------------------- grondslag */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--papier);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tekst);
  font-family: var(--kop);
  font-size: 1.0625rem;         /* 17 px */
  line-height: 1.62;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }
img, video { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--kop);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

:target { scroll-margin-top: calc(var(--balk-hoog) + 12px); }
[id] { scroll-margin-top: calc(var(--balk-hoog) + 12px); }

.verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.overslaan {
  position: absolute; left: .5rem; top: -4rem; z-index: 90;
  background: var(--tekst); color: var(--papier);
  padding: .7rem 1.1rem; font-family: var(--tekst-font);
  font-size: .8125rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none;
  transition: top .18s var(--veer);
}
.overslaan:focus { top: .5rem; }

/* ------------------------------------------------------- krantenbandje top */
/* Bewuste afwijking van de andere demo's: de cookiemelding staat in de
   normale tekststroom, boven de titelkop. Een zwevende laag kan nooit over
   een knop vallen als hij niet zweeft. Hij staat in de server-HTML, dus er
   is geen layout shift; een regel in de <head> zet hem weg als hij eerder is
   weggeklikt, vóór het eerste beeld. */
.cookiestrook {
  background: var(--tekst);
  color: var(--papier);
  font-family: var(--tekst-font);
  font-size: .8125rem;
  line-height: 1.45;
}
.cookie-weg .cookiestrook { display: none; }
.cookiestrook__rij {
  max-width: var(--breed); margin: 0 auto;
  padding: .55rem var(--rand);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
}
.cookiestrook b { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .75rem; }
.cookiestrook p { margin: 0; color: #E4DFD4; max-width: 78ch; }
.cookiestrook button {
  margin-left: auto; background: none; border: 1px solid #6A655C;
  color: var(--papier); font: inherit; font-weight: 700;
  padding: .35rem .85rem; cursor: pointer; min-height: 34px;
  transition: background-color .2s var(--veer);
}
.cookiestrook button:hover { background: #2A2723; }
.cookiestrook button:focus-visible { outline-color: #E4DFD4; }

/* ---------------------------------------------------------------- titelkop */
.titelkop {
  border-bottom: var(--regel-dik) solid var(--tekst);
  background: var(--papier);
}
.titelkop__rij {
  max-width: var(--breed); margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.25rem) var(--rand) 0;
}
.titelkop__merk {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem 2rem;
  border-bottom: 1px solid var(--tekst);
  padding-bottom: .9rem;
}
.titelkop__merk a { text-decoration: none; display: block; }
/* De bron is 480 x 203. Nooit breder tonen dan 240 CSS-pixels. */
.titelkop__logo { width: clamp(150px, 22vw, 214px); height: auto; }
.titelkop__zij {
  font-family: var(--tekst-font); font-size: .75rem; line-height: 1.6;
  letter-spacing: .09em; text-transform: uppercase; color: var(--gedempt);
  text-align: right;
}
.titelkop__zij .stempel {
  display: inline-block; color: var(--rood); border: 1px solid var(--rood);
  padding: .18rem .5rem; font-weight: 700; letter-spacing: .1em;
}
.titelkop__onder {
  /* Een raster en geen space-between: de leus staat in Newsreader cursief,
     die met font-display: swap binnenkomt. In een flexrij verschuift zijn
     doos dan mee zodra het lettertype er is, en dat is meetbare CLS
     (0,0003 op 768 px). In een kolom van vaste breedte gebeurt dat niet. */
  display: grid; grid-template-columns: 1fr minmax(0, 1.7fr) 1fr;
  gap: .35rem 1.5rem; align-items: baseline;
  padding: .55rem 0 .7rem;
  font-family: var(--tekst-font); font-size: .78125rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt);
}
.titelkop__leus { font-family: var(--kop); font-style: italic; font-size: 1rem;
  letter-spacing: 0; text-transform: none; color: var(--tekst); text-align: center; }
.titelkop__deel { text-align: right; }

/* ------------------------------------------------------------- editieregel */
.editieregel {
  border-top: 1px solid var(--tekst);
  border-bottom: 1px solid var(--tekst);
  background: var(--papier);
}
.editieregel__rij {
  max-width: var(--breed); margin: 0 auto;
  padding: 0 var(--rand);
  display: flex; align-items: center; gap: 0 1.1rem;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.editieregel__rij::-webkit-scrollbar { display: none; }
.editieregel__label {
  font-family: var(--tekst-font); font-size: .6875rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--rood);
  padding: .55rem 0; white-space: nowrap;
}
.editieregel ul { display: flex; gap: 0 1.1rem; align-items: center; }
.editieregel li { white-space: nowrap; }
.editieregel a {
  display: block; padding: .55rem .15rem;
  font-family: var(--tekst-font); font-size: .8125rem; font-weight: 500;
  letter-spacing: .04em; color: var(--gedempt); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--veer), border-color .2s var(--veer);
}
.editieregel a:hover { color: var(--tekst); border-bottom-color: var(--goud-lijn); }
.editieregel a[aria-current="true"] {
  color: var(--rood); font-weight: 700; border-bottom-color: var(--rood);
}

/* -------------------------------------------------------------- plakbalk */
.balk {
  position: sticky; top: 0; z-index: 60;
  background: var(--papier);
  border-bottom: 1px solid var(--tekst);
  transition: box-shadow .3s var(--veer);
}
.balk[data-vast="ja"] { box-shadow: 0 10px 24px -18px rgba(20,18,16,.55); }
.balk__rij {
  max-width: var(--breed); margin: 0 auto;
  min-height: var(--balk-hoog);
  padding: 0 var(--rand);
  display: flex; align-items: center; gap: 0 1.25rem;
  position: relative;
}
.balk__merk {
  font-family: var(--kop); font-weight: 700; font-size: 1.1875rem;
  letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  padding: .4rem .1rem; margin-right: auto;
}
.balk__merk span { color: var(--goud-tekst); }

.hoofdnav { display: flex; align-items: center; gap: 0 .35rem; }
.hoofdnav > a {
  display: inline-block; padding: .55rem .6rem;
  max-width: var(--nav-ruimte);
  font-family: var(--tekst-font); font-size: .8125rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; color: var(--tekst);
  border-bottom: 2px solid transparent;
  transition: border-color .2s var(--veer), color .2s var(--veer);
}
.hoofdnav > a:hover { border-bottom-color: var(--goud-lijn); }
.hoofdnav > a[aria-current="page"] { border-bottom-color: var(--rood); color: var(--rood); }
.nav-scheiding { width: 1px; height: 22px; background: var(--tekst); opacity: .35; margin: 0 .5rem; }
.hoofdnav > a.nav-katern { color: var(--rood); font-weight: 700; }
.hoofdnav > a.nav-katern::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border: 1px solid var(--rood); margin-right: .45rem;
}

.taallint ul { display: flex; gap: 0 .1rem; }
.taallint a {
  display: block; min-width: 34px; min-height: 34px;
  padding: .5rem .35rem; text-align: center;
  font-family: var(--tekst-font); font-size: .75rem; font-weight: 700;
  letter-spacing: .07em; color: var(--gedempt); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--veer), border-color .2s var(--veer);
}
.taallint a:hover { color: var(--tekst); border-bottom-color: var(--goud-lijn); }
.taallint a[aria-current="true"] { color: var(--rood); border-bottom-color: var(--rood); }

.menuknop {
  display: none; width: 44px; height: 44px; padding: 0; flex: 0 0 auto;
  background: none; border: 1px solid var(--tekst); cursor: pointer;
}
.menuknop span { display: block; width: 20px; height: 1.5px; background: var(--tekst); margin: 4px auto;
  transition: transform .3s var(--veer), opacity .2s linear; }
.menuknop[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menuknop[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menuknop[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ------------------------------------------------------------ editiekeuze */
/* De twee doelgroepen. Geen schuifknop maar twee katernnamen naast elkaar,
   zoals een krant zijn delen noemt. De keuze verplaatst het zakenkatern naar
   voren; hij verbergt niets. */
.editiekeuze {
  display: flex; align-items: stretch;
  border: 1px solid var(--tekst); font-family: var(--tekst-font);
}
.editiekeuze button {
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: .71875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gedempt);
  padding: .55rem .7rem; min-height: 36px; white-space: nowrap;
  transition: background-color .25s var(--veer), color .25s var(--veer);
}
.editiekeuze button + button { border-left: 1px solid var(--tekst); }
.editiekeuze button[aria-pressed="true"] { background: var(--tekst); color: var(--papier); }
.editiekeuze button[aria-pressed="false"]:hover { color: var(--tekst); background: var(--vlak); }
.editiekeuze__label {
  font-size: .6875rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gedempt); align-self: center;
  margin-right: .6rem; white-space: nowrap;
}
.balk .editiekeuze { margin-left: .25rem; }

/* --------------------------------------------------------------- raamwerk */
/* width: 100% is niet overbodig. <main> is een flexkolom, en een flexitem met
   margin-inline: auto krimpt naar zijn inhoud in plaats van te strekken.
   Zonder deze regel stond de katernkop op de zakelijke pagina ingesprongen. */
.krant { width: 100%; max-width: var(--breed); margin: 0 auto;
  padding: 0 var(--rand); position: relative; }

.blok { border-bottom: 1px solid rgba(20,18,16,.28); }
/* De verticale ruimte zit op .krant en niet op .blok, zodat de kolomlijnen
   (die binnen .krant absoluut staan) over de volle sectiehoogte lopen. */
.blok > .krant { padding-block: clamp(2.25rem, 5vw, 4rem); }
.blok--dun > .krant { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.blok--slot { border-bottom: 0; }

/* Kolomlijnen die zichzelf tekenen. scaleY vanaf de bovenkant, dus geen
   hoogte-animatie en geen layout shift. Ze staan absoluut, dus ze duwen
   niets weg. */
.lijnen { position: absolute; top: 0; bottom: 0;
  left: var(--rand); right: var(--rand); pointer-events: none; }
.lijnen i {
  position: absolute; top: 0; bottom: 0; width: var(--kolom-lijn);
  background: var(--goud-lijn); opacity: .5;
  left: calc(((100% + var(--goot)) / var(--kolommen)) * var(--i) - var(--goot) / 2);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--duur) var(--veer);
}
.blok.in .lijnen i { transform: scaleY(1); }
.blok.in .lijnen i:nth-child(2)  { transition-delay: .06s; }
.blok.in .lijnen i:nth-child(3)  { transition-delay: .12s; }
.blok.in .lijnen i:nth-child(4)  { transition-delay: .18s; }
.blok.in .lijnen i:nth-child(5)  { transition-delay: .24s; }
.blok.in .lijnen i:nth-child(6)  { transition-delay: .30s; }
.blok.in .lijnen i:nth-child(7)  { transition-delay: .36s; }
.blok.in .lijnen i:nth-child(8)  { transition-delay: .42s; }
.blok.in .lijnen i:nth-child(9)  { transition-delay: .48s; }
.blok.in .lijnen i:nth-child(10) { transition-delay: .54s; }
.blok.in .lijnen i:nth-child(11) { transition-delay: .60s; }
@media (max-width: 899px) { .lijnen { display: none; } }

.rooster {
  display: grid; grid-template-columns: repeat(var(--kolommen), minmax(0, 1fr));
  column-gap: var(--goot); row-gap: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
}

/* --------------------------------------------------------------- rubriek */
.rubriek {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--tekst-font); font-size: .75rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--rood);
  margin-bottom: .9rem;
}
.rubriek::after { content: ""; flex: 1; height: 1px; background: var(--goud-lijn); }
.rubriek--stil { color: var(--goud-tekst); }

.kopgroep { margin-bottom: 1.4rem; }
.kop-xl { font-size: clamp(2.1rem, 5.6vw, 4rem); }
.kop-l  { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
.kop-m  { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.kop-s  { font-size: 1.1875rem; }

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.28125rem); line-height: 1.5;
  color: var(--tekst); max-width: 62ch;
}
.stil { color: var(--gedempt); }
.klein { font-family: var(--tekst-font); font-size: .8125rem; line-height: 1.55; color: var(--gedempt); }

/* Kolomtekst. Nooit smaller dan --kolom-min, anders breekt
   "conserveringsmiddelen" (21 tekens) de kolom open. */
.lopend { columns: var(--kolom-min) 3; column-gap: var(--goot);
  column-rule: 1px solid rgba(20,18,16,.2); hyphens: auto; }
.lopend--2 { columns: var(--kolom-min) 2; }
/* Uitvullen hoort bij een krant, maar alleen waar er echte kolommen zijn en
   het afbreken aan staat. Onder 900 px is het één kolom over de volle
   breedte en geeft uitvullen rivieren. */
@media (min-width: 900px) { .lopend { text-align: justify; } }
.lopend p { margin: 0 0 .85em; }
.lopend p:last-child { margin-bottom: 0; }
.initiaal::first-letter {
  float: left; font-size: 3.4em; line-height: .8; font-weight: 700;
  padding: .04em .09em 0 0; color: var(--tekst);
}

/* ------------------------------------------------------------------- hero */
.voorpagina { position: relative; display: flex; flex-direction: column; }
.voorpagina__beeld { position: relative; background: #EFE9DF; }
/* Vaste verhouding per breedte. Zonder dit klopt de hoogte van het staande
   mobiele beeld niet met de width/height van het liggende bronbeeld en
   verspringt de pagina zodra het laadt. */
.voorpagina__beeld img { width: 100%; height: auto; display: block; aspect-ratio: 1600 / 893; }
.voorpagina__tekst { padding: 0 0 clamp(1.25rem, 3vw, 1.75rem); order: -1; }
@media (max-width: 899px) {
  .voorpagina__beeld img { aspect-ratio: 760 / 1182; max-height: 58vh; object-fit: cover; object-position: 62% center; }
}
.voorpagina__tekst h1 { hyphens: auto; }
.voorpagina__slot {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 1.5rem;
  position: relative; z-index: 2;
}

@media (min-width: 900px) {
  /* De hero toonde eerst een stockbeeld met links een lege cremezweem, waar de
       tekst zonder overlay op kon staan. Dat beeld is vervangen door een echte
       productfoto van Ensar; daarin loopt het tekstgebied van 16 tot 234
       luminantie, deels bijna zwart en deels bijna wit. Donkere inkt is daar
       onleesbaar. Vandaar de leesbaarheidslaag hieronder. */
  .voorpagina { display: grid; grid-template-columns: 1fr; align-items: center; }
  .voorpagina__beeld { grid-area: 1 / 1; }
    /* Papierkleur links, volledig doorzichtig vanaf 58%, zodat de foto rechts intact blijft. */
    .voorpagina__beeld::after {
      content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
      background: linear-gradient(to right,
        var(--papier) 0%, rgba(244,241,234,.95) 26%,
        rgba(244,241,234,.72) 42%, rgba(244,241,234,0) 58%);
    }
  .voorpagina__tekst {
    grid-area: 1 / 1; z-index: 2; align-self: center; order: 0;
    width: 34%; min-width: 300px; padding: 0;
  }
  .voorpagina__tekst .lead { font-size: clamp(.9375rem, 1.05vw, 1.0625rem); }
  .voorpagina__tekst .kop-xl { font-size: clamp(1.75rem, 2.7vw, 2.7rem); }
  /* Het beeld mag de vouw niet opeten: de primaire knop staat in het beeld
     en moet zichtbaar blijven op een scherm van 900 px hoog. */
  .voorpagina__beeld img { max-height: 62vh; object-fit: cover; object-position: center; }
}

.hero-cijfers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: var(--regel-dik) solid var(--tekst);
  border-bottom: 1px solid var(--tekst);
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.hero-cijfers div { padding: 1rem 1.25rem 1.1rem; border-left: 1px solid rgba(20,18,16,.25); }
.hero-cijfers div:first-child { border-left: 0; padding-left: 0; }
.hero-cijfers b { display: block; font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero-cijfers span { display: block; margin-top: .35rem; font-family: var(--tekst-font); font-size: .78125rem; line-height: 1.4; color: var(--gedempt); }

/* --------------------------------------------------------- inhoudsopgave */
.inhoud ol { columns: 230px 4; column-gap: var(--goot); }
.inhoud li { break-inside: avoid; border-bottom: 1px dotted rgba(20,18,16,.45); }
.inhoud a {
  display: flex; align-items: baseline; gap: .6rem; padding: .6rem 0;
  text-decoration: none;
}
.inhoud .nr { font-family: var(--tekst-font); font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; color: var(--goud-tekst); min-width: 2.4ch; }
.inhoud .tt { font-size: 1.0625rem; font-weight: 600; }
.inhoud .rb { margin-left: auto; font-family: var(--tekst-font); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gedempt); text-align: right; }
.inhoud a:hover .tt { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--goud-lijn); }

/* ---------------------------------------------------------------- artikel */
.artikel { display: flex; flex-direction: column; }
.artikel__beeld { position: relative; overflow: hidden; background: var(--vlak); }
.artikel__beeld img { width: 100%; height: auto; }
.artikel__bijschrift {
  font-family: var(--kop); font-style: italic; font-size: .875rem; line-height: 1.45;
  color: var(--gedempt); padding-top: .5rem; margin-top: .5rem;
  border-top: 1px dashed rgba(20,18,16,.45);
}
.artikel h3 { margin: .9rem 0 .5rem; }
.artikel p { font-size: .9375rem; line-height: 1.55; }
.artikel__slot { margin-top: auto; padding-top: .75rem; }
.prijs {
  font-family: var(--tekst-font); font-weight: 700; font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.prijs small { font-weight: 400; color: var(--gedempt); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.etiket {
  display: inline-block; font-family: var(--tekst-font); font-size: .6875rem;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--goud-tekst); border: 1px solid var(--goud-lijn);
  padding: .2rem .5rem;
}

/* ------------------------------------------------------------------ knop */
.knop {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--tekst-font); font-size: .8125rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding: .85rem 1.4rem; min-height: 46px; border: 1px solid var(--tekst);
  background: none; color: var(--tekst); cursor: pointer;
  transition: background-color .3s var(--veer), color .3s var(--veer);
}
.knop:hover { background: var(--tekst); color: var(--papier); }
.knop--vol { background: var(--knop-vlak); color: var(--knop-tekst); }
.knop--vol:hover { background: #33302B; color: var(--knop-tekst); }
.knop__pijl { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6;
  transition: transform .3s var(--veer); }
.knop:hover .knop__pijl { transform: translateX(3px); }
.knop--stil { border-color: rgba(20,18,16,.4); }
.link {
  font-family: var(--tekst-font); font-size: .8125rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tekst);
  text-decoration: none; border-bottom: 1px solid var(--goud-lijn);
  padding-bottom: 2px;
}
.link:hover { border-bottom-color: var(--rood); color: var(--rood); }

/* ------------------------------------------------------------- scheurlijn */
/* Het katern is uitneembaar. Dat moet je zien: een perforatie, een schaartje
   en een instructie in de marge. */
.scheur {
  position: relative; max-width: var(--breed);
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--rand) 0;
}
.scheur::before {
  content: ""; position: absolute; left: var(--rand); right: var(--rand); top: 0; height: 3px;
  background-image: radial-gradient(circle, var(--tekst) 0 1.4px, transparent 1.7px);
  background-size: 11px 3px; background-repeat: repeat-x; opacity: .5;
}
.scheur__label {
  position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
  background: var(--papier); padding: 0 .9rem;
  display: flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-family: var(--tekst-font); font-size: .6875rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gedempt);
}
.scheur__label svg { width: 15px; height: 15px; fill: none; stroke: var(--gedempt); stroke-width: 1.5; }

/* ---------------------------------------------------------------- katern */
/* Het zakenkatern is ander drukwerk: getint papier, een eigen kop, een
   dichter raster, een kleiner corps en Public Sans in de lopende tekst in
   plaats van Newsreader. Het ligt op de krant, met een schaduw langs de rand. */
.katern {
  --papier: #E7E2D6;
  --goot: 1.35rem;
  --kolom-min: 21ch;
  background: var(--vlak);
  color: var(--tekst);
  font-family: var(--tekst-font);
  font-size: .9375rem; line-height: 1.55;
  border-top: var(--regel-dik) solid var(--rood);
  border-bottom: 1px solid rgba(20,18,16,.35);
  box-shadow: 0 -1px 0 rgba(20,18,16,.18), 0 26px 40px -34px rgba(20,18,16,.65);
  padding: 0 0 clamp(2rem, 4vw, 3rem);
}
.katern .lopend { column-rule-color: rgba(20,18,16,.25); }
.katern .lijnen i { opacity: .45; }
.katern .blok { border-bottom-color: rgba(20,18,16,.3); }
.katern h2, .katern h3, .katern h4 { font-family: var(--kop); }
.katern .kop-l { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.katern .kop-m { font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
.katern .lead { font-family: var(--tekst-font); font-size: 1rem; line-height: 1.5; }

/* Op de zakelijke pagina is de hele pagina het katern. */
html[data-katern="1"] { background: var(--vlak); }
html[data-katern="1"] body { background: var(--vlak); font-family: var(--tekst-font); font-size: .9375rem; line-height: 1.55; }
html[data-katern="1"] .balk,
html[data-katern="1"] .titelkop,
html[data-katern="1"] .editieregel,
html[data-katern="1"] .scheur__label,
html[data-katern="1"] .voet { background: var(--vlak); }
html[data-katern="1"] .lead { font-family: var(--tekst-font); }
html[data-katern="1"] .balk { border-bottom-color: var(--rood); border-bottom-width: 2px; }

.katernkop {
  border-bottom: 1px solid var(--tekst);
  padding: clamp(1rem, 2.5vw, 1.6rem) 0 .8rem;
}
.katernkop__rij { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; }
.katernkop h2 {
  font-family: var(--kop); font-weight: 700; color: var(--rood);
  font-size: clamp(1.65rem, 4.4vw, 3rem); letter-spacing: -.01em;
  text-transform: uppercase;
}
.katernkop__deel {
  font-family: var(--tekst-font); font-size: .6875rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gedempt);
  margin-left: auto; white-space: nowrap;
}
.katernkop__leus { font-family: var(--tekst-font); font-size: .9375rem; color: var(--gedempt); max-width: 68ch; margin: .55rem 0 0; }

/* Het 3D-moment: het katern schuift naar binnen alsof je een bijlage uit de
   krant trekt. Alleen transform en opacity, dus geen layout shift. */
.katernhoes {
  perspective: var(--perspectief); perspective-origin: 20% 30%;
  /* Het katern staat vóór de onthulling 3% naar rechts. Zonder deze clip
     groeit documentElement.scrollWidth mee en meldt de toets horizontale
     scroll, ook al kun je er niet heen scrollen. */
  overflow: hidden; padding-bottom: 44px;
}
.katernhoes .katern {
  transform: rotateY(-6deg) translate3d(3%, 0, -40px);
  opacity: .001;
  transform-origin: left center;
  transition: transform 1.1s var(--veer), opacity .8s var(--veer);
}
.katernhoes.in .katern { transform: none; opacity: 1; }
.rm .katernhoes .katern { transform: none; opacity: 1; transition: none; }

/* ---------------------------------------------------------------- tabellen */
table { width: 100%; border-collapse: collapse; font-family: var(--tekst-font); font-size: .875rem; }
caption {
  text-align: left; font-size: .6875rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rood); padding: 0 0 .5rem;
  border-bottom: 2px solid var(--tekst);
}
th, td { text-align: left; padding: .55rem .75rem .55rem 0; border-bottom: 1px solid rgba(20,18,16,.22); vertical-align: top; }
th { font-weight: 700; width: 46%; }
td { font-variant-numeric: tabular-nums; }

.open-waarde {
  display: inline-block; font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--rood);
  border: 1px dashed var(--rood); padding: .1rem .45rem; background: rgba(168,31,31,.05);
  font-family: var(--tekst-font);
}
.spec { display: grid; gap: 1.75rem var(--goot);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); align-items: start; }
.spec__waarschuwing, .spec__voet { grid-column: 1 / -1; }
.spec__kop { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.spec__waarschuwing {
  border: 1px solid var(--rood); border-left: var(--regel-dik) solid var(--rood);
  padding: .9rem 1.1rem; background: rgba(168,31,31,.045);
}
.spec__waarschuwing h4 { font-family: var(--tekst-font); font-size: .8125rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rood); margin: 0 0 .4rem; }
.spec__waarschuwing p { font-family: var(--tekst-font); font-size: .84375rem; line-height: 1.5; margin: 0; color: var(--tekst); }
.spec__voet { font-family: var(--tekst-font); font-size: .75rem; color: var(--gedempt); letter-spacing: .04em; }
.spec .hint { font-family: var(--tekst-font); font-size: .78125rem; color: var(--gedempt); }

.lijstje li {
  display: flex; gap: .75rem; padding: .5rem 0;
  border-bottom: 1px solid rgba(20,18,16,.2);
  font-family: var(--tekst-font); font-size: .875rem; line-height: 1.5;
}
.lijstje li::before { content: "\2014"; color: var(--goud-tekst); flex: 0 0 auto; }
.lijstje--open li::before { content: "?"; font-weight: 700; color: var(--rood); }

.feiten dt { font-family: var(--tekst-font); font-size: .6875rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gedempt); }
.feiten dd { margin: .15rem 0 .9rem; font-family: var(--tekst-font); font-size: .9375rem; }
.feiten { margin: 0; }

/* ------------------------------------------------------------------ video */
.videokader { position: relative; background: var(--tekst); }
.videokader video { width: 100%; height: auto; display: block; }
.videokader__knop {
  position: absolute; left: .75rem; bottom: .75rem;
  font-family: var(--tekst-font); font-size: .71875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--papier); color: var(--tekst); border: 1px solid var(--tekst);
  padding: .5rem .8rem; min-height: 38px; cursor: pointer;
}
.videobijschrift {
  font-family: var(--kop); font-style: italic; font-size: .875rem; line-height: 1.45;
  color: var(--gedempt); padding-top: .5rem; margin: .5rem 0 0;
  border-top: 1px dashed rgba(20,18,16,.45);
}

/* -------------------------------------------------------------- formulier */
.formulier { display: grid; gap: 1.1rem; max-width: 44rem; font-family: var(--tekst-font); }
.veld { display: grid; gap: .35rem; }
.veld > label { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; }
.veld input, .veld select, .veld textarea {
  font: inherit; font-size: .9375rem; padding: .7rem .8rem; min-height: 46px;
  background: var(--papier); color: var(--tekst);
  border: 1px solid rgba(20,18,16,.45); border-radius: 0;
}
.veld textarea { min-height: 8rem; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--tekst); }
.veld .hint { font-size: .78125rem; color: var(--gedempt); margin: 0; }
.veld .fout { font-size: .78125rem; color: var(--rood); margin: 0; font-weight: 700; }
.veld [aria-invalid="true"] { border-color: var(--rood); border-width: 2px; }
.aanvink { display: flex; gap: .6rem; align-items: flex-start; }
.aanvink input { min-height: 0; width: 20px; height: 20px; margin-top: .2rem; flex: 0 0 auto; accent-color: var(--rood); }
.aanvink label { font-weight: 400; font-size: .84375rem; line-height: 1.5; }
.melding { font-family: var(--tekst-font); font-size: .875rem; padding: .8rem 1rem; margin: 0; }
.melding--gelukt { border: 1px solid var(--goud-lijn); background: rgba(156,126,30,.08); }
.demo-noot { font-family: var(--tekst-font); font-size: .78125rem; color: var(--gedempt); margin: 0; }

/* ------------------------------------------------------------- kruimelpad */
.kruimel { padding: .8rem 0; border-bottom: 1px solid rgba(20,18,16,.25); }
.kruimel ol { display: flex; flex-wrap: wrap; gap: .35rem .5rem;
  font-family: var(--tekst-font); font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gedempt); }
.kruimel li + li::before { content: "\203A"; margin-right: .5rem; color: var(--goud-lijn); }
.kruimel a { color: var(--gedempt); text-decoration: none; }
.kruimel a:hover { color: var(--tekst); }
.kruimel [aria-current="page"] { color: var(--tekst); font-weight: 700; }

/* --------------------------------------------------------------- voettekst */
.voet {
  border-top: var(--regel-dik) solid var(--tekst);
  background: var(--papier);
  font-family: var(--tekst-font); font-size: .875rem;
  padding: clamp(2rem, 4vw, 3rem) 0 1.5rem;
}
.voet__rooster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem var(--goot);
}
.voet h2 { font-family: var(--tekst-font); font-size: .6875rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--rood);
  border-bottom: 1px solid var(--goud-lijn); padding-bottom: .4rem; margin-bottom: .7rem; }
.voet li a { display: inline-block; padding: .3rem 0; color: var(--gedempt); text-decoration: none; }
.voet li a:hover { color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }
.voet address { font-style: normal; line-height: 1.7; color: var(--gedempt); margin-top: .9rem; }
.voet address a { color: var(--gedempt); }
.voet__logo { width: 168px; height: auto; }
.sociaal { display: flex; gap: .5rem; }
.sociaal a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(20,18,16,.35); color: var(--tekst); }
.sociaal a:hover { border-color: var(--rood); color: var(--rood); }
.sociaal svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.voet__slot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  border-top: 1px solid rgba(20,18,16,.3); margin-top: 2rem; padding-top: 1rem;
  font-size: .78125rem; color: var(--gedempt);
}
.voet__slot p { margin: 0; }
.voet__slot a { color: var(--gedempt); }

/* ------------------------------------------------------------ onthullingen */
[data-rv] { opacity: 0; transform: translate3d(0, 14px, 0); }
[data-rv].in { opacity: 1; transform: none;
  transition: opacity .7s var(--veer), transform .7s var(--veer); }
.rm [data-rv] { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------ kolomindeling */
.k2  { grid-column: span 2; }  .k3  { grid-column: span 3; }
.k4  { grid-column: span 4; }  .k5  { grid-column: span 5; }
.k6  { grid-column: span 6; }  .k7  { grid-column: span 7; }
.k8  { grid-column: span 8; }  .k9  { grid-column: span 9; }
.k12 { grid-column: 1 / -1; }

@media (max-width: 1099px) {
  .k3 { grid-column: span 6; } .k4 { grid-column: span 6; }
  .k5 { grid-column: span 6; } .k7 { grid-column: span 12; }
  .k8 { grid-column: span 12; } .k9 { grid-column: span 12; }
}
@media (max-width: 719px) {
  .k2, .k3, .k4, .k5, .k6 { grid-column: 1 / -1; }
  .lopend, .lopend--2 { columns: 1; }
}

/* -------------------------------------------------------------- de editie */
/* De keuze verplaatst het katern, hij verbergt niets. Alles blijft leesbaar
   en vindbaar; alleen de volgorde verandert. */
main { display: flex; flex-direction: column; }
main > * { order: 0; }
main > .voorpagina-blok { order: -2; }
[data-spoor="b2b"] main > .katernhoes { order: -1; }
[data-spoor="b2b"] main > .scheur { display: none; }
[data-spoor="b2b"] .katernhoes .katern { transform: none; opacity: 1; }

/* ------------------------------------------------------------------ mobiel */
/* De uitklapgrens ligt op 1180 px en niet op 900. Onder die breedte passen
   het woordmerk, vijf navigatie-items, de editiekeuze en vijf taalcodes niet
   meer op één regel; in het Frans zelfs tot 1280 px niet. Gemeten in vijf
   talen op 360, 900, 1024, 1280, 1440 en 1920 px. */
@media (max-width: 1279px) {
  .hoofdnav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--papier); border-bottom: var(--regel-dik) solid var(--tekst);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem var(--rand) 1.25rem;
    max-height: calc(100dvh - var(--balk-hoog)); overflow-y: auto;
    transform: translate3d(0, -8px, 0); opacity: 0; visibility: hidden;
    transition: transform .3s var(--veer), opacity .25s var(--veer), visibility 0s linear .25s;
  }
  html[data-katern="1"] .hoofdnav { background: var(--vlak); }
  .hoofdnav[data-open="ja"] { transform: none; opacity: 1; visibility: visible;
    transition: transform .3s var(--veer), opacity .25s var(--veer), visibility 0s; }
  .hoofdnav > a { padding: .85rem .1rem; font-size: .9375rem; max-width: none;
    border-bottom: 1px solid rgba(20,18,16,.2); }
  .hoofdnav > a[aria-current="page"] { border-bottom-color: var(--rood); }
  .nav-scheiding { display: none; }
  .menuknop { display: block; }
  .balk__editie { display: none; }
  .balk__rij { gap: 0 .5rem; }
  .taallint { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .taallint::-webkit-scrollbar { display: none; }
  .taallint ul { flex-wrap: nowrap; }
  .menu-editie { padding-top: 1rem; }
  .menu-editie .editiekeuze__label { display: block; margin: 0 0 .5rem; }
  .menu-editie .editiekeuze button { flex: 1; }
}
@media (min-width: 1280px) { .menu-editie { display: none; } }
/* Tussen 1280 en 1440 px valt het opschrift "Uw editie" weg. De groep heeft
   een aria-label, dus de betekenis blijft; in het Frans scheelt dit precies
   de 100 px die de balk daar tekort kwam. */
@media (max-width: 1439px) { .balk__editie .editiekeuze__label { display: none; } }

@media (max-width: 899px) {
  :root { --balk-hoog: 52px; --goot: 1.25rem; }
  .balk__merk { font-size: 1.0625rem; }
  .taallint a { min-width: 30px; padding: .45rem .2rem; font-size: .71875rem; }
  .editieregel a { padding: .45rem .15rem; }
  .voorpagina__tekst { display: flex; flex-direction: column; }
  .voorpagina__tekst .rubriek { order: 1; }
  .voorpagina__tekst h1 { order: 2; }
  .voorpagina__tekst .voorpagina__slot { order: 3; margin-top: .9rem; }
  .voorpagina__tekst .lead { order: 4; margin-top: 1.1rem; }
  .voorpagina__tekst .kop-xl { font-size: 1.8rem; }
  .titelkop__zij { text-align: left; font-size: .6875rem; }
  .titelkop__logo { width: 132px; }
  .titelkop__rij { padding-top: .75rem; }
  .titelkop__merk { padding-bottom: .6rem; }
  .titelkop__onder { padding: .35rem 0 .4rem; font-size: .71875rem;
    grid-template-columns: 1fr; }
  .titelkop__leus { text-align: left; }
  .titelkop__deel { display: none; }
  .titelkop__leus { font-size: .9375rem; }
  .cookiestrook { font-size: .71875rem; line-height: 1.4; }
  .cookiestrook__rij { padding: .45rem var(--rand); gap: .3rem .75rem; }
  .cookiestrook b { font-size: .6875rem; }
  .cookiestrook button { margin-left: 0; padding: .3rem .7rem; min-height: 32px; }
  .inhoud ol { columns: 1; }
  .hero-cijfers div { border-left: 0; padding-left: 0; border-top: 1px solid rgba(20,18,16,.2); }
  .hero-cijfers div:first-child { border-top: 0; }
}


/* -------------------------------------------------------- beperkte beweging */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .lijnen i { transform: scaleY(1) !important; }
  .katernhoes .katern { transform: none !important; opacity: 1 !important; }
  [data-rv] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------- afdrukken */
@media print {
  .balk, .cookiestrook, .editieregel, .menuknop, .editiekeuze, .scheur { display: none; }
  body { font-size: 10pt; }
  .katern { box-shadow: none; }
}