/*================   LAYOUT   =================*/
html { scroll-behavior: smooth; }

body {
	margin: 0;
	padding: 0;
	background-color: #ededed;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none; 
}

div, header, nav, footer, main, section, article, address { 
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}

header {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	height: 0;
	padding-bottom: 100vh;
	position: relative;
	overflow: hidden;
}
header:after { content: ""; clear: both; display: table; }

nav {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
}
nav:after { content: ""; clear: both; display: table; }

main {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
}
main:after { content: ""; clear: both; display: table; }

footer {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	background-color: #dedede;
	border-top: 1px solid #bdbdbd;
	overflow: hidden;
}
footer:after { content: ""; clear: both; display: table; }

footer section .mod-custom {
	margin: 150px auto 50px;
	padding: 0;
	width: 95%;
	max-width: 1600px;
	height: auto;	
	display: flex;
	justify-content: space-between;
}
footer section div.china { flex: 0 0 42%; }
footer section div.deutsch { flex: 0 0 42%; }
footer section address { font-style: normal; }
footer section div hr { border: 0; border-top: 1px solid #575756; margin: 30px 0; }
footer section div img { width: 380px; height: auto; }
footer section div .line { width: 430px; margin: 0; padding: 0; height: auto; display: flex; align-items: center; text-align: left; }
footer section div .line img { width: 50px; height: auto; float: left; margin: 0 25px 0 0; }
footer section div .line:nth-of-type(1) { align-items: start; }


/*================   SCHRIFTEN   =================*/
body { font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-size: 18px; color: #1d1d1b; }
p, li { line-height: 1.6em; }
img { border: 0; }
footer a { font-weight: bold; color: #575756; text-decoration: none; }
footer a:hover { text-decoration: underline; }
main a { font-weight: bold; color: #575756; }

h1 { font-size: 36px; font-weight: 800; margin: 0 0 10px; padding: 0; color: #575756; text-transform: uppercase; }
h2 { font-size: 28px; font-weight: 700; margin: 0 0 10px; padding: 0; color: #575756; }
h3 { font-size: 24px; font-weight: 700; margin: 10px 0 0; padding: 0; color: #878787; }
h4 { }
h5 { }
h6 { }

a.button { color: #fff; padding: 10px 20px; border: 1px solid #fff; transition: background-color 0.5s ease-in-out 0s, color 0.5s ease-in-out 0s; cursor: pointer; text-decoration: none; }
a.button:hover { color: #4c4c4c; background-color: #fff;  }
a.button.grau { color: #fff; padding: 10px 20px; background-color: #787878; text-decoration: none; transition: background-color 0.5s ease-in-out, border-color 0.5s ease-in-out; cursor: pointer; border: 1px solid #787878; font-weight: 400; display: inline-block; margin: 25px 0; }
a.button.grau:hover { background-color: #5a5a5a; border: 1px solid #fff;  }


/*================   NAVIGATION   =================*/
header ul.nav.mod-menu { margin: 0; padding: 0; list-style-type: none; } 
header ul.nav.mod-menu li { margin: 20px 50px; text-transform: uppercase; font-size: 36px; display: block; transition: 0.3s; } 
header ul.nav.mod-menu li a { color: #fff; text-decoration: none; font-weight: bold; } 
header ul.nav.mod-menu li a:hover { text-decoration: underline; } 
header ul.nav.mod-menu li.active a { text-decoration: underline; } 
 
header .overlay { height: 100%; width: 0; position: fixed; z-index: 10000; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); overflow-x: hidden; transition: 0.5s; }
header .overlay-content { position: relative; top: 15%; width: 100%; text-align: center; margin-top: 30px; }
header .overlay-content hr { border: 0; border-top: 1px solid #ededed; margin: 50px auto; width: 85%; }
header .overlay-content .line { width: 425px; margin: 0 auto; padding: 0; height: auto; display: flex; align-items: center; text-align: left; }
header .overlay-content .line:nth-of-type(1) { margin-top: 80px; align-items: start;  }
header .overlay-content .line img { width: 50px; height: auto; float: left; margin: 0 25px 0 0; }
header .overlay-content .line p { color: #fff; font-weight: normal; }
header .overlay-content .line:nth-of-type(1) p { margin-top: 0; }
header .overlay-content .line p a { color: #fff; font-weight: bold; text-decoration: none; }
header .overlay-content .line p a:hover { text-decoration: underline; }
header .overlay .closebtn { position: absolute; top: 80px; right: 100px; font-size: 60px; color: #fff; z-index: 10001; }
header .open { font-size: 48px; cursor: pointer; position: absolute; z-index: 1000; top: 100px; right: 100px; color: #fff; }

header .mod-languages { position: absolute; z-index: 1000; top: 180px; right: 75px; }
header .mod-languages .visually-hidden { display: none; }
header .mod-languages a { color: #fff; font-size: 20px; }
header .mod-languages a:hover { text-decoration: underline; }
header .mod-languages li { margin: 0.2rem; }
header .mod-languages li.lang-active a { color: #fff; text-decoration: underline; }
header .mod-languages ul li.lang-active { background: transparent; }

header .scroll-icon {
	position: absolute;
	bottom: 20px;
	right: 65px;
	width: 120px;
	font-size: 14px;
	color: #fff;
	opacity: 1;
	transition: opacity 0.3s ease;
	z-index: 9500;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	animation: bounce 1s infinite alternate;
}
header .scroll-icon img { width: 50%; height: auto; }
@keyframes bounce { 0% { transform: translateY(0); } 100% { transform: translateY(10px); }}


/*================   STARTSEITE   =================*/
header video {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	object-fit: cover;
}
header .mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #000; background-color: rgba(0, 0, 0, 0.6); z-index: 12; }
header .custom { width: 100%; }

header #intro.start {
	margin: 0 auto;
	padding: 0;
	height: auto;
	width: 95%;
	max-width: 1600px;
	position: relative;
	z-index: 15;
	position: absolute;
	bottom: 100px;
	left: 50%;
	transform: translateX(-50%);
}
header #intro.start h3.slogan { font-size: 34px; text-transform: uppercase; color: #fff; margin: 35px 0; }
header #intro.start p { color: #fff; margin: 35px 0; max-width: 950px; }
header .button { margin-right: 50px; }

section#firma {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	position: relative;
}

section#firma article {
	margin: 150px auto;
	padding: 0;
	width: 95%;
	max-width: 1600px;
	height: auto;	
	display: flex;
	justify-content: space-between;
	gap: 7%;
}
section#firma article .text-area { flex: 0 0 50%; }
section#firma article .image-area { flex: 0 0 42%; }
section#firma article .image-area img, section#firma article .image-area iframe, section#firma article .image-area video { width: 100%; height: auto; border: 1px solid #bdbdbd; margin-top: 70px; -webkit-box-shadow: 0px 0px 5px #a0a0a0; -moz-box-shadow: 0px 0px 5px #a0a0a0; box-shadow: 0px 0px 5px #a0a0a0; }

section.start.maschinen {
	margin: 0;
	padding: 150px 0 0;
	width: 100%;
	height: auto;
	text-align: center;
	background-color: #dedede;
	border-top: 1px solid #bdbdbd;
	border-bottom: 1px solid #bdbdbd;
}
section.start.maschinen .intro { margin: 0 auto 50px; max-width: 950px; }
section.start.maschinen .intro h3 { font-size: 28px; font-weight: 700; margin: 0 0 10px; padding: 0; color: #575756; }

section.start.maschinen .maschinen_bild {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px;
	position: relative;
	overflow: hidden;
}

section.start.maschinen .maschinen_bild article {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 450px;
	position: relative;
	overflow: hidden;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
section.start.maschinen .maschinen_bild article:nth-of-type(4) { border-right: 0; }
section.start.maschinen .maschinen_bild article:nth-of-type(8) { border-right: 0; border-bottom: 0; }
section.start.maschinen .maschinen_bild article:nth-of-type(5) { border-bottom: 0; }
section.start.maschinen .maschinen_bild article:nth-of-type(6) { border-bottom: 0; }
section.start.maschinen .maschinen_bild article:nth-of-type(7) { border-bottom: 0; }
section.start.maschinen .maschinen_bild article .mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #000; background-color: rgba(0, 0, 0, 0.4); z-index: 12; transition: background-color 0.5s ease-in-out; }
section.start.maschinen .maschinen_bild article:hover .mask { background-color: rgba(0, 0, 0, 0.8); }
section.start.maschinen .maschinen_bild article img { width: 100%; height: 100%; object-fit: cover; }
section.start.maschinen .maschinen_bild article h2 { color: #fff; font-size: 26px; }
section.start.maschinen .maschinen_bild article .link { width: 100%; padding: 10px 0; position: absolute; top: 240px; z-index: 20; transition: top 0.5s ease-in-out; } 
section.start.maschinen .maschinen_bild article .link .read { margin: 25px auto; padding: 5px 10px; width: 200px; border: 1px solid #fff; font-size: 18px; opacity: 0; transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out; }
section.start.maschinen .maschinen_bild article .link .read a { text-decoration: none; color: #fff; transition: color 0.5s ease-in-out; }
section.start.maschinen .maschinen_bild article:hover .link { top: 200px; }
section.start.maschinen .maschinen_bild article:hover .link .read { opacity: 1; }
section.start.maschinen .maschinen_bild article .link .read:hover {  background-color: #fff; }
section.start.maschinen .maschinen_bild article .link .read:hover a { color: #1d1d1b; }

section#referenzen {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	position: relative;
}

section#referenzen article {
	margin: 150px auto;
	padding: 0;
	width: 95%;
	max-width: 1600px;
	height: auto;	
	display: flex;
	justify-content: space-between;
	gap: 9%;
}
section#referenzen article .text-area { flex: 0 0 55%; }
section#referenzen article .image-area { flex: 0 0 35%; }
section#referenzen article .image-area img { width: 100%; height: auto; border: 1px solid #bdbdbd; margin-top: 60px; -webkit-box-shadow: 0px 0px 5px #a0a0a0; -moz-box-shadow: 0px 0px 5px #a0a0a0; box-shadow: 0px 0px 5px #a0a0a0; }

section#ueberuns {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	position: relative;
}
section#ueberuns hr { border: 0; border-top: 1px solid #bdbdbd; margin: 50px auto; width: 85%; }

section#ueberuns article.intro {
	margin: 150px auto;
	padding: 0;
	width: 95%;
	max-width: 1600px;
	height: auto;	
	display: flex;
	justify-content: space-between;
	gap: 7%;
}
section#ueberuns article.intro .text-area { flex: 0 0 50%; }
section#ueberuns article.intro .image-area { flex: 0 0 42%; }
section#ueberuns article.intro .image-area img, section#ueberuns article .image-area iframe, section#ueberuns article .image-area video { width: 100%; height: auto; border: 1px solid #bdbdbd; margin-top: 70px; -webkit-box-shadow: 0px 0px 5px #a0a0a0; -moz-box-shadow: 0px 0px 5px #a0a0a0; box-shadow: 0px 0px 5px #a0a0a0; }

section#ueberuns article#standorte {
	margin: 0 auto 150px;
	padding: 0;  
	max-width: 1600px;
	height: auto;
	text-align: center;
}
section#ueberuns article#standorte p { max-width: 950px; margin: 0 auto; }
section#ueberuns article#standorte img { width: 100%; height: auto; max-width: 1400px; }

section.firma.benefits {
	margin: 0;
	padding: 150px 0;
	width: 100%;
	height: auto;
	position: relative;
	background-color: #dedede; 
	border-top: 1px solid #bdbdbd; 
	border-bottom: 1px solid #bdbdbd;
	overflow: hidden;
}

section.firma.benefits .intro {
	margin: 0 auto;
	padding: 0;  
	max-width: 950px;
	height: auto;
	text-align: center;
}

section.firma.benefits .uebersicht { 
	margin: 50px auto 0;
	padding: 50px 0 0;  
	width: 95%;
	max-width: 1600px;
	height: auto;
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
	border-top: 1px solid #bdbdbd; 
}

section.firma.benefits .uebersicht article {
	margin: 0px auto;
	padding: 0;  
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
section.firma.benefits article .text-area { flex: 0 0 78%; }
section.firma.benefits article .image-area { flex: 0 0 13%; }
section.firma.benefits article .image-area img { width: 100%; height: auto; display: block; }

section.firma.kompetenzen {
	margin: 0;
	padding: 150px 0;
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
}

section.firma.kompetenzen .intro {
	margin: 0 auto;
	padding: 0;  
	max-width: 950px;
	height: auto;
	text-align: center;
}

section.firma.kompetenzen .uebersicht { 
	margin: 50px auto 0;
	padding: 50px 0 0;  
	width: 95%;
	max-width: 1600px;
	height: auto;
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
	border-top: 1px solid #bdbdbd; 
}

section.firma.kompetenzen .uebersicht article {
	margin: 0px auto;
	padding: 0;  
	display: flex;
	justify-content: space-between;
	align-items: center;
}
section.firma.kompetenzen article .text-area { flex: 0 0 78%; }
section.firma.kompetenzen article .image-area { flex: 0 0 13%; }
section.firma.kompetenzen article .image-area img { width: 100%; height: auto; display: block; }

section#historie {
	margin: 0;
	padding: 150px 0;
	width: 100%;
	height: auto;
	position: relative;
	background: url(../images/higr_historisch.png);
	border-top: 1px solid #bdbdbd; 
}

section#historie .intro {
	margin: 0 auto;
	padding: 0;  
	max-width: 950px;
	height: auto;
	text-align: center;
}

.testimonial_container {
	margin: 0px auto;
	padding: 50px 40px;
	width: 95%;
	max-width: 1600px;
	position: relative;

}
.testimonial_container::after { clear: both; content: ""; display: table; }

figure.testimonial {
	margin: 20px 50px;
	padding: 0;
	position: relative;
	float: left;
	/*overflow: hidden;*/
}

figure.testimonial p { text-align: center; }

figure.testimonial img {
	max-width: 100%;
	vertical-align: middle;
	height: auto;
	width: 90%;
	margin: 40px 0 0 10px;
	-webkit-box-shadow: 0px 0px 5px #a0a0a0; 
	-moz-box-shadow: 0px 0px 5px #a0a0a0; 
	box-shadow: 0px 0px 5px #a0a0a0;
	border: 10px solid #fff;
}

.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}
.slick-list {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.slick-list:focus { outline: none;}
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0); }
.slick-track { position: relative; top: 0; left: 0; display: block; }
.slick-track:before, .slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-btn.slick-hidden { display: none; }
 
.slick-prev, .slick-next { 
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 40%;
	display: block;
	width: 20px;
	height: 20px;
	padding: 0;
	transform: translate(0, -50%);
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: transparent;
	
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev:before, .slick-next:before { font-size: 40px; line-height: 1; opacity: .75; color: #1d1d1b; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-prev { left: -40px; }
.slick-prev:before { content: "<"; }
.slick-next { right: -40px; }
.slick-next:before { content: ">"; }




section#intro_maschinen {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	position: relative;
}

section#intro_maschinen article {
	margin: 150px auto;
	padding: 0;
	width: 95%;
	max-width: 1600px;
	height: auto;	
	display: flex;
	justify-content: space-between;
	gap: 9%;
}
section#intro_maschinen article .text-area { flex: 0 0 55%; }
section#intro_maschinen article .image-area { flex: 0 0 35%; }
section#intro_maschinen article .image-area img { width: 100%; height: auto; border: 1px solid #bdbdbd; margin-top: 60px; -webkit-box-shadow: 0px 0px 5px #a0a0a0; -moz-box-shadow: 0px 0px 5px #a0a0a0; box-shadow: 0px 0px 5px #a0a0a0; }

section.content-maschinen {
	margin: 0;
	padding: 1px;
	width: 100%;
	height: auto;
	position: relative;
}
section.content-maschinen:nth-of-type(even) { background-color: #dedede; border-top: 1px solid #bdbdbd; border-bottom: 1px solid #bdbdbd; }

section.content-maschinen article.intro {
	margin: 150px auto 50px;
	padding: 0;  
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 95%;
	max-width: 1600px;
	gap: 20px;
}
section.content-maschinen article.intro .text-area { flex: 0 0 65%; }
section.content-maschinen article.intro .image-area { flex: 0 0 30%; }
section.content-maschinen article.intro .image-area img { width: 100%; height: auto; display: block; border: 1px solid #bdbdbd; -webkit-box-shadow: 0px 0px 5px #a0a0a0; -moz-box-shadow: 0px 0px 5px #a0a0a0; box-shadow: 0px 0px 5px #a0a0a0; }

section.content-maschinen article.vorteile  {  margin: 50px auto 150px; width: 95%; max-width: 1600px; padding: 50px 0 0; border-top: 1px solid #bdbdbd;  }
section.content-maschinen article.vorteile ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; list-style: none; padding-left: 0; }
section.content-maschinen article.vorteile ul li {  background-image: url('../images/aufzaehler.png'); background-repeat: no-repeat; background-position: 0 5px; padding-left: 25px; background-size: 12px; }
section.content-maschinen article.vorteile .container {  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
section.content-maschinen article.vorteile .vorteil {  display: flex; /*justify-content: space-between;*/ align-items: center; gap: 10px; }
section.content-maschinen article.vorteile .vorteil .image-area { flex: 0 0 60px; }
section.content-maschinen article.vorteile .vorteil .image-area img { width: 100%; height: auto; }
section.content-maschinen article.vorteile .vorteil p {  }


/*================   EFFEKTE   =================*/
.fade { opacity: 0; transition: opacity 1s ease-in-out; }
.fade.visible { opacity: 1; }

.scrolltop { opacity: 0; transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; transform: translateY(150px); }
.scrolltop.visible { opacity: 1; transform: translateY(0px); }

.scrollright { opacity: 0; transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; transform: translateX(-150px); }
.scrollright.visible { opacity: 1; transform: translateX(0px); }

.scrollleft { opacity: 0; transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; transform: translateX(150px); }
.scrollleft.visible { opacity: 1; transform: translateX(0px); }

.resize1 { transition: all 1s ease-in-out; transform: scale(0); opacity: 0;  }
.resize1.visible { transform: scale(1); opacity: 1;  }

.resize2 { transition: all 1s ease-in-out 0.3s; transform: scale(0); opacity: 0;  }
.resize2.visible { transform: scale(1); opacity: 1;  }

.resize3 { transition: all 1s ease-in-out 0.6s; transform: scale(0); opacity: 0;  }
.resize3.visible { transform: scale(1); opacity: 1;  }

.resize4 { transition: all 1s ease-in-out 0.9s; transform: scale(0); opacity: 0;  }
.resize4.visible { transform: scale(1); opacity: 1;  }

.resize5 { transition: all 1s ease-in-out 1.2s; transform: scale(0); opacity: 0;  }
.resize5.visible { transform: scale(1); opacity: 1;  }