@charset "utf-8";

@font-face { font-display: swap; font-family: 'Barlow'; font-style: normal; font-weight: 100; src: url('../webfonts/barlow-semi-condensed-v15-latin-100.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Barlow'; font-style: normal; font-weight: 300; src: url('../webfonts/barlow-semi-condensed-v15-latin-300.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Barlow'; font-style: normal; font-weight: 400; src: url('../webfonts/barlow-semi-condensed-v15-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Barlow'; font-style: normal; font-weight: 500; src: url('../webfonts/barlow-semi-condensed-v15-latin-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Barlow'; font-style: normal; font-weight: 600; src: url('../webfonts/barlow-semi-condensed-v15-latin-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Barlow'; font-style: normal; font-weight: 700; src: url('../webfonts/barlow-semi-condensed-v15-latin-700.woff2') format('woff2'); }

@font-face { font-display: swap; font-family: 'Source Sans'; font-style: normal; font-weight: 300; src: url('../webfonts/source-sans-3-v18-latin-300.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Source Sans'; font-style: normal; font-weight: 400; src: url('../webfonts/source-sans-3-v18-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Source Sans'; font-style: normal; font-weight: 600; src: url('../webfonts/source-sans-3-v18-latin-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Source Sans'; font-style: normal; font-weight: 900; src: url('../webfonts/source-sans-3-v18-latin-900.woff2') format('woff2'); }


html { 
	margin: 0px;
	min-height: 100%;
}
 
:focus {
	 outline:0; 
	 -moz-outline:0; 
} 

img {
	vertical-align: baseline;
}

span,div {
	zoom: 1;
}			   

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

img { height: auto; }

a { zoom: 1; color: inherit; }
a:hover  { color: inherit; }
	
a img { border-width: 0px; }	   


form {
	margin: 0px;
	padding: 0px;
}
	
sup { 
	vertical-align: baseline;
	position: relative;
	top: -0.5em;
	font-size: 70%;
}

ul {
	padding-left: 1.5em;
}

body {	 
	position: relative;
	margin: 0;
	padding: 0px;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: "Source Sans",sans-serif;
	font-size: 1.5vw;
	line-height: 1.5;
	background-color: white;
	color: #1a3937;
	height: 100%;
	overflow-x: hidden;
	padding-top: 9vw;
}	 

.show-on-mobile { display: none !important; }


/**** HEADER ****/

.header {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index:999;
	width: 100%;
	height: 9vw;
	transition: height 0.3s;
	background-color: white;
	text-align: center;
	font-family: "Barlow",sans-serif;
}

.header .logo {
	display: inline-block;
	position: absolute;
	left: 4vw;
	bottom: 1vw;
	width: 8.7vw;
	transition: all 0.3s;
}	

.header .logo img { width: 100%; }

.header .mainmenu {
	position: absolute;
	right: 5vw;
	bottom: 0;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 1.4vw;
}

.header .mainmenu .entry {
	position: relative;
	display: inline-block;
	margin-left: 2.5vw;
	cursor: pointer;
	padding-bottom: 1.2vw;
}

.header .mainmenu .entry a { text-decoration: none; }
.header .mainmenu .entry a:hover { color: #39b09a; }
.header .mainmenu .entry.sel a, .header .mainmenu .entry.sel .headline { font-weight: bold; }

.header .mainmenu .entry .submenu {
	position: absolute;
	display: none;
	z-index: 99;
	left: calc(50% - 10vw);
	top: 3.45vw;
	background-color: white;
	margin: 0px;
	padding: 0px;
}

.header .mainmenu .entry:hover .submenu { display: block; }

.header .mainmenu .entry .submenu .entry {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20vw;
	height: 5vw;
	padding-left: 2vw;
	padding-right: 2vw;
	border-top: 1px solid black;
	line-height: 1.2;
}

.header .mainmenu .entry .submenu .entry a { font-weight: 500; }
.header .mainmenu .entry .submenu .entry.sel a { font-weight: bold; }

.header.fixed {
	position: fixed;
	left: 0;
	top: 0;
	height: 5.5vw;
}

.header.fixed .logo { width: 6vw; bottom: 0.2vw; }

/**** MOBILE MENU ****/

.menuicons {
	position: absolute;
	right:20px;
	bottom: 10px;
	display: none;
	width: 26px;
}

.mail-icon {
	position: absolute;
	right:68px;
	bottom: 11px;
	display: none;
	width: 23px;
}

#menu-hide { display: none; }

.mobilemenu-container {
	display: none;
	position: fixed;
	left: 0;
	top: 64px;
	z-index: 999;
	width: 100%;
}

.mobilemenu {
	display: none;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	border-top: 1px solid #d0d0d0;
	background-color: white;
}

.mobilemenu li {
	border-bottom: 1px solid #d0d0d0;
	padding-top: 8px;
	padding-bottom: 6px;
	font-size: 20px;
	text-transform: uppercase;
	text-align: center;
}

.mobilemenu li a {
	display: block;
	text-decoration: none;
}

.mobilemenu li a:hover { color: #39b09a; } 
.mobilemenu li.sel a { color: #39b09a; }

.mobilemenu li .submenu {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.mobilemenu li .submenu li {
	border-top: 1px solid #f8f8f8;
	border-bottom: none;
	padding-top: 8px;
	padding-bottom: 6px;
	font-size: 17px;
	text-transform: none;
	text-align: center;
}

.mobilemenu li .submenu li:first-child { border-top: none; }


/**** MAIN / GENERAL ****/

.main {
	position: relative;
}

.main a:hover { color: #39b09a; }


/**** HERO ****/

.hero {
	position: relative;
}

.hero .image {
	min-height: 39.3vw;
}

.hero .image img { width: 100%; display: block; }

.hero .video { 
	padding-left: 14.5vw; 
	padding-right: 14.5vw; 
	background-color: black;
	min-height: 39.3vw;
}

.hero .video video { width: 100%; display: block; }

.hero .video .volume { 
	position: absolute;
	right: 3vw;
	bottom: 1vw;
	width: 3vw; 
	cursor: pointer;
}

.hero .video .volume.mute { display: none; }

.hero .text {
	position: absolute;
	left: 0;
	top: 0;
	width: 40vw;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	padding-left: 7.7vw;
	font-family: "Barlow",sans-serif;
	font-size: 2.1vw;
}

.hero .text .inner { width: 100%; }

.hero .text .kategorie {
	color: #39b09a;
	border-bottom: 1px solid #39b09a; 
	max-width: 30vw;
	font-size: 3.3vw;
	text-transform: uppercase;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.hero .text h2 {
	color: #39b09a;
	text-transform: uppercase;
	font-weight: 100;
	font-size: 5vw;
	line-height: 1;
	padding-bottom: 0.35em;
	max-width: 28vw;
	margin: 0;
	margin-bottom: 0.2em;
}

.hero .text h2.with-border { border-bottom: 1px solid #39b09a; }

.hero .text p {
	margin: 0;
}


/**** CLAIM ****/

.claim {
	background-color: #e9f6f4;
	text-align: center;
	padding: 5vw 16vw;
	font-family: "Barlow",sans-serif;
	font-size: 3.4vw;
	line-height: 1.25;
}

.claim h1, .claim h2 {
	font-weight: inherit;
	font-size: inherit;
	margin: 0;
}

.claim p { margin: 0; }


/**** QUICKLINKS ****/

.quicklinks {
	font-size: 0;
}

.quicklinks .entry {
	display: inline-block;
	vertical-align: top;
	text-align: center;
	width: calc(33.333% - 0.334vw);
	margin-right: 0.5vw;
	font-size: 1.7vw;
	font-weight: 300;
}

.quicklinks .entry:nth-child(3n) { margin-right: 0; }

.quicklinks .entry .image img { width: 100%; display: block; }

.quicklinks .entry .text {
	padding: 2.5vw 1vw 6vw 1vw;
}

.quicklinks .entry .text h2 {
	font-family: "Barlow",sans-serif;
	font-weight: 400;
	font-size: 3.3vw;
	line-height: 1.3;
	margin: 0;
	padding-left: 3vw;
	padding-right: 3vw;
}

.quicklinks .entry .text p {
	margin-top: 0.8em;
	margin-bottom: 0.8em;
}

/**** FEATURE ****/

.feature {
	font-size: 0;
	background-color: #edf8f6;
}

.feature .image {
	display: inline-block;
	vertical-align: middle;
	width: calc(50%);
}

.feature .image img { width: 100%; display: block; }

.feature .text {
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	width: calc(50%);
	font-size: 2.1vw;
	font-weight: 300;
	padding-left: 6vw;
	padding-right: 6vw;
}

.feature .text h2 {
	font-family: "Barlow",sans-serif;
	font-weight: 400;
	font-size: 3.3vw;
	line-height: 1.3;
	color: #39b09a;
	margin: 0;
}

.feature .text p {
	margin-top: 0.5em;
	margin-bottom: 0.2em;
}

.feature .text .weiterlink {
	font-family: "Barlow",sans-serif;
	font-weight: 400;
	font-size: 1.7vw;
}

.feature.green { background-color: #39b09a; color: white; }
.feature.green .text { font-family: "Barlow",sans-serif; font-size: 2.8vw; }
.feature.green .text h2 { color: white; font-size: 4.5vw; line-height: 1.1; font-weight: 300; margin-top: 0.2em; margin-bottom: 0.4em; }

/**** TEXTBLOCK ****/

.textblock {
	text-align: center;
	padding: 2vw 16vw 4vw 16vw;
	font-size: 2.9vw;
	font-weight: 100;
}

.textblock.smallpadding {
	padding-top: 1.5vw;
	padding-bottom: 1.5vw;
	margin-bottom: 0.4em;
}

.textblock.nopadding {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.textblock.greenbg { background-color: #e9f6f4; }
.textblock.small { font-size: 1.7vw; }
	
.textblock h1, .textblock h2 {
	font-family: "Barlow",sans-serif;
	font-weight: 500;
	font-size: 3.4vw;
	line-height: 1.3;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: #39b09a;
	text-decoration-thickness: 0.03em;
	text-underline-offset: 0.2em;
	margin-bottom: -0.1em;
}

.textblock h3 {
	font-family: "Barlow",sans-serif;
	font-weight: 400;
	font-size: 3.4vw;
	line-height: 1.3;
	margin-bottom: -0.2em;
	color: #39b09a;
}

.textblock.nopadding h2:first-child, .textblock.nopadding h3:first-child {
	margin-top: 0 !important;
	margin-bottom: 0.5em !important;
}

.textblock .bigtext {
	font-family: "Barlow",sans-serif;
	font-size: 3.4vw;
	line-height: 1.25;
	font-weight: normal;
	margin-bottom: 1.5em;
}

.textblock .smalltext {
	font-size: 0.5em;
	line-height: 1.25;
}

.textblock img { margin: 0.5em; }

.textblock a { text-decoration: none; }
.textblock a:hover { color: #39b09a; }

strong { font-weight: 600; }


/**** BULLET POINTS ****/

.bullet-points {
	font-size: 0;
	padding-bottom: 6vw;
}

.bullet-points .headline h2 {
	text-align: center;
	padding: 4vw 10vw;
	font-family: "Barlow",sans-serif;
	font-size: 3.4vw;
	line-height: 1.25;
	font-weight: normal;
	margin: 0;
}

.bullet-points .entry {
	display: inline-block;
	vertical-align: top;
	width: 33.333%;
	text-align: center;
}

.bullet-points .entry .text {
	font-family: "Barlow",sans-serif;
	font-size: 3.1vw;
	padding-left: 3vw;
	padding-right: 3vw;
	line-height: 1.4;
	border-right: 1px solid #39b09a;
}

.bullet-points .entry .text.smaller { font-size: 2.8vw; }
.bullet-points .entry:nth-child(3n) .text { border-right: none; }
.bullet-points .entry .check { margin-bottom: 1.5vw; }
.bullet-points .entry .check img { width: 4vw; }

.bullet-points .entry .headline { 
	font-family: "Barlow",sans-serif;
	font-size: 3.4vw;
	margin-top: 1em; 
	margin-bottom: 0.4em; 
	color: #39b09a;
	font-weight: 500;
}


/**** TEAM ****/

.team {
	font-size: 0;
}

.team .entry {
	display: inline-block;
	vertical-align: top;
	width: calc(33.33% - 1.333vw);
	margin-right: 2vw;
	background-color: #e9f6f4;
	text-align: center;
	font-size: 1.6vw;
	font-weight: 300;
	min-height: 25vw;
	padding-bottom: 1.5em;
}

.team .entry:nth-child(3n) { margin-right: 0; }

.team .entry h3 {
	font-family: "Barlow",sans-serif;
	font-size: 2.1vw;
	font-weight: 500;
	margin-top: 0.2em;	
	margin-bottom: 0.2em;
}
	
.team .entry .funktion {
	font-family: "Barlow",sans-serif;
	font-size: 2vw;
	text-transform: uppercase;
	margin: 0;	
}
	
.team .entry .linkedin-icon {
	display: inline-block;
	width: 2.5vw;
}


/**** CONTACT FORM ****/

.contact-head {
	background-color: #39b09a;
	color: white;
	text-align: center;
	padding: 1.5vw 10vw;
	font-size: 2.5vw;
	font-weight: 100;
}

.contact-head h2 {
	font-family: "Barlow",sans-serif;
	font-size: 3.1vw;
	text-transform: uppercase;
	font-weight: 500;
	margin: 0;
}

.contact-form {
	background-color: #e9f6f4;
}

.contact-form form {
	max-width: 36vw;
	margin: auto;
	padding: 4vw 3vw 8vw 3vw;
}

.contact-form .message { 
	font-size: 2.5vw;
	line-height: 1.2;
	text-align: center;
	margin-bottom: 1em; 
}

.contact-form .checkbox {
	display: block;
	font-size: 0.78em;
	margin-bottom: 1em;
}

.contact-form input[type=text] {
	box-sizing: border-box;
	-webkit-appearance: none;
	width: 100%;
	border: none;
	font-family: "Barlow",sans-serif;
	font-size: 2vw;
	font-weight: 600;
	padding: 0.8em;
	margin-bottom: 0.8em;
}

.contact-form input[type=text]::placeholder {
	text-transform: uppercase;
}

.contact-form input[type=submit] {
	box-sizing: border-box;
	-webkit-appearance: none;
	width: 100%;
	border: none;
	font-family: "Barlow",sans-serif;
	font-size: 2.5vw;
	font-weight: 600;
	text-transform: uppercase;
	padding: 0.55em;
	margin-top: 0.6em;
	background-color: #39b09a;;
	color: white;
}

.contact-form input[type=submit]:hover { background-color: black; }

.contact-form .frc-captcha { margin: auto; }

/**** FOOTER ****/

.footer {
	position: relative;
	background-color: #1a3937;
	color: white;
	height: 25vw;
}

.footer .logo {
	position: absolute;
	left: 4vw;
	top: 4vw;
	width: 8.7vw;
}	

.footer .logo img { width: 100%; }

.footer .info {
	position: absolute;
	left: 16.3vw;
	top: 3.45vw;
	font-weight: 300;
	font-size: 2vw;
}	

.footer .info h3 {
	margin: 0;	
	font-family: "Barlow",sans-serif;
	font-weight: 300;
	font-size: 3.2vw;
	text-transform: uppercase;
}

.footer .footermenu {
	position: absolute;
	right: 4vw;
	top: 8.85vw;
	font-family: "Barlow",sans-serif;
	font-weight: 300;
	font-size: 1.3vw;
}	

.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }


/**** BIG SCREENS ****/

@media only screen and (min-width: 1500px) {	
	body { font-size: 22.5px; padding-top: 135px; }
	.header { height: 135px; }
	.header .logo { left: 60px; bottom: 15px; width: 130px; }
	.header .mainmenu { right: 75px; font-size: 21.5px; }
	.header .mainmenu .entry { padding-bottom: 18px; }
	.header .mainmenu .entry .submenu { left: calc(50% - 150px); top: 51px; }
	.header .mainmenu .entry .submenu .entry { width: 300px; height: 75px; padding-left: 35px; padding-right: 35px; }
	.header.fixed { height: 82px; }
	.header.fixed .logo { width: 90px; bottom: 3px; }
	.claim { padding: 70px 180px; font-size: 51px; } 
	.claim p { max-width: 1000px; margin-left: auto; margin-right: auto; }
	.textblock { padding: 30px 240px 60px 240px; font-size: 43px; } 
	.textblock.small { font-size: 27px; }
	.textblock h1, .textblock h2 { font-size: 51px; max-width: 1000px; margin-left: auto; margin-right: auto; }
	.textblock h3 { font-size: 51px; max-width: 1060px; margin-left: auto; margin-right: auto; }
	.textblock p { max-width: 1000px; margin-left: auto; margin-right: auto; }
	.textblock .bigtext { font-size: 51px; }
	.bullet-points { padding-bottom: 90px; }
	.bullet-points .headline h2 { padding: 60px 150px; font-size: 51px; max-width: 1200px; margin-left: auto; margin-right: auto; }
	.bullet-points .bullet-container { max-width: 1500px; margin: auto; }
	.bullet-points .entry .text { font-size: 46px; padding-left: 45px; padding-right: 45px; }
	.bullet-points .entry .text.smaller { font-size: 42px; }
	.bullet-points .entry .check { margin-bottom: 22px; }
	.bullet-points .entry .check img { width: 60px; }
	.bullet-points .entry .headline { font-size: 51px; }
	.contact-head { padding: 22px 150x; font-size: 37px; }
	.contact-head h2 { font-size: 46px; }
	.contact-form form { max-width: 540px; padding: 60px 45px 120px 45px; }
	.contact-form .message { font-size: 37px; }
	.contact-form input[type=text] { font-size: 30px; }
	.contact-form input[type=submit] { font-size: 37px; }
	.footer { height: 375px; }
	.footer .logo { left: 60px; top: 60px; width: 130px; }	
	.footer .info { left: 245px; top: 51px; font-size: 30px; }
	.footer .info h3 { font-size: 48px; }
	.footer .footermenu { right: 60px; top: 132px; font-size: 20px; }	
}

/**** SMALL SCREENS ****/

@media only screen and (max-width: 700px) {	
	.hide-on-mobile { display: none !important; }
	.show-on-mobile { display: block !important; }	
	.header { height: 64px !important; }
	.header .logo { left: 20px; bottom: 10px !important; width: 61px !important; }	
	.header .mainmenu { display: none; }
	.menuicons { display: block; }
	.mail-icon { display: block; }
	.mobilemenu-container { display: block; }
	.hero .video { padding-left: 0; padding-right: 0; }
	.hero .video .volume { bottom: 2vw; width: 5vw; }
	.hero .text { padding-left: 7.7vw; padding-right: 7.7vw; font-size: 5.22vw; width: auto; }
	.hero .text .kategorie { max-width: 68vw; font-size: 8vw; }
	.hero .text h2 { font-size: 13vw; max-width: 68vw; }
	.claim { font-size: 26px; padding: 60px 30px; }
	.quicklinks .entry { width: 100%; margin: 0; font-size: 20px; }
	.quicklinks .entry .text { padding: 20px 20px 40px 20px; }
	.quicklinks .entry .text h2 { font-size: 30px; }
	.feature .image { display: block; width: auto; }
	.feature .text { display: block; width: auto; font-size: 24px; padding: 20px; }
	.feature .text h2 { font-size: 30px; }
	.feature .text .weiterlink { font-size: 18px; }
	.feature.green .text { font-size: 24px; }
	.feature.green .text h2 { font-size: 40px;  }
	.textblock { padding: 15px 30px 25px 30px ; font-size: 20px; }
	.textblock.small { font-size: 16px; }
	.textblock h1, .textblock h2 { font-size: 26px; }
	.textblock h3 { font-size: 26px; }
	.textblock .bigtext { font-size: 26px; }
	.textblock img { scale: 0.8; margin: 0; }
	.bullet-points .headline h2 { font-size: 26px; padding: 25px 30px; } 
	.bullet-points .entry { display: block; width: auto; margin-bottom: 25px; }
	.bullet-points .entry .check img { width: 40px; }
	.bullet-points .entry .text { font-size: 24px !important; border-right: none; max-width: 240px; margin: auto; min-height: 0 !important; }
	.bullet-points .entry .headline { font-size: 30px; }
	.team .entry { display: block; margin-right: 0 !important; margin-bottom: 10px; width: auto; font-size: 20px; min-height: 0; padding: 0px 20px 30px 20px; }
	.team .entry .image { margin-left: -20px; margin-right: -20px; }
	.team .entry h3 { font-size: 26px; }
	.team .entry .funktion { font-size: 22px; }
	.team .entry .linkedin-icon { width: 28px; }
	.contact-head { padding: 10px 30px; font-size: 20px; }
	.contact-head h2 { font-size: 24px; }
	.contact-form form { max-width: 320px; padding: 30px 15px 60px 15px; }
	.contact-form .message { font-size: 20px; }
	.contact-form input[type=text] { font-size: 18px; }
	.contact-form input[type=submit] { font-size: 22px; }
	.contact-form .checkbox { font-size: 10.2px; }
	.footer { height: 200px; }
	.footer .logo { left: 20px; top: 22px; width: 61px; }
	.footer .info { left: 100px; top: 16px; font-size: 14px; } 
	.footer .info h3 { font-size: 24px; }
	.footer .footermenu { left: 20px; top: 90px; font-size: 12px; }
}