/* ==================================================
   GEMEINSAME AUSRICHTUNG
   Leistungen – Referenzen – News
================================================== */

:root {
    /*
     * Gemeinsame linke Inhaltskante.
     * -24px verschiebt alles etwas weiter nach links.
     */
    --we-alignment-shift: -24px;

    --we-alignment-left: max(
        24px,
        calc(
            (100vw - 1200px) / 2
            + 40px
            + var(--we-alignment-shift)
        )
    );
}

/* ==================================================
   TITEL
================================================== */

/*
 * Alle Titel aus ihren unterschiedlichen Contao-
 * Containern lösen und auf die gleiche Bildschirmkante setzen.
 */
#leistungen .we-services-slider > h2,
#referenzen .ce_headline,
#neu > .ce_headline {
    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 80px !important;

    padding-left: var(--we-alignment-left) !important;
    padding-right: 24px !important;

    text-align: left !important;
    box-sizing: border-box !important;
}

/* ==================================================
   LEISTUNGSKARTEN
================================================== */

#leistungen .we-services-track {
    padding-left: var(--we-alignment-left) !important;
    padding-right: var(--we-alignment-left) !important;

    scroll-padding-left: var(--we-alignment-left) !important;
    box-sizing: border-box !important;
}

/* ==================================================
   NEWSKARTEN
================================================== */

#neu .mod_newslist {
    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding-left: var(--we-alignment-left) !important;
    padding-right: var(--we-alignment-left) !important;

    scroll-padding-left: var(--we-alignment-left) !important;
    box-sizing: border-box !important;
}

/* ==================================================
   REFERENZKARTEN
================================================== */

#referenzen .flip-gallery {
    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding-left: var(--we-alignment-left) !important;
    padding-right: 24px !important;

    justify-content: start !important;
    justify-items: start !important;

    box-sizing: border-box !important;
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {

    :root {
        --we-alignment-left: 24px;
    }

    #leistungen .we-services-slider > h2,
    #referenzen .ce_headline,
    #neu > .ce_headline {
        margin-bottom: 56px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    #leistungen .we-services-track,
    #neu .mod_newslist,
    #referenzen .flip-gallery {
        padding-left: 24px !important;
        padding-right: 24px !important;
        scroll-padding-left: 24px !important;
    }
}

/* ==================================================
   NEWS – ERSTE KARTE EXAKT UNTER DEM TITEL
================================================== */

#neu .mod_newslist {
    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding-left: var(--we-alignment-left) !important;
    padding-right: var(--we-alignment-left) !important;

    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

/* Mögliche zusätzliche Contao-Wrapper neutralisieren */
#neu .mod_newslist > .inside,
#neu .mod_newslist .inside {
    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Erste Karte darf keinen zusätzlichen Abstand haben */
#neu .mod_newslist > .listing-card:first-child {
    margin-left: 0 !important;
}