/* Toolkompas — gedeelde stylesheet voor de gidspagina's.
   Zelfde ontwerptokens als de landingspagina, maar als los bestand zodat
   de browser 'm één keer downloadt en daarna voor alle 50 gidsen hergebruikt. */
:root{
  --ink:#16211c;
  --ink-soft:#4b5a52;
  --paper:#faf8f3;
  --paper-alt:#f0ece1;
  --line:#e2ddd0;
  --brand:#1f5f4a;
  --brand-dark:#153f32;
  --brand-light:#e7f2ec;
  --accent:#d97a3f;
  --white:#ffffff;
  --radius:14px;
  --shadow:0 10px 30px rgba(22,33,28,0.08);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
body{
  margin:0;
  font-family:"Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
}
img,svg{display:block;max-width:100%;}
a{color:var(--brand-dark);}
.wrap{max-width:840px;margin:0 auto;padding:0 24px;}

/* NAV */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,248,243,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1080px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-0.02em;color:inherit;text-decoration:none;}
.brand-mark{width:32px;height:32px;object-fit:contain;flex-shrink:0;}
.nav-acties{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.nav-link{
  font-size:14px;font-weight:700;color:var(--brand);text-decoration:none;
  border:1.5px solid var(--brand);border-radius:999px;padding:7px 15px;white-space:nowrap;
}
.nav-link:hover{background:var(--brand);color:var(--white);}
.nav-cta{
  background:var(--brand);color:var(--white);text-decoration:none;
  padding:9px 18px;border-radius:999px;font-weight:600;font-size:14.5px;
  transition:background .2s var(--ease);
}
.nav-cta:hover{background:var(--brand-dark);}

/* Hoe vaak de check is afgerond. Bewust klein en grijs: het is achtergrond-
   informatie, geen knop. Staat er nog geen getal, dan staat er niets: het vak
   is standaard hidden en wordt pas zichtbaar gemaakt door toolkompas-teller.js. */
.nav-teller{
  font-size:13px;color:var(--ink-soft);font-weight:600;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
/* Op smalle schermen past het niet naast de knoppen: dan onder de balk,
   rechts uitgelijnd. Ook op een telefoon, want juist daar wil je zien
   dat er meer mensen zijn voorgegaan. */
@media (max-width:820px){ .nav-teller{flex:1 1 100%;order:9;text-align:right;font-size:12px;} }
@media (max-width:560px){ .nav-teller{font-size:11.5px;} }

/* BREADCRUMB */
.crumbs{font-size:13.5px;color:var(--ink-soft);padding:20px 0 0;}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.crumbs li:not(:last-child)::after{content:"›";margin-left:6px;color:var(--line);}
.crumbs a{color:var(--ink-soft);text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}

/* CONTENT */
main{padding:8px 0 64px;}
h1{font-size:clamp(29px,4.4vw,42px);line-height:1.18;letter-spacing:-0.025em;margin:18px 0 14px;}
h2{font-size:clamp(22px,3vw,28px);line-height:1.25;letter-spacing:-0.02em;margin:44px 0 12px;}
h3{font-size:19px;margin:26px 0 8px;letter-spacing:-0.01em;}
p{margin:0 0 16px;}
.lead{font-size:19.5px;color:var(--ink-soft);line-height:1.6;}
.meta-line{font-size:13.5px;color:var(--ink-soft);margin:0 0 26px;}
ul,ol{margin:0 0 18px;padding-left:22px;}
li{margin-bottom:9px;}
strong{font-weight:700;}

.callout{
  background:var(--brand-light);border-left:4px solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:18px 22px;margin:26px 0;font-size:16px;
}
.callout p:last-child{margin-bottom:0;}

/* Waarschuwingsbanner boven zelfgeschreven juridische pagina's: bewust een
   andere kleur dan .callout, zodat "let op" ook echt anders oogt dan een
   gewone informatieve inspringtekst. */
.draft-notice{
  background:#fbf1e2;border-left:4px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 22px;margin:0 0 26px;font-size:15px;color:#7a4318;
}
.draft-notice p{margin:0;}
.draft-notice a{color:#7a4318;font-weight:700;}

/* TOOLKAARTEN */
.tool-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin:0 0 18px;box-shadow:var(--shadow);
}
.tool-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px;}
.tool-name{font-size:20px;font-weight:700;letter-spacing:-0.01em;margin:0;}
.tool-price{font-size:14px;font-weight:700;color:var(--brand);white-space:nowrap;}
.tool-cat{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:600;margin-bottom:12px;}
.tool-card p{font-size:16px;margin-bottom:12px;}
.tool-result{background:var(--paper-alt);border-radius:10px;padding:12px 15px;font-size:15px;margin-bottom:12px;}
.tool-objection{font-size:15px;border-top:1px solid var(--line);padding-top:12px;margin-top:4px;}
.tool-objection .q{font-weight:700;display:block;margin-bottom:4px;}
.tool-objection .a{color:var(--ink-soft);}
.tool-link{font-size:14.5px;font-weight:700;color:var(--brand);text-decoration:none;display:inline-block;margin-top:12px;}
.tool-link:hover{text-decoration:underline;}

/* STAPPEN */
.steps{counter-reset:stap;list-style:none;padding:0;}
.steps li{
  counter-increment:stap;position:relative;padding-left:44px;margin-bottom:16px;
}
.steps li::before{
  content:counter(stap);position:absolute;left:0;top:0;
  width:30px;height:30px;border-radius:50%;background:var(--brand);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line);padding:16px 0;}
.faq-item:first-of-type{border-top:1px solid var(--line);}
.faq-item h3{margin:0 0 6px;font-size:17.5px;}
.faq-item p{margin:0;color:var(--ink-soft);font-size:16px;}

/* CTA */
.cta{
  background:var(--brand-dark);color:var(--white);border-radius:var(--radius);
  padding:32px 30px;margin:44px 0;text-align:center;
}
.cta h2{margin:0 0 10px;color:var(--white);font-size:25px;}
.cta p{color:#cfe0d7;font-size:16.5px;margin-bottom:22px;}
.btn{
  display:inline-block;background:var(--accent);color:var(--white);text-decoration:none;
  padding:14px 30px;border-radius:999px;font-weight:700;font-size:16.5px;
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.btn:hover{background:#c26630;transform:translateY(-1px);}
.cta small{display:block;margin-top:14px;color:#a8c2b6;font-size:13.5px;}

/* GERELATEERD */
.related{background:var(--paper-alt);border-radius:var(--radius);padding:24px 26px;margin:40px 0;}
.related h2{margin-top:0;font-size:20px;}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.related a{color:var(--brand-dark);text-decoration:none;font-weight:600;font-size:16px;}
.related a:hover{text-decoration:underline;}

/* GIDSEN-INDEX */
.index-group{margin-bottom:36px;}
.index-group h2{margin-bottom:6px;}
.index-group p.hint{color:var(--ink-soft);font-size:15.5px;margin-bottom:14px;}
.index-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;}
.index-list a{
  display:block;background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:12px 16px;text-decoration:none;color:var(--ink);font-size:15.5px;font-weight:600;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.index-list a:hover{border-color:var(--brand);transform:translateY(-1px);}

/* TABEL */
.table-wrap{overflow-x:auto;margin:0 0 24px;}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:520px;}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
th{background:var(--paper-alt);font-weight:700;font-size:14px;}

/* FOOTER */
footer{background:var(--brand-dark);color:#c3d6cc;padding:44px 0 34px;font-size:14.5px;}
footer .wrap{max-width:1080px;}
footer a{color:var(--white);}
footer p{margin:0 0 12px;}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;}
.footer-links a{text-decoration:none;font-weight:600;}
.footer-links a:hover{text-decoration:underline;}
.footer-sitemap{border-top:1px solid rgba(255,255,255,.16);margin-top:26px;padding-top:22px;}
.footer-sitemap h2{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:#8fb3a3;margin:0 0 12px;font-weight:700;}
.footer-sitemap ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 22px;}
.footer-sitemap li{margin:0;}
.footer-sitemap a{color:#c3d6cc;text-decoration:none;font-size:13.5px;line-height:1.75;font-weight:400;}
.footer-sitemap a:hover{color:var(--white);text-decoration:underline;}
.footer-all{margin-top:14px;font-size:13.5px;}

@media (max-width:640px){
  body{font-size:16.5px;}
  .cta{padding:26px 20px;}
  .tool-card{padding:18px 18px;}
}

/* Toegankelijkheid: tekst die alleen voor schermlezers bedoeld is. */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ANTWOORDBLOK — staat bovenaan de vraagpagina's, direct onder de H1.
   Bewust visueel het zwaarste element op de pagina: wie de vraag intypte, moet
   het antwoord zien zonder te hoeven scrollen of lezen. */
.antwoord{
  background:var(--brand-light);
  border:1px solid #c8ddd2;
  border-left:5px solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;
  margin:0 0 28px;
}
.antwoord-label{
  margin:0 0 6px;
  font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--brand);
}
.antwoord-tekst{
  margin:0;
  font-size:18.5px;line-height:1.55;color:var(--ink);
}

/* De vragenindex toont hele vragen in plaats van korte labels, dus die tegels
   mogen breder en de tekst mag over meerdere regels lopen. */
.index-list--vragen{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));}
.index-list--vragen a{font-weight:600;line-height:1.4;}

@media print{
  .antwoord{background:none;border:1px solid #999;}
}

/* Een kop die als H1 oogt maar het niet is. Op rapport.html staan twee schermen
   in één document; alleen het eerste is de pagina die Google indexeert, dus dat
   is de H1. De rapportkop erna is inhoudelijk een niveau lager, maar moet er wel
   net zo uitzien als je hem eenmaal voor je hebt. */
.als-h1{
  font-size:clamp(29px,4.4vw,42px);line-height:1.18;letter-spacing:-0.025em;
  margin:18px 0 14px;font-weight:700;
}

/* KAART MET DE TWEE CODES — het scherm dat iemand ziet nadat hij betaald heeft.
   Verliest hij deze codes, dan verliest hij zijn aankoop, dus dit blok mag
   nadrukkelijk in beeld staan en moet ook op papier goed leesbaar zijn. */
.open-kaart{
  background:var(--brand-light);
  border:2px solid var(--brand);
  border-radius:var(--radius);
  padding:22px 24px;
  margin:16px 0 8px;
}
.open-kaart h3{margin:0 0 6px;font-size:19px;}
.open-kaart p{margin:0 0 12px;font-size:15.5px;}
.open-regel{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  border-top:1px solid #c8ddd2;padding-top:10px;margin:0 0 10px;
}
.open-regel span{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--brand);font-weight:700;min-width:130px;}
.open-regel strong{
  font-family:"Consolas","SF Mono",Menlo,monospace;
  font-size:19px;letter-spacing:.06em;word-break:break-all;
}
.btn-mail{
  display:inline-block;background:var(--brand);color:var(--white);text-decoration:none;
  padding:11px 22px;border-radius:999px;font-weight:700;font-size:15px;
}
.btn-mail:hover{background:var(--brand-dark);}
.open-klein{font-size:14px;color:var(--ink-soft);margin-bottom:0 !important;}

/* Label boven het tweede invoerveld op de codepagina. */
.veld-label{display:block;margin:14px 0 4px;font-weight:700;font-size:15px;}
.veld-optioneel{font-weight:400;color:var(--ink-soft);}

/* KOSTEN EN OPBRENGST — de twee blokken die het betaalde rapport zijn geld waard
   moeten maken: wat kost dit per maand, en wat levert het op. */
.kosten-blok{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin:0 0 24px;box-shadow:var(--shadow);
}
.kosten-blok p{font-size:16px;}
.kosten-blok p:last-child{margin-bottom:0;}
.kosten-tabel{font-size:15px;}
.kosten-tabel td{vertical-align:top;}
.kosten-cat{font-size:13px;color:var(--ink-soft);}
.kosten-bedrag{white-space:nowrap;font-weight:700;}
.kosten-totaal{
  border-top:2px solid var(--line);padding-top:14px;margin-top:4px;font-size:17px;
}
.rol-badge{
  display:inline-block;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;
  white-space:nowrap;
}
.rol-badge.rol-kern{background:var(--brand);color:var(--white);}
.rol-badge.rol-alternatief{background:var(--paper-alt);color:var(--ink-soft);}
.rol-badge.rol-extra{background:transparent;color:var(--ink-soft);border:1px solid var(--line);}
tr.rol-extra td{opacity:.72;}
.kosten-oordeel{
  border-radius:10px;padding:14px 18px;margin:16px 0 0;font-size:15.5px;
}
.kosten-oordeel.goed{background:var(--brand-light);border-left:4px solid var(--brand);}
.kosten-oordeel.let{background:#fbf1e2;border-left:4px solid var(--accent);color:#7a4318;}
.kosten-slot{font-size:14px;color:var(--ink-soft);font-style:italic;margin-top:10px;}

.tv-lijst{list-style:none;padding:0;margin:0 0 16px;}
.tv-lijst li{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;
  border-bottom:1px solid var(--line);padding:10px 0;margin:0;font-size:15.5px;
}
.tv-lijst li span{color:var(--ink-soft);}
.tv-klein{font-size:14px;color:var(--ink-soft);margin-top:14px;}

.plan-uren{
  font-size:13px;font-weight:700;color:var(--brand);
  background:var(--brand-light);padding:2px 9px;border-radius:999px;
}
.plan-doel{font-size:14px;color:var(--ink-soft);}

/* Kop boven een waardeblok in de wizard, waar de rapportsecties geen eigen
   h2-ritme hebben zoals op rapport.html. */
.blok-kop{font-size:22px;margin:36px 0 14px;letter-spacing:-0.02em;}

/* BRONREGEL — staat onder elk kort antwoord. Zegt wie dit beweert en waarop het
   gebaseerd is. Bedoeld voor de lezer, en het gevolg is dat een AI-assistent die
   dit blok samenvat de herkomst meeneemt in plaats van alleen de conclusie. */
.bron-regel{
  margin:14px 0 0;padding-top:12px;
  border-top:1px solid #c8ddd2;
  font-size:14px;color:var(--ink-soft);line-height:1.5;
}
.bron-label{
  display:inline-block;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--brand);margin-right:4px;
}

/* CONCLUSIEBALK — het eerste wat je ziet. Moet in één blik antwoord geven op:
   wordt mijn probleem opgelost, wat kost het, en wat levert het op. */
.rb-kop{
  margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;color:#8fb3a3;
}
.rb-hoofd{margin:0 0 18px;font-size:20px;line-height:1.35;}
.rb-hoofd strong{font-size:30px;letter-spacing:-0.02em;}
.rb-punten{list-style:none;padding:0;margin:0 0 20px;}
.rb-punt{display:flex;gap:12px;align-items:flex-start;padding:10px 0;margin:0;border-top:1px solid rgba(255,255,255,.14);}
.rb-vink{
  flex:0 0 22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;margin-top:1px;
}
.rb-punt.op .rb-vink{background:#7fd4a8;color:#12332a;}
.rb-punt.niet .rb-vink{background:rgba(255,255,255,.16);color:#cfe0d7;}
.rb-punt-tekst{display:block;}
.rb-punt-tekst strong{display:block;font-size:16px;line-height:1.35;}
.rb-punt-sub{display:block;font-size:14px;color:#a8c2b6;margin-top:2px;}
.rb-cijfers{margin:0;}
.rb-rij{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;
  border-top:1px solid rgba(255,255,255,.14);padding:9px 0;
}
.rb-rij dt{color:#a8c2b6;font-size:15px;margin:0;}
.rb-rij dd{margin:0;font-weight:700;font-size:15.5px;text-align:right;}
.rb-ok{color:#7fd4a8;font-weight:400;}
.rb-let{color:#f0b27a;font-weight:400;}

/* CHECKLIST per week — een week is een werkweek, geen regel. */
.plan-week-blok .plan-text{padding-bottom:4px;}
.cl-titel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 2px;}
.cl-titel b{font-size:17px;}
.cl-wie{font-size:13px;color:var(--ink-soft);}
.cl-tel{font-size:13.5px;color:var(--ink-soft);margin:0 0 14px;}
.cl-fase{margin:0 0 14px;}
.cl-fase-kop{
  margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--brand);
}
.cl-lijst{list-style:none;padding:0;margin:0;}
.cl-lijst li{
  display:flex;align-items:flex-start;gap:10px;
  padding:7px 0;margin:0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.45;
}
.cl-lijst li:last-child{border-bottom:0;}
.cl-vak{
  flex:0 0 16px;width:16px;height:16px;margin-top:3px;
  border:2px solid var(--brand);border-radius:4px;
}
.cl-taak{flex:1 1 auto;}
.cl-duur{
  flex:0 0 auto;font-size:13px;font-weight:700;color:var(--brand);
  background:var(--brand-light);padding:2px 9px;border-radius:999px;white-space:nowrap;
}
.cl-valkuil{
  background:#fbf1e2;border-left:4px solid var(--accent);border-radius:0 8px 8px 0;
  padding:12px 16px;margin:12px 0 0;font-size:14.5px;color:#7a4318;
}
.cl-slot{font-size:14.5px;color:var(--ink-soft);margin:6px 0 0;}

/* ==========================================================================
   AFWERKING: scrollen, focus en beweging
   ========================================================================== */

/* Ankers landden onder de vastgezette kopbalk, waardoor je na een klik op een
   link naar een kop de kop zelf niet zag. De balk is ongeveer 60px hoog; met
   wat lucht erbij komt de kop netjes vrij te staan. */
:target,
h1[id], h2[id], h3[id],
section[id], .index-group[id], .faq-item[id]{
  scroll-margin-top:88px;
}

/* Toetsenbordgebruikers zagen op deze pagina's geen enkele focusmarkering.
   :focus-visible toont hem alleen bij toetsenbordnavigatie, dus muisgebruikers
   merken er niets van. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:3px;
  border-radius:4px;
}

/* Rustige overgangen op alles wat op aanwijzen reageert. Kort genoeg om niet
   traag te voelen, lang genoeg om niet te schokken. */
a, button, .btn, .nav-cta, .nav-link, .tool-link, .index-list a,
.btn-mail, summary{
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .18s var(--ease),
             box-shadow .18s var(--ease);
}
.tool-card{transition:box-shadow .2s var(--ease), transform .2s var(--ease);}
.tool-card:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(22,33,28,0.11);}

/* Een uitklapbaar blok dat opent zonder sprong. */
details summary{cursor:pointer;}
details summary::-webkit-details-marker{display:none;}

/* Tekst blijft leesbaar tijdens het laden van een lettertype, en randen van
   afbeeldingen blijven scherp op schermen met hoge dichtheid. */
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}

/* Lange woorden en URL's breken netjes af in plaats van de layout op te rekken. */
p, li, dd, td, th, .cl-taak{overflow-wrap:break-word;}

/* Wie beweging heeft uitgezet, krijgt geen enkele animatie en ook geen
   soepel scrollen: dat laatste veroorzaakt bij sommige mensen klachten. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important;}
  .tool-card:hover{transform:none;}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important;}
}

/* "Ik heb al betaald" — voorheen kon een koper die zijn rapport opnieuw opende
   nergens zijn ontgrendelcode kwijt: dat veld staat bovenaan en is dan verborgen. */
.reeds-betaald{margin-top:18px;text-align:center;}
.reeds-knop{
  background:none;border:0;padding:8px 4px;cursor:pointer;
  font:inherit;font-size:15px;color:var(--brand);text-decoration:underline;
}
.reeds-knop:hover{color:var(--brand-dark);}
.reeds-veld{
  max-width:420px;margin:12px auto 0;text-align:left;
  background:var(--paper-alt);border-radius:var(--radius);padding:18px 20px;
}
.reeds-veld label{display:block;font-weight:700;margin-bottom:6px;font-size:15px;}
.reeds-veld .uitleg{font-size:13.5px;color:var(--ink-soft);margin:10px 0 0;}

/* Uurtarief: een invoerveld in plaats van een aanname. */
.tarief-blok{
  background:var(--paper-alt);border-radius:var(--radius);padding:18px 20px;margin:18px 0 0;
}
.tarief-blok label{display:block;font-size:16px;margin-bottom:4px;}
.tarief-uitleg{font-size:14.5px;color:var(--ink-soft);margin:0 0 12px !important;}
.tarief-rij{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tarief-euro{font-size:18px;font-weight:700;color:var(--ink-soft);}
.tarief-invoer{
  width:96px;padding:10px 12px;font:inherit;font-size:17px;font-weight:700;
  border:2px solid var(--line);border-radius:10px;background:var(--white);
}
.tarief-invoer:focus{border-color:var(--brand);outline:none;}
.tarief-per{font-size:15px;color:var(--ink-soft);margin-right:4px;}

/* De uitleg onder het rollabel in de kostentabel. */
.rol-uitleg{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:6px;line-height:1.45;}