/*
 * Henk & Fred 2026 — opmaak uit de goedgekeurde ontwerpconcepten.
 *
 * NIET met de hand bewerken: dit bestand wordt gegenereerd door
 * bouw-stylesheet.py uit concept-homepage-v1.html, concept-artikel-v1.html en
 * concept-rubriek-v1.html. Wijzig het concept en draai het script opnieuw.
 *
 * De kleur- en fonttokens staan in theme.json; de :root-variabelen hieronder
 * blijven staan omdat de concept-CSS ze overal gebruikt.
 */

/* Geen horizontale scroll. clip in plaats van hidden, want hidden maakt een
   nieuwe scroll-container en breekt sticky positioning. */
html, body { overflow-x: clip; }


/* ============================================================ DESIGN TOKENS — afgeleid uit Henk&Fred_Huisstijl_2023.pdf ============================================================ */
:root {/* Primair (logo) */
  --hf-rood:#CA082E;
  --hf-blauw:#006592;

  /* Kleurenpalet handboek */
  --brick-orange:#E94F38;
  --blue-zodiac:#0F273D;
  --ball-blue:#30A4D4;
  --ripe-lemon:#F4D112;
  --jungle-green:#369E81;
  --golden-bell:#DC8C0D;
  --pine-green:#067075;

  /* Event-subhuisstijl */
  --event-green:#33BA9C;
  --event-blue:#304269;

  /* Tinten (20/40/60/80% conform handboek) */
  --rood-20:#F7E6EA; --rood-40:#EFB5C0;
  --blauw-20:#E6F0F4; --blauw-10:#F2F7F9;
  --mint-20:#EBF5F2;
  --lemon-20:#FDF8DC;

  /* Neutraal */
  --inkt:#111820;
  --grijs-700:#4A5560;
  --grijs-500:#78838F;
  --grijs-200:#E4E8EC;
  --grijs-100:#F1F4F6;
  --wit:#FFFFFF;

  /* Rubriekskleuren — één kleur per rubriek, zoals de pills in het magazine */
  --rub-nieuws:var(--hf-rood);
  --rub-innovaties:var(--hf-blauw);
  --rub-testpanel:var(--jungle-green);
  --rub-blogs:var(--golden-bell);
  --rub-gadgets:var(--ball-blue);
  --rub-agenda:var(--pine-green);
  --rub-interview:var(--brick-orange);

  /* Typografie */
  --display:'Anton', 'Arial Narrow', sans-serif;
  --serif:'Source Serif 4', Georgia, serif;
  --body:'Montserrat', system-ui, sans-serif;

  /* Maatvoering */
  --max:1240px;
  /* Strak, geen rondingen — het magazine gebruikt ze nergens. */
  --radius:0px;
  --radius-lg:0px;
  --schaduw:0 2px 4px rgba(15,39,61,.06), 0 8px 24px rgba(15,39,61,.08);
  --schaduw-lift:0 6px 12px rgba(15,39,61,.10), 0 18px 40px rgba(15,39,61,.14);
  --header-h:76px;
  /* Primair (logo) */
  --hf-rood:#CA082E;
  --hf-blauw:#006592;

  /* Kleurenpalet handboek */
  --brick-orange:#E94F38;
  --blue-zodiac:#0F273D;
  --ball-blue:#30A4D4;
  --ripe-lemon:#F4D112;
  --jungle-green:#369E81;
  --golden-bell:#DC8C0D;
  --pine-green:#067075;

  /* Event-subhuisstijl */
  --event-green:#33BA9C;
  --event-blue:#304269;

  /* Tinten (20/40/60/80% conform handboek) */
  --rood-20:#F7E6EA; --rood-40:#EFB5C0;
  --blauw-20:#E6F0F4; --blauw-10:#F2F7F9;
  --mint-20:#EBF5F2;
  --lemon-20:#FDF8DC;

  /* Neutraal */
  --inkt:#111820;
  --grijs-700:#4A5560;
  --grijs-500:#78838F;
  --grijs-200:#E4E8EC;
  --grijs-100:#F1F4F6;
  --wit:#FFFFFF;

  /* Rubriekskleuren — één kleur per rubriek, zoals de pills in het magazine */
  --rub-nieuws:var(--hf-rood);
  --rub-innovaties:var(--hf-blauw);
  --rub-testpanel:var(--jungle-green);
  --rub-blogs:var(--golden-bell);
  --rub-gadgets:var(--ball-blue);
  --rub-agenda:var(--pine-green);
  --rub-interview:var(--brick-orange);

  /* Typografie */
  --display:'Anton', 'Arial Narrow', sans-serif;
  --serif:'Source Serif 4', Georgia, serif;
  --body:'Montserrat', system-ui, sans-serif;

  /* Maatvoering */
  --max:1240px;
  /* Strak, geen rondingen — het magazine gebruikt ze nergens. */
  --radius:0px;
  --radius-lg:0px;
  --schaduw:0 2px 4px rgba(15,39,61,.06), 0 8px 24px rgba(15,39,61,.08);
  --schaduw-lift:0 6px 12px rgba(15,39,61,.10), 0 18px 40px rgba(15,39,61,.14);
  --header-h:76px;
  /* Primair (logo) */
  --hf-rood:#CA082E;
  --hf-blauw:#006592;

  /* Kleurenpalet handboek */
  --brick-orange:#E94F38;
  --blue-zodiac:#0F273D;
  --ball-blue:#30A4D4;
  --ripe-lemon:#F4D112;
  --jungle-green:#369E81;
  --golden-bell:#DC8C0D;
  --pine-green:#067075;

  /* Event-subhuisstijl */
  --event-green:#33BA9C;
  --event-blue:#304269;

  /* Tinten (20/40/60/80% conform handboek) */
  --rood-20:#F7E6EA; --rood-40:#EFB5C0;
  --blauw-20:#E6F0F4; --blauw-10:#F2F7F9;
  --mint-20:#EBF5F2;
  --lemon-20:#FDF8DC;

  /* Neutraal */
  --inkt:#111820;
  --grijs-700:#4A5560;
  --grijs-500:#78838F;
  --grijs-200:#E4E8EC;
  --grijs-100:#F1F4F6;
  --wit:#FFFFFF;

  /* Rubriekskleuren — één kleur per rubriek, zoals de pills in het magazine */
  --rub-nieuws:var(--hf-rood);
  --rub-innovaties:var(--hf-blauw);
  --rub-testpanel:var(--jungle-green);
  --rub-blogs:var(--golden-bell);
  --rub-gadgets:var(--ball-blue);
  --rub-agenda:var(--pine-green);
  --rub-interview:var(--brick-orange);

  /* Typografie */
  --display:'Anton', 'Arial Narrow', sans-serif;
  --serif:'Source Serif 4', Georgia, serif;
  --body:'Montserrat', system-ui, sans-serif;

  /* Maatvoering */
  --max:1240px;
  /* Strak, geen rondingen — het magazine gebruikt ze nergens. */
  --radius:0px;
  --radius-lg:0px;
  --schaduw:0 2px 4px rgba(15,39,61,.06), 0 8px 24px rgba(15,39,61,.08);
  --schaduw-lift:0 6px 12px rgba(15,39,61,.10), 0 18px 40px rgba(15,39,61,.14);
  --header-h:76px;
  /* Primair (logo) */
  --hf-rood:#CA082E;
  --hf-blauw:#006592;

  /* Kleurenpalet handboek */
  --brick-orange:#E94F38;
  --blue-zodiac:#0F273D;
  --ball-blue:#30A4D4;
  --ripe-lemon:#F4D112;
  --jungle-green:#369E81;
  --golden-bell:#DC8C0D;
  --pine-green:#067075;

  /* Event-subhuisstijl */
  --event-green:#33BA9C;
  --event-blue:#304269;

  /* Tinten (20/40/60/80% conform handboek) */
  --rood-20:#F7E6EA; --rood-40:#EFB5C0;
  --blauw-20:#E6F0F4; --blauw-10:#F2F7F9;
  --mint-20:#EBF5F2;
  --lemon-20:#FDF8DC;

  /* Neutraal */
  --inkt:#111820;
  --grijs-700:#4A5560;
  --grijs-500:#78838F;
  --grijs-200:#E4E8EC;
  --grijs-100:#F1F4F6;
  --wit:#FFFFFF;

  /* Rubriekskleuren — één kleur per rubriek, zoals de pills in het magazine */
  --rub-nieuws:var(--hf-rood);
  --rub-innovaties:var(--hf-blauw);
  --rub-testpanel:var(--jungle-green);
  --rub-blogs:var(--golden-bell);
  --rub-gadgets:var(--ball-blue);
  --rub-agenda:var(--pine-green);
  --rub-interview:var(--brick-orange);

  /* Typografie */
  --display:'Anton', 'Arial Narrow', sans-serif;
  --serif:'Source Serif 4', Georgia, serif;
  --body:'Montserrat', system-ui, sans-serif;

  /* Maatvoering */
  --max:1240px;
  /* Strak, geen rondingen — het magazine gebruikt ze nergens. */
  --radius:0px;
  --radius-lg:0px;
  --schaduw:0 2px 4px rgba(15,39,61,.06), 0 8px 24px rgba(15,39,61,.08);
  --schaduw-lift:0 6px 12px rgba(15,39,61,.10), 0 18px 40px rgba(15,39,61,.14);
  --header-h:76px;
  /* De magazinepagina is volledig CMYK opgemaakt en gebruikt exact de kleuren
     uit het handboek: de sterren zijn Golden Bell (C0 M50 Y100 K0), het
     merkblok Henk & Fred Blue (C100 M50 Y25 K5) en het accent Jungle Green
     (C89 M0 Y60 K0). We zetten hier dus de RGB-waarden uit het handboek en niet
     de hexwaarden die uit een CMYK-naar-sRGB-conversie van de PDF rollen. */
  --ster:var(--golden-bell);
  --tp-diep:var(--hf-blauw);
  /* Primair (logo) */
  --hf-rood:#CA082E;
  --hf-blauw:#006592;

  /* Kleurenpalet handboek */
  --brick-orange:#E94F38;
  --blue-zodiac:#0F273D;
  --ball-blue:#30A4D4;
  --ripe-lemon:#F4D112;
  --jungle-green:#369E81;
  --golden-bell:#DC8C0D;
  --pine-green:#067075;

  /* Event-subhuisstijl */
  --event-green:#33BA9C;
  --event-blue:#304269;

  /* Tinten (20/40/60/80% conform handboek) */
  --rood-20:#F7E6EA; --rood-40:#EFB5C0;
  --blauw-20:#E6F0F4; --blauw-10:#F2F7F9;
  --mint-20:#EBF5F2;
  --lemon-20:#FDF8DC;

  /* Neutraal */
  --inkt:#111820;
  --grijs-700:#4A5560;
  --grijs-500:#78838F;
  --grijs-200:#E4E8EC;
  --grijs-100:#F1F4F6;
  --wit:#FFFFFF;

  /* Rubriekskleuren — één kleur per rubriek, zoals de pills in het magazine */
  --rub-nieuws:var(--hf-rood);
  --rub-innovaties:var(--hf-blauw);
  --rub-testpanel:var(--jungle-green);
  --rub-blogs:var(--golden-bell);
  --rub-gadgets:var(--ball-blue);
  --rub-agenda:var(--pine-green);
  --rub-interview:var(--brick-orange);

  /* Typografie */
  --display:'Anton', 'Arial Narrow', sans-serif;
  --serif:'Source Serif 4', Georgia, serif;
  --body:'Montserrat', system-ui, sans-serif;

  /* Maatvoering */
  --max:1240px;
  /* Strak, geen rondingen — het magazine gebruikt ze nergens. */
  --radius:0px;
  --radius-lg:0px;
  --schaduw:0 2px 4px rgba(15,39,61,.06), 0 8px 24px rgba(15,39,61,.08);
  --schaduw-lift:0 6px 12px rgba(15,39,61,.10), 0 18px 40px rgba(15,39,61,.14);
  --header-h:76px;
  --cv-zacht:color-mix(in srgb, var(--golden-bell) 12%, #fff);
  /* Primair (logo) */
  --hf-rood:#CA082E;
  --hf-blauw:#006592;

  /* Kleurenpalet handboek */
  --brick-orange:#E94F38;
  --blue-zodiac:#0F273D;
  --ball-blue:#30A4D4;
  --ripe-lemon:#F4D112;
  --jungle-green:#369E81;
  --golden-bell:#DC8C0D;
  --pine-green:#067075;

  /* Event-subhuisstijl */
  --event-green:#33BA9C;
  --event-blue:#304269;

  /* Tinten (20/40/60/80% conform handboek) */
  --rood-20:#F7E6EA; --rood-40:#EFB5C0;
  --blauw-20:#E6F0F4; --blauw-10:#F2F7F9;
  --mint-20:#EBF5F2;
  --lemon-20:#FDF8DC;

  /* Neutraal */
  --inkt:#111820;
  --grijs-700:#4A5560;
  --grijs-500:#78838F;
  --grijs-200:#E4E8EC;
  --grijs-100:#F1F4F6;
  --wit:#FFFFFF;

  /* Rubriekskleuren — één kleur per rubriek, zoals de pills in het magazine */
  --rub-nieuws:var(--hf-rood);
  --rub-innovaties:var(--hf-blauw);
  --rub-testpanel:var(--jungle-green);
  --rub-blogs:var(--golden-bell);
  --rub-gadgets:var(--ball-blue);
  --rub-agenda:var(--pine-green);
  --rub-interview:var(--brick-orange);

  /* Typografie */
  --display:'Anton', 'Arial Narrow', sans-serif;
  --serif:'Source Serif 4', Georgia, serif;
  --body:'Montserrat', system-ui, sans-serif;

  /* Maatvoering */
  --max:1240px;
  /* Strak, geen rondingen — het magazine gebruikt ze nergens. */
  --radius:0px;
  --radius-lg:0px;
  --schaduw:0 2px 4px rgba(15,39,61,.06), 0 8px 24px rgba(15,39,61,.08);
  --schaduw-lift:0 6px 12px rgba(15,39,61,.10), 0 18px 40px rgba(15,39,61,.14);
  --header-h:76px;
  /* Primair (logo) */
  --hf-rood:#CA082E;
  --hf-blauw:#006592;

  /* Kleurenpalet handboek */
  --brick-orange:#E94F38;
  --blue-zodiac:#0F273D;
  --ball-blue:#30A4D4;
  --ripe-lemon:#F4D112;
  --jungle-green:#369E81;
  --golden-bell:#DC8C0D;
  --pine-green:#067075;

  /* Event-subhuisstijl */
  --event-green:#33BA9C;
  --event-blue:#304269;

  /* Tinten (20/40/60/80% conform handboek) */
  --rood-20:#F7E6EA; --rood-40:#EFB5C0;
  --blauw-20:#E6F0F4; --blauw-10:#F2F7F9;
  --mint-20:#EBF5F2;
  --lemon-20:#FDF8DC;

  /* Neutraal */
  --inkt:#111820;
  --grijs-700:#4A5560;
  --grijs-500:#78838F;
  --grijs-200:#E4E8EC;
  --grijs-100:#F1F4F6;
  --wit:#FFFFFF;

  /* Rubriekskleuren — één kleur per rubriek, zoals de pills in het magazine */
  --rub-nieuws:var(--hf-rood);
  --rub-innovaties:var(--hf-blauw);
  --rub-testpanel:var(--jungle-green);
  --rub-blogs:var(--golden-bell);
  --rub-gadgets:var(--ball-blue);
  --rub-agenda:var(--pine-green);
  --rub-interview:var(--brick-orange);

  /* Typografie */
  --display:'Anton', 'Arial Narrow', sans-serif;
  --serif:'Source Serif 4', Georgia, serif;
  --body:'Montserrat', system-ui, sans-serif;

  /* Maatvoering */
  --max:1240px;
  /* Strak, geen rondingen — het magazine gebruikt ze nergens. */
  --radius:0px;
  --radius-lg:0px;
  --schaduw:0 2px 4px rgba(15,39,61,.06), 0 8px 24px rgba(15,39,61,.08);
  --schaduw-lift:0 6px 12px rgba(15,39,61,.10), 0 18px 40px rgba(15,39,61,.14);
  --header-h:76px;
  /* Primair (logo) */
  --hf-rood:#CA082E;
  --hf-blauw:#006592;

  /* Kleurenpalet handboek */
  --brick-orange:#E94F38;
  --blue-zodiac:#0F273D;
  --ball-blue:#30A4D4;
  --ripe-lemon:#F4D112;
  --jungle-green:#369E81;
  --golden-bell:#DC8C0D;
  --pine-green:#067075;

  /* Event-subhuisstijl */
  --event-green:#33BA9C;
  --event-blue:#304269;

  /* Tinten (20/40/60/80% conform handboek) */
  --rood-20:#F7E6EA; --rood-40:#EFB5C0;
  --blauw-20:#E6F0F4; --blauw-10:#F2F7F9;
  --mint-20:#EBF5F2;
  --lemon-20:#FDF8DC;

  /* Neutraal */
  --inkt:#111820;
  --grijs-700:#4A5560;
  --grijs-500:#78838F;
  --grijs-200:#E4E8EC;
  --grijs-100:#F1F4F6;
  --wit:#FFFFFF;

  /* Rubriekskleuren — één kleur per rubriek, zoals de pills in het magazine */
  --rub-nieuws:var(--hf-rood);
  --rub-innovaties:var(--hf-blauw);
  --rub-testpanel:var(--jungle-green);
  --rub-blogs:var(--golden-bell);
  --rub-gadgets:var(--ball-blue);
  --rub-agenda:var(--pine-green);
  --rub-interview:var(--brick-orange);

  /* Typografie */
  --display:'Anton', 'Arial Narrow', sans-serif;
  --serif:'Source Serif 4', Georgia, serif;
  --body:'Montserrat', system-ui, sans-serif;

  /* Maatvoering */
  --max:1240px;
  /* Strak, geen rondingen — het magazine gebruikt ze nergens. */
  --radius:0px;
  --radius-lg:0px;
  --schaduw:0 2px 4px rgba(15,39,61,.06), 0 8px 24px rgba(15,39,61,.08);
  --schaduw-lift:0 6px 12px rgba(15,39,61,.10), 0 18px 40px rgba(15,39,61,.14);
  --header-h:76px;}

/* ============================================================ BASIS ============================================================ */
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0;
  overflow-x:clip;
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  color:var(--inkt);
  background:var(--wit);
  -webkit-font-smoothing:antialiased;}
img,svg {max-width:100%;display:block}
a {color:inherit;text-decoration:none}
button {font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4 {margin:0;line-height:1.04;letter-spacing:.005em}
.display {font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95}

/* Anton kent maar één gewicht (400). Zonder deze regel erven h1-h4 de browser-default 'bold' en synthetiseert de browser een faux-bold = dichtgeslibde, slecht leesbare kop. */
.display,.adslot .ad-naam,.hero-tekst h1,.stat .n,.sec-kop h2,.rub h3,.zij-blok h3, .datum .d,.mag-cover .kop,.ev h3,.nb h2,.footer h4 {font-weight:400;font-synthesis:none}
.serif {font-family:var(--serif);font-weight:900;line-height:1.08;letter-spacing:-.01em}
.wrap {max-width:var(--max);margin-inline:auto;padding-inline:24px}
.sectie {padding:72px 0}
.sectie-sm {padding:48px 0}
.skip {position:absolute;left:-9999px;top:0;background:var(--hf-rood);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 var(--radius) 0}
.skip:focus {left:0}
:focus-visible {outline:3px solid var(--ball-blue);outline-offset:3px}

/* ============================================================ CONCEPT-MARKERING ============================================================ */
.conceptbalk {background:var(--blue-zodiac);color:#fff;
  font-size:12.5px;letter-spacing:.03em;
  padding:9px 24px;text-align:center;font-weight:600;}
.conceptbalk b {color:var(--ripe-lemon);font-weight:800}
.conceptbalk span {opacity:.72;font-weight:500}
.illustratief {position:absolute;top:12px;right:12px;z-index:3;
  background:rgba(17,24,32,.72);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 10px;backdrop-filter:blur(4px);}

/* Advertentieposities — in het concept zichtbaar gemaakt */
.adslot {position:relative;
  background:
    repeating-linear-gradient(135deg, var(--grijs-100) 0 12px, #EAEEF1 12px 24px);
  border:1.5px dashed var(--grijs-500);
  border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--grijs-700);
  padding:16px;}
.adslot .ad-naam {font-family:var(--display);font-size:clamp(16px,2.4vw,24px);color:var(--blue-zodiac);text-transform:uppercase;letter-spacing:.02em}
.adslot .ad-maat {font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs-500);margin-top:4px}
.adslot .ad-nr {position:absolute;top:10px;left:10px;
  width:22px;height:22px;
  background:var(--blue-zodiac);color:#fff;
  font-size:12px;font-weight:800;
  display:grid;place-items:center;}
.ad-billboard {aspect-ratio:970/250;min-height:120px}
.ad-rect {aspect-ratio:300/250}
.ad-half {aspect-ratio:300/600}

/* ============================================================ HEADER + MEGAMENU ============================================================ */
.header {position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--grijs-200);}
.header-in {max-width:var(--max);margin-inline:auto;padding:0 24px;
  height:var(--header-h);
  display:flex;align-items:center;gap:28px;}
.logo {flex:0 0 auto;display:block;width:172px}
.logo svg {width:100%;height:auto}
.logo .hf-blauw {fill:var(--hf-blauw)}
.logo .hf-rood {fill:var(--hf-rood)}
.nav {margin-left:auto;display:flex;align-items:center;gap:2px}
.nav > li {list-style:none;position:relative}
.nav ul {margin:0;padding:0}
.nav-lnk {display:flex;align-items:center;gap:6px;
  padding:10px 13px;border-radius:var(--radius);
  font-weight:700;font-size:15px;color:var(--inkt);
  transition:background .18s, color .18s;}
.nav-lnk:hover,.nav > li:focus-within > .nav-lnk {background:var(--grijs-100);color:var(--hf-rood)}
.nav-lnk svg {width:11px;height:11px;opacity:.5;transition:transform .2s}
.nav > li:hover .nav-lnk svg,.nav > li:focus-within .nav-lnk svg {transform:rotate(180deg)}
.mega {position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;
  min-width:300px;
  background:#fff;border:1px solid var(--grijs-200);border-radius:var(--radius-lg);
  box-shadow:var(--schaduw-lift);
  padding:12px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s, transform .2s, visibility .2s;}
.nav > li:hover > .mega,.nav > li:focus-within > .mega {opacity:1;visibility:visible;transform:translateY(0)}
.mega::before {content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.mega a {display:flex;gap:12px;align-items:flex-start;
  padding:11px 13px;border-radius:var(--radius);
  transition:background .16s;}
.mega a:hover {background:var(--grijs-100)}
.mega .dot {width:9px;height:9px;flex:0 0 auto;margin-top:7px}
.mega .t {font-weight:700;font-size:14.5px;display:block;line-height:1.3}
.mega .d {font-size:12.5px;color:var(--grijs-500);font-weight:500;line-height:1.4}
.mega li {list-style:none}
.hdr-acties {display:flex;align-items:center;gap:10px;flex:0 0 auto}
.icon-btn {width:40px;height:40px;border-radius:var(--radius);
  display:grid;place-items:center;color:var(--grijs-700);
  transition:background .18s,color .18s;}
.icon-btn:hover {background:var(--grijs-100);color:var(--hf-rood)}
.icon-btn svg {width:19px;height:19px}
.knop {display:inline-flex;align-items:center;gap:9px;
  background:var(--hf-rood);color:#fff;
  font-weight:800;font-size:15px;
  padding:12px 22px;
  transition:transform .18s, box-shadow .18s, background .18s;
  white-space:nowrap;}
.knop:hover {transform:translateY(-2px);box-shadow:0 8px 20px rgba(202,8,46,.32);background:#b00727}
.knop svg {width:15px;height:15px}
.knop-blauw {background:var(--hf-blauw)}
.knop-blauw:hover {background:#005279;box-shadow:0 8px 20px rgba(0,101,146,.32)}
.knop-licht {background:#fff;color:var(--inkt);border:1.5px solid var(--grijs-200)}
.knop-licht:hover {background:var(--grijs-100);box-shadow:none;border-color:var(--grijs-500)}
.knop-sm {padding:9px 17px;font-size:14px}
.burger {display:none;width:44px;height:44px;border-radius:var(--radius);place-items:center}
.burger span {display:block;width:21px;height:2.5px;background:var(--inkt);transition:.25s}
.burger span+span {margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1) {transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2) {opacity:0}
.burger[aria-expanded="true"] span:nth-child(3) {transform:translateY(-7.5px) rotate(-45deg)}

/* Mobiel paneel */
.mob {position:fixed;inset:var(--header-h) 0 0 auto;width:min(360px,86vw);
  background:#fff;z-index:99;
  transform:translateX(101%);
  /* visibility mee-animeren: houdt het gesloten menu uit de tab-volgorde én
     voorkomt dat dit fixed element (dat aan body's overflow-x:clip ontsnapt)
     horizontale overflow veroorzaakt. */
  visibility:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1), visibility .3s;
  overflow-y:auto;padding:20px 22px 44px;
  box-shadow:-10px 0 40px rgba(15,39,61,.14);}
.mob.open {transform:translateX(0);visibility:visible}
.mob ul {list-style:none;margin:0;padding:0}
.mob > ul > li {border-bottom:1px solid var(--grijs-200)}
.mob > ul > li > a {display:block;padding:15px 2px;font-weight:800;font-size:16px}
.mob .sub a {display:block;padding:9px 2px 9px 16px;font-size:14.5px;color:var(--grijs-700);font-weight:600}
.mob .sub {padding-bottom:12px}

/* ============================================================ RUBRIEKS-PILL ============================================================ */
.pill {display:inline-block;
  font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;background:var(--grijs-700);
  padding:5px 11px;}
.pill-nieuws {background:var(--rub-nieuws)}
.pill-innovaties {background:var(--rub-innovaties)}
.pill-testpanel {background:var(--rub-testpanel)}
.pill-blogs {background:var(--rub-blogs)}
.pill-gadgets {background:var(--rub-gadgets)}
.pill-agenda {background:var(--rub-agenda)}
.pill-interview {background:var(--rub-interview)}
.pill-lemon {background:var(--ripe-lemon);color:var(--inkt)}
.pill-native {background:var(--blue-zodiac)}

/* ============================================================ BEELDPLACEHOLDERS (merkgradient + icoon) ============================================================ */
.beeld {position:relative;overflow:hidden;background:var(--grijs-100);
  display:grid;place-items:center;}
.beeld > .ico {width:34%;max-width:110px;opacity:.32;color:#fff}
.beeld img {width:100%;height:100%;object-fit:cover;display:block}
.beeld-nieuws {background:linear-gradient(135deg,#CA082E 0%,#8E0520 100%)}
.beeld-innovaties {background:linear-gradient(135deg,#006592 0%,#0F273D 100%)}
.beeld-testpanel {background:linear-gradient(135deg,#369E81 0%,#067075 100%)}
.beeld-blogs {background:linear-gradient(135deg,#DC8C0D 0%,#A5670A 100%)}
.beeld-gadgets {background:linear-gradient(135deg,#30A4D4 0%,#006592 100%)}
.beeld-interview {background:linear-gradient(135deg,#E94F38 0%,#CA082E 100%)}
.beeld-event {background:linear-gradient(135deg,#33BA9C 0%,#304269 100%)}
.beeld-donker {background:linear-gradient(150deg,#1B3348 0%,#0F273D 60%,#06121E 100%)}

/* ============================================================ HERO ============================================================ */
.hero {padding:36px 0 44px}
.hero-grid {display:grid;grid-template-columns:1.62fr 1fr;gap:22px}

/* Hero volgt de opmaaktaal uit het magazine: kop wit op de foto, en een compact kleurblok dat de ONDERRAND van de foto kruist — half op het beeld, half op het wit eronder. Eén semi-transparant blok volstaat: op de foto schemert het beeld door, op wit leest dezelfde kleur als vol. */
.hero-groot {position:relative;display:block;isolation:isolate}
.hero-beeldvlak {position:relative;overflow:hidden;
  min-height:480px;display:flex;align-items:flex-end;
  isolation:isolate;}
.hero-beeldvlak .beeld {position:absolute;inset:0;z-index:-2}

/* placeholder-icoon uit de kop houden: naar rechtsboven, subtiel */
.hero-beeldvlak .beeld > .ico {position:absolute;top:9%;right:7%;
  width:210px;max-width:38%;opacity:.16;}
.hero-beeldvlak::after {content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(15,39,61,.90) 0%, rgba(15,39,61,.48) 46%, rgba(15,39,61,.04) 82%);}
.hero-tekst {padding:34px 34px 78px;color:#fff;max-width:41ch}
.hero-blok {position:relative;z-index:2;
  margin:-56px 0 0 34px;
  width:min(62%,500px);
  background:rgba(202,8,46,.90);
  color:#fff;padding:22px 26px;}
.hero-blok p {margin:0 0 12px;font-size:16px;line-height:1.5}
.hero-blok .meta {color:rgba(255,255,255,.85)}
.hero-tekst h1 {font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(32px,4vw,52px);line-height:.94;
  margin:14px 0 12px;text-wrap:balance;}
.hero-tekst p {margin:0 0 18px;font-size:16.5px;line-height:1.55;opacity:.93;max-width:44ch}
.meta {display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;color:var(--grijs-500);}
.hero-tekst .meta {color:rgba(255,255,255,.8)}
.meta .sep {width:9px;height:2px;background:currentColor;opacity:.5}
.hero-zij {display:grid;grid-template-rows:repeat(3,1fr);gap:22px}
.zij-kaart {display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;
  border-radius:var(--radius-lg);overflow:hidden;
  background:#fff;border:1px solid var(--grijs-200);
  transition:transform .22s, box-shadow .22s, border-color .22s;}
.zij-kaart:hover {transform:translateY(-3px);box-shadow:var(--schaduw);border-color:transparent}

/* vierkant; géén stretch, anders rekt de aspect-ratio de breedte op en valt de foto over de tekstkolom */
.zij-kaart .beeld {width:100%;aspect-ratio:1;height:auto;align-self:center}
.zij-kaart .zij-tekst {padding:16px 18px 16px 0}
.zij-kaart h3 {font-family:var(--serif);font-weight:900;
  font-size:18px;line-height:1.18;margin:9px 0 7px;text-wrap:balance;}
.zij-kaart:hover h3 {color:var(--hf-rood)}

/* ============================================================ STATS ============================================================ */
.stats {background:var(--blue-zodiac);color:#fff;position:relative;overflow:hidden}
.stats-grid {display:grid;grid-template-columns:repeat(5,1fr);gap:20px;
  position:relative;text-align:center;}
.stat .n {font-family:var(--display);font-size:clamp(38px,5vw,60px);line-height:1;
  color:var(--ripe-lemon);}
.stat .l {font-size:13px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.82);margin-top:9px;line-height:1.4;}

/* ============================================================ SECTIEKOP ============================================================ */
.sec-kop {display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.sec-kop h2 {font-family:var(--display);text-transform:uppercase;
  font-size:clamp(28px,3.6vw,44px);line-height:.98;}
.sec-kop .sub {color:var(--grijs-500);font-size:15px;font-weight:500;margin-top:9px;max-width:56ch}
.streep {width:60px;height:6px;background:var(--hf-rood);margin-bottom:14px}
.streep-blauw {background:var(--hf-blauw)}
.streep-mint {background:var(--event-green)}
.streep-lemon {background:var(--ripe-lemon)}
.lees-alles {display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--hf-rood)}
.lees-alles svg {width:15px;height:15px;transition:transform .2s}
.lees-alles:hover svg {transform:translateX(4px)}

/* ============================================================ RUBRIEKENSTROOK ============================================================ */
.rubrieken {display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.rub {position:relative;overflow:hidden;
  border-radius:var(--radius-lg);padding:22px 20px 20px;
  color:#fff;min-height:132px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .22s, box-shadow .22s;}
.rub:hover {transform:translateY(-4px);box-shadow:var(--schaduw-lift)}
.rub .ico {width:30px;height:30px;opacity:.85}
.rub h3 {font-family:var(--display);text-transform:uppercase;font-size:22px;margin-top:16px}
.rub .aantal {font-size:12.5px;font-weight:600;opacity:.8;margin-top:3px}
.rub-nieuws {background:var(--rub-nieuws)}
.rub-innovaties {background:var(--rub-innovaties)}
.rub-testpanel {background:var(--rub-testpanel)}
.rub-blogs {background:var(--rub-blogs)}
.rub-gadgets {background:var(--rub-gadgets)}

/* ============================================================ NIEUWSSTROOM + SIDEBAR ============================================================ */
.stroom {display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start}
.kaarten {display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.kaart {display:flex;flex-direction:column;
  border-radius:var(--radius-lg);overflow:hidden;
  background:#fff;
  transition:transform .22s;}
.kaart:hover {transform:translateY(-4px)}
.kaart .beeld {aspect-ratio:16/10}
.kaart-tekst {padding:16px 2px 0}
.kaart h3 {font-family:var(--serif);font-weight:900;
  font-size:20px;line-height:1.16;margin:11px 0 8px;text-wrap:balance;}
.kaart:hover h3 {color:var(--hf-rood)}
.kaart p {margin:0 0 12px;font-size:14.5px;color:var(--grijs-700);line-height:1.55}
.kaart-pill {position:absolute;left:12px;top:12px;z-index:2}

/* In-feed native */
.kaart-native {grid-column:1/-1;
  display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:center;
  background:var(--lemon-20);
  border:1.5px dashed var(--golden-bell);
  border-radius:var(--radius-lg);padding:18px;}
.kaart-native .beeld {aspect-ratio:16/10;border-radius:var(--radius)}
.kaart-native h3 {font-family:var(--serif);font-weight:900;font-size:21px;line-height:1.16;margin:11px 0 8px}
.kaart-native .ad-note {font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--golden-bell);margin-top:10px;}
.zijbalk {display:grid;gap:26px;position:sticky;top:calc(var(--header-h) + 22px)}
.zij-blok {border:1px solid var(--grijs-200);border-radius:var(--radius-lg);padding:20px}
.zij-blok h3 {font-family:var(--display);text-transform:uppercase;font-size:19px;margin-bottom:14px}
.agenda-item {display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--grijs-200)}
.agenda-item:last-child {border-bottom:0;padding-bottom:0}

/* vast vierkant: mag niet meerekken als titel/subtitel over meer regels lopen */
.datum {flex:0 0 48px;width:48px;aspect-ratio:1;align-self:flex-start;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;background:var(--pine-green);color:#fff;line-height:1.1;}
.datum .d {font-family:var(--display);font-size:20px}

/* deelstreep zoals de "14.00 | UUR"-blokjes in het magazine */
.datum .m {font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-top:2px solid rgba(255,255,255,.55);
  margin:3px 7px 0;padding-top:3px;}
.agenda-item .t {font-size:14px;font-weight:700;line-height:1.35}
.agenda-item .p {font-size:12.5px;color:var(--grijs-500);font-weight:500}

/* ============================================================ MAGAZINE ============================================================ */
.magazine {background:var(--mint-20)}
.mag-grid {display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}

/* Overlappende beelden + groot licht paginanummer — de opmaaktaal van de inhoudsopgave in het magazine. */
.mag-stapel {position:relative;max-width:340px}
.mag-overlap {position:absolute;right:-44px;bottom:52px;
  width:158px;aspect-ratio:3/4;
  box-shadow:0 12px 34px rgba(15,39,61,.28);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px;}
.mag-overlap .nr {font-family:var(--display);font-weight:400;font-size:46px;line-height:.9;color:rgba(255,255,255,.94)}
.mag-overlap .lbl {font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.mag-cover {position:relative;
  aspect-ratio:210/297;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 18px 50px rgba(15,39,61,.25);
  transition:transform .4s;}
.mag-cover:hover {transform:translateY(-6px)}
.mag-cover-in {position:absolute;inset:0;display:flex;flex-direction:column;padding:22px}
.mag-cover .kop {font-family:var(--display);text-transform:uppercase;color:#fff;font-size:clamp(22px,3vw,34px);line-height:.92;margin-top:10px}
.mag-cover .jg {font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);text-align:center}
.mag-inhoud {display:grid;gap:12px;margin:24px 0 28px}
.mag-item {display:flex;gap:14px;align-items:baseline}
.mag-item .pill {flex:0 0 auto;min-width:112px;text-align:center}
.mag-item .t {font-family:var(--serif);font-weight:700;font-size:17.5px;line-height:1.25}

/* ============================================================ EVENTS ============================================================ */
.events {background:var(--event-blue);color:#fff}
.ev-grid {display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.ev {position:relative;overflow:hidden;border-radius:var(--radius-lg);
  min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;isolation:isolate;}
.ev .beeld {position:absolute;inset:0;z-index:-2}

/* icoon boven houden zodat de kop er niet overheen valt */
.ev .beeld > .ico {position:absolute;top:16%;left:50%;translate:-50% 0;width:64px;max-width:none;opacity:.28}
.ev::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(48,66,105,.96) 30%,rgba(48,66,105,.15))}
.ev h3 {font-family:var(--display);text-transform:uppercase;font-size:18px;line-height:1.02;margin-bottom:6px;text-wrap:balance}
.ev .wanneer {font-size:12.5px;font-weight:600;color:var(--event-green)}
.ev:hover .beeld {transform:scale(1.06)}
.ev .beeld {transition:transform .5s}

/* ============================================================ PARTNERS ============================================================ */
.partner-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.partner {border:1px solid var(--grijs-200);border-radius:var(--radius-lg);
  padding:20px;transition:box-shadow .22s,transform .22s;}
.partner:hover {box-shadow:var(--schaduw);transform:translateY(-3px)}
.partner-logo {height:56px;border-radius:var(--radius);background:var(--grijs-100);
  display:grid;place-items:center;margin-bottom:14px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grijs-500);}
.partner h3 {font-size:15.5px;font-weight:800;margin-bottom:5px}
.partner p {margin:0;font-size:13px;color:var(--grijs-700);line-height:1.5}

/* ============================================================ ACCORDEON ============================================================ */
.acc {border-top:1px solid var(--grijs-200)}
.acc-item {border-bottom:1px solid var(--grijs-200)}
.acc-btn {width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 2px;text-align:left;
  font-weight:800;font-size:17px;line-height:1.35;}
.acc-btn:hover {color:var(--hf-rood)}
.acc-btn .plus {flex:0 0 auto;width:26px;height:26px;position:relative}
.acc-btn .plus::before,.acc-btn .plus::after {content:"";position:absolute;inset:50% 2px auto 2px;height:2.5px;
  background:currentColor;transition:transform .28s;}
.acc-btn .plus::after {transform:rotate(90deg)}
.acc-btn[aria-expanded="true"] .plus::after {transform:rotate(0)}
.acc-paneel {max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.4,0,.2,1)}
.acc-paneel p {margin:0 0 20px;color:var(--grijs-700);font-size:15.5px;max-width:70ch}

/* ============================================================ NIEUWSBRIEF ============================================================ */
.nb {background:linear-gradient(120deg,var(--hf-rood) 0%,#9C0623 100%);
  color:#fff;border-radius:var(--radius-lg);
  padding:clamp(32px,5vw,60px);
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center;}
.nb h2 {font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3.8vw,46px);line-height:.98}
.nb p {margin:14px 0 0;font-size:16px;opacity:.94;max-width:48ch}
.nb-form {display:flex;gap:10px;position:relative;flex-wrap:wrap}
.nb-form input {flex:1 1 200px;min-width:0;padding:14px 18px;border:0;
  font:inherit;font-size:15px;}
.nb-form input:focus {outline:3px solid var(--ripe-lemon);outline-offset:2px}
.nb-klein {font-size:12.5px;opacity:.8;margin-top:12px}

/* ============================================================ FOOTER ============================================================ */
.footer {background:var(--blue-zodiac);color:rgba(255,255,255,.8);padding:64px 0 0;font-size:14.5px}
.f-grid {display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
.f-logo-chip {background:#fff;border-radius:var(--radius);padding:12px 16px;width:186px;margin-bottom:18px}
.f-logo-chip svg {width:100%;height:auto}
.footer h4 {font-family:var(--display);text-transform:uppercase;color:#fff;font-size:16px;margin-bottom:16px;letter-spacing:.03em}
.footer ul {list-style:none;margin:0;padding:0}
.footer li {margin-bottom:9px}
.footer a:hover {color:var(--ripe-lemon)}
.f-soc {display:flex;gap:10px;margin-top:18px}
.f-soc a {width:38px;height:38px;background:rgba(255,255,255,.1);
  display:grid;place-items:center;transition:background .2s;}
.f-soc a:hover {background:var(--hf-rood)}
.f-soc svg {width:17px;height:17px;color:#fff}
.f-onder {margin-top:52px;border-top:1px solid rgba(255,255,255,.14);
  padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13px;opacity:.72;}

/* ============================================================ REVEALS ============================================================ */
.reveal {opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.in {opacity:1;transform:none}
.reveal[data-d="1"] {transition-delay:.08s}
.reveal[data-d="2"] {transition-delay:.16s}
.reveal[data-d="3"] {transition-delay:.24s}
.reveal[data-d="4"] {transition-delay:.32s}

/* ============================================================ ARTIKELPAGINA ============================================================ */
.kruimels {font-size:13px;color:var(--grijs-500);padding:20px 0 0;font-weight:600}
.kruimels a:hover {color:var(--hf-rood)}
.kruimels span[aria-current] {color:var(--grijs-700)}
.art-kop {padding:26px 0 30px;max-width:62ch}
.art-kop h1 {font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(32px,4.6vw,58px);line-height:.96;margin:14px 0 18px;text-wrap:balance;}
.art-lead {font-family:var(--serif);font-weight:600;
  font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--grijs-700);margin:0;}
.art-meta {display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:24px;padding-top:20px;border-top:2px solid var(--grijs-200);
  font-size:13.5px;font-weight:600;color:var(--grijs-500);}
.art-meta .auteur-chip {display:flex;align-items:center;gap:10px;color:var(--inkt)}
.art-meta .auteur-chip img {width:34px;height:34px;object-fit:cover}
.deel {display:flex;gap:8px;margin-left:auto}
.deel a {width:34px;height:34px;display:grid;place-items:center;
  background:var(--grijs-100);color:var(--grijs-700);transition:background .18s,color .18s;}
.deel a:hover {background:var(--hf-rood);color:#fff}
.deel svg {width:16px;height:16px}

/* hoofdbeeld met kleurblok dat de onderrand kruist */
.art-beeld {position:relative;margin:0}
.art-beeld img {width:100%;display:block}
.art-quote {position:relative;z-index:2;
  margin:-78px 0 0 40px;width:min(64%,620px);
  background:rgba(202,8,46,.90);color:#fff;padding:26px 30px;}
.art-quote p {margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(19px,2.3vw,27px);line-height:1.06;}
.art-quote .bron {display:block;margin-top:12px;font-family:var(--body);font-weight:700;
  text-transform:none;font-size:12.5px;letter-spacing:.05em;color:rgba(255,255,255,.85);}
.bijschrift {font-size:12.5px;color:var(--grijs-500);margin-top:10px;font-weight:500;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* tweekolom */ /* padding-block, niet de shorthand: die zette ook de zijpadding van .wrap op 0, waardoor tekst, kaders en zijbalk op smalle schermen tegen de schermrand plakten. */
.art-grid {display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px;align-items:start;padding-block:52px 0}
.art-body {max-width:66ch;font-size:17.5px;line-height:1.72}
.art-body p {margin:0 0 22px}
.art-body h2 {font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(23px,2.6vw,30px);margin:38px 0 16px;}
.art-body a:not(.knop) {color:var(--hf-rood);font-weight:700;border-bottom:2px solid var(--rood-40)}
.art-body a:not(.knop):hover {border-bottom-color:var(--hf-rood)}
.art-body strong {font-weight:700}

/* pull-quote in de lopende tekst */
.pull {margin:32px 0;padding:4px 0 4px 26px;
  border-left:6px solid var(--hf-rood);}
.pull p {margin:0;font-family:var(--serif);font-weight:900;
  font-size:clamp(20px,2.4vw,26px);line-height:1.24;color:var(--inkt);}

/* beeld in de tekst met kleurblok over de rand */
.art-inline {position:relative;margin:34px 0 30px}
.art-inline img {width:100%;display:block}
.art-inline .vlak {position:relative;z-index:2;margin:-44px 30px 0 auto;width:min(70%,340px);
  background:rgba(0,101,146,.92);color:#fff;padding:16px 20px;
  font-size:14px;line-height:1.45;font-weight:600;}
.tags {display:flex;gap:8px;flex-wrap:wrap;margin:36px 0 0;padding-top:26px;border-top:2px solid var(--grijs-200)}
.tag {font-size:12.5px;font-weight:700;padding:7px 13px;
  background:var(--grijs-100);color:var(--grijs-700);}
.tag:hover {background:var(--hf-rood);color:#fff}

/* De tags staan binnen .art-body, waar `.art-body a:not(.knop)` (0-2-1) van `.tag:hover` (0-2-0) wint: de tekst bleef rood op een rode achtergrond en er liep een linkonderstreping onder. Drie klassen diep wint dat terug. */
.art-body .tags .tag {color:var(--grijs-700);border-bottom:0;font-weight:700}
.art-body .tags .tag:hover {background:var(--hf-rood);color:#fff}
.auteur-blok {display:flex;gap:18px;align-items:flex-start;
  margin-top:32px;padding:22px;background:var(--grijs-100);}
.auteur-blok img {width:66px;height:66px;object-fit:cover;flex:0 0 auto}
.auteur-blok h3 {font-size:16px;font-weight:800;margin-bottom:4px}
.auteur-blok p {margin:0;font-size:14px;color:var(--grijs-700);line-height:1.55}

/* sidebar-extra's */
.zij-blok .lijst {list-style:none;margin:0;padding:0;counter-reset:n}
.zij-blok .lijst li {counter-increment:n;display:flex;gap:13px;padding:11px 0;
  border-bottom:1px solid var(--grijs-200);}
.zij-blok .lijst li:last-child {border-bottom:0;padding-bottom:0}
.zij-blok .lijst li::before {content:counter(n);flex:0 0 26px;height:26px;display:grid;place-items:center;
  background:var(--hf-rood);color:#fff;font-family:var(--display);font-size:15px;}
.zij-blok .lijst a {font-size:14px;font-weight:700;line-height:1.35}
.zij-blok .lijst a:hover {color:var(--hf-rood)}
.nb-mini p {font-size:13.5px;color:var(--grijs-700);margin:0 0 14px;line-height:1.5}
.nb-mini input {width:100%;padding:11px 14px;border:1.5px solid var(--grijs-200);font:inherit;font-size:14px;margin-bottom:9px}
.nb-mini .knop {width:100%;justify-content:center}

/* partnerdossier (positie 6) */
.dossier {display:grid;grid-template-columns:200px 1fr auto;gap:28px;align-items:center;
  border:2px solid var(--grijs-200);padding:24px;}
.dossier .logo-vak {height:92px;background:var(--grijs-100);display:grid;place-items:center;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grijs-500);}
.dossier h3 {font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:22px;margin-bottom:6px}
.dossier p {margin:0;font-size:14.5px;color:var(--grijs-700);line-height:1.55;max-width:62ch}

/* 3-koloms variant van .kaarten — als class, NIET inline: een inline grid-template-columns wint van elke media query en blokkeert het inklappen. */
.kaarten-3 {grid-template-columns:repeat(3,1fr)}

/* in-text slot: geen min-height, die duwt samen met de aspect-ratio de breedte op */
.ad-intext {aspect-ratio:728/90;margin:30px 0 34px}

/* ============================================================ RUBRIEKSPAGINA ============================================================ */
.rub-kop {padding:30px 0 26px;border-bottom:2px solid var(--grijs-200);margin-bottom:32px}
.rub-kop .balk {display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.rub-kop h1 {font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(40px,6.5vw,86px);line-height:.9;color:var(--rub-nieuws);}
.rub-kop .telling {font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grijs-500);padding-bottom:10px;}
.rub-kop .omschrijving {margin:16px 0 0;color:var(--grijs-700);max-width:64ch;font-size:16.5px}

/* rubrieksfilter */
.filters {display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.filter {font-size:13.5px;font-weight:800;letter-spacing:.03em;
  padding:9px 16px;border:2px solid var(--grijs-200);color:var(--grijs-700);
  transition:background .18s,color .18s,border-color .18s;}
.filter:hover {border-color:var(--inkt);color:var(--inkt)}
.filter[aria-current] {background:var(--rub-nieuws);border-color:var(--rub-nieuws);color:#fff}

/* uitgelicht artikel */
.uitgelicht {display:grid;grid-template-columns:1fr 1fr;gap:0;
  align-items:stretch;margin-bottom:44px;}
.uitgelicht .beeldkant {position:relative}
.uitgelicht .beeldkant img {width:100%;height:100%;object-fit:cover;display:block}
.uitgelicht .tekstkant {background:var(--blue-zodiac);color:#fff;padding:clamp(26px,3.4vw,46px);
  display:flex;flex-direction:column;justify-content:center;}
.uitgelicht h2 {font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,3.2vw,42px);line-height:.98;margin:14px 0 14px;text-wrap:balance;}
.uitgelicht p {margin:0 0 18px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.88);max-width:46ch}
.uitgelicht .meta {color:rgba(255,255,255,.7)}

/* kleurblok dat de naad tussen beeld en tekst kruist */
.uitgelicht .vlag {position:absolute;left:0;bottom:30px;z-index:2;
  background:var(--hf-rood);color:#fff;padding:9px 16px;
  font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;}

/* grid + sidebar */
.rub-grid {display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.rub-kaarten {display:grid;grid-template-columns:repeat(2,1fr);gap:30px}

/* partnerblok in de sidebar (positie 6) */
.partnerblok {border:2px solid var(--golden-bell);padding:20px;text-align:center}
.partnerblok .label {font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--golden-bell);}
.partnerblok .logo-vak {height:78px;background:var(--grijs-100);display:grid;place-items:center;margin:12px 0;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grijs-500);}
.partnerblok p {margin:0 0 12px;font-size:13px;color:var(--grijs-700);line-height:1.5}

/* paginering */
.pagineer {display:flex;gap:8px;align-items:center;justify-content:center;margin-top:44px;flex-wrap:wrap}
.pagineer a,.pagineer span {min-width:42px;height:42px;padding:0 12px;display:grid;place-items:center;
  font-weight:800;font-size:15px;border:2px solid var(--grijs-200);color:var(--grijs-700);}
.pagineer a:hover {border-color:var(--inkt);color:var(--inkt)}
.pagineer .nu {background:var(--inkt);border-color:var(--inkt);color:#fff}
.pagineer .punt {border:0;color:var(--grijs-500);min-width:20px;padding:0}

/* ============================================================ TESTPANEL — rubriekseigen artikelopmaak ============================================================ */
.hf-testpanel {--accent:var(--rub-testpanel)}

/* --- kopblok met mintvlak ------------------------------------------------ */
.tp-hoofd {position:relative;padding:62px 0 40px;margin-top:6px}

/* Het vlak begint pas na de eerste kolom en loopt door tot buiten het scherm, zodat de titel er links overheen valt. Zelfde middel als de kleurvlakken op de homepage: het blok kruist een rand, het vult geen kolom. */
.tp-vlak {position:absolute;top:28px;bottom:96px;
  left:max(calc((100vw - var(--max))/2 + 152px), 152px);right:0;
  background:color-mix(in srgb, var(--accent) 16%, #fff);}
.tp-hoofd-in {position:relative;
  display:grid;grid-template-columns:236px minmax(210px,290px) minmax(0,1fr);
  grid-template-areas:"kop kop kop" "merk product tekst";
  column-gap:36px;row-gap:26px;align-items:start;}
.tp-kop {grid-area:kop;max-width:none;padding:0}
.tp-kop h1 {margin:14px 0 0;max-width:15ch}
.tp-pill-product {letter-spacing:.14em}
.tp-merk {grid-area:merk;background:var(--tp-diep);color:#fff;padding:20px 22px 22px}
.tp-merk div + div {margin-top:14px}
.tp-merk span {display:block;font-size:13.5px;font-weight:500;opacity:.9}
.tp-merk strong {display:block;font-family:var(--display);font-weight:400;font-synthesis:none;
  text-transform:uppercase;font-size:21px;line-height:1.1;letter-spacing:.01em;}

/* Onderaan uitlijnen met het merkblok: dan steekt het product er bovenuit en blijft het binnen het mintvlak, net als op de magazinepagina. */
.tp-product {grid-area:product;margin:0;align-self:end;justify-self:center}
.tp-product img {width:100%;height:auto}

/* De badge ligt rechtsboven over deze kolom heen; zonder ruimte ervoor loopt de introductie eronder door en dekt de mascotte de laatste regels af. */
.tp-tekst {grid-area:tekst;padding-right:180px}
.tp-sub {font-family:var(--display);font-weight:400;font-synthesis:none;text-transform:uppercase;
  font-size:clamp(19px,2.1vw,25px);line-height:1.08;color:var(--accent);margin:0 0 12px;}
.tp-intro {margin:0;font-size:16px;line-height:1.62;color:var(--grijs-700);max-width:52ch}

/* --- beoordelingsbadge --------------------------------------------------- */ /* Steekt boven het mintvlak uit; de mascotte valt er onderuit. Beide zijn merkmiddelen die in het magazine op elke testpanel-pagina terugkomen — daar steekt de badge rechts buiten het mintvlak. Hier loopt het vlak door tot de schermrand, dus kruist de badge de bovenrand in plaats van de zijkant. */
.tp-badge {position:absolute;top:-62px;right:0;z-index:3;
  width:172px;pointer-events:none;}
.tp-badge-vak {background:var(--tp-diep);color:#fff;
  padding:16px 16px 18px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:2px;}
.tp-badge-merk {font-family:var(--display);font-weight:400;font-synthesis:none;
  font-size:22px;letter-spacing:.005em;font-style:italic;}
.tp-badge-merk i {font-style:italic;font-size:15px;opacity:.9}
.tp-badge-titel {font-family:var(--display);font-weight:400;font-synthesis:none;
  text-transform:uppercase;font-size:25px;line-height:1;}
.tp-badge-streep {width:74px;height:4px;background:#fff;margin:11px 0 9px}
.tp-badge-label {font-family:var(--display);font-weight:400;font-synthesis:none;
  text-transform:uppercase;font-size:15px;line-height:1;margin-bottom:7px;}

/* Het magazine knipt de laatste ster op de fractie af. Dat is exact, maar een kwart ster is op zichzelf niet af te lezen — vandaar het cijfer erbij. */
.tp-badge-score {font-size:12px;font-weight:700;letter-spacing:.04em;margin-top:7px;opacity:.92}
.tp-mascotte {display:block;width:104px;height:auto;
  margin:-16px 0 0 auto;transform:translateX(-14px);}

/* --- sterren ------------------------------------------------------------- */ /* Alleen gevulde sterren, net als in het magazine: de laatste wordt op de fractie afgeknipt in plaats van dat er grijze rest-sterren bij komen. */
.tp-sterren {display:block;fill:var(--ster);flex:0 0 auto}
.tp-sterren-wit {fill:#fff}

/* --- specificaties ------------------------------------------------------- */ /* Het magazine zet dit blok volledig in de rubriekskleur en hangt de kop in de bovenrand van het kader, met wit eromheen zodat de lijn onderbroken wordt. */
.tp-specs {position:relative;border:2px solid var(--accent);padding:30px 26px 24px;margin:56px 0 0}

/* Twee klassen diep, niet uit gewoonte: `.art-body h2` is even specifiek als één klasse maar staat later in de concept-stylesheet, en zou anders zowel de 38px bovenmarge als de 30px korpsgrootte terugzetten. Datzelfde geldt voor de sectiekop hieronder, die daardoor 30px werd in plaats van 44px. */
.tp-specs .tp-specs-kop {position:absolute;top:0;left:18px;translate:0 -50%;margin:0;
  background:var(--wit);padding:0 12px;
  font-family:var(--display);font-weight:400;font-synthesis:none;text-transform:uppercase;
  font-size:26px;line-height:1;color:var(--accent);}
.tp-body .sec-kop h2 {font-size:clamp(28px,3.6vw,44px);margin:0}
.tp-spec-lijst {margin:0;display:grid;grid-template-columns:repeat(2,1fr);column-gap:34px}
.tp-spec {display:flex;gap:14px;justify-content:space-between;
  padding:8px 0;border-bottom:1px solid color-mix(in srgb, var(--accent) 28%, #fff)}
.tp-spec dt {font-size:14.5px;color:var(--accent);font-weight:500}
.tp-spec dd {margin:0;font-size:14.5px;font-weight:700;text-align:right;color:var(--accent)}

/* --- panelkop met score -------------------------------------------------- */
.tp-panel-kop {margin-top:48px;align-items:flex-end}
.tp-score {display:flex;align-items:center;gap:11px;margin:0;
  font-size:14.5px;font-weight:600;color:var(--grijs-700);white-space:nowrap}
.tp-score strong {font-size:19px;color:var(--inkt);font-weight:800}

/* --- panelleden ---------------------------------------------------------- */
.tp-panel {display:grid;grid-template-columns:repeat(2,1fr);gap:34px 40px;margin-top:26px}
.tp-lid {border-top:3px solid var(--accent);padding-top:18px}
.tp-lid-kop h3 {font-size:17.5px;font-weight:800;color:var(--tp-diep);margin:0}
.tp-bedrijf {margin:2px 0 12px;font-size:14.5px;color:var(--tp-diep);opacity:.78;font-weight:500}
.tp-pm {list-style:none;margin:14px 0 0;padding:0}
.tp-pm li {display:flex;gap:10px;font-size:15px;line-height:1.5;margin-bottom:7px}
.tp-teken {flex:0 0 auto;width:15px;text-align:center;
  font-weight:700;font-size:18px;line-height:1.35;}
.tp-plus .tp-teken {color:var(--accent)}
.tp-min .tp-teken {color:var(--tp-diep)}
.tp-qa {margin-top:18px}
.tp-v {margin:0 0 5px;font-size:14.5px;font-weight:600;line-height:1.5;color:var(--tp-diep)}
.tp-a {margin:0;font-size:15px;line-height:1.6;color:var(--grijs-700)}

/* --- kleine dingen ------------------------------------------------------- */
.streep-testpanel {background:var(--accent)}
.tp-meta-score {color:var(--accent);font-weight:700}
.tp-zij-aanmeld p {font-size:13.5px;color:var(--grijs-700);margin:0 0 14px;line-height:1.5}
.tp-zij-aanmeld .knop {width:100%;justify-content:center}
.tp-body {max-width:none}
.tp-meta {margin-top:0}

/* ============================================================ CV VAN — profiel met vaste velden ============================================================ */
.hf-cv-van {--accent:var(--golden-bell)}
.pill-cv {background:var(--accent)}
.streep-cv {background:var(--accent)}

/* --- kop met portret ----------------------------------------------------- */
.cv-hoofd {padding:34px 0 8px}
.cv-hoofd-in {display:grid;grid-template-columns:minmax(0,1fr) 360px;
  gap:48px;align-items:center;}
.cv-kop {position:relative;padding-bottom:6px}

/* Het magazine zet een groot, open "CV" achter de naam. Puur decoratief, dus aria-hidden; op smal scherm valt hij weg omdat er geen ruimte voor is. */
.cv-merk {position:absolute;left:-8px;top:26px;margin:0;z-index:-1;
  font-family:var(--display);font-weight:400;font-synthesis:none;
  font-size:150px;line-height:.8;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:2px var(--accent);
  opacity:.42;pointer-events:none;}
.cv-kop h1 {font-family:var(--display);font-weight:400;font-synthesis:none;
  text-transform:uppercase;font-size:clamp(34px,5vw,60px);line-height:.96;
  margin:16px 0 0;color:var(--accent);text-wrap:balance;}
.cv-leeftijd {opacity:.72}
.cv-functie {margin:12px 0 0;font-size:17px;font-weight:600;color:var(--grijs-700);
  max-width:38ch;}

/* De uitspraak die in het magazine over de openingsfoto staat: daar is het de kop van het artikel, hier de introductie onder de naam. */
.cv-lead {margin:18px 0 0;max-width:26ch;
  font-family:var(--serif);font-weight:900;
  font-size:clamp(19px,2.2vw,25px);line-height:1.22;color:var(--inkt);}
.cv-portret {position:relative;margin:0}

/* Een staande werkfoto van 1245 × 1759 wordt op volle kolombreedte bijna 500px hoog en trekt de hele kop uit elkaar; bijsnijden houdt de verhouding rustig. */
.cv-portret img {width:100%;height:auto;max-height:440px;object-fit:cover;object-position:50% 22%;
  display:block;position:relative;z-index:2;}

/* Het kader kruist de onderrand van de foto in plaats van eromheen te lopen: hetzelfde middel als de kleurvlakken elders in het ontwerp. */
.cv-portret-vlak {position:absolute;left:26px;right:-26px;top:34px;bottom:-26px;
  border:3px solid var(--accent);z-index:1;}
.cv-meta {margin-top:34px}

/* --- CV-kaart naast het interview ---------------------------------------- */
.cv-body {max-width:none}
.cv-lijf {display:grid;grid-template-columns:290px minmax(0,1fr);gap:44px;align-items:start}
.cv-kaart {position:sticky;top:calc(var(--header-h) + 20px);
  background:var(--cv-zacht);padding:24px 24px 26px;
  border-top:4px solid var(--accent);}
.cv-kaart .cv-kaart-kop {font-family:var(--display);font-weight:400;font-synthesis:none;
  text-transform:uppercase;font-size:22px;line-height:1;
  color:var(--accent);margin:0 0 16px;}
.cv-lijst {margin:0}
.cv-rij {padding:9px 0;border-bottom:1px solid color-mix(in srgb, var(--accent) 24%, #fff)}
.cv-rij:last-child {border-bottom:0;padding-bottom:0}
.cv-rij dt {font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:3px;}
.cv-rij dd {margin:0;font-size:14.5px;line-height:1.5;color:var(--inkt)}

/* --- interview ----------------------------------------------------------- */
.cv-interview {min-width:0}
.cv-qa {margin-bottom:26px}

/* Twee klassen diep: .art-body h2 is even specifiek maar staat later in de concept-stylesheet en zou anders de vraagopmaak overschrijven. */
.cv-interview .cv-qa h2 {font-family:var(--serif);font-weight:900;text-transform:none;
  font-size:19px;line-height:1.3;margin:0 0 8px;color:var(--inkt);}
.cv-qa p {margin:0;font-size:16.5px;line-height:1.68;color:var(--grijs-700)}
.cv-quote {margin:34px 0;padding:0;border:0;text-align:center;}
.cv-quote p {margin:0 auto;max-width:22ch;
  font-family:var(--serif);font-weight:900;
  font-size:clamp(24px,3vw,34px);line-height:1.16;color:var(--accent);}

/* --- Henk/Fred-kader (gedeeld component) --------------------------------- */ /* In het magazine reageren de mascottes onder aan een artikel op wat er staat. Twee varianten: omlijnd met tekst in de accentkleur, of gevuld met witte tekst. De figuur valt over de rand van het kader — hetzelfde idioom als de kleurvlakken. */ /* De mascotte is 152x240: op `width:150px` wordt hij 237 px hoog en steekt hij boven een kader van 150 px uit — dwars door de tekst erboven. Sturen op hóógte houdt dat vast: het kader is precies zo hoog dat de mascottetop op de kaderrand landt, en groeit het kader door meer tekst, dan zakt hij mee. */
.hf-kader {position:relative;clear:both;margin:44px 0 0;padding:24px 28px 24px 146px;min-height:186px}
.hf-kader-lijn {border:3px solid var(--accent);color:var(--accent)}
.hf-kader-vol {background:var(--blue-zodiac);color:#fff}
.hf-mascotte {position:absolute;left:-6px;bottom:-18px;height:204px;width:auto;pointer-events:none}
.hf-inhoud h3 {font-family:var(--display);font-weight:400;font-synthesis:none;
  text-transform:uppercase;font-size:clamp(19px,2.2vw,25px);line-height:1.06;
  margin:0 0 10px;color:inherit;}
.hf-inhoud p {margin:0;font-size:15.5px;line-height:1.6;color:inherit;font-weight:500}
.cv-zij-oproep p {font-size:13.5px;color:var(--grijs-700);margin:0 0 14px;line-height:1.5}
.cv-zij-oproep .knop {width:100%;justify-content:center}

/* ============================================================ DE DAG VAN — tijdlijn van een werkdag ============================================================ */
.hf-dag-van {--accent:var(--ripe-lemon)}
.pill-dag {background:var(--blue-zodiac)}
.streep-dag {background:var(--accent)}

/* --- kop naast de openingsfoto ------------------------------------------- */
.dag-hoofd {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:0 40px;align-items:center;margin:22px 0 0;}
.dag-kop {position:relative;z-index:2}

/* Het gele kader met de aanhalingstekens komt recht uit het magazine: de tekens liggen op de kaderrand, niet erbinnen. */
.dag-titelkader {position:relative;margin:20px 0 0;padding:26px 26px 28px;
  border:4px solid var(--accent);}

/* De witte achtergrond is er alleen om de kaderlijn te onderbreken, niet om ruimte in te nemen: met line-height 0 is de box zelf plat en bepaalt de padding precies hoe breed die onderbreking is. Met een normale regelhoogte groeit het witte vlak mee met de 64px letter en valt het over het label erboven en de kop eronder. */
.dag-titelkader::before,.dag-titelkader::after {position:absolute;display:block;
  font-family:var(--serif);font-weight:900;
  font-size:64px;line-height:0;color:var(--accent);
  background:var(--wit);padding:11px 10px;}
.dag-titelkader::before {content:"\201C";left:16px;top:0;translate:0 -50%}
.dag-titelkader::after {content:"\201D";right:16px;bottom:0;translate:0 50%}
.dag-titelkader h1 {margin:0;font-family:var(--display);font-weight:400;font-synthesis:none;
  text-transform:uppercase;font-size:clamp(28px,4vw,50px);line-height:.98;
  color:var(--inkt);text-wrap:balance;}
.dag-wie {margin:22px 0 0;font-size:17px;font-weight:700;color:var(--grijs-700);}
.dag-opening {margin:0;position:relative}
.dag-opening img {width:100%;height:auto;display:block}
.dag-metaregel {margin-top:30px}
.dag-body {max-width:none}

/* --- de tijdlijn --------------------------------------------------------- */
.dag-lijn {list-style:none;margin:44px 0 0;padding:0;counter-reset:moment}
.dag-moment {position:relative;display:grid;gap:0;margin-bottom:26px;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch;}
.dag-moment:last-child {margin-bottom:0}

/* Om en om spiegelen: dat geeft de reeks ritme en laat zien dat het losse momenten zijn, geen doorlopend verhaal. */
.dag-rechts .dag-beeld {order:2}
.dag-beeld {margin:0;position:relative;min-height:210px;overflow:hidden}
.dag-beeld img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.dag-tekst {padding:28px 30px;display:flex;flex-direction:column;justify-content:center}

/* Het tijdblokje steekt de tekstkolom in. Zonder extra ruimte aan die kant dekt het de eerste woorden van het citaat af — op desktop precies de regel die de lezer als eerste ziet. */
.dag-links .dag-tekst {padding-left:62px}
.dag-rechts .dag-tekst {padding-right:62px}
.dag-geel .dag-tekst {background:var(--accent)}
.dag-wit .dag-tekst {background:var(--grijs-100)}
.dag-diep .dag-tekst {background:var(--blue-zodiac);color:#fff}

/* Het tijdblokje: wit omkaderd, half over de beeldrand — precies zoals in het magazine, en hetzelfde middel als de kleurvlakken elders in het ontwerp. */
.dag-tijd {position:absolute;top:24px;margin:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;
  padding:8px 14px 9px;border:2.5px solid #fff;background:rgba(15,39,61,.34);
  backdrop-filter:blur(2px);color:#fff;}
.dag-links .dag-tijd {left:calc(52.5% - 46px)}
.dag-rechts .dag-tijd {right:calc(52.5% - 46px)}
.dag-tijd span {font-family:var(--display);font-weight:400;font-synthesis:none;
  font-size:23px;line-height:1;letter-spacing:.01em;}
.dag-tijd em {font-family:var(--display);font-style:normal;font-weight:400;font-synthesis:none;
  font-size:13px;line-height:1;letter-spacing:.12em;margin-top:3px;}
.dag-citaat {margin:0;font-size:16px;line-height:1.62;color:inherit}
.dag-geel .dag-citaat,.dag-wit .dag-citaat {color:var(--inkt)}
.dag-zij-oproep p {font-size:13.5px;color:var(--grijs-700);margin:0 0 14px;line-height:1.5}
.dag-zij-oproep .knop {width:100%;justify-content:center}

/* ============================================================ COMPONENTEN OP HET STANDAARD ARTIKELSJABLOON Spotlight (bedrijfsprofiel) en 8 brutale vragen (genummerde vragen). ============================================================ */
.hf-spotlight {--accent:var(--brick-orange)}
.pill-spotlight,.pill-brutaal {background:var(--accent)}
.streep-spotlight {background:var(--accent)}

/* --- component 1: kleurvlak op een beeldrand ----------------------------- Het handboek-idioom: een compact blok dat de rand van de foto kruist, half op het beeld en half ernaast op wit. Nadrukkelijk niet een kleurvlak dat de hele tekstkolom binnen het beeld vult. */
.hf-vlak {position:relative;z-index:2;
  background:var(--blue-zodiac);color:#fff;
  padding:22px 26px 24px;}
.hf-vlak p {margin:0;font-size:15px;line-height:1.62;font-weight:500}
.hf-vlak-naam {font-family:var(--body);font-weight:900;text-transform:none;
  font-size:19px;line-height:1;letter-spacing:.01em;
  color:var(--accent);margin:0 0 10px;}

/* Spotlight: het vlak kruist de rechterrand van de foto. Het beeld loopt tot 62% en het vlak begint op 54%, dus de overlap is echt en niet gesuggereerd. Beide krijgen expliciet rij 1 — zonder dat wordt de figure als auto-item ná het vlak geplaatst en staan ze onder elkaar in plaats van over elkaar. */
.sp-hoofd {position:relative;display:grid;grid-template-columns:62% 1fr;
  align-items:start;margin:22px 0 0}
.sp-beeld {grid-area:1/1/2/2}
.sp-beeld img {aspect-ratio:4/3;object-fit:cover}
.sp-hoofd .hf-vlak-rechts {grid-area:1/1/2/-1;
  justify-self:end;align-self:start;width:46%;margin-top:-18px}

/* 8 brutale vragen: het vlak kruist de ónderrand van de foto. */
.bv-hoofd {position:relative;margin:22px 0 0}
.bv-hoofd .art-beeld img {aspect-ratio:16/9;object-fit:cover;object-position:50% 32%}
.hf-vlak-onder {width:min(78%,760px);margin:-64px 0 0 40px}

/* De naam ligt in wit displayschrift op de foto, zoals in het magazine. */
.bv-naam {position:absolute;left:40px;bottom:96px;z-index:2;margin:0;
  font-family:var(--display);font-weight:400;font-synthesis:none;
  text-transform:uppercase;color:#fff;
  font-size:clamp(26px,3.6vw,44px);line-height:.94;
  text-shadow:0 2px 18px rgba(15,39,61,.45);}
.bv-naam em {display:block;font-style:normal;font-size:.62em;opacity:.92}

/* --- component 2: quotekader met tekens op de kaderlijn ------------------- Hetzelfde idioom als .dag-titelkader in bouw_dag_van.py; die twee worden bij het samenstellen van de themastylesheet één component. De witte achtergrond achter de tekens onderbreekt alleen de kaderlijn — vandaar line-height:0, anders dekt het regelblok ook het label en de tekst af. */
.hf-quotekader {position:relative;border:5px solid var(--accent);
  padding:26px 30px 28px;margin:14px 0 0;}
.hf-quotekader::before,.hf-quotekader::after {position:absolute;display:block;
  font-family:var(--serif);font-weight:900;
  font-size:64px;line-height:0;color:var(--accent);
  background:var(--wit);padding:11px 10px;}
.hf-quotekader::before {content:"\201C";left:16px;top:0;translate:0 -50%}
.hf-quotekader::after {content:"\201D";right:16px;bottom:0;translate:0 50%}
.hf-quotekader h1 {margin:0}

/* Quote en portret als eigen rij, half om half. Twee klassen diep, want .art-body h2/p (0-1-1) wint anders van één klasse. */
.art-body .sp-duo {display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch;
  margin:0 0 30px;}
.art-body .sp-duo .hf-quotekader {display:flex;align-items:center;margin:0;padding:22px 24px 24px;}
.art-body .sp-duo .hf-quotekader p {margin:0;font-family:var(--body);font-weight:800;
  font-size:clamp(19px,2.1vw,24px);line-height:1.14;color:var(--accent);}

/* --- component 3: genummerde vragen -------------------------------------- Het cijfer is op papier een initiaal waar de broodtekst omheen loopt. Op een scherm is een uitspringend cijfer in de marge leesbaarder: de vraag blijft dan één blok en het antwoord houdt een rechte linkerkantlijn. */
.art-body .hf-vragen {list-style:none;margin:0;padding:0;counter-reset:bv}
.art-body .bv-vraag {position:relative;padding:0 0 0 76px;margin:0 0 38px;min-height:64px;}
.art-body .bv-vraag:last-child {margin-bottom:0}
.bv-nr {position:absolute;left:0;top:-14px;
  font-family:var(--display);font-weight:400;font-synthesis:none;
  font-size:66px;line-height:1;color:var(--accent);}
.art-body .bv-kop {font-family:var(--body);font-weight:900;text-transform:uppercase;
  font-size:15px;line-height:1.3;letter-spacing:.01em;
  color:var(--inkt);margin:0 0 10px;}
.art-body .bv-antwoord {margin:0}

/* --- de pagina's zelf ---------------------------------------------------- */
.sp-portret {display:flex;flex-direction:column;margin:0}
.sp-portret img {width:100%;display:block;flex:1;min-height:0;object-fit:cover}
.sp-portret figcaption {margin-top:9px;text-align:right;
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--grijs-700);border-right:3px solid var(--accent);padding-right:10px;}
.sp-tekst {clear:none}
.art-body .sp-app {float:left;width:min(40%,230px);margin:4px 28px 14px 0}
.sp-app img {width:100%;display:block}
.sp-app figcaption {margin-top:10px;font-size:12.5px;line-height:1.45;
  color:var(--grijs-700);border-left:3px solid var(--accent);padding-left:10px}
.sp-zij-partner p,.bv-zij-oproep p {font-size:13.5px;color:var(--grijs-700);margin:0 0 14px;line-height:1.5;}
.sp-zij-partner .knop,.bv-zij-oproep .knop {width:100%;justify-content:center}

/* ============================================================ COMPONENTEN OP HET STANDAARD ARTIKELSJABLOON Spotlight (bedrijfsprofiel) en 8 brutale vragen (genummerde vragen). ============================================================ */
.hf-brutale-vragen {--accent:var(--brick-orange)}

@media (max-width:1180px) {
  .logo {width:150px}
  .header-in {gap:18px}
  .nav-lnk {padding:10px 9px;font-size:14.5px}
  .hdr-acties .knop {padding:11px 16px;font-size:14px}
}

@media (max-width:1080px) {
  .stroom {grid-template-columns:1fr}
  .zijbalk {position:static;
    grid-template-columns:repeat(2,1fr);align-items:start;}
  .ad-half {aspect-ratio:300/250}
  .rubrieken,.ev-grid {grid-template-columns:repeat(3,1fr)}
  .stats-grid {grid-template-columns:repeat(3,1fr);gap:32px 20px}
  .partner-grid {grid-template-columns:repeat(2,1fr)}
  .art-grid {grid-template-columns:1fr;gap:44px}
  .art-body {max-width:none}
  .dossier {grid-template-columns:1fr;gap:18px}
  .rub-grid {grid-template-columns:1fr;gap:44px}
  .tp-hoofd {padding:0 0 34px;margin-top:16px}
  .tp-vlak {left:0;right:0;top:74px;bottom:0}
  .tp-hoofd-in {grid-template-columns:236px minmax(0,1fr);
    grid-template-areas:"kop kop" "badge badge" "merk product" "tekst tekst";
    padding-top:20px;row-gap:22px;}
  .tp-kop h1 {max-width:none}
  .tp-tekst {padding-right:0;max-width:66ch}
  .tp-product {align-self:center;justify-self:center;max-width:240px}
  .tp-badge {grid-area:badge;position:static;width:auto;
    display:flex;align-items:flex-end;gap:10px;margin:4px 0 0;}
  .tp-badge-vak {flex:0 0 158px;padding:14px 12px 15px}
  .tp-mascotte {width:88px;margin:0;transform:none}
  .tp-panel {gap:30px 32px}
  .cv-hoofd-in {grid-template-columns:minmax(0,1fr) 260px;gap:32px}
  .cv-portret-vlak {right:-16px;left:20px;bottom:-16px}
  .cv-merk {font-size:110px;top:-38px}
  .cv-lijf {grid-template-columns:1fr;gap:32px}
  .cv-kaart {position:static}
  .cv-lijst {display:grid;grid-template-columns:repeat(2,1fr);column-gap:32px}
  .dag-hoofd {grid-template-columns:1fr;gap:26px}
  .sp-hoofd {grid-template-columns:1fr}
  .sp-hoofd .hf-vlak-rechts {grid-row:auto;justify-self:start;
    width:min(82%,620px);margin:-56px 0 0 32px}
  .bv-naam {bottom:112px}
}

@media (max-width:1040px) {
  .nav,.hdr-acties .knop {display:none}
  .burger {display:grid}
}

@media (max-width:940px) {
  .hero-grid {grid-template-columns:1fr}
  .hero-groot {min-height:440px}
  .hero-zij {grid-template-rows:none;grid-template-columns:1fr}
  .mag-grid {grid-template-columns:1fr;gap:36px}
  .mag-stapel {max-width:300px;margin-inline:auto}
  .mag-overlap {width:124px;right:-20px;bottom:38px}
  .nb {grid-template-columns:1fr;gap:28px}
  .f-grid {grid-template-columns:repeat(2,1fr);gap:34px}
  .kaarten-3 {grid-template-columns:repeat(2,1fr)}
}

@media (max-width:860px) {
  .uitgelicht {grid-template-columns:1fr}
  .uitgelicht .beeldkant {aspect-ratio:16/9}
}

@media (max-width:820px) {
  .tp-panel {grid-template-columns:1fr}
  .tp-spec-lijst {grid-template-columns:1fr}
  .cv-hoofd-in {grid-template-columns:1fr;gap:26px;align-items:start}
  .cv-portret {max-width:280px}
  .cv-portret-vlak {left:18px;right:-18px;bottom:-18px}
  .cv-merk {display:none}
  .hf-kader {padding:22px 22px 126px;min-height:0}
  .hf-mascotte {left:auto;right:8px;bottom:-10px;height:170px;width:auto}
  .dag-titelkader {padding:22px 20px 24px}
  .dag-titelkader::before,.dag-titelkader::after {font-size:48px;padding:9px 8px}
  .dag-titelkader::before {left:12px}
  .dag-titelkader::after {right:12px}
  .dag-moment {grid-template-columns:1fr}
  .dag-rechts .dag-beeld {order:0}
  .dag-beeld {min-height:0;aspect-ratio:16/9}
  .dag-links .dag-tijd,.dag-rechts .dag-tijd {left:22px;right:auto;top:auto;
    top:calc(56.25vw - 62px)}
  .dag-links .dag-tekst,.dag-rechts .dag-tekst {padding:24px 22px}
  .hf-quotekader {padding:22px 20px 24px}
  .hf-quotekader::before,.hf-quotekader::after {font-size:48px;padding:9px 8px}
  .hf-quotekader::before {left:12px}
  .hf-quotekader::after {right:12px}
  .art-body .sp-duo {grid-template-columns:1fr;gap:22px}
  .art-body .sp-app {float:none;width:100%;margin:0 0 26px}
  .sp-app img {max-width:280px;margin:0 auto}
  .sp-portret figcaption {text-align:left;border-right:0;padding-right:0;
    border-left:3px solid var(--accent);padding-left:10px}
  .hf-vlak-onder {width:calc(100% - 32px);margin:-40px 0 0 16px}
  .sp-hoofd .hf-vlak-rechts {width:calc(100% - 32px);margin:-40px 0 0 16px}
  .bv-naam {left:22px;bottom:104px}
}

@media (max-width:640px) {
  body {font-size:16px}
  .sectie {padding:52px 0}
  .wrap {padding-inline:18px}
  .kaarten {grid-template-columns:1fr}
  .kaart-native {grid-template-columns:1fr}
  .rubrieken,.ev-grid,.partner-grid,.zijbalk {grid-template-columns:1fr}
  .stats-grid {grid-template-columns:repeat(2,1fr)}
  .zij-kaart {grid-template-columns:96px 1fr;gap:13px}
  .zij-kaart .zij-tekst {padding:13px 14px 13px 0}
  .hero-tekst {padding:24px 24px 60px}
  .hero-blok {margin:-42px 0 0 18px;width:calc(100% - 36px);padding:18px 20px}
  .f-grid {grid-template-columns:1fr}
  .ad-billboard {aspect-ratio:320/100;min-height:0}
  .mag-item {flex-direction:column;gap:6px}
  .mag-item .pill {min-width:0}
  .kaarten-3 {grid-template-columns:1fr}
  .ad-intext {aspect-ratio:320/100}
  .art-quote {margin:-40px 0 0 16px;width:calc(100% - 32px);padding:18px 20px}
  .art-inline .vlak {margin:-28px 12px 0 auto;width:calc(100% - 24px)}
  .art-meta {gap:10px}
  .deel {margin-left:0;width:100%}
  .rub-kaarten {grid-template-columns:1fr}
  .tp-hoofd {padding:0 0 28px}
  .tp-hoofd-in {grid-template-columns:1fr;
    grid-template-areas:"kop" "badge" "product" "merk" "tekst";row-gap:18px}
  .tp-vlak {top:62px}
  .tp-product {justify-self:start;max-width:216px;align-self:start}
  .tp-score {white-space:normal}
  .tp-panel-kop {flex-direction:column;align-items:flex-start;gap:14px}
  .cv-lijst {grid-template-columns:1fr}
  .dag-links .dag-tijd,.dag-rechts .dag-tijd {top:auto;bottom:auto;
    top:calc(56.25vw - 56px);left:16px}
  .dag-tijd {padding:6px 11px 7px}
  .dag-tijd span {font-size:19px}
  .art-body .bv-vraag {padding-left:0;padding-top:52px}
  .bv-nr {top:-4px;font-size:54px}
  .bv-naam {bottom:92px}
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .reveal {opacity:1;transform:none}
}