@import url("//hello.myfonts.net/count/3ffd85");

/* ############################################################
	SCHRIFTEINBETTUNG
############################################################ */

/*
Quelle: Direktinstallation auf Server
*/

@font-face {
	font-family: "FFMarkWebProBold";
	src: url("../../Portal/numora/Fonts/FFMarkWebProBold/font.woff2") format("woff2"),
	url("../../Portal/numora/Fonts/FFMarkWebProBold/font.woff") format("woff");
}
@font-face {
	font-family: "FFMarkWebProRegular";
	src: url("../../Portal/numora/Fonts/FFMarkWebProRegular/font.woff2") format("woff2"),
	url("../../Portal/numora/Fonts/FFMarkWebProRegular/font.woff") format("woff");
}


/* ############################################################
	FARBKLIMA
###############################################################
	
	Dunkelgrün:		#27754d - rgba(39,117,77,1)
	Apfelgrün:		#88b550 - rgba(136,181,80,1)
	Hellgrün:		#f5f8e9 - rgba(245,248,233,1)
	
###############################################################
	ALLGEMEINES
############################################################ */

* {
	margin: 0;
	padding: 0;
	outline: none;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
img, table, tr, td {
	border: 0;
}
/*img {
	max-width: 100% !important;
	height: auto !important;
	display: block;
	-ms-interpolation-mode: bicubic;
	image-rendering: optimizeQuality;
}*/
a, a:focus {
	outline: none;
}
html, body { /* html = IE text resize correction */
	height: 100%;
	font-size: 100%;
}
html {
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow-x: hidden;
	min-height: 100vh;
	min-height: -webkit-fill-available; /* mobile viewport bug fix */
	background-color: #f5f8e9;
}

/* Effekt: FadeIn / Lightning */
main {
	opacity: 0;
}


/* ############################################################
	SCHRIFTEN / TEXTE / ABSÄTZE / HYPERLINKS / TITEL
############################################################ */

/* Allgemeines */
body {
	font-family: "FFMarkWebProRegular";
	font-weight: normal;
	font-style: normal;
	font-size: 1.125rem; /* 18px */
	line-height: 1.75rem; /* 28px */
	letter-spacing: 0.36px;
	color: #27754d;
}
.font-size-medium {
	font-size: 1.125rem; /* 18px */
	line-height: 1.75rem; /* 28px */
	letter-spacing: 0.36px;
}
@media (min-width: 760px) {
	.font-size-medium {
		font-size: 1.75rem; /* 28px */
		line-height: 2.8125rem; /* 45px */
		letter-spacing: 0.56px;
	}
}

/* Schnitte */
b, strong {
	font-family: "FFMarkWebProBold";
	font-weight: normal;
}


/* ############################################################
	HYPERLINKS
############################################################ */

a {
	color: #27754d;
	text-decoration: none;
	-o-transition: color 0.3s ease;
	-ms-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-webkit-transition: color 0.3s ease;
	transition: color 0.3s ease;
}
a:hover {
	color: #88b550;
}
a.link-box {
	display: inline-block;
	padding: 3px 10px;
	background-color: #fff;
	font-size: 1.125rem; /* 18px */
	line-height: 1.75rem; /* 28px */
	letter-spacing: 0.36px;
	color: #27754d;
	-o-transition: color 0.3s ease, background 0.6s ease;
	-ms-transition: color 0.3s ease, background 0.6s ease;
	-moz-transition: color 0.3s ease, background 0.6s ease;
	-webkit-transition: color 0.3s ease, background 0.6s ease;
	transition: color 0.3s ease, background 0.6s ease;
}
a.link-box:hover {
	background-color: #88b550;
	color: #fff;
}
@media (min-width: 760px) {
	a.link-box {
		padding: 7px 10px;
		font-size: 1.5625rem; /* 25px */
		letter-spacing: 0.5px;
	}
}


/* ############################################################
	PANELS/BOXEN
############################################################ */

/* Allgemein */
main,
.content-box,
.box-image, .box-introduction, .box-button {
	position: relative;
	width: 100%;
}
.content-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
	height: calc(var(--window-height, 1vh) * 100);
	padding-right: 20px;
	padding-left: 20px;
}

/* Inhalt */
.box-introduction {
	margin-top: 80px;
}
.box-button {
	margin-top: 40px;
}
@media (min-width: 760px) {
	/* Allgemein */
	.content-box {
		padding-left: 50px;
		padding-right: 50px;
	}

	/* Inhalt */
	.box-introduction {
		margin-top: 140px;
	}
	.box-button {
		margin-top: 120px;
	}
}
@media (min-width: 1020px) {
	/* Inhalt */
	.box-introduction {
		margin-top: 120px;
	}
	.box-button {
		margin-top: 140px;
	}
}
@media (min-width: 1440px) {
	/* Allgemein */
	.content-box {
		padding-left: 100px;
		padding-right: 100px;
	}
}


/* ############################################################
	BILDER/ICONS
############################################################ */

.image-2to1 {
	display: inline-block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
.image-2to1.mobile {
	height: 280px;
}
@media (min-width: 760px) {
	.image-2to1.mobile {
		height: 560px;
	}
}