/* ==========================================================
   FOLD LAYOUT
========================================================== */

/* ==========================================================
   GLOBAL PAGE WIDTH
   Eine einzige Breitenlogik für alle FOLD-Seiten
========================================================== */

:root{

    --fold-page-width:94vw;

    --fold-page-max-width:1680px;

    --fold-container-wide:1600px;

}

.fold-support-page,
.fold-events-page,
.fold-model-page,
.fold-safety-page,
.fold-cargo-page,
.fold-accessory-page,
.fold-about-page,
.fold-press-page,
.fold-privacy-page,
.fold-imprint-page,
.fold-dealers-page,
.fold-legal-page,
.fold-dealer-form-page,
.fold-contact-page,
.fold-recommend-page,
.fold-test-ride-page,
.fold-details-page{
    width:min(var(--fold-page-width),var(--fold-page-max-width));
    max-width:none;
    margin-left:auto;
    margin-right:auto;
}

.fold-clean .fc-section,
.fold-clean .fc-features{
    width:min(var(--fold-page-width),var(--fold-page-max-width));
    max-width:none;
    margin-left:auto;
    margin-right:auto;
}

/* Page */

.fold-page{
    width:100%;
    overflow:hidden;
}

/* Sections */

.fold-section{
    padding:120px 0;
}

.fold-section-small{
    padding:80px 0;
}

.fold-section-large{
    padding:160px 0;
}

/* Container */

.fold-container{
    width:min(100% - 48px,var(--fold-container));
    margin:0 auto;
}

.fold-container-wide{
    width:min(100% - 48px,var(--fold-container-wide));
    margin:0 auto;
}

.fold-content{
    max-width:720px;
}

/* Grid */

.fold-grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.fold-grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}

.fold-grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:32px;
}

/* Stack */

.fold-stack{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.fold-stack-large{
    display:flex;
    flex-direction:column;
    gap:48px;
}

@media (max-width:1024px){

    .fold-grid-2,
    .fold-grid-3,
    .fold-grid-4{
        grid-template-columns:1fr 1fr;
        gap:32px;
    }

    .fold-section{
        padding:96px 0;
    }

    .fold-section-large{
        padding:120px 0;
    }

}

@media (max-width:767px){

    .fold-grid-2,
    .fold-grid-3,
    .fold-grid-4{
        grid-template-columns:1fr;
        gap:24px;
    }

    .fold-section{
        padding:72px 0;
    }

    .fold-section-small{
        padding:56px 0;
    }

    .fold-section-large{
        padding:88px 0;
    }

    .fold-container,
    .fold-container-wide{
        width:min(100% - 32px,100%);
    }

}