/* Boekflow — gedeelde stylesheet
   Mobile-first. Geen framework, geen build-step. */

:root {
  /* ========== DEFINITIEF PALET - niet wijzigen zonder opdracht ==========
     Saliegroen-familie, luxe en rustig. Alles doorgemeten met de
     WCAG-formule; ratio's en afwegingen in STYLE.md. Kort:
       - saliegroen en goud HALEN HET NIET op licht (ook niet als UI),
         daarvoor bestaan de -knop/-tekst/-donker varianten;
       - dennengroen en goud-op-dennengroen halen het overal ruim. */
  --den: #1f3b2d;          /* hoofdkleur: hero, banden, slot, koppen op licht */
  --den-diep: #172c22;     /* footer, iets dieper dan de banden               */
  --salie: #7e947f;        /* middentoon; alleen als UI OP dennengroen        */
  --salie-knop: #4e6856;   /* knop/label op licht: 5.27 / 4.86 / 4.52         */
  --salie-licht: #d9e0d3;  /* het terugkerende lichte kleurvlak               */
  --ivoor: #f2eee5;        /* paginabodem                                     */
  --ivoor-vol: #eae5d9;    /* kaarten, iets voller dan de pagina              */
  --goud: #c4a265;         /* champagne: CTA, badge, logo-punt, accent op den */
  --goud-hover: #b79a61;   /* knop-hover; donkerder kan niet, zie STYLE.md */
  /* Twee tinten van dennengroen zelf, voor diepte in de donkere vlakken.
     Gemeten op de LICHTSTE stop, want die is de krapste: ivoor 10.11:1,
     label 7.47:1, salie als tweede kopregel 3.59:1 (eis 3:1 grote kop),
     goudknop 4.85:1. Met de champagne-gloed erover blijft salie 3.21:1. */
  --den-op: #223e2c;       /* lichtste stop */
  --den-onder: #172c21;    /* diepste stop */

  /* Alias: bestaande kaartregels gebruiken --wit als kaartvlak. */
  --wit: var(--ivoor-vol);

  --tekst-op-licht-kop: #1f3b2d;   /* koppen 10.53 ivoor / 9.70 vol / 9.03 salie-l */
  --tekst-op-licht: #33473b;       /* lopend  8.62 / 7.94 / 7.39                   */
  --tekst-op-goud: #1f3b2d;        /* tekst OP de goud-knop en badge   5.05:1      */
  --tekst-op-donker-kop: #f2eee5;  /* koppen op dennengroen           10.53:1      */
  --tekst-op-donker: #eae5d9;      /* lopende tekst op dennengroen     9.70:1      */
  --tekst-op-donker-label: #c6d2c2;/* labels op dennengroen            7.78:1      */

  /* Historische aliassen zodat bestaande regels blijven werken. */
  --petrol: var(--den);
  --zeegroen: var(--salie);
  --zeegroen-knop: var(--salie-knop);
  --zeegroen-tekst: var(--salie-knop);
  --mist: var(--salie-licht);
  --zand: var(--ivoor-vol);
  --pagina: var(--ivoor);
  --tekst-op-camel: var(--tekst-op-goud);
  --olijf-donker: var(--den);
  --olijf: var(--salie);
  --olijf-knop: var(--salie-knop);
  --olijf-tekst: var(--salie-knop);
  --grijsblauw: var(--salie);
  --grijsblauw-band: var(--salie-licht);
  --grijsblauw-donker: var(--salie-knop);
  --tekst-op-kaki: var(--tekst-op-goud);
  --flesgroen: var(--den);
  --middengroen: var(--salie-knop);
  --creme: var(--ivoor-vol);
  --salie-oud: var(--salie);
  --tekst-op-creme-kop: var(--tekst-op-licht-kop);
  --tekst-op-creme: var(--tekst-op-licht);
  --tekst-op-groen-kop: var(--tekst-op-donker-kop);
  --tekst-op-groen: var(--tekst-op-donker);
  --tekst-op-groen-label: var(--tekst-op-donker-label);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Typografische ritme-tokens. Bewust GEEN clamp(): het render-gereedschap
     kent het niet, en dan valt de hele regel weg en is de pagina niet meer
     te verifieren. Mobile-first met twee media-stappen doet hetzelfde werk. */
  --kop-spatie: -0.02em;
  --lucht: 60px;        /* verticale sectieruimte, groeit mee per breakpoint */
  --lucht-hero: 68px;

  --max-breed: 1120px;

  /* Een radius-schaal in plaats van losse waardes: 8/10/12/16/18 stond
     door elkaar. Klein = bedieningselementen, midden = knoppen en tegels,
     groot = kaarten. */
  --rond-klein: 10px;
  --rond: 12px;
  --rond-groot: 18px;

  /* Beweging: één plek voor duur/easing, zodat reduced-motion alles dooft */
  --motion-snel: 0.15s;
  --motion-reveal: 0.4s;
  --ease-uit: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Verende easing: schiet even voorbij de eindstand en veert terug.
     Alleen voor de envelop-scene, waar cartoon-anticipatie de bedoeling is. */
  --ease-veer: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.0625rem;              /* 17px */
  background: var(--pagina);
  color: var(--tekst-op-creme);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* cv05 = de l met staartje: scheelt in het onderscheid tussen l en I.
     Onbekende feature is een no-op, dus veilig. */
  font-feature-settings: "cv05" 1;
}

/* Bedragen zijn kolommen cijfers; die horen uit te lijnen. */
.mr-regel-top span:last-child,
.mr-totaal span:last-child,
.prijs {
  font-variant-numeric: tabular-nums;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.wrap {
  max-width: var(--max-breed);
  margin: 0 auto;
  padding: 0 20px;
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--kop-spatie);
  margin: 0 0 20px;
  color: var(--tekst-op-creme-kop);
  text-wrap: balance;
}

h1 {
  font-size: 2.375rem;               /* 38px mobiel, groeit naar 52px */
}

h2 {
  font-size: 1.625rem;               /* 26px mobiel, groeit naar 34px */
}

h3 {
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 18px;
  max-width: 65ch;                   /* leesbare regellengte */
}

/* Gecentreerde blokken houden hun midden ondanks de max-width */
.sectie-label p,
.envelop-note,
.band-slot p,
.cta-onderaan p,
.pagina-kop p {
  margin-left: auto;
  margin-right: auto;
}

/* In tabellen en kleine bijschriften is de leesmaat niet van toepassing */
td p, th p, .mr-voetnoot, .footer-meta, .stap-slot {
  max-width: none;
}

/* De schaaltrap. Twee stappen, geen clamp: zo blijft alles verifieerbaar
   met het render-gereedschap en is er per breakpoint een bewuste maat. */
@media (min-width: 720px) {
  :root {
    --lucht: 80px;
    --lucht-hero: 88px;
  }

  body { font-size: 1.125rem; }      /* 18px */
  h1 { font-size: 2.75rem; }         /* 44px */
  h2 { font-size: 1.875rem; }        /* 30px */
  h3 { font-size: 1.25rem; }
}

@media (min-width: 1024px) {
  :root {
    --lucht: 96px;
    --lucht-hero: 104px;
  }

  h1 { font-size: 2.75rem; }         /* 44px: zie de rekensom hieronder */
  h2 { font-size: 2.125rem; }        /* 34px */
}

/* De hero-kop moet "De boekhouding doen wij." op EEN regel houden. Gemeten
   in Inter 600 met -0.02em: die zin is 11,92px breed per px lettergrootte.
   De tekstkolom is wrap(min(1120,vw) - 40) - 48 marge - 400 visual, en de
   wrap is afgetopt op 1120px - de kolom groeit dus NIET mee boven 1120:
     1024px viewport -> kolom 536px -> maximaal 44px
     1120px en breder -> kolom 632px -> maximaal 53px
   Vandaar twee stappen: 44px vanaf 1024, 52px zodra de kolom op maat is.
   52-56px overal was niet haalbaar; bij 1024 past alleen 44px. */
@media (min-width: 1120px) {
  h1 { font-size: 3.25rem; }         /* 52px */
}

/* Hierarchie tussen pagina's: 64px hoort bij de hero, want dat is de
   stelling van de site. Een paginatitel elders is een titel en geen
   stelling; die staat een maat kleiner, anders schreeuwt elke pagina
   even hard. */
main > .sectie h1 {
  font-size: 2rem;
}

@media (min-width: 720px) {
  main > .sectie h1 { font-size: 2.375rem; }
}

@media (min-width: 1024px) {
  main > .sectie h1 { font-size: 2.5rem; }
}

ul {
  margin: 0 0 16px;
  padding-left: 1.2em;
}

li {
  margin-bottom: 8px;
}

/* ---------- Knoppen ---------- */

.btn {
  display: inline-block;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 17px 34px;
  border-radius: var(--rond);
  border: none;
  cursor: pointer;
  text-align: center;
}

/* ALLE knoppen zijn champagne-goud met dennengroene tekst (5.05:1).
   Goud is exclusief voor interactie; de drie klassenamen blijven bestaan
   zodat de HTML niet overal aangepast hoeft, maar ze zijn identiek. */
.btn-goud,
.btn-groen,
.btn-creme {
  background: var(--goud);
  color: var(--tekst-op-goud);
}

.btn-link {
  display: inline-block;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
}

/* Inhoudelijke links op lichte vlakken in zeegroen. Puur zeegroen haalt
   maar 4.07/3.52/3.00:1 en zakt op mist door de ondergrens, dus dit is de
   donkere variant: 6.29 pagina / 5.45 zand / 4.64 mist. Links op donkere
   banden erven hun eigen lichte kleur (zie de band-regels). */
/* :not(.btn) is essentieel: zonder dat wint deze regel (0,0,1,1) het van
   .btn-creme (0,0,1,0) en krijgt een knop in een groene band ivoren tekst
   op een ivoren vlak = 1.00:1, volledig onzichtbaar. */
main p a:not(.btn),
main li a:not(.btn),
.sectie-label a:not(.btn),
.stap-slot a:not(.btn),
.envelop-note a:not(.btn) {
  color: var(--salie-knop);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.band-groen p a:not(.btn),
.hero p a:not(.btn),
.band-slot a:not(.btn) {
  color: var(--tekst-op-donker-kop);
}

/* ---------- Header ---------- */

.site-header {
  background: var(--pagina);
  border-bottom: 1px solid rgba(31, 59, 45, 0.12);
  position: relative;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.logo {
  /* Poppins is breder dan de vorige letter: op 390px duwt 1.6rem de
     header-CTA van het scherm af, dus schaalt het woordmerk mee. */
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--tekst-op-creme-kop);
  white-space: nowrap;
  display: inline-block;
}

/* Ronde punt i.p.v. een typografische punt: eigen vorm in champagne-goud,
   optisch op de baseline uitgelijnd. Onderdeel van het woordmerk. */
.logo .punt,
.footer-logo .punt {
  display: inline-block;
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  background: var(--goud);
  margin-left: 0.06em;
  vertical-align: baseline;
  text-indent: -9999px;
  overflow: hidden;
}

@media (min-width: 560px) {
  .logo {
    font-size: 1.45rem;
  }
}

@media (min-width: 720px) {
  .logo {
    font-size: 1.6rem;
  }
}

.header-acties {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* Mobiel: compact CSS-only menu-toggle via <details>, geen JS.
   .site-nav is BEWUST GEEN kind van <details>: moderne browsers verbergen
   niet-summary-kinderen van een dichte <details> via een interne
   ::details-content-wrapper (geen simpele display:none op het kind), dus
   een display:flex-override op het kind zelf haalt dat niet meer weg. Door
   .site-nav als sibling te plaatsen en zelf te tonen/verbergen op basis van
   .nav-toggle[open], omzeilen we dat mechanisme volledig. */
.nav-toggle summary {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: var(--rond-klein);
  border: 1px solid rgba(31, 59, 45, 0.2);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tekst-op-creme-kop);
}

.nav-toggle summary::-webkit-details-marker {
  display: none;
}

.nav-toggle[open] summary {
  background: var(--wit);
}

.site-nav {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 200px;
  background: var(--wit);
  border-radius: var(--rond);
  box-shadow: 0 8px 24px rgba(31, 59, 45, 0.16);
  padding: 8px;
}

.nav-toggle[open] ~ .site-nav {
  display: flex;
}

.site-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--tekst-op-creme-kop);
  padding: 11px 12px;
  border-radius: var(--rond-klein);
}

.site-nav a:hover {
  background: var(--creme);
}

.site-nav a[aria-current="page"] {
  color: var(--middengroen);
}

.btn-header-cta {
  padding: 11px 20px;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Desktop: menu altijd zichtbaar als rij, toggle-knop weg */
@media (min-width: 720px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: flex !important;
    flex-direction: row;
    position: static;
    box-shadow: none;
    background: none;
    padding: 0;
    min-width: 0;
    gap: 4px;
  }

  .site-nav a {
    padding: 8px 12px;
  }
}

/* ---------- Hero ---------- */

.hero {
  padding: var(--lucht-hero) 0;
  position: relative;
  /* Diagonaal verloop binnen de dennengroen-familie (twee stops), met in
     de rechterbovenhoek een champagne-gloed op 7%. Dat geeft het donkere
     vlak diepte zonder dat er een tweede kleur bij komt. De gloed zelf is
     1.12:1 t.o.v. de stop: je ziet hem als licht, niet als kleur.
     Verving het grootboek-lijnenpatroon. */
  background-color: var(--den);
  background-image:
    radial-gradient(circle at 84% 4%,
      rgba(196, 162, 101, 0.07) 0%,
      rgba(196, 162, 101, 0) 46%),
    linear-gradient(158deg, var(--den-op) 0%, var(--den-onder) 100%);
}


/* Het patroon mag nooit over de inhoud vallen */
.hero > .wrap {
  position: relative;
  z-index: 1;
}

/* Label als salie-licht pill i.p.v. losse tekst (9.03:1 met dennengroen) */
.hero-label {
  display: inline-block;
  background: var(--salie-licht);
  color: var(--tekst-op-licht-kop);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}

/* Tweekleurige kop. Gekozen variant C: tweede regel in SALIE.
   Gemeten alternatieven (verschil TUSSEN de twee regels, hoger = duidelijker
   twee kleuren): champagne 2.08:1, salie-licht 1.17:1, salie 2.82:1.
   Salie-licht was praktisch onzichtbaar; champagne werkte wel maar botst
   met de regel "goud = interactie" en overstemde de gouden CTA er vlak
   onder. Salie geeft het sterkste tweekleuren-effect, haalt 3.73:1 op
   dennengroen (grote kop, eis 3:1) en houdt goud exclusief voor de knop. */
.hero h1 .regel-twee {
  display: block;
  color: var(--salie);
}

/* Flexbox i.p.v. grid + margin i.p.v. gap: alleen zo is de tweekoloms-
   indeling verifieerbaar met het render-gereedschap (zie de eerdere
   bevinding over grid-media-queries en flex-gap). */
.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hero-tekst {
  margin-bottom: 40px;
}

@media (min-width: 860px) {
  .hero-grid {
    flex-direction: row;
    align-items: center;
  }

  .hero-tekst {
    flex: 1 1 0;
    margin-bottom: 0;
    margin-right: 48px;
  }

  /* 400px is precies de kaart; de kolom was 460 en die 60px speling ging
     ten koste van de kopregel. */
  .hero-visual {
    flex: 0 1 400px;
  }
}

.hero h1 {
  color: var(--tekst-op-groen-kop);
  margin-bottom: 22px;
}

.hero p {
  color: var(--tekst-op-groen);
  font-size: 1.05rem;
  margin-bottom: 28px;
}

.hero-acties {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.hero-acties .btn-link {
  color: var(--tekst-op-groen-kop);
  text-decoration-color: var(--tekst-op-groen-label);
}

/* De contactregel is een zin met twee links in plaats van één link-knop. Als
   <p> pakt hij vanzelf de juiste kleur van .hero p; alleen de ondermarge van
   die regel moet eruit, anders staat er 28px loze ruimte onder de hero. */
.hero-acties p {
  margin-bottom: 0;
}

/* ---------- Hero-visual: maandrapport-kaartje ---------- */

.maandrapport-kaart {
  background: var(--wit);
  border-radius: var(--rond-groot);
  padding: 32px;
  /* Twee lagen: een korte schaduw voor de rand en een lange voor de
     diepte. Dat leest als een kaart die boven het vlak zweeft in plaats
     van een vlak met een randje. */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10),
              0 26px 60px rgba(0, 0, 0, 0.26);
  max-width: 420px;
  margin: 0 auto;
}

.mr-titel {
  font-weight: 600;
  font-size: 1rem;
  color: var(--tekst-op-creme-kop);
  margin: 0 0 20px;
}

.mr-regel {
  margin-bottom: 16px;
}

.mr-regel-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--tekst-op-creme);
  margin-bottom: 6px;
}

.mr-balk {
  height: 4px;
  background: rgba(31, 59, 45, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.mr-balk span {
  display: block;
  height: 100%;
  background: var(--salie-knop);
  border-radius: 2px;
}

/* Twee kleuren naast elkaar in de gestileerde data: omzet salie-knop
   (4.86:1 op de kaart), kosten dennengroen (9.70:1). Dit balkje was
   champagne, maar goud is nu exclusief voor interactie. */
.mr-balk-kosten span {
  background: var(--den);
}

.mr-totaal {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid rgba(31, 59, 45, 0.12);
  font-weight: 600;
  color: var(--flesgroen);
  font-size: 1.05rem;
}

.mr-voetnoot {
  margin: 16px 0 0;
  font-size: 0.75rem;
  color: var(--tekst-op-creme);
  text-align: center;
}

/* De kaart is een LICHT eiland binnen een donkergroene sectie. De sectie-
   regels .hero p en .band-groen p hebben specificiteit (0,0,1,1) en winnen
   het anders van .mr-titel/.mr-voetnoot (0,0,1,0); dan komt de lichte
   groen-tekstkleur op de creme kaart terecht (gemeten 1.07:1, onleesbaar).
   Deze twee regels hebben (0,0,2,0) en zetten dat definitief recht. */
.maandrapport-kaart .mr-titel {
  color: var(--tekst-op-creme-kop);
}

.maandrapport-kaart .mr-voetnoot {
  color: var(--tekst-op-creme);
}

/* ---------- Hero-visual: statuskaart ---------- */

/* Zelfde kaart als het maandrapport, maar met afgevinkte regels in plaats van
   cijfers. De regel is gescoped op .maandrapport-kaart (0,0,2,0) om precies de
   reden die hierboven bij .mr-titel staat: .hero p (0,0,1,1) zou de lichte
   groen-tekstkleur anders op de ivoren kaart zetten. Kleuren zijn ongewijzigd
   uit het palet: tekst 7.94:1 en het vinkje 9.70:1 op ivoor-vol. */
.status-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

.maandrapport-kaart .status-regel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 10px 0;
  font-size: 0.9rem;
  color: var(--tekst-op-licht);
}

/* Margin en niet gap: het render-gereedschap kent flex-gap niet, zie CLAUDE.md */
.status-vink {
  flex: none;
  margin-left: 12px;
}

/* Grote variant voor de flesgroene band: ruimer opgezet, meer kanaalregels */
.maandrapport-groot {
  max-width: 480px;
  padding: 36px 34px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12),
              0 30px 66px rgba(0, 0, 0, 0.30);
}

.maandrapport-groot .mr-titel {
  font-size: 1.1rem;
  margin-bottom: 24px;
}

.maandrapport-groot .mr-regel {
  margin-bottom: 18px;
}

.maandrapport-groot .mr-regel-top {
  font-size: 0.95rem;
}

.maandrapport-groot .mr-balk {
  height: 6px;
  border-radius: 3px;
}

.maandrapport-groot .mr-balk span {
  border-radius: 3px;
}

.maandrapport-groot .mr-totaal {
  font-size: 1.2rem;
  padding-top: 20px;
}



/* ---------- Onze koppelingen (logorij) ---------- */

.koppelingen {
  padding: 30px 0 26px;
  text-align: center;
  background: var(--mist);
}

.koppelingen-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--olijf-tekst);
  margin-bottom: 14px;
}

.koppelingen-lijst {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.koppelingen-lijst li {
  margin: 0 18px 10px;
  display: flex;
  align-items: center;
}

.koppelingen-lijst img {
  height: 24px;
  width: auto;
  display: block;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.15s ease;
}

/* Optische correctie: bol en Exact zijn compacte wordmarks zonder stokken
   of beeldmerk en ogen bij gelijke pixelhoogte kleiner dan de rest. */
.koppelingen-lijst img[alt="bol"] {
  height: 20px;
}

.koppelingen-lijst img[alt="Exact Online"] {
  height: 21px;
}

.koppelingen-lijst img:hover {
  filter: grayscale(0) opacity(1);
}

.koppelingen-note {
  font-size: 0.8rem;
  color: var(--tekst-op-creme);
  max-width: 480px;
  margin: 0 auto;
}

/* ---------- Secties ---------- */

.sectie {
  padding: var(--lucht) 0;
}

.sectie-label {
  text-align: center;
  margin-bottom: 56px;
}

.sectie-label h2 {
  text-align: center;
}

.sectie-label p {
  max-width: 46ch;
  margin: 0 auto;
  font-size: 1.125rem;
  color: var(--tekst-op-licht);
}

/* ---------- Flesgroene banden (ritme-wissel) ---------- */

.band-groen {
  background-color: var(--den);
  background-image:
    linear-gradient(158deg, var(--den-op) 0%, var(--den-onder) 100%);
  padding: var(--lucht) 0;
}

/* Het slotblok krijgt dezelfde behandeling als de hero: hetzelfde diagonale
   verloop plus de champagne-gloed rechtsboven. Hero en slot zijn de twee
   plekken waar de bezoeker tot actie wordt gevraagd; die horen er hetzelfde
   uit te zien. De gloed is 7% champagne en telt als licht, niet als kleur. */
/* Het verloop loopt hier andersom dan in de hero: van de diepe stop bovenaan
   naar de lichte stop onderaan. Reden is de naad met de footer. Met de donkere
   stop onderaan eindigde het slotblok op #172C21 en begint de footer op
   #172C22, en dat is 1.00:1: de twee vlakken lopen dan in elkaar over en
   alleen de salie-lijn scheidt ze nog. Met de lichte stop onderaan is de naad
   1.26:1, ruim boven de ~1.05 die STYLE.md als zichtbaarheidsgrens tussen
   vlakken aanhoudt. Donkerder dan --den-onder bestaat niet in het palet, dus
   de footer kan het verschil niet maken; het slotblok moet het doen. */
.band-slot {
  background-image:
    radial-gradient(circle at 84% 4%,
      rgba(196, 162, 101, 0.07) 0%,
      rgba(196, 162, 101, 0) 46%),
    linear-gradient(158deg, var(--den-onder) 0%, var(--den-op) 100%);
}

.band-groen h2 {
  color: var(--tekst-op-groen-kop);
}

.band-groen p {
  color: var(--tekst-op-groen);
}

/* Afstanden via margin i.p.v. flex-gap: gap wordt door de gebruikte
   render-tool niet toegepast, waardoor kolommen tegen elkaar plakken en
   een layoutfout niet verifieerbaar is. Margin werkt overal. */
.band-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.band-visual {
  width: 100%;
  max-width: 480px;
  margin-bottom: 44px;
}

@media (min-width: 860px) {
  .band-grid {
    flex-direction: row;
  }

  .band-visual {
    flex: 0 1 480px;
    margin-bottom: 0;
    margin-right: 72px;
  }

  .band-tekst {
    flex: 1 1 0;
  }
}

.band-tekst h2 {
  margin-bottom: 18px;
}

.band-tekst p {
  max-width: 42ch;
}

.band-note {
  font-size: 0.9rem;
  color: var(--tekst-op-groen-label) !important;
  margin-bottom: 0;
}

.band-note a {
  color: var(--tekst-op-groen-kop);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Slot-CTA */

.band-slot {
  text-align: center;
}

.band-slot h2 {
  margin-bottom: 14px;
}

.band-slot p {
  margin-bottom: 28px;
}

.slot-acties {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Lucht tussen de doelgroepregel en de knoppenrij: 28px, dezelfde stap die
     de bewijs-tekst en de stappenrij aanhouden. */
  margin-top: 28px;
}

.slot-acties .btn {
  margin-bottom: 16px;
}

.slot-acties .btn-link {
  color: var(--tekst-op-groen-kop);
  text-decoration-color: var(--tekst-op-groen-label);
}

/* De doelgroepregel onder de subregel: gedempt label-licht op het donkere
   vlak (6.68:1 op de lichtste stop mét gloed). */
.band-slot .slot-doelgroep {
  max-width: 640px;
  margin: 0 auto;
  font-size: 0.85rem;
  color: var(--tekst-op-donker-label);
}

/* ---------- Slot-CTA op een licht vlak ---------- */

/* Zet het vlak en alle kleuren om naar licht. De background-shorthand wist
   ook het verloop en de gloed van .band-slot; deze regels staan daar bewust
   ná, want ze wegen even zwaar (0,0,1,0) en volgorde beslist dan.
   De link-regels hieronder zijn expres zwaarder dan hun donkere tegenhangers
   (.band-slot a:not(.btn) 0,0,1,1 en .slot-acties .btn-link 0,0,2,0): zonder
   die overrides staat de link ivoor op salie-licht, de 1.00:1-fout uit
   STYLE.md. */
.slot-licht {
  background: var(--salie-licht);
  padding: var(--lucht) 0;
}

.slot-licht h2 {
  color: var(--tekst-op-licht-kop);
}

.slot-licht p {
  color: var(--tekst-op-licht);
}

.band-slot.slot-licht .slot-doelgroep {
  color: var(--tekst-op-licht);
}

.band-slot.slot-licht a:not(.btn),
.slot-licht .slot-acties .btn-link {
  color: var(--tekst-op-licht-kop);
  text-decoration-color: var(--salie-knop);
}

@media (min-width: 560px) {
  .slot-acties {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .slot-acties .btn {
    margin-bottom: 0;
    margin-right: 24px;
  }
}

/* ---------- Bewijs-blok: staat op IVOOR (de paginakleur) ----------
   In het ritme is dit vlak 5: ivoor, met tegels in de vollere ivoortint
   en een salie-rand als accent. */
.sectie-zand {
  background: var(--ivoor-vol);
}

/* De verhouding is omgedraaid: het vlak is nu het vollere ivoor-vol, dus de
   tegels gaan naar het lichtere ivoor. Anders staat ivoor-vol op ivoor-vol
   (1.00:1) en verdwijnen ze. Zo houden ze 1.09:1, de ruimste van de subtiele
   vlak-op-vlak-stappen in het palet, plus hun salie-accentrand op 5.27:1. */
.sectie-zand .bewijs-tegels li {
  background: var(--ivoor);
}

.bewijs-grid {
  display: flex;
  flex-direction: column;
}

.bewijs-tekst {
  margin-bottom: 28px;
}

@media (min-width: 860px) {
  .bewijs-grid {
    flex-direction: row;
    align-items: flex-start;
  }

  .bewijs-tekst {
    flex: 1 1 0;
    margin-bottom: 0;
    margin-right: 56px;
  }

  .bewijs-tegels {
    flex: 0 1 340px;
  }
}

.bewijs-tekst h2 {
  margin-bottom: 14px;
}

/* Alleen de laatste alinea vlak afsluiten; tussenliggende alinea's houden de
   normale p-tussenruimte, anders plakken ze aan elkaar tot een blok tekst. */
.bewijs-tekst p:last-of-type {
  margin-bottom: 0;
}

.bewijs-tegels {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bewijs-tegels li {
  background: var(--wit);
  border-left: 3px solid var(--salie-knop);
  border-radius: var(--rond-klein);
  padding: 16px 18px;
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--tekst-op-creme-kop);
}

.bewijs-tegels li:last-child {
  margin-bottom: 0;
}

/* ---------- Kaarten ---------- */

.kaart {
  background: var(--wit);
  border-radius: var(--rond);
  padding: 28px;
  box-shadow: 0 1px 2px rgba(31, 59, 45, 0.06);
}

/* ---------- Stappen: verbonden flow ----------
   Dit is een echte volgorde (eerst kijken wat je gebruikt, dan koppelen,
   dan draait het), dus de nummers zijn inhoud en de verbindingslijn maakt
   die volgorde zichtbaar. Flexbox i.p.v. grid: de kolomwissel is dan
   betrouwbaar te verifieren met het render-gereedschap. */

.stappen {
  display: flex;
  flex-direction: column;
}

.stappen .stap {
  position: relative;
  padding: 0 0 28px 52px;
}

.stappen .stap:last-child {
  padding-bottom: 0;
}

/* Mobiel: verticale lijn van nummer naar nummer */
.stappen .stap::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: -6px;
  width: 2px;
  background: var(--salie);
  opacity: 0.55;
}

.stappen .stap:last-child::before {
  display: none;
}

.stappen .stap-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--middengroen);
  color: var(--pagina);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 10px;
  position: absolute;
  left: 0;
  top: 0;
}

.stappen .stap h3 {
  margin-bottom: 12px;
}

.stappen .stap p {
  margin-bottom: 0;
}

.stap-slot {
  display: block;
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--tekst-op-creme);
}

@media (min-width: 720px) {
  .stappen {
    flex-direction: row;
  }

  /* Tussenruimte via margin (flex-gap is niet verifieerbaar in de
     render-tool); de verbindingslijn loopt die marge in. */
  .stappen .stap {
    flex: 1 1 0;
    padding: 48px 0 0;
    margin-right: 32px;
    text-align: center;
  }

  /* De leesmaat van 65ch is hier breder dan de kolom; zonder auto-marges
     blijft de tekstblok links hangen en heeft centreren geen effect. */
  .stappen .stap p {
    margin-left: auto;
    margin-right: auto;
  }

  .stappen .stap:last-child {
    margin-right: 0;
  }

  /* Bolletje gecentreerd boven de eigen kolom. Alleen vanaf 720px: mobiel
     staan de stappen onder elkaar en vormen de bolletjes een leesrail links,
     die hoort daar links te blijven. */
  .stappen .stap-nummer {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Horizontale lijn van bolletje naar bolletje. Het bolletje is 32px breed
     en staat gecentreerd, dus zijn rechterrand ligt op 50% + 16px; de linker-
     rand van het volgende bolletje ligt 32px marge plus een halve kolom
     verderop, vandaar de negatieve right. */
  .stappen .stap::before {
    left: calc(50% + 16px);
    right: calc(-50% - 16px);
    top: 15px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
}

/* Uitgewerkte stappen (hoe-het-werkt.html): losse kaarten onder elkaar.
   Bewust een eigen variant, los van de verbonden flow op de homepage. */
.stappen-uitgewerkt {
  display: flex;
  flex-direction: column;
}

.stappen-uitgewerkt .stap {
  background: var(--wit);
  border-radius: var(--rond);
  padding: 28px;
  margin-bottom: 24px;
}

.stappen-uitgewerkt .stap:last-child {
  margin-bottom: 0;
}

.stappen-uitgewerkt .stap-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--middengroen);
  color: var(--pagina);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 14px;
}

/* ---------- Tijdlijn (hoe-het-werkt) ---------- */

/* Dezelfde bolletjes en dezelfde rail als de stappenrij op de homepage, maar
   op elke breedte onder elkaar. Vijf stappen naast elkaar zou vijf te smalle
   kolommen geven; als proces leest een verticale rail bovendien beter, want
   de volgorde is hier de inhoud. Breedte gelijk aan .artikel, zodat alle
   tekst op de pagina op dezelfde leeskolom staat. */
.tijdlijn {
  max-width: 720px;
  margin: 0 auto;
}

/* Paginakop, intro, sectiekop en stappen delen één linkerlijn: de kolom staat
   in het midden van de pagina, de inhoud erin is links uitgelijnd. */
.artikel-midden {
  margin: 0 auto 48px;
}

.tijdlijn > h2 {
  margin-bottom: 28px;
}

.tijdlijn .stap {
  position: relative;
  padding: 0 0 32px 52px;
}

.tijdlijn .stap:last-child {
  padding-bottom: 0;
}

.tijdlijn .stap::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: -6px;
  width: 2px;
  background: var(--salie);
  opacity: 0.55;
}

/* Na de laatste stap loopt de rail nergens meer heen. */
.tijdlijn .stap:last-child::before {
  display: none;
}

.tijdlijn .stap-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--middengroen);
  color: var(--pagina);
  font-weight: 600;
  font-size: 0.9rem;
  position: absolute;
  left: 0;
  top: 0;
}

.tijdlijn .stap h3 {
  margin-bottom: 10px;
}

.tijdlijn .stap p {
  margin-bottom: 0;
}

/* ---------- Verhaal-tijdlijn (over-ons) ----------
   Hergebruikt het tijdlijnpatroon van hoe-het-werkt (.tijdlijn/.stap: de
   ::before-lijn en de reveal). Enige verschil: op de markerplek staat een
   illustratie van 56px i.p.v. een nummercirkel, dus de inspringing en de
   lijnpositie zijn daarop afgestemd. Beide klassen op de container maken de
   overrides specifieker dan de basisregels (0,0,3,x). */
.tijdlijn.tijdlijn-verhaal .stap {
  padding: 0 0 40px 76px;
}

.tijdlijn.tijdlijn-verhaal .stap::before {
  left: 27px;
  top: 66px;
}

/* Markerplek: 56px lijnwerk-illustratie, absoluut op de rail. */
.stap-ill {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  display: block;
}

/* Dun lijnwerk, dennengroen op de lichte achtergrond (10.53:1), dezelfde
   kleurvariabele (--den) als de hoe-het-werkt-illustraties (.ill-vlak /
   .ill-lijn). fill=none staat OOK als attribuut op elk path, zodat een
   ontbrekende class nooit een zwart vlak kan opleveren. */
.stap-teken {
  fill: none;
  stroke: var(--den);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Zigzag: tekst naast illustratie ---------- */

/* Flexbox met margins, geen grid en geen gap: het render-gereedschap kent
   allebei niet en dan is de layout niet te verifieren (zie CLAUDE.md).
   De tekst staat in de HTML ALTIJD eerst, zodat mobiel vanzelf kop-tekst-beeld
   stapelt; row-reverse draait op desktop alleen de visuele volgorde om. */
.zigzag {
  display: flex;
  flex-direction: column;
}

.zigzag-tekst {
  margin-bottom: 32px;
}

.zigzag-beeld {
  max-width: 340px;
  margin: 0 auto;
}

@media (min-width: 860px) {
  .zigzag {
    flex-direction: row;
    align-items: center;
  }

  .zigzag-om {
    flex-direction: row-reverse;
  }

  .zigzag-tekst {
    flex: 1 1 0;
    margin-bottom: 0;
    margin-right: 56px;
  }

  .zigzag-om .zigzag-tekst {
    margin-right: 0;
    margin-left: 56px;
  }

  .zigzag-beeld {
    flex: 0 1 340px;
    margin: 0;
  }
}

/* ---------- Illustraties ---------- */

/* Zelfde taal als de envelop-scene: dun lijnwerk in dennengroen op een licht
   vlak, vulling een tint lichter dan de ondergrond. Goud blijft eruit; dat is
   voorbehouden aan interactie (zie STYLE.md), en een illustratie is dat niet.
   Contrast: den op salie-licht 9.03:1 en op ivoor 10.53:1, salie-knop 4.52
   resp. 5.27:1. Ruim boven de 3:1 voor graphics. */
.ill {
  width: 100%;
  height: auto;
  display: block;
}

/* De vulling moet van de ONDERGROND verschillen, en die verschilt per sectie.
   Ivoor werkt op de twee vlakken waar illustraties nu staan: 1.17:1 op
   salie-licht en 1.09:1 op ivoor-vol, allebei boven de zichtbaarheidsgrens van
   ~1.05 uit STYLE.md. Alleen op een gewoon ivoren vlak zou ivoor-op-ivoor
   1.00:1 geven en de body van de vorm helemaal laten wegvallen; daar een tint
   voller, dezelfde truc als .sectie-zand .bewijs-tegels li. */
.ill-vlak {
  fill: var(--ivoor);
  stroke: var(--den);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.sectie:not(.sectie-salie):not(.sectie-zand) .ill-vlak {
  fill: var(--ivoor-vol);
}

.ill-streep {
  fill: none;
  stroke: var(--salie-knop);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.ill-lijn {
  fill: none;
  stroke: var(--salie-knop);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.75;
}

.ill-schijf {
  fill: var(--salie-knop);
}

.ill-haak {
  fill: none;
  stroke: var(--ivoor);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Vraagteken en het vinkje in de antwoordbubbel staan op een LICHT vlak en
   niet op de donkere schijf, dus daar kan de ivoren haak niet: die zou
   ivoor-op-ivoor worden en verdwijnen. */
.ill-vraag,
.ill-punt {
  stroke: var(--den);
  fill: none;
}

.ill-bubbel-2 .ill-haak {
  stroke: var(--salie-knop);
}

/* ---------- Illustratie-animaties ---------- */

/* Zelfde model als de andere scenes: de EINDSTAND staat hierboven als
   default, en alleen onder .js-motion gaan de delen in hun beginstand staan.
   Zonder JS is de hele illustratie dus gewoon te zien. Transitie en delay op
   de basisregel, eindstand op .is-zichtbaar, precies zoals het maandrapport.
   Alles blijft 2D (opacity, translate, scale, stroke-dashoffset): het
   render-gereedschap kent geen 3D-transforms, en dan zou de verificatie iets
   anders tonen dan de bezoeker ziet. */
.js-motion [data-scene] .ill-deel {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.35s var(--ease-uit),
              transform 0.35s var(--ease-uit);
}

.js-motion [data-scene].is-zichtbaar .ill-deel {
  opacity: 1;
  transform: none;
}

/* De verbindingslijn tekent zichzelf. 120 is ruim langer dan beide paden,
   zodat de lijn met dashoffset 120 gegarandeerd helemaal weg is. */
.js-motion [data-scene] .ill-lijn {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 0.4s var(--ease-uit);
}

.js-motion [data-scene].is-zichtbaar .ill-lijn {
  stroke-dashoffset: 0;
}

/* Scene 1, maandflow (1800ms): envelop, lijn, document, lijn, vinkje. */
.js-motion [data-scene] .ill-envelop { transform: translateY(8px); }
.js-motion [data-scene] .ill-doc     { transform: translateY(8px); transition-delay: 0.7s; }
.js-motion [data-scene] .ill-vink    { transform: scale(0.8); transition-delay: 1.4s; }
.js-motion [data-scene] .ill-lijn-1  { transition-delay: 0.3s; }
.js-motion [data-scene] .ill-lijn-2  { transition-delay: 1s; }

/* Scene 2, chat (900ms): twee bubbels met een subtiele pop. */
.js-motion [data-scene] .ill-bubbel-1 { transform: scale(0.9); }
.js-motion [data-scene] .ill-bubbel-2 { transform: scale(0.9); transition-delay: 0.45s; }

/* Scene 3, koppeling (1700ms): drie lijnen tekenen zich na elkaar, dan het
   vinkje. De blokken doen NIET mee: die staan buiten .ill-deel en zijn dus
   altijd zichtbaar, zodat een uitgevallen observer nooit een leeg vlak
   oplevert. */
.js-motion [data-scene] .ill-kop-1 { transition-delay: 0s; }
.js-motion [data-scene] .ill-kop-2 { transition-delay: 0.35s; }
.js-motion [data-scene] .ill-kop-3 { transition-delay: 0.7s; }

.js-motion [data-scene] .ill-klik {
  transform: scale(0.8);
  transition-delay: 1.15s;
}

.ill-punt {
  fill: var(--den);
  stroke: none;
}

/* ---------- Pakketkaarten (tarieven) ---------- */

/* Twee zelfstandige kaarten naast elkaar op desktop, gestapeld op mobiel
   (Grip eerst). Flexbox, geen grid en geen gap: onderlinge ruimte via
   margins, zodat het render-gereedschap hetzelfde toont als de browser. */
.pakketten {
  display: flex;
  align-items: stretch;   /* even hoog; knoppen komen zo op een lijn */
  margin: 34px 0 24px;
}

.pakket {
  flex: 1 1 0;
  /* elke kaart is een flexkolom; de knop wordt met margin-top:auto naar de
     onderkant geduwd, zodat beide knoppen op gelijke hoogte staan ondanks
     het lengteverschil van de lijstjes. */
  display: flex;
  flex-direction: column;
  border-radius: var(--rond-groot);
  padding: 28px 26px 26px;
}

.pakket + .pakket {
  margin-left: 24px;   /* geen flex-gap: expliciete tussenruimte */
}

/* Geregeld: ivoor-vol kaart op de ivoor sectie (1.09:1, bewust subtiel). */
.pakket-geregeld {
  background: var(--ivoor-vol);
}

/* Grip: donkergroene kaart, zoals de vorige kaartkop (vlak flesgroen). */
.pakket-grip {
  background: var(--flesgroen);
  position: relative;   /* anker voor de badge */
}

/* Badge blijft goud (uitzondering, STYLE.md), steekt boven de Grip-kaart uit. */
.pakket-badge {
  position: absolute;
  top: -14px;
  left: 26px;
  background: var(--goud);
  color: var(--tekst-op-goud);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- Kop van de kaart --- */
.pakket-naam {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--tekst-op-licht-kop);
}

.prijs {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--flesgroen);
  margin: 6px 0 2px;
  line-height: 1.2;
}

/* "per maand" is nu een prominente tweede prijsregel: ~helft van de 2.2rem
   prijs en dezelfde kleur, direct onder het bedrag (block). */
.prijs-eenheid {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--flesgroen);
}

.prijs-klein {
  color: var(--tekst-op-licht);
  font-size: 0.9rem;   /* een maat groter dan de oude 0.8rem, blijft gedempt */
  margin: 0;
}

/* Opstartkosten: subtiele tweede prijs onder de kop (0.85rem, gedempt).
   Bewust NIET meegeschaald met "per maand" (dat is nu de prominente
   flesgroen-regel); de opstart hoort rustig te blijven. Lucht erboven zodat
   hij als losse regel leest. */
.prijs-opstart {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--tekst-op-licht);
  margin: 14px 0 0;
  font-variant-numeric: tabular-nums;
}

.pakket-subtitel {
  color: var(--tekst-op-licht-kop);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 14px 0 0;
}

/* Kopregel op de Grip-kaart ("Alles van Geregeld, en ook:"). */
.pakket-meer {
  font-weight: 600;
  font-size: 0.95rem;
  margin: 18px 0 0;
  color: var(--tekst-op-donker-kop);
}

/* --- Lijst met vinkjes --- */
.pakket-lijst {
  list-style: none;
  margin: 18px 0 26px;
  padding: 0;
}

.pakket-lijst li {
  position: relative;
  padding-left: 30px;
  margin: 0 0 12px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--tekst-op-licht);
}

.pakket-lijst li:last-child {
  margin-bottom: 0;
}

/* Link op de kaart (koppelingenregel): :not(.btn) EN hogere specificiteit
   (0,0,3,1) dan de brede "main li a:not(.btn)"-regel (0,0,1,3) - anders wint
   die en krijgt de link de verkeerde kleur (de .band-slot a-valkuil uit
   CLAUDE.md). color:inherit = de li-tekstkleur, dezelfde onderstreepte stijl
   die de oude tabel voor deze regel had. */
.pakket .pakket-lijst a:not(.btn) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(31, 59, 45, 0.4);
}

/* Vinkje: inline SVG in dennengroen (geen font-icon, geen goud). */
.pakket-vink {
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  color: var(--salie-knop);
}

/* Knop onderaan; margin-top:auto lijnt beide knoppen uit ondanks het
   lengteverschil van de lijstjes. */
.pakket-knop {
  margin-top: auto;
}

/* --- Grip-kaart: licht-op-donker overrides --- */
.pakket-grip .pakket-naam,
.pakket-grip .prijs {
  color: var(--tekst-op-donker-kop);
}

.pakket-grip .prijs-eenheid {
  color: var(--tekst-op-donker-kop);   /* ivoor, zelfde kleur als de prijs */
}

.pakket-grip .prijs-klein,
.pakket-grip .prijs-opstart {
  color: var(--tekst-op-donker-label);
}

.pakket-grip .pakket-subtitel,
.pakket-grip .pakket-lijst li {
  color: var(--tekst-op-donker);
}

.pakket-grip .pakket-vink {
  color: var(--tekst-op-donker-kop);   /* ivoor vinkje op donker */
}

/* Kennismaking-regel: verplaatst naar direct onder de intro (staat nu in
   .sectie-label). Hogere specificiteit (0,0,2,0) dan ".sectie-label p"
   (0,0,1,1) zodat de kleinere maat wint; centrering en gedempte kleur
   erven van .sectie-label p. Zo sluiten de kaarten en het Goed-om-te-weten-
   blok dichter op elkaar aan (geen tussenregel meer die ze uit elkaar duwt). */
.sectie-label .pakketten-noot {
  font-size: 0.9rem;
  margin: 10px auto 0;
}

/* Stapelen op mobiel: Grip eerst (meest gekozen bovenaan). column-reverse
   zet de tweede kaart (Grip) bovenaan; margins per breakpoint resetten. */
@media (max-width: 719px) {
  .pakketten {
    flex-direction: column-reverse;
  }
  .pakket + .pakket {
    margin-left: 0;
  }
  .pakket-geregeld {
    margin-top: 24px;   /* ruimte tussen de gestapelde kaarten */
  }
}

/* ---------- Goed om te weten (onder de kaarten) ---------- */

/* Salie-licht paneel BINNEN de ivoor sectie (bewust geen full-bleed): de
   ivoor sectiepadding eronder houdt het los van het salie-licht
   eerlijkheidsblok in de volgende sectie, zodat er geen twee gelijke
   vlakken tegen elkaar liggen (kleurritme, STYLE.md). Geen tabel, gewone
   regels. */
.goed-om-te-weten {
  background: var(--salie-licht);
  border-radius: var(--rond-groot);
  padding: 28px 32px;
  margin: 0 0 8px;
}

.goed-om-te-weten h2 {
  font-size: 1.25rem;
  margin: 0 0 6px;
  color: var(--tekst-op-licht-kop);
}

.goed-om-te-weten ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.goed-om-te-weten li {
  color: var(--tekst-op-licht);
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 12px 0;
  margin: 0;
  border-top: 1px solid rgba(31, 59, 45, 0.12);
}

.goed-om-te-weten li:first-child {
  border-top: none;
}

.goed-om-te-weten strong {
  color: var(--tekst-op-licht-kop);
  font-weight: 600;
}

/* Ritme-vlak: salie-licht sectie (gebruikt op tarieven voor het
   eerlijkheidsblok, zodat ook daar de kleuren afwisselen). */
.sectie-salie {
  background: var(--salie-licht);
}

.sectie-salie .blok {
  background: var(--ivoor);
}


/* ---------- Blokken (opstart / OSS / groter / eerlijkheid) ---------- */

.blok {
  padding: 28px;
  border-radius: var(--rond);
  background: var(--wit);
  margin-bottom: 20px;
}

.blok-eerlijk ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blok-eerlijk li {
  padding: 14px 0;
  border-top: 1px solid rgba(31, 59, 45, 0.1);
}

.blok-eerlijk li:first-child {
  border-top: none;
}

/* ---------- FAQ ---------- */

.faq {
  margin-top: 12px;
}

.faq details {
  background: var(--wit);
  border-radius: var(--rond);
  padding: 4px 20px;
  margin-bottom: 12px;
}

/* Op een ivoor-vol sectie is --wit exact de sectiekleur (1.00:1) en verdwijnen
   de kaarten. Zelfde per-vlak-correctie als .sectie-zand .bewijs-tegels li en
   .sectie-salie .blok: een tint de andere kant op, hier ivoor op 1.09:1. */
.sectie-zand .faq details {
  background: var(--ivoor);
}

.faq summary {
  font-weight: 600;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 14px;
  font-size: 1.3rem;
  color: var(--middengroen);
}

.faq details[open] summary::after {
  content: "\2212";
}

/* FAQ-antwoorden in alinea's. De ruimte tussen alinea's binnen een antwoord
   is ~een regelhoogte en zichtbaar kleiner dan de ruimte tussen twee
   FAQ-items (kaartmarge + sluitruimte + kaartgrens). Alle regels gericht op
   de .faq-container, zodat er geen brede p-regel elders lekt (de
   specificiteitsvalkuil uit CLAUDE.md). */
.faq p {
  margin: 0;
  padding: 0;
}

.faq p + p {
  margin-top: 0.9em;
}

/* Sluitruimte onder de laatste alinea tot de kaartrand (voorheen de
   padding-bottom op de enkele <p>). */
.faq details > p:last-of-type {
  padding-bottom: 18px;
}

/* ---------- Call to action blok ---------- */

.cta-onderaan {
  text-align: center;
  padding: 48px 0 8px;
}

/* ---------- Kennisbank ---------- */

.kennisbank-lege-staat {
  background: var(--wit);
  border-radius: var(--rond);
  padding: 32px;
  text-align: center;
  color: var(--tekst-op-creme);
}

.artikel {
  max-width: 720px;
}

.artikel .datum {
  color: var(--tekst-op-creme);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--den-diep);
  border-top: 1px solid var(--salie);
  padding: 40px 0 28px;
  margin-top: 0;
}

.site-footer p {
  color: var(--tekst-op-groen);
  margin: 0 0 10px;
}

.site-footer .footer-logo {
  color: var(--tekst-op-groen-kop);
  font-size: 1.35rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 10px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 18px 0 18px;
}

.footer-links li {
  margin: 0 18px 8px 0;
}

.footer-links a {
  color: var(--tekst-op-groen-kop);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.footer-meta {
  color: var(--tekst-op-groen-label);
  font-size: 0.8rem;
}

.footer-meta .placeholder {
  color: var(--tekst-op-groen-label);
}

/* ---------- Formulier (aanmelden) ---------- */

.form-intro {
  max-width: 640px;
  margin: 0 0 32px;
}

.form-kaart {
  background: var(--wit);
  border-radius: var(--rond-groot);
  padding: 32px 28px;
  max-width: 640px;
}

.veld {
  margin-bottom: 22px;
}

.veld:last-of-type {
  margin-bottom: 0;
}

.veld label,
.veld legend {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--tekst-op-creme-kop);
  margin-bottom: 8px;
  padding: 0;
  border: none;
}

.veld input[type="text"],
.veld input[type="email"],
.veld select,
.veld textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--tekst-op-creme-kop);
  background: var(--creme);
  border: 1px solid rgba(31, 59, 45, 0.25);
  border-radius: var(--rond-klein);
  padding: 12px 14px;
  min-height: 48px;
}

.veld textarea {
  min-height: 110px;
  resize: vertical;
}

.veld input:focus-visible,
.veld select:focus-visible,
.veld textarea:focus-visible {
  outline: 2px solid var(--middengroen);
  outline-offset: 1px;
}

.veld fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.checkbox-groep {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-groep label {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 0.95rem;
  margin: 0 24px 8px 0;
}

.checkbox-groep input[type="checkbox"] {
  accent-color: var(--flesgroen);
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.veld-hint {
  font-size: 0.8rem;
  color: var(--tekst-op-creme);
  margin-top: 6px;
}

/* Honeypot: onzichtbaar voor mensen, wel bereikbaar voor bots die elk veld invullen */
.hp-veld {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-verzend {
  margin-top: 28px;
}

.form-verzend .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .form-verzend .btn {
    width: auto;
  }
}

.form-melding {
  background: var(--wit);
  border-radius: var(--rond-groot);
  padding: 32px 28px;
  max-width: 640px;
}

.form-melding.fout {
  border: 1px solid rgba(199, 123, 63, 0.4);
}

/* ---------- Toegankelijkheid ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Over ons ---------- */

/* Hero-foto rechts naast de kop. Afgeronde hoeken (kaartstijl) en een
   schaduw zodat de foto OP het donkere vlak ligt in plaats van erin
   verdwijnt. Geen eigen animatie: de foto zit buiten elke data-reveal.
   Op mobiel staat hij (via .hero-grid) onder de tekst; daar max ~60% van
   het scherm, gecentreerd. De foto kijkt naar links, richting de tekst. */
.hero-foto {
  border-radius: var(--rond-groot);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  width: 60%;
  max-width: 240px;
  margin: 0 auto;
}

.hero-foto img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 860px) {
  .hero-foto {
    width: 100%;
    max-width: 400px;
    margin: 0 0 0 auto;
  }
}

/* Sectie 3 "Wie erachter zit": tekst-only (geen avatar tot er een nieuwe
   foto is). Het blok is als geheel gecentreerd in de band via de auto-
   marges; de TEKST erin staat links. Zelfde uitlijning op elke breedte. */
.wie-blok {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Gericht op de paragrafen zelf (0,0,1,1). Er is geen bovenliggende regel
   die hier text-align: center zet (de enige center-regels zitten op .btn,
   .sectie-label, .band-slot, .cta-onderaan e.d., geen voorouder van dit
   blok) - deze regel maakt links desondanks hard, zodat geen enkele
   geerfde waarde ooit kan winnen. */
.wie-blok p {
  text-align: left;
}

/* Naamkaartje: naam + rol horen visueel bij elkaar. Naam Inter 600,
   1.35rem, dennengroen; de rol plakt er direct onder (0.25rem). */
.wie-naam {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tekst-op-licht-kop);
}

/* Rol: gedempte bodykleur, bodymaat, margin-top 0; daaronder de normale
   alinea-afstand (1.125rem = 18px, gelijk aan de base p) naar de alinea's
   die er los onder staan. */
.wie-rol {
  margin: 0 0 1.125rem;
  color: var(--tekst-op-licht);
}

/* Sectie 4: twee kolommen op een donker vlak. Iconen en tekst dus in ivoor. */
.hoe-kolommen {
  display: flex;
  flex-direction: column;
}

.hoe-kolom {
  margin-bottom: 36px;
}

.hoe-kolom:last-child {
  margin-bottom: 0;
}

@media (min-width: 720px) {
  .hoe-kolommen {
    flex-direction: row;
  }

  .hoe-kolom {
    flex: 1 1 0;
    margin-bottom: 0;
  }

  .hoe-kolom + .hoe-kolom {
    margin-left: 48px;
  }
}

.band-groen .hoe-kolom h3 {
  color: var(--tekst-op-groen-kop);
  margin-bottom: 10px;
}

.band-groen .hoe-kolom p {
  margin-bottom: 0;
}

/* Lijnwerk-iconen in dezelfde taal als de hoe-het-werkt-scenes, maar op een
   donker vlak: dun lijnwerk in ivoor (10.11:1 op de lichtste verloop-stop). */
.hoe-icoon {
  width: 46px;
  height: 46px;
  display: block;
  margin: 0 0 18px;
}

.hoe-teken {
  fill: none;
  stroke: var(--ivoor);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sectie 5 "Waar we voor staan": drie statements onder elkaar, gescheiden
   door dunne horizontale lijnen (zelfde taal als het eerlijk-blok op
   tarieven), gecentreerd en met ruime verticale ademruimte. Geen iconen,
   geen kopjes: een rustige band. */
.statements {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.statement {
  max-width: none;
  margin: 0;
  padding: 28px 0;
  font-size: 1.25rem;
  color: var(--tekst-op-licht-kop);
  border-top: 1px solid rgba(31, 59, 45, 0.1);
}

.statement:first-child {
  border-top: none;
}

/* ================= Beweging =================
   VEILIGHEIDSMODEL: alle eindstates zijn de DEFAULT. Pas als motion.js
   draait komt .js-motion op <html> en gaan elementen in hun beginstand
   staan. Zonder JS, bij een JS-fout of bij prefers-reduced-motion is er
   dus nooit verborgen content. */

/* --- Micro-interacties (CSS-only, altijd actief) --- */

.btn {
  transition: transform var(--motion-snel) var(--ease-uit),
              box-shadow var(--motion-snel) var(--ease-uit),
              background-color var(--motion-snel) var(--ease-uit);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(31, 59, 45, 0.22);
}

/* Verder verdonkeren kan niet: bij 14% menging zakt de dennengroene
   knoptekst naar 4.16:1 en dus onder de eis. Dit is het maximum. */
.btn-goud:hover,
.btn-groen:hover,
.btn-creme:hover {
  background: var(--goud-hover);
}

.maandrapport-kaart {
  transition: transform var(--motion-snel) var(--ease-uit),
              box-shadow var(--motion-snel) var(--ease-uit);
}

.hero-visual .maandrapport-kaart:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.3);
}

/* Menulinks: onderstreep groeit vanuit links */
.site-nav a {
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--middengroen);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-snel) var(--ease-uit);
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

/* --- Scroll-reveals: alleen actief als JS draait --- */

.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--motion-reveal) var(--ease-uit),
              transform var(--motion-reveal) var(--ease-uit);
}

.js-motion [data-reveal].is-zichtbaar {
  opacity: 1;
  transform: none;
}

/* --- Kaarten-scene (tarieven) --- */

/* De kaart-entree zelf is de standaard [data-reveal] hierboven (14px omhoog,
   0.4s ease-out). Elke kaart heeft een eigen data-reveal en wordt dus apart
   in beeld waargenomen: op mobiel start de Grip-kaart pas als hij zelf in
   beeld komt. De 120ms hieronder is een CSS-vertraging op de kaart, geen
   timer vanaf de eerste kaart. De kopblokken (naam, prijs) zitten in de kaart
   en bewegen dus mee met de kaart, niet apart. */
.js-motion .pakket-grip {
  transition-delay: 0.12s;
}

/* Lijstregels cascaderen van boven naar beneden, 40ms per regel (fade + 6px
   omhoog, 0.25s). --stap = regelindex (per nth-child), --basis = starttijd;
   de Grip-lijst begint 120ms later, gelijk aan zijn kaart. De vinkjes erven
   dezelfde --stap/--basis (custom properties erven) en lopen synchroon. */
.js-motion .pakket-lijst li {
  --stap: 0;
  --basis: 0.28s;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease-uit) calc(var(--basis) + var(--stap) * 0.04s),
              transform 0.25s var(--ease-uit) calc(var(--basis) + var(--stap) * 0.04s);
}

.js-motion .pakket-grip .pakket-lijst li { --basis: 0.4s; }

.js-motion .pakket-lijst li:nth-child(2)  { --stap: 1; }
.js-motion .pakket-lijst li:nth-child(3)  { --stap: 2; }
.js-motion .pakket-lijst li:nth-child(4)  { --stap: 3; }
.js-motion .pakket-lijst li:nth-child(5)  { --stap: 4; }
.js-motion .pakket-lijst li:nth-child(6)  { --stap: 5; }
.js-motion .pakket-lijst li:nth-child(7)  { --stap: 6; }
.js-motion .pakket-lijst li:nth-child(8)  { --stap: 7; }
.js-motion .pakket-lijst li:nth-child(9)  { --stap: 8; }
.js-motion .pakket-lijst li:nth-child(10) { --stap: 9; }
.js-motion .pakket-lijst li:nth-child(11) { --stap: 10; }
.js-motion .pakket-lijst li:nth-child(12) { --stap: 11; }

.js-motion .pakket.is-zichtbaar .pakket-lijst li {
  opacity: 1;
  transform: none;
}

/* Vinkjes en plusjes tekenen zichzelf via stroke-dashoffset, synchroon met
   hun eigen regel: de <path> erft --stap/--basis van de <li>. Eindstand =
   volledig getekend = de SVG-default; alleen de beginstand (weggesneden)
   staat onder .js-motion. */
.js-motion .pakket-vink path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset 0.25s var(--ease-uit) calc(var(--basis) + var(--stap) * 0.04s);
}

.js-motion .pakket.is-zichtbaar .pakket-vink path {
  stroke-dashoffset: 0;
}

/* Badge-pop: verschijnt als laatste, na de Grip-kaart. Scale 0.85 -> 1 met
   fade; --ease-veer geeft een kleine overshoot. Een enkele transition, dus
   geen bounce-loop. */
.js-motion .pakket-grip .pakket-badge {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s var(--ease-uit) 0.5s,
              transform 0.25s var(--ease-veer) 0.5s;
}

.js-motion .pakket-grip.is-zichtbaar .pakket-badge {
  opacity: 1;
  transform: scale(1);
}

/* --- Over ons: iconen en vinkjes tekenen zichzelf --- */

/* Sectie 4: de twee lijnwerk-iconen tekenen zich via stroke-dashoffset zodra
   hun kolom binnenkomt; kolom 2 150ms na kolom 1 (elke kolom is een eigen
   data-reveal, dus op mobiel start kolom 2 pas als hij zelf in beeld komt).
   130 is ruim langer dan elk (sub)pad, zodat de beginstand gegarandeerd weg
   is; de eindstand (getekend) is de SVG-default, dus no-JS toont hele iconen. */
.js-motion .hoe-kolom .hoe-teken {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  transition: stroke-dashoffset 0.6s var(--ease-uit);
}

.js-motion .hoe-kolom.is-zichtbaar .hoe-teken {
  stroke-dashoffset: 0;
}

.js-motion .hoe-kolom-2 .hoe-teken {
  transition-delay: 0.15s;
}

/* --- Verhaal-tijdlijn: de verbindingslijn tekent zich (scaleY op ::before,
   zelfde model als de stappenlijn) en de illustratie tekent zich
   (stroke-dashoffset) zodra de stop in beeld komt. Base/no-JS toont de volle
   eindstand: zonder .js-motion staat de lijn statisch en de icoon-default is
   getekend. --- */
.js-motion .tijdlijn-verhaal .stap::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease-uit);
}

.js-motion .tijdlijn-verhaal .stap.is-zichtbaar::before {
  transform: scaleY(1);
}

.js-motion .tijdlijn-verhaal .stap-teken {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  transition: stroke-dashoffset 0.6s var(--ease-uit);
}

.js-motion .tijdlijn-verhaal .stap.is-zichtbaar .stap-teken {
  stroke-dashoffset: 0;
}

/* --- Signatuur: het maandrapport vult zichzelf in --- */

/* Balkjes groeien van 0 naar hun ingestelde breedte. De breedte staat als
   inline style op het span; we schalen daarom horizontaal i.p.v. width te
   animeren (scaleX is goedkoper en raakt de layout niet). */
.js-motion [data-rapport] .mr-balk span {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-uit);
}

.js-motion [data-rapport].is-zichtbaar .mr-balk span {
  transform: scaleX(1);
}

.js-motion [data-rapport] .mr-regel:nth-of-type(2) .mr-balk span { transition-delay: 0.1s; }
.js-motion [data-rapport] .mr-regel:nth-of-type(3) .mr-balk span { transition-delay: 0.2s; }
.js-motion [data-rapport] .mr-regel:nth-of-type(4) .mr-balk span { transition-delay: 0.3s; }
.js-motion [data-rapport] .mr-regel:nth-of-type(5) .mr-balk span { transition-delay: 0.4s; }

/* De slotregel komt als laatste binnen */
.js-motion [data-rapport] .mr-totaal {
  opacity: 0;
  transition: opacity 0.5s var(--ease-uit) 1.1s;
}

.js-motion [data-rapport].is-zichtbaar .mr-totaal {
  opacity: 1;
}

/* --- De verbindingslijn tekent zichzelf van stap 1 naar 3 --- */

.js-motion .stappen .stap::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease-uit);
}

.js-motion .stappen .stap.is-zichtbaar::before {
  transform: scaleY(1);
}

@media (min-width: 720px) {
  .js-motion .stappen .stap::before {
    transform: scaleX(0);
    transform-origin: left;
  }

  .js-motion .stappen .stap.is-zichtbaar::before {
    transform: scaleX(1);
  }
}

/* --- Harde regel: geen enkele beweging bij reduced motion --- */

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

  /* Eindstates direct zichtbaar, ook als .js-motion toch gezet zou zijn */
  .js-motion [data-reveal],
  .js-motion [data-rapport] .mr-totaal,
  .js-motion [data-scene] .ill-deel,
  .js-motion .pakket-lijst li,
  .js-motion .pakket-grip .pakket-badge {
    opacity: 1 !important;
    transform: none !important;
  }

  /* De lijn helemaal getekend in plaats van weggesneden */
  .js-motion [data-scene] .ill-lijn,
  .js-motion .pakket-vink path,
  .js-motion .hoe-teken,
  .js-motion .tijdlijn-verhaal .stap-teken {
    stroke-dashoffset: 0 !important;
  }

  .js-motion [data-rapport] .mr-balk span,
  .js-motion .stappen .stap::before,
  .js-motion .tijdlijn-verhaal .stap::before {
    transform: none !important;
  }

  .btn:hover,
  .hero-visual .maandrapport-kaart:hover {
    transform: none !important;
  }
}

/* Tabelrijen: alleen opacity. transform op display:table-row is onbetrouwbaar
   (rijen kunnen dan uit hun kolomraster springen), dus geen translate hier. */
.js-motion tr[data-reveal] {
  transform: none;
}

/* Foutmeldingen nooit animeren: die moeten direct staan (opdracht punt 3). */
.form-melding,
.form-melding.fout {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---------- Envelop-scene: de factuurbrief ----------
   Alles is getekend in de EINDSTAND (klep open, factuur eruit met vinkje,
   logo-rij zichtbaar). Zonder JS en bij reduced motion is dat meteen wat je
   ziet; motion.js zet de beginstand (envelop dicht) en speelt een keer af.

   Twee dingen om te weten bij wijzigen:
   1. De klep is getekend met de punt OMHOOG (open). Dicht is rotateX(180deg)
      om de vouwlijn y=150. Dat is dezelfde vorm, dus de geometrie hoeft
      maar op een plek te kloppen.
   2. Vervang dit blok altijd op zijn werkelijke plek: het staat NA de
      Beweging-sectie. Een vervanging die het ervoor verwacht dupliceert
      stil alles ertussen en laat het oude blok winnen. */

.envelop-sectie {
  background: var(--salie-licht);
  padding: var(--lucht) 0;
  text-align: center;
}

.envelop-kop {
  color: var(--tekst-op-licht-kop);
  margin-bottom: 34px;
}

.envelop-scene {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
}

.envelop-scene .env-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  /* Nodig voor de 3D-klepflip: perspective werkt op de KINDEREN van het
     element waar het op staat, dus hier en niet op de klep zelf. */
  perspective: 900px;
}

/* Envelop: ivoor met dennengroen lijnwerk */
.env-body  { fill: #e6e1d4; }
.env-front { fill: var(--ivoor); stroke: var(--den); stroke-width: 2.5; stroke-linejoin: round; }
.env-flap-vlak { fill: #ece7da; stroke: var(--den); stroke-width: 2.5; stroke-linejoin: round; }

/* Dunne biesrand langs de klep-vouw */
.env-flap-bies {
  fill: none;
  stroke: var(--den);
  stroke-width: 1;
  opacity: 0.45;
}

/* Wax-zegel in champagne. Twee helften: de bovenste zit aan de klep en
   draait mee, de onderste blijft op de envelop achter. Dicht vormen ze
   samen een heel zegel, open lees je het als een verbroken zegel. */
.env-zegel-helft {
  fill: var(--goud);
  stroke: var(--den);
  stroke-width: 2;
  stroke-linejoin: round;
}

.env-brief-kop {
  fill: var(--ivoor);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
}

.env-verwerkt {
  fill: var(--salie-knop);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
}

/* Logo-rij ONDER de envelop, rustig */
.env-logos {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.env-logos li {
  margin: 0 5px 10px;
  background: var(--ivoor);
  border-radius: var(--rond);
  padding: 8px 11px;
  box-shadow: 0 4px 12px rgba(31, 59, 45, 0.12);
  display: flex;
  align-items: center;
}

/* In rust gedempt en grijs, op hover de echte merkkleur. Die hover stond
   er eerder al op (.koppelingen-lijst img:hover) en is bij de verhuizing
   van de logo-rij naar de envelop-scene verdwenen. */
.env-logos img {
  height: 19px;
  width: auto;
  display: block;
  filter: grayscale(1) opacity(0.8);
  transition: filter 0.2s var(--ease-uit);
}

/* Alleen waar er echt een aanwijzer is. Op touch bestaat hover niet en
   blijven veel browsers na een tik in de hover-stand hangen. */
@media (hover: hover) {
  .env-logos li:hover img {
    filter: grayscale(0) opacity(1);
  }
}

/* Zonder hover mag de leesbaarheid er niet van afhangen: daar staan de
   logo's iets minder gedempt, zodat ze uit zichzelf goed te lezen zijn. */
@media (hover: none) {
  .env-logos img {
    filter: grayscale(1) opacity(0.92);
  }
}

.env-logos img[alt="bol"] { height: 16px; }
.env-logos img[alt="Exact Online"] { height: 17px; }

.envelop-note {
  max-width: 60ch;
  margin: 30px auto 0;
  font-size: 1rem;
  color: var(--tekst-op-licht);
}

@media (min-width: 620px) {
  .env-logos { flex-wrap: nowrap; }
  .env-logos li { margin: 0 6px; padding: 9px 13px; }
  .env-logos img { height: 21px; }
  .env-logos img[alt="bol"] { height: 18px; }
  .env-logos img[alt="Exact Online"] { height: 19px; }
}

/* --- Beginstand + afspelen, alleen met JS ---
   Tijdlijn, eenmalig, totaal 1,95s:
     0,00-0,20  envelop wiebelt kort (anticipatie)
     0,20-0,70  klep klapt open, 3D-flip met verende easing
     0,55-1,15  factuur springt eruit, veert net voorbij en terug
     1,20-1,50  vinkje "Verwerkt"
     1,35-1,95  logo-rij, gestaggerd
     1,60-1,95  toelichting                                        */

.js-motion .envelop-scene.is-zichtbaar .env-svg {
  animation: env-wiebel 0.2s ease-in-out 1;
}

@keyframes env-wiebel {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-2deg); }
  70%      { transform: rotate(2deg); }
}

/* De klep. transform-box: view-box zet de oorsprong in viewBox-eenheden,
   zodat 200px 150px precies de vouwlijn is. */
.js-motion .envelop-scene .env-flap {
  transform-box: view-box;
  transform-origin: 200px 150px;
  transform: rotateX(180deg);
  transition: transform 0.5s var(--ease-veer) 0.2s;
}

.js-motion .envelop-scene.is-zichtbaar .env-flap {
  transform: rotateX(0deg);
}

/* De factuur springt omhoog: de verende easing schiet even voorbij de
   eindstand en veert terug. De opacity-stap is kort en valt binnen de
   sprong: dicht hoor je de factuur niet te zien, hij zit erin. */
.js-motion .envelop-scene .env-brief {
  transform-box: view-box;
  transform-origin: 200px 150px;
  transform: translateY(130px);
  opacity: 0;
  transition: transform 0.6s var(--ease-veer) 0.55s,
              opacity 0.18s linear 0.55s;
}

.js-motion .envelop-scene.is-zichtbaar .env-brief {
  transform: translateY(0);
  opacity: 1;
}

.js-motion .envelop-scene .env-vink {
  opacity: 0;
  transition: opacity 0.3s var(--ease-uit) 1.2s;
}

.js-motion .envelop-scene.is-zichtbaar .env-vink {
  opacity: 1;
}

.js-motion .envelop-scene .env-logos li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.32s var(--ease-uit), transform 0.32s var(--ease-uit);
  transition-delay: calc(1.35s + var(--i) * 0.07s);
}

.js-motion .envelop-scene.is-zichtbaar .env-logos li {
  opacity: 1;
  transform: none;
}

.js-motion .envelop-sectie .envelop-note {
  opacity: 0;
  transition: opacity 0.35s var(--ease-uit) 1.6s;
}

.js-motion .envelop-sectie.is-zichtbaar .envelop-note {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .envelop-scene.is-zichtbaar .env-svg {
    animation: none !important;
  }

  .js-motion .envelop-scene .env-flap,
  .js-motion .envelop-scene .env-brief,
  .js-motion .envelop-scene .env-logos li {
    transform: none !important;
  }

  .js-motion .envelop-scene .env-brief,
  .js-motion .envelop-scene .env-vink,
  .js-motion .envelop-scene .env-logos li,
  .js-motion .envelop-sectie .envelop-note {
    opacity: 1 !important;
  }
}