:root {
    /* Kleurenschema Thijs Uitvaartzorg (gelezen van thijsuitvaartzorg.nl) */
    --ink: #626262;
    --ink-strong: #3f3f3f;
    --muted: #8c8c8c;
    --paper: #f9f9f9;
    --line: #e6e6e6;
    --taupe: #c4bcba;
    --taupe-text: #9b918e;
    --taupe-dark: #7d7370;
    --coral: #f14e4e;
    --coral-dark: #d63c3c;
    --coral-darker: #b82f2f;
    --slate: #363a43;
    --accent: var(--taupe-dark);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--paper);
    --bs-link-color: #d63c3c;
    --bs-link-hover-color: #b82f2f;
    --bs-link-color-rgb: 214, 60, 60;
    --bs-link-hover-color-rgb: 184, 47, 47;
    --bs-border-color: var(--line);
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: "Open Sans", Arial, sans-serif;
}

.brand {
    color: var(--taupe-dark);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .95rem;
    font-weight: 600;
}

h1, h2 {
    font-family: "Shadows Into Light", "Open Sans", cursive;
    font-weight: 400;
    letter-spacing: .01em;
    color: var(--taupe-text);
}

h1 {
    font-size: clamp(2rem, 5vw, 2.8rem);
}

h3, h4, h5, h6 {
    color: var(--ink-strong);
    font-weight: 600;
}

.intro {
    padding: 2.5rem 0 1rem;
}

    .intro h1 {
        font-size: clamp(2.2rem, 5vw, 3.4rem);
    }

.eyebrow {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .18em;
    font: 600 .72rem "Open Sans", Arial, sans-serif;
}

.memorial-card, .form-panel, .info-panel, .login-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .3rem;
}

.memorial-card {
    box-shadow: 0 8px 28px rgba(30, 25, 15, .035);
}

.memorial-detail {
    max-width: 780px;
}

.message-text {
    white-space: pre-wrap;
    line-height: 1.8;
}

.preserve-lines {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.7;
}

.form-panel {
    padding: clamp(1.2rem, 3vw, 2rem);
}

.info-panel {
    padding: 1.5rem;
}

.login-panel {
    max-width: 460px;
    padding: 2rem;
}

.condolence {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}
/* Knoppen en links in klaprooskleur; het donker bevat voldoende contrast met witte tekst */
.btn-dark {
    --bs-btn-bg: var(--coral-dark);
    --bs-btn-border-color: var(--coral-dark);
    --bs-btn-hover-bg: var(--coral-darker);
    --bs-btn-hover-border-color: var(--coral-darker);
    --bs-btn-active-bg: var(--coral-darker);
    --bs-btn-active-border-color: var(--coral-darker);
    --bs-btn-disabled-bg: var(--taupe);
    --bs-btn-disabled-border-color: var(--taupe);
    --bs-btn-focus-shadow-rgb: 241, 78, 78;
}

.btn {
    background-image: none;
}

.btn-outline-dark {
    --bs-btn-color: var(--taupe-dark);
    --bs-btn-border-color: var(--taupe);
    --bs-btn-hover-bg: var(--taupe);
    --bs-btn-hover-border-color: var(--taupe);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--taupe-dark);
    --bs-btn-active-border-color: var(--taupe-dark);
    --bs-btn-focus-shadow-rgb: 196, 188, 186;
}

.btn-outline-secondary {
    --bs-btn-color: var(--taupe-dark);
    --bs-btn-border-color: var(--taupe);
    --bs-btn-hover-bg: var(--taupe);
    --bs-btn-hover-border-color: var(--taupe);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--taupe-dark);
    --bs-btn-active-border-color: var(--taupe-dark);
    --bs-btn-focus-shadow-rgb: 196, 188, 186;
}

.btn-outline-danger {
    --bs-btn-color: var(--coral-dark);
    --bs-btn-border-color: var(--coral);
    --bs-btn-hover-bg: var(--coral-dark);
    --bs-btn-hover-border-color: var(--coral-dark);
    --bs-btn-active-bg: var(--coral-darker);
    --bs-btn-active-border-color: var(--coral-darker);
}

a {
    color: var(--coral-dark);
}

    a:hover {
        color: var(--coral-darker);
    }

.navbar .nav-link {
    color: var(--ink);
}

    .navbar .nav-link:hover {
        color: var(--coral-dark);
    }

.form-control:focus, .form-select:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 .2rem rgba(241, 78, 78, .18);
}

.form-check-input:checked {
    background-color: var(--coral-dark);
    border-color: var(--coral-dark);
}

.form-check-input:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 .2rem rgba(241, 78, 78, .18);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--line);
}

.table thead th {
    color: var(--taupe-dark);
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.alert-success {
    --bs-alert-color: #2f5a3a;
    --bs-alert-bg: #eef6f0;
    --bs-alert-border-color: #cfe4d5;
}

.alert-warning {
    --bs-alert-color: #8a2f2f;
    --bs-alert-bg: #fdeeee;
    --bs-alert-border-color: #f5c9c9;
}

.badge.text-bg-light {
    color: var(--taupe-dark) !important;
    background: #efecea !important;
}

header.site-header {
    border-top: 3px solid var(--coral);
    background: #fff;
}

footer.site-footer {
    background: transparent;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

.memorial-card, .form-panel, .info-panel, .login-panel, .admin-card {
    border-radius: .5rem;
}

@media (max-width: 576px) {
    main.container {
        padding-top: 2rem !important;
    }

    .navbar .container {
        gap: .5rem;
    }
}

/* Private memorial page */
.private-memorial-shell {
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 3rem) 0;
}

.private-memorial {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 7vw, 5.5rem) clamp(1.25rem, 7vw, 5rem);
    background: linear-gradient(145deg, #fffefa 0%, #f7f2e9 100%);
    border: 1px solid #e5dacb;
    box-shadow: 0 24px 70px rgba(72, 57, 38, .09);
}

    .private-memorial:before, .private-memorial:after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        border: 1px solid rgba(151, 126, 96, .18);
        border-radius: 50%;
        pointer-events: none;
    }

    .private-memorial:before {
        top: -115px;
        left: -95px;
    }

    .private-memorial:after {
        bottom: -125px;
        right: -95px;
    }

.memorial-flourish {
    text-align: center;
    color: #a38b6e;
    font-size: 1.35rem;
    margin-bottom: 1.4rem;
}

.private-name {
    font-size: clamp(2.3rem, 6vw, 4.2rem);
    line-height: 1.12;
    margin: .8rem 0 1rem;
    color: #37342f;
}

.private-dates {
    color: #847968;
    letter-spacing: .04em;
    font-size: .95rem;
}

.memorial-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 220px;
    margin: 2.2rem auto;
    color: #aa9275;
}

    .memorial-divider:before, .memorial-divider:after {
        content: "";
        height: 1px;
        background: #d9cbb9;
        flex: 1;
    }

.private-message {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.12rem;
    line-height: 2;
    color: #514b43;
}

.private-info {
    max-width: 650px;
    margin: 3.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid #e4d9ca;
}

    .private-info h2 {
        font-size: 1.7rem;
        margin-bottom: 1rem;
    }

    .private-info .message-text {
        line-height: 1.85;
    }

.btn-memorial {
    background: #77634d;
    border: 1px solid #77634d;
    color: white;
    padding: .75rem 1.4rem;
    border-radius: 2rem;
}

    .btn-memorial:hover {
        background: #5e4c39;
        color: white;
    }

.private-condolence {
    padding: 1rem 0;
    border-bottom: 1px solid #e4d9ca;
}

.private-footer {
    margin: 3.5rem 0 0;
    text-align: center;
    color: #8b7b68;
    font-style: italic;
}

/* ---- Telefoon / iPhone ---- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

footer {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
}

h1, h2 {
    overflow-wrap: anywhere;
}

/* Aanraakschermen: knoppen en links minimaal ~44 px hoog */
@media (pointer: coarse) {
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm {
        min-height: 40px;
    }

    .navbar .nav-link {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }

    .form-check-input {
        width: 1.3em;
        height: 1.3em;
    }
}

/* Beheer: kaarten op telefoons in plaats van tabellen */
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.admin-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .3rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 28px rgba(30, 25, 15, .035);
}

@media (max-width: 576px) {
    .brand {
        font-size: .9rem;
        letter-spacing: .04em;
    }

    .navbar .navbar-brand {
        margin-right: .5rem;
    }

    .admin-actions {
        width: 100%;
    }

        .admin-actions .btn {
            flex: 1 1 100%;
        }

    .memorial-detail .btn {
        width: 100%;
    }

    .info-panel {
        padding: 1.1rem;
    }
}

/* ===================== Wensenboekje ===================== */
.brand-logo {
    max-height: 40px;
    width: auto;
}

.display-handwritten {
    font-family: "Shadows Into Light", "Open Sans", cursive;
    font-size: clamp(3rem, 9vw, 5rem);
    color: var(--coral-dark);
    line-height: 1;
}

.login-panel-wide {
    max-width: 560px;
}

.steps-list li {
    padding: .25rem 0;
}

.divider-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--muted);
    font-size: .85rem;
}

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

.wizard-overview-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--line);
}

    .wizard-overview-item:last-child {
        border-bottom: 0;
    }

.wizard-step-nr {
    flex: 0 0 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--taupe);
    color: var(--taupe-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 600;
}

/* Iets grotere basistekst: prettiger lezen voor een brede doelgroep */
main {
    font-size: 1.05rem;
}

/* ===================== Wizard ===================== */
.wizard-standaardknop {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.wizard-voortgang {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: thin;
}

.wizard-stap {
    flex: 0 0 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    border: 1px solid var(--taupe);
    background: #fff;
    color: var(--taupe-dark);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

    /* Deels ingevuld: halve vulling; compleet: gevuld met vinkje-kleur */
    .wizard-stap.deels {
        background: linear-gradient(to top, #f6dcdc 50%, #fff 50%);
        border-color: var(--coral);
    }

    /* Compleet: gevuld in de huiskleur */
    .wizard-stap.compleet {
        background: var(--coral-dark);
        border-color: var(--coral-dark);
        color: #fff;
    }

    /* Huidige stap: dikke rode rand met gloed (ook als hij compleet is) */
    .wizard-stap.actief {
        border: 2px solid var(--coral-dark);
        color: var(--coral-dark);
        font-weight: 700;
        box-shadow: 0 0 0 3px rgba(241, 78, 78, .25);
    }

    .wizard-stap.actief.compleet {
        color: #fff;
    }

    .wizard-stap:hover:not(.actief):not(.compleet) {
        border-color: var(--coral);
        color: var(--coral-dark);
    }

    .wizard-stap:focus-visible {
        outline: 3px solid rgba(241, 78, 78, .35);
        outline-offset: 2px;
    }

.wizard-voet {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.5rem;
    padding: .9rem 0 calc(.9rem + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--line);
}

.wizard-status {
    flex: 1 1 12rem;
    text-align: center;
}

.sectie-kop {
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--coral-dark);
    margin: 2rem 0 1rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--line);
}

.form-panel > .sectie-kop:first-child {
    margin-top: 0;
}

.sectie-blok {
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

    .sectie-blok:last-child {
        border-bottom: 0;
    }

.wizard-noot {
    font-size: .9rem;
    color: var(--taupe-dark);
    background: #f6f3f2;
    border-left: 3px solid var(--taupe);
    padding: .75rem 1rem;
    border-radius: .25rem;
}

.wizard-noot-let-op {
    border-left-color: var(--coral);
    background: #fdf1f1;
    color: #8a2f2f;
}

/* Keuzeknoppen (ja / nee / ...) */
.keuze-label {
    margin-bottom: .4rem;
}

.keuze-opties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.btn-keuze {
    --bs-btn-color: var(--ink-strong);
    --bs-btn-border-color: var(--taupe);
    --bs-btn-hover-bg: #f3efee;
    --bs-btn-hover-border-color: var(--taupe-dark);
    --bs-btn-hover-color: var(--ink-strong);
    min-width: 4.5rem;
    border-radius: 2rem;
    background: #fff;
}

.btn-check:checked + .btn-keuze {
    background: var(--coral-dark);
    border-color: var(--coral-dark);
    color: #fff;
}

.btn-check:focus-visible + .btn-keuze {
    box-shadow: 0 0 0 .2rem rgba(241, 78, 78, .3);
}

.keuze-wis {
    color: var(--muted);
    text-decoration: none;
    visibility: hidden;
}

.keuze-opties:has(.btn-check:checked) .keuze-wis {
    visibility: visible;
}

/* Platformen naast elkaar: label links, knoppen rechts */
@media (min-width: 576px) {
    .keuze-inline {
        display: grid;
        grid-template-columns: 11rem 1fr;
        align-items: center;
    }

        .keuze-inline .keuze-label {
            margin-bottom: 0;
        }
}

/* Contactblokken en lijsten */
.contact-titel {
    font-weight: 600;
    color: var(--ink-strong);
    margin: .5rem 0 .75rem;
}

.contact-blok + .contact-blok,
.contact-blok + .contact-titel {
    margin-top: 1rem;
}

.lijst-item {
    border: 1px solid var(--line);
    border-radius: .5rem;
    padding: 1rem 1rem .25rem;
    margin-bottom: 1rem;
    background: #fcfbfb;
}

.lijst-kop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.lijst-titel {
    font-weight: 600;
    color: var(--taupe-dark);
}

.lijst-regel {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.lijst-regel-nr {
    flex: 0 0 1.5rem;
    color: var(--muted);
    text-align: right;
    font-size: .9rem;
}

/* Samenvatting (stap 11) */
.samenvatting {
    display: grid;
    grid-template-columns: minmax(10rem, 16rem) 1fr;
    gap: .35rem 1.25rem;
    font-size: .95rem;
}

    .samenvatting dt {
        font-weight: 400;
        color: var(--muted);
    }

    .samenvatting dd {
        margin: 0;
        color: var(--ink-strong);
    }

@media (max-width: 576px) {
    .samenvatting {
        grid-template-columns: 1fr;
        gap: 0;
    }

        .samenvatting dd {
            margin-bottom: .6rem;
        }
}

/* Overzichtspagina */
.wizard-step-nr.deels {
    background: linear-gradient(to top, #f6dcdc 50%, #fff 50%);
    border-color: var(--coral);
}

.wizard-step-nr.compleet {
    background: var(--coral-dark);
    border-color: var(--coral-dark);
    color: #fff;
}

/* Statustekst achter de stap: geen vlak, alleen tekst */
.badge-status {
    font-size: .85rem;
    font-weight: 400;
    color: var(--muted);
    background: transparent;
    padding-right: 0;
}

    .badge-status.deels {
        color: var(--taupe-dark);
    }

    .badge-status.compleet {
        color: #2e7d46;
        font-weight: 600;
    }

        .badge-status.compleet::before {
            content: "\2713\00a0";
        }

.wizard-overview-item a {
    color: var(--ink-strong);
    text-decoration: none;
}

    .wizard-overview-item a:hover {
        color: var(--coral-dark);
    }

[hidden] {
    display: none !important;
}

/* Datumveld met kalenderknop */
.datum-veld {
    position: relative;
}

.datum-groep {
    max-width: 22rem;
}

.datum-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: .8rem;
    --bs-btn-color: var(--coral-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--coral-dark);
    --bs-btn-hover-border-color: var(--coral-dark);
}

/* Het echte datumveld is onzichtbaar; het levert alleen de kalender, die bij de knop opent. */
.datum-kalender {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* ===== Lijsten: dichtgeklapte regels, volgorde en verwijderen ===== */
.contact-item {
    padding: .35rem .5rem .35rem .75rem;
}

    .contact-item[data-open] {
        padding: .75rem 1rem .25rem;
        background: #fff;
        border-color: var(--taupe);
    }

.item-kop {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.item-kop-knop {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 0;
    background: none;
    border: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

    .item-kop-knop:focus-visible {
        outline: 3px solid rgba(241, 78, 78, .3);
        outline-offset: 2px;
        border-radius: .25rem;
    }

/* Pijltje dat aangeeft of de regel open of dicht is */
.item-pijl {
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    border-right: 2px solid var(--taupe-dark);
    border-bottom: 2px solid var(--taupe-dark);
    transform: rotate(-45deg);
    transition: transform .15s;
}

[data-open] > .item-kop .item-pijl {
    transform: rotate(45deg);
}

.item-kop .lijst-titel {
    flex: 0 0 auto;
}

.item-kort {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ink-strong);
}

    .item-kort.leeg {
        color: var(--muted);
        font-style: italic;
    }

[data-open] > .item-kop .item-kort {
    display: none;
}

.lijst-item:not([data-open]) > .item-body {
    display: none;
}

.item-body {
    padding-top: .5rem;
}

.item-acties {
    flex: 0 0 auto;
    display: flex;
    gap: .15rem;
}

.btn-icoon {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: .4rem;
    background: none;
    color: var(--taupe-dark);
}

    .btn-icoon:hover:not(:disabled) {
        background: #f3efee;
        border-color: var(--line);
        color: var(--ink-strong);
    }

    .btn-icoon:focus-visible {
        outline: 3px solid rgba(241, 78, 78, .3);
        outline-offset: 1px;
    }

.btn-icoon-verwijder:hover:not(:disabled) {
    color: var(--coral-dark);
    background: #fdf1f1;
}

/* Eerste regel kan niet omhoog, laatste niet omlaag: knop blijft staan (uitlijning), maar is uitgeschakeld */
.btn-icoon:disabled {
    opacity: .3;
    cursor: default;
    background: none;
    border-color: transparent;
}

/* Telefoon: omschrijving onder de titel, knoppen blijven rechts */
@media (max-width: 576px) {
    .item-kop-knop {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .item-kort {
        flex-basis: 100%;
        padding-left: 1.15rem;
        font-size: .9rem;
    }

    .btn-icoon {
        width: 2.25rem;
    }
}

/* =====================================================================
   Huisstijl website (header, menu, koppen, knoppen, voettekst)
   Kleuren via variabelen; een organisatie kan ze overschrijven in
   wwwroot/huisstijl/{map}/huisstijl.css.
   ===================================================================== */
:root {
    --huis-kop: #b5aeac;          /* handgeschreven koppen, lichtgrijs zoals de website */
    --huis-menu: #2c2e2e;         /* menu-items */
    --huis-accent: var(--coral);  /* streepje onder het actieve menu-item */
    --huis-knop: #958d8c;         /* knoppen: warm grijs (iets donkerder dan de website, voor leesbaarheid) */
    --huis-knop-hover: #7d7370;
    --huis-sectie-grijs: #f9f9f9;
    --huis-footer: #363a43;
    --huis-footer-tekst: #c9cbd0;
}

body {
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

/* Binnenpagina's staan op lichtgrijs met witte panelen, zoals de grijze secties van de website */
main.pagina-grijs {
    background: var(--huis-sectie-grijs);
}

@media (max-width: 576px) {
    main.pagina-grijs > .container {
        padding-top: 2rem !important;
    }
}

/* ---- Header ---- */
header.site-header {
    border-top: 0;
    background: #fff;
    border-bottom: 1px solid #ececec;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.site-header .navbar {
    padding: 1rem .75rem;   /* .navbar zet de zijmarge van .container anders op 0 */
}

.brand-logo {
    max-height: none;
    height: 84px;
    width: auto;
    display: block;
}

.brand-naam {
    font: 600 1.1rem Montserrat, "Open Sans", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--huis-menu);
}

.hoofdmenu {
    gap: .25rem 1.4rem;
    align-items: center;
}

.hoofdmenu .nav-link,
.navbar .hoofdmenu .nav-link {
    font-family: Montserrat, "Open Sans", sans-serif;
    font-weight: 600;
    font-size: .86rem;
    letter-spacing: .06em;
    color: var(--huis-menu);
    padding: .35rem 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    border-radius: 0;
}

    .hoofdmenu .nav-link:hover,
    .hoofdmenu .nav-link:focus-visible {
        color: var(--huis-menu);
        border-bottom-color: var(--huis-kop);
    }

    .hoofdmenu .nav-link.actief {
        border-bottom-color: var(--huis-accent);
    }

.hoofdmenu form {
    margin: 0;
}

.navbar-toggler {
    border-color: #e1dddc;
}

    .navbar-toggler:focus {
        box-shadow: 0 0 0 .2rem rgba(149, 141, 140, .3);
    }

@media (max-width: 991.98px) {
    .brand-logo {
        height: 60px;
    }

    .hoofdmenu {
        align-items: flex-start;
        padding: .75rem 0 .25rem;
    }

        .hoofdmenu .nav-link {
            font-size: .95rem;
            padding: .55rem 0;
        }
}

/* ---- Koppen en tekst ---- */
h1, h2,
.display-handwritten {
    font-family: "Shadows Into Light", "Open Sans", cursive;
    font-weight: 400;
    color: var(--huis-kop);
    letter-spacing: .02em;
}

.display-handwritten {
    font-size: clamp(3rem, 8vw, 4.6rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.eyebrow {
    color: var(--huis-knop);
    font-family: Montserrat, "Open Sans", sans-serif;
}

.lead-tekst {
    font-size: 1.2rem;
    line-height: 1.7;
}

/* ---- Knoppen: warm grijs met witte tekst, zoals "Lees meer" op de website ---- */
.btn {
    border-radius: .2rem;
    font-weight: 600;
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--huis-knop);
    --bs-btn-border-color: var(--huis-knop);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--huis-knop-hover);
    --bs-btn-hover-border-color: var(--huis-knop-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--huis-knop-hover);
    --bs-btn-active-border-color: var(--huis-knop-hover);
    --bs-btn-disabled-bg: #cfc9c8;
    --bs-btn-disabled-border-color: #cfc9c8;
    --bs-btn-focus-shadow-rgb: 149, 141, 140;
}

.btn-outline-secondary {
    --bs-btn-color: var(--huis-knop-hover);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #cfc9c8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--huis-knop);
    --bs-btn-hover-border-color: var(--huis-knop);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--huis-knop-hover);
    --bs-btn-active-border-color: var(--huis-knop-hover);
}

/* ---- Startpagina ---- */
.hero {
    height: clamp(200px, 32vw, 460px);
    background-size: cover;
    background-position: center 55%;
}

.sectie {
    padding: clamp(3rem, 7vw, 5rem) 0;
}

.sectie-wit {
    background: #fff;
}

.sectie-grijs {
    background: var(--huis-sectie-grijs);
}

.sectie-smal {
    max-width: 820px;
}

.sectie h2 {
    font-size: clamp(2rem, 5vw, 2.8rem);
}

.stappen-uitleg li {
    text-align: center;
}

.stappen-uitleg h3 {
    font: 600 1rem Montserrat, "Open Sans", sans-serif;
    letter-spacing: .03em;
    color: var(--huis-menu);
    margin: 1rem 0 .5rem;
}

.stappen-uitleg p {
    margin: 0;
}

.stap-cijfer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e6e1e0;
    font: 400 1.8rem "Shadows Into Light", cursive;
    color: var(--huis-accent);
}

/* ---- Voettekst ---- */
footer.site-footer {
    background: var(--huis-footer);
    color: var(--huis-footer-tekst);
    border-top: 0;
    padding-top: 3.5rem;
    font-size: .92rem;
    text-align: left;
}

.site-footer a {
    color: #fff;
    text-decoration: none;
}

    .site-footer a:hover {
        text-decoration: underline;
        color: #fff;
    }

.footer-kop {
    font: 700 .8rem Montserrat, "Open Sans", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.1rem;
}

.footer-telefoon {
    font: 500 1.35rem Montserrat, "Open Sans", sans-serif;
    margin-bottom: 1rem;
}

.footer-adres {
    font-size: .85rem;
}

.footer-logo {
    width: 170px;
    max-width: 60%;
    height: auto;
}

.footer-naam {
    font: 600 1.1rem Montserrat, "Open Sans", sans-serif;
    color: #fff;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: .9rem;
    margin-top: 1.5rem;
}

    .footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 50%;
        background: #fff;
    }

    .footer-social svg {
        width: 1.3rem;
        height: 1.3rem;
        fill: var(--huis-footer);
    }

.footer-links li {
    margin-bottom: .45rem;
}

.footer-onderregel {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    text-align: center;
    font-size: .8rem;
    color: #9a9ca3;
}

/* ---- Delen ---- */
.gedeeld-band {
    background: #fbf3ea;
    border-bottom: 1px solid #efe1cf;
    color: #6b5a45;
    font-size: .95rem;
    padding: .7rem 0;
}

.toegang-item {
    padding: 1rem 0;
    border-top: 1px solid var(--line);
}

    .toegang-item:first-child {
        border-top: 0;
        padding-top: .25rem;
    }

.toegang-item .form-select {
    width: auto;
}

.logboek li {
    padding: .55rem 0;
    border-top: 1px solid var(--line);
    font-size: .9rem;
    line-height: 1.45;
}

    .logboek li:first-child {
        border-top: 0;
    }

.logboek-tijd {
    display: block;
    font-size: .78rem;
    color: var(--muted);
}

.logboek-door {
    color: var(--muted);
    font-size: .85rem;
}

.code-veld {
    letter-spacing: .4em;
    text-align: center;
    font-weight: 600;
    max-width: 14rem;
    margin-inline: auto;
}

/* ---- Privacyverklaring ---- */
.privacy h2 {
    font-size: 1.8rem;
    margin: 2rem 0 .6rem;
}

.privacy li {
    margin-bottom: .35rem;
}

/* ---- Uitleg bij de stapbolletjes (in plaats van de zwarte standaard-tooltip van de browser) ---- */
.wizard-stap {
    position: relative;
}

    .wizard-stap[data-tip]::after {
        content: attr(data-tip) "\A" attr(data-status);
        white-space: pre;
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        transform: translate(-50%, -4px);
        z-index: 30;
        padding: .45rem .75rem;
        background: #fff;
        border: 1px solid #e6e1e0;
        border-top: 3px solid var(--huis-accent, #f14e4e);
        border-radius: .35rem;
        box-shadow: 0 8px 22px rgba(60, 50, 45, .12);
        color: var(--ink-strong);
        font: 600 .82rem/1.45 "Open Sans", Arial, sans-serif;
        text-align: left;
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s ease, transform .15s ease;
    }

    .wizard-stap[data-status=""]::after {
        content: attr(data-tip);
    }

    .wizard-stap[data-tip]:hover::after,
    .wizard-stap[data-tip]:focus-visible::after {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    /* Eerste en laatste bolletjes: uitleg niet over de rand van het scherm */
    .wizard-stap[data-tip]:nth-child(-n+2)::after {
        left: 0;
        transform: translate(0, -4px);
    }

    .wizard-stap[data-tip]:nth-child(-n+2):hover::after,
    .wizard-stap[data-tip]:nth-child(-n+2):focus-visible::after {
        transform: translate(0, 0);
    }

    .wizard-stap[data-tip]:nth-last-child(-n+2)::after {
        left: auto;
        right: 0;
        transform: translate(0, -4px);
    }

    .wizard-stap[data-tip]:nth-last-child(-n+2):hover::after,
    .wizard-stap[data-tip]:nth-last-child(-n+2):focus-visible::after {
        transform: translate(0, 0);
    }

/* Op aanraakschermen geen zweefuitleg: die blijft anders hangen na een tik */
@media (hover: none) {
    .wizard-stap[data-tip]::after {
        display: none;
    }
}

/* Met muis: bolletjes niet in een scrollstrook, anders valt de uitleg weg (overflow knipt hem af) */
@media (hover: hover) {
    .wizard-voortgang {
        overflow: visible;
        flex-wrap: wrap;
    }
}