/*body {
    background: url(//img.ui-portal.de/cat/dummy/raster_l-12.gif) 50% 0 repeat-y;
}*/

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
}
html {
  height: 100%;
}
body {
  background-color: #FFFFFF;
  position: relative;
  min-width: 320px;
  min-height: 100%;
  word-wrap: break-word;
}
.grid,
.container,
.module {
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}
.grid.fix[class][class][class],
.container.fix[class][class][class],
.module.fix[class][class][class] {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 0px;
}
.grid.fullwidth,
.container.fullwidth,
.module.fullwidth {
  width: 100vw;
  -webkit-flex-basis: 100vw;
  flex-basis: 100vw;
  -webkit-flex-shrink: 1;
  -ms-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  justify-content: flex-start;
  max-width: 100%;
}
.grid,
.container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}
.grid {
  width: auto;
  margin: 0 auto;
  clear: both;
  position: relative;
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
}
.cropped {
  overflow: hidden;
}
.module {
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  overflow: visible;
}
.no-flex .grid,
.no-flex .container,
.no-flex .module {
  display: block;
}
.no-flex .container,
.no-flex .module {
  float: left;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}
.align-left {
  text-align: left;
}
.align-justify {
  text-align: justify;
}
.grid.left,
.container.left,
.module.left {
  margin-left: 0;
  margin-right: auto;
}
.grid.center,
.container.center,
.module.center {
  margin-left: auto;
  margin-right: auto;
}
.grid.right,
.container.right,
.module.right {
  margin-left: auto;
  margin-right: 0px;
}
span.left:not(.icon),
a.left:not(.icon),
p.left,
h1.left,
h2.left,
h3.left,
h4.left,
h5.left,
h6.left {
  float: left;
}
span.right:not(.icon),
a.right:not(.icon),
p.right,
h1.right,
h2.right,
h3.right,
h4.right,
h5.right,
h6.right {
  float: right;
}
.container.center {
  -webkit-justify-content: center;
  -ms-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.container.left {
  -webkit-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.container.right {
  -webkit-justify-content: flex-end;
  -ms-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.container.row {
  -webkit-justify-content: stretch;
  -ms-justify-content: stretch;
  -ms-flex-align: stretch;
  justify-content: stretch;
}
.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;
}
.l-1.fix, .l-2.fix, .l-3.fix, .l-4.fix, .l-5.fix, .l-6.fix, .l-7.fix, .l-8.fix, .l-9.fix, .l-10.fix, .l-11.fix, .l-12.fix {
  min-width: 0px;
  flex-grow: 0;
  flex-basis: auto;
}
/*  */
.no-flex .l-1, .no-flex .l-2, .no-flex .l-3, .no-flex .l-4, .no-flex .l-5, .no-flex .l-6, .no-flex .l-7, .no-flex .l-8, .no-flex .l-9, .no-flex .l-10, .no-flex .l-11, .no-flex .l-12 {
  min-width: 0px;
}
/*  */
@media screen and (min-width: 980px) {
  .l-0[class][class][class] {
    display: none;
  }
  /*  */
  .l-fix {
    min-width: 0px;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  /*  */
  /*  */
  .l-align-center {
    text-align: center;
  }
  .l-align-right {
    text-align: right;
  }
  .l-align-left {
    text-align: left;
  }
  .l-align-justify {
    text-align: justify;
  }
  .grid.l-center,
  .container.l-center,
  .module.l-center {
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .m-0[class][class][class] {
    display: none;
  }
  .l-1,
  .m-1[class] {
    width: 80px;
    min-width: 11.6796875vw;
    -webkit-flex-basis: 11.6796875vw;
    flex-basis: 11.6796875vw;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
  }
  .l-2,
  .m-2[class] {
    width: 160px;
    min-width: 23.359375vw;
    -webkit-flex-basis: 23.359375vw;
    flex-basis: 23.359375vw;
    -webkit-flex-grow: 2;
    -ms-flex-grow: 2;
    flex-grow: 2;
  }
  .l-3,
  .m-3[class] {
    width: 240px;
    min-width: 35.0390625vw;
    -webkit-flex-basis: 35.0390625vw;
    flex-basis: 35.0390625vw;
    -webkit-flex-grow: 3;
    -ms-flex-grow: 3;
    flex-grow: 3;
  }
  .l-4,
  .m-4[class] {
    width: 320px;
    min-width: 46.71875vw;
    -webkit-flex-basis: 46.71875vw;
    flex-basis: 46.71875vw;
    -webkit-flex-grow: 4;
    -ms-flex-grow: 4;
    flex-grow: 4;
  }
  .l-5,
  .m-5[class] {
    width: 400px;
    min-width: 58.3984375vw;
    -webkit-flex-basis: 58.3984375vw;
    flex-basis: 58.3984375vw;
    -webkit-flex-grow: 5;
    -ms-flex-grow: 5;
    flex-grow: 5;
  }
  .l-6,
  .m-6[class] {
    width: 480px;
    min-width: 70.078125vw;
    -webkit-flex-basis: 70.078125vw;
    flex-basis: 70.078125vw;
    -webkit-flex-grow: 6;
    -ms-flex-grow: 6;
    flex-grow: 6;
  }
  .l-7,
  .m-7[class] {
    width: 560px;
    min-width: 81.7578125vw;
    -webkit-flex-basis: 81.7578125vw;
    flex-basis: 81.7578125vw;
    -webkit-flex-grow: 7;
    -ms-flex-grow: 7;
    flex-grow: 7;
  }
  .l-8,
  .m-8[class] {
    width: 640px;
    min-width: 93.4375vw;
    -webkit-flex-basis: 93.4375vw;
    flex-basis: 93.4375vw;
    -webkit-flex-grow: 8;
    -ms-flex-grow: 8;
    flex-grow: 8;
  }
  .l-9,
  .l-10,
  .l-11,
  .l-12 {
    width: 640px;
    min-width: 93.4375vw;
    -webkit-flex-basis: 93.4375vw;
    flex-basis: 93.4375vw;
    -webkit-flex-grow: 8;
    -ms-flex-grow: 8;
    flex-grow: 8;
  }
  .m-1.fix[class], .m-2.fix[class], .m-3.fix[class], .m-4.fix[class], .m-5.fix[class], .m-6.fix[class], .m-7.fix[class], .m-8.fix[class] {
    min-width: 0px;
    flex-grow: 0;
    flex-basis: auto;
  }
  /*  */
  .no-flex .m-1, .no-flex .m-2, .no-flex .m-3, .no-flex .m-4, .no-flex .m-5, .no-flex .m-6, .no-flex .m-7, .no-flex .m-8 {
    min-width: 0px;
  }
  /*  */
  /*  */
  .m-fix[class] {
    min-width: 0px;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  /*  */
  /*  */
  .m-align-center {
    text-align: center;
  }
  .m-align-right {
    text-align: right;
  }
  .m-align-left {
    text-align: left;
  }
  .m-align-justify {
    text-align: justify;
  }
  .grid.m-center,
  .container.m-center,
  .module.m-center {
    margin-left: auto;
    margin-right: auto;
  }
  body.no-flex {
    max-width: 959.9px;
  }
}
@media screen and (max-width: 659.9px) {
  .grid > .container {
    max-width: 660px;
  }
  .s-0[class][class][class] {
    display: none;
  }
  .l-1,
  .m-1[class],
  .s-1[class][class] {
    width: 80px;
    min-width: 21.71875vw;
    -webkit-flex-basis: 21.71875vw;
    flex-basis: 21.71875vw;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
  }
  .l-2,
  .m-2[class],
  .s-2[class][class] {
    width: 160px;
    min-width: 43.4375vw;
    -webkit-flex-basis: 43.4375vw;
    flex-basis: 43.4375vw;
    -webkit-flex-grow: 2;
    -ms-flex-grow: 2;
    flex-grow: 2;
  }
  .l-3,
  .m-3[class],
  .s-3[class][class] {
    width: 240px;
    min-width: 65.15625vw;
    -webkit-flex-basis: 65.15625vw;
    flex-basis: 65.15625vw;
    -webkit-flex-grow: 3;
    -ms-flex-grow: 3;
    flex-grow: 3;
  }
  .l-4,
  .m-4[class],
  .s-4[class][class] {
    width: 320px;
    min-width: 86.875vw;
    -webkit-flex-basis: 86.875vw;
    flex-basis: 86.875vw;
    -webkit-flex-grow: 4;
    -ms-flex-grow: 4;
    flex-grow: 4;
  }
  .l-5,
  .m-5[class],
  .l-6,
  .m-6[class],
  .l-7,
  .m-7[class],
  .l-8,
  .m-8[class],
  .l-9,
  .l-10,
  .l-11,
  .l-12 {
    width: 320px;
    min-width: 86.875vw;
    -webkit-flex-basis: 86.875vw;
    flex-basis: 86.875vw;
    -webkit-flex-grow: 4;
    -ms-flex-grow: 4;
    flex-grow: 4;
  }
  .s-1.fix[class][class], .s-2.fix[class][class], .s-3.fix[class][class], .s-4.fix[class][class] {
    min-width: 0px;
    flex-grow: 0;
    flex-basis: auto;
  }
  /*  */
  .no-flex > .grid {
    max-width: 660px;
  }
  .no-flex .s-1, .no-flex .s-2, .no-flex .s-3, .no-flex .s-4 {
    min-width: 0px;
  }
  /*  */
  /*  */
  .s-fix[class][class] {
    min-width: 0px;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  /*  */
  /*  */
  .s-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;
  }
}
/*  */

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

body [data-show-nodes],
body [data-hide-nodes],
body [data-set-nodes],
body [data-unset-nodes],
body [data-toggle-nodes] {
	cursor: pointer;
}
body [data-show-nodes="#empty"],
body [data-hide-nodes="#empty"],
body [data-set-nodes="#empty"],
body [data-unset-nodes="#empty"],
body [data-toggle-nodes="#empty"] {
	cursor: default;
}
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;
}


@font-face {
    font-family: 'RobotoMedium';
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Medium-webfont.eot');
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Medium-webfont.woff') format('woff'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Medium-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'RobotoRegular';
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Regular-webfont.eot');
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Regular-webfont.woff') format('woff'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Regular-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'RobotoCondensed';
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Regular-webfont.eot');
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Regular-webfont.woff') format('woff'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Regular-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}


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

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

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}


[class][class][class].script {
    color: #2269C3;
    font-family: RobotoMedium;
}


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



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




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

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



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

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

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;
}
@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-top-0 {
  padding-top: 0px;
}
.vspace-bottom-0 {
  margin-bottom: 0;
}
/*@media_l_xl: ~"screen and (min-width: 960px)";*/
@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 - 1.0 */
.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: #F4D1DA;
	border-color: #F4D1DA;
}
.message.warning {
	background-color: #FCF3D1;
	border-color: #FCF3D1;
}
.message.success {
	background-color: #E2F2D9;
	border-color: #E2F2D9;
}
.message.info {
	background-color: #EEEEEE;
	border-color: #EEEEEE;
}
.message .icon + *:not(.icon) {
	font-family: "RobotoMedium", Arial, sans-serif;
}
.message:not(.big) .icon + *:not(.icon) {
    font-size: 16px;
    line-height: 24px;
	font-weight: 700;
}
@media all and (min-width: 660px) {
    .message .icon + *:not(.icon) {
        font-size: 20px;
        line-height: 28px;
        font-weight: 400;
    }
}
.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;
	}
}
.fullwidth.message {
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
	overflow: hidden;
	border-radius: 0;
}
.fullwidth.message > div {
	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;
}
/* basic teaser format */
.teaser {
    position: relative;
    align-self: flex-start;
}
.teaser.module {
    padding-left: 0px;
    padding-right: 0px;
}
.row .teaser {
    align-self: stretch;
}
.teaser img,
.teaser svg {
    width: 100%;
    height: auto;
}

.teaser .visual.unscaled img,
.teaser .visual.unscaled svg {
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.teaser .visual.align-center img,
.teaser .visual.align-center svg {
    margin-left: auto;
    margin-right: auto;
}

/** Difference between standard Teaser of MegaOnePage
 *	- because HTML structure is still old structure
 *	- has to be updated before using this CSS

@media screen and (min-width: 980px) {
    .teaser [class][class].l-center {
        float: none;
    }
    .teaser [class][class].l-left {
        float: left;
    }
    .teaser [class][class].l-right {
        float: right;
    }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
    .teaser [class][class].m-center {
        float: none;
    }
    .teaser [class][class].m-left {
        float: left;
    }
    .teaser [class][class].m-right {
        float: right;
    }
}
@media screen and (max-width: 659.9px) {
    .teaser [class][class].s-center {
        float: none;
    }
    .teaser [class][class].s-left {
        float: left;
    }
    .teaser [class][class].s-right {
        float: right;
    }
}
*/

/* apply 100% size only to background img (not for visual) */
.teaser .background img,
.teaser .background svg {
    width: 100%;
    height: auto;
    border-radius: 0px;
}

/*.teaser .content img:not([class*="l-"]),
.teaser .content svg:not([class*="l-"]) {
    width: auto;
}*/

.teaser .content img[class*="l-"],
.teaser .content svg[class*="l-"] {
    height: auto;
}
/*.content * + h1, .content * + h2, .content * + h3, .content * + h4,
.content * + .headline-1, .content * + .headline-2, .content * + .headline-3, .content * + .headline-4 {
    margin-top: 10px;
    margin-bottom: 0px;
}*/
/*.content h1 + p, .content .headline-1 + p,
.content h2 + p, .content .headline-2 + p,
.content h3 + p, .content .headline-3 + p,
.content h4 + p, .content .headline-4 + p {
    margin-top: 0px;
}
.content p + p {
    margin-top: 10px;
}*/
.background {
    position: relative;
    margin-right: -100%;
    z-index: -1;
    max-width: none;
    float: left;
    width: 100%;
    height: auto;
}
.background > img,
.background > svg {
    margin-top: 0px;
}
.background + .content .button,
.background + .content [role="button"] {
    text-shadow: none;
}

.teaser .visual,
.teaser .content {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    position: relative;
    float: left;
}
.teaser .content.fix.center {
    float: none;
}
.teaser .content .content,
.teaser .unpadded.content {
    padding-left: 0px;
    padding-right: 0px;
}
.visual > img,
.visual > svg,
.visual > .icon {
    display: block;
}
.teaser .top {
    height: 50%;
}
.teaser .bottom {
    height: 50%;
}
.content.left,
.visual.left {
    width: 50%;
    float: left;
}
.content.right,
.visual.right {
    width: 50%;
    float: right;
}
.content.center,
.visual.center {
    margin-left: auto;
    margin-right: auto;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}
a.teaser {
    display: block;
}
.teaser.row {
    display: table;
}
.teaser.row > * {
    display: table-cell;
    float: none;
    vertical-align: top;
}
.teaser.row > .middle {
    vertical-align: middle;
}
.teaser.row > .bottom {
    vertical-align: bottom;
}
@media screen and (min-width: 980px) {
    .l-top {
        max-height: 50%;
    }
    .l-bottom {
        max-height: 50%;
    }
    .l-left {
        max-width: 50%;
        float: left;
    }
    .l-right {
        max-width: 50%;
        float: right;
    }
    .l-center,
    [class].visual.l-center {
        -webkit-justify-content: center;
        -ms-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    .teaser.l-row {
        display: table;
    }
    .teaser.l-row > * {
        display: table-cell;
        float: none;
        vertical-align: top;
    }
    .teaser.l-row > .middle {
        vertical-align: middle;
    }
    .teaser.l-row > .bottom {
        vertical-align: bottom;
    }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
    .m-top {
        max-height: 50%;
    }
    .m-bottom {
        max-height: 50%;
    }
    .m-left {
        max-width: 50%;
        float: left;
    }
    .m-right {
        max-width: 50%;
        float: right;
    }
    .m-center,
    [class].visual.m-center {
        -webkit-justify-content: center;
        -ms-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    .teaser.m-row {
        display: table;
    }
    .teaser.m-row > * {
        display: table-cell;
        float: none;
        vertical-align: top;
    }
    .teaser.m-row > .middle {
        vertical-align: middle;
    }
    .teaser.m-row > .bottom {
        vertical-align: bottom;
    }
}
@media screen and (max-width: 659.9px) {
    .s-top {
        max-height: 50%;
    }
    .visual.s-top {
        display: table-caption;
    }
    .s-bottom {
        max-height: 50%;
    }
    .s-left {
        max-width: 50%;
        float: left;
    }
    .s-right {
        max-width: 50%;
        float: right;
    }
    .s-center,
    [class].visual.s-center {
        -webkit-justify-content: center;
        -ms-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    .teaser.s-row {
        display: table;
    }
    .teaser.s-row > * {
        display: table-cell;
        float: none;
        vertical-align: top;
    }
    .teaser.s-row > .middle {
        vertical-align: middle;
    }
    .teaser.s-row > .bottom {
        vertical-align: bottom;
    }
}
.vertical {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}
.vertical > .vertical {
    height: 100%;
    min-height: 200px;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-align-self: flex-start;
    -ms-align-self: flex-start;
    align-self: flex-start;
}
.vertical > .vertical:before {
    content: "";
    height: 10%;
    display: block;
}
.fullsize,
.fullsize .background {
    width: 100%;
    height: 100vh;
}
.vspace-xxxl .fullsize { margin-top: -100px; }
.vspace-xxl .fullsize { margin-top: -70px; }
.vspace-xl .fullsize { margin-top: -50px; }
.vspace-l .fullsize { margin-top: -40px; }
.vspace-m .fullsize { margin-top: -30px; }
.vspace-s .fullsize { margin-top: -20px; }
.vspace-xs .fullsize { margin-top: -10px; }
.halfsize,
.halfsize .background {
    width: 100%;
    height: 50vh;
}
.vertical > .vertical > * {
    padding-left: 10px;
    padding-right: 10px;
    max-width: 100%;
    flex: 1 0 auto;
}
.fullsize .background,
.halfsize .background {
    overflow: hidden;
}
.fullsize .background > img,
.fullsize .background > svg,
.halfsize .background > img,
.halfsize .background > svg {
    position: relative;
    width: auto;
    z-index: -1;
}
.fullsize .background > img,
.fullsize .background > svg {
    height: 100vh;
}
.halfsize .background > img,
.halfsize .background > svg {
    height: 50vh;
}
.background.top-center > img,
.background.top-center > svg {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.background.top-right > img,
.background.top-right > svg {
    left: 100%;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}
.background.center-left > img,
.background.center-left > svg {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.background.center > img,
.background.center > svg {
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.background.center-right > img,
.background.center-right > svg {
    left: 100%;
    top: 50%;
    -webkit-transform: translateX(-100%) translateY(-50%);
    -moz-transform: translateX(-100%) translateY(-50%);
    -ms-transform: translateX(-100%) translateY(-50%);
    transform: translateX(-100%) translateY(-50%);
}
.background.bottom-left > img,
.background.bottom-left > svg {
    top: 100%;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}
.background.bottom-center > img,
.background.bottom-center > svg {
    left: 50%;
    top: 100%;
    -webkit-transform: translateX(-50%) translateY(-100%);
    -moz-transform: translateX(-50%) translateY(-100%);
    -ms-transform: translateX(-50%) translateY(-100%);
    transform: translateX(-50%) translateY(-100%);
}
.background.bottom-right > img,
.background.bottom-right > svg {
    left: 100%;
    top: 100%;
    -webkit-transform: translateX(-100%) translateY(-100%);
    -moz-transform: translateX(-100%) translateY(-100%);
    -ms-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
}
@media screen and (min-aspect-ratio: 16/9) {
    .fullsize .background > img,
    .fullsize .background > svg,
    .halfsize .background > img,
    .halfsize .background > svg {
        width: 100vw;
        height: auto !important;
    }
}
.fullsize .vertical,
.halfsize .vertical {
    box-sizing: border-box;
}
/* fullwidth teaser formats */
.teaser.fullwidth .background[class*="height"] {
    overflow: hidden;
    display: block;
}
.teaser.fullwidth .background[class*="height"] img {
    position: relative;
    width: auto;
    height: 100%;
}
/* add 620 height */
.teaser.fullwidth .background.height-620 { height: 620px; }
/**/
.teaser.fullwidth .background.height-460 { height: 460px; }
.teaser.fullwidth .background.height-300 { height: 300px; }
.teaser.fullwidth .background.height-220 { height: 220px; }
.teaser.fullwidth .background[class*="height"].sector-25 img { left: 25%; }
.teaser.fullwidth .background[class*="height"].sector-50 img { left: 50%; }
.teaser.fullwidth .background[class*="height"].sector-75 img { left: 75%; }
.teaser.fullwidth .background[class*="height"].sector-100 img { left: 100%; }
.teaser.fullwidth .background[class*="height"] img.sector-25 {
    -webkit-transform: translateX(-25%);
    -moz-transform: translateX(-25%);
    -ms-transform: translateX(-25%);
    -o-transform: translateX(-25%);
    transform: translateX(-25%);
}
.teaser.fullwidth .background[class*="height"] img.sector-50 {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.teaser.fullwidth .background[class*="height"] img.sector-75 {
    -webkit-transform: translateX(-75%);
    -moz-transform: translateX(-75%);
    -ms-transform: translateX(-75%);
    -o-transform: translateX(-75%);
    transform: translateX(-75%);
}
.teaser.fullwidth .background[class*="height"] img.sector-100 {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}
@media screen and (min-width: 812px) {
    .teaser.fullwidth .background.height-300 img[width="1680"][height="620"] {
        width: 100vw;
        height: auto;
    }
}
@media screen and (min-width: 1095px) {
    .teaser.fullwidth .background.height-300 img[width="1680"][height="460"] {
        width: 100vw;
        height: auto;
    }
}
@media screen and (min-width: 1232px) {
    .teaser.fullwidth .background.height-220 img[width="1680"][height="300"] {
        width: 100vw;
        height: auto;
    }
}
@media screen and (min-width: 1246px) {
    .teaser.fullwidth .background.height-460 img[width="1680"][height="620"] {
        width: 100vw;
        height: auto;
    }
}
@media screen and (min-width: 1280px) {
    .teaser.fullwidth .vertical.background.height-460 img[width="1680"][height="460"] {
        width: 100vw;
        height: auto;
    }
}
@media screen and (min-width: 1681px) {
    .teaser.fullwidth .background.height-220 img[width="1680"][height="220"],
    .teaser.fullwidth .background.height-300 img[width="1680"][height="300"],
    .teaser.fullwidth .background.height-460 img[width="1680"][height="460"],
    .teaser.fullwidth .background.height-620 img[width="1680"][height="620"] {
        width: 100vw;
        height: auto;
    }
}
@media screen and (min-width: 980px) {
    .teaser.fullwidth .background.l-height-460 { height: 460px; }
    .teaser.fullwidth .background.l-height-300 { height: 300px; }
    .teaser.fullwidth .background.l-height-220 { height: 220px; }
    .teaser.fullwidth .background[class*="height"].l-sector-25 img { left: 25%; }
    .teaser.fullwidth .background[class*="height"].l-sector-50 img { left: 50%; }
    .teaser.fullwidth .background[class*="height"].l-sector-75 img { left: 75%; }
    .teaser.fullwidth .background[class*="height"].l-sector-100 img { left: 100%; }
    .teaser.fullwidth .background[class*="height"] img.l-sector-25 {
        -webkit-transform: translateX(-25%);
        -moz-transform: translateX(-25%);
        -ms-transform: translateX(-25%);
        -o-transform: translateX(-25%);
        transform: translateX(-25%);
    }
    .teaser.fullwidth .background[class*="height"] img.l-sector-50 {
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .teaser.fullwidth .background[class*="height"] img.l-sector-75 {
        -webkit-transform: translateX(-75%);
        -moz-transform: translateX(-75%);
        -ms-transform: translateX(-75%);
        -o-transform: translateX(-75%);
        transform: translateX(-75%);
    }
    .teaser.fullwidth .background[class*="height"] img.l-sector-100 {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
    .teaser.fullwidth .background.m-height-620 { height: 620px; }
    .teaser.fullwidth .background.m-height-460 { height: 460px; }
    .teaser.fullwidth .background.m-height-300 { height: 300px; }
    .teaser.fullwidth .background.m-height-220 { height: 220px; }
    .teaser.fullwidth .background[class*="height"].m-sector-25 img { left: 25%; }
    .teaser.fullwidth .background[class*="height"].m-sector-50 img { left: 50%; }
    .teaser.fullwidth .background[class*="height"].m-sector-75 img { left: 75%; }
    .teaser.fullwidth .background[class*="height"].m-sector-100 img { left: 100%; }
    .teaser.fullwidth .background[class*="height"] img.m-sector-25 {
        -webkit-transform: translateX(-25%);
        -moz-transform: translateX(-25%);
        -ms-transform: translateX(-25%);
        -o-transform: translateX(-25%);
        transform: translateX(-25%);
    }
    .teaser.fullwidth .background[class*="height"] img.m-sector-50 {
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .teaser.fullwidth .background[class*="height"] img.m-sector-75 {
        -webkit-transform: translateX(-75%);
        -moz-transform: translateX(-75%);
        -ms-transform: translateX(-75%);
        -o-transform: translateX(-75%);
        transform: translateX(-75%);
    }
    .teaser.fullwidth .background[class*="height"] img.m-sector-100 {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@media screen and (max-width: 659.9px) {
    .teaser.fullwidth .background.s-height-620 { height: 620px; }
    .teaser.fullwidth .background.s-height-460 { height: 460px; }
    .teaser.fullwidth .background.s-height-300 { height: 300px; }
    .teaser.fullwidth .background.s-height-220 { height: 220px; }
    .teaser.fullwidth .background[class*="height"].s-sector-25 img { left: 25%; }
    .teaser.fullwidth .background[class*="height"].s-sector-50 img { left: 50%; }
    .teaser.fullwidth .background[class*="height"].s-sector-75 img { left: 75%; }
    .teaser.fullwidth .background[class*="height"].s-sector-100 img { left: 100%; }
    .teaser.fullwidth .background[class*="height"] img.s-sector-25 {
        -webkit-transform: translateX(-25%);
        -moz-transform: translateX(-25%);
        -ms-transform: translateX(-25%);
        -o-transform: translateX(-25%);
        transform: translateX(-25%);
    }
    .teaser.fullwidth .background[class*="height"] img.s-sector-50 {
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .teaser.fullwidth .background[class*="height"] img.s-sector-75 {
        -webkit-transform: translateX(-75%);
        -moz-transform: translateX(-75%);
        -ms-transform: translateX(-75%);
        -o-transform: translateX(-75%);
        transform: translateX(-75%);
    }
    .teaser.fullwidth .background[class*="height"] img.s-sector-100 {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
.teaser .linked-content {
    color: #333333;
}
.teaser .linked-content:hover {
    text-decoration: none;
}


.label {
	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 20px;
	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%);
}
.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: #2269C3;
	color: #FFFFFF;
}

.icon {
  display: inline-block;
  color: transparent;
  outline: none;
  padding: 0px;
  height: 0px;
  font-size: 0px;
  background: url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/brand-blue.svg) no-repeat 0% 0%, url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/service-blue.svg) no-repeat 0% 0%;
}
.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;
}
.x8l.icon {
  background-size: auto 15552px, auto 15552px;
  width: 192px;
  height: 192px;
}
.x9l.icon {
  background-size: auto 20736px, auto 20736px;
  width: 256px;
  height: 256px;
}
/* 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: -16px;
  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 {
  color: #FFFFFF;
}
.icon.inactive[aria-label]:after,
.icon.inactive-hover[aria-label]:hover:after {
  color: #525252;
}
.icon.service[aria-label]:after,
.icon.service-hover[aria-label]:hover:after {
  color: #2269C3;
}
/*  */
.icon.service-light[aria-label]:after,
.icon.service-light-hover[aria-label]:hover:after {
  color: #D7E4F4;
}
/*  */
.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: 680px) 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;
}
.touch .x8l.icon[data-show-nodes]:before, .touch .x8l.icon[data-hide-nodes]:before, .touch .x8l.icon[data-toggle-nodes]:before, .touch .x8l.icon[data-set-nodes]:before, .touch .x8l.icon[data-unset-nodes]:before {
  width: 192px;
  height: 192px;
}
.touch .x9l.icon[data-show-nodes]:before, .touch .x9l.icon[data-hide-nodes]:before, .touch .x9l.icon[data-toggle-nodes]:before, .touch .x9l.icon[data-set-nodes]:before, .touch .x9l.icon[data-unset-nodes]:before {
  width: 256px;
  height: 256px;
}
/*  */
.up.icon, .up.icon.default, body:not(.touch) .up.icon.default-hover:hover, body:not(.touch) a:hover > .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 {
  background-position: 25% 0%;
}
.up.icon.inactive, body:not(.touch) .up.icon.inactive-hover:hover, body:not(.touch) a:hover > .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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  background-position: 0% 5%;
}
.burger.icon.white, body:not(.touch) .burger.icon.white-hover:hover, body:not(.touch) a:hover > .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 {
  background-position: 50% 5%;
}
.burger.icon.service, body:not(.touch) .burger.icon.service-hover:hover, body:not(.touch) a:hover > .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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  background-position: 0% 10%;
}
.search.icon.white, body:not(.touch) .search.icon.white-hover:hover, body:not(.touch) a:hover > .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 {
  background-position: 50% 10%;
}
.search.icon.service, body:not(.touch) .search.icon.service-hover:hover, body:not(.touch) a:hover > .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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  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 {
  background-position: 100% 13.75%;
}
/*  */
.success.icon, .success.icon.default, body:not(.touch) .success.icon.default-hover:hover, body:not(.touch) a:hover > .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 {
  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 {
  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 {
  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 {
  background-position: 0% 25%;
}
.warning.icon.white, body:not(.touch) .warning.icon.white-hover:hover, body:not(.touch) a:hover > .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 {
  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 {
  background-position: 25% 26.25%;
}
.hotline.icon, .hotline.icon.default, body:not(.touch) .hotline.icon.default-hover:hover, body:not(.touch) a:hover > .icon.default-hover {
  background-position: 0% 32.5%;
}
.hotline.icon.white, body:not(.touch) .hotline.icon.white-hover:hover, body:not(.touch) a:hover > .icon.white-hover {
  background-position: 25% 32.5%;
}
.hotline.icon.inactive, body:not(.touch) .hotline.icon.inactive-hover:hover, body:not(.touch) a:hover > .icon.inactive-hover {
  background-position: 50% 32.5%;
}
.hotline.icon.service, body:not(.touch) .hotline.icon.service-hover:hover, body:not(.touch) a:hover > .icon.service-hover {
  background-position: 75% 32.5%;
}
/*  */
.hotline.icon.service-light, body:not(.touch) .hotline.icon.service-light-hover:hover, body:not(.touch) a:hover > .icon.service-light-hover {
  background-position: 100% 32.5%;
}
/*  */
.clock.icon, .clock.icon.default, body:not(.touch) .clock.icon.default-hover:hover, body:not(.touch) a:hover > .icon.default-hover {
  background-position: 0% 33.75%;
}
.clock.icon.white, body:not(.touch) .clock.icon.white-hover:hover, body:not(.touch) a:hover > .icon.white-hover {
  background-position: 25% 33.75%;
}
.clock.icon.inactive, body:not(.touch) .clock.icon.inactive-hover:hover, body:not(.touch) a:hover > .icon.inactive-hover {
  background-position: 50% 33.75%;
}
.clock.icon.service, body:not(.touch) .clock.icon.service-hover:hover, body:not(.touch) a:hover > .icon.service-hover {
  background-position: 75% 33.75%;
}
/*  */
.clock.icon.service-light, body:not(.touch) .clock.icon.service-light-hover:hover, body:not(.touch) a:hover > .icon.service-light-hover {
  background-position: 100% 33.75%;
}
/*  */



.list {
    list-style: none;
}
.list li {
    padding: 7px 0px;
    position: relative;
}
.list li:before {
    content: "";
    display: inline-block;
    background-color: #2269C3;
}
ul.list {
    padding-left: 24px;
}
ul.list li:before {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    margin: 0px 8px 0px -24px;
    vertical-align: -2px;
}

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

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

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

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

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

ul.text.list {
    padding-left: 0px;
}
ul.text.list li:before {
    content: none;
    width: 0px;
    height: 0px;
    margin: 0px;
}
/* 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.inline.list li,
ul.inline-block.list li,
ul.horizontal.list {
    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;
}
.button {
    display: inline-block;
    padding: 5px 16px 5px 2px;
    border: 1px solid;
    min-height: 40px;
    font-style: normal;
    width: auto;
    letter-spacing: 0;
    text-indent: 16px;
-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: 2px;
    font-family: RobotoMedium, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
 -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: middle;
    word-wrap: normal;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
}
.fullwidth.button {
    width: 100%;
}
.button,
.button:hover,
.button:visited,
.button:focus {
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    outline: none;
}
input.button::-moz-focus-inner,
button.button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
.button.m {
    padding: 2px 8px 2px 0px;
    min-height: 32px;
    font-family: RobotoMedium, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-indent: 8px;
}
.button.xl {
    padding: 9px 20px 9px 0px;
    text-indent: 20px;
    min-height: 48px;
}
.button.xxl {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    padding: 11px 24px 11px 0px;
    text-indent: 24px;
    min-height: 56px;
}
.button.xxxl {
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    padding: 11px 32px 11px 0px;
    text-indent: 32px;
    min-height: 64px;
}
/* This class is required due to Mozilla Firefox Bug https://bugzilla.mozilla.org/show_bug.cgi?id=1287830 and can be removed once fixed */
.button.no-text,
.button.no-text:hover,
.button.no-text:visited {
    text-indent: 0px;
}
/** /
span.button[class] {
    padding-top: 6px;
    padding-bottom: 4px;
}
/**/
a.button.m[class],
span.button.m[class] {
    padding-top: 4px;
    padding-bottom: 0px;
}
/** /
span.button.xl[class] {
    padding-top: 10px;
    padding-bottom: 8px;
}
/**/
span.button.xxl[class],
span.button.xxxl[class] {
    padding-top: 12px;
    padding-bottom: 10px;
}
.key.button:hover,
.key.button:focus,
.ghost.key.button[class][class][class]:hover,
.ghost.key.button[class][class][class]:focus {
    color: #FFFFFF;
    border-color: #6A9708;
    background-color: #6A9708;
}
.service.button:hover,
.service.button:focus,
.ghost.service.button[class][class][class]:hover,
.ghost.service.button[class][class][class]:focus {
    color: #FFFFFF;
    border-color: #1B549C;
    background-color: #1B549C;
}
.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 {
    color: #333333;
    border-color: #F3F3F3;
    background-color: #F3F3F3;
}
.key.button,
.key.button:active,
.ghost.key.button[class][class][class]:active {
    border-color: #84BD0A;
    background-color: #84BD0A;
    color: #FFFFFF;
}
.service.button,
.service.button:active,
.ghost.service.button[class][class][class]:active {
    border-color: #2269C3;
    background-color: #2269C3;
    color: #FFFFFF;
}
.secondary.button,
.secondary.button:active,
.ghost.secondary.button[class][class][class]:active {
    border-color: #999999;
    background-color: #999999;
    color: #FFFFFF;
}
.inverted.button,
.inverted.button:active,
.ghost.inverted.button[class][class][class]:active {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    color: #333333;
}
.key.button[disabled][class][class][class],
.key.button[aria-disabled][class][class][class] {
    color: #FFFFFF;
    background-color: #E9F3D3;
    border-color: #E9F3D3;
    cursor: default;
    cursor: not-allowed;
    text-shadow: none;
}
.service.button[disabled][class][class][class],
.service.button[aria-disabled][class][class][class] {
    color: #FFFFFF;
    background-color: #D7E4F4;
    border-color: #D7E4F4;
    cursor: default;
    cursor: not-allowed;
    text-shadow: none;
}
.secondary.button[disabled][class][class][class],
.secondary.button[aria-disabled][class][class][class] {
    color: #FFFFFF;
    background-color: #DADADA;
    border-color: #DADADA;
    cursor: default;
    cursor: not-allowed;
    text-shadow: none;
}
.inverted.button[disabled][class][class][class],
.inverted.button[aria-disabled][class][class][class] {
    color: #707070;
    background-color: #D7E4F4;
    border-color: #D7E4F4;
    cursor: default;
    cursor: not-allowed;
    text-shadow: none;
}
.ghost.key.button[class][class][class] {
    color: #84BD0A;
    background-color: transparent; /* or white? */
}
.ghost.key.button[class][class][class][class][class][disabled],
.ghost.key.button[class][class][class][class][class][aria-disabled] {
    color: #E9F3D3;
    border-color: #E9F3D3;
    background-color: transparent; /* or white? */
}
.ghost.service.button[class][class][class] {
    color: #2269C3;
    background-color: transparent; /* or white? */
}
.ghost.service.button[class][class][class][class][disabled],
.ghost.service.button[class][class][class][class][aria-disabled] {
    color: #D7E4F4;
    border-color: #D7E4F4;
    background-color: transparent; /* or white? */
}
.ghost.secondary.button[class][class][class] {
    color: #999999;
    background-color: transparent; /* or white? */
}
.ghost.secondary.button[class][class][class][class][disabled],
.ghost.secondary.button[class][class][class][class][aria-disabled] {
    color: #DADADA;
    border-color: #DADADA;
    background-color: transparent; /* or white? */
}
.ghost.inverted.button[class][class][class] {
    color: #FFFFFF;
    background-color: transparent;
}
.ghost.inverted.button[class][class][class][class][class][disabled],
.ghost.inverted.button[class][class][class][class][class][aria-disabled] {
    border-color: #D7E4F4;
    color: #D7E4F4;
    background-color: transparent;
}
.button > .icon {
    float: left;
    position: relative;
    margin: 1px -10px -1px 5px;
}
.m.button > .m.icon {
    margin: -1px -4px -1px 4px;
}
.xl.button > .l.icon {
    margin: -3px -13px -3px 8px;
}
.xxl.button > .xl.icon {
    margin: -6px -16px -6px 8px;
}
.xxxl.button > .xxl.icon {
    margin: -6px -24px -6px 8px;
}
@media screen and (min-width: 980px) {
    .button.l-no-icon .icon { display: none; }
    .button.l-no-text { font-size: 0px; text-indent: 0px; color: transparent; }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
    .button.m-no-icon .icon { display: none; }
    .button.m-no-text { font-size: 0px; text-indent: 0px; color: transparent; }
}
@media screen and (max-width: 659.9px) {
    .button.s-no-icon .icon { display: none; }
    .button.s-no-text { font-size: 0px; text-indent: 0px; color: transparent; }
}


/* form.css 1.4 - cat */
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 + .field {
    padding-left: 20px;
}
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 select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 2px;
    border: 1px solid #525252;
    position: relative;
    height: 40px;
    padding: 0px 10px;
    line-height: 20px;
    background-color: #FFFFFF;
    color: #525252;
    font-family: "RobotoRegular", Verdana, sans-serif;
    font-size: 16px;
    box-shadow: none;
}
.field select {
    padding: 8px 10px;
}
.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: 2px;
    border: 1px solid #525252;
    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;
}
}
/* Webkit-based browsers: replace Select Icon */
.field select:not(*:root) {
    -webkit-appearance: none;
    line-height: 24px;
    /* fix for android webkit */
    outline: none !important;
}
.field.select:not(*:root):before {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 15px;
    background-color: transparent;
    border-left: 3px solid #2269C3;
    border-bottom: 3px solid #2269C3;
    border-radius: 0px 0px 0px 2px;
    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;
    padding-right: 2px;
}
/* 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: "RobotoRegular", 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 {
    position: relative;
    margin-left: 0px;
    display: block;
    padding: 5px 0px 3px 0px;
}
fieldset legend ~ .select.field {
    position: relative;
}
fieldset legend ~ .field {
    position: static;
}
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) > .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;
}
.xl .field label ~ .icon,
.xl .field label ~ .helper,
.xl .field:not(.error) > .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;
}
/* Checkbox/Radio with Legend */
legend ~ .radio.field input:checked ~ label::after,
legend + .field.checkbox input:checked ~ label::after {
    top: 15px;
}
/* Radio - Vertical */
fieldset .radio.field,
fieldset [class][class][class] ~ .radio.field {
    display: block;
    width: auto;
}
/* Radio - Horizontal */
fieldset .radio.field.horizontal,
fieldset [class][class][class] ~ .radio.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: 45px;
    }
    .field.radio label,
    .field.checkbox label {
        display: inline;
        position: relative;
    }
    .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 #525252;
        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: 2px;
        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: #2269C3;
    }
    .field.checkbox input:checked ~ label:after {
        content: "";
        position: absolute;
        top: 10px;
        left: -37px;
        width: 16px;
        height: 6px;
        border-left: 4px solid #2269C3;
        border-bottom: 4px solid #2269C3;
        -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;
    }
}
/* 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: #2269C3;
}
@media all and (min-width: 0px) {
    .field.checkbox input[type]:focus + label:before,
    .field.radio input[type]:focus + label:before {
        border-color: #2269C3;
    }
}
/* 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;} 99% {display: block;} 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: RobotoRegular;
    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 #2269C3;
    border-width: 0px 1px;
}
.suggest > *:last-child {
    border-width: 0px 1px 1px 1px;
    border-radius: 0px 0px 2px 2px;
}
.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;
}
/* form actions */
form fieldset.actions {
    display: block;
}
form .actions {
    margin-top: 0px;
    overflow: hidden;
}
form .actions .right {
    float: right;
}
form *:not(.nolabel) + .actions {
    margin-top: 20px;
}
/* error message */
form .error.message {
    display: block;
    position: relative;
    overflow: hidden;
    top: -8px;
    background-color: transparent;
    color: #C00030;
    margin-bottom: 0px;
    width: auto;
}
form .message.field .icon + *:not(.icon) {
    font-weight: 400;
    font-family: "RobotoRegular", 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], /* added error border color for select as well */
.field textarea[aria-invalid],
/*.field input[aria-invalid],*/
.field.checkbox input[aria-invalid] ~ label::before {
    border-color: #C00030;
}
/* 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 + .field {
        padding-left: 20px;
    }
    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;
    }
    .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 */
.info.message.field {
    padding: 20px 35px 20px 20px;
    margin-bottom: 3px;
    will-change: transform;
    width: auto;
    border-radius: 2px;
    background-color: #2269C3;
    border-color: #2269C3;
}
.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  {
    border-color: #999999;
    color: #999999;
    background-color: #FFFFFF;
    cursor: not-allowed;
}
.field.checkbox input[disabled] + label:before,
.field.radio input[disabled] + label:before {
    background: #C2C2C2;
    cursor: not-allowed;
}


/**
 * 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;
}
.fullwidth.akkordeon {
    padding-left: 0px;
    padding-right: 0px;
}
.akkordeon + .akkordeon {
    border-top: none;
}
.akkordeon > *:first-child {
    cursor: pointer;
    outline: none;
    /* Firefox 48+ styles summary as a list to add the marker */
    list-style: none;
}
.akkordeon[open] > *:first-child,
.akkordeon.open > *:first-child {
    display: flex;
}
/*
 * 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: flex;
    display: -webkit-flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    align-content: stretch;
}
.akkordeon .summary:hover {
    background-color: #F3F3F3;
}
.akkordeon .summary > .icon {
    flex-shrink: 0;
    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) {
    flex-grow: 1;
}
.akkordeon .summary > .icon + * {
    padding-left: 10px;
}
.akkordeon .akkordeon-content > * {
  opacity: 0;
  padding: 5px 20px 10px;
  transition: opacity 0.1s linear;
}
.akkordeon[open] .akkordeon-content > *,
.akkordeon.open .akkordeon-content > * {
  opacity: 1;
}
/*
 * 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;
}

.js .akkordeon > *:first-child > *:first-of-type:not(.icon):before {
    content: "";
    background: url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/brand-blue.svg) no-repeat 0% 0%,
                url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/service-blue.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;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.inverted .akkordeon > *:first-child *:first-of-type:not(.icon):before {
    background-position: 25% 1.25%;
}
.secondary.akkordeon {
    color: #999999;
}
.secondary.akkordeon > *:first-child *:first-of-type:not(.icon):before {
    background-position: 50% 1.25%;
}
.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,
.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);
        -ms-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);
        -ms-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;
}
@media screen and (min-width: 980px) {
    .js .akkordeon:not([open]):not(.l-disable) > *:first-child ~ * {
        visibility: hidden;
        height: 0;
    }
    .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-child > *:first-of-type:not(.icon):before {
        content: none;
    }
}

@media screen and (min-width: 660px) and (max-width: 979.9px) {
    .js .akkordeon:not([open]):not(.m-disable) > *:first-child ~ * {
        visibility: hidden;
        height: 0;
    }
    .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 ~ * {
        visibility: hidden;
        height: 0;
    }
    .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 in footer */
#footer .akkordeon {
    border: none;
}
#footer .akkordeon .summary:hover {
    background-color: transparent;
}
#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 {
    padding-left: 0px;
    padding-right: 0px;
}
#footer .backdrop-c2-light94.inverted .akkordeon * {
    color: #707070;
}

/* No-flex browsers */
.no-flex .akkordeon .summary {
    display: block;
    width: 100%;
}
.no-flex .akkordeon .summary > .icon {
    float: left;
    margin-right: 10px;
}
.no-flex .akkordeon .summary > .xs.icon + * {
    padding-left: 26px;
    box-sizing: border-box;
}
.no-flex .akkordeon .summary > .s.icon + * {
    padding-left: 30px;
    box-sizing: border-box;
}
.no-flex .akkordeon .summary > .m.icon + * {
    padding-left: 34px;
    box-sizing: border-box;
}
.no-flex .akkordeon .summary > .l.icon + * {
    padding-left: 42px;
    box-sizing: border-box;
}
.no-flex .akkordeon .summary > .xl.icon + * {
    padding-left: 50px;
    box-sizing: border-box;
}
.no-flex .akkordeon .summary > .xxl.icon + * {
    padding-left: 58px;
    box-sizing: border-box;
}
.no-flex .akkordeon .summary > .x3l.icon + * {
    padding-left: 66px;
    box-sizing: border-box;
}
.no-flex .akkordeon .summary > .x4l.icon + * {
    padding-left: 74px;
    box-sizing: border-box;
}
.no-flex .akkordeon .summary > .x5l.icon + * {
    padding-left: 82px;
    box-sizing: border-box;
}
.no-flex .akkordeon .summary > .x6l.icon + * {
    padding-left: 106px;
    box-sizing: border-box;
}
.no-flex .akkordeon .summary > .x7l.icon + * {
    padding-left: 138px;
    box-sizing: border-box;
}
.no-flex .akkordeon .summary > .x8l.icon + * {
    padding-left: 202px;
    box-sizing: border-box;
}
.no-flex .akkordeon .summary > .x9l.icon + * {
    padding-left: 266px;
    box-sizing: border-box;
}
.no-flex .akkordeon .summary > *:not(.icon) {
    width: 100%;
}
.no-flex .akkordeon .akkordeon-content {
    clear: both;
}
.no-flex .akkordeon .summary.vertical > * {
    display: block;
    float: none;
}
.no-flex .akkordeon .summary.vertical > .icon {
    margin-left: auto;
    margin-right: auto;
}
.no-flex .akkordeon .summary.vertical > .icon + * {
    padding-left: 0px;
}
.no-flex #footer .akkordeon .summary > .icon + * {
    padding-left: 0px;
    padding-top: 18px;
}
@media screen and (min-width: 980px) {
    .no-flex.js .akkordeon:not([open]):not(.l-disable) > *:first-child ~ * {
        display: none;
    }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
    .no-flex.js .akkordeon:not([open]):not(.m-disable) > *:first-child ~ * {
        display: none;
    }
}
@media screen and (max-width: 659.9px) {
    .no-flex.js .akkordeon:not([open]):not(.m-disable) > *:first-child ~ * {
        display: none;
    }
    .no-flex #footer .akkordeon .summary > .icon + * {
        padding-top: 4px;
    }
}

/* Option - vertical: icon jump above the headline if summary has a class vertical */
.akkordeon .summary.vertical {
    flex-direction: column;
    align-items: flex-start;
}
.akkordeon .summary.vertical > .icon {
    align-self: center;
}
.akkordeon .summary.vertical > .icon + * {
    padding-left: 0px;
    padding-top: 10px;
    align-self: stretch;
}

.bg-raster {
  background: #ffffff url('raster_bg_12spalten.gif') repeat-y left top;
}
.header {
  padding: 0px;
  display: block;
  height: 96px;
  line-height: 96px;
  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: 'RobotoCondensed', Arial, sans-serif;
  font-size: 50px;
  font-weight: 400;
  display: inline-block;
  line-height: inherit;
}
.header > *:first-child > *:first-child {
  display: block;
  background: url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/brand-blue.svg) no-repeat 0% 27.96%;
  background-size: 120px auto;
  color: transparent;
  width: 126px;
  height: 40px;
  overflow: hidden;
  float: left;
  margin: 29px 10px 0px 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/*  */
.header:before {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  min-width: 100%;
  height: 96px;
  border-top: 96px solid #2269C3;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
  background: #FFFFFF;
  box-sizing: border-box;
  z-index: -1;
}
/*  */
.header {
  /*a div {
        color: red;
    }*/
}
.header.vline:before {
  border-bottom: 1px solid #DADADA;
}
.header.vline,
.header.vline:before {
  height: 96px;
}
.header .left {
  float: left;
}
.header .right {
  float: right;
}
.header .container,
.header > .module {
  margin-top: 28px;
}
.header .module {
  line-height: 22px;
}
.header a:hover {
  text-decoration: none;
}
@media screen and (min-width: 980px) {
  .header ~ .navigation[class][class] {
    margin-top: -1px;
  }
}
/* Dieser Block wurde nicht geprüft oder getestet!!! */
@media screen and (min-width: 980px) {
  .header.header-layer {
    height: 72px;
    line-height: 70px;
    padding: 0px 0px 0px 10px;
    float: left;
    /*  */
    /*  */
  }
  .header.header-layer[class]:before {
    border-top-width: 72px;
    height: 72px;
    margin-top: 0px;
  }
  .header.header-layer[class].vline,
  .header.header-layer[class].vline:before {
    height: 73px;
  }
  .header.header-layer _::-webkit-full-page-media,
  .header.header-layer _:future,
  :root .header.header-layer:not(.fix, .m-fix) {
    float: none;
    position: relative;
    z-index: 999;
  }
  .no-flex .header.header-layer + * {
    float: none;
    display: inline-block;
  }
  .header.header-layer > *:first-child {
    font-size: 38px;
    vertical-align: bottom;
    left: 0px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  .header.header-layer > *:first-child > *:first-child {
    background: url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/brand-blue.svg) no-repeat 0% 27.96%;
    background-size: 90px auto;
    color: transparent;
    width: 94px;
    height: 48px;
    margin: 15px 10px 0px 0px;
  }
  .header.header-layer > *:first-child + .left {
    margin-left: 10px;
    margin-right: -6px;
  }
  .header.header-layer ~ .navigation,
  .header.header-layer ~ .settings {
    position: absolute;
    margin-top: 0px;
    top: 0px;
  }
  .header.header-layer ~ .navigation {
    right: 100%;
  }
  .header.header-layer ~ .settings > .head {
    height: 72px;
    line-height: 70px;
  }
  .header.header-layer.vline ~ .settings > .head {
    box-sizing: content-box;
    z-index: 9999;
  }
  .no-flex .header.header-layer ~ .navigation,
  .no-flex .header.header-layer ~ .settings {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  .header.header-layer > .module[class] {
    margin-top: 16px;
  }
  .header.header-layer .container {
    margin-top: 16px;
  }
  .header.header-layer .icon[aria-label]:after {
    bottom: -15px;
  }
  .toggle-nav .header.header-layer:before {
    left: 0px;
  }
  .toggle-settings .header.header-layer:before {
    right: 0px;
  }
}
@media screen and (min-width: 980px) and \\0 screen {
  .header.header-layer:not(.fix, .m-fix) {
    float: none;
    position: relative;
    z-index: 999;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .header {
    height: 72px;
    line-height: 70px;
    padding: 0px 0px 0px 10px;
    float: left;
    /*  */
    /*  */
  }
  .header[class]:before {
    border-top-width: 72px;
    height: 72px;
    margin-top: 0px;
  }
  .header[class].vline,
  .header[class].vline:before {
    height: 73px;
  }
  .header _::-webkit-full-page-media,
  .header _:future,
  :root .header:not(.fix, .m-fix) {
    float: none;
    position: relative;
    z-index: 999;
  }
  .no-flex .header + * {
    float: none;
    display: inline-block;
  }
  .header > *:first-child {
    font-size: 38px;
    vertical-align: bottom;
    left: 0px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  .header > *:first-child > *:first-child {
    background: url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/brand-blue.svg) no-repeat 0% 27.96%;
    background-size: 90px auto;
    color: transparent;
    width: 94px;
    height: 48px;
    margin: 15px 10px 0px 0px;
  }
  .header > *:first-child + .left {
    margin-left: 10px;
    margin-right: -6px;
  }
  .header ~ .navigation,
  .header ~ .settings {
    position: absolute;
    margin-top: 0px;
    top: 0px;
  }
  .header ~ .navigation {
    right: 100%;
  }
  .header ~ .settings > .head {
    height: 72px;
    line-height: 70px;
  }
  .header.vline ~ .settings > .head {
    box-sizing: content-box;
    z-index: 9999;
  }
  .no-flex .header ~ .navigation,
  .no-flex .header ~ .settings {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  .header > .module[class] {
    margin-top: 16px;
  }
  .header .container {
    margin-top: 16px;
  }
  .header .icon[aria-label]:after {
    bottom: -15px;
  }
  .toggle-nav .header:before {
    left: 0px;
  }
  .toggle-settings .header:before {
    right: 0px;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) and \\0 screen {
  .header:not(.fix, .m-fix) {
    float: none;
    position: relative;
    z-index: 999;
  }
}
@media screen and (max-width: 659.9px) {
  .header {
    height: 48px;
    line-height: 50px;
    padding-top: 0px;
    padding-bottom: 0px;
    /*  */
    /*  */
  }
  .header > *:first-child {
    text-indent: -1000px;
    margin: 0px;
    width: 0px;
  }
  .header > *:first-child a:hover {
    text-decoration: none;
    xcolor: #333333;
  }
  .header:before,
  .header.vline,
  .header.vline:before {
    height: 48px;
    margin-top: 0px;
    border-top-width: 48px;
    border-bottom: 0px;
  }
  .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: 13px 0px 0px 0px;
    font-size: 20px;
    line-height: 50px;
    color: #FFFFFF;
    /*  */
    background-position: 0% 27.96%;
    background-size: 60px auto;
    height: 26px;
    width: 64px;
    /*  */
  }
  .header > *:first-child > *:first-child ~ * {
    display: none;
  }
  .header .container[class][class] {
    /*margin: 8px 0px -12px;*/
    margin: 2px 26px 0px 0px;
    min-width: auto;
    width: auto;
  }
  .header > .module[class][class] {
    margin: 2px 0px 0px 16px;
  }
  .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 ~ .navigation,
  .header ~ .settings,
  .no-flex .header ~ .navigation,
  .no-flex .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: -300px;
  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%);
}
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;
  box-sizing: border-box;
  -webkit-box-shadow: 0px 0px 4px 0px #AAAAAA;
  -moz-box-shadow: 0px 0px 4px 0px #AAAAAA;
  box-shadow: 0px 0px 4px 0px #AAAAAA;
  cursor: default;
  position: absolute;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  margin-top: 10px;
  margin-left: 68px;
  z-index: 1200;
  padding: 20px 10px;
}
.header .dialog:before {
  content: "";
  background: #FFFFFF;
  -webkit-box-shadow: -2px -2px 4px -1px #aaaaaa;
  -moz-box-shadow: -2px -2px 4px -1px #aaaaaa;
  box-shadow: -2px -2px 4px -1px #aaaaaa;
  display: block;
  position: absolute;
  margin-top: -26px;
  margin-left: 100%;
  -webkit-transform: translateX(-55px) rotate(45deg);
  -moz-transform: translateX(-55px) rotate(45deg);
  -ms-transform: translateX(-55px) rotate(45deg);
  transform: translateX(-55px) rotate(45deg);
  width: 12px;
  height: 12px;
  z-index: 1;
}
.header .dialog button.fullsize {
  width: 100%;
  height: auto;
}
@media all and (min-width:0\0) and (min-resolution: .001dpcm) {
  .header .dialog {
    -ms-transform: translateX(-100%) translateX(-44px) translateY(45px);
  }
}
/*  */
/* begin: header - icon vertical center */
.header .icon {
  vertical-align: top;
  /* to be consistent across browsers and devices */
}
@media all and (max-width: 659.9px) {
  .header .left.container[class][class],
  .header .left.module[class][class] {
    margin-top: 8px;
  }
  .header .right.container[class][class],
  .header .right.module[class][class] {
    margin-top: 11px;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .header .left.container[class][class],
  .header .left.module[class][class] {
    margin-top: 20px;
  }
  .header .right.container[class][class],
  .header .right.module[class][class] {
    margin-top: 20px;
  }
}
/* end: header - icon vertical center */
/* end: header fixes from bestellstrecke - alignment, icon module */

.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: 5px;
    vertical-align: -3px;
}
.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 {
    color: #525252;
    text-decoration: none;
}
.navigation li.active > *:not(.open):first-child {
    color: #2269C3;
}

/* Hintergrund bei Active */
.navigation li ul li a:focus,
.navigation li ul li.active a {
    background: #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: #D7E4F4;
}

/* 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) {
    .navigation:before {
        content: "";
        position: absolute;
        background: #F3F3F3;
        left: 0px;
        width: 100%;
        height: 48px;
        z-index: -1;
    }
    .navigation.center {
        margin: 0 auto;
    }
    .navigation > ul > li {
        float: left;
        position: relative;
    }
    .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;
    }
    /* Grauer Trennstrich nach dem Home-Icon */
    .navigation > ul > li:first-child:after {
        content: "";
        height: 20px;
        width: 1px;
        right: 0;
        top: 15px;
        position: absolute;
        background: #C2C2C2;
    }
    /* blaue Linie */
    .navigation > ul > li + li.active > *:first-child:after,
    .navigation > ul > li + li > *.open:first-child:after,
    .navigation > ul > li + li:hover > *:first-child:after {
        content: "";
        background: #2269C3;
        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;
    }


    /* Flyout */
    /* Blaue Hinterlegung - offenes Submenue Desktop */
     .navigation span.open {
        color: #FFFFFF;
        background: #2269C3;
        border-radius: 2px 2px 0px 0px;
        position: relative;
        z-index: 1000;
    }
    /* Schatten des Reiters */
     .navigation > ul > li + li > span.open:before {
        content: "";
        display: block;
        position: absolute;
        box-shadow: 0px 0px 4px 1px #C2C2C2;
        border-radius: 2px 2px 0px 0px;
        height: 44px;
        top: 0px;
        right: 0px;
        left: 0;
        z-index: -1;
    }
    /* Schatten unten wieder überdecken */
    .navigation > ul > li + li.active > *.open:after,
    .navigation > ul > li + li > *.open:first-child:after,
    .navigation > ul > li + li:hover > *.open:after {
        left: 0px;
        right: -4px;
    }
    /* Schatten + blaue Linie */
    .navigation ul.text.list {
        border-top: 4px solid #2269C3;
        border-radius: 0px 2px 2px 2px;
        box-shadow: 0px 0px 4px 1px #C2C2C2;
        margin-top: -4px;
        width: 340px;
        z-index: 999;
    }
    /* 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) */
    .navigation ul.text.list li:last-child a,
    .navigation ul.text.list li:last-child:before {
        border-radius: 0px 0px 2px 2px;
    }

    .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 */
    .navigation .double.text.list li:nth-of-type(odd):last-child:before,
    .navigation .double.text.list li:nth-of-type(odd):nth-last-child(2):before {
        border-radius: 0px 0px 2px 2px;
    }
    /* Rundungen der blauen Hinterlegung bei hover */
    .navigation .double.text.list li:nth-of-type(odd):last-child a,
    .navigation .double.text.list li:nth-of-type(odd):nth-last-child(2) a {
        border-radius: 0px 0px 0px 2px;
    }
    .navigation .double.text.list li:nth-of-type(even):last-child a {
        border-radius: 0px 0px 2px 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 */
    .navigation .triple.text.list li:nth-of-type(3n+1):last-child:before,
    .navigation .triple.text.list li:nth-of-type(3n+1):nth-last-child(2):before,
    .navigation .triple.text.list li:nth-of-type(3n+1):nth-last-child(3):before {
        border-radius: 0px 0px 2px 2px;
    }
    /* Rundungen der blauen Hinterlegung bei hover, a von linker Reihe */
    .navigation .triple.text.list li:nth-of-type(3n+1):last-child a,
    .navigation .triple.text.list li:nth-of-type(3n+1):nth-last-child(2) a,
    .navigation .triple.text.list li:nth-of-type(3n+1):nth-last-child(3) a {
        border-radius: 0px 0px 0px 2px;
    }
    /* Keine Rundung der blauen Hinterlegung bei hover, a von mittlerer Reihe */
    .navigation .triple.text.list li:nth-of-type(3n+2):last-child a,
    .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 */
    .navigation .triple.text.list li:nth-of-type(3n+3):last-child a {
        border-radius: 0px 0px 2px 0px;
    }
}

/* mobile/tablet view */
@media screen and (max-width: 979.9px) {
    .navigation {
        position: relative;
        left: -301px;
        height: 0px;
    }
    /* 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;
        /* die Ausrichtung wegen der Border-Top-Linie bei WEB.DE anpassen */
    }
    .navigation > ul > li:first-child > a {
        height: 72px;
        padding: 20px 0 21px 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: -10px;*/
        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: #F3F3F3;
    }

    /* Hintergrund. Textfarbe bei Active */
    .navigation > ul li.active > span,
    .navigation > ul li.active > a {
        color: #2269C3;
        text-decoration: none;
        background: #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: #D7E4F4;
    }
    .navigation > ul li a:hover {
        text-decoration: none;
        background: #D7E4F4;
    }
    /* erster Navipunkt mit Home-Icon bei Hover Hinterlegung nach rechts erweitert */
    .navigation > ul > li:first-child > a:hover:before {
        content: "";
        border-left: 4px solid #2269C3;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        right: -54px;
        background: #D7E4F4;
        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: #2269C3;
    }
    /* Textfarbe geöffnetes Submenu span */
    .navigation > ul > li > span.open {
        color: #2269C3;
    }

    /* 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;
        border-top: 0px solid;
    }
    .navigation > ul > li:first-child > a {
        height: 48px;
        padding: 8px 0 8px 16px;
        width: 202px; /* fixe Breite (256-54px=202px) nötig wegen IE9 */
    }
    .navigation > ul > li:first-child > a:after {
        /*top: -7px;*/ /* top: -2px; bei 24px-Icon */
        top: -2px;
    }
    .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;
}
/* fix for extra-wide screens */
@media screen and (min-width: 1936.9px) {
    .fullwidth.navigation {
        width: 100%;
    }
    .fullwidth.center.navigation ul.l-12.fix,
    .fullwidth.center.navigation ul.l-12.l-fix {
        display: block;
        position: relative;
        width: 960px;
        margin: 0 auto;
    }
}

#footer {
    display: block;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-direction: row;
    -ms-flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.no-flex #footer {
    clear: left;
    display: block;
}
.no-flex #footer > .fullwidth {
    width: 100%;
}
#footer .backdrop-c2-light94,
#footer .backdrop-c2-light94 .list a {
    color: #707070;
}
#footer ul.inline.list.align-center li,
#footer ul.inline-block.list.align-center li {
    margin-left: 16px;
    margin-right: 16px;
}
.tariff.table {
    width: 100%;
    border-collapse: collapse;
}
.tariff.table > thead {
    background-color: #D7E4F4;
}
.tariff.table > tbody tr {
    background-color: #F2F6FB;
}
.tariff.table > tfoot {
    background-color: #2269C3;
    color: #FFFFFF;
}
.tariff.table > tfoot tr:first-of-type > th {
    /* background-image: url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/tdelta.svg); */
    background-repeat: repeat-x;
    background-position: 0px 0px;
}
.tariff.table .valign-top {
    vertical-align: top;
}
.tariff.table .valign-bottom {
    vertical-align: bottom;
}
.tariff.table th {
    font-weight: 400;
    text-align: left;
    vertical-align: middle;
    padding: 11px 10px;
    width: 100%;
}
.tariff.table td {
    vertical-align: middle;
    padding: 8px;
    word-wrap: break-word;
}
.tariff.table th.align-right,
.tariff.table td.align-right {
    text-align: right;
}
.tariff.table th.half-size,
.tariff.table td.half-size {
    width: 50%;
}
.tariff.table th.third-size,
.tariff.table td.third-size {
    width: 33%;
}
.tariff.table th.quad-size,
.tariff.table td.quad-size {
    width: 25%;
}
.tariff.table th.micro-size,
.tariff.table td.micro-size {
    width: 10%;
}
.tariff.tariff.table th.min-size,
.tariff.table td.min-size {
    width: 0%;
}
.tariff.table th:first-child,
.tariff.table td:first-child {
    padding-left: 20px;
}
.tariff.table th:last-child,
.tariff.table td:last-child {
    padding-right: 20px;
}
.tariff.table .info.icon {
    margin-left: 10px;
    margin-right: 0px;
    top: 2px;
    position: relative;
}
.tariff.table .no-label.field {
    margin-top: 0px;
}
.tariff.table tbody tr:not(.colored) + tr:not(.colored) td:first-of-type:before {
    content: "";
    position: absolute;
    width: 900px;
    height: 1px;
    margin-top: -10px;
    background-color: #FFFFFF;
}

@media screen and (min-width: 660px) and (max-width: 979.9px) {
    .tariff.table tbody tr:not(.colored) + tr:not(.colored) td:first-of-type:before {
        width: 580px;
    }
}

@media screen and (max-width: 659.9px) {
    .tariff.table tbody tr:not(.colored) + tr:not(.colored) td:first-of-type:before{
        width: 260px;
    }
    .tariff.table {
        display: block;
    }
    .tariff.table > tbody td,
    .tariff.table > tfoot th {
        display: block;
        width: 260px;
    }
    .tariff.table > tbody td + td,
    .tariff.table > tfoot th + th.micro-size {
        width: 124px;
        float: left;
    }
    .tariff.table > tfoot th.micro-size * {
        margin-left: 10px;
    }
    .tariff.table > tfoot  th + th.s-align-left,
    .tariff.table [data-table-headline].s-align-left {
        text-align: left;
    }
    .tariff.table [data-table-headline]:not(:first-child):before {
        content: attr(data-table-headline);
        display: block;
        margin-left: 10px;
    }
    .tariff.table tfoot .button {
        width: 100%;
    }
}

table .info.message.field .icon + *:not(.icon) {
    font-weight: 400;
	font-family: "RobotoRegular", Verdana, sans-serif;
}


/* Bestellstrecke tariffdetail table*/
table.tariffdetail {
    border-collapse: collapse;
}
table.tariffdetail.fullwidth {
    width: 100%;
}
.tariffdetail > thead {
    outline: none;
    background: #DADADA;
}
.tariffdetail > thead th {
    width: 22%;
}
.tariffdetail > thead th[colspan="3"] {
    width: auto;
}
.tariffdetail > tbody > tr:not(:last-child) {
    border-bottom: 1px solid #DADADA;
}
.tariffdetail:last-child > tbody > tr:last-child {
    border-bottom: 1px solid #DADADA;
}
.tariffdetail > tbody > tr.combined {
    border-bottom: 0px;
}
.tariffdetail th {
    font-weight: 400;
}
.tariffdetail th,
.tariffdetail td {
    vertical-align: top;
    text-align: left;
    position: relative;
    padding: 10px 10px 8px 10px;
}
.tariffdetail tr.combined > * {
    vertical-align: bottom;
}
.tariffdetail th[scope="col"]:first-child {
    width: 34%;
    /*font-family: WebdeSansMedium;
    font-size: 24px;
    line-height: 32px;*/
}
.tariffdetail th[scope="col"],
.tariffdetail th[scope="rowgroup"] {
    font-family: "RobotoRegular", Verdana, sans-serif;
    font-size: 18px;
    line-height: 32px;
}
.tariffdetail th:first-child,
.tariffdetail td:first-child {
    padding-left: 20px;
}

.tariffdetail th[scope="rowgroup"],
.tariffdetail [scope="rowgroup"] th {
    cursor: pointer;
}
.tariffdetail [scope="rowgroup"] tr:first-child > *:last-child {
    padding-right: 45px;
}
.js table.tariffdetail th[scope="rowgroup"]:after,
.js .tariffdetail thead[scope="rowgroup"] th:last-child:after {
    content: "";
    background: url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/brand-blue.svg) no-repeat 0% 0%,
                url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/service-blue.svg) no-repeat 0% 0%;
    background-size: auto 2592px, auto 2592px;
    background-position: 100% 0%;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 10px;
    right: 10px;
    margin-top: 5px;
    margin-left: 20px;
    color: transparent;
}
.js table.tariffdetail thead[scope="rowgroup"] th:last-child:after {
    margin-right: 0px;
    margin-left: 10px;
}
.tariffdetail tbody.collapsed th[scope="rowgroup"]:after,
.js .tariffdetail thead[scope="rowgroup"].collapsed th:last-child:after {
    /**background-position: -90px -25px;*/
    background-position: 100% 1.25%;
}

/*  begin: adjust for GMX */
.js table.tariffdetail th[scope="rowgroup"]:after,
.js .tariffdetail thead[scope="rowgroup"] th:last-child:after {
    background-position: 75% 0%;
}
.tariffdetail tbody.collapsed th[scope="rowgroup"]:after,
.js .tariffdetail thead[scope="rowgroup"].collapsed th:last-child:after {
    background-position: 75% 1.25%;
}
/* end: adjust for GMX  */


.js .tariffdetail tbody.collapsed > tr > td,
.js .tariffdetail tbody.collapsed > tr > th,
.js .tariffdetail thead[scope="rowgroup"].collapsed + tbody > tr > td,
.js .tariffdetail thead[scope="rowgroup"].collapsed + tbody > tr > th {
    display: none;
}
.js .tariffdetail tbody.collapsed > tr > td[scope="rowgroup"],
.js .tariffdetail tbody.collapsed > tr > th[scope="rowgroup"],
.js .tariffdetail tbody.collapsed > tr.sum > td,
.js .tariffdetail tbody.collapsed > tr.sum > th,
.js .tariffdetail thead[scope="rowgroup"].collapsed + tbody > tr > td[scope="rowgroup"],
.js .tariffdetail thead[scope="rowgroup"].collapsed + tbody > tr > th[scope="rowgroup"],
.js .tariffdetail thead[scope="rowgroup"].collapsed + tbody > tr.sum > td,
.js .tariffdetail thead[scope="rowgroup"].collapsed + tbody > tr.sum > th {
    display: table-cell;
}
@media screen and (min-width: 980px) {
    .tariffdetail > tbody > tr.combined > * {
        padding-bottom: 0px;
    }
    .tariffdetail > tbody > tr.combined + tr > * {
        padding-top: 0px;
    }
}
@media screen and (max-width: 979.9px) {
    table.tariffdetail {
        width: 100%;
    }
    .tariffdetail thead {
        display: none;
    }
    .js .tariffdetail thead[scope="rowgroup"] {
        display: table-header-group;
    }
    .js .tariffdetail thead[scope="rowgroup"] tr {
        display: table-row;
    }
    .js .tariffdetail thead[scope="rowgroup"] th:first-child {
        display: table-cell;
    }
    .js .tariffdetail thead[scope="rowgroup"] th:first-child:after {
        content: "";
        background: url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/brand-blue.svg) no-repeat 0% 0%,
                url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/service-blue.svg) no-repeat 0% 0%;
        background-size: auto 2592px, auto 2592px;
        background-position: 100% 0%;
        width: 32px;
        height: 32px;
        float: right;
        margin-top: 5px;
        margin-left: 20px;
        color: transparent;
    }
    table.tariffdetail thead[scope="rowgroup"].collapsed th:first-child:after {
        /*background-position: -90px -30px;*/
        background-position: 100% 1.25%;
    }

    /*  begin: adjust for GMX */
    .js .tariffdetail thead[scope="rowgroup"] th:first-child:after {
        background-position: 75% 0%;
    }
    table.tariffdetail thead[scope="rowgroup"].collapsed th:first-child:after {
        background-position: 75% 1.25%;
    }
    /* end: adjust for GMX  */
    .js .tariffdetail thead[scope="rowgroup"] th + * {
        display: none;
    }

    .js .tariffdetail tbody.collapsed > tr > td[scope="rowgroup"],
    .js .tariffdetail tbody.collapsed > tr > th[scope="rowgroup"],
    .js .tariffdetail tbody.collapsed > tr.sum > td,
    .js .tariffdetail tbody.collapsed > tr.sum > th,
    .js .tariffdetail thead[scope="rowgroup"].collapsed + tbody > tr > td[scope="rowgroup"],
    .js .tariffdetail thead[scope="rowgroup"].collapsed + tbody > tr > th[scope="rowgroup"],
    .js .tariffdetail thead[scope="rowgroup"].collapsed + tbody > tr.sum > td,
    .js .tariffdetail thead[scope="rowgroup"].collapsed + tbody > tr.sum > th {
        display: block;
    }
    .tariffdetail td,
    .tariffdetail th {
        display: block;
    }
    .tariffdetail tbody th:first-child {
        padding-left: 10px;
        font-family: "RobotoRegular", Verdana, sans-serif;
        font-size: 16px;
        line-height: 24px;
        background: #FFFFFF;
    }
    .tariffdetail td[data-table-headline] {
        padding-left: 50%;
        overflow: hidden;
        text-align: right;
    }
    .tariffdetail td[data-table-headline]:before {
        content: attr(data-table-headline);
        text-align: left;
        position: absolute;
        left: 10px;
        width: 49%;
        margin-bottom: -1.5em;
        box-sizing: border-box;
        padding-right: 10px;
        font-family: "RobotoRegular", Verdana, sans-serif;
        font-size: 16px;
        line-height: 24px;
    }
    .tariffdetail td[scope="row"]:before {
        display: none;
    }
    .js table.tariffdetail th[scope="rowgroup"]:after {
        margin-right: 0px;
    }
}
@media screen and (max-width: 659.9px) {
    .tariffdetail td[data-table-headline].enwiden {
         padding-bottom: 24px;
    }
    .tariffdetail td[data-table-headline].enwiden:last-child {
         padding-bottom: 32px;
    }
}
/* begin-fix: Arrow bug under Google Chrome and Edge */
/**
@supports (-webkit-appearance:none) {
    .tariffdetail tbody.collapsed th[scope="rowgroup"]:after,
    .js .tariffdetail thead[scope="rowgroup"].collapsed th:last-child:after {
        background-position: -88px -25px;
    }
    .js table.tariffdetail th[scope="rowgroup"]:after,
    .js .tariffdetail thead[scope="rowgroup"] th:last-child:after {
        background-position: -88px -0px;
    }
    @media screen and (max-width: 979.9px) {
        table.tariffdetail thead[scope="rowgroup"].collapsed th:first-child:after {
            background-position: -88px -30px;
        }
        .js .tariffdetail thead[scope="rowgroup"] th:first-child:after {
            background-position: -88px 0px;
        }
    }
}
*/
/* end-fix: Arrow bug under Google Chrome and Edge */

/* begin: table adjustments for additional info module in price column */
.tariff.table tbody td:last-child .module,
.tariff.table tfoot th:last-child .module {
    display: block;
    width: 100%;
    padding-right: 0;
}
.tariff.table tfoot th:last-child .module {
    padding-left: 0;
}
@media screen and (min-width: 660px) {
    .tariff.table thead th:last-child {
        padding-left: 62px;
    }
}
/* end: table adjustments for additional info module in price column */

.tariff.table > tbody tr.colored {
    background-color: #FBEBB3;
}
.tariff.table > tbody tr.colored + tr {
    background-color: #D7E4F4;
}
.tariff.table tbody tr.colored + tr:not(.colored) + tr:not(.colored) > td:first-of-type:before {
    background-color: transparent;
}
.tariff.table .field.radio a.icon,
.tariff.table .field.checkbox a.icon {
    float: none;
    margin-top: auto;
}
/* bugfix: BUIZSOL-14737 */
.tariff.table .checkbox > label > span.size-3 {
    margin-left: -4px;
}


[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: 2px;
}
[class*="backdrop"].rounded-top:before {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
[class*="backdrop"].rounded-bottom:before {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}
[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: #6A9708;  }
.backdrop-a1-dark10:before,  .backdrop-hover-a1-dark10:hover:before,  .teaser:hover .backdrop-hover-a1-dark10:before  { background-color: #77AA09;  }
.backdrop-a1-base:before,    .backdrop-hover-a1-base:hover:before,    .teaser:hover .backdrop-hover-a1-base:before    { background-color: #84BD0A;    }
.backdrop-a1-light15:before, .backdrop-hover-a1-light15:hover:before, .teaser:hover .backdrop-hover-a1-light15:before { background-color: #96C72F; }
.backdrop-a1-light30:before, .backdrop-hover-a1-light30:hover:before, .teaser:hover .backdrop-hover-a1-light30:before { background-color: #A9D154; }
.backdrop-a1-light50:before, .backdrop-hover-a1-light50:hover:before, .teaser:hover .backdrop-hover-a1-light50:before { background-color: #C2DE85; }
.backdrop-a1-light70:before, .backdrop-hover-a1-light70:hover:before, .teaser:hover .backdrop-hover-a1-light70:before { background-color: #DAEBB6; }
.backdrop-a1-light82:before, .backdrop-hover-a1-light82:hover:before, .teaser:hover .backdrop-hover-a1-light82:before { background-color: #E9F3D3; }
.backdrop-a1-light94:before, .backdrop-hover-a1-light94:hover:before, .teaser:hover .backdrop-hover-a1-light94:before { background-color: #F8FBF0; }

.backdrop-b1-dark20:before,  .backdrop-hover-b1-dark20:hover:before,  .teaser:hover .backdrop-hover-b1-dark20:before  { background-color: #1B549C;  }
.backdrop-b1-dark10:before,  .backdrop-hover-b1-dark10:hover:before,  .teaser:hover .backdrop-hover-b1-dark10:before  { background-color: #1F5FB0;  }
.backdrop-b1-base:before,    .backdrop-hover-b1-base:hover:before,    .teaser:hover .backdrop-hover-b1-base:before    { background-color: #2269C3;    }
.backdrop-b1-light15:before, .backdrop-hover-b1-light15:hover:before, .teaser:hover .backdrop-hover-b1-light15:before { background-color: #4380CC; }
.backdrop-b1-light30:before, .backdrop-hover-b1-light30:hover:before, .teaser:hover .backdrop-hover-b1-light30:before { background-color: #6496D5; }
.backdrop-b1-light50:before, .backdrop-hover-b1-light50:hover:before, .teaser:hover .backdrop-hover-b1-light50:before { background-color: #91B4E1; }
.backdrop-b1-light70:before, .backdrop-hover-b1-light70:hover:before, .teaser:hover .backdrop-hover-b1-light70:before { background-color: #BDD2ED; }
.backdrop-b1-light82:before, .backdrop-hover-b1-light82:hover:before, .teaser:hover .backdrop-hover-b1-light82:before { background-color: #D7E4F4; }
.backdrop-b1-light94:before, .backdrop-hover-b1-light94:hover:before, .teaser:hover .backdrop-hover-b1-light94:before { background-color: #F2F6FB; }


.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-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: #9A0026;  }
.backdrop-d1-dark10:before,  .backdrop-hover-d1-dark10:hover:before,  .teaser:hover .backdrop-hover-d1-dark10:before  { background-color: #AD002B;  }
.backdrop-d1-base:before,    .backdrop-hover-d1-base:hover:before,    .teaser:hover .backdrop-hover-d1-base:before    { background-color: #C00030;    }
.backdrop-d1-light15:before, .backdrop-hover-d1-light15:hover:before, .teaser:hover .backdrop-hover-d1-light15:before { background-color: #C9264F; }
.backdrop-d1-light30:before, .backdrop-hover-d1-light30:hover:before, .teaser:hover .backdrop-hover-d1-light30:before { background-color: #D34D6E; }
.backdrop-d1-light50:before, .backdrop-hover-d1-light50:hover:before, .teaser:hover .backdrop-hover-d1-light50:before { background-color: #E08098; }
.backdrop-d1-light70:before, .backdrop-hover-d1-light70:hover:before, .teaser:hover .backdrop-hover-d1-light70:before { background-color: #ECB3C1; }
.backdrop-d1-light82:before, .backdrop-hover-d1-light82:hover:before, .teaser:hover .backdrop-hover-d1-light82:before { background-color: #F4D1DA; }
.backdrop-d1-light94:before, .backdrop-hover-d1-light94:hover:before, .teaser:hover .backdrop-hover-d1-light94:before { background-color: #FBF0F3; }

.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: #818181;  }
.backdrop-d4-dark10:before,  .backdrop-hover-d4-dark10:hover:before,  .teaser:hover .backdrop-hover-d4-dark10:before  { background-color: #919191;  }
.backdrop-d4-base:before,    .backdrop-hover-d4-base:hover:before,    .teaser:hover .backdrop-hover-d4-base:before    { background-color: #A1A1A1;    }
.backdrop-d4-light15:before, .backdrop-hover-d4-light15:hover:before, .teaser:hover .backdrop-hover-d4-light15:before { background-color: #AFAFAF; }
.backdrop-d4-light30:before, .backdrop-hover-d4-light30:hover:before, .teaser:hover .backdrop-hover-d4-light30:before { background-color: #BDBDBD; }
.backdrop-d4-light50:before, .backdrop-hover-d4-light50:hover:before, .teaser:hover .backdrop-hover-d4-light50:before { background-color: #D0D0D0; }
.backdrop-d4-light70:before, .backdrop-hover-d4-light70:hover:before, .teaser:hover .backdrop-hover-d4-light70:before { background-color: #E3E3E3; }
.backdrop-d4-light82:before, .backdrop-hover-d4-light82:hover:before, .teaser:hover .backdrop-hover-d4-light82:before { background-color: #EEEEEE; }
.backdrop-d4-light94:before, .backdrop-hover-d4-light94:hover:before, .teaser:hover .backdrop-hover-d4-light94:before { background-color: #F9F9F9; }
/* 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-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 */

.inverted h1,
.inverted h2,
.inverted h3,
.inverted h4,
.inverted [class][class][class].script,
.inverted p,
.inverted a,
.inverted label,
.inverted legend {
    color: #FFFFFF;
    text-shadow: none;
}
.inverted p > a:not(.button) {
    text-decoration: underline;
}
.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 { color: #525252; }
.inverted .uninverted a {
    color: #2269C3;
    text-decoration: none;
}


.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.brand {
	background-color: #84BD0A;
	color: #FFFFFF;
}
.spoiler.service {
	background-color: #2269C3;
	color: #FFFFFF;
}
.spoiler.crm {
	background-color: #A1A1A1;
	color: #FFFFFF;
}
.spoiler.warn {
	background-color: #C00030;
	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 */


@-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.bar {
  display: block;
  height: 23px;
  padding: 0px;
  box-sizing: border-box;
  border-radius: 4px;
  background: #F3F3F3;
}
.progress.bar:after {
  content: "";
  display: block;
  height: 100%;
  background-color: #2269C3;
  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.bar[data-percentage^="1"]:after {
  width: 1%;
  background-color: #c10430;
}
.progress.bar[data-percentage^="2"]:after {
  width: 2%;
  background-color: #c20830;
}
.progress.bar[data-percentage^="3"]:after {
  width: 3%;
  background-color: #c30c30;
}
.progress.bar[data-percentage^="4"]:after {
  width: 4%;
  background-color: #c41030;
}
.progress.bar[data-percentage^="5"]:after {
  width: 5%;
  background-color: #c41430;
}
.progress.bar[data-percentage^="6"]:after {
  width: 6%;
  background-color: #c51830;
}
.progress.bar[data-percentage^="7"]:after {
  width: 7%;
  background-color: #c61c30;
}
.progress.bar[data-percentage^="8"]:after {
  width: 8%;
  background-color: #c72030;
}
.progress.bar[data-percentage^="9"]:after {
  width: 9%;
  background-color: #c8242f;
}
.progress.bar[data-percentage^="10"]:after {
  width: 10%;
  background-color: #c9282f;
}
.progress.bar[data-percentage^="11"]:after {
  width: 11%;
  background-color: #ca2c2f;
}
.progress.bar[data-percentage^="12"]:after {
  width: 12%;
  background-color: #cb302f;
}
.progress.bar[data-percentage^="13"]:after {
  width: 13%;
  background-color: #cb332f;
}
.progress.bar[data-percentage^="14"]:after {
  width: 14%;
  background-color: #cc372f;
}
.progress.bar[data-percentage^="15"]:after {
  width: 15%;
  background-color: #cd3b2f;
}
.progress.bar[data-percentage^="16"]:after {
  width: 16%;
  background-color: #ce3f2f;
}
.progress.bar[data-percentage^="17"]:after {
  width: 17%;
  background-color: #cf432f;
}
.progress.bar[data-percentage^="18"]:after {
  width: 18%;
  background-color: #d0472f;
}
.progress.bar[data-percentage^="19"]:after {
  width: 19%;
  background-color: #d14b2f;
}
.progress.bar[data-percentage^="20"]:after {
  width: 20%;
  background-color: #d24f2f;
}
.progress.bar[data-percentage^="21"]:after {
  width: 21%;
  background-color: #d2532f;
}
.progress.bar[data-percentage^="22"]:after {
  width: 22%;
  background-color: #d3572f;
}
.progress.bar[data-percentage^="23"]:after {
  width: 23%;
  background-color: #d45b2f;
}
.progress.bar[data-percentage^="24"]:after {
  width: 24%;
  background-color: #d55f2f;
}
.progress.bar[data-percentage^="25"]:after {
  width: 25%;
  background-color: #d6632f;
}
.progress.bar[data-percentage^="26"]:after {
  width: 26%;
  background-color: #d7672e;
}
.progress.bar[data-percentage^="27"]:after {
  width: 27%;
  background-color: #d86b2e;
}
.progress.bar[data-percentage^="28"]:after {
  width: 28%;
  background-color: #d96f2e;
}
.progress.bar[data-percentage^="29"]:after {
  width: 29%;
  background-color: #da732e;
}
.progress.bar[data-percentage^="30"]:after {
  width: 30%;
  background-color: #da772e;
}
.progress.bar[data-percentage^="31"]:after {
  width: 31%;
  background-color: #db7b2e;
}
.progress.bar[data-percentage^="32"]:after {
  width: 32%;
  background-color: #dc7f2e;
}
.progress.bar[data-percentage^="33"]:after {
  width: 33%;
  background-color: #dd832e;
}
.progress.bar[data-percentage^="34"]:after {
  width: 34%;
  background-color: #de872e;
}
.progress.bar[data-percentage^="35"]:after {
  width: 35%;
  background-color: #df8b2e;
}
.progress.bar[data-percentage^="36"]:after {
  width: 36%;
  background-color: #e08f2e;
}
.progress.bar[data-percentage^="37"]:after {
  width: 37%;
  background-color: #e1932e;
}
.progress.bar[data-percentage^="38"]:after {
  width: 38%;
  background-color: #e1962e;
}
.progress.bar[data-percentage^="39"]:after {
  width: 39%;
  background-color: #e29a2e;
}
.progress.bar[data-percentage^="40"]:after {
  width: 40%;
  background-color: #e39e2e;
}
.progress.bar[data-percentage^="41"]:after {
  width: 41%;
  background-color: #e4a22e;
}
.progress.bar[data-percentage^="42"]:after {
  width: 42%;
  background-color: #e5a62d;
}
.progress.bar[data-percentage^="43"]:after {
  width: 43%;
  background-color: #e6aa2d;
}
.progress.bar[data-percentage^="44"]:after {
  width: 44%;
  background-color: #e7ae2d;
}
.progress.bar[data-percentage^="45"]:after {
  width: 45%;
  background-color: #e8b22d;
}
.progress.bar[data-percentage^="46"]:after {
  width: 46%;
  background-color: #e8b62d;
}
.progress.bar[data-percentage^="47"]:after {
  width: 47%;
  background-color: #e9ba2d;
}
.progress.bar[data-percentage^="48"]:after {
  width: 48%;
  background-color: #eabe2d;
}
.progress.bar[data-percentage^="49"]:after {
  width: 49%;
  background-color: #ebc22d;
}
.progress.bar[data-percentage^="50"]:after {
  width: 50%;
  background-color: #ecc62d;
}
.progress.bar[data-percentage^="51"]:after {
  width: 51%;
  background-color: #eac52e;
}
.progress.bar[data-percentage^="52"]:after {
  width: 52%;
  background-color: #e7c52e;
}
.progress.bar[data-percentage^="53"]:after {
  width: 53%;
  background-color: #e5c42f;
}
.progress.bar[data-percentage^="54"]:after {
  width: 54%;
  background-color: #e3c430;
}
.progress.bar[data-percentage^="55"]:after {
  width: 55%;
  background-color: #e1c331;
}
.progress.bar[data-percentage^="56"]:after {
  width: 56%;
  background-color: #dec331;
}
.progress.bar[data-percentage^="57"]:after {
  width: 57%;
  background-color: #dcc232;
}
.progress.bar[data-percentage^="58"]:after {
  width: 58%;
  background-color: #dac233;
}
.progress.bar[data-percentage^="59"]:after {
  width: 59%;
  background-color: #d7c133;
}
.progress.bar[data-percentage^="60"]:after {
  width: 60%;
  background-color: #d5c034;
}
.progress.bar[data-percentage^="61"]:after {
  width: 61%;
  background-color: #d3c035;
}
.progress.bar[data-percentage^="62"]:after {
  width: 62%;
  background-color: #d0bf35;
}
.progress.bar[data-percentage^="63"]:after {
  width: 63%;
  background-color: #cebf36;
}
.progress.bar[data-percentage^="64"]:after {
  width: 64%;
  background-color: #ccbe37;
}
.progress.bar[data-percentage^="65"]:after {
  width: 65%;
  background-color: #cabe38;
}
.progress.bar[data-percentage^="66"]:after {
  width: 66%;
  background-color: #c7bd38;
}
.progress.bar[data-percentage^="67"]:after {
  width: 67%;
  background-color: #c5bc39;
}
.progress.bar[data-percentage^="68"]:after {
  width: 68%;
  background-color: #c3bc3a;
}
.progress.bar[data-percentage^="69"]:after {
  width: 69%;
  background-color: #c0bb3a;
}
.progress.bar[data-percentage^="70"]:after {
  width: 70%;
  background-color: #bebb3b;
}
.progress.bar[data-percentage^="71"]:after {
  width: 71%;
  background-color: #bcba3c;
}
.progress.bar[data-percentage^="72"]:after {
  width: 72%;
  background-color: #b9ba3c;
}
.progress.bar[data-percentage^="73"]:after {
  width: 73%;
  background-color: #b7b93d;
}
.progress.bar[data-percentage^="74"]:after {
  width: 74%;
  background-color: #b5b93e;
}
.progress.bar[data-percentage^="75"]:after {
  width: 75%;
  background-color: #b3b83f;
}
.progress.bar[data-percentage^="76"]:after {
  width: 76%;
  background-color: #b0b73f;
}
.progress.bar[data-percentage^="77"]:after {
  width: 77%;
  background-color: #aeb740;
}
.progress.bar[data-percentage^="78"]:after {
  width: 78%;
  background-color: #acb641;
}
.progress.bar[data-percentage^="79"]:after {
  width: 79%;
  background-color: #a9b641;
}
.progress.bar[data-percentage^="80"]:after {
  width: 80%;
  background-color: #a7b542;
}
.progress.bar[data-percentage^="81"]:after {
  width: 81%;
  background-color: #a5b543;
}
.progress.bar[data-percentage^="82"]:after {
  width: 82%;
  background-color: #a2b443;
}
.progress.bar[data-percentage^="83"]:after {
  width: 83%;
  background-color: #a0b444;
}
.progress.bar[data-percentage^="84"]:after {
  width: 84%;
  background-color: #9eb345;
}
.progress.bar[data-percentage^="85"]:after {
  width: 85%;
  background-color: #9cb246;
}
.progress.bar[data-percentage^="86"]:after {
  width: 86%;
  background-color: #99b246;
}
.progress.bar[data-percentage^="87"]:after {
  width: 87%;
  background-color: #97b147;
}
.progress.bar[data-percentage^="88"]:after {
  width: 88%;
  background-color: #95b148;
}
.progress.bar[data-percentage^="89"]:after {
  width: 89%;
  background-color: #92b048;
}
.progress.bar[data-percentage^="90"]:after {
  width: 90%;
  background-color: #90b049;
}
.progress.bar[data-percentage^="91"]:after {
  width: 91%;
  background-color: #8eaf4a;
}
.progress.bar[data-percentage^="92"]:after {
  width: 92%;
  background-color: #8bae4a;
}
.progress.bar[data-percentage^="93"]:after {
  width: 93%;
  background-color: #89ae4b;
}
.progress.bar[data-percentage^="94"]:after {
  width: 94%;
  background-color: #87ad4c;
}
.progress.bar[data-percentage^="95"]:after {
  width: 95%;
  background-color: #85ad4d;
}
.progress.bar[data-percentage^="96"]:after {
  width: 96%;
  background-color: #82ac4d;
}
.progress.bar[data-percentage^="97"]:after {
  width: 97%;
  background-color: #80ac4e;
}
.progress.bar[data-percentage^="98"]:after {
  width: 98%;
  background-color: #7eab4f;
}
.progress.bar[data-percentage^="99"]:after {
  width: 99%;
  background-color: #7bab4f;
}
.progress.bar[data-percentage^="100"]:after {
  width: 100%;
  background-color: #79aa50;
}
.progress.bar[data-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.bar {
  height: auto;
  width: 100%;
  padding: 0px;
  border: 0px;
  display: table;
  line-height: 40px;
  background: transparent;
  position: relative;
  margin-left: -2px;
}
ol.progress.bar li {
  width: 25%;
  text-indent: 0px;
  display: table-cell;
  white-space: word-wrap;
  text-align: center;
  position: relative;
  font-size: 20px;
  font-family: RobotoMedium, Arial, sans-serif;
}
ol.progress.bar li:nth-last-of-type(3):first-of-type,
ol.progress.bar li:nth-last-of-type(3):first-of-type ~ li {
  width: 33%;
}
ol.progress.bar li:nth-last-of-type(2):first-of-type,
ol.progress.bar li:nth-last-of-type(2):first-of-type ~ li {
  width: 50%;
}
ol.progress.bar li + li {
  margin-left: 4px;
}
ol.progress.bar li a {
  color: #333333;
  text-decoration: none;
}
ol.progress.bar li a:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
ol.progress.bar li a:hover {
  text-decoration: none;
}
ol.progress.bar li.active a {
  color: #FFFFFF;
}
ol.progress.bar li:before,
ol.progress.bar li:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 0px;
  right: 3px;
  height: 20px;
  background: #F2F6FB;
  -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.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.bar li:first-child::before {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  height: 40px;
  left: 0px;
  right: 7px;
  border-radius: 2px;
}
ol.progress.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 #F2F6FB;
  border-width: 20px 0px 20px 8px;
  border-style: solid;
  border-radius: 2px;
}
ol.progress.bar li:last-child {
  background-color: #F2F6FB;
  -webkit-transform: translateX(4px);
  -ms-transform: translateX(4px);
  transform: translateX(4px);
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
ol.progress.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: 2px;
  border-bottom-right-radius: 2px;
}
ol.progress.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: 2px;
  border-bottom-right-radius: 2px;
}
ol.progress.bar li.active {
  color: #FFFFFF;
}
ol.progress.bar li.active:before,
ol.progress.bar li.active:after {
  background: #2269C3;
}
ol.progress.bar li.active:first-child::after {
  border-color: transparent transparent transparent #2269C3;
  background: transparent;
  top: 1px;
}
ol.progress.bar li.active:last-child {
  background-color: #2269C3;
}
ol.progress.bar li.linked:hover::before,
ol.progress.bar li.linked:hover::after {
  background: #1B549C;
}
ol.progress.bar li.linked:hover a {
  color: #FFFFFF;
}
ol.progress.bar li.linked:first-child:hover::after {
  border-color: transparent transparent transparent #1B549C;
  background: transparent;
}
@media all and (min-width: 659.9px) and (max-width: 979.9px) {
  ol.progress.bar li:not(.active) span {
    display: none;
  }
  ol.progress.bar li:first-child:before {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    height: 40px;
    width: 96%;
  }
  ol.progress.bar li:first-child:after {
    right: -0.75px;
  }
}
@media screen and (max-width: 659.9px) {
  ol.progress.bar {
    table-layout: fixed;
  }
  ol.progress.bar li {
    width: 40px;
  }
  ol.progress.bar li:not(.active) span {
    display: none;
  }
  ol.progress.bar li.active {
    text-indent: 0px;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  ol.progress.bar li.active:first-child::before {
    width: 96%;
  }
  ol.progress.bar li.active:first-child::after {
    right: 0.5px;
  }
}
.backdrop-b1-light94 .progress.bar li:before,
.backdrop-b1-light94 .progress.bar li:after,
.backdrop-b1-light94 .progress.bar li:first-child::after,
.backdrop-b1-light94 .progress.bar li:last-child {
  background-color: #D7E4F4;
}


.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;
}


/* begin: define countdown-spoiler layouts for s spoilers */
.spoiler.s.priceInfo em,
.spoiler.s.targetDate em,
.spoiler.s.countdownDays em,
.spoiler.s.fewHours em,
.spoiler.s.endNote em {
    display: block;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: initial;
}
.spoiler.s.priceInfo {
    font-size: 13px;
    line-height: 20px;
    padding: 10px 0px 0px 0px;
}
.spoiler.s.targetDate {
    font-size: 16px;
    line-height: 20px;
    padding: 18px 0px 0px 0px;
}
.spoiler.s.countdownDays {
    font-size: 13px;
    line-height: 22px;
    padding: 12px 0px 0px 0px;
}
.spoiler.s.countdownDays .remaining-days-unit {
    font-size: 15px;
    font-weight: bold;
}
.spoiler.s.fewHours {
    font-size: 16px;
    line-height: 20px;
    padding: 16px 0px 0px 0px;
}
.spoiler.s.endNote {
    font-size: 16px;
    line-height: 20px;
    padding: 24px 0px 0px 0px;
}
/* end: define countdown-spoiler layouts for s spoilers */

/* begin: define countdown-spoiler layouts for l spoilers */
.spoiler.l.priceInfo em,
.spoiler.l.targetDate em,
.spoiler.l.countdownDays em,
.spoiler.l.fewHours em,
.spoiler.l.endNote em {
    display: block;
    font-size: 32px;
    line-height: 32px;
    letter-spacing: initial;
}
.spoiler.l.priceInfo {
    font-size: 16px;
    line-height: 26px;
    padding: 15px 0px 0px 0px;
}
.spoiler.l.targetDate {
    font-size: 20px;
    line-height: 26px;
    padding: 25px 0px 0px 0px;
}
.spoiler.l.countdownDays {
    font-size: 16px;
    line-height: 26px;
    padding: 15px 0px 0px 0px;
}
.spoiler.l.countdownDays em {
    line-height: 38px;
}
.spoiler.l.countdownDays .remaining-days-unit {
    font-size: 20px;
    font-weight: bold;
}
.spoiler.l.fewHours {
    font-size: 20px;
    line-height: 26px;
    padding: 22px 0px 0px 0px;
}
.spoiler.l.endNote {
    font-size: 20px;
    line-height: 26px;
    padding: 34px 0px 35px 0px;
}
/* end: define countdown-spoiler layouts for l spoilers */


/* begin: common definitions */
.top {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
form hr {
    height: 1px;
    background-color: #DADADA;
}
img {
    border-radius: 2px;
}
#footer img {
    margin-right: 10px;
    background-color: #FFFFFF;
}

/* buttons */
.login.button,
.table tfoot .button,
fieldset.form.actions > *:not(a) {
    width: 300px;
}
.ghost.button[class][class][class][class] {
    background-color: transparent;
}
@media all and (max-width: 659.9px) {
    .table tfoot .button,
    fieldset.form.actions > *:not(.service) {
        margin-right: 0px;
        margin-bottom: 10px;
        width: 100%;
    }
}
/* special color */
[class][class][class].script {
    color: #2269C3;
}
a.contact-box {
    color: #525252;
    cursor: pointer;
}
.note {
    color: #999999;
}
.field.checkbox input ~ label.note:before,
.field.checkbox input:not(:checked) ~ label.note:before  {
    border-color: #999999;
}
.field.select:after {
    border-color: #2269C3;
}

/* begin: background-image for dialog box (changed to icon from service sprite - new icon module) */
.header .dialog::after {
    content: "";
    background: url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/brand-blue.svg) no-repeat 0% 0%,
                url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/service-blue.svg) no-repeat 0% 0%;
    background-size: auto 10368px, auto 10368px;
    background-position: 66.66666667% 32.5%;
    opacity: 0.1;
    width: 128px;
    height: 128px;
    overflow: hidden;
    float: right;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: -1;
}
/*  begin: adjust for GMX */
.header .dialog::after {
    background-position: 50% 32.5%;
}
/* end: adjust for GMX  */
.no-flex .dialog .close.icon.right {
    position: relative;
}
/* end: background-image for dialog box */
.xl.button > .l.icon {
    margin: -1px -13px -3px 8px;
}
/* begin: items in table */
.tariff.table .list li {
    padding: 0px;
}
.tariff.table .info.message.field {
    z-index: 100;
}
.tariff.table [class*="backdrop-c1-base"] {
    background-color: #FFFFFF;
}
.tariff.table [class*="backdrop-c1-base"]:before {
    margin-top: 0px;
}
.table > tfoot tr:first-of-type > th.white {
    /* background-image: url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/tdelta-white.svg); */
}
.tariff.table td[colspan] .checkbox.field {
    max-width: none;
}
.tariff.table td:not(:first-child){
    white-space: nowrap;
}
/* end: items in table */

/* fix for DP-10357: text selected when using toggle (#tariff-slider) quickly */
#tariff-slider {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;
}
/* end: fix for DP-10357 */

/* IE10+ begin: avoid the horizontal scrollbar */
@media screen and (min-width: 980px) {
    _:-ms-lang(x), _:-webkit-full-screen, body { overflow-x: hidden; }
}
@media screen and (-ms-high-contrast: active) and (min-width: 980px),
(-ms-high-contrast: none) and (min-width: 980px) {
    body {
        overflow-x: hidden;
    }
}
/* IE10+ end: avoid the horizontal scrollbar */
/* begin: fix the center problem under no-flex browser */
.no-flex .container.center > .container:not(.unpadded),
.no-flex .container.center > .module:not(.unpadded) {
    float: none;
    margin-left: auto;
    margin-right: auto;
}
.no-flex .navigation > ul {
    position: absolute;
}
/* end: fix the center problem under no-flex browser */
/* begin: move field visually inside checkbox label */
.field.inside-checkbox,
.field.inside-checkbox + .error.message.field {
    margin-left: 45px;
    max-width: 575px;
}
@media screen and (max-width: 659.9px) {
    .field.inside-checkbox,
    .field.inside-checkbox + .error.message.field {
        margin-left: 45px;
        max-width: 255px;
    }
}

/* end: move field visually inside checkbox label */
/* begin: login page global error message */
.message.error {
    border-radius: 0px;
    color: #FFFFFF;
    background-color: #C00030;
    border-color: #C00030;
}
/* end: login page global error message */

/* begin: small fix for android 4.4.2 and older */
.no-flex ol.progress.bar li:first-child:after {
    border-radius: 0px;
    -webkit-transform: translateX(-1px);
}
/* end: small fix for android 4.4.2 and older */
/* begin: footnotes */
.remark {
color: #999999;
}
/* end: footnotes */
/* begin: notes with icon */
.note .icon,
.note .icon + * {
    vertical-align: middle;
}
/* end: notes with icon */

/* prevent headline wrapping */
@media screen and (min-width: 660px) {
    .hero_headlines {
        white-space: nowrap;
    }
}

/* add explicit font-color inversion class for header to be able to invert without using the service-color as bg */
.header.header-inverted  > *:first-child {
    color: #FFFFFF;
}

/* adjust info message fields to match the icon color */
.info.message.field {
    background-color: #A1A1A1;
    border-color: #A1A1A1;
}

.teaser .label[class][class] img {
    width: auto;
}
/* linked teaser - backport from new teaser module */
.js .linked {
    cursor: pointer;
}
/* fix footer links breaking content */
@media screen and (max-width: 659.9px) {
    #footer ul.inline-block.list li {
        margin-right: 12px;
    }
    #footer ul.inline-block.list:not(.align-center) li:last-child {
        margin-right: 0px;
    }
}

@media screen and (min-width: 980px) {
    .header a:focus,
    .header .link-base:hover,
    .header .link-hover {
        text-decoration: none;
    }
    .header .right .module > .hotline.icon:before {
        display: block;
        content: "02602 969713 \007C";
        color: #FFFFFF;
        white-space: nowrap;
        text-indent: 0px;
        font-family: RobotoRegular;
        font-size: 20px;
        line-height: 28px;
        position: absolute;
        right: 100%;
        padding-right: 8px;
        top: 4px;
        width: auto;
        height: auto;
    }
    .no-flex .header .right .module > .hotline.icon:before {
        top: 4px;
        bottom: auto;
        width: auto;
        height: auto;
    }
}

/*  */

.field label:not([for]){
    cursor:default
}

.inline-block{
    display: inline-block;
}

.message.info {
    border-radius: 0px;
    color: #FFFFFF;
    background-color: #A1A1A1;
    border-color: #A1A1A1;
}
.message.info.field,
.message.info.field[class*="backdrop"]:before{
    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.field.hidden,
.message.info.field.hidden[class*="backdrop"]:before {
    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;
}
*[class][class].unpadded {
    padding-left: 0px;
    padding-right: 0px;
}
/** start: extra padding by breakpoint */
.padding-0[class][class][class] {
    padding-left: 0px;
    padding-right: 0px;
}
.padding-10[class][class][class] {
    padding-left: 10px;
    padding-right: 10px;
}
.padding-20[class][class][class] {
    padding-left: 20px;
    padding-right: 20px;
}
@media screen and (max-width: 659.9px) {
    .s-padding-0[class][class][class] {
        padding-left: 0px;
        padding-right: 0px;
    }
    .s-padding-10[class][class][class] {
        padding-left: 10px;
        padding-right: 10px;
    }
    .s-padding-20[class][class][class] {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
    .m-padding-0[class][class][class] {
        padding-left: 0px;
        padding-right: 0px;
    }
    .m-padding-10[class][class][class] {
        padding-left: 10px;
        padding-right: 10px;
    }
    .m-padding-20[class][class][class] {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media screen and (min-width: 980px) {
    .l-padding-0[class][class][class] {
        padding-left: 0px;
        padding-right: 0px;
    }
    .l-padding-10[class][class][class] {
        padding-left: 10px;
        padding-right: 10px;
    }
    .l-padding-20[class][class][class] {
        padding-left: 20px;
        padding-right: 20px;
    }
}
/** end: extra padding by breakpoint */.bonus {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-preferred-size: 0;
            -webkit-flex-basis: 0;
            flex-basis: 0;
    -ms-flex-direction: row;
        -webkit-flex-direction: row;
            flex-direction: row;
    -ms-flex-align: start;
        -webkit-align-items: flex-start;
            align-items: flex-start;
    -ms-flex-line-pack: start;
            -webkit-align-content: flex-start;
            align-content: flex-start;
            -webkit-flex-wrap: nowrap;
                -ms-flex-wrap: nowrap;
                    flex-wrap: nowrap;
}
.bonus > :first-child {
    padding-right: 10px;
}
@media screen and (max-width: 659.9px) {
    .bonus {
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
    }
    .bonus > :first-child {
        margin-left: auto;
        margin-right: auto;
    }
}
/* Accordion for login */
.login.akkordeon .ghost.service.button.s-0 {
    float: right;
    position: relative;
    top: 3px;
}
.ghost.service.button:hover .service.icon {
    background-position-x: 25%;
}
.ghost.service.button:hover .service.down.icon {
    background-position: 25% 1.25%;
}
.login.akkordeon[open] > *:first-child *:first-of-type:not(.icon):before,
.js .login.akkordeon.open > *:first-child *:first-of-type:not(.icon):before {
    background-position: 75% 7.5%;
}
.login.akkordeon[open] .summary .ghost.service.button,
.js .login.akkordeon.open .summary .ghost.service.button,
.login.akkordeon:not([open]) > *:first-child *:first-of-type:not(.icon):before,
.js .login.akkordeon:not(.open) > *: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;
    }
}
/* logos in login akkordeon */
form .radio.field img {
    position: relative;
    top: 6px;
    z-index: 999;
}
/* fallback spoiler position */
.teaser .spoiler {
    position: absolute;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
}
/* Style of spoiler */
.teaser .l.spoiler.priceInfo em {
    font-size: 40px;
}
.teaser .l.spoiler.priceInfo em > * {
    font-size: 24px;
}
.teaser .s.spoiler.priceInfo em {
    font-size: 32px;
}
.teaser .s.spoiler.priceInfo em > * {
    font-size: 20px;
}
.teaser.module .content .visual > a {
    outline: none;
    display: block;
    height: 0px;
}
.teaser .visual .spoiler.s.type-1 em,
.teaser .visual .spoiler.s.s-type-1 em,
.teaser .visual .spoiler.s.m-type-1 em,
.teaser .visual .spoiler.s.l-type-1 em,
.teaser .visual .spoiler.s.type-2 em,
.teaser .visual .spoiler.s.s-type-2 em,
.teaser .visual .spoiler.s.m-type-2 em,
.teaser .visual .spoiler.s.l-type-2 em,
.teaser .visual .spoiler.s.type-3 em,
.teaser .visual .spoiler.s.s-type-3 em,
.teaser .visual .spoiler.s.m-type-3 em,
.teaser .visual .spoiler.s.l-type-3 em {
    letter-spacing: initial;
}
.teaser .visual .spoiler.s.type-1,
.teaser .visual .spoiler.s.s-type-1,
.teaser .visual .spoiler.s.m-type-1,
.teaser .visual .spoiler.s.l-type-1 {
    font-size: 16px;
    line-height: 20px;
}
.teaser .visual .spoiler.s.type-2,
.teaser .visual .spoiler.s.s-type-2,
.teaser .visual .spoiler.s.m-type-2,
.teaser .visual .spoiler.s.l-type-2 {
    font-size: 14px;
    line-height: 18px;
}
.teaser .visual .spoiler.s.type-3,
.teaser .visual .spoiler.s.s-type-3,
.teaser .visual .spoiler.s.m-type-3,
.teaser .visual .spoiler.s.l-type-3 {
    font-size: 16px;
    line-height: 20px;
    padding: 28px 0px 28px 0px;
}

.teaser .visual .spoiler.l.type-1 em,
.teaser .visual .spoiler.l.l-type-1 em,
.teaser .visual .spoiler.l.type-2 em,
.teaser .visual .spoiler.l.l-type-2 em,
.teaser .visual .spoiler.l.type-3 em,
.teaser .visual .spoiler.l.l-type-3 em {
    letter-spacing: initial;
}
.teaser .visual .spoiler.l.type-1,
.teaser .visual .spoiler.l.l-type-1 {
    font-size: 22px;
    line-height: 30px;
}
.teaser .visual .spoiler.l.type-2,
.teaser .visual .spoiler.l.l-type-2 {
    font-size: 20px;
    line-height: 30px;
}
.teaser .visual .spoiler.l.type-2 em,
.teaser .visual .spoiler.l.l-type-2 em {
    font-size: 34px;
}
.teaser .visual .spoiler.l.type-3,
.teaser .visual .spoiler.l.l-type-3 {
    font-size: 22px;
    line-height: 30px;
    padding: 35px 0px 35px 0px;
}
/* Position of spoiler */
@media screen and (max-width: 659.9px) {
    .teaser .visual .spoiler.s-pos-1 {
        left: 0px;
        top: 0px;
        right: auto;
        bottom: auto;
    }
    .teaser .visual .spoiler.s-pos-2 {
        left: auto;
        top: 0px;
        right: 0px;
        bottom: auto;
    }
    .teaser .visual .spoiler.s-pos-3 {
        left: auto;
        top: auto;
        right: 0px;
        bottom: 0px;
    }
    .teaser .visual .spoiler.s-pos-4 {
        left: 0px;
        top: auto;
        right: auto;
        bottom: 0px;
    }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
    .teaser .visual .spoiler.m-pos-1 {
        left: 0px;
        top: 0px;
        right: auto;
        bottom: auto;
    }
    .teaser .visual .spoiler.m-pos-2 {
        left: auto;
        top: 0px;
        right: 0px;
        bottom: auto;
    }
    .teaser .visual .spoiler.m-pos-3 {
        left: auto;
        top: auto;
        right: 0px;
        bottom: 0px;
    }
    .teaser .visual .spoiler.m-pos-4 {
        left: 0px;
        top: auto;
        right: auto;
        bottom: 0px;
    }
}
@media screen and (min-width: 980px) {
    .teaser .visual .spoiler.l-pos-1 {
        left: 0px;
        top: 0px;
        right: auto;
        bottom: auto;
    }
    .teaser .visual .spoiler.l-pos-2 {
        left: auto;
        top: 0px;
        right: 0px;
        bottom: auto;
    }
    .teaser .visual .spoiler.l-pos-3 {
        left: auto;
        top: auto;
        right: 0px;
        bottom: 0px;
    }
    .teaser .visual .spoiler.l-pos-4 {
        left: 0px;
        top: auto;
        right: auto;
        bottom: 0px;
    }
}
/* 1und1 Logo */
.icon.x4l.logo-1und1 {
    background: url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/logo/1und1_footer.svg) no-repeat 0% 0%;
    background-size: 60px auto;
    width: 60px;
    height: 60px;
    border: 2px #FFFFFF solid;
    background-color: #FFFFFF
}
/* iconflaechen fuer showhidetoggle */
.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: '';
    position: absolute;
    margin: -10px 0px 0px -10px;
    padding: 10px;
    box-sizing: content-box;
    width: 16px;
    height: 16px;
}
.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 .xxxl.icon[data-show-nodes]:before,
.touch .xxxl.icon[data-hide-nodes]:before,
.touch .xxxl.icon[data-toggle-nodes]:before,
.touch .xxxl.icon[data-set-nodes]:before,
.touch .xxxl.icon[data-unset-nodes]:before { width: 60px; height: 60px; }
.s.icon.close {
    overflow: visible;
}
@media screen and (max-width: 979.9px) {
    .s.icon[data-show-nodes]:before,
    .s.icon[data-hide-nodes]:before,
    .s.icon[data-toggle-nodes]:before,
    .s.icon[data-set-nodes]:before,
    .s.icon[data-unset-nodes]:before {
        content: '';
        position: absolute;
        margin: -10px 0px 0px -10px;
        padding: 10px;
        box-sizing: content-box;
        top: 0px;
        right: -10px;
    }
}
/* begin: Startpage - Button for Tariff-Slider-Block */
#tariff-slider span {
    vertical-align: middle;
    padding: 15px;
    margin-top: 10px;
}
#tariff-slider .toggle-button {
    display: inline-block;
    vertical-align: middle;
    padding: 0px;
    height: 26px;
    width: 40px;
    border-radius: 4px;
    background-color: #5CB82A;
}
#tariff-slider #toggle-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;
}
#tariff-slider .toggle-button.switched:before {
    -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
            transform: translateX(20px);
}
#tariff-slider .toggle-button.hidden {
    display: none;
}
/* end: Startpage - Button for Tariff-Slider-Block */
/* Accordion-Creaser: Paddings and Colors */
.akkordeon.akkordeon-creaser:hover .summary,
.akkordeon.akkordeon-creaser:hover .summary > .module,
.akkordeon.akkordeon-creaser:hover .akkordeon-content,
.akkordeon.akkordeon-creaser[open] .summary,
.akkordeon.akkordeon-creaser[open] .summary > .module,
.akkordeon.akkordeon-creaser.open .akkordeon-content {
    background-color: #D7E4F4;
}
.akkordeon.akkordeon-creaser .summary {
    padding-left: 0px;
    padding-right: 0px;
}
.akkordeon.akkordeon-creaser .akkordeon-content > *:not(.unpadded) {
    padding-left: 10px;
    padding-right: 10px;
}
@media screen and (max-width: 659.5px) {
    .akkordeon.akkordeon-creaser .summary {
        padding: 20px 0px;
    }
}

/* Accordion-Creaser: Spoiler */
@media screen and (min-width: 980px) {
    .akkordeon.akkordeon-creaser .summary .teaser.module ~ .spoiler {
        position: absolute;
        top: 30px;
        right: 150px;
    }
}
@media screen and (max-width: 659.9px) {
    .akkordeon.akkordeon-creaser .summary .teaser.module ~ .spoiler.s-txt {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        color: #2269C3;
        background-color: transparent;
        font-size: 16px;
        line-height: 24px;
        font-weight: 800;
        width: 100%;
        height: auto;
    }
    .akkordeon.akkordeon-creaser .summary .teaser.module ~ .spoiler.s-txt > em,
    .akkordeon.akkordeon-creaser .summary .teaser.module ~ .spoiler.s-txt > strong {
        font-size: 16px;
        line-height: 24px;
    }
    .akkordeon.akkordeon-creaser .summary .teaser.module ~ .spoiler.s-center {
        margin-left: auto;
        margin-right: auto;
    }
}
/* Accordion-Creaser: Button */
.akkordeon.akkordeon-creaser[open] .summary .teaser.module ~ .button,
.akkordeon.akkordeon-creaser.open .summary .teaser.module ~ .button {
    display: none;
}
@media screen and (min-width: 980px) {
    .akkordeon.akkordeon-creaser .summary .teaser.module ~ .button {
        position: absolute;
        top: 70px;
        right: 20px;
    }
}

/* Accordion-Creaser: Arrow */
.js .akkordeon.akkordeon-creaser[open] > *:first-child > *:first-of-type:not(.icon):before,
.js .akkordeon.akkordeon-creaser.open > *:first-child > *:first-of-type:not(.icon):before {
    display: inline-block;
    position: absolute;
    right: 10px;
}
.js .akkordeon.akkordeon-creaser > *:first-child > *:first-of-type:not(.icon):before {
    display: none;
}

/* Accordion-Creaser: Font */
@media screen and (min-width: 980px) {
    p.l-strong,
    span.l-strong {
        font-weight: 800;
    }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
    p.m-strong,
    span.m-strong {
        font-weight: 800;
    }
}
@media screen and (max-width: 659.9px) {
    p.s-strong,
    span.s-strong {
        font-weight: 800;
    }
}

/* Accordion-Creaser: Content */
.akkordeon-creaser .akkordeon-content > ul.s.list {
    padding-left: 26px;
}

/* Accordion-Creaser: No-Flex */
@media screen and (max-width: 659.9px) {
    .no-flex .akkordeon.akkordeon-creaser .summary .teaser.module ~ .spoiler.s-txt * {
        display: inline-block;
    }
}
h1 > span,
h2 > span,
h3 > span,
h4 > span {
    vertical-align: middle;
}
.countdown.button {
    color: #FFFFFF;
    background: #C00030;
    border-radius: 2px;
    width: 180px;
    margin-right: 10px;
}
.timer span + span:before {
    content: ":";
}
.roaming .module {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
@media screen and (max-width: 659.9px) {
    .roaming .module.s-align-center {
        justify-content: center;
    }
}
.roaming .flag-eu > p,
.roaming .flag-de > p {
    padding-left: 94px;
}
.roaming .flag-eu:before {
    content: '';
    background-image: url(http://img.ui-portal.de/ci/gmx/bestellstrecke/img/flags-eu.png);
    position: absolute;
    width: 84px;
    height: 48px;
    top: 16px;  /* must for IE11*/
}
.roaming .flag-de:before {
    content: '';
    background-image: url(http://img.ui-portal.de/ci/gmx/bestellstrecke/img/flags-de.png);
    position: absolute;
    width: 84px;
    height: 48px;
    top: 16px;  /* must for IE11*/
}
/* */

/* HOTFIX 07.04.17 - GMX */
@font-face {
    font-family: 'RobotoCondensedLight';
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Light-webfont.eot');
    src: url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Light-webfont.eot?#iefix') format('embedded-opentype'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Light-webfont.woff') format('woff'),
    url('//img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Light-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
#header h1,
#header strong  {
    font-family: 'RobotoCondensedLight', Arial, sans-serif;
}
@media screen and (min-width: 980px) {
    #header h1,
    #header strong  {
      font-size: 52px;
      line-height: 93px;
    }
    body:not(.no-flex) .header > *:first-child:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        height: 100%;
        width: 100%;
        -webkit-transform: translateX(-100%) translateX(-20px);
        -ms-transform: translateX(-100%) translateX(-20px);
        transform: translateX(-100%) translateX(-20px);
        border-right: 1px #C1C1C1 solid;
        background-color: #E3EDFA;
        z-index: 9999;
    }
    .header > *:first-child:after {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        height: 100%;
        width: 100%;
        -webkit-transform: translateX(980px);
        -ms-transform: translateX(980px);
        transform: translateX(980px);
        border-left: 1px #C1C1C1 solid;
        background-color: #E3EDFA;
        z-index: 9999;
    }
    .header > *:first-child > *:first-child {
        height: 41px;
        background: url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/brand-blue.svg) no-repeat 0% 27.96%;
        background-size: 126px auto;
        margin: 26px 10px 0px 10px;
    }
    .navigation > ul > li > *:first-child {
        padding: 12px 20px 12px 10px;
    }
    .navigation > ul > li:not(:first-child) {
        padding-left: 10px;
    }
    .navigation > ul > li:first-child:after{
        background: #525252;
    }
}

header#header:before {
    border-width: 0px;
    display: block;
    background: #1e479d;
    background: -moz-linear-gradient(top, #1e479d 0, #6a99d5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e479d), color-stop(100%, #6a99d5));
    background: -webkit-linear-gradient(top, #1e479d 0, #6a99d5 100%);
    background: -o-linear-gradient(top, #1e479d 0, #6a99d5 100%);
    background: -ms-linear-gradient(top, #1e479d 0, #6a99d5 100%);
    background: linear-gradient(to bottom, #1e479d 0, #6a99d5 100%);
}

h2, [class][class][class].script  { color: #1C449B !important; }

[class].key.button:not(.ghost) {
    border-radius: 7px;
    color: #FFFFFF;
    border: 0px;
    background: -webkit-gradient(linear, left top, left bottom, from(#90B157), to(#5C8427));
    background: -webkit-linear-gradient(#90B157, #5C8427);
    background: -moz-linear-gradient(#90B157, #5C8427);
    background: -o-linear-gradient(#90B157, #5C8427);
    background: linear-gradient(#90B157, #5C8427);
    -webkit-box-shadow: 0 3px 1px -2px rgba(255,255,255,0.7) inset,
    0 -3px 2px -3px rgba(0,0,0,0.8) inset;
    -moz-box-shadow: 0 3px 1px -2px rgba(255,255,255,0.7) inset,
    0 -3px 2px -3px rgba(0,0,0,0.8) inset;
    box-shadow: 0 3px 1px -2px rgba(255,255,255,0.7) inset,
    0 -3px 2px -3px rgba(0,0,0,0.8) inset;
    text-shadow: 0 1px 1px rgba(59,59,59,0.5);
}
[class].key.button:not(.ghost):hover {
    color: #FFFFFF;
    border-color: #A1A1A1;
    background: -webkit-gradient(linear, left top, left bottom, from(#95C449), to(#79A03C));
    background: -webkit-linear-gradient(#95C449, #79A03C);
    background: -moz-linear-gradient(#95C449, #79A03C);
    background: -o-linear-gradient(#95C449, #79A03C);
    background: linear-gradient(#95C449, #79A03C);
    -webkit-box-shadow: 0 3px 1px -2px rgba(255,255,255,0.7) inset,
    0 -3px 2px -3px rgba(0,0,0,0.8) inset;
    -moz-box-shadow: 0 3px 1px -2px rgba(255,255,255,0.7) inset,
    0 -3px 2px -3px rgba(0,0,0,0.8) inset;
    box-shadow: 0 3px 1px -2px rgba(255,255,255,0.7) inset,
    0 -3px 2px -3px rgba(0,0,0,0.8) inset;
    text-shadow: 0 1px 1px rgba(59,59,59,0.5);
}
[class].key.button:not(.ghost):active {
    color: #DBE7F5;
    border-color: #A1A1A1;
    background: -webkit-gradient(linear, left top, left bottom, from(#90BE47), to(#79A03C));
    background: -webkit-linear-gradient(#90BE47, #79A03C);
    background: -moz-linear-gradient(#90BE47, #79A03C);
    background: -o-linear-gradient(#90BE47, #79A03C);
    background: linear-gradient(#90BE47, #79A03C);
    -webkit-box-shadow: 1px 3px 5px -3px #000000 inset,
    1px 8px 10px -8px rgba(0,0,0,0.4) inset;
    -moz-box-shadow: 1px 3px 5px -3px #000000 inset,
    1px 8px 10px -8px rgba(0,0,0,0.4) inset;
    box-shadow: 1px 3px 5px -3px #000000 inset,
    1px 8px 10px -8px rgba(0,0,0,0.4) inset;
    text-shadow: 0 1px 1px rgba(59,59,59,0.2);
}

.navigation > ul > li + li.active > *:first-child:after,
.navigation > ul > li + li > *.open:first-child:after,
.navigation > ul > li + li:hover > *:first-child:after {
    background: #6E9804;
}

.navigation .icon {
    background-image: url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/hotfix/brand.svg), url(https://img.ui-portal.de/ci/gmx/bestellstrecke/img/icon/service.svg);
/**/