/* Dater der Animation bei übergang */

.frame-backgroundimage-container, .frame-backgroundimage {
    transition-duration: .2s;
    transition: .2s ease-in;
    transition: .5s ease-out;
}

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

    .hoveroff {

        border: 5px solid red;
        opacity: 0.0;
        width: 100%;
        height: 200px;
    }

}

/* sektion nach oben schieben */
@media (min-width: 1200px) {

    .section.section-default {
        position: relative;
        top: -225px;
        z-index: 100;
    }
    
    #c265>.frame-group-container {
         transform: scale(1.25);
         margin-top: 50px;
    }
    #c265 p {
         transform: scale(0.75);
         margin-top: 10px;
    }
    
    #c304>.frame-group-container {
         transform: scale(1.25);
         margin-top: 50px;
    }
    #c304 p {
         transform: scale(0.75);
         margin-top: 10px;
    }
    
}


@media (min-width: 992px) {

    .section.section-default {
        position: relative;
        top: -225px;
        z-index: 100;
    }
    
    #c265>.frame-group-container {
    }
    #c265 p {
    }
}





@media (min-width: 1200px) {

    /* 4er setup */
    .contentcontainer-column .frame {
        border: 0px solid red;
        width: 320px;
        height: 275px;
        height: 278px;
    }
    .contentcontainer-column .frame {
        display:flex;
        /* align-items: flex-end; */
    }

    .contentcontainer-column .frame-has-backgroundimage {
        border: 0px solid grey;

    }
    .contentcontainer-column .frame-has-backgroundimage .frame-inner {

        width: 320px;
        height: 275px;
        display:flex;
        flex-direction: column;
        justify-content: center;

    }
    .frame-container .frame-container-default {

    }

    .contentcontainer-column .frame-has-backgroundimage .frame-inner p {
        color: white;
    }

    .contentcontainer-column {
        position: relative;
    }

    .contentcontainer-column {

    }
    .contentcontainer .frame-inner {

    }

    .contentcontainer .contentcontainer-column {

    }

    /* Ein Dreieck */

    .contentcontainer div:nth-child(4) {
        /*
           border: 0px solid red;
           left: calc( -160px - 10px);
        */
    }
    .red {
        border: 0px solid red;
    }
    .dreieck-pull-left {
        left: calc( -160px - 10px);
    }
    .dreieck-pull-left-2x {
        left: calc( -320px - 20px);
    }
    .dreieck-pull-right {
        left: calc( 160px + 10px);
    }
    .dreieck-pull-right-2x {
        left: calc( 160px + 160px  );
        top: 42px;
    }

    .dreieck-pull-left-3x {
        left: calc( -160px - 10px - 160px - 10px - 160px - 10px);
    }
    .dreieck-pull-right-3x {
        left: calc( 160px + 10px + 160px + 10px+  160px + 10px);
    }

    /* Pyramide Style 2 */
    .dreieck-pull-right-first-p2 {
        border: 0px solid red;
        left: calc( 320px + 10px);
    }


    .dreieck-pull-left-4x {
        left: calc( -160px - 10px - 160px - 10px - 160px - 10px - 160px - 10px);
    }
    .dreieck-pull-right-4x {
        left: calc(  160px + 10px + 160px + 10px + 160px + 10px + 160px + 10px  - 60px);
    }

    .markierung {
        border: 0px solid red;
    }

    .pull-down-row-3 {
        top: 41px;
    }

    .found-element {
        border: 0px solid green;
    }
    .found-element.red {
        border: 0px solid red;
    }

    /* Image Beratung bestellen */

    .beratung-pull-up {
        position: relative;
        top: calc( -160px - 10px);
    }
    .beratung-pull-right {
        position: relative;
        left: calc( 160px + 10px);
    }


    /* hoverbild nicht zeigen per default */
    .found-element .image.hoveroff {
        opacity: 0.0;
        height: 0px;
    }
    .found-element .image {
        position: relative;
        top: 40px;
    }


}


@media (min-width: 992px) and (max-width:1200px) {

    /* 4er setup */
    .contentcontainer-column .frame {
        border: 0px solid red;
        width: 320px;
        height: 275px;
        height: 278px;
    }
    .contentcontainer-column .frame {
        display:flex;
        /* align-items: flex-end; */
    }

    .contentcontainer-column .frame-has-backgroundimage {
        border: 0px solid grey;

    }
    .contentcontainer-column .frame-has-backgroundimage .frame-inner {width: 320px;height: 275px;display:flex;flex-direction: column;justify-content: center;}
    .frame-container .frame-container-default {

    }

    .contentcontainer-column .frame-has-backgroundimage .frame-inner p {
        color: white;
    }

    .contentcontainer-column {
        position: relative;
    }

    .contentcontainer-column {

    }
    .contentcontainer .frame-inner {

    }

    .contentcontainer .contentcontainer-column {

    }

    /* Ein Dreieck */

    .contentcontainer div:nth-child(4) {
        /*
           border: 0px solid red;
           left: calc( -160px - 10px);
        */
    }
    .red {
        border: 0px solid red;
    }
    .dreieck-pull-left {
        left: calc( -160px - 10px);
    }
    .dreieck-pull-left-2x {
        left: calc( -320px - 20px);
    }
    .dreieck-pull-right {
        left: calc( 160px + 10px);
    }
    .dreieck-pull-right-2x {
        left: calc( 160px + 160px  );
        top: 42px;
    }

    .dreieck-pull-left-3x {
        left: calc( -160px - 10px - 160px - 10px - 160px - 10px);
    }
    .dreieck-pull-right-3x {
        left: calc( 160px + 10px + 160px + 10px+  160px + 10px);
    }

    /* Pyramide Style 2 */
    .dreieck-pull-right-first-p2 {
        border: 0px solid red;
        left: calc( 320px + 10px);
    }


    .dreieck-pull-left-4x {
        left: calc( -160px - 10px - 160px - 10px - 160px - 10px - 160px - 10px);
    }
    .dreieck-pull-right-4x {
        left: calc(  160px + 10px + 160px + 10px + 160px + 10px + 160px + 10px  - 60px);
    }

    .markierung {
        border: 0px solid red;
    }

    .pull-down-row-3 {
        top: 39px;
    }

    .found-element {
        border: 0px solid green;
    }
    .found-element.red {
        border: 0px solid red;
    }

    /* Image Beratung bestellen */

    .beratung-pull-up {
        position: relative;
        top: calc( -160px - 10px);
    }
    .beratung-pull-right {
        position: relative;
        left: calc( 160px + 10px);
    }


    /* hoverbild nicht zeigen per default */
    .found-element .image.hoveroff {
        opacity: 0.0;
        height: 0px;
    }
    .found-element .image {
        position: relative;
        top: 40px;
    }


}





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

    #c265  {

        position: relative;
        left: calc(-60px);

    }
    
    #c304  {
        transform: scale(.8);
        position: relative;
        left: calc(-60px);

    }
    
    /* 4er setup */
    .contentcontainer-column .frame {
        border: 0px solid green;
        width: 320px;
        height: 275px;
        height: 278px;
    }
    .contentcontainer-column .frame {
        display:flex;
        /* align-items: flex-end; */
    }

    .contentcontainer-column .frame-has-backgroundimage {
        border: 0px solid grey;

    }
    .contentcontainer-column .frame-has-backgroundimage .frame-inner {

        width: 320px;
        height: 275px;
        display:flex;
        flex-direction: column;
        justify-content: center;

    }
    .frame-container .frame-container-default {

    }

    .contentcontainer-column .frame-has-backgroundimage .frame-inner p {
        color: white;
    }

    .contentcontainer-column {
        position: relative;
    }

    .contentcontainer-column {

    }
    .contentcontainer .frame-inner {

    }

    .contentcontainer .contentcontainer-column {

    }

    /* Ein Dreieck */

    .contentcontainer div:nth-child(4) {
        /*
           border: 0px solid red;
           left: calc( -160px - 10px);
        */
    }
    .red {
        border: 0px solid red;
    }
    .dreieck-pull-left {
        left: calc( -160px - 10px);
        left: 0;
    }
    .dreieck-pull-left-2x {
        left: calc( -320px - 20px);
        left: calc( -160px - 10px);
    }
    .dreieck-pull-right {
        left: calc( 160px + 10px);
        left: 0px;
    }
    .dreieck-pull-left-tablet {
        left: calc( -160px - 10px);

    }

    .dreieck-pull-right-2x {
        left: calc( 160px + 160px  );
        top: 42px;
    }

    .dreieck-pull-left-3x {
        left: calc( -160px - 10px - 160px - 10px - 160px - 10px);
    }
    .dreieck-pull-right-3x {
        left: calc( 160px + 10px + 160px + 10px+  160px + 10px);
    }

    /* Pyramide Style 2 */
    .dreieck-pull-right-first-p2 {
        border: 0px solid red;
        left: calc( 160px + 0px);
    }


    .dreieck-pull-left-4x {
        left: calc( -160px - 10px - 160px - 10px - 160px - 10px - 160px - 10px);
    }
    .dreieck-pull-right-4x {
        left: calc(  160px + 10px + 160px + 10px + 160px + 10px + 160px + 10px  - 60px);
    }

    .markierung {
        border: 0px solid red;
    }

    .pull-down-row-3 {
        top: 42px;
    }

    .mobile-pull-up-1x {
        position:relative;
        top: calc( -320px + 30px);
        left: calc( 320px);
    }

    .mobile-pull-up-gutter {
        position:relative;
        top: calc( 25px);

    }

    .mobile-pull-left-2x {
        left: calc( 160px - 10px);
    }

    .mobile-pull-left-25x {
        left: calc( 160px + 160px + 160px - 10px);
    }
    
    


    .found-element {
        border: 0px solid green;
    }
    .found-element.red {
        border: 0px solid red;
    }

    /* Image Beratung bestellen */

    .beratung-pull-up {
        position: relative;
        top: calc( -160px - 10px);
    }
    .beratung-pull-right {
        position: relative;
        left: calc( 160px + 10px);
    }


    /* hoverbild nicht zeigen per default */
    .found-element .image.hoveroff {
        opacity: 0.0;
        height: 0px;
    }
    .found-element .image {
        position: relative;
        top: 40px;
    }


}









@media (min-width: 992px) {
    
    .is-loading { position: relative;top: 300px; opacity: 0; transition: 1s ease-in-out; }

    
}



/* Leistungen Desktop - mobil */

/* 01 Arbeitsschutz */
@media (max-width:768px) {
    #c265 { display: none; }
    
    #c384 p { color: var(--text-primary, #007fc3);  }
    
    #c384 .frame-default  {display: flex;flex-wrap: nowrap;justify-content: space-around;flex-direction: column;}
    #c384 .frame-default { font-size: 1.25rem;}
    #c384 .textmedia, #c384 .textpic {
    display: flex;    flex-wrap: nowrap;    gap: 10px;    flex-direction: row;    background: #007fc3;
    }
    #c384 p { color: var(--text-white, #fff);  }
}

@media (min-width:768px) {
    #c384 { display: none; }
}






/* Qualitätsmanagement */
@media (max-width:768px) {
    #c304 { display: none; }
    
    #c397 p { color: var(--text-primary, #007fc3);  }
    
    #c397 .frame-default  {display: flex;flex-wrap: nowrap;justify-content: space-around;flex-direction: column;}
    #c397 .frame-default { font-size: 1.25rem;}
    #c397 .textmedia, #c397 .textpic {
    display: flex;    flex-wrap: nowrap;    gap: 10px;    flex-direction: row;  
    
    background: #007fc3;
    background: transparent;
    }
    #c397 p { color: var(--text-white,#007fc3);  }
    #c397 .frame-default { }
}

@media (min-width:768px) {
    #c397 { display: none; }
}


/* Hebetechnik  */
@media (max-width:768px) {
    #c323 { display: none; }
    
    #c409 p { color: var(--text-primary, #007fc3);  }
    
    #c409 .frame-default  {display: flex;flex-wrap: nowrap;justify-content: space-around;flex-direction: column;}
    #c409 .frame-default { font-size: 1.25rem;}
    #c409 .textmedia, #c409 .textpic {
    display: flex;    flex-wrap: nowrap;    gap: 10px;    flex-direction: row;  
    
    background: #007fc3;
    background: transparent;
    }
    #c409 p { color: var(--text-white,#007fc3);  }
    #c409 .frame-default { }
}

@media (min-width:768px) {
    #c409 { display: none; }
}