.elementor-kit-5{--e-global-color-primary:#161817;--e-global-color-secondary:#434745;--e-global-color-text:#161817;--e-global-color-accent:#2E7652;--e-global-typography-primary-font-family:"AD Josefin";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"AD Josefin";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"AD Mulish";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"AD Mulish";--e-global-typography-accent-font-weight:700;background-color:#FFFFFF;font-family:"AD 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 { --ad-inkt:#161817; --ad-leisteen:#434745; --ad-grijs:#5A5F5C; --ad-lijn:#E7E9E8; --ad-wit:#FFFFFF; --ad-mist:#F3F5F4; --ad-mint:#87C9A3; --ad-mint-diep:#2E7652; --ad-mint-licht:#E4F2EA; --font-heading:AD Josefin; --font-body:AD Mulish; }
/* Start custom CSS *//* De Achterdiek: zelf gehoste fonts (latin) */
@font-face { font-family: 'AD Josefin'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/wp-content/uploads/fonts/josefin-sans-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: 'AD 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: 'AD Josefin Fallback'; src: local('Arial'), local('Liberation Sans'), local('DejaVu Sans'); size-adjust: 92%; ascent-override: 82%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: 'AD Mulish Fallback'; src: local('Arial'), local('Liberation Sans'), local('DejaVu Sans'); size-adjust: 104%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; }
:root { --font-heading: 'AD Josefin', 'AD Josefin Fallback', 'Century Gothic', Futura, sans-serif; --font-body: 'AD Mulish', 'AD Mulish Fallback', Arial, sans-serif; }
body { background-color: #FFFFFF; color: #161817; font-family: 'AD Mulish', 'AD Mulish Fallback', Arial, sans-serif; }
h1.e-heading-base, h2.e-heading-base, h3.e-heading-base, h4.e-heading-base { font-family: 'AD Josefin', 'AD Josefin Fallback', 'Century Gothic', Futura, sans-serif !important; color: #161817; font-weight: 600; letter-spacing: -0.005em; text-wrap: balance; }
h1.e-heading-base { font-size: clamp(2.3rem, 1.6rem + 2vw, 3.3rem); line-height: 1.08; } h2.e-heading-base { font-size: clamp(1.8rem, 1.4rem + 1.1vw, 2.35rem); line-height: 1.15; } h3.e-heading-base { font-size: 1.3rem; line-height: 1.25; }
/* Josefin staat hoog in de regel: optisch corrigeren zodat koppen op de lijn van tekst ernaast staan */ h1.e-heading-base, h2.e-heading-base, h3.e-heading-base { padding-top: 0.12em; }
.e-button-base, p.e-paragraph-base, .e-paragraph-base, input, textarea, select, label { font-family: 'AD Mulish', 'AD Mulish Fallback', Arial, sans-serif; }
p.e-paragraph-base, .e-paragraph-base { color: #161817; font-size: 1.12rem; line-height: 1.65; max-width: 68ch; text-wrap: pretty; }
/* links in lopende tekst: niet onderstreept; diepmint (5,6:1 op wit, 3,4:1 t.o.v. de tekst) en extra vet; mint lijn bij hover/focus */
.e-paragraph-base a { color: #2E7652; font-weight: 800; 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: #161817; box-shadow: inset 0 -2px 0 #87C9A3; }
a.e-button-base, a.e-con, a.e-div-block-base { text-decoration: none !important; }
.e-paragraph-base:empty { display: none; }
.ad-bel { white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; transition: color .2s ease, box-shadow .2s ease !important; } .ad-bel:hover, .ad-bel:focus-visible { box-shadow: inset 0 -2px 0 #87C9A3; }
/* ===== header: uithangbord ===== */
.elementor-location-header { position: sticky; top: 0; z-index: 1000; } :root { --ad-header-h: 80px; } @media (max-width: 1199px) { :root { --ad-header-h: 72px; } }
.ad-header { box-shadow: 0 1px 0 #E7E9E8; }
.ad-hdr-midden, .ad-menuknop { align-self: center !important; }
/* het bord: wit met mint zijbanden zoals het bord aan de weg, hangt onder de balk uit; twee paaltjes eronder */
.ad-bord { position: relative; margin-top: 10px; border-left: 9px solid #87C9A3; border-right: 9px solid #87C9A3; outline: 1px solid #E7E9E8; outline-offset: 0; transition: width .3s cubic-bezier(.23,1,.32,1), margin-top .3s cubic-bezier(.23,1,.32,1), padding .3s cubic-bezier(.23,1,.32,1) !important; }
.ad-bord::before, .ad-bord::after { content: '' !important; display: block !important; position: absolute !important; top: auto !important; bottom: -16px; inset-inline: auto; width: 7px; height: 16px; background: #434745; border-radius: 0 0 2px 2px; transition: opacity .2s ease; } .ad-bord::before { left: 22%; } .ad-bord::after { right: 22%; }
@media (hover: hover) and (pointer: fine) { .ad-header:not(.ad-gescrold) .ad-bord:hover { transform: rotate(-1.2deg); } } .ad-bord { transition: transform .28s cubic-bezier(.23,1,.32,1) !important; }
.ad-bord { width: 236px !important; transform-origin: 0 0; } .ad-gescrold .ad-bord { transform: scale(.7); } .ad-gescrold .ad-bord::before, .ad-gescrold .ad-bord::after { opacity: 0; }
@media (max-width: 1199px) { .ad-bord { width: 160px !important; margin-top: 8px; padding: 9px 14px 8px !important; border-left-width: 7px; border-right-width: 7px; } .ad-gescrold .ad-bord { transform: scale(.86); } }
@media (max-width: 767px) { .ad-bord { width: 138px !important; padding: 7px 12px 6px !important; } .ad-bord::before, .ad-bord::after { bottom: -12px; height: 12px; width: 6px; } }
.ad-menulink { padding: 8px 13px !important; border-radius: 6px; color: #161817 !important; font-weight: 700 !important; font-size: 1.04rem !important; white-space: nowrap; transition: background-color .2s cubic-bezier(.23,1,.32,1), color .2s cubic-bezier(.23,1,.32,1) !important; }
@media (hover: hover) and (pointer: fine) { .ad-menulink:hover { background-color: #F3F5F4 !important; } } .ad-menulink[aria-current=page] { background-color: #E4F2EA !important; color: #161817 !important; }
.ad-hdr-bel { white-space: nowrap; } .ad-hdr-bel:hover { color: #2E7652 !important; } .ad-hdr-actie { white-space: nowrap; } .ad-hdr-rechts > * { align-self: center !important; }
@media (max-width: 1439px) { .ad-hdr-bel { display: none !important; } }
@media (max-width: 1199px) { .ad-hdr-midden { display: none !important; } } @media (min-width: 1200px) { .ad-menuknop { display: none !important; } }
.ad-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) { .ad-menuknop:hover { background-color: #E4F2EA !important; } } .ad-menuknop:active { transform: scale(.97); }
.ad-menuknop > :nth-child(2) { display: none !important; } .ad-open .ad-menuknop > :first-child { display: none !important; } .ad-open .ad-menuknop > :nth-child(2) { display: block !important; }
.ad-open .ad-menuknop { background-color: #161817 !important; color: #FFFFFF !important; }
/* sleutelgat: het menu opent door een sleutelgat dat groeit tot het hele scherm (mask-size) */
.ad-overlay { position: fixed !important; left: 0; right: 0; top: var(--ad-header-h); bottom: 0; z-index: 900; overflow-y: auto; overscroll-behavior: contain; background-color: #161817 !important; -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'><circle cx='50' cy='48' r='34' fill='%23000'/><path d='M34 66 L66 66 L80 146 L20 146 Z' fill='%23000'/></svg>"); mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'><circle cx='50' cy='48' r='34' fill='%23000'/><path d='M34 66 L66 66 L80 146 L20 146 Z' fill='%23000'/></svg>"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 38%; mask-position: 50% 38%; -webkit-mask-size: 0px 0px; mask-size: 0px 0px; visibility: hidden; transition: -webkit-mask-size .22s cubic-bezier(.23,1,.32,1), mask-size .22s cubic-bezier(.23,1,.32,1), visibility 0s linear .22s; }
@keyframes ad-sleutelgat { 0% { -webkit-mask-size: 0 0; mask-size: 0 0; } 50% { -webkit-mask-size: 46vmin 69vmin; mask-size: 46vmin 69vmin; } 62% { -webkit-mask-size: 52vmin 78vmin; mask-size: 52vmin 78vmin; } 100% { -webkit-mask-size: 520vmax 780vmax; mask-size: 520vmax 780vmax; } }
.ad-open .ad-overlay { -webkit-mask-size: 520vmax 780vmax; mask-size: 520vmax 780vmax; visibility: visible; transition: visibility 0s; animation: ad-sleutelgat .56s cubic-bezier(.33,0,.2,1) both; }
@media (min-width: 1200px) { .ad-overlay { display: none !important; } }
.ad-overlay .ad-ovlink, .ad-overlay .ad-ovonder { opacity: 0; transform: translateY(10px); transition: opacity .12s cubic-bezier(.23,1,.32,1), transform .12s cubic-bezier(.23,1,.32,1), background-color .2s ease !important; }
.ad-open .ad-overlay .ad-ovlink, .ad-open .ad-overlay .ad-ovonder { opacity: 1; transform: none; transition: opacity .3s cubic-bezier(.23,1,.32,1), transform .38s cubic-bezier(.23,1,.32,1), background-color .2s ease !important; }
.ad-open .ad-ovlinks > :nth-child(1) { transition-delay: 330ms !important; } .ad-open .ad-ovlinks > :nth-child(2) { transition-delay: 360ms !important; } .ad-open .ad-ovlinks > :nth-child(3) { transition-delay: 390ms !important; } .ad-open .ad-ovlinks > :nth-child(4) { transition-delay: 420ms !important; } .ad-open .ad-ovlinks > :nth-child(5) { transition-delay: 450ms !important; } .ad-open .ad-ovlinks > :nth-child(6) { transition-delay: 480ms !important; } .ad-open .ad-ovlinks > :nth-child(7) { transition-delay: 510ms !important; } .ad-open .ad-ovlinks > :nth-child(8) { transition-delay: 540ms !important; } .ad-open .ad-ovlinks > :nth-child(9) { transition-delay: 570ms !important; } .ad-open .ad-ovlinks > :nth-child(10) { transition-delay: 600ms !important; } .ad-open .ad-ovlinks > :nth-child(11) { transition-delay: 630ms !important; } 
.ad-open .ad-overlay .ad-ovonder { transition-delay: 600ms !important; }
@media (hover: hover) and (pointer: fine) { .ad-ovlink:hover { background-color: rgba(255,255,255,.08) !important; } } .ad-ovlink:focus-visible { background-color: rgba(255,255,255,.08) !important; } .ad-ovlink[aria-current=page] { background-color: rgba(135,201,163,.18) !important; } .ad-ovlink[aria-current=page] p { color: #87C9A3 !important; }
.ad-overlay .ad-bel { color: #FFFFFF !important; } .ad-overlay .btn-mint:hover { background-color: #FFFFFF !important; color: #161817 !important; }
html.ad-lock { overflow: hidden; } .ad-overlay .ad-knoppen { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; } .ad-overlay .ad-knoppen > .e-button-base { align-self: flex-start !important; }
/* gaps die de V4-parser niet opslaat */ .ad-linkrij { gap: 8px 24px !important; } .ad-knoppen { gap: 14px 24px !important; } .ad-lijst { column-gap: 32px !important; } .ad-plaatsen { column-gap: 36px !important; } .ad-footgrid { gap: 28px 44px !important; }
/* ===== hero: ansichtkaart ===== */
.ad-zegel { outline: 6px dotted #FFFFFF; outline-offset: -3px; position: relative; z-index: 1; }
.ad-stempel { transform: rotate(-12deg); margin-right: -26px; position: relative; z-index: 2; background: transparent; }
.ad-stempel::before { content: ''; position: absolute; right: 100%; top: 34px; width: 54px; height: 22px; margin-right: 4px; background: repeating-linear-gradient(180deg, #434745 0 2px, transparent 2px 9px); opacity: .7; }
@media (max-width: 767px) { .ad-stempel::before { display: none; } .ad-zegel { width: 70px !important; height: 84px !important; } .ad-zegel img { width: 46px !important; } .ad-stempel { width: 76px !important; height: 76px !important; } }
.ad-kaarttekst { position: relative; } @media (min-width: 1025px) { .ad-kaarttekst::before { content: ''; position: absolute; left: 0; top: 36px; bottom: 40px; width: 1px; background: #E7E9E8; } }
.ad-herofoto { min-height: 100%; } @media (max-width: 1024px) { .ad-herofoto { min-height: 0; } }
/* ===== kamerkeuze (home): foto volgt de kamer ===== */
.ad-kamerfoto { position: absolute !important; inset: 0; opacity: 0; transition: opacity .25s ease; } .ad-kamerfoto.is-actief { opacity: 1; }
.ad-kamerrij { transition: background-color .2s cubic-bezier(.23,1,.32,1), border-color .2s cubic-bezier(.23,1,.32,1) !important; border-radius: 0 6px 6px 0; } .ad-kamerrij.is-actief, .ad-kamerrij:focus-visible { background-color: #FFFFFF; border-left-color: #87C9A3 !important; }
.ad-kamerrij h3 { transition: color .2s ease; } .ad-kamerrij.is-actief h3 { color: #161817; }
@media (max-width: 1024px) { .ad-kamerrij { background-color: #FFFFFF; border-left-color: #87C9A3 !important; margin-bottom: 10px; } }
/* ===== prijslijsten (mu-plugin) ===== */
.ad-prijslijst { list-style: none; margin: 0; padding: 0; width: 100%; }
.ad-prijslijst li { padding: 13px 0; border-bottom: 1px solid #E7E9E8; } .ad-prijslijst li:first-child { border-top: 1px solid #E7E9E8; }
.ad-regel { display: flex; align-items: baseline; gap: 10px; font-size: 1.1rem; line-height: 1.4; color: #161817; } .ad-naam { font-weight: 700; } .ad-stip { flex: 1 1 auto; min-width: 20px; border-bottom: 2px dotted #B9BEBB; transform: translateY(-4px); } .ad-bedrag { font-family: 'AD Josefin', 'AD Josefin Fallback', 'Century Gothic', Futura, sans-serif; font-weight: 600; font-size: 1.2rem; white-space: nowrap; color: #161817; }
.ad-omschr { display: block; color: #5A5F5C; font-size: 1rem; line-height: 1.45; margin-top: 2px; } .ad-noot { color: #5A5F5C; font-size: 1rem; line-height: 1.5; margin: 12px 0 0; max-width: 68ch; }
/* ===== footer: deurhanger ===== */
.ad-footer { position: relative; } .ad-hanger { margin-top: -132px; position: relative; z-index: 2; transform-origin: 50% 40px; } @media (max-width: 767px) { .ad-hanger { margin-top: -112px; } }
.ad-hanger-gat { position: relative; } .ad-hanger-gat::before { content: ''; position: absolute; left: 50%; top: 0; width: 60px; height: 60px; margin-left: -30px; border-radius: 50%; background: #87C9A3; box-shadow: inset 0 0 0 3px #161817; }
.ad-hanger-gat::after { content: ''; position: absolute; left: calc(50% + 24px); top: 26px; width: 34px; height: 8px; background: #87C9A3; border-top: 3px solid #161817; border-bottom: 3px solid #161817; transform: rotate(-24deg); transform-origin: 0 50%; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .ad-hanger:hover { animation: ad-schommel 1.2s cubic-bezier(.23,1,.32,1); } } @keyframes ad-schommel { 0% { transform: rotate(0); } 25% { transform: rotate(3deg); } 55% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } 100% { transform: rotate(0); } }
.ad-footer-link:hover, .ad-footer-link:focus-visible { color: #87C9A3 !important; }
[data-elementor-type=wp-page] > :last-child:not(.ad-cta), [data-elementor-type=error-404] > :last-child:not(.ad-cta) { padding-bottom: 180px !important; } @media (max-width: 767px) { [data-elementor-type=wp-page] > :last-child:not(.ad-cta), [data-elementor-type=error-404] > :last-child:not(.ad-cta) { padding-bottom: 150px !important; } } .ad-cta { padding-bottom: 168px !important; } @media (max-width: 767px) { .ad-cta { padding-bottom: 140px !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: #87C9A3 !important; }
.e-accordion-item-icon svg { width: 14px !important; height: 14px !important; }
@media (hover: hover) and (pointer: fine) { summary.e-accordion-item-header:hover h3 { color: #2E7652 !important; } }
/* formulier: randen 3:1+ */
.ad-form input::placeholder, .ad-form textarea::placeholder { color: #5A5F5C !important; opacity: 1 !important; }
.ad-form input, .ad-form textarea, .ad-form select { border: 2px solid #7E8582 !important; } .ad-form input:focus, .ad-form textarea:focus, .ad-form select:focus { border-color: #2E7652 !important; }
/* omgeving en restaurants */
.ad-omg h3 a { display: inline-block; min-height: 26px; } .ad-omg h3 a, .ad-resto h3 a { color: inherit; text-decoration: none; transition: color .2s ease; } .ad-omg h3 a:hover, .ad-omg h3 a:focus-visible, .ad-resto h3 a:hover { color: #2E7652; }
.ad-panel a.e-button-base { color: #2E7652 !important; } .ad-panel a.e-button-base:hover { color: #161817 !important; }
.ad-galerij img { width: 100% !important; height: 100% !important; object-fit: cover; }
/* 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); }
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: #E4F2EA; color: #161817; } input, textarea { caret-color: #2E7652; }
/* skip-link */
.ad-skip { position: absolute !important; left: -9999px !important; top: 8px; z-index: 2000; } .ad-skip:focus, .ad-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 #2E7652 !important; outline-offset: 3px; }
footer a:focus-visible, .ad-overlay a:focus-visible { outline-color: #87C9A3 !important; }
/* kaarttitels op één regel */
.ad-panel h3, .ad-kamerrij h3 { white-space: nowrap; } @media (max-width: 380px) { .ad-panel h3, .ad-kamerrij h3 { white-space: normal; } }
@media (max-width: 767px) { h1.e-heading-base { font-size: 2.15rem; } h2.e-heading-base { font-size: 1.75rem; } 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; } .ad-basis { align-items: baseline !important; } .ad-nowrap { white-space: nowrap !important; } .ad-rechts { text-align: right !important; }
.ad-knoppen .e-button-base { white-space: nowrap; } .ad-knoppen > .e-button-base { align-self: center !important; } .ad-plaats p:last-child { white-space: nowrap; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; } @media (max-width: 1199px) { html { scroll-padding-top: 96px; } }
/* reduced motion: alleen beweging uit */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; } .e-button-base:active, .ad-menuknop:active, .ad-bord:hover { transform: none !important; } details[open] > summary .e-accordion-item-icon { transform: none !important; } .ad-overlay { -webkit-mask: none !important; mask: none !important; transition: opacity .15s linear, visibility 0s linear .15s !important; opacity: 0; } .ad-open .ad-overlay { opacity: 1; transition: opacity .15s linear, visibility 0s !important; } .ad-overlay .ad-ovlink, .ad-overlay .ad-ovonder { transform: none !important; transition: opacity .15s linear !important; transition-delay: 0s !important; } .ad-kamerfoto { transition: none !important; } }/* End custom CSS */