@charset "UTF-8";
/* CSS Stylesheet by dialog im netz */
@import 'fonts.css';
html,blockquote,body,div,dl,dt,dd,fieldset,form,
h1,h2,h3,h4,h5,h6,ol,p,ul,li,center,hr,pre,img,
table,tr,td,th,thead,tbody,tfoot,caption  {
margin:0;
padding:0;
border:0 none;
outline: none;
}
body {
color: white;
background-color: #571123;
overflow: auto;
font-size: 15px;
transition: .2s; 
}
a {
color: white;
border:none;
outline: none;
text-decoration: none;
}
p a {
	text-decoration: underline
}
a:hover,
a:focus {
outline: none;
}
h1{
font-size:20px;
font-weight: normal;
text-align: center;
background-color: #8e2240;
padding: 8px;
height: 26px;
overflow: hidden;
}
h1 span {
	white-space: nowrap
}

p,ul,h2,h3 {
margin: 0 0 .5em 0;
line-height: 130%
}
h2 {
	font-size: 18px;
}
h3 {
	padding-top: 1em;
	font-size: 16px;
	font-weight: normal
	}
table {
border-collapse: collapse
}
td {
vertical-align:top;
line-height: 130%
}
.tc {
text-align: center
}
.tr {
text-align: right
}
ul {
padding-left: 16px;
margin: 1em 0 1em 16px;
}
li {
vertical-align:middle;
line-height: 1.4em
}
hr {
	border-top: 1px solid white;
	margin: 2em 0
}

.hide, .h0, .formprotect {
display:none
}
img{
display: block;
border: none;
height: auto;
}

sub {
position: relative; 
font-size: 9px; 
bottom: -4px;
font-weight: normal;
}
sup {
position: relative; 
font-size: 9px; 
top: -2px;
font-weight: normal;
}
strong0 {
	letter-spacing: .01em
}
.clear {
clear: both
}
.bildlinks,
.floatleft {
float: left;
margin: 0 10px 5px 0
}
.bildrechts,
.floatright {
float: right;
margin: 0 0 5px 10px
}
.klein{
font-size:11px;
}
.rot,
.red {
color: red
}
.ext {
	display: inline-block;
	padding-right: 18px;
background: transparent url('/img/style/exlink.gif') 100% 50% no-repeat; 	
}

div,
nav,
main,
section,
header,
article,
footer {
display: block;
position: relative;
box-sizing: border-box;

}

/* DIVS */ 
#wrapper {
margin:0 auto;
max-width:1600px;
height:auto;
}
#head {
	
}
#logo {
	position: relative;
	display: block;
	margin: 30px auto;
}
#content {
float: left;
width: calc(100% - 580px);
hyphens: auto;
}
#textarticle {
	padding: 10px 0 20px 0
}
#content img {
width: 100%;
margin-bottom: .5em
}

#firstimg,
.meldung {
	animation: fadeOut 4s;
	opacity: 0;
	
}
@keyframes fadeOut {
	0% {opacity: 1;}
	80%  {opacity: 1;}
	100% {opacity: 0;}
}
.vlist {
	display: block;
	margin: 4px -15px;
	padding:  5px 15px;
	background-color: rgba(255,255,255,.5);
	transition: .3s
}
.vlist:hover,
.vlist:focus,
.vlist.ac {
	background-color: white
}
.vlist p {
	font-weight: bold;
	color: #571123;
}
.vlist a,
.vlist h3 {
font-weight: normal;
	color: #571123;
	padding: 0;
}

#rightsmall {
	display: none;
}
#right,
#rightsmall {
float: left;
	width: 230px;
	min-height: 20px;
	margin: 42px 50px 20px 20px ;
	padding: 30px 15px;
	background-color: rgba(255,255,255,.75);
	color: #571123;
	hyphens: auto;

}
#right, 
#right p,
#rightsmall,
#rightsmall p {
	line-height: 130%
}
#right a,
#rightsmall a,
.vlist h3,
.vlist h3 a{
	color: #571123;
}

#right h2 {
	hyphens: manual;
}

#right h3, 
#right h3 a {
color: #8E2240
}


#right a:hover,
#right a:active
#rightsmall a:hover,
#rightsmall a:active {
	color: white;
}
#right a {
	color: #8E2240;
	font-weight: bold
}
.vlist h3 {
	margin-bottom: 0
}
#right .vlist h3 a:hover
#rightsmall .vlist h3 a:hover {
	color: #571123;
}

#footer {
clear:both;
padding: 30px;
padding-left: 270px;
} 

#faddress {
	line-height: 150%
}
#footer #fmaddress a,
#footer #faddress a {
	display: inline;
	padding: 0
}
#footer #fmaddress a:hover,
#footer #faddress a:hover,
#footer #fmaddress a:active,
#footer #faddress a:active {
	text-decoration: underline
}
#fmaddress {
	display: none
}
#fb {
	display: inline-block;
	float:left;
	margin: 0 15px 10px 0
}
#startad {
	position: absolute; 
	background-color: #8E2240;
	padding: 8px 16px 8px 10px;
	font-size: calc(12px + 1vw);
	border-radius: 0 calc(12px + 1vw) calc(12px + 1vw) 0;
	margin-top: -80px;
	animation: 4s blink;
	opacity: 1;
	z-index: 110
}
@keyframes blink {
	0% {opacity: 0;}
	2% {opacity: 1;}
	10%{opacity: 1;}
	18% {opacity: 0;}
	25%{opacity: 1;}
	100%{opacity: 1;}
	
}

#startad:hover,
#startad:active,
#startad:focus {
background-color: white; 
color: 	#8E2240;
}
#startad:hover a,
#startad:active a,
#startad:focus a {
color: 	#8E2240;
}

/* NAVIGATION */
nav {
	float: left;
	width: 270px;
	margin: 0;
	padding: 40px 0 0 0;
}
nav a {
	display: block;
	padding: 5px 3px 8px 30px;
	background: transparent url('/img/style/nav.png') 0 11px no-repeat; 
	background-size: 0 8px;
	transition: .2s
}
nav a:hover,
nav a:focus,
nav a.ac{
	background-size: 20px 8px;
}
#nav_main {
	text-transform: uppercase;
	letter-spacing: .1em
}
#nav_second {
	padding: 20px 0
	
}

#topbutton {
	position: fixed; 
	width: 40px;
	height: 40px;
	bottom: 17px;
	right: 10px;
	background: transparent url(/img/style/top.png) top right no-repeat; 
	z-index:9;
  opacity:0.2;
	transition: .2s;
	display: none;
}
#topbutton a {
	display: block;
	width: 40px;
	height: 40px;
	text-decoration: none;
}
#topbutton:hover,
#topbutton:focus {
	opacity: 1
}

#mbutton,
#hbutton,
#rbutton  {
	display: none
}
/* FORMULAR */
form {
padding: 10px;
}
label, input, textarea, select,button {
box-sizing: border-box;
margin:0 0 15px 0  ;
min-height: 25px
}
input, textarea,select {
border-width: 1px; 
padding: 2px 4px;
width: 400px;
}
input:after,
textarea:after {
clear: both; 
content:' ';
height: 0; 
overflow: hidden; 
visibility: hidden
}
label {
float: left;
width: 70px;
display: block;
clear: left;
}
form div {
clear: both;
}

input:hover,
textarea:hover,
select:hover {

}
input.button {
width: 310px;
}

#sendme,
#go {
	font-size: 15px;
	letter-spacing: .1em;
	font-weight: bold;
	padding: 8px 16px;
	color: #571123;
	background-color: #b4576f;
	font-weight: bold;
}

#sendme:active,
#go:active {
	background-color: #b4576f;
	color: white;
}

.meldung,
.meldungok {
	position: fixed;
	top: 20px;
	left: 10%;
	right: 10%;
	margin: 0 auto;
	padding: 10px;
	background-color: white;
	border: 2px solid black;
	color: black;
font-weight: bold;
font-size: 1.3em;
text-align:center;
z-index: 99
}
.meldungok {
}

#startnews a.vlist {
	margin: 4px 0 0
}
/* ADMIN */

#newslist {
	margin-top: 10px
}

#newslist td {
	padding: 2px 12px 2px 12px
}
#newslist tr{
	padding: 2px 5px;
}
#newslist tr td:first-of-type:hover {
	background-color: #8e2240
}
td.n_name a {
	min-width: 250px;
	display: block;
}
#newslist a.del,
#newslist a.on,
#newslist a.off {
	display: block;
	width: 30px;
	height: 18px;
	background: transparent url('/img/style/del.png') center center no-repeat; 
}
#newslist a.off{
	background-image: url('/img/style/off.gif'); 
}
#newslist a.on {
	background-image: url('/img/style/on.gif'); 
}
#newslist a span {
	display: none;
}

#editarea {
	margin-top: 20px;
	padding: 10px;
	background-color: #d5c3c8;
	
}
#area {
}
#editarea label {
	width: 100px
}
#editarea input,
#editarea textarea,
#area,
#editarea label {
	color: black;
	display: block;
	margin: 0 0 10px
}
#editarea label {
	padding-top: 3px
}
#editarea input {
	width: calc(100% - 110px);
}
#editarea input.short {
width: 120px;
}
#topbutton {
	display: block
}


@media (max-aspect-ratio: 1/1) {

}
@media screen AND (max-width: 1110px){
	
h1{
height: auto;
overflow: visible;
}
h1 span {
display: block;
line-height: 1.5em
}
h1 span:nth-of-type(2) {
	display: none;
}
}
@media screen AND ( max-width: 1000px){
body {
	overflow: scroll
}
h1 span {
display: inline;
line-height: normal
}
h1 span:nth-of-type(2) {
	display: inline;
} 
#right {
	display: none;
}
#mbutton,
#hbutton,
#rbutton  {
	display: block
}
#mobilebutton,
#hidenav,
#hbutton,
#rbutton {
position: fixed;
display: block;
top: 20px;
right: 30px;
height: 30px;
width: 30px;
background: transparent url(/img/style/hambi.png) center center no-repeat;
z-index: 100
}
#mobilebutton,
#hidenav,
#hbutton,
#rbutton {
	background-size: 30px auto;
}
#hidenav{
display: none;
z-index: 31;
background-image: url('/img/style/hidenav.png'); 
}
#rbutton,
#hbutton {
	position: absolute;
}
#hbutton {
	right: auto;
	left: 70px;
	background-image: url(/img/style/h.png);
}
#rbutton {
	right: auto;
	left: 30px;
	background-image: url(/img/style/r.png);
}

#mobilebutton span ,
#hidenav span ,
#rbutton span ,
#hbutton span {
display: none
}

#nav {
	float: none;
	top:-500px;
	left: 30px;
	position: fixed;
	z-index: 99;
	width: 300px;
	max-width: calc(100% - 60px);
	height: auto;
	margin: 0;
	padding:0;
	transition: .3s;
	box-shadow: 0 0 12px black;
	background-color: rgba(255,255,255,.75);
}
#nav_main,
#nav_second,
#nav_imp {
	width: 100%;
}
#nav a {
display: block;
width: calc(100% - 40px);
float:none;
padding: 8px 10px 8px 30px;
margin:0;
color: #571123;
text-align: left;
font-weight: bold;
background-position: 0 13px;
}

#nav a:hover,
#nav a:target {
	background-color: rgba(255,255,255,.95);
	
}


#content,
#rightsmall  {
	width:  calc(100% - 60px);
	margin:0 30px;
	float: none;
	clear: both;
	height: auto;
	min-height: 20px;
}

#rightsmall {
	display: block;
	width: 100%;
	margin: 0;
}
#footer {
padding-left: 30px;
} 

}
@media screen AND (max-width: 600px){
#content  {
	width:  calc(100% - 20px);
	margin:0 10px;
}
h1 span {
display: block;
line-height: 1.5em;
white-space: normal;
hyphens: none
}
h1 span:nth-of-type(2) {
	display: none;
}
#mobilebutton,
#hidenav {
	top: 10px;
	right: 10px;
}
#rbutton {
	top:10px;
	left: 10px;
}
#hbutton {
	top:10px;
	left: 60px;
}
#footer {
	padding: 20px 10px
}
#startad {
	padding: 1vw 2vw;
	font-size: calc(12px + 2vw);
	border-radius: 0 calc(12px + 1vw) calc(12px + 2vw) 0;
	margin-top: -80px;
}

}

@media screen and (max-height: 475px){
#nav {left:10px;
	max-width: calc(100% - 20px);
}
#nav div {
	padding: 0!important;
}
#nav a {
	padding-top: 5px;
	padding-bottom: 5px;
}

}
@media screen and (max-width: 530px){


form,
input,
textarea {
	max-width: 100%;
}
#faddress {
	display: none
}
#fmaddress {
	display: block
}
#fb {
	display: inline;
	float: none;
	margin: 0
}

}

@media print {
	#footer,
	#nav{
		display: none
	}
}