.elementor-kit-5{--e-global-color-primary:#1E1E1F;--e-global-color-secondary:#404041;--e-global-color-text:#1E1E1F;--e-global-color-accent:#457713;--e-global-typography-primary-font-family:"OF Sofia";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"OF Sofia";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"OF Karla";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"OF Sofia";--e-global-typography-accent-font-weight:700;background-color:#FFFFFF;font-family:"OF Karla", 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 { --of-groen:#8DC63F; --of-groen-donker:#457713; --of-antraciet:#404041; --of-inkt:#1E1E1F; --of-grijs:#6C6C6C; --of-staal:#8C9294; --of-lijn:#E3E3E3; --of-papier:#F6F6F6; --of-groen-licht:#EEF6E2; --of-groen-2:#D4EAB5; --of-groen-3:#B4D97F; --of-wit:#FFFFFF; --font-heading:OF Sofia; --font-body:OF Karla; }
/* Start custom CSS *//* Schildersbedrijf Offerein: zelf gehoste variabele fonts (latin) */
@font-face { font-family: 'OF Sofia'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/wp-content/uploads/fonts/sofia-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: 'OF Karla'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/wp-content/uploads/fonts/karla-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: 'OF Sofia Fallback'; src: local('Arial Narrow'), local('Liberation Sans Narrow'), local('Arial'); size-adjust: 94%; ascent-override: 100%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: 'OF Karla Fallback'; src: local('Arial'), local('Liberation Sans'); size-adjust: 100%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0%; }
:root { --font-heading: 'OF Sofia', 'OF Sofia Fallback', 'Arial Narrow', Arial, sans-serif; --font-body: 'OF Karla', 'OF Karla Fallback', Arial, sans-serif; }
body { background-color: #FFFFFF; color: #1E1E1F; font-family: 'OF Karla', 'OF Karla 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: 'OF Sofia', 'OF Sofia Fallback', 'Arial Narrow', Arial, sans-serif !important; }
h1.e-heading-base, h2.e-heading-base, h3.e-heading-base, h4.e-heading-base { color: #1E1E1F; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
h1.e-heading-base { font-size: clamp(2.6rem, 1.6rem + 3vw, 4.5rem); line-height: 0.98; } h2.e-heading-base { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.7rem); line-height: 1.05; } h3.e-heading-base { font-size: 1.3rem; line-height: 1.2; font-weight: 700; }
p.e-paragraph-base, .e-paragraph-base, input, textarea, select { font-family: 'OF Karla', 'OF Karla Fallback', Arial, sans-serif; }
p.e-paragraph-base, .e-paragraph-base { color: #1E1E1F; font-size: 1.06rem; line-height: 1.7; max-width: 70ch; text-wrap: pretty; }
/* links: niet onderstreept; in lopende tekst donkergroen en vet (3,1:1 t.o.v. de tekst, 4,9:1 op lichtgroen), penseelstreep bij hover/focus */
.e-paragraph-base a { color: #457713; font-weight: 700; text-decoration: none; box-shadow: inset 0 -3px 0 transparent; transition: color .2s ease, box-shadow .2s ease; } .e-paragraph-base a:hover, .e-paragraph-base a:focus-visible { color: #1E1E1F; box-shadow: inset 0 -3px 0 #8DC63F; }
a.e-button-base, .elementor-nav-menu a, a.e-con, a.e-div-block-base { text-decoration: none !important; }
.e-paragraph-base:empty { display: none; }
/* penseelstreek onder koppen (decoratief, CSS-achtergrond) */
.of-streek { padding-bottom: 18px; background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240%2024%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%238DC63F%22%20d%3D%22M3%2013.5C28%207%2062%206.5%2098%207.8s80%202.2%20108%20.8c12-.6%2022-2%2031-3.4l-1.4%206.2c-9%202.6-21%203.8-34%204.3-30%201.2-72%20.3-104%201.6S22%2021%205%2021.5z%22/%3E%3Cpath%20fill%3D%22%238DC63F%22%20opacity%3D%22.55%22%20d%3D%22M150%2016.8c26-.2%2054-1.7%2080-4.8l-.6%202.4c-25%202.8-52%203.9-79%203.6z%22/%3E%3Cpath%20fill%3D%22%238DC63F%22%20opacity%3D%22.45%22%20d%3D%22M20%206.2c30-2.6%2070-3.2%20104-2.4l-.2%201.5C92%205%2052%205.8%2021%207.6z%22/%3E%3C/svg%3E'); background-repeat: no-repeat; background-size: 128px 13px; background-position: 0 100%; }
.of-cta .of-streek { background-image: none; }
.of-cijfer { display: inline-block; align-self: flex-start; padding: 0 10px 0 2px; background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240%2024%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%238DC63F%22%20d%3D%22M3%2013.5C28%207%2062%206.5%2098%207.8s80%202.2%20108%20.8c12-.6%2022-2%2031-3.4l-1.4%206.2c-9%202.6-21%203.8-34%204.3-30%201.2-72%20.3-104%201.6S22%2021%205%2021.5z%22/%3E%3Cpath%20fill%3D%22%238DC63F%22%20opacity%3D%22.55%22%20d%3D%22M150%2016.8c26-.2%2054-1.7%2080-4.8l-.6%202.4c-25%202.8-52%203.9-79%203.6z%22/%3E%3Cpath%20fill%3D%22%238DC63F%22%20opacity%3D%22.45%22%20d%3D%22M20%206.2c30-2.6%2070-3.2%20104-2.4l-.2%201.5C92%205%2052%205.8%2021%207.6z%22/%3E%3C/svg%3E'); background-repeat: no-repeat; background-size: 100% 34%; background-position: 0 92%; }
.of-actie { align-self: flex-start; padding-bottom: 8px !important; background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240%2024%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%238DC63F%22%20d%3D%22M3%2013.5C28%207%2062%206.5%2098%207.8s80%202.2%20108%20.8c12-.6%2022-2%2031-3.4l-1.4%206.2c-9%202.6-21%203.8-34%204.3-30%201.2-72%20.3-104%201.6S22%2021%205%2021.5z%22/%3E%3Cpath%20fill%3D%22%238DC63F%22%20opacity%3D%22.55%22%20d%3D%22M150%2016.8c26-.2%2054-1.7%2080-4.8l-.6%202.4c-25%202.8-52%203.9-79%203.6z%22/%3E%3Cpath%20fill%3D%22%238DC63F%22%20opacity%3D%22.45%22%20d%3D%22M20%206.2c30-2.6%2070-3.2%20104-2.4l-.2%201.5C92%205%2052%205.8%2021%207.6z%22/%3E%3C/svg%3E') !important; background-repeat: no-repeat !important; background-size: 100% 9px !important; background-position: 0 100% !important; white-space: nowrap; }
/* schilderstape op de hoeken van foto's */
.of-tape { position: relative; }
.of-tape::before, .of-tape::after { content: ''; position: absolute; top: -12px; width: 96px; height: 28px; background-color: rgba(227,227,227,.92); z-index: 2; pointer-events: none; clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 82% 0, 88% 9%, 94% 0, 100% 8%, 100% 92%, 94% 100%, 88% 91%, 82% 100%, 18% 100%, 12% 90%, 6% 100%, 0 92%); }
.of-tape::before { left: -18px; transform: rotate(-32deg); } .of-tape::after { right: -18px; transform: rotate(32deg); }
@media (max-width: 767px) { .of-tape::before, .of-tape::after { width: 72px; height: 22px; top: -9px; } .of-tape::before { left: -10px; } .of-tape::after { right: -10px; } }
/* zijbalk (desktop): vaste witte balk links, rechterrand = kleurenwaaier */
@media (min-width: 1025px) { body { padding-left: 264px; } .elementor-location-header { position: fixed !important; top: 0; left: 0; bottom: 0; width: 264px; z-index: 1000; overflow-y: auto; overscroll-behavior: contain; background: #FFFFFF; scrollbar-width: thin; } }
#site-header::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 8px; pointer-events: none; background-image: linear-gradient(to bottom, #EEF6E2 0.00% 16.67%, #D4EAB5 16.67% 33.33%, #B4D97F 33.33% 50.00%, #8DC63F 50.00% 66.67%, #8C9294 66.67% 83.33%, #404041 83.33% 100.00%); }
@media (max-width: 1024px) { .elementor-location-header { position: sticky; top: 0; z-index: 1000; } #site-header::after { top: auto; left: 0; height: 5px; width: auto; background-image: linear-gradient(to right, #EEF6E2 0.00% 16.67%, #D4EAB5 16.67% 33.33%, #B4D97F 33.33% 50.00%, #8DC63F 50.00% 66.67%, #8C9294 66.67% 83.33%, #404041 83.33% 100.00%); } .of-desk { display: none !important; } }
/* menu (desktop, verticaal) */
.of-nav .elementor-nav-menu--main .elementor-nav-menu { flex-direction: column !important; align-items: stretch; }
.of-nav .elementor-nav-menu--main .elementor-item { font-weight: 800 !important; font-size: 18px !important; line-height: 1.2 !important; color: #1E1E1F !important; padding: 9px 0 9px 0 !important; background: transparent !important; justify-content: flex-start; transition: color .2s ease; }
.of-nav .elementor-nav-menu--main .elementor-item:hover, .of-nav .elementor-nav-menu--main .elementor-item:focus { padding: 9px 0 9px 0 !important; color: #457713 !important; }
.of-nav .elementor-nav-menu--main li.of-sub > .elementor-item { font-family: 'OF Karla', 'OF Karla Fallback', Arial, sans-serif !important; font-weight: 500 !important; font-size: 15.5px !important; padding: 6px 0 6px 0 !important; display: flex; align-items: center; gap: 12px; }
.of-nav .elementor-nav-menu--main li.of-sub > .elementor-item:hover, .of-nav .elementor-nav-menu--main li.of-sub > .elementor-item:focus { padding: 6px 0 6px 0 !important; }
.of-nav li.of-sub > a::before { content: '' !important; display: inline-block !important; position: static !important; opacity: 1 !important; width: 12px !important; height: 12px !important; flex: 0 0 12px; border: 1px solid #8C9294; background: #EEF6E2; border-radius: 1px; transition: transform .2s cubic-bezier(.23,1,.32,1); }
.of-nav li.of-sub:nth-child(2) > a::before { background: #EEF6E2 !important; } .of-nav li.of-sub:nth-child(3) > a::before { background: #D4EAB5 !important; } .of-nav li.of-sub:nth-child(4) > a::before { background: #B4D97F !important; } .of-nav li.of-sub:nth-child(5) > a::before { background: #8DC63F !important; } .of-nav li.of-sub:nth-child(6) > a::before { background: #8C9294 !important; } .of-nav li.of-sub:nth-child(7) > a::before { background: #404041 !important; } 
@media (hover: hover) and (pointer: fine) { .of-nav li.of-sub > a:hover::before { transform: translateX(3px); } }
.of-nav .elementor-nav-menu--main li:not(.of-sub) + li.of-sub { margin-top: 2px; } .of-nav .elementor-nav-menu--main li.of-sub + li:not(.of-sub) { margin-top: 10px; }
.of-nav .elementor-nav-menu--main .elementor-item:not(li.of-sub > a)::before, .of-nav .elementor-nav-menu--main .elementor-item::after { display: none !important; content: none !important; }
.of-nav .elementor-nav-menu--main .elementor-item.elementor-item-active { color: #1E1E1F !important; background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240%2024%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%238DC63F%22%20d%3D%22M3%2013.5C28%207%2062%206.5%2098%207.8s80%202.2%20108%20.8c12-.6%2022-2%2031-3.4l-1.4%206.2c-9%202.6-21%203.8-34%204.3-30%201.2-72%20.3-104%201.6S22%2021%205%2021.5z%22/%3E%3Cpath%20fill%3D%22%238DC63F%22%20opacity%3D%22.55%22%20d%3D%22M150%2016.8c26-.2%2054-1.7%2080-4.8l-.6%202.4c-25%202.8-52%203.9-79%203.6z%22/%3E%3Cpath%20fill%3D%22%238DC63F%22%20opacity%3D%22.45%22%20d%3D%22M20%206.2c30-2.6%2070-3.2%20104-2.4l-.2%201.5C92%205%2052%205.8%2021%207.6z%22/%3E%3C/svg%3E') !important; background-repeat: no-repeat !important; background-size: 100% 8px !important; background-position: 0 92% !important; width: fit-content; }
.of-nav .elementor-nav-menu--main li.of-sub > .elementor-item.elementor-item-active { font-weight: 700 !important; background-size: calc(100% - 24px) 7px !important; background-position: 24px 94% !important; }
/* mobiel menu als paneel onder de balk */
.elementor-widget-nav-menu { position: static !important; }
.elementor-menu-toggle { width: 48px; height: 48px; padding: 0 !important; border: 0 !important; border-radius: 4px !important; background-color: #8DC63F !important; color: #1E1E1F !important; transition: background-color .2s cubic-bezier(.23,1,.32,1), 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: #404041 !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(--of-bar-h, 72px) !important; bottom: 0 !important; width: auto !important; height: auto !important; max-height: none !important; margin: 0 !important; z-index: 300; background-color: #FFFFFF !important; padding: 12px 16px 40px !important; overflow-y: auto !important; }
@media (max-width: 767px) { :root { --of-bar-h: 66px; } }
nav.elementor-nav-menu--dropdown .elementor-nav-menu { width: 100% !important; }
/* mobiel menu: de verfrol. Een groene streek trekt van links naar rechts over het scherm en legt het menu bloot (clip-path), de items volgen gestaffeld */
nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { overflow-x: hidden !important; }
@media (max-width: 1024px) { .elementor-menu-toggle:not(.elementor-active) + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { clip-path: inset(0 100% 0 0); visibility: hidden; transition: clip-path .2s cubic-bezier(.23,1,.32,1), visibility 0s linear .2s !important; } }
@media (max-width: 1024px) { .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .38s cubic-bezier(.77,0,.175,1), visibility 0s !important; } }
nav.elementor-nav-menu--dropdown.elementor-nav-menu__container::before { content: ''; position: absolute; top: 0; bottom: 0; left: -56px; width: 56px; z-index: 5; pointer-events: none; background-color: #8DC63F; clip-path: polygon(0 0, 70% 0, 100% 3%, 82% 9%, 100% 16%, 86% 24%, 100% 33%, 80% 41%, 100% 50%, 84% 58%, 100% 67%, 82% 76%, 100% 85%, 86% 93%, 100% 100%, 0 100%); transform: translateX(0); }
.elementor-menu-toggle:not(.elementor-active) + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container::before { transform: translateX(0); opacity: 1; transition: transform .2s cubic-bezier(.23,1,.32,1), opacity 0s; }
.elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container::before { transform: translateX(100vw); opacity: 0; transition: transform .38s cubic-bezier(.77,0,.175,1), opacity .1s ease .34s; }
nav.elementor-nav-menu--dropdown .elementor-nav-menu > li { opacity: 0; transform: translateX(-14px); transition: opacity .15s ease, transform .15s cubic-bezier(.23,1,.32,1); }
.elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown .elementor-nav-menu > li { opacity: 1; transform: none; transition: opacity .18s ease, transform .18s cubic-bezier(.23,1,.32,1); }
.elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(1) { transition-delay: 50ms; } .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(2) { transition-delay: 62ms; } .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(3) { transition-delay: 74ms; } .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(4) { transition-delay: 86ms; } .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(5) { transition-delay: 98ms; } .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(6) { transition-delay: 110ms; } .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(7) { transition-delay: 122ms; } .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(8) { transition-delay: 134ms; } .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(9) { transition-delay: 146ms; } .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(10) { transition-delay: 158ms; } .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(11) { transition-delay: 170ms; } .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(12) { transition-delay: 182ms; } .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(13) { transition-delay: 194ms; } 
nav.elementor-nav-menu--dropdown .elementor-nav-menu > li { border-bottom: 1px solid #E3E3E3 !important; } nav.elementor-nav-menu--dropdown .elementor-nav-menu > li.of-sub { border-bottom: 0 !important; }
nav.elementor-nav-menu--dropdown a.elementor-item { display: flex !important; align-items: center; gap: 12px; font-weight: 800 !important; font-size: 1.25rem !important; color: #1E1E1F !important; padding: 14px 8px !important; border: 0 !important; justify-content: flex-start; text-align: left; background-color: transparent !important; }
nav.elementor-nav-menu--dropdown li.of-sub > a.elementor-item { font-family: 'OF Karla', 'OF Karla Fallback', Arial, sans-serif !important; font-weight: 500 !important; font-size: 1.05rem !important; padding: 9px 8px 9px 12px !important; }
nav.elementor-nav-menu--dropdown li.of-sub > a::before { content: ''; display: inline-block; width: 14px; height: 14px; flex: 0 0 14px; border: 1px solid #8C9294; }
nav.elementor-nav-menu--dropdown li.of-sub:nth-child(2) > a::before { background: #EEF6E2; } nav.elementor-nav-menu--dropdown li.of-sub:nth-child(3) > a::before { background: #D4EAB5; } nav.elementor-nav-menu--dropdown li.of-sub:nth-child(4) > a::before { background: #B4D97F; } nav.elementor-nav-menu--dropdown li.of-sub:nth-child(5) > a::before { background: #8DC63F; } nav.elementor-nav-menu--dropdown li.of-sub:nth-child(6) > a::before { background: #8C9294; } nav.elementor-nav-menu--dropdown li.of-sub:nth-child(7) > a::before { background: #404041; } 
nav.elementor-nav-menu--dropdown a.elementor-item:hover, nav.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active { background-color: #EEF6E2 !important; color: #1E1E1F !important; }
nav.elementor-nav-menu--dropdown a.elementor-item:not(li.of-sub > a)::before, nav.elementor-nav-menu--dropdown a.elementor-item::after { display: none !important; }
/* kleurstalen (diensten) */
.of-staal > div:last-child { transition: background-color .2s cubic-bezier(.23,1,.32,1); } .of-staal:hover > div:last-child, .of-staal:focus-visible > div:last-child { background-color: #EEF6E2 !important; }
.of-staal-kleur { transition: transform .22s cubic-bezier(.23,1,.32,1); transform-origin: bottom; } @media (hover: hover) and (pointer: fine) { .of-staal:hover .of-staal-kleur { transform: translateY(-4px); } }
.of-waaier .of-staal + .of-staal { border-left-width: 0 !important; } @media (max-width: 1024px) { .of-waaier .of-staal { border-left-width: 1px !important; margin-left: -1px; margin-top: -1px; } }
.of-staal-naam { white-space: nowrap; }
.of-fstaal p { transition: color .2s ease; } .of-fstaal:hover p { color: #FFFFFF !important; } .of-fstaal > div { transition: transform .22s cubic-bezier(.23,1,.32,1); } @media (hover: hover) and (pointer: fine) { .of-fstaal:hover > div { transform: translateY(-3px); } }
.of-plaats:hover, .of-plaats:focus-visible { background-color: #EEF6E2 !important; }
.of-tegel p:first-of-type { transition: color .2s ease; } .of-tegel:hover p:first-of-type { color: #457713 !important; } .of-tegel img { transition: opacity .2s ease; } .of-tegel:hover img { opacity: .92; }
.of-plaats { align-items: baseline !important; } .of-stap > .e-con:nth-child(2), .of-stap > div:nth-child(2) { align-items: baseline !important; }
.of-bel { align-self: center !important; }
@media (max-width: 767px) { .of-waaier > .of-staal:last-child:nth-child(odd) { grid-column: span 2; } }
@media (min-width: 768px) and (max-width: 1024px) { .of-waaier > .of-staal:last-child:nth-child(3n+2) { grid-column: span 2; } }
/* actie in het mobiele menu (op desktop staat die onderaan de zijbalk) */
@media (min-width: 1025px) { .of-nav li.of-mob-cta { display: none !important; } }
nav.elementor-nav-menu--dropdown li.of-mob-cta { border-bottom: 0 !important; margin-top: 20px; } nav.elementor-nav-menu--dropdown li.of-mob-cta > a.elementor-item { background-color: #8DC63F !important; color: #1E1E1F !important; border-radius: 4px; justify-content: center; min-height: 52px; font-size: 1.1rem !important; } nav.elementor-nav-menu--dropdown li.of-mob-cta > a.elementor-item:hover { background-color: #404041 !important; color: #FFFFFF !important; }
@media (max-width: 767px) { .of-footer-link { min-height: 44px !important; } }
/* afwerking (emil): vaste overgangen per eigenschap, geen transition: all; drukfeedback op knoppen */
.e-button-base { transition: background-color .2s cubic-bezier(.23,1,.32,1), color .2s cubic-bezier(.23,1,.32,1), border-color .2s cubic-bezier(.23,1,.32,1), box-shadow .2s cubic-bezier(.23,1,.32,1), transform .16s cubic-bezier(.23,1,.32,1) !important; } .e-button-base:active { transform: scale(.97); }
a.e-con, a.e-div-block-base { transition: background-color .2s cubic-bezier(.23,1,.32,1), transform .16s cubic-bezier(.23,1,.32,1) !important; }
.of-bel { box-shadow: inset 0 -3px 0 transparent; transition: box-shadow .2s ease, color .2s ease !important; white-space: nowrap; } .of-bel:hover, .of-bel:focus-visible { box-shadow: inset 0 -3px 0 #8DC63F; } .of-cta .of-bel:hover { box-shadow: inset 0 -3px 0 #404041; }
/* skip-link */
.of-skip { position: absolute !important; left: -9999px !important; top: 8px; z-index: 2000; }
.of-skip:focus, .of-skip:focus-visible { left: 16px !important; }
/* 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: #D4EAB5 !important; }
.e-accordion-item-icon svg { width: 14px !important; height: 14px !important; }
/* formulier: randen 3:1+ */
.of-form input::placeholder, .of-form textarea::placeholder { color: #6C6C6C !important; opacity: 1 !important; }
.of-form input, .of-form textarea, .of-form select { border: 2px solid #6C6C6C !important; border-radius: 4px !important; }
.of-form input:focus, .of-form textarea:focus, .of-form select:focus { border-color: #1E1E1F !important; }
/* footer */
.of-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 #1E1E1F !important; outline-offset: 3px; }
footer a:focus-visible, .of-cta a:focus-visible { outline-color: #FFFFFF !important; } .of-cta a:focus-visible { outline-color: #1E1E1F !important; }
/* hero */
.of-hero img { image-rendering: auto; }
@media (max-width: 767px) { h1.e-heading-base { font-size: 2.45rem; } h2.e-heading-base { font-size: 1.8rem; } .of-hero h1.e-heading-base { font-size: 2.7rem; } }
.e-button-base, .e-paragraph-base { max-width: 100%; min-width: 0; overflow-wrap: break-word; }
.e-svg-base svg { display: block; }
.e-button-base { white-space: nowrap; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; } @media (max-width: 1024px) { html { scroll-padding-top: 92px; } }
/* 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; } .of-staal:hover .of-staal-kleur, .of-fstaal:hover > div, .of-nav li.of-sub > a:hover::before { transform: none !important; } details[open] > summary .e-accordion-item-icon { transform: none !important; } .elementor-menu-toggle + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { clip-path: none !important; } .elementor-menu-toggle:not(.elementor-active) + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { opacity: 0; transition: opacity .15s ease, visibility 0s linear .15s !important; } .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { opacity: 1; transition: opacity .2s ease, visibility 0s !important; } nav.elementor-nav-menu--dropdown.elementor-nav-menu__container::before { display: none !important; } nav.elementor-nav-menu--dropdown .elementor-nav-menu > li { transform: none !important; } }/* End custom CSS */