@charset "utf-8";

* {
margin: 0;
padding: 0;
}

@media only screen and ( min-width: 950px ) {
    body { background-color: #B0B0B0;}
}
@media only screen and ( max-width: 440px ) {
    body { background-color: #B0B0B0;}
}
@media only screen and ( min-width: 440px ) and ( max-width: 950px ) {
    body { background-color: #B0B0B0;}
}

html {
height: 100%;
}

html>body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-size: 100%;
}

body {
font-family: Arial,Helvetica,sans-serif;
font-size: 0.8em;
background: linear-gradient(45deg, #9c9c9c 0%, #e3e3e3 100%);
background-attachment:fixed;
}

p {
font-size: 0.8em;
line-height: 24px;
}

em {
font-style:normal;
font-weight:bold;
}

a:link,
a:visited {
color:gray;
text-decoration: none;
font-weight: bold;
text-shadow: -2px 2px 2px rgba(135, 135, 135, 1.0);
font-size: 1.2em;
}

a:hover,
a:focus,
a:active {
color:#707070;
text-decoration: none;
text-shadow: -2px 2px 2px rgba(135, 135, 135, 1.0);
font-size: 1.2em;
}

h1 {
font-weight: bold;
font-size: 1.2em;
line-height: 28px;
text-shadow: -3px 3px 2px rgba(150, 150, 150, 0.95);
color:#656565;
padding-top:2px;
}

h2 {
font-size: 1.2em;
z-index: 9999;
line-height: 28px;
text-shadow: -3px 3px 2px rgba(150, 150, 150, 0.95);
}

h3 {
font-size: 0.9em;
line-height: 24px;
padding-bottom:12px;
}

#menu {
display:flex;
justify-content:space-between; 
height:217px;
padding-right:5px;
}

.ef {
margin-left: -50px;
z-index: 99;
}

.name1 {
font-size: 1.2em;
z-index: 9999;
padding-top: 82px;
margin-left: -200px;
letter-spacing:4px;
}

.titel {
padding-bottom:26px;
margin-top:-14px;
letter-spacing:2px;
}
   
#wrapper {
max-width: 900px;
margin: 0 auto;
background-color:transparent;
display: flex;
flex-direction: column;
color:gray;
margin-bottom:16px;
}

#content1 {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
text-align:center;
color:gray;
min-height:460px;
margin-top: -150px;
padding-top:40px;
padding-left:46px;
padding-right:46px;
z-index:0;
background: linear-gradient(45deg, rgba(217,217,217,1) 0%,rgba(255,255,255,1) 100%);
box-shadow: -11px 14px 22px 2px rgba(0,0,0,0.8);

border-style: solid;
border-width: 11px; 
border-image: url('bilder2/rahmen2-a.png') 11 repeat; 
}

#content2 {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
flex-direction:column;
text-align:left;
color:gray;
min-height:420px;
margin-top: -150px;
padding-top:80px;
padding-left:50px;
padding-right:36px;
z-index:0;
background: linear-gradient(45deg, rgba(217,217,217,1) 0%,rgba(255,255,255,1) 100%);
box-shadow: -11px 14px 22px 2px rgba(0,0,0,0.8);
border-style: solid;
border-width: 11px; 
border-image: url('bilder2/rahmen2-a.png') 11 repeat; 
}

#mitte2 {
	display: flex;
	justify-content:space-between; 
	flex-wrap:wrap;
	padding-bottom:30px;
}

#mitte3 {
	display: flex;
	justify-content:flex-end; 
	flex-wrap:wrap;
	flex-direction: column;
	padding-bottom:20px;
	max-width:830px;
}

#mitte4 {
	display: flex;
	flex-wrap:wrap;
	max-width: 680px;
	align-content: space-between;
	justify-content: space-between;
	align-items:center;
}

#mitte4a {
	display: flex;
	flex-wrap:wrap;
	max-width: 500px;
	align-content: space-between;
	justify-content: space-between;
	align-items:center;
}

#mitte5 {
	display: flex;
	justify-content:space-between; 
	flex-wrap:wrap;
	align-items: center;
	max-width: 760px;
}

.imgLink1{
	display:block;
	width:204px;
	height:429px;
	background-image: url('bilder2/beruf_rahmen.png');
	margin-bottom:10px;
}

.imgLink1:hover img{
	display:none;
}

.imgLink2:hover img{
	display:none;
}

.imgLink2{
	display:block;
	width:204px;
	height:429px;
	background-image: url('bilder2/sport_rahmen.png');
	margin-left:40px;
	margin-right:40px;
	margin-bottom:10px;
}

.imgLink3:hover img{
	display:none;
}

.imgLink3{
	display:block;
	width:204px;
	height:429px;
	background-image: url('bilder2/spiel_rahmen.png');
	margin-bottom:10px;
}

p.bu2 {
	font-size:0.7em;
	padding-top:0px;
	text-align:center;
	padding-bottom:16px;
}

#sidebar {
width: 136px;
left:-164px;
min-height: 224px;
text-decoration: none;
font-size: 1.0em;
color:#fff;
background:#fff;
position: fixed;
margin-top:68px;
padding-left:18px;
z-index:99;
border:4px ridge silver;
}

ul li {
list-style:none;
padding-top:16px;
padding-bottom:16px;
}

#toggle-btn {
z-index: 99;
margin-top: 77px;
margin-right: 4px;
height: 36px;
cursor: pointer;
width: 36px;
}

#toggle-btn:hover {
	background-color:#fff;
}

#toggle-btn:hover div{
	background-color:#fff;
	box-shadow: -3px 3px 4px 2px rgba(0,0,0,0.5);
}

#toggle-btn div {
display: block;
width: 30px;
height: 5px;	
background:gray;
margin: 5px 0px;
}

#sidebar.active {
left:0px;
z-index:9999;
}

ul#sub1 {
position: absolute;
left: 100px;
width: 160px;
height:240px;
background-color:#fff;
list-style: none;
display: none;
top:58px;
border:4px ridge silver;
padding-left:16px;
}

li:hover ul#sub1 {
display: block;
}

ul#sub1 li {
background-color:#fff;
}

ul li {
list-style: none;
line-height: 27px;
padding-left: 5px;
}

.sp {
box-shadow:-5px 5px 7px #000000;
max-width: 100%; height: auto;
margin-right:20px;
}

#text {
	display:flex;
	justify-content:flex-start;
padding-bottom:20px;
}

.impressum {
font-size: 0.6em;
line-height: 12px;
}

.bu2 {
text-align: center;
}

.beruf {
	z-index:99;
	max-width: 100%; height: auto;
	box-shadow:-5px 5px 7px #000000;

}

.tennis {
	z-index:99;
	max-width: 100%; height: auto;
	box-shadow:-5px 5px 7px #000000;
	margin-bottom:12px;
}

.spiel {
	z-index:99;
	max-width: 100%; height: auto;
	filter: drop-shadow(-5px 4px 3px #000);
}

.kult {
padding-left: 28px;
}

#totop {
opacity: 0.6;
display:none;
position: fixed;
z-index: 9999;
bottom: 20px;
margin-left:8px;
}

#totop:hover {
	opacity:1.0;
}

#test1 {
display:flex;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
max-width: 760px;
}

#test2 {
display:flex;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
max-width: 756px;
}

.fot {
max-width: 100%; height: auto;
margin-bottom:30px;
box-shadow:-5px 5px 7px #000000;
margin-right:50px;
}

.fot1 {
max-width: 100%; height: auto;
margin-bottom:30px;
box-shadow:-5px 5px 7px #000000;
margin-right:110px;
}

.fot2 {
max-width: 100%; height: auto;
margin-bottom:30px;
box-shadow:-5px 5px 7px #000000;
margin-right:40px;
}

.fot3 {
max-width: 100%; height: auto;
margin-bottom:30px;
box-shadow:-5px 5px 7px #000000;
margin-right:40px;
}

.fot4 {
max-width: 100%; height: auto;
margin-bottom:30px;
box-shadow:-5px 5px 7px #000000;
}