:root {
    /* COLORS */
    --col-primary-light: #327AA4;
    --col-primary: #004D7A;
    --col-primary-dark: #003554;
    --col-primary-very-light: #e2edf2;
    --col-secondary-light: #c8d9d1;
    --col-secondary: #4cb693;
    --col-secondary-dark: #0a8c61;
    --col-action: #F2B72C;
    /* COLOR ASSIGNMENT */
    --header-bg-color: var(--col-primary-light);
    --header-text-color: var(--content-bg-color);
    --body-bg-color: var(--content-bg-color);
    --content-alternate-bg-color: var(--col-primary-very-light);
    --content-alternate-text-color: inherit;
    --card-bg-color: var(--col-primary-very-light);
    --card-text-color: var(--content-text-color);
    --card-header-bg-color: var(--col-primary-dark);
    --card-header-text-color: var(--col-primary-very-light);

    --heading-color: var(--col-primary);
    --menu-hover-color: var(--col-primary-very-light);

    /* EFFECTS */

    /* SPACING */
    --container-width: 1536px;
    --heading-line-height: 1.25;
    --body-padding-x: calc(var(--spacing-unit) * 3);
    --heading-margin-bottom: calc(var(--spacing-unit) * 3);
    --element-margin-bottom: calc(var(--spacing-unit) * 6);
    --cards-gap: calc(var(--spacing-unit) * 8);
    --header-height: 60px;
    --header-font-size: 2rem;
    /* TYPOGRAPHY */
    --heading-font-family: 'Fibon Neue', sans-serif;
    /* Menu desktop vanaf 1200px; zie @media-blokken hieronder */
}
main > h1,
main > .hero-wrapper h1,
main > .hero-wrapper .h1 {
    --heading-font-size: clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 768px) {
    :root {
        --element-margin-bottom: calc(var(--spacing-unit) * 8);
        --header-height: 100px;
        --header-font-size: 3rem;
    }
}
.col-with-sticky-aside > *:last-child > *:first-child {
    position: relative;
    top: inherit;
}

header {
    margin-block: calc(var(--header-height) * .2);
}

header > span {
    margin-left: var(--spacing-unit);
    font-family: var(--heading-font-family), sans-serif;
    font-size: var(--header-font-size);
    font-weight: bold;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}
header > .main-menu-toggle {
    margin-left: auto;
}
header a.header-brand {
    background-color: var(--content-bg-color);
    border-radius: 50%;
    margin-inline: calc(var(--header-height) * .2);
    z-index: 11;
}

header a.header-brand img {
    width: var(--header-height);
    margin: calc(var(--header-height) * .2);
}
header > .main-navigation,
header > .main-navigation.expanded,
header > .main-navigation.collapsed {
    height: auto;
}
@media (min-width: 768px) and (max-width: 1199px) {
    button.main-menu-toggle {
        display: revert;
    }

    header > .main-navigation,
    header > .main-navigation.collapsed {
        position: absolute;
        top: var(--header-height);
        right: 0;
        height: auto;
        padding: 0;
        transform: translateX(calc(100% + 1px));
        transition: transform 500ms;
    }

    header > .main-navigation.expanded {
        position: absolute;
        top: var(--header-height);
        right: 0;
        height: auto;
        padding: 0;
        transform: translateX(0);
        transition: transform 500ms;
    }

    header > .language-switcher {
        order: unset;
        margin-right: 0;
        margin-left: auto;
    }

    header > nav {
        margin-left: unset;
    }

    .main-navigation > ul {
        flex-direction: column;
        margin-top: 0;
        padding: 0 var(--body-padding-x);
        padding-bottom: var(--menu-gap);
    }

    .main-navigation li > a {
        padding: calc(var(--menu-gap) / 2) 0;
    }

    .main-navigation > ul > li.parent {
        position: static;
    }

    .main-navigation ul.submenu {
        visibility: visible;
        position: static;
        top: auto;
        right: auto;
        padding: 0 0 0 var(--menu-gap);
        pointer-events: all;
        opacity: 1;
        transition: none;
    }

    .main-navigation > ul > li.parent:hover ul.submenu {
        visibility: visible;
        height: auto;
        pointer-events: all;
        opacity: 1;
    }

    ul.submenu > li > a {
        flex-direction: row;
        padding: calc(var(--menu-gap) / 2) 0;
    }

    .main-navigation li.parent > a > svg {
        display: none;
        transform: none;
        width: auto;
        height: auto;
    }

    .main-navigation li.parent:hover > a > svg {
        transform: none;
        transition: none;
    }
}
@media (min-width: 1200px) {
    .main-navigation > ul {
        margin-top: 0.5rem;
    }
    .main-navigation ul.submenu {
        border-radius: var(--card-border-radius);
        border: 2px solid var(--content-bg-color);
        box-shadow: var(--card-shadow);
    }
}
.main-navigation li > a {
    font-family: var(--heading-font-family), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
body.hero h4, body.hero .h4,
h1 + h2 {
    --heading-color: var(--col-secondary-dark);
}
p + h2, p ~ .h2 {
    margin-top: calc(var(--element-margin-bottom) / 2);
}
body.page .col-with-sticky-aside > div:first-child > h2:first-child {
    --heading-color: var(--col-secondary-dark);
}
body.hero .card-icon {
    --card-header-bg-color: var(--col-primary-very-light);
    --card-header-text-color: var(--col-primary-dark);
    --body-padding-x: calc(var(--spacing-unit) * 6);
}
body.hero .card-icon > .card-header > h2 {
    --heading-font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    --heading-margin-top: calc(clamp(1.5rem, 2.5vw, 2.5rem));
    --heading-margin-bottom: calc(clamp(1.5rem, 2.5vw, 2.5rem) / 2);
}
body.hero .cards .card-icon .card-body > img.svg-img {
    float: left;
    margin-right: calc(var(--spacing-unit) * 2);
    padding: 0;
}
a.btn {
    text-wrap: balance;
}
figure.quote {
    --quote-bg-color: var(--col-primary-very-light);
    --quote-font-size: 1rem;
}
.quote blockquote {
    font-weight: normal;
    font-style: italic;
}
figure.quote .quote_author {
    font-size: 0.8rem;
}
figure.quote .quote_meta {
    text-wrap: balance;
}
figure.quote.has-image {
    grid-template-areas:
        "quote quote"
        "image author"
;
}
.quote img {
    max-width: 100px;
}

.laurel-badges {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.laurel-badges img {
    padding: 0;
    margin-bottom: 0;
    width: 150px;
    height: auto;
}
.text-and-icon-block {
    display: flex;
    flex-direction: row;
    align-content: center;
    gap: 1rem;
    margin-bottom: var(--element-margin-bottom);
}
.cards .card-m-double {
    grid-column: span 12;
}
@container cards (min-width: 950px) {
    .cards .card-m-double {
        grid-column: span 8;
    }
}
.text-and-icon-block > div > p:last-child {
    margin-bottom: 0;
}

.usp-grid {
    display: grid;
    justify-content: center;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(0, 472px));
    padding-bottom: 3rem;
}

.usp-grid > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.usp-grid h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 900;
}

.usp-grid p {
    margin: 0;
    text-wrap: balance;
}

@media (min-width: 472px) {
    .usp-grid > div {
        flex-direction: row;
        text-align: start;
    }
}
.alternate-container:has(.usp-grid) {
    display: block;
}
.alternate-container .container:has(.usp-grid) {
    max-width: inherit;
}
@media (min-width: 1200px) {
    .main-navigation ul {
        gap: calc(var(--menu-gap) * 2)
    }
}
.hero-content span.h1 {
    display: none;
}
.hero-image img {
    max-width: 350px;
    margin-bottom: 0;
}
main {
    padding-block: calc(var(--spacing-unit) * 4);
    padding-inline: var(--body-padding-x);
}
body {
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
}
.alternate-container {
    display: flex;
    justify-content: center;
    padding: calc(var(--spacing-unit) * 4) 0;
    background-color: var(--content-alternate-bg-color);
    color: var(--content-alternate-text-color);
    margin-bottom: var(--element-margin-bottom);
}
.alternate-container div.container {
    max-width: 60ch;
    padding: 0;
    margin-bottom: 0;
}
.alternating-columns {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 4);
    margin-bottom: var(--element-margin-bottom);
}
.alternating-columns__row {
    display: grid;
    grid-template-areas:
        'title'
        'media'
        'text'
    ;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    ;
    justify-content: center;
    row-gap: calc(var(--spacing-unit) * 2);
}
@media (min-width: 900px) {
    .alternating-columns {
        gap: calc(var(--spacing-unit) * 16);
    }
    .alternating-columns__row {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
            'media title'
            'media text';
        column-gap: calc(var(--spacing-unit) * 8);
        row-gap: 0;
    }
    .alternating-columns__row:nth-child(odd) {
        grid-template-areas:
            'title media'
            'text media';
    }
}
.alternating-columns__media {
    display: flex;
    justify-content: center;
    align-items: center;
}
.alternating-columns__media img {
    border-radius: 50%;
    width: 500px;
}
.alternating-columns__text,
.alternating-columns__title {
    max-width: 60ch;
}
.alternating-columns__title {
    grid-area: title;
    align-self: end;
}
.alternating-columns__media {
    grid-area: media;
}
.alternating-columns__text {
    grid-area: text;
}
.alternating-columns__text-wrapper ul {
    padding-left: 0;
    list-style: none;
}

.alternating-columns__text-wrapper ul li {
    position: relative;
    padding-left: 1.5rem;
}

.alternating-columns__text-wrapper li::before {
    position: absolute;
    left: 0;
    color: var(--col-secondary-dark);
    content: '✔';
}
.alternating-columns__text-wrapper> *:last-child {
    margin-bottom: 0;
}
.hero-content {
    font-family: var(--heading-font-family), sans-serif;
}
.hero-content span.h1 {
    --heading-color: var(--col-primary-light);
    font-size: clamp(3rem, 4.8vw, 4.6rem);
}
.hero-content h1.h2 {
    font-size: clamp(2rem, 3vw, 3rem);
}
.hero-content h2.h3 {
    --heading-color: var(--col-primary-light);
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    line-height: 1.4;
    letter-spacing: 0.09em;
    font-weight: normal;
}
body.hero .alternating-columns__media .svg-img {
    max-width: 276px;
}
/*.alternating-columns__media img:not(.svg-img) {*/
/*    -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent),*/
/*    linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);*/
/*    mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent),*/
/*    linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);*/
/*    -webkit-mask-composite: intersect;*/
/*    mask-composite: intersect;*/
/*}*/
.alternate-container {
    background-color: var(--content-bg-color);
    color: inherit;
}
.alternate-container > div {
    border-radius: var(--card-border-radius);
    padding: calc(var(--spacing-unit) * 4);
    background-color: var(--content-alternate-bg-color);
}
.hero-wrapper {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-items: center;
    gap: 1rem;
}
@media (min-width: 860px) {
    .hero-wrapper {
        display: grid;
        grid-template-columns: 1fr 350px;
        align-items: center;
        justify-items: center;
        margin-bottom: var(--element-margin-bottom);
    }
}
@media (min-width: 768px) {
    body.page main:has(.page-intro > p) {
        justify-self: center;
        width: 75ch;
    }
}
.faq-block-wrapper {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
}
body.page .faq-block-wrapper {
    justify-content: start;
}
.faq-block {
    max-width: 60ch;
}
.faq-block-wrapper > img {
    display: none;
}
.step.specialist-selector-grid {
    display: none !important;
}
body.hero main > h2 {
    margin-block: calc(var(--element-margin-bottom) / 2);
    background-color: var(--content-alternate-bg-color);
    color: var(--col-primary-dark);
    text-wrap: balance;
    padding-block: calc(var(--element-margin-bottom) / 2);
    padding-left: var(--body-padding-x);
    padding-right: calc(min(100vw, var(--body-width)) - 45ch);
    font-size: clamp(1.5rem, 2.4vw, 2.3rem);
    border-radius: var(--card-border-radius);
}
@media (min-width: 80ch) {
    .faq-block-wrapper > img {
        display: block;
    }
}

footer {
    border-top: 3px solid var(--col-primary-light);
    padding: calc(var(--body-padding-x) * 2);
}
footer .footer-logo {
    display: flex;
    justify-content: end;
}
footer div.footer-navigation {
    display: flex;
    justify-content: space-between;
    flex-direction: column-reverse;
    gap: calc(var(--spacing-unit) * 2);
}
footer ul {
    padding-left: 0;
    list-style: none;
}
.mh-planner.card {
    --body-padding-x: calc(var(--spacing-unit) * 3);
    --heading-margin-bottom: 0;
}
h3 + ul {
    margin-top: 0;
}
h3:has(+ ul) {
     margin-bottom: var(--spacing-unit);
 }
@media (min-width: 768px) {
    footer div.footer-navigation {
        flex-direction: row;
    }
}
@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-Regular-1__AtGq.woff") format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-Oblique-I-7eQFP.woff") format('woff');
    font-weight: 400;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-Bold-rDur99Y.woff") format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-BoldOblique-2pcjSMH.woff") format('woff');
    font-weight: 700;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-ExtraBold-lks-Zqi.woff") format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-ExtraBoldOblique-2LZy1Eg.woff") format('woff');
    font-weight: 800;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-ExtraLight-wukeYi6.woff") format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-ExtraLightOblique-oowjq1a.woff") format('woff');
    font-weight: 200;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-Heavy-jOsLlZy.woff") format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-HeavyOblique-A_ESWMQ.woff") format('woff');
    font-weight: 900;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-Light-w5zFJ94.woff") format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-LightOblique-KeAaaSr.woff") format('woff');
    font-weight: 300;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-Medium-2daP4ww.woff") format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-MediumOblique-qe31rm1.woff") format('woff');
    font-weight: 500;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-SemiBold-oxz2D-D.woff") format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-SemiBoldOblique-SDmY9MJ.woff") format('woff');
    font-weight: 600;
    font-style: oblique;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-SemiLight-dhuR3PW.woff") format('woff');
    font-weight: 350;
    font-style: normal;
}

@font-face {
    font-family: 'Fibon Neue';
    src: url("../static-fonts/FibonNeue-SemiLightOblique-apUdojr.woff") format('woff');
    font-weight: 350;
    font-style: oblique;
}