/* ══════════════════════════════════════════════════════════════
   De Kaapstander: Splendid huisstijl (Brandbook v1.0, bindend)
   Zie .interface-design/system.md voor het structurele systeem.
   ══════════════════════════════════════════════════════════════ */

/* ---------- tokens ---------- */
:root {
  --teal: #1C938C;
  --matzwart: #1A1F23;
  --zachtwit: #FAFAFA;
  --zachtgeel: #FFDF5E;
  --parelgrijs: #D1D7DE;
  --oranje: #FF8A26;

  --font-kop: "Bricolage Grotesque", sans-serif;
  --font-body: "Open Sans", sans-serif;

  /* digitale schaal brandbook (desktop → mobiel via clamp) */
  --fs-h1: clamp(2.5rem, 6.5vw, 5.625rem);   /* 40 → 90px */
  --fs-h2: clamp(2.125rem, 4.6vw, 4.125rem); /* 34 → 66px */
  --fs-h3: clamp(1.75rem, 3.4vw, 3.125rem);  /* 28 → 50px */
  --fs-h4: clamp(1.5rem, 2.6vw, 2.3125rem);  /* 24 → 37px */
  --fs-h5: clamp(1.25rem, 1.9vw, 1.75rem);   /* 20 → 28px */
  --fs-h6: clamp(1rem, 1.5vw, 1.3125rem);    /* 16 → 21px */

  --ruimte-sectie: clamp(4rem, 10vw, 8rem);
  --container: 1200px;
  --marge: clamp(1.25rem, 5vw, 4rem);

  --squircle: clamp(1.75rem, 3.5vw, 2.75rem);
  --squircle-s: clamp(1.125rem, 2vw, 1.5rem);
  --seam: clamp(2.5rem, 5vw, 4rem);

  --overgang: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--matzwart);
  background: var(--zachtwit);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-kop);
  line-height: 1.08;
  margin: 0 0 1.5rem;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; max-width: 18ch; }
h3 { font-size: var(--fs-h4); font-weight: 500; }

p { margin: 0 0 1rem; max-width: 62ch; }

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

a { color: var(--teal); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

.sectie--matzwart :focus-visible,
.sectie--teal :focus-visible,
.hero :focus-visible { outline-color: var(--zachtgeel); }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.container--narrow { max-width: 820px; }

.sectie { padding-block: var(--ruimte-sectie); }
.sectie--zachtwit { background: var(--zachtwit); }
.sectie--teal { background: var(--teal); color: var(--zachtwit); }
.sectie--zachtgeel { background: var(--zachtgeel); color: var(--matzwart); }
.sectie--matzwart { background: var(--matzwart); color: var(--zachtwit); }

.accent-oranje { color: var(--oranje); }
.accent-teal { color: var(--teal); }

.visueel-verborgen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--zachtgeel); color: var(--matzwart);
  padding: .75rem 1.25rem; border-radius: 99px;
  font-weight: 600; text-decoration: none;
  transition: top var(--overgang);
}
.skip-link:focus { top: 1rem; }

/* ---------- squircle (officiële vorm: radius ≈ 34% korte zijde) ---------- */
.squircle { border-radius: var(--squircle); overflow: hidden; }
.squircle-s { border-radius: var(--squircle-s); overflow: hidden; }

@supports (corner-shape: superellipse(1.8)) {
  .squircle, .squircle-s { corner-shape: superellipse(1.8); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: .875rem 1.75rem;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: filter var(--overgang), scale var(--overgang), background var(--overgang);
}

.btn--primary {
  background: var(--zachtgeel);
  color: var(--matzwart);
}
.btn--primary:hover { filter: brightness(.95); scale: 1.02; }
.btn--primary:active { filter: brightness(.9); scale: 1; }

.btn--outline {
  background: transparent;
  border-color: var(--parelgrijs);
  color: var(--matzwart);
}
.btn--outline:hover { background: rgba(209, 215, 222, .25); }

.btn--outline-light { color: var(--zachtwit); }
.btn--outline-light:hover { background: rgba(250, 250, 250, .12); }

/* ---------- eyebrow ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: var(--fs-h6);
  margin-bottom: 1rem;
}
.eyebrow__spark { width: 1em; height: 1em; }
.eyebrow__spark path { fill: currentColor; }
/* margin-inline nodig omdat p { max-width: 62ch } de box smaller maakt dan de
   container — zonder dit centreert de tekst binnen een links uitgelijnde box */
.eyebrow--centraal { justify-content: center; margin-inline: auto; }
.eyebrow--op-teal { color: var(--zachtgeel); }
.eyebrow--op-teal .eyebrow__spark path { fill: var(--zachtgeel); }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  padding-block: .875rem;
  background: transparent;
  transition: background var(--overgang), box-shadow var(--overgang), padding var(--overgang);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  margin-right: auto;
}

.nav__spark { width: 1.25rem; height: 1.25rem; }
.nav__spark path { fill: var(--zachtgeel); transition: fill var(--overgang); }

.nav__wordmark {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--zachtwit);
  transition: color var(--overgang);
}

.nav__links {
  display: flex;
  gap: 1.75rem;
}

.nav__links a {
  color: var(--zachtwit);
  text-decoration: none;
  font-weight: 600;
  font-size: .9375rem;
  transition: color var(--overgang);
}
.nav__links a:hover { text-decoration: underline; text-underline-offset: 4px; }

.nav__cta { padding: .625rem 1.375rem; font-size: .9375rem; }

.nav.is-scrolled {
  background: var(--zachtwit);
  box-shadow: inset 0 -1px 0 var(--parelgrijs);
  padding-block: .625rem;
}
.nav.is-scrolled .nav__wordmark { color: var(--matzwart); }
.nav.is-scrolled .nav__links a { color: var(--matzwart); }
.nav.is-scrolled .nav__spark path { fill: var(--teal); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  padding: .5rem;
  cursor: pointer;
}
.nav__toggle span {
  width: 24px; height: 2.5px;
  background: var(--zachtwit);
  border-radius: 2px;
  transition: translate var(--overgang), rotate var(--overgang), background var(--overgang);
}
.nav.is-scrolled .nav__toggle span, .nav.is-open .nav__toggle span { background: var(--matzwart); }
.nav.is-open .nav__toggle span:first-child { translate: 0 4.25px; rotate: 45deg; }
.nav.is-open .nav__toggle span:last-child { translate: 0 -4.25px; rotate: -45deg; }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem var(--marge) 2rem;
  background: var(--zachtwit);
  box-shadow: inset 0 -1px 0 var(--parelgrijs);
}
.nav__mobile a:not(.btn) {
  color: var(--matzwart);
  font-weight: 600;
  text-decoration: none;
  font-size: 1.125rem;
}
.nav__mobile .btn { align-self: flex-start; }

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav.is-open { background: var(--zachtwit); }
  .nav.is-open .nav__wordmark { color: var(--matzwart); }
  .nav.is-open .nav__spark path { fill: var(--teal); }
  .nav.is-open .nav__mobile { display: flex; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--zachtwit);
}

.hero__media, .hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,31,35,.38) 0%, rgba(26,31,35,.48) 60%, rgba(26,31,35,.58) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-block: 8rem 6rem;
  /* auto-marges centreren de tekst in de ruimte die overblijft naast
     hero__foot. Zo blijft de hero optisch gecentreerd zonder dat de
     rating eroverheen kan vallen op korte schermen. */
  margin-block: auto;
}

.hero__title { margin-inline: auto; max-width: 12ch; }

.hero__sub {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  max-width: 44ch;
  margin: 1.5rem auto 2.25rem;
}

.hero__ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* In de flow (niet absolute): anders valt de rating op korte schermen
   over de hero-knoppen heen. Zo schuift hij altijd netjes onder de tekst. */
.hero__foot {
  position: relative;
  z-index: 1;
  padding-bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.hero__trust {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Google-review-badge (G-icoon + 5 sterren) */
.hero__rating {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: center;
}
.hero__google { display: inline-flex; width: 1.15rem; height: 1.15rem; }
.hero__google svg { width: 100%; height: 100%; display: block; }
.hero__stars { color: var(--zachtgeel); font-size: 1.05rem; letter-spacing: .12em; line-height: 1; }

/* scroll-nudge: Splendid-pijl die langzaam op en neer zweeft */
.hero__scroll {
  color: var(--zachtwit);
  opacity: .8;
  animation: zweef 2.4s ease-in-out infinite;
}
.hero__scroll svg { width: 30px; height: 30px; display: block; }
@keyframes zweef {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(9px); }
}

/* Korte telefoonschermen: minder lucht rond de herotekst, zodat knoppen
   én rating samen binnen één beeld passen. */
@media (max-width: 700px) {
  .hero__content { padding-block: 6rem 2.5rem; }
}

/* ---------- seams: Spark op de scheidingslijn ----------
   Twee secties raken elkaar met een RECHTE lijn; de secties zelf hebben geen
   ronde hoeken. Links en rechts staat een volledige Splendid Spark met zijn
   hart precies op die lijn; de Spark geeft het ronde-hoek-effect. */
.seam {
  position: relative;
  height: 0;
  z-index: 5;
  pointer-events: none;
  /* clip alleen horizontaal: sparks steken half buiten beeld aan de rand
     zonder pagina-brede scroll. overflow-y blijft visible zodat de spark
     verticaal boven/onder de naadlijn zichtbaar blijft. NIET op html/body
     zetten: dat breekt position: sticky op de brochure-kaart. */
  overflow-x: clip;
}

.seam__spark {
  position: absolute;
  top: 0;
  width: clamp(6.875rem, 12.5vw, 10rem);
  height: clamp(6.875rem, 12.5vw, 10rem);
}
/* hart van de Spark op de uiterste schermrand: half buiten beeld links/rechts,
   verticaal gecentreerd op de scheidingslijn */
.seam__spark--l { left: 0; translate: -50% -50%; }
.seam__spark--r { right: 0; translate: 50% -50%; }

.spark-teal path { fill: var(--teal); }
.spark-zachtgeel path { fill: var(--zachtgeel); }
.spark-oranje path { fill: var(--oranje); }
.spark-matzwart path { fill: var(--matzwart); }

/* ---------- herkenning: pijnpunten (6 cards) ---------- */
.herkenning__kop {
  max-width: 720px;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.herkenning__kop h2 { margin-inline: auto; }
.herkenning__kop p {
  margin-inline: auto;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

.pijnen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .pijnen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pijnen { grid-template-columns: 1fr; } }

.pijn {
  background: var(--zachtwit);
  border: 1.5px solid var(--parelgrijs);
  padding: 1.75rem;
}
.pijn__icoon {
  display: inline-flex;
  color: var(--teal);
  margin-bottom: 1rem;
}
.pijn__icoon svg { width: 2rem; height: 2rem; }
.pijn h3 {
  font-size: var(--fs-h5);
  font-weight: 700;
  margin-bottom: .5rem;
}
.pijn p { margin: 0; font-size: .9375rem; }

/* ---------- features (de plek) ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (max-width: 980px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }

.kaart {
  background: var(--zachtwit);
  color: var(--matzwart);
  display: flex;
  flex-direction: column;
}

.kaart__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.kaart__foto--keuken { object-position: 50% 30%; }
.kaart__foto--koffie { object-position: 50% 38%; }

.kaart__body { padding: 1.5rem 1.75rem 1.75rem; }

.kaart__kop {
  font-size: var(--fs-h5);
  font-weight: 700;
  margin-bottom: .5rem;
}

.kaart__body p { margin: 0; font-size: .9375rem; }

/* ---------- locatie ---------- */
.locatie__grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (max-width: 860px) { .locatie__grid { grid-template-columns: 1fr; } }

.locatie__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.locatie__naam {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 4px solid var(--zachtgeel);
}
.locatie__naam p {
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: var(--fs-h6);
  line-height: 1.4;
  font-style: normal;
  margin: 0;
}

.locatie__punten {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem 1.5rem;
}

@media (max-width: 540px) { .locatie__punten { grid-template-columns: 1fr; } }

.locatie__punten li {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .9375rem;
}

.locatie__punten svg {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  color: var(--teal);
}

.locatie__maps { font-weight: 600; }

/* ---------- community ---------- */
.community__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}

@media (max-width: 860px) { .community__grid { grid-template-columns: 1fr; } }

.community__foto { display: flex; }
.community__foto img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.community__proof { margin-top: 2rem; }

.rating { margin-bottom: 1.25rem; }
.rating__sterren {
  color: var(--teal);
  font-size: 1.375rem;
  letter-spacing: .15em;
}
.rating__label { margin: .25rem 0 0; font-size: .9375rem; }

.quote {
  margin: 0;
  background: var(--zachtwit);
  padding: 1.5rem 1.75rem;
}
.quote blockquote { margin: 0; }
.quote p { margin: 0 0 .625rem; font-size: .9375rem; }
.quote figcaption { font-size: .875rem; font-weight: 600; color: var(--matzwart); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.quote__sterren { color: var(--teal); letter-spacing: .05em; }
.quote__bron { font-weight: 400; color: #5a6068; display: inline-flex; align-items: center; gap: .3em; }
.google-g { width: 1em; height: 1em; flex-shrink: 0; }

/* ---------- juridische pagina (privacy / algemene voorwaarden) ---------- */
.nav--static { position: static; }
.legal { max-width: 820px; }
.legal__title { font-size: var(--fs-h2); }
.legal__meta { color: #5a6068; font-size: .9375rem; }
.legal h2 { font-size: var(--fs-h4); margin-top: 2.75rem; margin-bottom: 1rem; }
.legal h3 { font-size: var(--fs-h5); margin-top: 1.5rem; }
.legal p { max-width: none; }
.legal ol, .legal ul { padding-left: 1.375rem; margin: 0 0 1rem; }
.legal li { margin-bottom: .5rem; }
.legal li ol, .legal li ul { margin-top: .5rem; }

/* ---------- vrij om… (cyclende statement) ---------- */
.vrijom { text-align: center; }
.vrijom__inner { max-width: 880px; margin-inline: auto; }

.vrijom__statement {
  font-size: clamp(2rem, 4.8vw, 3.5rem);
  line-height: 1.12;
  margin: 0 auto;
  color: var(--zachtwit);
}
.vrijom__lead { display: block; }

/* vast 2-regelig venster: de sectie springt nooit in hoogte en de afstand tot
   "Vrij om…" blijft constant (geanimeerde tekst is boven-uitgelijnd) */
.vrijom__cycle {
  display: block;
  height: 2.24em;
  margin-top: 0.2em;
  color: var(--zachtgeel);
  overflow: visible;
}
.vrijom__word { display: block; }
.vrijom__w {
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* Spark als afscheiding tussen de animatie en de subtitle */
.vrijom__spark {
  width: clamp(1.5rem, 2.4vw, 2rem);
  margin: 1.75rem auto 1.5rem;
}
.vrijom__spark svg { width: 100%; height: auto; display: block; }
.vrijom__spark path { fill: var(--zachtgeel); }

.vrijom__sub {
  max-width: 44ch;
  margin: 0 auto;
  color: var(--zachtwit);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

/* ---------- prijzen ---------- */
.prijzen { text-align: center; }
.prijzen h2 { margin-inline: auto; }

.prijzen__toggle {
  display: inline-flex;
  border: 1.5px solid var(--parelgrijs);
  border-radius: 999px;
  padding: .3125rem;
  margin: 1rem 0 3rem;
  background: var(--zachtwit);
}

.toggle__optie {
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--matzwart);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: .625rem 1.375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: background var(--overgang), color var(--overgang);
}

.toggle__optie.is-actief {
  background: var(--teal);
  color: var(--zachtwit);
}

.toggle__badge {
  font-size: .75rem;
  font-weight: 600;
  background: var(--zachtgeel);
  color: var(--matzwart);
  border-radius: 99px;
  padding: .125rem .625rem;
}

.prijzen__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 980px) { .prijzen__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .prijzen__grid { grid-template-columns: 1fr; } }

.prijs {
  border: 1.5px solid var(--parelgrijs);
  background: var(--zachtwit);
  padding: 2rem 1.5rem;
  text-align: center;
}

.prijs__naam {
  font-size: var(--fs-h6);
  font-weight: 500;
  margin-bottom: 1rem;
}

.prijs__bedrag {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.75rem);
  margin: 0;
  line-height: 1;
}

.prijs__per {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .875rem;
  margin-top: .375rem;
  color: var(--matzwart);
}

.prijzen__jaarnoot {
  margin: 1.25rem auto 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--teal);
}

.prijzen__inclusief {
  margin: 3.5rem auto 0;
  max-width: 720px;
  text-align: left;
}

.prijzen__inclusief h3 {
  font-size: var(--fs-h5);
  font-weight: 700;
  text-align: center;
}

.checks {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  /* kolommen huggen hun tekst en de groep staat gecentreerd; met 1fr 1fr
     bleef er rechts loze ruimte staan waardoor de lijst links oogde */
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: .75rem 2rem;
}

@media (max-width: 540px) { .checks { grid-template-columns: 1fr; } }

.checks li {
  display: flex;
  align-items: center;
  gap: .625rem;
}

.checks li::before {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--teal);
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
}

.prijzen__microcopy {
  margin: 2.5rem auto 2rem;
  font-size: .9375rem;
}

.prijzen__cta .btn { max-width: 100%; white-space: normal; }

/* Zachte tweede keuze onder de primaire proefdag-knop: voor wie nog twijfelt
   en liever eerst leest. Bewust kleiner en rustiger, zodat de proefdag
   de duidelijke hoofdactie blijft. */
.prijzen__cta-soft {
  margin: 1rem auto 0;
  max-width: 46ch;
  font-size: .9375rem;
  color: #5a6068;
}

/* ---------- faq ---------- */
.faq h2 { margin-inline: auto; text-align: center; max-width: 16ch; }

.faq__lijst { margin-top: 3rem; }

.faq__item {
  border-bottom: 1.5px solid var(--parelgrijs);
}

.faq__item summary {
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: var(--fs-h6);
  padding: 1.375rem 3rem 1.375rem .25rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}

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

.faq__item summary::after {
  content: "";
  position: absolute;
  right: .5rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  translate: 0 -50%;
  background-color: var(--teal);
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>') center / contain no-repeat;
  transition: rotate var(--overgang);
}

.faq__item[open] summary::after { rotate: 45deg; }

.faq__item p {
  padding: 0 .25rem 1.5rem;
  margin: 0;
}

/* ---------- brochure (lead-gen) ---------- */
.brochure__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* card links: bovenin uitgelijnd met de kop, en sticky bij scrollen.
   top = zelfde marge als boven de sectietitels (de sectie-padding) */
.brochure__visual {
  position: sticky;
  top: var(--ruimte-sectie);
  align-self: start;
}

@media (max-width: 860px) {
  .brochure__grid { grid-template-columns: 1fr; }
  .brochure__visual { display: none; position: static; }
}

.brochure__cover {
  aspect-ratio: 3 / 4;
  max-width: 380px;
  margin-inline: auto;
  background: var(--teal);
  color: var(--zachtwit);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  rotate: -4deg;
  transition: rotate var(--overgang);
}

.brochure__cover:hover { rotate: -2deg; }

.brochure__cover-spark {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: auto;
}
.brochure__cover-spark path { fill: var(--zachtgeel); }

.brochure__cover-titel {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.02;
  margin: 0 0 .5rem;
}

.brochure__cover-sub {
  margin: 0;
  font-size: .9375rem;
  color: var(--zachtgeel);
}

.brochure__sub { margin-bottom: 2rem; }

/* formulier */
.form { max-width: 520px; }

.form__veld { margin-bottom: 1.25rem; }

.form__veld label {
  display: block;
  font-weight: 600;
  font-size: .9375rem;
  margin-bottom: .375rem;
}

.form__veld input,
.form__veld textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--matzwart);
  background: var(--zachtwit);
  border: 1.5px solid var(--parelgrijs);
  border-radius: .875rem;
  padding: .875rem 1.125rem;
  transition: border-color var(--overgang);
}

.form__veld input:focus,
.form__veld textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(28, 147, 140, .35);
}

.form__veld input[aria-invalid="true"] { border-color: var(--oranje); }

.form__check {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-bottom: 1.25rem;
}

.form__check input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .125rem;
  accent-color: var(--teal);
  flex-shrink: 0;
}

.form__check label { font-size: .9375rem; }

.form__meer { margin-bottom: 1.5rem; }

.form__meer summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--parelgrijs);
  margin-bottom: .75rem;
}

.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__submit { width: 100%; font-size: 1.0625rem; padding: 1rem 2rem; }
.form__submit[disabled] { opacity: .4; cursor: wait; }

.form__status {
  margin: 1rem 0 0;
  font-weight: 600;
  min-height: 1.5em;
}
.form__status.is-succes { color: var(--zachtgeel); }
.form__status.is-fout { color: var(--oranje); }

.form__privacy {
  font-size: .8125rem;
  margin-top: 1rem;
  color: var(--parelgrijs);
}
.form__privacy a { color: var(--zachtwit); }

.brochure__alt-kop { margin: 2.5rem 0 0; }
.brochure__alt-kop + .brochure__alt { margin-top: .5rem; }

.brochure__alt {
  margin-top: 2rem;
  font-size: .9375rem;
  color: var(--parelgrijs);
}
.brochure__alt a { color: var(--zachtwit); font-weight: 600; }

/* ---------- footer ---------- */
.footer {
  background: var(--zachtwit);
  padding-block: 4rem 2rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1.5px solid var(--parelgrijs);
  align-items: start;
}

@media (max-width: 700px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__madeby {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--matzwart);
  margin: 0 0 .875rem;
}
.footer__logo-link { display: inline-block; }
.footer__logo { width: clamp(140px, 40%, 168px); height: auto; }

.footer__contact { font-style: normal; }
.footer__contact a { color: var(--matzwart); }

.footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .875rem;
}
.footer__links a { color: var(--matzwart); }
.footer__social { display: inline-flex; transition: opacity var(--overgang); }
.footer__social:hover { opacity: .7; }
.social-icon { width: 1.5rem; height: 1.5rem; display: block; }

/* ---------- cookiebanner ---------- */
.cookiebar {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2rem);
  translate: -50% 0;
  z-index: 60;
  width: min(680px, calc(100% - 2rem));
  background: var(--zachtwit);
  color: var(--matzwart);
  border: 1.5px solid var(--parelgrijs);
  border-radius: var(--squircle-s);
  padding: 1.125rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  box-shadow: 0 8px 32px rgba(26, 31, 35, .12);
  animation: cookiein 320ms cubic-bezier(.4, 0, .2, 1) both;
}
@supports (corner-shape: superellipse(1.8)) { .cookiebar { corner-shape: superellipse(1.8); } }

.cookiebar__tekst { margin: 0; font-size: .875rem; flex: 1 1 300px; }
.cookiebar__knoppen { display: flex; gap: .625rem; flex-wrap: wrap; }
.cookiebar .btn { padding: .625rem 1.375rem; font-size: .9375rem; }

@keyframes cookiein {
  from { opacity: 0; translate: -50% 14px; }
  to { opacity: 1; translate: -50% 0; }
}

/* ---------- reveal on scroll ---------- */
.reveal {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 480ms ease, translate 480ms ease;
}
.reveal.is-zichtbaar {
  opacity: 1;
  translate: 0 0;
}

/* De brochure-kaart is position: sticky. Een translate op het element zelf
   verschuift de sticky-positie (14px te laag), dus hier alleen een opacity-fade
   en nooit een translate. Zo plakt de kaart exact op de sectie-marge (128px). */
.brochure__visual.reveal { translate: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; translate: none; transition: none; }
  .hero__scroll { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ══════════════════════════════════════════════════════════════
   Landingspagina proefdag — /proefdag-plannen
   ──────────────────────────────────────────────────────────────
   Alles hieronder is gescoped onder .pdag (die klasse staat op de
   <body> van proefdag-plannen.html) en raakt dus geen enkele andere
   pagina. Bewust géén apart CSS-bestand: dat is een extra request op
   een cold-cache 4G-bezoek, en deze pagina wordt via een gedrukte
   QR-code bezocht — bijna altijd mobiel, bijna altijd eerste bezoek.
   ══════════════════════════════════════════════════════════════ */

.pdag { background: var(--matzwart); color: var(--zachtwit); }

/* Boven de vouw op 375×667. --ruimte-sectie is minimaal 4rem en duwt
   samen met de merkbalk het eerste invoerveld onder de vouw. Dit is de
   enige plek op de site waar we van de brandbook-ritmiek afwijken, en
   de reden is hard: deze pagina is geen poster, hij is een formulier. */
.pdag .pdag__main { padding-block: 1.25rem 3.5rem; }

/* Eigen H1-schaal: --fs-h1 is op 375px 40px en maakt van deze zin drie
   regels (~130px). Hiermee blijft het er maximaal twee. */
.pdag .pdag__kop {
  font-size: clamp(1.875rem, 7.5vw, 3rem);
  margin-bottom: .75rem;
}

.pdag .pdag__lead {
  font-size: 1.0625rem;
  max-width: 42ch;
  margin-bottom: .75rem;
}

.pdag .pdag__bewijs {
  font-size: .875rem;
  color: var(--parelgrijs);
  margin-bottom: 1.75rem;
}

/* ---------- formulier-aanvullingen ---------- */
.pdag .pdag__verplicht { margin: 0 0 1.25rem; }

.pdag .form__hint {
  font-size: .875rem;
  color: var(--parelgrijs);   /* 11,46:1 op matzwart */
  margin: .375rem 0 0;
  max-width: none;
}

/* Fouten in tekst, niet alleen als oranje rand: kleur mag nooit de enige
   drager zijn (SC 1.4.1), en bij vier velden moet duidelijk zijn wélk
   veld het is (SC 3.3.1). var(--oranje) haalt 7,05:1 op matzwart — op
   een lichte achtergrond zou dat 2,26:1 zijn en dus onleesbaar. */
.pdag .form__fout {
  font-size: .875rem;
  font-weight: 600;
  color: var(--oranje);
  margin: .375rem 0 0;
  max-width: none;
}
.pdag .form__fout:empty { margin: 0; }

.pdag .form__gerust {
  font-size: .875rem;
  color: var(--parelgrijs);
  margin: 1.5rem 0 1rem;
  max-width: none;
}

/* aria-disabled in plaats van het disabled-attribuut: dat laatste haalt
   de knop uit de tab-volgorde en vernietigt de focus van wie hem net met
   Enter of VoiceOver activeerde. Zelfde ogende staat, focus blijft heel. */
.pdag .form__submit[aria-disabled="true"] { opacity: .4; cursor: wait; }

/* Een 13px-link is een te klein duimtarget voor eenhandig, staand, buiten.
   Hiermee wordt het raakvlak ~43px hoog. Bewust niet verder opgerekt bij de
   contactlinks hieronder: die staan onder elkaar en zouden bij een groter
   raakvlak gaan overlappen — dát is pas een echte SC 2.5.8-fout. */
.pdag .form__privacy a { display: inline-block; padding-block: .6875rem; }

/* Chrome en Safari overschrijven bij autofill de veldkleuren, waardoor de
   browser het contrast bepaalt in plaats van wij. Autofill is op dit
   formulier juist het meest gebruikte invulpad, dus expliciet terugzetten.
   De :focus-variant houdt de teal glow erbij, anders verdwijnt die. */
.pdag .form__veld input:-webkit-autofill {
  -webkit-text-fill-color: var(--matzwart);
  caret-color: var(--matzwart);
  box-shadow: 0 0 0 100px var(--zachtwit) inset;
}
.pdag .form__veld input:-webkit-autofill:focus {
  box-shadow: 0 0 0 100px var(--zachtwit) inset, 0 0 0 3px rgba(28, 147, 140, .35);
}

/* ---------- bevestiging na verzenden ----------
   Zodra de aanvraag binnen is, verdwijnen de wervende kop en belofte-tekst:
   die vragen om een actie die al gedaan is. Wat overblijft is één heldere
   boodschap met drie duidelijke niveaus (bevestiging → uitleg → contact). */
.pdag .pdag__main.is-verzonden .pdag__kop,
.pdag .pdag__main.is-verzonden .pdag__lead,
.pdag .pdag__main.is-verzonden .pdag__bewijs { display: none; }

/* Geen kader meer: de typografie draagt de hiërarchie, niet een randje. */
.pdag .pdag__gelukt {
  max-width: 46ch;
  margin-top: 0;
  padding: 0;
  background: none;
  border: 0;
}
/* Niveau 1 — dezelfde schaal als de H1, want dit is nu de hoofdboodschap. */
.pdag .pdag__gelukt h2 {
  font-size: clamp(1.875rem, 7.5vw, 3rem);
  line-height: 1.1;
  max-width: 18ch;
  color: var(--zachtgeel);
  margin-bottom: 1rem;
}
/* Niveau 2 — leestekst, gelijk aan de lead-schaal elders op de pagina. */
.pdag .pdag__gelukt p {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.pdag .pdag__gelukt p:last-child { margin-bottom: 0; }
.pdag .pdag__gelukt a { color: var(--zachtgeel); font-weight: 600; }
/* Niveau 3 — contact: bewust een stap kleiner en rustiger dan de leestekst.
   Als p.<class> geschreven zodat hij de algemene p-regel hierboven wint. */
.pdag .pdag__gelukt p.pdag__gelukt-contact {
  font-size: .9375rem;
  color: var(--parelgrijs);
  margin-top: 1.5rem;
}
/* Zonder deze regel vallen de bel- en maillinks in het succespaneel terug op de
   globale teal: #1C938C op #1A1F23 is ~3,5:1 en haalt de 4,5:1 voor bodytekst
   niet. Zachtgeel haalt 12,63:1. white-space omdat het telefoonnummer spaties
   rond het streepje heeft en anders middenin het getal afbreekt. */
.pdag .pdag__gelukt-contact a {
  color: var(--zachtgeel);
  font-weight: 600;
  display: inline-block;
  padding-block: .25rem;
  white-space: nowrap;
}

/* [hidden] moet winnen van elke eigen display-waarde, anders staat het
   "verborgen" formulier straks gewoon naast het succespaneel. */
.pdag [hidden] { display: none !important; }


/* Zichtbare focus op de invoervelden. De generieke .form__veld-regel hierboven
   zet outline:none en laat alleen een randkleurwissel over (parelgrijs → teal,
   2,6:1) — onder de 3:1 die WCAG 2.2 SC 1.4.11 voor een focusindicator vraagt.
   Page-scoped onder .pdag, zodat het brochureformulier ongemoeid blijft. */
.pdag .form__veld input:focus-visible {
  outline: 2px solid var(--zachtgeel);
  outline-offset: 2px;
}



/* ---------- no-JS-antwoordpagina's van /api/proefdag ----------
   functions/api/proefdag.js zet dezelfde .pdag-klasse op zijn <body> en
   hergebruikt .legal. Zonder de regel hieronder zouden de links daar de
   globale teal krijgen: #1C938C op #1A1F23 is ~3,5:1 en haalt de 4,5:1
   voor bodytekst niet. Zachtgeel haalt 12,63:1. De .btn is uitgezonderd,
   anders wordt gele tekst op een gele knop gezet. */
.pdag .legal a:not(.btn) {
  color: var(--zachtgeel);
  font-weight: 600;
  white-space: nowrap;
}
.pdag .legal__title { max-width: 18ch; }


@media (min-width: 700px) {
  .pdag .pdag__main { padding-block: 2.5rem 5rem; }
}