/* === XS === */

header.container-header,
header.container-header .container-header-top,
header.container-header .header-top {
	height: 120px;

}

header.container-header .container-header-top.affix,
header.container-header .affix .header-top {
	height:           48px;
	background-color: #fff;

}

header.container-header {
	width:    100%;
	margin:   0 auto;
	position: absolute;
	z-index:  2;
	top:      0;
}

header.container-header .container-header-top {
	position:           absolute;
	top:                -120px;
	width:              100%;
	margin:             0 auto;
	padding:            0;

	-webkit-transform:  translateY(100%);
	-moz-transform:     translateY(100%);
	-ms-transform:      translateY(100%);
	-o-transform:       translateY(100%);
	transform:          translateY(100%);

	-webkit-transition: top 0.5s ease;
	-moz-transition:    top 0.5s ease;
	-ms-transition:     top 0.5s ease;
	-o-transition:      top 0.5s ease;
	transition:         top 0.5s ease;

	z-index:            11;
}

header.container-header .container-header-top.affix {
	position:          fixed;
	top:               0;
	left:              50%;

	-webkit-transform: translateX(-50%);
	-moz-transform:    translateX(-50%);
	-ms-transform:     translateX(-50%);
	-o-transform:      translateX(-50%);
	transform:         translateX(-50%);
}

.container-canvas a#logo {
	position: absolute;
	top:      0;
	width:    154px;
	z-index:  9;
}

.container-canvas .affix a#logo {
	z-index: 1;
}

.container-canvas .container-header-top.affix a#logo {
	width: 87px;
}

.container-canvas a#logo::before {
	content: url(../img/logo.svg);
}

.container-canvas .container-header-top.affix a#logo::before {
	content:  url(../img/logo-mobile.svg);
	left:     -2px;
	position: relative;
}

.container-canvas a#logo span {
	display:    block;
	position:   absolute;
	visibility: hidden;
	opacity:    0;
	width:      0;
	height:     0;
}

/* --- Menü-Label --- */

header.container-header #menuToggle + label {
	position:      absolute;
	display:       block;
	top:           36px;
	right:         14px;
	width:         24px;
	height:        15px;
	margin:        -8px 0 0;
	cursor:        pointer;
	z-index:       1;
	border-top:    9px double #014;
	border-bottom: 3px solid #014;
}

.header-top > label::before {
	content:  '';
	position: absolute;
	top:      -2rem;
	left:     -1rem;
	width:    47px;
	height:   44px;
}

header.container-header .affix #menuToggle + label {
	top:   25px;
	right: 14px;
}

header.container-header #menuToggle + label span {
	display:        none;
	color:          #014;
	width:          100px;
	position:       absolute;
	top:            -12px;
	left:           40px;
	text-transform: uppercase;
	font-size:      0.8rem;
	letter-spacing: 0.02rem;
}

/* --- Navigation --- */

header.container-header #navigation-top {
	position:           absolute;
	display:            inline;
	top:                0 !important;
	opacity:            1 !important;
	right:              48px !important;
	padding:            0;
	z-index:            1 !important;
	font-size:          1rem;
	line-height:        1.5;
	margin-left:        0;
	vertical-align:     middle;

	-webkit-transition: margin-left 0.5s ease;
	-moz-transition:    margin-left 0.5s ease;
	-ms-transition:     margin-left 0.5s ease;
	-o-transition:      margin-left 0.5s ease;
	transition:         margin-left 0.5s ease;
}

div.hotline, div.hotline > div {
	display:     inline-block;
	padding:     0 7px;
	font-size:   1rem;
	font-weight: 100;
	color:       #8d0;
}

div.hotline > div.label {
	font-size:      0;
	vertical-align: super;
}

div.hotline .number::before {
	content:          '';
	position:         relative;
	display:          inline-block;
	top:              -2px;
	width:            1.5rem;
	height:           1.5rem;
	margin-right:     0.5em;
	background-image: url(../img/icon-phone.svg);
	background-size:  100% 100%;
	vertical-align:   middle;
}

div.hotline .number {
	text-decoration: none !important;
	border-bottom:   none;
}

div.hotline .number:hover,
div.hotline .number:focus,
div.hotline .number:active {
	text-decoration: underline !important;
}

header.container-header #navigation-top ul {
	display:    inline-block;
	padding:    0;
	text-align: right;
	font-size:  1rem;
	box-shadow: none;
}

header.container-header #navigation-top ul li {
	display: inline-block;
	margin:  0;
	padding: 16px 12px;
}

header.container-header #navigation-top ul li a {
	display: block;
	padding: 0;
}

header.container-header #navigation-top ul li a span {
	display:   block;
	padding:   0;
	font-size: 0.9rem;
}

header.container-header #navigation-top li.icon {
	vertical-align: middle;
	margin-top: -4px;
	padding-left: 0;
	padding-right: 0;
}

header.container-header #navigation-top li.icon__facebook {
	padding-left: 12px;
}

header.container-header #navigation-top li.icon a {
	line-height: 1 !important;
}

header.container-header #navigation-top li.icon a span {
	display: none !important;
}

header.container-header #navigation-top li.icon a::before {
	content:     '';
	width: 1em;
	height: 1em;
	font-family: "AK-Font bold", sans-serif;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	color: #fff;
	background-color: #014;
	background-image: url(../img/facebook.svg);
	background-size: 100% 100%;
	font-size: 1.5rem !important;
	line-height: 1 !important;
	margin: 0 .125rem;
	-webkit-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
	padding: 1px 0 0 1px;
}

header.container-header #navigation-top li.icon a:hover::before,
header.container-header #navigation-top li.icon a:active::before,
header.container-header #navigation-top li.icon a:focus::before {
	background-color: #8d0;
}

header.container-header #navigation-top li.icon__instagram a::before {
	background-image: url(../img/instagram.svg);
}

header.container-header #navigation-top li.icon__linkedin a::before {
	background-image: url(../img/linkedin.svg);
}

header.container-header #navigation-top li.icon__xing a::before {
	background-image: url(../img/xing.svg);
}

header.container-header #navigation-top li.icon__youtube a::before {
	background-image: url(../img/youtube.svg);
}

header.container-header #navigation-main {
	position:   absolute;
	bottom:     13px;
	width:      100%;
	text-align: center;
}

header.container-header #navigation-main ul {
	display:         block;
	height:          auto;
	list-style-type: none;
	margin:          0;
	padding:         0;
}

header.container-header #navigation-main > ul > li {
	display:  inline-block;
	position: relative;
}

header.container-header #navigation-main > ul > li > a {
	font-family:    'FagoWebBold', sans-serif;
	font-size:      1.25rem;
	text-transform: uppercase;
	padding:        8px 12px;
	border-bottom:  8px solid transparent;
	letter-spacing: 1px;
}

header.container-header #navigation-main > ul > li.current-menu-item > a,
header.container-header #navigation-main > ul > li.current_page_item > a {
	border-bottom: 8px solid #8d0;
}

#navigation-main li ul.sub-menu {
	display:         none;
	position:        absolute;
	box-sizing:      border-box;
	left:            0;
	margin:          13px auto;
	padding:         32px 15px 72px;
	list-style-type: none;
	z-index:         5;
	text-align:      left;
	width:           300px;
	min-height:      264px;
}

#navigation-main li ul.sub-menu::before {
	content:           '';
	/*background-color:  rgba(0, 17, 68, 0.96);*/
	background-color:  rgba(242, 242, 242, 0.9);
	position:          absolute;
	z-index:           -1;
	top:               -1px;
	width:             200vw;
	height:            100%;
	left:              50%;

	-webkit-transform: translateX(-50%);
	-moz-transform:    translateX(-50%);
	-ms-transform:     translateX(-50%);
	-o-transform:      translateX(-50%);
	transform:         translateX(-50%);
}

#navigation-main li ul.sub-menu li a {
	/*color:   rgba(255, 255, 255, 0.6);*/
	color:   rgba(0, 17, 68, 0.6);
	display: block;
	height:  32px;
}

#navigation-main li ul.sub-menu li:hover a {
	/*color: rgba(255, 255, 255, 1);*/
	color: rgba(0, 17, 68, 1);
}

#navigation-mobile .submenu-toggle {
	display: none;
}

#navigation-mobile  .submenu-toggle + label {
	position: absolute;
	display: block;
	top: 10px;
	/*-webkit-transform: translateY(-50%);*/
	/*-moz-transform:    translateY(-50%);*/
	/*-ms-transform:     translateY(-50%);*/
	/*-o-transform:      translateY(-50%);*/
	/*transform:         translateY(-50%);*/
	right: 18px;
	width: 40px;
	height: 2rem;
	cursor: pointer;
	z-index: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#navigation-mobile .submenu-toggle + label::before {
	display: block;
	content: '\e926';
	font-family: 'AK-Font thin', sans-serif;
	right: 0;
	padding: 0;
	margin: -2px 0 0 0;
	font-size: 40px;
	line-height: 1;
	position: absolute;
	top: 50%;
	-moz-transform: translateY(-50%) rotate(0deg);
	-o-transform: translateY(-50%) rotate(0deg);
	-ms-transform: translateY(-50%) rotate(0deg);
	-webkit-transform: translateY(-50%) rotate(0deg);
	transform: translateY(-50%) rotate(0deg);
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transition: 0.7s ease;
	-moz-transition: 0.7s ease;
	-o-transition: 0.7s ease;
	transition: 0.7s ease;
}

#navigation-mobile .submenu-toggle:checked + label::before {
	transform: rotate(180deg);
	top: 0px;
  }

#navigation-mobile .submenu-toggle:checked ~ ul.sub-menu {
	display: block;
	max-height: 50vh;
	-webkit-transition: max-height 1.2s ease;
	-moz-transition: max-height 1.2s ease;
	-o-transition: max-height 1.2s ease;
	transition: max-height 1.2s ease;

}

#navigation-mobile .socialmedia-wrapper {
	padding: 15px 24px 15px 10px;
}

#navigation-mobile .socialmedia-wrapper > a,
#navigation-mobile .socialmedia-wrapper label {
	display: none !important;
}
#navigation-mobile .socialmedia-wrapper > ul {
	display: block;
}

#navigation-mobile .socialmedia-wrapper > ul {
	display:    inline-block;
	padding:    0;
	text-align: right;
	font-size:  1rem;
	box-shadow: none;
}

#navigation-mobile .socialmedia-wrapper > ul li {
	display: inline-block;
	margin:  0;
	padding: 16px 12px;
}

#navigation-mobile .socialmedia-wrapper > ul li a {
	display: block;
	padding: 0;
}

#navigation-mobile .socialmedia-wrapper > ul li a span {
	display:   block;
	padding:   0;
	font-size: 0.9rem;
}

#navigation-mobile .socialmedia-wrapper > ul li.icon {
	border-top: 0;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

#navigation-mobile .socialmedia-wrapper > ul li.icon__facebook {
	padding-left: 12px;
}

#navigation-mobile .socialmedia-wrapper > ul li.icon a {
	line-height: 1 !important;
	height: auto;
}

#navigation-mobile .socialmedia-wrapper > ul li.icon a span {
	display: none !important;
}

#navigation-mobile .socialmedia-wrapper > ul li.icon a::before {
	content:     '';
	width: 1em;
	height: 1em;
	font-family: "AK-Font bold", sans-serif;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	color: #fff;
	background-color: #014;
	background-image: url(../img/facebook.svg);
	background-size: 100% 100%;
	font-size: 1.5rem !important;
	line-height: 1 !important;
	margin: 0 .125rem;
	-webkit-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
	padding: 1px 0 0 1px;
}

#navigation-mobile .socialmedia-wrapper > ul li.icon a:hover::before,
#navigation-mobile .socialmedia-wrapper > ul li.icon a:active::before,
#navigation-mobile .socialmedia-wrapper > ul li.icon a:focus::before {
	background-color: #8d0 !important;
}

#navigation-mobile .socialmedia-wrapper > ul li.icon__instagram a::before {
	background-image: url(../img/instagram.svg);
}

#navigation-mobile .socialmedia-wrapper > ul li.icon__linkedin a::before {
	background-image: url(../img/linkedin.svg);
}

#navigation-mobile .socialmedia-wrapper > ul li.icon__xing a::before {
	background-image: url(../img/xing.svg);
}

#navigation-mobile .socialmedia-wrapper > ul li.icon__youtube a::before {
	background-image: url(../img/youtube.svg);
}

/*------*/

div.contact-cta {
	position: absolute;
	bottom:   0;
	right:    0;
	height:   48px;
	z-index:  0;
}

div.contact-cta.active {
	z-index: 11;
}

#navigation-top,
#navigation-main /*, .header-top.mobile-open ~ .contact-cta */{
	display: none !important;
}

.container-header-top.affix .contact-cta {
	display: block !important;
}

/* --- Navigation Mobile --- */

#navigation-mobile {
	display:            none;
	margin-top:         120px;
	-webkit-box-shadow: 0 9px 9px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:    0 9px 9px rgba(0, 0, 0, 0.2);
	box-shadow:         0 9px 9px rgba(0, 0, 0, 0.2);
}

.container-header-top.affix #navigation-mobile {
	margin-top: 48px;
}

.header-top.mobile-open #navigation-mobile {
	display:          block;
	left:             0;
	width:            100vw;
	background-color: #fff;
	z-index:          11;
	position:         relative;
}

#navigation-mobile ul,
#navigation-mobile li {
	display:         block;
	height:          auto;
	list-style-type: none;
	margin:          0;
	padding:         0;
}

#navigation-mobile li {
	position: relative;
	border-top: 1px solid #e9e9e9;
}

#navigation-mobile > ul > li:last-of-type {
	border-bottom: 1px solid #e9e9e9;
}

#navigation-mobile li > ul {
	display: none;
}

#navigation-mobile a {
	display: block;
	height:  48px;
	padding: 13px 24px;
}

#navigation-mobile > ul > li:first-of-type > a:after {
	content:   '0341 4429566';
	position:  absolute;
	right:     24px;
	font-size: 1.2rem;
}

#navigation-mobile > ul > li.menu-item-has-children > a,
#navigation-mobile > ul > li.bold > a {
	text-transform: uppercase;
	font-family:    'FagoWebBold', sans-serif;
	font-size:      1.2rem;
	letter-spacing: 0.03rem;
}

/* --- CTA --- */

.container-header-top div.contact-cta {
	bottom: auto;
	top:    14px;
}

.container-header-top.affix div.contact-cta {
	top: 6px;
}

div.contact-cta > a {
	position:       relative;
	display:        inline-block;
	padding-right:  3rem;
	line-height:    2.75rem;
	font-size:      1.25rem;
	color:          #8d0;
	font-weight:    bold;
	text-transform: uppercase;
	-webkit-transition: font-size 0.5s ease;
	-moz-transition:    font-size 0.5s ease;
	-ms-transition:     font-size 0.5s ease;
	-o-transition:      font-size 0.5s ease;
	transition:         font-size 0.5s ease;
	/*z-index:        -1;*/
}

@media screen and (max-width: 850px) {
	div.contact-cta > a {
		font-size: 0 !important;
	}
}

.affix div.contact-cta > a {
	font-size: 0 !important;
}

.contact-cta > a::before {
	content:          '';
	position: relative;
	top: -1px;
	display:          inline-block;
	width:            28px;
	height:           28px;
	vertical-align:   middle;
	background-image: url(../img/icon-mail.svg);
	background-size:  100% 100%;
	margin-right:     0.5rem;
}

.hotline-cta {
	position: absolute;
	bottom: 11px;
	right: 5.75rem;
	opacity: 0;
	-webkit-transition: opacity 0.5s ease;
	-moz-transition:    opacity 0.5s ease;
	-ms-transition:     opacity 0.5s ease;
	-o-transition:      opacity 0.5s ease;
	transition:         opacity 0.5s ease;
}

@media screen and (max-width: 799px) {
	.hotline-cta {
		opacity: 1;
		bottom: auto;
		top: 20px;
	}
	.affix .hotline-cta {
		bottom: 11px;
		top: auto;
	}
}

.affix .hotline-cta {
	opacity: 1;
}

.hotline-cta .number {
	font-size: 0 !important;
}

.contact-form {
	position:         absolute;
	display:          none;
	width:            100vw;
	min-height:       500px;
	background-color: #ececec;
	right:            0;
	top:              -9px;
}

.affix .contact-form {
	top: -2px;
}

.contact-form::before {
	content:          '';
	position:         fixed;
	display:          block;
	background-color: rgba(0, 0, 0, 0.3);
	width:            100vw;
	height:           100vh;
	top:              0;
	left:             0;
	z-index:          -1;
}

.container-header-top.affix .contact-form::before {
	top: 0;
}

.contact-form > a.quit {
	position:   absolute;
	display:    block;
	top:        0;
	right:      0;
	width:      48px;
	height:     48px;
	background: url(../img/icon-x.svg);
}

.contact-form .contact-title {
	padding: 32px 24px 12px 24px;
}

.contact-form .contact-content {
	padding: 0 50px 12px 24px;
}

.contact-form .contact-content p {
	margin-top: 1.5rem;
}

.contact-form .contact-link {
	padding: 0 50px 12px 24px;
}

.contact-form form {
	padding:    0 24px;
	margin-top: 24px;
}

.contact-form form p {
	margin: 3px 0;
}

.contact-form form p label {
	font-family:   'FagoWebBold', sans-serif;
	display:       inline-flex;
	width:         100%;
	margin-bottom: 0;
	font-weight:   100;
	position:      relative;
	height:        36px;
	line-height:   2.5rem;
	font-size:     0.95rem;
}

.contact-form form p span {
	position:    absolute;
	top:         0;
	margin:      0 20px 0 100px;
	line-height: 0;
}

.contact-form form p input:not(.wpcf7-submit),
.contact-form form p select {
	font-family:      'FagoWeb', sans-serif;
	height:           36px;
	width:            100%;
	padding:          0 10px;
	margin-bottom:    3px;
	border:           1px solid #d1d1d1;
	background-color: #fff;
	font-size:        1rem !important;
}

.contact-form form p select {
	width:               calc(100vw - 168px);
	background:          url(../img/selector.jpg) no-repeat;
	background-position: right;
	-webkit-appearance:  none;
	-moz-appearance:     none;
	appearance:          none;
	background-color:    #fff;
	line-height:         2.3;
}

.contact-form form p input.wpcf7-submit {
	font-family:    'FagoWeb', sans-serif;
	height:         60px;
	width:          calc(100vw - 68px);
	padding:        0 10px;
	margin-top:     20px;
	color:          #fff;
	font-size:      1.2rem !important;
	text-transform: lowercase;
}

/* === SM === */

@media screen and (min-width: 500px) {

	.contact-form {
		width:      500px;
		min-height: 500px;
		right:      0;
		top:        48px;
	}

	.affix .contact-form {
		top: 48px;
	}

	.contact-form form p span {
		display: block;
		margin:  0 60px 0 100px;
	}

	.contact-form form p select {
		width: 292px;
	}

	.contact-form form p input.wpcf7-submit {
		width: 290px;
	}

}

/* === MD === */

@media screen and (min-width: 800px) {

	.container-canvas a#logo::before {
		content: url(../img/logo-tablet.svg);
		width:   185px;
	}

	.header-top:not(.mobile-open) #navigation-top,
	.header-top:not(.mobile-open) #navigation-main {
		display: block !important;
	}

	header.container-header,
	header.container-header .container-header-top,
	header.container-header .header-top {
		height: 192px;
	}

	header.container-header .container-header-top {
		top: -192px;
	}

	.hotline-cta {
		bottom: 10px;
		right: 5rem;
	}

	header.container-header #menuToggle + label,
	#navigation-top .hotline .label,
	.container-header-top.affix #navigation-top {
		display: none !important;
	}

	.container-canvas a#logo {
		width: 185px;
	}

	.container-header-top div.contact-cta {
		bottom: 0;
		top:    auto;
	}

	.container-header-top.affix div.contact-cta {
		top:    auto;
		bottom: -2px;
	}

	div.contact-cta > a {
		padding-right: 2rem;
	}

	.submenu-toggle,
	.submenu-label{
		display: none;
	}

}

/* === LG === */

@media screen and (min-width: 1100px) {

	header.container-header,
	header.container-header .container-header-top,
	header.container-header .header-top {
		height: 144px;
	}

	header.container-header .container-header-top {
		top: -144px;
	}

	header.container-header .container-header-top.affix,
	header.container-header .affix .header-top {
		height:           50px;
		background-color: #fff;
	}

	header.container-header #navigation-top {
		width: auto !important;
	}

	header.container-header .affix #navigation-top {
		display: none;
	}

	header.container-header #navigation-main > ul > li > a {
		font-size: 1.15rem;
		cursor:    pointer;
	}

	header.container-header #navigation-main li > ul.submenu li a {
		font-size: 0.9rem;
		height:    32px;
		display:   block;
	}

	.container-canvas a#logo {
		width: 185px;
	}

	.container-canvas a#logo::before {
		content: url(../img/logo.svg);
		width:   185px;
	}

	.container-canvas .affix a#logo {
		width:  302px;
		height: 50px;
	}

	.container-canvas .affix a#logo::before {
		content:  url(../img/logo-small.svg);
		width:    302px;
		position: relative;
		left:     -5px;
	}

	.container-canvas .affix div.contact-cta {
		height: 48px;
	}

	/*.container-canvas .affix .contact-cta > a::before {
		height: 50px;
	}*/
	#navigation-top .hotline .label {
		display: inline-block !important;
	}

}

@media screen and (min-width: 1200px) {

}

.slug-home-3 .company-group,
.slug-home-3 .company-group + h1 {
	display: none !important;
}