@charset "utf-8";
/* CSS Document */
:root {
	/*--navWidth: 12em;*/
	--mainWidth: 75%;
}
*{
	list-style:none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
 body{
	width: 100%;
	min-height: 100vh;
	margin: 0 auto;
	padding: 0;
	background: white;
	font-size: 1em;
	font-family: Avenir, Arial, sans-serif;
	display: grid;  
    grid-template:	   ". header ."
    							". nav ."
                        ". main ."
                        ". footer ." /
								1fr var(--mainWidth) 1fr;
	text-align: center;
	

}
header {
	grid-area: header;
	/*position: sticky;
	top: 		0;
	left:   0;
	right:  0;*/
	width:100%;	
	/*float:left;*/
	background: white;
	padding:  1em;
	margin: 0 auto;


}
nav{
	grid-area: nav;
	width:100%;
	/*float:left;*/
	background: white;
	margin: 0 auto;
	padding: 1em;
	
}
main{
	grid-area: main;
	width:100%;
	/*float:left;*/
	background: white;
	margin: 0 auto;
	padding: 1em;
}
footer{
	grid-area: footer;
	/*position: sticky;
	bottom: 0;
	left:   0;
	right:  0;*/
	padding: 1em;
	/*float: left;*/
	background: white;
	color:black;
	margin: 0 auto;
	width:100%;
}
 

#logo {
	display:block;
	width:100%;
	padding:1em;
	text-decoration:none;
	color:white;/*textfarbe*/
	background:rgba(0,0,0,0.0);
	margin: 0 auto;
	
}

.text{
	text-align: justify;

}
.txt1{
	width: 1em;	

}
.txt2{
	width: 2em;
	text-align: left;
	padding:0em;	
}
.txt21{
	width: 2em;
	text-align: center;
	padding:0em;	
}

.foottxt{
	text-decoration:none;
	font-size: 0.7em;
	text-align: right;
}
.foot{
	text-decoration:none;
	font-size: 0.7em;
}
.foot a{
	color: black;
	text-decoration:none;
}
.impressum{

}
.impressum div{
text-align: justify;
}

h1,h2,strong{
	color: rgba(0,148,218,0.8)
}
/* formular */

.container {
	max-width:1000px;
	width: 100%;
	margin: 0 auto;
}
.t1{
	width: 25%;	

}
.t2{
	width: 50%;
	text-align: left;
	padding:0em;	
}
.t21{
	width: 50%;
	text-align: center;
	padding:0em;	
}
.t22{
	padding:1em;	
	margin: 0 auto;
}
.t3{
	width: 25%;	
}
/*termine*/
#termine{

}
table{
	width: 100%;
}
.one {
	width: 33%;	
	text-align: right;
	padding:1em;
}
.two{
	width: 33%;
	padding:1em;
}
.three{
	width: 33%;
	text-align: left;
	padding:1em;
}
/*.four{
	width: 25%;
	text-align: left;
	padding:1em;
}*/
/*navigation*/
.site-nav {
	width:100%;
	float:left;
	border-color: white;
	
	background:rgba(0,0,0,0.0);
}

.site-nav li {
	float:left;
	width:100%;
	position:relative;
}

.site-nav a {
	display:block;
	height:100%;
	width:100%;
	padding:1em;
	text-decoration:none;
	color:white;
	background:rgba(0,148,218,0.8);/*blau*/
	border-top: 1px solid rgba(0,0,0,0.5);
}

.site-nav a:hover {
	background:rgba(0,142,69,0.9);/*gruen*/
}

.js .site-nav {
	display:none;
}

.js .sub-menu {
	display:none;
}

.sub-menu li:last-of-type {
	padding-bottom:0;
}

.sub-menu a {
	background:rgba(0,142,69,0.9);
}

.sub-menu .sub-menu a {
	background:rgba(0,142,69,0.9);
}

/* toggles */

.toggle-site-nav {
	background:rgba(0,148,218,0.9);
	display:block;
	position:absolute;
	right:0;
	top:0;
	padding:1em;
	color:black;
	cursor:pointer;
}

.toggle-site-nav:hover {
	background:rgba(0,142,69,0.9);
}

.toggle-sub-menu {
	display:none;
}

.js .toggle-sub-menu {
	position:absolute;
	right:0;
	top:1px; /* Höhe des borders */
	display:block;
	padding:1em;
	color:white;
	background:rgba(0,0,0,0.0);
	height: 50px;
	width: 0px;
	cursor:pointer;
}

.js .toggle-sub-menu.active {
	background: rgba(0,0,0,0.0);}
	
.toggle-sub-menu:hover,
.toggle-sub-menu.active:hover  {
	background:rgba(0,142,69,0.0);
}

@media screen and (min-width:900px) {
  body {

    } 
    body::before {
        	content: '';
        	grid-row: rule;
			grid-column: 1 ;
         }
    body::after {
        	content: '';
        	position: fixed;
			bottom:1em;
			right:1em;
			opacity: 0.5;
			font-size: 0.8em;
        	grid-row: rule;
			grid-column: 1 ;
        	}

    .logo {
		width:auto;
		float:left;	
	}
	.site-nav {
		float:right;
		width:auto;
		display:block !important;
	}
	.site-nav a {
		border:none;
	}
	.site-nav li {
		width:auto;
		padding:0;
	}
	.site-nav li:hover {
		background:black;
	}
	.has-sub-menu a {
		padding-right: 2em;
	}
	.has-sub-menu:after {
		content:'';
		position: absolute;
		top:0;
		right: 0;
		width:1em;
		height:100%;
		/*background:aqua;*/
	}

	/* sub menu */
	.site-nav li:hover > .sub-menu {
		display: block;
	  	position: absolute;
	  	width: 300px;
	  	padding: 0 25px 25px 25px;
	  	left: -25px;
	  	top: 50px;
	}

	.sub-menu {display:none;}
	
	.sub-menu li {
		width:100%;	
	}
	
	.sub-menu > a {
		width:100%;
		display:block;	
	}

	.has-sub-menu .has-sub-menu:after {
		background:gold;
	}
	
	.has-sub-menu .has-sub-menu:hover .sub-menu {
		display:block;	
		position:absolute;
	  	width: 300px;
	  	padding: 0 25px 25px 25px;
	  	left: 224px;
	  	top: 0px;
	}
	
	.toggle-site-nav,
	.toggle-sub-menu {
		display:none !important;	
	}

	/* Navigationspunkte, die nach links ausklappen */

	.sub-left > .sub-menu {
		left:auto;
		right:0;
	}

	.site-nav .sub-menu .sub-left > .sub-menu {
		left:-275px;
	}
	.txt1{
	width: 33%;	

}
.txt2{
	width: 33%;
	text-align: left;
	padding:0em;	
}
.txt21{
	width: 33%;
	text-align: center;
	padding:0em;	
}

}