* {
    padding:0;
     margin:0;
     -moz-box-sizing:    border-box;
  -webkit-box-sizing:    border-box;
       -o-box-sizing:    border-box;
          box-sizing:    border-box;
}
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.grid {
 /* margin: 0 0 20px 0; */
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
.grid [class*='col-'] {
  float: left;
}
/*.grid [class*='col-']:last-of-type {
  padding-bottom: 0;
}
*/

/* Opt-in outside padding */


.grid-pad [class*='col-'] {
  padding-right: 20px;
  padding-bottom: 20px;
  border:1px dashed orange;
}

.grid-pad {
   padding: 20px 0 0 20px;
   border:1px dashed blue;
}
.col-1-1,
.col-2-3, 
.col-1-3,
.col-1-2,
.col-1-4, 
.col-1-8,
.col-3-4 {
  width: 100%; 
}
.module {
  padding: 20px;
  background: #eee;
   border:1px dashed yellow;
}



.hoerbuechergrid div.col-1-4.fixleft,
.hoerbuechergrid div.col-3-4 {
  width: 100%;
}



    @media screen and (min-width:500px) {   
      .col-1-4 {
      width: 50%;
      }
      .col-1-4:nth-child(2n+1) {
      clear: both;
      }
    }
         @media screen and (min-width:760px) {   
           .col-1-4.fixleft {
                  width: 190px;
          }
            .col-3-4 {
            width: calc(100% - 190px);
            }
 

            
          }
           @media screen and (min-width:870px) {   
           .col-1-4.fixleft {
                  width: 230px;
          }
            .col-3-4 {
            width: calc(100% - 230px);
            }



 

            
          }


             @media screen and (min-width:1000px) {   /* 1-8 are shown 1-4  */


            .col-3-4 .galerierep div.col-1-4 {
              width: 25%;
            }
            .col-1-4:nth-child(2n+1) {
            clear: none;
            }
            .col-1-4:nth-child(4n+1) {
            clear: both;
              }


              .hoerbuch li {
                height: 230px;
              }

            .hoerbuechergrid div.col-1-4.fixleft {
              width: 230px;
            }


           .hoerbuechergrid div.col-3-4 {
              width: calc(100% - 230px);
            }