.elementor-kit-16{--e-global-color-primary:#1E6F52;--e-global-color-secondary:#1C2B39;--e-global-color-text:#4B5A67;--e-global-color-accent:#C17F2E;--e-global-color-ff2fbf8:#F6F5F1;--e-global-color-7bf9fd4:#FFFFFF;--e-global-color-bf6d798:#D8D4C9;--e-global-typography-primary-font-family:"Fraunces";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Fraunces";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;}.elementor-kit-16 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   zzpgeldzaken.nl — sitewide Aangepaste CSS
   Plak dit volledige bestand in: Elementor > Site Instellingen > Aangepaste CSS
   Bevat: kleurvariabelen, de rekenstrook-signatuurstijl, en alle .zzp-* classes
   die de rekentool-HTML-bestanden gebruiken. Zodra dit hier staat, kun je de
   losse <style>-blokken uit de rekentool-bestanden weglaten (zie toelichting onderaan).
============================================================= */

:root {
  --zzp-papier: #F6F5F1;
  --zzp-inkt: #1C2B39;
  --zzp-inkt-licht: #4B5A67;
  --zzp-groen: #1E6F52;
  --zzp-oker: #C17F2E;
  --zzp-kaartwit: #FFFFFF;
  --zzp-lijnmist: #D8D4C9;

  --zzp-font-koppen: 'Fraunces', serif;
  --zzp-font-body: 'Inter', sans-serif;
  --zzp-font-cijfers: 'IBM Plex Mono', monospace;
}

/* Subtiele papierstructuur op de achtergrond van elke tool-wrapper */
.zzp-tool-wrap {
  font-family: var(--zzp-font-body);
  color: var(--zzp-inkt);
  background-color: var(--zzp-papier);
  background-image: radial-gradient(circle at 1px 1px, rgba(28,43,57,0.035) 1px, transparent 0);
  background-size: 22px 22px;
  max-width: 680px;
  margin: 0 auto;
  padding: 28px 24px 32px;
}
.zzp-tool-wrap h2 {
  font-family: var(--zzp-font-koppen);
  font-size: 1.85rem;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}
.zzp-tool-wrap p.zzp-sub { margin: 0 0 20px; color: var(--zzp-inkt-licht); font-size: 0.95rem; }

/* Toggle-knoppen (rekenrichting, tarief) */
.zzp-toggle-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.zzp-toggle-btn {
  flex: 1; min-width: 120px; padding: 10px 14px; border: 1px solid var(--zzp-lijnmist);
  background: var(--zzp-kaartwit); border-radius: 6px; cursor: pointer;
  font-family: var(--zzp-font-body); font-size: 0.9rem; color: var(--zzp-inkt);
}
.zzp-toggle-btn.actief { border-color: var(--zzp-groen); background: rgba(30,111,82,0.08); font-weight: 600; }

/* Invoervelden */
.zzp-input-group { margin-bottom: 16px; }
.zzp-input-group label { display: block; font-size: 0.85rem; margin-bottom: 6px; font-weight: 600; }
.zzp-input-group .zzp-tooltip { font-weight: 400; color: #6B7A87; cursor: help; border-bottom: 1px dotted #6B7A87; }
.zzp-input-group input[type="number"],
.zzp-input-group input[type="text"] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--zzp-lijnmist); border-radius: 6px;
  font-family: var(--zzp-font-cijfers); font-size: 1.1rem; box-sizing: border-box; background: var(--zzp-kaartwit);
}

/* Checkbox-rijen: twee varianten in gebruik in de bestaande tools, beide ondersteund */
.zzp-checkbox-row,
.zzp-check-group {
  display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 4px; font-size: 0.85rem;
}
.zzp-check-group input { margin-top: 3px; }
.zzp-check-group .zzp-uitleg { color: #6B7A87; font-size: 0.8rem; display: block; margin-top: 2px; }

/* De rekenstrook: het signatuurelement */
.zzp-rekenstrook {
  background: var(--zzp-kaartwit);
  border: 1px solid var(--zzp-lijnmist);
  border-top: 3px solid var(--zzp-groen);
  border-radius: 4px;
  padding: 24px 22px;
  margin-top: 18px;
  box-shadow: 0 10px 24px -16px rgba(28,43,57,0.25), 0 1px 3px rgba(28,43,57,0.05);
  transition: box-shadow 0.4s ease;
}
.zzp-rekenstrook.zzp-flash { box-shadow: 0 0 0 3px rgba(30,111,82,0.25); }
.zzp-rekenstrook__titel { font-family: var(--zzp-font-koppen); font-size: 1rem; margin: 0 0 14px; }
.zzp-rekenstrook__regel {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-top: 1px dashed var(--zzp-lijnmist);
  font-family: var(--zzp-font-cijfers); font-variant-numeric: tabular-nums;
}
.zzp-rekenstrook__regel:first-of-type { border-top: none; }
.zzp-rekenstrook__regel span.label { font-family: var(--zzp-font-body); color: var(--zzp-inkt-licht); font-size: 0.9rem; }
.zzp-rekenstrook__regel span.bedrag { font-size: 1.05rem; }
.zzp-rekenstrook__scheiding { border-top: 2px dashed var(--zzp-lijnmist); margin: 14px 0; }
.zzp-rekenstrook__regel.zzp-hoofdresultaat span.bedrag {
  color: var(--zzp-groen); font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 600; letter-spacing: -0.01em;
}
.zzp-rekenstrook__regel.zzp-hoofdresultaat span.label { font-weight: 600; color: var(--zzp-inkt); }

/* Perforatierij tussen invoer en uitkomst */
.zzp-perforatie {
  height: 14px; margin: 16px 0;
  background-image: radial-gradient(circle, var(--zzp-papier) 3.5px, transparent 3.6px);
  background-size: 16px 14px; background-position: center; background-repeat: repeat-x;
  border-top: 1px solid var(--zzp-lijnmist); border-bottom: 1px solid var(--zzp-lijnmist);
}

/* Kopieerknop, met voldoende tikgebied voor mobiel */
.zzp-kopieer {
  border: none; background: none; cursor: pointer; color: #6B7A87; font-size: 0.75rem;
  text-decoration: underline; padding: 10px 6px; margin: -10px -6px -10px 4px;
  font-family: var(--zzp-font-body); min-height: 44px; display: inline-flex; align-items: center;
}

/* Vinkje-badge voor vertrouwenselementen, gebruik spaarzaam */
.zzp-stempel {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--zzp-lijnmist); border-radius: 4px; padding: 5px 12px;
  font-family: var(--zzp-font-body); font-size: 0.78rem; font-weight: 600;
  color: var(--zzp-groen); background: rgba(30,111,82,0.06); margin-bottom: 10px;
}
.zzp-stempel::before { content: "\2713"; font-weight: 700; }

/* Contextuele affiliate-CTA */
.zzp-cta {
  margin-top: 18px; padding: 14px 16px; background: rgba(30,111,82,0.06);
  border-left: 3px solid var(--zzp-groen); font-size: 0.9rem;
}
.zzp-cta a { color: var(--zzp-groen); font-weight: 600; text-decoration: none; }

/* Waarschuwings- en aannameblokken */
.zzp-waarschuwing {
  border-left: 3px solid var(--zzp-oker); background: rgba(193, 127, 46, 0.08);
  padding: 12px 16px; font-size: 0.85rem; margin-top: 16px;
}
.zzp-waarschuwing strong { color: var(--zzp-oker); }

/* "Hoe berekenen wij dit"-uitklapblok */
details.zzp-hoe {
  margin-top: 18px; border: 1px solid var(--zzp-lijnmist); background: var(--zzp-kaartwit); padding: 14px 16px;
}
details.zzp-hoe summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; }
details.zzp-hoe .zzp-bron-datum { font-size: 0.78rem; color: #6B7A87; margin-top: 10px; }
details.zzp-hoe ul { font-size: 0.85rem; padding-left: 18px; }

/* FAQ-blok */
.zzp-faq { margin-top: 28px; }
.zzp-faq h3 { font-family: var(--zzp-font-koppen); font-size: 1.2rem; }
.zzp-faq details { border-top: 1px solid var(--zzp-lijnmist); padding: 10px 0; }
.zzp-faq summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; }
.zzp-faq p { font-size: 0.88rem; color: #3A4854; margin: 8px 0 2px; }

/* ============================================================
   Optioneel, sitebreed: pas toe op algemene koppen buiten de tools
   Verwijder dit blok als je liever alleen Elementor's Globale
   lettertypes gebruikt voor koppen buiten de rekentools.
============================================================= */
/*
h1, h2, h3 {
  font-family: var(--zzp-font-koppen);
  letter-spacing: -0.015em;
}
*//* End custom CSS */