.elementor-kit-5{--e-global-color-primary:#1A1A1A;--e-global-color-secondary:#333333;--e-global-color-text:#1A1A1A;--e-global-color-accent:#BE1E2D;--e-global-typography-primary-font-family:"HB Instrument";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"HB Instrument";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"HB Plex";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"HB Instrument";--e-global-typography-accent-font-weight:600;background-color:#FFFFFF;font-family:"HB Plex", Sans-serif;font-weight:400;}.elementor-kit-5 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);}@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;}}:root { --hb-rood:#BE1E2D; --hb-rood-donker:#8F1622; --hb-groen:#009444; --hb-groen-tekst:#008213; --hb-inkt:#1A1A1A; --hb-grafiet:#333333; --hb-grijs:#5C5C5C; --hb-lijn:#CCCCCC; --hb-papier:#F6F6F6; --hb-groen-licht:#E6F4EC; --hb-rood-licht:#F9EBEC; --hb-wit:#FFFFFF; --font-heading:HB Instrument; --font-body:HB Plex; }
/* Start custom CSS *//* Houvast Bouw: zelf gehoste variabele fonts (latin) */
@font-face { font-family: 'HB Instrument'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url('/wp-content/uploads/fonts/instrument-var-latin.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; }
@font-face { font-family: 'HB Plex'; font-style: normal; font-weight: 100 700; font-stretch: 85% 100%; font-display: swap; src: url('/wp-content/uploads/fonts/plex-var-latin.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; }
@font-face { font-family: 'HB Instrument Fallback'; src: local('Arial Narrow'), local('Liberation Sans Narrow'), local('Arial'); size-adjust: 96%; ascent-override: 96%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: 'HB Plex Fallback'; src: local('Arial'), local('Liberation Sans'); size-adjust: 104%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }
:root { --font-heading: 'HB Instrument', 'HB Instrument Fallback', 'Arial Narrow', Arial, sans-serif; --font-body: 'HB Plex', 'HB Plex Fallback', Arial, sans-serif; }
body { background-color: #FFFFFF; color: #1A1A1A; font-family: 'HB Plex', 'HB Plex Fallback', Arial, sans-serif; }
h1.e-heading-base, h2.e-heading-base, h3.e-heading-base, h4.e-heading-base, .e-button-base, .elementor-nav-menu a { font-family: 'HB Instrument', 'HB Instrument Fallback', 'Arial Narrow', Arial, sans-serif !important; }
h1.e-heading-base, h2.e-heading-base, h3.e-heading-base, h4.e-heading-base { color: #1A1A1A; font-weight: 700; font-stretch: 84%; letter-spacing: -0.005em; text-wrap: balance; }
h1.e-heading-base { font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.4rem); line-height: 1.0; } h2.e-heading-base { font-size: clamp(1.85rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.08; } h3.e-heading-base { font-size: 1.3rem; line-height: 1.25; }
.e-button-base { font-stretch: 90%; }
p.e-paragraph-base, .e-paragraph-base, input, textarea, select { font-family: 'HB Plex', 'HB Plex Fallback', Arial, sans-serif; }
p.e-paragraph-base, .e-paragraph-base { color: #1A1A1A; font-size: 1.06rem; line-height: 1.7; max-width: 70ch; text-wrap: pretty; }
/* links: geen onderstreping; in lopende tekst groen (3,5:1 t.o.v. de tekst) en vet, rode lijn bij hover/focus */
.e-paragraph-base a { color: #008213; font-weight: 600; text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: color .2s ease, box-shadow .2s ease; } .e-paragraph-base a:hover, .e-paragraph-base a:focus-visible { color: #8F1622; box-shadow: inset 0 -2px 0 #BE1E2D; }
a.e-button-base, .hb-actie, .hb-tel, .elementor-nav-menu a, a.e-con { text-decoration: none !important; }
.e-paragraph-base:empty { display: none; }
/* maatlijn: schuine maatstreepjes + hulplijn aan beide uiteinden */
.hb-maat { position: relative; }
.hb-maat::before, .hb-maat::after { content: ''; position: absolute; bottom: -8px; width: 15px; height: 15px; background-image: linear-gradient(to top right, transparent calc(50% - 1px), #BE1E2D calc(50% - 1px), #BE1E2D calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to right, transparent 7px, #BE1E2D 7px, #BE1E2D 8px, transparent 8px); pointer-events: none; }
.hb-maat::before { left: -7px; } .hb-maat::after { right: -8px; }
.hb-maat-licht::before, .hb-maat-licht::after { background-image: linear-gradient(to top right, transparent calc(50% - 1px), #FFFFFF calc(50% - 1px), #FFFFFF calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to right, transparent 7px, #FFFFFF 7px, #FFFFFF 8px, transparent 8px); }
/* maatketting (werkwijze): horizontaal op desktop, verticaal op tablet en mobiel */
.hb-schakel { position: relative; border-top: 1px solid #BE1E2D; }
.hb-schakel::before { content: ''; position: absolute; top: -8px; left: -7px; width: 15px; height: 15px; background-image: linear-gradient(to top right, transparent calc(50% - 1px), #BE1E2D calc(50% - 1px), #BE1E2D calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to right, transparent 7px, #BE1E2D 7px, #BE1E2D 8px, transparent 8px); }
.hb-schakel:last-child::after { content: ''; position: absolute; top: -8px; right: -8px; width: 15px; height: 15px; background-image: linear-gradient(to top right, transparent calc(50% - 1px), #BE1E2D calc(50% - 1px), #BE1E2D calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to right, transparent 7px, #BE1E2D 7px, #BE1E2D 8px, transparent 8px); }
@media (max-width: 1024px) { .hb-schakel { border-top: 0; border-left: 1px solid #BE1E2D; } .hb-schakel::before { top: -7px; left: -8px; background-image: linear-gradient(to top right, transparent calc(50% - 1px), #BE1E2D calc(50% - 1px), #BE1E2D calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom, transparent 7px, #BE1E2D 7px, #BE1E2D 8px, transparent 8px); } .hb-schakel:last-child::after { top: auto; bottom: -7px; right: auto; left: -8px; background-image: linear-gradient(to top right, transparent calc(50% - 1px), #BE1E2D calc(50% - 1px), #BE1E2D calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom, transparent 7px, #BE1E2D 7px, #BE1E2D 8px, transparent 8px); } }
/* de wand (hero): stijlen en regels in grafiet, vakken als keuze */
.hb-vak { transition: background-color .25s cubic-bezier(.23,1,.32,1); } .hb-vak:hover { background-color: #E6F4EC !important; } .hb-vak:focus-visible { outline-offset: -6px !important; }
.hb-vak .hb-vak-meer, .hb-vak p:last-child { transition: color .2s ease; }
@media (max-width: 1024px) { .hb-maatrij { display: none !important; } }
@media (min-width: 1025px) { .hb-mob { display: none !important; } }
@media (max-width: 1279px) { .hb-tel { display: none !important; } }
/* header met regelwerk: rode streepjes om de 60px onder de lijn (stijlen h.o.h. 600 mm op schaal 1:10) */
.hb-regelwerk { position: relative; } .hb-regelwerk::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 6px; background-image: repeating-linear-gradient(90deg, #BE1E2D 0 1px, transparent 1px 60px); background-position: 40px 0; pointer-events: none; }
.hb-actie { white-space: nowrap; } .hb-actie::before { content: ''; display: inline-block; width: 13px; height: 8px; margin-right: 10px; background-color: #BE1E2D; transform: skewX(-35deg); transition: transform .25s cubic-bezier(.23,1,.32,1); }
@media (hover: hover) and (pointer: fine) { .hb-actie:hover::before { transform: skewX(-35deg) translateX(3px); } }
.hb-tel { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) { .hb-desk { display: none !important; } }
/* skip-link */
.hb-skip { position: absolute !important; left: -9999px !important; top: 8px; z-index: 2000; }
.hb-skip:focus, .hb-skip:focus-visible { left: 16px !important; }
/* sticky header */
.elementor-location-header { position: sticky; top: 0; z-index: 1000; }
/* menu */
.elementor-nav-menu--main .elementor-item { font-weight: 600 !important; font-size: 16px !important; font-stretch: 90%; color: #1A1A1A !important; padding: 12px 12px !important; white-space: nowrap; background: transparent !important; transition: color .2s ease; }
.elementor-nav-menu--main .elementor-item:hover, .elementor-nav-menu--main .elementor-item:focus { padding: 12px 12px !important; color: #BE1E2D !important; }
.elementor-nav-menu--main .elementor-item:before, .elementor-nav-menu--main .elementor-item:after { display: none !important; content: none !important; }
.elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-nav-menu--main li.current-menu-ancestor > .elementor-item { color: #BE1E2D !important; }
.elementor-nav-menu--main .sub-menu { background: #FFFFFF !important; border-top: 1px solid #333333; border-radius: 0; padding: 8px !important; min-width: 260px; box-shadow: 0 16px 28px rgba(26,26,26,0.12); }
.elementor-nav-menu--main .sub-menu a.elementor-sub-item { font-size: 15px !important; font-weight: 600 !important; color: #1A1A1A !important; padding: 10px 14px !important; background: transparent !important; border-radius: 0; border-left: 0 !important; }
.elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover, .elementor-nav-menu--main .sub-menu a.elementor-sub-item.elementor-item-active { background: #E6F4EC !important; color: #8F1622 !important; }
.elementor-nav-menu--main .elementor-nav-menu { flex-wrap: nowrap !important; } .elementor-nav-menu--main .elementor-nav-menu > li { flex: 0 0 auto; }
/* mobiel menu als paneel onder de header */
.elementor-widget-nav-menu { position: static !important; }
.elementor-menu-toggle { width: 48px; height: 48px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background-color: #BE1E2D !important; color: #FFFFFF !important; transition: background-color .2s cubic-bezier(.23,1,.32,1), transform .16s cubic-bezier(.23,1,.32,1); }
.elementor-menu-toggle:hover, .elementor-menu-toggle:focus, .elementor-menu-toggle.elementor-active { background-color: #8F1622 !important; color: #FFFFFF !important; }
.elementor-menu-toggle:active { transform: scale(.97); }
.elementor-menu-toggle svg { width: 22px !important; height: 22px !important; fill: currentColor !important; }
nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { position: fixed !important; left: 0 !important; right: 0 !important; top: var(--hb-header-h, 81px) !important; bottom: 0 !important; width: auto !important; height: auto !important; max-height: none !important; margin: 0 !important; z-index: 300; background-color: #FFFFFF !important; border-top: 1px solid #333333; padding: 12px 16px 40px !important; overflow-y: auto !important; }
nav.elementor-nav-menu--dropdown .elementor-nav-menu { width: 100% !important; }
.elementor-menu-toggle + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { transition: opacity .2s cubic-bezier(.23,1,.32,1), transform .25s cubic-bezier(.23,1,.32,1), visibility 0s linear .25s !important; }
.elementor-menu-toggle:not(.elementor-active) + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { transform: translateY(-8px) !important; opacity: 0; visibility: hidden; max-height: none !important; }
.elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { transform: none !important; opacity: 1; visibility: visible; transition: opacity .2s cubic-bezier(.23,1,.32,1), transform .25s cubic-bezier(.23,1,.32,1), visibility 0s !important; }
nav.elementor-nav-menu--dropdown .elementor-nav-menu li { border-bottom: 1px solid #CCCCCC !important; }
nav.elementor-nav-menu--dropdown .elementor-item { display: flex !important; align-items: center; }
nav.elementor-nav-menu--dropdown a.elementor-item { font-weight: 700 !important; font-size: 1.2rem !important; font-stretch: 88%; color: #1A1A1A !important; padding: 14px 8px !important; border: 0 !important; justify-content: flex-start; text-align: left; background-color: transparent !important; }
nav.elementor-nav-menu--dropdown a.elementor-sub-item { font-weight: 600 !important; font-size: 1.05rem !important; padding: 11px 8px 11px 24px !important; }
nav.elementor-nav-menu--dropdown a.elementor-item:hover, nav.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active, nav.elementor-nav-menu--dropdown a.elementor-item.highlighted { background-color: #E6F4EC !important; color: #8F1622 !important; }
nav.elementor-nav-menu--dropdown .sub-arrow { padding: 10px 14px !important; margin-left: auto; }
nav.elementor-nav-menu--dropdown a.elementor-item:before, nav.elementor-nav-menu--dropdown a.elementor-item:after { display: none !important; }
@media (max-width: 767px) { :root { --hb-header-h: 69px; } }
/* accordion */
.e-accordion-item-icon { transition: transform .25s cubic-bezier(.23,1,.32,1), background-color .2s ease; }
details[open] > summary .e-accordion-item-icon { transform: rotate(180deg); background-color: #E6F4EC !important; }
.e-accordion-item-icon svg { width: 14px !important; height: 14px !important; }
/* formulier: randen 3:1+ */
.hb-form input::placeholder, .hb-form textarea::placeholder { color: #5C5C5C; opacity: 1; }
.hb-form input, .hb-form textarea, .hb-form select { border: 2px solid #5C5C5C !important; }
.hb-form input:focus, .hb-form textarea:focus, .hb-form select:focus { border-color: #1A1A1A !important; }
/* titelblok (footer en project) */
.hb-titelblok a:hover p, .hb-footer-link:hover { color: #FFFFFF !important; }
/* focus */
a:focus-visible, button:focus-visible, .e-button-base:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .elementor-menu-toggle:focus-visible { outline: 3px solid #BE1E2D !important; outline-offset: 3px; }
.hb-cta a:focus-visible, footer a:focus-visible { outline-color: #FFFFFF !important; }
/* lange woorden op mobiel */
@media (max-width: 767px) { h1.e-heading-base { font-size: 2.35rem; } h2.e-heading-base { font-size: 1.75rem; } .hb-hero h1.e-heading-base { font-size: 2.6rem; } }
.e-button-base, .e-paragraph-base { max-width: 100%; min-width: 0; overflow-wrap: break-word; }
.e-svg-base svg { display: block; }
#site-header .e-button-base, .hb-cta .e-button-base { white-space: nowrap; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
/* reduced motion: alleen beweging uit, kleurovergangen blijven */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; } .e-button-base:active, .elementor-menu-toggle:active { transform: none !important; } .hb-actie:hover::before { transform: skewX(-35deg) !important; } details[open] > summary .e-accordion-item-icon { transform: none !important; } .elementor-menu-toggle + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { transform: none !important; } }/* End custom CSS */