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

body {
	margin: 0;
	padding: 0;
	/*background-color: #2d2d2d;*/
	background-image: url("../images/higr_tafel_g.webp"); 
	background-size: 100% auto;
	background-repeat: repeat-y;
}
body::after { content: ""; clear: both; display: table; }

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: 100vH;
	min-height: 450px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

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: rgba(0, 0, 0, 0.7);
	z-index: 12;
}

header .intro {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 15;
	text-align: center;
	animation: fadein 2.5s;
	animation-timing-function: ease-in-out;
}

header .head_logo {
	margin: 0 auto;
	padding: 0;
	width: 420px;
	height: auto;
	z-index: 50;
	text-align: center;
}

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

section {
	margin: 0;
	padding: 200px 3%;
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
section::after { content: ""; clear: both; display: table; }

section.start.intro { display: block; }
section.start.intro h2 { width: 100%; max-width: 1650px; text-transform: uppercase; margin: 0 auto; border-bottom: 3px solid #e20020; color: #edf2f7 !important; font-weight: 800 !important; }
section.start.intro .container { max-width: 1650px; margin: 50px auto; }
section.start.intro .container p { width: 80%; }

section.start.performance {
	padding: 0;
	/*background-image: url("../images/higr_tafel_g.webp"); 
	background-size: 100% auto;*/
}

section.start.performance article {
	margin: 0;
	padding: 0;
	width: 50%;
	height: 480px;
	position: relative;
	overflow: hidden;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.4);
	transition-delay: 0s;
	transition-duration: 0.5s;
	transition-property: background-color;
	transition-timing-function: ease-in-out;
} 
section.start.performance article:hover { background-color: rgba(0, 0, 0, 0.6); }
section.start.performance article:nth-of-type(2) { border-left: 1px solid #ededed; }
section.start.performance article:nth-of-type(3) { border-left: 1px solid #ededed; }
section.start.performance article:nth-of-type(4) { border-left: 1px solid #ededed; }

section.start.performance article .link {
	width: 100%;
	padding: 10px 0;
	position: absolute;
	top: 160px;
	transition-delay: 0s;
	transition-duration: 0.5s;
	transition-property: top; 
	transition-timing-function: ease-in-out;
} 

section.start.performance article img { width: 70%; height: auto; display: block; margin: 0 auto; }
section.start.performance article h3 { color: #fff; font-size: 26px !important; }
section.start.performance article .link .read { margin: 0 auto; padding: 10px 25px; cursor: pointer; border: 1px solid #ededed; font-size: 18px; opacity: 0; transition-delay: 0s; transition-duration: 0.5s; transition-property: opacity, color, background-color; transition-timing-function: ease-in-out; }

section.start.performance article:hover .link { top: 110px; }
section.start.performance article:hover .link .read { opacity: 1; }
section.start.performance article .link .read:hover { background-color: #fff; color: #4c4c4c; }

section#we { display: block; /*background-image: url("../images/higr_tafel_g.webp"); background-size: 100% auto;*/ }
section#we h1 { width: 100%; max-width: 1650px; text-transform: uppercase; margin: 0 auto; border-bottom: 3px solid #e20020; }
section#we .container { max-width: 1650px; margin: 50px auto; display: flex; justify-content: space-between; }
section#we .container .person { width: 20%; }
section#we .container img.kontakt { width: 80%; border-radius: 50%; border: 5px solid #ededed; display: block; margin: 15px auto; }
section#we .container p.kontakt { text-align: center; }
section#we .container .person img.icon { margin-top: 20px; width: 70px; height: auto; }

section#web { /*background-image: url("../images/higr_tafel_g.webp"); background-size: 100% auto;*/ }
section#web .container { max-width: 1650px; display: flex; align-items: center; justify-content: center; }
section#web .container img { margin-right: 30px; width: 320px; height: auto; }
section#web h2 { text-transform: uppercase; margin: 0 auto; border-bottom: 3px solid #e20020; color: #edf2f7 !important; font-weight: 800 !important; }

section#social { padding-bottom: 0; }
section#social .container { max-width: 1650px; display: flex; align-items: center; justify-content: center; }
section#social .container img { margin-left: 30px; width: 320px; height: auto; }
section#social h2 { text-transform: uppercase; margin: 0 auto; border-bottom: 3px solid #e20020; color: #edf2f7 !important; font-weight: 800 !important; }

section#pakete { padding: 100px 3% 250px; margin: 50px auto 0; align-items: normal; position: relative; }
section#pakete h3.scrolltop { width: 94%; max-width: 1650px; text-transform: uppercase; margin: 0 auto; color: #edf2f7 !important; font-weight: 800 !important; position: absolute; top: 0; }
section#pakete .paket.info { text-align: left; font-weight: bold; padding-top: 260px; }
section#pakete .paket { text-align: center; width: 325px; }
section#pakete .paket img.icon { width: 190px; height: auto; display: block; margin: 0 auto; }
section#pakete .paket img.auswahl { width: 50px; height: auto; display: block; margin: 0 auto 15px; }
section#pakete .paket p.description { display: none; }
section#pakete .paket h3 { text-transform: uppercase; margin: 0 auto 50px; color: #edf2f7 !important; font-weight: 800 !important; background-image: url("../images/higr_pakete.webp"); background-position: center center; background-size: 80% auto; background-repeat: no-repeat; text-align: center; }
section#pakete .paket p { margin: 0; line-height: 65px; }
section#pakete .paket.info p { white-space: nowrap; }
section#pakete .paket p.kleiner { font-weight: 300; font-size: 16px; line-height: 22px; }
section#pakete .paket p.zahl { font-weight: 800; }
section#pakete .cta { text-align: center; position: absolute; bottom: 100px; left: 45%; text-decoration: none; color: #ffffff; background-image: url("../images/higr_pakete.webp"); background-position: center center; background-size: 80% auto; text-transform: uppercase;
						background-repeat: no-repeat; transition-delay: 0s; transition-duration: 0.3s; transition-property: transform; transition-timing-function: ease-in-out; display: ruby-base; cursor: pointer; padding: 10px 25px; font-size: 28px; }
section#pakete .cta:hover { transform: scale(1.2); }

section#print { /*background-image: url("../images/higr_tafel_g.webp"); background-size: 100% auto;*/ }
section#print .container { max-width: 1650px; display: flex; align-items: center; justify-content: center; }
section#print .container img { margin-right: 30px; width: 320px; height: auto; }
section#print h2 { text-transform: uppercase; margin: 0 auto; border-bottom: 3px solid #e20020; color: #edf2f7 !important; font-weight: 800 !important; }

section#scan {  }
section#scan .container { max-width: 1650px; display: flex; align-items: center; justify-content: center; }
section#scan .container img { margin-left: 30px; width: 320px; height: auto; }
section#scan h2 { text-transform: uppercase; margin: 0 auto; border-bottom: 3px solid #e20020; color: #edf2f7 !important; font-weight: 800 !important; }

section#scan_image { padding: 0 0 200px; margin: 0 auto; max-width: 1650px; display: flex; align-items: center; justify-content: center; }
section#scan_image .cd-image-container { position: relative; width: 90%; max-width: 720px; margin: 0em auto; }
section#scan_image .cd-image-container img { display: block; width: 100%; }
section#scan_image .cd-image-label { position: absolute; bottom: 0; right: 0; color: #ffffff; padding: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0; -webkit-transform: translateY(20px);
	-moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
	transition: transform 0.3s 0.7s, opacity 0.3s 0.7s; }
section#scan_image .cd-image-label.is-hidden { visibility: hidden; }
section#scan_image .is-visible .cd-image-label { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
section#scan_image .cd-resize-img { position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0);
	-o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
section#scan_image .cd-resize-img img { position: absolute; left: 0; top: 0; display: block; height: 100%; width: auto; max-width: none; }
section#scan_image .cd-resize-img .cd-image-label { right: auto; left: 0; }
section#scan_image .is-visible .cd-resize-img { width: 50%; /* bounce in animation of the modified image */ -webkit-animation: cd-bounce-in 0.7s; -moz-animation: cd-bounce-in 0.7s; animation: cd-bounce-in 0.7s; border-right: 1px solid #fff; }
@-webkit-keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; }}
@-moz-keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; }}
@keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; }}
section#scan_image .cd-handle { position: absolute; height: 44px; width: 44px; /* center the element */ left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border-radius: 50%; background: #e20020 url("../images/cd-arrows.svg") no-repeat center center;
	cursor: move; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0); -moz-transform: translate3d(0, 0, 0) scale(0);
	-ms-transform: translate3d(0, 0, 0) scale(0); -o-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0); }
section#scan_image .cd-handle.draggable { /* change background color when element is active */ background-color: #445b7c; }
section#scan_image .is-visible .cd-handle { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); -o-transform: translate3d(0, 0, 0) scale(1);
	transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s; transition: transform 0.3s 0.7s, opacity 0s 0.7s; }

section#contact { display: block; }
section#contact .intro { max-width: 1400px; width: 100%; margin: 25px auto 75px; }
section#contact h2 { text-transform: uppercase; margin: 25px auto; border-bottom: 3px solid #e20020; color: #edf2f7 !important; font-weight: 800 !important; }
section#contact .container { max-width: 1650px; display: flex; align-items: center; justify-content: center; }
section#contact .container .person { width: 280px; margin-right: 120px; }
section#contact .container img.kontakt { width: 80%; border-radius: 50%; border: 5px solid #ededed; display: block; margin: 15px auto; }
section#contact .container p.kontakt { text-align: center; }
section#contact .container .teaser .line {  margin: 10px 0; padding: 0; width: 100%; height: auto; display: flex; align-items: center; }
section#contact .container .teaser .line img { width: 50px; height: auto; float: left; margin: 0 50px 0 0; }
section#contact .container .teaser .line p a { color: #edf2f7; font-weight: normal; }

section#imprint { }
section#imprint .container { max-width: 1650px; display: flex; align-items: center; justify-content: center; }
section#imprint .container img { width: 320px; margin-right: 50px; }

footer {
	margin: 0;
	padding: 100px 3% 20px;
	width: 100%;
	height: auto;
	position: relative;
	/*background-image: linear-gradient(#2d2d2d, #48494a);*/
}
footer::after { content: ""; clear: both; display: table; }
 
footer .container { margin: 0 auto; width: 100%; max-width: 1650px; display: flex; align-items: center; justify-content: space-between; } 
footer .container img.logo { width: 120px; height: auto; display: block; } 
footer .container div.social { width: 175px; display: flex; align-items: center; justify-content: space-between; }
footer .container div.social img { width: 25px; height: auto; display: block; margin-right: 15px; }

footer p.credits { margin: 10px auto; width: 100%; max-width: 1650px; border-top: 1px solid #ededed; text-align: right; font-size: 14px; padding: 20px 0; clear: both; }
footer p.credits a { margin-left: 20px; color: #fff; text-decoration: none; }

.clear { clear: both; }


/*================   KEYFRAMES   =================*/
@keyframes blink {
    50% { border-color: transparent; }
}


/*================   ALLGEMEIN   =================*/
body { font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-size: 16px; color: #edf2f7; line-height: 1.8em; letter-spacing: 0.3px; }

h1 { font-size: 64px; font-weight: 800; color: #edf2f7; line-height: 1.6em; margin: 0; }
main h1 { font-size: 48px; }
h2 { font-size: 50px; font-weight: 300; color: #e20020; line-height: 1.6em; margin: 0; }
main h2 { font-size: 36px; }
h3 { font-size: 30px; font-weight: 300; color: #e20020; line-height: 1.6em; margin: 0; }
h4 { }
h5 { }
h6 { }

img { border: 0; }

main a { color: #e20020; font-weight: bold; }
main a.read { color: #fff; font-weight: normal; text-decoration: none; }


/*================   NAVIGATION   =================*/
ul.nav.mod-menu { margin: 0; padding: 0; list-style-type: none; } 
ul.nav.mod-menu li { margin: 20px 50px; text-transform: uppercase; font-size: 36px; display: block; transition: 0.3s; } 
ul.nav.mod-menu li a { color: #edf2f7; text-decoration: none; font-weight: bold; } 
ul.nav.mod-menu li a:hover { text-decoration: underline; } 
 
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: rgba(45, 45, 45, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 15%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.overlay-content hr { border: 0; border-top: 1px solid #ededed; margin: 50px auto; width: 85%; }

.overlay-content .line { width: 380px; margin: 0 auto; padding: 0; height: auto; display: flex; align-items: center; text-align: left; }
.overlay-content .line:nth-of-type(1) { margin-top: 80px; }
.overlay-content .line img { width: 50px; height: auto; float: left; margin: 0 25px 0 0; }
.overlay-content .line p a { color: #edf2f7; font-weight: normal; }

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  color: #edf2f7;
}

.open { font-size:48px; cursor:pointer; position:absolute; z-index:1000; top: 45px; right: 45px; }


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

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

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

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

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

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

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

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

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

#typewriter {
	white-space: nowrap; 
	overflow: hidden;
	font-weight: 700;
	border-right: 0.05em solid;
	animation: blink 0.75s step-end infinite;
}