html, body { width: 100.0%; height: 100.0%; }
* { margin: 0; padding: 0; border-width: 0; list-style: none; border-style: solid; }
*, :before, :after { transition: all 240ms ease-in-out 0ms; }
ul, img { display: block; }
hr { width: 100.0%; border-top-width: 1px; margin: 1.50rem auto; }
/* --- Layout --- */
body > * { width: 100.0%; }
body > * > div { position: relative; width: calc(100.0% - 4.00rem); max-width: 1200px; height: 100.0%; margin: 0 auto; }
/* --- Header --- */
header { position: absolute; z-index: 2; top: 0; height: 0; height: 3.00rem; }
header:before { content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 100.0%; height: 100.0%; opacity: 0.00; }
header > div { position: relative; z-index: 2; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
header a { position: relative; }
header a + a { margin-left: 1.50rem; }
header a:before { content: ''; position: absolute; left: 0; bottom: -1.00rem; width: 0; height: 0.30rem; }
header a:hover:before { width: 100.0%; }
header img { position: absolute; top: 0.50rem; right: 0; width: auto; height: 2.00rem; }
.sticky header { position: fixed; top: 0; }
.sticky header:before { opacity: 0.90; }
.legal header:before { opacity: 0.90; }
/* --- Nav --- */
.hh, nav { display: none; }
.hh { position: absolute; z-index: 5; top: 0; left: 1.00rem; width: 3.00rem; height: 3.00rem;
background-image: url('../img/picts/white/menu.svg'); background-repeat: no-repeat; background-position: left center; background-size: 72.00% auto; }
.nav-on .hh { background-image: url('../img/picts/white/menu_open.svg'); }
.sticky .hh { position: fixed; }
nav { position: fixed; z-index: 4; display: block; top: 0; left: 0; width: 0; height: calc(100.0vh - 6.00rem); padding-top: 6.00rem; overflow: hidden; }
nav:before { content: ''; position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; opacity: 0.90; }
nav a { position: relative; z-index: 2; display: block; margin-left: 2.00rem; }
nav a + a { margin-top: 10.00vh; }
.nav-on nav { width: 100.0%; }
body.nav-on { position: fixed; } /* HURRA */
/* --- Article --- */
article { position: relative; padding: 5.00rem 0; overflow: hidden; }
article > div > div { display: flex; flex-flow: row wrap; justify-content: space-between; margin: 1.00rem -1.00rem -1.00rem -1.00rem; }
article > div > div > div { flex: 1 1 320px; margin: 1.00rem; }
/* --- Start + Intro --- */
#intro, #start { height: 62.00%; }
#intro { position: fixed; z-index: -1; top: 0; left: 0; overflow: hidden; }
#start { position: relative; }
#intro:before { content: ''; position: absolute; z-index: 2; top: -150.00%; left: -50.00%; width: 200.0%; height: 200.0%; opacity: 0.90; transform: rotate(-60deg); transform-origin: center 100.0%; }
#intro > div { position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; max-width: none; background-repeat: no-repeat; background-position: center right; background-size: cover; }
#intro > #intro-1 { background-image: url('../img/intro-1.jpg'); }
#intro > #intro-2 { background-image: url('../img/intro-2.jpg'); }
#intro > #intro-3 { background-image: url('../img/intro-3.jpg'); }
#intro > div { animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out; }
#intro-1 { animation-name: intro-1; }
#intro-2 { animation-name: intro-2; }
#intro-3 { animation-name: intro-3; }
@keyframes intro-1 {
00.00% { opacity: 1.0; }
28.33% { opacity: 1.0; }
33.33% { opacity: 0.0; }
61.66% { opacity: 0.0; }
66.66% { opacity: 0.0; }
95.00% { opacity: 0.0; }
100.0% { opacity: 1.0; }}
@keyframes intro-2 {
00.00% { opacity: 0.0; }
28.33% { opacity: 0.0; }
33.33% { opacity: 1.0; }
61.66% { opacity: 1.0; }
66.66% { opacity: 1.0; }
95.00% { opacity: 0.0; }
100.0% { opacity: 0.0; }}
@keyframes intro-3 {
00.00% { opacity: 0.0; }
28.33% { opacity: 0.0; }
33.33% { opacity: 0.0; }
61.66% { opacity: 0.0; }
66.66% { opacity: 1.0; }
95.00% { opacity: 1.0; }
100.0% { opacity: 0.0; }}
#start > div { display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; align-items: center; }
#start .brand { width: 45.00%; margin-bottom: 2.00rem; }
#start span { display: block; width: 100.0%; }
#start a.more { position: absolute; bottom: -1px; right: 0; width: 4.00rem; height: 2.00rem; border-radius: 2.00rem 2.00rem 0 0;
background-image: url(../img/picts/black/keyboard_arrow_down.svg); background-repeat: no-repeat; background-position: bottom -0.50rem center; background-size: auto 100.0%; }
/* --- Eyecatcher --- */
#start > div > div { position: absolute; bottom: 12.00%; right: 0; width: 20.00vmin; height: 20.00vmin; border-radius: 100.0%; }
#start > div > div > a { position: absolute; z-index: 3; top: 0; left: 0; width: 100.0%; height: 100.0%; border-radius: 100.0%; transform: rotate(6.00deg);
display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
#start > div > div > a > span { position: relative; z-index: 2; display: inline-block; width: auto; }
#start > div > div > a > span + span { margin-top: 1.00vmin; padding-top: 1.00vmin; border-top-width: 3px; border-top-style: dotted; }
#start > div > div:after { content: ''; position: absolute; bottom: 1.00vmin; left: 1.00vmin; width: 5.00vmin; height: 5.00vmin; }
/* --- Unternehmen --- */
#unternehmen figure > div > img { width: 100.0%; height: 100.0%; }
#unternehmen figure > div { position: relative; background-image: url(../img/portraet-sw.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; width: 100.0%; overflow: hidden; }
#unternehmen figure > div:before,
#unternehmen figure > div:after { content: ''; position: absolute; top: 0; left: 0; width: 100.0%; height: 100.0%; background-repeat: no-repeat; background-position: center; background-size: cover; width: 100.0%; }
#unternehmen figure > div:before { opacity: 1.00; background-image: url(../img/portraet-sw.jpg); }
#unternehmen figure > div:after { opacity: 0.00; background-image: url(../img/portraet-rgb.jpg); }
#unternehmen figure > div:hover:after { opacity: 1.00; }
/* --- Leistungen --- */
#leistungen { border-top-width: 1px; }
#leistungen > div > div { width: 100.0%; display: flex; flex-flow: row wrap; justify-content: space-between; margin: 2.00rem 0 0; }
#leistungen > div > div > div { flex: 1 1 400px; margin: 0; display: flex; flex-flow: row wrap; justify-content: space-between; }
#leistungen > div > div > div > div { flex: 1 1 130px; margin: 1.00rem; padding: 1.00rem 0.50rem; }
#leistungen > div > div > div > div:before { content: ''; display: block; height: 6.00rem; width: 9.00rem; margin: 0 auto 1.50rem;
background-repeat: no-repeat; background-position: center; background-size: auto 100.0%; }
#leistungen > div > div > div:nth-child(1) > div:nth-child(1):before { background-image: url(../img/icon-01.svg); }
#leistungen > div > div > div:nth-child(1) > div:nth-child(2):before { background-image: url(../img/icon-02.svg); }
#leistungen > div > div > div:nth-child(2) > div:nth-child(1):before { background-image: url(../img/icon-03.svg); }
#leistungen > div > div > div:nth-child(2) > div:nth-child(2):before { background-image: url(../img/icon-04.svg); }
/* --- Referenzen --- */
#referenzen p small { opacity: 0.50; }
/* --- Jobs --- */
#jobs > div > div { width: 100.0%; display: flex; flex-flow: row wrap; justify-content: space-between; margin: 2.00rem 0 0; }
#jobs > div > div > div { position: relative; flex: 1 1 220px; margin: 1.00rem -1px 1.00rem 0; padding: 0 2.00rem; }
#jobs > div > div > div > img { width: auto; height: 9.00rem; margin: 0 auto 1.00rem; }
#jobs > div > div > div:before, #jobs > div > div > div:after { content: ''; position: absolute; top: 0; width: 1px; height: 100.0%; }
#jobs > div > div > div:before { left: 0; }
#jobs > div > div > div:after { right: 0; }
/* --- Kontakt --- */
#kontakt { padding-top: 3.00rem; }
#kontakt > div > div > :nth-child(1) { position: relative; display: flex; flex-flow: column wrap; justify-content: center; }
#kontakt > div > div > :nth-child(1) > div { margin: 2.00rem; }
#kontakt > div > div > :nth-child(1):before { content: ''; position: absolute; top: calc(50.00% - 1.00rem); right: calc(0.00% - 1.00rem); width: 2.00rem; height: 2.00rem;
transform: rotate(-45deg); transform-origin: center; }
#kontakt > div > div a { position: relative; height: 3.50rem; margin-left: 1.00rem; padding-left: 4.00rem; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center; }
#kontakt > div > div a:before,
#kontakt > div > div a:after { content: ''; position: absolute; top: 0; left: 0; width: 3.00rem; height: 3.00rem; border-radius: 100.0%; }
#kontakt > div > div a:after { box-shadow: 0 0 2px 0 rgba(000,000,000,0.25), inset 0 0 0 4px rgba(255,255,255,1.00);
background-repeat: no-repeat; background-position: center; background-size: auto 50.00%; }
#kontakt > div > div a[href^="tel"]:after { background-image: url('../img/picts/white/phone.svg'); }
#kontakt > div > div a[href^="tel"] + a[href^="tel"]:after { background-image: url('../img/picts/white/phone_iphone.svg'); }
#kontakt > div > div a[href^="mailto"]:after { background-image: url('../img/picts/white/mail_outline.svg'); }
#kontakt > div > div a[href^="https"]:before { background-image: none; background-color: transparent; }
#kontakt > div > div a[href^="https"]:after { background-image: url('../img/WhatsApp.svg'); background-size: contain; box-shadow: none;
width: 3.50rem; height: 3.50rem; margin: 0 0.50rem 0 -0.25rem; border-radius: 0; }
/* --- Move --- */
#move { position: absolute; bottom: 0; right: 0; width: 25.00vw; height: 10.00vw;
background-image: url(../img/illu-fahrzeug.png); background-repeat: no-repeat; background-position: bottom center; background-size: contain; }
#move.active { animation-name: move-1;
animation-duration: 6s;
animation-iteration-count: 1;
animation-timing-function: ease-out; }
@keyframes move-1 {
00.00% { right: 0.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: 0.00%; opacity: 1; }}
/* --- Footer --- */
footer .brand { width: 12.00rem; }
footer { padding: 3.00rem 0; }
footer p, footer a { opacity: 0.50; }
footer a:hover { opacity: 1.00; }
footer > div > div { margin: -1.00rem; display: flex; flex-flow: row wrap; justify-content: space-between; }
footer > div > div > div { flex: 1 1 240px; margin: 1.00rem; display: flex; flex-flow: column wrap; justify-content: space-between; align-content: flex-start; align-items: flex-start; }
footer > div > div > div:nth-child(1) a + a { display: inline; width: auto;margin-top: 1.00rem; padding-top: 1.00rem; border-top-width: 1px; }
footer > div > div > div:nth-child(1) a + a > img { display: inline; width: auto; height: 1.25rem; margin: 0 0.50rem; }
footer > div > div > div:nth-child(2) a { height: 1.50rem; padding-left: 2.00rem; display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: center; align-items: center;
background-image: url('../img/icon-PDF.svg'); background-repeat: no-repeat; background-position: left center; background-size: auto 1.50rem; }
footer > div > div > div:nth-child(3) a + a { position: relative; margin-left: 1.00rem; padding-left: 1.00rem; }
footer > div > div > div:nth-child(3) a + a:before { content: ''; position: absolute; top: 10.00%; left: 0; width: 1px; height: 80.00%; background: white; }
/* --- Elemente --- */
.brand { position: relative; display: block; height: auto; overflow: hidden; }
.brand > img:nth-child(1) { width: 100.0%; }
.brand > img:nth-child(2) { height: 100.0%; position: absolute; top: 0; left: 0; }
.brand > img:nth-child(3) { height: 100.0%; position: absolute; top: 0; right: 0; }
.brand:hover > img:nth-child(2) { transform: rotate(90deg); }
ul > li { position: relative; display: block; padding-left: 1.00rem; }
ul > li:before { content: ''; position: absolute; top: 0.55em; left: 0; width: 0.50rem; height: 0.50rem; border-radius: 100.0%; opacity: 0.50; }
figure { width: 100.0%; }
figure + figure { margin-top: 2.00rem; }
figure > img { width: 100.0%; height: auto; }
figure > figcaption { width: 100.0%; margin-top: 1.00rem; }
/* --- Flap --- */
.flap { position: fixed; z-index: 7; top: 0; right: 0; width: 0; height: 100.0%; overflow: hidden; }
.flap > a { position: absolute; top: 0; right: 0; width: 100.0%; max-width: 100.0%; height: 100.0%; }
.flap > div { position: absolute; z-index: 2; top: 0; right: 0; width: 100.0%; max-width: 600px; height: 100.0%; overflow: hidden; }
.flap > div > div { position: absolute; z-index: 2; top: 0; left: 0; width: calc(100.0% - 6.00rem + 18px); height: calc(100.0% - 3.00rem); padding: 3.00rem 3.00rem 0;
overflow: auto; -webkit-overflow-scrolling: touch; overflow-y: scroll; }
.flap > div > div > :last-child { margin-bottom: 3.00rem; }
.flap > div > .close { position: absolute; z-index: 3; top: 0; right: 0; width: 3.00rem; height: 3.00rem; background: url('../img/picts/white/close.svg') no-repeat center; background-size: 1.50rem; }
.flap-01-on #flap-01.flap,
.flap-02-on #flap-02.flap,
.flap-03-on #flap-03.flap,
.flap-04-on #flap-04.flap,
.flap-05-on #flap-05.flap { width: 100.0%; }
.toplink { position: fixed; display: none; z-index: 3; bottom: 2.00vw; right: 2.00vw; width: 2.50rem; height: 2.50rem; border-radius: 100.0%;
background-image: url(../img/picts/white/keyboard_arrow_up.svg); background-repeat: no-repeat; background-position: center; background-size: auto 62.00%; }
.btn { padding: 0.75rem 1.00rem; }
/* --- Cookies--- */
#cookies { position: fixed; top: 0; left: 0; z-index: 999; width: 100.0%; height: 100.0%; overflow: hidden;
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 > div { position: relative; width: 80.00%; max-width: 280px; height: auto; padding: 1.80rem; border-radius: 0.24rem; border-width: 1px; color: black; background: white; color: black; line-height: 1.80;
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.50rem; }
#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; }
/* --- Jublaeumssticker --- */
#jublaeumssticker { position: absolute; top: -3.00rem; left: -1.00rem; width: 15.00vmin; height: 15.00vmin; border-radius: 100.0%; box-shadow: 3.00vmin 3.00vmin 6.00vmin rgba(000,000,000,0.60);
background-image: url(../img/icon_Jubilaeum-25.svg); background-repeat: no-repeat; background-position: center; background-color: black; background-size: cover; }
/* =================================
BREAK-POINT mobile
================================= */
@media screen and (max-width : 767px)
{
body { font-size: 14px; }
article { padding: 1.50rem 0; }
#start span { font-size: 1.25rem; }
body > * > div { width: calc(100.0% - 2.00rem); }
header a, #move { display: none; }
.hh, nav { display: block; }
#start, #intro { height: 100.0%; }
#intro:before { top: -150.00%; left: -75.00%; width: 300.0%; height: 200.0%; }
#start .brand { width: 72.00%; }
#start > div > div { width: 40.00vmin; height: 40.00vmin; }
#start > div > div > a > span { font-size: 5.00vmin; }
#start > div > div > a > span + span { font-size: 3.50vmin; margin-top: 2.00vmin; padding-top: 2.00vmin; }
#start > div > div:after { bottom: 2.00vmin; left: 2.00vmin; width: 10.00vmin; height: 10.00vmin; }
#jublaeumssticker { display: none; }
#kontakt { padding-top: 0; }
#kontakt > div > div > :nth-child(1) { margin-bottom: 2.00rem; }
#kontakt > div > div > :nth-child(1):before { top: calc(100.00% - 1.00rem); right: calc(50.00% - 1.00rem); }
* { hyphens: auto; -webkit-hyphens: auto; }
h1 { hyphens: none; -webkit-hyphens: none; }
.swiper-container .swiper-wrapper .swiper-slide > div:nth-child(2) { flex: 3 1 600px; height: 200px; background-repeat: no-repeat; background-position: center; background-size: cover; }
.legal header span:nth-child(1) a { display: block; }
.legal #imprint { padding-top: 3.00rem }
}
/* =================================
Layout
=================================
* { 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
================================= */