html {font-size: 100%}
*{margin:0px;padding:0px;border:0px none;font-family:'Open Sans', sans-serif;color:#777;vertical-align:baseline;font-style:normal;font-variant:normal;font-weight:normal;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale}}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}

/* Seitenbereiche incl. Navigationselemente*/
body{height:100%;margin:1px 0px;background-color:#f4f4f4;line-height:0%}

#MainKopfzeile{box-sizing:border-box;position:relative;width:100%;max-width:1800px;margin:0 auto;text-align:left;font-size:0.9em;line-height:150%;color:#ffffff;background-color:#F0F0EF;overflow:hidden;border-top:1px solid #800000;border-right:1px solid #800000;border-bottom:0px solid #800000;border-left:1px solid #800000;-webkit-box-shadow:2px 2px 5px #c2c2c2;-moz-box-shadow:2px 2px 5px #c2c2c2;box-shadow:2px 2px 5px #c2c2c2;}
#MainKopfzeile a, #MainKopfzeile a:link{font-size:0.9rem;color:#fff;text-decoration:none;border-bottom:none}
#MainKopfzeile a:hover{background-image:url('images/Hintergrund_rot.jpg')}
#ZeileImpressum{box-sizing:border-box;width:50%;min-width:250px;padding-top:45px;height:65px;float:right;display:block}
#ZeileImpressum ul, #ZeileImpressum ul li{list-style:none;display:block;margin:0px 0px 0px 0px;}
#ZeileImpressum ul li a{color:#800000!important;margin:0;padding:4px 14px;float:right}
#ZeileImpressum ul li a:hover{color:#ffffff!important}
#Logo{float:left;width:275px;margin:20px 0px 20px 20px;background-color:#F0F0EF;}
#ZeileGrautoene{float:left;height:25px;font-size:0.9em;width:100%;background-color:#333333;text-align:center;}
#NaviOben {box-sizing:border-box;float: left;width: 100%;font-size: 0.9em;background:#F0F0EF;margin-left: 0%}
#NaviOben ul, #NaviOben ul li {list-style:none;margin: 8px 0px 0px 0px;padding:0px 0px 0px 0px}
#NaviOben li {float:left;width:20%;max-width: 350px;color: #ffffff;text-decoration:none;font:normal;text-align: center}
#NaviOben ul li a {height:19px;display:block;margin:0px 1px 0px 0px;padding: 0px 0px 5px 0px;color: #ffffff;background:#BABABA;
border:1px 1px 1px 0px solid #800000;-moz-border-radius: 3px 15px 0px 0px;-webkit-border-radius: 3px 15px 0px 0px;border-radius: 3px 15px 0px 0px}
#NaviOben ul li a:hover {background-image:url('images/Hintergrund_rot.jpg')}
#NaviOben ul li .rot  {background-image:url('images/Hintergrund_rot.jpg');margin-right:2px;border:1px 1px 1px 0px solid #BABABA;	-moz-border-radius: 3px 15px 0px 0px;-webkit-border-radius: 3px 15px 0px 0px;border-radius: 3px 15px 0px 0px}

#Main{box-sizing:border-box;position:relative;width:100%;max-width:1800px;margin:0 auto;text-align:left;line-height:150%;overflow:hidden;padding-bottom:30px;border-top:0px solid #800000;border-right:1px solid #800000;border-bottom:1px solid #800000;border-left:1px solid #800000;margin-bottom:20px;background:-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);background:-o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);background:-ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);background:linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0);-webkit-box-shadow:2px 2px 5px #c2c2c2;-moz-box-shadow:2px 2px 5px #c2c2c2;box-shadow:2px 2px 5px #c2c2c2;}
#headerbild {display:none}
#titel {box-sizing: border-box;width:46%;height:auto;float:left;margin: 2% 2% 0% 0%;padding-right:10px}
#Mitte{box-sizing:border-box;position:relative;width:46%;min-width:120px;float:left;margin:2% 0%}
#Mitte ul{margin:10px 50px;color:#777;list-style:none}
#Mitte ul li{padding-left: 1.3em;padding-top: 5px;position: relative;}
#Mitte ul li:before{content:'\f101';font-family:FontAwesome;color:#777;display:inline-block;margin-left: -1.3em; width: 1.3em; position: absolute; top: 5px;}
#Mitte a, #Mitte a:link{color:#777;text-decoration:none;border-bottom:1px dotted}
#Mitte a:hover{color:#ffffff;background-color:#800000}

#NaviLinks{box-sizing:border-box;width:20%;margin:2% 5% 2% 2%;padding:0px 0px;float:left;font-size:0.8em;}
#NaviLinks ul, #NaviLinks ul li{list-style:none;margin:0px 0px}
#NaviLinks li{float:left;width:100%;height:auto; min-height:30.5px;text-align:left;color: #ffffff!important;}
#NaviLinks ul li .titel{background-image:url('images/Hintergrund_rot.jpg')!important}
#NaviLinks ul li a, #NaviLinks ul li a:link{display:block;text-decoration:none;padding:9px 0px 0px 5px;color: #ffffff!important;background:#BABABA}
#NaviLinks ul li a:hover{background-image:url('images/Hintergrund_rot.jpg')!important}

#secondary{box-sizing:border-box;width:20%;float:right;padding:10px;font-size:0.8rem;margin:2% 2% 2% 5%;text-align:center;line-height:130%}
#secondary a, #secondary a:link{color:#808080;font-size:0.9em;text-decoration:none;border-bottom:1px dotted}
#secondary a:hover{color:#ffffff;background-color:#800000}
#shariffheise {width: 90%;margin:0px auto;display: block}
.shariff .fa, .shariff .share_text {color:#fff}
.shariff .fa-info {color:#808080}

#footer{box-sizing:border-box;display:none;position:fixed;left:0px;right:0px;bottom:0px;height:33px;width:100%;margin:0px auto!important;padding-top:6px;background-color:#808080;color:white;text-align:center;z-index:100;}
#footer a, #footer a:link, #footer a:hover, #footer a:visited{font-size:0.9em;color:#ffffff!important;text-decoration:none}

/* Hauptnavi - aktive Seiten hervorheben  */
#homepp #navhomepp a,
#damm  #navdamm a,
#ma  #navma a,
#slll  #navslll a,
#weg  #navweg a,
#kosten  #navkosten a,
#kontakt #navkontakt a,
#arbr  #navarbr a,
#famr  #navfamr a,
#medi #navmedi a,
#download  #navdownload a,
#weblinks  #navweblinks a,
#fa  #navfa a,
#zusammenarbeit #navzusammenarbeit a,
#mediator  #navmediator a,

#home  #navhome a,
#perso #navperso a,
#geld #navgeld a,
#url #navurl a,
#kue #navkue a,
#abf #navabf a,
#aufh #navaufh a,
#zeug #navzeug a,
#pap #navpap a,
#kost #navkost a,
#klage #navklage a
{background-color: #808080;cursor: default}

 /* Hauptnavi - responsive  */
#start{display:none}
#start a, #start a:link, #start a:hover{font-size:0.9em;color:#ffffff;text-decoration:none}
#site{display:none}
input#responsive-nav, label.responsive-nav-label{display:none;z-index:110;}



/* Formatierungen f�r alle Bereiche*/
h1{font-weight:bold;color:#800000;font-size:1.3rem;letter-spacing:1pt;line-height:130%}
h2{font-weight:bold;color:#808080;font-size:1.1rem;letter-spacing:1pt;margin:0px 0px 10px 0px}
h3{font-weight:500;color:#666666;font-size:1.0rem;letter-spacing:1pt;margin:10px 0px}
h4{color:#808080;font-size:1.0rem;letter-spacing:1pt}
p{color:#777;margin:0px 0px 14px 0px;}
p.inline{display: inline-block;}
p.einzeilig{margin:0px 0px 0px 0px;}

.rot{color:#800000}
.weiss{color:#ffffff}
.grau {color:#808080}
.klein{font-size:0.8rem;line-height:130%}
.gross{font-size:1.1rem;line-height:130%}
.gelb{color:gold}
.fett{font-weight:bold;letter-spacing:1pt}
.gesperrt{letter-spacing:2pt}
.kursiv{font-style:italic}
.aabstand1{margin:20px 0px}
.aabstand2{margin:0 0 20px 0}
.iabstand1{padding:10px 10px}
.iabstand2{padding:30px 30px}
.mitte{text-align:center!important;}
.bildmitte{margin:0 auto}
.links{float:left;margin-right:20px}
.rechts{float:right;margin-left:20px}
.tab10{margin-left:10px}
.tab20{margin-left:20px}
.tab40{margin-left:40px}

.tipptxt{width:100%;color:#800000;font-size:1.1rem;padding:10 15 18 0;margin:10px 0}
.tipptxtgross{width:100%;color:#800000;font-size:1.3rem;padding:10 15 18 0;margin:10px 0}
.clearfix{clear:both;margin:20px 0 20px 0}

/*-------------Bilder*/

.HauptgrafikLinks{
float:left;
max-width: 40%;
height: auto;
margin: 6px 20px 10px 0px;
background: #eee;
border: 1px solid #DDD;
background: -moz-linear-gradient(top, #EEE, #FFF);
background: -webkit-linear-gradient(top, #eee, #fff);
background: -ms-linear-gradient(top, #eee, #fff);
background: -o-linear-gradient(top, #eee, #fff);
box-shadow: 1px 2px 4px rgba(0,0,0, .2);
}

.HauptgrafikRechts{
float:right;
max-width: 40%;
height: auto;
margin: 6px 0px 10px 20px;
background: #eee;
border: 1px solid #DDD;
background: -moz-linear-gradient(top, #EEE, #FFF);
background: -webkit-linear-gradient(top, #eee, #fff);
background: -ms-linear-gradient(top, #eee, #fff);
background: -o-linear-gradient(top, #eee, #fff);
box-shadow: 1px 2px 4px rgba(0,0,0, .2);
}

.GrafikLinks{
float:left;
max-width: 40%;
height: auto;
margin: 6px 20px 10px 0px;
background: #eee;
border: 1px solid #DDD;
background: -moz-linear-gradient(top, #EEE, #FFF);
background: -webkit-linear-gradient(top, #eee, #fff);
background: -ms-linear-gradient(top, #eee, #fff);
background: -o-linear-gradient(top, #eee, #fff);
box-shadow: 1px 2px 4px rgba(0,0,0, .2);
display:none;
}

.GrafikRechts{
float:right;
max-width: 40%;
height: auto;
margin: 6px 0px 10px 20px;
background: #eee;
border: 1px solid #DDD;
background: -moz-linear-gradient(top, #EEE, #FFF);
background: -webkit-linear-gradient(top, #eee, #fff);
background: -ms-linear-gradient(top, #eee, #fff);
background: -o-linear-gradient(top, #eee, #fff);
box-shadow: 1px 2px 4px rgba(0,0,0, .2);
display:none;
}


hr{clear:both;background-color:#800000;color:#800000;border:#800000;margin:10px 0px 10px 0px;height:1px}
table{border-collapse:collapse;border-spacing:0;width:100%}
.zellmitte{vertical-align:middle;}
.streifen table{margin:0px auto;table-layout:fixed;width:100%}
.streifen td{border:none;padding:1px 10px 1px 5px}
.streifen th{background-color:#800000;color:#fff;font-style:italic;font-size:0.8rem;padding:1px 30px 1px 5px}
.streifen tr{background-color:#f4f4f4;color:#000;font-style:italic;font-size:0.9rem;padding:1px 30px 1px 5px;}
.streifen tr:nth-child(odd){background-color:#ffffff;}
td:nth-child(1),
th:nth-child(1){text-align:left}

.tipp{background:#eee;border-left:5px solid #800000;border-top:2px dotted #800000;background:-moz-linear-gradient(top, #EEE, #FFF);background:-webkit-linear-gradient(top, #eee, #fff);background:-ms-linear-gradient(top, #eee, #fff);background:-o-linear-gradient(top, #eee, #fff);box-shadow:1px 2px 4px rgba(0,0,0, .2);padding:10px 10px 20px 20px;margin:20px 0px 30px 0px;}
.rahmen1{display:block;padding:10px 10px 10px 20px;border-left:6px dashed #eaeaea;border-right:6px dashed #eaeaea;background:#fff;background:-moz-linear-gradient(top, #fff, #FFF);background:-webkit-linear-gradient(top, #fff, #fff);background:-ms-linear-gradient(top, #fff, #fff);background:-o-linear-gradient(top, #fff, #fff);margin-bottom:15px}
.rahmen2{background:#eee;border:1px solid #DDD;background:-moz-linear-gradient(top, #EEE, #FFF);background:-webkit-linear-gradient(top, #eee, #fff);background:-ms-linear-gradient(top, #eee, #fff);background:-o-linear-gradient(top, #eee, #fff);box-shadow:1px 2px 4px rgba(0,0,0, .2);}
.rahmen3{padding:20px 20px;margin:20px 10px;background:#eee;border:1px solid #800000;background:-moz-linear-gradient(top, #EEE, #FFF);background:-webkit-linear-gradient(top, #eee, #fff);background:-ms-linear-gradient(top, #eee, #fff);background:-o-linear-gradient(top, #eee, #fff);box-shadow:1px 2px 4px rgba(0,0,0, .2);}
.rahmen4{display: block;background: #808080;color: #fff!important;padding: 1.0em .8em .6em .8em;margin:1.2em 0em 0em 0em;text-align: center}
.rahmen4::before{content: '\f046';font-family: FontAwesome;font-size:1.3em;color: #white;padding-top:5px;float:left}


.toggleBox {position: relative;border: 1px solid #ddd;background-color:#ffffff}

/* Ausblenden des input-Feldes */
.toggleBox input {
    position: absolute;
    left: -99999px;
}

/* Gestaltung der labels */
.toggleBox label {
    display: block;
    background: #808080;
    color: #fff;
    padding: .4em .8em;
    text-align: center;
    cursor: pointer;
}

.toggleBox label:hover {
    background: #800000;
	color:#ffffff
}

.toggleBox label::before {
content: '\f046';
font-family: FontAwesome;
font-size:1.3em;
color: #white;
float:left
}

.toggleBox label::after {
content: '\f102';
font-family: FontAwesome;
font-size:1.3em;
color: #white;
float:right;
position:absolute;
right:10px;
top:8px

}

.toggleBox input:checked ~ label::before {
content: '\f059';
font-family: FontAwesome;
}
.toggleBox input:checked ~ label::after {
content: '\f103';
font-family: FontAwesome;
}

/* Der Aufklappmechanismus */
.toggleBox input:checked ~ div {
    opacity: 0;
    height: 0;
	display:none
}

.toggleBox input:not(:checked) ~ div {
    opacity: 1;
    padding: .8em;
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -ms-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out;
}

/* Steuerung der Sichtbarkeit der labels */
.toggleBox input:not(:checked) ~ .close, .toggleBox input:checked ~ .open {display: none}
.lightbox{display:none;position:fixed;z-index:200;width:50%;height:80%;left:25%;right:25%;bottom:-50px;color:#ffffff}
.lightbox:target{display:block;outline:none;}
.lightbox .box{width:-webkit-min-content;width:-moz-min-content;width:min-content;width:auto;margin:2% auto;padding:20px;background-color:#FFF;box-shadow:0px 1px 26px -3px #777777}
.lightbox .title{margin:0;padding:0 0 10px 0px;border-bottom:1px #ccc solid;font-size:18px;color:#800000!important;}
.lightbox .content{padding:10px 0 0 0px;font-size:18px;line-height:22px;display:block;}
.lightbox .close{float:right;display:block;text-decoration:none;font-size:22px}
.lightbox ul li a{text-align:center;padding:0px 0px 0px 0px;color:#f4f4f4!important}
.phone1 {display:block}
.phone2 {display:none}

/* Desktop-Bildschirm bis 1500 px ------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1500px){
#NaviLinks{box-sizing:border-box;width:18%;margin:2% 9% 2% 1%;padding:0px 0px;float:left;font-size:0.8em}
#secondary{box-sizing:border-box;width:18%;float:right;padding:10px;font-size:0.8rem;margin:2% 1% 2% 9%;text-align:center;line-height:130%}
#Mitte{box-sizing:border-box;position:relative;width:41%;float:left;margin:2% 0%}
}

/* Tablet vermutet -------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1260px){
body{height:100%;margin:0px 0px 5px 0px;}
#MainKopfzeile{box-sizing:border-box;height:90px;width:100%}
#Logo{display:none!important}
#NaviOben {display: none}
#ZeileImpressum{padding-top:36px;height:40px;float:right;width:100%;min-width:240}
#ZeileGrautoene{display:none!important;}
#headerbild {box-sizing: border-box;display:block;width:270px;height:auto;float:left;margin: 2% 10% 0% 4%}
#titel {margin: 2% 2% 0% 0%}
#Mitte{width:90%;min-width:350px;position:relative;float:none;padding:50px 0px;margin:0 auto;}
#Mitte ul{margin:30px 30px;color:#777;list-style:none}

#NaviLinks{position:absolute;top:-9999px;width:100%;min-width:150px;max-width:675px;margin:0px auto;margin-top:42px;background-color:#e0e0e0;padding:0px}
label.responsive-nav-label{box-sizing:border-box;position:fixed;top:0px;left:0px;height:43px;width:26%;padding:12px 2px 0px 0px!important;display:block;background-color:#800000;cursor:pointer;z-index:120;}
label.responsive-nav-label::before{content:'\f0c9';font-family:FontAwesome;font-size:1.5em;color:white;line-height:.75em;vertical-align:-15%;padding:.1em .25em .15em;position:absolute;top:10px;left:10px;font-style:normal;}
input#responsive-nav[type=checkbox]:checked ~ #NaviLinks{position:fixed;top:10px;left:-6px;right:-6px;width:auto;display:inline;z-index:90;}
input#responsive-nav[type=checkbox]:checked ~ label::before{content:'\f057';font-family:FontAwesome;}

/* --- Navigation links dreigeteilt oben ausrichten --- */
#NaviLinks ul {width: 33.3%!important;min-width: 210px;float: left!important;display: block}
#NaviLinks li {width:33.3%!important;min-width: 210px;float: left;color: #ffffff!important;text-decoration:none;font:normal;text-align: left}
#start{box-sizing:border-box;position:fixed;top:0px;right:0px;height:43px;width:26%;margin:0px auto;padding:12px 20px 0px 10px!important;text-align:right;display:block;background-color:#800000;cursor:pointer;z-index:100;}
#site{box-sizing:border-box;position:fixed;top:0px;left:23%;right:25%;height:43px;width:55%;padding:0px 0px 0px 0px!important;text-align:center!important;display:block;background-color:#800000;z-index:120;}
#shariffheise {display:none}
#secondary{clear:both;position:relative!important;margin:0px auto!important;
width:80%!important;min-width:80%!important;min-height:270px;padding:10px 0px!important;float:none}
#footer {display:block}
}

/* Smartphone vermutet -------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:639px){
#Logo{display:none!important}
#ZeileGrautoene{display:none}
#Main{width:100%;border:none}
#headerbild {width:100%;height:auto;margin:0px 0px}
#titel {width:100%;height:auto}
#NaviLinks {margin-top:0px;width:100%}
#NaviLinks ul, #NaviLinks ul li{width:100%!important;min-width:100%!important;display:block;float:none}
#Mitte{width:100%;min-width:200px;margin:0px auto;padding:5% 2% 5% 4%}
#Mitte ul{margin:20px 20px}
#secondary{clear:both;position:relative;margin:0px auto!important;width:90%;min-width:90%;float:none;padding:25px}
.rahmen3{padding:20px 20px;margin:20px 5px;}
.tipp{padding:20px 20px;margin:20px 5px;}
.lightbox{width:80%;height:80%;left:10%;right:10%;bottom:-50px;color:#ffffff}
.phone1 {display:none}
.phone2 {display:block}
}