.elementor-kit-5{--e-global-color-primary:#2A2120;--e-global-color-secondary:#2F5753;--e-global-color-text:#2A2120;--e-global-color-accent:#3F7A74;--e-global-typography-primary-font-family:"ZG Quicksand";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"ZG Quicksand";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"ZG Mulish";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"ZG Mulish";--e-global-typography-accent-font-weight:700;background-color:#FFFFFF;font-family:"ZG Mulish", 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 { --zg-inkt:#2A2120; --zg-bruin:#544645; --zg-lijn:#DCD5D1; --zg-wit:#FFFFFF; --zg-turf:#F4EFEB; --zg-teal:#4D8680; --zg-teal-tekst:#3F7A74; --zg-teal-donker:#2F5753; --zg-mint:#50BC98; --zg-rood:#A21A20; --zg-mint-licht:#E8F5EF; --zg-teal-licht:#E6EFEE; --font-heading:ZG Quicksand; --font-body:ZG Mulish; }
/* Start custom CSS *//* de Zorgerije: zelf gehoste fonts (latin, variabel) */
@font-face { font-family: 'ZG Quicksand'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/wp-content/uploads/fonts/quicksand-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: 'ZG Mulish'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/wp-content/uploads/fonts/mulish-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: 'ZG Quicksand Fallback'; src: local('Arial'), local('Liberation Sans'); size-adjust: 103%; ascent-override: 97%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: 'ZG Mulish Fallback'; src: local('Arial'), local('Liberation Sans'); size-adjust: 106%; ascent-override: 95%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: 'ZG Quicksand Fallback D'; src: local('DejaVu Sans'); size-adjust: 92%; ascent-override: 108%; descent-override: 27%; line-gap-override: 0%; } @font-face { font-family: 'ZG Mulish Fallback D'; src: local('DejaVu Sans'); size-adjust: 95%; ascent-override: 106%; descent-override: 26%; line-gap-override: 0%; }
:root { --font-heading: 'ZG Quicksand', 'ZG Quicksand Fallback', 'ZG Quicksand Fallback D', Arial, sans-serif; --font-body: 'ZG Mulish', 'ZG Mulish Fallback', 'ZG Mulish Fallback D', Arial, sans-serif; }
body { background-color: #FFFFFF; color: #2A2120; font-family: 'ZG Mulish', 'ZG Mulish Fallback', 'ZG Mulish Fallback D', Arial, sans-serif; }
h1.e-heading-base, h2.e-heading-base, h3.e-heading-base, h4.e-heading-base { font-family: 'ZG Quicksand', 'ZG Quicksand Fallback', 'ZG Quicksand Fallback D', Arial, sans-serif !important; color: #2A2120; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
h1.e-heading-base { font-size: clamp(2.4rem, 1.6rem + 2.2vw, 3.6rem); line-height: 1.08; } h2.e-heading-base { font-size: clamp(1.85rem, 1.45rem + 1.1vw, 2.45rem); line-height: 1.14; } h3.e-heading-base { font-size: 1.3rem; line-height: 1.28; }
.e-button-base, p.e-paragraph-base, .e-paragraph-base, input, textarea, select, label { font-family: 'ZG Mulish', 'ZG Mulish Fallback', 'ZG Mulish Fallback D', Arial, sans-serif; }
p.e-paragraph-base, .e-paragraph-base { color: #2A2120; font-size: 1.15rem; line-height: 1.65; max-width: 68ch; text-wrap: pretty; }
/* links: niet onderstreept; in lopende tekst teal (4,9:1 op wit, 3,2:1 t.o.v. de tekst) en vet; mintlijn bij hover/focus */
.e-paragraph-base a { color: #3F7A74; font-weight: 700; 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: #2A2120; box-shadow: inset 0 -2px 0 #50BC98; }
a.e-button-base, a.e-con, a.e-div-block-base { text-decoration: none !important; }
.e-paragraph-base:empty { display: none; }
.zg-bel { box-shadow: inset 0 -2px 0 transparent; transition: color .2s ease, box-shadow .2s ease !important; white-space: nowrap; } .zg-bel:hover, .zg-bel:focus-visible { box-shadow: inset 0 -2px 0 #50BC98; }
/* het motief uit het logo: lijn, hart met handen, lijn (decoratief, CSS-achtergrond) */
.zg-h1::after { content: ''; display: block; width: 150px; height: 26px; margin-top: 20px; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='26' viewBox='0 0 150 26'><path d='M1 13.5H56.0M94.0 13.5H149' stroke='%234D8680' stroke-width='2' stroke-linecap='round'/><circle cx='75.0' cy='4.2' r='3.4' fill='%2350BC98'/><path d='M68.0 11.5c0-2.6 1.9-4.1 4-4.1 1.6 0 2.6 1 3 2.2.4-1.2 1.4-2.2 3-2.2 2.1 0 4 1.5 4 4.1 0 3.6-4.4 6.6-7 9.6-2.6-3-7-6-7-9.6z' fill='%234D8680'/><path d='M64.5 8c-2 3.2-2.2 7 1.2 9.6l5.6 4.2M85.5 8c2 3.2 2.2 7-1.2 9.6l-5.6 4.2' fill='none' stroke='%2350BC98' stroke-width='2.2' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-size: contain; }
.zg-cta .zg-h1::after, .zg-footer .zg-h1::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='26' viewBox='0 0 150 26'><path d='M1 13.5H56.0M94.0 13.5H149' stroke='rgba%28255,255,255,.6%29' stroke-width='2' stroke-linecap='round'/><circle cx='75.0' cy='4.2' r='3.4' fill='%2350BC98'/><path d='M68.0 11.5c0-2.6 1.9-4.1 4-4.1 1.6 0 2.6 1 3 2.2.4-1.2 1.4-2.2 3-2.2 2.1 0 4 1.5 4 4.1 0 3.6-4.4 6.6-7 9.6-2.6-3-7-6-7-9.6z' fill='%23FFFFFF'/><path d='M64.5 8c-2 3.2-2.2 7 1.2 9.6l5.6 4.2M85.5 8c2 3.2 2.2 7-1.2 9.6l-5.6 4.2' fill='none' stroke='%2350BC98' stroke-width='2.2' stroke-linecap='round'/></svg>"); }
/* route (aanmelden): genummerde stappen met een doorlopende lijn */
.zg-routestap { position: relative; } .zg-routestap:not(:last-child)::before { content: ''; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: #4D8680; opacity: .45; }
.zg-routenr { width: 48px; height: 48px; border-radius: 50%; background: #E8F5EF; display: flex !important; align-items: center; justify-content: center; position: relative; z-index: 1; max-width: none !important; }
.zg-routestap h3.e-heading-base { padding-top: 11px; }
/* ===== header: het logo-lijnenspel ===== */
.elementor-location-header { position: sticky; top: -124px; z-index: 1000; } @media (max-width: 1199px) { .elementor-location-header { top: 0; } }
:root { --zg-header-h: 72px; }
@media (max-width: 1199px) { .zg-logorij a:has(> .zg-logo) { display: none !important; } } @media (min-width: 1200px) { .zg-logorij a:has(> .zg-mobiellogo) { display: none !important; } } .zg-logorij .zg-hdrtel { justify-self: start; align-self: center !important; } .zg-logorij .zg-logo, .zg-logorij a:has(> .zg-logo) { justify-self: center; } .zg-logorij .zg-hdrknop { justify-self: end; }
.zg-menurij { position: relative; } .zg-menurij::after { content: ''; flex: 0 0 40px; width: 40px; height: 1px; }
.zg-lijn { height: 2px !important; background-color: #4D8680 !important; opacity: .55; flex: 1 1 40px !important; min-width: 24px; }
.zg-mi { position: relative; padding: 14px 13px !important; font-family: 'ZG Quicksand', 'ZG Quicksand Fallback', 'ZG Quicksand Fallback D', Arial, sans-serif !important; font-weight: 700 !important; font-size: 1.06rem !important; line-height: 1.2 !important; color: #2A2120 !important; background-color: transparent !important; white-space: nowrap; transition: color .2s cubic-bezier(.23,1,.32,1) !important; }
.zg-mi::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 3px; border-radius: 3px; background: #50BC98; opacity: 0; transform: translateY(3px); transition: opacity .2s cubic-bezier(.23,1,.32,1), transform .2s cubic-bezier(.23,1,.32,1); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .zg-mi:hover { color: #3F7A74 !important; } .zg-mi:hover::after { opacity: .6; transform: none; } } .zg-mi:focus-visible::after { opacity: .6; transform: none; } .zg-mi[aria-current=page]::after { opacity: 1; transform: none; } .zg-mi[aria-current=page] { color: #2F5753 !important; }
/* compacte stand: het beeldmerk en de knop schuiven in de menurij zodra het logo uit beeld is */
.zg-mini { opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .22s cubic-bezier(.23,1,.32,1), transform .22s cubic-bezier(.23,1,.32,1), visibility 0s linear .22s; }
.zg-klein .zg-mini { opacity: 1; visibility: visible; transform: none; transition: opacity .26s cubic-bezier(.23,1,.32,1), transform .26s cubic-bezier(.23,1,.32,1), visibility 0s; }
.zg-klein .zg-menurij { box-shadow: 0 1px 0 #DCD5D1; }
.zg-hdrtel { font-weight: 700 !important; color: #3F7A74 !important; } .zg-hdrtel:hover { color: #2A2120 !important; }
@media (min-width: 1200px) and (max-width: 1379px) { .zg-mi { padding-left: 10px !important; padding-right: 10px !important; font-size: .98rem !important; } .zg-mi::after { left: 10px; right: 10px; } } @media (max-width: 1199px) { .zg-logorij { display: flex !important; justify-content: space-between !important; height: 72px !important; } .zg-menurij, .zg-logorij .zg-hdrtel, .zg-logorij .zg-hdrknop, .zg-logorij .zg-logo { display: none !important; } } @media (min-width: 1200px) { .zg-menuknop, .zg-mobiellogo { display: none !important; } }
.zg-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; } @media (hover: hover) and (pointer: fine) { .zg-menuknop:hover { background-color: #E8F5EF !important; } } .zg-menuknop:active { transform: scale(.97); }
.zg-menuknop > :nth-child(2) { display: none !important; } .zg-open .zg-menuknop > :first-child { display: none !important; } .zg-open .zg-menuknop > :nth-child(2) { display: block !important; }
.zg-open .zg-menuknop { background-color: #2F5753 !important; color: #FFFFFF !important; border-color: #2F5753 !important; }
/* ===== mobiel menu: schuifdeuren (twee panelen schuiven naar elkaar toe, zoals de glazen ingang) ===== */
.zg-overlay { position: fixed !important; left: 0; right: 0; top: var(--zg-header-h); bottom: 0; z-index: 900; overflow-y: auto; overscroll-behavior: contain; background: transparent !important; visibility: hidden; transition: visibility 0s linear .34s; }
.zg-overlay::before, .zg-overlay::after { content: ''; position: fixed; top: var(--zg-header-h); bottom: 0; width: 50.5%; background-color: #2F5753; z-index: -1; transition: transform .3s cubic-bezier(.23,1,.32,1); }
.zg-overlay::before { left: 0; transform: translateX(-101%); border-right: 2px solid #50BC98; } .zg-overlay::after { right: 0; transform: translateX(101%); border-left: 2px solid #50BC98; }
.zg-open .zg-overlay { visibility: visible; transition: visibility 0s; } .zg-open .zg-overlay::before, .zg-open .zg-overlay::after { transform: none; border-color: transparent; transition: transform .42s cubic-bezier(.23,1,.32,1), border-color .2s linear .4s; }
@media (min-width: 1200px) { .zg-overlay { display: none !important; } }
.zg-ovinhoud { opacity: 0; transition: opacity .12s linear; } .zg-open .zg-ovinhoud { opacity: 1; transition: opacity .2s linear .26s; }
.zg-overlay .zg-ovlink, .zg-overlay .zg-ovonder { opacity: 0; transform: translateY(8px); transition: opacity .12s cubic-bezier(.23,1,.32,1), transform .12s cubic-bezier(.23,1,.32,1), background-color .2s ease !important; }
.zg-open .zg-overlay .zg-ovlink, .zg-open .zg-overlay .zg-ovonder { opacity: 1; transform: none; transition: opacity .3s cubic-bezier(.23,1,.32,1), transform .34s cubic-bezier(.23,1,.32,1), background-color .2s ease !important; }
.zg-open .zg-ovlinks > :nth-child(1) { transition-delay: 280ms !important; } .zg-open .zg-ovlinks > :nth-child(2) { transition-delay: 306ms !important; } .zg-open .zg-ovlinks > :nth-child(3) { transition-delay: 332ms !important; } .zg-open .zg-ovlinks > :nth-child(4) { transition-delay: 358ms !important; } .zg-open .zg-ovlinks > :nth-child(5) { transition-delay: 384ms !important; } .zg-open .zg-ovlinks > :nth-child(6) { transition-delay: 410ms !important; } .zg-open .zg-ovlinks > :nth-child(7) { transition-delay: 436ms !important; } .zg-open .zg-ovlinks > :nth-child(8) { transition-delay: 462ms !important; } .zg-open .zg-ovlinks > :nth-child(9) { transition-delay: 488ms !important; } .zg-open .zg-ovlinks > :nth-child(10) { transition-delay: 514ms !important; } .zg-open .zg-ovlinks > :nth-child(11) { transition-delay: 540ms !important; } .zg-open .zg-ovlinks > :nth-child(12) { transition-delay: 566ms !important; } .zg-open .zg-ovlinks > :nth-child(13) { transition-delay: 592ms !important; } 
.zg-open .zg-overlay .zg-ovonder { transition-delay: 560ms !important; }
@media (hover: hover) and (pointer: fine) { .zg-ovlink:hover { background-color: rgba(255,255,255,.08) !important; } } .zg-ovlink:focus-visible { background-color: rgba(255,255,255,.1) !important; } .zg-ovlink[aria-current=page] { box-shadow: inset 4px 0 0 #50BC98; }
html.zg-lock { overflow: hidden; }
/* ===== hero: weekrooster van de Turferije ===== */
.zg-dag { position: relative; transition: background-color .2s ease; }
.zg-dag.zg-vandaag { background-color: #E8F5EF !important; box-shadow: inset 4px 0 0 #50BC98; }
.zg-dag.zg-vandaag .zg-dagnaam::after { content: 'vandaag'; display: table; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: #2F5753; color: #fff; font-family: 'ZG Mulish', 'ZG Mulish Fallback', 'ZG Mulish Fallback D', Arial, sans-serif; font-size: .8rem; font-weight: 700; vertical-align: 2px; letter-spacing: 0; }
.zg-dagitem { position: relative; padding-left: 14px !important; } .zg-dagitem::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #4D8680; }
@media (min-width: 1025px) and (max-width: 1279px) { .zg-dagnaam { font-size: 1rem !important; } }
/* diensten-index op home */
.zg-dienst { transition: background-color .2s cubic-bezier(.23,1,.32,1) !important; } @media (hover: hover) and (pointer: fine) { .zg-dienst:hover { background-color: #F4EFEB !important; } .zg-dienst:hover h3 { color: #3F7A74 !important; } } .zg-dienst:focus-visible { outline-offset: -3px !important; }
.zg-tag { white-space: nowrap; }
/* gaps die de V4-parser niet opslaat */ .zg-linkrij { gap: 8px 24px !important; } .zg-knoppen { gap: 16px 28px !important; } .zg-lijst { column-gap: 32px !important; } .zg-plaatsen { column-gap: 36px !important; }
/* ===== footer: plattegrond van de Turferije ===== */
.zg-kamer { position: relative; border: 2px solid rgba(255,255,255,.34) !important; }
.zg-plattegrond > .zg-kamer + .zg-kamer { margin-left: -2px; } @media (max-width: 1024px) { .zg-plattegrond > .zg-kamer + .zg-kamer { margin-left: 0; margin-top: -2px; } }
.zg-ingang { position: relative; } .zg-ingang::before { content: ''; position: absolute; left: 50%; top: -1px; width: 86px; margin-left: -43px; height: 4px; background: #2F5753; } .zg-ingang::after { content: ''; position: absolute; left: 50%; top: -14px; width: 86px; margin-left: -43px; height: 14px; border-left: 2px solid #50BC98; border-right: 2px solid #50BC98; }
.zg-kamerlabel { font-style: italic; }
.zg-footer-link:hover, .zg-footer-link:focus-visible { color: #50BC98 !important; }
/* accordion */
@media (max-width: 1024px) { .zg-faqkol + .zg-faqkol .e-accordion { border-top-width: 0 !important; } }
.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: #50BC98 !important; }
.e-accordion-item-icon svg { width: 14px !important; height: 14px !important; }
summary.e-accordion-item-header:hover h3 { color: #3F7A74 !important; }
/* formulier: randen 3:1+ */
.zg-form input::placeholder, .zg-form textarea::placeholder { color: #6E6260 !important; opacity: 1 !important; }
.zg-form input, .zg-form textarea, .zg-form select { border: 2px solid #857A77 !important; }
.zg-form input:focus, .zg-form textarea:focus, .zg-form select:focus { border-color: #2F5753 !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), 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); } .zg-mi:active, .zg-hdrtel:active, .zg-bel: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; } a.zg-dienst:active, a.zg-plaats:active { transform: scale(.99); }
::selection { background: #E8F5EF; color: #2A2120; } input, textarea { caret-color: #3F7A74; }
.zg-panel a.e-button-base, .bg-mint a.e-button-base.zg-link { color: #2F5753 !important; } .zg-panel a.e-button-base:hover { color: #2A2120 !important; }
/* skip-link */
.zg-skip { position: absolute !important; left: -9999px !important; top: 8px; z-index: 2000; } .zg-skip:focus, .zg-skip:focus-visible { left: 16px !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 { outline: 3px solid #3F7A74 !important; outline-offset: 3px; }
footer a:focus-visible, .zg-overlay a:focus-visible, .zg-cta a:focus-visible { outline-color: #50BC98 !important; } .zg-mi:focus-visible { outline-offset: -3px; }
/* kaarttitels op één regel */
.zg-panel h3, .zg-waarom h3 { white-space: nowrap; } @media (max-width: 380px) { .zg-panel h3, .zg-waarom h3 { white-space: normal; } }
@media (max-width: 767px) { h1.e-heading-base { font-size: 2.3rem; } h2.e-heading-base { font-size: 1.8rem; } p.e-paragraph-base, .e-paragraph-base { font-size: 1.1rem; } }
.e-button-base, .e-paragraph-base { max-width: 100%; min-width: 0; overflow-wrap: break-word; }
.e-svg-base svg { display: block; }
.zg-knoppen .e-button-base { white-space: nowrap; } .zg-knoppen > .e-button-base { align-self: center !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
/* reduced motion: alleen beweging uit */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; } .e-button-base:active, .zg-menuknop:active, a.zg-dienst:active { transform: none !important; } details[open] > summary .e-accordion-item-icon { transform: none !important; } .zg-overlay::before, .zg-overlay::after { transform: none !important; transition: none !important; } .zg-overlay { opacity: 0; transition: opacity .15s linear, visibility 0s linear .15s !important; } .zg-open .zg-overlay { opacity: 1; transition: opacity .15s linear, visibility 0s !important; } .zg-ovinhoud, .zg-overlay .zg-ovlink, .zg-overlay .zg-ovonder { transform: none !important; transition: opacity .15s linear !important; transition-delay: 0s !important; } .zg-mini { transform: none !important; } }/* End custom CSS */