/* allgemein */

html, body, div, input, textarea, select, img, span, form, hr, ul, li, a, pre, form, p, table
{
	text-decoration: none; 
	margin: 0;
	padding: 0;
	border: 0;
	behavior: url('hover.htc');
}

@font-face
{
 	font-family: 'Ubuntu-L';
    src: url('fonts/Ubuntu-L.eot') format('eot'),
         url('fonts/Ubuntu-L.woff') format('woff'),
		 url('fonts/Ubuntu-L.woff2') format('woff2'),
         url('fonts/Ubuntu-L.ttf') format('truetype'),
		 url('fonts/Ubuntu-L.otf') format('opentype'),
         url('fonts/Ubuntu-L.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
 	font-family: 'Ubuntu-M';
    src: url('fonts/Ubuntu-M.eot') format('eot'),
         url('fonts/Ubuntu-M.woff') format('woff'),
		 url('fonts/Ubuntu-M.woff2') format('woff2'),
         url('fonts/Ubuntu-M.ttf') format('truetype'),
		 url('fonts/Ubuntu-M.otf') format('opentype'),
         url('fonts/Ubuntu-M.svg') format('svg');
    font-weight: medium;
    font-style: normal;
}

body
{
	background: #fff url(elements.gif) no-repeat;
	background-size: 30vw 30vw;
	background-position: max(calc(100% + 25em - 40vw),100%) 0%;
	font-family: 'Ubuntu-L', sans-serif;
	font-size: 14.7px;
	font-size: 0.92em;
	color: #3F3F3F;
	line-height: 1.8em;
}

a
{
	color: #0053A4;
	background-color: transparent;
	padding: 0 0.2em 0 0.1em;
	font-family: 'Ubuntu-M', sans-serif;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

a.img
{
	padding: 0;
}

a.bb
{
	padding: 0.2em 0.75em;
}

a:hover
{
	background-color: #0053A4;
	color: #fff;
}

a.img:hover
{
	background-color: transparent;
}

h1
{
	font-size: 1.5em;
}

h2, blockquote
{
	font-size: 1.3em;
}

h3
{
	font-size: 1.1em;
}

strong, em
{
	letter-spacing: 0.015em;
}

strong
{
	font-family: 'Ubuntu-M', sans-serif;
	font-weight: normal;
	padding: 0 0.2em 0 0.1em;
}

h1, h2, h3, blockquote
{
	display: inline;
	margin: 0;
	font-family: 'Ubuntu-M', serif;
	letter-spacing: 0.015em;
}

h1 a, h2 a, h3 a
{
	color: #fff;
	font-family: inherit;
}

h1 a, h2 a, h3 a
{
	background-color: #285D4B;
}

h1 a:hover, h2 a:hover, h3 a:hover
{
	background-color: #transparent;
}

h1 a:hover, h2 a:hover, h3 a:hover
{
	color: #0053A4;
}

hr
{
	border: 1px solid #0053A4;
}

blockquote
{
	text-align: center;
	font-weight: bold;
	display: block;
	border: 0;
	margin: 0;
	padding: 0;
}

table
{
	width: 100%;
}

td
{
	vertical-align: top;
	padding: 10px 0 0 0;
}

td.r
{
	padding: 0 5px 5px 0;
}

ul li
{
	list-style-type: none;
	margin: 0 0 0 1em;
	text-indent: -0.7em;
	line-height: 1.8em;
}
	
ul li::before 
{
	content: "» ";
}

span.alright
{
	color: #00AC5B;
	font-weight: bold;
	font-style: italic;
}

span.error
{
	color: #FF535B;
	font-weight: bold;
	font-style: italic;
}


/* Box-Modell Frontend */

div#box
{
	margin: 0;
	width: 100%;
	position: relative;
	float: left;
}

div#top
{
	position: relative;
}

div#top img
{
	width: min(calc(27vw + 25em),calc(100vw - 7em));
	max-width: 870px;
	margin: min(4vw,2.3em) 0 min(4vw,2.3em) 3em;
}

div#top a, div#top a:hover
{
	color: transparent;
	background: transparent;
}

div.main
{
	margin: 3em;
	text-align: left;
	clear: both;
}

div.img, div.imgsmall
{
	margin: 0 0 1.5em 0;
}

small
{
	color: #4B4B4B;
	font-size: 0.85em;
}

div.main img
{
	max-width: 100%;
}

div.main img.illu, div.main img
{
	display: block;
	margin: auto;
}

/* spezielle Stile */

ul#rpablocknavi, ul#rpaquestionnavi
{
	display: flex;
	width: 100%;
	flex-flow: row wrap;
	margin: 0 0 0.5em 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
}

ul#rpablocknavi li::before , ul#rpaquestionnavi li::before
{
	content: "";
}

ul#rpablocknavi li, ul#rpaquestionnavi li
{
	text-indent: 0;
	border: 0.2em solid #fff;
	margin: 0;
	flex: 1 0 auto;
	text-align: center;
	width: auto !important;
	list-style-type: none;
	line-height: 1.5em;
}

ul#rpablocknavi li a, ul#rpaquestionnavi li a
{
	display: block;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
}

ul#rpablocknavi li a
{
	background-color: #81CEE7;
	border: 0.2em solid #81CEE7;
}

ul#rpaquestionnavi li a
{
	background-color: #A9D8A2;
	border: 0.2em solid #A9D8A2;
}

ul#rpaquestionnavi li a.irrelevant
{
	background-color: #E8F3E6;
	border: 0.2em solid #E8F3E6;
}

ul#rpaquestionnavi li a.irrelevant:hover
{
	cursor: not-allowed;
}

ul#rpablocknavi li a.active
{
	background-color: #0053A4;
	border: 0.2em solid #0053A4;
}

ul#rpaquestionnavi li a.active
{
	background-color: #285D4B;
	border: 0.2em solid #285D4B;
}

ul#rpablocknavi li a.current, ul#rpaquestionnavi li a.current
{
	background-color: #fff !important;
}

ul#rpablocknavi li a.current
{
	color: #0053A4;
	border: 0.2em solid #0053A4;
}

ul#rpaquestionnavi li a.current
{
	color: #285D4B;
	border: 0.2em solid #285D4B;
}

div.label
{
	font-weight: normal;
}

div.cell
{
	padding: 0 0 0.5em 0;
}

div.row
{
	padding: 0 0 1em 0;
	overflow: auto;
}

a.img
{
	background: none;
	padding: 0;
	border: 0;
}

a.img img.thumb
{
	padding: 0;
	border: 2px solid white;
	margin: 5px;
}

a.img img.thumb:hover
{
	border: 2px solid #81CEE7;
}

div.main video
{
	width: calc(100vw - 7.5em);
	height: calc(56.25vw - 4.2em);
}

audio
{
	width: 100%;
	display: block;
	margin: 0;
}

/* mehr */

div.mehr
{
	background-color: #F7FAF7;
	display: inline;
}

div.mehr span.content
{
	padding: 0 1em 1em 1em;
}

div.mehr span.content, div.mehr span.labelzu
{
	display: none;
}

div.mehr span.labelauf, div.mehr span.labelzu
{
	color: #fff;
	font-weight: bold;
	padding: 0.2em;
	background-color: #A9D8A2;
}

div.mehr span.labelauf:hover, div.mehr span.labelzu:hover
{
	cursor: help;
}

div.mehr span.labelzu
{
	margin: 0 0.5em 0 0;
}

/* Anker/Info */

span.anker
{
	background-color: #A9D8A2;
	color: #fff;
	padding: 0.2em;
	position: relative;
}

span.info:hover, span.anker:hover
{
	cursor: help !important;
}

div.info
{
	background-color: #F7FAF7;
	color: #333;
	padding: 0.6em 1em;
	border: 0.2em solid #A9D8A2;
	font-size: 0.9em !important;
	font-weight: normal !important;
	font-family: 'Ubuntu-L', sans-serif;
	position: absolute;
	top: 1.5em;
	left: 0;
	width: 20em;
	z-index: 10;
}

/* Aufklapp */

div.f
{
	display: inline-block;
	text-decoration: none;
	clear: both;
	margin: 0 0 1em 1.5em;
	font-family: 'Ubuntu-M', sans-serif;
	color: #0053A4;
}

div.f:hover
{
	cursor: pointer;
}
	
span.pr, span.pd
{
	float: left;
	text-align: left;
	width: 1em;
	height: 1em;
	font-size: 2em;
	position: absolute;
	left: 1.3em;
}

span.pr
{
	display: block;
}

span.pd
{
	display: none;
}

div.a
{
	margin: 0 0 2em 1.5em;
}

/* Formulare */

div.answerbox
{
	border-left: 0.2em solid #3F3F3F;
	padding-left: 1em;
	line-height: 1.75em;
}

div.answerbox.red
{
	border-left: 0.3em solid #FF535B;
}

div.answerbox.yellow
{
	border-left: 0.3em solid #FFAC5B;
}

div.answerbox.green
{
	border-left: 0.3em solid #00AC5B;
}

div.answerbox.disabled
{
	border-left: 0.3em solid #9E9E9E;
}

div.answerbox small
{
	padding: 0 0 0 0.5em
}

label
{
	font-weight: normal;
	padding: 0;
	border: 0;
	margin: 0;
	display: inline-block;
	position: relative;
}

label.radio, label.checkbox
{
	padding: 0.5em 1em 0 2.5em;
	margin: 0;
}

label.radio:hover, label.checkbox:hover
{
	background-color: #FAFAFA;
	cursor: pointer;
}

label.disabled
{
	opacity: 0.5;
}

label.radio.disabled:hover, label.checkbox.disabled:hover
{
	background-color: transparent;
	cursor: not-allowed;
}

input, textarea, select, label
{
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'Ubuntu-L', sans-serif;
	font-size: 14.7px;
	font-size: 1em;
	color: #333;
	line-height: 1.75em;
}

input[type="radio"], input[type="checkbox"]
{
	margin: 0.3em 0 0 -2em;
	position: absolute;
	accent-color: #0053A4;
}

input[type="submit"]
{
	background: #00ACA4;
	color: #fff;
	padding: 8px 16px;
	width: auto;
	font-weight: bold;
	float: right;
	margin-left: 1em;
}

input[type="submit"]:hover
{
	background: #7ED4D0;
}

input[type="submit"]:active, input[type="submit"]:focus
{
	outline: none;
	background: #005652;
}

input[type="submit"][disabled="disabled"]
{
	opacity: 0.5;
}

input[type="submit"][disabled="disabled"]:hover
{
	cursor: not-allowed;
}

div.lock
{
	width: 20px;
	margin: 0;
	cursor: pointer;
	position: relative;
	top: -2.5em;
	left: calc(100% - 1.8em);
}

input[type="text"], input[type="password"], input[type="file"]
{
	border: 0.2em solid #3F3F3F;
	padding: 0.6em;
	width: calc(100% - 1.6em);
}

input[type="text"]:focus, input[type="text"]:active, 
input[type="password"]:focus, input[type="password"]:active,
textarea:focus, textarea:active
{
	outline: none;
	background: #FAFAFA;
}

label.input span, label.textarea span, label.box span
{
	background: #3F3F3F;
	padding: 0.3em 0.6em;
	color: #fff;
	font-weight: bold;
}

div.labelbox
{
	border-left: 0.2em solid #3F3F3F;
	padding: 0.6em 0 0 0.6em;
}

textarea
{
	border: 0.2em solid #3F3F3F;
	padding: 0.6em;
	width: calc(100% - 1.6em);
	height: 200px;
}

textarea.memo
{
	height: 70px;
}

textarea:focus
{
	outline: none;
	border: 0.2em solid #6D6D6D;
}

textarea.disabled
{
	opacity: 0.5;
}

textarea.disabled:hover
{
	cursor: not-allowed;
}

div.preh5p
{
	color: #00ACA4;
	height: 4em;
	position: absolute;
	left: 2em;
}

div.preh5p div
{
	font-size: 3em;
	line-height: 1em;
	height: 1em;
	width: 1em;
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

div.h5p
{
	border: 0.2em solid #00ACA4;
	padding: 1em;
	padding-top: 4em;
}

/* Flex-Menü */

.header
{
	position: relative;
	width: 100%;
	z-index: 3;
	margin: 0 0 1em 0;
	overflow: hidden;
}

.header div.wrap
{
	background: #00ACA4;
}

.header ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
}

.header ul li
{
	text-indent: 0;
	padding-bottom: 0;
	margin: 0;
	width: 100%;
	line-height: 1.5em;
}

.header ul li::before
{
	content: "";
}

.header li a
{
	display: block;
	padding: 1em;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

.header li a:hover
{
	background-color: #2252A3 !important;
}

.header ul li a.active
{
	text-decoration: underline;
}

.header ul li a.active:hover
{
	color: #fff !important;
}

.header ul li ul
{
	background-color: #107EA2;
}

.header li ul li a
{
	padding-left: 3em;
}

.header label
{
	background-color: transparent;
}

.header .menu-icon:hover
{
	background-color: transparent;
	filter: drop-shadow(0 0 0.05em #F6DB9E);
}

.header .menu
{
	clear: both;
	max-height: 0;
	transition: max-height .5s ease-out;
}

.header .menu-icon
{
	cursor: pointer;
	display: inline-block;
	float: right;
	padding: 1.5em 1em;
	position: relative;
	user-select: none;
}

.header .menu-icon .navicon
{
	background: #fff;
	display: block;
	height: 2px;
	position: relative;
	transition: background .5s ease-out;
	width: 1.2em;
}

.header .menu-icon .navicon:before, .header .menu-icon .navicon:after
{
	background: #fff;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
}

.header .menu-icon .navicon:before
{
	top: 0.4em;
}

.header .menu-icon .navicon:after
{
	top: -0.4em;
}

.header .menu-btn
{
	display: none;
}

.header .menu-btn:checked ~ .menu
{
	max-height: calc(3.5em * 16);
}

.header .menu-btn:checked ~ .menu-icon .navicon
{
	background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before
{
	transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after
{
	transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after
{
	top: 0;
}


/* Footer */

div#footer
{
	margin: 0;
	padding: 3em;
	width: calc(100% - 6em);
	clear: both;
}

div#footer ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	display: flex;
	flex-flow: row wrap;
	width: 100%;
}

div#footer ul.menu
{
	justify-content: center;
}

div#footer ul.row1 li, div#footer ul.row2 li, div#footer ul.row3 li
{
	width: 100%;
	text-align: center;
}

div#footer ul.row1 li
{
	height: 12em;
}

div#footer ul.row2 li
{
	height: 15em;
}

div#footer ul.row3 li
{
	height: 16em;
}

div#footer ul li
{
	text-indent: 0;
	padding-bottom: 0;
	margin: 0;
	width: auto;
}

div#footer ul.menu li
{
	flex: 0 0 auto;
}

div#footer ul li.left, div#footer ul li.center, div#footer ul li.right
{
	text-align: center;
}

div#footer ul li::before
{
	content: "";
}

div#footer ul li a
{
	display: block;
	text-decoration: none;
}

div#footer ul li a img
{
	height: auto;
	max-width: 100%;
}

div#footer ul.menu li a
{
	padding: 1em 0.75em;
	color: #00ACA4;
	font-weight: bold;
}

div#footer ul.menu li a:hover
{
	background: #00ACA4;
	color: #fff;
}

div#footer ul.menu li a.active
{
	text-decoration: underline;
}

@media (min-width: 40em)
{
	/* Flex-Menü */
	
	.header
	{
		width: 100%;
		height: 3.5em;
		overflow: visible;
	}
	
	.header div.wrap
	{
		width: calc(100% - 3.5em);
		float: left;
	}
	
	.header div.bgdiag
	{
		float: right;
		width: 3.5em;
		height: 3.5em;
		background: transparent url(bgdiag.gif) no-repeat top right;
		background-size: auto 100%;
	}
	
	.header ul
	{
		display: flex;
		width: 100%;
		flex-flow: row wrap;
	}
	
	.header li
	{
		flex: 1 0 auto;
		text-align: left;
		width: auto !important;
		position: relative;
	}
	
	.header li a
	{
		padding: 1em 0 1em 3em;
	}
	
	.header ul li ul
	{
		display: none;
		position: absolute; 
		top: 3.5em;
		left: 0;
		width: auto;
		padding: 0;
	}
	
	.header ul li:hover ul
	{
		display: inline-block;
	}
	
	.header li ul li, .header li ul li a
	{
		text-align: left !important;
	}
	
	.header li ul li a
	{
		padding: 1em 1.75em;
	}
	
	.header .menu
	{
		max-height: none;
	}
	
	.header .menu-icon
	{
		display: none;
	}	
	
	div#footer ul li.left
	{
		text-align: left;
	}

	div#footer ul li.center
	{
		text-align: center;
	}

	div#footer ul li.right
	{
		text-align: right;
	}
	
	div#footer ul.row1 li a img
	{
		height: 9.56vw;
	}

	div#footer ul.row2 li a img
	{
		height: 13.24vw;
	}

	div#footer ul.row3 li a img
	{
		height: 14.21vw;
	}

	div#footer ul.row1 li, div#footer ul.row2 li, div#footer ul.row3 li
	{
		width: auto;
		justify-content: space-between;	
		flex: 1 0 auto;
		height: auto;
	}
}

@media (min-width: 48em)
{	
	div#box
	{
		width: min(calc(100% - 0.2em),52em);
		border-left: 0.2em solid #00ACA4;
		margin: auto;
		float: none;
	}
	
	div#top img
	{
		width: min(calc(27vw + 25em),38em);
	}
	
	div.main video
	{
		width: min(calc(100vw - 8em),46em);
		height: min(calc(56.25vw - 4.5em),25.875em);
	}

	div#footer ul.row1 li a img
	{
		height: 5.2em;
	}
	
	div#footer ul.row2 li a img
	{
		height: 7.2em;
	}
	
	div#footer ul.row3 li a img
	{
		height: 7.73em;
	}
}