/* ============================================================================
   NexON — /doorbraak
   Hangt áchter de echte stylesheets van de site: basis.css, p-site.css en
   shell.css. Die leveren de balk, de bewegende hero, het glaspaneel, de
   knoppen, de voet en de typografie. Hier staat alleen wat /doorbraak extra
   heeft: de blokkadeteller, de drie treden, het dossier en het aanbod.

   De pagina's dragen data-pagina=home, want daar hangen de hero-regels van
   p-site.css aan. Verander dat niet zonder die regels mee te nemen.
   ========================================================================= */

/* ------------------------------------------------- twee lettertypen ------
   De site kent twee families: Clash Display voor de koppen en General Sans
   voor al het andere. De kleine kapitaalregels (prijsregel, teller,
   sectiekopjes, formulierlabels, datumblokjes, rollen, voetregels) stonden
   in de monospace van het besturingssysteem en zagen er daardoor op elk
   apparaat anders uit: Consolas hier, Menlo daar. Die derde familie is weg.
   --mono is nu General Sans, en alle kleine kapitaalregels delen hieronder
   één labelstijl. Alleen in het rapport (het papier: .rapportblad,
   .dossier, .uit-rapport en de pdf-kop) blijft de monospace staan; dat
   wordt later apart bekeken. Custom properties erven, dus de pin op die
   vier geldt voor alles wat erin staat. */
:root{--mono:'General Sans',system-ui,sans-serif}
.rapportblad,.dossier,.uit-rapport,.pdf-kop{--mono:ui-monospace,Menlo,Consolas,monospace}

/* de labelstijl: één regel voor elke kleine kapitaalregel buiten het rapport.
   Proportioneel schrift heeft minder spatiëring nodig dan mono, vandaar
   .12em in plaats van .14 tot .22em, en 600 omdat 11px in 400 wegvalt.
   Afwijkende maten (de prijsregel en de teller op 11.5px, de datumblokjes
   kleiner) staan bij de regel zelf. De twee laatste selectors komen uit
   p-site.css en hebben daarom dezelfde voorloper nodig; .vak-kop .vak-kicker
   staat er zwaarder bij omdat .vak-kop p anders de maat van de intro geeft. */
.pijnrij b,.cta-bij,.route .nr,.route .meta,.trede .fase,.logolabel,.kaart .wat,
.mens .rol,.veld label,.teller-kop,.voorproef>p,.aanbod-kop span,.smalkop span,
.vak-kicker,.vak-kop .vak-kicker,.rooster-kop,.md-kop,.md-over,.kal-dag small,.scan-tel,.of,
.ask-start .ask-lbl i,.mini-kop,.riscorij em,
html[data-pagina=home] .final-body .label,html[data-pagina=home] .fc-when{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
}

/* ------------------------------------------------------------------ hero --
   Eén kop die mag doorlopen. De homepage zet nowrap op zijn eigen tweeregelige
   kop; hier is de kop langer en moet hij juist wél afbreken. */
html[data-pagina=home] .hero-left h1{
  white-space:normal!important;
  font-size:clamp(30px,3.5vw,46px)!important;
  line-height:1.05;letter-spacing:-1.4px;font-weight:600;margin-bottom:0;
}
html[data-pagina=home] .hero-left h1 em{font-style:normal;color:var(--lime)}
html[data-pagina=home] .hero-lead{max-width:48ch;min-height:0}
html[data-pagina=home] .hero-kort{min-height:auto;padding:128px 24px 76px}
html[data-pagina=home] .hero-kort .hero-panel{max-width:1040px}

/* de frustraties, als waarschuwingslampjes boven de kop */
.pijnrij{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pijnrij b{
  color:#FFC2AD;background:rgba(255,122,85,.14);border:1px solid rgba(255,122,85,.32);
  border-radius:100px;padding:5px 11px;
}

/* de drie USP's: de frustratie omgedraaid, één regel per stuk. Dit is het
   blok uit het communicatiecanvas, letterlijk. */
.flips{list-style:none;display:flex;flex-direction:column;gap:10px;margin:22px 0 0}
.flips li{
  display:block;position:relative;padding-left:24px;
  font-size:clamp(15px,1.25vw,17.5px);line-height:1.35;color:rgba(255,255,255,.84);
}
.flips li::before{content:"\2014";position:absolute;left:0;top:0;color:var(--lime);font-weight:600}
.flips b{color:#fff;font-weight:600}

.knoprij{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:26px}

/* één hoofdstap, met de voorwaarden eronder in plaats van in de knop */
.cta{margin-top:28px}
.cta .btn{font-size:16px;padding:16px 28px}
.cta-bij{
  margin-top:11px;font-size:11.5px;color:rgba(255,255,255,.52);
}

.bijregel{margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.5}
.onderregel{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;color:rgba(255,255,255,.5)}
.onderregel span{display:flex;align-items:center;gap:7px}
.onderregel span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lime);flex:none}

/* --------------------------------------------------------- de secties ---- */
.vak{padding:clamp(66px,8vw,110px) 0;border-top:1px solid var(--line);position:relative}
.vak-kop{margin-bottom:42px;max-width:62ch}
.vak-kop h2{font-size:clamp(30px,4vw,50px);line-height:1.02;letter-spacing:-1.6px;font-weight:500;max-width:20ch}
.vak-kop h2 em{font-style:normal;color:var(--lime)}
.vak-kop p{margin-top:16px;font-size:clamp(15px,1.2vw,16.5px);line-height:1.6;color:var(--muted);max-width:60ch}
.vak-kop p strong{color:var(--text);font-weight:600}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:900px){.duo{grid-template-columns:1fr;gap:32px}}

/* ===================== de drie routes, naast elkaar ====================== */
/* Links en rechts rustig, het midden eruit. Dat midden is het product voor
   leads: de €250. Daar wordt op gestuurd; het kernproduct komt daarna
   vanzelf, en noemt op deze plek dus geen bedrag. */
.routes{
  display:grid;grid-template-columns:1fr 1.22fr 1fr;
  gap:clamp(14px,1.8vw,26px);align-items:stretch;margin-top:48px;
}
@media(max-width:1000px){.routes{grid-template-columns:1fr;gap:16px}}

.route{
  display:flex;flex-direction:column;position:relative;
  background:rgba(255,255,255,.028);border:1px solid var(--line);border-radius:20px;
  padding:30px 28px 28px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.route:hover{border-color:var(--line-2);background:rgba(255,255,255,.05)}

.route .nr{color:var(--muted-2);margin-bottom:16px}
/* de herkenningsregel: hier moet de lezer zichzelf aanwijzen */
/* De herkenregel is een stille constatering, geen kop. Normaal gewicht,
   iets gedempt: de lezer moet zichzelf erin herkennen, niet aangesproken
   worden. */
.route .herken{
  font-size:clamp(15px,1.2vw,16.5px);font-weight:400;line-height:1.4;
  letter-spacing:-.1px;color:rgba(255,255,255,.78);
}
/* geen streep tussen banner en titel: de witruimte doet het werk */
.route hr{border:0;margin:14px 0 0}
.route h3{
  font-family:'Clash Display','General Sans',system-ui,sans-serif;
  font-size:clamp(25px,2.4vw,31px);font-weight:600;letter-spacing:-1.1px;line-height:1;
  color:#fff;margin-bottom:14px;
}
.route p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.route p strong{color:var(--text);font-weight:600}
.route .meta{
  color:var(--muted-2);
  line-height:1.7;margin:26px 0 16px;padding-top:18px;border-top:1px solid var(--line);
}
.route .meta b{color:var(--text)}
.route .btn{margin-top:auto;width:100%;justify-content:center}

/* het midden: groter, lichter, en met gloed eromheen */
.route.uit{
  z-index:2;
  margin:clamp(-14px,-1.4vw,0px) 0;
  padding:38px 34px 34px;
  background:linear-gradient(170deg,rgba(198,255,0,.1),rgba(198,255,0,.035) 55%,rgba(255,255,255,.03));
  border-color:rgba(198,255,0,.42);
  box-shadow:0 0 0 1px rgba(198,255,0,.1),0 26px 70px rgba(0,0,0,.5),0 0 90px rgba(198,255,0,.16);
}
.route.uit::before{
  content:"";position:absolute;inset:-2px;border-radius:22px;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 50% at 50% 0%,rgba(198,255,0,.3),transparent 70%);
  filter:blur(18px);
}
.route.uit:hover{border-color:rgba(198,255,0,.7);transform:translateY(-3px)}
.route.uit .nr{color:var(--lime)}
.route.uit .herken{font-size:clamp(16px,1.35vw,18.5px)}
.route.uit h3{font-size:clamp(29px,2.9vw,38px)}
.route.uit p{font-size:15.5px;color:rgba(255,255,255,.82)}
.route.uit .meta{color:rgba(255,255,255,.62);border-top-color:rgba(198,255,0,.22)}
.route.uit .meta b{color:var(--lime)}
.route.uit hr{border-top-color:rgba(198,255,0,.3)}
@media(max-width:1000px){.route.uit{margin:0;padding:32px 26px 30px}}
@media (prefers-reduced-motion:reduce){.route,.route.uit{transition:none}}

/* ------------------------------------------------------- de drie treden -- */
.werkwijze{display:flex;flex-direction:column;gap:14px}
.trede{
  display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:clamp(20px,3vw,40px);align-items:center;
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:20px;
  padding:28px 30px;position:relative;overflow:hidden;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .22s ease,background .22s ease;
}
.trede:hover{border-color:var(--line-2);background:rgba(255,255,255,.055)}
.trede::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:rgba(255,255,255,.14)}
.trede.nu::before,.trede.kern::before{background:var(--lime)}
.trede.kern{border-color:rgba(198,255,0,.3);background:rgba(198,255,0,.045)}
@media(max-width:860px){.trede{grid-template-columns:1fr;gap:18px;padding:24px 22px}}
.trede .fase{color:var(--muted-2);margin-bottom:8px}
.trede h3{font-size:clamp(18px,1.8vw,22px);font-weight:500;letter-spacing:-.5px;margin-bottom:9px;color:#fff}
.trede p{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:62ch}
.trede strong{color:var(--text);font-weight:600}
.trede-rechts{text-align:right}
@media(max-width:860px){.trede-rechts{text-align:left}}
.trede-rechts b{display:block;font-size:clamp(22px,2.2vw,29px);font-weight:500;letter-spacing:-1px;line-height:1;color:#fff}
.trede-rechts small{display:block;margin-top:6px;font-size:11.5px;color:var(--muted-2);line-height:1.45}
.trede-rechts .btn{margin-top:15px;width:100%;justify-content:center}
@media(max-width:860px){.trede-rechts .btn{width:auto}}

/* --------------------------- Operatie Regie, als dossier op tafel -------- */
.dossier{
  position:relative;background:#0E0F0C;border:2px solid var(--lime);border-radius:16px;
  padding:26px 28px 22px;max-width:470px;box-shadow:0 24px 60px rgba(0,0,0,.5);
}
/* Het ezelsoor uit het 100-dagenplan is hier weggelaten: dat werkt alleen op
   een effen ondergrond, en hier ligt video achter de kaart. In plaats daarvan
   een gloed, zodat het dossier los van de achtergrond komt. */
.dossier{box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 60px rgba(198,255,0,.1)}
.dossier .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.dossier h3{font-size:clamp(25px,2.6vw,33px);font-weight:600;letter-spacing:-1.1px;line-height:1;margin-bottom:6px;color:#fff}
.dossier .sub{font-size:14px;color:rgba(255,255,255,.72);line-height:1.4}
.dossier hr{border:0;border-top:1px solid rgba(255,255,255,.2);margin:16px 0}
.dossier ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.dossier li{display:flex;gap:10px;font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.4}
.dossier li::before{content:"\2014";color:rgba(255,255,255,.4);flex:none}
.dossier .bodem{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.dossier .prijs{font-size:clamp(26px,2.8vw,34px);font-weight:600;color:var(--lime);letter-spacing:-1.2px;line-height:1}
.dossier .per{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}

/* ------------------------------------------------------------- bewijs ---- */
.logolabel{color:var(--muted-2)}
.logorij{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22px,3.4vw,46px);margin-top:24px}
.logorij img{height:26px;width:auto;opacity:.45;filter:grayscale(1) brightness(1.8);transition:opacity .25s ease}
.logorij img:hover{opacity:.8}

.rij3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.rij3{grid-template-columns:1fr}}
.kaart{
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:18px;padding:26px 24px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .22s ease,transform .22s ease;
}
.kaart:hover{border-color:var(--line-2);transform:translateY(-3px)}
.kaart .wat{color:var(--muted-2);margin-bottom:12px}
.kaart h3{font-size:17px;font-weight:500;letter-spacing:-.4px;line-height:1.25;margin-bottom:11px;color:#fff}
.kaart p{font-size:14px;color:var(--muted);line-height:1.6}
.kaart dl{display:flex;flex-direction:column;gap:9px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.kaart dl>div{display:flex;justify-content:space-between;gap:14px;font-size:13.5px}
.kaart dt{color:var(--muted-2)}
.kaart dd{font-weight:500;text-align:right;color:var(--text)}
.kaart dd.goed{color:var(--lime)}

.mensen{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:800px){.mensen{grid-template-columns:1fr}}
.mens{display:flex;gap:18px;align-items:flex-start}
.mens img{width:74px;height:74px;border-radius:14px;object-fit:cover;flex:none;border:1px solid var(--line-2)}
.mens .rol{color:var(--muted-2);margin-bottom:4px}
.mens h3{font-size:16.5px;font-weight:500;letter-spacing:-.4px;margin-bottom:7px;color:#fff}
.mens p{font-size:13.5px;color:var(--muted);line-height:1.6}

/* ------------------------------------------------------------ lijstjes --- */
.vink{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:20px}
.vink li{display:flex;gap:11px;font-size:14.5px;color:var(--muted);line-height:1.5}
.vink li svg{width:17px;height:17px;flex:none;color:var(--lime);margin-top:3px}
.vink li b{color:var(--text);font-weight:600}
.kruis li svg{color:#FF7A55}

/* ------------------------------------------------------------- vragen ---- */
.vragen{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.03)}
.vragen details{border-bottom:1px solid var(--line)}
.vragen details:last-child{border-bottom:0}
.vragen summary{
  padding:18px 24px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;
  font-size:16.5px;font-weight:500;letter-spacing:-.3px;transition:color .2s ease;
}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary:hover,.vragen details[open] summary{color:var(--lime)}
.vragen summary::after{content:"+";font-family:var(--mono);color:var(--lime);font-size:18px;flex:none;line-height:1.2}
.vragen details[open] summary::after{content:"\2013"}
.vragen .antwoord{padding:0 24px 20px;font-size:14.5px;color:var(--muted);line-height:1.65;max-width:76ch}
.vragen .antwoord p+p{margin-top:10px}
.vragen a{text-decoration:underline}

/* --------------------------------------------------------------- slot ---- */
.slot{padding:clamp(72px,9vw,115px) 0;border-top:1px solid var(--line);text-align:center}
.slot h2{font-size:clamp(30px,4vw,50px);line-height:1.02;letter-spacing:-1.6px;font-weight:500;max-width:22ch;margin:0 auto}
.slot h2 em{font-style:normal;color:var(--lime)}
.slot p{margin:18px auto 0;font-size:16px;color:var(--muted);line-height:1.6;max-width:60ch}
.slot .knoprij{justify-content:center}

/* --------------------------------------------------------- formulieren --- */
.formulier{display:flex;flex-direction:column;gap:13px}
.veld{display:flex;flex-direction:column;gap:6px}
.veld-duo{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:560px){.veld-duo{grid-template-columns:1fr}}
.veld label{color:rgba(255,255,255,.52)}
.veld input,.veld textarea{
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.16);border-radius:12px;
  padding:13px 15px;font-size:15px;width:100%;color:#fff;font-family:inherit;
  transition:border-color .2s ease,background .2s ease;
}
.veld textarea{min-height:100px;resize:vertical;line-height:1.5}
.veld input::placeholder,.veld textarea::placeholder{color:rgba(255,255,255,.3)}
.veld input:focus,.veld textarea:focus{outline:none;border-color:var(--lime);background:rgba(0,0,0,.42)}
.veld input[aria-invalid=true],.veld textarea[aria-invalid=true]{border-color:#FF7A55}
.honing{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.melding{font-size:13.5px;line-height:1.5;min-height:1.2em}
.melding.fout{color:#FF7A55}
.melding.goed{color:var(--lime)}
.klein{font-size:12px;color:var(--muted-2);line-height:1.5}
.klein a{text-decoration:underline}

/* ===================== de blokkadeteller — het cadeautje ================= */
/* Eén grote JA, dan vijf tikken, dan hún bedrag op het scherm. De balk is
   dezelfde batterij als in de assessment op de homepage. */
.teller-kop{
  color:var(--lime);
  margin-bottom:11px;display:flex;align-items:center;gap:9px;
}
.teller-kop::before{content:"";width:18px;height:1px;background:var(--lime)}
.teller-body{min-height:392px;display:flex;flex-direction:column}
/* op smal staat de teller onder de tekst; dan is een vaste hoogte alleen maar
   een gat onder de knoppen. */
@media(max-width:920px){.teller-body{min-height:0}}

.batterij{position:relative;height:30px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);overflow:hidden;margin-bottom:20px}
.batterij .vul{position:absolute;top:0;left:0;bottom:0;z-index:1;border-radius:7px;background:linear-gradient(90deg,#5f9e00,#b6f000 55%,var(--lime));transition:width .55s cubic-bezier(.4,0,.2,1)}
.batterij .segs{position:absolute;inset:0;z-index:2;display:flex;pointer-events:none}
.batterij .segs i{flex:1;border-right:1px solid rgba(10,10,10,.2)}
.batterij .segs i:last-child{border-right:0}
.batterij .lbl{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:3;font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.4px;color:#0A0A0A}
.batterij .bolt{position:absolute;top:50%;z-index:4;transform:translate(-135%,-50%);transition:left .55s cubic-bezier(.4,0,.2,1);line-height:0;animation:boltpuls 1.25s ease-in-out infinite}
.batterij .bolt svg{width:16px;height:16px;filter:drop-shadow(0 0 3px rgba(0,0,0,.4))}
@keyframes boltpuls{0%,100%{opacity:1}50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.batterij .bolt{animation:none}}

.teller-vraag{font-size:clamp(20px,2.3vw,26px);font-weight:500;letter-spacing:-.5px;line-height:1.14;color:#fff;margin-bottom:8px}
.teller-vraag em{font-style:normal;color:var(--lime)}
.teller-sub{font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.45;margin-bottom:17px}

/* de grote JA bovenaan: het eerste van de vijf keer ja */
.jarij{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.ja-groot{
  width:100%;background:var(--lime);color:#0A0A0A;border:0;border-radius:14px;padding:17px 20px;
  font:inherit;font-weight:700;font-size:16.5px;letter-spacing:-.3px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;
  transition:transform .18s ease,background .18s ease;
}
.ja-groot:hover{transform:translateY(-2px);background:#d6ff3d}
.ja-groot::after{content:"\2192";font-size:18px}
.ja-klein{
  width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);border-radius:14px;padding:14px 20px;font:inherit;font-size:14.5px;
  text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease;
}
.ja-klein:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.11)}

/* het voorproefje onder de JA-knoppen: laat zien wat eruit komt, zodat de
   rechterkolom niet leeg staat en de klik iets belooft */
.voorproef{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.voorproef>p{color:rgba(255,255,255,.45);margin-bottom:12px}
.voorproef>div{display:flex;align-items:center;gap:11px;padding:6px 0;font-size:13.5px;color:rgba(255,255,255,.6)}
.voorproef i{width:8px;height:8px;border-radius:50%;flex:none;opacity:.55}
.voorproef i.r{background:#FF7A55}
.voorproef i.a{background:#FFC93C}
.voorproef .bedragregel{
  margin-top:10px;padding-top:12px;border-top:1px dashed var(--line-2);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.voorproef .bedragregel b{
  font-size:26px;font-weight:600;letter-spacing:-1px;color:var(--lime);line-height:1;
  font-family:'Clash Display','General Sans',system-ui,sans-serif;
}
.voorproef .bedragregel span{font-size:12.5px;color:rgba(255,255,255,.5)}

.opts{display:flex;flex-direction:column;gap:8px}
.opt{
  width:100%;text-align:left;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  color:#fff;border-radius:13px;padding:13px 15px;font:inherit;font-size:14.5px;font-weight:500;
  letter-spacing:-.2px;display:flex;align-items:center;gap:12px;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.opt:hover{border-color:var(--lime);background:rgba(198,255,0,.1);transform:translateX(3px)}
.opt .k{
  flex:none;width:23px;height:23px;border-radius:7px;display:grid;place-items:center;
  font-family:var(--mono);font-size:11.5px;font-weight:700;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);transition:background .18s ease,color .18s ease;
}
.opt:hover .k{background:var(--lime);color:#0A0A0A}
.teller-terug{margin-top:13px;font-size:12px;color:rgba(255,255,255,.5);text-decoration:underline;background:none;border:0;cursor:pointer;align-self:flex-start;font-family:inherit}

/* de uitslag: eerst de lampjes, dan hún bedrag */
.rag{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.rag>div{display:flex;align-items:flex-start;gap:11px;font-size:13px;line-height:1.45;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:10px 13px}
.rag i{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px}
.rag i.r{background:#FF7A55}
.rag i.a{background:#FFC93C}
.rag i.g{background:var(--lime)}
.rag b{font-weight:600;color:#fff}
.rag span{color:rgba(255,255,255,.6)}

.bedrag{font-size:clamp(38px,5.6vw,58px);font-weight:600;letter-spacing:-2.4px;line-height:1;color:var(--lime);display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}
.bedrag u{text-decoration:none;font-size:16px;font-weight:400;color:rgba(255,255,255,.66);letter-spacing:-.1px}
.bedrag-bij{display:block;margin-top:10px;font-size:11.5px;color:rgba(255,255,255,.46);line-height:1.5;max-width:48ch}
.rekenrij{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;color:rgba(255,255,255,.62)}
.rekenrij b{color:#fff;font-weight:600;text-align:right}
.rekenrij b.slecht{color:#FF7A55}

.vangst{background:rgba(198,255,0,.07);border:1px solid rgba(198,255,0,.26);border-radius:14px;padding:15px;margin-top:18px}
.vangst label{display:block;font-size:12.5px;color:rgba(255,255,255,.8);margin-bottom:11px;line-height:1.45}
.vangst-rij{display:flex;gap:8px}
.vangst input{flex:1;min-width:0;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.2);border-radius:11px;padding:12px 14px;font:inherit;font-size:14.5px;color:#fff}
.vangst input::placeholder{color:rgba(255,255,255,.35)}
.vangst input:focus{outline:none;border-color:var(--lime)}
.vangst button{background:var(--lime);color:#0A0A0A;border:0;border-radius:11px;padding:12px 18px;font:inherit;font-weight:600;font-size:14.5px;white-space:nowrap;cursor:pointer}
.vangst button:disabled{opacity:.55;cursor:default}
.vangst small{display:block;margin-top:10px;font-size:11.5px;color:rgba(255,255,255,.45);line-height:1.45}
@media(max-width:560px){.vangst-rij{flex-direction:column}.vangst button{width:100%}}
.teller-opnieuw{margin-top:13px;font-size:12px;color:rgba(255,255,255,.45);text-decoration:underline;background:none;border:0;cursor:pointer;font-family:inherit}
.klaar{text-align:center;padding:12px 0}
.klaar .vinkje{width:52px;height:52px;border-radius:50%;background:rgba(198,255,0,.12);border:1px solid rgba(198,255,0,.4);display:grid;place-items:center;color:var(--lime);font-size:24px;margin:0 auto 16px}

/* ===================== de bedankpagina: het aanbod ======================= */
.aanbod{border:1px solid rgba(198,255,0,.3);border-radius:18px;overflow:hidden;background:rgba(198,255,0,.05)}
.aanbod-kop{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:15px 22px;background:rgba(198,255,0,.1);border-bottom:1px solid rgba(198,255,0,.22)}
.aanbod-kop b{font-size:19px;font-weight:500;letter-spacing:-.5px;color:#fff}
.aanbod-kop span{color:var(--lime)}
.aanbod-in{padding:20px 22px 22px}
.aanbod-in>p{font-size:14.5px;color:rgba(255,255,255,.7);line-height:1.6;margin-bottom:16px}
.rolt{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
/* block in plaats van flex: anders wordt een <strong> in de regel een eigen
   flex-item en breekt de zin op een rare plek af. */
.rolt li{display:block;position:relative;padding-left:22px;font-size:14px;color:rgba(255,255,255,.8);line-height:1.45}
.rolt li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--lime);font-weight:700}
.rolt strong{color:#fff;font-weight:600}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:15px}
@media(max-width:520px){.slots{grid-template-columns:1fr}}
.slot-knop{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;
  padding:11px 10px;text-align:center;font:inherit;font-size:13.5px;font-weight:600;color:#fff;cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.slot-knop small{display:block;margin-top:3px;font-weight:400;font-size:11.5px;color:rgba(255,255,255,.55)}
.slot-knop:hover{border-color:rgba(198,255,0,.5);background:rgba(198,255,0,.08)}
.slot-knop.gekozen{border-color:var(--lime);background:rgba(198,255,0,.16)}
.slot-knop.gekozen small{color:rgba(255,255,255,.78)}
.mini{margin-top:13px;font-size:11.5px;color:rgba(255,255,255,.45);line-height:1.55}

/* de video op de bedankpagina */
.video{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#000;aspect-ratio:16/10}
.video video{width:100%;height:100%;object-fit:cover;display:block}
.video-bij{margin-top:11px;font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.5}

/* ===================== smalle pagina's: scan en bedankt ================== */
/* Geen menu, geen uitgangen: invullen of weggaan. */
.smalkop{position:absolute;top:0;left:0;right:0;z-index:40;padding:24px 0}
.smalkop .container{display:flex;justify-content:space-between;align-items:center;gap:16px}
.smalkop img{height:34px;width:auto}
.smalkop span{color:rgba(255,255,255,.55)}
.smalvoet{padding:20px 0 28px;font-size:12px;color:var(--muted-2);position:relative;z-index:5}
.smalvoet .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.smalvoet a:hover{color:var(--lime)}

/* beweging bij scrollen */
.op{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.op.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.op{opacity:1;transform:none;transition:none}}

/* ============ aanvullingen op de secties die van de site komen ========== */
/* De flowchart, de work-tiles, de manifestquote en de final-card komen uit
   p-site.css. Hier alleen wat /doorbraak extra nodig heeft. */

.flowchart{margin-top:8px}
.fc-bij{font-size:12px!important;color:var(--muted-2)!important;line-height:1.5;margin-top:12px}
.fc-seg .fc-in h3{margin-top:2px}

/* drie projecten naast elkaar; p-site zet er op een smaller punt twee neer */
.work-tiles{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.work-tiles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.work-tiles{grid-template-columns:1fr}}

/* de merkregel onder de quote */
.manifest-bij{
  margin-top:26px;text-align:center;
  font-family:'Clash Display','General Sans',system-ui,sans-serif;
  font-size:clamp(20px,2.4vw,30px);font-weight:500;letter-spacing:-.8px;color:var(--text);
}
.manifest-bij em{font-style:normal;color:var(--lime)}

/* de laatste kaart: dezelfde opmaak, maar onze eigen onderregel */
.final-body .cta-bij{margin-top:16px}


/* ============================== de iconen =============================== */
/* Eén set uit /doorbraak/iconen, als sprite in elke pagina. Lijndikte en
   kleur staan hier, zodat <use> overal hetzelfde oogt. */
.iconenblad{position:absolute;width:0;height:0;overflow:hidden}
.ico{
  width:20px;height:20px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}

/* de drie USP's met icoon ervoor */
.flips li{display:flex;align-items:center;gap:13px;padding-left:0}
.flips li::before{content:none}
.flips .ico{width:22px;height:22px;color:var(--lime)}

/* ======================= de merken, in hetzelfde blok =================== */
.merken{text-align:center;padding-bottom:clamp(44px,5vw,70px);margin-bottom:clamp(44px,5vw,70px);border-bottom:1px solid var(--line)}
.merken .logolabel{margin-bottom:26px}
.merken .logorij{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(22px,3.4vw,50px);margin-top:0;
}
.merken .logorij img{height:clamp(26px,2.9vw,40px);opacity:.6}
@media(max-width:700px){.merken .logorij{gap:20px 26px}.merken .logorij img{height:24px}}
.merken .logorij img:hover{opacity:1}

/* ============== de assessment, opmaak van de homepage =================== */
/* .ask-btn, .ask-ico en .ask-chev komen uit p-site.css. Hier alleen de
   aanvullingen die de teller nodig heeft. */
.ask-buttons .ask-btn{font-family:inherit}
.ask-btn .ask-ico .ico{width:17px;height:17px;stroke-width:2.4}
.ask-chev{flex:none}

/* de grote JA houdt de hoofdkleur; de tweede knop volgt de assessment */
.ja-klein{
  background:rgba(255,255,255,.92);color:#0a0a0a;border:1px solid transparent;
  padding:13px 18px;border-radius:14px;font-size:15px;font-weight:500;
}
.ja-klein:hover{background:#fff;border-color:transparent;box-shadow:0 12px 28px rgba(0,0,0,.55),0 0 0 1px rgba(198,255,0,.4) inset}

/* het voorproefje met iconen in plaats van stippen */
.voorproef>div{gap:13px}
.voorproef .ico{width:19px;height:19px;color:var(--lime);opacity:.85}

/* grotere variant voor de zes assen en soortgelijke kaarten */
.ico-groot{width:26px;height:26px;color:var(--lime);stroke-width:2;margin-bottom:14px}
/* icoon voor de faselabels op de kernproductpagina */
.trede .fase{display:flex;align-items:center;gap:9px}
.trede .fase .ico{width:16px;height:16px;color:var(--lime)}

/* ===================== uit de brandsheet: Flow + Mensen ================= */
/* De aanbevolen combinatie uit /doorbraak/brandsheet: een diagonale waas die
   links dicht is en rechts open blijft. Geeft diepte en houdt de kop leesbaar
   zonder het beeld plat te drukken. */
.hero-overlay{
  background:
    linear-gradient(95deg,rgba(10,10,10,.82) 6%,rgba(10,10,10,.42) 54%,rgba(10,10,10,.2) 100%),
    linear-gradient(0deg,rgba(9,12,10,.78),transparent 58%),
    radial-gradient(ellipse 100% 88% at 50% 44%,transparent 26%,rgba(9,12,10,.46) 100%);
}

/* uit de variant Puls: de hoofdknop gloeit */
.btn-primary,.btn-solid{box-shadow:0 0 28px rgba(198,255,0,.32)}
.btn-primary:hover,.btn-solid:hover{box-shadow:0 0 36px rgba(198,255,0,.5)}

/* ========================= de balk rechts uitgelijnd ==================== */
/* De nav-links schuiven naar rechts en houden dezelfde afstand tot de knop
   als tot elkaar. */
.nav-inner{justify-content:flex-start}
.nav-inner .logo{margin-right:auto}
.nav-links{gap:30px;margin-right:30px}
@media(max-width:900px){.nav-links{margin-right:0}}

/* ============================ de koffiebeker ============================ */
/* Hoort bij het koffiemoment: een bekertje met damp die opstijgt. Inline in
   de knop, niet via <use>, anders pakt de animatie de slierten niet. */
.kop{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.kop .damp{opacity:0;transform-origin:center bottom;animation:damp 2.8s ease-in-out infinite}
.kop .d2{animation-delay:.45s}
.kop .d3{animation-delay:.9s}
@keyframes damp{
  0%   {opacity:0;transform:translateY(2px) scaleY(.7)}
  28%  {opacity:.9}
  70%  {opacity:.35}
  100% {opacity:0;transform:translateY(-4px) scaleY(1.15)}
}
@media (prefers-reduced-motion:reduce){.kop .damp{animation:none;opacity:.55}}

/* ======================= bliksem in de kop ============================== */
.bliksem{
  display:inline-block;width:.62em;height:.62em;vertical-align:baseline;
  margin:0 .04em 0 .12em;fill:var(--lime);
  filter:drop-shadow(0 0 10px rgba(198,255,0,.55));
}

/* ============= twee knoppen die niet om dezelfde aandacht vechten ======= */
/* Links staat de hoofdstap: lime pil met gloed en koffiebeker. Rechts begint
   de assessment, en die spreekt zijn eigen taal — de witte knoppen die na de
   eerste klik ook komen. Zo botsen ze niet. */
.ask-start{
  background:#fff;color:#0a0a0a;font-weight:600;font-size:16px;
  padding:15px 18px 15px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(198,255,0,.55) inset;
}
.ask-start .ask-ico{background:var(--lime);color:#0a0a0a}
.ask-start .ask-ico svg{width:15px;height:15px}
.ask-start .ask-chev{opacity:1;color:#0a0a0a}
.ask-start:hover{box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 0 2px var(--lime) inset}
.ask-start:hover .ask-chev{color:#0a0a0a;transform:translateX(2px)}

/* de tweede keuze blijft bewust rustig */
.ja-klein{
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.16);box-shadow:none;
}
.ja-klein:hover{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.3);box-shadow:none}


/* ================== de routekaarten: een smalle beeldband ============== */
.routeband{
  display:block;position:relative;overflow:hidden;border-radius:12px;
  margin:14px 0 0;aspect-ratio:6.6/1;border:1px solid rgba(255,255,255,.1);
}
.routeband img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.routeband::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.1),rgba(10,10,10,.55));
}
.route:hover .routeband img{transform:scale(1.06)}
.route.uit .routeband{aspect-ratio:5.8/1;border-color:rgba(198,255,0,.28)}
.route.uit .routeband::after{background:linear-gradient(180deg,rgba(10,10,10,.05),rgba(16,22,0,.5))}

/* ============= het dossier als miniatuur beslisdocument ================ */
.dossier{
  position:relative;background:linear-gradient(170deg,#121409,#0C0D08 58%);
  border:2px solid var(--lime);border-radius:16px;padding:22px 24px 20px;max-width:470px;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 60px rgba(198,255,0,.12);
}
.dos-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:15px}
.dos-merk{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--lime)}
.dos-merk .ico{width:15px;height:15px}
.dos-nr{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;color:var(--muted-2)}
.dossier h3{font-size:clamp(23px,2.4vw,30px);font-weight:600;letter-spacing:-1px;line-height:1;margin-bottom:5px;color:#fff}
.dossier .sub{font-size:13px;color:rgba(255,255,255,.62);line-height:1.4;margin-bottom:16px}

/* de zes assen, zoals ze in het echte dossier staan */
.dos-assen{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.dos-as{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.04)}
.dos-as i{width:8px;height:8px;border-radius:50%;flex:none}
.dos-as i.r{background:#FF6B4A;box-shadow:0 0 9px rgba(255,107,74,.7)}
.dos-as i.a{background:#FFC93C;box-shadow:0 0 9px rgba(255,201,60,.6)}
.dos-as i.g{background:var(--lime);box-shadow:0 0 9px rgba(198,255,0,.6)}
.dos-as span{color:rgba(255,255,255,.72);flex:1}
.dos-as b{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--muted-2)}
.dos-as i.r~b{color:#FF9B82}
.dos-as i.a~b{color:#FFD97A}
.dos-as i.g~b{color:var(--lime)}

/* de dichtgezette alinea: wel vorm, geen inhoud */
.dos-waas{position:relative;display:flex;flex-direction:column;gap:7px;padding:14px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.12);margin-bottom:16px;overflow:hidden}
.dos-waas>span{height:6px;border-radius:3px;background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,.12));filter:blur(2.2px)}
.dos-waas>span:nth-child(2){width:92%}
.dos-waas>span:nth-child(3){width:78%}
.dos-waas>span:nth-child(4){width:88%}
.dos-waas>span:nth-child(5){width:64%}
.dos-waas>span:nth-child(6){width:81%}
.dos-waas em{
  position:absolute;inset:0;display:grid;place-items:center;font-style:normal;
  font-family:var(--mono);font-size:9.5px;
  letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.5);
  background:linear-gradient(0deg,rgba(12,13,8,.82),rgba(12,13,8,.5));
}

/* het besluit: twee stempels, groen en rood */
.dos-besluit{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.dos-stempel{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:8px;
  font-size:16px;font-weight:600;letter-spacing:-.3px;
  font-family:'Clash Display','General Sans',system-ui,sans-serif;
}
.dos-stempel svg{width:15px;height:15px}
.dos-stempel.go{color:var(--lime);border:1.5px solid rgba(198,255,0,.6);background:rgba(198,255,0,.12);box-shadow:0 0 18px rgba(198,255,0,.22)}
.dos-stempel.nogo{color:#FF8B6B;border:1.5px solid rgba(255,107,74,.5);background:rgba(255,107,74,.1)}
.dos-of{font-size:12px;color:var(--muted-2)}
.dos-wanneer{flex:1 1 100%;margin-top:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2)}

/* ============ beeld in de rechterkolom, waar de balk komt ============== */
/* In de startstaat zegt een lege voortgangsbalk niets. Daar staat nu een
   echt project; zodra de scan loopt neemt de batterij deze plek over. */
.tellerbeeld{
  position:relative;margin:0 0 20px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);aspect-ratio:16/6.4;
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.tellerbeeld img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
.tellerbeeld figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;
  display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(transparent,rgba(10,10,10,.35) 45%,rgba(10,10,10,.85));
}
.tellerbeeld b{font-size:14px;font-weight:600;letter-spacing:-.2px;color:#fff}
.tellerbeeld span{font-size:11.5px;color:rgba(255,255,255,.62);line-height:1.35}
@media(max-width:980px){.tellerbeeld{aspect-ratio:16/5}}

/* de drie regels eronder: iconen in een vakje, zodat ze leesbaar blijven */
.voorproef>div{gap:12px;align-items:center}
.voorproef .ico{
  width:30px;height:30px;padding:6px;border-radius:9px;flex:none;
  background:rgba(198,255,0,.12);color:var(--lime);stroke-width:2.6;opacity:1;
  box-sizing:border-box;
}

/* Het dossier toont een ingevuld voorbeeld, geen uitkomst van de bezoeker.
   Dat moet er met zoveel woorden bij staan. */
.dos-nr em{
  font-style:normal;color:#0A0A0A;background:var(--lime);
  padding:2px 6px;border-radius:4px;font-weight:700;letter-spacing:.1em;
}

/* ================= de beeldkolom links, tot de paneelrand =============== */
/* Gekozen variant: het beeld loopt door tot de linkerrand van het paneel en
   neemt daar de hoekronding over. Geen kaart in een kaart; dat scheelt een
   randlijn en het oogt groter.

   p-site.css zet align-items:center op het hero-raster met een hogere
   specificiteit (html[data-pagina=home] ...). Zonder dezelfde prefix wint die
   regel en blijven de twee kolommen ongelijk hoog. */
html[data-pagina=home] .hero-grid-content{align-items:stretch}
html[data-pagina=home] .hero-right{display:flex;flex-direction:column;justify-content:center}
html[data-pagina=home] .hero-panel{overflow:hidden}

.beeldkolom{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  /* buiten de paneelpadding treden, zodat het beeld de rand raakt */
  margin:calc(-1 * clamp(26px,3vw,34px)) 0 calc(-1 * clamp(26px,3vw,34px)) calc(-1 * clamp(22px,4vw,48px));
  padding:clamp(34px,4vw,52px) clamp(28px,3vw,40px) clamp(34px,4vw,52px) clamp(34px,4.6vw,62px);
  border-radius:0 20px 20px 0;
}
/* Positieve lagen: het paneel heeft backdrop-filter en maakt daarmee een
   eigen stacking context. Kinderen met een negatieve z-index verdwijnen dan
   achter de paneelachtergrond. */
.beeldkolom .bk{position:absolute;inset:0;margin:0;z-index:0}
.beeldkolom .bk img{width:100%;height:100%;object-fit:cover;object-position:62% 42%;display:block;filter:brightness(1.1) saturate(.92)}

/* iets meer zwart dan de standaardwaas, maar het station blijft zichtbaar */
.beeldkolom::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(4,6,9,.86) 0%,rgba(4,6,9,.72) 52%,rgba(4,6,9,.54) 100%),
    linear-gradient(180deg,rgba(6,9,13,.26) 0%,transparent 34%);
}
.beeldkolom .kop-inhoud{position:relative;z-index:2}
/* op een foto heeft tekst eigen contrast nodig, anders moet de waas zwaarder
   en verdwijnt het station alsnog */
.beeldkolom h1{text-shadow:0 2px 22px rgba(0,0,0,.75)}
.beeldkolom .cta-bij{text-shadow:0 1px 10px rgba(0,0,0,.9);color:rgba(255,255,255,.72)}
.beeldkolom .hero-divider{background:rgba(255,255,255,.4)}

/* de drie USP's staan nu rechts, onder de twee keuzeknoppen */
.flips-rechts{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);gap:12px}
.flips-rechts li{font-size:15px}

@media(max-width:980px){
  .beeldkolom{margin:0;border-radius:16px;padding:28px 24px}
}

/* ============== de rechterkolom als één nette kolom blokken ============= */
/* De vaste minimumhoogte op de scan liet een gat vallen tussen de knoppen en
   de USP's. Dat is niet meer nodig: de kolom wordt al op hoogte gehouden door
   align-items:stretch, dus de inhoud mag gewoon tegen elkaar aan staan. */
html[data-pagina=home] .hero .teller-body{min-height:0}

/* alles in deze kolom loopt van dezelfde linker- tot dezelfde rechterlijn */
html[data-pagina=home] .hero-right > *{width:100%}
html[data-pagina=home] .hero-right .teller-vraag,
html[data-pagina=home] .hero-right .teller-sub{max-width:none}

/* gelijke tussenruimte tussen de drie blokken: vraag, keuze, beloftes */
html[data-pagina=home] .hero-right .jarij{margin-top:20px}
html[data-pagina=home] .hero-right .flips-rechts{margin-top:24px;padding-top:24px}

/* ============ de scan houdt één hoogte aan tijdens de hele flow ========= */
/* De beloftes horen bij de startstaat. Tijdens de vragen en bij de uitslag
   gaan ze weg, anders trekt de kolom de hele container uit elkaar. */
.hero-right.scan-bezig .flips-rechts{display:none}

/* de uitslag, compact genoeg om in dezelfde hoogte te passen */
.rag>div{display:flex;align-items:center;gap:10px;padding:7px 11px;font-size:12.5px}
.rag b{font-weight:600;color:#fff;flex:none}
.rag span{color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bedrag{font-size:clamp(32px,4.4vw,46px);letter-spacing:-2px;margin-top:4px}
.bedrag u{font-size:14.5px}
.rekenblok{margin-top:12px;border-top:1px solid var(--line)}
.rekenblok .rekenrij{padding:7px 0;border-top:0;font-size:13px}
.rekenblok .rekenrij+.rekenrij{border-top:1px solid var(--line)}
.bedrag-bij{margin-top:8px;font-size:11px}
.vangst{margin-top:14px;padding:13px}
.vangst label{margin-bottom:9px}
.teller-opnieuw{margin-top:10px}

/* de bevestiging boven de kop: klein, want de belofte eronder doet het werk */
.bevestigd{
  display:flex;align-items:flex-start;gap:9px;margin-bottom:18px;
  font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.7);
}
.bevestigd b{color:var(--lime);font-weight:600}
.vink-klein{
  flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(198,255,0,.14);border:1px solid rgba(198,255,0,.4);
  color:var(--lime);font-size:11px;line-height:1;
}
/* een veld dat wij al hebben ingevuld, zodat het niet als werk voelt */
.veld.vooraf input{border-color:rgba(198,255,0,.35);background:rgba(198,255,0,.05)}

/* Op de smalle pagina's (nulmeting, bedankt) telt de voet mee: anders claimt
   de hero een volledig scherm en valt de voet er net buiten. */
body:has(.smalvoet) .hero{min-height:calc(100vh - 78px);padding-top:84px;padding-bottom:28px}

/* Zodra de nulmeting loopt staat de hoogte vast: dan springt er niets meer
   tussen vraag 1 en de uitslag. In de startstaat niet, want daar staan de
   drie beloftes eronder. */
.hero-right.scan-bezig .teller-body{min-height:560px}
@media(max-width:980px){.hero-right.scan-bezig .teller-body{min-height:0}}

/* ==========================================================================
   SFEER — de hero doortrekken over de hele pagina
   --------------------------------------------------------------------------
   De hero ontleent zijn rust aan drie dingen: een koele ondergrond (de
   rivierbeelden), diepte (paneel zweeft boven beeld) en glas dat íets heeft
   om doorheen te kijken. Onder de vouw viel dat alle drie weg: vlak #0A0A0A
   met alleen lime erop. Hieronder komt het terug.

   Het beeld is NexON's eigen brandsheet-set (doorbraak/brandsheet/foto):
   deining-1, deining-3 en mast-2. Niet opnieuw gezocht, gewoon de bron.
   ========================================================================= */

/* 1 — het zwart koel maken.
   basis.css zet deze tokens op `body` (0,0,1). `html[data-pagina=home] body`
   is (0,1,1) en wint, zonder één regel in basis.css aan te raken. */
html[data-pagina=home] body{
  --bg:#080B0F;
  --bg-2:#0E1319;
  --bg-3:#151C25;
  --line:rgba(170,212,255,.075);
  --line-2:rgba(170,212,255,.13);
  --diep:#5FC8DE;                 /* de koele tweede accentkleur, uit het water */
  background:#080B0F;
}

/* 2 — één vaste sfeerlaag achter de hele pagina.
   Twee koele gloeden en één lime onderin. Dit is wat de kaarten verderop
   iets geeft om doorheen te kijken: zonder dit is backdrop-filter op zwart
   niet meer dan donkergrijs. Fixed, dus hij schuift niet mee. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(920px 640px at 10% 6%,  rgba(58,148,182,.20), transparent 68%),
    radial-gradient(780px 560px at 90% 34%, rgba(36,104,146,.15), transparent 66%),
    radial-gradient(820px 560px at 46% 99%, rgba(198,255,0,.055), transparent 70%);
}

/* de inhoud blijft er bovenop. De nav staat er bewust niet bij: die is fixed
   en heeft zijn eigen z-index uit shell.css. */
.hero,.vak,.manifest,.final,footer{position:relative;z-index:1}

/* 3 — de hero loopt uit in plaats van af te kappen.
   p-site.css heeft al een .hero::after met vignet; die nemen we hier mee over
   en zetten er een verloop naar de paginakleur onder. */
html[data-pagina=home] .hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background:
    radial-gradient(ellipse 126% 122% at 50% 46%,transparent 64%,rgba(0,0,0,.38) 100%),
    linear-gradient(180deg,rgba(0,0,0,.4),transparent 12%),
    linear-gradient(180deg,transparent 72%,rgba(8,11,15,.55) 88%,#080B0F 100%);
}

/* 4 — beeld als ritme, niet als behang.
   Drie secties krijgen een eigen foto, zwaar gedimd en aan boven- en onderkant
   weggemaskeerd zodat er geen rand ontstaat. Daartussen blijft het donker.
   Zo leest de pagina als beeld - donker - beeld - donker in plaats van als
   één lange zwarte vlakte. */
#aanpak::before,
#regie::before,
#daarna::before,
.final::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-size:cover;background-position:center;
  opacity:.15;
  filter:saturate(.7) brightness(.78) contrast(1.05);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 76%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 20%,#000 76%,transparent);
}
#aanpak::before{background-image:url(beeld/sfeer/water.jpg);   background-position:50% 38%;opacity:.09}
#regie::before {background-image:url(beeld/sfeer/mast.jpg);    background-position:52% 30%;opacity:.19}
#daarna::before{background-image:url(beeld/sfeer/deining.jpg); background-position:50% 55%;opacity:.12}
.final::before {background-image:url(beeld/sfeer/water.jpg);   background-position:50% 70%;opacity:.13}

/* op een ruim scherm mag het beeld blijven staan terwijl je eroverheen scrollt.
   Op touch kost dat te veel, dus alleen bij een echte muisaanwijzer. */
@media (min-width:900px) and (hover:hover){
  #aanpak::before,#regie::before,#daarna::before,.final::before{
    background-attachment:fixed;
  }
}

/* 5 — de scheiding tussen secties als lichtlijn in plaats van een harde rand.
   Pakt de horizon uit de hero op. */
.vak{border-top:0}
.vak::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1180px,92vw);height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(170,212,255,.16) 22%,rgba(170,212,255,.16) 78%,transparent);
}
#aanpak::after{display:none}   /* die grens valt samen met de uitloop van de hero */

/* 6 — glas waar nu nog vlakke vulling zit.
   De kaarten hadden al een blur, maar niets erachter. Nu wel, dus mogen ze
   ook echt als glas lezen: iets lichter, koelere rand. */
.route,.dossier,.kaart,.tegel,.final-card{
  background:rgba(142,196,232,.045);
  border-color:rgba(170,212,255,.11);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
          backdrop-filter:blur(16px) saturate(135%);
}


/* ======================================================================
   DE UITSLAG — leesbaar voor een stuurgroep
   ----------------------------------------------------------------------
   Eerst de impact, dan de afhankelijkheid, dan de risico's. Een stuurgroep
   leest in die volgorde: wat kost het, waarom loopt het, waar zit het.
   ==================================================================== */

/* -- 1. impact -------------------------------------------------------- */
.impact{margin:4px 0 0}
.impact-hoofd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.impact-hoofd b{
  font-family:'Clash Display',var(--kop,inherit);
  font-size:clamp(32px,4.4vw,46px);line-height:1;font-weight:600;
  color:var(--lime);letter-spacing:-2px;
}
.impact-hoofd span{font-size:15px;color:var(--muted)}
.impact-rij{display:grid;gap:0;margin-top:10px}
.impact-rij div{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:7px 0;border-bottom:1px solid var(--line);
}
.impact-rij div:last-child{border-bottom:0}
.impact-rij span{font-size:14.5px;color:var(--muted)}
.impact-rij b{font-size:15px;font-weight:600}
.impact-rij b.slecht{color:#FF9D7A}
.impact small{display:block;margin-top:6px;font-size:11.5px;line-height:1.4;color:var(--muted-2)}

/* -- 2. de mini-tijdlijn ---------------------------------------------- */
/* Dezelfde boodschap als de grote tijdlijn verderop, maar in vier regels:
   uw project wacht, en de achterstand is zichtbaar. */
.mini-tl{margin:16px 0 0;padding:12px 14px 11px;border-radius:12px;
  background:rgba(142,196,232,.045);border:1px solid var(--line)}
.mini-kop{color:var(--muted);margin:0 0 9px}
.mini-rij{display:grid;grid-template-columns:98px 1fr;align-items:center;gap:10px;margin-bottom:5px}
.mini-lbl{font-size:12.5px;color:var(--muted);line-height:1.2}
.mini-spoor{position:relative;display:flex;height:12px;border-radius:4px;
  background:rgba(255,255,255,.05);overflow:visible}
.mini-bar{display:block;height:12px;border-radius:4px}
.mini-bar.eigen  {background:linear-gradient(90deg,rgba(198,255,0,.55),var(--lime))}
.mini-bar.energie{background:linear-gradient(90deg,rgba(255,122,85,.5),#FF7A55);border-radius:5px 0 0 5px}
.mini-bar.over{
  border-radius:0 5px 5px 0;border-left:0;
  background:repeating-linear-gradient(135deg,rgba(255,122,85,.42) 0 5px,rgba(255,122,85,.12) 5px 10px);
}
.mini-merkrij{margin-bottom:0}
.mini-merkrij .mini-spoor{background:none;height:15px}
.mini-merk{
  position:absolute;top:0;transform:translateX(-2px);white-space:nowrap;
  font-size:11.5px;font-weight:600;color:#FF9D7A;
}
.mini-bij{margin:9px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}

/* -- 3. de top drie risico's ------------------------------------------ */
/* Was drie telegramregels zonder werkwoord ("Contractvorm — geen alternatief
   transportrecht"). Nu: het risico, en wat het betekent. */
.risicos{margin:16px 0 0}
.riscorij{
  display:grid;grid-template-columns:9px 1fr auto;gap:11px;align-items:start;
  padding:8px 0;border-bottom:1px solid var(--line);
}
.riscorij:last-child{border-bottom:0}
.riscorij i{width:9px;height:9px;border-radius:50%;margin-top:5px;display:block}
.riscorij i.r{background:#FF7A55;box-shadow:0 0 0 3px rgba(255,122,85,.16)}
.riscorij i.a{background:#FFC24B;box-shadow:0 0 0 3px rgba(255,194,75,.16)}
.riscorij i.g{background:var(--lime);box-shadow:0 0 0 3px rgba(198,255,0,.16)}
.riscorij b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.riscorij span{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.riscorij em{
  font-style:normal;color:var(--muted-2);
  white-space:nowrap;padding-top:3px;
}
@media (max-width:560px){
  .riscorij{grid-template-columns:9px 1fr}
  .riscorij em{display:none}
  .mini-rij{grid-template-columns:84px 1fr}
}


/* ==========================================================================
   HET VOORBEELDRAPPORT — een stuurgroepsrapportage in het klein
   --------------------------------------------------------------------------
   Toonde eerst vijf statusbalken en twee knoppen: dat laat zien dat er iets
   mis is, niet hoe wij het oplossen. Nu drie rustige vlakken — planning,
   risico, besluit — met de afhankelijkheid zichtbaar ertussen. Minder gloed,
   minder ronding, meer lucht. Alle cijfers zijn fictief en dat staat er ook
   bij: wij beloven geen aansluitdatum die niet bevestigd is.
   ========================================================================= */

/* de kaart mag op een ruim scherm breder zijn dan de tekst ernaast */
@media (min-width:1000px){
  #regie .duo{grid-template-columns:.82fr 1.18fr;align-items:start}
}
.dossier{
  max-width:none;                                   /* mag de hele kolom vullen */
  border:1px solid rgba(198,255,0,.3);              /* rustiger dan de 2px lime rand */
  border-radius:14px;padding:20px 22px 18px;
  box-shadow:0 20px 48px rgba(0,0,0,.46);           /* de limegloed eraf */
}

/* -- kop: kleine titel, grote uitkomst -------------------------------- */
.dos-klein{
  font-family:var(--mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);margin:0 0 7px;
}
.dossier h3{
  font-size:clamp(21px,2.1vw,27px);font-weight:600;letter-spacing:-.8px;
  line-height:1.14;margin:0 0 11px;color:#fff;
}
.dossier h3 .lime{color:var(--lime)}
.dos-feit{
  font-size:12.5px;line-height:1.5;color:var(--muted);
  padding:9px 12px;border-radius:8px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);margin:0 0 18px;
}
.dos-feit b{color:rgba(255,255,255,.9);font-weight:600}

/* -- de drie rustige vlakken ------------------------------------------ */
.dos-vlak{
  padding:14px 14px 13px;border-radius:10px;margin-bottom:12px;
  background:rgba(255,255,255,.028);border:1px solid var(--line);
}
.dos-vlakkop{
  font-family:var(--mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;font-weight:500;
}
.dos-bij{margin:10px 0 0;font-size:11.5px;line-height:1.45;color:var(--muted-2)}

/* -- de mini-gantt ----------------------------------------------------- */
.gantt{position:relative}
.g-as{position:relative;height:13px;margin-left:148px;margin-bottom:5px}
.g-as span{
  position:absolute;left:var(--l);transform:translateX(-50%);
  font-family:var(--mono);
  font-size:9px;letter-spacing:.1em;color:var(--muted-2);
}
/* de poort: hiervoor is er geen vermogen, dus kan het hoofdproject niet door */
.g-poort{
  position:absolute;left:calc(148px + (100% - 148px) * 0.70);
  top:18px;height:76px;width:1px;z-index:2;
  background:repeating-linear-gradient(180deg,rgba(198,255,0,.55) 0 4px,transparent 4px 8px);
}
.g-poort span{
  position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);
  font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--lime);
}
.g-rij{display:grid;grid-template-columns:148px 1fr;align-items:center;gap:0;margin-bottom:6px}
.g-lbl{font-size:11.5px;line-height:1.25;color:var(--muted);padding-right:12px}
.g-rij.kritiek .g-lbl{color:rgba(255,255,255,.86)}
.g-spoor{position:relative;height:13px;background:rgba(255,255,255,.04);border-radius:3px}
.g-bar{position:absolute;top:2px;height:9px;left:var(--l);width:var(--w);border-radius:2px}
.g-bar.vast {background:rgba(255,122,85,.72)}
.g-bar.eigen{background:rgba(198,255,0,.5)}
/* nog niet bevestigd: gestreept, zodat niemand het voor een harde datum aanziet */
.g-bar.open{background:repeating-linear-gradient(135deg,rgba(255,122,85,.38) 0 4px,rgba(255,122,85,.1) 4px 8px)}
.g-bar.eigen-open{background:repeating-linear-gradient(135deg,rgba(198,255,0,.3) 0 4px,rgba(198,255,0,.07) 4px 8px)}
.g-mijl{
  position:absolute;left:var(--l);top:1px;width:11px;height:11px;margin-left:-5.5px;
  background:var(--lime);transform:rotate(45deg);border-radius:1.5px;z-index:3;
}
.g-mijl.doel{box-shadow:0 0 0 3px rgba(198,255,0,.16)}
.g-legenda{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:24px 0 0;
  font-size:10px;color:var(--muted-2);
}
.g-legenda .lg{width:14px;height:7px;border-radius:2px;display:inline-block;margin-right:-8px}
.g-legenda .lg.vast{background:rgba(255,122,85,.72)}
.g-legenda .lg.open{background:repeating-linear-gradient(135deg,rgba(255,122,85,.38) 0 4px,rgba(255,122,85,.1) 4px 8px)}
.g-legenda .lg.mijl{width:9px;height:9px;background:var(--lime);transform:rotate(45deg);border-radius:1px}
.g-bij{margin:9px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}

/* -- het mini-risicodossier -------------------------------------------- */
.dos-ris{display:grid;gap:9px}
.dr{padding:10px 11px;border-radius:8px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-left:2px solid transparent}
.dr.hoog  {border-left-color:#FF7A55}
.dr.midden{border-left-color:#FFC24B}
.dr-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dr-kop i{width:7px;height:7px;border-radius:50%;flex:none}
.dr.hoog   .dr-kop i{background:#FF7A55}
.dr.midden .dr-kop i{background:#FFC24B}
.dr-kop b{font-size:12.5px;font-weight:600;color:#fff;flex:1;line-height:1.25}
.dr-kop em{
  font-style:normal;font-family:var(--mono);
  font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border-radius:3px;white-space:nowrap;
}
.dr.hoog   .dr-kop em{color:#FF9D7A;background:rgba(255,122,85,.14)}
.dr.midden .dr-kop em{color:#FFD27A;background:rgba(255,194,75,.14)}
.dr p{margin:5px 0 0;font-size:11.5px;line-height:1.45}
.dr-gevolg{color:rgba(255,255,255,.78)}
.dr-maat{color:var(--muted)}
.dr-maat::before{content:"Maatregel: ";color:var(--muted-2)}
.dr-wie{
  font-family:var(--mono);
  font-size:9px!important;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
}

/* -- het advies, als conclusie en niet als knop ------------------------ */
.dos-advies{border-color:rgba(198,255,0,.22);background:rgba(198,255,0,.045)}
.adv-kop{margin:0 0 7px}
.adv-merk{
  display:inline-block;font-size:15px;font-weight:600;color:var(--lime);
  letter-spacing:-.3px;
}
.adv-txt{margin:0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.adv-volgende{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;
  padding-top:11px;border-top:1px solid rgba(198,255,0,.16);
}
.adv-volgende span{
  display:block;font-family:var(--mono);
  font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);
  margin-bottom:3px;
}
.adv-volgende b{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.9);line-height:1.3}

/* -- de uitkomst ------------------------------------------------------- */
.dos-slot{
  margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);
  padding-top:13px;border-top:1px solid var(--line);
}

/* -- op een smal scherm stapelt alles, labels boven de balk ------------ */
@media (max-width:760px){
  .g-as{margin-left:0}
  .g-poort{left:70%}
  .g-rij{grid-template-columns:1fr;gap:3px;margin-bottom:11px}
  .g-lbl{padding-right:0;font-size:11px}
  .adv-volgende{grid-template-columns:1fr;gap:8px}
}

/* ==========================================================================
   HET KLEINE RAPPORT OP DE HOMEPAGE
   --------------------------------------------------------------------------
   Vier sporen was te veel voor een teaser. Twee volstaan, want het hele punt
   zit ertussen: de bouw is klaar en het vermogen niet. Het uitgebreide
   rapport hoort op de bedankpagina en in de mail, niet hier.
   ========================================================================= */

.g-lbl em{display:block;font-style:normal;font-size:10px;color:var(--muted-2);margin-top:1px}
.g-rij{margin-bottom:9px}
.g-spoor{height:15px}
.g-bar{top:3px;height:9px}
.g-mijl{top:2px}

/* de blokkade: geen balk maar een gat met waarschuwingsarcering erin */
.g-bar.blok{
  top:0;height:15px;border-radius:3px;
  background:repeating-linear-gradient(135deg,rgba(255,74,52,.5) 0 5px,rgba(255,74,52,.1) 5px 10px);
  border:1px solid rgba(255,74,52,.42);
}
.g-blokkade{
  margin:11px 0 0;font-size:12px;line-height:1.45;color:#FFB49C;
  padding:7px 10px;border-radius:7px;
  background:rgba(255,74,52,.09);border:1px solid rgba(255,74,52,.2);
}
.g-blokkade b{color:#FF9D7A;font-weight:600}
.g-legenda .lg.blok{
  background:repeating-linear-gradient(135deg,rgba(255,74,52,.5) 0 4px,rgba(255,74,52,.1) 4px 8px);
}
.g-legenda{margin:12px 0 0}

/* -- de mini-RIE: kans, gevolg, maatregel ------------------------------ */
.rie{display:grid;gap:1px;background:var(--line);border-radius:7px;overflow:hidden}
.rie-kop,.rie-rij{
  display:grid;grid-template-columns:1fr 20px 20px 1.15fr;
  align-items:center;gap:9px;padding:8px 10px;background:#0D0F0B;
}
.rie-kop{
  background:rgba(255,255,255,.035);
  font-family:var(--mono);
  font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
}
.rie-kop span:nth-child(2),.rie-kop span:nth-child(3){text-align:center}
.rie-rij b{font-size:12px;font-weight:600;color:#fff;line-height:1.25}
.rie-rij span{font-size:11px;line-height:1.35;color:var(--muted)}
/* de scores: kans en gevolg, hoog of midden */
.rie-rij i{
  font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:4px;
  font-size:10px;font-weight:600;letter-spacing:0;
}
.rie-rij.hoog   i{background:rgba(255,122,85,.17);color:#FF9D7A}
.rie-rij.midden i{background:rgba(255,194,75,.15);color:#FFD27A}
.rie-rij.hoog   b{box-shadow:inset 2px 0 0 #FF7A55;padding-left:9px;margin-left:-9px}
.rie-rij.midden b{box-shadow:inset 2px 0 0 #FFC24B;padding-left:9px;margin-left:-9px}

/* -- advies compacter -------------------------------------------------- */
.dos-advies{padding-top:13px}
.dos-advies .adv-volgende{margin-top:10px;padding-top:9px}
.dossier .dos-vlak:last-child{margin-bottom:0}

@media (max-width:760px){
  .rie-kop{display:none}
  .rie-rij{grid-template-columns:1fr 20px 20px;row-gap:5px}
  .rie-rij span{grid-column:1/-1}
}

/* de ondertitel onder de productnaam: wat het concreet is, in één regel */
.route .onder{
  margin:6px 0 12px;font-size:13.5px;line-height:1.4;
  color:var(--muted);font-weight:400;
}


/* ==========================================================================
   STAP 1 EN 3 VAN HET DRIELUIK
   --------------------------------------------------------------------------
   Stap 2 heeft het team, en dat droeg het hele blok. Eén en drie waren tekst
   met een opsomming. Nu: in stap 1 de eerstvolgende vrije dagdelen, zodat
   afspreken concreet wordt, en in stap 3 een miniatuur van het dossier dat
   zij krijgen. Beide reageren op de muis.
   ========================================================================= */

/* -- stap 3: het dossier in het klein --------------------------------- */
.minidoc{
  position:relative;display:block;margin:15px 0 4px;text-decoration:none;
  perspective:700px;
}
.md-blad{
  display:block;padding:11px 12px 13px;border-radius:9px;
  background:linear-gradient(168deg,#141710,#0D0F0A 70%);
  border:1px solid rgba(198,255,0,.22);
  box-shadow:0 10px 22px rgba(0,0,0,.4);
  transform:rotate(-1.4deg);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s;
}
.minidoc:hover .md-blad,
.minidoc:focus-visible .md-blad{
  transform:rotate(0deg) translateY(-3px) scale(1.015);
  box-shadow:0 16px 34px rgba(0,0,0,.5);
  border-color:rgba(198,255,0,.45);
}

.md-kop{
  display:flex;align-items:center;gap:6px;
  font-size:8.5px;color:var(--lime);                /* een miniatuur, dus kleiner dan de labelstijl */
  padding-bottom:7px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1);
}
.md-kop i{width:7px;height:9px;border-radius:1px;background:var(--lime);opacity:.8;flex:none}

/* twee onleesbare regels: dit is een miniatuur, geen inhoud */
.md-regels{display:grid;gap:4px;margin-bottom:9px}
.md-regels i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.14)}

.md-gantt{display:grid;gap:4px;margin-bottom:9px}
.md-spoor{position:relative;display:block;height:7px;border-radius:2px;background:rgba(255,255,255,.055)}
.md-bar{position:absolute;top:1px;height:5px;border-radius:1.5px}
.md-bar.eigen{background:rgba(198,255,0,.55)}
.md-bar.vast{background:rgba(255,122,85,.6)}
.md-bar.open{background:repeating-linear-gradient(135deg,rgba(255,122,85,.34) 0 3px,rgba(255,122,85,.08) 3px 6px)}
.md-bar.blok{background:repeating-linear-gradient(135deg,rgba(255,74,52,.5) 0 3px,rgba(255,74,52,.1) 3px 6px)}

.md-ris{display:flex;gap:5px;margin-bottom:10px}
.md-ris i{display:block;flex:1;height:5px;border-radius:2px}
.md-ris i.r{background:rgba(255,122,85,.5)}
.md-ris i.a{background:rgba(255,194,75,.45)}

.md-stempel{
  display:inline-block;font-size:10px;font-weight:600;letter-spacing:-.1px;
  color:var(--lime);padding:3px 8px;border-radius:4px;
  border:1px solid rgba(198,255,0,.32);background:rgba(198,255,0,.08);
  transition:background .35s,box-shadow .35s;
}
.minidoc:hover .md-stempel{background:rgba(198,255,0,.16);box-shadow:0 0 14px rgba(198,255,0,.22)}

.md-over{
  display:block;margin-top:9px;text-align:center;
  font-size:10px;color:var(--muted-2);transition:color .25s;
}
.minidoc:hover .md-over{color:var(--lime)}
.md-over::after{content:" \2192"}

@media (prefers-reduced-motion:reduce){
  .md-blad,.minidoc:hover .md-blad{transform:none;transition:none}
  .dagdelen a{transition:none}
}



/* ==========================================================================
   DE USP BOVEN ELKE KAART
   Dezelfde drie beloftes als in de hero, nu één per product: de Quickscan
   geeft inzicht, Operatie Inzicht geeft voorspelbaarheid, Operatie Regie
   geeft de regie terug.
   ========================================================================= */
.route .usp{
  display:flex;align-items:flex-start;gap:9px;margin:0 0 12px;
  font-size:13px;line-height:1.35;color:var(--lime);
}
.route .usp .ico{width:16px;height:16px;flex:none;margin-top:1px;opacity:.9}
.route .usp b{font-weight:600}
.route .usp span{color:rgba(198,255,0,.78)}
.route .usp b{color:var(--lime)}

/* ==========================================================================
   DE AGENDA
   Twee vaste momenten per week, woensdagmiddag en vrijdagochtend. Als
   datumblok, zodat het als een agenda leest en niet als een lijstje tekst.
   ========================================================================= */
.dagdelen{display:grid;gap:7px;margin:14px 0 2px}

.kal{
  display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:11px;
  width:100%;padding:7px 10px 7px 7px;border-radius:9px;text-align:left;
  text-decoration:none;cursor:pointer;font:inherit;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:border-color .2s,background .2s,transform .2s;
}
.kal:hover{
  border-color:rgba(198,255,0,.42);background:rgba(198,255,0,.07);
  transform:translateX(2px);
}

/* het scheurblokje met de datum */
.kal-dag{
  display:grid;place-items:center;gap:0;padding:5px 0 4px;border-radius:6px;
  background:rgba(198,255,0,.1);border:1px solid rgba(198,255,0,.22);
  line-height:1;
}
.kal-dag b{
  font-family:'Clash Display','General Sans',system-ui,sans-serif;
  font-size:17px;font-weight:600;color:var(--lime);letter-spacing:-.5px;
}
.kal-dag small{color:rgba(198,255,0,.7);margin-top:2px}

.kal-tekst{display:block;min-width:0}
.kal-tekst b{
  display:block;font-size:12.5px;font-weight:600;line-height:1.2;
  color:rgba(255,255,255,.9);
}
.kal-tekst small{
  display:block;margin-top:2px;
  font-family:var(--mono);
  font-size:9.5px;letter-spacing:.07em;color:var(--muted-2);
}
.kal:hover .kal-tekst b{color:var(--lime)}

.kal-chev{width:13px;height:13px;color:var(--muted-2);flex:none}
.kal:hover .kal-chev{color:var(--lime)}

/* op de boekingspagina is het een keuze, dus een vinkje in plaats van een pijl */
.kal-vink{
  width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-2);color:transparent;transition:all .2s;
}
.kal-vink svg{width:11px;height:11px}
.kal.gekozen{border-color:var(--lime);background:rgba(198,255,0,.1)}
.kal.gekozen .kal-vink{background:var(--lime);border-color:var(--lime);color:#0a0a0a}
.kal.gekozen .kal-tekst b{color:var(--lime)}

@media (prefers-reduced-motion:reduce){ .kal{transition:none} }

/* ==========================================================================
   DE QUICKSCAN STAAT STIL
   --------------------------------------------------------------------------
   Het sprong bij elke vraag: de ene vraag heeft vier opties en de andere zes,
   de ene kop is één regel en de andere twee. Daardoor trok de hele
   glascontainer zichzelf scheef. Nu heeft alles een gereserveerde hoogte:
   de kop twee regels, het keuzeblok zes rijen, de voet één. Wat korter is
   laat ruimte over in plaats van de rest te verschuiven.
   ========================================================================= */

.scan-vast{display:flex;flex-direction:column}

/* kop: twee regels vraag plus één regel toelichting, altijd */
.scan-kop{min-height:82px;margin-bottom:14px}
.scan-kop .teller-vraag{margin-bottom:6px}
.scan-kop .teller-sub{margin:0}

/* keuzes: ruimte voor zes, want dat is de langste vraag */
.ask-buttons{min-height:318px;align-content:start}

/* voet: terugknop links, teller rechts. Staat er altijd, ook bij vraag 1,
   zodat de hoogte niet verspringt. */
.scan-voet{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:30px;margin-top:14px;
}
.scan-tel{margin-left:auto;font-size:11.5px;color:var(--muted-2)}
.scan-voet .teller-terug{margin:0}

/* de hele kolom houdt één hoogte aan zolang de scan loopt */
.hero-right.scan-bezig .teller-body{min-height:520px}

/* ------------------------------------------- het rapport in de uitslag --
   Hergebruikt de opmaak van het voorbeeldrapport op de homepage, maar dan
   compacter: dit staat in een kolom van de hero, niet in een eigen sectie. */
.uit-rapport{margin-top:16px}
.uit-rapport .dos-kop{padding-bottom:9px;margin-bottom:10px}
.uit-rapport h3{font-size:clamp(17px,1.7vw,21px);margin-bottom:9px}
.uit-rapport .dos-klein{margin-bottom:5px}
.uit-rapport .dos-feit{font-size:11.5px;padding:7px 10px;margin-bottom:12px}
.uit-rapport .dos-vlak{padding:11px 12px 10px;margin-bottom:9px}
.uit-rapport .dos-vlakkop{margin-bottom:9px}
.uit-rapport .g-rij{grid-template-columns:118px 1fr;margin-bottom:7px}
.uit-rapport .g-lbl{font-size:10.5px}
.uit-rapport .g-lbl em{font-size:9px}
.uit-rapport .g-blokkade{font-size:11px;padding:6px 9px;margin-top:9px}
.uit-rapport .g-legenda{font-size:9px;margin-top:10px;gap:5px 11px}
.uit-rapport .rie-kop,.uit-rapport .rie-rij{padding:7px 9px;gap:8px}
.uit-rapport .rie-rij b{font-size:11.5px}
.uit-rapport .rie-rij span{font-size:10.5px}
.uit-rapport .dos-advies{margin-bottom:0}
.uit-rapport .adv-merk{font-size:14px}
.uit-rapport .adv-txt{font-size:11.5px}

@media (max-width:760px){
  .ask-buttons{min-height:0}
  .scan-kop{min-height:0}
  .hero-right.scan-bezig .teller-body{min-height:0}
  .uit-rapport .g-rij{grid-template-columns:1fr;gap:3px}
}

/* ==========================================================================
   HET RAPPORT OP DE BEDANKPAGINA
   --------------------------------------------------------------------------
   Links hun eigen rapport, rechts de uitnodiging. Wat er nog niet in staat
   blijft onscherp: niet om te plagen, maar omdat het er eerlijk gezegd nog
   niet is. Dat halen wij tijdens Operatie Inzicht op.
   ========================================================================= */
.rapportblad{
  margin:14px 0 0;padding:18px 18px 16px;border-radius:14px;
  background:linear-gradient(170deg,rgba(18,20,14,.72),rgba(10,12,9,.66) 60%);
  border:1px solid rgba(198,255,0,.22);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
          backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.rap-leeg{font-size:13px;color:var(--muted);margin:0}
.rap-leeg a{color:var(--lime)}

/* compacter dan op de homepage: dit staat in een kolom */
.rapportblad h3{font-size:clamp(17px,1.7vw,21px);margin-bottom:9px}
.rapportblad .dos-feit{font-size:11.5px;padding:7px 10px;margin-bottom:13px}
.rapportblad .dos-vlak{padding:11px 12px 10px;margin-bottom:9px}
.rapportblad .g-rij{grid-template-columns:116px 1fr;margin-bottom:7px}
.rapportblad .g-lbl{font-size:10.5px}
.rapportblad .g-lbl em{font-size:9px}
.rapportblad .g-blokkade{font-size:11px;padding:6px 9px}
.rapportblad .g-legenda{font-size:9px;gap:5px 11px}
.rapportblad .rie-kop,.rapportblad .rie-rij{padding:7px 9px;gap:8px}
.rapportblad .rie-rij b{font-size:11.5px}
.rapportblad .rie-rij span{font-size:10.5px}
.rapportblad .adv-merk{font-size:14px}
.rapportblad .adv-txt{font-size:11.5px}

/* onscherp, en niet te selecteren: er valt niets te kopiëren */
.wazig{
  filter:blur(3.4px);opacity:.62;user-select:none;pointer-events:none;
}

/* wat er nog niet staat, eerlijk opgesomd */
.rap-slot{border-color:rgba(198,255,0,.2);background:rgba(198,255,0,.04)}
.rap-mist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rap-mist li{
  position:relative;padding-left:20px;font-size:11.5px;line-height:1.4;
  color:var(--muted);
}
.rap-mist li::before{
  content:"";position:absolute;left:0;top:3px;width:11px;height:9px;
  border-radius:2px 2px 1px 1px;border:1.4px solid rgba(198,255,0,.5);
  border-top-width:4px;border-top-left-radius:5px;border-top-right-radius:5px;
}
.rap-slot-bij{margin:10px 0 0;font-size:11.5px;line-height:1.45;color:var(--lime)}
.rap-bij{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}

@media (max-width:860px){
  .rapportblad .g-rij{grid-template-columns:1fr;gap:3px}
}

/* de agenda op de boekingspagina staat in .slots, op de homepage in .dagdelen */
.slots{display:grid;grid-template-columns:1fr;gap:7px;margin-bottom:14px}

/* ==========================================================================
   DE VRAGENLIJST IN DE HUISSTIJL
   --------------------------------------------------------------------------
   p-site.css geeft de keuzeknoppen een witte vulling. Op de homepage staat
   die assessment op een lichte sectie, hier staan ze in een donker glaspaneel
   en steken ze er als losse kaartjes uit. Hier dus donker glas, met de lime
   pas bij aanwijzen. Het icoon staat nog één keer bij de vraag; op elke optie
   hetzelfde plaatje was decoratie.
   ========================================================================= */
html[data-pagina=home] .ask-btn{
  background:rgba(142,196,232,.055);
  color:rgba(255,255,255,.92);
  border:1px solid var(--line-2);
  border-radius:11px;
  padding:12px 14px;
  font-size:14.5px;font-weight:500;letter-spacing:-.1px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .2s;
}
html[data-pagina=home] .ask-btn:hover,
html[data-pagina=home] .ask-btn:focus-visible{
  background:rgba(198,255,0,.1);
  border-color:rgba(198,255,0,.45);
  color:#fff;
  transform:translateX(2px);
}
html[data-pagina=home] .ask-chev{color:var(--muted-2);opacity:1}
html[data-pagina=home] .ask-btn:hover .ask-chev{color:var(--lime)}

/* de startknop mag wel opvallen: dat is de enige handeling op dat scherm */
html[data-pagina=home] .ask-btn.ask-start{
  background:var(--lime);color:#0a0a0a;border-color:var(--lime);
  font-weight:600;
}
html[data-pagina=home] .ask-btn.ask-start:hover{
  background:#d4ff33;border-color:#d4ff33;color:#0a0a0a;
}
html[data-pagina=home] .ask-start .ask-ico{background:rgba(10,10,10,.12);color:#0a0a0a}
html[data-pagina=home] .ask-start .ask-chev{color:#0a0a0a;opacity:.5}

/* één icoon, bij de vraag */

.teller-vraag{display:block}

/* ---------------------------------- de linkerkolom als rapport ----------
   Zodra de scan klaar is maakt de belofte plaats voor hun eigen rapport.
   De beeldkolom met de foto erachter gaat dan uit: één kaart in een kaart
   is één randlijn te veel. */
html[data-pagina=home] .hero-left.is-rapport{
  background:none;border-radius:0;margin:0;padding:0;
  display:block;overflow:visible;
}
html[data-pagina=home] .hero-left.is-rapport .bk,
html[data-pagina=home] .hero-left.is-rapport::before{display:none}
html[data-pagina=home] .hero-left.is-rapport .rapportblad{margin-top:12px}



/* ==========================================================================
   DE UITSLAG: ALLES WIJST NAAR HET E-MAILVELD
   --------------------------------------------------------------------------
   Links hun rapport, maar alleen het verlies en de planning zijn leesbaar.
   De rest zit achter een waas: dat is wat zij komen halen. Rechts nog twee
   dingen, en een boog die naar het invulveld wijst.
   ========================================================================= */

/* -- de kolom staat stil tijdens de vragen ---------------------------- */
/* vaste hoogte, niet alleen een minimum: anders ademt de foto links mee */
html[data-pagina=home] .hero-right.scan-bezig:not(.scan-klaar) .teller-body{
  height:520px;min-height:0;
}
html[data-pagina=home] .hero-right.scan-klaar .teller-body{min-height:0;height:auto}

/* -- het verlies, scherp en groot ------------------------------------- */
.verlies{
  margin:0 0 13px;padding:13px 14px 11px;border-radius:11px;
  background:rgba(255,74,52,.07);border:1px solid rgba(255,122,85,.26);
}
.verlies-hoofd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.verlies-hoofd b{
  font-family:'Clash Display','General Sans',system-ui,sans-serif;
  font-size:clamp(30px,3.6vw,42px);line-height:1;font-weight:600;
  color:#FF9D7A;letter-spacing:-1.6px;
}
.verlies-hoofd span{font-size:13px;color:var(--muted)}
.verlies-rij{display:grid;gap:0;margin-top:11px}
.verlies-rij div{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:6px 0;border-bottom:1px solid rgba(255,122,85,.14);
}
.verlies-rij div:last-child{border-bottom:0}
.verlies-rij span{font-size:12.5px;color:var(--muted)}
.verlies-rij b{font-size:14px;font-weight:600;color:rgba(255,255,255,.9)}
.verlies-rij b.slecht{color:#FF9D7A}
.verlies small{display:block;margin-top:7px;font-size:10.5px;line-height:1.4;color:var(--muted-2)}

/* -- de waas over alles behalve het verlies en de planning ------------ */
.deels-wazig > *{
  filter:blur(3.6px);opacity:.5;user-select:none;pointer-events:none;
  transition:none;
}
.deels-wazig > .verlies,
.deels-wazig > .dos-kop,
.deels-wazig > .rap-slot{filter:none;opacity:1;user-select:auto;pointer-events:auto}
/* de planning blijft leesbaar: dat is het bewijs dat er gerekend is */
.deels-wazig > .dos-vlak:has(.gantt){filter:none;opacity:1;user-select:auto;pointer-events:auto}

/* -- rechts: de pdf, groot ------------------------------------------- */
.pdfblok{
  padding:17px 17px 15px;border-radius:14px;
  background:rgba(198,255,0,.07);border:1px solid rgba(198,255,0,.3);
  box-shadow:0 0 34px rgba(198,255,0,.1);
}
.pdf-kop{
  display:flex;align-items:center;gap:10px;margin:0 0 6px;
  font-size:17px;font-weight:600;color:#fff;letter-spacing:-.3px;
}
.pdf-kop.klein{font-size:15px}
.pdf-ico{width:21px;height:21px;flex:none;color:var(--lime)}
.pdf-kop .kop{width:19px;height:19px;flex:none;color:var(--lime)}
.pdf-bij{margin:0 0 13px;font-size:12px;line-height:1.5;color:var(--muted)}

.pdfblok .vangst-rij input{font-size:14.5px;padding:13px 14px}
.pdfblok .vangst-rij button{font-size:14.5px;padding:13px 18px}

.plan-blok{
  padding:15px 16px 14px;border-radius:13px;
  background:rgba(255,255,255,.035);border:1px solid var(--line-2);
}
.plan-blok .dagdelen{margin:0}

.of{display:flex;align-items:center;gap:12px;margin:15px 0;color:var(--muted-2)}
.of::before,.of::after{content:"";flex:1;height:1px;background:var(--line)}

/* -- één knopstijl door de hele stroom -------------------------------- */
/* de keuzeknoppen, de agenda en de verzendknop delen nu dezelfde taal:
   donker glas, lime rand bij aanwijzen, lime vulling als het de hoofdstap is */
html[data-pagina=home] .ask-btn.ask-start,
.pdfblok .vangst-rij button{
  border-radius:11px;font-weight:600;letter-spacing:-.1px;
}
.ja-klein{
  display:block;width:100%;margin-top:8px;padding:11px 14px;
  border-radius:11px;font:inherit;font-size:13.5px;cursor:pointer;
  background:rgba(142,196,232,.045);color:var(--muted);
  border:1px solid var(--line-2);
  transition:border-color .2s,color .2s,background .2s;
}
.ja-klein:hover{border-color:rgba(198,255,0,.4);color:rgba(255,255,255,.9);background:rgba(198,255,0,.07)}

/* de verzendknop is de hoofdstap op dit scherm, dus lime gevuld */
.pdfblok .vangst-rij{display:flex;gap:8px}
.pdfblok .vangst-rij input{
  flex:1;min-width:0;border-radius:10px;
  background:rgba(10,12,9,.5);border:1px solid var(--line-2);
  color:#fff;font:inherit;font-size:14.5px;padding:13px 14px;
}
.pdfblok .vangst-rij input::placeholder{color:var(--muted-2)}
.pdfblok .vangst-rij input:focus{outline:none;border-color:var(--lime)}
.pdfblok .vangst-rij button{
  flex:none;border:0;border-radius:10px;cursor:pointer;
  background:var(--lime);color:#0a0a0a;
  font:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.1px;
  padding:13px 18px;transition:background .2s;
}
.pdfblok .vangst-rij button:hover{background:#d4ff33}
.pdfblok .vangst-rij button:disabled{opacity:.55;cursor:default}
.pdfblok small{display:block;margin-top:8px;font-size:11.5px;color:var(--muted)}


/* ==========================================================================
   DE SLUIER, IN PLAATS VAN EEN PIJL
   --------------------------------------------------------------------------
   Een getekende pijl die "kijk hier" roept hoort bij een landingspagina, niet
   bij een stuurgroepdocument. De waas roept de vraag zelf al op: hoe zie ik
   de rest? Dat antwoord hoort daar te staan waar de vraag ontstaat. Deze
   regel ligt over het onleesbare deel en zet de cursor in het e-mailveld.
   ========================================================================= */
.heeft-sluier{position:relative}
.sluier{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:9px 15px;border-radius:100px;cursor:pointer;font:inherit;
  font-size:12.5px;font-weight:600;letter-spacing:-.1px;
  color:#0a0a0a;background:var(--lime);border:0;
  box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 0 5px rgba(10,12,9,.45);
  transition:transform .2s,box-shadow .2s;
  z-index:3;
}
.sluier svg{width:15px;height:15px;flex:none}
.sluier:hover{transform:translate(-50%,-50%) scale(1.035);box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 0 5px rgba(10,12,9,.45)}
.sluier:active{transform:translate(-50%,-50%) scale(.985)}

/* de cursor staat in het e-mailveld, en je ziet hem ook */
.pdfblok .vangst-rij input{caret-color:var(--lime)}
.pdfblok .vangst-rij input:focus{
  border-color:var(--lime);
  box-shadow:0 0 0 3px rgba(198,255,0,.14);
}

/* één keer oplichten op het moment dat de uitslag verschijnt */
.pdfblok.let-op{animation:let-op 1.5s ease-out 1}
@keyframes let-op{
  0%{box-shadow:0 0 0 0 rgba(198,255,0,.4)}
  55%{box-shadow:0 0 0 12px rgba(198,255,0,0)}
  100%{box-shadow:0 0 34px rgba(198,255,0,.1)}
}
@media (prefers-reduced-motion:reduce){
  .pdfblok.let-op{animation:none}
  .sluier{transition:none}
}

/* ==========================================================================
   TWEE KNOPPEN, TWEE GEWICHTEN
   --------------------------------------------------------------------------
   Links de betaalde stap, rechts de gratis. Allebei gevuld lime betekent:
   geen keuze aanbieden, en dan klikt men geen van beide. De gratis stap is
   hier de bedoelde eerste zet, dus die is gevuld. De betaalde is omlijnd:
   even zwaar in belang, lichter in uitnodiging.
   ========================================================================= */
.btn-rand{
  background:transparent;color:var(--lime);
  border:1.5px solid rgba(198,255,0,.55);
  box-shadow:none;
  transition:background .2s,border-color .2s,color .2s;
}
.btn-rand:hover{background:rgba(198,255,0,.12);border-color:var(--lime);color:var(--lime)}
.btn-rand .kop{color:var(--lime)}

/* -- de startknop vertelt wat erachter zit ---------------------------- */
html[data-pagina=home] .ask-btn.ask-start{
  padding:14px 16px;align-items:center;
  position:relative;overflow:hidden;
}
.ask-start .ask-lbl{display:block;line-height:1.25}
.ask-start .ask-lbl b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.2px}
.ask-start .ask-lbl i{
  display:block;margin-top:3px;font-style:normal;
  font-size:10.5px;letter-spacing:.1em;              /* lange regel in een knop: een maatje krapper */
  color:rgba(10,10,10,.62);
}

/* de chevron schuift mee: dat leest als vooruit, niet als bevestigen */
html[data-pagina=home] .ask-start .ask-chev{
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
html[data-pagina=home] .ask-start:hover .ask-chev{transform:translateX(3px)}

/* één glans over de knop zodra de hero verschijnt, en daarna nooit meer */
.ask-start::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:glans 1.5s 1.1s ease-out 1;
}
@keyframes glans{to{transform:translateX(120%)}}

@media (prefers-reduced-motion:reduce){
  .ask-start::after{animation:none;display:none}
  html[data-pagina=home] .ask-start:hover .ask-chev{transform:none}
}

/* het rapport links is langer dan de twee blokken rechts; die mogen de
   overgebleven ruimte verdelen in plaats van bovenaan blijven hangen */
html[data-pagina=home] .hero-right.scan-klaar{display:flex;flex-direction:column}
html[data-pagina=home] .hero-right.scan-klaar .teller-body{flex:1;display:flex}
html[data-pagina=home] .scan-vast.scan-uit{flex:1;justify-content:center}

/* het startscherm heeft één regel minder, dus de kop mag wat lager hangen
   en krijgt meer lucht naar de knop toe */
html[data-pagina=home] .hero-right:not(.scan-bezig) .teller-body{padding-top:14px}
html[data-pagina=home] .hero-right:not(.scan-bezig) .teller-vraag{margin-bottom:20px}


/* ==========================================================================
   RUIMTE EN HOUVAST
   ========================================================================= */

/* -- de balk hangt los van de bovenrand ------------------------------- */
/* Zodra er gescrold wordt plakt hij alsnog tegen de rand: dan is hij een
   balk en geen zwevend element meer. */
.nav{top:14px;transition:top .25s,background .3s,border-color .3s,backdrop-filter .3s}
.nav.scrolled,.nav.menu-open{top:0}
@media (max-width:760px){ .nav{top:8px} }

/* -- het glaspaneel mag een groot scherm ook echt vullen -------------- */
@media (min-width:1500px){
  html[data-pagina=home] .hero-panel{max-width:1380px;padding:40px 56px}
}
@media (min-width:1800px){
  html[data-pagina=home] .hero-panel{max-width:1560px;padding:44px 64px}
}

/* -- het bliksemteken in de kop had geen eigen maat ------------------- */
/* Zonder regel viel hij terug op de standaardgrootte van een svg, en dat
   is naast een kop van 46 pixel een speldenknop. In em, zodat hij meeschaalt
   met de kop op elk scherm. */
.bliksem{
  width:.82em;height:.82em;display:inline-block;vertical-align:-.08em;
  margin:0 .04em 0 .1em;fill:var(--lime);
  filter:drop-shadow(0 0 10px rgba(198,255,0,.45));
}

/* -- de wenk dat er meer onder zit ------------------------------------ */
/* Een dun chevronnetje, geen pijl en geen knopje in een cirkel. Het loopt een
   klein stukje naar beneden en vervaagt onderweg: van bijna onzichtbaar naar
   zichtbaar naar bijna onzichtbaar. Acht seconden per ronde, zodat het eerder
   ademt dan knippert, en gebroken wit in plaats van lime, want het mag de
   aandacht niet wegtrekken van wat er wel toe doet. */
.scrolwenk{
  position:fixed;left:50%;bottom:26px;margin-left:-15px;
  z-index:40;width:30px;height:30px;
  padding:0;border:0;background:none;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .8s;
}
.scrolwenk.aan{opacity:1;pointer-events:auto}
.scrolwenk svg{
  width:30px;height:30px;display:block;overflow:visible;
  color:#F2F4EC;
  animation:wenkloop 8s cubic-bezier(.45,0,.55,1) infinite;
}
/* Wie er met de muis op gaat staan wil hem gebruiken, dus dan stopt het lopen
   en staat hij stil en zichtbaar. */
.scrolwenk:hover svg{animation-play-state:paused;opacity:.75;transform:none}

@keyframes wenkloop{
  0%   {opacity:0;    transform:translateY(-7px)}
  22%  {opacity:.30;  transform:translateY(-2px)}
  50%  {opacity:.42;  transform:translateY(2px)}
  78%  {opacity:.14;  transform:translateY(6px)}
  100% {opacity:0;    transform:translateY(9px)}
}

/* Op een lichte ondergrond, zoals de rapportpagina, zou gebroken wit wegvallen. */
.scrolwenk.opPapier svg{color:#4A4B43}

@media (prefers-reduced-motion:reduce){
  .scrolwenk svg{animation:none;opacity:.34;transform:none}
}


/* ==========================================================================
   DE AGENDA LEEST ALS EEN KALENDER
   --------------------------------------------------------------------------
   De tijd stond op 9,5 pixel in de lichtste grijstint: onleesbaar. En het
   datumblok was een gekleurd vierkantje. Nu een scheurblaadje met een
   lime kop en twee ringetjes erboven, en een tijd die je kunt lezen.
   ========================================================================= */
.kal{grid-template-columns:46px 1fr auto;gap:13px;padding:9px 11px 9px 8px}

.kal-dag{
  position:relative;padding:11px 0 6px;border-radius:7px;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(198,255,0,.26);
}
/* de kop van het blaadje */
.kal-dag::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:var(--lime);opacity:.85;
}
/* de twee ringbandjes */
.kal-dag::after{
  content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:18px;height:2px;border-radius:2px;
  background:rgba(10,12,9,.55);
  box-shadow:-7px 0 0 rgba(10,12,9,.55),7px 0 0 rgba(10,12,9,.55);
}
.kal-dag b{font-size:19px;color:#fff;letter-spacing:-.6px}
.kal-dag small{font-size:8.5px;color:rgba(198,255,0,.85);margin-top:3px}

.kal-tekst b{font-size:13.5px;color:#fff}
.kal-tekst small{
  margin-top:3px;font-size:11.5px;letter-spacing:.04em;
  color:rgba(255,255,255,.62);
}
.kal:hover .kal-tekst small{color:rgba(255,255,255,.8)}
.kal.gekozen .kal-tekst small{color:rgba(198,255,0,.8)}


/* de beeldkolom moet de ruimere paneelpadding volgen, anders valt er een
   rand tussen de foto en de rand van het glas */
@media (min-width:1500px){
  html[data-pagina=home] .beeldkolom{margin:-40px 0 -40px -56px}
}
@media (min-width:1800px){
  html[data-pagina=home] .beeldkolom{margin:-44px 0 -44px -64px}
}

/* geen scheidingsstreepjes in de hero: de witruimte doet het werk al */
.hero .hero-divider{display:none}
.flips-rechts{border-top:0;padding-top:0;margin-top:22px}

/* ==========================================================================
   DE DRIE STAPPEN, UITGEWERKT
   --------------------------------------------------------------------------
   Waren drie vinkjes met één regel. Nu per stap wat het inhoudt en wat het
   oplevert, met het materiaal van de Operatie Regie-pagina. Geen cijfers
   ervoor: de volgorde blijkt uit de volgorde.
   ========================================================================= */
.stappen{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:22px;counter-reset:none}
.stappen > li{
  padding-left:17px;border-left:2px solid rgba(198,255,0,.3);
}
.stappen h3{
  font-size:16.5px;font-weight:600;letter-spacing:-.3px;color:var(--lime);
  margin:0 0 7px;
}
.stappen p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.stappen .levert{
  margin-top:8px;font-size:13px;line-height:1.5;
  color:rgba(255,255,255,.82);
}
.stappen .levert::first-line{font-weight:500}
.stappen-bij{
  margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.55;color:var(--muted-2);
}

/* de stapcijfers zijn weg, dus de kop mag de ruimte innemen */
.fc-head{gap:0}
.fc-headtxt{margin-left:0}

/* ==========================================================================
   HET RAPPORT ALS DOCUMENT
   --------------------------------------------------------------------------
   Het oogde als een dashboard: donkere kaart, limeranden, gloed, gekleurde
   badges, overal micro-labels in kapitalen. Dat is de verkeerde belofte. Wat
   een stuurgroep krijgt is een stuk papier met een conclusie erop.

   Dus: een pagina in plaats van een paneel. Lichte ondergrond, inkt in
   plaats van neon, haarlijnen in plaats van randen met gloed, en de statussen
   in de kleuren die een gedrukt rapport zou gebruiken. De inhoud blijft
   precies zoals hij was.

   Geldt voor alle drie de plekken waar het rapport staat: het voorbeeld op de
   homepage, de uitkomst van de quickscan en de bedankpagina. Straks ook voor
   de pdf, want dat is dezelfde opmaak.
   ========================================================================= */

.dossier,.rapportblad{
  /* het papier van de site (18 oktober 2026): off-white, het zwart en het
     blauwgrijs van /enju/, en lime alleen voor de knop en de band. Geen goud,
     geen bosgroen. */
  --pap:#F3F3EF;          /* papier: off-white, neutraal */
  --vlak:#E9EAE6;         /* lichte vlakken: tegels, tabelkoppen */
  --ink:#0A0A0A;          /* inkt: koppen en getallen, het zwart van de site */
  --ink-2:#2A2B30;        /* lopende tekst */
  --ink-3:#6B6E78;        /* bijschrift, kopband, voet: blauwgrijs */
  --lijn:#D7D8D3;         /* haarlijn */
  --lijn-2:#C9CAC5;       /* haarlijn, iets zwaarder */
  --accent:#C6FF00;       /* lime: alleen de knop en de band, nooit als tekst op papier */
  --rood:#B5432E;         /* status */
  --amber:#B88A2B;
  --groen:#4F8A5B;

  background:var(--pap)!important;
  color:var(--ink);
  border:1px solid rgba(0,0,0,.18)!important;
  border-radius:3px!important;              /* papier heeft geen ronde hoeken */
  box-shadow:0 14px 34px rgba(0,0,0,.34)!important;
  -webkit-backdrop-filter:none!important;
          backdrop-filter:none!important;
  padding:26px 28px 24px!important;
  max-width:none;
}

/* -- de kop van het stuk -------------------------------------------------- */
.dossier .dos-kop,.rapportblad .dos-kop{
  padding-bottom:10px;margin-bottom:18px;
  border-bottom:1px solid var(--lijn-2);
  align-items:baseline;
}
.dossier .dos-merk,.rapportblad .dos-merk{
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink);gap:7px;
}
.dossier .dos-merk .ico,.rapportblad .dos-merk .ico{
  width:14px;height:14px;color:var(--ink-3);
}
.dossier .dos-nr,.rapportblad .dos-nr{
  font-family:inherit;font-size:11.5px;letter-spacing:0;color:var(--ink-3);
}
.dossier .dos-nr em{font-style:italic;color:var(--ink-3)}

/* titel en aanleiding: gewone zinnen, geen label. De kleine regel boven de
   titel (op de homepage: "Operatie Regie") is gewone kleine tekst; op het
   blad staat de aanleiding als zin onder de titel. */
.dossier .dos-klein,.rapportblad .dos-klein{
  font-family:inherit;font-size:12px;letter-spacing:0;text-transform:none;
  color:var(--ink-3);margin-bottom:4px;
}
.rapportblad .dos-aanleiding{
  font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:0 0 12px;
}
.dossier h3,.rapportblad h3{
  font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.2px;
  color:var(--ink);margin-bottom:12px;
}
.dossier h3 .lime,.rapportblad h3 .lime{color:var(--ink)}
.rapportblad h3{margin-bottom:4px}
.dossier .dos-feit,.rapportblad .dos-feit{
  font-size:12.5px;line-height:1.5;color:var(--ink-2);
  background:rgba(0,0,0,.03);border:1px solid var(--lijn);border-radius:2px;
  padding:8px 10px;margin-bottom:18px;
}
.dossier .dos-feit b,.rapportblad .dos-feit b{color:var(--ink)}

/* -- de onderdelen: geen kaartjes, maar paragrafen met een kop ------------
   Zoals in een projectrapport: een haarlijn tussen de paragrafen en een
   genummerde kop in de kopletter, in gewone zinsopmaak. Geen kapitalen,
   geen letterafstand, geen streepje, geen goud. */
.dossier .dos-vlak,.rapportblad .dos-vlak{
  background:none!important;border:0!important;border-top:1px solid var(--lijn)!important;
  border-radius:0!important;
  padding:14px 0 0!important;margin:0 0 18px!important;
}
.dossier .dos-vlakkop,.rapportblad .dos-vlakkop{
  font-family:'Clash Display','General Sans',system-ui,sans-serif;
  font-size:14.5px;font-weight:600;line-height:1.3;
  letter-spacing:-.1px;text-transform:none;color:var(--ink);
  padding:0;margin:0 0 9px;border:0;
}
.dossier .dos-bij,.rapportblad .dos-bij{font-size:11.5px;color:var(--ink-3)}

/* -- het verlies: één getal, rustig gezet, groot ------------------------- */
.rapportblad .verlies{background:none;border:0;border-radius:0}
.rapportblad .verlies-hoofd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rapportblad .verlies-hoofd b{
  font-family:inherit;font-size:clamp(24px,6.4vw,30px);font-weight:600;
  letter-spacing:-.8px;line-height:1.05;color:var(--rood);white-space:nowrap;
}
.rapportblad .verlies-hoofd b.woorden{font-size:21px;letter-spacing:-.3px;white-space:normal}
.rapportblad .verlies-hoofd span{font-size:12.5px;color:var(--ink-2)}
.rapportblad .verlies-txt{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
/* het getal staat in de zin, groter dan de tekst eromheen, maar het blijft een zin */
.rapportblad .verlies-getal{
  font-family:'Clash Display','General Sans',system-ui,sans-serif;
  font-size:1.6em;font-weight:600;line-height:1;letter-spacing:-.5px;
  color:var(--rood);white-space:nowrap;
}
.rapportblad .verlies small{display:block;margin-top:6px;font-size:10.5px;line-height:1.4;color:var(--ink-3)}
/* de planning staat in dezelfde paragraaf als het verlies, met lucht ertussen */
.rapportblad .verlies .gantt{margin-top:14px}

/* -- de planning: dunne balken, geen neon -------------------------------- */
.dossier .g-as span,.rapportblad .g-as span{
  font-family:inherit;font-size:10px;letter-spacing:0;color:var(--ink-3);
}
.dossier .g-lbl,.rapportblad .g-lbl{font-size:11.5px;color:var(--ink)}
.dossier .g-lbl em,.rapportblad .g-lbl em{font-size:10px;color:var(--ink-3)}
.dossier .g-spoor,.rapportblad .g-spoor{
  background:rgba(0,0,0,.055);border-radius:1px;height:13px;
}
.dossier .g-bar,.rapportblad .g-bar{border-radius:1px;top:2px;height:9px}
.dossier .g-bar.vast,.rapportblad .g-bar.vast{background:var(--rood)}
.dossier .g-bar.eigen,.rapportblad .g-bar.eigen{background:var(--groen)}
.dossier .g-bar.open,.rapportblad .g-bar.open{
  background:repeating-linear-gradient(135deg,rgba(181,67,46,.5) 0 4px,rgba(181,67,46,.12) 4px 8px);
}
.dossier .g-bar.eigen-open,.rapportblad .g-bar.eigen-open{
  background:repeating-linear-gradient(135deg,rgba(79,138,91,.5) 0 4px,rgba(79,138,91,.12) 4px 8px);
}
.dossier .g-bar.blok,.rapportblad .g-bar.blok{
  top:0;height:13px;border:1px solid rgba(181,67,46,.5);border-radius:1px;
  background:repeating-linear-gradient(135deg,rgba(181,67,46,.42) 0 4px,rgba(181,67,46,.08) 4px 8px);
}
/* de mijlpaal is een streepje, geen ruit met gloed */
.dossier .g-mijl,.rapportblad .g-mijl{
  width:2px;height:17px;margin-left:-1px;top:-2px;
  background:var(--ink);transform:none;border-radius:0;box-shadow:none;
}
.dossier .g-mijl.doel,.rapportblad .g-mijl.doel{width:3px;margin-left:-1.5px}
.dossier .g-poort,.rapportblad .g-poort{
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.4) 0 3px,transparent 3px 6px);
}
.dossier .g-poort span,.rapportblad .g-poort span{
  font-family:inherit;font-size:9.5px;letter-spacing:.04em;text-transform:none;
  color:var(--ink-2);
}
.dossier .g-blokkade,.rapportblad .g-blokkade{
  background:none;border:0;border-left:3px solid var(--rood);border-radius:0;
  padding:1px 0 1px 11px;font-size:12px;color:var(--ink-2);
}
.dossier .g-blokkade b,.rapportblad .g-blokkade b{color:var(--rood)}
.dossier .g-legenda,.rapportblad .g-legenda{font-size:10px;color:var(--ink-3)}
.dossier .g-legenda .lg.vast,.rapportblad .g-legenda .lg.vast{background:var(--rood)}
.dossier .g-legenda .lg.open,.rapportblad .g-legenda .lg.open{
  background:repeating-linear-gradient(135deg,rgba(181,67,46,.5) 0 3px,rgba(181,67,46,.12) 3px 6px);
}
.dossier .g-legenda .lg.blok,.rapportblad .g-legenda .lg.blok{
  background:repeating-linear-gradient(135deg,rgba(181,67,46,.42) 0 3px,rgba(181,67,46,.08) 3px 6px);
}
/* de legenda breekt per item, nooit midden in een item */
.dossier .g-legenda .lgi,.rapportblad .g-legenda .lgi{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.dossier .g-legenda .lgi .lg,.rapportblad .g-legenda .lgi .lg{margin-right:0}
.dossier .g-legenda .lg.mijl,.rapportblad .g-legenda .lg.mijl{
  width:2px;height:10px;background:var(--ink);transform:none;border-radius:0;
}
.dossier .g-bij,.rapportblad .g-bij{font-size:11.5px;color:var(--ink-2)}

/* -- de risicotabel: een tabel, met haarlijnen -------------------------- */
.dossier .rie,.rapportblad .rie{
  background:none;border-radius:0;gap:0;
  border-top:1px solid var(--lijn-2);
}
.dossier .rie-kop,.rapportblad .rie-kop{
  background:none;padding:6px 0;
  font-family:inherit;font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--ink-3);border-bottom:1px solid var(--lijn);
}
.dossier .rie-rij,.rapportblad .rie-rij{
  background:none;padding:9px 0;border-bottom:1px solid var(--lijn);
}
.dossier .rie-rij b,.rapportblad .rie-rij b{
  font-size:12.5px;color:var(--ink);box-shadow:none!important;
  padding-left:0!important;margin-left:0!important;
}
.dossier .rie-rij span,.rapportblad .rie-rij span{font-size:11.5px;color:var(--ink-2)}
/* kans en gevolg als letter, niet als badge */
.dossier .rie-rij i,.rapportblad .rie-rij i{
  width:18px;height:18px;border-radius:0;background:none!important;
  font-size:11px;font-weight:600;
}
.dossier .rie-rij.hoog i,.rapportblad .rie-rij.hoog i{color:var(--rood)}
.dossier .rie-rij.midden i,.rapportblad .rie-rij.midden i{color:var(--amber)}
.rapportblad .rie-rij.laag i{color:var(--groen)}

/* op het blad: naam, kans en gevolg op één regel; daaronder in één regel het
   gevolg, en daaronder de beheersmaatregel. Die laatste is alleen bij het
   zwaarste risico leesbaar; bij de rest staat hij er wel, maar vervaagd. */
.rapportblad .rie-kop,.rapportblad .rie-rij{
  grid-template-columns:1fr 44px 52px;row-gap:3px;align-items:start;
}
/* de tabelkop blijft ook op een smal scherm staan: "Kans" en "Gevolg" zijn
   woorden, de letters eronder hebben die kop nodig */
.rapportblad .rie-kop{display:grid;align-items:center}
.rapportblad .rie-kop span:nth-child(n+2){text-align:center}
.rapportblad .rie-rij i{justify-self:center}
.rapportblad .rie-rij b{padding-top:1px}
.rapportblad .rie-rij i{margin-top:-1px}
.rapportblad .rie-gevolg,.rapportblad .rie-maat{grid-column:1/-1;display:block}
.rapportblad .rie-gevolg{font-size:11.5px;line-height:1.45;color:var(--ink-2)}
.rapportblad .rie-maat{
  margin-top:3px;padding:6px 9px;font-size:11.5px;line-height:1.45;color:var(--ink);
  background:rgba(10,10,10,.04);border-left:2px solid var(--lijn-2);
}
.rapportblad .rie-maat em{
  display:block;font-style:normal;font-size:11px;letter-spacing:0;
  text-transform:none;color:var(--ink-3);margin-bottom:2px;
}
.rapportblad .rie-rij.rest{padding:7px 0}
.rapportblad .rie-rij.rest .rie-maat{margin-top:2px;padding:3px 9px}
/* bij de overige risico's één regel, afgesneden: de naam en de weging zijn
   wat telt, de maatregel is er alleen als belofte */
.rapportblad .rie-maat.kort{white-space:nowrap;overflow:hidden}
.rapportblad .rie-maat.wazig{filter:blur(3.2px);opacity:.55;user-select:none;pointer-events:none}

/* de smalle band in het accent: dit is er, en het is al voor u gemaakt */
.rapportblad .dos-band{
  margin:0;padding:5px 10px;font-size:11px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--accent);background:var(--ink);
  border-bottom:1px solid var(--lijn);
}

/* -- het advies: een conclusie, geen knop ------------------------------- */
.dossier .dos-advies,.rapportblad .dos-advies{
  background:rgba(0,0,0,.035)!important;
  border:1px solid var(--lijn-2)!important;
  border-left:3px solid var(--ink)!important;
  border-radius:0!important;
  padding:13px 15px!important;margin:0!important;
}
.dossier .adv-merk,.rapportblad .adv-merk{
  font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.1px;
}
.dossier .adv-txt,.rapportblad .adv-txt{font-size:12.5px;color:var(--ink-2)}
.dossier .adv-volgende,.rapportblad .adv-volgende{
  border-top:1px solid var(--lijn);margin-top:11px;padding-top:10px;
}
.dossier .adv-volgende span,.rapportblad .adv-volgende span{
  font-family:inherit;font-size:11px;letter-spacing:0;text-transform:none;color:var(--ink-3);
}
.dossier .adv-volgende b,.rapportblad .adv-volgende b{font-size:12px;color:var(--ink)}
.dossier .dos-slot,.rapportblad .dos-slot{
  border-top:1px solid var(--lijn);font-size:12.5px;color:var(--ink-2);
}

/* -- het oordeel: een kop, dan de conclusie in een kader ------------------ */
.rapportblad .dos-oordeel .dos-advies{margin:0!important}
.rapportblad .dos-oordeel{margin-bottom:20px!important}

/* -- wat er nog niet staat --------------------------------------------- */
.rapportblad .rap-slot{margin:0 0 20px!important}
.rapportblad .rap-mist li{color:var(--ink-2);font-size:11.5px}
.rapportblad .rap-mist li::before{border-color:rgba(10,10,10,.35)}
.rapportblad .rap-slot-bij{color:var(--ink);font-size:11.5px}

/* -- de volgende stap: één knop, in lime, met de prijsregel eronder ------- */
.rapportblad .dos-stap{margin:0!important}
.rapportblad .stap-txt{margin:0 0 13px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.rapportblad .dos-knop{
  display:flex;align-items:center;justify-content:center;width:100%;
  box-sizing:border-box;padding:13px 18px;border-radius:12px;
  background:var(--accent);color:var(--ink);text-decoration:none;
  font-size:14.5px;font-weight:600;letter-spacing:-.1px;text-align:center;
  box-shadow:0 1px 0 rgba(10,10,10,.12);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.rapportblad .dos-knop:hover,.rapportblad .dos-knop:focus-visible{
  background:#D4FF33;color:var(--ink);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(10,10,10,.18);
}
.rapportblad .dos-knop:active{transform:none}
.rapportblad .dos-prijs{margin:9px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink-2);text-align:center}
.rapportblad .dos-garantie{margin:3px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink);font-weight:600;text-align:center}
/* onder de knop, na een haarlijn: zo doen wij het anders, in één alinea */
.rapportblad .dos-anders{
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--lijn);
  font-size:11.5px;line-height:1.55;color:var(--ink-2);
}
.rapportblad .dos-anders b{color:var(--ink);font-weight:600}

/* -- de sluier over het geblurde deel ---------------------------------- */
.rapportblad .sluier{
  background:var(--ink);color:var(--pap);
  border-radius:2px;font-size:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.3),0 0 0 4px rgba(243,243,239,.6);
}
.rapportblad .sluier:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.36),0 0 0 4px rgba(243,243,239,.6);
}

/* de bevestigingsregel boven het stuk blijft bij de site horen, niet bij
   het papier */
.hero-left.is-rapport .bevestigd{margin-bottom:4px}

/* de blurred onderbouwing en de titelregel op papier */
.dossier .sub,.rapportblad .sub{font-size:12.5px;color:var(--ink-2);margin-bottom:16px}
.dossier .dos-waas{
  background:rgba(0,0,0,.035);border:1px solid var(--lijn);border-radius:2px;
  padding:14px 15px;margin:0 0 20px;
}
.dossier .dos-waas span{background:rgba(10,10,10,.14)}
.dossier .dos-waas em{
  font-family:inherit;font-style:normal;font-size:11px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--accent);background:var(--ink);padding:4px 10px;
}
/* de derde risicoklasse, als er niets aan de hand is */
.dossier .rie-rij i,.rapportblad .rie-rij i{color:var(--ink-3)}

/* -- het dashboard: vier tegels met haarlijnen, bovenaan het blad --------
   Oordeel, wachttijd, kosten per maand, rode risico's. Geen vulling, geen
   kleur behalve het statusbolletje. */
.rapportblad .dos-dash{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  margin:12px 0 12px;
}
.rapportblad .dash-tegel{
  min-width:0;padding:9px 10px 8px;border:1px solid var(--lijn);border-radius:2px;
  background:none;
}
.rapportblad .dash-tegel small{
  display:block;font-size:10.5px;line-height:1.3;color:var(--ink-3);margin-bottom:4px;
}
.rapportblad .dash-tegel b{
  display:flex;align-items:center;gap:6px;
  font-family:'Clash Display','General Sans',system-ui,sans-serif;
  font-size:15px;font-weight:600;line-height:1.15;letter-spacing:-.2px;color:var(--ink);
  overflow-wrap:anywhere;
}
.rapportblad .dash-tegel b.woorden{font-size:13px;font-family:inherit;letter-spacing:0}
.rapportblad .dash-bol{
  flex:none;display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--ink-3);
}
.rapportblad .dash-bol.r{background:var(--rood)}
.rapportblad .dash-bol.a{background:var(--amber)}
.rapportblad .dash-bol.g{background:var(--groen)}
/* onder het dashboard: de feitenregel in het klein, zonder kader */
.rapportblad .dos-feit{
  background:none;border:0;border-radius:0;padding:0;margin:0 0 16px;
  font-size:11.5px;color:var(--ink-3);
}
.rapportblad .dos-feit b{color:var(--ink-2);font-weight:500}

/* -- het oordeel: de ladder, drie treden, de huidige gemarkeerd ----------- */
.rapportblad .ladder{
  list-style:none;margin:0 0 12px;padding:0;
  border:1px solid var(--lijn);border-radius:2px;
}
.rapportblad .trede{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 9px;
  padding:7px 10px;border-bottom:1px solid var(--lijn);
  font-size:12px;line-height:1.35;color:var(--ink-3);
}
.rapportblad .trede:last-child{border-bottom:0}
.rapportblad .trede b{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.rapportblad .trede span{grid-column:2;font-size:11px;color:var(--ink-3)}
.rapportblad .trede .dash-bol{grid-row:1/3;opacity:.45}
.rapportblad .trede.nu{background:var(--vlak);box-shadow:inset 3px 0 0 var(--ink)}
.rapportblad .trede.nu b{color:var(--ink)}
.rapportblad .trede.nu .dash-bol{opacity:1}
.rapportblad .trede-hier{
  grid-column:3;grid-row:1/3;font-style:normal;font-size:10.5px;font-weight:600;
  color:var(--ink);white-space:nowrap;
}
.rapportblad .trede-hier::before{content:"\2190\00a0"}

/* -- hoe nu verder: korte subkoppen, de kansen als lijst ------------------ */
.rapportblad .dos-subkop{
  margin:14px 0 6px;font-size:13px;font-weight:600;line-height:1.3;
  letter-spacing:-.1px;color:var(--ink);
}
.rapportblad .dos-subkop.dos-koffie{
  font-family:'Clash Display','General Sans',system-ui,sans-serif;
  font-size:14.5px;margin-top:16px;padding-top:12px;border-top:1px solid var(--lijn);
}
.rapportblad .rap-mist-txt{margin:0;font-size:11.5px;line-height:1.55;color:var(--ink-2)}
.rapportblad .rap-mist-txt b{color:var(--ink);font-weight:600}
.rapportblad .dos-kansen{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.rapportblad .dos-kansen li{
  position:relative;padding-left:14px;font-size:11.5px;line-height:1.5;color:var(--ink-2);
}
.rapportblad .dos-kansen li::before{
  content:"";position:absolute;left:0;top:8px;width:7px;height:1.5px;background:var(--ink);
}
.rapportblad .dos-regie{
  margin:12px 0 0;padding-top:12px;border-top:1px solid var(--lijn);
  font-size:11.5px;line-height:1.55;color:var(--ink-2);
}
.rapportblad .dos-regie b{color:var(--ink);font-weight:600}

/* op een telefoon: het dashboard twee bij twee, de ladder blijft staan */
@media (max-width:600px){
  .rapportblad .dos-dash{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rapportblad .dash-tegel b{font-size:14px}
}

/* ==========================================================================
   WAT MISGAAT, EN WAT WIJ ERTEGENOVER ZETTEN
   Twee kolommen: links de klacht zoals die in de markt klinkt, rechts wat
   wij doen. Geen tabel met kopregels, want dit is geen vergelijking met een
   concurrent maar met de gewoonte.
   ========================================================================= */
.anders-lijst{display:grid;gap:0;margin-top:30px;border-top:1px solid var(--line)}
.anders-rij{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,4vw,52px);
  padding:22px 0;border-bottom:1px solid var(--line);
}
.anders-kop{
  margin:0 0 6px;font-size:17px;font-weight:600;letter-spacing:-.3px;color:#fff;
}
.anders-dit p:last-child{
  margin:0;font-size:14px;line-height:1.5;color:var(--muted-2);
}
.anders-dat{position:relative;padding-left:clamp(18px,2vw,26px)}
.anders-dat::before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;
  background:rgba(198,255,0,.34);
}
.anders-dat p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.84)}

@media (max-width:820px){
  .anders-rij{grid-template-columns:1fr;gap:12px;padding:18px 0}
  .anders-dat{padding-left:14px}
}

/* het voorbeeldlabel hoort bij het papier, niet bij de site: een stempel in
   inkt in plaats van een limepil */
.dossier .dos-nr em,.rapportblad .dos-nr em{
  font-style:normal;font-weight:600;letter-spacing:.04em;
  color:var(--ink-2);background:none;padding:1px 5px;border-radius:2px;
  border:1px solid var(--lijn-2);
}

/* ==========================================================================
   HET PAPIER: VEZEL EN DIKTE
   --------------------------------------------------------------------------
   Gekozen uit de zes varianten: nummer 3 en 6 samen. Het verloop zorgt dat
   het blad nergens even geel is, de ruislaag maakt het van dichtbij echt, en
   de stapelschaduwen geven het gewicht. De ruis staat op multiply, zodat de
   korrel alleen de ondergrond raakt en de inkt scherp blijft.

   Geldt overal waar het rapport staat: het voorbeeld op de homepage, de
   uitkomst van de quickscan, de bedankpagina en de Regie-pagina. Straks ook
   de pdf, want dat is dezelfde opmaak.
   ========================================================================= */
.dossier,.rapportblad{
  position:relative;
  background:
    radial-gradient(130% 92% at 12% -4%, #F8F8F5 0%, rgba(248,248,245,0) 60%),
    radial-gradient(110% 95% at 102% 104%, #E9EAE6 0%, rgba(233,234,230,0) 56%),
    linear-gradient(170deg, #F5F5F2 0%, #F0F0EC 100%)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.6),
    inset 0 -2px 0 rgba(10,10,10,.1),
    5px 5px 0 0 #E3E4DF,
    5px 5px 0 1px rgba(10,10,10,.14),
    10px 10px 0 0 #D7D8D3,
    10px 10px 0 1px rgba(10,10,10,.12),
    0 20px 40px rgba(0,0,0,.42)!important;
}

/* de vezel. Eén ruistegel van 220 pixel, herhaald, in multiply eroverheen. */
.dossier::after,.rapportblad::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23v)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  opacity:.085;mix-blend-mode:multiply;
  z-index:1;
}
/* de inhoud blijft boven de vezel */
.dossier > *,.rapportblad > *{position:relative;z-index:2}

/* de stapel steekt rechts en onder uit, dus daar hoort ruimte te zijn */
.hero-left.is-rapport .rapportblad,
.rapportblad{margin-right:10px}

@media (prefers-reduced-motion:no-preference){
  /* niets te animeren hier, maar de regel houdt de bedoeling bij elkaar */
}

/* Zodra het blad er staat is het hoger dan de kolom ernaast; die kolom
   hoort dan bovenaan te beginnen, niet halverwege te zweven. */
html[data-pagina=home] .hero-right.scan-klaar{justify-content:flex-start}
html[data-pagina=home] .hero-right.scan-klaar .scan-uit{justify-content:flex-start}

/* ==========================================================================
   OPERATIE INZICHT: TWEE HANDELINGEN
   --------------------------------------------------------------------------
   Links het rapport dat zij overhouden, rechts een dagdeel en een e-mailadres.
   Niets meer. De rest van de gegevens vragen wij pas als die twee er staan,
   want dan heeft iemand al gekozen.
   ========================================================================= */
.kiesblok{
  padding:clamp(20px,2.4vw,28px);border-radius:16px;
  background:rgba(198,255,0,.055);border:1px solid rgba(198,255,0,.24);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
          backdrop-filter:blur(14px) saturate(130%);
}
.kies-kop{
  margin:0 0 14px;font-size:19px;font-weight:600;letter-spacing:-.3px;color:#fff;
}
.kiesblok .slots{margin-bottom:16px}
.kiesblok .veld{margin-bottom:14px}
.kiesblok .mini{margin-top:13px;font-size:11.5px;line-height:1.5;color:var(--muted-2)}

/* het e-mailveld is de tweede handeling, dus daar hoort de aandacht heen:
   lime caret, lime ring bij focus, en een trage puls zolang het leeg is */
.kiesblok input[name=email]{caret-color:var(--lime)}
.kiesblok input[name=email]:focus{
  border-color:var(--lime);box-shadow:0 0 0 3px rgba(198,255,0,.14);
}
.kiesblok input[name=email]:placeholder-shown:not(:focus){
  animation:mailwenk 3.4s ease-in-out infinite;
}
@keyframes mailwenk{
  0%,100%{box-shadow:0 0 0 0 rgba(198,255,0,0)}
  50%    {box-shadow:0 0 0 3px rgba(198,255,0,.13)}
}

/* stap twee schuift open onder de knop. Let op: display:block verslaat het
   hidden-attribuut, dus die moet expliciet terug. */
.stap2{display:block;animation:stap2-in .35s ease-out}
.stap2[hidden]{display:none}
@keyframes stap2-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* het rapport in de linkerkolom van deze pagina */
.hero-left > .rapportblad{margin-top:18px}

@media (prefers-reduced-motion:reduce){
  .kiesblok input[name=email]:placeholder-shown:not(:focus){animation:none}
  .stap2{animation:none}
}

/* Ook .btn heeft een display-regel die het hidden-attribuut verslaat. Eén keer
   centraal rechtzetten, dan geldt het voor elke knop die wij verbergen. */
.btn[hidden],button[hidden],[hidden]{display:none!important}


/* -- de weg terug naar de homepage ------------------------------------- */
/* Tot nu toe wees alleen het logo naar huis. Dat weten wij, een bezoeker op
   een productpagina niet. Op /bedankt/ was er zelfs helemaal geen weg terug,
   want de kop daar was een plaatje zonder link.
   Vandaar een knop die eruitziet als een knop, op elke pagina op dezelfde
   plek, direct naast het logo. */
.nav-huis{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  width:30px;height:30px;margin-left:12px;
  color:rgba(255,255,255,.66);
  text-decoration:none;
  transition:color .2s,transform .2s;
}
.nav-huis svg{width:21px;height:21px;display:block}
.nav-huis:hover,.nav-huis:focus-visible{
  color:var(--lime,#C6FF00);
  transform:translateY(-1px);
}
.nav-huis:focus-visible{outline:2px solid var(--lime,#C6FF00);outline-offset:4px;border-radius:4px}

/* Op een smal scherm blijft hij staan, juist daar is het nut het grootst:
   het menu zit dan achter een hamburger en het logo is klein. */
@media (max-width:560px){
  .nav-huis{width:28px;height:28px;margin-left:9px}
  .nav-huis svg{width:19px;height:19px}
}

@media print{ .nav-huis{display:none} }

/* De bedankpagina heeft een eigen, smalle kop zonder navigatie. */
.smalkop .container{display:flex;align-items:center;gap:0}
.nav-huis.smalkop-huis{order:2;margin-left:14px;margin-right:auto}
.smalkop .container img{order:1}


/* -- symbolen in de voet ----------------------------------------------- */
/* Dezelfde lijn als het huisje in de balk: dunne streken, geen vlak eromheen,
   en gedempt zodat ze aanwijzen zonder de aandacht te pakken. Alleen bij de
   regels waar het iets toevoegt, een nummer of een kanaal; bij elke tekstlink
   een icoontje is geen aanwijzing meer maar behang. */
.voet-ic{
  width:15px;height:15px;flex:0 0 auto;
  margin-right:8px;vertical-align:-3px;
  opacity:.55;transition:opacity .2s;
}
a:hover > .voet-ic,a:focus-visible > .voet-ic{opacity:1}
@media print{ .voet-ic{display:none} }

/* ==========================================================================
   17 oktober 2026: minder hoogte boven "Zo werken wij"
   De hero vult niet langer het hele scherm; de merken staan direct onder het
   glaspaneel met de regel eronder in plaats van erboven; de kop van het blok
   is één regel met een kleine kopregel erboven en de uitleg op volle breedte.
   ========================================================================= */
html[data-pagina=home] .hero.hero-strak{min-height:0;padding-bottom:36px!important}
html[data-pagina=home] section#aanpak{padding-top:22px!important}
.merken{display:flex;flex-direction:column;align-items:center;padding-bottom:clamp(28px,3.4vw,44px);margin-bottom:clamp(28px,3.4vw,44px)}
.merken .logolabel{order:2;margin:22px 0 0}
.merken .logorij img{opacity:.8;filter:grayscale(1) brightness(2.1);transition:opacity .25s ease,filter .25s ease}
.merken .logorij img:hover{opacity:1;filter:brightness(0) invert(1)}
.vak-kicker{color:var(--lime);margin-bottom:12px}
.vak-kop.breed{max-width:none;margin-bottom:34px}
html[data-pagina=home] .vak-kop.breed h2{max-width:none;font-size:clamp(24px,2.7vw,40px)!important;letter-spacing:-1.1px}
.vak-kop.breed p{max-width:none;margin-top:14px}

/* 17 oktober 2026, tweede ronde: de hero vult het scherm, op elk scherm.
   Het glaspaneel in het midden, de merken onderin, en "Zo werken wij" pas na
   het scrollen. De eerdere hero-strak-regels hierboven worden hier overschreven. */
html[data-pagina=home] .hero.hero-strak{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-bottom:58px!important;
}
html[data-pagina=home] .hero.hero-strak .hero-panel{margin-top:auto}
html[data-pagina=home] .hero.hero-strak .merken{
  position:relative;z-index:5;width:100%;max-width:1240px;
  margin:auto 0 0;padding:clamp(22px,4vh,46px) 24px 0;border-bottom:0;
}
html[data-pagina=home] section#aanpak{padding-top:56px!important}
/* het scroll-pijltje hoort boven alles te blijven liggen */
.scrolwenk{z-index:60;bottom:16px}
@media (max-height:700px){html[data-pagina=home] .hero.hero-strak .merken .logorij img{height:clamp(22px,2.4vw,32px)}}

/* ==========================================================================
   17 oktober 2026: de pagina's naast de funnel (over ons, privacy,
   voorwaarden, 404) in hetzelfde jasje. Zie deploy/bouw-paginas.mjs.
   ========================================================================= */
html[data-pagina=home] .hero-kort .kop-inhoud.smal{max-width:760px;margin:0 auto;padding:6px 0}
.kop-inhoud.smal h1{font-size:clamp(30px,3.5vw,46px);line-height:1.05;letter-spacing:-1.4px;font-weight:600;margin:12px 0 18px}
.kop-inhoud.smal h1 em{font-style:normal;color:var(--lime)}
.kop-inhoud.smal .hero-lead{max-width:none;min-height:0}
.kop-inhoud.smal .flips{margin-top:10px}
.kop-inhoud.smal .flips li{padding-left:0;font-size:15px}
.kop-inhoud.smal .flips li::before{display:none}
.kop-inhoud.smal .knoprij{margin-top:24px}
.hero-kort .mensen{margin-top:0;margin-bottom:22px}
.hero-kort .mens p{font-size:12.5px}
.hero-kort .mens h3{margin-bottom:3px}

.proza{max-width:74ch;margin:0 auto}
.proza h2{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.6px;font-weight:500;margin:44px 0 12px;color:#fff;line-height:1.15}
.proza h2:first-child{margin-top:0}
.proza p,.proza li{font-size:16px;line-height:1.7;color:var(--muted)}
.proza p{margin:0 0 14px}
.proza ul{margin:0 0 16px 20px;padding:0}
.proza li{margin-bottom:6px}
.proza strong{color:var(--text);font-weight:600}
.proza a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}

.team-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.team-rij.schil{margin-top:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.kaart.persoon img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;margin-bottom:16px;border:1px solid var(--line-2)}
.kaart .functie{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);margin:-5px 0 10px}
.kaart .links{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px;font-size:13px}
.kaart .links a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.kaart .links a:hover{color:var(--lime)}
.kaart.los{border-style:dashed}
.kaart.groot{padding:28px}
.kaart.groot dl>div{flex-direction:column;gap:4px;align-items:flex-start}
.kaart.groot dt{font-weight:600;color:#fff;font-size:15px}
.kaart.groot dd{font-size:14px;color:var(--muted);line-height:1.55;text-align:left;font-weight:400}
@media(max-width:860px){.hero-kort .mensen{grid-template-columns:1fr}}
/* de merken dicht tegen het paneel; de lucht die overblijft boven en onder */
html[data-pagina=home] .hero.hero-strak .hero-panel{margin-top:auto}
html[data-pagina=home] .hero.hero-strak .merken{margin:0 0 auto;padding-top:clamp(18px,2.8vh,30px)}
/* het blokkadebordje in de scanvraag: de tegenhanger van de bliksem in de
   kop. Lime is wat u wilt (vermogen), koraal is wat in de weg zit. */
.blokkade{
  width:.8em;height:.8em;display:inline-block;vertical-align:-.1em;margin:0 .08em 0 .04em;
  fill:none;stroke:#FF7A55;stroke-width:2.4;stroke-linecap:round;
  filter:drop-shadow(0 0 9px rgba(255,122,85,.45));
}
/* p-site.css zet alle koppen op de homepage hard met !important; voor de
   lopende tekst van privacy en voorwaarden moet dat kleiner. */
html[data-pagina=home] .proza h2{font-size:clamp(22px,2.2vw,30px)!important}
html[data-pagina=home] .kop-inhoud.smal h1{font-size:clamp(30px,3.5vw,46px)!important}
/* de merken een stap terug: ze zijn onderbouwing, geen hoofdrol */
html[data-pagina=home] .hero.hero-strak .merken .logorij img{opacity:.6}
html[data-pagina=home] .hero.hero-strak .merken .logorij img:hover{opacity:1}

/* ==========================================================================
   17 oktober 2026: twee talen. De taalwissel in de balk: de vlag van de
   andere taal, met de code ernaast. Zie deploy/bouw-talen.mjs.
   ========================================================================= */
.nav-cta .taal{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 11px;margin-right:4px;
  border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.82);font-size:12.5px;font-weight:500;letter-spacing:.04em;line-height:1;
  transition:border-color .2s,background .2s,color .2s;
}
.nav-cta .taal svg{width:20px;height:13px;border-radius:2px;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.nav-cta .taal:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.09);color:#fff}
@media (max-width:620px){.nav-cta .taal{padding:0 8px;margin-right:2px}.nav-cta .taal span{display:none}}
/* op de cv-pagina staat hij in de kopregel */
.top-act .taal{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.82);font-size:12px;font-weight:500}
.top-act .taal svg{width:20px;height:13px;border-radius:2px;display:block}
/* Op een telefoon paste de balk niet: logo, huisje, menu-knop en de knop
   samen waren breder dan het scherm. Het huisje gaat daar weg (het logo
   linkt al naar huis) en de ruimte ertussen wordt kleiner. */
@media (max-width:480px){
  .nav-inner{gap:10px!important;padding:12px 12px!important}
  .nav-huis{display:none!important}
  .nav-cta{gap:6px}
  .nav-cta .btn-solid{padding:9px 11px!important;font-size:12.5px!important}
  .nav-burger{width:36px}
}

/* over ons, 17 oktober 2026, tweede ronde: het team in de hero als rustige
   rij in plaats van een krap raster; de foto's in de kaarten op 3:4 met de
   gezichten in beeld. */
.rooster{display:flex;flex-direction:column;gap:0;margin-bottom:22px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);overflow:hidden}
.rooster-kop{color:var(--muted-2);padding:14px 16px 10px;margin:0}
.rooster-rij{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);color:inherit;text-decoration:none;transition:background .2s}
.rooster-rij:hover{background:rgba(255,255,255,.05)}
.rooster-rij img{grid-row:1/3;width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid var(--line-2)}
.rooster-naam{font-weight:600;font-size:15px;color:#fff;line-height:1.2}
.rooster-rol{font-size:12.5px;color:var(--muted);line-height:1.3}
.kaart.persoon img{aspect-ratio:3/4;object-position:50% 18%}
.team-rij{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media (max-width:860px){.rooster{margin-top:8px}}

/* over ons, derde ronde (review teamsectie): liggende kaarten in twee
   kolommen, foto links op 3:4 met het gezicht in beeld, één stille
   functieregel, de schil als zesde tegel. En de oorzaak van de torenhoge
   foto's: basis.css zet img{max-width:100%} zonder height:auto, waardoor
   het height-attribuut won. */
.team-rij{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kaart.persoon{display:grid;grid-template-columns:132px 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"foto kop" "foto bio" "foto links";column-gap:22px;align-items:start;scroll-margin-top:96px}
.kaart.persoon img{grid-area:foto;height:auto;margin:0;aspect-ratio:3/4;object-fit:cover;object-position:50% 15%;border-radius:12px}
.kaart.persoon .persoon-kop{grid-area:kop}
.kaart.persoon .bio{grid-area:bio;margin:0}
.kaart.persoon .links{grid-area:links;margin-top:12px;gap:8px 16px;font-size:13px}
.kaart.persoon .wat{margin-bottom:6px}
.kaart.persoon h3{margin-bottom:3px}
.kaart .functie{font-family:inherit;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--muted-2);margin:0 0 10px}
.kaart.los{display:flex;flex-direction:column;justify-content:center;gap:18px}
.kaart.los .blok+.blok{padding-top:18px;border-top:1px dashed var(--line-2)}
@media (max-width:900px){.team-rij{grid-template-columns:1fr}}
@media (max-width:480px){
  .kaart.persoon{grid-template-columns:84px 1fr;grid-template-rows:auto auto auto;grid-template-areas:"foto kop" "bio bio" "links links";column-gap:16px;row-gap:12px;padding:20px 18px}
  .kaart.persoon img{aspect-ratio:1/1;object-position:50% 22%;border-radius:50%}
}


/* ==========================================================================
   over ons, vierde ronde: de vier UI-reviews (compositie, team, consistentie,
   mobiel) in één keer verwerkt. Later in het bestand wint, dus dit
   overschrijft de eerdere over-ons-regels waar ze botsen.
   ========================================================================= */
/* het paneel op homepagebreedte, de toplijnen links en rechts gelijk */
html[data-pagina=home] .hero-kort:has(.rooster) .hero-panel{max-width:1200px}
html[data-pagina=home] .hero-kort .hero-right{justify-content:flex-start}
html[data-pagina=home] .hero-kort .beeldkolom{justify-content:flex-start;padding-top:clamp(40px,3.2vw,46px)}
html[data-pagina=home] .hero-kort .hero-left h1{margin-bottom:14px}
/* het station zichtbaar: de verlichte kant van de foto, iets lichter */
.hero-kort .beeldkolom .bk img{object-position:80% 50%;filter:brightness(1.18) saturate(.92)}
.hero-kort .beeldkolom::before{background:linear-gradient(100deg,rgba(4,6,9,.84) 0%,rgba(4,6,9,.6) 50%,rgba(4,6,9,.36) 100%),linear-gradient(180deg,rgba(6,9,13,.26) 0%,transparent 34%)}
/* de uitloop van de hero onder het paneel, niet erdoorheen */
html[data-pagina=home] .hero-kort::after{background:radial-gradient(ellipse 126% 122% at 50% 46%,transparent 64%,rgba(0,0,0,.38) 100%),linear-gradient(180deg,rgba(0,0,0,.4),transparent 12%),linear-gradient(180deg,transparent 90%,#080B0F 100%)}
/* het rooster: glas zoals elke kaart, compacter, met een pijltje */
.rooster{border-radius:18px;background:rgba(142,196,232,.045);border-color:rgba(170,212,255,.11);-webkit-backdrop-filter:blur(16px) saturate(135%);backdrop-filter:blur(16px) saturate(135%)}
.rooster-kop{padding:12px 16px 8px}
.rooster-rij{padding:8px 16px;grid-template-columns:38px 1fr 12px}
.rooster-rij img{width:38px;height:38px}
.rooster-rij::after{content:"";grid-row:1/3;width:8px;height:8px;border-right:1.5px solid var(--muted-2);border-bottom:1.5px solid var(--muted-2);transform:rotate(-45deg);justify-self:end}
/* de teamsectie direct onder de hero, zoals #aanpak op de homepage */
html[data-pagina=home] section#team{padding-top:56px!important}
#team::after{display:none}
/* de kaarten: één label, een stille functieregel, links als chips */
.kaart.persoon .wat{margin-bottom:6px}
.kaart .functie{font-family:inherit;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--muted-2);margin:0 0 10px}
.kaart.persoon .bio{font-size:13.5px;line-height:1.55}
.kaart.persoon img{aspect-ratio:4/5;border-radius:14px}
.kaart .links{gap:8px;margin-top:16px}
.kaart .links a{font-size:12.5px;color:var(--muted);text-decoration:none;border:1px solid var(--line-2);border-radius:100px;padding:6px 12px;transition:color .2s,border-color .2s}
.kaart .links a:hover{color:var(--text);border-color:rgba(198,255,0,.4)}
.kaart.los{border-style:solid;background:rgba(142,196,232,.025)}
.kaart.groot{padding:28px 26px}
.kaart.groot dl{gap:14px}
.kaart.groot dt{font-size:14.5px}
.kaart.groot dd{font-size:14.5px;line-height:1.5}
/* de IPM-kop in de maat van de teamkop; de kaart ernaast bovenaan */
html[data-pagina=home] #ipm .vak-kop h2{font-size:clamp(24px,2.7vw,40px)!important;letter-spacing:-1.1px;max-width:none}
#ipm .duo{grid-template-columns:1.1fr .9fr;align-items:start}
/* tablet en telefoon */
@media (max-width:920px){
  html[data-pagina=home] .hero-kort .hero-right .flips-rechts{order:-1;margin:0;padding-top:0}
  html[data-pagina=home] .hero-kort .hero-right .rooster{margin:20px 0 0}
}
@media (max-width:900px){
  .kaart.persoon{display:grid;grid-template-columns:88px 1fr;grid-template-rows:auto;grid-template-areas:none;column-gap:14px;align-items:start;padding:18px 18px 20px}
  .kaart.persoon img{grid-area:auto;grid-row:1/3;width:88px;aspect-ratio:4/5;margin:0;border-radius:12px}
  .kaart.persoon .persoon-kop{grid-area:auto}
  .kaart.persoon .bio,.kaart.persoon .links{grid-area:auto;grid-column:1/-1}
  .kaart.persoon .bio{margin-top:14px}
  .kaart.persoon .links{margin-top:8px}
}
@media (min-width:601px) and (max-width:900px){.team-rij{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){
  .team-rij{grid-template-columns:1fr}
  html[data-pagina=home] .hero-kort .hero-left h1{font-size:29px!important;line-height:1.1;letter-spacing:-.9px}
  .hero-kort .cta .btn{width:100%;justify-content:center;text-align:center;min-height:48px;padding:14px 18px;font-size:15px}
}
@media (max-width:720px){
  html[data-pagina=home] .hero-kort{padding-left:16px;padding-right:16px;padding-bottom:40px}
  html[data-pagina=home] .hero-kort .beeldkolom{margin:-28px -24px 0;padding:30px 22px 28px;border-radius:0}
}
@media (max-width:480px){
  .nav-burger{width:44px;height:44px}
  .nav-cta .btn-solid{min-height:44px;padding:10px 14px!important}
  .kaart.persoon{grid-template-columns:88px 1fr}
  .kaart.persoon img{aspect-ratio:4/5;border-radius:12px}
}
/* de rijen in het rooster expliciet geplaatst: foto links, naam en rol in
   de middenkolom, het pijltje rechts (zonder dit vulde de browser de smalle
   pijlkolom met de naam) */
.rooster-rij img{grid-column:1;grid-row:1/3}
.rooster-naam{grid-column:2;grid-row:1;align-self:end}
.rooster-rol{grid-column:2;grid-row:2;align-self:start}
.rooster-rij::after{grid-column:3;grid-row:1/3;align-self:center}


/* ==========================================================================
   QA mobiel (375) en tablet (768): de bevindingen uit teksten/qa-mobiel.md
   en teksten/qa-tablet.md. Later in het bestand wint.
   ========================================================================= */
.nb{white-space:nowrap}
/* telefoon: minder randen naast elkaar, zodat de tekstkolom breder wordt */
@media (max-width:600px){
  html[data-pagina=home] .final-card{padding:40px 22px 36px}
  html[data-pagina=home] .final-avatar{width:180px;height:180px}
  html[data-pagina=home] .hero.hero-strak{padding-bottom:28px!important}
  html[data-pagina=home] section#aanpak{padding-top:36px!important}
  html[data-pagina=home] .hero-kort .hero-left h1{margin-bottom:14px!important}
  .dossier,.rapportblad{padding:18px 14px 16px!important}
  .rapportblad .g-lbl{font-size:12px}
  .rapportblad .g-lbl em{font-size:10.5px}
  .rapportblad .rie-rij span,.rapportblad .g-blokkade,.rapportblad .adv-txt{font-size:12px}
  .rapportblad .dos-kop{flex-wrap:wrap;row-gap:4px}
  .rapportblad .dos-nr{flex-basis:100%}
  .rapportblad .rie-kop,.rapportblad .rie-rij{grid-template-columns:1fr 44px 52px}
  .rapportblad .rie-gevolg,.rapportblad .rie-maat{font-size:12px}
}
@media (max-width:480px){
  html[data-pagina=home] .hero{padding-left:14px!important;padding-right:14px!important}
  html[data-pagina=home] .hero-panel{padding:20px 16px}
  .cta .btn{width:100%;justify-content:center;text-align:center;padding:15px 18px}
  .cta-bij{font-size:11px;letter-spacing:.08em}
  html[data-pagina=home] .hero-left h1{font-size:28px!important}
  .merken .logorij{gap:14px 20px}
  .merken .logorij img{height:20px}
}
/* tablet: het kiesblok eerst, het voorbeeldrapport erna */
@media (max-width:920px){
  html[data-pagina=home] .hero-right:has(.kiesblok){order:-1}
}
/* tablet en telefoon: de beeldkolom loopt door tot de paneelrand,
   geen kaart in een kaart */
@media (max-width:980px){
  html[data-pagina=home] .beeldkolom{margin:-34px -48px 0;padding:34px 48px 30px;border-radius:0}
}
@media (max-width:720px){
  html[data-pagina=home] .beeldkolom{margin:-28px -24px 0;padding:28px 24px 26px}
}
@media (max-width:480px){
  html[data-pagina=home] .beeldkolom{margin:-20px -16px 0;padding:22px 18px 22px}
}
/* tablet: merken 4 + 3 en teamkaarten twee naast elkaar, gecentreerd */
@media (min-width:701px) and (max-width:1000px){
  html[data-pagina=home] .hero.hero-strak .merken .logorij{max-width:580px;margin-inline:auto;gap:18px 30px}
  .team-rij:not(.schil){display:flex;flex-wrap:wrap;justify-content:center}
  .team-rij:not(.schil) .kaart{flex:0 0 calc(50% - 8px)}
}
/* de kleine nee-knop leest als knop, niet als uitgeschakeld veld */
.ja-klein{color:rgba(255,255,255,.92);border-color:rgba(255,255,255,.28)}
.ja-klein::after{content:"\2192";float:right;opacity:.6;margin-left:10px}


/* ==========================================================================
   QA laptop (1366×768 en 1440×900): teksten/qa-laptop.md, plus de merkenrij
   op tablet in 3 + 3. Later in het bestand wint.
   ========================================================================= */
/* de sectiekoppen niet groter dan de H1 (46px) */
html[data-pagina=home] .vak-kop h2{font-size:clamp(30px,3.6vw,46px)!important}
html[data-pagina=home] .vak-kop.breed h2{font-size:clamp(26px,2.7vw,37px)!important}
html[data-pagina=home] .final-card h2{font-size:clamp(30px,3.6vw,46px)!important}
/* minder leegte tussen de merkenrij en "Zo werken wij" */
@media (min-width:601px){html[data-pagina=home] section#aanpak{padding-top:40px!important}}
/* kleine letters een maat op */
.kal-dag small{font-size:10px;font-weight:600;letter-spacing:.08em}   /* 600 expliciet: .slot-knop small zet 400 */
.route .meta{font-size:12px;color:var(--muted)}
.kiesblok .mini{font-size:12.5px;color:var(--muted)}
.veld label{font-size:11.5px}
/* de nee-knop: gecentreerd, zonder vlak, met het pijltje */
.ja-klein{text-align:center;background:transparent;color:rgba(255,255,255,.8)}
/* lucht tussen de kop en de inleiding op /scan/ en /operatie-regie/ */
.hero-left h1 + p{margin-top:14px}
/* werktegel: de titel op een donkerder deel van de foto */
html[data-pagina=home] .work-tile .wt-cap{background:linear-gradient(transparent,rgba(0,0,0,.55) 35%,rgba(0,0,0,.92))}
/* knoppen in één rij even hoog */
html[data-pagina=home] .btn-primary{border:1px solid transparent}
/* lage laptopschermen: de hero's passen in 768px */
@media (max-height:820px){
  body:has(.smalvoet) .hero{padding:88px 24px 16px}
  body:has(.smalvoet) .hero-panel{padding:24px 40px}
  body:has(.smalvoet) .scrolwenk{display:none}
  html[data-pagina=home] .hero:not(.hero-strak){padding-top:88px!important}
  .dos-waas{height:56px;padding:10px 12px}
  .rapportblad{padding:14px 14px 12px}
}
/* tablet: zes merken in twee rijen van drie */
@media (min-width:701px) and (max-width:1000px){
  html[data-pagina=home] .hero.hero-strak .merken .logorij{max-width:360px}
}


/* ==========================================================================
   18 oktober 2026: eenheid in de balk. Eén soort element per rol: het logo
   is de weg naar home (het huisje is weg), de links zijn tekst, de taal is
   een tekstlink in dezelfde stijl, en er is precies één knop: de lime
   uitnodiging. Later in het bestand wint, dus dit overschrijft de pil met
   vlag van 17 oktober.
   ========================================================================= */
.nav-cta .taal{
  position:relative;height:auto;padding:6px 0;margin:0 8px 0 0;
  border:0;background:none;border-radius:0;box-shadow:none;
  color:var(--muted);font-size:16px;font-weight:500;letter-spacing:.06em;gap:0;
  transition:color .2s ease;
}
.nav-cta .taal::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--lime);border-radius:2px;transition:width .3s ease}
.nav-cta .taal:hover{background:none;border:0;color:var(--text)}
.nav-cta .taal:hover::after{width:100%}
.nav-cta .taal svg{display:none}
.nav-cta .taal span{display:inline}
@media (max-width:620px){.nav-cta .taal{padding:6px 0;margin-right:6px;font-size:15px}.nav-cta .taal span{display:inline}}


/* ==========================================================================
   18 oktober 2026, tweede ronde: de balk als één familie. Drie bedienings-
   elementen (huisje, taal, uitnodiging) delen één maat: 40px hoog, pil,
   dezelfde rand en dezelfde afstand (12px). Daartussen de gewone tekst-
   links. Op de telefoon worden ze 44px, de maat van een duim; het huisje
   verdwijnt daar omdat het logo ernaast al naar huis wijst.
   ========================================================================= */
:root{--balk-h:40px;--balk-gap:12px;--balk-rand:rgba(255,255,255,.16);--balk-vlak:rgba(255,255,255,.06)}
.nav-inner{gap:24px}
.nav-cta{gap:var(--balk-gap)}
/* het huisje: rond, in de rand van de familie */
.nav-huis{
  display:inline-flex!important;align-items:center;justify-content:center;
  width:var(--balk-h);height:var(--balk-h);margin-left:var(--balk-gap);
  border-radius:999px;border:1px solid var(--balk-rand);background:var(--balk-vlak);
  color:rgba(255,255,255,.85);transition:color .2s,border-color .2s,background .2s;
}
.nav-huis svg{width:20px;height:20px}
.nav-huis:hover,.nav-huis:focus-visible{color:#fff;border-color:rgba(198,255,0,.45);background:rgba(255,255,255,.1);transform:none}
.nav-huis:focus-visible{outline:2px solid var(--lime,#C6FF00);outline-offset:3px;border-radius:999px}
/* de taal: dezelfde pil, met de code erin */
.nav-cta .taal{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--balk-h);padding:0 14px;margin:0;
  border-radius:999px;border:1px solid var(--balk-rand);background:var(--balk-vlak);
  color:rgba(255,255,255,.85);font-size:13px;font-weight:600;letter-spacing:.08em;
  transition:color .2s,border-color .2s,background .2s;
}
.nav-cta .taal::after{display:none}
.nav-cta .taal:hover{color:#fff;border-color:rgba(198,255,0,.45);background:rgba(255,255,255,.1)}
/* de uitnodiging: zelfde hoogte, gevuld */
.nav-cta .btn-solid{height:var(--balk-h);padding:0 18px!important;font-size:14px!important;min-height:0;line-height:1;border:1px solid transparent}
/* het menuknopje op tablet en telefoon hoort bij dezelfde familie */
.nav-burger{width:var(--balk-h);height:var(--balk-h);border-radius:999px;border:1px solid var(--balk-rand);background:var(--balk-vlak)}
@media (max-width:620px){.nav-cta .taal{padding:0 12px;margin:0}.nav-cta .taal span{display:inline}}
@media (max-width:480px){
  :root{--balk-h:44px;--balk-gap:10px}
  .nav-huis{display:none!important}
  .nav-burger{width:var(--balk-h);height:var(--balk-h)}
  .nav-cta .btn-solid{min-height:var(--balk-h);padding:0 14px!important}
}
@media (max-width:360px){.nav-cta .btn-solid{padding:0 10px!important;font-size:12px!important}}
/* zonder tekstlinks (tablet) staat het huisje in de groep rechts: dan dezelfde afstand als de rest */
@media (max-width:800px){.nav-inner{gap:var(--balk-gap)}}


/* ==========================================================================
   18 oktober 2026, derde ronde (Willem): de vorm van de hero-knop (hoeken
   12px) in plaats van de pil, in het grijs van de balk, met de hover van
   die knop. Volgorde: logo, tekstlinks met gelijke afstand, diezelfde
   afstand na de laatste link, en dan huisje, taal en koffieknop dicht bij
   elkaar. Later in het bestand wint.
   ========================================================================= */
:root{--balk-rond:12px;--balk-link-gap:30px}
.nav-inner{justify-content:flex-start;gap:0}
.nav-links{margin-left:auto;gap:var(--balk-link-gap)}
.nav-huis{order:2;margin-left:var(--balk-link-gap)}
.nav-cta{order:3;margin-left:var(--balk-gap);gap:var(--balk-gap)}
.nav-huis,.nav-cta .taal,.nav-cta .btn-solid,.nav-burger{
  border-radius:var(--balk-rond);
  transition:.25s cubic-bezier(.2,.8,.2,1);
}
/* één hover voor de grijze leden: de hover van de hero-knop */
.nav-huis:hover,.nav-huis:focus-visible,.nav-cta .taal:hover,.nav-burger:hover{
  background:rgba(198,255,0,.12);border-color:var(--lime);color:var(--lime);transform:none;
}
.nav-huis:focus-visible{border-radius:var(--balk-rond)}
/* de koffieknop is al lime; dezelfde vorm, zijn eigen lift */
.nav-cta .btn-solid:hover{box-shadow:0 6px 16px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.1) inset}
/* zonder tekstlinks (tablet, telefoon) schuift het huisje naar rechts bij de rest */
@media (max-width:800px){
  .nav-huis{margin-left:auto}
  .nav-inner{gap:0}
}
@media (max-width:480px){
  .nav-cta{margin-left:auto}
}
.nav-links{margin-right:0}

/* 18 oktober 2026, vierde ronde (Willem): de drie knoppen exact gelijk.
   Koffieknop in het grijs van het huisje, huisje en taal even groot, en
   een hover die alleen kleur verandert: niets verspringt. */
.nav-huis,.nav-cta .taal{width:var(--balk-h);padding:0}
.nav-cta .btn-solid,.nav-cta .btn-solid:hover{background:var(--balk-vlak);color:rgba(255,255,255,.85);border:1px solid var(--balk-rand);box-shadow:none;transform:none}
.nav-cta .btn-solid .kop{color:inherit}
.nav-huis,.nav-cta .taal,.nav-cta .btn-solid,.nav-burger{transition:background-color .25s cubic-bezier(.2,.8,.2,1),border-color .25s cubic-bezier(.2,.8,.2,1),color .25s cubic-bezier(.2,.8,.2,1);transform:none;will-change:auto}
.nav-huis:hover,.nav-huis:focus-visible,.nav-cta .taal:hover,.nav-cta .taal:focus-visible,.nav-cta .btn-solid:hover,.nav-cta .btn-solid:focus-visible,.nav-burger:hover{background:rgba(198,255,0,.12);border-color:var(--lime);color:var(--lime);box-shadow:none;transform:none}
.nav-cta .btn-solid:hover .kop{color:var(--lime)}
@media (max-width:480px){.nav-huis,.nav-cta .taal{width:var(--balk-h)}}

/* 18 oktober 2026, vijfde ronde: de drie knoppen dichter bij elkaar (8px) en een kleinere hoekronding (8px) */
:root{--balk-gap:8px;--balk-rond:8px}
.nav-huis:focus-visible{border-radius:var(--balk-rond)}
@media (max-width:480px){:root{--balk-gap:8px}}

/* 18 oktober 2026: de merken half zo zichtbaar als daarvoor (.6 -> .3); hover blijft wit */
html[data-pagina=home] .hero.hero-strak .merken .logorij img{opacity:.3}
html[data-pagina=home] .hero.hero-strak .merken .logorij img:hover{opacity:1}

/* 18 oktober 2026: de balk iets hoger (76px) en alles verticaal in het midden. Het logo-vak was 32px hoog terwijl de afbeelding 40-46px is, waardoor het logo onder het midden hing. */
.nav-inner{padding:18px 32px;align-items:center}
.nav .logo{height:auto;display:flex;align-items:center}
.nav .logo img{display:block}
.nav-links{align-items:center}
@media (max-width:620px){.nav-inner{padding:14px 16px!important}}

/* 18 oktober 2026: de nee-knop weer links uitgelijnd (het centreren uit de laptop-QA was niet gevraagd) */
.ja-klein{text-align:left}

/* 18 oktober 2026: de ruimte onder de merkenrij in het ritme van de site (68px, zoals tussen alle secties). Het paneel staat in het midden van het scherm, de merken onderaan de hero, en daaronder 34 + 34. */
html[data-pagina=home] .hero.hero-strak{padding-bottom:34px!important}
html[data-pagina=home] .hero.hero-strak .hero-panel{margin-top:auto}
html[data-pagina=home] .hero.hero-strak .merken{margin:auto 0 0;padding-bottom:0}
@media (min-width:601px){html[data-pagina=home] section#aanpak{padding-top:34px!important}}
@media (max-width:600px){html[data-pagina=home] .hero.hero-strak{padding-bottom:26px!important}html[data-pagina=home] section#aanpak{padding-top:26px!important}}

/* 18 oktober 2026: de prijsregel onder de knoppen breekt alleen bij het puntje, nooit midden in een zinsdeel */
.cta-bij span{white-space:nowrap}

/* 18 oktober 2026 (Willem): de merken direct onder het paneel op 64px, en daaronder het sectieritme. Op een hoog scherm gaat de overgebleven ruimte naar de bovenkant van de hero (paneel en merken staan onderin), niet naar een gat onder de merken. */
html[data-pagina=home] .hero.hero-strak{justify-content:flex-end}
html[data-pagina=home] .hero.hero-strak .hero-panel{margin-top:auto}
html[data-pagina=home] .hero.hero-strak .merken{margin:0;padding-top:64px;padding-bottom:0}
@media (max-width:600px){html[data-pagina=home] .hero.hero-strak .merken{padding-top:40px}}

/* 18 oktober 2026: merken op 64px onder het paneel (gemeten), en de regel in de startknop op één regel tot ~1100px */
html[data-pagina=home] .hero.hero-strak .merken{padding-top:78px}
.ask-start .ask-lbl i{font-size:10px;letter-spacing:.08em}

/* 18 oktober 2026 (Willem): het paneel weer in het midden van het scherm. De regel hierboven (justify-content:flex-end) duwde paneel en merken naar de onderkant. Nu een rooster met drie rijen: lucht, paneel, lucht met daarin de merken op 78px onder het paneel. Op een hoog scherm blijft het paneel zo precies in het midden en hangen de merken eronder; op een laag scherm groeit de hero mee. */
html[data-pagina=home] .hero.hero-strak{display:grid;grid-template-rows:1fr auto 1fr;grid-template-columns:100%;justify-items:center;align-items:start;justify-content:center}
html[data-pagina=home] .hero.hero-strak .hero-panel{grid-row:2;margin:0;align-self:center}
html[data-pagina=home] .hero.hero-strak .merken{grid-row:3;margin:0;align-self:start;padding-top:78px;padding-bottom:0}
@media (max-width:600px){html[data-pagina=home] .hero.hero-strak .merken{padding-top:40px}}