@font-face { font-family: 'Titillium Web'; src: url('../fonts/titilliumweb-bold-webfont.woff2') format('woff2'), url('../fonts/titilliumweb-bold-webfont.woff') format('woff'); font-weight: 700; font-style: normal;}
@font-face { font-family: 'Titillium Web'; src: url('../fonts/titilliumweb-light-webfont.woff2') format('woff2'), url('../fonts/titilliumweb-light-webfont.woff') format('woff'); font-weight: 300; font-style: normal;}
@font-face { font-family: 'Titillium Web'; src: url('../fonts/titilliumweb-regular-webfont.woff2') format('woff2'), url('../fonts/titilliumweb-regular-webfont.woff') format('woff'); font-weight: 400; font-style: normal;}
@font-face { font-family: 'Titillium Web'; src: url('../fonts/titilliumweb-semibold-webfont.woff2') format('woff2'), url('../fonts/titilliumweb-semibold-webfont.woff') format('woff'); font-weight: 600; font-style: normal;}
body { margin: 0; padding: 0; font-family: 'Titillium Web', sans-serif; color: #000; font-size: 18px; line-height: 25px;}

/* - - - - - Layout - - - - - */
.inner { width: 1170px; margin: 0 auto;}

h1 { margin: 0 0 17px; font-size: 30px; line-height: 36px; text-transform: uppercase;}
h2 { font-size: 30px; line-height: 36px; margin: 0 0 17px; text-transform: uppercase;}
h3 { font-size: 30px; line-height: 36px; margin: 0; text-transform: uppercase;}
h4 { font-size: 18px; line-height: 25px; text-transform: uppercase; display: block; border-bottom: solid 2px #9b9c9c; margin: 0; padding-bottom: 7px;}
h5 { font-size: 30px; line-height: 36px; margin: 0; text-transform: uppercase; display: inline-block; width: 20px; float: left; }

p { margin-top: 0;}
p:last-child { margin-bottom: 0;}

.main-wrap ul { margin: 0; padding: 0 0 0 21px;}
.main-wrap ul li { list-style: square; margin-bottom: 5px;}

a.download.button { background: #000; border-radius: 0; border: 0; color: #fff; text-transform: uppercase; font: 30px/25px 'Titillium Web', sans-serif; font-weight: 700; padding: 12px; cursor: pointer; margin-top: 30px; -webkit-appearance: none; text-decoration: none}
a.download.button:hover { background: #f2f2f3; color: #000;}

/* Text & Bild Elemente */
.inner div.csc-textpic .csc-textpic-imagewrap .csc-textpic-image { margin: 7px 0 0;}
.inner .csc-textpic-intext-left-nowrap .csc-textpic-text { padding-left: 20px;}
div.csc-textpic .csc-textpic-imagewrap .csc-textpic-image { margin-bottom: 0;}

/* - - - - - Header - - - - - */
.header-wrap { background: #374048; border-top: solid #fff 20px; height: 170px;}
.header-wrap .inner { position: relative;}

/* Main Nav */
.mainnav { margin: 0; padding: 0; position: absolute; left: 0; top: 80px;}
.mainnav li { float: left; list-style: none; margin-right: 30px; position: relative}
.mainnav li a { color: #fff; text-decoration: none;}
.mainnav li a:hover { font-weight: 600;}
.mainnav li.active a { font-weight: 600; border-bottom: solid 2px #fff;}
.mainnav li ul { display: none}
.mainnav li:hover ul { display: block; position: absolute; left: 0; top: 23px; z-index: 50; padding: 20px 25px; background: #000; border-top: solid 13px #374048; min-width: 240px}
.mainnav li:hover ul li { margin: 0 0 2px; float: none; }
.mainnav li:hover ul li a { color: #9b9c9c; display: block; width: 100%}
.mainnav li:hover ul li a:hover { color: #fff;}
.mainnav li.active ul li a { border-bottom: 0; font-weight: 400;}
.mainnav li.active ul li a:hover { font-weight: 600;}

/* Mobile Menu */
.nav-toggle { display: none; position: absolute; top: 15px; left: 0; z-index: 60;}
.nav-toggle button { outline: none; padding-left: 0;}


.hamburger-inner, 
.hamburger-inner:after, 
.hamburger-inner:before { background-color: #fff; border-radius: 7px; height: 7px; width: 50px;}
.hamburger--elastic .hamburger-inner:before { top: 15px;}
.hamburger--elastic .hamburger-inner:after { top: 30px;}
.hamburger--elastic.is-active .hamburger-inner:after { top: 20px;}

.mm-opened .mm-page:before { display: block; width: 2500px; height: 2500px; content: ''; background: #000; position: absolute; left: 0; top: 0; z-index: 50; opacity: 0.6;}

.mobilenav { display: none}
.mm-opened .mobilenav { display: block}
.mm-menu { background: #374048;} 
.mm-menu * { color: #fff;}
.mm-navbar { height: 122px; border-color: #272d33; background: #000;}
.mm-navbar .mm-btn { width: 100%; height: 61px; background: #000;}
.mm-menu .mm-navbar .mm-btn:before { border-color: #fff;}
.mm-navbar .mm-btn:after { content:'Alle Unternehmensbereiche'; display: inline-block; color: #fff; text-transform: uppercase; vertical-align: -10px}
.mm-menu .mm-navbar { height: 60px;}
.mm-menu .mm-navbar .mm-title { position: absolute; left: 0; top: 61px; width: 100%; font-size: 30px; font-weight: 700; text-transform: uppercase; padding-top: 20px; color: #fff; display: none}
body .mm-menu .mm-panels .mm-navbar+.mm-listview { margin-top: 1px }
.mm-menu #mm-1 .mm-navbar .mm-title { top: 6px; line-height: 35px; display: block}
.mm-menu #mm-1 .mm-navbar { height: 120px;}
body .mm-menu .mm-panels #mm-1 .mm-navbar+.mm-listview { margin-top: 61px;}
#mm-4 .mm-navbar .mm-btn:after,
#mm-6 .mm-navbar .mm-btn:after { content: 'Produkte';}
.mm-listview>li:not(.mm-divider):after { display: none}
.mm-panel ul li a { font-size: 18px; padding: 20px; border-bottom: solid 1px #272d33;}
.mm-panel ul li a:hover { background: #272d33;}
.mm-panels>.mm-panel>.mm-listview:first-child, .mm-panels>.mm-panel>.mm-navbar+.mm-listview { margin-top: 61px}
.mm-menu .mm-panels .mm-next { border-color: #272d33;}
.mm-menu .mm-listview>li.mm-selected>a:not(.mm-next), 
.mm-menu .mm-listview>li.mm-selected>a { background: #272d33;}
.mm-menu .mm-listview li.mm-selected .mm-next:after,
.mm-menu .mm-listview li .mm-next:hover:after { border-color: #fff;}

/* Page Nav */
.page-nav { margin: 0; padding: 0; position: absolute; right: 185px; top: 24px;}
.page-nav li { list-style: none; text-align: right; margin-bottom: 3px;}
.page-nav li a { color: #aaafb2; text-decoration: none; text-transform: uppercase;}
.page-nav li a:hover { color: #fff;}

/* Metallbau ID12 */
.p12 .page-nav .metallbau a { color: #fff; font-weight: 600;}

/* Treppenbau ID14 */
.p14 .page-nav .treppenbau a { color: #fff; font-weight: 600;}

/* Treppenbau ID16 */
.p16 .page-nav .systembauteile a { color: #fff; font-weight: 600;}

/* Logo */
.logo-wrap .logo { position: absolute; right: 0; top: -20px;}
.logo-wrap .logo img { width: 170px; height: 170px;}


/* - - - - - Main Content - - - - - */
.main-wrap a {font-weight: 700; text-decoration: underline; color: #000;}
.main-wrap a:hover { text-decoration: none}

.sub .main-wrap { margin-bottom: 140px;}


/* Video Startseite */
.video-overlay { background: url("../img/video_bg.png") 0 0; width: 100%; height: 1040px; position: absolute; left: 0; top: 190px; z-index:2;}
.video-wrap { position: relative;}
.video-wrap .csc-imageonly-wrapper img { width: 100%; height: auto; }
.video-wrap div.csc-textpic-center .csc-textpic-center-outer,
.video-wrap div.csc-textpic-center .csc-textpic-center-inner { width: 100%}
.video-wrap div.csc-textpic .csc-textpic-imagewrap .csc-textpic-image { margin-bottom: 0;}

.video-wrap .video-content { position: absolute; left: 0; bottom: 30%; width: 100%; z-index: 5;}
.video-wrap .video-content-wrap { z-index: 5;}
.video-wrap .video-content .col-33-wrap { margin: 0 auto; width: 1190px;}
.video-wrap .video-content .col-33-wrap .col { background: #fff; opacity: 0.9; padding: 13px 13px 50px; margin-right: 9px; width: 364px; position: relative; overflow: hidden;}
.video-wrap .video-content .col-33-wrap .col:hover { opacity: 1;}
.video-wrap .video-content .col-33-wrap .col3 { margin-right: 0;}
.video-wrap .video-content .col-33-wrap .col h2 {margin: 12px 0;}
.video-wrap .video-content .col-33-wrap .col .csc-textpic-text a { position: absolute; left: 0; bottom: 0; display: block; background: #000; color: #fff;; width: 100%; text-decoration: none; padding: 13px;}
.video-wrap .video-content .col-33-wrap .col .csc-textpic-text a:hover { background: #f2f2f3; color: #000;}


.video-wrap .easyhtml5video { max-width: 100% !important; margin-bottom: -6px;}

/* Headerbild */
.header-img-wrap { overflow: hidden; height: 547px; background: #ccc;}
.header-img-wrap .csc-textpic-center-outer,
.header-img-wrap .csc-textpic-center-inner { width: 100%;}
.header-img-wrap img { width: 100%; min-width: 1920px; height: auto;}

/* Breadcrumb */
.breadcrumb-wrap { background: #f2f2f3; padding: 32px 0; margin-bottom: 60px;}
.breadcrumb-wrap ul { margin: 0; padding: 0; overflow: hidden}
.breadcrumb-wrap ul li { list-style: none; float: left; background: url("../img/breadcrumb.png") no-repeat right center; padding-right: 15px; background-size: 7px; margin-right: 7px;}
.breadcrumb-wrap ul li:last-child { background: none;}
.breadcrumb-wrap ul li a { text-decoration: none; color: #000; font-size: 30px; line-height: 36px; font-weight: 700;}

/* Sidebar Menü */
.col-25-75-wrap .csc-menu { background: #000; margin: 8px 0 0; padding: 20px 27px;}
.col-25-75-wrap .csc-menu li { list-style: none; line-height: 20px; margin-bottom: 5px;}
.col-25-75-wrap .csc-menu li a { color: #9b9c9c; text-decoration: none; font-weight: 500}
.col-25-75-wrap .csc-menu li a:hover,
.col-25-75-wrap .csc-menu li.active a { color: #fff; font-weight: 600;}

/* Historie */
.historie { padding-left: 80px; font-size: 18px; line-height: 25px; margin-top: 20px;}

/* Trennlinie */
hr { margin: 0; border: solid 1px #000; border-bottom: none;}
.divider { margin: 70px 0;}

/* Formulare */
.tx-powermail h3 { display: none}
.tx-powermail .powermail_fieldset { margin: 0 0 20px 0; padding: 0 0 20px 0; border: 0; border-bottom: 1px solid #000; width: 970px}
.tx-powermail .powermail_fieldset:last-of-type { border-bottom: 0;}
.tx-powermail .powermail_fieldset .powermail_legend { font-size: 30px; line-height: 36px; text-transform: uppercase; padding: 0; font-weight: 700; margin-bottom: 25px;}
.tx-powermail .powermail_fieldset:first-of-type .powermail_legend { display: none;}
.tx-powermail .powermail_fieldset .powermail_label { font-weight: 600; text-transform: uppercase; display: block; margin-bottom: 3px;} 
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_input,
.tx-powermail .powermail_fieldset .powermail_fieldwrap_captcha { width: 470px; float: left; margin: 0 30px 20px 0;}
.tx-powermail .powermail_fieldset_2 .powermail_fieldwrap_type_input:nth-child(odd) { margin-right: 0;}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_input .powermail_input,
.tx-powermail .powermail_fieldset .powermail_fieldwrap_captcha .powermail_captcha { background: #f2f2f3; padding: 12px; font: 18px/25px 'Titillium Web', sans-serif; border: none; width: 95%}
.tx-powermail .powermail_fieldset .powermail_captchaimage { margin-top: 15px}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_html { margin: -10px 0 16px;}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_textarea { width: 470px; }
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_textarea .powermail_textarea { background: #f2f2f3; padding: 12px; font: 18px/25px 'Titillium Web', sans-serif; border: none; width: 646px; height: 156px;}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_select { clear: both}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_select .powermail_select { -webkit-appearance: none;  -moz-appearance: none; appearance:none; background: #f2f2f3 url("../img/select_arrow.png") no-repeat 96% center; text-indent: 0.01px;  text-overflow: ""; -webkit-border-radius: 0;  -moz-border-radius: 0;  border-radius: 0; padding: 12px; border: 0;  width: 470px; font: 18px/25px 'Titillium Web', sans-serif; text-transform: uppercase; outline: 0; margin-bottom: 20px;}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_radio { overflow: hidden; margin-bottom: 20px; clear: both}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_radio .powermail_radio_outer { float: left; min-width: 170px}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_radio .powermail_radio_outer label { vertical-align: -9px;}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_radio .powermail_radio_outer .false_radio { background: url("../img/radio.png") no-repeat left top; width: 48px; height: 48px; cursor: pointer; float: left; margin-right: 10px;}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_radio .powermail_radio_outer .false_radio.active { background: url("../img/radio-active.png") no-repeat left top;}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_radio .powermail_radio_outer .false_radio .powermail_radio { display: none}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_check { overflow: hidden; margin-bottom: 20px; clear: both}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_check .checkbox { float: left; min-width: 170px}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_check .checkbox label { vertical-align: -9px}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_check .checkbox .false_chk { background: url("../img/check.jpg") no-repeat left top; width: 48px; height: 48px; float: left; margin-right: 10px;}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_check .checkbox .false_chk.active { background: url("../img/check-active.png") no-repeat left top;}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_check .checkbox .false_chk .powermail_checkbox { display: none}
.tx-powermail .powermail_fieldset .powermail_fieldwrap_type_submit { clear: both}
.tx-powermail .powermail_fieldset .powermail_submit { background: #000; border-radius: 0; border: 0; color: #fff; text-transform: uppercase; font: 30px/25px 'Titillium Web', sans-serif; font-weight: 700; padding: 12px; cursor: pointer; margin-top: 30px; -webkit-appearance: none;}
.tx-powermail .powermail_fieldset .powermail_submit:hover { background: #f2f2f3; color: #000;}
.powermail_fieldwrap_datenschutz { margin-bottom: 30px;}
.powermail_fieldwrap_datenschutz .powermail_label { display: none;}

/* Cookie Banner */
.cc_container { font: 15px/33px 'Titillium Web', sans-serif !important;}
.cc_container .cc_message { line-height: 1.2em !important;}
.cc_container a, .cc_container a:visited { color: #374048 !important;}
.cc_container a:hover, .cc_container a:active { color: #555 !important;}
.cc_container .cc_btn, .cc_container .cc_btn:visited { background-color: #374048 !important; color: #fff !important;}
.cc_container .cc_btn:hover, .cc_container .cc_btn:active { background-color: #555 !important; color: #fff !important;}
.cc_container a:before { display: none;}

/* - - - Grid Elements - - - */

/* 2-spaltiger Container 50/50 */
.col-50-wrap { overflow: hidden}
.col-50-wrap .col { width: 570px; margin-right: 30px; float: left;}
.col-50-wrap .col2 { margin-right: 0;}

/* 2-spaltiger Container 25/75 */
.col-25-75-wrap { overflow: hidden; margin-bottom: 150px}
.col-25-75-wrap .col { width: 270px; margin-right: 30px; float: left;}
.col-25-75-wrap .col2 { width: 870px; margin-right: 0;}

/* 2-sapltiger Container 66/33 */
.col-66-33-wrap { overflow: hidden;}
.col-66-33-wrap .col { width: 65.5%; margin-right: 30px; float: left;}
.col-66-33-wrap .col2 { width: 31%; margin-right: 0;}

/* 2-sapltiger Container 33/66 */
.col-33-66-wrap { overflow: hidden;}
.col-33-66-wrap .col { width: 31.6%; margin-right: 30px; float: left;}
.col-33-66-wrap .col2 { width: 65.8%; margin-right: 0;}

/* 3-spaltiger Container */
.col-33-wrap { overflow: hidden; margin-bottom: 115px;}
.col-33-wrap:last-child { margin-bottom: 0;}
.col-33-wrap .col { width: 370px; margin-right: 30px; float: left;}
.col-33-wrap .col3 { margin-right: 0;}

/* 4-spaltiger Container */
.col-25-wrap { overflow: hidden; margin-bottom: 30px;}
.col-25-wrap .col { width: 270px; margin-right: 30px; float: left; }
.col-25-wrap .col4 { margin-right: 0;}
.col-25-wrap .col img { width: 100%; height: auto;}

/* Full width Wrap */
.full-width-wrap { overflow: hidden; padding: 140px 0;}
.full-width-wrap.grey { background: #f2f2f3;}

/* News Slider */
.flexslider { border: none; margin: 13px 0 0;}
.flexslider .flex-direction-nav { display: none}
.flexslider ul { padding-left: 0;}
.flexslider ul li:before { display: none}
.flexslider:hover .flex-direction-nav .flex-prev,
.flexslider:hover .flex-direction-nav .flex-next { display: none;}

.news { margin-bottom: 115px;}
.news:last-child { margin-bottom: 0;}
.news-element { position: relative;}
.news-element .news-text { background: #000; width: 291px; position: absolute; left: 0; top: 0; height: 288px; padding: 62px 40px 20px;}
.news-element .news-text * { color: #fff;}
.news-element .news-text a { text-decoration: none; font-weight: 600;}
.news-element .news-img { width: 800px; height: auto; margin-left: 370px;}

/* Video-Text für Untergruppe */
.video-content-wrap { position: absolute; left: 0; bottom: 70px; width: 100%; text-align: center}
.video-content-wrap p.black-wrap { background: #000; padding: 3px 20px; margin: 0; text-transform: uppercase; font-weight: 600; font-size: 60px; line-height: 72px; color: #fff; display: inline-block; margin-bottom: 65px;}
.video-content-wrap .white-wrap p { background: #fff; opacity: 0.75; color: #000; font-size: 55px; line-height: 72px; margin-bottom: 2px; display: inline-block; padding: 3px 40px;}

/* Bild zoom auf Hover */
.product-wrap { position: relative; width: 270px; height: 270px; overflow: hidden}
.product-wrap .img-zoom { width: 270px; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out;}
.product-wrap.transition img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
.product-wrap a { position: absolute; left: 0; top: 0; width: 270px; height: 270px; display: block; z-index: 100; color: transparent;}
.product-wrap .product-text { position: absolute; left: 0; bottom: 0; background: #000; opacity: 0.8; width: 100%; height: 25px; color: #fff; padding: 5px 10px;}

/* Bildergalerie */
.gallery-wrapper { margin-bottom: 30px}
.demo-gallery { margin-right: -30px; overflow: hidden}
a.demo-gallery__img--main { float: left; margin-right: 30px; margin-bottom: 30px; width: 270px; height: 270px; overflow: hidden; }
a.demo-gallery__img--main img { height: 270px; width: auto}
.demo-gallery .demo-gallery__img--main { position: relative;}
.demo-gallery .demo-gallery__img--main figure { position: absolute; left: 0; bottom: 0; background: #000; opacity: 0; width: 100%; height: 25px; padding: 5px 10px; color: #fff; margin: 0; display: block; -webkit-transition: all 0.2s ease-in; /* Firefox */
-moz-transition: all 0.2s ease-in; /* WebKit */
-o-transition: all 0.2s ease-in; /* Opera */
transition: all 0.2s ease-in; /* Standard */}
.demo-gallery .demo-gallery__img--main:hover figure { opacity: 0.8; display: none}
.pswp__caption__center { max-width: 1170px; margin-bottom: 40px; text-align: center; font: 18px/25px 'Titillium Web', sans-serif;}

/* Online Shop */
.shop-element { overflow: hidden; padding-top: 112px; background: url("../img/shopping-cart.png") no-repeat left top; margin-bottom: 130px;}
.shop-element .shop-text { background: #000; width: 290px; height: 325px; padding: 25px 40px 20px; float: left;}
.shop-element .shop-text * { color: #fff;}
.shop-element .shop-text h3 { margin-bottom: 40px;}
.shop-element .shop-text a { font-weight: 600; text-decoration: none; display: block; margin-top: 40px;}
.shop-element .shop-text a:hover { text-decoration: underline;}
.shop-element .shop-img { float: left}

/* - - - - - Footer - - - - - */
.footer-wrap { background: #374048; font-size: 16px; line-height: 20px; padding: 95px 0 85px;}
.footer-wrap * { color: #8F8F8F;}
.footer-wrap .col-25-wrap { margin-bottom: 0;}

.footer-wrap .col a { text-decoration: none;}
.footer-wrap .col a:hover { text-decoration: underline;}

.footer-wrap .csc-menu { margin: 30px 0 30px; padding: 0 0 25px; list-style: none; border-bottom: solid 1px #8f8f8f;}
.footer-wrap .csc-menu li { line-height: 10px;}
.footer-wrap .csc-menu li a { font-weight: 600; text-decoration: none; font-size: 16px; line-height: 20px;}

.p1 .footer-wrap .col-25-wrap .col1 *,
.p12 .footer-wrap .col-25-wrap .col2 *,
.p14 .footer-wrap .col-25-wrap .col3 *,
.p16 .footer-wrap .col-25-wrap .col4 * { color: #fff;}
.p1 .footer-wrap .col-25-wrap .col1 .csc-menu,
.p12 .footer-wrap .col-25-wrap .col2 .csc-menu,
.p14 .footer-wrap .col-25-wrap .col3 .csc-menu,
.p16 .footer-wrap .col-25-wrap .col4 .csc-menu { border-color: #fff;}

.sub .footer-wrap { margin-top: 40px;}

.footer-nav .instagram { margin-top: -3px;}
.footer-nav .instagram a:before { content:""; display: block; width: 30px; height: 30px; background: url("../img/instagram.png") no-repeat left top;}
.footer-nav .instagram a:hover:before { background-position: 0 -40px;}

/* - - - - - Deepfooter - - - - - */
.deepfooter-wrap .inner { position: relative; height: 50px;}
.deepfooter-wrap .copyright { position: absolute; left: 0; top: 13px;}
.deepfooter-wrap ul { margin: 0; padding: 0; position: absolute; top: 13px; right: 0;}
.deepfooter-wrap ul li { float: left; list-style: none; margin-left: 10px;}
.deepfooter-wrap ul li a { color: #000; text-decoration: none;}
.deepfooter-wrap ul li a:hover { text-decoration: underline;}

/* Dunkelblau: #374048 */

#page3 .col-66-33-wrap { margin-bottom: 140px;}