/*
 * Navigatie en footer in de stijl van ontwerp D (canvas "Ronde 2", richting D · Sterrenbeeld).
 * Markup: resources/views/navigation/_navbar.antlers.html en partials/_footer.antlers.html.
 * Overschrijft waar nodig het thema in app.css; daarom staat dit bestand erna.
 */
/* Montserrat van de eigen server, niet van Google Fonts: zo gaat er zonder toestemming geen IP-adres
   naar Google (zie de privacyverklaring). Variabel lettertype, 100 tot 900, Latijn en Latijn-uitgebreid. */
@font-face {
    font-family: Montserrat;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-latin-ext-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: Montserrat;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-latin-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-latin-ext-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat/montserrat-latin-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Navigatie ---------- */

.main-nav.nav-d {
    font-family: Montserrat, system-ui, sans-serif;
    padding: 0;
    background: linear-gradient(180deg, rgba(18, 30, 37, .55) 0%, rgba(18, 30, 37, 0) 100%);
}
.nav-d-binnen {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    min-height: 128px;
    transition: min-height .2s ease-in-out;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.main-nav.nav-d .main-logo { padding-top: 0; }
/* Groot logo boven de hero, kleiner zodra de balk wit wordt. */
.main-nav.nav-d .main-logo img { height: 80px; width: auto; transition: height .2s ease-in-out; }
.main-nav.nav-d.navbar-scrolled .main-logo img { height: 48px; }
.main-nav.nav-d.navbar-scrolled .nav-d-binnen { min-height: 80px; }

.main-nav.nav-d .navbar-nav .nav-link {
    padding-left: 0;
    padding-right: 0;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
}
.main-nav.nav-d .navbar-nav .nav-link:hover,
.main-nav.nav-d .navbar-nav .nav-link:focus,
.main-nav.nav-d .navbar-nav .nav-link.show { color: #e4dd48; }
.main-nav.nav-d .nav-item > .nav-link:before { background-color: #e4dd48; }

.nav-d-acties { display: flex; align-items: center; gap: 8px; }
.nav-d-icoon {
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #ffffff;
    text-decoration: none;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}
.nav-d-icoon:hover, .nav-d-icoon:focus-visible { color: #e4dd48; }
.nav-d-label { display: none; }
.nav-d-taal {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
.nav-d-taal:hover { color: #e4dd48; }
.nav-d-contact {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 8px;
    background: #e4dd48;
    color: #1f2a30;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.nav-d-contact:hover, .nav-d-contact:focus-visible { background: #d6cf3a; color: #1f2a30; }

/* Gescrold: wit, donkere tekst, een dunne lijn in plaats van een schaduw. */
.main-nav.nav-d.navbar-scrolled { background-image: none; box-shadow: 0 1px 0 #e3e9ed; }
.main-nav.nav-d.navbar-scrolled .navbar-nav .nav-link,
.main-nav.nav-d.navbar-scrolled .nav-d-icoon,
.main-nav.nav-d.navbar-scrolled .nav-d-taal { color: #1f2a30; }
.main-nav.nav-d.navbar-scrolled .navbar-nav .nav-link:hover,
.main-nav.nav-d.navbar-scrolled .navbar-nav .nav-link.show,
.main-nav.nav-d.navbar-scrolled .nav-d-icoon:hover,
.main-nav.nav-d.navbar-scrolled .nav-d-taal:hover { color: #0a6e99; }
.main-nav.nav-d.navbar-scrolled .nav-item > .nav-link:before { background-color: #008ac0; }

@media (min-width: 992px) {
    .nav-d-binnen { flex-wrap: nowrap; gap: 32px; }
    .main-nav.nav-d .navbar-collapse { min-width: 0; justify-content: space-between; gap: 32px; }
    .main-nav.nav-d .nav-d-links { margin: 0 auto; gap: 28px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .nav-d-binnen { gap: 16px; }
    .main-nav.nav-d .navbar-collapse { gap: 16px; }
    .main-nav.nav-d .nav-d-links { gap: 16px; }
    .nav-d-acties { gap: 2px; }
    .nav-d-contact { padding: 0 14px; }
}
@media (max-width: 991.98px) {
    .main-nav.nav-d .main-logo img { height: 56px; }
    .main-nav.nav-d.navbar-scrolled .main-logo img { height: 44px; }
    .nav-d-binnen { min-height: 84px; }
    .main-nav.nav-d.navbar-scrolled .nav-d-binnen { min-height: 68px; }
    .navbar-expand-lg.main-nav.nav-d .navbar-collapse { margin-top: 0; padding: 8px 16px 20px; }
    .navbar-expand-lg.main-nav.nav-d .navbar-collapse.show,
    .navbar-expand-lg.main-nav.nav-d .navbar-collapse.collapsing { background-color: #1f2a30; border-radius: 0 0 12px 12px; }
    .navbar-expand-lg.main-nav.nav-d.navbar-scrolled .navbar-collapse.show,
    .navbar-expand-lg.main-nav.nav-d.navbar-scrolled .navbar-collapse.collapsing { background-color: transparent; }
    .nav-d-acties { flex-wrap: wrap; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .15); }
    .main-nav.nav-d.navbar-scrolled .nav-d-acties { border-top-color: #e3e9ed; }
    .nav-d-icoon { padding: 0 10px; }
    .nav-d-label { display: inline; }
}

/* ---------- Footer ---------- */

.voet-d {
    scroll-margin-top: 92px;
    font-family: Montserrat, system-ui, sans-serif;
    background: #1f2a30;
    color: #d5dfe4;
    font-size: 15px;
    line-height: 1.6;
}
.voet-d a { color: #d5dfe4; text-decoration: none; }
.voet-d a:hover, .voet-d a:focus-visible { color: #ffffff; text-decoration: underline; }
.voet-d strong { color: #ffffff; font-weight: 600; }
.voet-d-binnen {
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.voet-d-kop {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.voet-d-bereik { display: flex; flex-direction: column; gap: 6px; }
.voet-d-vraag { color: #c3d0d6; }
.voet-d-groot { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 28px; font-weight: 600; line-height: 1.3; }
.voet-d .voet-d-groot a { color: #ffffff; }
.voet-d-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.voet-d .voet-d-knop {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
}
.voet-d .voet-d-knop-geel { background: #e4dd48; color: #1f2a30; }
.voet-d .voet-d-knop-geel:hover { background: #d6cf3a; color: #1f2a30; }
.voet-d .voet-d-knop-rand { border: 1.5px solid #ffffff; color: #ffffff; }
.voet-d .voet-d-knop-rand:hover { background: rgba(255, 255, 255, .08); }
.voet-d .voet-d-knop-tekst { padding: 0 12px; color: #ffffff; }

.voet-d-kolommen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 40px 32px;
}
.voet-d-kolommen > nav, .voet-d-kolommen > div { display: flex; flex-direction: column; gap: 10px; }.voet-d .voet-d-meer { color: #ffffff; font-weight: 600; }
.voet-d-plekken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.voet-d-plekken li { display: flex; align-items: center; gap: 10px; }
.voet-d-plekken li::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e4dd48;
}
.voet-d-zoeken { gap: 28px !important; }
.voet-d-zoeken form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.voet-d-zoeken label { color: #ffffff; font-weight: 600; }
.voet-d-zoeken input[type="search"] {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #5d727c;
    background: #26363e;
    color: #ffffff;
    font: inherit;
}
.voet-d-zoeken input[type="search"]::placeholder { color: #9fb1ba; }
.voet-d-zoeken input[type="search"]:focus { outline: 2px solid #e4dd48; outline-offset: 1px; }
.voet-d-sociaal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.voet-d .voet-d-sociaal a { color: #ffffff; }

.voet-d-certificaten { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }

.voet-d-onder {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 13px;
}
.voet-d-onder img { height: 30px; width: auto; display: block; }
/* Rechts twee regels: de kleine lettertjes met de cookie-instellingen, daaronder de bedrijfsgegevens. */
.voet-d-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.voet-d-klein { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 20px; }
.voet-d .voet-d-klein a { color: #d5dfe4; }
.voet-d .voet-d-klein a:hover, .voet-d .voet-d-klein a:focus-visible { color: #ffffff; text-decoration: underline; }
.voet-d-bedrijf { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; margin: 0; font-size: 12px; color: #9fb1ba; }
@media (max-width: 767.98px) {
    .voet-d-rechts { align-items: flex-start; text-align: left; }
    .voet-d-klein, .voet-d-bedrijf { justify-content: flex-start; }
}
.voet-d .voet-d-cookie {
    padding: 0;
    border: 0;
    background: none;
    color: #d5dfe4;
    font: inherit;
    cursor: pointer;
}
.voet-d .voet-d-cookie:hover { color: #ffffff; text-decoration: underline; }

/* ---------- Megamenu ("Wat we doen", navigation/menu/_mega) ---------- */

@media (min-width: 992px) {
    /* Gecentreerd onder de hele balk in plaats van onder het menu-item, zodat het niet buiten beeld valt. */
    .main-nav.nav-d .nav-item.mega { position: static; }
    .main-nav.nav-d .nav-item.mega > .mega-d { top: 100%; }
    /* Brug over de ruimte tussen menu-item en paneel, zodat hover niet wegvalt. */
    .mega-d::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px; }
}
.mega-d {
    width: min(920px, calc(100vw - 48px));
    padding: 0;
    border: 0;
    border-radius: 16px;
    overflow: visible;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(18, 30, 37, .22);
    font-family: Montserrat, system-ui, sans-serif;
}
.mega-d-raster { display: grid; grid-template-columns: 280px repeat(auto-fit, minmax(220px, 1fr)); }
.mega-d-intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 28px;
    border-radius: 16px 0 0 0;
    background: #1f2a30;
    color: #ffffff;
}
.mega-d-oog { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #e4dd48; }
.mega-d-oog::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #e4dd48; box-shadow: 0 0 0 4px rgba(228, 221, 72, .22); }
.mega-d-kop { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.3; color: #ffffff; white-space: normal; }
.mega-d-ster { width: 160px; height: 70px; margin-top: auto; }
.main-nav .mega-d .mega-d-alles { color: #ffffff; font-size: 15px; font-weight: 600; text-decoration: none; }
.main-nav .mega-d .mega-d-alles:hover { color: #e4dd48; }

.mega-d-groep { display: flex; flex-direction: column; gap: 6px; padding: 28px 20px 24px; }
.mega-d-groep ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.main-nav .mega-d .mega-d-groepkop {
    display: block;
    padding: 0 10px 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5b6b75;
    text-decoration: none;
}
.main-nav .mega-d .mega-d-groepkop:hover { color: #0a6e99; }
.main-nav .mega-d .mega-d-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #1f2a30;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: normal;
}
.mega-d-icoon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef6fa;
    color: #0a6e99;
    font-size: 16px;
    transition: background-color .15s, color .15s;
}
.main-nav .mega-d .mega-d-item:hover,
.main-nav .mega-d .mega-d-item:focus-visible { background: #f3f7f9; color: #0a6e99; }
.main-nav .mega-d .mega-d-item:hover .mega-d-icoon,
.main-nav .mega-d .mega-d-item:focus-visible .mega-d-icoon { background: #e4dd48; color: #1f2a30; }

.mega-d-voet {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 24px;
    padding: 16px 28px;
    border-top: 1px solid #e3e9ed;
    border-radius: 0 0 16px 16px;
    background: #f3f7f9;
    font-size: 14px;
    color: #5b6b75;
}
.main-nav .mega-d .mega-d-voet a { color: #0a6e99; font-weight: 600; text-decoration: none; }
.main-nav .mega-d .mega-d-voet a:hover { text-decoration: underline; }

@media (max-width: 991.98px) {
    .mega-d { width: auto; box-shadow: none; border-radius: 12px; }
    .navbar-expand-lg .mega-d.dropdown-menu.show { border-left: 0; }
    .mega-d-raster { grid-template-columns: 1fr; }
    .mega-d-intro { display: none; }
    .mega-d-groep { padding: 16px 12px 8px; }
    .mega-d-voet { padding: 12px 16px; border-radius: 0 0 12px 12px; }
}

/* ---------- Contactformulier in de footer (form contact_kort, public/js/contact.js) ---------- */

.voet-d-kop { align-items: flex-start; }
.voet-d-bereik { flex: 1 1 380px; gap: 10px; }
.voet-d-bereik .voet-d-knoppen { padding-top: 18px; }
.contact-kort-plek { flex: 1 1 460px; max-width: 560px; display: flex; justify-content: flex-end; align-self: center; }
.contact-kort-open {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 28px;
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    color: #1f2a30;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.contact-kort-open:hover, .contact-kort-open:focus-visible { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(228, 221, 72, .45); }
.contact-kort-open[hidden], .contact-kort-sluit[hidden], .contact-kort[hidden] { display: none; }
.contact-kort {
    position: relative;
    width: 100%;
    margin: 0;
    scroll-margin-top: 110px;
    padding: 28px;
    border-radius: 16px;
    background: #ffffff;
    color: #374151;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}
.contact-kort-formulier { display: flex; flex-direction: column; gap: 14px; }
.contact-kort-sluit {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: #f3f6f8;
    color: #4c6875;
    cursor: pointer;
}
.contact-kort-sluit:hover { background: #e3e9ed; }
.contact-kort-kop { padding-right: 44px; }
.contact-kort-kop { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: #1f2a30; }
.contact-kort-intro { margin: -6px 0 2px; font-size: 15px; color: #5b6b75; }
.contact-kort-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.contact-kort-breed { grid-column: 1 / -1; }
.contact-kort-veld { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; color: #1f2a30; }
.contact-kort-veld small { font-weight: 400; color: #5b6b75; font-size: 13px; }
.contact-kort-veld input,
.contact-kort-veld textarea {
    width: 100%;
    padding: 0 12px;
    border: 1px solid #b9cbd4;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2a30;
    font: inherit;
    font-size: 16px;
    font-weight: 400;
}
.contact-kort-veld input { min-height: 46px; }
.contact-kort-veld textarea { padding: 10px 12px; resize: vertical; min-height: 84px; }
.contact-kort-veld input:focus,
.contact-kort-veld textarea:focus { outline: 2px solid #008ac0; outline-offset: 0; border-color: #008ac0; }
.contact-kort-honing { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-kort-turnstile:empty { display: none; }
.contact-kort-fout { margin: 0; padding: 10px 12px; border-radius: 8px; background: #fdecec; color: #9b1c1c; font-size: 14px; }
.contact-kort-onder { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; }
.contact-kort-privacy { flex: 1 1 220px; font-size: 13px; color: #5b6b75; }
.voet-d .contact-kort-privacy a { color: #0a6e99; text-decoration: underline; }
.contact-kort button[type="submit"] {
    min-height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: 8px;
    background: #e4dd48;
    color: #1f2a30;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.contact-kort button[type="submit"]:hover { background: #d6cf3a; }
.contact-kort button[type="submit"]:disabled { opacity: .7; cursor: progress; }
.contact-kort-dank { display: flex; flex-direction: column; gap: 10px; outline: 0; }
.contact-kort-dank[hidden] { display: none; }
.contact-kort-dank p { margin: 0; }
.contact-kort-vink {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e4dd48;
    color: #1f2a30;
    box-shadow: 0 0 0 6px rgba(228, 221, 72, .25);
}

/* ---------- Naar boven (layout.antlers.php) ---------- */

.back-top.terug-omhoog {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e4dd48;
    color: #1f2a30;
    box-shadow: 0 0 0 5px rgba(228, 221, 72, .22), 0 8px 20px rgba(18, 30, 37, .25);
    transform: translateY(8px);
    transition: opacity .3s, visibility 0s .3s, transform .3s, background-color .15s, color .15s;
}
.back-top.terug-omhoog.backtop-is-visible { transform: none; transition: opacity .3s, visibility 0s, transform .3s, background-color .15s, color .15s; }
.back-top.terug-omhoog.backtop-fade-out { opacity: 1; }
.back-top.terug-omhoog:hover,
.back-top.terug-omhoog:focus-visible,
.no-touch .back-top.terug-omhoog:hover { background: #ffffff; color: #1f2a30; outline: 0; }
@media (max-width: 575.98px) { .back-top.terug-omhoog { right: 16px; bottom: 16px; width: 44px; height: 44px; } }

/* ---------- Vestigingen (set companies met kaart, /info/vestigingen) ---------- */

.vestigingen-overzicht {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 40px 56px;
    align-items: center;
    margin: 12px 0 56px;
    font-family: Montserrat, system-ui, sans-serif;
}
.vestigingen-nl { position: relative; aspect-ratio: 870 / 1000; }
.vestigingen-nl img { display: block; width: 100%; height: 100%; }
.vestigingen-pin {
    position: absolute;
    z-index: 1;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #1f2a30;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 0 3px #ffffff;
    transition: background-color .15s, color .15s;
}
.vestigingen-pin:hover, .vestigingen-pin:focus-visible { z-index: 2; background: #e4dd48; color: #1f2a30; outline: 0; }
.vestigingen-pin-label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 9px;
    border-radius: 6px;
    background: #1f2a30;
    color: #ffffff;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.vestigingen-pin:hover .vestigingen-pin-label, .vestigingen-pin:focus-visible .vestigingen-pin-label { opacity: 1; }
.vestigingen-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 6px 24px; }
.vestigingen-lijst a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; color: #1f2a30; text-decoration: none; }
.vestigingen-lijst a:hover, .vestigingen-lijst a:focus-visible { background: #f3f7f9; }
.vestigingen-lijst strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.vestigingen-lijst small { display: block; font-size: 13px; color: #5b6b75; line-height: 1.4; }
.vestiging-nr {
    flex: none;
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #1f2a30;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

.vestigingen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 540px), 1fr)); gap: 24px; }
.vestiging {
    display: flex;
    overflow: hidden;
    border: 1px solid #e3e9ed;
    border-radius: 14px;
    background: #ffffff;
    scroll-margin-top: 110px;
    transition: box-shadow .2s;
}
/* Kort oplichten van de vestiging waar je via de kaart of de lijst naartoe springt (#slug). */
.vestiging:target { animation: vestiging-oplichten 2.6s ease-out forwards; }
@keyframes vestiging-oplichten {
    0%, 45% { box-shadow: 0 0 0 3px #e4dd48; }
    100% { box-shadow: 0 0 0 3px rgba(228, 221, 72, 0); }
}
.vestiging-kaart { flex: 0 0 42%; background: #eef2f4; }
.vestiging-kaart img { display: block; width: 100%; height: 100%; min-height: 230px; object-fit: cover; }
.vestiging-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; font-family: Montserrat, system-ui, sans-serif; }
.vestiging-oog { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #0a6e99; }
.vestiging-oog .vestiging-nr { width: 24px; height: 24px; font-size: 12px; }
.vestiging-tekst h3 { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; text-transform: none; color: #1f2a30; }
.vestiging-formeel { margin: 0; font-size: 13px; color: #5b6b75; }
.vestiging-tekst address { margin: 10px 0 0; font-size: 15px; font-style: normal; line-height: 1.55; color: #374151; }
.vestiging-adres p { margin: 0; }
.vestiging-afspraak { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 6px 10px; border-radius: 8px; background: #faf8d4; color: #1f2a30; font-size: 14px; font-weight: 600; }
.vestiging-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: auto; padding-top: 16px; }
.vestiging-route {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    background: #e4dd48;
    color: #1f2a30;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.vestiging-route:hover { background: #d6cf3a; color: #1f2a30; }
.vestiging-link { color: #0a6e99; font-size: 15px; font-weight: 600; text-decoration: none; }
.vestiging-link:hover { text-decoration: underline; }
.vestigingen-bron { margin: 20px 0 0; font-size: 13px; color: #5b6b75; text-align: right; }
.vestigingen-bron a { color: #5b6b75; }
@media (max-width: 860px) {
    .vestigingen-overzicht { grid-template-columns: minmax(0, 1fr); }
    .vestigingen-nl { max-width: 360px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
    .vestiging { flex-direction: column; }
    .vestiging-kaart { flex-basis: auto; }
    .vestiging-kaart img { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
}
.voet-d .voet-d-kopje { color: #ffffff; }

/* =====================================================================
 * Ontwerp D door de hele site: paginakop, homepageblokken en de oude sets.
 * Het idee: Open Line als sterrenbeeld. Stippen zijn mensen, diensten en plekken, lijnen de
 * verbindingen; de gele stip is waar het om draait (u, Open Line, de knop). Zie CLAUDE.md.
 * ===================================================================== */

/* ---------- Gedeeld: koppen, kopje met stip, knoppen, links, sectiekop ---------- */

/* Het thema zet h1 tot en met h3 in hoofdletters (app.css, "Insert Your Custom SCSS"); D niet. */
h1, .h1, h2, .h2, h3, .h3 { text-transform: none; font-weight: 600; letter-spacing: normal; }

.oog-d, .kop-d-oog {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #0a6e99;
}
.oog-d::before, .kop-d-oog::before {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e4dd48;
    box-shadow: 0 0 0 5px rgba(228, 221, 72, .25);
}
.oog-d-geel, .kop-d-oog { color: #e4dd48; }

.knop-d {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.knop-d-geel { background: #e4dd48; color: #1f2a30; }
.knop-d-geel:hover, .knop-d-geel:focus-visible { background: #d6cf3a; color: #1f2a30; }
.knop-d-rand { border: 1.5px solid #ffffff; color: #ffffff; }
.knop-d-rand:hover, .knop-d-rand:focus-visible { background: rgba(255, 255, 255, .1); color: #ffffff; }

.link-d { color: #0a6e99; font-weight: 600; text-decoration: none; white-space: nowrap; }
.link-d:hover, .link-d:focus-visible { color: #08587a; text-decoration: underline; }

.sectiekop-d { display: flex; flex-direction: column; gap: 10px; margin: 0 0 48px; }
.sectiekop-d h2 { margin: 0; font-size: clamp(30px, 3.2vw, 40px); font-weight: 600; line-height: 1.15; color: #1f2a30; text-wrap: balance; }
.sectiekop-d-sub { margin: 0; font-size: 20px; font-weight: 500; color: #1f2a30; }
.sectiekop-d-intro { margin: 0; max-width: 46em; font-size: 18px; color: #5b6b75; }
.sectiekop-d-intro p { margin: 0 0 .6em; }
.sectiekop-d-intro p:last-child { margin: 0; }
.sectiekop-d-met-link { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; }
.sectiekop-d-met-link > div { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Paginakop (sets/hero/_kop) ---------- */

.kop-d {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: max(var(--kop-hoogte, 40vh), 440px);
    display: flex;
    flex-direction: column;
    background: #121e25;
    color: #e8eef1;
    font-family: Montserrat, system-ui, sans-serif;
}
.kop-d-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.kop-d-waas {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(18, 30, 37, .55) 0%, rgba(18, 30, 37, 0) 30%),
        linear-gradient(90deg, rgba(18, 30, 37, .94) 0%, rgba(18, 30, 37, .8) 36%, rgba(18, 30, 37, .2) 68%, rgba(18, 30, 37, .4) 100%);
}
.kop-d-rechts .kop-d-waas {
    background:
        linear-gradient(180deg, rgba(18, 30, 37, .55) 0%, rgba(18, 30, 37, 0) 30%),
        linear-gradient(270deg, rgba(18, 30, 37, .94) 0%, rgba(18, 30, 37, .8) 36%, rgba(18, 30, 37, .2) 68%, rgba(18, 30, 37, .4) 100%);
}
.kop-d-midden .kop-d-waas { background: rgba(18, 30, 37, .72); }
.kop-d-vlak { background: #1f2a30 radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.6px) 0 0 / 28px 28px; }
.kop-d-vlak .kop-d-waas { display: none; }
.kop-d-ster {
    position: absolute;
    right: 3%;
    top: 128px;
    z-index: -1;
    width: 600px;
    max-width: 60%;
    height: auto;
    pointer-events: none;
}
.kop-d-ster-net { opacity: .45; }
/* De open plek (vacatures): een gele ring met een gloed die rustig uitdijt. */
.kop-d-plek-gloed { transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; animation: kop-d-plek 3.2s ease-out infinite; }
@keyframes kop-d-plek {
    0% { transform: scale(1); opacity: .8; }
    70%, 100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .kop-d-plek-gloed { animation: none; opacity: 0; } }
.kop-d-binnen {
    flex: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 168px 24px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}
.kop-d-rechts .kop-d-binnen { flex-direction: row-reverse; }
.kop-d-midden .kop-d-binnen { justify-content: center; text-align: center; }
.kop-d-tekst { max-width: 640px; display: flex; flex-direction: column; gap: 22px; }
.kop-d-midden .kop-d-tekst { align-items: center; }
.kop-d .kop-d-oog { margin: 0; }
.kop-d h1 {
    margin: 0;
    font-size: clamp(34px, 4.2vw, 54px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: #ffffff;
    text-wrap: balance;
}
.kop-d h1 .text-accent, .kop-d h1 span[data-toggle="typed"] { color: #e4dd48; }
.kop-d-intro { font-size: 19px; color: #e8eef1; }
.kop-d-intro p { margin: 0 0 .6em; font-size: inherit; color: inherit; }
.kop-d-intro p:last-child { margin: 0; }
.kop-d-intro a { color: #ffffff; }
.kop-d-knoppen { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.kop-d-midden .kop-d-knoppen { justify-content: center; }
.kop-d-beeld { flex: 0 1 380px; margin: 0; }
.kop-d-beeld img { display: block; width: 100%; height: auto; border-radius: 16px; }

.kop-d-routes { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px 40px; }
.kop-d-routes ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* 200px: ook vijf routes (privacyverklaring) passen op één lijn. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 20px;
}
.kop-d-routes ul::before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    height: 1px;
    background: rgba(255, 255, 255, .4);
}
.kop-d-routes a { position: relative; display: flex; flex-direction: column; gap: 10px; color: #ffffff; text-decoration: none; }
.kop-d-stip { width: 17px; height: 17px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 5px rgba(18, 30, 37, .9); transition: transform .15s; }
.kop-d-routes li:first-child .kop-d-stip { background: #e4dd48; }
.kop-d-vraag { font-size: 14px; color: #c9d6dc; }
.kop-d-routes strong { font-size: 17px; font-weight: 600; }
.kop-d-routes a:hover strong, .kop-d-routes a:focus-visible strong { text-decoration: underline; }
.kop-d-routes a:hover .kop-d-stip, .kop-d-routes a:focus-visible .kop-d-stip { transform: scale(1.2); }

@media (max-width: 991.98px) {
    .kop-d-binnen { padding-top: 132px; }
    .kop-d-beeld { display: none; }
    .kop-d-ster { top: 96px; max-width: 80%; opacity: .65; }
}
@media (max-width: 640px) {
    .kop-d { min-height: max(var(--kop-hoogte, 40vh), 380px); }
    .kop-d-binnen { padding: 116px 16px 40px; }
    .kop-d-rechts .kop-d-waas, .kop-d-waas { background: linear-gradient(180deg, rgba(18, 30, 37, .7) 0%, rgba(18, 30, 37, .82) 100%); }
    .kop-d-intro { font-size: 17px; }
    .kop-d-routes { padding: 0 16px 32px; }
    .kop-d-routes ul::before { display: none; }
}

/* ---------- Sterrenbeeld: diensten rond Open Line (sets/features/_sterrenbeeld) ---------- */

.sb-d { background: #075b80; color: #ffffff; padding: 96px 24px 104px; font-family: Montserrat, system-ui, sans-serif; }
.sb-d-binnen { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px; }
.sb-d-kop { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px 64px; align-items: end; }
.sb-d-kop h2 { margin: 0; font-size: clamp(30px, 3.2vw, 40px); font-weight: 600; line-height: 1.15; color: #ffffff; text-wrap: balance; }
.sb-d-intro { color: #e3eef4; font-size: 17px; }
.sb-d-intro p { margin: 0 0 .6em; }
.sb-d-intro p:last-child { margin: 0; }
.sb-d-veld { position: relative; }
.sb-d-lijnen, .sb-d-naaf { display: none; }
.sb-d-sterren { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px 32px; }
.sb-d-ster { display: flex; gap: 16px; align-items: flex-start; color: #ffffff; text-decoration: none; }
.sb-d-stip { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 6px #075b80; transition: background-color .15s, transform .15s; }
.sb-d-tekst { display: flex; flex-direction: column; gap: 4px; }
.sb-d-tekst strong { font-size: 19px; font-weight: 600; line-height: 1.2; }
.sb-d-tekst span { font-size: 15px; color: #d6e6ee; }
a.sb-d-ster:hover, a.sb-d-ster:focus-visible { color: #ffffff; }
a.sb-d-ster:hover strong, a.sb-d-ster:focus-visible strong { text-decoration: underline; }
a.sb-d-ster:hover .sb-d-stip, a.sb-d-ster:focus-visible .sb-d-stip { background: #e4dd48; transform: scale(1.15); }
a.sb-d-ster:focus-visible { outline: 3px solid #e4dd48; outline-offset: 6px; border-radius: 4px; }

/* Acht diensten: vaste plekken rond de gele stip, zoals in het ontwerp. */
@media (min-width: 992px) {
    .sb-d-acht { height: 530px; }
    .sb-d-acht .sb-d-lijnen { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
    .sb-d-acht .sb-d-naaf {
        display: flex;
        position: absolute;
        left: 50%;
        top: 260px;
        transform: translate(-50%, -18px);
        flex-direction: column;
        align-items: center;
        gap: 12px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .sb-d-naaf span { width: 36px; height: 36px; border-radius: 50%; background: #e4dd48; box-shadow: 0 0 0 8px rgba(228, 221, 72, .25); }
    .sb-d-acht .sb-d-sterren { display: block; }
    .sb-d-acht .sb-d-sterren li { position: absolute; width: 250px; }
    .sb-d-acht .sb-d-sterren li .sb-d-ster { transform: translate(-9px, -11px); }
    .sb-d-acht li:nth-child(1) { left: 9%; top: 70px; }
    .sb-d-acht li:nth-child(2) { left: 9%; top: 260px; }
    .sb-d-acht li:nth-child(3) { left: 9%; top: 450px; }
    .sb-d-acht li:nth-child(4) { left: 42%; top: 40px; }
    .sb-d-acht li:nth-child(5) { right: 42%; top: 480px; }
    .sb-d-acht li:nth-child(6) { right: 9%; top: 70px; }
    .sb-d-acht li:nth-child(7) { right: 9%; top: 260px; }
    .sb-d-acht li:nth-child(8) { right: 9%; top: 450px; }
    .sb-d-acht li:nth-child(n+5) .sb-d-ster { flex-direction: row-reverse; text-align: right; transform: translate(9px, -11px); }
}

/* ---------- Blokken (sets/features/_feature1): ronde foto's of kaarten ---------- */

.blok-d { padding: 104px 24px 96px; font-family: Montserrat, system-ui, sans-serif; }
.blok-d.bg-transparant, .blok-d.bg-default, .blok-d.bg-white, .blok-d.bg-primary-light { background: #ffffff; }
.blok-d-binnen { max-width: 1200px; margin: 0 auto; }
.blok-d-lijst { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px 24px; }
.blok-d-lijst:has(.blok-d-rond)::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 100px;
    height: 2px;
    background: #d5e0e6;
}
.blok-d-rond > a, .blok-d-rond > div {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    color: #1f2a30;
    text-decoration: none;
}
.blok-d-rond strong { font-size: 19px; font-weight: 600; line-height: 1.3; }
.blok-d-rond > a:hover, .blok-d-rond > a:focus-visible { color: #1f2a30; }
.blok-d-rond > a:hover strong, .blok-d-rond > a:focus-visible strong { color: #0a6e99; text-decoration: underline; }
.blok-d-foto { position: relative; width: 200px; height: 200px; }
.blok-d-foto img { display: block; width: 200px; height: 200px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 8px #ffffff; transition: transform .2s; }
.blok-d-rond > a:hover .blok-d-foto img { transform: scale(1.03); }
.blok-d-stip { position: absolute; right: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: #e4dd48; box-shadow: 0 0 0 5px #ffffff; }
.blok-d-rond:nth-child(4n+2) .blok-d-stip { right: auto; left: 10px; top: auto; bottom: 30px; width: 18px; height: 18px; background: #008ac0; }
.blok-d-rond:nth-child(4n+3) .blok-d-stip { right: 26px; top: auto; bottom: 6px; width: 22px; height: 22px; background: #4c6875; }
.blok-d-rond:nth-child(4n+4) .blok-d-stip { right: auto; left: 22px; top: 10px; width: 20px; height: 20px; }
.blok-d-rond .blok-d-tekst { max-width: 26em; font-size: 15px; color: #5b6b75; }

.blok-d-kaart {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    border-radius: 16px;
    background: #f3f7f9;
    color: #374151;
}
.blok-d-icoon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    color: #0a6e99;
    font-size: 20px;
}
.blok-d-icoon svg, .blok-d-icoon img { width: 28px; height: 28px; }
.blok-d-kaart h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; text-transform: none; color: #1f2a30; }
.blok-d-kaart .blok-d-tekst { font-size: 16px; }
.blok-d-kaart .blok-d-tekst p { margin: 0 0 .6em; }
.blok-d-kaart .blok-d-tekst p:last-child { margin: 0; }
.blok-d-meer { margin-top: auto; color: #0a6e99; font-weight: 600; text-decoration: none; }
.blok-d-meer:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .blok-d { padding: 72px 16px; }
    .blok-d-lijst:has(.blok-d-rond) { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
    .blok-d-lijst:has(.blok-d-rond)::before { display: none; }
    .blok-d-foto, .blok-d-foto img { width: 140px; height: 140px; }
    .blok-d-rond strong { font-size: 17px; }
}

/* Wat we doen (template diensten): de diensten in drie kolommen, met lucht voor de tekst. */
.diensten-d .blok-d-lijst:has(.blok-d-kaart) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; }

/* ---------- Cases (sets/cases) ---------- */

.cases-d { background: #f3f7f9; padding: 96px 24px; font-family: Montserrat, system-ui, sans-serif; }
.cases-d-binnen { max-width: 1200px; margin: 0 auto; }
.cases-d .sectiekop-d { margin-bottom: 40px; }
.cases-d-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.cases-d-kaart {
    height: 100%;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px;
    border-radius: 16px;
    background: #ffffff;
    color: #374151;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
}
.cases-d-kaart:hover, .cases-d-kaart:focus-visible { color: #374151; box-shadow: 0 16px 40px rgba(18, 30, 37, .1); transform: translateY(-2px); }
.cases-d-ster circle:nth-of-type(1) { fill: #4c6875; }
.cases-d-ster circle:nth-of-type(2) { fill: #008ac0; }
.cases-d-ster circle:nth-of-type(3) { fill: #e4dd48; }
.cases-d-lijst li:nth-child(3n+2) .cases-d-ster circle:nth-of-type(1) { fill: #e4dd48; }
.cases-d-lijst li:nth-child(3n+2) .cases-d-ster circle:nth-of-type(3) { fill: #4c6875; }
.cases-d-lijst li:nth-child(3n+3) .cases-d-ster circle:nth-of-type(1) { fill: #008ac0; }
.cases-d-lijst li:nth-child(3n+3) .cases-d-ster circle:nth-of-type(2) { fill: #4c6875; }
.cases-d-branche { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #0a6e99; }
.cases-d-kaart strong { flex: 1; font-size: 22px; font-weight: 600; line-height: 1.3; color: #1f2a30; }
.cases-d-kaart:hover .link-d { text-decoration: underline; }

/* ---------- Citaat (sets/quote) ---------- */

.citaat-d { padding: 96px 24px; font-family: Montserrat, system-ui, sans-serif; }
.citaat-d.bg-transparant, .citaat-d.bg-default, .citaat-d.bg-white { background: #ffffff; }
.citaat-d-binnen { max-width: 900px; margin: 0 auto; }
.citaat-d-tekst { display: flex; flex-direction: column; gap: 22px; }
.citaat-d:not(.citaat-d-foto) .citaat-d-tekst { align-items: center; text-align: center; }
.citaat-d blockquote { margin: 0; font-size: 28px; font-weight: 500; line-height: 1.4; color: #1f2a30; }
.citaat-d-small blockquote { font-size: 21px; }
.citaat-d-medium blockquote { font-size: 24px; }
.citaat-d blockquote .text-accent { color: inherit; }
.citaat-d-naam { margin: 0; font-size: 16px; color: #5b6b75; }
/* De stip staat voor de naam: stippen zijn mensen. */
.citaat-d:not(.citaat-d-foto) .citaat-d-naam::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; vertical-align: 1px; border-radius: 50%; background: #e4dd48; }
.citaat-d-naam strong { font-weight: 600; color: #1f2a30; }
.citaat-d-foto .citaat-d-naam strong { color: #ffffff; }
/* Zonder foto springt het citaat eruit: groot en stevig op een licht vlak, met op de rand een donkere
   stip met gele aanhalingstekens (niet geel: het kopje en de naam hebben de gele stip al). */
.citaat-d:not(.citaat-d-foto) .citaat-d-binnen { position: relative; }
.citaat-d:is(.bg-transparant, .bg-default, .bg-white):not(.citaat-d-foto) .citaat-d-binnen {
    max-width: 1000px;
    padding: 72px 64px 56px;
    border-radius: 24px;
    background: #f3f7f9;
}
.citaat-d-teken {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1f2a30;
    box-shadow: 0 0 0 8px #ffffff;
    color: #e4dd48;
    font-size: 24px;
}
.citaat-d:not(.citaat-d-foto):not(:is(.bg-transparant, .bg-default, .bg-white)) .citaat-d-teken { position: static; transform: none; margin: 0 auto 28px; box-shadow: none; }
.citaat-d-large:not(.citaat-d-foto) blockquote { font-size: clamp(26px, 2.8vw, 36px); font-weight: 600; line-height: 1.35; letter-spacing: -.005em; text-wrap: balance; }
.citaat-d-medium:not(.citaat-d-foto) blockquote { font-weight: 600; text-wrap: balance; }

.citaat-d-foto { background: #3e5560; color: #ffffff; }
.citaat-d-foto .citaat-d-binnen { max-width: 1200px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 48px 64px; align-items: center; }
.citaat-d-beeld { position: relative; margin: 0; }
.citaat-d-beeld img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 50% 16px 16px 16px; }
.citaat-d-stip { position: absolute; left: -12px; top: -12px; width: 34px; height: 34px; border-radius: 50%; background: #e4dd48; box-shadow: 0 0 0 8px #3e5560; }
.citaat-d-foto blockquote { color: #ffffff; }
.citaat-d-foto .citaat-d-naam { color: #e8eef1; }
.citaat-d-vacatures { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 8px; }
.citaat-d-vacatures strong { font-size: 15px; font-weight: 600; color: #ffffff; }
.citaat-d-vacatures ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.citaat-d-vacatures li a { display: flex; align-items: center; gap: 12px; color: #ffffff; text-decoration: none; }
.citaat-d-vacatures li a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e4dd48; }
.citaat-d-vacatures li a:hover, .citaat-d-vacatures li a:focus-visible { color: #ffffff; text-decoration: underline; }
@media (max-width: 640px) {
    .citaat-d { padding: 72px 16px; }
    .citaat-d blockquote, .citaat-d-large:not(.citaat-d-foto) blockquote { font-size: 22px; }
    .citaat-d:is(.bg-transparant, .bg-default, .bg-white):not(.citaat-d-foto) .citaat-d-binnen { padding: 56px 24px 40px; border-radius: 16px; }
    .citaat-d-teken { width: 52px; height: 52px; font-size: 20px; }
}

/* ---------- Vestigingen als sterrenbeeld (sets/companies/_sterrenbeeld) ---------- */

.plekken-d { background: #e4dd48; color: #1f2a30; padding: 96px 24px; font-family: Montserrat, system-ui, sans-serif; }
.plekken-d-binnen { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px 64px; align-items: center; }
.plekken-d-tekst { display: flex; flex-direction: column; gap: 20px; }
.plekken-d h2 { margin: 0; font-size: clamp(30px, 3.2vw, 40px); font-weight: 600; line-height: 1.15; color: #1f2a30; }
.plekken-d-intro { margin: 0; font-size: 18px; }
.plekken-d-intro p { margin: 0; }
.plekken-d-adressen { list-style: none; margin: 0; padding: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px 24px; font-size: 15px; }
.plekken-d-adressen strong { display: block; font-weight: 600; }
.plekken-d .link-d { align-self: flex-start; color: #1f2a30; text-decoration: underline; text-underline-offset: 3px; }
.plekken-d .link-d:hover { color: #1f2a30; text-decoration-thickness: 2px; }
.plekken-d-kaart { position: relative; height: 460px; margin: 0 24px; }
.plekken-d-kaart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plekken-d-plek {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translate(-8px, -50%);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}
.plekken-d-stip { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #1f2a30; box-shadow: 0 0 0 5px #e4dd48; }
.plekken-d-hq { flex-direction: row-reverse; transform: translate(calc(-100% + 13px), -50%); }
.plekken-d-hq .plekken-d-stip { width: 26px; height: 26px; background: #ffffff; box-shadow: 0 0 0 6px #1f2a30; }
.plekken-d-ver .plekken-d-stip { border: 2px solid #1f2a30; background: #e4dd48; box-shadow: none; }
/* Verder weg: oostelijk rechts met de naam erboven, westelijk onder het hoofdkantoor door. */
.plekken-d-oost { left: 98%; top: 66%; flex-direction: column-reverse; align-items: flex-end; gap: 8px; transform: translate(calc(-100% + 8px), calc(-100% + 8px)); }
.plekken-d-west { left: 34%; top: 102%; flex-direction: row-reverse; transform: translate(calc(-100% + 8px), -50%); }
@media (max-width: 860px) {
    .plekken-d-kaart { height: 360px; margin: 0 8px; }
}
@media (max-width: 640px) {
    .plekken-d { padding: 72px 16px; }
    .plekken-d-kaart { display: none; }
}

/* ---------- Nieuws (sets/news) ---------- */

.nieuws-d { padding: 96px 24px; font-family: Montserrat, system-ui, sans-serif; }
.nieuws-d-binnen { max-width: 1200px; margin: 0 auto; }
.nieuws-d .sectiekop-d { margin-bottom: 40px; }
.nieuws-d-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; }
.nieuws-d-bericht { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 2px solid #d5e0e6; color: #1f2a30; text-decoration: none; transition: border-color .15s; }
.nieuws-d-bericht time { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #0a6e99; }
.nieuws-d-bericht strong { font-size: 21px; font-weight: 600; line-height: 1.3; }
.nieuws-d-bericht:hover, .nieuws-d-bericht:focus-visible { color: #1f2a30; border-top-color: #e4dd48; }
.nieuws-d-bericht:hover strong { text-decoration: underline; }
@media (max-width: 640px) { .nieuws-d { padding: 72px 16px; } }

/* ---------- Gedeeld: knoppen op geel ---------- */

.knop-d-inkt { background: #1f2a30; color: #ffffff; }
.knop-d-inkt:hover, .knop-d-inkt:focus-visible { background: #121e25; color: #ffffff; }
.knop-d-rand-inkt { border: 1.5px solid #1f2a30; color: #1f2a30; }
.knop-d-rand-inkt:hover, .knop-d-rand-inkt:focus-visible { background: rgba(31, 42, 48, .08); color: #1f2a30; }

/* Ankers uit "Snel naar" komen onder de navigatie uit. */
.vac-d, .lijn-d, .sol-d { scroll-margin-top: 72px; }

/* ---------- Vacatures (sets/vacatures) ----------
   Een vacature is een plek in het team die nog leeg is: een lege ring. Wijs je erop, dan wordt hij
   geel: die plek is voor jou. */

.vac-d { background: #f3f7f9; padding: 96px 24px; font-family: Montserrat, system-ui, sans-serif; }
.vac-d-binnen { max-width: 1200px; margin: 0 auto; }
.vac-d .sectiekop-d { margin-bottom: 40px; }
.vac-d-aantal { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 17px; font-weight: 600; color: #1f2a30; }
.vac-d-aantal strong { font-size: 56px; font-weight: 600; line-height: 1; }
.vac-d-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.vac-d-kaart {
    height: 100%;
    display: grid;
    grid-template-columns: 20px 1fr auto;
    grid-template-rows: auto 1fr;
    gap: 10px 16px;
    padding: 24px;
    border-radius: 16px;
    background: #ffffff;
    color: #1f2a30;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
}
.vac-d-ring { grid-area: 1 / 1; margin-top: 3px; width: 20px; height: 20px; border: 2px solid #1f2a30; border-radius: 50%; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.vac-d-kaart strong { grid-area: 1 / 2; font-size: 19px; font-weight: 600; line-height: 1.35; }
.vac-d-meta { grid-area: 2 / 2; align-self: end; display: flex; flex-wrap: wrap; font-size: 14px; color: #5b6b75; }
.vac-d-meta span + span::before { content: "·"; margin: 0 8px; }
.vac-d-pijl { grid-area: 1 / 3; font-size: 18px; color: #0a6e99; transition: transform .15s; }
.vac-d-kaart:hover, .vac-d-kaart:focus-visible { color: #1f2a30; box-shadow: 0 16px 40px rgba(18, 30, 37, .1); transform: translateY(-2px); }
.vac-d-kaart:hover .vac-d-ring, .vac-d-kaart:focus-visible .vac-d-ring { background: #e4dd48; border-color: #e4dd48; box-shadow: 0 0 0 5px rgba(228, 221, 72, .3); }
.vac-d-kaart:hover .vac-d-pijl, .vac-d-kaart:focus-visible .vac-d-pijl { transform: translateX(3px); }
/* Met beeld: de foto bovenaan tot de rand van de kaart, daaronder ring, titel en gegevens. */
.vac-d-met-beeld { grid-template-rows: auto auto 1fr; overflow: hidden; }
.vac-d-beeld { grid-area: 1 / 1 / 2 / -1; margin: -24px -24px 8px; aspect-ratio: 16 / 9; overflow: hidden; background: #dfe7eb; }
.vac-d-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.vac-d-met-beeld .vac-d-ring { grid-area: 2 / 1; }
.vac-d-met-beeld strong { grid-area: 2 / 2; }
.vac-d-met-beeld .vac-d-pijl { grid-area: 2 / 3; }
.vac-d-met-beeld .vac-d-meta { grid-area: 3 / 2; }
.vac-d-met-beeld:hover .vac-d-beeld img, .vac-d-met-beeld:focus-visible .vac-d-beeld img { transform: scale(1.03); }
.vac-d-noot { margin-top: 40px; max-width: 46em; font-size: 16px; line-height: 1.6; color: #5b6b75; }
.vac-d-noot p { margin: 0; }
.vac-d-noot strong { color: #1f2a30; }
@media (max-width: 640px) {
    .vac-d { padding: 72px 16px; }
    .vac-d-aantal strong { font-size: 44px; }
}

/* ---------- Cijfers (sets/cijfers) ----------
   Elk cijfer is een stip op een eigen hoogte (--y), verbonden door de lijn in de svg. De punten van
   die lijn liggen op de middens van de kolommen en op (--y + 9px) / 82px van de band. */

.cijfers-d { background: #075b80; color: #ffffff; padding: 96px 24px 104px; font-family: Montserrat, system-ui, sans-serif; }
.cijfers-d-binnen { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 64px; }
.cijfers-d-kop { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px 64px; align-items: end; }
.cijfers-d-kop h2 { margin: 0; font-size: clamp(30px, 3.2vw, 40px); font-weight: 600; line-height: 1.15; color: #ffffff; text-wrap: balance; }
.cijfers-d-intro { font-size: 18px; line-height: 1.6; color: #d4e3ea; }
.cijfers-d-intro p { margin: 0; }
.cijfers-d-veld { position: relative; }
.cijfers-d-lijn { position: absolute; left: 0; top: 0; width: 100%; height: 82px; overflow: visible; }
.cijfers-d-lijn polyline { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; }
.cijfers-d-veld ul { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--kolommen, 4), 1fr); }
.cijfers-d-2 ul { --kolommen: 2; }
.cijfers-d-3 ul { --kolommen: 3; }
.cijfers-d-veld li { display: flex; flex-direction: column; align-items: center; padding: 0 16px; text-align: center; }
.cijfers-d-veld li:nth-child(1) { --y: 40px; }
.cijfers-d-veld li:nth-child(2) { --y: 0px; }
.cijfers-d-veld li:nth-child(3) { --y: 56px; }
.cijfers-d-veld li:nth-child(4) { --y: 16px; }
.cijfers-d-stip { width: 18px; height: 18px; margin: var(--y) 0 calc(92px - var(--y)); border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 6px #075b80; }
/* Een gele gloed op blauw wordt groen; daarom een witte. */
.cijfers-d-veld li:first-child .cijfers-d-stip { background: #e4dd48; box-shadow: 0 0 0 6px #075b80, 0 0 0 12px rgba(255, 255, 255, .2); }
.cijfers-d-veld strong { font-size: clamp(40px, 5vw, 64px); font-weight: 600; line-height: 1; color: #ffffff; white-space: nowrap; }
.cijfers-d-label { margin-top: 12px; font-size: 17px; font-weight: 600; }
.cijfers-d-toelichting { margin-top: 6px; font-size: 14px; color: #c9d6dc; }
@media (max-width: 767.98px) {
    .cijfers-d { padding: 72px 16px; }
    .cijfers-d-lijn { display: none; }
    .cijfers-d-veld ul { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
    .cijfers-d-veld li { padding: 0 6px; }
    .cijfers-d-stip { margin: 0 0 20px; }
    .cijfers-d-label { font-size: 15px; }
}

/* ---------- Lijn: waarden of stappen (sets/features/_lijn) ---------- */

.lijn-d { padding: 96px 24px; font-family: Montserrat, system-ui, sans-serif; }
.lijn-d.bg-transparant, .lijn-d.bg-default, .lijn-d.bg-white { background: #ffffff; }
.lijn-d-binnen { max-width: 1200px; margin: 0 auto; }
.lijn-d-lijst { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 32px; }
.lijn-d-lijst::before { content: ""; position: absolute; left: 9px; right: 9px; top: 8px; height: 1.5px; background: #c9d6dc; }
.lijn-d-lijst li { position: relative; display: flex; flex-direction: column; gap: 12px; }
.lijn-d-stip { width: 18px; height: 18px; margin-bottom: 12px; border-radius: 50%; background: #1f2a30; box-shadow: 0 0 0 6px #ffffff; }
.lijn-d-lijst li:first-child .lijn-d-stip { background: #e4dd48; box-shadow: 0 0 0 6px #ffffff, 0 0 0 12px rgba(228, 221, 72, .3); }
.lijn-d-lijst h3 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.25; color: #1f2a30; }
.lijn-d-tekst { font-size: 16px; line-height: 1.6; color: #5b6b75; }
.lijn-d-tekst p { margin: 0 0 .6em; }
.lijn-d-tekst p:last-child { margin: 0; }
@media (max-width: 991.98px) {
    .lijn-d-lijst { grid-template-columns: 1fr; grid-auto-flow: row; gap: 32px; }
    /* Onder elkaar loopt de lijn van stip naar stip, niet verder dan de laatste. */
    .lijn-d-lijst::before { display: none; }
    .lijn-d-lijst li { padding-left: 44px; }
    .lijn-d-lijst li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 22px; bottom: -36px; width: 1.5px; background: #c9d6dc; }
    .lijn-d-stip { position: absolute; left: 0; top: 4px; margin: 0; }
}
@media (max-width: 640px) { .lijn-d { padding: 72px 16px; } }

/* ---------- Tijdlijn: stappen of data op één lijn (sets/timeline) ----------
   De ring om een stip heeft de kleur van het vlak (--tijd-vlak), zodat de lijn er netjes achter
   verdwijnt. Kaarten zijn licht op wit en wit op een licht vlak. */

.tijd-d { --tijd-vlak: #ffffff; --tijd-kaart: #f3f7f9; padding: 96px 24px; font-family: Montserrat, system-ui, sans-serif; }
.tijd-d.bg-transparant, .tijd-d.bg-default, .tijd-d.bg-white { background: #ffffff; }
.tijd-d.bg-sLight { --tijd-vlak: rgb(var(--bs-sLight-rgb)); }
.tijd-d.bg-light { --tijd-vlak: rgb(var(--bs-light-rgb)); }
.tijd-d.bg-primary-light { --tijd-vlak: #f3f7f9; }
.tijd-d-binnen { max-width: 1100px; margin: 0 auto; }
.tijd-d-lijst { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.tijd-d-lijst:not(.tijd-d-om-en-om) { max-width: 820px; }
.tijd-d-stap { position: relative; padding-left: 64px; }
/* Elke stap tekent de lijn van zijn stip (midden op 40px) naar die van de volgende, die 24px gap
   verder begint; zo loopt de lijn niet door na de laatste stip. */
.tijd-d-stap:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: -64px; width: 2px; background: #c9d6dc; }
.tijd-d-stip {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 22px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1f2a30;
    box-shadow: 0 0 0 6px var(--tijd-vlak);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}
.tijd-d-stap:first-child .tijd-d-stip { background: #e4dd48; color: #1f2a30; box-shadow: 0 0 0 6px var(--tijd-vlak), 0 0 0 12px rgba(228, 221, 72, .3); }
.tijd-d-stip:empty { width: 20px; height: 20px; left: 8px; top: 30px; }
.tijd-d-kaart { overflow: hidden; border-radius: 16px; background: var(--tijd-kaart); }
.tijd-d:is(.bg-sLight, .bg-light, .bg-primary-light) { --tijd-kaart: #ffffff; }
.tijd-d:is(.bg-sLight, .bg-light, .bg-primary-light) .tijd-d-kaart { box-shadow: 0 1px 2px rgba(31, 42, 48, .05), 0 8px 24px rgba(31, 42, 48, .06); }
.tijd-d-kaart img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tijd-d-tekst { display: flex; flex-direction: column; gap: 10px; padding: 24px 28px 28px; }
.tijd-d-datum { margin: 0; font-size: 14px; font-weight: 600; color: #0a6e99; }
.tijd-d-datum::first-letter { text-transform: uppercase; }
.tijd-d-kaart h3 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.3; color: #1f2a30; }
.tijd-d-beschrijving { font-size: 16px; line-height: 1.6; color: #5b6b75; }
.tijd-d-beschrijving p { margin: 0 0 .6em; }
.tijd-d-beschrijving p:last-child { margin: 0; }
/* Om en om: de kaarten links en rechts van het midden, elke stip op de binnenrand van zijn kaart en
   de lijn schuin van stip naar stip (zigzag). De volgende stap begint 24px - 64px eerder, dus zijn
   stip (midden op 40px) ligt op de hoogte van onze onderkant. Het vak van de lijn loopt van onze stip
   tot de zijne, over de breedte van de tussenruimte; de lijn is de diagonaal ervan. */
@media (min-width: 992px) {
    .tijd-d-om-en-om { --tijd-tussen: 40px; --tijd-lijn: transparent calc(50% - 1.5px), #c9d6dc calc(50% - .75px), #c9d6dc calc(50% + .75px), transparent calc(50% + 1.5px); }
    .tijd-d-om-en-om .tijd-d-stap { width: 50%; padding: 0 var(--tijd-tussen) 0 0; }
    .tijd-d-om-en-om .tijd-d-stap:nth-child(even) { margin-left: 50%; padding: 0 0 0 var(--tijd-tussen); }
    .tijd-d-om-en-om .tijd-d-stap + .tijd-d-stap { margin-top: -64px; }
    .tijd-d-om-en-om .tijd-d-stip { left: auto; right: calc(var(--tijd-tussen) - 18px); box-shadow: 0 0 0 5px var(--tijd-kaart); }
    .tijd-d-om-en-om .tijd-d-stap:nth-child(even) .tijd-d-stip { right: auto; left: calc(var(--tijd-tussen) - 18px); }
    .tijd-d-om-en-om .tijd-d-stap:first-child .tijd-d-stip { box-shadow: 0 0 0 5px var(--tijd-kaart), 0 0 0 11px rgba(228, 221, 72, .3); }
    /* De stip steekt de kaart in: daar wat meer ruimte, zodat de titel er niet tegenaan loopt. */
    .tijd-d-om-en-om .tijd-d-stap:nth-child(odd) .tijd-d-tekst { padding-right: 48px; }
    .tijd-d-om-en-om .tijd-d-stap:nth-child(even) .tijd-d-tekst { padding-left: 48px; }
    .tijd-d-om-en-om .tijd-d-stip:empty { right: calc(var(--tijd-tussen) - 10px); }
    .tijd-d-om-en-om .tijd-d-stap:nth-child(even) .tijd-d-stip:empty { right: auto; left: calc(var(--tijd-tussen) - 10px); }
    /* Links naar rechts: van linksboven naar rechtsonder; rechts naar links: van rechtsboven naar linksonder. */
    .tijd-d-om-en-om .tijd-d-stap:not(:last-child)::after {
        left: auto;
        right: calc(-1 * var(--tijd-tussen));
        bottom: 0;
        width: calc(2 * var(--tijd-tussen));
        background: linear-gradient(to top right, var(--tijd-lijn));
    }
    .tijd-d-om-en-om .tijd-d-stap:nth-child(even):not(:last-child)::after {
        right: auto;
        left: calc(-1 * var(--tijd-tussen));
        background: linear-gradient(to bottom right, var(--tijd-lijn));
    }
}
@media (max-width: 640px) {
    .tijd-d { padding: 72px 16px; }
    .tijd-d-stap { padding-left: 52px; }
    .tijd-d-tekst { padding: 20px; }
    .tijd-d-kaart h3 { font-size: 19px; }
}

/* ---------- Solliciteren (partials/_solliciteren), op geel ----------
   Op geel is de stip donker: bij de foto staat hij voor de persoon, bij de stappen voor elke stap. */

.sol-d { background: #e4dd48; color: #1f2a30; padding: 96px 24px; font-family: Montserrat, system-ui, sans-serif; }
.sol-d-binnen { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 80px; align-items: center; }
.sol-d-binnen.sol-d-zonder-foto { grid-template-columns: minmax(0, 760px); }
.sol-d-foto { position: relative; margin: 0; }
.sol-d-foto img { display: block; width: 100%; aspect-ratio: 6 / 7; object-fit: cover; border-radius: 50% 16px 16px 16px; }
.sol-d-stip { position: absolute; left: -12px; top: -12px; width: 34px; height: 34px; border-radius: 50%; background: #1f2a30; box-shadow: 0 0 0 8px #e4dd48; }
.sol-d-oog { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.sol-d-oog::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: #1f2a30; }
.sol-d h2 { margin: 0 0 16px; font-size: clamp(30px, 3.2vw, 40px); font-weight: 600; line-height: 1.15; color: #1f2a30; text-wrap: balance; }
.sol-d-intro { margin: 0 0 32px; max-width: 36em; font-size: 18px; line-height: 1.6; }
.sol-d-stappen { position: relative; list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.sol-d-stappen li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 40px; font-size: 16px; line-height: 1.5; }
/* De lijn loopt van stip naar stip, niet verder dan de laatste. */
.sol-d-stappen li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 21px; bottom: -23px; width: 1.5px; background: rgba(31, 42, 48, .35); }
.sol-d-stappen li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #1f2a30; box-shadow: 0 0 0 5px #e4dd48; }
.sol-d-stappen li:first-child::before { background: #ffffff; }
.sol-d-stappen strong { font-size: 18px; font-weight: 600; }
.sol-d-stappen a { color: #1f2a30; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.sol-d-stappen a:hover { color: #121e25; }
.sol-d-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 28px; }
.sol-d-link { color: #1f2a30; font-weight: 600; text-decoration: none; }
.sol-d-link:hover, .sol-d-link:focus-visible { color: #1f2a30; text-decoration: underline; }
.sol-d-klein { margin: 0; max-width: 42em; font-size: 13px; line-height: 1.5; color: #3a4a52; }
.sol-d-mail { font-size: 15px; color: #1f2a30; }
.sol-d-mail a { color: #1f2a30; font-weight: 600; text-underline-offset: 3px; }
/* Stap 1 is het formulier: een witte kaart op de lijn, de verstuurknop donker. */
.sol-d-stappen li.sol-d-stap-form { gap: 12px; }
.sol-d-form { padding: 24px; border-radius: 14px; background: #ffffff; box-shadow: 0 10px 30px -18px rgba(31, 42, 48, .45); }
.sol-d-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.sol-d-veld { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; color: #1f2a30; }
.sol-d-veld small { font-size: 13px; font-weight: 500; color: #5b6b75; }
.sol-d-breed { grid-column: 1 / -1; }
.sol-d-veld input[type="text"], .sol-d-veld input[type="email"] {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1.5px solid #c9d3d8;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2a30;
    font: 500 16px/1.4 Montserrat, system-ui, sans-serif;
}
.sol-d-veld input::placeholder { color: #8a9aa3; }
.sol-d-veld input:focus { outline: 0; border-color: #1f2a30; box-shadow: 0 0 0 3px rgba(228, 221, 72, .75); }
.sol-d-bestand { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; padding: 6px; border: 1.5px dashed #b4c1c8; border-radius: 8px; cursor: pointer; }
.sol-d-bestand input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sol-d-bestand:focus-within { border-color: #1f2a30; box-shadow: 0 0 0 3px rgba(228, 221, 72, .75); }
.sol-d-bestand-knop { flex: none; padding: 8px 14px; border-radius: 6px; background: #1f2a30; color: #ffffff; font-size: 14px; font-weight: 600; }
.sol-d-bestand-naam { min-width: 0; overflow: hidden; color: #5b6b75; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sol-d-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sol-d-turnstile:empty { display: none; }
.sol-d-turnstile { margin-top: 14px; }
.sol-d-fout { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background: #fde8e6; color: #8a1f15; font-size: 14px; font-weight: 500; }
.sol-d-verstuur { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.sol-d-verstuur .knop-d { border: 0; font-family: inherit; cursor: pointer; }
.sol-d-verstuur .knop-d:disabled { opacity: .7; cursor: progress; }
.sol-d-veilig { flex: 1 1 220px; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.5; color: #3a4a52; }
.sol-d-dank { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 16px; outline: 0; }
.sol-d-dank strong { font-size: 18px; }
@media (max-width: 860px) {
    .sol-d-binnen { grid-template-columns: 1fr; }
    .sol-d-foto { max-width: 300px; }
}
@media (max-width: 640px) {
    .sol-d { padding: 72px 16px; }
    .sol-d-form { padding: 18px 16px; }
    .sol-d-velden { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Kenmerken van een vacature (partials/_vacature_kenmerken) ----------
   Een legenda bij een kaartje. De tekens zijn stippen die met hun grootte spelen: drie stippen van
   klein (junior) naar groot (senior), een volle of halve stip voor de uren, twee verbonden stippen
   voor hybride werken. De werkplek is geel, op de kaart en in de legenda. */

.kenm-d {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px 56px;
    align-items: center;
    margin: 0 0 48px;
    padding: 32px 36px;
    border-radius: 16px;
    background: #f3f7f9;
    font-family: Montserrat, system-ui, sans-serif;
}
.kenm-d-met-kaart { grid-template-columns: minmax(0, 1fr) 250px; }
.kenm-d-lijst { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 28px 32px; }
.kenm-d-lijst > div { position: relative; min-height: 44px; padding-left: 58px; display: flex; flex-direction: column; justify-content: center; }
.kenm-d-lijst dt { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: #5b6b75; }
.kenm-d-lijst dd { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: #1f2a30; }
.kenm-d-lijst dd a { color: #0a6e99; text-decoration: none; white-space: nowrap; }
.kenm-d-lijst dd a:hover, .kenm-d-lijst dd a:focus-visible { color: #075b80; text-decoration: underline; }
.kenm-d-teken { position: absolute; left: 0; top: 50%; width: 44px; height: 24px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: 3px; }
.kenm-d-teken i { flex: none; display: block; border-radius: 50%; }
/* Niveau: klein, middel en groot; de passende zijn gevuld, de andere een ring. */
.kenm-d-niveau i { box-shadow: inset 0 0 0 1.5px #9fb1ba; }
.kenm-d-niveau i:nth-child(1) { width: 8px; height: 8px; }
.kenm-d-niveau i:nth-child(2) { width: 12px; height: 12px; }
.kenm-d-niveau i:nth-child(3) { width: 17px; height: 17px; }
.kenm-d-niveau[data-niveau~="junior"] i:nth-child(1),
.kenm-d-niveau[data-niveau~="medior"] i:nth-child(2),
.kenm-d-niveau[data-niveau~="senior"] i:nth-child(3) { background: #1f2a30; box-shadow: none; }
.kenm-d-uren i { width: 18px; height: 18px; box-shadow: inset 0 0 0 2px #1f2a30; }
.kenm-d-fulltime i { background: #1f2a30; }
.kenm-d-parttime i { background: linear-gradient(90deg, #1f2a30 50%, transparent 50%); }
/* Hybride: kantoor (vol) en thuis (ring), verbonden. */
.kenm-d-hybride { gap: 14px; }
.kenm-d-hybride i { position: relative; width: 11px; height: 11px; background: #1f2a30; }
.kenm-d-hybride i + i { background: transparent; box-shadow: inset 0 0 0 2px #1f2a30; }
.kenm-d-hybride i + i::before { content: ""; position: absolute; right: 100%; top: 50%; width: 14px; height: 1.5px; background: #1f2a30; transform: translateY(-50%); }
.kenm-d-contract i { width: 14px; height: 14px; }
.kenm-d-permanent i { background: #1f2a30; box-shadow: 0 0 0 3px #f3f7f9, 0 0 0 4.5px #1f2a30; }
.kenm-d-temporary i { width: 18px; height: 18px; border: 2px dashed #1f2a30; }
.kenm-d-plek i { width: 16px; height: 16px; background: #e4dd48; box-shadow: 0 0 0 2px #1f2a30; }

/* Het kaartje: dezelfde stippen van Nederland en projectie als /info/vestigingen. */
.kenm-d-kaart { position: relative; width: 100%; margin: 0; aspect-ratio: 870 / 1000; }
.kenm-d-kaart > img { display: block; width: 100%; height: 100%; }
.kenm-d-lijnen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kenm-d-lijnen line { stroke: #1f2a30; stroke-opacity: .35; stroke-width: 1; vector-effect: non-scaling-stroke; }
.kenm-d-vestiging { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #3e5560; box-shadow: 0 0 0 2.5px #f3f7f9; transform: translate(-50%, -50%); }
.kenm-d-pin {
    position: absolute;
    z-index: 1;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e4dd48;
    box-shadow: 0 0 0 2px #1f2a30, 0 0 0 8px rgba(228, 221, 72, .45);
    transform: translate(-50%, -50%);
    text-decoration: none;
}
.kenm-d-pin span {
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 9px;
    border-radius: 6px;
    background: #1f2a30;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.kenm-d-pin-links span { left: auto; right: calc(100% + 14px); }
.kenm-d-pin:hover span, .kenm-d-pin:focus-visible span { background: #0a6e99; }
@media (max-width: 767.98px) {
    .kenm-d { padding: 24px 20px; }
    .kenm-d-met-kaart { grid-template-columns: minmax(0, 1fr); }
    .kenm-d-kaart { max-width: 220px; justify-self: center; }
}

/* ---------- De oude sets in de lijn van D ---------- */

/* Het blauw van het thema (#008ac0) wordt het blauw van D: wit op #008ac0 haalt het contrast niet
   (3,9:1), op #075b80 wel. Lichtblauwe vlakken worden het lichte grijs van D. */
:root {
    --bs-primary: #075b80;
    --bs-primary-rgb: 7, 91, 128;
    --bs-primary-light: #f3f7f9;
    --bs-primary-light-rgb: 243, 247, 249;
}
a { color: #0a6e99; }
a:hover { color: #075b80; }
/* Vet in lopende tekst was blauw en leek daardoor op een link. */
.main-text strong { color: inherit; }
/* Koppen op lichte en gele vlakken waren themablauw; in D zijn koppen inkt. */
:is(.bg-primary-light, .bg-accent, .bg-accent-light) :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) { color: #1f2a30 !important; }

/* Partnerlogo's op het donker van D in plaats van zwart, met wat lucht. */
#partner-brand.bg-black, #partner-brand.bg-dark { background: #121e25 !important; }
#partner-brand > .container, #partner-brand > .container-fluid { padding-top: 64px !important; padding-bottom: 48px !important; }

/* Geen golven meer onder de vlakken en geen streepje (of losse stip) tussen kop en tekst: een stip
   staat alleen waar hij iets aanwijst. */
figure.border_bottom { display: none; }
hr.divider { display: none; }
/* Citaten in lopende tekst (intro's van cases en nieuws): stevig en donker, de stip vóór de eerste
   regel zoals bij een opsomming. Gecentreerd hangt er niets naast, dus dan geen stip. */
.main-text blockquote {
    position: relative;
    margin: 0 0 1.5em;
    padding-left: 32px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
    color: #1f2a30;
}
.main-text blockquote::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 12px; border-radius: 50%; background: #e4dd48; box-shadow: 0 0 0 5px rgba(228, 221, 72, .25); }
.main-text blockquote p { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.main-text blockquote.text-center, .main-text .text-center blockquote { padding-left: 0; }
.main-text blockquote.text-center::before, .main-text .text-center blockquote::before { display: none; }
.main-text:is(.bg-primary, .bg-secondary, .bg-dark, .bg-black) blockquote { color: #ffffff; }
/* Kaarten in lopende tekst (o.a. de recruiter bij een vacature): rustig afgerond, foto met de vorm van het citaat. */
.main-text .card.shadow { border: 0; border-radius: 16px; box-shadow: 0 1px 2px rgba(31, 42, 48, .06), 0 8px 24px rgba(31, 42, 48, .08) !important; }
.main-text .card .img-thumbnail { padding: 0; border: 0; border-radius: 50% 16px 16px 16px !important; }
/* Opsommingen in lopende tekst met gele stippen. */
.main-text ul:not([class]) { list-style: none; padding-left: 0; }
.main-text ul:not([class]) > li { position: relative; padding-left: 24px; margin-bottom: .4em; }
/* Het thema zet een vinkje als ::marker met eigen inhoud; list-style: none haalt dat niet weg. */
.main-text ul:not([class]) > li::marker { content: none; }
.main-text ul:not([class]) > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e4dd48;
    box-shadow: 0 0 0 1px rgba(31, 42, 48, .12);
}
/* Namen van cookies en dergelijke in lopende tekst: inkt op een licht vlakje, niet het roze van Bootstrap. */
.main-text code { padding: 1px 5px; border-radius: 4px; background: rgba(31, 42, 48, .07); color: #1f2a30; font-size: .875em; }
/* Een hoofdstuk waar een link naartoe springt (privacyverklaring), niet onder de navigatie. */
.main-text h2[id] { scroll-margin-top: 110px; }
/* Tabellen in lopende tekst (o.a. de bedrijven in de privacyverklaring): een kop met een
   donkere lijn eronder, rustige regels ertussen en de eerste kolom vet. Te breed voor een telefoon:
   dan schuift de tabel opzij in plaats van de pagina. */
.main-text table { width: 100%; margin: 8px 0 32px; border-collapse: collapse; font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.main-text th { padding: 0 24px 12px 0; border-bottom: 2px solid #1f2a30; font-size: 14px; font-weight: 600; color: #1f2a30; text-align: left; white-space: nowrap; }
.main-text td { padding: 14px 24px 14px 0; border-bottom: 1px solid #dde5e9; vertical-align: top; color: #3e5560; }
/* De eerste kolom vet, tenzij de cel zelf al een vet kopje heeft (de tabel in de privacyverklaring). */
.main-text td:first-child { color: #1f2a30; }
.main-text td:first-child:not(:has(strong)) { font-weight: 600; }
.main-text :is(th, td):last-child { padding-right: 0; }
@media (max-width: 767.98px) {
    .main-text table { display: block; overflow-x: auto; font-size: 15px; }
    .main-text td { min-width: 160px; }
}
/* Knoppen van het thema in de vorm en kleur van D. */
.btn-warning, .btn-accent {
    border: 0;
    border-radius: 8px;
    background: #e4dd48;
    color: #1f2a30 !important;
    font-weight: 600;
}
.btn-warning:hover, .btn-accent:hover, .btn-warning:focus-visible, .btn-accent:focus-visible { background: #d6cf3a; color: #1f2a30 !important; }