html { -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { line-height: 1.0; }
a { display: inline-block; text-decoration: none; }
a, label { text-align: left; cursor: pointer; }
.btn { text-align: center; }
p > a:hover { text-decoration: underline; }
strong { font-size: 1.00em; letter-spacing: 0.00em; }
small { font-size: 0.84em; }
.nobreak { white-space: nowrap; }
.btn, button { white-space: nowrap; font-size: 1.00em; letter-spacing: 0.06em; word-spacing: 0.30rem; line-height: 3.60rem; text-transform: uppercase; }
input, textarea, button, placeholder
{ font-size: 0.96rem; letter-spacing: 0.02em; }
h1, h2, h3, h4, h5, h6 { flex: 1 1 100.0%; line-height: 1.4; font-weight: normal; }
h1 { line-height: 1.5; }
h1 > span { padding: 0 3.60rem 0 1.80rem; }
h1 > .sub { font-size: 0.50em; letter-spacing: 0.03em; word-spacing: 0.03em; margin: 0.60em auto 0; display: block; }
h2 { font-size: 1.00rem; letter-spacing: 0.24em; word-spacing: 0.12em; text-transform: uppercase; text-align: center; }
h3 { font-size: 1.40rem; letter-spacing: 0.0em; }
h4 { font-size: 1.20rem; }
h5 { font-size: 1.00rem; }
h1.left { text-align: left; }
#start .claim { font-size: 1.20rem; }
#start.small h1 { font-size: 2.10rem; line-height: 1.0; text-align: center; }
p, input, textarea { flex: 1 1 100.0%; line-height: 1.8; letter-spacing: 0.01em;
-ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }
p.quote { /* font-size: 1.00em; line-height: 1.4;*/ text-indent: -0.36em; }
p.note { font-size: 0.90em; line-height: 1.4; opacity: 0.72; }
p.item { margin-left: 1.20em; text-indent: -1.20em; text-align: left; }
p.item:before { display: inline-block; width: 0.52em; height: 0.60em; margin-right: 0.40em; content: ''; }
p.item-2 { font-size: 1.20rem; text-align: left; padding-left: 2.40rem;
background: url(../img/pict/baseline-check-24px.svg) no-repeat left top; background-size: 2.00rem; }
.col { text-align: center; }
.col.small,
.col.bigger { text-align: left; }
.teaser { text-align: center; line-height: 1.4; }
.teaser span { font-size: 1.35rem; }
.teaser span:last-child { font-size: 1.00rem; }
#fmp .teaser span { font-size: 1.50rem; }
#reference .teaser span:nth-child(2) { font-size: 2.40rem; }
#reference .teaser span:nth-child(3) { font-size: 1.40rem; }
.oem { line-height: 1.6; }
.oem span { font-size: 1.40rem; }
label { line-height: 1.6; }
/* --- Header --- */
#fmp h3 { font-size: 2.40em; text-align: center; margin-bottom: 3.00rem; }
/* --- Header --- */
header div:nth-child(1) > a > span { font-size: 1.80em; line-height: 60px; }
header div:nth-child(1) > a > span > span { font-size: 0.84em; letter-spacing: 0.03em; }
header div:nth-child(1) > span > a { font-size: 0.84em; }
header div:nth-child(2) > span { letter-spacing: 0.03em; text-align: center; }
header div:nth-child(2) > span > a { letter-spacing: 0.12em; margin: 0 0.60em; }
/* --- ASP ---- */
.asp p > span { font-size: 1.20rem }
/* --- Flipbox ---- */
.fb-box > p { line-height: 1.4; margin: 0.90rem 0; }
.fb-front > span { font-size: 0.90em; }
.fb-back > span { display: block; font-size: 1.20em; line-height: 1.4; margin: 0 1.36em; text-indent: -0.36em; }
/* --- Legal --- */
.legal p { font-size: 0.90rem; text-align: justify; }
.legal p + h3 { margin-top: 2.40rem }
.legal p.me { margin-left: 1.24em; text-indent: -1.24em; }
/* --- FAQ --- */
pre { font-family: "Courier New", Courier, monospace; font-size: 0.90rem; line-height: 1.4; }
#akkordeon input + label { font-size: 0.90rem; line-height: 1.4; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }
#akkordeon input + label + div > p { font-size: 0.84rem; }
/* --- Space --- */
h5 + p,
h5 + div,
p + pre,
p + p { margin-top: 0.72rem; }
.btn + .btn,
p + p.item,
h3 + p,
h3 + input,
h3 + h4,
h4 + p,
h4 + h5,
p + h5 { margin-top: 1.20rem; }
p + a { margin-top: 1.80rem; }
h1 + a,
p + h4,
h4 + div,
.btn + p { margin-top: 2.40rem; }
/* --- Footer --- */
footer a { font-size: 0.66em; text-transform: uppercase; letter-spacing: 0.24em; }
footer p { font-size: 0.72em; line-height: 1.4; }
footer p + p { margin-top: 0.60rem; }
/* =================================
FONTS
================================= */
body, h2, h1 > .sub, h4, .teaser span.link
{ font-weight: 100; font-family: 'sofi', Arial, Helvetica, sans-serif; }
{ font-weight: 100; font-family: 'sofi-201', Arial, Helvetica, sans-serif; }
header div:nth-child(1) > a > span > span
{ font-weight: 100; font-family: 'sofi-120', Arial, Helvetica, sans-serif; }
.btn, button, h3, header div:nth-child(1) a, header div:nth-child(2) a, .teaser span, input, textarea, .oem, p.bold, .oem, p.quote, .claim
{ font-weight: 100; font-family: 'sofi-300', Arial, Helvetica, sans-serif; }
h1
{ font-weight: 100; font-family: 'sofi-400', Arial, Helvetica, sans-serif; }
@font-face { font-family: 'sofi'; src: url('../fonts/opensans-200-regular.woff') format('woff'); }
@font-face { font-family: 'sofi-201'; src: url('../fonts/opensans-201-regular-italic.woff') format('woff'); }
@font-face { font-family: 'sofi-120'; src: url('../fonts/opensans-120-light-cond.woff') format('woff'); }
@font-face { font-family: 'sofi-300'; src: url('../fonts/opensans-300-semi-bold.woff') format('woff'); }
@font-face { font-family: 'sofi-400'; src: url('../fonts/opensans-400-bold.woff') format('woff'); }
/* =================================
SCREENS
================================= */
@media screen and (min-width : 0) and (max-width : 767px)
{ h1 { font-size: 1.80rem; }
@media screen and (orientation : portrait)
{
html { font-size: 14px; }
}
@media only screen and (orientation : landscape)
{
html { font-size: 14px; }
}
}
@media screen and (min-width : 768px) and (max-width : 1024px)
{ h1 { font-size: 2.40rem; }
@media screen and (orientation : portrait)
{
html { font-size: 14px; }
}
@media screen and (orientation : landscape)
{
html { font-size: 14px; }
}
}
@media screen and (min-width : 1025px)
{
html { font-size: 14px; }
h1 { font-size: 3.60rem; }
}
/* =================================
END
================================= */