/**
 * Opmaak van de Shapecrest-elementen voor Elementor.
 *
 * @author Ferhat Remory
 * @link   https://steirk.be
 */

/* Terugvalwaarden als het Shapecrest-thema niet actief is */
:where(:root) {
    --f-accent: #5b5bf6;
    --f-ink: #0e0f12;
    --f-muted: #6b6f78;
    --f-surface: #f3f3f1;
    --f-bg: #ffffff;
    --f-raised: #ffffff;
    --f-dark: #0e0f12;
    --f-line: color-mix(in srgb, var(--f-ink) 10%, transparent);
    --f-font: system-ui, sans-serif;
    --f-r-s: 10px;
    --f-r-m: 14px;
    --f-r-l: 22px;
    --f-shadow: 0 1px 1px rgb(14 15 18 / 4%), 0 4px 10px -2px rgb(14 15 18 / 6%), 0 18px 40px -14px rgb(14 15 18 / 14%);
    --f-ease: cubic-bezier(.2, .8, .2, 1);
}

[class*="elementor-widget-forma-"] { text-align: var(--fx-align, left); }

.elementor-widget-forma-feature,
.elementor-widget-forma-numbers,
.elementor-widget-forma-testimonial,
.elementor-widget-forma-progress { align-self: stretch; }

.fx-actions, .fx-btn-wrap, .fx-badge-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: var(--fx-align, left);
}

/* Knoppen */
.fx-btn {
    --fx-btn-bg: var(--f-ink);
    --fx-btn-fg: var(--f-bg);
    --fx-btn-bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--f-btn-h, 44px);
    padding: 0 18px;
    border: var(--f-btn-bw, 1px) solid var(--fx-btn-bd);
    border-radius: var(--f-r-s);
    background: var(--fx-btn-bg);
    color: var(--fx-btn-fg);
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--f-btn-w, 600);
    letter-spacing: var(--f-btn-ls, 0);
    text-transform: var(--f-btn-case, none);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, transform .2s var(--f-ease);
}

a.fx-btn:hover { background: color-mix(in srgb, var(--fx-btn-bg) 86%, var(--fx-btn-fg)); }

a.fx-btn:active { transform: scale(.98); }

.fx-btn--sm { height: var(--f-btn-h-s, 36px); padding: 0 14px; font-size: 13px; }

.fx-btn--lg { height: var(--f-btn-h-l, 52px); padding: 0 24px; font-size: 15px; }

.fx-btn--accent { --fx-btn-bg: var(--f-accent); --fx-btn-fg: var(--f-on-accent, #fff); }

.fx-btn--light { --fx-btn-bg: var(--f-raised); --fx-btn-fg: var(--f-ink); --fx-btn-bd: var(--f-line); box-shadow: 0 1px 2px rgb(14 15 18 / 5%); }

.fx-btn--outline { --fx-btn-bg: transparent; --fx-btn-fg: var(--f-ink); --fx-btn-bd: color-mix(in srgb, var(--f-ink) 22%, transparent); }

a.fx-btn--outline:hover { background: transparent; border-color: var(--f-ink); }

.fx-btn--soft { --fx-btn-bg: var(--f-surface); --fx-btn-fg: var(--f-ink); }

.fx-btn--soft:hover { background: color-mix(in srgb, var(--f-surface) 90%, var(--f-ink)) !important; }

.fx-btn--link { --fx-btn-bg: transparent; --fx-btn-fg: var(--f-ink); height: auto; padding: 6px 0; }

a.fx-btn--link:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }

.fx-btn__icon { display: inline-flex; font-size: 1.1em; }

.fx-btn__icon svg { width: 1.1em; height: 1.1em; fill: currentColor; }

.fx-btn-wrap--full .fx-btn { width: 100%; }

/* Label */
.fx-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--f-surface);
    color: var(--f-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.fx-badge--dark { background: var(--f-ink); color: var(--f-bg); }

.fx-badge--accent { background: color-mix(in srgb, var(--f-accent) 12%, #fff); color: var(--f-accent); }

.fx-badge--white { background: var(--f-raised); box-shadow: 0 0 0 1px var(--f-line); }

.fx-badge__icon svg { width: 14px; height: 14px; fill: currentColor; }

.fx-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--f-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--f-accent) 18%, transparent);
}

/* Sectiekop */
.fx-heading { max-width: 860px; margin-left: var(--fx-ml, 0); margin-right: var(--fx-mr, auto); }

.fx-heading__eyebrow { margin: 0 0 14px; color: var(--f-ink); font-size: 14px; font-weight: 600; }

.fx-heading__title { margin: 0; color: var(--f-ink); font-weight: var(--f-head-w, 600); line-height: calc(1.12 * var(--f-head-lh, 1)); letter-spacing: calc(-.025em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-heading--s .fx-heading__title { font-size: calc(clamp(22px, 2.4vw, 28px) * var(--f-head-scale, 1)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-heading--m .fx-heading__title { font-size: calc(clamp(27px, 3.4vw, 38px) * var(--f-head-scale, 1)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-heading--l .fx-heading__title { font-size: calc(clamp(32px, 4.4vw, 50px) * var(--f-head-scale, 1)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-heading--xl .fx-heading__title { font-size: calc(clamp(40px, 6.6vw, 78px) * var(--f-head-scale, 1)); letter-spacing: calc(-.035em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-heading--muted .fx-heading__accent { color: color-mix(in srgb, var(--f-muted) 84%, var(--f-bg)); }

.fx-heading--accent .fx-heading__accent { color: var(--f-accent); }

.fx-heading--gradient .fx-heading__accent {
    padding-bottom: .08em;
    background: linear-gradient(100deg, var(--f-accent), color-mix(in srgb, var(--f-accent) 40%, #ff7a59));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fx-heading__text {
    max-width: 62ch;
    margin: 18px var(--fx-mr, auto) 0 var(--fx-ml, 0);
    color: var(--f-muted);
    font-size: 17px;
    line-height: 1.6;
}

/* Hero */
.fx-hero {
    --fx-hero-overlay: .25;
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: 92vh;
    overflow: hidden;
    padding: 140px 20px 110px;
    background: var(--f-bg);
    color: var(--f-ink);
    text-align: var(--fx-align, center);
}

.fx-hero__media { position: absolute; inset: 0; z-index: -2; }

.fx-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.fx-hero--image { color: #fff; background: var(--f-dark); }

.fx-hero--image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(0 0 0 / var(--fx-hero-overlay));
}

.fx-hero__glow {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(60% 50% at 20% 20%, color-mix(in srgb, var(--f-accent) 22%, transparent), transparent 70%),
        radial-gradient(50% 45% at 85% 30%, color-mix(in srgb, #ff9a6b 20%, transparent), transparent 70%),
        radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--f-accent) 12%, transparent), transparent 70%),
        var(--f-bg);
}

.fx-hero--plain .fx-hero__glow { display: none; }

.fx-hero--fade::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    height: 28%;
    background: linear-gradient(to bottom, transparent, var(--f-bg));
}

.fx-hero__inner { width: 100%; max-width: 900px; }

.fx-hero--image .fx-hero__inner { text-shadow: 0 1px 24px rgb(0 0 0 / 18%); }

/* Omlijnde knoppen en tekstlinks blijven leesbaar op een foto */
.fx-hero--image :is(.fx-btn--outline, .fx-btn--link) { --fx-btn-fg: #fff; --fx-btn-bd: rgb(255 255 255 / 45%); }

.fx-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    background: var(--f-raised);
    box-shadow: 0 0 0 1px var(--f-line);
    color: var(--f-ink);
    font-size: 14px;
    font-weight: 600;
    text-shadow: none;
}

.fx-hero--image .fx-hero__badge {
    background: rgb(255 255 255 / 16%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%);
    color: #fff;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.fx-hero__title {
    margin: 0;
    font-size: calc(clamp(38px, 6.2vw, 76px) * var(--f-head-scale, 1));
    font-weight: var(--f-head-w, 600);
    line-height: calc(1.06 * var(--f-head-lh, 1));
    letter-spacing: calc(-.035em + var(--f-head-ls, 0em));
    color: inherit;
    font-family: var(--f-font-head, inherit);
    text-transform: var(--f-head-case, none);
}

.fx-hero__text {
    max-width: 60ch;
    margin: 22px var(--fx-mr, auto) 0 var(--fx-ml, auto);
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.55;
    opacity: .8;
}

.fx-hero .fx-actions { margin-top: 34px; text-shadow: none; }

.fx-play {
    display: inline-grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--f-raised);
    color: var(--f-ink);
    box-shadow: 0 10px 30px rgb(0 0 0 / 15%);
    cursor: pointer;
    transition: transform .3s var(--f-ease);
}

.fx-play:hover { transform: scale(1.06); }

.fx-play svg { width: 28px; height: 28px; margin-left: 4px; fill: currentColor; }

.fx-hero__down {
    position: absolute;
    left: 50%;
    bottom: 28px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--f-ink) 8%, transparent);
    color: var(--f-ink);
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: fx-bob 2.4s ease-in-out infinite;
}

.fx-hero__down svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@keyframes fx-bob {
    50% { transform: translate(-50%, 5px); }
}

/* Wisselende kop */
.fx-rotate { margin: 0; font-size: calc(clamp(30px, 4.4vw, 50px) * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); line-height: calc(1.15 * var(--f-head-lh, 1)); letter-spacing: calc(-.025em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-rotate__words {
    display: inline-grid;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .14em;
    margin-bottom: -.14em;
}

.fx-rotate__word {
    grid-area: 1 / 1;
    color: var(--f-accent);
    opacity: 0;
    transform: translateY(100%);
    transition: transform .55s var(--f-ease), opacity .55s;
}

.fx-rotate__word.is-active { opacity: 1; transform: none; }

.fx-rotate__word.is-leaving { opacity: 0; transform: translateY(-100%); }

/* Kaarten */
.fx-card { position: relative; height: 100%; border-radius: var(--f-r-l); }

.fx-card--surface { padding: 28px; background: var(--f-surface); }

.fx-card--white { padding: 28px; background: var(--f-raised); box-shadow: 0 0 0 1px var(--f-line), var(--f-shadow); }

.fx-card--outline { padding: 28px; box-shadow: inset 0 0 0 1px var(--f-line); }

.fx-card--dark { padding: 28px; background: var(--f-dark); color: #fff; }

.fx-card--none { padding: 0; }

.fx-card--link { transition: transform .3s var(--f-ease), box-shadow .3s; }

.fx-card--link:hover { transform: translateY(-3px); }

.fx-card__badge { position: absolute; top: 20px; right: 20px; padding: 5px 10px; font-size: 12px; }

.fx-icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: var(--f-r-m);
    background: var(--f-raised);
    color: var(--f-accent);
    box-shadow: 0 1px 2px rgb(14 15 18 / 6%), 0 4px 12px rgb(14 15 18 / 6%);
    font-size: 20px;
}

.fx-icon svg { width: 22px; height: 22px; fill: currentColor; }

.fx-card--white .fx-icon, .fx-card--outline .fx-icon, .fx-card--none .fx-icon { background: var(--f-surface); box-shadow: none; }

.fx-card--dark .fx-icon { background: rgb(255 255 255 / 10%); color: #fff; box-shadow: none; }

.fx-feature { display: flex; flex-direction: column; align-items: var(--fx-items, flex-start); }

.fx-feature--row { flex-direction: row; gap: 18px; text-align: left; }

.fx-card__body { display: flex; flex-direction: column; flex: 1; width: 100%; }

.fx-card__image { width: 100%; margin-bottom: 20px; }

.fx-card__image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--f-r-m); }

.fx-feature--stack .fx-icon + .fx-card__body { margin-top: 22px; }

.fx-card__title { margin: 0 0 8px; color: inherit; font-size: calc(19px * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); line-height: calc(1.3 * var(--f-head-lh, 1)); letter-spacing: calc(-.01em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-card__title a { color: inherit; text-decoration: none; }

.fx-card__text { margin: 0; color: var(--f-muted); font-size: 15px; line-height: 1.6; }

.fx-card--dark .fx-card__text { color: rgb(255 255 255 / 66%); }

.fx-card__actions { display: flex; margin-top: 20px; justify-content: var(--fx-align, left); }

.fx-feature--push .fx-card__actions { margin-top: auto; padding-top: 20px; }

.fx-card--surface .fx-btn--soft { --fx-btn-bg: var(--f-raised); }

/* Teller */
.fx-number__value {
    display: block;
    text-align: var(--fx-align, left);
    margin: 0;
    color: inherit;
    font-weight: var(--f-head-w, 600);
    line-height: calc(1 * var(--f-head-lh, 1));
    letter-spacing: calc(-.035em + var(--f-head-ls, 0em));
    font-variant-numeric: tabular-nums;
    font-family: var(--f-font-head, inherit);
}

.fx-number--m .fx-number__value { font-size: 40px; }

.fx-number--l .fx-number__value { font-size: clamp(44px, 5vw, 60px); }

.fx-number--xl .fx-number__value { font-size: clamp(56px, 8vw, 104px); }

.fx-number__label { margin: 12px 0 0; font-size: 15px; font-weight: 600; }

.fx-number__text { margin: 6px 0 0; color: var(--f-muted); font-size: 14px; }

.fx-card--dark .fx-number__text { color: rgb(255 255 255 / 66%); }

/* Lopende band */
.fx-marquee {
    --fx-gap: 64px;
    --fx-logo-h: 32px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.fx-marquee__track { display: flex; width: max-content; animation: fx-marquee var(--fx-speed, 30s) linear infinite; }

.fx-marquee--reverse .fx-marquee__track { animation-direction: reverse; }

.fx-marquee--pause:hover .fx-marquee__track { animation-play-state: paused; }

.fx-marquee__list { display: flex; align-items: center; gap: var(--fx-gap); margin: 0; padding: 0 var(--fx-gap) 0 0; list-style: none; }

.fx-marquee__item { flex: none; }

.fx-marquee__item a { display: block; color: inherit; text-decoration: none; }

.fx-marquee__item img { display: block; width: auto; height: var(--fx-logo-h); }

.fx-marquee--gray img { filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s; }

.fx-marquee--gray img:hover { filter: none; opacity: 1; }

.fx-marquee__text { color: var(--f-muted); font-size: calc(22px * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); letter-spacing: calc(-.02em + var(--f-head-ls, 0em)); white-space: nowrap; font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

@keyframes fx-marquee {
    to { transform: translateX(-50%); }
}

/* Fotokaart */
.fx-photo { position: relative; height: 460px; margin: 0; overflow: hidden; border-radius: var(--f-r-l); background: var(--f-surface); }

.fx-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--f-ease); }

.fx-photo:hover img { transform: scale(1.03); }

.fx-glass {
    position: absolute;
    left: 20px;
    bottom: 20px;
    max-width: min(360px, calc(100% - 40px));
    padding: 22px;
    border-radius: var(--f-r-m);
    text-align: left;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}

.fx-glass--dark { background: rgb(18 18 22 / 46%); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%); }

.fx-glass--light { background: rgb(255 255 255 / 72%); color: var(--f-ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 60%); }

.fx-photo--bottom-right .fx-glass { left: auto; right: 20px; }

.fx-photo--top-left .fx-glass { bottom: auto; top: 20px; }

.fx-photo--bottom-full .fx-glass { right: 20px; max-width: none; }

.fx-glass__title { margin: 0 0 6px; font-size: calc(20px * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); letter-spacing: calc(-.01em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-glass__text { margin: 0; font-size: 14.5px; line-height: 1.55; opacity: .82; }

.fx-glass .fx-btn { margin-top: 16px; }

.fx-glass--dark .fx-btn--light { --fx-btn-bg: rgb(255 255 255 / 14%); --fx-btn-fg: #fff; --fx-btn-bd: rgb(255 255 255 / 20%); box-shadow: none; }

/* Voortgangsbalken */
.fx-bars__title { margin: 0 0 18px; font-size: 15px; font-weight: 600; }

.fx-bar + .fx-bar { margin-top: 18px; }

.fx-bar__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 14px; font-weight: 600; }

.fx-bar__track { height: 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--f-ink) 8%, transparent); }

.fx-card--surface .fx-bar__track { background: var(--f-raised); }

.fx-bar__fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--f-accent), color-mix(in srgb, var(--f-accent) 55%, #fff));
    transition: width 1.3s var(--f-ease);
}

.fx-bar--muted .fx-bar__fill { background: color-mix(in srgb, var(--f-ink) 28%, transparent); }

.fx-bar--muted .fx-bar__head { color: var(--f-muted); }

.fx-bars.is-visible .fx-bar__fill, .fx-no-js .fx-bar__fill { width: var(--fx-value); }

/* Lijst */
.fx-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; text-align: left; }

@media (min-width: 600px) {
    .fx-list--cols-2 { grid-template-columns: 1fr 1fr; column-gap: 28px; }
}

.fx-list__item { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; font-weight: 500; line-height: 1.45; }

.fx-list__mark {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    margin-top: -1px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--f-accent) 14%, #fff);
    color: var(--f-accent);
}

.fx-list--dark .fx-list__mark { background: var(--f-ink); color: var(--f-bg); }

.fx-list--soft .fx-list__mark { background: var(--f-surface); color: var(--f-ink); }

.fx-list__mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.fx-list__mark i { font-size: 11px; }

/* Eigen iconen van Font Awesome zijn gevuld, geen lijntekening zoals het vinkje */
.fx-list__mark svg.e-font-icon-svg { fill: currentColor; stroke: none; }

/* Veelgestelde vragen */
.fx-faq { text-align: left; }

.fx-faq__item + .fx-faq__item { margin-top: 10px; }

.fx-faq--surface .fx-faq__item { border-radius: var(--f-r-m); background: var(--f-surface); }

.fx-faq--lines .fx-faq__item { border-bottom: 1px solid var(--f-line); }

.fx-faq--lines .fx-faq__item + .fx-faq__item { margin-top: 0; }

.fx-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    font-size: 17px;
    font-weight: var(--f-head-w, 600);
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
    font-family: var(--f-font-head, inherit);
}

.fx-faq--lines .fx-faq__q { padding-inline: 0; }

.fx-faq__q::-webkit-details-marker { display: none; }

.fx-faq__toggle { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--f-raised); }

.fx-faq--lines .fx-faq__toggle { background: var(--f-surface); }

.fx-faq__toggle::before, .fx-faq__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
    border-radius: 2px;
    background: var(--f-ink);
    transition: transform .25s var(--f-ease);
}

.fx-faq__toggle::after { transform: rotate(90deg); }

.fx-faq__item[open] .fx-faq__toggle::after { transform: rotate(0); }

.fx-faq__a { padding: 0 22px 20px; color: var(--f-muted); font-size: 16px; line-height: 1.65; }

.fx-faq--lines .fx-faq__a { padding-inline: 0; }

.fx-faq__a > :last-child { margin-bottom: 0; }

/* Getuigenis */
.fx-quote { display: flex; flex-direction: column; margin: 0; text-align: left; }

.fx-quote__stars { display: flex; gap: 2px; margin: 0 0 16px; }

.fx-quote__stars svg { width: 18px; height: 18px; fill: color-mix(in srgb, var(--f-ink) 15%, transparent); }

.fx-quote__stars svg.is-on { fill: #f5a524; }

.fx-quote__text { flex: 1; margin: 0 0 24px; font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; }

.fx-quote__text p { margin: 0; }

.fx-quote__who { display: flex; align-items: center; gap: 12px; }

.fx-quote__who img, .fx-quote__initial { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; }

.fx-quote__initial { display: grid; place-items: center; background: var(--f-accent); color: var(--f-on-accent, #fff); font-weight: 700; }

.fx-quote__who strong { display: block; font-size: 15px; }

.fx-quote__who small { display: block; color: var(--f-muted); font-size: 14px; }

.fx-card--dark .fx-quote__who small { color: rgb(255 255 255 / 66%); }

/* Video in een lichtbak */
.fx-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgb(8 8 10 / 82%);
    animation: fx-fade .25s;
}

.fx-lightbox__frame { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; }

.fx-lightbox__frame iframe, .fx-lightbox__frame video { width: 100%; height: 100%; border: 0; border-radius: var(--f-r-m); background: #000; }

.fx-lightbox__close {
    position: absolute;
    top: -54px;
    right: 0;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--f-raised);
    color: var(--f-ink);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

@keyframes fx-fade {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-marquee__track { animation: none; }

    .fx-hero__down { animation: none; }

    .fx-rotate__word, .fx-bar__fill { transition: none; }
}

/* Vlak voor een container, volgt de hoeken uit de Customizer */
.e-con.fx-panel { border-radius: var(--f-r-l); }

.e-con.fx-panel--dark { background: var(--f-dark); color: #fff; }

/* In een donker paneel keren de kleuren om: koppen en tekst licht, donkere knoppen worden wit */
.e-con.fx-panel--dark { --f-ink: #fff; --f-bg: var(--f-dark); --f-muted: rgb(255 255 255 / 66%); --f-surface: rgb(255 255 255 / 8%); --f-raised: rgb(255 255 255 / 10%); --f-line: rgb(255 255 255 / 12%); }

/* Brede blokken vullen hun kolom, ook als die kolom haar inhoud centreert */
:is(.elementor-widget-forma-cta, .elementor-widget-forma-before-after, .elementor-widget-forma-hotspots, .elementor-widget-forma-map, .elementor-widget-forma-video, .elementor-widget-forma-image-slider, .elementor-widget-forma-compare-table) { width: 100%; }

/* Schuift iets opzij weg, dan vervaagt de rand als hint */
.fx-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }

.e-con.fx-panel--surface { background: var(--f-surface); }

/* Scrolleffecten; alleen actief als JavaScript draait */
.fx-motion [data-fx-reveal] {
    transition: opacity .9s var(--f-ease), transform .9s var(--f-ease), filter .9s var(--f-ease), clip-path 1s var(--f-ease);
    transition-delay: var(--fx-delay, 0ms);
}

.fx-motion [data-fx-reveal]:not(.is-in) { opacity: 0; }

.fx-motion [data-fx-reveal="fade-up"]:not(.is-in) { transform: translateY(36px); }

.fx-motion [data-fx-reveal="blur-in"]:not(.is-in) { filter: blur(14px); transform: translateY(12px); }

.fx-motion [data-fx-reveal="scale-in"]:not(.is-in) { transform: scale(.94); }

.fx-motion [data-fx-reveal="slide-left"]:not(.is-in) { transform: translateX(48px); }

.fx-motion [data-fx-reveal="slide-right"]:not(.is-in) { transform: translateX(-48px); }

.fx-motion [data-fx-reveal="clip-up"]:not(.is-in) { opacity: 1; clip-path: inset(100% 0 0 0); }

.fx-motion [data-fx-reveal="clip-up"] { clip-path: inset(0 0 0 0); }

[data-fx-parallax] { will-change: translate; }

/* Tekst die oplicht bij scrollen */
.fx-reveal-text {
    margin: 0;
    max-width: 22ch;
    font-size: calc(clamp(30px, 4.6vw, 60px) * var(--f-head-scale, 1));
    font-weight: var(--f-head-w, 600);
    line-height: calc(1.15 * var(--f-head-lh, 1));
    letter-spacing: calc(-.03em + var(--f-head-ls, 0em));
    margin-left: var(--fx-ml, 0);
    margin-right: var(--fx-mr, auto);
    font-family: var(--f-font-head, inherit);
    text-transform: var(--f-head-case, none);
}

.fx-reveal-text--wide { max-width: 32ch; }

.fx-reveal-text__w { color: color-mix(in srgb, var(--f-ink) 18%, var(--f-bg)); transition: color .35s; }

.fx-reveal-text__w.is-lit, html:not(.fx-motion) .fx-reveal-text__w { color: inherit; }

/* Foto die openvouwt bij scrollen */
.fx-scroll-image {
    --fx-p: 1;
    --fx-start: 14%;
    overflow: hidden;
    border-radius: var(--f-r-l);
}

.fx-motion .fx-scroll-image { --fx-p: 0; }

.fx-scroll-image__frame {
    position: relative;
    height: var(--fx-h, 80vh);
    overflow: hidden;
    border-radius: calc(var(--f-r-l) * 1.6 * (1 - var(--fx-p)) + var(--f-r-l) * var(--fx-p));
    clip-path: inset(0 calc(var(--fx-start) * (1 - var(--fx-p))) round calc(var(--f-r-l) * 1.4));
}

.fx-scroll-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.18 - .18 * var(--fx-p))); }

.fx-scroll-image__caption {
    position: absolute;
    left: 50%;
    bottom: 32px;
    z-index: 1;
    max-width: calc(100% - 40px);
    margin: 0;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgb(255 255 255 / 85%);
    color: var(--f-ink);
    font-size: 14px;
    font-weight: 600;
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Horizontaal scrollen */
.fx-hscroll { position: relative; }

.fx-hscroll__sticky { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; overflow: hidden; padding: 96px 0 48px; }

.fx-hscroll__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; width: 100%; max-width: var(--f-container, 1200px); margin: 0 auto 40px; padding: 0 20px; }

.fx-hscroll__head .fx-heading { margin: 0; }

.fx-hscroll__bar { width: 160px; height: 4px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--f-ink) 10%, transparent); }

.fx-hscroll__bar span { display: block; width: 100%; height: 100%; background: var(--f-ink); transform: scaleX(var(--fx-p, 0)); transform-origin: left; }

.fx-hscroll__track {
    display: flex;
    gap: 20px;
    width: max-content;
    padding: 0 max(20px, calc((100vw - var(--f-container, 1200px)) / 2 + 20px));
    will-change: transform;
}

.fx-hscroll__item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: min(440px, 78vw);
    height: min(56vh, 520px);
    overflow: hidden;
    padding: 24px;
    border-radius: var(--f-r-l);
    background: var(--f-surface);
    color: #fff;
    text-decoration: none;
}

.fx-hscroll__item img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--f-ease); }

.fx-hscroll__item::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 62%)); }

.fx-hscroll__item:hover img { transform: scale(1.04); }

.fx-hscroll__item > :not(img) { position: relative; z-index: 1; }

.fx-hscroll__tag { align-self: flex-start; margin-bottom: auto; }

.fx-hscroll__title { margin: 0 0 6px; color: #fff; font-size: calc(24px * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); letter-spacing: calc(-.02em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-hscroll__text { margin: 0; color: rgb(255 255 255 / 80%); font-size: 15px; }

@media (max-width: 767px) {
    .fx-hscroll__sticky { position: static; min-height: 0; padding: 0; }

    .fx-hscroll__track { width: auto; overflow-x: auto; padding: 0 20px 40px; margin-bottom: -32px; scroll-snap-type: x mandatory; scrollbar-width: none; }

    .fx-hscroll__track::-webkit-scrollbar { display: none; }

    .fx-hscroll__item { flex: none; scroll-snap-align: start; height: 420px; }

    .fx-hscroll__bar { display: none; }
}

/* Gestapelde kaarten */
.fx-stack { display: grid; gap: 24px; }

.fx-stack__card {
    --fx-shrink: 1;
    --fx-dim: 0;
    position: sticky;
    top: calc(110px + var(--fx-i, 0) * 18px);
    display: grid;
    gap: 32px;
    min-height: 420px;
    padding: 40px;
    border-radius: var(--f-r-l);
    background: var(--f-surface);
    box-shadow: 0 -1px 0 var(--f-line), 0 -18px 40px -24px rgb(14 15 18 / 25%);
    transform: scale(var(--fx-shrink));
    transform-origin: top center;
}

.fx-stack__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: var(--fx-dim); pointer-events: none; }

.fx-stack__card--dark { background: var(--f-dark); color: #fff; }

.fx-stack__card--accent { background: var(--f-accent); color: var(--f-on-accent, #fff); }

@media (min-width: 900px) {
    .fx-stack__card { grid-template-columns: 1fr 1fr; align-items: center; padding: 48px; }
}

.fx-stack__title { margin: 14px 0 12px; font-size: calc(clamp(26px, 3vw, 38px) * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); letter-spacing: calc(-.025em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-stack__text { margin: 0 0 22px; color: var(--f-muted); font-size: 16px; }

.fx-stack__card--dark .fx-stack__text, .fx-stack__card--accent .fx-stack__text { color: rgb(255 255 255 / 72%); }

.fx-stack__card--dark .fx-badge, .fx-stack__card--accent .fx-badge { background: rgb(255 255 255 / 14%); color: #fff; }

.fx-stack__card--dark .fx-list__mark, .fx-stack__card--accent .fx-list__mark { background: rgb(255 255 255 / 16%); color: #fff; }

.fx-stack__media { position: relative; height: 100%; min-height: 260px; overflow: hidden; border-radius: var(--f-r-m); }

.fx-stack__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) {
    .fx-stack__card { position: relative; top: auto; min-height: 0; padding: 28px 22px; transform: none; }

    .fx-stack__card::after { display: none; }
}

/* Prijstabel */
.fx-pricing__switch {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 32px;
    padding: 4px;
    border-radius: var(--f-r-m);
    background: var(--f-surface);
}

.fx-pricing__switch button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--f-r-s);
    background: transparent;
    color: var(--f-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.fx-pricing__switch button.is-active { background: var(--f-raised); color: var(--f-ink); box-shadow: 0 1px 3px rgb(14 15 18 / 10%); }

.fx-pricing__switch .fx-badge { padding: 3px 8px; font-size: 11px; }

.fx-pricing__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: stretch; }

.fx-plan { display: flex; flex-direction: column; padding: 32px 28px; border-radius: var(--f-r-l); background: var(--f-surface); text-align: left; }

.fx-plan--highlight { background: var(--f-dark); color: #fff; box-shadow: 0 30px 60px -30px rgb(14 15 18 / 45%); }

.fx-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.fx-plan__name { margin: 0; font-size: 20px; font-weight: var(--f-head-w, 600); font-family: var(--f-font-head, inherit); }

.fx-plan__text { margin: 6px 0 0; color: var(--f-muted); font-size: 15px; }

.fx-plan--highlight .fx-plan__text, .fx-plan--highlight .fx-plan__note, .fx-plan--highlight .fx-plan__per { color: rgb(255 255 255 / 64%); }

.fx-plan__price { display: flex; align-items: baseline; gap: 4px; margin: 28px 0 0; font-size: calc(52px * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); line-height: calc(1 * var(--f-head-lh, 1)); letter-spacing: calc(-.035em + var(--f-head-ls, 0em)); font-variant-numeric: tabular-nums; font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-plan__cur { font-size: 26px; }
.fx-plan__old { align-self: center; margin-right: 10px; color: var(--f-muted); font-size: 20px; font-weight: 500; letter-spacing: 0; text-decoration-thickness: 2px; }
.fx-plan__old:empty { display: none; }
.fx-plan--highlight .fx-plan__old { color: rgb(255 255 255 / 64%); }

.fx-plan__per { margin-left: 2px; color: var(--f-muted); font-size: 15px; font-weight: 500; letter-spacing: 0; }

.fx-plan__note { margin: 8px 0 24px; color: var(--f-muted); font-size: 13px; }

.fx-plan .fx-btn { width: 100%; }

.fx-plan__list { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--f-line); }

.fx-plan--highlight .fx-plan__list { border-color: rgb(255 255 255 / 14%); }

.fx-plan--highlight .fx-list__mark { background: rgb(255 255 255 / 14%); color: #fff; }

.fx-plan__list .fx-list__item { font-size: 15px; }

/* Tabbladen */
.fx-tabs__list {
    display: flex;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 28px;
    padding: 4px;
    overflow-x: auto;
    border-radius: var(--f-r-m);
    background: var(--f-surface);
    scrollbar-width: none;
}

.fx-tabs--left .fx-tabs__list { margin-left: 0; }

.fx-tabs__tab {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--f-r-s);
    background: transparent;
    color: var(--f-muted);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.fx-tabs__tab[aria-selected="true"] { background: var(--f-raised); color: var(--f-ink); box-shadow: 0 1px 3px rgb(14 15 18 / 10%); }

.fx-tabs__tab svg { width: 16px; height: 16px; fill: currentColor; }

.fx-tabs__panel { display: grid; gap: 32px; align-items: center; padding: 32px; border-radius: var(--f-r-l); background: var(--f-surface); text-align: left; animation: fx-fade .35s; }

.fx-tabs__panel[hidden] { display: none; }

@media (min-width: 900px) {
    .fx-tabs__panel { grid-template-columns: 1fr 1.1fr; padding: 48px; }
}

.fx-tabs__heading { margin: 0 0 14px; font-size: calc(clamp(24px, 2.6vw, 32px) * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); letter-spacing: calc(-.02em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-tabs__text { color: var(--f-muted); font-size: 16px; line-height: 1.65; }

.fx-tabs__text ul { padding-left: 18px; }

.fx-tabs__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--f-r-m); }

/* Stappen */
.fx-steps { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; text-align: left; }

.fx-steps--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.fx-step { position: relative; }

.fx-steps--row .fx-step__marker { position: relative; margin-bottom: 22px; }

.fx-steps--row .fx-step:not(:last-child) .fx-step__marker::after {
    content: "";
    position: absolute;
    top: 24px;
    left: 60px;
    right: -16px;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--f-line) 0 6px, transparent 6px 12px);
}

.fx-step .fx-icon { background: var(--f-surface); box-shadow: none; }

.fx-step__label { margin: 0 0 6px; color: var(--f-accent); font-size: 13px; font-weight: 700; }

.fx-step__title { margin: 0 0 8px; font-size: 19px; font-weight: var(--f-head-w, 600); font-family: var(--f-font-head, inherit); }

.fx-step__text { margin: 0; color: var(--f-muted); font-size: 15px; }

.fx-steps--timeline { gap: 0; }

.fx-steps--timeline .fx-step { display: grid; grid-template-columns: 48px 1fr; gap: 22px; padding-bottom: 36px; }

.fx-steps--timeline .fx-step:not(:last-child)::before { content: ""; position: absolute; top: 56px; bottom: 8px; left: 23.5px; width: 1px; background: var(--f-line); }

.fx-steps--timeline .fx-step__body { padding-top: 10px; }

@media (max-width: 599px) {
    .fx-steps--row .fx-step__marker::after { display: none; }
}

/* Teamlid */
.fx-team { margin: 0; text-align: left; }

.fx-team__photo { position: relative; overflow: hidden; border-radius: var(--f-r-l); background: var(--f-surface); }

.fx-team__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--f-ease); }

.fx-team:hover .fx-team__photo img { transform: scale(1.04); }

.fx-team__links { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s var(--f-ease); }

.fx-team:hover .fx-team__links, .fx-team:focus-within .fx-team__links { opacity: 1; transform: none; }

@media (hover: none) {
    .fx-team__links { opacity: 1; transform: none; }
}

.fx-team__links a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--f-r-s); background: var(--f-raised); color: var(--f-ink); }

.fx-team__links svg { width: 17px; height: 17px; fill: currentColor; }

.fx-team__links svg[fill="none"] { fill: none; }

.fx-team__body { padding-top: 14px; }

.fx-team__name { margin: 0; font-size: 18px; font-weight: var(--f-head-w, 600); font-family: var(--f-font-head, inherit); }

.fx-team__role { margin: 2px 0 0; color: var(--f-muted); font-size: 15px; }

.fx-team__bio { margin: 10px 0 0; color: var(--f-muted); font-size: 14px; }

/* Galerij */
.fx-gallery { --fx-cols: 3; --fx-ratio: 4/3; display: grid; gap: 14px; grid-template-columns: repeat(var(--fx-cols), minmax(0, 1fr)); }

.fx-gallery__item { position: relative; display: block; margin: 0; overflow: hidden; border-radius: var(--f-r-m); background: var(--f-surface); aspect-ratio: var(--fx-ratio); }

.fx-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--f-ease); }

a.fx-gallery__item:hover img { transform: scale(1.05); }

a.fx-gallery__item::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 36px;
    height: 36px;
    border-radius: var(--f-r-s);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0f12' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 16px no-repeat;
    opacity: 0;
    transition: opacity .25s;
}

a.fx-gallery__item:hover::after, a.fx-gallery__item:focus-visible::after { opacity: 1; }

@media (min-width: 768px) {
    .fx-gallery--feature .fx-gallery__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

/* Op gsm: de eerste foto over de volle breedte, en geen eenzame foto onderaan */
@media (max-width: 767px) {
    .fx-gallery--feature .fx-gallery__item:first-child { grid-column: 1 / -1; }

    .fx-gallery--feature .fx-gallery__item:last-child:nth-child(even) { grid-column: 1 / -1; }
}

.fx-lightbox--gallery { padding: 64px 72px; }

.fx-lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; margin: 0; }

.fx-lightbox__figure img { max-width: 100%; max-height: calc(100dvh - 160px); border-radius: var(--f-r-m); object-fit: contain; }

.fx-lightbox__figure figcaption { color: rgb(255 255 255 / 80%); font-size: 14px; }

.fx-lightbox--gallery .fx-lightbox__close { position: fixed; top: 16px; right: 16px; }

.fx-lightbox__nav {
    position: fixed;
    top: 50%;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 14%);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.fx-lightbox__nav[data-dir="-1"] { left: 12px; }

.fx-lightbox__nav[data-dir="1"] { right: 12px; }

@media (max-width: 599px) {
    .fx-lightbox--gallery { padding: 64px 12px; }

    .fx-lightbox__nav { top: auto; bottom: 16px; transform: none; }
}

/* Voor en na */
.fx-compare { --fx-pos: 50%; position: relative; overflow: hidden; border-radius: var(--f-r-l); background: var(--f-surface); user-select: none; }

.fx-compare__after, .fx-compare__before { position: absolute; inset: 0; }

.fx-compare img { width: 100%; height: 100%; object-fit: cover; }

.fx-compare__before { clip-path: inset(0 calc(100% - var(--fx-pos)) 0 0); }

.fx-compare__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--fx-pos);
    width: 2px;
    background: var(--f-raised);
    transform: translateX(-50%);
    pointer-events: none;
}

.fx-compare__handle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    padding: 11px;
    border-radius: 50%;
    background: var(--f-raised);
    fill: none;
    stroke: var(--f-ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    box-shadow: var(--f-shadow);
    transform: translate(-50%, -50%);
}

.fx-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

.fx-compare__range:focus-visible + * , .fx-compare:focus-within .fx-compare__handle svg { outline: 2px solid var(--f-accent); outline-offset: 2px; }

.fx-compare__label { position: absolute; top: 14px; padding: 5px 10px; border-radius: 999px; background: rgb(0 0 0 / 45%); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; }

.fx-compare__label--before { left: 14px; }

.fx-compare__label--after { right: 14px; }

/* Video */
.fx-video { position: relative; height: 560px; overflow: hidden; border-radius: var(--f-r-l); background: var(--f-dark); }

.fx-video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }

.fx-video__play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 35%));
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.fx-video__play .fx-play { margin-bottom: 14px; }

.fx-video__play:hover .fx-play { transform: scale(1.06); }

.fx-video__label { font-size: 16px; font-weight: 600; }

.fx-video__label small { opacity: .7; font-weight: 500; }

/* Kaart */
.fx-map { height: 420px; overflow: hidden; border-radius: var(--f-r-l); background: var(--f-surface); }

/* Kolom vullen: zo hoog als de kolom ernaast, op gsm een vaste hoogte */
.fx-map--fill { height: 100%; min-height: 320px; }

.elementor-widget-forma-map:has(.fx-map--fill) { flex: 1 1 auto; align-self: stretch; }

.fx-map__consent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; padding: 24px; text-align: center; }

.fx-map__consent > svg { width: 36px; height: 36px; margin-bottom: 6px; color: var(--f-accent); }

.fx-map__address { margin: 0; font-size: 18px; font-weight: 600; }

.fx-map__text { max-width: 44ch; margin: 0 0 12px; color: var(--f-muted); font-size: 14px; }

.fx-map .fx-actions { justify-content: center; }

.fx-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Contactgegevens */
.fx-info { display: grid; gap: 22px; margin: 0; list-style: none; text-align: left; }

.fx-info__row { display: flex; align-items: flex-start; gap: 16px; }

.fx-info .fx-icon { width: 44px; height: 44px; font-size: 17px; }

.fx-info__label { display: block; color: var(--f-muted); font-size: 13px; font-weight: 600; }

.fx-info__value { display: block; color: var(--f-ink); font-size: 16px; font-weight: 600; text-decoration: none; }

a.fx-info__value:hover { color: var(--f-accent); }

/* Actieblok */
.fx-cta { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; padding: clamp(56px, 8vw, 96px) clamp(22px, 5vw, 64px); border-radius: var(--f-r-l); background: var(--f-dark); color: #fff; text-align: var(--fx-align, center); }

.fx-cta--accent { background: var(--f-accent); }

.fx-cta--gradient { background: radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--f-accent) 90%, #fff), transparent 60%), radial-gradient(70% 100% at 100% 100%, #ff8a5c, transparent 60%), var(--f-dark); }

.fx-cta__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }

.fx-cta--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / 35%), rgb(0 0 0 / 60%)); }

.fx-cta__inner { max-width: 760px; margin-left: var(--fx-ml, auto); margin-right: var(--fx-mr, auto); }

.fx-cta__title { margin: 0; color: inherit; font-size: calc(clamp(26px, 8cqi, 56px) * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); line-height: calc(1.08 * var(--f-head-lh, 1)); letter-spacing: calc(-.03em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-cta__text { max-width: 54ch; margin: 18px var(--fx-mr, auto) 0 var(--fx-ml, auto); color: rgb(255 255 255 / 76%); font-size: 18px; }

.fx-cta .fx-actions { margin-top: 32px; }

.fx-cta .fx-btn--outline { --fx-btn-fg: #fff; --fx-btn-bd: rgb(255 255 255 / 35%); }

/* Carrousel */
.fx-slider { --fx-per: 2; position: relative; }

.fx-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--fx-per) - 1) * 20px) / var(--fx-per));
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    /* Een schuifvak knipt alles af, ook schaduwen: ruimte erbinnen, dezelfde ruimte ervan af. Opzij even breed als de tussenruimte, zodat de volgende kaart niet binnenpiept */
    margin: -16px -20px -48px;
    padding: 16px 20px 48px;
    scroll-padding-inline: 20px;
}

.fx-slider__track::-webkit-scrollbar { display: none; }

.fx-slider__slide { scroll-snap-align: start; margin: 0; }

.fx-slider .fx-quote__text { font-size: clamp(18px, 1.7vw, 21px); }

.fx-quote__mark { width: 30px; height: 22px; margin-bottom: 18px; fill: var(--f-accent); opacity: .85; }

.fx-slider__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }

.fx-slider.is-static .fx-slider__nav { display: none; }

.fx-slider__arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--f-line); border-radius: var(--f-r-s); background: var(--f-raised); color: var(--f-ink); cursor: pointer; }

.fx-slider__arrow:hover { background: var(--f-surface); }

.fx-slider__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.fx-slider__dots { display: flex; gap: 6px; }

.fx-slider__dots span { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--f-ink) 18%, transparent); transition: width .3s var(--f-ease), background-color .3s; }

.fx-slider__dots span.is-active { width: 22px; border-radius: 4px; background: var(--f-ink); }

/* Blogberichten */
.fx-posts { --fx-cols: 3; display: grid; gap: 24px; grid-template-columns: repeat(var(--fx-cols), minmax(0, 1fr)); }

.fx-post { position: relative; display: flex; flex-direction: column; text-align: left; }

.fx-post__media { overflow: hidden; border-radius: var(--f-r-l); background: var(--f-surface); aspect-ratio: 16 / 11; }

.fx-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--f-ease); }

.fx-post:hover .fx-post__media img { transform: scale(1.04); }

.fx-post__body { padding: 18px 2px 0; }

.fx-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; color: var(--f-muted); font-size: 13px; }

.fx-post__meta .fx-badge { padding: 4px 10px; font-size: 12px; }

.fx-post__title { margin: 0; font-size: calc(20px * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); line-height: calc(1.3 * var(--f-head-lh, 1)); letter-spacing: calc(-.015em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-post__title a { color: inherit; text-decoration: none; }

.fx-post:hover .fx-post__title a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

.fx-post__excerpt { margin: 10px 0 0; color: var(--f-muted); font-size: 15px; }

.fx-posts--featured { display: grid; gap: 24px; grid-template-columns: 1fr; }

@media (min-width: 900px) {
    .fx-posts--featured { grid-template-columns: 1.3fr 1fr; grid-template-rows: repeat(3, auto); }

    .fx-posts--featured .fx-post--large { grid-row: span 3; }

    .fx-posts--featured .fx-post:not(.fx-post--large) { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; }

    .fx-posts--featured .fx-post:not(.fx-post--large) .fx-post__media { aspect-ratio: 1; border-radius: var(--f-r-m); }

    .fx-posts--featured .fx-post:not(.fx-post--large) .fx-post__body { padding: 0; }
}

.fx-post--large .fx-post__title { font-size: calc(clamp(24px, 2.4vw, 32px) * var(--f-head-scale, 1)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

/* Portfolio */
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }

.fx-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--f-line);
    border-radius: var(--f-r-s);
    background: var(--f-raised);
    color: var(--f-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.fx-chip:hover { background: var(--f-surface); }

.fx-chip.is-active { border-color: var(--f-ink); background: var(--f-ink); color: var(--f-bg); }

.fx-projects { --fx-cols: 3; display: grid; gap: 28px 20px; grid-template-columns: repeat(var(--fx-cols), minmax(0, 1fr)); }

.fx-project { position: relative; text-align: left; animation: fx-fade .4s; }

.fx-project[hidden] { display: none; }

.fx-project__media { position: relative; overflow: hidden; border-radius: var(--f-r-l); background: var(--f-surface); aspect-ratio: 4 / 3; }

.fx-project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--f-ease); }

.fx-project:hover .fx-project__media img { transform: scale(1.05); }

.fx-project__arrow {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--f-raised);
    color: var(--f-ink);
    opacity: 0;
    transform: scale(.8) rotate(-20deg);
    transition: opacity .3s, transform .4s var(--f-ease);
}

.fx-project:hover .fx-project__arrow, .fx-project:focus-within .fx-project__arrow { opacity: 1; transform: none; }

.fx-project__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.fx-project__body { padding: 16px 2px 0; }

.fx-project__title { margin: 0; font-size: calc(20px * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); letter-spacing: calc(-.015em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-project__title a { color: inherit; text-decoration: none; }

.fx-project__meta { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 0; color: var(--f-muted); font-size: 14px; }

.fx-portfolio__more { justify-content: center; margin-top: 40px; }

/* Formulier */
.fx-form { text-align: left; }

.fx-form__grid { display: grid; gap: 18px 16px; grid-template-columns: 1fr 1fr; }

.fx-field { grid-column: 1 / -1; }

.fx-field--half { grid-column: auto; }

@media (max-width: 599px) {
    .fx-field--half { grid-column: 1 / -1; }
}

.fx-field__label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }

.fx-field__label small { color: var(--f-muted); font-weight: 500; }

.fx-form input:not([type="checkbox"]), .fx-form select, .fx-form textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--f-ink) 16%, transparent);
    border-radius: var(--f-r-s);
    background: var(--f-raised);
    color: var(--f-ink);
    font: inherit;
    font-size: 16px;
    transition: border-color .2s, box-shadow .2s;
}

.fx-form textarea { min-height: 140px; resize: vertical; }

.fx-form input:focus, .fx-form select:focus, .fx-form textarea:focus { outline: 0; border-color: var(--f-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--f-accent) 16%, transparent); }

.fx-form [aria-invalid="true"] { border-color: #d92d20 !important; }

.fx-field__error { min-height: 0; margin: 6px 0 0; color: #b42318; font-size: 13px; font-weight: 600; }

.fx-field__error:empty { display: none; }

.fx-field--check { margin-top: 18px; }

.fx-field--check label { display: flex; align-items: flex-start; gap: 10px; color: var(--f-muted); font-size: 14px; cursor: pointer; }

.fx-field--check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--f-accent); }

.fx-field--check a { color: var(--f-ink); }

.fx-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fx-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }

.fx-form__status { margin: 0; color: var(--f-muted); font-size: 14px; font-weight: 600; }

.fx-form__status[data-state="error"] { color: #b42318; }

.fx-form__done { display: flex; align-items: center; gap: 14px; padding: 8px 0; font-size: 17px; font-weight: 600; outline: 0; }

.fx-form__done p { margin: 0; }

.fx-form__done .fx-list__mark { width: 40px; height: 40px; }

.fx-form__done .fx-list__mark svg { width: 20px; height: 20px; }

/* Grotere tekst in de lopende band */
.fx-marquee--big .fx-marquee__text { color: var(--f-ink); font-size: calc(clamp(40px, 7vw, 96px) * var(--f-head-scale, 1)); letter-spacing: calc(-.04em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-marquee--big .fx-marquee__item:nth-child(even) .fx-marquee__text { color: transparent; -webkit-text-stroke: 1.5px var(--f-ink); }

/* Elementor zet elke afbeelding op height:auto en zonder hoeken; deze blokken vullen hun vak */
.elementor :is(.fx-hero__media, .fx-photo, .fx-scroll-image, .fx-hscroll__item, .fx-stack__media, .fx-video, .fx-team__photo, .fx-gallery__item, .fx-post__media, .fx-project__media, .fx-compare__after, .fx-compare__before, .fx-cta) img { height: 100%; max-width: none; }

.elementor :is(.fx-card__image, .fx-tabs__media) img { border-radius: var(--f-r-m); }

.elementor .fx-quote__who img { height: 44px; border-radius: 50%; }

.elementor .fx-marquee__item img { height: var(--fx-logo-h); max-width: none; }

.elementor .fh__logo img { max-width: none; }

/* Het grote eerste beeld volgt de rijen in plaats van ze uit te rekken */
.fx-gallery--feature .fx-gallery__item:first-child img { position: absolute; inset: 0; }

/* Standaardkolommen voor rasters buiten Elementor, zoals het portfolio-overzicht */
@media (max-width: 1024px) {
    .fx-projects--archive { --fx-cols: 2; }
}

@media (max-width: 640px) {
    .fx-projects--archive { --fx-cols: 1; }
}

@media (max-width: 599px) {
    .fx-hero__badge { max-width: 100%; font-size: 13px; text-align: left; }
}

/* Premium: typografie */
.fx-serif {
    font-family: var(--f-serif, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    margin-right: -.04em;
}

.fx-heading--serif .fx-heading__accent { color: inherit; font-family: var(--f-serif, Georgia, serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

.fx-hero__title { font-size: calc(clamp(40px, 7vw, 92px) * var(--f-head-scale, 1)); line-height: calc(1.02 * var(--f-head-lh, 1)); letter-spacing: calc(-.045em + var(--f-head-ls, 0em)); }

.fx-hero__title .fx-serif { letter-spacing: -.02em; }

/* Premium: knoppen met een pijltje dat meeschuift */
.f-interactions a.fx-btn:not(.fx-btn--icon):not(.fx-btn--link)::after,
.f-interactions a.fx-btn--link::after {
    content: "";
    width: 14px;
    height: 14px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .35s var(--f-ease);
}

.f-interactions a.fx-btn:hover::after { transform: translateX(3px); }

.f-interactions .fx-btn { transition: background-color .2s, border-color .2s, transform .35s var(--f-ease), translate .35s var(--f-ease); }

/* Premium: lichtvlek die de muis volgt */
@media (hover: hover) {
    .f-interactions :is(.fx-card--surface, .fx-card--white, .fx-card--outline, .fx-plan:not(.fx-plan--highlight), .fx-faq--surface .fx-faq__item):hover {
        background-image: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--f-accent) 9%, transparent), transparent 70%);
    }

    .f-interactions :is(.fx-card--dark, .fx-stack__card--dark):hover {
        background-image: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 7%), transparent 70%);
    }
}

/* Premium: fijne korrel op donkere en gekleurde vlakken */
.f-grain :is(.fx-card--dark, .fx-plan--highlight, .fx-cta, .fx-hero--image) { isolation: isolate; }

.f-grain :is(.fx-card--dark, .fx-plan--highlight, .fx-cta)::after,
.f-grain :is(.fx-stack__card--dark, .fx-stack__card--accent)::before,
.f-grain .fx-hero--image .fx-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .14;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.fx-plan--highlight, .fx-card--dark { position: relative; }

/* Premium: dunne kleurverlooprand */
.f-grain .fx-plan--highlight {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--f-dark), var(--f-dark)) padding-box,
        linear-gradient(140deg, color-mix(in srgb, var(--f-accent) 85%, #fff), rgb(255 255 255 / 8%) 45%, #ff8a5c) border-box;
    /* Ook als Elementor de achtergrondafbeelding nog lui laadt, blijft het vlak donker */
    background-color: var(--f-dark);
}

.f-grain .fx-hero__badge {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--f-raised), var(--f-raised)) padding-box,
        linear-gradient(120deg, color-mix(in srgb, var(--f-accent) 55%, transparent), var(--f-line), color-mix(in srgb, #ff8a5c 55%, transparent)) border-box;
    box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--f-accent) 35%, transparent);
}

.f-grain .fx-hero--image .fx-hero__badge {
    background:
        linear-gradient(rgb(255 255 255 / 14%), rgb(255 255 255 / 14%)) padding-box,
        linear-gradient(120deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 10%), rgb(255 255 255 / 40%)) border-box;
}

.f-grain .fx-card--white { box-shadow: 0 0 0 1px var(--f-line), 0 1px 1px rgb(14 15 18 / 4%), 0 6px 14px -4px rgb(14 15 18 / 6%), 0 24px 48px -18px rgb(14 15 18 / 14%); }

/* Premium: koppen die woord voor woord binnenkomen */
.fx-motion .f-page-fade .fx-hero__title:not(.is-split),
.fx-motion .f-page-fade .f-head__title:not(.is-split) { opacity: 0; animation: fx-show 0s 2s forwards; }

@keyframes fx-show {
    to { opacity: 1; }
}

.fx-w { display: inline-block; overflow: hidden; padding: 0 .08em .12em; margin: 0 -.08em -.12em; vertical-align: top; }

.fx-w > span { display: inline-block; transform: translateY(105%); animation: fx-rise .9s var(--f-ease) forwards; animation-delay: var(--d, 0ms); }

@keyframes fx-rise {
    to { transform: none; }
}

.fx-motion .f-page-fade :is(.fx-hero__badge, .fx-hero__text, .fx-hero .fx-actions, .fx-play, .f-head__intro, .f-byline, .f-facts) { opacity: 0; transform: translateY(14px); animation: fx-in .8s var(--f-ease) forwards; animation-delay: var(--fx-intro, 450ms); }

.fx-motion .f-page-fade .fx-hero .fx-actions { --fx-intro: 600ms; }

@keyframes fx-in {
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-w > span, .f-page-fade :is(.fx-hero__badge, .fx-hero__text, .fx-hero .fx-actions, .fx-play, .f-head__intro, .f-byline, .f-facts) { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Popups */
.fx-popup {
    --fx-popup-w: 560px;
    width: min(var(--fx-popup-w), calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: var(--f-r-l);
    background: var(--f-bg);
    color: var(--f-ink);
    box-shadow: 0 40px 80px -20px rgb(0 0 0 / 35%);
}

.fx-popup--s { --fx-popup-w: 420px; }

.fx-popup--l { --fx-popup-w: 860px; }

.fx-popup[open] { animation: fx-pop .45s var(--f-ease); }

.fx-popup::backdrop { background: rgb(8 8 10 / 55%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fx-fade .3s; }

@keyframes fx-pop {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
}

.fx-popup--corner[open] { position: fixed; inset: auto 20px 20px auto; margin: 0; z-index: 300; box-shadow: 0 0 0 1px var(--f-line), 0 30px 60px -20px rgb(0 0 0 / 35%); }

@media (max-width: 599px) {
    .fx-popup--corner[open] { inset: auto 12px 12px 12px; width: auto; }
}

.fx-popup__close {
    position: sticky;
    top: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 12px 12px -52px auto;
    border: 0;
    border-radius: 50%;
    background: var(--f-surface);
    color: var(--f-ink);
    cursor: pointer;
}

.fx-popup__close:hover { background: color-mix(in srgb, var(--f-surface) 85%, var(--f-ink)); }

.fx-popup__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.fx-popup__body > .elementor > .e-con { --padding-top: 40px; --padding-right: 32px; --padding-bottom: 32px; --padding-left: 32px; }

@media (max-width: 599px) {
    .fx-popup__body > .elementor > .e-con { --padding-top: 36px; --padding-right: 20px; --padding-bottom: 22px; --padding-left: 20px; }
}

.fx-popup.is-preview { display: block; position: static; }

.forma-preview-popup { display: grid; place-items: center; min-height: 100vh; padding: 40px 16px; background: rgb(8 8 10 / 55%); }

/* Glas (Liquid Glass) voor de blokken; de tokens komen uit het thema */
:where(:root) {
    --g-tint: rgb(255 255 255 / 50%);
    --g-strong: rgb(255 255 255 / 74%);
    --g-sheen: linear-gradient(160deg, rgb(255 255 255 / 60%), rgb(255 255 255 / 14%) 38%, rgb(255 255 255 / 0%) 60%, rgb(255 255 255 / 20%));
    --g-edge: inset 0 1px 0 rgb(255 255 255 / 90%), inset 0 -1px 0 rgb(255 255 255 / 30%), inset 0 0 0 1px rgb(255 255 255 / 50%), inset 0 0 24px rgb(255 255 255 / 22%);
    --g-drop: 0 10px 34px -10px rgb(14 15 18 / 16%), 0 2px 6px rgb(14 15 18 / 5%);
    --g-blur: blur(24px) saturate(180%);
}

/* Grote vlakken */
.f-glass :is(.fx-card--surface, .fx-card--white, .fx-plan:not(.fx-plan--highlight), .fx-faq--surface .fx-faq__item, .fx-tabs__panel, .fx-map, .e-con.fx-panel--surface) {
    background-color: var(--g-tint);
    background-image: var(--g-sheen);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    box-shadow: var(--g-edge), var(--g-drop);
}

.f-glass .fx-card--white { background-color: var(--g-strong); }

/* Stapelkaarten liggen over elkaar; daar moet de onderste kaart niet doorschijnen */
.f-glass .fx-stack__card--surface {
    background-color: var(--g-strong);
    background-image: var(--g-sheen);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    box-shadow: var(--g-edge), 0 -18px 40px -24px rgb(14 15 18 / 25%);
}

/* Donkere vlakken krijgen getint donker glas */
.f-glass :is(.fx-card--dark, .fx-stack__card--dark, .e-con.fx-panel--dark) {
    background-color: color-mix(in srgb, var(--f-dark) 82%, transparent);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), inset 0 0 0 1px rgb(255 255 255 / 8%), var(--g-drop);
}

/* Grote donkere blokken zoals een footer: dichter glas, anders oogt het grijs op een lichte pagina */
.f-glass .e-con.fx-panel--dark { background-color: color-mix(in srgb, var(--f-dark) 95%, transparent); }

/* Kleine glazen onderdelen */
.f-glass :is(.fx-tabs__list, .fx-pricing__switch, .fx-chip, .fx-btn--light, .fx-btn--soft, .fx-badge--white, .fx-badge--soft, .fx-slider__arrow, .fx-faq__toggle) {
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
}

.f-glass :is(.fx-tabs__list, .fx-pricing__switch) { background: var(--g-sheen), var(--g-tint); box-shadow: var(--g-edge), 0 0 0 1px var(--f-line); }

.f-glass :is(.fx-tabs__tab[aria-selected="true"], .fx-pricing__switch button.is-active) { background: var(--g-sheen), var(--g-strong); box-shadow: var(--g-edge), 0 2px 8px rgb(14 15 18 / 8%); }

.f-glass :is(.fx-chip:not(.is-active), .fx-slider__arrow, .fx-badge--white, .fx-badge--soft) { border-color: transparent; background: var(--g-sheen), var(--g-tint); box-shadow: var(--g-edge), 0 0 0 1px var(--f-line), 0 2px 8px -2px rgb(14 15 18 / 10%); }

.f-glass .fx-btn--light { --fx-btn-bd: transparent; background: var(--g-sheen), var(--g-strong); box-shadow: var(--g-edge), 0 4px 14px -6px rgb(14 15 18 / 18%); }

.f-glass .fx-btn--soft { background: var(--g-sheen), var(--g-tint); box-shadow: var(--g-edge); }

.f-glass a.fx-btn--light:hover, .f-glass a.fx-btn--soft:hover { background: var(--g-sheen), var(--g-strong); }

.f-glass :is(.fx-icon, .fx-faq__toggle) { background: var(--g-sheen), var(--g-strong); box-shadow: var(--g-edge), 0 4px 12px -4px rgb(14 15 18 / 14%); }

.f-glass .fx-card--dark .fx-icon { background: rgb(255 255 255 / 10%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%); }

.f-glass .fx-bar__track { background: rgb(255 255 255 / 45%); box-shadow: inset 0 1px 2px rgb(14 15 18 / 8%); }

/* Fotokaartje en lichtbak: echte glasrand */
.f-glass .fx-glass { box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%), inset 0 0 0 1px rgb(255 255 255 / 14%), 0 10px 30px -10px rgb(0 0 0 / 35%); }

/* Popups */
.f-glass .fx-popup {
    background: var(--g-sheen), var(--g-strong);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    box-shadow: var(--g-edge), 0 40px 80px -20px rgb(0 0 0 / 35%);
}

.f-glass .fx-popup__close { background: var(--g-tint); box-shadow: var(--g-edge); }

/* Formuliervelden blijven goed leesbaar, met een lichte glasrand */
.f-glass .fx-form :is(input:not([type="checkbox"]), select, textarea) { background: var(--g-strong); border-color: color-mix(in srgb, var(--f-ink) 12%, transparent); box-shadow: inset 0 1px 2px rgb(14 15 18 / 6%); }

:root[data-theme=dark] .f-glass .fx-form :is(input:not([type="checkbox"]), select, textarea) { border-color: rgb(255 255 255 / 12%); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .f-glass .fx-form :is(input:not([type="checkbox"]), select, textarea) { border-color: rgb(255 255 255 / 12%); }
}

/* Zonder vervaging in de browser: iets minder doorschijnend, zodat tekst leesbaar blijft */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .f-glass :is(.fx-card--surface, .fx-plan, .fx-faq__item, .fx-tabs__panel, .fx-popup) { background-color: var(--g-strong); }
}

/* De hero laat de kleurgloed van de pagina doorlopen; zijn eigen gloed vervaagt naar de randen, zonder harde lijn */
.f-glass :is(.fx-hero--soft, .fx-hero--plain) { background: transparent; }

.f-glass .fx-hero__glow { background-color: transparent; -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 55%, transparent); mask-image: radial-gradient(closest-side at 50% 50%, #000 55%, transparent); }

.f-glass .fx-hero--soft.fx-hero--fade::after, .f-glass .fx-hero--plain.fx-hero--fade::after { display: none; }

/* Op donkere vlakken blijven lichte knoppen en labels helder wit; glas zou ze grijs maken */
.f-glass :is(.fx-card--dark, .fx-plan--highlight, .fx-stack__card--dark, .fx-stack__card--accent, .fx-cta:not(.fx-cta--image), .e-con.fx-panel--dark) :is(.fx-btn--light, .fx-badge--white) {
    --fx-btn-fg: #0e0f12;
    background: #fff;
    /* Vaste donkere tekst: in een donker paneel is --f-ink omgekeerd naar wit */
    color: #0e0f12;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 4px 14px -6px rgb(0 0 0 / 35%);
}

:root[data-theme=dark] .f-glass :is(.fx-card--dark, .fx-plan--highlight, .fx-stack__card--dark, .fx-stack__card--accent, .fx-cta:not(.fx-cta--image), .e-con.fx-panel--dark) :is(.fx-btn--light, .fx-badge--white) { color: #0e0f12; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .f-glass :is(.fx-card--dark, .fx-plan--highlight, .fx-stack__card--dark, .fx-stack__card--accent, .fx-cta:not(.fx-cta--image), .e-con.fx-panel--dark) :is(.fx-btn--light, .fx-badge--white) { color: #0e0f12; }
}

.f-glass .fx-chip:not(.is-active):hover { background: var(--g-sheen), var(--g-strong); }

.fx-chip:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }

/* Knop in een fotokaart met donker glas: zelf ook donker glas met witte tekst */
.f-glass .fx-glass--dark .fx-btn--light {
    background: rgb(255 255 255 / 16%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), inset 0 0 0 1px rgb(255 255 255 / 14%);
}

.f-glass .fx-glass--dark a.fx-btn--light:hover { background: rgb(255 255 255 / 24%); }

/* Bento-raster */
.fx-bento { --fx-row: 230px; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--fx-row); grid-auto-flow: dense; }

.fx-bento__tile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; overflow: hidden; padding: 24px; border-radius: var(--f-r-l); background: var(--f-surface); text-align: left; }

.fx-bento__tile--2x1 { grid-column: span 2; }

.fx-bento__tile--1x2 { grid-row: span 2; }

.fx-bento__tile--2x2 { grid-column: span 2; grid-row: span 2; }

.fx-bento__tile--dark { background: var(--f-dark); color: #fff; }

.fx-bento__tile--accent { background: var(--f-accent); color: var(--f-on-accent, #fff); }

.fx-bento__tile--image { justify-content: flex-end; background: var(--f-dark); color: #fff; }

.fx-bento__tile--image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 60%)); }

.elementor .fx-bento__bg, .fx-bento__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .8s var(--f-ease); }

.fx-bento__tile:hover .fx-bento__bg { transform: scale(1.04); }

.fx-bento__tile--dark .fx-icon, .fx-bento__tile--accent .fx-icon { background: rgb(255 255 255 / 14%); color: #fff; box-shadow: none; }

.fx-bento__stat { margin: 0 0 6px; font-size: calc(clamp(40px, 4.4vw, 64px) * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); line-height: calc(1 * var(--f-head-lh, 1)); letter-spacing: calc(-.04em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-bento__title { margin: 0; color: inherit; font-size: calc(20px * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); letter-spacing: calc(-.015em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-bento__tile--2x2 .fx-bento__title { font-size: calc(clamp(24px, 2.4vw, 32px) * var(--f-head-scale, 1)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-bento__title a { color: inherit; text-decoration: none; }

.fx-bento__text { margin: 6px 0 0; color: var(--f-muted); font-size: 15px; }

.fx-bento__tile:is(.fx-bento__tile--dark, .fx-bento__tile--accent, .fx-bento__tile--image) .fx-bento__text { color: rgb(255 255 255 / 75%); }

.f-glass .fx-bento__tile--surface { background-color: var(--g-tint); background-image: var(--g-sheen); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: var(--g-edge), var(--g-drop); }

@media (max-width: 1024px) {
    .fx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
    .fx-bento { grid-template-columns: 1fr; grid-auto-rows: minmax(var(--fx-row), auto); }

    .fx-bento__tile--2x1, .fx-bento__tile--2x2 { grid-column: auto; }

    .fx-bento__tile--1x2, .fx-bento__tile--2x2 { grid-row: auto; }
}

/* Logoraster */
.fx-logos { --fx-cols: 4; display: grid; gap: 12px; grid-template-columns: repeat(var(--fx-cols), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }

.fx-logos__item { display: grid; place-items: center; min-height: 96px; padding: 20px; border-radius: var(--f-r-m); }

.fx-logos__item a { display: grid; place-items: center; width: 100%; height: 100%; color: inherit; text-decoration: none; }

.fx-logos--cards .fx-logos__item { background: var(--f-surface); }

.f-glass .fx-logos--cards .fx-logos__item { background: var(--g-sheen), var(--g-tint); box-shadow: var(--g-edge), var(--g-drop); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }

/* Elk vakje tekent rechts en onder; de buitenste lijn van de laatste kolom en rij knippen we weg (2px, want rijhoogtes zijn vaak geen hele pixels) */
.fx-logos--lines { gap: 0; clip-path: inset(0 2px 2px 0); }

.fx-logos--lines .fx-logos__item { border-radius: 0; box-shadow: inset -1px -1px 0 var(--f-line); }

.elementor .fx-logos__item img, .fx-logos__item img { width: auto; max-width: 140px; height: auto; max-height: 40px; }

.fx-logos__name { color: var(--f-muted); font-size: 19px; font-weight: 600; letter-spacing: -.02em; text-align: center; text-wrap: balance; transition: color .3s; }

/* Op een smalle gsm minder binnenruimte en een kleinere naam, zodat namen van twee woorden op één regel passen */
@media (max-width: 480px) {
    .fx-logos__item { padding: 16px 10px; }

    .fx-logos__name { font-size: 17px; }
}

.fx-logos--gray img { filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s; }

.fx-logos--gray .fx-logos__item:hover img { filter: none; opacity: 1; }

.fx-logos__item:hover .fx-logos__name { color: var(--f-ink); }

/* Vergelijkingstabel */
.fx-cmp { overflow-x: auto; border-radius: var(--f-r-l); background: var(--f-surface); }

.f-glass .fx-cmp { background: var(--g-sheen), var(--g-tint); box-shadow: var(--g-edge), var(--g-drop); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }

.fx-cmp table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }

.fx-cmp :is(th, td) { padding: 16px 20px; border-bottom: 1px solid var(--f-line); text-align: center; }

.fx-cmp tbody tr:last-child :is(th, td) { border-bottom: 0; }

.fx-cmp th[scope="row"] { text-align: left; font-weight: 500; }

/* Op gsm schuift de tabel opzij; de eerste kolom blijft staan zodat je weet waar je bent */
@media (max-width: 767px) {
    .fx-cmp :is(th[scope="row"], thead th:first-child) { position: sticky; left: 0; z-index: 1; min-width: 150px; background: var(--f-raised); box-shadow: 1px 0 0 var(--f-line); }

    .fx-cmp :is(th, td) { padding: 14px 16px; }
}

.fx-cmp thead th { font-size: 16px; font-weight: 700; }

.fx-cmp .is-hl { background: color-mix(in srgb, var(--f-accent) 9%, transparent); }

.fx-cmp thead .is-hl { color: var(--f-accent); }

.fx-cmp__yes, .fx-cmp__no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }

.fx-cmp__yes { background: color-mix(in srgb, var(--f-accent) 16%, transparent); color: var(--f-accent); }

.fx-cmp__no { color: var(--f-muted); }

.fx-cmp svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Aftelklok */
.fx-count { display: flex; flex-wrap: wrap; gap: 12px; justify-content: var(--fx-align, left); }

.fx-count__part { display: grid; justify-items: center; gap: 4px; min-width: 84px; padding: 16px 12px; border-radius: var(--f-r-m); background: var(--f-surface); }

.fx-count--dark .fx-count__part { background: var(--f-dark); color: #fff; }

.fx-count--plain .fx-count__part { min-width: 0; padding: 0 8px; background: transparent; }

.f-glass .fx-count--surface .fx-count__part { background: var(--g-sheen), var(--g-tint); box-shadow: var(--g-edge), var(--g-drop); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }

.fx-count__num { font-size: calc(clamp(32px, 4vw, 48px) * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); line-height: calc(1 * var(--f-head-lh, 1)); letter-spacing: calc(-.03em + var(--f-head-ls, 0em)); font-variant-numeric: tabular-nums; font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-count__label { color: var(--f-muted); font-size: 13px; font-weight: 600; }

.fx-count--dark .fx-count__label { color: rgb(255 255 255 / 65%); }

.fx-count__done { margin: 0; font-size: 18px; font-weight: 600; }

/* Op gsm passen de vier vakjes naast elkaar, zonder een eenzame seconde op een tweede rij */
@media (max-width: 559.98px) {
    .fx-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

    .fx-count__part { min-width: 0; padding: 14px 4px; }

    .fx-count__num { font-size: calc(28px * var(--f-head-scale, 1)); }

    .fx-count__label { font-size: 12px; }
}

/* Openingsuren */
.fx-hours__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }

.fx-hours__title { margin: 0; font-size: 18px; font-weight: var(--f-head-w, 600); font-family: var(--f-font-head, inherit); }

.fx-hours__now { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }

.fx-hours__now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.fx-hours__now.is-open { background: rgb(22 163 74 / 14%); color: #15803d; }

.fx-hours__now.is-closed { background: rgb(220 38 38 / 12%); color: #b91c1c; }

:root[data-theme=dark] .fx-hours__now.is-open { color: #4ade80; }

:root[data-theme=dark] .fx-hours__now.is-closed { color: #f87171; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) .fx-hours__now.is-open { color: #4ade80; }

    :root:not([data-theme=light]) .fx-hours__now.is-closed { color: #f87171; }
}

.fx-hours__list { margin: 0; }

.fx-hours__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--f-line); font-size: 15px; }

.fx-hours__row:last-child { border-bottom: 0; }

.fx-hours__row dd { margin: 0; color: var(--f-muted); text-align: right; }

.fx-hours__row.is-today { font-weight: 700; }

.fx-hours__row.is-today dd { color: var(--f-ink); }

.fx-hours__note { margin: 12px 0 0; color: var(--f-muted); font-size: 13px; }

/* Prijslijst */
.fx-prices { display: grid; gap: 4px 48px; margin: 0; padding: 0; list-style: none; text-align: left; }

@media (min-width: 768px) {
    .fx-prices--two { grid-template-columns: 1fr 1fr; }
}

.fx-prices__item { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; }

.elementor .fx-prices__img, .fx-prices__img { flex: none; width: 56px; height: 56px; border-radius: var(--f-r-m); object-fit: cover; }

.fx-prices__body { flex: 1; min-width: 0; }

.fx-prices__line { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 17px; font-weight: 600; }

.fx-prices__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.fx-prices__name .fx-badge { padding: 3px 8px; font-size: 11px; }

.fx-prices__dots { flex: 1; min-width: 24px; border-bottom: 2px dotted color-mix(in srgb, var(--f-ink) 22%, transparent); transform: translateY(-4px); }

.fx-prices__price { white-space: nowrap; font-variant-numeric: tabular-nums; }

.fx-prices__text { margin: 4px 0 0; color: var(--f-muted); font-size: 14px; }

/* Beoordeling */
.fx-rating { display: flex; align-items: center; gap: 16px; width: fit-content; max-width: 100%; margin-left: var(--fx-ml, 0); margin-right: var(--fx-mr, auto); color: var(--f-ink); text-decoration: none; }

/* In een raster: even groot als de kaarten ernaast, inhoud volgens de uitlijning */
.fx-rating--fill { width: 100%; height: 100%; justify-content: var(--fx-items, flex-start); }

.elementor-widget-forma-rating:has(.fx-rating--fill) { align-self: stretch; }

.fx-rating.fx-card { padding: 20px 24px; }

.fx-rating__score { font-size: calc(52px * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); line-height: calc(1 * var(--f-head-lh, 1)); letter-spacing: calc(-.04em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-rating--inline .fx-rating__score { font-size: calc(22px * var(--f-head-scale, 1)); letter-spacing: calc(-.02em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-rating__meta { display: grid; gap: 4px; }

.fx-rating__stars { --fx-fill: 100%; font-size: 20px; letter-spacing: 2px; line-height: 1; background: linear-gradient(90deg, #f5a524 var(--fx-fill), color-mix(in srgb, var(--f-ink) 18%, transparent) var(--fx-fill)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.fx-rating__count { color: var(--f-muted); font-size: 14px; font-weight: 500; }

a.fx-rating:hover .fx-rating__count { color: var(--f-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Foto met punten */
.fx-spots { position: relative; overflow: visible; border-radius: var(--f-r-l); }

.elementor .fx-spots > img, .fx-spots > img { display: block; width: 100%; height: auto; border-radius: var(--f-r-l); }
.elementor .fx-spots--ratio > img, .fx-spots--ratio > img { aspect-ratio: var(--fx-ratio); height: auto; object-fit: cover; }

.fx-spot { position: absolute; z-index: 1; }

.fx-spot__dot {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgb(0 0 0 / 30%);
    cursor: pointer;
}

.fx-spot__dot::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--f-accent); }

.fx-spot__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgb(255 255 255 / 80%); animation: fx-ping 2s ease-out infinite; }

@keyframes fx-ping {
    from { transform: scale(.7); opacity: 1; }
    to { transform: scale(1.4); opacity: 0; }
}

.fx-spot__tip {
    position: absolute;
    top: 22px;
    left: -14px;
    z-index: 2;
    display: grid;
    gap: 4px;
    width: max-content;
    max-width: 240px;
    padding: 14px 16px;
    border-radius: var(--f-r-m);
    background: var(--f-raised);
    color: var(--f-ink);
    box-shadow: 0 0 0 1px var(--f-line), var(--f-shadow);
    font-size: 14px;
    animation: fx-fade .2s;
}

.fx-spot__tip[hidden] { display: none; }

.fx-spot--left .fx-spot__tip { left: auto; right: -14px; }

.fx-spot__tip span { color: var(--f-muted); }

.f-glass .fx-spot__tip { background: var(--g-sheen), var(--g-strong); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: var(--g-edge), var(--g-drop); }

/* Kop met beeldjes */
.fx-img-heading { margin: 0; font-size: calc(clamp(32px, 5.6vw, 72px) * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); line-height: calc(1.15 * var(--f-head-lh, 1)); letter-spacing: calc(-.035em + var(--f-head-ls, 0em)); text-align: var(--fx-align, center); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-inline-img { display: inline-block; width: 1.9em; height: .9em; margin: 0 .08em; overflow: hidden; border-radius: 999px; vertical-align: -.06em; box-shadow: 0 6px 18px -6px rgb(14 15 18 / 30%); }

.elementor .fx-inline-img img, .fx-inline-img img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Lijst met beeld bij aanwijzen */
.fx-hlist-wrap { position: relative; }

.fx-hlist { margin: 0; padding: 0; list-style: none; text-align: left; }

.fx-hlist__row { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 4px; border-bottom: 1px solid var(--f-line); transition: padding-left .4s var(--f-ease); }

.fx-hlist__row:first-child { border-top: 1px solid var(--f-line); }

.fx-hlist__title { flex: 1; font-size: calc(clamp(26px, 3.6vw, 48px) * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); line-height: calc(1.1 * var(--f-head-lh, 1)); letter-spacing: calc(-.03em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-hlist__title a { color: inherit; text-decoration: none; }

.fx-hlist__meta { color: var(--f-muted); font-size: 15px; }

.fx-hlist__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--f-ease); }

.fx-hlist__row:hover .fx-hlist__arrow svg { transform: rotate(45deg); }

.elementor .fx-hlist__thumb, .fx-hlist__thumb { flex: none; width: 64px; height: 48px; border-radius: var(--f-r-s); object-fit: cover; }

.fx-hlist-wrap.is-live .fx-hlist__thumb { display: none; }

.fx-hlist-wrap.is-live .fx-hlist__row:hover { padding-left: 16px; }

.fx-hlist__float { position: absolute; top: 0; left: 0; z-index: 3; width: 260px; height: 180px; margin: -90px 0 0 -130px; pointer-events: none; opacity: 0; transition: opacity .25s; }

.fx-hlist__float.is-on { opacity: 1; }

.elementor .fx-hlist__float img, .fx-hlist__float img { width: 100%; height: 100%; max-width: none; border-radius: var(--f-r-m); object-fit: cover; box-shadow: 0 20px 40px -14px rgb(0 0 0 / 40%); transform: rotate(-3deg); }

/* Afbeeldingsslider */
.fx-islide { position: relative; height: 520px; margin: 0; overflow: hidden; border-radius: var(--f-r-l); background: var(--f-surface); }

.elementor .fx-islide img, .fx-islide img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

.fx-islide figcaption { position: absolute; left: 16px; bottom: 16px; padding: 7px 12px; border-radius: 999px; background: rgb(0 0 0 / 45%); color: #fff; font-size: 13px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Nieuwsbrief */
.fx-nl__title { margin: 0 0 8px; color: var(--f-ink); font-size: calc(clamp(22px, 2.4vw, 28px) * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); line-height: calc(1.15 * var(--f-head-lh, 1)); letter-spacing: calc(-.02em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }
.fx-nl__intro { margin: 0 0 18px; color: var(--f-muted); }
.fx-nl__row { display: flex; gap: 8px; }

.fx-nl__row input { flex: 1; min-width: 0; }

.fx-nl .fx-btn { flex: none; height: 48px; }

.fx-nl__note { margin: 8px 0 0; color: var(--f-muted); font-size: 13px; }

@media (max-width: 420px) {
    .fx-nl__row { flex-direction: column; }
}

/* Mededelingsbalk */
.fx-notice { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 14px; border-radius: var(--f-r-m); background: var(--f-surface); font-size: 14px; text-align: center; }

.fx-notice--dark { background: var(--f-dark); color: #fff; }

.fx-notice--accent { background: var(--f-accent); color: var(--f-on-accent, #fff); }

.f-glass .fx-notice--soft { background: var(--g-sheen), var(--g-tint); box-shadow: var(--g-edge), var(--g-drop); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }

.fx-notice__label { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--f-ink); color: var(--f-bg); font-size: 12px; font-weight: 700; }

@media (max-width: 559.98px) {
    .fx-notice { justify-content: flex-start; text-align: left; }
}

.fx-notice:is(.fx-notice--dark, .fx-notice--accent) .fx-notice__label { background: rgb(255 255 255 / 18%); color: #fff; }

.fx-notice__link { color: inherit; font-weight: 600; text-underline-offset: 3px; }

.fx-notice__close { display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-left: auto; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }

.fx-notice__close:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

.fx-notice__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Groot citaat */
.fx-bq, .elementor .elementor-widget .fx-bq { max-width: 920px; margin: 0 var(--fx-mr, auto) 0 var(--fx-ml, auto); text-align: var(--fx-align, center); }

.fx-bq blockquote { margin: 0; }

.fx-bq blockquote p { margin: 0; font-size: clamp(28px, 3.8vw, 48px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }

.fx-bq--serif blockquote p { font-family: var(--f-serif, Georgia, serif); font-weight: 400; letter-spacing: -.01em; }

.fx-bq--serif blockquote p::before { content: "\201C"; }

.fx-bq--serif blockquote p::after { content: "\201D"; }

.fx-bq figcaption { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; text-align: left; }

.elementor .fx-bq img, .fx-bq img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

.fx-bq strong { display: block; font-size: 15px; }

.fx-bq small { display: block; color: var(--f-muted); font-size: 14px; }

/* Flipkaart */
.fx-flip { height: 320px; perspective: 1200px; cursor: pointer; }

.fx-flip__inner { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .7s var(--f-ease); }

@media (hover: hover) {
    .fx-flip:hover .fx-flip__inner { transform: rotateY(180deg); }
}

.fx-flip.is-flipped .fx-flip__inner { transform: rotateY(180deg); }

.fx-flip__face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; overflow: hidden; padding: 26px; border-radius: var(--f-r-l); -webkit-backface-visibility: hidden; backface-visibility: hidden; text-align: left; }

.fx-flip__front { isolation: isolate; background: var(--f-surface); }

.fx-flip__back { justify-content: center; background: var(--f-dark); color: #fff; transform: rotateY(180deg); }

.f-glass .fx-flip__front { background: var(--g-sheen), var(--g-strong); box-shadow: var(--g-edge), var(--g-drop); }

.elementor .fx-flip__bg, .fx-flip__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .9; }

.fx-flip__front:has(.fx-flip__bg) { color: #fff; }

.fx-flip__front:has(.fx-flip__bg)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgb(0 0 0 / 60%)); }

.fx-flip__title { margin: 0; font-size: calc(22px * var(--f-head-scale, 1)); font-weight: var(--f-head-w, 600); letter-spacing: calc(-.02em + var(--f-head-ls, 0em)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-flip__sub { margin: 4px 0 0; color: var(--f-muted); font-size: 14px; }

.fx-flip__front:has(.fx-flip__bg) .fx-flip__sub { color: rgb(255 255 255 / 80%); }

.fx-flip__text { margin: 10px 0 18px; color: rgb(255 255 255 / 75%); font-size: 15px; }

.fx-flip__back .fx-btn { align-self: flex-start; }

.fx-flip__turn { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 70%); color: var(--f-ink); cursor: pointer; }

.fx-flip__turn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
    .fx-flip__inner { transition: none; }
}

/* Zoekveld */
.fx-search { position: relative; display: flex; gap: 8px; max-width: 640px; }

.fx-search input { flex: 1; min-width: 0; height: 52px; padding: 0 16px 0 46px; border: 1px solid color-mix(in srgb, var(--f-ink) 16%, transparent); border-radius: var(--f-r-s); background: var(--f-raised); color: var(--f-ink); font: inherit; font-size: 16px; }

.f-glass .fx-search input { background: var(--g-strong); border-color: color-mix(in srgb, var(--f-ink) 12%, transparent); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }

.fx-search input:focus { outline: 0; border-color: var(--f-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--f-accent) 16%, transparent); }

.fx-search__icon { position: absolute; top: 50%; left: 16px; width: 20px; height: 20px; fill: none; stroke: var(--f-muted); stroke-width: 2; stroke-linecap: round; transform: translateY(-50%); pointer-events: none; z-index: 1; }

.fx-search .fx-btn { height: 52px; }

/* Merkwoord */
.fx-wordmark { margin: 0; overflow: hidden; font-size: 18vw; font-weight: 700; line-height: .82; letter-spacing: -.06em; white-space: nowrap; text-align: center; user-select: none; }

.fx-wordmark span { display: inline-block; padding-bottom: .06em; }

.fx-wordmark--gradient span { background: linear-gradient(180deg, var(--f-ink), color-mix(in srgb, var(--f-ink) 0%, transparent) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.fx-wordmark--outline span { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--f-ink) 40%, transparent); }

.fx-panel--dark .fx-wordmark--gradient span { background-image: linear-gradient(180deg, #fff, rgb(255 255 255 / 0%) 92%); }

/* Scheidingslijn */
.fx-divider { display: flex; align-items: center; gap: 16px; min-height: 1px; }

.fx-divider:not(:has(.fx-divider__label)) { gap: 0; }

.fx-divider::before, .fx-divider::after { content: ""; flex: 1; height: 1px; background: var(--f-line); }

.fx-divider--dashed::before, .fx-divider--dashed::after { height: 0; border-top: 1px dashed color-mix(in srgb, var(--f-ink) 22%, transparent); background: none; }

.fx-divider--fade::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--f-ink) 18%, transparent)); }

.fx-divider--fade::after { background: linear-gradient(90deg, color-mix(in srgb, var(--f-ink) 18%, transparent), transparent); }

.fx-divider__label { color: var(--f-muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; }

.fx-divider__label--icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--f-surface); color: var(--f-accent); }

.fx-divider__label--icon svg { width: 16px; height: 16px; fill: currentColor; }

/* Iconenrij */
.fx-strip { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: var(--fx-align, left); margin: 0; padding: 0; list-style: none; }

.fx-strip li, .fx-strip a { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-size: 15px; font-weight: 600; text-decoration: none; }

.fx-strip a:hover { text-decoration: underline; text-underline-offset: 3px; }

.fx-strip__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--f-accent) 14%, transparent); color: var(--f-accent); }

.fx-strip__icon svg { width: 14px; height: 14px; fill: currentColor; }

.fx-strip__icon i { font-size: 13px; }

.fx-strip--small { gap: 6px 20px; }

.fx-strip--small li, .fx-strip--small a { gap: 7px; font-size: 13px; font-weight: 500; }

.fx-strip--small .fx-strip__icon { width: auto; height: auto; background: none; color: inherit; opacity: .8; }

.fx-strip--small .fx-strip__icon svg { width: 12px; height: 12px; }


/* Blogbericht en overzicht als Elementor-sjabloon */
.fx-post-title { margin: 0; color: var(--f-ink); font-weight: var(--f-head-w, 600); line-height: calc(1.06 * var(--f-head-lh, 1)); letter-spacing: calc(-.035em + var(--f-head-ls, 0em)); text-align: var(--fx-align, left); text-wrap: balance; font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-post-title--m { font-size: clamp(28px, 3.6vw, 40px); }

.fx-post-title--l { font-size: clamp(34px, 5vw, 58px); }

.fx-post-title--xl { font-size: clamp(40px, 6.4vw, 80px); }

.fx-post-meta { display: flex; flex-direction: column; align-items: var(--fx-items, flex-start); gap: 14px; text-align: var(--fx-align, left); }

.fx-post-image { margin: 0; overflow: hidden; border-radius: var(--f-r-l); }

.elementor .fx-post-image img, .fx-post-image img { display: block; width: 100%; height: auto; border-radius: 0; }

.fx-post-image.has-ratio { aspect-ratio: var(--fx-ratio); }

.elementor .fx-post-image.has-ratio img, .fx-post-image.has-ratio img { height: 100%; object-fit: cover; }

.fx-post-content { margin-inline: auto; }

.fx-post-content.is-full { max-width: none; }

.elementor-widget-forma-post-content, .elementor-widget-forma-post-image, .elementor-widget-forma-archive-posts, .elementor-widget-forma-post-related, .elementor-widget-forma-post-comments, .elementor-widget-forma-post-nav { width: 100%; }

.fx-post-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

.fx-post-nav__link { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--f-line); border-radius: var(--f-r-m); color: var(--f-ink); text-decoration: none; transition: border-color .2s, transform .2s var(--f-ease); }

.fx-post-nav__link:not(.is-empty):hover { border-color: var(--f-ink); transform: translateY(-2px); }

.fx-post-nav__link.is-empty { border: 0; }

.fx-post-nav__link span { color: var(--f-muted); font-size: 13px; font-weight: 600; }

.fx-post-nav__link strong { font-size: 16px; font-weight: 600; line-height: 1.3; }

.fx-post-nav__link--next { text-align: right; }

.fx-archive-head { text-align: var(--fx-align, left); }

.fx-archive-head__title { margin: 0; color: var(--f-ink); font-weight: var(--f-head-w, 600); line-height: calc(1.05 * var(--f-head-lh, 1)); letter-spacing: calc(-.035em + var(--f-head-ls, 0em)); text-wrap: balance; font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-archive-head--m .fx-archive-head__title { font-size: calc(clamp(30px, 4vw, 44px) * var(--f-head-scale, 1)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-archive-head--l .fx-archive-head__title { font-size: calc(clamp(36px, 5.6vw, 68px) * var(--f-head-scale, 1)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-archive-head--xl .fx-archive-head__title { font-size: calc(clamp(42px, 7vw, 88px) * var(--f-head-scale, 1)); font-family: var(--f-font-head, inherit); text-transform: var(--f-head-case, none); }

.fx-archive-head__intro { max-width: 60ch; margin: 18px var(--fx-mr, auto) 0 var(--fx-ml, 0); color: var(--f-muted); font-size: 18px; }

.fx-archive-chips { justify-content: var(--fx-items, flex-start); }

@media (min-width: 1025px) {
    .fx-archive-posts--two { --fx-cols: 2; }
}

@media (max-width: 1024px) {
    .fx-archive-posts:not(.fx-archive-posts--list) { --fx-cols: 2; }
}

@media (max-width: 640px) {
    .fx-archive-posts:not(.fx-archive-posts--list) { --fx-cols: 1; }
}

/* Lijst: foto links, tekst rechts */
.fx-archive-posts--list { --fx-cols: 1; gap: 28px; }

@media (min-width: 768px) {
    .fx-archive-posts--list .fx-post { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 28px; align-items: center; }

    .fx-archive-posts--list .fx-post__media { aspect-ratio: 3 / 2; }

    .fx-archive-posts--list .fx-post:not(:has(.fx-post__media)) { grid-template-columns: minmax(0, 1fr); }
}

.fx-archive-empty { display: grid; gap: 16px; max-width: 560px; }

.fx-archive-empty p { margin: 0; color: var(--f-muted); font-size: 18px; }

@media (max-width: 559.98px) {
    .fx-post-nav { grid-template-columns: minmax(0, 1fr); }

    .fx-post-nav__link--next { text-align: left; }

    .fx-post-nav__link.is-empty { display: none; }
}

/* Zijbalk naast een bericht of overzicht: smal, blijft staan tijdens het lezen */
.fx-sidebar .fx-posts { --fx-cols: 1; }

@media (min-width: 1025px) {
    .e-con.fx-sidebar { position: sticky; top: 110px; }
}