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;
}
/* 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 */
.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;
}
[data-alignment="left"] {
  text-align: left;
}
[data-alignment="right"] {
  text-align: right;
}
[data-alignment="center"] {
  text-align: center;
}
[data-alignment="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][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-fix > .l-l1[class] {
    margin-left: 80px;
  }
  .l-fix > .l-r1[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-fix > .l-l2[class] {
    margin-left: 160px;
  }
  .l-fix > .l-r2[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-fix > .l-l3[class] {
    margin-left: 240px;
  }
  .l-fix > .l-r3[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-fix > .l-l4[class] {
    margin-left: 320px;
  }
  .l-fix > .l-r4[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-fix .l-l5[class] {
    margin-left: 400px;
  }
  .l-fix .l-r5[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;
  }
  .l-fix .l-l6[class] {
    margin-left: 480px;
  }
  .l-fix .l-r6[class] {
    margin-right: 480px;
  }
  .l-t1[class] {
    margin-top: 80px;
  }
  .l-t2[class] {
    margin-top: 160px;
  }
  .l-t3[class] {
    margin-top: 240px;
  }
  .l-t4[class] {
    margin-top: 320px;
  }
  .l-b1[class] {
    margin-bottom: 80px;
  }
  .l-b2[class] {
    margin-bottom: 160px;
  }
  .l-b3[class] {
    margin-bottom: 240px;
  }
  .l-b4[class] {
    margin-bottom: 320px;
  }
  /*  */
  .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][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-fix > .m-l1[class] {
    margin-left: 80px;
  }
  .m-fix > .m-r1[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-fix > .m-l2[class] {
    margin-left: 160px;
  }
  .m-fix > .m-r2[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-fix > .m-l3[class] {
    margin-left: 240px;
  }
  .m-fix > .m-r3[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;
  }
  .m-fix > .m-l4[class] {
    margin-left: 320px;
  }
  .m-fix > .m-r4[class] {
    margin-right: 320px;
  }
  .m-t1[class] {
    margin-top: 80px;
  }
  .m-t2[class] {
    margin-top: 160px;
  }
  .m-t3[class] {
    margin-top: 240px;
  }
  .m-t4[class] {
    margin-top: 320px;
  }
  .m-b1[class] {
    margin-bottom: 80px;
  }
  .m-b2[class] {
    margin-bottom: 160px;
  }
  .m-b3[class] {
    margin-bottom: 240px;
  }
  .m-b4[class] {
    margin-bottom: 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][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;
  }
  .s-t1[class] {
    margin-top: 80px;
  }
  .s-t2[class] {
    margin-top: 160px;
  }
  .s-t3[class] {
    margin-top: 240px;
  }
  .s-t4[class] {
    margin-top: 320px;
  }
  .s-b1[class] {
    margin-bottom: 80px;
  }
  .s-b2[class] {
    margin-bottom: 160px;
  }
  .s-b3[class] {
    margin-bottom: 240px;
  }
  .s-b4[class] {
    margin-bottom: 320px;
  }
  /*  */
  .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;
    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:not([class*="backdrop"]) > .grid {
    background-color: #FFFFFF;
  }
  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.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;
  }
}
/* page.ajax.suggest: not-found message in suggestion container */
li[disabled] {
  pointer-events: none;
  font-style: italic;
  font-size: 14px;
  background-color: #707070;
}
/* show-focus-indicator general outline */
body.show-focus-indicator *:focus {
  outline: 5px solid #45f7ff !important;
  outline-offset: 5px;
}
body.show-focus-indicator a:focus {
  text-decoration: none !important;
}
/* special outline offset for buttons */
body.show-focus-indicator [role="button"]:focus,
body.show-focus-indicator button:focus {
  outline-offset: 0;
}
/* special outline offset for navigation buttons in slider */
body.show-focus-indicator .slider-container ol[role="navigation"] [role="button"]:focus {
  outline-offset: -5px;
}
/* special outline offset for navigation component */
body.show-focus-indicator .navigation *:focus {
  outline-offset: -5px;
}
/* special outline fix for IE11 */
_:-ms-fullscreen,
:root body.show-focus-indicator .navigation *:not(.icon.close):focus {
  position: relative;
}
_:-ms-fullscreen,
:root body.show-focus-indicator .navigation *:focus {
  outline: none !important;
}
_:-ms-fullscreen,
:root body.show-focus-indicator .navigation *:focus:before {
  border: 5px solid #45f7ff;
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
/**/
/* special outline offset for header component */
body.show-focus-indicator [data-cc*="header"] *:focus {
  outline-offset: 0;
}
body.show-focus-indicator [data-cc*="header"] [data-hide-nodes] *:focus {
  outline-offset: 0;
}
body.show-focus-indicator [data-cc*="header"] .l-show-text:focus,
body.show-focus-indicator [data-cc*="header"] .show-text:focus,
body.show-focus-indicator [data-cc*="header"] form *:focus {
  outline-offset: 15px;
}
/* */
@media screen and (max-width: 979.9px) {
  body.show-focus-indicator [data-cc*="header"] .m-show-text:focus {
    outline-offset: 0;
  }
}
body.show-focus-indicator [data-cc*="settings"] form .info.icon:focus,
body.show-focus-indicator [data-cc*="settings"] form a:focus,
body.show-focus-indicator [data-cc*="header"] form a:focus,
body.show-focus-indicator [data-cc*="header"] form .info.icon:focus {
  outline-offset: 0;
}
body.show-focus-indicator [data-cc*="settings"] {
  padding-bottom: 5px;
}
/* for cat module searchform */
body.show-focus-indicator form.search button[type="reset"] {
  height: 24px;
  width: 24px;
}
body.show-focus-indicator form.search button[type="reset"] span.close.icon {
  position: absolute;
  top: 0;
  left: 0;
}
/* special outline offset for accordion component */
body.show-focus-indicator .akkordeon .summary:focus {
  outline-offset: -5px;
}
/* special outline fix for IE11 */
_:-ms-fullscreen,
:root body.show-focus-indicator .akkordeon .summary:focus {
  position: relative;
  outline: none !important;
}
_:-ms-fullscreen,
:root body.show-focus-indicator .akkordeon .summary:focus:before {
  border: 5px solid #45f7ff;
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
/**/
/* set display for visual a tag inside teaser component */
body.show-focus-indicator .teaser .visual a {
  display: block;
  height: inherit;
}
body.show-focus-indicator .teaser .visual a:focus {
  outline-offset: -5px;
}
/* headline with links in text component */
body.show-focus-indicator a:focus h1,
body.show-focus-indicator a:focus h2,
body.show-focus-indicator a:focus h3,
body.show-focus-indicator a:focus h4,
body.show-focus-indicator a:focus h5,
body.show-focus-indicator a:focus h6 {
  outline: 5px solid #45f7ff !important;
  outline-offset: 5px;
}
/* remove outline for paging component */
body.show-focus-indicator .paging *:focus {
  outline-offset: 0px;
}
/* form */
body.show-focus-indicator form input[type="checkbox"]:focus + label::before,
body.show-focus-indicator form input[type="radio"]:focus + label::before,
body.show-focus-indicator form a:focus,
body.show-focus-indicator form textarea:focus,
body.show-focus-indicator form input:focus,
body.show-focus-indicator form button:focus,
body.show-focus-indicator form select:focus,
body.show-focus-indicator form .fieldset[data-type="value-picker"] .field.action button:focus span {
  outline: 5px solid #45f7ff !important;
  outline-offset: 0 !important;
}
body.show-focus-indicator form .fieldset[data-type="value-picker"] .field.action button:focus {
  outline: none !important;
}
body.show-focus-indicator form [data-cc-sub="identity"] .info.icon:focus {
  outline-offset: 0;
}
/* stepper */
body.show-focus-indicator [data-cc="stepper"][data-layout="arrows"] *:focus::after {
  outline: 5px solid #45f7ff !important;
  outline-offset: -5px;
}
body.show-focus-indicator [data-cc="stepper"][data-layout="arrows"] *:focus {
  outline: none !important;
}
/* Safari fix for stepper if the a tag has no height and width */
@media screen and (max-width: 979.9px) {
  body [data-cc="stepper"][data-layout="arrows"] ol[data-list-style="icon"][data-list-orientation="horizontal"] a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
/* set overflow to visible for paging component when show focus indicator is present */
body.show-focus-indicator ol.paging {
  overflow: visible;
}
/* firefox fix for dialog close icon */
body.show-focus-indicator [data-cc="dialog"] .dialog-closer span:focus {
  outline: none !important;
}
body.show-focus-indicator [data-cc="dialog"] .dialog-closer:focus-within {
  outline: 5px solid #45f7ff !important;
}
/* bullets need to override the existing outline and have a different outline offset */
body.show-focus-indicator .slider-container ol.bulletPoints *:focus {
  outline-offset: 5px;
}
body.show-focus-indicator .slider-container .teaser .visual a {
  display: block;
}
/* fix for cmf footer, should use data-cc="footer" in the future */
body.show-focus-indicator #footer .text.list:not(.badge) a {
  display: inline-block;
}
body.show-focus-indicator #footer .text.list.badge a {
  display: inline-block;
  outline-offset: 0;
}
@font-face {
  font-family: 'DroidRegular';
  src: url('https://img.ui-portal.de/ci/mailcom/global/fonts/DroidSans/DroidSans-webfont.eot');
  src: url('https://img.ui-portal.de/ci/mailcom/global/fonts/DroidSans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), url('https://img.ui-portal.de/ci/mailcom/global/fonts/DroidSans/DroidSans-webfont.woff') format('woff'), url('https://img.ui-portal.de/ci/mailcom/global/fonts/DroidSans/DroidSans-webfont.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'DroidRegular';
  src: url('https://img.ui-portal.de/ci/mailcom/global/fonts/DroidSans/DroidSans-webfont.eot');
  src: url('https://img.ui-portal.de/ci/mailcom/global/fonts/DroidSans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'), url('https://img.ui-portal.de/ci/mailcom/global/fonts/DroidSans/DroidSans-webfont.woff') format('woff'), url('https://img.ui-portal.de/ci/mailcom/global/fonts/DroidSans/DroidSans-webfont.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
body {
  font-family: "DroidRegular", 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: #004788;
  text-decoration: none;
}
a:active,
a:visited,
.link-visited {
  color: #004788;
}
a:hover,
a:focus,
.link-base:hover,
.link-hover {
  color: #004788;
  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: DroidRegular;
  line-height: 80px;
}
h1.xl,
h1 big,
[class].size-9 {
  font-size: 64px;
  font-family: DroidRegular;
  line-height: 72px;
}
h1,
h2 big,
[class].size-8 {
  font-size: 56px;
  font-family: DroidRegular;
  line-height: 64px;
}
h2.xl,
[class].size-7 {
  font-size: 48px;
  font-family: DroidRegular;
  line-height: 56px;
}
h2,
h3 big,
h1 small,
[class].size-6 {
  font-size: 40px;
  font-family: DroidRegular;
  line-height: 48px;
}
h3.xl,
[class].size-5 {
  font-size: 32px;
  font-family: DroidRegular;
  line-height: 40px;
}
h3,
h4 big,
h2 small,
[class].size-4 {
  font-size: 24px;
  font-family: DroidRegular;
  line-height: 32px;
}
h4,
h5 big,
h6 big,
h3 small,
[class].size-3 {
  font-size: 20px;
  font-family: DroidRegular;
  line-height: 28px;
}
p,
h5,
h6,
p big,
[class].size-2 {
  font-size: 16px;
  font-family: DroidRegular;
  line-height: 24px;
}
p small,
h5 small,
h6 small,
.note,
[class].size-1 {
  font-size: 14px;
  font-family: DroidRegular;
  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: DroidRegular;
    line-height: 80px;
  }
  [class][class].l-size-9 {
    font-size: 64px;
    font-family: DroidRegular;
    line-height: 72px;
  }
  [class][class].l-size-8 {
    font-size: 56px;
    font-family: DroidRegular;
    line-height: 64px;
  }
  [class][class].l-size-7 {
    font-size: 48px;
    font-family: DroidRegular;
    line-height: 56px;
  }
  [class][class].l-size-6 {
    font-size: 40px;
    font-family: DroidRegular;
    line-height: 48px;
  }
  [class][class].l-size-5 {
    font-size: 32px;
    font-family: DroidRegular;
    line-height: 40px;
  }
  [class][class].l-size-4 {
    font-size: 24px;
    font-family: DroidRegular;
    line-height: 32px;
  }
  [class][class].l-size-3 {
    font-size: 20px;
    font-family: DroidRegular;
    line-height: 28px;
  }
  [class][class].l-size-2 {
    font-size: 16px;
    font-family: DroidRegular;
    line-height: 24px;
  }
  [class][class].l-size-1 {
    font-size: 14px;
    font-family: DroidRegular;
    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: DroidRegular;
    line-height: 56px;
  }
  h1.xl,
  h1 big,
  [class].size-9 {
    font-size: 40px;
    font-family: DroidRegular;
    line-height: 48px;
  }
  h1,
  h2 big,
  [class].size-8 {
    font-size: 40px;
    font-family: DroidRegular;
    line-height: 48px;
  }
  h2.xl,
  [class].size-7 {
    font-size: 32px;
    font-family: DroidRegular;
    line-height: 40px;
  }
  h2,
  h3 big,
  h1 small,
  [class].size-6 {
    font-size: 32px;
    font-family: DroidRegular;
    line-height: 40px;
  }
  h3.xl,
  [class].size-5 {
    font-size: 24px;
    font-family: DroidRegular;
    line-height: 32px;
  }
  h3,
  h4 big,
  h2 small,
  [class].size-4 {
    font-size: 20px;
    font-family: DroidRegular;
    line-height: 28px;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  [class][class].m-size-10 {
    font-size: 72px;
    font-family: DroidRegular;
    line-height: 80px;
  }
  [class][class].m-size-9 {
    font-size: 64px;
    font-family: DroidRegular;
    line-height: 72px;
  }
  [class][class].m-size-8 {
    font-size: 56px;
    font-family: DroidRegular;
    line-height: 64px;
  }
  [class][class].m-size-7 {
    font-size: 48px;
    font-family: DroidRegular;
    line-height: 56px;
  }
  [class][class].m-size-6 {
    font-size: 40px;
    font-family: DroidRegular;
    line-height: 48px;
  }
  [class][class].m-size-5 {
    font-size: 32px;
    font-family: DroidRegular;
    line-height: 40px;
  }
  [class][class].m-size-4 {
    font-size: 24px;
    font-family: DroidRegular;
    line-height: 32px;
  }
  [class][class].m-size-3 {
    font-size: 20px;
    font-family: DroidRegular;
    line-height: 28px;
  }
  [class][class].m-size-2 {
    font-size: 16px;
    font-family: DroidRegular;
    line-height: 24px;
  }
  [class][class].m-size-1 {
    font-size: 14px;
    font-family: DroidRegular;
    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: DroidRegular;
    line-height: 48px;
  }
  h1.xl,
  h1 big,
  [class].size-9 {
    font-size: 32px;
    font-family: DroidRegular;
    line-height: 40px;
  }
  h1,
  h2 big,
  [class].size-8 {
    font-size: 32px;
    font-family: DroidRegular;
    line-height: 40px;
  }
  h2.xl,
  [class].size-7 {
    font-size: 32px;
    font-family: DroidRegular;
    line-height: 40px;
  }
  h2,
  h3 big,
  h1 small,
  [class].size-6 {
    font-size: 32px;
    font-family: DroidRegular;
    line-height: 40px;
  }
  h3.xl,
  [class].size-5 {
    font-size: 24px;
    font-family: DroidRegular;
    line-height: 32px;
  }
  h3,
  h4 big,
  h2 small,
  [class].size-4 {
    font-size: 20px;
    font-family: DroidRegular;
    line-height: 28px;
  }
  [class][class].s-size-10 {
    font-size: 72px;
    font-family: DroidRegular;
    line-height: 80px;
  }
  [class][class].s-size-9 {
    font-size: 64px;
    font-family: DroidRegular;
    line-height: 72px;
  }
  [class][class].s-size-8 {
    font-size: 56px;
    font-family: DroidRegular;
    line-height: 64px;
  }
  [class][class].s-size-7 {
    font-size: 48px;
    font-family: DroidRegular;
    line-height: 56px;
  }
  [class][class].s-size-6 {
    font-size: 40px;
    font-family: DroidRegular;
    line-height: 48px;
  }
  [class][class].s-size-5 {
    font-size: 32px;
    font-family: DroidRegular;
    line-height: 40px;
  }
  [class][class].s-size-4 {
    font-size: 24px;
    font-family: DroidRegular;
    line-height: 32px;
  }
  [class][class].s-size-3 {
    font-size: 20px;
    font-family: DroidRegular;
    line-height: 28px;
  }
  [class][class].s-size-2 {
    font-size: 16px;
    font-family: DroidRegular;
    line-height: 24px;
  }
  [class][class].s-size-1 {
    font-size: 14px;
    font-family: DroidRegular;
    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: #004788;
}
[class][class].script,
[class][class].subheadline {
  color: #525252;
  font-family: DroidRegular;
}
/* 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;
}
/* Several predefined base font colors */
.color-a1-base {
  color: #008000;
}
.color-b1-base {
  color: #004788;
}
.color-b2-base {
  color: #004788;
}
.color-c1-base {
  color: #FFFFFF;
}
.color-c2-light50,
.footnote {
  color: #999999;
}
.color-d1-base {
  color: #D40000;
}
.color-d2-base {
  color: #F0BC00;
}
.color-d3-base {
  color: #5CB82A;
}
.color-d4-base {
  color: #1C8AD9;
}
[class*="backdrop"] {
  position: relative;
}
[class*="backdrop"]:before {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 100%;
  z-index: -1;
  -webkit-transition: background-color 0.25s;
  -ms-transition: background-color 0.25s;
  transition: background-color 0.25s;
}
.teaser > [class*="backdrop"]:before {
  left: 10px;
  right: 10px;
}
[class*="backdrop"].rounded:before {
  border-radius: 4px;
}
[class*="backdrop"].circle:before {
  border-radius: 50%;
}
.backdrop-a1-dark20:before,
.backdrop-hover-a1-dark20:hover:before,
.teaser:hover .backdrop-hover-a1-dark20:before {
  background-color: #006600;
}
.backdrop-a1-dark10:before,
.backdrop-hover-a1-dark10:hover:before,
.teaser:hover .backdrop-hover-a1-dark10:before {
  background-color: #007300;
}
.backdrop-a1-base:before,
.backdrop-hover-a1-base:hover:before,
.teaser:hover .backdrop-hover-a1-base:before {
  background-color: #008000;
}
.backdrop-a1-light15:before,
.backdrop-hover-a1-light15:hover:before,
.teaser:hover .backdrop-hover-a1-light15:before {
  background-color: #269326;
}
.backdrop-a1-light30:before,
.backdrop-hover-a1-light30:hover:before,
.teaser:hover .backdrop-hover-a1-light30:before {
  background-color: #4DA64D;
}
.backdrop-a1-light50:before,
.backdrop-hover-a1-light50:hover:before,
.teaser:hover .backdrop-hover-a1-light50:before {
  background-color: #80C080;
}
.backdrop-a1-light70:before,
.backdrop-hover-a1-light70:hover:before,
.teaser:hover .backdrop-hover-a1-light70:before {
  background-color: #B3D9B3;
}
.backdrop-a1-light82:before,
.backdrop-hover-a1-light82:hover:before,
.teaser:hover .backdrop-hover-a1-light82:before {
  background-color: #D1E8D1;
}
.backdrop-a1-light94:before,
.backdrop-hover-a1-light94:hover:before,
.teaser:hover .backdrop-hover-a1-light94:before {
  background-color: #F0F7F0;
}
.backdrop-b1-dark20:before,
.backdrop-hover-b1-dark20:hover:before,
.teaser:hover .backdrop-hover-b1-dark20:before {
  background-color: #00396D;
}
.backdrop-b1-dark10:before,
.backdrop-hover-b1-dark10:hover:before,
.teaser:hover .backdrop-hover-b1-dark10:before {
  background-color: #00407A;
}
.backdrop-b1-base:before,
.backdrop-hover-b1-base:hover:before,
.teaser:hover .backdrop-hover-b1-base:before {
  background-color: #004788;
}
.backdrop-b1-light15:before,
.backdrop-hover-b1-light15:hover:before,
.teaser:hover .backdrop-hover-b1-light15:before {
  background-color: #26639A;
}
.backdrop-b1-light30:before,
.backdrop-hover-b1-light30:hover:before,
.teaser:hover .backdrop-hover-b1-light30:before {
  background-color: #4D7EAC;
}
.backdrop-b1-light50:before,
.backdrop-hover-b1-light50:hover:before,
.teaser:hover .backdrop-hover-b1-light50:before {
  background-color: #80A3C4;
}
.backdrop-b1-light70:before,
.backdrop-hover-b1-light70:hover:before,
.teaser:hover .backdrop-hover-b1-light70:before {
  background-color: #B3C8DB;
}
.backdrop-b1-light82:before,
.backdrop-hover-b1-light82:hover:before,
.teaser:hover .backdrop-hover-b1-light82:before {
  background-color: #D1DEEA;
}
.backdrop-b1-light94:before,
.backdrop-hover-b1-light94:hover:before,
.teaser:hover .backdrop-hover-b1-light94:before {
  background-color: #F0F4F8;
}
.backdrop-b2-dark20:before,
.backdrop-hover-b2-dark20:hover:before,
.teaser:hover .backdrop-hover-b2-dark20:before {
  background-color: #00396D;
}
.backdrop-b2-dark10:before,
.backdrop-hover-b2-dark10:hover:before,
.teaser:hover .backdrop-hover-b2-dark10:before {
  background-color: #00407A;
}
.backdrop-b2-base:before,
.backdrop-hover-b2-base:hover:before,
.teaser:hover .backdrop-hover-b2-base:before {
  background-color: #004788;
}
.backdrop-b2-light15:before,
.backdrop-hover-b2-light15:hover:before,
.teaser:hover .backdrop-hover-b2-light15:before {
  background-color: #26639A;
}
.backdrop-b2-light30:before,
.backdrop-hover-b2-light30:hover:before,
.teaser:hover .backdrop-hover-b2-light30:before {
  background-color: #4D7EAC;
}
.backdrop-b2-light50:before,
.backdrop-hover-b2-light50:hover:before,
.teaser:hover .backdrop-hover-b2-light50:before {
  background-color: #80A3C4;
}
.backdrop-b2-light70:before,
.backdrop-hover-b2-light70:hover:before,
.teaser:hover .backdrop-hover-b2-light70:before {
  background-color: #B3C8DB;
}
.backdrop-b2-light82:before,
.backdrop-hover-b2-light82:hover:before,
.teaser:hover .backdrop-hover-b2-light82:before {
  background-color: #D1DEEA;
}
.backdrop-b2-light94:before,
.backdrop-hover-b2-light94:hover:before,
.teaser:hover .backdrop-hover-b2-light94:before {
  background-color: #F0F4F8;
}
.backdrop-c1-base:before,
.backdrop-hover-c1-base:hover:before,
.teaser:hover .backdrop-hover-c1-base:before {
  background-color: #FFFFFF;
}
.backdrop-c2-dark20:before,
.backdrop-hover-c2-dark20:hover:before,
.teaser:hover .backdrop-hover-c2-dark20:before {
  background-color: #292929;
}
.backdrop-c2-dark10:before,
.backdrop-hover-c2-dark10:hover:before,
.teaser:hover .backdrop-hover-c2-dark10:before {
  background-color: #2E2E2E;
}
.backdrop-c2-base:before,
.backdrop-hover-c2-base:hover:before,
.teaser:hover .backdrop-hover-c2-base:before {
  background-color: #333333;
}
.backdrop-c2-light15:before,
.backdrop-hover-c2-light15:hover:before,
.teaser:hover .backdrop-hover-c2-light15:before {
  background-color: #525252;
}
.backdrop-c2-light30:before,
.backdrop-hover-c2-light30:hover:before,
.teaser:hover .backdrop-hover-c2-light30:before {
  background-color: #707070;
}
.backdrop-c2-light50:before,
.backdrop-hover-c2-light50:hover:before,
.teaser:hover .backdrop-hover-c2-light50:before {
  background-color: #999999;
}
.backdrop-c2-light70:before,
.backdrop-hover-c2-light70:hover:before,
.teaser:hover .backdrop-hover-c2-light70:before {
  background-color: #C2C2C2;
}
.backdrop-c2-light82:before,
.backdrop-hover-c2-light82:hover:before,
.teaser:hover .backdrop-hover-c2-light82:before {
  background-color: #DADADA;
}
.backdrop-c2-light92:before,
.backdrop-hover-c2-light92:hover:before,
.teaser:hover .backdrop-hover-c2-light92:before {
  background-color: ;
}
.backdrop-c2-light94:before,
.backdrop-hover-c2-light94:hover:before,
.teaser:hover .backdrop-hover-c2-light94:before {
  background-color: #F3F3F3;
}
/* Hinweisfarben */
.backdrop-d1-dark20:before,
.backdrop-hover-d1-dark20:hover:before,
.teaser:hover .backdrop-hover-d1-dark20:before {
  background-color: #AA0000;
}
.backdrop-d1-dark10:before,
.backdrop-hover-d1-dark10:hover:before,
.teaser:hover .backdrop-hover-d1-dark10:before {
  background-color: #BF0000;
}
.backdrop-d1-base:before,
.backdrop-hover-d1-base:hover:before,
.teaser:hover .backdrop-hover-d1-base:before {
  background-color: #D40000;
}
.backdrop-d1-light15:before,
.backdrop-hover-d1-light15:hover:before,
.teaser:hover .backdrop-hover-d1-light15:before {
  background-color: #DA2626;
}
.backdrop-d1-light30:before,
.backdrop-hover-d1-light30:hover:before,
.teaser:hover .backdrop-hover-d1-light30:before {
  background-color: #E14D4D;
}
.backdrop-d1-light50:before,
.backdrop-hover-d1-light50:hover:before,
.teaser:hover .backdrop-hover-d1-light50:before {
  background-color: #EA8080;
}
.backdrop-d1-light70:before,
.backdrop-hover-d1-light70:hover:before,
.teaser:hover .backdrop-hover-d1-light70:before {
  background-color: #F2B3B3;
}
.backdrop-d1-light82:before,
.backdrop-hover-d1-light82:hover:before,
.teaser:hover .backdrop-hover-d1-light82:before {
  background-color: #F7D1D1;
}
.backdrop-d1-light94:before,
.backdrop-hover-d1-light94:hover:before,
.teaser:hover .backdrop-hover-d1-light94:before {
  background-color: #FCF0F0;
}
.backdrop-d2-dark20:before,
.backdrop-hover-d2-dark20:hover:before,
.teaser:hover .backdrop-hover-d2-dark20:before {
  background-color: #C09600;
}
.backdrop-d2-dark10:before,
.backdrop-hover-d2-dark10:hover:before,
.teaser:hover .backdrop-hover-d2-dark10:before {
  background-color: #D8A900;
}
.backdrop-d2-base:before,
.backdrop-hover-d2-base:hover:before,
.teaser:hover .backdrop-hover-d2-base:before {
  background-color: #F0BC00;
}
.backdrop-d2-light15:before,
.backdrop-hover-d2-light15:hover:before,
.teaser:hover .backdrop-hover-d2-light15:before {
  background-color: #F2C626;
}
.backdrop-d2-light30:before,
.backdrop-hover-d2-light30:hover:before,
.teaser:hover .backdrop-hover-d2-light30:before {
  background-color: #F5D04D;
}
.backdrop-d2-light50:before,
.backdrop-hover-d2-light50:hover:before,
.teaser:hover .backdrop-hover-d2-light50:before {
  background-color: #F8DE80;
}
.backdrop-d2-light70:before,
.backdrop-hover-d2-light70:hover:before,
.teaser:hover .backdrop-hover-d2-light70:before {
  background-color: #FBEBB3;
}
.backdrop-d2-light82:before,
.backdrop-hover-d2-light82:hover:before,
.teaser:hover .backdrop-hover-d2-light82:before {
  background-color: #FCF3D1;
}
.backdrop-d2-light94:before,
.backdrop-hover-d2-light94:hover:before,
.teaser:hover .backdrop-hover-d2-light94:before {
  background-color: #FEFBF0;
}
.backdrop-d3-dark20:before,
.backdrop-hover-d3-dark20:hover:before,
.teaser:hover .backdrop-hover-d3-dark20:before {
  background-color: #4A9322;
}
.backdrop-d3-dark10:before,
.backdrop-hover-d3-dark10:hover:before,
.teaser:hover .backdrop-hover-d3-dark10:before {
  background-color: #53A626;
}
.backdrop-d3-base:before,
.backdrop-hover-d3-base:hover:before,
.teaser:hover .backdrop-hover-d3-base:before {
  background-color: #5CB82A;
}
.backdrop-d3-light15:before,
.backdrop-hover-d3-light15:hover:before,
.teaser:hover .backdrop-hover-d3-light15:before {
  background-color: #74C34A;
}
.backdrop-d3-light30:before,
.backdrop-hover-d3-light30:hover:before,
.teaser:hover .backdrop-hover-d3-light30:before {
  background-color: #8DCD6A;
}
.backdrop-d3-light50:before,
.backdrop-hover-d3-light50:hover:before,
.teaser:hover .backdrop-hover-d3-light50:before {
  background-color: #AEDC95;
}
.backdrop-d3-light70:before,
.backdrop-hover-d3-light70:hover:before,
.teaser:hover .backdrop-hover-d3-light70:before {
  background-color: #CEEABF;
}
.backdrop-d3-light82:before,
.backdrop-hover-d3-light82:hover:before,
.teaser:hover .backdrop-hover-d3-light82:before {
  background-color: #E2F2D9;
}
.backdrop-d3-light94:before,
.backdrop-hover-d3-light94:hover:before,
.teaser:hover .backdrop-hover-d3-light94:before {
  background-color: #F5FBF2;
}
.backdrop-d4-dark20:before,
.backdrop-hover-d4-dark20:hover:before,
.teaser:hover .backdrop-hover-d4-dark20:before {
  background-color: #166EAE;
}
.backdrop-d4-dark10:before,
.backdrop-hover-d4-dark10:hover:before,
.teaser:hover .backdrop-hover-d4-dark10:before {
  background-color: #197CC3;
}
.backdrop-d4-base:before,
.backdrop-hover-d4-base:hover:before,
.teaser:hover .backdrop-hover-d4-base:before {
  background-color: #1C8AD9;
}
.backdrop-d4-light15:before,
.backdrop-hover-d4-light15:hover:before,
.teaser:hover .backdrop-hover-d4-light15:before {
  background-color: #3E9CDF;
}
.backdrop-d4-light30:before,
.backdrop-hover-d4-light30:hover:before,
.teaser:hover .backdrop-hover-d4-light30:before {
  background-color: #60ADE4;
}
.backdrop-d4-light50:before,
.backdrop-hover-d4-light50:hover:before,
.teaser:hover .backdrop-hover-d4-light50:before {
  background-color: #8EC5EC;
}
.backdrop-d4-light70:before,
.backdrop-hover-d4-light70:hover:before,
.teaser:hover .backdrop-hover-d4-light70:before {
  background-color: #BBDCF4;
}
.backdrop-d4-light82:before,
.backdrop-hover-d4-light82:hover:before,
.teaser:hover .backdrop-hover-d4-light82:before {
  background-color: #D6EAF8;
}
.backdrop-d4-light94:before,
.backdrop-hover-d4-light94:hover:before,
.teaser:hover .backdrop-hover-d4-light94:before {
  background-color: #F1F8FD;
}
/* Hinweisfarben Ende */
.backdrop-a1-dark20,
.backdrop-hover-a1-dark20:hover,
.teaser:hover .backdrop-hover-a1-dark20 {
  color: #FFFFFF;
}
.backdrop-a1-dark10,
.backdrop-hover-a1-dark10:hover,
.teaser:hover .backdrop-hover-a1-dark10 {
  color: #FFFFFF;
}
.backdrop-a1-base,
.backdrop-hover-a1-base:hover,
.teaser:hover .backdrop-hover-a1-base {
  color: #525252;
}
.backdrop-a1-light15,
.backdrop-hover-a1-light15:hover,
.teaser:hover .backdrop-hover-a1-light15 {
  color: #525252;
}
.backdrop-a1-light30,
.backdrop-hover-a1-light30:hover,
.teaser:hover .backdrop-hover-a1-light30 {
  color: #525252;
}
.backdrop-a1-light50,
.backdrop-hover-a1-light50:hover,
.teaser:hover .backdrop-hover-a1-light50 {
  color: #525252;
}
.backdrop-a1-light70,
.backdrop-hover-a1-light70:hover,
.teaser:hover .backdrop-hover-a1-light70 {
  color: #525252;
}
.backdrop-a1-light82,
.backdrop-hover-a1-light82:hover,
.teaser:hover .backdrop-hover-a1-light82 {
  color: #525252;
}
.backdrop-a1-light94,
.backdrop-hover-a1-light94:hover,
.teaser:hover .backdrop-hover-a1-light94 {
  color: #525252;
}
.backdrop-b1-dark20,
.backdrop-hover-b1-dark20:hover,
.teaser:hover .backdrop-hover-b1-dark20 {
  color: #FFFFFF;
}
.backdrop-b1-dark10,
.backdrop-hover-b1-dark10:hover,
.teaser:hover .backdrop-hover-b1-dark10 {
  color: #FFFFFF;
}
.backdrop-b1-base,
.backdrop-hover-b1-base:hover,
.teaser:hover .backdrop-hover-b1-base {
  color: #FFFFFF;
}
.backdrop-b1-light15,
.backdrop-hover-b1-light15:hover,
.teaser:hover .backdrop-hover-b1-light15 {
  color: #FFFFFF;
}
.backdrop-b1-light30,
.backdrop-hover-b1-light30:hover,
.teaser:hover .backdrop-hover-b1-light30 {
  color: #FFFFFF;
}
.backdrop-b1-light50,
.backdrop-hover-b1-light50:hover,
.teaser:hover .backdrop-hover-b1-light50 {
  color: #525252;
}
.backdrop-b1-light70,
.backdrop-hover-b1-light70:hover,
.teaser:hover .backdrop-hover-b1-light70 {
  color: #525252;
}
.backdrop-b1-light82,
.backdrop-hover-b1-light82:hover,
.teaser:hover .backdrop-hover-b1-light82 {
  color: #525252;
}
.backdrop-b1-light94,
.backdrop-hover-b1-light94:hover,
.teaser:hover .backdrop-hover-b1-light94 {
  color: #525252;
}
.backdrop-b2-dark20,
.backdrop-hover-b2-dark20:hover,
.teaser:hover .backdrop-hover-b2-dark20 {
  color: #FFFFFF;
}
.backdrop-b2-dark10,
.backdrop-hover-b2-dark10:hover,
.teaser:hover .backdrop-hover-b2-dark10 {
  color: #FFFFFF;
}
.backdrop-b2-base,
.backdrop-hover-b2-base:hover,
.teaser:hover .backdrop-hover-b2-base {
  color: #FFFFFF;
}
.backdrop-b2-light15,
.backdrop-hover-b2-light15:hover,
.teaser:hover .backdrop-hover-b2-light15 {
  color: #FFFFFF;
}
.backdrop-b2-light30,
.backdrop-hover-b2-light30:hover,
.teaser:hover .backdrop-hover-b2-light30 {
  color: #FFFFFF;
}
.backdrop-b2-light50,
.backdrop-hover-b2-light50:hover,
.teaser:hover .backdrop-hover-b2-light50 {
  color: #525252;
}
.backdrop-b2-light70,
.backdrop-hover-b2-light70:hover,
.teaser:hover .backdrop-hover-b2-light70 {
  color: #525252;
}
.backdrop-b2-light82,
.backdrop-hover-b2-light82:hover,
.teaser:hover .backdrop-hover-b2-light82 {
  color: #525252;
}
.backdrop-b2-light94,
.backdrop-hover-b2-light94:hover,
.teaser:hover .backdrop-hover-b2-light94 {
  color: #525252;
}
.backdrop-c2-dark20,
.backdrop-hover-c2-dark20:hover,
.teaser:hover .backdrop-hover-c2-dark20 {
  color: #FFFFFF;
}
.backdrop-c2-dark10,
.backdrop-hover-c2-dark10:hover,
.teaser:hover .backdrop-hover-c2-dark10 {
  color: #FFFFFF;
}
.backdrop-c2-base,
.backdrop-hover-c2-base:hover,
.teaser:hover .backdrop-hover-c2-base {
  color: #FFFFFF;
}
.backdrop-c2-light15,
.backdrop-hover-c2-light15:hover,
.teaser:hover .backdrop-hover-c2-light15 {
  color: #FFFFFF;
}
.backdrop-c2-light30,
.backdrop-hover-c2-light30:hover,
.teaser:hover .backdrop-hover-c2-light30 {
  color: #FFFFFF;
}
.backdrop-c2-light50,
.backdrop-hover-c2-light50:hover,
.teaser:hover .backdrop-hover-c2-light50 {
  color: #FFFFFF;
}
.backdrop-c2-light70,
.backdrop-hover-c2-light70:hover,
.teaser:hover .backdrop-hover-c2-light70 {
  color: #525252;
}
.backdrop-c2-light82,
.backdrop-hover-c2-light82:hover,
.teaser:hover .backdrop-hover-c2-light82 {
  color: #525252;
}
.backdrop-c2-light94,
.backdrop-hover-c2-light94:hover,
.teaser:hover .backdrop-hover-c2-light94 {
  color: #525252;
}
/* Hinweisfarben */
.backdrop-d1-dark20,
.backdrop-hover-d1-dark20:hover,
.teaser:hover .backdrop-hover-d1-dark20 {
  color: #FFFFFF;
}
.backdrop-d1-dark10,
.backdrop-hover-d1-dark10:hover,
.teaser:hover .backdrop-hover-d1-dark10 {
  color: #FFFFFF;
}
.backdrop-d1-base,
.backdrop-hover-d1-base:hover,
.teaser:hover .backdrop-hover-d1-base {
  color: #FFFFFF;
}
.backdrop-d1-light15,
.backdrop-hover-d1-light15:hover,
.teaser:hover .backdrop-hover-d1-light15 {
  color: #FFFFFF;
}
.backdrop-d1-light30,
.backdrop-hover-d1-light30:hover,
.teaser:hover .backdrop-hover-d1-light30 {
  color: #FFFFFF;
}
.backdrop-d1-light50,
.backdrop-hover-d1-light50:hover,
.teaser:hover .backdrop-hover-d1-light50 {
  color: #525252;
}
.backdrop-d1-light70,
.backdrop-hover-d1-light70:hover,
.teaser:hover .backdrop-hover-d1-light70 {
  color: #525252;
}
.backdrop-d1-light82,
.backdrop-hover-d1-light82:hover,
.teaser:hover .backdrop-hover-d1-light82 {
  color: #525252;
}
.backdrop-d1-light94,
.backdrop-hover-d1-light94:hover,
.teaser:hover .backdrop-hover-d1-light94 {
  color: #525252;
}
.backdrop-d2-dark20,
.backdrop-hover-d2-dark20:hover,
.teaser:hover .backdrop-hover-d2-dark20 {
  color: #FFFFFF;
}
.backdrop-d2-dark10,
.backdrop-hover-d2-dark10:hover,
.teaser:hover .backdrop-hover-d2-dark10 {
  color: #FFFFFF;
}
.backdrop-d2-base,
.backdrop-hover-d2-base:hover,
.teaser:hover .backdrop-hover-d2-base {
  color: #525252;
}
.backdrop-d2-light15,
.backdrop-hover-d2-light15:hover,
.teaser:hover .backdrop-hover-d2-light15 {
  color: #525252;
}
.backdrop-d2-light30,
.backdrop-hover-d2-light30:hover,
.teaser:hover .backdrop-hover-d2-light30 {
  color: #525252;
}
.backdrop-d2-light50,
.backdrop-hover-d2-light50:hover,
.teaser:hover .backdrop-hover-d2-light50 {
  color: #525252;
}
.backdrop-d2-light70,
.backdrop-hover-d2-light70:hover,
.teaser:hover .backdrop-hover-d2-light70 {
  color: #525252;
}
.backdrop-d2-light82,
.backdrop-hover-d2-light82:hover,
.teaser:hover .backdrop-hover-d2-light82 {
  color: #525252;
}
.backdrop-d2-light94,
.backdrop-hover-d2-light94:hover,
.teaser:hover .backdrop-hover-d2-light94 {
  color: #525252;
}
.backdrop-d3-dark20,
.backdrop-hover-d3-dark20:hover,
.teaser:hover .backdrop-hover-d3-dark20 {
  color: #FFFFFF;
}
.backdrop-d3-dark10,
.backdrop-hover-d3-dark10:hover,
.teaser:hover .backdrop-hover-d3-dark10 {
  color: #FFFFFF;
}
.backdrop-d3-base,
.backdrop-hover-d3-base:hover,
.teaser:hover .backdrop-hover-d3-base {
  color: #FFFFFF;
}
.backdrop-d3-light15,
.backdrop-hover-d3-light15:hover,
.teaser:hover .backdrop-hover-d3-light15 {
  color: #FFFFFF;
}
.backdrop-d3-light30,
.backdrop-hover-d3-light30:hover,
.teaser:hover .backdrop-hover-d3-light30 {
  color: #FFFFFF;
}
.backdrop-d3-light50,
.backdrop-hover-d3-light50:hover,
.teaser:hover .backdrop-hover-d3-light50 {
  color: #525252;
}
.backdrop-d3-light70,
.backdrop-hover-d3-light70:hover,
.teaser:hover .backdrop-hover-d3-light70 {
  color: #525252;
}
.backdrop-d3-light82,
.backdrop-hover-d3-light82:hover,
.teaser:hover .backdrop-hover-d3-light82 {
  color: #525252;
}
.backdrop-d3-light94,
.backdrop-hover-d3-light94:hover,
.teaser:hover .backdrop-hover-d3-light94 {
  color: #525252;
}
.backdrop-d4-dark20,
.backdrop-hover-d4-dark20:hover,
.teaser:hover .backdrop-hover-d4-dark20 {
  color: #FFFFFF;
}
.backdrop-d4-dark10,
.backdrop-hover-d4-dark10:hover,
.teaser:hover .backdrop-hover-d4-dark10 {
  color: #FFFFFF;
}
.backdrop-d4-base,
.backdrop-hover-d4-base:hover,
.teaser:hover .backdrop-hover-d4-base {
  color: #FFFFFF;
}
.backdrop-d4-light15,
.backdrop-hover-d4-light15:hover,
.teaser:hover .backdrop-hover-d4-light15 {
  color: #FFFFFF;
}
.backdrop-d4-light30,
.backdrop-hover-d4-light30:hover,
.teaser:hover .backdrop-hover-d4-light30 {
  color: #FFFFFF;
}
.backdrop-d4-light50,
.backdrop-hover-d4-light50:hover,
.teaser:hover .backdrop-hover-d4-light50 {
  color: #525252;
}
.backdrop-d4-light70,
.backdrop-hover-d4-light70:hover,
.teaser:hover .backdrop-hover-d4-light70 {
  color: #525252;
}
.backdrop-d4-light82,
.backdrop-hover-d4-light82:hover,
.teaser:hover .backdrop-hover-d4-light82 {
  color: #525252;
}
.backdrop-d4-light94,
.backdrop-hover-d4-light94:hover,
.teaser:hover .backdrop-hover-d4-light94 {
  color: #525252;
}
/* Hinweisfarben ende */
.backdrop-e1-petrol-base:before {
  background-color: #5da6ab;
}
.backdrop-e1-lime-base:before {
  background-color: #a7c952;
}
.backdrop-e1-rose-base:before {
  background-color: #e38cbf;
}
.backdrop-e1-coral-base:before {
  background-color: #f17a6f;
}
.backdrop-e1-corn-base:before {
  background-color: #feec80;
}
.backdrop-e2-black-base:before {
  background-color: #000000;
}
.backdrop-e2-forest-base:before {
  background-color: #278534;
}
.backdrop-e2-sky-base:before {
  background-color: #6db8f0;
}
.backdrop-e2-wine-base:before {
  background-color: #950000;
}
.backdrop-e2-orange-base:before {
  background-color: #f59912;
}
.backdrop-e3-grey-base:before {
  background-color: #999999;
}
.backdrop-e3-brand-dark:before {
  background-color: #00396D;
}
.backdrop-e3-brand-light:before {
  background-color: #80A3C4;
}
[class*='backdrop-'].inverted,
[class*='backdrop-'].inverted .list a,
.backdrop-b1-base *[class][class]:not(.key),
.backdrop-b1-base .list a,
.inverted .list a,
.inverted h1,
.inverted h2,
.inverted h3,
.inverted h4,
.inverted [class][class][class].script,
.inverted p,
.inverted a,
.inverted label,
.inverted legend,
.inverted strong,
.inverted .size-7,
.inverted .size-6,
.inverted .size-5,
.inverted .section-headline > *:not(p):not(.subheadline) {
  color: #FFFFFF;
  text-shadow: none;
}
[class*='backdrop-'].inverted p > a:not(.button),
[class*='backdrop-'].inverted .list a:not(.button),
.backdrop-b1-base p > a:not(.button),
.backdrop-b1-base .list a:not(.button),
.inverted .list a:not(.button),
.inverted p > a:not(.button) {
  text-decoration: underline;
}
.backdrop-b1-base .uninverted *[class][class],
.inverted .uninverted h1,
.inverted .uninverted h2,
.inverted .uninverted h3,
.inverted .uninverted h4,
.inverted .uninverted [class][class][class].script,
.inverted .uninverted p,
.inverted .uninverted label,
.inverted .uninverted legend,
.inverted .uninverted strong,
.inverted .uninverted .size-7,
.inverted .uninverted .size-6,
.inverted .uninverted .size-5,
.inverted .uninverted .section-headline > *:not(p):not(.subheadline) {
  color: #525252;
}
[class*='backdrop-'].inverted [class*='backdrop'][class*='light'],
[class*='backdrop-'].inverted [class*='backdrop'][class*='light'] h1,
[class*='backdrop-'].inverted [class*='backdrop'][class*='light'] h2,
[class*='backdrop-'].inverted [class*='backdrop'][class*='light'] h3,
[class*='backdrop-'].inverted [class*='backdrop'][class*='light'] h4,
[class*='backdrop-'].inverted [class*='backdrop'][class*='light'] p,
[class*='backdrop-'].inverted [class*='backdrop'][class*='light'] a:not(.button),
[class*='backdrop-'].inverted [class*='backdrop'][class*='light'] label,
[class*='backdrop-'].inverted [class*='backdrop'][class*='light'] legend,
[class*='backdrop-'].inverted [class*='backdrop'][class*='light'] strong,
[class*='backdrop-'].inverted .backdrop-c1-base,
[class*='backdrop-'].inverted .backdrop-c1-base h1,
[class*='backdrop-'].inverted .backdrop-c1-base h2,
[class*='backdrop-'].inverted .backdrop-c1-base h3,
[class*='backdrop-'].inverted .backdrop-c1-base h4,
[class*='backdrop-'].inverted .backdrop-c1-base p,
[class*='backdrop-'].inverted .backdrop-c1-base a:not(.button),
[class*='backdrop-'].inverted .backdrop-c1-base label,
[class*='backdrop-'].inverted .backdrop-c1-base legend,
[class*='backdrop-'].inverted .backdrop-c1-base strong {
  color: #525252;
}
.backdrop-b1-base .uninverted a[class][class],
.inverted .uninverted a[class] {
  color: #004788;
  text-decoration: none;
}
.button {
  display: inline-block;
  padding: 5px 15px 5px 0px;
  border: 1px solid;
  min-height: 40px;
  font-style: normal;
  width: auto;
  letter-spacing: 0;
  -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: DroidRegular, 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;
}
.button > span {
  pointer-events: none;
  display: inline-block;
}
.button > span:not(.icon) {
  padding-left: 15px;
}
.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: DroidRegular, 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: 6px;
  margin-right: -7px;
  left: 1px;
}
.m.button > .s.icon {
  margin-top: -1px;
  margin-bottom: -1px;
  margin-left: 2px;
  left: 3px;
}
a.m.button > .s.icon,
span.m.button > .s.icon {
  margin-top: 2px;
}
.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;
}
.key.button:hover,
.key.button:focus,
.backdrop-b1-base .key.button:hover,
.backdrop-b1-base .key.button:focus,
.ghost.key.button[class][class][class]:hover,
.ghost.key.button[class][class][class]:focus {
  color: #FFFFFF;
  border-color: #006600;
  background-color: #006600;
}
.service.button:hover,
.service.button:focus,
.ghost.service.button[class][class][class]:hover,
.ghost.service.button[class][class][class]:focus {
  color: #FFFFFF;
  border-color: #00396D;
  background-color: #00396D;
}
.ghost.service.button[class][class][class]:not([aria-disabled]):not([disabled]):hover .icon,
.ghost.service.button[class][class][class]:not([aria-disabled]):not([disabled]):focus .icon {
  background-position-x: 25%;
}
.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,
.backdrop-b1-base .key.button,
.backdrop-b1-base .key.button:active,
.ghost.key.button[class][class]:active {
  border-color: #008000;
  background-color: #008000;
  color: #FFFFFF;
}
.service.button,
.service.button:active,
.ghost.service.button[class][class][class]:active {
  border-color: #004788;
  background-color: #004788;
  color: #FFFFFF;
}
.ghost.service.button[class][class][class]:not([aria-disabled]):not([disabled]):active .icon {
  background-position-x: 25%;
}
.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],
.backdrop-b1-base .key.button[disabled][class][class],
.backdrop-b1-base .key.button[aria-disabled][class][class] {
  color: #FFFFFF;
  background-color: #D1E8D1;
  border-color: #D1E8D1;
  cursor: default;
  cursor: not-allowed;
  text-shadow: none;
}
.service.button[disabled][class][class],
.service.button[aria-disabled][class][class] {
  color: #FFFFFF;
  background-color: #D1DEEA;
  border-color: #D1DEEA;
  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: #D1DEEA;
  border-color: #D1DEEA;
  cursor: default;
  cursor: not-allowed;
  text-shadow: none;
}
.ghost.key.button[class][class][class] {
  color: #008000;
  background-color: transparent;
}
.ghost.key.button[class][class][class][disabled],
.ghost.key.button[class][class][class][aria-disabled] {
  color: #D1E8D1;
  border-color: #D1E8D1;
  background-color: transparent;
}
.ghost.service.button[class][class][class] {
  color: #004788;
  background-color: transparent;
}
.ghost.service.button[class][class][class][disabled],
.ghost.service.button[class][class][class][aria-disabled] {
  color: #D1DEEA;
  border-color: #D1DEEA;
  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: #D1DEEA;
  color: #D1DEEA;
  background-color: transparent;
}
[class*='backdrop-'].inverted .ghost.button[class][class][class],
[class*='backdrop-'].inverted .button.service,
[class*='backdrop-'].inverted .button.service:active,
[class*='backdrop-'].inverted .ghost.button[class][class][class]:active {
  border-color: #FFFFFF;
  color: #FFFFFF;
  background-color: transparent;
}
[class*='backdrop-'].inverted [class*='backdrop-b1-light'] .ghost.button[class][class][class],
[class*='backdrop-'].inverted [class*='backdrop-b1-light'] .button.service,
[class*='backdrop-'].inverted [class*='backdrop-b1-light'] .button.service:active,
[class*='backdrop-'].inverted [class*='backdrop-b1-light'] .ghost.button[class][class][class]:active {
  border-color: #004788;
  color: #004788;
  background-color: transparent;
}
[class*='backdrop-'].inverted .button.service:hover,
[class*='backdrop-'].inverted .button.service:focus,
[class*='backdrop-'].inverted .ghost.button[class][class][class]:hover,
[class*='backdrop-'].inverted .ghost.button[class][class][class]:focus {
  color: #333333;
  border-color: #F3F3F3;
  background-color: #F3F3F3;
}
[class*='backdrop-'].inverted [class*='backdrop-b1-light'] .button.service:hover,
[class*='backdrop-'].inverted [class*='backdrop-b1-light'] .button.service:focus,
[class*='backdrop-'].inverted [class*='backdrop-b1-light'] .ghost.button[class][class][class]:hover,
[class*='backdrop-'].inverted [class*='backdrop-b1-light'] .ghost.button[class][class][class]:focus {
  color: #FFFFFF;
  border-color: #004788;
  background-color: #004788;
}
/* APP Buttons */
.button.app.store {
  background: transparent 0 0 no-repeat;
  background-size: cover;
  border: 0px solid;
  border-radius: 0px;
  text-indent: -9999em;
  display: inline-block;
  padding-right: 0;
}
.button.app.apple.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_applestore.svg);
}
[lang="en"] .button.app.apple.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_applestore_en.svg);
}
[lang="es"] .button.app.apple.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_applestore_es.svg);
}
[lang="fr"] .button.app.apple.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_applestore_fr.svg);
}
.button.app.google.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_googlestore.svg);
}
html[lang="en"] .button.app.google.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_googlestore_en.svg);
}
html[lang="es"] .button.app.google.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_googlestore_es.svg);
}
html[lang="fr"] .button.app.google.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_googlestore_fr.svg);
}
.button.app.windows.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_windowsstore.svg);
}
html[lang="en"] .button.app.windows.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_windowsstore_en.svg);
}
html[lang="es"] .button.app.windows.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_windowsstore_es.svg);
}
html[lang="fr"] .button.app.windows.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_windowsstore_fr.svg);
}
.button.app.huawei.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_huaweistore.svg);
}
html[lang="en"] .button.app.huawei.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_huaweistore_en.svg);
}
html[lang="es"] .button.app.huawei.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_huaweistore_es.svg);
}
html[lang="fr"] .button.app.huawei.store {
  background-image: url(//img.ui-portal.de/cd/ci/btn_huaweistore_fr.svg);
}
/* additional class for key/service/ghost buttons to trigger the app width */
.button.app[class] {
  height: 32px;
  width: 112px;
}
.button.l.app[class] {
  height: 40px;
  width: 140px;
}
.button.xl.app[class] {
  height: 48px;
  width: 168px;
}
/* Bei zentrierter Darstellung kein float => WIP: in ueberarbeiteter form kein float mehr
   Zusatz-Abstand bei 'inline-block' mit Btn-Abstand ausgleichen */
.btn-wrapper {
  margin-left: -15px;
  margin-top: 4px;
  z-index: 9999;
  position: relative;
}
.hero .btn-wrapper {
  margin-left: -15px;
}
.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: 15px;
  margin-right: 0px;
  margin-bottom: 20px;
}
.hero .btn-wrapper .button {
  margin-left: 15px;
}
/* CSS aus teaser.css ueberschreiben */
.btn-wrapper[class][class][class] .button {
  margin-top: 0px;
}
/* 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;
  }
}
/* Special Requirement: ghost button - no focus behaviour by touch screen */
.js.touch .ghost.service.button[class]:not([aria-disabled]):not([disabled]):focus {
  color: #004788;
  background-color: transparent;
  background-position-x: 25%;
}
.js.touch .backdrop-b1-base .ghost.service.button[class]:not([aria-disabled]):not([disabled]):focus {
  color: #FFFFFF;
}
.key.button:not(.ghost) .icon {
  background-position-x: 25%;
}
.js.touch .service.ghost.button[class][class][class]:focus .icon,
.service.ghost.button .icon {
  background-position-x: 75%;
}
/* Interim solution until the icon module has been revised */
.ghost.button[disabled] .icon,
.ghost.button[aria-disabled] .icon {
  opacity: 0.2;
}
.icon {
  display: inline-block;
  color: transparent;
  outline: none;
  padding: 0px;
  height: 0px;
  text-indent: -9999em;
  background: url(//img.ui-portal.de/cd/ci/mail.com/brand-410.svg) no-repeat 0% 0%, url(//img.ui-portal.de/cd/ci/mail.com/service-410.svg) no-repeat 0% 0%;
  -ms-transform: translate3d(0, 0, 0);
  text-shadow: none;
}
.icon,
.xs.icon {
  background-size: auto 1296px, auto 1296px;
  width: 16px;
  height: 16px;
}
.s.icon {
  background-size: auto 1620px, auto 1620px;
  width: 20px;
  height: 20px;
}
.m.icon {
  background-size: auto 1944px, auto 1944px;
  width: 24px;
  height: 24px;
}
.l.icon {
  background-size: auto 2592px, auto 2592px;
  width: 32px;
  height: 32px;
}
.xl.icon {
  background-size: auto 3240px, auto 3240px;
  width: 40px;
  height: 40px;
}
.xxl.icon {
  background-size: auto 3888px, auto 3888px;
  width: 48px;
  height: 48px;
}
.x3l.icon {
  background-size: auto 4536px, auto 4536px;
  width: 56px;
  height: 56px;
}
.x4l.icon {
  background-size: auto 5184px, auto 5184px;
  width: 64px;
  height: 64px;
}
.x5l.icon {
  background-size: auto 5832px, auto 5832px;
  width: 72px;
  height: 72px;
}
.x6l.icon {
  background-size: auto 7776px, auto 7776px;
  width: 96px;
  height: 96px;
}
.x7l.icon {
  background-size: auto 10368px, auto 10368px;
  width: 128px;
  height: 128px;
}
/* icon with subtext */
.icon[aria-label] {
  overflow: visible;
  position: relative;
}
.icon[aria-label]:after {
  content: attr(aria-label);
  color: #333333;
  white-space: nowrap;
  display: none;
  text-indent: 0px;
  font-family: Verdana, sans-serif;
  font-size: 9px;
  line-height: 16px;
  position: absolute;
  bottom: -18px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.icon.default-hover[aria-label]:hover:after {
  color: #333333;
}
.icon.white[aria-label]:after,
.icon.white-hover[aria-label]:hover:after,
.icon.white-hover[aria-label]:focus:after,
.icon.white[data-icon-prefix-text]:before,
.icon.white-hover[data-icon-prefix-text]:hover:before,
.icon.white-hover[data-icon-prefix-text]:focus:before {
  color: #FFFFFF;
}
.icon.inactive[aria-label]:after,
.icon.inactive-hover[aria-label]:hover:after,
.icon.inactive-hover[aria-label]:focus:after,
.icon.inactive[data-icon-prefix-text]:before,
.icon.inactive-hover[data-icon-prefix-text]:hover:before,
.icon.inactive-hover[data-icon-prefix-text]:focus:before {
  color: #525252;
}
.icon.service[aria-label]:after,
.icon.service-hover[aria-label]:hover:after,
.icon.service-hover[aria-label]:focus:after,
.icon.service[data-icon-prefix-text]:before,
.icon.service-hover[data-icon-prefix-text]:hover:before,
.icon.service-hover[data-icon-prefix-text]:focus:before {
  color: #004788;
}
/*  */
.icon.service-light[aria-label]:after,
.icon.service-light-hover[aria-label]:hover:after,
.icon.service-light-hover[aria-label]:focus:after,
.icon.service-light[data-icon-prefix-text]:before,
.icon.service-light-hover[data-icon-prefix-text]:hover:before,
.icon.service-light-hover[data-icon-prefix-text]:focus:before {
  color: #D1DEEA;
}
/*  */
.icon.show-text {
  margin-bottom: 16px;
}
.icon.show-text:after {
  display: block;
}
/*  */
@media screen and (min-width: 980px)  {
  .icon.l-show-text {
    margin-bottom: 16px;
  }
  .icon.l-show-text:after {
    display: block;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .icon.m-show-text {
    margin-bottom: 16px;
  }
  .icon.m-show-text:after {
    display: block;
  }
}
@media screen and (max-width: 659.9px) {
  .icon.s-show-text {
    margin-bottom: 16px;
  }
  .icon.s-show-text:after {
    display: block;
  }
}
/* icon positioning inside list */
ul .icon,
ul .xs.icon,
ol .icon,
ol .xs.icon {
  vertical-align: -3px;
}
ul .s.icon,
ol .s.icon {
  vertical-align: -5px;
}
ul .m.icon,
ol .m.icon {
  vertical-align: -6px;
}
ul .l.icon,
ol .l.icon {
  vertical-align: -7px;
}
ul .xl.icon,
ol .xl.icon {
  vertical-align: -9px;
}
ul .xxl.icon,
ol .xxl.icon {
  vertical-align: -11px;
}
ul .x3l.icon,
ol .x3l.icon {
  vertical-align: -13px;
}
ul .x4l.icon,
ol .x4l.icon {
  vertical-align: -15px;
}
ul .x5l.icon,
ol .x5l.icon {
  vertical-align: -16px;
}
ul .x6l.icon,
ol .x6l.icon {
  vertical-align: -22px;
}
ul .x7l.icon,
ol .x7l.icon {
  vertical-align: -30px;
}
ul .x8l.icon,
ol .x8l.icon {
  vertical-align: -45px;
}
ul .x9l.icon,
ol .x9l.icon {
  vertical-align: -60px;
}
/*  icon + showhidetoggle + touch */
.touch .icon[data-show-nodes]:before,
.touch .icon[data-hide-nodes]:before,
.touch .icon[data-toggle-nodes]:before,
.touch .icon[data-set-nodes]:before,
.touch .icon[data-unset-nodes]:before {
  content: '';
  display: block;
  position: absolute;
  margin: -10px;
  padding: 10px;
  box-sizing: content-box;
  width: 16px;
  height: 16px;
}
.touch .s.icon[data-show-nodes]:before,
.touch .s.icon[data-hide-nodes]:before,
.touch .s.icon[data-toggle-nodes]:before,
.touch .s.icon[data-set-nodes]:before,
.touch .s.icon[data-unset-nodes]:before {
  width: 20px;
  height: 20px;
}
.touch .m.icon[data-show-nodes]:before,
.touch .m.icon[data-hide-nodes]:before,
.touch .m.icon[data-toggle-nodes]:before,
.touch .m.icon[data-set-nodes]:before,
.touch .m.icon[data-unset-nodes]:before {
  width: 24px;
  height: 24px;
}
.touch .l.icon[data-show-nodes]:before,
.touch .l.icon[data-hide-nodes]:before,
.touch .l.icon[data-toggle-nodes]:before,
.touch .l.icon[data-set-nodes]:before,
.touch .l.icon[data-unset-nodes]:before {
  width: 32px;
  height: 32px;
}
.touch .xl.icon[data-show-nodes]:before,
.touch .xl.icon[data-hide-nodes]:before,
.touch .xl.icon[data-toggle-nodes]:before,
.touch .xl.icon[data-set-nodes]:before,
.touch .xl.icon[data-unset-nodes]:before {
  width: 40px;
  height: 40px;
}
.touch .xxl.icon[data-show-nodes]:before,
.touch .xxl.icon[data-hide-nodes]:before,
.touch .xxl.icon[data-toggle-nodes]:before,
.touch .xxl.icon[data-set-nodes]:before,
.touch .xxl.icon[data-unset-nodes]:before {
  width: 48px;
  height: 48px;
}
.touch .x3l.icon[data-show-nodes]:before,
.touch .x3l.icon[data-hide-nodes]:before,
.touch .x3l.icon[data-toggle-nodes]:before,
.touch .x3l.icon[data-set-nodes]:before,
.touch .x3l.icon[data-unset-nodes]:before {
  width: 56px;
  height: 56px;
}
.touch .x4l.icon[data-show-nodes]:before,
.touch .x4l.icon[data-hide-nodes]:before,
.touch .x4l.icon[data-toggle-nodes]:before,
.touch .x4l.icon[data-set-nodes]:before,
.touch .x4l.icon[data-unset-nodes]:before {
  width: 64px;
  height: 64px;
}
.touch .x5l.icon[data-show-nodes]:before,
.touch .x5l.icon[data-hide-nodes]:before,
.touch .x5l.icon[data-toggle-nodes]:before,
.touch .x5l.icon[data-set-nodes]:before,
.touch .x5l.icon[data-unset-nodes]:before {
  width: 72px;
  height: 72px;
}
.touch .x6l.icon[data-show-nodes]:before,
.touch .x6l.icon[data-hide-nodes]:before,
.touch .x6l.icon[data-toggle-nodes]:before,
.touch .x6l.icon[data-set-nodes]:before,
.touch .x6l.icon[data-unset-nodes]:before {
  width: 96px;
  height: 96px;
}
.touch .x7l.icon[data-show-nodes]:before,
.touch .x7l.icon[data-hide-nodes]:before,
.touch .x7l.icon[data-toggle-nodes]:before,
.touch .x7l.icon[data-set-nodes]:before,
.touch .x7l.icon[data-unset-nodes]:before {
  width: 128px;
  height: 128px;
}
/*  */
.up.icon,
.up.icon.default,
body:not(.touch) .up.icon.default-hover:hover,
body:not(.touch) a:hover > .up.icon.default-hover,
body:not(.touch) .up.icon.default-hover:focus,
body:not(.touch) a:focus > .up.icon.default-hover {
  background-position: 0% 0%;
}
.up.icon.white,
body:not(.touch) .up.icon.white-hover:hover,
body:not(.touch) a:hover > .up.icon.white-hover,
body:not(.touch) .up.icon.white-hover:focus,
body:not(.touch) a:focus > .up.icon.white-hover {
  background-position: 25% 0%;
}
.up.icon.inactive,
body:not(.touch) .up.icon.inactive-hover:hover,
body:not(.touch) a:hover > .up.icon.inactive-hover,
body:not(.touch) .up.icon.inactive-hover:focus,
body:not(.touch) a:focus > .up.icon.inactive-hover {
  background-position: 50% 0%;
}
.up.icon.service,
body:not(.touch) .up.icon.service-hover:hover,
body:not(.touch) a:hover > .up.icon.service-hover,
body:not(.touch) .up.icon.service-hover:focus,
body:not(.touch) a:focus > .up.icon.service-hover {
  background-position: 75% 0%;
}
/*  */
.up.icon.service-light,
body:not(.touch) .up.icon.service-light-hover:hover,
body:not(.touch) a:hover > .up.icon.service-light-hover,
body:not(.touch) .up.icon.service-light-hover:focus,
body:not(.touch) a:focus > .up.icon.service-light-hover {
  background-position: 100% 0%;
}
/*  */
.down.icon,
.down.icon.default,
body:not(.touch) .down.icon.default-hover:hover,
body:not(.touch) a:hover > .down.icon.default-hover,
body:not(.touch) .down.icon.default-hover:focus,
body:not(.touch) a:focus > .down.icon.default-hover {
  background-position: 0% 1.25%;
}
.down.icon.white,
body:not(.touch) .down.icon.white-hover:hover,
body:not(.touch) a:hover > .down.icon.white-hover,
body:not(.touch) .down.icon.white-hover:focus,
body:not(.touch) a:focus > .down.icon.white-hover {
  background-position: 25% 1.25%;
}
.down.icon.inactive,
body:not(.touch) .down.icon.inactive-hover:hover,
body:not(.touch) a:hover > .down.icon.inactive-hover,
body:not(.touch) .down.icon.inactive-hover:focus,
body:not(.touch) a:focus > .down.icon.inactive-hover {
  background-position: 50% 1.25%;
}
.down.icon.service,
body:not(.touch) .down.icon.service-hover:hover,
body:not(.touch) a:hover > .down.icon.service-hover,
body:not(.touch) .down.icon.service-hover:focus,
body:not(.touch) a:focus > .down.icon.service-hover {
  background-position: 75% 1.25%;
}
/*  */
.down.icon.service-light,
body:not(.touch) .down.icon.service-light-hover:hover,
body:not(.touch) a:hover > .down.icon.service-light-hover,
body:not(.touch) .down.icon.service-light-hover:focus,
body:not(.touch) a:focus > .down.icon.service-light-hover {
  background-position: 100% 1.25%;
}
/*  */
.prev.icon,
.prev.icon.default,
body:not(.touch) .prev.icon.default-hover:hover,
body:not(.touch) a:hover > .prev.icon.default-hover,
body:not(.touch) .prev.icon.default-hover:focus,
body:not(.touch) a:focus > .prev.icon.default-hover {
  background-position: 0% 2.5%;
}
.prev.icon.white,
body:not(.touch) .prev.icon.white-hover:hover,
body:not(.touch) a:hover > .prev.icon.white-hover,
body:not(.touch) .prev.icon.white-hover:focus,
body:not(.touch) a:focus > .prev.icon.white-hover {
  background-position: 25% 2.5%;
}
.prev.icon.inactive,
body:not(.touch) .prev.icon.inactive-hover:hover,
body:not(.touch) a:hover > .prev.icon.inactive-hover,
body:not(.touch) .prev.icon.inactive-hover:focus,
body:not(.touch) a:focus > .prev.icon.inactive-hover {
  background-position: 50% 2.5%;
}
.prev.icon.service,
body:not(.touch) .prev.icon.service-hover:hover,
body:not(.touch) a:hover > .prev.icon.service-hover,
body:not(.touch) .prev.icon.service-hover:focus,
body:not(.touch) a:focus > .prev.icon.service-hover {
  background-position: 75% 2.5%;
}
/*  */
.prev.icon.service-light,
body:not(.touch) .prev.icon.service-light-hover:hover,
body:not(.touch) a:hover > .prev.icon.service-light-hover,
body:not(.touch) .prev.icon.service-light-hover:focus,
body:not(.touch) a:focus > .prev.icon.service-light-hover {
  background-position: 100% 2.5%;
}
/*  */
.next.icon,
.next.icon.default,
body:not(.touch) .next.icon.default-hover:hover,
body:not(.touch) a:hover > .next.icon.default-hover,
body:not(.touch) .next.icon.default-hover:focus,
body:not(.touch) a:focus > .next.icon.default-hover {
  background-position: 0% 3.75%;
}
.next.icon.white,
body:not(.touch) .next.icon.white-hover:hover,
body:not(.touch) a:hover > .next.icon.white-hover,
body:not(.touch) .next.icon.white-hover:focus,
body:not(.touch) a:focus > .next.icon.white-hover {
  background-position: 25% 3.75%;
}
.next.icon.inactive,
body:not(.touch) .next.icon.inactive-hover:hover,
body:not(.touch) a:hover > .next.icon.inactive-hover,
body:not(.touch) .next.icon.inactive-hover:focus,
body:not(.touch) a:focus > .next.icon.inactive-hover {
  background-position: 50% 3.75%;
}
.next.icon.service,
body:not(.touch) .next.icon.service-hover:hover,
body:not(.touch) a:hover > .next.icon.service-hover,
body:not(.touch) .next.icon.service-hover:focus,
body:not(.touch) a:focus > .next.icon.service-hover {
  background-position: 75% 3.75%;
}
/*  */
.next.icon.service-light,
body:not(.touch) .next.icon.service-light-hover:hover,
body:not(.touch) a:hover > .next.icon.service-light-hover,
body:not(.touch) .next.icon.service-light-hover:focus,
body:not(.touch) a:focus > .next.icon.service-light-hover {
  background-position: 100% 3.75%;
}
/*  */
.burger.icon,
.burger.icon.default,
body:not(.touch) .burger.icon.default-hover:hover,
body:not(.touch) a:hover > .burger.icon.default-hover,
body:not(.touch) .burger.icon.default-hover:focus,
body:not(.touch) a:focus > .burger.icon.default-hover {
  background-position: 0% 5%;
}
.burger.icon.white,
body:not(.touch) .burger.icon.white-hover:hover,
body:not(.touch) a:hover > .burger.icon.white-hover,
body:not(.touch) .burger.icon.white-hover:focus,
body:not(.touch) a:focus > .burger.icon.white-hover {
  background-position: 25% 5%;
}
.burger.icon.inactive,
body:not(.touch) .burger.icon.inactive-hover:hover,
body:not(.touch) a:hover > .burger.icon.inactive-hover,
body:not(.touch) .burger.icon.inactive-hover:focus,
body:not(.touch) a:focus > .burger.icon.inactive-hover {
  background-position: 50% 5%;
}
.burger.icon.service,
body:not(.touch) .burger.icon.service-hover:hover,
body:not(.touch) a:hover > .burger.icon.service-hover,
body:not(.touch) .burger.icon.service-hover:focus,
body:not(.touch) a:focus > .burger.icon.service-hover {
  background-position: 75% 5%;
}
/*  */
.burger.icon.service-light,
body:not(.touch) .burger.icon.service-light-hover:hover,
body:not(.touch) a:hover > .burger.icon.service-light-hover,
body:not(.touch) .burger.icon.service-light-hover:focus,
body:not(.touch) a:focus > .burger.icon.service-light-hover {
  background-position: 100% 5%;
}
/*  */
.home.icon,
.home.icon.default,
body:not(.touch) .home.icon.default-hover:hover,
body:not(.touch) a:hover > .home.icon.default-hover,
body:not(.touch) .home.icon.default-hover:focus,
body:not(.touch) a:focus > .home.icon.default-hover {
  background-position: 0% 6.25%;
}
.home.icon.white,
body:not(.touch) .home.icon.white-hover:hover,
body:not(.touch) a:hover > .home.icon.white-hover,
body:not(.touch) .home.icon.white-hover:focus,
body:not(.touch) a:focus > .home.icon.white-hover {
  background-position: 25% 6.25%;
}
.home.icon.inactive,
body:not(.touch) .home.icon.inactive-hover:hover,
body:not(.touch) a:hover > .home.icon.inactive-hover,
body:not(.touch) .home.icon.inactive-hover:focus,
body:not(.touch) a:focus > .home.icon.inactive-hover {
  background-position: 50% 6.25%;
}
.home.icon.service,
body:not(.touch) .home.icon.service-hover:hover,
body:not(.touch) a:hover > .home.icon.service-hover,
body:not(.touch) .home.icon.service-hover:focus,
body:not(.touch) a:focus > .home.icon.service-hover {
  background-position: 75% 6.25%;
}
/*  */
.home.icon.service-light,
body:not(.touch) .home.icon.service-light-hover:hover,
body:not(.touch) a:hover > .home.icon.service-light-hover,
body:not(.touch) .home.icon.service-light-hover:focus,
body:not(.touch) a:focus > .home.icon.service-light-hover {
  background-position: 100% 6.25%;
}
/*  */
.close.icon,
.close.icon.default,
body:not(.touch) .close.icon.default-hover:hover,
body:not(.touch) a:hover > .close.icon.default-hover,
body:not(.touch) .close.icon.default-hover:focus,
body:not(.touch) a:focus > .close.icon.default-hover {
  background-position: 0% 7.5%;
}
.close.icon.white,
body:not(.touch) .close.icon.white-hover:hover,
body:not(.touch) a:hover > .close.icon.white-hover,
body:not(.touch) .close.icon.white-hover:focus,
body:not(.touch) a:focus > .close.icon.white-hover {
  background-position: 25% 7.5%;
}
.close.icon.inactive,
body:not(.touch) .close.icon.inactive-hover:hover,
body:not(.touch) a:hover > .close.icon.inactive-hover,
body:not(.touch) .close.icon.inactive-hover:focus,
body:not(.touch) a:focus > .close.icon.inactive-hover {
  background-position: 50% 7.5%;
}
.close.icon.service,
body:not(.touch) .close.icon.service-hover:hover,
body:not(.touch) a:hover > .close.icon.service-hover,
body:not(.touch) .close.icon.service-hover:focus,
body:not(.touch) a:focus > .close.icon.service-hover {
  background-position: 75% 7.5%;
}
/*  */
.close.icon.service-light,
body:not(.touch) .close.icon.service-light-hover:hover,
body:not(.touch) a:hover > .close.icon.service-light-hover,
body:not(.touch) .close.icon.service-light-hover:focus,
body:not(.touch) a:focus > .close.icon.service-light-hover {
  background-position: 100% 7.5%;
}
/*  */
.logout.icon,
.logout.icon.default,
body:not(.touch) .logout.icon.default-hover:hover,
body:not(.touch) a:hover > .logout.icon.default-hover,
body:not(.touch) .logout.icon.default-hover:focus,
body:not(.touch) a:focus > .logout.icon.default-hover {
  background-position: 0% 8.75%;
}
.logout.icon.white,
body:not(.touch) .logout.icon.white-hover:hover,
body:not(.touch) a:hover > .logout.icon.white-hover,
body:not(.touch) .logout.icon.white-hover:focus,
body:not(.touch) a:focus > .logout.icon.white-hover {
  background-position: 25% 8.75%;
}
.logout.icon.inactive,
body:not(.touch) .logout.icon.inactive-hover:hover,
body:not(.touch) a:hover > .logout.icon.inactive-hover,
body:not(.touch) .logout.icon.inactive-hover:focus,
body:not(.touch) a:focus > .logout.icon.inactive-hover {
  background-position: 50% 8.75%;
}
.logout.icon.service,
body:not(.touch) .logout.icon.service-hover:hover,
body:not(.touch) a:hover > .logout.icon.service-hover,
body:not(.touch) .logout.icon.service-hover:focus,
body:not(.touch) a:focus > .logout.icon.service-hover {
  background-position: 75% 8.75%;
}
/*  */
.logout.icon.service-light,
body:not(.touch) .logout.icon.service-light-hover:hover,
body:not(.touch) a:hover > .logout.icon.service-light-hover,
body:not(.touch) .logout.icon.service-light-hover:focus,
body:not(.touch) a:focus > .logout.icon.service-light-hover {
  background-position: 100% 8.75%;
}
/*  */
.search.icon,
.search.icon.default,
body:not(.touch) .search.icon.default-hover:hover,
body:not(.touch) a:hover > .search.icon.default-hover,
body:not(.touch) .search.icon.default-hover:focus,
body:not(.touch) a:focus > .search.icon.default-hover {
  background-position: 0% 10%;
}
.search.icon.white,
body:not(.touch) .search.icon.white-hover:hover,
body:not(.touch) a:hover > .search.icon.white-hover,
body:not(.touch) .search.icon.white-hover:focus,
body:not(.touch) a:focus > .search.icon.white-hover {
  background-position: 25% 10%;
}
.search.icon.inactive,
body:not(.touch) .search.icon.inactive-hover:hover,
body:not(.touch) a:hover > .search.icon.inactive-hover,
body:not(.touch) .search.icon.inactive-hover:focus,
body:not(.touch) a:focus > .search.icon.inactive-hover {
  background-position: 50% 10%;
}
.search.icon.service,
body:not(.touch) .search.icon.service-hover:hover,
body:not(.touch) a:hover > .search.icon.service-hover,
body:not(.touch) .search.icon.service-hover:focus,
body:not(.touch) a:focus > .search.icon.service-hover {
  background-position: 75% 10%;
}
/*  */
.search.icon.service-light,
body:not(.touch) .search.icon.service-light-hover:hover,
body:not(.touch) a:hover > .search.icon.service-light-hover,
body:not(.touch) .search.icon.service-light-hover:focus,
body:not(.touch) a:focus > .search.icon.service-light-hover {
  background-position: 100% 10%;
}
/*  */
.person.icon,
.person.icon.default,
body:not(.touch) .person.icon.default-hover:hover,
body:not(.touch) a:hover > .person.icon.default-hover,
body:not(.touch) .person.icon.default-hover:focus,
body:not(.touch) a:focus > .person.icon.default-hover {
  background-position: 0% 11.25%;
}
.person.icon.white,
body:not(.touch) .person.icon.white-hover:hover,
body:not(.touch) a:hover > .person.icon.white-hover,
body:not(.touch) .person.icon.white-hover:focus,
body:not(.touch) a:focus > .person.icon.white-hover {
  background-position: 25% 11.25%;
}
.person.icon.inactive,
body:not(.touch) .person.icon.inactive-hover:hover,
body:not(.touch) a:hover > .person.icon.inactive-hover,
body:not(.touch) .person.icon.inactive-hover:focus,
body:not(.touch) a:focus > .person.icon.inactive-hover {
  background-position: 50% 11.25%;
}
.person.icon.service,
body:not(.touch) .person.icon.service-hover:hover,
body:not(.touch) a:hover > .person.icon.service-hover,
body:not(.touch) .person.icon.service-hover:focus,
body:not(.touch) a:focus > .person.icon.service-hover {
  background-position: 75% 11.25%;
}
/*  */
.person.icon.service-light,
body:not(.touch) .person.icon.service-light-hover:hover,
body:not(.touch) a:hover > .person.icon.service-light-hover,
body:not(.touch) .person.icon.service-light-hover:focus,
body:not(.touch) a:focus > .person.icon.service-light-hover {
  background-position: 100% 11.25%;
}
/*  */
.basket.icon,
.basket.icon.default,
body:not(.touch) .basket.icon.default-hover:hover,
body:not(.touch) a:hover > .basket.icon.default-hover,
body:not(.touch) .basket.icon.default-hover:focus,
body:not(.touch) a:focus > .basket.icon.default-hover {
  background-position: 0% 12.5%;
}
.basket.icon.white,
body:not(.touch) .basket.icon.white-hover:hover,
body:not(.touch) a:hover > .basket.icon.white-hover,
body:not(.touch) .basket.icon.white-hover:focus,
body:not(.touch) a:focus > .basket.icon.white-hover {
  background-position: 25% 12.5%;
}
.basket.icon.inactive,
body:not(.touch) .basket.icon.inactive-hover:hover,
body:not(.touch) a:hover > .basket.icon.inactive-hover,
body:not(.touch) .basket.icon.inactive-hover:focus,
body:not(.touch) a:focus > .basket.icon.inactive-hover {
  background-position: 50% 12.5%;
}
.basket.icon.service,
body:not(.touch) .basket.icon.service-hover:hover,
body:not(.touch) a:hover > .basket.icon.service-hover,
body:not(.touch) .basket.icon.service-hover:focus,
body:not(.touch) a:focus > .basket.icon.service-hover {
  background-position: 75% 12.5%;
}
/*  */
.basket.icon.service-light,
body:not(.touch) .basket.icon.service-light-hover:hover,
body:not(.touch) a:hover > .basket.icon.service-light-hover,
body:not(.touch) .basket.icon.service-light-hover:focus,
body:not(.touch) a:focus > .basket.icon.service-light-hover {
  background-position: 100% 12.5%;
}
/*  */
.eye.icon,
.eye.icon.default,
body:not(.touch) .eye.icon.default-hover:hover,
body:not(.touch) a:hover > .eye.icon.default-hover,
body:not(.touch) .eye.icon.default-hover:focus,
body:not(.touch) a:focus > .eye.icon.default-hover {
  background-position: 0% 13.75%;
}
.eye.icon.white,
body:not(.touch) .eye.icon.white-hover:hover,
body:not(.touch) a:hover > .eye.icon.white-hover,
body:not(.touch) .eye.icon.white-hover:focus,
body:not(.touch) a:focus > .eye.icon.white-hover {
  background-position: 25% 13.75%;
}
.eye.icon.inactive,
body:not(.touch) .eye.icon.inactive-hover:hover,
body:not(.touch) a:hover > .eye.icon.inactive-hover,
body:not(.touch) .eye.icon.inactive-hover:focus,
body:not(.touch) a:focus > .eye.icon.inactive-hover {
  background-position: 50% 13.75%;
}
.eye.icon.service,
body:not(.touch) .eye.icon.service-hover:hover,
body:not(.touch) a:hover > .eye.icon.service-hover,
body:not(.touch) .eye.icon.service-hover:focus,
body:not(.touch) a:focus > .eye.icon.service-hover {
  background-position: 75% 13.75%;
}
/*  */
.eye.icon.service-light,
body:not(.touch) .eye.icon.service-light-hover:hover,
body:not(.touch) a:hover > .eye.icon.service-light-hover,
body:not(.touch) .eye.icon.service-light-hover:focus,
body:not(.touch) a:focus > .eye.icon.service-light-hover {
  background-position: 100% 13.75%;
}
/*  */
.hotline.icon,
.hotline.icon.default,
body:not(.touch) .hotline.icon.default-hover:hover,
body:not(.touch) a:hover > .hotline.icon.default-hover,
body:not(.touch) .hotline.icon.default-hover:focus,
body:not(.touch) a:focus > .hotline.icon.default-hover {
  background-position: 0% 15%;
}
.hotline.icon.white,
body:not(.touch) .hotline.icon.white-hover:hover,
body:not(.touch) a:hover > .hotline.icon.white-hover,
body:not(.touch) .hotline.icon.white-hover:focus,
body:not(.touch) a:focus > .hotline.icon.white-hover {
  background-position: 25% 15%;
}
.hotline.icon.inactive,
body:not(.touch) .hotline.icon.inactive-hover:hover,
body:not(.touch) a:hover > .hotline.icon.inactive-hover,
body:not(.touch) .hotline.icon.inactive-hover:focus,
body:not(.touch) a:focus > .hotline.icon.inactive-hover {
  background-position: 50% 15%;
}
.hotline.icon.service,
body:not(.touch) .hotline.icon.service-hover:hover,
body:not(.touch) a:hover > .hotline.icon.service-hover,
body:not(.touch) .hotline.icon.service-hover:focus,
body:not(.touch) a:focus > .hotline.icon.service-hover {
  background-position: 75% 15%;
}
/*  */
.hotline.icon.service-light,
body:not(.touch) .hotline.icon.service-light-hover:hover,
body:not(.touch) a:hover > .hotline.icon.service-light-hover,
body:not(.touch) .hotline.icon.service-light-hover:focus,
body:not(.touch) a:focus > .hotline.icon.service-light-hover {
  background-position: 100% 15%;
}
/*  */
.lock.icon,
.lock.icon.default,
body:not(.touch) .lock.icon.default-hover:hover,
body:not(.touch) a:hover > .lock.icon.default-hover,
body:not(.touch) .lock.icon.default-hover:focus,
body:not(.touch) a:focus > .lock.icon.default-hover {
  background-position: 0% 16.25%;
}
.lock.icon.white,
body:not(.touch) .lock.icon.white-hover:hover,
body:not(.touch) a:hover > .lock.icon.white-hover,
body:not(.touch) .lock.icon.white-hover:focus,
body:not(.touch) a:focus > .lock.icon.white-hover {
  background-position: 25% 16.25%;
}
.lock.icon.inactive,
body:not(.touch) .lock.icon.inactive-hover:hover,
body:not(.touch) a:hover > .lock.icon.inactive-hover,
body:not(.touch) .lock.icon.inactive-hover:focus,
body:not(.touch) a:focus > .lock.icon.inactive-hover {
  background-position: 50% 16.25%;
}
.lock.icon.service,
body:not(.touch) .lock.icon.service-hover:hover,
body:not(.touch) a:hover > .lock.icon.service-hover,
body:not(.touch) .lock.icon.service-hover:focus,
body:not(.touch) a:focus > .lock.icon.service-hover {
  background-position: 75% 16.25%;
}
/*  */
.lock.icon.service-light,
body:not(.touch) .lock.icon.service-light-hover:hover,
body:not(.touch) a:hover > .lock.icon.service-light-hover,
body:not(.touch) .lock.icon.service-light-hover:focus,
body:not(.touch) a:focus > .lock.icon.service-light-hover {
  background-position: 100% 16.25%;
}
/*  */
.edit.icon,
.edit.icon.default,
body:not(.touch) .edit.icon.default-hover:hover,
body:not(.touch) a:hover > .edit.icon.default-hover,
body:not(.touch) .edit.icon.default-hover:focus,
body:not(.touch) a:focus > .edit.icon.default-hover {
  background-position: 0% 17.5%;
}
.edit.icon.white,
body:not(.touch) .edit.icon.white-hover:hover,
body:not(.touch) a:hover > .edit.icon.white-hover,
body:not(.touch) .edit.icon.white-hover:focus,
body:not(.touch) a:focus > .edit.icon.white-hover {
  background-position: 25% 17.5%;
}
.edit.icon.inactive,
body:not(.touch) .edit.icon.inactive-hover:hover,
body:not(.touch) a:hover > .edit.icon.inactive-hover,
body:not(.touch) .edit.icon.inactive-hover:focus,
body:not(.touch) a:focus > .edit.icon.inactive-hover {
  background-position: 50% 17.5%;
}
.edit.icon.service,
body:not(.touch) .edit.icon.service-hover:hover,
body:not(.touch) a:hover > .edit.icon.service-hover,
body:not(.touch) .edit.icon.service-hover:focus,
body:not(.touch) a:focus > .edit.icon.service-hover {
  background-position: 75% 17.5%;
}
/*  */
.edit.icon.service-light,
body:not(.touch) .edit.icon.service-light-hover:hover,
body:not(.touch) a:hover > .edit.icon.service-light-hover,
body:not(.touch) .edit.icon.service-light-hover:focus,
body:not(.touch) a:focus > .edit.icon.service-light-hover {
  background-position: 100% 17.5%;
}
/*  */
.delete.icon,
.delete.icon.default,
body:not(.touch) .delete.icon.default-hover:hover,
body:not(.touch) a:hover > .delete.icon.default-hover,
body:not(.touch) .delete.icon.default-hover:focus,
body:not(.touch) a:focus > .delete.icon.default-hover {
  background-position: 0% 18.75%;
}
.delete.icon.white,
body:not(.touch) .delete.icon.white-hover:hover,
body:not(.touch) a:hover > .delete.icon.white-hover,
body:not(.touch) .delete.icon.white-hover:focus,
body:not(.touch) a:focus > .delete.icon.white-hover {
  background-position: 25% 18.75%;
}
.delete.icon.inactive,
body:not(.touch) .delete.icon.inactive-hover:hover,
body:not(.touch) a:hover > .delete.icon.inactive-hover,
body:not(.touch) .delete.icon.inactive-hover:focus,
body:not(.touch) a:focus > .delete.icon.inactive-hover {
  background-position: 50% 18.75%;
}
.delete.icon.service,
body:not(.touch) .delete.icon.service-hover:hover,
body:not(.touch) a:hover > .delete.icon.service-hover,
body:not(.touch) .delete.icon.service-hover:focus,
body:not(.touch) a:focus > .delete.icon.service-hover {
  background-position: 75% 18.75%;
}
/*  */
.delete.icon.service-light,
body:not(.touch) .delete.icon.service-light-hover:hover,
body:not(.touch) a:hover > .delete.icon.service-light-hover,
body:not(.touch) .delete.icon.service-light-hover:focus,
body:not(.touch) a:focus > .delete.icon.service-light-hover {
  background-position: 100% 18.75%;
}
/*  */
.up.icon,
.up.icon.default,
body:not(.touch) .up.icon.default-hover:hover,
body:not(.touch) a:hover > .up.icon.default-hover,
body:not(.touch) .up.icon.default-hover:focus,
body:not(.touch) a:focus > .up.icon.default-hover {
  background-position: 0% 0%;
}
.up.icon.white,
body:not(.touch) .up.icon.white-hover:hover,
body:not(.touch) a:hover > .up.icon.white-hover,
body:not(.touch) .up.icon.white-hover:focus,
body:not(.touch) a:focus > .up.icon.white-hover {
  background-position: 25% 0%;
}
.up.icon.inactive,
body:not(.touch) .up.icon.inactive-hover:hover,
body:not(.touch) a:hover > .up.icon.inactive-hover,
body:not(.touch) .up.icon.inactive-hover:focus,
body:not(.touch) a:focus > .up.icon.inactive-hover {
  background-position: 50% 0%;
}
.up.icon.service,
body:not(.touch) .up.icon.service-hover:hover,
body:not(.touch) a:hover > .up.icon.service-hover,
body:not(.touch) .up.icon.service-hover:focus,
body:not(.touch) a:focus > .up.icon.service-hover {
  background-position: 75% 0%;
}
/*  */
.up.icon.service-light,
body:not(.touch) .up.icon.service-light-hover:hover,
body:not(.touch) a:hover > .up.icon.service-light-hover,
body:not(.touch) .up.icon.service-light-hover:focus,
body:not(.touch) a:focus > .up.icon.service-light-hover {
  background-position: 100% 0%;
}
/*  */
.down.icon,
.down.icon.default,
body:not(.touch) .down.icon.default-hover:hover,
body:not(.touch) a:hover > .down.icon.default-hover,
body:not(.touch) .down.icon.default-hover:focus,
body:not(.touch) a:focus > .down.icon.default-hover {
  background-position: 0% 1.25%;
}
.down.icon.white,
body:not(.touch) .down.icon.white-hover:hover,
body:not(.touch) a:hover > .down.icon.white-hover,
body:not(.touch) .down.icon.white-hover:focus,
body:not(.touch) a:focus > .down.icon.white-hover {
  background-position: 25% 1.25%;
}
.down.icon.inactive,
body:not(.touch) .down.icon.inactive-hover:hover,
body:not(.touch) a:hover > .down.icon.inactive-hover,
body:not(.touch) .down.icon.inactive-hover:focus,
body:not(.touch) a:focus > .down.icon.inactive-hover {
  background-position: 50% 1.25%;
}
.down.icon.service,
body:not(.touch) .down.icon.service-hover:hover,
body:not(.touch) a:hover > .down.icon.service-hover,
body:not(.touch) .down.icon.service-hover:focus,
body:not(.touch) a:focus > .down.icon.service-hover {
  background-position: 75% 1.25%;
}
/*  */
.down.icon.service-light,
body:not(.touch) .down.icon.service-light-hover:hover,
body:not(.touch) a:hover > .down.icon.service-light-hover,
body:not(.touch) .down.icon.service-light-hover:focus,
body:not(.touch) a:focus > .down.icon.service-light-hover {
  background-position: 100% 1.25%;
}
/*  */
.prev.icon,
.prev.icon.default,
body:not(.touch) .prev.icon.default-hover:hover,
body:not(.touch) a:hover > .prev.icon.default-hover,
body:not(.touch) .prev.icon.default-hover:focus,
body:not(.touch) a:focus > .prev.icon.default-hover {
  background-position: 0% 2.5%;
}
.prev.icon.white,
body:not(.touch) .prev.icon.white-hover:hover,
body:not(.touch) a:hover > .prev.icon.white-hover,
body:not(.touch) .prev.icon.white-hover:focus,
body:not(.touch) a:focus > .prev.icon.white-hover {
  background-position: 25% 2.5%;
}
.prev.icon.inactive,
body:not(.touch) .prev.icon.inactive-hover:hover,
body:not(.touch) a:hover > .prev.icon.inactive-hover,
body:not(.touch) .prev.icon.inactive-hover:focus,
body:not(.touch) a:focus > .prev.icon.inactive-hover {
  background-position: 50% 2.5%;
}
.prev.icon.service,
body:not(.touch) .prev.icon.service-hover:hover,
body:not(.touch) a:hover > .prev.icon.service-hover,
body:not(.touch) .prev.icon.service-hover:focus,
body:not(.touch) a:focus > .prev.icon.service-hover {
  background-position: 75% 2.5%;
}
/*  */
.prev.icon.service-light,
body:not(.touch) .prev.icon.service-light-hover:hover,
body:not(.touch) a:hover > .prev.icon.service-light-hover,
body:not(.touch) .prev.icon.service-light-hover:focus,
body:not(.touch) a:focus > .prev.icon.service-light-hover {
  background-position: 100% 2.5%;
}
/*  */
.next.icon,
.next.icon.default,
body:not(.touch) .next.icon.default-hover:hover,
body:not(.touch) a:hover > .next.icon.default-hover,
body:not(.touch) .next.icon.default-hover:focus,
body:not(.touch) a:focus > .next.icon.default-hover {
  background-position: 0% 3.75%;
}
.next.icon.white,
body:not(.touch) .next.icon.white-hover:hover,
body:not(.touch) a:hover > .next.icon.white-hover,
body:not(.touch) .next.icon.white-hover:focus,
body:not(.touch) a:focus > .next.icon.white-hover {
  background-position: 25% 3.75%;
}
.next.icon.inactive,
body:not(.touch) .next.icon.inactive-hover:hover,
body:not(.touch) a:hover > .next.icon.inactive-hover,
body:not(.touch) .next.icon.inactive-hover:focus,
body:not(.touch) a:focus > .next.icon.inactive-hover {
  background-position: 50% 3.75%;
}
.next.icon.service,
body:not(.touch) .next.icon.service-hover:hover,
body:not(.touch) a:hover > .next.icon.service-hover,
body:not(.touch) .next.icon.service-hover:focus,
body:not(.touch) a:focus > .next.icon.service-hover {
  background-position: 75% 3.75%;
}
/*  */
.next.icon.service-light,
body:not(.touch) .next.icon.service-light-hover:hover,
body:not(.touch) a:hover > .next.icon.service-light-hover,
body:not(.touch) .next.icon.service-light-hover:focus,
body:not(.touch) a:focus > .next.icon.service-light-hover {
  background-position: 100% 3.75%;
}
/*  */
.burger.icon,
.burger.icon.default,
body:not(.touch) .burger.icon.default-hover:hover,
body:not(.touch) a:hover > .burger.icon.default-hover,
body:not(.touch) .burger.icon.default-hover:focus,
body:not(.touch) a:focus > .burger.icon.default-hover {
  background-position: 0% 5%;
}
.burger.icon.white,
body:not(.touch) .burger.icon.white-hover:hover,
body:not(.touch) a:hover > .burger.icon.white-hover,
body:not(.touch) .burger.icon.white-hover:focus,
body:not(.touch) a:focus > .burger.icon.white-hover {
  background-position: 25% 5%;
}
.burger.icon.inactive,
body:not(.touch) .burger.icon.inactive-hover:hover,
body:not(.touch) a:hover > .burger.icon.inactive-hover,
body:not(.touch) .burger.icon.inactive-hover:focus,
body:not(.touch) a:focus > .burger.icon.inactive-hover {
  background-position: 50% 5%;
}
.burger.icon.service,
body:not(.touch) .burger.icon.service-hover:hover,
body:not(.touch) a:hover > .burger.icon.service-hover,
body:not(.touch) .burger.icon.service-hover:focus,
body:not(.touch) a:focus > .burger.icon.service-hover {
  background-position: 75% 5%;
}
/*  */
.burger.icon.service-light,
body:not(.touch) .burger.icon.service-light-hover:hover,
body:not(.touch) a:hover > .burger.icon.service-light-hover,
body:not(.touch) .burger.icon.service-light-hover:focus,
body:not(.touch) a:focus > .burger.icon.service-light-hover {
  background-position: 100% 5%;
}
/*  */
.home.icon,
.home.icon.default,
body:not(.touch) .home.icon.default-hover:hover,
body:not(.touch) a:hover > .home.icon.default-hover,
body:not(.touch) .home.icon.default-hover:focus,
body:not(.touch) a:focus > .home.icon.default-hover {
  background-position: 0% 6.25%;
}
.home.icon.white,
body:not(.touch) .home.icon.white-hover:hover,
body:not(.touch) a:hover > .home.icon.white-hover,
body:not(.touch) .home.icon.white-hover:focus,
body:not(.touch) a:focus > .home.icon.white-hover {
  background-position: 25% 6.25%;
}
.home.icon.inactive,
body:not(.touch) .home.icon.inactive-hover:hover,
body:not(.touch) a:hover > .home.icon.inactive-hover,
body:not(.touch) .home.icon.inactive-hover:focus,
body:not(.touch) a:focus > .home.icon.inactive-hover {
  background-position: 50% 6.25%;
}
.home.icon.service,
body:not(.touch) .home.icon.service-hover:hover,
body:not(.touch) a:hover > .home.icon.service-hover,
body:not(.touch) .home.icon.service-hover:focus,
body:not(.touch) a:focus > .home.icon.service-hover {
  background-position: 75% 6.25%;
}
/*  */
.home.icon.service-light,
body:not(.touch) .home.icon.service-light-hover:hover,
body:not(.touch) a:hover > .home.icon.service-light-hover,
body:not(.touch) .home.icon.service-light-hover:focus,
body:not(.touch) a:focus > .home.icon.service-light-hover {
  background-position: 100% 6.25%;
}
/*  */
.close.icon,
.close.icon.default,
body:not(.touch) .close.icon.default-hover:hover,
body:not(.touch) a:hover > .close.icon.default-hover,
body:not(.touch) .close.icon.default-hover:focus,
body:not(.touch) a:focus > .close.icon.default-hover {
  background-position: 0% 7.5%;
}
.close.icon.white,
body:not(.touch) .close.icon.white-hover:hover,
body:not(.touch) a:hover > .close.icon.white-hover,
body:not(.touch) .close.icon.white-hover:focus,
body:not(.touch) a:focus > .close.icon.white-hover {
  background-position: 25% 7.5%;
}
.close.icon.inactive,
body:not(.touch) .close.icon.inactive-hover:hover,
body:not(.touch) a:hover > .close.icon.inactive-hover,
body:not(.touch) .close.icon.inactive-hover:focus,
body:not(.touch) a:focus > .close.icon.inactive-hover {
  background-position: 50% 7.5%;
}
.close.icon.service,
body:not(.touch) .close.icon.service-hover:hover,
body:not(.touch) a:hover > .close.icon.service-hover,
body:not(.touch) .close.icon.service-hover:focus,
body:not(.touch) a:focus > .close.icon.service-hover {
  background-position: 75% 7.5%;
}
/*  */
.close.icon.service-light,
body:not(.touch) .close.icon.service-light-hover:hover,
body:not(.touch) a:hover > .close.icon.service-light-hover,
body:not(.touch) .close.icon.service-light-hover:focus,
body:not(.touch) a:focus > .close.icon.service-light-hover {
  background-position: 100% 7.5%;
}
/*  */
.logout.icon,
.logout.icon.default,
body:not(.touch) .logout.icon.default-hover:hover,
body:not(.touch) a:hover > .logout.icon.default-hover,
body:not(.touch) .logout.icon.default-hover:focus,
body:not(.touch) a:focus > .logout.icon.default-hover {
  background-position: 0% 8.75%;
}
.logout.icon.white,
body:not(.touch) .logout.icon.white-hover:hover,
body:not(.touch) a:hover > .logout.icon.white-hover,
body:not(.touch) .logout.icon.white-hover:focus,
body:not(.touch) a:focus > .logout.icon.white-hover {
  background-position: 25% 8.75%;
}
.logout.icon.inactive,
body:not(.touch) .logout.icon.inactive-hover:hover,
body:not(.touch) a:hover > .logout.icon.inactive-hover,
body:not(.touch) .logout.icon.inactive-hover:focus,
body:not(.touch) a:focus > .logout.icon.inactive-hover {
  background-position: 50% 8.75%;
}
.logout.icon.service,
body:not(.touch) .logout.icon.service-hover:hover,
body:not(.touch) a:hover > .logout.icon.service-hover,
body:not(.touch) .logout.icon.service-hover:focus,
body:not(.touch) a:focus > .logout.icon.service-hover {
  background-position: 75% 8.75%;
}
/*  */
.logout.icon.service-light,
body:not(.touch) .logout.icon.service-light-hover:hover,
body:not(.touch) a:hover > .logout.icon.service-light-hover,
body:not(.touch) .logout.icon.service-light-hover:focus,
body:not(.touch) a:focus > .logout.icon.service-light-hover {
  background-position: 100% 8.75%;
}
/*  */
.search.icon,
.search.icon.default,
body:not(.touch) .search.icon.default-hover:hover,
body:not(.touch) a:hover > .search.icon.default-hover,
body:not(.touch) .search.icon.default-hover:focus,
body:not(.touch) a:focus > .search.icon.default-hover {
  background-position: 0% 10%;
}
.search.icon.white,
body:not(.touch) .search.icon.white-hover:hover,
body:not(.touch) a:hover > .search.icon.white-hover,
body:not(.touch) .search.icon.white-hover:focus,
body:not(.touch) a:focus > .search.icon.white-hover {
  background-position: 25% 10%;
}
.search.icon.inactive,
body:not(.touch) .search.icon.inactive-hover:hover,
body:not(.touch) a:hover > .search.icon.inactive-hover,
body:not(.touch) .search.icon.inactive-hover:focus,
body:not(.touch) a:focus > .search.icon.inactive-hover {
  background-position: 50% 10%;
}
.search.icon.service,
body:not(.touch) .search.icon.service-hover:hover,
body:not(.touch) a:hover > .search.icon.service-hover,
body:not(.touch) .search.icon.service-hover:focus,
body:not(.touch) a:focus > .search.icon.service-hover {
  background-position: 75% 10%;
}
/*  */
.search.icon.service-light,
body:not(.touch) .search.icon.service-light-hover:hover,
body:not(.touch) a:hover > .search.icon.service-light-hover,
body:not(.touch) .search.icon.service-light-hover:focus,
body:not(.touch) a:focus > .search.icon.service-light-hover {
  background-position: 100% 10%;
}
/*  */
.person.icon,
.person.icon.default,
body:not(.touch) .person.icon.default-hover:hover,
body:not(.touch) a:hover > .person.icon.default-hover,
body:not(.touch) .person.icon.default-hover:focus,
body:not(.touch) a:focus > .person.icon.default-hover {
  background-position: 0% 11.25%;
}
.person.icon.white,
body:not(.touch) .person.icon.white-hover:hover,
body:not(.touch) a:hover > .person.icon.white-hover,
body:not(.touch) .person.icon.white-hover:focus,
body:not(.touch) a:focus > .person.icon.white-hover {
  background-position: 25% 11.25%;
}
.person.icon.inactive,
body:not(.touch) .person.icon.inactive-hover:hover,
body:not(.touch) a:hover > .person.icon.inactive-hover,
body:not(.touch) .person.icon.inactive-hover:focus,
body:not(.touch) a:focus > .person.icon.inactive-hover {
  background-position: 50% 11.25%;
}
.person.icon.service,
body:not(.touch) .person.icon.service-hover:hover,
body:not(.touch) a:hover > .person.icon.service-hover,
body:not(.touch) .person.icon.service-hover:focus,
body:not(.touch) a:focus > .person.icon.service-hover {
  background-position: 75% 11.25%;
}
/*  */
.person.icon.service-light,
body:not(.touch) .person.icon.service-light-hover:hover,
body:not(.touch) a:hover > .person.icon.service-light-hover,
body:not(.touch) .person.icon.service-light-hover:focus,
body:not(.touch) a:focus > .person.icon.service-light-hover {
  background-position: 100% 11.25%;
}
/*  */
.basket.icon,
.basket.icon.default,
body:not(.touch) .basket.icon.default-hover:hover,
body:not(.touch) a:hover > .basket.icon.default-hover,
body:not(.touch) .basket.icon.default-hover:focus,
body:not(.touch) a:focus > .basket.icon.default-hover {
  background-position: 0% 12.5%;
}
.basket.icon.white,
body:not(.touch) .basket.icon.white-hover:hover,
body:not(.touch) a:hover > .basket.icon.white-hover,
body:not(.touch) .basket.icon.white-hover:focus,
body:not(.touch) a:focus > .basket.icon.white-hover {
  background-position: 25% 12.5%;
}
.basket.icon.inactive,
body:not(.touch) .basket.icon.inactive-hover:hover,
body:not(.touch) a:hover > .basket.icon.inactive-hover,
body:not(.touch) .basket.icon.inactive-hover:focus,
body:not(.touch) a:focus > .basket.icon.inactive-hover {
  background-position: 50% 12.5%;
}
.basket.icon.service,
body:not(.touch) .basket.icon.service-hover:hover,
body:not(.touch) a:hover > .basket.icon.service-hover,
body:not(.touch) .basket.icon.service-hover:focus,
body:not(.touch) a:focus > .basket.icon.service-hover {
  background-position: 75% 12.5%;
}
/*  */
.basket.icon.service-light,
body:not(.touch) .basket.icon.service-light-hover:hover,
body:not(.touch) a:hover > .basket.icon.service-light-hover,
body:not(.touch) .basket.icon.service-light-hover:focus,
body:not(.touch) a:focus > .basket.icon.service-light-hover {
  background-position: 100% 12.5%;
}
/*  */
.eye.icon,
.eye.icon.default,
body:not(.touch) .eye.icon.default-hover:hover,
body:not(.touch) a:hover > .eye.icon.default-hover,
body:not(.touch) .eye.icon.default-hover:focus,
body:not(.touch) a:focus > .eye.icon.default-hover {
  background-position: 0% 13.75%;
}
.eye.icon.white,
body:not(.touch) .eye.icon.white-hover:hover,
body:not(.touch) a:hover > .eye.icon.white-hover,
body:not(.touch) .eye.icon.white-hover:focus,
body:not(.touch) a:focus > .eye.icon.white-hover {
  background-position: 25% 13.75%;
}
.eye.icon.inactive,
body:not(.touch) .eye.icon.inactive-hover:hover,
body:not(.touch) a:hover > .eye.icon.inactive-hover,
body:not(.touch) .eye.icon.inactive-hover:focus,
body:not(.touch) a:focus > .eye.icon.inactive-hover {
  background-position: 50% 13.75%;
}
.eye.icon.service,
body:not(.touch) .eye.icon.service-hover:hover,
body:not(.touch) a:hover > .eye.icon.service-hover,
body:not(.touch) .eye.icon.service-hover:focus,
body:not(.touch) a:focus > .eye.icon.service-hover {
  background-position: 75% 13.75%;
}
/*  */
.eye.icon.service-light,
body:not(.touch) .eye.icon.service-light-hover:hover,
body:not(.touch) a:hover > .eye.icon.service-light-hover,
body:not(.touch) .eye.icon.service-light-hover:focus,
body:not(.touch) a:focus > .eye.icon.service-light-hover {
  background-position: 100% 13.75%;
}
/*  */
.hotline.icon,
.hotline.icon.default,
body:not(.touch) .hotline.icon.default-hover:hover,
body:not(.touch) a:hover > .hotline.icon.default-hover,
body:not(.touch) .hotline.icon.default-hover:focus,
body:not(.touch) a:focus > .hotline.icon.default-hover {
  background-position: 0% 15%;
}
.hotline.icon.white,
body:not(.touch) .hotline.icon.white-hover:hover,
body:not(.touch) a:hover > .hotline.icon.white-hover,
body:not(.touch) .hotline.icon.white-hover:focus,
body:not(.touch) a:focus > .hotline.icon.white-hover {
  background-position: 25% 15%;
}
.hotline.icon.inactive,
body:not(.touch) .hotline.icon.inactive-hover:hover,
body:not(.touch) a:hover > .hotline.icon.inactive-hover,
body:not(.touch) .hotline.icon.inactive-hover:focus,
body:not(.touch) a:focus > .hotline.icon.inactive-hover {
  background-position: 50% 15%;
}
.hotline.icon.service,
body:not(.touch) .hotline.icon.service-hover:hover,
body:not(.touch) a:hover > .hotline.icon.service-hover,
body:not(.touch) .hotline.icon.service-hover:focus,
body:not(.touch) a:focus > .hotline.icon.service-hover {
  background-position: 75% 15%;
}
/*  */
.hotline.icon.service-light,
body:not(.touch) .hotline.icon.service-light-hover:hover,
body:not(.touch) a:hover > .hotline.icon.service-light-hover,
body:not(.touch) .hotline.icon.service-light-hover:focus,
body:not(.touch) a:focus > .hotline.icon.service-light-hover {
  background-position: 100% 15%;
}
/*  */
.lock.icon,
.lock.icon.default,
body:not(.touch) .lock.icon.default-hover:hover,
body:not(.touch) a:hover > .lock.icon.default-hover,
body:not(.touch) .lock.icon.default-hover:focus,
body:not(.touch) a:focus > .lock.icon.default-hover {
  background-position: 0% 16.25%;
}
.lock.icon.white,
body:not(.touch) .lock.icon.white-hover:hover,
body:not(.touch) a:hover > .lock.icon.white-hover,
body:not(.touch) .lock.icon.white-hover:focus,
body:not(.touch) a:focus > .lock.icon.white-hover {
  background-position: 25% 16.25%;
}
.lock.icon.inactive,
body:not(.touch) .lock.icon.inactive-hover:hover,
body:not(.touch) a:hover > .lock.icon.inactive-hover,
body:not(.touch) .lock.icon.inactive-hover:focus,
body:not(.touch) a:focus > .lock.icon.inactive-hover {
  background-position: 50% 16.25%;
}
.lock.icon.service,
body:not(.touch) .lock.icon.service-hover:hover,
body:not(.touch) a:hover > .lock.icon.service-hover,
body:not(.touch) .lock.icon.service-hover:focus,
body:not(.touch) a:focus > .lock.icon.service-hover {
  background-position: 75% 16.25%;
}
/*  */
.lock.icon.service-light,
body:not(.touch) .lock.icon.service-light-hover:hover,
body:not(.touch) a:hover > .lock.icon.service-light-hover,
body:not(.touch) .lock.icon.service-light-hover:focus,
body:not(.touch) a:focus > .lock.icon.service-light-hover {
  background-position: 100% 16.25%;
}
/*  */
.edit.icon,
.edit.icon.default,
body:not(.touch) .edit.icon.default-hover:hover,
body:not(.touch) a:hover > .edit.icon.default-hover,
body:not(.touch) .edit.icon.default-hover:focus,
body:not(.touch) a:focus > .edit.icon.default-hover {
  background-position: 0% 17.5%;
}
.edit.icon.white,
body:not(.touch) .edit.icon.white-hover:hover,
body:not(.touch) a:hover > .edit.icon.white-hover,
body:not(.touch) .edit.icon.white-hover:focus,
body:not(.touch) a:focus > .edit.icon.white-hover {
  background-position: 25% 17.5%;
}
.edit.icon.inactive,
body:not(.touch) .edit.icon.inactive-hover:hover,
body:not(.touch) a:hover > .edit.icon.inactive-hover,
body:not(.touch) .edit.icon.inactive-hover:focus,
body:not(.touch) a:focus > .edit.icon.inactive-hover {
  background-position: 50% 17.5%;
}
.edit.icon.service,
body:not(.touch) .edit.icon.service-hover:hover,
body:not(.touch) a:hover > .edit.icon.service-hover,
body:not(.touch) .edit.icon.service-hover:focus,
body:not(.touch) a:focus > .edit.icon.service-hover {
  background-position: 75% 17.5%;
}
/*  */
.edit.icon.service-light,
body:not(.touch) .edit.icon.service-light-hover:hover,
body:not(.touch) a:hover > .edit.icon.service-light-hover,
body:not(.touch) .edit.icon.service-light-hover:focus,
body:not(.touch) a:focus > .edit.icon.service-light-hover {
  background-position: 100% 17.5%;
}
/*  */
.delete.icon,
.delete.icon.default,
body:not(.touch) .delete.icon.default-hover:hover,
body:not(.touch) a:hover > .delete.icon.default-hover,
body:not(.touch) .delete.icon.default-hover:focus,
body:not(.touch) a:focus > .delete.icon.default-hover {
  background-position: 0% 18.75%;
}
.delete.icon.white,
body:not(.touch) .delete.icon.white-hover:hover,
body:not(.touch) a:hover > .delete.icon.white-hover,
body:not(.touch) .delete.icon.white-hover:focus,
body:not(.touch) a:focus > .delete.icon.white-hover {
  background-position: 25% 18.75%;
}
.delete.icon.inactive,
body:not(.touch) .delete.icon.inactive-hover:hover,
body:not(.touch) a:hover > .delete.icon.inactive-hover,
body:not(.touch) .delete.icon.inactive-hover:focus,
body:not(.touch) a:focus > .delete.icon.inactive-hover {
  background-position: 50% 18.75%;
}
.delete.icon.service,
body:not(.touch) .delete.icon.service-hover:hover,
body:not(.touch) a:hover > .delete.icon.service-hover,
body:not(.touch) .delete.icon.service-hover:focus,
body:not(.touch) a:focus > .delete.icon.service-hover {
  background-position: 75% 18.75%;
}
/*  */
.delete.icon.service-light,
body:not(.touch) .delete.icon.service-light-hover:hover,
body:not(.touch) a:hover > .delete.icon.service-light-hover,
body:not(.touch) .delete.icon.service-light-hover:focus,
body:not(.touch) a:focus > .delete.icon.service-light-hover {
  background-position: 100% 18.75%;
}
/*  */
.success.icon,
.success.icon.default,
body:not(.touch) .success.icon.default-hover:hover,
body:not(.touch) a:hover > .success.icon.default-hover,
body:not(.touch) .success.icon.default-hover:focus,
body:not(.touch) a:focus > .success.icon.default-hover {
  background-position: 0% 22.5%;
}
.success.icon.white,
body:not(.touch) .success.icon.white-hover:hover,
body:not(.touch) a:hover > .success.icon.white-hover,
body:not(.touch) .success.icon.white-hover:focus,
body:not(.touch) a:focus > .success.icon.white-hover {
  background-position: 25% 22.5%;
}
.info.icon,
.info.icon.default,
body:not(.touch) .info.icon.default-hover:hover,
body:not(.touch) a:hover > .info.icon.default-hover,
body:not(.touch) .info.icon.default-hover:focus,
body:not(.touch) a:focus > .info.icon.default-hover {
  background-position: 0% 23.75%;
}
.info.icon.white,
body:not(.touch) .info.icon.white-hover:hover,
body:not(.touch) a:hover > .info.icon.white-hover,
body:not(.touch) .info.icon.white-hover:focus,
body:not(.touch) a:focus > .info.icon.white-hover {
  background-position: 25% 23.75%;
}
.warning.icon,
.warning.icon.default,
body:not(.touch) .warning.icon.default-hover:hover,
body:not(.touch) a:hover > .warning.icon.default-hover,
body:not(.touch) .warning.icon.default-hover:focus,
body:not(.touch) a:focus > .warning.icon.default-hover {
  background-position: 0% 25%;
}
.warning.icon.white,
body:not(.touch) .warning.icon.white-hover:hover,
body:not(.touch) a:hover > .warning.icon.white-hover,
body:not(.touch) .warning.icon.white-hover:focus,
body:not(.touch) a:focus > .warning.icon.white-hover {
  background-position: 25% 25%;
}
.error.icon,
.error.icon.default,
body:not(.touch) .error.icon.default-hover:hover,
body:not(.touch) a:hover > .error.icon.default-hover,
body:not(.touch) .error.icon.default-hover:focus,
body:not(.touch) a:focus > .error.icon.default-hover {
  background-position: 0% 26.25%;
}
.error.icon.white,
body:not(.touch) .error.icon.white-hover:hover,
body:not(.touch) a:hover > .error.icon.white-hover,
body:not(.touch) .error.icon.white-hover:focus,
body:not(.touch) a:focus > .error.icon.white-hover {
  background-position: 25% 26.25%;
}
.success.icon,
.success.icon.default,
body:not(.touch) .success.icon.default-hover:hover,
body:not(.touch) a:hover > .success.icon.default-hover,
body:not(.touch) .success.icon.default-hover:focus,
body:not(.touch) a:focus > .success.icon.default-hover {
  background-position: 0% 22.5%;
}
.success.icon.white,
body:not(.touch) .success.icon.white-hover:hover,
body:not(.touch) a:hover > .success.icon.white-hover,
body:not(.touch) .success.icon.white-hover:focus,
body:not(.touch) a:focus > .success.icon.white-hover {
  background-position: 25% 22.5%;
}
.info.icon,
.info.icon.default,
body:not(.touch) .info.icon.default-hover:hover,
body:not(.touch) a:hover > .info.icon.default-hover,
body:not(.touch) .info.icon.default-hover:focus,
body:not(.touch) a:focus > .info.icon.default-hover {
  background-position: 0% 23.75%;
}
.info.icon.white,
body:not(.touch) .info.icon.white-hover:hover,
body:not(.touch) a:hover > .info.icon.white-hover,
body:not(.touch) .info.icon.white-hover:focus,
body:not(.touch) a:focus > .info.icon.white-hover {
  background-position: 25% 23.75%;
}
.warning.icon,
.warning.icon.default,
body:not(.touch) .warning.icon.default-hover:hover,
body:not(.touch) a:hover > .warning.icon.default-hover,
body:not(.touch) .warning.icon.default-hover:focus,
body:not(.touch) a:focus > .warning.icon.default-hover {
  background-position: 0% 25%;
}
.warning.icon.white,
body:not(.touch) .warning.icon.white-hover:hover,
body:not(.touch) a:hover > .warning.icon.white-hover,
body:not(.touch) .warning.icon.white-hover:focus,
body:not(.touch) a:focus > .warning.icon.white-hover {
  background-position: 25% 25%;
}
.error.icon,
.error.icon.default,
body:not(.touch) .error.icon.default-hover:hover,
body:not(.touch) a:hover > .error.icon.default-hover,
body:not(.touch) .error.icon.default-hover:focus,
body:not(.touch) a:focus > .error.icon.default-hover {
  background-position: 0% 26.25%;
}
.error.icon.white,
body:not(.touch) .error.icon.white-hover:hover,
body:not(.touch) a:hover > .error.icon.white-hover,
body:not(.touch) .error.icon.white-hover:focus,
body:not(.touch) a:focus > .error.icon.white-hover {
  background-position: 25% 26.25%;
}
.telephone.icon,
.telephone.icon.default,
body:not(.touch) .telephone.icon.default-hover:hover,
body:not(.touch) a:hover > .telephone.icon.default-hover,
body:not(.touch) .telephone.icon.default-hover:focus,
body:not(.touch) a:focus > .telephone.icon.default-hover {
  background-position: 0% 32.5%;
}
.telephone.icon.white,
body:not(.touch) .telephone.icon.white-hover:hover,
body:not(.touch) a:hover > .telephone.icon.white-hover,
body:not(.touch) .telephone.icon.white-hover:focus,
body:not(.touch) a:focus > .telephone.icon.white-hover {
  background-position: 25% 32.5%;
}
.telephone.icon.inactive,
body:not(.touch) .telephone.icon.inactive-hover:hover,
body:not(.touch) a:hover > .telephone.icon.inactive-hover,
body:not(.touch) .telephone.icon.inactive-hover:focus,
body:not(.touch) a:focus > .telephone.icon.inactive-hover {
  background-position: 50% 32.5%;
}
.telephone.icon.service,
body:not(.touch) .telephone.icon.service-hover:hover,
body:not(.touch) a:hover > .telephone.icon.service-hover,
body:not(.touch) .telephone.icon.service-hover:focus,
body:not(.touch) a:focus > .telephone.icon.service-hover {
  background-position: 75% 32.5%;
}
/*  */
.telephone.icon.service-light,
body:not(.touch) .telephone.icon.service-light-hover:hover,
body:not(.touch) a:hover > .telephone.icon.service-light-hover,
body:not(.touch) .telephone.icon.service-light-hover:focus,
body:not(.touch) a:focus > .telephone.icon.service-light-hover {
  background-position: 100% 32.5%;
}
/*  */
.telephone.icon,
.telephone.icon.default,
body:not(.touch) .telephone.icon.default-hover:hover,
body:not(.touch) a:hover > .telephone.icon.default-hover,
body:not(.touch) .telephone.icon.default-hover:focus,
body:not(.touch) a:focus > .telephone.icon.default-hover {
  background-position: 0% 32.5%;
}
.telephone.icon.white,
body:not(.touch) .telephone.icon.white-hover:hover,
body:not(.touch) a:hover > .telephone.icon.white-hover,
body:not(.touch) .telephone.icon.white-hover:focus,
body:not(.touch) a:focus > .telephone.icon.white-hover {
  background-position: 25% 32.5%;
}
.telephone.icon.inactive,
body:not(.touch) .telephone.icon.inactive-hover:hover,
body:not(.touch) a:hover > .telephone.icon.inactive-hover,
body:not(.touch) .telephone.icon.inactive-hover:focus,
body:not(.touch) a:focus > .telephone.icon.inactive-hover {
  background-position: 50% 32.5%;
}
.telephone.icon.service,
body:not(.touch) .telephone.icon.service-hover:hover,
body:not(.touch) a:hover > .telephone.icon.service-hover,
body:not(.touch) .telephone.icon.service-hover:focus,
body:not(.touch) a:focus > .telephone.icon.service-hover {
  background-position: 75% 32.5%;
}
/*  */
.telephone.icon.service-light,
body:not(.touch) .telephone.icon.service-light-hover:hover,
body:not(.touch) a:hover > .telephone.icon.service-light-hover,
body:not(.touch) .telephone.icon.service-light-hover:focus,
body:not(.touch) a:focus > .telephone.icon.service-light-hover {
  background-position: 100% 32.5%;
}
/*  */
[data-cc="visual"] {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
}
[data-cc="visual"] picture {
  width: 100%;
  display: flex;
}
[data-cc="visual"][data-type="default"] picture img {
  width: 100%;
}
[data-cc="visual"][data-type="cropped"] picture {
  margin: 0;
  overflow: hidden;
  max-width: 100%;
  position: relative;
  display: block;
  height: 100%;
}
[data-cc="visual"][data-type="cropped"] picture img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  min-width: 100%;
}
@media screen and (min-width: 980px) {
  [data-cc="visual"][data-type="cropped"] picture {
    display: flex;
  }
  [data-cc="visual"][data-type="cropped"] picture img {
    position: relative;
  }
}
[data-cc="visual"][data-type="logo"] {
  display: flex;
}
[data-cc="visual"][data-type="logo"] picture {
  margin: 0;
  width: auto;
  display: inline-block;
}
[data-cc="visual"][data-type="logo"] picture img {
  min-height: 100%;
  max-width: 192px;
  max-height: 64px;
  vertical-align: middle;
}
@media screen and (max-width: 659.9px) {
  [data-cc="visual"][data-type="logo"] picture img {
    max-height: 32px;
  }
}
[data-cc="visual"][data-alignment="left"] {
  justify-content: flex-start;
}
[data-cc="visual"][data-alignment="center"] {
  justify-content: center;
}
[data-cc="visual"][data-alignment="right"] {
  justify-content: flex-end;
}
[data-cc="visual"] [data-cm="chip"] {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  margin: 8px 0 0 8px;
}
.label,
.label > img {
  display: inline-block;
}
.label.top-left,
.label.top-center,
.label.top-right,
.label.center-left,
.label.center,
.label.center-right,
.label.bottom-left,
.label.bottom-center,
.label.bottom-right {
  position: absolute;
  margin: 10px;
  z-index: 3;
}
.label.top-left {
  top: 0px;
  left: 0px;
}
.label.top-center {
  top: 0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
@media screen and (max-width: 659.9px) {
  .label.s-top-center {
    top: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
  }
}
.label.top-right {
  top: 0px;
  right: 0px;
}
.label.center-left {
  top: 50%;
  left: 0px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.label.center {
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  margin: 0px;
}
.label.center-right {
  top: 50%;
  right: 0px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.label.bottom-left {
  bottom: 0px;
  left: 0px;
}
.label.bottom-center {
  bottom: 0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.label.bottom-right {
  bottom: 0px;
  right: 0px;
}
.label.service {
  padding: 0px 3px;
  border-radius: 3px;
  background: #004788;
  color: #FFFFFF;
}
[data-cc="text"] ul,
[data-cc="text"] ol,
.list {
  list-style: none;
}
[data-cc="text"] ul li,
[data-cc="text"] ol li,
.list li {
  padding: 5px 0px;
  position: relative;
}
[data-cc="text"] ul li:before,
[data-cc="text"] ol li:before,
[class*='backdrop-b1-light'] ul.list:not(.check.m):not(.text) li:before,
.list li:before {
  content: "";
  display: inline-block;
  background-color: #004788;
}
[data-cc="text"].backdrop-b1-base ul li:before,
[data-cc="text"].backdrop-b1-base ol li:before,
[class*='backdrop-'].inverted .list li:before,
.backdrop-b1-base .list li:before {
  background-color: #FFFFFF;
}
ul.list {
  padding-left: 24px;
}
ul.list li:before {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  margin: 0px 8px 0px -24px;
  vertical-align: -2px;
}
ul.m.list li:before {
  vertical-align: -1px;
}
/* s-List mit Bullets 8px durchmesser */
[data-cc="text"] ul,
ul.s.list {
  padding-left: 16px;
}
[data-cc="text"] ul li,
ul.s.list li {
  padding: 4px 0px;
}
[data-cc="text"] ul li:before,
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;
}
[data-cc="text"] ol,
ol.list {
  padding-left: 32px;
  counter-reset: section 1;
}
ol.list,
ul.check.list:not([class*="size-2"]),
ul.m.list:not([class*="size-2"]) {
  font-family: 'DroidRegular', Arial, sans-serif;
  font-size: 20px;
  line-height: 28px;
}
[data-cc="text"] ol {
  font-family: 'DroidRegular', Verdana, sans-serif;
  font-size: 16px;
  line-height: 24px;
}
[data-cc="text"] ol li,
ul.check.list:not([class*="size-2"]) li,
ol.list li {
  padding: 5px 0px;
}
[data-cc="text"] ol big,
[data-cc="text"] ol small {
  display: inline;
}
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 {
  background-color: transparent;
}
[class][class][class*='backdrop-b1-light'] ul.check.list li:after,
ul.check.list li:after {
  content: "";
  position: absolute;
  top: 15px;
  left: -29px;
  width: 3px;
  height: 3px;
  background: transparent;
  -webkit-box-shadow: 0px 0px 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 0px 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);
}
.backdrop-b1-base ul.check.list li:after {
  -webkit-box-shadow: 0px 0px 0px #004788, 0px 2px 0px #004788, 0px 4px 0px #004788, 0px 6px 0px #004788, 0px 8px 0px #004788, 2px 8px 0px #004788, 4px 8px 0px #004788, 6px 8px 0px #004788, 8px 8px 0px #004788, 10px 8px 0px #004788;
  box-shadow: 0px 0px 0px #004788, 0px 2px 0px #004788, 0px 4px 0px #004788, 0px 6px 0px #004788, 0px 8px 0px #004788, 2px 8px 0px #004788, 4px 8px 0px #004788, 6px 8px 0px #004788, 8px 8px 0px #004788, 10px 8px 0px #004788;
}
[class][class][class*='backdrop-b1-light'] ul.m.check.list li:after,
ul.m.check.list li:after {
  content: "";
  position: absolute;
  top: 15px;
  left: -29px;
  width: 3px;
  height: 3px;
  background: transparent;
  -webkit-box-shadow: 0px 0px 0px #004788, 0px 2px 0px #004788, 0px 4px 0px #004788, 0px 6px 0px #004788, 0px 8px 0px #004788, 2px 8px 0px #004788, 4px 8px 0px #004788, 6px 8px 0px #004788, 8px 8px 0px #004788, 10px 8px 0px #004788;
  box-shadow: 0px 0px 0px #004788, 0px 2px 0px #004788, 0px 4px 0px #004788, 0px 6px 0px #004788, 0px 8px 0px #004788, 2px 8px 0px #004788, 4px 8px 0px #004788, 6px 8px 0px #004788, 8px 8px 0px #004788, 10px 8px 0px #004788;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.backdrop-b1-base ul.m.check.list li:after {
  -webkit-box-shadow: 0px 0px 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 0px 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;
}
ul.check.list[class*="size-"] li:before {
  vertical-align: -6px;
}
ul.check.list[class*="size-"] li:after {
  top: 16px;
}
[class][class] ul.check.list[class*="size-2"] li:after,
[class][class] ul.check.m.list[class*="size-2"] li:after {
  top: 14px;
}
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;
}
[data-cc="text"] ol li:before,
ol.list li:before {
  content: counter(section, decimal);
  width: 24px;
  height: 24px;
  border-radius: 12px;
  margin: 0px 8px 0px -32px;
  color: #FFFFFF;
  font-family: 'DroidRegular', Arial, sans-serif;
  text-align: center;
  line-height: 24px;
  font-size: 16px;
}
/* ol.list[class*="size-2"] li:before {
    font-family: 'DroidRegular', Arial, sans-serif;
    font-size: 20px;
} */
.backdrop-b1-base [data-cc="text"] ol.list li:before,
[data-cc="text"].backdrop-b1-base ol.list li:before,
.backdrop-b1-base ol.list li:before {
  color: #004788;
}
[data-cc="text"] ol li:after,
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;
}
[data-cc="list"] ul.text.list:not([class*="size-"]) {
  font-family: DroidRegular, Arial, sans-serif;
  font-size: 20px;
  line-height: 28px;
}
[data-cc="list"] ul.text.list:not([class*="size-"]) li {
  padding: 5px 0px;
}
[data-cc="list"][data-alignment="center"] {
  display: flex;
  flex-direction: column;
  text-align: left;
}
[data-cc="list"][data-alignment="center"] ul,
[data-cc="list"][data-alignment="center"] ol {
  align-self: center;
}
[data-cc="list"][data-alignment="right"] {
  display: flex;
  flex-direction: column;
  text-align: left;
}
[data-cc="list"][data-alignment="right"] ul,
[data-cc="list"][data-alignment="right"] ol {
  align-self: end;
}
[data-cc="stepper"] ol {
  list-style: none;
  padding-left: 0px;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
}
[data-cc="stepper"] ol li {
  display: -webkit-flex;
  -webkit-align-items: center;
  display: flex;
  align-items: center;
  position: relative;
}
[data-cc="stepper"] ol li > div {
  display: -webkit-flex;
  -webkit-align-items: center;
  display: flex;
  align-items: center;
}
[data-cc="stepper"] ol li > div div[data-indicator] {
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
[data-cc="stepper"] ol li > div span[data-prefix] {
  padding-right: 6px;
  -webkit-align-self: flext-start;
  align-self: flex-start;
}
[data-cc="stepper"] ol li > div span[data-suffix] {
  padding-left: 6px;
  -webkit-align-self: flext-start;
  align-self: flex-start;
}
[data-cc="stepper"] ol[data-list-orientation="vertical"] {
  -webkit-flex-flow: column;
  flex-flow: column;
}
[data-cc="stepper"] ol[data-list-style="icon"] li div[data-indicator]::before {
  display: none !important;
}
[data-cc="stepper"] ol[data-list-style="numbered"] {
  counter-reset: section;
}
[data-cc="stepper"] ol[data-list-style="numbered"] li div[data-indicator]::before {
  content: counter(section) ". ";
  counter-increment: section;
  color: #333333;
}
[data-cc="stepper"] ol[data-list-style="numbered"] li.active div[data-indicator]::before {
  color: #FFFFFF;
}
[data-cc="stepper"] ol[data-list-style="numbered"] li.active ~ li div[data-indicator]::before {
  color: #525252;
}
[data-cc="stepper"][data-layout="simple"] ol[data-list-orientation="vertical"] li:not(:last-child) {
  padding-bottom: 4px;
}
[data-cc="stepper"][data-layout="simple"] ol li:not(:last-child) {
  margin-right: 8px;
}
[data-cc="stepper"][data-layout="simple"] ol li div[data-indicator]::before {
  margin-right: 4px;
}
[data-cc="stepper"][data-layout="simple"] ol li div[data-indicator] .icon {
  margin-right: 6px;
}
[data-cc="stepper"][data-layout="simple"] ol[data-list-style="numbered"] li.active div[data-indicator]::before {
  color: #525252;
}
[data-cc="stepper"][data-layout="dotted"] ol li div[data-indicator] {
  position: absolute;
  top: 0px;
  background-color: #F0F4F8;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
[data-cc="stepper"][data-layout="dotted"] ol li div[data-indicator]::before {
  margin-right: 0px;
}
[data-cc="stepper"][data-layout="dotted"] ol li.active div[data-indicator] {
  background-color: #004788;
}
[data-cc="stepper"][data-layout="dotted"] ol li.active div[data-indicator] span.icon {
  background-position-x: 25%;
}
[data-cc="stepper"][data-layout="dotted"] ol li.active::before {
  color: #FFFFFF;
  margin-right: 0px;
}
[data-cc="stepper"][data-layout="dotted"] ol[data-list-style="numbered"] li div[data-indicator]::before {
  content: counter(section);
}
[data-cc="stepper"][data-layout="dotted"] ol[data-list-orientation="vertical"] li:not(last-child) {
  margin-right: 10px;
}
[data-cc="stepper"][data-layout="dotted"] ol[data-list-orientation="vertical"] li {
  padding: 10px 0px 24px 52px;
}
[data-cc="stepper"][data-layout="dotted"] ol[data-list-orientation="vertical"] div[data-indicator] {
  left: 0px;
}
[data-cc="stepper"][data-layout="dotted"] ol[data-list-orientation="horizontal"] li {
  padding: 50px 10px 10px 10px;
  text-align: center;
  -webkit-flex: 1 1 auto;
  -webkit-justify-content: center;
  -webkit-align-items: flex-start;
  flex: 1 1 auto;
  justify-content: center;
  align-items: flex-start;
}
[data-cc="stepper"][data-layout="dotted"] ol[data-list-orientation="horizontal"] div[data-indicator] {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
[data-cc="stepper"][data-layout="arrows"] li {
  -webkit-flex: 1 1 auto;
  flex: 1;
  z-index: 1;
  min-height: 40px;
}
[data-cc="stepper"][data-layout="arrows"] li a {
  text-decoration: none;
}
[data-cc="stepper"][data-layout="arrows"] li a:hover {
  text-decoration: none;
}
[data-cc="stepper"][data-layout="arrows"] li a::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
[data-cc="stepper"][data-layout="arrows"] li a span {
  color: #333333;
}
[data-cc="stepper"][data-layout="arrows"] li.active span {
  color: #FFFFFF;
}
[data-cc="stepper"][data-layout="arrows"] li.active ~ li span {
  color: #525252;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"] {
  display: -webkit-inline-flex;
  display: inline-flex;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"] li {
  line-height: 40px;
  background: #F0F4F8;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"] li:not(last-child) {
  margin-bottom: 2px;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"] li.active div[data-indicator] {
  color: #FFFFFF;
  background: #004788;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li {
  padding: 0px 10px 0px 0px;
  /** hover color - default */
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li div[data-indicator],
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li div[data-indicator] {
  -webkit-align-self: flex-start;
  align-self: flex-start;
  margin-right: 22px;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li::after,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li::after {
  left: 40px;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li div[data-indicator],
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li div[data-indicator] {
  width: 40px;
  height: 40px;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li div[data-indicator]:before,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li div[data-indicator]:before {
  color: #333333;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li:hover,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li:hover {
  background-color: #00396D;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li:hover div[data-indicator]:before,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li:hover div[data-indicator]:before {
  color: #FFFFFF;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li:hover div[data-indicator] span.icon,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li:hover div[data-indicator] span.icon {
  background-position-x: 25%;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li:hover span,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li:hover span {
  color: #FFFFFF;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li.active,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li.active {
  /** hover color - overwrite */
  /** hover color - overwrite */
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li.active::after,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li.active::after {
  content: "";
  background: transparent;
  z-index: -1;
  top: 0px;
  height: 0px;
  position: absolute;
  width: 0px;
  border-top: 20px solid transparent;
  border-left: 7px solid #004788;
  border-bottom: 20px solid transparent;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li.active:hover,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li.active:hover {
  background-color: #F0F4F8;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li.active span,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li.active span {
  color: #333333;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li.active div[data-indicator]:before,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li.active div[data-indicator]:before {
  color: #FFFFFF;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li.active div[data-indicator] span.icon,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li.active div[data-indicator] span.icon {
  background-position-x: 25%;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li.active ~ li,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li.active ~ li {
  background-color: #F0F4F8;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li.active ~ li div[data-indicator]:before,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li.active ~ li div[data-indicator]:before {
  color: #525252;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li.active ~ li div[data-indicator] span.icon,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li.active ~ li div[data-indicator] span.icon {
  background-position-x: 0%;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="numbered"] li.active ~ li span,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"][data-list-style="icon"] li.active ~ li span {
  color: #525252;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"]:not([data-list-style="numbered"]):not([data-list-style="icon"]) li {
  padding: 0px 10px 0px 0px;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"]:not([data-list-style="numbered"]):not([data-list-style="icon"]) li div[data-indicator] {
  -webkit-align-self: flex-start;
  align-self: flex-start;
  margin-right: 12px;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"]:not([data-list-style="numbered"]):not([data-list-style="icon"]) li::after {
  left: 19px;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="vertical"]:not([data-list-style="numbered"]):not([data-list-style="icon"]) li div[data-indicator] {
  width: 4px;
  height: 40px;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li {
  line-height: 40px;
  -webkit-justify-content: center;
  justify-content: center;
  /** hover color - default */
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li div[data-indicator] {
  margin-right: 4px;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li:first-child [data-prefix] {
  padding-left: 0px;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li::before,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 3px;
  height: 20px;
  background: #F0F4F8;
  -webkit-transform: skewX(22deg);
  -ms-transform: skewX(22deg);
  transform: skewX(22deg);
  z-index: -1;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li::after {
  top: 20px;
  -webkit-transform: skewX(-22deg);
  -ms-transform: skewX(-22deg);
  transform: skewX(-22deg);
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li:first-child::before {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  height: 40px;
  left: 0px;
  right: 7px;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li:first-child::after {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  height: 0;
  top: 0;
  left: auto;
  right: 0px;
  background: transparent;
  border-color: transparent transparent transparent #F0F4F8;
  border-width: 20px 0px 20px 8px;
  border-style: solid;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li:last-child {
  background-color: #F0F4F8;
  -webkit-transform: translateX(4px);
  -ms-transform: translateX(4px);
  transform: translateX(4px);
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li:last-child::before {
  -webkit-transform: skewX(22deg);
  -ms-transform: skewX(22deg);
  transform: skewX(22deg);
  height: 20px;
  top: 0;
  left: -4px;
  border-top-right-radius: 0px;
  margin-right: 1px;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li:last-child::after {
  -webkit-transform: skewX(-22deg);
  -ms-transform: skewX(-22deg);
  transform: skewX(-22deg);
  height: 20px;
  top: 20px;
  left: -4px;
  border-bottom-right-radius: 0px;
  margin-right: 1px;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li:hover:before,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li:hover:after {
  background-color: #00396D;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li:hover div[data-indicator]:before {
  color: #FFFFFF;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li:hover div[data-indicator] span.icon {
  background-position-x: 25%;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li:hover span {
  color: #FFFFFF;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li:hover:first-child:after {
  border-left-color: #00396D;
  background-color: transparent;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active {
  color: #FFFFFF;
  /** hover color - revert for list items after activated one */
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active a {
  color: #FFFFFF;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active::before,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active::after {
  background: #004788;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active:first-child::after {
  border-color: transparent transparent transparent #004788;
  background: transparent;
  right: -1px;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active:last-child {
  background-color: #004788;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active div[data-indicator]:before {
  color: #FFFFFF;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active div[data-indicator] span.icon {
  background-position-x: 25%;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active ~ li:hover:before,
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active ~ li:hover:after {
  background-color: #F0F4F8;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active ~ li:hover div[data-indicator]:before {
  color: #525252;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active ~ li:hover div[data-indicator] span.icon {
  background-position-x: 0%;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active ~ li:hover span {
  color: #525252;
}
[data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active ~ li:hover:last-child:after {
  background-color: #F0F4F8;
}
@media all and (max-width: 979.9px) {
  [data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li:not(.active) div:not([data-indicator]) > span,
  [data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li:not(.active) div:not([data-indicator]) > a span {
    display: none;
  }
  [data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active div:not([data-indicator]) > span[data-prefix],
  [data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li.active div:not([data-indicator]) > span[data-suffix] {
    display: none;
  }
}
@media screen and (max-width: 659.9px) {
  [data-cc="stepper"][data-layout="arrows"] ol[data-list-orientation="horizontal"] li {
    -webkit-flex: auto;
    flex: auto;
  }
}
[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;
}
/* alternative attribute value with same behavior but with cursor pointer: #empty-withpointer */
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;
}
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;
}
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;
}
/* cat teaser 3.2.2 */
.teaser {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: stretch;
  align-items: stretch;
  position: relative;
}
.horizontal.teaser {
  -webkit-flex-direction: row;
  flex-direction: row;
}
.horizontal.horizontal-reverse.teaser {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.container:not(.hero):not(.carousel) .group-content > .l-12.horizontal.horizontal-reverse.teaser {
  margin-top: 48px;
  margin-bottom: 48px;
}
/*
.horizontal.teaser.va-center {
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: flex-start;
            justify-content: flex-start;
}
*/
/* Test: Positionierung des Buttons in einer Hoehe bei unterschiedlichen Content-Hoehen */
.teaser > .content.posBottom-lastChild[class][class],
.teaser > .content.posBottom-order4[class][class] {
  flex-grow: 1;
}
.teaser > .posBottom-lastchild[class] > *:last-child,
.teaser > .posBottom-order4[class] > *.order-4 {
  margin-top: auto;
}
@media screen and (min-width: 980px) {
  .teaser > .l-posBottom-lastchild[class] > *:last-child,
  .teaser > .l-posBottom-order4[class] > .l-order-4,
  .teaser > .l-posBottom-order4[class] > .order-4 {
    margin-top: auto;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .teaser > .m-posBottom-lastchild[class] > *:last-child,
  .teaser > .m-posBottom-order4[class] > .m-order-4,
  .teaser > .m-posBottom-order4[class] > .order-4 {
    margin-top: auto;
  }
}
@media screen and (max-width: 659.9px) {
  .teaser > .s-posBottom-lastchild[class] > *:last-child,
  .teaser > .s-posBottom-order4[class] > *.s-order-4,
  .teaser > .s-posBottom-order4[class] > *.order-4 {
    margin-top: auto;
  }
}
/* nur fuer dev */
/* Test, ob backdrop fuer den Teaser generell mit 10px padding und top: -10px ausgestattet werden soll */
/* wegen Hero */
.teaser:not(.hero)[class*="backdrop"]::before {
  border-radius: 4px;
  padding-top: 10px;
  padding-bottom: 10px;
  top: -10px;
}
.js .teaser.linked {
  cursor: pointer;
}
/* At the momment there is no hover effect for inverted fully linked teasers defined */
.js .backdrop-b1-base .teaser.linked[class*="backdrop-hover"]:hover:before,
.js .inverted .teaser.linked[class*="backdrop-hover"]:hover:before,
.js .teaser.inverted.linked[class*="backdrop-hover"]:hover:before {
  background-color: transparent;
}
.backdrop-b1-base .teaser p > a:not(.button),
.backdrop-b1-base.teaser p > a:not(.button) {
  color: #FFFFFF;
}
/* Soll durch Alternative mit backdrop-hover abgeloest werden => bitte umstellen!!! */
/* Muss wegen den verlinkten Circled-Teasern (kein BG!) auskommentiert bleiben */
/*.js .linked.teaser:not([class*="backdrop-hover"]):not(.hero) {
    &:hover {
        background-color: ~"#D1DEEA";
        border-radius: ~"4px";
    }
    padding-top: 10px;
    padding-bottom: 10px;
}
.js .inverted .teaser.linked:not([class*="backdrop-hover"]):not(.hero):hover,
.js .teaser.inverted.linked:not([class*="backdrop-hover"]):not(.hero):hover {
    background-color: transparent;
}
*/
/*.teaser[class*=" h-"],
.teaser[class^="h-"] {
    overflow: hidden;
}*/
/*
*:not([class*="vspace-"]) > .teaser[class] {
    margin-bottom: 40px;
}
*:not([class*="vspace-"]) > .tiled.teaser {
    margin-bottom: 20px;
}
*/
/* Abstaede m?ssen vspace ueberschreiben */
.teaser[class] {
  margin-bottom: 40px;
}
.tiled.teaser {
  margin-bottom: 20px;
}
/* im carousel kein abstand nach unten */
.carousel .teaser {
  margin-bottom: 0;
}
.h-1[class][class][class] {
  height: 60px;
}
.h-2[class][class][class] {
  height: 140px;
}
.h-3[class][class][class] {
  height: 220px;
}
.h-4[class][class][class] {
  height: 300px;
}
.h-5[class][class][class] {
  height: 380px;
}
.h-6[class][class][class] {
  height: 460px;
}
.h-7[class][class][class] {
  height: 540px;
}
.h-8[class][class][class] {
  height: 620px;
}
.h-9[class][class][class] {
  height: 700px;
}
.h-10[class][class][class] {
  height: 780px;
}
.h-11[class][class][class] {
  height: 860px;
}
.h-12[class][class][class] {
  height: 940px;
}
.h-full[class][class][class] {
  height: 100vh;
}
.h-half[class][class][class] {
  height: 50vh;
}
.h-auto[class][class][class] {
  height: auto;
  display: block;
}
.h-100[class][class][class] {
  height: 100%;
  display: block;
}
.order-1 {
  -webkit-order: 1;
  order: 1;
}
.order-2 {
  -webkit-order: 2;
  order: 2;
}
.order-3 {
  -webkit-order: 3;
  order: 3;
}
.order-4 {
  -webkit-order: 4;
  order: 4;
}
/*  */
@media screen and (min-width: 980px) {
  .l-horizontal.teaser {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .horizontal.l-horizontal-reverse.teaser,
  .l-horizontal.l-horizontal-reverse.teaser {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .container:not(.hero):not(.carousel) .group-content > .l-12.horizontal.l-horizontal-reverse.teaser,
  .container:not(.hero):not(.carousel) .group-content > .l-12.l-horizontal.l-horizontal-reverse.teaser {
    margin-top: 48px;
    margin-bottom: 48px;
  }
  /*
    .l-horizontal.teaser.va-center {
        -webkit-align-items: center;
                align-items: center;
    -webkit-justify-content: flex-start;
            justify-content: flex-start;
    }*/
  .l-h-1[class][class][class] {
    height: 60px;
  }
  .l-h-2[class][class][class] {
    height: 140px;
  }
  .l-h-3[class][class][class] {
    height: 220px;
  }
  .l-h-4[class][class][class] {
    height: 300px;
  }
  .l-h-5[class][class][class] {
    height: 380px;
  }
  .l-h-6[class][class][class] {
    height: 460px;
  }
  .l-h-7[class][class][class] {
    height: 540px;
  }
  .l-h-8[class][class][class] {
    height: 620px;
  }
  .l-h-9[class][class][class] {
    height: 700px;
  }
  .l-h-10[class][class][class] {
    height: 780px;
  }
  .l-h-11[class][class][class] {
    height: 860px;
  }
  .l-h-12[class][class][class] {
    height: 940px;
  }
  .l-h-full[class][class][class] {
    height: 100vh;
  }
  .l-h-half[class][class][class] {
    height: 50vh;
  }
  .l-h-auto[class][class][class] {
    height: auto;
    display: block;
  }
  .l-order-1 {
    -webkit-order: 1;
    order: 1;
  }
  .l-order-2 {
    -webkit-order: 2;
    order: 2;
  }
  .l-order-3 {
    -webkit-order: 3;
    order: 3;
  }
  .l-order-4 {
    -webkit-order: 4;
    order: 4;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .m-horizontal.teaser {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .horizontal.m-horizontal-reverse.teaser,
  .m-horizontal.m-horizontal-reverse.teaser {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .container:not(.hero):not(.carousel) .group-content > .m-8.horizontal.m-horizontal-reverse.teaser,
  .container:not(.hero):not(.carousel) .group-content > .m-8.m-horizontal.m-horizontal-reverse.teaser {
    margin-top: 48px;
    margin-bottom: 48px;
  }
  /*
    .m-horizontal.teaser.va-center {
        -webkit-align-items: center;
                align-items: center;
    -webkit-justify-content: flex-start;
            justify-content: flex-start;
    }*/
  .m-h-1[class][class][class] {
    height: 60px;
  }
  .m-h-2[class][class][class] {
    height: 140px;
  }
  .m-h-3[class][class][class] {
    height: 220px;
  }
  .m-h-4[class][class][class] {
    height: 300px;
  }
  .m-h-5[class][class][class] {
    height: 380px;
  }
  .m-h-6[class][class][class] {
    height: 460px;
  }
  .m-h-7[class][class][class] {
    height: 540px;
  }
  .m-h-8[class][class][class] {
    height: 620px;
  }
  .m-h-9[class][class][class] {
    height: 700px;
  }
  .m-h-10[class][class][class] {
    height: 780px;
  }
  .m-h-11[class][class][class] {
    height: 860px;
  }
  .m-h-12[class][class][class] {
    height: 940px;
  }
  .m-h-full[class][class][class] {
    height: 100vh;
  }
  .m-h-half[class][class][class] {
    height: 50vh;
  }
  .m-h-auto[class][class][class] {
    height: auto;
    display: block;
  }
  .m-order-1 {
    -webkit-order: 1;
    order: 1;
  }
  .m-order-2 {
    -webkit-order: 2;
    order: 2;
  }
  .m-order-3 {
    -webkit-order: 3;
    order: 3;
  }
  .m-order-4 {
    -webkit-order: 4;
    order: 4;
  }
}
@media screen and (max-width: 659.9px) {
  .s-horizontal.teaser {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .horizontal.s-horizontal-reverse.teaser,
  .s-horizontal.s-horizontal-reverse.teaser {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  /*
    .s-horizontal.teaser.va-center {
        -webkit-align-items: center;
                align-items: center;
    -webkit-justify-content: flex-start;
            justify-content: flex-start;
    }*/
  .s-h-1[class][class][class] {
    height: 60px;
  }
  .s-h-2[class][class][class] {
    height: 140px;
  }
  .s-h-3[class][class][class] {
    height: 220px;
  }
  .s-h-4[class][class][class] {
    height: 300px;
  }
  .s-h-5[class][class][class] {
    height: 380px;
  }
  .s-h-6[class][class][class] {
    height: 460px;
  }
  .s-h-7[class][class][class] {
    height: 540px;
  }
  .s-h-8[class][class][class] {
    height: 620px;
  }
  .s-h-9[class][class][class] {
    height: 700px;
  }
  .s-h-10[class][class][class] {
    height: 780px;
  }
  .s-h-11[class][class][class] {
    height: 860px;
  }
  .s-h-12[class][class][class] {
    height: 940px;
  }
  .s-h-full[class][class][class] {
    height: 100vh;
  }
  .s-h-half[class][class][class] {
    height: 50vh;
  }
  .s-h-auto[class][class][class] {
    height: auto;
    display: block;
  }
  .s-order-1 {
    -webkit-order: 1;
    order: 1;
  }
  .s-order-2 {
    -webkit-order: 2;
    order: 2;
  }
  .s-order-3 {
    -webkit-order: 3;
    order: 3;
  }
  .s-order-4 {
    -webkit-order: 4;
    order: 4;
  }
}
.background {
  display: block;
  overflow: hidden;
}
/* Wozu ist das gut? (bei svg muss es weg wegen der Positionierung) */
.background img,
x.background svg {
  width: auto;
}
/* Wozu ist das gut? */
.background:not([class*=" h-"]):not([class^="h-"]) {
  bottom: 0;
}
/* if you need to forcefully disable automatic width/height scaling, use "h-size" to fulfil the :not requirement  => no positioning possible img fits on the right side */
.background img:not([class*=" h-"]):not([class^="h-"]) {
  /*min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;*/
}
.background svg:not([class*=" h-"]):not([class^="h-"]) {
  width: 100%;
  height: 100%;
}
/* Wozu ist das gut? */
/*.background img[class*=" h-"],
.background img[class^="h-"],
.background svg[class*=" h-"],
.background svg[class^="h-"] {
    width: auto;
}*/
/*  */
@media screen and (min-width: 980px) {
  .background:not(.l-visual) {
    position: absolute;
    max-width: none;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
  }
  /*
    .background img.l-h-auto {
        xwidth: auto;
        xheight: auto;
    }*/
  /* Wird benoetigt, damit das IMG im BG sich in der Breite skaliert und nach oben/unten entsprechend uebersteht */
  /* Aber nur fuer BGs, die als Hintergrund eingebunden sind und keine Hoehe haben im l-View */
  /* bei no-flex im Browser reicht das nicht aus, wenn man ueber l-12 vergr??rt: */
  /* body:not(.no-flex) .background:not(.l-visual) img.xl-h-auto
    /* Deshlab 'body:not(.no-flex)' entfernt: */
  .background:not(.l-visual) > img:not([class*=" h-"]):not([class^="h-"]) {
    min-width: 100%;
  }
  .background.l-visual {
    position: relative;
  }
  .scaled.background.l-visual img,
  .background.l-visual img.scaled,
  .scaled.background.l-visual svg,
  .background.l-visual svg.scaled {
    width: 100%;
    height: auto;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .background:not(.m-visual) {
    position: absolute;
    max-width: none;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
  }
  .background.m-visual {
    position: relative;
  }
  .scaled.background.m-visual img,
  .background.m-visual img.scaled,
  .scaled.background.m-visual svg,
  .background.m-visual svg.scaled {
    width: 100%;
    height: auto;
  }
  .background img.fog,
  .background svg.fog {
    width: 980px;
  }
  /*
    .background img.m-h-auto {
        xheight: auto;
        xwidth: auto;
    }*/
  /* bei no-flex im Browser reicht das nicht aus, wenn man ueber l-12 vergr??rt: */
  /* body:not(.no-flex) .background:not(.m-visual) img.xl-h-auto
    /* Deshlab ':not(.no-flex)' entfernt: */
  /*
    body .background:not(.m-visual) img.m-h-auto {
        min-width: 100%;
        xmin-height: 100%;
    }*/
}
@media screen and (max-width: 659.9px) {
  .background:not(.s-visual) {
    position: absolute;
    max-width: none;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
  }
  .background:not(.s-visual).s-h-100[class] {
    height: 100%;
  }
  /* Versuch beim Produkt-Hero im no-flex-Fall das BG ganz aufzuspannen,
    damit der BG auch bis zum Ende vom Visual/Button kommt */
  body.no-flex .hero-product > .background:not(.s-visual) {
    xheight: 100%;
  }
  .background.s-visual {
    position: relative;
  }
  .scaled.background.s-visual img,
  .background.s-visual img.scaled,
  .scaled.background.s-visual svg,
  .background.s-visual svg.scaled {
    width: 100%;
    height: auto;
  }
  /*
    .background img.s-h-auto {
        xwidth: auto;
        xheight: auto;
    }*/
  /* bei no-flex im Browser reicht das nicht aus, wenn man ueber l-12 vergr??rt: */
  /* body:not(.no-flex) .background:not(.s-visual) img.xl-h-auto
    /* Deshlab ':not(.no-flex)' entfernt: */
  /*body .background:not(.s-visual) img.s-h-auto {
        min-width: 100%;
        xmin-height: 100%;
    }*/
}
.xa-0.ya-0 img,
.xa-0.ya-0 svg {
  position: absolute;
  top: 0%;
  left: 0%;
  -webkit-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
}
.xa-0.ya-12 img,
.xa-0.ya-12 svg {
  position: absolute;
  top: 12%;
  left: 0%;
  -webkit-transform: translate(0%, -12%);
  -ms-transform: translate(0%, -12%);
  transform: translate(0%, -12%);
}
.xa-0.ya-25 img,
.xa-0.ya-25 svg {
  position: absolute;
  top: 25%;
  left: 0%;
  -webkit-transform: translate(0%, -25%);
  -ms-transform: translate(0%, -25%);
  transform: translate(0%, -25%);
}
.xa-0.ya-37 img,
.xa-0.ya-37 svg {
  position: absolute;
  top: 37%;
  left: 0%;
  -webkit-transform: translate(0%, -37%);
  -ms-transform: translate(0%, -37%);
  transform: translate(0%, -37%);
}
.xa-0.ya-50 img,
.xa-0.ya-50 svg {
  position: absolute;
  top: 50%;
  left: 0%;
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.xa-0.ya-63 img,
.xa-0.ya-63 svg {
  position: absolute;
  top: 63%;
  left: 0%;
  -webkit-transform: translate(0%, -63%);
  -ms-transform: translate(0%, -63%);
  transform: translate(0%, -63%);
}
.xa-0.ya-75 img,
.xa-0.ya-75 svg {
  position: absolute;
  top: 75%;
  left: 0%;
  -webkit-transform: translate(0%, -75%);
  -ms-transform: translate(0%, -75%);
  transform: translate(0%, -75%);
}
.xa-0.ya-88 img,
.xa-0.ya-88 svg {
  position: absolute;
  top: 88%;
  left: 0%;
  -webkit-transform: translate(0%, -88%);
  -ms-transform: translate(0%, -88%);
  transform: translate(0%, -88%);
}
.xa-0.ya-100 img,
.xa-0.ya-100 svg {
  position: absolute;
  top: 100%;
  left: 0%;
  -webkit-transform: translate(0%, -100%);
  -ms-transform: translate(0%, -100%);
  transform: translate(0%, -100%);
}
.xa-12.ya-0 img,
.xa-12.ya-0 svg {
  position: absolute;
  top: 0%;
  left: 12%;
  -webkit-transform: translate(-12%, 0%);
  -ms-transform: translate(-12%, 0%);
  transform: translate(-12%, 0%);
}
.xa-12.ya-12 img,
.xa-12.ya-12 svg {
  position: absolute;
  top: 12%;
  left: 12%;
  -webkit-transform: translate(-12%, -12%);
  -ms-transform: translate(-12%, -12%);
  transform: translate(-12%, -12%);
}
.xa-12.ya-25 img,
.xa-12.ya-25 svg {
  position: absolute;
  top: 25%;
  left: 12%;
  -webkit-transform: translate(-12%, -25%);
  -ms-transform: translate(-12%, -25%);
  transform: translate(-12%, -25%);
}
.xa-12.ya-37 img,
.xa-12.ya-37 svg {
  position: absolute;
  top: 37%;
  left: 12%;
  -webkit-transform: translate(-12%, -37%);
  -ms-transform: translate(-12%, -37%);
  transform: translate(-12%, -37%);
}
.xa-12.ya-50 img,
.xa-12.ya-50 svg {
  position: absolute;
  top: 50%;
  left: 12%;
  -webkit-transform: translate(-12%, -50%);
  -ms-transform: translate(-12%, -50%);
  transform: translate(-12%, -50%);
}
.xa-12.ya-63 img,
.xa-12.ya-63 svg {
  position: absolute;
  top: 63%;
  left: 12%;
  -webkit-transform: translate(-12%, -63%);
  -ms-transform: translate(-12%, -63%);
  transform: translate(-12%, -63%);
}
.xa-12.ya-75 img,
.xa-12.ya-75 svg {
  position: absolute;
  top: 75%;
  left: 12%;
  -webkit-transform: translate(-12%, -75%);
  -ms-transform: translate(-12%, -75%);
  transform: translate(-12%, -75%);
}
.xa-12.ya-88 img,
.xa-12.ya-88 svg {
  position: absolute;
  top: 88%;
  left: 12%;
  -webkit-transform: translate(-12%, -88%);
  -ms-transform: translate(-12%, -88%);
  transform: translate(-12%, -88%);
}
.xa-12.ya-100 img,
.xa-12.ya-100 svg {
  position: absolute;
  top: 100%;
  left: 12%;
  -webkit-transform: translate(-12%, -100%);
  -ms-transform: translate(-12%, -100%);
  transform: translate(-12%, -100%);
}
.xa-25.ya-0 img,
.xa-25.ya-0 svg {
  position: absolute;
  top: 0%;
  left: 25%;
  -webkit-transform: translate(-25%, 0%);
  -ms-transform: translate(-25%, 0%);
  transform: translate(-25%, 0%);
}
.xa-25.ya-12 img,
.xa-25.ya-12 svg {
  position: absolute;
  top: 12%;
  left: 25%;
  -webkit-transform: translate(-25%, -12%);
  -ms-transform: translate(-25%, -12%);
  transform: translate(-25%, -12%);
}
.xa-25.ya-25 img,
.xa-25.ya-25 svg {
  position: absolute;
  top: 25%;
  left: 25%;
  -webkit-transform: translate(-25%, -25%);
  -ms-transform: translate(-25%, -25%);
  transform: translate(-25%, -25%);
}
.xa-25.ya-37 img,
.xa-25.ya-37 svg {
  position: absolute;
  top: 37%;
  left: 25%;
  -webkit-transform: translate(-25%, -37%);
  -ms-transform: translate(-25%, -37%);
  transform: translate(-25%, -37%);
}
.xa-25.ya-50 img,
.xa-25.ya-50 svg {
  position: absolute;
  top: 50%;
  left: 25%;
  -webkit-transform: translate(-25%, -50%);
  -ms-transform: translate(-25%, -50%);
  transform: translate(-25%, -50%);
}
.xa-25.ya-63 img,
.xa-25.ya-63 svg {
  position: absolute;
  top: 63%;
  left: 25%;
  -webkit-transform: translate(-25%, -63%);
  -ms-transform: translate(-25%, -63%);
  transform: translate(-25%, -63%);
}
.xa-25.ya-75 img,
.xa-25.ya-75 svg {
  position: absolute;
  top: 75%;
  left: 25%;
  -webkit-transform: translate(-25%, -75%);
  -ms-transform: translate(-25%, -75%);
  transform: translate(-25%, -75%);
}
.xa-25.ya-88 img,
.xa-25.ya-88 svg {
  position: absolute;
  top: 88%;
  left: 25%;
  -webkit-transform: translate(-25%, -88%);
  -ms-transform: translate(-25%, -88%);
  transform: translate(-25%, -88%);
}
.xa-25.ya-100 img,
.xa-25.ya-100 svg {
  position: absolute;
  top: 100%;
  left: 25%;
  -webkit-transform: translate(-25%, -100%);
  -ms-transform: translate(-25%, -100%);
  transform: translate(-25%, -100%);
}
.xa-37.ya-0 img,
.xa-37.ya-0 svg {
  position: absolute;
  top: 0%;
  left: 37%;
  -webkit-transform: translate(-37%, 0%);
  -ms-transform: translate(-37%, 0%);
  transform: translate(-37%, 0%);
}
.xa-37.ya-12 img,
.xa-37.ya-12 svg {
  position: absolute;
  top: 12%;
  left: 37%;
  -webkit-transform: translate(-37%, -12%);
  -ms-transform: translate(-37%, -12%);
  transform: translate(-37%, -12%);
}
.xa-37.ya-25 img,
.xa-37.ya-25 svg {
  position: absolute;
  top: 25%;
  left: 37%;
  -webkit-transform: translate(-37%, -25%);
  -ms-transform: translate(-37%, -25%);
  transform: translate(-37%, -25%);
}
.xa-37.ya-37 img,
.xa-37.ya-37 svg {
  position: absolute;
  top: 37%;
  left: 37%;
  -webkit-transform: translate(-37%, -37%);
  -ms-transform: translate(-37%, -37%);
  transform: translate(-37%, -37%);
}
.xa-37.ya-50 img,
.xa-37.ya-50 svg {
  position: absolute;
  top: 50%;
  left: 37%;
  -webkit-transform: translate(-37%, -50%);
  -ms-transform: translate(-37%, -50%);
  transform: translate(-37%, -50%);
}
.xa-37.ya-63 img,
.xa-37.ya-63 svg {
  position: absolute;
  top: 63%;
  left: 37%;
  -webkit-transform: translate(-37%, -63%);
  -ms-transform: translate(-37%, -63%);
  transform: translate(-37%, -63%);
}
.xa-37.ya-75 img,
.xa-37.ya-75 svg {
  position: absolute;
  top: 75%;
  left: 37%;
  -webkit-transform: translate(-37%, -75%);
  -ms-transform: translate(-37%, -75%);
  transform: translate(-37%, -75%);
}
.xa-37.ya-88 img,
.xa-37.ya-88 svg {
  position: absolute;
  top: 88%;
  left: 37%;
  -webkit-transform: translate(-37%, -88%);
  -ms-transform: translate(-37%, -88%);
  transform: translate(-37%, -88%);
}
.xa-37.ya-100 img,
.xa-37.ya-100 svg {
  position: absolute;
  top: 100%;
  left: 37%;
  -webkit-transform: translate(-37%, -100%);
  -ms-transform: translate(-37%, -100%);
  transform: translate(-37%, -100%);
}
.xa-50.ya-0 img,
.xa-50.ya-0 svg {
  position: absolute;
  top: 0%;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
.xa-50.ya-12 img,
.xa-50.ya-12 svg {
  position: absolute;
  top: 12%;
  left: 50%;
  -webkit-transform: translate(-50%, -12%);
  -ms-transform: translate(-50%, -12%);
  transform: translate(-50%, -12%);
}
.xa-50.ya-25 img,
.xa-50.ya-25 svg {
  position: absolute;
  top: 25%;
  left: 50%;
  -webkit-transform: translate(-50%, -25%);
  -ms-transform: translate(-50%, -25%);
  transform: translate(-50%, -25%);
}
.xa-50.ya-37 img,
.xa-50.ya-37 svg {
  position: absolute;
  top: 37%;
  left: 50%;
  -webkit-transform: translate(-50%, -37%);
  -ms-transform: translate(-50%, -37%);
  transform: translate(-50%, -37%);
}
.xa-50.ya-50 img,
.xa-50.ya-50 svg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.xa-50.ya-63 img,
.xa-50.ya-63 svg {
  position: absolute;
  top: 63%;
  left: 50%;
  -webkit-transform: translate(-50%, -63%);
  -ms-transform: translate(-50%, -63%);
  transform: translate(-50%, -63%);
}
.xa-50.ya-75 img,
.xa-50.ya-75 svg {
  position: absolute;
  top: 75%;
  left: 50%;
  -webkit-transform: translate(-50%, -75%);
  -ms-transform: translate(-50%, -75%);
  transform: translate(-50%, -75%);
}
.xa-50.ya-88 img,
.xa-50.ya-88 svg {
  position: absolute;
  top: 88%;
  left: 50%;
  -webkit-transform: translate(-50%, -88%);
  -ms-transform: translate(-50%, -88%);
  transform: translate(-50%, -88%);
}
.xa-50.ya-100 img,
.xa-50.ya-100 svg {
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
  -ms-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
}
.xa-63.ya-0 img,
.xa-63.ya-0 svg {
  position: absolute;
  top: 0%;
  left: 63%;
  -webkit-transform: translate(-63%, 0%);
  -ms-transform: translate(-63%, 0%);
  transform: translate(-63%, 0%);
}
.xa-63.ya-12 img,
.xa-63.ya-12 svg {
  position: absolute;
  top: 12%;
  left: 63%;
  -webkit-transform: translate(-63%, -12%);
  -ms-transform: translate(-63%, -12%);
  transform: translate(-63%, -12%);
}
.xa-63.ya-25 img,
.xa-63.ya-25 svg {
  position: absolute;
  top: 25%;
  left: 63%;
  -webkit-transform: translate(-63%, -25%);
  -ms-transform: translate(-63%, -25%);
  transform: translate(-63%, -25%);
}
.xa-63.ya-37 img,
.xa-63.ya-37 svg {
  position: absolute;
  top: 37%;
  left: 63%;
  -webkit-transform: translate(-63%, -37%);
  -ms-transform: translate(-63%, -37%);
  transform: translate(-63%, -37%);
}
.xa-63.ya-50 img,
.xa-63.ya-50 svg {
  position: absolute;
  top: 50%;
  left: 63%;
  -webkit-transform: translate(-63%, -50%);
  -ms-transform: translate(-63%, -50%);
  transform: translate(-63%, -50%);
}
.xa-63.ya-63 img,
.xa-63.ya-63 svg {
  position: absolute;
  top: 63%;
  left: 63%;
  -webkit-transform: translate(-63%, -63%);
  -ms-transform: translate(-63%, -63%);
  transform: translate(-63%, -63%);
}
.xa-63.ya-75 img,
.xa-63.ya-75 svg {
  position: absolute;
  top: 75%;
  left: 63%;
  -webkit-transform: translate(-63%, -75%);
  -ms-transform: translate(-63%, -75%);
  transform: translate(-63%, -75%);
}
.xa-63.ya-88 img,
.xa-63.ya-88 svg {
  position: absolute;
  top: 88%;
  left: 63%;
  -webkit-transform: translate(-63%, -88%);
  -ms-transform: translate(-63%, -88%);
  transform: translate(-63%, -88%);
}
.xa-63.ya-100 img,
.xa-63.ya-100 svg {
  position: absolute;
  top: 100%;
  left: 63%;
  -webkit-transform: translate(-63%, -100%);
  -ms-transform: translate(-63%, -100%);
  transform: translate(-63%, -100%);
}
.xa-75.ya-0 img,
.xa-75.ya-0 svg {
  position: absolute;
  top: 0%;
  left: 75%;
  -webkit-transform: translate(-75%, 0%);
  -ms-transform: translate(-75%, 0%);
  transform: translate(-75%, 0%);
}
.xa-75.ya-12 img,
.xa-75.ya-12 svg {
  position: absolute;
  top: 12%;
  left: 75%;
  -webkit-transform: translate(-75%, -12%);
  -ms-transform: translate(-75%, -12%);
  transform: translate(-75%, -12%);
}
.xa-75.ya-25 img,
.xa-75.ya-25 svg {
  position: absolute;
  top: 25%;
  left: 75%;
  -webkit-transform: translate(-75%, -25%);
  -ms-transform: translate(-75%, -25%);
  transform: translate(-75%, -25%);
}
.xa-75.ya-37 img,
.xa-75.ya-37 svg {
  position: absolute;
  top: 37%;
  left: 75%;
  -webkit-transform: translate(-75%, -37%);
  -ms-transform: translate(-75%, -37%);
  transform: translate(-75%, -37%);
}
.xa-75.ya-50 img,
.xa-75.ya-50 svg {
  position: absolute;
  top: 50%;
  left: 75%;
  -webkit-transform: translate(-75%, -50%);
  -ms-transform: translate(-75%, -50%);
  transform: translate(-75%, -50%);
}
.xa-75.ya-63 img,
.xa-75.ya-63 svg {
  position: absolute;
  top: 63%;
  left: 75%;
  -webkit-transform: translate(-75%, -63%);
  -ms-transform: translate(-75%, -63%);
  transform: translate(-75%, -63%);
}
.xa-75.ya-75 img,
.xa-75.ya-75 svg {
  position: absolute;
  top: 75%;
  left: 75%;
  -webkit-transform: translate(-75%, -75%);
  -ms-transform: translate(-75%, -75%);
  transform: translate(-75%, -75%);
}
.xa-75.ya-88 img,
.xa-75.ya-88 svg {
  position: absolute;
  top: 88%;
  left: 75%;
  -webkit-transform: translate(-75%, -88%);
  -ms-transform: translate(-75%, -88%);
  transform: translate(-75%, -88%);
}
.xa-75.ya-100 img,
.xa-75.ya-100 svg {
  position: absolute;
  top: 100%;
  left: 75%;
  -webkit-transform: translate(-75%, -100%);
  -ms-transform: translate(-75%, -100%);
  transform: translate(-75%, -100%);
}
.xa-88.ya-0 img,
.xa-88.ya-0 svg {
  position: absolute;
  top: 0%;
  left: 88%;
  -webkit-transform: translate(-88%, 0%);
  -ms-transform: translate(-88%, 0%);
  transform: translate(-88%, 0%);
}
.xa-88.ya-12 img,
.xa-88.ya-12 svg {
  position: absolute;
  top: 12%;
  left: 88%;
  -webkit-transform: translate(-88%, -12%);
  -ms-transform: translate(-88%, -12%);
  transform: translate(-88%, -12%);
}
.xa-88.ya-25 img,
.xa-88.ya-25 svg {
  position: absolute;
  top: 25%;
  left: 88%;
  -webkit-transform: translate(-88%, -25%);
  -ms-transform: translate(-88%, -25%);
  transform: translate(-88%, -25%);
}
.xa-88.ya-37 img,
.xa-88.ya-37 svg {
  position: absolute;
  top: 37%;
  left: 88%;
  -webkit-transform: translate(-88%, -37%);
  -ms-transform: translate(-88%, -37%);
  transform: translate(-88%, -37%);
}
.xa-88.ya-50 img,
.xa-88.ya-50 svg {
  position: absolute;
  top: 50%;
  left: 88%;
  -webkit-transform: translate(-88%, -50%);
  -ms-transform: translate(-88%, -50%);
  transform: translate(-88%, -50%);
}
.xa-88.ya-63 img,
.xa-88.ya-63 svg {
  position: absolute;
  top: 63%;
  left: 88%;
  -webkit-transform: translate(-88%, -63%);
  -ms-transform: translate(-88%, -63%);
  transform: translate(-88%, -63%);
}
.xa-88.ya-75 img,
.xa-88.ya-75 svg {
  position: absolute;
  top: 75%;
  left: 88%;
  -webkit-transform: translate(-88%, -75%);
  -ms-transform: translate(-88%, -75%);
  transform: translate(-88%, -75%);
}
.xa-88.ya-88 img,
.xa-88.ya-88 svg {
  position: absolute;
  top: 88%;
  left: 88%;
  -webkit-transform: translate(-88%, -88%);
  -ms-transform: translate(-88%, -88%);
  transform: translate(-88%, -88%);
}
.xa-88.ya-100 img,
.xa-88.ya-100 svg {
  position: absolute;
  top: 100%;
  left: 88%;
  -webkit-transform: translate(-88%, -100%);
  -ms-transform: translate(-88%, -100%);
  transform: translate(-88%, -100%);
}
.xa-100.ya-0 img,
.xa-100.ya-0 svg {
  position: absolute;
  top: 0%;
  left: 100%;
  -webkit-transform: translate(-100%, 0%);
  -ms-transform: translate(-100%, 0%);
  transform: translate(-100%, 0%);
}
.xa-100.ya-12 img,
.xa-100.ya-12 svg {
  position: absolute;
  top: 12%;
  left: 100%;
  -webkit-transform: translate(-100%, -12%);
  -ms-transform: translate(-100%, -12%);
  transform: translate(-100%, -12%);
}
.xa-100.ya-25 img,
.xa-100.ya-25 svg {
  position: absolute;
  top: 25%;
  left: 100%;
  -webkit-transform: translate(-100%, -25%);
  -ms-transform: translate(-100%, -25%);
  transform: translate(-100%, -25%);
}
.xa-100.ya-37 img,
.xa-100.ya-37 svg {
  position: absolute;
  top: 37%;
  left: 100%;
  -webkit-transform: translate(-100%, -37%);
  -ms-transform: translate(-100%, -37%);
  transform: translate(-100%, -37%);
}
.xa-100.ya-50 img,
.xa-100.ya-50 svg {
  position: absolute;
  top: 50%;
  left: 100%;
  -webkit-transform: translate(-100%, -50%);
  -ms-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}
.xa-100.ya-63 img,
.xa-100.ya-63 svg {
  position: absolute;
  top: 63%;
  left: 100%;
  -webkit-transform: translate(-100%, -63%);
  -ms-transform: translate(-100%, -63%);
  transform: translate(-100%, -63%);
}
.xa-100.ya-75 img,
.xa-100.ya-75 svg {
  position: absolute;
  top: 75%;
  left: 100%;
  -webkit-transform: translate(-100%, -75%);
  -ms-transform: translate(-100%, -75%);
  transform: translate(-100%, -75%);
}
.xa-100.ya-88 img,
.xa-100.ya-88 svg {
  position: absolute;
  top: 88%;
  left: 100%;
  -webkit-transform: translate(-100%, -88%);
  -ms-transform: translate(-100%, -88%);
  transform: translate(-100%, -88%);
}
.xa-100.ya-100 img,
.xa-100.ya-100 svg {
  position: absolute;
  top: 100%;
  left: 100%;
  -webkit-transform: translate(-100%, -100%);
  -ms-transform: translate(-100%, -100%);
  transform: translate(-100%, -100%);
}
/*  */
@media screen and (min-width: 980px) {
  .l-xa-0.l-ya-0 img,
  .l-xa-0.l-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 0%;
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
  }
  .l-xa-0.l-ya-12 img,
  .l-xa-0.l-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 0%;
    -webkit-transform: translate(0%, -12%);
    -ms-transform: translate(0%, -12%);
    transform: translate(0%, -12%);
  }
  .l-xa-0.l-ya-25 img,
  .l-xa-0.l-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 0%;
    -webkit-transform: translate(0%, -25%);
    -ms-transform: translate(0%, -25%);
    transform: translate(0%, -25%);
  }
  .l-xa-0.l-ya-37 img,
  .l-xa-0.l-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 0%;
    -webkit-transform: translate(0%, -37%);
    -ms-transform: translate(0%, -37%);
    transform: translate(0%, -37%);
  }
  .l-xa-0.l-ya-50 img,
  .l-xa-0.l-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 0%;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
  }
  .l-xa-0.l-ya-63 img,
  .l-xa-0.l-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 0%;
    -webkit-transform: translate(0%, -63%);
    -ms-transform: translate(0%, -63%);
    transform: translate(0%, -63%);
  }
  .l-xa-0.l-ya-75 img,
  .l-xa-0.l-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 0%;
    -webkit-transform: translate(0%, -75%);
    -ms-transform: translate(0%, -75%);
    transform: translate(0%, -75%);
  }
  .l-xa-0.l-ya-88 img,
  .l-xa-0.l-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 0%;
    -webkit-transform: translate(0%, -88%);
    -ms-transform: translate(0%, -88%);
    transform: translate(0%, -88%);
  }
  .l-xa-0.l-ya-100 img,
  .l-xa-0.l-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 0%;
    -webkit-transform: translate(0%, -100%);
    -ms-transform: translate(0%, -100%);
    transform: translate(0%, -100%);
  }
  .l-xa-12.l-ya-0 img,
  .l-xa-12.l-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 12%;
    -webkit-transform: translate(-12%, 0%);
    -ms-transform: translate(-12%, 0%);
    transform: translate(-12%, 0%);
  }
  .l-xa-12.l-ya-12 img,
  .l-xa-12.l-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 12%;
    -webkit-transform: translate(-12%, -12%);
    -ms-transform: translate(-12%, -12%);
    transform: translate(-12%, -12%);
  }
  .l-xa-12.l-ya-25 img,
  .l-xa-12.l-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 12%;
    -webkit-transform: translate(-12%, -25%);
    -ms-transform: translate(-12%, -25%);
    transform: translate(-12%, -25%);
  }
  .l-xa-12.l-ya-37 img,
  .l-xa-12.l-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 12%;
    -webkit-transform: translate(-12%, -37%);
    -ms-transform: translate(-12%, -37%);
    transform: translate(-12%, -37%);
  }
  .l-xa-12.l-ya-50 img,
  .l-xa-12.l-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 12%;
    -webkit-transform: translate(-12%, -50%);
    -ms-transform: translate(-12%, -50%);
    transform: translate(-12%, -50%);
  }
  .l-xa-12.l-ya-63 img,
  .l-xa-12.l-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 12%;
    -webkit-transform: translate(-12%, -63%);
    -ms-transform: translate(-12%, -63%);
    transform: translate(-12%, -63%);
  }
  .l-xa-12.l-ya-75 img,
  .l-xa-12.l-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 12%;
    -webkit-transform: translate(-12%, -75%);
    -ms-transform: translate(-12%, -75%);
    transform: translate(-12%, -75%);
  }
  .l-xa-12.l-ya-88 img,
  .l-xa-12.l-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 12%;
    -webkit-transform: translate(-12%, -88%);
    -ms-transform: translate(-12%, -88%);
    transform: translate(-12%, -88%);
  }
  .l-xa-12.l-ya-100 img,
  .l-xa-12.l-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 12%;
    -webkit-transform: translate(-12%, -100%);
    -ms-transform: translate(-12%, -100%);
    transform: translate(-12%, -100%);
  }
  .l-xa-25.l-ya-0 img,
  .l-xa-25.l-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 25%;
    -webkit-transform: translate(-25%, 0%);
    -ms-transform: translate(-25%, 0%);
    transform: translate(-25%, 0%);
  }
  .l-xa-25.l-ya-12 img,
  .l-xa-25.l-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 25%;
    -webkit-transform: translate(-25%, -12%);
    -ms-transform: translate(-25%, -12%);
    transform: translate(-25%, -12%);
  }
  .l-xa-25.l-ya-25 img,
  .l-xa-25.l-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 25%;
    -webkit-transform: translate(-25%, -25%);
    -ms-transform: translate(-25%, -25%);
    transform: translate(-25%, -25%);
  }
  .l-xa-25.l-ya-37 img,
  .l-xa-25.l-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 25%;
    -webkit-transform: translate(-25%, -37%);
    -ms-transform: translate(-25%, -37%);
    transform: translate(-25%, -37%);
  }
  .l-xa-25.l-ya-50 img,
  .l-xa-25.l-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 25%;
    -webkit-transform: translate(-25%, -50%);
    -ms-transform: translate(-25%, -50%);
    transform: translate(-25%, -50%);
  }
  .l-xa-25.l-ya-63 img,
  .l-xa-25.l-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 25%;
    -webkit-transform: translate(-25%, -63%);
    -ms-transform: translate(-25%, -63%);
    transform: translate(-25%, -63%);
  }
  .l-xa-25.l-ya-75 img,
  .l-xa-25.l-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 25%;
    -webkit-transform: translate(-25%, -75%);
    -ms-transform: translate(-25%, -75%);
    transform: translate(-25%, -75%);
  }
  .l-xa-25.l-ya-88 img,
  .l-xa-25.l-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 25%;
    -webkit-transform: translate(-25%, -88%);
    -ms-transform: translate(-25%, -88%);
    transform: translate(-25%, -88%);
  }
  .l-xa-25.l-ya-100 img,
  .l-xa-25.l-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 25%;
    -webkit-transform: translate(-25%, -100%);
    -ms-transform: translate(-25%, -100%);
    transform: translate(-25%, -100%);
  }
  .l-xa-37.l-ya-0 img,
  .l-xa-37.l-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 37%;
    -webkit-transform: translate(-37%, 0%);
    -ms-transform: translate(-37%, 0%);
    transform: translate(-37%, 0%);
  }
  .l-xa-37.l-ya-12 img,
  .l-xa-37.l-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 37%;
    -webkit-transform: translate(-37%, -12%);
    -ms-transform: translate(-37%, -12%);
    transform: translate(-37%, -12%);
  }
  .l-xa-37.l-ya-25 img,
  .l-xa-37.l-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 37%;
    -webkit-transform: translate(-37%, -25%);
    -ms-transform: translate(-37%, -25%);
    transform: translate(-37%, -25%);
  }
  .l-xa-37.l-ya-37 img,
  .l-xa-37.l-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 37%;
    -webkit-transform: translate(-37%, -37%);
    -ms-transform: translate(-37%, -37%);
    transform: translate(-37%, -37%);
  }
  .l-xa-37.l-ya-50 img,
  .l-xa-37.l-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 37%;
    -webkit-transform: translate(-37%, -50%);
    -ms-transform: translate(-37%, -50%);
    transform: translate(-37%, -50%);
  }
  .l-xa-37.l-ya-63 img,
  .l-xa-37.l-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 37%;
    -webkit-transform: translate(-37%, -63%);
    -ms-transform: translate(-37%, -63%);
    transform: translate(-37%, -63%);
  }
  .l-xa-37.l-ya-75 img,
  .l-xa-37.l-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 37%;
    -webkit-transform: translate(-37%, -75%);
    -ms-transform: translate(-37%, -75%);
    transform: translate(-37%, -75%);
  }
  .l-xa-37.l-ya-88 img,
  .l-xa-37.l-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 37%;
    -webkit-transform: translate(-37%, -88%);
    -ms-transform: translate(-37%, -88%);
    transform: translate(-37%, -88%);
  }
  .l-xa-37.l-ya-100 img,
  .l-xa-37.l-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 37%;
    -webkit-transform: translate(-37%, -100%);
    -ms-transform: translate(-37%, -100%);
    transform: translate(-37%, -100%);
  }
  .l-xa-50.l-ya-0 img,
  .l-xa-50.l-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
  }
  .l-xa-50.l-ya-12 img,
  .l-xa-50.l-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 50%;
    -webkit-transform: translate(-50%, -12%);
    -ms-transform: translate(-50%, -12%);
    transform: translate(-50%, -12%);
  }
  .l-xa-50.l-ya-25 img,
  .l-xa-50.l-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 50%;
    -webkit-transform: translate(-50%, -25%);
    -ms-transform: translate(-50%, -25%);
    transform: translate(-50%, -25%);
  }
  .l-xa-50.l-ya-37 img,
  .l-xa-50.l-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 50%;
    -webkit-transform: translate(-50%, -37%);
    -ms-transform: translate(-50%, -37%);
    transform: translate(-50%, -37%);
  }
  .l-xa-50.l-ya-50 img,
  .l-xa-50.l-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .l-xa-50.l-ya-63 img,
  .l-xa-50.l-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 50%;
    -webkit-transform: translate(-50%, -63%);
    -ms-transform: translate(-50%, -63%);
    transform: translate(-50%, -63%);
  }
  .l-xa-50.l-ya-75 img,
  .l-xa-50.l-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 50%;
    -webkit-transform: translate(-50%, -75%);
    -ms-transform: translate(-50%, -75%);
    transform: translate(-50%, -75%);
  }
  .l-xa-50.l-ya-88 img,
  .l-xa-50.l-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 50%;
    -webkit-transform: translate(-50%, -88%);
    -ms-transform: translate(-50%, -88%);
    transform: translate(-50%, -88%);
  }
  .l-xa-50.l-ya-100 img,
  .l-xa-50.l-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
  }
  .l-xa-63.l-ya-0 img,
  .l-xa-63.l-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 63%;
    -webkit-transform: translate(-63%, 0%);
    -ms-transform: translate(-63%, 0%);
    transform: translate(-63%, 0%);
  }
  .l-xa-63.l-ya-12 img,
  .l-xa-63.l-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 63%;
    -webkit-transform: translate(-63%, -12%);
    -ms-transform: translate(-63%, -12%);
    transform: translate(-63%, -12%);
  }
  .l-xa-63.l-ya-25 img,
  .l-xa-63.l-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 63%;
    -webkit-transform: translate(-63%, -25%);
    -ms-transform: translate(-63%, -25%);
    transform: translate(-63%, -25%);
  }
  .l-xa-63.l-ya-37 img,
  .l-xa-63.l-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 63%;
    -webkit-transform: translate(-63%, -37%);
    -ms-transform: translate(-63%, -37%);
    transform: translate(-63%, -37%);
  }
  .l-xa-63.l-ya-50 img,
  .l-xa-63.l-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 63%;
    -webkit-transform: translate(-63%, -50%);
    -ms-transform: translate(-63%, -50%);
    transform: translate(-63%, -50%);
  }
  .l-xa-63.l-ya-63 img,
  .l-xa-63.l-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 63%;
    -webkit-transform: translate(-63%, -63%);
    -ms-transform: translate(-63%, -63%);
    transform: translate(-63%, -63%);
  }
  .l-xa-63.l-ya-75 img,
  .l-xa-63.l-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 63%;
    -webkit-transform: translate(-63%, -75%);
    -ms-transform: translate(-63%, -75%);
    transform: translate(-63%, -75%);
  }
  .l-xa-63.l-ya-88 img,
  .l-xa-63.l-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 63%;
    -webkit-transform: translate(-63%, -88%);
    -ms-transform: translate(-63%, -88%);
    transform: translate(-63%, -88%);
  }
  .l-xa-63.l-ya-100 img,
  .l-xa-63.l-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 63%;
    -webkit-transform: translate(-63%, -100%);
    -ms-transform: translate(-63%, -100%);
    transform: translate(-63%, -100%);
  }
  .l-xa-75.l-ya-0 img,
  .l-xa-75.l-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 75%;
    -webkit-transform: translate(-75%, 0%);
    -ms-transform: translate(-75%, 0%);
    transform: translate(-75%, 0%);
  }
  .l-xa-75.l-ya-12 img,
  .l-xa-75.l-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 75%;
    -webkit-transform: translate(-75%, -12%);
    -ms-transform: translate(-75%, -12%);
    transform: translate(-75%, -12%);
  }
  .l-xa-75.l-ya-25 img,
  .l-xa-75.l-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 75%;
    -webkit-transform: translate(-75%, -25%);
    -ms-transform: translate(-75%, -25%);
    transform: translate(-75%, -25%);
  }
  .l-xa-75.l-ya-37 img,
  .l-xa-75.l-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 75%;
    -webkit-transform: translate(-75%, -37%);
    -ms-transform: translate(-75%, -37%);
    transform: translate(-75%, -37%);
  }
  .l-xa-75.l-ya-50 img,
  .l-xa-75.l-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 75%;
    -webkit-transform: translate(-75%, -50%);
    -ms-transform: translate(-75%, -50%);
    transform: translate(-75%, -50%);
  }
  .l-xa-75.l-ya-63 img,
  .l-xa-75.l-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 75%;
    -webkit-transform: translate(-75%, -63%);
    -ms-transform: translate(-75%, -63%);
    transform: translate(-75%, -63%);
  }
  .l-xa-75.l-ya-75 img,
  .l-xa-75.l-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 75%;
    -webkit-transform: translate(-75%, -75%);
    -ms-transform: translate(-75%, -75%);
    transform: translate(-75%, -75%);
  }
  .l-xa-75.l-ya-88 img,
  .l-xa-75.l-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 75%;
    -webkit-transform: translate(-75%, -88%);
    -ms-transform: translate(-75%, -88%);
    transform: translate(-75%, -88%);
  }
  .l-xa-75.l-ya-100 img,
  .l-xa-75.l-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 75%;
    -webkit-transform: translate(-75%, -100%);
    -ms-transform: translate(-75%, -100%);
    transform: translate(-75%, -100%);
  }
  .l-xa-88.l-ya-0 img,
  .l-xa-88.l-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 88%;
    -webkit-transform: translate(-88%, 0%);
    -ms-transform: translate(-88%, 0%);
    transform: translate(-88%, 0%);
  }
  .l-xa-88.l-ya-12 img,
  .l-xa-88.l-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 88%;
    -webkit-transform: translate(-88%, -12%);
    -ms-transform: translate(-88%, -12%);
    transform: translate(-88%, -12%);
  }
  .l-xa-88.l-ya-25 img,
  .l-xa-88.l-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 88%;
    -webkit-transform: translate(-88%, -25%);
    -ms-transform: translate(-88%, -25%);
    transform: translate(-88%, -25%);
  }
  .l-xa-88.l-ya-37 img,
  .l-xa-88.l-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 88%;
    -webkit-transform: translate(-88%, -37%);
    -ms-transform: translate(-88%, -37%);
    transform: translate(-88%, -37%);
  }
  .l-xa-88.l-ya-50 img,
  .l-xa-88.l-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 88%;
    -webkit-transform: translate(-88%, -50%);
    -ms-transform: translate(-88%, -50%);
    transform: translate(-88%, -50%);
  }
  .l-xa-88.l-ya-63 img,
  .l-xa-88.l-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 88%;
    -webkit-transform: translate(-88%, -63%);
    -ms-transform: translate(-88%, -63%);
    transform: translate(-88%, -63%);
  }
  .l-xa-88.l-ya-75 img,
  .l-xa-88.l-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 88%;
    -webkit-transform: translate(-88%, -75%);
    -ms-transform: translate(-88%, -75%);
    transform: translate(-88%, -75%);
  }
  .l-xa-88.l-ya-88 img,
  .l-xa-88.l-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 88%;
    -webkit-transform: translate(-88%, -88%);
    -ms-transform: translate(-88%, -88%);
    transform: translate(-88%, -88%);
  }
  .l-xa-88.l-ya-100 img,
  .l-xa-88.l-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 88%;
    -webkit-transform: translate(-88%, -100%);
    -ms-transform: translate(-88%, -100%);
    transform: translate(-88%, -100%);
  }
  .l-xa-100.l-ya-0 img,
  .l-xa-100.l-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 100%;
    -webkit-transform: translate(-100%, 0%);
    -ms-transform: translate(-100%, 0%);
    transform: translate(-100%, 0%);
  }
  .l-xa-100.l-ya-12 img,
  .l-xa-100.l-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 100%;
    -webkit-transform: translate(-100%, -12%);
    -ms-transform: translate(-100%, -12%);
    transform: translate(-100%, -12%);
  }
  .l-xa-100.l-ya-25 img,
  .l-xa-100.l-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 100%;
    -webkit-transform: translate(-100%, -25%);
    -ms-transform: translate(-100%, -25%);
    transform: translate(-100%, -25%);
  }
  .l-xa-100.l-ya-37 img,
  .l-xa-100.l-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 100%;
    -webkit-transform: translate(-100%, -37%);
    -ms-transform: translate(-100%, -37%);
    transform: translate(-100%, -37%);
  }
  .l-xa-100.l-ya-50 img,
  .l-xa-100.l-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 100%;
    -webkit-transform: translate(-100%, -50%);
    -ms-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
  }
  .l-xa-100.l-ya-63 img,
  .l-xa-100.l-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 100%;
    -webkit-transform: translate(-100%, -63%);
    -ms-transform: translate(-100%, -63%);
    transform: translate(-100%, -63%);
  }
  .l-xa-100.l-ya-75 img,
  .l-xa-100.l-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 100%;
    -webkit-transform: translate(-100%, -75%);
    -ms-transform: translate(-100%, -75%);
    transform: translate(-100%, -75%);
  }
  .l-xa-100.l-ya-88 img,
  .l-xa-100.l-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 100%;
    -webkit-transform: translate(-100%, -88%);
    -ms-transform: translate(-100%, -88%);
    transform: translate(-100%, -88%);
  }
  .l-xa-100.l-ya-100 img,
  .l-xa-100.l-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 100%;
    -webkit-transform: translate(-100%, -100%);
    -ms-transform: translate(-100%, -100%);
    transform: translate(-100%, -100%);
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .m-xa-0.m-ya-0 img,
  .m-xa-0.m-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 0%;
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
  }
  .m-xa-0.m-ya-12 img,
  .m-xa-0.m-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 0%;
    -webkit-transform: translate(0%, -12%);
    -ms-transform: translate(0%, -12%);
    transform: translate(0%, -12%);
  }
  .m-xa-0.m-ya-25 img,
  .m-xa-0.m-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 0%;
    -webkit-transform: translate(0%, -25%);
    -ms-transform: translate(0%, -25%);
    transform: translate(0%, -25%);
  }
  .m-xa-0.m-ya-37 img,
  .m-xa-0.m-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 0%;
    -webkit-transform: translate(0%, -37%);
    -ms-transform: translate(0%, -37%);
    transform: translate(0%, -37%);
  }
  .m-xa-0.m-ya-50 img,
  .m-xa-0.m-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 0%;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
  }
  .m-xa-0.m-ya-63 img,
  .m-xa-0.m-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 0%;
    -webkit-transform: translate(0%, -63%);
    -ms-transform: translate(0%, -63%);
    transform: translate(0%, -63%);
  }
  .m-xa-0.m-ya-75 img,
  .m-xa-0.m-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 0%;
    -webkit-transform: translate(0%, -75%);
    -ms-transform: translate(0%, -75%);
    transform: translate(0%, -75%);
  }
  .m-xa-0.m-ya-88 img,
  .m-xa-0.m-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 0%;
    -webkit-transform: translate(0%, -88%);
    -ms-transform: translate(0%, -88%);
    transform: translate(0%, -88%);
  }
  .m-xa-0.m-ya-100 img,
  .m-xa-0.m-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 0%;
    -webkit-transform: translate(0%, -100%);
    -ms-transform: translate(0%, -100%);
    transform: translate(0%, -100%);
  }
  .m-xa-12.m-ya-0 img,
  .m-xa-12.m-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 12%;
    -webkit-transform: translate(-12%, 0%);
    -ms-transform: translate(-12%, 0%);
    transform: translate(-12%, 0%);
  }
  .m-xa-12.m-ya-12 img,
  .m-xa-12.m-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 12%;
    -webkit-transform: translate(-12%, -12%);
    -ms-transform: translate(-12%, -12%);
    transform: translate(-12%, -12%);
  }
  .m-xa-12.m-ya-25 img,
  .m-xa-12.m-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 12%;
    -webkit-transform: translate(-12%, -25%);
    -ms-transform: translate(-12%, -25%);
    transform: translate(-12%, -25%);
  }
  .m-xa-12.m-ya-37 img,
  .m-xa-12.m-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 12%;
    -webkit-transform: translate(-12%, -37%);
    -ms-transform: translate(-12%, -37%);
    transform: translate(-12%, -37%);
  }
  .m-xa-12.m-ya-50 img,
  .m-xa-12.m-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 12%;
    -webkit-transform: translate(-12%, -50%);
    -ms-transform: translate(-12%, -50%);
    transform: translate(-12%, -50%);
  }
  .m-xa-12.m-ya-63 img,
  .m-xa-12.m-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 12%;
    -webkit-transform: translate(-12%, -63%);
    -ms-transform: translate(-12%, -63%);
    transform: translate(-12%, -63%);
  }
  .m-xa-12.m-ya-75 img,
  .m-xa-12.m-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 12%;
    -webkit-transform: translate(-12%, -75%);
    -ms-transform: translate(-12%, -75%);
    transform: translate(-12%, -75%);
  }
  .m-xa-12.m-ya-88 img,
  .m-xa-12.m-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 12%;
    -webkit-transform: translate(-12%, -88%);
    -ms-transform: translate(-12%, -88%);
    transform: translate(-12%, -88%);
  }
  .m-xa-12.m-ya-100 img,
  .m-xa-12.m-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 12%;
    -webkit-transform: translate(-12%, -100%);
    -ms-transform: translate(-12%, -100%);
    transform: translate(-12%, -100%);
  }
  .m-xa-25.m-ya-0 img,
  .m-xa-25.m-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 25%;
    -webkit-transform: translate(-25%, 0%);
    -ms-transform: translate(-25%, 0%);
    transform: translate(-25%, 0%);
  }
  .m-xa-25.m-ya-12 img,
  .m-xa-25.m-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 25%;
    -webkit-transform: translate(-25%, -12%);
    -ms-transform: translate(-25%, -12%);
    transform: translate(-25%, -12%);
  }
  .m-xa-25.m-ya-25 img,
  .m-xa-25.m-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 25%;
    -webkit-transform: translate(-25%, -25%);
    -ms-transform: translate(-25%, -25%);
    transform: translate(-25%, -25%);
  }
  .m-xa-25.m-ya-37 img,
  .m-xa-25.m-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 25%;
    -webkit-transform: translate(-25%, -37%);
    -ms-transform: translate(-25%, -37%);
    transform: translate(-25%, -37%);
  }
  .m-xa-25.m-ya-50 img,
  .m-xa-25.m-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 25%;
    -webkit-transform: translate(-25%, -50%);
    -ms-transform: translate(-25%, -50%);
    transform: translate(-25%, -50%);
  }
  .m-xa-25.m-ya-63 img,
  .m-xa-25.m-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 25%;
    -webkit-transform: translate(-25%, -63%);
    -ms-transform: translate(-25%, -63%);
    transform: translate(-25%, -63%);
  }
  .m-xa-25.m-ya-75 img,
  .m-xa-25.m-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 25%;
    -webkit-transform: translate(-25%, -75%);
    -ms-transform: translate(-25%, -75%);
    transform: translate(-25%, -75%);
  }
  .m-xa-25.m-ya-88 img,
  .m-xa-25.m-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 25%;
    -webkit-transform: translate(-25%, -88%);
    -ms-transform: translate(-25%, -88%);
    transform: translate(-25%, -88%);
  }
  .m-xa-25.m-ya-100 img,
  .m-xa-25.m-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 25%;
    -webkit-transform: translate(-25%, -100%);
    -ms-transform: translate(-25%, -100%);
    transform: translate(-25%, -100%);
  }
  .m-xa-37.m-ya-0 img,
  .m-xa-37.m-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 37%;
    -webkit-transform: translate(-37%, 0%);
    -ms-transform: translate(-37%, 0%);
    transform: translate(-37%, 0%);
  }
  .m-xa-37.m-ya-12 img,
  .m-xa-37.m-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 37%;
    -webkit-transform: translate(-37%, -12%);
    -ms-transform: translate(-37%, -12%);
    transform: translate(-37%, -12%);
  }
  .m-xa-37.m-ya-25 img,
  .m-xa-37.m-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 37%;
    -webkit-transform: translate(-37%, -25%);
    -ms-transform: translate(-37%, -25%);
    transform: translate(-37%, -25%);
  }
  .m-xa-37.m-ya-37 img,
  .m-xa-37.m-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 37%;
    -webkit-transform: translate(-37%, -37%);
    -ms-transform: translate(-37%, -37%);
    transform: translate(-37%, -37%);
  }
  .m-xa-37.m-ya-50 img,
  .m-xa-37.m-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 37%;
    -webkit-transform: translate(-37%, -50%);
    -ms-transform: translate(-37%, -50%);
    transform: translate(-37%, -50%);
  }
  .m-xa-37.m-ya-63 img,
  .m-xa-37.m-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 37%;
    -webkit-transform: translate(-37%, -63%);
    -ms-transform: translate(-37%, -63%);
    transform: translate(-37%, -63%);
  }
  .m-xa-37.m-ya-75 img,
  .m-xa-37.m-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 37%;
    -webkit-transform: translate(-37%, -75%);
    -ms-transform: translate(-37%, -75%);
    transform: translate(-37%, -75%);
  }
  .m-xa-37.m-ya-88 img,
  .m-xa-37.m-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 37%;
    -webkit-transform: translate(-37%, -88%);
    -ms-transform: translate(-37%, -88%);
    transform: translate(-37%, -88%);
  }
  .m-xa-37.m-ya-100 img,
  .m-xa-37.m-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 37%;
    -webkit-transform: translate(-37%, -100%);
    -ms-transform: translate(-37%, -100%);
    transform: translate(-37%, -100%);
  }
  .m-xa-50.m-ya-0 img,
  .m-xa-50.m-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
  }
  .m-xa-50.m-ya-12 img,
  .m-xa-50.m-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 50%;
    -webkit-transform: translate(-50%, -12%);
    -ms-transform: translate(-50%, -12%);
    transform: translate(-50%, -12%);
  }
  .m-xa-50.m-ya-25 img,
  .m-xa-50.m-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 50%;
    -webkit-transform: translate(-50%, -25%);
    -ms-transform: translate(-50%, -25%);
    transform: translate(-50%, -25%);
  }
  .m-xa-50.m-ya-37 img,
  .m-xa-50.m-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 50%;
    -webkit-transform: translate(-50%, -37%);
    -ms-transform: translate(-50%, -37%);
    transform: translate(-50%, -37%);
  }
  .m-xa-50.m-ya-50 img,
  .m-xa-50.m-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .m-xa-50.m-ya-63 img,
  .m-xa-50.m-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 50%;
    -webkit-transform: translate(-50%, -63%);
    -ms-transform: translate(-50%, -63%);
    transform: translate(-50%, -63%);
  }
  .m-xa-50.m-ya-75 img,
  .m-xa-50.m-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 50%;
    -webkit-transform: translate(-50%, -75%);
    -ms-transform: translate(-50%, -75%);
    transform: translate(-50%, -75%);
  }
  .m-xa-50.m-ya-88 img,
  .m-xa-50.m-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 50%;
    -webkit-transform: translate(-50%, -88%);
    -ms-transform: translate(-50%, -88%);
    transform: translate(-50%, -88%);
  }
  .m-xa-50.m-ya-100 img,
  .m-xa-50.m-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
  }
  .m-xa-63.m-ya-0 img,
  .m-xa-63.m-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 63%;
    -webkit-transform: translate(-63%, 0%);
    -ms-transform: translate(-63%, 0%);
    transform: translate(-63%, 0%);
  }
  .m-xa-63.m-ya-12 img,
  .m-xa-63.m-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 63%;
    -webkit-transform: translate(-63%, -12%);
    -ms-transform: translate(-63%, -12%);
    transform: translate(-63%, -12%);
  }
  .m-xa-63.m-ya-25 img,
  .m-xa-63.m-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 63%;
    -webkit-transform: translate(-63%, -25%);
    -ms-transform: translate(-63%, -25%);
    transform: translate(-63%, -25%);
  }
  .m-xa-63.m-ya-37 img,
  .m-xa-63.m-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 63%;
    -webkit-transform: translate(-63%, -37%);
    -ms-transform: translate(-63%, -37%);
    transform: translate(-63%, -37%);
  }
  .m-xa-63.m-ya-50 img,
  .m-xa-63.m-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 63%;
    -webkit-transform: translate(-63%, -50%);
    -ms-transform: translate(-63%, -50%);
    transform: translate(-63%, -50%);
  }
  .m-xa-63.m-ya-63 img,
  .m-xa-63.m-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 63%;
    -webkit-transform: translate(-63%, -63%);
    -ms-transform: translate(-63%, -63%);
    transform: translate(-63%, -63%);
  }
  .m-xa-63.m-ya-75 img,
  .m-xa-63.m-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 63%;
    -webkit-transform: translate(-63%, -75%);
    -ms-transform: translate(-63%, -75%);
    transform: translate(-63%, -75%);
  }
  .m-xa-63.m-ya-88 img,
  .m-xa-63.m-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 63%;
    -webkit-transform: translate(-63%, -88%);
    -ms-transform: translate(-63%, -88%);
    transform: translate(-63%, -88%);
  }
  .m-xa-63.m-ya-100 img,
  .m-xa-63.m-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 63%;
    -webkit-transform: translate(-63%, -100%);
    -ms-transform: translate(-63%, -100%);
    transform: translate(-63%, -100%);
  }
  .m-xa-75.m-ya-0 img,
  .m-xa-75.m-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 75%;
    -webkit-transform: translate(-75%, 0%);
    -ms-transform: translate(-75%, 0%);
    transform: translate(-75%, 0%);
  }
  .m-xa-75.m-ya-12 img,
  .m-xa-75.m-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 75%;
    -webkit-transform: translate(-75%, -12%);
    -ms-transform: translate(-75%, -12%);
    transform: translate(-75%, -12%);
  }
  .m-xa-75.m-ya-25 img,
  .m-xa-75.m-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 75%;
    -webkit-transform: translate(-75%, -25%);
    -ms-transform: translate(-75%, -25%);
    transform: translate(-75%, -25%);
  }
  .m-xa-75.m-ya-37 img,
  .m-xa-75.m-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 75%;
    -webkit-transform: translate(-75%, -37%);
    -ms-transform: translate(-75%, -37%);
    transform: translate(-75%, -37%);
  }
  .m-xa-75.m-ya-50 img,
  .m-xa-75.m-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 75%;
    -webkit-transform: translate(-75%, -50%);
    -ms-transform: translate(-75%, -50%);
    transform: translate(-75%, -50%);
  }
  .m-xa-75.m-ya-63 img,
  .m-xa-75.m-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 75%;
    -webkit-transform: translate(-75%, -63%);
    -ms-transform: translate(-75%, -63%);
    transform: translate(-75%, -63%);
  }
  .m-xa-75.m-ya-75 img,
  .m-xa-75.m-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 75%;
    -webkit-transform: translate(-75%, -75%);
    -ms-transform: translate(-75%, -75%);
    transform: translate(-75%, -75%);
  }
  .m-xa-75.m-ya-88 img,
  .m-xa-75.m-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 75%;
    -webkit-transform: translate(-75%, -88%);
    -ms-transform: translate(-75%, -88%);
    transform: translate(-75%, -88%);
  }
  .m-xa-75.m-ya-100 img,
  .m-xa-75.m-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 75%;
    -webkit-transform: translate(-75%, -100%);
    -ms-transform: translate(-75%, -100%);
    transform: translate(-75%, -100%);
  }
  .m-xa-88.m-ya-0 img,
  .m-xa-88.m-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 88%;
    -webkit-transform: translate(-88%, 0%);
    -ms-transform: translate(-88%, 0%);
    transform: translate(-88%, 0%);
  }
  .m-xa-88.m-ya-12 img,
  .m-xa-88.m-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 88%;
    -webkit-transform: translate(-88%, -12%);
    -ms-transform: translate(-88%, -12%);
    transform: translate(-88%, -12%);
  }
  .m-xa-88.m-ya-25 img,
  .m-xa-88.m-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 88%;
    -webkit-transform: translate(-88%, -25%);
    -ms-transform: translate(-88%, -25%);
    transform: translate(-88%, -25%);
  }
  .m-xa-88.m-ya-37 img,
  .m-xa-88.m-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 88%;
    -webkit-transform: translate(-88%, -37%);
    -ms-transform: translate(-88%, -37%);
    transform: translate(-88%, -37%);
  }
  .m-xa-88.m-ya-50 img,
  .m-xa-88.m-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 88%;
    -webkit-transform: translate(-88%, -50%);
    -ms-transform: translate(-88%, -50%);
    transform: translate(-88%, -50%);
  }
  .m-xa-88.m-ya-63 img,
  .m-xa-88.m-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 88%;
    -webkit-transform: translate(-88%, -63%);
    -ms-transform: translate(-88%, -63%);
    transform: translate(-88%, -63%);
  }
  .m-xa-88.m-ya-75 img,
  .m-xa-88.m-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 88%;
    -webkit-transform: translate(-88%, -75%);
    -ms-transform: translate(-88%, -75%);
    transform: translate(-88%, -75%);
  }
  .m-xa-88.m-ya-88 img,
  .m-xa-88.m-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 88%;
    -webkit-transform: translate(-88%, -88%);
    -ms-transform: translate(-88%, -88%);
    transform: translate(-88%, -88%);
  }
  .m-xa-88.m-ya-100 img,
  .m-xa-88.m-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 88%;
    -webkit-transform: translate(-88%, -100%);
    -ms-transform: translate(-88%, -100%);
    transform: translate(-88%, -100%);
  }
  .m-xa-100.m-ya-0 img,
  .m-xa-100.m-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 100%;
    -webkit-transform: translate(-100%, 0%);
    -ms-transform: translate(-100%, 0%);
    transform: translate(-100%, 0%);
  }
  .m-xa-100.m-ya-12 img,
  .m-xa-100.m-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 100%;
    -webkit-transform: translate(-100%, -12%);
    -ms-transform: translate(-100%, -12%);
    transform: translate(-100%, -12%);
  }
  .m-xa-100.m-ya-25 img,
  .m-xa-100.m-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 100%;
    -webkit-transform: translate(-100%, -25%);
    -ms-transform: translate(-100%, -25%);
    transform: translate(-100%, -25%);
  }
  .m-xa-100.m-ya-37 img,
  .m-xa-100.m-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 100%;
    -webkit-transform: translate(-100%, -37%);
    -ms-transform: translate(-100%, -37%);
    transform: translate(-100%, -37%);
  }
  .m-xa-100.m-ya-50 img,
  .m-xa-100.m-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 100%;
    -webkit-transform: translate(-100%, -50%);
    -ms-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
  }
  .m-xa-100.m-ya-63 img,
  .m-xa-100.m-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 100%;
    -webkit-transform: translate(-100%, -63%);
    -ms-transform: translate(-100%, -63%);
    transform: translate(-100%, -63%);
  }
  .m-xa-100.m-ya-75 img,
  .m-xa-100.m-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 100%;
    -webkit-transform: translate(-100%, -75%);
    -ms-transform: translate(-100%, -75%);
    transform: translate(-100%, -75%);
  }
  .m-xa-100.m-ya-88 img,
  .m-xa-100.m-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 100%;
    -webkit-transform: translate(-100%, -88%);
    -ms-transform: translate(-100%, -88%);
    transform: translate(-100%, -88%);
  }
  .m-xa-100.m-ya-100 img,
  .m-xa-100.m-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 100%;
    -webkit-transform: translate(-100%, -100%);
    -ms-transform: translate(-100%, -100%);
    transform: translate(-100%, -100%);
  }
}
@media screen and (max-width: 659.9px) {
  .s-xa-0.s-ya-0 img,
  .s-xa-0.s-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 0%;
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
  }
  .s-xa-0.s-ya-12 img,
  .s-xa-0.s-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 0%;
    -webkit-transform: translate(0%, -12%);
    -ms-transform: translate(0%, -12%);
    transform: translate(0%, -12%);
  }
  .s-xa-0.s-ya-25 img,
  .s-xa-0.s-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 0%;
    -webkit-transform: translate(0%, -25%);
    -ms-transform: translate(0%, -25%);
    transform: translate(0%, -25%);
  }
  .s-xa-0.s-ya-37 img,
  .s-xa-0.s-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 0%;
    -webkit-transform: translate(0%, -37%);
    -ms-transform: translate(0%, -37%);
    transform: translate(0%, -37%);
  }
  .s-xa-0.s-ya-50 img,
  .s-xa-0.s-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 0%;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
  }
  .s-xa-0.s-ya-63 img,
  .s-xa-0.s-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 0%;
    -webkit-transform: translate(0%, -63%);
    -ms-transform: translate(0%, -63%);
    transform: translate(0%, -63%);
  }
  .s-xa-0.s-ya-75 img,
  .s-xa-0.s-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 0%;
    -webkit-transform: translate(0%, -75%);
    -ms-transform: translate(0%, -75%);
    transform: translate(0%, -75%);
  }
  .s-xa-0.s-ya-88 img,
  .s-xa-0.s-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 0%;
    -webkit-transform: translate(0%, -88%);
    -ms-transform: translate(0%, -88%);
    transform: translate(0%, -88%);
  }
  .s-xa-0.s-ya-100 img,
  .s-xa-0.s-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 0%;
    -webkit-transform: translate(0%, -100%);
    -ms-transform: translate(0%, -100%);
    transform: translate(0%, -100%);
  }
  .s-xa-12.s-ya-0 img,
  .s-xa-12.s-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 12%;
    -webkit-transform: translate(-12%, 0%);
    -ms-transform: translate(-12%, 0%);
    transform: translate(-12%, 0%);
  }
  .s-xa-12.s-ya-12 img,
  .s-xa-12.s-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 12%;
    -webkit-transform: translate(-12%, -12%);
    -ms-transform: translate(-12%, -12%);
    transform: translate(-12%, -12%);
  }
  .s-xa-12.s-ya-25 img,
  .s-xa-12.s-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 12%;
    -webkit-transform: translate(-12%, -25%);
    -ms-transform: translate(-12%, -25%);
    transform: translate(-12%, -25%);
  }
  .s-xa-12.s-ya-37 img,
  .s-xa-12.s-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 12%;
    -webkit-transform: translate(-12%, -37%);
    -ms-transform: translate(-12%, -37%);
    transform: translate(-12%, -37%);
  }
  .s-xa-12.s-ya-50 img,
  .s-xa-12.s-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 12%;
    -webkit-transform: translate(-12%, -50%);
    -ms-transform: translate(-12%, -50%);
    transform: translate(-12%, -50%);
  }
  .s-xa-12.s-ya-63 img,
  .s-xa-12.s-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 12%;
    -webkit-transform: translate(-12%, -63%);
    -ms-transform: translate(-12%, -63%);
    transform: translate(-12%, -63%);
  }
  .s-xa-12.s-ya-75 img,
  .s-xa-12.s-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 12%;
    -webkit-transform: translate(-12%, -75%);
    -ms-transform: translate(-12%, -75%);
    transform: translate(-12%, -75%);
  }
  .s-xa-12.s-ya-88 img,
  .s-xa-12.s-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 12%;
    -webkit-transform: translate(-12%, -88%);
    -ms-transform: translate(-12%, -88%);
    transform: translate(-12%, -88%);
  }
  .s-xa-12.s-ya-100 img,
  .s-xa-12.s-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 12%;
    -webkit-transform: translate(-12%, -100%);
    -ms-transform: translate(-12%, -100%);
    transform: translate(-12%, -100%);
  }
  .s-xa-25.s-ya-0 img,
  .s-xa-25.s-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 25%;
    -webkit-transform: translate(-25%, 0%);
    -ms-transform: translate(-25%, 0%);
    transform: translate(-25%, 0%);
  }
  .s-xa-25.s-ya-12 img,
  .s-xa-25.s-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 25%;
    -webkit-transform: translate(-25%, -12%);
    -ms-transform: translate(-25%, -12%);
    transform: translate(-25%, -12%);
  }
  .s-xa-25.s-ya-25 img,
  .s-xa-25.s-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 25%;
    -webkit-transform: translate(-25%, -25%);
    -ms-transform: translate(-25%, -25%);
    transform: translate(-25%, -25%);
  }
  .s-xa-25.s-ya-37 img,
  .s-xa-25.s-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 25%;
    -webkit-transform: translate(-25%, -37%);
    -ms-transform: translate(-25%, -37%);
    transform: translate(-25%, -37%);
  }
  .s-xa-25.s-ya-50 img,
  .s-xa-25.s-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 25%;
    -webkit-transform: translate(-25%, -50%);
    -ms-transform: translate(-25%, -50%);
    transform: translate(-25%, -50%);
  }
  .s-xa-25.s-ya-63 img,
  .s-xa-25.s-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 25%;
    -webkit-transform: translate(-25%, -63%);
    -ms-transform: translate(-25%, -63%);
    transform: translate(-25%, -63%);
  }
  .s-xa-25.s-ya-75 img,
  .s-xa-25.s-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 25%;
    -webkit-transform: translate(-25%, -75%);
    -ms-transform: translate(-25%, -75%);
    transform: translate(-25%, -75%);
  }
  .s-xa-25.s-ya-88 img,
  .s-xa-25.s-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 25%;
    -webkit-transform: translate(-25%, -88%);
    -ms-transform: translate(-25%, -88%);
    transform: translate(-25%, -88%);
  }
  .s-xa-25.s-ya-100 img,
  .s-xa-25.s-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 25%;
    -webkit-transform: translate(-25%, -100%);
    -ms-transform: translate(-25%, -100%);
    transform: translate(-25%, -100%);
  }
  .s-xa-37.s-ya-0 img,
  .s-xa-37.s-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 37%;
    -webkit-transform: translate(-37%, 0%);
    -ms-transform: translate(-37%, 0%);
    transform: translate(-37%, 0%);
  }
  .s-xa-37.s-ya-12 img,
  .s-xa-37.s-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 37%;
    -webkit-transform: translate(-37%, -12%);
    -ms-transform: translate(-37%, -12%);
    transform: translate(-37%, -12%);
  }
  .s-xa-37.s-ya-25 img,
  .s-xa-37.s-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 37%;
    -webkit-transform: translate(-37%, -25%);
    -ms-transform: translate(-37%, -25%);
    transform: translate(-37%, -25%);
  }
  .s-xa-37.s-ya-37 img,
  .s-xa-37.s-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 37%;
    -webkit-transform: translate(-37%, -37%);
    -ms-transform: translate(-37%, -37%);
    transform: translate(-37%, -37%);
  }
  .s-xa-37.s-ya-50 img,
  .s-xa-37.s-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 37%;
    -webkit-transform: translate(-37%, -50%);
    -ms-transform: translate(-37%, -50%);
    transform: translate(-37%, -50%);
  }
  .s-xa-37.s-ya-63 img,
  .s-xa-37.s-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 37%;
    -webkit-transform: translate(-37%, -63%);
    -ms-transform: translate(-37%, -63%);
    transform: translate(-37%, -63%);
  }
  .s-xa-37.s-ya-75 img,
  .s-xa-37.s-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 37%;
    -webkit-transform: translate(-37%, -75%);
    -ms-transform: translate(-37%, -75%);
    transform: translate(-37%, -75%);
  }
  .s-xa-37.s-ya-88 img,
  .s-xa-37.s-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 37%;
    -webkit-transform: translate(-37%, -88%);
    -ms-transform: translate(-37%, -88%);
    transform: translate(-37%, -88%);
  }
  .s-xa-37.s-ya-100 img,
  .s-xa-37.s-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 37%;
    -webkit-transform: translate(-37%, -100%);
    -ms-transform: translate(-37%, -100%);
    transform: translate(-37%, -100%);
  }
  .s-xa-50.s-ya-0 img,
  .s-xa-50.s-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
  }
  .s-xa-50.s-ya-12 img,
  .s-xa-50.s-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 50%;
    -webkit-transform: translate(-50%, -12%);
    -ms-transform: translate(-50%, -12%);
    transform: translate(-50%, -12%);
  }
  .s-xa-50.s-ya-25 img,
  .s-xa-50.s-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 50%;
    -webkit-transform: translate(-50%, -25%);
    -ms-transform: translate(-50%, -25%);
    transform: translate(-50%, -25%);
  }
  .s-xa-50.s-ya-37 img,
  .s-xa-50.s-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 50%;
    -webkit-transform: translate(-50%, -37%);
    -ms-transform: translate(-50%, -37%);
    transform: translate(-50%, -37%);
  }
  .s-xa-50.s-ya-50 img,
  .s-xa-50.s-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .s-xa-50.s-ya-63 img,
  .s-xa-50.s-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 50%;
    -webkit-transform: translate(-50%, -63%);
    -ms-transform: translate(-50%, -63%);
    transform: translate(-50%, -63%);
  }
  .s-xa-50.s-ya-75 img,
  .s-xa-50.s-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 50%;
    -webkit-transform: translate(-50%, -75%);
    -ms-transform: translate(-50%, -75%);
    transform: translate(-50%, -75%);
  }
  .s-xa-50.s-ya-88 img,
  .s-xa-50.s-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 50%;
    -webkit-transform: translate(-50%, -88%);
    -ms-transform: translate(-50%, -88%);
    transform: translate(-50%, -88%);
  }
  .s-xa-50.s-ya-100 img,
  .s-xa-50.s-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
  }
  .s-xa-63.s-ya-0 img,
  .s-xa-63.s-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 63%;
    -webkit-transform: translate(-63%, 0%);
    -ms-transform: translate(-63%, 0%);
    transform: translate(-63%, 0%);
  }
  .s-xa-63.s-ya-12 img,
  .s-xa-63.s-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 63%;
    -webkit-transform: translate(-63%, -12%);
    -ms-transform: translate(-63%, -12%);
    transform: translate(-63%, -12%);
  }
  .s-xa-63.s-ya-25 img,
  .s-xa-63.s-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 63%;
    -webkit-transform: translate(-63%, -25%);
    -ms-transform: translate(-63%, -25%);
    transform: translate(-63%, -25%);
  }
  .s-xa-63.s-ya-37 img,
  .s-xa-63.s-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 63%;
    -webkit-transform: translate(-63%, -37%);
    -ms-transform: translate(-63%, -37%);
    transform: translate(-63%, -37%);
  }
  .s-xa-63.s-ya-50 img,
  .s-xa-63.s-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 63%;
    -webkit-transform: translate(-63%, -50%);
    -ms-transform: translate(-63%, -50%);
    transform: translate(-63%, -50%);
  }
  .s-xa-63.s-ya-63 img,
  .s-xa-63.s-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 63%;
    -webkit-transform: translate(-63%, -63%);
    -ms-transform: translate(-63%, -63%);
    transform: translate(-63%, -63%);
  }
  .s-xa-63.s-ya-75 img,
  .s-xa-63.s-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 63%;
    -webkit-transform: translate(-63%, -75%);
    -ms-transform: translate(-63%, -75%);
    transform: translate(-63%, -75%);
  }
  .s-xa-63.s-ya-88 img,
  .s-xa-63.s-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 63%;
    -webkit-transform: translate(-63%, -88%);
    -ms-transform: translate(-63%, -88%);
    transform: translate(-63%, -88%);
  }
  .s-xa-63.s-ya-100 img,
  .s-xa-63.s-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 63%;
    -webkit-transform: translate(-63%, -100%);
    -ms-transform: translate(-63%, -100%);
    transform: translate(-63%, -100%);
  }
  .s-xa-75.s-ya-0 img,
  .s-xa-75.s-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 75%;
    -webkit-transform: translate(-75%, 0%);
    -ms-transform: translate(-75%, 0%);
    transform: translate(-75%, 0%);
  }
  .s-xa-75.s-ya-12 img,
  .s-xa-75.s-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 75%;
    -webkit-transform: translate(-75%, -12%);
    -ms-transform: translate(-75%, -12%);
    transform: translate(-75%, -12%);
  }
  .s-xa-75.s-ya-25 img,
  .s-xa-75.s-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 75%;
    -webkit-transform: translate(-75%, -25%);
    -ms-transform: translate(-75%, -25%);
    transform: translate(-75%, -25%);
  }
  .s-xa-75.s-ya-37 img,
  .s-xa-75.s-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 75%;
    -webkit-transform: translate(-75%, -37%);
    -ms-transform: translate(-75%, -37%);
    transform: translate(-75%, -37%);
  }
  .s-xa-75.s-ya-50 img,
  .s-xa-75.s-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 75%;
    -webkit-transform: translate(-75%, -50%);
    -ms-transform: translate(-75%, -50%);
    transform: translate(-75%, -50%);
  }
  .s-xa-75.s-ya-63 img,
  .s-xa-75.s-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 75%;
    -webkit-transform: translate(-75%, -63%);
    -ms-transform: translate(-75%, -63%);
    transform: translate(-75%, -63%);
  }
  .s-xa-75.s-ya-75 img,
  .s-xa-75.s-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 75%;
    -webkit-transform: translate(-75%, -75%);
    -ms-transform: translate(-75%, -75%);
    transform: translate(-75%, -75%);
  }
  .s-xa-75.s-ya-88 img,
  .s-xa-75.s-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 75%;
    -webkit-transform: translate(-75%, -88%);
    -ms-transform: translate(-75%, -88%);
    transform: translate(-75%, -88%);
  }
  .s-xa-75.s-ya-100 img,
  .s-xa-75.s-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 75%;
    -webkit-transform: translate(-75%, -100%);
    -ms-transform: translate(-75%, -100%);
    transform: translate(-75%, -100%);
  }
  .s-xa-88.s-ya-0 img,
  .s-xa-88.s-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 88%;
    -webkit-transform: translate(-88%, 0%);
    -ms-transform: translate(-88%, 0%);
    transform: translate(-88%, 0%);
  }
  .s-xa-88.s-ya-12 img,
  .s-xa-88.s-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 88%;
    -webkit-transform: translate(-88%, -12%);
    -ms-transform: translate(-88%, -12%);
    transform: translate(-88%, -12%);
  }
  .s-xa-88.s-ya-25 img,
  .s-xa-88.s-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 88%;
    -webkit-transform: translate(-88%, -25%);
    -ms-transform: translate(-88%, -25%);
    transform: translate(-88%, -25%);
  }
  .s-xa-88.s-ya-37 img,
  .s-xa-88.s-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 88%;
    -webkit-transform: translate(-88%, -37%);
    -ms-transform: translate(-88%, -37%);
    transform: translate(-88%, -37%);
  }
  .s-xa-88.s-ya-50 img,
  .s-xa-88.s-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 88%;
    -webkit-transform: translate(-88%, -50%);
    -ms-transform: translate(-88%, -50%);
    transform: translate(-88%, -50%);
  }
  .s-xa-88.s-ya-63 img,
  .s-xa-88.s-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 88%;
    -webkit-transform: translate(-88%, -63%);
    -ms-transform: translate(-88%, -63%);
    transform: translate(-88%, -63%);
  }
  .s-xa-88.s-ya-75 img,
  .s-xa-88.s-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 88%;
    -webkit-transform: translate(-88%, -75%);
    -ms-transform: translate(-88%, -75%);
    transform: translate(-88%, -75%);
  }
  .s-xa-88.s-ya-88 img,
  .s-xa-88.s-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 88%;
    -webkit-transform: translate(-88%, -88%);
    -ms-transform: translate(-88%, -88%);
    transform: translate(-88%, -88%);
  }
  .s-xa-88.s-ya-100 img,
  .s-xa-88.s-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 88%;
    -webkit-transform: translate(-88%, -100%);
    -ms-transform: translate(-88%, -100%);
    transform: translate(-88%, -100%);
  }
  .s-xa-100.s-ya-0 img,
  .s-xa-100.s-ya-0 svg {
    position: absolute;
    top: 0%;
    left: 100%;
    -webkit-transform: translate(-100%, 0%);
    -ms-transform: translate(-100%, 0%);
    transform: translate(-100%, 0%);
  }
  .s-xa-100.s-ya-12 img,
  .s-xa-100.s-ya-12 svg {
    position: absolute;
    top: 12%;
    left: 100%;
    -webkit-transform: translate(-100%, -12%);
    -ms-transform: translate(-100%, -12%);
    transform: translate(-100%, -12%);
  }
  .s-xa-100.s-ya-25 img,
  .s-xa-100.s-ya-25 svg {
    position: absolute;
    top: 25%;
    left: 100%;
    -webkit-transform: translate(-100%, -25%);
    -ms-transform: translate(-100%, -25%);
    transform: translate(-100%, -25%);
  }
  .s-xa-100.s-ya-37 img,
  .s-xa-100.s-ya-37 svg {
    position: absolute;
    top: 37%;
    left: 100%;
    -webkit-transform: translate(-100%, -37%);
    -ms-transform: translate(-100%, -37%);
    transform: translate(-100%, -37%);
  }
  .s-xa-100.s-ya-50 img,
  .s-xa-100.s-ya-50 svg {
    position: absolute;
    top: 50%;
    left: 100%;
    -webkit-transform: translate(-100%, -50%);
    -ms-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
  }
  .s-xa-100.s-ya-63 img,
  .s-xa-100.s-ya-63 svg {
    position: absolute;
    top: 63%;
    left: 100%;
    -webkit-transform: translate(-100%, -63%);
    -ms-transform: translate(-100%, -63%);
    transform: translate(-100%, -63%);
  }
  .s-xa-100.s-ya-75 img,
  .s-xa-100.s-ya-75 svg {
    position: absolute;
    top: 75%;
    left: 100%;
    -webkit-transform: translate(-100%, -75%);
    -ms-transform: translate(-100%, -75%);
    transform: translate(-100%, -75%);
  }
  .s-xa-100.s-ya-88 img,
  .s-xa-100.s-ya-88 svg {
    position: absolute;
    top: 88%;
    left: 100%;
    -webkit-transform: translate(-100%, -88%);
    -ms-transform: translate(-100%, -88%);
    transform: translate(-100%, -88%);
  }
  .s-xa-100.s-ya-100 img,
  .s-xa-100.s-ya-100 svg {
    position: absolute;
    top: 100%;
    left: 100%;
    -webkit-transform: translate(-100%, -100%);
    -ms-transform: translate(-100%, -100%);
    transform: translate(-100%, -100%);
  }
}
@-webkit-keyframes slideshow-iii {
  0% {
    opacity: 0;
  }
  3.33% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  36.66% {
    opacity: 0;
  }
}
@-webkit-keyframes slideshow-iiii {
  0% {
    opacity: 0;
  }
  2.25% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  27.25% {
    opacity: 0;
  }
}
@-webkit-keyframes slideshow-iiiii {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  22% {
    opacity: 0;
  }
}
@-ms-keyframes slideshow-iii {
  0% {
    opacity: 0;
  }
  3.33% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  36.66% {
    opacity: 0;
  }
}
@-ms-keyframes slideshow-iiii {
  0% {
    opacity: 0;
  }
  2.25% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  27.25% {
    opacity: 0;
  }
}
@-ms-keyframes slideshow-iiiii {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  22% {
    opacity: 0;
  }
}
@keyframes slideshow-iii {
  0% {
    opacity: 0;
  }
  3.33% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  36.66% {
    opacity: 0;
  }
}
@keyframes slideshow-iiii {
  0% {
    opacity: 0;
  }
  2.25% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  27.25% {
    opacity: 0;
  }
}
@keyframes slideshow-iiiii {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  22% {
    opacity: 0;
  }
}
.slideshow {
  overflow: hidden;
  position: relative;
}
.slideshow > img {
  display: block;
  margin-bottom: 6px;
}
.slideshow:not([class*="ya-"]) > img + img {
  top: 0%;
}
.slideshow > img:nth-of-type(2):nth-last-of-type(2) {
  position: absolute;
  opacity: 0;
  -webkit-animation: slideshow-iii 12s linear 4s infinite;
  -ms-animation: slideshow-iii 12s linear 4s infinite;
  animation: slideshow-iii 12s linear 4s infinite;
}
.slideshow > img:nth-of-type(3):nth-last-of-type(1) {
  position: absolute;
  opacity: 0;
  -webkit-animation: slideshow-iii 12s linear 8s infinite;
  -ms-animation: slideshow-iii 12s linear 8s infinite;
  animation: slideshow-iii 12s linear 8s infinite;
}
.slideshow > img:nth-of-type(2):nth-last-of-type(3) {
  position: absolute;
  opacity: 0;
  -webkit-animation: slideshow-iiii 16s linear 4s infinite;
  -ms-animation: slideshow-iiii 16s linear 4s infinite;
  animation: slideshow-iiii 16s linear 4s infinite;
}
.slideshow > img:nth-of-type(3):nth-last-of-type(2) {
  position: absolute;
  opacity: 0;
  -webkit-animation: slideshow-iiii 16s linear 8s infinite;
  -ms-animation: slideshow-iiii 16s linear 8s infinite;
  animation: slideshow-iiii 16s linear 8s infinite;
}
.slideshow > img:nth-of-type(4):nth-last-of-type(1) {
  position: absolute;
  opacity: 0;
  -webkit-animation: slideshow-iiii 16s linear 12s infinite;
  -ms-animation: slideshow-iiii 16s linear 12s infinite;
  animation: slideshow-iiii 16s linear 12s infinite;
}
.slideshow > img:nth-of-type(2):nth-last-of-type(4) {
  position: absolute;
  opacity: 0;
  -webkit-animation: slideshow-iiiii 20s linear 4s infinite;
  -ms-animation: slideshow-iiiii 20s linear 4s infinite;
  animation: slideshow-iiiii 20s linear 4s infinite;
}
.slideshow > img:nth-of-type(3):nth-last-of-type(3) {
  position: absolute;
  opacity: 0;
  -webkit-animation: slideshow-iiiii 20s linear 8s infinite;
  -ms-animation: slideshow-iiiii 20s linear 8s infinite;
  animation: slideshow-iiiii 20s linear 8s infinite;
}
.slideshow img:nth-of-type(4):nth-last-of-type(2) {
  position: absolute;
  opacity: 0;
  -webkit-animation: slideshow-iiiii 20s linear 12s infinite;
  -ms-animation: slideshow-iiiii 20s linear 12s infinite;
  animation: slideshow-iiiii 20s linear 12s infinite;
}
.slideshow img:nth-of-type(5):nth-last-of-type(1) {
  position: absolute;
  opacity: 0;
  -webkit-animation: slideshow-iiiii 20s linear 16s infinite;
  -ms-animation: slideshow-iiiii 20s linear 16s infinite;
  animation: slideshow-iiiii 20s linear 16s infinite;
}
.fade-in::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 1;
  background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}
.fade-out::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 1;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
}
@media screen and (min-width: 1300px) {
  .xl-fade-in::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 1;
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
  }
  .xl-fade-out::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 1;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
  }
}
@media screen and (min-width: 980px) {
  .l-fade-in::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 1;
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
  }
  .l-fade-out::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 1;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .m-fade-in::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 1;
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
  }
  .m-fade-out::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 1;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
  }
}
@media screen and (max-width: 659.9px) {
  .s-fade-in::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 1;
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
  }
  .s-fade-out::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 1;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
  }
}
.visual {
  position: relative;
  overflow: hidden;
}
.visual img,
.visual svg {
  display: block;
}
.visual.align-center img,
.visual.align-center svg {
  margin-left: auto;
  margin-right: auto;
}
/* das ist unlogisch, da es fuer alle 3 Views g?ltig ist, aber l- eigentlich fuer l-View steht */
/* Wann treffen diese Selektoren zu? */
/*
.teaser img[class*=" h-"].l-auto,
.teaser img[class^="h-"].l-auto,
.teaser svg[class*=" h-"].l-auto,
.teaser svg[class^="h-"].l-auto {
    width: auto;
}*/
.scaled.visual img,
.visual img.scaled,
.scaled.visual svg,
.visual svg.scaled {
  width: 100%;
  height: auto;
}
.teaser img[class^="l-"].h-auto,
.teaser img[class*=" l-"].h-auto,
.teaser svg[class^="l-"].h-auto,
.teaser svg[class*=" l-"].h-auto {
  height: auto;
}
@media screen and (min-width: 980px) {
  .teaser img[class*=" l-h-"].l-auto,
  .teaser img[class^="l-h-"].l-auto,
  .teaser svg[class*=" l-h-"].l-auto,
  .teaser svg[class^="l-h-"].l-auto {
    width: auto;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .teaser img[class*=" m-h-"].m-auto,
  .teaser img[class^="m-h-"].m-auto,
  .teaser svg[class*=" m-h-"].m-auto,
  .teaser svg[class^="m-h-"].m-auto {
    width: auto;
  }
}
@media screen and (max-width: 659.9px) {
  .teaser img[class*=" s-h-"].s-auto,
  .teaser img[class^="s-h-"].s-auto,
  .teaser svg[class*=" s-h-"].s-auto,
  .teaser svg[class^="s-h-"].s-auto {
    width: auto;
  }
}
.framed.visual,
.circled.visual,
.squared.visual {
  position: relative;
}
.circled.visual::before {
  content: "";
  position: relative;
  /*padding-left: 100%; macht zusaezlichen Abstand :-( */
  padding-top: 100%;
  margin: 0;
  border-radius: 50%;
  box-shadow: inset #004788 0px 0px 0px 2px;
  box-sizing: border-box;
  display: block;
}
.framed.visual::before,
.squared.visual::before {
  content: "";
  position: relative;
  padding-top: 100%;
  margin: 0;
  border-radius: 4px;
  background-color: #F0F4F8;
  box-sizing: border-box;
  display: block;
}
.framed.visual::before {
  border-radius: 4px;
  background-color: #FFFFFF;
  box-shadow: inset #DADADA 0px 0px 0px 1px;
}
[class*='backdrop-'].inverted .circled.visual::before,
[class*='backdrop-'].inverted .framed.visual::before,
[class*='backdrop-'].inverted .squared.visual::before,
.backdrop-b1-base .circled.visual::before,
.backdrop-b1-base .framed.visual::before,
.backdrop-b1-base .squared.visual::before {
  box-shadow: inset #FFFFFF 0px 0px 0px 2px;
  background-color: transparent;
}
.framed.visual > a,
.circled.visual > a,
.squared.visual > a {
  display: block;
  width: 100%;
  height: 100%;
}
.framed.visual > *,
.circled.visual > *,
.squared.visual > *,
.framed.visual > a > *,
.circled.visual > a > *,
.squared.visual > a > * {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.framed.visual > * + *,
.circled.visual > * + *,
.squared.visual > * + *,
.framed.visual.linked > a > * + *,
.circled.visual.linked > a > * + *,
.squared.visual.linked > a > * + * {
  display: none;
}
/* Wenn Visual verlinkt gibt es einen hover-Effekt */
.circled.visual.linked:hover::before,
.squared.visual.linked:hover::before {
  background: #004788;
}
.framed.visual.linked:hover::before {
  background: #004788;
  box-shadow: inset #004788 0px 0px 0px 1px;
}
.backdrop-b1-base .circled.visual.linked:hover::before,
.backdrop-b1-base .squared.visual.linked:hover::before {
  background: #FFFFFF;
}
.backdrop-b1-base .framed.visual.linked:hover::before {
  background: #FFFFFF;
  box-shadow: inset #FFFFFF 0px 0px 0px 1px;
}
.framed.visual.linked:hover > a > *:first-of-type:not(:last-of-type),
.circled.visual.linked:hover > a > *:first-of-type:not(:last-of-type),
.squared.visual.linked:hover > a > *:first-of-type:not(:last-of-type) {
  display: none;
}
.framed.visual.linked:hover > a > *:last-of-type:not(:first-of-type),
.circled.visual.linked:hover > a > *:last-of-type:not(:first-of-type),
.squared.visual.linked:hover > a > *:last-of-type:not(:first-of-type) {
  display: inline-block;
}
/* vollverlinkte Teaser */
/* Wenn Teaser verlinkt gibt es einen hover-Effekt */
.teaser.linked:hover .circled.visual::before,
.teaser.linked:hover .squared.visual::before {
  background: #004788;
}
.teaser.linked:hover .framed.visual::before {
  background: #004788;
  box-shadow: inset #004788 0px 0px 0px 1px;
}
.backdrop-b1-base .teaser.linked:hover .circled.visual::before,
.backdrop-b1-base .teaser.linked:hover .squared.visual::before,
.teaser.inverted .linked:hover .circled.visual::before,
.teaser.inverted .linked:hover .squared.visual::before {
  background: #FFFFFF;
}
.backdrop-b1-base .teaser.linked:hover .framed.visual::before {
  background: #FFFFFF;
  box-shadow: inset #FFFFFF 0px 0px 0px 1px;
}
.teaser.linked:hover .framed.visual > *:first-of-type:not(:last-of-type),
.teaser.linked:hover .circled.visual > *:first-of-type:not(:last-of-type),
.teaser.linked:hover .squared.visual > *:first-of-type:not(:last-of-type),
.teaser.linked:hover .framed.visual > a > *:first-of-type:not(:last-of-type),
.teaser.linked:hover .circled.visual > a > *:first-of-type:not(:last-of-type),
.teaser.linked:hover .squared.visual > a > *:first-of-type:not(:last-of-type) {
  display: none;
}
.teaser.linked:hover .framed.visual > *:last-of-type:not(:first-of-type),
.teaser.linked:hover .circled.visual > *:last-of-type:not(:first-of-type),
.teaser.linked:hover .squared.visual > *:last-of-type:not(:first-of-type),
.teaser.linked:hover .framed.visual > a > *:last-of-type:not(:first-of-type),
.teaser.linked:hover .circled.visual > a > *:last-of-type:not(:first-of-type),
.teaser.linked:hover .squared.visual > a > *:last-of-type:not(:first-of-type) {
  display: inline-block;
}
/* legt den Content ueber die Backgroundcontainer (z.b. Buttons) */
.teaser .content > *:not(.background) {
  z-index: 1;
}
.no-flex .teaser .content > *:not(.background) {
  position: relative;
}
.content {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.va-start[class] {
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.va-start-self {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.va-end[class] {
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.va-end-self {
  -webkit-align-self: flex-end;
  align-self: flex-end;
}
.va-center[class] {
  -webkit-justify-content: center;
  justify-content: center;
}
.va-center-self {
  -webkit-align-self: center;
  align-self: center;
}
.va-spread[class] {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.va-spread-self {
  -webkit-align-self: stretch;
  align-self: stretch;
}
.overlay-top[class] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 99;
  padding: 16px 20px;
  box-sizing: border-box;
}
.overlay-bottom[class] {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 99;
  padding: 16px 20px;
  box-sizing: border-box;
}
[class*="overlay-"][class*="backdrop"]:not(.opaque)::before {
  opacity: 0.7;
}
body:not(.touch) .overlay-top .hover-content,
body:not(.touch) .overlay-bottom .hover-content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.5s linear;
  -moz-transition: max-height 0.5s linear;
  -ms-transition: max-height 0.5s linear;
  transition: max-height 0.5s linear;
}
body:not(.touch) .h-8.teaser:hover .overlay-top .hover-content,
body:not(.touch) .h-8.teaser:hover .overlay-bottom .hover-content {
  max-height: 310px;
}
body:not(.touch) .h-4.teaser:hover .overlay-top .hover-content,
body:not(.touch) .h-4.teaser:hover .overlay-bottom .hover-content {
  max-height: 160px;
}
/*  */
@media screen and (min-width: 980px) {
  .l-va-start[class] {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
  .l-va-start-self {
    -webkit-align-self: flex-start;
    align-self: flex-start;
  }
  .l-va-end[class] {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
  .l-va-end-self {
    -webkit-align-self: flex-end;
    align-self: flex-end;
  }
  .l-va-center[class] {
    -webkit-justify-content: center;
    justify-content: center;
  }
  .l-va-center-self {
    -webkit-align-self: center;
    align-self: center;
  }
  .l-va-spread[class] {
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .l-va-spread-self {
    -webkit-align-self: stretch;
    align-self: stretch;
  }
  .l-overlay-top[class] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 99;
    padding: 16px 20px;
    box-sizing: border-box;
  }
  .l-overlay-bottom[class] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 99;
    padding: 16px 20px;
    box-sizing: border-box;
  }
  [class*="l-overlay-"][class*="backdrop"]:not(.opaque):not(.l-opaque)::before {
    opacity: 0.7;
  }
  body:not(.touch) [class*="l-overlay-"] .hover-content {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.5s linear;
    -moz-transition: max-height 0.5s linear;
    -ms-transition: max-height 0.5s linear;
    transition: max-height 0.5s linear;
  }
  body:not(.touch) .h-8.teaser:hover [class*="l-overlay-"] .hover-content {
    max-height: 310px;
  }
  body:not(.touch) .h-4.teaser:hover [class*="l-overlay-"] .hover-content {
    max-height: 160px;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .m-va-start[class] {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
  .m-va-start-self {
    -webkit-align-self: flex-start;
    align-self: flex-start;
  }
  .m-va-end[class] {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
  .m-va-end-self {
    -webkit-align-self: flex-end;
    align-self: flex-end;
  }
  .m-va-center[class] {
    -webkit-justify-content: center;
    justify-content: center;
  }
  .m-va-center-self {
    -webkit-align-self: center;
    align-self: center;
  }
  .m-va-spread[class] {
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .m-va-spread-self {
    -webkit-align-self: stretch;
    align-self: stretch;
  }
  .m-overlay-top[class] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 99;
    padding: 16px 20px;
    box-sizing: border-box;
  }
  .m-overlay-bottom[class] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 99;
    padding: 16px 20px;
    box-sizing: border-box;
  }
  [class*="m-overlay-"][class*="backdrop"]:not(.opaque):not(.m-opaque)::before {
    opacity: 0.7;
  }
  body:not(.touch) [class*="m-overlay-"] .hover-content {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.5s linear;
    -moz-transition: max-height 0.5s linear;
    -ms-transition: max-height 0.5s linear;
    transition: max-height 0.5s linear;
  }
  body:not(.touch) .h-8.teaser:hover [class*="m-overlay-"] .hover-content {
    max-height: 310px;
  }
  body:not(.touch) .h-4.teaser:hover [class*="m-overlay-"] .hover-content {
    max-height: 160px;
  }
}
@media screen and (max-width: 659.9px) {
  .s-va-start[class] {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
  .s-va-start-self {
    -webkit-align-self: flex-start;
    align-self: flex-start;
  }
  .s-va-end[class] {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
  .s-va-end-self {
    -webkit-align-self: flex-end;
    align-self: flex-end;
  }
  .s-va-center[class] {
    -webkit-justify-content: center;
    justify-content: center;
  }
  .s-va-center-self {
    -webkit-align-self: center;
    align-self: center;
  }
  .s-va-spread[class] {
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .s-va-spread-self {
    -webkit-align-self: stretch;
    align-self: stretch;
  }
  .s-overlay-top[class] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 99;
    padding: 16px 20px;
    box-sizing: border-box;
  }
  .s-overlay-bottom[class] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 99;
    padding: 16px 20px;
    box-sizing: border-box;
  }
  [class*="s-overlay-"][class*="backdrop"]:not(.opaque):not(.s-opaque)::before {
    opacity: 0.7;
  }
  body:not(.touch) [class*="s-overlay-"] .hover-content {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.5s linear;
    -moz-transition: max-height 0.5s linear;
    -ms-transition: max-height 0.5s linear;
    transition: max-height 0.5s linear;
  }
  body:not(.touch) .h-8.teaser:hover [class*="s-overlay-"] .hover-content {
    max-height: 310px;
  }
  body:not(.touch) .h-4.teaser:hover [class*="s-overlay-"] .hover-content {
    max-height: 160px;
  }
}
/* Zentrierung von Bildern innerhalb des Teaser-Contents */
.teaser .content img.center {
  margin-left: auto;
  margin-right: auto;
}
.teaser > *:not(.background) + .content:not(.overlay-top):not(.overlay-bottom) {
  padding-top: 14px;
}
.teaser > .teaser-headline {
  padding-top: 10px;
  padding-bottom: 20px;
}
.teaser > .teaser-headline + .content:not(.overlay-top):not(.overlay-bottom),
.teaser.horizontal > *:not(.background) + .content:not(.overlay-top):not(.overlay-bottom) {
  padding-top: 0;
}
@media screen and (min-width: 980px) {
  .teaser.l-horizontal > *:not(.background) + .content:not(.overlay-top):not(.overlay-bottom) {
    padding-top: 0;
  }
}
/* vollbreiter m-8 Content unterhalb vom Visual benoetigt Abstand nach oben => :not(m-8) */
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .teaser.m-horizontal > *:not(.background) + .content:not(.overlay-top):not(.overlay-bottom):not(.m-8) {
    padding-top: 0;
  }
}
@media screen and (max-width: 659.9px) {
  .teaser.s-horizontal > *:not(.background) + .content:not(.overlay-top):not(.overlay-bottom) {
    padding-top: 0;
  }
}
.teaser:not(.tiled) .content > * {
  margin-bottom: 10px;
}
.teaser .content > *.background,
.teaser .content > *:last-child {
  margin-bottom: 0;
}
.teaser[class] .content p .button {
  margin-top: 4px;
}
/* Anpassungen fuer Akkordeon im Teaser-Content */
/* Beispiel siehe paymail/page-rate-comparison in cat-proj-products */
.teaser .content > .akkordeon {
  margin-bottom: 0;
}
.teaser .content > .akkordeon .summary,
.teaser .content > .akkordeon .akkordeon-content {
  padding-left: 0;
  padding-right: 0;
}
.teaser .content > .akkordeon .summary:hover {
  background-color: transparent;
}
.teaser .content > .akkordeon .akkordeon-content,
.teaser .content > .akkordeon .akkordeon-content *:first-child {
  padding-top: 0;
}
/**/
/* Expandable Modul */
/* expandable: Zentrierter Container Groesse l-12 (ohne fix!), der die Teaser + Info-Boxen mit Teaser-Inhalten enthaelt
   expander: Teaser mit 'mehr'-Link, der die Info-Boxen oeffnet
   expanding: Fullsize Info-Box, die geoeffent wird, mit Teaser-Inhalt
   Vorrausetzung: Pro expandable-Container (l-12) gibt es:
   2 expander-Module (l-6),
   2 expanding-Info-Module,
   1 expanding-noflex Fallback-Info-Modul (noetig wegen IE9 + aelteren androids, Klasse no-flex im body)
   Der Inhalt des noflex-Fallbacks entspricht dem Inhalt des linken Info-Teasers.
   Reihenfolge im HTML-Code pro expandable-Container:
   teaser_module_01
   infobox_01
   teaser_module_02
   infobox_02
   infobox_01_noflex
*/
/* Festlegen der Reihenfolge im l-/m-View */
.expandable .expander {
  order: 1;
}
.expandable .expanding {
  order: 2;
}
.expandable .expanding {
  padding-top: 20px;
  padding-bottom: 20px;
}
.expandable .expanding .teaser {
  margin-bottom: 20px;
  margin-top: 20px;
}
.expandable.group-content:last-child .expanding {
  margin-bottom: -40px;
}
/* Festlegen der Reihenfolge im s-View */
@media screen and (max-width: 659.9px) {
  .expandable .expander.s-4,
  .expandable .expander.s-4 + .expanding {
    order: 1;
  }
  /* Bugfix for DP-12908 - MMNAPPSRVS-4275 */
  .expandable.group-content:last-child .expanding {
    margin-bottom: 20px;
  }
  .expandable.group-content:last-child .expanding:nth-child(4) {
    margin-bottom: -40px;
  }
}
/* Fallback ausblenden */
body:not(.no-flex) .expandable .expanding-noflex {
  display: none;
}
/* no-flex - Fall => Fallback wird eingeblendet */
@media screen and (min-width: 660px) {
  .no-flex .l-12.expandable .expander.l-6:nth-child(4n+1) + .expanding {
    display: none !important;
  }
}
/* no-flex - Fall => Zentrierung analog ie9 */
.no-flex .container.ie-center > .teaser {
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.no-flex .container.ie-center > .teaser > .content.module {
  float: none;
  display: inline-block;
}
/* Positionierun der Nase: in s-View immer zentriert */
.expandable .expanding .teaser::before {
  content: "";
  position: absolute;
  top: -52px;
  left: 50%;
  margin-left: -12px;
  width: 0;
  height: 0;
  border: 0;
  border-bottom: 12px solid #004788;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}
/* Positionierung des Close-Icons */
.expandable .expanding .close {
  right: 10px;
  top: 10px;
  position: absolute;
  z-index: 1;
}
@media screen and (max-width: 959.9px) {
  .expandable .expanding .teaser::before {
    top: -62px;
  }
  .expandable .expanding {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media screen and (min-width: 980px) {
  /* Nase mittig zum darueberliegenden l-6 Modul bei eigener l-8 Breite */
  .l-12.expandable .expander.l-6:nth-child(4n+1) + .expanding .teaser.l-8::before,
  .l-12.expandable .expander.l-6:nth-child(4n+3) + .expanding + .expanding-noflex .teaser.l-8::before {
    left: 12.5%;
  }
  .l-12.expandable .expander.l-6:nth-child(4n+3) + .expanding .teaser.l-8::before {
    left: 87.5%;
  }
  /* Nase mittig zum darueberliegenden l-6 Modul bei eigener l-12 Breite */
  .l-12.expandable .expander.l-6:nth-child(4n+1) + .expanding .teaser.l-12::before,
  .l-12.expandable .expander.l-6:nth-child(4n+3) + .expanding + .expanding-noflex .teaser.l-12::before {
    left: 25%;
  }
  .l-12.expandable .expander.l-6:nth-child(4n+3) + .expanding .teaser.l-12::before {
    left: 75%;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  /* Nase mittig zum darueberliegenden m-4 Modul bei eigener m/l-8 Breite */
  .l-12.expandable .expander.m-4:nth-child(4n+1) + .expanding .teaser.l-8::before,
  .l-12.expandable .expander.m-4:nth-child(4n+1) + .expanding .teaser.m-8::before,
  .l-12.expandable .expander.m-4:nth-child(4n+3) + .expanding + .expanding-noflex .teaser.l-8::before,
  .l-12.expandable .expander.m-4:nth-child(4n+3) + .expanding + .expanding-noflex .teaser.m-8::before {
    left: 25%;
  }
  .l-12.expandable .expander.m-4:nth-child(4n+3) + .expanding .teaser.l-8::before,
  .l-12.expandable .expander.m-4:nth-child(4n+3) + .expanding .teaser.m-8::before {
    left: 75%;
  }
  /* Nase mittig zum darueberliegenden m-4 Modul bei eigener m-6 Breite */
  .l-12.expandable .expander.m-4:nth-child(4n+1) + .expanding .teaser.m-6::before,
  .l-12.expandable .expander.m-4:nth-child(4n+3) + .expanding + .expanding-noflex .teaser.m-6::before {
    left: 16.66%;
  }
  .l-12.expandable .expander.m-4:nth-child(4n+3) + .expanding .teaser.m-6::before {
    left: 83.34%;
  }
}
/**/
.no-flex .teaser .content .module {
  float: none;
}
.no-flex .teaser:not(.horizontal) .module.visual.center {
  float: none;
}
@media screen and (min-width: 980px) {
  .no-flex .teaser.l-horizontal .module.visual.center {
    float: left;
  }
  .no-flex .teaser:not(.l-horizontal):not(.horizontal) .module.visual.center {
    float: none;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .no-flex .teaser.m-horizontal .module.visual.center {
    float: left;
  }
  .no-flex .teaser:not(.m-horizontal):not(.horizontal) .module.visual.center {
    float: none;
  }
}
@media screen and (max-width: 659.9px) {
  .no-flex .teaser.s-horizontal .module.visual.center {
    float: left;
  }
  .no-flex .teaser:not(.s-horizontal):not(.horizontal) .module.visual.center {
    float: none;
  }
}
/* 3 Cols Teaser - Comparison */
/* [WIP] Spacefix - Teaser with tip after groupheadline / sectionheadline needs more space */
/* Wireframe Teaser with tip */
@media screen and (min-width: 980px) {
  .grid > .container:not(.hero):not(.carousel) .section-headline + .group-content > .tip {
    margin-top: 32px;
  }
  .grid > .container:not(.hero):not(.carousel) .group-headline + .group-content > .tip {
    margin-top: 56px;
  }
}
/* provides that more than one teaser can be highlighted */
.backdrop-b1-light82 + .backdrop-b1-light82:not(:hover)::before,
.backdrop-b1-light82 + .wireframe + .backdrop-b1-light82:not(:hover)::before {
  background-color: #F0F4F8;
}
/* Wireframe Teaser */
.teaser.wireframe {
  box-sizing: border-box;
  border-left: 1px #FFFFFF solid;
  border-right: 1px #FFFFFF solid;
  padding-bottom: 10px;
  /* shield */
  /* TIP V1 */
  /* Price format */
}
[class*='backdrop-'].inverted .teaser.wireframe {
  border-left: 1px transparent solid;
  border-right: 1px transparent solid;
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .teaser.wireframe.m-horizontal {
    border-left-width: 0px;
    border-right-width: 0px;
    padding-bottom: 0px;
  }
}
.teaser.wireframe.step {
  align-self: flex-start;
}
.teaser.wireframe > .content[class][class] {
  align-self: center;
  flex-grow: 1;
}
.teaser.wireframe > .content > *:last-child {
  align-self: stretch;
  margin-top: auto;
}
.teaser.wireframe > .content .bottom-text {
  font-size: 14px;
}
.teaser.wireframe .list {
  padding-left: 55px;
  padding-right: 25px;
}
.teaser.wireframe .list.bonus {
  background-color: #FBEBB3;
  border-radius: 4px;
  font-family: 'DroidRegular', Arial, sans-serif;
  font-size: 20px;
  line-height: 28px;
  margin-top: 10px;
  margin-bottom: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.teaser.wireframe .list.bonus img {
  position: absolute;
  left: -32px;
  top: 9px;
}
.teaser.wireframe .list.simplelink,
.teaser.wireframe .list.simplelink li {
  padding: 0;
}
.teaser.wireframe .visual.shield {
  align-self: flex-start;
}
.teaser.wireframe .visual.shield > * {
  background-color: #FFFFFF;
}
.teaser.wireframe .visual.shield-down::after {
  content: "";
  position: relative;
  display: block;
  width: 0px;
  height: 0px;
  top: unset;
  right: 0px;
  bottom: 0px;
  left: unset;
  border-top: 20px solid #FFFFFF;
  border-right: 150px solid transparent;
  border-bottom: none;
  border-left: 150px solid transparent;
}
.teaser.wireframe .visual.shield-up::before {
  content: "";
  position: relative;
  display: block;
  width: 0px;
  height: 0px;
  top: 0px;
  right: unset;
  bottom: unset;
  left: 0px;
  border-top: none;
  border-right: 150px solid transparent;
  border-bottom: 20px solid #FFFFFF;
  border-left: 150px solid transparent;
}
.teaser.wireframe .visual.shield-left::before {
  content: "";
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  top: 50%;
  right: unset;
  bottom: unset;
  left: 0px;
  border-top: 150px solid transparent;
  border-right: 10px solid #FFFFFF;
  border-bottom: 150px solid transparent;
  border-left: none;
  transform: translateY(-50%);
}
.teaser.wireframe .visual.shield-right::after {
  content: "";
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  top: 50%;
  right: 0px;
  bottom: unset;
  left: unset;
  border-top: 150px solid transparent;
  border-right: none;
  border-bottom: 150px solid transparent;
  border-left: 10px solid #FFFFFF;
  transform: translateY(-50%);
}
@media screen and (min-width: 980px) {
  .teaser.wireframe .visual.l-shield-down::after {
    content: "";
    position: relative;
    display: block;
    width: 0px;
    height: 0px;
    top: unset;
    right: 0px;
    bottom: 0px;
    left: unset;
    border-top: 20px solid #FFFFFF;
    border-right: 150px solid transparent;
    border-bottom: none;
    border-left: 150px solid transparent;
  }
  .teaser.wireframe .visual.l-shield-up::before {
    content: "";
    position: relative;
    display: block;
    width: 0px;
    height: 0px;
    top: 0px;
    right: unset;
    bottom: unset;
    left: 0px;
    border-top: none;
    border-right: 150px solid transparent;
    border-bottom: 20px solid #FFFFFF;
    border-left: 150px solid transparent;
  }
  .teaser.wireframe .visual.l-shield-left::before {
    content: "";
    position: absolute;
    display: block;
    width: 0px;
    height: 0px;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 0px;
    border-top: 150px solid transparent;
    border-right: 10px solid #FFFFFF;
    border-bottom: 150px solid transparent;
    border-left: none;
    transform: translateY(-50%);
  }
  .teaser.wireframe .visual.l-shield-right::after {
    content: "";
    position: absolute;
    display: block;
    width: 0px;
    height: 0px;
    top: 50%;
    right: 0px;
    bottom: unset;
    left: unset;
    border-top: 150px solid transparent;
    border-right: none;
    border-bottom: 150px solid transparent;
    border-left: 10px solid #FFFFFF;
    transform: translateY(-50%);
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .teaser.wireframe .visual.m-shield-down::after {
    content: "";
    position: relative;
    display: block;
    width: 0px;
    height: 0px;
    top: unset;
    right: 0px;
    bottom: 0px;
    left: unset;
    border-top: 20px solid #FFFFFF;
    border-right: 150px solid transparent;
    border-bottom: none;
    border-left: 150px solid transparent;
  }
  .teaser.wireframe .visual.m-shield-up::before {
    content: "";
    position: relative;
    display: block;
    width: 0px;
    height: 0px;
    top: 0px;
    right: unset;
    bottom: unset;
    left: 0px;
    border-top: none;
    border-right: 150px solid transparent;
    border-bottom: 20px solid #FFFFFF;
    border-left: 150px solid transparent;
  }
  .teaser.wireframe .visual.m-shield-left::before {
    content: "";
    position: absolute;
    display: block;
    width: 0px;
    height: 0px;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 0px;
    border-top: 150px solid transparent;
    border-right: 10px solid #FFFFFF;
    border-bottom: 150px solid transparent;
    border-left: none;
    transform: translateY(-50%);
  }
  .teaser.wireframe .visual.m-shield-right::after {
    content: "";
    position: absolute;
    display: block;
    width: 0px;
    height: 0px;
    top: 50%;
    right: 0px;
    bottom: unset;
    left: unset;
    border-top: 150px solid transparent;
    border-right: none;
    border-bottom: 150px solid transparent;
    border-left: 10px solid #FFFFFF;
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 659.9px) {
  .teaser.wireframe .visual.s-shield-down::after {
    content: "";
    position: relative;
    display: block;
    width: 0px;
    height: 0px;
    top: unset;
    right: 0px;
    bottom: 0px;
    left: unset;
    border-top: 20px solid #FFFFFF;
    border-right: 150px solid transparent;
    border-bottom: none;
    border-left: 150px solid transparent;
  }
  .teaser.wireframe .visual.s-shield-up::before {
    content: "";
    position: relative;
    display: block;
    width: 0px;
    height: 0px;
    top: 0px;
    right: unset;
    bottom: unset;
    left: 0px;
    border-top: none;
    border-right: 150px solid transparent;
    border-bottom: 20px solid #FFFFFF;
    border-left: 150px solid transparent;
  }
  .teaser.wireframe .visual.s-shield-left::before {
    content: "";
    position: absolute;
    display: block;
    width: 0px;
    height: 0px;
    top: 50%;
    right: unset;
    bottom: unset;
    left: 0px;
    border-top: 150px solid transparent;
    border-right: 10px solid #FFFFFF;
    border-bottom: 150px solid transparent;
    border-left: none;
    transform: translateY(-50%);
  }
  .teaser.wireframe .visual.s-shield-right::after {
    content: "";
    position: absolute;
    display: block;
    width: 0px;
    height: 0px;
    top: 50%;
    right: 0px;
    bottom: unset;
    left: unset;
    border-top: 150px solid transparent;
    border-right: none;
    border-bottom: 150px solid transparent;
    border-left: 10px solid #FFFFFF;
    transform: translateY(-50%);
  }
}
.teaser.wireframe .visual > strong,
.teaser.wireframe .visual > h3,
.teaser.wireframe .visual > h4 {
  display: block;
  padding-top: 16px;
  font-weight: 400;
}
.teaser.wireframe[class*="backdrop"][data-tip-content] {
  position: relative;
  border-radius: 0px 0px 4px 4px;
}
.teaser.wireframe[class*="backdrop"][data-tip-content]::before {
  border-radius: 0px 0px 4px 4px;
}
.teaser.wireframe[class*="backdrop"][data-tip-content]::after {
  content: attr(data-tip-content);
  border-radius: 4px 4px 0px 0px;
  text-transform: uppercase;
  font-family: DroidRegular;
  font-size: 16px;
  color: #FFFFFF;
  background-color: #004788;
  position: absolute;
  display: block;
  line-height: 24px;
  text-align: center;
  top: -34px;
  right: 0px;
  width: 100%;
  height: 24px;
}
.teaser.wireframe[class*="backdrop"][data-tip-content].tip-big::after {
  line-height: 40px;
  height: 40px;
  top: -50px;
}
@media screen and (max-width: 979.9px) {
  .teaser.wireframe[class*="backdrop"][data-tip-content][class][class][class] {
    margin-top: 44px;
  }
  .teaser.wireframe[class*="backdrop"][data-tip-content].tip-big::after {
    line-height: 24px;
    height: 24px;
    top: -34px;
  }
}
.teaser.wireframe[class*="backdrop-b1-light82"][data-tip-content]::after {
  line-height: 40px;
  height: 40px;
  top: -50px;
}
@media screen and (max-width: 979.9px) {
  .teaser.wireframe[class*="backdrop-b1-light82"][data-tip-content]::after {
    line-height: 24px;
    height: 24px;
    top: -34px;
  }
}
.teaser.wireframe .price.xxl {
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 700;
}
.teaser.wireframe .price.xxl .supplement {
  display: block;
  font-weight: 400;
  margin-top: -4px;
  line-height: 18px;
}
.teaser.wireframe .price.xxl strong,
.teaser.wireframe .price.xxl em {
  font-style: normal;
}
.teaser.wireframe .price.xxl strong sup,
.teaser.wireframe .price.xxl em sup {
  display: inline-block;
  position: relative;
  top: unset;
}
.teaser.wireframe .price.xxl strong sup.size-1,
.teaser.wireframe .price.xxl em sup.size-1 {
  top: -34px;
  left: -8px;
}
.teaser.wireframe .price.xxl strong sup.size-2,
.teaser.wireframe .price.xxl em sup.size-2 {
  left: 10px;
}
.teaser.wireframe .price.xxl strong sub,
.teaser.wireframe .price.xxl em sub {
  position: relative;
  left: 8px;
  bottom: 4px;
}
.teaser.wireframe .price.xxl strong span + sup:before,
.teaser.wireframe .price.xxl em span + sup:before {
  content: ',';
  position: absolute;
  top: 28px;
  left: -8px;
}
[lang="en"] .teaser.wireframe .price.xxl strong span + sup:before,
[lang="en"] .teaser.wireframe .price.xxl em span + sup:before {
  content: '.';
}
.teaser.wireframe .price.xxl strong span + sub.size-2,
.teaser.wireframe .price.xxl em span + sub.size-2 {
  margin-left: 0px;
}
@media screen and (max-width: 979.9px) {
  .teaser.wireframe .price.xxl strong sup.size-1,
  .teaser.wireframe .price.xxl em sup.size-1 {
    top: -20px;
  }
  .teaser.wireframe .price.xxl strong sup.size-5,
  .teaser.wireframe .price.xxl em sup.size-5 {
    top: -12px;
    left: 10px;
  }
  .teaser.wireframe .price.xxl strong sub,
  .teaser.wireframe .price.xxl em sub {
    left: unset;
    margin-left: -16px;
  }
  .teaser.wireframe .price.xxl strong sub.size-2,
  .teaser.wireframe .price.xxl em sub.size-2 {
    font-size: 14px;
  }
  .teaser.wireframe .price.xxl strong span + sup:before,
  .teaser.wireframe .price.xxl em span + sup:before {
    top: 14px;
    left: -10px;
  }
}
.teaser.wireframe .price.xxl {
  font-size: 100%;
}
_:-ms-lang(x) sub,
:root .teaser.wireframe .price.xxl em sub {
  margin-left: -24px;
}
_:-ms-lang(x) span + sup:before,
:root .teaser.wireframe .price.xxl em span + sup:before {
  top: 30px;
}
@media screen and (max-width: 979.9px) {
  _:-ms-lang(x) sup,
  :root .teaser.wireframe .price.xxl em sup {
    bottom: 8px;
  }
  _:-ms-lang(x) span + sup:before,
  :root .teaser.wireframe .price.xxl em span + sup:before {
    top: 18px;
  }
  _:-ms-lang(x) sub,
  :root .teaser.wireframe .price.xxl em sub {
    margin-left: -20px;
  }
}
/** Feature - Tip above teaser*/
.teaser[data-tip-content]:not(.wireframe) {
  padding-top: 32px;
}
.teaser[data-tip-content]:not(.wireframe):after {
  content: attr(data-tip-content);
  position: absolute;
  display: block;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-family: 'DroidRegular', Arial, sans-serif;
  font-size: 16px;
  color: transparent;
  background-color: transparent;
  line-height: 32px;
  text-align: center;
  top: 0px;
  left: 10px;
  width: calc(100% - 20px);
  height: 32px;
}
.teaser[data-tip-content]:not(.wireframe)[data-tip-color="theme-d1-base"]:after {
  color: #FFFFFF;
  background-color: #D40000;
}
.teaser[data-tip-content]:not(.wireframe)[data-tip-color="theme-d2-light82"]:after {
  color: #525252;
  background-color: #FCF3D1;
}
.teaser[data-tip-content]:not(.wireframe)[data-tip-color="theme-d3-base"]:after {
  color: #FFFFFF;
  background-color: #5CB82A;
}
.teaser[data-tip-content]:not(.wireframe)[data-tip-color="theme-d4-light82"]:after {
  color: #525252;
  background-color: #D6EAF8;
}
/** Hotfix - alignment problem of the text-rich-table */
.teaser .bottom-text table tr td:first-child {
  text-align: left;
}
.teaser .visual [data-cm="chip"] {
  position: absolute;
  left: 0;
  top: 0;
  margin: 8px 0 0 8px;
}
.teaser .visual.module [data-cm="chip"] {
  left: 10px;
  max-width: calc(100% -  10px * 2 + 8px * 2);
}
.teaser .visual.circled [data-cm="chip"],
.teaser .visual.framed [data-cm="chip"],
.teaser .visual.squared [data-cm="chip"] {
  display: block;
  text-align: center;
  margin: 16px 0 0;
  left: 50%;
}
.teaser[data-cc*="teaser-xl"] [data-cm="chip"] {
  margin: 16px 0 0 16px;
}
/* cat - akkordeon - 1.5.6 */
/**
 * Information about the accordion begins with an icon:
 *  - there should be only one icon before the headline of summary
 *  - the sizes of icons could only be: xs->16px(default), s->20px, m->24px, l->32px, xl->40px,
 *    xxl->48px, x3l->56px, x4l->64px, x5l->72px, x6l->96px, x7l->128px, x8l->192px, x9l->256px
 *  - Option:
 *      - vertical: by setting class "vertical" in summary, the icon will jump above the headline
 */
.akkordeon {
  display: block;
  overflow: hidden;
  padding: 0px;
  border-top: 1px solid #DADADA;
  border-bottom: 1px solid #DADADA;
}
[class*='backdrop-e1-corn'] .akkordeon {
  border-top: 1px solid #525252;
  border-bottom: 1px solid #525252;
}
[class*='backdrop-'].inverted .akkordeon {
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}
.fullwidth.akkordeon {
  padding-left: 0px;
  padding-right: 0px;
}
[class][class] .akkordeon + .akkordeon,
.akkordeon + .akkordeon {
  border-top: none;
}
.akkordeon > *:first-child {
  cursor: pointer;
  outline: none;
  list-style: none;
  /* Firefox 48+ styles summary as a list to add the marker */
}
.backdrop-b1-base .akkordeon,
.backdrop-b1-base .akkordeon a {
  color: #FFFFFF;
}
.backdrop-c2-light94 .akkordeon {
  color: #333333;
}
/*
 * Akkordeonm mit hover - um nur bei der Überschrift (summary) Hintergrund bei hover zu ändern,
 * müssen wir die Abstände im Akkordeon anderes formulieren
 */
.akkordeon .summary {
  padding: 7px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  width: 100%;
  box-sizing: border-box;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
}
.akkordeon .summary:hover {
  background-color: #D1DEEA;
}
[class*='backdrop-'].inverted .akkordeon .summary:hover {
  background-color: rgba(255, 255, 255, 0.7);
}
[class*='backdrop-'].inverted .akkordeon .summary:hover h3,
[class*='backdrop-'].inverted .akkordeon .summary:hover h4,
[class*='backdrop-'].inverted .akkordeon .summary:hover strong {
  color: #333333;
}
.backdrop-b1-base .akkordeon .summary:hover,
.backdrop-b1-base .akkordeon .summary:hover > * {
  color: #525252;
}
.akkordeon .summary > strong {
  font-weight: 400;
}
.akkordeon .summary h1,
.akkordeon .summary h2 {
  color: inherit;
}
.akkordeon .summary > .icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-item-align: start;
  align-self: flex-start;
  position: relative;
}
.akkordeon .summary > .icon.xs {
  top: 6px;
}
.akkordeon .summary > .icon.s {
  top: 4px;
}
.akkordeon .summary > .icon.m {
  top: 2px;
}
.akkordeon .summary > *:not(.icon) {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.akkordeon .summary > .icon + * {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  padding-left: 10px;
}
.akkordeon:not(.login) .akkordeon-content {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
}
.akkordeon .akkordeon-content > * {
  margin-bottom: 10px;
}
.js .akkordeon > *:first-child > *:first-of-type:not(.icon):before {
  content: "";
  background: url(//img.ui-portal.de/cd/ci/mail.com/brand-410.svg) no-repeat 0% 0%, url(//img.ui-portal.de/cd/ci/mail.com/service-410.svg) no-repeat 0% 0%;
  background-size: auto 2592px, auto 2592px;
  background-position: 75% 1.25%;
  width: 32px;
  height: 32px;
  display: inline-block;
  float: right;
  margin-top: 0px;
  margin-bottom: -4px;
  margin-left: 20px;
  color: transparent;
  transition: -webkit-transform 0.3s ease-in-out;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.backdrop-b1-base .akkordeon > *:first-child *:first-of-type:not(.icon):before,
.inverted .akkordeon > *:first-child *:first-of-type:not(.icon):before,
.inverted.akkordeon > *:first-child *:first-of-type:not(.icon):before {
  background-position: 25% 1.25%;
}
.backdrop-c2-light94 .akkordeon > *:first-child *:first-of-type:not(.icon):before,
.secondary.akkordeon > *:first-child *:first-of-type:not(.icon):before {
  background-position: 50% 1.25%;
}
[class*='backdrop-'].inverted .akkordeon .summary:hover > *:first-of-type:not(.icon):before,
.backdrop-b1-base .akkordeon .summary:hover > *:first-of-type:not(.icon):before {
  background-position: 75% 1.25%;
}
/* Optional headline icon */
.akkordeon > *:first-child > *:first-of-type.icon,
[class*='backdrop-'].inverted .akkordeon > .summary:hover > *:first-of-type.icon,
.backdrop-b1-base .akkordeon > .summary:hover > *:first-of-type.icon {
  background-position-x: 75%;
}
[class*='backdrop-'].inverted .akkordeon > *:first-child > *:first-of-type.icon,
.backdrop-b1-base .akkordeon > *:first-child *:first-of-type.icon {
  background-position-x: 25%;
}
[class*='backdrop-'].inverted .akkordeon > .summary:hover > *:first-of-type.icon,
[class*='backdrop-'].inverted .akkordeon .summary:hover > *:first-of-type:not(.icon):before {
  background-position-x: 0%;
}
.akkordeon[open] > *:first-child *:first-of-type:not(.icon):before,
.js .akkordeon.open > *:first-child *:first-of-type:not(.icon):before,
.inverted .akkordeon[open] > *:first-child *:first-of-type:not(.icon):before,
.js .inverted .akkordeon.open > *:first-child *:first-of-type:not(.icon):before,
.inverted.akkordeon[open] > *:first-child *:first-of-type:not(.icon):before,
.js .inverted.akkordeon.open > *:first-child *:first-of-type:not(.icon):before,
.secondary.akkordeon[open] > *:first-child *:first-of-type:not(.icon):before,
.js .secondary.akkordeon.open > *:first-child *:first-of-type:not(.icon):before {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.akkordeon[open].rotateZ > *:first-child *:first-of-type:not(.icon):before,
.js .akkordeon.open.rotateZ > *:first-child *:first-of-type:not(.icon):before {
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}
.js .akkordeon summary::-webkit-details-marker {
  display: none;
}
.js .akkordeon summary::-o-details-marker {
  display: none;
}
.js .akkordeon summary::-moz-details-marker {
  display: none;
}
.js .akkordeon summary::details-marker {
  display: none;
}
/*
 * Nötig, um vspace direkt in einem'module'-Container anwenden zu können, welcher die Akkordeon-
 * 'details'-Container umschließt.
 */
.vspace-l > .akkordeon,
.vspace-s > .akkordeon,
.vspace-xs > .akkordeon {
  margin-bottom: 0px;
}
.vspace-l > .akkordeon:last-child {
  margin-bottom: 30px;
}
.vspace-s > .akkordeon:last-child {
  margin-bottom: 20px;
}
.vspace-xs > .akkordeon:last-child {
  margin-bottom: 10px;
}
/* vspace im Akkordeon */
.akkordeon:not(.open):not([open])[class*=" vspace-"] > *:first-child,
.akkordeon:not(.open):not([open])[class^="vspace-"] > *:first-child {
  margin-bottom: 0px !important;
}
/* Option - vertical: icon jump above the headline if summary has a class vertical */
.akkordeon .summary.vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.akkordeon .summary.vertical > .icon {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}
.akkordeon .summary.vertical > .icon + * {
  padding-left: 0px;
  padding-top: 10px;
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
}
@media screen and (min-width: 980px) {
  .js .akkordeon:not([open]):not(.l-disable) > *:first-child ~ * {
    display: none;
  }
  .akkordeon.l-disable {
    border: none;
  }
  .akkordeon.l-disable > *:first-child {
    cursor: default;
  }
  .akkordeon.l-disable > *:first-child:focus {
    outline: none;
  }
  .akkordeon.l-disable + .akkordeon {
    border-top: 1px solid #DADADA;
  }
  .akkordeon.l-disable + .akkordeon.l-disable {
    border-top: none;
  }
  .js .akkordeon.l-disable > *:first-child ~ * {
    position: relative;
    top: auto;
  }
  .js .akkordeon.l-disable > *:first-of-type:before {
    content: none;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .js .akkordeon:not([open]):not(.m-disable) > *:first-child ~ * {
    display: none;
  }
  .akkordeon.m-disable {
    border: none;
  }
  .akkordeon.m-disable > *:first-child {
    cursor: default;
  }
  .akkordeon.m-disable > *:first-child:focus {
    outline: none;
  }
  .akkordeon.m-disable + .akkordeon {
    border-top: 1px solid #DADADA;
  }
  .akkordeon.m-disable + .akkordeon.m-disable {
    border-top: none;
  }
  .js .akkordeon.m-disable > *:first-child ~ * {
    position: relative;
    top: auto;
  }
  .js .akkordeon.m-disable > *:first-child > *:first-of-type:not(.icon):before {
    content: none;
  }
}
@media screen and (max-width: 659.9px) {
  .js .akkordeon:not([open]):not(.s-disable) > *:first-child ~ * {
    display: none;
  }
  .akkordeon.s-disable {
    border: none;
  }
  .akkordeon.s-disable > *:first-child {
    cursor: default;
  }
  .akkordeon.s-disable > *:first-child:focus {
    outline: none;
  }
  .akkordeon.s-disable + .akkordeon {
    border-top: 1px solid #DADADA;
  }
  .akkordeon.s-disable + .akkordeon.s-disable {
    border-top: none;
  }
  .js .akkordeon.s-disable > *:first-child ~ * {
    position: relative;
    top: auto;
  }
  .js .akkordeon.s-disable > *:first-child > *:first-of-type:not(.icon):before {
    content: none;
  }
}
/* Accordion as impress or even in footer */
#footer .akkordeon,
.akkordeon.impress,
.akkordeon.login {
  border: none;
}
#footer .akkordeon .summary:hover,
.akkordeon.impress .summary:hover {
  background-color: transparent;
}
#footer .backdrop-b1-base .akkordeon .summary:hover,
#footer .backdrop-b1-base .akkordeon .summary:hover > *,
.backdrop-b1-base .akkordeon.impress .summary:hover {
  color: #FFFFFF;
}
#footer .backdrop-b1-base .akkordeon > *:first-child *:first-of-type:not(.icon):before,
.backdrop-b1-base .akkordeon.impress > *:first-child *:first-of-type:not(.icon):before {
  background-position: 25% 1.25%;
}
#footer .akkordeon .summary,
#footer .akkordeon .akkordeon-content,
#footer .akkordeon .akkordeon-content > *,
#footer .akkordeon > .akkordeon-content > .container > .module:first-child,
#footer .akkordeon > .akkordeon-content > .container > .module:last-child,
.akkordeon.impress .summary,
.akkordeon.impress .akkordeon-content,
.akkordeon.impress .akkordeon-content > *,
.akkordeon.impress > .akkordeon-content > .container > .module:first-child,
.akkordeon.impress > .akkordeon-content > .container > .module:last-child,
#footer .backdrop-c2-light94.inverted .akkordeon .summary,
#footer .backdrop-c2-light94 .inverted.akkordeon .summary,
.backdrop-c2-light94.inverted .akkordeon.impress .summary,
.backdrop-c2-light94 .inverted.akkordeon.impress .summary {
  padding-left: 0px;
  padding-right: 0px;
}
#footer .akkordeon .summary,
.akkordeon.impress .summary {
  padding-top: 38px;
  padding-bottom: 38px;
}
#footer .backdrop-c2-light94 .akkordeon a,
.backdrop-c2-light94 .akkordeon.impress a,
#footer .backdrop-c2-light94.inverted .akkordeon *,
#footer .backdrop-c2-light94 .inverted.akkordeon *,
.backdrop-c2-light94.inverted .akkordeon.impress *,
.backdrop-c2-light94 .inverted.akkordeon.impress * {
  color: #333333;
}
#footer .backdrop-c2-light94 .akkordeon a,
.backdrop-c2-light94 .akkordeon.impress a {
  text-decoration: underline;
  outline: 4px solid transparent;
}
#footer .backdrop-c2-light94 .akkordeon .summary,
#footer .backdrop-c2-light94 .akkordeon .summary,
.backdrop-c2-light94 .akkordeon.impress .summary,
.backdrop-c2-light94 .akkordeon.impress .summary {
  padding-top: 7px;
  padding-bottom: 7px;
}
/* Accordion for login */
.login.akkordeon .ghost.service.button.s-0 {
  float: right;
  position: relative;
  top: 3px;
}
.login.akkordeon[open] > *:first-child *:first-of-type:not(.icon):before,
.js .login.akkordeon.open > *:first-child *:first-of-type:not(.icon):before {
  display: inline-block;
  background-position: 75% 7.5%;
}
.login.akkordeon[open] .summary .ghost.service.button,
.js .login.akkordeon.open .summary .ghost.service.button,
.login.akkordeon > *:first-child *:first-of-type:not(.icon):before {
  display: none;
}
.login.akkordeon > .summary {
  padding-left: 0px;
  padding-right: 10px;
}
.login.akkordeon {
  border: none;
}
.login.akkordeon .summary:hover {
  background-color: transparent;
}
.login.akkordeon > .akkordeon-content {
  padding-left: 0px;
  padding-right: 0px;
}
@media screen and (max-width: 659.9px) {
  .login.akkordeon .ghost.service.button.l-0.m-0 {
    width: 210px;
  }
  .login.akkordeon .ghost.service.button.l-0.m-0 .down.icon {
    left: 30px;
  }
}
.akkordeon.akkordeon-creaser[class*="backdrop-c2-"] {
  border-color: #FFFFFF;
}
.akkordeon.akkordeon-creaser.disabled .summary > *:first-child {
  margin-bottom: 0px;
}
.akkordeon.akkordeon-creaser.disabled .summary > *:first-child:not(.icon):before {
  display: none;
}
.akkordeon.akkordeon-creaser .summary {
  padding-left: 0px;
  padding-right: 0px;
}
.akkordeon.akkordeon-creaser .summary > *:first-child {
  margin-bottom: 20px;
}
.akkordeon.akkordeon-creaser .summary .teaser {
  margin-top: 10px;
  margin-bottom: 10px;
}
.akkordeon.akkordeon-creaser .summary .teaser .content.container {
  flex-direction: row;
  align-items: center;
}
@media screen and (max-width: 659.9px) {
  .akkordeon.akkordeon-creaser .summary .teaser .content.container .spoiler.s-txt {
    display: inline;
    background-color: transparent;
    color: #004788;
  }
  .akkordeon.akkordeon-creaser .summary .teaser .content.container .spoiler.s-txt em,
  .akkordeon.akkordeon-creaser .summary .teaser .content.container .spoiler.s-txt strong {
    display: inline;
    font-size: 16px;
  }
}
/* make sure the carousel will not register without JS */
.carousel {
  position: relative;
}
.carousel > div {
  overflow: hidden;
  margin: 0px;
  max-width: 100%;
  -ms-touch-action: pan-y pinch-zoom;
}
body:not(.touch) .carousel:hover {
  max-height: 10000px;
}
/* added .touch because of a firefox image select bug on desktop */
.touch .carousel img {
  pointer-events: none;
}
.touch .carousel a img {
  pointer-events: auto;
}
.carousel > div > ol[role="row"],
.carousel > div > ol[role="row"] > li {
  list-style: none;
  padding: 0;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  position: relative;
}
.no-flex .carousel-hero,
.carousel-hero > div > ol[role="row"] > li,
.carousel-hero > div > ol[role="row"] > li > * {
  /* end: BUG-754 - safari fix */
  width: 100vw;
  max-width: 100%;
}
.no-flex .carousel > div > ol[role="row"] {
  display: block;
}
.no-flex .carousel > div > ol[role="row"] > li {
  display: block;
  float: left;
  position: relative;
}
.no-flex .carousel-hero > div > ol[role="row"] > li:not(.hidden) + li {
  visibility: hidden;
}
.carousel > ol[role="navigation"] {
  display: none;
}
/* JS on: format carousel accordingly */
.js .carousel > div > ol[role="row"] {
  -ms-flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
}
.js .carousel > div > ol[role="row"].animate {
  -webkit-transition: transform 0.25s;
  -ms-transition: transform 0.25s;
  transition: transform 0.25s;
}
.js.no-flex .carousel > div > ol[role="row"] {
  display: table;
}
.js.no-flex .carousel > div > ol[role="row"] > li {
  float: none;
  display: table-cell;
  vertical-align: top;
}
.carousel > div > ol[role="row"] > li.hidden[class][class] {
  position: absolute;
  left: -200vw;
  z-index: -1;
}
.no-flex .carousel > div > ol[role="row"] > li.hidden[class][class] {
  left: -100%;
}
/* Auskommentiert, da der SLider im s-View im iOS 6s und 6 plus nicht vollbreit dargestellt wird */
/*
_::-webkit-full-page-media, _:future, :root .js .carousel > div > ol[role="row"] {
    display: table;
}
_::-webkit-full-page-media, _:future, :root .js .carousel > div > ol[role="row"] > li {
    display: table-cell;
}
*/
.js .carousel > ol[role="navigation"] {
  display: block;
  /*height: 0px;*/
  width: 100%;
  text-align: center;
  padding: 10px 0px;
  margin: 0px;
}
.js .inline.carousel > ol[role="navigation"] {
  margin-top: -30px;
  padding: 0px;
}
.js .inline.carousel-hero.carousel-nav-icons > ol[role="navigation"] {
  margin-top: -48px;
}
@media screen and (max-width: 659.9px) {
  .js .inline.carousel-hero.carousel-nav-icons > ol[role="navigation"] {
    margin-top: 24px;
  }
}
.carousel > ol[role="navigation"] li {
  display: inline-block;
  margin: 10px 3px 0px 3px;
  position: relative;
  box-sizing: border-box;
  border: 2px solid #717171;
  border-radius: 50%;
  min-width: 16px;
  min-height: 16px;
  background: #FFFFFF;
  -webkit-transition: background 0.25s;
  -ms-transition: background 0.25s;
  transition: background 0.25s;
  cursor: pointer;
  z-index: 100;
}
.inline.carousel > ol[role="navigation"] li {
  margin-top: -20px;
}
.carousel > ol[role="navigation"] li:empty {
  border-width: 1px 1px 1px 1px;
}
.inline.carousel > ol[role="navigation"] li:empty:not([rel]) {
  margin: 0px 3px;
}
@media screen and (max-width: 659.9px) {
  .carousel > ol[role="navigation"] li:empty {
    margin-left: 3px;
    margin-right: 3px;
  }
  .js .inline.carousel > ol[role="navigation"] {
    margin-top: 0px;
  }
  .no-flex .carousel {
    min-width: 86vw;
  }
}
.carousel > ol[role="navigation"] li:hover,
.carousel > ol[role="navigation"] li:focus {
  border-color: #004788;
}
.carousel > ol[role="navigation"] li:active,
.carousel > ol[role="navigation"] li.active {
  border-color: #004788;
  background: #004788;
}
.carousel > ol[role="navigation"] li .icon {
  margin: 10px;
}
.carousel > ol[role="navigation"] li[rel="prev"],
.carousel > ol[role="navigation"] li[rel="next"] {
  position: absolute;
  background: transparent;
  top: 50%;
  margin-top: -36px;
  border: none;
  border-radius: 0px;
  width: 72px;
  height: 72px;
  display: none;
}
.carousel > ol[role="navigation"] li[rel="prev"]:hover,
.carousel > ol[role="navigation"] li[rel="next"]:hover,
.carousel > ol[role="navigation"] li[rel="prev"]:focus,
.carousel > ol[role="navigation"] li[rel="next"]:focus {
  background: #004788;
}
.carousel > ol[role="navigation"] li[rel="prev"] {
  left: -68px;
  margin-left: 6px;
}
.carousel > ol[role="navigation"] li[rel="next"] {
  right: -68px;
  margin-right: 6px;
}
@media screen and (min-width: 1424px) {
  body:not(.touch) .carousel:not(.no-arrows) > ol[role="navigation"] li[rel="prev"]:not([aria-disabled]),
  body:not(.touch) .carousel:not(.no-arrows) > ol[role="navigation"] li[rel="next"]:not([aria-disabled]),
  body.touch .carousel.touch-arrows > ol[role="navigation"] li[rel="prev"]:not([aria-disabled]),
  body.touch .carousel.touch-arrows > ol[role="navigation"] li[rel="next"]:not([aria-disabled]) {
    display: block;
  }
}
.inline.carousel > ol[role="navigation"] li[rel="prev"] {
  left: -6px;
}
.inline.carousel > ol[role="navigation"] li[rel="next"] {
  right: -6px;
}
@media screen and (min-width: 1114px), screen and (min-width: 804px) and (max-width: 979.9px), screen and (min-width: 464px) and (max-width: 659.9px) {
  body:not(.touch) .inline.carousel:not(.no-arrows) > ol[role="navigation"] li[rel="prev"]:not([aria-disabled]),
  body:not(.touch) .inline.carousel:not(.no-arrows) > ol[role="navigation"] li[rel="next"]:not([aria-disabled]),
  body.touch .inline.carousel.touch-arrows > ol[role="navigation"] li[rel="prev"]:not([aria-disabled]),
  body.touch .inline.carousel.touch-arrows > ol[role="navigation"] li[rel="next"]:not([aria-disabled]) {
    display: block;
  }
  body:not(.touch) .carousel.l-12.fix > ol[role="navigation"] li[rel="prev"]:not([aria-disabled]),
  body:not(.touch) .carousel.l-12.fix > ol[role="navigation"] li[rel="next"]:not([aria-disabled]),
  body.touch .carousel.touch-arrows.l-12.fix > ol[role="navigation"] li[rel="prev"]:not([aria-disabled]),
  body.touch .carousel.touch-arrows.l-12.fix > ol[role="navigation"] li[rel="next"]:not([aria-disabled]) {
    display: block;
  }
}
.carousel > ol[role="navigation"] li[rel="prev"]:before,
.carousel > ol[role="navigation"] li[rel="next"]:before,
.carousel > ol[role="navigation"] li[rel="prev"]:after,
.carousel > ol[role="navigation"] li[rel="next"]:after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  width: 8px;
  height: 36px;
  border-radius: 4px;
  background: #004788;
  -webkit-transition: background 0.25s;
  -ms-transition: background 0.25s;
  transition: background 0.25s;
}
.carousel > ol[role="navigation"] li[rel="prev"]:before,
.carousel > ol[role="navigation"] li[rel="prev"]:after {
  left: 30px;
}
.carousel > ol[role="navigation"] li[rel="next"]:before,
.carousel > ol[role="navigation"] li[rel="next"]:after {
  left: 34px;
}
.carousel > ol[role="navigation"] li[rel="prev"]:before,
.carousel > ol[role="navigation"] li[rel="next"]:after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.carousel > ol[role="navigation"] li[rel="next"]:before,
.carousel > ol[role="navigation"] li[rel="prev"]:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.carousel > ol[role="navigation"] li[rel="prev"]:after,
.carousel > ol[role="navigation"] li[rel="next"]:after {
  top: 28px;
}
.carousel > ol[role="navigation"] li[rel="prev"]:hover:before,
.carousel > ol[role="navigation"] li[rel="next"]:hover:before,
.carousel > ol[role="navigation"] li[rel="prev"]:hover:after,
.carousel > ol[role="navigation"] li[rel="next"]:hover:after,
.carousel > ol[role="navigation"] li[rel="prev"]:focus:before,
.carousel > ol[role="navigation"] li[rel="next"]:focus:before,
.carousel > ol[role="navigation"] li[rel="prev"]:focus:after,
.carousel > ol[role="navigation"] li[rel="next"]:focus:after {
  background: #FFFFFF;
}
.carousel > ol[role="navigation"] li[rel="prev"][aria-disabled],
.carousel > ol[role="navigation"] li[rel="next"][aria-disabled] {
  display: none;
}
.carousel > ol[role="navigation"] li[rel="next"] img,
.carousel > ol[role="navigation"] li[rel="prev"] img {
  width: 72px;
  height: 72px;
  -webkit-transform: translateX(-36px) scaleX(0);
  -moz-transform: translateX(-36px) scaleX(0);
  -ms-transform: translateX(-36px) scaleX(0);
  transform: translateX(-36px) scaleX(0);
  -webkit-transition: transform 0.12s linear;
  -moz-transition: transform 0.12s linear;
  -ms-transition: transform 0.12s linear;
  transition: transform 0.12s linear;
  z-index: -1;
}
.carousel > ol[role="navigation"] li[rel="prev"] img {
  -webkit-transform: translateX(36px) scaleX(0);
  -moz-transform: translateX(36px) scaleX(0);
  -ms-transform: translateX(36px) scaleX(0);
  transform: translateX(36px) scaleX(0);
}
.carousel > ol[role="navigation"] li[rel="prev"]:hover img,
.carousel > ol[role="navigation"] li[rel="prev"]:focus img {
  -webkit-transform: translateX(72px) scaleX(1);
  -moz-transform: translateX(72px) scaleX(1);
  -ms-transform: translateX(72px) scaleX(1);
  transform: translateX(72px) scaleX(1);
}
.carousel > ol[role="navigation"] li[rel="next"]:hover img,
.carousel > ol[role="navigation"] li[rel="next"]:focus img {
  -webkit-transform: translateX(-72px) scaleX(1);
  -moz-transform: translateX(-72px) scaleX(1);
  -ms-transform: translateX(-72px) scaleX(1);
  transform: translateX(-72px) scaleX(1);
}
/* Karusell ausschaltbar machen */
@media screen and (min-width: 980px) {
  .carousel.l-disabled > ol[role="navigation"] {
    display: none;
  }
  .carousel.l-disabled > div {
    min-width: 100%;
  }
  .carousel.l-disabled > div > ol[role="row"] {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
    min-width: 100%;
  }
  .carousel.l-disabled > div > ol[role="row"] > li {
    flex-grow: 1;
  }
  /* fix for boxed layout */
  body#top .l-12.carousel ol[role="navigation"] li[rel="prev"],
  body#top .l-12.carousel ol[role="navigation"] li[rel="next"] {
    display: none;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .carousel.m-disabled > ol[role="navigation"] {
    display: none;
  }
  .carousel.m-disabled > div {
    min-width: 100%;
  }
  .carousel.m-disabled > div > ol[role="row"] {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
    min-width: 100%;
  }
  .carousel.m-disabled > div > ol[role="row"] > li {
    flex-grow: 1;
  }
}
@media screen and (max-width: 659.9px) {
  .carousel.s-disabled > ol[role="navigation"] {
    display: none;
  }
  .carousel.s-disabled > div {
    min-width: 100%;
  }
  .carousel.s-disabled > div > ol[role="row"] {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
    min-width: 100%;
  }
  .carousel.s-disabled > div > ol[role="row"] > li {
    flex-grow: 1;
  }
}
/* DP-15283: navigation bullets with numbers and icons, possible only for hero carousel and teaser xl carousel */
.carousel > ol[role="navigation"] li .icon,
.carousel > ol[role="navigation"] li .number {
  display: none;
}
.carousel.carousel-hero > ol[role="navigation"] li .icon,
.carousel.carousel-hero > ol[role="navigation"] li .number,
.carousel.carousel-teaser-xl > ol[role="navigation"] li .icon,
.carousel.carousel-teaser-xl > ol[role="navigation"] li .number {
  display: block;
}
.carousel > ol[role="navigation"] li .number {
  padding: 2px 13px;
  width: 18px;
}
.carousel > ol[role="navigation"] li .number.white {
  color: #FFFFFF;
}
.carousel > ol[role="navigation"] li:hover .number.inactive {
  color: #004788;
}
@media screen and (max-width: 659.9px) {
  .carousel > ol[role="navigation"] li .number {
    padding: 2px 7px;
  }
}
body.show-focus-indicator .carousel ol[role="navigation"] *:focus {
  outline-offset: 5px;
}
/* Dialog - modal window */
body[data-dialog-active] {
  overflow: hidden;
  padding-right: 0;
}
@media screen and (max-width: 979.9px) {
  body[data-dialog-active] {
    box-sizing: border-box;
  }
}
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.7;
  }
}
.dialog[data-cc="dialog"] {
  background-color: rgba(52, 52, 52, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  justify-content: center;
  /* needs to be set with JS by height & width > viewport
    justify-content: flex-start;
    align-items: flex-start;*/
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.grid > .dialog[data-cc="dialog"].container[class][class] {
  padding: 0;
}
@media all and (-ms-high-contrast: none) {
  /* IE11 */
  *::-ms-backdrop,
  .dialog[data-cc="dialog"] {
    animation-name: NotForIE;
  }
}
/* container needed for to get the margin to the bottom - no css necessary */
.dialog-content {
  display: flex;
  flex-shrink: 0;
  flex-flow: column;
  position: relative;
  box-sizing: border-box;
  background-color: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #C2C2C2;
  margin: 5vh auto;
  max-height: 90vh;
  min-width: 0;
  z-index: 9999;
}
@media all and (-ms-high-contrast: none) {
  /* IE11 */
  *::-ms-backdrop,
  .dialog-content {
    overflow: auto;
  }
}
@media screen and (max-width: 659.9px) {
  .dialog[data-cc="dialog"] {
    background-color: #FFFFFF;
  }
  .dialog-wrapper {
    width: 100%;
    min-height: 100%;
    height: 100%;
  }
  .dialog-content {
    border: 0 solid;
    width: 100%;
    margin: 0;
    min-height: 100%;
    max-height: 100%;
  }
}
@media screen and (min-width: 660px) {
  .dialog-content.l-12 {
    width: 980px;
  }
  .dialog-content.l-8 {
    width: 660px;
  }
  .dialog-content.l-6 {
    width: 500px;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .dialog-content.l-12 {
    width: 660px;
  }
}
@media screen and (min-width: 680px) {
  .scrollable-content.l-8 {
    width: 680px;
  }
  .scrollable-content.l-6 {
    width: 520px;
  }
}
@media screen and (min-width: 680px) and (max-width: 979.9px) {
  .scrollable-content.l-12 {
    width: 680px;
  }
}
@media screen and (min-width: 1000px) {
  .scrollable-content.l-12 {
    width: 1000px;
  }
}
.dialog-header {
  display: block;
  background-color: inherit;
  border-top-right-radius: inherit;
  border-top-left-radius: inherit;
  position: relative;
  top: 0;
  z-index: 9;
}
.dialog-title {
  display: flex;
  flex-grow: 1;
  font-size: 24px;
  font-family: DroidRegular;
  line-height: 32px;
  padding: 10px 40px 10px 10px;
}
.scrollable-content .dialog-title {
  border-bottom: 1px solid #C2C2C2;
}
.dialog-title *:not(p) {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.dialog-closer {
  cursor: pointer;
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 9;
  height: 32px;
  width: 32px;
}
.dialog-closer span.close {
  position: absolute;
}
.scrollable-content .dialog-closer:first-child {
  right: 20px;
}
@media all and (-ms-high-contrast: none) {
  /* IE11 */
  *::-ms-backdrop,
  .scrollable-content .dialog-closer:first-child {
    right: 4px;
  }
}
.dialog-body {
  display: flex;
  flex-direction: column;
  border-radius: inherit;
  min-height: 48px;
  /* scrollfallback for ie11 needed in .dialog-content */
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1;
}
@media screen and (max-width: 659.9px) {
  .dialog-body {
    overflow-x: auto;
  }
}
@media all and (-ms-high-contrast: none) {
  /* IE11 */
  *::-ms-backdrop,
  .dialog-body {
    min-width: 320px;
    overflow-x: hidden;
  }
}
.dialog-footer {
  display: block;
  background-color: inherit;
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
  padding: 10px;
  text-align: right;
}
.dialog-footer-button-wrapper {
  margin-top: -10px;
}
.scrollable-content .dialog-footer {
  border-top: 1px solid #C2C2C2;
}
.dialog-footer .button {
  margin-left: 20px;
  margin-top: 10px;
}
@media screen and (max-width: 659.9px) {
  .dialog-footer {
    text-align: center;
  }
  .dialog-footer .button {
    margin-left: 10px;
    margin-right: 10px;
  }
}
.dialog-content .container.l-12 .group-content {
  justify-content: center;
}
.dialog-content .component[class*="l-"],
.dialog-content .container.l-12,
.dialog-content .module.l-12,
.dialog-content .container.l-8,
.dialog-content .module.l-8 {
  align-self: flex-start;
  min-width: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
.dialog-content.l-8 .component.l-12,
.dialog-content.l-8 .container.l-12,
.dialog-content.l-8 .module.l-12 {
  width: 640px;
}
.dialog-content.l-6 .component[class*="l-"],
.dialog-content.l-6 .container.l-12,
.dialog-content.l-6 .module.l-12,
.dialog-content.l-6 .container.l-8,
.dialog-content.l-6 .module.l-8 {
  width: 480px;
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .dialog-content.l-6 .container.m-8,
  .dialog-content.l-6 .module.m-8 {
    width: 480px;
  }
}
@media screen and (max-width: 659.9px) {
  .dialog-content.l-8 .component[class*="l-"],
  .dialog-content.l-6 .component[class*="l-"],
  .dialog-content.l-8 .container.l-12,
  .dialog-content.l-8 .module.l-12,
  .dialog-content.l-6 .container.l-12,
  .dialog-content.l-6 .module.l-12,
  .dialog-content.l-6 .container.l-8,
  .dialog-content.l-6 .module.l-8,
  .dialog-content.l-6 .component[class*="m-"],
  .dialog-content.l-6 .container.m-8,
  .dialog-content.l-6 .module.m-8 {
    width: 320px;
  }
}
.dialog-body iframe {
  border: 1px solid #C2C2C2;
  padding: 1px;
}
/* fix user agent css */
.dialog-body form {
  margin-bottom: 0;
}
.dialog-body > [data-cc="progressbar"]:first-child,
.dialog-body > [data-cc="tabs"]:first-child {
  margin-top: 10px;
}
/* fix overlay burger from the tabs with close icon */
@media screen and (max-width: 659.9px) {
  .dialog-body > [data-cc="tabs"]:first-child {
    margin-top: 48px;
  }
}
#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 .akkordeon,
#footer .backdrop-c2-light94 .list a {
  color: #333333;
}
#footer .backdrop-c2-light94 .akkordeon > *:first-child *:first-of-type:not(.icon):before,
#footer .secondary.akkordeon > *:first-child *:first-of-type:not(.icon):before {
  background-position-x: 0;
}
#footer .backdrop-c2-light94:last-child {
  border-top: 1px solid #DADADA;
}
#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;
}
/* Footer Bugfix  - set border explizit if footer is fixed on bottom of page */
@media all and (min-width: 1000px) {
  #footer[style] {
    min-width: 1000px;
    max-width: 1000px !important;
    border-width: 0px 1px 1px;
    border-color: #C2C2C2;
    border-style: solid;
    margin: 0 -1px;
  }
}
@media all and (max-width: 999.9px) {
  #footer[style] {
    min-width: 100%;
  }
}
form {
  position: relative;
  width: 100%;
  display: block;
}
fieldset {
  display: table;
  border: 0px;
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px;
  max-width: 620px;
  width: 100%;
}
@media all and (min-width: 660px) {
  fieldset.inline {
    margin-left: 16px;
  }
  fieldset.inline:first-child,
  fieldset.unaligned:first-child {
    margin-left: 0px;
  }
}
.xl fieldset,
fieldset.xl {
  max-width: 940px;
}
p > fieldset {
  display: inline-table;
  width: auto;
}
fieldset.unaligned {
  display: inline-block;
  position: relative;
}
@media all and (max-width: 659.9px) {
  fieldset.unaligned {
    width: 100%;
  }
}
.field {
  display: block;
  position: relative;
}
fieldset:last-child .field {
  padding-bottom: 0px;
}
fieldset .field {
  display: table-cell;
  vertical-align: bottom;
  width: 620px;
  margin-left: 0px;
}
fieldset .field:not(.checkbox):not(.radio) + .field:not(.checkbox):not(.radio) {
  padding-left: 20px;
}
fieldset[data-invalid-message] + .message.field {
  display: none;
}
form > .field {
  box-sizing: border-box;
  max-width: 620px;
}
form.xl > .field,
form > .xl > .field,
form > .field.xl {
  max-width: 940px;
}
fieldset.unaligned .field {
  display: inline-block;
  float: left;
  min-height: 40px;
}
fieldset.fix,
.field.fix {
  max-width: none;
}
.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="month"],
.field input[type="week"],
.field input[type="time"],
.field input[type="datetime"],
.field input[type="datetime-local"],
.field input[type="email"],
.field input[type="search"],
.field input[type="tel"],
.field input[type="color"],
.field input[type="button"],
.field select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #C2C2C2;
  position: relative;
  height: 40px;
  padding: 0px 10px;
  line-height: 20px;
  background-color: #FFFFFF;
  color: #525252;
  font-family: "DroidRegular", Verdana, sans-serif;
  font-size: 16px;
  box-shadow: none;
  appearance: auto;
  -webkit-appearance: inherit;
}
.field select {
  padding: 8px 35px 8px 10px;
  text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.xl .field input[type="text"],
.xl .field input[type="password"],
.xl .field input[type="number"],
.xl .field input[type="date"],
.xl .field input[type="month"],
.xl .field input[type="week"],
.xl .field input[type="time"],
.xl .field input[type="datetime"],
.xl .field input[type="datetime-local"],
.xl .field input[type="email"],
.xl .field input[type="search"],
.xl .field input[type="tel"],
.xl .field input[type="color"],
.xl .field select,
.field.xl input[type="text"],
.field.xl input[type="password"],
.field.xl input[type="number"],
.field.xl input[type="date"],
.field.xl input[type="month"],
.field.xl input[type="week"],
.field.xl input[type="time"],
.field.xl input[type="datetime"],
.field.xl input[type="datetime-local"],
.field.xl input[type="email"],
.field.xl input[type="search"],
.field.xl input[type="tel"],
.field.xl input[type="color"],
.field.xl select {
  height: 48px;
  font-size: 20px;
}
.field.xl select {
  text-indent: 5px;
}
.field textarea {
  display: block;
  width: 100%;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 4px;
  border: 1px solid #C2C2C2;
  position: relative;
  padding: 10px;
  font-size: 16px;
  resize: vertical;
}
.field.xl select {
  font-size: 20px;
}
/* eye icon for password input field */
.field.password .icon.eye {
  position: absolute;
  display: inline-block;
  right: 8px;
  bottom: 8px;
  margin-left: 10px;
  cursor: pointer;
  z-index: 10;
  overflow: visible;
  background-color: #FFFFFF;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.field.password .icon.eye:before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  top: -10px;
  right: -10px;
}
/* IE10+: no text-indent in select - use padding instead */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .field select {
    padding-left: 10px;
  }
  fieldset legend {
    color: #525252;
    height: 32px;
  }
}
/* Webkit-based browsers: replace Select Icon */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  line-height: 24px;
  /* fix for android webkit */
  outline: none !important;
}
.field.select:before {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 15px;
  background-color: transparent;
  border-left: 3px solid #004788;
  border-bottom: 3px solid #004788;
  border-radius: 0px 0px 0px 4px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  pointer-events: none;
  z-index: 100;
}
/* IE10+: style Select Icon */
.field.select ::-ms-expand {
  background: none;
  border: none;
  display: none;
  padding-right: 2px;
}
select:focus::-ms-value {
  color: #525252;
  background-color: transparent;
}
/* Webkit/Firefox: disable spinner on Number fields */
.field input[type="number"]::-webkit-inner-spin-button,
.field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
/* Sarafi (Mac): By default, older versions of Safari will not apply even the most basic CSS styles to <input type="search"> fields. */
.field input[type="search"] {
  -webkit-appearance: none;
}
.field input[type="number"] {
  -moz-appearance: textfield;
}
/* Webkit: disable cancel button in search fields when JS is active */
.js .field input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
/* IE10+: disable reset button in form fields */
.field input::-ms-clear {
  display: none;
}
/* Format Placeholder - needs one selector each, otherwise the clients disregard the selector as invalid */
.field ::-webkit-input-placeholder {
  font-size: 16px;
  color: #999999;
}
.field ::-moz-placeholder {
  font-size: 16px;
  color: #999999;
}
.field :-moz-placeholder {
  font-size: 16px;
  color: #999999;
}
.field :-ms-input-placeholder {
  color: #999999 !important;
  font-size: 16px;
}
.field .placeholder[class][class] {
  color: #999999;
}
.xl .field ::-webkit-input-placeholder {
  font-size: 20px;
}
.xl .field ::-moz-placeholder {
  font-size: 20px;
}
.xl .field :-moz-placeholder {
  font-size: 20px;
}
.xl .field ::-ms-input-placeholder {
  font-size: 20px;
}
/* fix the wrong position of the placeholder-text in android 4.x */
.no-flex .field input[type="text"][placeholder],
.no-flex .field input[type="password"][placeholder],
.no-flex .field input[type="number"][placeholder],
.no-flex .field input[type="date"][placeholder],
.no-flex .field input[type="month"][placeholder],
.no-flex .field input[type="week"][placeholder],
.no-flex .field input[type="time"][placeholder],
.no-flex .field input[type="datetime"][placeholder],
.no-flex .field input[type="datetime-local"][placeholder],
.no-flex .field input[type="email"][placeholder],
.no-flex .field input[type="search"][placeholder],
.no-flex .field input[type="tel"][placeholder],
.no-flex .field input[type="color"][placeholder] {
  line-height: normal;
}
.field {
  width: 100%;
  max-width: 620px;
}
.field.half-size {
  width: 50%;
  max-width: 310px;
  min-width: 140px;
}
.field.quarter-size {
  width: 22.581%;
  max-width: 155px;
  min-width: 100px;
}
.field:not(.quarter-size) + .field.quarter-size {
  width: 25.808%;
}
.field.min-size {
  width: 1%;
}
fieldset .field.half-size {
  width: 300px;
}
fieldset .field.custom-size.size-160 {
  width: 160px;
}
fieldset .field.custom-size.size-200 {
  width: 200px;
}
fieldset .field.custom-size.size-240 {
  width: 240px;
}
fieldset .field.custom-size.size-280 {
  width: 280px;
}
fieldset .field.custom-size.size-320 {
  width: 320px;
}
@media all and (max-width: 659.9px) {
  fieldset .field.custom-size.size-160,
  fieldset .field.custom-size.size-200,
  fieldset .field.custom-size.size-240,
  fieldset .field.custom-size.size-280,
  fieldset .field.custom-size.size-320 {
    width: 100%;
  }
}
.field label,
fieldset legend {
  /* Avoid selecting label content instead of focussing input * /
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /**/
  cursor: pointer;
  display: block;
  line-height: 24px;
  padding: 8px 0px;
  width: 100%;
  font-family: "DroidRegular", Verdana, sans-serif;
}
fieldset legend {
  display: table-header-group;
}
.field label .note,
fieldset legend .note {
  color: #707070;
}
fieldset legend ~ .field label {
  display: block;
  position: absolute;
  margin-left: -10000px;
}
fieldset.show-labels legend ~ .field label {
  position: relative;
  margin-left: 0px;
}
fieldset legend ~ .field.checkbox input ~ label,
fieldset legend ~ .field.radio input ~ label,
fieldset .field.checkbox input ~ label,
fieldset .field.radio input ~ label {
  position: relative;
  margin-left: 0px;
  display: inline-block;
  padding: 0px;
}
fieldset legend ~ .field.checkbox input ~ label,
fieldset legend ~ .field.radio input ~ label,
fieldset .field.checkbox input ~ label,
fieldset .field.radio input ~ label {
  padding: 5px 0px 3px 0px;
}
fieldset legend ~ .field.radio.horizontal input ~ label,
fieldset legend + .field.radio:not(.horizontal) input ~ label {
  padding-top: 0px;
}
fieldset legend ~ .select.field {
  position: relative;
}
fieldset legend ~ .field {
  position: relative;
}
fieldset legend ~ .field .helper,
fieldset .text.field + .text.field + .text.field > .helper {
  position: absolute;
  top: 0px;
  right: 0px;
}
fieldset legend ~ .field .helper,
fieldset .text.field + .text.field + .text.field > .helper,
x:-moz-any-link {
  top: -40px;
}
.field:not(.error):not(.success):not(.info):not(.warning) > .icon:first-child,
.field .helper:first-child {
  float: right;
  position: relative;
  margin-top: 8px;
  margin-left: 8px;
}
fieldset legend .helper {
  float: right;
  position: relative;
  margin-top: 0px;
  margin-left: 8px;
}
form .field:not(.radio):not(.checkbox) label,
form fieldset legend {
  padding: 10px 0px 2px 0px;
}
.xl .field label ~ .icon,
.xl .field label ~ .helper,
.xl .field:not(.error):not(.success):not(.info):not(.warning) > .icon:first-child,
.xl .field .helper:first-child {
  margin-bottom: 5px;
}
.action.field > .button {
  top: 40px;
}
.action.field.nolabel > .button {
  top: 0px;
}
.action.field > .icon {
  float: right;
  margin: 5px 0px 10px 10px;
  position: relative;
}
/* Checkbox/Radio always requires a label */
.field.radio label,
.field.checkbox label {
  margin-left: 0px;
  line-height: 24px;
}
.field.radio label.icon,
.field.checkbox label.icon {
  display: none;
}
.field.radio a.icon,
.field.checkbox a.icon {
  float: right;
  margin-top: 8px;
  position: relative;
}
.field.radio input,
.field.checkbox input {
  float: left;
  margin: 10px 10px 0px 0px;
}
.no-flex .checkbox.field.inline {
  clear: both;
}
/* Radio/Checkbox with info-i */
.field.radio > .helper,
.field.checkbox > .helper {
  position: relative;
  top: 3px;
}
.field.radio > .helper ~ label,
.field.checkbox > .helper ~ label {
  margin-right: 24px;
}
/* Checkbox/Radio with Legend or without and fieldset */
.fieldset:not(.payment) legend ~ .radio.field input:checked ~ label::after,
.fieldset:not(.payment) legend ~ .field.checkbox input:checked ~ label::after {
  top: 10px;
}
.fieldset:not(.payment) .radio.field input:checked ~ label::after,
.fieldset:not(.payment) .field.checkbox input:checked ~ label::after,
.fieldset:not(.payment) .radio.field:not(.horizontal) + .radio.field:not(.horizontal) input:checked ~ label::after {
  top: 15px;
}
/* Radio/Checkbox - Vertical */
.radio.field,
[class][class][class] ~ .radio.field,
.checkbox.field:not(.hidden),
[class][class][class] ~ .checkbox.field:not(.hidden) {
  display: block;
  width: auto;
}
/* Radio/Checkbox - Horizontal */
.radio.field.horizontal,
[class][class][class] ~ .radio.field.horizontal,
.checkbox.field.horizontal,
[class][class][class] ~ .checkbox.field.horizontal {
  display: inline-block;
  min-width: 50px;
}
@media all and (min-width: 0px) {
  .field.radio,
  .field.checkbox,
  .field.radio + .field.radio,
  .field.checkbox + .field.checkbox {
    padding-left: 43px;
    min-height: 32px;
  }
  .field.checkbox:not(.error):not(.success):not(.info):not(.warning),
  .field.checkbox:not(.error):not(.success):not(.info):not(.warning) + .field.checkbox:not(.error):not(.success):not(.info):not(.warning) {
    min-height: 36px;
  }
  .field.radio label,
  .field.checkbox label {
    display: inline;
    position: relative;
    width: auto;
  }
  .field.radio.block label,
  .field.checkbox.block label {
    display: block;
  }
  .field.radio input,
  .field.checkbox input {
    position: absolute;
    opacity: 0;
  }
  .field.checkbox input ~ label:before,
  .field.radio input ~ label:before {
    content: "";
    display: inline-block;
    vertical-align: 0px;
    border: 1px solid #C2C2C2;
    background: #FFFFFF;
    width: 32px;
    height: 32px;
    left: -45px;
    margin: 2px -35px -10px 0px;
    box-sizing: border-box;
    position: relative;
  }
  .field.checkbox input ~ label:before {
    border-radius: 4px;
    margin-left: 2px;
  }
  .field.radio input ~ label:before {
    border-radius: 50%;
  }
  .field.radio input:checked ~ label:after {
    content: "";
    position: absolute;
    top: 10px;
    left: -37px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background: #004788;
  }
  .field.checkbox input:checked ~ label:after {
    content: "";
    position: absolute;
    top: 10px;
    left: -37px;
    width: 16px;
    height: 6px;
    border-left: 4px solid #004788;
    border-bottom: 4px solid #004788;
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
  .field.checkbox.indented input ~ label:after,
  .field.radio.indented input ~ label:after {
    left: -37px;
  }
  .field.checkbox input ~ label ~ label:before,
  .field.radio input ~ label ~ label:before,
  .field.checkbox input:checked ~ label ~ label:after {
    content: none;
  }
}
/* hover */
.field input[type="text"][type]:hover,
.field input[type="password"][type]:hover,
.field input[type="number"][type]:hover,
.field input[type="date"][type]:hover,
.field input[type="month"][type]:hover,
.field input[type="week"][type]:hover,
.field input[type="time"][type]:hover,
.field input[type="datetime"][type]:hover,
.field input[type="datetime-local"][type]:hover,
.field input[type="email"][type]:hover,
.field input[type="search"][type]:hover,
.field input[type="tel"][type]:hover,
.field input[type="color"][type]:hover,
.field select:hover,
.field textarea:hover {
  outline: none;
  border-color: #004788;
}
@media all and (min-width: 0px) {
  .field.checkbox:not(.error):not(.success):not(.info):not(.warning) input[type]:hover + label:before,
  .field.radio:not(.error):not(.success):not(.info):not(.warning) input[type]:hover + label:before {
    border-color: #004788;
  }
}
/* focus */
.field input[type="text"][type]:focus,
.field input[type="password"][type]:focus,
.field input[type="number"][type]:focus,
.field input[type="date"][type]:focus,
.field input[type="month"][type]:focus,
.field input[type="week"][type]:focus,
.field input[type="time"][type]:focus,
.field input[type="datetime"][type]:focus,
.field input[type="datetime-local"][type]:focus,
.field input[type="email"][type]:focus,
.field input[type="search"][type]:focus,
.field input[type="tel"][type]:focus,
.field input[type="color"][type]:focus,
.field select[class]:focus,
.field textarea[class]:focus {
  outline: none;
  border-color: #004788;
}
@media all and (min-width: 0px) {
  .field.checkbox:not(.error):not(.success):not(.info):not(.warning) input[type]:focus + label:before,
  .field.radio:not(.error):not(.success):not(.info):not(.warning) input[type]:focus + label:before {
    border-color: #004788;
  }
}
/* suggest */
/* IE hides the suggest too early, so we have to resort to an evil animations trick */
-ms-keyframes hide-suggest 0% {
  display: block;
  opacity: 1;
}
-ms-keyframes hide-suggest 99% {
  display: block;
}
-ms-keyframes hide-suggest 100% {
  display: none;
  opacity: 0;
}
.suggest {
  display: none;
  -ms-animation: hide-suggest 0.25s linear;
  position: absolute;
  width: 100%;
  margin: -1px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  background: #FFFFFF;
  box-sizing: border-box;
  z-index: 9999;
  font-family: DroidRegular;
  list-style: none;
}
.suggest-subline {
  display: none;
  padding: 5px 10px;
}
input:focus ~ .suggest,
.suggest:hover {
  display: block;
  animation: none;
}
input:focus ~ .suggest:empty,
.suggest:empty:hover {
  display: none;
}
.suggest > * {
  box-sizing: border-box;
  display: block;
  border: solid #C2C2C2;
  border-width: 0px 1px;
}
.suggest > *:first-child {
  border-top: 1px solid #DADADA;
}
.suggest > *:first-child:before {
  content: "";
  position: absolute;
  left: 0px;
  margin-top: -9px;
  width: 100%;
  height: 3px;
  box-sizing: border-box;
  background: #FFFFFF;
  border: solid #004788;
  border-width: 0px 1px;
}
.suggest > *:last-child {
  border-width: 0px 1px 1px 1px;
  border-radius: 0px 0px 4px 4px;
}
.js input::-webkit-calendar-picker-indicator {
  display: none;
}
.suggest a {
  text-decoration: none;
  color: #525252;
  display: block;
}
.suggest > a,
.suggest > option,
.suggest > li {
  display: block;
  padding: 5px 10px;
  color: #525252;
  margin: 0px;
  cursor: pointer;
}
.suggest > li > a {
  margin: -5px -10px;
  padding: 5px 10px;
}
.suggest > a:hover,
.suggest > a:focus,
.suggest > option:hover,
.suggest > option:focus,
.suggest > li:hover,
.suggest > li:focus,
.suggest > .active,
.suggest > .active * {
  background: #DADADA;
}
.suggest > * > * {
  display: inline;
}
.suggest strong,
.suggest em {
  font-style: normal;
  font-weight: 700;
}
fieldset > .field:not(:first-of-type) > .suggest {
  width: calc(100% - 20px);
}
/* form actions */
form fieldset.actions {
  display: block;
  max-width: none;
}
form .actions {
  margin-top: 0px;
  overflow: visible;
}
form .actions .right {
  float: right;
}
@media all and (max-width: 659.9px) {
  form fieldset.actions {
    max-width: 320px;
  }
}
form *:not(.nolabel) + .actions {
  margin-top: 20px;
}
form [type="submit"].button {
  width: 300px;
}
/* error, success, info, warning message field */
form .message.field {
  position: relative;
  overflow: hidden;
  top: 0px;
  background-color: transparent;
  color: #525252;
  margin-bottom: 0px;
  width: auto;
  padding: 7px 10px 3px 40px;
  display: block;
  border-bottom: 0 none;
  min-height: 24px;
}
form .error.message.field {
  padding: 3px 10px 0px 29px;
  min-height: 28px;
}
form .info.message.field {
  color: #FFFFFF;
}
form .error.message.field {
  color: #D40000;
}
form .warning.message.field {
  color: #525252;
}
form .success.message.field {
  color: #4A9322;
}
form .checkbox + .message.field {
  padding-bottom: 6px;
}
form .message.field .icon:not(.close) {
  margin-right: 6px;
  margin-left: -30px;
  float: left;
}
.vspace-xs form > .message.field:not(.rounded),
form.vspace-xs > .message.field:not(.rounded),
form .vspace-xs > .message.field:not(.rounded) {
  top: -8px;
}
form .message.field .icon + *:not(.icon) {
  font-weight: 400;
  font-family: "DroidRegular", Verdana, sans-serif;
}
/*.field input:not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="url"]):not([type="button"]):not([type="radio"]):not([type="checkbox"])[aria-invalid],*/
.field input[type="text"][aria-invalid],
.field input[type="password"][aria-invalid],
.field input[type="number"][aria-invalid],
.field input[type="date"][aria-invalid],
.field input[type="month"][aria-invalid],
.field input[type="week"][aria-invalid],
.field input[type="time"][aria-invalid],
.field input[type="datetime"][aria-invalid],
.field input[type="datetime-local"][aria-invalid],
.field input[type="email"][aria-invalid],
.field input[type="search"][aria-invalid],
.field input[type="tel"][aria-invalid],
.field input[type="color"][aria-invalid],
.field select[aria-invalid],
.field textarea[aria-invalid],
.field.checkbox input[aria-invalid] ~ label::before,
.field.radio input[aria-invalid] ~ label::before {
  border-color: #D40000;
}
/* 2 halfsize fields with long labels for tablets */
@media screen and (max-width: 979.9px) {
  fieldset .field.half-size.long-label,
  fieldset .field.half-size.long-label + .field {
    display: block;
    width: 100%;
    max-width: 620px;
    padding-left: 0px;
  }
}
/* Smartphone size */
@media all and (max-width: 659.9px) {
  fieldset .field {
    width: 300px;
  }
  fieldset .field.half-size,
  fieldset .field.half-size + .field {
    display: block;
    width: 100%;
    max-width: 620px;
    padding-left: 0px;
  }
  form.joined fieldset .field.half-size,
  form.joined fieldset .field.half-size + .field {
    display: table-cell;
  }
  fieldset .field.half-size + .action.field {
    margin-top: 10px;
    text-align: right;
  }
  fieldset .field.quarter-size {
    width: 24.5%;
    min-width: 86px;
  }
  fieldset.unaligned .field.quarter-size:first-of-type:last-child {
    width: 100%;
  }
  .field.quarter-size label ~ .icon,
  .field.quarter-size label ~ .helper,
  .field.quarter-size > .icon:first-child,
  .field.quarter-size .helper:first-child {
    margin-left: 5px;
  }
  /* single button that is wrapped in a new line takes up all the space */
  form:not(.joined) .half-size + .quarter-size.action.field button:first-child:last-child,
  form:not(.joined) .half-size + .min-size.action.field button:first-child:last-child {
    width: 100%;
  }
  form:not(.joined) .half-size + .quarter-size.action.field button:first-child:last-child .icon,
  form:not(.joined) .half-size + .min-size.action.field button:first-child:last-child .icon {
    float: none;
    display: inline-block;
    margin-right: 5px;
    vertical-align: bottom;
  }
  label.compact,
  fieldset legend.compact {
    line-height: 24px;
  }
  .s-oneline fieldset .field.half-size,
  .s-oneline fieldset .field.half-size + .field {
    display: table-cell;
  }
  form:not(.joined).s-oneline .half-size + .min-size.action.field button:first-child:last-child {
    width: auto;
  }
  form:not(.joined).s-oneline .half-size + .min-size.action.field {
    padding-left: 10px;
  }
}
/* info box as tooltip */
form .info.message.field {
  max-height: 1000px;
  opacity: 1;
  transition: none;
  padding: 20px 35px 20px 20px;
  margin-bottom: 3px;
  will-change: transform;
  width: auto;
  border-radius: 4px;
  background-color: #1C8AD9;
  border-color: #1C8AD9;
}
form .info.message.field.hidden {
  display: block;
  max-height: 0px;
  min-height: 0px;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  transition: none;
}
.info.message.field img {
  max-width: 260px;
  height: auto;
  margin-top: 10px;
}
.info.message.field .close.icon {
  margin-top: 0px;
  position: absolute;
  right: 10px;
  top: 10px;
}
/* old school - field color */
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  border-color: #C2C2C2;
  color: #999999;
  background-color: #FFFFFF;
  cursor: not-allowed;
  /* fix for iOS */
  -webkit-text-fill-color: #999999;
  opacity: 1;
}
.field.checkbox input[disabled] + label:before,
.field.radio input[disabled] + label:before {
  background: #C2C2C2;
  cursor: not-allowed;
}
/* Captcha */
.field.captcha .captcha-image {
  display: block;
  padding: 5px;
}
.field.captcha .captcha-image img {
  display: block;
  margin: auto;
}
.field.captcha .captcha-refresh {
  color: #004788;
  cursor: pointer;
  text-indent: 0;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  background: none;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.field.captcha.loading .captcha-refresh,
.field.captcha .loading .captcha-refresh,
.field.captcha .loading.captcha-refresh {
  animation: rotation 1s linear 0s normal none infinite;
}
.field.captcha .captcha-refresh svg {
  fill: #004788;
}
.field.captcha .captcha-refresh:hover .captcha-refresh-text {
  text-decoration: underline;
}
.field.captcha .captcha label {
  font-size: 80%;
  padding-bottom: 0;
}
/* fake-text in fieldset */
.field.omitInputTag {
  pointer-events: none;
}
.field.omitInputTag input {
  background-color: transparent;
  border: transparent;
  padding-left: 0px;
}
fieldset .field + .field.omitInputTag {
  padding-left: 10px;
}
/* Radio Input in Payment Block */
fieldset.payment .radio.field {
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  padding-top: 3px;
  padding-bottom: 8px;
  border-color: #DADADA;
  width: 100%;
}
fieldset.payment .radio.field + .radio.field {
  margin-top: 10px;
}
fieldset.payment .radio.field.active {
  background-color: #D1DEEA;
  border-color: #004788;
}
fieldset.payment .radio.field label {
  display: block;
  padding: 0px;
  margin-left: 10px;
}
fieldset.payment .radio.field label span.right,
fieldset.payment .radio.field label img.right {
  display: block;
  float: right;
  padding: 6px;
  margin-right: 10px;
}
fieldset.payment .radio.field label span.right {
  min-width: 115px;
}
/* form elements with flex */
.flex-form {
  display: flex;
  padding-top: 0px;
}
.flex-form .field {
  max-width: none;
}
.flex-form > div {
  flex: 1 1 auto;
  padding: 0px 10px;
}
.flex-form > div .button {
  margin-top: 36px;
}
.flex-form > div:only-child {
  padding: 0px;
}
.flex-form > div:last-child {
  padding-right: 0px;
}
.flex-form > div:first-child {
  padding-left: 0px;
}
.flex-form > div:only-child .button {
  margin-top: 16px;
}
form div:not(.button-wrapper) > .additive-text {
  margin-top: -6px;
  margin-bottom: 4px;
}
form div.button-wrapper > .additive-text {
  margin-top: 4px;
}
form .flex-form .flex-input-container > .additive-text {
  margin-bottom: -6px;
  margin-top: 4px;
}
form .field + .button-wrapper,
form .field + .additive-text + .button-wrapper {
  margin-top: 24px;
}
form .field.error + .button-wrapper {
  margin-top: 14px;
}
@media screen and (max-width: 979.9px) {
  .flex-form.fullwidth-tablet {
    flex-direction: column;
  }
  .flex-form.fullwidth-tablet > div .button {
    margin-top: 16px;
  }
  .flex-form.fullwidth-tablet > div {
    padding: 0px;
  }
  .flex-form.fullwidth-tablet > div:not(:last-child) {
    margin-bottom: 10px;
  }
}
@media all and (max-width: 659.9px) {
  .flex-form {
    flex-direction: column;
  }
  .flex-form > div .button {
    margin-top: 16px;
  }
  .flex-form > div {
    padding: 0px;
  }
  .flex-form > div:not(:last-child) {
    margin-bottom: 10px;
  }
}
/**
  * Value-Picker Field - setting value by picking one of the given input or manually input in the last field
  * - Structure: four input fields in type of button and one text field
  */
.fieldset[data-type="value-picker"] {
  display: block;
  max-width: 300px;
}
.fieldset[data-type="value-picker"] legend {
  display: block;
}
.fieldset[data-type="value-picker"] .field {
  position: relative;
  padding: 0px !important;
  border: none;
  border-radius: 0px;
  line-height: 0px;
  width: 48px;
  min-width: 48px;
}
.fieldset[data-type="value-picker"] .field.action {
  overflow: visible;
}
.fieldset[data-type="value-picker"] .field.action button {
  height: 40px;
  width: 100%;
  padding: 0px;
  border: 1px solid #C2C2C2;
  border-right: none;
  background-color: #FFFFFF;
  background-image: unset;
  outline: none;
  cursor: pointer;
  color: #525252;
  font-size: 16px;
  border-radius: 0px;
  appearance: auto;
  -webkit-appearance: inherit;
}
.fieldset[data-type="value-picker"] .field.action button span {
  float: none;
  padding: 0px;
  margin: 4px;
}
.fieldset[data-type="value-picker"] .field.action button span:not(.icon)::after {
  display: none;
}
.fieldset[data-type="value-picker"] .field.action button:hover,
.fieldset[data-type="value-picker"] .field.action button:focus {
  color: #004788;
  background-image: unset;
}
.fieldset[data-type="value-picker"] .field.action button:focus,
.fieldset[data-type="value-picker"] .field.action button:active {
  box-shadow: unset;
}
.fieldset[data-type="value-picker"] .field.action button.active {
  border-top-color: #004788;
  border-bottom-color: #004788;
  background-color: #004788;
  color: #FFFFFF;
  box-shadow: unset;
}
body.touch .fieldset[data-type="value-picker"] .field.action button:not(.active):hover {
  color: #525252;
}
.fieldset[data-type="value-picker"] .field.action:first-of-type button {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.fieldset[data-type="value-picker"] .field.action:before,
.fieldset[data-type="value-picker"] .field.action:after {
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  right: -1px;
  width: 1px;
  height: 8px;
  background-color: #FFFFFF;
  z-index: 1;
}
.fieldset[data-type="value-picker"] .field.action:after {
  top: 31px;
}
.fieldset[data-type="value-picker"] .field.text {
  width: 100%;
}
.fieldset[data-type="value-picker"] .field.text input {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  text-align: right;
}
.fieldset[data-type="value-picker"] .field.text input:hover::placeholder {
  color: #004788;
  opacity: 1;
}
.fieldset[data-type="value-picker"].error .field input,
.fieldset[data-type="value-picker"].error .field button {
  border-top-color: #D40000;
  border-bottom-color: #D40000;
}
.fieldset[data-type="value-picker"].error .field:first-of-type button {
  border-left-color: #D40000;
}
.fieldset[data-type="value-picker"].error .field:last-of-type input {
  border-left-color: #C2C2C2;
}
.fieldset[data-type="value-picker"]:hover .field input,
.fieldset[data-type="value-picker"]:focus-within .field input,
.fieldset[data-type="value-picker"]:hover .field button,
.fieldset[data-type="value-picker"]:focus-within .field button {
  border-top-color: #004788;
  border-bottom-color: #004788;
}
.fieldset[data-type="value-picker"]:hover .field:first-of-type button,
.fieldset[data-type="value-picker"]:focus-within .field:first-of-type button {
  border-left-color: #004788;
}
.fieldset[data-type="value-picker"]:hover .field:last-of-type input,
.fieldset[data-type="value-picker"]:focus-within .field:last-of-type input {
  border-left-color: #C2C2C2;
  border-right-color: #004788;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .fieldset[data-type="value-picker"].ie11-value-picker-hover .action.field button,
  .fieldset[data-type="value-picker"].ie11-value-picker-focus .action.field button {
    border-top-color: #004788;
    border-bottom-color: #004788;
  }
  .fieldset[data-type="value-picker"].ie11-value-picker-hover .action.field:first-of-type button,
  .fieldset[data-type="value-picker"].ie11-value-picker-focus .action.field:first-of-type button {
    border-left-color: #004788;
  }
  .fieldset[data-type="value-picker"].ie11-value-picker-hover .text.field input,
  .fieldset[data-type="value-picker"].ie11-value-picker-focus .text.field input {
    border-color: #004788;
    border-left-color: #C2C2C2;
  }
}
[data-cc-sub="captcha"] picture {
  height: 120px;
}
[data-cc-sub="captcha"] picture img {
  display: block;
  height: 100%;
}
[data-cc-sub="captcha"] picture img[src=''] {
  display: none;
}
[data-cc-sub="captcha"] [data-cm="captcha-image"] {
  background: #F3F3F3;
  display: flex;
  justify-content: center;
  position: relative;
}
[data-cc-sub="captcha"] [data-captcha-reload-link] {
  display: block;
  margin-bottom: 16px;
}
[data-cc-sub="captcha"] .spinner {
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
[data-cc-sub="captcha"] .spinner.spinner-1 div {
  -webkit-transform-origin: 32px 32px;
  transform-origin: 32px 32px;
  -webkit-animation: 1.2s linear infinite spinner-1;
  animation: 1.2s linear infinite spinner-1;
}
[data-cc-sub="captcha"] .spinner.spinner-1 div::after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 29px;
  width: 5px;
  height: 14px;
  border-radius: 20%;
  background: #1c8ad9;
}
[data-cc-sub="captcha"] .spinner.spinner-1 div:nth-child(1) {
  -webkit-transform: rotate(0);
  transform: rotate(0);
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
[data-cc-sub="captcha"] .spinner.spinner-1 div:nth-child(2) {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
[data-cc-sub="captcha"] .spinner.spinner-1 div:nth-child(3) {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
[data-cc-sub="captcha"] .spinner.spinner-1 div:nth-child(4) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
[data-cc-sub="captcha"] .spinner.spinner-1 div:nth-child(5) {
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
[data-cc-sub="captcha"] .spinner.spinner-1 div:nth-child(6) {
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
[data-cc-sub="captcha"] .spinner.spinner-1 div:nth-child(7) {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
[data-cc-sub="captcha"] .spinner.spinner-1 div:nth-child(8) {
  -webkit-transform: rotate(210deg);
  transform: rotate(210deg);
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
[data-cc-sub="captcha"] .spinner.spinner-1 div:nth-child(9) {
  -webkit-transform: rotate(240deg);
  transform: rotate(240deg);
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
[data-cc-sub="captcha"] .spinner.spinner-1 div:nth-child(10) {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
[data-cc-sub="captcha"] .spinner.spinner-1 div:nth-child(11) {
  -webkit-transform: rotate(300deg);
  transform: rotate(300deg);
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
[data-cc-sub="captcha"] .spinner.spinner-1 div:nth-child(12) {
  -webkit-transform: rotate(330deg);
  transform: rotate(330deg);
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
@-webkit-keyframes spinner-1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes spinner-1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.header {
  padding: 0px;
  display: block;
  height: 96px;
  line-height: 98px;
  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: 'DroidRegular', Verdana, sans-serif;
  font-size: 35px;
  font-weight: 400;
  display: inline-block;
  line-height: inherit;
}
.header > *:first-child > *:first-child {
  display: block;
  background: url(https://img.ui-portal.de/cd/ci/mail.com/brand-logo.svg) no-repeat 0 0;
  background-size: auto 40px;
  color: transparent;
  width: 153px;
  height: 40px;
  overflow: hidden;
  float: left;
  margin: 35px 16px 0px 10px;
  text-indent: -1000px;
}
/*  */
.header:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  min-width: 100%;
  height: 96px;
  border-top: 96px solid #004788;
  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 .icon[aria-label]:after {
  bottom: -17px;
}
.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;
  }
}
/* to fix the tabing order of content - use case more than one 'right' container */
@media screen and (min-width: 660px) {
  .header {
    display: flex;
    justify-content: flex-end;
  }
  .header strong {
    margin-right: auto;
    order: 1;
  }
  .header > .container.right {
    order: 2;
    margin-left: 0;
  }
  .header > .module.left {
    order: 0;
  }
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop,
  .header {
    display: block;
  }
  /* IE11 */
}
@media screen and (min-width: 980px) {
  .header.header-layer {
    height: 72px;
    line-height: 74px;
    padding: 0px;
    float: left;
    /*  */
    /*  */
    /* Wozu war dies noetig? Muss weg wegen CI-Update WEB.DE */
  }
  .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;
  }
  .header.header-layer > *:first-child {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    margin-left: 20px;
  }
  .header.header-layer > *:first-child,
  .header.header-layer > *:first-child > * {
    font-size: 29px;
  }
  .header.header-layer > *:first-child > *:first-child {
    background: url(https://img.ui-portal.de/cd/ci/mail.com/brand-logo.svg) no-repeat 0 0;
    background-size: auto 32px;
    color: transparent;
    width: 123px;
    height: 32px;
    margin: 26px 13px 0px 0px;
  }
  .header.header-layer > *:first-child + .left {
    margin-left: 10px;
    margin-right: -38px;
  }
  .header.header-layer ~ .navigation,
  .header.header-layer ~ .settings {
    position: absolute;
    margin-top: 0px;
    top: 0px;
    z-index: 9999;
  }
  .header.header-layer ~ .settings,
  .header.header-layer ~ .navigation ul {
    xbackground-color: #FFFFFF;
  }
  .header.header-layer ~ .navigation {
    right: 100%;
  }
  .header.header-layer ~ .settings > .head {
    height: 72px;
    line-height: 72px;
    /*  */
  }
  .header.header-layer.vline ~ .settings > .head {
    box-sizing: content-box;
    z-index: 9999;
  }
  .header.header-layer > .container,
  .header.header-layer > .module[class] {
    margin-top: 21px;
  }
  .header.header-layer > .container.right,
  .header.header-layer > .module.right {
    margin-top: 18px;
  }
  .header.header-layer .icon[aria-label]:after {
    bottom: -13px;
  }
  .toggle-nav .header.header-layer:before {
    left: 0;
  }
  .toggle-settings .header.header-layer:before {
    right: 0;
  }
}
@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: 74px;
    padding: 0px;
    float: left;
    /*  */
    /*  */
    /* Wozu war dies noetig? Muss weg wegen CI-Update WEB.DE */
  }
  .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;
  }
  .header > *:first-child {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    margin-left: 20px;
  }
  .header > *:first-child,
  .header > *:first-child > * {
    font-size: 29px;
  }
  .header > *:first-child > *:first-child {
    background: url(https://img.ui-portal.de/cd/ci/mail.com/brand-logo.svg) no-repeat 0 0;
    background-size: auto 32px;
    color: transparent;
    width: 123px;
    height: 32px;
    margin: 26px 13px 0px 0px;
  }
  .header > *:first-child + .left {
    margin-left: 10px;
    margin-right: -38px;
  }
  .header ~ .navigation,
  .header ~ .settings {
    position: absolute;
    margin-top: 0px;
    top: 0px;
    z-index: 9999;
  }
  .header ~ .settings,
  .header ~ .navigation ul {
    xbackground-color: #FFFFFF;
  }
  .header ~ .navigation {
    right: 100%;
  }
  .header ~ .settings > .head {
    height: 72px;
    line-height: 72px;
    /*  */
  }
  .header.vline ~ .settings > .head {
    box-sizing: content-box;
    z-index: 9999;
  }
  .header > .container,
  .header > .module[class] {
    margin-top: 21px;
  }
  .header > .container.right,
  .header > .module.right {
    margin-top: 18px;
  }
  .header .icon[aria-label]:after {
    bottom: -13px;
  }
  .toggle-nav .header:before {
    left: 0;
  }
  .toggle-settings .header:before {
    right: 0;
  }
}
@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[class]:before {
    border-top-width: 48px;
    height: 48px;
    margin-top: 0px;
  }
  .header[class].vline,
  .header[class].vline:before {
    height: 48px;
  }
  .header > *:first-child > *:first-child {
    width: auto;
    /*  */
    position: absolute;
    top: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    /*  */
    margin: 10px 0px 0px 0px;
    font-family: DroidRegular;
    font-size: 20px;
    line-height: 50px;
    color: #FFFFFF;
    /*  */
    background: url(https://img.ui-portal.de/cd/ci/mail.com/brand-logo-s.svg) no-repeat 0 0;
    background-size: 28px 28px;
    height: 28px;
    width: 28px;
    /*  */
  }
  .header > *:first-child > *:first-child ~ * {
    display: none;
  }
  .header > .container.right[class] {
    margin: 8px 20px 0px 0px;
    min-width: auto;
    width: auto;
  }
  .header > .module.left[class] {
    margin: 8px -38px 0px 10px;
  }
  .header .l-1.module[class][class] {
    min-width: 32px;
    width: auto;
    padding: 0 0 0 8px;
  }
  .header ~ .navigation,
  .header ~ .settings {
    position: absolute;
    top: 0px;
  }
  .header ~ .navigation {
    right: 100%;
  }
  .header ~ .settings > .head {
    height: 48px;
    line-height: 48px;
    /*  */
  }
  .header.vline ~ .settings > .head {
    box-sizing: content-box;
    z-index: 9999;
  }
  .header ~ .navigation,
  .header ~ .settings {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    margin-top: 0px;
  }
  .toggle-nav .header:before {
    left: 0;
  }
  .toggle-settings .header:before {
    right: 0;
  }
}
.header ~ .settings {
  display: none;
  right: -301px;
  width: 300px;
  overflow: hidden;
  position: absolute;
  flex-grow: 0;
}
.header ~ .settings > .head {
  position: relative;
  box-sizing: border-box;
  border-bottom: 1px solid #DADADA;
  margin-bottom: 10px;
}
.header ~ .settings > .head .l.icon {
  margin: -10px 10px -10px 10px;
}
.header ~ .settings > .head .close.icon {
  position: absolute;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.header ~ .settings > .module:not(.head) > *:not(:last-child) {
  margin-bottom: 10px;
}
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 {
  -webkit-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  transform: translateX(-300px);
  overflow-x: hidden;
}
.toggle-settings .header ~ .settings {
  display: block;
}
.header .dialog {
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #DADADA;
  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;
  border: 1px solid #DADADA;
  border-width: 1px 0px 0px 1px;
  display: block;
  position: absolute;
  margin-top: -28px;
  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%;
}
.header .dialog > .head,
.header .dialog > .module:not(.head) > *:not(:last-child) {
  margin-bottom: 10px;
}
.header .dialog .icon.close[data-hide-nodes],
.header ~ .settings .icon.close[data-unset-nodes] {
  position: absolute;
  top: 20px;
  right: 20px;
}
.header ~ .settings .icon.close[data-unset-nodes] {
  top: 24px;
  z-index: 99999;
}
/* 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 */
/* data-icon-prefix-text */
@media screen and (min-width: 980px) {
  .header a:focus,
  .header .link-base:hover,
  .header .link-hover {
    text-decoration: none;
  }
  .header .right .module > .icon.show-prefix-text[data-icon-prefix-text]:before {
    display: block;
    content: attr(data-icon-prefix-text);
    color: #FFFFFF;
    white-space: nowrap;
    text-indent: 0px;
    font-family: DroidRegular;
    font-size: 20px;
    line-height: 28px;
    position: absolute;
    right: 100%;
    margin: 0;
    padding: 0 8px 0 0;
    top: 4px;
    width: auto;
    height: auto;
  }
  .header .right .module > .icon.show-prefix-text[data-icon-prefix-text]:hover:before,
  .header .right .module > .icon.show-prefix-text[data-icon-prefix-text]:focus:before {
    color: #F0F4F8;
  }
}
/* adapt form configurator in flyout/settings content container */
.header .dialog .module form,
.header ~ .settings .module form {
  margin-left: -10px;
  margin-right: -10px;
}
.header .dialog form.vspace-xs,
.header ~ .settings form.vspace-xs,
.header .dialog form.vspace-xs .module.vspace-xs,
.header ~ .settings form.vspace-xs .module.vspace-xs {
  padding-top: 0;
}
.header .dialog form.vspace-xs > *,
.header ~ .settings form.vspace-xs > * {
  margin-bottom: 0;
}
.header .dialog .head + .module form .checkbox.field .helper,
.header ~ .settings .head + .module form .checkbox.field .helper {
  right: 0;
  top: 0;
}
@media screen and (min-width: 980px) {
  .header .dialog .l-12,
  .header .dialog .l-8 {
    width: 320px !important;
  }
}
@media screen and (max-width: 979.9px) {
  .header ~ .settings .l-12,
  .header ~ .settings .l-8,
  .header ~ .settings .m-8,
  .header ~ .settings .m-4,
  .header ~ .settings .s-4 {
    width: 300px !important;
  }
}
/* needed to center altough 'center' used in parent-container by the hero text, because inner teaser smaller then outer */
/* you can give the innner teaser container also 'center' then the following isn't needed (have to be testet) */
.hero.teaser {
  -webkit-align-items: center;
  align-items: center;
}
/* Hilfscontainer für weitere Elemente, z.B. Spoiler (WIP) */
/* z-index: 1, because of the button who could be under the backing container */
.hero .backing.container {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  z-index: 1;
}
@media screen and (max-width: 659.9px) {
  .hero .backing.s-visual {
    position: relative;
    left: 0;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  .hero .backing.s-h-auto[class][class] {
    display: flex;
    bottom: 0;
  }
}
/* logointegration in hero (interdisciplinary checked :-) */
.hero .flag {
  position: absolute;
  top: 0;
  right: 0px;
  text-align: right;
  margin: 0 16px 0 0;
  z-index: 3;
}
.hero .flag .note {
  margin: 0;
  font-size: 12px;
}
.hero .flag img {
  position: static;
  display: inline-block;
  margin-bottom: -5px;
  transform: translate(0, 0);
}
.hero .flag[data-type="default"],
.hero .flag[data-type="partner"] {
  margin-top: 16px;
}
/* height of partnerlogo fix: 48px l-view, 40px m-/s-view, width flexible */
.hero .flag[data-type="default"] img,
.hero .flag[data-type="partner"] img {
  height: 40px;
}
.hero .flag[data-type="default"]:not(.no-border) img,
.hero .flag[data-type="partner"]:not(.no-border) img {
  background-color: #FFFFFF;
  padding: 4px;
  border-radius: 4px;
}
/* video-teaser mit flag => flag abstand setzen */
.hero-product-video .flag + .teaser {
  margin-top: 24px;
}
@media screen and (min-width: 980px) {
  .hero .flag {
    margin-right: 36px;
  }
  .hero .flag[data-type="default"] img,
  .hero .flag[data-type="partner"] img {
    height: 48px;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .hero .flag[data-type="premium"] img {
    width: 83%;
  }
}
@media screen and (max-width: 659.9px) {
  /* set the logo on the top of the herocontent */
  .hero > .flag {
    position: relative;
    margin: 0 auto 0 auto;
    text-align: center;
  }
  /* hero text xl with icon has to be set to default, because the teasercontainer has here the fullheight of the hero */
  /* hero product size xl with icon has also to be set to default, because this is a special case, not like size l and size m */
  /* 'default' means same behavior as in l-/m-View */
  .hero.hero-text.h-8 > .flag,
  .hero.hero-product.h-8 > .flag,
  .hero-product .background.s-h-5 + .flag,
  .hero-product .background.s-h-4 + .flag {
    position: absolute;
    margin: 11px 16px 0 0;
    text-align: right;
  }
  /* hero product var1 - the position could only work when you have a bg container with the height 380px and a visual with the height 300px or bg container with the height 300px and a visual with the height 220px */
  /* fits for hero product var1 sizes m and l*/
  .hero-product .background.s-h-5 + .flag {
    top: 80px;
  }
  /* fits for hero product var1 sizes s*/
  .hero-product .background.s-h-4 + .flag {
    top: 80px;
  }
  /* width of premiumlogo fix 72px in s-view, height flexible */
  /* the premium logo in s-view is a different img/svg as used in l-/m-View */
  .hero .flag[data-type="premium"] img {
    width: 72px;
  }
}
/* Spoiler im Hero (WIP) */
.hero .spoiler {
  z-index: 1000;
}
/* Ev. muss die Klasse 'withSpoiler' hinzugefügt werden, falls es zu Darstllungs-Problemen wegen flexbox kommt */
/*.hero .visual.withSpoiler {*/
@media screen and (max-width: 659.9px) {
  .hero .visual,
  .hero .s-visual {
    display: flex;
    flex-direction: row;
  }
  .hero .visual .container,
  .hero .s-visual .container {
    z-index: 1000;
  }
}
/* Abstandskonzept (vspace-Ersatz) für Heros */
.grid > .hero {
  margin-bottom: 0px;
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .grid > .hero-text.m-h-auto {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .m-visual.m-h-auto img {
    position: static;
    transform: translate(0, 0);
  }
}
@media screen and (max-width: 659.9px) {
  .grid > .hero:not(.hero-text) {
    margin-top: 0px;
    margin-bottom: 40px;
  }
  .grid > .hero ~ .hero:not(.hero-text) {
    margin-top: 40px;
  }
  .grid > .hero[class*="backdrop"] {
    margin-bottom: 0px;
    padding-bottom: 40px;
  }
  .grid > .hero ~ .hero[class*="backdrop"] {
    margin-top: 0px;
    padding-top: 40px;
  }
  .grid > .hero-text.s-h-auto {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .grid > .hero.hero-product:not([class*="backdrop"]) + footer {
    margin-top: -40px;
  }
}
/* Da die Höhenangaben der Hauptcontainer nicht durch Abstände verfälscht werden dürfen,
   müssen die Abstände über die Kindelemente erfolgen.*/
/* Generell für im Hero vorhandene Teaser das margin auf 0 setzen. */
.hero .teaser[class] {
  margin-bottom: 0px;
  margin-top: 0px;
}
/* Abstand überschreiben zwischen Visual und Content */
.hero .teaser > *:not(.background) + .content[class] {
  padding-top: 0px;
}
/* define gaps between hero content */
.hero .teaser .content > *:not(.btn-wrapper),
.hero .teaser .content > *.l-visual {
  margin-bottom: 20px;
}
.hero .teaser .content > *.background,
.hero .teaser .content:last-child > *:last-child:not(.btn-wrapper) {
  margin-bottom: 0px;
}
/* if va-spread then we need gabs on bottom */
.hero .teaser.va-spread .content:last-child {
  margin-bottom: 20px;
}
/* remove the gaps on top and bottom of the list used in a hero */
.hero .teaser .list li:first-child {
  margin-top: -5px;
}
.hero .teaser .list li:last-child {
  margin-bottom: -5px;
}
/* Listen sollen, falls zentriert, generell textabhängig zentriert werden.
   Text spannt sich dann max auf die Teaserbreite aus. */
.hero .teaser .content.module.fix .list.va-center-self {
  box-sizing: border-box;
}
/* Im s-order-1 Container ist immer die Headline zu finden. Diese kann entweder zusätzlich in ihr oder danach
   (je nach SEO Wunsch) ein Subheadline besitzen mit nur 5px Abstand dazwischen */
/* wenn innerhalb oder nach H-Tags eine subheadline => 5px Abstand dazwischen */
.hero .teaser .s-order-1 .subheadline,
.hero .teaser .s-order-2 .subheadline {
  margin-top: 1px;
  display: block;
}
/* nimmt den Abstand zur Subheadline weg wenn diese nach der Headline im code vorkommt */
.hero .teaser .s-order-1 > * + .subheadline,
.hero .teaser .s-order-2 > * + .subheadline {
  margin-top: -19px;
}
/* Hero mit Icon und APP-Buttons
   Beim Text-Hero mit Icon tritt der Spezialfall auf, dass sich innerhalb des Teaser-Containers 2 Container befinden, die per Klasse va-spread oben und unten angedockt werden. Der Teaser-Container benötigt dafür die Höhe des Heros. In der Variante, bei der die Buttons unterhalb des Backgrounds positioniert werden sollen, benötigt der erste Content-Container
   innerhalb des Teasers ebenfalls eine fixe Höhe im s-View, damit die Buttons unter den Hero rutschen.
   Das Icon wird per img-Tag eingebunden und befindet sich im s-order-1 Container innerhalb eines visual-Containers. */
/* Abstand Icon */
.hero .teaser .s-order-1 .visual {
  margin-bottom: 5px;
}
.hero .teaser.va-spread .s-order-1 > *:first-child {
  margin-top: 16px;
}
.hero .teaser .s-order-1 .visual img {
  vertical-align: middle;
}
/* Beim Produkt Hero Var 2 wird die Skalierung der Visual-Grafik über die Breite und nicht über die Höhe geregelt, da die Höhe variabel sein kann. Hierfür müssen bei Verwendung der Breitenklassen die Eigenschaften von 'fix' hinzugefügt werden. */
.hero-product .teaser .background img.h-auto {
  flex-basis: auto;
  flex-grow: 0;
  min-width: 0;
}
/* for removing the gap to the additional text after the buttongroup */
.hero-product .btn-wrapper + p {
  margin-top: -20px;
}
@media screen and (min-width: 980px) {
  /* verhindert, dass zu hoher Content das Layout zerschießt */
  .hero.l-h-8,
  .hero.l-h-6,
  .hero.l-h-4,
  .hero.l-h-3 {
    overflow: hidden;
  }
  /* Liste spannt sich max auf die Teaserbreite aus */
  .hero .teaser .content.module.l-6.fix .list.va-center-self {
    max-width: 460px;
  }
  /* Abstand Icon */
  .hero .teaser .s-order-1 .visual {
    margin-bottom: 16px;
  }
  .hero .teaser.va-spread .s-order-1 > *:first-child {
    margin-top: 32px;
  }
  /* Hero S und XS, Abstand wegnehmen um Headline zu zentrieren, da dies der Hauptusecase ist */
  .hero.h-2 .teaser .s-order-1 *:last-child,
  .hero.h-3 .teaser .s-order-1 *:last-child {
    margin-bottom: 0;
  }
  /* Hero S, Abstand fuer den Fall Fliesstext und Button nach oben wieder hinzufuegen */
  .hero.h-3 .teaser .s-order-1 ~ .s-order-3,
  .hero.h-3 .teaser .s-order-1 ~ .s-order-4,
  .hero.h-3 .teaser .s-order-1 ~ .content.module.fix {
    margin-top: 20px;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  /* verhindert, dass zu hoher Content das Layout zerschießt */
  .hero.m-h-8,
  .hero.m-h-6,
  .hero.m-h-4,
  .hero.m-h-3 {
    overflow: hidden;
  }
  /* define gaps between hero content */
  .hero .teaser .content > *.m-visual {
    margin-bottom: 20px;
  }
  /* Liste spannt sich max auf die Teaserbreite aus */
  .hero .teaser .content.module.m-6.fix .list.va-center-self {
    max-width: 460px;
  }
  .hero .teaser .content.module.m-4.fix .list.va-center-self {
    max-width: 300px;
  }
  /* m-h-auto => height will be spread by content */
  /* muss dem Teaser display: flex geben, damit Positionierung funktioniert */
  .hero > .teaser.m-h-auto[class],
  .hero.hero-text.m-h-auto[class] {
    display: flex;
  }
  /* damit der Hintergrund so hoch wird wie der Content */
  .hero .background.m-h-100[class]:not(.m-visual) {
    height: 100%;
  }
  .hero .background.m-h-100[class]:not(.m-visual) img {
    height: 100%;
  }
  /* Hero sollen im m-View nicht direkt am Header/Nav andocken, falls der Container keine fixe Höhe hat */
  .hero.m-h-auto > .teaser .s-order-1 > *:first-child {
    margin-top: 16px;
  }
  .hero.m-h-auto > .teaser > .content:last-child {
    margin-bottom: 20px;
  }
  /* Beim Produkt Hero Var 2 wird die Skalierung der Visual-Grafik über die Breite und nicht über die Höhe geregelt, da die Höhe variabel sein kann. Hierfür müssen bei Verwendung der Breitenklassen die Eigenschaften von 'fix' und 20px padding hinzugefügt werden. */
  .hero-product .teaser .background img.h-auto,
  .hero-product .teaser .background img.m-h-auto {
    box-sizing: border-box;
    padding-left: 20px;
    flex-basis: auto;
    flex-grow: 0;
    min-width: 0;
  }
  .hero .teaser form .button {
    width: auto;
  }
  .hero .teaser p > form {
    margin-top: 4px;
  }
  /* Hero S und XS, Abstand wegnehmen um Headline zu zentrieren, da dies der Hauptusecase ist */
  .hero.h-2 .teaser .s-order-1 *:last-child,
  .hero.h-3 .teaser .s-order-1 *:last-child {
    margin-bottom: 0;
  }
  /* Hero S, Abstand fuer den Fall Fliesstext und Button nach oben wieder hinzufuegen */
  .hero.h-3 .teaser .s-order-1 ~ .s-order-3,
  .hero.h-3 .teaser .s-order-1 ~ .s-order-4,
  .hero.h-3 .teaser .s-order-1 ~ .content.module.fix {
    margin-top: 20px;
  }
}
@media screen and (max-width: 659.9px) {
  /* verhindert, dass zu hoher Content das Layout zerschießt */
  .hero.s-h-8,
  .hero.s-h-6,
  .hero.s-h-4,
  .hero.s-h-3 {
    overflow: hidden;
  }
  /* define gaps between hero content */
  .hero .teaser .content > *.s-visual {
    margin-bottom: 20px;
  }
  .hero .teaser .s-overlay-bottom {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 20px;
  }
  /* Liste spannt sich max auf die Teaserbreite aus */
  .hero .teaser .content.module.fix .list.va-center-self {
    max-width: 300px;
  }
  /* s-h-auto => height will be spread by content */
  /* muss dem Teaser display: flex geben, damit Positionierung funktioniert */
  .hero > .teaser.s-h-auto[class],
  .hero.hero-text.s-h-auto[class] {
    display: flex;
  }
  /* damit der Hintergrund so hoch wird wie der Content */
  .hero .background.s-h-100[class]:not(.s-visual) {
    height: 100%;
  }
  .hero .background.s-h-100[class]:not(.s-visual) img {
    height: 100%;
  }
  /* Hero sollen im s-View nicht direkt am Header/Nav andocken, falls der Container keine fixe Höhe hat */
  .hero.s-h-auto > .teaser .s-order-1 > *:first-child {
    margin-top: 16px;
  }
  .hero.s-h-auto > .teaser > .content:last-child {
    margin-bottom: 20px;
  }
  /* muss noch geprüft werden, ob für alle Heros nötig oder nur für Product */
  .hero .s-visual.s-h-auto img {
    position: static;
    transform: translate(0, 0);
  }
  /* Visual Hero */
  /* Der erste Button soll über dem Visual liegen, wenn er im s-order-3 Container drin steckt */
  .hero-visual .teaser .s-order-1 > *:only-child {
    margin-bottom: 5px;
  }
  .hero-visual .teaser .s-order-2 {
    margin-bottom: 20px;
  }
  .hero-visual .teaser .content.s-order-3:last-child {
    margin-bottom: 0px;
  }
  .hero-visual .teaser .s-order-3 .btn-wrapper {
    margin-top: -88px;
  }
  .hero-visual .teaser .s-order-3 .btn-wrapper .button {
    margin-bottom: 40px;
  }
  .hero-visual .teaser .s-order-3 .btn-wrapper .button.store:first-child,
  .hero-visual .teaser .s-order-3 .btn-wrapper .button.store:nth-child(2) {
    margin-top: 8px;
  }
  /* Das Formular soll über dem Visual liegen, wenn es im s-order-3 Container drin steckt */
  .hero-visual .teaser .s-order-3 form.s-oneline {
    margin-top: -88px;
  }
  /* Hero mit BG => Fadefarbe anpassen*/
  .hero-visual.backdrop-b1-light94 .s-fade-in::after {
    background: -moz-linear-gradient(top, #f1f8fd 0%, #f1f8fd 10%, rgba(241, 248, 253, 0) 100%);
    background: -webkit-linear-gradient(top, #f1f8fd 0%, #f1f8fd 10%, rgba(241, 248, 253, 0) 100%);
    background: linear-gradient(to bottom, #f1f8fd 0%, #f1f8fd 10%, rgba(241, 248, 253, 0) 100%);
  }
  .hero-visual.backdrop-c2-light94 .s-fade-in::after {
    background: -moz-linear-gradient(top, #f3f3f3 0%, #f3f3f3 10%, #f3f3f3 100%);
    background: -webkit-linear-gradient(top, #f3f3f3 0%, #f3f3f3 10%, #f3f3f3 100%);
    background: linear-gradient(to bottom, #f3f3f3 0%, #f3f3f3 10%, #f3f3f3 100%);
  }
  /* Produkt Hero */
  .hero-product .teaser .s-h-6.s-order-1,
  .hero-product .teaser .s-h-5.s-order-1,
  .hero-product .teaser .s-h-4.s-order-1,
  .hero-product .teaser .visual.s-order-2,
  .hero-product .teaser .s-visual.s-h-auto {
    margin-bottom: 20px;
  }
  /* Beim Produkt Hero Var 2 wird die Skalierung der Visual-Grafik über die Breite und nicht über die Höhe geregelt, da die Höhe variabel sein kann. Hierfür müssen bei Verwendung der Breitenklassen die Eigenschaften von 'fix' und 20px padding hinzugefügt werden. */
  .hero-product .teaser .background.s-visual img.h-auto,
  .hero-product .teaser .background.s-visual img.s-h-auto {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    flex-basis: auto;
    flex-grow: 0;
    min-width: 0;
  }
  /* muss noch geprüft werden, ob für alle Heros nötig oder nur für Product */
  /* zum Test um Grafiken zu skalieren bei fixer containerbreite */
  /*.hero .s-visual.s-fix.s-4 img {
        width: 100%;
    }*/
  /* BUG-4567 */
  /* Anmerkung: wenn fixe containerbreite generell gesetzt wird, ist dieser Hack nicht mehr noetig */
  /* ie11 hack fuer zentrierte Ausrichtung des Img im Visual container von product var 2 */
  _:-ms-fullscreen,
  :root .hero .s-visual.s-center img {
    margin-left: auto;
    margin-right: auto;
  }
  /* Text Hero */
  /* Buttons im s-View unterhalb des Visuals (nur Hero Text XL) */
  .hero-text .s-h-auto.va-spread .s-h-6.s-order-1 {
    margin-top: -40px;
    margin-bottom: 20px;
  }
  /* Button-Breite im s-View auf 300px setzen */
  .hero .teaser .button {
    width: 300px;
  }
  .hero .teaser form .button {
    width: auto;
  }
  /* Label im Text-Hero mit flexibler Höhe im s-View */
  /* not proved by refactoring for v1.5.*/
  .hero.hero-text.s-h-auto .teaser[class] .s-order-1 .label {
    margin-top: 16px;
    margin-bottom: 5px;
  }
  /* Video-Teaser, additional gaps */
  /* not proved by refactoring for v1.5.*/
  .hero.hero-product-video.s-h-auto {
    padding-bottom: 60px;
    padding-top: 60px;
  }
  .hero.hero-product-video .teaser {
    margin-top: 0px;
  }
  .hero .teaser[class][class]:not(.fix):not(.s-fix),
  .hero .teaser > .content:not(.fix):not(.s-fix) {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
}
/* Form im Hero */
.hero form {
  margin-top: 10px;
}
.hero form .field {
  margin-bottom: 16px;
}
.hero form .field + .field.message {
  margin-bottom: 8px;
  margin-top: -18px;
}
.hero form .field label {
  margin-top: -8px;
}
.hero form p.inp-info {
  margin-top: -12px;
  margin-bottom: 16px;
}
.hero form .field + .actions,
.hero form .fieldset + .actions {
  margin-top: 24px;
}
.hero form .actions .button {
  min-width: 300px;
}
@media screen and (max-width: 659.9px) {
  /* Bug: Brandname in header wrong possitioned => necessary for messages over the header */
  .header {
    position: relative;
  }
  .hero .s-order-4 > p + form {
    margin-top: 6px;
  }
}
/* login-Hero (DEPRECATED) - needed for downward compatibility until login-Hero canceld */
.hero-login > .teaser > [class*="backdrop"]::before,
.hero-login.teaser > .background[class*="backdrop"]::before {
  left: 0px;
  right: 0px;
}
.hero-login form.login p {
  margin-top: -12px;
  margin-bottom: 16px;
}
@media screen and (max-width: 659.9px) {
  .hero-login .s-order-4 > form,
  .hero-login .s-order-4 > p {
    margin-top: 24px;
  }
  .hero-login .s-order-4 > p + form {
    margin-top: 0px;
  }
}
/* Visual Hero mit Carousel - Notlösung - Abstände abgestimmt auf Visual Hero XL mit 2-zeiliger Headline und 4-zeiligem Text
   Beispiel siehe cat-proj-teasertest */
/* Für jeden Slider muss das innerhalb des CAT-Projektes separat angepasst/ergänzt werden */
@media screen and (max-width: 659.9px) {
  /* um das Springen der Punkte zu verhindern un diese hoch zu positionieren */
  .js .carousel-hero-visual-xl.inline .hero-visual .teaser .s-order-1 > *:first-child {
    height: 80px;
    max-height: 80px;
    overflow: hidden;
  }
  .js .carousel-hero-visual-xl.inline .hero-visual .teaser .s-order-2 {
    height: 300px;
    max-height: 300px;
    overflow: hidden;
  }
  .js .carousel-hero-visual-xl.inline .hero-visual .teaser .s-order-3.slider-nav-placeholder {
    margin-top: 40px;
    height: 112px;
    max-height: 112px;
    overflow: hidden;
  }
  /* Bullets Hochpositionieren direkt nach Visual - nicht in ältern Androids! */
  .js .carousel-hero-visual-xl.inline > ol[role="navigation"] {
    margin-top: -140px;
  }
}
iframe.simple {
  overflow: hidden;
  border: 0;
}
/*
iframe.special {}
*/
.layer:not(:empty) ~ * {
  display: none;
}
.layer.loading {
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
@-webkit-keyframes rotateplane {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  25% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
  75% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
}
@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
  75% {
    transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
  }
  100% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
}
.loading:after {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #FFFFFF;
  -webkit-animation: rotateplane 2.4s infinite ease-in-out;
  animation: rotateplane 2.4s infinite ease-in-out;
  margin-top: -32px;
  margin-left: -32px;
}
/* cat - message-1.2 */
.message {
  border-bottom: 3px solid black;
  /*padding: 20px;*/
  padding: 10px 10px 10px 44px;
  display: block;
  /**/
  border-radius: 5px;
  border-bottom: 0 none;
  /**/
  min-height: 44px;
  box-sizing: border-box;
}
.message .close.icon {
  display: none;
  float: right;
  margin: 0px 0px 0px 10px;
  overflow: visible;
}
.js .message .close.icon {
  display: block;
  cursor: pointer;
}
/* easier closing for touch-enabled devices */
.touch .message .close.icon:before {
  content: "";
  position: absolute;
  margin: -10px 0px 0px -10px;
  width: 36px;
  height: 36px;
  display: block;
}
.touch .message.big .close.icon:before {
  width: 42px;
  height: 42px;
}
.message.big {
  padding: 20px 20px 20px 88px;
  min-height: 88px;
}
.message .icon {
  float: left;
  margin-right: 10px;
  margin-left: -34px;
  position: relative;
}
.message.big .icon {
  margin-right: 20px;
  margin-left: -68px;
}
.message.big .close.icon {
  margin: 0px 0px 0px 20px;
}
.message .icon + * {
  margin-top: 0px;
}
.message.error {
  background-color: #D40000;
  border-color: #D40000;
}
.message.warning {
  background-color: #F0BC00;
  border-color: #F0BC00;
}
[class*='backdrop-'].inverted .message.warning * {
  color: #525252;
}
.message.success {
  background-color: #5CB82A;
  border-color: #5CB82A;
}
.message.info {
  background-color: #1C8AD9;
  border-color: #1C8AD9;
}
.message .icon + *:not(.icon) {
  font-family: "DroidRegular", Arial, sans-serif;
  font-weight: 400;
}
.message:not(.big) .icon + *:not(.icon) {
  font-size: 16px;
  line-height: 24px;
}
@media all and (min-width: 660px) {
  .message .icon + *:not(.icon) {
    font-size: 20px;
    line-height: 28px;
  }
}
.inline.message .icon + *:not(.icon),
.message .icon:not(.close) ~ p {
  display: inline;
}
@media all and (max-width: 979.9px) {
  .message.big .icon + *:not(.icon) {
    font-size: 20px;
    line-height: 28px;
  }
}
@media all and (max-width: 659.9px) {
  .message.big {
    text-align: center;
    padding-left: 20px;
  }
  .message.big .icon {
    float: none;
    margin: 0;
  }
  .message.big .icon.close {
    float: right;
    margin: 0 0 0 -20px;
  }
}
.message.fullwidth {
  width: 1000px;
  max-width: 1000px;
  min-width: auto;
  padding-right: 0;
  padding-left: 0;
}
.fullwidth.message {
  width: 1000px;
  max-width: 1000px;
  min-width: auto;
  padding-right: 0;
  padding-left: 0;
  overflow: hidden;
  border-radius: 0;
}
.fullwidth.message > div {
  width: 100%;
  max-width: 1000px;
  min-width: auto;
  box-sizing: border-box;
  padding: 0px 10px 0px 54px;
}
.fullwidth.message.big > div {
  padding: 0px 20px 0px 88px;
}
.message > div.center {
  margin-left: auto;
  margin-right: auto;
}
/* animate toggle of info field */
.message.info.field {
  max-height: 1000px;
  opacity: 1;
  -webkit-transition: 0.25s ease-in;
  -moz-transition: 0.25s ease-in;
  -ms-transition: 0.25s ease-in;
  -o-transition: 0.25s ease-in;
  transition: 0.25s ease-in;
}
.message.info.hidden {
  display: block;
  max-height: 0px;
  min-height: 0px;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -ms-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
}
/* Message with expanding success steps */
.arrow .l.icon {
  display: block;
  position: relative;
  height: 32px;
  width: 32px;
  z-index: 9999;
  background-color: #004788;
  border-radius: 50%;
  left: 50%;
  margin-left: -12px;
  cursor: pointer;
  top: -15px;
}
.expand-message {
  height: 200px;
  overflow: hidden;
  margin-bottom: 0px;
}
.expand-message::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(255, 255, 255, 0)), #F5FBF2);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #F5FBF2 100%);
  z-index: 1;
}
.expand-message.active {
  height: auto;
  margin-bottom: 30px;
}
.expand-message.active::after {
  display: none;
}
.list li.spec-color1:before {
  background-color: #858585;
}
.list li.spec-color2:before {
  background-color: #C2C2C2;
}
ol.line-connected.list li:not(:last-child):after {
  content: "";
  counter-increment: section;
  position: absolute;
  width: 3px;
  background: #DADADA;
  left: -25px;
  top: 37px;
  height: 100%;
}
.message.warning .icon.close {
  background-position-x: 0%;
}
.navigation {
  display: block;
  overflow: visible;
  z-index: 999;
  height: 48px;
}
.navigation > ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.navigation .up.icon,
.navigation .down.icon {
  margin-left: 0px;
  vertical-align: -5px;
}
.navigation li span.open .down.icon,
.navigation li span:not(.open) .up.icon,
.navigation li span:not(.open) ~ ul {
  display: none;
}
/* Active und Hover in Servicefarbe */
.navigation li.active span:not(.open) .down.icon,
.navigation li span:not(.open) .down.icon.service,
.navigation li span:not(.open):hover .down.icon {
  display: none;
}
@media screen and (min-width: 980px) {
  .navigation li.active span:not(.open) .down.icon.service:not(.l-0),
  .navigation li span:not(.open):hover .down.icon.service:not(.l-0) {
    display: inline-block;
  }
}
/* Open in grau und Open+Active und Open+Hover in Servicefarbe */
@media screen and (max-width: 979.9px) {
  .navigation li span.open .down.icon {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .navigation li span.open:hover .down.icon:not(.service):not(.m-0),
  .navigation li.active span.open .down.icon:not(.service):not(.m-0) {
    display: none;
  }
  .navigation li.active span:not(.open) .down.icon.service:not(.m-0),
  .navigation li span:not(.open):hover .down.icon.service:not(.m-0) {
    display: inline-block;
  }
  .navigation li span.open:hover .down.icon.service:not(.m-0),
  .navigation li.active span.open .down.icon.service:not(.m-0),
  .navigation li span.open .down.icon:not(.service):not(.m-0) {
    display: inline-block;
  }
}
.navigation a,
.navigation a:hover,
.navigation a:active,
.navigation a:visited {
  color: #525252;
  text-decoration: none;
}
.navigation li.active > *:not(.open):first-child {
  color: #004788;
}
/* Hintergrund bei Active */
.navigation li ul li a:focus,
.navigation li ul li.active a {
  background-color: #F3F3F3;
}
/* Hintergrund bei Hover */
.navigation li ul li a:hover,
.navigation li ul li.active a:hover,
.navigation li ul li a:focus a:hover {
  background-color: #D1DEEA;
}
/* M-Icons Submenü */
/* Im Firefox gibt es ein Subpixel Rendering Problem.
   Wenn die Y-Position Berechnung mit Kommastelle .5 berechnet wird, dann wird der BG (hier Icon) abgeschnitten */
/* Falls dies auftritt, muss der BG-Container um 1px erhöht werden */
.navigation ul.text.list .m.icon:first-child {
  height: 24px;
  /*Quick-Fix abgeschnittenes Icon Problem => 25px*/
  margin: 0px 8px 0px 0px;
  /*Ohne Quick-Fix margin-top: 0px => margin-top: -1px*/
}
/*l-view*/
@media screen and (min-width: 980px) {
  /* for boxed layout */
  .navigation > ul {
    width: 1000px;
  }
  .navigation > ul > li:first-child {
    overflow: hidden;
    max-height: 48px;
    margin-left: 20px;
  }
  .navigation:before {
    content: "";
    position: absolute;
    background-color: #F3F3F3;
    left: 0px;
    width: 100%;
    height: 48px;
    z-index: -1;
  }
  .navigation.center {
    margin: 0 auto;
  }
  .navigation > ul > li {
    float: left;
    position: relative;
  }
  /* special for 'Registrieren'-Link in the navigation (needed e.g. for Freemail) */
  .navigation > ul > li.listpoint-special {
    float: right;
  }
  .navigation > ul > li + li > span > .icon:not(.down):not(.up) {
    display: none;
  }
  /* 1. Listenpunkte der Hauptnavi, Home-Icon a-tag */
  .navigation > ul > li > *:first-child {
    display: inline-block;
    padding: 12px 20px;
    height: 24px;
  }
  /* gefloatete wegen Abstand zur Linie */
  .navigation > ul > li > *:first-child .home {
    float: left;
  }
  /* blaue Linie */
  .navigation > ul > li + li.active > *:first-child::after,
  .navigation > ul > li + li:hover > *:first-child::after {
    content: "";
    background-color: #004788;
    position: absolute;
    bottom: 0px;
    left: 20px;
    right: 20px;
    height: 4px;
  }
  .navigation > ul > li > * > .m.icon {
    vertical-align: -5px;
  }
  .navigation ul ul {
    position: absolute;
  }
  .navigation ul ul li {
    padding: 0px;
  }
  /* Grauer Trennstrich nach dem Home-Icon */
  .navigation > ul > li:nth-child(2)::after {
    content: "";
    height: 20px;
    width: 1px;
    left: 0;
    top: 15px;
    position: absolute;
    background-color: #C2C2C2;
  }
  /* Flyout */
  .navigation span.open {
    color: #FFFFFF;
    border-radius: 4px 4px 0px 0px;
    position: relative;
    z-index: 1000;
  }
  /* Blaue Hinterlegung - offenes Submenue Desktop */
  .navigation > ul > li + li > span.open[class]::before {
    content: "";
    background-color: #004788;
    border-radius: 4px 4px 0px 0px;
    position: absolute;
    height: 46px;
    top: 2px;
    left: 1px;
    right: 1px;
    z-index: -1;
  }
  .navigation > ul > li + li:hover > span[class].open::after,
  .navigation > ul > li + li > span[class].open::after {
    content: "";
    display: block;
    position: absolute;
    background-color: transparent;
    border-radius: 4px 4px 0px 0px;
    border-right: 1px solid #DADADA;
    border-left: 1px solid #DADADA;
    border-top: 1px solid #DADADA;
    height: 41px;
    top: 1px;
    right: 0px;
    left: 0px;
  }
  .navigation > ul > li + li > span > .icon {
    margin-right: -2px;
  }
  /* Blaue Linie */
  .navigation ul.text.list {
    background-color: #FFFFFF;
    border: 1px solid #DADADA;
    border-radius: 0px 4px 4px 4px;
    margin-top: -5px;
    padding-top: 24px;
    padding-bottom: 20px;
    width: 340px;
    z-index: 999;
  }
  .navigation ul.text.list:before {
    content: "";
    display: block;
    position: absolute;
    height: 4px;
    border-radius: 0 4px 0 0;
    border-top: 4px solid #004788;
    top: 0px;
    right: 0px;
    left: 0;
    z-index: -1;
  }
  /* Breite Listenpunkte */
  .navigation ul.text.list li a {
    box-sizing: border-box;
    width: 340px;
    line-height: 24px;
    z-index: 9999;
    padding: 8px 20px;
    position: relative;
    display: block;
  }
  /* weiße Hinterlegung der Sub-Listen */
  .navigation ul.text.list li:before {
    content: "";
    display: block;
    position: absolute;
    background-color: #FFFFFF;
    min-height: 100%;
    top: 0px;
    left: 0px;
    margin-left: 0px;
    border-radius: 0px;
    z-index: 9999;
    width: 340px;
  }
  /* Rundung des Flyouts unten (beim letzten Listenpunkt) */
  x.navigation ul.text.list li:last-child a,
  x.navigation ul.text.list li:last-child:before {
    border-radius: 0px 0px 4px 4px;
  }
  .navigation .double.text.list {
    width: 660px;
  }
  /* Breite Listenpunkte */
  .navigation .double.text.list li a {
    width: 330px;
  }
  /* weiße Hinterlegung der Sub-Listen */
  .navigation .double.text.list li:nth-of-type(odd):before {
    width: 660px;
  }
  .navigation .double.text.list li:nth-of-type(odd) a {
    padding-right: 10px;
  }
  .navigation .double.text.list li:nth-of-type(even) a {
    left: 330px;
    margin-top: -40px;
    padding-left: 10px;
  }
  .navigation .double.text.list li:nth-of-type(even):before {
    content: none;
  }
  /* li + li würde verhindern, dass das erste li jemals ausgewählt wird */
  /* odd = ungerade,
       even = gerade
       li:nth-of-type(odd):last-child => letzter Navipunkt steht links */
  /* li:nth-of-type(odd):nth-last-child(2) => letzter Navipunkt rechts, aber li links davon wird gewählt */
  /* Rundungen der weißen Hinterlegung unten */
  x.navigation .double.text.list li:nth-of-type(odd):last-child:before,
  x.navigation .double.text.list li:nth-of-type(odd):nth-last-child(2):before {
    border-radius: 0px 0px 4px 4px;
  }
  /* Rundungen der blauen Hinterlegung bei hover */
  x.navigation .double.text.list li:nth-of-type(odd):last-child a,
  x.navigation .double.text.list li:nth-of-type(odd):nth-last-child(2) a {
    border-radius: 0px 0px 0px 4px;
  }
  x.navigation .double.text.list li:nth-of-type(even):last-child a {
    border-radius: 0px 0px 4px 0px;
  }
  /* Linie im aufgeklappten Zustand oben */
  .navigation .triple.text.list {
    width: 980px;
  }
  /* 1. Spalte */
  .navigation .triple.text.list li:nth-of-type(3n+1) a {
    width: 330px;
    padding-right: 10px;
  }
  /* 2. Spalte - nur 320px */
  .navigation .triple.text.list li:nth-of-type(3n+2) a {
    left: 330px;
    margin-top: -40px;
    width: 320px;
    padding-left: 10px;
    padding-right: 10px;
  }
  /* 3. Spalte */
  .navigation .triple.text.list li:nth-of-type(3n+3) a {
    left: 650px;
    margin-top: -40px;
    width: 330px;
    padding-left: 10px;
  }
  /* weiße Hinterlegung der Sub-Listen */
  .navigation .triple.text.list li:nth-of-type(3n+1):before {
    width: 980px;
  }
  .navigation .triple.text.list li:nth-of-type(3n+2):before,
  .navigation .triple.text.list li:nth-of-type(3n+3):before {
    content: none;
  }
  /* von der letzten Reihe, die Li's => Zugriff immer auf den linken */
  x.navigation .triple.text.list li:nth-of-type(3n+1):last-child:before,
  x.navigation .triple.text.list li:nth-of-type(3n+1):nth-last-child(2):before,
  x.navigation .triple.text.list li:nth-of-type(3n+1):nth-last-child(3):before {
    border-radius: 0px 0px 4px 4px;
  }
  /* Rundungen der blauen Hinterlegung bei hover, a von linker Reihe */
  x.navigation .triple.text.list li:nth-of-type(3n+1):last-child a,
  x.navigation .triple.text.list li:nth-of-type(3n+1):nth-last-child(2) a,
  x.navigation .triple.text.list li:nth-of-type(3n+1):nth-last-child(3) a {
    border-radius: 0px 0px 0px 4px;
  }
  /* Keine Rundung der blauen Hinterlegung bei hover, a von mittlerer Reihe */
  x.navigation .triple.text.list li:nth-of-type(3n+2):last-child a,
  x.navigation .triple.text.list li:nth-of-type(3n+2):nth-last-child(2) a {
    border-radius: 0px 0px 0px 0px;
  }
  /* Rundungen der blauen Hinterlegung bei hover, a von rechter Reihe */
  x.navigation .triple.text.list li:nth-of-type(3n+3):last-child a {
    border-radius: 0px 0px 4px 0px;
  }
}
/* mobile/tablet view */
@media screen and (max-width: 979.9px) {
  .navigation {
    position: relative;
    left: -301px;
    height: 0px;
    display: none;
  }
  body.toggle-nav .navigation {
    display: block;
  }
  /* Min-Width ist nötig, damit klick auf burger funktioniert */
  .navigation > ul {
    min-width: 0px;
    margin: 0px;
    padding: 0px;
  }
  /* wegen IE9 Spezifität erhöhen */
  body[class] .navigation,
  body[class] .navigation > ul {
    width: 300px;
  }
  .navigation ul li {
    padding: 0px;
  }
  .navigation > ul > li {
    border-bottom: 1px solid #DADADA;
  }
  /* Home-Icon, Dienstname, X */
  .navigation > ul > li:first-child {
    padding-right: 54px;
    height: 72px;
  }
  .navigation > ul > li:first-child > a {
    height: 72px;
    padding: 20px 0 20px 20px;
    /* die Ausrichtung wegen der Border-Top-Linie bei WEB.DE anpassen */
    width: 246px;
    /* fixe Breite (300-54px=246px) nötig wegen IE9 */
    box-sizing: border-box;
  }
  .navigation > ul > li:first-child > a:after {
    content: attr(data-title);
    font-size: 16px;
    position: relative;
    top: -2px;
    left: 8px;
  }
  /* 1. Ebene span- oder a-tag, Höhe 40px ohne Icon, 72px mit Icon  */
  .navigation ul > li > *:first-child {
    display: block;
    width: 300px;
    min-height: 24px;
    line-height: 24px;
    padding: 8px 20px;
    box-sizing: border-box;
    position: relative;
  }
  .navigation ul > li > span:first-child {
    padding-right: 54px;
  }
  .navigation ul > li > span .l.icon {
    margin: 12px 4px 12px 0px;
    /* 4px + Leerzeichen => 8px */
    vertical-align: -22px;
  }
  /* Safari 7.1+ (9.0 is the latest version of Safari at this time) */
  _::-webkit-full-page-media,
  _:future,
  :root .navigation[class] ul > li > span .l.icon {
    vertical-align: 3px;
  }
  .navigation ul > li > span .up.icon,
  .navigation ul > li > span .down.icon {
    margin-left: 0px;
    margin-top: -12px;
    top: 50%;
    right: 20px;
    position: absolute;
  }
  /* Hinterlegung - offenes Submenü */
  .navigation ul > li > span.open,
  .navigation ul > li > span.open + ul {
    background-color: #F3F3F3;
  }
  /* Hintergrund. Textfarbe bei Active */
  .navigation > ul li.active > span,
  .navigation > ul li.active > a {
    color: #004788;
    text-decoration: none;
    background-color: #F3F3F3;
  }
  /* Hintergrund bei Hover */
  .navigation > ul li:not(:first-child) > span:hover,
  .navigation > ul li.active > span:hover,
  .navigation > ul li a:focus > span:hover {
    background-color: #D1DEEA;
  }
  .navigation > ul li a:hover {
    text-decoration: none;
    background-color: #D1DEEA;
  }
  /* erster Navipunkt mit Home-Icon bei Hover Hinterlegung nach rechts erweitert */
  .navigation > ul > li:first-child > a:hover:before {
    content: "";
    border-left: 4px solid #004788;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    right: -54px;
    background-color: #D1DEEA;
    z-index: 0;
  }
  .navigation ul > li:first-child > a .l.icon {
    position: relative;
    z-index: 999;
  }
  /* blauer Balken links */
  .navigation > ul > li > span.open:before,
  .navigation > ul > li:not(:first-child) > span:hover:before,
  .navigation > ul > li:not(:first-child) > a:hover:before,
  .navigation > ul > li.active > span:before,
  .navigation > ul > li.active > a:before {
    content: "";
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #004788;
  }
  /* Textfarbe geöffnetes Submenu span */
  .navigation > ul > li > span.open {
    color: #004788;
  }
  /* improve click area for mobile navigation close button */
  .navigation .close.icon {
    position: absolute;
    top: 24px;
    /* die Ausrichtung wegen der Border-Top-Linie bei WEB.DE anpassen */
    right: 20px;
    cursor: pointer;
    z-index: 20;
    overflow: visible;
    color: transparent;
  }
  .navigation .close.icon:before {
    content: "";
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    padding: 26px 20px 22px 10px;
    margin: -26px 0 0 -10px;
    /* die Ausrichtung wegen der Border-Top-Linie bei WEB.DE anpassen */
    z-index: 999;
    box-sizing: content-box;
  }
}
@media screen and (max-width: 659.9px) {
  .navigation {
    left: -257px;
  }
  /* wegen IE9 Spezifität erhöhen */
  body[class] .navigation,
  body[class] .navigation > ul,
  .navigation ul > li > *:first-child {
    width: 256px;
  }
  .navigation > ul > li:first-child {
    height: 48px;
  }
  .navigation > ul > li:first-child > a {
    height: 48px;
    padding: 8px 0 8px 16px;
    width: 202px;
    /* fixe Breite (256-54px=202px) nötig wegen IE9 */
    box-sizing: border-box;
  }
  .navigation .close.icon {
    top: 12px;
  }
  .navigation .close.icon:before {
    padding: 12px 20px 12px 10px;
    margin: -12px 0 0 -10px;
  }
}
/* */
body.toggle-nav > .grid {
  border-left: 1px solid #DADADA;
}
body.toggle-settings > .grid {
  border-right: 1px solid #DADADA;
}
ol.paging {
  list-style: none;
  position: relative;
  overflow: hidden;
  padding: 0px;
  clear: left;
}
ol.paging li {
  display: inline-block;
}
ol.paging li + li {
  margin-left: 5px;
}
/* Default Paging Layout*/
body:not(.touch) .button.paging:not([aria-disabled]):not(.disabled):hover,
body:not(.touch) .button.paging:not([aria-disabled]):not(.disabled):focus {
  color: #FFFFFF;
  border-color: #00396D;
  background-color: #00396D;
}
body:not(.touch) .button.paging:not([aria-disabled]):not(.disabled):hover .icon,
body:not(.touch) .button.paging:not([aria-disabled]):not(.disabled):focus .icon {
  background-position-x: 25%;
}
.button.paging[class] {
  overflow: visible;
  min-width: 40px;
  color: #004788;
}
[class*='backdrop-'].inverted .button.paging[class] {
  border-color: #FFFFFF;
  color: #FFFFFF;
  background-color: transparent;
}
[class*='backdrop-'].inverted .button.paging.active,
[class*='backdrop-'].inverted .button.paging:not([aria-disabled]):not(.disabled)[class]:active,
body:not(.touch) [class*='backdrop-'].inverted .button.paging:not([aria-disabled]):not(.disabled):hover,
body:not(.touch) [class*='backdrop-'].inverted .button.paging:not([aria-disabled]):not(.disabled):focus {
  color: #333333;
  border-color: #F3F3F3;
  background-color: #F3F3F3;
}
.button.paging[class]:not([rel]) {
  padding-right: 5px;
  text-indent: 5px;
}
.button.paging.active,
.button.paging.active:hover,
.button.paging.active:focus,
.button.paging:not([aria-disabled]):not(.disabled)[class]:active {
  cursor: default;
  color: #FFFFFF;
  min-width: 40px;
  border-color: #004788;
  background-color: #004788;
}
[class*='backdrop-'].inverted .button.paging[aria-disabled],
[class*='backdrop-'].inverted .button.paging.disabled,
.button.paging[aria-disabled],
.button.paging.disabled {
  color: #D1DEEA;
  border-color: #D1DEEA;
  cursor: default;
  cursor: not-allowed;
}
[class*='backdrop-'].inverted .button.paging[aria-disabled],
[class*='backdrop-'].inverted .button.paging.disabled {
  opacity: 0.7;
}
.paging .paging.button[rel="next"] .icon {
  float: right;
  margin-left: 8px;
  margin-right: -8px;
}
.button.paging[aria-disabled] .icon,
.button.paging.disabled .icon {
  opacity: 0.16;
}
[class*='backdrop-'].inverted .button.paging[aria-disabled] .icon {
  opacity: 0.7;
}
@media all and (max-width: 979.9px) {
  .paging .paging.button[rel] {
    text-indent: -1000px;
  }
  .paging .paging.button[rel="next"] .icon {
    margin-left: 7px;
  }
  .paging .paging.button[rel="prev"] .icon {
    margin-right: -8px;
  }
}
[class*='backdrop-'].inverted .button.paging[class] .icon {
  background-position-x: 25%;
}
[class*='backdrop-'].inverted .button.paging:not([aria-disabled]):not(.disabled):hover .icon,
[class*='backdrop-'].inverted .button.paging:not([aria-disabled]):not(.disabled):focus .icon,
[class*='backdrop-'].inverted .button.paging:not([aria-disabled]):not(.disabled):active .icon {
  background-position-x: 0%;
}
@-webkit-keyframes progress {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 46px 0px;
  }
}
@-moz-keyframes progress {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 46px 0px;
  }
}
@-ms-keyframes progress {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 46px 0px;
  }
}
@keyframes progress {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 46px 0px;
  }
}
.progress,
.progress[data-progress-type="bar"] {
  display: block;
  height: 23px;
  padding: 0px;
  box-sizing: border-box;
  border-radius: 4px;
  background: #F3F3F3;
}
.progress:after,
.progress[data-progress-type="bar"]:after {
  content: "";
  display: block;
  height: 100%;
  background-color: #004788;
  background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  background-size: 23px 23px;
  border-radius: 4px;
  -webkit-animation: progress 2.5s linear infinite;
  -moz-animation: progress 2.5s linear infinite;
  -ms-animation: progress 2.5s linear infinite;
  animation: progress 2.5s linear infinite;
}
.progress[data-progress-percentage^="1"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="1"]:after {
  width: 1%;
  background-color: #c10430;
}
.progress[data-progress-percentage^="2"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="2"]:after {
  width: 2%;
  background-color: #c20830;
}
.progress[data-progress-percentage^="3"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="3"]:after {
  width: 3%;
  background-color: #c30c30;
}
.progress[data-progress-percentage^="4"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="4"]:after {
  width: 4%;
  background-color: #c41030;
}
.progress[data-progress-percentage^="5"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="5"]:after {
  width: 5%;
  background-color: #c41430;
}
.progress[data-progress-percentage^="6"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="6"]:after {
  width: 6%;
  background-color: #c51830;
}
.progress[data-progress-percentage^="7"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="7"]:after {
  width: 7%;
  background-color: #c61c30;
}
.progress[data-progress-percentage^="8"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="8"]:after {
  width: 8%;
  background-color: #c72030;
}
.progress[data-progress-percentage^="9"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="9"]:after {
  width: 9%;
  background-color: #c8242f;
}
.progress[data-progress-percentage^="10"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="10"]:after {
  width: 10%;
  background-color: #c9282f;
}
.progress[data-progress-percentage^="11"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="11"]:after {
  width: 11%;
  background-color: #ca2c2f;
}
.progress[data-progress-percentage^="12"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="12"]:after {
  width: 12%;
  background-color: #cb302f;
}
.progress[data-progress-percentage^="13"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="13"]:after {
  width: 13%;
  background-color: #cb332f;
}
.progress[data-progress-percentage^="14"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="14"]:after {
  width: 14%;
  background-color: #cc372f;
}
.progress[data-progress-percentage^="15"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="15"]:after {
  width: 15%;
  background-color: #cd3b2f;
}
.progress[data-progress-percentage^="16"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="16"]:after {
  width: 16%;
  background-color: #ce3f2f;
}
.progress[data-progress-percentage^="17"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="17"]:after {
  width: 17%;
  background-color: #cf432f;
}
.progress[data-progress-percentage^="18"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="18"]:after {
  width: 18%;
  background-color: #d0472f;
}
.progress[data-progress-percentage^="19"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="19"]:after {
  width: 19%;
  background-color: #d14b2f;
}
.progress[data-progress-percentage^="20"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="20"]:after {
  width: 20%;
  background-color: #d24f2f;
}
.progress[data-progress-percentage^="21"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="21"]:after {
  width: 21%;
  background-color: #d2532f;
}
.progress[data-progress-percentage^="22"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="22"]:after {
  width: 22%;
  background-color: #d3572f;
}
.progress[data-progress-percentage^="23"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="23"]:after {
  width: 23%;
  background-color: #d45b2f;
}
.progress[data-progress-percentage^="24"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="24"]:after {
  width: 24%;
  background-color: #d55f2f;
}
.progress[data-progress-percentage^="25"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="25"]:after {
  width: 25%;
  background-color: #d6632f;
}
.progress[data-progress-percentage^="26"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="26"]:after {
  width: 26%;
  background-color: #d7672e;
}
.progress[data-progress-percentage^="27"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="27"]:after {
  width: 27%;
  background-color: #d86b2e;
}
.progress[data-progress-percentage^="28"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="28"]:after {
  width: 28%;
  background-color: #d96f2e;
}
.progress[data-progress-percentage^="29"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="29"]:after {
  width: 29%;
  background-color: #da732e;
}
.progress[data-progress-percentage^="30"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="30"]:after {
  width: 30%;
  background-color: #da772e;
}
.progress[data-progress-percentage^="31"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="31"]:after {
  width: 31%;
  background-color: #db7b2e;
}
.progress[data-progress-percentage^="32"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="32"]:after {
  width: 32%;
  background-color: #dc7f2e;
}
.progress[data-progress-percentage^="33"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="33"]:after {
  width: 33%;
  background-color: #dd832e;
}
.progress[data-progress-percentage^="34"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="34"]:after {
  width: 34%;
  background-color: #de872e;
}
.progress[data-progress-percentage^="35"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="35"]:after {
  width: 35%;
  background-color: #df8b2e;
}
.progress[data-progress-percentage^="36"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="36"]:after {
  width: 36%;
  background-color: #e08f2e;
}
.progress[data-progress-percentage^="37"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="37"]:after {
  width: 37%;
  background-color: #e1932e;
}
.progress[data-progress-percentage^="38"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="38"]:after {
  width: 38%;
  background-color: #e1962e;
}
.progress[data-progress-percentage^="39"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="39"]:after {
  width: 39%;
  background-color: #e29a2e;
}
.progress[data-progress-percentage^="40"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="40"]:after {
  width: 40%;
  background-color: #e39e2e;
}
.progress[data-progress-percentage^="41"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="41"]:after {
  width: 41%;
  background-color: #e4a22e;
}
.progress[data-progress-percentage^="42"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="42"]:after {
  width: 42%;
  background-color: #e5a62d;
}
.progress[data-progress-percentage^="43"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="43"]:after {
  width: 43%;
  background-color: #e6aa2d;
}
.progress[data-progress-percentage^="44"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="44"]:after {
  width: 44%;
  background-color: #e7ae2d;
}
.progress[data-progress-percentage^="45"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="45"]:after {
  width: 45%;
  background-color: #e8b22d;
}
.progress[data-progress-percentage^="46"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="46"]:after {
  width: 46%;
  background-color: #e8b62d;
}
.progress[data-progress-percentage^="47"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="47"]:after {
  width: 47%;
  background-color: #e9ba2d;
}
.progress[data-progress-percentage^="48"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="48"]:after {
  width: 48%;
  background-color: #eabe2d;
}
.progress[data-progress-percentage^="49"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="49"]:after {
  width: 49%;
  background-color: #ebc22d;
}
.progress[data-progress-percentage^="50"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="50"]:after {
  width: 50%;
  background-color: #ecc62d;
}
.progress[data-progress-percentage^="51"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="51"]:after {
  width: 51%;
  background-color: #eac52e;
}
.progress[data-progress-percentage^="52"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="52"]:after {
  width: 52%;
  background-color: #e7c52e;
}
.progress[data-progress-percentage^="53"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="53"]:after {
  width: 53%;
  background-color: #e5c42f;
}
.progress[data-progress-percentage^="54"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="54"]:after {
  width: 54%;
  background-color: #e3c430;
}
.progress[data-progress-percentage^="55"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="55"]:after {
  width: 55%;
  background-color: #e1c331;
}
.progress[data-progress-percentage^="56"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="56"]:after {
  width: 56%;
  background-color: #dec331;
}
.progress[data-progress-percentage^="57"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="57"]:after {
  width: 57%;
  background-color: #dcc232;
}
.progress[data-progress-percentage^="58"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="58"]:after {
  width: 58%;
  background-color: #dac233;
}
.progress[data-progress-percentage^="59"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="59"]:after {
  width: 59%;
  background-color: #d7c133;
}
.progress[data-progress-percentage^="60"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="60"]:after {
  width: 60%;
  background-color: #d5c034;
}
.progress[data-progress-percentage^="61"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="61"]:after {
  width: 61%;
  background-color: #d3c035;
}
.progress[data-progress-percentage^="62"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="62"]:after {
  width: 62%;
  background-color: #d0bf35;
}
.progress[data-progress-percentage^="63"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="63"]:after {
  width: 63%;
  background-color: #cebf36;
}
.progress[data-progress-percentage^="64"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="64"]:after {
  width: 64%;
  background-color: #ccbe37;
}
.progress[data-progress-percentage^="65"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="65"]:after {
  width: 65%;
  background-color: #cabe38;
}
.progress[data-progress-percentage^="66"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="66"]:after {
  width: 66%;
  background-color: #c7bd38;
}
.progress[data-progress-percentage^="67"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="67"]:after {
  width: 67%;
  background-color: #c5bc39;
}
.progress[data-progress-percentage^="68"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="68"]:after {
  width: 68%;
  background-color: #c3bc3a;
}
.progress[data-progress-percentage^="69"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="69"]:after {
  width: 69%;
  background-color: #c0bb3a;
}
.progress[data-progress-percentage^="70"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="70"]:after {
  width: 70%;
  background-color: #bebb3b;
}
.progress[data-progress-percentage^="71"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="71"]:after {
  width: 71%;
  background-color: #bcba3c;
}
.progress[data-progress-percentage^="72"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="72"]:after {
  width: 72%;
  background-color: #b9ba3c;
}
.progress[data-progress-percentage^="73"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="73"]:after {
  width: 73%;
  background-color: #b7b93d;
}
.progress[data-progress-percentage^="74"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="74"]:after {
  width: 74%;
  background-color: #b5b93e;
}
.progress[data-progress-percentage^="75"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="75"]:after {
  width: 75%;
  background-color: #b3b83f;
}
.progress[data-progress-percentage^="76"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="76"]:after {
  width: 76%;
  background-color: #b0b73f;
}
.progress[data-progress-percentage^="77"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="77"]:after {
  width: 77%;
  background-color: #aeb740;
}
.progress[data-progress-percentage^="78"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="78"]:after {
  width: 78%;
  background-color: #acb641;
}
.progress[data-progress-percentage^="79"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="79"]:after {
  width: 79%;
  background-color: #a9b641;
}
.progress[data-progress-percentage^="80"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="80"]:after {
  width: 80%;
  background-color: #a7b542;
}
.progress[data-progress-percentage^="81"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="81"]:after {
  width: 81%;
  background-color: #a5b543;
}
.progress[data-progress-percentage^="82"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="82"]:after {
  width: 82%;
  background-color: #a2b443;
}
.progress[data-progress-percentage^="83"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="83"]:after {
  width: 83%;
  background-color: #a0b444;
}
.progress[data-progress-percentage^="84"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="84"]:after {
  width: 84%;
  background-color: #9eb345;
}
.progress[data-progress-percentage^="85"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="85"]:after {
  width: 85%;
  background-color: #9cb246;
}
.progress[data-progress-percentage^="86"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="86"]:after {
  width: 86%;
  background-color: #99b246;
}
.progress[data-progress-percentage^="87"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="87"]:after {
  width: 87%;
  background-color: #97b147;
}
.progress[data-progress-percentage^="88"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="88"]:after {
  width: 88%;
  background-color: #95b148;
}
.progress[data-progress-percentage^="89"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="89"]:after {
  width: 89%;
  background-color: #92b048;
}
.progress[data-progress-percentage^="90"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="90"]:after {
  width: 90%;
  background-color: #90b049;
}
.progress[data-progress-percentage^="91"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="91"]:after {
  width: 91%;
  background-color: #8eaf4a;
}
.progress[data-progress-percentage^="92"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="92"]:after {
  width: 92%;
  background-color: #8bae4a;
}
.progress[data-progress-percentage^="93"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="93"]:after {
  width: 93%;
  background-color: #89ae4b;
}
.progress[data-progress-percentage^="94"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="94"]:after {
  width: 94%;
  background-color: #87ad4c;
}
.progress[data-progress-percentage^="95"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="95"]:after {
  width: 95%;
  background-color: #85ad4d;
}
.progress[data-progress-percentage^="96"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="96"]:after {
  width: 96%;
  background-color: #82ac4d;
}
.progress[data-progress-percentage^="97"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="97"]:after {
  width: 97%;
  background-color: #80ac4e;
}
.progress[data-progress-percentage^="98"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="98"]:after {
  width: 98%;
  background-color: #7eab4f;
}
.progress[data-progress-percentage^="99"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="99"]:after {
  width: 99%;
  background-color: #7bab4f;
}
.progress[data-progress-percentage^="100"]:after,
.progress[data-progress-type="bar"][data-progress-percentage^="100"]:after {
  width: 100%;
  background-color: #79aa50;
}
.progress[data-progress-percentage]:after,
.progress[data-progress-type="bar"][data-progress-percentage]:after {
  -webkit-transition: width 0.08s linear;
  -moz-transition: width 0.08s linear;
  -ms-transition: width 0.08s linear;
  transition: width 0.08s linear;
}
ol.progress,
ol.progress[data-progress-type="bar"] {
  height: auto;
  width: 100%;
  padding: 0px;
  border: 0px;
  display: table;
  line-height: 40px;
  background: transparent;
  position: relative;
  margin-left: -2px;
}
ol.progress li,
ol.progress[data-progress-type="bar"] li {
  width: 25%;
  text-indent: 0px;
  display: table-cell;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  position: relative;
  font-size: 20px;
  font-family: DroidRegular, Arial, sans-serif;
}
ol.progress li span:last-child,
ol.progress[data-progress-type="bar"] li span:last-child {
  margin-left: 4px;
}
ol.progress li:nth-last-of-type(3):first-of-type,
ol.progress[data-progress-type="bar"] li:nth-last-of-type(3):first-of-type,
ol.progress li:nth-last-of-type(3):first-of-type ~ li,
ol.progress[data-progress-type="bar"] li:nth-last-of-type(3):first-of-type ~ li {
  width: 33.3%;
}
@media screen and (max-width: 659.9px) {
  ol.progress li:nth-last-of-type(3):first-of-type.active,
  ol.progress[data-progress-type="bar"] li:nth-last-of-type(3):first-of-type.active,
  ol.progress li:nth-last-of-type(3):first-of-type ~ li.active,
  ol.progress[data-progress-type="bar"] li:nth-last-of-type(3):first-of-type ~ li.active {
    text-indent: 0px;
    width: 100%;
  }
}
ol.progress li:nth-last-of-type(2):first-of-type,
ol.progress[data-progress-type="bar"] li:nth-last-of-type(2):first-of-type,
ol.progress li:nth-last-of-type(2):first-of-type ~ li,
ol.progress[data-progress-type="bar"] li:nth-last-of-type(2):first-of-type ~ li {
  width: 50%;
}
ol.progress li + li,
ol.progress[data-progress-type="bar"] li + li {
  margin-left: 4px;
}
ol.progress li a,
ol.progress[data-progress-type="bar"] li a {
  color: #333333;
  text-decoration: none;
}
ol.progress li a:after,
ol.progress[data-progress-type="bar"] li a:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
ol.progress li a:hover,
ol.progress[data-progress-type="bar"] li a:hover {
  text-decoration: none;
}
ol.progress li.active a,
ol.progress[data-progress-type="bar"] li.active a {
  color: #FFFFFF;
}
ol.progress li:before,
ol.progress[data-progress-type="bar"] li:before,
ol.progress li:after,
ol.progress[data-progress-type="bar"] li:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 0px;
  right: 3px;
  height: 20px;
  background: #F0F4F8;
  -webkit-transform: skewX(22deg);
  -ms-transform: skewX(22deg);
  transform: skewX(22deg);
  z-index: -1;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
ol.progress li:after,
ol.progress[data-progress-type="bar"] li:after {
  top: 20px;
  -webkit-transform: skewX(-22deg);
  -ms-transform: skewX(-22deg);
  transform: skewX(-22deg);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 4px;
}
ol.progress li:first-child::before,
ol.progress[data-progress-type="bar"] li:first-child::before {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  height: 40px;
  left: 0px;
  right: 7px;
  border-radius: 4px;
}
ol.progress li:first-child::after,
ol.progress[data-progress-type="bar"] li:first-child::after {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  height: 0;
  top: 0;
  left: auto;
  right: 0px;
  background: transparent;
  border-color: transparent transparent transparent #F0F4F8;
  border-width: 20px 0px 20px 8px;
  border-style: solid;
  border-radius: 4px;
}
ol.progress li:last-child,
ol.progress[data-progress-type="bar"] li:last-child {
  background-color: #F0F4F8;
  -webkit-transform: translateX(4px);
  -ms-transform: translateX(4px);
  transform: translateX(4px);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
ol.progress li:last-child::before,
ol.progress[data-progress-type="bar"] li:last-child::before {
  -webkit-transform: skewX(22deg);
  -ms-transform: skewX(22deg);
  transform: skewX(22deg);
  height: 20px;
  top: 0;
  left: -4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
ol.progress li:last-child::after,
ol.progress[data-progress-type="bar"] li:last-child::after {
  -webkit-transform: skewX(-22deg);
  -ms-transform: skewX(-22deg);
  transform: skewX(-22deg);
  height: 20px;
  top: 20px;
  left: -4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
ol.progress li.active,
ol.progress[data-progress-type="bar"] li.active {
  color: #FFFFFF;
}
ol.progress li.active:before,
ol.progress[data-progress-type="bar"] li.active:before,
ol.progress li.active:after,
ol.progress[data-progress-type="bar"] li.active:after {
  background: #004788;
}
ol.progress li.active:first-child::after,
ol.progress[data-progress-type="bar"] li.active:first-child::after {
  border-color: transparent transparent transparent #004788;
  background: transparent;
  top: 1px;
}
ol.progress li.active:last-child,
ol.progress[data-progress-type="bar"] li.active:last-child {
  background-color: #004788;
}
ol.progress li.linked:hover::before,
ol.progress[data-progress-type="bar"] li.linked:hover::before,
ol.progress li.linked:hover::after,
ol.progress[data-progress-type="bar"] li.linked:hover::after {
  background: #00396D;
}
ol.progress li.linked:hover a,
ol.progress[data-progress-type="bar"] li.linked:hover a {
  color: #FFFFFF;
}
ol.progress li.linked:first-child:hover::after,
ol.progress[data-progress-type="bar"] li.linked:first-child:hover::after {
  border-color: transparent transparent transparent #00396D;
  background: transparent;
}
@media all and (min-width: 659.9px) and (max-width: 979.9px) {
  ol.progress li:not(.active) span,
  ol.progress[data-progress-type="bar"] li:not(.active) span {
    display: none;
  }
  ol.progress li:first-child:before,
  ol.progress[data-progress-type="bar"] li:first-child:before {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    height: 40px;
    width: 96%;
  }
  ol.progress li:first-child:after,
  ol.progress[data-progress-type="bar"] li:first-child:after {
    right: 1px;
  }
}
@media screen and (max-width: 659.9px) {
  ol.progress[data-progress-type="bar"] {
    table-layout: fixed;
  }
  ol.progress[data-progress-type="bar"] li {
    width: 40px;
  }
  ol.progress[data-progress-type="bar"] li.active {
    width: 100%;
  }
  ol.progress[data-progress-type="bar"] li:not(.active) span {
    display: none;
  }
  ol.progress[data-progress-type="bar"] li.active:first-child::before {
    width: 96%;
  }
  ol.progress[data-progress-type="bar"] li.active:first-child::after {
    right: 0.5px;
  }
}
.backdrop-b1-light94 .progress[data-progress-type="bar"] li:before,
.backdrop-b1-light94 .progress[data-progress-type="bar"] li:after,
.backdrop-b1-light94 .progress[data-progress-type="bar"] li:last-child {
  background-color: #D1DEEA;
}
.backdrop-b1-light94 .progress[data-progress-type="bar"] li:first-child::after {
  border-left-color: #D1DEEA;
}
form.search .field {
  padding-top: 0px;
  vertical-align: top;
  float: none;
}
form.search .field * {
  float: none;
}
form.search .search.field input {
  padding-right: 40px;
}
form.search button[type="submit"] {
  width: auto;
}
form.search button[type="reset"] {
  display: none;
  cursor: pointer;
  background: transparent;
  border: 0px;
  position: absolute;
  padding: 0px;
  top: 50%;
  margin-top: -12px;
  right: 8px;
  z-index: 10;
  outline: none;
}
form.search.xl button[type="reset"] {
  margin-top: -16px;
}
/* using form validation to activate reset button */
form.search .search.field input:valid ~ button[type="reset"] {
  display: inline-block;
}
/* we need to separate this, otherwise the selector fails */
form.search .search.field input.valid ~ button[type="reset"] {
  display: inline-block;
}
/* input and button are conjoined */
form.search.joined .field[class] + .field[class] {
  padding: 0px;
}
form.search.joined .search.field input {
  border-radius: 3px 0px 0px 3px;
}
form.search.joined .action.field button {
  border-radius: 0px 5px 5px 0px;
  margin: 0px;
}
form.search .action.field {
  white-space: nowrap;
  word-wrap: normal;
}
form.search .action.field .button .icon {
  float: left;
}
/* necessary for searchfield e.g. helpcenter */
/* if we floated the icon, the table cell would only use the width of the text to calculate its size, thus removing a vital part of the padding */
/* overwrite ellipses */
form.search:not(.joined) .action.field button {
  text-overflow: clip;
}
/* position the icon in the button */
form.search.fullwidth:not(.small-icon):not(.large-icon):not(.joined) .action.field button .icon {
  float: none;
  vertical-align: text-bottom;
}
/* remove the padding in s-view when nbutton is under the input field */
@media all and (max-width: 659.9px) {
  form.search:not(.joined) .half-size + .quarter-size.action.field,
  form.search:not(.joined) .half-size + .min-size.action.field {
    padding-left: 0px;
  }
  form.search.fullwidth:not(.small-icon):not(.large-icon):not(.joined) .action.field button .icon {
    margin-right: -7px;
  }
}
body.show-focus-indicator form.search input:focus,
body.show-focus-indicator form.search button[type="submit"]:focus {
  position: relative;
  z-index: 999;
}
body.show-focus-indicator form.search input:focus + button[type="reset"] {
  z-index: 999;
}
[data-sticky-anchor] {
  display: none;
  position: sticky;
  width: 100%;
  z-index: -1;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
[data-sticky-anchor][data-sticky-anchor="_self"],
[data-sticky-anchor].show {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  z-index: 111;
}
[data-sticky-anchor][data-sticky-position="bottom"] {
  top: unset;
  bottom: 0;
}
[data-sticky-anchor][data-sticky-position="top"] {
  top: 0;
  bottom: unset;
}
[data-sticky-anchor][data-sticky-position="oriented"] {
  top: 0;
  bottom: 0;
}
.spoiler {
  display: inline-block;
  font-size: 12px;
  line-height: 25px;
  text-align: center;
  width: 110px;
  height: 110px;
  margin: 10px;
  box-sizing: border-box;
  padding: 15px 0px 0px;
  cursor: default;
}
.spoiler.s {
  width: 95px;
  height: 95px;
  padding: 16px 0px;
  font-size: 12px;
  line-height: 16px;
}
.spoiler.l {
  width: 125px;
  height: 125px;
  font-size: 14px;
  line-height: 28px;
}
.spoiler em,
.spoiler strong {
  font-style: normal;
  font-size: 28px;
  line-height: 30px;
  padding-top: 2px;
  font-weight: 700;
  letter-spacing: -0.025em;
  display: block;
}
.spoiler strong {
  letter-spacing: -0.075em;
}
.spoiler.l em,
.spoiler.l strong {
  font-size: 28px;
  line-height: 30px;
}
.spoiler.s em,
.spoiler.s strong {
  font-size: 24px;
  line-height: 28px;
}
.spoiler em sup,
.spoiler strong sup {
  font-size: 16px;
  line-height: 18px;
}
.spoiler.s em sup,
.spoiler.s strong sup {
  font-size: 10px;
  line-height: 12px;
}
.spoiler.round {
  border-radius: 50%;
}
.spoiler {
  background-color: #008000;
  color: #FFFFFF;
}
.spoiler.crm {
  background-color: #1C8AD9;
  color: #FFFFFF;
}
.spoiler.warn {
  background-color: #BF0000;
  color: #FFFFFF;
}
/* begin: define spoiler layouts for linked spoilers */
a.spoiler.linked:hover,
a.spoiler.linked:focus {
  cursor: pointer;
  text-decoration: none;
}
a.spoiler.linked::after {
  content: '';
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background-color: #000;
  z-index: 1;
  transition: 0.15s ease-out;
}
a.spoiler.linked.round::after {
  border-radius: 50%;
}
a.spoiler.linked:hover::after {
  opacity: 0.1;
}
/* end: define spoiler layouts for linked spoilers */
/* Price format */
.price.xxl {
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 700;
}
.price.xxl strong,
.price.xxl em {
  font-style: normal;
}
.price.xxl strong sup,
.price.xxl em sup {
  position: relative;
  bottom: 24px;
}
.price.xxl strong sup:first-of-type,
.price.xxl em sup:first-of-type {
  top: -34px;
  left: -4px;
}
.price.xxl strong sup:last-of-type,
.price.xxl em sup:last-of-type {
  left: 6px;
}
.price.xxl strong sub,
.price.xxl em sub {
  position: relative;
  margin-left: -31px;
  bottom: 4px;
}
@media screen and (max-width: 979.9px) {
  .price.xxl strong sup,
  .price.xxl em sup {
    bottom: 10px;
  }
  .price.xxl strong sup:first-of-type,
  .price.xxl em sup:first-of-type {
    top: -10px;
  }
  .price.xxl strong sub,
  .price.xxl em sub {
    margin-left: -26px;
  }
}
_:-ms-lang(x),
:root .price.xxl em sub {
  margin-left: -26px;
}
@media screen and (max-width: 979.9px) {
  _:-ms-lang(x),
  :root .price.xxl em sub {
    margin-left: -20px;
  }
}
[data-cc="table"]:not(.container) {
  width: 100%;
}
[data-cc="table"] .button span,
[data-cc="table"] .button:focus span,
[data-cc="table"] .button:hover span,
[data-cc="table"] .button:visited span {
  white-space: normal;
  text-align: left;
}
[data-cc="table"] [data-table-row] {
  display: flex;
  position: relative;
  flex-flow: row nowrap;
  width: 100%;
}
[data-cc="table"] [data-table-row] > * {
  flex: 1 1 0px;
  word-break: break-word;
  padding: 16px 10px;
}
[data-cc="table"][data-table-ruler="horizontal"] [data-table-row] {
  border-top: 1px #DADADA solid;
}
[data-cc="table"][data-table-ruler="horizontal"] [data-table-row]:last-of-type {
  border-bottom: 1px #DADADA solid;
}
[data-cc="table"][data-table-ruler="vertical"] [data-table-row] > div {
  border-left: 1px #DADADA solid;
}
[data-cc="table"][data-table-ruler="vertical"] [data-table-row] > div:last-of-type {
  border-right: 1px #DADADA solid;
}
[data-cc="table"][data-table-ruler="matrix"] [data-table-row] > div {
  border-left: 1px #DADADA solid;
}
[data-cc="table"][data-table-ruler="matrix"] [data-table-row] > div:last-of-type {
  border-right: 1px #DADADA solid;
}
[data-cc="table"][data-table-ruler="matrix"] [data-table-row] {
  border-top: 1px #DADADA solid;
}
[data-cc="table"][data-table-ruler="matrix"] [data-table-row]:last-of-type {
  border-bottom: 1px #DADADA solid;
}
[data-cc="table"][data-table-spacing="none"] [data-table-row] > * {
  padding-top: 0px;
  padding-bottom: 0px;
}
[data-cc="table"][data-table-spacing="small"] [data-table-row] > * {
  padding-top: 8px;
  padding-bottom: 8px;
}
[data-cc="table"][data-table-spacing="big"] [data-table-row] > * {
  padding-top: 24px;
  padding-bottom: 24px;
}
@media screen and (min-width: 660px) {
  [data-cc="table"][data-table-proportion] [data-table-row] > * {
    flex-basis: auto;
  }
  [data-cc="table"][data-table-proportion="2:1"] [data-table-row] > *:nth-of-type(1) {
    width: 66.66666667%;
  }
  [data-cc="table"][data-table-proportion="2:1"] [data-table-row] > *:nth-of-type(2) {
    width: 33.33333333%;
  }
  [data-cc="table"][data-table-proportion="2:1:1"] [data-table-row] > *:nth-of-type(1) {
    width: 50%;
  }
  [data-cc="table"][data-table-proportion="2:1:1"] [data-table-row] > *:nth-of-type(2) {
    width: 25%;
  }
  [data-cc="table"][data-table-proportion="2:1:1"] [data-table-row] > *:nth-of-type(3) {
    width: 25%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1"] [data-table-row] > *:nth-of-type(1) {
    width: 40%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1"] [data-table-row] > *:nth-of-type(2) {
    width: 20%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1"] [data-table-row] > *:nth-of-type(3) {
    width: 20%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1"] [data-table-row] > *:nth-of-type(4) {
    width: 20%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1:1"] [data-table-row] > *:nth-of-type(1) {
    width: 33.33333333%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1:1"] [data-table-row] > *:nth-of-type(2) {
    width: 16.66666667%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1:1"] [data-table-row] > *:nth-of-type(3) {
    width: 16.66666667%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1:1"] [data-table-row] > *:nth-of-type(4) {
    width: 16.66666667%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1:1"] [data-table-row] > *:nth-of-type(5) {
    width: 16.66666667%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1:1:1"] [data-table-row] > *:nth-of-type(1) {
    width: 28.57142857%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1:1:1"] [data-table-row] > *:nth-of-type(2) {
    width: 14.28571429%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1:1:1"] [data-table-row] > *:nth-of-type(3) {
    width: 14.28571429%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1:1:1"] [data-table-row] > *:nth-of-type(4) {
    width: 14.28571429%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1:1:1"] [data-table-row] > *:nth-of-type(5) {
    width: 14.28571429%;
  }
  [data-cc="table"][data-table-proportion="2:1:1:1:1:1"] [data-table-row] > *:nth-of-type(6) {
    width: 14.28571429%;
  }
  [data-cc="table"][data-table-proportion="3:1:1"] [data-table-row] > *:nth-of-type(1) {
    width: 60%;
  }
  [data-cc="table"][data-table-proportion="3:1:1"] [data-table-row] > *:nth-of-type(2) {
    width: 20%;
  }
  [data-cc="table"][data-table-proportion="3:1:1"] [data-table-row] > *:nth-of-type(3) {
    width: 20%;
  }
  [data-cc="table"][data-table-proportion="3:1:1:1"] [data-table-row] > *:nth-of-type(1) {
    width: 50%;
  }
  [data-cc="table"][data-table-proportion="3:1:1:1"] [data-table-row] > *:nth-of-type(2) {
    width: 16.66666667%;
  }
  [data-cc="table"][data-table-proportion="3:1:1:1"] [data-table-row] > *:nth-of-type(3) {
    width: 16.66666667%;
  }
  [data-cc="table"][data-table-proportion="3:1:1:1"] [data-table-row] > *:nth-of-type(4) {
    width: 16.66666667%;
  }
  [data-cc="table"][data-table-proportion="4:1:1"] [data-table-row] > *:nth-of-type(1) {
    width: 66.66666667%;
  }
  [data-cc="table"][data-table-proportion="4:1:1"] [data-table-row] > *:nth-of-type(2) {
    width: 16.66666667%;
  }
  [data-cc="table"][data-table-proportion="4:1:1"] [data-table-row] > *:nth-of-type(3) {
    width: 16.66666667%;
  }
  [data-cc="table"][data-table-proportion="4:1:1:1"] [data-table-row] > *:nth-of-type(1) {
    width: 57.14285714%;
  }
  [data-cc="table"][data-table-proportion="4:1:1:1"] [data-table-row] > *:nth-of-type(2) {
    width: 14.28571429%;
  }
  [data-cc="table"][data-table-proportion="4:1:1:1"] [data-table-row] > *:nth-of-type(3) {
    width: 14.28571429%;
  }
  [data-cc="table"][data-table-proportion="4:1:1:1"] [data-table-row] > *:nth-of-type(4) {
    width: 14.28571429%;
  }
}
@media screen and (max-width: 659.9px) {
  [data-cc="table"][data-table-leader-column] [data-table-row] {
    flex-direction: column;
    -ms-flex-flow: row wrap;
  }
  [data-cc="table"][data-table-leader-column][data-table-ruler="vertical"] [data-table-row] > div:not(:last-of-type),
  [data-cc="table"][data-table-leader-column][data-table-ruler="matrix"] [data-table-row] > div:not(:last-of-type) {
    border-right: 1px #DADADA solid;
  }
  [data-cc="table"][data-table-leader-column="1"] [data-table-row="header"] > *:not(:nth-of-type(1)) {
    display: none;
  }
  [data-cc="table"][data-table-leader-column="1"] [data-table-row="body"] > div {
    display: flex;
    flex: 0 0 100%;
  }
  [data-cc="table"][data-table-leader-column="1"] [data-table-row="body"] > div[data-alignment="left"] {
    justify-content: flex-start;
  }
  [data-cc="table"][data-table-leader-column="1"] [data-table-row="body"] > div[data-alignment="center"] {
    justify-content: center;
  }
  [data-cc="table"][data-table-leader-column="1"] [data-table-row="body"] > div[data-alignment="right"] {
    justify-content: flex-end;
  }
  [data-cc="table"][data-table-leader-column="1"] [data-table-row="body"] > div[data-alignment="justify"] {
    justify-content: space-between;
  }
  [data-cc="table"][data-table-leader-column="1"] [data-table-row="body"] > div:nth-of-type(1) {
    order: -1;
  }
  [data-cc="table"][data-table-leader-column="1"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(1)):not([class*="backdrop"]):before {
    content: attr(data-table-cell-headline);
    position: relative;
    height: auto;
    width: 50%;
    text-align: left;
  }
  [data-cc="table"][data-table-leader-column="1"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(1))[class*="backdrop"]:after {
    content: attr(data-table-cell-headline);
    position: relative;
    height: auto;
    width: 50%;
    order: -1;
  }
  [data-cc="table"][data-table-leader-column="1"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(1)) > * {
    width: 50%;
  }
  [data-cc="table"][data-table-leader-column="2"] [data-table-row="header"] > *:not(:nth-of-type(2)) {
    display: none;
  }
  [data-cc="table"][data-table-leader-column="2"] [data-table-row="body"] > div {
    display: flex;
    flex: 0 0 100%;
  }
  [data-cc="table"][data-table-leader-column="2"] [data-table-row="body"] > div[data-alignment="left"] {
    justify-content: flex-start;
  }
  [data-cc="table"][data-table-leader-column="2"] [data-table-row="body"] > div[data-alignment="center"] {
    justify-content: center;
  }
  [data-cc="table"][data-table-leader-column="2"] [data-table-row="body"] > div[data-alignment="right"] {
    justify-content: flex-end;
  }
  [data-cc="table"][data-table-leader-column="2"] [data-table-row="body"] > div[data-alignment="justify"] {
    justify-content: space-between;
  }
  [data-cc="table"][data-table-leader-column="2"] [data-table-row="body"] > div:nth-of-type(2) {
    order: -1;
  }
  [data-cc="table"][data-table-leader-column="2"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(2)):not([class*="backdrop"]):before {
    content: attr(data-table-cell-headline);
    position: relative;
    height: auto;
    width: 50%;
    text-align: left;
  }
  [data-cc="table"][data-table-leader-column="2"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(2))[class*="backdrop"]:after {
    content: attr(data-table-cell-headline);
    position: relative;
    height: auto;
    width: 50%;
    order: -1;
  }
  [data-cc="table"][data-table-leader-column="2"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(2)) > * {
    width: 50%;
  }
  [data-cc="table"][data-table-leader-column="3"] [data-table-row="header"] > *:not(:nth-of-type(3)) {
    display: none;
  }
  [data-cc="table"][data-table-leader-column="3"] [data-table-row="body"] > div {
    display: flex;
    flex: 0 0 100%;
  }
  [data-cc="table"][data-table-leader-column="3"] [data-table-row="body"] > div[data-alignment="left"] {
    justify-content: flex-start;
  }
  [data-cc="table"][data-table-leader-column="3"] [data-table-row="body"] > div[data-alignment="center"] {
    justify-content: center;
  }
  [data-cc="table"][data-table-leader-column="3"] [data-table-row="body"] > div[data-alignment="right"] {
    justify-content: flex-end;
  }
  [data-cc="table"][data-table-leader-column="3"] [data-table-row="body"] > div[data-alignment="justify"] {
    justify-content: space-between;
  }
  [data-cc="table"][data-table-leader-column="3"] [data-table-row="body"] > div:nth-of-type(3) {
    order: -1;
  }
  [data-cc="table"][data-table-leader-column="3"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(3)):not([class*="backdrop"]):before {
    content: attr(data-table-cell-headline);
    position: relative;
    height: auto;
    width: 50%;
    text-align: left;
  }
  [data-cc="table"][data-table-leader-column="3"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(3))[class*="backdrop"]:after {
    content: attr(data-table-cell-headline);
    position: relative;
    height: auto;
    width: 50%;
    order: -1;
  }
  [data-cc="table"][data-table-leader-column="3"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(3)) > * {
    width: 50%;
  }
  [data-cc="table"][data-table-leader-column="4"] [data-table-row="header"] > *:not(:nth-of-type(4)) {
    display: none;
  }
  [data-cc="table"][data-table-leader-column="4"] [data-table-row="body"] > div {
    display: flex;
    flex: 0 0 100%;
  }
  [data-cc="table"][data-table-leader-column="4"] [data-table-row="body"] > div[data-alignment="left"] {
    justify-content: flex-start;
  }
  [data-cc="table"][data-table-leader-column="4"] [data-table-row="body"] > div[data-alignment="center"] {
    justify-content: center;
  }
  [data-cc="table"][data-table-leader-column="4"] [data-table-row="body"] > div[data-alignment="right"] {
    justify-content: flex-end;
  }
  [data-cc="table"][data-table-leader-column="4"] [data-table-row="body"] > div[data-alignment="justify"] {
    justify-content: space-between;
  }
  [data-cc="table"][data-table-leader-column="4"] [data-table-row="body"] > div:nth-of-type(4) {
    order: -1;
  }
  [data-cc="table"][data-table-leader-column="4"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(4)):not([class*="backdrop"]):before {
    content: attr(data-table-cell-headline);
    position: relative;
    height: auto;
    width: 50%;
    text-align: left;
  }
  [data-cc="table"][data-table-leader-column="4"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(4))[class*="backdrop"]:after {
    content: attr(data-table-cell-headline);
    position: relative;
    height: auto;
    width: 50%;
    order: -1;
  }
  [data-cc="table"][data-table-leader-column="4"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(4)) > * {
    width: 50%;
  }
  [data-cc="table"][data-table-leader-column="5"] [data-table-row="header"] > *:not(:nth-of-type(5)) {
    display: none;
  }
  [data-cc="table"][data-table-leader-column="5"] [data-table-row="body"] > div {
    display: flex;
    flex: 0 0 100%;
  }
  [data-cc="table"][data-table-leader-column="5"] [data-table-row="body"] > div[data-alignment="left"] {
    justify-content: flex-start;
  }
  [data-cc="table"][data-table-leader-column="5"] [data-table-row="body"] > div[data-alignment="center"] {
    justify-content: center;
  }
  [data-cc="table"][data-table-leader-column="5"] [data-table-row="body"] > div[data-alignment="right"] {
    justify-content: flex-end;
  }
  [data-cc="table"][data-table-leader-column="5"] [data-table-row="body"] > div[data-alignment="justify"] {
    justify-content: space-between;
  }
  [data-cc="table"][data-table-leader-column="5"] [data-table-row="body"] > div:nth-of-type(5) {
    order: -1;
  }
  [data-cc="table"][data-table-leader-column="5"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(5)):not([class*="backdrop"]):before {
    content: attr(data-table-cell-headline);
    position: relative;
    height: auto;
    width: 50%;
    text-align: left;
  }
  [data-cc="table"][data-table-leader-column="5"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(5))[class*="backdrop"]:after {
    content: attr(data-table-cell-headline);
    position: relative;
    height: auto;
    width: 50%;
    order: -1;
  }
  [data-cc="table"][data-table-leader-column="5"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(5)) > * {
    width: 50%;
  }
  [data-cc="table"][data-table-leader-column="6"] [data-table-row="header"] > *:not(:nth-of-type(6)) {
    display: none;
  }
  [data-cc="table"][data-table-leader-column="6"] [data-table-row="body"] > div {
    display: flex;
    flex: 0 0 100%;
  }
  [data-cc="table"][data-table-leader-column="6"] [data-table-row="body"] > div[data-alignment="left"] {
    justify-content: flex-start;
  }
  [data-cc="table"][data-table-leader-column="6"] [data-table-row="body"] > div[data-alignment="center"] {
    justify-content: center;
  }
  [data-cc="table"][data-table-leader-column="6"] [data-table-row="body"] > div[data-alignment="right"] {
    justify-content: flex-end;
  }
  [data-cc="table"][data-table-leader-column="6"] [data-table-row="body"] > div[data-alignment="justify"] {
    justify-content: space-between;
  }
  [data-cc="table"][data-table-leader-column="6"] [data-table-row="body"] > div:nth-of-type(6) {
    order: -1;
  }
  [data-cc="table"][data-table-leader-column="6"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(6)):not([class*="backdrop"]):before {
    content: attr(data-table-cell-headline);
    position: relative;
    height: auto;
    width: 50%;
    text-align: left;
  }
  [data-cc="table"][data-table-leader-column="6"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(6))[class*="backdrop"]:after {
    content: attr(data-table-cell-headline);
    position: relative;
    height: auto;
    width: 50%;
    order: -1;
  }
  [data-cc="table"][data-table-leader-column="6"] [data-table-row="body"] > div[data-table-cell-headline]:not(:nth-of-type(6)) > * {
    width: 50%;
  }
  [data-cc="table"][data-table-scrollbar-x="s"] {
    overflow-x: scroll;
  }
  [data-cc="table"][data-table-scrollbar-x="s"] [data-table-row] > * {
    min-width: 160px;
    max-width: 160px;
  }
  [data-cc="table"][data-table-scrollbar-x="s"][data-table-scrollbar-x-sticky="1"] [data-table-row="body"] > *:first-child {
    position: fixed;
    z-index: 10;
  }
  [data-cc="table"][data-table-scrollbar-x="s"][data-table-scrollbar-x-sticky="1"] [data-table-row="body"] *:not(:first-child) {
    position: relative;
    left: calc(160px + 10px*2);
  }
}
[data-cc="table"] .backdrop-b1-light82 + .backdrop-b1-light82:not(:hover)::before {
  background-color: #D1DEEA;
}
/** IE11 - smartphone viewport */
@media all and (-ms-high-contrast: none) and (max-width: 659.9px) {
  *::-ms-backdrop,
  [data-cc="table"] [data-table-row] > * {
    max-width: 100%;
    box-sizing: border-box;
  }
}
/** arrow */
[data-cc="table"][data-table-collapsable="true"] [data-table-row][data-collapse-trigger] {
  cursor: pointer;
}
[data-cc="table"][data-table-collapsable="true"] [data-table-row][data-collapse-trigger]::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  right: 4px;
  top: calc(16px - 4px);
  background: url(//img.ui-portal.de/cd/ci/mail.com/brand-410.svg) no-repeat 0% 0%, url(//img.ui-portal.de/cd/ci/mail.com/service-410.svg) no-repeat 0% 0%;
  background-size: auto 2592px, auto 2592px;
  background-position: 75% 1.25%;
  transition: transform 0.3s ease-in-out;
}
[data-cc="table"][data-table-collapsable="true"] [data-table-row][data-collapse-trigger][data-collapse-state="expanded"]::after {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
[data-cc="table"][data-table-collapsable="true"] > div > div:last-child {
  padding-right: 40px;
}
@media screen and (max-width: 659.9px) {
  [data-cc="table"][data-table-collapsable="true"][data-table-leader-column] > div > div:first-child {
    padding-right: 40px;
  }
  [data-cc="table"][data-table-collapsable="true"][data-table-leader-column] > div > div:last-child {
    padding-right: 10px;
  }
}
[data-cc="table"][data-table-collapsable="true"][data-table-spacing="small"] [data-collapse-trigger]::after {
  top: calc(8px - 4px);
}
[data-cc="table"][data-table-collapsable="true"][data-table-spacing="big"] [data-collapse-trigger]::after {
  top: calc(24px - 4px);
}
.tabs {
  list-style: none;
  padding-left: 0px;
  padding-right: 0px;
  margin-top: 0px;
  position: relative;
  margin-left: 0;
  margin-right: 0;
}
.tabs.module {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 14px;
  margin-bottom: 0px;
}
.tabs > li {
  display: inline;
  margin-right: 5px;
}
.tabs > li:last-child {
  margin-right: 0px;
}
.tab.button {
  background-color: transparent;
  color: #004788;
  border-color: #004788;
  margin-top: 10px;
  overflow: visible;
}
[class*='backdrop-'].inverted .tab.button {
  border-color: #FFFFFF;
  color: #FFFFFF;
  background-color: transparent;
}
.tab.button:hover,
.tab.button:focus {
  color: #FFFFFF;
  background-color: #00396D;
  border-color: #00396D;
}
[class*='backdrop-'].inverted [data-tab-active].tab.button,
[class*='backdrop-'].inverted .tab.button:hover,
[class*='backdrop-'].inverted .tab.button:focus {
  color: #333333;
  border-color: #F3F3F3;
  background-color: #F3F3F3;
}
[data-tab-active].tab.button {
  color: #FFFFFF;
  background-color: #004788;
  border-color: #004788;
  position: relative;
  cursor: default;
}
[data-tab-type="tab"] [data-tab-active]:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #004788 transparent transparent transparent;
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  -moz-transform: scale(1.01);
}
[data-tab-active].tab.button .icon:not(.white),
.tab.button:not([data-tab-active]) .icon.white {
  display: none;
}
.js .tab.module,
.js .tab.container,
.tab.module.nojs,
.tab.container.nojs {
  display: none;
}
.js .tab.module[data-tab-active],
.js .tab.teaser[data-tab-active],
.tab.module[data-tab-active].nojs,
.tab.teaser[data-tab-active].nojs {
  display: block;
}
.js .tab.container[data-tab-active],
.tab.container[data-tab-active].nojs {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.no-flex.js .tab.container[data-tab-active],
.no-flex .tab.container[data-tab-active].nojs {
  display: block;
}
[data-tab-type="switch"] span {
  vertical-align: middle;
  padding: 15px;
}
[data-tab-type="switch"] span[data-tab-item]:not([data-tab-active]) {
  cursor: pointer;
}
[data-tab-type="switch"] .switch-button {
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  padding: 0px;
  height: 26px;
  width: 40px;
  border-radius: 4px;
  background-color: #5CB82A;
}
[data-tab-type="switch"] .switch-button:before {
  content: "";
  width: 30px;
  height: 30px;
  display: inline-block;
  position: relative;
  left: -10px;
  top: -3px;
  background-color: #FFFFFF;
  border-radius: 50%;
  border: 1px solid #5CB82A;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
[data-tab-type="switch"] .switch-button.switched:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}
[data-tab-type="switch"] .switch-button.hidden {
  display: none;
}
[data-tab-type="switch"] {
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
}
@media screen and (min-width: 980px) {
  .js .tab.module.l-active,
  .js .tab.teaser.l-active,
  .tab.module.l-active.nojs,
  .tab.teaser.l-active.nojs {
    display: block;
  }
  .js .tab.container.l-active,
  .tab.container.l-active.nojs {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .js .tab.module.m-active,
  .js .tab.teaser.m-active,
  .tab.module.m-active.nojs,
  .tab.teaser.m-active.nojs {
    display: block;
  }
  .js .tab.container.m-active,
  .tab.container.m-active.nojs {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media screen and (max-width: 659.9px) {
  .js .tab.module.s-active,
  .js .tab.teaser.s-active,
  .tab.module.s-active.nojs,
  .tab.teaser.s-active.nojs {
    display: block;
  }
  .js .tab.container.s-active,
  .tab.container.s-active.nojs {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .tabs.s-select,
  .tabs.s-select.module,
  .fixed ~ .grid .tabs.s-select.module {
    height: 0px;
    z-index: 999;
    position: relative;
    padding-top: 41px;
    cursor: pointer;
  }
  .tabs.module .tab.button[data-tab-active] {
    left: 10px;
    right: 10px;
  }
  .tabs:hover .tab.button[data-tab-active],
  .tabs:focus .tab.button[data-tab-active] {
    width: auto;
  }
  .tabs.s-select .tab.button:not([data-tab-active]) {
    border-color: #C2C2C2;
    color: #333333;
    background-color: #FFFFFF;
    font-family: DroidRegular;
    font-size: 16px;
  }
  .tabs.s-select .tab.button:not([data-tab-active]):hover,
  .tabs.s-select .tab.button:not([data-tab-active]):focus {
    background-color: #D1DEEA;
  }
  .tabs.s-select .tab.button[data-tab-active] {
    position: absolute;
    display: block;
    top: 0px;
    z-index: -1;
    left: 0px;
    right: 0px;
  }
  .tabs.s-select .tab.button[data-tab-active] {
    top: 0px;
    margin-top: 0px;
    padding-bottom: 5px;
  }
  .tabs.s-select .tab.button[data-tab-active]:before {
    content: "";
    float: right;
    display: inline-block;
    background: url(//img.ui-portal.de/cd/ci/mail.com/brand-410.svg) no-repeat 0% 0%, url(//img.ui-portal.de/cd/ci/mail.com/service-410.svg) no-repeat 0% 0%;
    background-size: auto 1944px, auto 1944px;
    background-position: 25% 5%;
    width: 24px;
    height: 24px;
    margin-top: 3px;
    margin-right: -3px;
  }
  [class*='backdrop-'].inverted .tabs.s-select .tab.button[data-tab-active]:before {
    background-position-x: 0%;
  }
  .tabs.s-select .tab.button {
    display: none;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 6px;
    margin-top: -1px;
    border-width: 0px 1px 1px 1px;
  }
  .tabs.s-select.open .tab.button[data-tab-active] {
    border-radius: 4px 4px 0px 0px;
  }
  .tabs.s-select.open .tab.button {
    display: block;
    width: 100%;
    border-radius: 0px;
  }
  .tabs.s-select li {
    display: block;
    margin-right: 0px;
  }
}
/* Demo-Seiten */
.small.tabs .button,
.small.tabs .button.l {
  font-size: 12px;
  line-height: 24px;
  min-height: 24px;
}
.small.tabs [data-tab-active].tab.button:after {
  border-width: 6px 6px 0 6px;
  bottom: -6px;
  margin-left: -6px;
}
@media screen and (max-width: 659.9px) {
  .small.tabs {
    height: 0px;
    z-index: 999;
    position: relative;
    padding-top: 24px;
    background-color: ;
    border-radius: 4px;
  }
  .small.tabs:before {
    content: "";
    float: right;
    display: inline-block;
    background: url(//img.ui-portal.de/cd/ci/mail.com/brand-410.svg) no-repeat 0% 0%, url(//img.ui-portal.de/cd/ci/mail.com/service-410.svg) no-repeat 0% 0%;
    background-size: auto 1296px, auto 1296px;
    background-position: 25% 5%;
    width: 16px;
    height: 16px;
    margin: -19px 6px 0px 0px;
    vertical-align: 2px;
  }
  .small.tabs .tab.button[data-tab-active]:before {
    content: none;
  }
  /*
    .tabs:hover .tab.button:not(.active),
    .tabs:focus .tab.button:not(.active) {
        background-color: #F3F3F3;
    }
    .tabs:hover .tab.button:not(.active):hover,
    .tabs:hover .tab.button:not(.active):focus {
        background-color: #004788;
    }
    */
}
[data-tab-target]:not([data-tab-active]) {
  display: none;
}
[data-cc-sub="summary"] header,
[data-cc-sub="summary"] section,
[data-cc-sub="summary"] footer {
  display: flex;
  flex: 1 1 100%;
  padding: 10px;
}
[data-cc-sub="summary"] section {
  flex-direction: column;
}
[data-cc-sub="summary"] section .row {
  display: flex;
  flex: 1 1 auto;
  justify-content: space-between;
}
[data-cc-sub="summary"] section .row:not(:last-child) {
  margin-bottom: 10px;
}
[data-cc-sub="summary"] footer .button-wrapper {
  flex: 1 1 100%;
}
[data-cc="text"].vspace-s h3,
[data-cc="text"].vspace-s h4 {
  margin-bottom: 16px;
}
[data-cc="text"].vspace-s p + h1,
[data-cc="text"].vspace-s p + h2,
[data-cc="text"].vspace-s p + h3,
[data-cc="text"].vspace-s p + h4 {
  margin-top: 64px;
}
/* Important for styling issues (for example line-height), because this don't work on inline elements */
[data-cc="text"] small,
[data-cc="text"] big {
  display: inline-block;
}
/* Hotfix for the text component to overwrite the existing classes. Fix can be removed once the component has been redesigned to make it work flexible  */
form .module .flex-input-container [data-cc="text"][class*="l-"] {
  width: auto;
  padding: 0;
}
/* [WIP] Test for the new gap-concept of the landing pages */
/* section gap 40px top and bottom */
.grid > .container:not(.hero):not(.carousel) {
  padding-top: 40px;
  padding-bottom: 40px;
}
/* group gap 24px in addition */
.carousel .container.l-4 > .teaser.l-4:not(:last-child),
.grid > .container:not(.hero):not(.carousel) > .teaser,
.grid > .container:not(.hero):not(.carousel) .section-headline,
.grid > .container:not(.hero):not(.carousel) .group-headline,
.grid > .container:not(.hero):not(.carousel) .group-content > .teaser,
.grid > .container .carousel-teaser,
.tab > .teaser {
  margin-top: 24px;
  margin-bottom: 24px;
}
.grid > .container:not(.hero):not(.carousel) .group-headline {
  margin-bottom: 0px;
}
.grid > .container:not(.hero):not(.carousel) .group-content > .akkordeon:first-child,
.carousel .container.l-4 > .teaser.l-4:last-child,
.grid > .container > .container.module.fix {
  margin-top: 24px;
}
.grid > .container:not(.hero):not(.carousel) .group-content > .akkordeon:last-child,
.grid > .container > .container.module.fix > * {
  margin-bottom: 24px;
}
/* overwrite the 40px from teaser.css  */
.carousel .teaser[class],
.grid > .hero,
.tab.container > .module.vspace-s > *:last-child {
  margin-bottom: 0px;
}
/* 22.02.2019: Hotfix for tariff comparison page, tariffuxx, reducing vertical spaces */
/* 20.08.2019: changed selector from class to data-product, which in future steps have to be moved to the producs.css */
[data-product="comparison-portal"] .grid > .container:not(.hero):not(.carousel):not([data-cc="tabs"]) {
  padding-top: 0px;
  padding-bottom: 0px;
}
/* 23.04.2019: Hotfix for tariff comparison page for adding vertical spaces for tip teaser without group or section headline */
/* 20.08.2019: changed selector from class to data-product, which in future steps have to be moved to the producs.css */
[data-product="comparison-portal"] .grid > .container:not(.hero):not(.carousel) .tip {
  margin-top: 64px;
}
/* test poiler */
@media screen and (max-width: 659.9px) {
  .s-absolute {
    position: absolute;
    top: 0;
    right: 0;
  }
}
/**
  * Fix for form structure container
  * Overwrite css from grid module to display correct spacing
*/
form.container.l-12.center > .container.l-12.fix {
  padding-right: 0px;
  padding-left: 0px;
}
/**
  * Fix: conflict between tiled and vspace-bottom-0 classes in teaser
  */
.teaser.vspace-bottom-0.tiled {
  margin-bottom: 0px;
}