/**
 * Via Delta — v3.0 Global CSS
 * Bevat stijlen voor: homepage, Onze Partners, Praktijkleren,
 * Praktijkverklaringen, Contactpagina en Nieuwsbrief modal
 */

/* ============================================================
   CSS VARIABELEN
   ============================================================ */
:root {
    --vd-geel:       #FFCC26;
    --vd-zwart:      #1A1A1A;
    --vd-donker:     #1E1E1E;
    --vd-grijs:      #2D2D2D;
    --vd-lichtgrijs: #F5F5F5;
    --vd-wit:        #FFFFFF;
    --vd-tekst:      #333333;
    --vd-subtekst:   #666666;
    --vd-border:     #E5E5E5;
    --vd-radius:     12px;
    --vd-radius-sm:  8px;
    --vd-shadow:     0 4px 24px rgba(0,0,0,0.08);
    --vd-shadow-lg:  0 8px 40px rgba(0,0,0,0.14);
    --vd-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --vd-max-w:      1200px;
}

/* ============================================================
   RESET & BASIS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body.vd-modal-open { overflow: hidden; }

.vd-container {
    max-width: var(--vd-max-w);
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   KNOPPEN
   ============================================================ */
.vd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.vd-btn--yellow {
    background: var(--vd-geel);
    color: var(--vd-zwart);
    border-color: var(--vd-geel);
}
.vd-btn--yellow:hover {
    background: #e6b800;
    border-color: #e6b800;
    color: var(--vd-zwart);
    transform: translateY(-1px);
}
.vd-btn--dark {
    background: var(--vd-zwart);
    color: var(--vd-wit);
    border-color: var(--vd-zwart);
}
.vd-btn--dark:hover {
    background: #333;
    border-color: #333;
    color: var(--vd-wit);
    transform: translateY(-1px);
}
.vd-btn--outline {
    background: transparent;
    color: var(--vd-zwart);
    border-color: var(--vd-zwart);
}
.vd-btn--outline:hover {
    background: var(--vd-zwart);
    color: var(--vd-wit);
}
.vd-btn--sm {
    padding: 10px 20px;
    font-size: 13px;
}
.vd-btn--full {
    width: 100%;
}

/* ============================================================
   SECTIE BADGES & KOPPEN
   ============================================================ */
.vd-section-badge {
    display: inline-block;
    background: var(--vd-geel);
    color: var(--vd-zwart);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.vd-section-badge--yellow { background: var(--vd-geel); color: var(--vd-zwart); }
.vd-section-badge--outline {
    background: transparent;
    border: 1.5px solid var(--vd-geel);
    color: var(--vd-geel);
}
.vd-section-badge--dark {
    background: var(--vd-zwart);
    color: var(--vd-wit);
}
.vd-section-h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: var(--vd-zwart);
    margin: 0 0 16px;
    line-height: 1.15;
}
.vd-section-h2--light { color: var(--vd-wit); }
.vd-section-lead {
    font-size: 17px;
    color: var(--vd-subtekst);
    max-width: 680px;
    margin: 0 auto 48px;
    line-height: 1.7;
    text-align: center;
}
.vd-section-lead--light { color: rgba(255,255,255,0.75); }

/* ============================================================
   PAGE HERO
   ============================================================ */
.vd-page-hero {
    padding: 80px 0 60px;
    text-align: center;
}
.vd-page-hero--dark {
    background: var(--vd-zwart);
    color: var(--vd-wit);
}
.vd-page-hero__title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    color: var(--vd-wit);
    margin: 0 0 16px;
    line-height: 1.1;
}
.vd-page-hero__sub {
    font-size: 18px;
    color: rgba(255,255,255,0.75);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============================================================
   HERO — LOGO NAAST TITEL LAYOUT (subpagina's)
   ============================================================ */
.vd-page-hero--logo-row {
    display: flex !important;
    align-items: center !important;
    gap: 40px !important;
    flex-wrap: nowrap !important;
    text-align: left !important;
}
.vd-page-hero--logo-row .vd-hero-logo-col {
    flex-shrink: 0;
}
.vd-page-hero--logo-row .vd-hero-logo-col img {
    height: 80px;
    width: auto;
    display: block;
    max-width: 260px;
}
.vd-page-hero--logo-row .vd-hero-divider {
    width: 2px;
    height: 90px;
    border-radius: 2px;
    flex-shrink: 0;
}
.vd-page-hero--logo-row .vd-hero-divider--dark  { background: rgba(0,0,0,0.15); }
.vd-page-hero--logo-row .vd-hero-divider--light { background: rgba(255,255,255,0.22); }
.vd-page-hero--logo-row .vd-hero-content-col {
    flex: 1;
    min-width: 0;
}
.vd-page-hero--logo-row .vd-hero-content-col .vd-page-hero__title,
.vd-page-hero--logo-row .vd-hero-content-col .vd-page-hero__title--dark,
.vd-page-hero--logo-row .vd-hero-content-col .vd-nieuws-hero__title {
    text-align: left !important;
    margin-bottom: 10px;
}
.vd-page-hero--logo-row .vd-hero-content-col .vd-page-hero__sub,
.vd-page-hero--logo-row .vd-hero-content-col .vd-page-hero__sub--dark,
.vd-page-hero--logo-row .vd-hero-content-col .vd-nieuws-hero__subtitle {
    text-align: left !important;
    margin: 0;
    max-width: 580px;
}
.vd-page-hero--logo-row .vd-hero-content-col .vd-section-badge {
    margin-bottom: 14px;
    display: inline-block;
}
@media (max-width: 640px) {
    .vd-page-hero--logo-row {
        flex-wrap: wrap !important;
    }
    .vd-page-hero--logo-row .vd-hero-divider {
        display: none;
    }
    .vd-page-hero--logo-row .vd-hero-logo-col img {
        height: 56px;
    }
}

/* ============================================================
   HOMEPAGE — HERO SECTIE
   ============================================================ */
.vd-hero {
    background: var(--vd-lichtgrijs);
    padding: 80px 0 80px;
}
.vd-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-bottom: 0;
}
.vd-pill {
    display: inline-block;
    background: var(--vd-geel);
    color: var(--vd-zwart);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 24px;
}
.vd-hero__title {
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 800;
    color: var(--vd-zwart);
    line-height: 1.1;
    margin: 0 0 20px;
}
.vd-yellow { color: var(--vd-geel); }
.vd-hero__sub {
    font-size: 17px;
    color: var(--vd-subtekst);
    line-height: 1.7;
    margin: 0 0 32px;
    max-width: 480px;
}
.vd-hero__btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.vd-hero__stats-card {
    background: var(--vd-wit);
    border-radius: var(--vd-radius);
    padding: 28px;
    box-shadow: var(--vd-shadow);
}
.vd-hero__stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--vd-subtekst);
    margin-bottom: 20px;
    text-transform: uppercase;
}
.vd-hero__recent-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--vd-border);
}
.vd-hero__recent-item:last-child { border-bottom: none; }
.vd-hero__recent-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}
.vd-hero__recent-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--vd-zwart);
    line-height: 1.3;
}
.vd-hero__recent-meta {
    font-size: 12px;
    color: var(--vd-subtekst);
    margin-top: 2px;
}
/* ROC-pills verwijderd — niet meer in gebruik */

/* ============================================================
   HOMEPAGE — DIENSTEN SECTIE (geel, 4-kolomsraster)
   ============================================================ */
.vd-diensten {
    background: var(--vd-geel);
    padding: 80px 0;
    text-align: center;
}
.vd-diensten__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
    text-align: left;
}
.vd-diensten__grid--4 {
    grid-template-columns: repeat(4, 1fr);
}
.vd-diensten__card {
    background: var(--vd-wit);
    border-radius: var(--vd-radius);
    padding: 32px;
    box-shadow: var(--vd-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}
.vd-diensten__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vd-shadow-lg);
}
.vd-diensten__icon-wrap {
    width: 52px;
    height: 52px;
    background: var(--vd-geel);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.vd-diensten__icon { font-size: 24px; }
.vd-diensten__card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--vd-zwart);
    margin: 0 0 12px;
}
.vd-diensten__card p {
    font-size: 14px;
    color: var(--vd-subtekst);
    line-height: 1.6;
    margin: 0 0 20px;
}
.vd-diensten__link {
    font-size: 14px;
    font-weight: 700;
    color: var(--vd-zwart);
    text-decoration: none;
    border-bottom: 2px solid var(--vd-geel);
    padding-bottom: 2px;
    transition: color 0.2s;
}
.vd-diensten__link:hover { color: var(--vd-geel); }

/* Nieuwsbrief CTA onder diensten */
.vd-nieuwsbrief-cta {
    margin-top: 40px;
    text-align: center;
}

/* ============================================================
   HOMEPAGE — LLO AANBOD BLOK
   ============================================================ */
.vd-aanbod-blok {
    background: var(--vd-wit);
    padding: 80px 0;
    text-align: center;
}
.vd-aanbod-zoek {
    margin: 0 auto 32px;
    max-width: 900px;
}
.vd-aanbod-zoek__inner {
    display: flex;
    gap: 12px;
    background: var(--vd-wit);
    border: 2px solid var(--vd-border);
    border-radius: 12px;
    padding: 8px;
    box-shadow: var(--vd-shadow);
    flex-wrap: wrap;
}
.vd-aanbod-zoek__field {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
}
.vd-aanbod-zoek__icon { font-size: 16px; color: var(--vd-subtekst); }
.vd-aanbod-zoek__input {
    border: none;
    outline: none;
    font-size: 15px;
    color: var(--vd-zwart);
    background: transparent;
    width: 100%;
}
.vd-aanbod-zoek__select {
    border: none;
    border-left: 1px solid var(--vd-border);
    outline: none;
    font-size: 14px;
    color: var(--vd-zwart);
    background: transparent;
    padding: 8px 12px;
    cursor: pointer;
}
.vd-aanbod-pills {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.vd-aanbod-pill {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 100px;
    border: 2px solid var(--vd-border);
    font-size: 14px;
    font-weight: 600;
    color: var(--vd-zwart);
    text-decoration: none;
    transition: all 0.2s;
}
.vd-aanbod-pill:hover, .vd-aanbod-pill--active {
    background: var(--vd-geel);
    border-color: var(--vd-geel);
    color: var(--vd-zwart);
}
.vd-aanbod-kaarten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
    margin-bottom: 40px;
}
.vd-opl-card {
    background: var(--vd-wit);
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius);
    padding: 24px;
    box-shadow: var(--vd-shadow);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.vd-opl-card:hover { transform: translateY(-3px); box-shadow: var(--vd-shadow-lg); }
.vd-opl-card__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.vd-opl-card__badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 100px;
    text-transform: uppercase;
}
.vd-opl-card__badge--branche { background: var(--vd-geel); color: var(--vd-zwart); }
.vd-opl-card__badge--cert { background: #e8f4e8; color: #2d7a2d; }
.vd-opl-card__title { font-size: 16px; font-weight: 700; color: var(--vd-zwart); margin: 0; line-height: 1.3; }
.vd-opl-card__meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--vd-subtekst); }
.vd-opl-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--vd-border); }
.vd-opl-card__prijs { font-size: 16px; font-weight: 700; color: var(--vd-zwart); }
.vd-aanbod-blok__cta { text-align: center; }

/* ============================================================
   HOMEPAGE — WAAROM VIA DELTA
   ============================================================ */
.vd-waarom {
    background: var(--vd-zwart);
    padding: 80px 0;
    text-align: center;
}
/* Lichte variant: grijs achtergrond, zwarte tekst */
.vd-waarom--light {
    background: var(--vd-lichtgrijs);
}
.vd-waarom__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 48px;
    text-align: left;
}
.vd-waarom__item { color: var(--vd-wit); }
.vd-waarom__icon { font-size: 36px; margin-bottom: 16px; }
.vd-waarom__item h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--vd-geel);
    margin: 0 0 10px;
}
.vd-waarom__item p {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    margin: 0;
}
/* Light item variant */
.vd-waarom__item--light { color: var(--vd-zwart); }
.vd-waarom__item--light h3 { color: var(--vd-zwart); }
.vd-waarom__item--light p { color: var(--vd-subtekst); }

/* ============================================================
   HOMEPAGE — HOE HET WERKT (STAPPEN)
   ============================================================ */
.vd-stappen {
    background: #2D2D2D;
    padding: 80px 0;
    text-align: center;
}
/* Lichte variant: grijs achtergrond, witte kaarten */
.vd-stappen--light {
    background: var(--vd-lichtgrijs);
}
.vd-stappen__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}
.vd-stappen__stap {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--vd-radius);
    padding: 28px;
    color: var(--vd-wit);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
/* Witte kaart variant */
.vd-stappen__stap--white {
    background: var(--vd-wit);
    border: 1px solid var(--vd-border);
    box-shadow: var(--vd-shadow);
    color: var(--vd-zwart);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.vd-stappen__nr {
    font-size: 36px;
    font-weight: 900;
    color: var(--vd-geel);
    line-height: 1;
    margin-bottom: 16px;
}
/* Geel nummer variant */
.vd-stappen__nr--yellow { color: var(--vd-geel); }
.vd-stappen__stap h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--vd-wit);
    margin: 0 0 10px;
}
.vd-stappen__stap--white h3 { color: var(--vd-zwart); }
.vd-stappen__stap p {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    margin: 0;
}
.vd-stappen__stap--white p { color: var(--vd-subtekst); }

/* ============================================================
   CTA SECTIE
   ============================================================ */
.vd-cta-sectie {
    background: var(--vd-wit);
    padding: 80px 0;
    text-align: center;
}
.vd-cta-sectie__inner { max-width: 640px; margin: 0 auto; }
.vd-cta-sectie__title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    color: var(--vd-zwart);
    margin: 0 0 16px;
}
.vd-cta-sectie__sub {
    font-size: 17px;
    color: var(--vd-subtekst);
    line-height: 1.6;
    margin: 0 0 40px;
}
.vd-cta-sectie__btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   ONZE PARTNERS PAGINA
   ============================================================ */
.vd-partners-intro {
    padding: 60px 0;
    background: var(--vd-wit);
}
.vd-partners-intro__inner { max-width: 800px; margin: 0 auto; }
.vd-partners-intro__content {
    font-size: 17px;
    line-height: 1.8;
    color: var(--vd-tekst);
}
.vd-partners-intro__content h2 { font-size: 28px; font-weight: 700; margin-bottom: 16px; }
.vd-partners-intro__content p { margin-bottom: 20px; }

.vd-partners-logos {
    background: var(--vd-lichtgrijs);
    padding: 60px 0;
}
.vd-partners-logos__wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}
.vd-partners-logos__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--vd-radius);
    box-shadow: var(--vd-shadow);
}
.vd-partners-logos__caption {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--vd-subtekst);
}
.vd-partners-logos__caption a {
    color: var(--vd-zwart);
    font-weight: 700;
    text-decoration: underline;
}

.vd-admin-tip {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 16px 24px;
    margin: 24px auto;
    max-width: var(--vd-max-w);
    font-size: 14px;
    color: #856404;
}

/* ============================================================
   PRAKTIJKLEREN PAGINA
   ============================================================ */
.vd-praktijkleren-intro {
    background: var(--vd-wit);
    padding: 60px 0;
}
.vd-praktijkleren-intro__lead {
    font-size: 18px;
    line-height: 1.7;
    color: var(--vd-tekst);
    max-width: 800px;
    margin: 0 auto 48px;
}
.vd-praktijkleren-intro__h2 {
    font-size: 32px;
    font-weight: 800;
    color: var(--vd-zwart);
    margin-bottom: 32px;
}
.vd-routes__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 860px;
}
.vd-routes__item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: var(--vd-lichtgrijs);
    border-radius: var(--vd-radius);
    padding: 28px;
}
.vd-routes__nr {
    width: 48px;
    height: 48px;
    background: var(--vd-geel);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: var(--vd-zwart);
    flex-shrink: 0;
}
.vd-routes__content h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--vd-zwart);
    margin: 0 0 10px;
}
.vd-routes__content p { font-size: 15px; color: var(--vd-tekst); line-height: 1.6; margin: 0 0 8px; }
.vd-routes__content p:last-child { margin-bottom: 0; }

.vd-praktijkleren-doelgroepen {
    background: var(--vd-lichtgrijs);
    padding: 60px 0;
}
.vd-doelgroepen__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}
.vd-doelgroepen__col h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--vd-zwart);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--vd-geel);
}
.vd-doelgroepen__col h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--vd-zwart);
    margin: 28px 0 10px;
}
.vd-doelgroepen__col p { font-size: 15px; color: var(--vd-tekst); line-height: 1.7; margin-bottom: 12px; }
.vd-doelgroepen__roc-list, .vd-doelgroepen__bullet-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.vd-doelgroepen__roc-list li, .vd-doelgroepen__bullet-list li {
    padding: 8px 0 8px 24px;
    position: relative;
    font-size: 15px;
    color: var(--vd-tekst);
    line-height: 1.5;
    border-bottom: 1px solid var(--vd-border);
}
.vd-doelgroepen__roc-list li:last-child, .vd-doelgroepen__bullet-list li:last-child { border-bottom: none; }
.vd-doelgroepen__roc-list li::before, .vd-doelgroepen__bullet-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--vd-geel);
    font-weight: 700;
}
.vd-doelgroepen__roc-list li a { color: var(--vd-zwart); font-weight: 600; }

/* Praktijkverklaringen link sectie op LLO Aanbod pagina */
.vd-pv-intro-banner {
    background: var(--vd-geel);
    padding: 40px 0;
}
.vd-pv-intro-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.vd-pv-intro-banner__text h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--vd-zwart);
    margin: 0 0 8px;
}
.vd-pv-intro-banner__text p {
    font-size: 15px;
    color: var(--vd-zwart);
    opacity: 0.8;
    margin: 0;
    max-width: 600px;
}

/* Praktijkverklaringen link op Praktijkleren pagina */
.vd-praktijkverklaringen-link {
    background: var(--vd-zwart);
    padding: 60px 0;
}
.vd-praktijkverklaringen-link__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.vd-praktijkverklaringen-link__text h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--vd-wit);
    margin: 0 0 10px;
}
.vd-praktijkverklaringen-link__text p {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    margin: 0;
    max-width: 600px;
}

/* ============================================================
   PRAKTIJKVERKLARINGEN PAGINA
   ============================================================ */
.vd-praktijkverklaringen-content {
    background: var(--vd-wit);
    padding: 60px 0;
}
.vd-pv-intro {
    max-width: 800px;
    margin: 0 auto 48px;
}
.vd-pv-intro h2 { font-size: 28px; font-weight: 800; color: var(--vd-zwart); margin-bottom: 16px; }
.vd-pv-intro p { font-size: 16px; color: var(--vd-tekst); line-height: 1.7; margin-bottom: 12px; }

.vd-pv-kenmerken { margin-bottom: 60px; }
.vd-pv-kenmerken h2 { font-size: 28px; font-weight: 800; color: var(--vd-zwart); margin-bottom: 32px; }
.vd-pv-kenmerken__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.vd-pv-kenmerk {
    background: var(--vd-lichtgrijs);
    border-radius: var(--vd-radius);
    padding: 28px;
    text-align: center;
}
.vd-pv-kenmerk__icon { font-size: 32px; margin-bottom: 16px; }
.vd-pv-kenmerk h3 { font-size: 16px; font-weight: 700; color: var(--vd-zwart); margin: 0 0 10px; }
.vd-pv-kenmerk p { font-size: 14px; color: var(--vd-subtekst); line-height: 1.6; margin: 0; }

.vd-pv-doelgroep { margin-bottom: 60px; }
.vd-pv-doelgroep h2 { font-size: 28px; font-weight: 800; color: var(--vd-zwart); margin-bottom: 32px; }

.vd-pv-hoe { margin-bottom: 40px; }
.vd-pv-hoe h2 { font-size: 28px; font-weight: 800; color: var(--vd-zwart); margin-bottom: 32px; }
/* Hergebruik .vd-stappen__grid maar met lichte achtergrond */
.vd-pv-hoe .vd-stappen__grid { margin-top: 0; }
.vd-pv-hoe .vd-stappen__stap {
    background: var(--vd-lichtgrijs);
    border: 1px solid var(--vd-border);
    color: var(--vd-zwart);
}
.vd-pv-hoe .vd-stappen__stap h3 { color: var(--vd-zwart); }
.vd-pv-hoe .vd-stappen__stap p { color: var(--vd-subtekst); }

/* ============================================================
   CONTACTPAGINA
   ============================================================ */
.vd-contact-sectie {
    background: var(--vd-lichtgrijs);
    padding: 60px 0 80px;
}
.vd-contact-sectie__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
    align-items: start;
}
.vd-contact-sectie__form-col h2 {
    font-size: 26px;
    font-weight: 800;
    color: var(--vd-zwart);
    margin-bottom: 8px;
}
.vd-contact-sectie__form-col > p {
    font-size: 15px;
    color: var(--vd-subtekst);
    margin-bottom: 32px;
    line-height: 1.6;
}

/* Formulier stijlen */
.vd-contact-form, .vd-nieuwsbrief-form {
    background: var(--vd-wit);
    border-radius: var(--vd-radius);
    padding: 36px;
    box-shadow: var(--vd-shadow);
}
.vd-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.vd-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}
.vd-form-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--vd-zwart);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.vd-required { color: #e53e3e; }
.vd-form-group input,
.vd-form-group select,
.vd-form-group textarea {
    padding: 12px 16px;
    border: 2px solid var(--vd-border);
    border-radius: 8px;
    font-size: 15px;
    color: var(--vd-zwart);
    background: var(--vd-wit);
    transition: border-color 0.2s;
    font-family: var(--vd-font);
}
.vd-form-group input:focus,
.vd-form-group select:focus,
.vd-form-group textarea:focus {
    outline: none;
    border-color: var(--vd-geel);
    box-shadow: 0 0 0 3px rgba(255,204,38,0.2);
}
.vd-form-group textarea { resize: vertical; min-height: 120px; }
.vd-form-group--privacy { margin-bottom: 24px; }
.vd-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--vd-tekst);
    line-height: 1.5;
}
.vd-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--vd-geel);
    padding: 0;
    border: none;
}
.vd-checkbox-label a { color: var(--vd-zwart); font-weight: 700; }
.vd-form-msg {
    display: none;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}
.vd-form-msg--success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.vd-form-msg--error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* Contact info kaarten */
.vd-contact-info-card,
.vd-contact-nieuwsbrief-card,
.vd-contact-rocs-card {
    background: var(--vd-wit);
    border-radius: var(--vd-radius);
    padding: 28px;
    box-shadow: var(--vd-shadow);
    margin-bottom: 24px;
}
.vd-contact-info-card h3,
.vd-contact-nieuwsbrief-card h3,
.vd-contact-rocs-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--vd-zwart);
    margin: 0 0 20px;
}
.vd-contact-info-card__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--vd-border);
    font-size: 14px;
    color: var(--vd-tekst);
    line-height: 1.5;
}
.vd-contact-info-card__item:last-child { border-bottom: none; }
.vd-contact-info-card__icon { font-size: 20px; flex-shrink: 0; }
.vd-contact-info-card__item a { color: var(--vd-zwart); font-weight: 600; text-decoration: none; }
.vd-contact-info-card__item a:hover { color: var(--vd-geel); }

.vd-contact-nieuwsbrief-card { text-align: center; background: var(--vd-zwart); }
.vd-contact-nieuwsbrief-card__icon { font-size: 36px; margin-bottom: 12px; }
.vd-contact-nieuwsbrief-card h3 { color: var(--vd-wit); }
.vd-contact-nieuwsbrief-card p { font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 20px; line-height: 1.6; }

.vd-contact-rocs-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.vd-contact-roc {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: var(--vd-wit);
    transition: opacity 0.2s;
}
.vd-contact-roc:hover { opacity: 0.85; color: var(--vd-wit); }
.vd-contact-roc--albeda    { background: #0055A5; }
.vd-contact-roc--mborijnland { background: #6B2D8B; }
.vd-contact-roc--mondriaan { background: #C8001E; }
.vd-contact-roc--zadkine   { background: #E5007D; }

/* ============================================================
   NIEUWSBRIEF MODAL
   ============================================================ */
.vd-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.vd-modal.is-active {
    pointer-events: all;
    opacity: 1;
}
.vd-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}
.vd-modal__panel {
    position: relative;
    background: var(--vd-wit);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px);
    transition: transform 0.25s ease;
}
.vd-modal.is-active .vd-modal__panel { transform: translateY(0); }
.vd-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--vd-lichtgrijs);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vd-zwart);
    transition: background 0.2s;
    z-index: 1;
}
.vd-modal__close:hover { background: var(--vd-geel); }
.vd-modal__content { padding: 40px; }
.vd-modal__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--vd-zwart);
    margin: 0 0 8px;
}
.vd-modal__content > p {
    font-size: 14px;
    color: var(--vd-subtekst);
    margin-bottom: 24px;
    line-height: 1.6;
}
.vd-nieuwsbrief-form__header {
    text-align: center;
    margin-bottom: 28px;
}
.vd-nieuwsbrief-form__icon { font-size: 40px; margin-bottom: 12px; }
.vd-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,0.5);
}
.vd-modal-backdrop.is-active { display: block; }

/* Nieuwsbrief form in modal — geen extra card-stijl */
.vd-modal .vd-nieuwsbrief-form {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* ============================================================
   RESPONSIEF
   ============================================================ */
/* ============================================================
   SPOTLIGHT KAART (vervangt 'Recent Toegevoegd')
   ============================================================ */
.vd-spotlight-card {
    background: var(--vd-wit);
    border-radius: var(--vd-radius);
    padding: 32px;
    box-shadow: var(--vd-shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.vd-spotlight-card__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--vd-subtekst);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.vd-spotlight-card__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.vd-spotlight-card__badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 6px 14px;
    border-radius: 100px;
    text-transform: uppercase;
}
.vd-spotlight-card__badge--branche {
    background: var(--vd-lichtgrijs);
    color: var(--vd-zwart);
    border: 1.5px solid var(--vd-border);
}
.vd-spotlight-card__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--vd-zwart);
    margin: 0;
    line-height: 1.25;
}
.vd-spotlight-card__excerpt {
    font-size: 14px;
    color: var(--vd-subtekst);
    line-height: 1.6;
    margin: 0;
}
.vd-spotlight-card__meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--vd-subtekst);
    padding: 12px 0;
    border-top: 1px solid var(--vd-border);
    border-bottom: 1px solid var(--vd-border);
}

/* ============================================================
   HEADER — UITGEBREID HAMBURGERMENU
   ============================================================ */
.vd-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--vd-wit);
    border-bottom: 1px solid var(--vd-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.vd-header__inner {
    max-width: var(--vd-max-w);
    margin: 0 auto;
    padding: 0 24px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.vd-logo__img {
    height: 52px;
    width: auto;
    display: block;
}
.vd-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.vd-nav__link {
    font-size: 14px;
    font-weight: 600;
    color: var(--vd-zwart);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.vd-nav__link:hover,
.vd-nav__item.current .vd-nav__link {
    background: var(--vd-lichtgrijs);
    color: var(--vd-zwart);
}
.vd-nav__item.current .vd-nav__link {
    border-bottom: 2px solid var(--vd-geel);
}
.vd-nav__cta { margin-left: 8px; }
.vd-btn--primary {
    background: var(--vd-geel);
    color: var(--vd-zwart);
    border: 2px solid var(--vd-geel);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}
.vd-btn--primary:hover {
    background: #e6b800;
    border-color: #e6b800;
    color: var(--vd-zwart);
}
/* Hamburger knop */
.vd-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.15s;
}
.vd-hamburger:hover { background: var(--vd-lichtgrijs); }
.vd-hamburger__bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--vd-zwart);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}
/* Hamburger animatie (open staat) */
.vd-hamburger[aria-expanded="true"] .vd-hamburger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.vd-hamburger[aria-expanded="true"] .vd-hamburger__bar:nth-child(2) {
    opacity: 0;
}
.vd-hamburger[aria-expanded="true"] .vd-hamburger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
/* Dropdown menu */
.vd-dropdown-menu {
    display: none;
    background: var(--vd-wit);
    border-top: 1px solid var(--vd-border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.vd-dropdown-menu.is-open {
    display: block;
}
.vd-dropdown-menu__list {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    max-width: var(--vd-max-w);
    margin: 0 auto;
}
.vd-dropdown-menu__list li a {
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--vd-zwart);
    text-decoration: none;
    border-bottom: 1px solid var(--vd-border);
    transition: background 0.15s;
}
.vd-dropdown-menu__list li:last-child a { border-bottom: none; }
.vd-dropdown-menu__list li a:hover { background: var(--vd-lichtgrijs); }
.vd-dropdown-menu__cta a {
    background: var(--vd-geel) !important;
    color: var(--vd-zwart) !important;
    font-weight: 700 !important;
    margin: 8px 24px;
    border-radius: 8px;
    border-bottom: none !important;
}

/* Desktop: hamburger verbergen, nav tonen */
@media (min-width: 1025px) {
    .vd-hamburger { display: none !important; }
    .vd-nav { display: flex; }
    .vd-dropdown-menu { display: none !important; }
}
/* Tablet/mobiel: nav verbergen, hamburger tonen */
@media (max-width: 1024px) {
    .vd-nav { display: none; }
    .vd-hamburger { display: flex; }
}

@media (max-width: 1024px) {
    .vd-hero__inner { grid-template-columns: 1fr; gap: 40px; }
    .vd-diensten__grid { grid-template-columns: 1fr 1fr; }
    .vd-diensten__grid--4 { grid-template-columns: 1fr 1fr; }
    .vd-aanbod-kaarten { grid-template-columns: 1fr 1fr; }
    .vd-waarom__grid { grid-template-columns: 1fr 1fr; }
    .vd-stappen__grid { grid-template-columns: 1fr 1fr; }
    .vd-pv-kenmerken__grid { grid-template-columns: 1fr 1fr; }
    .vd-contact-sectie__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .vd-diensten__grid { grid-template-columns: 1fr; }
    .vd-aanbod-kaarten { grid-template-columns: 1fr; }
    .vd-waarom__grid { grid-template-columns: 1fr; }
    .vd-stappen__grid { grid-template-columns: 1fr; }
    .vd-pv-kenmerken__grid { grid-template-columns: 1fr; }
    .vd-doelgroepen__grid { grid-template-columns: 1fr; }
    .vd-form-row { grid-template-columns: 1fr; }
    .vd-hero__btns { flex-direction: column; }
    .vd-cta-sectie__btns { flex-direction: column; align-items: center; }
    .vd-pv-intro-banner__inner { flex-direction: column; text-align: center; }
    .vd-praktijkverklaringen-link__inner { flex-direction: column; text-align: center; }
    .vd-aanbod-zoek__inner { flex-direction: column; }
    .vd-aanbod-zoek__select { border-left: none; border-top: 1px solid var(--vd-border); }
    .vd-contact-rocs-card__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOE HET WERKT — Nieuw 2x2 tijdlijn-ontwerp (v5 fix)
   ============================================================ */

/* Verwijder witte ruimte tussen Waarom en Hoe het werkt */
.vd-waarom--light + .vd-stappen--light {
    margin-top: 0;
    padding-top: 0;
}
.vd-stappen--light {
    padding-top: 60px;
}

/* 2x2 grid container */
.vd-stappen2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
    width: 100%;
    box-sizing: border-box;
}

/* Elke stap-kaart */
.vd-stap2 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius);
    padding: 28px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    box-sizing: border-box;
    min-width: 0;
}

/* Geel getal */
.vd-stap2__num {
    flex-shrink: 0;
    font-size: 40px;
    font-weight: 900;
    color: var(--vd-geel);
    line-height: 1;
    min-width: 52px;
    font-family: var(--vd-font);
}

/* Tekstblok */
.vd-stap2__body {
    min-width: 0;
    flex: 1;
}

.vd-stap2__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--vd-zwart);
    margin: 0 0 8px;
    line-height: 1.3;
}

.vd-stap2__text {
    font-size: 14px;
    color: var(--vd-subtekst);
    margin: 0;
    line-height: 1.6;
}

/* Tablet: 2 kolommen blijven */
@media (max-width: 768px) {
    .vd-stappen2 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   HOE HET WERKT — Verticale rijen (v6 volledig nieuw ontwerp)
   Geen grid, geen flex-overflow — altijd correct schaalbaar
   ============================================================ */

.vd-hoestappen {
    background: var(--vd-lichtgrijs);
    padding: 60px 0 80px;
    margin-top: 0;
}

/* Verwijder witte ruimte tussen Waarom en Hoe het werkt */
.vd-waarom--light + .vd-hoestappen {
    padding-top: 0;
}

.vd-hoestappen__lijst {
    margin-top: 40px;
    display: block; /* expliciet geen grid/flex op de container */
    width: 100%;
}

/* Elke rij: een horizontale balk */
.vd-hoestap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    width: 100%;
    box-sizing: border-box;
}

.vd-hoestap:last-child {
    margin-bottom: 0;
}

/* Linkerkolom: geel getal in een cirkel */
.vd-hoestap__links {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    background: var(--vd-geel);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 28px;
}

.vd-hoestap__nr {
    font-size: 22px;
    font-weight: 900;
    color: var(--vd-zwart);
    font-family: var(--vd-font);
    line-height: 1;
}

/* Rechterkolom: titel + tekst */
.vd-hoestap__rechts {
    flex: 1;
    min-width: 0;
    padding-top: 8px;
}

.vd-hoestap__titel {
    font-size: 18px;
    font-weight: 700;
    color: var(--vd-zwart);
    margin: 0 0 8px;
    line-height: 1.3;
}

.vd-hoestap__tekst {
    font-size: 15px;
    color: var(--vd-subtekst);
    margin: 0;
    line-height: 1.65;
}

/* Mobiel: cirkel iets kleiner */
@media (max-width: 480px) {
    .vd-hoestap {
        padding: 20px;
    }
    .vd-hoestap__links {
        width: 56px;
        height: 56px;
        margin-right: 18px;
    }
    .vd-hoestap__nr {
        font-size: 18px;
    }
    .vd-hoestap__titel {
        font-size: 16px;
    }
}

/* Centreer badge en koptekst in Hoe het werkt sectie */
.vd-hoestappen .vd-section-badge,
.vd-hoestappen .vd-section-h2 {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Fix: HOE HET WERKT badge moet inline zijn (om tekst heen), niet full-width */
.vd-hoestappen .vd-section-badge {
    display: inline-block;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Wrapper om badge te centreren als inline-block */
.vd-hoestappen .vd-section-badge-wrap {
    text-align: center;
    display: block;
    margin-bottom: 16px;
}

/* ============================================================
   FOOTER — Alle grijze tekst en links wit maken (v10)
   Gele koppen blijven geel
   ============================================================ */

/* Algemene footer tekst wit */
.vd-footer,
.vd-footer p,
.vd-footer address,
.vd-footer span,
.vd-footer li {
    color: #ffffff !important;
}

/* Footer links wit, hover lichtgeel */
.vd-footer a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.vd-footer a:hover {
    color: var(--vd-geel) !important;
    text-decoration: underline;
}

/* Gele koppen en gele tekst behouden */
.vd-footer .vd-footer__kop,
.vd-footer h3,
.vd-footer h4,
.vd-footer .vd-footer__logo-naam span,
.vd-footer [style*="color: #F5C400"],
.vd-footer [style*="color:#F5C400"],
.vd-footer [style*="color: var(--vd-geel)"] {
    color: var(--vd-geel) !important;
}

/* Footer bottom bar tekst ook wit */
.vd-footer__bottom,
.vd-footer__bottom p,
.vd-footer__bottom a {
    color: rgba(255,255,255,0.7) !important;
}

.vd-footer__bottom a:hover {
    color: #ffffff !important;
}

/* ============================================================
   GEEL HERO BLOK — voor alle pagina's (v11)
   ============================================================ */

.vd-page-hero--yellow {
    background: #FFCC26 !important;
    padding: 80px 0 60px;
    color: #1A1A1A !important;
}

.vd-page-hero--yellow .vd-page-hero__title,
.vd-page-hero--yellow .vd-page-hero__title--dark {
    color: #1A1A1A !important;
}

.vd-page-hero--yellow .vd-page-hero__sub,
.vd-page-hero--yellow .vd-page-hero__sub--dark {
    color: rgba(0,0,0,0.7) !important;
    opacity: 1;
}

.vd-page-hero__title--dark {
    color: #1A1A1A !important;
}

.vd-page-hero__sub--dark {
    color: rgba(0,0,0,0.7) !important;
    opacity: 1;
}

/* Zwarte badge (voor op gele achtergrond) */
.vd-section-badge--dark {
    background: var(--vd-zwart);
    color: #ffffff;
    border: none;
}

/* Zwarte button variant */
.vd-btn--black {
    background: var(--vd-zwart);
    color: #ffffff;
    border: 2px solid var(--vd-zwart);
}

.vd-btn--black:hover {
    background: #333;
    border-color: #333;
    color: #ffffff;
}

/* ============================================================
   LLO AANBOD — Praktijkverklaringen spotlight-frame (v11)
   ============================================================ */

.vd-pv-spotlight {
    background: #f5f5f5;
    padding: 60px 0;
}

.vd-pv-spotlight__inner {
    display: flex;
    align-items: center;
    gap: 48px;
}

.vd-pv-spotlight__left {
    flex: 1;
    min-width: 0;
}

.vd-pv-spotlight__title {
    font-size: 28px;
    font-weight: 800;
    color: var(--vd-zwart);
    margin: 12px 0 16px;
    line-height: 1.2;
}

.vd-pv-spotlight__tekst {
    font-size: 15px;
    color: var(--vd-subtekst);
    line-height: 1.65;
    margin: 0;
}

.vd-pv-spotlight__card {
    flex: 0 0 380px;
    background: #ffffff;
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius);
    padding: 32px 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.vd-pv-spotlight__card-badge {
    display: inline-block;
    background: var(--vd-geel);
    color: var(--vd-zwart);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 14px;
}

.vd-pv-spotlight__card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--vd-zwart);
    margin: 0 0 12px;
    line-height: 1.3;
}

.vd-pv-spotlight__card-tekst {
    font-size: 14px;
    color: var(--vd-subtekst);
    line-height: 1.6;
    margin: 0 0 20px;
}

@media (max-width: 768px) {
    .vd-pv-spotlight__inner {
        flex-direction: column;
    }
    .vd-pv-spotlight__card {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ============================================================
   FIXES v13 — tekstgrootte, ruimte en nieuws hero
   ============================================================ */

/* Intro-tekst Praktijkleren: zelfde grootte als hero sub-tekst (18px) */
.vd-praktijkleren-intro__lead {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: var(--vd-subtekst) !important;
    max-width: 800px;
    margin: 0 auto 32px !important;
}

/* Minder ruimte op LLO Aanbod pagina */
.vd-pv-spotlight {
    padding: 32px 0 !important;
}

.vd-section.vd-section--light {
    padding-top: 32px !important;
}

/* Nieuws hero: gele achtergrond met zwarte tekst */
.vd-nieuws-hero {
    background: #FFCC26 !important;
    color: #1A1A1A !important;
}

.vd-nieuws-hero .vd-nieuws-hero__title,
.vd-nieuws-hero__title--dark {
    color: #1A1A1A !important;
}

.vd-nieuws-hero .vd-nieuws-hero__subtitle,
.vd-nieuws-hero__subtitle--dark {
    color: rgba(0,0,0,0.7) !important;
}

/* ============================================================
   MAATWERK & INCOMPANY — page-maatwerk.php
   ============================================================ */

.vd-maatwerk-intro {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.vd-maatwerk-intro__lead {
    font-size: 18px;
    line-height: 1.75;
    color: var(--vd-tekst);
}
.vd-maatwerk-h2 {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    color: var(--vd-zwart);
    margin-bottom: 40px;
    text-align: center;
}
.vd-maatwerk-stappen {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.vd-maatwerk-stap {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    background: var(--vd-wit);
    border-radius: var(--vd-radius);
    padding: 28px 32px;
    box-shadow: var(--vd-shadow);
}
.vd-maatwerk-stap__num {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background: var(--vd-geel);
    color: var(--vd-zwart);
    font-size: 22px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vd-maatwerk-stap__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--vd-zwart);
    margin: 0 0 8px;
}
.vd-maatwerk-stap__tekst {
    font-size: 15px;
    line-height: 1.65;
    color: var(--vd-subtekst);
    margin: 0;
}

/* Voordelen grid */
.vd-maatwerk-voordelen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-top: 8px;
}
.vd-maatwerk-voordeel {
    background: var(--vd-lichtgrijs);
    border-radius: var(--vd-radius);
    padding: 28px 24px;
    text-align: center;
}
.vd-maatwerk-voordeel__icon {
    font-size: 36px;
    margin-bottom: 12px;
}
.vd-maatwerk-voordeel h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--vd-zwart);
    margin: 0 0 10px;
}
.vd-maatwerk-voordeel p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--vd-subtekst);
    margin: 0;
}

/* ============================================================
   FINANCIAL ENGINEERING — page-subsidies.php
   ============================================================ */

.vd-fe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 8px;
}
.vd-fe-card {
    background: var(--vd-wit);
    border-radius: var(--vd-radius);
    padding: 28px 24px;
    box-shadow: var(--vd-shadow);
    border-top: 4px solid var(--vd-geel);
}
.vd-fe-card__icon {
    font-size: 32px;
    margin-bottom: 12px;
}
.vd-fe-card__title {
    font-size: 17px;
    font-weight: 800;
    color: var(--vd-zwart);
    margin: 0 0 10px;
}
.vd-fe-card__tekst {
    font-size: 14px;
    line-height: 1.65;
    color: var(--vd-subtekst);
    margin: 0;
}
.vd-fe-contact {
    max-width: 720px;
    margin: 0 auto;
}
.vd-fe-contact__sub {
    font-size: 16px;
    color: var(--vd-subtekst);
    margin-bottom: 32px;
    text-align: center;
}

/* Contact formulier rijen en velden */
.vd-contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.vd-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.vd-contact-form__field label {
    font-size: 14px;
    font-weight: 700;
    color: var(--vd-zwart);
}
.vd-contact-form__field input,
.vd-contact-form__field textarea {
    padding: 12px 16px;
    border: 1.5px solid #D8D8D8;
    border-radius: 8px;
    font-size: 15px;
    color: var(--vd-zwart);
    background: #F7F7F7;
    font-family: var(--vd-font);
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.vd-contact-form__field input::placeholder,
.vd-contact-form__field textarea::placeholder {
    color: #AAAAAA;
    font-size: 14px;
}
.vd-contact-form__field input:focus,
.vd-contact-form__field textarea:focus {
    outline: none;
    border-color: var(--vd-geel);
    box-shadow: 0 0 0 3px rgba(255,204,38,0.2);
    background: #ffffff;
}
.vd-contact-form__field textarea {
    resize: vertical;
    min-height: 140px;
}
/* Privacy checkbox rij: iets meer ruimte boven de submit-knop */
.vd-contact-form__field:has(.vd-contact-form__checkbox) {
    margin-bottom: 20px;
}
.vd-contact-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--vd-tekst);
    line-height: 1.5;
    cursor: pointer;
}
.vd-contact-form__checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 3px;
    accent-color: var(--vd-geel);
}
.vd-contact-form__checkbox a {
    color: var(--vd-zwart);
    font-weight: 700;
    text-decoration: underline;
}
/* Ruimte tussen privacy checkbox en submit-knop */
.vd-contact-form .vd-btn {
    margin-top: 20px;
}

/* ============================================================
   OVER VIA DELTA — page-over-via-delta.php
   ============================================================ */

.vd-ovd-intro {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 60px;
    align-items: center;
}
.vd-ovd-intro__tekst h2 {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    color: var(--vd-zwart);
    margin: 0 0 20px;
}
.vd-ovd-intro__tekst p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--vd-tekst);
    margin: 0 0 16px;
}
.vd-ovd-intro__stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.vd-ovd-stat {
    background: var(--vd-geel);
    border-radius: var(--vd-radius);
    padding: 20px 24px;
    text-align: center;
}
.vd-ovd-stat__num {
    display: block;
    font-size: 36px;
    font-weight: 900;
    color: var(--vd-zwart);
    line-height: 1;
}
.vd-ovd-stat__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--vd-zwart);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.vd-ovd-mv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.vd-ovd-mv__blok {
    background: var(--vd-wit);
    border-radius: var(--vd-radius);
    padding: 36px 32px;
    box-shadow: var(--vd-shadow);
}
.vd-ovd-mv__blok h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--vd-zwart);
    margin: 16px 0 12px;
}
.vd-ovd-mv__blok p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--vd-tekst);
    margin: 0;
}
.vd-ovd-partners-intro {
    font-size: 16px;
    color: var(--vd-subtekst);
    max-width: 700px;
    margin: 0 auto 40px;
    text-align: center;
    line-height: 1.7;
}
.vd-ovd-rocs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}
.vd-ovd-roc {
    background: var(--vd-lichtgrijs);
    border-radius: var(--vd-radius);
    padding: 28px 24px;
}
.vd-ovd-roc__dot {
    width: 40px;
    height: 8px;
    border-radius: 4px;
    margin-bottom: 16px;
}
.vd-ovd-roc__naam {
    font-size: 18px;
    font-weight: 800;
    color: var(--vd-zwart);
    margin: 0 0 10px;
}
.vd-ovd-roc__tekst {
    font-size: 14px;
    line-height: 1.65;
    color: var(--vd-subtekst);
    margin: 0 0 16px;
}
.vd-ovd-roc__btn {
    display: inline-block;
    margin-top: auto;
    padding: 8px 18px;
    background: #1A1A1A;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.18s;
}
.vd-ovd-roc__btn:hover {
    background: #FFCC26;
    color: #1A1A1A;
}

/* CTA blok met twee buttons */
.vd-cta-blok__btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.vd-btn--outline-dark {
    background: transparent;
    color: var(--vd-zwart);
    border: 2px solid var(--vd-zwart);
}
.vd-btn--outline-dark:hover {
    background: var(--vd-zwart);
    color: var(--vd-wit);
}

/* Section helpers */
.vd-section--white {
    background: var(--vd-wit);
    padding: 72px 0;
}
.vd-section--geel {
    background: var(--vd-geel);
    padding: 72px 0;
}

/* Badge dark variant */
.vd-section-badge--yellow {
    background: var(--vd-geel);
    color: var(--vd-zwart);
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 6px 16px;
    border-radius: 100px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .vd-ovd-intro { grid-template-columns: 1fr; }
    .vd-ovd-intro__stats { flex-direction: row; flex-wrap: wrap; }
    .vd-ovd-mv { grid-template-columns: 1fr; }
    .vd-maatwerk-stap { flex-direction: column; gap: 16px; }
    .vd-maatwerk-stap__num { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }
}

/* ============================================================
   ONS TEAM — Over Via Delta pagina
   ============================================================ */

/* Grid: 5 kolommen op desktop, 3 op tablet, 2 op mobiel */
.vd-team-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
    margin-top: 40px;
}

@media (max-width: 1100px) {
    .vd-team-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 860px) {
    .vd-team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .vd-team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* Kaart */
.vd-team-kaart {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: var(--vd-radius);
    overflow: hidden;
    box-shadow: var(--vd-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vd-team-kaart:hover {
    transform: translateY(-4px);
    box-shadow: var(--vd-shadow-lg);
}

/* Foto-wrapper: vierkant met object-fit */
.vd-team-kaart__foto-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #e8e8e8;
}

.vd-team-kaart__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    filter: grayscale(20%);
    transition: filter 0.3s ease;
}

.vd-team-kaart:hover .vd-team-kaart__foto {
    filter: grayscale(0%);
}

/* Naam & functie */
.vd-team-kaart__info {
    padding: 14px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vd-team-kaart__naam {
    font-size: 14px;
    font-weight: 700;
    color: var(--vd-zwart);
    line-height: 1.3;
}

.vd-team-kaart__functie {
    font-size: 12px;
    color: var(--vd-subtekst);
    line-height: 1.4;
}

/* Contact-regel onder het grid */
.vd-team-contact {
    margin-top: 36px;
    text-align: center;
    font-size: 15px;
    color: var(--vd-subtekst);
}

.vd-team-contact a {
    color: var(--vd-zwart);
    font-weight: 600;
    text-decoration: underline;
}

.vd-team-contact a:hover {
    color: #b89000;
}

/* Initialen-placeholder als er nog geen foto is */
.vd-team-kaart__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
}

.vd-team-kaart__initialen {
    font-size: 32px;
    font-weight: 900;
    color: #aaa;
    letter-spacing: 2px;
    user-select: none;
}

/* Google Maps-knop op de contactpagina */
.vd-contact-maps-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 16px;
    background: var(--vd-geel);
    color: var(--vd-zwart);
    font-size: 13px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.15s ease;
}
.vd-contact-maps-btn:hover {
    background: #e6b800;
    color: var(--vd-zwart);
    transform: translateY(-1px);
}

/* Subsidiekaarten met externe link-knop */
.vd-fe-card--link {
    display: flex;
    flex-direction: column;
}

.vd-fe-card__btn {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--vd-zwart);
    text-decoration: none;
    border-top: 1px solid var(--vd-border);
    transition: color 0.18s ease;
}

.vd-fe-card__btn:hover {
    color: #b89000;
}

/* ============================================================
   Juridische pagina's (privacy, cookie, disclaimer)
   ============================================================ */
.vd-juridisch-content {
    max-width: 820px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.8;
    color: #333;
}

.vd-juridisch-content h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--vd-zwart);
    margin: 40px 0 12px;
    padding-top: 8px;
    border-top: 2px solid var(--vd-geel);
}

.vd-juridisch-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--vd-zwart);
    margin: 28px 0 8px;
}

.vd-juridisch-content p {
    margin: 0 0 16px;
}

.vd-juridisch-content ul {
    margin: 0 0 16px 24px;
    padding: 0;
}

.vd-juridisch-content ul li {
    margin-bottom: 6px;
}

.vd-juridisch-content address {
    font-style: normal;
    background: #f7f7f7;
    border-left: 4px solid var(--vd-geel);
    padding: 16px 20px;
    border-radius: 6px;
    margin: 16px 0 24px;
    line-height: 1.7;
}

.vd-juridisch-content a {
    color: var(--vd-zwart);
    font-weight: 600;
    text-decoration: underline;
}

.vd-juridisch-datum {
    display: inline-block;
    background: #f0f0f0;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    color: #666;
    margin-bottom: 28px !important;
}

/* ============================================================
   Financiering & Subsidies — Financial Engineering kolommen
   ============================================================ */
.vd-fe-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 40px;
}

.vd-fe-col {
    background: var(--vd-wit, #fff);
    border-radius: 12px;
    padding: 28px 24px;
    border-top: 4px solid var(--vd-geel, #FFCC26);
}

.vd-fe-col--rood { border-top-color: #e05252; }
.vd-fe-col--blauw { border-top-color: #4caf50; }

.vd-fe-col__title {
    font-size: 13px;
    font-weight: 800;
    color: var(--vd-zwart, #1a1a1a);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 18px;
}

.vd-fe-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vd-fe-col ul li {
    font-size: 13px;
    color: #555;
    padding: 7px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    line-height: 1.5;
}

.vd-fe-col ul li:last-child { border-bottom: none; }

.vd-fe-col ul li::before {
    content: '→';
    color: var(--vd-geel, #FFCC26);
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 1px;
}

.vd-fe-col--rood ul li::before { content: '✕'; color: #e05252; }
.vd-fe-col--blauw ul li::before { content: '↔'; color: #4caf50; }

@media (max-width: 900px) {
    .vd-fe-cols { grid-template-columns: 1fr; }
}

/* ============================================================
   Financiering & Subsidies — Beslisboom
   ============================================================ */
.vd-beslisboom {
    display: flex;
    flex-direction: column;
    max-width: 760px;
    margin: 40px auto 0;
}

.vd-stap {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
}

.vd-stap:not(.vd-stap--last)::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 44px;
    bottom: -24px;
    width: 2px;
    background: var(--vd-geel, #FFCC26);
}

.vd-stap__nummer {
    width: 40px;
    height: 40px;
    background: var(--vd-geel, #FFCC26);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 15px;
    color: var(--vd-zwart, #1a1a1a);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.vd-stap__content {
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px 20px;
    flex: 1;
    margin-bottom: 24px;
}

.vd-stap__label {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.vd-stap__vraag {
    font-size: 15px;
    font-weight: 700;
    color: var(--vd-zwart, #1a1a1a);
    line-height: 1.4;
}

/* ============================================================
   Sectie labels & intro (herbruikbaar)
   ============================================================ */
.vd-section-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 10px;
}

.vd-section-intro {
    font-size: 15px;
    color: #555;
    max-width: 680px;
    margin-bottom: 48px;
    line-height: 1.7;
}

/* ============================================================
   MOBILE RESPONSIVE — Volledige fix voor alle pagina's
   Breakpoints: 1024px (tablet), 768px (mobiel), 480px (klein)
   ============================================================ */

/* ── Container padding op mobiel ── */
@media (max-width: 768px) {
    .vd-container { padding: 0 16px; }
}

/* ── Secties: padding verkleinen op mobiel ── */
@media (max-width: 768px) {
    .vd-section--white,
    .vd-section--grey,
    .vd-section--cta,
    .vd-diensten,
    .vd-aanbod-blok,
    .vd-waarom,
    .vd-stappen,
    .vd-hoestappen,
    .vd-cta-sectie,
    .vd-partners-sectie,
    .vd-contact-sectie,
    .vd-praktijkleren-sectie,
    .vd-pv-sectie {
        padding: 48px 0;
    }
    .vd-page-hero { padding: 48px 0 36px; }
}

/* ── Hero logo-rij: stapelen op mobiel ── */
@media (max-width: 640px) {
    .vd-page-hero--logo-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }
    .vd-page-hero--logo-row .vd-hero-divider { display: none !important; }
    .vd-page-hero--logo-row .vd-hero-logo-col img { height: 52px; }
    .vd-page-hero__title,
    .vd-page-hero__title--dark { font-size: clamp(24px, 7vw, 36px) !important; }
    .vd-page-hero__sub,
    .vd-page-hero__sub--dark { font-size: 15px !important; }
}

/* ── Homepage hero ── */
@media (max-width: 768px) {
    .vd-hero { padding: 48px 0; }
    .vd-hero__inner { grid-template-columns: 1fr; gap: 32px; }
    .vd-hero__title { font-size: clamp(28px, 8vw, 42px); }
    .vd-hero__sub { font-size: 15px; max-width: 100%; }
    .vd-hero__btns { flex-direction: column; gap: 12px; }
    .vd-hero__btns .vd-btn { width: 100%; text-align: center; justify-content: center; }
    .vd-hero__stats-card { display: none; } /* verberg stats-kaart op mobiel */
}

/* ── Diensten grid ── */
@media (max-width: 1024px) {
    .vd-diensten__grid { grid-template-columns: 1fr 1fr; }
    .vd-diensten__grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .vd-diensten__grid,
    .vd-diensten__grid--4 { grid-template-columns: 1fr; }
}

/* ── Aanbod kaarten ── */
@media (max-width: 1024px) {
    .vd-aanbod-kaarten { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .vd-aanbod-kaarten { grid-template-columns: 1fr; }
    .vd-aanbod-zoek__inner { flex-direction: column; gap: 8px; }
    .vd-aanbod-zoek__select { border-left: none; border-top: 1px solid var(--vd-border); }
}

/* ── Waarom grid ── */
@media (max-width: 1024px) {
    .vd-waarom__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .vd-waarom__grid { grid-template-columns: 1fr; }
}

/* ── CTA knoppen ── */
@media (max-width: 600px) {
    .vd-cta-sectie__btns,
    .vd-cta__btns { flex-direction: column; align-items: stretch; gap: 12px; }
    .vd-cta-sectie__btns .vd-btn,
    .vd-cta__btns .vd-btn { width: 100%; justify-content: center; }
}

/* ── Sectie titels ── */
@media (max-width: 768px) {
    .vd-section-h2 { font-size: clamp(22px, 6vw, 32px); }
    .vd-section-title { font-size: clamp(20px, 6vw, 28px) !important; }
    .vd-cta__title { font-size: clamp(22px, 6vw, 32px); }
    .vd-section-lead { font-size: 15px; }
    .vd-section-intro { font-size: 14px; margin-bottom: 32px; }
}

/* ── LLO Aanbod filters ── */
@media (max-width: 900px) {
    .vd-aanbod-filters { flex-direction: column; gap: 12px; }
    .vd-aanbod-filter-select { width: 100%; }
}
@media (max-width: 600px) {
    .vd-aanbod-filters { padding: 16px; }
    .vd-aanbod-header { flex-direction: column; gap: 12px; text-align: center; }
}

/* ── Over Via Delta: team grid ── */
@media (max-width: 1024px) {
    .vd-team-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
    .vd-team-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .vd-ovd-missie-grid { grid-template-columns: 1fr !important; }
    .vd-ovd-roc-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
    .vd-team-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .vd-ovd-roc-grid { grid-template-columns: 1fr !important; }
    .vd-team-card__foto { width: 80px !important; height: 80px !important; }
    .vd-team-card__initialen { font-size: 22px !important; }
}

/* ── Maatwerk stappen ── */
@media (max-width: 768px) {
    .vd-maatwerk-stappen { grid-template-columns: 1fr !important; }
    .vd-maatwerk-voordelen { grid-template-columns: 1fr !important; }
}

/* ── Financiering & Subsidies ── */
@media (max-width: 900px) {
    .vd-fe-grid { grid-template-columns: 1fr 1fr !important; }
    .vd-fe-cols { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
    .vd-fe-grid { grid-template-columns: 1fr !important; }
    .vd-beslisboom { margin-top: 24px; }
    .vd-stap__content { padding: 12px 16px; }
    .vd-stap__vraag { font-size: 14px; }
}

/* ── Partners grid ── */
@media (max-width: 768px) {
    .vd-partners-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
    .vd-partners-grid { grid-template-columns: 1fr !important; }
}

/* ── Contact formulier ── */
@media (max-width: 768px) {
    .vd-contact-sectie__grid { grid-template-columns: 1fr !important; }
    .vd-form-row { grid-template-columns: 1fr !important; }
    .vd-contact-rocs-card__grid { grid-template-columns: 1fr 1fr !important; }
    .vd-contact-maps-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    .vd-contact-rocs-card__grid { grid-template-columns: 1fr !important; }
}

/* ── Praktijkleren ── */
@media (max-width: 768px) {
    .vd-praktijkleren-grid { grid-template-columns: 1fr !important; }
    .vd-pl-doelgroep-grid { grid-template-columns: 1fr 1fr !important; }
    .vd-pl-stappen { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .vd-pl-doelgroep-grid { grid-template-columns: 1fr !important; }
}

/* ── Praktijkverklaringen ── */
@media (max-width: 768px) {
    .vd-pv-kenmerken__grid { grid-template-columns: 1fr 1fr !important; }
    .vd-pv-intro-banner__inner { flex-direction: column !important; text-align: center; gap: 20px; }
    .vd-praktijkverklaringen-link__inner { flex-direction: column !important; text-align: center; gap: 20px; }
}
@media (max-width: 480px) {
    .vd-pv-kenmerken__grid { grid-template-columns: 1fr !important; }
}

/* ── Nieuws & Activiteiten ── */
@media (max-width: 768px) {
    .vd-nieuws-grid { grid-template-columns: 1fr !important; }
    .vd-nieuws-filters { flex-direction: column; gap: 8px; }
    .vd-nieuws-filter-btn { width: 100%; text-align: center; }
}

/* ── Juridische pagina's ── */
@media (max-width: 768px) {
    .vd-juridisch-content { font-size: 14px; }
    .vd-juridisch-content h2 { font-size: 18px; }
    .vd-juridisch-content h3 { font-size: 15px; }
}

/* ── Footer ── */
@media (max-width: 1024px) {
    .vd-footer__grid { grid-template-columns: 1fr 1fr !important; gap: 32px; }
}
@media (max-width: 600px) {
    .vd-footer__grid { grid-template-columns: 1fr !important; }
    .vd-footer__bottom { flex-direction: column !important; gap: 12px; text-align: center; }
    .vd-footer__bottom div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
    .vd-footer__partners { flex-wrap: wrap; gap: 12px; justify-content: center; }
}

/* ── Knoppen: volledige breedte op klein mobiel ── */
@media (max-width: 400px) {
    .vd-btn { font-size: 14px; padding: 12px 20px; }
    .vd-hero__btns .vd-btn,
    .vd-cta-sectie__btns .vd-btn,
    .vd-cta__btns .vd-btn { width: 100%; }
}

/* ── Hamburger menu dropdown ── */
@media (max-width: 1024px) {
    .vd-dropdown-menu__list { padding: 8px 0; }
    .vd-dropdown-menu__list li a { font-size: 16px; padding: 16px 20px; }
}

/* ============================================================
   HERO GRID — Mobile fix (v44)
   ============================================================ */
.vd-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Prevent horizontal overflow on all screens */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
*, *::before, *::after {
    max-width: 100%;
}

@media (max-width: 900px) {
    .vd-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    /* Alle inline grids ook stapelen */
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

@media (max-width: 768px) {
    .vd-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Alle inline grids naar 1 kolom */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Spotlight kaart compacter */
    .vd-hero-grid > div:last-child > div {
        padding: 24px !important;
    }

    /* Hero padding kleiner */
    section[style*="padding:80px 0 100px"] {
        padding: 48px 0 56px !important;
    }
}

@media (max-width: 480px) {
    .vd-hero-grid {
        gap: 24px;
    }
    .vd-hero-grid > div:last-child > div {
        padding: 20px !important;
    }
}