:root {
    --blue: #005b73;
    --dark: #025164;
    --darkest: #00313d;
    --gray: #b6ccd4;
    --darkgray: #8eaebb;
    --lightgray: #d5e4e7;
    --lightergray: #e5eff1;
}
* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: 16px; line-height: 1.4; min-height: 100svh;}

body {
    background: white url(/img/background.svg) center 60% / 100% auto no-repeat; 
    background-attachment: fixed;
    color: var(--dark); 
    font-family: 'Noto Sans', sans-serif; 
    display: flex; 
    flex-direction: column; 
    min-height: 100svh;
    align-items: stretch;
    backdrop-filter: none;
    transition: backdrop-filter 0.25s ease-in-out;
}
body::after {
    content: "";
    left: 0; 
    top: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background: #005c86;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out;
}
body.blurbg::after {opacity: 0.25;}
.rating {font-family: 'FreeSans', sans-serif; font-weight: bold; pointer-events: none;}

@media (max-aspect-ratio: 4/3) {
    body {background-size: auto 111vh;}
}
a {color: var(--dark);}
a:hover {color: var(--dark);}
img {max-width: 100%; display: block;}
.header, .footer {width: 100%; position: fixed; left: 0; padding: 1.5rem 2rem; z-index: 3;}
.header {display: flex; justify-content: space-between; top: 0;}
.header > div {display: flex; gap: 1rem}
.header a {
    color: var(--dark); 
    text-decoration: none; 
    font-weight: bold; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
    font-size: 0.95rem;
}
.sharebuttons a:hover img,
.header a:hover img {filter: brightness(0.9) contrast(1.25) saturate(0.65);}
.header a img {height: 3rem; display: block; margin-block: 0.15rem;}
.footer {bottom: 0; font-size: 0.9rem; text-align: left; padding-block: 1rem; opacity: 0.5;}
.footer, .footer a {color: var(--darkest); text-decoration: none; transition: color 0.15s ease-in-out;}
.footer a:hover {color: var(--darkest);}

.page {
    margin: 0 auto; 
    width: 100%; 
    max-width: 50rem; 
    flex-grow: 1;
    background: white; 
    position: relative;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.main {padding: calc(1rem + 2.5vh) 5rem calc(1rem + 3vh); flex-grow: 1; position: relative; z-index: 5;}
.content ul, .content ol {margin-left: 2em;}
.content ul:not(:last-child), .content ol:not(:last-child), .content p:not(:last-child) {margin-bottom: 1.4em;}
.colorededges::before, .colorededges::after {
    content: "";
    position: absolute;
    width: 0.4rem;
    background: url(/img/gradient1.png) center center / cover;
    height: 100%;
    top: 0;
    left: 2rem;
}
.colorededges::after {
    left: auto;
    right: 2rem;
    background: url(/img/gradient2.png) center center / cover;
}

h1, h2.h1 {font-size: 2.25rem; font-weight: bold; padding: 0; letter-spacing: 0;}
h2.h1 {margin-bottom: 1rem!important;}
h2 {font-size: 1.1rem; font-weight: 800; letter-spacing: 0.015em; padding-top: 1.75rem;}
h2.large, h3.large { font-size: 1.25rem; font-weight: bold; padding: 0; letter-spacing: 0; margin-bottom: 0.5rem;}
h3 {font-size: 1rem;}
h1, h2, h3 {margin-bottom: 1em; line-height: 1.2;}
hr {height: 1px; border: 0; background: var(--dark); margin-block: 2em;}

.is-10{background: #2ca77b!important; accent-color: #2ca77b!important; color: white!important;}
.is-9 {background: #51aa5d!important; accent-color: #51aa5d!important; color: white!important;}
.is-8 {background: #75ae46!important; accent-color: #75ae46!important; color: white!important;}
.is-7 {background: #a1b740!important; accent-color: #a1b740!important; color: white!important;}
.is-6 {background: #cdc039!important; accent-color: #cdc039!important; color: white!important;}
.is-5 {background: #eabd34!important; accent-color: #eabd34!important; color: white!important;}
.is-4 {background: #e5a131!important; accent-color: #e5a131!important; color: white!important;}
.is-3 {background: #e0872e!important; accent-color: #e0872e!important; color: white!important;}
.is-2 {background: #db6e2c!important; accent-color: #db6e2c!important; color: white!important;}
.is-1 {background: #d1532a!important; accent-color: #d1532a!important; color: white!important;}

.text-is-10{color: #2ca77b!important;}
.text-is-9 {color: #51aa5d!important;}
.text-is-8 {color: #75ae46!important;}
.text-is-7 {color: #a1b740!important;}
.text-is-6 {color: #cdc039!important;}
.text-is-5 {color: #eabd34!important;}
.text-is-4 {color: #e5a131!important;}
.text-is-3 {color: #e0872e!important;}
.text-is-2 {color: #db6e2c!important;}
.text-is-1 {color: #d1532a!important;}

.button {
    background: #03a39c;
    color: white;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    padding: 0.57em 2em 0.73em;
    font-size: 2rem;
    transition: background 0.15s ease-in-out;
    border: 0;
}
.button.arrow {background: #03a39c url(/img/chevron_forward.svg) calc(100% - 1.35em) center / 1.45em auto no-repeat; padding-right: 3em;}
.button:hover {color: white; background-color: var(--blue); background-position: calc(100% - 1.25em) center ;}
.link {
    font-weight: bold; 
    color: var(--darkgray); 
    text-underline-offset: 0.3em; 
    text-decoration-thickness: 0.1em;
    transition: color 0.15s ease-in-out;
    padding-block: 0.1em;
    display: inline-block;
    font-size: 1.1rem;
}
.button.small {font-size: 1.25rem;}

form {max-width: 15rem; margin: 2rem auto 0;}
form > div {display: flex; flex-direction: column;}
form > div + div {margin-top: 1rem;}
form > div label {display: none;}
form > div input {
    border: 1px solid silver;
    font-family: 'Noto Sans', sans-serif; 
    color: var(--dark);
    padding: 0.4em 0.4em;
    font-size: 1.1rem;
}
::placeholder {
    color: #ccdde4;
    opacity: 1; /* Firefox */
}


.list {
    background: var(--lightergray);
    max-width: 27rem;
    margin: 0 auto;
    padding: 2rem;
    margin-block: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.listholder.green .list {
    color: white; 
    background: #03a29d; 
    text-align: left; 
    max-width: 100%;
}

.recommendation {position: relative; color: var(--dark);}
.recommendation div.summary {
    background: white; 
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    padding-bottom: 2.75rem;
    position: relative;
    min-height: 5.25rem;
}
.recommendation div.summary h3 {min-width: 5rem;}
.recommendation div.summary .expand {
    position: absolute; 
    bottom: 0; 
    right: 0;
    font-weight: bold;
    text-align: center;
    font-size: 0.85rem;
    cursor: pointer;
    z-index: 2  ;
    text-decoration: none;
    clip-path: polygon(0.5rem 0, calc(100% + 1px) 0, calc(100% + 1px) calc(100% + 1px), 0 calc(100% + 1px));
}
.recommendation div.summary .expand > span {
    display: none;
    background: var(--blue);
    color: white;
    padding: 0.5rem 0.35rem 0.5rem 0.75rem;
    width: 5rem;
}
.recommendation.expanded div.summary .expand > span:last-child,
.recommendation div.summary .expand > span:first-child {display: block;}
.recommendation.expanded div.summary .expand > span:first-child {display: none;}
.recommendation .expandbox {display: none;}
.recommendation .expandbox h2 {font-weight: bold;}
.recommendation .expandbox h3 {font-weight: 800; margin-bottom: 0.35rem;}
.recommendation.expanded .expandbox {display: block;}
.recommendation .expandbox > div {padding: 2.5rem 1.5rem; background: var(--blue); color: white; position: relative;}
.recommendation .expandbox > div.empty {display: none;}
.recommendation .expandbox > div:nth-child(1) a {color: white;}
.recommendation .expandbox > div:nth-child(2)::before {content: ""; position: absolute; top: 0; left: 1.5rem; background: rgba(255,255,255,0.25); height: 0.1rem; width: calc(100% - 3rem);}
.recommendation .expandbox > div.empty + div::before {content: none;}
.recommendation .expandbox > div > h2:first-child {padding-top: 0;}

@media (min-width: 1260px) {
    .listholder.green .list {max-width: 100%; border-top: 0.4rem solid var(--blue);}
    .recommendation div.summary {flex-direction: row; padding-right: 5rem; padding-bottom: 1.25rem;}
    .recommendation.expanded .expandbox {display: flex;}
    .recommendation .expandbox {margin-top: 1rem; gap: 0.4rem;}
    .recommendation .expandbox > div {padding-block: 2rem 2.5rem; flex: 1;}
    .recommendation .expandbox > div:nth-child(1) {padding-left: 2.3rem;}
    .recommendation .expandbox > div:nth-child(2) {background: var(--lightgray); color: var(--dark); flex: 1.075;}
    .recommendation .expandbox > div.empty {flex: 0; display: block;}
    .recommendation .expandbox > div:nth-child(2)::before {content: none;} 
    body.section_domains:not(.page__index) .page {width: calc(100% - 15rem); max-width: 80rem;}
    .desktopflex {display: flex; margin-inline: -5rem; animation: none; margin-block: 3rem;}
    .desktopflex > div:nth-child(1) {min-width: 27rem; background: var(--lightergray); border-bottom: 0.4rem solid var(--blue); padding-bottom: 2rem;}
    .desktopflex > div:last-child {flex-grow: 1;background: #03a29d; border-bottom: 0.4rem solid var(--blue); padding-bottom: 1.5rem;}
    .recommendation .expandbox > div:nth-child(1)::before {
        content: "";
        width: 0.3rem; 
        background: #03a29d;
        position: absolute;
        left: 0.4rem;
        height: 100%;
        top: 0;
    }
    .desktopflex > div .list {border-top: 0.4rem solid var(--blue); margin: 0;}
    .desktopflex .domain.focus div.title::before {content: none;}
    
    .listholder.white {margin-inline: -9.5rem; background: white; margin-top: 3rem;}
    .listholder.white .list {
        max-width: 100%;
        border-top: 2rem solid var(--lightergray); 
        border-bottom: 2rem solid var(--lightergray);
        columns: 2;
        display: block;
        column-gap: 3rem;
        padding: 2rem 4.5rem 0;
    }
    .listholder.white .domain {display: block; margin-bottom: 1.25rem; position: relative; top: 1rem;}
    .listholder.white .domain div.title .rating {margin-right: -1rem!important;}
}
@media (max-width: 1259px) {
    body.section_domains .page {width: 100%;}
}
.domain {text-align: left; position: relative; cursor: pointer; text-decoration: none;}
.domain div.title {padding: 0 1.25rem; display: flex; align-items: center; background: white; min-height: 4rem;}
.domain div.title h2 {margin: 0; padding: 0; font-weight: bold; flex-grow: 1; padding-right: 4rem; letter-spacing: -0.05em; padding-left: 1.35rem;}
.domain div.title h2 span {width: 1.35rem; position: absolute; margin-left: -1.35rem;}
.domain.focus div.title {background: linear-gradient(107deg, var(--blue) 79%, white 79.25%); color: white;}
.domain.focus div.title::before,
.domain.focus div.title::after {
    content: none;
    position: absolute;
    width: 0; 
    height: 0; 
    border-top: 1.75rem solid transparent;
    border-bottom: 1.75rem solid transparent; 
    border-right: 1.75rem solid var(--blue); 
    left: 0;
    transform: translateX(calc(-100% - 1.25rem));
    z-index: 999;
}
.domain.focus div.title::after {
    border-right: 0;
    border-left: 1.75rem solid var(--blue); 
    left: auto;
    right: 0;
    transform: translateX(calc(100% + 1.25rem));
}
.domain div.title .rating {
    font-weight: bold; 
    font-size: 2.5rem; 
    line-height: 1; 
    color: var(--gray);
    transform: translateX(calc(50% - 1rem));
    position: absolute;
    right: 1.25rem;
}
.domain div.input {padding: 0.55rem 1.25rem 0.55rem; border-top: 1px solid var(--lightergray); background: white;}
.domain div.input input {width: 100%; accent-color: #555; height: 1.5rem;}
.domain.novalue div.input input {accent-color: #555!important;}

.section_recommendations.page__index .listholder .list {background: #03a29d; color: white;}

.listholder.white .list {background: transparent; margin-top: 1rem;}
.listholder.white .domain {cursor: inherit;}
.listholder.white .domain div.title {border-bottom: 0.5rem solid var(--lightergray); padding: 0; margin-right: 2rem; background: transparent;}
.listholder.white .domain div.title .rating {
    width: 4.5rem;
    min-width: 4.5rem; 
    height: 4.5rem; 
    border: 0.5rem solid var(--lightergray); 
    background: var(--lightergray);
    border-radius: 100%;
    margin: -0.5rem -2rem 0 0;
    transform: none;
    top: 0;
}
.listholder.white .domain div.title .rating::before {
    content: "";
    position: absolute;
    width: 3rem;
    background: var(--lightergray);
    height: 3rem;
    transform: skew(-30deg) translate(-0.68rem, 0.9rem);
    z-index: 0;
}
.listholder.white .domain div.title .rating span {
    background: var(--lightergray);
    height: 3.5rem;
    width: 3.5rem;
    display: block;
    border-radius: 100%;
    text-align: center;
    line-height: 3.5rem;
    position: relative;
    z-index: 2;
    font-size: 2.3rem;
}
.domain {position: relative;}
.domain .scenario {padding: 1.5rem 1.5rem 2rem; background: white; display: none; top: 0;}
.domain.focus .scenario {display: block;}
.domain .scenario h2 {
    color: white; 
    padding: 0.5rem 2rem 0.5rem 0.75rem; 
    margin: 0; 
    font-weight: bold; 
    display: inline-block;
    position: absolute;
    clip-path: polygon(0 0, calc(100% - 0.5rem) 0, 100% calc(100% + 1px), 0 calc(100% + 1px));
}
.domain .scenario p:first-child + h2 {margin-top: -2.5rem;}
.domain .scenario p:first-child + h2 + p {padding-top: 0.5rem;}
.domain .scenario strong {font-weight: 800;}
.domain .scenario.best h2 {background: #2ca77b;}
.domain .scenario.worst h2 {background: #d1532a;}
.domain .scenario.best strong {color: #2ca77b;}
.domain .scenario.worst strong {color: #d1532a;}
.domain .scenario img {aspect-ratio: 320/176;}


.popup_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    display: flex; 
    justify-content: center; 
    align-items: center;
    z-index: 99;
    pointer-events: none;
    opacity: 0;
    backdrop-filter: blur(0.15rem);
    transition: opacity 0.2s ease-in-out;
    text-align: center;
    overflow: auto;
    padding-block: 3rem;
}
.popup_overlay.show {pointer-events: all; opacity: 1;}
body.popup_show {overflow: hidden;}
body.popup_show::after {
    content: "";
    left: 0; 
    top: 0;
    position: fixed;
    width: 100%;
    height: 100vh;
    min-height: 100svh;
    background: #023947;
    opacity: 0.3;
    z-index: 9;
    cursor: pointer;
}
.popup_overlay > div {
    width: 100%;
    max-width: 55rem;
    border: 2rem solid white;
    pointer-events: default;
    position: relative;
    padding: 0.4rem;
    background: linear-gradient(-30deg, #d1532a 0%, #eabd34 25%, #a1b740 75%, #2ca77b 100%) no-repeat;
    margin: auto;
}
.popup_overlay > div > div {background: white; padding: 3rem 2.6rem 4rem}
.popup_overlay h3 + h3#titel-aanbeveling {display: none;}
h1 + h3#titel-aanbeveling {margin-top: -1rem; position: relative; bottom: 0.25rem;}

.mobile {display: none;}
.desktop {display: block;}

.icon {width: 3rem; display: inline-block;}
.logos {display: flex; flex-wrap: wrap; flex-direction: row; gap: 0 3rem; align-items: center; justify-content: center; margin-top: 6rem}
.logos > a {position: relative; opacity: 0.3; width: 13rem; mix-blend-mode: multiply;}
.logos > a img {filter: grayscale(1) brightness(0.6) contrast(5); margin: -2.5rem 0; pointer-events: none;}
.logos > a::after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 5rem); mix-blend-mode: lighten; background: #00ccff; opacity: 0.35; margin: -2.5rem 0;}
.logos > a:hover {opacity: 1;}
.logos > a:hover::after {content: none;}
.logos > a:hover img {filter: none;}


@media (min-width: 1260px) {
    html {font-size: clamp(13px, 1.025vw, 16px);}
    .domain .scenario {position: absolute; z-index: 99; width: 34rem; padding: 2rem 2rem 3rem 2rem;}
    .domain .scenario.worst {transform: translateY(-16.5rem) translateX(calc(-100% - 2rem));}
    .domain .scenario.best {transform: translateY(-16.5rem) translateX(calc(100% - 9rem));}
    .domain:nth-child(1) .scenario {margin-top: 12.5rem;}
    .domain:nth-child(2) .scenario {margin-top: 4.5rem;}
    .domain:last-child .scenario {margin-top: -4rem;}
    .domain.focus div.title::before,
    .domain.focus div.title::after {content: "";}
    .domain .scenario.best h2 {
        right: 2rem;
        padding-inline: 2rem 0.75rem; 
        clip-path: polygon(0.5rem 0, 100% 0, 100% calc(100% + 1px), 0 calc(100% + 1px));
    }
}
@media (max-width: 1900px) and (min-width: 1260px) {
    body.section_domains:not(.page__index) .footer {display: none;}
}
@media (max-width: 1259px) {
    .header,.footer {position: relative; padding: 1.25rem 5rem;}
    .main {padding-block: 2.5rem 5rem;}
    .header {top: none;}
    .footer {bottom: none; text-align: center; padding-block: 1.5rem; opacity: 0.35;}
    .footer, .footer a, .footer a:hover {color: var(--dark);}
    .mobile {display: block;}
    .desktop {display: none;}
    .domain .scenario {margin: 1px 0!important;}
    .recommendation .expandbox > div a {color: white;}
    .randomimage {display: none;}
}

@media (max-width: 700px) {
    body {background: none!important;}
    body::after {content: none;}
    .main {padding-inline: 2rem;}
    .popup_overlay > div {border-left: 0;border-right: 0; padding-left: 0; padding-right: 0;}
    .popup_overlay > div > div {padding-inline: 2rem;}
    .header,.footer {padding-inline: 2rem;}
    .colorededges::before {left: 0;}
    .colorededges::after {right: 0;} 
    .button {font-size: 1.5rem; width: auto;}
    .link {font-size: 1rem;}
    .showlarger700 {display: none;}
    .domain div.title h2 {font-size: 1rem;}
}
@media (max-width: 480px) {
    .listholder {margin-inline: -1.6rem;}
    .listholder .list {padding-inline: 1.5rem;}
    h1 + p > br {display: none;}
}

@media (max-width: 400px) {
    html {font-size: 4vw;}
}