/* ============================================================
   Happisongs — huisstijl
   Bron: Happibox Design System (tokens/) + brandguide hoofdstuk 14 "happisongs".
   Regel uit §14: de typografie, knoppen, prijscirkel en specificaties blijven
   Happibox; de themakleur zit in het beeldvlak. Daarom: paginachroom in
   merkblauw/oranje, themakleuren alleen in beeldvlakken, motieven en tegels.
   ============================================================ */

/* ---------- tokens: kleur ---------- */
:root {
  --primary: #7b92fc;
  --primary-dark: #4c6bf8;
  --primary-light: #f1f6fd;
  --secondary: #f8922e;
  --secondary-light: #fcead6;
  --purple: #8b549f;

  --almost-black: #2b2b2b;
  --grey: #626262;
  --medium-grey: #afafaf;
  --light-grey: #e8e8e8;
  --almost-less-white: #f8f8f8;
  --hard-white: #ffffff;

  --success: #19751d;
  --success-light: #ecffe9;
  --error: #a00707;
  --error-light: #ffe9e9;

  --line: rgba(0, 0, 0, .1);
  --line-strong: rgba(0, 0, 0, .2);
  --scrim-menu: rgba(43, 43, 43, .9);

  /* ---------- tokens: Happisongs-palet (tokens/happisongs.css) ---------- */
  --hs-navy: #1e3a5f;
  --hs-cream: #f7f0cd;
  --hs-sun: #f5c542;
  --hs-algemeen: #f0a848;
  --hs-indigo: #4a4878;
  --hs-zorg: #5fc0d8;
  --hs-feest: #f07830;
  --hs-zomer: #f06048;
  --hs-zomer-zee: #48a8c0;
  --hs-eindejaar: #183048;
  --hs-motif-on-dark: rgba(247, 240, 205, .18);
  --hs-motif-on-light: rgba(30, 58, 95, .14);

  /* actief thema: gevuld door js/thema.js, algemeen als vangnet */
  --grond: var(--hs-algemeen);
  --grond-2: var(--hs-indigo);
  --grond-ink: var(--hs-navy);
  --motif: var(--hs-motif-on-light);

  /* ---------- tokens: type ---------- */
  --font-display: "Comfortaa", "Trebuchet MS", sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  /* ---------- tokens: maat ---------- */
  --w-content: 1200px;
  --w-content-smaller: 810px;
  --w-small: 580px;
  --h-top-header: 40px;
  --h-header: 90px;

  --radius-card: 5px;
  --radius-panel: 10px;
  --radius-button: 25px;
  --radius-pill: 100px;
  --radius-tile: 50px;

  --shadow-card: 0 25px 50px rgba(0, 0, 0, .05);
  --shadow-dropdown: 0 5px 10px rgba(0, 0, 0, .15);
  --glow-hero: 0 0 150px rgba(255, 255, 255, .7);

  --dur-short: .2s;
  --dur-default: .3s;
  --dur-long: .5s;
  --section-y: 100px;
}

/* ---------- icomoon: de enige iconenset ---------- */
@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
  font-family: "icomoon" !important;
  font-style: normal; font-weight: normal; font-variant: normal;
  text-transform: none; line-height: 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.icon-arrow-down:before { content: "\e900"; }
.icon-arrow-left:before { content: "\e901"; }
.icon-arrow-right:before { content: "\e902"; }
.icon-arrow-up:before { content: "\e903"; }
.icon-check:before { content: "\e904"; }
.icon-chevron-down:before { content: "\e905"; }
.icon-chevron-left:before { content: "\e906"; }
.icon-chevron-right:before { content: "\e907"; }
.icon-linkedin:before { content: "\e90a"; }
.icon-mail:before { content: "\e90b"; }
.icon-phone:before { content: "\e90c"; }
.icon-play:before { content: "\e90e"; }
.icon-whatsapp:before { content: "\e910"; }

/* ---------- basis ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--almost-less-white);
  color: var(--grey);
  font: 500 14px/24px var(--font-body);
  -webkit-font-smoothing: antialiased;
}
/* width/height staan als attribuut op elke <img> zodat de browser de ruimte
   al reserveert (geen verschuiving na een anker-sprong). height:auto houdt de
   verhouding kloppend bij het schalen. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--secondary); text-decoration: none; transition: color var(--dur-default) ease; }
a:hover { color: var(--primary); }
p { margin: 0 0 24px; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--almost-black); }
/* anker-sprongen: precies onder de plakkende header (90px); de eigen
   sectiepadding zorgt voor de lucht eronder */
[id] { scroll-margin-top: var(--h-header); }
@media (min-width: 769px) {
  /* header plus themabalk; js/thema.js meet de balk op en zet --h-themabalk */
  [id] { scroll-margin-top: calc(var(--h-header) + var(--h-themabalk, 76px)); }
}

/* titels: Comfortaa, kleine letters, merkblauw */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.3px;
  text-transform: lowercase;
  color: var(--primary);
  margin: 0 0 20px;
}
h1 { font-size: 44px; line-height: 50px; }
h2 { font-size: 36px; line-height: 46px; }
h3 { font-size: 20px; line-height: 28px; }
h4 { font-size: 16px; line-height: 24px; }

.wrap { width: 100%; max-width: var(--w-content); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: calc(var(--w-content-smaller) + 40px); }
section.blok { padding: var(--section-y) 0; }
section.blok.tint { background: var(--primary-light); }
section.blok.wit { background: var(--hard-white); }

.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--hard-white); color: var(--primary-dark);
  padding: 10px 20px; border-radius: var(--radius-card); font-weight: 600;
}
.skiplink:focus { left: 10px; top: 10px; }

/* ---------- eyebrow / section intro ---------- */
.eyebrow {
  font: 600 14px/24px var(--font-body);
  color: var(--grey); opacity: .4; margin-bottom: 10px;
}
.lead { font-size: 16px; line-height: 28px; }
.note { font-size: 12px; line-height: 20px; color: var(--grey); }
.center { text-align: center; }
.center .intro { max-width: var(--w-content-smaller); margin: 0 auto 50px; }

/* ---------- knoppen: pill, inverteren op hover ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/20px var(--font-body);
  padding: 13px 30px; border-radius: var(--radius-button);
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: all var(--dur-default) ease;
}
.btn-primary { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.btn-primary:hover { background: transparent; color: var(--secondary); }
.btn-secondary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-secondary:hover { background: transparent; color: var(--primary); }
.btn-ghost { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-ghost:hover { background: var(--primary); color: #fff; }
.btn-op-kleur { background: #fff; border-color: #fff; color: var(--primary-dark); }
.btn-op-kleur:hover { background: transparent; border-color: #fff; color: #fff; }
.btn[disabled] { opacity: .3; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--secondary); color: #fff; }
.btn-rij { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.textlink { font-weight: 600; }
.textlink i { font-size: 10px; transition: transform var(--dur-default) ease; display: inline-block; }
.textlink:hover i { transform: translateX(5px); }

/* ---------- header ---------- */
.topbalk {
  background: #fff; height: var(--h-top-header);
  display: flex; align-items: center; border-bottom: 1px solid var(--line);
}
.topbalk .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbalk .usp { font: 600 12px/16px var(--font-body); color: var(--grey); display: flex; gap: 20px; }
.topbalk .usp i { color: var(--secondary); font-size: 10px; margin-right: 6px; }
.topbalk .snel { display: flex; gap: 16px; font: 600 12px/16px var(--font-body); }
.topbalk .snel a { color: var(--grey); }
.topbalk .snel a:hover { opacity: .6; color: var(--grey); }

.kop { position: sticky; top: 0; z-index: 90; background: #fff; box-shadow: 0 1px 0 var(--line); }
.kop .balk { height: var(--h-header); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.merk { display: flex; align-items: center; gap: 10px; }
.merk img { width: 170px; }
.merk .powered { font: 600 10px/12px var(--font-body); color: var(--medium-grey); }
nav.hoofd { display: flex; align-items: center; gap: 20px; }
nav.hoofd a {
  font: 600 14px/20px var(--font-body); color: var(--almost-black);
  white-space: nowrap;
  transition: opacity var(--dur-default) ease;
}
nav.hoofd a:hover { opacity: .6; color: var(--almost-black); }
nav.hoofd a[aria-current="page"] { color: var(--secondary); }
nav.hoofd a[aria-current="page"]:hover { color: var(--secondary); }
#mobielmenu a[aria-current="page"] { color: var(--secondary); }
.menuknop {
  display: none; background: none; border: 0; cursor: pointer;
  font: 600 14px/20px var(--font-body); color: var(--almost-black); gap: 8px; align-items: center;
}
.menuknop i { font-size: 8px; }
#mobielmenu { display: none; border-top: 1px solid var(--line); background: #fff; }
#mobielmenu.open { display: block; }
#mobielmenu a {
  display: block; padding: 14px 20px; border-bottom: 1px solid var(--line);
  font: 600 14px/20px var(--font-body); color: var(--almost-black);
}

/* ---------- themabalk: de momentkeuze ----------
   Lichtblauwe band zodat de keuze zich losmaakt van de witte header.
   Actieve pil krijgt navy vulling met crème inkt (contrast klopt op alle vijf
   momenten); de themakleur zelf zit in de stip. */
#themabalk {
  background: var(--primary-light);
  border-bottom: 1px solid var(--line);
}
/* Vanaf tablet blijft de momentkeuze onder de header staan, ook bij scrollen.
   Op mobiel niet: daar zou de halve pagina uit chroom bestaan. */
@media (min-width: 769px) {
  #themabalk { position: sticky; top: var(--h-header); z-index: 80; }
}
.themabalk-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 18px 0;
}
.thema-uitleg { display: flex; flex-direction: column; }
.thema-titel {
  font: 600 16px/22px var(--font-display); letter-spacing: -.3px;
  text-transform: lowercase; color: var(--primary-dark);
}
.thema-sub { font: 500 12px/18px var(--font-body); color: var(--grey); }
.thema-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.thema-knop {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/20px var(--font-body); cursor: pointer;
  padding: 9px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: #fff; color: var(--hs-navy);
  transition: all var(--dur-default) ease;
}
.thema-knop .stip {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.thema-knop .vinkje { font-size: 9px; width: 0; overflow: hidden; transition: width var(--dur-short) ease; }
.thema-knop:hover { border-color: var(--hs-navy); }
.thema-knop.actief {
  background: var(--hs-navy); border-color: var(--hs-navy); color: var(--hs-cream);
}
.thema-knop.actief .stip { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 0 0 2px rgba(247, 240, 205, .5); }
.thema-knop.actief .vinkje { width: 9px; }
@media (max-width: 768px) {
  .themabalk-inner { gap: 12px; padding: 14px 0; }
  .thema-knoppen { width: 100%; }
  .thema-knop { flex: 1 1 auto; justify-content: center; padding: 10px 14px; }
}

/* ---------- beeldvlak met themakleur ----------
   Brandguide §14: het beeldvlak mag de themakleur krijgen, kop en prijscirkel
   blijven Happibox. Vier soorten vlak, gekozen naar wat erin staat:

   .beeldvlak            themagrond met witte glow      -> uitsneden van de doosjes
   .beeldvlak.bubbel     themagrond met crème bubbel    -> variant, niet in gebruik
   .beeldvlak.tint       merkblauwe tint, geen themakleur -> producten op wit (MiniGo)
   .beeldvlak.vullend    de foto vult het hele vlak     -> sfeer- en pakketfoto's

   De glow is de hero-glow van happibox.nl: een witte radiale gloed achter het
   product, een van de twee verlopen die de brandguide toestaat. Sterkte per
   moment via --glow-alpha, want op nachtblauw draagt hij anders dan op amber. */
.beeldvlak {
  position: relative; overflow: hidden;
  background-color: var(--grond);
  border-radius: var(--radius-tile);
  display: flex; align-items: center; justify-content: center;
  padding: 30px;
}
.beeldvlak:before {
  content: ""; position: absolute; z-index: 1;
  width: 82%; aspect-ratio: 1; border-radius: 50%;
  left: 50%; top: 52%; transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 255, 255, var(--glow-alpha, .5)) 0 34%,
    rgba(255, 255, 255, calc(var(--glow-alpha, .5) * .45)) 56%,
    rgba(255, 255, 255, 0) 74%);
}
.beeldvlak > img { position: relative; z-index: 2; }
.beeldvlak.plat { border-radius: var(--radius-panel); }

/* variant: crème bubbel in plaats van de glow */
.beeldvlak.bubbel:before {
  width: 74%; background: var(--hs-cream);
}

/* tint: voor producten die op wit zijn gefotografeerd, dus geen themakleur.
   De lichtblauwe Happibox-tint, niet crème (keuze Rogér, 20 augustus). */
.beeldvlak.tint { background-color: var(--primary-light); }
.beeldvlak.tint:before { display: none; }

/* vullend: de foto is zelf het vlak. Geen vaste verhouding en geen cover, want
   deze foto's zijn vierkant of staand en dan zou er een stuk product afvallen.
   De foto vult de breedte en bepaalt zelf de hoogte. */
.beeldvlak.vullend { padding: 0; }
.beeldvlak.vullend:before { display: none; }
.beeldvlak.vullend > img { width: 100%; height: auto; display: block; }

/* hero */
.hero { padding: 60px 0 var(--section-y); }
.hero .kolommen { display: flex; align-items: center; gap: 50px; }
.hero .tekst { flex: 1 1 46%; }
.hero .beeld { flex: 1 1 54%; }
.hero h1 { font-size: clamp(30px, 3.8vw, 56px); line-height: 1.07; }
.hero .lead { max-width: 520px; }
.hero .btn-rij { margin: 30px 0 20px; }
.hero .voorwaarden { font: 600 12px/20px var(--font-body); color: var(--grey); opacity: .6; }
.hero .beeldvlak { padding: 40px; min-height: 380px; }
.hero .beeldvlak img.doos { width: min(76%, 450px); }
@media (max-width: 560px) {
  .hero .beeldvlak { padding: 24px; min-height: 280px; }
}

/* ---------- samplebox-beeld ----------
   Het doosje van het gekozen moment met een zegel erover, zodat meteen duidelijk
   is dat dit het voorbeelddoosje is. Zegel is de oranje cirkel uit de vormentaal,
   met de draaiende stippellijn eromheen die de brandguide voor kleine
   productbeelden voorschrijft. */
.samplevlak { min-height: 340px; }
.samplevlak > img { width: min(70%, 380px); }
.samplezegel {
  position: absolute; z-index: 3; right: 6%; bottom: 8%;
  width: 116px; height: 116px; display: grid; place-items: center;
}
/* Stippellijn in de inkt van de grond: navy op de lichte gronden, crème op de
   donkere. Zegel zelf is wit met oranje inkt, want brandguide §14: de oranje
   cirkel landt nooit op het oranje of amber vlak. */
.samplezegel:before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; border: 2px dashed var(--grond-ink);
  opacity: .7;
  animation: spin var(--spin-duration, 30s) linear infinite;
}
.samplezegel .binnen {
  width: 92px; height: 92px; border-radius: 50%;
  background: #fff; color: var(--secondary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; line-height: 1.1;
}
.samplezegel .klein { font: 600 10px/14px var(--font-body); letter-spacing: .4px; color: var(--grey); }
.samplezegel .groot {
  font: 600 15px/18px var(--font-display); letter-spacing: -.3px; text-transform: lowercase;
  color: var(--secondary);
}
@media (max-width: 768px) {
  .samplevlak { min-height: 260px; }
  .samplezegel { width: 96px; height: 96px; right: 4%; bottom: 6%; }
  .samplezegel .binnen { width: 76px; height: 76px; }
  .samplezegel .groot { font-size: 13px; }
}

/* ---------- kaarten ---------- */
.kaart {
  background: #fff; border-radius: var(--radius-card); padding: 30px;
}
.kaart.rand { border: 1px solid var(--line); }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* beeldvlak in een kaart: vaste hoogte zodat titels over een rij uitlijnen.
   Productfoto's staan op wit, dus hier geen themakleur maar de neutrale grond. */
.kaart .media {
  height: 200px; margin: -30px -30px 20px; padding: 20px;
  background: var(--primary-light);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  display: flex; align-items: center; justify-content: center;
}
.kaart .media img { max-height: 100%; width: auto; object-fit: contain; }
@media (max-width: 768px) {
  .kaart .media { height: 160px; margin: -20px -20px 20px; }
}

/* fotostrip: twee tegels naast elkaar onder een hoofdbeeld.
   contain in plaats van cover, zodat er niets van de foto wegvalt. */
.fotostrip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.fotostrip figure { margin: 0; }
.fotostrip .tegel {
  aspect-ratio: 1 / 1; background: var(--primary-light);
  border-radius: var(--radius-card); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.fotostrip .tegel img { width: 100%; height: 100%; object-fit: cover; }
.fotostrip figcaption { font: 500 12px/18px var(--font-body); color: var(--grey); margin-top: 6px; }

/* medaillon, dashed ring, stapnummer, prijscirkel: de vormentaal */
.medaillon {
  width: 82px; height: 82px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.medaillon.oranje { background: var(--secondary); }
.ring {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 10px; border-radius: 50%; border: 2px dashed var(--secondary);
  animation: spin 30s linear infinite;
}
.ring > * { animation: spin 30s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.stapnummer {
  width: 50px; height: 50px; border-radius: 50%; background: var(--primary);
  color: #fff; font: 700 16px/50px var(--font-body); text-align: center;
}
.prijscirkel {
  width: 100px; height: 100px; border-radius: 50%; background: var(--secondary);
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.prijscirkel .vanaf { font: 600 10px/12px var(--font-body); }
.prijscirkel .bedrag { font: 600 20px/24px var(--font-display); letter-spacing: -.3px; }

/* editiebalkje: markeert een optie die bij één moment hoort maar overal te zien is.
   Rood kader, want dit is een beperking en die moet opvallen.
   LET OP: deze regels staan ook inline in de <head> van elke pagina, zodat het
   balkje ook goed staat als css/style.css achterloopt. Bij wijzigen: beide bijwerken. */
.editie {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--error-light); color: var(--error);
  border: 1px solid var(--error);
  font: 700 12px/16px var(--font-body);
  padding: 6px 12px; border-radius: var(--radius-pill);
  margin: 0 0 14px;
}
.editie:before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--error); flex: 0 0 8px;
}
.check .sub { display: block; }
.check .editie { margin: 8px 0 0; }

/* Vangnet voor een productfoto die nog op wit staat: multiply laat het wit
   opgaan in de lichte grond, zodat er nooit een wit kader in een kader ontstaat.
   Voorkeur blijft een echte uitsnede, zie tools/uitsnede.py. */
.op-wit { mix-blend-mode: multiply; }

/* usp's en lijsten */
ul.usp { list-style: none; margin: 0; padding: 0; }
ul.usp li { position: relative; padding-left: 26px; margin-bottom: 10px; font-weight: 600; }
ul.usp li:before {
  content: "\e904"; font-family: "icomoon"; color: var(--secondary);
  font-size: 10px; position: absolute; left: 0; top: 1px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  font: 600 12px/16px var(--font-body); color: var(--primary-dark);
  background: var(--hard-white); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 8px 16px;
}

/* stappen: cirkel en titel op één regel, tekst eronder uitgelijnd op de titel */
.stap { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 30px; }
.stap:last-child { margin-bottom: 0; }
.stap .stapnummer { flex: 0 0 50px; }
.stap > div:last-child { flex: 1 1 auto; min-width: 0; }
.stap h3 {
  margin: 0 0 8px; min-height: 50px;
  display: flex; align-items: center;
}
.stap p { margin: 0; }

/* speelkaartje */
.kaartje { border-radius: 16px; overflow: hidden; }
.kaartje.antwoord {
  background: #fff; border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; aspect-ratio: 1;
}
.kaartje.antwoord .artiest { font: 600 14px/20px var(--font-body); color: var(--almost-black); }
.kaartje.antwoord .jaar {
  font: 600 44px/50px var(--font-display); letter-spacing: -.3px; color: var(--primary-dark);
}
.kaartje.antwoord .titel { font: 500 14px/20px var(--font-body); color: var(--grey); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 2px solid var(--line); }
.faq-vraag {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  padding: 22px 40px 22px 0; position: relative;
  font: 600 16px/24px var(--font-display); letter-spacing: -.3px;
  text-transform: lowercase; color: var(--primary);
}
.faq-vraag i {
  position: absolute; right: 6px; top: 26px; font-size: 6px; color: var(--secondary);
  transition: transform var(--dur-default) ease;
}
.faq-item[data-open="true"] .faq-vraag i { transform: rotate(180deg); }
.faq-antwoord { display: none; padding: 0 0 22px; }
.faq-item[data-open="true"] .faq-antwoord { display: block; }

/* ---------- tabel ---------- */
table.staffel { width: 100%; border-collapse: collapse; }
table.staffel th {
  text-align: left; font: 600 12px/16px var(--font-body); color: var(--grey);
  opacity: .6; padding: 0 0 12px; border-bottom: 1px solid var(--line);
}
table.staffel td { padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
table.staffel td.prijs { text-align: right; color: var(--secondary); }

/* ---------- formulieren ---------- */
.veld { margin-bottom: 20px; }
.veld label {
  display: block; font: 600 12px/16px var(--font-body); color: var(--almost-black);
  margin-bottom: 6px;
}
.veld label .optioneel { color: var(--medium-grey); font-weight: 400; }
.veld input, .veld select, .veld textarea {
  width: 100%; font: 500 14px/24px var(--font-body); color: var(--almost-black);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 11px 14px; transition: border-color var(--dur-default) ease;
}
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none; border-color: var(--primary);
}
.veld input.fout, .veld select.fout { border-color: var(--error); }
.veld .hint { font: 400 12px/18px var(--font-body); color: var(--medium-grey); margin-top: 6px; }
.rij-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hidden { display: none !important; }
.melding {
  display: none; border-radius: var(--radius-card); padding: 14px 16px;
  font: 500 12px/20px var(--font-body); margin-bottom: 20px;
}
.melding.zichtbaar { display: block; }
.melding.let-op { background: var(--secondary-light); color: var(--almost-black); }
.succes {
  display: none; background: var(--success-light); color: var(--success);
  border-radius: var(--radius-card); padding: 30px;
}
.succes.zichtbaar { display: block; }
.succes h3 { color: var(--success); }
.check {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px;
  font: 500 14px/24px var(--font-body);
}
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--secondary); flex: 0 0 20px; }
.check .titel { font-weight: 600; color: var(--almost-black); display: block; }
.check .sub { font-size: 12px; line-height: 18px; color: var(--grey); }

/* ---------- footer ---------- */
footer.voet { background: var(--almost-black); color: #fff; padding: 60px 0 30px; }
footer.voet a { color: #fff; }
footer.voet a:hover { color: #fff; opacity: .6; }
footer.voet img.logo { width: 170px; filter: brightness(0) invert(1); margin-bottom: 16px; }
footer.voet h4 { color: #fff; }
footer.voet .kolommen { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
footer.voet ul { list-style: none; margin: 0; padding: 0; }
footer.voet li { margin-bottom: 8px; font: 600 14px/24px var(--font-body); }
footer.voet .onder {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .25);
  font: 400 12px/20px var(--font-body); opacity: .85;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
footer.voet p { color: rgba(255, 255, 255, .85); }

/* ---------- mobiele sticky CTA ----------
   Alleen op mobiel, want daar staat de knop in de header niet meer in beeld zodra
   je scrolt. Verschijnt pas voorbij de hero, zodat hij de eerste indruk niet
   overlapt. Op de samplebox-pagina staat hij niet: daar ben je al. */
.mobiele-cta { display: none; }
@media (max-width: 768px) {
  .mobiele-cta {
    display: block; position: fixed; z-index: 85;
    left: 0; right: 0; bottom: 0;
    background: #fff; border-top: 1px solid var(--line);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform var(--dur-default) ease;
  }
  .mobiele-cta.zichtbaar { transform: none; }
  .mobiele-cta .btn { width: 100%; }
  body.heeft-mobiele-cta { padding-bottom: 84px; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mobiele-cta { transition: none; }
}

/* ---------- cookiebalk ----------
   Verschijnt alleen zolang er geen keuze is gemaakt. Ligt boven de mobiele CTA
   (z-index 90 tegen 85) en duwt die weg, zodat de knoppen elkaar niet overlappen.
   Vormgeving als kaart: wit, 5px, geen schaduw, pill-knoppen. */
.cookiebalk {
  position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
  background: #fff; border-top: 1px solid var(--line);
  padding: 18px 0 calc(18px + env(safe-area-inset-bottom, 0px));
}
.cookiebalk-binnen {
  width: min(var(--w-content), calc(100% - 40px)); margin: 0 auto;
  display: flex; gap: 24px; align-items: center; justify-content: space-between;
}
.cookiebalk h2 {
  font-family: var(--font-display); font-size: 18px; line-height: 24px;
  color: var(--hs-navy); margin: 0 0 4px; text-transform: lowercase;
}
.cookiebalk p { margin: 0; font-size: 14px; line-height: 21px; color: var(--grey); max-width: 720px; }
.cookiebalk a { color: var(--primary-dark); }
.cookiebalk-knoppen { display: flex; gap: 10px; flex: 0 0 auto; }
.btn-licht { background: transparent; border-color: var(--line-strong); color: var(--almost-black); }
.btn-licht:hover { background: var(--light-grey); }
body.heeft-cookiebalk .mobiele-cta { display: none; }
@media (max-width: 768px) {
  .cookiebalk-binnen { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookiebalk-knoppen { flex-direction: column; }
  .cookiebalk-knoppen .btn { width: 100%; }
  .cookiebalk p { font-size: 13px; line-height: 20px; }
}
.voet .onder [data-cookielink] { color: inherit; text-decoration: underline; }

/* ---------- reveal: fade + 20px ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-long) ease, transform var(--dur-long) ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .15s; }
.reveal:nth-child(3) { transition-delay: .3s; }
.reveal:nth-child(4) { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ring, .ring > *, .samplezegel:before { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  nav.hoofd { display: none; }
  .menuknop { display: flex; }
}
@media (max-width: 1024px) {
  :root { --section-y: 60px; }
  h2 { font-size: 30px; line-height: 36px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h2 { font-size: 30px; line-height: 36px; }
}
@media (max-width: 900px) {
  .hero .kolommen { flex-direction: column; }
  .hero .tekst, .hero .beeld { flex: 1 1 auto; width: 100%; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer.voet .kolommen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .topbalk .usp { display: none; }
  .merk .powered { display: none; }
  .merk img { width: 150px; }
  h1 { font-size: 30px; line-height: 36px; }
  h2 { font-size: 24px; line-height: 32px; }
  h3 { font-size: 18px; line-height: 26px; }
  .grid-2, .grid-3, .grid-4, .rij-2 { grid-template-columns: minmax(0, 1fr); }
  .kaart { padding: 20px; }
  .beeldvlak { border-radius: 25px; }
  footer.voet .kolommen { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- calculator ---------- */
.check.uit { opacity: .4; }
.prijscirkel .bedrag { font-size: 18px; }
.staffel td.prijs strong { color: var(--secondary); }