/*
Theme Name: me.scan
Theme URI: https://me-scan.nl
Author: me.scan company
Description: Custom thema voor me.scan – gelaagd inzichtplatform. Bevat het spoor-mechanisme (persoonlijk/zakelijk), de me.scan-huisstijl en templates voor doelgroeppagina's, kennis, coaches en aanbod.
Version: 0.13.16
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: Proprietary
Text Domain: mescan
*/

/* ============================================================
   Dit bestand is het sluitstuk, niet het fundament.

   De huisstijl staat in assets/css/01-tokens.css tot 07-secties.css,
   samengevoegd uit de 53 referentiepagina's en daarmee de enige bron voor
   kleuren, ritme, componenten en het spoor-mechanisme. Die lagen worden
   vóór dit bestand ingeladen.

   Hieronder staat alleen wat WordPress zelf meebrengt en wat in de
   referentiesite dus niet voorkomt: de blokeditor-uitvoer, de
   uitlijningsklassen en de toegankelijkheidshulpmiddelen.

   Voeg hier niets toe dat in een van de zeven lagen thuishoort. Wat hier
   staat, overschrijft de huisstijl – en dat is bijna nooit de bedoeling.
   ============================================================ */

/* ------------------------------------------------------------
   Inhoud uit de blokeditor
   ------------------------------------------------------------ */
.entry-content {
  max-width: 760px;
}
.entry-content h2 {
  font-size: 26px;
  font-weight: 600;
  margin: 34px 0 12px;
}
.entry-content p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.entry-content ul,
.entry-content ol {
  margin: 0 0 16px 20px;
}
.entry-content li {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 8px;
}
.entry-content blockquote {
  border-left: 3px solid var(--orange);
  padding: 6px 0 6px 22px;
  margin: 30px 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
}
.entry-content img {
  border-radius: var(--tk-radius);
  margin: 20px 0;
}

/* Paginering binnen één bericht (wp_link_pages). */
.page-links {
  margin-top: 28px;
  font-size: 14px;
  color: var(--ink-soft);
}
.page-links a {
  color: var(--tk-accent);
  text-decoration: none;
  margin: 0 4px;
}

/* ------------------------------------------------------------
   Uitlijning en hulpklassen
   ------------------------------------------------------------ */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.alignwide {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.alignfull {
  max-width: none;
}

/* Het tekstlogo in nav en footer; de referentiesite gebruikt daar een
   afbeelding, dit is de terugval als er geen logo is ingesteld. */
.logo .sub {
  font-weight: 400;
  opacity: .55;
}

/* De oranje dot achter een kop. In de referentiesite is dat een <span class="dot">,
   maar losse spans overleven het bewerken in de blokeditor niet – die worden bij
   het opslaan weggepoetst. Als class op de kop zelf blijft hij wel staan. */
.met-dot::after {
  content: "";
  display: inline-block;
  width: .44em;
  height: .44em;
  margin-left: .12em;
  background: var(--orange);
  border-radius: 50%;
  vertical-align: baseline;
}

/* ------------------------------------------------------------
   Toegankelijkheid
   ------------------------------------------------------------ */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: 14px 22px;
  top: 8px;
  left: 8px;
  z-index: 1000;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--tk-radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
}

/* Het kennisartikel. In de referentiesite staat dit als inline stijl op de
   elementen; hier als regels, zodat de template schoon blijft en een vertaling
   of aanpassing niet door de opmaak hoeft. */
.single-post .wrap {
  max-width: 800px;
}
.terug {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--orange-deep);
  text-decoration: none;
}
.terug:hover {
  text-decoration: underline;
}
.single-post .eyebrow {
  display: block;
  margin-top: 24px;
}
.single-post h1 {
  font-size: 40px;
  line-height: 1.12;
  margin: 10px 0 18px;
}
.single-post .lead {
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 10px;
}
.single-post .img-wrap {
  margin: 24px 0 8px;
}

/* Zichtbare focus voor wie met het toetsenbord navigeert. De referentiesite
   heeft dit nergens; zonder deze regel is de site met Tab onbruikbaar omdat je
   niet ziet waar je bent. :focus-visible toont hem alleen bij toetsenbord- en
   niet bij muisgebruik, dus het ontwerp blijft rustig.

   De ring was eerst oranje. Dat haalde tegen de crème achtergrond 2,53:1,
   terwijl een focusmarkering 3:1 nodig heeft, en op de oranje knoppen viel hij
   helemaal weg. Nu: een donkere ring met een lichte halo eromheen. Die
   combinatie blijft zichtbaar op crème, op wit, op de oranje knop en op een
   foto; op de donkere banden en in de voettekst draaien de twee om. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .92);
}
.btn:focus-visible,
.coach-card:focus-visible,
.kennis-card:focus-visible {
  outline-offset: 4px;
}
.band-dark :focus-visible,
.band-accent :focus-visible,
.track-switch :focus-visible,
footer :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, .6);
}

/* Bezoekers die beweging hebben uitgezet, krijgen geen reveal-animatie.
   .reveal staat 749 keer in de referentiesite; zonder dit blok is de hele
   site voor hen onrustig. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Het coach-portaal. De opmaak van de blokken komt uit de referentiesite;
   dit zijn de onderdelen die daar als nagebouwd scherm stonden en nu werken. */
.pp-fout {
  background: var(--orange-tint);
  border-left: 3px solid var(--orange);
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 18px;
}
.pp-blok .login-username,
.pp-blok .login-password {
  margin-bottom: 14px;
}
.pp-blok .login-username label,
.pp-blok .login-password label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.pp-blok input[type="text"],
.pp-blok input[type="password"] {
  width: 100%;
  max-width: 360px;
  padding: 12px 14px;
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius);
  font-family: var(--body);
  font-size: 15px;
}
.pp-blok .login-submit input {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--tk-accent);
  color: #fff;
  cursor: pointer;
}
.pp-blok .login-remember {
  font-size: 14px;
  margin-bottom: 14px;
}

.nav-uitlog {
  opacity: .7;
}

/* ------------------------------------------------------------
   Het slotblok losmaken van de footer
   ------------------------------------------------------------
   In de referentiesite hebben .cta en de footer allebei var(--ink) als
   achtergrond en staan ze direct tegen elkaar. Daardoor lopen ze in elkaar
   over en is niet te zien waar de pagina eindigt.

   Oplossing in de taal van het ontwerp zelf: het slotblok wordt een afgerond
   blok dat op de pagina ligt, met de achtergrond eromheen zichtbaar. De footer
   blijft de enige doorlopende zwarte band, en dus het duidelijke einde.
   De hoekrondte volgt het spoor mee, net als bij de kaarten. */
.cta {
  max-width: 1200px;
  margin: 0 auto var(--ruimte-l);
  border-radius: var(--tk-radius-lg);
  padding: 84px 0;
  overflow: hidden;
}

@media (max-width: 900px) {
  .cta {
    margin-left: 20px;
    margin-right: 20px;
    padding: 60px 0;
  }
}

/* De footer krijgt een iets steviger bovenrand, zodat de overgang ook
   zichtbaar is als er géén slotblok boven staat. */
footer {
  border-top: 2px solid var(--line-dk);
}

/* Zoekveld in de navigatie. De referentiesite heeft er geen; deze volgt de
   vormtaal van de spoorwisselaar ernaast. */
.nav-zoek {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--tk-line);
  border-radius: 999px;
  background: var(--tk-surface);
}
.nav-zoek input[type="search"] {
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--body);
  font-size: 13.5px;
  width: 110px;
  padding: 4px 0;
  color: var(--ink);
}
.nav-zoek button {
  border: 0;
  background: transparent;
  color: var(--tk-accent);
  cursor: pointer;
  display: flex;
  padding: 4px;
}
.nav-zoek:focus-within {
  border-color: var(--tk-accent);
}

@media (max-width: 900px) {
  .nav-zoek {
    margin: 10px 0 0;
    width: 100%;
  }
  .nav-zoek input[type="search"] {
    width: 100%;
  }
}

/* ============================================================
   Typografisch ritme
   ============================================================
   De referentiesite zet de ruimte tussen koppen en tekst per element in een
   inline stijl: 42 van de 53 pagina's doen dat, met ruim duizend losse
   waarden – 55x 8px, 25x 14px, 23x 20px, 22x 16px. Die waarden overleven de
   blokeditor niet (Gutenberg kent geen style-attribuut op een kop of alinea
   en gooit het bij het opslaan weg), en ze zijn onderling ook niet consistent.

   Daarom hier één regel in plaats van duizend uitzonderingen. De maten zijn
   relatief aan de tekstgrootte, zodat een kop van 48px meer lucht krijgt dan
   een van 18px – typografisch juist, en het scheelt handwerk per blok.

   Componenten die hun eigen ruimte regelen (.sec-head, .phero p.lead, kaarten)
   winnen op specificiteit en blijven dus staan zoals ze waren.
   ============================================================ */

main :is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: .45em;
}

main p,
main ul,
main ol {
  margin-bottom: 1em;
}

/* Een kop die op een alinea volgt heeft lucht erboven nodig, anders kleeft
   hij aan de vorige gedachte vast. */
main :is(p, ul, ol, figure, .img-wrap) + :is(h2, h3, h4) {
  margin-top: 1.6em;
}

/* Geen loze ruimte onderaan een blok of kaart. */
main :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {
  margin-bottom: 0;
}

/* De eyebrow staat als label boven de kop en heeft minder nodig. */
main .eyebrow {
  margin-bottom: .9em;
}

/* De nieuwsbrief in de footer: compact en op de donkere achtergrond leesbaar. */
.f-nieuwsbrief {
  border-top: 1px solid var(--line-dk);
  margin-top: 36px;
  padding-top: 28px;
  max-width: 1200px;
}
.f-nieuwsbrief p {
  color: rgba(255, 255, 255, .55);
  font-size: 14px;
  margin: 6px 0 14px;
}
.f-nieuwsbrief .fluentform .ff-el-form-control {
  background: rgba(255, 255, 255, .08);
  border-color: var(--line-dk);
  color: #fff;
  max-width: 320px;
}
.f-nieuwsbrief .fluentform .ff_t_c,
.f-nieuwsbrief .fluentform .ff-el-tc {
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
}
.f-nieuwsbrief .fluentform a {
  color: rgba(255, 255, 255, .8);
}

/* De cookiebanner. Verschijnt alleen als er een script is geregistreerd dat
   toestemming vereist – vandaag is dat er niet, dus dit ligt klaar.
   Weigeren en accepteren zijn bewust even prominent. */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 3000;
  background: var(--tk-surface);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius-lg);
  box-shadow: 0 12px 44px rgba(0, 0, 0, .16);
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 26px;
}
.cookie-banner h2 {
  font-size: 20px;
}
.cookie-banner p {
  font-size: 14.5px;
  color: var(--ink-soft);
}
.cookie-keuzes {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  font-size: 14px;
}
.cookie-keuzes label {
  display: flex;
  gap: 9px;
  align-items: baseline;
}
.cookie-knoppen {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.cookie-knoppen .btn {
  font-size: 14px;
  padding: 11px 22px;
}
.cookie-zelf {
  background: none;
  border: 0;
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}

/* ============================================================
   Kaarten naast elkaar strak uitlijnen
   ============================================================
   Kaarten in een rij waren wel gelijk van hoogte (het raster rekt ze op),
   maar binnenin zakte alles onder de kenmerkenlijst per kaart op eigen
   hoogte, omdat die lijsten verschillend lang zijn. Bij de zakelijke
   abonnementen stond de knop daardoor per kaart ergens anders.

   De kaart wordt een kolom: de vaste regels bovenin (eyebrow, naam, prijs,
   jaarbedrag) zijn elk één regel hoog en lijnen daardoor vanzelf over de
   kaarten heen; de lijst neemt de variabele ruimte, en alles wat er als
   afsluiter onder hoort – knop, prijsregel, "lees verder" – ligt tegen de
   onderkant. Zo lijnen de boven- én onderkant strak, in elke rij.
   ============================================================ */

.cards2 > .card,
.cards3 > .card,
.cards4 > .card {
  display: flex;
  flex-direction: column;
}

/* De afsluiters: tegen de onderkant van de kaart. */
.card > .cta-btns,
.card > .wp-block-buttons,
.card > .ovl-prijs,
.card > .cgo:last-child,
.card > p:last-child:has(> .btn) {
  margin-top: auto;
  padding-top: 14px;
}

/* Coach- en kenniskaarten: hetzelfde principe, eigen structuur. */
.coach-card .cbody {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.coach-card {
  display: flex;
  flex-direction: column;
}
.coach-card .cgo {
  margin-top: auto;
  padding-top: 14px;
}
.kennis-card {
  display: flex;
  flex-direction: column;
}
.kennis-card .kc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.kennis-card .kc-meta {
  margin-top: auto;
  padding-top: 10px;
}

/* ============================================================
   WP-custom-logo – het geüploade logo kreeg geen themastijl en
   rende op mobiel paginabreed, met de standaard link-onderstreping
   als donkere streep eronder. Zelfde maat als het tekstlogo.
   ============================================================ */
.custom-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  border: none;
}
.custom-logo {
  height: 26px;
  width: auto;
  border: none;
  box-shadow: none;
}
@media (max-width: 1400px) {
  .custom-logo { height: 24px; }
}

/* ============================================================
   Voorbeeldrapport-links en de nieuwsbriefband boven de footer
   ============================================================ */
.pp-vb {
  font-size: 11px;
  font-weight: 700;
  color: var(--orange-deep);
  text-decoration: none;
  margin-left: 6px;
  white-space: nowrap;
}
.pp-vb:hover { text-decoration: underline; }

.nieuwsbrief-band .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: center;
}
.nieuwsbrief-band h2 { font-size: 30px; margin-top: 8px; }
.nieuwsbrief-band p { color: var(--ink-soft); margin-top: 8px; }
@media (max-width: 820px) {
  .nieuwsbrief-band .wrap { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   Hulpbalk – zoeken, uitloggen en taal/regio boven de navigatie.
   Deze knoppen vielen op smalle schermen uit de navigatiebalk;
   hier hebben ze altijd ruimte, op elke breedte.
   ============================================================ */
.hulpbalk {
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.hulpbalk .wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  min-height: 36px;
}
.hulpbalk .nav-zoek { margin: 0; }
.hb-uitlog {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 700;
}
.hb-uitlog:hover { color: var(--orange-deep); }
/* Kennis, Over ons en Inloggen/Mijn portaal (18-10-2026). Op een breed scherm
   in de hulpbalk, op een smal scherm en bij een krappe navigatie in het menu
   met drie streepjes. */
.hb-link {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 700;
}
.hb-link:hover { color: var(--orange-deep); }
.nav-links .nav-naar-boven { display: none; }
/* De accountknop: dezelfde opmaak als de andere hulpbalklinks, het paneel
   klapt rechts uitgelijnd open en ligt boven de sticky navigatie (z 100). */
.hb-account .nav-knop { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); padding: 0; }
.hb-account .nav-knop:hover, .hb-account .nav-knop[aria-expanded="true"] { color: var(--orange-deep); }
.hb-account .nav-paneel { left: auto; right: -10px; top: calc(100% + 8px); z-index: 120; min-width: 180px; }
/* De navigatie is boven ~1270px nooit breder dan 1200px (max-width van
   .wrap). Grotere letters en ruimte op een breder scherm gaven dus alleen
   meer tekort: de zakelijke balk liep op 1920px 120px over. Daarom vanaf
   1241px overal dezelfde maten als op 1440px, waar alles past, in beide
   sporen. Zo verspringt de balk ook niet bij het wisselen van spoor.
   De uitklapknoppen volgen dezelfde lettergrootte als de links (--nav-fs);
   ze stonden eerst vast op 14px en waren daardoor groter dan de rest.
   Prijzen (nav-cta) heeft een eigen maat. */
.nav-links { --nav-fs: 12.5px; }
@media (min-width: 1241px) {
  .nav-links { gap: 10px; }
  .track-switch a { font-size: 11.5px; padding: 5px 11px; }
  .nav-cta { padding: 9px 16px !important; font-size: 13px !important; }
}
@media (max-width: 1240px) { .nav-links { --nav-fs: 14.5px; } }
:where(.nav-krap) .nav-links { --nav-fs: 14.5px; }
.nav-links > a:not(.nav-cta):not(.nav-inlog), .nav-links .nav-knop { font-size: var(--nav-fs); }
@media (max-width: 1240px) {
  .hb-link, .hulpbalk .hb-account { display: none; }
  .nav-links .nav-naar-boven { display: block; }
  .nav-links a.nav-inlog.nav-naar-boven { display: inline-flex; }
}

.taalregio { position: relative; }
.taalregio summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--ink-soft);
}
.taalregio summary::-webkit-details-marker { display: none; }
.taalregio summary:hover { color: var(--orange-deep); }
.taalregio .tr-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px -22px rgba(40, 30, 20, .35);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  white-space: nowrap;
  z-index: 130;
}
.tr-actief { font-weight: 700; }
.tr-later { color: var(--ink-faint); }
@media (max-width: 560px) {
  .hulpbalk .wrap { gap: 12px; }
  .hulpbalk .nav-zoek input[type="search"] { width: 110px; }
}

/* ------------------------------------------------------------
   Gutenberg-knoppen
   ------------------------------------------------------------
   De import zet onze knopklassen (.btn, .btn-primary, .btn-ghost,
   .btn-ghost-light) op de wikkel <div class="wp-block-button">, terwijl
   WordPress zijn eigen knopopmaak op de <a class="wp-block-button__link">
   daarbinnen zet: background-color #32373c en witte tekst. Het resultaat was
   een donkere kernknop binnen onze eigen pil, op 141 knoppen door de hele
   site. Hier maken we de wikkel doorzichtig en verhuizen we de opmaak naar de
   link, zodat een blokknop er precies zo uitziet als een handgeschreven
   <a class="btn">. De regels voor .plan-kaarten in 10-paginas.css doen dit al
   voor de prijstabel en zijn specifieker, dus die blijven voorgaan.
   ------------------------------------------------------------ */
.wp-block-button.btn {
  display: inline-flex;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.wp-block-button.btn > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  padding: 15px 28px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  background: none;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
}
.wp-block-button.btn-primary > .wp-block-button__link {
  background: var(--orange);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(244, 126, 32, .3);
}
.wp-block-button.btn-primary > .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(244, 126, 32, .42);
}
.wp-block-button.btn-ghost > .wp-block-button__link {
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.wp-block-button.btn-ghost > .wp-block-button__link:hover {
  border-color: var(--orange);
  color: var(--orange-deep);
  transform: translateY(-2px);
}
.wp-block-button.btn-ghost-light > .wp-block-button__link {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .32);
}
.wp-block-button.btn-ghost-light > .wp-block-button__link:hover {
  border-color: #fff;
}

/* ------------------------------------------------------------
   De profielring op de uitlegpagina
   ------------------------------------------------------------
   De visual komt uit het me.lead-pakket en staat als vaste SVG in
   assets/visuals/. De opmaak staat hier en niet als inline stijl in de
   referentie: omzetten.py haalt marges uit inline stijlen weg (die regelt het
   typografisch ritme), waardoor een margin:auto zou sneuvelen en de ring links
   zou uitlijnen.
   ------------------------------------------------------------ */
.profielring {
  margin: 38px auto 0;
  max-width: 620px;
  text-align: center;
}
.profielring img {
  width: 100%;
  height: auto;
}
.profielring figcaption {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-top: 14px;
  max-width: 460px;
  margin-inline: auto;
}

/* ------------------------------------------------------------
   De afsluitende alinea onder "Online met Aime, of live met een coach"
   ------------------------------------------------------------
   Dit is de conclusie onder de twee keuzekaarten, op elf pagina's. In de
   referentie stond de opmaak als inline stijl, maar omzetten.py haalt marges
   daaruit weg (die regelt het typografisch ritme). Daardoor viel de afstand
   tot de kaarten helemaal weg en plakte de alinea tegen het raster, in een
   kleinere letter dan de rest. Nu als class, met lucht erboven, broodtekst-
   grootte en een oranje streep die hem als conclusie markeert.
   ------------------------------------------------------------ */
.ovl-samen {
  margin: var(--ruimte-xs) 0 0;
  max-width: 820px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
  background: var(--tk-accent-soft, var(--orange-tint));
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--tk-radius, 16px) var(--tk-radius, 16px) 0;
  padding: 20px 24px;
}
.ovl-samen b {
  color: var(--ink);
}
@media (max-width: 680px) {
  .ovl-samen {
    font-size: 15.5px;
    padding: 18px 20px;
  }
}

/* ------------------------------------------------------------
   Knoppen binnen de prijskaarten en de aanbodkaarten
   ------------------------------------------------------------
   Die knoppen zijn bewust compacter en vullen de kaartbreedte; dat staat in
   10-paginas.css. Ik ging er bij de blokknoppen hierboven van uit dat die
   regels specifieker waren, maar ze zijn even specifiek (drie klassen) en
   verliezen daardoor van de later geladen style.css. Gevolg: de knoptekst werd
   15px in plaats van 13,5px met bredere padding, waardoor "Offerte voor
   Insight" over twee regels brak en de linkerkaart niet meer uitlijnde met de
   andere drie. Hier opnieuw, met een klasse extra zodat ze wel voorgaan.

   De oranje knop krijgt hier dezelfde donkere tekst als elders: wit op oranje
   haalt 2,67:1 en dat is te weinig.
   ------------------------------------------------------------ */
.plan-kaarten .wp-block-button.btn > .wp-block-button__link {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 6px;
  font-size: 13.5px;
  padding: 12px 16px;
  border: 1.5px solid transparent;
  box-shadow: none;
}
.plan-kaarten .wp-block-button.btn-ghost > .wp-block-button__link {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}
.plan-kaarten .kaart-donker .wp-block-button.btn-ghost > .wp-block-button__link,
.plan-kaarten .wp-block-button.btn-primary > .wp-block-button__link {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--orange);
  box-shadow: 0 8px 24px rgba(244, 126, 32, .3);
}
.aanbod-card .wp-block-button.btn > .wp-block-button__link {
  font-size: 13.5px;
  padding: 12px 14px;
}

/* ------------------------------------------------------------
   De as onder de twee lagen op /wat-is-de-mescan/
   ------------------------------------------------------------
   Stond als twee kleine labels in de hoeken, met een pijltje van 11px dat je
   nauwelijks zag. Het is de belangrijkste leeshulp van dat blok: links wat je
   van nature kunt, rechts wat je ermee doet. Nu als doorlopende dubbele pijl
   over de volle breedte, met leesbare labels aan weerszijden.
   ------------------------------------------------------------ */
.tl-assen {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--tk-line, var(--line));
}
.tl-assen .tl-as-tekst {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.tl-assen .tl-as-pijl {
  flex: 1;
  position: relative;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
}
/* de twee punten, als driehoekjes op de uiteinden van de lijn */
.tl-assen .tl-as-pijl::before,
.tl-assen .tl-as-pijl::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateY(-50%);
}
.tl-assen .tl-as-pijl::before {
  left: 0;
  border-right: 8px solid var(--orange);
}
.tl-assen .tl-as-pijl::after {
  right: 0;
  border-left: 8px solid var(--orange);
}
@media (max-width: 620px) {
  .tl-assen {
    flex-wrap: wrap;
    gap: 8px;
  }
  .tl-assen .tl-as-tekst {
    white-space: normal;
    font-size: 12.5px;
  }
  .tl-assen .tl-as-pijl {
    flex-basis: 100%;
    order: 3;
  }
}

/* ------------------------------------------------------------
   Partnerroute
   ------------------------------------------------------------
   Coaches en consultants stonden bij de organisaties, maar zij kopen anders:
   niet een abonnement per medewerker, maar credits en partnertarieven voor hun
   eigen klanten. Ze hebben daarom een eigen route gekregen: een band onder de
   drie overgebleven situatiekaarten. De regel in de doelgroepkiezer is met die
   kiezer verdwenen (10 oktober 2026).
   ------------------------------------------------------------ */
.partner-wijzer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 26px 30px;
  background: var(--tk-accent-soft, var(--orange-tint));
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--tk-radius, 16px) var(--tk-radius, 16px) 0;
}
.partner-wijzer > div {
  flex: 1 1 380px;
}
.partner-wijzer h3 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  margin: 6px 0 8px;
}
.partner-wijzer p {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.7;
  margin: 0;
  max-width: 560px;
}
.partner-wijzer .btn {
  flex: none;
}
@media (max-width: 680px) {
  .partner-wijzer {
    padding: 22px 22px;
  }
  .partner-wijzer .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Drie situatiekaarten in plaats van vier, sinds coaches naar de partnerroute
   zijn verhuisd. Het raster stond op twee kolommen; dan valt de derde kaart
   alleen op een tweede rij. */
.choose-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) {
  .choose-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  .choose-grid {
    grid-template-columns: 1fr;
  }
}

/* De tweede functietabel (Recruitment & Assessment) krijgt lucht en een eigen kop. */
.ft-heading--tweede {
  margin-top: var(--ruimte-s);
}
/* Cellen waarvan de waarde nog bepaald moet worden. Zichtbaar, niet verstopt:
   een leeg vakje leest als "niet inbegrepen" en dat is iets anders. */
.ft-table .ft-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px dashed var(--orange);
  color: var(--orange-deep);
  font-size: 12px;
  font-weight: 800;
}

/* ------------------------------------------------------------
   De functietabel
   ------------------------------------------------------------
   Stond in 12-offerte.css, die alleen op de offertepagina laadt. Sinds de tabel
   uit één bron komt (inc/functietabel.php) en ook op /prijzen/ staat, moet de
   opmaak overal beschikbaar zijn. Verhuisd, niet gekopieerd: in 12-offerte.css
   staan deze regels niet meer.

   De kolombreedte hangt af van het aantal plannen: drie voor de kernplannen,
   één voor het sectorplan Recruitment & Assessment.
   ------------------------------------------------------------ */
.ft-wrap{margin-top:36px}
.ft-wrap .ft-heading{font-family:var(--display);font-size:18px;font-weight:700;color:var(--ink);margin-bottom:4px}
.ft-wrap .ft-sub{font-size:12.5px;color:var(--ink-soft);margin-bottom:16px;line-height:1.5}
.ft-scroll{overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:var(--white)}
.ft-table{width:100%;min-width:640px;border-collapse:collapse}
.ft-table th{background:var(--orange);color:#fff;text-align:left;font-size:12.5px;font-weight:700;padding:13px 20px;white-space:nowrap}
.ft-table th:not(:first-child),.ft-table td:not(:first-child){text-align:center}
.ft-table td{padding:11px 20px;font-size:13px;color:var(--ink-soft);border-top:1px solid var(--line)}
.ft-table td:first-child{text-align:left;color:var(--ink)}
.ft-table tr.ft-group td{background:var(--cream-2);font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);padding:9px 20px}
.ft-table tr.ft-strong td{font-weight:700;color:var(--ink);background:var(--cream)}
.ft-check{color:var(--orange);font-weight:800;font-size:14px}
.ft-dash{color:var(--ink-faint)}
.ft-tbd{color:var(--orange-deep);font-weight:800}
.ft-table--3plan{table-layout:fixed}
.ft-table--3plan .ft-col-functie{width:37%}
.ft-table--3plan .ft-col-plan{width:21%}
.ft-table td.ft-banner{text-align:center;background:var(--cream-2);color:var(--ink-soft);font-style:italic;font-size:12.5px}
.ft-level{display:inline-flex;gap:3px;justify-content:center;align-items:center}
.ft-level i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--line)}
.ft-level i.on{background:var(--orange)}
.ft-table th.gekozen,.ft-table td.gekozen{background:var(--orange-tint)}
.ft-table th.gekozen{background:var(--orange-deep)}

.ft-table--1plan{table-layout:fixed}
.ft-table--1plan .ft-col-functie{width:62%}
.ft-table--1plan .ft-col-plan{width:38%}
.ft-table--1plan{min-width:420px}

/* === KANDIDAATPAKKETTEN (werving en selectie, 30-09-2026) ===
   Recruiters kopen een pakket kandidaten en rekenen dat op de site af.
   De kaarten zijn bewust smal en gelijk van hoogte: ze verschillen alleen
   in aantal en bedrag, dus alles wat ze verder gelijk maakt helpt vergelijken.
   Markup: inc/recruitment.php. */
.pkt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 0}
.pkt-grid--vier{grid-template-columns:repeat(4,1fr)}
.pkt-naam{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:10px}
.pkt-grid--twee{grid-template-columns:repeat(2,1fr);margin-top:18px}
.pkt{display:flex;flex-direction:column;padding:24px 22px;text-align:left}
.pkt .eyebrow{font-size:10.5px;margin:0 0 10px}
.pkt-aantal{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.pkt-aantal span{display:block;font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink-soft);margin-top:6px}
.pkt-prijs{font-size:22px;font-weight:700;color:var(--ink);margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pkt-prijs span{display:block;font-size:12.5px;font-weight:500;color:var(--ink-faint);margin-top:4px}
.pkt-per{font-size:13px;color:var(--ink-soft);margin-top:6px}
.pkt-knop{margin-top:auto;padding-top:18px}
.pkt-knop .btn{width:100%;justify-content:center;font-size:14px;padding:13px 18px}
.pkt-maatwerk{background:var(--orange-tint);border-color:var(--orange-soft)}
.pkt-maatwerk .pkt-prijs{border-top-color:var(--orange-soft)}
.pkt-breed h3{font-size:18px;margin:0 0 6px;font-weight:600}
.pkt-breed p{font-size:13.5px;color:var(--ink-soft);margin:0}
.pkt-breed .pkt-prijs{margin-top:14px}
.pkt-bij{font-size:13px;color:var(--ink-soft);margin-top:14px}
@media (max-width:1100px){
  .pkt-grid--vier{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .pkt-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .pkt-grid,.pkt-grid--twee{grid-template-columns:1fr}
}
.pkt-inbegrepen{background:var(--cream-2);border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin-top:8px}
.pkt-inbegrepen-kop{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 10px}
.pkt-inbegrepen ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 26px}
.pkt-inbegrepen li{font-size:13.5px;color:var(--ink-2);position:relative;padding-left:16px;margin:0;line-height:1.5}
.pkt-inbegrepen li::before{content:"";position:absolute;left:0;top:.45em;width:.44em;height:.44em;border-radius:50%;background:var(--orange)}
.pkt-tussenkop{margin:46px 0 0;max-width:620px}
.pkt-tussenkop h3{font-size:24px;font-weight:600;margin:0}
.pkt-tussenkop p{margin-top:10px}
@media (max-width:640px){
  .pkt-inbegrepen ul{grid-template-columns:1fr}
}

/* === TAALKEUZE (02-10-2026) ===
   De kiezer zit in de hulpbalk, op de plek die daar in het ontwerp al voor was.
   Een tweede schakelaar in de navigatie is vervallen: die duwde het menu in het
   Engels over de breedte heen. Markup: inc/taalwissel.php.

   WPML brengt zijn eigen schakelaar mee. Die hoort uit te staan in
   WPML -> Talen -> Opties taalwisselaar; deze regel is het vangnet, zodat een
   vergeten vinkje de pagina niet alsnog scheeftrekt. */
.wpml-ls-statics-footer,
.wpml-ls-statics-shortcode_actions,
.wpml-ls-sidebars-sidebar { display: none !important; }
.tr-keuze { color: var(--ink-2); text-decoration: none; }
.tr-keuze:hover { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px; }

/* === NAVIGATIE: ruimte voor langere talen (02-10-2026) ===
   Het Engelse menu is breder dan het Nederlandse; bij 1280px liep het buiten
   het venster en schoof de hele pagina opzij. Tussen de mobiele grens (1240px)
   en 1460px mag het menu daarom strakker staan. */
@media (min-width:1241px) and (max-width:1460px){
  .nav-links{gap:10px}
  .nav-links a{font-size:12.5px}
  .nav-cta{padding:8px 13px !important;font-size:12.5px !important}
  .hulpbalk .nav-zoek input[type="search"]{width:120px}
}

/* === NOOT ONDER EEN SECTIE (07-10-2026) ===
   De regel met de afbakening onder een opbrengstblok. Als named class en niet
   als inline stijl. De ms-klassen heten sinds 09-10-2026 naar hun inhoud
   en verschuiven niet meer, maar een eigen klasse blijft leesbaarder
   in 11-inline.css en dan moet de hele site in één keer mee. */
.sec-noot{margin-top:22px;font-size:14px;color:var(--ink-soft);max-width:62ch}
.sec-noot a{color:var(--orange-deep);font-weight:600}

/* Echte schermafbeeldingen uit het dashboard krijgen hetzelfde kader als de
   nagebouwde panelen (.cd-frame), zodat voorbeeld en product er hetzelfde
   uitzien. Gutenberg maakt er een figure van en gooit een eigen class op het
   beeld weg, dus sturen we vanaf het kader. Geen foto-band: die snijdt met
   object-fit en dan valt de helft van een tabel buiten beeld. */
.cd-frame figure{margin:0}
.cd-frame img{display:block;width:100%;height:auto}

/* Een zijpad, geen hoofdactie. Een knop trekt evenveel aandacht als de ene
   actie die op een pagina telt; dit leest als een link en gedraagt zich zo. */
.pijl-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;
  color:var(--orange-deep);text-decoration:none;border-bottom:1px solid transparent}
.pijl-link:hover{border-bottom-color:currentColor}

/* Het wandbord en het we.scan-bord zijn staand geschoten. Ze zijn al naar 16:9
   gesneden rond precies de strook die de band moet tonen, dus hier het midden
   in plaats van de 22% die de andere banden gebruiken: met 22% schuift de
   uitsnede omhoog en verdwijnt het bord uit beeld.
   Deze regel staat hier en niet in 07-secties.css, want dat bestand wordt door
   tools/css_bouw.py opnieuw gegenereerd uit de bronpagina's. */
.foto-band img[src*="bord-wand"],
.foto-band img[src*="wescan-bord"],
.foto-band img[src*="bord-wijzen"],
.foto-band img[src*="gesprek-bord-tafel"],
.foto-band img[src*="overleg-bord"],
.foto-band img[src*="presentatie-groep"],
.foto-band img[src*="gesprek-tweetal"],
.foto-band img[src*="bord-wand-coach"],
.foto-band img[src*="blokjes-vloer"],
.foto-band img[src*="coachgesprek-licht"],
.foto-band img[src*="gesprek-kaarten"]{object-position:50% 50%}

/* De coach staat rechtop achter een lage tafel: boven in beeld haar gezicht,
   onderin het bord. In een band van 3,4 : 1 past maar een van de twee. Het
   bord wint, en daarmee is de foto meteen anoniem. */
.foto-band img[src*="coach-aan-het-werk"]{object-position:50% 100%}

/* Nieuwe coachfoto's (22 oktober). Bij deze vier staat het gezicht hoog in
   beeld; de standaardsnede van 22 procent gaat er dwars doorheen. En
   gesprek-kaarten-lachend moet juist wél omhoog: hij valt onder de regel
   hierboven voor "gesprek-kaarten", en op 50 procent zie je een achterhoofd. */
.foto-band img[src*="coach-bord-uitleg"],
.foto-band img[src*="coach-bord-werkplek"],
.foto-band img[src*="coachgesprek-thuis-bord"],
.foto-band img[src*="coach-bord-samen"]{object-position:50% 10%}
.foto-band img[src*="gesprek-kaarten-lachend"]{object-position:50% 22%}

/* Een kaart uit het rapport staat zelf al in de huisstijl: witte kaart, eigen
   schaduw, doorzichtige rand. Daar hoort geen tweede kader omheen, anders is
   het een kaart in een lijst in een kaart. Alleen ruimte en een maximum, zodat
   hij op een breed scherm niet uitvergroot wordt tot hij korrelig oogt. */
.rap-kaart{margin:18px 0 0;max-width:720px}
.rap-kaart img{display:block;width:100%;height:auto}
.rap-kaart + .sec-noot{margin-top:12px}

/* De aanklikbare poster van een video. Zelfde maat en ronding als de speler
   die erna in de plaats komt, zodat de pagina niet verspringt bij het klikken. */
.vid-start{display:block;position:relative;width:100%;padding:0;border:0;
  aspect-ratio:16/9;border-radius:var(--tk-radius,20px);overflow:hidden;
  background:#2A2825;cursor:pointer;transition:transform .25s,box-shadow .25s}
.vid-start img{display:block;width:100%;height:100%;object-fit:cover}
.vid-start:hover{transform:translateY(-3px);box-shadow:0 28px 60px -36px rgba(40,30,20,.55)}
.vid-start:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.vid-knop{position:absolute;inset:0;margin:auto;width:76px;height:76px;
  border-radius:50%;background:var(--orange);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.vid-knop::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent #fff;
  transform:translateX(4px)}
.vid-speler{position:relative;aspect-ratio:16/9;border-radius:var(--tk-radius,20px);
  overflow:hidden;background:#2A2825}
.vid-speler iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* De eyebrow staat in orange-deep. Dat haalt 4,62 tot 4,94 op crème, wit en de
   zakelijke grond, maar op de tweede grond (cream-2 en de spoorvarianten) blijft
   het op 4,23 tot 4,45 steken: onder de 4,5 die huisstijl 00 §3 vraagt. Daarom
   zegt §4 ook "eyebrow alleen op crème of wit". Op een band in de tweede grond
   wordt hij ink-soft, dat daar 6,65 tot 6,97 haalt (13 oktober 2026). */
.band-cream .eyebrow,
section.sec.band-cream .eyebrow{color:var(--ink-soft)}

/* Pay-off onder het woordmerk in de voettekst. Kleine letters, zoals het
   brandbook voorschrijft, en ook in Nederlandse uitingen in het Engels. */
.fpayoff{margin:6px 0 0;font-size:13.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.72)}

/* ------------------------------------------------------------
   Uitklapmenu in de navigatie (14 oktober 2026)

   De onderwerp- en vraagstukpagina's stonden nergens in de balk; je kwam er
   alleen via een tussenpagina. Ze staan nu in een paneel onder hun groep.
   De groepsknop is een <button>: hij opent iets, hij gaat nergens heen.
   ------------------------------------------------------------ */
.nav-groep{position:relative;display:inline-flex}
.nav-knop{display:inline-flex;align-items:center;gap:5px;border:0;background:none;
  cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--ink-2);
  padding:7px 2px;line-height:1.2;white-space:nowrap}
.nav-knop:hover{color:var(--orange-deep)}
.nav-knop[aria-expanded="true"]{color:var(--orange-deep)}
.nav-pijl{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;
  margin-top:3px;transition:transform .18s}
.nav-knop[aria-expanded="true"] .nav-pijl{transform:rotate(180deg);margin-top:-3px}

.nav-paneel{position:absolute;top:calc(100% + 10px);left:-14px;z-index:60;
  min-width:244px;padding:10px;border-radius:16px;
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 28px 56px -28px rgba(40,30,20,.3);
  display:none;flex-direction:column;gap:1px}
.nav-groep.open .nav-paneel{display:flex}
.nav-paneel a{display:block;padding:9px 12px;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.nav-paneel a:hover{background:var(--cream-2);color:var(--orange-deep)}
.nav-paneel a.active{color:var(--orange-deep)}
.nav-knop:focus-visible,.nav-paneel a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Op een smal scherm is er geen ruimte om te zweven: het paneel schuift open
   in de kolom zelf, zodat de hele lijst gewoon meeschuift met de rest. */
@media(max-width:1240px){
  .nav-groep{display:block;width:100%}
  .nav-knop{width:100%;justify-content:space-between;padding:14px 36px;
    font-size:14.5px}
  .nav-paneel{position:static;min-width:0;left:auto;top:auto;
    padding:0 0 8px 0;margin:0 36px 0 48px;
    border:0;box-shadow:none;background:none;border-left:2px solid var(--line);
    border-radius:0}
  .nav-paneel a{padding:11px 14px;white-space:normal}
}

/* ------------------------------------------------------------
   Te krappe navigatie (18 oktober 2026)

   Het menu met drie streepjes ging alleen aan onder 1240px. De zakelijke
   balk heeft meer onderdelen dan de persoonlijke, en ingelogd of in het
   Engels worden ze breder. Dan liep de rij rechts het scherm uit en viel
   "Prijzen" half weg. site.js meet nu of de links passen; zo niet, dan
   krijgt .nav de klasse nav-krap en geldt hetzelfde als onder 1240px.
   Hier staan dezelfde regels als in 03-navigatie.css en het blok hierboven,
   met :where(.nav-krap) ervoor. :where telt niet mee in de specificiteit, dus
   de regels wegen even zwaar als het origineel en winnen alleen doordat
   style.css als laatste laadt. Zo blijft de regel die de links van het
   andere spoor verbergt sterker. Verander je de ene, verander dan ook de
   andere.
   ------------------------------------------------------------ */
:where(.nav-krap) .nav-links{position:fixed;top:76px;left:0;right:0;
  background:var(--cream);flex-direction:column;gap:0;padding:10px 0;
  border-bottom:1px solid var(--line);transform:translateY(-150%);
  transition:transform .3s;align-items:stretch}
:where(.nav-krap) .nav-links.open{transform:none}
:where(.nav-krap) .nav-links a{font-size:14.5px;padding:14px 36px}
:where(.nav-krap) .nav-links a.nav-cta{margin:10px 36px;text-align:center;justify-content:center}
:where(.nav-krap) .nav-toggle{display:flex}
:where(.nav-krap) .nav-groep{display:block;width:100%}
:where(.nav-krap) .nav-knop{width:100%;justify-content:space-between;padding:14px 36px;font-size:14.5px}
:where(.nav-krap) .nav-paneel{position:static;min-width:0;left:auto;top:auto;
  padding:0 0 8px 0;margin:0 36px 0 48px;border:0;box-shadow:none;background:none;
  border-left:2px solid var(--line);border-radius:0}
:where(.nav-krap) .nav-paneel a{padding:11px 14px;white-space:normal}
:where(.nav-krap) .nav-inlog{align-self:flex-start;margin:8px 36px}
.nav.nav-krap .nav-links .nav-naar-boven{display:block}
.nav.nav-krap .nav-links a.nav-inlog.nav-naar-boven{display:inline-flex}

/* Verwijzing naar een voorbeeldrapport. Staat onder een opsomming of naast een
   profielvoorbeeld: één regel, geen knop, zodat het bewijs is en geen aanbod. */
.vb-rij{font-size:14px;color:var(--ink-soft);line-height:1.8}
.vb-rij a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.vb-rij a:hover{text-decoration:underline}

/* Voorbeeldrapport als klikbaar plaatje. Een strook van de eerste pagina,
   zodat de bezoeker ziet wat hij opent in plaats van het te moeten geloven.
   De harde onderrand is bedoeld: het is zichtbaar een fragment. */
.rap-vb{display:inline-block;max-width:360px;text-decoration:none;color:inherit}
.rap-vb img{display:block;width:100%;height:auto;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 18px 38px -26px rgba(40,30,20,.35);
  transition:transform .18s,box-shadow .18s}
.rap-vb:hover img{transform:translateY(-3px);box-shadow:0 26px 50px -26px rgba(40,30,20,.45)}
.rap-vb-bij{display:block;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--orange-deep)}
.rap-vb:hover .rap-vb-bij{text-decoration:underline}
.rap-vb:focus-visible img{outline:2px solid var(--ink);outline-offset:3px}
.rap-vb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:22px;margin-top:18px;max-width:980px}
.rap-vb-grid .rap-vb{max-width:none}

/* ------------------------------------------------------------
   Begeleidingsroutes (14-10-2026)
   ------------------------------------------------------------
   Vervangt "Twee manieren van begeleiding", dat twee kaarten van
   gelijk gewicht naast elkaar zette en daarmee een keuzemoment
   maakte van iets wat geen keuze is. Nu: één instap bovenaan, en
   daaronder drie vormen die je kunt combineren.
   ------------------------------------------------------------ */
.rt-start{background:var(--tk-surface,#fff);border:1px solid var(--tk-line,var(--line));
  border-left:4px solid var(--orange);border-radius:var(--tk-radius,18px);
  padding:26px 30px;max-width:900px;margin-bottom:26px}
.rt-label{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--orange-deep)}
.rt-start h3{font-family:var(--display);font-size:21px;font-weight:600;margin:6px 0 10px}
.rt-start p{font-size:15.5px;color:var(--ink-soft);line-height:1.65}
/* Twee instappen naast elkaar: via Aime of rechtstreeks bij een coach.
   Eerst stond hier één knop, alsof er maar één manier was om te beginnen. */
.rt-instap{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:20px;
  padding-top:20px;border-top:1px solid var(--tk-line,var(--line))}
.rt-instap h4{font-family:var(--display);font-size:17px;font-weight:600;margin-bottom:7px}
.rt-instap p{font-size:14.5px}
.rt-instap p:last-child{margin-top:14px}
@media(max-width:760px){.rt-instap{grid-template-columns:1fr;gap:22px}}

.rt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.rt-kaart{background:var(--tk-surface,#fff);border:1px solid var(--tk-line,var(--line));
  border-radius:var(--tk-radius,18px);padding:26px 24px;display:flex;flex-direction:column}
.rt-aime{border-top:4px solid var(--orange)}
.rt-coach{border-top:4px solid var(--ink)}
.rt-beide{border-top:4px solid var(--thinking)}
.rt-kaart h3{font-family:var(--display);font-size:19px;font-weight:600}
.rt-sub{display:block;font-size:12.5px;color:var(--ink-faint);font-weight:600;margin-bottom:12px}
.rt-kaart > p{font-size:14.5px;color:var(--ink-soft);line-height:1.65;margin-bottom:14px}
.rt-lijst{list-style:none;display:flex;flex-direction:column;gap:9px;padding:0;margin-top:auto}
.rt-lijst li{font-size:14px;color:var(--ink-soft);display:flex;gap:9px;line-height:1.5}
.rt-lijst .dot{margin-top:7px;flex-shrink:0}

.rt-samen{margin-top:24px;max-width:900px;font-size:15px;color:var(--ink-soft);line-height:1.7}
.rt-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

@media(max-width:980px){.rt-grid{grid-template-columns:1fr}}