/* ==========================================================================
   ERP training — merklaag boven scout.css

   scout.css levert de layout (hero, banden, kaarten, accordeon, tabs,
   carrousel, contactblok, footer). tokens.css zet daar de kleuren en de
   typografie van erp-training.nl overheen. Dit bestand regelt wat niet met
   een token te vangen is: het logo, het vierkantjes-merkteken en de paar
   blokken die ERP wel heeft en Scout niet (prijskaarten, trainer, formulier).

   Laadt als laatste, dus alles hier wint.
   ========================================================================== */

/* ------------------------------------------------------------------ logo - */
.brand__mark { width: 30px; height: 30px; color: var(--navy); }
.brand__word {
  width: auto;
  font-family: var(--ff-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  color: var(--navy);
}
.brand__tld { font-size: .6em; vertical-align: baseline; }
.site-footer .brand__mark { color: var(--creme); }

/* Lora is een serif: de display-koppen mogen iets minder zwaar en iets
   ruimer staan dan Bricolage Grotesque, anders worden ze blokkerig. */
h1, h2, h3 { font-weight: 600; letter-spacing: -.005em; }
.display { font-weight: 600; }
h4 { font-weight: 700; }

/* ------------------------------------------------------- systeemlogostrip - */
/* (maat van de systeemlogo's: zie "logobalk" in ronde 4 onderaan) */

/* ------------------------------------------------------------ prijskaart - */
.prijzen {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.pkaart {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.9rem 1.7rem;
  border-radius: var(--r-md);
  background: var(--creme);
  color: var(--navy);
  border: 1px solid var(--line);
}
.pkaart--uit {
  background: var(--mist);
  border-color: transparent;
}
.pkaart__eyebrow {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--taupe);
  margin: 0;
}
.pkaart h3 { margin: 0; }
.pkaart__prijs {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: 0;
  font-family: var(--ff-display);
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1;
}
.pkaart__prijs small {
  font-family: var(--ff-body);
  font-size: .82rem;
  font-weight: 400;
  /* Taupe haalde op de lichtgroene band 4,40:1, net onder de 4,5 van AA.
     Een doorzichtige donkergroene tint mengt met de ondergrond en haalt
     5,2 op groen en 5,8 op wit. */
  color: color-mix(in srgb, var(--navy) 72%, transparent);
}
.pkaart .checks { margin: 0; }
.pkaart .checks li { font-size: .93rem; }
.pkaart > .btn { margin-top: auto; align-self: start; }

/* --------------------------------------------------------------- trainer - */
.trainer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-md);
  background: var(--mist-soft);
}
.trainer__foto {
  width: 68px; height: 68px; flex: none;
  border-radius: 50%; overflow: hidden;
  background: var(--tan);
}
.trainer__foto img { width: 100%; height: 100%; object-fit: cover; }
.trainer__wie strong { display: block; font-size: 1.02rem; }
.trainer__wie span { font-size: .9rem; color: var(--taupe); }

/* ------------------------------------------------------------- iconkaart - */
.ikaart__icon {
  width: 44px; height: 44px;
  margin-bottom: .9rem;
}
.ikaart__icon img { width: 100%; height: 100%; object-fit: contain; }

/* --------------------------------------------------- formulier / kalender - */
/* In WordPress staat hier de Fluent Forms-shortcode met de trainingskalender.
   In de statische preview een leeg kader op dezelfde plek en maat. */
.formslot {
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--creme);
  padding: 2.2rem 1.7rem;
  text-align: center;
  color: var(--taupe);
}
.formslot strong { display: block; color: var(--navy); margin-bottom: .3rem; }
/* In WordPress rendert Fluent Forms zelf het hele blok. Het kader eromheen
   hoort dan weg: geen stippellijn, geen extra padding en geen eigen vlak.
   De regel is met :where() geschreven zodat hij nul specificiteit toevoegt
   maar wel de bandkleuren hieronder overschrijft waar nodig. */
.formslot__wp,
.band--mist .formslot__wp,
.band--tan .formslot__wp,
.band--navy .formslot__wp,
.band--sage .formslot__wp {
  text-align: left;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}

/* ----------------------------------------------------------- juridisch - */
.juridisch h3 {
  margin-top: 2.2rem;
  font-size: 1.12rem;
}
.juridisch h3:first-child { margin-top: 0; }
.juridisch p { max-width: 72ch; }

/* De prijskaarten staan op de donkere band, maar zijn zelf licht. scout.css
   kleurt koppen, kickers en vinkjes daar wit/lime; binnen de kaart moet dat
   terug naar de donkere merkkleur, anders valt de tekst weg. */
.band--navy .pkaart,
.band--deep .pkaart,
.band--sage .pkaart { color: var(--navy); }
.band--navy .pkaart h3,
.band--deep .pkaart h3,
.band--sage .pkaart h3 { color: var(--navy); }
.band--navy .pkaart .checks svg,
.band--deep .pkaart .checks svg,
.band--sage .pkaart .checks svg { color: var(--sage); }
.band--navy .pkaart__eyebrow,
.band--deep .pkaart__eyebrow,
.band--sage .pkaart__eyebrow { color: var(--taupe); }
/* 62% gaf op de lichtgroene band 3,93:1; 72% haalt 5,2. */
.pkaart--uit .pkaart__eyebrow { color: color-mix(in srgb, var(--navy) 72%, transparent); }
.pkaart--uit .checks svg { color: var(--navy); }

/* Idem voor de trainer- en formulierblokken als ze op een kleurband staan. */
.band--navy .trainer, .band--sage .trainer, .band--mist .trainer { color: var(--navy); }
.band--navy .trainer strong, .band--sage .trainer strong { color: var(--navy); }
.band--mist .formslot:not(.formslot__wp),
.band--tan .formslot:not(.formslot__wp) { background: var(--white); }

/* De CTA-band heeft geen portret zoals bij Scout, maar tekst met de knoppen
   ernaast. De 230px-fotokolom uit scout.css moet er dus af. */
.pcta--breed { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .pcta--breed { grid-template-columns: 1fr auto; align-items: center; }
}
.pcta--breed .cta-row { flex-wrap: wrap; }

/* --------------------------------------------------------------- agenda - */
/* Het overzicht van trainingsdata, in plaats van de kalender uit de
   Miauw Trainingskalender. De regels komen uit SESSIES in erp_build.py. */
.agenda {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  overflow: hidden;
}
.agenda__kop {
  margin: 0;
  max-width: none;   /* scout.css geeft p een leesbreedte; hier moet de balk vol */
  padding: 1rem 1.4rem;
  background: var(--mist-soft);
  font-weight: 700;
  font-size: .9rem;
  color: var(--navy);
}
.agenda__rijen { list-style: none; }
.agenda__rij {
  display: grid;
  gap: .3rem 1.2rem;
  align-items: center;
  padding: 1.05rem 1.4rem;
  border-top: 1px solid var(--line);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .agenda__rij { grid-template-columns: 11rem 1fr auto auto; }
}
.agenda__datum { font-weight: 700; color: var(--navy); }
.agenda__soort { color: var(--navy); }
.agenda__plaats {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .92rem;
  color: var(--taupe);
}
.agenda__plaats svg { width: 16px; height: 16px; flex: none; }
.agenda__go {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  color: var(--sage);
}
.agenda__go svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.agenda__go:hover svg { transform: translateX(3px); }
.agenda__note {
  margin: 0;
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  color: var(--taupe);
  max-width: none;
}
.band--mist .agenda, .band--tan .agenda { background: var(--white); }

/* ======================================================= feedbackronde 1 = */

/* --- logo ---------------------------------------------------------------- */
/* Het aangeleverde SVG-logo (viewBox 1500x330, dus ruim 4,5:1). Hoogte sturen,
   breedte volgt; op de donkere footer de witte variant. */
.brand__logo { width: auto; height: 30px; }
@media (max-width: 520px) { .brand__logo { height: 24px; } }
.site-footer .brand__logo { height: 28px; }
.brand { gap: 0; }

/* --- knopvorm ------------------------------------------------------------ */
/* Het beeldmerk is opgebouwd uit rechte vlakken; de knoppen volgen die vorm:
   scherpe hoeken en een iets steviger letter. */
.btn {
  border-radius: 0;
  font-weight: 700;
  letter-spacing: .01em;
}
.btn__s { border-radius: 0; }
.btn:has(.btn__s) .btn__s { width: 26px; height: 26px; }

/* (De typografie uit ronde 1 is vervangen; zie het blok onderaan dit bestand.) */

/* --- minder witruimte bij tekstarme blokken ------------------------------ */
.section--tight { padding-block: clamp(2.2rem, 4vw, 3.2rem); }
.pcta--breed { gap: 1.5rem clamp(1.5rem, 3vw, 3rem); }
.pcta--breed h2 { margin-bottom: .35rem; }
.hero--kort { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* --- mobiele volgorde ----------------------------------------------------- */
/* Staan er twee beeldblokken onder elkaar, dan hoort de tekst eerst en het
   beeld daarna. Op .row--flip draait scout.css de kolommen om; op mobiel
   moet die omkering juist weg, anders begint de sectie met een foto. */
@media (max-width: 899px) {
  .row--flip { display: flex; flex-direction: column; }
  .row--flip > :first-child { order: 1; }
  .row--flip > :last-child { order: 2; }
  .hero__grid--split { display: flex; flex-direction: column; }
  .hero__grid--split > .shaped { order: 2; }
}

/* --- vergelijkingstabel --------------------------------------------------- */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.btn--klein { padding: .5rem 1rem; font-size: .88rem; }
.btn--klein:has(.btn__s) { padding: .4rem .45rem .4rem 1rem; }

/* --- checklist ------------------------------------------------------------ */
.cl { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cl__fase {
  padding: 1.9rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
}
.cl__nr {
  margin: 0 0 .4rem;
  font-family: var(--ff-display);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sage);
}
.cl__groep { margin-top: 1.4rem; }
.cl__groep h4 { margin-bottom: .5rem; color: var(--taupe); font-size: var(--fs-small); }
.cl__groep .checks li { font-size: .93rem; align-items: start; }

/* --- blogartikel ---------------------------------------------------------- */
.blog h3 { margin-top: 2.1rem; }
.blog h3:first-child { margin-top: 0; }
.blog p, .blog li { max-width: 74ch; }
.blog ul { margin: 0 0 1.05em 0; padding-left: 1.1rem; }
.blog li { list-style: disc; margin-bottom: .35rem; }
.blog__cta { margin-top: 2rem; }
.post__tag { background: var(--mist); color: var(--navy); }

/* ======================================== typografie — feedbackronde 2 ====
   VERVANGT het blok "--- typografie: groter en steviger ---" uit ronde 1
   (erp.css regels 246-254). Plaats dit blok onderaan erp.css, zodat het van
   scout.css en van de eerdere regels in dit bestand wint.

   Aanleiding: in ronde 1 zijn de maten vergroot. De klant vindt ze nu te
   groot en ziet koppen te ver doorlopen. Hieronder één doorlopende schaal
   van 375 naar 1440 px, plus per tekstsoort een expliciete regelbreedte.

   GEMETEN OP DE LIVE SITE (17-09-2026, Chrome, root 16px):
     Sora — breedte "0" = .743em, gemiddelde kleine letter = .5334em
     Lora — breedte "0" = .621em, gemiddelde kleine letter = .4925em
   1ch Sora is dus ~1,39 echte tekens, 1ch Lora ~1,26. Beide letters zijn
   breed: een comfortabele regel van ~67 tekens is in Sora maar 48ch, niet
   de 62ch die scout.css aanhoudt. De blogalinea stond op 74ch en haalde
   gemeten 100,8 tekens per regel.
   ========================================================================= */

:root {
  /* Corpsen. Minimum tot en met 375px, daarna vloeiend naar het maximum bij
     1440px. Achter elke regel de uitkomst op 375 / 1024 / 1440 px. */
  --fs-display: clamp(1.75rem,   1.398rem + 1.502vw, 2.75rem);   /* 28   / 37,8 / 44   */
  --fs-h1:      clamp(1.625rem,  1.317rem + 1.315vw, 2.5rem);    /* 26   / 34,5 / 40   */
  --fs-h2:      clamp(1.5rem,    1.280rem + 0.939vw, 2.125rem);  /* 24   / 30,1 / 34   */
  --fs-h3:      clamp(1.125rem,  1.037rem + 0.376vw, 1.375rem);  /* 18   / 20,4 / 22   */
  --fs-h4:      clamp(0.9375rem, 0.915rem + 0.094vw, 1rem);      /* 15   / 15,6 / 16   */
  --fs-lead:    clamp(1.03125rem,0.998rem + 0.141vw, 1.125rem);  /* 16,5 / 17,4 / 18   */
  --fs-body:    clamp(0.9375rem, 0.915rem + 0.094vw, 1rem);      /* 15   / 15,6 / 16   */
  --fs-ui:      clamp(0.84375rem,0.833rem + 0.047vw, 0.875rem);  /* 13,5 / 13,8 / 14   */
  --fs-kicker:  clamp(0.78125rem,0.770rem + 0.047vw, 0.8125rem); /* 12,5 / 12,8 / 13   */
  --fs-small:   clamp(0.78125rem,0.770rem + 0.047vw, 0.8125rem); /* 12,5 / 12,8 / 13   */
  /* Ronde 4 (22-10-2026): de klant vond de lopende tekst te groot. Sora is
     een brede letter: 16px Sora oogt als 17-18px in een gewone schreefloze.
     De hele schaal is daarom een stap omlaag gezet, verhoudingen gelijk. */

  /* Regelhoogtes. Lora heeft een grote x-hoogte en lange staarten: op
     displaymaat mag .98 (scout) niet, dat laat regels tegen elkaar lopen. */
  --lh-display: 1.06;
  --lh-kop:     1.14;
  --lh-h3:      1.26;
  --lh-lead:    1.55;
  --lh-body:    1.62;

  /* Regelbreedtes in ch, dus ze schalen mee met het corps. Tussen haakjes de
     uitkomst bij de maximale maat en het aantal echte tekens per regel. */
  --mw-display: 24ch;  /* Lora 48px = 715px = ~30 tekens */
  --mw-kop:     24ch;  /* Lora 36px = 537px = ~30 tekens */
  --mw-h3:      28ch;  /* Lora 24px = 417px = ~35 tekens */
  --mw-lead:    44ch;  /* Sora 19px = 621px = ~61 tekens */
  --mw-body:    48ch;  /* Sora 17px = 606px = ~67 tekens */
  --mw-artikel: 50ch;  /* Sora 17px = 632px = ~70 tekens */
  --mw-ui:      34ch;
}

/* ------------------------------------------------------------- basis ----- */
body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
}

/* 600, niet 700: dat staat al in de comment bovenaan dit bestand en ronde 1
   heeft het per ongeluk teruggedraaid. Lora 700 op 48px wordt een blok. */
h1, h2, h3 { font-weight: 600; }
h4 { font-weight: 700; }
h1, h2, h3, h4 { margin: 0 0 .5em; text-wrap: balance; }

.display {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -.015em;
  font-weight: 600;
  max-width: var(--mw-display);
  margin: 0 0 1.1rem;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-kop); letter-spacing: -.012em; max-width: var(--mw-kop); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-kop); letter-spacing: -.010em; max-width: var(--mw-kop); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3);  letter-spacing: -.005em; max-width: var(--mw-h3);  }
h4 { font-family: var(--ff-body); font-size: var(--fs-h4); line-height: 1.35; letter-spacing: 0; max-width: var(--mw-h3); }

/* h1 mét .display houdt de displaymaat (specificiteit 0,1,1 wint van h1). */
h1.display { font-size: var(--fs-display); line-height: var(--lh-display); max-width: var(--mw-display); }

/* Nu koppen een max-width hebben, moeten gecentreerde blokken hun kop ook
   centreren — anders staat de kop links in zijn eigen kader. */
.center .display, .center h1, .center h2, .center h3, .center h4 { margin-inline: auto; }
.kicker--center { margin-inline: auto; }

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: var(--mw-lead); }
p { max-width: var(--mw-body); margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.kicker {
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: .012em;
  line-height: 1.3;
  max-width: 30ch;
  margin: 0 0 .85rem;
}

small, .note, .form__note, .footer__bar, .pkaart__prijs small,
.tcard__role, .stat__lbl, .agenda__kop { font-size: var(--fs-small); }
.note { max-width: 52ch; }

/* ------------------------------------------ componenten bijtrekken ------- */
/* scout.css zet hier vaste rem-maten die de nieuwe schaal niet volgen. Dit
   zijn precies de plekken waar na ronde 1 koppen over drie regels braken. */

.dcard h3  { font-size: clamp(1.25rem, 1.10rem + .60vw, 1.6rem);      max-width: 20ch; } /* 21,6 / 25,1 / 25,6 */
.pitem h3,
.pkaart h3 { font-size: var(--fs-h3);                                 max-width: 22ch; }
.post h3   { font-size: clamp(1.0625rem, 1.02rem + .19vw, 1.1875rem); max-width: 26ch; line-height: 1.32; }
.acc__q    { font-size: clamp(1rem, .96rem + .17vw, 1.125rem);        line-height: 1.40; }
.tcard blockquote { font-size: clamp(1.0625rem, 1.01rem + .24vw, 1.25rem); line-height: 1.42; max-width: 34ch; }
.mini-cta h2 { font-size: clamp(1.25rem,  1.14rem + .45vw, 1.5rem);   max-width: 26ch; }
.pcta h2     { font-size: clamp(1.375rem, 1.20rem + .75vw, 1.875rem); max-width: 26ch; }

.dcard p, .pitem p, .post p, .persoon__wie, .boekkaart__body p, .acc__a p,
.agenda__plaats, .agenda__go, .agenda__note {
  font-size: var(--fs-ui);
  line-height: 1.55;
}
.dcard p, .pitem p, .post p, .boekkaart__body p { max-width: var(--mw-ui); }
.checks li, .pkaart .checks li, .cl__groep .checks li { font-size: var(--fs-ui); line-height: 1.5; max-width: 40ch; }

.stat__num       { font-size: clamp(1.75rem,  1.45rem + 1.25vw, 2.5rem);   line-height: 1; }
.pkaart__prijs   { font-size: clamp(1.75rem,  1.52rem + 0.96vw, 2.25rem);  line-height: 1; }
.cl__nr          { font-size: clamp(1.625rem, 1.42rem + 0.86vw, 2.125rem); line-height: 1; }
.word-marquee__w { font-size: clamp(1.5rem,   1.11rem + 1.64vw, 2.625rem); line-height: 1; }
.logo-item       { font-size: var(--fs-h4); }

/* --------------------------------------------------------- blogartikel --- */
/* Hier stond 74ch. In Sora is dat ruim 100 tekens per regel (gemeten 100,8
   op /waarom-mislukken-zoveel-erp-projecten.../). 50ch komt uit op ~68. */
.blog p, .blog li { font-size: var(--fs-body); max-width: var(--mw-artikel); }
.blog h2 { margin-top: 2.4rem; }
.blog h3 { margin-top: 2.0rem; max-width: 38ch; }   /* ruimer dan --mw-h3: tussenkoppen in
                                                       een artikel moeten op één regel passen */
.blog h3:first-child { margin-top: 0; }

.juridisch h3 { font-size: var(--fs-h3); max-width: 38ch; }
.juridisch p  { max-width: 56ch; }

/* -------------------------------------------------------- knoppen/menu --- */
.btn        { font-size: var(--fs-ui); font-weight: 700; letter-spacing: .01em; }
.btn--klein { font-size: var(--fs-small); }
.nav a      { font-size: var(--fs-ui); }
.mobile-nav__links > a,
.mobile-nav__links li > a { font-size: clamp(1.5rem, 1.22rem + 1.2vw, 2rem); line-height: 1.25; }
.mobile-nav__links .sub-menu a { font-size: var(--fs-body); }

/* --------------------------------------------------------------- let op --- */
/* Twee koppen in erp_build.py hebben een inline font-size (regel 546 en 893).
   Inline wint van dit hele blok. Schrap die style-attributen, anders blijven
   die twee op 48px en 54,4px staan terwijl .display naar 48px gaat. */

/* ==========================================================================
   DECORATIELAAG — ERP-motieven in plaats van de organische vorm
   Hoort onderaan assets/css/erp.css. Dat bestand laadt na scout.css, dus
   deze regels winnen van .vorm-bg, .section--vorm en .media--vorm.

   Vervangt:  .section--vorm + .vorm-bg   ->  .section--deco + .deco
              .media--vorm (clip-path)    ->  .media--kader
              .shaped::before (cirkel)    ->  recht vlak
              .dcard::before (cirkel)     ->  merkstreep
   ========================================================================== */

/* ------------------------------------------------------------ de laag zelf - */
.section--deco { position: relative; overflow: hidden; }
/* scout.css geeft .section .wrap al position:relative + z-index:1, dus de
   tekst staat automatisch boven de deco-laag. */

.deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
  opacity: var(--deco-op, .085);
  --deco-ac: var(--sage);
}
.deco svg { width: 100%; height: 100%; display: block; }
/* Lijnen blijven exact even dun, ongeacht hoe ver de viewBox opgeschaald
   wordt. Zonder dit worden de hulplijnen op een breed scherm 1,5-2px. */
.deco svg * { vector-effect: non-scaling-stroke; }

/* Tekenklassen — het hele vocabulaire van de zes motieven.
   currentColor = de tekstkleur van de band, dus een motief klopt per
   definitie op een lichte én op een donkere band. Geen hex nodig. */
.deco .r    { fill: none; stroke: currentColor; stroke-width: 1;   stroke-opacity: .5; }  /* hulp/raster */
.deco .l    { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-opacity: .9; }  /* hoofdlijn  */
.deco .v    { fill: currentColor; fill-opacity: .22; stroke: none; }                      /* vlak       */
.deco .vk   { fill: currentColor; fill-opacity: .08; stroke: currentColor;                /* kaart      */
              stroke-width: 1; stroke-opacity: .6; }
.deco .ac   { fill: none; stroke: var(--deco-ac); stroke-width: 1.5; }                    /* accentlijn */
.deco .acv  { fill: var(--deco-ac); stroke: none; }                                       /* accentvlak */
/* Dikke ringen (donut, gauge). Een stroke-width-ATTRIBUUT op het element
   verliest het altijd van een klasse in CSS, dus dat moet hier staan. */
.deco .ring { stroke-width: 13; stroke-linecap: butt; }

/* Sterkte per band. Deze waarden zijn doorgerekend: de laagste
   tekstcontrast die hieruit kan ontstaan is 4,80:1 (witte tekst op de
   sage-band, dwars over een accentlijn). AA voor bodytekst is 4,50:1.
   Verhoog --deco-op dus niet zonder opnieuw te rekenen. */
.band--creme .deco, .band--tan .deco { --deco-op: .10; --deco-ac: var(--sage); }
.band--mist  .deco                   { --deco-op: .13; --deco-ac: var(--sage); }
.band--sage  .deco                   { --deco-op: .12; --deco-ac: var(--mist); }
.band--navy  .deco,
.band--deep  .deco                   { --deco-op: .17; --deco-ac: var(--mist); }

/* Uitfaden waar de tekst staat: het motief is het sterkst aan de kant
   weg van de tekstkolom en verdwijnt achter de kop. #000/transparent zijn
   hier maskerwaarden (alpha), geen merkkleuren. */
.deco--rechts { -webkit-mask-image: linear-gradient(105deg, transparent 30%, #000 74%); mask-image: linear-gradient(105deg, transparent 30%, #000 74%); }
.deco--links  { -webkit-mask-image: linear-gradient(255deg, transparent 30%, #000 74%); mask-image: linear-gradient(255deg, transparent 30%, #000 74%); }
.deco--onder  { -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 72%);  mask-image: linear-gradient(to top, #000 0%, transparent 72%); }
.deco--boven  { -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 72%); mask-image: linear-gradient(to bottom, #000 0%, transparent 72%); }
.deco--rand   { -webkit-mask-image: radial-gradient(118% 108% at 50% 50%, transparent 32%, #000 84%); mask-image: radial-gradient(118% 108% at 50% 50%, transparent 32%, #000 84%); }
/* .deco--vol = geen masker; laat de klasse dan gewoon weg. */

/* Optionele beweging: alleen de accentlijn (.run) schuift, als een
   playhead in een planning. Zet .deco--live op de wrapper. Standaard uit. */
.deco--live .run { stroke-dasharray: 9 13; animation: deco-loop 26s linear infinite; }
@keyframes deco-loop { to { stroke-dashoffset: -264; } }

@media (prefers-reduced-motion: reduce) {
  .deco--live .run { animation: none; }
}
@media print { .deco { display: none; } }

/* -------------------------------------- vlak achter beeld, nu rechthoekig - */
/* scout.css zet hier een ademende mist-cirkel neer (.shaped::before +
   @keyframes vormadem). Dat is óók een organische achtergrondvorm, dus die
   wordt een recht vlak en hij ademt niet meer. */
.shaped::before {
  inset: auto 16% 8% -5%;
  width: auto; height: 64%;
  border-radius: 0;
  opacity: .9;
  animation: none;
}

/* De oude laag hard uitzetten, zodat een vergeten .vorm-bg in een template
   nooit meer een organische vlek oplevert. */
.vorm-bg { display: none; }

/* --------------------------------------------- dienstenkaart: merkstreep - */
/* .dcard::before was een grote cirkel rechtsboven; wordt de verticale
   streep uit het beeldmerk langs de rechterrand. */
.dcard::before {
  top: 0; right: 0; bottom: 0;
  width: 10px; height: auto; aspect-ratio: auto;
  border-radius: 0;
}

/* ==========================================================================
   MAPPING VOOR erp_build.py — wat wordt waar vervangen

   1. VORM_PATH en de <clipPath id="scout-vorm"> in SVG_DEFS kunnen weg
      zodra .media--vorm, .pcta__foto en de filmstrip over zijn.
   2. vorm_bg(style) vervangen door:

        def deco(motief: str, plaats: str = "rechts", live: bool = False) -> str:
            klas = f"deco deco--{motief} deco--{plaats}" + (" deco--live" if live else "")
            return f'<div class="{klas}" aria-hidden="true">{MOTIEVEN[motief]}</div>'

      met MOTIEVEN = {"gantt": ..., "kpi": ..., "proces": ...,
                      "lijn": ..., "grid": ..., "code": ...}

   3. De drie constanten worden:
        VORM_SAGE -> DECO_SAGE = deco("proces", "rechts")
        VORM_NAVY -> DECO_NAVY = deco("gantt",  "rechts")
        VORM_DEEP -> DECO_DEEP = deco("code",   "rechts")
   4. class="section ... section--vorm"  ->  "section ... section--deco"
   5. class="media media--vorm ..."      ->  "media media--kader ..."
   6. De inline style= op vorm_bg vervalt; positie regel je met
      deco--links / deco--rechts / deco--onder / deco--boven / deco--rand.
   ========================================================================== */

/* ================================================================= knop = */
/* Hoort onderaan assets/css/erp.css, na het blok "--- knopvorm ---".
   In erp_build.py wordt SBTN dan:
     SBTN = f'<span class="btn__s" aria-hidden="true">{PIJL}</span>'
     KICKER_S = f'<span class="kicker__s" aria-hidden="true">{MERK_MONO}</span>'
   en MERK (met de hex en de gradient) kan weg. */

/* Kleurenpaar voor de GEVULDE variant. scout.css zet .btn__s op
   background:var(--fg); color:var(--bg) — maar .btn--secundair heeft
   --bg:transparent, dus een currentColor-icoon zou daar onzichtbaar zijn.
   Daarom een expliciet paar, ook in hover. */
.btn { --s-bg: var(--fg); --s-fg: var(--bg); }
.btn--secundair       { --s-bg: var(--sage);  --s-fg: var(--creme); }
.btn--secundair:hover { --s-bg: var(--creme); --s-fg: var(--sage); }

/* STANDAARD: open kadertje, icoon in de tekstkleur van de knop.
   Daardoor is het contrast van het icoon exact gelijk aan dat van het label
   — er bestaat geen knopvariant die dit kan breken.
   De eerste selector is nodig: erp.css heeft al
   .btn:has(.btn__s) .btn__s { width:26px; height:26px }  (specificiteit 0,3,0)
   en die zou een losse .btn__s (0,1,0) verslaan. */
.btn:has(.btn__s) .btn__s,
.btn__s {
  width: 26px; height: 26px; flex: none;
  border-radius: 0;
  display: grid; place-items: center;
  background: transparent;
  color: inherit;                       /* == var(--fg) van de knop */
  /* inset box-shadow i.p.v. border: dan blijft het vakje exact 26px */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 38%, transparent);
  transition: box-shadow .22s var(--ease);
}
.btn__s svg { width: 15px; height: 15px; transition: transform .28s var(--ease); }
.btn:hover .btn__s { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 75%, transparent); }

/* De 360-graden-draai uit scout.css regel 183 wordt een zetje naar rechts:
   past bij een pijl en laat het icoon niet meer buiten de badge steken.
   Zelfde specificiteit (0,3,1) als de scout-regel, maar erp.css laadt later. */
.btn:hover .btn__s svg { transform: translateX(2px); }

/* GEVULDE VARIANT, als een knop extra nadruk moet krijgen:
   <span class="btn__s btn__s--vlak"> */
.btn__s--vlak { background: var(--s-bg); color: var(--s-fg); box-shadow: none; }
.btn:hover .btn__s--vlak { box-shadow: none; }

/* MERKVARIANT: het monochrome beeldmerk schuift niet, dat is een logo. */
.btn__s--merk svg, .btn:hover .btn__s--merk svg { transform: none; }

/* Kickerteken op dezelfde maat. Met een currentColor-icoon gaat de
   bestaande regel .band--navy .kicker__s { color: var(--mist) } uit
   scout.css regel 142 eindelijk werken. */
.kicker__s { width: 15px; height: 15px; }

/* scout.css heeft al een reduced-motion-regel voor .btn__s svg, maar die
   staat in een bestand dat EERDER laadt en wordt dus overruled door de
   translateX hierboven. Hij moet hier opnieuw. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover .btn__s svg { transform: none; }
}

/* ---------------------------------------------- beeld: rechte hoek + streep - */
/* .media--vorm blijft hier alleen staan om oude markup onschadelijk te maken;
   in erp_build.py wordt de klasse .media--kader. */
.media--vorm, .media--kader { border-radius: 0; clip-path: none; }

/* de limestreep uit het beeldmerk, binnen het beeld want .media heeft
   overflow:hidden */
.media--kader::before {
  content: ""; position: absolute; z-index: 2;
  left: 0; top: 0; bottom: 0; width: 9px;
  background: var(--mist);
}
/* dunne kaderlijn; currentColor = de tekstkleur van de band, dus hij werkt
   op crème én op navy zonder tweede regel */
.media--kader::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  pointer-events: none;
}
.media--kader--rechts::before { left: auto; right: 0; }
.media--kader--onder::before  { left: 0; right: 0; top: auto; bottom: 0;
                                width: auto; height: 9px; }

/* de twee andere plekken waar hetzelfde clip-path nog staat */
.pcta__foto { clip-path: none; border-radius: 0; }
.filmstrip__item:nth-child(odd) .media { clip-path: none; border-radius: 0; }

/* --- invulblok bij een nog niet uitgewerkte case -------------------------- */
/* Zichtbaar, niet weggemoffeld: zolang een case niet is ingevuld moet
   duidelijk zijn dat er nog tekst mist. De pagina staat daarom in WordPress
   ook op concept. */
.invul {
  border: 1px dashed color-mix(in srgb, var(--navy) 35%, transparent);
  border-left: 4px solid var(--mist);
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.6rem;
  background: color-mix(in srgb, var(--mist) 22%, var(--white));
}
.invul__kop {
  margin: 0 0 .5rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--taupe);
}
.invul ul { margin: 0; padding-left: 1.1rem; }
.invul li { list-style: disc; font-size: var(--fs-ui); margin-bottom: .25rem; max-width: 46ch; }

/* --- trainingssessie: de feitenlijst in de hero ---------------------------- */
.sessie-feiten {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .7rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
/* Icoon links, label en waarde eronder elkaar rechts ervan. Zelfde
   iconenset als de agenda, zodat een sessie er overal gelijk uitziet. */
.sessie-feiten li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .6rem;
  row-gap: .15rem;
  align-items: start;
}
.sessie-feiten li > svg {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  margin-top: .15rem;
  color: var(--sage);
}
.sessie-feiten span { font-size: var(--fs-small); color: var(--taupe); }
.sessie-feiten strong { font-size: var(--fs-ui); color: var(--navy); font-weight: 700; }
.sessie-adres { font-weight: 400; }
.agenda__vol {
  display: inline-flex;
  align-items: center;
  padding: .3rem .6rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--taupe);
  background: var(--tan);
}

/* ======================================================= feedbackronde 3 = */
/* Drie plekken waar tekst wegviel tegen de achtergrond. Gemeten met een
   contrastcontrole over alle pagina's; de ratio's staan erbij. */

/* 1. De van-naar-tabel heeft een eigen witte achtergrond, maar stond op een
      gekleurde band en erfde daar de crème tekstkleur van: wit op wit.
      De kopregel hoort daar NIET bij: die heeft zelf een donkergroen vlak
      (scout.css .vannaar__kop) en moet dus juist lichte tekst houden. Die
      stond hier eerder ten onrechte wel bij, en werd donkergroen op
      donkergroen. */
.vannaar, .vannaar__rij { color: var(--navy); }
.vannaar__kop { color: var(--creme); }
/* Gemeten op wit: 62% gaf 4,25:1 en 45% gaf 2,65:1 — allebei onder de 4,5
   die AA vraagt voor tekst op deze grootte. 72 en 70 procent halen 5,8 en
   5,4 en blijven toch duidelijk lichter dan de vette "naar"-kolom. */
.vannaar__rij .vannaar__van { color: color-mix(in srgb, var(--navy) 72%, transparent); }
.vannaar__rij .vannaar__nr { color: color-mix(in srgb, var(--navy) 70%, transparent); }
.vannaar__pijl { color: var(--sage); }

/* 2. scout.css geeft .dcard een eigen achtergrond per positie, maar
      .dcard--link zet color op inherit en staat daar ná — dan werd donkergroen
      op middengroen (2,24:1). De kleuren horen bij de achtergrond, niet bij de
      omgeving, dus die zetten we hier expliciet. Er zijn vier kaarten in plaats
      van Scouts drie, dus de reeks loopt door. */
.cards3 .dcard,
.cards3 .dcard--link            { background: var(--sage); color: var(--creme); }
.cards3 .dcard:nth-child(2)     { background: var(--tan);  color: var(--navy); }
.cards3 .dcard:nth-child(3)     { background: var(--mist); color: var(--navy); }
.cards3 .dcard:nth-child(4)     { background: var(--navy); color: var(--creme); }
.cards3 .dcard h3,
.cards3 .dcard p,
.cards3 .dcard .dcard__go       { color: inherit; }
.cards3 .dcard:nth-child(1) .checks svg,
.cards3 .dcard:nth-child(4) .checks svg { color: var(--mist); }

/* 3. Het contactblok heeft een donker tekstvlak, maar dat is geen .band--navy,
      dus de kickerregel uit scout.css sloeg niet aan: grijs op donkergroen
      (2,69:1). */
.contact__intro .kicker,
.contact__intro .kicker__s { color: var(--mist); }
.contact__intro .muted,
.contact__intro .muted a   { color: color-mix(in srgb, var(--creme) 82%, transparent); }

/* --- telefoon bij de trainer --------------------------------------------- */
.trainer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin-top: .35rem;
}
.trainer__contact a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--sage);
  text-decoration: none;
}
.trainer__contact a:hover { text-decoration: underline; }
.trainer__contact svg { width: 15px; height: 15px; flex: none; }
.band--navy .trainer__contact a,
.band--sage .trainer__contact a { color: var(--mist); }

/* --- agenda: rijker overzicht -------------------------------------------- */
/* Per sessie: datum en soort links, de feiten eronder, status en knop rechts. */
.agenda__rij {
  grid-template-columns: 1fr;
  gap: .45rem;
  align-items: start;
}
@media (min-width: 860px) {
  .agenda__rij { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.agenda__hoofd { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.agenda__soort { color: var(--taupe); font-size: var(--fs-ui); }
.agenda__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .55rem;
  font-size: var(--fs-small);
  color: var(--taupe);
  grid-column: 1;
}
.agenda__punt { opacity: .5; }
.agenda__rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  grid-column: 1;
}
@media (min-width: 860px) {
  .agenda__rechts { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
}
.agenda__status {
  display: inline-flex;
  align-items: center;
  padding: .2rem .5rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--navy);
  background: var(--mist);
}
.agenda__status--bijna { background: var(--tan); }
.agenda__status--vol { background: var(--tan); color: var(--taupe); }
.agenda__go--uit { color: var(--taupe); }

/* --- agenda: feiten met icoon -------------------------------------------- */
.agenda__feit {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.agenda__feit + .agenda__feit { margin-left: .9rem; }
.agenda__feit svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--sage);
}
.agenda__punt { display: none; }

/* --- agenda: niets gepland ------------------------------------------------ */
.agenda__leeg { padding: 1.4rem; }
.agenda__leeg p { font-size: var(--fs-ui); max-width: 52ch; }
.agenda__leeg p:last-child { margin-top: 1rem; }

/* Juridische koppen staan nu als h2 in de tekst (waren h3, wat een niveau
   oversloeg onder de h1). De opmaak blijft gelijk. */
.juridisch h2 {
  margin-top: 2.2rem;
  font-size: var(--fs-h3);
  max-width: 38ch;
}
.juridisch h2:first-child { margin-top: 0; }

/* De footerkoppen zijn h2 geworden (waren h4, wat na een h2 in de body een
   niveau oversloeg). De maat blijft die van een h4. */
.footer__kop {
  font-family: var(--ff-body);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  margin: 0 0 .55em;
  max-width: none;
}

/* ==================================================== Fluent Forms in stijl =
   Fluent Forms laadt zijn eigen stylesheets NA die van het thema:
   scout.css → tokens.css → erp.css → style.css → fluent-forms-public.css
   → fluentform-public-default.css. Bij gelijke specificiteit wint de plugin
   dus altijd. Vrijwel al zijn regels staan op `.ff-default X` (0,2,0).

   Daarom haakt alles hieronder aan op `.fluentform.ff-default` — twee klassen
   op hetzelfde element, dus één punt hoger — en waar de plugin zelf al een
   :not() of :hover gebruikt, komt er nog een klasse bij. Geen !important,
   behalve op één plek waar de plugin een inline style zet.
   ========================================================================= */

/* Zelfde selector als de plugin, die later laadt; vandaar de tweede klasse.
   De tweede regel is voor de kolomcontainer op de laatste stap: daar zet de
   plugin een eigen marge met een hogere specificiteit. */
.fluentform.ff-default .ff-el-group,
.fluentform.ff-default .ff-step-t-container.ff-inner_submit_container .ff-el-group { margin-bottom: 1.1rem; }

/* --------------------------------------------------------------- labels - */
/* Plugin: .ff-default .ff-el-input--label label (0,2,1) */
.fluentform.ff-default .ff-el-input--label label {
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 700;
  /* Geen vaste kleur: het checklistformulier staat op de donkergroene band
     en een vaste donkere kleur werd daar onleesbaar. Zo volgt het label de
     tekstkleur van de band waar het formulier op staat. */
  color: inherit;
  letter-spacing: .01em;
  margin-bottom: .35rem;
  line-height: 1.4;
}
.fluentform.ff-default .ff-el-input--label.ff-el-is-required.asterisk-right label:after,
.fluentform.ff-default .ff-el-input--label.ff-el-is-required.asterisk-left label:before {
  color: color-mix(in srgb, currentColor 70%, transparent);
}

/* ------------------------------------------------------------- invoer --- */
/* Plugin: .ff-default .ff-el-form-control (0,2,0), rondingen 7px en een
   systeemletter. Hier terug naar rechte hoeken en de huisletter. */
.fluentform.ff-default .ff-el-form-control {
  width: 100%;
  font-family: var(--ff-body);
  font-size: var(--fs-ui);
  line-height: 1.5;
  color: var(--navy);
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--navy) 22%, transparent);
  border-radius: 0;
  padding: .7rem .85rem;
  box-shadow: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.fluentform.ff-default .ff-el-form-control:hover {
  border-color: color-mix(in srgb, var(--navy) 38%, transparent);
}
/* Plugin: .ff-default .ff-el-form-control:focus (0,3,0) */
.fluentform.ff-default .ff-el-form-control:focus {
  outline: 0;
  border-color: var(--sage);
  box-shadow: inset 0 0 0 1px var(--sage);
  color: var(--navy);
}
.fluentform.ff-default .ff-el-form-control::placeholder {
  color: color-mix(in srgb, var(--taupe) 75%, transparent);
}
.fluentform.ff-default textarea.ff-el-form-control { min-height: 7rem; resize: vertical; }
.fluentform.ff-default select.ff-el-form-control {
  appearance: none;
  padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%),
                    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.fluentform.ff-default .ff-el-help-message {
  font-size: var(--fs-small);
  color: color-mix(in srgb, currentColor 78%, transparent);
  margin-top: .3rem;
}
.fluentform.ff-default .error-text { font-size: var(--fs-small); color: #8c2b1c; }
.band--navy .fluentform.ff-default .error-text,
.band--deep .fluentform.ff-default .error-text,
.band--sage .fluentform.ff-default .error-text { color: #ffc4ba; }
.fluentform.ff-default .ff-el-is-error .ff-el-form-control { border-color: #8c2b1c; }

/* -------------------------------------------------------------- knoppen - */
/* Dezelfde knop als op de rest van de site, inclusief het vierkantje met de
   pijl. Fluent Forms zet de knoptekst als platte tekst in de knop — HTML kan
   er niet in — dus het pijltje komt uit een ::after.

   De pijl staat als achtergrondafbeelding in dat vakje en niet als masker:
   een masker zou ook de inset-rand van het vakje wegknippen. Daardoor moet de
   lijnkleur in de SVG vastliggen; vandaar twee varianten. */
.fluentform.ff-default {
  /* Fluent Forms werkt intern met deze vier variabelen; de plugin zet ze op
     :root. Door ze hier te overschrijven volgen ook onderdelen die we niet
     apart opmaken de huisstijl: het info-icoontje bij een hulptekst, de
     voortgangsbalk, foutkleuren. Scheelt een reeks losse regels. */
  --fluentform-primary: var(--sage);
  --fluentform-secondary: var(--taupe);
  --fluentform-danger: #8c2b1c;
  --fluentform-border-color: color-mix(in srgb, var(--navy) 22%, transparent);
  --fluentform-border-radius: 0;

  --pijl-licht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12h14.4M12.2 6.3L17.9 12l-5.7 5.7' fill='none' stroke='%23FFFFFF' stroke-width='2.1' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --pijl-terug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 12H6.1M11.8 6.3L6.1 12l5.7 5.7' fill='none' stroke='%233C6B2A' stroke-width='2.1' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

/* Plugin: .ff-default .ff_btn_style (0,2,0) en, per formulier, een inline
   regel form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style) (0,3,1).
   Vier klassen is daar net boven. */
.fluentform.ff-default .ff-btn.ff-btn-submit,
.fluentform.ff-default .ff-btn.ff-btn-next,
.fluentform.ff-default .ff-btn.ff-btn-prev {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .55rem .5rem 1.35rem;
  border: 2px solid var(--sage);
  border-radius: 0;
  background: var(--sage);
  color: var(--creme);
  font-family: var(--ff-body);
  font-size: var(--fs-ui);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.62;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}

/* Het vierkantje met de pijl, zoals span.btn__s elders op de site. */
.fluentform.ff-default .ff-btn.ff-btn-submit:after,
.fluentform.ff-default .ff-btn.ff-btn-next:after,
.fluentform.ff-default .ff-btn.ff-btn-prev:before {
  content: "";
  width: 26px;
  height: 26px;
  flex: none;
  background-image: var(--pijl-licht);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 15px 15px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 38%, transparent);
  transition: box-shadow .22s var(--ease), background-position .28s var(--ease);
}

/* Plugin-hover is .ff-default .ff_btn_style:hover (0,3,0) plus, voor de
   stapknoppen, .ff-default .ff-btn-secondary:not(...):hover (0,4,0). */
.fluentform.ff-default .ff-btn.ff-btn-submit:hover,
.fluentform.ff-default .ff-btn.ff-btn-submit:focus,
.fluentform.ff-default .ff-btn.ff-btn-next:hover,
.fluentform.ff-default .ff-btn.ff-btn-next:focus {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--creme);
  opacity: 1;
}
.fluentform.ff-default .ff-btn.ff-btn-submit:hover:after,
.fluentform.ff-default .ff-btn.ff-btn-next:hover:after {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 75%, transparent);
  background-position: calc(50% + 2px) 50%;
}

/* Vorige is de tegenhanger: open vlak, pijl naar links, vóór de tekst. */
.fluentform.ff-default .ff-btn.ff-btn-prev {
  padding: .5rem 1.35rem .5rem .55rem;
  background: transparent;
  color: var(--sage);
}
.fluentform.ff-default .ff-btn.ff-btn-prev:before { background-image: var(--pijl-terug); }
.fluentform.ff-default .ff-btn.ff-btn-prev:hover,
.fluentform.ff-default .ff-btn.ff-btn-prev:focus {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--creme);
  opacity: 1;
}
.fluentform.ff-default .ff-btn.ff-btn-prev:hover:before {
  background-image: var(--pijl-licht);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 75%, transparent);
  background-position: calc(50% - 2px) 50%;
}

@media (prefers-reduced-motion: reduce) {
  .fluentform.ff-default .ff-btn:hover:after,
  .fluentform.ff-default .ff-btn:hover:before { background-position: 50% 50%; }
}

/* De stapknoppen krijgen van Fluent Forms een inline `float`. Dat is de enige
   plek waar !important nodig is; een inline stijl is anders niet te verslaan.
   De rij zelf wordt flex, zodat vorige en volgende netjes uit elkaar staan. */
.fluentform.ff-default .step-nav {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.fluentform.ff-default .step-nav .ff-btn { float: none !important; }
/* Vorige duwt de rest naar rechts. Fluent Forms verbergt die knop op de
   eerste stap met JavaScript; dan valt hij uit de rij en staat Volgende
   nog steeds rechts. Met space-between zou hij dan naar links springen. */
.fluentform.ff-default .step-nav .ff-btn-prev { margin-right: auto; }

/* ------------------------------------------------------------- stappen - */
/* De stappen zelf blijven werken; alleen de voortgangsbalk met de nummers
   verdwijnt van de site. Hij blijft bestaan in de formulierbouwer.
   Plugin: .fluentform .ff-step-header (0,2,0). */
.fluentform.ff-default .ff-step-header { display: none; }

/* --------------------------------------------------------- bevestiging - */
.fluentform.ff-default .ff-message-success,
.fluentform .ff-message-success.ff-message-success {
  border: 0;
  border-left: 4px solid var(--sage);
  background: var(--mist-soft);
  color: var(--navy);
  padding: 1.1rem 1.3rem;
  border-radius: 0;
}

/* ================================================ sessiepagina: kolommen =
   Op de detailpagina van een trainingsdatum loopt de rechterkolom mee met
   de uitleg links: daar staan de trainer en het inschrijfformulier, zodat
   inschrijven altijd binnen bereik is terwijl je doorleest.

   Onder 900px is er maar één kolom en zakt het blok onder de tekst; daar
   heeft meelopen geen zin en zou het de halve telefoon vullen.
   ========================================================================= */

.row--sessie { align-items: start; }
/* De koptekst van de site plakt bovenaan; zonder deze marge verdwijnt het
   blok eronder als je via de knop 'Inschrijven' hierheen springt. */
.sessie-zij { scroll-margin-top: calc(78px + 1.2rem); }

@media (min-width: 900px) {
  .row--sessie {
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .row--sessie > * { min-width: 0; }

  .sessie-zij {
    position: sticky;
    /* De koptekst van de site plakt zelf ook (78px hoog), dus daaronder. */
    top: calc(78px + 1.2rem);
    align-self: start;
  }
}

.sessie-zij__in {
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--navy) 12%, transparent);
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
}
.sessie-zij .trainer { margin-bottom: 1.1rem; }
.sessie-zij .fluentform.ff-default .ff-el-group { margin-bottom: .8rem; }
.sessie-zij .fluentform.ff-default .step-nav { margin-top: .4rem; }
.sessie-zij__form { border-top: 1px solid color-mix(in srgb, var(--navy) 12%, transparent); padding-top: 1.1rem; }
.sessie-zij__form > p { margin-bottom: .9rem; font-size: var(--fs-small); }
.sessie-zij__na { font-size: var(--fs-small); color: var(--taupe); margin-top: 1rem; }
.sessie-zij .agenda__vol { display: block; margin-bottom: 1rem; }

/* Het formulier staat hier in een smallere kolom dan elders; de stappen
   mogen daar niet naast elkaar willen staan. */
.sessie-zij .fluentform .ff-t-container { display: block; }
.sessie-zij .fluentform .ff-t-cell { width: 100%; padding: 0; }

/* ============================== teksten uit de editor op de sessiepagina =
   Schrijft Dragan de trainingsbeschrijving in Secure Custom Fields, dan komt
   daar een gewone <ul> uit. Die krijgt hier dezelfde vinkjes als de lijsten
   die het thema zelf maakt, zodat beide er gelijk uitzien.
   ========================================================================= */

.training-info ul {
  list-style: none;
  margin: 1rem 0 1.4rem;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.training-info ul li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.5;
}
.training-info ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 1.15em;
  height: 1.15em;
  background: var(--sage);
  -webkit-mask: var(--vink) center / contain no-repeat;
  mask: var(--vink) center / contain no-repeat;
}
.training-info { --vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.2 5.2L20 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.training-info h3 { margin-top: 1.8rem; }
.training-info > p:last-child { margin-bottom: 0; }

/* ======================================================= feedbackronde 4 =
   22-10-2026. Wensen van de klant, in deze volgorde:
   1. logobalk groter en naadloos doorlopend;
   2. lopende tekst kleiner (de schaal staat bovenin, bij "typografie");
   3. nergens hoofdletters als stijl (uppercase stond op vijf plekken, en
      scout.css zette kickers en labels in onderkast — allebei weg);
   4. een filter op het trainingsoverzicht;
   5. meer beweging en meer huisstijl: het beeldmerk als achtergrondvorm;
   6. geen tabellen meer die 'AI' ogen: de vergelijking wordt een trap van
      drie treden, de van-naar-tabel een verschuiving.
   ========================================================================= */

:root {
  /* Het verloopvlak uit het beeldmerk, gemeten in logo-icon.svg. */
  --merk-verloop: linear-gradient(90deg, #19310B, #4D8B75);
}

/* ------------------------------------------------------------- logobalk -- */
.logos { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
.logos__head {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--taupe);
  margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
}
.logos__baan {
  overflow: hidden;
  /* zachte randen links en rechts; #000 is hier een maskerwaarde */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* Zonder script, of met 'minder beweging' aan: de logo's rustig gecentreerd. */
.logos .marquee {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem clamp(2.5rem, 6vw, 5rem);
  width: auto;
  padding-inline: 1rem;
  animation: none;
}
/* Met script: één lange rail van twee identieke sets (zie scout.js). */
.logos .marquee.is-loop {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  padding-inline: 0;
  width: max-content;
  animation: slide var(--duur, 40s) linear infinite;
}
.marquee__set { display: flex; align-items: center; flex: none; }
.marquee__set > * { flex: none; margin-right: clamp(3rem, 7vw, 6rem); }
.logo-item--img {
  height: var(--h, 40px);
  width: auto;
  max-width: none;
  max-height: none;
  filter: grayscale(1);
  opacity: .62;
}
.logo-item--img:hover { filter: none; opacity: 1; }
@media (max-width: 600px) { .logo-item--img { height: calc(var(--h, 40px) * .78); } }

/* ------------------------------------------------ typografie: de rest ---- */
/* scout.css had nog ruim veertig vaste rem-maten die de schaal niet volgen.
   Alles hieronder valt nu op een van de vijf tekstmaten van de schaal. */
.dcard__sub, .pitem__eyebrow, .post__meta, .boekkaart__label, .media__ph,
.footer__list .sub-menu a, .tcard__name, .tcard__role, .field label, .toc__kop,
.tabel th, .form__note, .footer__grid h4, .klein { font-size: var(--fs-small); }
.dcard__go, .post__go, .tabs__btn, .footer__list a, .toc__lijst a, .nav__panel a,
.nav .sub-menu a, .mobile-nav__contact, .persoon__wie, .newsletter p,
.boekkaart .link-arw, .link-arw, .pitem__meta, .team-card__rol, .trainer__wie span,
.tag-list li, .tabel, .acc__a p, .agenda__datum { font-size: var(--fs-ui); }
.trainer__wie strong, .persoon__wie strong, .team-card__naam, .boekkaart__body h4,
.newsletter h4 { font-size: var(--fs-h4); }
.prose blockquote { font-size: var(--fs-lead); }
.mobile-nav__sub a { font-size: var(--fs-body); }
.footer__list li { font-size: var(--fs-ui); }
.agenda__kop { font-family: var(--ff-display); font-size: var(--fs-h4); font-weight: 600; }
/* Invoervelden op 16px: kleiner laat iOS bij het tikken inzoomen. */
.field input, .field textarea,
.fluentform.ff-default .ff-el-form-control { font-size: 1rem; }

/* ---------------------------------------------------- geen hoofdletters -- */
/* Vangnet voor markup die buiten dit thema om binnenkomt (plugins). */
.kicker, .logos__head, .agenda__kop, .pkaart__eyebrow, .cl__groep h4,
.invul__kop, .footer__grid h4, .footer__kop, .filter__label { text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------- agendafilter -- */
.agenda__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.75rem;
  padding: 1.1rem 1.4rem 1.2rem;
  border-top: 1px solid var(--line);
  background: var(--white);
}
.agenda__filter[hidden] { display: none; }
.filter__groep { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin: 0; }
.filter__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter__label {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--taupe);
}
.filter__chip {
  appearance: none;
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.2;
  padding: .5rem .85rem;
  border: 1px solid color-mix(in srgb, var(--navy) 22%, transparent);
  border-radius: 0;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.filter__chip:hover { border-color: var(--navy); }
/* Gekozen: het donkere vlak met de limestreep, zoals in het beeldmerk. */
.filter__chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--creme);
  box-shadow: inset 5px 0 0 var(--mist);
}
.filter__select { position: relative; display: inline-block; }
.filter__select select {
  appearance: none;
  font: inherit;
  font-size: 1rem;           /* 16px: anders zoomt iOS in */
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
  padding: .45rem 2.4rem .45rem .85rem;
  border: 1px solid color-mix(in srgb, var(--navy) 22%, transparent);
  border-radius: 0;
  background: var(--white);
  cursor: pointer;
  min-width: 12.5rem;
}
.filter__select select:hover { border-color: var(--navy); }
.filter__select::after {
  content: "";
  position: absolute;
  right: .95rem;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.filter__teller {
  margin: 0 0 0 auto;
  padding-bottom: .55rem;
  max-width: none;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--sage);
}
.agenda__rij[hidden], .agenda__geen[hidden] { display: none; }
.agenda__rij.is-terug { animation: rijterug .45s var(--ease) both; }
@keyframes rijterug { from { opacity: 0; transform: translateY(8px); } }
.agenda__geen {
  margin: 0;
  max-width: none;
  padding: 1.3rem 1.4rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-ui);
}
.agenda__wis {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--sage);
  text-decoration: underline;
  cursor: pointer;
}
/* Een regel licht op met de limestreep als je eroverheen gaat. */
.agenda__rij { position: relative; transition: background-color .25s var(--ease); }
.agenda__rij::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--mist);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .3s var(--ease);
}
.agenda__rij:hover { background-color: color-mix(in srgb, var(--mist) 16%, var(--white)); }
.agenda__rij:hover::before { transform: scaleY(1); }
@media (max-width: 719px) {
  .agenda__filter { padding-inline: 1.1rem; }
  .filter__teller { margin-left: 0; flex-basis: 100%; padding-bottom: 0; }
}

/* --------------------------------------------- vergelijking: drie treden -- */
/* Basis, Advanced, Incompany als een trap: elke trede staat een stap hoger en
   noemt alleen wat er bij komt. De plaat bovenaan is het vlak uit het
   beeldmerk, met de streep aan de linkerkant. */
.treden {
  --stap: clamp(1.5rem, 3vw, 2.6rem);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.trede { display: flex; flex-direction: column; color: var(--navy); }
.trede--1 { --n: 1; }
.trede--2 { --n: 2; }
.trede--3 { --n: 3; }
.trede__plaat {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .1rem;
  padding: 1.3rem 1.5rem 1.5rem calc(1.5rem + 8px);
  min-height: 10rem;
}
.trede__plaat::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: var(--streep);
}
.trede--1 .trede__plaat { background: var(--mist); color: var(--navy); --streep: var(--navy); }
.trede--2 .trede__plaat { background: var(--sage); color: var(--creme); --streep: var(--mist); }
.trede--3 .trede__plaat { background: var(--merk-verloop); color: var(--creme); --streep: var(--mist); }
@media (min-width: 900px) {
  .treden { grid-template-columns: repeat(3, 1fr); }
  /* De trap: elke plaat is een stap hoger, de onderkanten lopen gelijk. */
  .trede__plaat {
    min-height: calc(9.5rem + (var(--n) - 1) * var(--stap));
    margin-top: calc((3 - var(--n)) * var(--stap));
  }
}
/* Niveau-indicator: één, twee of drie oplopende balkjes. */
.trede__niveau { display: flex; align-items: flex-end; gap: 4px; height: 24px; margin-bottom: auto; padding-bottom: 1rem; box-sizing: content-box; }
.trede__niveau i { display: block; width: 9px; background: currentColor; }
.trede__niveau i:nth-child(1) { height: 40%; }
.trede__niveau i:nth-child(2) { height: 70%; }
.trede__niveau i:nth-child(3) { height: 100%; }
.trede__naam {
  margin: 0;
  max-width: none;
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
}
.trede__sub { margin: 0; font-size: var(--fs-small); font-weight: 600; opacity: .88; }
.trede__prijs {
  margin: .75rem 0 0;
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 1.32rem + .75vw, 2rem);
  font-weight: 600;
  line-height: 1;
}
.trede__prijs small { font-family: var(--ff-body); font-size: var(--fs-small); font-weight: 400; opacity: .88; }
.trede__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.35rem 1.5rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 0;
}
.trede__feiten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--taupe);
}
.trede__feiten li { display: inline-flex; align-items: center; gap: .35rem; }
.trede__feiten svg { width: 15px; height: 15px; color: var(--sage); flex: none; }
.trede__voor { margin: 0; max-width: none; font-size: var(--fs-ui); }
.trede__kop {
  margin: .25rem 0 -.25rem;
  padding-top: .95rem;
  border-top: 1px solid var(--line);
  max-width: none;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--sage);
}
.trede .checks { margin: 0; }
.trede__noot { margin: -.3rem 0 0; font-size: var(--fs-small); color: var(--taupe); }
.trede .btn { margin-top: auto; align-self: flex-start; }
/* Opbouw: de platen groeien na elkaar omhoog, daarna de tekst eronder. */
.rv--treden .trede__plaat { clip-path: inset(0); transition: clip-path .9s var(--ease) calc(var(--n) * .16s); }
.rv--treden:not(.is-in) .trede__plaat { clip-path: inset(100% 0 0 0); }
.rv--treden.rv:not(.is-in) { opacity: 1; transform: none; }

/* -------------------------------------------- van -> naar: verschuiving -- */
.schuif { max-width: 900px; }
.schuif__kop,
.schuif__rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr);
  gap: 0 .6rem;
}
.schuif__kop { margin-bottom: .75rem; font-size: var(--fs-small); font-weight: 700; }
.schuif__rijen { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.schuif__rij { align-items: stretch; }
/* Links: het gangbare, als open gestippeld kader in de kleur van de band. */
.schuif__van {
  display: flex;
  align-items: center;
  padding: 1rem 1.2rem;
  border: 1px dashed color-mix(in srgb, currentColor 50%, transparent);
  font-size: var(--fs-ui);
  line-height: 1.45;
}
/* Rechts: onze aanpak, als het donkere vlak met de limestreep. */
.schuif__naar {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.2rem 1rem calc(1.2rem + 8px);
  background: var(--navy);
  color: var(--creme);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.4;
}
.schuif__naar::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: var(--mist);
}
.schuif__nr { flex: none; font-family: var(--ff-display); font-size: var(--fs-small); font-weight: 600; color: var(--mist); }
.band--navy .schuif__naar, .band--deep .schuif__naar { background: var(--white); color: var(--navy); }
.band--navy .schuif__nr, .band--deep .schuif__nr { color: var(--sage); }
.schuif__lijn { position: relative; display: grid; align-items: center; }
.schuif__streep {
  position: absolute;
  left: .2rem; right: .5rem; top: 50%;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  opacity: .55;
  transform-origin: 0 50%;
  transition: transform .7s var(--ease) var(--wacht, .2s);
}
.schuif__lijn svg {
  justify-self: end;
  width: 22px;
  height: 22px;
  rotate: 0deg;
  transition: opacity .4s var(--ease) calc(var(--wacht, .2s) + .45s), transform .4s var(--ease) calc(var(--wacht, .2s) + .45s);
}
.schuif__rij { --wacht: calc(min(var(--i, 0), 8) * .14s + .2s); }
.rv:not(.is-in) .schuif__streep { transform: scaleX(0); }
.rv:not(.is-in) .schuif__lijn svg { opacity: 0; transform: translateX(-12px); }
@media (max-width: 640px) {
  .schuif__kop { display: none; }
  .schuif__rij { grid-template-columns: 1fr; }
  .schuif__lijn { height: 2.4rem; }
  .schuif__streep { display: none; }
  .schuif__lijn svg { justify-self: center; rotate: 90deg; }
}

/* -------------------------------------------- het beeldmerk als vorm ----- */
/* Groot, monochroom, in de tekstkleur van de band en op lage dekking: vlak,
   streep, vlak in de verhouding van het logo. Bouwt op als hij in beeld komt
   en schuift daarna heel traag. Tekst erover houdt zijn contrast: de vorm
   haalt op wit hooguit 5% donkergroen. */
.merkvorm {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: 373fr 51fr 373fr;
  aspect-ratio: 797 / 485;
  --mv-op: .05;
}
.merkvorm span { background: currentColor; transform-origin: 50% 100%; transition: transform 1.3s var(--ease); }
.merkvorm span:nth-child(1) { opacity: var(--mv-op); }
.merkvorm span:nth-child(2) { opacity: calc(var(--mv-op) * .45); transition-delay: .15s; }
.merkvorm span:nth-child(3) { opacity: calc(var(--mv-op) * .65); transition-delay: .3s; }
.merkvorm.rv { opacity: 1; transform: none; transition: none; }
.merkvorm.rv:not(.is-in) span { transform: scaleY(0); }
.merkvorm.is-in { animation: merkdrift 24s ease-in-out 1.6s infinite alternate; }
@keyframes merkdrift { to { transform: translate3d(2%, -3%, 0); } }

/* In de hero groot rechtsboven, deels achter het beeld: je ziet de vorm
   boven en naast de foto uitsteken. Op wit in merkkleur in plaats van
   grijs: limegroen vlak, donkerder streep, verloop naar wit. Grijs las als
   een losse lege kader. */
.merkvorm--hero {
  width: clamp(420px, 52vw, 860px);
  right: -9vw;
  top: -14%;
}
.merkvorm--hero span:nth-child(1) { background: var(--mist); opacity: .42; }
.merkvorm--hero span:nth-child(2) { background: var(--sage); opacity: .16; }
.merkvorm--hero span:nth-child(3) { background: linear-gradient(90deg, var(--mist), transparent 85%); opacity: .42; }
.merkvorm--cta {
  width: clamp(260px, 32vw, 500px);
  right: -4vw;
  top: 50%;
  translate: 0 -50%;
  --mv-op: .08;
}
@media (max-width: 899px) {
  .merkvorm--hero { width: 80vw; right: -45vw; top: -2%; }
  .merkvorm--cta { width: 70vw; right: -25vw; }
}

/* Achter elk beeld met .shaped: het beeldmerk in kleur, schuin onder het
   beeld uit stekend. Vervangt het rechte mistvlak. */
.shaped::before,
.band--sage .shaped::before {
  inset: auto auto -8% -7%;
  width: 58%;
  height: auto;
  aspect-ratio: 797 / 485;
  border-radius: 0;
  opacity: 1;
  animation: none;
  background:
    linear-gradient(90deg, var(--navy) 0 46.8%, var(--mist) 46.8% 53.2%, transparent 53.2%),
    var(--merk-verloop) 100% 0 / 46.8% 100% no-repeat;
  clip-path: inset(0);
  transition: clip-path 1.1s var(--ease) .3s;
}
.shaped.rv:not(.is-in)::before { clip-path: inset(100% 0 0 0); }
@media (max-width: 899px) {
  .shaped::before, .band--sage .shaped::before { left: -3%; bottom: -5%; }
}

/* ------------------------------------------------------------- beweging -- */
/* Het accentwoord in een kop krijgt een limestreep die onder het woord
   doorloopt zodra de kop in beeld komt. */
.em {
  --em-streep: var(--mist);
  background-image: linear-gradient(var(--em-streep), var(--em-streep));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% .26em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .9s var(--ease) .35s;
}
.rv:not(.is-in) .em { background-size: 0% .26em; }
.band--mist .em { --em-streep: color-mix(in srgb, var(--navy) 14%, transparent); }
.band--sage .em, .band--navy .em, .band--deep .em { --em-streep: color-mix(in srgb, var(--mist) 26%, transparent); }

/* Treden, regels in de verschuiving en agendaregels komen na elkaar binnen
   (scout.js zet --i). 'translate' in plaats van 'transform', zodat een
   hover-beweging niet op deze vertraging hoeft te wachten. */
.rv :is(.trede, .schuif__rij, .agenda__rij) {
  transition: opacity .6s var(--ease) calc(min(var(--i, 0), 8) * 70ms + .1s),
              translate .6s var(--ease) calc(min(var(--i, 0), 8) * 70ms + .1s),
              transform .3s var(--ease), box-shadow .3s var(--ease),
              background-color .25s var(--ease);
}
.rv:not(.is-in) :is(.trede, .schuif__rij, .agenda__rij) { opacity: 0; translate: 0 16px; }
.trede:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -24px color-mix(in srgb, var(--navy) 60%, transparent); }

/* De lijnen in de ERP-motieven lopen voortaan altijd (was alleen met
   .deco--live): als een playhead door een planning. */
.deco .run { stroke-dasharray: 9 13; animation: deco-loop 26s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .merkvorm span, .merkvorm.rv:not(.is-in) span { transform: none; transition: none; }
  .merkvorm.is-in { animation: none; }
  .shaped::before, .shaped.rv:not(.is-in)::before { clip-path: none; transition: none; }
  .em, .rv:not(.is-in) .em { background-size: 100% .26em; transition: none; }
  .rv--treden .trede__plaat, .rv--treden:not(.is-in) .trede__plaat { clip-path: none; transition: none; }
  .rv :is(.trede, .schuif__rij, .agenda__rij), .rv:not(.is-in) :is(.trede, .schuif__rij, .agenda__rij) { opacity: 1; translate: none; transition: none; }
  .schuif__streep, .schuif__lijn svg { transition: none; }
  .agenda__rij.is-terug { animation: none; }
  .deco .run { animation: none; }
  .trede:hover { transform: none; }
}
@media print { .merkvorm { display: none; } }
/* De hero is geen .section, dus de regel die de inhoud boven de achtergrond
   tilt (scout.css: .section .wrap) gold hier niet. */
.hero > .wrap { position: relative; z-index: 1; }

/* ======================================================= feedbackronde 5 =
   22-10-2026, tweede ronde van de dag:
   - de drie trainingen staan nog maar op één manier op de site (de trap);
     prijskaarten en vergelijkingstabel zijn samengevoegd;
   - de kerncijfers zijn uit de hero en staan als het uitgerekte beeldmerk;
   - Dragan met foto, functie en directe lijnen in het contactblok;
   - één vast tekst- en ritmesysteem (zie onder "systeem").
   ========================================================================= */

.mt-3 { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }

/* --------------------------------------------- trap: label + donkere band - */
.trede__label { margin: 0 0 .1rem; max-width: none; font-size: var(--fs-small); font-weight: 600; opacity: .88; }
/* Op de donkere band: het verloopvlak begint in de bandkleur; een dunne
   limerand houdt de bovenkant van de hoogste trede zichtbaar. */
.band--navy .trede--3 .trede__plaat,
.band--deep .trede--3 .trede__plaat { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mist) 32%, transparent); }
.band--navy .trede__body, .band--deep .trede__body, .band--sage .trede__body { border-color: transparent; }
.band--navy .trede .checks svg, .band--deep .trede .checks svg,
.band--sage .trede .checks svg { color: var(--sage); }

/* ------------------------------------------------- kerncijfers als merk --- */
/* Drie vlakken naast elkaar met de limestreep ertussen: het logo uitgerekt
   (donker vlak | streep | vlak | streep | verloopvlak). */
.cijfers { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cijfers { grid-template-columns: repeat(3, 1fr); } }
.cijfer {
  --pad: clamp(1.4rem, 2.6vw, 2.1rem);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: var(--pad);
  color: var(--creme);
}
.cijfer--1 { background: var(--navy); }
.cijfer--2 { background: var(--sage); }
.cijfer--3 { background: var(--merk-verloop); }
.cijfer + .cijfer::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: var(--mist);
}
.cijfer + .cijfer { padding-left: calc(var(--pad) + 8px); }
@media (max-width: 759px) {
  .cijfer + .cijfer::before { right: 0; bottom: auto; width: auto; height: 8px; }
  .cijfer + .cijfer { padding-left: var(--pad); padding-top: calc(var(--pad) + 8px); }
}
.cijfer .cijfer__num {
  font-family: var(--ff-display);
  font-size: clamp(2.25rem, 1.85rem + 1.7vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  color: var(--mist);
}
.cijfer .cijfer__lbl { margin: 0; max-width: 34ch; font-size: var(--fs-ui); line-height: 1.5; color: inherit; }
/* Opbouw: de vlakken groeien na elkaar omhoog. */
.cijfers.rv:not(.is-in) { opacity: 1; transform: none; }
.cijfers .cijfer { clip-path: inset(0); transition: clip-path .9s var(--ease) calc(var(--i, 0) * .15s); }
.cijfers.rv:not(.is-in) .cijfer { clip-path: inset(100% 0 0 0); }

/* ------------------------------------------- contactblok: Dragan erbij ---- */
.contact__intro { display: flex; flex-direction: column; }
.contact__intro > p:last-of-type { margin-bottom: 2rem; }
.contact__persoon {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--creme) 18%, transparent);
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.contact__foto { position: relative; flex: none; width: 96px; height: 96px; overflow: hidden; background: var(--sage); }
.contact__foto img { width: 100%; height: 100%; object-fit: cover; }
.contact__foto::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--mist); }
.contact__wie { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.contact__wie strong { font-size: var(--fs-h4); line-height: 1.3; color: var(--creme); }
.contact__rol { font-size: var(--fs-small); color: color-mix(in srgb, var(--creme) 82%, transparent); }
.contact__lijnen { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin-top: .4rem; }
.contact__lijnen a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--mist);
  text-decoration: none;
}
.contact__lijnen a:hover { text-decoration: underline; }
.contact__lijnen svg { width: 15px; height: 15px; flex: none; }
.contact__uren { font-size: var(--fs-small); color: color-mix(in srgb, var(--creme) 72%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .cijfers .cijfer, .cijfers.rv:not(.is-in) .cijfer { clip-path: none; transition: none; }
}

/* ======================================================= ronde 5: systeem =
   Eén systeem voor alle tekst die geen alinea en geen kop is, en één ritme
   voor de witruimte tussen label, kop en tekst. Gemeten over alle 25
   pagina's: er stonden 13, 14 en 16 px door elkaar, in vier gewichten, met
   vijf tot zeven verschillende dekkingen, en kopmarges in em die op mobiel
   kromp. Wat hieronder staat wint van alle eerdere regels in scout.css en
   erp.css (zelfde of hogere specificiteit, en dit bestand laadt als laatste).
   ========================================================================= */

:root {
  /* Twee vaste UI-maten, op elke schermbreedte gelijk. */
  --fs-ui:     .875rem;    /* 14 px: al het andere */
  --fs-small:  .8125rem;   /* 13 px: alleen labels en meta */
  --fs-kicker: var(--fs-small);
  --fs-getal:  var(--fs-h2);
  --lh-ui:     1.45;
  --lh-ctrl:   1.2;
  /* Eén zachte tekstkleur in plaats van losse opacity's. */
  --zacht: color-mix(in srgb, currentColor 74%, transparent);

  /* Ritme in rem: gelijk op 375 en 1440 px, niet afhankelijk van de kopmaat. */
  --r-label:      .85rem;   /* label boven een kop -> kop          13,6 px */
  --r-kop:        1.1rem;   /* h1/h2 -> eerste tekst                17,6 px */
  --r-kop-klein:  .625rem;  /* h3/h4/kaarttitel -> tekst            10 px   */
  --r-tekst:      1rem;     /* p -> p, tekst <-> lijst              16 px   */
  --r-tussenkop:  2rem;     /* tekst -> volgende tussenkop          32 px   */
  --r-knoppen:    1.75rem;  /* tekst -> knoppenrij                  28 px   */
  --r-intro:      2.5rem;   /* sectie-intro -> inhoud               40 px   */
}

/* ------------------------------------------------------- witruimte ------- */
.kicker, .pcta .kicker, .contact__intro .kicker { margin: 0 0 var(--r-label); }
h1, h2, .display, h1.display { margin: 0 0 var(--r-kop); }
h3, h4 { margin: 0 0 var(--r-kop-klein); }
p { margin: 0 0 var(--r-tekst); }
p:last-child { margin-bottom: 0; }
.checks, .tag-list { margin: 0 0 var(--r-tekst); }
.checks:last-child, .tag-list:last-child { margin-bottom: 0; }
:is(p:not(.kicker), .lead, ul, ol, .checks, .tag-list, .invul) + :is(h2, h3, h4) { margin-top: var(--r-tussenkop); }
/* Het label hoort bij de kop eronder: daar nooit tussenkopruimte. */
.kicker + :is(h1, h2, h3, h4, .display) { margin-top: 0; }
.blog h2, .blog h3, .juridisch h2, .juridisch h3, .prose h2, .prose h3 { margin-top: var(--r-tussenkop); }
:is(.blog, .juridisch, .prose) > :is(h2, h3):first-child { margin-top: 0; }
.intro { margin-bottom: var(--r-intro); }
.cta-row.mt-2, p + .cta-row, .checks + .cta-row { margin-top: var(--r-knoppen); }
/* De CTA-band: scout.css zette alle p's daar op 0 (ook het label, dat
   daardoor de kop raakte) en de kop kreeg maar .35rem ruimte. */
.pcta h2, .pcta--breed h2 { font-size: var(--fs-h2); margin-bottom: var(--r-kop); }
.pcta--breed { row-gap: var(--r-knoppen); }
.footer__kop { margin: 0 0 var(--r-kop-klein); }
/* Kaarttitels: overal dezelfde afstand tot de tekst. */
.dcard h3, .post h3, .cl__fase h3 { margin: 0 0 var(--r-kop-klein); }
.dcard--link { gap: 0; }
.post__meta, .ikaart__icon, .cl__nr { margin: 0 0 var(--r-label); }

/* ------------------------------------------------------ lettermaten ------ */
/* A. Tekst in componenten: 14 px, normaal gewicht. */
.footer__list a, .footer__list li, .site-footer p, .footer__bar, .footer__bar a,
.checks li, .agenda__soort, .agenda__note, .agenda__geen, .agenda__leeg p,
.trainer__wie > span:not(.trainer__contact), .schuif__van, .trede__voor,
.dcard p, .post p, .invul li, .contact__intro .klein, .mobile-nav__contact,
.cijfer .cijfer__lbl, .tabel, .sessie-feiten strong {
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
}
.checks li, .pkaart .checks li, .cl__groep .checks li, .trede .checks li { font-weight: 400; font-size: var(--fs-ui); line-height: var(--lh-ui); }

/* B. Alles wat je aanklikt: 14 px vet. */
.btn, .nav a, .nav__panel a, .agenda__go, .dcard__go, .post__go, .link-arw, .tabs__btn,
.filter__chip, .tag-list li, .agenda__datum, .schuif__naar, .trainer__contact a,
.contact__lijnen a {
  font-size: var(--fs-ui);
  font-weight: 700;
}
.filter__chip, .tag-list li { line-height: var(--lh-ctrl); }

/* C. Labels boven iets en badges: 13 px vet. */
.kicker, .filter__label, .filter__teller, .trede__kop, .trede__label, .cl__groep h4,
.invul__kop, .logos__head, .agenda__status, .schuif__label, .post .post__meta,
.dcard .dcard__sub, .fluentform.ff-default .ff-el-input--label label, .agenda__mnd {
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

/* D. Meta direct bij een waarde: 13 px normaal. */
.agenda__meta, .agenda__feit, .trede__feiten, .trede__prijs small, .stat__lbl,
.klein, .contact__rol, .contact__uren, .sessie-feiten span, .footer__bar {
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: var(--lh-ui);
}
/* In de footer staat alles behalve de koppen op één maat (14 px). */
.site-footer .klein, .site-footer .footer__bar, .site-footer .footer__bar a { font-size: var(--fs-ui); }

/* E. Titels van een component: bodymaat, Sora vet. */
.footer__kop, .trainer__wie strong, .contact__wie strong, .agenda__kop, .formslot strong {
  font-family: var(--ff-body);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.35;
}

/* F. Getallen: één maat, Lora 600. */
.stat__num, .cijfer .cijfer__num, .trede__prijs, .cl__nr, .pkaart__prijs {
  font-family: var(--ff-display);
  font-size: var(--fs-getal);
  font-weight: 600;
  line-height: 1;
}

/* FAQ: de vraag in Lora op leadmaat, het antwoord is gewone lopende tekst. */
.acc__q { font-family: var(--ff-display); font-size: var(--fs-lead); font-weight: 600; line-height: 1.4; }
.acc__a p { font-size: var(--fs-body); opacity: 1; }
.mobile-nav__links > a, .mobile-nav__links li > a { font-weight: 600; }

/* Zachte tekst: één kleur in plaats van .595/.7/.8/.85/.88/.9. */
/* De zachte kleur op de container; links erven hem. Anders mengt een link
   in een zachte li nog een keer en wordt hij lichter dan de tekst ernaast. */
.footer__list li, .footer__bar, .site-footer .muted { opacity: 1; color: var(--zacht); }
.footer__list a, .footer__bar a { opacity: 1; color: inherit; }
.footer__list a:hover, .footer__bar a:hover { color: var(--creme); }
.trede__label, .trede__prijs small, .contact__rol, .contact__uren { opacity: 1; }

/* -------------------------------------------- de trap: echt een trap ---- */
/* Geen drie even hoge witte kolommen meer (dat las als prijstabel): de hele
   trede staat een stap hoger dan de vorige, de tekst staat zonder kader op
   de band. */
.treden { align-items: start; }
@media (min-width: 900px) {
  .trede__plaat { min-height: 10rem; margin-top: 0; }
  .trede { margin-top: calc((3 - var(--n)) * var(--stap) * 1.6); }
}
.trede { color: inherit; }
.trede__body { background: none; border: 0; padding: 1.35rem 0 0 calc(8px + .1rem); gap: .8rem; }
.trede__body > * { margin: 0; }
.trede__feiten, .trede__noot { color: var(--zacht); }
.trede__feiten svg { color: currentColor; }
.trede__kop { color: var(--sage); padding-top: .9rem; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.band--navy .trede__kop, .band--deep .trede__kop, .band--sage .trede__kop { color: var(--mist); }
.band--navy .trede .checks svg, .band--deep .trede .checks svg, .band--sage .trede .checks svg { color: var(--mist); }
/* Knoppen op een donkere band: licht vlak, anders valt de donkere knop weg. */
.band--navy .trede .btn, .band--deep .trede .btn { --bg: var(--mist); --fg: var(--navy); --bd: var(--mist); }
.band--navy .trede .btn:hover, .band--deep .trede .btn:hover { --bg: var(--creme); --fg: var(--navy); --bd: var(--creme); }
.trede__plaat { gap: 0; }
.trede__naam { margin: 0 0 var(--r-kop-klein); }
.trede:hover { transform: none; box-shadow: none; }

/* -------------------------------------- verschuiving als losse kaarten --- */
.schuif { max-width: none; }
.schuif__kop { display: none; }
.schuif__rijen {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.schuif__rij { display: flex; flex-direction: column; }
.schuif__van {
  flex: 1;
  display: block;
  padding: 1rem 1.1rem;
  border: 1px dashed color-mix(in srgb, currentColor 50%, transparent);
}
.schuif__naar {
  display: block;
  padding: 1rem 1.1rem 1.05rem calc(1.1rem + 8px);
}
.schuif__label { display: block; margin-bottom: .35rem; color: var(--zacht); }
.schuif__naar .schuif__label { color: var(--mist); }
.band--navy .schuif__naar .schuif__label, .band--deep .schuif__naar .schuif__label { color: var(--sage); }
.schuif__lijn { display: grid; place-items: center; height: 2.6rem; }
.schuif__lijn svg { justify-self: center; width: 20px; height: 20px; rotate: 90deg; }
.rv:not(.is-in) .schuif__lijn svg { transform: translateY(-10px); }

/* ---------------------------------------- agenda als kalenderkaarten ----- */
.agenda { border: 0; border-radius: 0; background: none; overflow: visible; }
.band--mist .agenda, .band--tan .agenda { background: none; }
.agenda__kop { margin: 0 0 1rem; padding: 0; background: none; color: inherit; }
.agenda__filter { padding: 0 0 1.4rem; border: 0; background: none; }
.agenda__rijen {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}
.agenda__rij,
.agenda__rij + .agenda__rij {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "tegel hoofd" "tegel meta" "rechts rechts";
  gap: .3rem 1rem;
  align-items: start;
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--navy) 14%, transparent);
  background: var(--white);
  color: var(--navy);
  transition: border-color .25s var(--ease), translate .25s var(--ease), box-shadow .25s var(--ease);
}
.agenda__rij::before { display: none; }
.agenda__rij:hover {
  background: var(--white);
  border-color: var(--navy);
  translate: 0 -3px;
  box-shadow: 0 14px 28px -22px color-mix(in srgb, var(--navy) 70%, transparent);
}
.agenda__tegel {
  grid-area: tegel;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 4.6rem;
  min-height: 4.6rem;
  padding: .5rem .55rem .5rem calc(.55rem + 6px);
  background: var(--navy);
  color: var(--creme);
  text-align: center;
}
.agenda__tegel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--mist); }
.agenda__dag { font-family: var(--ff-display); font-size: 1.45rem; font-weight: 600; line-height: 1; color: var(--mist); white-space: nowrap; }
.agenda__mnd { margin-top: .3rem; color: var(--creme); }
.agenda__hoofd { grid-area: hoofd; display: flex; flex-direction: column; gap: .1rem; }
.agenda__soort { color: var(--zacht); }
.agenda__meta { grid-area: meta; color: var(--zacht); gap: .15rem .9rem; }
.agenda__feit + .agenda__feit { margin-left: 0; }
.agenda__feit svg { color: var(--sage); }
.agenda__rechts,
.agenda__rij .agenda__rechts {
  grid-area: rechts;
  grid-column: 1 / -1;
  grid-row: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-top: .55rem;
  padding-top: .75rem;
  border-top: 1px solid color-mix(in srgb, var(--navy) 10%, transparent);
}
.agenda__note, .agenda__geen { padding: 1.2rem 0 0; border: 0; color: var(--zacht); }

/* ------------------------------------------- het merk op donkere banden -- */
.merkvorm--band { width: clamp(300px, 40vw, 640px); right: -6vw; bottom: -16%; --mv-op: .07; }
@media (max-width: 899px) { .merkvorm--band { width: 80vw; right: -35vw; bottom: -6%; } }

@media (prefers-reduced-motion: reduce) {
  .agenda__rij:hover { translate: none; }
  .rv:not(.is-in) .schuif__lijn svg { transform: none; }
}

/* ============================================ ronde 5: na de controle =====
   Gevonden met een meting over alle 25 pagina's op 375 en 1440 px.
   ========================================================================= */

/* Het filter verborg de kaarten niet: de kaartregel hierboven (display:grid,
   zelfde specificiteit, later in het bestand) won van [hidden]. */
.agenda__rij[hidden], .agenda__rij + .agenda__rij[hidden] { display: none; }

/* figure kreeg de browsermarge (1em 40px): foto's sprongen in. */
figure { margin: 0; }

/* ------------------------------------------------------------ merkvormen - */
/* Een hero zonder foto: geen vorm (hij oogde als een leeg fotovak). */
.hero:not(:has(.hero__grid--split)) .merkvorm--hero { display: none; }
@media (max-width: 899px) {
  /* Op mobiel staat de foto onder de tekst; de vorm hoort daarachter. */
  .merkvorm--hero { width: 86vw; right: -28vw; top: auto; bottom: -4%; }
  .merkvorm--cta, .merkvorm--band { display: none; }
}
.merkvorm--band { width: clamp(260px, 26vw, 420px); right: -9vw; bottom: -24%; }
.merkvorm--cta { width: clamp(220px, 24vw, 380px); right: -7vw; top: 0; bottom: 0; translate: none; aspect-ratio: auto; }

/* ------------------------------------------------------------- lettertjes - */
.agenda__dag { font-size: 1.5rem; }
.filter__select select { font-size: var(--fs-ui); font-weight: 700; }
@media (pointer: coarse) { .filter__select select { font-size: 1rem; } }
/* Kaarttitels: één maat en één gewicht, gelijk aan de andere tussenkoppen. */
.dcard h3, .post h3, .trede__naam { font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-h3); max-width: 24ch; }
.mobile-nav__sub a, .mobile-nav__links .sub-menu a { font-size: var(--fs-ui); font-weight: 700; opacity: 1; color: var(--zacht); }
.contact__rol, .contact__uren { color: var(--zacht); }
.tabs__btn { opacity: 1; color: var(--zacht); }
.tabs__btn[aria-selected="true"] { color: inherit; }
/* Componenttitels vast op 16 px (de vloeiende h4-maat gaf 15 op mobiel). */
.footer__kop, .trainer__wie strong, .contact__wie strong, .agenda__kop, .formslot strong { font-size: 1rem; }

/* --------------------------------------------------- contactblok mobiel -- */
.contact__wie { gap: .3rem; }
.contact__lijnen { margin-top: .2rem; }
.contact__lijnen a { white-space: nowrap; }
.contact__intro > p:last-of-type { margin-bottom: var(--r-intro); }
@media (max-width: 480px) {
  .contact__persoon { flex-direction: column; align-items: flex-start; }
  .contact__foto { width: 80px; height: 80px; }
}

/* ------------------------------------------------------------------ trap - */
.trede__label { margin-bottom: var(--r-label); }
.trede__prijs { margin-top: 0; }
.trede__body { gap: var(--r-tekst); }
.trede__body > .btn { margin-top: calc(var(--r-knoppen) - var(--r-tekst)); }
.band--navy .trede--1 .trede__plaat, .band--deep .trede--1 .trede__plaat { --streep: var(--sage); }

/* ---------------------------------- verschuiving: één kaart per punt ------ */
/* Geen kolomkoppen en geen paren meer (dat las als vergelijkingsmatrix): per
   punt één merkvlak met onze aanpak als titel en het alternatief als zachte
   regel eronder. */
.schuif__rijen { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; align-items: stretch; }
.schuif__rij {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.15rem 1.2rem 1.2rem calc(1.2rem + 8px);
  background: var(--navy);
  color: var(--creme);
}
.schuif__rij::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--mist); }
.schuif__naar { padding: 0; background: none; color: inherit; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.schuif__naar::before { display: none; }
.schuif__van {
  flex: none;
  margin-top: auto;
  padding: .7rem 0 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-size: var(--fs-small);
  line-height: var(--lh-ui);
  color: var(--zacht);
}
.schuif__van .schuif__label { display: inline; margin: 0; color: inherit; font-weight: 700; }
.band--navy .schuif__rij, .band--deep .schuif__rij { background: var(--white); color: var(--navy); }
.band--navy .schuif__rij::before, .band--deep .schuif__rij::before { background: var(--sage); }

/* -------------------------------------------------------------- witruimte - */
.invul { margin: 0 0 var(--r-tekst); }
.invul__kop { margin-bottom: var(--r-label); }
:is(.blog, .juridisch, .prose) h2 + h3 { margin-top: 0; }
.cl__fase h3 + .cl__groep { margin-top: 0; }
.cl__groep + .cl__groep { margin-top: var(--r-tussenkop); }
.cl__groep h4 { margin-bottom: var(--r-kop-klein); }
:is(h2, p, .lead) + .acc { margin-top: var(--r-knoppen); }
.agenda__kop { margin-bottom: var(--r-kop-klein); }
.agenda__note, .agenda__geen { padding-top: var(--r-tekst); }
.filter__groep { gap: var(--r-kop-klein); }
.logos__head { margin-bottom: var(--r-label); padding-inline: var(--gut); }
.dcard p { margin-bottom: var(--r-tekst); }
p + .link-arw { margin-top: calc(var(--r-knoppen) - var(--r-tekst)); }
.sessie-feiten { margin-top: var(--r-tekst); }
.mt-3 { margin-top: clamp(3rem, 6vw, 4.5rem); }
.shaped::before, .band--sage .shaped::before { bottom: -6%; }

/* ----------------------------------------------------- agenda: 2 kolommen - */
.agenda__rijen { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.agenda__meta { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; }

/* --------------------------------------------------------- kaarten -------- */
.posts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.post__meta { flex-wrap: wrap; }
.post__tag { white-space: nowrap; border-radius: 0; }
.dcard, .post, .trainer, .formslot, .agenda__status { border-radius: 0; }
.dcard { justify-content: flex-start; min-height: 200px; }
.dcard .dcard__go { margin-top: auto; }
@media (max-width: 759px) { .dcard { min-height: 0; } }
/* De merkstreep op de kaart links en in een kleur die je ziet. */
.cards3 .dcard::before { left: 0; right: auto; background: var(--mist); }
.cards3 .dcard:nth-child(2)::before, .cards3 .dcard:nth-child(3)::before { background: var(--navy); }
.band--mist .em { --em-streep: color-mix(in srgb, var(--sage) 40%, transparent); }
/* Op een smal scherm passen twee feitenkolommen niet naast de datumtegel. */
@media (max-width: 520px) { .agenda__meta { grid-template-columns: minmax(0, 1fr); } }

/* ======================================== ronde 5: na de hercontrole =====
   Wat de tweede meting nog vond, deels ontstaan door de eerste correcties.
   ========================================================================= */

/* Labels (ook in kaarten) staan altijd vlak boven hun kop. */
:is(.kicker, .post__meta, .cl__nr, .trede__label, .invul__kop) + :is(h1, h2, h3, h4, .display) { margin-top: 0; }

/* Merkvormen alleen in de marge naast de inhoud, nooit achter tekst of
   knoppen. De rechterrand van de inhoud is 50% + de halve wrapbreedte min
   de goot; de vorm begint 1,5rem daarna. Op een smal scherm valt hij dus
   grotendeels buiten beeld, en dat is de bedoeling. */
.merkvorm--cta,
.merkvorm--band {
  left: calc(50% + min(50%, var(--maxw) / 2) - var(--gut) + 1.5rem);
  right: auto;
  width: 380px;
}
.merkvorm--cta { top: 0; bottom: 0; translate: none; aspect-ratio: auto; }
.merkvorm--band { top: auto; bottom: 0; aspect-ratio: 797 / 485; translate: 0 35%; }
@media (max-width: 899px) {
  .merkvorm--hero { display: none; }
}

/* Trap op mobiel: de treden duidelijk verder uit elkaar dan wat erin staat. */
@media (max-width: 899px) { .treden { row-gap: var(--r-intro); } }

/* Eén hoekafspraak: recht, zoals het beeldmerk. */
.contact, .media, .media--kader, .post .media { border-radius: 0; }
.contact__form { background: var(--mist-soft); }

/* Filter: select en knoppen even hoog. */
.filter__select select { padding-top: .5rem; padding-bottom: .5rem; }

/* De functie onder een naam als eigen regel met de UI-regelafstand. */
.trainer__wie > span:not(.trainer__contact) { display: block; line-height: var(--lh-ui); }

/* Verschuivingskaarten: titel als kaarttitel, lijnen in een rij gelijk. */
.schuif__naar { font-family: var(--ff-display); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-h3); min-height: calc(2em * 1.26); }
.schuif__van { margin-top: 0; }

/* Teamkaarten: ruimte tussen foto en naam (de browsermarge van figure gaf die). */
.dcard > .media { margin: 0 0 var(--r-tekst); }

/* Kaarten: de klant/datum altijd op een eigen regel, dan lopen de titels gelijk. */
.post__meta .post__date { flex-basis: 100%; }
.posts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.posts:has(> :nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* Tabs op de mintband: actieve streep zichtbaar, op mobiel één scrollende rij. */
.band--mist .tabs__list { border-color: var(--line); }
.band--mist .tabs__btn[aria-selected="true"] { border-bottom-color: var(--sage); }
@media (max-width: 600px) { .tabs__list { flex-wrap: nowrap; overflow-x: auto; } .tabs__btn { white-space: nowrap; } }

/* Een tekstkolom naast een kaart met Dragan: bovenaan uitlijnen. */
.row--text-wide:has(.trainer) { align-items: start; }

/* Witruimte aan de onderkant van een sectie en een hero. */
.intro:last-child { margin-bottom: 0; }
.hero .rv > :last-child { margin-bottom: 0; }

/* Overig */
.nobr { white-space: nowrap; }
.formslot:not(.formslot__wp) { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.logo-item--img { opacity: .75; }
/* Het dagnummer in de datumtegel is een bewuste uitzondering op het
   getallentoken: 34 px past niet in de tegel. */
:root { --fs-tegel: 1.5rem; }
.agenda__dag { font-size: var(--fs-tegel); }

/* ======================================================= feedbackronde 6 =
   22-10-2026, avond. De klant leverde de herofoto voor de homepage aan
   (liggend, 4:3), wil de ERP-verbindingen terug in de achtergronden naast
   het beeldmerk, creatievere beweging (grafieken, cijfers, verbindingen) en
   nergens liggende streepjes als leesteken in de teksten.
   ========================================================================= */
.media--liggend { aspect-ratio: 4 / 3; }
.media--liggend img { object-position: 35% 50%; }

/* Een datapakketje over een pad met pathLength="100": een streepje van 5
   dat van het begin naar het eind van de verbinding loopt. */
@keyframes pakket { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* -------------------------------------- ERP-verbindingen als illustratie -- */
.row--netwerk { align-items: center; }
@media (min-width: 900px) { .row--netwerk { grid-template-columns: 1fr 1fr; } }
.netwerk { margin: 0; color: var(--mist); }
.netwerk svg { display: block; width: 100%; max-width: 540px; height: auto; margin-inline: auto; overflow: visible; }
.netwerk .lijn {
  fill: none;
  stroke: currentColor;
  stroke-opacity: .55;
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s var(--ease) calc(var(--i, 0) * .12s + .3s);
}
.netwerk.rv:not(.is-in) .lijn { stroke-dashoffset: 100; }
.netwerk.rv:not(.is-in) { opacity: 1; transform: none; }
.netwerk .pakket {
  fill: none;
  stroke: var(--mist);
  stroke-width: 5;
  stroke-dasharray: 5 95;
  animation: pakket var(--d, 5s) linear var(--w, 0s) infinite;
}
.netwerk .pakket.terug { animation-direction: reverse; }
.netwerk .knoop > rect:first-child,
.netwerk .kern > rect:first-child {
  fill: color-mix(in srgb, var(--navy) 62%, transparent);
  stroke: color-mix(in srgb, var(--mist) 45%, transparent);
  stroke-width: 1;
}
.netwerk .kern > rect:first-child { fill: var(--navy); animation: kern 3s ease-in-out infinite; }
.netwerk .knoop__streep { fill: var(--mist); }
.netwerk text { fill: var(--creme); font-family: var(--ff-body); font-size: 13px; font-weight: 700; }
.netwerk .kern__naam { fill: var(--mist); font-family: var(--ff-display); font-size: 30px; font-weight: 600; }
.netwerk .knoop { animation: knoop 5s ease-in-out calc(var(--i, 0) * .6s) infinite; }
@keyframes knoop { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes kern { 0%, 100% { stroke-opacity: .35; } 50% { stroke-opacity: 1; } }
.netwerk .kern > rect:first-child { stroke: var(--mist); }
.netwerk .knoop, .netwerk .kern { transition: opacity .6s var(--ease) calc(var(--i, 0) * .08s); }
.netwerk.rv:not(.is-in) .knoop, .netwerk.rv:not(.is-in) .kern { opacity: 0; }
@media (max-width: 899px) { .netwerk svg { max-width: 420px; } }

/* -------------------------------- ERP-verbindingen als achtergrond ------- */
.deco .lijn { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-opacity: .9; }
.deco .knoop > rect:first-child, .deco .kern > rect:first-child {
  fill: currentColor; fill-opacity: .08; stroke: currentColor; stroke-opacity: .6; stroke-width: 1;
}
.deco .knoop__streep { fill: var(--deco-ac); }
.deco svg .pakket {
  vector-effect: none;
  fill: none;
  stroke: var(--deco-ac);
  stroke-width: 4;
  stroke-dasharray: 5 95;
  animation: pakket var(--d, 5s) linear var(--w, 0s) infinite;
}
.deco svg .pakket.terug { animation-direction: reverse; }
.band--navy .deco:has(.pakket), .band--deep .deco:has(.pakket) { --deco-op: .24; }
/* Ook de andere motieven bewegen: lijnen in de KPI-tegels tekenen zich steeds
   opnieuw, staven ademen. */
.deco .v rect { transform-box: fill-box; transform-origin: 50% 100%; }
.deco--rechts .v rect:nth-child(3n) { animation: adem 6s ease-in-out infinite alternate; }
@keyframes adem { to { transform: scaleY(.8); } }

/* ------------------------------------- kleine grafieken in de cijfers ---- */
.cijfer { overflow: hidden; }
.cijfer__grafiek {
  position: absolute;
  right: var(--pad);
  top: var(--pad);
  width: 118px;
  height: 59px;
  color: var(--mist);
  opacity: .6;
  pointer-events: none;
}
.cg__lijn { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) .5s; }
.cijfers.rv:not(.is-in) .cg__lijn { stroke-dashoffset: 100; }
.cg__punt { fill: currentColor; transform-box: fill-box; transform-origin: center; animation: puls 2.4s ease-in-out infinite; }
@keyframes puls { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .45; } }
.cg__staaf { fill: currentColor; transform-box: fill-box; transform-origin: 50% 100%; animation: staaf 3.2s ease-in-out calc(var(--i, 0) * .3s) infinite alternate; }
.cijfers.rv:not(.is-in) .cg__staaf { animation: none; transform: scaleY(0); }
@keyframes staaf { from { transform: scaleY(1); } to { transform: scaleY(.62); } }
.cg__net { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-opacity: .75; }
.cg__knoop { fill: currentColor; }
.cg__pakket { fill: none; stroke: var(--creme); stroke-width: 4; stroke-dasharray: 8 92; animation: pakket 3.5s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .netwerk .pakket, .deco svg .pakket, .cg__pakket { animation: none; stroke-dasharray: none; stroke-opacity: 0; }
  .netwerk .knoop, .netwerk .kern > rect:first-child, .cg__punt, .cg__staaf, .deco--rechts .v rect:nth-child(3n) { animation: none; }
  .netwerk .lijn, .netwerk.rv:not(.is-in) .lijn { stroke-dashoffset: 0; transition: none; }
  .netwerk.rv:not(.is-in) .knoop, .netwerk.rv:not(.is-in) .kern { opacity: 1; }
  .cg__lijn, .cijfers.rv:not(.is-in) .cg__lijn { stroke-dashoffset: 0; transition: none; }
  .cijfers.rv:not(.is-in) .cg__staaf { transform: none; }
}

/* Netwerk als achtergrond: compact rechtsboven, vervaagt naar linksonder. */
.deco--netwerk {
  inset: 0 0 auto auto;
  width: min(42vw, 580px);
  height: auto;
  aspect-ratio: 560 / 400;
  -webkit-mask-image: linear-gradient(205deg, #000 30%, transparent 80%);
  mask-image: linear-gradient(205deg, #000 30%, transparent 80%);
}
.deco--netwerk svg { width: 100%; height: 100%; }
@media (max-width: 899px) { .deco--netwerk { width: 80vw; opacity: .5; } }

/* Mini-grafieken in de cijfers: in de regel van het getal, niet over de tekst. */
.cijfer__grafiek { width: 92px; height: 40px; opacity: .5; }

/* ---------------------------------------- ronde 6: na de eindcontrole ---- */
/* Op mobiel geen netwerk in de achtergrond: daar staan juist de kop en de
   intro rechtsboven. */
@media (max-width: 899px) { .deco--netwerk { display: none; } }
/* Op een dienstpagina staat rechts een tweede kolom; daar geen netwerk. */
.row--text-wide ~ .deco--netwerk, .section:has(.tag-list) .deco--netwerk { display: none; }


/* Netwerk: de pakketjes pas als de lijnen er staan. */
.netwerk .pakket { opacity: 1; transition: opacity .5s ease 2.2s; }
.netwerk.rv:not(.is-in) .pakket { opacity: 0; transition: none; }
@media (max-width: 600px) { .netwerk text { font-size: 16px; } .netwerk .kern__naam { font-size: 34px; } }

/* Mini-grafiek in de cijfers op mobiel binnen de regel van het getal. */
@media (max-width: 759px) { .cijfer__grafiek { width: 64px; height: 28px; } }

/* ======================================================= feedbackronde 7 =
   De klant: het planningkaartje uit de hero (animatie moet bij een tekst
   passen) en in de verschuiving per punt een animatie "van dit naar dat".
   Elke scène laat eerst de oude situatie zien (gedempt, klasse v) en slaat
   dan om naar de nieuwe (merkkleur, n, n2, n3 in stappen). Lus van 9 s; de
   kaarten lopen niet gelijk op (--i komt uit scout.js).
   ========================================================================= */
.sc {
  --t: 9s;
  --vertraging: calc(var(--i, 0) * -1.4s);
  --sc-v: color-mix(in srgb, currentColor 40%, transparent);
  --sc-n: var(--mist);
  --sc-b: color-mix(in srgb, currentColor 26%, transparent);
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  aspect-ratio: 240 / 100;
  margin: 0 0 .2rem;
  overflow: visible;
}
.band--navy .sc, .band--deep .sc { --sc-n: var(--sage); }
.sc * { fill: none; stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; }
.sc .b { stroke: var(--sc-b); }
.sc .b.f { fill: var(--sc-b); stroke: none; }
.sc .v { stroke: var(--sc-v); color: var(--sc-v); animation: sc-uit var(--t) var(--ease) var(--vertraging) infinite; }
.sc .n, .sc .n2, .sc .n3 { stroke: var(--sc-n); color: var(--sc-n); }
.sc .n  { animation: sc-in  var(--t) var(--ease) var(--vertraging) infinite; }
.sc .n2 { animation: sc-in2 var(--t) var(--ease) var(--vertraging) infinite; }
.sc .n3 { animation: sc-in3 var(--t) var(--ease) var(--vertraging) infinite; }
.sc .f { fill: currentColor; stroke: none; }
.sc .sc__q { fill: currentColor; stroke: none; font: 700 15px var(--ff-body); }
@keyframes sc-uit { 0%, 40% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sc-in  { 0%, 44% { opacity: 0; } 54%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sc-in2 { 0%, 56% { opacity: 0; } 64%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sc-in3 { 0%, 66% { opacity: 0; } 74%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* Valkuilen: het bolletje rolt eerst de kuil in, daarna loopt het de route om de kuilen heen. */
.sc .sc__val { fill: var(--sc-v); stroke: none; animation: sc-val var(--t) linear var(--vertraging) infinite; }
@keyframes sc-val {
  0% { transform: translate(0, 0); opacity: 1; }
  26% { transform: translate(64px, 0); }
  34% { transform: translate(66px, 20px); opacity: 1; }
  40%, 100% { transform: translate(66px, 20px); opacity: 0; }
}
.sc .sc__route { stroke: var(--sc-n); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1 99; animation: sc-route var(--t) linear var(--vertraging) infinite; }
@keyframes sc-route {
  0%, 56% { stroke-dashoffset: 100; opacity: 0; }
  58% { stroke-dashoffset: 100; opacity: 1; }
  88% { stroke-dashoffset: 1; opacity: 1; }
  92%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
/* Balans: helt over naar één pakket, komt daarna recht. */
.sc .sc__balk { transform-box: view-box; transform-origin: 120px 52px; animation: sc-kantel var(--t) var(--ease) var(--vertraging) infinite; }
@keyframes sc-kantel { 0%, 40% { transform: rotate(-12deg); } 55%, 92% { transform: rotate(0); } 100% { transform: rotate(-12deg); } }
/* Boek -> praktijk: staven groeien na elkaar. */
.sc .sc__staaf { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-groei var(--t) var(--ease) calc(var(--vertraging) + var(--s, 0) * .1s) infinite; }
@keyframes sc-groei {
  0%, 46% { transform: scaleY(0); opacity: 0; }
  48% { opacity: 1; }
  60%, 92% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
/* Regie: het stuur gaat van de leverancier naar jou. */
.sc .sc__stuur { animation: sc-stuur var(--t) var(--ease) var(--vertraging) infinite; }
.sc .sc__stuur-blok { fill: var(--sc-n); }
@keyframes sc-stuur { 0%, 40% { transform: translate(0, 0); } 55%, 92% { transform: translate(120px, 0); } 100% { transform: translate(0, 0); } }
/* Sparren: er gaat heen en weer tussen de twee. */
.sc .sc__heen {
  stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1 99;
  animation: sc-in2 var(--t) var(--ease) var(--vertraging) infinite, sc-heen 2.4s linear infinite alternate;
}
@keyframes sc-heen { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 1; } }
/* Status: wiebelende staafjes worden één heldere balk. */
.sc .sc__twijfel { transform-box: fill-box; transform-origin: 0 50%; animation: sc-wiebel 1.1s ease-in-out calc(var(--s, 0) * .25s) infinite alternate; }
@keyframes sc-wiebel { from { transform: scaleX(.55); } to { transform: scaleX(1); } }
.sc .sc__vul, .sc .sc__lang { transform-box: fill-box; transform-origin: 0 50%; animation: sc-vul var(--t) var(--ease) var(--vertraging) infinite; }
@keyframes sc-vul {
  0%, 50% { transform: scaleX(0); opacity: 0; }
  52% { opacity: 1; }
  68%, 92% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
/* Gedeeld beeld: losse vakjes schuiven op één lijn. */
.sc .sc__samen { transform-box: view-box; animation: sc-samen var(--t) var(--ease) var(--vertraging) infinite; }
@keyframes sc-samen {
  0%, 40% { transform: translate(var(--dx), var(--dy)); fill: var(--sc-v); }
  56%, 92% { transform: translate(0, 0); fill: var(--sc-n); }
  100% { transform: translate(var(--dx), var(--dy)); fill: var(--sc-v); }
}
/* Doorrekenen: een meetlat veegt over de planning. */
.sc .sc__veeg { animation: sc-veeg var(--t) var(--ease) var(--vertraging) infinite; }
@keyframes sc-veeg {
  0%, 38% { transform: translateX(0); opacity: 0; }
  40% { opacity: 1; }
  54% { transform: translateX(200px); opacity: 1; }
  56%, 100% { transform: translateX(200px); opacity: 0; }
}

/* Alleen bewegen als de kaarten in beeld zijn. */
.rv:not(.is-in) .sc * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .sc * { animation: none !important; }
  .sc .v, .sc .sc__val, .sc .sc__route, .sc .sc__heen, .sc .sc__veeg { opacity: 0; }
  .sc .n, .sc .n2, .sc .n3, .sc .sc__staaf, .sc .sc__vul, .sc .sc__lang { opacity: 1; transform: none; }
  .sc .sc__balk { transform: none; }
  .sc .sc__stuur { transform: translate(120px, 0); }
  .sc .sc__samen { transform: none; fill: var(--sc-n); }
}

/* ======================================================= feedbackronde 8 =
   Vinklijsten in lopende tekst stonden op de componentmaat (14 px) terwijl de
   alinea's ernaast 16 px zijn (basis, advanced, over ons, checklists, training
   of coaching en de trainingsdetailpagina). Staat een lijst direct in een
   tekstkolom, dan krijgt hij dezelfde maat, regelhoogte en regelbreedte als
   de alinea's. In kaarten (trede, prijskaart, checklistgroep) blijft het
   14 px, net als de rest van de tekst in die kaarten.
   ========================================================================= */
.row > div > .checks > li,
.training-info ul > li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--mw-body);
}
.row > div > .checks svg { margin-top: calc(var(--lh-body) * .5em - 8.5px); }