@media only screen and (min-width: 800px) {

    /* ===== GRID STRUCTUUR ===== */
    .layout {
        display: grid;
        grid-template-columns: minmax(220px, 20%) 1fr;
        /* menu schaalt mee */
        column-gap: clamp(1rem, 2vw, 3rem);
        /* tussenruimte schaalt mee */
        align-items: start;
        max-width: 1600px;
        /* maximaal zo breed */
        margin: 0 auto;
        /* centreer op grote schermen */
        padding: 0 clamp(1rem, 3vw, 4rem);
        box-sizing: border-box;
    }

    /* ===== ZIJMENU ===== */
    .sidemenu {
        background-color: #C9A44C;
        /* goudkleur */
        padding: 0;
        margin: 0;
        list-style: none;
        border-right: 3px solid #B08A32;
    }

    .sidemenu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .sidemenu li a {
        display: block;
        color: #2B1F0D;
        text-decoration: none;
        padding: clamp(0.6em, 1vw, 1em) clamp(0.8em, 2vw, 2em);
        font-weight: bold;
        transition: background-color 0.3s, color 0.3s;
    }

    .sidemenu li a:hover {
        background-color: #B08A32;
        color: #fff;
    }

    /* ===== CONTENT ===== */
    .content {
        background-color: #FDFBF7;
        padding: clamp(1rem, 2vw, 3rem);
        box-sizing: border-box;
        min-width: 0;
        /* voorkomt overflow bij smalle schermen */
    }

    /* ===== TOPBALK ===== */
    .topbar {
        background-color: #C9A44C;
        border-bottom: 3px solid #B08A32;
    }

    .topbar-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1600px;
        margin: 0 auto;
        padding: 1em clamp(1rem, 3vw, 4rem);
        box-sizing: border-box;
    }

    /* ===== INFO BOX (rechts boven bij tekst) ===== */
    .info-box {
        background-color: #E6C76C;
        border: 2px solid #B08A32;
        border-radius: 12px;
        padding: 1em;
        text-align: center;
        color: #2B1F0D;
        font-weight: bold;
        float: right;
        width: clamp(150px, 18%, 220px);
        margin-left: 1em;
    }

}
@media (min-width: 800px) {
    :root {
        /* Sidebar schaalt mee: min 220px, max 320px of 22vw */
        --sidebar: clamp(220px, 22vw, 320px);
        --gap: clamp(16px, 2vw, 32px);
        --maxw: 1600px;
        /* maximale pagina-breedte op mega-schermen */
    }

    /* 1) Pagina-layout: grid met sidebar + content */
    .layout {
        display: grid;
        grid-template-columns: var(--sidebar) 1fr;
        column-gap: var(--gap);
        align-items: start;

        /* breedte van de hele pagina-inhoud */
        max-width: min(var(--maxw), 96vw);
        margin: 0 auto;
        padding-inline: var(--gap);
        box-sizing: border-box;
    }

    /* 2) Topbalk exact uitlijnen met dezelfde rail */
    .topbar {
        background: #C9A44C;
        border-bottom: 3px solid #B08A32;
    }

    .topbar-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: min(var(--maxw), 96vw);
        margin: 0 auto;
        /* zelfde zij-padding als layout */
        padding-inline: var(--gap);
        /* links dezelfde “offset” als sidebar + gap, zodat titel/mandje precies uitlijnen met content */
        padding-left: calc(var(--sidebar) + var(--gap));
        box-sizing: border-box;
    }

    /* 3) Sidebar + content basis */
    .sidemenu {
        background: #C9A44C;
        border-right: 3px solid #B08A32;
    }

    .sidemenu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .content {
        background: #fff;
        /* jouw witte middenvlak */
        padding: clamp(16px, 2vw, 32px);
        box-sizing: border-box;

        /* FORCEREN dat oude vaste breedtes geen grip hebben */
        width: auto !important;
        max-width: none !important;
    }

    /* 4) Veiligheidsnet tegen oude wrappers die het smal houden */
    #content,
    .wrapper,
    .container,
    .pagina,
    .main,
    .middle {
        width: auto !important;
        max-width: none !important;
    }
}