/* ============================================================
   SPYCKED SALES — styles.css
   Merksysteem uit de Brand Cheatsheet. Regels:
   - geen kleuren buiten het palet (tinten = zelfde kleur met opaciteit)
   - geen schaduw, gloed of effecten
   - fonthiërarchie: H1 · H2 · H3 · SECTIE (hoofdletters) · body
   ============================================================ */

@font-face{font-family:"Noka";src:url("fonts/Noka-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Noka";src:url("fonts/Noka-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Lato";src:url("fonts/Lato-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Lato";src:url("fonts/Lato-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

/* ============================================================
   1. MERKKLEUREN — bron: Brand Cheatsheet
   ============================================================ */
:root {
  --primary:  #28338F;   /* Primair blauw */
  --mint:     #B5E6D5;   /* Secundair */
  --yellow:   #EEF277;   /* Accent */
  --teal:     #3D6670;   /* Accent */
  --bg-alt:   #F9F9F9;   /* Achtergrond */
  --ink:      #1B2243;   /* Tekst */
  --white:    #ffffff;

  /* Tinten = merkkleur met opaciteit, dus géén nieuwe kleuren */
  --ink-72:   rgba(27, 34, 67, 0.72);
  --ink-55:   rgba(27, 34, 67, 0.55);
  --ink-12:   rgba(27, 34, 67, 0.12);
  --ink-08:   rgba(27, 34, 67, 0.08);
  --white-82: rgba(255, 255, 255, 0.82);
  --white-24: rgba(255, 255, 255, 0.24);
  --white-12: rgba(255, 255, 255, 0.12);
  --mint-35:  rgba(181, 230, 213, 0.35);

  /* Vormen: geen rondingen, maar geknipte hoeken en pijlpunten,
     afgeleid van het pijlsymbool in het logo. */
  --radius: 0;
  --knip: 26px;              /* hoek die wordt weggeknipt (vorm B) */
  --punt: 18px;              /* diepte van de pijlpunt (vorm C) */
  --maxw: 1080px;
  --schuin: 56px;            /* hoogte van de schuine sectie-overgangen */

  /* Standaard sectiethema = licht (wordt per sectie overschreven) */
  --sec-bg:      var(--white);
  --sec-text:    var(--ink);
  --sec-muted:   var(--ink-72);
  --sec-heading: var(--primary);
  --sec-line:    var(--ink-12);
  --sec-card:    var(--white);
  --sec-accent:  var(--primary);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   2. FONTHIËRARCHIE
   H1 · H2 · H3 · SECTIE (hoofdletters, Noka) · body (Lato)
   ============================================================ */
h1, h2, h3 {
  font-family: "Noka", "Lato", sans-serif;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sec-heading);
}

h1 { font-weight: 700; font-size: clamp(2.05rem, 4.6vw, 3.05rem); }
h2 { font-weight: 600; font-size: clamp(1.55rem, 3vw, 2.1rem); }
h3 { font-weight: 600; font-size: 1.15rem; }

p { color: var(--sec-muted); }
a { color: inherit; text-decoration: none; }

/* SECTIE-label — H3-niveau in hoofdletters, dus Noka */
.eyebrow {
  font-family: "Noka", "Lato", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--sec-accent);
  margin-bottom: 18px;
}
/* Sectielabel in tekstkleur in plaats van de accentkleur */
.eyebrow-ink { color: var(--ink); }

/* ============================================================
   HET PIJLSYMBOOL — komt terug als opsommingsteken, accent
   en groot watermerk. Ingekleurd via CSS, dus altijd een
   merkkleur en nooit een nieuwe.
   ============================================================ */
@supports (mask-image: url("assets/pijl-symbool.svg")) or (-webkit-mask-image: url("assets/pijl-symbool.svg")) {
  .eyebrow::before {
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.6em;
    vertical-align: -0.06em;
    background-color: currentColor;
    -webkit-mask: url("assets/pijl-symbool.svg") no-repeat center / contain;
    mask: url("assets/pijl-symbool.svg") no-repeat center / contain;
  }

  /* Groot, rustig watermerk in de gekleurde secties */
  .watermerk { position: relative; overflow: hidden; }
  .watermerk > .wrap { position: relative; z-index: 1; }
  .watermerk::after {
    content: "";
    position: absolute;
    pointer-events: none;
    top: 50%;
    right: -7%;
    /* --drift wordt bij het scrollen gezet; zonder JavaScript blijft hij 0 */
    transform: translateY(calc(-50% + var(--drift, 0px)));
    width: min(52vw, 470px);
    aspect-ratio: 1 / 1;
    background-color: var(--mint);
    opacity: 0.12;
    -webkit-mask: url("assets/logo-icon.svg") no-repeat center / contain;
    mask: url("assets/logo-icon.svg") no-repeat center / contain;
  }
  .watermerk-links::after { right: auto; left: -9%; transform: translateY(calc(-50% + var(--drift, 0px))) scaleX(-1); }

  /* Op een smal scherm zou het watermerk de tekst in de weg zitten */
  @media (max-width: 900px) {
    .watermerk::after { display: none; }
  }
}

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

section {
  padding: 88px 0;
  background: var(--sec-bg);
  color: var(--sec-text);
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--primary); color: var(--white);
  padding: 12px 20px; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; top: 0; }

:focus-visible { outline: 3px solid var(--sec-accent); outline-offset: 2px; }

/* Alleen voor schermlezers — wel in de code, niet in beeld */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   3. SECTIETHEMA'S — één merkkleur per sectie
   Leesbaarheid: donkere tekst op licht, witte tekst op donker.
   ============================================================ */
.sec-light {
  --sec-bg: var(--white);      --sec-text: var(--ink);
  --sec-muted: var(--ink-72);  --sec-heading: var(--primary);
  --sec-line: var(--ink-12);   --sec-card: var(--white);
  --sec-accent: var(--primary);
}
.sec-grey {
  --sec-bg: var(--bg-alt);     --sec-text: var(--ink);
  --sec-muted: var(--ink-72);  --sec-heading: var(--primary);
  --sec-line: var(--ink-12);   --sec-card: var(--white);
  --sec-accent: var(--primary);
}
.sec-mint {
  --sec-bg: var(--mint);       --sec-text: var(--ink);
  --sec-muted: var(--ink-72);  --sec-heading: var(--primary);
  --sec-line: var(--ink-12);   --sec-card: var(--white);
  --sec-accent: var(--primary);
  /* Mint op mint is onzichtbaar, dus het vlak achter de foto wordt blauw */
  --sec-fotokader: var(--primary);
}
/* Geel op blauw en geel op teal: de twee sterkste combinaties uit
   de leesbaarheidstest in de cheatsheet. Titels in geel, lopende
   tekst in wit — geel op klein formaat leest trager. */
.sec-blue {
  --sec-bg: var(--primary);    --sec-text: var(--white);
  --sec-muted: var(--white-82);--sec-heading: var(--yellow);
  --sec-line: var(--white-24); --sec-card: var(--white);
  --sec-accent: var(--yellow);
  /* Het vlak achter de foto pikt het geel van de titel op */
  --sec-fotokader: var(--yellow);
}
.sec-teal {
  --sec-bg: var(--teal);       --sec-text: var(--white);
  --sec-muted: var(--white-82);--sec-heading: var(--yellow);
  --sec-line: var(--white-24); --sec-card: var(--white);
  --sec-accent: var(--yellow);
}
/* Het ruiticoon pikt het geel op in de blauwe sectie */
.sec-blue .craft-icoon { background: var(--yellow); }

/* Kaarten binnen een donkere sectie blijven wit van binnen */
.sec-blue .card-inner, .sec-teal .card-inner {
  --sec-text: var(--ink);
  --sec-muted: var(--ink-72);
  --sec-heading: var(--primary);
  --sec-line: var(--ink-12);
  --sec-accent: var(--primary);
  color: var(--ink);
}

/* ============================================================
   3b. VORMEN — geknipte hoeken en pijlpunten
   B = twee hoeken weg, loopt schuin zoals de pijl
   C = pijlpunt aan de rechterkant, wijst vooruit
   ============================================================ */
.vorm-b {
  border-radius: 0;
  clip-path: polygon(var(--knip) 0, 100% 0, 100% calc(100% - var(--knip)),
                     calc(100% - var(--knip)) 100%, 0 100%, 0 var(--knip));
}
.vorm-c {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--punt)) 0, 100% 50%,
                     calc(100% - var(--punt)) 100%, 0 100%);
}
@media (max-width: 560px) {
  :root { --knip: 18px; --punt: 14px; }
}

/* ============================================================
   4. KNOPPEN — allemaal met een pijlpunt
   Gevulde vlakken in plaats van omlijningen, want een rand
   wordt door de schuine vorm afgesneden.
   ============================================================ */
.btn {
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  padding: 15px 40px 15px 28px;
  border: none;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--punt)) 0, 100% 50%,
                     calc(100% - var(--punt)) 100%, 0 100%);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  transition: background 0.18s ease, color 0.18s ease;
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--white); }

/* Tweede keuze: mint vlak met donkere tekst */
.btn-outline { background: var(--mint); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--white); }

/* Knop op een donkere achtergrond: wit vlak, blauwe tekst */
.sec-blue .btn-invert, .sec-teal .btn-invert {
  background: var(--white); color: var(--primary);
}
.sec-blue .btn-invert:hover, .sec-teal .btn-invert:hover {
  background: var(--mint); color: var(--ink);
}

/* ============================================================
   5. NAV
   ============================================================ */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-12);
}
nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 16px;
}
.logo { display: inline-block; line-height: 0; }
.logo img { height: 26px; width: auto; display: block; }

.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font-size: 0.95rem; color: var(--ink-72); font-weight: 700; }
.nav-links a:hover { color: var(--primary); }
.nav-links .btn { padding: 10px 20px; font-size: 0.9rem; color: var(--white); }

/* Menuknop voor gsm */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid var(--ink-12);
  border-radius: var(--radius);
  padding: 9px 12px;
  cursor: pointer;
  color: var(--primary);
  font-family: "Noka", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--ink-12);
    padding: 8px 24px 20px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: 14px 0;
    border-bottom: 1px solid var(--ink-12);
    font-size: 1.05rem;
  }
  .nav-links .btn {
    margin-top: 16px;
    text-align: center;
    padding: 14px 20px;
    border-bottom: none;
    font-size: 1rem;
  }
}

/* ============================================================
   6. HERO
   ============================================================ */
.hero {
  padding: 90px 0 78px;
  background: var(--sec-bg);
  color: var(--sec-text);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero .subline {
  font-size: 1.2rem;
  color: var(--sec-muted);
  margin-bottom: 32px;
  /* 40ch houdt de alinea op zes regels. Op 36ch werden het er zeven,
     wat de hero onnodig hoog maakte zonder dat er een woord bij kwam. */
  max-width: 40ch;
}
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note {
  margin-top: 22px;
  font-size: 0.95rem;
  color: var(--sec-text);
  border-left: 3px solid var(--mint);
  padding-left: 14px;
}

/* Foto met een mint vlak dat er achter uitsteekt — haalt het beeld
   uit het strakke rechthoekje zonder schaduw te gebruiken. */
.beeldkader { position: relative; }
.beeldkader::before {
  content: "";
  position: absolute;
  inset: -22px -22px 26px 26px;
  background: var(--sec-fotokader, var(--mint));
  clip-path: polygon(var(--knip) 0, 100% 0, 100% calc(100% - var(--knip)),
                     calc(100% - var(--knip)) 100%, 0 100%, 0 var(--knip));
}
.beeldkader .photo,
.beeldkader img { position: relative; }
@media (max-width: 820px) {
  .beeldkader::before { inset: -14px -14px 18px 18px; }
}

.photo {
  aspect-ratio: 4 / 5;
  border-radius: 0;
  clip-path: polygon(var(--knip) 0, 100% 0, 100% calc(100% - var(--knip)),
                     calc(100% - var(--knip)) 100%, 0 100%, 0 var(--knip));
  background-size: cover;
  background-position: center 20%;
}

/* Accentwoord in de grote titel — mint markering, geen nieuwe kleur */
h1 .accent {
  background: linear-gradient(to top, var(--mint) 0.24em, transparent 0.24em);
  padding: 0 0.06em;
}
.photo.hero-shot { background-image: url("assets/hero.jpg?v=3"); }
/* Deze foto staat in zwart-wit in het bestand zelf, niet via een filter:
   dat scheelt de browser werk. Kleur terug? Dan moet de foto opnieuw
   uit LA-0826-SPY-AZ-109 gesneden worden. */
.photo.over-foto { background-image: url("assets/over-ruben.jpg?v=2"); }

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero .photo { max-width: 320px; }
  .hero .subline { max-width: none; }
}

/* ============================================================
   6b. CIJFERBALK — witte kaart die over de sectiegrens ligt
   ============================================================ */
.cijferbalk-wrap {
  position: relative;
  z-index: 3;
  margin-bottom: -64px;
}
/* Vier tegels naast elkaar, maar alleen zolang elke bovenregel op één
   regel past. Lukt dat niet meer, dan gaat de balk naar twee kolommen en
   daarna naar één. Liever een tegel onder elkaar dan een gebroken kop:
   een afgebroken "0 / tussenpersonen" leest als een fout.
   minmax(0, 1fr) houdt de kolommen exact even breed — met een kaal 1fr
   duwt een lang woord zijn eigen kolom breder en knijpt de rest samen. */
.cijferbalk {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--mint);
  border: none;
}
.cijferbalk > div {
  padding: 26px 22px;
  border-right: 1px solid var(--ink-12);
}
.cijferbalk > div:last-child { border-right: none; }
.cijferbalk dt {
  font-family: "Noka", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.cijferbalk dd {
  margin: 6px 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-72);
}

@media (max-width: 1039px) {
  .cijferbalk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cijferbalk > div:nth-child(2n) { border-right: none; }
  .cijferbalk > div:nth-child(-n+2) { border-bottom: 1px solid var(--ink-12); }
}
@media (max-width: 599px) {
  .cijferbalk { grid-template-columns: minmax(0, 1fr); }
  .cijferbalk > div { padding: 20px 22px; border-right: none; }
  .cijferbalk > div:nth-child(-n+3) { border-bottom: 1px solid var(--ink-12); }
  .cijferbalk dt { font-size: 1.3rem; }
}

/* ============================================================
   6c. SCHUINE SECTIE-OVERGANGEN
   De volgende sectie schuift met een schuine rand over de vorige,
   zodat de pagina niet uit kaarsrechte blokken bestaat.
   ============================================================ */
/* .schuin-op   = de rand loopt omhoog naar rechts
   .schuin-af   = de rand loopt omlaag naar rechts
   .ruimte-onder = extra bodemruimte in de sectie eróver, zodat de
                   schuine rand geen tekst afsnijdt. */
.schuin-op, .schuin-af {
  margin-top: calc(var(--schuin) * -1);
  padding-top: calc(88px + var(--schuin));
}
.schuin-op { clip-path: polygon(0 var(--schuin), 100% 0, 100% 100%, 0 100%); }
.schuin-af { clip-path: polygon(0 0, 100% var(--schuin), 100% 100%, 0 100%); }
.ruimte-onder { padding-bottom: calc(88px + var(--schuin)); }
/* Extra kopruimte omdat de cijferbalk over deze sectie heen ligt */
.onder-cijferbalk { padding-top: 132px; }
/* Extra bodemruimte voor de foto die uit de volgende sectie omhoog steekt */
.ruimte-foto { padding-bottom: 150px; }
@media (max-width: 760px) { .ruimte-foto { padding-bottom: 100px; } }

@media (max-width: 760px) {
  :root { --schuin: 26px; }
}

/* ============================================================
   7. TEKSTBLOKKEN
   ============================================================ */
.lead {
  font-size: 1.2rem;
  color: var(--sec-text);
  max-width: 60ch;
  margin-bottom: 12px;
}
.section-intro { max-width: 64ch; margin-bottom: 44px; }
/* Zonder dit plakt de eerste zin tegen de onderkant van de H2 */
h2 + .section-intro { margin-top: 20px; }
.section-intro p { font-size: 1.05rem; }
.section-intro p + p { margin-top: 12px; }

.note {
  margin-top: 26px;
  font-size: 0.95rem;
  color: var(--sec-muted);
  max-width: 72ch;
}

/* ============================================================
   8. KAARTEN (vakmanschap)
   ============================================================ */
.craft-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
.craft {
  background: var(--sec-card);
  border: none;
  padding: 32px 26px 30px;
  text-align: center;
}
/* Ruitvormig icoon, gecentreerd boven de titel */
.craft-icoon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  background: var(--mint);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  display: grid;
  place-items: center;
}
.craft-icoon svg {
  width: 26px;
  height: 26px;
  color: var(--primary);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.craft h3 { color: var(--primary); font-size: 1.08rem; margin-bottom: 10px; }
.craft p { color: var(--ink-72); font-size: 0.95rem; }
@media (max-width: 760px) { .craft-grid { grid-template-columns: 1fr; } }

/* ============================================================
   8a-bis. UITROEP — één boodschap die uit de sectie moet springen.
   Mint vlak, dus het werkt zowel op een lichte als op een
   gekleurde sectie zonder een nieuwe kleur toe te voegen.
   ============================================================ */
.uitroep {
  background: var(--mint);
  color: var(--ink);
  margin-top: 40px;
  /* Even breed als de lopende tekst eromheen; over de volle sectiebreedte
     werd de regel te lang en brak het kolomritme. */
  max-width: 64ch;
  padding: 30px 34px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 18px;
}
.uitroep .dot {
  width: 16px;
  height: 16px;
  margin-top: 8px;
  background: var(--primary);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.uitroep h3 { color: var(--primary); margin-bottom: 10px; }
.uitroep p { color: var(--ink-72); font-size: 0.98rem; }
.uitroep p + p { margin-top: 10px; }
@media (max-width: 560px) {
  .uitroep { padding: 24px 22px; column-gap: 14px; }
}

/* ============================================================
   8b. FOTO'S IN DE LAYOUT
   Vervang de bestanden in /assets door je eigen foto's; de
   opmaak past zich aan zolang de verhouding ongeveer klopt.
   ============================================================ */
.beeldband { margin: 0; }
.beeldband img {
  display: block;
  width: 100%;
  height: clamp(200px, 26vw, 360px);
  object-fit: cover;
}
/* Bij een gevel van onderuit ligt het onderwerp in de bovenste helft.
   Een hoger snijpunt houdt de lucht en de fries in beeld, ook wanneer
   de band op brede schermen heel laag wordt. */
.beeldband.gevel img { object-position: center 18%; }

/* ------------------------------------------------------------
   PARALLAX — de foto in de band schuift trager dan de pagina.
   De klasse .parallax wordt door JavaScript gezet, dus zonder
   JavaScript blijft de band gewoon een stilstaande foto.
   ------------------------------------------------------------ */
.beeldband.parallax {
  height: clamp(200px, 26vw, 360px);
  overflow: hidden;
}
.beeldband.parallax img {
  height: 132%;                       /* speelruimte om in te schuiven */
  transform: translate3d(0, var(--verschuiving, 0px), 0);
}

.intro-met-beeld {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 44px;
  align-items: center;
}
.intro-met-beeld .section-intro { margin-bottom: 0; }
.beeld-vierkant { margin: 0; }
.beeld-vierkant img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}
/* Staand beeld, zelfde 4:5 als de foto's in de hero en bij Over mij */
.beeld-staand { margin: 0; }
.beeld-staand img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
@media (max-width: 760px) {
  .intro-met-beeld { grid-template-columns: 1fr; gap: 28px; }
  .beeld-vierkant { max-width: 340px; }
}

/* Tekst links op zijn vertrouwde 64ch, foto rechts. De fotokolom neemt
   wat overblijft, dus haar rechterrand valt samen met de rand van de
   kaartenrij eronder.
   minmax(0, ...) is hier niet optioneel: zonder die nul eist de foto
   haar intrinsieke breedte (900px) op als minimum en knijpt ze de
   tekstkolom tot een strookje. */
.tekst-met-beeld {
  display: grid;
  grid-template-columns: minmax(0, 64ch) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  margin-top: 20px;
}
/* Onder deze breedte blijft er te weinig over voor de foto */
@media (max-width: 1000px) {
  .tekst-met-beeld { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tekst-met-beeld .beeld-staand { max-width: 340px; }
}

/* Vanaf tablet loopt de staande foto van de onderkant van de titel tot
   de onderkant van de tekstkolom. Daarom geen vaste verhouding hier: de
   hoogte komt van de rij, de foto vult ze op. De negatieve marge haalt
   de margin-top van de rij weg, zodat de bovenrand op de titel uitkomt. */
@media (min-width: 761px) {
  .tekst-met-beeld { align-items: stretch; }
  .tekst-met-beeld .beeld-staand { margin-top: -20px; }
  .tekst-met-beeld .beeld-staand img { aspect-ratio: auto; height: 100%; }
  /* Bij een korte tekst is de kolom breder dan de foto mag worden. Vaste
     breedte tegen de rechterrand dus, en geen negatieve marge: de titel zit
     daar mee in de kolom, dus de foto begint gewoon bovenaan. Op 300 px komt
     de hoogte vanzelf rond 4:5 uit, dus er valt nauwelijks iets weg. */
  .tekst-met-beeld .beeld-vast {
    margin-top: 0;
    width: 300px;
    max-width: 100%;
    margin-left: auto;
  }
  /* De naloop onder de laatste alinea eruit, anders eindigt de foto een
     regelhoogte lager dan de tekst waarop hij moet uitlijnen. */
  .tekst-met-beeld:has(.beeld-vast) .tekstkolom > :last-child,
  .tekst-met-beeld:has(.beeld-vast) .section-intro > :last-child { margin-bottom: 0; }
}

/* ============================================================
   9. VERGELIJKINGSTABEL
   ============================================================ */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  margin-top: 40px;
}
.compare {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: none;
  font-size: 0.98rem;
  color: var(--ink);
}
.compare th, .compare td {
  padding: 18px 22px;
  text-align: left;
  border-bottom: 1px solid var(--ink-12);
  vertical-align: middle;
}
.compare thead th {
  font-family: "Noka", sans-serif;
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  font-size: 1.02rem;
  padding-top: 20px;
  padding-bottom: 20px;
}
/* De eigen kolom is de held: geel kopje, mintvlak, donkere tekst */
.compare thead th.col-spycked { background: var(--yellow); color: var(--ink); }
.compare tbody th {
  font-family: "Noka", sans-serif;
  font-weight: 600;
  color: var(--primary);
  width: 24%;
}
.compare .col-spycked {
  background: var(--mint-35);
  color: var(--ink);
  font-weight: 700;
  width: 40%;
}
/* De andere kolom mag rustig naar de achtergrond zakken */
.compare td:not(.col-spycked) { color: var(--ink-55); }
.compare tr:last-child td, .compare tr:last-child th { border-bottom: none; }

/* Op gsm wordt elke rij een blokje: geen horizontaal geschuif meer */
@media (max-width: 680px) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead { display: none; }
  .compare tr { border-bottom: 1px solid var(--ink-12); padding: 6px 0 14px; }
  .compare tr:last-child { border-bottom: none; }
  .compare th, .compare td { border-bottom: none; padding: 8px 20px; }
  .compare tbody th { width: auto; font-size: 1.1rem; padding-top: 16px; }
  .compare td, .compare .col-spycked { width: auto; margin: 0 14px; padding: 12px 16px; }
  .compare td::before {
    content: attr(data-kolom);
    display: block;
    font-family: "Noka", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: 3px;
  }
  .compare td:not(.col-spycked)::before { color: var(--ink-55); }
}

/* ============================================================
   10. HOE HET WERKT — stappen
   ============================================================ */
/* Zigzag-tijdlijn: de stappen staan om beurten links en rechts
   van een verticale lijn, met een ruit als markering. */
.steps { position: relative; margin-top: 48px; }
.steps::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--mint);
  transform: translateX(-50%);
}
.step {
  display: grid;
  grid-template-columns: 1fr 68px 1fr;
  column-gap: 30px;
  align-items: start;
  padding: 0 0 46px;
  border: none;
}
.step:last-child { padding-bottom: 0; border: none; }

.step-num {
  grid-column: 2;
  grid-row: 1;
  width: 58px;
  height: 58px;
  justify-self: center;
  background: var(--primary);
  color: var(--white);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  display: grid;
  place-items: center;
  font-family: "Noka", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.step:nth-child(even) .step-num { background: var(--teal); }

/* De stappen wisselen om beurten van kant, maar de tekst blijft links
   uitgelijnd. Rechts uitgelijnde lopende tekst dwingt het oog elke regel
   opnieuw de beginpositie te zoeken, en dat is bij vier alinea's te veel. */
.step-inhoud { grid-column: 3; grid-row: 1; }
.step:nth-child(odd) .step-inhoud { grid-column: 1; }

.step h3 { margin-bottom: 10px; }
.step .when {
  display: inline-block;
  font-family: "Noka", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--yellow);
  padding: 4px 18px 4px 11px;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
  margin-left: 10px;
  vertical-align: middle;
}
.step p { font-size: 1rem; }
/* Zonder dit plakken de alinea's binnen een stap aan elkaar tot één
   grijs blok en valt er niets meer diagonaal te lezen. */
.step-inhoud p + p { margin-top: 12px; }

/* Tussenkopjes binnen een stap. Wie enkel deze leest, snapt het
   traject al. Twee klassen diep, want anders winnen ".step p" op
   lettergrootte en ".step-inhoud p + p" op de marge erboven. */
.step-inhoud .stap-kop {
  font-family: "Noka", "Lato", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.3;
  color: var(--sec-accent);
  margin: 24px 0 9px;
}
.step-inhoud .stap-kop:first-child { margin-top: 0; }

.stap-lijst {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
}
.stap-lijst li {
  position: relative;
  padding-left: 26px;
  font-size: 1rem;
  color: var(--sec-muted);
}
.stap-lijst li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 9px; height: 9px;
  background: var(--primary);
  border-radius: 50%;
}
/* Lijst gevolgd door een gewone alinea mag wat lucht krijgen */
.stap-lijst + p { margin-top: 14px; }

.stap-note {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--sec-muted);
  margin-top: 8px;
}

.step-highlight {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius);
  padding: 18px 24px;
  margin: 16px 0 4px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
}
.step-highlight .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--mint); flex-shrink: 0;
}
/* ============================================================
   11b. HET TRAJECT — de lijn tekent zich mee tijdens het scrollen
   ------------------------------------------------------------
   Alles hieronder hangt aan .animeert, en die klasse wordt pas door
   JavaScript gezet. Zonder JavaScript, of als iemand beweging heeft
   uitgezet, staat de sectie er dus gewoon volledig — niks verborgen.
   ============================================================ */

/* Het afgelegde stuk, in blauw over de mint lijn heen. De hoogte komt
   uit --voortgang, dat bij het scrollen in pixels wordt bijgesteld. */
.steps.animeert::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 2px;
  height: var(--voortgang, 0px);
  background: var(--primary);
  transform: translateX(-50%);
}

/* Ruit die nog niet bereikt is: bleek en een tikje kleiner. */
.steps.animeert .step-num {
  background: var(--mint);
  color: var(--ink);
  transform: scale(0.86);
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.steps.animeert .step.bereikt .step-num {
  background: var(--primary);
  color: var(--white);
  transform: none;
}
.steps.animeert .step:nth-child(even).bereikt .step-num { background: var(--teal); }

/* De inhoud komt binnen zodra de stap in beeld schuift. */
.steps.animeert .step-inhoud {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.steps.animeert .step.bereikt .step-inhoud { opacity: 1; transform: none; }

/* Op een breed scherm schuift elke stap naar de lijn toe in plaats van
   omhoog: links van de lijn dus naar rechts, rechts ervan naar links. */
@media (min-width: 801px) {
  .steps.animeert .step:nth-child(odd) .step-inhoud { transform: translateX(-14px); }
  .steps.animeert .step:nth-child(even) .step-inhoud { transform: translateX(14px); }
  .steps.animeert .step.bereikt .step-inhoud { transform: none; }
}

/* Op een smal scherm loopt de lijn links en staat alles op één rij */
@media (max-width: 800px) {
  .steps::before,
  .steps.animeert::after { left: 29px; transform: none; }
  .step { grid-template-columns: 58px 1fr; column-gap: 22px; padding-bottom: 36px; }
  .step-num { grid-column: 1; justify-self: start; width: 52px; height: 52px; font-size: 0.95rem; }
  .step-inhoud,
  .step:nth-child(odd) .step-inhoud { grid-column: 2; }
}
@media (max-width: 560px) {
  .step .when { display: inline-block; margin-left: 0; margin-top: 8px; }
}

/* ============================================================
   11. OVER MIJ (op mint)
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: stretch;
}
/* De maat zit op het kader, niet op de foto: anders steekt het blauwe
   vlak erachter breder uit dan de foto zelf. */
.about-grid .beeldkader { max-width: 460px; }
.about-grid .photo { max-width: 100%; }

/* Vanaf tablet loopt de foto over de volle hoogte van de tekst mee, zodat
   de linkerkolom niet half leeg blijft. Geen vaste verhouding dus: de
   hoogte komt van de rij en de foto vult ze op. De uitsnede van deze foto
   ligt dicht bij die kolomverhouding, dus er valt nauwelijks iets weg. */
@media (min-width: 761px) {
  .about-grid .photo { aspect-ratio: auto; height: 100%; }
}
.about p { margin-bottom: 16px; font-size: 1.05rem; }
.about ul { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.about li {
  padding-left: 26px;
  position: relative;
  color: var(--ink);
  font-size: 1rem;
}
.about li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 9px; height: 9px;
  background: var(--primary);
  border-radius: 50%;
}
@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; gap: 34px; }
  .about-grid .beeldkader { max-width: 300px; }
}

/* ============================================================
   12. PAKKETTEN
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
  align-items: stretch;
}
.card {
  background: var(--mint-35);
  border: none;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card h3 { color: var(--primary); margin-bottom: 6px; font-size: 1.25rem; }
.card .card-sub { font-size: 0.92rem; color: var(--ink-72); margin-bottom: 20px; min-height: 44px; }
.card .price {
  font-family: "Noka", sans-serif;
  font-size: 1.9rem; font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px; letter-spacing: -0.02em;
}
.card .price small { font-size: 0.85rem; font-weight: 400; color: var(--ink-72); }
.card .price-note { font-size: 0.85rem; color: var(--ink-72); margin-bottom: 22px; }
/* Losse regel bij de prijs, geen onderdeel van de opsomming. Mint
   kantlijntje zoals bij .hero-note, zodat het als noot leest. */
.card .prijs-extra {
  margin: 0 0 24px;
  padding-left: 13px;
  border-left: 3px solid var(--mint);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-72);
}
.card.kaart-traject .prijs-extra { color: var(--white-82); }

.card ul { list-style: none; margin-bottom: 28px; display: grid; gap: 11px; }
.card li { padding-left: 26px; position: relative; font-size: 0.95rem; color: var(--ink); }
.card li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--mint);
  border: 1.5px solid var(--primary);
}
.card .btn { margin-top: auto; text-align: center; }

/* Het traject is het hoofdaanbod, dus krijgt het een blauw vlak met een
   gele prijs. De twee ingangen ernaast blijven licht. */
.card.kaart-traject {
  background: var(--primary);
  position: relative;
}
.card.kaart-traject h3 { color: var(--white); }
.card.kaart-traject .price { color: var(--yellow); }
.card.kaart-traject .card-sub, .card.kaart-traject .price-note, .card.kaart-traject .price small { color: var(--white-82); }
.card.kaart-traject li { color: var(--white); }
.card.kaart-traject li::before { background: var(--mint); border-color: var(--mint); }
/* Label voor als er ooit een pakket uitgelicht wordt */
.card .tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--yellow);
  color: var(--ink);
  font-family: "Noka", sans-serif;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 6px 22px 6px 14px;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  margin-bottom: 14px;
}
.card.kaart-traject .btn-invert { background: var(--white); color: var(--primary); }
.card.kaart-traject .btn-invert:hover { background: var(--yellow); color: var(--ink); }

@media (max-width: 880px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .card .card-sub { min-height: 0; }
}

/* ============================================================
   12b. TWEE KOLOMMEN — Jouw kant en mijn kant · Is dit iets voor jou
   ============================================================ */
.duo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 44px;
  align-items: stretch;
}
@media (max-width: 820px) {
  .duo-grid { grid-template-columns: 1fr; }
}

.duo-kaart {
  background: var(--white);
  padding: 34px 30px;
  height: 100%;
}
.duo-kaart h3 { color: var(--primary); font-size: 1.2rem; margin-bottom: 20px; }
.duo-kaart ul { list-style: none; display: grid; gap: 13px; }
.duo-kaart li {
  position: relative;
  padding-left: 28px;
  font-size: 0.98rem;
  color: var(--ink);
}
.duo-kaart li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 13px; height: 13px;
  background: var(--primary);
}
.duo-kaart-jij { background: var(--mint); }
.duo-slot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-12);
  font-size: 0.95rem;
  color: var(--ink-72);
}

/* Kwalificatieblok: wel of niet iets voor jou */
.kwal-kaart {
  background: var(--white);
  padding: 32px 30px;
  height: 100%;
}
.kwal-kaart h3 { font-size: 1.15rem; margin-bottom: 20px; }
.kwal-kaart ul { list-style: none; display: grid; gap: 14px; }
.kwal-kaart li {
  position: relative;
  padding-left: 32px;
  font-size: 0.98rem;
  line-height: 1.55;
}

.kwal-wel { background: var(--mint); }
.kwal-wel h3 { color: var(--primary); }
.kwal-wel li { color: var(--ink); }
.kwal-wel li::before {
  content: "";
  position: absolute;
  left: 4px; top: 3px;
  width: 8px; height: 15px;
  border: solid var(--primary);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Het onderscheid zit in de achtergrond, niet in vervaagde tekst.
   Beide kolommen worden even goed gelezen; alleen de linkerkolom
   krijgt kleur, want dat is de kolom waarin je jezelf wél herkent.
   De kruisjes staan in teal: een merkkleur die duidelijk verschilt
   van het blauwe vinkje, zonder naar rood te grijpen. */
.kwal-niet { background: var(--white); }
.kwal-niet h3 { color: var(--teal); }
.kwal-niet li { color: var(--ink); }
.kwal-niet li::before,
.kwal-niet li::after {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 16px; height: 3px;
  background: var(--teal);
}
.kwal-niet li::before { transform: rotate(45deg); }
.kwal-niet li::after { transform: rotate(-45deg); }

/* ============================================================
   13. VEELGESTELDE VRAGEN
   ============================================================ */
/* Uitklapbare vragen. <details> houdt het antwoord in de pagina staan,
   ook als het dichtgeklapt is — belangrijk voor Google en AI-antwoorden. */
.faq-lijst { margin-top: 40px; max-width: 82ch; }

.faq-item { border-top: 2px solid var(--mint); }
.faq-item:last-child { border-bottom: 2px solid var(--mint); }

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover h3 { color: var(--teal); }
.faq-item summary h3 {
  margin: 0;
  font-size: 1.12rem;
  transition: color 0.18s ease;
}
.faq-item summary::after {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 4px;
  background-color: var(--primary);
  -webkit-mask: url("assets/pijl-symbool.svg") no-repeat center / contain;
  mask: url("assets/pijl-symbool.svg") no-repeat center / contain;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }

.faq-item:not([open]) > .faq-antwoord { display: none; }
.faq-antwoord { padding: 0 46px 24px 0; }
.faq-antwoord p { font-size: 0.99rem; }
.faq-antwoord p + p { margin-top: 12px; }

@media (max-width: 560px) {
  .faq-item summary { gap: 16px; }
  .faq-antwoord { padding-right: 20px; }
}

/* ============================================================
   14. CONTACT (op teal)
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 44px;
  align-items: start;
  margin-top: 40px;
}
.booking-card {
  background: var(--white);
  border-radius: 0;
  padding: 14px;
  overflow: hidden;
}
.booking-card iframe {
  width: 100%;
  height: 760px;
  border: 0;
  display: block;
}
@media (max-width: 900px) { .booking-card iframe { height: 900px; } }

/* Wat er staat zolang de agenda niet geladen is */
.agenda-aanzet {
  padding: 54px 34px;
  text-align: center;
  color: var(--ink);
}
.agenda-aanzet p { margin: 0 auto 16px; max-width: 46ch; color: var(--ink-72); }
/* Twee klassen diep, anders wint ".agenda-aanzet p" op de kleur */
.agenda-aanzet .agenda-titel {
  font-family: "Noka", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary);
}
.agenda-aanzet .btn { margin: 6px 0 18px; }
.agenda-klein { font-size: 0.88rem; }
.agenda-klein a { color: var(--primary); text-decoration: underline; }

.contact-links { display: grid; gap: 12px; margin-bottom: 26px; }
.contact-links a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 32px 16px 22px;
  border: none;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--punt)) 0, 100% 50%,
                     calc(100% - var(--punt)) 100%, 0 100%);
  background: var(--white);
  color: var(--ink);
  transition: background 0.18s ease, color 0.18s ease;
}
.contact-links a:hover { background: var(--mint); color: var(--ink); }
.contact-links .lbl {
  font-family: "Noka", sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}
.slotline { font-size: 1.15rem; color: var(--white); font-weight: 700; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   15. FOOTER
   ============================================================ */
footer {
  background: var(--ink);
  color: var(--white-82);
  padding: 40px 0;
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.9rem;
}
footer .logo img { height: 24px; }
.footer-tekst { display: grid; gap: 8px; }
.footer-wettelijk { font-size: 0.82rem; line-height: 1.6; }
@media (min-width: 701px) { .footer-tekst { text-align: right; } }
footer a { color: var(--mint); }
footer a:hover { color: var(--white); }

/* ============================================================
   16. BEWEGING BEPERKEN
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ============================================================
   17. PIJL ALS OPSOMMINGSTEKEN + PATROONSTROOK
   Staat achteraan zodat de rondjes hierboven de terugvaloptie
   blijven voor browsers die dit niet aankunnen.
   ============================================================ */
@supports (mask-image: url("assets/pijl-symbool.svg")) or (-webkit-mask-image: url("assets/pijl-symbool.svg")) {
  .card li::before,
  .about li::before,
  .duo-kaart li::before,
  .stap-lijst li::before,
  .step-highlight .dot {
    border: none;
    border-radius: 0;
    background-color: var(--primary);
    -webkit-mask: url("assets/pijl-symbool.svg") no-repeat center / contain;
    mask: url("assets/pijl-symbool.svg") no-repeat center / contain;
  }
  .card li::before { width: 13px; height: 13px; top: 8px; }
  .about li::before { width: 13px; height: 13px; top: 8px; }
  .duo-kaart li::before { width: 13px; height: 13px; top: 7px; }
  .stap-lijst li::before { width: 12px; height: 12px; top: 8px; }
  .card.featured li::before { background-color: var(--mint); }
  .step-highlight .dot { width: 15px; height: 15px; background-color: var(--yellow); }

  /* Strook pijltjes als scheiding boven de footer en op de rechte
     overgangen tussen secties. Niet op de schuine randen — daar
     zou het lintje mee afgesneden worden. */
  footer, .lint-boven { position: relative; }
  footer::before, .lint-boven::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 20px;
    background-color: var(--mint);
    opacity: 0.5;
    -webkit-mask: url("assets/patroon-strook.svg") repeat-x left center / auto 20px;
    mask: url("assets/patroon-strook.svg") repeat-x left center / auto 20px;
    pointer-events: none;
  }
  /* Op lichte vlakken is mint te flauw, dan wordt het lintje blauw */
  .sec-light.lint-boven::before,
  .sec-grey.lint-boven::before,
  .sec-mint.lint-boven::before {
    background-color: var(--primary);
    opacity: 0.3;
  }
  .lint-boven > .wrap { position: relative; }
}