@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

/*Fragen, Vorläufiges, Arbeitsversion-------------------------*/
.work{color:#F60; font-style:italic;}

* {
margin: 0;	padding: 0;
border: 0 none; 
vertical-align: baseline;
}

html {
height: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; 
}

body {
min-height: 100%;
font-size: 100.01%;
/*overflow-y: scroll; */
}

/* Mixins , behebt BUGs in den Browsern
=================================================== */
/*clearfix bewirkt bei floatenden Elementen in einer Box, dass diese korrekt in der Box stehen*/
.clearfix {*zoom: 1; }/*100%Darstellung f�r IE*/
.clearfix:before {display: table; content: ""; }
.clearfix:after {display: table; content: ""; clear: both; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  position: static;
  clip: auto;
  height: auto; width: auto; margin: 0;
  overflow: visible; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
  }
  *:first-child + html .clearfix {zoom: 1; }
  *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

/* IE7 */
/* #Basic Styles
================================================== */
/* apply a natural box layout model to all elements */
html {
  
  margin: 0; padding: 0;
  height: 100%;
  font-size: 100.01%;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: #f3f5f6;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  margin: 0 ; padding: 0;
  font-family:"OpenSans-Regular","HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 100.01%; color:#333; line-height:1.7em;
  -webkit-font-smoothing: antialiased;
   /*Fix for webkit rendering*/ 
  -webkit-text-size-adjust: 100%;



  
  background-color:#B80038;
   }
  
body.startseite{ 
/*2 Hintergrundbilder*/
  background: 
  url(picts/bg-streifen.png) 0 270px no-repeat, 
  url(picts/bg-body2.png) top repeat-x;
  
  background-color:#B80038;
  
  } 


/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {margin: 0; font-weight:600; line-height:22px; text-rendering: optimizelegibility;/*optimiert die Lesbarkeit, wird aber nur von Gecko-Engines und Web-Kit Browsern unterstützt*/ }

h1{padding:20px 0 30px 0; font-size: 24px; line-height:normal; color:#B80038;}
h2{font-size: 20px; margin:0px 0 10px 0; line-height:normal; color:#B80038;}
h3{font-size: 18px; padding:10px 0 5px 0; color:#B80038;}


ul, ol {margin:0; padding:0; list-style:none;}

li{font-size:16px;  margin-bottom:8px; line-height:1.7em;}

p{font-size: 16px; line-height: 1.7em; padding-bottom:10px; }

b, strong { font-weight: 600; }
em {font-style: italic; }

br{margin:0; padding:0;}

.antifloat{clear:both;}
.bordernone{border:none;}
.nobr{white-space: nowrap;}/*kein Umbruch, indexseite*/

.small {font-size: small; font-weight:normal; }
.lineheight{line-height:0.7em;}
.normal{font-weight:normal;}  
.space{letter-spacing:0.125em;}
.red{color:#B80038; }
.grey{color:#333;}

/*für die E-Mail Adressen um @ zu verstecken*/
noscript span {display:none}

/*Telefonnummern Smartphone*/
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:focus,
a[href^="tel"]:hover  {
	display:inline; text-decoration: none; color:#B80038;
	cursor: text; 
}


/*Grafiken----------------------------------*/
img {
 display:block;
 /*width: 100%; auf kleineren Displays wird das Bild, wenn es zu gro� ist, verkleinert*/
 height: auto;
 border: 0;
 -ms-interpolation-mode: bicubic;/*Art der Berechnung beim Skalieren f�r IE7*/ 
}



/*NAVIGATION allgemein----------------------------------------------------------------------*/
a {display:block; color:#fff; text-decoration: none; }
a:hover, a:focus, a:active {text-decoration:none; color:#999;}

a.textlink{display:inline; text-decoration:underline; color:#B80038;}
a.textlink:hover{color:#999;}


/*--------------------------------------------------------------------------------------*/

#wrapper{
	margin: 0 auto; padding: 0;  
	max-width:1200px; min-height:auto;
	background:#FEFCF3; background-image:url(picts/bg-head.png); background-position:top; background-repeat:repeat-y; /*border:1px solid #eaeaea; border-top:0;*/
}

.header{ height:270px; margin:0; padding:0; }

.logo{background:transparent; margin-left:-20px; padding:10px 0 10px 0;}/*Das Logo wird aus rein optischen Gründen nach links gerückt obwohl es rechnerisch genau mittig wäre!*/
.logo img{margin:0 auto;  }

.menu-btn{display:none;}/*Riffellinien für Menü bei kleinem Display*/




/*------------------------------------------------------------------------------------------*/

.streifen-menu{width:100%; margin-bottom:0; height:50px; background:/*#B80038*/#FFDC00;}
.startseite .streifen-menu{width:100%; margin-bottom:0; height:50px; background:#B80038;}

/*HAUPTMENÜ----------------------------------------------*/
.mainnav{float: left; width: 100%;}
.mainnav ul{position:relative; float: left; left: 50%; margin: 0 auto; padding: 0;}
.mainnav ul li{float:left; position:relative; right: 50%; width:150px; margin:10px 3px auto 3px; /*padding:9px auto 0 auto; width:120px;*/ color:#666; font-size:18px; text-align:center; font-weight:bold; letter-spacing:0.1em; }
.mainnav ul li a{color:#B80038; font-weight:normal; letter-spacing:0em;}
.mainnav ul li a:hover{color:#B80038;font-weight:normal; letter-spacing:0em;}

.startseite .mainnav ul li{float:left; position:relative; right: 50%; width:150px; margin:10px 3px auto 3px; /*padding:9px auto 0 auto; width:120px;*/ color:#fff; font-size:18px; text-align:center; font-weight:bold; letter-spacing:0.1em; }
.startseite .mainnav ul li a{color:#fff; font-weight:normal; letter-spacing:0em;}
.startseite .mainnav ul li a:hover{color:#fff;font-weight:normal; letter-spacing:0em;}




.content{ margin:0; padding:80px 100px 100px 80px; background:transparent;}

.pict-profil{float:right; padding:0 0px 0 20px;}

.eingerueckt{margin-left:20px;}

.line{ padding-left:20px; background-image:url(picts/line.png); background-position:left 12px; background-repeat:no-repeat}
.quad{ padding-left:20px; background-image:url(picts/quad.png); background-position:left 12px; background-repeat:no-repeat}


/*MENÜ LAW------------------------------------------*/
.nav-law{position:relative;left:50%; padding:10px 0px 30px 380px; font-size:13px; color:#fff; }
.nav-law a{display:inline; color:#fff;}
.nav-law a:hover{color:#eaeaea;}


/* Smartphones*/
@media screen and (min-width: 280px) and (max-width: 767px){
	body{ background-color:#FEFCF3; background-image:none;}
#wrapper{width:100%; margin:0; padding:0;   background:#FEFCF3; }

.logo{margin-left:0;}
.content{ padding:40px 15px 40px 15px;}

.pict-profil{width:100%;}
.pict-profil img{margin:0 auto;}

.line{float:left;}


/*Die Menüs sind mit diesem Button ein- und ausblendbar*/
.menu-btn {display:block;   width:100%; height:auto; margin-top:0; right:0;  padding:13px 10px 0 0;  text-align:right ; font-size:0.9em; font-weight:normal; background:#FFDC00;  z-index:6; }
.menu-btn a{padding-right:40px; float:right;  width:10%; color:#666; background-image:url(picts/pict_menue2.png); background-position: right; background-repeat:no-repeat; background-color:#FFDC00; }

.mainnav{display:none; position:absolute; width:100%; top:320px;   background-color:transparent;}
.mainnav ul{width:100%;  height:auto;  background-color:transparent;}

.mainnav ul li{clear:both; width:100%; margin:0; padding:7px 0 7px 0;  font-size:16px; font-weight:normal; color:#474A58; border:1px solid #ccc; border-top:none; background-color:#FFFAEA;}
.mainnav ul li.borderbottom{border-bottom:none;}/*Letzter Menüpunkt*/


.mainnav ul li a{color:#666; background-color:#FFFAEA;}/*Linkfarbe des .mainmenu, hier grau*/

.mainnav ul li a:focus{color:#999; background-color:#FFFAEA;}

.mainnav ul li.active{color:#444; background-color:#eaeaea;}



.hardShade{-webkit-box-shadow:3px 3px 1px 3px rgba(0,0,0,0.2); box-shadow:3px 3px 1px 3px rgba(0,0,0,0.2);}

#menu-open:target .mainnav{display:block;}

.menu-btn a.open{display:block; }
.menu-btn a.close{display:none;}

#menu-open:target .menu-btn a.open{display:none;  }
#menu-open:target .menu-btn a.close{display:block; background-image:url(picts/menu_pfeil2.png); background-position:right; background-repeat:no-repeat;}

/*-------------------------------------------------------------*/


/*Darstellung der Telefonnummern auf dem smartphone*/
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:focus,
a[href^="tel"]:hover  {
	text-decoration: underline;}
	
/*MENÜ LAW------------------------------------------*/

.nav-law{position:relative;left:0;width:100%; margin:0; padding:30px 0px 30px 0px; text-align:center;  color:#999; background-color:#FEFCF3; }
.nav-law a{display:inline; color:#999;}
.nav-law a:hover{color:#ccc;}
}

/* Tablet*/
@media screen and (min-width: 768px) and (max-width: 1199px){
body{ background-color:#FEFCF3; background-image:none;}
#wrapper{width:100%; margin:0; padding:0; background:#FEFCF3; }

/*HAUPTMENÜ----------------------------------------------*/
.mainnav{width: 100%; }
.mainnav ul{position:relative; height:20px; left: 50%; margin-left:-225px; padding: 0;}
.mainnav ul li{float:left; position:relative; width:150px; right: auto;  color:#666; font-size:18px; text-align:center; font-weight:bold; letter-spacing:0.1em;  }
.mainnav ul li a{color:#B80038;}

.content{ padding:40px 35px 40px 35px;}
.pict-profil{padding:0 20px 0 20px;}

/*MENÜ LAW------------------------------------------*/
.nav-law{ width:100%; position:relative;left:0%; margin:0; padding:30px 0px 30px 0px; text-align:center;  color:#999; background-color:#FEFCF3;}
.nav-law a{display:inline; color:#999;}
.nav-law a:hover{color:#ccc;}

/*Darstellung der Telefonnummern auf dem smartphone*/
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:focus,
a[href^="tel"]:hover  {
	text-decoration: underline;}
}