* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, sans-serif;
    color: #1a1a1a;
}

.rekito-layout {
    display: flex;
    height: 100vh;
}

.kolom-lijst {
    width: 320px;
    border-right: 1px solid #e0e0e0;
    padding: 1rem;
    overflow-y: auto;
}

.kolom-detail {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

/* Mobiel: stapsgewijze navigatie — één kolom tegelijk zichtbaar.
   Welke kolom actief is, wordt straks bepaald door de route/HTMX-swap;
   dit is voorlopig het CSS-skelet daarvoor. */
@media (max-width: 768px) {
    .rekito-layout {
        display: block;
    }

    .kolom-lijst,
    .kolom-detail {
        width: 100%;
        height: 100%;
        border-right: none;
    }

    .kolom-lijst:not(.actief),
    .kolom-detail:not(.actief) {
        display: none;
    }
}