/* Überschriften
-----------------*/

	h1, h2, h3 {
		font-weight: 600 !important;
		font-family: "Fredoka One",Helvetica,Arial,sans-serif;
		color: #042040;
		margin-top: 0;
	}

	h1 {
		font-size: 60px;
		font-weight: 400;
		margin: 20px 0 10px 0;
	}

		@media screen and (max-width: 480px) {
			h1 {
				font-size: 40px;
			}
		}

	h2 {
		margin: 25px 0 10px 0;
		font-size: 50px;
	}

		.view-imprint h2,
		.view-data-privacy h2 {
			font-size: 30px;
			margin-bottom: 0;
		}

		.view-data-privacy h3 {
			font-size: 24px;
			margin: 30px 0 0 0;
		}

		.view-home h2 {
			text-align: center;
		}

		@media screen and (max-width: 480px) {
			.view-home h2 {
				font-size: 35px;
			}
		}

	h4 {
		margin-bottom: 0;
	}

/* Inhalt
----------*/

	main {
		margin-top: 135px;
		background-color: #FFFFFF;
		padding-top: 30px;
	}

		@media screen and (max-width: 1280px) {
			main {
				margin-top: 100px;
			}
		}

		@media screen and (max-width: 480px) {
			.view-home main {
				margin-top: 120px;
			}
		}

		@media screen and (max-width: 480px) {
			main {
				margin-top: 50px;
			}
		}

	.view-home main,
	.view-portal main {
		padding-top: 0;
	}

	.view-dashboard main {
		padding-top: 0;
	}

/* Block
----------*/

	.block {
		display: block;
		position: relative;
		padding-top: 50px;
		text-align: center;
	}

	.block:after {
		content: '';
		clear: both;
		display: table;
	}

/* Header
----------*/

	header {
		-webkit-box-shadow: 0px 0px 33px -15px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 0px 33px -15px rgba(0,0,0,0.75);
		box-shadow: 0px 0px 33px -15px rgba(0,0,0,0.75);
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;
		background-color: rgba(255,255,255,0.97);
		height: 135px;
	}

	@media screen and (max-width: 1280px) {
		header {
			height: 100px;
		}
	}

	@media screen and (max-width: 1160px) {
		header {
			height: 80px;
		}
	}

/* Logo
---------*/

	#logo {
		display: inline-block;
	}

	#logo img {
		margin: 30px 0 20px 0;
		height: 80px;
		position: relative;
		left: -15px;
	}

	@media screen and (max-width: 1280px) {
		#logo img {
			margin: 15px 0 0 10px;
			height: 70px;
		}
	}

	@media screen and (max-width: 1160px) {
		#logo img {
			height: 60px;
			margin-top: 10px;
		}
	}

/* Mobiles Menü Toggler
------------------------*/

	.mobile-nav-toggler {
		display: none;
		height: 40px;
		width: 40px;
		background-image: url('../img/icon/menu.svg');
		background-size: 100% auto;
		background-position: center center;
		background-repeat: no-repeat;
		position: absolute;
		top: 20px;
		right: 20px;
		cursor: pointer;
	}

	.mobile-nav-toggler:hover {
		opacity: 0.7 !important;
	}

	@media screen and (max-width: 1160px) {
		.mobile-nav-toggler {
			display: block;
		}
	}

/* Navigation
--------------*/

	nav {
		float: right;
		margin-top: 20px;
	}

	@media screen and (max-width: 1160px) {
		nav {
			display: none;
		}
	}

	nav ul {
		list-style-type: none;
		margin-left: 0;
		padding-left: 0;
	}

	nav ul li {
		display: inline-block;
	}

	nav ul li a {
		display: block;
		padding: 35px 25px 30px 25px;
	}

		@media screen and (max-width: 1280px) {
			nav ul li a {
				padding: 5px 25px 10px 25px;
			}
		}

		@media screen and (max-width: 1180px) {
			nav ul li a {
				padding-left: 20px;
				padding-right: 20px;
			}
		}

	nav ul li a img {
		display: block;
		float: left;
		height: 24px;
		margin-right: 5px;
	}

	nav ul li:last-of-type a {
		padding-right: 0;
	}

	nav ul li a.adminlink {
		background-color: #042040;
		padding: 10px 20px;
		color: #FFFFFF;
		border-radius: 5px;
	}

	nav ul li a:hover {
		opacity: 0.8;
	}

	nav ul li a.icon-heart {
		background-image: url('../img/icon/heart.svg');
		background-size: 20px auto;
		background-repeat: no-repeat;
		background-position: 12px 37px;
		padding-left: 40px;
	}

		@media screen and (max-width: 1280px) {
			nav ul li a.icon-heart {
				background-position: 12px 7px;
			}
		}

/* Features
------------*/

	.page-features-more-button {
		padding-top: 50px;
		text-align: center;
	}

/* Footer
----------*/

	footer {
		background-color: #042040;
		padding-top: 50px;
		padding-bottom: 50px;
		margin-top: 50px;
	}

	.view-home footer {
		margin-top: 0;
	}

	footer,
	footer * {
		color: #FFFFFF;
		line-height: 30px;
		font-weight: 200;
	}

	footer a:hover {
		color: #FFFFFF;
		opacity: 0.8;
	}

/* Skroll-Top-Button
---------------------*/

	.scroll-top-button {
		display: none;
		position: fixed;
		right: 20px;
		bottom: 20px;
		height: 50px;
		width: 50px;
		background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRkZGRkZGIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiPjxwYXRoIHN0eWxlPSJjb2xvcjojMDAwMDAwO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7Zm9udC1zaXplOm1lZGl1bTtsaW5lLWhlaWdodDpub3JtYWw7Zm9udC1mYW1pbHk6c2Fucy1zZXJpZjt0ZXh0LWluZGVudDowO3RleHQtYWxpZ246c3RhcnQ7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1kZWNvcmF0aW9uLWxpbmU6bm9uZTt0ZXh0LWRlY29yYXRpb24tc3R5bGU6c29saWQ7dGV4dC1kZWNvcmF0aW9uLWNvbG9yOiMwMDAwMDA7bGV0dGVyLXNwYWNpbmc6bm9ybWFsO3dvcmQtc3BhY2luZzpub3JtYWw7dGV4dC10cmFuc2Zvcm06bm9uZTtkaXJlY3Rpb246bHRyO2Jsb2NrLXByb2dyZXNzaW9uOnRiO3dyaXRpbmctbW9kZTpsci10YjtiYXNlbGluZS1zaGlmdDpiYXNlbGluZTt0ZXh0LWFuY2hvcjpzdGFydDt3aGl0ZS1zcGFjZTpub3JtYWw7Y2xpcC1ydWxlOm5vbnplcm87ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTt2aXNpYmlsaXR5OnZpc2libGU7b3BhY2l0eToxO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtjb2xvci1pbnRlcnBvbGF0aW9uOnNSR0I7Y29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzOmxpbmVhclJHQjtzb2xpZC1jb2xvcjojMDAwMDAwO3NvbGlkLW9wYWNpdHk6MTtmaWxsOiNGRkZGRkY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjEuOTk5OTk5ODg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MTtjb2xvci1yZW5kZXJpbmc6YXV0bztpbWFnZS1yZW5kZXJpbmc6YXV0bztzaGFwZS1yZW5kZXJpbmc6YXV0bzt0ZXh0LXJlbmRlcmluZzphdXRvO2VuYWJsZS1iYWNrZ3JvdW5kOmFjY3VtdWxhdGUiIGQ9Im0gMTEuOTg0Mzc2LDYuOTk5OTk3MiBhIDEuMDAwMDk5OSwxLjAwMDA5OTkgMCAwIDAgLTAuNjkxNDEsMC4yOTI5NyBMIDMuMzA0Njg1OSwxNS4yODMxOTcgYSAxLjAwMDA5OTksMS4wMDAwOTk5IDAgMSAwIDEuNDE0MDYsMS40MTQwNyBsIDcuMjgxMjUwMSwtNy4yODMyMDk4IDcuMjgxMjUsNy4yODMyMDk4IGEgMS4wMDAwOTk5LDEuMDAwMDk5OSAwIDEgMCAxLjQxNDA2LC0xLjQxNDA3IGwgLTcuOTg4MjgsLTcuOTkwMjI5OCBhIDEuMDAwMDk5OSwxLjAwMDA5OTkgMCAwIDAgLTAuNzIyNjUsLTAuMjkyOTcgeiI+PC9wYXRoPjwvc3ZnPg==");
		background-size: 80% auto;
		background-position: center center;
		background-color: #409D27;
		z-index: 25;
		cursor: pointer;
		border-radius: 10px;
		-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	}

	.scroll-top-button:hover {
		opacity: 0.8;
	}

/* Infopopup
-------------*/

	.infopopup {
		position: fixed;
		z-index: 999999;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.infopopup-bgr {
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0,0,0,0.5);
	}

	.infopopup-closer {
		position: fixed;
		z-index: 2;
		top: 0;
		right: 0;
		height: 50px;
		width: 50px;
		background-image: url('../img/icon/times.svg');
		background-size: 40px auto;
		background-repeat: no-repeat;
		background-position: 0 center;
		cursor: pointer;
	}

	.infopopup h3 {
		padding-left: 30px;
		background-size: 24px auto;
		background-repeat: no-repeat;
		background-position: 0 center;
	}

		@media screen and (max-width: 899px) {
			.infopopup h3 {
				background-position: 0 5px;
			}

			.infopopup p {
				font-size: 20px;
			}
		}

	.infopopup-header {
		display: block;
		background-color: #409D27;
		height: 50px;
		border-top-left-radius: 7px;
		border-top-right-radius: 7px;
		line-height: 50px;
		font-weight: normal;
		padding-left: 20px;
		color: #FFFFFF;
		font-family: "Fredoka One",Helvetica,Arial,sans-serif;
	}

	.infopopup-frame {
		position: absolute;
		background-color: #FFFFFF;
		border-radius: 10px;
		margin-bottom: 30px;
		min-width: 700px;
		top: 50%;
		height: auto;
		max-height: 80%;
		z-index: 3;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	@media screen and (max-width: 768px) {
		.infopopup-frame {
			width: calc(100% - 40px);
			min-width: unset;
		}
	}

	.infopopup-body {
		overflow-y: auto;
		height: 500px;
	}

		@media screen and (max-width: 899px) {
			.infopopup-body {
				overflow-y: auto;
				height: 400px;
			}
		}

	html.has-infopopup {
		overflow: hidden;
	}

/* Formular
------------*/

	form {

	}

	form .field {
		margin-bottom: 25px;
	}

	form .field:after {
		content: '';
		clear: both;
		display: table;
	}

	.field-label {
		display: block;
		padding-bottom: 10px;
		line-height: 130%;
	}

	.field-input input,
	.field-input select,
	.field-input textarea {
		display: block;
		padding: 10px 20px;
		border: 1px solid #DDDDDD;
		width: 100%;
		border-radius: 10px;
		background-color: #FFFFFF;
	}

	form .btn {
		border-radius: 10px;
		padding: 10px 30px;
		cursor: pointer;
	}

/* Newsletter
--------------*/

	#newsletter {
		margin: 70px auto 50px auto;
		max-width: 80%;
		padding: 30px 50px;
		background-color: rgba(255,255,255,0.5);
		border-radius: 25px;
		background-color: #409D27;

		background-image: url('/project/rochus/scope/www/pub/img/newsletter-bgr.svg');
		background-repeat: no-repeat;
		background-position: center right -60%;
		background-size: contain;
	}

		@media screen and (max-width: 1024px) {
			#newsletter {
				max-width: unset;
				width: 100%;
				padding: 10px 20px;
			}

			#newsletter [name="lastname"] {
				margin-top: 20px;
			}

		}

	#newsletter h3 {
		font-size: 38px;
	}

		@media screen and (max-width: 1024px) {
			#newsletter h3 {
				font-size: 28px;
			}
		}


	#newsletter * {
		color: #FFFFFF;
	}

	#newsletter input[type="text"] {
		color: #424242;
	}

	#newsletter input[type="submit"] {
		background-color: #042040;
		border: none;
	}

	.newsletter-dsgvo {
		font-size: 14px;
		padding:20px 10px;
		opacity: 0.7;
	}

/* Events
----------*/

	@media screen and (max-width: 480px) {
		.ui-event--content h3 {
			font-size: 20px !important;
		}
	}