.elementor-kit-6{--e-global-color-primary:#0F2A3F;--e-global-color-secondary:#45596B;--e-global-color-text:#0F2A3F;--e-global-color-accent:#067AD1;--e-global-color-gips:#E7ECF0;--e-global-color-wit:#FBFCFD;--e-global-color-hout:#D2A56B;--e-global-color-mist:#C6D2DC;--e-global-color-lijn:#0F2A3F38;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-size:1.0625rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.55;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-size:1.0625rem;--e-global-typography-accent-font-weight:700;--e-global-typography-tth1-font-family:"Archivo";--e-global-typography-tth1-font-size:clamp(2.5rem, 5.4vw, 4.5rem);--e-global-typography-tth1-font-weight:800;--e-global-typography-tth1-line-height:1.02em;--e-global-typography-tth1-letter-spacing:-0.02em;--e-global-typography-tth1s-font-family:"Archivo";--e-global-typography-tth1s-font-size:clamp(2.25rem, 4.4vw, 3.6rem);--e-global-typography-tth1s-font-weight:800;--e-global-typography-tth1s-line-height:1.02em;--e-global-typography-tth1s-letter-spacing:-0.02em;--e-global-typography-tth2-font-family:"Archivo";--e-global-typography-tth2-font-size:clamp(2rem, 3.6vw, 2.75rem);--e-global-typography-tth2-font-weight:800;--e-global-typography-tth2-line-height:1.02em;--e-global-typography-tth2-letter-spacing:-0.02em;--e-global-typography-tth3-font-family:"Archivo";--e-global-typography-tth3-font-size:1.3125rem;--e-global-typography-tth3-font-weight:700;--e-global-typography-tth3-line-height:1.2em;--e-global-typography-ttlood-font-family:"Archivo";--e-global-typography-ttlood-font-size:1.3125rem;--e-global-typography-ttlood-font-weight:400;--e-global-typography-ttlood-line-height:1.45;--e-global-typography-ttklein-font-family:"Archivo";--e-global-typography-ttklein-font-size:0.875rem;--e-global-typography-ttklein-font-weight:400;--e-global-typography-ttklein-line-height:1.55;background-color:#E7ECF0;color:#0F2A3F;font-family:"Archivo", system-ui, sans-serif;font-size:1.0625rem;font-weight:400;line-height:1.55;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:#067AD1;font-family:"Archivo", system-ui, sans-serif;font-size:1.0625rem;font-weight:700;line-height:1.2;color:#FBFCFD;box-shadow:4px 4px 0px 0px #0F2A3F;border-style:solid;border-width:2px 2px 2px 2px;border-color:#0F2A3F;border-radius:3px 3px 3px 3px;padding:.85em 1.4em .85em 1.4em;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:#067AD1;color:#FBFCFD;box-shadow:2px 2px 0px 0px #0F2A3F;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 p{margin-block-end:1rem;}.elementor-kit-6 a{color:#0F2A3F;}.elementor-kit-6 a:hover{color:#0F2A3F;}.elementor-kit-6 h1{color:#0F2A3F;font-family:"Archivo", system-ui, sans-serif;font-size:clamp(2.5rem, 5.4vw, 4.5rem);font-weight:800;line-height:1.02em;letter-spacing:-0.02em;}.elementor-kit-6 h2{color:#0F2A3F;font-family:"Archivo", system-ui, sans-serif;font-size:clamp(2rem, 3.6vw, 2.75rem);font-weight:800;line-height:1.02em;letter-spacing:-0.02em;}.elementor-kit-6 h3{color:#0F2A3F;font-family:"Archivo", system-ui, sans-serif;font-size:1.3125rem;font-weight:700;line-height:1.2em;}.elementor-kit-6 label{font-family:"Archivo", system-ui, sans-serif;font-size:0.95rem;font-weight:600;line-height:1.4;}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{font-family:"Archivo", system-ui, sans-serif;font-size:1.0625rem;font-weight:400;line-height:1.4;color:#0F2A3F;background-color:#FBFCFD;border-style:solid;border-width:2px 2px 2px 2px;border-color:#0F2A3F;border-radius:3px 3px 3px 3px;padding:.75em .85em .75em .85em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1180px;}.e-con{--container-max-width:1180px;}.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:900px){.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 *//* Talen Timmerwerken: aanvullingen op de Elementor-instellingen.
   Alleen wat Elementor niet als instelling heeft: de breedte-as van Archivo,
   het indrukken van knoppen, de duimstok op Werkwijze en een paar lijntjes. */

/* Archivo met breedte-as, zodat font-stretch werkt (latin-ext en latin) */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 300 900; font-stretch: 62% 125%; font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdfoLnnA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 300 900; font-stretch: 62% 125%; font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdnoLg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid #067AD1; outline-offset: 3px; border-radius: 2px; }

/* Letterbreedte */
.elementor-heading-title { text-wrap: balance; }
h1.elementor-heading-title, h2.elementor-heading-title, .tt-w125 .elementor-heading-title { font-stretch: 125%; }
h3.elementor-heading-title, .tt-w112 .elementor-heading-title { font-stretch: 112%; }
.tt-w108 .elementor-heading-title { font-stretch: 108%; }
.tt-w85 .elementor-heading-title { font-stretch: 85%; }
.elementor-button { font-stretch: 108%; }
.tt-pil .elementor-button { font-stretch: 100%; }
/* Actief menu-item vet; ook bij een subpagina van Klussen */
.elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-nav-menu--main .current-page-ancestor > .elementor-item { font-weight: 700 !important; }
.elementor-nav-menu--main .current-page-ancestor > .elementor-item::after { background-color: #067AD1 !important; opacity: 1 !important; }

/* Knoppen zakken in als je ze aanwijst */
.elementor-button { transition: transform .12s, box-shadow .12s, background-color .12s; }
.elementor-widget-button:not(.tt-pil) .elementor-button:hover,
.tt-formulier .elementor-button:hover { transform: translate(2px, 2px); }
.elementor-widget-button:not(.tt-pil) .elementor-button:active,
.tt-formulier .elementor-button:active { transform: translate(4px, 4px); box-shadow: none; }
.tt-pil .elementor-button.actief { background-color: #067AD1 !important; color: #FBFCFD !important; }
.tt-formulier .elementor-button { box-shadow: 4px 4px 0 #0F2A3F; }
.tt-formulier .elementor-button:hover { box-shadow: 2px 2px 0 #0F2A3F; }
.tt-donker .tt-formulier .elementor-button { box-shadow: 4px 4px 0 rgba(0, 0, 0, .35); }
.tt-donker .tt-formulier .elementor-button:hover { box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }

/* Links */
.elementor-widget-text-editor a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.tt-bel a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.tt-donker .tt-bel a { text-decoration-color: #067AD1; text-decoration-thickness: 2px; }
.tt-donker a:not(.elementor-button) { color: inherit; }
.tt-direct a { color: inherit; text-decoration: underline; text-decoration-color: #067AD1; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tt-streep .elementor-heading-title:not(:has(a)), .tt-streep a {
  color: inherit; text-decoration: underline; text-decoration-color: #067AD1;
  text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-skip-ink: none;
}
.tt-kaart .tt-streep .elementor-heading-title { text-underline-offset: 6px; }
.tt-streep a:hover { text-decoration-color: #0F2A3F; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-heading .elementor-heading-title { margin: 0; }
.tt-kleinwerk .elementor-widget-text-editor a { white-space: nowrap; }

/* Home: kaart met detailuitsnede, ring kleurt blauw bij aanwijzen */
a.tt-kaart { color: inherit; text-decoration: none; }
.tt-ring, .tt-ring > .elementor-widget-container { transition: background-color .15s, border-color .15s; }
.tt-kaart:is(:hover, :focus-visible) .tt-ring:not(:has(> .elementor-widget-container)),
.tt-kaart:is(:hover, :focus-visible) .tt-ring > .elementor-widget-container { background-color: #067AD1; border-color: #0F2A3F; }

/* Werkwijze: duimstok met vijf stappen */
.e-con.tt-stappen { position: relative; }
.e-con.tt-stappen::before {
  content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 34px;
  opacity: 1; mix-blend-mode: normal; box-sizing: border-box;
  border: 2px solid #0F2A3F; border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, #FBFCFD 0 1.5px, transparent 1.5px 50px) 0 0 / 100% 16px no-repeat,
    repeating-linear-gradient(90deg, #FBFCFD 0 1px, transparent 1px 10px) 0 0 / 100% 8px no-repeat,
    #067AD1;
}
.e-con.tt-stap { position: relative; }
.e-con.tt-stap::after {
  content: ""; position: absolute; top: -34px; left: 0; width: 2px; height: calc(34px + 1rem);
  background: #0F2A3F;
}
@media (max-width: 900px) {
  .e-con.tt-stappen::before {
    width: 34px; height: 100%;
    background:
      repeating-linear-gradient(180deg, #FBFCFD 0 1.5px, transparent 1.5px 50px) 0 0 / 16px 100% no-repeat,
      repeating-linear-gradient(180deg, #FBFCFD 0 1px, transparent 1px 10px) 0 0 / 8px 100% no-repeat,
      #067AD1;
  }
  .e-con.tt-stap::after { top: 0; left: -34px; width: calc(34px + 1rem); height: 2px; }
}

/* Formulieren */
.tt-formulier .elementor-field-group .elementor-field-textual { min-height: 3.4rem; padding: .75em .85em; }
.tt-formulier .elementor-field-group textarea.elementor-field-textual { min-height: 9rem; resize: vertical; }
.tt-formulier .elementor-field-textual:focus { outline: 3px solid #067AD1; outline-offset: 2px; box-shadow: none; }
.tt-formulier .elementor-field-textual::placeholder { color: #45596B; opacity: .8; }

/* Voet */
.tt-voet a:hover .elementor-icon-list-text { text-decoration: underline; text-underline-offset: 4px; }
body:has(.tt-donker-eind) .tt-voet-binnen { border-top: 1px solid rgba(251, 252, 251, .2); }

/* Animaties. De entree-animaties zelf zijn gewone Elementor-instellingen (Geavanceerd >
   Bewegingseffecten); hier alleen de details die de tekening op Home doortrekken. */

/* fadeInUp schuift standaard een heel blok omhoog; hier een korte, rustige versie */
.elementor-element.animated.fadeInUp { animation-name: tt-op; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
@keyframes tt-op { from { opacity: 0; transform: translate3d(0, 1.75rem, 0); } to { opacity: 1; transform: none; } }

/* Belofte: de blauwe lijn erboven tekent zich van links naar rechts (een strook in de achtergrondkleur trekt weg) */
.e-con.tt-groei::after {
  content: ""; position: absolute; top: -3px; left: 0; width: 100%; height: 3px;
  background: #0F2A3F; transform: scaleX(0); transform-origin: right; pointer-events: none;
}
.e-con.tt-groei.elementor-invisible::after { transform: scaleX(1); }
.e-con.tt-groei.animated::after { animation: tt-onthul 1s cubic-bezier(.6, 0, .2, 1) .1s backwards; }
@keyframes tt-onthul { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Werkwijze: de duimstok rolt uit, daarna zakken de stappen erin en groeit hun lijntje */
.e-con.tt-stappen.animated::before { animation: tt-uitrollen 1.2s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes tt-uitrollen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.e-con.tt-stap.animated::after { transform-origin: top; animation: tt-lijn .6s cubic-bezier(.6, 0, .2, 1) .15s backwards; }
@keyframes tt-lijn { from { transform: scaleY(0); } }
@media (max-width: 900px) {
  .e-con.tt-stappen.animated::before { animation-name: tt-uitrollen-v; }
  .e-con.tt-stap.animated::after { transform-origin: left; animation-name: tt-lijn-h; }
}
@keyframes tt-uitrollen-v { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes tt-lijn-h { from { transform: scaleX(0); } }

/* Home: bij aanwijzen komt de ring iets omhoog en draait de uitsnede een tikje, als een lens */
.tt-ring { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.tt-ring img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tt-kaart:is(:hover, :focus-visible) .tt-ring { transform: translateY(-6px); }
.tt-kaart:is(:hover, :focus-visible) .tt-ring img { transform: rotate(-8deg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .elementor-button, .tt-ring, .tt-ring img, .tt-ring > .elementor-widget-container { transition: none; }
  .tt-kaart:is(:hover, :focus-visible) .tt-ring, .tt-kaart:is(:hover, :focus-visible) .tt-ring img { transform: none; }
  .elementor-element.elementor-invisible { visibility: visible; }
  .elementor-element.animated { animation: none !important; }
  .e-con.tt-groei::after { display: none; }
  .e-con.tt-stappen.animated::before, .e-con.tt-stap.animated::after { animation: none; }
}/* End custom CSS */