/* ==========================================
   TABLET (max-width: 992px)
========================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 992px) {

    /* Algemene layout */
    .container {
        width: 90%;
    }

    /* Header */
    .nav-links {
        gap: 1.5rem;
    }

    /* Hero */
    .hero h1 {
        font-size: 3rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    /* About */
    .about-content {
        gap: 3rem;
    }

    /* Book */
    .book-content {
        gap: 3rem;
    }

    /* Voor wie */
    .audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Blog */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Media */
    .media-buttons {
        flex-wrap: wrap;
    }
}


/* ==========================================
   MOBIEL (max-width: 768px)
========================================== */

@media (max-width: 768px) {

    /* Algemene layout */

    .container {
        width: 92%;
    }

    section {
        padding: 80px 0;
    }

    /* Header */

    .header-content {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    /* Hero */

    .hero {
        text-align: center;
    }

    .hero h1 {
        font-size: 2.4rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* About */

    .about-content {
        flex-direction: column;
        text-align: center;
    }

    .about-image img {
        max-width: 300px;
    }

    /* FNS uitleg */

    .fns-content {
        flex-direction: column;
    }

    /* Boek */

    .book-content {
        flex-direction: column;
        text-align: center;
    }

    .book-image img {
        max-width: 300px;
    }

    /* Voor wie */

    .audience-grid {
        grid-template-columns: 1fr;
    }

    /* Blog */

    .blog-grid {
        grid-template-columns: 1fr;
    }

    /* Media */

    .media-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* Footer */

    .footer-social {
        justify-content: center;
    }
}


/* ==========================================
   KLEINE SMARTPHONES (max-width: 480px)
========================================== */

@media (max-width: 480px) {

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .about-image img,
    .book-image img {
        max-width: 250px;
    }

}
@media (max-width: 800px) {
    .symptoms-section {
        padding: 90px 20px;
    }

    .symptoms-header {
        margin-bottom: 55px;
    }

    .symptoms-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .symptom-card,
    .symptom-card--thinking,
    .symptom-card--communication,
    .symptom-card--senses,
    .symptom-card--energy {
        grid-column: auto;
        width: 100%;
        margin-top: 0;
    }

    .symptom-card {
        padding: 36px 30px;
    }
}

@media (max-width: 480px) {
    .symptoms-section {
        padding: 72px 16px;
    }

    .symptoms-header h2 {
        font-size: 2.15rem;
    }

    .symptom-card {
        padding: 30px 24px;
        border-radius: 24px;
    }

    .symptom-card__icon {
        width: 52px;
        height: 52px;
    }
}

/* Minder beweging voor bezoekers die dit verkiezen */

@media (prefers-reduced-motion: reduce) {
    .symptom-card,
    .symptom-card__icon {
        transition: none;
    }

    .symptom-card:hover {
        transform: none;
    }

    .symptom-card:hover .symptom-card__icon {
        transform: none;
    }
}
@media (max-width: 700px) {
    .takeaway {
        margin-top: 90px;
        padding: 50px 26px;
        border-radius: 26px;
    }

    .takeaway h2 {
        margin-bottom: 28px;
    }

    .takeaway__content p {
        font-size: 1rem;
        line-height: 1.8;
    }
}
/* Mobiele weergave */
@media (max-width: 700px) {
    .misconceptions-section {
        padding: 65px 18px 90px;
    }

    .misconception-card {
        margin-top: 45px;
        padding: 40px 25px;
        border-radius: 22px;
    }
}
@media (max-width: 760px) {
    .book-themes {
        padding: 90px 18px;
    }

    .book-themes__grid {
        grid-template-columns: 1fr;
    }

    .book-theme-card {
        min-height: auto;
        padding: 38px 30px;
    }
}
/* Tablet en smartphone */
@media (max-width: 850px) {
    .book-preview {
        padding: 95px 18px;
    }

    .open-book {
        grid-template-columns: 1fr;
        max-width: 660px;
        gap: 24px;
        filter: drop-shadow(0 18px 30px rgba(76, 56, 51, 0.12));
    }

    .open-book::after {
        display: none;
    }

    .open-book__page {
        min-height: auto;
        padding: 52px 38px;
        border-radius: 26px;
    }

    .open-book__page--left,
    .open-book__page--right {
        border-radius: 26px;
    }

    .open-book__bookmark {
        right: 45px;
        bottom: -25px;
    }
}

@media (max-width: 520px) {
    .open-book__page {
        padding: 42px 26px;
    }

    .open-book__page p {
        font-size: 1rem;
        line-height: 1.85;
    }
}

@media(max-width:850px){

.audience-grid{

grid-template-columns:1fr;

}

}
@media (max-width: 950px) {

    .vriendjes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bink-kaart {
        grid-column: auto;
    }
}


/* =================================
   MOBIEL
================================= */

@media (max-width: 650px) {

    .dapperbos-hero {
        padding: 45px 15px;
    }

    .dapperbos-banner {
        border-radius: 18px;
    }

    .finn-intro {
        padding: 55px 15px;
    }

    .finn-intro-tekst {
        padding: 35px 22px;
        border-radius: 22px;
    }

    .vriendjes-sectie {
        padding: 65px 15px;
    }

    .vriendjes-grid {
        grid-template-columns: 1fr;
    }

    .vriendje-kaart {
        padding: 28px 22px;
    }

    .dapperbos-boodschap {
        padding: 60px 20px;
    }
}
    .finn-hero {
        width: calc(100% - 30px);
        margin: 30px auto;
        padding: 38px 24px;
    }

    .uitleg-kaart {
        padding: 35px 22px;
    }

    .berichtjes-sectie {
        padding: 65px 15px;
    }

    .berichtjes-illustratie {
        flex-direction: column;
    }

    .pijl {
        transform: rotate(90deg);
    }

    .dagen-grid {
        grid-template-columns: 1fr;
    }

    .finn-boodschap {
        width: calc(100% - 30px);
        margin: 55px auto;
        padding: 35px 22px;
    }

/* =================================
   TABLET
================================= */

@media (max-width: 1050px) {

    .finn-banner {
        grid-template-columns: 1fr 0.8fr;
    }

    .boomhuis-decoratie {
        display: none;
    }
}


/* =================================
   MOBIEL
================================= */

@media (max-width: 750px) {

    .finn-broodkruimel {
        padding: 16px 0;
        font-size: 0.88rem;
    }

    .finn-banner {
        grid-template-columns: 1fr;
        gap: 25px;

        width: calc(100% - 30px);
        margin-bottom: 45px;
        padding: 40px 24px;

        text-align: center;
        border-radius: 26px;
    }

    .finn-banner-afbeelding {
        order: -1;
    }

    .finn-banner-afbeelding img {
        width: min(78%, 310px);
    }

    .finn-banner-intro {
        margin-right: auto;
        margin-left: auto;
    }
}
/* =================================
   TABLET EN MOBIEL
================================= */

@media (max-width: 750px) {

    .finn-praat-kaart,
    .badge-kaart {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .finn-praat-kaart {
        padding: 35px 24px;
    }

    .badge-kaart {
        padding: 35px 24px;
    }

    .badge-cirkel {
        margin: 0 auto;
    }

    .finn-praat-tekst .finn-rustige-zin {
        text-align: left;
    }

    .voortgang-vriend {
        width: 86px;
    }
}

@media (max-width: 480px) {

    .vriendjes-voortgang {
        gap: 10px;
    }

    .voortgang-vriend {
        width: 76px;
        padding: 13px 6px;
    }

    .voortgang-vriend span {
        font-size: 1.65rem;
    }

    .voortgang-vriend p {
        font-size: 0.78rem;
    }
}
/* =================================
   TABLET
================================= */

@media (max-width: 1050px) {

    .dapperbos-kaart {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bink-plek {
        grid-column: auto;
    }
}


/* =================================
   MOBIEL
================================= */

@media (max-width: 620px) {

    .dapperbos-kaart-sectie {
        padding: 65px 15px;
    }

    .dapperbos-kaart {
        grid-template-columns: 1fr;
        padding: 28px 18px;
        border-radius: 28px;
    }

    .kaart-plek {
        min-height: auto;
    }

    .kaart-plek img {
        width: 135px;
        height: 135px;
    }

    .badge-overzicht {
        padding: 30px 18px;
    }

    .mini-badge {
        width: 92px;
    }
}
    .mini-badge {
        width: 120px;
        min-height: 135px;
    }

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .kaart-plek:hover,
    .kaart-plek:focus,
    .mini-badge.verdiend:hover,
    .mini-badge.verdiend:focus {
        transform: none;
    }
}
/* ==========================================
   Toegankelijkheid - Minder beweging
========================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    button:hover,
    a:hover,
    .kaart-plek:hover,
    .mini-badge:hover {
        transform: none !important;
    }
}
/* =========================================
   TABLET
========================================= */

@media (max-width: 850px) {

    .nova-banner,
    .nova-praat-kaart,
    .nova-afsluiting {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .nova-banner-afbeelding {
        order: -1;
    }

    .nova-afsluiting img {
        margin: 0 auto;
    }
}


/* =========================================
   MOBIEL
========================================= */


    .nova-broodkruimel {
        padding: 16px 0;
        font-size: 0.88rem;
    }

    .nova-banner {
        width: calc(100% - 30px);
        margin-bottom: 45px;
        padding: 40px 24px;

        text-align: center;
        border-radius: 26px;
    }

    .nova-banner-afbeelding img {
        width: min(78%, 300px);
    }

    .nova-banner-intro {
        margin-right: auto;
        margin-left: auto;
    }

    .nova-uitleg-kaart {
        padding: 36px 23px;
    }

    .lichtpuntjes-grid {
        grid-template-columns: 1fr;
    }

    .nova-praat-kaart {
        padding: 36px 24px;
    }

    .nova-badge-kaart {
        grid-template-columns: 1fr;
        padding: 36px 24px;
        text-align: center;
    }

    .nova-badge-cirkel {
        margin: 0 auto;
    }

    .nova-afsluiting {
        width: calc(100% - 30px);
        margin: 55px auto;
        padding: 36px 24px;
    }

/* =========================================
   MOBIEL
========================================= */

@media (max-width: 550px) {

    .dapperbos-footer {
        padding: 45px 16px 30px;
    }

    .footer-links {
        flex-direction: column;
        align-items: center;
    }

    .footer-link {
        width: min(100%, 280px);
    }
}
/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {

    .harty-banner,
    .lichaam-sectie,
    .harty-praat-kaart,
    .harty-afsluiting {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .harty-banner-afbeelding {
        order: -1;
    }

    .helpt-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .harty-afsluiting img {
        margin: 0 auto;
    }
}


/* =========================================
   MOBIEL
========================================= */


    .harty-broodkruimel {
        padding: 16px 0;
        font-size: 0.88rem;
    }

    .harty-banner {
        width: calc(100% - 30px);
        margin-bottom: 45px;
        padding: 40px 24px;

        text-align: center;
        border-radius: 26px;
    }

    .harty-banner-afbeelding img {
        width: min(78%, 300px);
    }

    .harty-banner-intro {
        margin-right: auto;
        margin-left: auto;
    }

    .harty-uitleg-kaart {
        padding: 36px 23px;
    }

    .gevoelens-grid,
    .lichaam-signalen,
    .helpt-grid {
        grid-template-columns: 1fr;
    }

    .harty-praat-kaart {
        padding: 36px 24px;
    }

    .harty-badge-kaart {
        grid-template-columns: 1fr;
        padding: 36px 24px;
        text-align: center;
    }

    .harty-badge-cirkel {
        margin: 0 auto;
    }

    .harty-afsluiting {
        width: calc(100% - 30px);
        margin: 55px auto;
        padding: 36px 24px;
    }

    .keuze-gevoel {
        width: 130px;
        min-height: 130px;
    }

/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {

    .donsje-banner,
    .lichaam-luisteren-sectie,
    .donsje-praat-kaart,
    .donsje-afsluiting {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .donsje-banner-afbeelding {
        order: -1;
    }

    .batterij-grid {
        grid-template-columns: 1fr;
    }

    .rust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .donsje-afsluiting img {
        margin: 0 auto;
    }
}


/* =========================================
   MOBIEL
========================================= */


    .donsje-broodkruimel {
        padding: 16px 0;
        font-size: 0.88rem;
    }

    .donsje-banner {
        width: calc(100% - 30px);
        margin-bottom: 45px;
        padding: 40px 24px;

        text-align: center;
        border-radius: 26px;
    }

    .donsje-banner-afbeelding img {
        width: min(78%, 300px);
    }

    .donsje-banner-intro {
        margin-right: auto;
        margin-left: auto;
    }

    .donsje-uitleg-kaart,
    .wolk-boodschap-kaart {
        padding: 36px 23px;
    }

    .rust-grid,
    .signalen-grid,
    .dagen-grid {
        grid-template-columns: 1fr;
    }

    .donsje-praat-kaart {
        padding: 36px 24px;
    }

    .donsje-badge-kaart {
        grid-template-columns: 1fr;
        padding: 36px 24px;
        text-align: center;
    }

    .donsje-badge-cirkel {
        margin: 0 auto;
    }

    .donsje-afsluiting {
        width: calc(100% - 30px);
        margin: 55px auto;
        padding: 36px 24px;
    }


/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {

    .blitz-banner,
    .kind-sectie,
    .blitz-praat-kaart,
    .blitz-afsluiting {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .blitz-banner-afbeelding {
        order: -1;
    }

    .erna-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blitz-afsluiting img {
        margin: 0 auto;
    }
}


/* =========================================
   MOBIEL
========================================= */


    .blitz-broodkruimel {
        padding: 16px 0;
        font-size: 0.88rem;
    }

    .blitz-banner {
        width: calc(100% - 30px);
        margin-bottom: 45px;
        padding: 40px 24px;

        text-align: center;
        border-radius: 26px;
    }

    .blitz-banner-afbeelding img {
        width: min(78%, 300px);
    }

    .blitz-banner-intro {
        margin-right: auto;
        margin-left: auto;
    }

    .blitz-uitleg-kaart,
    .hulp-vragen-kaart {
        padding: 36px 23px;
    }

    .signalen-grid,
    .wel-niet-grid,
    .erna-grid {
        grid-template-columns: 1fr;
    }

    .kind-stap {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .blitz-praat-kaart {
        padding: 36px 24px;
    }

    .blitz-badge-kaart {
        grid-template-columns: 1fr;
        padding: 36px 24px;
        text-align: center;
    }

    .blitz-badge-cirkel {
        margin: 0 auto;
    }

    .blitz-afsluiting {
        width: calc(100% - 30px);
        margin: 55px auto;
        padding: 36px 24px;
    }
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }

    .gevoel-kaart:hover,
    .stapper-banner-knop:hover,
    .stapper-terug-knop:hover {
        transform: none;
    }
}
/* ========================================
   TABLET
======================================== */

@media (max-width: 1000px) {

    .stapper-banner {
        padding: 60px 50px;

        grid-template-columns: 1fr 0.85fr;
    }

    .gevoel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hulpmiddelen-grid,
    .school-grid,
    .erna-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .berichtjes-sectie,
    .kind-sectie {
        grid-template-columns: 1fr;
    }

    .berichtjes-route {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }
}


/* ========================================
   MOBIEL EN KLEINE TABLET
======================================== */

@media (max-width: 760px) {

    .stapper-pagina-header {
        padding: 20px 16px 65px;
    }

    .stapper-broodkruimel {
        margin-bottom: 30px;
    }

    .stapper-banner {
        min-height: auto;
        padding: 48px 28px;

        grid-template-columns: 1fr;
        gap: 38px;

        text-align: center;

        border-radius: 30px;
    }

    .stapper-banner::after {
        display: none;
    }

    .stapper-banner-intro {
        margin-right: auto;
        margin-left: auto;
    }

    .stapper-banner-afbeelding {
        order: -1;
    }

    .stapper-banner-afbeelding img {
        max-height: 300px;
    }

    .stapper-uitleg,
    .gevoel-sectie,
    .berichtjes-sectie,
    .hulpmiddelen-sectie,
    .kind-sectie,
    .stapper-praat-sectie,
    .volwassene-sectie,
    .school-sectie,
    .hulp-vragen-sectie,
    .erna-sectie,
    .stapper-badge-sectie,
    .stapper-afsluiting {
        width: min(100% - 30px, 1180px);
    }

    .stapper-uitleg,
    .gevoel-sectie,
    .berichtjes-sectie,
    .hulpmiddelen-sectie,
    .kind-sectie,
    .stapper-praat-sectie,
    .volwassene-sectie,
    .school-sectie,
    .hulp-vragen-sectie,
    .erna-sectie,
    .stapper-badge-sectie {
        padding-top: 85px;
    }

    .stapper-uitleg-kaart,
    .hulp-vragen-kaart {
        padding: 45px 27px;
    }

    .gevoel-grid,
    .hulpmiddelen-grid,
    .wel-niet-grid,
    .school-grid,
    .erna-grid {
        grid-template-columns: 1fr;
    }

    .stapper-praat-kaart {
        padding: 43px 28px;

        grid-template-columns: 1fr;
        gap: 35px;

        text-align: center;
    }

    .stapper-praat-kaart img {
        max-height: 270px;
    }

    .stapper-badge-kaart {
        padding: 42px 28px;

        grid-template-columns: 1fr;

        text-align: center;
    }

    .stapper-badge-cirkel {
        margin: 0 auto;
    }

    .stapper-afsluiting {
        margin-bottom: 80px;
        padding: 44px 28px;

        grid-template-columns: 1fr;

        text-align: center;
    }

    .stapper-afsluiting img {
        max-height: 240px;
        margin: 0 auto;
    }
}


/* ========================================
   KLEINE SMARTPHONE
======================================== */

@media (max-width: 480px) {

    .stapper-banner h1 {
        font-size: 2.75rem;
    }

    .stapper-banner-knop,
    .stapper-terug-knop {
        width: 100%;
        padding-right: 18px;
        padding-left: 18px;
    }

    .gevoel-kaart,
    .hulpmiddel-kaart,
    .school-kaart,
    .erna-kaart,
    .hulp-kaart,
    .kind-stap,
    .klas-uitleg {
        padding: 26px 23px;
    }

    .kind-stap {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .kind-stap > span {
        margin: 0 auto;
    }

    .stapper-badge-cirkel {
        width: 125px;
        height: 125px;

        font-size: 3rem;
    }
}
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }

    .gevoel-kaart:hover,
    .bink-banner-knop:hover,
    .bink-terug-knop:hover {
        transform: none;
    }
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1000px) {

    .bink-banner {
        padding: 60px 50px;

        grid-template-columns: 1fr 0.85fr;
    }

    .gevoelens-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grenzen-grid,
    .school-grid,
    .vriendjes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .berichtjes-sectie,
    .hulpvragen-sectie {
        grid-template-columns: 1fr;
    }

    .gevoel-route,
    .zinnen-kaart {
        max-width: 650px;
        width: 100%;
        margin: 0 auto;
    }
}


/* ========================================
   MOBIEL EN KLEINE TABLET
======================================== */

@media (max-width: 760px) {

    .bink-pagina-header {
        padding: 20px 16px 65px;
    }

    .bink-broodkruimel {
        margin-bottom: 30px;
    }

    .bink-banner {
        min-height: auto;
        padding: 48px 28px;

        grid-template-columns: 1fr;
        gap: 38px;

        text-align: center;

        border-radius: 30px;
    }

    .bink-banner::after {
        display: none;
    }

    .bink-banner-intro {
        margin-right: auto;
        margin-left: auto;
    }

    .bink-banner-afbeelding {
        order: -1;
    }

    .bink-banner-afbeelding img {
        max-height: 300px;
    }

    .bink-uitleg,
    .gevoelens-sectie,
    .berichtjes-sectie,
    .grenzen-sectie,
    .hulpvragen-sectie,
    .bink-praat-sectie,
    .rustplan-sectie,
    .volwassene-sectie,
    .school-sectie,
    .vriendjes-sectie,
    .bink-badge-sectie,
    .bink-afsluiting {
        width: min(100% - 30px, 1180px);
    }

    .bink-uitleg,
    .gevoelens-sectie,
    .berichtjes-sectie,
    .grenzen-sectie,
    .hulpvragen-sectie,
    .bink-praat-sectie,
    .rustplan-sectie,
    .volwassene-sectie,
    .school-sectie,
    .vriendjes-sectie,
    .bink-badge-sectie {
        padding-top: 85px;
    }

    .bink-uitleg-kaart {
        padding: 45px 27px;
    }

    .gevoelens-grid,
    .grenzen-grid,
    .rustplan-grid,
    .wel-niet-grid,
    .school-grid,
    .vriendjes-grid {
        grid-template-columns: 1fr;
    }

    .bink-praat-kaart {
        padding: 43px 28px;

        grid-template-columns: 1fr;
        gap: 35px;

        text-align: center;
    }

    .bink-praat-kaart img {
        max-height: 270px;
    }

    .bink-badge-kaart {
        padding: 42px 28px;

        grid-template-columns: 1fr;

        text-align: center;
    }

    .bink-badge-cirkel {
        margin: 0 auto;
    }

    .bink-afsluiting {
        margin-bottom: 80px;
        padding: 44px 28px;

        grid-template-columns: 1fr;

        text-align: center;
    }

    .bink-afsluiting img {
        max-height: 240px;
        margin: 0 auto;
    }
}


/* ========================================
   KLEINE SMARTPHONE
======================================== */

@media (max-width: 480px) {

    .bink-banner h1 {
        font-size: 2.75rem;
    }

    .bink-banner-knop,
    .bink-terug-knop {
        width: 100%;
        padding-right: 18px;
        padding-left: 18px;
    }

    .gevoel-kaart,
    .grens-kaart,
    .school-kaart,
    .vriendje-kaart,
    .hulp-kaart,
    .rustplan-kaart,
    .klas-uitleg,
    .zinnen-kaart {
        padding: 26px 23px;
    }

    .rustplan-kaart {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .rustplan-nummer {
        margin: 0 auto;
    }

    .bink-badge-cirkel {
        width: 125px;
        height: 125px;

        font-size: 3rem;
    }
}
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1050px) {

    .kinderen-hero-grid,
    .echt-grid {
        grid-template-columns: 1fr 0.8fr;
        gap: 48px;
    }

    .berichtjes-grid,
    .klachten-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .helpen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   KLEINE TABLET
======================================== */

@media (max-width: 800px) {

    .kinderen-sectie {
        padding: 82px 0;
    }

    .kinderen-hero {
        padding: 82px 0;
    }

    .kinderen-hero-grid,
    .echt-grid,
    .aanvallen-grid,
    .vrienden-grid {
        grid-template-columns: 1fr;
    }

    .kinderen-hero-kaart {
        max-width: 580px;
        width: 100%;
        margin: 0 auto;
    }

    .school-grid {
        grid-template-columns: 1fr;
    }

    .medische-kaart {
        padding: 45px 32px;
    }
}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

    .kinderen-container,
    .kinderen-smal-container {
        width: min(100% - 30px, 1180px);
    }

    .kinderen-hero-tekst h1 {
        font-size: 2.75rem;
    }

    .berichtjes-grid,
    .klachten-grid,
    .helpen-grid {
        grid-template-columns: 1fr;
    }

    .berichtje-kaart,
    .klacht-kaart,
    .helpen-kaart {
        min-height: auto;
    }

    .kinderen-hero-kaart,
    .niet-jouw-schuld,
    .aanval-hulpkaart,
    .uitlegzinnen,
    .school-kaart {
        padding: 28px 24px;
    }

    .kinderen-knop {
        width: 100%;
    }

    .afsluiting-links {
        flex-direction: column;
    }

    .kinderen-link-knop {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1050px) {

    .tieners-hero-grid,
    .echt-grid {
        grid-template-columns: 1fr 0.8fr;
        gap: 48px;
    }

    .symptomen-grid,
    .gevoelens-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .helpen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   KLEINE TABLET
======================================== */

@media (max-width: 800px) {

    .tieners-sectie,
    .persoonlijk-sectie,
    .tieners-afsluiting {
        padding: 82px 0;
    }

    .tieners-hero {
        padding: 82px 0;
    }

    .tieners-hero-grid,
    .echt-grid,
    .aanvallen-grid,
    .vrienden-grid {
        grid-template-columns: 1fr;
    }

    .tieners-hero-kaart {
        max-width: 580px;
        width: 100%;
        margin: 0 auto;
    }

    .school-grid {
        grid-template-columns: 1fr;
    }

    .medische-kaart {
        padding: 45px 32px;
    }
}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

    .tieners-container,
    .tieners-smal-container {
        width: min(100% - 30px, 1180px);
    }

    .tieners-hero-tekst h1 {
        font-size: 2.8rem;
    }

    .symptomen-grid,
    .gevoelens-grid,
    .helpen-grid {
        grid-template-columns: 1fr;
    }

    .symptoom-kaart,
    .gevoel-kaart,
    .helpen-kaart {
        min-height: auto;
    }

    .tieners-hero-kaart,
    .misverstanden-kaart,
    .aanval-kaart,
    .uitlegzinnen,
    .school-kaart {
        padding: 28px 24px;
    }

    .tieners-knop {
        width: 100%;
    }

    .afsluiting-links {
        flex-direction: column;
    }

    .tieners-link-knop {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1050px) {

    .ouders-hero-grid {
        grid-template-columns: 1fr 0.8fr;
        gap: 48px;
    }

    .steun-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   KLEINE TABLET
======================================== */

@media (max-width: 800px) {

    .ouders-sectie,
    .persoonlijk-sectie,
    .ouders-afsluiting {
        padding: 82px 0;
    }

    .ouders-hero {
        padding: 82px 0;
    }

    .ouders-hero-grid,
    .uitleg-grid,
    .aanval-grid,
    .gezin-grid,
    .zelfzorg-grid {
        grid-template-columns: 1fr;
    }

    .ouders-hero-kaart {
        max-width: 580px;
        width: 100%;
        margin: 0 auto;
    }

    .wel-niet-grid,
    .school-grid {
        grid-template-columns: 1fr;
    }

    .medische-kaart {
        padding: 45px 32px;
    }
}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

    .ouders-container,
    .ouders-smal-container {
        width: min(100% - 30px, 1180px);
    }

    .ouders-hero-tekst h1 {
        font-size: 2.75rem;
    }

    .steun-grid {
        grid-template-columns: 1fr;
    }

    .steun-kaart {
        min-height: auto;
    }

    .ouders-hero-kaart,
    .uitleg-kaart,
    .gezin-kaart,
    .aanval-kaart,
    .hulp-kaart,
    .school-kaart,
    .zelfzorg-kaart {
        padding: 28px 24px;
    }

    .ouders-knop {
        width: 100%;
    }

    .afsluiting-links {
        flex-direction: column;
    }

    .ouders-link-knop {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1050px) {

    .scholen-hero-grid {
        grid-template-columns: 1fr 0.8fr;
        gap: 48px;
    }

    .steun-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aanpassingen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   KLEINE TABLET
======================================== */

@media (max-width: 800px) {

    .scholen-sectie,
    .persoonlijk-sectie,
    .scholen-afsluiting {
        padding: 82px 0;
    }

    .scholen-hero {
        padding: 82px 0;
    }

    .scholen-hero-grid,
    .uitleg-grid,
    .aanval-grid,
    .klas-grid,
    .samenwerking-grid {
        grid-template-columns: 1fr;
    }

    .scholen-hero-kaart {
        max-width: 580px;
        width: 100%;
        margin: 0 auto;
    }

    .plan-grid,
    .wel-niet-grid {
        grid-template-columns: 1fr;
    }

    .medische-kaart {
        padding: 45px 32px;
    }
}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

    .scholen-container,
    .scholen-smal-container {
        width: min(100% - 30px, 1180px);
    }

    .scholen-hero-tekst h1 {
        font-size: 2.75rem;
    }

    .steun-grid,
    .aanpassingen-grid {
        grid-template-columns: 1fr;
    }

    .steun-kaart,
    .aanpassing-kaart {
        min-height: auto;
    }

    .plan-kaart {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .plan-nummer {
        margin: 0 auto;
    }

    .scholen-hero-kaart,
    .uitleg-kaart,
    .klas-kaart,
    .aanval-kaart,
    .taal-kaart,
    .samenwerking-kaart {
        padding: 28px 24px;
    }

    .scholen-knop {
        width: 100%;
    }

    .afsluiting-links {
        flex-direction: column;
    }

    .scholen-link-knop {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1050px) {

    .zorg-hero-grid {
        grid-template-columns: 1fr 0.8fr;
        gap: 48px;
    }

    .behoeften-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .disciplines-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   KLEINE TABLET
======================================== */

@media (max-width: 800px) {

    .zorg-sectie,
    .persoonlijk-sectie,
    .zorg-afsluiting {
        padding: 82px 0;
    }

    .zorg-hero {
        padding: 82px 0;
    }

    .zorg-hero-grid,
    .diagnose-grid,
    .overschaduwing-grid,
    .aanval-grid,
    .comorbiditeit-grid {
        grid-template-columns: 1fr;
    }

    .zorg-hero-kaart {
        max-width: 580px;
        width: 100%;
        margin: 0 auto;
    }

    .wel-niet-grid,
    .consult-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

    .zorg-container,
    .zorg-smal-container {
        width: min(100% - 30px, 1180px);
    }

    .zorg-hero-tekst h1 {
        font-size: 2.7rem;
    }

    .behoeften-grid,
    .disciplines-grid {
        grid-template-columns: 1fr;
    }

    .behoefte-kaart,
    .discipline-kaart {
        min-height: auto;
    }

    .consult-kaart,
    .samenvatting-kaart {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .consult-nummer,
    .samenvatting-kaart strong {
        margin: 0 auto;
    }

    .zorg-hero-kaart,
    .diagnose-kaart,
    .overschaduwing-kaart,
    .comorbiditeit-kaart,
    .aanval-kaart,
    .taal-kaart {
        padding: 28px 24px;
    }

    .zorg-knop {
        width: 100%;
    }

    .afsluiting-links {
        flex-direction: column;
    }

    .zorg-link-knop {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1050px) {

    .achter-hero-grid {
        grid-template-columns: 1fr 0.8fr;
        gap: 48px;
    }

    .ontstaan-grid,
    .doelgroepen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   KLEINE TABLET
======================================== */

@media (max-width: 800px) {

    .achter-sectie,
    .persoonlijk-sectie,
    .achter-afsluiting {
        padding: 82px 0;
    }

    .achter-hero {
        padding: 82px 0;
    }

    .achter-hero-grid,
    .dapperbos-grid,
    .perspectief-grid,
    .delen-grid {
        grid-template-columns: 1fr;
    }

    .achter-hero-kaart {
        max-width: 580px;
        width: 100%;
        margin: 0 auto;
    }
}
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1050px) {

    .achter-hero-grid {
        grid-template-columns: 1fr 0.8fr;
        gap: 48px;
    }

    .ontstaan-grid,
    .doelgroepen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   KLEINE TABLET
======================================== */

@media (max-width: 800px) {

    .achter-sectie,
    .persoonlijk-sectie,
    .achter-afsluiting {
        padding: 82px 0;
    }

    .achter-hero {
        padding: 82px 0;
    }

    .achter-hero-grid,
    .dapperbos-grid,
    .perspectief-grid,
    .delen-grid {
        grid-template-columns: 1fr;
    }

    .achter-hero-kaart {
        max-width: 580px;
        width: 100%;
        margin: 0 auto;
    }
}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

    .achter-container,
    .achter-smal-container {
        width: min(100% - 30px, 1180px);
    }

    .achter-hero-tekst h1 {
        font-size: 2.75rem;
    }

    .ontstaan-grid,
    .rust-grid,
    .doelgroepen-grid {
        grid-template-columns: 1fr;
    }

    .ontstaan-kaart,
    .rust-kaart,
    .doelgroep-kaart {
        min-height: auto;
    }

    .achter-hero-kaart,
    .dapperbos-kaart,
    .perspectief-kaart,
    .delen-kaart {
        padding: 28px 24px;
    }

    .achter-knop {
        width: 100%;
    }

    .afsluiting-links {
        flex-direction: column;
    }

    .achter-link-knop {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1050px) {

    .contact-hero-grid {
        grid-template-columns: 1fr 0.8fr;
        gap: 48px;
    }

    .contactredenen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   KLEINE TABLET
======================================== */

@media (max-width: 800px) {

    .contact-sectie,
    .contact-afsluiting {
        padding: 82px 0;
    }

    .contact-hero {
        padding: 82px 0;
    }

    .contact-hero-grid,
    .formulier-grid,
    .verhaal-grid,
    .professioneel-grid {
        grid-template-columns: 1fr;
    }

    .contact-hero-kaart {
        max-width: 580px;
        width: 100%;
        margin: 0 auto;
    }

    .contactformulier {
        max-width: 680px;
        width: 100%;
        margin: 0 auto;
    }
}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

    .contact-container,
    .contact-smal-container {
        width: min(100% - 30px, 1180px);
    }

    .contact-hero-tekst h1 {
        font-size: 2.75rem;
    }

    .contactredenen-grid {
        grid-template-columns: 1fr;
    }

    .contactreden-kaart {
        min-height: auto;
    }

    .contact-hero-kaart,
    .contactformulier,
    .verhaal-kaart,
    .professioneel-kaart,
    .reactietijd-kaart,
    .medische-contactkaart {
        padding: 28px 24px;
    }

    .contact-knop,
    .contact-link-knop,
    .formulier-verzendknop {
        width: 100%;
    }

    .sociale-links {
        flex-direction: column;
    }

    .sociale-link {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1050px) {

    .naasten-hero-grid {
        grid-template-columns: 1fr 0.8fr;
        gap: 48px;
    }

    .steun-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .familie-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   KLEINE TABLET
======================================== */

@media (max-width: 800px) {

    .naasten-sectie,
    .persoonlijk-sectie,
    .naasten-afsluiting {
        padding: 82px 0;
    }

    .naasten-hero {
        padding: 82px 0;
    }

    .naasten-hero-grid,
    .uitleg-grid,
    .aanval-grid,
    .partner-grid,
    .ouders-grid,
    .gezin-grid,
    .zelfzorg-grid {
        grid-template-columns: 1fr;
    }

    .naasten-hero-kaart {
        max-width: 580px;
        width: 100%;
        margin: 0 auto;
    }

    .wel-niet-grid,
    .plan-grid {
        grid-template-columns: 1fr;
    }

    .medische-kaart {
        padding: 45px 32px;
    }
}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

    .naasten-container,
    .naasten-smal-container {
        width: min(100% - 30px, 1180px);
    }

    .naasten-hero-tekst h1 {
        font-size: 2.7rem;
    }

    .steun-grid,
    .familie-grid {
        grid-template-columns: 1fr;
    }

    .steun-kaart,
    .familie-kaart {
        min-height: auto;
    }

    .plan-kaart {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .plan-nummer {
        margin: 0 auto;
    }

    .naasten-hero-kaart,
    .uitleg-kaart,
    .partner-kaart,
    .ouders-kaart,
    .gezin-kaart,
    .aanval-kaart,
    .taal-kaart,
    .zelfzorg-kaart {
        padding: 28px 24px;
    }

    .naasten-knop {
        width: 100%;
    }

    .afsluiting-links {
        flex-direction: column;
    }

    .naasten-link-knop {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1050px) {

    .naasten-hero-grid {
        grid-template-columns: 1fr 0.8fr;
        gap: 48px;
    }

    .steun-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .familie-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   KLEINE TABLET
======================================== */

@media (max-width: 800px) {

    .naasten-sectie,
    .persoonlijk-sectie,
    .naasten-afsluiting {
        padding: 82px 0;
    }

    .naasten-hero {
        padding: 82px 0;
    }

    .naasten-hero-grid,
    .uitleg-grid,
    .aanval-grid,
    .partner-grid,
    .ouders-grid,
    .gezin-grid,
    .zelfzorg-grid {
        grid-template-columns: 1fr;
    }

    .naasten-hero-kaart {
        max-width: 580px;
        width: 100%;
        margin: 0 auto;
    }

    .wel-niet-grid,
    .plan-grid {
        grid-template-columns: 1fr;
    }

    .medische-kaart {
        padding: 45px 32px;
    }
}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

    .naasten-container,
    .naasten-smal-container {
        width: min(100% - 30px, 1180px);
    }

    .naasten-hero-tekst h1 {
        font-size: 2.7rem;
    }

    .steun-grid,
    .familie-grid {
        grid-template-columns: 1fr;
    }

    .steun-kaart,
    .familie-kaart {
        min-height: auto;
    }

    .plan-kaart {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .plan-nummer {
        margin: 0 auto;
    }

    .naasten-hero-kaart,
    .uitleg-kaart,
    .partner-kaart,
    .ouders-kaart,
    .gezin-kaart,
    .aanval-kaart,
    .taal-kaart,
    .zelfzorg-kaart {
        padding: 28px 24px;
    }

    .naasten-knop {
        width: 100%;
    }

    .afsluiting-links {
        flex-direction: column;
    }

    .naasten-link-knop {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1050px) {

    .over-hero-grid {
        grid-template-columns: 0.85fr 1.15fr;
        gap: 48px;
    }

    .missie-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   KLEINE TABLET
======================================== */

@media (max-width: 800px) {

    .over-sectie,
    .persoonlijk-sectie,
    .over-afsluiting {
        padding: 82px 0;
    }

    .over-hero {
        padding: 82px 0;
    }

    .over-hero-grid,
    .verhaal-grid,
    .fns-grid,
    .schrijven-grid,
    .spreken-grid {
        grid-template-columns: 1fr;
    }

    .over-foto {
        max-width: 440px;
    }

    .over-hero-tekst {
        text-align: center;
    }

    .over-hero-tekst p:not(.over-label) {
        margin-right: auto;
        margin-left: auto;
    }

    .over-hero-knoppen {
        justify-content: center;
    }
}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

    .over-container,
    .over-smal-container {
        width: min(100% - 30px, 1180px);
    }

    .over-hero-tekst h1 {
        font-size: 2.75rem;
    }

    .missie-grid {
        grid-template-columns: 1fr;
    }

    .missie-kaart {
        min-height: auto;
    }

    .verhaal-kaart,
    .fns-kaart,
    .schrijven-kaart,
    .spreken-kaart {
        padding: 28px 24px;
    }

    .over-hero-knoppen,
    .afsluiting-links {
        flex-direction: column;
    }

    .over-knop,
    .over-link-knop {
        width: 100%;
    }
}
/* Mobiele weergave – kaarten rustig onder elkaar */
@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .doelgroep-grid,
    .fns-home__grid,
    .blog-home__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        width: 100%;
    }

    .fns-card,
    .blog-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        box-sizing: border-box;
    }

    .fns-card__link,
    .blog-card__link {
        display: block;
        width: 100%;
        padding: 24px 20px;
        box-sizing: border-box;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .fns-card h3,
    .blog-card h3 {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .fns-card p,
    .blog-card p {
        font-size: 1rem;
        line-height: 1.7;
    }
}
/* Homepage – doelgroepkaarten op mobiel */
@media (max-width: 768px) {
    .doelgroep .doelgroep-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    .doelgroep .fns-card,
    .doelgroep .fns-card__link {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .doelgroep .fns-card__link {
        padding: 1.5rem;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
    }
}
/* Introblok homepage op gsm */
@media (max-width: 768px) {

    .about-home {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 40px 20px;
        box-sizing: border-box;
        gap: 28px;
    }
}

    .about-home__image,
    .about-home__content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    .about-home__image {
        text-align: center;
    }

    .about-home__image img {
        display: block;
        width: min(260px, 100%);
        height: auto;
        margin: 0 auto;
    }

    .about-home__content {
        padding: 0;
    }

    .about-home__content h2 {
        font-size: clamp(2.4rem, 12vw, 3.5rem);
        line-height: 1.12;
        overflow-wrap: normal;
        word-break: normal;
    }

    .about-home__intro,
    .about-home__content p {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .about-home__intro {
        padding: 18px 0 18px 22px;
    }

    /* ==========================================
   FIX BOEKSECTIE OP TABLET EN GSM
========================================== */

@media (max-width: 900px) {

    .boek-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2.5rem !important;
        width: 100% !important;
        margin-top: 2.5rem !important;
    }

    .boek-cover,
    .boek-tekst {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .boek-cover {
        display: flex !important;
        justify-content: center !important;
    }

    .boek-cover img {
        width: min(100%, 340px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .boek-tekst {
        text-align: center !important;
        padding: 0 0.5rem !important;
    }

    .boek-tekst h2,
    .boek-tekst p {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* Extra aanpassing voor smalle smartphones */

@media (max-width: 480px) {

    .boek {
        padding: 4rem 0 !important;
        overflow-x: hidden;
    }

    .boek .container {
        width: calc(100% - 30px) !important;
    }

    .boek-content {
        gap: 2rem !important;
    }

    .boek-cover img {
        width: min(100%, 300px) !important;
    }

    .boek-tekst h2 {
        font-size: clamp(1.9rem, 9vw, 2.5rem) !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere;
    }

    .boek-tekst p {
        font-size: 1rem !important;
        line-height: 1.75 !important;
    }

    .boek-tekst .button {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}
/* ==========================================
   BOEKPAGINA – HERO OP TABLET EN GSM
========================================== */

@media (max-width: 768px) {

    .book-hero {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;

        padding: 55px 16px 70px !important;
        margin: 0 !important;

        overflow: hidden !important;
        background-color: #fffaf7 !important;
    }

    .book-hero__overlay {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        order: 1 !important;

        width: min(100%, 620px) !important;
        max-width: 100% !important;

        margin: 0 auto 35px !important;
        padding: 0 !important;

        text-align: center !important;
        transform: none !important;
    }

    .book-hero__overlay .section-label {
        display: block !important;
        max-width: 100% !important;
        margin: 0 auto 22px !important;

        font-size: 0.8rem !important;
        line-height: 1.7 !important;
        letter-spacing: 0.16em !important;
    }

    .book-hero__overlay h1 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto 25px !important;

        font-size: clamp(2.7rem, 13vw, 4.4rem) !important;
        line-height: 1.02 !important;

        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .book-subtitle {
        width: min(100%, 520px) !important;
        max-width: 100% !important;

        margin: 0 auto 28px !important;

        font-size: 1rem !important;
        line-height: 1.75 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    .book-button {
        display: inline-flex !important;
        min-height: 50px !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 auto !important;
        padding: 12px 25px !important;
    }

    .book-hero__image {
        position: static !important;

        order: 2 !important;

        display: block !important;

        width: min(100%, 680px) !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 auto !important;

        object-fit: contain !important;
        object-position: center !important;

        transform: none !important;
    }
}


/* Extra bescherming voor zeer smalle gsm's */

@media (max-width: 430px) {

    .book-hero {
        padding: 45px 14px 60px !important;
    }

    .book-hero__overlay {
        margin-bottom: 28px !important;
    }

    .book-hero__overlay h1 {
        font-size: clamp(2.4rem, 14vw, 3.5rem) !important;
    }

    .book-subtitle {
        font-size: 0.98rem !important;
        line-height: 1.7 !important;
    }

    .book-button {
        width: 100% !important;
        max-width: 290px !important;
    }
}
/* Homepage boeksectie zonder cover */

.boek-content {
    display: block;
}

.boek-tekst {
    width: min(100%, 760px);
    max-width: 760px;
    margin: 3rem auto 0;
    text-align: center;
}

@media (max-width: 768px) {

    .boek-content,
    .boek-tekst {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .boek-tekst {
        padding: 0 0.5rem !important;
        text-align: left !important;
    }

    .boek-tekst p {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 1rem !important;
        line-height: 1.8 !important;
    }

    .boek-tekst .button {
        display: block;
        width: min(100%, 300px);
        margin: 2rem auto 0;
        text-align: center;
    }
}
/* ========================================
   HOMEPAGE – DAPPERBOS OP TABLET EN GSM
========================================= */

@media (max-width: 768px) {

    .dapperbos-uitleg {
        padding: 4.5rem 1rem;
    }

    .dapperbos-uitleg__intro {
        margin-bottom: 2.25rem;
    }

    .dapperbos-uitleg__kaart {
        grid-template-columns: 1fr;
        gap: 1.75rem;

        padding: 2.25rem 1.4rem;
        text-align: center;
    }

    .dapperbos-uitleg__icoon {
        width: 90px;
        height: 90px;
        margin: 0 auto;
        font-size: 3rem;
    }

    .dapperbos-uitleg__kernzin {
        text-align: left;
    }

    .dapperbos-uitleg__tekst .button {
        justify-content: center;
        width: min(100%, 300px);
    }
}

@media (max-width: 430px) {

    .dapperbos-uitleg {
        padding: 4rem 0.9rem;
    }

    .dapperbos-uitleg__kaart {
        padding: 2rem 1.1rem;
        border-radius: 22px;
    }

    .dapperbos-uitleg__lead,
    .dapperbos-uitleg__tekst p {
        font-size: 1rem;
        line-height: 1.75;
    }
}
/* ========================================
   DAPPERBOS-WELKOM – TABLET EN GSM
========================================= */

@media (max-width: 850px) {

    .dapperbos-welkom {
        padding: 4.5rem 1rem;
    }

    .dapperbos-welkom__container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .dapperbos-welkom__inhoud {
        max-width: 720px;
        margin: 0 auto;
    }

    .dapperbos-welkom__afbeelding img {
        width: min(82%, 340px);
    }

    .dapperbos-welkom__quote {
        text-align: left;
    }
}

@media (max-width: 480px) {

    .dapperbos-welkom {
        padding: 4rem 0.9rem;
    }

    .dapperbos-welkom__container {
        gap: 2rem;
    }

    .dapperbos-welkom__afbeelding img {
        width: min(92%, 300px);
        border-radius: 22px;
    }

    .dapperbos-welkom__intro,
    .dapperbos-welkom__uitleg p {
        font-size: 1rem;
        line-height: 1.75;
    }

    .dapperbos-welkom__quote {
        padding: 1.1rem 1.2rem;
    }

    .dapperbos-welkom__knop {
        width: 100%;
    }
}
/* =========================================
   FNS pagina - Symptomen kaarten mobiel
========================================= */

@media (max-width: 768px) {

    .symptomen-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}
/* FNS – symptomenkaarten op Android/gsm */
@media screen and (max-width: 768px) {

    .symptomen-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .symptomen-grid > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}
/* =========================================
   RESPONSIVE – TABLET
========================================= */

@media (max-width: 980px) {

    .header-inner {
        padding-block: 1rem;
        flex-direction: column;
    }

    .main-nav {
        justify-content: center;
    }

    .media-hero__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .media-hero__intro {
        margin-inline: auto;
    }

    .media-hero__buttons {
        justify-content: center;
    }

    .media-hero__image {
        order: -1;
    }

    .media-hero__image img {
        width: min(75%, 340px);
    }

   .media-two-columns {
    grid-template-columns: 1fr;
    gap: 3rem;
}

    .media-book__content {
        max-width: 760px;
        margin-inline: auto;
    }

    .media-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .media-contact__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .media-contact p {
        margin-inline: auto;
    }
}


/* =========================================
   RESPONSIVE – GSM
========================================= */

@media (max-width: 680px) {

    .media-container,
    .header-inner {
        width: min(100% - 2rem, 1160px);
    }

    .media-section {
        padding: 4.5rem 0;
    }

    .media-hero {
        padding: 4rem 0 4.5rem;
    }

    .media-hero h1 {
        font-size: clamp(3rem, 17vw, 4.8rem);
    }

    .media-hero__intro {
        font-size: 1rem;
        line-height: 1.75;
    }

    .media-hero__buttons {
        flex-direction: column;
    }

    .media-button {
        width: 100%;
    }

    .main-nav {
        gap: 0.9rem 1.1rem;
    }

    .main-nav a {
        font-size: 0.9rem;
    }

    .media-card-grid,
    .media-topic-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .media-card {
        padding: 1.6rem;
    }

    .media-topic {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 1.1rem;
    }

    .media-download-box {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .media-download-box__icon {
        margin-inline: auto;
    }

    .media-facts {
        padding: 1.5rem;
    }

    .media-facts dl > div {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .media-quote,
    .media-big-quote {
        padding: 1.35rem;
    }

    .media-book__image img {
        width: min(82%, 280px);
    }
}


/* =========================================
   EXTRA KLEINE SCHERMEN
========================================= */

@media (max-width: 420px) {

    .media-section {
        padding: 4rem 0;
    }

    .media-hero__image img {
        width: min(90%, 300px);
    }

    .media-section p,
    .media-contact p {
        font-size: 1rem;
        line-height: 1.75;
    }

    .media-section h2,
    .media-contact h2 {
        font-size: 2rem;
    }
}


/* =========================================
   MINDER BEWEGING
========================================= */

@media (prefers-reduced-motion: reduce) {

    .media-button,
    .media-card,
    .main-nav a::after {
        transition: none;
    }

    .media-button:hover,
    .media-card:hover {
        transform: none;
    }
}
/*==============================
MOBIEL
==============================*/

@media(max-width:900px){

.media-grid{

grid-template-columns:1fr;

}

.media-header h2{

font-size:40px;

}

.media-contact{

padding:45px 25px;

}

}
/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .header-inner {
        padding-block: 1rem;
        flex-direction: column;
    }

    .main-nav {
        justify-content: center;
    }

    .media-two-columns {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .media-card-grid,
    .media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .media-download-box {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .media-download-box__icon {
        margin-inline: auto;
    }

    .media-contact__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .media-contact p {
        margin-inline: auto;
    }
}


/* =========================================================
   GSM
========================================================= */

@media (max-width: 680px) {

    .media-container,
    .header-inner,
    .media-availability {
        width: min(100% - 2rem, 1160px);
    }

    .media-section,
    .media-availability {
        padding: 4.5rem 0;
    }

    .media-hero {
        padding: 4.5rem 0;
    }

    .media-hero h1 {
        font-size: clamp(3rem, 17vw, 4.8rem);
    }

    .media-hero__intro {
        font-size: 1rem;
        line-height: 1.75;
    }

    .media-hero__buttons {
        flex-direction: column;
    }

    .media-button,
    .media-btn {
        width: 100%;
    }

    .main-nav {
        gap: 0.9rem 1.1rem;
    }

    .main-nav a {
        font-size: 0.9rem;
    }

    .media-card-grid,
    .media-grid,
    .media-topic-grid {
        grid-template-columns: 1fr;
    }

    .media-card {
        padding: 1.6rem;
    }

    .media-topic {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 1.1rem;
    }

    .media-facts {
        padding: 1.5rem;
    }

    .media-facts dl > div {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .media-quote,
    .media-big-quote {
        padding: 1.4rem;
    }

    .availability-contact {
        margin-top: 3.5rem;
        padding: 2.5rem 1.25rem;
        border-radius: 22px;
    }

    .media-contact {
        padding: 4rem 0;
    }
}


/* =========================================================
   EXTRA KLEINE SCHERMEN
========================================================= */

@media (max-width: 420px) {

    .media-section,
    .media-availability {
        padding: 4rem 0;
    }

    .media-section p,
    .media-contact p,
    .media-header p {
        font-size: 1rem;
        line-height: 1.75;
    }

    .media-section h2,
    .media-contact h2,
    .media-header h2 {
        font-size: 2rem;
    }

    .media-big-quote {
        font-size: 1.15rem;
    }
}


/* =========================================================
   MINDER BEWEGING
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .media-button,
    .media-btn,
    .media-card,
    .main-nav a::after {
        transition: none;
    }

    .media-button:hover,
    .media-btn:hover,
    .media-card:hover {
        transform: none;
    }
}
/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .media-resources__grid {
        grid-template-columns: 1fr;
    }

    .media-resource-request {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .media-resource-request .media-button {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

@media (max-width: 680px) {

    .media-resource-card,
    .media-resource-request {
        grid-template-columns: 1fr;
        padding: 1.6rem;
        text-align: center;
    }

    .media-resource-card__icon,
    .media-resource-request__icon {
        margin-inline: auto;
    }

    .media-resource-list {
        display: inline-grid;
        text-align: left;
    }

    .media-resource-card .media-button,
    .media-resource-request .media-button {
        width: 100%;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .header-inner {
        padding-block: 1rem;
        flex-direction: column;
    }

    .main-nav {
        justify-content: center;
    }

    .insights-featured-grid {
        grid-template-columns: 1fr;
        max-width: 760px;
        margin-inline: auto;
    }

    .insights-card {
        min-height: auto;
    }

    .insights-story__layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        max-width: 820px;
    }

    .insights-story__meta {
        position: static;

        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.75rem 1.5rem;
        align-items: center;
    }

    .insights-story__meta p,
    .insights-story__meta a {
        margin: 0;
    }

    .insights-contact__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .insights-contact p {
        margin-inline: auto;
    }
}


/* =========================================================
   GSM
========================================================= */

@media (max-width: 680px) {

    .insights-container,
    .header-inner {
        width: min(100% - 2rem, 1160px);
    }

    .insights-section,
    .insights-story {
        padding: 4.5rem 0;
    }

    .insights-hero {
        padding: 5rem 0;
    }

    .insights-hero h1 {
        font-size: clamp(3rem, 15vw, 4.6rem);
    }

    .insights-hero__intro {
        font-size: 1rem;
        line-height: 1.75;
    }

    .insights-button {
        width: 100%;
    }

    .main-nav {
        gap: 0.9rem 1.1rem;
    }

    .main-nav a {
        font-size: 0.9rem;
    }

    .insights-card,
    .insights-small-card {
        padding: 1.6rem;
    }

    .insights-small-grid {
        grid-template-columns: 1fr;
    }

    .insights-story__meta {
        display: block;
        padding: 1.25rem;
    }

    .insights-story__meta p {
        margin-bottom: 0.8rem;
    }

    .insights-story__content blockquote,
    .insights-quote {
        padding: 1.35rem;
    }

    .insights-contact {
        padding: 4rem 0;
    }
}


/* =========================================================
   EXTRA KLEINE SCHERMEN
========================================================= */

@media (max-width: 420px) {

    .insights-section,
    .insights-story {
        padding: 4rem 0;
    }

    .insights-section p,
    .insights-story p,
    .insights-contact p {
        font-size: 1rem;
        line-height: 1.75;
    }

    .insights-section h2,
    .insights-story h2,
    .insights-contact h2 {
        font-size: 2rem;
    }

    .insights-story__lead {
        font-size: 1.1rem !important;
    }
}


/* =========================================================
   MINDER BEWEGING
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .insights-button,
    .insights-card,
    .main-nav a::after {
        transition: none;
    }

    .insights-button:hover,
    .insights-card:hover {
        transform: none;
    }
}
@media (max-width: 900px) {
    .site-header,
    header.site-header {
        min-height: auto !important;
        padding: 45px 20px 35px !important;
    }

    .site-intro h1 {
        margin-bottom: 28px !important;
        font-size: clamp(3rem, 12vw, 4.2rem) !important;
    }

    .site-divider {
        margin: 55px auto 35px !important;
    }

    .main-nav {
        gap: 22px 28px !important;
    }
}

@media (max-width: 600px) {
    .site-intro > p:not(.site-motto):not(.site-values) {
        font-size: 1rem !important;
    }

    .site-motto {
        font-size: 1.45rem !important;
    }

    .site-values {
        font-size: 0.9rem !important;
        letter-spacing: 0.1em !important;
    }

    .main-nav {
        gap: 18px 22px !important;
    }

    .main-nav a {
        font-size: 0.95rem !important;
    }
}
/* =========================================
   PERS & MEDIA - MOBIEL
========================================= */

@media screen and (max-width: 768px) {

    .media-two-columns,
    .media-two-columns--bio {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    .media-highlight,
    .media-facts {
        width: 100%;
    }

}
/* =========================================
   INZICHTEN - MOBIEL
========================================= */

@media screen and (max-width: 768px) {

    .insights-featured-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

}