*:focus {
    outline: none;
}
* {
	font-family:'Roboto';
	box-sizing: border-box; 
	position:relative;
}
html, body {
	background:rgba(202,202,202,1);
	height:100%;
	width:100%;
	position:absolute;
	padding:0;
	margin:0;
	left:0;
	top:0;
}
html {
	overflow-x:hidden;
	}
a, a:active, a:link {
	transition: box-shadow 150ms ease,color 150ms ease;
	text-decoration:none;
	transition:all 250ms ease;
}

h1 {
	font-size:24px;
	font-weight:bold;
	color:rgba(0,0,0,.7);
}

HEADER {
	position:fixed;
	width:100%;
	height:100px;
	left:0px;
	top:0px;
	background:rgba(50,50,50,1);
	color:white;
	box-shadow:rgba(0,0,0,.8) 0px 0px 10px;
	z-index:100;
	transition:all 250ms ease-out;
}
HEADER img#logo {
	display:block;
	position:absolute;
	height:80px;
	top:10px;
	left:70px;
	transition:all 250ms ease-out;
}
HEADER h1 {
	font-weight:bold;
	color:rgba(255,255,255,.9);
	display:block;
	position:absolute;
	font-size:20px;
	top:30px;
	left:300px;
	transition:all 500ms ease;
}
HEADER h1 small {
		font-size:50%;
		opacity:.5;
		font-weight:normal;
}
HEADER #account {
	position:absolute;
	right:0px;
	top:0px;
	height:100%;
	width:220px;
}
HEADER #account #profilfoto {
	position:absolute;
	left:0px;
	top:calc(50% - 30px);
	width:60px;
	height:60px;
	border-radius:50%;
	box-shadow:rgba(0,0,0,.7) 1px 1px 6px;
	background:rgba(255,255,255,.9);
	overflow:hidden;
	transition:all 250ms ease-out;
}
HEADER #account #profilfoto #neuesfoto {
	position:absolute;
	left:0px;
	background:rgba(0,0,0,.8);
	color:white;
	font-size:10px;
	font-weight:bold;
	text-align:center;
	width:100%;
	height:18px;
	bottom:-18px;
	cursor:pointer;
	transition:all 250ms ease-out;
	border-radius:0px 0px 50% 50%;
}
HEADER #account #profilfoto:hover #neuesfoto {
	bottom:0px;
}
HEADER #account h1 {
	color:rgba(255,255,255,.9);
	position:absolute;
	top:20px;
	left:80px;
	margin:0px;
	font-size:14px;
}
HEADER #account .abmelden, HEADER #account .konto {
	background:rgba(255,255,255,.8);
	position:absolute;
	color:black;
	right:10px;
	bottom:10px;
	padding:6px;
	box-shadow:rgba(0,0,0,.7) 1px 1px 3px;
	transition:all 250ms ease-out;
	font-size:9px;
	border-radius:3px;
}
HEADER #account .konto {
	left:80px;
	width:60px;
}
HEADER #account .abmelden:hover, HEADER #account .konto:hover {
	background:rgba(255,255,255,1);
	box-shadow:rgba(0,0,0,.7) 1px 1px 6px;
}
NAV {
	position:fixed;
	width:250px;
	height:calc(100% - 100px);
	background:rgba(255,255,255,1);
	color:white;
	box-shadow:rgba(0,0,0,.8) 0px 0px 10px;
	left:0px;
	top:100px;
	z-index:50;
	transition:all 250ms ease-out;
}

NAV h1, MAIN ARTICLE#emailauflistung h1 {
	text-transform: uppercase;
	font-weight:bold;
	color:rgba(0,0,0,.7);
	margin:40px 0px 5px 10px;
}

NAV ul, NAV ul li {
	display:block;
	position:relative;
	list-style: none;
	padding:0px;
	margin:0px;
	transition:all 500ms ease;
}
NAV ul li {
	border-bottom:rgba(50,50,50,.2) 1px solid;
}
NAV ul li a {
	display:block;
	text-decoration:none;
	padding:10px;
	background:rgba(50,50,50,0);
	transition:all 500ms ease;
	color:rgba(50,50,50,.9);
	font-size:14px;
}
NAV ul li a:hover {
	background:rgba(50,50,50,.3);
}
MAIN {
	background:none;
	position:absolute;
	display:block;
	left:250px;
	top:100px;
	width:calc(100% - 250px);
	height:calc(100% - 100px);
}
MAIN ARTICLE#emailauflistung {
	display:block;
	width:80%;
	left:10%;
	margin-top:100px;
	box-shadow:rgba(0,0,0,.7) 1px 1px 6px;
	border-radius:3px;
	background:rgba(255,255,255,1);
}
MAIN ARTICLE#emailauflistung:last-child {
	margin-bottom:40px;
}
MAIN ARTICLE#emailauflistung h1 {
	position:absolute;
	margin-top:-40px;
	left:10px;
}
MAIN ARTICLE#emailauflistung div.listeneintrag {
	display:block;
	width:100%;
	height:60px;
	border-bottom:rgba(50,50,50,.2) 1px solid;
	transition:all 250ms ease-out;
}
MAIN ARTICLE#emailauflistung div.listeneintrag:hover {
	background:rgba(50,50,50,.05);
}
MAIN ARTICLE#emailauflistung div span {
	position:absolute;
}
MAIN ARTICLE#emailauflistung div span.betreff {
	top:10px;
	left:80px;
	font-weight:bold;
	font-size:14px;
	cursor:pointer;
}
MAIN ARTICLE#emailauflistung div span.betreff:after {
	content:'Klicke hier, um den Inhalt der E-Mail ein- bzw. auszublenden.';
	position:absolute;
	top:10px;
	left:20px;
	padding:7px;
	background:rgba(244,232,171,1);
	border-radius:2px;
	font-weight:normal;
	box-shadow:rgba(0,0,0,.8) 1px 1px 3px;
	pointer-events:none;
	color:rgba(50,50,50,1);
	width:250px;
	opacity:0;
	z-index:999;
	transition:all 250ms ease-out;
}
MAIN ARTICLE#emailauflistung div span.betreff:hover:after {
	top:20px;
	opacity:1;
}
MAIN ARTICLE#emailauflistung div span.datum {
	top:25px;
	right:150px;
	font-size:10px;
	color:rgba(50,50,50,.7);
}
MAIN ARTICLE#emailauflistung div span.profilfoto {
	position:absolute;
	display:block;
	top:10px;
	left:20px;
	width:40px;
	height:40px;
	border-radius:50%;
	box-shadow:rgba(0,0,0,.8) 1px 1px 3px;
	transition:all 250ms ease-out;
	overflow:hidden;
}
MAIN ARTICLE#emailauflistung div span.profilfoto .neuesfoto {
	position:absolute;
	display:block;
	bottom:-15px;
	left:0px;
	width:100%;
	height:15px;
	background:rgba(0,0,0,.8);
	color:white;
	text-align:center;
	font-size:10px;
	font-weight:bold;
	transition:all 250ms ease-out;
	cursor:pointer;
}
MAIN ARTICLE#emailauflistung div span.profilfoto:hover .neuesfoto {
	bottom:0px;
}
MAIN ARTICLE#emailauflistung div span.absender {
	top:10px;
	right:150px;
	font-size:12px;
	color:rgba(50,50,50,1);
}
MAIN ARTICLE#emailauflistung div span.abfall, MAIN ARTICLE#emailauflistung div span.edit {
	position:absolute;
	right:10px;
	top:20px;
	width:30px;
	height:30px;
	background:rgba(50,50,50,0);
	transition:all 250ms ease-out;
	border-radius:3px;
	text-align:center;
	opacity:0;
	cursor:pointer;
	transition:all 250ms ease-out;
}
MAIN ARTICLE#emailauflistung div span.edit {
	right:40px;
}
MAIN ARTICLE#emailauflistung div span.inhalt {
	position:absolute;
	left:60px;
	top:40px;
	width:calc(100% - 80px);
	opacity:0;
	pointer-events:none;
	transition:all 250ms ease-out;
}
MAIN ARTICLE#emailauflistung div:hover span.abfall, MAIN ARTICLE#emailauflistung div:hover span.edit {
	opacity:1;
}
MAIN ARTICLE#emailauflistung div span.abfall svg .abfallicon, MAIN ARTICLE#emailauflistung div span.edit svg path {
	fill:rgba(50,50,50,.7);
	transition:all 250ms ease-out;
}
MAIN ARTICLE#emailauflistung div span.abfall:hover svg .abfallicon {
	fill:rgba(100,0,0,1);
}
MAIN ARTICLE#emailauflistung div span.edit:hover svg path {
	fill:rgba(180,120,0,1);
}
MAIN ARTICLE#emailauflistung div div.zusagen {
	position:absolute;
	right:30px;
	top:8px;
	height:40px;
	width:100px;
	opacity:.4;
	transition:all 250ms ease-out;
}
MAIN ARTICLE#emailauflistung div:hover div.zusagen {
	opacity:1;
}
MAIN ARTICLE#emailauflistung div div.zusagen:hover {
	width:400px;
	background:rgba(255,255,255,1);
	border-radius:2px;
	box-shadow:rgba(50,50,50,.8) 1px 1px 3px;
	height:200px;
	z-index:9;
}
MAIN ARTICLE#emailauflistung div div.zusagen u {
	font-size:11px;
	left:calc(50% - 10px);
	top:20px;
	opacity:0;
	pointer-events:none;
	position:absolute;
	cursor:pointer;
	transition:all 250ms ease-out;
}
MAIN ARTICLE#emailauflistung div div.zusagen:hover u {
	opacity:1;
	pointer-events:auto;
}
MAIN ARTICLE#emailauflistung div div.zusagen b {
	position:absolute;
	height:20px;
	width:20px;
	top:20px;
	border-radius:50%;
	color:rgba(255,255,255,1);
	box-shadow:rgba(50,50,50,.7) 1px 1px 4px;
	text-align:center;padding-top:3px;
	font-size:10px;
	transition:all 250ms ease-out;
	pointer-events:none;
}
MAIN ARTICLE#emailauflistung div div.zusagen i {
	position:absolute;
	top:0px;
	left:10px;
	color:rgba(50,50,50,.7);
	font-size:10px;
	transition:all 250ms ease-out;
}
MAIN ARTICLE#emailauflistung div div.zusagen:hover i {
	left:180px;
}
MAIN ARTICLE#emailauflistung div div.zusagen b.p {
	left:15px;
	background:rgba(45,107,29,1);
}
MAIN ARTICLE#emailauflistung div div.zusagen:hover b.p {
	left:100px;
}
MAIN ARTICLE#emailauflistung div div.zusagen b.n {
	left:45px;
	background:rgba(107,10,10,1);
}
MAIN ARTICLE#emailauflistung div div.zusagen:hover b.n {
	left:300px;
}
MAIN ARTICLE#emailauflistung div div.zusagen ul {
	position:absolute;
	top:40px;
	height:0px;
	color:rgba(50,50,50,1);
	font-size:12px;
	transition:all 250ms ease-out;
	pointer-events:none;
	opacity:0;
	max-height:calc(200px - 40px - 20px);
	overflow-y:auto;
	list-style: none;
	width:0px;
	cursor:default;
}
MAIN ARTICLE#emailauflistung div div.zusagen:hover ul {
	opacity:1;
	height:calc(200px - 40px - 20px);
	width:200px;
	pointer-events:auto;
}
MAIN ARTICLE#emailauflistung div div.zusagen ul.zugesagt {
	left:-10px;
}
MAIN ARTICLE#emailauflistung div div.zusagen ul.abgesagt {
	left:190px;
}
MAIN ARTICLE#emailauflistung div div.zusagen ul li {
	background:rgba(50,50,50,0);
	display: block;
	padding:5px;
	transition:all 250ms ease-out;
	margin:0px;
}
MAIN ARTICLE#emailauflistung div div.zusagen ul li:hover {
	background:rgba(50,50,50,0.1);
}
MAIN ARTICLE#emailauflistung div span.abfall span.abfallid {
	display:none;
}
MAIN ARTICLE#KontaktdatenBearbeiten {
	position:fixed;
	display:block;
	left:300px;
	width:calc(100% - 300px - 40px);
	top:180px;
	height:calc(100% - 140px - 40px);
	background:rgba(255,255,255,1);
	border-radius:4px;
	box-shadow:rgba(50,50,50,.8) 0px 0px 20px;
	transition:all 250ms ease-out;
	opacity:0;
	pointer-events:none;
	overflow-y:auto;
	z-index:10;
}
MAIN ARTICLE#KontaktdatenBearbeiten .exit {
	right:40px;
	top:180px;
	width:40px;
	height:40px;
	background:red;
	position:fixed;
	display:block;
	color:white;
	font-size:16px;
	border-radius:0px 4px 0px 4px;
	background:rgba(0,120,0,.7);
	cursor:pointer;
	text-align:center;
	padding-top:8px;
	transition:all 250ms ease-out;
}
MAIN ARTICLE#KontaktdatenBearbeiten .exit:hover {
	background:rgba(0,120,0,1);
}
MAIN ARTICLE#KontaktdatenBearbeiten h1 {
	padding-left:20px;
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul {
	display:block;
	position:absolute;
	list-style: none;
	padding:0px;
	margin:0px;
	width:33%;
	height:calc(100% - 40px);
	top:40px;
	left:0px;
	padding-left:20px;
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul:after {
	position:absolute;
	top:-30px;
	left:20px;
	font-weight:bold;
	font-size:16px;
	width:80%;
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul.zugesagt {
	left:33%;
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul.zugesagt:after {
	content:'Zugesagt';
	color:rgba(0,120,0,1);
	border-bottom:rgba(0,120,0,1) 2px solid;
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul.abgesagt {
	left:66%;
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul.abgesagt:after {
	content:'Abgesagt';
	color:rgba(120,0,0,1);
	border-bottom:rgba(120,0,0,1) 2px solid;
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul li {
	transition:all 250ms ease-out;
	background:rgba(50,50,50,0);
	padding:5px;
	cursor:default;
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul li:hover {
	background:rgba(50,50,50,.1);
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul li span {
	display:inline-block;
	position:relative;
	width:18px;
	height:18px;
	color:rgba(255,255,255,1);
	text-align:center;
	border-radius:2px;
	margin-right:5px;
	cursor:pointer;
	transition:all 250ms ease-out;
	opacity:.1;
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul:hover li span {
	opacity:.3;
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul li:hover span {
	opacity:.8;
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul li span.zuneutral {
	background:rgba(180,120,0,1);
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul li span.zuabsagen, MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul li span.zurot {
	background:rgba(120,0,0,1);
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul li span.zuzusagen {
	background:rgba(0,120,0,1);
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul li span:hover {
	opacity:1;
	box-shadow:rgba(0,0,0,.5) 1px 1px 2px;
}
MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul li input {
	margin-left:50px;
	padding:5px;
	width:calc(100% - 60px);
}

#neu, #neu-kontakt {
	background:rgba(50,50,50,.8);
	box-shadow:rgba(0,0,0,.7) 2px 2px 10px;
	color:white;
	position:fixed;
	right:50px;
	bottom:50px;
	width:60px;
	height:60px;
	border-radius:3px;
	font-size:40px;
	padding-top:7px;
	text-align:center;
	cursor:pointer;
	transition:all 250ms ease-out;
	overflow:hidden;
}

#neu:after, #neu-kontakt:after {
	position:absolute;
	content:"+";
	color:white;
	top:0px;
	left:0px;
	height:60px;
	width:60px;
	transition:all 250ms ease-out;
	padding-top:7px;
	text-align:center;
	pointer-events:none; 
	font-weight:100;
}
#neu-kontakt:after {
	content:url(img/icon_account-plus-weiss.svg);
}
#neu-kontakt:after svg path {
	fill:white;
}
#neu #neusms {
	position:absolute;
	transition:all 250ms ease-out;
	left:0px;
	height:60px;
	width:60px;
	opacity:0;
	top:0px;
	font-size:12px;
	border-bottom:rgba(255,255,255,.3) 1px solid;
	padding-top:25px;
	text-align:center;
}
#neu #neuemail {
	position:absolute;
	transition:all 250ms ease-out;
	left:0px;
	height:60px;
	width:60px;
	opacity:0;
	font-size:12px;
	top:60px;
	padding-top:25px;
	text-align:center;
}
#neu:hover {
	height:120px;
}
#neu-kontakt:hover {
	background:rgba(50,50,50,1);
}
#neu:hover #neusms, #neu:hover #neuemail {
	opacity:1;
}
#neu:hover:after {
	opacity:0;
}

#neu #neusms:hover, #neu #neuemail:hover {
	background:rgba(50,50,50,1);
}


form#loginform {
	position:absolute;
	width:40%;
	left:30%;
	height:350px;
	top:calc(50% - 200px);
	background:rgba(50,50,50,.4);
	border-radius:3px;
	box-shadow:rgba(255,255,255,.2) 1px 1px 0px, black 1px 1px 200px;
	transition:all 250ms ease-out;
}
form#loginform:hover {
	background:rgba(50,50,50,.45);
}
form#loginform h1 {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:60px;
	padding:20px;
	margin:0px;
	background:rgba(50,50,50,1);
	color:white;
	font-size:20px;
	border-radius:3px 3px 0px 0px;
}
form#loginform .benutzername {
	position:absolute;
	top:150px;
	height:40px;
	width:80%;
	left:10%;
	border:none;
	border-radius:3px;
	padding-left:10px;
	font-size:14px;
	color:rgba(50,50,50,1);
	background:rgba(255,255,255,1);
	box-shadow:rgba(0,0,0,.8) 2px 2px 4px;
	transition:all 250ms ease-out;
}
form#loginform .falsch {
	position:absolute;
	bottom:10px;
	left:20px;
	color:black;
	width:calc(100% - 200px);
}
form#loginform .benutzerbild {
	top:100px;
	height:100px;
	width:100px;
	left:calc(50% - 50px);
	background:rgba(50,50,50,1);
	border-radius:50%;
	box-shadow:rgba(0,0,0,.8) 2px 2px 4px;
	opacity:0;
	transition:all 250ms ease-out;
}
form#loginform #SUB_ANMELDEN, form#loginform #SUB_PASSNEU, form#loginform #BUTTON_PASSWORTVERGESSEN {
	position:absolute;
	bottom:10px;
	height:40px;
	right:10px;
	width:150px;
	border:none;
	background:rgba(255,255,255,.7);
	box-shadow:rgba(0,0,0,.8) 2px 2px 4px;
	transition:all 250ms ease-out;
	border-radius:3px;
}
form#loginform #SUB_PASSNEU {
	opacity:0;
	pointer-events:none;
	bottom:-10px;
	
}

form#loginform #BUTTON_PASSWORTVERGESSEN {
	top:240px;
	height:20px;
	width:auto;
	right:15%;
	font-size:10px;
	text-align:center;
	padding:4px;
	cursor:pointer;
	background:rgba(50,50,50,.7);
	color:white;
	opacity:0;
	pointer-events:none;
}

form#loginform #LOGIN_PASSWORT, form#loginform #PASSNEU1, form#loginform #PASSNEU2 {
	position:absolute;
	top:220px;
	height:40px;
	width:80%;
	left:10%;
	border:none;
	border-radius:3px;
	padding-left:10px;
	font-size:14px;
	color:rgba(50,50,50,1);
	background:rgba(255,255,255,1);
	box-shadow:rgba(0,0,0,.8) 2px 2px 4px;
	transition:all 250ms ease-out;
	opacity:0;
	pointer-events:none;
}
form#loginform #LOGIN_PASSWORT_LABEL {
	position:absolute;
	top:220px;
	height:28px;
	width:80%;
	left:10%;
	transition:all 250ms ease-out;
	border:none;
	background:rgba(255,255,255,0);
	padding:10px;
	border-radius:0px 0px 0px 3px;
	pointer-events:none;
	font-size:12px;
	padding-top:7px;
	padding-left:30px;
	cursor:pointer;
	vertical-align:top;
}
form#loginform #LOGIN_PASSWORT_LABEL:hover {
	background:rgba(255,255,255,.5);
}
form#loginform #LOGIN_PASSWORT_LABEL input#LOGIN_PASSWORT {
	position:absolute;
	display:inline;
	width:20px;
	height:20px;
	left:0px;
	top:0px;
	opacity:1;
	box-shadow:none;
	padding-right:10px;
}

form#loginform #PASSNEU1 {
	opacity:1;
	pointer-events:auto;
	top:200px;
}
form#loginform #PASSNEU2 {
	opacity:1;
	pointer-events:auto;
	top:250px;
}

form#loginform .PasswortVerschickt, form#loginform .passwortneutext {
	position:absolute;
	top:80px;
	height:auto;
	width:80%;
	left:10%;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	padding:4px;
	color:white;
	opacity:0;
	pointer-events:none;
	transition:all 250ms ease-out;

}

form#loginform #SUB_ANMELDEN:hover, form#loginform #SUB_PASSNEU:hover, form#loginform #LOGIN_PASSWORT:hover, form#loginform .benutzername:hover, form#loginform #BUTTON_PASSWORTVERGESSEN:hover {
	background:rgba(255,255,255,1);
	box-shadow:rgba(0,0,0,.9) 1px 1px 8px;
	color:black;
}

.loginhide {
	opacity:0;
	pointer-events:none;
}

form#loginform .passwortneutext {
	opacity:1;
	font-size:14px;
	pointer-events:none;
	font-weight:normal;
	text-align:left;
	color:black;
	top:60px;
}

form.email  {
	position:fixed;
	left:20%;
	height:80%;
	width:60%;
	top:200%;
	box-shadow:rgba(0,0,0,1) 0px 0px 200px;
	background:white;
	z-index:9999;
	border-radius:3px;
	transition:all 250ms ease-out;
	opacity:0;
}

form.emailshow  {
	top:10%;
	opacity:1;
}

form.email textarea#edit {
	position:absolute;
	left:0px;
	top:80px;
	height:calc(100% - 160px);
	width:100%;
}
form.email .platzhalter {
	position:relative;
	display:block;
	width:100%;
	height:80px;
}
form.email .empfaenger, form.email .absender {
	position:absolute;
	top:0px;
	left:calc(50% - 50px);
	width:calc(50% - 50px);
	height:40px;
	cursor:pointer;
	background:rgba(255,255,255,0);
	transition:all 250ms ease-out;
	overflow:hidden;
	z-index:99999;
}
form.email .betreff {
	position:absolute;
	top:40px;
	left:0px;
	width:100%;
	height:40px;
	border:none;
	background:rgba(50,50,50,0);
	color:#000000;
	padding-left:10px;
	transition:all 250ms ease-out;
	overflow:hidden;
	font-size:14px;
	font-weight:bold;
	border-top:rgba(50,50,50,.3) 1px solid;
}
form.email .betreff:hover {
	background:rgba(50,50,50,.1);
}
form.email .absender {
	left:0px;
}
form.email .empfaenger {
	border-left:rgba(50,50,50,.3) 1px solid;
}
form.email .empfaenger:hover, form.email .absender:hover {
	height:300px;
	background:rgba(255,255,255,1);
	box-shadow:rgba(0,0,0,.8) 2px 2px 4px;
}
form.email .absender:hover {
	height:200px;
}
form.email .empfaenger .empfaengerauswahl, form.email .absender .empfaengerauswahl  {
	position:absolute;
	display:block;
	top:40px;
	left:0px;
	width:50%;
	height:220px;
	overflow-y:scroll;
}
form.email .absender .empfaengerauswahl  {
	height:160px;
	width:100%;
}
.auswahlalles {
	position:absolute;
	display:block;
	width:24px;
	height:24px;
	top:0px;
	right:0px;
	background:rgba(255,255,255,1);
	color:black;
	cursor:pointer;
	text-align:center;
	padding-top:2px;
	font-weight:bold;
	transition:all 250ms ease-out;
}
.auswahlalles:hover {
	background:rgba(200,200,200,1);
}
form.email .absender .empfaengerauswahl .absenderoption  {
	display:block;
	width:100%;
	height:40px;
	background:rgba(50,50,50,0);
	cursor:pointer;
	transition:all 250ms ease-out;
}
form.email .absender .empfaengerauswahl .absenderoption:hover  {
	background:rgba(50,50,50,.1);
}
form.email .absender .empfaengerauswahl .absenderoption span  {
	position:absolute;
	display:block;
	left:60px;
	top:10px;
	font-size:14px;
	font-weight:bold;
}
form.email .empfaenger .passiv  {
	width:50%;
	left:50%;
}
form.email .empfaenger #empfaengermanuell  {
	position:absolute;
	left:0px;
	top:260px;
	height:40px;
	width:100%;
	font-weight:normal;
	font-size:14px;
	padding-left:10px;
	padding-right:10px;
	border:none;
	color:rgba(50,50,50,.5);
	background:rgba(50,50,50,0);
	transition:all 250ms ease-out;
}
form.email .empfaenger #empfaengermanuell:hover, form.email .empfaenger #empfaengermanuell:focus  {
	background:rgba(50,50,50,.10);
	color:rgba(50,50,50,1);
}
form.email .empfaenger .empfaengerauswahl  label {
	display:block;
	width:100%;
	padding:8px;
	padding-left:20px;
	font-size:14px;
	color:rgba(50,50,50,1);
        transition:all 250ms ease-out;
}
form.email .empfaenger .empfaengerauswahl  label:hover {
     background:rgba(50,50,50,.1);
}
form.email .empfaenger .info, form.email .absender .info {
	position:absolute;
	left:20px;
	top:10px;
	font-weight:bold;
	font-size:14;
}
form.email .absender .info {
	top:5px;
	left:50px;
}
form.email .absender .info small {
	display:block;
	font-size:10px;
	font-weight:normal;
}
form.email .absender .profilbild, form.email .absender .empfaengerauswahl .absenderoption img {
	position:absolute;
	display:block;
	width:30px;
	height:30px;
	left:5px;
	top:5px;
	border-radius:50%;
	background:gray;
	box-shadow:rgba(0,0,0,.5) 1px 1px 2px;
	transition:all 250ms ease-out;
}
form.email #SUB_SENDEN, form.email .schliessen {
	position:absolute;
	right:0px;
	top:00px;
	height:40px;
	width:50px;
	background:rgba(50,50,50,0);
	color:black;
	border-radius:0px 3px 0px 0px;
	font-size:30px;
	font-weight:100;
	padding-top:0px;
	text-align:center;
	cursor:pointer;
	transition:all 250ms ease-out;
	border:none;
	border-left:rgba(50,50,50,.3) 1px solid;
}
form.email .schliessen {
	right:50px;
	border-radius:0px;
	padding-top:2px;
}
form.email #SUB_SENDEN:hover {
	background:rgba(50,50,50,.2);
}
form.email .schliessen:hover {
	background:rgba(150,0,0,.8);
	color:rgba(255,255,255,.8);
}
form.email #zusagebestaetigung {
	position:absolute;
	left:0px;
	bottom:0px;
	transition:all 250ms ease-out;
	border:none;
	background:rgba(50,50,50,0);
padding:10px;
border-radius:0px 0px 0px 3px;
}
form.email #zusagebestaetigung:hover {
	background:rgba(50,50,50,.2);
}
form.email #zusagebestaetigung select {
	margin-right:10px;
}









MAIN ARTICLE .eingabe {
	height:80px !important;
	transition:all 250ms ease-out;
}
MAIN ARTICLE #conAUSTRITT {
	overflow:hidden;
}
.rand {
	padding:10px;
}
MAIN ARTICLE .halb {
	width:50%;
	display:inline-block;
}
MAIN ARTICLE .halb:nth-child(even) {
	float:left;
}
MAIN ARTICLE .hoeher {
	height:140px !important;
}
MAIN ARTICLE .eingabe:hover, MAIN ARTICLE .hoeher:hover {
	background:rgba(50,50,50,.13) !important;
}
MAIN ARTICLE .listeneintrag input, MAIN ARTICLE div select {
	position:absolute;
	top:30px;
	width:calc(100% - 160px);
	left:120px;
	height:40px;
	padding:10px;
	border-radius:3px;
	font-size:16px;
	border:none;
	color:rgba(50,50,50,1);
	background:rgba(255,255,255,1);
	box-shadow:rgba(0,0,0,.5) 1px 1px 3px;
	transition:all 250ms ease-out;
}
MAIN ARTICLE div select {
	font-size:16px;
	height:40px;
	padding:10px;
}
MAIN ARTICLE .listeneintrag input:hover, MAIN ARTICLE .listeneintrag input:focus, MAIN ARTICLE div #LOGIN_BENUTZER:hover {
	box-shadow:rgba(0,0,0,.8) 1px 1px 5px;
}
MAIN ARTICLE .listeneintrag input.PLZ {
	width:100px;
	left:120px;
	top:80px;
}
MAIN ARTICLE .listeneintrag input.STADT {
	width:calc(100% - (120px + 20px + 100px + 20px) - 20px);
	left:calc(120px + 20px + 100px);
	top:80px;
}
MAIN ARTICLE .listeneintrag input.STRASSE {
	width:calc(100% - (120px + 20px + 100px + 20px) - 20px);
	left:120px;
}
MAIN ARTICLE .listeneintrag input.HAUSNUMMER {
	width:100px;
	left:calc(100% - 120px - 20px);
}
MAIN ARTICLE .listeneintrag input.PASSWORT1 {
	width:calc((100% - 120px) / 2 - 20px);
}
MAIN ARTICLE .listeneintrag input.PASSWORT2 {
	width:calc((100% - 120px) / 2 - 20px);
	top:80px;
}
MAIN ARTICLE .listeneintrag span.buttonPASSWORT {
	position:absolute;
	right:20px;
	top:40px;
	padding:20px 10px 20px 10px;
	border-radius:3px;
	font-size:16px;
	border:#FFFFFF 2px solid;
	color:rgba(50,50,50,1);
	background:rgba(255,255,255,.8);
	box-shadow:rgba(0,0,0,.5) 1px 1px 3px;
	transition:all 250ms ease-out,border-color 750ms ease-out,border-width 750ms ease-out;
	pointer-events:none;
	cursor:pointer;
	opacity:0;
}
MAIN ARTICLE .listeneintrag span.buttonPASSWORT:hover {
	background:rgba(255,255,255,1);
	box-shadow:rgba(0,0,0,.8) 1px 1px 5px;
}
MAIN ARTICLE .eingabe .betreff:before, MAIN ARTICLE .eingabe .betreff:after, MAIN ARTICLE .hoeher .betreff:after, .nobefore:after, .nobefore:before {
	display:none;
}



MAIN ARTICLE#emailauflistung div span input.spezial {
	top:0px;
	left:0px;
	width:120%;
	height:100%;
	padding:0px;
	box-shadow:none;
	font-size:14px;
	min-width:100px;
	cursor:pointer;
}
MAIN ARTICLE#emailauflistung div span input.spezial:hover, MAIN ARTICLE#emailauflistung div span input.spezial:focus {
	box-shadow:rgba(0,0,0,.5) 1px 1px 3px;
}
MAIN ARTICLE#emailauflistung div span input.spezial:focus {
	cursor:auto;
}
MAIN ARTICLE#emailauflistung div span.betreff input.spezial {
	font-weight:bold;
}
MAIN ARTICLE#emailauflistung div span.absender input.spezial, MAIN ARTICLE#emailauflistung div span.datum input.spezial {
	font-size:11px;
	left:auto;
	right:0px;
	text-align:right;
}
MAIN ARTICLE#emailauflistung div span.adresse {
	right:400px;
	top:10px;
	width:200px;
	height:40px;
}
MAIN ARTICLE#emailauflistung div span.adresse .spezial {
	top:0px;
	left:0px;
	height:15px;
	font-size:12px;
	width:40px;
	min-width:auto;
}
MAIN ARTICLE#emailauflistung div span.adresse .strasse, MAIN ARTICLE#emailauflistung div span.adresse .ort {
	width:160px;
}
MAIN ARTICLE#emailauflistung div span.adresse .ort {
	left:42px;
	top:20px;
}
MAIN ARTICLE#emailauflistung div span.adresse .hausnummer {
	left:162px;
}
MAIN ARTICLE#emailauflistung div span.adresse .plz {
	top:20px;
	width:38px;
}
MAIN ARTICLE#emailauflistung div span.abfallbestaetigen {
	left:100%;
	width:0px;
	height:100%;
	background:rgba(150,0,0,1);
	color:white;
	font-weight:bold;
	font-size:14px;
	padding-top:20px;
	text-align:center;
	cursor:pointer;
	overflow:hidden;
	transition:all 250ms ease-out;
}
MAIN ARTICLE#KontaktdatenBearbeiten div.listeneintrag {
	padding-left:10px;
	padding-top:10px;
}



@media screen and (max-width: 1400px) {
	MAIN ARTICLE#emailauflistung div span.adresse {
		display:none;
	}


}


@media screen and (max-width: 740px) {
	form#loginform {
		width:90%;
		left:5%;
	}
	form#loginform #SUB_ANMELDEN {
		width:90%;
		left:5%;
	}
	NAV {
		width:0px;
		top:80px;
		height:calc(100% - 80px);
	}
	NAV h1, NAV ul	{
		width:100%;
		overflow-x:hidden;
	}
	NAV:hover {
		width:75%;
	}
	NAV:after {
		content:url(img/icon_menu.svg);
		position:absolute;
		display:block;
		width:30px;
		height:30px;
		right:-30px;
		top:10px;
		font-weight:bold;
		padding-top:5px;
		font-size:10px;
		text-align:center;
		background:rgba(255,255,255,1);
		color:rgba(50,50,50,.8);
		border-radius:0px 3px 3px 0px;
		box-shadow:rgba(50,50,50,.8) 1px 1px 4px;
		z-index:99999999;
		transition:all 250ms ease-out;
	}
	NAV:hover:after {
		right:0px;
		opacity:0;
	}
	HEADER  {
		height:80px;
	}
	HEADER img#logo {
		height:100px;
		top:-30px;
		left:-30px;
	}
	HEADER h1 {
		left:100px;
		top:30px;
	}
	HEADER #account {
		height:100%;
		width:150px;
	}
	HEADER h1 {
		top:5px;
		margin-top:0px;
		width:150px;
	}
	HEADER h1 small {
		display:block;
		margin-top:5px;
	}
	HEADER #account h1 {
		top:7px;
		font-size:12px;
		width:60px;
	}
	HEADER #account .abmelden {
		display:none;
	}
	MAIN {
		left:0px;
		width:100%;
		top:80px;
	}
	MAIN ARTICLE#emailauflistung {
		left:2%;
		width:96%;
	}
	MAIN ARTICLE#emailauflistung div span.betreff {
		top:3px;
		left:10px;
		width:calc(100% - 140px);
		overflow:hidden;
		white-space: nowrap;
	}
	MAIN ARTICLE#emailauflistung div span.betreff:before {
		position:absolute;
		display:block;
		content:'';
		right:0px;
		top:0px;
		width:20px;
		height:20px;
		background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 95%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
	MAIN ARTICLE#emailauflistung div span.absender {
		left:15px;
		top:25px;
	}
	MAIN ARTICLE#emailauflistung div span.datum {
		left:15px;
		top:40px;
	}
	MAIN ARTICLE#emailauflistung div div.zusagen:hover {
		right:-10px;
		
	}
	MAIN ARTICLE#emailauflistung div span.abfall, MAIN ARTICLE#emailauflistung div span.edit {
		opacity:1;
	}
	MAIN ARTICLE#emailauflistung div input, MAIN ARTICLE#KontaktdatenBearbeiten div input, MAIN ARTICLE div select {
		left:20px;
		width:calc(100% - 40px);
	}
	MAIN ARTICLE#KontaktdatenBearbeiten div.halb {
		font-size:10px;
	}
	MAIN ARTICLE#emailauflistung div input.HAUSNUMMER, MAIN ARTICLE#KontaktdatenBearbeiten div input.HAUSNUMMER {
		width:calc(25% - 4px);
		left:calc(75% - 16px );
	}
	MAIN ARTICLE#emailauflistung div input.STADT, MAIN ARTICLE#KontaktdatenBearbeiten div input.STADT {
		width:calc((100% - 40px) - 25%);
		left:calc(25% + 20px);
	}
	MAIN ARTICLE#emailauflistung div input.STRASSE, MAIN ARTICLE#KontaktdatenBearbeiten div input.STRASSE {
		width:calc((100% - 40px) - 25%);
	}
	MAIN ARTICLE#emailauflistung div input.PLZ, MAIN ARTICLE#KontaktdatenBearbeiten div input.PLZ {
		width:calc(25% - 4px);
	}
	form.email  {
		top:200%;
		left:2%;
		width:96%;
		height:96%;
		opacity:0;
	}
	form.emailshow  {
		top:2%;
		opacity:1;
	}
	form.email .empfaenger .empfaengerauswahl  label {
		font-size:10px;	
	}
	MAIN ARTICLE#emailauflistung * {
		transition:none;
	}
	#neu, #neu-kontakt {
		bottom:20px;
		right:20px;
	}
	MAIN ARTICLE#emailauflistung div span.profilfoto {
		left:auto;
		right:80px;
	}
	MAIN ARTICLE#emailauflistung div span input.spezial {
		width:100%;
	}
	MAIN ARTICLE#KontaktdatenBearbeiten {
		left:10px;
		width:calc(100% - 20px);
	}
	MAIN ARTICLE#KontaktdatenBearbeiten .exit {
		right:10px;
	}
	MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul {
		display:block;
		position:relative;
		list-style: none;
		width:99%;
		height:auto;
		top:40px;
		left:0px !important;
		padding-left:10px;
		float:none;
		clear:both;
		margin-left:0px;
		margin-bottom:50px;
	}
	MAIN ARTICLE#KontaktdatenBearbeiten #ZusagenVerwaltung ul li input {
		left:00px;
	}
}