/*
	Table of content
    1. CONTENT
        1a. Tekst
        1b. Statement
        1c. CTA
        1d. CTA (balk)
        1e. Lopende band
        1f. Onderwerpen
        1g. Model
        1h. Organisatiescan
        1h. Principes
        1i. Tijdlijn
        1j. Formulier
    RESIZE
*/

/* 1. CONTENT */
/* 1a. Tekst */
/* één kolom: op leesbreedte, met de optie Centreren */
.content-text.col-1 .container {
    max-width: 82rem;
    margin: 0 auto;
}

.content-text.is-centered .container {
    text-align: center;
}

.content-text.is-centered .btn-group {
    justify-content: center;
}

/* tussenkop na lopende tekst (langere teksten zoals de privacyverklaring) */
.content-text :is(p, ul, ol) + :is(h2, h3) {
    margin-top: 5rem;
}

.content-text :is(p, ul, ol) + h4 {
    margin-top: 2rem;
}

.content-text li + li {
    margin-top: .6rem;
}

/* twee kolommen: kop links, tekst rechts */
.content-text.col-2 .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
}

/* 1b. Statement */
.content-statement {
    overflow: hidden;
}

.content-statement .container {
    position: relative;
    text-align: center;
}

.content-statement .label {
    margin-bottom: 3rem;
}

.content-statement .label.caption {
    margin: 4rem 0 0;
}

/* dunne cirkel als motief achter de tekst, 80% van de sectiehoogte */
.content-statement.has-circle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 80%;
    aspect-ratio: 1;
    border: 1px solid var(--color-lightgreen);
    border-radius: 50%;
    opacity: .6;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.content-statement .content-wrapper {
    position: relative;
}

/* statementtekst: H3 (standaard) of H2 via het veld Tekstgrootte */
.content-statement .content-wrapper p {
    font-family: var(--font-family-heading);
    font-size: 4.4rem;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--color-verydarkgreen);
}

.content-statement .content-wrapper.is-large p {
    font-size: 6rem;
}

.content-statement .content-wrapper em {
    color: var(--color-green);
}

.bgcolor-verydarkgreen.content-statement .content-wrapper p {
    color: var(--color-offwhite);
}

.bgcolor-verydarkgreen.content-statement .content-wrapper em {
    color: var(--color-lightgreen);
}

/* 1c. CTA */
.content-cta .container {
    display: grid;
    grid-template-columns: 40rem 1fr;
    align-items: center;
    gap: 10rem;
}

.content-cta .image-wrapper {
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}

.content-cta .image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 1d. CTA (balk) */
.content-cta-bar .content-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem 4rem;
}

.content-cta-bar .content-wrapper > * {
    margin: 0;
}

/* 1e. Lopende band */
.content-marquee {
    padding-left: 0;
    padding-right: 0;
}

.marquee {
    display: flex;
    overflow: hidden;
    padding: 2.6rem 0;
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
}

.marquee-track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4rem;
    margin: 0;
    padding: 0 4rem 0 0;
    list-style: none;
    animation: marquee 45s linear infinite;
}

.marquee-track li {
    display: flex;
    align-items: center;
    gap: 4rem;
    font-family: var(--font-family-heading);
    font-size: 3.4rem;
    font-style: italic;
    line-height: 1.1;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--color-verydarkgreen);
}

.marquee-track i {
    font-size: 2.2rem;
    color: var(--color-green);
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

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

/* 1f. Onderwerpen */
.content-topics .container {
    display: grid;
    grid-template-columns: 30rem minmax(0, 80rem);
    justify-content: space-between;
    gap: 10rem;
}

/* zijbalk blijft staan tijdens het scrollen; begint op de hoogte van de eerste titel */
.topics-sidebar {
    position: sticky;
    top: 12rem;
    align-self: start;
    padding-top: 1.4rem;
}

.topics-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.topics-nav li {
    border-top: 1px solid var(--color-divider);
}

.topics-nav a {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1.4rem 0;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-black);
    text-decoration: none;
}

.topics-nav a::before {
    content: '';
    flex-shrink: 0;
    width: 0;
    height: 2px;
    margin-right: -1.4rem;
    background-color: var(--color-orange);
    transition: width .3s ease, margin .3s ease;
}

.topics-nav a:hover {
    color: var(--color-green);
}

.topics-nav a.is-active {
    font-weight: 500;
    color: var(--color-verydarkgreen);
}

.topics-nav a.is-active::before {
    width: 1.8rem;
    margin-right: 0;
}

.topics-sidebar-text {
    padding-top: 3rem;
    border-top: 1px solid var(--color-divider);
}

.topics-sidebar-text .btn-group {
    margin-top: 1.6rem;
}

.topic {
    padding: 6rem 0;
    border-top: 1px solid var(--color-divider);
    scroll-margin-top: 10rem;
}

.topic:first-child {
    padding-top: 0;
    border-top: 0;
}

.topic:last-child {
    padding-bottom: 0;
}

.topic h2 {
    margin-bottom: 2rem;
}

/* tussenkop na lopende tekst binnen een onderwerp */
.topic :is(p, ul, ol) + :is(h3, h4) {
    margin-top: 3rem;
}

.topic .btn-group {
    gap: 1rem 3rem;
    margin-top: 3rem;
}

/* referenties: afzender onder de volledige recensie */
.topic .testimonial-credit {
    margin-top: 3rem;
    color: var(--color-green);
}

/* doorverwijzing naar een andere dienst onderaan een onderwerp */
.topic-referral {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--color-divider);
}

.topic-referral p {
    color: var(--color-verydarkgreen);
}

.topic-referral .btn-group {
    margin-top: 1rem;
}

/* 1g. Model */
.content-model {
    --model-bg: var(--color-white);
}

.content-model.bgcolor-palegreen {
    --model-bg: var(--color-palegreen);
}

.content-model .content-wrapper {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
}

/* zes onderdelen rond een ring, met de samenhang in het midden */
.model {
    --r: 30rem;
    --cy: 33.6rem;
    --part-height: 17.5rem;
    position: relative;
    max-width: 104rem;
    height: calc(var(--cy) + var(--r) - 3.6rem + var(--part-height));
    margin: 6rem auto 0;
}

.model::before,
.model::after {
    content: '';
    position: absolute;
    left: 50%;
    top: var(--cy);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.model::before {
    width: calc(var(--r) * 2);
    border: 1px dashed var(--color-green);
}

.model::after {
    width: 36rem;
    border: 1px solid var(--color-lightgreen);
}

.model-center {
    position: absolute;
    left: 50%;
    top: var(--cy);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 28rem;
    aspect-ratio: 1;
    padding: 0 4rem;
    border-radius: 50%;
    background-color: var(--color-white);
    text-align: center;
    transform: translate(-50%, -50%);
}

/* op een witte achtergrond is het midden lichtgroen */
.bgcolor-white .model-center {
    background-color: var(--color-palegreen);
}

.model-center img {
    width: 8rem;
    margin-bottom: .8rem;
}

.model-center h3 {
    margin-bottom: 0;
}

.model-center p.small {
    font-size: 1.3rem;
}

.model-parts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.model-part {
    position: absolute;
    left: 50%;
    top: var(--cy);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 23rem;
    padding-bottom: .8rem;
    background-color: var(--model-bg);
    text-align: center;
    transform: translate(calc(-50% + var(--x) * var(--r)), calc(-3.6rem + var(--y) * var(--r)));
}

/* posities op de ring (cos/sin van -90, -30, 30, 90, 150 en 210 graden) */
.model-part:nth-child(1) { --x: 0; --y: -1; }
.model-part:nth-child(2) { --x: .866; --y: -.5; }
.model-part:nth-child(3) { --x: .866; --y: .5; }
.model-part:nth-child(4) { --x: 0; --y: 1; }
.model-part:nth-child(5) { --x: -.866; --y: .5; }
.model-part:nth-child(6) { --x: -.866; --y: -.5; }

.model-part .icon-circle {
    width: 7.2rem;
    height: 7.2rem;
    margin-bottom: 1rem;
    font-size: 3rem;
}

.model-part h3 {
    margin-bottom: .6rem;
}

.model-result {
    display: flex;
    align-items: center;
    gap: 4rem;
    max-width: 104rem;
    margin: 8rem auto 0;
    padding: 3rem 4rem;
    border-radius: var(--border-radius-sm);
}

.model-result .icon-circle {
    width: 6.4rem;
    height: 6.4rem;
    background-color: var(--color-lightgreen);
    font-size: 2.8rem;
    color: var(--color-verydarkgreen);
}

.model-result h3 {
    margin-bottom: 1.2rem;
}

.model-result ul.checklist {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 3rem;
    margin: 0;
}

.model-result ul.checklist li {
    padding-left: 2.4rem;
    font-size: 1.4rem;
}

.model-result ul.checklist li::before {
    font-size: 1.4rem;
}

/* 1h. Organisatiescan */
/* de gekantelde badge mag niet voor horizontaal scrollen zorgen */
.content-organisation-scan {
    overflow: hidden;
}

.scan-intro {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 54fr);
    align-items: start;
    gap: 8rem;
}

.scan-intro .image-wrapper {
    position: relative;
    aspect-ratio: 3 / 2;
}

.scan-intro .image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-sm);
    object-fit: cover;
}

/* ronde, licht gekantelde badge op de afbeelding */
.scan-intro .badge {
    position: absolute;
    right: -2rem;
    top: -4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16rem;
    aspect-ratio: 1;
    padding: .4rem 2.4rem 0;
    border-radius: 50%;
    background-color: var(--color-lightgreen);
    font-family: var(--font-family-heading);
    font-size: 1.9rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.15;
    text-align: center;
    color: var(--color-verydarkgreen);
    transform: rotate(8deg);
}

.scan-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    margin-top: 6rem;
}

.scan-column {
    padding-top: 3rem;
    border-top: 1px solid var(--color-divider);
}

.scan-column-title {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-bottom: 1.8rem;
}

.scan-column-title h3 {
    margin: 0;
}

.scan-column h4 {
    font-size: 2.4rem;
}

.scan-bar {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-top: 6rem;
    padding: 3rem 4rem;
    border-radius: var(--border-radius-sm);
    background-color: var(--color-palegreen);
    --icon-bg: var(--color-white);
}

/* op een lichtgroene sectie wordt de balk wit en het icoon lichtgroen */
.bgcolor-palegreen .scan-bar {
    background-color: var(--color-white);
    --icon-bg: var(--color-palegreen);
}

.scan-bar .icon-circle {
    width: 6.4rem;
    height: 6.4rem;
    font-size: 2.8rem;
    color: var(--color-green);
}

.scan-bar p {
    flex: 1;
    margin: 0 1rem 0 0;
}

/* 1h. Principes */
.content-principles .content-wrapper {
    text-align: center;
}

.content-principles .content-wrapper + .principles {
    margin-top: 6rem;
}

/* vier principes in twee kolommen, de ring met boom in het midden */
.principles {
    display: grid;
    grid-template-columns: minmax(0, 38fr) minmax(0, 44fr) minmax(0, 38fr);
    grid-template-areas:
        "p1 ring p2"
        "p3 ring p4";
    gap: 6rem 0;
}

/* de ring is het eerste kind; de principes volgen daarna */
.principle:nth-child(2) { grid-area: p1; }
.principle:nth-child(3) { grid-area: p2; }
.principle:nth-child(4) { grid-area: p3; }
.principle:nth-child(5) { grid-area: p4; }

.principle {
    padding-top: 3rem;
    border-top: 1px solid var(--color-divider);
}

.principle-title {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
}

.principle-number {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--color-verydarkgreen);
    font-family: var(--font-family-heading);
    font-size: 2rem;
    line-height: 1;
    color: var(--color-white);
}

.principle-title h3 {
    margin: 0;
}

.principle p {
    padding-left: 6rem;
}

.principles-ring {
    position: relative;
    grid-area: ring;
    align-self: center;
    justify-self: center;
    width: 77.2%;
    max-width: 34rem;
    aspect-ratio: 1;
}

.principles-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--color-lightgreen);
    border-radius: 50%;
}

.ring-center {
    position: absolute;
    inset: 22%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-palegreen);
}

.bgcolor-palegreen .ring-center {
    background-color: var(--color-white);
}

.ring-center img {
    width: 45%;
}

/* iconen op de ring, linksboven / rechtsboven / linksonder / rechtsonder */
.principles-ring .icon-circle {
    position: absolute;
    width: 7.2rem;
    height: 7.2rem;
    border: 6px solid var(--color-white);
    box-sizing: content-box;
    font-size: 3rem;
    transform: translate(-50%, -50%);
}

/* het midden is het eerste kind; de iconen volgen daarna (op de ring, onder 45 graden) */
.principles-ring .icon-circle:nth-child(2) { left: 14.6%; top: 14.6%; }
.principles-ring .icon-circle:nth-child(3) { left: 85.4%; top: 14.6%; }
.principles-ring .icon-circle:nth-child(4) { left: 14.6%; top: 85.4%; }
.principles-ring .icon-circle:nth-child(5) { left: 85.4%; top: 85.4%; }

.content-principles .content-bottom {
    margin: 6rem 0 0;
    text-align: center;
}

.content-principles .content-bottom h4 {
    color: var(--color-darkgreen);
}

/* 1i. Tijdlijn */
.content-timeline .content-wrapper {
    max-width: 82rem;
    margin: 0 auto;
    text-align: center;
}

.timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2.5rem;
    margin: 6rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

/* verbindingslijn door het midden van de iconen */
.timeline::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: 4rem;
    height: 1px;
    background-color: var(--color-green);
}

.timeline-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.timeline-step .icon-circle {
    width: 8rem;
    height: 8rem;
    margin-bottom: 1.4rem;
    font-size: 3.2rem;
}

.timeline-step .label {
    margin-bottom: 1rem;
}

.timeline-step h3 {
    margin-bottom: 1rem;
}

.content-timeline .content-bottom {
    margin: 6rem auto 0;
}

.content-timeline .content-bottom .btn-group {
    justify-content: center;
}

/* 1j. Formulier */
.content-form .container {
    display: grid;
    grid-template-columns: 54rem 58rem;
    justify-content: space-between;
    align-items: start;
    gap: 6rem;
}

.contact-details {
    margin: 3rem 0 0;
    padding: 0;
    list-style: none;
}

.contact-details li {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 1.8rem 0;
    border-top: 1px solid var(--color-divider);
}

.contact-details .icon-circle {
    width: 4.4rem;
    height: 4.4rem;
    font-size: 1.8rem;
}

.contact-details .label {
    margin-bottom: .2rem;
}

.contact-details a {
    color: var(--color-verydarkgreen);
    text-decoration: none;
}

.contact-details a:hover {
    color: var(--color-green);
}

.contact-person {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-divider);
}

.contact-person-image {
    flex-shrink: 0;
    width: 7.2rem;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--color-lightgreen);
}

.contact-person-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.contact-person > div {
    display: flex;
    flex-direction: column;
}

.contact-person-name {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-verydarkgreen);
}

.contact-person .small,
.content-form .content-bottom {
    color: var(--color-darkgreen);
}

.content-form .content-bottom {
    margin-top: 3rem;
    font-size: 1.4rem;
}

.form-wrapper {
    padding: 4rem;
    border-radius: var(--border-radius-sm);
    background-color: var(--color-palegreen);
}

.form-wrapper > h2 {
    margin-bottom: 2.4rem;
}

/* RESIZE */
@media (max-width: 1220px) {
    /* kleinere ring; de hoogte van .model rekent mee */
    .model {
        --r: 26rem;
        --cy: 30rem;
        --part-height: 20rem;
    }

    .model::after {
        width: 30rem;
    }

    .model-center {
        width: 24rem;
        padding: 0 3rem;
    }

    .model-part {
        width: 20rem;
    }

    .content-form .container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1024px) {
    .content-statement .label {
        margin-bottom: 2rem;
    }

    .content-statement .label.caption {
        margin: 3rem 0 0;
    }

    .content-statement .content-wrapper p {
        font-size: 3.4rem;
        line-height: 1.3;
    }

    .content-statement .content-wrapper.is-large p {
        font-size: 4.4rem;
    }

    /* principes: ring boven de principes, daaronder twee kolommen */
    .principles {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "ring ring"
            "p1 p2"
            "p3 p4";
        gap: 5rem 4rem;
    }

    .content-principles .content-wrapper + .principles {
        margin-top: 4rem;
    }

    .principles-ring {
        width: 100%;
        max-width: 38rem;
    }

    .principles-ring .icon-circle {
        width: 5.6rem;
        height: 5.6rem;
        font-size: 2.4rem;
    }

    .principle p {
        padding-left: 0;
    }

    .content-text.col-2 .container {
        gap: 4rem;
    }

    .content-cta .container {
        grid-template-columns: 30rem 1fr;
        gap: 6rem;
    }

    /* zijbalk boven de onderwerpen in plaats van ernaast */
    .content-topics .container {
        grid-template-columns: 1fr;
        gap: 6rem;
    }

    .topics-sidebar {
        position: static;
        padding-top: 0;
    }

    .topics-sidebar-text {
        display: none;
    }

    .topics-nav ul {
        border-bottom: 1px solid var(--color-divider);
    }

    .model-result {
        gap: 2rem;
        padding: 3rem;
    }

    .scan-intro {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    /* afbeelding over de volle breedte, in de verhouding van de paginaheader */
    .scan-intro .image-wrapper {
        aspect-ratio: 5 / 2;
    }

    .scan-columns {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .scan-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    .scan-bar .icon-circle {
        width: 5.6rem;
        height: 5.6rem;
        font-size: 2.4rem;
    }

    .topic {
        padding: 4rem 0;
    }

    .timeline {
        grid-template-columns: 1fr;
        gap: 3rem;
        max-width: 54rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* tijdlijn verticaal: lijn links langs de iconen */
    .timeline::before {
        left: 3.2rem;
        right: auto;
        top: 3.2rem;
        bottom: 3.2rem;
        width: 1px;
        height: auto;
    }

    .timeline-step {
        display: grid;
        grid-template-columns: 6.4rem 1fr;
        column-gap: 2rem;
        align-items: start;
        text-align: left;
    }

    .timeline-step .icon-circle {
        grid-row: 1 / span 4;
        width: 6.4rem;
        height: 6.4rem;
        margin: 0;
        font-size: 2.6rem;
    }

    .content-form .container {
        grid-template-columns: 1fr;
    }

    .form-wrapper {
        padding: 3rem 2rem;
    }
}

@media (max-width: 767px) {
    /* twee kolommen onder elkaar */
    .content-text.col-2 .container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .content-text :is(p, ul, ol) + :is(h2, h3) {
        margin-top: 3.5rem;
    }

    .content-principles .content-wrapper,
    .content-principles .content-bottom {
        text-align: left;
    }

    .principles {
        grid-template-columns: 1fr;
        grid-template-areas:
            "ring"
            "p1"
            "p2"
            "p3"
            "p4";
        gap: 3rem;
    }

    .principles-ring {
        max-width: 24rem;
    }

    /* gecentreerde tekst mobiel links */
    .content-text.col-1 .container,
    .content-model .content-wrapper,
    .content-timeline .content-wrapper {
        text-align: left;
    }

    .content-text.col-1 .btn-group,
    .content-timeline .content-bottom .btn-group {
        justify-content: flex-start;
    }

    .content-statement .content-wrapper p {
        font-size: 3rem;
    }

    .content-statement .content-wrapper.is-large p {
        font-size: 3.4rem;
    }

    .content-cta .container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .content-cta .image-wrapper {
        width: 100%;
        max-width: 26rem;
        margin: 0 auto;
    }

    .timeline {
        max-width: inherit;
    }

    .topic {
        padding: 3rem 0;
    }

    .scan-intro .image-wrapper {
        aspect-ratio: 5 / 3;
    }

    .marquee {
        padding: 1.8rem 0;
    }

    .marquee-track,
    .marquee-track li {
        gap: 2rem;
    }

    .marquee-track {
        padding-right: 2rem;
    }

    .marquee-track li {
        font-size: 2.4rem;
    }

    .marquee-track i {
        font-size: 1.6rem;
    }

    /* model: geen ring, maar de onderdelen als kaartjes onder het midden */
    .model {
        height: auto;
        margin: 4rem 0 0;
        transform: none;
    }

    .model::before,
    .model::after {
        display: none;
    }

    .model-center {
        position: static;
        width: 100%;
        aspect-ratio: auto;
        margin-bottom: 1.5rem;
        padding: 3rem 2rem;
        border-radius: var(--border-radius-sm);
        transform: none;
    }

    .model-parts {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .model-part {
        position: static;
        width: auto;
        padding: 3rem 2rem;
        border-radius: var(--border-radius-sm);
        background-color: var(--color-white);
        transform: none;
    }

    .model-center img {
        width: 9.4rem;
    }

    .model-center h3 {
        margin-bottom: .8rem;
    }

    .model-center p.small {
        font-size: 1.4rem;
    }

    .model-part .icon-circle {
        width: 5.6rem;
        height: 5.6rem;
        font-size: 2.4rem;
    }

    /* op een witte sectie zijn de kaartjes lichtgroen */
    .bgcolor-white .model-part {
        background-color: var(--color-palegreen);
    }

    .model-result {
        flex-direction: column;
        padding: 3rem 2rem;
        align-items: flex-start;
        margin-top: 1.5rem;
    }

    .model-result .icon-circle {
        width: 5.6rem;
        height: 5.6rem;
        font-size: 2.8rem;
    }

    .model-result ul.checklist {
        flex-direction: column;
    }

    .scan-intro .badge {
        right: 1rem;
        width: 13rem;
        font-size: 1.6rem;
    }

    .scan-bar {
        padding: 3rem 2rem;
    }
}

@media (max-width: 499px) {
}