/* Grid, inkl. Fallback für ältere IE */

.row { position: relative; width: 1132px; margin: 0 auto 0 auto; }
.flex { display: flex; flex-wrap: wrap; }
.flex-reverse { flex-direction: row-reverse; }

.span1 { width: 76px; margin-right: 20px; }
.span2 { width: 172px; margin-right: 20px; }
.span3 { width: 268px; margin-right: 20px; }
.span3p { width: 288px; margin-right: 96px; }
.span4 { width: 364px; margin-right: 20px; }
.span4r { width: 364px; margin-left: 768px; margin-right: 0; }
.span5 { width: 460px; margin-right: 20px; }
.span6 { width: 556px; margin-right: 20px; }
.span7 { width: 652px; margin-right: 20px; }
.span8 { width: 748px; margin-right: 20px; }
.span8r { width: 748px; margin-left: 384px; margin-right: 0; }
.span9 { width: 844px; margin-right: 20px; }
.span10 { width: 940px; margin-right: 20px; }
.span11 { width: 1036px; margin-right: 20px; }
.span12 { width: 1132px; }
.span3p .span4 { width: 100%; }
.span-last, .flex-reverse .span8 { margin-right: 0; }
.threes .span4:nth-child(3n+3) { margin-right: 0; }

a.span8r { display: block; }
.row-cm, .row-rudb { margin-bottom: 40px; }
.row-series { margin-top: 80px; margin-bottom: 80px; }
..row.clearfix { margin-bottom: 60px; }
.row-smicons { margin-bottom: 120px; }
.threes { margin-bottom: 100px; }
.threes--teasers { margin-top: 100px; }
.row-title { padding-top: 100px; margin-bottom: 100px; }

ul.threes { list-style: none; }
main ul.threes > li { padding-left: 0px; }
ul.threes > li:before { display: none; }

@media only screen and (max-width: 1350px) {
  .row { position: relative; width: 1132px; margin-right: auto; margin-left: 108px; }
}

@media only screen and (max-width: 1270px) {
  .row { width: 940px; }
  .span1 { width: 60px; }
  .span2 { width: 140px; }
  .span3 { width: 220px; }
  .span3p { width: 240px; margin-right: 80px; }
  .span4 { width: 300px; }
  .span4r { width: 300px; margin-left: 640px; margin-right: 0; }
  .span5 { width: 380px; }
  .span6 { width: 460px; }
  .span7 { width: 540px; }
  .span8 { width: 620px; }
  .span8r { width: 620px; margin-left: 320px; margin-right: 0; }
  .span9 { width: 700px; }
  .span10 { width: 780px; }
  .span11 { width: 860px; }
  .span12 { width: 940px; }
}

@media only screen and (max-width: 1080px) {
  .row { width: 820px; }
  .span1 { width: 50px; }
  .span2 { width: 120px; }
  .span3 { width: 190px; }
  .span3p { width: 210px; margin-right: 70px; }
  .span4 { width: 260px; }
  .span4r { width: 260px; margin-left: 560px; margin-right: 0; }
  .span5 { width: 330px; }
  .span6 { width: 400px; }
  .span7 { width: 470px; }
  .span8 { width: 540px; }
  .span8r { width: 540px; margin-left: 280px; margin-right: 0; }
  .span9 { width: 610px; }
  .span10 { width: 680px; }
  .span11 { width: 750px; }
  .span12 { width: 820px; }
}

@media only screen and (max-width: 960px) {
  .row { margin-right: auto; margin-left: auto; }
}

@media only screen and (max-width: 880px) {
  .row { width: 620px; }
  .span1 { width: 60px; }
  .span2 { width: 140px; }
  .span3 { width: 220px; }
  .span3p { width: 620px; margin: 0 0 20px 0; }
  .span4 { width: 300px; }
  .span4r { width: 620px; margin: 0 0 20px 0; }
  .span5 { width: 380px; }
  .span6 { width: 460px; }
  .span7 { width: 540px; }
  .span8 { width: 620px; margin: 0 0 20px 0; }
  .span8r { width: 620px; margin: 0 0 20px 0; }
  .span9 { width: 620px; }
  .span10 { width: 620px; }
  .span11 { width: 620px; }
  .span12 { width: 620px; }

  .span8:last-child, .span8r:last-child { margin: 0 0 0 0; }

  .threes .span4:nth-child(3n+3) { margin-right: 20px; }
  .threes .span4:nth-child(2n+2) { margin-right: 0; }
}

@media only screen and (max-width: 670px) {
  .row { width: 540px; }
  .span1 { width: 50px; }
  .span2 { width: 120px; }
  .span3 { width: 190px; }
  .span3p { width: 540px; margin: 0 0 20px 0; }
  .span4 { width: 260px; }
  .span4r { width: 540px; margin: 0 0 20px 0; }
  .span5 { width: 330px; }
  .span6 { width: 400px; }
  .span7 { width: 470px; }
  .span8 { width: 540px; margin: 0 0 20px 0; }
  .span8r { width: 540px; margin: 0 0 20px 0; }
  .span9 { width: 540px; }
  .span10 { width: 540px; }
  .span11 { width: 540px; }
  .span12 { width: 540px; }
}

@media only screen and (max-width: 590px) {
  .row { width: calc(100% - 40px); margin-right: 20px; margin-left: 20px; }
  .span1, .span2, .span3, .span3p, .span4, .span4r, .span5, .span6, .span7, .span8, .span8r, .span9, .span10, .span11, .span12 { width: 100%; margin-right: 0; }
   .threes .span4:nth-child(3n+3) { margin-right: 0; }
}