body {
    font-family: Arial, sans-serif;
    margin: 2em;
    background: #f7f7f7;
}

h2 {
    color: #444;
}

.buttons {
    margin-top: 3em; /* zet knoppen wat lager, zodat de popup niet triggert als je op de bovenste klikt*/
    display: flex;
    flex-direction: column; /* forceer verticale knoppen */
    gap: 1em; /* ruimte tussen knoppen */
}

.btn-wrapper {
    display: flex;
    align-items: center;
    gap: 0.8em; /* afstand tussen knop en uitleg */
}

/* Beschrijving achter knop */
.btn-desc {
    font-size: 0.85em;
    color: #555;
    white-space: nowrap;
    line-height: 1.2em; /* betere leesbaarheid */
}

button {
    display: block;
    margin: 0.5em 0;
    padding: 0.6em 1.2em;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    background: #1976d2;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
    min-width: 230px; /* vaste minimale breedte */
    text-align: left;
}

    /* hover effect voor enabled buttons */
    button:hover:not(:disabled) {
        background: #0d47a1;
    }

    /* disabled buttons duidelijk maken */
    button:disabled {
        background: #b0bec5; /* grijsachtig */
        color: #eceff1; /* lichtere tekst */
        cursor: not-allowed;
    }

/* Op schermen < 800px zet de uitleg op een nieuwe regel */
@media (max-width: 800px) {

    .buttons {
        margin-top: 1em;
        grid-gap:0.2em;
       
    }

    button {
        width: 90%;
    }
        .btn-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-desc {
        white-space: normal;
    }
}