/* De wrapper dwingen om een grid te zijn die de ruimte van het grootste kind claimt */
.voice-wrapper {
    display: grid !important;
    grid-template-columns: 100% !important;
    grid-template-rows: auto !important;
    align-items: start !important;
    padding: 0 !important;
    margin: 0 !important;
}

    /* ELK kind van de wrapper moet in de eerste cel gaan zitten */
    .voice-wrapper > .voice-section {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        /* Onzichtbaar maken maar wel ruimte laten claimen */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        /* De slick transitie */
        transform: translateY(10px);
        transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s;
    }

/* Alleen de actieve voice laten zien op diezelfde plek */
body[data-active-voice="Analyst"] .voice-section.voice-Analyst,
body[data-active-voice="Citizen"] .voice-section.voice-Citizen,
body[data-active-voice="Innovator"] .voice-section.voice-Innovator,
body[data-active-voice="Doer"] .voice-section.voice-Doer {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}