@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Quicksand:300,500&display=swap');

html{
	font-size: 100px;
}

img {
	max-width: 100%;
}

body{
	font-family: 'Quicksand', sans-serif;
	font-weight:300;
	font-size:.20rem;
	background:#F5F2EC;
	color:#596473;
	margin:0;
	line-height:.29rem;
}

body>div{
	margin:.50rem .20rem .20rem;
}

header{
	position:fixed;
	left:0rem;
	top:0rem;
	right:0rem;
	padding:0 .10rem;
	line-height:.40rem;
	background:#6A86A8;
	background:rgba(106,134,168,.9);
	z-index:999;
}
header a{
	text-decoration:none;
	color:#fff;
	font-weight:300;
	font-size:.20rem;
}
header>ul{
	float:right;
	margin:0;
	padding:0;
	list-style:none;
}
header>ul>li{
	float:left;
	margin:0 0 0 .10rem;
}

h1{
	font-weight:500;
	font-size:.35rem;
	line-height:.40rem;
	margin:0 auto .10rem;
	max-width:6.50rem;
}
h1 small{
	display: block;
	font-size: .2rem;
	color: #990f09;
}
h2{
	font-weight:500;
	font-size:.25rem;
	margin:.20rem auto .10rem;
	max-width:6.50rem;
}

.half{
	float: left;
	width: 50%;
	box-sizing: border-box;
	padding-right: .05rem;
}
.half+.half{
	padding: 0;
	padding-left: .05rem;
}

.half h2,
.half h3{
	margin:0 0 .10rem ;
}

h3.push{
	color:#53AA56;
	margin:0 auto .10rem;
	max-width:6.50rem;
	display: block;
}

strong{
	font-weight:500;
}

p,address{
	display:block;
	margin:0 auto .10rem;
	max-width:6.50rem;
}
p img{
	float:left;
	width:2.50rem;
	margin:0 .20rem .20rem 0;
}
a{
	color:#6A86A8;
}

article{
	display:block;
	margin:.20rem 0;
	padding:.20rem .20rem .10rem;
	background:#fff;
	border:.01rem solid #596473
}
form{
	margin:0 auto .10rem;
	max-width:6.50rem;
}

li.act a,
a:hover,
input[type=button]:hover,
input[type=submit]:hover{
	color:#87C9F4;
}

.label,label{
	display:block;
	float: left;
	width: 50%;
	margin: 0 0 .1rem;
	padding: 0.05rem;
	box-sizing: border-box;
}

.label:nth-child(2n),
label:nth-child(2n){
	padding-right: 0;
}
.label:nth-child(2n+1),
label:nth-child(2n+1){
	padding-left: 0;
}

.label strong,
label strong{
	/*float:left;
	width:1.40rem;*/
	display: block;
	font-size: .14rem;
}


.beacon{
	display:block;
	/*height:70rem;
	width:200rem;*/
	max-width:6.50rem;
	padding: .10rem .15rem;
	border-radius:.05rem;
	background:#53AA56;
	text-align:left;
	font-size:.30rem;
	line-height:.40rem;
	text-decoration:none;
	color:#fff !important;
	margin:0 auto .10rem;
	/*border:2rem solid #53AA56;*/
}
.beacon.phase{
	background: #990f09;
}
.beacon:before,
.beacon svg{
	content: '?';
	float: right;
	background: #fff no-repeat center;
	background-size: .32rem .32rem;
	border-radius: 50%;
	color: #53AA56;
	height: .40rem;
	width: .40rem;
	line-height: .40rem;
	font-size: .30rem;
	text-align: center;
	
	height: 1.30rem;
	width: 1.30rem;
	border: .1rem solid #fff;
	display: block;
	float: none;
	margin: auto;
	font-size: 1.3rem;
	line-height: 1.3rem;
}
.beacon svg{
	height: .30rem;
	width: .30rem;
	border: .05rem solid #fff;
}
.beacon.lit svg{
	height: 1.30rem;
	width: 1.30rem;
	border: .1rem solid #fff;
	display: block;
	float: none;
	margin: auto;
}
.beacon{
	text-align: center;
}
/*
.beacon:hover{
	background:#fff;
	color:#53AA56;
}*/
.input>span:before{
	content: '';
	float: right;
	background: no-repeat center;
	background-size: .2rem;
	height: .2rem;
	width: .2rem;
	margin: .07rem 0 0 0
}
.beacon.lit:before,
input:valid+span:before{
	content: '';
	background-image: url(/pages/img/haken.svg);
}
.beacon.phase:before{
	content: none;
}

.beacon.lit:before{
	display: none;
}


fieldset{
	border:.01rem solid #97A9C2;
	margin:0 0 10rem 0;
	padding:.05rem .10rem;
	border-radius:.05rem;
}
input:not([type=file]),textarea,select,span.input{
	font-family: 'Quicksand', sans-serif;
	border:#97A9C2 .01rem solid;
	border-radius:.04rem;
	padding:.02rem .1rem;
	color:#596473;
	font-size:.20rem;
	height: .41rem;
	line-height: .35rem;
	box-sizing: border-box;
	width: 100%;
	background: #fff;
}
input:not([type=file]),textarea{
	appearance:none;
	-webkit-appearance:none;	
}
span.input{
	position: relative;
	display: block;
	border: none;
}
span.input>span{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border:#97A9C2 .01rem solid;
	border-radius:.04rem;
	padding:.02rem .1rem;
}
input[type=file]{
	/*border:#97A9C2 .01rem solid;
	border-radius:.04rem;
	padding: .05rem ;
	width: 100%;
	min-height: .3rem;
	color:#596473;
	box-sizing: border-box;
	display: block;*/
	position: absolute;
	opacity: 0;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}

[disabled]{
	opacity:0.5;
}
textarea{
	width:3.42rem;
	min-width:3.42rem;
	max-width:3.42rem;
	min-height:1.50rem;
}
input[type=button],
input[type=submit]{
	background:#97A9C2;
	color:#fff;
	width: auto;
	margin:0 0 .1rem;
}
input[type=button]:hover,
input[type=submit]:hover{
	border-color:#87C9F4;
	background-color:#fff;
}

input.invalid,
input.invalid+span{
	border-color:#990f09 !important;
	color: #990f09 !important;
}

.olds{
	list-style:none;
	margin:0;
	padding:0;
}
.olds>li{
	display: block;
}
.olds>li>a{
	display: block;
	background:#596473;
	color:#fff;
	text-decoration:none;
	text-align:left;
	overflow:hidden;
	margin:0 0 .10rem 0;
	font-size:.18rem;
	line-height:.20rem;
	padding: .05rem;
	border-radius: .05rem;
}
.olds>li.video>a{
	background:#53AA56;
}
.olds>li>a>small{
	display:block;
	font-size:.12rem;
}
.olds>li>a:hover,
.olds>li.act>a{
	background:#87C9F4;
	color: #000;
}

input.right{
	float:right;
	margin:.10rem 0;
}
.label+input.right,
label+input.right{
	margin-top:-0.38rem;
}

#loader:before{
	content:"Video wird geladen...";
}
#loader.hide{
	display:none;
}

video{
	display:none;
}
video.act{
	display:block;
}

/* app */
body.iphone header,
body.iphone footer{
	display:none;
}
body.iphone>div{
	margin-top:.20rem;
}

footer {
	text-align: center;
	display: block;
	clear: both;
	font-size: .14rem;
}
footer ul{
	list-style: none;
	margin: .10rem 0;
	padding: 0;
}
footer ul li{
	display: inline;
}

footer ul li a{
	text-decoration: none;
}


.iphone select{
	-webkit-appearance:none;
}

.iphone .grecaptcha-badge{
	display: none;
}

.iphone>select,
.iphone>input{
	width: calc(50% - 5px);
	float: left;
}
.iphone>select{
	margin-right: 10px;
}
.iphone>input{
	display: none;
}
.iphone>input.show{
	display: block;
}

input.end{
	float: right;
}

.news{
	background: #596473;
	color: #fff;
	max-width:6.50rem;
	padding: .10rem .15rem;
	border-radius:.05rem;
	margin:0 auto .10rem;
}

.news a{
	color: inherit;
}

.news small{
	float: right;
}

input[name="usrmail_check"]{
	all:unset;
	position: absolute;
	height: 1px;
	height: 0;
	overflow: hidden;
}

@media(max-width:700px){
	html{
		font-size: 80px;
	}
	
	p img{
		float: none;
		display: block;
		margin: auto;
	}
	
	header>ul{
		position:absolute;
		right:0rem;
		top:0rem;
	}
	header>ul:before{
		content:"|||";
		letter-spacing:.02rem;
		font-weight:300;
		color:#fff;
		font-size:.25rem;
		line-height:.37rem;
		text-align:center;
		height:.40rem;
		width:.40rem;
		display:block;
		float:right;
		
		transform:rotate(90deg);
		-webkit-transform:rotate(90deg);
		-moz-transform:rotate(90deg);
	}
	header>ul>li{
		display:none;
		clear:both;
		background:rgba(106,134,168,.9);
		padding:0 .10rem;
		line-height:.40rem;
		float:none;
		margin:0;
	}
	header>ul.act>li{
		display:block;
	}
	header>ul>li>a{
		display:block;
		line-height:.40rem;
	}
	td>input{
		width:1.30rem;
		
	}
	header>ul>li>span{
		display:none;
	}
	
	.label.full,
	label.full{
		display: block;
		clear: both;
		width: 100%;
		padding: 0;
	}
	
}
@media(max-width:350px){
	html{
		font-size: calc(100vw / 3.5)
	}
}