* { margin: 0; padding: 0; list-style:none; }
a img { text-decoration: none; border-style: none;}
img { border-radius: 8px; }
body { margin: 10px auto auto; color: #CCCCFF; background:#000000 ; text-align: justify; font: 14px/22px "Times New Roman", Times, serif; }
center { text-align:center; }
p { padding-bottom: 15px; }
a { color: #CCCCFF; text-decoration: underline; }
a:hover { color: #C63EE6; text-decoration: underline; }
.wichtig { color:#F6F; font-weight:bold }
#alles { max-width: 1350px; width: 100%; margin: auto; height: auto !important;/* overflow: hidden !important; border: 2px solid #545D6C; padding: 3px; border-radius: 8px; background: #BEC2CB;*/ }
#head { background: url(../img/header.jpg) no-repeat center center; border-radius: 8px; background-size: 100% auto; max- width: 1250px; width: 100%; height: 320px; margin: auto;}
#navline { display: none; }
#mother { width: 100%; text-align: justify; margin: auto; height: auto; }
h1, h2, h3 { text-align: center; color: #666; padding-bottom: 2px; height: auto; text-shadow: 1px 1px 4px #BA32DA; width: 90%; margin: auto; font-size: 2.5vw; line-height: 6vh; font-weight: bold; }
h2, h3 { font-size: 24px; line-height: 35px;}
nav ul { display: inline-block; width: 99%; margin: auto; height: auto; text-align: center; }
nav { width: 99%; height: auto; text-align: center; margin: auto; padding: 5px; }
nav li { display: inline-block; border: 1px none #BF37DF; list-style-type: none; color: #BF37DF; margin: 3px; height: auto; text-align: center; font-weight: bold; line-height: 30px; font-size: 14px; border-radius: 8px; background: #BF37DF; }
nav li a { display: inline-block; color: #000000; text-decoration: none; padding:0 5px 0 5px; background: #9FADCA; background: linear-gradient(to bottom, #8294b9 1%,#92a4bf 25%,#92a4bf 75%,#8294b9 100%);

height: auto; border-radius: 8px; border: 1px solid #BF37DF; }
nav li a:hover{ background: #000000; -webkit-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; -ms-transition: all 400ms ease-in; -o-transition: all 400ms ease-in; transition: all 400ms ease-in; color: #D8E6F3; border-radius: 8px; text-decoration: none; }

#content { /*width: 99%; padding: 5px 0px; margin: auto; height: auto; text-align: center; */ }
article { width: 100%; text-align: center; margin: auto; }
.textbox { margin: 8px auto; text-align: justify; padding: 15px; border: 1px solid;  border-color: #8693AA; border-radius: 8px; }
.flexbox { display: flex; flex-direction: row; flex-wrap: wrap; }
.flexbox h2 { }
.flexbox .box { box-sizing: border-box; min-width: 200px; flex-grow: 1; flex-shrink: 1; flex-basis: 27%; padding: 20px;}
.flexbox .box:nth-child(2) { flex-basis: 70%; padding-top:10px; }
.flexbox .box:nth-child(1) { padding-top: 10px; }
.flexbox .liste ul li { list-style: url(../img/herz.png) none inside; }
.flexbox .liste a:link { color: #000000; text-decoration: none; font-size: 16px; padding:3px; }
.flexbox .liste a:hover { text-decoration: none; color: #FF6600; }
.flexbox .box p { padding-bottom: 10px; }
.flexbox1 { display: flex; flex-direction: row; flex-wrap: wrap; }
.flexbox1 h2 { }
.flexbox1 .box { box-sizing: border-box; min-width: 200px; flex-grow: 1; flex-shrink: 1; flex-basis: 47%; padding: 20px;}
.flexbox1 .box:nth-child(2) {	flex-basis: 45%; padding-top:30px; }
.flexbox1 .box:nth-child(1) {padding-top: 30px;}
.flexbox1 .liste ul li { list-style: url(../img/herz.png) none inside; }
.flexbox1 .liste a:link { color: #CCCCFF; text-decoration: none; font-size: 16px; padding:3px; }
.flexbox1 .liste a:hover { text-decoration: none; color: #C0C0C0; }
.flexbox1 .box p { padding-bottom: 10px; }
.flexbox2 { display: flex; flex-direction: row; flex-wrap: wrap; }
.flexbox2 h2 { }
.flexbox2 .box { box-sizing: border-box; min-width: 200px; flex-grow: 1; flex-shrink: 1; flex-basis: 27%; padding: 20px;}
.flexbox2 .box:nth-child(3) {	flex-basis: 20%; padding-top:40px; }
.flexbox2 .box:nth-child(2) {	flex-basis: 50%; padding-top:30px; }
.flexbox2 .box:nth-child(1) {padding-top: 35px;}
.flexbox2 .liste ul li { list-style: url(../img/herz.png) none inside; }
.flexbox2 .liste a:link { color: #000000; text-decoration: none; font-size: 16px; padding:3px; }
.flexbox2 .liste a:hover { text-decoration: none; color: #FF6600; }
.flexbox2 .box p { padding-bottom: 10px; }
.flexbox2 ul {padding-top: 70px;}
.flex { display: flex; flex-direction: row; flex-wrap: wrap; }
.flex h2 { }
.flex .box { box-sizing: border-box; min-width: 530px; flex-grow: 1; flex-shrink: 1; flex-basis: 50%; padding: 5px; }
.flex .box:nth-child(2) { flex-basis: 50%; padding-top:10px 0px 10px 0px; text-align: center; }
.flex .box:nth-child(1) { padding-top: 10px; }
.flex .box p.chat { padding-top: 10px; text-align: center; margin:auto; }
.flex0 { display: flex; flex-direction: row; flex-wrap: wrap; }
.flex0 h2 { }
.flex0 .box { box-sizing: border-box; min-width: 300px; flex-grow: 1; flex-shrink: 1; flex-basis: 35%; padding: 10px;}
.flex0 .box:nth-child(2) { flex-basis: 65%; padding-top:10px; }
.flex0 .box:nth-child(1) { padding-top: 100px; }
.flex1 { display: flex; flex-direction: row; flex-wrap: wrap; }
.flex1 .box { box-sizing: border-box; min-width: 300px; flex-grow: 1; flex-shrink: 1; flex-basis: 75%; padding: 20px;}
.flex1 .box:nth-child(2) {	flex-basis: 20%; padding-top:70px; }
.flex1 .box:nth-child(1) { padding-top: 30px; }
.flex1 .box p { padding-bottom: 10px; }
.flex2 { display: flex; flex-direction: row; flex-wrap: wrap; }
.flex2 .box { box-sizing: border-box; min-width: 400px; flex-grow: 1; flex-shrink: 1; flex-basis: 65%; padding: 20px;}
.flex2 .box:nth-child(2) {	flex-basis: 35%; padding-top:10px; }
.flex2 .box:nth-child(1) {padding-top: 10px;}
.flex2 .box p.chat { padding-bottom: 10px; text-align:center; margin:auto; }
.ueberschrift { font-size: 14px; font-weight: bold; }
.werbung { text-align: left; margin: 80px auto 10px; padding-right: 30px; }
.werbung img {max-width: 280px; width: 100%; height:auto; text-align:center; margin:auto; }
.bildbox { text-align:center; display:inline-block; max-width: 1350px; width: 99%; margin:auto; padding: 10px; }
.bild { max-width: 213px; width: 100%; height: auto; padding: 15px; margin: auto; text-align:center; }
.bild1 { max-width: 500px; width: 100%; height: auto; padding: 15px; margin: auto; text-align:center; }
.bild_li { padding: 10px; float: left; max-width: 350px; width: 100%; margin: auto; height: auto; }
.bild_re { padding: 10px; float: right; }
.banner { text-align: center; max-width:500px; width: 100%; margin: auto;}
.banner img { max-width:1000px; width: 100%; margin: auto; }
.telefonbox_li {padding: 10px; floar: left; }
.telefonbox_re {padding: 10px; floar: right; }
.tel { display:block; max-width: 550px; width:100%; margin:auto; padding-top:15px;}
.tel-mobil {display: none;}
.player { text-align:center; margin:auto; max-width:500px; width: 100%; }
.kontaktformular { text-align: center; max-width: 450px; width: 100%; }
.formgruppe {margin-bottom: 15px; max-width:450px; width: 100%; text-align:left;}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea { max-width: 450px; width:100%; font: 24px/40px "Times New Roman", Times, serif; }
.captcha {font: 24px/30px "Times New Roman", Times, serif;}
.abschicken {font: 24px/30px "Times New Roman", Times, serif; padding:5px; margin-top:8px; background-color:#69C; border-color:#C09; border-radius: 8px; text-align:left; }
footer { width: 100%; height: auto; border-top: 1px solid #CDCDCD; text-align: center; }
footer a { margin-right: 20px; }
.mobilbox {display: none;}
.center { text-align: center; }
.clear { clear: both; }
.datum { text-align: center; padding: 5px; }
#cookieNotice { position: fixed; border-bottom: solid 1px #a0a0a0; padding: 10px; text-align: center; background: #9FADCA; background: -moz-linear-gradient(top, #9FADCA 0%, #000000 30%, #000000 70%, #9FADCA 100%); background: -webkit-linear-gradient(top, #9FADCA 0%, #000000 30%, #000000 70%, #9FADCA 100%); background: linear-gradient(to bottom, #9FADCA 0%, #000000 30%, #000000 70%, #9FADCA 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9FADCA', endColorstr='#9FADCA', GradientType=0 );
color: #FF3; width: 100%; margin: auto; cursor: pointer; top: 0px; z-index: 1; font-size: 16px; font-weight: bold; line-height: 26px; }
#cookieNoticeCloser { color: #FF3; font-weight: bold; float: right; margin-right: 50px; font-size: 18px; }
#cookieNoticeCloser:before { content: ''; position: absolute; width: 1px; height: 9px; background-color: #000000; left: 7px; top: 5px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
#cookieNoticeCloser:after { content: ''; position: absolute; width: 1px; height: 9px; background-color: #000000; left: 7px; top: 5px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
 @media only screen and (max-width: 1150px) {
h1, h2, h3 {  font-size: 2.5vw; line-height: 6vh; }
.flexbox .box:nth-child(2) {
	flex-basis: 30%;
}
}
 @media only screen and (max-width: 1100px) {
 #head { background:url(../img/header.jpg) no-repeat center center; border-radius: 8px; background-size: 95% auto; height: 22.0vw; margin: auto; } 
}
 @media only screen and (max-width: 950px) {
#alles { width: 98%; }
.flexbox { display: block; width: 98%; margin: auto; }
.flexbox1 { display: block; width: 98%; margin: auto; }
.flexbox2 { display: block; width: 98%; margin: auto; }
.flexbox .box:nth-child(1) {padding-top: 20px; }
.flex { display: block; width: 98%; margin: auto; }
.flex .box:nth-child(1) {padding-top: 20px; }
.flex1 { display: block; width: 98%; margin: auto; }
.flex1 .box:nth-child(1) {padding-top: 20px; }
.flex2 { display: block; width: 98%; margin: auto; }
.flex50 { display: block; width: 98%; margin: auto; }
#cookieNoticeCloser { font-size: 36px; }
}
@media only screen and (max-width: 780px) {
#navline { display: block; height: auto; width: auto; position: fixed; visibility: visible; top: 70px; left: 30px;}
nav { display: none;}	
nav ul{ display: block; width: 60%; margin: auto; height: auto; text-align: center; position:fixed; visibility:visible; top: 100px; }
nav { width: 99%; height: auto; text-align: center; margin: auto; padding: 5px; }
nav li{ display: block; border: 1px none #BF37DF; list-style-type: none; color: #BF37DF; margin: 3px; height: auto; text-align: center; font-weight: bold; line-height: 35px; font-size: 16px; border-radius: 8px; background: #BF37DF; }
nav li a{ display: block; color: #000000; text-decoration: none; padding:0 5px 0 5px; background: #9FADCA; background: linear-gradient(to bottom, #8294b9 1%,#92a4bf 25%,#92a4bf 75%,#8294b9 100%);
height: auto; border-radius: 8px; border: 1px solid #BF37DF; }
nav li a:hover{ background: #000000; -webkit-transition: all 400ms ease-in; -moz-transition: all 400ms ease-in; -ms-transition: all 400ms ease-in; -o-transition: all 400ms ease-in; transition: all 400ms ease-in; color: #D8E6F3; border-radius: 8px; text-decoration: none; }

}
@media only screen and (max-width: 530px) {
h1, h2, h3 { font-size: 16px; line-height: 25px; }
.bild {max-width: 200px; width: 100%; height: auto; display:inline-block; padding: 10px; margin: auto; }
.mobilbox { display: block; padding: 5px; margin: auto; text-align: center; }
.tel {display:none; }
.tel-mobil { display: block; text-align: center; margin:auto;}
.flex .box {  min-width: 330px; }
}
