/*
  Design system Grey Protocol, hims-redesign, stap 3 van 28 juli 2026.
  Tokens uit de Claude Design-import (OUTPUTS/cloud-design-inbox/tokens/ en
  guidelines/), met vier contrastcorrecties in dezelfde tint. Berekend, niet
  geschat; de volledige tabel staat in DESIGN-UITVOERING.md onder stap 3.

  Aangepast ten opzichte van het ontwerp (eis: tekst 4,5:1, grote koppen 3:1):
  - primair #4A7A2E naar #4A792E: als tekst op warm creme haalde het ontwerp
    4,4986. Nu 4,55 op creme, 5,17 op wit, F7F7FA erop 4,83.
  - accent-donker #6FA84A naar #77B550: kaarttitel 20px haalde 4,18 op bruin
    en 3,94 op navy. Nu 4,82 en 4,54.
  - terracotta-vol #B98267 naar #5C4133: wit erop haalde 3,25, wit-zacht 2,14,
    het H2-accentwoord 1,14. Nu 9,30, 4,53 en 3,77.
  - placeholder-tekst zwart 45% naar 64%: haalde 3,13 op het placeholdervlak.
    Kaal is 57% genoeg (4,60), maar op de beeldkaart ligt de overlay van 19%
    over het label heen; 64% haalt daar 4,65 en kaal 5,66.
  De overlays 19% en 44% zijn beeldbehandeling, geen tekstdrager. Tekst op
  beeld krijgt in stap 4 een scrim: zwart minimaal 0,54 achter witte tekst,
  0,77 achter de accentregel, berekend op de lichtst denkbare (witte) foto.
*/

/*
  General Sans, variabele font (wght 200 tot 700), zelf gehost.
  Bron: Fontshare CDN, opgehaald 28 juli 2026, 38 kB, versie 2.000.
  Licentie: ITF Free Font License, zie fontshare.com/terms; zelf hosten is
  toegestaan. De tussengewichten 410, 425 en 470 uit het ontwerp bestaan
  alleen in deze variabele file; statische sets vallen terug op 400 en 500
  en maken de koppen zichtbaar zwaarder dan het ontwerp.
*/
@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(/assets/fonts/GeneralSans-Variable.woff2) format("woff2");
  unicode-range: U+0000-017E, U+0192, U+0218-021B, U+02C6-02DD, U+0300-030C, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+2000-206F, U+2070-2089, U+20AC, U+2122, U+2212, U+2215, U+FB01-FB02;
}

/* ---------- Tokenblok hims-systeem ---------- */

:root {
  /* Basisvlakken (hims-systeem) */
  --kleur-basis: #FFFFFF;
  --kleur-vlak-warm: #F5F0E8;
  --kleur-balk-amber: #F5C97D;
  --kleur-balk-amber-licht: #FADDA9;
  --kleur-amber: #FFC671;
  --kleur-amber-tekst: #453421;
  --kleur-vlak-bruin: #453421;
  --kleur-vlak-navy: #1C3E56;
  /* Alleen als overlay over beeld, nooit rechtstreeks onder tekst */
  --kleur-vlak-terracotta: rgba(185, 130, 103, 0.8);
  /* Ontwerp #B98267, donkerder gemaakt voor tekst erop; zie kop van dit bestand */
  --kleur-terracotta-vol: #5C4133;

  /* Tekst */
  --kleur-tekst: rgba(0, 0, 0, 0.88);
  --kleur-tekst-zacht: rgba(0, 0, 0, 0.6);
  --kleur-tekst-wit: #FFFFFF;
  --kleur-tekst-wit-zacht: rgba(255, 255, 255, 0.6);

  /* Beeldoverlay, beeldbehandeling zonder tekst; tekst op beeld krijgt een scrim */
  --kleur-overlay-licht: rgba(0, 0, 0, 0.19);
  --kleur-overlay-donker: rgba(0, 0, 0, 0.44);

  /* Placeholder voor ontbrekend beeld */
  --kleur-placeholder: #D6D6DA;
  /* Ontwerp 45%, verhoogd naar 64%: 5,66:1 kaal en 4,65:1 onder de overlay van 19% */
  --kleur-placeholder-tekst: rgba(0, 0, 0, 0.64);

  /* Grey Protocol groen */
  --kleur-primair: #4A792E;
  --kleur-primair-hover: #3F6827;
  --kleur-primair-tekst: #F7F7FA;
  --kleur-accent: #4A792E;
  --kleur-accent-donker: #77B550;
  --kleur-logo-grijs: #9898B0;
  --kleur-logo-groen: #3CDB5A;
  /* Donker vlak achter het logo. Komt niet uit de import maar uit de
     merkbriefing (hoofdstuk 2, background primary dark); geen enkel donker
     vlak uit de import is donker genoeg voor de logokleuren. Op dit vlak
     haalt GREY 6,82 en PROTOCOL 10,51; los op wit was dat 2,82 en 1,83. */
  --kleur-logoblok: #0F0F12;

  /* Semantische aliassen */
  --tekst-body: var(--kleur-tekst);
  --tekst-klein: var(--kleur-tekst-zacht);
  --vlak-pagina: var(--kleur-basis);
  --vlak-sectie: var(--kleur-vlak-warm);
  --vlak-aankondiging: var(--kleur-balk-amber);
  --knop-primair-vlak: var(--kleur-primair);
  --knop-primair-tekst: var(--kleur-primair-tekst);
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--kleur-primair);

  /* Typografie: General Sans, vloeiende schaal tussen 800px en 1440px viewport */
  --font-familie: "General Sans", system-ui, sans-serif;
  --kop-xl: clamp(56px, 11px + 5.625vw, 92px);
  --kop-l: clamp(41px, 12.25px + 3.594vw, 64px);
  --kop-m: 23px;
  --kaart-titel: 20px;
  --body: 16px;
  --klein: 12px;
  --knop: 14px;
  --knop-klein: 12px;

  /* Gewichten: 410, 425 en 470 vragen de variabele font hierboven */
  --gewicht-h1: 410;
  --gewicht-h2: 425;
  --gewicht-h3: 470;
  --gewicht-body: 400;
  --gewicht-knop: 500;
  --gewicht-leesmeer: 700;

  /* Line-heights */
  --lh-h1: 1.0;
  --lh-h2: 1.04;
  --lh-h3: 1.16;
  --lh-kaart-titel: 0.91;
  --lh-body: 1.4;

  /* Letter-spacing */
  --ls-h1: -0.01em;
  --ls-h2: -0.007em;
  --ls-kaart-titel: 0.02em;

  /* Ruimte, 8px-basis */
  --ruimte-1: 8px;
  --ruimte-2: 16px;
  --ruimte-3: 24px;
  --ruimte-4: 32px;
  --ruimte-5: 40px;
  --ruimte-6: 48px;
  --ruimte-8: 64px;
  --ruimte-10: 80px;
  --ruimte-12: 96px;
  --ruimte-16: 128px;
  --ruimte-20: 160px;

  /* Breedtes; breakpoints mobiel-eerst: basis 390, media queries op 768 en 1200 */
  --breedte-buiten: 1728px;
  --breedte-content: 1132px;
  --breedte-tekst: 732px;

  /* Radii */
  --radius-kaart: 24px;
  --radius-kaart-klein: 20px;
  --radius-knop: 48px;
  --radius-nav: 24px 24px 0 0;

  /* Knopmaten */
  --knop-hoogte: 48px;
  --knop-padding: 0 24px;

  /* Kaartverhouding grote beeldkaart */
  --verhouding-beeldkaart: 4 / 3;
}

/*
  ---------- Componentenlaag hims-systeem, stap 4 ----------
  De 13 componenten uit de import als HTML en CSS, met states voor rust,
  hover, focus-visible, active en uitgeschakeld. Markup komt uit de
  hims-helpers in scripts/build-site.mjs. De klasse .hims op body activeert
  de basistypografie van het nieuwe systeem en staat sinds 29 juli 2026 op
  alle routes; het fase 1-blok dat hier eerst onder stond is verwijderd.

  Tekst op beeld: de overlaytokens zijn beeldbehandeling en garanderen geen
  contrast. De .scrim op de beeldkaart doet dat wel, berekend op de lichtst
  denkbare witte foto onder de staande overlay van 19%: boven zwart 0,74
  (samen 0,79, nodig 0,77 voor de accentregel), onder zwart 0,46 (samen
  0,56, nodig 0,54 voor de witte voetlink). Op een kaart zonder beeld wordt
  de overlay op licht vastgezet, ook bij hover, zodat het placeholderlabel
  (zwart 64%) 4,65:1 blijft halen onder de overlay.
*/

.hims {
  background: var(--vlak-pagina);
  color: var(--tekst-body);
  font-family: var(--font-familie);
  font-size: var(--body);
  line-height: var(--lh-body);
}

.nowrap { white-space: nowrap; }

.hims h1 {
  max-width: none;
  margin: 0;
  font-size: var(--kop-xl);
  font-weight: var(--gewicht-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  hyphens: none;
  overflow-wrap: anywhere;
}
.hims h2 {
  margin: 0;
  font-size: var(--kop-l);
  font-weight: var(--gewicht-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.hims h3 {
  margin: 0;
  font-size: var(--kop-m);
  font-weight: var(--gewicht-h3);
  line-height: var(--lh-h3);
  letter-spacing: normal;
}
.hims .accent { color: var(--kleur-accent); }
.hims .accent-donker { color: var(--kleur-accent-donker); }

/* Prozalinks; componenten met een eigen klasse vallen hierbuiten */
.hims a:not([class]) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hims a:not([class]):hover { color: var(--kleur-primair); }

/* ---------- Knop ---------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--knop-hoogte);
  padding: var(--knop-padding);
  border: 1px solid transparent;
  border-radius: var(--radius-knop);
  background: none;
  color: inherit;
  font-family: var(--font-familie);
  font-size: var(--knop);
  font-weight: var(--gewicht-knop);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.knop:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.knop:active { transform: translateY(1px); }
.knop[disabled], .knop[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.knop--primair { background: var(--knop-primair-vlak); color: var(--knop-primair-tekst); }
.knop--primair:hover { background: var(--kleur-primair-hover); }
.knop--amber { background: var(--kleur-amber); color: var(--kleur-amber-tekst); }
.knop--amber:hover { background: #F2B85C; }
.knop--secundair { background: transparent; color: inherit; border-color: currentColor; }
.knop--secundair:hover { background: rgba(127, 127, 127, .15); }
.knop--nav {
  height: 36px;
  padding: 0 16px;
  font-size: var(--knop-klein);
  background: var(--kleur-basis);
  color: var(--kleur-tekst);
  border-color: rgba(0, 0, 0, .15);
}
.knop--nav:hover { border-color: rgba(0, 0, 0, .4); }
.knop--balk {
  height: 32px;
  padding: 0 14px;
  font-size: var(--knop-klein);
  background: var(--kleur-balk-amber-licht);
  color: var(--kleur-amber-tekst);
}
.knop--balk:hover { background: #F7D48F; }

/* ---------- Tekstlink ---------- */

.tekstlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--body);
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.tekstlink:hover { opacity: .7; }
.tekstlink:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.tekstlink[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.tekstlink .chevron {
  display: inline-block;
  font-size: 1.1em;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ---------- Chip ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-knop);
  font-size: var(--klein);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background: rgba(255, 255, 255, .9);
  color: var(--kleur-tekst);
}
.chip--omlijnd { background: transparent; border: 1px solid rgba(0, 0, 0, .25); color: var(--kleur-tekst-zacht); }
.chip--omlijnd-wit { background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: var(--kleur-tekst-wit-zacht); }
.chip--groen { background: var(--kleur-primair); color: var(--kleur-primair-tekst); }

/* ---------- Invoer ---------- */

.invoer { display: flex; flex-direction: column; gap: 6px; }
.invoer label { font-size: var(--klein); font-weight: 500; color: var(--kleur-tekst-zacht); }
.invoer input {
  height: 56px;
  padding: 0 20px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 12px;
  font: inherit;
  font-size: var(--body);
  color: var(--kleur-tekst);
  background: var(--kleur-basis);
  transition: border-color .15s ease;
}
.invoer input::placeholder { color: var(--kleur-tekst-zacht); }
.invoer input:hover { border-color: rgba(0, 0, 0, .4); }
.invoer input:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--kleur-primair); }
.invoer input:disabled { opacity: .4; }

/* ---------- Logo, typografisch, klein in de nav, nooit groot ---------- */

.logo {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--kleur-logoblok);
  line-height: 1;
  text-decoration: none;
}
.logo .logo-symbool { width: 24px; height: 24px; display: block; }
.logo .logo-tekst { display: inline-flex; flex-direction: column; line-height: 1; }
.logo:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.logo b { color: var(--kleur-logo-grijs); font-weight: 500; letter-spacing: .06em; font-size: 18px; }
.logo i { color: var(--kleur-logo-groen); font-style: normal; font-weight: 500; letter-spacing: .3em; font-size: 9.4px; margin-top: 2.5px; }

/* ---------- Placeholder voor ontbrekend beeld ---------- */

.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--kleur-placeholder);
  color: var(--kleur-placeholder-tekst);
  font-size: var(--klein);
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;
}

/* ---------- Beeldkaart ---------- */

.beeldkaart {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: var(--radius-kaart);
  aspect-ratio: var(--verhouding-beeldkaart);
  padding: 24px;
  color: var(--kleur-tekst-wit);
  text-decoration: none;
  background: var(--kleur-placeholder);
}
.beeldkaart--klein { border-radius: var(--radius-kaart-klein); padding: 20px; }
.beeldkaart:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.beeldkaart .media { position: absolute; inset: 0; }
.beeldkaart .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beeldkaart .media .placeholder { position: absolute; inset: 0; }
.beeldkaart .overlay { position: absolute; inset: 0; background: var(--kleur-overlay-licht); transition: background .2s ease; }
.beeldkaart--donker .overlay { background: var(--kleur-overlay-donker); }
.beeldkaart:hover .overlay { background: var(--kleur-overlay-donker); }
/* Zonder beeld geen donkere overlay: het placeholderlabel houdt dan 4,65:1 */
.beeldkaart:has(.placeholder) .overlay,
.beeldkaart:has(.placeholder):hover .overlay { background: var(--kleur-overlay-licht); }
/* Contrastscrim achter titel en voetlink, zie de toelichting bovenaan deze laag */
.beeldkaart .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .74) 30%,
    rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 72%,
    rgba(0, 0, 0, .46) 94%, rgba(0, 0, 0, .46) 100%);
}
.beeldkaart .titel {
  position: relative;
  margin: 0;
  max-width: 85%;
  font-size: var(--kaart-titel);
  font-weight: 400;
  line-height: var(--lh-kaart-titel);
  letter-spacing: var(--ls-kaart-titel);
}
.beeldkaart .titel b { display: block; padding-bottom: .18em; font-weight: 400; color: var(--kleur-accent-donker); }
.beeldkaart .voet { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.beeldkaart .voet u { font-size: 14px; font-weight: 500; text-underline-offset: 3px; }
.beeldkaart .chevron { font-size: 22px; line-height: 1; }

/* ---------- Productkaart ---------- */

.productkaart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 260px;
  border-radius: var(--radius-kaart-klein);
  background: var(--kleur-basis);
  color: var(--kleur-tekst);
  text-decoration: none;
  transition: transform .15s ease;
}
.productkaart:hover { transform: translateY(-2px); }
.productkaart:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.productkaart .beeld { position: relative; aspect-ratio: 1 / 1; background: var(--kleur-placeholder); }
.productkaart .beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.productkaart .beeld .placeholder { position: absolute; inset: 0; }
.productkaart .beeld .chip { position: absolute; top: 12px; left: 12px; }
.productkaart .kbody { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.productkaart .naam { font-size: 18px; font-weight: 500; line-height: 1.2; }
/* text-transform en letter-spacing expliciet: de fase 1-labelregel vangt
   .meta ook en zou de metaregel anders in kapitalen zetten */
.productkaart .meta { font-size: 13px; color: var(--kleur-tekst-zacht); text-transform: none; letter-spacing: normal; }
.productkaart .prijs { font-size: 14px; font-weight: 500; margin-top: 4px; }
.productkaart .status { font-size: 13px; color: var(--kleur-tekst-zacht); }

/* ---------- Bronkaart en stapkaart ---------- */

.bronkaart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 300px;
  padding: 24px;
  border-radius: var(--radius-kaart-klein);
  background: var(--kleur-vlak-warm);
  color: var(--kleur-tekst);
}
.bronkaart .rol {
  font-size: var(--klein);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
}
.bronkaart .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bronkaart .naam { font-size: var(--kop-m); font-weight: var(--gewicht-h3); line-height: var(--lh-h3); }
.bronkaart p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--kleur-tekst-zacht);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stapkaart { padding: 24px; border-radius: var(--radius-kaart-klein); background: var(--kleur-vlak-warm); }
.stapkaart h3 { margin-bottom: 8px; }
.stapkaart p { margin: 0; color: var(--kleur-tekst-zacht); }

/* ---------- Accordeon ---------- */

.accordeon { border-top: 1px solid rgba(0, 0, 0, .12); }
.accordeon:last-of-type { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.accordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--kleur-tekst);
  cursor: pointer;
  list-style: none;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.accordeon .acc-chevron { font-size: 22px; line-height: 1; transition: transform .2s ease; }
.accordeon[open] .acc-chevron { transform: rotate(90deg); }
.accordeon p {
  margin: 0 0 20px;
  max-width: var(--breedte-tekst);
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--kleur-tekst-zacht);
}

/* ---------- Kleine lettertjes met Lees meer (checkbox, geen JS) ---------- */

.kleineletters {
  max-width: var(--breedte-tekst);
  margin: 24px auto 0;
  padding: 0 16px;
  font-size: var(--klein);
  line-height: 1.45;
  text-align: center;
  color: var(--kleur-tekst-zacht);
}
.kleineletters--wit { color: var(--kleur-tekst-wit-zacht); }
.kleineletters input { position: absolute; opacity: 0; pointer-events: none; }
.kleineletters p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kleineletters input:checked ~ p { display: block; }
.kleineletters label {
  display: inline-block;
  margin-top: 4px;
  font-weight: var(--gewicht-leesmeer);
  text-decoration: underline;
  cursor: pointer;
}
.kleineletters input:focus-visible ~ label { box-shadow: var(--focus-ring); border-radius: 2px; }
.kleineletters label .minder, .kleineletters input:checked ~ label .meer { display: none; }
.kleineletters input:checked ~ label .minder { display: inline; }

/* ---------- Marquee ---------- */

.marquee { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.marquee .rij { display: flex; gap: 12px; width: max-content; }
/* De inhoud staat er twee keer in (tweede kopie aria-hidden); de animatie
   schuift precies een kopie plus een tussenruimte op voor een naadloze loop. */
.marquee .mq-inhoud { display: flex; gap: 12px; }
.marquee .rij.links { animation: marquee-links 60s linear infinite; }
.marquee .rij.rechts { animation: marquee-rechts 60s linear infinite; }
@keyframes marquee-links {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 6px)); }
}
@keyframes marquee-rechts {
  from { transform: translateX(calc(-50% - 6px)); }
  to { transform: translateX(0); }
}
.marquee .mchip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: var(--radius-knop);
  font-size: 13px;
  font-weight: 500;
  color: var(--kleur-tekst-zacht);
  white-space: nowrap;
  background: var(--kleur-basis);
}
.marquee--wit .mchip { border-color: rgba(255, 255, 255, .3); color: var(--kleur-tekst-wit-zacht); background: transparent; }

/* ---------- Uitsprakencarrousel ---------- */

.carrousel { display: flex; flex-direction: column; gap: 24px; max-width: var(--breedte-tekst); color: inherit; }
.carrousel figure { display: flex; flex-direction: column; gap: 24px; margin: 0; }
/* Expliciete display verslaat het hidden-attribuut; hier terugzetten */
.carrousel figure[hidden] { display: none; }
.carrousel .teller { font-size: var(--klein); font-weight: 500; opacity: .6; }
.carrousel blockquote {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: var(--gewicht-h2);
  line-height: 1.15;
}
.carrousel .bron { font-size: var(--klein); opacity: .6; }
.carrousel .pijlen { display: flex; justify-content: flex-end; gap: 8px; }
.carrousel .pijl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.carrousel .pijl:hover { opacity: .7; }
.carrousel .pijl:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.carrousel .pijl:disabled { opacity: .35; cursor: default; }

/* ---------- Kaartrij, horizontaal scrollend met scroll-snap ---------- */

.kaartrij {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 16px;
  scrollbar-width: none;
}
.kaartrij::-webkit-scrollbar { display: none; }
.kaartrij > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ---------- Mobiele sticky CTA ---------- */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .16);
  background: var(--kleur-vlak-bruin);
  color: var(--kleur-tekst-wit);
  box-shadow: 0 -10px 30px rgba(69, 52, 33, .18);
  transform: translateY(100%);
  transition: transform .22s ease;
}
.sticky-cta[data-visible="true"] { transform: translateY(0); }
.sticky-cta strong { font-size: 14px; font-weight: 500; }
.sticky-cta .knop { flex: 1; }

@media (min-width: 768px) {
  .sticky-cta { display: none; }
}

/*
  ---------- Sectielaag hims-systeem, stap 5 ----------
  Mobiel eerst met 390 als basis; media queries op 768 en 1200.
  De typeschaal loopt via de clamp-tokens vloeiend door tot 1440.
*/

.content { max-width: var(--breedte-content); margin: 0 auto; padding: 0 16px; }
.kaartrij--content { max-width: var(--breedte-content); margin: 0 auto; }

.sectiekop { display: grid; gap: 12px; margin: 0 0 32px; }
.sectiekop p:not(.eyebrow) { margin: 0; max-width: 620px; color: var(--kleur-tekst-zacht); }

.acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Aankondigingsbalk */
.sectie--aankondiging { background: var(--vlak-aankondiging); color: var(--kleur-amber-tekst); }
.sectie--aankondiging .balk {
  max-width: var(--breedte-buiten);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 10px 16px 22px;
  font-size: 14px;
  font-weight: 500;
}
.sectie--aankondiging .balk > span:last-child { display: none; }

/* Navigatie: wit paneel met ronde bovenhoeken over de amberbalk heen */
.sectie--navigatie { position: sticky; top: 0; z-index: 50; margin-top: -14px; }
.sectie--navigatie .paneel {
  max-width: var(--breedte-buiten);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding: 12px 16px;
  background: var(--kleur-basis);
  border-radius: var(--radius-nav);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.paneel .navlinks {
  order: 3;
  width: 100%;
  display: flex;
  gap: 4px 16px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  white-space: nowrap;
}
.paneel .navlinks::-webkit-scrollbar { display: none; }
.paneel .navlinks a { font-size: 14px; font-weight: 500; color: var(--kleur-tekst-zacht); text-decoration: none; }
.paneel .navlinks a:hover { color: var(--kleur-tekst); text-decoration: underline; }
.paneel .knop--nav { margin-left: auto; }

/* Hero: alleen kop, korte intro en acties op wit */
.sectie--hero .content { padding-top: var(--ruimte-6); padding-bottom: var(--ruimte-8); }
.sectie--hero h1 { margin-top: 12px; }
.sectie--hero .intro { margin: 20px 0 0; max-width: 520px; color: var(--kleur-tekst-zacht); }
.sectie--hero .intro--vervolg { margin-top: 12px; }
.sectie--hero .acties { margin-top: 28px; }
.sectie--hero .breadcrumb { margin-bottom: var(--ruimte-3); }

/* Homepagehero: commerciële kerncopy naast het Retatrutide-productbeeld */
.home-hero-grid { display: grid; gap: var(--ruimte-4); align-items: center; }
.home-hero-copy { min-width: 0; }
.sectie--homehero h1 { max-width: 760px; font-size: clamp(48px, 9.2vw, 76px); }
.sectie--homehero .intro { max-width: 600px; font-size: 18px; }
.home-hero-product {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--radius-kaart);
  background: var(--kleur-vlak-warm);
  color: var(--kleur-tekst);
  text-decoration: none;
}
.home-hero-product img { width: 100%; height: 100%; min-height: 420px; display: block; object-fit: cover; }
.home-hero-productinfo {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 16px;
  border-radius: var(--radius-kaart-klein);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 36px rgba(69, 52, 33, .16);
}
.home-hero-productinfo b { grid-column: 1 / -1; font-size: 18px; font-weight: 500; }
.home-hero-productinfo span { font-size: 14px; color: var(--kleur-tekst-zacht); }
.home-hero-productinfo u { grid-column: 2; grid-row: 2 / span 2; align-self: center; font-size: 14px; font-weight: 600; text-underline-offset: 3px; }
.home-hero-product:hover .home-hero-productinfo u { text-decoration-thickness: 2px; }
.home-hero-product:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Productsectie op donker vlak */
.sectie--product {
  margin: 12px;
  padding: var(--ruimte-8) 0;
  border-radius: var(--radius-kaart);
  background: var(--kleur-vlak-bruin);
  color: var(--kleur-tekst-wit);
}
.sectie--product .eyebrow, .sectie--afsluiter .eyebrow { color: var(--kleur-tekst-wit-zacht); }
.sectie--product .sectiekop { margin-bottom: 20px; }
.sectie--product .sectiekop p:not(.eyebrow) { color: var(--kleur-tekst-wit); }
.sectie--product .chiprij { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.sectie--product .kaartrij { margin-top: var(--ruimte-4); }
.sectie--product .productkaart { width: 240px; }

/* Uitgelichte beeldkaarten met bijschrift */
.sectie--beeldkaarten .content { padding-top: var(--ruimte-8); padding-bottom: var(--ruimte-4); }
.kaartgrid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.kaartcel { display: flex; flex-direction: column; }
.bijschrift { margin: 12px 4px 0; max-width: 60ch; font-size: 14px; color: var(--kleur-tekst-zacht); }
.bijschrift .rol {
  display: block;
  margin-bottom: 4px;
  font-size: var(--klein);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sectie--uitgelicht .content { padding-top: var(--ruimte-4); padding-bottom: var(--ruimte-8); }
.beeldkaart--breed { aspect-ratio: 16 / 9; }

/* Drie ingangen op warm creme, als kaartrij van bronkaarten */
.sectie--categorie { padding: var(--ruimte-8) 0; background: var(--vlak-sectie); }
.sectie--categorie .bronkaart { width: 320px; background: var(--kleur-basis); }
.bronkaart .tekstlink { margin-top: auto; align-self: flex-start; font-size: 14px; }

/* Afsluiter op donker vlak, het conversiepunt */
.sectie--afsluiter {
  margin: 12px;
  padding: var(--ruimte-10) 0;
  border-radius: var(--radius-kaart);
  background: var(--kleur-vlak-bruin);
  color: var(--kleur-tekst-wit);
}
.sectie--afsluiter .content { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.sectie--afsluiter h2 { max-width: 620px; }
.sectie--afsluiter .intro { margin: 0; max-width: 520px; }
.sectie--afsluiter .voorwaarden { max-width: 520px; font-size: var(--klein); line-height: 1.45; color: var(--kleur-tekst-wit-zacht); }
.sectie--afsluiter .voorwaarden strong { display: block; margin-bottom: 6px; font-weight: 500; color: var(--kleur-tekst-wit); }

/* Footer op wit */
.sectie--footer { padding: var(--ruimte-10) 0 var(--ruimte-6); }
.sectie--footer .kolommen {
  max-width: var(--breedte-content);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.sectie--footer .kolom { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sectie--footer .koptitel { font-size: 14px; font-weight: 600; }
.sectie--footer .kolom a { font-size: 14px; color: var(--kleur-tekst-zacht); text-decoration: none; }
.sectie--footer .kolom a:hover { color: var(--kleur-tekst); text-decoration: underline; }
.sectie--footer .kolom--merk p { margin: 6px 0 0; max-width: 40ch; font-size: 14px; color: var(--kleur-tekst-zacht); }
.sectie--footer .disclaimer {
  max-width: var(--breedte-content);
  margin: var(--ruimte-8) auto 0;
  padding: 24px 16px 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--klein);
  color: var(--kleur-tekst-zacht);
}

/* Tablet, 768 en breder */
@media (min-width: 768px) {
  .content { padding: 0 24px; }
  .sectie--navigatie .paneel { padding: 14px 24px; }
  .kaartgrid { grid-template-columns: 1fr 1fr; }
  .sectie--product, .sectie--afsluiter { margin: 16px; }
  .sectie--product { padding: var(--ruimte-10) 0; }
  .sectie--product .productkaart { width: 280px; }
  .sectie--footer .kolommen { grid-template-columns: 1fr 1fr; }
  .sectie--footer .disclaimer { flex-direction: row; justify-content: space-between; padding-top: 20px; }
  .kaartrij--content { padding: 0 24px; }
  .home-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: var(--ruimte-6); }
  .home-hero-product, .home-hero-product img { min-height: 500px; }
}

/* Desktop, 1200 en breder */
@media (min-width: 1200px) {
  .sectie--hero .content { padding-top: var(--ruimte-10); padding-bottom: var(--ruimte-10); }
  .sectie--beeldkaarten .content { padding-top: var(--ruimte-10); }
  .sectie--categorie { padding: var(--ruimte-12) 0; }
  .sectie--afsluiter { padding: var(--ruimte-12) 0; }
  .paneel .navlinks { order: 0; width: auto; margin-left: 24px; gap: 24px; }
  .sectie--footer .kolommen { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; }
  .home-hero-grid { gap: var(--ruimte-8); }
}

/*
  ---------- Sectielaag productdetail, stap 6 ----------
  Alleen plaatsings- en ritmeregels voor /producten/<slug>/. De componenten
  zelf (knop, tekstlink, stapkaart, accordeon) blijven ongewijzigd; nieuwe
  kleurparen zijn er niet. De feitenband gebruikt het bruine vlak met wit en
  wit-zacht, hetzelfde paar als de productsectie van de homepage.
*/

/* Producthero: kop en acties, daaronder het productbeeld; vanaf 1200 naast elkaar */
.sectie--producthero .content {
  display: grid;
  gap: var(--ruimte-5);
  padding-top: var(--ruimte-6);
  padding-bottom: var(--ruimte-8);
}
.sectie--producthero h1 { margin-top: 12px; }
.sectie--producthero .breadcrumb { margin-bottom: var(--ruimte-3); }
/* Prijsanker direct onder de productnaam; het bedrag komt uit inventory.json */
.prijsanker { margin: 12px 0 0; font-size: 20px; font-weight: 500; }
.sectie--producthero .intro { margin: 20px 0 0; max-width: 520px; color: var(--kleur-tekst-zacht); }
.sectie--producthero .acties { margin-top: 28px; }
.sectie--producthero .productbeeld {
  display: flex;
  justify-content: center;
  padding: var(--ruimte-3);
  border-radius: var(--radius-kaart);
  background: var(--vlak-sectie);
}
.sectie--producthero .productbeeld img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 420px;
  border-radius: var(--radius-kaart-klein);
}

/* Feitenband: alle velden uit inventory.json, bewijsgrens direct eronder */
.sectie--feiten {
  margin: 12px;
  padding: var(--ruimte-8) 0;
  border-radius: var(--radius-kaart);
  background: var(--kleur-vlak-bruin);
  color: var(--kleur-tekst-wit);
}
.sectie--feiten .eyebrow { color: var(--kleur-tekst-wit-zacht); }
/* De feitenlijst staat op /aanbod/ op wit en in de feitenband op bruin */
.feiten { display: grid; grid-template-columns: 1fr; gap: 0 var(--ruimte-5); margin: var(--ruimte-3) 0 0; }
.feiten > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ruimte-2);
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.feiten dt { font-size: 14px; color: var(--kleur-tekst-zacht); }
.feiten dd { margin: 0; font-weight: 500; text-align: right; }
.sectie--feiten .feiten > div { border-bottom-color: rgba(255, 255, 255, .18); }
.sectie--feiten .feiten dt { color: var(--kleur-tekst-wit-zacht); }
.bewijsgrens {
  max-width: var(--breedte-tekst);
  margin: var(--ruimte-4) 0 0;
  font-size: var(--klein);
  line-height: 1.45;
  color: var(--kleur-tekst-zacht);
}
.sectie--feiten .bewijsgrens { color: var(--kleur-tekst-wit-zacht); }

/* Variantkeuze: alleen sterkte, prijs en een eigen Telegraminstap per variant.
   Twee kaarten naast elkaar vanaf 768; daaronder onder elkaar. */
.sectie--varianten .content { padding-top: var(--ruimte-8); padding-bottom: var(--ruimte-8); }
.variantrij { display: grid; grid-template-columns: 1fr; gap: var(--ruimte-3); margin-top: var(--ruimte-5); }
.variant {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--ruimte-4);
  border-radius: var(--radius-kaart-klein);
  background: var(--vlak-sectie);
}
.variant-naam { font-size: 18px; font-weight: 500; }
.variant-inhoud { font-size: 14px; color: var(--kleur-tekst-zacht); }
.variant-prijs { font-size: 24px; font-weight: 500; margin-top: 4px; }
.variant .knop { margin-top: var(--ruimte-3); }

/* Bezwaarblokken op wit, proceskaarten op het warme vlak */
.sectie--bezwaren .content { padding-top: var(--ruimte-8); padding-bottom: var(--ruimte-8); }
.sectie--bezwaren .tekstlink { margin-top: var(--ruimte-4); }
.sectie--categorie .stapkaart { background: var(--kleur-basis); }

/* Productoverzicht: drie kaarten naast elkaar op desktop */
.sectie--producten .content { padding-bottom: var(--ruimte-10); }
.sectie--producten .productkaart { min-width: 0; }

/* Vragen: kop in het linkerritme van de andere secties, vragen op leesbreedte */
.sectie--faq .content { padding-top: var(--ruimte-8); padding-bottom: var(--ruimte-8); }
.sectie--faq .accordeon { max-width: var(--breedte-tekst); }

/*
  ---------- Sectielaag overzicht en artikel, stap 8 ----------
  De import dekt alleen de homepage; deze twee templates zijn samengesteld uit
  dezelfde tokens en componenten. Twee bewuste afwijkingen van de typeschaal,
  beide binnen de bestaande tokens: de artikelkop staat op --kop-l in plaats
  van --kop-xl, omdat artikeltitels lang zijn, en de koppen ín het artikel
  staan op --kop-m, omdat --kop-l als tussenkop de leesbaarheid breekt.
*/

.hims .breadcrumb {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--kleur-tekst-zacht);
}
.hims .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hims .breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 6px; color: rgba(69, 52, 33, .42); }
.hims .breadcrumb a { color: inherit; text-underline-offset: 3px; }
.hims .breadcrumb a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; }

.sectie--artikelhero .content { padding-top: var(--ruimte-5); padding-bottom: var(--ruimte-6); }
.sectie--artikelhero .breadcrumb { margin-bottom: var(--ruimte-3); }
.sectie--artikelhero h1 {
  margin-top: 16px;
  max-width: 20ch;
  font-size: var(--kop-l);
  font-weight: var(--gewicht-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.sectie--artikelhero .intro { margin: 24px 0 0; max-width: var(--breedte-tekst); font-size: 18px; }
.sectie--artikelhero .meta {
  margin: 20px 0 0;
  font-size: var(--klein);
  letter-spacing: normal;
  text-transform: none;
  color: var(--kleur-tekst-zacht);
}

.sectie--artikel .content { padding-bottom: var(--ruimte-8); }
.sectie--artikel article { max-width: var(--breedte-tekst); }
.sectie--artikel article > section { margin-top: var(--ruimte-6); }
.sectie--artikel h2 {
  font-size: var(--kop-m);
  font-weight: var(--gewicht-h3);
  line-height: var(--lh-h3);
  letter-spacing: normal;
}
.sectie--artikel article > section > p { margin: 12px 0 0; }
.sectie--artikel .bronnen ol { display: grid; gap: 10px; margin: 16px 0 0; padding-left: 20px; }
.sectie--artikel .bronnen .tekstlink { font-size: 14px; }
.sectie--artikel .vragen .accordeon:first-of-type { margin-top: 16px; }
.sectie--artikelhero .intro--vervolg { margin-top: 12px; }

/* Bewijspagina Retatrutide, stap 3 van het uitvoeringsplan */
.sectie--artikel .artikel--retatrutide-evidence { max-width: var(--breedte-content); }
.artikel--retatrutide-evidence > section { max-width: var(--breedte-tekst); }
.artikel--retatrutide-evidence > .bewijslaag {
  max-width: 100%;
  padding: var(--ruimte-3);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: var(--radius-kaart-klein);
}
.artikel--retatrutide-evidence > .bewijslaag--peer { border-left: 6px solid var(--kleur-primair); }
.artikel--retatrutide-evidence > .bewijslaag--sponsor {
  border-left: 6px solid var(--kleur-balk-amber);
  background: var(--kleur-vlak-warm);
}
.bewijslaag > h2,
.bewijslaag > p { max-width: var(--breedte-tekst); }
.bewijslabel {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--kleur-primair);
  color: var(--kleur-primair-tekst);
  font-size: var(--klein);
  font-weight: var(--gewicht-knop);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bewijslaag--sponsor .bewijslabel {
  background: var(--kleur-balk-amber);
  color: var(--kleur-amber-tekst);
}
.bewijsgrens {
  padding: var(--ruimte-3);
  border-radius: var(--radius-kaart-klein);
  background: var(--kleur-vlak-bruin);
  color: var(--kleur-tekst-wit);
}
.bewijsgrens .inhoudslink { color: inherit; }
.inhoudslink {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.inhoudslink:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.artikel-tabel { margin: var(--ruimte-4) 0; }
.tabel-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 12px;
  background: var(--kleur-basis);
}
.tabel-scroll:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.artikel-tabel table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  color: var(--kleur-tekst);
  font-size: 14px;
  line-height: 1.4;
}
.artikel-tabel caption {
  padding: 16px;
  font-weight: var(--gewicht-h3);
  text-align: left;
}
.artikel-tabel th,
.artikel-tabel td {
  padding: 12px 16px;
  border-top: 1px solid rgba(0, 0, 0, .1);
  text-align: left;
  vertical-align: top;
}
.artikel-tabel thead th { background: var(--kleur-vlak-warm); }
.artikel-tabel tbody th { font-weight: var(--gewicht-knop); }
.artikel-tabel figcaption {
  max-width: var(--breedte-tekst);
  margin-top: 10px;
  color: var(--kleur-tekst-zacht);
  font-size: var(--klein);
  line-height: 1.5;
}
.artikel-datum {
  max-width: var(--breedte-tekst);
  margin-top: var(--ruimte-6);
  color: var(--kleur-tekst-zacht);
  font-size: var(--klein);
}

/* Verwante pagina's onder het artikel */
.verder { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

/* Kader met een uitzondering of een grens, in het aanbod en op de juridische pagina's */
.notice {
  max-width: var(--breedte-tekst);
  margin: var(--ruimte-4) 0 0;
  padding: var(--ruimte-3);
  border-radius: var(--radius-kaart-klein);
  background: var(--kleur-vlak-warm);
  font-size: 14px;
  line-height: 1.45;
}
.notice strong { font-weight: 500; }

/* Overzichtspagina's: vier kaarten in een raster, tekst niet afgekapt */
.sectie--index .content { padding-bottom: var(--ruimte-10); }
/* Productbrug onder artikelen: uitleg loopt door naar het aanbod, met de
   bewijsgrens in de brug zelf. Eén primaire actie. */
.sectie--artikelproduct .content { padding-top: 0; padding-bottom: var(--ruimte-6); }
.productbrug {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  border-radius: var(--radius-kaart-klein);
  background: var(--kleur-vlak-warm);
}
.productbrug .brug-tekst { max-width: 640px; }
.productbrug h2 { margin: 6px 0 8px; font-size: 24px; }
.productbrug .brug-feiten { font-weight: 500; margin-bottom: 8px; }
.productbrug .brug-grens { font-size: 14px; color: var(--kleur-tekst-zacht); }

/* Evidence Navigator, conceptroute /start/. Zonder JavaScript staan alle
   blokken onder elkaar; met JavaScript (.nav-js) toont de pagina alleen de
   gekozen kaart en bewijsgrens. */
.navigator .nav-vraag { margin-bottom: 24px; }
.navigator .nav-vraag h2 { margin-bottom: 12px; }
.navigator .keuzerij { display: flex; flex-wrap: wrap; gap: 8px; }
.navigator .keuzeknop.gekozen { background: var(--kleur-primair); color: #fff; border-color: var(--kleur-primair); }
.navigator .nav-kaart { margin-top: 28px; padding: 24px; border-radius: var(--radius-kaart-klein); background: var(--kleur-vlak-warm); }
.navigator .nav-kaart h3 { margin-bottom: 8px; }
.navigator .nav-kaart .nav-checklist { margin: 12px 0 12px 20px; }
.navigator .nav-kaart .nav-checklist li { margin-bottom: 6px; }
.navigator .nav-bewijsgrens { margin-top: 20px; padding: 16px 20px; border-left: 3px solid var(--kleur-primair); background: var(--kleur-vlak-warm); }
.navigator.nav-js .nav-kaart, .navigator.nav-js .nav-bewijsgrens { display: none; }
.navigator.nav-js .nav-kaart.actief, .navigator.nav-js .nav-bewijsgrens.actief { display: block; }
.navigator .nadruk { outline: 2px solid var(--kleur-primair); outline-offset: 6px; border-radius: 4px; }

/* Homepageblokken bewijsstand en proces: zelfde kaartsysteem als /proces/,
   met eigen kop erboven en een tekstlink onder het grid */
.sectie--bewijsstand .content,
.sectie--stappen .content { padding-top: var(--ruimte-8); }
.sectie--bewijsstand .kaartgrid,
.sectie--stappen .kaartgrid { margin-bottom: 20px; }
.sectie--index .bronkaart { min-width: 0; background: var(--kleur-vlak-warm); }
/* De regelklem van de bronkaart mag hier niet: hij zou beschrijvingen verbergen */
.sectie--index .bronkaart p { display: block; overflow: visible; }

@media (min-width: 768px) {
  .sectie--aankondiging .balk > span:last-child { display: inline; }
  .sectie--feiten { margin: 16px; padding: var(--ruimte-10) 0; }
  .feiten { grid-template-columns: 1fr 1fr; }
  .variantrij { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1200px) {
  .sectie--producthero .content {
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    padding-top: var(--ruimte-10);
    padding-bottom: var(--ruimte-10);
  }
  .sectie--bezwaren .content { padding-top: var(--ruimte-10); padding-bottom: var(--ruimte-10); }
  .sectie--producten .kaartgrid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Bewegingsvoorkeur hims-laag ---------- */

@media (prefers-reduced-motion: reduce) {
  .marquee .rij.links, .marquee .rij.rechts { animation: none; }
  .knop, .tekstlink, .beeldkaart .overlay, .productkaart,
  .carrousel .pijl, .accordeon .acc-chevron, .sticky-cta { transition: none; }
}

/*
  ---------- Basislaag ----------
  Wat elke pagina nodig heeft buiten de componenten om. Het fase 1-systeem is
  hier verwijderd: sinds alle 24 routes op het hims-systeem staan droeg het
  niets meer. Alleen de regels die het ook voor het nieuwe systeem deed, zijn
  hierheen overgenomen en op de hims-tokens gezet.
*/

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--vlak-pagina);
  color: var(--tekst-body);
  font-family: var(--font-familie);
  font-size: var(--body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
h1, h2, h3 { text-wrap: balance; }

:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: rgba(74, 121, 46, .18); }

/* Bovenliggend label boven een kop, en de metaregel eronder */
.eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
}

/* ---------- Skiplink ---------- */

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 2px;
  background: var(--kleur-vlak-bruin);
  color: var(--kleur-tekst-wit);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Bewegingsvoorkeur, algemeen ---------- */

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

/* ---------- Gewichtsverliescalculator, fase B, 10 augustus 2026 ---------- */
/*
  Lijnkleuren zijn bestaande tokens, gekozen op contrast tegen warm creme
  (#F5F0E8), gemeten en niet geschat. Grafieklijnen zijn geen tekst en moeten
  3:1 halen; deze drie halen ook de tekstgrens van 4,5:1, zodat dezelfde kleur
  in een label mag worden hergebruikt.
    retatrutide  #4A792E  4,55:1
    tirzepatide  #1C3E56  9,88:1
    semaglutide  #5C4133  8,19:1
  Geen stoplichtkleuren: de drie staan naast elkaar als drie bronnen, niet als
  goed, matig en slecht.
*/

.calc-grens {
  margin-top: 12px;
  color: var(--kleur-tekst-zacht);
  font-size: var(--klein);
  line-height: 1.5;
}

.cluster-nav {
  margin-top: 24px;
  padding: 14px 0 2px;
  border-top: 1px solid rgba(69, 52, 33, .14);
}

.cluster-label {
  display: block;
  margin-bottom: 10px;
  color: var(--kleur-tekst-zacht);
  font-size: var(--klein);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cluster-links {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.cluster-links::-webkit-scrollbar { display: none; }
.cluster-links a {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(69, 52, 33, .18);
  border-radius: 999px;
  color: var(--kleur-tekst-zacht);
  font-size: var(--knop-klein);
  font-weight: 500;
  text-decoration: none;
}
.cluster-links a:hover,
.cluster-links a[aria-current="page"] {
  border-color: var(--kleur-vlak-bruin);
  background: var(--kleur-vlak-bruin);
  color: var(--kleur-tekst-wit);
}

.calc-stappen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.calc-stappen li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: var(--kleur-tekst-zacht);
  font-size: 11px;
  line-height: 1.25;
}
.calc-stappen li span {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--kleur-balk-amber-licht);
  color: var(--kleur-amber-tekst);
  font-size: 11px;
  font-weight: 600;
}
.calc-stappen strong { color: var(--kleur-tekst); font-weight: 500; }

.calc-invoer {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid rgba(69, 52, 33, 0.16);
  border-radius: var(--radius-kaart-klein);
  background: var(--kleur-basis);
  box-shadow: 0 18px 44px rgba(69, 52, 33, .06);
}

.calc-velden { display: grid; gap: 16px; }
.calc-invoer .invoer input { width: 100%; }

.calc-periodes {
  margin: 20px 0 0;
  padding: 0;
  border: 0;
}

.calc-periodes legend {
  padding: 0;
  font-size: var(--klein);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
}

.calc-perioderij {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.calc-periode,
.calc-scenario {
  padding: 9px 14px;
  border: 1px solid rgba(69, 52, 33, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--kleur-tekst);
  font-family: inherit;
  font-size: var(--knop-klein);
  font-weight: var(--gewicht-knop);
  cursor: pointer;
}

.calc-periode[aria-pressed="true"],
.calc-scenario[aria-pressed="true"] {
  border-color: var(--kleur-primair);
  background: var(--kleur-primair);
  color: var(--kleur-primair-tekst);
}

.calc-periode:focus-visible,
.calc-scenario:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.invoer--kort { margin-top: 14px; max-width: 220px; }

.calc-melding {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--kleur-terracotta-vol);
  background: var(--kleur-vlak-warm);
  font-size: var(--klein);
}

.calc-invoer .knop { margin-top: 18px; }

.calc-privacy {
  margin: 12px 0 0;
  color: var(--kleur-tekst-zacht);
  font-size: var(--klein);
}

.calc-resultaat { background: var(--kleur-vlak-warm); }
.calc-uitgangspunt { margin-top: 4px; color: var(--kleur-tekst-zacht); }

.calc-kaarten {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
}

.calc-kaart {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border: 1px solid rgba(69, 52, 33, 0.16);
  border-radius: var(--radius-kaart-klein);
  background: var(--kleur-basis);
}

.calc-kaart--hoofd {
  border: 2px solid var(--kleur-primair);
  padding: 22px 18px;
}

.calc-kaart-naam { font-size: var(--kaart-titel); font-weight: var(--gewicht-h3); }
.calc-kaart-meta { color: var(--kleur-tekst-zacht); font-size: var(--klein); line-height: 1.4; }
.calc-kaart-pct { margin-top: 8px; font-size: 34px; font-weight: var(--gewicht-h2); line-height: 1.05; }
.calc-kaart--hoofd .calc-kaart-pct { font-size: 44px; color: var(--kleur-primair); }
.calc-kaart-kg { font-size: 18px; }
.calc-kaart-eind { color: var(--kleur-tekst-zacht); font-size: var(--klein); }

.calc-kaart-vries {
  margin-top: 6px;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--kleur-vlak-warm);
  color: var(--kleur-tekst-zacht);
  font-size: var(--klein);
}

.calc-crosstrial,
.calc-aanbodgrens {
  margin-top: 18px;
  padding-left: 12px;
  border-left: 2px solid rgba(69, 52, 33, 0.24);
  color: var(--kleur-tekst-zacht);
  font-size: var(--klein);
  line-height: 1.5;
}

.calc-vergelijking { margin-top: 16px; font-weight: 500; }
.calc-bmi { margin-top: 6px; color: var(--kleur-tekst-zacht); font-size: var(--klein); }

.calc-grafiek {
  margin: 24px 0 0;
  padding: 16px;
  border: 1px solid rgba(69, 52, 33, .12);
  border-radius: var(--radius-kaart-klein);
  background: var(--kleur-basis);
}
.calc-grafiek svg { width: 100%; height: auto; display: block; }
.calc-grafiek figcaption {
  margin-top: 10px;
  color: var(--kleur-tekst-zacht);
  font-size: var(--klein);
  line-height: 1.5;
}

.calc-raster { stroke: rgba(69, 52, 33, 0.18); stroke-width: 1; }
.calc-aslabel { fill: var(--kleur-tekst-zacht); font-size: 11px; font-family: var(--font-familie); }
.calc-lijn { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.calc-lijn--retatrutide { stroke: var(--kleur-primair); stroke-width: 3.5; }
.calc-lijn--tirzepatide { stroke: var(--kleur-vlak-navy); }
.calc-lijn--semaglutide { stroke: var(--kleur-terracotta-vol); }

.calc-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.calc-stip { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.calc-stip--retatrutide { background: var(--kleur-primair); }
.calc-stip--tirzepatide { background: var(--kleur-vlak-navy); }
.calc-stip--semaglutide { background: var(--kleur-terracotta-vol); }

.calc-scenario-keuze { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
.calc-scenario-label {
  width: 100%;
  font-size: var(--klein);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
}
.calc-scenario-uitleg { width: 100%; color: var(--kleur-tekst-zacht); font-size: var(--klein); line-height: 1.5; }

.calc-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(69, 52, 33, .14);
}
.calc-share .knop { margin: 0; }
.calc-share [role="status"] { color: var(--kleur-tekst-zacht); font-size: var(--klein); }

.calc-aanbod {
  margin: 12px;
  border-radius: var(--radius-kaart);
  background: var(--kleur-vlak-bruin);
  color: var(--kleur-tekst-wit);
}
.calc-aanbod .content { padding-top: var(--ruimte-8); padding-bottom: var(--ruimte-8); }
.calc-aanbod .eyebrow { color: var(--kleur-tekst-wit-zacht); }
.calc-aanbod .sectiekop p:not(.eyebrow) { color: var(--kleur-tekst-wit-zacht); }
.calc-conversiegrid { display: grid; gap: 14px; }
.calc-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-kaart-klein);
  background: rgba(255, 255, 255, .06);
}
.calc-plan--primair {
  border-color: var(--kleur-accent-donker);
  background: rgba(119, 181, 80, .11);
}
.calc-plan-label {
  color: var(--kleur-tekst-wit-zacht);
  font-size: var(--klein);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.calc-plan h3 { font-size: 24px; }
.calc-plan-prijs { color: var(--kleur-accent-donker); font-size: 34px; font-weight: 425; line-height: 1; }
.calc-plan p { margin: 0 0 4px; color: var(--kleur-tekst-wit-zacht); }
.calc-plan .knop--secundair { border-color: rgba(255,255,255,.5); color: var(--kleur-tekst-wit); }
.calc-telegramroute {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: var(--kleur-tekst-wit-zacht);
  font-size: 13px;
}
.calc-telegramroute strong { color: var(--kleur-tekst-wit); }
.calc-aanbod .calc-aanbodgrens { border-color: rgba(255,255,255,.25); color: var(--kleur-tekst-wit-zacht); }
.calc-aanbod .tekstlink { color: var(--kleur-tekst-wit); }

.vgl-kern {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: var(--radius-kaart-klein);
  background: var(--kleur-balk-amber-licht);
  color: var(--kleur-amber-tekst);
}
.vgl-kern span { font-size: var(--klein); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.vgl-kern strong { font-size: 22px; font-weight: 500; line-height: 1.15; }
.vgl-kern p { margin: 0; max-width: 66ch; }

.vgl-samenvatting {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid rgba(69, 52, 33, .16);
  border-radius: var(--radius-kaart-klein);
  background: var(--kleur-basis);
  box-shadow: 0 18px 44px rgba(69, 52, 33, .05);
}
.vgl-samenvatting-kop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vgl-samenvatting .eyebrow { margin: 0 0 5px; }
.vgl-samenvatting h2 { margin: 0; font-size: clamp(26px, 5vw, 38px); }
.vgl-direct {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--kleur-balk-amber-licht);
  color: var(--kleur-amber-tekst);
  font-size: 12px;
  font-weight: 600;
}
.vgl-direct--ja { background: rgba(74, 121, 46, .12); color: var(--kleur-primair); }
.vgl-samenvatting .tabel-scroll { margin-top: 18px; }
.vgl-tabel { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 13px; line-height: 1.45; }
.vgl-tabel caption { padding: 14px; text-align: left; font-weight: 500; }
.vgl-tabel th, .vgl-tabel td { padding: 11px 14px; border-top: 1px solid rgba(69, 52, 33, .12); text-align: left; vertical-align: top; }
.vgl-tabel thead th { background: var(--kleur-vlak-warm); }
.vgl-tabel tbody th { width: 24%; font-weight: 600; }
.vgl-samenvatting .calc-crosstrial { margin-bottom: 0; }

@media (min-width: 720px) {
  .calc-stappen { gap: 12px; }
  .calc-stappen li { flex-direction: row; align-items: center; gap: 10px; font-size: 13px; }
  .calc-velden { grid-template-columns: 1fr 1fr; }
  .calc-kaarten { grid-template-columns: 1.25fr 1fr 1fr; align-items: start; }
  .calc-conversiegrid { grid-template-columns: 1.15fr .85fr; }
  .onderzoekshub-grid { grid-template-columns: 1.05fr .95fr; }
}

/*
  Sticky CTA op smalle schermen: de tekst mag krimpen en afbreken en de knop
  behoudt zijn maat, zodat een langere tekst de balk niet breder maakt dan het
  scherm. Zonder deze regel duwde de balk de hele pagina horizontaal open.
*/
.sticky-cta { flex-wrap: wrap; }
.sticky-cta > strong { min-width: 0; overflow-wrap: anywhere; }
.sticky-cta .knop { flex: 0 0 auto; }

/*
  De H1 van de calculator bevat een samenstelling van 25 letters. Op 375 px
  past die niet op een regel en duwde hij de hele pagina horizontaal open.
  Afbreken heeft de voorkeur; break-word is de garantie dat het nooit meer
  buiten het scherm valt.
*/
.calc-titel {
  hyphens: none;
  overflow-wrap: anywhere;
  font-size: clamp(42px, 12vw, 72px) !important;
}

/* ---------- Vergelijkings- en methodologiepagina's, fase C ---------- */

.vgl-lijst { margin: 12px 0 0; padding-left: 20px; line-height: 1.9; }
.vgl-lijst li { margin: 0; }

.inhoudsopgave {
  margin: 0 0 34px;
  padding: 20px;
  border-left: 3px solid var(--kleur-primair);
  background: var(--kleur-vlak-warm);
}
.inhoudsopgave strong { display: block; margin-bottom: 10px; }
.inhoudsopgave ol { display: grid; gap: 7px; margin: 0; padding-left: 20px; }
.inhoudsopgave a { color: inherit; text-underline-offset: 3px; }
.vgl-uniek section { scroll-margin-top: 150px; }
@media (min-width: 1200px) {
  .vgl-uniek section { scroll-margin-top: 96px; }
}

.onderzoekshub-grid { display: grid; gap: 14px; margin-top: 28px; }
.onderzoekshub-hoofd,
.onderzoekshub-links a {
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.onderzoekshub-hoofd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  padding: 26px;
  border-radius: var(--radius-kaart-klein);
  background: var(--kleur-vlak-bruin);
  color: var(--kleur-tekst-wit);
  box-shadow: 0 22px 52px rgba(69, 52, 33, .12);
}
.onderzoekshub-hoofd > span { color: var(--kleur-accent-donker); font-size: var(--klein); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.onderzoekshub-hoofd strong { margin-top: 12px; font-size: clamp(25px, 5vw, 38px); font-weight: 500; line-height: 1.05; }
.onderzoekshub-hoofd p { margin: 16px 0 22px; color: var(--kleur-tekst-wit-zacht); }
.onderzoekshub-hoofd u { margin-top: auto; font-weight: 600; text-underline-offset: 4px; }
.onderzoekshub-links { display: grid; gap: 10px; }
.onderzoekshub-links a { display: grid; gap: 5px; padding: 18px 20px; border: 1px solid rgba(69, 52, 33, .16); border-radius: var(--radius-kaart-klein); background: var(--kleur-basis); color: var(--kleur-tekst); }
.onderzoekshub-links strong { font-size: 17px; font-weight: 550; }
.onderzoekshub-links span { color: var(--kleur-tekst-zacht); font-size: 13px; line-height: 1.45; }
.onderzoekshub-hoofd:hover,
.onderzoekshub-links a:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(69, 52, 33, .1); }
.onderzoekshub-hoofd:focus-visible,
.onderzoekshub-links a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.onderzoekshub-methodiek { margin: 18px 0 0; }
.onderzoekshub--compact { padding-top: var(--ruimte-6); padding-bottom: var(--ruimte-6); }

.calc-formule {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--kleur-primair);
  background: var(--kleur-vlak-warm);
  overflow-x: auto;
}
.calc-formule code { font-size: 13px; white-space: nowrap; }

/* ---------- Abonnementsfunnel, 10 augustus 2026 ---------- */

.abonnement-hero-grid { display: grid; gap: 28px; }
.abonnement-hero-copy .acties { margin-top: 28px; }
.abonnement-titel { font-size: clamp(44px, 12vw, 84px) !important; overflow-wrap: break-word; }
.abonnement-samenvatting {
  align-self: start;
  padding: 24px;
  border-radius: var(--radius-kaart);
  background: var(--kleur-vlak-bruin);
  color: var(--kleur-tekst-wit);
  box-shadow: 0 24px 60px rgba(69, 52, 33, .16);
}
.abonnement-label {
  display: block;
  color: var(--kleur-tekst-wit-zacht);
  font-size: var(--klein);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.abonnement-prijs {
  display: block;
  margin: 12px 0 22px;
  color: var(--kleur-accent-donker);
  font-size: clamp(34px, 10vw, 52px);
  font-weight: 425;
  line-height: 1;
}
.abonnement-samenvatting dl { margin: 0; }
.abonnement-samenvatting dl div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.abonnement-samenvatting dt { color: var(--kleur-tekst-wit-zacht); }
.abonnement-samenvatting dd { margin: 0; text-align: right; font-weight: 500; }

@media (min-width: 900px) {
  .abonnement-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); align-items: center; }
}