/* ===================================================================
       KOSTENCALCULATOR

       TYPESCHAAL — HERONTWERP 2026-08-14.
       Dit bestand had 43 font-size-declaraties, waarvan 23 op 13px of kleiner:
       10px, 11px, 12px, 12,5px, 13px en .9375rem stonden allemaal door elkaar,
       terwijl de tabelregels op 15px zaten. Daardoor was de hele verklarende
       laag kleiner dan de body en wist een lezer niet welke tekst er nog toe
       deed. Er zijn nu nog drie stappen onder de bodymaat, en verder niets:

         1rem     (16px)  alle lopende tekst, tabelregels, noten, bronnen
         .875rem  (14px)  secundair: hints onder een veld, subregels
         .75rem   (12px)  UITSLUITEND uppercase labels met letterspacing

       Nieuwe regel: geen enkele volzin onder 14px. Een label van 12px mag,
       want dat is één woord in kapitalen; een uitlegzin van 12px niet.
       Basiscomponenten in css/base.css (.btn, .pill, .field label) blijven
       ongemoeid: die gelden sitebreed en zijn hier niet het probleem.

       ANTON-REGEL: boven de vouw staat precies één bedrag in Anton, en dat is
       de besparing. Alle andere bedragen daar staan in Public Sans 700. Dit is
       de regel die het oorspronkelijke probleem oplost, namelijk dat hetzelfde
       bedrag vijf keer met dezelfde zwaarte op de pagina stond. Voeg hier geen
       display-getal aan toe zonder er een weg te halen.
       =================================================================== */

    /* Onder 480px past logo + knop niet meer naast elkaar (op 320 liep de knop
       buiten de gutter). De balk wrapt dan: logo op regel 1, knop op volle
       breedte op regel 2. Geen horizontale overflow op 320 t/m 1440. */
    @media (max-width: 480px) {
      .calc-bar .container { flex-wrap: wrap; gap: 14px; }
    }

    /* ---------- Hero (licht, dienstpagina-recept svc-hero) ---------- */
    /* CORRECTIE Timo 2026-07-31: de site-header is position:fixed, dus de hero moet
       er zelf ruimte voor vrijhouden. Deze waarden zijn verbatim overgenomen uit
       .svc-hero in css/sections/svc-hero.css, zodat de calculator hetzelfde ritme
       heeft als de dienstpagina's.
       HERONTWERP 2026-08-14: de onderruimte is teruggebracht van
       clamp(1.5rem, 4vh, 2.25rem) naar clamp(1rem, 2.5vh, 1.5rem), en
       max-width:15ch is van de H1 af. Die 15ch brak "Wat werven je echt kost."
       over twee Anton-regels en kostte ruim 130px hoogte zonder dat er iets
       stond; op één regel past hij ruim binnen de container. Samen met de
       weggehaalde disclaimerstrip haalt dat de rekenmodule boven de vouw. */
    .calc-hero { padding-block: clamp(102px, 13vh, 128px) clamp(1rem, 2.5vh, 1.5rem); }
    @media (max-width: 1024px) {
      .calc-hero { padding-top: calc(78px + clamp(1.25rem, 3vh, 1.75rem)); }
    }
    .calc-hero .crumbs { margin-bottom: clamp(18px, 3vh, 28px); }
    .calc-hero .eyebrow { margin-bottom: 16px; }
    .calc-hero h1 { font-size: var(--text-hero); margin-bottom: 16px; }
    .calc-hero-lead { max-width: 62ch; }
    @media (max-width: 560px) { .calc-hero h1 { font-size: var(--text-hero-s); } }

    /* ---------- De drie stappen ----------
       TWEEDE RONDE 2026-08-14. Hiervoor stond hier een tweekolomsindeling:
       invoerpaneel links, uitkomst rechts. Die toonde twee dingen tegelijk en
       zei niets over volgorde, waardoor het eerste wat je zag de kop "DE
       UITKOMST" was terwijl je nog niets had ingevuld, en het paneel waar je
       moet BEGINNEN er klein naast stond. Een calculator is geen dashboard maar
       een taak, dus de pagina heeft nu een verloop: 1, 2, 3 onder elkaar.

       De rail met genummerde schijven is het recept van de processectie op de
       homepage (.s3-tijdlijn in css/sections/s3.css). Die styling is daar
       gescoped op .s3, dus hier staat een eigen, soberder versie; .num-badge
       zelf komt uit css/base.css en is dus letterlijk hetzelfde onderdeel. */
    .calc-tool { padding-block: clamp(1rem, 2.5vh, 1.75rem) var(--space-section); }

    .calc-stappen {
      --stap-gap: clamp(30px, 4.5vh, 52px);
      list-style: none;
      display: grid;
      row-gap: var(--stap-gap);
      max-width: 1040px;
      counter-reset: none;
    }

    .calc-stap {
      position: relative;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      column-gap: clamp(16px, 2vw, 28px);
      align-items: start;
    }
    /* De verticale lijn loopt van onder de schijf door tot aan de volgende
       schijf, dus hij moet de rij-tussenruimte overbruggen. */
    .calc-stap:not(:last-child)::before {
      content: '';
      position: absolute;
      left: 21px;
      top: 52px;
      bottom: calc(-1 * var(--stap-gap) - 8px);
      width: 2px;
      background: var(--line);
    }
    .calc-stap > .num-badge { position: relative; z-index: 1; }
    /* Stap 3 is de beloning, niet nog een invoerstap. Oranje schijf markeert
       dat zonder er een tweede displaygetal bij te zetten. */
    .num-badge--accent { background: var(--orange-500); }

    .calc-stap-body { min-width: 0; padding-top: 2px; }
    /* Alle drie de stapkoppen dragen dezelfde maat. De volgorde moet het werk
       doen, niet de lettergrootte: zodra stap 3 groter is dan stap 1 schreeuwt
       de uitkomst weer voordat je iets hebt ingevuld. */
    .calc-stap-kop { font-size: clamp(1.65rem, 2.6vw, 2.3rem); line-height: 1.05; }
    .calc-stap-sub {
      font-size: var(--text-lead);
      line-height: 1.55;
      color: var(--text-body);
      margin-top: 10px;
      max-width: 60ch;
    }

    /* Invoerkaart = het sitebrede formulier-kaartrecept (blauw oppervlak, s9/o10) */
    .calc-kaart {
      background: var(--surface-blue);
      border: 1px solid var(--blue-200);
      border-radius: var(--r-md);
      padding: clamp(20px, 2.4vw, 28px);
      box-shadow: var(--shadow-card);
      margin-top: 20px;
    }
    .calc-velden {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(18px, 2.2vw, 28px);
      align-items: start;
    }
    @media (max-width: 720px) { .calc-velden { grid-template-columns: minmax(0, 1fr); } }
    /* Het recruitersalaris heeft een schuifregelaar, een getalveld en twee
       snelkeuzeknoppen; dat past niet in een halve kolom. Het veld spant dus
       de volle breedte, maar de bediening zelf wordt begrensd: een
       schuifregelaar van negenhonderd pixels en twee knoppen van een halve
       kaartbreedte lezen als een fout, niet als een keuze. */
    .calc-veld--breed { grid-column: 1 / -1; }
    .calc-veld--breed .calc-duo,
    .calc-veld--breed .calc-presets,
    .calc-veld--breed .calc-hint { max-width: 520px; }

    @media (max-width: 560px) {
      .calc-stap { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
      .calc-stap > .num-badge { width: 36px; height: 36px; font-size: 15px; }
      .calc-stap:not(:last-child)::before { left: 17px; top: 44px; }
    }

    .calc-duo { display: flex; align-items: center; gap: 12px; }
    .calc-duo input[type="range"] {
      flex: 1 1 auto;
      min-width: 0;
      width: auto;
      padding: 0;
      border: 0;
      background: none;
      accent-color: var(--orange-500);
    }
    .calc-duo input[type="number"] { flex: none; width: 108px; text-align: right; }

    .calc-hint { font-size: .875rem; line-height: 1.5; color: var(--navy-500); }

    .calc-presets { display: flex; gap: 6px; margin-top: 8px; }
    .calc-preset {
      flex: 1 1 0;
      min-width: 0;
      display: block;
      text-align: center;
      font-family: inherit;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 10px 6px;
      background: #fff;
      border: 1px solid var(--blue-200);
      border-radius: var(--r-sm);
      color: var(--navy-500);
      cursor: pointer;
      transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }
    .calc-preset[aria-pressed="true"] { background: var(--navy-950); border-color: var(--navy-950); color: #fff; }
    .calc-preset:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 2px; }

    /* ---------- Tabellen ----------
       Twee tabellen delen dit recept: de vergelijking van de drie routes en de
       kostenopbouw. Onder 720px stapelen ze naar rijen met een label voor elke
       waarde, zonder dat de markup verandert: de labels komen uit data-label. */
    .calc-stap-body > .calc-tabel-wrap { margin-top: 20px; }
    .calc-tabel-wrap {
      background: var(--surface-card);
      border: 1px solid var(--line-paper);
      border-radius: var(--r-md);
      box-shadow: var(--shadow-card);
      overflow-x: auto;
    }
    .calc-tabel {
      width: 100%;
      border-collapse: collapse;
      font-size: 1rem;
    }
    .calc-tabel caption { text-align: left; }
    .calc-tabel thead th {
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text-muted);
      text-align: right;
      padding: 16px clamp(16px, 2vw, 24px);
      border-bottom: 1px solid var(--line-paper);
      white-space: nowrap;
    }
    .calc-tabel thead th:first-child { text-align: left; }
    .calc-tabel tbody th {
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.45;
      color: var(--text-strong);
      text-align: left;
      padding: 16px clamp(16px, 2vw, 24px);
      vertical-align: baseline;
    }
    .calc-tabel tbody td {
      font-size: 1rem;
      line-height: 1.45;
      color: var(--text-body);
      text-align: right;
      padding: 16px clamp(16px, 2vw, 24px);
      vertical-align: baseline;
      white-space: nowrap;
    }
    .calc-tabel tbody tr + tr th,
    .calc-tabel tbody tr + tr td { border-top: 1px solid var(--line-paper); }

    /* Bedragen in Public Sans, niet in Anton. Zie de Anton-regel bovenaan. */
    .calc-tabel .calc-bedrag { font-size: 1.0625rem; font-weight: 700; color: var(--text-strong); }
    .calc-tabel .calc-bedrag-sub { color: var(--text-muted); }
    .calc-leeg { color: var(--text-muted); font-style: normal; }

    /* De uitkomstrij: onze route. Cremeoppervlak plus een oranje kicker links,
       zodat het oog hem vindt zonder dat er een tweede displaygetal bij komt. */
    .calc-tabel-rij--uit th,
    .calc-tabel-rij--uit td { background: var(--surface-cream); }
    .calc-tabel-rij--uit th { box-shadow: inset 3px 0 0 var(--orange-500); }
    .calc-tabel-tag {
      display: inline-block;
      margin-left: 8px;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--orange-600);
      vertical-align: 1px;
    }

    /* Opbouwtabel: zelfde recept, maar met een zwaardere totaalregel. */
    .calc-tabel--opbouw tbody tr:nth-last-child(2) th,
    .calc-tabel--opbouw tbody tr:nth-last-child(2) td { border-top-width: 2px; border-top-color: var(--text-strong); }
    .calc-tabel-rij--totaal th,
    .calc-tabel-rij--totaal td { font-weight: 700; color: var(--text-strong); }
    .calc-tabel-rij--sub th,
    .calc-tabel-rij--sub td { font-size: .875rem; color: var(--text-muted); font-weight: 500; padding-top: 4px; }
    .calc-tabel-rij--sub th { border-top: 0 !important; }
    .calc-tabel-rij--sub td { border-top: 0 !important; }

    @media (max-width: 720px) {
      .calc-tabel, .calc-tabel thead, .calc-tabel tbody, .calc-tabel tr,
      .calc-tabel th, .calc-tabel td { display: block; }
      .calc-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
      .calc-tabel tbody tr { padding: 4px 0 14px; }
      .calc-tabel tbody tr + tr { border-top: 1px solid var(--line-paper); }
      .calc-tabel tbody tr + tr th,
      .calc-tabel tbody tr + tr td { border-top: 0; }
      .calc-tabel tbody th { padding-bottom: 8px; }
      .calc-tabel tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px;
        text-align: right;
        padding-block: 4px;
        white-space: normal;
      }
      .calc-tabel tbody td::before {
        content: attr(data-label);
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--text-muted);
        text-align: left;
      }
      .calc-tabel-rij--uit th { box-shadow: none; border-left: 3px solid var(--orange-500); }
    }

    .calc-kantel { font-size: 1rem; line-height: 1.6; color: var(--text-body); margin-top: 14px; max-width: 62ch; }

    /* ---------- Besparingsblok ----------
       HET accentblok van de pagina en de enige plek boven de vouw met een
       Anton-bedrag. Staat aan sinds 2026-08-14; zie js/rpo-calculator.js voor
       de voorwaarden waaronder het zichzelf verbergt. */
    .calc-besparing {
      margin-top: var(--gap-sm);
      background: var(--surface-card-dark);
      border: 1px solid var(--line-inv);
      border-radius: var(--r-md);
      padding: clamp(22px, 2.6vw, 32px);
      box-shadow: var(--shadow-card);
    }
    .calc-besparing[hidden] { display: none; }
    .calc-besparing-label {
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text-muted-inv);
      margin-bottom: 12px;
    }
    .calc-besparing-num {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(2.2rem, 4.2vw, 3.4rem);
      letter-spacing: .01em;
      line-height: 1.02;
      color: var(--orange-500);
    }
    .calc-besparing-pct {
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--text-strong-inv);
      margin-top: 10px;
    }
    .calc-besparing-sub {
      font-size: 1rem;
      line-height: 1.6;
      color: var(--text-body-inv);
      margin-top: 12px;
      max-width: 56ch;
    }

    .calc-indicatie {
      font-size: .875rem;
      line-height: 1.6;
      color: var(--text-muted);
      margin-top: 14px;
      max-width: 62ch;
    }

    /* ---------- Actieblok ---------- */
    .calc-acties {
      margin-top: var(--gap-sm);
      padding-top: 22px;
      border-top: 1px solid var(--line-paper);
    }
    .calc-acties-tekst {
      font-size: var(--text-lead);
      line-height: 1.5;
      font-weight: 600;
      color: var(--text-strong);
      max-width: 52ch;
    }
    .calc-acties-knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
    .calc-acties-model { font-size: .875rem; line-height: 1.6; color: var(--text-muted); margin-top: 16px; max-width: 62ch; }

    /* ---------- De opbouw ---------- */
    .calc-opbouw { background: var(--surface-cream); }
    .calc-opbouw-head { max-width: 62ch; margin-bottom: var(--gap-sm); }
    .calc-opbouw-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: 16px; }
    .calc-opbouw-head .eyebrow { margin-bottom: 16px; }

    /* De 11-versus-12-maandenregel. Aparte regel onder de tabel, want hij zit
       bewust niet in het totaal verwerkt; zie de comment in rc2.html. */
    .calc-elf {
      font-size: 1rem;
      line-height: 1.65;
      color: var(--text-body);
      margin-top: 18px;
      padding-left: 16px;
      border-left: 2px solid var(--orange-500);
      max-width: 72ch;
    }
    .calc-opbouw-noot { font-size: .875rem; line-height: 1.6; color: var(--text-muted); margin-top: 14px; max-width: 72ch; }
    .calc-opbouw-noot:empty { display: none; }

    /* ---------- Uitgangspunten (donker) ---------- */
    .calc-aannames-head { max-width: 62ch; }
    .calc-aannames-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: 16px; }
    .calc-aannames-head .eyebrow { margin-bottom: 16px; }

    /* De twaalf aannamekaarten waren 2,1 schermen op desktop en 4,1 op mobiel.
       Nu een dichte details. Native, dus hij werkt zonder JavaScript, en hij
       klapt open bij printen (zie de printregels onderaan dit bestand). */
    .calc-details { margin-top: var(--gap-sm); border-top: 1px solid var(--line-inv); }
    .calc-details-sam {
      display: block;
      cursor: pointer;
      padding: 20px 0;
      list-style: none;
    }
    .calc-details-sam::-webkit-details-marker { display: none; }
    .calc-details-sam > span:first-child {
      display: block;
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--text-strong-inv);
    }
    .calc-details-sam > span:first-child::after {
      content: '';
      display: inline-block;
      width: 8px; height: 8px;
      margin-left: 12px;
      border-right: 2px solid var(--orange-500);
      border-bottom: 2px solid var(--orange-500);
      transform: translateY(-2px) rotate(45deg);
      transition: transform .2s ease;
    }
    .calc-details[open] .calc-details-sam > span:first-child::after { transform: translateY(2px) rotate(-135deg); }
    /* Een dichte la die opsomt wat erin zit, bewijst dat er niets verstopt is
       zonder dat je hem hoeft te openen. */
    .calc-details-hint {
      display: block;
      font-size: .875rem;
      line-height: 1.6;
      color: var(--text-muted-inv);
      margin-top: 6px;
      max-width: 68ch;
    }
    .calc-details-sam:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 4px; }

    .calc-aannames-lijst {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(20px, 2.4vw, 30px) clamp(2rem, 4vw, 4rem);
      padding-bottom: 8px;
    }
    @media (max-width: 880px) { .calc-aannames-lijst { grid-template-columns: minmax(0, 1fr); } }
    .calc-aanname { border-top: 1px solid var(--line-inv); padding-top: 16px; }
    .calc-aanname .pill { margin-bottom: 10px; }
    .calc-aanname-post { font-size: 1rem; font-weight: 700; color: var(--text-strong-inv); line-height: 1.45; }
    /* Waarden in Public Sans, niet in Anton: twaalf displaygetallen op navy
       waren twaalf concurrenten van het accentgetal boven. */
    .calc-aanname-waarde { font-size: 1rem; font-weight: 700; color: #fff; margin-top: 4px; }
    .calc-aanname-bron { font-size: 1rem; line-height: 1.6; color: var(--text-muted-inv); margin-top: 8px; }

    .calc-aannames-slot {
      margin-top: var(--gap-sm);
      padding-top: 20px;
      border-top: 1px solid var(--line-inv);
      max-width: 74ch;
      font-size: 1rem;
      line-height: 1.7;
      color: var(--text-muted-inv);
    }

    /* ---------- Slot-CTA ---------- */
    .calc-slot { padding-block: 0 var(--space-section); }
    .calc-slot-inner {
      border-top: 1px solid var(--line-inv);
      padding-top: clamp(2.5rem, 6vh, 4rem);
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: clamp(24px, 3vw, 56px);
      align-items: end;
    }
    @media (max-width: 880px) { .calc-slot-inner { grid-template-columns: minmax(0, 1fr); align-items: start; } }
    .calc-slot h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); max-width: 16ch; }
    .calc-slot-body { font-size: 1rem; line-height: 1.7; color: var(--text-body-inv); max-width: 50ch; margin-top: 16px; }
    .calc-slot-acties { display: flex; flex-wrap: wrap; gap: 14px; }
    .calc-slot-micro { font-size: .875rem; color: var(--text-muted-inv); margin-top: 14px; }

    /* ---------- Printen ----------
       Een directeur maakt hier een pdf van voor zijn MT. Een dichte details zou
       dan leeg op papier komen, dus die klapt open. Het formulier en de knoppen
       hebben op papier geen functie. */
    @media print {
      .calc-details > .calc-aannames-lijst,
      .calc-details[open] > .calc-aannames-lijst { display: grid !important; }
      .calc-details:not([open]) > .calc-aannames-lijst { display: grid !important; }
      .calc-details-sam > span:first-child::after { display: none; }
      .calc-acties-knoppen, .calc-slot-acties { display: none !important; }
      /* De invoerkaarten hebben op papier geen functie, de ingevulde uitkomst wel. */
      .calc-kaart { display: none !important; }
      .calc-stap:not(:last-child)::before { display: none; }
      .calc-tabel-wrap { box-shadow: none; }
    }