/*
  Vive — Kostencalculator pensioenregeling voor werkgevers (derde pijler)
  Bilingual (NL/EN) self-mounting bundle — same embed pattern as portfolio-bundle.txt.

  EMBEDDEN (Webflow):
    <div id="vive-calc"></div>
    <script src="https://.../vive-pensioen-calculator-bundle.txt"><\/script>

  BREEDTE
  De calculator is full-bleed: hij vult 100% van de breedte van de div waarin hij
  staat en heeft zelf geen max-width of buitenpadding. Marges en padding regel je
  op de omliggende Webflow-sectie.

  Taal: leest document.documentElement.lang ("nl*" -> Nederlands, anders Engels) en
  luistert live naar wijzigingen daarvan (MutationObserver), zodat de widget direct
  herbouwt als de taal van de pagina wisselt zonder reload.

  HUISSTIJL
  Kleuren komen uit Vive Colors.svg. Accentkleur voor bediening is het Vive-groen
  #00BE64. De kostenverdeling gebruikt de vier overige merkkleuren als categorische
  chartkleuren: roze #FF8CB4, blauw #0096FF, oranje #F05014 en paars #A096FF.
  De zwarte "hero"-kaart is neutraal zwart en staat los van de accentkleur.

  Niet aanpassen tenzij je de brontaal-.html ook bijwerkt — dit bestand is een poort
  van vive-pensioen-calculator.html, die ongewijzigd blijft als referentie.
*/
(function () {
  "use strict";

  var TARGET_ID = "vive-calc";
  var STYLE_ID = "vive-calc-style";

  /* ── CONFIG: werk deze cijfers jaarlijks bij ──────────────── */
  var CONFIG = {
    franchise: 19172,        // AOW-franchise lijfrente (derde pijler)
    maxInkomen: 137800,      // maximum inkomen voor de jaarruimte
    maxJaarruimtePct: 0.30,  // fiscale jaarruimte: 30% van de grondslag
    maxPremieloon: 79409,    // maximumpremieloon werknemersverzekeringen + Zvw
    viveFeePerMaand: 7.50,   // Vive servicekosten per werknemer per MAAND => × 12 per jaar
    onboardingFee: 45        // eenmalige KYC/CDD-onboardingkosten per werknemer
  };

  /* ── Stylesheet: gelijk aan de brontaal-.html ── */
  var CSS = `
  #vive-calc {
    --vc-ink: #333333;
    --vc-ink-soft: #666666;
    --vc-green: #00BE64;
    --vc-green-deep: #007A41;
    --vc-black: #0A0A0A;
    --vc-cream: #f7f6f2;
    --vc-white: #ffffff;
    --vc-tile: #F4F4F4;
    --vc-border: #E5E5E5;
    --vc-hairline: #EDEDED;
    --vc-track: #E3E3E3;
    --vc-warn-bg: #fdf4e3;
    --vc-warn-text: #7a5410;
    --vc-pink: #FF8CB4;
    --vc-blue: #0096FF;
    --vc-orange: #F05014;
    --vc-purple: #A096FF;
    --vc-font: 'ABC Monument Grotesk', system-ui, -apple-system, sans-serif;

    font-family: var(--vc-font);
    color: var(--vc-ink);
    /* vult de volledige breedte van de div waarin hij staat; buitenruimte
       (marges/padding) regel je in Webflow op de omliggende sectie */
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  #vive-calc *, #vive-calc *::before, #vive-calc *::after { box-sizing: border-box; }

  .vc-layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 24px; align-items: stretch; }
  @media (max-width: 960px) { .vc-layout { grid-template-columns: 1fr; } }

  .vc-panel { background: var(--vc-white); border: 1px solid var(--vc-hairline); border-radius: 28px; padding: 32px; container-type: inline-size; }
  .vc-panel-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
  .vc-panel-sub { font-size: 14px; color: var(--vc-ink-soft); margin: 0 0 12px; }

  .vc-rule { border: none; border-top: 1px solid var(--vc-hairline); margin: 14px 0; }

  .vc-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; }
  .vc-lbl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .vc-lbl-head { display: flex; align-items: center; gap: 12px; }
  .vc-lbl label, .vc-lbl-strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0; }
  .vc-lbl-sub { display: block; font-size: 13px; color: var(--vc-ink-soft); line-height: 1.35; }
  .vc-lbl--step .vc-lbl-sub { padding-left: 38px; }
  .vc-step {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: var(--vc-green); color: #fff;
    font-size: 13px; font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
  }

  .vc-ctrl { position: relative; width: 170px; flex: none; }
  .vc-ctrl input, .vc-select {
    width: 100%; padding: 14px 18px; font-size: 16px; font-family: inherit;
    color: var(--vc-ink); background: var(--vc-white);
    border: 1px solid var(--vc-border); border-radius: 999px;
    appearance: none; -webkit-appearance: none; text-align: right;
  }
  .vc-ctrl.has-euro input { padding-left: 38px; }
  .vc-ctrl.has-unit input { padding-right: 38px; }
  .vc-ctrl .vc-euro, .vc-ctrl .vc-unit {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: var(--vc-ink-soft); font-size: 15px; pointer-events: none;
  }
  .vc-ctrl .vc-euro { left: 18px; }
  .vc-ctrl .vc-unit { right: 18px; }
  #vive-calc input[type="number"]::-webkit-outer-spin-button,
  #vive-calc input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  #vive-calc input[type="number"] { -moz-appearance: textfield; }
  #vive-calc input:focus, #vive-calc select:focus, #vive-calc input[type="range"]:focus-visible {
    outline: 2px solid var(--vc-green); outline-offset: 1px;
  }

  .vc-field-block { margin: 4px 0 8px; }
  .vc-field-block label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
  .vc-select {
    text-align: left; padding-right: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23333333' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 18px center;
  }

  .vc-toggle { display: flex; background: var(--vc-tile); border-radius: 999px; padding: 4px; flex: none; }
  .vc-toggle-opt { position: relative; }
  .vc-toggle-opt input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .vc-toggle-opt span {
    display: block; text-align: center; font-size: 13px; font-weight: 600;
    padding: 9px 16px; border-radius: 999px; color: var(--vc-ink-soft); white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
  }
  .vc-toggle-opt input:checked + span { background: var(--vc-black); color: #fff; }
  .vc-toggle-opt input:focus-visible + span { outline: 2px solid var(--vc-green); outline-offset: 2px; }

  .vc-slider-ctrl { display: flex; align-items: center; gap: 14px; width: 240px; flex: none; }
  .vc-slider-ctrl output { font-size: 17px; font-weight: 700; min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; }
  #vive-calc input[type="range"] {
    -webkit-appearance: none; appearance: none;
    flex: 1; min-width: 0; height: 24px; margin: 0; background: transparent; cursor: pointer;
  }
  #vive-calc input[type="range"]::-webkit-slider-runnable-track {
    height: 6px; border-radius: 999px;
    background: linear-gradient(90deg, var(--vc-green) var(--vc-fill, 0%), var(--vc-track) var(--vc-fill, 0%));
  }
  #vive-calc input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--vc-green); border: none; margin-top: -8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: pointer;
  }
  #vive-calc input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--vc-track); }
  #vive-calc input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--vc-green); }
  #vive-calc input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%; background: var(--vc-green); border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: pointer;
  }

  .vc-hint { font-size: 13px; color: var(--vc-ink-soft); margin: 0 0 6px; line-height: 1.4; }
  .vc-warn {
    display: none; font-size: 13.5px; background: var(--vc-warn-bg); color: var(--vc-warn-text);
    border-radius: 14px; padding: 12px 16px; margin-top: 10px;
  }

  .vc-hero { background: var(--vc-black); color: #fff; border-radius: 28px; padding: 32px; }
  .vc-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
  .vc-hero-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
  .vc-hero-total { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .vc-hero-cap { font-size: 13px; color: rgba(255,255,255,0.55); text-align: right; margin-top: 6px; }

  .vc-bar { display: flex; gap: 3px; height: 22px; margin-bottom: 22px; }
  .vc-bar span { border-radius: 999px; min-width: 0; }

  /* auto-fit: de legenda valt zelf terug naar minder kolommen zodra een cel
     smaller zou worden dan het langste label ("Werkgeverslasten" is één woord
     en kan niet afbreken). Hangt af van de breedte van de KAART, niet van het
     scherm — de widget is full-bleed en kan dus elke breedte hebben. */
  .vc-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 16px; }
  /* kolom-flex + margin-top:auto houdt de bedragen op één lijn, ook als een
     label over meer regels loopt (EN-labels zijn langer dan de NL-labels) */
  .vc-legend > div { display: flex; flex-direction: column; }
  .vc-leg-l { display: flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
  .vc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .vc-leg-v { font-size: 15px; font-weight: 600; margin-top: auto; padding-top: 4px; font-variant-numeric: tabular-nums; }

  .vc-hero-rule { border: none; border-top: 1px solid rgba(255,255,255,0.16); margin: 24px 0 18px; }
  .vc-hero-foot { display: flex; flex-wrap: wrap; gap: 8px 40px; font-size: 14px; color: rgba(255,255,255,0.6); }
  .vc-hero-foot strong { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

  .vc-card { background: var(--vc-white); border: 1px solid var(--vc-hairline); border-radius: 28px; padding: 32px; margin-top: 24px; }
  .vc-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
  .vc-card-sub { font-size: 14px; color: var(--vc-ink-soft); margin: 0 0 22px; }
  /* auto-fit met een ondergrens van 160px: de tegels vallen zelf terug naar twee
     of één kolom zodra ze smaller zouden worden dan dat. Onder die breedte loopt
     een label naar drie regels en raken de bedragen uit lijn. Dit hangt af van de
     breedte van de KAART, niet van het scherm — een media query op de viewport
     dekt dat niet, want de kaart is ook smal net boven de 960px-omslag. */
  .vc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
  /* Tegels: het label krijgt twee regels hoogte gereserveerd en het bijschrift
     wordt naar beneden geduwd. Daardoor staan de bedragen in alle tegels op
     dezelfde hoogte, ook als het ene label één regel is en het andere twee. */
  .vc-tile { background: var(--vc-tile); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; }
  .vc-tile-l { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--vc-ink-soft); line-height: 1.3; min-height: 2.6em; }
  .vc-tile-l .vc-dot { background: var(--vc-green); margin-top: 5px; }
  .vc-tile-v { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-top: 14px; font-variant-numeric: tabular-nums; }
  .vc-tile-c { font-size: 12.5px; color: var(--vc-ink-soft); margin-top: auto; padding-top: 6px; line-height: 1.35; }
  .vc-disclaimer { font-size: 12.5px; color: var(--vc-ink-soft); line-height: 1.55; margin: 20px 0 0; }

  .vc-info {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-left: 4px; border-radius: 7px; padding: 0; flex: none;
    background: var(--vc-tile); border: none; color: var(--vc-ink-soft);
    font-size: 11px; font-weight: 700; font-family: var(--vc-font); text-transform: lowercase;
    line-height: 1; cursor: help;
  }
  .vc-info .vc-tip {
    position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5;
    width: max-content; max-width: min(240px, calc(100vw - 48px));
    background: var(--vc-ink); color: #fff; font-size: 12px; font-weight: 400; text-align: left;
    font-family: Arial, sans-serif; text-transform: none;
    line-height: 1.4; padding: 8px 10px; border-radius: 8px;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease;
  }
  .vc-info:hover .vc-tip, .vc-info:focus .vc-tip, .vc-info:focus-visible .vc-tip { opacity: 1; visibility: visible; }
  .vc-hero .vc-info { background: rgba(255,255,255,0.14); color: #fff; }
  .vc-hero .vc-info .vc-tip { background: #fff; color: var(--vc-ink); box-shadow: 0 6px 24px rgba(0,0,0,0.28); }
  .vc-legend > div:nth-child(n+3) .vc-tip { left: auto; right: 0; }

  /* Container query op het paneel zelf: label links + bediening rechts naast
     elkaar werkt alleen zolang het paneel breed genoeg is. Omdat de widget
     full-bleed is, zegt de schermbreedte daar niets meer over — de breedte van
     het PANEEL wel. De media query eronder blijft staan als terugval. */
  @container (max-width: 420px) {
    .vc-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .vc-ctrl, .vc-slider-ctrl, .vc-toggle { width: 100%; }
    .vc-toggle-opt { flex: 1; }
    /* Drie opties naast elkaar passen hier niet; onder elkaar wel. De
       container krijgt dan een kleinere radius: bij border-radius 999px wordt
       de bocht van een hoge, smalle box de halve hoogte, waardoor de hoeken van
       de bovenste en onderste pil buiten die bocht uitsteken. Padding 6px i.p.v.
       4px, zodat de focusring (2px dik bij 2px offset) er ook binnen past. */
    .vc-toggle { flex-direction: column; border-radius: 20px; padding: 6px; }
  }

  @media (max-width: 560px) {
    .vc-panel, .vc-hero, .vc-card { padding: 24px; border-radius: 22px; }
    .vc-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .vc-ctrl, .vc-slider-ctrl, .vc-toggle { width: 100%; }
    .vc-toggle-opt { flex: 1; }
    .vc-toggle { flex-direction: column; border-radius: 20px; padding: 6px; }
    .vc-hero-top { flex-direction: column; }
    .vc-hero-total, .vc-hero-cap { text-align: left; }
    .vc-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vc-legend > div .vc-tip { left: 0; right: auto; }
    .vc-legend > div:nth-child(even) .vc-tip { left: auto; right: 0; }
    .vc-tiles { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) { #vive-calc * { transition: none !important; } }
  `;

  /* ── Valuta: hele euro's, zonder ""-suffix, in beide talen ── */
  var FMT_NL = new Intl.NumberFormat("nl-NL", { style: "currency", currency: "EUR", maximumFractionDigits: 0 });
  var FMT_EN = new Intl.NumberFormat("en-IE", { style: "currency", currency: "EUR", maximumFractionDigits: 0 });
  function eur(v, lng) {
    return (lng === "nl" ? FMT_NL : FMT_EN).format(Math.round(v));
  }
  function pctStr(v, decimals, lng) {
    var s = v.toFixed(decimals);
    return lng === "nl" ? s.replace(".", ",") : s;
  }

  /* ── Vertalingen ── */
  var T = {
    nl: {
      panelTitle: "Jouw gegevens",
      panelSub: "Gemiddelden volstaan voor een eerste indicatie.",
      aantalLabel: "Aantal werknemers",
      salarisLabel: "Gemiddeld bruto jaarsalaris", salarisSub: "Incl. vakantiegeld",
      step1Label: "Manier van bijdragen",
      modeGroupLabel: "Manier van bijdrage bepalen",
      modePct: "Pensioengrondslag", modeBruto: "Brutosalaris", modeFixed: "Vast bedrag",
      pctLabel: "Bijdrage-percentage", pctSub: "Over de pensioengrondslag",
      pctHint: "De pensioengrondslag is het salaris boven de AOW-franchise van € 19.172. Je bepaalt zelf per maand wie je sponsort en hoeveel.",
      brutoSub: "Over het brutosalaris",
      brutoHint: "Het percentage gaat over het volledige brutosalaris (tot € 137.800), zonder aftrek van de AOW-franchise. Je bepaalt zelf per maand wie je sponsort en hoeveel.",
      fixedLabel: "Vast bedrag per werknemer", fixedSub: "Per maand",
      fixedHint: "Hetzelfde bedrag voor iedere werknemer, ongeacht salaris. Komt dit boven de fiscale jaarruimte (30% van de grondslag) uit, dan tellen we alleen het toegestane deel mee.",
      typeLabel: "Werkgeverslasten over bijdrage",
      typeOpt1: "Kleine werkgever, vaste contracten (17,13%)",
      typeOpt2: "Grote werkgever, vaste contracten (18,49%)",
      typeOptCustom: "Ik ken mijn eigen werkgeverslasten",
      customLabel: "Eigen percentage werkgeverslasten",

      heroTitle: "Wat betaalt de werkgever?",
      heroCap: "totaal in jaar 1",
      barAria: "Verdeling van de kosten in jaar 1",
      legEenmalig: "Eenmalig",
      ariaEenmalig: "Uitleg bij Eenmalig",
      tipEenmalig: "Een eenmalige kost van € 45 per werknemer voor de verplichte KYC/CDD-controle (identiteits- en klantonderzoek) die wij als financiële instelling moeten uitvoeren bij het onboarden. Dit betaal je alleen bij de start, niet ieder jaar.",
      legVast: "Vaste kosten",
      ariaVast: "Uitleg bij Vaste kosten",
      tipVast: "Onze servicekosten: € 7,50 per werknemer per maand, dus € 90 per werknemer per jaar, keer het aantal werknemers.",
      legPensioen: "Pensioenbijdrage",
      ariaPensioen: "Uitleg bij Pensioenbijdrage",
      tipPensioen: "De bruto werkgeversbijdrage die op de pensioenrekeningen wordt gestort, voor alle werknemers samen. Gemaximeerd op de fiscale jaarruimte van 30% van de grondslag.",
      legLasten: "Werkgeverslasten",
      ariaLasten: "Uitleg bij Werkgeverslasten",
      tipLasten: "De sociale werkgeverspremies (Awf, Aof, Whk en de werkgeversheffing Zvw) over de bijdrage, tot het maximumpremieloon van € 79.409.",
      footYearPre: "Vanaf jaar 2: ", footYearPost: " per jaar",
      footMonthPre: "Per werknemer per maand: ",

      cardTitle: "Kosten per werknemer",
      cardSubPre: "Per werknemer, per jaar (", cardSubPost: ").",
      tile1Label: "Bruto bijdrage van werkgever", tile1Cap: "op de pensioenrekening",
      tile2Label: "Werkgeverslasten", tile2Cap: "sociale premies over de bijdrage",
      tile3Label: "Totaal per werknemer", tile3Cap: "bijdrage + werkgeverslasten",
      disclaimer: "Dit overzicht is uitsluitend een indicatie; werkelijke kosten en fiscale ruimte kunnen afwijken. Aan deze berekening kunnen geen rechten worden ontleend.",

      werknemer: function (n) { return n + (n === 1 ? " werknemer" : " werknemers"); },
      warnCapped: function (x) { return "De bijdrage komt boven de fiscale jaarruimte (30% van de grondslag) uit en is afgetopt op " + x + " per werknemer."; },
      warnMaxInkomen: function (x) { return "Het salaris ligt boven het maximum pensioengevend inkomen van " + x + "; de grondslag is daarop gemaximeerd."; },
      warnBoven: function (x) { return "Het salaris ligt boven het maximumpremieloon van " + x + ": over de bijdrage betaal je geen extra sociale premies of Zvw."; },
      warnDeels: function (x) { return "Een deel van de bijdrage valt boven het maximumpremieloon van " + x + "; daarover rekenen we geen werkgeverslasten."; }
    },
    en: {
      panelTitle: "Your details",
      panelSub: "Averages are fine for a first estimate.",
      aantalLabel: "Number of employees",
      salarisLabel: "Average gross annual salary", salarisSub: "Incl. holiday allowance",
      step1Label: "How you contribute",
      modeGroupLabel: "How the contribution is determined",
      modePct: "Pension base", modeBruto: "Gross salary", modeFixed: "Fixed amount",
      pctLabel: "Contribution percentage", pctSub: "Over the pension base (pensioengrondslag)",
      pctHint: "The pension base (pensioengrondslag) is the salary above the state pension (AOW) threshold of €19,172. You decide each month who you sponsor and how much.",
      brutoSub: "Over the full gross salary",
      brutoHint: "The percentage applies to the full gross salary (up to €137,800), with no state pension (AOW) threshold deducted. You decide each month who you sponsor and how much.",
      fixedLabel: "Fixed amount per employee", fixedSub: "Per month",
      fixedHint: "The same amount for every employee, regardless of salary. If this exceeds the fiscal annual allowance (jaarruimte) of 30% of the base, we only count the allowed part.",
      typeLabel: "Employer social charges (werkgeverslasten) on the contribution",
      typeOpt1: "Small employer, permanent contracts (17.13%)",
      typeOpt2: "Large employer, permanent contracts (18.49%)",
      typeOptCustom: "I know my own employer contribution rate",
      customLabel: "Your own employer contribution rate",

      heroTitle: "What does the employer pay?",
      heroCap: "total in year 1",
      barAria: "Breakdown of the costs in year 1",
      legEenmalig: "One-time",
      ariaEenmalig: "About One-time",
      tipEenmalig: "A one-time cost of €45 per employee for the mandatory KYC/CDD check (identity and customer due diligence) that we, as a financial institution, must carry out when onboarding. You only pay this at the start, not every year.",
      legVast: "Fixed costs",
      ariaVast: "About Fixed costs",
      tipVast: "Our service fee: €7.50 per employee per month, so €90 per employee per year, times the number of employees.",
      legPensioen: "Pension contribution",
      ariaPensioen: "About Pension contribution",
      tipPensioen: "The gross employer contribution deposited into the pension accounts, for all employees combined. Capped at the fiscal annual allowance (jaarruimte) of 30% of the base.",
      legLasten: "Employer social charges",
      ariaLasten: "About Employer social charges",
      tipLasten: "The statutory employer social security premiums (Awf, Aof, Whk and the Zvw employer levy) on the contribution, up to the maximum contribution wage (maximumpremieloon) of €79,409.",
      footYearPre: "From year 2: ", footYearPost: " per year",
      footMonthPre: "Per employee per month: ",

      cardTitle: "Cost per employee",
      cardSubPre: "Per employee, per year (", cardSubPost: ").",
      tile1Label: "Gross employer contribution", tile1Cap: "into the pension account",
      tile2Label: "Employer social charges", tile2Cap: "social premiums on the contribution",
      tile3Label: "Total per employee", tile3Cap: "contribution + social charges",
      disclaimer: "This overview is an indication only; actual costs and tax allowance may differ. No rights can be derived from this calculation.",

      werknemer: function (n) { return n + (n === 1 ? " employee" : " employees"); },
      warnCapped: function (x) { return "The contribution exceeds the fiscal annual allowance (jaarruimte) of 30% of the base and has been capped at " + x + " per employee."; },
      warnMaxInkomen: function (x) { return "The salary is above the maximum pensionable income (maximum pensioengevend inkomen) of " + x + "; the base has been capped accordingly."; },
      warnBoven: function (x) { return "The salary is above the maximum contribution wage (maximumpremieloon) of " + x + ": you pay no extra social security premiums or Zvw on the contribution."; },
      warnDeels: function (x) { return "Part of the contribution falls above the maximum contribution wage (maximumpremieloon) of " + x + "; we don't charge employer social charges (werkgeverslasten) on that part."; }
    }
  };

  function currentLang() {
    var raw = (document.documentElement.getAttribute("lang") || "").toLowerCase();
    return raw.indexOf("nl") === 0 ? "nl" : "en";
  }

  function buildMarkup(t) {
    return `
    <div class="vc-layout">

      <div class="vc-panel">
        <h2 class="vc-panel-title">${t.panelTitle}</h2>
        <p class="vc-panel-sub">${t.panelSub}</p>

        <div class="vc-row">
          <span class="vc-lbl"><span class="vc-lbl-head"><label for="vc-aantal">${t.aantalLabel}</label></span></span>
          <span class="vc-ctrl"><input type="number" id="vc-aantal" value="10" min="1" step="1"></span>
        </div>

        <div class="vc-row">
          <span class="vc-lbl">
            <span class="vc-lbl-head"><label for="vc-salaris">${t.salarisLabel}</label></span>
            <span class="vc-lbl-sub">${t.salarisSub}</span>
          </span>
          <span class="vc-ctrl has-euro"><span class="vc-euro" aria-hidden="true">€</span><input type="number" id="vc-salaris" value="45000" min="0" step="500"></span>
        </div>

        <hr class="vc-rule">

        <div class="vc-row">
          <span class="vc-lbl vc-lbl--step">
            <span class="vc-lbl-head">
              <span class="vc-step" aria-hidden="true">1</span>
              <span class="vc-lbl-strong">${t.step1Label}</span>
            </span>
          </span>
          <div class="vc-toggle" role="radiogroup" aria-label="${t.modeGroupLabel}">
            <label class="vc-toggle-opt"><input type="radio" name="vc-mode" id="vc-mode-pct" value="pct" checked><span>${t.modePct}</span></label>
            <label class="vc-toggle-opt"><input type="radio" name="vc-mode" id="vc-mode-bruto" value="bruto"><span>${t.modeBruto}</span></label>
            <label class="vc-toggle-opt"><input type="radio" name="vc-mode" id="vc-mode-fixed" value="fixed"><span>${t.modeFixed}</span></label>
          </div>
        </div>

        <div id="vc-pct-wrap">
          <div class="vc-row">
            <span class="vc-lbl vc-lbl--step">
              <span class="vc-lbl-head">
                <span class="vc-step" aria-hidden="true">2</span>
                <label for="vc-pct">${t.pctLabel}</label>
              </span>
              <span class="vc-lbl-sub" id="vc-pct-sub">${t.pctSub}</span>
            </span>
            <div class="vc-slider-ctrl">
              <input type="range" id="vc-pct" min="1" max="30" step="0.5" value="8" aria-describedby="vc-pct-hint">
              <output id="vc-pct-out" for="vc-pct">8%</output>
            </div>
          </div>
          <p class="vc-hint" id="vc-pct-hint">${t.pctHint}</p>
        </div>

        <div id="vc-fixed-wrap" style="display:none">
          <div class="vc-row">
            <span class="vc-lbl vc-lbl--step">
              <span class="vc-lbl-head">
                <span class="vc-step" aria-hidden="true">2</span>
                <label for="vc-fixed">${t.fixedLabel}</label>
              </span>
              <span class="vc-lbl-sub">${t.fixedSub}</span>
            </span>
            <span class="vc-ctrl has-euro"><span class="vc-euro" aria-hidden="true">€</span><input type="number" id="vc-fixed" value="100" min="0" step="5" aria-describedby="vc-fixed-hint"></span>
          </div>
          <p class="vc-hint" id="vc-fixed-hint">${t.fixedHint}</p>
        </div>

        <hr class="vc-rule">

        <div class="vc-field-block">
          <label for="vc-type">${t.typeLabel}</label>
          <select id="vc-type" class="vc-select">
            <option value="17.13" selected>${t.typeOpt1}</option>
            <option value="18.49">${t.typeOpt2}</option>
            <option value="custom">${t.typeOptCustom}</option>
          </select>
        </div>

        <div class="vc-field-block" id="vc-custom-wrap" style="display:none">
          <label for="vc-custom">${t.customLabel}</label>
          <span class="vc-ctrl has-unit" style="width:100%"><span class="vc-unit" aria-hidden="true">%</span><input type="number" id="vc-custom" value="17.13" min="0" max="40" step="0.01"></span>
        </div>

        <p class="vc-warn" id="vc-warn" role="status"></p>
      </div>

      <div>
        <section class="vc-hero" aria-live="polite">
          <div class="vc-hero-top">
            <h3 class="vc-hero-title">${t.heroTitle}</h3>
            <div>
              <div class="vc-hero-total" id="vc-out-eerstejaar">—</div>
              <div class="vc-hero-cap">${t.heroCap}</div>
            </div>
          </div>

          <div class="vc-bar" role="img" aria-label="${t.barAria}">
            <span id="vc-seg-eenmalig" style="background:var(--vc-pink)"></span>
            <span id="vc-seg-vast" style="background:var(--vc-blue)"></span>
            <span id="vc-seg-pensioen" style="background:var(--vc-orange)"></span>
            <span id="vc-seg-lasten" style="background:var(--vc-purple)"></span>
          </div>

          <div class="vc-legend">
            <div>
              <div class="vc-leg-l"><span class="vc-dot" style="background:var(--vc-pink)"></span>${t.legEenmalig}<button type="button" class="vc-info" aria-label="${t.ariaEenmalig}"><span aria-hidden="true">i</span><span class="vc-tip">${t.tipEenmalig}</span></button></div>
              <div class="vc-leg-v" id="vc-out-onboarding">—</div>
            </div>
            <div>
              <div class="vc-leg-l"><span class="vc-dot" style="background:var(--vc-blue)"></span>${t.legVast}<button type="button" class="vc-info" aria-label="${t.ariaVast}"><span aria-hidden="true">i</span><span class="vc-tip">${t.tipVast}</span></button></div>
              <div class="vc-leg-v" id="vc-out-vivefee">—</div>
            </div>
            <div>
              <div class="vc-leg-l"><span class="vc-dot" style="background:var(--vc-orange)"></span>${t.legPensioen}<button type="button" class="vc-info" aria-label="${t.ariaPensioen}"><span aria-hidden="true">i</span><span class="vc-tip">${t.tipPensioen}</span></button></div>
              <div class="vc-leg-v" id="vc-out-pensioen">—</div>
            </div>
            <div>
              <div class="vc-leg-l"><span class="vc-dot" style="background:var(--vc-purple)"></span>${t.legLasten}<button type="button" class="vc-info" aria-label="${t.ariaLasten}"><span aria-hidden="true">i</span><span class="vc-tip">${t.tipLasten}</span></button></div>
              <div class="vc-leg-v" id="vc-out-lastentot">—</div>
            </div>
          </div>

          <hr class="vc-hero-rule">

          <div class="vc-hero-foot">
            <span>${t.footYearPre}<strong id="vc-out-totaal">—</strong>${t.footYearPost}</span>
            <span>${t.footMonthPre}<strong id="vc-out-maand">—</strong></span>
          </div>
        </section>

        <section class="vc-card" aria-live="polite">
          <h3>${t.cardTitle}</h3>
          <p class="vc-card-sub">${t.cardSubPre}<span id="vc-out-n">10</span>${t.cardSubPost}</p>

          <div class="vc-tiles">
            <div class="vc-tile">
              <div class="vc-tile-l"><span class="vc-dot"></span>${t.tile1Label}</div>
              <div class="vc-tile-v" id="vc-out-bijdrage">—</div>
              <div class="vc-tile-c">${t.tile1Cap}</div>
            </div>
            <div class="vc-tile">
              <div class="vc-tile-l"><span class="vc-dot"></span>${t.tile2Label}</div>
              <div class="vc-tile-v" id="vc-out-lasten">—</div>
              <div class="vc-tile-c">${t.tile2Cap}</div>
            </div>
            <div class="vc-tile">
              <div class="vc-tile-l"><span class="vc-dot"></span>${t.tile3Label}</div>
              <div class="vc-tile-v" id="vc-out-pw">—</div>
              <div class="vc-tile-c">${t.tile3Cap}</div>
            </div>
          </div>

          <p class="vc-disclaimer">${t.disclaimer}</p>
        </section>
      </div>

    </div>`;
  }

  function captureState() {
    var aantal = document.getElementById("vc-aantal");
    if (!aantal) return null;
    var modeEl = document.querySelector('input[name="vc-mode"]:checked');
    return {
      aantal: aantal.value,
      salaris: document.getElementById("vc-salaris").value,
      mode: modeEl ? modeEl.value : "pct",
      pct: document.getElementById("vc-pct").value,
      fixed: document.getElementById("vc-fixed").value,
      type: document.getElementById("vc-type").value,
      custom: document.getElementById("vc-custom").value
    };
  }

  function restoreState(state) {
    if (!state) return;
    document.getElementById("vc-aantal").value = state.aantal;
    document.getElementById("vc-salaris").value = state.salaris;
    // id's zijn vc-mode-pct / vc-mode-bruto / vc-mode-fixed, gelijk aan de waarden
    var modeEl = document.getElementById("vc-mode-" + (state.mode || "pct"));
    if (modeEl) modeEl.checked = true;
    document.getElementById("vc-pct").value = state.pct;
    document.getElementById("vc-fixed").value = state.fixed;
    document.getElementById("vc-type").value = state.type;
    document.getElementById("vc-custom").value = state.custom;
  }

  function wireEvents(t, lng) {
    var $ = function (id) { return document.getElementById(id); };

    function calc() {
      var n = Math.max(1, parseInt($("vc-aantal").value, 10) || 1);
      var sal = Math.max(0, parseFloat($("vc-salaris").value) || 0);
      var mode = document.querySelector('input[name="vc-mode"]:checked').value;
      $("vc-pct-wrap").style.display = mode === "fixed" ? "none" : "block";
      $("vc-fixed-wrap").style.display = mode === "fixed" ? "block" : "none";

      var pctEl = $("vc-pct");
      var pctRaw = parseFloat(pctEl.value);
      $("vc-pct-out").textContent = pctStr(pctRaw, pctRaw % 1 === 0 ? 0 : 1, lng) + "%";
      var pctFill = (pctRaw - pctEl.min) / (pctEl.max - pctEl.min) * 100;
      pctEl.style.setProperty("--vc-fill", pctFill + "%");

      var fixedMaand = Math.max(0, parseFloat($("vc-fixed").value) || 0);

      var lastenPct;
      if ($("vc-type").value === "custom") {
        $("vc-custom-wrap").style.display = "block";
        lastenPct = (parseFloat($("vc-custom").value) || 0) / 100;
      } else {
        $("vc-custom-wrap").style.display = "none";
        lastenPct = parseFloat($("vc-type").value) / 100;
      }

      /* Grondslag voor de bijdrage, afhankelijk van de gekozen manier:
         - pensioengrondslag: salaris (tot het max. pensioengevend inkomen) MIN de AOW-franchise
         - brutosalaris:      hetzelfde, maar ZONDER aftrek van de AOW-franchise
         De pensioengrondslag blijft daarnaast altijd nodig voor de fiscale
         jaarruimte hieronder: die is wettelijk 30% van de premiegrondslag, ook
         als je de bijdrage over het brutosalaris berekent. */
      var grondslag = Math.max(0, Math.min(sal, CONFIG.maxInkomen) - CONFIG.franchise);
      var brutoBasis = Math.min(sal, CONFIG.maxInkomen);
      var basis = mode === "bruto" ? brutoBasis : grondslag;
      var bijdrage = mode === "fixed" ? fixedMaand * 12 : basis * (pctRaw / 100);
      var warnings = [];

      // Toelichting bij de slider volgt de gekozen grondslag
      $("vc-pct-sub").textContent = mode === "bruto" ? t.brutoSub : t.pctSub;
      $("vc-pct-hint").textContent = mode === "bruto" ? t.brutoHint : t.pctHint;

      var maxJaarruimte = grondslag * CONFIG.maxJaarruimtePct;
      if (bijdrage > maxJaarruimte) {
        warnings.push(t.warnCapped(eur(maxJaarruimte, lng)));
        bijdrage = maxJaarruimte;
      }
      if (sal > CONFIG.maxInkomen) warnings.push(t.warnMaxInkomen(eur(CONFIG.maxInkomen, lng)));

      // Werkgeverslasten gelden alleen over het deel van (salaris + bijdrage) onder het maximumpremieloon
      var premieplichtig = Math.max(0, Math.min(sal + bijdrage, CONFIG.maxPremieloon) - Math.min(sal, CONFIG.maxPremieloon));
      var lasten = premieplichtig * lastenPct;

      if (sal >= CONFIG.maxPremieloon && bijdrage > 0) {
        warnings.push(t.warnBoven(eur(CONFIG.maxPremieloon, lng)));
      } else if (sal + bijdrage > CONFIG.maxPremieloon && bijdrage > 0) {
        warnings.push(t.warnDeels(eur(CONFIG.maxPremieloon, lng)));
      }

      var warnEl = $("vc-warn");
      warnEl.style.display = warnings.length ? "block" : "none";
      warnEl.textContent = warnings.join(" ");

      var perWerknemer = bijdrage + lasten;
      var viveFeePerJaar = CONFIG.viveFeePerMaand * 12;   // € 7,50 p/m = € 90 per werknemer per jaar
      var viveFeeTotaal = n * viveFeePerJaar;
      var totaal = perWerknemer * n + viveFeeTotaal;
      var onboardingTotaal = n * CONFIG.onboardingFee;
      var eersteJaar = totaal + onboardingTotaal;         // incl. eenmalige onboarding

      // Bedragen voor het hele bedrijf, per kostensoort
      var pensioenTotaal = bijdrage * n;
      var lastenTotaal = lasten * n;

      /* ── Weergavebedragen: alles op hele euro's ──────────────────────────
         Elk bedrag apart afronden laat de vier legendaposten net niet optellen
         tot het totaal erboven. Daarom ronden we drie posten af en leiden we de
         grootste (de pensioenbijdrage) af als restpost. Dat kan veilig: de
         Vive-fee (n × 90) en de onboarding (n × 45) zijn per definitie hele
         bedragen, dus de enige afrondingsruis zit in de werkgeverslasten — en de
         pensioenbijdrage is daar altijd groter dan. */
      var eersteJaarDisp   = Math.round(eersteJaar);
      var onboardingDisp   = Math.round(onboardingTotaal);
      var viveFeeDisp      = Math.round(viveFeeTotaal);
      var lastenTotaalDisp = Math.round(lastenTotaal);
      var pensioenDisp     = eersteJaarDisp - onboardingDisp - viveFeeDisp - lastenTotaalDisp;
      var totaalDisp       = eersteJaarDisp - onboardingDisp;   // jaar 2 = jaar 1 min de eenmalige post
      var bijdrageDisp     = Math.round(bijdrage);
      var lastenDisp       = Math.round(lasten);
      var perWerknemerDisp = bijdrageDisp + lastenDisp;         // het bijschrift belooft deze som

      // ── Hero-kaart ──
      $("vc-out-eerstejaar").textContent = eur(eersteJaarDisp, lng);
      $("vc-out-onboarding").textContent = eur(onboardingDisp, lng);
      $("vc-out-vivefee").textContent = eur(viveFeeDisp, lng);
      $("vc-out-pensioen").textContent = eur(pensioenDisp, lng);
      $("vc-out-lastentot").textContent = eur(lastenTotaalDisp, lng);
      $("vc-out-totaal").textContent = eur(totaalDisp, lng);
      $("vc-out-maand").textContent = eur(totaal / n / 12, lng);

      // Staafsegmenten: breedte naar rato van het jaar 1-totaal; nulposten inklappen
      [["vc-seg-eenmalig", onboardingDisp],
       ["vc-seg-vast", viveFeeDisp],
       ["vc-seg-pensioen", pensioenDisp],
       ["vc-seg-lasten", lastenTotaalDisp]].forEach(function (seg) {
        var el = $(seg[0]);
        var deel = eersteJaarDisp > 0 ? (seg[1] / eersteJaarDisp * 100) : 0;
        el.style.display = seg[1] > 0 ? "block" : "none";
        el.style.flex = "0 0 " + deel + "%";
      });

      // ── Stat-kaart ──
      $("vc-out-bijdrage").textContent = eur(bijdrageDisp, lng);
      $("vc-out-lasten").textContent = eur(lastenDisp, lng);
      $("vc-out-pw").textContent = eur(perWerknemerDisp, lng);
      $("vc-out-n").textContent = t.werknemer(n);
    }

    ["vc-aantal", "vc-salaris", "vc-pct", "vc-type", "vc-custom", "vc-fixed"].forEach(function (id) {
      $(id).addEventListener("input", calc);
      $(id).addEventListener("change", calc);
    });
    document.querySelectorAll('input[name="vc-mode"]').forEach(function (el) {
      el.addEventListener("change", calc);
    });
    calc();
  }

  function render() {
    var target = document.getElementById(TARGET_ID);
    if (!target) { console.error("[Vive] No #" + TARGET_ID + " found."); return; }

    if (!document.getElementById(STYLE_ID)) {
      var styleEl = document.createElement("style");
      styleEl.id = STYLE_ID;
      styleEl.textContent = CSS;
      document.head.appendChild(styleEl);
    }

    var lng = currentLang();
    var t = T[lng];
    var state = captureState();
    target.innerHTML = buildMarkup(t);
    restoreState(state);
    wireEvents(t, lng);
  }

  render();
  new MutationObserver(render).observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] });
})();