/**
 * home-nieuw.css
 *
 * Alleen de stijlen die template-home-nieuw.php toevoegt bovenop style.css.
 * Bewust een apart bestand: style.css blijft ongewijzigd, zodat een
 * theme-update of een handmatige aanpassing op de live site hier niets raakt.
 * Wordt uitsluitend ingeladen op de template "Home nieuw".
 */

/* ─────────────────────────────────────────────────────────────
   DE HOMEPAGE SCROLLT ALS EEN GEWONE PAGINA
   Het vorige ontwerp gebruikte een snap-scroll container met id
   scrollContainer, waarin elke sectie precies één scherm hoog was.
   style.css zet daarvoor body.home op overflow:hidden en elke section op
   100dvh met overflow:hidden. Deze pagina heeft langere secties en die
   container niet, dus zonder de regels hieronder kan de homepage niet
   scrollen en wordt alles onder de vouw afgekapt.
   Dit zijn dezelfde waarden die het thema al voor alle andere pagina's
   gebruikt (body:not(.home)).
   ───────────────────────────────────────────────────────────── */
html:has(body.home) { height: auto; overflow: visible; }

body.home {
  height: auto;
  overflow: visible;
  display: block;
}

body.home > .site-footer { display: block !important; }

body.home section {
  height: auto;
  scroll-snap-align: unset;
  scroll-snap-stop: unset;
  /* overflow blijft hidden: het hero-beeld en de logomarquee lopen bewust
     buiten de sectie door en moeten daar afgekapt worden, anders krijgt de
     pagina horizontale scroll. */
  overflow: hidden;
}

/* Alleen de hero houdt een minimumhoogte, de rest volgt zijn inhoud. */
body.home section:not(.hero-section) { min-height: 0; }

/* ─────────────────────────────────────────────────────────────
   INHOUD ALTIJD ZICHTBAAR
   style.css zet sectie-inhoud op opacity:0 en wacht op de klasse
   is-active. Die wordt gezet door main.js, maar dat script stopt
   direct als #scrollContainer en #progressDots ontbreken, en die
   horen bij het oude snap-scroll ontwerp. Zonder de regels hieronder
   is de hele pagina onder de hero onzichtbaar.
   Bewust CSS en geen script: de inhoud mag niet afhangen van JavaScript.
   Gevolg is dat de inschuif-animatie op de homepage vervalt.
   ───────────────────────────────────────────────────────────── */
body.home .section-label,
body.home .section-heading,
body.home .section-body,
body.home .section-detail,
body.home .product-screenshot,
body.home .testimonials-intro,
body.home .testimonial-card,
body.home .cta-eyebrow,
body.home .cta-heading,
body.home .cta-sub,
body.home .cta-actions,
body.home .cta-integrations {
  opacity: 1;
  transform: none;
}

/* De testimonialkaarten hebben elk een eigen begin-positie voor de animatie
   (nth-child met translateX/translateY). Zonder is-active blijven ze scheef
   staan, dus die verschuiving hier ook terugzetten. */
body.home .testimonials-grid .testimonial-card:nth-child(1),
body.home .testimonials-grid .testimonial-card:nth-child(2),
body.home .testimonials-grid .testimonial-card:nth-child(3) {
  transform: none;
}

/* De hero hangt in het thema aan fadeUp-animaties met een vertraging en
   fill-mode both. Speelt die animatie niet af, dan blijft de hele hero op
   opacity 0 staan. Animatie hier uit, inhoud gegarandeerd zichtbaar. */
body.home .hero-label,
body.home .hero-heading,
body.home .hero-subheading,
body.home .hero-sub,
body.home .hero-actions,
body.home .hero-stats,
body.home .hero-screenshot,
body.home .logo-slider-band {
  animation: none;
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────────────────────────
   HERO — titel, subtitel en lopende tekst in drie duidelijke trappen
   ───────────────────────────────────────────────────────────── */
.home-nieuw .hero-heading { max-width: 12em; margin-bottom: 14px; }

.home-nieuw .hero-subheading {
  font-size: clamp(19px, 1.9vw, 30px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--azure-46, #0081EA);
  max-width: 15em;
  margin: 0 0 26px;
  /* Bewust geen fade-in animatie: zichtbaarheid mag niet van een animatie
     afhangen, anders blijft de regel onzichtbaar zodra die niet afspeelt. */
}

.home-nieuw .hero-sub { max-width: 30em; }

/* ─────────────────────────────────────────────────────────────
   HERO-SCREENSHOT
   Het beeld loopt zoals altijd over de rechterrand, maar is kleiner dan
   de oorspronkelijke 132%: hooguit 112% van de kolom, en nooit hoger dan
   het scherm onder het menu toelaat (verhouding van het beeld 16:9).
   Het begint op dezelfde hoogte als de tekst en schuift dus niet meer
   onder het menu. Dunne blauwe rand zoals
   de andere beelden; rechts geen rand, want daar loopt het beeld door.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  /* Bovenkant van het beeld op dezelfde hoogte als het label links. */
  body.home .hero-image-col {
    align-items: flex-start;
    padding-top: 70px;
  }
  body.home .hero-image-col .hero-screenshot {
    width: min(112%, calc((100dvh - 240px) * 16 / 9));
    max-height: none;
    border: 1.5px solid var(--hn-edge);
    border-right: 0;
  }
}
@media (max-width: 768px) {
  body.home .hero-image-col {
    padding: 0 24px 24px;
  }
  body.home .hero-image-col .hero-screenshot {
    border: 1.5px solid var(--hn-edge);
    border-radius: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────
   NAVIGATIEKAARTEN — features, doelgroepen, verder lezen
   ───────────────────────────────────────────────────────────── */
.hn-navgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1120px;
  margin: 38px auto 0;
}

a.hn-navcard {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  padding: 24px 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.hn-navcard:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 129, 234, 0.35);
  box-shadow: 0 14px 34px rgba(16, 32, 56, 0.09);
}

.hn-navcard h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--grey-10, #0E1116);
  letter-spacing: -0.01em;
}

.hn-navcard p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--grey-42, #5B6B7E);
  margin: 0 0 14px;
}

.hn-navcard span {
  font-size: 13px;
  font-weight: 600;
  color: var(--azure-46, #0081EA);
}

.hn-navcard span::after { content: " \2192"; }

/* Doorverwijzing onder een tekstblok */
.hn-more {
  display: inline-block;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--azure-46, #0081EA);
  text-decoration: none;
}

.hn-more::after {
  content: " \2192";
  display: inline-block;
  transition: margin-left 0.18s ease;
}

.hn-more:hover::after { margin-left: 5px; }

/* ─────────────────────────────────────────────────────────────
   SECTORENRIJ
   ───────────────────────────────────────────────────────────── */
.hn-sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 26px;
}

a.hn-sector {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--grey-10, #0E1116);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  padding: 9px 18px;
  background: #fff;
  transition: border-color 0.2s ease, color 0.2s ease;
}

a.hn-sector:hover {
  border-color: var(--azure-46, #0081EA);
  color: var(--azure-46, #0081EA);
}

/* ─────────────────────────────────────────────────────────────
   RESULTAAT ALS KLEINE TITEL BOVEN EEN QUOTE
   Geen badge of accentkleur: zelfde kleur als de quote eronder
   (--grey-42), alleen groter en vet. Staat los van de bestaande
   .testimonial-card opmaak, zodat avatar en bedrijfslogo
   onveranderd blijven werken.
   ───────────────────────────────────────────────────────────── */
.hn-metric {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--grey-42, #5B6B7E);
  margin-bottom: 10px;
}

/* ─────────────────────────────────────────────────────────────
   LOOP-DIAGRAM IN DE BEELDKOLOM
   style.css geeft .image-col padding-right 0 en overflow hidden, zodat
   productscreenshots bewust van het scherm aflopen. Een diagram moet juist
   volledig binnen de kolom vallen, vandaar deze modifier.
   ───────────────────────────────────────────────────────────── */
.feature-section .image-col.hn-diagram-col,
.feature-section.reversed .image-col.hn-diagram-col {
  padding: 16px 48px;
  overflow: visible;
}

.hn-loopsvg {
  width: 100%;
  height: auto;
  max-width: 600px;
  display: block;
  margin: 0 auto;
}

.hn-loopsvg text { font-family: inherit; }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hn-navgrid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobiel: geen minimumhoogte op de hero, anders blijft er een leeg wit vlak
   onder de inhoud staan nu de statistiekenrij vervallen is. */
@media (max-width: 768px) {
  body.home .hero-section { min-height: 0; }
}

@media (max-width: 900px) {
  .home-nieuw .hero-heading,
  .home-nieuw .hero-subheading,
  .home-nieuw .hero-sub { max-width: none; }

  .feature-section .image-col.hn-diagram-col,
  .feature-section.reversed .image-col.hn-diagram-col { padding: 16px 24px; }
}

@media (max-width: 640px) {
  .hn-navgrid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   FLOW-DIAGRAMMEN
   Opmaak en beweging van de drie diagrammen uit inc/home-flows.php
   (probleem, oplossing, methode) en van het loop-diagram dat in
   template-home-nieuw.php staat. Alles is CSS, er komt geen
   JavaScript aan te pas.

   Wie beweging heeft uitgezet in zijn systeem ziet de diagrammen stil,
   in de stand waarin ze leesbaar zijn.
   ───────────────────────────────────────────────────────────── */

/* De algemene .hn-flow-regels en de kleuren staan in flows.css. */

/* ── Het probleem ── */
.hn-flow--probleem .fc-card  { fill: #FFFFFF; stroke: var(--hn-edge); stroke-width: 1.5; }
.hn-flow--probleem .fc-truth { stroke: var(--hn-edge); }
.hn-flow--probleem .fc-title { font-size: 16px; font-weight: 700; fill: #0081EA; }
.hn-flow--probleem .fc-sub   { font-size: 12.5px; font-weight: 500; fill: var(--hn-sig-dark); }
.hn-flow--probleem .fc-cap   { font-size: 13px; font-weight: 500; fill: #0C5CA8; }
.hn-flow--probleem .fc-line  { fill: none; stroke: var(--hn-sig); stroke-width: 2.5; stroke-linecap: round; }
.hn-flow--probleem .fc-claim text { font-size: 11.5px; font-weight: 700; fill: var(--hn-sig); }
.hn-flow--probleem .fc-pill-box  { fill: #FFFFFF; stroke: var(--hn-sig); stroke-width: 1; }
.hn-flow--probleem .fc-ico-sig   { fill: var(--hn-blue-tint); }
.hn-flow--probleem .fc-glyph-sig { stroke: var(--hn-blue); }
.hn-flow--probleem .fc-glyph-dot { fill: var(--hn-blue); }
.hn-flow--probleem .fc-count-box { fill: var(--hn-sig-tint); stroke: var(--hn-sig); stroke-width: 1.2; }
.hn-flow--probleem .fc-count-t   { font-size: 14px; font-weight: 700; fill: var(--hn-sig); }

@media (prefers-reduced-motion: no-preference) {
  .hn-flow--probleem .fc-line {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: pbDraw 9s linear infinite;
  }
  .hn-flow--probleem .fc-l2 { animation-delay: 1.2s; }
  .hn-flow--probleem .fc-l3 { animation-delay: 2.4s; }
  .hn-flow--probleem .fc-claim,
  .hn-flow--probleem .fc-count { opacity: 0; animation: pbPop 9s ease-out infinite; }
  .hn-flow--probleem .fc-c2 { animation-delay: 1.2s; }
  .hn-flow--probleem .fc-c3 { animation-delay: 2.4s; }
  .hn-flow--probleem .fc-count { animation-delay: 3.3s; }
}
@keyframes pbDraw {
  0%    { stroke-dashoffset: 260; }
  11%   { stroke-dashoffset: 0; }
  82%   { stroke-dashoffset: 0; opacity: 1; }
  92%   { stroke-dashoffset: 0; opacity: 0; }
  92.1% { stroke-dashoffset: 260; opacity: 1; }
  100%  { stroke-dashoffset: 260; }
}
@keyframes pbPop {
  0%, 9%    { opacity: 0; }
  14%, 82%  { opacity: 1; }
  92%, 100% { opacity: 0; }
}

/* ── De oplossing ── */
.hn-flow--oplossing .fc-chip   { fill: #FFFFFF; stroke: var(--hn-edge); stroke-width: 1.5; }
.hn-flow--oplossing .fc-hub-box { fill: var(--hn-blue); }
.hn-flow--oplossing .fc-chip-t { font-size: 13px; font-weight: 700; fill: #0C5CA8; }
.hn-flow--oplossing .fc-out-t  { font-size: 13px; font-weight: 700; fill: #0081EA; }
.hn-flow--oplossing .fc-wire   { fill: none; stroke: #0081EA; stroke-width: 1.8; opacity: .40; }
.hn-flow--oplossing .fc-dot    { fill: var(--hn-accent); opacity: 0; }   /* zichtbaar via de animatie */
.hn-flow--oplossing .fc-hub-t  { font-size: 15px; font-weight: 700; fill: #FFFFFF; }
.hn-flow--oplossing .fc-hub-s  { font-size: 11.5px; fill: rgba(255,255,255,0.88); }
.hn-flow--oplossing .fc-cap    { font-size: 13px; font-weight: 500; fill: #0C5CA8; }

@media (prefers-reduced-motion: no-preference) {
  .hn-flow--oplossing .fc-dot   { animation: opFlow 3.4s linear infinite; }
  .hn-flow--oplossing .fc-pulse { animation: opPulse 3.4s ease-in-out infinite; transform-origin: 302px 210px; }

  /* Elk punt volgt de draad waar het bij hoort. De baan hoort hier te staan en
     niet in de SVG: zonder offset-path draait de animatie wel, maar blijft het
     punt op zijn plek staan. De waarden komen overeen met de d-attributen van
     de .fc-wire paden in inc/home-flows.php. */
  .hn-flow--oplossing .fc-in1 { offset-path: path("M 184 53 C 232 53, 236 196, 250 196"); animation-delay: 0.0s; }
  .hn-flow--oplossing .fc-in2 { offset-path: path("M 184 125 C 232 125, 236 203, 250 203"); animation-delay: 0.4s; }
  .hn-flow--oplossing .fc-in3 { offset-path: path("M 184 197 C 232 197, 236 210, 250 210"); animation-delay: 0.8s; }
  .hn-flow--oplossing .fc-in4 { offset-path: path("M 184 269 C 232 269, 236 217, 250 217"); animation-delay: 1.2s; }
  .hn-flow--oplossing .fc-in5 { offset-path: path("M 184 341 C 232 341, 236 224, 250 224"); animation-delay: 1.6s; }
  .hn-flow--oplossing .fc-out1 { offset-path: path("M 354 198 C 392 198, 396 90, 424 90"); animation-delay: 2.0s; }
  .hn-flow--oplossing .fc-out2 { offset-path: path("M 354 210 C 392 210, 396 206, 424 206"); animation-delay: 2.4s; }
  .hn-flow--oplossing .fc-out3 { offset-path: path("M 354 222 C 392 222, 396 322, 424 322"); animation-delay: 2.8s; }
}
@keyframes opFlow {
  0%   { offset-distance: 0%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes opPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

/* ── De methode ── */
.hn-flow--methode .fc-row   { fill: #FFFFFF; stroke: var(--hn-edge); stroke-width: 1.2; }
.hn-flow--methode .fc-name  { font-size: 15px; font-weight: 700; fill: #0081EA; }
.hn-flow--methode .fc-q     { font-size: 11px; font-weight: 500; fill: #0C5CA8; }
.hn-flow--methode .fc-out   { font-size: 12.5px; font-weight: 700; fill: #0081EA; }
.hn-flow--methode .fc-arrow { stroke: #0081EA; stroke-width: 2; fill: none; stroke-linecap: round; }
.hn-flow--methode .fc-arrow-head { stroke: var(--hn-accent); }
.hn-flow--methode .fc-handle { fill: var(--hn-accent); }
.hn-flow--methode .fc-bar   { fill: #CBCBCB; }
.hn-flow--methode .fc-bar-a { fill: var(--hn-sig); }
.hn-flow--methode .fc-neg   { fill: var(--hn-sig-dark); }
.hn-flow--methode .fc-ico-neg { color: var(--hn-sig-dark); }
.hn-flow--methode .fc-track { stroke: #CBCBCB; stroke-width: 3; stroke-linecap: round; }
.hn-flow--methode .fc-badge-box { fill: var(--hn-blue-tint); stroke: var(--hn-edge); stroke-width: 1.2; }
.hn-flow--methode .fc-bar-b { fill: #0081EA; }
.hn-flow--methode .fc-cap   { font-size: 13px; font-weight: 500; fill: #0C5CA8; }

@media (prefers-reduced-motion: no-preference) {
  .hn-flow--methode .fc-row   { animation: meRow 10.5s ease-in-out infinite; }
  .hn-flow--methode .fc-badge { opacity: .4; animation: meBadge 10.5s ease-in-out infinite; }
  .hn-flow--methode .fc-r2 .fc-row, .hn-flow--methode .fc-r2 .fc-badge { animation-delay: 3.5s; }
  .hn-flow--methode .fc-r3 .fc-row, .hn-flow--methode .fc-r3 .fc-badge { animation-delay: 7s; }
  .hn-flow--methode .fc-drop   { animation: meDrop 10.5s ease-in-out infinite; transform-origin: 322px 104px; }
  .hn-flow--methode .fc-handle { animation: meSlide 10.5s ease-in-out infinite; animation-delay: 3.5s; }
  .hn-flow--methode .fc-grow   { animation: meGrow 10.5s ease-in-out infinite; animation-delay: 7s; transform-origin: 0 364px; }
}
@keyframes meRow {
  0%, 4%    { stroke-width: 1.2; fill: #FFFFFF; }
  8%, 28%   { stroke-width: 2.6; fill: #FAFCFF; }
  33%, 100% { stroke-width: 1.2; fill: #FFFFFF; }
}
@keyframes meBadge {
  0%, 4%    { opacity: .4; }
  8%, 28%   { opacity: 1; }
  33%, 100% { opacity: .4; }
}
@keyframes meDrop {
  0%, 6%    { transform: scaleY(1); }
  22%, 30%  { transform: scaleY(.42); }
  40%, 100% { transform: scaleY(1); }
}
@keyframes meSlide {
  0%, 6%    { transform: translateX(0); }
  16%       { transform: translateX(-26px); }
  26%       { transform: translateX(26px); }
  33%, 100% { transform: translateX(0); }
}
@keyframes meGrow {
  0%, 6%    { transform: scaleY(1); }
  24%, 32%  { transform: scaleY(1.55); }
  40%, 100% { transform: scaleY(1); }
}

/* ── De loop ── */
.hn-loopsvg rect { stroke: var(--hn-edge); }
.hn-loopsvg marker path { fill: var(--hn-accent); }
@media (prefers-reduced-motion: no-preference) {
  .hn-loopsvg line { stroke-dasharray: 9 7; animation: hnMarch 1.4s linear infinite; }
  .hn-loopsvg rect { animation: hnStep 10s ease-in-out infinite; }
  .hn-loopsvg rect:nth-of-type(2) { animation-delay: 2.5s; }
  .hn-loopsvg rect:nth-of-type(3) { animation-delay: 5s; }
  .hn-loopsvg rect:nth-of-type(4) { animation-delay: 7.5s; }
}
@keyframes hnMarch { to { stroke-dashoffset: -16; } }
@keyframes hnStep {
  0%, 3%    { stroke-width: 1.5; }
  7%, 20%   { stroke-width: 3; }
  25%, 100% { stroke-width: 1.5; }
}

/* ─────────────────────────────────────────────────────────────
   RAND OP DE KAARTEN
   Een effen blauwe rand. Alleen op de
   homepage, zodat de kaarten op de andere pagina's ongemoeid blijven.
   ───────────────────────────────────────────────────────────── */
body.home a.hn-navcard,
body.home .testimonial-card {
  border: 1px solid var(--hn-edge);
}

/* style.css kleurt de rand bij hover lichtblauw. Hier blijft hij in de
   randkleur staan, de lift en de schaduw doen het werk. */
body.home a.hn-navcard:hover { border-color: var(--hn-edge); }

/* De schermafbeelding met rand (.hn-shot) staat in flows.css. */

/* ─────────────────────────────────────────────────────────────
   VERTICAAL RITME
   Eén maat voor de ruimte tussen de secties op de homepage, zodat de
   pagina ademt en de diagrammen los van elkaar staan. De maat groeit
   mee met de schermbreedte: 88px op een telefoon, zo'n 150px op een
   laptop en maximaal 168px op een groot scherm.

   De beeldkolommen waren in style.css precies een schermhoogte hoog
   (100dvh min de navigatie). Daardoor hing de ruimte af van hoe hoog
   iemands scherm is. Hier volgen ze hun inhoud en bepaalt de padding
   de ruimte, op elk scherm even veel.
   ───────────────────────────────────────────────────────────── */
/* De maten --hn-space en --hn-space-inner staan in flows.css. */

/* Tekst- en diagramsecties: de helft boven en de helft onder, zodat twee
   secties samen precies één maat uit elkaar staan. */
body.home .feature-section {
  padding-top: calc(var(--hn-space) / 2);
  padding-bottom: calc(var(--hn-space) / 2);
}
body.home .hero-section + .feature-section { padding-top: var(--hn-space); }
body.home .feature-section .image-col { height: auto; }

/* Binnen de tekstkolom iets meer lucht tussen de onderdelen. */
body.home .feature-section .section-label   { margin-bottom: 20px; }
body.home .feature-section .section-heading { margin-bottom: 24px; }
body.home .feature-section .section-body    { margin-bottom: 20px; }
body.home .feature-section .section-detail  { margin-bottom: 16px; }
body.home .hn-more                          { margin-top: 28px; }

/* Testimonials hebben een eigen achtergrond: een volle maat ervoor, en
   binnen het grijze vlak een volle maat boven en onder. */
body.home .testimonials-section {
  margin-top: calc(var(--hn-space) / 2);
  padding-top: var(--hn-space);
  padding-bottom: var(--hn-space);
}
body.home .testimonials-intro { margin-bottom: var(--hn-space-inner); }

/* Platform, voor wie, sectoren en verder lezen. De eerste krijgt een volle
   maat na het grijze vlak, daarna staan ze een maat uit elkaar. mx-tight
   zette de bovenkant op 30px, dat vervalt hier. */
body.home .mx-section,
body.home .mx-section.mx-tight {
  padding-top: calc(var(--hn-space) / 2);
  padding-bottom: calc(var(--hn-space) / 2);
}
body.home .testimonials-section + .mx-section { padding-top: var(--hn-space); }
body.home .mx-section .mx-center { margin-bottom: var(--hn-space-inner); }
body.home .hn-navgrid { margin-top: 0; }

/* De afsluitende oproep: een maat na de vorige sectie en een volle maat
   tot de footer. */
body.home .cta-section {
  padding-top: calc(var(--hn-space) / 2);
  padding-bottom: var(--hn-space);
}

@media (max-width: 768px) {
  /* Op een telefoon staan beeld en tekst onder elkaar. Tussen die twee
     blijft de ruimte kleiner dan tussen de secties. */
  body.home .feature-section {
    padding-top: calc(var(--hn-space) / 2);
    padding-bottom: calc(var(--hn-space) / 2);
    row-gap: 8px;
  }
  body.home .feature-section .text-col,
  body.home .feature-section.reversed .text-col { padding-bottom: 0; }
}

/* ─────────────────────────────────────────────────────────────
   MOBIEL: STAANDE DIAGRAMMEN OP DE HOMEPAGE
   Onder 560 pixels breed toont de pagina de telefoonversies van de
   diagrammen (klasse hn-flow--m, uit inc/home-flows.php, en
   hn-loopsvg--m in de template). Het wisselen zelf staat in flows.css.
   Hier staat alleen wat afwijkt van de brede versie: een paar
   lettergroottes en alles wat van coördinaten afhangt.
   ───────────────────────────────────────────────────────────── */
.hn-flow--probleem .fc-title-m { font-size: 13.5px; }
.hn-flow--oplossing .fc-src-t  { font-size: 11px; font-weight: 600; fill: var(--hn-blue-dark); }

/* draaipunten van de staafjes in de telefoonversie van de methode */
.hn-flow--methode.hn-flow--m .fc-drop { transform-origin: 83px 120px; }
.hn-flow--methode.hn-flow--m .fc-grow { transform-origin: 0 424px; }

/* beschrijvingen in de telefoonversie van de loop breken vanzelf af */
.hn-loopsvg .hn-loop-desc {
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: #0C5CA8;
}

@media (prefers-reduced-motion: no-preference) {
  /* banen van de stippen in de telefoonversie van de oplossing */
  .hn-flow--oplossing.hn-flow--m .fc-in1 { offset-path: path("M 34 84 C 34 122, 170 122, 170 160"); }
  .hn-flow--oplossing.hn-flow--m .fc-in2 { offset-path: path("M 102 84 C 102 122, 170 122, 170 160"); }
  .hn-flow--oplossing.hn-flow--m .fc-in3 { offset-path: path("M 170 84 C 170 122, 170 122, 170 160"); }
  .hn-flow--oplossing.hn-flow--m .fc-in4 { offset-path: path("M 238 84 C 238 122, 170 122, 170 160"); }
  .hn-flow--oplossing.hn-flow--m .fc-in5 { offset-path: path("M 306 84 C 306 122, 170 122, 170 160"); }
  .hn-flow--oplossing.hn-flow--m .fc-out1 { offset-path: path("M 170 236 C 170 262, 40 262, 40 288 L 40 322 L 60 322"); }
  .hn-flow--oplossing.hn-flow--m .fc-out2 { offset-path: path("M 170 236 C 170 262, 40 262, 40 288 L 40 378 L 60 378"); }
  .hn-flow--oplossing.hn-flow--m .fc-out3 { offset-path: path("M 170 236 C 170 262, 40 262, 40 288 L 40 434 L 60 434"); }
  .hn-flow--oplossing.hn-flow--m .fc-pulse { transform-origin: 170px 198px; }

  /* de terugpijl van de loop loopt mee met de andere pijlen */
  .hn-loopsvg path.hn-return { stroke-dasharray: 9 7; animation: hnMarch 1.4s linear infinite; }
}

/* style.css laat tekst in gespiegelde secties vanaf rechts invliegen
   (translateX 20 tot 32 pixels) en wacht op de klasse is-active om dat
   terug te zetten. Die klasse komt op deze pagina niet, en de regel
   hierboven (INHOUD ALTIJD ZICHTBAAR) is te zwak om ertegenop te
   kunnen. Daardoor stonden de koppen van de oplossing en de loop tot
   32 pixels te ver naar rechts, en viel op een telefoon de laatste
   letter weg. */
body.home .feature-section.reversed .section-label,
body.home .feature-section.reversed .section-heading,
body.home .feature-section.reversed .section-body,
body.home .feature-section.reversed .section-detail {
  transform: none;
}