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

body { text-align:left; font-family: Arial, Helvetica, sans-serif; font-size:16px; background-image: url(../pics/hg.jpg); background-position:center; background-position: top; background-repeat: no-repeat; margin-top: 0px; margin-bottom:0px; margin-left:0px; margin-right:0px; }
@media (prefers-color-scheme: dark) {body { background-image: url(../pics/hg2.jpg); background-color:#404040;}}
@media only screen and (max-width:1200px) {body { text-align:left; font-size:48px; background-image: none; background-position:center; background-position: top; background-repeat: no-repeat; margin-top: 0px; margin-bottom:0px; margin-left:0px; margin-right:0px; }}
@media only screen and (max-width:1080px) {body { text-align:left; font-size:48px; background-image: none; background-position:center; background-position: top; background-repeat: no-repeat; margin-top: 0px; margin-bottom:0px; margin-left:0px; margin-right:0px; }}
@media (prefers-color-scheme: dark) {body { background-color:#404040;}}

.h1 {font-size: 1.5em; color: #3f8ec2; text-align:left; line-height: 1.0; margin-top:0px;}
.h2 {font-size: 1.2em; color: #3f8ec2; text-align:left; line-height: 1.5; margin-top:0px;}
.h3 {font-size: 1.0em; color: #3f8ec2; text-align:left; line-height: 1.5; margin-top:0px;}
.h4 {font-size: 1.2em; color: #8db823; text-align:left; line-height: 1.5; margin-top:0px;}
.h5 {font-size: 1.0em; color: #333; text-align:left; line-height: 1.0; margin-top:0px; font-weight:bold;}

@media (prefers-color-scheme: dark) {
	.h5 {font-size: 1.0em; color: #FFF; text-align:left; line-height: 1.0; margin-top:0px;}}

h1 {font-size: 1.0em; font-weight:bold;}
h2 {font-size: 1.0em; font-weight:bold;}
h3 {font-size: 1.0em; font-weight:bold;}
h4 {font-size: 1.0em; font-weight:bold;}
h5 {font-size: 1.0em; font-weight:bold;}

p {font-size: 1.0em; font-weight:normal;}

.p {font-size: 1.0em; color: #333; text-align:left; line-height: 1.5;}
.p1 {font-size: 1.0em; color: #333; text-align:left; line-height: 1.5;}
.p2 {font-size: 1.0em; color: #8db823; text-align:left; line-height: 1.5;}
.p3 {font-size: 0.8em; color: #3f8ec2; text-align:center; line-height: 1.5;}
.p4 {font-size: 0.8em; color: #333; text-align:left; line-height: 1.2;}
.p5 {font-size: 1.0em; color: #8db823; text-align:center; line-height: 1.5;}
.p6 {font-size: 1.0em; color: #333; text-align:left; line-height: 1.5;}

@media (prefers-color-scheme: dark) {
	.p {font-size: 1.0em; color: #FFF; text-align:left; line-height: 1.5;}
.p1 {font-size: 1.0em; color: #FFF; text-align:left; line-height: 1.5;}
.p2 {font-size: 1.0em; color: #8db823; text-align:left; line-height: 1.5;}
.p3 {font-size: 0.8em; color: #3f8ec2; text-align:center; line-height: 1.5;}
.p4 {font-size: 0.8em; color: #FFF; text-align:left; line-height: 1.2;}
.p5 {font-size: 1.0em; color: #8db823; text-align:center; line-height: 1.5;}
.p6 {font-size: 1.0em; color: #FFF; text-align:left; line-height: 1.5;}}


.inhalt {font-family: Arial, Helvetica, sans-serif; background-image:url(../pics/hg-.jpg); background-repeat:repeat-y; }
.wrapper {width:1024px; margin-top:0px; margin-left:auto; margin-right:auto; margin-bottom:0px; background-color:#FFF; }
@media only screen and (max-width:1200px) {.wrapper { width:100%; background-color:#FFF; margin-top: 0px; margin-bottom:0px; margin-left:0px; margin-right:0px; }}
@media only screen and (max-width:860px) {.wrapper { min-width:860px; max-width:860px; width:100%; background-color:#FFF; margin-top: 0px; margin-bottom:0px; margin-left:0px; margin-right:0px; }}
.ergotherapie {width:1024px; margin-top:0px; background-color:#FFF; float:left;}
@media only screen and (max-width:1200px) {.ergotherapie {width:100%; margin-top:0px; background-color:#FFF; float:left;}}

.eckrund { border-radius:8px;}

a:link {text-decoration: none; color: #8db823;} a:visited {	text-decoration: none; color: #8db823;} a:hover {text-decoration: none; background-color:#3f8ec2; color:#FFF;} a:active {text-decoration: none; color: #8db823;}
a:focus {text-decoration: none; background-color:#3f8ec2; color:#FFF; }

#logo {padding-top: 0px; padding-left: 0px; padding-right:0px; padding-bottom:0px; width:1024px; height:98px; background-image:url(../pics/ergo-ries-bg.jpg); background-repeat:repeat-x; }
.logo {width:513px; height:98px; }
#logo-mobil { width:0px; height:0px; visibility:hidden; display:none;}
.logo-mobil { width:0px; height:0px; visibility:hidden; display:none;}
@media only screen and (max-width:1200px) {#logo { width:0px; height:0px; visibility:hidden; display:none;}}
@media only screen and (max-width:1200px) {.logo {width:0px; height:0px; visibility:hidden; display:none; }}
@media only screen and (max-width:1200px) {#logo-mobil { width:100%; height:auto; visibility: visible; display: block; background-image:url(../pics/ergo-ries-logo-hg.jpg); background-size: contain;}}
@media only screen and (max-width:1200px) {.logo-mobil {width:80%; height:auto; padding-left:10%; padding-right:10%; visibility: visible; display: block; float:left; }}
@media only screen and (max-width:1080px) {.logo-mobil {width:90%; height:auto; padding-left:5%; padding-right:5%; visibility: visible; display: block; }}


#ergories {padding-top: 0px; padding-left: 0px; padding-right:30px; width:700px; float:right; background-color:FFF;}
@media only screen and (max-width:1200px) {#ergories {padding-top: 0px; padding-left: 0px; padding-right:0px; width:100%; float:right; background-color:FFF;  }}
#content {padding-top: 0px; padding-left: 0px; padding-right:20px; width:680px; float:right; background-color:FFF; padding-bottom:60px;}
@media only screen and (max-width:1200px) {#content {padding-top: 80px; padding-left: 5%; padding-right:5%; width:90%; float:right; background-color:FFF;   padding-bottom:60px;}}
@media only screen and (max-width:1080px) {#content {padding-top: 80px; padding-left: 4%; padding-right:4%; width:92%; float:right; background-color:FFF;   padding-bottom:60px;}}

#header {padding-top: 0px; padding-left: 0px; padding-right:0px; width:730px; }
#header-mobil {width:0px; height:0px; visibility:hidden; display:none; }
.header-mobil {width:0px; height:0px; visibility:hidden; display:none; }
.header-pc {width:100%; height:auto; }
@media only screen and (max-width:1200px) {
	#header {width:0px; height:0px; visibility:hidden; display:none; }
	.header-pc {width:0px; height:0px; visibility:hidden; display:none; }
	.header-pc {width:100%; height:auto; visibility: visible; display:block; }
	#header-mobil {width:100%; height:auto; visibility: visible; display:block; }
	.header-mobil {width:100%; height:auto; visibility: visible; display:block; }}

#info {padding-top: 0px; padding-left: 0px; width:294px;  float:left; background-image:url(../pics/ergotherapie_noerdlingen_01.png); background-repeat:no-repeat;}
@media only screen and (max-width:1200px) {#info { visibility:hidden; display:none; padding-top: 0px; padding-left: 0px; width:0px; height:0px;  float:left; background-image: none; background-repeat:no-repeat;}}
@media only screen and (max-width:1080px) {#info { visibility:hidden; display:none; padding-top: 0px; padding-left: 0px; width:0px; height:0px;  float:left; background-image: none; background-repeat:no-repeat;}}
#kontakt {padding-top: 30px; padding-left: 30px; width:185px; float:left;}
@media only screen and (max-width:1200px) {#kontakt {visibility:hidden; display:none; padding-top: 0px; padding-left: 0px; width:0px; height:0px; float:left;}}
@media only screen and (max-width:1080px) {#kontakt {visibility:hidden; display:none; padding-top: 0px; padding-left: 0px; width:0px; height:0px; float:left;}}

#footer {padding-top: 60px; padding-left: 0px; width:80%; height:auto; padding-left:10%; padding-right:10%; height:auto; margin-left:0px; margin-right:0px; background-image:url(../pics/footer.jpg); float:left; background-repeat:repeat; padding-bottom:80px;}
@media only screen and (max-width:1200px) {#footer {padding-top: 120px; padding-left: 0px; width:90%; padding-left:5%; padding-right:5%; margin-left:0px; margin-right:0px; background-image:url(../pics/footer.jpg); background-repeat:repeat; float:left; }}

.footer- {border-radius:20px;} 
.footer {text-decoration: none; font-size:1.0em; list-style:none; color:#FFF; padding:5px; line-height:1.8; } a.footer:link {text-decoration: none; color:#8db823; } a.footer:visited {	text-decoration: none; color:#8db823;} a.footer:hover {text-decoration: none; background-color:#3f8ec2; color:#FFF; } a.footer:active {text-decoration: none; color:#8db823; } a.footer:focus { background-color:#3f8ec2; color:#FFF;}

@media only screen and (max-width:1200px) {.footer {font-size:1.2em; }}

#footer-boxen { width:1024px; margin-left:auto; margin-right:auto;}
@media only screen and (max-width:1200px) {#footer-boxen { width:100%; margin-left:0px; margin-right:0px;}}
#copyright- { width:1024px; margin-left:auto; margin-right:auto; float: left;}
@media only screen and (max-width:1200px) {#copyright- { width:80%; margin-left:0px; margin-right:0px;}}
#footer-box { width:30%; float:left;}
@media only screen and (max-width:1200px) {#footer-box { width:80%; float:left;}}

.siegel { width:100%; float:right; padding-right:0%;}
@media only screen and (max-width:1200px) {.siegel { float:left; padding-top:80px; width: 100%; padding-right:0px;}}

.siegel- { width:45%; float:right; padding-right:5%; background-color:transparent; text-decoration: none; border:0px; }
a.siegel- { width:45%; float:right; padding-right:5%; background-color:transparent; text-decoration: none; border:0px; }
@media only screen and (max-width:1200px) {.siegel- { width:50%; float:left; padding-top:80px; padding-right:0px;}}
 a.siegel-:focus { color:#FFF; border: 2px solid #3f8ec2; }
 a.siegel-:hover { color:#FFF; border: 2px solid #3f8ec2; }

#bild {padding-top: 5px; padding-left: 0px; padding-right:20px; padding-bottom:10px; float:left; }
#bild- {padding-top: 0px; padding-left: 0px; padding-right:20px; padding-bottom:0px; float:left; }
#bild-1 {padding-top: 5px; padding-left: 0px; padding-right:30px; padding-bottom:10px; float:left; }

#picture-bild { width:30%; float:left; padding-top:5px; }
#picture-text { width:60%; padding-left:5%; padding-right:5%; float:left; }
#picture-abstand { width:100%; float:left; }

#sprung {width:auto; height:auto; visibility: visible; display: block;}
.sprung {width:auto; height:auto; padding-left:0px; padding-right:0px; font-size: 1em; line-height:1.0; background-color:transparent; position:absolute; left:-700px;}
a.sprung:link {width:auto; height:auto; top:0px; }
a.sprung:focus { min-width:300px; color:#FFF; background-color:#3f8ec2; padding-left:10px; padding-right:10px; padding-top:20px; padding-bottom:10px; font-size: 1em; line-height:1.0; position:absolute; z-index:990; top:0px; left:20px; }

#bilder {padding-top: 6px; padding-left: 0px; padding-right:20px; padding-bottom:5px; float:left; }
#seite-1 {padding-top: 0px; padding-left: 0px; padding-right:25px; float:left; width:340px; }
@media only screen and (max-width:1200px) {#seite-1 {padding-top: 0px; padding-left: 0px; padding-right:0px; float:left; width:100%; }}
#seite-2 {padding-top: 0px; padding-left: 0px; padding-right:0px; float:left; width:325px; }
@media only screen and (max-width:1200px) {#seite-2 {padding-top: 0px; padding-left: 0px; padding-right:0px; float:left; width:100%; }}

#galerie { padding-left: 0px; padding-right:0px; padding-bottom:10px; text-align:left; }
#galerie- {padding-top: 5px;text-align:left; float:left; width:100%; float:left; }
.galerie { padding-left: 1%; padding-right:1%; padding-bottom:10px; text-align:left; width:30%; }
@media only screen and (max-width:1200px) {.galerie { padding-left: 1%; padding-right:1%; padding-bottom:10px; text-align:left; width:47%; }}
@media only screen and (max-width:1080px) {.galerie { padding-left: 0%; padding-right:0%; padding-bottom:10px; text-align:left; width:96%; }}
	

#mobilenavigation { visibility:hidden; width:0px; margin-top:0px; margin-right:0px; background-color:#FFF; box-shadow: none; height:0px; padding-top:0px; }
@media only screen and (max-width:1200px) {#mobilenavigation { visibility:visible; width:100%;  margin-top:0px; margin-right:0px; background-color:#3f8ec2; box-shadow: 0px 3px 6px #36354b; height:120px; }}
@media only screen and (max-width:860px) {#mobilenavigation {visibility:visible;  min-width:860px; max-width:860px; width:100%;  margin-top:0px; margin-right:0px; background-color:#3f8ec2; box-shadow: 0px 3px 6px #36354b; height:120px; }}
#navigation {visibility:hidden; margin-top:0px; width:0px; height:39px; padding-top:7px; margin-left:auto; margin-right:auto; background-color: transparent;}
@media only screen and (max-width:1200px) {#navigation { visibility:visible; margin-top:0px; width:100%; height:120px; padding-top:0px; background-color: transparent;}}
@media only screen and (max-width:860px) {#navigation { visibility:visible; margin-top:0px; width:860px; height:120px; padding-top:0px; background-color: transparent; }}
.navigation {margin-left:auto; margin-right:auto;}

nav.topmenu-1 {visibility:hidden; margin-top:0px; height: 0px;  padding-top:0px; padding-bottom:0px; text-align:left; margin-right:auto; margin-left:auto; }  

@media only screen and (max-width:1200px) {
nav.topmenu-1 { visibility:visible; margin-top:0px; height: auto; max-height:0px; width:100%; overflow: hidden; transition: all 0.5s; padding-top:0px; padding-bottom:0px; background-color: transparent; float:left; }  
nav.topmenu-1 ul li a { color: #FFF; text-decoration:none; display:block; font-family: Arial, Helvetica, sans-serif; font-weight:300; font-style:normal; line-height:1.0; padding-top:16px; padding-bottom:20px; width:100%; text-align:left; list-style-type: none; margin-left:auto; margin-right:auto; }
nav.topmenu-1 ul li { list-style-type: none; }
a.navigation-link1 { color: #FFF; font-size:56px; width:90%; padding-left:10%; }
a:hover.navigation-link1 { color: #FFF; }
#navi1, #navi1 ul { list-style-type:none; margin-top:10px;  float:left; } 
#navi1 ul ul { list-style-type:none; margin-top:0px;  float:left;} }

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

@media only screen and (max-width:1200px) {
	label.menu1 {display: block; background-repeat:repeat; width: 120px; height: 120px; margin-left: auto; margin-right:auto; border-radius: 1px; margin-top:0px; margin-bottom:0px: }
	input#menu1 {display:block; position:absolute; left:-500px;}
	.line-1 {margin-left:34px;  height: 5px; width: 48px;   background: #FFF; border-radius: 2px; color: #fee3c6;  display: block;   transition: 0.5s;   transform-origin: center; position: absolute;  }
	.line-1:nth-child(1) { margin-top: 36px; }
	.line-1:nth-child(2) { margin-top: 54px; }
	.line-1:nth-child(3) { margin-top: 72px; }
	#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  + nav.topmenu-1 {   max-height: 1500px; width:100%; background-color:#5e5d67; box-shadow: 0px 0px 10px #666; padding-bottom:90px;  margin-bottom:0px; padding-top:100px; }

[type="checkbox"] + label::before { display:block; content:"Menü öffnen"; position:absolute; left:-500px;}
[type="checkbox"]:focus + label::before { width:500px; height:auto; left:10px; display:block; content:"Menü öffnen Leertaste drücken"; position: absolute; z-index:950; left:-800px;}
[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:#000; }

#navigation-1	{margin-top:0px; margin-left:0px; margin-right:0px; width:1024px; height:65px; background-image:url(../pics/ergotherapie-.jpg); background-repeat:no-repeat; text-align:left;}
@media only screen and (max-width:1200px) {#navigation-1	{ visibility:hidden; margin-top:0px; margin-left:0px; margin-right:0px; width:0px; height:0px; background-image: none; background-repeat:no-repeat; text-align:left;}}
@media only screen and (max-width:1080px) {#navigation-1	{ visibility:hidden; margin-top:0px; margin-left:0px; margin-right:0px; width:0px; height:0px; background-image: none; background-repeat:no-repeat; text-align:left;}}
 
#navi, #navi ul { list-style-type:none; margin:0; padding:0; } 
		#navi li { float: left; } 		
		#navi li ul { display:none; margin-top:0px;} 
		#navi li:hover ul { display:block; } 
	  #navcontainer { height:100px; position:absolute; text-align:left; }
	  
	  #navi { position:absolute; height:30px; width: 520px; top:120px; margin-left:294px; text-align:left; }	  
	  #navi li { border:0px; margin-right:30px; height:30px;  }
	    #navi ul li { border:none; margin-left:-10px; padding-left:10px; padding-top:2px; padding-bottom:2px; height:20px; }		
	  #navi a { text-align:left; display:block;}
	  #navi a:link, #navi a:visited { font-family: Arial, Helvetica, sans-serif; font-size: 1.0em; color: #8db723; text-decoration:none; font-weight:normal; text-align:left; }
	  #navi a:active, #navi a:hover, #navi a:focus { font-family: Arial, Helvetica, sans-serif; font-size: 1.0em; background-color:#3f8ec2; color:#FFF; text-decoration:none; font-weight:normal; }
	  
	  #navi ul li a:active, #navi ul li a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 1.0em; background-color:#3f8ec2; color:#FFF;  text-decoration:none; font-weight:normal; }
.link {min-width: 40px; font-size: 1.0em;}
.link1 {width: 79px; font-size:  1.0em; }
.link2 {width: 300px; font-size: 1.0em;}

a:hover.link { text-decoration: none; background-color:#3f8ec2; color:#FFF; }
a:focus.link { text-decoration: none; background-color:#3f8ec2; color:#FFF; }
a.link:focus { text-decoration: none; background-color:#3f8ec2; color:#FFF; }


#navigation-2	{margin-top:40px; margin-left:30px; margin-right:0px; height:220px; padding-left:0px; width:200px; font-family:Arial, Helvetica, sans-serif;}
@media only screen and (max-width:1200px) {#navigation-2 { visibility:hidden; margin-top:0px; margin-left:0px; margin-right:0px; height:0px; padding-left:0px; width:0px; font-family:Arial, Helvetica, sans-serif;}}
@media only screen and (max-width:1080px) {#navigation-2 { visibility:hidden; margin-top:0px; margin-left:0px; margin-right:0px; height:0px; padding-left:0px; width:0px; font-family:Arial, Helvetica, sans-serif;}}
	
#navigation-2 .navi
{ float: left; display: block;  width: 150px; height: 30px; text-align: left; font-size: 14px; font-weight:bold; }

#navigation-2 .navi:hover 
{ height: auto; background-color:#3f8ec2; color:#FFF;}
#navigation-2 .navi:focus
{ height: auto; background-color:#3f8ec2; color:#FFF;}

a.links  
{ display: block; width: 160px; height: 23px; padding-top: 6px; padding-left: 12px; text-decoration: none; font-size: 16px; font-weight:normal; color: #FFF; background-image:url(../pics/navi.jpg);margin-bottom: 0px;}

a.links-  
{ display: block; width: 160px; height: 23px; padding-top: 6px; padding-left: 12px; text-decoration: none; font-size: 16px; font-weight:normal; color: #3f8ec2; background-image:url(../pics/navi.jpg);margin-bottom: 0px;}

a.links-1
{ display: block; width: 170px; height: 23px; padding-top: 6px; padding-left: 28px; text-decoration: none; font-size: 16px; font-weight:normal; color: #FFF; background-image:url(../pics/navi-.jpg);margin-bottom: 0px;}

a.links-1-
{ display: block; width: 170px; height: 23px; padding-top: 6px; padding-left: 28px; text-decoration: none; font-size: 16px; font-weight:normal; color: #3f8ec2; background-image:url(../pics/navi-.jpg);margin-bottom: 0px;}

a:hover.links { text-decoration: none; background-color:#3f8ec2; color:#FFF; background-image:none; }
a:focus.links { text-decoration: none; background-color:#3f8ec2; color:#FFF; background-image:none; }

a:hover.links-1 {  text-decoration: none; background-color:#3f8ec2; color:#FFF;}
a:focus.links-1 {  text-decoration: none; background-color:#3f8ec2; color:#FFF;}

a:hover.links- {  text-decoration: none; background-color:#3f8ec2; color:#FFF;}
a:focus.links- {  text-decoration: none; background-color:#3f8ec2; color:#FFF;}

a:hover.links-1- {  text-decoration: none; background-color:#3f8ec2; color:#FFF;}
a:focus.links-1- {  text-decoration: none; background-color:#3f8ec2; color:#FFF;}