@charset "UTF-8";
@-ms-viewport { width:device-width; }
@-o-viewport { width:device-width; }
@viewport { width:device-width; }

/* Farben
 * Rot: #EA0000
 * Rot 60%: #E85D5D
 * Rot 50%: #E87474
 * Rot 20%: #E8BABA
 * Grau: #6E6E6D
 * dunkleres Grau: #585756
 * helles Grau: #A0A09F
 * sehr helles Grau: #D7D4D2
 **/
/* STANDARDS */
html { height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { overflow:scroll; margin:0; padding:0; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; padding-bottom: 4rem; min-height: 100%; font-family: Helvetica, Arial, sans-serif; font-size:15pt; background-color: #FFFFFF; color:#000000; line-height: 120%; }
h1, h2, h3, h4, h5, h6, p { margin:1.2em 0 0.9em 0; line-height:120%; }
h1 { font-size: 2.4em; line-height: 130%; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h6 { font-size: 0.8em; }
header, nav, article, footer, address, section, picture { display: block; }
img { border:none; }
a { text-decoration: none; color:#EA0000; }

a.button, span.button { position: relative; cursor: pointer; color: #000000; background: #FFFFFF; margin: 30px auto; width: auto; border: 4px solid #000000; padding: 25px 70px; font-size: 1em; line-height: 120%; font-weight: bold; display: inline-block; }
a.button:hover, span.button:hover { border-color: #EA0000; }

hr {border:1px solid black}

.fullwidth { position: relative; }
.canvas { margin:0 auto; position:relative; }
.font-black, #main-content .font-black { color:#000000; }
.font-red, #main-content .font-red { color:#EA0000; }
.more-button { background: transparent url("../img/button-more.svg") center center no-repeat; background-size: contain; display: block; position: absolute; top: 50px; right: 43px; width: 53px; height: 40px; overflow: hidden; text-indent: -9999999px; }

:focus,:focus-visible {
  outline: #EA0000 2px solid !important;
  outline-offset: 4px;
  box-shadow: 0 0 4px 5px #ffffff;
  border-radius: 2px;
}
#map:focus-within, #map:focus-visible {
  outline: #EA0000 2px solid !important;
  outline-offset: 4px;
  box-shadow: 0 0 4px 5px #ffffff;
  border-radius: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
a:focus-visible {display: inherit;}

/* HEADER */
#header { position: fixed; z-index: 300; background: #FFFFFF; left:0; right:0; top:0; }
#header .fullwidth { padding: 16px 0 0 0; }
#header .logo { display: block; height: 100px; }

/* NAVIGATION */
.subnavi { display: none; position: absolute; left:0; top:0; }
/* META NAVIGATION */
#meta-navigation { position: absolute; top:0; right:0; color: #6E6E6D; font-size: 0.5em; line-height: 120%; margin:0; }
#meta-navigation ul { padding: 0; margin: 0; }
#meta-navigation ul::after { content: ''; display: block; float: none; clear: both; }
#meta-navigation li { display: block; float: left; border-right: 1px solid #6E6E6D; margin: 0 0 0 8px; padding: 0 8px 0 0; }
#meta-navigation li:last-child { border: none; padding: 0; }
#meta-navigation li a { color: #6E6E6D; text-decoration: none; }
#meta-navigation li a:hover { color: #EA0000; }

/* MAIN NAVIGATION */
#main-navigation { font-size: 0.8em; margin: 36px 0 10px 0; line-height: 120%; }
#main-navigation ul { padding: 0; margin: 0; }
#main-navigation .navigation-flex-canvas { display: block; }
#main-navigation .navigation-flex-canvas::after { content: ''; display: block; float: none; clear: both; }
#main-navigation .navigation-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#main-navigation .navigation-container ul::after { content: ''; display: block; float: none; clear: both; }
#main-navigation li { display: block; position: relative; float: left; margin: 0 6px; padding: 0 0 3px 0; }
#main-navigation li:first-child { margin-left: 0; }
#main-navigation li:last-child { margin-right: 0; }
#main-navigation li a { color: #000000; text-decoration: none; }
#main-navigation li.lvl-1 a { letter-spacing: 0.1em; }

#main-navigation li.lvl-1.active, #main-navigation li.lvl-1:hover { border-bottom: 6px solid #EA0000; }
#main-navigation li.lvl-1.active, #main-navigation li.lvl-1:focus-within { border-bottom: 6px solid #EA0000; }

.stoerer-container { position: absolute; top: 1px; display:flex; }
#stoerer { display: block; height: 90px; width: 90px; }
.stoerer-text { text-align:center; margin-left: 10px; }
.stoerer-text a { border: 3px solid #000000;padding: 10px 35px; color: #000; font-weight: bold; font-size: 9px; letter-spacing: 1px; }
.stoerer-text p { font-size: 12px; }

#mobile-navigation { display: none; }
#mobile-hamburger { display: none; width: 34px; height: 28px; margin: 5px 0 0 20px; position: relative; }
.small-header #mobile-hamburger { margin-top: 0; }
#mobile-hamburger div { background: #000000; height: 6px; position: absolute; left:0; width: 100%; }
#mobile-hamburger .line1 { top: 0; -webkit-transition:all 0.3s 0s ease-out; transition:all 0.3s 0s ease-out; }
#mobile-hamburger .line2 { top: 11px; -webkit-transition:top 0.1s 0.3s linear, width 0s 0.3s linear; transition:top 0.1s 0.3s linear, width 0s 0.3s linear; }
#mobile-hamburger .line3 { bottom: 0; -webkit-transition:all 0.3s 0s ease-out; transition:all 0.3s 0s ease-out; }

.menu-open #mobile-hamburger .line1 { top: 11px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition:all 0.3s 0.1s ease-in; transition:all 0.3s 0.1s ease-in; }
.menu-open #mobile-hamburger .line2 { top: 0; width: 0; -webkit-transition:top 0.1s 0s linear, width 0s 0.1s linear; transition:top 0.1s 0s linear, width 0s 0.1s linear; }
.menu-open #mobile-hamburger .line3 { bottom: 11px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition:all 0.3s 0.1s ease-in; transition:all 0.3s 0.1s ease-in; }

/* Subnavigation */
#main-navigation .subnavi.lvl-1 { top: 24px; background: rgba(234, 0, 0, 0.7); font-size: 11pt; color: #FFFFFF; min-width: 180px; max-width: 280px; padding: 7px 0; }
#main-navigation .subnavi.lvl-2 { padding: 0 25px; position:relative; }
#main-navigation .subnavi li { display: block; float: none; margin: 0; padding: 0; white-space: nowrap; }
#main-navigation .subnavi li a { color: #FFFFFF; padding: 8px 25px; display: block; }
#main-navigation .subnavi li a:hover { font-weight: bold; letter-spacing: 0.01em; }
#main-navigation li .subnavi::after { display: none; content: none; }
#main-navigation li.has-subnavi:hover .subnavi { display: block; z-index: 10; }
#main-navigation li.has-subnavi:focus-within .subnavi { display: block; z-index: 10; }
#main-navigation li:last-child .subnavi.lvl-1 { left: auto; right: 0; }


#nav-home i { background:transparent url("../img/icon-home.svg") center 0% no-repeat; background-size: auto 14px; display: block; height: 27px; width: 44px; }

#blog-uebersicht {  }
li#blog-uebersicht a { color: #EA0001; font-size: 0.85em; line-height: 120%;}
#blog-uebersicht a:before { content: ''; height: 14px; width: 10px; margin-right: 8px; display: inline-block; background: transparent url(../img/arrow-back-red.svg) left center no-repeat; background-size: contain; vertical-align: text-top; }

/* BREADCRUMB NAVIGATION START */
#breadcrumb-navigation { font-size:10px; padding: 10px 0 0 60px; border-top: 6px solid #000000; margin: 18px 0; }
#breadcrumb-navigation a { margin: 0 5px 0 0; line-height: 140%; color:#6F6E6D; padding:0; text-decoration:none; display:block; height: 15px; font-weight:normal; }
#breadcrumb-navigation li { font-size: 100%; float: none; white-space:nowrap; position:relative; }
#breadcrumb-navigation ul { list-style:none; padding:0; margin:0; }
#breadcrumb-navigation .entry { float:left; position:relative; border-right: 1px solid #000000; margin-right: 10px; line-height: 120%; padding: 0 5px 0 0; }
#breadcrumb-navigation .entry:last-child { border: none; padding: 0; }

#breadcrumb-navigation .unterNavigation { display:none; position:absolute; top:15px; left:14px; background-color:#ffffff; padding:4px; -webkit-box-shadow: 0px 2px 2px #ccc; box-shadow: 0px 2px 2px #ccc; z-index:1000; border:none; }
#breadcrumb-navigation .unterNavigation a, #breadcrumb-navigation ul.lvl1 .unterNavigation a { text-decoration:none; background:none; padding:0 0 0 8px; height:20px; line-height:20px; }
#breadcrumb-navigation .unterNavigation a::before, #breadcrumb-navigation a.start::before { display:none; }
#breadcrumb-navigation .unterNavigation a:hover { background:none; color:#1A171B; }
#breadcrumb-navigation a.aktiv, #breadcrumb-navigation a:hover { color:#6F6E6D; }
#breadcrumb-navigation li:hover .unterNavigation { display:block; }
#breadcrumb-navigation .currentEntry a, #breadcrumb-navigation a:hover { color:#1A171B; }
#breadcrumb-navigation .currentEntry a { padding-right: 6px; }
#breadcrumb-navigation ul.lvl1 a { background:none; padding-left:0; }
/* BREADCRUMB NAVIGATION ENDE */


/* Fliegende Navigation */
.small-header #header .fullwidth { position: fixed; left: 0; right: 0; top: 0; background: #FFFFFF; -webkit-box-shadow: 0px 0px 20px 5px #FFFFFF; box-shadow: 0px 0px 20px 5px #FFFFFF; }
.small-header #header .logo { height:0; width: 0; overflow: hidden; }
.small-header #header #meta-navigation { position: relative; top: auto; right: auto; margin: 14px 0 30px 0; text-align: right; }
.small-header #header #meta-navigation::after { content:''; display: block; clear: both; float: none; }
.small-header #header .stoerer-text { display: none; }
.small-header #header #stoerer { height: 50px; width: 50px;}
/* .small-header #header #meta-navigation .navigation-container { float: right; } */

.small-header #header #main-navigation { margin: 0; }
/*.small-header #header #nav-home i { background: transparent url("../img/logo-mini.svg") center center no-repeat; }*/

/* HEADER END */

/* MAIN CONTENT */
.back-link { color: #EA0001; text-decoration: none; font-weight: normal; position: absolute; left: 0; top: 0; font-size: 0.85em; }
.back-link:before { content:''; height: 14px; width: 10px; margin-right: 8px; display: inline-block; background:transparent url("../img/arrow-back-red.svg") left center no-repeat; background-size: contain; vertical-align: text-top;}

.six-pack { display: none; position: absolute; top: 0px; right: 0px; height: 115px; width: 115px; z-index: 7; }
.landing .six-pack { height: 156px; width: 156px; top: 50px; right: 10%; z-index: 5; -webkit-box-shadow: 0px 0px 30px #FFFFFF; box-shadow: 0px 0px 30px #FFFFFF; border-radius: 50%; background: rgba(255,255,255,1); }

#main-content { padding-top:234px; z-index: 2; color: #585756; text-align: center; -webkit-transition: padding-top 0.3s linear; transition: padding-top 0.3s linear;}
#main-content .canvas { position: relative; }
#main-content.border-top .canvas { border-top: 6px solid #000000; }

#main-content article { padding: 40px 0 0 0; font-size: 0.8em; line-height: 140%; }
#main-content section.canvas.aktuelles { padding: 40px 0 0 0; }
#main-content article p { font-size: 1em; line-height: 160%; margin: 1.0em 0 0.7em 0; }
#main-content article picture { margin: 0 0 50px 0; width: 100%; height: auto; }
#main-content article picture img { width: 100%; height: auto; }
#main-content h1, #main-content h2, #main-content h3, #main-content h4, #main-content h5, #main-content h6 { letter-spacing: .2em; color: #000000; text-align: center; }
#main-content h1 a, #main-content h2 a, #main-content h3 a, #main-content h4 a, #main-content h5 a, #main-content h6 a { color: #000000; text-decoration: none; }
#main-content h1 { letter-spacing: .3em; position: relative; /* top: 27px; */ margin: 0 0 30px 0; text-transform: uppercase; z-index: 5; min-height: 98px; padding: 0 130px; }
#main-content h1 .subhead { display: block; font-size: 0.4em; line-height: 150%; letter-spacing: 0.5em; }
#main-content h1.projekte { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

/* Flexbox version, funktioniert nicht in Safari 10 */
nav.link-liste { margin: 50px 0; }
nav.link-liste::after { content:''; display: block; float: none; clear: both; }
nav.link-liste ul { margin: 0 -20px; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }
nav.link-liste li { float:left; -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex-preferred-size: 0; flex-basis: 0; display: block; border: 6px solid #000000; max-width: 360px; margin: 20px 20px; padding: 0; font-size: 1.2em; font-weight: bold; }
nav.link-liste li a { color: #000000;  text-decoration: none; display: block; position: relative; height: 100%; }
nav.link-liste li:hover { border: 6px solid #EA0000; }
nav.link-liste li a span { padding: 20px 20px; text-align: center; display: block; position: relative; top: 50%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); letter-spacing: 0.1em; }
/* * /
nav.link-liste { margin: 50px 0; text-align: center; }
nav.link-liste::after { content:''; display: block; float: none; clear: both; }
nav.link-liste ul { margin: 0 -20px; padding: 0; display: block; list-style: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }
nav.link-liste li { display: inline-block; border: 6px solid #000000; max-width: 360px; margin: 20px 20px; padding: 0; font-size: 1.2em; font-weight: bold; }
nav.link-liste li a { color: #000000;  text-decoration: none; display: block; position: relative; min-height: 62px; }
nav.link-liste li:hover { border: 6px solid #EA0000; }
nav.link-liste li a span { padding: 20px 20px; text-align: center; display: block; }
/* */

/* STARTSEITE */
.swiper-slide { background: #FFFFFF; }
/* #landing-swiper { height: 100%; }
#landing-swiper .swiper-slide { height: 100%; width: 100%; text-align: center; transition: none; }
#landing-swiper .swiper-slide picture { transition: none; position: absolute; display: block; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 100%; height: 100%; }
#landing-swiper .swiper-slide img { min-height: 100%; min-width: 100%; } */

#landing-swiper { height: 100%; }
#landing-swiper .swiper-slide { height: 100%; width: 100%; text-align: center; }
#landing-swiper .swiper-slide img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); min-height: 100%; }

#main-content.landing { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding-top: 208px; padding-bottom: 60px; }

#lupe { pointer-events: none;position: absolute;z-index: 20; right: 0;margin: 25px; }

section.content { width: 68%; margin: 0 auto; text-align: left; }
section.content img {
  max-width: 100%;
}
section.content img.left {
  float: left;
	padding: 0 10px 0 0%;
}

section.content .halbe-breite {
  max-width: 50%;
}

/* COOKIE */
#cknt { padding:0; }
#cknt .canvas { padding: 20px 100px 20px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* STARTSEITE AKTUELLES */
#landing-news { position: absolute; left: 50%; bottom: 16%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); z-index: 10; }
#landing-news .news-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 0 0 0; padding: 0; height: 0; overflow: hidden; visibility: hidden}
@media (min-width: 767px) {
	#landing-news .news-list.open { 
			position: absolute;
			left: 50%;
			bottom: 16%;
			-webkit-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
			z-index: 10;
			margin: 0 0 90px 0;
			height: auto;
			visibility: visible;
		}
}
#landing-news .news-item { display: block; position: relative; }
#landing-news .news-item a { border:6px solid #000000; overflow: hidden; color: #000000; text-decoration: none; background: #FFFFFF; display: block; width: 250px; height: 250px; padding: 16px 26px; margin: 0 4px; -webkit-box-sizing: border-box; box-sizing: border-box;}
#landing-news .news-item a:focus-visible{outline-offset: -10px;}
#landing-news .news-item .category { display: block; z-index: 2; position: absolute; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); top: 14px; font-size: 0.6em; border-bottom: 4px solid #EA0000; font-weight: bold; line-height: 120%; color: #000000; -webkit-box-shadow: 0px 0px 11px 5px #FFFFFF; box-shadow: 0px 0px 11px 5px #FFFFFF; background: rgba(255,255,255,0.8); }
#landing-news .news-item h4 { margin: 3px 0 8px 0; font-size: 0.7em; }
#landing-news .news-item p { font-size: 0.6em; margin: 8px 0 0 0; }
#landing-news .news-item img { width: 138px; height: 78px; position: relative; z-index: 1; }
#landing-news .news-item .link-arrow { width: 16px; height: 13px; background: transparent url("../img/arrow-bold-right-red.svg") center center no-repeat; display: block; position: absolute; left: 50%; bottom: 22px; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}

#landing-news .news-item.sixpack-news-item svg { display: block; width: 100%; height: 78px; margin: 0 0 6px 0; }

#landing-news .landing-news-button { position: relative; letter-spacing: .2em; display: inline-block; cursor: pointer; color:#000000; background: #FFFFFF; border: 4px solid #000000; padding: 25px 130px; font-size: 1em; line-height: 120%; font-weight: bold; }
#landing-news .landing-news-button.active, #landing-news .landing-news-button:hover { border-color: #EA0000; }

/* STANDARD SLIDER */
#standard-swiper .swiper-pagination { top: auto; bottom: 15%; }
#standard-swiper .swiper-pagination-bullet { width: 20px; height: 20px; border-radius: 0; background: none; border: 3px solid #FFFFFF; opacity: 1; }
#standard-swiper .swiper-pagination-bullet-active { border-color: #EA0000; }
/**/

/* SITEMAP */
#sitemap {  }
#sitemap ul { list-style: none; margin: 0.3em 0 1em 0; padding: 0 0 0 1em; }
#sitemap a { color: #A0A09F; }
#sitemap a:hover { color: #EA0000; }
#sitemap .subnavi { display: block; position: relative; top: auto; left: auto; }
/* SITEMAP END */

/* TEAM GALLERY */
.team-gallery { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0; margin: 100px -10px 100px -10px; z-index: 200; }
#main-content article .team-gallery picture { margin: 0; }
#main-content article .team-gallery img { display: block; }
.team-gallery .item { display: block; width: 22%; height: auto; margin: 10px; padding: 0; cursor: pointer; }
/* .team-gallery .detail { display: block; cursor: default; width: 0; height: 0; position: absolute; background: #E8BABA; padding: 0; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 10; overflow: hidden; -webkit-transition: all .1s linear; transition: all .1s linear; } */
.team-gallery .detail .close { display: block; width: 50px; height: 55px; position: absolute; top: 0; right: 0; cursor: pointer; background: transparent url("../img/icon-cross-black.svg") center center no-repeat; background-size: contain; }
.team-gallery .detail .close:focus-visible {outline-offset: -5px;}
/* .team-gallery .item .detail.show { width: 470px; height: 480px; padding: 40px 60px; } */
.team-gallery .picture-container { position: relative; border: 1px solid rgba(255, 255, 255, 0); }
.team-gallery .picture-container:hover { border: 1px solid rgba(232, 116, 116, 0.68); }
.team-gallery .picture-container .description { display: block; opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; background: rgba(255,255,255,0.8); position: absolute; left: 0; bottom: 0; height: 50px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; }
.team-gallery .picture-container .description span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width:90%; color: #000000; font-size: .88em; line-height: 120%; font-weight: bold; text-transform: uppercase; }
.team-gallery .item .description { opacity: 1; }



/* .team-gallery .detail .picture { text-align: left; }
.team-gallery .detail .name-position { text-align: left; display: inline-block; margin: 1em 0 3em 0; }
#main-content .team-gallery .detail h6 { color: #000000; font-weight: bold; font-size: 1.6em; margin: 4px 0; text-align: left; margin: 0; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; }
.team-gallery .detail .position { color: #585756; text-align: left; margin: 10px 0 0 0; }
.team-gallery .detail .phone { display: block; color: #000000; font-weight: bold; text-decoration: none; font-size: 1.1em; position: absolute; bottom: 73px; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
.team-gallery .detail .mail { display: block; color: #585756; font-weight: normal; white-space: nowrap; text-decoration: none; font-size: 1em; position: absolute; bottom: 50px; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
.team-gallery .detail .vcf-download { position: absolute; bottom: 26px; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
.team-gallery .detail .vcf-download::after { content:''; margin-left: 5px; width: 12px; height: 9px; vertical-align: middle; background: transparent url("../img/arrow-bold-right-red.svg") center center no-repeat; display: inline-block; } */
/* .team-gallery .item.active .overlay { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 10000; background: rgba(255,255,255,0.7); } */

.team-gallery .detail { display: block; cursor: default; width: 0; max-height: 0; visibility: hidden; position: absolute; background: #E8BABA; padding: 0; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 10; overflow: hidden; -webkit-transition: all .1s linear; transition: all .1s linear; }
.team-gallery .item .detail.show { width: 470px; max-height: 1000px; visibility: visible; padding: 40px 60px; }

.team-gallery .detail .picture { text-align: left; }
.team-gallery .detail .name-position { display: inline-block; margin: 1em auto 1.5em auto; }
#main-content .team-gallery .detail h6 { color: #000000; font-weight: bold; font-size: 1.6em; margin: 4px 0; margin: 0; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; }
#main-content .team-gallery .detail .position { color: #585756; margin: 5px 0 0 0; }
.team-gallery .detail .phone { display: block; color: #000000; font-weight: bold; text-decoration: none; font-size: 1.1em; margin: 0 auto; }
.team-gallery .detail .mail { display: block; color: #585756; font-weight: normal; white-space: nowrap; text-decoration: none; font-size: 1em; margin: 0 auto; }
.team-gallery .detail .vcf-download::after { content:''; margin-left: 5px; width: 12px; height: 9px; vertical-align: middle; background: transparent url("../img/arrow-bold-right-red.svg") center center no-repeat; display: inline-block; }
.team-gallery .detail .lebenslauf { text-align: left; font-size: 0.8em; }
.team-gallery .detail .lebenslauf table tr td:first-child { white-space: nowrap; }



/* TEAM GALLERY END */

/* PROJECT */
.project-canvas { margin: 0 auto; text-align: left; }

.project-canvas .datasheet-canvas { margin: 20px auto 40px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.project-canvas .datasheet { max-width: 690px; }
.project-canvas .datasheet.with-drawing { text-align: right; max-width: 308px; }
.project-canvas .drawing { margin: 0 0 0 30px; border: 1px solid #ccc; }
.datasheet .item { margin: 2px 0; }
section.text-block { font-size: 1em; margin: 1.2em 0; }


/* PROJECT SLIDER */
#main-content article .swiper-container picture { margin: 0; display: block; }
.swiper-container img { display: block; min-width: 100%; /* min-height: 100%; */ }
.swiper-container { text-align: center; }
.swiper-container .description { margin: 0.5em 0; }
#project-swiper .swiper-pagination { top: auto; bottom: 15%; }
#project-swiper .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: none;
  border: 3px solid #FFFFFF;
  opacity: 1;
  -webkit-box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.5), 0px 0px 8px rgba(0, 0, 0, 0.5);
          box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.5), 0px 0px 8px rgba(0, 0, 0, 0.5);
}
#project-swiper .swiper-pagination-bullet-active { border-color: #EA0000; }
/* PROJECT SLIDER END */
/* PROJECT END */

/* REFERENZEN */
.referenzen-canvas { margin: 60px 0 30px 0; padding: 0 0 0 100px; }
.referenzen-canvas::after { content:''; display: block; float: none; clear: both; }
nav.referenzen { float: none; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* nav.referenzen ol { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin: 0; padding: 0; list-style: none; } */
/* nav.referenzen li { display: block; -webkit-box-flex: 1; -ms-flex: 1 1 33%; flex: 1 1 33%; max-width: 33%; width: 33%; padding: 6px 20px 6px 0; color: #A0A09F; text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box; } */
nav.referenzen ol { -webkit-column-count: 3; column-count: 3; }
nav.referenzen li { display: block; padding: 6px 20px 6px 0; color: #737372; text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box; height: auto; }

nav.referenzen a { color: #A0A09F; text-decoration: none; }
nav.referenzen a:hover { color: #EA0000; text-decoration: none; }

/*nav.referenzen-nutzungen { float: left; width: 33%; -webkit-box-sizing: border-box; box-sizing: border-box; }
nav.referenzen-nutzungen ol { display: block; margin: 0; padding: 0; list-style: none; }
nav.referenzen-nutzungen li { display: block; padding: 6px 0; color: #A0A09F; text-align: left; }
nav.referenzen-nutzungen a { color: #A0A09F; text-decoration: none; }
nav.referenzen-nutzungen a:hover { color: #EA0000; text-decoration: none; }*/
/* REFERENZEN END */

/* PROJECT OVERVIEW */
.project-overview-canvas::after { content:''; display: block; float: none; clear: both; }

#project-filter { z-index: 8; width:22%; float: left; text-align: left; position: relative; padding: 58px 30px 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width 0.3s ease-in-out, padding-right 0.3s ease-in-out; transition: width 0.3s ease-in-out, padding-right 0.3s ease-in-out; font-size: 14pt; }
#project-filter.filter-closed { width: 0%; padding-right:0; }




.projekt-filter-canvas { min-width: 0px; -webkit-transition: min-width 0.3s linear; transition: min-width 0.3s linear; background: #FFFFFF; }
.filter-open .projekt-filter-canvas { min-width: 200px; }

@media (max-height:700px) {
  .filter-open .projekt-filter-canvas { overflow-y: auto; max-height: 60%; }
}
@media (min-height:701px) and (max-height: 800px) {
  .filter-open .projekt-filter-canvas { overflow-y: auto; max-height: 65%; }
}
@media (min-height:801px) and (max-height: 900px) {
  .filter-open .projekt-filter-canvas { overflow-y: auto; max-height: 70%; }
}
@media (min-height:901px) {
  .filter-open .projekt-filter-canvas { overflow-y: auto; max-height: 75%; }
}


.small-header .projekt-filter-canvas {  }
.small-header .filter-open .projekt-filter-canvas { position: fixed; top: 230px; min-width: 200px; }

#toggle-filter { white-space: nowrap; color: #E85D5D; font-size: .7em; text-decoration: none; margin-bottom: 5px; display: block; }
a#toggle-filter:focus-visible { display: inline; margin: 0 7px; }
.small-header .filter-open #toggle-filter {  }

#reset-filter { color: #A0A09F; padding-left: 35px; font-size: .7em; display: block; white-space: nowrap; text-decoration: none; overflow: hidden; opacity: 0; -webkit-transition: opacity 0.3s ease-in-out, width 1s 1s linear; transition: opacity 0.3s ease-in-out, width 1s 1s linear; }
.small-header #reset-filter {  }
#reset-filter.show { visibility: visible; opacity: 1; -webkit-transition: opacity 0.3s ease-in-out, width 0s linear; transition: opacity 0.3s ease-in-out, width 0s linear; }
#project-filter.filter-closed #reset-filter { visibility: hidden; opacity: 0; width: 0; -webkit-transition: opacity 0.3s ease-in-out, width 1s 1s linear; transition: opacity 0.3s ease-in-out, width 1s 1s linear; }

.small-header #project-filter #filter-controls {  }
#filter-controls { overflow: hidden; -webkit-box-shadow: inset -3px 0px 9px #FFFFFF; box-shadow: inset -3px 0px 9px #FFFFFF; opacity: 1; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; }
#project-filter.filter-closed #filter-controls { opacity: 0; visibility: hidden; }
#filter-controls, #filter-controls ul { margin: 0; padding: 0; list-style: none; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }


#project-filter li { margin: 0.6em 0; position: relative; }
#project-filter li > a::after { position: absolute; -webkit-transition: -webkit-transform 0.1s linear; transition: -webkit-transform 0.1s linear; transition: transform 0.1s linear; transition: transform 0.1s linear, -webkit-transform 0.1s linear; top: 0; right: 0; width: 30px; height: 100%; content: ''; display: block; background: transparent url("../img/icon-plus-black.svg") center center no-repeat; background-size: 12px 28px; }
#project-filter li > a:hover::after, #project-filter li > a:focus-visible::after  { background-image:url("../img/icon-plus-red.svg"); background-size: 12px 28px; }
#project-filter li.has-subcategories > a::after { background: transparent url("../img/arrow-down-black.svg") center center no-repeat; background-size: 14px auto; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; }
#project-filter li.has-subcategories > a:hover::after, #project-filter li.has-subcategories.has-active > a::after, #project-filter li.has-subcategories > a:focus-visible::after { background-image: url("../img/arrow-down-red.svg"); }
#project-filter li.has-subcategories.has-active > a::after { background-size: 18px auto; }
#project-filter li a { color: #000000; text-decoration: none; font-size: 1em; display: block; position: relative; white-space: nowrap; }
#project-filter li a:hover { color: #EA0000; }
#project-filter li a:focus-visible { color: #EA0000; outline: none !important ; box-shadow: none; }

#project-filter li.has-subcategories li { padding: 0 0 0 10px;  }
#project-filter li.has-subcategories ul { display: none; }
#project-filter li.has-subcategories.open ul { display: block; }
#project-filter li.has-subcategories > a {  }
#project-filter li.has-subcategories.open > a::after { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
#project-filter li.has-subcategories ul a { color: #A0A09F; font-size: 0.858em; cursor: pointer; }
#project-filter li.has-subcategories ul a.active { color: #000000; }
#project-filter li.has-subcategories ul a::after { display: none; }
#project-filter li.has-subcategories ul a.active::after { display: block; background-size: 18px 34px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background-image: url(../img/icon-plus-red.svg); }
#project-filter li.has-subcategories ul a:hover { color: #EA0000; }
#project-filter li.has-subcategories ul a:focus-visible { color: #EA0000; outline: none !important; box-shadow: none;}
/*#project-filter li:not(.has-subcategories) > a.active::after { position: absolute; top: 0; right: 0; width: 30px; height: 100%; content: ''; display: block; background: transparent url("../img/icon-cross-red.svg") center center no-repeat; background-size: 22px auto; }*/
#project-filter li:not(.has-subcategories) > a.active::after { background-size: 18px 34px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background-image: url(../img/icon-plus-red.svg); }

#project-list { z-index: 1; float:left; width: 100%; margin-bottom: 60px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; -webkit-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; }
#project-list.filter-open { width: 78%; }

.filter-settings { text-align: left; font-size: 0.7em; font-weight: bold; color: #E85D5D; }

#project-loader { display: block; position: absolute; margin: 230px 0 0 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top:50%; left:50%; width: 30px; height: 30px; background:transparent url("../img/loader.gif") center center no-repeat; background-size: auto; }

#project-loader { height: 30px; width: 30px; background: #E87474; border-radius: 50%; -webkit-animation: project-loader 2s infinite ease-in-out; animation: project-loader 2s infinite ease-in-out; }

@-webkit-keyframes project-loader {
  0%, 20%, 40%, 60%, 100% {
     -webkit-transform: scale(.2);
     transform: scale(.2);
     opacity: 0;
  }
  10%, 30%, 50% {
     -webkit-transform: scale(1);
     transform: scale(1);
     opacity: 1;
  }
}

@keyframes project-loader {
  0%, 20%, 40%, 60%, 100% {
     -webkit-transform: scale(.2);
     transform: scale(.2);
     opacity: 0;
  }
  10%, 30%, 50% {
     -webkit-transform: scale(1);
     transform: scale(1);
     opacity: 1;
  }
}

.project-more-start #project-loader { position: relative; -webkit-transform: initial; transform: initial; top: auto; left: auto; margin:70px auto; }


#project-overview-list { margin-top: 1.4em; }
.project-overview-list { margin-top: 0; }
.project-overview-list ul { margin: 0 -9px; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.project-overview-list li { display: block; width: 20%; }
#project-list.filter-open .project-overview-list li { width: 25%; }
.project-overview-list .item { display: block; margin: 9px; position: relative; overflow: hidden; }
.project-overview-list .item img { display: block; width: 100%; height: auto; }
.project-overview-list .item .description { display: block; opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; border: 1px solid; background: rgba(255,255,255,0.8); position: absolute; left: 0; top: 0; height: 100%; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; }
.project-overview-list .item .description .description-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width:90%; color: #000000; font-size: .7em; line-height: 120%; font-weight: bold; text-transform: uppercase; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
.project-overview-list .item .description .description-content .description-title { display: block; margin: 0 0 4px 0; }
.project-overview-list .item .description .description-content .description-subtitle { display: block; font-size: 0.7em; line-height: 130%; }
.project-overview-list .item:hover .description { opacity: 1; }

.project-overview-list p.no-results { color: #EA0000; }
/* PROJECT OVERVIEW END */

/* JOBS */
#jobs-accordion { margin: 80px 0; }
#jobs-accordion .group { border: 6px solid #000000; padding: 0; margin: 1em 0; }
#jobs-accordion .group.active, #jobs-accordion .group:hover { border-color: #EA0000; }
#jobs-accordion h3 { border: none; font-size: 2em; text-align: center; margin: 0 0; outline: none; padding: 14px 50px; position: relative; cursor: pointer; -webkit-transition: margin 0s 0.3s linear; transition: margin 0s 0.3s linear; }
#jobs-accordion .group div { padding: 0 35px 35px 35px; }
#jobs-accordion h3 .gender { font-weight: normal; margin-left: 5px; }
#jobs-accordion h3::after { content:''; display: block; width: 40px; height: 40px; position: absolute; right:10px; top: 50%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); -webkit-transition: -webkit-transform 0.2s linear; transition: -webkit-transform 0.2s linear; transition: transform 0.2s linear; transition: transform 0.2s linear, -webkit-transform 0.2s linear; background: transparent url("../img/icon-plus-black.svg") center center no-repeat; background-size: contain; }
#jobs-accordion h3:hover::after { background-image: url("../img/icon-plus-red.svg"); }
#jobs-accordion h3.ui-state-active { border-bottom: none; border-color: #EA0000; margin-bottom: 0; -webkit-transition: margin 0s linear; transition: margin 0s linear; }
#jobs-accordion h3.ui-state-active::after { -webkit-transform: rotate(45deg) translate(-37%,-33%); transform: rotate(45deg) translate(-37%,-33%); background-image: url("../img/icon-plus-red.svg"); }
#jobs-accordion h3.ui-state-active .job { visibility: hidden; }
#jobs-accordion > div { border-top: none; padding-bottom: 35px; position: relative; }
#jobs-accordion .content { font-size: 1.35em; line-height: 130%; }
#jobs-accordion .group .content div { padding: 0; }
#jobs-accordion h4, #jobs-accordion h5, #jobs-accordion h6 { text-align: left; }
#jobs-accordion .editorial { color: #000000; }
#jobs-accordion h4 { color: #EA0000; padding: 1em 0; margin: 0; font-size: 2em; text-transform: uppercase; letter-spacing: 0.1em; }
#jobs-accordion h4 .job {  }
#jobs-accordion h4 .gender { color: #000000; text-transform: initial; white-space: nowrap; font-weight: normal; letter-spacing: initial; }
#jobs-accordion h5 { margin-bottom: 0; }
#jobs-accordion h6 { margin-bottom: 0; }
#main-content #jobs-accordion p, #jobs-accordion .contact { font-size: 0.7em; line-height: 150%; }
/* JOBS END */

/* PRESSESPIEGEL */
#presse-accordion { margin: 80px 0; }
#presse-accordion .group { border: 6px solid #000000; padding: 0; margin: 1em 0; }
#presse-accordion .group.active, #presse-accordion .group:hover { border-color: #EA0000; }
#presse-accordion h3 { border: none; font-size: 2em; text-align: right; margin: 0 0; outline: none; padding: 14px 50px; position: relative; cursor: pointer; -webkit-transition: margin 0s 0.3s linear; transition: margin 0s 0.3s linear; -webkit-hyphens: initial; -ms-hyphens: initial; hyphens: initial; }
#presse-accordion .group div { padding: 0 35px 35px 35px; }
#presse-accordion h3 .head-container { display: block; margin: 0 auto; width: auto; }
#presse-accordion h3 .headline { display: block; font-size: 0.5em; line-height: 120%; font-size: 0.4em; font-weight: normal; }
#presse-accordion h3 .title { display: block; line-height: 120%; }
#presse-accordion h3::after { content:''; display: block; width: 40px; height: 40px; position: absolute; right:10px; top: 50%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); -webkit-transition: -webkit-transform 0.2s linear; transition: -webkit-transform 0.2s linear; transition: transform 0.2s linear; transition: transform 0.2s linear, -webkit-transform 0.2s linear; background: transparent url("../img/icon-plus-black.svg") center center no-repeat; background-size: contain; }
#presse-accordion h3:hover::after { background-image: url("../img/icon-plus-red.svg"); }
#presse-accordion h3.ui-state-active { border-bottom: none; border-color: #EA0000; margin-bottom: 0; -webkit-transition: margin 0s linear; transition: margin 0s linear; height: 60px; }
#presse-accordion h3.ui-state-active::after { -webkit-transform: rotate(45deg) translate(-37%,-33%); transform: rotate(45deg) translate(-37%,-33%); background-image: url("../img/icon-plus-red.svg"); }
#presse-accordion h3.ui-state-active .headline, #presse-accordion h3.ui-state-active .title { visibility: hidden; }
#presse-accordion > div {  border-top: none; padding: 0 35px 35px 35px; text-align: center; position: relative; }
#presse-accordion > div img { max-width: 100%; display: inline-block; margin: 0 auto; height: auto; }
#presse-accordion > div .halbe-breite { max-width: 50%; }

.drawing-container { display: flex; margin: 0 -1em; flex-wrap: wrap; justify-content: center; }
.drawing-container .halbe-breite { display: block; width: 33%; padding: 1em; box-sizing: border-box; }

.presse-editorial h1, .presse-editorial h2, .presse-editorial h3, .presse-editorial h4, .presse-editorial h5, .presse-editorial h6 { margin-top: 0; }
/* PRESSESPIEGEL END */

/* CONTACT */
section.contact-info { margin-top: 2em; margin-bottom: 3em; font-size: 1.4em; line-height: 130%; }
#main-content section.contact-info p { line-height: 130%; }
#main-content section.contact-info .contact-info-links { line-height: 170%; margin: 0.7em 0 0.5em 0; }
.contact-info-label { min-width: 84px; display: inline-block; }
@media (max-width: 400px) {
  .contact-info-label { width: auto; display: block; margin-top: 1em; line-height: 120%; }
}
section.contact-info .phone { color: #585756; }
section.contact-info strong { display: block;  margin: 0; color: #000000; }

#contact-form {  }
#contact-form form { background: #D7D4D2; padding: 40px 112px; }
#contact-form .subject, #contact-form .subject-placeholder { margin: 1.6em 0 2.8em 0; height: 40px; position: relative; }
#contact-form .subject .value { color: #000000; cursor: pointer; background: #FFFFFF; font-size: 1.2em; width: 100%; display: block; line-height: 32px; font-weight: bold; padding: 4px 14px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; }
#contact-form .subject .value.placeholder { color: inherit;; }
#contact-form .subject .value::after { content:''; display:block; width: 25px; height: 25px; opacity: 0.5; position: absolute; top: 50%; right: 10px; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); background: transparent url("../img/icon-plus-black.svg") calc(100% - 10px) center no-repeat; background-size: auto; }
#contact-form .subject .options { display: none; position: absolute; top: 5px; left: 4px; background: #FFFFFF; list-style: none; padding: 23px 25px 17px 25px; margin: 0; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 1px 1px 14px #CCC; box-shadow: 1px 1px 14px #CCC; }
#contact-form .subject .options .close { display: block; width: 26px; height: 26px; cursor: pointer; background: url("../img/icon-cross-red.svg") center center no-repeat; background-size: contain; position: absolute; top: 10px; right: 10px; }
#contact-form .subject .options.open { display:block; }
#contact-form .subject .options li { cursor: pointer; margin: 5px 0; line-height: 120%; font-size: 0.9em; }
#contact-form .subject .options li:hover, #contact-form .subject .options li.active { font-weight: bold; }
#contact-form .fields-canvas { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#contact-form .fields-canvas > div { width: 48%; text-align: left; }
#contact-form .input-field { margin: 1.6em 0; width: 100%; height: 40px; }
#contact-form .input-field input, #contact-form .subject input, #contact-form textarea { width: 100%; height: 100%; resize: none; margin: 0; border: none; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 4px 14px; line-height: 32px; font-size: 1em; color: #000000; background: #FFFFFF; }
#contact-form textarea { /* height: calc(100% - 7.6em - 44px); */ height: calc(470px - 7.6em - 44px); font-family: Helvetica, Arial, sans-serif; }
#contact-form .input-field.formfielderror input, #contact-form textarea.formfielderror, #contact-form .subject.formfielderror .value { background-color: #ffe4e4; }
#contact-form .pflichtfelder { font-size: .7em; line-height: 120%; margin: 1.6em 0; }

#contact-form .errortext { text-align: left; border: 6px solid #EA0000; padding: 14px 24px; color: #EA0000; background: #fbe8e8; font-weight: bold; }
#contact-form .successtext { text-align: left; border: 6px solid #078800; padding: 14px 24px; color: #078800; background: #e8fbec; font-weight: bold; }

#contact-form .submit {  }
#contact-form .submit input { border: 6px solid #000000; margin: 0; padding: 20px 80px; background: transparent; font-size: 1.2em; font-weight: bold; line-height: 120%; cursor: pointer; }
#contact-form .submit input:hover { border: 6px solid #EA0000; }

section.map { margin: 3em 0; }
section.map #map { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden; }
section.map #map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* CONTACT END */

/* AKTUELLES */
#main-content article.aktuelles { margin: 0 0 80px 0; padding: 0; }
.aktuelles-info-button { position: relative; letter-spacing: .2em; cursor: pointer; color: #000000; background: #FFFFFF; margin: 30px auto 0 auto; width: auto; border: 4px solid #000000; padding: 25px 70px; font-size: 1em; line-height: 120%; font-weight: bold; display: inline-block; }
.aktuelles-info-button:hover { border-color: #EA0000; }
#main-content article.aktuelles h2 { text-transform: uppercase; font-size: 1.8em; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
#main-content article.aktuelles h2 a { color: inherit; }
#main-content article.aktuelles.jobs h2 { -webkit-hyphens: initial; -ms-hyphens: initial; hyphens: initial; }

#main-content article.jobs { background: #D7D4D2; padding: 10px 0; }
#main-content article.jobs #jobs-accordion { margin: 0; /* font-size: 1.2em; */ }
/* MAIN CONTENT END */

/* SixPack */
/* HEADER */
#header.blog { position: relative; height: auto; padding-bottom: 155px; }
#header.blog.small { padding-bottom: 0; }
#header section.header { background: #D7D4D2; /*height: 296px;*/ position: relative; }
.logo-six-pack { position: absolute; color: #000000; top: 22%; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
.logo-six-pack i {  }
#header .logo-six-pack .logo { height: 315px; margin: 0 0 20px 0; display: block; }
/* #header h1 { position: absolute; bottom: -17px; right: 0; margin: 0; display: block; color: #A0A09F; text-transform: uppercase; letter-spacing: 0.1em; font-size: 3.4em; line-height: 120%; height: 80px; } */
#header h1 {
  position: relative;
  bottom: -17px;
  margin: 0;
  display: block;
  color: #A0A09F;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 3.4em;
  line-height: 120%;
  padding-top: 223px;
  text-align: right;
  }

.small .logo-six-pack { top: 5%; -webkit-transform: translate(-50%,0%); transform: translate(-50%,0%); }
#header.blog.small .logo-six-pack .logo { height: 165px; }
#header.blog .fullwidth { padding-bottom: 0; }

#main-content.blog { padding-top: 0; }

/* SMALL BLOG HEADER * /
.small-header #header.blog section.header { height: 58px; }
.small-header #header.blog #meta-navigation { margin-bottom: 0px; }
.small-header #header.blog .logo-six-pack span { width: auto; display: inline-block; }
.small-header .small .logo-six-pack { width: auto; display: inline-block; position: relative; top: 0; left: 0; transform: initial; }
/* */
.small-header #header.blog .fullwidth { position: relative; left: auto; right: auto; top: auto; padding: 16px 0 0 0; background: #FFFFFF; -webkit-box-shadow: none; box-shadow: none; }
.small-header #header.blog #meta-navigation { position: absolute; top: 0; right: 0; margin: 0;  }
.small-header #header.blog #main-navigation { margin: 36px 0 10px 0; }
.small-header #header.blog .logo { width: auto; }

/* LIST */
#sixpack-list { margin: 0 -25px; }
#sixpack-list::after { content:''; display: block; float: none; clear: both; }
#sixpack-list a { display: block; float: left; background: #FFFFFF; width: 50%; height: auto; padding: 0 0 50% 0; position: relative; }
#sixpack-list article.item { display: block; position: absolute; width: 100%; height: 100%; padding: 25px; overflow: hidden; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
#sixpack-list img { -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; width: 100%; height: 100%; }
#sixpack-list .title { -webkit-transition: font 0.3s ease-in-out; transition: font 0.3s ease-in-out; position: absolute; display: block; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; color: #EA0000; font-size: 2.5em; line-height: 120%; font-weight: bold; text-shadow: 0 0 7px rgba(0,0,0,0.5); }
#sixpack-list a:hover img { opacity: 0.5; }
#sixpack-list a:hover .title { font-size: 4.4em; line-height: 120%; }
#sixpack-list a:focus-visible, #sixpack-list a:focus { outline-offset: -9px; }

.coming-soon { cursor: default; }
.coming-soon .frame { border: 10px solid #A0A09F; display: block; width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
#sixpack-list a.coming-soon .title, #sixpack-list a.coming-soon:hover .title { color: #000000; font-size: 1em; }

.sixpack-item {  }
.sixpack-item .content {  }
.sixpack-item .content img { max-width: 100%; height: auto; }
.sixpack-item .content h2, .sixpack-item .content h3, .sixpack-item .content h4, .sixpack-item .content p { clear:both; }
.sixpack-item .content .left { display: block; float: left; padding: 0 10px 0 0; }
.sixpack-item .content .right { display: block; float: right; padding: 0 0 0 10px; }
.sixpack-item .content .halbe-breite { width: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; }
.sixpack-item .content .halbe-breite img { width: 100%; height: auto; }
.sixpack-item .content::after { content:''; display: block; float: none; clear: both; }
.sixpack-item .content-left { display: block; float: left; width: 53%; position: relative; margin: 1em 0; padding: 0 1% 0 9%; -webkit-box-sizing: border-box; box-sizing: border-box; }
.sixpack-item .content-right { display: block; float: right; width: 47%; position: relative; margin: 1em 0; padding: 0 9% 0 1%; -webkit-box-sizing: border-box; box-sizing: border-box; }

.sixpack-item .content-left div, .sixpack-item .content-right div { margin: 0 0 1em 0; }
/* DETAIL */
#blog-nav { font-size: 1em; }
#blog-nav ul { margin: 0; padding: 74px 0; list-style: none; display: block; }
#blog-nav li { display: inline-block; padding: 0; border: 6px solid #FFFFFF; margin: 0 6px; font-size: 0.6em; font-weight: bold; color: #000000; }
#blog-nav li a { padding: 5px 18px; display: inline-block; color: #000000; letter-spacing: 0.1em; }

.sixpack-editorial { padding: 0.2em 88px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 1em; line-height: 160%; color: #000000; text-align: left; }

#main-content article.sixpack-item { padding: 50px 88px 50px 88px; text-align: left; position: relative; color: #000000; } /* 585756 */
#main-content article.sixpack-item h2 { letter-spacing: .3em; margin: 0 0 30px 0; text-transform: uppercase; font-size: 2.4em; line-height: 130%; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; }
#main-content article.sixpack-item h3 { color: #EA0000; margin: 0; padding: 1em 0; font-size: 1.8em; line-height: 140%; }
#main-content article.sixpack-item .content-right h3 { padding-top: 0; }

.sixpack-item .text-right { text-align: right; margin-bottom: 1em; }
.sixpack-item .text-right .bildunterschrift { width: auto;  }
.sixpack-item .text-right a { display: inline-block; }
.sixpack-item .text-right a .bildunterschrift { width: auto; text-align: left; color: #585756; text-decoration: none; }
.sixpack-item .content-left img, .sixpack-item .content-right img { max-width: 100%; width: auto; height: auto; }

.sixpack-item .bildunterschrift { font-size: 0.8em; /* width: 60%; */ display: block; line-height: 160%; }
.sixpack-item .abstand-desktop { margin: 0 0 40px 0; padding: 0; }

.blog-to-top { display: block; width: 50px; height: 25px;position: absolute; bottom: 23px; right: 80px; }
.blog-to-top svg { width: 100%; height: 100%; }
.blog-to-top-arrow { fill:#FFFFFF }


/* SixPack END */

/*  */
.impressum-tabelle { margin: 10px 0; }
.impressum-tabelle .decode-phone { color: inherit; }

/* SUCHE */
#meta-navigation ul { display: inline-block; }
.search-canvas {
  display: inline-block;
  vertical-align: text-bottom;
}
.suche {
  border: 0;
  border-bottom: 1px solid #000000;
  margin: 0 0 0 20px;
  padding: 0;
  line-height: 150%;
  font-size: 1.2em;
  overflow: hidden;
  width: 0;
  -webkit-transition: width 0.3s ease-in-out;
  transition: width 0.3s ease-in-out;
}
.suche.open {
  width: 100px;
}

.suche:focus-visible {
  width: 100px;
}

.open-head-search {
  display: inline-block;
  background: transparent url("../img/search.svg") center center no-repeat;
  background-size: contain;
  width: 12px;
  height: 12px;
  cursor: pointer;
  text-indent: -99999px;
  font-size: 0;
  vertical-align: text-top;
}

#suchergebnis { list-style: none; margin: 0; padding: 0; }
#suchergebnis li { margin: 1em 0; border-bottom: 1px solid #000000; padding: 0 0 1em 0; }
#suchergebnis li:last-child { border: none; }
#suchergebnis a { display: block; line-height: 120%; }
#suchergebnis .suchergebnis-title {  }
#suchergebnis .suchergebnis-description { color: #000000; font-size: 0.9em; }
#suche-pagination {  }
#suche-pagination .seiten {
  display: inline-block;
  border: 2px solid #000000;
  color: #000000;
  padding: 3px 4px;
  line-height: 120%;
  min-width: 25px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 25px;
  text-align: center;
  margin: 0 3px;
  font-weight: normal;
}
#suche-pagination .seiten:first-child { margin-left: 0; }
#suche-pagination .seiten:hover, #suche-pagination .seiten.aktiv { border-color: #EA0000; color:#000000; }
/* SUCHE ENDE */

/* FOOTER */
#footer { position: absolute; background: #FFFFFF; color: #585756; right: 0; bottom: 0; left: 0; font-size: 0.55em; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 14px 0 0 0; line-height: 120%; z-index: 10; }
#footer::after { content:''; display: block; float: none; clear: both; }
#footer a { text-decoration: none; color: #585756; }
#footer strong { color:#000000; }
#footer .right { width: 50%; float: right; border-left: 6px solid #000000; padding: 0 0 10px 15px; -webkit-box-sizing: border-box; box-sizing: border-box; }
#footer .right::after { content:''; display: block; float: none; clear: both; }
#footer .right .address { margin: 0 20px 10px 20px; float: left; }
#footer .right .company { margin-bottom: 10px; float: left; }
#footer .right .contact { margin-bottom: 10px; float: left; margin-right: 10px; }
#footer .right .xing-logo {
  margin-top: auto;
  margin-bottom: 0;
  height: 26px;
  float: left;
  display: flex;
  align-items: flex-end;
}
#footer .right .mail {  }

.only-mobile { display: none; }

/* FOOTER END */

#to-top { width: 46px; height: 46px; background: #fff url(../img/arrow-down-red.svg) no-repeat center center; background-size: 30px auto; position: fixed; bottom: 3rem; right: 1rem; z-index: 200; opacity: 0; -webkit-transition: opacity .3s; transition: opacity .3s; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); }
#to-top.hide { display: none; }
.small-header #to-top { opacity: 1; }
#piwikframe { height: 140px; }

/* MOBILE */
@media (max-width: 766px) {
  body { font-size: 12pt; }
  body.menu-open { overflow-y: hidden; }

  .only-mobile { display: block; }

  .back-link { font-size: 1.2em; }

  #header { position: relative; width: 100%;}
  #header .fullwidth { padding-bottom: 16px; }
  .small-header #header { position: fixed; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, .85); }
  .small-header #header .fullwidth { -webkit-box-shadow: none; box-shadow: none; background: transparent; position: static; }

  .small-header #header.blog { position: relative; left: auto; right: auto; top: auto; }
  #stoerer { display: block; height: 70px; width: 70px; }
  .stoerer-hamburger-container { width: 86%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
  .stoerer-container { position: static; }
  .stoerer-text { display: none; }


  #header .canvas { width: 100%; height: auto; }
  #meta-navigation { display: none; }
  #main-navigation { display: none; }
  #main-content { padding-top:0; }
  #main-content.landing {  padding: 0 0 80px 0; }
  #landing-swiper { height: auto; width: 100%; }

  #mobile-navigation { display: block; width: 37%; padding: 7px 45px 24px 30px; overflow: hidden; margin: 0; right: -100%; position: fixed; top: 200px; z-index: 100; background: #FFFFFF; bottom: 0; -webkit-transition: right 0.3s ease-out; transition: right 0.3s ease-out; }
  .small-header #mobile-navigation { top: 82px; }
  .menu-open #mobile-navigation { right: 0; -webkit-transition: right 0.3s 0.1s ease-in; transition: right 0.3s 0.1s ease-in; overflow-y: auto; }
  #mobile-navigation ul { margin: 0; padding: 0; list-style: none; }
  #mobile-navigation li { display: block; }
  #mobile-navigation li a { color: #000000; padding: 4px 0; line-height: 120%; font-size: 1em; display: block; margin: 6px 0; }

  #mobile-nav-home { border-bottom: 4px solid #000000; margin-bottom: 10px; }
  #mobile-navigation li#mobile-nav-home a { color: #6E6E6D; }
  #mobile-navigation ul.mainnavigation { border-bottom: 4px solid #000000; }

  #mobile-navigation .subnavi { position: absolute; display: none; right: -100%; opacity: 0; -webkit-transition: right 0s 0.3s ease-in, opacity 0.3s ease-in; transition: right 0s 0.3s ease-in, opacity 0.3s ease-in; top: 0; background: #FFFFFF; bottom: 0; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box;; padding: 7px 45px 24px 30px; }
  #mobile-navigation ul.subnavi.open { right: 0%; opacity: 1; display: block; -webkit-transition: right 0s ease-out, opacity 0.3s ease-out; transition: right 0s ease-out, opacity 0.3s ease-out; }

  #mobile-navigation .nav-back { border-bottom: 4px solid #000000; margin-bottom: 10px; }
  #mobile-navigation .nav-back a { color: #6E6E6D; }
  #mobile-navigation .nav-back a::before { content: ''; display: inline-block; height: 17px; width: 12px; margin: 0 6px 0 0; background: transparent url("../img/arrow-back-grey-mobile.svg") left center no-repeat; background-size: contain; vertical-align: top; }

  .search-canvas {
    margin: 0 0 15px 0;
  }
  .suche { margin: 0; }
  .suche.open { width: 80%; }
  .open-head-search {
    height: 15px;
    width: 15px;
  }

  #breadcrumb-navigation { display: none; }

  #main-content { padding-bottom: 80px; }

  #main-content, #main-content.landing { -webkit-transition: padding-top 0s; transition: padding-top 0s; position: relative; top: auto; left: auto; bottom: auto; right: auto; width: 100%; }
  .small-header #main-content.landing,
  .small-header #main-content { padding-top: 152px; }
  .small-header #main-content.blog { padding-top: 0; }

  #main-content article { padding: 30px 0 0 0; }

  #landing-swiper .swiper-slide img { position: relative; top: auto; left: auto; -webkit-transform: initial; transform: initial; min-height: initial; }

  #contact-form .fields-canvas { display: block; }
  #contact-form form { padding: 3px 20px 20px 20px; }
  #contact-form .fields-canvas > div { width: auto; }
  section.contact-info { font-size: 1.4em; }
  section.contact-info .no-mobile { display: block; visibility: hidden; height: 0; width: 0; }
  #contact-form .subject-placeholder { display: none; }
  #contact-form .input-field { margin: 1.0em 0; }
  #contact-form textarea { height: 200px; margin-top: 1.8em; }
  #contact-form .pflichtfelder { font-size: 1em; }
  #contact-form .submit input { border: 4px solid #EA0000; padding: 10px 30px; width: 62%; -webkit-box-sizing: border-box; box-sizing: border-box; margin: .4em 0; font-size: 1em; }
  #contact-form .subject .options li { margin: .6em 0; font-size: 1.4em; }


  .team-gallery { padding: 30px 0 30px 0; margin: 0 -5px; }
  .team-gallery .item { width: 43%; height: auto; position: relative; padding: 0 0 43% 0; }
  .team-gallery .item:hover .description { opacity: 0; }
  .team-gallery .picture-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

  .team-gallery .detail { position: absolute; }
  .team-gallery .item.active .overlay { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 10000; background: rgba(255,255,255,0.7); }
  /* .team-gallery .item .detail.show { width: 85%; top: 50%; height: auto; padding: 32px 20px 20px 20px; max-height: 90%; -webkit-box-sizing: border-box; box-sizing: border-box; } */
  .team-gallery .item .detail.show {
    width: 85%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    height: auto;
    padding: 32px 20px 20px 20px;
    height: 80%;
    top: 13%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow-y: auto;
  }
  .team-gallery .item .detail.show .detail-container {
    overflow: hidden;
    top: 32px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    position: absolute;
    overflow-y: auto;
  }
  .team-gallery .detail .picture { width: 80%; margin: 0 auto; }
  .team-gallery .detail .picture img { max-width: 100%; height: auto; }
  .team-gallery .detail .name-position { margin-bottom: 0.1em; }
  .team-gallery .detail .phone,
  .team-gallery .detail .mail,
  .team-gallery .detail .vcf-download { position: relative; bottom: auto; display: block; }
  .team-gallery .detail .close { top: 0px; }
  #main-content .team-gallery .detail h6 { font-size: 1.4em; }
  #main-content .team-gallery .detail .position { margin: 6px 0 0 0; }
  #to-top { bottom: 1.5rem; }

  /*.team-gallery .item.active { width: 100%; height: auto; box-sizing: border-box;}
  .team-gallery .item.active > picture { display: none; }
  .team-gallery .item .detail.show { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: 100%; height: auto; box-sizing: border-box; }
  .team-gallery .detail .picture { width: 75%; }
  .team-gallery .detail .picture img { width: 100%; height: auto; }
  .team-gallery .detail .name-position { display: block; margin: 1em 0; }
  .team-gallery .detail .phone { position: relative; transform: none; left: auto; bottom: auto; text-align: left; }
  .team-gallery .detail .mail { position: relative; transform: none; left: auto; bottom: auto; text-align: left; }
  .team-gallery .detail .position { margin: 0; }*/

  .referenzen-canvas { padding: 0; }
  nav.referenzen { width: auto; float:none; }
  nav.referenzen ol { display: block; }
  nav.referenzen li { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; width: auto; }
  nav.referenzen-nutzungen { width: auto; float: none; padding-top: 40px; }

  .projekt-filter-canvas { -webkit-transition: padding 0.3s linear; transition: padding 0.3s linear; }
  .filter-open .projekt-filter-canvas { -webkit-box-shadow: 8px 8px 10px rgba(120,120,120,.3); box-shadow: 8px 8px 10px rgba(120,120,120,.3); }
  #project-filter { padding: 0; position: absolute; width: auto; }
  #project-filter.filter-closed { overflow: hidden;  }
  .projekt-filter-canvas { max-width: 100%; background: #FFFFFF; padding: 0px 30px 0 0; float: none; padding-bottom: 20px; }
  .small-header .filter-open .projekt-filter-canvas { top: 60px; padding-top: 30px; max-height: 70%; }
  .filter-closed .projekt-filter-canvas { background: transparent; padding: 0; }

  #project-filter.filter-closed { height:30px; width: auto; }


  #project-filter li a { padding: 0 35px 0 0; }

  #project-list.filter-open { width: 100%; }
  #project-list.filter-open #project-overview-list li { width: 50%; }

  #project-overview-list ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  #project-overview-list li { width: 50%; }
  #project-overview-list .item { width: auto; }
  #project-overview-list .item picture { width: 100%; }
  #project-overview-list .item picture img { width: 100%; height: auto; }

  #jobs-accordion { margin: 38px 0; font-size: 1.2em; }
  #jobs-accordion .content { font-size: 1em; }
  #jobs-accordion h3 { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
  #jobs-accordion h3 .gender { white-space: nowrap; }
  #jobs-accordion h4 { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; font-size: 1.5em; }
  #jobs-accordion h4 .gender { white-space: nowrap; }
  #main-content #jobs-accordion p, #jobs-accordion .contact { font-size: .8em; }

	.project-canvas .datasheet { max-width: none; }
  .project-canvas .datasheet.with-drawing { text-align: left; max-width: none; }
  .project-canvas .drawing { margin: 20px 0 0 0; width: 100%; }
  .project-canvas .drawing img { width: 100%; height: auto; }

  #main-content h2, #main-content h3, #main-content h4, #main-content h5, #main-content h6 { text-align: left; }

  .swiper-container img { width: 100%; height: auto; }
  #project-swiper .swiper-pagination { bottom:25%; }

  .landing .six-pack { display: block; height: 100px; width: 100px; top: 20px; right: 6%; }
  .small-header .landing .six-pack { top: 172px; }

  #contact-form .only-mobile { display: block; }

  #mobile-hamburger { display: block; }

  #landing-news { position: relative; left: auto; bottom: auto; -webkit-transform: initial; transform: initial; font-size: 1.4em; }
  #landing-news .landing-news-button { display: none; }

  #landing-news .only-mobile h2 { margin-bottom: 0; font-size: 1rem; }
  #landing-news .news-item:last-of-type a { margin-bottom: 0; }
  #landing-news .news-item p { text-align: left; }

  #landing-news .news-list { height: auto; display: block; visibility: visible}
  #landing-news .news-item a { width: auto; height: auto; border: none; margin: 20px 30px 30px 30px; padding: 0; }
  #landing-news .news-item a::after { content: ''; display: block; width: 60%; height: 4px; background: #000000; margin: 20px auto 0 auto; }
  #landing-news .news-item .category { display: none; }
  #landing-news .news-item img { width: 100%; height: auto; }

  #landing-news .news-item.sixpack-news-item svg { height: 127px; }

  #landing-news .news-item .link-arrow { display: none; }

  #jobs-accordion h3 { padding: 14px 50px 14px 20px; }

  section.content .halbe-breite {
    max-width: 100%;
  }

  .drawing-container .halbe-breite { width: 50%; }

  /* BLOG */
  .blog #meta-navigation, .blog #main-navigation { display: block; }
  .blog #meta-navigation { display: block; font-size: 0.6em; right: auto; top: auto; position: relative; }
  .blog #main-navigation { margin: 10px 0 10px 0; }

  #header.blog { padding-bottom: 0; }
  /* #header.blog section.header { height: 322px; } */
  #header h1 { bottom: -14px; }
  #header .logo-six-pack .logo { height: 165px; }
  .small.blog .logo-six-pack, .logo-six-pack { -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); top: 10px; }

  #main-content article.sixpack-item { padding: 40px 40px 50px 40px; }
  .sixpack-editorial { padding: 0.2em 40px; }
  #main-content article.sixpack-item h2 { letter-spacing: .15em; font-size: 2.0em; }

  #blog-nav ul { padding: 40px 0; }
  #blog-nav li { margin: 6px 6px; }
  .sixpack-item .content-left { float:none; width: auto; text-align: left; padding: 0; }
  .sixpack-item .content-left .text-right { text-align: left; }

  #main-content article.sixpack-item h3 { letter-spacing: 0.15em; }

  .sixpack-item .content-right { float: none; width: auto; padding: 0; }
  .blog-to-top { right: 20px; }

  #sixpack-list a { width: 100%; padding: 0 0 100% 0; }
  /* BLOG END */

  .impressum-tabelle .decode-phone { color: #EA0000; }

  #footer .right .xing-logo {
    height: 20px;
  }

  .no-mobile { display: none; }

  .small-header #to-top { opacity: 1; }
  #piwikframe { height: 250px; }
}

/* Kleine Tablets */
@media (max-width: 860px) {
  .canvas { width: 94%; }
  #blog-nav, .blog.canvas, #header.blog .canvas, .sixpack-editorial.canvas { width: auto; }
  section.content { width: 100%; }
  #jobs-accordion .content { width: 80%; }
  #main-content h1 { min-height: initial; padding: 0; letter-spacing: .1em; }
  #footer .right { float: none; width: auto; }
  .sixpack-item .abstand-desktop { display: none; }

  #breadcrumb-navigation, .referenzen-canvas { padding-left: 0; }
  #footer .right { width: auto; }

  #main-content h1, #main-content h2, #main-content h3, #main-content h4, #main-content h5, #main-content h6 { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

  .project-overview-list li { width: 50%; }
  #project-list.filter-open .project-overview-list li { width: 50%; }
}
/* TABLET */
@media (min-width: 767px) and (max-width: 1024px) {
  .canvas { width: 90%; }
  #main-content h1 { min-height: 98px; padding: 0px 100px; }
  /* #header.landing { height: 208px; } */
  /* #header.landing.cknt { height: 267px; } */
  .six-pack { height: 90px; width: 90px; }

  /* #header { height: 250px; } */

  #project-overview-list ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

  #sixpack-list a { width: 50%; padding: 0 0 50% 0; }

  #project-filter { width: 33%; }
  #project-list.filter-open { width: 67%; }
  #footer .right { width: auto; }

  #search-canvas { display: block; text-align: right; margin-top: 5px; }
}
/* DESKTOP */
@media (min-width: 1025px) {
  .canvas { width: 856px; }

  /* #header { height: 250px; } */
  /* #header.cknt { height: 309px; }
  #header.cknt.blog { height: auto; } */
  /* #header.landing { height: 208px; } */
  /* #header.landing.cknt { height: 267px; } */

  #breadcrumb-navigation, .referenzen-canvas { padding-left: 70px; }

  #sixpack-list a { width: 33%; padding: 0 0 33% 0; }

  #project-filter { width: 26%; }
  #project-list.filter-open { width: 74%; }
  #footer .right { width: 60%; }
}
@media (min-width: 1120px) {
  .canvas { width: 1100px; }
  #breadcrumb-navigation, .referenzen-canvas { padding-left: 100px; }
  #project-filter { width: 22%; }
  #project-list.filter-open { width: 78%; }
  #footer .right { width: 50%; }
}

/* FANCYBOX */
.fancybox-bg { background: #FFFFFF; }

/* ZOOMBY */
#zoomby { display: block; overflow: hidden; opacity: 0; position: fixed; width: 0%; height: 0%; top:50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 1000; -webkit-transition: opacity 0.3s 0.3s ease-in, width 0.3s 0.3s ease-in, height 0.3s 0.3s ease-in; transition: opacity 0.3s 0.3s ease-in, width 0.3s 0.3s ease-in, height 0.3s 0.3s ease-in; }
#zoomby.open { display: block; opacity: 1; width: 100%; height: 100%; -webkit-transition: opacity 0s 0.3s ease-out, width 0s 0.3s ease-out, height 0s 0.3s ease-out; transition: opacity 0s 0.3s ease-out, width 0s 0.3s ease-out, height 0s 0.3s ease-out; }
.zoomby-overlay { position: absolute; top:0; left:0; bottom:0; right:0; background: rgba(255,255,255,0); -webkit-transition: background 0s 0.3s ease-in; transition: background 0s 0.3s ease-in; }
.open .zoomby-overlay { background: rgba(255,255,255,0.7); -webkit-transition: background 0.3s 0.3s ease-out; transition: background 0.3s 0.3s ease-out; }
.zoomby-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); border: 4px solid #EA0000; background: #FFFFFF; width: 60%; padding-bottom: 56.25%; overflow: hidden; }
.zoomby-content .zoomby-image-container { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); cursor: all-scroll; }
.zoomby-content img { position: relative; min-width: 100%; min-height: 100%; width: auto; height: auto; display: block; }

.zoomby-controls { position: absolute; right: 10px; bottom: 10px; }
.zoomby-plus, .zoomby-minus { display: block; width: 30px; height: 30px; margin: 10px; cursor: pointer; background: transparent center center no-repeat; background-size: 16px;  }
.zoomby-plus { background-image: url("../img/icon-plus-black.svg"); }
.zoomby-plus:hover { background-image: url("../img/icon-plus-red.svg"); }
.zoomby-minus { background-image: url("../img/icon-minus-black.svg"); }
.zoomby-minus:hover { background-image: url("../img/icon-minus-red.svg"); }

@media (max-width: 766px) {
  .zoomby-content { width: 80%; height: 80%; }
}

@media (max-width: 450px) {
  #presse-accordion .drawing-container .halbe-breite { width: 100%; max-width: 100%; }
}

@media (max-width: 900px) {
  .stoerer-text { display: none; }
}

.alfidcl_text a {text-decoration: underline;}