/* ═══════════════════════════════════════
   v3 huisstijl — losse pagina's
   /over/, /faq/, /voor-wie/, /privacybeleid/, /algemene-voorwaarden/

   Vijf pagina's die weinig met elkaar deelden: alleen de paginakop, en die
   staat inmiddels in v3-global. De rest is per pagina, vandaar de indeling
   hieronder.

   De FAQ-accordeon draait op .v3-faq-* uit v3-global; het eigen script en de
   eigen opmaak zijn vervallen.
═══════════════════════════════════════ */

/* ══════════════════════════════════════
   /over/
══════════════════════════════════════ */
.over-intro { padding: 40px 0 80px; position: relative; z-index: 1; }
.over-intro-layout {
  display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: 56px; align-items: start;
}
/* De portretkolom loopt mee tijdens het scrollen, zoals in de oude opzet. */
.over-portret-wrap { position: sticky; top: 100px; }
/* .over-portret is een omhulsel om de afbeelding, niet de afbeelding zelf.
   Zonder de regel op de img schiet die op zijn natuurlijke breedte van ruim
   3000px en loopt de hele pagina uit het scherm. */
.over-portret {
  width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 20px; border: 1px solid rgba(159, 211, 255, .14);
  background: var(--v3-image-plane);
}
.over-portret img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}
.over-naam {
  font: 700 var(--v3-fs-sectie) / 1.1 var(--v3-font);
  letter-spacing: -.02em; color: var(--v3-text-1); margin: 0;
}
.over-functie {
  font: 400 var(--v3-fs-body) / 1.5 var(--v3-font); color: var(--v3-text-3); margin: 10px 0 0;
}
.over-focus-quote {
  margin: 24px 0 0; padding: 18px 22px; border-radius: 14px;
  border-left: 3px solid var(--v3-cyan); background: rgba(159, 211, 255, .06);
  font: 600 var(--v3-fs-lead) / 1.5 var(--v3-font); color: #eaf2fd; text-wrap: pretty;
}
/* .over-bio is zelf de alinea, niet een omhulsel eromheen. Dit stond hier
   eerst als ".over-bio p" en raakte daardoor niets, waardoor de drie
   alinea's zonder witruimte als één blok doorliepen. */
.over-bio {
  font: 400 var(--v3-fs-body) / 1.75 var(--v3-font); color: var(--v3-text-2);
  margin: 18px 0 0; text-wrap: pretty;
}

/* Kenmerken onder de bio */
.over-credentials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; }
.over-cred-item {
  background: var(--v3-card); border: 1px solid var(--v3-border);
  border-radius: 14px; padding: 15px 18px;
  font: 500 var(--v3-fs-klein) / 1.5 var(--v3-font); color: #cfdcee;
}
.over-cred-label {
  display: block; font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase; color: var(--v3-text-3); margin-bottom: 6px;
}
.over-cred-item a {
  color: var(--v3-cyan); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(34, 211, 238, .45);
}
.over-cred-item a:hover { color: #7ce7f7; text-decoration-color: #7ce7f7; }

/* Visie, onderscheid, werkwijze, waarom nu */
.over-visie,
.over-onderscheidt,
.over-werkwijze,
.over-voor-wie,
.over-waarom-nu { padding: 80px 0; position: relative; z-index: 1; }
/* De achtergrond komt van v3-vlak in de markup, zodat de kleur uit een
   bron komt en de sectie ook de zachte lichtval erboven meekrijgt. */
.over-visie-layout,
.over-voor-wie-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.over-visie-rechts p {
  font: 400 var(--v3-fs-body) / 1.75 var(--v3-font); color: var(--v3-text-2);
  margin: 0 0 16px; text-wrap: pretty;
}

.over-onderscheid-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; }
.over-onderscheid-item {
  background: var(--v3-card); border: 1px solid var(--v3-border);
  border-radius: 20px; padding: 26px 24px 28px;
}
.oo-num { font: 600 13px / 1 var(--v3-font); color: var(--v3-cyan); }
.over-onderscheid-item h3 {
  font: 700 var(--v3-fs-kop) / 1.3 var(--v3-font); color: var(--v3-text-1); margin: 14px 0 0;
}
.over-onderscheid-item p {
  font: 400 var(--v3-fs-body) / 1.65 var(--v3-font); color: var(--v3-text-2);
  margin: 10px 0 0; text-wrap: pretty;
}
/* .obi-icon bevat een tekstpijl (↑ of →), geen svg. */
.obi-icon { color: var(--v3-cyan); flex-shrink: 0; }

.over-werkwijze-stappen { display: grid; gap: 14px; margin-top: 44px; }
.over-wp-stap {
  display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start;
  background: var(--v3-card-alt); border: 1px solid rgba(159, 211, 255, .10);
  border-radius: 16px; padding: 20px 22px;
}
.over-wp-num {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(159, 211, 255, .08); border: 1px solid rgba(159, 211, 255, .13);
  font: 700 var(--v3-fs-klein) / 1 var(--v3-font); color: var(--v3-cyan);
}
.over-wp-body { font: 400 var(--v3-fs-body) / 1.65 var(--v3-font); color: var(--v3-text-2); text-wrap: pretty; }
.over-wp-body strong { display: block; color: var(--v3-text-1); font-weight: 700; margin-bottom: 5px; }
.over-wp-opbrengst {
  margin-top: 10px; font: 500 var(--v3-fs-klein) / 1.55 var(--v3-font); color: var(--v3-cyan);
}

.over-voor-wie-lijst { display: grid; gap: 10px; }
.over-voor-wie-item {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  background: var(--v3-card); border: 1px solid var(--v3-border);
  border-radius: 13px; padding: 13px 16px;
  font: 400 var(--v3-fs-klein) / 1.55 var(--v3-font); color: var(--v3-text-2);
}
.over-voor-wie-item span:first-child { color: var(--v3-cyan); font-weight: 700; text-align: center; }

/* Afsluitend oproepblok, net als .faq-contact-card en .sector-cta-card. De
   knoppen eronder stonden al gecentreerd, de kop en de tekst niet. */
.over-wn-card {
  background: var(--v3-card-alt); border: 1px solid rgba(159, 211, 255, .12);
  border-radius: 22px; padding: 34px 32px; margin-top: 40px; text-align: center;
}
.over-wn-card .v3-sec-sub { margin-left: auto; margin-right: auto; max-width: 560px; }

.over-bewijs { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .09); }
.over-bewijs-items { display: grid; gap: 12px; margin-top: 26px; }
.over-bewijs-item {
  background: var(--v3-card); border: 1px solid var(--v3-border);
  border-radius: 14px; padding: 15px 18px;
  font: 400 var(--v3-fs-klein) / 1.6 var(--v3-font); color: var(--v3-text-2);
}
.over-bewijs-label {
  display: block; font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase; color: var(--v3-text-3); margin-bottom: 6px;
}

.over-contact-kaart {
  background: var(--v3-card-alt); border: 1px solid rgba(159, 211, 255, .12);
  border-radius: 20px; padding: 26px 24px; margin-top: 32px;
}
.over-contact-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font: 400 var(--v3-fs-body) / 1.5 var(--v3-font); color: var(--v3-text-1);
}
.over-contact-item:last-child { border-bottom: none; }
.over-contact-item a { color: var(--v3-text-1); text-decoration: none; }
.over-contact-item a:hover { color: var(--v3-cyan); }
.over-contact-label {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase; color: var(--v3-text-3);
}

/* ══════════════════════════════════════
   /faq/
══════════════════════════════════════ */
.faq-sectie { padding: 40px 0 80px; position: relative; z-index: 1; }
.faq-categorie { margin-bottom: 48px; }
.faq-cat-titel {
  font: 700 var(--v3-fs-kop-l) / 1.3 var(--v3-font); color: var(--v3-text-1);
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(159, 211, 255, .14);
}

/* Kennisbankverwijzingen onderaan */
.faq-kennisbank { padding: 80px 0; position: relative; z-index: 1; } /* vlak via v3-vlak */
.faq-kennisbank-header { max-width: 680px; margin-bottom: 36px; }
.faq-kennisbank-title {
  font: 700 var(--v3-fs-sectie) / 1.1 var(--v3-font);
  letter-spacing: -.02em; color: var(--v3-text-1); margin: 0;
}
.faq-kennisbank-sub {
  font: 400 var(--v3-fs-lead) / 1.65 var(--v3-font); color: var(--v3-text-2); margin: 16px 0 0;
}
.faq-kennisbank-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.faq-kb-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--v3-card); border: 1px solid var(--v3-border);
  border-radius: 20px; padding: 24px 22px 26px;
  transition: transform .35s cubic-bezier(.16, .8, .3, 1), border-color .35s ease;
}
.faq-kb-card:hover { transform: translateY(-4px); border-color: rgba(34, 211, 238, .35); }
.faq-kb-label {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase; color: var(--v3-text-3);
}
.faq-kb-title {
  font: 700 var(--v3-fs-kop) / 1.35 var(--v3-font); color: var(--v3-text-1); margin-top: 14px;
}
.faq-kb-arrow {
  margin-top: auto; padding-top: 18px;
  font: 600 var(--v3-fs-klein) / 1 var(--v3-font); color: var(--v3-light);
  transition: transform .3s cubic-bezier(.16, .8, .3, 1);
}
.faq-kb-card:hover .faq-kb-arrow { transform: translateX(4px); }

.faq-contact { padding: 0 0 104px; position: relative; z-index: 1; }
.faq-contact-card {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 26px; padding: 60px 40px;
  background:
    linear-gradient(150deg, rgba(159, 211, 255, .10), rgba(255, 255, 255, 0) 55%),
    var(--v3-card-alt);
  border: 1px solid rgba(159, 211, 255, .16);
}
.faq-contact-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 300px at 50% 0%, rgba(43, 127, 255, .30), transparent 70%);
}
.faq-contact-card > * { position: relative; }

/* ══════════════════════════════════════
   /voor-wie/
══════════════════════════════════════ */
.vw-intro-sectie { padding: 40px 0 80px; position: relative; z-index: 1; }
.vw-intro-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.vw-intro-links p {
  font: 400 var(--v3-fs-body) / 1.75 var(--v3-font); color: var(--v3-text-2);
  margin: 18px 0 0; text-wrap: pretty;
}
.vw-check-card {
  background: var(--v3-card-alt); border: 1px solid rgba(159, 211, 255, .12);
  border-radius: 20px; padding: 28px 26px;
}
.vw-check-titel {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase; color: var(--v3-text-3); margin-bottom: 18px;
}
/* .vw-check-lijst en .vw-check-ja/-nee staan samen op dezelfde <ul>. De
   kolomindeling en het teken horen dus op de <li> en niet op de lijst zelf:
   op de lijst legt "20px 1fr" de items twee aan twee naast elkaar in plaats
   van onder elkaar, en komt er één teken voor de hele lijst. */
.vw-check-lijst { display: grid; gap: 11px; list-style: none; margin: 0; padding: 0; }
.vw-check-lijst li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  font: 400 var(--v3-fs-klein) / 1.55 var(--v3-font); text-wrap: pretty;
}
.vw-check-ja li { color: var(--v3-text-2); }
.vw-check-ja li::before {
  content: ''; width: 11px; height: 6px; margin-top: 6px; justify-self: center;
  border-left: 2px solid var(--v3-cyan); border-bottom: 2px solid var(--v3-cyan);
  transform: rotate(-45deg);
}
.vw-check-nee li { color: var(--v3-text-3); }
.vw-check-nee li::before { content: '\00d7'; color: var(--v3-text-3); text-align: center; }
.vw-check-divider { height: 1px; background: rgba(255, 255, 255, .09); margin: 20px 0; }

/* Doelgroepen */
.vw-doelgroepen { padding: 80px 0; position: relative; z-index: 1; } /* vlak via v3-vlak */
.vw-doelgroep-item {
  background: var(--v3-card-alt); border: 1px solid rgba(159, 211, 255, .10);
  border-radius: 22px; padding: 30px 28px; margin-top: 22px;
}
.vw-dg-header { display: flex; align-items: center; gap: 16px; }
.vw-dg-icon {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(159, 211, 255, .08); border: 1px solid rgba(159, 211, 255, .13);
  color: var(--v3-cyan);
}
.vw-dg-icon svg { width: 21px; height: 21px; }
.vw-dg-titel { font: 700 var(--v3-fs-kop-l) / 1.25 var(--v3-font); color: var(--v3-text-1); margin: 0; }
.vw-dg-sub { font: 400 var(--v3-fs-klein) / 1.5 var(--v3-font); color: var(--v3-text-3); margin-top: 5px; }
.vw-dg-body { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 24px; align-items: start; }
.vw-dg-body p {
  font: 400 var(--v3-fs-body) / 1.7 var(--v3-font); color: var(--v3-text-2);
  margin: 0 0 16px; text-wrap: pretty;
}
.vw-dg-voorbeeld-titel,
.vw-dg-res-label {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase; color: var(--v3-text-3); margin-bottom: 12px;
}
.vw-dg-voorbeelden { margin-top: 20px; }
.vw-dg-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.vw-dg-tags span {
  padding: 7px 13px; border-radius: var(--v3-r-pill);
  background: rgba(159, 211, 255, .07); border: 1px solid rgba(159, 211, 255, .14);
  font: 500 var(--v3-fs-label) / 1 var(--v3-font); color: #cfdcee;
}
.vw-dg-quote {
  padding: 18px 22px; border-radius: 14px;
  border-left: 3px solid var(--v3-cyan); background: rgba(159, 211, 255, .06);
}
.vw-dg-quote-text {
  font: 500 var(--v3-fs-body) / 1.6 var(--v3-font); color: #eaf2fd; text-wrap: pretty;
}
.vw-dg-resultaat {
  margin-top: 20px; padding: 16px 20px; border-radius: 14px;
  background: rgba(34, 211, 238, .06); border: 1px solid rgba(34, 211, 238, .2);
  font: 400 var(--v3-fs-body) / 1.6 var(--v3-font); color: #cfdcee;
}

/* Herkenningssignalen */
.vw-herkenning { padding: 80px 0 96px; position: relative; z-index: 1; }
.vw-herkenning-card {
  background: var(--v3-card-alt); border: 1px solid rgba(159, 211, 255, .12);
  border-radius: 22px; padding: 34px 32px;
}
.vw-signalen { display: grid; gap: 13px; margin-top: 24px; }
.vw-signaal {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start;
  font: 400 var(--v3-fs-body) / 1.65 var(--v3-font); color: var(--v3-text-2); text-wrap: pretty;
}
/* De markup bevat één span met de hele zin en geen icoon. Zonder dit teken
   valt die zin in de kolom van 22px en wordt hij tot één woord per regel
   samengeknepen. Het vinkje vult de eerste kolom, de tekst schuift door. */
.vw-signaal::before {
  content: '✓'; color: var(--v3-cyan); text-align: center; line-height: 1.65;
}

/* ══════════════════════════════════════
   /privacybeleid/ en /algemene-voorwaarden/
══════════════════════════════════════ */
.legal-sectie { padding: 40px 0 96px; position: relative; z-index: 1; }
.legal-content { max-width: 760px; }
.legal-content h2 {
  font: 700 var(--v3-fs-kop-l) / 1.3 var(--v3-font); color: var(--v3-text-1);
  margin: 44px 0 14px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font: 700 var(--v3-fs-kop) / 1.35 var(--v3-font); color: var(--v3-text-1); margin: 28px 0 10px;
}
.legal-content p,
.legal-content li {
  font: 400 var(--v3-fs-body) / 1.75 var(--v3-font); color: var(--v3-text-2);
  margin: 0 0 14px; text-wrap: pretty;
}
.legal-content ul, .legal-content ol { margin: 0 0 18px; padding-left: 22px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--v3-cyan); text-decoration: underline; text-underline-offset: 3px; }
.legal-content strong { color: var(--v3-text-1); font-weight: 700; }

@media (max-width: 1000px) {
  .over-intro-layout, .over-visie-layout, .over-voor-wie-layout,
  .vw-intro-layout, .vw-dg-body { grid-template-columns: 1fr; gap: 32px; }
  .over-onderscheid-grid, .over-credentials, .faq-kennisbank-grid { grid-template-columns: 1fr; }
  .over-portret-wrap { position: static; max-width: 340px; }
  .over-portret { aspect-ratio: 4 / 3; max-height: 360px; }
}
@media (max-width: 700px) {
  .over-intro, .faq-sectie, .vw-intro-sectie, .legal-sectie { padding: 28px 0 56px; }
  .over-visie, .over-onderscheidt, .over-werkwijze, .over-voor-wie, .over-waarom-nu,
  .faq-kennisbank, .vw-doelgroepen, .vw-herkenning { padding: 56px 0; }
  .faq-contact { padding: 0 0 64px; }
  .faq-contact-card { padding: 40px 22px; border-radius: 20px; }
  .over-wn-card, .vw-herkenning-card, .vw-doelgroep-item { padding: 24px 20px; }
}