@charset "UTF-8";
/* CSS Document */
@import 'fonts.css';

/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { border:0; font-size:100%; margin:0; padding:0; }
a { outline:none; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
del,ins { text-decoration:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; font-variant:normal; }
sup,sub { vertical-align:baseline; }
legend { color:#000; }
input,button,textarea,select,optgroup,option { font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; }
input,button,textarea,select { font-size:100%; }

/* Clearfix */
.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

*, *:before, *:after {padding: 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}
figure, figure:before, figure:after {padding: 0; margin: 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}

body {margin:0; font-family: 'Saira', sans-serif; background: rgba(0,0,0,1); overflow-x: hidden;}
body.fixed, .has-lightbox body {height: 100%; overflow: hidden;}

/***************************** FORMAT *****************************/
h1, h2 {font-size: 1.75em; font-weight: 600;}
h3, h4 {font-size: 1.375em;ii }
h5 {font-size: 1.25em;}
h6 {font-size: 1.25em;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: inherit; border: 0 !important; text-decoration: none;}

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p,
h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul,
h1 + ol, h2 + ol, h3 + ol, h4 + ol, h5 + ol, h6 + ol {margin-top: 0.5em;}

p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 {margin-top: 1em;}
hr + h2, hr + h4, hr + h6 {margin-top: 0.75em;}

p, ul, ol {color: rgba(0,0,0,1); line-height: 1.5em; font-weight: 300;}
p + p, ul + p, ol + p {margin-top: 0.75rem;}
p + ul, p + ol {margin-top: 0.25rem;}
blockquote p, .big {font-size: 1.25em;}
.slider blockquote {margin: 0; text-transform: uppercase;}
.slider blockquote p {font-weight: 600;}

b, strong, .bold {font-style: normal; font-weight: 600;}

ul {list-style-type: none;}
ul li {padding: 0 0 0.75rem 0.5rem; line-height: 1.5em; position: relative;}
ul li:before {content: '\00b7'; position: absolute; left: 0;}

.white, .white * {color: rgba(255,255,255,1);}

/***************************** LINKS/SPANS *****************************/
a {text-decoration: none; color: inherit;
-webkit-transition: color .3s, background .3s, border .3s; transition: color .3s, background .3s, border .3s;}
a:hover {color: rgba(127,127,127,1);}

a.phone, a.phone:hover {color: rgba(0,0,0,1); cursor: text;}
.white a.phone, .white a.phone:hover {color: rgba(255,255,255,1);}

.pfeil {font-weight: 600; position: relative; padding-left: 1.125rem;}
.pfeil:before {display: block; content: ''; width: 0; height: 0; border-style: solid; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}

/***************************** LAYOUT *****************************/
/* BASIC */
.wrapper {height: auto; margin: 0 auto; max-width: 32rem;}
main {display: block; padding-top: 2.5rem; background: rgba(255,255,255,1);}

figure img {width: 100%; display: block;}
.stretch-w img, .logo img {width: 100%; height: auto;}
.stretch-h img {width: auto; height: 100%;}

.dark-bg {background: rgba(0,0,0,1);}

/* HEADER */
#main-header {padding: 3rem 0; background: rgba(255,255,255,1);}
#main-header.small-head {padding: 0;}
.logo {width: 12rem; height: auto; margin: 0 auto;}
.logo a, .logo-scroll a {display: block; width: 100%; height: 100%;}

.logo {width: 50%; max-width: 14rem;}
.logo a {padding-bottom: 87.5%; height: 0; position: relative;}

.small-head .logo {max-width: 8rem; display: none}

.logo-scroll {display: none; height: 100%; padding: 0.375rem 0; position: absolute; left: 1rem; top: 0; max-width: 16rem; z-index: 2;}
#main-nav.fixed .logo-scroll, .small-head .logo-scroll {display: block;}

.icon {width: 2.75rem; position: relative; float: left; height: 100%; border-bottom: 0.125rem solid rgba(0,0,0,1); margin-right: 0.5rem;}
.type {display: none; float: left;}
.icon img {height: auto; width: 2.75rem;}

/* NAVI */
nav ul {list-style-type: none;}
nav ul li:before {content: '';}

#main-nav {width: 100%; min-height: 2.5rem; background: rgba(255,255,255,1); z-index: 2; position: absolute;}
#main-nav ul.menu {width: 100%; height: 100%; padding: 2.5rem 0 0 0; font-weight: 600; position: fixed; right: 0; -webkit-overflow-scrolling: touch; -webkit-transform: translateX(100%); transform: translateX(100%); transition: transform .3s; background: rgba(255,255,255,1); z-index: 1;}
#main-nav .open ul.menu {-webkit-transform: translateX(0); transform: translateX(0);}

#main-nav ul li {padding: 0; border-top: 1px solid rgba(127,127,127,1);}
#main-nav ul li.menu-item, #main-nav ul li.menu-item a {line-height: 1em;}
#main-nav ul li:first-of-type {border-top: none;}
#main-nav ul li.menu-item > a {font-size: 1.25em; padding: 1rem; display: block; max-width: 75%;}
#main-nav ul li.menu-item > a:hover, #main-nav ul li.active > a {color: rgba(50,50,50,1);}

#main-nav.fixed, .small-head + #main-nav {position: fixed; top: 0; box-shadow: 0 0 0.25rem rgba(0,0,0,0.25);}

.sub-pull {width: 4rem; height: 100%; position: absolute; top: 0; right: 0; background: rgba(0,0,0,1);}
.sub-pull:after {content: ''; width: 0; height: 0; position: absolute; left: 1.5rem; top: 1.375rem; transition: all .3s; -webkit-transition: all .3s; border-style: solid; border-width: 0.875rem 0.5rem 0 0.5rem; border-color: rgba(255,255,255,1) transparent transparent transparent;}
.sub-pull.open:after {-webkit-transform: rotate(180deg); transform: rotate(180deg);}

.sub-menu {display: none; padding: 0.25rem 1rem;}
.sub-menu a {display: block; padding: 0.5rem 0;}

/* nav pull */
a#pull {width: 2.5rem; height: 2.5rem; padding: 0.625rem 0 0.625rem 0.75rem; position: absolute; top: 0; right: 1rem; z-index: 12;}
#main-nav.fixed a#pull, .small-head a#pull {right: 3.5rem;}

.burger-wrap {position: relative;}

.burger, .burger:before, .burger:after {width: 1.75rem; height: 0.25rem; display: block; position: absolute; background: rgba(0,0,0,1);
-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
.burger {left: 0; top: 0;}
.burger:before {top: 0.5rem; content: '';}
.burger:after {top: 1rem; content: '';}

.open .burger {background: none;}
.open .burger:before {top: 0.5rem; width: 1.75rem;
-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
.open .burger:after {top: 0.5rem; width: 1.75rem;
-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);}

/* contact panel */
.contact-panel {width: 100%; height: 100%; position: fixed; top: 0; right: 0; z-index: 10; -webkit-transform: translateX(100%); transform: translateX(100%); transition: all .3s;}
.contact-panel.open {-webkit-transform: translateX(0); transform: translateX(0);}
.contact-inner {width: 100%; height: 100%; padding: 4rem 1rem 1rem 1rem; position: relative;}
.contact-inner .contact-pull, .contact-open {display: block; position: absolute;}
.contact-inner .contact-pull {width: 2rem; height: 2rem; right: 1rem; top: 1rem;}

.contact-inner div + div {margin-top: 1.5rem;}

.contact-open {width: 2.5rem; height: 2.5rem; right: 0; top: 1rem; background: rgba(0,0,0,1) url('../images/layout/contact.svg') center center / auto 60% no-repeat}
.contact-pull .close {top: 0; right: 0; width: 100%; height: 100%;}

#main-nav.fixed + .contact-open, .small-head +.contact-open {position: fixed; top: 0; z-index: 2;}

.close:before, .close:after {display: block; content: ''; width: 100%; height: 0.375rem; position: absolute; top: 50%; left: 0; background: rgba(255,255,255,1);}
.close:before {transform: skewY(26deg) translateY(-50%);}
.close:after {transform: skewY(-26deg) translateY(-50%);}
.sl-close .close:before, .sl-close .close:after {background: rgba(0,0,0,1); transition: background .3s;}

/* SLIDER / IMAGES */
.headimg {position: relative; overflow: hidden;}
.headimg figure {padding-bottom: 50%; max-height: 50vh; overflow: hidden;}
.cont-slider figure {padding-bottom: 50%; max-height: 50vh;}
.headimg img, .slider img, .col figure img, .tile figure img, .logo img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); object-fit: cover}

.slider figcaption {width: 80%; max-width: 40rem; padding: 0 1rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); text-align: center;}
.slider figcaption.white {text-shadow: 0 0 0.5em rgba(0,0,0,0.3);}

@supports (object-fit: cover){
.headimg .stretch-w img, .headimg .stretch-h img,
.slider .stretch-w img, .slider .stretch-h img,
.col .stretch-w img, .col .stretch-h img,
.tile .stretch-w img, .tile .stretch-h img {width: 100%; height: 100%;}
}

/* CONTENT */
.block {padding: 1.5rem 0;}
.single-page {padding: 1.5rem 1rem;}

.single-text {padding: 0 1rem;}

.video {width: 100%; height: 0; position: relative; padding-bottom: 56.25%;}
.video iframe {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

.divide {width: 60%; height: 2.5rem; max-width: 16rem; margin: 1rem auto; background: url('../images/layout/logo-small.svg') center bottom / auto 100% no-repeat; border-bottom: 0.125rem solid rgba(0,0,0,1);}

.columns, .tiles {padding: 0 0.5rem;}
.col + .col {margin-top: 1.5rem;}

.col figure {padding-bottom: 120%; position: relative; overflow: hidden;}
.col figcaption {padding-top: 0.75rem;}

/* tiles */
.tiles {display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-flow: row wrap; -ms-flex-wrap: wrap; justify-content: flex-start;}

.tile {-webkit-box-flex: initial; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: initial; position: relative; width: 50%; max-width: 50%; padding: 1rem 0.5rem 0 0.5rem;}

.tile figure {height: 0; padding-bottom: 100%; position: relative; overflow: hidden;}
.tile a {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

.tile-link {background: rgba(0,0,0,1);}
.tile-link img {transition: opacity .3s;}
.tile-link:hover img {opacity: .75;}

.tile-title {width: 100%; position: absolute; left: 0; bottom: 0; padding: 1rem 0.5rem 0.75rem 0.5rem; line-height: 1em; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);}

.lb-caption {display: none;}

/* article nav */
.prev, .next {width: 0.875rem; height: 1rem; position: relative;}
.sl-navigation .prev, .sl-navigation .next {width: 100%; height: 2rem;}
.prev:after, .next:after, .arrow:after {content: ''; width: 0; height: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: all .3s; -webkit-transition: all .3s; border-style: solid;}

.prev:after {border-width: 0.5rem 0.875rem 0.5rem 0; border-color: transparent rgba(0,0,0,1) transparent transparent;}
.next:after, .pfeil:before {border-width: 0.5rem 0 0.5rem 0.875rem; border-color: transparent transparent transparent rgba(0,0,0,1);}
a:hover .prev:after {border-right-color: rgba(127,127,127,1);}
a:hover .next:after {border-left-color: rgba(127,127,127,1);}

.sl-navigation .prev:after {border-width: 1rem 1.75rem 1rem 0;}
.sl-navigation .next:after {border-width: 1rem 0 1rem 1.75rem;}

/* products/footer-nav */
.footer-nav {padding: 1.5rem 1rem;}
.footer-nav a {display: block; padding: 0.25rem 0;}
.footer-nav .prev, .footer-nav .next, .footer-nav span {display: inline-block; vertical-align: middle; margin: 0 0.125rem;}

#holder {opacity: 0; transition: opacity .125s ease-in-out; -moz-transition: opacity .125s ease-in-out; -webkit-transition: opacity .125s ease-in-out;}
#holder.visible {opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;}

/* single page */
.sidecol .third + .twothird, .sidecol .twothird + .third {margin-top: 1.25rem;}
.single-page header {padding-bottom: 0.5rem;}

/* FOOTER */
footer {padding-top: 3.5rem; background: url('../images/layout/logo-small.svg') center top / auto 3.5rem no-repeat rgba(255,255,255,1);}
.footer-inner {padding: 1rem 0; background: rgba(0,0,0,1);}

.prev-art, .next-art {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;}

/* back top */
.arrow:after {border-width: 0 0.5rem 0.875rem 0.5rem; border-color: transparent transparent rgba(255,255,255,0.5) transparent;}

#back-top {width: 2.5rem; height: 2.5rem; position: fixed; right: 1rem; bottom: 0; display: none; z-index: 1;}
#back-top a, #back-top a:active {width: 2.5rem; height: 2.5rem; display: block; padding: 0.625rem 0.25rem; background: rgba(0,0,0,0.3); transition: background 0.3s; -webkit-transition: background 0.3s;}
#back-top a:hover {background: rgba(0,0,0,1);}
#back-top .arrow {width: 2rem; height: 1.25rem; position: relative;}

#back-top a:hover .arrow {animation: pulse 0.5s 1;}
#back-top a:hover .arrow:after {border-bottom-color: rgba(255,255,255,1);}

@-webkit-keyframes pulse {
0%, 100% {transform: scale(1);}
50% {transform: scale(1.1);}
}
@-moz-keyframes pulse {
0%, 100% {transform: scale(1);}
50% {transform: scale(1.1);}
}
@keyframes pulse {
0%, 100% {transform: scale(1);}
50% {transform: scale(1.1);}
}

/* responsiveness
--------------------------------------------- */

/* medium */
@media screen and (min-width:48em) {

/***************************** FORMAT *****************************/
.center-text {text-align: center;}
.slider figcaption {font-size: 1.25em; padding: 0;}

/***************************** LAYOUT *****************************/
/* BASIC */
.wrapper {max-width: 40rem;}

/* HEADER */
.logo {width: 35%; max-width: 18rem;}

.sub-page .logo {max-width: 10rem;}

.type {display: block; width: 7rem; padding-top: 0.625rem;}
.type img {height: auto; width: 7rem;}

#main-nav ul.menu {width: 50%;}

/* contact panel */
.contact-panel {width: 50%; height: 100%;}
.contact-inner {padding: 4rem 2rem 2rem 2rem;}

/* CONTENT */
.block, .single-page {padding: 2.5rem 0;}

.single-text {padding: 0 4rem;}

.columns {display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-flow: row wrap; -ms-flex-wrap: wrap; justify-content: flex-start; padding: 0;}

.columns .col {-webkit-box-flex: initial; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: initial; position: relative;}
.col + .col {margin-top: 0;}
.col {width: 50%; max-width: 50%; padding: 2rem 1rem 0 1rem;}

/* tiles */
.tiles {padding: 0; justify-content: center;}
.tile {width: 33.33%; max-width: 33.33%;}
.tile:nth-of-type(1), .tile:nth-of-type(2), .tile:nth-of-type(3) {padding-top: 0;}

/* FOOTER */
.footer-inner {padding: 1rem 0 2rem 0;}

.footer-nav {padding: 2.5rem;}
.prev-art, .next-art {width: 50%;}
.prev-art {text-align: left; float: left;}
.next-art {text-align: right; float: right;}
}

/* large */
@media screen and (min-width:64em) {
.slider figcaption {font-size: 1.5em;}

/***************************** LAYOUT *****************************/
/* BASIC */
main {padding: 3rem 0 2rem 0;}
.wrapper {max-width: 56rem;}

/* HEADER */
.logo {width: 30%;}

.type {padding-top: 0.875rem;}
.icon, .icon img {width: 4rem;}
.type, .type img {width: 9.5rem;}

.logo-scroll, .logo-scroll img {max-height: 3.25rem;}

/* contact panel */
.contact-panel {width: auto; height: auto; /*top: 4rem;*/}
.contact-open {width: 3.25rem; height: 3.25rem;}

/* NAVI */
#main-nav {min-height: 3.25rem;}

#main-nav ul.menu {display: block; width: auto; height: auto; position: relative; text-align: center; padding: 0; right: auto; -webkit-transform: translateX(0); transform: translateX(0);}
#main-nav ul li.menu-item {display: inline-block; border-top: none; position: relative;}
#main-nav ul li.menu-item > a {max-width: 100%;}

#main-nav ul li.menu-item .sub-pull {display: none;}
.sub-menu {position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 0.25rem 0.75rem;}
.menu-item:hover > ul.sub-menu {display: block;}

.sub-menu a {white-space: nowrap;}

/* nav pull */
a#pull {display: none;}

/* extended touch */
@media (hover: none){
#main-nav ul.menu {width: 30%; height: 100%; padding: 3.25rem 0 0 0; position: fixed; right: 0; -webkit-transform: translateX(100%); transform: translateX(100%);}
#main-nav ul li.menu-item {display: block; text-align: left; border-top: 1px solid rgba(127,127,127,1);}
#main-nav ul li:first-of-type {border-top: none;}

#main-nav ul li.menu-item .sub-pull {display: block;}
.sub-menu {position: relative; left: 0; -webkit-transform: translateX(0); transform: translateX(0); padding: 0.25rem 0.75rem;}
.menu-item:hover > ul.sub-menu {display: none;}

a#pull {display: block; top: 0.375rem;}
#main-nav.fixed a#pull, .small-head a#pull {right: 4rem;}
}

/* CONTENT */
.divide {height: 3.25rem; margin: 2rem auto;}
.single-text {padding: 0 8rem;}
.tiles {padding: 0 4rem;}

.slider {margin: 1rem 0;}

/* tiles */
.tile-title {padding: 2rem 1rem 1rem 1rem;}

/* single page */
.sidecol .third + .twothird, .sidecol .twothird + .third {margin-top: 0;}
.sidecol .third, .sidecol .twothird {float: left;}
.sidecol .third {width: 33.33%}
.sidecol .twothird, .basic .twothird {width: 66.66%}

.maincol-right .third {padding-right: 1rem;}
.maincol-right .twothird {padding-left: 1.25rem;}
.maincol-left .third {padding-left: 1rem;}
.maincol-left .twothird, .basic .twothird {padding-right: 1.25rem;}

.single-page .full {width: 75%;}

/* FOOTER */
footer {padding-top: 5.5rem; background-size: auto 5.5rem;}

/*footer .col {width: 25%; max-width: 25%;} wegen irgend einem scheiss browser -.- */
footer .col:nth-of-type(4n+1) {padding: 0 0.75rem 0 0; width: 25%; max-width: 25%;}
footer .col:nth-of-type(4n+2) {padding: 0 0.5rem 0 0.25rem; width: 30%; max-width: 30%;}
footer .col:nth-of-type(4n+3) {padding: 0 0.25rem 0 0.5rem; width: 22.5%; max-width: 22.5%;}
footer .col:nth-of-type(4n+4) {padding: 0 0 0 0.75rem; width: 22.5%; max-width: 22.5%;}

}

@media screen and (min-width:74em) {

/***************************** LAYOUT *****************************/
/* BASIC */
.wrapper {max-width: 62rem;}

/* CONTENT */
.block, .single-page {padding: 3.5rem 0;}

.divide {margin: 3rem auto;}

.single-text {padding: 0 12rem;}
.tiles {padding: 0 4rem;}
}

@media screen and (min-width:100em) {
.slider figcaption {font-size: 1.75em; max-width: 54rem}
}

@media screen and (min-width:120em) {
body {font-size: 1.2em}
main {padding: 3.25rem 0 3rem 0;}

.contact-open {width: 3.5rem; height: 3.5rem;}

/* CONTENT */
.block, .single-page {padding: 4.5rem 0;}

.slider {margin: 2rem 0;}

/* tiles */
.tile {width: 25%; max-width: 25%;}
.tile:nth-of-type(1), .tile:nth-of-type(2), .tile:nth-of-type(3), .tile:nth-of-type(4) {padding-top: 0;}
}
/* end responsiveness
--------------------------------------------- */

.no-marg, * + .no-marg, .headslider p + p {margin-top: 0;}
.block + .block, .col:nth-of-type(1), .col:nth-of-type(2) {padding-top: 0;}