/* === Mobiel (≤666px): scroll-container aanpak ===
   Body scrollt niet → body::before achtergrond blijft vast.
   #content-container scrollt als venster over de content.
   Voorkomt iOS Chrome-problemen met fixed elementen. */
@media (max-width: 666px) {
    #content-container {
        position: fixed;
        z-index: 1;
        inset: 0;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none;
    }
    #content-container::-webkit-scrollbar {
        display: none;
    }
    #content, #contentbreed {
        box-sizing: border-box;
        word-wrap: break-word;
        font-size: 12.5px;
        line-height: 18.75px;
        max-width: 96vw;
        margin: 65px 2vw 90px;
        padding: 10px;
    }
}

/* === Desktop (≥667px): body-scroll aanpak ===
   Achtergrond blijft staan via body::before (position:fixed).
   Content scrollt normaal mee met de pagina.
   Boven: ruimte voor menu (30px) + rolmenu (~35px).
   Onder: ruimte voor groentemenu + logos (~90px). */
@media (min-width: 667px) {
    #content, #contentbreed {
        box-sizing: border-box;
        word-wrap: break-word;
        padding: 10px;
        margin: 80px auto 90px;
        overflow: visible;
    }
    #content      { max-width: 600px; }
    #contentbreed { max-width: 90vw; }
}

@media (min-width: 667px) and (max-width: 833px) {
    #content, #contentbreed {
        font-size: 12.5px;
        line-height: 18.75px;
    }
    #content { max-width: 400px; }
}

@media (min-width: 834px) and (max-width: 1000px) {
    #content, #contentbreed {
        font-size: 12.5px;
        line-height: 18.75px;
    }
    #content { max-width: 500px; }
}

@media (min-width: 1001px) {
    #content, #contentbreed {
        font-size: 15px;
        line-height: 22.5px;
    }
    #content { max-width: 600px; }
}