/* ===========================================================================
   Onderdelen die bij specifieke pagina's horen.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Openingsblok van de homepagina
   --------------------------------------------------------------------------- */
.held {
    position: relative;
    background:
        radial-gradient(60% 90% at 12% 10%, rgba(124, 58, 237, .35), transparent 62%),
        radial-gradient(55% 85% at 92% 88%, rgba(37, 99, 235, .38), transparent 60%),
        var(--inkt);
    color: rgba(255, 255, 255, .85);
    padding-block: var(--ruimte-9) var(--ruimte-8);
    overflow: hidden;
}

.held::after {
    /* Fijne diagonale structuur, verwijst naar verbinding en weefsel. */
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, .028) 0 1px,
        transparent 1px 11px
    );
    pointer-events: none;
}

.held__binnen { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--ruimte-8); align-items: center; }
@media (max-width: 940px) { .held__binnen { grid-template-columns: 1fr; gap: var(--ruimte-6); } }

.held__label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(37, 99, 235, .2);
    border: 1px solid rgba(96, 165, 250, .4);
    color: #93c5fd;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: .32rem .85rem;
    border-radius: var(--rond-vol);
    margin-bottom: var(--ruimte-5);
}

.held h1 { color: var(--wit); margin-bottom: var(--ruimte-5); }
.held h1 em { font-style: italic; color: #60a5fa; }

.held__tekst { font-size: 1.12rem; color: rgba(255, 255, 255, .78); max-width: 54ch; margin-bottom: var(--ruimte-6); }
.held__knoppen { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); }

/* Collage met bestaande foto's uit het netwerk */
.held__collage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ruimte-3);
}
.held__collage img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--rond-m);
    border: 2px solid rgba(255, 255, 255, .1);
}
.held__collage img:nth-child(1) { grid-row: span 2; aspect-ratio: 1 / 2.08; }
.held__collage img:nth-child(6) { grid-column: span 2; aspect-ratio: 2.08 / 1; }
@media (max-width: 940px) {
    .held__collage { grid-template-columns: repeat(4, 1fr); }
    .held__collage img:nth-child(1) { grid-row: auto; aspect-ratio: 1; }
    .held__collage img:nth-child(6) { grid-column: auto; aspect-ratio: 1; }
    .held__collage img:nth-child(n+5) { display: none; }
}

/* ---------------------------------------------------------------------------
   2. Kerngetallen
   --------------------------------------------------------------------------- */
.cijfers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--ruimte-5);
    margin-top: var(--ruimte-8);
    padding-top: var(--ruimte-6);
    border-top: 1px solid rgba(255, 255, 255, .13);
    position: relative;
    z-index: 1;
}
.cijfer__getal {
    font-family: var(--font-titel);
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem);
    font-weight: 700;
    color: var(--goud);
    line-height: 1;
    margin-bottom: var(--ruimte-2);
}
.cijfer__naam { font-size: .87rem; color: rgba(255, 255, 255, .68); letter-spacing: .03em; }

/* ---------------------------------------------------------------------------
   3. Categorietegels
   --------------------------------------------------------------------------- */
.categorietegel {
    display: flex;
    align-items: center;
    gap: var(--ruimte-4);
    padding: var(--ruimte-4) var(--ruimte-5);
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-m);
    text-decoration: none;
    color: var(--tekst);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.categorietegel:hover {
    transform: translateY(-2px);
    box-shadow: var(--schaduw-m);
    border-color: var(--goud);
    color: var(--tekst);
}
.categorietegel__icoon {
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--rond-m);
    background: var(--room-diep);
    font-size: 1.3rem;
    flex-shrink: 0;
}
.categorietegel__naam { font-weight: 600; font-size: .98rem; line-height: 1.3; }
.categorietegel__aantal { font-size: .82rem; color: var(--tekst-zacht); }

/* ---------------------------------------------------------------------------
   4. Profielpagina van een ondernemer (Facebook & LinkedIn Stijl)
   --------------------------------------------------------------------------- */
.profiel-fb {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-l);
    box-shadow: var(--schaduw-s);
    overflow: hidden;
    margin-bottom: var(--ruimte-6);
}

.profiel-fb__omslag {
    height: 220px;
    position: relative;
    background: linear-gradient(135deg, var(--inkt) 0%, var(--paars-donker) 50%, var(--blauw-donker) 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.profiel-fb__omslag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profiel-fb__omslag-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,20,32,0.05) 0%, rgba(10,20,32,0.35) 100%);
}

.profiel-fb__hoofd {
    padding: var(--ruimte-5) var(--ruimte-6) var(--ruimte-6);
    position: relative;
}

.profiel-fb__rij {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--ruimte-4);
    margin-bottom: var(--ruimte-4);
}

.profiel-fb__profielfoto-kader {
    position: relative;
    margin-top: -90px;
    flex-shrink: 0;
}

.profiel-fb__profielfoto {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: var(--rond-vol);
    border: 4px solid var(--wit);
    background: var(--room-diep);
    box-shadow: var(--schaduw-m);
}

.profiel-fb__acties {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-2);
    align-items: center;
    margin-top: var(--ruimte-2);
}

.profiel-fb__naam {
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
    margin-bottom: var(--ruimte-1);
    line-height: 1.2;
}

.profiel-fb__tagline {
    font-size: 1.12rem;
    color: var(--tekst-zacht);
    margin-bottom: var(--ruimte-3);
    line-height: 1.45;
    max-width: 75ch;
}

.profiel-fb__labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-2);
    align-items: center;
    margin-bottom: var(--ruimte-4);
}

.profiel-fb__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ruimte-4) var(--ruimte-6);
    padding-top: var(--ruimte-4);
    border-top: 1px solid var(--lijn);
    margin-top: var(--ruimte-4);
    font-size: .93rem;
    color: var(--tekst-zacht);
}

.profiel-fb__stat-item {
    display: flex;
    align-items: center;
    gap: var(--ruimte-2);
}

.profiel-fb__stat-item b {
    font-size: 1.05rem;
    color: var(--tekst);
}

.profielkaart {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-l);
    padding: var(--ruimte-6);
    margin-bottom: var(--ruimte-6);
    box-shadow: var(--schaduw-s);
}

.profielkaart__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--ruimte-3);
    margin-bottom: var(--ruimte-5);
    border-bottom: 1px solid var(--lijn);
}

.profielkaart__titel {
    font-size: 1.25rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--ruimte-2);
}

.socialknoppen { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
.socialknop {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte-2);
    padding: .45rem .85rem;
    border-radius: var(--rond-m);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--wit) !important;
    background: var(--inkt-zacht);
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.socialknop:hover { transform: translateY(-1px); text-decoration: none; box-shadow: var(--schaduw-s); }
.socialknop--linkedin { background: #0a66c2; }
.socialknop--linkedin:hover { background: #084e96; }
.socialknop--facebook { background: #1877f2; }
.socialknop--facebook:hover { background: #0f62d1; }
.socialknop--instagram { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.socialknop--whatsapp { background: #25d366; }
.socialknop--whatsapp:hover { background: #1da851; }
.socialknop--youtube { background: #ff0000; }
.socialknop--youtube:hover { background: #cc0000; }
.socialknop--tiktok { background: #111111; }
.socialknop--website { background: var(--inkt); }
.socialknop--website:hover { background: var(--inkt-zacht); }

.profiel__rooster { display: grid; grid-template-columns: 1fr 340px; gap: var(--ruimte-7); align-items: start; }
@media (max-width: 900px) { .profiel__rooster { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
    .profiel-fb__omslag { height: 150px; }
    .profiel-fb__hoofd { padding: var(--ruimte-4); }
    .profiel-fb__profielfoto { width: 110px; height: 110px; }
    .profiel-fb__profielfoto-kader { margin-top: -65px; }
    .profielkaart { padding: var(--ruimte-4); }
}

.zijblok {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-l);
    padding: var(--ruimte-5);
    margin-bottom: var(--ruimte-5);
    box-shadow: var(--schaduw-s);
}
.zijblok h3 { font-size: 1.05rem; margin-bottom: var(--ruimte-4); }


.afgeschermd {
    background: var(--room-diep);
    border: 1px dashed var(--lijn-sterk);
    border-radius: var(--rond-m);
    padding: var(--ruimte-5);
    text-align: center;
    font-size: .92rem;
    color: var(--tekst-zacht);
}
.afgeschermd__slot { font-size: 1.6rem; margin-bottom: var(--ruimte-2); opacity: .5; }

.werkgalerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--ruimte-3); }
.werkgalerij img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rond-m); border: 1px solid var(--lijn); }

/* ---------------------------------------------------------------------------
   5. Artikel
   --------------------------------------------------------------------------- */
.artikelkop { background: var(--wit); border-bottom: 1px solid var(--lijn); padding-block: var(--ruimte-7) var(--ruimte-6); }
.artikel__meta { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); align-items: center; font-size: .87rem; color: var(--tekst-zacht); margin-bottom: var(--ruimte-4); }

.artikel__beeld {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: var(--rond-l);
    margin-bottom: var(--ruimte-6);
    background: var(--room-diep);
}

.tekstblok { font-size: 1.06rem; line-height: 1.78; color: #232f3e; }

/* ---------------------------------------------------------------------------
   6. Projectdeelnemers in Mijn omgeving
   --------------------------------------------------------------------------- */
.projectbeheer {
    display: grid;
    gap: var(--ruimte-5);
}

.projectbeheer__context {
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-m);
}

.projectbeheer__context {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ruimte-5);
    padding: var(--ruimte-5);
    overflow: hidden;
}

.projectbeheer__verbinding {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .8;
}

.projectbeheer__verbinding span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(10, 20, 32, .14), transparent);
    transform-origin: center;
}

.projectbeheer__verbinding span:first-child {
    transform: translate(-50%, -50%) rotate(28deg);
}

.projectbeheer__verbinding span:last-child {
    transform: translate(-50%, -50%) rotate(-28deg);
}

.projectbeheer__context > * {
    position: relative;
    z-index: 1;
}

.projectbeheer__context h1 {
    margin-bottom: var(--ruimte-2);
}

.projectbeheer__statusblok {
    display: grid;
    justify-items: end;
    gap: var(--ruimte-4);
    min-width: 220px;
}

.projectbeheer__tellingen {
    display: grid;
    grid-template-columns: repeat(2, minmax(88px, 1fr));
    gap: var(--ruimte-3);
    margin: 0;
}

.projectbeheer__tellingen div {
    padding: var(--ruimte-3);
    background: var(--room);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-m);
    text-align: center;
}

.projectbeheer__tellingen dt {
    margin: 0 0 .2rem;
    font-size: .78rem;
    color: var(--tekst-zacht);
}

.projectbeheer__tellingen dd {
    margin: 0;
    color: var(--inkt);
    font-family: var(--font-titel);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.projectbeheer__blok {
    padding: 0;
}

.projectbeheer__blok + .projectbeheer__blok {
    padding-top: var(--ruimte-5);
    border-top: 1px solid var(--lijn);
}

.projectbeheer__leeg {
    padding: var(--ruimte-4);
    background: var(--room);
    border: 1px dashed var(--lijn-sterk);
    border-radius: var(--rond-m);
}

.projectbeheer__lijst {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--lijn);
    border-bottom: 1px solid var(--lijn);
}

.projectreview,
.projectlid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte-4);
    padding: var(--ruimte-4) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.projectreview + .projectreview,
.projectlid + .projectlid {
    border-top: 1px solid var(--lijn);
}

.projectreview__persoon,
.projectlid__persoon {
    display: flex;
    align-items: center;
    gap: var(--ruimte-3);
    min-width: 0;
}

.projectreview .persoonbol,
.projectlid .persoonbol {
    flex-shrink: 0;
}

.projectreview__meta {
    min-width: 0;
}

.projectreview__naam {
    margin: 0 0 .25rem;
    color: var(--inkt);
    font-weight: 700;
}

.projectreview__naam a {
    color: inherit;
}

.projectreview__sub {
    margin: 0;
    color: var(--tekst-zacht);
    font-size: .9rem;
}

.projectreview__acties {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--ruimte-2);
}

.projectreview__knop {
    min-width: 132px;
    min-height: 44px;
    justify-content: center;
}

.projectleden {
    display: grid;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--lijn);
    border-bottom: 1px solid var(--lijn);
}

@media (max-width: 760px) {
    .projectbeheer__context {
        grid-template-columns: 1fr;
    }

    .projectbeheer__statusblok {
        justify-items: start;
        min-width: 0;
    }

    .projectreview,
    .projectlid {
        flex-direction: column;
        align-items: stretch;
    }

    .projectreview__acties {
        justify-content: stretch;
    }

    .projectreview__acties form {
        flex: 1 1 180px;
    }

    .projectreview__knop {
        width: 100%;
    }
}
.tekstblok p { margin-bottom: var(--ruimte-5); }
.tekstblok h2 { margin-top: var(--ruimte-7); margin-bottom: var(--ruimte-4); }
.tekstblok h3 { margin-top: var(--ruimte-6); margin-bottom: var(--ruimte-3); }
.tekstblok ul, .tekstblok ol { margin: 0 0 var(--ruimte-5); padding-left: 1.4rem; }
.tekstblok li { margin-bottom: var(--ruimte-2); }
.tekstblok img { border-radius: var(--rond-m); margin-block: var(--ruimte-5); }
.tekstblok > *:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------------
   6. Evenementen
   --------------------------------------------------------------------------- */
.eventkaart { display: grid; grid-template-columns: 96px 1fr; gap: 0; }
.eventdatum {
    background: var(--inkt);
    color: var(--wit);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ruimte-4) var(--ruimte-2);
    text-align: center;
}
.eventdatum__dag { font-family: var(--font-titel); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.eventdatum__maand { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--goud); margin-top: .25rem; }
.eventdatum__jaar { font-size: .72rem; color: rgba(255, 255, 255, .5); margin-top: .15rem; }

/* ---------------------------------------------------------------------------
   7. Fotogalerij
   --------------------------------------------------------------------------- */
.fotomuur { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--ruimte-3); }
.fotomuur a { display: block; border-radius: var(--rond-m); overflow: hidden; background: var(--room-diep); }
.fotomuur img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform .3s ease;
}
.fotomuur a:hover img { transform: scale(1.05); }

/* ---------------------------------------------------------------------------
   8. Persoonlijke omgeving
   --------------------------------------------------------------------------- */
.account__rooster { display: grid; grid-template-columns: 250px 1fr; gap: var(--ruimte-7); align-items: start; }
@media (max-width: 860px) { .account__rooster { grid-template-columns: 1fr; } }

.accountmenu { list-style: none; margin: 0; padding: 0; position: sticky; top: calc(var(--kop-hoogte) + var(--ruimte-4)); }
.accountmenu a {
    display: flex;
    align-items: center;
    gap: var(--ruimte-3);
    padding: .7rem .9rem;
    border-radius: var(--rond-m);
    color: var(--tekst-zacht);
    text-decoration: none;
    font-size: .94rem;
    font-weight: 500;
    margin-bottom: .2rem;
}
.accountmenu a:hover { background: var(--wit); color: var(--inkt); }
.accountmenu a.is-actief { background: var(--inkt); color: var(--wit); }

.statusblok {
    border-radius: var(--rond-l);
    padding: var(--ruimte-5);
    margin-bottom: var(--ruimte-6);
    border: 1px solid;
}
.statusblok--wacht    { background: #eff6ff; border-color: #bfdbfe; }
.statusblok--goed     { background: #f0fdf4; border-color: #bbf7d0; }
.statusblok--afgewezen{ background: var(--fout-vlak); border-color: #f2c4bf; }
.statusblok h3 { margin-bottom: var(--ruimte-2); }

.accountprojecten {
    display: grid;
    gap: var(--ruimte-4);
    padding: var(--ruimte-5);
    background: var(--wit);
    border: 1px solid var(--lijn);
    border-radius: var(--rond-l);
}

.accountprojecten__leeg {
    padding: var(--ruimte-4);
    background: var(--room);
    border: 1px dashed var(--lijn-sterk);
    border-radius: var(--rond-m);
}

.accountprojecten__lijst {
    border-top: 1px solid var(--lijn);
    border-bottom: 1px solid var(--lijn);
}

.accountprojecten__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte-4);
    padding: var(--ruimte-4) 0;
}

.accountprojecten__item + .accountprojecten__item {
    border-top: 1px solid var(--lijn);
}

.accountprojecten__toplink {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--inkt);
    font-size: .92rem;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

.accountprojecten__link {
    display: inline-block;
    min-height: 44px;
    color: var(--inkt);
    font-family: var(--font-titel);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.accountprojecten__link:focus-visible,
.accountprojecten a:focus-visible {
    outline: 3px solid rgba(20, 107, 96, .18);
    outline-offset: 3px;
}

@media (max-width: 680px) {
    .accountprojecten__item {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------------------------------------------------------------------------
   9. Oproepblok
   --------------------------------------------------------------------------- */
.oproep {
    background:
        radial-gradient(70% 130% at 85% 15%, rgba(124, 58, 237, .3), transparent 60%),
        radial-gradient(60% 100% at 15% 85%, rgba(37, 99, 235, .3), transparent 60%),
        var(--inkt);
    border-radius: var(--rond-xl);
    padding: var(--ruimte-8) var(--ruimte-7);
    text-align: center;
    color: rgba(255, 255, 255, .82);
}
.oproep h2 { color: var(--wit); }
.oproep p { max-width: 56ch; margin-inline: auto; margin-bottom: var(--ruimte-6); color: rgba(255, 255, 255, .78); }
@media (max-width: 560px) { .oproep { padding: var(--ruimte-6) var(--ruimte-5); } }

/* ---------------------------------------------------------------------------
   10. Bestuursleden
   --------------------------------------------------------------------------- */
.bestuur { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ruimte-6); }
.bestuurslid { text-align: center; }
.bestuurslid img {
    width: 150px; height: 150px;
    object-fit: cover;
    border-radius: var(--rond-vol);
    margin: 0 auto var(--ruimte-4);
    border: 3px solid var(--goud);
}
.bestuurslid h3 { margin-bottom: var(--ruimte-1); font-size: 1.15rem; }
.bestuurslid p { color: var(--tekst-zacht); font-size: .92rem; }

/* ---------------------------------------------------------------------------
   11. Tijdlijn met stappen
   --------------------------------------------------------------------------- */
.stappen { list-style: none; margin: 0; padding: 0; counter-reset: stap; }
.stappen li {
    counter-increment: stap;
    position: relative;
    padding-left: 3.4rem;
    padding-bottom: var(--ruimte-6);
}
.stappen li::before {
    content: counter(stap);
    position: absolute;
    left: 0; top: 0;
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--rond-vol);
    background: var(--goud);
    color: var(--inkt);
    font-weight: 700;
    font-size: 1rem;
}
.stappen li::after {
    content: '';
    position: absolute;
    left: 18px; top: 44px; bottom: 8px;
    width: 2px;
    background: var(--lijn);
}
.stappen li:last-child { padding-bottom: 0; }
.stappen li:last-child::after { display: none; }
.stappen h3 { font-size: 1.1rem; margin-bottom: var(--ruimte-2); }
.stappen p { color: var(--tekst-zacht); margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   12. Deelknoppen

   Op elke pagina, vlak boven de voettekst. De knoppen kleuren bij het
   aanwijzen naar de kleur van het netwerk zelf, zodat meteen duidelijk is
   waar je terechtkomt.
   --------------------------------------------------------------------------- */
.delen {
    background: var(--room-diep);
    border-top: 1px solid var(--lijn);
    padding-block: var(--ruimte-7);
}

.delen__binnen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-6);
    align-items: center;
    justify-content: space-between;
}

.delen__tekst { max-width: 46ch; }
.delen__titel { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-bottom: var(--ruimte-2); }
.delen__uitleg { color: var(--tekst-zacht); font-size: .95rem; margin-bottom: 0; }

.delen__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-3);
}

.deelknop {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--lijn-sterk);
    border-radius: var(--rond-vol);
    background: var(--wit);
    color: var(--inkt);
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--schaduw-s);
    transition:
        transform var(--tijd-kort) var(--soepel),
        background-color var(--tijd-kort) var(--soepel-kort),
        border-color var(--tijd-kort) var(--soepel-kort),
        color var(--tijd-kort) var(--soepel-kort),
        box-shadow var(--tijd-kort) var(--soepel);
}

.deelknop svg { display: block; }

/* Een knop met hidden hoort weg te blijven. Zonder deze regel wint de
   display van de knop het van het hidden-attribuut. */
.deelknop[hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
    .deelknop:hover {
        transform: translateY(-3px);
        color: var(--wit);
        border-color: transparent;
    }

    .deelknop--whatsapp:hover { background: #1faa55; box-shadow: 0 8px 20px rgba(31, 170, 85, .34); }
    .deelknop--facebook:hover { background: #1667d8; box-shadow: 0 8px 20px rgba(22, 103, 216, .32); }
    .deelknop--linkedin:hover { background: #0a66c2; box-shadow: 0 8px 20px rgba(10, 102, 194, .32); }
    .deelknop--x:hover        { background: #14181d; box-shadow: 0 8px 20px rgba(20, 24, 29, .34); }
    .deelknop--mail:hover     { background: var(--groen); box-shadow: 0 8px 20px rgba(20, 107, 96, .32); }
    .deelknop--link:hover,
    .deelknop--systeem:hover  { background: var(--goud); color: var(--inkt); box-shadow: var(--schaduw-goud); }
}

.deelknop:active { transform: translateY(0); box-shadow: var(--schaduw-s); }

/* Kort bericht na het kopieren van de link. */
.delen__melding {
    margin: var(--ruimte-4) 0 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--groen);
    min-height: 1.3em;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--tijd-mid) var(--soepel), transform var(--tijd-mid) var(--soepel);
}
.delen__melding.is-zichtbaar { opacity: 1; transform: none; }

@media (max-width: 640px) {
    .delen__binnen { flex-direction: column; align-items: flex-start; gap: var(--ruimte-5); }
    .deelknop { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .deelknop:hover { transform: none; }
    .delen__melding { transform: none; transition: opacity 200ms var(--soepel); }
}

/* ---------------------------------------------------------------------------
   13. Digitaal cv

   Een tijdlijn met een dunne lijn en een gouden punt per stap. Rustig gezet,
   want de inhoud is hier belangrijker dan de vorm.
   --------------------------------------------------------------------------- */
.cvkop {
    font-size: 1.05rem;
    margin-top: var(--ruimte-6);
    margin-bottom: var(--ruimte-4);
    padding-bottom: var(--ruimte-2);
    border-bottom: 1px solid var(--lijn);
    color: var(--tekst-zacht);
    font-family: var(--font-tekst);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tijdlijn {
    list-style: none;
    margin: 0 0 var(--ruimte-6);
    padding: 0 0 0 var(--ruimte-6);
    position: relative;
}
.tijdlijn::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--lijn-sterk);
}

.tijdlijn__punt {
    position: relative;
    padding-bottom: var(--ruimte-5);
}
.tijdlijn__punt::before {
    content: '';
    position: absolute;
    left: calc(var(--ruimte-6) * -1);
    top: 7px;
    width: 11px;
    height: 11px;
    border-radius: var(--rond-vol);
    background: var(--goud);
    border: 2px solid var(--room);
}
.tijdlijn__punt:last-child { padding-bottom: 0; }

.tijdlijn__periode {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--goud-donker);
    margin-bottom: var(--ruimte-1);
    font-variant-numeric: tabular-nums;
}
.tijdlijn__titel { font-size: 1.08rem; margin-bottom: 2px; }
.tijdlijn__waar { color: var(--tekst-zacht); font-size: .93rem; margin-bottom: var(--ruimte-2); }
.tijdlijn__tekst { color: var(--tekst-zacht); font-size: .95rem; margin-bottom: 0; }

/* Regel over de beschikbaarheid, bovenaan het blokje in de zijkolom. */
.beschikbaar {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    padding: var(--ruimte-3) var(--ruimte-4);
    background: var(--groen-licht);
    border-radius: var(--rond-m);
    color: #0e5349;
    font-size: .9rem;
    font-weight: 600;
}
.beschikbaar::before {
    content: '';
    width: 8px;
    height: 8px;
    margin-top: .45rem;
    flex-shrink: 0;
    border-radius: var(--rond-vol);
    background: var(--groen);
}

/* ---------------------------------------------------------------------------
   14. Video

   De video wordt pas geladen nadat de bezoeker erop klikt. Zo gaat er niets
   naar YouTube of Vimeo zolang niemand daarom vraagt.
   --------------------------------------------------------------------------- */
.videokader {
    position: relative;
    margin: 0 0 var(--ruimte-6);
    border-radius: var(--rond-l);
    overflow: hidden;
    background:
        radial-gradient(70% 120% at 20% 0%, rgba(124, 58, 237, .3), transparent 62%),
        radial-gradient(60% 100% at 80% 100%, rgba(37, 99, 235, .3), transparent 60%),
        var(--inkt);
    aspect-ratio: 16 / 9;
}

.videokader__start {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte-4);
    padding: var(--ruimte-6);
    border: 0;
    background: transparent;
    color: var(--wit);
    text-align: center;
    cursor: pointer;
    font-family: var(--font-tekst);
}

.videokader__knop {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border-radius: var(--rond-vol);
    background: var(--goud);
    color: var(--inkt);
    padding-left: 4px;
    transition: transform var(--tijd-mid) var(--soepel), box-shadow var(--tijd-mid) var(--soepel);
}

@media (hover: hover) and (pointer: fine) {
    .videokader__start:hover .videokader__knop {
        transform: scale(1.08);
        box-shadow: var(--schaduw-goud);
    }
}
.videokader__start:active .videokader__knop { transform: scale(.96); }

.videokader__tekst strong { display: block; font-size: 1.1rem; margin-bottom: .3rem; }
.videokader__tekst span { font-size: .84rem; color: rgba(255, 255, 255, .62); max-width: 42ch; display: block; }

.videokader iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
    .videokader__start:hover .videokader__knop { transform: none; }
}

/* ---------------------------------------------------------------------------
   14b. Video Carrousel
   --------------------------------------------------------------------------- */
.videocarrousel {
    position: relative;
}
.videocarrousel__spoor {
    display: flex;
    gap: var(--ruimte-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: var(--ruimte-3);
    -webkit-overflow-scrolling: touch;
}
.videocarrousel__item {
    flex: 0 0 85%;
    max-width: 540px;
    scroll-snap-align: start;
}
@media (max-width: 600px) {
    .videocarrousel__item { flex: 0 0 92%; }
}
.videocarrousel__knoppen {
    display: flex;
    justify-content: flex-end;
    gap: var(--ruimte-2);
    margin-bottom: var(--ruimte-3);
}
.carrouselknop {
    width: 38px;
    height: 38px;
    border-radius: var(--rond-vol);
    border: 1px solid var(--lijn);
    background: var(--wit);
    color: var(--inkt);
    font-size: 1.1rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--schaduw-s);
    transition: transform .15s ease, background-color .15s ease;
}
.carrouselknop:hover { background: var(--room-diep); transform: scale(1.05); }

/* ---------------------------------------------------------------------------
   15. Cv bewerken in de eigen omgeving
   --------------------------------------------------------------------------- */
.cvregel {
    border: 1px solid var(--lijn);
    border-radius: var(--rond-m);
    background: var(--wit);
    margin-bottom: var(--ruimte-3);
    overflow: hidden;
    transition: border-color var(--tijd-kort) var(--soepel-kort), box-shadow var(--tijd-kort) var(--soepel);
}
.cvregel[open] { border-color: var(--lijn-sterk); box-shadow: var(--schaduw-s); }

@media (hover: hover) and (pointer: fine) {
    .cvregel:hover { border-color: var(--goud); }
}

.cvregel > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ruimte-3);
    padding: var(--ruimte-4) var(--ruimte-5);
    cursor: pointer;
    list-style: none;
}
.cvregel > summary::-webkit-details-marker { display: none; }
.cvregel > summary::before {
    content: '+';
    width: 20px;
    flex-shrink: 0;
    color: var(--goud-donker);
    font-weight: 700;
}
.cvregel[open] > summary::before { content: '\2212'; }

.cvregel__titel { font-weight: 600; }
.cvregel__meta { color: var(--tekst-zacht); font-size: .87rem; }

.cvregel__lijf {
    padding: 0 var(--ruimte-5) var(--ruimte-5);
    border-top: 1px solid var(--lijn);
    padding-top: var(--ruimte-5);
}

.cvregel--nieuw { border-style: dashed; background: var(--room); }

/* ---------------------------------------------------------------------------
   Uitklapbare vragen (FAQ) op de openbare pagina's

   In de beheeromgeving staat een eigen, compactere variant. Deze is voor de
   site zelf: een nette rij met een plusteken dat meedraait bij het openen.
   --------------------------------------------------------------------------- */
details.uitklap {
    border-top: 1px solid var(--lijn);
}
details.uitklap:last-of-type { border-bottom: 1px solid var(--lijn); }

details.uitklap > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte-3);
    padding: var(--ruimte-4) 0;
    font-weight: 600;
    color: var(--inkt);
}
details.uitklap > summary::-webkit-details-marker { display: none; }
details.uitklap > summary::after {
    content: '+';
    font-size: 1.4rem;
    line-height: 1;
    color: var(--tekst-licht);
    transition: transform var(--tijd-mid) var(--soepel);
}
details.uitklap[open] > summary::after { transform: rotate(45deg); color: var(--groen); }
details.uitklap > summary:hover { color: var(--groen); }
details.uitklap > div { padding-bottom: var(--ruimte-4); }

/* ---------------------------------------------------------------------------
   Contactgegevens met een pictogram per regel
   --------------------------------------------------------------------------- */
.contactrij {
    display: flex;
    gap: var(--ruimte-4);
    align-items: flex-start;
    padding: var(--ruimte-4) 0;
    border-bottom: 1px solid var(--lijn);
}
.contactrij:last-of-type { border-bottom: 0; }
.contactrij__icoon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--rond-m);
    background: var(--room-diep);
    color: var(--groen);
}
.contactrij__icoon svg { width: 20px; height: 20px; }
.contactrij__naam { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-licht); }
.contactrij__waarde { font-weight: 600; word-break: break-word; }
.contactrij__waarde a { color: var(--inkt); text-decoration: none; }
.contactrij__waarde a:hover { color: var(--groen); }

/* Uitgelichte oproep in de zijbalk, in de stijl van de donkere kopsecties. */
.zijblok--oproep {
    background:
        radial-gradient(80% 120% at 100% 0%, rgba(124, 58, 237, .35), transparent 60%),
        var(--inkt);
    border-color: var(--inkt-lijn);
    color: rgba(255, 255, 255, .82);
}
.zijblok--oproep h3 { color: #fff; }
.zijblok--oproep p { color: rgba(255, 255, 255, .78); }