/**
 * flows.css
 *
 * Gedeelde stijl voor pagina's met bewegende diagrammen: de homepage en de
 * methodepagina. Wordt geladen door datafy_use_flows() in inc/flows.php.
 *
 *   1. Kleuren en maten, gedeeld door alle pagina's
 *   2. Algemene diagramregels
 *   3. Diagrammen van de methodepagina (inc/methode-flows.php)
 *   4. Loop-diagram van de methodepagina
 *   5. Methodepagina: witruimte en kaarten
 *
 * De diagrammen van de homepage zelf staan in home-nieuw.css.
 * Alles is CSS. Wie beweging heeft uitgezet in zijn systeem, ziet de
 * diagrammen stil in de stand waarin ze leesbaar zijn.
 */

/* ─────────────────────────────────────────────────────────────
   1. KLEUREN EN MATEN
   Blauw is de hoofdkleur: randen van kaarten en diagrammen, lijnen, koppen
   en balken. Rood is het accent en komt alleen voor in de diagrammen:
     --hn-accent  de stippen die bewegen en de pijlpunten, en op de
                  methodepagina alles wat in de animatie oplicht: de
                  contactmomenten die de stip bereikt, de klantreis die aan
                  de beurt is, de omzetlijn, de puls van de koppeling en de
                  stap in de loop waar de stip aankomt
     --hn-sig     de signalen van wat misgaat of wegvalt: op de homepage de
                  claims op dezelfde verkoop, het telbordje, de dalende staaf
                  en min tien procent; op de methodepagina het weggelaten
                  contactmoment, de lagere kans zonder dat moment en de
                  melding bij een afwijking.
   Wil je een onderdeel een andere rol geven, pas dan de variabele aan die
   het gebruikt en niet de kleur zelf.
   ───────────────────────────────────────────────────────────── */
body.hn-flows {
  --hn-blue:      #0081EA;
  --hn-blue-dark: #0C5CA8;
  --hn-blue-tint: rgba(0, 129, 234, 0.10);
  --hn-red:       #E32037;
  --hn-red-dark:  #A31D2E;
  --hn-red-tint:  rgba(227, 32, 55, 0.10);

  /* rollen */
  --hn-edge:     var(--hn-blue);       /* randen van kaarten en diagrammen */
  --hn-accent:   var(--hn-red);        /* bewegende stippen en pijlpunten */
  --hn-sig:      var(--hn-red);        /* signaal: wat misgaat of wegvalt */
  --hn-sig-dark: var(--hn-red-dark);
  --hn-sig-tint: var(--hn-red-tint);

  /* verticaal ritme: 88px op een telefoon, zo'n 150px op een laptop, hooguit 168px */
  --hn-space:       clamp(88px, 11vw, 168px);   /* tussen secties */
  --hn-space-inner: clamp(40px, 4.5vw, 64px);   /* tussen kop en inhoud binnen een sectie */
}

/* ─────────────────────────────────────────────────────────────
   2. ALGEMENE DIAGRAMREGELS
   ───────────────────────────────────────────────────────────── */
.hn-flow {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.hn-flow text { font-family: inherit; }

/* Gedeelde bouwstenen binnen de methodediagrammen */
.hn-page-methode .hn-flow .fc-lane  { font-size: 12.5px; font-weight: 700; fill: var(--hn-blue-dark); letter-spacing: 0.02em; }
.hn-page-methode .hn-flow .fc-cap   { font-size: 13px; font-weight: 500; fill: var(--hn-blue-dark); }
.hn-page-methode .hn-flow .fc-track { fill: #EEF2F7; }
.hn-page-methode .hn-flow .fc-dot   { fill: var(--hn-accent); opacity: 0; }

/* ── Schermafbeelding met rand ──
   Alleen waar het platform zelf laat zien wat de tekst beschrijft. Een effen
   blauwe rand met een zachte schaduw, op de homepage en de methodepagina. */
.hn-shot {
  padding: 0;
  border: 1.5px solid var(--hn-edge);
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(16, 32, 56, 0.10);
  overflow: hidden;
  max-width: 560px;
  margin: 0 auto;
}
.hn-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* Op de methodepagina breed onder de intro van de validatie, met onderschrift. */
.hn-shot.mth-shot {
  max-width: 1040px;
  margin: 0 auto var(--hn-space-inner);
  padding: 18px 18px 0;
}
.hn-shot.mth-shot img { border-radius: 8px; }
.hn-shot.mth-shot figcaption {
  padding: 14px 4px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hn-blue-dark);
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   3. DIAGRAMMEN VAN DE METHODEPAGINA
   ───────────────────────────────────────────────────────────── */

/* ── Hero: Marginal Journey Simulation ──
   Cyclus van 10 seconden: de stip loopt de werkelijke reis af, daarna de
   reis zonder de Meta-advertentie, dan groeien de twee balken en verschijnt
   het marginale effect. */
.hn-flow--mjs .fc-link        { stroke: var(--hn-blue); stroke-width: 2; }
.hn-flow--mjs .fc-link-gone   { stroke: var(--hn-sig); stroke-dasharray: 4 4; opacity: 0.6; }
.hn-flow--mjs .fc-bypass      { fill: none; stroke: var(--hn-blue); stroke-width: 2; }
.hn-flow--mjs .fc-node        { fill: #FFFFFF; stroke: var(--hn-edge); stroke-width: 1.5; }
.hn-flow--mjs .fc-node.fc-gone{ stroke: var(--hn-sig); stroke-dasharray: 4 4; }
.hn-flow--mjs .fc-node-ico    { color: var(--hn-blue); }
.hn-flow--mjs .fc-gone-ico    { color: var(--hn-sig); opacity: 0.45; }
.hn-flow--mjs .fc-node-t      { font-size: 11.5px; font-weight: 500; fill: var(--hn-blue-dark); }
.hn-flow--mjs .fc-bar-t       { font-size: 12.5px; font-weight: 500; fill: var(--hn-blue-dark); }
.hn-flow--mjs .fc-bar-met     { fill: var(--hn-blue); }
.hn-flow--mjs .fc-bar-zonder  { fill: var(--hn-sig); fill-opacity: 0.6; }
.hn-flow--mjs .fc-bracket     { fill: none; stroke: var(--hn-accent); stroke-width: 1.5; }
.hn-flow--mjs .fc-effect-t    { font-size: 12px; font-weight: 700; fill: var(--hn-accent); }

@media (prefers-reduced-motion: no-preference) {
  .hn-flow--mjs .fc-dot-1 { offset-path: path("M 70 110 L 530 110"); animation: mjDot1 10s linear infinite; }
  .hn-flow--mjs .fc-dot-2 { offset-path: path("M 70 262 L 185 262 C 250 312, 350 312, 415 262 L 530 262"); animation: mjDot2 10s linear infinite; }
  .hn-flow--mjs .fc-gone,
  .hn-flow--mjs .fc-gone-ico { animation: mjGone 10s ease-in-out infinite; }
  .hn-flow--mjs .fc-bar-met    { transform-origin: 210px 356px; animation: mjMet 10s ease-out infinite; }
  .hn-flow--mjs .fc-bar-zonder { transform-origin: 210px 386px; animation: mjZonder 10s ease-out infinite; }
  .hn-flow--mjs .fc-effect     { animation: mjEffect 10s ease-in-out infinite; }

  /* Elk contactmoment licht rood op op het moment dat de stip het bereikt.
     Baan 1 loopt van 0,2 tot 3 seconden, baan 2 van 3,6 tot 6,4 seconden. */
  .hn-flow--mjs .fc-flash { animation: mjFlash 10s ease-out infinite; }
  .hn-flow--mjs .fc-a1 { animation-delay: 0.1s; }
  .hn-flow--mjs .fc-a2 { animation-delay: 0.8s; }
  .hn-flow--mjs .fc-a3 { animation-delay: 1.5s; }
  .hn-flow--mjs .fc-a4 { animation-delay: 2.2s; }
  .hn-flow--mjs .fc-a5 { animation-delay: 2.9s; }
  .hn-flow--mjs .fc-b1 { animation-delay: 3.5s; }
  .hn-flow--mjs .fc-b2 { animation-delay: 4.2s; }
  .hn-flow--mjs .fc-b4 { animation-delay: 5.6s; }
  .hn-flow--mjs .fc-b5 { animation-delay: 6.3s; }
}
/* Randen wisselen in één stap van blauw naar rood en terug, zonder paarse
   tussenkleur. Dat geldt voor alle kleurwissels hieronder. */
@keyframes mjFlash {
  0%, 6%      { stroke: var(--hn-accent); stroke-width: 2.5; fill: var(--hn-red-tint); }
  6.1%, 100%  { stroke: var(--hn-edge);   stroke-width: 1.5; fill: #FFFFFF; }
}
@keyframes mjDot1 {
  0%        { offset-distance: 0%;   opacity: 0; }
  2%        { opacity: 1; }
  30%       { offset-distance: 100%; opacity: 1; }
  33%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes mjDot2 {
  0%, 34%   { offset-distance: 0%;   opacity: 0; }
  36%       { opacity: 1; }
  64%       { offset-distance: 100%; opacity: 1; }
  67%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes mjGone {
  0%, 38%   { opacity: 0.45; }
  46%, 56%  { opacity: 1; }
  64%, 100% { opacity: 0.45; }
}
@keyframes mjMet {
  0%, 64%   { transform: scaleX(0); }
  70%, 94%  { transform: scaleX(1); }
  99%, 100% { transform: scaleX(0); }
}
@keyframes mjZonder {
  0%, 68%   { transform: scaleX(0); }
  74%, 94%  { transform: scaleX(1); }
  99%, 100% { transform: scaleX(0); }
}
@keyframes mjEffect {
  0%, 76%   { opacity: 0; }
  80%, 94%  { opacity: 1; }
  98%, 100% { opacity: 0; }
}

/* ── Motor 1: klantreizen tellen op tot rendement per kanaal ──
   Cyclus van 12 seconden: de vier reizen lichten om de beurt op en na
   elke reis groeien de balken van de kanalen die erin zaten. De reis
   zonder aankoop voegt niets toe. */
.hn-flow--motor1 .fc-row        { fill: #FFFFFF; stroke: var(--hn-edge); stroke-opacity: 0.3; stroke-width: 1; }
.hn-flow--motor1 .fc-link       { stroke: var(--hn-blue); stroke-opacity: 0.45; stroke-width: 1.5; }
.hn-flow--motor1 .fc-chip       { fill: var(--hn-blue-tint); }
.hn-flow--motor1 .fc-chip-ico   { color: var(--hn-blue); }
.hn-flow--motor1 .fc-end-yes    { fill: var(--hn-blue); }
.hn-flow--motor1 .fc-end-yes-ico{ color: #FFFFFF; }
.hn-flow--motor1 .fc-end-no     { fill: #E6EAF0; }
.hn-flow--motor1 .fc-end-no-ico { color: #8A94A3; }
.hn-flow--motor1 .fc-arrow      { fill: none; stroke: var(--hn-blue); stroke-width: 2; stroke-linecap: round; }
.hn-flow--motor1 .fc-arrow-head { stroke: var(--hn-accent); }
.hn-flow--motor1 .fc-chan-t     { font-size: 12.5px; font-weight: 600; fill: var(--hn-blue-dark); }
.hn-flow--motor1 .fc-grow       { fill: var(--hn-blue); transform-origin: 470px 0; }
.hn-flow--motor1 .fc-grow-ga    { transform: scaleX(1); }
.hn-flow--motor1 .fc-grow-me    { transform: scaleX(0.8); }
.hn-flow--motor1 .fc-grow-tv    { transform: scaleX(0.6); }

@media (prefers-reduced-motion: no-preference) {
  .hn-flow--motor1 .fc-row { animation: m1Row 12s ease-in-out infinite; }
  .hn-flow--motor1 .fc-j2 .fc-row { animation-delay: 2.52s; }
  .hn-flow--motor1 .fc-j3 .fc-row { animation-delay: 5.04s; }
  .hn-flow--motor1 .fc-j4 .fc-row { animation-delay: 7.56s; }
  .hn-flow--motor1 .fc-grow-ga { animation: m1GA 12s ease-in-out infinite; }
  .hn-flow--motor1 .fc-grow-me { animation: m1ME 12s ease-in-out infinite; }
  .hn-flow--motor1 .fc-grow-tv { animation: m1TV 12s ease-in-out infinite; }
}
@keyframes m1Row {
  0%, 2.9%    { stroke: var(--hn-edge);   stroke-opacity: 0.3; stroke-width: 1; }
  3%, 17%     { stroke: var(--hn-accent); stroke-opacity: 1;   stroke-width: 2; }
  17.1%, 100% { stroke: var(--hn-edge);   stroke-opacity: 0.3; stroke-width: 1; }
}
/* Stappen na reis 1 (12%), reis 2 (33%), reis 3 (54%, geen aankoop) en reis 4 (75%). */
@keyframes m1GA {
  0%, 10%   { transform: scaleX(0); }
  14%, 31%  { transform: scaleX(0.4); }
  35%, 73%  { transform: scaleX(0.69); }
  77%, 94%  { transform: scaleX(1); }
  98%, 100% { transform: scaleX(0); }
}
@keyframes m1ME {
  0%, 31%   { transform: scaleX(0); }
  35%, 73%  { transform: scaleX(0.45); }
  77%, 94%  { transform: scaleX(0.8); }
  98%, 100% { transform: scaleX(0); }
}
@keyframes m1TV {
  0%, 10%   { transform: scaleX(0); }
  14%, 73%  { transform: scaleX(0.35); }
  77%, 94%  { transform: scaleX(0.6); }
  98%, 100% { transform: scaleX(0); }
}

/* ── Motor 2: de wekelijkse omzet ontleed ──
   Cyclus van 10 seconden: basis, seizoen en prijs en weer schuiven
   van links naar rechts in, daarna de media, daarna de omzetlijn. */
.hn-flow--motor2 .fc-axis        { stroke: #CBCBCB; stroke-width: 1; }
.hn-flow--motor2 .fc-axis-t      { font-size: 11px; fill: #6B7A8C; }
.hn-flow--motor2 .fc-layer-basis   { fill: #E3E8EF; }
.hn-flow--motor2 .fc-layer-seizoen { fill: #C6DEF5; }
.hn-flow--motor2 .fc-layer-prijs   { fill: #8DBDEB; }
.hn-flow--motor2 .fc-layer-media   { fill: var(--hn-blue); }
.hn-flow--motor2 .fc-total       { fill: none; stroke: var(--hn-accent); stroke-width: 2.2; stroke-linecap: round; }
.hn-flow--motor2 .fc-leg-h       { font-size: 12px; font-weight: 700; fill: var(--hn-blue-dark); }
.hn-flow--motor2 .fc-leg-media .fc-leg-h { fill: var(--hn-blue); }
.hn-flow--motor2 .fc-leg-t       { font-size: 12px; font-weight: 500; fill: var(--hn-blue-dark); }

@media (prefers-reduced-motion: no-preference) {
  .hn-flow--motor2 path.fc-layer-basis   { animation: m2Basis 10s ease-in-out infinite; }
  .hn-flow--motor2 path.fc-layer-seizoen { animation: m2Seizoen 10s ease-in-out infinite; }
  .hn-flow--motor2 path.fc-layer-prijs   { animation: m2Prijs 10s ease-in-out infinite; }
  .hn-flow--motor2 path.fc-layer-media   { animation: m2Media 10s ease-in-out infinite; }
  .hn-flow--motor2 .fc-total      { stroke-dasharray: 900; animation: m2Line 10s ease-in-out infinite; }
  .hn-flow--motor2 .fc-leg-markt  { animation: m2LegMarkt 10s ease-in-out infinite; }
  .hn-flow--motor2 .fc-leg-media  { animation: m2LegMedia 10s ease-in-out infinite; }
}
@keyframes m2Basis {
  0%        { clip-path: inset(0 100% 0 0); opacity: 1; }
  10%, 94%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  98%       { clip-path: inset(0 0 0 0);    opacity: 0; }
  100%      { clip-path: inset(0 100% 0 0); opacity: 0; }
}
@keyframes m2Seizoen {
  0%, 10%   { clip-path: inset(0 100% 0 0); opacity: 1; }
  20%, 94%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  98%       { clip-path: inset(0 0 0 0);    opacity: 0; }
  100%      { clip-path: inset(0 100% 0 0); opacity: 0; }
}
@keyframes m2Prijs {
  0%, 20%   { clip-path: inset(0 100% 0 0); opacity: 1; }
  30%, 94%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  98%       { clip-path: inset(0 0 0 0);    opacity: 0; }
  100%      { clip-path: inset(0 100% 0 0); opacity: 0; }
}
@keyframes m2Media {
  0%, 34%   { clip-path: inset(0 100% 0 0); opacity: 1; }
  48%, 94%  { clip-path: inset(0 0 0 0);    opacity: 1; }
  98%       { clip-path: inset(0 0 0 0);    opacity: 0; }
  100%      { clip-path: inset(0 100% 0 0); opacity: 0; }
}
@keyframes m2Line {
  0%, 48%   { stroke-dashoffset: 900; opacity: 1; }
  62%, 94%  { stroke-dashoffset: 0;   opacity: 1; }
  98%, 100% { stroke-dashoffset: 0;   opacity: 0; }
}
@keyframes m2LegMarkt {
  0%        { opacity: 0.25; }
  8%, 94%   { opacity: 1; }
  100%      { opacity: 0.25; }
}
@keyframes m2LegMedia {
  0%, 34%   { opacity: 0.25; }
  44%, 94%  { opacity: 1; }
  100%      { opacity: 0.25; }
}

/* ── De koppeling: de motoren controleren elkaar ──
   De stippen lopen heen en weer tussen de motoren en naar het advies. Om de
   negen seconden verschijnt de melding voor als de motoren afwijken. */
.hn-flow--koppel .fc-card     { fill: #FFFFFF; stroke: var(--hn-edge); stroke-width: 1.5; }
.hn-flow--koppel .fc-title    { font-size: 17px; font-weight: 700; fill: var(--hn-blue); }
.hn-flow--koppel .fc-sub      { font-size: 12.5px; font-weight: 500; fill: var(--hn-blue-dark); }
.hn-flow--koppel .fc-link     { fill: none; stroke: var(--hn-blue); stroke-width: 2; }
.hn-flow--koppel marker path  { fill: var(--hn-accent); }
.hn-flow--koppel .fc-pill     { fill: var(--hn-blue-tint); stroke: var(--hn-edge); stroke-width: 1.2; }
.hn-flow--koppel .fc-pill-t   { font-size: 13px; font-weight: 700; fill: var(--hn-blue); }
.hn-flow--koppel .fc-out      { fill: var(--hn-blue); }
.hn-flow--koppel .fc-out-t    { font-size: 13.5px; font-weight: 700; fill: #FFFFFF; }
.hn-flow--koppel .fc-signal-box { fill: var(--hn-sig-tint); stroke: var(--hn-sig); stroke-width: 1.2; }
.hn-flow--koppel .fc-signal-t { font-size: 12px; font-weight: 700; fill: var(--hn-sig); }

@media (prefers-reduced-motion: no-preference) {
  .hn-flow--koppel .fc-dot-down { offset-path: path("M 130.0 128.0 C 105.7 176.6, 104.1 232.2, 125.3 281.8"); animation: kpDot 3s linear infinite; }
  .hn-flow--koppel .fc-dot-up   { offset-path: path("M 282.0 292.0 C 306.3 243.4, 307.9 187.8, 286.7 138.2"); animation: kpDot 3s linear infinite; animation-delay: 1.5s; }
  .hn-flow--koppel .fc-dot-out  { offset-path: path("M 316 210 L 412.8 210"); animation: kpDot 3s linear infinite; animation-delay: 0.75s; }
  .hn-flow--koppel .fc-pulse    { animation: kpPulse 3s ease-in-out infinite; transform-origin: 206px 210px; }
  .hn-flow--koppel .fc-pill     { animation: kpPill 3s ease-in-out infinite; }
  .hn-flow--koppel .fc-pill-t   { animation: kpPillT 3s ease-in-out infinite; }
  .hn-flow--koppel .fc-signal   { animation: kpSignal 9s ease-in-out infinite; }
}
@keyframes kpDot {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes kpPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes kpPill {
  0%, 34.9%, 65.1%, 100% { stroke: var(--hn-edge);   fill: var(--hn-blue-tint); }
  35%, 65%               { stroke: var(--hn-accent); fill: var(--hn-red-tint); }
}
@keyframes kpPillT {
  0%, 34.9%, 65.1%, 100% { fill: var(--hn-blue); }
  35%, 65%               { fill: var(--hn-accent); }
}
@keyframes kpSignal {
  0%, 50%   { opacity: 0; }
  56%, 82%  { opacity: 1; }
  88%, 100% { opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   4. LOOP-DIAGRAM VAN DE METHODEPAGINA
   Een rode stip loopt de cirkel rond in tien seconden. Wanneer de stip een
   stap bereikt, wordt de rand van die kaart rood, met een zachte rode gloed.
   De rand heeft één kleur tegelijk: blauw of rood, nooit allebei. Daarom
   staat hij hier en niet meer in de inline stijl van de template.
   ───────────────────────────────────────────────────────────── */
.hn-page-methode .mth-step { border: 1.5px solid var(--hn-edge); }
.hn-page-methode .mth-loop-dot { fill: var(--hn-accent); opacity: 0; }
.hn-page-methode .loop-wrap marker path { fill: var(--hn-accent); }

@media (prefers-reduced-motion: no-preference) {
  .hn-page-methode .mth-loop-dot {
    offset-path: path("M 280 100 A 180 180 0 1 1 280 460 A 180 180 0 1 1 280 100");
    offset-rotate: 0deg;
    animation: mthLoop 10s linear infinite;
  }
  .hn-page-methode .mth-step { animation: mthStep 10s ease-in-out infinite; }
  .hn-page-methode .mth-step-2 { animation-delay: 2.5s; }
  .hn-page-methode .mth-step-3 { animation-delay: 5s; }
  .hn-page-methode .mth-step-4 { animation-delay: 7.5s; }
}
@keyframes mthLoop {
  0%   { offset-distance: 0%;   opacity: 1; }
  100% { offset-distance: 100%; opacity: 1; }
}
/* De randkleur wisselt in een tiende seconde, zodat hij niet zichtbaar via
   paars van blauw naar rood gaat. De gloed dooft daarna rustig uit. */
@keyframes mthStep {
  0%        { border-color: var(--hn-accent); box-shadow: 0 0 0 6px var(--hn-red-tint), var(--shadow-md); }
  10%       { border-color: var(--hn-accent); box-shadow: 0 0 0 6px var(--hn-red-tint), var(--shadow-md); }
  11%       { border-color: var(--hn-edge);   box-shadow: 0 0 0 6px var(--hn-blue-tint), var(--shadow-md); }
  18%, 100% { border-color: var(--hn-edge);   box-shadow: var(--shadow-md); }
}


/* ─────────────────────────────────────────────────────────────
   5. METHODEPAGINA: WITRUIMTE EN KAARTEN
   Dezelfde maat tussen de secties als op de homepage. Een paar secties
   hebben in de template een inline padding-top van 0, vandaar !important.
   ───────────────────────────────────────────────────────────── */
body.hn-page-methode .mx-section,
body.hn-page-methode .mx-section.mx-tight {
  padding-top: calc(var(--hn-space) / 2) !important;
  padding-bottom: calc(var(--hn-space) / 2) !important;
}
body.hn-page-methode .hero-section + .mx-section { padding-top: var(--hn-space) !important; }
body.hn-page-methode .mx-center { margin-bottom: var(--hn-space-inner); }

body.hn-page-methode .features-section.audience-features {
  padding-top: calc(var(--hn-space) / 2);
  padding-bottom: calc(var(--hn-space) / 2);
}
body.hn-page-methode .features-intro { margin-bottom: 0; }
body.hn-page-methode .feature-row { padding: calc(var(--hn-space) / 2) 0; }

/* style.css geeft de rij kolommen van 48% en 52% plus een tussenruimte van
   72 pixels. Samen is dat breder dan de rij, en de rechterkolom liep daardoor
   buiten beeld. In verhoudingen gaat de tussenruimte er eerst vanaf. */
@media (min-width: 769px) {
  body.hn-page-methode .feature-row { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); }
}

body.hn-page-methode .cta-section {
  padding-top: calc(var(--hn-space) / 2);
  padding-bottom: var(--hn-space);
}

/* Kaarten krijgen dezelfde effen rand als op de homepage. */
body.hn-page-methode .mx-card { border: 1px solid var(--hn-edge); }

/* De diagrammen staan zonder fotokader, net als op de homepage. style.css
   geeft .feature-img-wrap een grijze vulling, een witte rand, een schaduw en
   een zoom bij hover; die gaan hier allemaal uit. */
.feature-img-wrap.mth-flow-wrap {
  aspect-ratio: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transition: none;
}
.feature-img-wrap.mth-flow-wrap:hover { transform: none; }
.feature-img-wrap.mth-flow-wrap::after { display: none; }

/* Hero met diagram. mx-pages.css zet de hero om naar één gecentreerde kolom
   zodra er geen <img> in de beeldkolom staat, en verbergt die kolom dan. Een
   diagram is een <svg>, dus hier komt de gewone opmaak in twee kolommen terug.
   body.hn-page-methode is nodig om de specificiteit van die regel te halen. */
body.hn-flows .hero-section.audience-hero:has(.mth-hero-flow, .hn-hero-flow) {
  grid-template-columns: 48% 52%;
  min-height: 76vh;
  padding-left: max(42px, calc((100vw - 1400px) / 2 + 18px));
  padding-right: 0;
  text-align: left;
}
body.hn-flows .hero-section.audience-hero:has(.mth-hero-flow, .hn-hero-flow) .hero-text-col {
  align-items: flex-start;
  max-width: none;
  margin: 0;
}
body.hn-flows .hero-section.audience-hero:has(.mth-hero-flow, .hn-hero-flow) .hero-sub {
  margin-left: 0;
  margin-right: 0;
}
body.hn-flows .hero-section.audience-hero:has(.mth-hero-flow, .hn-hero-flow) .hero-image-col {
  display: flex;
  justify-content: center;
  padding-right: max(24px, calc((100vw - 1400px) / 2 + 18px));
}
.hero-image-col .mth-hero-flow,
.hero-image-col .hn-hero-flow { width: 100%; max-width: 580px; align-self: center; }

/* Een animatie in de hero schuift in, net als een hero-afbeelding elders op de
   site (heroSlideIn staat in style.css). Op mobiel en bij reduced-motion staat
   hij meteen, zoals de hero-afbeeldingen daar ook doen. */
.hero-image-col .mth-hero-flow,
.hero-image-col .hn-hero-flow {
  opacity: 0;
  transform: translateX(48px);
  animation: heroSlideIn 1.0s cubic-bezier(0.22, 1, 0.36, 1) both 0.4s;
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .hero-image-col .mth-hero-flow,
  .hero-image-col .hn-hero-flow {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (max-width: 900px) {
  body.hn-flows .hero-section.audience-hero:has(.mth-hero-flow, .hn-hero-flow) {
    grid-template-columns: 1fr;
    padding-right: max(24px, calc((100vw - 1400px) / 2 + 18px));
  }
  body.hn-flows .hero-section.audience-hero:has(.mth-hero-flow, .hn-hero-flow) .hero-image-col {
    grid-column: 1;
    grid-row: 2;
    padding: 32px 0 0;
  }
}

/* ─────────────────────────────────────────────────────────────
   6. MOBIEL
   Elk diagram heeft een staande telefoonversie (klasse hn-flow--m), met
   een viewBox van 340 breed zodat de tekst op ware grootte staat. Onder
   560 pixels breed verdwijnt de brede versie en verschijnt de staande.
   Die gebruikt dezelfde klassen; hieronder staat alleen wat van
   coördinaten afhangt, plus de lettergroottes die afwijken.
   ───────────────────────────────────────────────────────────── */
/* Dubbele klasse, zodat deze regels winnen van .hn-flow en .hn-loopsvg
   { display: block }, ongeacht welke stylesheet later laadt. */
.hn-flow.hn-flow--m,
.hn-loopsvg.hn-loopsvg--m { display: none; }
.hn-flow.hn-flow--m { max-width: 420px; }

@media (max-width: 560px) {
  .hn-flow:not(.hn-flow--m),
  .hn-loopsvg:not(.hn-loopsvg--m) { display: none; }
  .hn-flow.hn-flow--m,
  .hn-loopsvg.hn-loopsvg--m { display: block; }
}

/* tekst die vanzelf afbreekt, in een foreignObject */
.hn-flow .fc-fo-cap,
.hn-flow .fc-fo-lane {
  margin: 0;
  font-family: inherit;
  text-align: center;
  color: var(--hn-blue-dark);
}
.hn-flow .fc-fo-cap  { font-size: 13px; font-weight: 500; line-height: 1.4; }
.hn-flow .fc-fo-lane { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.hn-flow--koppel .fc-sub-m { font-size: 11.5px; }

/* draaipunten van de balken in de telefoonversies */
.hn-flow--mjs.hn-flow--m    .fc-bar-met    { transform-origin: 20px 448px; }
.hn-flow--mjs.hn-flow--m    .fc-bar-zonder { transform-origin: 20px 486px; }
.hn-flow--motor1.hn-flow--m .fc-grow       { transform-origin: 110px 0; }

@media (prefers-reduced-motion: no-preference) {
  .hn-flow--mjs.hn-flow--m .fc-dot-1 { offset-path: path("M 85 80 L 85 360"); }
  .hn-flow--mjs.hn-flow--m .fc-dot-2 { offset-path: path("M 255 80 L 255 150 C 310 180, 310 260, 255 290 L 255 360"); }
  .hn-flow--mjs.hn-flow--m .fc-bar-met    { transform-origin: 20px 448px; }
  .hn-flow--mjs.hn-flow--m .fc-bar-zonder { transform-origin: 20px 486px; }
  .hn-flow--motor1.hn-flow--m .fc-grow    { transform-origin: 110px 0; }

  .hn-flow--koppel.hn-flow--m .fc-dot-down { offset-path: path("M 90.0 92.0 C 65.5 146.6, 64.1 231.4, 85.7 289.6"); }
  .hn-flow--koppel.hn-flow--m .fc-dot-up   { offset-path: path("M 250.0 300.0 C 274.5 245.4, 275.9 160.6, 254.3 102.4"); }
  .hn-flow--koppel.hn-flow--m .fc-dot-out  { offset-path: path("M 170 384 L 170 410.8"); }
  .hn-flow--koppel.hn-flow--m .fc-pulse    { transform-origin: 170px 196px; }
}

/* ── De loop op de methodepagina ──
   De vier stappen staan op een cirkel met kaarten van 158 pixels breed. Op
   een telefoon overlappen die, dus daar staan ze onder elkaar, met een rode
   pijl tussen de stappen. De rand kleurt nog steeds rood als de stap aan de
   beurt is. */
@media (max-width: 560px) {
  body.hn-page-methode .loop-wrap {
    aspect-ratio: auto !important;
    display: flex;
    flex-direction: column;
    gap: 34px;
    max-width: 420px !important;
  }
  body.hn-page-methode .loop-wrap > svg { display: none; }
  body.hn-page-methode .loop-wrap > div {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    padding: 16px 18px !important;
  }
  body.hn-page-methode .loop-wrap .mth-step:not(.mth-step-4)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -26px;
    width: 0;
    height: 0;
    margin-left: -7px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid var(--hn-accent);
  }
  body.hn-page-methode .loop-wrap .mth-step:not(.mth-step-4)::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -18px;
    width: 2px;
    height: 12px;
    margin-left: -1px;
    background: var(--hn-blue);
  }
}

/* ─────────────────────────────────────────────────────────────
   7. GEDEELDE PAGINASTIJL
   Voor alle pagina's die datafy_use_flows() aanroepen, behalve de
   homepage (die heeft zijn eigen regels in home-nieuw.css). Dezelfde
   keuzes als op de homepage en de methodepagina:
     - kaarten, kaders en schermafbeeldingen krijgen een effen blauwe rand;
     - verlopen in de oude stijl worden effen kleuren;
     - tussen de secties staat overal dezelfde maat (--hn-space).
   ───────────────────────────────────────────────────────────── */

/* ── Witruimte ── */
body.hn-flows:not(.home) .mx-section,
body.hn-flows:not(.home) .mx-section.mx-tight,
body.hn-flows:not(.home) .kennis-hub-section {
  padding-top: calc(var(--hn-space) / 2) !important;
  padding-bottom: calc(var(--hn-space) / 2) !important;
}
body.hn-flows:not(.home) .hero-section + .mx-section,
body.hn-flows:not(.home) .hero-section + .features-section,
body.hn-flows:not(.home) .hero-section + .kennis-hub-section { padding-top: var(--hn-space) !important; }
body.hn-flows:not(.home) .mx-center { margin-bottom: var(--hn-space-inner); }
body.hn-flows:not(.home) .features-section,
body.hn-flows:not(.home) .features-section.audience-features {
  padding-top: calc(var(--hn-space) / 2);
  padding-bottom: calc(var(--hn-space) / 2);
}
body.hn-flows:not(.home) .features-intro { margin-bottom: var(--hn-space-inner); }
body.hn-flows:not(.home) .feature-row { padding: calc(var(--hn-space) / 2) 0; }
body.hn-flows:not(.home) .testimonials-section { padding-top: var(--hn-space); padding-bottom: var(--hn-space); }
body.hn-flows:not(.home) .quote-section { padding-top: var(--hn-space); padding-bottom: var(--hn-space); }
body.hn-flows:not(.home) .cta-section {
  padding-top: calc(var(--hn-space) / 2);
  padding-bottom: var(--hn-space);
}

/* De rij met beeld en tekst: 48% en 52% plus 72 pixels tussenruimte is
   breder dan de rij. In verhoudingen gaat de tussenruimte er eerst vanaf. */
@media (min-width: 769px) {
  body.hn-flows:not(.home) .feature-row { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); }
}

/* ── Kaarten en kaders: effen blauwe rand ── */
body.hn-flows:not(.home) .mx-card,
body.hn-flows:not(.home) .testimonial-card,
body.hn-flows:not(.home) .mx-compare-wrap,
body.hn-flows:not(.home) .mx-stat.alt,
body.hn-flows:not(.home) .kennis-card {
  border: 1px solid var(--hn-edge);
}
body.hn-flows:not(.home) .mx-pov { border: 1px solid var(--hn-edge); background: #F6F9FD; }

/* Featurekaarten hadden een draaiend kleurverloop van rood naar blauw als
   rand. Dat wordt een effen blauwe rand. */
body.hn-flows:not(.home) .feature-card {
  background: #FFFFFF;
  border: 1px solid var(--hn-edge);
}
body.hn-flows:not(.home) .feature-card::before,
body.hn-flows:not(.home) .feature-card::after { display: none; }

/* Pictogrammen in de kaarten: blauw op een lichtblauwe tegel. */
body.hn-flows:not(.home) .feature-icon {
  background: var(--hn-blue-tint);
  border: 0;
  box-shadow: none;
  color: var(--hn-blue);
}

/* Statistiekkaarten: effen blauw in plaats van een verloop. */
body.hn-flows:not(.home) .mx-stat { background: var(--hn-blue); }
body.hn-flows:not(.home) .mx-stat.alt { background: #FFFFFF; }

/* Achtergronden die van blauw naar roze liepen, worden effen lichtblauw. */
body.hn-flows:not(.home) .quote-section { background: #F6F9FD; }

/* ── Schermafbeeldingen: effen blauwe rand ──
   Alleen waar een echte schermafbeelding staat. Diagrammen staan zonder
   kader. */
body.hn-flows:not(.home) .mx-figure {
  border: 1.5px solid var(--hn-edge);
  box-shadow: 0 18px 40px rgba(16, 32, 56, 0.10);
}
/* Zit er een kader in de wrapper, dan draagt het kader de rand en de schaduw.
   De wrapper zelf krijgt dezelfde ronde hoeken en geen eigen schaduw. */
body.hn-flows:not(.home) .feature-img-wrap:has(.mx-figure) {
  border-radius: 16px;
  box-shadow: none;
}
body.hn-flows:not(.home) .feature-img-wrap:not(.mth-flow-wrap):not(:has(.mx-figure)) {
  border: 1.5px solid var(--hn-edge);
  box-shadow: 0 18px 40px rgba(16, 32, 56, 0.10);
}
body.hn-flows:not(.home) .hero-screenshot-wrap {
  border: 1.5px solid var(--hn-edge);
  box-shadow: 0 24px 60px rgba(16, 32, 56, 0.12);
}
body.hn-flows:not(.home) .hero-image-col .hero-screenshot {
  border: 1.5px solid var(--hn-edge);
  border-radius: 14px;
}

/* Banden op de featurepagina's (inhoud uit WordPress): effen kleuren. */
body.hn-flows:not(.home) .dashboard-band { background: #F6F9FD; }
body.hn-flows:not(.home) .chart-bar { background: var(--hn-blue); opacity: 0.55; }
body.hn-flows:not(.home) .chart-bar.accent { background: var(--hn-accent); opacity: 1; }

/* ─────────────────────────────────────────────────────────────
   8. AANPAK: DE VIJF FASEN ALS BEWEGENDE TIJDLIJN
   De fasen lichten om de beurt op, elke twee seconden de volgende. Het
   bolletje van de actieve fase wordt rood; de lijn naar de volgende fase
   loopt vol in blauw. Na de vijfde fase begint het opnieuw. Werkt voor
   elk aantal fasen tot vijf; daarboven lopen de extra fasen mee met de
   vertraging van de vijfde.
   ───────────────────────────────────────────────────────────── */
/* Hero-beeld op Aanpak: zonder kader, alleen afgeronde hoeken. */
body.hn-page-aanpak .hero-image-col .feature-img-wrap,
body.hn-page-aanpak .hero-image-col .mx-figure {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  border-radius: 16px;
}
body.hn-page-aanpak .hero-image-col .mx-figure img {
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(16, 32, 56, 0.10);
}

body.hn-page-aanpak .mx-phase::before {
  background: #CFE3F8;
}
body.hn-page-aanpak .mx-phase::after {
  content: "";
  position: absolute;
  left: 31px;
  top: 52px;
  bottom: 8px;
  width: 2px;
  background: var(--hn-blue);
  transform-origin: top;
  transform: scaleY(1);
}
body.hn-page-aanpak .mx-phase:last-child::after { display: none; }
body.hn-page-aanpak .mx-phase-dot {
  border: 1.5px solid var(--hn-edge);
  color: var(--hn-blue-dark);
}

@media (prefers-reduced-motion: no-preference) {
  body.hn-page-aanpak .mx-phase-dot  { animation: apkDot 10s ease-in-out infinite; }
  body.hn-page-aanpak .mx-phase::after { animation: apkLine 10s ease-in-out infinite; transform: scaleY(0); }
  body.hn-page-aanpak .mx-phase:nth-child(2) .mx-phase-dot,
  body.hn-page-aanpak .mx-phase:nth-child(2)::after { animation-delay: 2s; }
  body.hn-page-aanpak .mx-phase:nth-child(3) .mx-phase-dot,
  body.hn-page-aanpak .mx-phase:nth-child(3)::after { animation-delay: 4s; }
  body.hn-page-aanpak .mx-phase:nth-child(4) .mx-phase-dot,
  body.hn-page-aanpak .mx-phase:nth-child(4)::after { animation-delay: 6s; }
  body.hn-page-aanpak .mx-phase:nth-child(n+5) .mx-phase-dot,
  body.hn-page-aanpak .mx-phase:nth-child(n+5)::after { animation-delay: 8s; }
}
/* Rand en cijfer wisselen in één stap van kleur, de gloed dooft rustig uit. */
@keyframes apkDot {
  0%, 15%     { border-color: var(--hn-accent); color: var(--hn-accent); box-shadow: 0 0 0 6px var(--hn-red-tint), 0 4px 14px rgba(12, 92, 168, 0.10); }
  15.1%       { border-color: var(--hn-edge);   color: var(--hn-blue-dark); box-shadow: 0 0 0 6px var(--hn-blue-tint), 0 4px 14px rgba(12, 92, 168, 0.10); }
  24%, 100%   { border-color: var(--hn-edge);   color: var(--hn-blue-dark); box-shadow: 0 4px 14px rgba(12, 92, 168, 0.10); }
}
/* De lijn naar de volgende fase loopt vol terwijl deze fase actief is, en
   blijft vol tot de tijdlijn opnieuw begint. */
@keyframes apkLine {
  0%, 2%     { transform: scaleY(0); }
  18%        { transform: scaleY(1); }
  94%        { transform: scaleY(1); opacity: 1; }
  98%, 100%  { transform: scaleY(1); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   9. PAGINA-INFOGRAPHICS (inc/page-flows.php)
   Eén versie per infographic: viewBox 400 breed met letters van minstens
   13 eenheden, zodat ze ook op een telefoon leesbaar blijven. Blauw voor
   de structuur, rood voor wat beweegt en wat misgaat.
   ───────────────────────────────────────────────────────────── */
.hn-flow--pg { max-width: 460px; }
.hn-flow--pg .pf-t      { font-size: 13px; font-weight: 500; fill: var(--hn-blue-dark); }
.hn-flow--pg .pf-h      { font-size: 14px; font-weight: 700; fill: var(--hn-blue); }
.hn-flow--pg .pf-red-t  { fill: var(--hn-accent); }
.hn-flow--pg .pf-axis   { stroke: #CBCBCB; stroke-width: 1.5; }
.hn-flow--pg .pf-axis-head { fill: none; stroke: #CBCBCB; stroke-width: 1.5; }
.hn-flow--pg .pf-axis-t { font-size: 12.5px; fill: #6B7A8C; }
.hn-flow--pg .pf-dot    { fill: var(--hn-accent); }
.hn-flow--pg .pf-bar    { fill: var(--hn-blue); }
.hn-flow--pg .pf-bar-light { fill: #CFE3F8; }
.hn-flow--pg .pf-bar-red { fill: var(--hn-accent); }
.hn-flow--pg .pf-cap {
  margin: 0; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.4;
  color: var(--hn-blue-dark); text-align: center;
}

/* ── Investering: licentie naast percentage ── */
.hn-flow--inv .pf-leg-red  { stroke: var(--hn-accent); stroke-width: 3; stroke-linecap: round; }
.hn-flow--inv .pf-leg-blue { stroke: var(--hn-blue);   stroke-width: 3; stroke-linecap: round; }
.hn-flow--inv .pf-line { fill: none; stroke-width: 3; stroke-linecap: round; }
.hn-flow--inv .pf-red  { stroke: var(--hn-accent); }
.hn-flow--inv .pf-blue { stroke: var(--hn-blue); }
.hn-flow--inv .pf-marker-line { stroke: var(--hn-blue-dark); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0; }
.hn-flow--inv .pf-dot-blue { fill: var(--hn-blue); }
.hn-flow--inv .pf-dot { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hn-flow--inv .pf-red  { stroke-dasharray: 340; animation: invRed 10s ease-in-out infinite; }
  .hn-flow--inv .pf-blue { stroke-dasharray: 320; animation: invBlue 10s ease-in-out infinite; }
  .hn-flow--inv .pf-marker { animation: invMarker 10s ease-in-out infinite; }
  .hn-flow--inv .pf-marker-line { animation: invShow 10s ease-in-out infinite; }
  .hn-flow--inv .pf-dot-red  { offset-path: path("M 56 214 L 372 92");  animation: invDot 10s ease-in-out infinite; }
  .hn-flow--inv .pf-dot-blue { offset-path: path("M 56 214 L 372 214"); animation: invDot 10s ease-in-out infinite; }
}
@keyframes invRed  { 0% { stroke-dashoffset: 340; } 25%, 100% { stroke-dashoffset: 0; } }
@keyframes invBlue { 0% { stroke-dashoffset: 320; } 25%, 100% { stroke-dashoffset: 0; } }
@keyframes invMarker { 0%, 28% { transform: translateX(0); } 85%, 100% { transform: translateX(316px); } }
@keyframes invShow { 0%, 26% { opacity: 0; } 30%, 90% { opacity: 0.6; } 96%, 100% { opacity: 0; } }
@keyframes invDot {
  0%, 26%  { offset-distance: 0%;   opacity: 0; }
  30%      { offset-distance: 3%;   opacity: 1; }
  85%, 90% { offset-distance: 100%; opacity: 1; }
  96%, 100% { offset-distance: 100%; opacity: 0; }
}

/* ── Rol: prognose naast werkelijkheid ── */
.hn-flow--aprog .pf-leg-dash { stroke: var(--hn-blue); stroke-width: 2; stroke-dasharray: 5 4; }
.hn-flow--aprog .pf-leg-dark { stroke: var(--hn-blue-dark); stroke-width: 2.5; }
.hn-flow--aprog .pf-band     { fill: rgba(0, 129, 234, 0.12); }
.hn-flow--aprog .pf-forecast { fill: none; stroke: var(--hn-blue); stroke-width: 2; stroke-dasharray: 5 4; }
.hn-flow--aprog .pf-actual   { fill: none; stroke: var(--hn-blue-dark); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hn-flow--aprog .pf-ring     { fill: none; stroke: var(--hn-accent); stroke-width: 2; }
.hn-flow--aprog .pf-badge-red   { fill: var(--hn-red-tint); stroke: var(--hn-accent); stroke-width: 1.2; }
.hn-flow--aprog .pf-badge-red-t { font-size: 13px; font-weight: 700; fill: var(--hn-accent); }
.hn-flow--aprog .pf-dot-actual { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hn-flow--aprog .pf-actual { stroke-dasharray: 359; animation: apDraw 10s ease-in-out infinite; }
  .hn-flow--aprog .pf-dot-actual { offset-path: path("M 34.0 172.0 L 64.0 163.0 L 94.0 162.0 L 124.0 156.0 L 154.0 151.0 L 184.0 144.0 L 214.0 151.0 L 244.0 141.0 L 274.0 166.0 L 304.0 139.0 L 334.0 134.0 L 364.0 130.0"); animation: apDot 10s ease-in-out infinite; }
  .hn-flow--aprog .pf-outlier { animation: apOut 10s ease-in-out infinite; }
}
@keyframes apDraw { 0%, 5% { stroke-dashoffset: 359; } 60%, 94% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes apDot  { 0%, 4% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 60% { offset-distance: 100%; opacity: 1; } 64%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes apOut  { 0%, 43% { opacity: 0; } 45%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ── Rol: bijdrage per kanaal ── */
.hn-flow--abij .pf-flow { stroke: #CFE3F8; stroke-width: 2; stroke-dasharray: 3 4; }
.hn-flow--abij .pf-flowdot { opacity: 0; }
.hn-flow--abij .pf-grow { transform-origin: 250px 0; }
@media (prefers-reduced-motion: no-preference) {
  .hn-flow--abij .pf-grow { animation: bijGrow 8s ease-in-out infinite; }
  .hn-flow--abij .pf-g2 { animation-delay: 0.6s; }
  .hn-flow--abij .pf-g3 { animation-delay: 1.2s; }
  .hn-flow--abij .pf-g4 { animation-delay: 1.8s; }
  .hn-flow--abij .pf-flowdot { animation: bijDot 2.4s linear infinite; }
  .hn-flow--abij .pf-f1 { offset-path: path("M 164 58 L 242 58"); animation-delay: 0.0s; }
  .hn-flow--abij .pf-f2 { offset-path: path("M 148 106 L 242 106"); animation-delay: 0.6s; }
  .hn-flow--abij .pf-f3 { offset-path: path("M 140 154 L 242 154"); animation-delay: 1.2s; }
  .hn-flow--abij .pf-f4 { offset-path: path("M 130 202 L 242 202"); animation-delay: 1.8s; }
}
@keyframes bijGrow { 0% { transform: scaleX(0); } 12%, 92% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes bijDot  { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ── Rol: scenario's ── */
.hn-flow--ascen .pf-track    { stroke: #CFE3F8; stroke-width: 4; stroke-linecap: round; }
.hn-flow--ascen .pf-knob     { fill: var(--hn-accent); stroke: #FFFFFF; stroke-width: 2; }
.hn-flow--ascen .pf-track-bg { fill: #EEF2F7; }
.hn-flow--ascen .pf-result   { transform-origin: 16px 0; transform: scaleX(0.62); }
.hn-flow--ascen .pf-chip     { fill: var(--hn-blue-tint); stroke: var(--hn-edge); stroke-width: 1.2; }
.hn-flow--ascen .pf-chip-red { fill: var(--hn-red-tint); stroke: var(--hn-accent); }
.hn-flow--ascen .pf-chip-t   { font-size: 13px; font-weight: 700; fill: var(--hn-blue); }
.hn-flow--ascen .pf-chip-t-red { fill: var(--hn-accent); }
.hn-flow--ascen .pf-var-b    { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hn-flow--ascen .pf-knob-tv { animation: scTv 8s ease-in-out infinite; }
  .hn-flow--ascen .pf-knob-on { animation: scOn 8s ease-in-out infinite; }
  .hn-flow--ascen .pf-result  { animation: scRes 8s ease-in-out infinite; }
  .hn-flow--ascen .pf-var-a   { animation: scA 8s linear infinite; }
  .hn-flow--ascen .pf-var-b   { animation: scB 8s linear infinite; }
}
@keyframes scTv  { 0%, 20% { transform: translateX(0); } 35%, 70% { transform: translateX(70px); } 85%, 100% { transform: translateX(0); } }
@keyframes scOn  { 0%, 20% { transform: translateX(0); } 35%, 70% { transform: translateX(-70px); } 85%, 100% { transform: translateX(0); } }
@keyframes scRes { 0%, 22% { transform: scaleX(0.62); } 40%, 70% { transform: scaleX(0.8); } 88%, 100% { transform: scaleX(0.62); } }
@keyframes scA   { 0%, 34.9% { opacity: 1; } 35%, 77.9% { opacity: 0; } 78%, 100% { opacity: 1; } }
@keyframes scB   { 0%, 34.9% { opacity: 0; } 35%, 77.9% { opacity: 1; } 78%, 100% { opacity: 0; } }

/* ── Rol: incrementeel naast gerapporteerd ── */
.hn-flow--ainc .pf-gap, .hn-flow--ainc .pf-gap-swatch { fill: var(--hn-red-tint); stroke: var(--hn-accent); stroke-width: 1; stroke-dasharray: 3 2; }
.hn-flow--ainc .pf-grow { transform-origin: 140px 0; }
@media (prefers-reduced-motion: no-preference) {
  .hn-flow--ainc .pf-grow { animation: incGrow 8s ease-in-out infinite; }
  .hn-flow--ainc .pf-gap  { animation: incGap 8s ease-in-out infinite; }
  .hn-flow--ainc .pf-g2, .hn-flow--ainc .pf-gap2 { animation-delay: 0.5s; }
  .hn-flow--ainc .pf-g3, .hn-flow--ainc .pf-gap3 { animation-delay: 1s; }
}
@keyframes incGrow { 0% { transform: scaleX(0); } 15%, 92% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes incGap  { 0%, 18% { opacity: 0; } 26%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ── Rol: meeropbrengst per kanaal ── */
.hn-flow--amarg .pf-curve   { fill: none; stroke-width: 3; stroke-linecap: round; }
.hn-flow--amarg .pf-curve-a { stroke: #8DBDEB; }
.hn-flow--amarg .pf-curve-b { stroke: var(--hn-blue); }
.hn-flow--amarg .pf-shift   { fill: none; stroke: var(--hn-accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.hn-flow--amarg .pf-euro    { transform: translate(350px, 122px); }
.hn-flow--amarg .pf-euro-t  { font-size: 13px; font-weight: 700; fill: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) {
  .hn-flow--amarg .pf-euro { transform: none; offset-path: path("M 350 122 C 320 178, 220 206, 176 172"); offset-rotate: 0deg; animation: mgEuro 6s ease-in-out infinite; }
}
@keyframes mgEuro { 0%, 15% { offset-distance: 0%; } 65%, 85% { offset-distance: 100%; } 100% { offset-distance: 0%; } }

/* ── Rol: doorwerking van tv ── */
.hn-flow--aad .pf-decay-line { fill: none; stroke: var(--hn-blue-dark); stroke-width: 1.5; stroke-dasharray: 4 3; }
.hn-flow--aad .pf-spot  { transform-origin: 41px 220px; }
.hn-flow--aad .pf-decay { transform-origin: 0 220px; }
@media (prefers-reduced-motion: no-preference) {
  .hn-flow--aad .pf-spot  { animation: adSpot 10s ease-in-out infinite; }
  .hn-flow--aad .pf-decay { animation: adGrow 10s ease-in-out infinite; }
  .hn-flow--aad .pf-d1 { animation-delay: 0.90s; }
  .hn-flow--aad .pf-d2 { animation-delay: 1.30s; }
  .hn-flow--aad .pf-d3 { animation-delay: 1.70s; }
  .hn-flow--aad .pf-d4 { animation-delay: 2.10s; }
  .hn-flow--aad .pf-d5 { animation-delay: 2.50s; }
  .hn-flow--aad .pf-d6 { animation-delay: 2.90s; }
  .hn-flow--aad .pf-d7 { animation-delay: 3.30s; }
  .hn-flow--aad .pf-d8 { animation-delay: 3.70s; }
  .hn-flow--aad .pf-d9 { animation-delay: 4.10s; }
  .hn-flow--aad .pf-d10 { animation-delay: 4.50s; }
  .hn-flow--aad .pf-decay-line { animation: adLine 10s ease-in-out infinite; }
}
@keyframes adSpot { 0% { transform: scaleY(0); } 5%, 92% { transform: scaleY(1); } 98%, 100% { transform: scaleY(0); } }
@keyframes adGrow { 0% { transform: scaleY(0); } 5%, 92% { transform: scaleY(1); } 98%, 100% { transform: scaleY(0); } }
@keyframes adLine { 0%, 50% { opacity: 0; } 58%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* ── Rol: overlap tussen kanalen ── */
.hn-flow--aov .pf-set  { fill: var(--hn-blue-tint); stroke: var(--hn-edge); stroke-width: 1.5; }
.hn-flow--aov .pf-lens { fill: var(--hn-red-tint); stroke: var(--hn-accent); stroke-width: 1.5; }
.hn-flow--aov .pf-cdot { fill: var(--hn-blue); }
.hn-flow--aov .pf-cdot-red { fill: var(--hn-accent); }
@media (prefers-reduced-motion: no-preference) {
  .hn-flow--aov .pf-cdot { animation: ovDot 8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .hn-flow--aov .pf-c1 { animation-delay: 0.30s; }
  .hn-flow--aov .pf-c2 { animation-delay: 0.60s; }
  .hn-flow--aov .pf-c3 { animation-delay: 0.90s; }
  .hn-flow--aov .pf-c4 { animation-delay: 1.20s; }
  .hn-flow--aov .pf-c5 { animation-delay: 1.50s; }
  .hn-flow--aov .pf-c6 { animation-delay: 1.80s; }
  .hn-flow--aov .pf-c7 { animation-delay: 2.10s; }
  .hn-flow--aov .pf-c8 { animation-delay: 2.40s; }
  .hn-flow--aov .pf-c9 { animation-delay: 2.70s; }
  .hn-flow--aov .pf-c10 { animation-delay: 3.00s; }
  .hn-flow--aov .pf-c11 { animation-delay: 3.30s; }
  .hn-flow--aov .pf-c12 { animation-delay: 3.60s; }
  .hn-flow--aov .pf-c13 { animation-delay: 3.90s; }
}
@keyframes ovDot { 0% { opacity: 0; transform: scale(0.3); } 6%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(0.3); } }

/* ── Rol: server-side tracking ── */
.hn-flow--atr .pf-node  { fill: #FFFFFF; stroke: var(--hn-edge); stroke-width: 1.5; }
.hn-flow--atr .pf-path  { fill: none; stroke: #CFE3F8; stroke-width: 2; }
.hn-flow--atr .pf-x     { stroke: var(--hn-accent); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.hn-flow--atr .pf-model { fill: var(--hn-blue); }
.hn-flow--atr .pf-model-t { font-size: 13px; font-weight: 700; fill: #FFFFFF; }
.hn-flow--atr .pf-sig   { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hn-flow--atr .pf-top { offset-path: path("M 64 112 C 150 50, 230 50, 296 104"); animation: trTop 3s linear infinite; }
  .hn-flow--atr .pf-bot { offset-path: path("M 64 148 C 150 210, 230 210, 296 156"); animation: trBot 3s linear infinite; }
  .hn-flow--atr .pf-t2, .hn-flow--atr .pf-b2 { animation-delay: 1s; }
  .hn-flow--atr .pf-t3, .hn-flow--atr .pf-b3 { animation-delay: 2s; }
}
@keyframes trTop { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 48% { offset-distance: 48%; opacity: 1; } 56%, 100% { offset-distance: 52%; opacity: 0; } }
@keyframes trBot { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ── Security: de weg van je data ── */
.hn-flow--sec .pf-src   { fill: var(--hn-blue); }
.hn-flow--sec .pf-src + .pf-h { fill: #FFFFFF; }
.hn-flow--sec .pf-tls   { fill: none; stroke: var(--hn-blue); stroke-width: 2.5; stroke-linecap: round; }
.hn-flow--sec .pf-eu    { fill: #F6F9FD; stroke: var(--hn-edge); stroke-width: 1.5; stroke-dasharray: 6 5; }
.hn-flow--sec .pf-mine  { fill: #FFFFFF; stroke: var(--hn-edge); stroke-width: 2; }
.hn-flow--sec .pf-other { fill: #FFFFFF; stroke: #CBCBCB; stroke-width: 1.2; }
.hn-flow--sec .pf-muted { fill: #6B7A8C; }
.hn-flow--sec .pf-block-line { stroke: var(--hn-accent); stroke-width: 2; stroke-dasharray: 3 3; }
.hn-flow--sec .pf-x { stroke: var(--hn-accent); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.hn-flow--sec .pf-dot { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hn-flow--sec .pf-dot  { offset-path: path("M 98 150 C 128 150, 140 108, 176 108 L 360 108"); animation: secDot 3.6s linear infinite; }
  .hn-flow--sec .pf-sec2 { animation-delay: 1.2s; }
  .hn-flow--sec .pf-sec3 { animation-delay: 2.4s; }
  .hn-flow--sec .pf-mine { animation: secMine 3.6s ease-in-out infinite; }
}
@keyframes secDot  { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 55% { offset-distance: 55%; opacity: 1; } 70%, 100% { offset-distance: 70%; opacity: 0; } }
/* De rand van jouw omgeving wisselt in één stap, nooit rood en blauw tegelijk. */
@keyframes secMine { 0%, 44.9% { stroke: var(--hn-edge); } 45%, 60% { stroke: var(--hn-accent); } 60.1%, 100% { stroke: var(--hn-edge); } }

/* ─────────────────────────────────────────────────────────────
   10. CASES: VOOR EN MET DATAFY (inc/case-flow.php)
   De balk "met Datafy" begint op de volle lengte en krimpt naar het
   resultaat. Het verschil verschijnt in rood, met het percentage eronder.
   De eindstand komt uit --case-scale, die de PHP op de SVG zet.
   ───────────────────────────────────────────────────────────── */
.hn-flow--case .pf-case-after { transform-origin: 16px 0; transform: scaleX(var(--case-scale, 1)); }
.hn-flow--case .pf-case-gap   { fill: var(--hn-red-tint); stroke: var(--hn-accent); stroke-width: 1.2; stroke-dasharray: 4 3; }
.hn-flow--case .pf-case-label { font-size: 22px; font-weight: 700; fill: var(--hn-accent); }
@media (prefers-reduced-motion: no-preference) {
  .hn-flow--case .pf-case-after { animation: caseShrink 8s ease-in-out infinite; }
  .hn-flow--case .pf-case-gap,
  .hn-flow--case .pf-case-label { animation: caseGap 8s ease-in-out infinite; }
}
@keyframes caseShrink { 0%, 10% { transform: scaleX(1); } 40%, 90% { transform: scaleX(var(--case-scale, 1)); } 98%, 100% { transform: scaleX(1); } }
@keyframes caseGap    { 0%, 36% { opacity: 0; } 44%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }