/*******************************************/
/*                                GRID                        */
/*                                                                    */
/*******************************************/

/** Resetter
/*********************************************************/
 *{ margin: 0px; padding: 0px; }

*:before, *:after {
    box-sizing: border-box;
        }
* {
    box-sizing: border-box;  }

 /* Base Grid */

.wrapper, .commerce-checkout-flow, .path-user main, .cart-empty-page, .grid2, .wrappersmall {
    position: relative;
    margin: 0px auto!important;
    width: calc(100% - 240px)!important;
 }

 #headerarea.wrapper {
   width: calc(100% - 120px)!important;
   margin: 0px 0px 0px 120px!important;
 }


 .block-webform-block.popup .wrapper{ margin: 0px; width: 100%; }

.wrappersmall{
    max-width: 1440px;
 }

 .wrapper-big { width: 94%; max-width: 1800px; margin: 80px auto; }
 .wrapper-grande{ width: 94%; max-width: 1600px; margin: 80px auto; }


 /** GRID
************************************************/

  .grid { display: grid; }

  .grid.two-one{
    grid-template-columns: calc(60% - 30px) calc(40% - 30px);
    grid-column-gap: 60px;
  }

  .grid.one-two{
    grid-template-columns: calc(40% - 30px) calc(60% - 30px);
    grid-column-gap: 60px;
  }

 .twogrid, .two-columns {
 	grid-template-columns: calc(50% - 45px) calc(50% - 45px);
 	grid-column-gap: 90px;
 }

 .three-columnsnogap {
  grid-template-columns: calc(33.3334% - 60px) calc(33.3334% - 60px) calc(33.3334% - 60px);
  grid-column-gap: 90px;
  grid-row-gap: 90px;
 }

 .threegrid, .three-columns {
 	grid-template-columns: calc(33.3334% - 50px) calc(33.3334% - 50px) calc(33.3334% - 50px);
 	grid-column-gap: 90px;
 }

 .newslist-grid {
   grid-template-columns: calc(50% - 200px) calc(50% - 200px) 200px;
   grid-column-gap: 100px;
  }

 .fourgrid, .four-columns {
 	grid-template-columns: calc(25% - 52px) calc(25% - 52px) calc(25% - 52px) calc(25% - 52px);
 	grid-column-gap: 88px;
 }

 .fourgrid, .four-columns {
 	grid-template-columns: calc(25% - 52px) calc(25% - 52px) calc(25% - 52px) calc(25% - 52px);
 	grid-column-gap: 88px;
 }

 .five-columns {
   grid-template-columns: calc(25% - 52px) calc(25% - 52px) calc(25% - 52px) calc(25% - 52px);
   grid-column-gap: 88px;
 }

 .twogrid .views-row, .threegrid .views-row {
 	position: relative;
 	margin-bottom: 40px;
 }


 .fullwidth.two-columns, .fullwidth.twogrid {
   grid-template-columns: 50% 50%;
   grid-column-gap: 0px;
 }

 .fullwidth.three-columns {
   grid-template-columns: 33.3334% 33.3334% 33.3334%;
   grid-column-gap: 0px;
 }

 .fullwidth.fourgrid-columns, .fullwidth.four-columns {
   grid-template-columns: 25% 25% 25% 25%;
   grid-column-gap: 0px;
 }


  /** FLEX  .flexbox-container.twogrid > div, .flexbox-container.two-columns > div { width: calc(50% - 30px); }
 ************************************************/


 @media only screen and (min-width: 0px) and (max-width: 1440px) {

   .wrappersmall{
       max-width: 100%;
    }

 		.fourgrid, .four-columns {
 			grid-template-columns: 360px 360px;
 			grid-column-gap: 120px;
      justify-content: center;
 		}
    .wrapper, .commerce-checkout-flow, .path-user main, .cart-empty-page, .grid2, .wrappersmall {
        width: calc(100% - 120px)!important;
     }

     #headerarea.wrapper {
       width: calc(100% - 60px)!important;
       margin: 0px 0px 0px 60px!important;
     }

 	}

 	@media only screen and (min-width: 0px) and (max-width: 1024px) {

 			.fourgrid, .threegrid, .four-columns {
 				grid-template-columns: calc(50% - 30px) calc(50% - 30px);
 				grid-column-gap: 60px;
 			}

 		}



    @media only screen and (min-width: 0px) and (max-width: 800px) {

       #grid-2 .paragraph--type--text {
        margin: 0px 40px 20px 40px; padding-top: 0px;
      }

      #grid-2 .paragraph--type--image {
        margin-top: 40px;
      }

      #leistungsteaser h3 {
        margin-top: 60px;
      }

    .two-columns, .three-columns, .four-columns, .fourgrid, .twothird-onethird, .onethird-twothird, .grid, .twogrid { display: block; }

    .four-columns .huge, .paragraph--type--video-embed { margin-top: 50px; }

    .onethird-twothird .paragraph:nth-child(1), .twothird-onethird .paragraph:nth-child(2) { width:100%; margin-right: 0px; font-size: 90%; }
    .onethird-twothird .paragraph:nth-child(2), .twothird-onethird .paragraph:nth-child(1) { width: 100%; max-width: 100%; }

    .margintop { margin-top: 90px!important; }
    .margintopmiddle { margin-top: 55px!important; }
    .margintopsmall { margin-top: 38px!important; }


  	}

@media only screen and (min-width: 0px) and (max-width: 800px) {
    .grid { display: block; }
    .wrapper, .commerce-checkout-flow, .path-user main, .cart-empty-page, .grid2, .wrappersmall {
        width: calc(100% - 80px)!important;
     }

     #headerarea.wrapper {
       width: calc(100% - 40px)!important;
       margin: 0px 0px 0px 40px!important;
     }
}

@media only screen and (min-width: 0px) and (max-width: 600px) {
.wrapper, .commerce-checkout-flow, .path-user main, .cart-empty-page, .grid2, .wrappersmall {
  width: calc(100% - 40px)!important;
 }
 #grid-2 .paragraph--type--text {
  margin: 0px 20px 20px 20px; 
}
 #headerarea.wrapper {
   width: calc(100% - 20px)!important;
   margin: 0px 0px 0px 20px!important;
 }
}