@import "fonts.css";

/* Font Styles */
h1, h2, h3, h4, .heading {
	text-transform: uppercase;
}
body, .fließtext {
	font-size: 18px; 
}

.big-heading .sppb-addon-content {
	container-type: inline-size;
}
.big-heading h1 {
	font-size: max(7.7cqw, 30px);
}
span.avoid-wrap {
	display:inline-block;
}


/* Header Menü */
.burger-icon>span, .offcanvas-active .burger-icon>span, #modal-menu-toggler.active .burger-icon>span {
	background-color: #ffffff;
}
#modal-menu-toggler:not(.active) .burger-icon, #offcanvas-toggler:not(.active) .burger-icon {
	transform: rotate(-25deg);
}
#modal-menu-toggler .burger-icon, #offcanvas-toggler .burger-icon {
	transition: background-color .3s ease-in, opacity .3s ease-in, transform .3s ease-in;
}
#modal-menu-toggler, #offcanvas-toggler {
	overflow: hidden;
	border: #000000;
	border-width: 3px;
	border-style: solid;
	box-shadow: 0 0 0 2px #f9b234;
}
.burger-icon>span {
	height: 5px;
	width: 55px;
	margin-left: -10px;
}
.burger-icon {
	width: 35px;
}
#modal-menu-toggler.active .burger-icon>span:nth-child(3), #offcanvas-toggler.active .burger-icon>span:nth-child(3) {
	transform: translate(0, -10px) rotate(45deg);
}
.offcanvas-active .burger-icon>span:nth-child(1), #modal-menu-toggler.active .burger-icon>span:nth-child(1) {
	transform: translate(0, 10px) rotate(-45deg);
}
#sp-header.header-with-modal-menu #offcanvas-toggler {
	height: auto;
	display: none !important;
}
#modal-menu-toggler {
	display: block !important;
}
#sp-logo .sp-column {
	flex-direction: row-reverse;
}
#sp-header .row.align-items-center.justify-content-between {
	flex-direction: row-reverse;
	container-type: inline-size;
}
@media (min-width: 577px) {
	#sp-logo {
		width: calc(50cqi + 100px);
	}  
}
@media (max-width: 575px) {
	#sp-header .logo {
		height: 80px;
	}
}

#sp-logo .sp-column {
	width: 100%;
	justify-content: space-between;
}


/* Header Kontakt Socials*/
.sp-module.header-contact-socials {
	font-size: smaller;
}
@media (max-width: 575px) {
	.sp-module.header-contact-socials {
	display: none;
	}
}
.sp-module.header-contact-socials i {
	margin: 0 15px 0 15px;
}
#sp-header.header-with-modal-menu .sp-contact-info>li {
	opacity: 1;
	color: #f9b234;
	margin-bottom: 0px;
}


/* Modal Menu */
#modal-menu .modal-menu-inner {
	background-image: url("/images/fotos/Aussenanlagen_Option1.jpg");
	background-size: cover;
}
#modal-menu .modal-menu-inner>.container {
	background-color: #ffc600ba;
	padding: 70px;
	margin: 0;
	max-width: none;
}
#modal-menu {
	height: 0;
}
#modal-menu.active {
	height: calc(100vh - 80px);
}
#modal-menu .modules-wrapper .sp-contact-info>li>a {
	opacity: 0.9;
}
#sp-header.header-with-modal-menu a {
	color: rgba(249, 178, 52, .9);
}

#modal-menu .sp-megamenu-parent>li:hover>a, #modal-menu .sp-megamenu-parent>li:hover>span, #modal-menu .sp-megamenu-parent>li.active>a, #modal-menu .sp-megamenu-parent>li.active>span {
	color: #000;
	font-size: max(2.5vw, 20px);
	font-family: 'Field Gothic No.75 Bold Wide';
}
#modal-menu ul.sp-megamenu-parent>li>a, #modal-menu ul.sp-megamenu-parent>li>span {
	color: #000;
	font-size: max(2.5vw, 20px);
	font-family: 'Field Gothic No.75 Bold Wide';
	text-shadow: none;
}
#sp-header.header-with-modal-menu .sp-contact-info>li {
	opacity: 1;
	color: #000000;
	margin-bottom: 0px;
	font-size: max(1.5vw, 12px);
	text-shadow: none;
}
#sp-header.header-with-modal-menu a {
	color: rgb(0 0 0 / 90%);
	font-family: 'Field Gothic No.75 Bold Wide';
}
#modal-menu span.fas.fa-phone {
	font-size: max(1.5vw, 12px) !important;
}
#modal-menu span.far.fa-envelope {
	font-size: max(1.5vw, 12px) !important;
}
#modal-menu ul.social-icons {
	font-size: max(1.5vw, 12px) !important;
	text-shadow: none;
}

/* Suchfeld deaktivieren */
#modal-menu .modules-wrapper.header-modules .sp-module {
	display: none;
}


/* Startseite Header */
#start-header {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25vw), 0 100%);
	height: calc(130vh - 120px);
	font-size: max(3.5vw, 30px);
	text-shadow: 1px 1px 3px black;
}
#start-header p {
	margin-bottom: 185px;
}
@supports (-webkit-touch-callout: none) {
	#start-header {
		background-attachment: scroll !important;
	}
}

.diagonal-bottom {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25vw), 0 100%);
	height: 90vh;
	margin-top: -80vh;
}
.z2 {
	z-index: 2 !important;
}
.z3 {
	z-index: 3 !important;
}
.z4 {
	z-index: 4 !important;
}
.z5 {
	z-index: 5 !important;
}


/* Kategorien MACH / BAU */
#kategorien-mach h1 {
	font-size: 21vw;
	font-family: 'Field Gothic No.84 Demi XWide';
}
#kategorien-bau h1 {
	font-size: 21vw;
	font-family: 'Field Gothic No.73 Med Wide';
}
#kategorien-mach {
	margin-top: -18vw;
}

/* Kategorien Kacheln */
#kategorien .image-effect-zoom-in .overlay-image-title::before {
	border: none;
}
#kategorien .sppb-addon-overlay-image-content {
	text-shadow: 1px 1px 3px white;
}
#kategorien .sppb-addon-text-block .sppb-addon-content {
	container-type: inline-size;
}
/* Responsive Font Sizes */
.cqi-7 h2 {
	font-size: 7cqi;
}
.cqi-8 h2 {
	font-size: 8cqi;
}
.cqi-9 h2 {
	font-size: 9cqi;
}
.cqi-10 h2 {
	font-size: 10cqi;
}
.cqi-14 h2 {
	font-size: 14cqi;
}


/* Aktuelle Projekte */
#aktuelle-projekte {
	margin-top: -3.5vw;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25vw), 0 100%);
	padding-bottom: 250px;
}
#aktuelle-projekte .addon-root-empty-space {
	width: 200vw;
	margin-left: -50%;
}
#aktuelle-projekte .sppb-addon-single-image {
	clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
	background-color: #ffc600;
}
#aktuelle-projekte .sppb-addon-single-image img {
	clip-path: polygon(0 0, 100% 0, 100% 76%, 0 96%);
}


/* Warum Machbau? */
#warum-machbau {
	margin-top: -50vh;
	padding-top: calc(50vh - 20vw - 75px);
	padding-right: 25px;
}
#warum-machbau .big-heading h1 {
	font-size: 8vw;
	line-height: 100%;
}
#warum-machbau .big-heading h1 .fragezeichen {
	font-size: 26vw;
	padding-right: 8vw;
}
#warum-machbau .big-heading h1 .warum {
	font-size: 11.5vw;
}

#warum-machbau-content {
	padding-top: 70vw;
	margin-top: -70vw;
}
#warum-machbau-content .sppb-addon-text-block {
	padding: 25px 15px 50px 15px;
}
#warum-machbau-content .sppb-addon-text-block img {
	margin: auto;
}

#warum-machbau-content .addon-root-text-block {
	clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
	background-color: #ffffff;
	max-width: 300px;
	margin: 25px auto 25px auto;
	container-type: inline-size;
}
#warum-machbau-content .addon-root-text-block .clearfix {
	background-color: #1e1e1e;
	clip-path: polygon(0 0, 100% 0, 100% 76%, 0 96%);
	max-width: 300px;
	margin: auto;
	font-size: 10cqw;
}


/* Über Uns */
#ueber-uns {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25vw), 0 100%);
}
#ueber-uns .addon-root-empty-space {
	width: 200vw;
	margin-left: -50%;
}
#ueber-uns .sppb-addon-text-block img {
	margin: 25px auto 40px auto;
}
#ueber-uns .sppb-addon-text-block h2 {
	color: #ffc600;
}


/* Team Carousel */
#ueber-uns .sppb-carousel-extended-item {
	margin: 0px 1vw 0px 1vw;
}
#ueber-uns .sppb-carousel-extended-item .sppb-carousel-extended-team-name {
	font-family: 'Field Gothic No.71 Light Wide';
	font-weight: 500;
	/* text-shadow: 0 60cqh black; */
}
#ueber-uns .sppb-carousel-extended-item .sppb-carousel-extended-team-designation {
	font-family: 'Field Gothic No.84 Demi XWide';
}
#ueber-uns .sppb-carousel-extended-nav-control .fa.fa-angle-right, #ueber-uns .sppb-carousel-extended-nav-control .fa.fa-angle-left {
	transform: scaleY(0.5);
}

#ueber-uns .sppb-carousel-extended-team-content-wrap {
	width: calc(100% + 40px);
}
#ueber-uns  .sppb-carousel-extended-team-social-icon li {
	margin-right: 0;
}
/* #ueber-uns .sppb-carousel-extended-team-content {
	container-type: size;
}
#ueber-uns .sppb-carousel-extended-item:hover .sppb-carousel-extended-team-name {
	text-shadow: 0 60cqh rgba(0, 0, 0, 0);
} */

/* Stellenanzeigen */
/* #stellenanzeigen .sppb-row.sppb-nested-row {
	transform: skewY(353deg);
} */
#stellenanzeigen h1 {
	font-size: max(5vw, 30px);
}
#stellenanzeigen .addon-root-modal {
	clip-path: polygon(0 0, 100% 0, 100% 55%, 0 100%);
	background-color: #ffffff;
	max-width: 300px;
	margin: 25px auto 25px auto;
	container-type: inline-size;
}
#stellenanzeigen .addon-root-modal .clearfix {
	background-color: #f9b234;
	clip-path: polygon(0 0, 100% 0, 100% 50%, 0 95%);
	max-width: 300px;
	margin: auto;
	font-size: 10cqw;
	transition: all .15s ease-in-out;
}
#stellenanzeigen .addon-root-modal .clearfix:hover {
	background-color: #ffc600;
}
#stellenanzeigen .addon-root-modal .sppb-btn {
	font-weight: 600;
	border: none;
	box-shadow: none;
}


/* Kontakt */
#kontakt {
	clip-path: polygon(0 25vw, 100% 0, 100% 100%, 0 100%);
	padding: 25vw 50px 0px 50px;
	margin-top: -25vw;
}
#kontakt .vertical-text {
	writing-mode: sideways-lr;
	float: right;
	margin-top: -20vw;
	padding-bottom: 25px;
	font-size: 5vw;
}
@supports not (writing-mode: sideways-lr) {
	#kontakt .vertical-text {
		writing-mode: vertical-lr;
		transform: rotate(180deg);
	}
}
@media (max-width: 767px) {
	#kontakt .vertical-text {
		margin-top: -40vw;
		font-size: 8.5vw;
	}
}
#kontakt .vertical-text p {
	margin: 0;
}
#kontakt a {
	color: black;
}
#kontakt a:hover {
	color: #1e1e1e;
}

#sppb-addon-b6c1f349-c665-4c64-8dd6-fbf08d8a7a51 .sppb-addon-header .sppb-addon-title {
    
    margin-bottom: 5vw !important;
  }