.elementor-957 .elementor-element.elementor-element-34e1961{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.82;--padding-top:64px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}.elementor-957 .elementor-element.elementor-element-34e1961:not(.elementor-motion-effects-element-type-background), .elementor-957 .elementor-element.elementor-element-34e1961 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#03123F;background-image:url("https://leiderschap.triforceconsultancy.nl/wp-content/uploads/2026/06/call-to-action-bg.jpg");background-position:center center;background-size:cover;}.elementor-957 .elementor-element.elementor-element-34e1961::before, .elementor-957 .elementor-element.elementor-element-34e1961 > .elementor-background-video-container::before, .elementor-957 .elementor-element.elementor-element-34e1961 > .e-con-inner > .elementor-background-video-container::before, .elementor-957 .elementor-element.elementor-element-34e1961 > .elementor-background-slideshow::before, .elementor-957 .elementor-element.elementor-element-34e1961 > .e-con-inner > .elementor-background-slideshow::before, .elementor-957 .elementor-element.elementor-element-34e1961 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(90deg, var( --e-global-color-c341df9 ) 73%, #F2295B00 100%);}.pp-tooltip.pp-tooltip-{{ID}} .pp-tooltip-content{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-957 .elementor-element.elementor-element-1b2b2dad > .elementor-widget-container{margin:0px 0px 10px 0px;}.elementor-957 .elementor-element.elementor-element-1b2b2dad .elementor-heading-title{font-family:"Hanken Grotesk", Sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;line-height:1.2em;letter-spacing:1.4px;color:#8FD15C;}.elementor-957 .elementor-element.elementor-element-539e13bf > .elementor-widget-container{margin:0px 0px 14px 0px;}.elementor-957 .elementor-element.elementor-element-539e13bf .elementor-heading-title{font-family:"Hanken Grotesk", Sans-serif;font-size:44px;font-weight:700;line-height:1.15em;color:#FFFFFF;}.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 );}.elementor-957 .elementor-element.elementor-element-7420490d{width:var( --container-widget-width, 640px );max-width:640px;--container-widget-width:640px;--container-widget-flex-grow:0;font-family:"Hanken Grotesk", Sans-serif;font-size:18px;font-weight:400;line-height:1.55em;color:rgba(255,255,255,0.85);}.elementor-957 .elementor-element.elementor-element-7420490d > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-957 .elementor-element.elementor-element-75258ab0{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:22px 22px;--row-gap:22px;--column-gap:22px;--padding-top:80px;--padding-bottom:80px;--padding-left:24px;--padding-right:24px;}.elementor-957 .elementor-element.elementor-element-75258ab0:not(.elementor-motion-effects-element-type-background), .elementor-957 .elementor-element.elementor-element-75258ab0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-957 .elementor-element.elementor-element-7768ea0{width:100%;max-width:100%;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-957 .elementor-element.elementor-element-539e13bf .elementor-heading-title{font-size:36px;}}@media(min-width:768px){.elementor-957 .elementor-element.elementor-element-34e1961{--content-width:1140px;}.elementor-957 .elementor-element.elementor-element-75258ab0{--content-width:1140px;}}@media(max-width:767px){.elementor-957 .elementor-element.elementor-element-34e1961{--padding-top:40px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;}.elementor-957 .elementor-element.elementor-element-539e13bf .elementor-heading-title{font-size:28px;}.elementor-957 .elementor-element.elementor-element-75258ab0{--padding-top:52px;--padding-bottom:52px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for formidable, class: .elementor-element-7768ea0 */.tf-zelftest{
  --navy:#03123f; --navy-2:#061b52;
  --green:#49a216; --green-dark:#3a8110;
  --cream:#f6f5f1; --gray:#5b6070; --line:#d8d5cb; --white:#fff;
  --font:"Hanken Grotesk",system-ui,-apple-system,sans-serif;

  max-width:680px; margin-left:auto; margin-right:auto;
  color:var(--navy); font-family:var(--font);
}
.tf-zelftest fieldset{border:0;margin:0;padding:0;min-width:0}
.tf-zelftest legend{display:none}

/* Modern Formidable legt de velden op een 12-koloms grid; standaardafstand. */
.tf-zelftest .frm_form_fields > fieldset,
.tf-zelftest .frm_fields_container{gap:16px}
.tf-zelftest .frm_form_field{margin-bottom:16px;min-width:0}   /* min-width:0 → gelijke 1fr-kolommen */

/* ---------- Intro (eyebrow + kop + lead), gelijk aan de page-hero-copy ---------- */
.tf-zelftest .tf-intro{margin-bottom:8px}
.tf-zelftest .tf-eyebrow{
  display:block;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);margin-bottom:12px;
}
.tf-zelftest .tf-h2{font-size:32px;font-weight:700;line-height:1.15;color:var(--navy);margin:0 0 14px}
.tf-zelftest .tf-lead{font-size:18px;line-height:1.6;color:var(--gray);margin:0}

/* ==========================================================================
   Stap 1 — perspectief-kiezer (radio → twee grote kaartknoppen)
   ========================================================================== */
.tf-zelftest .tf-picker{background:var(--cream);padding:40px}
.tf-zelftest .tf-picker > .frm_primary_label{
  display:block!important;text-align:center;color:var(--navy)!important;
  font-size:18px!important;font-weight:700!important;margin:0 0 20px!important;padding:0!important;
}
.tf-zelftest .tf-picker .frm_opt_container{display:flex;gap:14px;flex-wrap:wrap;border:0;padding:0}
.tf-zelftest .tf-picker .frm_radio{flex:1;min-width:200px;margin:0}
.tf-zelftest .tf-picker .frm_radio label{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:64px;margin:0;padding:18px 20px;cursor:pointer;
  background:var(--white);border:2px solid var(--line);
  color:var(--navy);font-weight:700;font-size:15px;line-height:1.3;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.tf-zelftest .tf-picker .frm_radio label:hover{border-color:var(--green);transform:translateY(-2px)}
.tf-zelftest .tf-picker .frm_radio label:has(input:checked){border-color:var(--green);background:#eef7e8}
/* de echte radio-knop verbergen — de kaart zelf is de knop */
.tf-zelftest .tf-picker input[type="radio"]{position:absolute;opacity:0;width:0;height:0;margin:0}

/* ==========================================================================
   Stap 2-11 — stelling met 1..5-schaal (quiz-card)
   ========================================================================== */
.tf-zelftest .frm_form_field.tf-scale{
  display:flex;flex-direction:column;
  background:var(--cream);padding:40px;margin-bottom:16px;
}
/* volgorde binnen de kaart: vraag → schaal-uitersten → knoppen */
.tf-zelftest .tf-scale > .frm_primary_label{order:1}
.tf-zelftest .tf-scale > .frm_description{order:2}
.tf-zelftest .tf-scale .frm_opt_container{order:3}

.tf-zelftest .tf-scale > .frm_primary_label{
  color:var(--navy)!important;font-size:21px!important;font-weight:700!important;
  line-height:1.35!important;margin:0 0 22px!important;padding:0!important;
}
.tf-zelftest .tf-scale .frm_required{color:var(--green)!important}

/* schaal-uitersten (Helemaal niet herkenbaar · Neutraal · Heel herkenbaar) */
.tf-zelftest .tf-scale .frm_description{margin:0 0 12px}
.tf-zelftest .tf-scale-ends{display:flex;justify-content:space-between;gap:8px}
.tf-zelftest .tf-scale-ends span{flex:1;font-size:12.5px;font-weight:700;color:var(--navy)}
.tf-zelftest .tf-scale-ends span:nth-child(2){text-align:center}
.tf-zelftest .tf-scale-ends span:last-child{text-align:right}

/* de 1..5-knoppen */
.tf-zelftest .tf-scale .frm_opt_container{display:flex;gap:10px;border:0;padding:0}
.tf-zelftest .tf-scale .frm_radio{flex:1;margin:0}
.tf-zelftest .tf-scale .frm_radio label{
  display:flex;align-items:center;justify-content:center;
  height:56px;margin:0;cursor:pointer;
  border:2px solid var(--line);border-radius:4px;background:var(--white);
  color:var(--navy);font-weight:700;font-size:17px;
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;
}
.tf-zelftest .tf-scale .frm_radio label:hover{border-color:var(--green);transform:translateY(-2px)}
.tf-zelftest .tf-scale .frm_radio label:has(input:checked){background:var(--green);border-color:var(--green);color:var(--white)}
.tf-zelftest .tf-scale input[type="radio"]{position:absolute;opacity:0;width:0;height:0;margin:0}

/* ==========================================================================
   Voortgangsbalk (Formidable rootline) — groen, dun, gelijk aan .quiz-progress
   ========================================================================== */
.tf-zelftest .frm_rootline_group,.tf-zelftest .frm_rootline{margin-bottom:22px}
.tf-zelftest .frm_rootline{display:flex;list-style:none;gap:6px;padding:0;background:none;border:0}
.tf-zelftest .frm_rootline .frm_rootline_single,
.tf-zelftest .frm_rootline li{flex:1;height:6px;background:var(--cream);border:0;padding:0;margin:0}
.tf-zelftest .frm_rootline .frm_current_page,
.tf-zelftest .frm_rootline .frm_completed_page{background:var(--green)}
.tf-zelftest .frm_rootline .frm_rootline_title,
.tf-zelftest .frm_rootline .frm_page_num{display:none}
/* progress-bar-variant */
.tf-zelftest .frm_pages_complete,.tf-zelftest .frm_progress_line{background:var(--green)!important}
.tf-zelftest .frm_progress_bar,.tf-zelftest .frm_page_bar{background:var(--cream)!important;height:6px!important}

/* ==========================================================================
   Stap 12 — uitslag + contactformulier
   ========================================================================== */
/* verborgen rekenveld dat de score bepaalt (mag niet zichtbaar zijn) */
.tf-zelftest .tf-score{display:none!important}

/* resultaatblok (groen), gelijk aan .selftest-result */
.tf-zelftest .tf-result-box{
  background:var(--green);color:var(--navy);padding:26px 28px;margin:0 0 40px;
}
.tf-zelftest .tf-result-box p{margin:0;font-size:16px;font-weight:500;color:var(--navy)}

.tf-zelftest .tf-result-head{margin-bottom:8px}
.tf-zelftest .tf-result-head .tf-h2{margin:0 0 10px}
.tf-zelftest .tf-result-head p{margin:0;font-size:16px;color:var(--gray)}

/* labels boven de contactvelden */
.tf-zelftest .frm_primary_label{
  display:block!important;color:var(--navy)!important;font-size:13px!important;
  font-weight:700!important;padding:0 0 6px!important;margin:0!important;line-height:1.2!important;
}
.tf-zelftest .frm_required{color:var(--green)!important}

/* invoervelden */
.tf-zelftest input[type="text"],
.tf-zelftest input[type="email"],
.tf-zelftest input[type="tel"],
.tf-zelftest textarea{
  width:100%!important;border:2px solid var(--line)!important;background:var(--white)!important;
  color:var(--navy)!important;border-radius:4px!important;min-height:50px!important;
  padding:0 14px!important;font-family:var(--font)!important;font-size:15px!important;
  line-height:1.4!important;box-shadow:none!important;
}
.tf-zelftest textarea{min-height:120px!important;padding-top:12px!important;padding-bottom:12px!important;resize:vertical}
.tf-zelftest input::placeholder,.tf-zelftest textarea::placeholder{color:#9a9aa5;opacity:1}
.tf-zelftest input:focus,.tf-zelftest textarea:focus{
  border-color:var(--green)!important;outline:0;box-shadow:0 0 0 3px rgba(73,162,22,.18)!important;
}

/* twee-koloms rij: Naam/Bedrijf en E-mail/Telefoon (frm_half) */
.tf-zelftest .frm_half{grid-column:span 6!important}

/* ==========================================================================
   Knoppen — Start / Volgende / Vorige / Verstuur
   ========================================================================== */
.tf-zelftest .frm_submit{margin-top:8px;clear:both;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.tf-zelftest .frm_submit button,
.tf-zelftest .frm_submit input[type="submit"],
.tf-zelftest .frm_button_submit,
.tf-zelftest .frm_next_page{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  background:var(--green)!important;color:var(--white)!important;
  font:700 15px/1 var(--font)!important;padding:14px 26px!important;min-height:50px!important;
  border:0!important;border-radius:4px!important;cursor:pointer;text-shadow:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.tf-zelftest .frm_submit button:hover,
.tf-zelftest .frm_next_page:hover{background:var(--green-dark)!important;transform:translateY(-2px);box-shadow:0 10px 20px rgba(73,162,22,.25)}
/* "Vorige vraag" — lichter/secundair; hogere specificiteit dan de groep hierboven */
.tf-zelftest .frm_submit .frm_prev_page,
.tf-zelftest .frm_submit button.frm_prev_page{
  background:transparent!important;color:var(--gray)!important;
  border:2px solid var(--line)!important;padding:12px 22px!important;
}
.tf-zelftest .frm_submit .frm_prev_page:hover,
.tf-zelftest .frm_submit button.frm_prev_page:hover{background:var(--cream)!important;color:var(--navy)!important;transform:none;box-shadow:none}

/* ---------- Validatie / fouten ---------- */
.tf-zelftest .frm_error_style,.tf-zelftest .frm_error{font-size:12.5px;color:#c0392b}
.tf-zelftest .frm_blank_field input,
.tf-zelftest .frm_blank_field textarea,
.tf-zelftest .frm_blank_field .frm_radio label{border-color:#c0392b!important}
.tf-zelftest .frm_message,.tf-zelftest .frm_message p{color:var(--navy)}

/* ========================= MOBIEL (max 767) ========================= */
@media (max-width:767px){
  .tf-zelftest{max-width:none}
  .tf-zelftest .tf-picker,
  .tf-zelftest .frm_form_field.tf-scale{padding:28px 22px}
  .tf-zelftest .tf-h2{font-size:26px}
  .tf-zelftest .tf-picker .frm_opt_container{flex-direction:column}
  .tf-zelftest .tf-scale .frm_radio label{height:52px;font-size:16px}
  .tf-zelftest .tf-scale-ends span{font-size:11px}
  .tf-zelftest .frm_half{grid-column:1/-1!important}
  .tf-zelftest .frm_submit button,
  .tf-zelftest .frm_submit input[type="submit"],
  .tf-zelftest .frm_next_page{flex:1}
}/* End custom CSS */