.elementor-6704 .elementor-element.elementor-element-7bdf12b9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6704 .elementor-element.elementor-element-25114c34 .e-gallery-item:hover .elementor-gallery-item__overlay, .elementor-6704 .elementor-element.elementor-element-25114c34 .e-gallery-item:focus .elementor-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}.elementor-6704 .elementor-element.elementor-element-25114c34{--image-border-color:#6EC1E4;--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-justify-content:center;--content-padding:20px;--content-transition-duration:800ms;--content-transition-delay:800ms;}.elementor-6704 .elementor-element.elementor-element-37954da3{--display:flex;}@media(min-width:768px){.elementor-6704 .elementor-element.elementor-element-37954da3{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-7bdf12b9 *//* =========================================================
   MERCADO LOGO GRID
   6 Logos pro Reihe / 12 sichtbar
========================================================= */


/* =========================================================
   VERSTECKTER ELEMENTOR LOGO-POOL
========================================================= */

.logo-pool {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    visibility: hidden !important;
}


/* =========================================================
   GRID-CONTAINER
========================================================= */

.grid-container {
    display: grid !important;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    /* Abstand horizontal */
    column-gap: clamp(15px, 1.5vw, 35px);

    /* Abstand zwischen den beiden Reihen */
    row-gap: clamp(55px, 6vw, 100px);

    width: 100%;

    max-width: 1700px;

    margin-left: auto;
    margin-right: auto;

    padding-top: 40px;
    padding-bottom: 50px;

    padding-left: clamp(20px, 2vw, 45px);
    padding-right: clamp(20px, 2vw, 45px);

    box-sizing: border-box;

    /*
     Nur am äußeren Grid-Rand abschneiden.
     Wichtig für die Animation nach rechts.
    */
    overflow: hidden;
}


/* =========================================================
   EINZELNER LOGO-PLATZ
========================================================= */

.grid-item {
    position: relative;

    display: flex;

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

    width: 100%;
    min-width: 0;

    height: clamp(110px, 9vw, 160px);

    /*
     Logos dürfen über ihre Zelle hinausgehen.
    */
    overflow: visible;

    box-sizing: border-box;
}


/* =========================================================
   ANIMATIONS-WRAPPER
========================================================= */

.logo-motion {
    position: relative;

    display: flex;

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

    width: 100%;
    height: 100%;

    opacity: 1;

    transform: translateX(0);

    /*
     Wichtig für deine JS-Animation.
    */
    transition: none !important;

    will-change: transform, opacity;

    overflow: visible;
}


/* =========================================================
   LOGO-BILDER
========================================================= */

.logo-motion img {
    display: block;

    width: auto !important;
    height: auto !important;

    /*
     Logos wieder groß darstellen.
    */
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain;

    object-position: center;

    margin: 0 auto;

    padding: 0;

    border: 0;

    opacity: 1 !important;

    /*
     Keine Elementor- oder Theme-Animation
     darf hier dazwischenfunken.
    */
    transition: none !important;

    pointer-events: none;

    user-select: none;

    -webkit-user-drag: none;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


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

@media (max-width: 1100px) {

    .grid-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));

        column-gap: 25px;
        row-gap: 55px;

        padding-left: 30px;
        padding-right: 30px;

        padding-top: 35px;
        padding-bottom: 40px;
    }


    .grid-item {
        height: 120px;
    }

}


/* =========================================================
   MOBILE – LOGO GRID
========================================================= */

@media (max-width: 767px) {

    .grid-container {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        width: 100%;

        column-gap: 28px;
        row-gap: 35px;

        padding-top: 30px;
        padding-bottom: 40px;

        padding-left: 24px;
        padding-right: 24px;

        box-sizing: border-box;

        overflow: hidden;
    }


    .grid-item {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-width: 0;

        /*
         Genug Fläche auch für hohe Logos
        */
        height: 105px;

        overflow: visible;
    }


    .grid-item img {
        display: block;

        /*
         Volle Zelle nutzen,
         aber etwas Luft zwischen den Logos lassen
        */
        width: 90% !important;
        height: 90% !important;

        max-width: none !important;
        max-height: none !important;

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

        margin: 0 auto;
        padding: 0;

        transition: none !important;

        will-change: transform, opacity;

        pointer-events: none;
        user-select: none;
    }

}/* End custom CSS */