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;}

#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:0px 0px 5px 5px;}
#Mitte ul li:before{content:'\f101';font-family:FontAwesome;color:#777;display:inline;width:20px;margin-left:-23px;margin-right:15px;}
#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}

 /* Hauptnavi - aktive Seiten hervorheben  */
#home #navhome a,
#ist #navist a,
#kann #navkann a,
#nuetzt  #navnuetzt a,
#hilft  #navhilft a,
#kostet  #navkostet a,
#wer  #navwer a,
#was  #navwas a,
#geht #navgeht a,
#vertrag #navvertrag a,
#scheidung #navscheidung a,
#mediator #navmediator 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;}


#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}

/* Formatierungen für alle Bereiche*/
h1{font-weight:bold;color:#800000;font-size:1.4rem;letter-spacing:1pt;line-height:120%}
h2{font-weight:bold;color:#808080;font-size:1.2rem;letter-spacing:1pt;margin:20px 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.einzeilig{margin:0px 0px 0px 0px;}

.rot{color:#800000}
.weiss{color:#ffffff}
.klein{font-size:0.8rem;line-height:130%}
.gross{font-size:1.3rem;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}

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);}

.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: '\f059';
font-family: FontAwesome;
font-size:1.3em;
color: #white;
float:left
}

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

}

.toggleBox input:checked ~ label::before {
content: '\f046';
font-family: FontAwesome;
}
.toggleBox input:checked ~ label::after {
content: '\f102';
font-family: FontAwesome;
}
 
/* Der Aufklappmechanismus */
.toggleBox input:not(:checked) ~ div {
    opacity: 0;
    height: 0;
	display:none
}
 
.toggleBox input: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}


@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%}
}

/* Tablets 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;}
#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:60%;min-width:150px;max-width:400px;margin:0px auto;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;}
	
	#NaviLinks ul{box-sizing:border-box;width:100%!important;min-width:300px;float:left!important;display:block;margin-left:0px;padding-left:0px}
	#NaviLinks li{box-sizing:border-box;width:100%!important;height:auto; min-height:32px;min-width:300px;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:683px){
#Logo{display:none!important}
#ZeileGrautoene{display:none}
#Main{width:100%;border:none}
#NaviLinks, #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:30px 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}

}