.elementor-1232 .elementor-element.elementor-element-bka0003{padding:0px 0px 0px 0px;}.elementor-1232 .elementor-element.elementor-element-bka0006 > .elementor-container{max-width:1360px;}.elementor-1232 .elementor-element.elementor-element-bka000d > .elementor-container{max-width:1360px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}:root{--page-title-display:none;}/* Start custom CSS *//* ============================================================
   Belastingkenmerk.nl herontwerp
   Plakken in: Elementor > Site Settings (tandwiel) > Custom CSS
   (of in de Customizer onder "Aanvullende CSS")
   ============================================================ */

:root {
  color-scheme: light;
  --paper: #FDFDFF;
  --card: #FFFFFF;
  --ink: #022B3A;
  --ink-soft: #3E5A66;
  --teal: #1F7A8C;
  --teal-deep: #175E6D;
  --sky: #BFDBF7;
  --mist: #E1E5F2;
  --error: #B42318;
  --error-bg: #FBEAE8;
  --shadow: 0 1px 2px rgba(2, 43, 58, .06), 0 8px 24px rgba(2, 43, 58, .07);
  --radius: 14px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

/* ── Logo: elke letter in een bolletje ─────────────────────── */
.logo-dots { display: flex; align-items: center; gap: 2px; }
.logo-dots .c {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, #41B7E4 0%, #1B8FC2 55%, #1F7A8C 100%);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -2px 3px rgba(2, 43, 58, .18), inset 0 2px 3px rgba(255, 255, 255, .35);
}
.logo-dots .dot { width: 10px; height: 10px; align-self: flex-end; margin: 0 1px 2px; }
@media (max-width: 720px) {
  .logo-dots .c { width: 19px; height: 19px; font-size: 9.5px; }
  .logo-dots .dot { width: 7px; height: 7px; }
}
.bk-tagline { color: var(--ink-soft); font-size: .95rem; font-style: italic; text-align: right; }

/* ── Toolkaart (middenkolom) ───────────────────────────────── */
.tool {
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.75rem 1.5rem;
}
@media (min-width: 1081px) {
  .tool { min-height: 81vh; display: flex; flex-direction: column; }
  .tool .result { flex: 1 1 auto; display: flex; flex-direction: column; }
  .tool .result-grid { flex: 1 1 auto; align-content: stretch; }
  .tool .cell > span { flex: 1; display: flex; align-items: center; justify-content: center; }
  .tool .cell.wide .wide-body { flex: 1; }
}

.field-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.field-wrap { flex: 1 1 260px; position: relative; }
#form-field-inputfield {
  width: 100%;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.12rem;
  letter-spacing: .06em;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--mist);
  border-radius: 10px;
  padding: .8rem 3.6rem .8rem .95rem;
}
#form-field-inputfield::placeholder { font-family: inherit; letter-spacing: 0; color: var(--ink-soft); opacity: .65; }
#form-field-inputfield:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(31, 122, 140, .22); }
.digit-count {
  position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
  font-size: .74rem; font-variant-numeric: tabular-nums;
  color: var(--ink-soft); pointer-events: none;
}
#process-button {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 1rem;
  color: #FDFDFF;
  background: var(--teal);
  border: 0;
  border-radius: 10px;
  padding: .8rem 1.6rem;
  cursor: pointer;
}
#process-button:hover { background: var(--teal-deep); }
#process-button[disabled] { opacity: .6; cursor: wait; }

#fout_id { margin-top: 1rem; }
#fout_id:not(:empty) {
  background: var(--error-bg);
  color: var(--error);
  border-radius: 10px;
  padding: .7rem .95rem;
  font-size: .9rem;
  font-weight: 500;
}

.result { margin-top: 1.4rem; border-top: 1px solid var(--mist); padding-top: 1.25rem; }
/* Donkerblauwe kopbalk boven het aanslagnummer, zoals op de oude site */
.result-label {
  margin: 0;
  background: var(--ink);
  color: #FDFDFF;
  text-align: center;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .5rem 1rem;
  border-radius: 10px 10px 0 0;
}
.result-main {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: #EFF6FD;
  border: 1px solid #CFE2F5;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  padding: .8rem 1rem;
}
#output-field {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .04em;
  word-break: break-all;
  flex: 1 1 auto;
  min-width: 0;
}
.copy-btn {
  font-size: .78rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--teal); background: transparent;
  border: 1px solid rgba(31, 122, 140, .45);
  border-radius: 8px; padding: .32rem .65rem; cursor: pointer;
  flex: 0 0 auto;
}
.copy-btn:hover { background: rgba(31, 122, 140, .12); }
.copy-btn svg { width: 13px; height: 13px; }

.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; }
/* Veldkoppen op lichtblauwe balken, zoals op de oude site */
.cell {
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cell b {
  display: block;
  background: var(--sky);
  color: var(--ink);
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .4rem .6rem;
  border-bottom: 1px solid rgba(2, 43, 58, .08);
}
.cell span {
  display: block;
  padding: .55rem .9rem;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: center;
}
.cell.wide { grid-column: 1 / -1; }
.wide-body { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .45rem .9rem; }
.wide-body span { padding: 0; flex: 1 1 auto; min-width: 0; text-align: center; }

@media (max-width: 560px) {
  .tool { padding: 1.25rem 1.1rem 1.1rem; }
  .result-grid { grid-template-columns: 1fr; }
  #process-button { flex: 1 1 100%; }
}

/* ── Advertentierails: nette kaders om de bestaande ads ────── */
#blok-links .elementor-widget-container > div:first-child,
.rail-slot {
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}


/* ============================================================
   Extra layout-CSS voor de Elementor-secties van deze pagina
   ============================================================ */
.bk-topbar { background: var(--ink); }
.bk-topbar .bk-topbar-inner { color: #FDFDFF; text-align: center; font-size: .78rem; padding: .3rem 1rem; letter-spacing: .01em; }
.bk-topbar a { color: var(--sky); text-decoration: none; font-weight: 600; }
.bk-topbar a:hover { text-decoration: underline; }

.bk-header { padding: .5rem 1.25rem .25rem; }
.bk-header > .elementor-container { align-items: center; }
.bk-brandrow { display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap; text-align: center; }
.bk-tagline-inline { color: var(--ink); font-size: .85rem; font-style: italic; }

.bk-stage > .elementor-container { align-items: flex-start; }
/* Geen extra kolom-padding boven de tool en de ads (strakker onder de header) */
.bk-stage > .elementor-container > .elementor-column > .elementor-element-populated { padding-top: 0; }
.rail-slot {
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 2;
  /* Zelfde hoogtebudget als de Flynth-vacaturewidget rechts,
     zodat beide advertenties even hoog zijn */
  max-height: 81vh;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.rail-slot video { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
/* Advertenties scrollen NIET mee (geen sticky) */
.bk-col-left, .bk-col-right { position: static; }

/* Naast elkaar: linker ad exact even hoog als de Flynth-kaart (81vh);
   de toolkaart gebruikt hetzelfde budget als minimum. Het kader krimpt
   strak om de video heen (geen witte balken) en staat gecentreerd. */
@media (min-width: 768px) {
  .bk-stage .rail-slot {
    height: 81vh; aspect-ratio: auto; max-height: none;
    width: fit-content; max-width: 100%; margin: 0 auto;
  }
  .bk-stage .rail-slot a { width: auto !important; }
  .bk-stage .rail-slot video { width: auto; height: 100%; object-fit: contain; }
}

/* Mobiel: tool eerst, advertenties eronder */
@media (max-width: 767px) {
  .bk-stage > .elementor-container { flex-direction: column; }
  .bk-col-tool { order: 1; }
  .bk-col-left { order: 2; }
  .bk-col-right { order: 3; }
  .rail-slot { aspect-ratio: auto; max-height: none; }
  .rail-slot video { max-height: 60vh; }
}

/* Contenttekst onder de tool */
.bk-content { max-width: 680px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.bk-content h1, .bk-content h2 { font-size: 1.35rem; letter-spacing: -.01em; margin: 2.2rem 0 .6rem; color: var(--ink); }
.bk-content h1 { margin-top: .5rem; }
.bk-content h3 { font-size: 1.05rem; margin: 1.6rem 0 .4rem; color: var(--ink); }
.bk-content p, .bk-content li { color: var(--ink-soft); line-height: 1.6; }
.bk-content strong { color: var(--ink); }
.bk-content a { color: var(--teal); }
.bk-content a:hover { color: var(--teal-deep); }
.bk-content .steps { padding-left: 1.3rem; }
.bk-content .steps li { margin-bottom: .5rem; }
.bk-content .steps li::marker { color: var(--teal); font-weight: 700; }

/* Footer */
.bk-footer { background: var(--ink); margin-top: 2rem; }
.bk-footer .foot-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 1rem; align-items: center;
  padding: 2rem 1.25rem; color: rgba(253, 253, 255, .75);
}
.bk-footer nav { display: flex; gap: .4rem 1.4rem; flex-wrap: wrap; justify-content: center; }
.bk-footer a { color: #BFDBF7; text-decoration: none; font-size: .88rem; font-weight: 500; }
.bk-footer a:hover { text-decoration: underline; }
.bk-footer .copy { font-size: .78rem; opacity: .7; }/* End custom CSS */