/* Algemene reset en basisstijlen */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column; /* Zorgt ervoor dat header, main en footer onder elkaar staan */
    min-height: 100vh; /* Zorgt ervoor dat de body minimaal de hoogte van het viewport is */
/*    max-height: 80vh; /* Zorgt ervoor dat de body maximaal de hoogte van het viewport is */
/*    height:600px!important;
}

/* Bovenste menu */
.top-menu {
    position: sticky;/*fixed; /* */
    top: 0;
    left: 5%;
    background-color: #333;
    color: white;
    padding: 10px 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 5px;
    margin-top:-5px;
    margin-bottom:5px;
    margin-left:auto;
    margin-right:auto;
}

.top-menu nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Zorgt ervoor dat menu-items naast elkaar staan */
    justify-content: center; /* Centreer de menu-items */
    flex-wrap: wrap; /* Laat items naar de volgende regel gaan op kleine schermen */
}

.top-menu nav ul li {
    margin: 0 5px;
}

.top-menu nav ul li a {
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.top-menu nav ul li a:hover {
    background-color: #555;
}

/* Hoofdinhoud - Flexbox Container */
.main-content {
    display: flex; /* Maakt de linker- en rechterpanelen flex-items */
    flex: 1; /* Zorgt ervoor dat deze container de resterende ruimte inneemt */
    padding: 0px 10px 10px 10px;
    gap: 10px; /* Ruimte tussen de panelen */
    border-radius: 5px;
}

/* Linkerpaneel */
.left-panel {
    flex: 1; /* Neemt gelijke ruimte in op desktop */
    min-width: 45%; /* Minimale breedte voor het linkerpaneel */
    margin-left:auto;
    margin-right:auto;
    background-color: #fff;
    padding: 10px 10px 10px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Rechterpaneel */
.right-panel {
    flex: 1; /*3; /* Neemt meer ruimte in op desktop (3x de linkerpaneel breedte) */
/*    min-width: 55%; /* Minimale breedte voor het linkerpaneel */
    margin-left:auto;
    margin-right:auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Responsive aanpassingen voor kleinere schermen */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column; /* Zet linker- en rechterpaneel onder elkaar */
        padding: 15px;
        gap: 15px;
    }

    .left-panel,
    .right-panel {
        flex: none; /* Hef de flex-groei op */
        width: 100%; /* Maak beide panelen 100% breed */
    }

    .left-panel {
        order: 1; /* Zorg dat het linkerpaneel eerst komt (boven) */
        padding:0px;
    }

    .right-panel {
        order: 2; /* Zorg dat het rechterpaneel daarna komt (onder) */
        padding:10px;
        width:96%;
        margin-left:auto;
        margin-right:auto;
    }

    .top-menu nav ul {
/*        flex-direction: column; /* Menu-items onder elkaar op mobiel */
/*        align-items: center; /* Centreer de items */
    }

    .top-menu nav ul li {
/*        margin: 10px 0; /* Meer verticale ruimte tussen menu-items */
    }
}

/* Optioneel: Voor zeer kleine schermen (bijv. mobiel in portret) */
@media (max-width: 480px) {
    .top-menu {
/*        padding: 10px; */
    }
    .right-panel {
        order: 2; /* Zorg dat het rechterpaneel daarna komt (onder) */
        padding:10px;
        width:94%;
        margin-left:auto;
        margin-right:auto;
    }

}