[class][class][class].hidden { display: none; }

body [data-show-nodes],
body [data-hide-nodes],
body [data-set-nodes],
body [data-unset-nodes],
body [data-toggle-nodes] {
    cursor: pointer;
}
body [data-show-nodes="#empty"],
body [data-hide-nodes="#empty"],
body [data-set-nodes="#empty"],
body [data-unset-nodes="#empty"],
body [data-toggle-nodes="#empty"] {
    cursor: default;
}html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
}
html {
  height: 100%;
}
body {
  background-color: #FFFFFF;
  position: relative;
  min-width: 320px;
  min-height: 100%;
  word-wrap: break-word;
}
.grid,
.container,
.module {
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}
.grid.fix[class][class][class],
.container.fix[class][class][class],
.module.fix[class][class][class] {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 0px;
}
.grid.fullwidth,
.container.fullwidth,
.module.fullwidth {
  width: 100vw;
  -webkit-flex-basis: 100vw;
  flex-basis: 100vw;
  -webkit-flex-shrink: 1;
  -ms-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  justify-content: flex-start;
  max-width: 100%;
}
.grid,
.container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}
.grid {
  width: auto;
  margin: 0 auto;
  clear: both;
  position: relative;
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
}
.cropped {
  overflow: hidden;
}
.module {
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  overflow: visible;
}
.no-flex .grid,
.no-flex .container,
.no-flex .module {
  display: block;
}
.no-flex .container,
.no-flex .module {
  float: left;
}
.no-flex .grid > #footer > .container.l-12:not(.fix),
.no-flex .grid > .container.l-12:not(.fix),
.no-flex .grid > .hero.l-12:not(.fix) {
  clear: left;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}
.align-left {
  text-align: left;
}
.align-justify {
  text-align: justify;
}
.grid.left,
.container.left,
.module.left {
  margin-left: 0;
  margin-right: auto;
}
.grid.center,
.container.center,
.module.center {
  margin-left: auto;
  margin-right: auto;
}
.grid.right,
.container.right,
.module.right {
  margin-left: auto;
  margin-right: 0px;
}
span.left:not(.icon),
a.left:not(.icon),
p.left,
h1.left,
h2.left,
h3.left,
h4.left,
h5.left,
h6.left {
  float: left;
}
span.right:not(.icon),
a.right:not(.icon),
p.right,
h1.right,
h2.right,
h3.right,
h4.right,
h5.right,
h6.right {
  float: right;
}
.container.center {
  -webkit-justify-content: center;
  -ms-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.container.left {
  -webkit-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.container.right {
  -webkit-justify-content: flex-end;
  -ms-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.container.row {
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  -ms-flex-align: space-between;
  justify-content: space-between;
}
.l-1 {
  width: 80px;
  min-width: 7.96875vw;
  -webkit-flex-basis: 7.96875vw;
  flex-basis: 7.96875vw;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
}
.l-2 {
  width: 160px;
  min-width: 15.9375vw;
  -webkit-flex-basis: 15.9375vw;
  flex-basis: 15.9375vw;
  -webkit-flex-grow: 2;
  -ms-flex-grow: 2;
  flex-grow: 2;
}
.l-3 {
  width: 240px;
  min-width: 23.90625vw;
  -webkit-flex-basis: 23.90625vw;
  flex-basis: 23.90625vw;
  -webkit-flex-grow: 3;
  -ms-flex-grow: 3;
  flex-grow: 3;
}
.l-4 {
  width: 320px;
  min-width: 31.875vw;
  -webkit-flex-basis: 31.875vw;
  flex-basis: 31.875vw;
  -webkit-flex-grow: 4;
  -ms-flex-grow: 4;
  flex-grow: 4;
}
.l-5 {
  width: 400px;
  min-width: 39.84375vw;
  -webkit-flex-basis: 39.84375vw;
  flex-basis: 39.84375vw;
  -webkit-flex-grow: 5;
  -ms-flex-grow: 5;
  flex-grow: 5;
}
.l-6 {
  width: 480px;
  min-width: 47.8125vw;
  -webkit-flex-basis: 47.8125vw;
  flex-basis: 47.8125vw;
  -webkit-flex-grow: 6;
  -ms-flex-grow: 6;
  flex-grow: 6;
}
.l-7 {
  width: 560px;
  min-width: 55.78125vw;
  -webkit-flex-basis: 55.78125vw;
  flex-basis: 55.78125vw;
  -webkit-flex-grow: 7;
  -ms-flex-grow: 7;
  flex-grow: 7;
}
.l-8 {
  width: 640px;
  min-width: 63.75vw;
  -webkit-flex-basis: 63.75vw;
  flex-basis: 63.75vw;
  -webkit-flex-grow: 8;
  -ms-flex-grow: 8;
  flex-grow: 8;
}
.l-9 {
  width: 720px;
  min-width: 71.71875vw;
  -webkit-flex-basis: 71.71875vw;
  flex-basis: 71.71875vw;
  -webkit-flex-grow: 9;
  -ms-flex-grow: 9;
  flex-grow: 9;
}
.l-10 {
  width: 800px;
  min-width: 79.6875vw;
  -webkit-flex-basis: 79.6875vw;
  flex-basis: 79.6875vw;
  -webkit-flex-grow: 10;
  -ms-flex-grow: 10;
  flex-grow: 10;
}
.l-11 {
  width: 880px;
  min-width: 87.65625vw;
  -webkit-flex-basis: 87.65625vw;
  flex-basis: 87.65625vw;
  -webkit-flex-grow: 11;
  -ms-flex-grow: 11;
  flex-grow: 11;
}
.l-12 {
  width: 960px;
  min-width: 95.625vw;
  -webkit-flex-basis: 95.625vw;
  flex-basis: 95.625vw;
  -webkit-flex-grow: 12;
  -ms-flex-grow: 12;
  flex-grow: 12;
}
.fix[class][class] {
  min-width: 0px;
  flex-grow: 0;
  flex-basis: auto;
}
/*  */
.no-flex .l-1, .no-flex .l-2, .no-flex .l-3, .no-flex .l-4, .no-flex .l-5, .no-flex .l-6, .no-flex .l-7, .no-flex .l-8, .no-flex .l-9, .no-flex .l-10, .no-flex .l-11, .no-flex .l-12 {
  min-width: 0px;
}
/*  */
@media screen and (min-width: 980px) {
  .l-0[class][class][class] {
    display: none;
  }
  /*  */
  .l-fix {
    min-width: 0px;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  /*  */
  /*  */
  .l-l1[class] {
    margin-left: 7.96875vw;
  }
  .l-r1[class] {
    margin-right: 7.96875vw;
  }
  .l-l1.fix[class] {
    margin-left: 80px;
  }
  .l-r1.fix[class] {
    margin-right: 80px;
  }
  .l-l2[class] {
    margin-left: 15.9375vw;
  }
  .l-r2[class] {
    margin-right: 15.9375vw;
  }
  .l-l2.fix[class] {
    margin-left: 160px;
  }
  .l-r2.fix[class] {
    margin-right: 160px;
  }
  .l-l3[class] {
    margin-left: 23.90625vw;
  }
  .l-r3[class] {
    margin-right: 23.90625vw;
  }
  .l-l3.fix[class] {
    margin-left: 240px;
  }
  .l-r3.fix[class] {
    margin-right: 240px;
  }
  .l-l4[class] {
    margin-left: 31.875vw;
  }
  .l-r4[class] {
    margin-right: 31.875vw;
  }
  .l-l4.fix[class] {
    margin-left: 320px;
  }
  .l-r4.fix[class] {
    margin-right: 320px;
  }
  .l-l5[class] {
    margin-left: 39.84375vw;
  }
  .l-r5[class] {
    margin-right: 39.84375vw;
  }
  .l-l5.fix[class] {
    margin-left: 400px;
  }
  .l-r5.fix[class] {
    margin-right: 400px;
  }
  .l-l6[class] {
    margin-left: 47.8125vw;
  }
  .l-r6[class] {
    margin-right: 47.8125vw;
  }
  .l-l6.fix[class] {
    margin-left: 480px;
  }
  .l-r6.fix[class] {
    margin-right: 480px;
  }
  /*  */
  .no-flex .l-l1[class] {
    margin-left: 80px;
  }
  .no-flex .l-r1[class] {
    margin-right: 80px;
  }
  .no-flex .l-l2[class] {
    margin-left: 160px;
  }
  .no-flex .l-r2[class] {
    margin-right: 160px;
  }
  .no-flex .l-l3[class] {
    margin-left: 240px;
  }
  .no-flex .l-r3[class] {
    margin-right: 240px;
  }
  .no-flex .l-l4[class] {
    margin-left: 320px;
  }
  .no-flex .l-r4[class] {
    margin-right: 320px;
  }
  .no-flex .l-l5[class] {
    margin-left: 400px;
  }
  .no-flex .l-r5[class] {
    margin-right: 400px;
  }
  .no-flex .l-l6[class] {
    margin-left: 480px;
  }
  .no-flex .l-r6[class] {
    margin-right: 480px;
  }
  /*  */
  /*  */
  .l-align-center {
    text-align: center;
  }
  .l-align-right {
    text-align: right;
  }
  .l-align-left {
    text-align: left;
  }
  .l-align-justify {
    text-align: justify;
  }
  .grid.l-center,
  .container.l-center,
  .module.l-center {
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .m-0[class][class][class] {
    display: none;
  }
  .l-1,
  .m-1[class] {
    width: 80px;
    min-width: 11.6796875vw;
    -webkit-flex-basis: 11.6796875vw;
    flex-basis: 11.6796875vw;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
  }
  .l-2,
  .m-2[class] {
    width: 160px;
    min-width: 23.359375vw;
    -webkit-flex-basis: 23.359375vw;
    flex-basis: 23.359375vw;
    -webkit-flex-grow: 2;
    -ms-flex-grow: 2;
    flex-grow: 2;
  }
  .l-3,
  .m-3[class] {
    width: 240px;
    min-width: 35.0390625vw;
    -webkit-flex-basis: 35.0390625vw;
    flex-basis: 35.0390625vw;
    -webkit-flex-grow: 3;
    -ms-flex-grow: 3;
    flex-grow: 3;
  }
  .l-4,
  .m-4[class] {
    width: 320px;
    min-width: 46.71875vw;
    -webkit-flex-basis: 46.71875vw;
    flex-basis: 46.71875vw;
    -webkit-flex-grow: 4;
    -ms-flex-grow: 4;
    flex-grow: 4;
  }
  .l-5,
  .m-5[class] {
    width: 400px;
    min-width: 58.3984375vw;
    -webkit-flex-basis: 58.3984375vw;
    flex-basis: 58.3984375vw;
    -webkit-flex-grow: 5;
    -ms-flex-grow: 5;
    flex-grow: 5;
  }
  .l-6,
  .m-6[class] {
    width: 480px;
    min-width: 70.078125vw;
    -webkit-flex-basis: 70.078125vw;
    flex-basis: 70.078125vw;
    -webkit-flex-grow: 6;
    -ms-flex-grow: 6;
    flex-grow: 6;
  }
  .l-7,
  .m-7[class] {
    width: 560px;
    min-width: 81.7578125vw;
    -webkit-flex-basis: 81.7578125vw;
    flex-basis: 81.7578125vw;
    -webkit-flex-grow: 7;
    -ms-flex-grow: 7;
    flex-grow: 7;
  }
  .l-8,
  .m-8[class] {
    width: 640px;
    min-width: 93.4375vw;
    -webkit-flex-basis: 93.4375vw;
    flex-basis: 93.4375vw;
    -webkit-flex-grow: 8;
    -ms-flex-grow: 8;
    flex-grow: 8;
  }
  .l-9,
  .l-10,
  .l-11,
  .l-12 {
    width: 640px;
    min-width: 93.4375vw;
    -webkit-flex-basis: 93.4375vw;
    flex-basis: 93.4375vw;
    -webkit-flex-grow: 8;
    -ms-flex-grow: 8;
    flex-grow: 8;
  }
  .m-1.fix[class], .m-2.fix[class], .m-3.fix[class], .m-4.fix[class], .m-5.fix[class], .m-6.fix[class], .m-7.fix[class], .m-8.fix[class] {
    min-width: 0px;
    flex-grow: 0;
    flex-basis: auto;
  }
  /*  */
  .no-flex .m-1, .no-flex .m-2, .no-flex .m-3, .no-flex .m-4, .no-flex .m-5, .no-flex .m-6, .no-flex .m-7, .no-flex .m-8 {
    min-width: 0px;
  }
  /*  */
  /*  */
  .m-fix[class] {
    min-width: 0px;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  /*  */
  /*  */
  .m-l1[class] {
    margin-left: 11.6796875vw;
  }
  .m-r1[class] {
    margin-right: 11.6796875vw;
  }
  .m-l1.fix[class] {
    margin-left: 80px;
  }
  .m-r1.fix[class] {
    margin-right: 80px;
  }
  .m-l2[class] {
    margin-left: 23.359375vw;
  }
  .m-r2[class] {
    margin-right: 23.359375vw;
  }
  .m-l2.fix[class] {
    margin-left: 160px;
  }
  .m-r2.fix[class] {
    margin-right: 160px;
  }
  .m-l3[class] {
    margin-left: 35.0390625vw;
  }
  .m-r3[class] {
    margin-right: 35.0390625vw;
  }
  .m-l3.fix[class] {
    margin-left: 240px;
  }
  .m-r3.fix[class] {
    margin-right: 240px;
  }
  .m-l4[class] {
    margin-left: 46.71875vw;
  }
  .m-r4[class] {
    margin-right: 46.71875vw;
  }
  .m-l4.fix[class] {
    margin-left: 320px;
  }
  .m-r4.fix[class] {
    margin-right: 320px;
  }
  /*  */
  .no-flex .m-l1[class] {
    margin-left: 80px;
  }
  .no-flex .m-r1[class] {
    margin-right: 80px;
  }
  .no-flex .m-l2[class] {
    margin-left: 160px;
  }
  .no-flex .m-r2[class] {
    margin-right: 160px;
  }
  .no-flex .m-l3[class] {
    margin-left: 240px;
  }
  .no-flex .m-r3[class] {
    margin-right: 240px;
  }
  .no-flex .m-l4[class] {
    margin-left: 320px;
  }
  .no-flex .m-r4[class] {
    margin-right: 320px;
  }
  /*  */
  /*  */
  .m-align-center {
    text-align: center;
  }
  .m-align-right {
    text-align: right;
  }
  .m-align-left {
    text-align: left;
  }
  .m-align-justify {
    text-align: justify;
  }
  .grid.m-center,
  .container.m-center,
  .module.m-center {
    margin-left: auto;
    margin-right: auto;
  }
  body.no-flex {
    max-width: 959.9px;
  }
}
@media screen and (max-width: 659.9px) {
  .grid > .container {
    max-width: 660px;
  }
  .s-0[class][class][class] {
    display: none;
  }
  .l-1,
  .m-1[class],
  .s-1[class][class] {
    width: 80px;
    min-width: 21.71875vw;
    -webkit-flex-basis: 21.71875vw;
    flex-basis: 21.71875vw;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
  }
  .l-2,
  .m-2[class],
  .s-2[class][class] {
    width: 160px;
    min-width: 43.4375vw;
    -webkit-flex-basis: 43.4375vw;
    flex-basis: 43.4375vw;
    -webkit-flex-grow: 2;
    -ms-flex-grow: 2;
    flex-grow: 2;
  }
  .l-3,
  .m-3[class],
  .s-3[class][class] {
    width: 240px;
    min-width: 65.15625vw;
    -webkit-flex-basis: 65.15625vw;
    flex-basis: 65.15625vw;
    -webkit-flex-grow: 3;
    -ms-flex-grow: 3;
    flex-grow: 3;
  }
  .l-4,
  .m-4[class],
  .s-4[class][class] {
    width: 320px;
    min-width: 86.875vw;
    -webkit-flex-basis: 86.875vw;
    flex-basis: 86.875vw;
    -webkit-flex-grow: 4;
    -ms-flex-grow: 4;
    flex-grow: 4;
  }
  .l-5,
  .m-5[class],
  .l-6,
  .m-6[class],
  .l-7,
  .m-7[class],
  .l-8,
  .m-8[class],
  .l-9,
  .l-10,
  .l-11,
  .l-12 {
    width: 320px;
    min-width: 86.875vw;
    -webkit-flex-basis: 86.875vw;
    flex-basis: 86.875vw;
    -webkit-flex-grow: 4;
    -ms-flex-grow: 4;
    flex-grow: 4;
  }
  .s-1.fix[class][class], .s-2.fix[class][class], .s-3.fix[class][class], .s-4.fix[class][class] {
    min-width: 0px;
    flex-grow: 0;
    flex-basis: auto;
  }
  /*  */
  .no-flex > .grid {
    max-width: 660px;
  }
  .no-flex .s-1, .no-flex .s-2, .no-flex .s-3, .no-flex .s-4 {
    min-width: 0px;
  }
  /*  */
  /*  */
  .s-fix[class][class] {
    min-width: 0px;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  /*  */
  /*  */
  .s-l1[class] {
    margin-left: 21.71875vw;
  }
  .s-r1[class] {
    margin-right: 21.71875vw;
  }
  .s-l1.fix[class] {
    margin-left: 80px;
  }
  .s-r1.fix[class] {
    margin-right: 80px;
  }
  .s-l2[class] {
    margin-left: 43.4375vw;
  }
  .s-r2[class] {
    margin-right: 43.4375vw;
  }
  .s-l2.fix[class] {
    margin-left: 160px;
  }
  .s-r2.fix[class] {
    margin-right: 160px;
  }
  /*  */
  .no-flex .s-l1[class] {
    margin-left: 80px;
  }
  .no-flex .s-r1[class] {
    margin-right: 80px;
  }
  .no-flex .s-l2[class] {
    margin-left: 160px;
  }
  .no-flex .s-r2[class] {
    margin-right: 160px;
  }
  /*  */
  /*  */
  .s-align-center {
    text-align: center;
  }
  .s-align-right {
    text-align: right;
  }
  .s-align-left {
    text-align: left;
  }
  .s-align-justify {
    text-align: justify;
  }
  .grid.s-center,
  .container.s-center,
  .module.s-center {
    margin-left: auto;
    margin-right: auto;
  }
  body.no-flex {
    max-width: 639.9px;
  }
}
/*  */
@media screen and (min-width: 980px) {
  body {
    max-width: 1002px;
    min-width: auto;
    width: 1002px;
    margin-left: auto;
    margin-right: auto;
    background-color: #E3EDFA;
  }
  body > .grid {
    max-width: 1000px;
    min-width: auto;
    width: 1000px;
    display: inline-block;
    border-left: 1px solid #C2C2C2;
    border-right: 1px solid #C2C2C2;
    background-color: #FFFFFF;
    z-index: 0;
    /* BUG-2423 - Abstand nach dem Footer - wenn kein overflow: hidden, der Bug ist gefixt */
    /* wof?r is t overflow: hidden hier ?berhaupt, wei?ich aktuell nicht... */
    /* overflow: hidden; */
  }
  body > .grid > .container.l-12,
  body > .grid > form > .container.l-12,
  body > .grid > .container.fullwidth .teaser.fullwidth,
  body > .grid > .container.carousel.l-12 .hero > .teaser,
  body > .grid > footer > .container.l-12 {
    max-width: 960px;
    min-width: auto;
    width: 960px;
    padding-right: 20px;
    padding-left: 20px;
  }
  /* Hotfix GMX Layout for Hero Modul + Slider */
  body > .grid > .container.expandable-wrapper.l-12,
  body > .grid > .container.expandable-wrapper.l-12 .container.l-12:not(.fix),
  body > .grid > .container.carousel.l-12,
  body > .grid > .container.carousel.l-12 .hero,
  body > .grid > .container.carousel.l-12 .hero > .background,
  body > .grid > .container > .container.carousel.l-12,
  body > .grid > .container > .container.carousel.l-12 .teaser.fullwidth,
  body > .grid > .container.fullwidth,
  body > .grid > .container.fullwidth .teaser.fullwidth {
    width: 1000px;
    max-width: 1000px;
    min-width: auto;
    padding-right: 0;
    padding-left: 0;
  }
  body > .grid > .container > .container.carousel.l-12 > ol[role="navigation"] li[rel="prev"],
  body > .grid > .container > .container.carousel.l-12 > ol[role="navigation"] li[rel="next"] {
    display: none !important;
  }
  body .navigation > ul > li {
    height: 48px;
  }
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
p > img {
  display: block;
}
.vspace-xxxl {
  padding-top: 100px;
  padding-bottom: 0px;
}
.vspace-xxxl > * {
  margin-top: 0px;
  margin-bottom: 100px;
}
.vspace-xxl {
  padding-top: 70px;
  padding-bottom: 0px;
}
.vspace-xxl > * {
  margin-top: 0px;
  margin-bottom: 70px;
}
.vspace-xl {
  padding-top: 50px;
  padding-bottom: 0px;
}
.vspace-xl > * {
  margin-top: 0px;
  margin-bottom: 50px;
}
.vspace-l {
  padding-top: 40px;
  padding-bottom: 0px;
}
.vspace-l > * {
  margin-top: 0px;
  margin-bottom: 40px;
}
.vspace-m {
  padding-top: 30px;
  padding-bottom: 0px;
}
.vspace-m > * {
  margin-top: 0px;
  margin-bottom: 30px;
}
.vspace-s {
  padding-top: 20px;
  padding-bottom: 0px;
}
.vspace-s > * {
  margin-top: 0px;
  margin-bottom: 20px;
}
.vspace-xs {
  padding-top: 10px;
  padding-bottom: 0px;
}
.vspace-xs > * {
  margin-top: 0px;
  margin-bottom: 10px;
}
.vspace-xxs {
  padding-top: 4px;
  padding-bottom: 0px;
}
.vspace-xxs > * {
  margin-top: 0px;
  margin-bottom: 4px;
}
@media screen and (max-width: 979.9px) {
  .vspace-xxxl {
    padding-top: 75px;
  }
  .vspace-xxxl > * {
    margin-bottom: 75px;
  }
  .vspace-xxl {
    padding-top: 38px;
  }
  .vspace-xxl > * {
    margin-bottom: 38px;
  }
  .vspace-xl {
    padding-top: 38px;
  }
  .vspace-xl > * {
    margin-bottom: 38px;
  }
  .vspace-l {
    padding-top: 30px;
  }
  .vspace-l > * {
    margin-bottom: 30px;
  }
  .vspace-m {
    padding-top: 22px;
  }
  .vspace-m > * {
    margin-bottom: 22px;
  }
  .vspace-s {
    padding-top: 15px;
  }
  .vspace-s > * {
    margin-bottom: 15px;
  }
  .vspace-xs {
    padding-top: 10px;
  }
  .vspace-xs > * {
    margin-bottom: 10px;
  }
  .vspace-xxs {
    padding-top: 4px;
  }
  .vspace-xxs > * {
    margin-bottom: 4px;
  }
}
.vspace-top-0 {
  padding-top: 0px;
}
.vspace-bottom-0 {
  margin-bottom: 0;
}
@media screen and (min-width: 980px) {
  .l-vspace-top-0 {
    padding-top: 0px;
  }
  .l-vspace-bottom-0 {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .m-vspace-top-0 {
    padding-top: 0px;
  }
  .m-vspace-bottom-0 {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 659.9px) {
  .s-vspace-top-0 {
    padding-top: 0px;
  }
  .s-vspace-bottom-0 {
    margin-bottom: 0;
  }
}
/**/
.debug.debug .vspace-xxxl {
  background-color: #FFCCCC;
}
.debug.debug .vspace-xxl {
  background-color: #CCFFCC;
}
.debug.debug .vspace-xl {
  background-color: #CCCCFF;
}
.debug.debug .vspace-l {
  background-color: #FFFFCC;
}
.debug.debug .vspace-m {
  background-color: #FFCCFF;
}
.debug.debug .vspace-s {
  background-color: #CCFFFF;
}
.debug.debug .vspace-xs {
  background-color: #FFCCAA;
}
@font-face {
    font-family: 'RobotoMedium';
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Medium-webfont.eot');
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Medium-webfont.woff') format('woff'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Medium-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'RobotoRegular';
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Regular-webfont.eot');
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Regular-webfont.woff') format('woff'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Regular-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'RobotoCondensed';
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Regular-webfont.eot');
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Regular-webfont.woff') format('woff'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Regular-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'RobotoCondensedLight';
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Light-webfont.eot');
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Light-webfont.eot?#iefix') format('embedded-opentype'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Light-webfont.woff') format('woff'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Light-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}


body {
    font-family: "RobotoRegular", Verdana, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #525252;
}
* {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
}

a,
.link-base {
    color: #2269C3;
    text-decoration: none;
    
}
a:active,
a:visited,
.link-visited {
    color: #2269C3;
}
a:hover,
a:focus,
.link-base:hover,
.link-hover {
    color: #2269C3;
    text-decoration: underline;
}
a img {
    border: 0px;
}
a.textstyle,
a.textstyle:hover,
a.textstyle:focus {
    color: inherit;
    text-decoration: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-headline > strong,
.group-headline > strong,
.teaser > .content > strong,
.akkordeon .summary > strong,
footer .container > strong.module,
footer .container .module > strong {
    font-weight: 400;
}
footer .container .module > strong {
    display: block;
}

/* Defaults > können durch setzen der responsiven Size-Klassen überschrieben werden. .[screensize]-size-[headlineformat]  */
h1.xxl,    [class].size-10 { font-size: 72px; font-family: RobotoCondensed; line-height: 80px; }
h1.xl,     [class].size-9  { font-size: 64px; font-family: RobotoCondensed; line-height: 72px; }
h1,        [class].size-8  { font-size: 56px; font-family: RobotoCondensed; line-height: 64px; }
h2.xl,     [class].size-7  { font-size: 48px; font-family: RobotoCondensed; line-height: 56px; }
h2,        [class].size-6  { font-size: 40px; font-family: RobotoCondensed; line-height: 48px; }
h3.xl,     [class].size-5  { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
h3,        [class].size-4  { font-size: 24px; font-family: RobotoMedium; line-height: 32px; }
h4,        [class].size-3  { font-size: 20px; font-family: RobotoMedium; line-height: 28px; }
p,         [class].size-2  { font-size: 16px; font-family: RobotoRegular; line-height: 24px; }
.note,     [class].size-1  { font-size: 14px; font-family: RobotoRegular; line-height: 22px; }
.icontext, [class].size-0  { font-size: 9px; font-family: Verdana; line-height: 16px; }



@media screen and (min-width: 980px) {
    [class][class].l-size-10 { font-size: 72px; font-family: RobotoCondensed; line-height: 80px; }
    [class][class].l-size-9  { font-size: 64px; font-family: RobotoCondensed; line-height: 72px; }
    [class][class].l-size-8  { font-size: 56px; font-family: RobotoCondensed; line-height: 64px; }
    [class][class].l-size-7  { font-size: 48px; font-family: RobotoCondensed; line-height: 56px; }
    [class][class].l-size-6  { font-size: 40px; font-family: RobotoCondensed; line-height: 48px; }
    [class][class].l-size-5  { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
    [class][class].l-size-4  { font-size: 24px; font-family: RobotoMedium; line-height: 32px; }
    [class][class].l-size-3  { font-size: 20px; font-family: RobotoMedium; line-height: 28px; }
    [class][class].l-size-2  { font-size: 16px; font-family: RobotoRegular; line-height: 24px; }
    [class][class].l-size-1  { font-size: 14px; font-family: RobotoRegular; line-height: 22px; }
    [class][class].l-size-0  { font-size: 9px; font-family: Verdana; line-height: 16px; }
}




@media screen and (max-width: 979.9px) {
    /* Defaults Größe M > können durch setzen der responsiven Size-Klassen überschrieben werden. .m-size-[headlineformat]  */
    h1.xxl,[class].size-10 { font-size: 48px; font-family: RobotoCondensed; line-height: 56px; }
    h1.xl, [class].size-9  { font-size: 40px; font-family: RobotoCondensed; line-height: 48px; }
    h1,    [class].size-8  { font-size: 40px; font-family: RobotoCondensed; line-height: 48px; }
    h2.xl, [class].size-7  { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
    h2,    [class].size-6  { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
    h3.xl, [class].size-5  { font-size: 24px; font-family: RobotoMedium; line-height: 32px; }
    h3,    [class].size-4  { font-size: 20px; font-family: RobotoMedium; line-height: 28px; }
}

@media screen and (min-width: 660px) and (max-width: 979.9px) {
    [class][class].m-size-10 { font-size: 72px; font-family: RobotoCondensed; line-height: 80px; }
    [class][class].m-size-9  { font-size: 64px; font-family: RobotoCondensed; line-height: 72px; }
    [class][class].m-size-8  { font-size: 56px; font-family: RobotoCondensed; line-height: 64px; }
    [class][class].m-size-7  { font-size: 48px; font-family: RobotoCondensed; line-height: 56px; }
    [class][class].m-size-6  { font-size: 40px; font-family: RobotoCondensed; line-height: 48px; }
    [class][class].m-size-5  { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
    [class][class].m-size-4  { font-size: 24px; font-family: RobotoMedium; line-height: 32px; }
    [class][class].m-size-3  { font-size: 20px; font-family: RobotoMedium; line-height: 28px; }
    [class][class].m-size-2  { font-size: 16px; font-family: RobotoRegular; line-height: 24px; }
    [class][class].m-size-1  { font-size: 14px; font-family: RobotoRegular; line-height: 22px; }
    [class][class].m-size-0  { font-size: 9px; font-family: Verdana; line-height: 16px; }
}



@media screen and (max-width: 659.9px) {
    /* Defaults Größe S > können durch setzen der responsiven Size-Klassen überschrieben werden. .s-size-[headlineformat]  */
    h1.xxl,[class].size-10 { font-size: 40px; font-family: RobotoCondensed; line-height: 48px; }
    h1.xl, [class].size-9  { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
    h1,    [class].size-8  { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
    h2.xl, [class].size-7  { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
    h2,    [class].size-6  { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
    h3.xl, [class].size-5  { font-size: 24px; font-family: RobotoMedium; line-height: 32px; }
    h3,    [class].size-4  { font-size: 20px; font-family: RobotoMedium; line-height: 28px; }

    [class][class].s-size-10 { font-size: 72px; font-family: RobotoCondensed; line-height: 80px; }
    [class][class].s-size-9  { font-size: 64px; font-family: RobotoCondensed; line-height: 72px; }
    [class][class].s-size-8  { font-size: 56px; font-family: RobotoCondensed; line-height: 64px; }
    [class][class].s-size-7  { font-size: 48px; font-family: RobotoCondensed; line-height: 56px; }
    [class][class].s-size-6  { font-size: 40px; font-family: RobotoCondensed; line-height: 48px; }
    [class][class].s-size-5  { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
    [class][class].s-size-4  { font-size: 24px; font-family: RobotoMedium; line-height: 32px; }
    [class][class].s-size-3  { font-size: 20px; font-family: RobotoMedium; line-height: 28px; }
    [class][class].s-size-2  { font-size: 16px; font-family: RobotoRegular; line-height: 24px; }
    [class][class].s-size-1  { font-size: 14px; font-family: RobotoRegular; line-height: 22px; }
    [class][class].s-size-0  { font-size: 9px; font-family: Verdana; line-height: 16px; }
}

sup, sub {
    line-height: 0;
}

h1,
h2,
.hero .size-7,
.hero .size-6,
.hero .size-5,
.section-headline > *:not(p):not(.subheadline) {
    color: #1C449B;
}

[class][class].script,
[class][class].subheadline {
    color: #525252;
    font-family: RobotoMedium;
}
/* please set/overwrite 'theme.font.subline-color' if there is a second service-color in the data-json of the services with theme.b2.base */
[class].size-4.script,
[class].size-4.subheadline {
    color: #525252;
}
.list {
    list-style: none;
}
.list li {
    padding: 7px 0px;
    position: relative;
}
.list li:before {
    content: "";
    display: inline-block;
    background-color: #1C449B;
}
ul.list {
    padding-left: 24px;
}
ul.list li:before {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    margin: 0px 8px 0px -24px;
    vertical-align: -2px;
}

/* s-List mit Bullets 8px durchmesser */
ul.s.list {
    padding-left: 16px;
}
ul.s.list li {
    padding: 4px 0px;
}
ul.s.list li:before {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    margin: 0px 8px 0px -16px;
    vertical-align: 2px;
}
/* */

ul.check.list {
    padding-left: 32px;
}
ul.m.check.list {
    padding-left: 28px;
}
ul.s.check.list {
    padding-left: 24px;
}
ol.list {
    padding-left: 40px;
    counter-reset: section 1;
}
ul.check.list:not([class*="size-2"]),
ol.list {
    font-family: 'RobotoMedium', Arial, sans-serif;
    font-size: 20px;
    line-height: 28px;
}
ul.m.check.list {
    font-family: 'RobotoRegular', Verdana, sans-serif;
    font-size: 16px;
    line-height: 24px;
}
ul.s.check.list {
    font-family: 'RobotoRegular', Verdana, sans-serif;
    font-size: 16px;
    line-height: 24px;
}
ul.check.list:not([class*="size-2"]) li,
ol.list li {
    padding: 5px 0px;
}
ul.m.check.list li {
    padding: 7px 0px;
}
ul.s.check.list li {
    padding: 3px 0px;
}
ul.check.list li:before {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    margin: 0px 8px 0px -32px;
    vertical-align: -4px
}
ul.m.check.list li:before {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin: 0px 8px 0px -28px;
    vertical-align: -4px
}
ul.s.check.list li:before {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    margin: 0px 8px 0px -24px;
    vertical-align: -2px
}
ul.check.list li:after {
    content: "";
    position: absolute;
    top: 15px;
    left: -29px;
    width: 3px;
    height: 3px;
    background: transparent;
    -webkit-box-shadow: 0px 1px 0px #FFFFFF, 0px 2px 0px #FFFFFF, 0px 4px 0px #FFFFFF, 0px 6px 0px #FFFFFF, 0px 8px 0px #FFFFFF,
                        2px 8px 0px #FFFFFF, 4px 8px 0px #FFFFFF, 6px 8px 0px #FFFFFF, 8px 8px 0px #FFFFFF, 10px 8px 0px #FFFFFF;
    box-shadow: 0px 1px 0px #FFFFFF, 0px 2px 0px #FFFFFF, 0px 4px 0px #FFFFFF, 0px 6px 0px #FFFFFF, 0px 8px 0px #FFFFFF,
                2px 8px 0px #FFFFFF, 4px 8px 0px #FFFFFF, 6px 8px 0px #FFFFFF, 8px 8px 0px #FFFFFF, 10px 8px 0px #FFFFFF;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
ul.m.check.list li:after {
    content: "";
    position: absolute;
    top: 16px;
    left: -26px;
    width: 3px;
    height: 3px;
    background: transparent;
    -webkit-box-shadow: 0px 2px 0px #FFFFFF, 0px 2px 0px #FFFFFF, 0px 4px 0px #FFFFFF, 0px 6px 0px #FFFFFF, 0px 8px 0px #FFFFFF,
                        2px 8px 0px #FFFFFF, 4px 8px 0px #FFFFFF, 6px 8px 0px #FFFFFF, 8px 8px 0px #FFFFFF, 10px 8px 0px #FFFFFF;
    box-shadow: 0px 2px 0px #FFFFFF, 0px 2px 0px #FFFFFF, 0px 4px 0px #FFFFFF, 0px 6px 0px #FFFFFF, 0px 8px 0px #FFFFFF,
                2px 8px 0px #FFFFFF, 4px 8px 0px #FFFFFF, 6px 8px 0px #FFFFFF, 8px 8px 0px #FFFFFF, 10px 8px 0px #FFFFFF;
    -webkit-transform: scale(0.85) rotate(-45deg);
    -ms-transform: scale(0.85) rotate(-45deg);
    transform: scale(0.85) rotate(-45deg);
}
ul.s.check.list li:after {
    content: "";
    position: absolute;
    top: 12px;
    left: -23px;
    width: 3px;
    height: 3px;
    background: transparent;
    -webkit-box-shadow: 0px 1px 0px #FFFFFF, 0px 2px 0px #FFFFFF, 0px 4px 0px #FFFFFF, 0px 6px 0px #FFFFFF, 0px 8px 0px #FFFFFF,
                        2px 8px 0px #FFFFFF, 4px 8px 0px #FFFFFF, 6px 8px 0px #FFFFFF, 8px 8px 0px #FFFFFF, 10px 8px 0px #FFFFFF;
    box-shadow: 0px 1px 0px #FFFFFF, 0px 2px 0px #FFFFFF, 0px 4px 0px #FFFFFF, 0px 6px 0px #FFFFFF, 0px 8px 0px #FFFFFF,
                2px 8px 0px #FFFFFF, 4px 8px 0px #FFFFFF, 6px 8px 0px #FFFFFF, 8px 8px 0px #FFFFFF, 10px 8px 0px #FFFFFF;
    -webkit-transform: scale(0.68) rotate(-45deg);
    -ms-transform: scale(0.68) rotate(-45deg);
    transform: scale(0.68) rotate(-45deg);
}

ul.check.list[class*="size-"] li:before {
    vertical-align: -6px
}
ul.check.list[class*="size-"] li:after {
    top: 16px;
}

ol.list[start="2"] { counter-reset: section 2; }
ol.list[start="3"] { counter-reset: section 3; }
ol.list[start="4"] { counter-reset: section 4; }
ol.list[start="5"] { counter-reset: section 5; }
ol.list[start="6"] { counter-reset: section 6; }
ol.list[start="7"] { counter-reset: section 7; }
ol.list[start="8"] { counter-reset: section 8; }
ol.list[start="9"] { counter-reset: section 9; }
ol.list[start="10"] { counter-reset: section 10; }
ol.list[start="11"] { counter-reset: section 11; }
ol.list[start="12"] { counter-reset: section 12; }
ol.list[start="13"] { counter-reset: section 13; }
ol.list[start="14"] { counter-reset: section 14; }
ol.list[start="15"] { counter-reset: section 15; }
ol.list[start="16"] { counter-reset: section 16; }
ol.list[start="17"] { counter-reset: section 17; }
ol.list[start="18"] { counter-reset: section 18; }
ol.list[start="19"] { counter-reset: section 19; }
ol.list[start="20"] { counter-reset: section 20; }

ol.list li:before {
    content: counter(section, decimal);
    width: 32px;
    height: 32px;
    border-radius: 16px;
    margin: 0px 8px 0px -40px;
    color: #FFFFFF;
    text-align: center;
    line-height: 32px;
}
ol.list li:after {
    content: "";
    counter-increment: section;
}

ul.text.list,
ol.text.list,
ol.footnotes.list,
ol.default.list {
    padding-left: 0px;
}
ol.default.list {
    list-style: decimal;
    margin-left: 25px;
}
ul.text.list li:before,
ol.text.list li:before,
ol.footnotes.list li:before,
ol.default.list li:before {
    content: none;
    width: 0px;
    height: 0px;
    margin: 0px;
}
ol.footnotes.list li {
    margin-left: 15px;
    padding: 0;
}
ol.footnotes.list li sup {
    position: absolute;
    left: -15px;
    top: 5px;
}
/* Im Firefox Subpixel Rendering Problem, wenn die Y-Position Berechnung mit Kommastelle .5, dann BG (hier Icon) abgeschnitten*/
ul.text.list .m.icon:first-child {
    float: left;
    height: 25px; /*Quick-Fix abgeschnittenes Icon Problem*/
    margin: -1px 8px 0px 0px; /*Ohne Quick-Fix margin-top: 0px*/
}
ul.text.list .s.icon:first-child {
    float: left;
    height: 17px;  /*Quick-Fix abgeschnittenes Icon Problem*/
    margin: 3px 8px 0px 0px; /*Ohne Quick-Fix margin-top: 4px*/
}

ul.inline.list li {
    display: inline;
}
ul.inline-block.list li {
    display: inline-block;
}

ul.horizontal.list li {
    float: left;
}
ul.horizontal.list.align-right {
    float: right;
}
ul.horizontal.badge {
    float: left;
}

ul.inline.list li,
ul.inline-block.list li,
ul.horizontal.list li {
    margin-right: 20px;
}
ul.inline.list.align-center li,
ul.inline-block.list.align-center li {
    margin-left: 10px;
    margin-right: 10px;
}
ul.inline.list.align-right li,
ul.inline-block.list.align-right li,
ul.horizontal.list.align-right li {
    margin-left: 20px;
}
ul.horizontal.index.list li {
    margin-right: 0px;
}
ul.inline.list:not(.align-center) li:last-child,
ul.inline-block.list:not(.align-center) li:last-child,
ul.horizontal.list:not(.align-center) li:last-child {
    margin-right: 0px;
}
ul.single-line.list li {
    white-space: nowrap;
    text-overflow: ellipsis;
}

dl.list dt[class], dd[class] {
  display: inline-block;
  vertical-align: top;
}
dl.list dd[class] {
    margin-left: 0px;
    padding-left: 40px;
    display: inline;
}
.header {
  padding: 0px;
  display: block;
  height: 96px;
  line-height: 97px;
  box-sizing: border-box;
}
.header[class="header"],
.header[class="vline header"] {
  width: 100%;
}
.header > * {
  display: inline-block;
}
.header.center {
  margin: 0 auto;
}
.header > *:first-child,
.header > *:first-child > * {
  color: #FFFFFF;
  font-family: 'RobotoCondensedLight', Verdana, sans-serif;
  font-size: 53px;
  font-weight: 400;
  display: inline-block;
  line-height: inherit;
}
.header > *:first-child > *:first-child {
  display: block;
  background: url(//img.ui-portal.de/cd/ci/gmx.net/brand-logo.svg) no-repeat 0 0;
  background-size: auto 40px;
  color: transparent;
  width: 123px;
  height: 40px;
  overflow: hidden;
  float: left;
  margin: 28px 16px 0px 10px;
  text-indent: -1000px;
}
.header:before {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  min-width: 100%;
  height: 96px;
  border-top: 96px solid #1C449B;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
  background: #FFFFFF;
  box-sizing: border-box;
  z-index: -1;
}
.header.vline:before {
  border-bottom: 0px solid;
}
.header.vline,
.header.vline:before {
  height: 97px;
}
.header .left {
  float: left;
}
.header .right {
  float: right;
}
.header > .container,
.header > .module {
  margin-top: 28px;
}
.header .module {
  line-height: 22px;
}
.header a:hover,
.header a:focus {
  text-decoration: none;
}
@media screen and (min-width: 980px) {
  .header.vline ~ .navigation[class][class] {
    margin-top: -1px;
  }
}
/* Dieser Block wurde nicht geprüft oder getestet!!! */
@media screen and (min-width: 980px) {
  .header.header-layer {
    height: 72px;
    line-height: 73px;
    padding: 0px;
    float: left;
  }
  .header.header-layer[class]:before {
    border-top-width: 72px;
    height: 72px;
    margin-top: 0px;
  }
  .header.header-layer[class].vline,
  .header.header-layer[class].vline:before {
    height: 72px;
  }
  .header.header-layer _::-webkit-full-page-media,
  .header.header-layer _:future,
  :root .header.header-layer:not(.fix, .m-fix) {
    float: none;
    position: relative;
    z-index: 999;
  }
  .no-flex .header.header-layer + * {
    float: none;
    display: inline-block;
  }
  .header.header-layer > *:first-child {
    vertical-align: bottom;
    left: 0px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    margin-left: 20px;
  }
  .header.header-layer > *:first-child,
  .header.header-layer > *:first-child > * {
    font-size: 42px;
  }
  .header.header-layer > *:first-child > *:first-child {
    background: url(//img.ui-portal.de/cd/ci/gmx.net/brand-logo.svg) no-repeat 0 0;
    background-size: auto 32px;
    color: transparent;
    width: 98px;
    height: 32px;
    margin: 20px 13px 0px 0px;
  }
  .header.header-layer > *:first-child + .left {
    margin-left: 10px;
    margin-right: -26px;
  }
  .header.header-layer ~ .navigation,
  .header.header-layer ~ .settings,
  .header.header-layer ~ .wishlist {
    position: absolute;
    margin-top: 0px;
    top: 0px;
    z-index: 9999;
  }
  .header.header-layer ~ .navigation {
    right: 100%;
  }
  .header.header-layer ~ .settings > .head,
  .header.header-layer ~ .wishlist > .head {
    height: 72px;
    line-height: 73px;
  }
  .header.header-layer.vline ~ .settings > .head,
  .header.header-layer.vline ~ .wishlist > .head {
    box-sizing: content-box;
    z-index: 9999;
  }
  .no-flex .header.header-layer ~ .navigation,
  .no-flex .header.header-layer ~ .settings,
  .no-flex .header.header-layer ~ .wishlist {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  .header.header-layer > .container,
  .header.header-layer > .module[class] {
    margin-top: 21px;
  }
  .header.header-layer > .container.right,
  .header.header-layer > .module.right {
    margin-top: 20px;
  }
  .header.header-layer .icon[aria-label]:after {
    bottom: -14px;
  }
  .toggle-nav .header.header-layer:before {
    left: 0px;
  }
  .toggle-settings .header.header-layer:before,
  .toggle-wishlist .header.header-layer:before {
    right: 0px;
  }
}
@media screen and (min-width: 980px) and \\0 screen {
  .header.header-layer:not(.fix, .m-fix) {
    float: none;
    position: relative;
    z-index: 999;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .header {
    height: 72px;
    line-height: 73px;
    padding: 0px;
    float: left;
  }
  .header[class]:before {
    border-top-width: 72px;
    height: 72px;
    margin-top: 0px;
  }
  .header[class].vline,
  .header[class].vline:before {
    height: 72px;
  }
  .header _::-webkit-full-page-media,
  .header _:future,
  :root .header:not(.fix, .m-fix) {
    float: none;
    position: relative;
    z-index: 999;
  }
  .no-flex .header + * {
    float: none;
    display: inline-block;
  }
  .header > *:first-child {
    vertical-align: bottom;
    left: 0px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    margin-left: 20px;
  }
  .header > *:first-child,
  .header > *:first-child > * {
    font-size: 42px;
  }
  .header > *:first-child > *:first-child {
    background: url(//img.ui-portal.de/cd/ci/gmx.net/brand-logo.svg) no-repeat 0 0;
    background-size: auto 32px;
    color: transparent;
    width: 98px;
    height: 32px;
    margin: 20px 13px 0px 0px;
  }
  .header > *:first-child + .left {
    margin-left: 10px;
    margin-right: -26px;
  }
  .header ~ .navigation,
  .header ~ .settings,
  .header ~ .wishlist {
    position: absolute;
    margin-top: 0px;
    top: 0px;
    z-index: 9999;
  }
  .header ~ .navigation {
    right: 100%;
  }
  .header ~ .settings > .head,
  .header ~ .wishlist > .head {
    height: 72px;
    line-height: 73px;
  }
  .header.vline ~ .settings > .head,
  .header.vline ~ .wishlist > .head {
    box-sizing: content-box;
    z-index: 9999;
  }
  .no-flex .header ~ .navigation,
  .no-flex .header ~ .settings,
  .no-flex .header ~ .wishlist {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  .header > .container,
  .header > .module[class] {
    margin-top: 21px;
  }
  .header > .container.right,
  .header > .module.right {
    margin-top: 20px;
  }
  .header .icon[aria-label]:after {
    bottom: -14px;
  }
  .toggle-nav .header:before {
    left: 0px;
  }
  .toggle-settings .header:before,
  .toggle-wishlist .header:before {
    right: 0px;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) and \\0 screen {
  .header:not(.fix, .m-fix) {
    float: none;
    position: relative;
    z-index: 999;
  }
}
@media screen and (max-width: 659.9px) {
  .header {
    height: 48px;
    line-height: 50px;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .header > *:first-child {
    text-indent: -1000px;
    margin: 0px;
    width: 0px;
  }
  .header > *:first-child a:hover {
    text-decoration: none;
  }
  .header:before,
  .header.vline,
  .header.vline:before {
    height: 48px;
    margin-top: 0px;
    border-top-width: 48px;
    border-bottom: 0px;
  }
  .header > *:first-child > *:first-child {
    position: absolute;
    top: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin: 14px 0px 0px 0px;
    font-size: 20px;
    line-height: 50px;
    color: #FFFFFF;
    /*  */
    background: url(//img.ui-portal.de/cd/ci/gmx.net/brand-logo-s.svg) no-repeat 0 0;
    background-size: auto 20px;
    height: 20px;
    width: 62px;
    /*  */
  }
  .header > *:first-child > *:first-child ~ * {
    display: none;
  }
  .header > .container.right[class] {
    margin: 7px 26px 0px 0px;
    min-width: auto;
    width: auto;
  }
  .header > .module.left[class] {
    margin: 8px 0px 0px 10px;
  }
  .header .l-1.module[class][class] {
    min-width: 32px;
    width: auto;
    padding: 0 0 0 8px;
  }
  .header ~ .navigation,
  .header ~ .settings,
  .header ~ .wishlist {
    position: absolute;
    top: 0px;
  }
  .header ~ .navigation {
    right: 100%;
  }
  .header ~ .settings > .head,
  .header ~ .wishlist > .head {
    height: 48px;
    line-height: 48px;
  }
  .header ~ .navigation,
  .header ~ .settings,
  .header ~ .wishlist,
  .no-flex .header ~ .navigation,
  .no-flex .header ~ .settings,
  .no-flex .header ~ .wishlist {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    margin-top: 0px;
  }
  .toggle-nav .header:before {
    left: 0;
  }
  .toggle-settings .header:before,
  .toggle-wishlist .header:before {
    right: 0;
  }
}
/*  */
.header ~ .settings,
.header ~ .wishlist {
  display: none;
  right: -300px;
  width: 300px;
  overflow: hidden;
  position: absolute;
  flex-grow: 0;
}
.header ~ .settings > .head,
.header ~ .wishlist > .head {
  position: relative;
  box-sizing: border-box;
  border-bottom: 1px solid #DADADA;
  margin-bottom: 10px;
}
.header ~ .settings > .head .l.icon,
.header ~ .wishlist > .head .l.icon {
  margin: -10px 10px -10px 10px;
}
.header ~ .settings > .head .close.icon,
.header ~ .wishlist > .head .close.icon {
  position: absolute;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
body {
  -webkit-transition: -webkit-transform 0.12s ease-in-out;
  -ms-transition: -ms-transform 0.12s ease-in-out;
  transition: transform 0.12s ease-in-out;
}
.toggle-nav {
  -webkit-transform: translateX(300px);
  -ms-transform: translateX(300px);
  transform: translateX(300px);
  overflow-x: hidden;
}
@media screen and (max-width: 659.9px) {
  .toggle-nav {
    -webkit-transform: translateX(256px);
    -ms-transform: translateX(256px);
    transform: translateX(256px);
  }
}
.toggle-settings,
.toggle-wishlist {
  -webkit-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  transform: translateX(-300px);
  overflow-x: hidden;
}
.toggle-settings .header ~ .settings,
.toggle-wishlist .header ~ .wishlist {
  display: block;
}
/*  */
/*  */
.header .dialog {
  background: #FFFFFF;
  border-radius: 4px;
  box-sizing: border-box;
  -webkit-box-shadow: 0px 0px 4px 0px #AAAAAA;
  -moz-box-shadow: 0px 0px 4px 0px #AAAAAA;
  box-shadow: 0px 0px 4px 0px #AAAAAA;
  cursor: default;
  position: absolute;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  margin-top: 10px;
  margin-left: 68px;
  z-index: 1200;
  padding: 20px 10px;
}
.header .dialog:before {
  content: "";
  background: #FFFFFF;
  -webkit-box-shadow: -2px -2px 4px -1px #aaaaaa;
  -moz-box-shadow: -2px -2px 4px -1px #aaaaaa;
  box-shadow: -2px -2px 4px -1px #aaaaaa;
  display: block;
  position: absolute;
  margin-top: -26px;
  margin-left: 100%;
  -webkit-transform: translateX(-55px) rotate(45deg);
  -moz-transform: translateX(-55px) rotate(45deg);
  -ms-transform: translateX(-55px) rotate(45deg);
  transform: translateX(-55px) rotate(45deg);
  width: 12px;
  height: 12px;
  z-index: 1;
}
.header .dialog button.fullsize {
  width: 100%;
}
@media all and (min-width:0\0) and (min-resolution: .001dpcm) {
  .header .dialog {
    -ms-transform: translateX(-100%) translateX(-44px) translateY(45px);
  }
}
/*  */
/* Bugfix von Bo aus der Bestellstrecke, damit die Dialog-/Settings-Box keine Skrollbar erzeugt */
/* IE10+ begin: avoid the horizontal scrollbar */
@media screen and (min-width: 660px) {
  _:-ms-lang(x),
  _:-webkit-full-screen,
  body {
    overflow-x: hidden;
  }
}
@media screen and (-ms-high-contrast: active) and (min-width: 660px), (-ms-high-contrast: none) and (min-width: 660px) {
  body {
    overflow-x: hidden;
  }
}
/* IE10+ end: avoid the horizontal scrollbar */
#footer {
    display: block;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-direction: row;
    -ms-flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.no-flex #footer {
    clear: left;
    display: block;
}
.no-flex #footer > .fullwidth {
    width: 100%;
}
#footer .backdrop-c2-light94,
#footer .backdrop-c2-light94 .list a {
    color: #707070;
}
#footer ul.inline.list.align-center li,
#footer ul.inline-block.list.align-center li {
    margin-left: 16px;
    margin-right: 16px;
}
/* DP-13044: Lieferung neues CSS/HTML für Footer Icons (mehr als 2 Logos) */
#footer .horizontal.badge li:nth-child(even) {
    margin-right: 0;
}


/* Abstaede nach oben wegnehmen in den footer-linklisten */
@media screen and (min-width: 980px) {
    #footer .container.vspace-s.l-4 > h4 + .module.l-4 > ul,
    #footer .container.vspace-s.l-8 > .module.l-4 > ul {
        margin-top: -7px;
    }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
    #footer .container.vspace-s.m-4 > h4 + .module.l-4 > ul,
    #footer .container.vspace-s.m-8 > .module.l-4 > ul {
        margin-top: -7px;
    }
}
@media screen and (max-width: 659.9px) {
    #footer .container.vspace-s > h4 + .module.l-4 > ul {
        margin-top: -7px;
    }
}
#footer .container.vspace-s > .module.l-4 > h4 + ul {
    margin-top: -7px;
}
#footer .container.vspace-s > .module.l-4 > h4 + ul.badge {
    margin-top: -5px;
}
.button {
    display: inline-block;
    padding: 5px 15px 5px 0px;
    border: 1px solid;
    min-height: 40px;
    font-style: normal;
    width: auto;
    letter-spacing: 0;
    text-indent: 15px;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
-webkit-transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
        transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
    border-radius: 4px;
    font-family: RobotoMedium, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: middle;
    word-wrap: normal;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
}
.fullwidth.button {
    width: 100%;
}
.button,
.button:hover,
.button:visited,
.button:focus {
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    outline: none;
}
input.button::-moz-focus-inner,
button.button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
.button.m {
    font-family: RobotoMedium, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding-top: 3px;
    padding-bottom: 3px;
    min-height: 32px;
}
.button.xl {
    padding-top: 9px;
    padding-bottom: 9px;
    min-height: 48px;
}
.button.xxl {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    padding-top: 11px;
    padding-bottom: 11px;
    min-height: 56px;
}
.button.xxxl {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    padding-top: 15px;
    padding-bottom: 15px;
    min-height: 64px;
}
.button > .icon {
    float: left;
    position: relative;
    margin-left: 7px;
    margin-right: -7px;
}
.m.button > .s.icon {
    margin-top: -1px;
    margin-bottom: -1px;
}
.l.button > .m.icon {
    margin-top: 2px;
    margin-bottom: 2px;
}
.xl.button > .l.icon {
    margin-top: -2px;
    margin-bottom: -2px;
}
.xxl.button > .xl.icon {
    margin-top: -4px;
    margin-bottom: -4px;
}
.xxxl.button > .xxl.icon {
    margin-top: -8px;
    margin-bottom: -8px;
}
/* This class is required due to Mozilla Firefox Bug https://bugzilla.mozilla.org/show_bug.cgi?id=1287830 and can be removed once fixed */
.button.no-text {
    text-indent: 0px;
}
.button.no-text > .icon {
    margin-right: -8px;
}

.key.button:hover,
.key.button:focus,
.ghost.key.button[class][class][class]:hover,
.ghost.key.button[class][class][class]:focus {
    color: #FFFFFF;
    border-color: #587A03;
    background-color: #587A03;
}
.service.button:hover,
.service.button:focus,
.ghost.service.button[class][class][class]:hover,
.ghost.service.button[class][class][class]:focus {
    color: #FFFFFF;
    border-color: #16367C;
    background-color: #16367C;
}
.secondary.button:hover,
.secondary.button:focus,
.ghost.secondary.button[class][class][class]:hover,
.ghost.secondary.button[class][class][class]:focus {
    color: #FFFFFF;
    border-color: #707070;
    background-color: #707070;
}
.inverted.button:hover,
.inverted.button:focus,
.ghost.inverted.button[class][class][class]:hover,
.ghost.inverted.button[class][class][class]:focus,
.backdrop-b1-base .button.service:hover,
.backdrop-b1-base .button.service:focus,
.backdrop-b1-base .ghost.button[class][class][class]:hover,
.backdrop-b1-base .ghost.button[class][class][class]:focus {
    color: #333333;
    border-color: #F3F3F3;
    background-color: #F3F3F3;
}
.key.button,
.key.button:active,
.ghost.key.button[class][class]:active {
    border-color: #6E9804;
    background-color: #6E9804;
    color: #FFFFFF;
}
.service.button,
.service.button:active,
.ghost.service.button[class][class][class]:active {
    border-color: #1C449B;
    background-color: #1C449B;
    color: #FFFFFF;
}
.secondary.button,
.secondary.button:active,
.ghost.secondary.button[class][class][class]:active {
    border-color: #999999;
    background-color: #999999;
    color: #FFFFFF;
}
.inverted.button,
.inverted.button:active,
.ghost.inverted.button[class][class][class]:active,
.backdrop-b1-base .button.service,
.backdrop-b1-base .button.service:active,
.backdrop-b1-base .ghost.button[class][class][class]:active {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    color: #333333;
}
.key.button[disabled][class][class],
.key.button[aria-disabled][class][class] {
    color: #FFFFFF;
    background-color: #E5ECD2;
    border-color: #E5ECD2;
    cursor: default;
    cursor: not-allowed;
    text-shadow: none;
}
.service.button[disabled][class][class],
.service.button[aria-disabled][class][class] {
    color: #FFFFFF;
    background-color: #D6DDED;
    border-color: #D6DDED;
    cursor: default;
    cursor: not-allowed;
    text-shadow: none;
}
.secondary.button[disabled][class][class],
.secondary.button[aria-disabled][class][class] {
    color: #FFFFFF;
    background-color: #DADADA;
    border-color: #DADADA;
    cursor: default;
    cursor: not-allowed;
    text-shadow: none;
}
.inverted.button[disabled][class][class],
.inverted.button[aria-disabled][class][class] {
    color: #707070;
    background-color: #D6DDED;
    border-color: #D6DDED;
    cursor: default;
    cursor: not-allowed;
    text-shadow: none;
}
.ghost.key.button[class][class][class] {
    color: #6E9804;
    background-color: transparent;
}
.ghost.key.button[class][class][class][disabled],
.ghost.key.button[class][class][class][aria-disabled] {
    color: #E5ECD2;
    border-color: #E5ECD2;
    background-color: transparent;
}
.ghost.service.button[class][class][class] {
    color: #1C449B;
    background-color: transparent;
}
.ghost.service.button[class][class][class][disabled],
.ghost.service.button[class][class][class][aria-disabled] {
    color: #D6DDED;
    border-color: #D6DDED;
    background-color: transparent;
}
.ghost.secondary.button[class][class][class] {
    color: #999999;
    background-color: transparent;
}
.ghost.secondary.button[class][class][class][disabled],
.ghost.secondary.button[class][class][class][aria-disabled] {
    color: #DADADA;
    border-color: #DADADA;
    background-color: transparent;
}
.backdrop-b1-base .ghost.button[class][class][class],
.ghost.inverted.button[class][class][class] {
    color: #FFFFFF;
}
.ghost.inverted.button[class][class][class][disabled],
.ghost.inverted.button[class][class][class][aria-disabled] {
    border-color: #D6DDED;
    color: #D6DDED;
    background-color: transparent;
}

@media screen and (min-width: 980px) {
    .button.l-no-icon .icon { display: none; }
    .button.l-no-text { font-size: 0px; text-indent: 0px; color: transparent; }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
    .button.m-no-icon .icon { display: none; }
    .button.m-no-text { font-size: 0px; text-indent: 0px; color: transparent; }
}
@media screen and (max-width: 659.9px) {
    .button.s-no-icon .icon { display: none; }
    .button.s-no-text { font-size: 0px; text-indent: 0px; color: transparent; }
}


/* APP Buttons */
.button.app.store {
    background: transparent 0 0 no-repeat;
    background-size: cover;
    border: 0px solid;
    border-radius: 0px;
    text-indent: -9999em;
    float: left;
    display: inline-block;
    padding-right: 0;
}
.button.app.apple.store {
    background-image: url(//img.ui-portal.de/cd/ci/btn_applestore.svg);
}
.button.app.google.store {
    background-image: url(//img.ui-portal.de/cd/ci/btn_googlestore.svg);
}
.button.app.windows.store {
    background-image: url(//img.ui-portal.de/cd/ci/btn_windowsstore.svg);
}
/* Umbruch bei Kombination cta + app Button */
.button:not(.store):not(.app) + .store {
    clear: left;
}
/* additional class for key/service/ghost buttons to trigger the app width */
.button.app {
    height: 40px;
    width: 140px;
}
.button.xl.app {
    height: 48px;
    width: 168px;
}
/* Bei zentrierter Darstellung kein float
   Zusatz-Abstand bei 'inline-block' mit Btn-Abstand ausgleichen */
.btn-wrapper {
    margin-left: -20px;
    margin-top: 4px;
    z-index: 9999;
    position: relative;
}
.btn-wrapper + .button-wrapper {
    margin-top: 0px;
}
.btn-wrapper[class][class]:last-child {
    margin-bottom: -20px;
}
/* Btn-Abstand bei Buttons mit btn-wrapper */
.btn-wrapper .button {
    margin-left: 20px;
    margin-right: 0px;
    margin-bottom: 20px;
    float: left;
}
/* CSS aus teaser.css ueberschreiben */
.btn-wrapper[class][class][class] .button {
    margin-top: 0px;
}
.btn-wrapper.align-center {
    margin-left: -15px;
}
.btn-wrapper.align-center .button {
    margin-left: 15px;
    float: none;
}
/* in m-/s-View sollen die Buttons per default l-size haben */
@media screen and (max-width: 979.9px) {
    .btn-wrapper .button.xl.app,
    .btn-wrapper .button.app.store {
        height: 40px;
        width: 140px;
        min-height: 40px;
        padding-bottom: 5px;
        padding-top: 5px;
    }
}
@media screen and (min-width: 980px) {
    .btn-wrapper.l-align-center {
        margin-left: -15px;
    }
    .btn-wrapper.l-align-center .button {
        margin-left: 15px;
        float: none;
    }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
    .btn-wrapper.m-align-center {
        margin-left: -15px;
    }
    .btn-wrapper.m-align-center .button {
        margin-left: 15px;
        float: none;
    }
}
@media screen and (max-width: 659.9px) {
    .btn-wrapper.s-align-center {
        margin-left: -15px;
    }
    .btn-wrapper.s-align-center .button {
        margin-left: 15px;
        float: none;
    }
}

hr {
	border: none;
	margin: 0;
	height: 10px;
	width: 100%;
	background-color: #DADADA;
}

hr.thin {
    height: 2px;
}

hr.thinnest {
    height: 1px;
}

hr.nose.only {
    height: 0px;
}


/* switcher for brand gmx.net, web.de - service-color is only defined by gmx.net */
/*
    #FFFFFF
*/

/* local css necessary because header-html is deprecated and couldn't be updated */
.icon {
    display: inline-block;
    overflow: hidden;
    width: 24px;
    height: 24px;
    background: url(//img.ui-portal.de/cd/agb/gmx.net/sprite.svg) no-repeat;
    background-size: 120px 900px;
    text-indent: -1000px;
}

/* module in module gap-fix */
.grid .module > .module,
.grid .module > .module > .module {
    padding-left: 0;
    padding-right: 0;
}

/* local css necessary because header-html is deprecated and couldn't be updated */
#header {
    
    color: #FFFFFF;
}
#header .container.l-1.right,
#header .container.l-1.right .module.l-1 {
    width: 80px;
    max-width: 80px;
    min-width: auto;
}
#header .container.l-1.right .module:hover {
    color: #D6DDED;
    cursor: pointer;
}
#header .container.l-1.right .module .print.icon {
    background-position: 0px -30px;
    margin-top: 3px;
}
#header .icon + div {
    margin-top: -3px;
}
#header .container.l-1.right .module:hover .print.icon {
    background-position: -30px -30px;
}

/* Boxing for Header (html deprecated) */
@media screen and (min-width: 980px) {
    body > .grid > header.fullwidth {
        width: 1000px;
        max-width: 1000px;
        min-width: auto;
        padding-right: 20px;
        padding-left: 20px;
    }
}
@media screen and (max-width: 979.9px) {
    #header .icon + div {
        margin-top: -8px;
    }
}
@media screen and (max-width: 659.9px) {
    #header .container.l-1.right,
    #header .container.l-1.right .module.l-1 {
        width: auto;
    }
    .header > .container.right[class] {
        margin: 7px 10px 0 0;
    }
}

.toc.list {
    padding-left: 30px;
}
.toc.list li {
    font-family: 'RobotoRegular';
    font-size: 16px;
    line-height: 22px;
}
.toc.list li:before {
    content: none;
}
.toc.list li a:before {
    content: counter(section, decimal) ".";
    margin-left: -30px;
    width: 30px;
    display: inline-block;
}

span.scroll-top.button[class] {
    position: fixed;
    bottom: 30px;
    right: 30px;
    opacity: 0;
    padding: 7px;
    margin: 0;
    text-indent: 0;
    min-height: 0;
}
span.scroll-top.button[class] .icon {
    padding: 0;
    margin: 0;
}
.is-scrolled span.scroll-top.button[class] {
    opacity: 1;
}

hr.thinnest.form {
    background-color: #DADADA;
}
hr.transparent {
    background-color: transparent;
}