/* TalentCraft — huisstijl volgens salesdeck en pricing sheet */
/* Lato wordt zelf gehost: geen verzoeken naar Google, dus geen persoonsgegevens naar derden. */
@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/lato-400.woff2) format("woff2"); }
@font-face { font-family: Lato; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/lato-700.woff2) format("woff2"); }
:root {
  --navy: #002E47;
  --petrol: #004972;
  --oker: #E6A817;
  --oker-zacht: #F5D78A;
  --ink: #1F2937;
  --muted: #6B7280;
  --licht: #F4F8FA;
  --ijs: #D9F0F6;
  --wit: #FFFFFF;
  --lijn: #DCE5EA;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Lato, Calibri, "Segoe UI", sans-serif;
  --breed: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--wit); color: var(--ink); font: 17px/1.6 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(28px, 4vw, 40px); color: var(--navy); }
h3 { font-size: 22px; color: var(--navy); }
p { margin: 0; }
a { color: inherit; }
.wrap { max-width: var(--breed); margin: 0 auto; padding: 0 24px; }
.label { font: 700 12px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--oker); }
.label.donker { color: #9E6A12; }
section { position: relative; padding: 88px 0; }
.kop { max-width: 720px; margin-bottom: 44px; }
.kop .label { margin-bottom: 16px; display: block; }
.kop p { margin-top: 16px; color: var(--muted); font-size: 19px; }

/* knoppen */
.knop { display: inline-block; padding: 15px 26px; border-radius: 4px; font: 700 16px/1 var(--sans); text-decoration: none; border: 2px solid transparent; }
.knop.primair { background: var(--oker); color: var(--navy); }
.knop.secundair { border-color: currentColor; }
.knop.klein { padding: 10px 18px; font-size: 14px; }
.knop[hidden] { display: none; }

/* navigatie */
header.nav { background: var(--navy); color: var(--wit); }
header.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.logo { font: 700 15px/1 var(--serif); letter-spacing: .35em; color: var(--oker); text-decoration: none; }
header.nav nav { display: flex; gap: 26px; font-size: 15px; }
header.nav nav a { text-decoration: none; opacity: .88; }
.menu-knop { display: none; background: none; border: 1px solid rgba(255,255,255,.4); color: var(--wit); border-radius: 4px; padding: 8px 12px; font: 14px var(--sans); }

/* hero */
.hero { background: var(--navy); color: var(--wit); overflow: hidden; padding: 96px 0 112px; }
.cirkel { position: absolute; border-radius: 50%; pointer-events: none; }
.hero .c1 { width: 420px; height: 420px; background: var(--petrol); right: -140px; top: -170px; }
.hero .c2 { width: 300px; height: 300px; background: #0B5567; left: -150px; bottom: -170px; opacity: .8; }
.hero h1 { font-size: clamp(38px, 6.2vw, 68px); max-width: 860px; }
.hero h1 em { font-style: normal; color: var(--oker); }
.hero .onder { margin-top: 26px; font-size: 20px; max-width: 640px; color: #D6E4EA; }
.hero .acties { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .micro { margin-top: 14px; font-size: 14px; color: #9FB9C6; }
.hero .wrap { position: relative; }

/* logo's */
.logos { padding: 36px 0; border-bottom: 1px solid var(--lijn); }
.logos .wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.logos .label { color: var(--muted); letter-spacing: .2em; }
.logos .rij { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; }
.logos .placeholder { height: 48px; flex: 1 1 110px; font-size: 11px; }

/* probleem */
.kaarten3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kaart { background: var(--licht); border-radius: 8px; padding: 30px; }
.kaart h3 { margin: 18px 0 10px; }
.kaart p { color: var(--muted); }
.icoon { width: 44px; height: 44px; stroke: var(--oker); stroke-width: 2.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* standpunt */
.standpunt { background: var(--licht); }
.standpunt .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.standpunt blockquote { margin: 0; font: 400 clamp(28px, 3.6vw, 40px)/1.2 var(--serif); color: var(--navy); }
.standpunt blockquote em { font-style: normal; color: #9E6A12; }
.standpunt p { color: var(--ink); font-size: 18px; }
.standpunt p + p { margin-top: 14px; }

/* methode */
.methode { background: var(--navy); color: var(--wit); overflow: hidden; }
.methode h2 { color: var(--wit); }
.methode .kop p { color: #B8CDD6; }
.methode .c3 { width: 520px; height: 520px; border: 2px solid rgba(230,168,23,.18); right: -220px; top: -160px; }
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: stap; position: relative; }
.stap { position: relative; padding: 0 22px 0 0; }
.stap .nr { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--oker); display: grid; place-items: center; font: 400 26px/1 var(--serif); color: var(--oker); background: var(--navy); position: relative; z-index: 1; }
.stap::before { content: ""; position: absolute; top: 32px; left: 64px; right: 0; height: 2px; background: rgba(230,168,23,.35); }
.stap:last-child::before { display: none; }
.stap h3 { color: var(--wit); margin: 22px 0 10px; }
.stap p { color: #B8CDD6; font-size: 16px; }
.stap ul { margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; color: #D6E4EA; }
.stap li { padding: 5px 0; border-top: 1px solid rgba(255,255,255,.1); }
.brug { margin-top: 44px; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid rgba(230,168,23,.4); border-radius: 8px; padding: 20px 24px; }
.brug p { color: #D6E4EA; }
.brug a { color: var(--oker); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* programma */
.trainingen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.training { border: 1px solid var(--lijn); border-radius: 8px; padding: 22px; text-decoration: none; display: block; transition: border-color .15s, transform .15s; }
.training:hover { border-color: var(--oker); transform: translateY(-2px); }
.training .n { font: 400 14px var(--serif); color: var(--muted); float: right; }
.training h3 { font-size: 19px; margin: 16px 0 6px; }
.training p { font-size: 15px; color: var(--muted); }
.keten { margin-top: 28px; text-align: center; color: var(--petrol); font: italic 18px var(--serif); }

/* tracks */
.tracks { background: var(--licht); }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.track { background: var(--wit); border-radius: 8px; padding: 34px; border-top: 4px solid var(--oker); display: flex; flex-direction: column; }
.track h3 { font-size: 26px; margin: 10px 0 8px; }
.track .sub { color: var(--muted); font-style: italic; margin-bottom: 18px; }
.prijs { margin: 24px 0; background: var(--petrol); color: var(--wit); border-radius: 4px; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.prijs strong { font: 400 40px/1 var(--serif); }
.prijs span { text-align: right; font-size: 14px; line-height: 1.35; }
.prijs span b { display: block; }
.track ul { margin: 0 0 24px; padding: 0; list-style: none; flex: 1; }
.track li { padding: 8px 0 8px 30px; position: relative; border-bottom: 1px solid var(--lijn); font-size: 16px; }
.track li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 8px; border-left: 2.5px solid var(--oker); border-bottom: 2.5px solid var(--oker); transform: rotate(-45deg); }
.garantie { margin-top: 24px; background: var(--navy); color: var(--wit); border-radius: 8px; padding: 28px 32px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
.garantie h3 { color: var(--wit); }
.garantie p { color: #B8CDD6; margin-top: 6px; }
.schild { width: 52px; height: 52px; stroke: var(--oker); stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* rekensom */
.rekensom .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.som { border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden; }
.som div { display: flex; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--lijn); }
.som div:last-child { border: 0; background: var(--ijs); font-weight: 700; color: var(--navy); }
.som strong { font: 400 24px/1 var(--serif); color: var(--navy); }
.som small { display: block; color: var(--muted); font-size: 13px; }

/* bewijs */
.bewijs .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: stretch; }
.quote { background: var(--licht); border-radius: 8px; padding: 40px; }
.quote blockquote { margin: 0; font: 400 26px/1.35 var(--serif); color: var(--navy); }
.quote cite { display: block; margin-top: 22px; font-style: normal; color: var(--muted); }
.quote cite b { color: var(--ink); }
.trainer { display: grid; grid-template-rows: 1fr auto; gap: 18px; }
.trainer .placeholder { min-height: 240px; border-radius: 8px; }
.cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cijfers div { border-top: 2px solid var(--oker); padding-top: 10px; }
.cijfers strong { display: block; font: 400 30px/1 var(--serif); color: var(--navy); }
.cijfers span { font-size: 13px; color: var(--muted); }

/* consultancy */
.consultancy { background: var(--ijs); padding: 64px 0; }
.consultancy .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.consultancy h2 { font-size: 30px; }
.consultancy p { color: var(--ink); margin-top: 8px; max-width: 620px; }

/* slot */
.slot { background: var(--navy); color: var(--wit); overflow: hidden; }
.slot .c4 { width: 380px; height: 380px; background: var(--petrol); left: -160px; bottom: -200px; }
.slot .wrap { position: relative; }
.slot h2 { color: var(--wit); max-width: 760px; }
.wegen { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.weg { border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 30px; background: rgba(0,73,114,.35); }
.weg h3 { color: var(--wit); margin: 12px 0 10px; }
.weg p { color: #B8CDD6; margin-bottom: 22px; }
.weg .knop.secundair { color: var(--wit); }

footer { background: #001F31; color: #9FB9C6; font-size: 14px; padding: 36px 0; }
footer .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

@media (max-width: 900px) {
  header.nav nav, header.nav .knop { display: none; }
  .menu-knop { display: block; }
  .kaarten3, .standpunt .wrap, .twee, .rekensom .wrap, .bewijs .wrap, .wegen { grid-template-columns: 1fr; }
  .stappen { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .stap::before { display: none; }
  .trainingen { grid-template-columns: 1fr 1fr; }
  .garantie { grid-template-columns: 1fr; }
  .logos .rij { flex-basis: 100%; }
  .logos .placeholder { flex: 1 1 28%; }
  section { padding: 64px 0; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  .stappen, .trainingen { grid-template-columns: 1fr; }
  .prijs strong { font-size: 32px; }
}

/* placeholder voor beeld dat nog moet komen */
.placeholder { background: repeating-linear-gradient(45deg, var(--licht), var(--licht) 10px, var(--ijs) 10px, var(--ijs) 20px); border: 1px dashed #9CB8C4; color: var(--petrol); display: grid; place-items: center; text-align: center; font: 700 13px/1.3 var(--sans); letter-spacing: .04em; padding: 12px; }

/* taalwissel en mobiel menu */
.nav-rechts { display: flex; align-items: center; gap: 18px; }
.taal { font-size: 13px; letter-spacing: .08em; text-decoration: none; opacity: .75; border: 1px solid rgba(255,255,255,.35); border-radius: 3px; padding: 4px 8px; }
.taal:hover { opacity: 1; }
header.nav nav a[aria-current="page"] { opacity: 1; color: var(--oker); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--wit); color: var(--navy); padding: 8px 12px; }
:focus-visible { outline: 3px solid var(--oker); outline-offset: 2px; }
@media (max-width: 900px) {
  header.nav.open nav { display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0; background: var(--navy); padding: 12px 24px 24px; gap: 14px; z-index: 40; border-top: 1px solid rgba(255,255,255,.12); }
  header.nav { position: relative; }
}

.knop.secundair.donker { color: var(--navy); }
.tracks .meer { margin-top: 22px; text-align: center; }
.tracks .meer a { color: var(--petrol); font-weight: 700; text-decoration: none; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* trainingspagina */
.training-hero { padding: 72px 0 80px; }
.training-kop { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.training-hero h1 { font-size: clamp(36px, 5vw, 58px); margin-top: 18px; }
.training-hero .onder { font-size: 19px; }
.training-hero .acties { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.training-hero .micro { margin-top: 14px; font-size: 14px; color: #9FB9C6; }
.teaser { aspect-ratio: 16 / 9; border-radius: 8px; }
.twee-kol { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.twee-kol .kop { margin-bottom: 28px; }

.herken { padding: 80px 0; }
.herken h2 { font-size: clamp(28px, 3.6vw, 38px); }
.herken-slot { margin-top: 20px; font: italic 20px/1.4 var(--serif); color: #9E6A12; }
.signalen { margin: 0; padding: 0; list-style: none; }
.signalen li { position: relative; padding: 18px 0 18px 42px; border-bottom: 1px solid var(--lijn); font-size: 19px; }
.signalen li:first-child { border-top: 1px solid var(--lijn); }
.signalen li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 20px; height: 20px; border: 2.5px solid var(--oker); border-radius: 4px; }
.signalen li::after { content: ""; position: absolute; left: 10px; top: 25px; width: 8px; height: 12px; border-right: 2.5px solid var(--oker); border-bottom: 2.5px solid var(--oker); transform: rotate(45deg); }

.opbrengst { background: var(--licht); }
.opbrengst .kaart { background: var(--wit); }
.opbrengst-nr { font: 400 34px/1 var(--serif); color: var(--oker); }

.klein-kop { font: 700 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.leerdoelen { margin: 0; padding: 0; list-style: none; }
.leerdoelen li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--lijn); }
.leerdoelen li::before { content: ""; position: absolute; left: 4px; top: 18px; width: 14px; height: 8px; border-left: 2.5px solid var(--oker); border-bottom: 2.5px solid var(--oker); transform: rotate(-45deg); }
.onderwerpen { margin: 0; padding: 0; list-style: none; counter-reset: ow; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 40px; }
.onderwerpen li { counter-increment: ow; border-top: 1px solid var(--lijn); padding: 18px 0 18px 52px; position: relative; }
.onderwerpen li::before { content: counter(ow, decimal-leading-zero); position: absolute; left: 0; top: 19px; font: 400 24px/1 var(--serif); color: var(--oker); }
.onderwerpen h3 { font-size: 19px; }
.onderwerpen p { color: var(--muted); margin-top: 4px; font-size: 16px; }

.maatwerk { background: var(--navy); color: var(--wit); padding: 56px 0; }
.mini-stappen { margin: 22px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.mini-stappen li { display: flex; gap: 16px; }
.mini-stappen .nr { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--oker); color: var(--oker); display: grid; place-items: center; font: 400 20px/1 var(--serif); }
.mini-stappen h3 { color: var(--wit); font-size: 20px; }
.mini-stappen p { color: #B8CDD6; font-size: 15px; margin-top: 4px; }
.maatwerk-link { display: inline-block; margin-top: 26px; color: var(--oker); font-weight: 700; text-decoration: none; }

.track .past-label { font: 700 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 6px 0 4px; }
.track h3 + .sub { font-style: normal; color: var(--ink); }

.contact-blok { background: var(--navy); color: var(--wit); overflow: hidden; }
.contact-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact-blok h2 { color: var(--wit); margin-top: 16px; }
.contact-punten { margin: 28px 0 0; padding: 0; list-style: none; }
.contact-punten li { position: relative; padding: 8px 0 8px 32px; color: #D6E4EA; }
.contact-punten li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 14px; height: 8px; border-left: 2.5px solid var(--oker); border-bottom: 2.5px solid var(--oker); transform: rotate(-45deg); }
.wie { margin-top: 32px; display: flex; gap: 18px; align-items: center; }
.wie-foto { width: 84px; height: 84px; border-radius: 50%; font-size: 9px; flex: none; }
.wie p { color: #D6E4EA; font-size: 16px; }
.wie span { color: #9FB9C6; font-size: 15px; }
.wie a { color: var(--oker); text-decoration: none; font-weight: 700; }
.formulier { background: var(--wit); color: var(--ink); border-radius: 8px; padding: 32px; display: grid; gap: 16px; }
.formulier label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.formulier input:not([type=radio]) { font: 16px var(--sans); padding: 12px 14px; border: 1px solid #C9D6DD; border-radius: 4px; }
.formulier input:focus { outline: 2px solid var(--oker); border-color: var(--oker); }
.formulier fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.formulier legend { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.formulier .keuze { display: flex; gap: 8px; align-items: center; font-weight: 400; font-size: 15px; }
.formulier button { border: 0; cursor: pointer; width: 100%; }
.formulier .na { font-size: 13px; color: var(--muted); text-align: center; }
.verborgen { position: absolute; left: -9999px; }

.bewijs-klein { padding: 72px 0; text-align: center; }
.bewijs-klein blockquote { margin: 0 auto; max-width: 780px; font: 400 26px/1.4 var(--serif); color: var(--navy); }
.bewijs-klein cite { display: block; margin-top: 18px; font-style: normal; color: var(--muted); }

.trainingen.klein .training { padding: 18px; }
.trainingen.klein .icoon { width: 32px; height: 32px; }
.trainingen.klein h3 { font-size: 17px; margin: 10px 0 0; }
@media (max-width: 900px) {
  .training-kop, .twee-kol, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .mini-stappen { grid-template-columns: 1fr; gap: 20px; }
}

/* de vier businessresultaten */
.resultaten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.resultaat { background: var(--wit); border-radius: 8px; padding: 26px; border-top: 3px solid var(--oker); }
.resultaat .icoon { width: 40px; height: 40px; }
.resultaat h3 { margin: 16px 0 8px; font-size: 21px; }
.resultaat p { color: var(--muted); font-size: 16px; }
.resultaten-band { background: var(--licht); }
.resultaten-band .kop { max-width: 760px; }
.hero-resultaten { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; list-style: none; color: #D6E4EA; font-size: 15px; }
.hero-resultaten li { display: flex; align-items: center; gap: 8px; }
.hero-resultaten .icoon { width: 22px; height: 22px; stroke-width: 3.4; }
@media (max-width: 900px) { .resultaten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .resultaten { grid-template-columns: 1fr; } }

/* inhoud per onderdeel */
.modules { display: grid; gap: 12px; }
.module { background: var(--licht); border-radius: 8px; }
.module summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px 1fr 28px; gap: 16px; align-items: center; padding: 22px 26px; }
.module summary::-webkit-details-marker { display: none; }
.module-nr { font: 400 28px/1 var(--serif); color: var(--oker); }
.module-nr .icoon { width: 34px; height: 34px; }
.module-titel b { display: block; font: 400 21px/1.25 var(--serif); color: var(--navy); }
.module-titel span { display: block; color: var(--muted); font-size: 16px; margin-top: 3px; }
.module-pijl { width: 12px; height: 12px; border-right: 2.5px solid var(--petrol); border-bottom: 2.5px solid var(--petrol); transform: rotate(45deg); justify-self: center; transition: transform .2s; }
.module[open] .module-pijl { transform: rotate(-135deg); }
.module-body { display: grid; gap: 4px; padding: 0 26px 26px 98px; max-width: 900px; }
.vinkjes { margin: 0; padding: 0; list-style: none; }
.vinkjes li { position: relative; padding: 7px 0 7px 28px; }
.vinkjes li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 13px; height: 7px; border-left: 2.5px solid var(--oker); border-bottom: 2.5px solid var(--oker); transform: rotate(-45deg); }
.praktijk { background: var(--wit); border-radius: 6px; padding: 18px 20px; align-self: start; }
.praktijk ol { margin: 0; padding-left: 20px; }
.praktijk li { padding: 4px 0; font-size: 15px; }
.module-workshop { background: var(--navy); display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; padding: 22px 26px; }
.module-workshop b { color: var(--wit); }
.module-workshop .module-titel span { color: #B8CDD6; }
@media (max-width: 900px) {
  .module summary { grid-template-columns: 40px 1fr 20px; padding: 18px; }
  .module-body { grid-template-columns: 1fr; padding: 0 18px 20px; gap: 18px; }
  .module-workshop { grid-template-columns: 40px 1fr; padding: 18px; }
}
.praktijk p:not(.klein-kop) { font-size: 15px; margin: 0; }
.resultaat .resultaat-label { margin: 16px 0 0; font: 700 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #9E6A12; }
.resultaat .resultaat-label + h3 { margin-top: 10px; }

/* het complete programma onderaan de trainingspagina */
.programma-keten { background: var(--licht); }
.keten-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.keten-grid li { display: flex; }
.keten-item { position: relative; flex: 1; display: block; background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: 22px; text-decoration: none; transition: border-color .15s, transform .15s; }
a.keten-item:hover { border-color: var(--oker); transform: translateY(-2px); }
.keten-item .icoon { width: 36px; height: 36px; }
.keten-nr { position: absolute; top: 20px; right: 22px; font: 400 15px/1 var(--serif); color: var(--muted); }
.keten-item h3 { font-size: 19px; margin: 14px 0 6px; }
.keten-item p { font-size: 15px; color: var(--muted); }
.keten-item.huidig { background: var(--navy); border-color: var(--navy); }
.keten-item.huidig h3 { color: var(--wit); }
.keten-item.huidig p { color: var(--oker); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.keten-item.huidig .keten-nr { color: #9FB9C6; }
@media (max-width: 900px) { .keten-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .keten-grid { grid-template-columns: 1fr; } }
.meer-link { margin-top: 28px; }
.meer-link a { color: var(--petrol); font-weight: 700; text-decoration: none; }
.module-resultaat { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; margin-top: 14px; padding-top: 16px; border-top: 1px solid #D3DFE5; }
.module-resultaat .klein-kop { color: #9E6A12; margin: 0; }
.module-resultaat p:not(.klein-kop) { margin: 0; font: 400 18px/1.45 var(--serif); color: var(--navy); }
@media (max-width: 520px) { .module-resultaat { grid-template-columns: 1fr; gap: 6px; } }

/* introductievideo in de kop van een trainingspagina */
.video { position: relative; }
.video-knop { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: var(--oker); color: var(--navy); border: 0; border-radius: 40px; padding: 7px 16px 7px 7px; font: 700 13px/1 var(--sans); cursor: pointer; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.video-knop .play { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); position: relative; }
.video-knop .play::after { content: ""; position: absolute; left: 11px; top: 8px; border-left: 10px solid var(--oker); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.video-uitleg { margin-top: 16px; font-size: 14px; line-height: 1.5; opacity: .8; }
img.teaser { width: 100%; height: auto; display: block; object-fit: cover; box-shadow: none; }
/* Lichte omlijsting, zodat de (petrol) titelkaart loskomt van de kop. */
.video:has(img.teaser) { padding: 10px; border-radius: 14px; background: rgba(255,255,255,.10); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.video-venster { width: min(1100px, 94vw); padding: 0; border: 0; border-radius: 8px; background: #000; overflow: visible; }
.video-venster::backdrop { background: rgba(0, 20, 32, .85); }
.video-kader { aspect-ratio: 16 / 9; }
.video-kader iframe { width: 100%; height: 100%; border: 0; display: block; border-radius: 8px; }
.video-kader .placeholder { height: 100%; border-radius: 8px; font-size: 16px; }
.video-sluit { position: absolute; top: -46px; right: 0; background: none; border: 0; color: var(--wit); font: 400 36px/1 var(--sans); cursor: pointer; }
@media (max-width: 520px) { .video-venster { width: 100vw; max-width: 100vw; border-radius: 0; } .video-sluit { top: -44px; right: 12px; } }

/* programmapagina */
.waarom-punten { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.waarom-punten li { background: var(--licht); border-radius: 8px; padding: 22px 24px; border-left: 0; }
.waarom-punten h3 { font-size: 20px; }
.waarom-punten p { color: var(--muted); margin-top: 6px; }
.fases { display: grid; gap: 28px; }
.fase { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.fase-kop { display: flex; gap: 16px; }
.fase-nr { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--oker); color: #9E6A12; display: grid; place-items: center; font: 400 20px/1 var(--serif); }
.fase-kop h3 { font-size: 22px; }
.fase-kop p { color: var(--muted); font-size: 15px; margin-top: 4px; }
.fase-trainingen { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 14px; }
.fase-trainingen .keten-item p { font-size: 14px; }
.tijdlijn { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.tijdlijn li { display: grid; gap: 14px; align-content: start; }
.tijdlijn .nr { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--oker); color: var(--oker); display: grid; place-items: center; font: 400 22px/1 var(--serif); }
.tijdlijn h3 { color: var(--wit); font-size: 19px; }
.tijdlijn p { color: #B8CDD6; font-size: 15px; margin-top: 6px; }
.feitenlijst { margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.feitenlijst dt { font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.feitenlijst dd { margin: 6px 0 0; font-size: 15px; }
.investering .kaart h3 { margin: 0; }
.investering .kaart { background: var(--licht); }
@media (max-width: 900px) {
  .fase { grid-template-columns: 1fr; gap: 16px; }
  .fase-trainingen { grid-template-columns: 1fr 1fr; }
  .tijdlijn { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .fase-trainingen, .feitenlijst { grid-template-columns: 1fr; } }

/* investering: rekenvoorbeeld */
.voorbeelden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.voorbeeld { background: var(--navy); color: var(--wit); border-radius: 8px; padding: 28px; }
.voorbeeld .klein-kop { color: var(--oker); }
.voorbeeld strong { display: block; font: 400 44px/1.1 var(--serif); margin: 10px 0 6px; }
.voorbeeld p { color: #D6E4EA; }
.voorbeeld small { display: block; margin-top: 14px; color: #9FB9C6; font-size: 13px; line-height: 1.45; }
.voorbeeld-bron { margin-top: 14px; font-size: 13px; color: var(--muted); }
.investering-onder { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.inbegrepen { background: var(--licht); border-radius: 8px; padding: 22px 26px; }
.inbegrepen summary { cursor: pointer; font: 400 20px/1.3 var(--serif); color: var(--navy); }
.inbegrepen ul { margin-top: 10px; }
.garantie.compact { margin-top: 0; grid-template-columns: auto 1fr; }
@media (max-width: 900px) { .voorbeelden, .investering-onder { grid-template-columns: 1fr; } }

/* terugverdienen */
.terug { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.15); display: grid; gap: 10px; }
.terug dt { font-size: 13px; color: #9FB9C6; }
.terug dd { margin: 2px 0 0; color: var(--oker); font: 400 18px/1.3 var(--serif); }
.terug-regel { margin-top: 26px; background: var(--wit); border-radius: 8px; padding: 18px 22px; color: var(--ink); }
.terug-regel b { color: var(--navy); }
.terug-regel a { color: var(--petrol); font-weight: 700; text-decoration: none; white-space: nowrap; }
.team-som { margin-top: 18px; background: rgba(230,168,23,.12); border: 1px solid rgba(230,168,23,.4); border-radius: 6px; padding: 12px 14px; }
.team-som span { display: block; font-size: 13px; color: #D6E4EA; }
.team-som strong { display: block; font: 400 28px/1.2 var(--serif); color: var(--oker); margin-top: 2px; }
.mini-stappen.licht h3 { color: var(--navy); }
.mini-stappen.licht p { color: var(--muted); }
.mini-stappen.licht .nr { color: #9E6A12; }
.bedankt { padding: 120px 0 140px; }
.bedankt .acties { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }

/* agenda (Calendly) op de kennismakingspagina */
.agenda-hero { padding: 64px 0 72px; }
.agenda { margin-top: 32px; background: var(--wit); border-radius: 8px; min-height: 700px; overflow: hidden; }
.agenda iframe { width: 100%; height: 700px; border: 0; display: block; }
.agenda.placeholder { min-height: 420px; }
.naar-agenda { text-align: center; color: var(--petrol); font-weight: 700; font-size: 14px; text-decoration: none; }

/* methodepagina */
.hero-stappen { margin: 40px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px 28px; color: #D6E4EA; }
.hero-stappen li { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.hero-stappen span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--oker); color: var(--oker); display: grid; place-items: center; font: 400 14px/1 var(--serif); }
.methode-stappen { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.methode-stap { display: grid; grid-template-columns: 320px 1fr; gap: 48px; padding: 48px 0; border-top: 1px solid var(--lijn); }
.methode-stap:first-child { border-top: 0; padding-top: 0; }
.methode-stap-kop { display: flex; gap: 20px; align-items: flex-start; }
.groot-nr { flex: none; width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--oker); color: #9E6A12; display: grid; place-items: center; font: 400 32px/1 var(--serif); }
.methode-stap-kop h2 { font-size: 32px; }
.methode-stap-kop p { color: var(--muted); margin-top: 6px; }
.onderdelen { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.onderdelen > div { background: var(--licht); border-radius: 8px; padding: 22px 24px; }
.onderdelen h3 { font-size: 20px; }
.onderdelen p { color: var(--muted); margin-top: 6px; font-size: 16px; }
.methode-stap .module-resultaat a { font: 700 15px var(--sans); color: var(--petrol); text-decoration: none; white-space: nowrap; }
@media (max-width: 900px) { .methode-stap { grid-template-columns: 1fr; gap: 20px; } .onderdelen { grid-template-columns: 1fr; } }

/* Recruitment Development Scan — rustig, als een diagnose */
.scan2 { padding: 64px 0 88px; background: var(--wit); min-height: 640px; }
.scan2 .scan-scherm[hidden] { display: none; }
.scan2 h1 { font-size: clamp(32px, 4.4vw, 48px); color: var(--navy); margin-top: 14px; max-width: 860px; }
.scan-intro { margin-top: 18px; font-size: 19px; color: var(--muted); max-width: 760px; }
.scan-sub { font-size: 22px; margin: 40px 0 14px; }
.vormen, .bereik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 980px; }
.bereik { grid-template-columns: repeat(2, 1fr); max-width: 650px; }
.vorm { cursor: pointer; }
.vorm input { position: absolute; opacity: 0; }
.vorm span { display: block; height: 100%; border: 1px solid var(--lijn); border-radius: 8px; padding: 18px 20px; color: var(--muted); font-size: 15px; transition: border-color .15s, box-shadow .15s; }
.vorm b { display: block; color: var(--navy); font: 400 19px/1.3 var(--serif); margin-bottom: 4px; }
.vorm em { display: inline-block; margin-top: 8px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9E6A12; }
.vorm input:checked + span { border-color: var(--petrol); box-shadow: inset 0 0 0 1px var(--petrol); background: var(--licht); }
.vorm input:focus-visible + span { outline: 3px solid var(--oker); outline-offset: 2px; }
.vorm.uit { cursor: not-allowed; opacity: .6; }
.selectie { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; max-width: 980px; }
.selectie[hidden] { display: none; }
.keuze-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--lijn); border-radius: 30px; padding: 8px 14px; cursor: pointer; font-size: 15px; }
.keuze-chip .icoon { width: 20px; height: 20px; stroke-width: 3.4; }
.keuze-chip:has(input:checked) { border-color: var(--petrol); background: var(--licht); }
.scan-tip { margin: 32px 0 20px; font-size: 15px; color: var(--muted); font-style: italic; max-width: 760px; }
.scan2 .knop { border: 2px solid transparent; cursor: pointer; font-family: var(--sans); }
.scan2 .knop.secundair { border-color: currentColor; background: none; }
.scan2 .knop[disabled] { opacity: .4; cursor: not-allowed; }
.scan-voortgang { height: 4px; background: var(--licht); border-radius: 2px; overflow: hidden; max-width: 860px; }
.scan-voortgang span { display: block; height: 100%; background: var(--petrol); transition: width .3s; }
.scan-stap { margin-top: 12px; font-size: 14px; color: var(--muted); }
.scan-onderdeel { display: flex; gap: 14px; align-items: center; margin: 18px 0 4px; }
.scan-onderdeel .icoon { width: 40px; height: 40px; }
.scan-onderdeel h2 { color: var(--navy); }
.scan-leidvraag { color: var(--muted); margin-bottom: 8px; }
.niveauvraag { border: 0; margin: 28px 0 0; padding: 0; max-width: 860px; }
.niveauvraag legend { font: 400 21px/1.35 var(--serif); color: var(--navy); margin-bottom: 12px; }
.niveauvraag legend span { display: block; font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #9E6A12; margin-bottom: 8px; }
.niveau { display: block; cursor: pointer; margin-top: 8px; }
.niveau input { position: absolute; opacity: 0; }
.niveau span { display: block; position: relative; padding: 14px 18px 14px 50px; border: 1px solid var(--lijn); border-radius: 6px; font-size: 16px; transition: border-color .15s, background .15s; }
.niveau span::before { content: ""; position: absolute; left: 18px; top: 17px; width: 16px; height: 16px; border: 2px solid #B6C6CD; border-radius: 50%; }
.niveau:hover span { border-color: var(--petrol); }
.niveau input:checked + span { border-color: var(--petrol); background: var(--licht); }
.niveau input:checked + span::before { border-color: var(--petrol); background: radial-gradient(circle, var(--petrol) 45%, transparent 50%); }
.niveau input:focus-visible + span { outline: 3px solid var(--oker); outline-offset: 2px; }
/* Formulering per perspectief: directeur (team) of recruiter (zelf) */
.niveauvraag em { font-style: normal; }
#scan[data-vorm="zelf"] .t-team, #scan:not([data-vorm="zelf"]) .t-zelf { display: none; }
#scan[data-variant="u"] .v-s, #scan:not([data-variant="u"]) .v-u { display: none; }
.niveauvraag i, .scan-sub em { font-style: normal; }
.bureaus { grid-template-columns: repeat(4, 1fr); }
.scan-sub-klein { margin: 18px 0 10px; font-weight: 700; color: var(--navy); }
.zwaartepunt[hidden] { display: none; }
@media (max-width: 900px) { .bureaus { grid-template-columns: repeat(2, 1fr); } }
/* 'Weet ik niet' / 'Ligt niet bij mij': los van de vier niveaus, rustiger */
.niveau.extra { margin-top: 14px; }
.niveau.extra + .niveau.extra { margin-top: 8px; }
.niveau.extra span { border-style: dashed; color: var(--muted); font-size: 15px; padding-top: 11px; padding-bottom: 11px; }
.niveau.extra span::before { top: 14px; }
#scan[data-vorm="zelf"] .niveau.extra[data-voor="team"], #scan[data-vorm="team"] .niveau.extra[data-voor="zelf"], #scan:not([data-vorm]) .niveau.extra { display: none; }
.scan-knoppen { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.rapport-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; border-bottom: 2px solid var(--navy); padding-bottom: 20px; }
.totaal { text-align: right; }
.totaal strong { display: block; font: 400 56px/1 var(--serif); color: var(--navy); }
.totaal span { color: var(--muted); font-size: 14px; }
.niveau-legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 8px; font-size: 13px; color: var(--muted); }
.niveau-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.n1 { background: #E6A817; } .n2 { background: #F0CD7A; } .n3 { background: #7FB3C4; } .n4 { background: var(--petrol); }
.rapport-trainingen { margin: 18px 0 0; padding: 0; list-style: none; }
.rapport-trainingen > li { border-bottom: 1px solid var(--lijn); }
.rapport-trainingen summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 280px 1fr 48px; gap: 18px; align-items: center; padding: 14px 0; }
.rapport-trainingen summary::-webkit-details-marker { display: none; }
.balk-naam { display: flex; align-items: center; gap: 10px; font: 400 18px/1.3 var(--serif); color: var(--navy); }
.balk-naam .icoon { width: 24px; height: 24px; stroke-width: 3.2; }
.treden { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.treden i { height: 14px; border-radius: 2px; background: var(--licht); }
.niveau-getal { text-align: right; font: 400 22px/1 var(--serif); color: var(--navy); }
.rapport-sprints { margin: 0 0 16px; padding: 0 0 0 34px; list-style: none; display: grid; gap: 8px; }
.rapport-sprints li { display: grid; grid-template-columns: 28px 220px 1fr; gap: 12px; align-items: start; font-size: 15px; }
.rapport-sprints li span { width: 24px; height: 24px; border-radius: 4px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--navy); }
.rapport-sprints li span.n4 { color: var(--wit); }
.rapport-sprints em { font-style: normal; color: var(--muted); }
.advies-kop { margin-top: 44px; font-size: 26px; }
.advies { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.advies .keten-item[hidden] { display: none; }
.advies .naar { display: block; margin-top: 10px; color: var(--petrol); font-weight: 700; font-size: 14px; }
.rapport-acties { margin-top: 32px; display: flex; gap: 18px; align-items: center; }
.opnieuw { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: 15px var(--sans); min-height: 44px; padding: 10px 4px; }
.scan-lead { background: var(--navy); color: var(--wit); padding: 72px 0; }
.scan-lead h2 { color: var(--wit); }
.scan-lead[hidden] { display: none; }
@media (max-width: 900px) {
  .vormen, .bereik { grid-template-columns: 1fr; }
  .rapport-trainingen summary { grid-template-columns: 1fr 40px; }
  .treden { grid-column: 1 / -1; grid-row: 2; }
  .rapport-sprints { padding-left: 0; }
  .rapport-sprints li { grid-template-columns: 28px 1fr; }
  .rapport-sprints em { grid-column: 2; }
  .advies { grid-template-columns: 1fr; }
}
@media print {
  header.nav, footer, .scan-lead, .rapport-acties, .advies-kop, .advies, .skip { display: none !important; }
  .scan2 { padding: 0; }
  .rapport-trainingen summary { grid-template-columns: 220px 1fr 40px; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.formulier select { font: 16px var(--sans); padding: 12px 14px; border: 1px solid #C9D6DD; border-radius: 4px; background: var(--wit); }
@media (max-width: 700px) {
  .scan-opties { grid-template-columns: 1fr 1fr; }
  .uitslag-balken li { grid-template-columns: 1fr 48px; }
  .balk { grid-column: 1 / -1; grid-row: 2; }
  .advies { grid-template-columns: 1fr; }
}
.treden i.n1 { background: #E6A817; } .treden i.n2 { background: #F0CD7A; } .treden i.n3 { background: #7FB3C4; } .treden i.n4 { background: var(--petrol); }

/* rapport Recruitment Development Scan v3 */
.rapport-meta { margin-top: 8px; color: var(--muted); font-size: 14px; }
.r-blok { padding: 40px 0 8px; border-bottom: 1px solid var(--lijn); }
.r-blok h2 { font-size: 28px; }
.r-intro { margin-top: 8px; color: var(--muted); max-width: 760px; }
.r-samenvatting { margin-top: 18px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; padding-bottom: 28px; }
.r-samenvatting p + p { margin-top: 12px; }
.r-lead { font: 400 21px/1.5 var(--serif); color: var(--navy); }
.r-niveaus { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.r-niveaus li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: 15px; }
.r-niveaus li > span, .rapport-sprints li > span { width: 26px; height: 26px; border-radius: 4px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--navy); }
.r-niveaus .n4, .rapport-sprints li > span.n4 { color: var(--wit); }
.r-niveaus small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.r-doelen { margin: 20px 0 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.r-doel { border: 1px solid var(--lijn); border-radius: 8px; padding: 18px; border-top: 4px solid var(--lijn); }
.r-doel.hoog { border-top-color: #E6A817; }
.r-doel.midden { border-top-color: #F0CD7A; }
.r-doel.laag { border-top-color: var(--petrol); }
.r-risico { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.r-doel.hoog .r-risico { color: #9E6A12; }
.r-doel h3 { font-size: 20px; margin: 8px 0 10px; }
.r-doel p { margin-top: 12px; font-size: 14px; color: var(--muted); }
.r-prio { margin: 20px 0 28px; padding: 0; list-style: none; display: grid; gap: 18px; }
.r-prio > li { background: var(--licht); border-radius: 8px; padding: 24px; }
.r-prio-kop { display: flex; gap: 16px; align-items: flex-start; }
.r-prio-nr { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--oker); display: grid; place-items: center; font: 400 20px/1 var(--serif); }
.r-prio-kop h3 { font-size: 22px; }
.r-prio-kop p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.r-prio-kop a { color: var(--petrol); font-weight: 700; text-decoration: none; }
.doel-tag { display: inline-block; margin-left: 6px; font-size: 12px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px; padding: 2px 8px; color: var(--ink); }
.r-prio dl { margin: 18px 0 0 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.r-prio dt { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #9E6A12; }
.r-prio dd { margin: 6px 0 0; font-size: 15px; }
.r-advies { margin: 20px 0 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.r-advies .keten-item h3 { margin: 0 0 10px; }
.r-advies .keten-item p { margin-top: 10px; font-size: 14px; }
.r-advies .naar { display: block; margin-top: 10px; color: var(--petrol); font-weight: 700; font-size: 14px; }
.rapport .rapport-trainingen { margin-bottom: 28px; }
.rapport-sprints li { grid-template-columns: 30px 1fr !important; }
.rapport-sprints li b { display: block; color: var(--navy); }
.rapport-sprints li em { display: block; font-style: normal; color: var(--ink); }
.rapport-sprints li small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.r-leeswijzer { border-bottom: 0; }
.r-leeswijzer p { color: var(--muted); max-width: 760px; margin: 8px 0 20px; font-size: 15px; }
@media (max-width: 900px) {
  .r-samenvatting, .r-prio dl { grid-template-columns: 1fr; }
  .r-prio dl { margin-left: 0; }
  .r-doelen { grid-template-columns: 1fr 1fr; }
  .r-advies { grid-template-columns: 1fr; }
}
@media print {
  .r-prio > li, .r-doel { break-inside: avoid; }
  .r-blok { break-inside: auto; }
}
.r-analyse { margin: 18px 0 8px; max-width: 860px; }
.r-analyse p { position: relative; padding: 14px 0 14px 28px; border-top: 1px solid var(--lijn); font-size: 17px; }
.r-analyse p:first-child { border-top: 0; }
.r-analyse p::before { content: ""; position: absolute; left: 4px; top: 23px; width: 10px; height: 10px; border-radius: 50%; background: var(--oker); }
.r-subkop { font: 700 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 28px 0 14px; }
.r-fases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }
.r-fase { background: var(--licht); border-radius: 8px; padding: 20px; }
.r-fase h3 { font-size: 20px; margin: 6px 0 4px; }
.r-fase > p { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.r-fase ul { margin: 14px 0 0; padding: 0; list-style: none; }
.r-fase li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid #DDE7EC; font-size: 14px; }
.r-sterk { margin: 18px 0 28px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.r-sterk li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; border: 1px solid var(--lijn); border-radius: 8px; padding: 18px; }
.r-sterk li > span { width: 26px; height: 26px; border-radius: 4px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--navy); }
.r-sterk li > span.n4 { color: var(--wit); }
.r-sterk h3 { font-size: 19px; }
.r-sterk .r-thema { font-size: 13px; color: var(--muted); margin: 4px 0 8px; }
.r-sterk p { font-size: 15px; }
@media (max-width: 900px) { .r-fases, .r-sterk { grid-template-columns: 1fr; } }
.r-leeswijzer-kort { margin: 16px 0 0; font-size: 14px; color: var(--muted); max-width: 820px; }
.r-praktijk { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid #DDE7EC; font-size: 14px !important; color: var(--ink) !important; line-height: 1.55; }
.r-praktijk b { display: block; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #9E6A12; margin-bottom: 8px; }
.r-doorwerking { margin: 0 0 28px; background: var(--navy); color: var(--wit); border-radius: 8px; padding: 22px 26px; }
.r-doorwerking p { font: 400 18px/1.55 var(--serif); }
.r-effect { margin-top: 12px !important; font-size: 14px !important; color: var(--ink) !important; }
.r-fase { display: flex; flex-direction: column; }
.r-combis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 28px; }
.r-combi { border: 1px solid var(--lijn); border-left: 4px solid var(--oker); border-radius: 6px; padding: 18px 20px; }
.r-combi h3 { font-size: 19px; margin-bottom: 8px; }
.r-combi p { font-size: 15px; }
.r-combi .r-op { margin-top: 10px; font-size: 13px; color: var(--muted); }
.r-combi .doel-tag { margin: 8px 6px 0 0; }
.r-tabel { width: 100%; border-collapse: collapse; margin: 14px 0 28px; font-size: 14px; }
.r-tabel th { text-align: left; font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 8px; border-bottom: 2px solid var(--lijn); }
.r-tabel td { padding: 12px 8px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.r-tabel td small { display: block; color: var(--muted); margin-top: 4px; font-size: 13px; }
.r-tabel .doel-tag { margin: 0 4px 4px 0; }
.r-niv { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; font-weight: 700; color: var(--navy); }
@media (max-width: 900px) { .r-combis { grid-template-columns: 1fr; } .r-tabel th:nth-child(3), .r-tabel td:nth-child(3), .r-tabel th:nth-child(5), .r-tabel td:nth-child(5) { display: none; } }
.r-punt { position: relative; padding: 18px 0 18px 28px; border-top: 1px solid var(--lijn); max-width: 900px; }
.r-punt:first-child { border-top: 0; }
.r-punt::before { content: ""; position: absolute; left: 4px; top: 27px; width: 10px; height: 10px; border-radius: 50%; background: var(--oker); }
.r-punt h3 { font-size: 19px; margin-bottom: 6px; }
.r-punt p { font-size: 17px; }
.r-punt .r-op { margin-top: 8px; font-size: 13px; color: var(--muted); }
.r-punt .r-tags .doel-tag { margin: 8px 6px 0 0; }
.r-analyse > p { display: none; }
.r-punt p { padding: 0 !important; border: 0 !important; }
.r-punt p::before { display: none !important; }
.r-punt h3 { color: var(--navy); }
.r-programma { margin: 18px 0 28px; border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden; }
.r-programma-kop { background: var(--navy); color: var(--wit); padding: 24px 28px; }
.r-programma-kop h3 { color: var(--wit); font-size: 24px; margin-top: 8px; }
.r-programma-kop p { color: #B8CDD6; margin-top: 6px; font-size: 15px; }
.r-tijdlijn { margin: 0; padding: 8px 28px; list-style: none; }
.r-tijdlijn > li { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--lijn); }
.r-tijdlijn > li:last-child { border-bottom: 0; }
.r-maand { font: 400 18px/1.2 var(--serif); color: var(--navy); }
.r-maand em { display: block; margin-top: 6px; font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #9E6A12; font-style: normal; }
.r-tijdlijn h4 { font: 400 20px/1.3 var(--serif); margin: 0 0 8px; }
.r-tijdlijn h4 a { color: var(--navy); text-decoration: none; }
.r-tijdlijn h4 a:hover { text-decoration: underline; }
.r-tijdlijn .treden { max-width: 320px; }
.r-tijdlijn p { margin-top: 10px; font-size: 14px; }
.r-tijdlijn .doel-tag { margin: 0 6px 0 0; }
.r-oporde { padding: 0 28px 8px; font-size: 14px; color: var(--muted); }
.r-groep { margin: 20px 28px 0; font: 700 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #9E6A12; }
.r-groep-uitleg { margin: 4px 28px 0; font-size: 14px; color: var(--muted); }
.r-naar-programma { display: block; padding: 0 28px 22px; color: var(--petrol); font-weight: 700; text-decoration: none; }
@media (max-width: 700px) { .r-tijdlijn > li { grid-template-columns: 1fr; gap: 8px; } }
@media (min-width: 901px) { .r-samenvatting { grid-template-columns: 1.25fr 1fr; } }
.r-samenvatting p { font-size: 17px; }
.r-verdeling { background: var(--licht); border-radius: 8px; padding: 22px; align-self: start; }
.r-verdeling h3 { font-size: 19px; }
.r-verdeling > p { font-size: 14px !important; color: var(--muted); margin: 6px 0 14px; }
.r-stapel { display: flex; height: 30px; border-radius: 4px; overflow: hidden; margin-bottom: 18px; }
.r-stapel span { display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--navy); min-width: 22px; }
.r-stapel span.n4 { color: var(--wit); }

/* rapport: meer in kaarten, minder scrollen */
.r-analyse { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: none; }
.r-punt { border: 1px solid var(--lijn) !important; border-top: 3px solid var(--oker) !important; border-radius: 8px; padding: 18px 20px !important; max-width: none; }
.r-punt::before { display: none; }
.r-punt h3 { font-size: 18px; }
.r-punt p { font-size: 15px !important; }
.r-prio { grid-template-columns: repeat(3, 1fr); }
.r-prio > li { padding: 20px; }
.r-prio dl { margin: 16px 0 0 !important; grid-template-columns: 1fr !important; gap: 12px !important; }
.r-prio dd { font-size: 14px; }
.r-prio-kop h3 { font-size: 19px; }
.r-kaartjes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 28px; }
.r-kaartje { border: 1px solid var(--lijn); border-radius: 8px; padding: 16px; }
.r-kaartje-kop { display: flex; justify-content: space-between; align-items: center; }
.r-nr { font: 400 15px/1 var(--serif); color: var(--muted); }
.r-kaartje h4 { font: 400 17px/1.3 var(--serif); color: var(--navy); margin: 10px 0 2px; }
.r-kaartje .r-thema { font-size: 12px; color: var(--muted); }
.r-kaartje p { font-size: 13px; margin-top: 8px; }
.r-kaartje .doel-tag { margin: 0 4px 4px 0; font-size: 11px; }
.r-tijdlijn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px 28px; }
.r-tijdlijn > li { grid-template-columns: 1fr; gap: 8px; border: 1px solid var(--lijn); border-radius: 8px; padding: 16px; }
.r-tijdlijn > li:last-child { border-bottom: 1px solid var(--lijn); }
.r-tijdlijn h4 { font-size: 18px; }
.r-tijdlijn p { font-size: 13px; }
@media (max-width: 1000px) { .r-prio, .r-kaartjes, .r-tijdlijn { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .r-analyse, .r-prio, .r-kaartjes, .r-tijdlijn { grid-template-columns: 1fr; } }
@media print { .r-kaartje, .r-tijdlijn > li { break-inside: avoid; } }
.r-legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 6px; font-size: 14px; }
.r-legenda span { display: flex; align-items: center; gap: 8px; }
.r-legenda i, .r-thema-kaart li i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; font: 700 12px/1 var(--sans); font-style: normal; color: var(--navy); flex: none; }
.r-legenda i.n4, .r-thema-kaart li i.n4 { color: var(--wit); }
.r-overzicht { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 28px; align-items: start; }
.r-overzicht-fase .r-subkop { margin: 14px 0 10px; }
.r-thema-kaart { border: 1px solid var(--lijn); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
.r-thema-kop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.r-thema-kop b { font: 400 18px/1.3 var(--serif); color: var(--navy); }
.r-thema-kop span { font: 400 20px/1 var(--serif); color: var(--navy); }
.r-thema-kaart ul { margin: 10px 0 0; padding: 0; list-style: none; }
.r-thema-kaart li { border-top: 1px solid var(--lijn); }
.r-thema-kaart summary { list-style: none; cursor: pointer; display: flex; gap: 10px; align-items: center; padding: 8px 0; font-size: 14px; }
.r-thema-kaart summary::-webkit-details-marker { display: none; }
.r-thema-kaart summary:hover { color: var(--petrol); }
.r-thema-kaart details p { font-size: 13px; margin: 0 0 8px 32px; }
.r-thema-kaart .r-volgende { color: var(--muted); }
@media (max-width: 1000px) { .r-overzicht { grid-template-columns: 1fr; } }
@media print { .r-thema-kaart details { display: block; } .r-thema-kaart { break-inside: avoid; } }
.r-tip { margin: 0 0 28px; border: 1px dashed var(--petrol); border-radius: 8px; padding: 16px 20px; background: var(--wit); }
.r-tip b { font: 400 18px/1.3 var(--serif); color: var(--navy); }
.r-tip p { font-size: 15px; margin-top: 4px; color: var(--ink); }
.r-deel { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 0; }
.r-deel p { color: var(--muted); margin-top: 6px; max-width: 640px; }
@media print { .r-deel, .r-tip { display: none; } }

/* teamanalyse */
.team-aanmaken { max-width: 520px; margin-top: 24px; background: var(--licht); }
.team-fout { color: #9E2A12; font-size: 14px; }
/* Recruitment Development Scan: meldingen, gespreksknop, delen */
.oorzaak { margin: 34px 0 0; padding: 18px 20px; border: 1px dashed var(--lijn); border-radius: 8px; background: var(--licht); }
.oorzaak[hidden] { display: none; }
.oorzaak legend { font: 400 19px/1.35 var(--serif); color: var(--navy); padding: 0 6px; }
.oorzaak legend small { display: block; font: 13px var(--sans); color: var(--muted); margin-top: 4px; }
.oorzaak em { font-style: normal; }
.oorzaak-keuze { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; font-size: 15px; }
.oorzaak-keuze input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--petrol); }
.oorzaak-keuze input:disabled + span { opacity: .45; }
.r-oorzaken { display: grid; gap: 10px; margin: 8px 0 18px; }
.r-oorzaak-rij { display: grid; grid-template-columns: 240px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--lijn); }
.r-oorzaak-rij span { display: flex; flex-wrap: wrap; gap: 8px; }
.r-oorzaak-tag { font-style: normal; font-size: 14px; padding: 4px 10px; border-radius: 20px; background: var(--licht); border: 1px solid var(--lijn); }
.r-oorzaak-tag.kennis { background: #FFF6E0; border-color: #F0D58A; }
@media (max-width: 700px) { .r-oorzaak-rij { grid-template-columns: 1fr; gap: 6px; } }
.scan-context { margin: -4px 0 8px; color: var(--muted); font-size: 16px; }
.scan-melding { margin-top: 18px; padding: 12px 16px; border-radius: 8px; background: #FFF6E0; border-left: 3px solid var(--oker); color: var(--ink); font-size: 15px; }
.scan-melding[hidden] { display: none; }
.r-cta { margin-top: 28px; padding: 22px 24px; border-radius: 8px; background: var(--ijs); display: flex; gap: 18px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.r-cta p { margin: 0; max-width: 620px; color: var(--navy); font-size: 17px; }
.r-deel-knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.team-wacht { margin-top: 10px; color: var(--muted); font-size: 15px; }
.scan-lead .lead-tekst { margin-top: 14px; color: #B8CDD6; font-size: 18px; }
.scan-lead .wie p { color: #B8CDD6; }
.r-tijdlijn h4 a { display: inline-block; padding: 6px 0; }
@media print { .r-cta, .r-klik, .scan-melding { display: none !important; } }
.team-teller { display: flex; align-items: center; gap: 18px; margin: 24px 0 8px; padding: 18px 22px; border: 1px solid var(--lijn); border-radius: 8px; max-width: 640px; }
.team-teller strong { font: 400 44px/1 var(--serif); color: #9E6A12; }
.team-teller.klaar strong { color: var(--petrol); }
.link-veld { display: flex; gap: 10px; max-width: 760px; }
.link-veld input { flex: 1; font: 14px var(--sans); padding: 10px 12px; border: 1px solid #C9D6DD; border-radius: 4px; background: var(--licht); }
.r-notitie { border-style: solid; background: var(--licht); margin-top: 16px; }
.r-vgl-totaal { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.r-vgl-totaal div { display: grid; }
.r-vgl-totaal span { font-size: 13px; color: var(--muted); }
.r-vgl-totaal strong { font: 400 40px/1 var(--serif); color: var(--navy); }
.r-vgl-totaal p { font-size: 15px; max-width: 420px; }
.r-thema-vgl { border: 1px solid var(--lijn); border-radius: 8px; padding: 14px 20px; margin-bottom: 8px; }
.r-vgl-rij { display: grid; grid-template-columns: 220px 1fr 90px; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.r-vgl-naam { font: 400 16px/1.3 var(--serif); color: var(--navy); }
.r-vgl-schaal { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #E6A817, #F0CD7A 33%, #7FB3C4 66%, #004972); }
.r-vgl-schaal i, .r-vgl-legenda i { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); border: 3px solid var(--wit); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.r-vgl-schaal i.dir, .r-vgl-legenda i.dir { background: var(--navy); }
.r-vgl-schaal i.tm, .r-vgl-legenda i.tm { background: var(--oker); }
.r-vgl-cijfers { text-align: right; font-size: 14px; color: var(--muted); }
.r-vgl-legenda { position: relative; margin-top: 12px; font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.r-vgl-legenda i { position: static; transform: none; display: inline-block; margin-left: 10px; }
.r-vgl { display: flex; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.r-vgl b { font: 400 18px/1 var(--serif); color: var(--navy); }
@media (max-width: 700px) { .r-vgl-rij { grid-template-columns: 1fr 70px; } .r-vgl-schaal { grid-column: 1 / -1; grid-row: 2; } }
.scan2 [hidden] { display: none !important; }

/* juridische pagina's */
.juridisch { padding: 64px 0 88px; }
.juridisch .wrap { max-width: 860px; }
.juridisch h1 { font-size: clamp(32px, 4vw, 44px); color: var(--navy); margin-top: 12px; }
.juridisch-intro { margin-top: 16px; color: var(--muted); }
.juridisch-intro b { color: var(--ink); }
.juridisch-noot { margin-top: 16px; padding: 14px 18px; background: var(--licht); border-radius: 6px; }
.juridisch-inhoud { margin: 28px 0 12px; padding: 20px 24px; border: 1px solid var(--lijn); border-radius: 8px; }
.juridisch-inhoud ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; font-size: 15px; }
.juridisch-inhoud a { color: var(--petrol); text-decoration: none; }
.artikel { padding-top: 28px; scroll-margin-top: 20px; }
.artikel h2 { font-size: 22px; margin-bottom: 10px; }
.artikel ol { margin: 0; padding-left: 22px; }
.artikel li { padding: 4px 0; }
.artikel dl { margin: 0; }
.artikel dl div { padding: 6px 0; border-bottom: 1px solid var(--lijn); }
.artikel dt { font-weight: 700; }
.artikel dd { margin: 2px 0 0; }
.artikel a { color: var(--petrol); }
.juridisch-slot { margin-top: 32px; color: var(--muted); font-size: 14px; }
@media (max-width: 700px) { .juridisch-inhoud ol { columns: 1; } }
.agenda-dicht { min-height: 0 !important; padding: 40px; display: grid; place-items: center; text-align: center; gap: 14px; }
.agenda-dicht p { color: var(--muted); font-size: 14px; }
.agenda-dicht a, .formulier .na a { color: var(--petrol); }

/* consultancy */
.pijlers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.pijler { background: var(--wit); border-radius: 8px; padding: 22px; border-top: 3px solid var(--oker); }
.pijler .icoon { width: 38px; height: 38px; }
.pijler h3 { font-size: 20px; margin: 14px 0 6px; }
.pijler > p { color: var(--muted); font-size: 15px; margin-bottom: 10px; }
.pijler .vinkjes li { font-size: 14px; padding: 5px 0 5px 24px; }
.pijler .vinkjes li::before { top: 11px; }
.drie-vormen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tijdlijn.zeven { grid-template-columns: repeat(7, 1fr); gap: 18px; }
.samen-keten { display: flex; align-items: stretch; gap: 14px; }
.samen-stap { flex: 1; border: 1px solid var(--lijn); border-radius: 8px; padding: 22px; }
.samen-stap.actief { background: var(--navy); border-color: var(--navy); }
.samen-stap.actief h3 { color: var(--wit); }
.samen-stap.actief p { color: #B8CDD6; }
.samen-stap h3 { font-size: 20px; }
.samen-stap p { color: var(--muted); margin: 6px 0 10px; font-size: 15px; }
.samen-stap a { color: var(--petrol); font-weight: 700; text-decoration: none; }
.samen-pijl { align-self: center; font-size: 28px; color: var(--oker); }
@media (max-width: 1100px) { .pijlers { grid-template-columns: repeat(3, 1fr); } .tijdlijn.zeven { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .pijlers, .drie-vormen { grid-template-columns: 1fr 1fr; } .tijdlijn.zeven { grid-template-columns: 1fr 1fr; } .samen-keten { flex-direction: column; } .samen-pijl { transform: rotate(90deg); } }
@media (max-width: 600px) { .pijlers, .drie-vormen, .tijdlijn.zeven { grid-template-columns: 1fr; } }

/* FAQ */
.faq-lijst details { border-bottom: 1px solid var(--lijn); }
.faq-lijst summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; font: 400 19px/1.35 var(--serif); color: var(--navy); }
.faq-lijst summary::-webkit-details-marker { display: none; }
.faq-lijst summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 400 26px/1 var(--sans); color: var(--oker); }
.faq-lijst details[open] summary::after { content: "–"; }
.faq-lijst p { padding: 0 0 18px; color: var(--ink); max-width: 680px; }

/* over ons */
.over-cijfers { margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 820px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 26px; }
.over-cijfers div { margin: 0; }
.over-cijfers dt { font: 400 40px/1 var(--serif); color: var(--oker); }
.over-cijfers dd { margin: 8px 0 0; color: #B8CDD6; font-size: 15px; }
.over-tekst p { font-size: 18px; }
.over-tekst p + p { margin-top: 14px; }
.persoon { display: grid; grid-template-columns: 160px 1fr; gap: 22px; background: var(--wit); border-radius: 8px; padding: 22px; }
.persoon-foto { aspect-ratio: 1; border-radius: 8px; }
.persoon h3 { font-size: 22px; }
.persoon-rol { color: #9E6A12; font-size: 14px; font-weight: 700; margin: 4px 0 10px; }
@media (max-width: 700px) { .over-cijfers { grid-template-columns: 1fr; } .persoon { grid-template-columns: 1fr; } }
.r-consultancy { margin: 8px 0 28px; border: 1px solid var(--lijn); border-radius: 8px; padding: 22px 26px; }
.r-consultancy > h3 { font-size: 22px; }
.r-consultancy > p { color: var(--muted); margin-top: 6px; max-width: 760px; }
.r-consultancy .r-kaartje .icoon { width: 30px; height: 30px; }
.r-consultancy .r-naar-programma { padding: 0; }
.scan2 .scan-h1 { font-size: clamp(32px, 4.4vw, 48px); color: var(--navy); margin-top: 14px; max-width: 860px; }

/* contactblok: agenda eerst, formulier als alternatief */
.contact-rechts { display: grid; gap: 0; }
.agenda-keuze { background: var(--wit); color: var(--ink); border-radius: 8px; padding: 28px 32px; }
.agenda-keuze h3 { font-size: 24px; color: var(--navy); }
.agenda-keuze > p:not(.na) { color: var(--muted); margin: 8px 0 18px; }
.agenda-keuze .knop { width: 100%; border: 0; cursor: pointer; text-align: center; }
.agenda-keuze .na { font-size: 13px; color: var(--muted); text-align: center; margin-top: 10px; }
.of-scheiding { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #9FB9C6; font-size: 14px; }
.of-scheiding::before, .of-scheiding::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.2); }
.formulier-licht { padding: 22px 26px; gap: 12px; }
.formulier-licht .knop { background: var(--wit); color: var(--navy); border: 2px solid var(--navy); }
.agenda-venster .agenda-kader { height: min(760px, 85vh); background: var(--wit); border-radius: 8px; overflow: hidden; }
.agenda-venster iframe { width: 100%; height: 100%; border: 0; }
.agenda-venster .placeholder { height: 100%; }
img.wie-foto { object-fit: cover; border: 3px solid var(--oker); }
img.persoon-foto { width: 100%; height: auto; object-fit: cover; }
.trainer-foto { width: 100%; max-height: 320px; object-fit: cover; object-position: center 20%; border-radius: 8px; }

/* logo: het originele logo is donker op transparant; op de donkere balk tonen we het wit */
.logo img { display: block; height: 34px; width: auto; filter: brightness(0) invert(1); }
.footer-logo { height: 22px; width: auto; vertical-align: middle; filter: brightness(0) invert(1); opacity: .9; }
.team-delen { margin-top: 32px; max-width: 640px; padding: 20px 24px; border: 1px solid var(--lijn); border-radius: 8px; }
.team-delen p { color: var(--muted); margin: 6px 0 14px; }
.team-gedeeld { color: var(--petrol); font-weight: 700; }
.quote-wie { display: flex; align-items: center; gap: 14px; text-align: left; }
.quote-wie img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.quote-wie.centraal { justify-content: center; }
.quote blockquote, .bewijs-klein blockquote { font-size: 22px !important; }

/* klantlogo's: rustig in grijs, in kleur bij aanwijzen */
.logos .rij { align-items: center; justify-content: space-between; gap: 28px; }
.klantlogo { width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.klantlogo:hover { filter: none; opacity: 1; }
@media (max-width: 900px) { .logos .rij { justify-content: flex-start; gap: 22px 32px; } .klantlogo { max-width: 130px; } }

/* ===== Rapport in drie delen: samenvatting · alle onderwerpen · wat je eraan doet (max. 3 A4 bij printen) ===== */
.r-pagina { padding: 28px 0 8px; }
.r-pagina + .r-pagina { border-top: 2px solid var(--navy); margin-top: 28px; }
.r-pagina-kop { margin-bottom: 14px; }
.r-pagina-kop h2 { font: 400 30px/1.2 var(--serif); color: var(--navy); margin: 6px 0 4px; }
.r-pagina-kop p { color: var(--muted); font-size: 15px; max-width: 820px; }
.r-pagina .r-lead { font-size: 19px; margin: 14px 0 0; max-width: 860px; }
.r-ico { display: inline-flex; flex: none; }
.r-ico .icoon { width: 22px; height: 22px; stroke-width: 3.2; }
.r-kop3 { display: flex; align-items: center; gap: 8px; font: 700 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #9E6A12; margin: 26px 0 12px; }
.r-kop3 .icoon { width: 20px; height: 20px; }
.r-kern { display: grid; grid-template-columns: 36px 1fr; gap: 14px; margin-bottom: 14px; max-width: 860px; }
.r-kern > span { width: 34px; height: 34px; border-radius: 50%; background: var(--oker); color: var(--navy); display: grid; place-items: center; font: 700 16px var(--serif); }
.r-kern h4 { font: 400 19px/1.3 var(--serif); color: var(--navy); margin: 0 0 3px; }
.r-kern p { font-size: 16px; }
.r-fasebalken { max-width: 860px; }
.r-fasebalk { display: grid; grid-template-columns: 24px 220px 1fr 110px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--lijn); font-size: 15px; }
.r-fasebalk > b { text-align: right; color: var(--navy); }
.r-schaal { position: relative; height: 12px; background: var(--licht); border-radius: 6px; }
.r-schaal .balk { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; min-width: 6px; }
.r-schaal i.dir, .r-schaal i.tm, .r-legenda-kort i.dir, .r-legenda-kort i.tm { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.r-schaal i.dir, .r-schaal i.tm { position: absolute; top: -2px; transform: translateX(-8px); }
i.dir { background: var(--navy); } i.tm { background: var(--oker); }
.r-schaal em { position: absolute; left: 8px; top: -3px; font-size: 12px; color: var(--muted); font-style: normal; }
.r-legenda-kort { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--muted); margin: 8px 0 10px; }
.r-legenda-kort i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.r-legenda-kort i.dir, .r-legenda-kort i.tm { width: 13px; height: 13px; border-radius: 50%; }
.r-doeltegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.r-doeltegel { border: 1px solid var(--lijn); border-radius: 8px; padding: 12px 14px; position: relative; }
.r-doeltegel > .r-ico { position: absolute; top: 10px; right: 10px; }
.r-doeltegel .r-risico { display: inline-block; font: 700 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; }
.r-doeltegel.hoog .r-risico { background: #FBE3D9; color: #9E2A12; } .r-doeltegel.midden .r-risico { background: #FFF1CC; color: #7A5A00; } .r-doeltegel.laag .r-risico { background: #DDF0E6; color: #1F6B45; }
.r-doeltegel h4 { font: 400 17px/1.3 var(--serif); color: var(--navy); margin: 6px 0 4px; }
.r-doeltegel h4 small { font: 400 14px var(--sans); color: var(--muted); }
.r-doeltegel p { font-size: 13px; color: var(--ink); }
.r-noot { font-size: 14px; color: var(--muted); margin: 10px 0; max-width: 860px; }
.r-noot .r-ico .icoon, .r-chip .r-ico .icoon, .r-effecten .icoon, .r-tabel-groep .icoon { width: 15px; height: 15px; stroke-width: 3.6; vertical-align: -3px; margin-right: 4px; }
.r-chip { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; padding: 2px 9px; border-radius: 12px; background: var(--wit); border: 1px solid var(--lijn); margin: 2px 4px 2px 0; white-space: nowrap; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); }
.r-chip.kennis { background: #FFF6E0; border-color: #F0D58A; }
.r-legenda-kort .r-badge { margin: 0 5px 0 0; }
.r-effecten > span { display: flex; align-items: center; }
.r-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--oker); color: var(--navy); font: 700 11px var(--sans); margin-left: 6px; vertical-align: 1px; }
.r-vlag { font: 700 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #9E2A12; margin-left: 8px; }
.r-kaart { border-top: 2px solid var(--navy); }
.r-kaart-kop, .r-kaart-rij { display: grid; grid-template-columns: 1fr repeat(4, 92px); align-items: center; }
.r-kaart-team .r-kaart-rij, .r-kaart-team .r-kaart-kop { grid-template-columns: 1fr 340px; }
.r-kaart-kop .r-as { display: flex; justify-content: space-between; margin: 0 4px; padding: 8px 0; }
.r-kaart-kop .r-as i { font: 700 10px var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.r-dirweet { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 8px; }
.r-kaart-kop span { font: 700 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 8px 0; }
.r-kaart-fase { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--licht); padding: 7px 8px; margin-top: 4px; }
.r-kaart-fase > b { font: 700 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--petrol); margin-right: auto; }
.r-kaart-fase .icoon { width: 18px; height: 18px; }
.r-kaart-rij { border-bottom: 1px solid var(--lijn); min-height: 32px; font-size: 14px; }
.r-kaart-naam { padding: 5px 8px; }
.r-kaart-naam summary { cursor: pointer; list-style: none; }
.r-kaart-naam summary::-webkit-details-marker { display: none; }
.r-kaart-naam summary:hover { color: var(--petrol); text-decoration: underline; }
.r-kaart-naam details p { font-size: 13px; color: var(--ink); margin: 6px 0 4px; max-width: 560px; }
.r-stip { text-align: center; }
.r-stip i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #EEF2F4; }
.r-stip i.n1 { background: #E6A817; } .r-stip i.n2 { background: #F0CD7A; } .r-stip i.n3 { background: #7FB3C4; } .r-stip i.n4 { background: var(--petrol); }
.r-buiten-tekst { grid-column: span 4; text-align: center; color: var(--muted); font-size: 13px; font-style: normal; }
.r-kaart-team .r-schaal { margin: 0 12px; }
.r-tabel { border-top: 2px solid var(--navy); margin-bottom: 8px; }
.r-tabel-kop, .r-tabel-rij { display: grid; gap: 12px; padding: 8px 6px; }
.r-stappen .r-tabel-kop, .r-stappen .r-tabel-rij { grid-template-columns: 26px 210px 1fr 1fr; }
.r-prog .r-tabel-kop, .r-prog .r-tabel-rij { grid-template-columns: 70px 200px 1fr 190px; }
.r-tabel-kop span { font: 700 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.r-tabel-rij { border-bottom: 1px solid var(--lijn); font-size: 14px; }
.r-tabel-rij small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.r-tabel-rij a { color: var(--navy); font-weight: 700; text-decoration: none; }
.r-tabel-rij a:hover { text-decoration: underline; }
.r-tabel-rij .r-badge { margin: 0; }
.r-maand-nr { color: var(--muted); }
.r-tabel-groep { background: var(--licht); padding: 6px 8px; font-size: 13px; color: var(--muted); }
.r-tabel-groep b { font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #9E6A12; margin-right: 6px; }
.r-effecten { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 13px; white-space: nowrap; align-content: start; }
.r-pijlers { margin: 6px 0 0; }
.r-pijlers .r-naar-programma { display: inline; padding: 0 0 0 8px; }
.r-pagina .r-naar-programma { padding: 6px 0 0; }
.r-pagina .r-cta { margin-top: 26px; }
.alleen-print, .r-noot-print { display: none; }
@media screen and (max-width: 900px) {
  .r-doeltegels { grid-template-columns: 1fr 1fr; }
  .r-fasebalk { grid-template-columns: 24px 1fr 90px; }
  .r-fasebalk .r-schaal { grid-column: 2 / -1; grid-row: 2; }
  .r-kaart-kop, .r-kaart-rij { grid-template-columns: 1fr repeat(4, 34px); }
  .r-kaart-kop { display: none; }
  .r-kaart-team .r-kaart-rij { grid-template-columns: 1fr; }
  .r-kaart-team .r-schaal { margin: 4px 16px 12px 8px; }
  .r-stappen .r-tabel-kop, .r-prog .r-tabel-kop { display: none; }
  .r-stappen .r-tabel-rij { grid-template-columns: 26px 1fr; }
  .r-stappen .r-tabel-rij > span:nth-child(n+3) { grid-column: 2; }
  .r-prog .r-tabel-rij { grid-template-columns: 1fr; gap: 4px; }
}
@media screen and (max-width: 560px) { .r-doeltegels { grid-template-columns: 1fr; } }
@media print {
  @page { size: A4; margin: 12mm 14mm; }
  .scan2 .wrap, .scan2 .container { max-width: none; }
  .rapport-kop { padding-bottom: 8px; flex-wrap: nowrap; }
  .rapport *:focus, .rapport :focus-visible { outline: none !important; }
  .rapport-kop .scan-h1 { font-size: 26px; }
  .totaal { text-align: right; }
  .totaal strong { font-size: 34px; }
  .r-pagina { padding: 0; font-size: 11px; }
  .r-pagina + .r-pagina { border-top: 0; margin-top: 0; break-before: page; }
  .r-pagina-kop { border-bottom: 2px solid var(--navy); padding-bottom: 6px; margin-bottom: 8px; }
  .r-pagina-kop h2 { font-size: 21px; margin: 2px 0; }
  .r-pagina-kop p, .r-leeswijzer-kort, .r-noot { font-size: 10px; margin: 4px 0; }
  .r-pagina .r-lead { font-size: 13px; margin-top: 8px; }
  .r-kop3 { font-size: 9.5px; margin: 12px 0 6px; }
  .r-kop3 .icoon, .r-ico .icoon { width: 15px; height: 15px; }
  .r-kern { grid-template-columns: 26px 1fr; gap: 8px; margin-bottom: 6px; }
  .r-kern > span { width: 22px; height: 22px; font-size: 12px; }
  .r-kern h4 { font-size: 13px; }
  .r-kern p, .r-fasebalk, .r-kaart-rij, .r-tabel-rij { font-size: 10.5px; }
  .r-fasebalk { padding: 4px 0; grid-template-columns: 18px 170px 1fr 70px; }
  .r-doeltegels { gap: 6px; }
  .r-doeltegel { padding: 7px 8px; }
  .r-doeltegel h4 { font-size: 12px; }
  .r-doeltegel p { font-size: 9px; }
  .r-kaart-rij { min-height: 0; }
  .r-kaart-naam { padding: 1px 6px; }
  .r-kaart-rij { font-size: 10px; line-height: 1.3; }
  .r-kaart-fase { padding: 2px 6px; margin-top: 1px; }
  .r-kaart-kop span { padding: 3px 0; font-size: 8px; }
  .r-kaart-kop .r-as i, .r-dirweet { font-size: 8px; }
  .r-kaart-fase > b { font-size: 9.5px; }
  .r-stip i { width: 10px; height: 10px; }
  .r-chip { font-size: 9px; padding: 0 6px; }
  .r-tabel-kop, .r-tabel-rij { padding: 4px 4px; gap: 8px; }
  .r-tabel-rij small { font-size: 9px; }
  .r-effecten { font-size: 9.5px; gap: 1px 6px; }
  .r-prog .r-tabel-kop, .r-prog .r-tabel-rij { grid-template-columns: 44px 128px 1fr 142px; }
  .r-stappen .r-tabel-kop, .r-stappen .r-tabel-rij { grid-template-columns: 20px 170px 1fr 1fr; }
  .r-tabel-kop span { font-size: 8px; }
  .r-tabel-groep, .r-legenda-kort { font-size: 9.5px; padding-top: 3px; padding-bottom: 3px; margin: 4px 0; }
  .r-tabel-groep b { font-size: 8.5px; }
  .r-fasebalk { grid-template-columns: 18px 170px 1fr 92px; }
  .r-buiten-tekst, .r-schaal em { font-size: 9.5px; }
  .totaal span { white-space: nowrap; font-size: 11px; }
  .r-badge { width: 15px; height: 15px; font-size: 9px; }
  .r-pagina .r-cta { display: none; }
  .r-kaart-naam details[open] p { display: none; }
  .r-kaart-rij, .r-tabel-rij, .r-kern, .r-doeltegel, .r-combi { break-inside: avoid; }
  .r-combis { gap: 8px; margin: 8px 0 14px; }
  .r-combi { padding: 10px 12px; }
  .r-combi h3 { font-size: 13px; margin-bottom: 4px; }
  .r-combi p { font-size: 10.5px; }
  .r-combi .r-op, .r-combi .doel-tag { font-size: 9.5px; }
  .r-naar-programma, .r-pijlers .r-naar-programma { display: none !important; }
  .r-noot-print { display: block; }
  .alleen-print { display: block; margin-top: 12px; padding: 8px 10px; border: 1px solid var(--navy); border-radius: 6px; font-size: 10.5px; color: var(--navy); }
}

/* ===== Startscherm scan: beloftes en triage (rol → alleen/met team → bureau) ===== */
.scan-beloftes { list-style: none; padding: 0; margin: 18px 0 8px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; color: var(--ink); }
.scan-beloftes li { display: flex; align-items: center; gap: 7px; }
.scan-beloftes li::before { content: ""; width: 16px; height: 16px; flex: none; background: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23E6A817' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.scan-voorbeeld { color: var(--muted); }
.scan-voorbeeld a { color: var(--petrol); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.scan-voorbeeld a:hover { color: var(--navy); }
.vormen.rollen { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.vorm .vorm-label { display: inline-block; margin: 0 0 0 6px; font: 700 10px/1 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; background: var(--oker); color: var(--navy); padding: 4px 7px; border-radius: 3px; vertical-align: 3px; }
.scan-bereik { margin: 14px 0 0; }
.scan-bereik summary { cursor: pointer; color: var(--petrol); font-weight: 700; font-size: 15px; list-style: none; display: inline-block; border-bottom: 1px solid currentColor; }
.scan-bereik summary::-webkit-details-marker { display: none; }
.scan-bereik p { margin: 10px 0 8px; font-size: 14px; color: var(--muted); }
.scan-bereik .selectie { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) { .vormen.rollen { grid-template-columns: 1fr; } }
.scan-instructie { margin: 36px 0 22px; max-width: 760px; background: var(--licht); border-left: 4px solid var(--oker); border-radius: 0 8px 8px 0; padding: 20px 24px 8px; }
.scan-instructie h2 { font: 400 20px/1.3 var(--serif); color: var(--navy); margin: 0 0 12px; }
.scan-instructie ol { margin: 0; padding: 0; list-style: none; counter-reset: instr; }
.scan-instructie li { counter-increment: instr; position: relative; padding: 0 0 14px 38px; font-size: 15px; color: var(--muted); }
.scan-instructie li::before { content: counter(instr); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; background: var(--oker); color: var(--navy); display: grid; place-items: center; font: 700 13px var(--sans); }
.scan-instructie li b { display: block; color: var(--navy); font-size: 16px; margin-bottom: 2px; }
.scan-instructie[hidden] { display: none; }
/* Intro van de scan: belofte, wat de scan is, wat je krijgt en het voorbeeldrapport */
.scan-held { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; }
.scan-krijg-kop { font: 700 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #9E6A12; margin: 28px 0 10px; }
.scan-krijg { list-style: none; margin: 0; padding: 0; counter-reset: krijg; max-width: 680px; }
.scan-krijg li { counter-increment: krijg; position: relative; padding: 6px 0 6px 38px; font-size: 17px; color: var(--navy); }
.scan-krijg li::before { content: counter(krijg); position: absolute; left: 0; top: 5px; width: 26px; height: 26px; border-radius: 50%; background: var(--oker); color: var(--navy); display: grid; place-items: center; font: 700 13px var(--sans); }
.scan-voorbeeldbeeld { margin-top: 30px; background: var(--licht); border: 1px solid var(--lijn); border-radius: 12px; padding: 24px 24px 22px; }
.scan-voorbeeldbeeld h2 { font: 400 22px/1.25 var(--serif); color: var(--navy); margin: 0 0 6px; }
.scan-voorbeeldbeeld > p { font-size: 15px; color: var(--muted); margin: 0 0 14px; }
.scan-waaier { display: block; position: relative; height: 296px; }
.scan-waaier img { position: absolute; width: 200px; height: auto; border-radius: 4px; background: #fff; box-shadow: 0 8px 26px rgba(0, 46, 71, .2); border: 1px solid var(--lijn); transition: transform .2s; }
.scan-waaier img[data-pagina="3"] { left: 70px; top: 26px; transform: rotate(5deg); }
.scan-waaier img[data-pagina="2"] { left: 36px; top: 12px; transform: rotate(2deg); }
.scan-waaier img[data-pagina="1"] { left: 0; top: 0; }
.scan-voorbeeld-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.scan-voorbeeld-knoppen .knop { text-align: center; padding-left: 10px; padding-right: 10px; }
.scan-afzender { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
@media (max-width: 1100px) { .scan-held { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; } .scan-waaier { height: 300px; } .scan-waaier img { width: 196px; } }
@media (max-width: 900px) {
  .scan-held { grid-template-columns: 1fr; gap: 0; }
    .scan-waaier { height: 300px; max-width: 320px; }
  .scan-waaier img { width: 190px; }
  .scan-waaier img[data-pagina="3"] { left: 70px; top: 22px; }
  .scan-waaier img[data-pagina="2"] { left: 36px; top: 10px; }
}
@media (max-width: 560px) { .scan-waaier { height: 250px; } .scan-waaier img { width: 160px; } .scan-krijg li { font-size: 16px; } }
/* Conversie scanpagina: knop naar de rolkeuze, geruststelling, klantlogo's, uitnodigingsbericht */
.scan-gerust { margin: 12px 0 0; font-size: 14px; color: var(--muted); max-width: 640px; }
.scan-gerust[hidden], .scan-gerust [hidden] { display: none; }
.team-bericht textarea { width: 100%; max-width: 680px; font: 15px/1.5 var(--sans); padding: 12px 14px; border: 1px solid var(--lijn); border-radius: 6px; background: var(--licht); color: var(--ink); resize: vertical; }
.team-bericht .scan-knoppen { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; }
.herken-scan { margin-top: 22px; font-size: 16px; color: var(--ink); max-width: 520px; }
.herken-scan a { color: var(--petrol); font-weight: 700; white-space: nowrap; }
/* Koppen die programmatisch focus krijgen (voor schermlezers) zonder zichtbare rand. */
[tabindex="-1"]:focus { outline: none; }

/* ===== Scan: één vraag per keer (Typeform-stijl) ===== */
.scan-scherm[data-scherm="vraag"] .niveauvraag, .scan-scherm[data-scherm="vraag"] .oorzaak { display: none; }
.scan-scherm[data-scherm="vraag"] .niveauvraag.actief, .scan-scherm[data-scherm="vraag"] .oorzaak.actief:not([hidden]) { display: block; }
.scan-scherm[data-modus="vraag"] .scan-context, .scan-scherm[data-modus="oorzaak"] .scan-context { display: none; }
.scan-scherm[data-modus="vraag"][data-eerste="1"] .scan-context { display: block; font-size: 16px; color: var(--ink); max-width: 760px; margin: 2px 0 6px; }
.scan-scherm[data-modus="vraag"] .scan-onderdeel h2, .scan-scherm[data-modus="oorzaak"] .scan-onderdeel h2 { font-size: 20px; }
.scan-scherm[data-modus="vraag"] .scan-onderdeel .icoon, .scan-scherm[data-modus="oorzaak"] .scan-onderdeel .icoon { width: 28px; height: 28px; }
.scan-scherm[data-modus="vraag"] .scan-leidvraag { font-size: 14px; }
.niveauvraag.actief { margin-top: 22px; }
.niveauvraag.actief legend { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.3; margin-bottom: 18px; }
.niveauvraag.actief .niveau span { padding: 16px 18px 16px 54px; font-size: 17px; }
.niveauvraag.actief .niveau span::before { left: 20px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; }
.niveauvraag.actief .niveau:hover span { border-color: var(--petrol); }
@keyframes mist { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.niveauvraag.mist { animation: mist .35s ease; }
@media (prefers-reduced-motion: reduce) { .niveauvraag.mist { animation: none; } }
.scan-fase-klaar { margin: 16px 0 6px; padding: 14px 18px; background: var(--licht); border-left: 4px solid var(--oker); border-radius: 0 8px 8px 0; font-size: 16px; color: var(--ink); max-width: 760px; }
.scan-fase-klaar b { color: var(--navy); }
.scan-fasen-mini { display: flex; gap: 5px; margin-bottom: 10px; }
.scan-fasen-mini i { flex: 1; max-width: 70px; height: 8px; border-radius: 4px; background: #DCE4E8; }
.scan-fasen-mini i.klaar { background: var(--oker); }
.scan-fasen-mini i.nu { background: repeating-linear-gradient(45deg, #F0CD7A 0 6px, #F7E2B0 6px 12px); }
.scan-balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--wit); border-top: 1px solid var(--lijn); box-shadow: 0 -4px 16px rgba(0, 46, 71, .08); }
.scan-balk[hidden] { display: none; }
.scan-balk-vul { height: 4px; background: var(--licht); }
.scan-balk-vul span { display: block; height: 100%; background: var(--oker); transition: width .3s; }
.scan-balk p { max-width: 1180px; margin: 0 auto; padding: 10px 24px; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.scan-balk b { color: var(--navy); }
.scan-later { margin-left: auto; background: none; border: 0; padding: 0; font: 700 14px var(--sans); color: var(--petrol); cursor: pointer; border-bottom: 1px solid currentColor; }
.scan-later[hidden] { display: none; }
body.met-balk { padding-bottom: 64px; }
@media (max-width: 560px) { .scan-later { margin-left: 0; } .niveauvraag.actief .niveau span { font-size: 16px; } }
/* Nieuwe vraag schuift zacht in beeld, zodat duidelijk is dat er een volgende vraag staat. */
@keyframes vraag-binnen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.niveauvraag.binnen, .oorzaak.binnen { animation: vraag-binnen .35s ease-out; }
@media (prefers-reduced-motion: reduce) { .niveauvraag.binnen, .oorzaak.binnen { animation: none; } }

/* Afsluiting van het rapport: twee acties, gesprek plannen en downloaden */
.r-acties { margin: 40px 0 10px; padding-top: 30px; border-top: 2px solid var(--navy); }
.r-acties > h2 { font: 400 30px/1.2 var(--serif); color: var(--navy); margin: 0 0 18px; }
.r-acties-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: stretch; }
.r-acties-grid.enkel { grid-template-columns: minmax(0, 520px); }
.r-actie { border: 1px solid var(--lijn); border-radius: 12px; padding: 26px 28px; background: var(--wit); display: flex; flex-direction: column; align-items: flex-start; }
.r-actie h3 { display: flex; align-items: center; gap: 10px; font: 400 24px/1.25 var(--serif); color: var(--navy); margin: 0 0 8px; }
.r-actie h3 .icoon { width: 30px; height: 30px; }
.r-actie p { font-size: 16px; color: var(--muted); margin: 0 0 14px; }
.r-actie ul { margin: -4px 0 18px; padding-left: 20px; font-size: 15px; }
.r-actie ul li { margin-bottom: 4px; }
.r-actie .knop { margin-top: auto; }
.r-actie.hoofd { background: var(--navy); border-color: var(--navy); color: #fff; }
.r-actie.hoofd h3 { color: #fff; }
.r-actie.hoofd p, .r-actie.hoofd ul { color: #C9D9E1; }
.r-actie.hoofd .knop { font-size: 17px; padding: 17px 30px; }
.r-actie-noot { font-size: 13px !important; margin: 10px 0 0 !important; }
.r-actie-links { margin: 14px 0 0 !important; font-size: 14px !important; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.r-actie-links a, .r-actie-links button { background: none; border: 0; padding: 0; font: 700 14px var(--sans); color: var(--petrol); cursor: pointer; text-decoration: none; border-bottom: 1px solid currentColor; }
.r-opnieuw { margin: 16px 0 0; }
@media (max-width: 800px) { .r-acties-grid { grid-template-columns: 1fr; } }
@media print { .r-acties { display: none !important; } }
.scan-taal { margin: 0 0 14px; font-size: 14px; }
.scan-taal a { color: var(--petrol); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }

/* ===== Conversie: gesprek als hoofdactie ===== */
.nav-rechts { gap: 12px; }
header.nav .knop.nav-scan { color: var(--wit); border-color: rgba(255, 255, 255, .45); }
header.nav .knop.nav-scan:hover { border-color: var(--wit); }
@media (max-width: 1180px) { header.nav .knop.nav-scan { display: none; } }
.contact-doelgroep { margin-top: 18px; font-size: 14px; color: #9FB9C6; }
.garantie-regel { margin: 12px 0 0; font-size: 14px; color: var(--muted); padding-left: 22px; position: relative; }
.garantie-regel::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; background: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M22 3l16 6v11c0 10-7 17-16 21C13 37 6 30 6 20V9z' fill='none' stroke='%23E6A817' stroke-width='3.4'/%3E%3C/svg%3E"); }
.garantie-regel.licht { color: #B8CDD6; }
.contact-citaat { margin: 28px 0 0; padding: 18px 20px; border-left: 3px solid var(--oker); background: rgba(255, 255, 255, .05); border-radius: 0 8px 8px 0; }
.contact-citaat blockquote { margin: 0; font: italic 400 17px/1.5 var(--serif); color: #E4EEF2; }
.contact-citaat figcaption { margin-top: 10px; font-size: 14px; color: #9FB9C6; }
/* Mobiel: vaste balk met de hoofdactie */
.mobiel-balk { display: none; }
@media (max-width: 900px) {
  .mobiel-balk:not([hidden]) { display: grid; grid-template-columns: 1fr auto; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--navy); box-shadow: 0 -4px 18px rgba(0, 0, 0, .18); }
  .mobiel-balk .knop { text-align: center; padding: 13px 16px; font-size: 15px; }
  .mobiel-balk .knop.secundair { color: var(--wit); border-color: rgba(255, 255, 255, .5); }
  body:has(.mobiel-balk:not([hidden])) { padding-bottom: 72px; }
}
/* Kennismakingspagina: belofte links, agenda rechts */
.agenda-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.agenda-belofte h1 { margin-top: 18px; }
.agenda-vak h2 { color: var(--wit); font-size: 22px; margin: 6px 0 12px; }
.agenda-vak .agenda { margin-top: 0; }
.agenda-privacy { margin-top: 10px; font-size: 13px; color: #9FB9C6; }
.agenda-privacy a { color: var(--oker); }
@media (max-width: 900px) { .agenda-grid { grid-template-columns: 1fr; gap: 28px; } }
/* Bedankt en bevestiging */
.bedankt-vervolg { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; }
.bedankt-vervolg.enkel { grid-template-columns: minmax(0, 640px); }
.bedankt-vervolg > div { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; padding: 24px 26px; }
.bedankt-vervolg h2 { color: var(--wit); font-size: 22px; margin: 0 0 8px; }
.bedankt-vervolg p, .voorbereid { color: #C9D9E1; }
.bedankt-vervolg .knop { margin-top: 14px; }
.bedankt-vervolg .knop.secundair { color: var(--wit); }
.voorbereid { margin: 6px 0 4px; padding-left: 20px; } .voorbereid li { margin-bottom: 8px; }
.bedankt .wie p { color: #D6E4EA; }
@media (max-width: 700px) { .bedankt-vervolg { grid-template-columns: 1fr; } }
/* Rekentool programma */
.rekentool { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; background: var(--wit); }
.rekentool > div:first-child { padding: 26px 28px; display: grid; gap: 12px; }
.rekentool h3 { margin: 0; color: var(--navy); }
.rekentool p { margin: 0; color: var(--muted); font-size: 15px; }
.rekentool label { display: grid; gap: 4px; font-size: 14px; font-weight: 700; color: var(--navy); }
.rekentool input, .rekentool select { font: 16px var(--sans); padding: 10px 12px; border: 1px solid #C9D6DD; border-radius: 4px; background: var(--wit); max-width: 320px; }
.rekentool-uitkomst { background: var(--licht); padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.rekentool-uitkomst strong { font: 400 clamp(32px, 4vw, 44px)/1.1 var(--serif); color: var(--navy); font-variant-numeric: tabular-nums; }
.rekentool-uitkomst .knop { align-self: flex-start; margin-top: 6px; }
@media (max-width: 800px) { .rekentool { grid-template-columns: 1fr; } }
/* Gespreksmoment op de homepage */
.sectie-cta { margin-top: 30px; display: flex; gap: 18px 28px; align-items: center; flex-wrap: wrap; padding: 22px 26px; background: var(--licht); border-radius: 10px; }
.sectie-cta p { margin: 0; flex: 1 1 360px; color: var(--ink); }
.kaarten3.kaarten4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .kaarten3.kaarten4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kaarten3.kaarten4 { grid-template-columns: 1fr; } }
/* Homepage compacter: probleem + resultaat in één kaart, compacte trainingsvormen, consultancy in het slot */
.kaart-oplevert { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--lijn); font-size: 14px; color: var(--ink) !important; }
.kaart-oplevert b { display: block; color: #9E6A12; margin-bottom: 2px; }
.kaarten-slot { margin-top: 22px; color: var(--muted); max-width: 760px; }
.standpunt-regel { margin-top: 14px; color: #C9D9E1; max-width: 760px; }
.standpunt-regel b { color: var(--oker); }
.tracks.compact .track { display: flex; flex-direction: column; }
.tracks.compact .track .knop { margin-top: auto; align-self: flex-start; }
.tracks.compact .track .sub { margin-bottom: 18px; }
.slot-consultancy { margin-top: 30px; color: #C9D9E1; max-width: 860px; }
.slot-consultancy b { color: var(--wit); }
.slot-consultancy a { color: var(--oker); font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (max-width: 700px) {
  .trainingen { grid-template-columns: 1fr !important; gap: 8px !important; }
  .trainingen .training { display: grid; grid-template-columns: 32px 1fr; gap: 2px 12px; align-items: center; padding: 12px 14px; }
  .trainingen .training .n, .trainingen .training p { display: none; }
  .trainingen .training .icoon { width: 30px; height: 30px; grid-row: span 1; }
  .trainingen .training h3 { margin: 0; font-size: 17px; }
}
/* Homepage: iets minder witruimte tussen de blokken */
main:has(.home-hero) > section:not(.hero):not(.logos) { padding-top: 68px; padding-bottom: 68px; }
@media (max-width: 700px) { main:has(.home-hero) > section:not(.hero):not(.logos) { padding-top: 52px; padding-bottom: 52px; } }
/* Trainingskaarten (homepage en programmapagina): icoontegel, fase, 'bekijk'-regel en okere accentlijn bij hover */
.training, .fase-trainingen .training { position: relative; display: flex; flex-direction: column; background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 24px 22px 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 46, 71, .05); transition: transform .2s, box-shadow .2s, border-color .2s; }
.training::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--oker); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.training:hover { transform: translateY(-4px); border-color: #CBD8DF; box-shadow: 0 16px 32px -14px rgba(0, 46, 71, .28); }
.training:hover::before { transform: scaleX(1); }
.training .n { position: absolute; top: 16px; right: 20px; float: none; font: 400 34px/1 var(--serif); color: #E3EAEE; }
.training-icoon { width: 54px; height: 54px; border-radius: 14px; background: #FBF1DC; display: grid; place-items: center; flex: none; transition: background .2s; }
.training-icoon .icoon { width: 30px; height: 30px; }
.training:hover .training-icoon { background: #F7E3B5; }
.training-fase { margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9E6A12; }
.training h3 { font-size: 19px; margin: 6px 0 8px; color: var(--navy); }
.training-icoon + h3 { margin-top: 18px; }
.training p { font-size: 15px; color: var(--muted); flex: 1; }
.fase-trainingen .training p { font-size: 14px; }
.training-meer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--lijn); font-size: 14px; font-weight: 700; color: var(--navy); }
.training-meer i { font-style: normal; color: var(--oker); display: inline-block; transition: transform .2s; }
.training:hover .training-meer i { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .training, .training::before, .training-meer i { transition: none; } .training:hover { transform: none; } }
/* Telefoon: compacte lijst, ook op de programmapagina */
@media (max-width: 700px) {
  .trainingen, .fase-trainingen { grid-template-columns: 1fr !important; gap: 8px !important; }
  .trainingen .training, .fase-trainingen .training { display: grid; grid-template-columns: 40px 1fr auto; gap: 0 12px; align-items: center; padding: 10px 14px; border-radius: 10px; }
  .training .n, .training p, .training-fase, .training::before { display: none; }
  .training-icoon { width: 40px; height: 40px; border-radius: 10px; }
  .training-icoon .icoon { width: 24px; height: 24px; }
  .trainingen .training h3, .fase-trainingen .training h3 { margin: 0; font-size: 17px; }
  .training-meer { margin: 0; padding: 0; border: 0; font-size: 0; }
  .training-meer i { font-size: 18px; }
  .fase { gap: 14px; }
}
.rekentool-aanname { font-size: 13px; line-height: 1.45; color: var(--muted); max-width: 46ch; }
/* Programmapagina: minder witruimte tussen de blokken, net als op de homepage */
main:has(.programma-hero) > section:not(.hero):not(.logos) { padding-top: 68px; padding-bottom: 68px; }
@media (max-width: 700px) { main:has(.programma-hero) > section:not(.hero):not(.logos) { padding-top: 52px; padding-bottom: 52px; } }
/* Programmapagina: kaarten iets compacter, de fase staat er al naast */
.fase-trainingen .training { padding: 20px 20px 18px; }
.fase-trainingen .training-icoon { width: 46px; height: 46px; border-radius: 12px; }
.fase-trainingen .training-icoon .icoon { width: 26px; height: 26px; }
.fase-trainingen .training-icoon + h3 { margin-top: 14px; }
.fase-trainingen .training-meer { border-top: 0; padding-top: 0; margin-top: 12px; }
/* Rekentool: invoervelden twee aan twee */
.rekentool > div:first-child { grid-template-columns: 1fr 1fr; column-gap: 16px; align-content: start; }
.rekentool > div:first-child > :is(h3, p, small) { grid-column: 1 / -1; }
.rekentool label { align-content: end; }
.rekentool input, .rekentool select { max-width: none; width: 100%; box-sizing: border-box; }
@media (max-width: 700px) {
  .rekentool > div:first-child { grid-template-columns: 1fr; padding: 20px; }
  .rekentool-uitkomst { padding: 20px; }
  .fase-trainingen .training { padding: 10px 14px; }
  .fase-trainingen .training-icoon { width: 40px; height: 40px; border-radius: 10px; }
  .fase-trainingen .training-icoon + h3 { margin-top: 0; }
  .fase-trainingen .training-meer { margin: 0; }
}
/* Agenda laden: schets van een kalender tot Calendly zichtbaar is, daarna de agenda zelf */
.agenda, .agenda-venster .agenda-kader { position: relative; }
.agenda-laden { display: none; }
.agenda-laadt .agenda-laden { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px; background: var(--wit); text-align: center; color: var(--muted); font-size: 15px; }
.agenda-laadt iframe { opacity: 0; }
.agenda iframe, .agenda-venster iframe { transition: opacity .3s; }
.agenda-schets { width: min(320px, 80%); display: grid; gap: 12px; }
.agenda-schets i { display: block; height: 14px; border-radius: 7px; background: #E8EEF1; }
.agenda-schets i:first-child { width: 55%; margin: 0 auto; }
.agenda-schets i:nth-child(2) { width: 35%; margin: 0 auto 8px; height: 10px; }
.agenda-schets b { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.agenda-schets span { aspect-ratio: 1; border-radius: 50%; background: #EEF3F5; }
.agenda-schets span:nth-child(7n+3), .agenda-schets span:nth-child(7n+5) { background: #FBF1DC; }
.agenda-schets i, .agenda-schets span { animation: agenda-puls 1.4s ease-in-out infinite; }
@keyframes agenda-puls { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .agenda-schets i, .agenda-schets span { animation: none; } }
.agenda-uitweg { font-size: 14px; line-height: 1.6; }
.agenda-uitweg a { color: var(--petrol); font-weight: 700; }
/* Agendavenster vanuit het rapport: eigen kop boven de agenda */
.agenda-venster-kop { background: var(--navy); color: var(--wit); padding: 18px 24px; border-radius: 8px 8px 0 0; }
.agenda-venster-kop h2 { font-size: 22px; color: var(--wit); }
.agenda-venster-kop p { color: #C9D9E1; font-size: 15px; margin-top: 4px; }
.agenda-venster-kop + .agenda-kader { border-radius: 0 0 8px 8px; height: min(680px, calc(85vh - 90px)); }
@media (max-width: 520px) { .agenda-venster-kop { border-radius: 0; padding: 14px 16px; } .agenda-venster-kop h2 { font-size: 19px; } }
/* Opvolgtraining met een zwak onderwerp achter het gemiddelde */
.r-tabel-rij small.r-letop { color: #9E6A12; font-weight: 700; }
.r-tabel-rij small.r-samen { color: var(--petrol); font-weight: 700; }
.vormen.functies { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .vormen.functies { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .vormen.functies { grid-template-columns: 1fr; } }
/* Begeleide bureau-analyse: keuze om het persoonlijke rapport met TalentCraft te delen (niet in de pdf) */
.r-deel-tc { border-style: solid; border-color: var(--oker); }
.r-deel-tc .link-veld { margin-top: 12px; }
.r-deel-melding { margin-top: 8px; color: #9E6A12; font-weight: 700; }
@media print { .r-deel-tc { display: none !important; } }

/* Eigen afsluiting na de introductievideo (in plaats van het eindscherm van Vimeo) */
.video-einde { height: 100%; overflow: auto; border-radius: 8px; background: var(--navy); color: var(--wit); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 24px; }
.video-einde h2 { color: var(--wit); font-size: clamp(22px, 3.4vw, 34px); text-wrap: balance; }
.video-einde p { color: #C9D6DE; max-width: 52ch; font-size: 16px; }
.video-einde-knoppen { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.video-einde .knop.secundair { color: var(--wit); border-color: rgba(255,255,255,.6); }
.video-opnieuw { background: none; border: 0; color: #C9D6DE; font: 14px var(--sans); cursor: pointer; text-decoration: underline; margin-top: 4px; }
@media (max-width: 520px) { .video-einde { gap: 8px; padding: 14px; } .video-einde p { font-size: 14px; } .video-einde .knop { padding: 10px 14px; font-size: 14px; } }