@charset "UTF-8";

html{
font-size:90%;
font-family: 'Montserrat', sans-serif;
font-family: 'Montserrat Alternates', sans-serif;
height: 100%;
width:100%;
margin: 0;
padding: 0;
}

body{
margin: 0;
padding: 0;
width:100%;
height:100%;
}
:root {
  --varblau: #114C9B;
  --varblaudark: #0A2D5E;
  --varhover: #2180FF;
  --varorange: #ff4444;
  --varbody: #0A2D5E;
  --varplaceh: black;
  --varbg: white;
}
.seite{
	width: calc(100%-30px);}

	@media screen and (max-width: 48em){
	.seite{
}
}
	
	@media screen and (min-width: 48em){.seite{	
}
	}
#header{
	background-image: linear-gradient(80deg, #ddd 0%, #fff 70%, #ddd 100% );	
	background-color: #eee;
    overflow: hidden;
/*    position: absolute;
*/
}

#onehundred
   { height: 100%;
       width: 100%;
       position: absolute;
       overflow: hidden;
       margin: 0;
       padding: 0;
   }

#seite1{
	background-color:#ddd;
}
.sprungmarke{
	/*background-color: #dd6666;*/
	width: 2rem;
	height: 5px;
	position: relative;
	top:60px;
	z-index: 8;
}
.content{
	padding: 0rem 0rem;
	padding-top:  1rem;
	border-top: 1px solid; 
	z-index: 1;
	position: relative;
	/*border-left: 1 solid black
	background-color: #aa2222;*/
	}
	@media screen and (max-width: 48em){.content{
	margin:  2rem auto;}	}
	@media screen and (min-width: 48em){	.content{
	min-width: 40rem;
	width: 50%;
	column-width:18rem;
	column-gap: 2rem;
	margin:  8% auto;
}	}
.content1sp{
	padding: 0rem 0rem;
	padding-top:  1rem;
	border-top: 1px solid; 
	z-index: 1;
	/*border-left: 1 solid black
	background-color: #aa2222;*/
	}
	@media screen and (max-width: 48em){.content1sp{
	margin:  2rem auto;}	}
	@media screen and (min-width: 48em){.content1sp{
	min-width: 40rem;
	width: 50%;
	margin:  8% auto;

}	
	}
	@media screen and (max-width: 48em){	.container{
	padding-top: 0rem;
	padding-bottom: 2rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	}
	}
	
	@media screen and (min-width: 48em){	.container{
	padding:2rem 0;
	}
	}		
	@media screen and (max-width: 48em){#passbild{
	margin: 2rem auto;
	}
	}
	
	@media screen and (min-width: 48em){#passbild{
	margin: 2rem 2rem 0px auto;
	}
	}	
	#passbild{
	width: 100px;
	height:100px;
	border-radius: 50px;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	}

#passbild img{
	width: 100px;
	height: 100px;
	border-radius: 50px;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	}
	@media screen and (max-width: 48em){.spalte{
	width: 100%;
	z-index: 1;
	}
	}
	
	@media screen and (min-width: 48em){.spalte{
	width: 18rem;
	/*min-height:75%;*/
	padding: 0rem 0rem 1rem 0rem;
	/*background-color: white;
	//opacity: 1;*/
	padding-top:  1rem; 
	z-index: 1;
	/*border-left: 1 solid black;
	float: left;*/
	}
	}	

#seite2{
	}

/*#seite2{
background-color:#888;
	border: solid 15px #fff;
width: calc(100%-30px);
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;

}*/
#seite3{
	background-image: linear-gradient(80deg, #ddd 0%, #fff 70%, #ddd 100% );	
	background-color: #eee;
}

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

footer {
	bottom: 0px;	
	text-align: middle;
	background-color:white;
	padding:  15px 0;
	width: calc(100%-30px);
	overflow: visible; 	
	height: 240px;
	}
	@media screen and (min-width: 48em){footer{
	}	}
	@media screen and (max-width: 48em){footer{
	height: 350px;
	
}
}	
.footercontainer{
	vertical-align: middle;
	clear: both;
}
	@media screen and (min-width: 48em){.footercontainer{
	margin: 0rem auto; 
	min-width: 40rem; 
	width: 50%;
	padding: 0px 0px 0rem 0px;

}	
}	
	@media screen and (max-width: 48em){.footercontainer{
	margin:  0rem auto;
	padding: 0rem 1.5rem ;
	box-sizing: border-box;
}	
}
.footercontent{
	top: 0px;
	position: relative;
	/*min-height:75%;*/
	margin:0rem 1rem 0rem 0rem;
	border-top: 1px solid; 
	z-index: 1;
}	
@media screen and (min-width: 48em){.footercontent{
		width: 30%;	
		float: left;
		padding:1rem 0rem 1rem 0rem;
}	
	}	
@media screen and (max-width: 48em){.footercontent{
		width: 100%;
		padding:1rem 0rem;
}	}	
#sonne {
	background-color: rgba(220,220,0,0.7);
	width: 100px;
	height: 100px;
	top: 100px;
	left: 100px;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	text-align: center;
	vertical-align: middle;
	position: relative;
	}
	#testobjekt{
	background-color: rgba(220,20,20,0.7);
	width: 100px;
	height: 100px;
	top: 50%;
	left: 50%;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	text-align: center;
	vertical-align: middle;
	position: fixed;
	visibility: collapse;
	z-index: 4;
	}

/* Steuerung 
-----  Seiten-Navigation  -----  */

@media screen and (min-width: 48em){#mobiletoggler{
		visibility: collapse;
}}
@media screen and (max-width: 48em){#mobiletoggler{
		background-color: var(--varbg);
		position: absolute;
		z-index:2;
		width: 100%;
		text-align:center;
		vertical-align: center;
		height: 40px;
}}
@media screen and (max-width: 48em){#mobiletoggler{
/*		position: fixed;
*/}}
nav {
	position: absolute;
	z-index:3;
	width: 100%;
	text-align:center;
	vertical-align: center;
/*	left:-15px;
*/	
}

@media screen and (max-width: 48em){nav{
		background-color: var(--varbg);
		display: none;
}}

@media screen and (min-width: 48em){nav{
		height: 100px;
}}
.nav{
	top: 0px;
	position: fixed;
/*	height: 50px;
*/}
@media screen and (max-width: 48em){.nav{
/*	height: 40px;*/
}}
#pfeil{
margin: 0 auto;
cursor:pointer;
position:fixed;
bottom:0px;
width: 100%;

}
@media screen and (min-width: 48em){#pfeil{
height: 2rem;
z-index: 8;}}
@media screen and (max-width: 48em){#pfeil{
background:var(--varbg);
height: 3.5rem;
z-index: 10;}}
#pfeilfixed{
	margin: auto;
	width: 2rem;
	position: relative;
}
@media screen and (max-width: 48em){#pfeilfixed{
	top: 1rem;
}}
	@media screen and (min-width: 48em)
{.kaesten{
	padding:10px;
	text-align:left;
	background: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0) 100%), rgba(231, 229, 229, 0.55);
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}
}
@media screen and (min-width: 48em)
{#nav_wrapper{
margin: auto;
position: relative;
width: 480px;
text-align: center;
		background-color: var(--varhover);
}}
ul{
	overflow:hidden;
	margin: 0 auto;
	list-style: none;
	vertical-align:center;
	border-top: solid 0px #333333; 
	border-bottom: solid 1px #333333; 
}	
@media screen and (max-width: 48em){ul{
		border-top: solid 0px #333333; 
		border-bottom: solid 0px #333333; 
	}}	
	@media screen and (max-width: 48em){
	#nav_wrapper li a{
	font-size: 1.2rem;
	line-height: 36px;	
	}
	#nav_wrapper li{
/*		display: none;
*/	}
	#nav_wrapper li.main_nav_visible{
/*		display: block;
*/	}
	}
	
	@media screen and (min-width: 48em){#nav_wrapper  li a{
		width: 120px;
		text-align: center;
		float: left;
		position: relative;
	}	
	}
@media screen and (max-width: 48em){ul{
	padding:6px 10px 0px 10px;
	width:50%;
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}	
	}
	
@media screen and (min-width: 48em){ul{
	min-width:40rem;
	width: 50%;
	height:20px;
	padding:6px 10px 14px 10px;

}	
	}	
.ul{
	border-top: solid 0px #333333; 
	border-bottom: solid 1px #333333; 
}
	@media screen and (max-width: 48em){.ul{
			padding:6px 10px 6px 10px;
}
	}
/*@media screen and (max-width: 48em){.main_nav_higlight{
visibility: visible;
}}*/
#article_head{
color: #ff4444;
font-weight: bold;
font-size: 1.2rem;
}
.main_nav_higlight{
color: #ff4444;
font-weight: bold;
}
#test{
	width:100px;
	height:100px;
left:0px;
	position: sticky;
	background-color: #0ae;
}
#menuepositionierer{
/*	background-color: blue;
*/	}
	@media screen and (max-width: 48em){#menuepositionierer{
	left: 0px;
	bottom:58px;
	position: absolute;
	z-index: 8;
	width: 130px;
	height:40px;
	cursor:move;
	}
	}
	
	@media screen and (min-width: 48em){#menuepositionierer{
/*	right:20vw;
*/	width: 100%;
	bottom:125px;
	z-index: 2;
	position: absolute;
}
	}
	#menuebox {
	cursor:pointer;
	width:40px;
	height:40px;
		visibility: collapse;


/*	border: solid rgba(180, 180, 180, 0.5) 15px;
*/}
@media screen and (min-width: 48em){#menuebox{
	top: 0px;
	right:0px;
	position: absolute;background-color:var(--varbg);
	border-radius: 18px;
	-moz-border-radius: 18px;
	-webkit-border-radius: 40px;
}
@media screen and (max-width: 48em){#menuebox{
	
	bottom: 0px;
	position: absolute;
}}
	#menuebox:hover{
	top: -15px;
	right:-15px;	
	border: solid white 15px;
}
#menuebox:active{
	top: -15px;
	right:-15px;	
	border: solid #dddddd 15px;
}

}
@media screen and (max-width: 48em)
{#menuebox {
	left:0px;
}
#menuebox:hover{
	left:0px;	
}
#menuebox:active{
	left:0px;	
}
}



#burger{ 
	margin:auto;
	position: absolute;
	top: 16px;
	left:8px;	
	width:26px;
	}
.menue {
	margin: 2px;
	background-color: #333333;
	height: 4px; 
	width: 4px;
		border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
float:left;
}	

@media screen and (min-width: 48em){
.menue:hover {
	background-color: var(--varbg);
}}
.menue:active {
	background-color: #777;
}

	@media screen and (max-width: 48em){

	#aufklappmenue{
	/*left:0px;*/
	visibility: visible;
	margin:0px auto;
	top: 0px;
	height: 20px;
	position: absolute;
	vertical-align: center;
	}	
}
	@media screen and (min-width: 48em){
		#aufklappmenue{
	min-width: 40rem;
	width: 100%;
	/*position: relative;*/
	margin: auto;	
	height: 20px;
	border-top: solid 0px #333333;
    border-bottom: solid 0px #333333;
    position: absolute;
	vertical-align: center;
    }	
}

   .symbols{
    width: 20px;
    height: 20px;
    margin: auto;
    position: relative;
    fill: var(--varorange);
/*    position: absolute;
*/    }
	
	/*#anwenden{background-color:#aaaaaa;
	color: #999999;
	border: 2px solid #666666;
	margin: 6px 10px;
	width: 80px;
	float: left;
}*/
/*.anwenden::after, .anwenden::after{
width:100px;
background-color: red;
}*/
#akm_wrapper{
	margin: 0px auto;
	position: relative;
	column-count: 1;
	height: 40px;
	border-top: 0px ;
	border-bottom: 1px solid;
	border-bottom-color:black;
	min-width: 25%;
	width: 335px;
	}
@media screen and (max-width: 48em){.anwenden
	{	float:left;
}}
@media screen and (min-width: 48em){ .anwenden{
	float:left;

  /*display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; 
  justify-content:center;*/
  height: 22px;
	top:0px;
	right:0px;
	margin: 6px 01rem 6px 0.8rem;
	padding:2px 0px;
	width: 85px;
}}
@media screen and (min-width: 48em){  a{

	font-size: 1rem;
	font-style: normal;
	font-weight: normal;
	width: 85px;
	color: var(--varblaudark);
	text-decoration: none;
	cursor:pointer;
}}
@media screen and (max-width: 48em){ .anwenden,a {	
	top:0px;
	right:0px;
	font-size: 1rem;
	font-style: normal;
	font-weight: normal;
	margin: 6px 01rem 6px 0.8rem;
	padding:2px 0px;
	width: 85px;
	color: var(--varblaudark);
	text-decoration: none;
	cursor:pointer;
}}


@media screen and (min-width: 48em){
.anwenden:hover,  a:hover
	{
	background-color:rgba(90, 90, 90, 0.9);
	color: #bbbbbb;
}	
}	
.anwenden:active,{
	background-color:rgba(90, 90, 90, 0.9);
	color: rgba(90,90,90,1);
}
a{
margin: 0px;
padding: 0px;}
.anwendenhead{
top:0px;
	right:0px;
	font-size: 1rem;
	font-style: normal;
font-weight: 800;
	margin: 6px 01rem 6px 0.8rem;
	padding:2px 0px;
	width: 85px;
	color: #333333;
}
.anwenden_active
{	top:0px;
	right:0px;
	font-size: 1rem;
	font-style: normal;
font-weight: normal;
color:#ff4444;
color: --varorange;
fill: #ff4444;
	cursor: pointer;
	width: 85px;
	-webkit-animation: pulsate 2.5s ease-out;
	-webkit-animation-iteration-count: infinite; 
	opacity: 1;
}
@-webkit-keyframes pulsate {
	0% {opacity: 1;}
	50% {opacity: 0.2;}
	100% {opacity: 1;}
}
/*Aside: Datenschutz*/
aside{
	bottom: 0px;
	width: 100vw;
	max-height: 85%;
	position: fixed;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.8);
	display: none;
/*	opacity: 0.2;}
#datenshoehe{
	*/}
#datensbg {
	width:100%;
	height: 100%;
	background-color: red;
	opacity: 0.8;
	z-index: 1;

}	
#datensbreite{
	margin:auto;
	padding: 1rem;
	columns: 1;
	border-top: 0px;
	/*	opacity: 0.2;
*/}
 #button{
	margin: 2px auto;
	height: 1rem;
	width: 100%;

}
 #button img{
	margin: 0 45%;
	padding-top: 1rem 0px;
/*	height: 10px;
	width: 10px;*/
	background-color: white;
	border: 5px solid white;
}
#datensdrawer{
	margin: 1rem;
	overflow: auto;
	border-top: 1px solid;
	padding: 2rem 1rem 1rem 1rem;
	overflow: scroll;
	background-color: white;
	height: 50vh;
}

/*Typographie*/
body{
/*font-family: 'Montserrat Subrayada', sans-serif;
*/font-family: 'Montserrat', sans-serif;
	font-size: 1rem;	line-height: 140%;
	font-style: normal;
font-weight: 300;
	color: var(--varblaudark);
	text-decoration: none;}


	@media screen and (max-width: 48em){#vz{margin-left: 0px; margin-top: 4px; font-size: 2.4rem; line-height: 2.8rem;}}
	@media screen and (max-width: 48em){#z{margin-left: 18px; font-size: 1.2rem;}}
	

	@media screen and (max-width: 48em){.headline
{	
	left: 15px;
	top: 15px;
	width:100vw;
	height: 85px;
	font-size: 3.2rem;
	line-height:4rem;
	border-radius: 0px 0px 2px 2px;
	position: absolute;
}
	}
	
	@media screen and (min-width: 48em){.headline
{	padding:0.5rem 2rem;
	margin: auto;
	width: 390px;
	top: 6vw;
	font-size: 4.5rem;
	line-height: 88px;
	border-radius: 9px;
	background: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0) 100%), rgba(231, 229, 229, 0.55);
	position: relative;

}
	}	
.headline
{
/*width: 597px;
height: 122px;*/
/*font-family: Montserrat;
*/font-style: normal;
font-weight: 200;
color: #444444;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
cursor:move;}

.h2, h2
{/*font-family: Montserrat;*/
font-style: normal;
font-weight: 800;
font-size: 1.6rem;
/* identical to box height */
display: flex;
align-items: center;
//text-align: center;
line-height: 30px;
/*text-decoration-line: underline;
*/text-transform: uppercase;
color: var(--varblau);
margin-top:0;
padding-top:0;}
h3{
font-style: normal;
font-weight: 300;
color: var(--varblaudark);
text-transform: uppercase;
display: flex;
align-items: center;
margin-bottom: 0;
padding-top: 1.4rem;
font-size: 1rem;
/*border-top: 1px solid black;*/
}
h4{
font-weight: 800;
line-height: 140%;
color: var(--varblau);
margin: 0;
}
h5{
	font-size: 1.2rem; 
	text-transform: uppercase; 
	font-weight: 800; padding-top: 0rem; 
	margin: 0rem; 
	color:var(--varblau);
}
h6{
	font-size: 1.2rem;  
	font-weight: 300;
	padding-top: 1rem; 
	margin: 0rem; 
	color:var(--varblau);
	text-align: center;
}
content {
color: var(--varblaudark);
line-height: 140%;

	}
/*b {color: #0E4287;
}*/
p{margin: 0}
b{font-weight: 400;}
#zitat{
color: var(--varblau);
font-size: 1.2rem;
border: 0px;
width: 24rem;
}




/*Formular*/


#tb_formularcontainer{
border:0px;
}
input, input[type="text"], input[type="tel"], input[type="email"], textarea, input[type="submit"]{
text-align: left;	
color: var(--varbody);
min-width:100px;
width: 100%;
top:0px;
margin: auto;
margin-bottom: 25px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border: 0;
padding: 5px;
caret-color: #00ccff; 
-moz-caret-color: green; 	
-webkit-caret-color: green; 
box-sizing: border-box;
background-color:#f77;
}

#tb_textarea{
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding: 10px;
height: 126px;
}

@media screen and (min-width: 48em)
{input, input[type="text"], input[type="tel"], input[type="email"], textarea
{margin: auto;
margin-bottom: 25px;}}


@media screen and (max-width: 48em)	
{input, input[type="text"], input[type="tel"], input[type="email"], textarea
{margin: auto;
margin-bottom: 15px;}}



input[type="submit"]{
text-align: center;
}




input:focus, input[type="tel"]:focus, input[type="email"]:focus {
color: var(--varbody);
opacity: 0.5;
}
input:active, input[type="tel"]:active, input[type="email"]:active {
color: var(--varbody);
opacity: 0.5;
}
input[type="submit"]:active {
color: var(--varbody);
font-weight: 600;
opacity: 0.2;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 48em){
input:hover, input[type="tel"]:hover, #tb_eingabe:hover, input[type="email"]:hover, textarea:hover {
color: var(--varbody);
opacity: 0.5;
}
}

}
 textarea:focus, textarea:active{
color: var(--varbody);
font-weight: 800;
opacity: 0.5;}
textarea::placeholder, input, input[type="text"]::placeholder, input[type="tel"]::placeholder, input[type="email"]::placeholder{
color:var(--varplaceh);
}
.tb_input{background-color: #f77;}
@media screen and (min-width: 48em)
{#tb_input
{margin: auto;
margin-top: 25px;
}}
@media screen and (max-width: 48em)
{#tb_input
{margin: auto;
margin-top: 15px;
}}
#tb_checkbox{
width:20px;
margin: 0px ;
padding: 0px;
style="text-align: left;
}