*
{
	text-rendering				: optimizeLegibility;
	/*text-rendering				: geometricPrecision;*/
	font-smooth					: always;
	-webkit-font-smoothing		: antialiased;
	-moz-osx-font-smoothing		: grayscale;
}

.debugger
{
	z-index				: 1000;
	position 			: fixed;
	width				: 25vw;
	height				: 50vh;
	border				: 1px solid #A00;
	background			: rgba(255,255,255,0.5);
	bottom				: 10px;
	left				: 10px;
	padding				: 10px;
}

body {
    overflow-y: scroll;
    }

a {
	text-decoration		: none;
}

div#breadcrumb
{
	width				: 100%;
	height				: 2.5em;
	margin				: 0;
	padding 			: 0;
	border-top 			: 5px solid #505050;
	background-color	: rgba(160,0,0,.9);
   	box-shadow			: 0 .25em .5em rgba(0,0,0,0.5);
	box-sizing 			: border-box;
	border-bottom 		: .15em solid #505050;
}

#breadcrumb > p,
#breadcrumb > a,
#breadcrumb > a:hover,
#breadcrumb a:visited,
#breadcrumb a:active

{
	width 				: 80%;
	max-width 			: 1000px;
	margin 				: 10px auto 0 auto;
	padding-left 		: 3em;
	line-height 		: 1em;
	font-size			: .8em;
	color				: #EEE;
	font-weight 		: 700;
	text-transform 		: capitalize;
}

h2 {
	margin				: 0;
	padding				: 0;
	color				: #555;
	font-size			: 2em;
	text-transform		: uppercase;
	text-align			: center;
}

h1 {
	color				: #000000;
	width				: 100%;
	max-width			: 100%;
}

h3 
{
	margin				: 20px 0 10px 0;
	color				: #000000;
}

h5 {
	font-size			: 1.2em;
	margin				: 1em 0 .5em 0;
	text-decoration		: underline;
}
h1,
h2,
h4 {
	box-sizing			: border-box;
	color				: #FFF;
	width				: 100%;
	line-height			: 1em;
	padding				: .5em;
	margin				: 0;
	border-bottom		: .1em solid #500;
	text-transform		: uppercase;
	background-color	: #A00;
	text-align			: center;
	border-radius		: 10px 10px 0 0;
}

ul.m-elements {
	color 				: #888;
	text-decoration		: none;
	font-size			: .8em;
	margin				: 2em;
}

a:hover
{
	color				: #000;
}

p,
li
{
	font-size			: 1em;
	margin				: 0;
	letter-spacing		: .1em;
}



#page {
	position			: relative;
	width				: 100%;
	height				: 100%;
}

#header {
	position			: fixed;
	top 				: 0;
	width				: 100vw;
	height				: 9.5em;
	margin				: 0;
	padding 			: 0;
	border 				: 1px solid #000;
	box-sizing 			: border-box;
	z-index 			: 1;
	transition 			: .5s;
}

#subheader
{
	display					: flex;
	flex-direction   		: row;
	justify-content			: space-between;
	align-items				: flex-end;
	height					: 7em;
	width					: 77.5%;
	max-width				: 1000px;
	background-image      	: url(../img/banner_back.png);
	background-size       	: 100% 100%;
	background-repeat     	: no-repeat;
	background-position   	: right bottom;
	padding					: 0;
	margin 					: 0 auto 0 auto;
	box-sizing 				: border-box;
	transition 				: .25s;
}

#banner {
	display				: block;
	background 			: none;
/*    margin-left         : 1em;*/
	bottom				: 0;
	height				: 100%;
	width 				: auto;
	text-align 			: center;
	box-sizing: border-box;
	transition 			: .25s;
}

#banner img
{
	display 			: block;
	margin 				: 5px auto 0 0;
	height				: 77%;
	width				: auto;
	transition 			: .25s;
}

p.banner
{
	border-radius 		: 1em 1em 0 0;
	margin				: 0;
	padding				: 2.5px 20px 2.5px 20px;
	text-align			: center;
	font-size			: .8em;
	letter-spacing		: 0.125em;
	background-color 	: #505050;
	color				: #FFFFFF;
	text-decoration		: none;
	font-weight 		: bold;
	line-height 		: 1.5em;
	transition 			: .5s;

}

#banner p {
	transition 			: .5s;
}

div#sitemap
{
	display				: flex;
	margin 				: 0;
	flex-direction		: row;
/*	align-items			: top; */
	justify-content		: space-around;
	font-size			: .8em;
	box-sizing 			: border-box;
	border-radius 		: 20px;
	box-shadow 			: 5px 5px 15px #BBB;
	padding 			: .5em;
	

}
 

div#main {
	display				: flex;
	position 			: relative;
	flex-direction		: row;
	width				: 80%;
	max-width			: 1000px;
	color				: #000;
	margin				: 10em auto 0 auto;
 	padding				: 0;
}

div#footer {
	display 			: block;
	position 			: relative;
	width 				: 80%;
	max-width 			: 1000px;
	margin 				: .5em auto 0 auto;
	padding 			: 0.5em;
	background-color	: #fff;
	box-sizing 			: border-box;
}

div#subfooter{
	width 				: 100%;
	display 			: flex;
	box-sizing 			: border-box;
	padding 			: 1em;
	flex-direction		: row;
/*	align-items			: top;*/
	justify-content		: space-around;

}

#footer span {
	padding-left		: .5em;
	padding-right		: .5em;
	font-size			: 0.8em;
	text-decoration		: none;
}


#box_info {
/*	display				: none;
	position			: relative; */
	display 			: inline-block;
	margin				: .5em;
	padding				: .5em;
 	background-color	: unset;
	width				: 25%;
	border				: 0 solid #A00;
	border-radius		: 20px;
	box-shadow			: 5px 5px 15px #BBB;
	box-sizing 			: border-box;
}

#box_info img {
	border-radius 		: 0 0 1em 1em;
}

#box_info > p > a{
	width				: 100%;
	font-size			: 1em;
	color				: #A00;
	text-decoration		: none;
	margin				: 0;
	text-align			: center;

}

#box_info > p{
	width				: 100%;
	font-size			: .9em;
	color				: #555;
	text-decoration		: none;
	margin				: 0;
	margin-bottom 		: 1em;
	padding				: .25em;
	padding-bottom 		: 1em;
	box-sizing 			: border-box;
	font-weight 		: 600;
	text-align 			: justify;
	border-bottom 		: 2px solid #EEEEEE;
}

#box_inhalt {
	box-sizing			: border-box;
	display 			: inline-block;
	width				: 75%;
	right				: 0;
	margin				: .5em;
	padding				: .5em;
	border				: 0 solid #A00;
 	background-color	: rgba(255,255,255,.5);
	border-radius		: 20px;
	box-shadow			: 5px 5px 15px #BBB;
}

#box_inhalt > p, 
#box_inhalt > ul {
}

.info {
	background-color	: #555;
	color				: rgb(200,200,200);
}

/* ARTIKEL --> HOME.INC.PHP */

div#article  {
	width				: 100%;
	box-sizing			: border-box;
	background-color	: unset;
	display				: flex;
	flex-direction		: column;
	align-items			: flex-start;
	margin				: 0 0 1em 0;
	padding				: 0 0 .5em 0;
	border-radius		: 20px;
	border-bottom 		: 2px solid #EEEEEE;

}


#article > h1 {
	text-transform: uppercase;
}

#static
{
	width				: 100%;
	margin 				: .5em;
}

#static > #article > .article {

	padding: 0;

}

#static > #article > .article > p{
	padding: 0 2em 2em 2em;
}


.article
{
	width				: 100%;
	border-radius  		: 20px;
	box-shadow 			: 0 0 5px rgba(0,0,0,0.5);
}


.img_small
{
	float 				: left;
	border-radius		: 0 4em 1em 4em;
	padding				: 0;
	margin				: 0 1em 0 0;
	height				: auto;
	width				: 45%;
	box-shadow 			: .1em .1em .1em rgba(0,0,0,.5);
	border-top 			: unset;
}

.content
{
	justify-content 	: center;
	align-items			: center;
	align-content 		: center;
	padding				: 0;
	line-height			: 1.5em;
	width				: 100%;
	margin 				: 0;

}

.content ul,
.content p
{
	font-size 			: 1em;
	text-align			: left;
	margin 				: .5em 2em .5em .5em;
}

.content > ul
{
	margin-left			: 30px;
	list-style-position	: outside;
	
}

.content ul ul 
{
	padding-left		: 20px;
}

.content ul ul li
{
	list-style-type		: disc;
	color				: #555;
}

.content > ul > li
{
	position			: relative;
	text-indent			: 1em;
	list-style			: none;
	margin				: 0;
	padding-top			: .125em;
	padding-bottom		: .125em;
	color				: #555;
}


.content > ul > li:before{
   content				: '';
   position				: absolute;
   border-right			: 2.5px solid #A00;
   border-bottom		: 2.5px solid #A00;
   width				: 10px;
   height				: 10px;
   transform			: translateY(-50%) rotate(45deg);
   top					: 1em;
   left					: -.25em;
   box-shadow			: 0 0 5px #A00;
   
}

/* ENDE ARTIKEL */



/* MEN� */

div#menu {
	display				: block;
	z-index 			: +100;
}

nav
{

	position			: relative;
	cursor				: pointer;
	margin 				: 0;
	padding 			: 0;
	box-sizing 			: border-box;
}

nav > ul 
{
	display				: flex;
	flex-direction		: row;
	align-items			: center;
	align-content		: center;
	justify-content		: center;
	cursor				: pointer;
	bottom				: 0;
	right				: 0;
	-webkit-box-sizing 	: border-box;
	-moz-box-sizing 	: border-box;
	box-sizing 			: border-box;
	background-color	: rgba(255,255,255,.25);
	padding				: 0;
	-webkit-border-radius : 5px 5px 0 0;
	-moz-border-radius 	: 5px 5px 0 0;
	border-radius 		: 5px 5px 0 0;
}

nav > ul > li,
nav > ul > a > li
{
	display				: flex;
	box-sizing 			: border-box;
	cursor				: pointer;
	flex-direction		: column;
	align-items			: center;
	font-smooth 		: Santialiased;
	font-size			: .9em;
	font-weight: 500;
	text-transform		: uppercase;
	margin				: 0;
	padding				: 0.75em 1em .5em 1em;
	border-bottom: 1px solid #FFFFFF;
}

nav > ul > li:hover
{
	background-color	: #FFFFFF;
	border-radius 		: 5px 5px 0 0;
}

nav > ul > a > li:hover
{
	background-color	: #FFFFFF;
	border-radius 		: 5px 5px 0 0;
}

nav > ul > li > ul 
{
	box-sizing 			: border-box;
	display				: none;
	flex-direction		: row;
	align-items 		: center;
	justify-items 		: center;
	position			: absolute;
	background-color	: #505050;
	top					: 100%;
	right: 0;
}

nav > ul > li > ul > a > li
{
	position			: relative;
	display				: flex;
	align-items 		: center;
	text-align			: center;
	font-size			: .9em;
	padding-left		: 1.5em;
	padding-right 		: 1.5em;
	letter-spacing 		: .25em;
	color				: #909090;
	height				: 3em;
	box-sizing 			: border-box;
}

nav > ul > li > ul > a > li:hover
{
	border-top 			: none;
	background-color	: #FFFFFF;
	color				: #000000;
	transition			: color .5s ease,
							background-color .5s ease;
}


nav > ul > li:hover > ul
{
	width				: auto;
	display				: flex;
	z-index 			: 100;

}

.menupunkte
{
	font-weight 		: bold;
}

.menutop
{
/*border-radius		: 7.5px 7.5px 0 0;*/
}

.menubottom
{
/*border-radius		: 0 0 7.5px 7.5px;*/
}


/*
nav ul li 
.menupunkte {
	margin				: 0;
	padding				: 0;				
	font-size				: .9em;
	line-height			: 1.7em;
	text-transform			: uppercase;
	text-align			: center;
}

nav ul {
	border			:  none;
}

nav ul{
	cursor				: pointer;
	list-style-type	: none;
	position			: relative;
	display			: inline;
	padding			: 0;
	width               : 600px;
	max-width           : 60%;
	border-top		: 2px solid #A00;
	border-radius		: 20px 20px 0 0;
}

nav ul a li,
nav ul li {
	cursor				: pointer;
	position			: relative;
	display				: inline-block;	
	right				: 0;
	margin				: 0;
	margin-top			: 0;
	padding				: 0 0 .05em 0;
	box-sizing          	: border-box; 
    	width				: 25%;
	border-radius			: 20px 20px 0 0;

	
	text-align			: center;
}	

nav > ul > li:hover,
nav > ul > a > li:hover
{
	cursor				: pointer;
	background-color	: #A00;
}


nav > ul ul {
	cursor				: pointer;
	box-sizing			: border-box;
	background-color	: rgba(240,240,240,.9);
	top					: 0%;
	display				: none;
	position			: absolute;
	width				: 100%;
	margin				: 0 0 0 0; 
	padding				: 0;
	border-left			: 2px solid #A00;
	border-right		: 2px solid #A00;
	border-bottom		: 2px solid #A00;
	box-shadow			: 0 3px 10px rgba(0,0,0,.25); 
}


nav > ul ul:after {
	cursor				: pointer;
	content				: '.';
	position			: absolute;
	height				: 1.2em;
	color				: rgba(0,0,0,0);
	display				: inline-block;
	background-color	: #A00;
	border				: 2px solid #A00;
	border-radius		: 0 0 20px 20px;
	width				: 100%;
	padding				: 0px;
	margin-left			: -1.5px;
	box-shadow			: 0px 3px 10px rgba(0,0,0,.25);
	
		
}



nav ul li:hover > ul {
	cursor				: pointer;
	top					: 100%;
	display				: block;
}

nav ul li:hover > .menupunkte{
	color				: #FFF;
}

nav ul ul a li, 
nav ul ul li
{
	cursor				: pointer;
	box-sizing			: content-box;
	padding				: 0;
	position				: relative;
	display				: block;
	text-align			: center;
	border				: none;
	width				: 100%;
	
}
nav ul ul a li:hover > .menupunkte
{
	color				: #000;
}

nav ul ul li:hover
{
	color				: #555;
	background-color	: rgba(60,60,60,.2);    	
}

ENDE MEN� */

p.status 
{
	color				: #A00;
	font-size			: .9em;
	padding				: 0;
	margin				: 0;	
}

p.label {
	color				: #555;
	text-decoration		: underline;
	font-size			: .8em;
}
/*
.form label {
	font-size				: .8em;
	margin-left			: 5%;
}

select.orform {
}

input.orform {
}

.form select {
}

.form img {
	height				: 200px;
	width				: auto;
	float				: left;
	margin				: .5em .5em .5em 5%;
}

.form p {
	text-align			: center;
	padding				: 0;
	margin				: 0;
}
input.button
{
	background-color	: #EEE;
	border				: .1em solid #555;
	width				: 90%;
	color				: #555;
}

input.buttons{
	border				: .1em solid #555;
	color				: #555;
}

/ ENDE FORMULAR /

*/

/* PROTOKOLL */

.protokoll {
	display				: block;
	border				: none;
	background			: none;
	box-sizing			: border-box;
	position			: relative;
	margin				: 0;
	padding				: 0;
	height				: 100%;
	width				: 100%;
	transition			: none;
	background-color	: #fff;
}

.protokoll > div {
	width				: 100%;
	display				: inline;
}

div.label{
}

.protokoll:hover{
	position			: absolute;
	font-size			: 1.5em;
	right				: 0;
	margin-top			: -2em;
	border				: 1px solid;
	transition			: font-size .5s ease;
	max-height			: 250px;
	max-width			: 500px;
}

.protokoll .label {
	width				: 20%;
	display				: inline-block;
	box-sizing			: border-box;
}

.protokoll .text {
	width				: 25%;
	display				: inline-block;
	box-sizing			: border-box;
}

.protokoll:hover > .invisible {
	display				: inline-block;
}

.protokoll span {
	font-size				: 0.8em;
	display				: inline;
}


div.invisible {
	display				: none;
}




/* ENDE PROTOKOLL */

div.account {
	width			: 50%;
	margin			: 0 auto 0 auto;
}

div.account ul
{
	list-style-type	: none;
	margin			: 5px 0 20px 0;
}

div.account ul li {
	text-align		: center;
	padding			: 0;
}

div.account label {
	border-bottom		: 1px solid #555;
	text-align		: center;
}

/* HEADERANIMATION beim Scrollen */

#header.scroller #subheader,
#header.logged #subheader
{
	height 				: 2.5em;
	transition 			: .5s;
}

#header.scroller #banner p,
#header.logged #banner p
{
	display 			: none;
	transition 			: .5s;
}

#header.scroller,
#header.logged
{
	height 				: 5em;
	transition 			: .5s;
}

#main.logged {
	margin-top 			: 5.5em;
}