.clearfix {margin: auto; width: 100%;}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.col-wrap {
  display:inline-block;
  width:100%;
  clear:both;
}


.grid-1-full {
  width:100%;

}

.grid-2-narrow {
  width:50%;/*520px*/
  margin: 0 auto;
  box-sizing: border-box;
}

.grid-1-full > .grid-2-narrow {
  padding: 10rem 0 0;
}
.grid-1-full > .grid-2-narrow ~ .grid-2-narrow {
  padding: 5rem 0 0;
}


/********************
- Blöcke -
********************/

/*  Blocke default */
.col-1-1, .col-1-2, .col-2-1 {
  clear:both;
  width:100%;
  box-sizing: border-box;
}


/*  Block, 100% Breite, dynamische Höhe.  Abstand oben groß, Text zentriert */
.col-1-2 {
  text-align:center;
  margin: 14rem 0 0;
}

/*  Block, 100% Breite, dynamische Höhe. Abstand oben klein , Text zentriert */
.col-1-3 {
  text-align:center;
  margin: 3rem 0 0 0;
}
.grid-2-narrow > .col-1-3 {
  margin: 0;
}


/* 2 Standardblöcke, 50% Breite, dynamische Höhe */
.col-2-1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row nowrap ;
  margin:0 0 8.125rem;
}
.col-2-1 .col-left {
  flex-basis: 50%;
  padding-right: 1.5625rem;
  box-sizing: border-box;
}
.col-2-1 .col-right {
  flex-basis: 50%;
  padding-left: 1.5625rem;
  box-sizing: border-box;
}
.col-1-2 .col-2-1 .col-left {
  padding: 0 0 0 10%;  
}
.col-1-2 .col-2-1 .col-right {
  padding: 0 10% 0 0;  
}
.col-1-3 .col-2-1 {
  margin: 0;  
}
.col-1-3 .col-2-1 .col-left, .col-1-3 .col-2-1 .col-right {
  padding: 0 5% 0 5%;  
}


/* 3 Standardblöcke, 33% Breite, dynamische Höhe */
.col-3-1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row nowrap ;
  margin:0 0 8.125rem;
}
.col-3-1 .col-left {
  flex: 1 1 33%;
  box-sizing: border-box;
  padding: 0 .625rem 0 0;
}
.col-3-1 .col-mid {
  flex: 1 1 33%;
  box-sizing: border-box;
  padding: 0 .625rem;
}
.col-3-1 .col-right {
  flex: 1 1 33%;
  box-sizing: border-box;
  padding:0 0 0 .625rem;
}
.col-1-3 .col-3-1 {
  margin: 0;  
}
.col-1-3 .col-3-1 .col-left .col-1-3 .col-3-1 .col-mid, .col-1-3 .col-3-1 .col-right {
  padding: 0 5% 0 5%;  
}


/* 4 Standardblöcke, 25% Breite, dynamische Höhe */
.col-4-1 {
  display: flex;
  flex-flow: row wrap;
  box-sizing: border-box;
  margin:0 0 9.5rem;
}
.col-4-1 .col-header {
  flex-basis: 100%;
}
.col-4-1 .col-left {
  flex-basis: 25%;
  padding: 0 3.12rem 0 0 ;
  box-sizing: border-box;
}
.col-4-1 .col-mid-left {
  flex-basis: 25%;
  padding: 0 1.56rem 0 0 ;
  box-sizing: border-box;
}
.col-4-1 .col-mid-right {
  flex-basis: 25%;
  padding: 0 3.12rem 0 1.56rem ;
  box-sizing: border-box;
}
.col-4-1 .col-right {
  flex-grow: 1;
  flex-basis: 16%;
  box-sizing: border-box;
}
.grid-1-full > .col-4-1 {
  margin:9rem 0 9.5rem;
}
.grid-1-full > .col-4-1 ~ .col-4-1 {
  margin:0 0 9.5rem;
}
.grid-1-full > .col-4-1:last-child {
  margin-bottom:0;
}
.col-1-3 .col-4-1 {
  flex-flow: row nowrap;
}
.topic .col-1-3 .col-4-1 .col-header {
  display:none;
}
.col-1-3 .col-4-1 > div {
  flex: 1 0 25%;
  padding: 0 .5rem;
}

/********************
- Responsive -
********************/

@media only screen and (max-width: 1600px) {

  .grid-1-full > .grid-2-narrow {
    padding: 11rem 0 0;
  }
  .grid-1-full > .grid-2-narrow ~ .grid-2-narrow {
    padding: 5rem 0 0;
  }
  .col-2-1 , .col-3-1 , .col-4-1 {
    margin:0 0 5rem;
  }
  .col-1-3 .col-3-1 {
    margin: 0;  
  }

  .grid-2-narrow {
    width:65%;
  }

  /*  Block, 100% Breite, dynamische Höhe.  Abstand oben, Text zentriert */
  .col-1-2 {
    margin: 5rem 0 0;
  }

  .grid-1-full > .col-4-1 {
    margin:9rem 0 5rem;
  }
  .grid-1-full > .col-4-1 ~ .col-4-1 {
    margin:0 0 5rem;
  }
  .grid-1-full > .col-4-1:last-child {
    margin-bottom:0;
  }

}

@media only screen and (max-width: 1300px) {

  .grid-1-full > .grid-2-narrow {
    padding: 10.75rem 0 0;
  }
  .grid-1-full > .grid-2-narrow ~ .grid-2-narrow {
    padding: 5rem 0 0;
  }

  /*  Block, 100% Breite, dynamische Höhe.  Abstand oben, Text zentriert */
  .col-1-2 {
    margin: 5rem 0 0;
  }

  .grid-1-full > .col-4-1 {
    margin:5rem 0 5rem;
  }

  .col-3-1 .col-left {
    padding: 0 .313rem 0 0;
  }
  .col-3-1 .col-mid {
    padding: 0 .313rem;
  }
  .col-3-1 .col-right {
    padding:0 0 0 .313rem;
  }

}


/* viewport 1024 */

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

  .grid-2-narrow {
    width:75%;
  }

}