/* Layout — paginastructuur en grids */

/* ── Container ────────────────────────── */
.container {
    max-width: var(--breedte-max);
    margin: 0 auto;
    padding: 0 var(--rand-pagina);
}

/* ── Kop: hoofdbord links, wegwijzer rechts ── */
.kop {
    padding: 40px 0 var(--sectie-ruimte);
}

.kop-inhoud {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
}

/* Hoofdbord neemt de ruimte; wegwijzer schuift eronder op smalle schermen */
.kop-inhoud > .hoofdbord { flex: 999 1 560px; min-width: 0; }
.kop-inhoud > .wegwijzer { flex: 1 1 300px; }

/* ── Secties ──────────────────────────── */
.sectie {
    padding-bottom: var(--sectie-ruimte);
    scroll-margin-top: 24px;
}

/* Over Mij: intro en verhaal naast elkaar, onder elkaar op smal scherm */
.twee-kolommen {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 56px;
}

.twee-kolommen > * { flex: 1 1 420px; }

/* Ervaring en Opleidingen: twee routelijnen naast elkaar */
.routes {
    display: flex;
    flex-wrap: wrap;
    gap: 56px;
    padding-bottom: var(--sectie-ruimte);
}

.routes > .sectie {
    flex: 1 1 440px;
    min-width: 0;
    padding-bottom: 0;
}

/* Hobby's: zoveel kolommen als er passen */
.hobby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px 28px;
}

/* Contactgegevens */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px 32px;
}

/* ── Footer ───────────────────────────── */
.voet {
    border-top: 2px solid var(--kleur-inkt);
    padding: 20px 0 32px;
    font-size: var(--tekst-klein);
    color: var(--kleur-inkt-zacht);
}