html, body { width: 100.0%; height: 100.0%; min-width: 375px; }
* { list-style: none; margin: 0; padding: 0; border: 0; border-style: solid; z-index: 2; border: 0; border-style: solid; transition: all 300ms ease-in-out 0ms; }
table { border-collapse: collapse; border-spacing: 0; }
hr { width: 100.0%; margin: 1.00em auto; border-top-width: 1px; }
table { width: 100.0%; border-collapse: collapse; border-spacing: 0; }
img,
video { display: block; }
*, :before, :after { list-style: none; margin: 0; padding: 0; border: 0; border-style: solid; z-index: 2; border: 0; border-style: solid; transition: all 300ms ease-in-out 0ms; }
.row { width: calc(100.0% + 4.00vw); margin: -2.00vw; display: flex; flex-flow: row wrap; justify-content: stretch; align-items: stretch; }
.row > * { flex: 1 1 240px; margin: 2.00vw; }
/* --- Header /Footer --- */
header, footer { width: 100.0%; }
header > div, footer > div { width: calc(100.0% - 8.00vw); height: 100.0%; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
header > div > *, footer > div > * { flex: 1 1 10.00%; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
header > div > *:first-child, footer > div > *:first-child { justify-content: flex-start; }
header > div > *:last-child, footer > div > *:last-child { justify-content: flex-end; }
header { height: 60px; border-bottom-width: 1px; }
header a + a { margin-left: 1.00em; }
header .hh { width: 2.25rem; height: 2.25rem; transform: rotate(180deg); background-image: url('../img/picts/menu.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; }
footer > div { padding: 2.00em 0 5.00em; }
footer a + a { margin-left: 1.00em; }
footer .partner { min-width: 240px; margin: 0.25em 0; background-image: url('../img/picts/arrow_forward_white.svg'); background-repeat: no-repeat; background-position: center right 0.25rem; background-size: auto 1.5rem; }
footer .partner > span { padding: 0.50em 3.00em 0.50em 1.00em; display: block; }
@media screen and (max-width : 768px) { header > div > *:nth-child(2), footer > div > *:nth-child(2) { display: none; }}
/* --- Nav --- */
nav { position: fixed; z-index: 5; top: 0; right: 0; width: 0; height: 100.0vh; overflow: hidden; }
nav > a { position: absolute; top: 0; right: 0; width: 100.0%; height: 100.0%; }
nav > div { position: absolute; z-index: 2; top: 0; right: 0; width: 320px; height: calc(100.0% - 3.50rem); padding: 1.75rem 0; overflow: hidden; }
nav > div > a { position: relative; display: block; width: calc(100.0% - 4.00rem); padding: 1.00rem 2.00rem; }
nav > div > a.icon { padding-left: 4.25rem; background-repeat: no-repeat; background-position: center left 2.00rem; background-size: 1.50rem auto; }
nav > div > a + a:before { position: absolute; top: 0; right: 0; width: 100.0%; height: 1px; background-color: white; opacity: 0.125; content: ''; }
nav > div > a.icon[href^="#validation"] { background-image: url('../img/picts/euro.svg'); }
nav > div > a.icon[href^="#faq"] { background-image: url('../img/picts/help_outline.svg'); }
nav > div > a.icon[href^="#contact"] { background-image: url('../img/picts/mail_outline.svg'); }
body { position: relative; right: 0; }
body.nav-on .hh { background-image: url('../img/picts/menu_open.svg'); }
body.nav-on { position: fixed; right: 320px; }
body.nav-on nav { width: 100.0%; }
/* --- Intro --- */
#intro { position: relative; width: 100.0%; min-height: calc(100.0vh - 60px); display: flex; flex-flow: row wrap; justify-content: stretch; align-items: stretch; overflow: hidden; }
#intro > div { position: relative; flex: 1 1 400px; overflow: hidden; }
#intro > div:nth-child(1) { display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; }
#intro > div:nth-child(1) > span { position: relative; flex: 1 1 24.00%; min-height: 25.00%; background-repeat: no-repeat; background-position: center; background-size: 80.00%; }
#intro > div:nth-child(1) > span:before { position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; content: ''; background-repeat: no-repeat; background-position: center; background-size: cover; }
#intro > div:nth-child(2) { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }
#intro > div:nth-child(2) > img { width: 42.00%; min-width: 240px; margin: 2.00rem auto; }
/* Hintergrundfarben Memory */
#intro > div:nth-child(1) > span:nth-child(01) { background-image: url('../img/intro/intro_01b.png'); background-color: #2bf035;}
#intro > div:nth-child(1) > span:nth-child(02) { background-image: url('../img/intro/intro_02b.png'); background-color: #13c9f2;}
#intro > div:nth-child(1) > span:nth-child(03) { background-image: url('../img/intro/intro_03b.png'); background-color: #f5e50f;}
#intro > div:nth-child(1) > span:nth-child(04) { background-image: url('../img/intro/intro_04b.png'); background-color: #f05bad;}
#intro > div:nth-child(1) > span:nth-child(05) { background-image: url('../img/intro/intro_05b.png'); background-color: #f5e50f;}
#intro > div:nth-child(1) > span:nth-child(06) { background-image: url('../img/intro/intro_06b.png'); background-color: #f05bad;}
#intro > div:nth-child(1) > span:nth-child(07) { background-image: url('../img/intro/intro_07b.png'); background-color: #2bf035;}
#intro > div:nth-child(1) > span:nth-child(08) { background-image: url('../img/intro/intro_08b.png'); background-color: #13c9f2;}
#intro > div:nth-child(1) > span:nth-child(09) { background-image: url('../img/intro/intro_09b.png'); background-color: #2bf035;}
#intro > div:nth-child(1) > span:nth-child(10) { background-image: url('../img/intro/intro_10b.png'); background-color: #13c9f2;}
#intro > div:nth-child(1) > span:nth-child(11) { background-image: url('../img/intro/intro_11b.png'); background-color: #f5e50f;}
#intro > div:nth-child(1) > span:nth-child(12) { background-image: url('../img/intro/intro_12b.png'); background-color: #f05bad;}
#intro > div:nth-child(1) > span:nth-child(13) { background-image: url('../img/intro/intro_13b.png'); background-color: #f5e50f;}
#intro > div:nth-child(1) > span:nth-child(14) { background-image: url('../img/intro/intro_14b.png'); background-color: #2bf035;}
#intro > div:nth-child(1) > span:nth-child(15) { background-image: url('../img/intro/intro_15b.png'); background-color: #f05bad;}
#intro > div:nth-child(1) > span:nth-child(16) { background-image: url('../img/intro/intro_16b.png'); background-color: #13c9f2;}
#intro > div:nth-child(1) > span:nth-child(01):before { background-image: url('../img/intro/intro_01a.jpg'); animation-delay: 20s; }
#intro > div:nth-child(1) > span:nth-child(02):before { background-image: url('../img/intro/intro_02a.jpg'); animation-delay: 14s; }
#intro > div:nth-child(1) > span:nth-child(03):before { background-image: url('../img/intro/intro_03a.jpg'); animation-delay: 26s; }
#intro > div:nth-child(1) > span:nth-child(04):before { background-image: url('../img/intro/intro_04a.jpg'); animation-delay: 8s; }
#intro > div:nth-child(1) > span:nth-child(05):before { background-image: url('../img/intro/intro_05a.jpg'); animation-delay: 6s; }
#intro > div:nth-child(1) > span:nth-child(06):before { background-image: url('../img/intro/intro_06a.jpg'); animation-delay: 2s; }
#intro > div:nth-child(1) > span:nth-child(07):before { background-image: url('../img/intro/intro_07a.jpg'); animation-delay: 18s; }
#intro > div:nth-child(1) > span:nth-child(08):before { background-image: url('../img/intro/intro_08a.jpg'); animation-delay: 10s; }
#intro > div:nth-child(1) > span:nth-child(09):before { background-image: url('../img/intro/intro_09a.jpg'); animation-delay: 24s; }
#intro > div:nth-child(1) > span:nth-child(10):before { background-image: url('../img/intro/intro_10a.jpg'); animation-delay: 28s; }
#intro > div:nth-child(1) > span:nth-child(11):before { background-image: url('../img/intro/intro_11a.jpg'); animation-delay: 4s; }
#intro > div:nth-child(1) > span:nth-child(12):before { background-image: url('../img/intro/intro_12a.jpg'); animation-delay: 30s; }
#intro > div:nth-child(1) > span:nth-child(13):before { background-image: url('../img/intro/intro_13a.jpg'); animation-delay: 8s; }
#intro > div:nth-child(1) > span:nth-child(14):before { background-image: url('../img/intro/intro_14a.jpg'); animation-delay: 22s; }
#intro > div:nth-child(1) > span:nth-child(15):before { background-image: url('../img/intro/intro_15a.jpg'); animation-delay: 12s; }
#intro > div:nth-child(1) > span:nth-child(16):before { background-image: url('../img/intro/intro_16a.jpg'); animation-delay: 16s; }
#intro > div:nth-child(1) > span:before
{ animation-name: slideshow;
animation-duration: 24s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out; }
@keyframes slideshow {
00.00% { opacity: 1.00; }
5.00% { opacity: 1.00; }
10.00% { opacity: 0.00; }
30.00% { opacity: 0.00; }
35.00% { opacity: 1.00; }
100.0% { opacity: 1.00; }}
/* --- Move --- */
#move { position: absolute; bottom: 0; right: -12.00%; width: 27.50vw; height: 11.00vw; background-image: url(../img/modellcar.png); background-repeat: no-repeat; background-position: bottom center; background-size: contain; }
#move.active { animation-name: move;
animation-duration: 6s;
animation-iteration-count: 1;
animation-timing-function: ease-out; }
@keyframes move {
00.00% { right: -12.00%; opacity: 1; }
80.00% { right: 100.0%; opacity: 1; }
81.00% { right: 100.0%; opacity: 0; }
90.00% { right: -35.00%; opacity: 0; }
91.00% { right: -35.00%; opacity: 1; }
100.0% { right: -12.00%; opacity: 1; }}
@media screen and (max-width : 768px) { #intro > div:nth-child(1), #move { display: none; }}
/* --- BrandName --- */
.brandName { white-space: nowrap;}
/* --- Content --- */
#content { position: relative; width: 100.0%; margin: 2.00vw auto; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: stretch; }
#content.full { min-height: calc(100.0vh - 4.00vw - 60px - 7.00em); }
#main, #aside { margin: 2.00vw 0; }
#main { flex: 1 1 50.00%; }
#aside { flex: 0 0 320px; } @media screen and (max-width : 768px) { #aside { flex: 1 1 320px; }}
#main > div + div { margin-top: 6.00vh; }
#txt, #rates, #video { width: calc(100.0% - 8.00vw); margin: 0 auto; overflow: hidden; }
/* --- Text --- */
#txt .box { position: relative; z-index: 2; padding-top: 14.00em; }
#txt .box:before { content: ''; position: absolute; top: 0; left: calc(50.00% - 6.00em); width: 12.00em; height: 12.00em; background-size: contain; }
#txt .box:after { content: ''; position: absolute; top: 14.00em; right: -2.00em; width: 1px; height: calc(100.0% - 14.00em); }
#txt .box:nth-child(1):before { background-image: url('../img/icons/Icon_Autohaus.svg'); }
#txt .box:nth-child(2):before { background-image: url('../img/icons/Icon_Reichweite.svg'); }
#txt .box:nth-child(3):before { background-image: url('../img/icons/Icon_Reporting.svg'); }
#txt .box:nth-child(2):hover:before { transform: rotate(-45deg); }
/* --- Rates --- */
#rates { padding: 0; }
#rates .btn { margin: 1.00em auto; padding: 1.00em 3.00em 1.00em 1.50em; }
#rates > .row { margin-top: 1.00em; justify-content: center; }
#rates > div + div { margin-top: 4.00em; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }
#rates .rate { position: relative; flex: 0 0 240px; margin-top: 2.00em; padding: 13.00em 1.00em 2.50em; border-radius: 0.50em; }
#rates .rate span { display: block; width: 100.0%; }
#rates .rate span > span { margin-bottom: 0.25em; }
#rates .rate:before { position: absolute; top: 3.00em; left: calc(50.00% - 4.00em); width: 8.00em; height: 8.00em; border-radius: 100.0%; content: ''; background-size: cover; }
#rates .rate:nth-child(1):before { background-image: url('../img/icons/ZN-Tarife-Basis.svg'); }
#rates .rate:nth-child(2):before { background-image: url('../img/icons/ZN-Tarife-Standard.svg'); }
#rates .rate:nth-child(3):before { background-image: url('../img/icons/ZN-Tarife-Premium.svg'); }
.hotline { position: relative; display: block; height: 4.50em; margin-top: 1.00em; padding-left: 4.50em; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center;
background: url('../img/picts/phone_blue.svg') no-repeat left center; background-size: 4.00em auto; }
.hotline:before { position: absolute; top: -1.00em; left: 0; width: 100.0%; height: 1px; background-color: white; content: ''; }
.hotline > span { margin: 0 0.25em; }
#video video { width: 50.00%; height: auto; margin: 4.00em auto; }
/* --- Aside --- */
#aside > div { padding: 2.00em; }
#aside > div + div { margin-top: 3px; }
#calc .tacho { margin: 1.00em 0 2.00em; }
#calc .tacho { margin: 1.00em 0 2.00em; }
/* --- FAQ --- */
.faq { width: calc(100.0% - 2px); margin: 1.00em auto; border-width: 1px; overflow: hidden; }
.faq input[name=faq] + label { position: relative; display: block; width: calc(100.0% - 4.00em); margin: 0; padding: 1.00em 1.00em 1.00em 3.00em; overflow: hidden; }
.faq input[name=faq] + label:before { position: absolute; top: 0.75em; left: 0.50em; width: 2.00em; height: 2.00em; content: ''; background-image: url('../img/picts/add.svg'); background-repeat: no-repeat; background-position: center; background-size: 1.75em; }
.faq input[name=faq] + label > span { display: block; width: 100.0%; height: auto; max-height: 0; overflow: hidden; }
.faq input[name=faq] + label > span > span { display: block; margin: 0.50em 0; }
.faq label + input[name=faq] + label { border-top-width: 1px; }
.faq input[name=faq]:checked + label > span { max-height: 300em; }
.faq input[name=faq]:checked + label:before { background-image: url('../img/picts/add_blue.svg'); transform: rotate(-45deg); }
.faq table tr > * { padding: 0 0.50em 0.50em 0; }
.faq table tr + tr > td { padding-top: 0.50em; border-top-width: 1px; }
.faq ul li { display: block; margin-top: 0.50em; padding-bottom: 0.50em; border-bottom-width: 1px; }
.faq ul li:last-child { padding-bottom: 0; border-bottom-width: 0; }
.faq ul li span { display: block; }
.faq ul li span + span { margin-top: 0.25em; }
/* --- Prices --- */
img.illu { width: 100.0%; height: auto; }
.prices { position: relative; padding: 1.00em; border-width: 1px; }
.prices:before { content: ''; position: absolute; z-index: 2; top: 1.00em; left: 1.00em; width: 220px; height: 200px; background-image: url('../img/ZN-PL-Subaru-Preisschild-blank.svg'); background-repeat: no-repeat; background-position: top center; background-size: contain; }
.prices span { display: inline-block; }
.prices table tr > th:first-child { width: 30.00%; }
.prices table tr > * + * { border-left-width: 1px; }
.prices table tr > th { width: 20.00%; padding: 0.50em 1.00em; text-align: center; }
.prices table tr > td { height: 2.00em; border-top-width: 1px; padding: 0.50em; }
.prices table .btn { margin: 0 auto 0.50em; padding: 0.50em 3.00em 0.50em 1.50em; }
.prices table i { display: block; width: 1.50em; height: 1.50em; margin: 0 auto; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url('../img/picts/done_blue.svg'); }
/* Action & Styles */
.prices table tr:nth-child(1) > th { border-top-width: 1px; }
.prices table tr:nth-child(1) > th:nth-child(1) { border-top-width: 0; }
.prices table tr:nth-child(1) > th:nth-child(2) { opacity: 0.50; }
.prices table tr:nth-child(1) > th:nth-child(3),
.prices table tr:nth-child(1) > th:nth-child(4) { background-color: rgba(045,150,205,1.00); color: white; border-top-color: rgba(045,150,205,1.00); }
.prices table tr > *:nth-child(4) { background-color: rgba(045,150,205,0.05); }
.prices table .act { color: rgba(249,178,000,1.00); }
.prices table .ul { border-bottom-width: 2px; border-bottom-style: dotted; }
.prices table .frame { border-right-width: 4px; border-right-color: rgba(045,150,205,1.00); border-left-width: 4px; border-left-color: rgba(045,150,205,1.00); }
.prices table .alu { border-bottom-width: 4px; border-bottom-color: rgba(045,150,205,1.00); }
@page { margin: 0.50cm 0.50cm 0.50cm 2.00cm !important; }
@media print { header > div { width: calc(100.0% - 0.00vw); }
#content.print article > div > div:nth-child(1) > p:nth-child(3),
#content.print article > div > div.prices table .btn { display: none !important; }
#content.print article > div > .prices { page-break-before: always; margin-bottom: 3.00cm;}
}
/* --- Legal --- */
header { border-bottom-width: 0; }
header > div { border-bottom-width: 1px; }
.legal header > div,
.legal footer > div,
.legal #content { max-width: 1032px; }
.legal img[alt=Logo] { width: 200px; margin-top: 3.00em; opacity: 0.50; }
.legal article { width: 100.0%; margin: 0 auto; padding-top: 2.00em; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; overflow: hidden; }
.legal article + hr { margin-top: 4.00em; }
.legal article + article { margin-top: 2.00em; }
/* --- Elements --- */
.toplink { position: fixed; z-index: 3; display: none; bottom: 1.00rem; right: 1.00rem; padding: 1.25rem; transform: rotate(180deg); opacity: 1.00;
background-image: url('../img/picts/arrow_drop_down_circle.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; }
.btn { display: inline-block; margin-top: 1.00em; padding: 0.75em 3.00em 0.75em 1.50em; background-image: url('../img/picts/keyboard_arrow_right_white.svg'); background-repeat: no-repeat; background-position: center right 0.75em; background-size: auto 1.50em; }
.link { display: inline-block; margin-top: 1.00em; padding: 0.75em 1.50em; }
/* --- Overlays --- */
.overlay { position: fixed; z-index: 9; top: 0; left: 0; width: 100.0%; height: 100.0%; transform: scale(0.00); display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
.overlay > a { position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; background-color: black; opacity: 0.50; }
.overlay > div { position: relative; width: calc(320px - 4.00rem); padding: 2.00rem; border-radius: 0.50rem; }
.overlay > div > .form-label-group { width: calc(100.0% - 2.50rem); }
.overlay > div .btn { margin: 2.00rem auto 0; }
.overlay > div > #dealerNumberValidationErrorMsg { color: red; }
.overlay:target { transform: scale(1.00); }
a.ico { display: block; padding-left: 2.00rem; background-repeat: no-repeat; background-position: center left; background-size: 1.50rem auto; }
a.ico + .ico { margin-top: 0.50em; }
a.ico.mail { background-image: url('../img/picts/mail_outline_blue.svg'); }
a.ico.tel { background-image: url('../img/picts/phone_blue.svg'); }
/* --- Cookies--- */
#cookies { position: fixed; top: 0; left: 0; z-index: 999; width: 100.0%; height: 100.0%; overflow: hidden; background: rgba(000,000,000,0.80);
display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center;
-webkit-backdrop-filter: blur(8px);
-moz-backdrop-filter: blur(8px);
-o-backdrop-filter: blur(8px);
-ms-backdrop-filter: blur(8px);
backdrop-filter: blur(8px); }
#cookies:before { content: ''; position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; opacity: 0.42; }
#cookies > span { position: relative; width: 80.00%; max-width: 280px; height: auto; padding: 1.80em; border-radius: 0.24em; background: white;
display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
#cookies .btn { flex: 1 1 100.0%; margin-top: 1.50em; }
#cookies { animation-name: cookies-on;
animation-duration: 4s;
animation-fill-mode: forwards;
animation-timing-function: linear; }
@keyframes cookies-on {
from { opacity: 0.00; }
66% { opacity: 0.00; }
to { opacity: 1.00; } }
#cookies:target { height: 0; transition: height 480ms ease-in-out 240ms; }
#cookies:target:before { opacity: 0; transition: opacity 240ms ease-in-out 0ms; }
/* =================================
Layout
=================================
.comment { color: rgba(255,000,255,1.0); }
* { box-shadow: inset 0 0 0 1px rgba(000,000,000,0.10) !important; }
* { background-color: rgba(000,000,000,0.05) !important; }
div { background-color: rgba(255,000,000,0.05) !important; }
div { background-image: none !important; }
* { color: rgba(000,000,000,1.0) !important; }
img { box-shadow: inset 0 0 0 1px rgba(000,000,000,0.40) !important; }
/* =================================
END
================================= */