.elementor-kit-5{--e-global-color-primary:#231F20;--e-global-color-secondary:#F68933;--e-global-color-text:#231F20;--e-global-color-accent:#231F20;--e-global-typography-primary-font-family:"DK Bricolage";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"DK Bricolage";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"DK Golos";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"DK Golos";--e-global-typography-accent-font-weight:600;background-color:#FFFFFF;font-family:"DK Golos", 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 { --dk-inkt:#231F20; --dk-oranje:#F68933; --dk-groen:#6EB43F; --dk-wit:#FFFFFF; --dk-zand:#FCE7BC; --dk-zand-2:#F3D7A6; --dk-salie:#99B597; --dk-salie-licht:#E2ECE1; --dk-kalk:#FBF6EC; --dk-grijs:#6F7072; --dk-grijs-2:#9C9A9B; --dk-lijn:#D1D2D4; --font-heading:DK Bricolage; --font-body:DK Golos; }
/* Start custom CSS *//* Schildersbedrijf Donker: zelf gehoste fonts (latin) */
@font-face { font-family: 'DK Bricolage'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('/wp-content/uploads/fonts/bricolage-db.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: 'DK Golos'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/wp-content/uploads/fonts/golos-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: 'DK Golos Fallback'; src: local('Arial'), local('Liberation Sans'), local('DejaVu Sans'); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: 'DK Bricolage Fallback'; src: local('Arial Narrow'), local('Liberation Sans Narrow'), local('Arial'); size-adjust: 96%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }
:root { --font-heading: 'DK Bricolage', 'DK Bricolage Fallback', 'Arial Narrow', Arial, sans-serif; --font-body: 'DK Golos', 'DK Golos Fallback', Arial, sans-serif; --dk-hdr: 112px; } @media (max-width: 1199px) { :root { --dk-hdr: 76px; } } @media (max-width: 767px) { :root { --dk-hdr: 72px; } }
body { background-color: #FFFFFF; color: #231F20; font-family: 'DK Golos', 'DK Golos Fallback', Arial, sans-serif; }
h1.e-heading-base, h2.e-heading-base, h3.e-heading-base, h4.e-heading-base { font-family: 'DK Bricolage', 'DK Bricolage Fallback', 'Arial Narrow', Arial, sans-serif !important; color: #231F20; font-weight: 800; letter-spacing: -0.012em; text-wrap: balance; }
h1.e-heading-base { font-size: clamp(2.6rem, 1.3rem + 3.7vw, 4.9rem); line-height: 1.02; letter-spacing: -0.02em; } h2.e-heading-base { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.1; } h3.e-heading-base { font-size: 1.35rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.e-button-base, p.e-paragraph-base, .e-paragraph-base, input, textarea, select, label { font-family: 'DK Golos', 'DK Golos Fallback', Arial, sans-serif; }
p.e-paragraph-base, .e-paragraph-base { color: #231F20; font-size: 1.14rem; line-height: 1.65; max-width: 68ch; text-wrap: pretty; }
/* links: nooit onderstreept; tekstlinks inkt en vet, bij hover en focus een oranje accentlijn die van links aangroeit */
.e-paragraph-base a { color: #231F20; font-weight: 700; text-decoration: none; }
a.e-button-base, a.e-con, a.e-div-block-base { text-decoration: none !important; }
.e-paragraph-base:empty { display: none; }
.dk-tekstlink, .dk-footer-link { background-image: linear-gradient(#F68933, #F68933); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 3px; transition: color .2s cubic-bezier(.23,1,.32,1), background-size .32s cubic-bezier(.23,1,.32,1) !important; }
@media (hover: hover) and (pointer: fine) { .dk-tekstlink:hover, .dk-footer-link:hover { background-size: 100% 3px; } } .dk-tekstlink:focus-visible, .dk-footer-link:focus-visible { background-size: 100% 3px; }
.dk-bel { white-space: nowrap; }
/* het kozijn: ruiten tussen donkere roeden */
.dk-raam { display: grid !important; } .dk-ruit { position: relative; }
.dk-ruittitel { white-space: nowrap; } @media (max-width: 400px) { .dk-ruittitel { white-space: normal; } }
.dk-dienst .dk-tekstlink, .dk-ruit .dk-tekstlink { margin-top: auto; }
/* jaarschaal (hero) */
.dk-jaarschaal { grid-template-columns: 2.3fr repeat(6, minmax(0, 1fr)) !important; }
@media (max-width: 1099px) { .dk-jaarschaal { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .dk-jaarschaal > .dk-nu { grid-column: 1 / -1; } }
.dk-jaar { font-family: 'DK Bricolage', 'DK Bricolage Fallback', 'Arial Narrow', Arial, sans-serif !important; font-weight: 700 !important; font-size: 1.4rem !important; line-height: 1 !important; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.dk-jaargroot { font-weight: 800 !important; font-size: clamp(4.6rem, 2rem + 5.4vw, 8.4rem) !important; line-height: .86 !important; letter-spacing: -0.03em; margin-left: -0.04em !important; }
.dk-nu::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: #F68933; }
.dk-jaarruit { min-height: 156px; } @media (max-width: 1099px) { .dk-jaarruit { min-height: 100px; } .dk-nu { min-height: 0; } } @media (max-width: 767px) { .dk-jaarruit:not(.dk-nu) { padding: 14px 12px !important; min-height: 92px; } .dk-jaarruit:not(.dk-nu) p { font-size: .92rem !important; } .dk-jaarruit:not(.dk-nu) .dk-jaar { font-size: 1.2rem !important; } }
/* ===== header: kozijn (achtruits raam + deur) ===== */
.elementor-location-header { position: sticky; top: 0; z-index: 1000; } .dk-header { background-color: #FFFFFF !important; }
.dk-balk { position: relative; z-index: 2; transition: box-shadow .25s ease !important; } .dk-gescrold .dk-balk { box-shadow: 0 1px 0 #D1D2D4; }
.dk-logo img, img.dk-logo { display: block; }
.dk-navraam { display: grid !important; grid-template-columns: repeat(4, auto) auto; grid-template-rows: 40px 40px; gap: 6px; padding: 6px !important; background-color: #231F20; border-radius: 4px; }
.dk-navruit { display: flex !important; align-items: center; justify-content: center; min-height: 40px !important; padding: 0 18px !important; background-color: #E2ECE1 !important; color: #231F20 !important; font-weight: 600 !important; font-size: 1rem !important; line-height: 1 !important; white-space: nowrap; border-radius: 0 !important; transition: background-color .2s cubic-bezier(.23,1,.32,1), box-shadow .2s cubic-bezier(.23,1,.32,1) !important; }
@media (hover: hover) and (pointer: fine) { .dk-navruit:hover { background-color: #FCE7BC !important; } } .dk-navruit[aria-current=page] { background-color: #FFFFFF !important; box-shadow: inset 0 -4px 0 #F68933; }
.dk-navraam > .dk-navruit:nth-child(1) { border-top-left-radius: 2px !important; } .dk-navraam > .dk-navruit:nth-child(5) { border-bottom-left-radius: 2px !important; }
.dk-deur { grid-column: 5; grid-row: 1 / 3; align-self: stretch !important; height: auto !important; position: relative; display: flex !important; align-items: center; justify-content: flex-start; width: 150px; padding: 0 30px 0 18px !important; background-color: #F68933 !important; color: #231F20 !important; font-weight: 700 !important; font-size: 1.02rem !important; line-height: 1.2 !important; white-space: normal; text-align: left; border-radius: 0 2px 2px 0 !important; transition: background-color .2s cubic-bezier(.23,1,.32,1) !important; }
.dk-deur::after { content: ''; position: absolute; right: 11px; top: 50%; width: 5px; height: 22px; margin-top: -11px; border-radius: 3px; background: #231F20; }
@media (hover: hover) and (pointer: fine) { .dk-deur:hover { background-color: #F3D7A6 !important; } } .dk-navruit:active { transform: none !important; } .dk-deur { transition: background-color .2s cubic-bezier(.23,1,.32,1), transform .16s cubic-bezier(.23,1,.32,1) !important; } .dk-deur:active { transform: scale(.97) !important; }
@media (max-width: 1199px) { .dk-navraam { display: none !important; } } @media (min-width: 1200px) { .dk-menuknop { display: none !important; } .dk-glas { display: none !important; } }
.dk-menuknop { 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) !important; } .dk-menuknop:active { transform: scale(.97); }
.dk-menuknop > :nth-child(2) { display: none !important; } .dk-open .dk-menuknop > :first-child { display: none !important; } .dk-open .dk-menuknop > :nth-child(2) { display: block !important; }
.dk-open .dk-menuknop { background-color: #F68933 !important; color: #231F20 !important; }
/* mobiel menu: glas zetten. Het donkere kozijn trekt van boven naar beneden open (clip-path), daarna worden de ruiten gezet: ze verschijnen gestaffeld en er glijdt een lichtschijn over het glas. */
.dk-glas { position: fixed !important; left: 0; right: 0; top: var(--dk-hdr); bottom: 0; z-index: 1; overflow-y: auto; overscroll-behavior: contain; background-color: #231F20 !important; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .22s cubic-bezier(.77,0,.175,1), visibility 0s linear .22s; }
.dk-open .dk-glas { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .32s cubic-bezier(.77,0,.175,1), visibility 0s; }
.dk-glasruit p { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal !important; font-size: clamp(1.05rem, 0.8rem + 1.2vw, 1.25rem) !important; }
.dk-glasruit { position: relative; overflow: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .12s cubic-bezier(.23,1,.32,1), transform .12s cubic-bezier(.23,1,.32,1), background-color .2s ease !important; }
.dk-glasruit::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%); transform: translateX(-110%); pointer-events: none; }
.dk-open .dk-glasruit { opacity: 1; transform: none; transition: opacity .28s cubic-bezier(.23,1,.32,1), transform .34s cubic-bezier(.23,1,.32,1), background-color .2s ease !important; }
.dk-open .dk-glasruit::after { transform: translateX(110%); transition: transform .7s cubic-bezier(.23,1,.32,1); }
.dk-open .dk-glasruiten > :nth-child(1), .dk-open .dk-glasruiten > :nth-child(1)::after { transition-delay: 180ms !important; } .dk-open .dk-glasruiten > :nth-child(2), .dk-open .dk-glasruiten > :nth-child(2)::after { transition-delay: 214ms !important; } .dk-open .dk-glasruiten > :nth-child(3), .dk-open .dk-glasruiten > :nth-child(3)::after { transition-delay: 248ms !important; } .dk-open .dk-glasruiten > :nth-child(4), .dk-open .dk-glasruiten > :nth-child(4)::after { transition-delay: 282ms !important; } .dk-open .dk-glasruiten > :nth-child(5), .dk-open .dk-glasruiten > :nth-child(5)::after { transition-delay: 316ms !important; } .dk-open .dk-glasruiten > :nth-child(6), .dk-open .dk-glasruiten > :nth-child(6)::after { transition-delay: 350ms !important; } .dk-open .dk-glasruiten > :nth-child(7), .dk-open .dk-glasruiten > :nth-child(7)::after { transition-delay: 384ms !important; } .dk-open .dk-glasruiten > :nth-child(8), .dk-open .dk-glasruiten > :nth-child(8)::after { transition-delay: 418ms !important; } .dk-open .dk-glasruiten > :nth-child(9), .dk-open .dk-glasruiten > :nth-child(9)::after { transition-delay: 452ms !important; } .dk-open .dk-glasruiten > :nth-child(10), .dk-open .dk-glasruiten > :nth-child(10)::after { transition-delay: 486ms !important; } .dk-open .dk-glasruiten > :nth-child(11), .dk-open .dk-glasruiten > :nth-child(11)::after { transition-delay: 520ms !important; } .dk-open .dk-glasruiten > :nth-child(12), .dk-open .dk-glasruiten > :nth-child(12)::after { transition-delay: 554ms !important; } 
.dk-glasonder { opacity: 0; transition: opacity .12s cubic-bezier(.23,1,.32,1) !important; } .dk-open .dk-glasonder { opacity: 1; transition: opacity .3s cubic-bezier(.23,1,.32,1) .4s !important; }
@media (hover: hover) and (pointer: fine) { .dk-glasruit:hover { background-color: #FCE7BC !important; } } .dk-glasruit[aria-current=page] { background-color: #FFFFFF !important; box-shadow: inset 4px 0 0 #F68933; }
html.dk-lock { overflow: hidden; }
/* opsommingen met een vierruits raampje */
.dk-vink { position: relative; padding-left: 32px !important; } .dk-vink::before { content: ''; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><rect x='0' y='0' width='18' height='18' rx='2' fill='%23231F20'/><rect x='3' y='3' width='5' height='5' fill='%23FCE7BC'/><rect x='10' y='3' width='5' height='5' fill='%23FCE7BC'/><rect x='3' y='10' width='5' height='5' fill='%23FCE7BC'/><rect x='10' y='10' width='5' height='5' fill='%23F68933'/></svg>"); background-repeat: no-repeat; }
/* gaps en rasters die de V4-parser niet (goed) opslaat */
.dk-knoppen { gap: 14px 28px !important; } .dk-vinklijst { gap: 12px 36px !important; } .dk-knoppen .e-button-base { white-space: nowrap; } .dk-knoppen .dk-bel { align-self: center !important; }
.dk-plaats { transition: background-color .2s cubic-bezier(.23,1,.32,1) !important; } @media (hover: hover) and (pointer: fine) { .dk-plaats:hover { background-color: #FBF6EC !important; } } .dk-plaats:active, .dk-glasruit:active { transform: scale(.98); }
.dk-stappen { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } @media (max-width: 1024px) { .dk-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 767px) { .dk-stappen { grid-template-columns: minmax(0, 1fr) !important; } }
/* accordion */
[data-e-type=e-accordion-item-icon] { width: 36px !important; height: 36px !important; min-width: 36px; border-radius: 50% !important; background-color: #FFFFFF !important; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; transition: transform .25s cubic-bezier(.23,1,.32,1), background-color .2s ease; } [data-e-type=e-accordion-item-icon] .e-svg-base, [data-e-type=e-accordion-item-icon] svg { width: 14px !important; height: 14px !important; color: #231F20; }
details[open] > summary [data-e-type=e-accordion-item-icon] { transform: rotate(180deg); background-color: #F68933 !important; }
summary.e-accordion-item-header { list-style: none; } summary.e-accordion-item-header::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { summary.e-accordion-item-header:hover [data-e-type=e-accordion-item-icon] { background-color: #FCE7BC !important; } }
.bg-wit-faq [data-e-type=e-accordion-item-icon] { background-color: #FBF6EC !important; }
/* formulier: randen 4,9:1 */
.dk-form input::placeholder, .dk-form textarea::placeholder { color: #6F7072 !important; opacity: 1 !important; }
.dk-form input, .dk-form textarea, .dk-form select { border: 2px solid #6F7072 !important; border-radius: 4px !important; } .dk-form input:focus, .dk-form textarea:focus, .dk-form select:focus { border-color: #231F20 !important; }
/* footer: groot citaat */
.dk-citaat { font-family: 'DK Bricolage', 'DK Bricolage Fallback', 'Arial Narrow', Arial, sans-serif !important; font-weight: 800 !important; color: #FFFFFF !important; font-size: clamp(2.7rem, 1rem + 5.4vw, 6.4rem) !important; line-height: .98 !important; letter-spacing: -0.025em; max-width: 16ch !important; text-wrap: balance; text-indent: -0.34em; padding-left: 0.34em; }
.dk-citaatnaam { position: relative; padding-left: 44px !important; } .dk-citaatnaam::before { content: ''; position: absolute; left: 0; top: 50%; width: 32px; height: 4px; margin-top: -2px; background: #F68933; }
.dk-footer-link { color: #E9E6E1 !important; } .dk-footer-link:hover, .dk-footer-link:focus-visible { color: #FFFFFF !important; }
.dk-voet { gap: 6px 26px !important; } .dk-voet .dk-footer-link { font-size: .94rem !important; }
.dk-footgrid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr 1fr !important; gap: 32px 36px !important; } @media (max-width: 1024px) { .dk-footgrid { grid-template-columns: 1fr 1fr 1fr !important; } .dk-footgrid > :first-child { grid-column: 1 / -1; } } @media (max-width: 767px) { .dk-footgrid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 420px) { .dk-footgrid { grid-template-columns: 1fr !important; } }
/* afwerking (emil): vaste overgangen per eigenschap, drukfeedback */
.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), background-size .32s cubic-bezier(.23,1,.32,1), transform .16s cubic-bezier(.23,1,.32,1) !important; } .e-button-base:active { transform: scale(.97); } .dk-tekstlink:active, .dk-footer-link:active { transform: none; }
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; }
::selection { background: #FCE7BC; color: #231F20; } input, textarea { caret-color: #F68933; }
.dk-skip { position: absolute !important; left: -9999px !important; top: 8px; z-index: 2000; } .dk-skip:focus, .dk-skip:focus-visible { left: 16px !important; }
a:focus-visible, button:focus-visible, .e-button-base:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #231F20 !important; outline-offset: 3px; }
footer a:focus-visible, .dk-glas a:focus-visible { outline-color: #FFFFFF !important; } .dk-navruit:focus-visible, .dk-deur:focus-visible { outline-color: #F68933 !important; outline-offset: -3px; z-index: 1; }
@media (max-width: 767px) { h1.e-heading-base { font-size: 2.55rem; } h2.e-heading-base { font-size: 1.85rem; } p.e-paragraph-base, .e-paragraph-base { font-size: 1.08rem; } }
.e-button-base, .e-paragraph-base { max-width: 100%; min-width: 0; overflow-wrap: break-word; } .e-svg-base svg { display: block; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; } @media (max-width: 1199px) { html { scroll-padding-top: 92px; } }
/* reduced motion: alleen beweging uit */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .e-button-base:active, .dk-menuknop:active { transform: none !important; } details[open] > summary [data-e-type=e-accordion-item-icon] { transform: none !important; } .dk-glas, .dk-open .dk-glas { clip-path: none !important; opacity: 0; transition: opacity .15s linear, visibility 0s linear .15s !important; } .dk-open .dk-glas { opacity: 1; transition: opacity .15s linear, visibility 0s !important; } .dk-glasruit, .dk-open .dk-glasruit { transform: none !important; transition: opacity .15s linear !important; transition-delay: 0s !important; } .dk-glasruit::after { display: none; } .dk-tekstlink, .dk-footer-link { transition: color .2s linear !important; } }/* End custom CSS */