/* Tupp, Social Media Automation
   Eén idee: de leesfocus. De pagina staat rustig en licht; het tekstblok waar
   de lezer is staat scherp, de rest zakt terug. De beweging zit dus op de
   woorden zelf, niet in de kantlijn. Alles wat verder beweegt wordt "getekend"
   (lijnen, pijltjes, cirkels), nooit tegelijk, alleen waar je kijkt.
   Geen banden, geen kaarten: één vel papier. Herzien 19 september 2026. */

:root {
  --papier: #f8f8f6;
  --wit: #ffffff;
  --nacht: #14213d;
  --steen: #626b7a;
  --kobalt: #2748f5;
  --kobalt-diep: #1b35c4;
  --kobalt-zacht: #e4e9ff;
  --lijn: #d9dde5;
  --potlood: #2a3550;

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --maat: 1120px;
  --gutter: clamp(20px, 5vw, 64px);
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6rem;
  --veer: cubic-bezier(0.22, 1, 0.36, 1);
  --teken: 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--nacht);
  background: var(--papier);
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; margin: 0; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08; max-width: 18em; }
h3 { font-size: 1.3rem; line-height: 1.25; }
p { margin: 0; }
p + p { margin-top: var(--s2); }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; max-width: 32em; }
.stil { color: var(--steen); }
h2 + .lead { margin-top: var(--s2); }

.omhulsel { max-width: var(--maat); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Knoppen ---------------------------------------------------- */
.knop {
  display: inline-block;
  font: 600 1rem/1 var(--body);
  padding: 0.95rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--kobalt);
  background: var(--kobalt);
  color: var(--wit);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.2s var(--veer);
}
.knop:hover { background: var(--kobalt-diep); border-color: var(--kobalt-diep); transform: translateY(-1px); }
.knop:active { transform: translateY(1px); }
.knop:disabled { opacity: 0.6; cursor: default; }
.knop--stil { background: transparent; color: var(--nacht); border-color: var(--lijn); }
.knop--stil:hover { background: var(--wit); border-color: var(--nacht); }
.tekstlink {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--kobalt);
}
.tekstlink:hover { color: var(--kobalt); }
:focus-visible { outline: 3px solid var(--kobalt); outline-offset: 3px; border-radius: 3px; }

/* ---------- Navigatie -------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(248, 248, 246, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.nav.vast { border-bottom-color: var(--lijn); }
.nav .omhulsel { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: var(--s3); }
.merk { font: 700 1.55rem/1 var(--display); letter-spacing: -0.03em; text-decoration: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s3); align-items: center; }
.nav ul a { text-decoration: none; font-weight: 500; }
.nav ul a:not(.knop):hover { color: var(--kobalt); }
.nav ul .knop { padding: 0.7rem 1.1rem; font-size: 0.95rem; }
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; font-weight: 600; padding: 0.5rem 0; }
.menu summary::-webkit-details-marker { display: none; }
@media (max-width: 760px) {
  .nav ul { display: none; }
  .menu { display: block; }
  .menu ul { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2) 0 var(--s3); border-top: 1px solid var(--lijn); margin-top: var(--s1); }
  .nav .omhulsel { flex-wrap: wrap; }
  .menu { flex-basis: 100%; }
  .menu summary { display: inline-block; float: right; margin-top: -3.4rem; }
  .menu[open] summary { float: none; margin-top: 0; }
}

/* ---------- De leesfocus ----------------------------------------------
   Het oog gaat naar het hoogste contrast. Dus: alles wat je nog niet leest
   staat terug, het blok in de leeszone staat scherp. Twee kanten op, dus het
   is geen fade-up per sectie maar een focus die met de lezer meeloopt.
   Zonder JavaScript staat alles gewoon scherp (de klasse op <html> mist dan).
   --------------------------------------------------------------------- */
main { position: relative; }
.deel .omhulsel { position: relative; }

.js-leesfocus .leesblok {
  opacity: 0.46;
  transition: opacity 0.55s ease;
}
.js-leesfocus .leesblok.scherp { opacity: 1; }

/* Eén streep die zichzelf trekt onder de kop van de sectie: de enige beweging
   in de accentkleur, en hij wijst de leesrichting uit. */
.deel h2 { position: relative; padding-bottom: 0.42em; }
.deel h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.6em;
  height: 2px;
  border-radius: 2px;
  background: var(--kobalt);
  transform-origin: left center;
  transition: transform 0.75s var(--veer) 0.12s;
}
.js-leesfocus .deel h2::after { transform: scaleX(0); }
.js-leesfocus .deel h2.getekend::after { transform: scaleX(1); }
.contact h2::after { left: 50%; margin-left: -1.3em; }

/* ---------- Potloodnotities en getekende lijnen ------------------------ */
.notitie {
  font: italic 500 1.05rem/1.3 var(--body);
  color: var(--kobalt);
  display: inline-flex;
  align-items: flex-end;
  gap: 0.4rem;
}
.pijl { width: 72px; height: 48px; flex: none; overflow: visible; }
.pijl path { fill: none; stroke: var(--kobalt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lijn {
  fill: none;
  stroke: var(--potlood);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lijn--dun { stroke-width: 1.4; opacity: 0.55; }
.lijn--accent { stroke: var(--kobalt); stroke-width: 2.6; }
.lijn--vul { fill: var(--kobalt); }
.lijn--stippel { stroke: var(--steen); stroke-dasharray: 4 7 !important; stroke-width: 1.8; }

/* Alles met pathLength="1" tekent zichzelf zodra het in beeld komt. */
.teken path, .teken circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--teken), fill-opacity 0.6s ease 0.9s; }
.teken .lijn--vul { fill-opacity: 0; }
.teken.zichtbaar path, .teken.zichtbaar circle { stroke-dashoffset: 0; }
.teken.zichtbaar .lijn--vul { fill-opacity: 1; }
.teken :nth-child(2) { transition-delay: 0.15s; }
.teken :nth-child(3) { transition-delay: 0.3s; }
.teken :nth-child(4) { transition-delay: 0.45s; }
.teken :nth-child(5) { transition-delay: 0.6s; }
.teken :nth-child(6) { transition-delay: 0.75s; }
.teken :nth-child(7) { transition-delay: 0.9s; }
.teken :nth-child(n+8) { transition-delay: 1.05s; }

/* ---------- Hero -------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero .omhulsel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.hero h1 { max-width: 10.5em; }
.hero .lead { margin-top: var(--s3); }
.hero-acties { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin-top: var(--s4); }

/* De post: opgebouwd in één beweging, dan stil. */
.hero-post { position: relative; padding: var(--s3) 0 var(--s5); }
.post {
  position: relative;
  background: var(--wit);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 1px 2px rgba(20, 33, 61, 0.06), 0 24px 60px -24px rgba(20, 33, 61, 0.28);
  transform: rotate(-2deg);
  max-width: 400px;
  margin-inline: auto;
  opacity: 0;
  animation: post-in 0.9s var(--veer) 0.2s forwards;
}
@keyframes post-in { from { opacity: 0; transform: rotate(-4deg) translateY(24px) scale(0.96); } to { opacity: 1; transform: rotate(-2deg); } }
.post-kop { display: flex; align-items: center; gap: 0.75rem; }
.post-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--kobalt-zacht); border: 2px solid var(--kobalt); flex: none; }
.post-wie { display: grid; line-height: 1.2; }
.post-wie b { font-size: 0.95rem; }
.post-wie small { color: var(--steen); font-size: 0.8rem; }
.post-tekst { margin-top: 0.9rem; font-size: 0.95rem; line-height: 1.45; }
.post-tekst .regel { display: block; }
.post-tekst i {
  font-style: normal;
  color: transparent;
  background: linear-gradient(var(--nacht), var(--nacht)) no-repeat left / 0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: schrijf 1s steps(32) forwards;
}
.post-tekst .regel:nth-child(1) i { animation-delay: 0.9s; }
.post-tekst .regel:nth-child(2) i { animation-delay: 1.6s; }
@keyframes schrijf { to { background-size: 100% 100%; } }
.post-beeld {
  position: relative;
  margin-top: 0.9rem;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  opacity: 0;
  animation: beeld-in 0.7s var(--veer) 2.4s forwards;
}
@keyframes beeld-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.post-beeld svg { width: 100%; height: 100%; display: block; }
.pb-vlak { fill: var(--kobalt); }
.pb-vorm { fill: var(--kobalt-diep); }
.pb-zon { fill: var(--papier); }
.post-kop-op-beeld {
  position: absolute; left: 1rem; bottom: 0.9rem;
  font: 600 1.35rem/1.05 var(--display); color: var(--wit); letter-spacing: -0.02em;
}
.post-voet { display: flex; gap: 1.25rem; margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--lijn); font-size: 0.8rem; color: var(--steen); }
.post-geplaatst {
  position: absolute; top: -0.9rem; right: -0.9rem;
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--nacht); color: var(--wit);
  font: 600 0.85rem/1 var(--body);
  padding: 0.55rem 0.8rem 0.55rem 0.6rem; border-radius: 999px;
  opacity: 0; transform: scale(0.6);
  animation: stempel 0.5s var(--veer) 3.2s forwards;
}
@keyframes stempel { to { opacity: 1; transform: none; } }
.post-geplaatst svg { width: 16px; height: 16px; }
.post-geplaatst path { fill: none; stroke: #8fe3a5; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: vink 0.4s ease 3.5s forwards; }
@keyframes vink { to { stroke-dashoffset: 0; } }
.notitie--hero { position: absolute; left: 0; bottom: 0; }
.notitie--hero .pijl { width: 84px; height: 56px; }
.notitie--hero .pijl path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.notitie--hero .pijl path { animation: vink 0.8s ease 3.9s forwards; }
.notitie--hero span { opacity: 0; animation: stempel 0.5s ease 4.3s forwards; transform: none; }
@media (max-width: 900px) {
  .hero .omhulsel { grid-template-columns: 1fr; }
  .hero-post { padding-bottom: var(--s5); }
  .post { transform: rotate(-1.5deg); }
  .notitie--hero { left: 8%; }
}
@media (prefers-reduced-motion: reduce) {
  .post, .post-beeld, .post-geplaatst, .notitie--hero span { animation: none; opacity: 1; transform: none; }
  .post-tekst i { animation: none; background-size: 100% 100%; }
  .post { transform: rotate(-2deg); }
  .post-geplaatst path, .notitie--hero .pijl path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Delen ------------------------------------------------------- */
.deel { padding-block: clamp(4rem, 8vw, 7rem); }
.deel + .deel { padding-top: 0; }
.rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  margin-top: var(--s5);
}
.rij--om .rij-tekst { order: 2; }
.rij h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-bottom: var(--s2); max-width: 15em; }
.rij p { max-width: 30em; }
.tekening { display: grid; gap: var(--s2); justify-items: start; }
.tekening svg { width: 100%; max-width: 380px; height: auto; overflow: visible; }
.rij--om .tekening { justify-items: end; }
@media (max-width: 760px) {
  .rij { grid-template-columns: 1fr; gap: var(--s3); margin-top: var(--s4); }
  .rij--om .rij-tekst { order: 0; }
  .tekening svg { max-width: 300px; }
}

/* ---------- Samenwerkingen -------------------------------------------- */
.samen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s5); align-items: center; margin-top: var(--s4); }
.samen-klant { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); align-items: center; }
.samen-klant img { width: 112px; height: 112px; object-fit: contain; border-radius: 50%; background: var(--wit); padding: 12px; box-shadow: 0 1px 2px rgba(20, 33, 61, 0.06), 0 16px 40px -20px rgba(20, 33, 61, 0.3); }
.samen-klant h3 { margin-bottom: var(--s1); }
.samen-plek { position: relative; display: flex; gap: var(--s3); align-items: center; }
.samen-plek > svg { width: 96px; height: 96px; flex: none; }
.notitie--los { position: absolute; left: 200px; top: -4.6rem; white-space: nowrap; flex-direction: column; align-items: flex-start; gap: 0; }
.notitie--los .pijl { order: 2; width: 64px; height: 44px; margin-left: 0.5rem; }
.samen-volgende { margin-top: var(--s4); font-size: 1.15rem; }
@media (max-width: 860px) {
  .samen { grid-template-columns: 1fr; gap: var(--s4); }
  .samen-plek { margin-top: var(--s3); flex-wrap: wrap; }
  .notitie--los { position: static; white-space: normal; flex-basis: 100%; }
  /* Onder de rondjes wijst de pijl omhoog, naar de rondjes toe: pijl boven de tekst, 180° gedraaid. */
  .notitie--los .pijl { order: 0; transform: rotate(180deg); margin: 0 0 0.25rem 0.25rem; }
}
@media (max-width: 520px) { .samen-klant { grid-template-columns: 1fr; } }

/* ---------- Wat een post doet: de kringen ----------------------------- */
.kringen {
  list-style: none; margin: var(--s5) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3);
  align-items: start;
}
.kringen li { display: grid; gap: var(--s1); }
.kringen svg { width: 100%; max-width: 170px; height: auto; margin-bottom: var(--s2); overflow: visible; }
.kringen text { font: 600 13px var(--body); fill: var(--nacht); text-anchor: middle; letter-spacing: 0.01em; }
.kringen li:nth-child(4) text { font-weight: 600; }
.kringen li:nth-child(2) .lijn { transition-delay: 0.25s; }
.kringen li:nth-child(3) .lijn { transition-delay: 0.5s; }
.kringen li:nth-child(4) .lijn { transition-delay: 0.75s; }
.kringen h3 { font-size: 1.1rem; }
.kringen p { font-size: 0.95rem; }
.slot { margin-top: var(--s5); max-width: 40em; }
@media (max-width: 760px) {
  .kringen { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); }
  .kringen svg { max-width: 130px; }
}

/* ---------- Cijfers -----------------------------------------------------
   Vier even grote cijfers naast elkaar leverden geen held op: wat even groot
   is valt niet op, dus blijft er niets hangen. Nu draagt één cijfer de sectie
   en staan de andere twee kleiner ernaast. Het percentage zegt op zichzelf
   niets, dus staat het branchecijfer er direct onder in dezelfde vorm: de
   twee balklengtes maken de vergelijking zonder dat er een woord bij hoeft.
   De kobaltbalk is het enige accent van deze sectie; de steuncijfers hebben
   hun streepje ingeleverd, anders concurreren er vier accenten om de blik.
   ----------------------------------------------------------------------- */
.cijfers {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--s5);
  margin-top: var(--s5);
  align-items: start;
}
.getal {
  display: block;
  font: 600 clamp(3rem, 6.2vw, 4.8rem)/1 var(--display);
  letter-spacing: -0.035em;
  color: var(--nacht);
}
/* De balk: geen blok maar een lijn, net als het streepje onder een kop, en
   hij tekent zichzelf op dezelfde manier (.teken -> .zichtbaar in app.js). */
.meet { display: block; width: 100%; height: 10px; margin: 0.6rem 0 0.9rem; overflow: visible; }
.meet path { fill: none; stroke: var(--kobalt); stroke-width: 9; stroke-linecap: round; }
.cijfer .uitleg { font-size: 1.02rem; color: var(--steen); max-width: 26em; }

/* Het ijkpunt: 2 % van 9,4 % is 21,3 %, waar de ronde uiteinden weer een paar
   procent vanaf halen, dus 19,9 % klopt op het oog. Grijs, want dit is het
   vergelijkingscijfer en niet het resultaat. */
.ijk { margin-top: var(--s3); }
.getal--ijk { font-size: clamp(1.4rem, 2vw, 1.8rem); color: var(--steen); letter-spacing: -0.02em; }
.meet--ijk { width: 19.9%; height: 8px; }
.meet--ijk path { stroke: var(--lijn); stroke-width: 7; transition-delay: 0.5s; }

.steunen { display: grid; gap: var(--s4); }
.getal--steun { font-size: clamp(1.9rem, 2.9vw, 2.5rem); }
.cijfer--held .uitleg { max-width: 24em; }

@media (max-width: 860px) {
  .cijfers { grid-template-columns: 1fr; gap: var(--s4); }
  .steunen { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .cijfer .uitleg { max-width: 22em; }
}
@media (max-width: 520px) {
  .steunen { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ---------- Hoe het begint --------------------------------------------- */
.stappen { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s4); max-width: 44em; }
.stappen li { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 var(--s2); }
.stappen h3 { grid-column: 2; }
.stappen p { grid-column: 2; margin-top: 0.35rem; }
.stapnr {
  grid-row: 1 / span 2;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: 2px solid var(--kobalt);
  border-radius: 50%;
  background: var(--papier);
  font: 600 1rem/1 var(--display);
  color: var(--kobalt);
}
.zelf { margin-top: var(--s5); max-width: 40em; padding-left: 3.5rem; }
.zelf h3 { margin-bottom: var(--s1); }
@media (max-width: 760px) {
  .stappen li { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .zelf { padding-left: 0; }
}

/* ---------- Contact ---------------------------------------------------- */
.contact { padding-top: clamp(5rem, 10vw, 8rem) !important; padding-bottom: clamp(5rem, 10vw, 8rem); }
.contact .omhulsel { max-width: 760px; text-align: center; }
.contact h2 { margin-inline: auto; }
.contact .lead { margin: var(--s2) auto 0; }
.contact-knop { position: relative; display: inline-block; margin-top: var(--s4); padding: 1rem 1.5rem; }
.contact .knop--groot { font-size: 1.1rem; padding: 1.15rem 1.8rem; position: relative; z-index: 1; }
.omcirkel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.omcirkel path { fill: none; stroke: var(--kobalt); stroke-width: 2; stroke-linecap: round; opacity: 0.9; }
.contact-anders { margin-top: var(--s4); }

/* ---------- De pop-up -------------------------------------------------- */
.dialoog { border: 0; border-radius: 18px; padding: 0; width: min(560px, calc(100vw - 2rem)); background: var(--wit); color: var(--nacht); box-shadow: 0 40px 80px -30px rgba(20, 33, 61, 0.5); }
.dialoog::backdrop { background: rgba(20, 33, 61, 0.55); backdrop-filter: blur(4px); }
.dialoog-inhoud { padding: clamp(1.5rem, 4vw, 2.5rem); position: relative; margin: 0; }
.sluit { position: absolute; top: 0.75rem; right: 0.75rem; width: 40px; height: 40px; border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--steen); border-radius: 50%; }
.sluit:hover { background: var(--papier); color: var(--nacht); }
.stapbalk { display: flex; gap: 6px; margin-bottom: var(--s3); padding-right: 2.75rem; }
.stapbalk i { flex: 1; height: 3px; border-radius: 2px; background: var(--lijn); transition: background 0.3s; }
.stapbalk i.actief { background: var(--kobalt); }
.stap h3 { font-size: 1.6rem; margin-bottom: var(--s1); }
.stap > .stil { margin-bottom: var(--s3); }
.stap .veld + .veld { margin-top: var(--s3); }
.veld { display: grid; gap: 0.2rem; }
.veld label { font-weight: 600; font-size: 0.9rem; color: var(--steen); }
.veld input {
  font: inherit; font-size: 1.1rem;
  padding: 0.5rem 0;
  border: 0; border-bottom: 1.5px solid var(--lijn);
  border-radius: 0;
  background: transparent; color: var(--nacht); width: 100%;
  transition: border-color 0.2s;
}
.veld input:focus { outline: none; border-bottom-color: var(--kobalt); border-bottom-width: 2px; }
.vraag { border: 0; padding: 0; margin: 0 0 var(--s3); }
.vraag legend { font-weight: 600; margin-bottom: 0.6rem; padding: 0; }
.vraag label { display: inline-block; margin: 0 0.4rem 0.4rem 0; }
.vraag input { position: absolute; opacity: 0; width: 0; height: 0; }
.vraag span { display: inline-block; padding: 0.6rem 0.95rem; border: 1.5px solid var(--lijn); border-radius: 999px; cursor: pointer; font-weight: 500; transition: background .15s, border-color .15s, color .15s; }
.vraag span:hover { border-color: var(--nacht); }
.vraag input:checked + span { background: var(--kobalt); border-color: var(--kobalt); color: var(--wit); }
.vraag input:focus-visible + span { outline: 3px solid var(--kobalt); outline-offset: 2px; }
.dialoog-acties { display: flex; gap: var(--s2); justify-content: flex-end; margin-top: var(--s3); }
.formmelding { color: var(--steen); min-height: 1.5em; margin-top: var(--s2); }
/* Eén vraag per scherm: de kop ís de vraag, dus de legend mag weg voor het oog
   maar moet blijven staan voor een schermlezer. */
.verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.stap { min-height: 11rem; }
.stap h3 + .veld { margin-top: var(--s3); }
.stap h3 + .vraag { margin-top: var(--s3); }
.dialoog-klein { color: var(--steen); font-size: 0.85rem; margin-top: var(--s2); }
/* Het vinkje voor toestemming. Niet voorgevinkt en niet verplicht: toestemming
   die je moet geven om verder te komen is volgens de AVG niet vrij gegeven en
   dus ongeldig. Het staat op het laatste scherm, vlak voor Versturen. */
.akkoord { display: flex; gap: 0.65rem; align-items: flex-start; margin-top: var(--s3); cursor: pointer; }
.akkoord input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0.15rem 0 0; accent-color: var(--kobalt); cursor: pointer; }
.akkoord span { font-size: 0.9rem; line-height: 1.45; color: var(--steen); }
.akkoord:hover span { color: var(--nacht); }
.akkoord input:focus-visible { outline: 3px solid var(--kobalt); outline-offset: 2px; }

/* ---------- Tekstpagina (privacy) --------------------------------------
   Eén kolom om na te slaan, niet om doorheen gevoerd te worden. Daarom geen
   leesfocus (app.js wordt hier niet geladen) en geen streepje onder elke kop:
   acht accentstreepjes op één pagina wijzen niets meer uit. Alleen de titel
   krijgt er een, zodat de pagina bij de rest van de site hoort.
   ----------------------------------------------------------------------- */
.tekstpagina h1 { position: relative; font-size: clamp(1.9rem, 3.6vw, 2.9rem); max-width: 14em; padding-bottom: 0.36em; }
.tekstpagina h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.6em; height: 2px; border-radius: 2px; background: var(--kobalt); }
.tekstpagina h1 + .lead { margin-top: var(--s3); }
.tekstpagina h2 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); margin-top: var(--s5); padding-bottom: 0; }
.tekstpagina h2::after { display: none; }
.tekstpagina h2 + p, .tekstpagina h2 + ul { margin-top: var(--s2); }
.tekstpagina p, .tekstpagina .lijst { max-width: 34em; }
.lijst { margin: var(--s2) 0 0; padding-left: 1.15em; display: grid; gap: 0.45rem; }
.lijst li { padding-left: 0.15em; }
.lijst + p { margin-top: var(--s3); }
.tekstpagina p a, .tekstpagina li a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--kobalt);
}
.tekstpagina p a:hover, .tekstpagina li a:hover { color: var(--kobalt); }
.terug { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--lijn); }

/* ---------- Voet ------------------------------------------------------- */
.voet { border-top: 1px solid var(--lijn); padding-block: var(--s4); }
.voet .omhulsel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); align-items: end; }
.voet p { max-width: 30em; margin-top: var(--s2); font-size: 0.95rem; }
.voet a:not(.merk) { font-weight: 500; }
.voet-rechts { display: grid; gap: 0.4rem; justify-items: start; }
@media (min-width: 620px) { .voet-rechts { justify-items: end; text-align: right; } }

@media (prefers-reduced-motion: reduce) {
  .teken path, .teken circle { stroke-dashoffset: 0 !important; transition: none; }
  .teken .lijn--vul { fill-opacity: 1; }
  .js-leesfocus .leesblok { opacity: 1 !important; transition: none; }
  .js-leesfocus .deel h2::after { transform: scaleX(1) !important; transition: none; }
}