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

/* roboto-condensed-regular - latin */
/* This Font is designed by Christian Robertson */
/* This Font Software is licensed under the SIL Open Font License, Version 1.1. (https://fabian-hackel.de/heidenheim/pics/roboto-condensed/OFL.txt) */
@font-face {
  font-display: swap; 
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../pics/roboto-condensed/roboto-condensed-v27-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../pics/roboto-condensed/roboto-condensed-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../pics/roboto-condensed/roboto-condensed-v27-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../pics/roboto-condensed/roboto-condensed-v27-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../pics/roboto-condensed/roboto-condensed-v27-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../pics/roboto-condensed/roboto-condensed-v27-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-600 - latin */
/* This Font is designed by Christian Robertson */
/* This Font Software is licensed under the SIL Open Font License, Version 1.1. (https://fabian-hackel.de/heidenheim/pics/roboto-condensed/OFL.txt) */
@font-face {
  font-display: swap; 
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('../pics/roboto-condensed/roboto-condensed-v27-latin-600.eot'); /* IE9 Compat Modes */
  src: url('../pics/roboto-condensed/roboto-condensed-v27-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../pics/roboto-condensed/roboto-condensed-v27-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../pics/roboto-condensed/roboto-condensed-v27-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../pics/roboto-condensed/roboto-condensed-v27-latin-600.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../pics/roboto-condensed/roboto-condensed-v27-latin-600.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

body { font-family: "Roboto Condensed", sans-serif; font-size: 16px; line-height: 1.5; color: #444444; margin-top: 0px; margin-bottom:0px; margin-left:0px; margin-right:0px; background-image:url(../pics/hg/soziale-assistenz.jpg); background-repeat:repeat-x; }
@media only screen and (max-width:1280px) {body { font-family: "Roboto Condensed", sans-serif; font-size: 38px; line-height: 1.5; color: #444444; margin-top: 0px; margin-bottom:0px; margin-left:0px; margin-right:0px; background-image:url(../pics/hg/soziale-assistenz.jpg); background-repeat:repeat-x;}}
@media only screen and (max-width:860px) {body { font-family: "Roboto Condensed", sans-serif; font-size: 42px; line-height: 1.5; color: #444444; margin-top: 0px; margin-bottom:0px; margin-left:0px; margin-right:0px; }}

.p {font-size: 1em; color: #000; text-align:left; line-height: 1.5; font-weight:400;}
.p1 {font-size: 1.1em; color: #000; text-align:left; line-height: 1.5; font-weight:400;}
.h1 {font-size: 1.9em; color: #000; text-align:left; line-height: 1.5; font-weight:600;}
.h2 {font-size: 1.9em; color: #00a5c0; text-align:left; line-height: 1.5; font-weight:600;}
.h3 {font-size: 1.9em; color: #FFF; text-align:left; line-height: 1.5; font-weight:400;}
.h4 {font-size: 1.8em; color: #000; text-align:left; line-height: 1.5; font-weight:400;}
.p-leichte-sprache { font-family: sans-serif; font-size: 1.5em; color: #444444; text-align:left; line-height: 1.5; font-weight:400;}
.h1-leichte-sprache { font-family: sans-serif; font-size: 2.5em; color: #000; text-align:left; line-height: 1.5; font-weight:400;}
.h2-leichte-sprache { font-family: sans-serif; font-size: 2.2em; color: #00a5c0; text-align:left; line-height: 1.5; font-weight:400;}
.footer {font-size: 1.1em; color: #000; text-align:left; line-height: 2.0; font-weight:400; list-style:none; display:block;}

#direktlink {width:100%; background-color:#CCC; height:50px;}


.direktlink {width:auto; padding-left:10px; padding-right:10px; font-size: 1em; line-height:1.0; background-color:transparent;}
a.direktlink:link {width:auto; height:auto; top:0px; }
a.direktlink:focus { background-color:#00a6c0;}

@media only screen and (max-width:1280px) {
	.p {font-size: 1em; color: #000; text-align:left; line-height: 1.5; font-weight:400;}
.p1 {font-size: 1.1em; color: #000; text-align:left; line-height: 1.5; font-weight:400;}
.h1 {font-size: 1.7em; color: #000; text-align:left; line-height: 1.5; font-weight:600;}
.h2 {font-size: 1.5em; color: #00a5c0; text-align:left; line-height: 1.5; font-weight:600;}
.h3 {font-size: 1em; color: #FFF; text-align:left; line-height: 1.3; font-weight:400;}
.h4 {font-size: 1em; color: #000; text-align:left; line-height: 1.3; font-weight:400;}
.p-leichte-sprache { font-family: sans-serif; font-size: 1.5em; color: #444444; text-align:left; line-height: 1.5; font-weight:400;}
.h1-leichte-sprache { font-family: sans-serif; font-size: 2.5em; color: #000; text-align:left; line-height: 1.5; font-weight:400;}
.h2-leichte-sprache { font-family: sans-serif; font-size: 2.2em; color: #00a5c0; text-align:left; line-height: 1.5; font-weight:400;}
.footer {font-size: 1.1em; color: #000; text-align:left; line-height: 2.0; font-weight:400; list-style:none; display:block;}

#direktlink {width:100%; background-color:#CCC; min-height:100px; height:auto;}
.direktlink {width:auto; padding-left:10px; padding-right:10px; font-size: 0.5em; line-height:0.2; background-color:transparent;}
}

@media only screen and (max-width:1200px) { #direktlink {width:100%; background-color: transparent; height:auto; position:absolute; z-index:600; top:200px;  }
.direktlink {width:400px; padding-left:2px; padding-right:2px; padding-bottom:20px; padding-top:20px; font-size: 0.5em; line-height:auto; background-color:transparent; position:absolute; left:-500px;}
a.direktlink:focus {left:20px; top:20px;  background-color:#00a6c0;}
}

@media only screen and (max-width:920px) {
	.p {font-size: 1em; color: #000; text-align:left; line-height: 1.5; font-weight:400;}
.p1 {font-size: 1.1em; color: #000; text-align:left; line-height: 1.5; font-weight:400;}
.h1 {font-size: 1.5em; color: #000; text-align:left; line-height: 1.5; font-weight:600;}
.h2 {font-size: 1.5em; color: #00a5c0; text-align:left; line-height: 1.5; font-weight:600;}
.h3 {font-size: 0.9em; color: #FFF; text-align:left; line-height: 1.0; font-weight:400;}
.h4 {font-size: 0.8em; color: #000; text-align:left; line-height: 1.0; font-weight:400;}
.p-leichte-sprache { font-family: sans-serif; font-size: 1.5em; color: #444444; text-align:left; line-height: 1.5; font-weight:400;}
.h1-leichte-sprache { font-family: sans-serif; font-size: 2.5em; color: #000; text-align:left; line-height: 1.5; font-weight:400;}
.h2-leichte-sprache { font-family: sans-serif; font-size: 2.2em; color: #00a5c0; text-align:left; line-height: 1.5; font-weight:400;}
.footer {font-size: 1.1em; color: #000; text-align:left; line-height: 2.0; font-weight:400; list-style:none; display:block;}


}
	
.wrapper {width:100%; margin-top:0px; margin-left:auto; margin-right:auto; margin-bottom:0px; background-color: transparent;  }
.link {text-decoration: none; color: #000; list-style:none; } a:link {text-decoration: none; color: #000; list-style:none; } a:visited {color: #000;} a:hover { color: #888888;} a:active {color: #444444;} a:focus { background-color:#00a6c0; color: #000;} a:focusxx { border-color:#0CF; border-width:1px; border-style:solid; color: #000;}

 



#header-logo {margin-left:0px; margin-right:0px; width:100%; height:180px; box-shadow: 0px 2px 5px #7b7b7c;  background-color:transparent; text-align:right; line-height:0.0; position:absolute; z-index:100; margin-top:0px; }
#logo {width:350px; height:auto; float:right; right:0px; z-index:700; position:absolute; padding-top:30px;  }
.logo {width:350px; height:auto; float:right; right:0px; }
@media only screen and (max-width:1280px) {
	#header-logo {margin-left:0px; margin-right:0px; width:100%; height:180px; box-shadow: 0px 2px 5px #7b7b7c; background-color:transparent; text-align:right; line-height:0.0; position:absolute; z-index:100; margin-top:0px; }
#logo {width:450px; height:auto; float:right; right:0px; z-index:700; position:absolute; padding-top:30px;  }
.logo {width:450px; height:auto; float:right; right:0px; }
	}
	

#leichte-sprache { margin-right:0px; width:120px; height:120px; border-radius:50%; float:left; box-shadow: 0px 0px 5px #36354b; position:fixed; z-index:700; right:40px; bottom:20px;}
.leichte-sprache { border-radius:50%; width:120px; height:120px}
#hinweise { width:0px; height:0px; visibility:hidden;}
.hinweise { width:0px; height:0px; visibility:hidden;}
#hinweisbanner {margin-left:0px; margin-right:0px; width:100%; height:40px; background-color:#CCC; background:hsla(230, 10%, 80%, 0.8); position:absolute; bottom:0px; z-index:200; line-height:0.0; position:fixed; }
.hinweisbanner { width:36px; height:auto;  padding-left:20px; padding-right:0px; float:left;}
#phinweisbanner { background-color:transparent; float:left; margin-left:20px; width:auto; height:auto; padding-top:20px; }
.phinweisbanner { color:#666; line-height:0.0; font-size:16px;  text-align: left;}

@media only screen and (max-width:1280px) {
	#leichte-sprache { margin-right:20px; width:170px; height:170px; border-radius:50%; float:left; box-shadow: 0px 0px 5px #36354b; position:absolute; position:fixed; z-index:700; right:20px; top:auto; bottom:10px;}
.leichte-sprache { border-radius:50%; width:170px; height:170px}
#hinweise { margin-right:auto; margin-left:0px; width:70px; height:auto; visibility:visible; position:absolute; position:fixed; z-index:700; bottom:-10px; left:10px;}
.hinweise { width:100%; height:auto; visibility:visible;}
#hinweisbanner {width:0px; height:0px; visibility:hidden;}
.hinweisbanner { width:0px; height:0px; visibility:hidden;}
#phinweisbanner { width:0px; height:0px; visibility:hidden;}
	}

#header {margin-left:0px; margin-right:0px; width:90%; padding-left:10%; height:100px; background-color:#00a5c0; background-image:url(../pics/hg/assistenz.jpg); background-repeat:repeat; line-height:0.0; margin-bottom:0px; margin-top:180px; float:left;  }


	
#header-start {margin-left:0px; margin-right:0px; width:90%; padding-left:10%; height:500px; background-color:#00a5c0; background-image:url(../pics/hg/assistenz.jpg); background-repeat:repeat; line-height:0.0; margin-bottom:0px; margin-top:180px; float:left;  }
#header-text { float:left; width:50%; height:400px; margin-top:100px; line-height:normal; }
#header-illu { float:left; width:40%; height:500px; margin-top:40px;  }
.illu {height:auto; width:100%;  }

@media only screen and (max-width:1280px) {
	#header-start {margin-left:0px; margin-right:0px; width:90%; padding-left:10%; height:500px; background-color:#00a5c0; background-image:url(../pics/hg/assistenz.jpg); background-repeat:repeat; line-height:0.0; margin-bottom:0px; margin-top:180px; float:left;  }
#header-text { float:left; width:50%; height:auto; margin-top:100px; line-height:normal; }
#header-illu { float:left; width:50%; height:auto; margin-top:80px; }
.illu {height:auto; width:100%; }
	}
	
	@media only screen and (max-width:800px) {
	#header-start {margin-left:0px; margin-right:0px; width:90%; padding-left:10%; height:500px; background-color:#00a5c0; background-image:url(../pics/hg/assistenz.jpg); background-repeat:repeat; line-height:0.0; margin-bottom:0px; margin-top:180px; float:left;  }
#header-text { float:left; width:60%; height:auto; margin-top:100px; line-height:normal; }
#header-illu { float:left; width:40%; height:auto; margin-top:80px; }
.illu {height:auto; width:100%; }
	}

#header-leistungen {margin-left:0px; margin-right:0px; width:100%; height:auto; background-color:#000; line-height:0.0; margin-bottom:0px; margin-top:0px; float:left;}
#leistungen {margin-left:auto; margin-right:auto; width:45%; height:auto; background-color:#00a5c0; padding-left:5%; padding-right:5%; padding-top:30px; padding-bottom:30px; margin-top:40px; margin-bottom:40px;}
#leistungentext {margin-left:auto; margin-right:auto; width:45%; height:auto; background-color:#00a5c0; padding-left:5%; padding-right:5%; padding-top:30px; padding-bottom:30px; margin-top:0px; margin-bottom:40px;}
#leistungenbild {margin-left:auto; margin-right:auto; width:55%; height:auto; background-color:#00a5c0; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; margin-top:90px; margin-bottom:0px;}
.leistungen {font-size: 24px; color: #000; text-align:left; line-height: 1.5; font-weight:700; }
#assistenz {margin-left:auto; margin-right:auto; width:80%; height:auto; padding-left:10%; padding-right:10%; padding-top:30px; padding-bottom:30px; margin-top:40px; margin-bottom:40px;}
.assistenz {font-size: 24px; color: #00a5c0; text-align:left; line-height: 1.5; font-weight:700;}
@media only screen and (max-width:1280px) {
	#header-leistungen {margin-left:0px; margin-right:0px; width:100%; height:auto; background-color:#000; line-height:0.0; margin-bottom:0px; margin-top:0px; float:left; padding-top:50px; padding-bottom:50px;}
	#leistungen {margin-left:auto; margin-right:auto; width:70%; height:auto; background-color:#00a5c0; padding-left:5%; padding-right:5%; padding-top:30px; padding-bottom:30px; margin-top:40px; margin-bottom:40px;}
	#leistungentext {margin-left:auto; margin-right:auto; width:70%; height:auto; background-color:#00a5c0; padding-left:5%; padding-right:5%; padding-top:30px; padding-bottom:30px; margin-top:0px; margin-bottom:40px;}
#leistungenbild {margin-left:auto; margin-right:auto; width:80%; height:auto; background-color:#00a5c0; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; margin-top:90px; margin-bottom:0px;}
	.leistungen {font-size: 48px; color: #000; text-align:left; line-height: 1.5; font-weight:400;}
	#assistenz {margin-left:auto; margin-right:auto; width:80%; height:auto; padding-left:5%; padding-right:5%; padding-top:30px; padding-bottom:30px; margin-top:40px; margin-bottom:40px;}
	.assistenz {font-size: 42px; color: #00a5c0; text-align:left; line-height: 1.5; font-weight:400;}
	}

#content {width:80%; height:auto; padding-left:10%; padding-right:10%; margin-top:0px; padding-top:140px; padding-bottom:60px; float:left; background-color:#FFF;}

#footer {width:80%;  height:auto; padding-left:10%; padding-right:10%; background-color:#00a5c0; margin-bottom:0px; margin-top:0px; float:left; padding-bottom:180px; margin-bottom:100px; padding-top:80px;}

a.footer:focus { background-color:#000; color: #FFF;}
 .footer:focus { background-color:#000; color: #FFF;}
 a:focus.footer { background-color:#000; color: #FFF;}


.bild-leistungsspektrum {float:left; width:100%; margin-bottom:70px; margin-top:40px; border-radius: 6px;}

	
#navigation-top-bg {width:90%; margin-top:0px; padding-left:10%; margin-right:0px; background-color:transparent; height:100px; padding-top:80px; position:absolute; z-index:200; -webkit-text-size-adjust: none !important; text-size-adjust: none !important; -moz-text-size-adjust: none !important;  }
#navigation-top {margin-top:0px; width:100%; height:39px; padding-top:7px; margin-left:0px; margin-right:auto; background-color: transparent; }
.navigation-top {margin-left:0px; margin-right:auto;}
#navigation-top-menu { margin-top:0px; height: 70px; width:100%; padding-top:0px; padding-bottom:0px; text-align:left; }  
#navigationspunkt { float: left; display: block; overflow: hidden; min-width: 20px; text-align: center; margin-left:0px; }
#navigationspunkt:hover { height: auto; }
a.navigationspunkt-text { height: 32px; padding-left: 0px; padding-right: 20px; padding-top:6px; display: block; color: #333; margin-top: 0px;  font-size: 16px; font-family: "Roboto Condensed", sans-serif; font-weight: 300; -webkit-text-size-adjust: none !important; text-size-adjust: none !important; -moz-text-size-adjust: none !important; }
a:hover.navigationspunkt-text { color: #CCC;}

@media only screen and (max-width:1580px) {
#navigation-top-bg {width:100%; margin-top:50px; padding-left:0%; margin-left:0px; margin-right:0px; background-color:transparent; height:180px; position:absolute; z-index:400; top:0px; padding-top:0px; }
#navigation-top {margin-top:0px; width:100%; height:150px; padding-top:0px; padding-left:0px; background-color:transparent; }
.navigation-top {margin-left:0px; margin-right:0px;}
#navigation-top-menu { margin-top:0px; height: 0px; max-height:0px; width:100%; overflow: hidden; transition: all 0.5s; padding-top:0px; padding-bottom:0px; background-color: transparent; float:left; } 
#navigationspunkt { float: left; display: block; overflow: hidden; width:100%; text-align: left; padding-left:10%; }
#navigationspunkt:hover { height: auto; }
a.navigationspunkt-text { height: auto; padding-left: 0px; padding-right: 0px; padding-top:0px; display: block; color: #FFF; margin-top: 20px;  font-size: 18px; font-family: "Roboto Condensed", sans-serif; font-weight: 300; line-height:1.2;}
a:hover.navigationspunkt-text { color: #CCC;} 
}

@media only screen and (max-width:1280px) {
#navigation-top-bg {width:100%; margin-top:100px; padding-left:0%; margin-left:0px; margin-right:0px; background-color:transparent; height:180px; position:absolute; z-index:400; top:0px; padding-top:0px; }
#navigation-top {margin-top:0px; width:100%; height:150px; padding-top:0px; padding-left:0px; background-color:transparent; }
.navigation-top {margin-left:0px; margin-right:0px;}
#navigation-top-menu { margin-top:0px; height: auto; max-height:0px; width:100%; overflow: hidden; transition: all 0.5s; padding-top:0px; padding-bottom:40px; background-color: transparent; float:left; } 
#navigationspunkt { float: left; display: block; overflow: hidden; width:100%; text-align: left; padding-left:10%; }
#navigationspunkt:hover { height: auto; }
#navigationspunkt:focus { overflow:visible; height: auto; }
a.navigationspunkt-text { height: auto; padding-left: 0px; padding-right: 0px; padding-top:20px; display: block; color: #FFF; margin-top: 20px;  font-size: 48px; font-family: "Roboto Condensed", sans-serif; font-weight: 300; line-height:1.2;}
a:hover.navigationspunkt-text { color: #CCC;} 
}

@media only screen and (max-width:1200px) {
#navigation-top-bg {width:100%; margin-top:0px; padding-left:0%; margin-left:0px; margin-right:0px; background-color:transparent; height:180px; position:absolute; z-index:400; top:0px; padding-top:0px; }
#navigation-top {margin-top:0px; width:100%; height:150px; padding-top:0px; padding-left:0px; background-color:transparent; }
.navigation-top {margin-left:0px; margin-right:0px;}
#navigation-top-menu { margin-top:0px; height: auto; max-height:0px; width:100%; overflow: hidden; transition: all 0.5s; padding-top:0px; padding-bottom:40px; background-color: transparent; float:left; } 
#navigationspunkt { float: left; display: block; overflow: hidden; width:100%; text-align: left; padding-left:10%; }
#navigationspunkt:hover { height: auto; }
#navigationspunkt:focus { overflow:visible; height: auto; }
a.navigationspunkt-text { height: auto; padding-left: 0px; padding-right: 0px; padding-top:20px; display: block; color: #FFF; margin-top: 20px;  font-size: 48px; font-family: "Roboto Condensed", sans-serif; font-weight: 300; line-height:1.2;}
a:hover.navigationspunkt-text { color: #CCC;} 
}


label.menu1 {display: none; }
input#menu1 {display:none}

@media only screen and (max-width:1580px) {
	label.menu1 {display: block; width: 120px; height: 110px; margin-left:10%; border-radius: 1px; margin-top:30px; margin-bottom:0px; background-color:transparent; }
	input#menu1 {display:block; position:absolute; left:-500px;}
	.line-1 {margin-left:0px;  height: 3px; width: 28px;   background: #333; border-radius: 2px; color: #fee3c6;  display: block;   transition: 0.5s;   transform-origin: center; position: absolute;  }
	.line-1:nth-child(1) { margin-top: 32px; }
	.line-1:nth-child(2) { margin-top: 44px; }
	.line-1:nth-child(3) { margin-top: 56px; }
	#menu1:checked + .menu1 .line-1:nth-child(1){   transform: translateY(12px) rotate(-45deg); }
	#menu1:checked + .menu1 .line-1:nth-child(2){   opacity:0;}
	#menu1:checked + .menu1 .line-1:nth-child(3){   transform: translateY(-12px) rotate(45deg); }
	#menu1:checked + .menu1  + #navigation-top-menu { height:auto; max-height: 1900px; width:100%; background-color:#5e5d67; box-shadow: 0px 0px 10px #666;  padding-bottom:100px; padding-top:80px;  margin-bottom:40px; margin-top:0px;}

[type="checkbox"] + label::before { display:block; content:""; position:relative;}
[type="checkbox"]:focus + label::before { width:300px; height:auto; left:0px; top:0px; background-color:#FFF; display:block; content:"Menü öffnen Leertaste drücken"; position: absolute; z-index:950;}
[type="checkbox"]:checked + label::before { background-color: transparent; display:block; content:""; position:relative; border:hidden;}	

input#menu1:focus {display: block; left:-500px; width: 120px; height: 110px;  background-color:#999; }

}



@media only screen and (max-width:1280px) {
	label.menu1 {display: block; width: 120px; height: 110px; margin-left: 10%; border-radius: 1px; margin-top:30px; margin-bottom:0px; background-color:transparent; }
	input#menu1 {display: block; left:-600px; position:absolute; }
	.line-1 {margin-left:0px;  height: 4px; width: 48px;   background: #333; border-radius: 2px; color: #fee3c6;  display: block;   transition: 0.5s;   transform-origin: center; position: absolute;  }
	.line-1:nth-child(1) { margin-top: 32px; }
	.line-1:nth-child(2) { margin-top: 50px; }
	.line-1:nth-child(3) { margin-top: 68px; }
	#menu1:checked + .menu1 .line-1:nth-child(1){   transform: translateY(18px) rotate(-45deg); }
	#menu1:checked + .menu1 .line-1:nth-child(2){   opacity:0;}
	#menu1:checked + .menu1 .line-1:nth-child(3){   transform: translateY(-18px) rotate(45deg); }
	#menu1:checked + .menu1  + #navigation-top-menu { height:auto; max-height: 1900px; width:100%; background-color:#5e5d67; box-shadow: 0px 0px 10px #666;  padding-bottom:170px; padding-top:120px;  margin-bottom:90px; margin-top:20px;}

[type="checkbox"] + label::before { display:block; content:""; position:relative;}
[type="checkbox"]:focus + label::before { width:300px; height:auto; left:-500px; top:0px; background-color:#FFF; display:block; content:"Menü öffnen"; position: absolute; z-index:950;}
[type="checkbox"]:checked + label::before { background-color: transparent; display:block; content:""; position:relative; border:hidden;}	

input#menu1:focus {display: block; left:-500px; width: 120px; height: 110px;  background-color:#999; }

}