html,
body {
padding: 0;
margin: 0;
width: 100%;
}
html {
height: 100%;
}
body {
background-color: #FFFFFF;
position: relative;
min-height: 100%;
word-wrap: break-word;
visibility: visible;
}
@font-face {
font-family: 'RobotoBold';
src: url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Bold-webfont.eot');
src: url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Bold-webfont.woff') format('woff'),
url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Bold-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'RobotoMedium';
src: url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Medium-webfont.eot');
src: url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Medium-webfont.woff') format('woff'),
url('https://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('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Regular-webfont.eot');
src: url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/Roboto-Regular-webfont.woff') format('woff'),
url('https://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('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Regular-webfont.eot');
src: url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Regular-webfont.woff') format('woff'),
url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Regular-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'RobotoCondensedLight';
src: url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Light-webfont.eot');
src: url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Light-webfont.woff') format('woff'),
url('https://img.ui-portal.de/ci/gmx/global/fonts/roboto/RobotoCondensed-Light-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
body {
font-family: "RobotoRegular", Verdana, sans-serif;
font-size: 16px;
line-height: 24px;
color: #525252;
}
* {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
a,
.link-base {
color: #2269C3;
text-decoration: none;
}
a:active,
a:visited,
.link-visited {
color: #2269C3;
}
a:hover,
a:focus,
.link-base:hover,
.link-hover {
color: #2269C3;
text-decoration: underline;
}
a img {
border: 0px;
}
a.textstyle,
a.textstyle:hover,
a.textstyle:focus {
color: inherit;
text-decoration: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6,
.section-headline > strong,
.group-headline > strong,
.teaser > .content > strong,
.akkordeon .summary > strong,
footer .container > strong.module,
footer .container .module > strong {
font-weight: 400;
}
footer .container .module > strong {
display: block;
}
/* Defaults > können durch setzen der responsiven Size-Klassen überschrieben werden. .[screensize]-size-[headlineformat] */
h1.xxl, [class].size-10 { font-size: 72px; font-family: RobotoCondensed; line-height: 80px; }
h1.xl, [class].size-9 { font-size: 64px; font-family: RobotoCondensed; line-height: 72px; }
h1, [class].size-8 { font-size: 56px; font-family: RobotoCondensed; line-height: 64px; }
h2.xl, [class].size-7 { font-size: 48px; font-family: RobotoCondensed; line-height: 56px; }
h2, [class].size-6 { font-size: 40px; font-family: RobotoCondensed; line-height: 48px; }
h3.xl, [class].size-5 { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
h3, [class].size-4 { font-size: 24px; font-family: RobotoMedium; line-height: 32px; }
h4, [class].size-3 { font-size: 20px; font-family: RobotoMedium; line-height: 28px; }
p, [class].size-2 { font-size: 16px; font-family: RobotoRegular; line-height: 24px; }
.note, [class].size-1 { font-size: 14px; font-family: RobotoRegular; line-height: 22px; }
.icontext, [class].size-0 { font-size: 9px; font-family: Verdana; line-height: 16px; }
@media screen and (min-width: 980px) {
[class][class].l-size-10 { font-size: 72px; font-family: RobotoCondensed; line-height: 80px; }
[class][class].l-size-9 { font-size: 64px; font-family: RobotoCondensed; line-height: 72px; }
[class][class].l-size-8 { font-size: 56px; font-family: RobotoCondensed; line-height: 64px; }
[class][class].l-size-7 { font-size: 48px; font-family: RobotoCondensed; line-height: 56px; }
[class][class].l-size-6 { font-size: 40px; font-family: RobotoCondensed; line-height: 48px; }
[class][class].l-size-5 { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
[class][class].l-size-4 { font-size: 24px; font-family: RobotoMedium; line-height: 32px; }
[class][class].l-size-3 { font-size: 20px; font-family: RobotoMedium; line-height: 28px; }
[class][class].l-size-2 { font-size: 16px; font-family: RobotoRegular; line-height: 24px; }
[class][class].l-size-1 { font-size: 14px; font-family: RobotoRegular; line-height: 22px; }
[class][class].l-size-0 { font-size: 9px; font-family: Verdana; line-height: 16px; }
}
@media screen and (max-width: 979.9px) {
/* Defaults Größe M > können durch setzen der responsiven Size-Klassen überschrieben werden. .m-size-[headlineformat] */
h1.xxl,[class].size-10 { font-size: 48px; font-family: RobotoCondensed; line-height: 56px; }
h1.xl, [class].size-9 { font-size: 40px; font-family: RobotoCondensed; line-height: 48px; }
h1, [class].size-8 { font-size: 40px; font-family: RobotoCondensed; line-height: 48px; }
h2.xl, [class].size-7 { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
h2, [class].size-6 { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
h3.xl, [class].size-5 { font-size: 24px; font-family: RobotoMedium; line-height: 32px; }
h3, [class].size-4 { font-size: 20px; font-family: RobotoMedium; line-height: 28px; }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
[class][class].m-size-10 { font-size: 72px; font-family: RobotoCondensed; line-height: 80px; }
[class][class].m-size-9 { font-size: 64px; font-family: RobotoCondensed; line-height: 72px; }
[class][class].m-size-8 { font-size: 56px; font-family: RobotoCondensed; line-height: 64px; }
[class][class].m-size-7 { font-size: 48px; font-family: RobotoCondensed; line-height: 56px; }
[class][class].m-size-6 { font-size: 40px; font-family: RobotoCondensed; line-height: 48px; }
[class][class].m-size-5 { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
[class][class].m-size-4 { font-size: 24px; font-family: RobotoMedium; line-height: 32px; }
[class][class].m-size-3 { font-size: 20px; font-family: RobotoMedium; line-height: 28px; }
[class][class].m-size-2 { font-size: 16px; font-family: RobotoRegular; line-height: 24px; }
[class][class].m-size-1 { font-size: 14px; font-family: RobotoRegular; line-height: 22px; }
[class][class].m-size-0 { font-size: 9px; font-family: Verdana; line-height: 16px; }
}
@media screen and (max-width: 659.9px) {
/* Defaults Größe S > können durch setzen der responsiven Size-Klassen überschrieben werden. .s-size-[headlineformat] */
h1.xxl,[class].size-10 { font-size: 40px; font-family: RobotoCondensed; line-height: 48px; }
h1.xl, [class].size-9 { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
h1, [class].size-8 { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
h2.xl, [class].size-7 { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
h2, [class].size-6 { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
h3.xl, [class].size-5 { font-size: 24px; font-family: RobotoMedium; line-height: 32px; }
h3, [class].size-4 { font-size: 20px; font-family: RobotoMedium; line-height: 28px; }
[class][class].s-size-10 { font-size: 72px; font-family: RobotoCondensed; line-height: 80px; }
[class][class].s-size-9 { font-size: 64px; font-family: RobotoCondensed; line-height: 72px; }
[class][class].s-size-8 { font-size: 56px; font-family: RobotoCondensed; line-height: 64px; }
[class][class].s-size-7 { font-size: 48px; font-family: RobotoCondensed; line-height: 56px; }
[class][class].s-size-6 { font-size: 40px; font-family: RobotoCondensed; line-height: 48px; }
[class][class].s-size-5 { font-size: 32px; font-family: RobotoCondensed; line-height: 40px; }
[class][class].s-size-4 { font-size: 24px; font-family: RobotoMedium; line-height: 32px; }
[class][class].s-size-3 { font-size: 20px; font-family: RobotoMedium; line-height: 28px; }
[class][class].s-size-2 { font-size: 16px; font-family: RobotoRegular; line-height: 24px; }
[class][class].s-size-1 { font-size: 14px; font-family: RobotoRegular; line-height: 22px; }
[class][class].s-size-0 { font-size: 9px; font-family: Verdana; line-height: 16px; }
}
sup, sub {
line-height: 0;
}
h1,
h2,
.hero .size-7,
.hero .size-6,
.hero .size-5,
.section-headline > *:not(p):not(.subheadline) {
color: #1C449B;
}
[class][class].script,
[class][class].subheadline {
color: #525252;
font-family: RobotoMedium;
}
/* please set/overwrite 'theme.font.subline-color' if there is a second service-color in the data-json of the services with theme.b2.base */
[class].size-4.script,
[class].size-4.subheadline {
color: #525252;
}
/* Several predefined base font colors */
.color-a1-base {
color: #6E9804;
}
.color-b1-base {
color: #1C449B;
}
.color-b2-base {
color: #1C449B;
}
.color-c1-base {
color: #FFFFFF;
}
.color-c2-light50,
.footnote {
color: #999999;
}
.color-d1-base {
color: #D40000;
}
.color-d2-base {
color: #F0BC00;
}
.color-d3-base {
color: #5CB82A;
}
.color-d4-base {
color: #1C8AD9;
}.list {
list-style: none;
}
.list li {
padding: 7px 0px;
position: relative;
}
.list li:before {
content: "";
display: inline-block;
background-color: #1C449B;
}
ul.list {
padding-left: 24px;
}
ul.list li:before {
width: 16px;
height: 16px;
border-radius: 8px;
margin: 0px 8px 0px -24px;
vertical-align: -2px;
}
/* s-List mit Bullets 8px durchmesser */
ul.s.list {
padding-left: 16px;
}
ul.s.list li {
padding: 4px 0px;
}
ul.s.list li:before {
width: 8px;
height: 8px;
border-radius: 4px;
margin: 0px 8px 0px -16px;
vertical-align: 2px;
}
/* */
ul.check.list {
padding-left: 32px;
}
ul.m.check.list {
padding-left: 28px;
}
ul.s.check.list {
padding-left: 24px;
}
ol.list {
padding-left: 40px;
counter-reset: section 1;
}
ul.check.list:not([class*="size-2"]),
ol.list {
font-family: 'RobotoMedium', Arial, sans-serif;
font-size: 20px;
line-height: 28px;
}
ul.m.check.list {
font-family: 'RobotoRegular', Verdana, sans-serif;
font-size: 16px;
line-height: 24px;
}
ul.s.check.list {
font-family: 'RobotoRegular', Verdana, sans-serif;
font-size: 16px;
line-height: 24px;
}
ul.check.list:not([class*="size-2"]) li,
ol.list li {
padding: 5px 0px;
}
ul.m.check.list li {
padding: 7px 0px;
}
ul.s.check.list li {
padding: 3px 0px;
}
ul.check.list li:before {
width: 24px;
height: 24px;
border-radius: 12px;
margin: 0px 8px 0px -32px;
vertical-align: -4px
}
ul.m.check.list li:before {
width: 20px;
height: 20px;
border-radius: 10px;
margin: 0px 8px 0px -28px;
vertical-align: -4px
}
ul.s.check.list li:before {
width: 16px;
height: 16px;
border-radius: 8px;
margin: 0px 8px 0px -24px;
vertical-align: -2px
}
ul.check.list li:after {
content: "";
position: absolute;
top: 15px;
left: -29px;
width: 3px;
height: 3px;
background: transparent;
-webkit-box-shadow: 0px 1px 0px #FFFFFF, 0px 2px 0px #FFFFFF, 0px 4px 0px #FFFFFF, 0px 6px 0px #FFFFFF, 0px 8px 0px #FFFFFF,
2px 8px 0px #FFFFFF, 4px 8px 0px #FFFFFF, 6px 8px 0px #FFFFFF, 8px 8px 0px #FFFFFF, 10px 8px 0px #FFFFFF;
box-shadow: 0px 1px 0px #FFFFFF, 0px 2px 0px #FFFFFF, 0px 4px 0px #FFFFFF, 0px 6px 0px #FFFFFF, 0px 8px 0px #FFFFFF,
2px 8px 0px #FFFFFF, 4px 8px 0px #FFFFFF, 6px 8px 0px #FFFFFF, 8px 8px 0px #FFFFFF, 10px 8px 0px #FFFFFF;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
ul.m.check.list li:after {
content: "";
position: absolute;
top: 16px;
left: -26px;
width: 3px;
height: 3px;
background: transparent;
-webkit-box-shadow: 0px 2px 0px #FFFFFF, 0px 2px 0px #FFFFFF, 0px 4px 0px #FFFFFF, 0px 6px 0px #FFFFFF, 0px 8px 0px #FFFFFF,
2px 8px 0px #FFFFFF, 4px 8px 0px #FFFFFF, 6px 8px 0px #FFFFFF, 8px 8px 0px #FFFFFF, 10px 8px 0px #FFFFFF;
box-shadow: 0px 2px 0px #FFFFFF, 0px 2px 0px #FFFFFF, 0px 4px 0px #FFFFFF, 0px 6px 0px #FFFFFF, 0px 8px 0px #FFFFFF,
2px 8px 0px #FFFFFF, 4px 8px 0px #FFFFFF, 6px 8px 0px #FFFFFF, 8px 8px 0px #FFFFFF, 10px 8px 0px #FFFFFF;
-webkit-transform: scale(0.85) rotate(-45deg);
-ms-transform: scale(0.85) rotate(-45deg);
transform: scale(0.85) rotate(-45deg);
}
ul.s.check.list li:after {
content: "";
position: absolute;
top: 12px;
left: -23px;
width: 3px;
height: 3px;
background: transparent;
-webkit-box-shadow: 0px 1px 0px #FFFFFF, 0px 2px 0px #FFFFFF, 0px 4px 0px #FFFFFF, 0px 6px 0px #FFFFFF, 0px 8px 0px #FFFFFF,
2px 8px 0px #FFFFFF, 4px 8px 0px #FFFFFF, 6px 8px 0px #FFFFFF, 8px 8px 0px #FFFFFF, 10px 8px 0px #FFFFFF;
box-shadow: 0px 1px 0px #FFFFFF, 0px 2px 0px #FFFFFF, 0px 4px 0px #FFFFFF, 0px 6px 0px #FFFFFF, 0px 8px 0px #FFFFFF,
2px 8px 0px #FFFFFF, 4px 8px 0px #FFFFFF, 6px 8px 0px #FFFFFF, 8px 8px 0px #FFFFFF, 10px 8px 0px #FFFFFF;
-webkit-transform: scale(0.68) rotate(-45deg);
-ms-transform: scale(0.68) rotate(-45deg);
transform: scale(0.68) rotate(-45deg);
}
ul.check.list[class*="size-"] li:before {
vertical-align: -6px
}
ul.check.list[class*="size-"] li:after {
top: 16px;
}
ol.list[start="2"] { counter-reset: section 2; }
ol.list[start="3"] { counter-reset: section 3; }
ol.list[start="4"] { counter-reset: section 4; }
ol.list[start="5"] { counter-reset: section 5; }
ol.list[start="6"] { counter-reset: section 6; }
ol.list[start="7"] { counter-reset: section 7; }
ol.list[start="8"] { counter-reset: section 8; }
ol.list[start="9"] { counter-reset: section 9; }
ol.list[start="10"] { counter-reset: section 10; }
ol.list[start="11"] { counter-reset: section 11; }
ol.list[start="12"] { counter-reset: section 12; }
ol.list[start="13"] { counter-reset: section 13; }
ol.list[start="14"] { counter-reset: section 14; }
ol.list[start="15"] { counter-reset: section 15; }
ol.list[start="16"] { counter-reset: section 16; }
ol.list[start="17"] { counter-reset: section 17; }
ol.list[start="18"] { counter-reset: section 18; }
ol.list[start="19"] { counter-reset: section 19; }
ol.list[start="20"] { counter-reset: section 20; }
ol.list li:before {
content: counter(section, decimal);
width: 32px;
height: 32px;
border-radius: 16px;
margin: 0px 8px 0px -40px;
color: #FFFFFF;
text-align: center;
line-height: 32px;
}
ol.list li:after {
content: "";
counter-increment: section;
}
ul.text.list,
ol.text.list,
ol.footnotes.list,
ol.default.list {
padding-left: 0px;
}
ol.default.list {
list-style: decimal;
margin-left: 25px;
}
ul.text.list li:before,
ol.text.list li:before,
ol.footnotes.list li:before,
ol.default.list li:before {
content: none;
width: 0px;
height: 0px;
margin: 0px;
}
ol.footnotes.list li {
margin-left: 15px;
padding: 0;
}
ol.footnotes.list li sup {
position: absolute;
left: -15px;
top: 5px;
}
/* Im Firefox Subpixel Rendering Problem, wenn die Y-Position Berechnung mit Kommastelle .5, dann BG (hier Icon) abgeschnitten*/
ul.text.list .m.icon:first-child {
float: left;
height: 25px; /*Quick-Fix abgeschnittenes Icon Problem*/
margin: -1px 8px 0px 0px; /*Ohne Quick-Fix margin-top: 0px*/
}
ul.text.list .s.icon:first-child {
float: left;
height: 17px; /*Quick-Fix abgeschnittenes Icon Problem*/
margin: 3px 8px 0px 0px; /*Ohne Quick-Fix margin-top: 4px*/
}
ul.inline.list li {
display: inline;
}
ul.inline-block.list li {
display: inline-block;
}
ul.horizontal.list li {
float: left;
}
ul.horizontal.list.align-right {
float: right;
}
ul.horizontal.badge {
float: left;
}
ul.inline.list li,
ul.inline-block.list li,
ul.horizontal.list li {
margin-right: 20px;
}
ul.inline.list.align-center li,
ul.inline-block.list.align-center li {
margin-left: 10px;
margin-right: 10px;
}
ul.inline.list.align-right li,
ul.inline-block.list.align-right li,
ul.horizontal.list.align-right li {
margin-left: 20px;
}
ul.horizontal.index.list li {
margin-right: 0px;
}
ul.inline.list:not(.align-center) li:last-child,
ul.inline-block.list:not(.align-center) li:last-child,
ul.horizontal.list:not(.align-center) li:last-child {
margin-right: 0px;
}
ul.single-line.list li {
white-space: nowrap;
text-overflow: ellipsis;
}
dl.list dt[class], dd[class] {
display: inline-block;
vertical-align: top;
}
dl.list dd[class] {
margin-left: 0px;
padding-left: 40px;
display: inline;
}
.button {
display: inline-block;
padding: 5px 15px 5px 0px;
border: 1px solid;
min-height: 40px;
font-style: normal;
width: auto;
letter-spacing: 0;
text-indent: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
border-radius: 4px;
font-family: RobotoMedium, sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 28px;
-webkit-appearance: none;
-moz-appearance: none;
vertical-align: middle;
word-wrap: normal;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
}
.fullwidth.button {
width: 100%;
}
.button,
.button:hover,
.button:visited,
.button:focus {
text-decoration: none;
cursor: pointer;
text-align: center;
white-space: nowrap;
outline: none;
}
input.button::-moz-focus-inner,
button.button::-moz-focus-inner {
padding: 0;
border: 0;
}
.button.m {
font-family: RobotoMedium, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
padding-top: 3px;
padding-bottom: 3px;
min-height: 32px;
}
.button.xl {
padding-top: 9px;
padding-bottom: 9px;
min-height: 48px;
}
.button.xxl {
font-size: 24px;
font-weight: 400;
line-height: 32px;
padding-top: 11px;
padding-bottom: 11px;
min-height: 56px;
}
.button.xxxl {
font-size: 24px;
font-weight: 400;
line-height: 32px;
padding-top: 15px;
padding-bottom: 15px;
min-height: 64px;
}
.button > .icon {
float: left;
position: relative;
margin-left: 7px;
margin-right: -7px;
}
.m.button > .s.icon {
margin-top: -1px;
margin-bottom: -1px;
}
.l.button > .m.icon {
margin-top: 2px;
margin-bottom: 2px;
}
.xl.button > .l.icon {
margin-top: -2px;
margin-bottom: -2px;
}
.xxl.button > .xl.icon {
margin-top: -4px;
margin-bottom: -4px;
}
.xxxl.button > .xxl.icon {
margin-top: -8px;
margin-bottom: -8px;
}
.key.button:hover,
.key.button:focus,
.backdrop-b1-base .key.button:hover,
.backdrop-b1-base .key.button:focus,
.ghost.key.button[class][class][class]:hover,
.ghost.key.button[class][class][class]:focus {
color: #FFFFFF;
border-color: #587A03;
background-color: #587A03;
}
.service.button:hover,
.service.button:focus,
.ghost.service.button[class][class][class]:hover,
.ghost.service.button[class][class][class]:focus {
color: #FFFFFF;
border-color: #16367C;
background-color: #16367C;
}
.ghost.service.button[class][class][class]:hover .icon,
.ghost.service.button[class][class][class]:focus .icon {
background-position-x: 25%;
}
.secondary.button:hover,
.secondary.button:focus,
.ghost.secondary.button[class][class][class]:hover,
.ghost.secondary.button[class][class][class]:focus {
color: #FFFFFF;
border-color: #707070;
background-color: #707070;
}
.inverted.button:hover,
.inverted.button:focus,
.ghost.inverted.button[class][class][class]:hover,
.ghost.inverted.button[class][class][class]:focus,
.backdrop-b1-base .button.service:hover,
.backdrop-b1-base .button.service:focus,
.backdrop-b1-base .ghost.button[class][class][class]:hover,
.backdrop-b1-base .ghost.button[class][class][class]:focus {
color: #333333;
border-color: #F3F3F3;
background-color: #F3F3F3;
}
.key.button,
.key.button:active,
.backdrop-b1-base .key.button,
.backdrop-b1-base .key.button:active,
.ghost.key.button[class][class]:active {
border-color: #6E9804;
background-color: #6E9804;
color: #FFFFFF;
}
.service.button,
.service.button:active,
.ghost.service.button[class][class][class]:active {
border-color: #1C449B;
background-color: #1C449B;
color: #FFFFFF;
}
.ghost.service.button[class][class][class]:active .icon {
background-position-x: 25%;
}
.secondary.button,
.secondary.button:active,
.ghost.secondary.button[class][class][class]:active {
border-color: #999999;
background-color: #999999;
color: #FFFFFF;
}
.inverted.button,
.inverted.button:active,
.ghost.inverted.button[class][class][class]:active,
.backdrop-b1-base .button.service,
.backdrop-b1-base .button.service:active,
.backdrop-b1-base .ghost.button[class][class][class]:active {
border-color: #FFFFFF;
background-color: #FFFFFF;
color: #333333;
}
.key.button[disabled][class][class],
.key.button[aria-disabled][class][class],
.backdrop-b1-base .key.button[disabled][class][class],
.backdrop-b1-base .key.button[aria-disabled][class][class] {
color: #FFFFFF;
background-color: #E5ECD2;
border-color: #E5ECD2;
cursor: default;
cursor: not-allowed;
text-shadow: none;
}
.service.button[disabled][class][class],
.service.button[aria-disabled][class][class] {
color: #FFFFFF;
background-color: #D6DDED;
border-color: #D6DDED;
cursor: default;
cursor: not-allowed;
text-shadow: none;
}
.secondary.button[disabled][class][class],
.secondary.button[aria-disabled][class][class] {
color: #FFFFFF;
background-color: #DADADA;
border-color: #DADADA;
cursor: default;
cursor: not-allowed;
text-shadow: none;
}
.inverted.button[disabled][class][class],
.inverted.button[aria-disabled][class][class] {
color: #707070;
background-color: #D6DDED;
border-color: #D6DDED;
cursor: default;
cursor: not-allowed;
text-shadow: none;
}
.ghost.key.button[class][class][class] {
color: #6E9804;
background-color: transparent;
}
.ghost.key.button[class][class][class][disabled],
.ghost.key.button[class][class][class][aria-disabled] {
color: #E5ECD2;
border-color: #E5ECD2;
background-color: transparent;
}
.ghost.service.button[class][class][class] {
color: #1C449B;
background-color: transparent;
}
.ghost.service.button[class][class][class][disabled],
.ghost.service.button[class][class][class][aria-disabled] {
color: #D6DDED;
border-color: #D6DDED;
background-color: transparent;
}
.ghost.secondary.button[class][class][class] {
color: #999999;
background-color: transparent;
}
.ghost.secondary.button[class][class][class][disabled],
.ghost.secondary.button[class][class][class][aria-disabled] {
color: #DADADA;
border-color: #DADADA;
background-color: transparent;
}
.backdrop-b1-base .ghost.button[class][class][class],
.ghost.inverted.button[class][class][class] {
color: #FFFFFF;
}
.ghost.inverted.button[class][class][class][disabled],
.ghost.inverted.button[class][class][class][aria-disabled] {
border-color: #D6DDED;
color: #D6DDED;
background-color: transparent;
}
/* APP Buttons */
.button.app.store {
background: transparent 0 0 no-repeat;
background-size: cover;
border: 0px solid;
border-radius: 0px;
text-indent: -9999em;
display: inline-block;
padding-right: 0;
}
.button.app.apple.store { background-image: url(//img.ui-portal.de/cd/ci/btn_applestore.svg); }
[lang="en"] .button.app.apple.store { background-image: url(//img.ui-portal.de/cd/ci/btn_applestore_en.svg); }
[lang="es"] .button.app.apple.store { background-image: url(//img.ui-portal.de/cd/ci/btn_applestore_es.svg); }
[lang="fr"] .button.app.apple.store { background-image: url(//img.ui-portal.de/cd/ci/btn_applestore_fr.svg); }
.button.app.google.store { background-image: url(//img.ui-portal.de/cd/ci/btn_googlestore.svg); }
html[lang="en"] .button.app.google.store { background-image: url(//img.ui-portal.de/cd/ci/btn_googlestore_en.svg); }
html[lang="es"] .button.app.google.store { background-image: url(//img.ui-portal.de/cd/ci/btn_googlestore_es.svg); }
html[lang="fr"] .button.app.google.store { background-image: url(//img.ui-portal.de/cd/ci/btn_googlestore_fr.svg); }
.button.app.windows.store { background-image: url(//img.ui-portal.de/cd/ci/btn_windowsstore.svg); }
html[lang="en"] .button.app.windows.store { background-image: url(//img.ui-portal.de/cd/ci/btn_windowsstore_en.svg); }
html[lang="es"] .button.app.windows.store { background-image: url(//img.ui-portal.de/cd/ci/btn_windowsstore_es.svg); }
html[lang="fr"] .button.app.windows.store { background-image: url(//img.ui-portal.de/cd/ci/btn_windowsstore_fr.svg); }
/* additional class for key/service/ghost buttons to trigger the app width */
.button.app {
height: 40px;
width: 140px;
}
.button.xl.app {
height: 48px;
width: 168px;
}
/* Bei zentrierter Darstellung kein float => WIP: in ueberarbeiteter form kein float mehr
Zusatz-Abstand bei 'inline-block' mit Btn-Abstand ausgleichen */
.btn-wrapper {
margin-left: -15px;
margin-top: 4px;
z-index: 9999;
position: relative;
}
.hero .btn-wrapper {
margin-left: -15px;
}
.btn-wrapper + .button-wrapper {
margin-top: 0px;
}
.btn-wrapper[class][class]:last-child {
margin-bottom: -20px;
}
/* Btn-Abstand bei Buttons mit btn-wrapper */
.btn-wrapper .button {
margin-left: 15px;
margin-right: 0px;
margin-bottom: 20px;
}
.hero .btn-wrapper .button {
margin-left: 15px;
}
/* CSS aus teaser.css ueberschreiben */
.btn-wrapper[class][class][class] .button {
margin-top: 0px;
}
/* in m-/s-View sollen die Buttons per default l-size haben */
@media screen and (max-width: 979.9px) {
.btn-wrapper .button.xl.app,
.btn-wrapper .button.app.store {
height: 40px;
width: 140px;
min-height: 40px;
padding-bottom: 5px;
padding-top: 5px;
}
}
/* Special Requirement: ghost button - no focus behaviour by touch screen */
.js.touch .ghost.service.button[class]:focus {
color: #1C449B;
background-color: transparent;
}
.js.touch .backdrop-b1-base .ghost.service.button[class]:focus {
color: #FFFFFF;
}
/* defaultsize s */
.spoiler {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
color: #FFFFFF;
background-color: #6E9804;
border-radius: 50%;
font-family: RobotoMedium;
margin: 16px;
}
.spoiler.targetDate {
background-color: #D40000;
color: #FFFFFF;
}
.spoiler span {
display: block;
}
.spoiler em {
font-style: normal;
font-weight: normal;
}
.spoiler em.value,
.spoiler em.slogan {
font-family: RobotoCondensed;
}
.spoiler em.value {
padding-bottom: 8px;
}
.spoiler em.value + em {
margin-top: -8px;
}
.spoiler em sup {
position: relative;
vertical-align: baseline;
display: inline;
line-height: 0px;
}
.spoiler em sub {
position: relative;
vertical-align: baseline;
display: inline;
line-height: 0px;
bottom: 0px;
}
/* spoilersize l */
.spoiler.l {
width: 128px;
height: 128px;
font-size: 16px;
line-height: 24px;
}
.spoiler.l em.value {
font-size: 40px;
line-height: 44px;
margin-top: -1px;
}
.spoiler.l em.value + em {
margin-top: -10px;
padding-bottom: 4px;
}
.spoiler.l em.slogan {
font-size: 32px;
line-height: 34px;
}
.spoiler.l em sup {
font-size: 20px;
bottom: 15px;
}
.spoiler.l em sub {
font-size: 20px;
}
/* spoilersize m */
.spoiler.m {
width: 110px;
height: 110px;
font-size: 14px;
line-height: 20px;
}
.spoiler.m em.value {
font-size: 32px;
line-height: 34px;
}
.spoiler.m em.value + em {
padding-bottom: 2px;
}
.spoiler.m em.slogan {
font-size: 24px;
line-height: 28px;
}
.spoiler.m em sup {
font-size: 16px;
bottom: 12px;
}
.spoiler.m em sub {
font-size: 16px;
}
/* spoilersize s */
.spoiler.s {
width: 96px;
height: 96px;
font-size: 14px;
line-height: 20px;
}
.spoiler.s em.value {
font-size: 28px;
line-height: 28px;
}
.spoiler.s em.value + em {
margin-top: -10px;
padding-bottom: 2px;
}
.spoiler.s em.slogan {
font-size: 20px;
line-height: 24px;
}
.spoiler.s em sup {
font-size: 16px;
bottom: 9px;
}
.spoiler.s em sub {
font-size: 16px;
}
/* spoilersize xs */
.spoiler.xs {
width: 80px;
height: 80px;
font-size: 11px;
line-height: 16px;
margin: 8px;
}
.spoiler.xs em.value {
font-size: 24px;
line-height: 24px;
}
.spoiler.xs em.slogan {
font-size: 18px;
line-height: 20px;
}
.spoiler.xs em sup {
font-size: 14px;
bottom: 8px;
}
.spoiler.xs em sub {
font-size: 14px;
}
/* Stufenweiser Schutzraum für früheres umbrechen für die Abrundungen */
.spoiler.priceInfo > em:nth-child(2) {
padding-left: 4%;
padding-right: 4%;
}
.spoiler.priceInfo > em:first-of-type,
.spoiler.priceInfo > em:nth-child(3) {
padding-left: 9%;
padding-right: 9%;
}[class*="display"] .content-wrapper,
[class*="display"] > a {
position: relative;
display: block;
width: 100%;
height: 100%;
color: inherit;
}
[class*="display"] .spoiler,
[class*="display"] .visual,
[class*="display"] .content,
[class*="display"] .button,
[class*="display"] .label {
position: absolute;
}
[class*="display"] .spoiler,
[class*="display"] .content {
z-index: 5;
}
[class*="display"] .button {
z-index: 10;
}
[class*="display"] .top {
top: 0;
}
[class*="display"] .right {
right: 0;
}
[class*="display"] .bottom {
bottom: 0;
}
[class*="display"] .left {
left: 0;
}
[class*="display"] .center {
left: 50%;
transform: translateX(-50%);
margin-left: 0;
margin-right: 0;
}
[class*="display"] .va-center {
top: 50%;
transform: translateY(-50%);
margin-top: 0;
margin-bottom: 0;
}
[class*="display"] .center.va-center {
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
margin: 0;
}
/* Backdrop Ersatz */
[class*="display"] [class*="backdrop"] {
position: relative;
}
[class*="display"] [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;
}
[class*="display"] .backdrop-b1-light82:before {
background-color: #D6DDED;
}
[class*="display"] .backdrop-b1-light94:before {
background-color: #F1F4F9;
}
/**/
/* Dienstlasche */
[class*="display"] .clip-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
[class*="display"] .clip-wrapper:before {
content: "";
position: absolute;
min-width: 100%;
height: 32px;
box-sizing: border-box;
z-index: 1;
}
[class*="display"] .clip {
display: inline-block;
box-sizing: border-box;
border-radius: 4px;
font-family: 'RobotoCondensedLight', Verdana, sans-serif;
font-weight: 400;
font-size: 16px;
height: 32px;
line-height: 24px;
padding: 6px 0px;
margin-left: 16px;
margin-top: 12px;
}
[class*="display"] .clip.xs {
font-size: 14px;
height: 24px;
line-height: 20px;
padding: 4px 0px;
margin-top: 10px;
}
[class*="display"] .clip strong {
margin-right: 6px;
font-family: 'RobotoBold', Arial, sans-serif;
font-weight: 400;
}
[class*="display"] .clip.xs strong {
margin-right: 4px;
}
/* Label */
[class*="display"] .label {
border-radius: 3px;
background-color: #6E9804;
color: #FFFFFF;
font-size: 12px;
height: 20px;
line-height: 20px;
padding: 0 4px;
white-space: nowrap;
}
[class*="display"] .label.targetDate {
background-color: #D40000;
color: #FFFFFF;
}
/* Button m */
[class*="display"] .button.s {
font-size: 14px;
font-weight: 400;
line-height: 22px;
padding: 2px 8px 2px 0;
text-indent: 8px;
min-height: 28px;
}
/* Content */
[class*="display"] .content {
display: flex;
flex-direction: column;
justify-content: center;
}
[class*="display"] .content > * {
margin: 0;
}
[class*="display"] .content > strong {
display: block;
color: #1C449B;
margin-bottom: 4px;
font-weight: 400;
}
/* needed because in font.css the color change needs also the class 'size-4' */
/* ToDo: should be changed to dependence to the class 'subheadline' in the font.css !? */
[class*="display"] .content > .script {
color: #525252;
}
/* Tracking */
[class*="display"] + .statistics {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;
}
/* MR */
.display-mr {
height: 250px;
width: 300px;
}
.display-mr .label {
left: 16px;
top: 64px;
}
.display-mr .content {
width: 140px;
left: 16px;
top: 92px;
}
.display-mr .content > strong {
font-family: RobotoMedium;
font-size: 20px;
line-height: 24px;
max-height: 48px;
}
.display-mr .content > p {
font-size: 14px;
line-height: 20px;
}
.display-mr .spoiler.top {
top: 2px;
}
.display-mr .spoiler.right {
right: 30px;
}
.display-mr .button {
left: 16px;
bottom: 16px;
}
/* BB */
.display-bb {
height: 250px;
width: 970px;
margin: 0 auto;
}
.display-bb .clip {
margin-left: 64px;
}
.display-bb .label {
left: 64px;
top: 56px;
}
.display-bb .content {
width: 900px;
left: 64px;
top: 79px;
white-space: nowrap;
overflow: hidden;
}
.display-bb .content > strong {
font-family: RobotoCondensed;
font-size: 48px;
line-height: 56px;
max-height: 56px;
}
.display-bb .content > p {
font-size: 32px;
line-height: 41px;
}
.display-bb .spoiler.top {
top: -4px;
}
.display-bb .spoiler.right {
right: 250px;
}
.display-bb .button {
left: 64px;
bottom: 16px;
}
/* SB */
.display-sb {
height: 90px;
width: 728px;
}
.display-sb .clip.xs {
float: right;
margin-left: auto;
margin-right: 16px;
}
.display-sb .label {
left: 126px;
top: 11px;
font-size: 10px;
height: 18px;
line-height: 18px;
}
.display-sb .content {
width: 600px;
left: 126px;
top: 19px;
white-space: nowrap;
overflow: hidden;
}
.display-sb .label + .content {
top: 30px;
}
.display-sb .content > strong {
font-family: RobotoMedium;
font-size: 24px;
line-height: 32px;
max-height: 32px;
}
.display-sb .content > p {
font-size: 16px;
line-height: 24px;
margin-top: -5px;
}
.display-sb .spoiler.top {
top: -3px;
}
.display-sb .spoiler.right {
right: 212px;
}
.display-sb .button {
right: 16px;
bottom: 19px;
}
[class*="display"] .clip.xs {
margin-top: 8px;
}
/* HP */
.display-hp {
height: 600px;
width: 300px;
}
.display-hp .label {
left: 16px;
top: 56px;
max-width: 260px;
overflow: hidden;
}
.display-hp .content {
width: 268px;
left: 16px;
top: 78px;
}
.display-hp .content > strong {
font-family: RobotoMedium;
font-size: 24px;
line-height: 32px;
max-height: 32px;
}
.display-hp .content > p {
font-size: 16px;
line-height: 24px;
margin-top: -5px;
}
.display-hp .spoiler.top {
top: 134px;
}
.display-hp .spoiler.right {
right: 0px;
}
.display-hp .button {
left: 16px;
bottom: 396px;
max-width: 268px;
overflow: hidden;
}
.display-hp .spoiler ~ .button {
bottom: 320px;
}
/* HP */
.display-ws {
height: 600px;
width: 160px;
}
.display-ws .clip.xs {
border-radius: 0;
margin-left: 0;
padding: 2px 8px 0 8px;
width: 160px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.display-ws .label {
left: 50%;
transform: translateX(-50%);
top: 128px;
max-width: 136px;
overflow: hidden;
}
.display-ws .spoiler ~ .label {
top: 43px;
}
.display-ws .content {
width: 140px;
left: 10px;
top: 150px;
text-align: center;
}
.display-ws .spoiler ~ .content {
top: 65px;
}
.display-ws .content > strong {
font-family: RobotoMedium;
font-size: 24px;
line-height: 32px;
}
.display-ws .content > p {
font-size: 16px;
line-height: 24px;
}
.display-ws .spoiler.top {
top: 210px;
}
.display-ws .spoiler.right {
right: 9px;
}
.display-ws .button {
left: 50%;
transform: translateX(-50%);
bottom: 270px;
max-width: 144px;
overflow: hidden;
}
.display-ws .spoiler ~ .button {
bottom: 180px;
}