/* /Components/Pages/Blog/VtuLancering.razor.rz.scp.css */
/* ==========================================================================
   Blog: lancering VTU Uitvaart Vakbeurs.
   Measurements follow the Figma frame "08 — Blog / Lancering VTU" (1728px wide).
   ========================================================================== */

.post[b-i3xj12z716] {
    width: 100%;
    overflow-x: clip;
}

/* ---- Hero -------------------------------------------------------------- */
.post-hero[b-i3xj12z716] {
    position: relative;
    padding: 200px 20px 96px;
    background: var(--nachtblauw);
    color: var(--creme);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
}

.post-hero__crumb[b-i3xj12z716] {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

.post-hero__title[b-i3xj12z716] {
    width: 960px;
    max-width: 100%;
}

/* ---- Artikelbeeld (bovenste 320px op nachtblauw) ---------------------- */
.post-visual[b-i3xj12z716] {
    padding: 0 20px;
    background: linear-gradient(var(--nachtblauw) 320px, var(--creme) 320px);
}

/* Uitsnede uit Figma: beeld 146,25% hoog, 6,25% naar boven. */
.post-visual__image[b-i3xj12z716] {
    width: 1248px;
    max-width: 100%;
    height: 640px;
    margin: 0 auto;
    border-radius: 32px;
    object-fit: cover;
    object-position: 50% 13.5%;
}

/* ---- Artikel ----------------------------------------------------------- */
.post-body[b-i3xj12z716] {
    width: 760px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding: 96px 0 120px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    color: var(--nachtblauw);
    font-size: 20px;
    line-height: 32px;
}

.post-body__intro[b-i3xj12z716] {
    font-size: 46px;
    line-height: 52px;
}

.post-body__statement[b-i3xj12z716] {
    padding: 12px 0;
    font-size: 30px;
    line-height: 38px;
}

.post-body__quote[b-i3xj12z716] {
    margin: 24px 0;
    padding: 8px 0 8px 40px;
    border-left: 2px solid var(--nachtblauw);
    font-size: 40px;
    font-style: italic;
    line-height: 48px;
}

.post-body__image[b-i3xj12z716] {
    width: 100%;
    height: 480px;
    margin: 8px 0 16px;
    border-radius: 20px;
    object-fit: cover;
}

.post-body__subtitle[b-i3xj12z716] {
    padding-top: 16px;
    font-size: 30px;
    line-height: 48px;
}

.post-body__closing[b-i3xj12z716] {
    padding-top: 16px;
    font-size: 40px;
    font-style: italic;
    line-height: 48px;
}

/* ---- Uitrol-fases ------------------------------------------------------ */
.post-phases[b-i3xj12z716] {
    padding: 8px 0;
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.post-phase[b-i3xj12z716] {
    flex: 1 0 0;
    min-width: 0;
    padding: 24px 24px 28px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: var(--creme-2);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
}

.post-phase--future[b-i3xj12z716] {
    border: 1px dashed var(--nachtblauw);
    background: transparent;
}

.post-phase__date[b-i3xj12z716] {
    font-size: 24px;
    font-weight: 700;
    line-height: 48px;
    white-space: nowrap;
}

/* ---- Delen ------------------------------------------------------------- */
.post-share[b-i3xj12z716] {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--nachtblauw);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 24px;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
}

.post-share__label[b-i3xj12z716] {
    font-weight: 600;
}

.post-share a[b-i3xj12z716],
.post-share button[b-i3xj12z716] {
    font-weight: 500;
    text-decoration: underline;
    text-underline-position: from-font;
}

.post-share a:hover[b-i3xj12z716],
.post-share button:hover[b-i3xj12z716] {
    opacity: .75;
}

/* ---- Responsive fallbacks --------------------------------------------- */
@media (max-width: 900px) {
    .post-hero[b-i3xj12z716] {
        padding-top: 140px;
        padding-bottom: 64px;
        gap: 20px;
    }

    .post-hero__title[b-i3xj12z716] {
        font-size: 40px;
        line-height: 1.15;
    }

    .post-visual[b-i3xj12z716] {
        background: linear-gradient(var(--nachtblauw) 50%, var(--creme) 50%);
    }

    .post-visual__image[b-i3xj12z716] {
        height: auto;
        aspect-ratio: 1248 / 640;
        border-radius: 20px;
    }

    .post-body[b-i3xj12z716] {
        padding: 56px 0 80px;
        gap: 24px;
        font-size: 18px;
        line-height: 29px;
    }

    .post-body__intro[b-i3xj12z716] {
        font-size: 32px;
        line-height: 38px;
    }

    .post-body__statement[b-i3xj12z716],
    .post-body__subtitle[b-i3xj12z716] {
        font-size: 24px;
        line-height: 32px;
    }

    .post-body__quote[b-i3xj12z716],
    .post-body__closing[b-i3xj12z716] {
        font-size: 28px;
        line-height: 36px;
    }

    .post-body__quote[b-i3xj12z716] {
        margin: 8px 0;
        padding-left: 24px;
    }

    .post-body__image[b-i3xj12z716] {
        height: auto;
        aspect-ratio: 760 / 480;
    }

    .post-phases[b-i3xj12z716] {
        flex-direction: column;
        gap: 12px;
    }

    .post-phase[b-i3xj12z716] {
        flex: none;
        padding: 16px 20px 20px;
        gap: 0;
    }

    .post-phase__date[b-i3xj12z716] {
        font-size: 20px;
        line-height: 36px;
    }

    .post-share[b-i3xj12z716] {
        margin-top: 16px;
    }

    /* Tikdoelen minimaal 44px hoog. */
    .post-share a[b-i3xj12z716],
    .post-share button[b-i3xj12z716] {
        padding: 10px 0;
    }

    .post-share__label[b-i3xj12z716] {
        flex-basis: 100%;
    }
}
/* /Components/Pages/HoeWerktHet.razor.rz.scp.css */
/* ==========================================================================
   Hoe werkt het? – styles for /hoe-werkt-het only.
   Measurements follow the Figma frame "02 — Hoe werkt het?" (1728px wide).
   ========================================================================== */

.hwh[b-ws14jiwfn2] {
    width: 100%;
    overflow-x: clip;
}

/* ---- Hero -------------------------------------------------------------- */
.hwh-hero[b-ws14jiwfn2] {
    position: relative;
    height: 930px;
    overflow: hidden;
    color: var(--creme);
}

.hwh-hero__image[b-ws14jiwfn2] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

/* Figma bakes the darkening into the photo itself: ~42% darker at the top, ~52% at the bottom. */
.hwh-hero__overlay[b-ws14jiwfn2] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 50%, rgba(0, 0, 0, 0.52) 100%);
}

.hwh-hero__content[b-ws14jiwfn2] {
    position: relative;
    padding-top: 195px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.hwh-hero__text[b-ws14jiwfn2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
}

.hwh-hero__lead[b-ws14jiwfn2] {
    width: 527px;
    max-width: calc(100% - 40px);
    color: var(--wit);
}

/* ---- Stappen ----------------------------------------------------------- */
.steps[b-ws14jiwfn2] {
    position: relative;
    height: 2667px;
    overflow: hidden;
    background: var(--creme);
}

.steps__line[b-ws14jiwfn2] {
    position: absolute;
    top: 87px;
    bottom: 0;
    left: calc(50% - 2px);
    width: 5px;
    background: var(--creme-2);
}

.steps__list[b-ws14jiwfn2] {
    position: relative;
    width: 1286px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 87px;
    display: flex;
    flex-direction: column;
    gap: 120px;
}

.step-row[b-ws14jiwfn2] {
    display: flex;
    align-items: center;
    gap: 74px;
}

.step-card[b-ws14jiwfn2] {
    width: 556px;
    flex-shrink: 0;
    padding: 50px;
    border-radius: 20px;
    background: var(--creme-2);
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.step-card__title[b-ws14jiwfn2] {
    width: 456px;
    font-size: 42px;
    line-height: 52px;
}

.step-card__text[b-ws14jiwfn2] {
    color: #666;
}

.step-row__dot[b-ws14jiwfn2] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--creme-2);
    border: 2px solid var(--wit);
}

.step-row__image[b-ws14jiwfn2] {
    flex-shrink: 0;
    width: 556px;
    height: 394px;
}

/* ---- Zo maak je het ---------------------------------------------------- */
.how[b-ws14jiwfn2] {
    position: relative;
    height: 1751px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.how__title[b-ws14jiwfn2] {
    position: absolute;
    top: 155px;
    left: 0;
    right: 0;
    font-size: 62px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.how__visual[b-ws14jiwfn2] {
    position: absolute;
    top: 332px;
    left: 76px;
    width: 1594px;
    pointer-events: none;
}

.how__visual img[b-ws14jiwfn2] {
    width: 1594px;
    height: auto;
}

.how__grid[b-ws14jiwfn2] {
    position: absolute;
    top: 1280px;
    left: calc(50% - 472px);
    width: 1020px;
    height: 313px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 40px;
}

.feature__desc--nowrap[b-ws14jiwfn2] {
    white-space: nowrap;
}

/* ---- Kies uw uitvoering ------------------------------------------------ */
.editions[b-ws14jiwfn2] {
    position: relative;
    height: 1367px;
    overflow: hidden;
    background: var(--creme-2);
    padding-top: 121px;
}

.editions__head[b-ws14jiwfn2] {
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    white-space: nowrap;
}

.editions__lead[b-ws14jiwfn2] {
    color: #666;
}

.editions__cards[b-ws14jiwfn2] {
    position: absolute;
    top: 315px;
    left: calc(50% - 710px);
    display: flex;
    gap: 20px;
}

.edition[b-ws14jiwfn2] {
    position: relative;
    width: 699px;
    height: 943px;
    border-radius: 40px;
    overflow: hidden;
    color: var(--nachtblauw);
}

.edition--soft[b-ws14jiwfn2] {
    background: #b7cdb7;
}

.edition--hard[b-ws14jiwfn2] {
    background: #dccdd2;
}

.edition__image[b-ws14jiwfn2] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 49.05%;
    object-fit: cover;
}

.edition__title[b-ws14jiwfn2] {
    position: absolute;
    top: 491px;
    font-size: 52px;
    line-height: 1.1;
    white-space: nowrap;
}

.edition__desc[b-ws14jiwfn2] {
    position: absolute;
    top: 574px;
    font-size: 20px;
    line-height: 24px;
    white-space: nowrap;
}

.edition__list[b-ws14jiwfn2] {
    position: absolute;
    top: 663px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    white-space: nowrap;
}

.edition__list li[b-ws14jiwfn2] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.edition__check[b-ws14jiwfn2] {
    flex-shrink: 0;
}

.edition__button[b-ws14jiwfn2] {
    position: absolute;
    top: 832px;
    left: 38px;
    width: 623px;
    height: 65px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    font-size: 17.67px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
    transition: background-color .2s ease;
}

.edition__button:hover[b-ws14jiwfn2] {
    background: rgba(255, 255, 255, 0.35);
}

.edition__button--disabled[b-ws14jiwfn2],
.edition__button--disabled:hover[b-ws14jiwfn2] {
    background: rgba(255, 255, 255, 0.3);
    color: rgba(34, 49, 59, 0.3);
    cursor: default;
}

.edition--soft .edition__title[b-ws14jiwfn2],
.edition--soft .edition__desc[b-ws14jiwfn2] {
    left: 50px;
}

.edition--soft .edition__list[b-ws14jiwfn2] {
    left: 58px;
}

.edition--hard .edition__title[b-ws14jiwfn2] {
    left: 65px;
}

.edition--hard .edition__desc[b-ws14jiwfn2] {
    left: 65px;
    width: 601px;
    line-height: 30px;
    white-space: normal;
}

.edition--hard .edition__list[b-ws14jiwfn2] {
    left: 73px;
}

/* ---- Veelgestelde vragen ---------------------------------------------- */
.faq[b-ws14jiwfn2] {
    min-height: 958px;
    background: var(--creme);
    padding-top: 89px;
    padding-bottom: 121px;
}

.faq__head[b-ws14jiwfn2] {
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
}

.faq__title[b-ws14jiwfn2] {
    height: 179px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.faq__list[b-ws14jiwfn2] {
    width: 774px;
    max-width: calc(100% - 40px);
    margin: 54px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq__more[b-ws14jiwfn2] {
    margin: 66px 0 0 calc(50% - 382px);
}

/* ---- Klaar om te beginnen --------------------------------------------- */
.cta[b-ws14jiwfn2] {
    position: relative;
    height: 686px;
    overflow: hidden;
    color: var(--creme);
}

.cta__image[b-ws14jiwfn2] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta__overlay[b-ws14jiwfn2] {
    position: absolute;
    inset: 0;
    background: rgba(34, 49, 59, 0.8);
}

.cta__content[b-ws14jiwfn2] {
    position: relative;
    width: 601px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 229px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 53px;
    text-align: center;
}

.cta__text[b-ws14jiwfn2] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.cta__title[b-ws14jiwfn2] {
    font-size: 62px;
    line-height: 1.1;
}

.cta__lead[b-ws14jiwfn2] {
    font-size: 20px;
    line-height: 30px;
}

.cta__lead a[b-ws14jiwfn2] {
    text-decoration: underline;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

/* ---- Responsive fallbacks --------------------------------------------- */
@media (max-width: 1500px) {
    .steps[b-ws14jiwfn2],
    .how[b-ws14jiwfn2],
    .editions[b-ws14jiwfn2],
    .faq[b-ws14jiwfn2] {
        height: auto;
        padding-bottom: 100px;
    }

    .steps__line[b-ws14jiwfn2] {
        display: none;
    }

    .steps__list[b-ws14jiwfn2] {
        width: min(1286px, calc(100% - 40px));
    }

    .step-row[b-ws14jiwfn2] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
    }

    .step-row__dot[b-ws14jiwfn2] {
        display: none;
    }

    .step-card[b-ws14jiwfn2] {
        width: min(556px, 100%);
    }

    .step-card__title[b-ws14jiwfn2] {
        width: auto;
    }

    .step-row__image[b-ws14jiwfn2] {
        width: min(556px, 100%);
        height: auto;
    }

    .how__title[b-ws14jiwfn2] {
        position: relative;
        top: 0;
        padding-top: 120px;
        white-space: normal;
    }

    .how__visual[b-ws14jiwfn2] {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        margin-top: 60px;
    }

    .how__visual img[b-ws14jiwfn2] {
        width: 100%;
    }

    .how__grid[b-ws14jiwfn2] {
        position: relative;
        top: 0;
        left: 0;
        width: min(1020px, calc(100% - 40px));
        height: auto;
        margin: 40px auto 0;
    }

    .editions__cards[b-ws14jiwfn2] {
        position: relative;
        top: 0;
        left: 0;
        margin: 60px auto 0;
        width: min(1418px, calc(100% - 40px));
        flex-wrap: wrap;
        justify-content: center;
    }

    .faq__more[b-ws14jiwfn2] {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 900px) {
    .hwh-hero[b-ws14jiwfn2] {
        height: auto;
        min-height: 620px;
        padding-bottom: 80px;
    }

    .hwh-hero__content[b-ws14jiwfn2] {
        padding-top: 140px;
    }

    .hwh-hero__text[b-ws14jiwfn2],
    .how__title[b-ws14jiwfn2],
    .editions__head[b-ws14jiwfn2],
    .faq__title[b-ws14jiwfn2],
    .edition__title[b-ws14jiwfn2],
    .edition__desc[b-ws14jiwfn2],
    .edition__list[b-ws14jiwfn2] {
        white-space: normal;
    }

    .hwh-hero h1[b-ws14jiwfn2],
    .how__title[b-ws14jiwfn2],
    .editions__head h2[b-ws14jiwfn2],
    .faq__title[b-ws14jiwfn2],
    .cta__title[b-ws14jiwfn2] {
        font-size: 40px;
        line-height: 1.1;
    }

    .faq__title[b-ws14jiwfn2] {
        height: auto;
    }

    .step-card[b-ws14jiwfn2] {
        padding: 30px;
    }

    .step-card__title[b-ws14jiwfn2] {
        font-size: 32px;
        line-height: 40px;
    }

    .how__grid[b-ws14jiwfn2] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .feature__desc--nowrap[b-ws14jiwfn2] {
        white-space: normal;
    }

    .edition[b-ws14jiwfn2] {
        width: 100%;
        height: auto;
        padding: 0 24px 24px;
    }

    .edition__image[b-ws14jiwfn2] {
        position: relative;
        height: auto;
        aspect-ratio: 3 / 2;
        margin: 0 -24px;
        width: calc(100% + 48px);
    }

    .edition__title[b-ws14jiwfn2],
    .edition__desc[b-ws14jiwfn2],
    .edition__list[b-ws14jiwfn2],
    .edition__button[b-ws14jiwfn2] {
        position: static;
        margin-top: 24px;
        width: auto;
    }

    .edition__title[b-ws14jiwfn2] {
        font-size: 40px;
    }

    .edition--hard .edition__desc[b-ws14jiwfn2] {
        width: auto;
    }

    .cta__content[b-ws14jiwfn2] {
        padding-top: 120px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ==========================================================================
   Home page – styles for the root path only.
   Measurements follow the Figma frame "01 — Home" (1728px wide).
   ========================================================================== */

.home[b-ytyqv2b66j] {
    width: 100%;
    overflow-x: clip;
}

/* ---- Hero -------------------------------------------------------------- */
.hero[b-ytyqv2b66j] {
    position: relative;
    height: 1118px;
    overflow: hidden;
    color: var(--creme);
}

.hero__video[b-ytyqv2b66j] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__overlay[b-ytyqv2b66j] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
        linear-gradient(180.33deg, rgba(34, 49, 59, 0) 0.43%, rgba(34, 49, 59, 0) 53.23%, #22313b 92.72%);
}

.hero__content[b-ytyqv2b66j] {
    position: relative;
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.hero__text[b-ytyqv2b66j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.hero__title[b-ytyqv2b66j] {
    white-space: nowrap;
}

.hero__actions[b-ytyqv2b66j] {
    display: flex;
    align-items: center;
    gap: 19px;
}

/* Nieuwskaart rechtsonder in de header (Figma 612:772): rechterrand gelijk aan de 1420px-container. */
.news-card[b-ytyqv2b66j] {
    position: absolute;
    right: max(20px, calc(50% - 711px));
    bottom: 68px;
    z-index: 1;
    width: 598px;
    max-width: calc(100% - 40px);
    padding: 20px 30px 20px 20px;
    border-radius: 20px;
    background: rgba(245, 242, 234, 0.3);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--creme);
    display: flex;
    align-items: center;
    gap: 46px;
    transition: background-color .2s ease;
}

.news-card:hover[b-ytyqv2b66j] {
    background: rgba(245, 242, 234, 0.4);
}

.news-card:focus-visible[b-ytyqv2b66j] {
    outline: 2px solid var(--mintgroen);
    outline-offset: 3px;
}

/* Uitsnede uit Figma: beeld 127,34% breed, 21,54% naar links. */
.news-card__image[b-ytyqv2b66j] {
    flex-shrink: 0;
    width: 146px;
    height: 140px;
    border-radius: 10px;
    object-fit: cover;
    object-position: 78.5% 50%;
}

.news-card__text[b-ytyqv2b66j] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.news-card__label[b-ytyqv2b66j] {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

.news-card__title[b-ytyqv2b66j] {
    font-size: 26px;
    line-height: 34px;
}

.news-card__meta[b-ytyqv2b66j] {
    margin-top: 23px;
}

@media (max-width: 900px) {
    /* Mobiel: kaart in de flow onder de knoppen, compacter beeld. */
    .news-card[b-ytyqv2b66j] {
        position: relative;
        right: auto;
        bottom: auto;
        width: 598px;
        margin: 48px auto 0;
        padding: 16px;
        gap: 20px;
    }

    .news-card__image[b-ytyqv2b66j] {
        width: 96px;
        height: 96px;
    }

    .news-card__title[b-ytyqv2b66j] {
        font-size: 22px;
        line-height: 28px;
    }

    .news-card__meta[b-ytyqv2b66j] {
        margin-top: 12px;
    }
}

@media (max-width: 600px) {
    .news-card__image[b-ytyqv2b66j] {
        width: 80px;
        height: 80px;
    }

    .news-card__title[b-ytyqv2b66j] {
        font-size: 20px;
        line-height: 26px;
    }

    .news-card__title br[b-ytyqv2b66j] {
        display: none;
    }

    .news-card__meta[b-ytyqv2b66j] {
        font-size: 11px;
        letter-spacing: .6px;
        white-space: nowrap;
    }
}

/* ---- Intro / stappen --------------------------------------------------- */
.intro[b-ytyqv2b66j] {
    height: 1160px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.intro__container[b-ytyqv2b66j] {
    width: 1421px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 77px;
}

.intro__head[b-ytyqv2b66j] {
    display: flex;
    align-items: flex-start;
    height: 136px;
}

.intro__title[b-ytyqv2b66j] {
    width: 558px;
    flex-shrink: 0;
    font-size: 62px;
    line-height: 1.1;
}

.intro__lead[b-ytyqv2b66j] {
    width: 527px;
    margin-left: 173px;
    margin-top: 25px;
    color: var(--text);
}

.intro__steps[b-ytyqv2b66j] {
    display: flex;
    justify-content: center;
    margin-top: 134px;
}

.step[b-ytyqv2b66j] {
    width: 430.5px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.step__icon[b-ytyqv2b66j] {
    height: 153px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.step__icon--upload[b-ytyqv2b66j] {
    padding-top: 16px;
}

.step__icon--controle[b-ytyqv2b66j] {
    padding-top: 0;
}

.step__icon--locatie[b-ytyqv2b66j] {
    padding-top: 36px;
}

.step__title[b-ytyqv2b66j] {
    width: 248px;
    height: 70px;
    margin-top: 42px;
}

.step__desc[b-ytyqv2b66j] {
    margin-top: 30px;
    line-height: normal;
}

.step__desc--1[b-ytyqv2b66j] {
    width: 261px;
}

.step__desc--2[b-ytyqv2b66j] {
    width: 319px;
}

.step__desc--3[b-ytyqv2b66j] {
    width: 301px;
}

.intro__stats[b-ytyqv2b66j] {
    width: fit-content;
    margin: 186px auto 0;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 30px 49px;
    border-radius: 10px;
    background: var(--nachtblauw-light);
}

.stat[b-ytyqv2b66j] {
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
}

.stat__value[b-ytyqv2b66j] {
    color: var(--mintgroen);
}

.stat__label[b-ytyqv2b66j] {
    line-height: normal;
}

.stat__divider[b-ytyqv2b66j] {
    width: 1px;
    height: 41px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* ---- Alles geregeld ---------------------------------------------------- */
.features[b-ytyqv2b66j] {
    position: relative;
    height: 1432px;
    overflow: hidden;
    background: var(--creme);
    padding-top: 770px;
}

.features__visual[b-ytyqv2b66j] {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 1585px;
    pointer-events: none;
}

.features__visual img[b-ytyqv2b66j] {
    width: 1585px;
    height: 999px;
}

.features__title[b-ytyqv2b66j] {
    position: relative;
    font-size: 62px;
    line-height: 1.1;
    text-align: center;
}

.features__grid[b-ytyqv2b66j] {
    position: relative;
    width: 1020px;
    height: 431px;
    margin: 70px 0 0 calc(50% - 472px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 40px;
}

/* ---- Aangeboden via uw uitvaartondernemer ------------------------------ */
.audience[b-ytyqv2b66j] {
    height: 968px;
    overflow: hidden;
    background: var(--creme-2);
    padding-top: 89px;
}

.audience__head[b-ytyqv2b66j] {
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
}

.audience__title[b-ytyqv2b66j] {
    height: 179px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
}

.audience__lead[b-ytyqv2b66j] {
    width: 477px;
}

.audience__cards[b-ytyqv2b66j] {
    width: 1420px;
    max-width: calc(100% - 40px);
    margin: 78px auto 0;
    display: flex;
    gap: 20px;
}

.audience-card[b-ytyqv2b66j] {
    position: relative;
    width: 700px;
    height: 426px;
    border-radius: 40px;
    overflow: hidden;
    color: var(--creme);
    text-align: center;
}

.audience-card__image[b-ytyqv2b66j] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.audience-card__overlay[b-ytyqv2b66j] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
}

.audience-card__content[b-ytyqv2b66j] {
    position: relative;
    padding-top: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.audience-card__title[b-ytyqv2b66j] {
    white-space: nowrap;
}

.audience-card__text[b-ytyqv2b66j] {
    width: 477px;
    max-width: calc(100% - 40px);
    margin-top: 37px;
}

.audience-card .btn[b-ytyqv2b66j] {
    margin-top: 37px;
}

/* ---- Vanuit uw verzekering -------------------------------------------- */
.insurance[b-ytyqv2b66j] {
    height: 888px;
    overflow: hidden;
    background: var(--creme-2);
}

.insurance__container[b-ytyqv2b66j] {
    position: relative;
    width: 1420px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    height: 100%;
}

.insurance__content[b-ytyqv2b66j] {
    width: 700px;
    padding-top: 133px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.insurance__text[b-ytyqv2b66j] {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.insurance__title[b-ytyqv2b66j] {
    height: 135px;
    white-space: nowrap;
}

.insurance__lead[b-ytyqv2b66j] {
    width: 477px;
}

.insurance__cards[b-ytyqv2b66j] {
    display: flex;
    gap: 30px;
    padding-top: 42px;
    height: 256px;
}

.insurance-card[b-ytyqv2b66j] {
    width: 335px;
    height: 214px;
    border-radius: 10px;
    background: var(--creme);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.insurance-card__title[b-ytyqv2b66j] {
    font-size: 32px;
    line-height: 38px;
    white-space: nowrap;
}

.insurance__image[b-ytyqv2b66j] {
    position: absolute;
    top: 95px;
    left: 777px;
    width: 693px;
    height: 622px;
}

/* ---- Veelgestelde vragen ---------------------------------------------- */
.faq[b-ytyqv2b66j] {
    min-height: 1110px;
    background: var(--creme);
    padding-top: 89px;
    padding-bottom: 177px;
}

.faq__head[b-ytyqv2b66j] {
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
}

.faq__title[b-ytyqv2b66j] {
    height: 179px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.faq__list[b-ytyqv2b66j] {
    width: 774px;
    max-width: calc(100% - 40px);
    margin: 54px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq__more[b-ytyqv2b66j] {
    margin: 95px 0 0 calc(50% - 382px);
}

/* ---- Responsive fallbacks --------------------------------------------- */
@media (max-width: 1500px) {
    .intro__container[b-ytyqv2b66j] {
        max-width: calc(100% - 40px);
    }

    .intro__head[b-ytyqv2b66j] {
        height: auto;
        flex-wrap: wrap;
        gap: 30px;
    }

    .intro__lead[b-ytyqv2b66j] {
        margin-left: 0;
        margin-top: 0;
    }

    .intro__steps[b-ytyqv2b66j] {
        flex-wrap: wrap;
        gap: 40px 0;
    }

    .intro[b-ytyqv2b66j] {
        height: auto;
        padding-bottom: 120px;
    }

    .intro__stats[b-ytyqv2b66j] {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 100px;
    }

    .features[b-ytyqv2b66j] {
        height: auto;
        padding-top: 0;
        padding-bottom: 100px;
    }

    .features__visual[b-ytyqv2b66j] {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
    }

    .features__visual img[b-ytyqv2b66j] {
        width: 100%;
        height: auto;
    }

    .features__grid[b-ytyqv2b66j] {
        width: min(1020px, calc(100% - 40px));
        height: auto;
        margin: 60px auto 0;
    }

    .audience[b-ytyqv2b66j],
    .insurance[b-ytyqv2b66j],
    .faq[b-ytyqv2b66j] {
        height: auto;
        padding-bottom: 100px;
    }

    .audience__cards[b-ytyqv2b66j] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .insurance__container[b-ytyqv2b66j] {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        align-items: flex-start;
        padding-bottom: 60px;
    }

    .insurance__image[b-ytyqv2b66j] {
        position: static;
        max-width: 100%;
        height: auto;
    }

    .faq__more[b-ytyqv2b66j] {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 900px) {
    .hero[b-ytyqv2b66j] {
        height: auto;
        min-height: 620px;
        padding-bottom: 80px;
    }

    .hero__content[b-ytyqv2b66j] {
        padding-top: 140px;
    }

    .hero__title[b-ytyqv2b66j],
    .audience__title[b-ytyqv2b66j],
    .faq__title[b-ytyqv2b66j],
    .insurance__title[b-ytyqv2b66j],
    .audience-card__title[b-ytyqv2b66j],
    .insurance-card__title[b-ytyqv2b66j] {
        white-space: normal;
    }

    .hero__title[b-ytyqv2b66j],
    .intro__title[b-ytyqv2b66j],
    .features__title[b-ytyqv2b66j],
    .audience__title[b-ytyqv2b66j],
    .insurance__title[b-ytyqv2b66j],
    .faq__title[b-ytyqv2b66j] {
        font-size: 40px;
        line-height: 1.1;
    }

    .audience__title[b-ytyqv2b66j],
    .faq__title[b-ytyqv2b66j],
    .insurance__title[b-ytyqv2b66j] {
        height: auto;
    }

    .hero__actions[b-ytyqv2b66j] {
        flex-direction: column;
    }

    .intro__title[b-ytyqv2b66j],
    .intro__lead[b-ytyqv2b66j] {
        width: 100%;
    }

    .step[b-ytyqv2b66j] {
        width: 100%;
    }

    .step__title[b-ytyqv2b66j] {
        height: auto;
    }

    .intro__stats[b-ytyqv2b66j] {
        width: 100%;
        max-width: 100%;
        padding: 30px 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .stat[b-ytyqv2b66j] {
        white-space: normal;
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    .stat__divider[b-ytyqv2b66j] {
        width: 100%;
        height: 1px;
    }

    .intro__stats .btn[b-ytyqv2b66j] {
        align-self: center;
    }

    .features__grid[b-ytyqv2b66j] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .audience-card[b-ytyqv2b66j] {
        width: 100%;
        height: auto;
        min-height: 360px;
        padding-bottom: 60px;
    }

    .audience-card__title[b-ytyqv2b66j] {
        font-size: 36px;
        line-height: 1.1;
    }

    .audience__lead[b-ytyqv2b66j] {
        width: 100%;
    }

    .insurance__content[b-ytyqv2b66j] {
        width: 100%;
        padding-top: 80px;
    }

    .insurance__lead[b-ytyqv2b66j] {
        width: 100%;
    }

    .insurance__cards[b-ytyqv2b66j] {
        flex-wrap: wrap;
        height: auto;
    }

    .insurance-card[b-ytyqv2b66j] {
        width: 100%;
    }

    .faq-item__question[b-ytyqv2b66j] {
        width: auto;
    }
}

@media (max-width: 600px) {
    .audience-card__title[b-ytyqv2b66j] {
        font-size: 32px;
    }

    .audience-card__content[b-ytyqv2b66j] {
        padding-left: 24px;
        padding-right: 24px;
    }
}
/* /Components/Pages/Nabestaande.razor.rz.scp.css */
/* ==========================================================================
   Voor nabestaanden – styles for /nabestaande only.
   Measurements follow the Figma frame "04 — Nabestaanden" (1728px wide).
   ========================================================================== */

.nab[b-bzrzi3gmkr] {
    width: 100%;
    overflow-x: clip;
}

/* ---- Hero -------------------------------------------------------------- */
.nab-hero[b-bzrzi3gmkr] {
    position: relative;
    height: 930px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.nab-hero__backdrop[b-bzrzi3gmkr] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1040px;
    pointer-events: none;
}

.nab-hero__image[b-bzrzi3gmkr] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nab-hero__overlay[b-bzrzi3gmkr] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.nab-hero__content[b-bzrzi3gmkr] {
    position: relative;
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 165px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.nab-hero__text[b-bzrzi3gmkr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    white-space: nowrap;
}

.nab-hero__lead[b-bzrzi3gmkr] {
    width: 590px;
    max-width: 100%;
}

.nab-hero__actions[b-bzrzi3gmkr] {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 650px;
    max-width: 100%;
}

.nab-hero__ghost[b-bzrzi3gmkr] {
    color: var(--wit);
}

/* ---- Inspiratie -------------------------------------------------------- */
.inspire[b-bzrzi3gmkr] {
    background: var(--creme);
    padding: 120px 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    overflow: hidden;
}

.inspire__title[b-bzrzi3gmkr] {
    white-space: nowrap;
}

.inspire__lead[b-bzrzi3gmkr] {
    width: 790px;
    max-width: 100%;
}

.inspire__cards[b-bzrzi3gmkr] {
    width: 1248px;
    max-width: 100%;
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.memory-card[b-bzrzi3gmkr] {
    width: 394px;
    flex-shrink: 0;
    padding: 40px 32px;
    border-radius: 32px;
    background: var(--creme-2);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.memory-card__image[b-bzrzi3gmkr] {
    width: 330px;
    height: 220px;
    border-radius: 20px;
    object-fit: cover;
}

.memory-card__label[b-bzrzi3gmkr] {
    width: 330px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    white-space: pre-wrap;
}

.memory-card__title[b-bzrzi3gmkr] {
    width: 330px;
    font-size: 26px;
    font-weight: 500;
    line-height: 39px;
}

.memory-card__text[b-bzrzi3gmkr] {
    width: 330px;
    font-size: 18px;
    line-height: 27px;
}

.memory-card__quote[b-bzrzi3gmkr] {
    width: 330px;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}

/* ---- U hoeft het niet alleen te doen ----------------------------------- */
.together[b-bzrzi3gmkr] {
    position: relative;
    height: 809px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.together__container[b-bzrzi3gmkr] {
    position: relative;
    z-index: 1;
    width: 1096px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 99px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.together__head[b-bzrzi3gmkr] {
    width: 781px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    text-align: center;
}

.together__title[b-bzrzi3gmkr] {
    height: 135px;
    width: 686px;
    max-width: 100%;
}

.together__lead[b-bzrzi3gmkr] {
    width: 586px;
    max-width: 100%;
}

.together__cards[b-bzrzi3gmkr] {
    width: 100%;
    height: 227px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.tip-card[b-bzrzi3gmkr] {
    position: relative;
    width: 335px;
    height: 214px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--nachtblauw-light);
    text-align: center;
}

.tip-card__title[b-bzrzi3gmkr] {
    position: absolute;
    top: 45.5px;
    left: 0;
    right: 0;
    font-size: 32px;
    line-height: 38px;
    color: var(--mintgroen);
    white-space: nowrap;
}

.tip-card__text[b-bzrzi3gmkr] {
    position: absolute;
    top: 97px;
    left: 50%;
    transform: translateX(-50%);
    width: 292px;
    color: var(--creme);
}

.together__visual[b-bzrzi3gmkr] {
    position: absolute;
    z-index: 0;
    top: 159px;
    left: calc(50% + 267px);
    width: 637px;
    height: 607px;
    pointer-events: none;
}

/* ---- Wie doet wat ------------------------------------------------------ */
.roles[b-bzrzi3gmkr] {
    background: var(--creme);
    padding: 120px 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    overflow: hidden;
}

.roles .tag[b-bzrzi3gmkr] {
    width: 1248px;
    max-width: 100%;
}

.roles__title[b-bzrzi3gmkr] {
    white-space: nowrap;
}

.roles__columns[b-bzrzi3gmkr] {
    width: 1248px;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 64px;
}

.role[b-bzrzi3gmkr] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.role--family[b-bzrzi3gmkr] {
    width: 560px;
}

.role--director[b-bzrzi3gmkr] {
    width: 624px;
}

.role__title[b-bzrzi3gmkr] {
    font-size: 26px;
    font-weight: 500;
    line-height: 39px;
}

.role__text[b-bzrzi3gmkr] {
    font-size: 20px;
    line-height: 30px;
}

/* ---- Begin met één herinnering ---------------------------------------- */
.nab-cta[b-bzrzi3gmkr] {
    position: relative;
    height: 686px;
    overflow: hidden;
    color: var(--creme);
}

.nab-cta__image[b-bzrzi3gmkr] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nab-cta__overlay[b-bzrzi3gmkr] {
    position: absolute;
    inset: 0;
    background: rgba(34, 49, 59, 0.8);
}

.nab-cta__content[b-bzrzi3gmkr] {
    position: relative;
    width: 877px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 53px;
    text-align: center;
}

.nab-cta__text[b-bzrzi3gmkr] {
    height: 158px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.nab-cta__title[b-bzrzi3gmkr] {
    width: 835px;
    max-width: 100%;
    font-size: 62px;
    line-height: 1.1;
}

.nab-cta__lead[b-bzrzi3gmkr] {
    width: 907px;
    max-width: 100vw;
    font-size: 20px;
    line-height: 30px;
}

.nab-cta__actions[b-bzrzi3gmkr] {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.nab-cta__links[b-bzrzi3gmkr] {
    display: flex;
    justify-content: center;
    gap: 32px;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    white-space: pre-wrap;
}

.nab-cta__links a[b-bzrzi3gmkr] {
    text-decoration: underline;
    text-underline-position: from-font;
}

.nab-cta__links a:first-child[b-bzrzi3gmkr] {
    width: 235px;
}

.nab-cta__links a:last-child[b-bzrzi3gmkr] {
    width: 245px;
}

.nab-cta__links a:hover[b-bzrzi3gmkr] {
    opacity: .75;
}

/* ---- Responsive fallbacks --------------------------------------------- */
@media (max-width: 1500px) {
    .inspire[b-bzrzi3gmkr],
    .roles[b-bzrzi3gmkr] {
        padding: 100px 40px;
    }

    .inspire__cards[b-bzrzi3gmkr] {
        flex-wrap: wrap;
    }

    .together[b-bzrzi3gmkr] {
        height: auto;
        padding-bottom: 100px;
    }

    .together__cards[b-bzrzi3gmkr] {
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    .together__visual[b-bzrzi3gmkr] {
        display: none;
    }

    .roles__columns[b-bzrzi3gmkr] {
        flex-wrap: wrap;
    }

    .nab-cta__lead[b-bzrzi3gmkr] {
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    .nab-hero[b-bzrzi3gmkr] {
        height: auto;
        min-height: 620px;
        padding-bottom: 80px;
    }

    .inspire[b-bzrzi3gmkr],
    .roles[b-bzrzi3gmkr] {
        padding: 80px 20px;
    }

    .nab-hero__content[b-bzrzi3gmkr] {
        padding-top: 140px;
    }

    .nab-hero__text[b-bzrzi3gmkr],
    .inspire__title[b-bzrzi3gmkr],
    .roles__title[b-bzrzi3gmkr],
    .tip-card__title[b-bzrzi3gmkr] {
        white-space: normal;
    }

    .nab-hero h1[b-bzrzi3gmkr],
    .inspire__title[b-bzrzi3gmkr],
    .together__title[b-bzrzi3gmkr],
    .roles__title[b-bzrzi3gmkr],
    .nab-cta__title[b-bzrzi3gmkr] {
        font-size: 40px;
        line-height: 1.1;
    }

    .together__title[b-bzrzi3gmkr] {
        height: auto;
    }

    .nab-hero__actions[b-bzrzi3gmkr],
    .nab-cta__actions[b-bzrzi3gmkr],
    .nab-cta__links[b-bzrzi3gmkr] {
        flex-direction: column;
        align-items: center;
    }

    .nab-cta__links a[b-bzrzi3gmkr] {
        padding: 9px 0; /* 9 + 27 + 9 = 45px tikdoel */
    }

    .memory-card[b-bzrzi3gmkr] {
        width: 100%;
    }

    .memory-card__image[b-bzrzi3gmkr],
    .memory-card__label[b-bzrzi3gmkr],
    .memory-card__title[b-bzrzi3gmkr],
    .memory-card__text[b-bzrzi3gmkr],
    .memory-card__quote[b-bzrzi3gmkr] {
        width: 100%;
    }

    .memory-card__label[b-bzrzi3gmkr] {
        font-size: 16px;
    }

    .tip-card[b-bzrzi3gmkr] {
        width: 100%;
        height: auto;
        padding: 40px 20px;
    }

    .tip-card__title[b-bzrzi3gmkr],
    .tip-card__text[b-bzrzi3gmkr] {
        position: static;
        transform: none;
        width: 100%;
    }

    .tip-card__text[b-bzrzi3gmkr] {
        margin-top: 12px;
    }

    .role--family[b-bzrzi3gmkr],
    .role--director[b-bzrzi3gmkr] {
        width: 100%;
    }

    .nab-cta__text[b-bzrzi3gmkr] {
        height: auto;
        gap: 30px;
    }

    .nab-cta__content[b-bzrzi3gmkr] {
        padding-top: 120px;
    }
}
/* /Components/Pages/Ondernemer.razor.rz.scp.css */
/* ==========================================================================
   Voor uitvaartondernemers – styles for /ondernemer only.
   Measurements follow the Figma frame "03 — Uitvaartondernemers" (1728px wide).
   ========================================================================== */

.ond[b-gvlepzt78z] {
    width: 100%;
    overflow-x: clip;
}

.visually-hidden[b-gvlepzt78z] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Hero -------------------------------------------------------------- */
.ond-hero[b-gvlepzt78z] {
    position: relative;
    height: 930px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.ond-hero__video[b-gvlepzt78z] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Calibrated on the Figma render: ~22% darker at the top, running to ~58% at the very bottom. */
.ond-hero__overlay[b-gvlepzt78z] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.22) 45%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0.58) 100%);
}

.ond-hero__content[b-gvlepzt78z] {
    position: relative;
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.ond-hero__text[b-gvlepzt78z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    white-space: nowrap;
}

.ond-hero__lead[b-gvlepzt78z] {
    width: 406px;
    max-width: 100%;
    color: var(--wit);
}

/* ---- Zo eenvoudig werkt het ------------------------------------------- */
.flow[b-gvlepzt78z] {
    height: 892px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.flow__container[b-gvlepzt78z] {
    position: relative;
    width: 1421px;
    height: 738px;
    margin: 77px auto 0;
}

.flow__title[b-gvlepzt78z] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-size: 62px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.flow__lead[b-gvlepzt78z] {
    position: absolute;
    top: 102px;
    left: 50%;
    transform: translateX(-50%);
    width: 527px;
    text-align: center;
    color: var(--text);
}

.flow__icon[b-gvlepzt78z] {
    position: absolute;
}

.flow__icon--koffie[b-gvlepzt78z] {
    top: 263px;
    left: 71px;
    width: 190px;
    height: 99px;
}

.flow__icon--tafel[b-gvlepzt78z] {
    top: 247px;
    left: 416px;
    width: 196px;
    height: 144px;
}

.flow__icon--bezorgen[b-gvlepzt78z] {
    top: 271px;
    left: 801px;
    width: 157px;
    height: 107px;
}

.flow__icon--meenemen[b-gvlepzt78z] {
    top: 231px;
    left: 1142px;
    width: 190px;
    height: 157px;
}

.flow__line[b-gvlepzt78z] {
    position: absolute;
    top: 449px;
    left: 1px;
    width: 1420px;
    height: 0;
    border-top: 1px dashed var(--mintgroen);
}

.flow__dot[b-gvlepzt78z] {
    position: absolute;
    top: 434px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mintgroen);
}

.flow__dot--1[b-gvlepzt78z] { left: 157px; }
.flow__dot--2[b-gvlepzt78z] { left: 509px; }
.flow__dot--3[b-gvlepzt78z] { left: 878px; }
.flow__dot--4[b-gvlepzt78z] { left: 1237px; }

.flow-step[b-gvlepzt78z] {
    position: absolute;
    top: 465px;
    height: 140px;
    text-align: center;
}

.flow-step--1[b-gvlepzt78z] { left: 0; width: 341px; }
.flow-step--2[b-gvlepzt78z] { left: 363px; width: 319px; }
.flow-step--3[b-gvlepzt78z] { left: 724px; width: 337px; }
.flow-step--4[b-gvlepzt78z] { left: 1081px; width: 340px; }

.flow-step__title[b-gvlepzt78z] {
    position: absolute;
    top: 65.5px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 248px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--creme);
}

.flow-step__text[b-gvlepzt78z] {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 261px;
    color: var(--text);
}

.flow-step--2 .flow-step__text[b-gvlepzt78z] {
    width: 319px;
}

/* ---- Wat gedenkboekje.nl voor u regelt --------------------------------- */
.offer[b-gvlepzt78z] {
    position: relative;
    height: 1751px;
    overflow: hidden;
    background: var(--creme-2);
    color: var(--nachtblauw);
}

.offer__visual[b-gvlepzt78z] {
    position: absolute;
    top: 0;
    left: 76px;
    width: 1594px;
    pointer-events: none;
}

.offer__visual img[b-gvlepzt78z] {
    width: 1594px;
    height: auto;
}

.offer__title[b-gvlepzt78z] {
    position: absolute;
    top: 1064px;
    left: 0;
    right: 0;
    font-size: 62px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.offer__grid[b-gvlepzt78z] {
    position: absolute;
    top: 1280px;
    left: calc(50% - 472px);
    width: 1020px;
    height: 313px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 40px;
}

.offer__desc--narrow[b-gvlepzt78z] {
    width: 422px;
}

/* ---- En wij rijden zelf ------------------------------------------------ */
.delivery[b-gvlepzt78z] {
    position: relative;
    height: 1198px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.delivery__container[b-gvlepzt78z] {
    position: relative;
    width: 1096px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 99px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.delivery__head[b-gvlepzt78z] {
    width: 781px;
    max-width: 100%;
    height: 174px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
}

.delivery__title[b-gvlepzt78z] {
    width: 686px;
    max-width: 100%;
    white-space: nowrap;
}

.delivery__lead[b-gvlepzt78z] {
    width: 586px;
    max-width: 100%;
}

.delivery__points[b-gvlepzt78z] {
    position: relative;
    width: 1122px;
    height: 140px;
    text-align: center;
}

.delivery-point__title[b-gvlepzt78z] {
    position: absolute;
    top: 24px;
    width: 248px;
    transform: translate(-50%, -50%);
    font-size: 32px;
    line-height: 1.1;
}

.delivery-point__title--1[b-gvlepzt78z] { left: calc(50% - 430px); }
.delivery-point__title--2[b-gvlepzt78z] { left: calc(50% + 1px); }
.delivery-point__title--3[b-gvlepzt78z] { left: calc(50% + 431px); top: 24.5px; }

.delivery-point__text[b-gvlepzt78z] {
    position: absolute;
    top: 91px;
    transform: translateX(-50%);
    line-height: normal;
}

.delivery-point__text--1[b-gvlepzt78z] { left: 130.5px; width: 261px; }
.delivery-point__text--2[b-gvlepzt78z] { left: 561.5px; width: 319px; }
.delivery-point__text--3[b-gvlepzt78z] { left: 991.5px; width: 261px; }

.delivery__phones[b-gvlepzt78z] {
    position: absolute;
    top: 474px;
    left: 50%;
    transform: translateX(-50%);
    width: 994px;
    height: 724px;
}

.delivery__car[b-gvlepzt78z] {
    position: absolute;
    top: 625px;
    left: calc(50% + 343px);
    width: 521px;
    height: 486px;
}

/* ---- Veelgestelde vragen ---------------------------------------------- */
.faq[b-gvlepzt78z] {
    min-height: 958px;
    background: var(--creme);
    padding-top: 89px;
    padding-bottom: 121px;
}

.faq__head[b-gvlepzt78z] {
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
}

.faq__title[b-gvlepzt78z] {
    height: 179px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.faq__list[b-gvlepzt78z] {
    width: 774px;
    max-width: calc(100% - 40px);
    margin: 54px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq__more[b-gvlepzt78z] {
    margin: 66px 0 0 calc(50% - 382px);
}

/* ---- Plan een vrijblijvende kennismaking ------------------------------- */
.contact[b-gvlepzt78z] {
    height: 1107px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.contact__container[b-gvlepzt78z] {
    position: relative;
    width: 1421px;
    max-width: calc(100% - 40px);
    height: 792px;
    margin: 153px auto 0;
}

.contact__intro[b-gvlepzt78z] {
    position: absolute;
    top: 0;
    left: 1px;
    width: 694px;
    height: 792px;
    border-radius: 40px;
    overflow: hidden;
    text-align: center;
}

.contact__image[b-gvlepzt78z] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact__overlay[b-gvlepzt78z] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
}

.contact__title[b-gvlepzt78z] {
    position: absolute;
    top: 234px;
    left: 68px;
    width: 558px;
    font-size: 62px;
    line-height: 1.1;
}

.contact__text[b-gvlepzt78z] {
    position: absolute;
    top: 403px;
    left: 178px;
    width: 338px;
}

.contact__panel[b-gvlepzt78z] {
    position: absolute;
    top: 0;
    left: 723px;
    width: 698px;
    height: 792px;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.1);
}

.contact__form[b-gvlepzt78z] {
    position: absolute;
    top: 55px;
    left: 59px;
    width: 580px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact__field[b-gvlepzt78z] {
    display: block;
    width: 100%;
}

.contact__input[b-gvlepzt78z] {
    display: block;
    width: 100%;
    height: 67px;
    padding: 0 31px;
    border: 0;
    border-radius: 8px;
    background: var(--nachtblauw);
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.1;
    color: var(--wit);
    outline: none;
}

.contact__input[b-gvlepzt78z]::placeholder {
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
}

.contact__input:focus-visible[b-gvlepzt78z] {
    box-shadow: 0 0 0 2px var(--mintgroen);
}

.contact__textarea[b-gvlepzt78z] {
    height: 210px;
    padding: 26px 24px;
    resize: vertical;
}

.contact__submit[b-gvlepzt78z] {
    width: 100%;
    height: 62px;
    border-radius: 8px;
    background: var(--cta-blue);
    color: var(--creme);
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    transition: background-color .2s ease;
}

.contact__submit:hover[b-gvlepzt78z] {
    background: #2f6ef0;
}

.contact__privacy[b-gvlepzt78z] {
    position: absolute;
    top: 729px;
    left: 0;
    right: 0;
    font-size: 13px;
    line-height: 1.1;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}

.contact__privacy a[b-gvlepzt78z] {
    font-weight: 700;
    color: var(--cta-blue);
}

.contact__error[b-gvlepzt78z] {
    padding: 14px 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid var(--mintgroen);
    color: var(--creme);
    font-size: 16px;
    line-height: 24px;
}

.contact__success[b-gvlepzt78z] {
    position: absolute;
    top: 55px;
    left: 59px;
    width: 580px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 200px;
}

.contact__success-title[b-gvlepzt78z] {
    font-size: 42px;
    line-height: 1.1;
}

/* ---- Responsive fallbacks --------------------------------------------- */
@media (max-width: 1500px) {
    .flow[b-gvlepzt78z] {
        height: auto;
        padding-bottom: 80px;
    }

    .flow__container[b-gvlepzt78z] {
        width: min(1421px, calc(100% - 40px));
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .flow__title[b-gvlepzt78z],
    .flow__lead[b-gvlepzt78z],
    .flow-step[b-gvlepzt78z],
    .flow-step__title[b-gvlepzt78z],
    .flow-step__text[b-gvlepzt78z] {
        position: static;
        transform: none;
        width: auto;
        height: auto;
        white-space: normal;
    }

    .flow__lead[b-gvlepzt78z] {
        margin: 0 auto;
        max-width: 527px;
    }

    .flow__icon[b-gvlepzt78z],
    .flow__line[b-gvlepzt78z],
    .flow__dot[b-gvlepzt78z] {
        display: none;
    }

    .flow-step[b-gvlepzt78z] {
        max-width: 420px;
        margin: 0 auto;
    }

    .flow-step__text[b-gvlepzt78z] {
        margin-top: 10px;
    }

    .offer[b-gvlepzt78z] {
        height: auto;
        padding-bottom: 100px;
    }

    .offer__visual[b-gvlepzt78z] {
        position: relative;
        left: 0;
        width: 100%;
    }

    .offer__visual img[b-gvlepzt78z] {
        width: 100%;
    }

    .offer__title[b-gvlepzt78z] {
        position: relative;
        top: 0;
        margin-top: 40px;
        white-space: normal;
    }

    .offer__grid[b-gvlepzt78z] {
        position: relative;
        top: 0;
        left: 0;
        width: min(1020px, calc(100% - 40px));
        height: auto;
        margin: 60px auto 0;
    }

    .offer__desc--narrow[b-gvlepzt78z] {
        width: auto;
    }

    .delivery[b-gvlepzt78z] {
        height: auto;
        padding-bottom: 60px;
    }

    .delivery__head[b-gvlepzt78z] {
        height: auto;
    }

    .delivery__points[b-gvlepzt78z] {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 30px;
    }

    .delivery-point__title[b-gvlepzt78z],
    .delivery-point__text[b-gvlepzt78z] {
        position: static;
        transform: none;
        width: auto;
    }

    .delivery-point__title--1[b-gvlepzt78z] { grid-area: 1 / 1; }
    .delivery-point__title--2[b-gvlepzt78z] { grid-area: 1 / 2; }
    .delivery-point__title--3[b-gvlepzt78z] { grid-area: 1 / 3; }
    .delivery-point__text--1[b-gvlepzt78z] { grid-area: 2 / 1; }
    .delivery-point__text--2[b-gvlepzt78z] { grid-area: 2 / 2; }
    .delivery-point__text--3[b-gvlepzt78z] { grid-area: 2 / 3; }

    .delivery__phones[b-gvlepzt78z] {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: min(994px, 100%);
        height: auto;
        margin: 60px auto 0;
    }

    .delivery__car[b-gvlepzt78z] {
        display: none;
    }

    .faq[b-gvlepzt78z],
    .contact[b-gvlepzt78z] {
        height: auto;
        padding-bottom: 100px;
    }

    .faq__more[b-gvlepzt78z] {
        margin-left: auto;
        margin-right: auto;
    }

    .contact__container[b-gvlepzt78z] {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 28px;
        margin-top: 100px;
    }

    .contact__intro[b-gvlepzt78z],
    .contact__panel[b-gvlepzt78z] {
        position: relative;
        left: 0;
        width: 100%;
        max-width: 698px;
    }

    .contact__intro[b-gvlepzt78z] {
        height: auto;
        padding: 120px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    /* relative + z-index: anders schuiven de absoluut geplaatste foto en overlay over de tekst heen. */
    .contact__title[b-gvlepzt78z],
    .contact__text[b-gvlepzt78z] {
        position: relative;
        z-index: 1;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 558px;
    }

    .contact__text[b-gvlepzt78z] {
        max-width: 338px;
    }

    .contact__panel[b-gvlepzt78z] {
        height: auto;
        padding: 55px 40px 60px;
    }

    .contact__form[b-gvlepzt78z],
    .contact__success[b-gvlepzt78z] {
        position: static;
        width: 100%;
    }

    .contact__privacy[b-gvlepzt78z] {
        position: static;
        margin-top: 24px;
    }
}

@media (max-width: 900px) {
    .ond-hero[b-gvlepzt78z] {
        height: auto;
        min-height: 620px;
        padding-bottom: 80px;
    }

    .contact__privacy[b-gvlepzt78z] {
        font-size: 14px;
    }

    .contact__privacy a[b-gvlepzt78z] {
        display: inline-block;
        padding: 15px 0; /* 15 + 15,4 + 15 = 45px tikdoel */
    }

    .ond-hero__content[b-gvlepzt78z] {
        padding-top: 140px;
    }

    .ond-hero__text[b-gvlepzt78z],
    .delivery__title[b-gvlepzt78z],
    .faq__title[b-gvlepzt78z] {
        white-space: normal;
    }

    .ond-hero h1[b-gvlepzt78z],
    .flow__title[b-gvlepzt78z],
    .offer__title[b-gvlepzt78z],
    .delivery__title[b-gvlepzt78z],
    .faq__title[b-gvlepzt78z],
    .contact__title[b-gvlepzt78z] {
        font-size: 40px;
        line-height: 1.1;
    }

    .faq__title[b-gvlepzt78z] {
        height: auto;
    }

    .delivery__points[b-gvlepzt78z] {
        grid-template-columns: 1fr;
    }

    .delivery-point__title--1[b-gvlepzt78z] { grid-area: 1 / 1; }
    .delivery-point__text--1[b-gvlepzt78z] { grid-area: 2 / 1; }
    .delivery-point__title--2[b-gvlepzt78z] { grid-area: 3 / 1; }
    .delivery-point__text--2[b-gvlepzt78z] { grid-area: 4 / 1; }
    .delivery-point__title--3[b-gvlepzt78z] { grid-area: 5 / 1; }
    .delivery-point__text--3[b-gvlepzt78z] { grid-area: 6 / 1; }

    .delivery-point__text[b-gvlepzt78z] {
        margin-bottom: 30px;
    }

    .offer__grid[b-gvlepzt78z] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .contact__panel[b-gvlepzt78z] {
        padding: 30px 20px 40px;
    }
}
/* /Components/Pages/OverOns.razor.rz.scp.css */
/* ==========================================================================
   Over ons – styles for /over-ons only.
   Measurements follow the Figma frame "06 — Over ons" (1728px wide).
   ========================================================================== */

.over[b-badeoeogwe] {
    width: 100%;
    overflow-x: clip;
}

/* ---- Hero -------------------------------------------------------------- */
.over-hero[b-badeoeogwe] {
    position: relative;
    height: 930px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.over-hero__backdrop[b-badeoeogwe] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1040px;
    pointer-events: none;
}

.over-hero__image[b-badeoeogwe] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.over-hero__overlay[b-badeoeogwe] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.over-hero__content[b-badeoeogwe] {
    position: relative;
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 165px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.over-hero__text[b-badeoeogwe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    white-space: nowrap;
}

.over-hero__lead[b-badeoeogwe] {
    width: 590px;
    max-width: 100%;
}

/* ---- Geen fotoboek, een dienstverlening -------------------------------- */
.service[b-badeoeogwe] {
    height: 814px;
    overflow: hidden;
    background: var(--creme-2);
    color: var(--nachtblauw);
}

.service__container[b-badeoeogwe] {
    width: 1419px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 95px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 77px;
}

.service__text[b-badeoeogwe] {
    width: 700px;
    padding-top: 38px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.service__title[b-badeoeogwe] {
    min-height: 135px;
    white-space: nowrap;
}

.service__body[b-badeoeogwe] {
    width: 477px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.service__image[b-badeoeogwe] {
    flex-shrink: 0;
    width: 642px;
    height: 576px;
    border-radius: 40px;
    object-fit: cover;
}

/* ---- Alles in eigen hand ---------------------------------------------- */
.blocks[b-badeoeogwe] {
    height: 886px;
    overflow: hidden;
    padding: 120px 240px 140px;
    background: var(--nachtblauw);
    color: var(--creme);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 52px;
}

.blocks__head[b-badeoeogwe] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}

.blocks__title[b-badeoeogwe] {
    width: 900px;
    max-width: 100%;
}

.blocks__lead[b-badeoeogwe] {
    width: 600px;
    max-width: 100%;
}

.blocks__grid[b-badeoeogwe] {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 32px;
}

.block[b-badeoeogwe] {
    flex: 1 0 0;
    min-width: 0;
    padding: 24px 24px 56px;
    border-radius: 32px;
    background: var(--nachtblauw-light);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.block__visual[b-badeoeogwe] {
    position: relative;
    height: 230px;
    margin-bottom: 24px; /* 8px "ruimte" + 16px gap */
    overflow: hidden;
    border-radius: 20px;
    background: var(--creme);
}

.block__visual--dark[b-badeoeogwe] {
    background: var(--nachtblauw);
}

.block__image[b-badeoeogwe] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Uitsnede uit Figma: beeld 151,34% breed, iets naar rechts en omhoog. */
.block__image--bezorgers[b-badeoeogwe] {
    position: absolute;
    top: -13.48%;
    left: 6.35%;
    width: 151.34%;
    height: 122.72%;
    max-width: none;
}

.block__title[b-badeoeogwe] {
    font-size: 32px;
    line-height: 38px;
}

.block__text[b-badeoeogwe] {
    color: var(--creme-2);
}

/* ---- Te laat komen is geen optie -------------------------------------- */
.ontime[b-badeoeogwe] {
    position: relative;
    height: 1130px;
    overflow: hidden;
    background: var(--nachtblauw);
    color: var(--creme);
}

.ontime__head[b-badeoeogwe] {
    position: relative;
    z-index: 1;
    width: 781px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 99px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
}

.ontime__title[b-badeoeogwe] {
    width: 686px;
    max-width: 100%;
}

.ontime__lead[b-badeoeogwe] {
    width: 586px;
    max-width: 100%;
}

.ontime__phones[b-badeoeogwe] {
    position: absolute;
    top: 339px;
    left: 50%;
    transform: translateX(-50%);
    width: 994px;
    height: 724px;
}

/* ---- Stap voor stap (tijdlijn) ---------------------------------------- */
.growth[b-badeoeogwe] {
    height: 732px;
    background: var(--creme-2);
    color: var(--nachtblauw);
}

.growth__container[b-badeoeogwe] {
    width: 1423px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 140px;
    display: flex;
    flex-direction: column;
    gap: 72px;
}

.growth__head[b-badeoeogwe] {
    display: flex;
    align-items: flex-end;
    gap: 208px;
}

.growth__title[b-badeoeogwe] {
    flex-shrink: 0;
    width: 515px;
}

.growth__lead[b-badeoeogwe] {
    width: 521px;
}

.timeline[b-badeoeogwe] {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.milestone[b-badeoeogwe] {
    position: relative;
    flex: 1 0 0;
    min-width: 0;
    padding-top: 36px;
    border-top: 1px solid var(--nachtblauw);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.milestone--future[b-badeoeogwe] {
    border-top-style: dashed;
}

.milestone__dot[b-badeoeogwe] {
    position: absolute;
    top: -7px;
    left: 0;
    width: 13px;
    height: 13px;
}

.milestone__date[b-badeoeogwe] {
    font-size: 40px;
    line-height: 48px;
}

.milestone__title[b-badeoeogwe] {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}

/* ---- De ondernemer blijft het aanspreekpunt --------------------------- */
.partner[b-badeoeogwe] {
    padding: 140px 0;
    background: var(--creme);
    color: var(--nachtblauw);
}

.partner__row[b-badeoeogwe] {
    width: 1418px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 116px;
}

.partner__visual[b-badeoeogwe] {
    position: relative;
    flex-shrink: 0;
    width: 596px;
    height: 640px;
    overflow: hidden;
    border-radius: 32px;
}

/* Uitsnede uit Figma: beeld 189,9% breed, 47,97% naar links. */
.partner__image[b-badeoeogwe] {
    position: absolute;
    top: 0;
    left: -47.97%;
    width: 189.9%;
    height: 100%;
    max-width: none;
}

.partner__text[b-badeoeogwe] {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.partner__highlight[b-badeoeogwe] {
    width: 100%;
    padding: 28px 32px;
    border-radius: 20px;
    background: var(--creme-2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.partner__highlight-title[b-badeoeogwe] {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}

.partner__actions[b-badeoeogwe] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
}

.partner__actions .btn[b-badeoeogwe] {
    padding-top: 15px;
    padding-bottom: 15px;
}

.partner__link[b-badeoeogwe] {
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    text-decoration: underline;
    text-underline-position: from-font;
    white-space: nowrap;
}

.partner__link:hover[b-badeoeogwe] {
    opacity: .75;
}

/* ---- Samen bouwen aan iets dat blijft --------------------------------- */
.over-cta[b-badeoeogwe] {
    position: relative;
    height: 686px;
    overflow: hidden;
    color: var(--creme);
}

.over-cta__image[b-badeoeogwe] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.over-cta__overlay[b-badeoeogwe] {
    position: absolute;
    inset: 0;
    background: rgba(34, 49, 59, 0.8);
}

.over-cta__content[b-badeoeogwe] {
    position: relative;
    width: 601px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 181px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 53px;
    text-align: center;
}

.over-cta__text[b-badeoeogwe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.over-cta__title[b-badeoeogwe] {
    font-size: 62px;
    line-height: 1.1;
}

/* Figma: tekstblok (669px) is breder dan de kolom (601px) en loopt gecentreerd door. */
.over-cta__lead[b-badeoeogwe] {
    width: 669px;
    max-width: calc(100vw - 40px);
    font-size: 20px;
    line-height: 30px;
}

.over-cta__actions[b-badeoeogwe] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.over-cta__actions .btn[b-badeoeogwe] {
    padding-top: 15px;
    padding-bottom: 15px;
}

.over-cta__btn[b-badeoeogwe] {
    padding-left: 30px;
    padding-right: 30px;
}

/* ---- Responsive fallbacks --------------------------------------------- */
@media (max-width: 1500px) {
    .service[b-badeoeogwe],
    .blocks[b-badeoeogwe],
    .growth[b-badeoeogwe] {
        height: auto;
    }

    .service[b-badeoeogwe] {
        padding-bottom: 100px;
    }

    .service__container[b-badeoeogwe] {
        gap: 60px;
    }

    .service__text[b-badeoeogwe] {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .service__image[b-badeoeogwe] {
        flex-shrink: 1;
        width: 45%;
        height: auto;
        aspect-ratio: 642 / 576;
    }

    .blocks[b-badeoeogwe] {
        padding-left: 40px;
        padding-right: 40px;
    }

    .growth[b-badeoeogwe] {
        padding-bottom: 120px;
    }

    .growth__head[b-badeoeogwe] {
        gap: 60px;
    }

    .growth__title[b-badeoeogwe] {
        width: auto;
        flex: 1 1 0;
    }

    .growth__lead[b-badeoeogwe] {
        flex: 1 1 0;
        width: auto;
    }

    .partner__row[b-badeoeogwe] {
        gap: 60px;
    }

    .partner__visual[b-badeoeogwe] {
        flex-shrink: 1;
        width: 45%;
        height: auto;
        aspect-ratio: 596 / 640;
    }
}

@media (max-width: 1100px) {
    .service__container[b-badeoeogwe],
    .growth__head[b-badeoeogwe],
    .partner__row[b-badeoeogwe] {
        flex-direction: column;
        align-items: stretch;
    }

    .service__text[b-badeoeogwe] {
        padding-top: 0;
        gap: 30px;
    }

    .service__title[b-badeoeogwe] {
        min-height: 0;
    }

    .service__image[b-badeoeogwe],
    .partner__visual[b-badeoeogwe] {
        width: 100%;
        max-width: 642px;
    }

    .blocks__grid[b-badeoeogwe] {
        flex-direction: column;
        max-width: 560px;
    }

    .block[b-badeoeogwe] {
        flex: none;
    }

    .ontime[b-badeoeogwe] {
        height: auto;
        padding-bottom: 60px;
    }

    .ontime__phones[b-badeoeogwe] {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: min(994px, 100%);
        height: auto;
        margin: 40px auto 0;
    }

    .timeline[b-badeoeogwe] {
        flex-direction: column;
        gap: 48px;
        padding-left: 24px;
        border-left: 1px solid var(--nachtblauw);
    }

    .milestone[b-badeoeogwe] {
        flex: none;
        width: 100%;
        padding-top: 0;
        border-top: 0;
        gap: 8px;
    }

    .milestone__dot[b-badeoeogwe] {
        top: 17px;
        left: -31px;
    }

    .partner[b-badeoeogwe] {
        padding: 100px 0;
    }
}

@media (max-width: 900px) {
    .over-hero[b-badeoeogwe] {
        height: auto;
        min-height: 620px;
        padding-bottom: 80px;
    }

    .over-hero__content[b-badeoeogwe] {
        padding-top: 140px;
    }

    .over-hero__text[b-badeoeogwe],
    .service__title[b-badeoeogwe] {
        white-space: normal;
    }

    .over-hero h1[b-badeoeogwe],
    .service__title[b-badeoeogwe],
    .blocks__title[b-badeoeogwe],
    .ontime__title[b-badeoeogwe],
    .growth__title[b-badeoeogwe],
    .partner__text h2[b-badeoeogwe],
    .over-cta__title[b-badeoeogwe] {
        font-size: 40px;
        line-height: 1.15;
    }

    .service[b-badeoeogwe],
    .blocks[b-badeoeogwe],
    .growth[b-badeoeogwe],
    .partner[b-badeoeogwe] {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .service__container[b-badeoeogwe],
    .growth__container[b-badeoeogwe] {
        padding-top: 0;
    }

    .blocks[b-badeoeogwe] {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ontime__head[b-badeoeogwe] {
        padding-top: 80px;
    }

    .milestone__date[b-badeoeogwe] {
        font-size: 32px;
        line-height: 40px;
    }

    .partner__highlight[b-badeoeogwe] {
        padding: 24px;
    }

    .over-cta[b-badeoeogwe] {
        height: auto;
        padding-bottom: 80px;
    }

    .over-cta__content[b-badeoeogwe] {
        padding-top: 100px;
        gap: 40px;
    }

    .over-cta__lead[b-badeoeogwe] {
        width: auto;
        max-width: 100%;
    }

    .over-cta__lead[b-badeoeogwe],
    .partner__link[b-badeoeogwe] {
        font-size: 18px;
    }

    .partner__link[b-badeoeogwe] {
        display: inline-block;
        padding: 9px 0;
    }
}
/* /Components/Pages/Support.razor.rz.scp.css */
/* ==========================================================================
   Support – styles for /support only.
   Measurements follow the Figma frame "05 — Support" (1728px wide).
   ========================================================================== */

.sup[b-g6jmn0wlma] {
    width: 100%;
    overflow-x: clip;
}

/* ---- Hero -------------------------------------------------------------- */
.sup-hero[b-g6jmn0wlma] {
    position: relative;
    height: 368px;
    overflow: hidden;
    background: var(--creme);
    color: var(--nachtblauw);
}

.sup-hero__content[b-g6jmn0wlma] {
    width: 630px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 165px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.sup-hero__text[b-g6jmn0wlma] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    white-space: nowrap;
}

.sup-hero__lead[b-g6jmn0wlma] {
    width: 650px;
    max-width: 100vw;
    height: 47px;
}

/* ---- Tabs + FAQ -------------------------------------------------------- */
.sup-faq[b-g6jmn0wlma] {
    position: relative;
    min-height: 734px;
    background: var(--creme);
    padding-top: 47px;
    padding-bottom: 185px;
}

.sup-tabs[b-g6jmn0wlma] {
    width: 775px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 11px;
}

.sup-tab[b-g6jmn0wlma] {
    flex: 1 0 0;
    min-width: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: 8px;
    background: var(--creme-2);
    color: #797979;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.sup-tab:hover[b-g6jmn0wlma] {
    background: #dfdacd;
}

.sup-tab--active[b-g6jmn0wlma],
.sup-tab--active:hover[b-g6jmn0wlma] {
    background: var(--nachtblauw);
    color: var(--wit);
}

.sup-faq__list[b-g6jmn0wlma] {
    width: 774px;
    max-width: calc(100% - 40px);
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---- Responsive fallbacks --------------------------------------------- */
@media (max-width: 1500px) {
    .sup-hero__lead[b-g6jmn0wlma] {
        max-width: 100%;
    }
}

@media (max-width: 1300px) {
    .sup-faq[b-g6jmn0wlma] {
        height: auto;
        padding-bottom: 120px;
    }
}

@media (max-width: 900px) {
    .sup-hero[b-g6jmn0wlma] {
        height: auto;
        padding-bottom: 40px;
    }

    .sup-hero__content[b-g6jmn0wlma] {
        padding-top: 120px;
    }

    .sup-hero__text[b-g6jmn0wlma] {
        white-space: normal;
    }

    .sup-hero h1[b-g6jmn0wlma] {
        font-size: 40px;
        line-height: 1.1;
    }

    .sup-hero__lead[b-g6jmn0wlma] {
        width: 100%;
        height: auto;
    }

    .sup-tabs[b-g6jmn0wlma] {
        flex-wrap: wrap;
    }

    .sup-tab[b-g6jmn0wlma] {
        flex: 1 1 calc(50% - 11px);
        padding: 15px 12px; /* 15 + 14 + 15 = 44px tikdoel */
    }
}
/* /Components/Shared/LegalPage.razor.rz.scp.css */
/* ==========================================================================
   Legal pages (algemene voorwaarden, privacystatement)
   Dark header band with the site menu, a title in the style of
   "Zo eenvoudig werkt het", a reading column on creme, and the footer.
   ========================================================================== */

.legal[b-arc8guh5da] {
    width: 100%;
    overflow-x: clip;
}

/* ---- Header band ------------------------------------------------------- */
.legal-hero[b-arc8guh5da] {
    position: relative;
    background: var(--nachtblauw);
    color: var(--creme);
    padding: 175px 20px 100px;
    text-align: center;
}

.legal-hero__title[b-arc8guh5da] {
    font-size: 62px;
    line-height: 1.1;
    white-space: nowrap;
}

.legal-hero__subtitle[b-arc8guh5da] {
    margin-top: 24px;
    color: var(--text);
}

/* ---- Body -------------------------------------------------------------- */
.legal__body[b-arc8guh5da] {
    background: var(--creme);
    color: var(--nachtblauw);
    padding: 100px 20px 140px;
}

.legal__content[b-arc8guh5da] {
    width: 790px;
    max-width: 100%;
    margin: 0 auto;
}

/* Content is rendered by the page components, hence ::deep. */
.legal__content[b-arc8guh5da]  h2 {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 32px;
    line-height: 1.1;
    margin: 56px 0 20px;
}

.legal__content[b-arc8guh5da]  h2:first-child {
    margin-top: 0;
}

.legal__content[b-arc8guh5da]  h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    margin: 32px 0 12px;
}

.legal__content[b-arc8guh5da]  p {
    margin: 0 0 16px;
}

.legal__content[b-arc8guh5da]  p.legal__intro {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 32px;
}

.legal__content[b-arc8guh5da]  ul,
.legal__content[b-arc8guh5da]  ol {
    margin: 0 0 16px;
    padding-left: 24px;
    list-style: disc;
}

.legal__content[b-arc8guh5da]  ol {
    list-style: decimal;
}

.legal__content[b-arc8guh5da]  li {
    margin-bottom: 8px;
}

.legal__content[b-arc8guh5da]  a {
    text-decoration: underline;
    text-underline-position: from-font;
}

.legal__content[b-arc8guh5da]  a:hover {
    opacity: .75;
}

/* Knoppen in de tekstkolom (404-/foutpagina) volgen de knopstijl, niet de linkstijl. */
.legal__content[b-arc8guh5da]  a.btn {
    text-decoration: none;
    margin-top: 16px;
}

.legal__content[b-arc8guh5da]  a.btn:hover {
    opacity: 1;
}

.legal__content[b-arc8guh5da]  address {
    font-style: normal;
    margin: 0 0 16px;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
    .legal-hero[b-arc8guh5da] {
        padding: 130px 20px 70px;
    }

    .legal-hero__title[b-arc8guh5da] {
        font-size: 40px;
        white-space: normal;
    }

    .legal__body[b-arc8guh5da] {
        padding: 60px 20px 100px;
    }
}