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

@font-face {
    font-family: 'droid_sansregular';
    src: url('fonts/DroidSans-webfont.eot');
    src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/DroidSans-webfont.woff') format('woff'),
         url('fonts/DroidSans-webfont.ttf') format('truetype'),
         url('fonts/DroidSans-webfont.svg#droid_sansregular') format('svg');
    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 {
  background:#eaeaea;
  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 {
  background-color: transparent;
  margin: 0; padding: 0;
  font-family:"droid_sansregular","HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 100.01%; color:#6C723F; line-height:1.7em;
  -webkit-font-smoothing: antialiased;
   /*Fix for webkit rendering*/ 
  -webkit-text-size-adjust: 100%; 
   }
  
  
/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {margin: 0; font-weight:600; line-height:normal; text-rendering: optimizelegibility;/*optimiert die Lesbarkeit, wird aber nur von Gecko-Engines und Web-Kit Browsern unterstützt*/ }

h1{font-size: 24px; color:#C30;}
h2{font-size: 22px;}
h3{font-size: 20px;}
h4{font-size: 18px; padding-bottom:20px;}
h5{font-size: 16px; padding:10px 0 10px 0;}
h6{font-size: 15px;}

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

li{font-size:15px; list-style:none; margin-bottom:8px; line-height:1.7em;}
li.line{background-image:url(picts/line.png); background-position:left 10px; background-repeat:no-repeat; padding-left:35px;}

p{font-size: 15px; line-height: 1.7em; padding-bottom:10px; }
.datenschutz p.strong{font-weight:bold; padding-bottom:0;}

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: smaller; }
.normal{font-weight:normal;}  
.space{letter-spacing:0.125em;}
.red{color:#cc3333; padding-bottom:15px;}
.green-light{color:#999966; padding-bottom:10px;}/*Name auf der Startseite*/

/*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:#6C723F;
	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:#6C723F; text-decoration:none; }/*grün*/
a:hover, a:focus, a:active {text-decoration:none; color:#999966;}/*hellergrün*/

a.textlink{display:inline; text-decoration:underline; color:#6C723F;}
a.textlink:hover{color:#999966;}

.green{color:#999966;}/*E-Mailadresse auf der Startseite*/
.green:hover{color:#D1D5B5;}/*E-Mailadresse auf der Startseite*/


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

#wrapper{
	margin: 0 auto; padding: 0;
	width:1200px; min-height:930px;
	background:#fff;
}


/*nur für Mobil, auf dem PC nicht sichtbar*/
.menu-btn{display:none;}/*Riffellinien für Menü bei kleinem Display*/
.nav-law-mobil{display:none;}
/*.adresse-mobil{display:none;}*/

/*MENÜ LAW------------------------------------------*/
.nav-law ul li, .nav-law-mobil ul li{float:right; font-size:13px;  padding:0 30px 0 0; color:#ccc;}
.nav-law ul li a, .nav-law-mobil ul li a{color:#999;}
.nav-law ul li a:hover, .nav-law-mobil ul li a:hover{color:#ccc;}


/*HORZONTALES MENÜ----------------------------------------------*/
.nav-hori ul{ margin:50px 0 0 270px; width:100%;} 
.nav-hori ul li{ float:left; margin:10px 0 5px 0; padding:0px 10px 0px 50px;  font-size:18px; font-weight:600; color:#D1D5B5;}
.nav-hori a{color:#B6B89F;}
.nav-hori ul li.hori-active{ color:#cc3333; }/*Aktiver Menüpunkt, */


/*HEAD----------------------------------------------------------*/
.header{float:left; margin:0;  height:100%; }

.logo{float:left; width:290px; margin:100px 0; padding-left:45px; }
.logo img{width:234px; height:135px;}

.pict-head{float:left;}

/*Vertikales rechtes Menü----------------------------------*/
.nav-vert{position:relative; z-index:10; float:left; margin-top:-5px;}
.nav-vert h3{padding-left:25px; font-weight:normal;}
.nav-vert ul li{line-height:0.8em !important; padding-left:20px; }
.nav-vert ul li.menu{margin-left:-5px; font-size:18px; background-position:left 25px; padding:20px 0 3px 30px; font-weight:600; }
.nav-vert ul li.menu a{color:#cc3333; }
.nav-vert ul li.active {/*color:#D1D5B5;*/ opacity: 0.5;}
/*------------------------------------------------------------------------------------------*/

.slogan{margin:-13px 65px 0 0; font-size:49px; text-align:right; color:#D1D5B5;}

.container{float:left; width:100%; background:#FFF; }
/*Spalten*/
.left-column{float:left;  width:290px; min-height:520px; }
.main-column{float:left; width:910px; min-height:520px; padding:80px 170px 30px 0;}

.portfolio .main-column{padding:20px 0 30px 0px;}
.portfolio-text{width:610px; padding:35px 0px 30px 0;}

/*.adresse{margin:-60px 0 0 20px;}
.adresse li{margin-bottom:30px;}*/

.footer{float:left; width:100%; background:#444;}
.footer p{padding-top:8px; color:#D1D5B5; text-align:center;}
.footer .fon a, .footer #e-post a{color:#D1D5B5;}
.footer .fon a:hover, .footer #e-post a:hover{text-decoration:underline;}

/* Smartphones*/
@media screen and (min-width: 320px) and (max-width: 800px){
body{background:#FFF;}
#wrapper{width:100%; margin:0; padding:0; background:#FFF;}


.nav-law{display:none;}/*MENÜ LAW oben, nur auf dem PC sichtbar ------------------------------------------*/
.nav-law-mobil{display:block;}/*MENÜ LAW unten------------------------------------------*/


.header{clear:both; width:100%; margin:0 auto; padding:0;}

.logo{clear:both; width:100%; margin:10px 0 10px 0; padding:0; }
.logo img{margin:0 auto;}

/*VERTIKALES MENÜ , Die Menüs sind mit diesem Button ein- und ausblendbar---------------------------------------------------------------*/
.menu-btn {display:block; float:right; width:60px; height:auto;  padding:8px 10px 0 0;  background:transparent;  z-index:6; }
.menu-btn a{margin-right:20px; background-image:url(picts/pict_menue.png); background-position: right; background-repeat:no-repeat;}

.nav-vert{display:none; position:absolute; width:100%; top:50px; left:0; background-color:#fff; z-index:20; }
.nav-vert ul{width:100%;  height:auto; text-align:left; background-color:#fff;}

.nav-vert ul li.menu{clear:both; width:100%; margin:0; margin-top:30px; padding:10px 0 10px 30px;  font-size:16px; font-weight:normal; color:#474A58; border-bottom:1px solid #999; background-position:0 10px; background-color:#fff;}
.nav-vert ul li.info{display:none;}

.nav-vert ul li.borderbottom{border-bottom:none;}/*Letzter Menüpunkt*/

.nav-vert ul{float:left; margin:0;}
.nav-vert ul li a{color:#666; background:#fff;}
.nav-vert ul li:hover{background:#fff;}
.nav-vert ul li:hover > a{color:#fff;}

#menu-open:target .nav-vert{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_pfeil.png); background-position:right; background-repeat:no-repeat;}

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

/*HORZONTALES MENÜ----------------------------------------------*/
.nav-hori ul{ margin:0px 0 0 20px; width:100%;}
.nav-hori ul li{ float:left; margin:10px 0 5px 0; padding:0 20px 0 0;  }

.header .pict-head{width:100%;}


.slogan{margin:10px 0 20px 0;padding:0; font-size:24px; text-align:center;}


.container{clear:both; margin:20px 0 40px 0; background:#fff; width:100%;  }


.left-column{display:none;}

/*.adresse{margin:0;}
.adresse-pc{display:none;}
.adresse-mobil{display:block; text-align:center; margin:40px 0; padding:0;   }*/

.main-column{float:left; width:100%; padding:0px 10px 30px 20px;}
.portfolio .main-column{clear:left; width:100%; margin-top:-30px; padding:0px 0 30px 0px;}
.portfolio h1{margin:0; padding:30px 0 20px 10px; text-align:center; width:100%;}
.portfolio-text{width:100%; padding:50px 10px 30px 10px;}

/*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; cursor:pointer;}

/*Footer, senkrechte Trennlinien----------------------*/
.noline{display:none;}

}


@media screen and (min-width: 555px) and (max-width: 768px){
	.noline{display:inline;}
}


@media screen and (min-width: 801px) and (max-width: 1023px){
body{background:#FFF;}
#wrapper{width:100%; margin:0; padding:0; background:#FFF;}

.logo{margin-top:-10px;   }
.logo{clear:both; width:100%; margin:0 0 10px 0;  padding-left:10px; }
.logo img{}

/*HORZONTALES MENÜ----------------------------------------------*/
.nav-hori ul{position:absolute; top:80px; margin-left:400px; width:100%;}
/*Vertikales rechtes Menü----------------------------------*/
.nav-vert{position:relative; z-index:10; float:left; margin:-5px 0; }


/*Spalten*/
.left-column{ display:none;}
.main-column{width:100%; padding:60px 50px 30px 50px;}

.portfolio .left-column{display:none;}
.portfolio .main-column{clear:left; width:100%; margin-top:-30px; padding:0px 0 30px 0px;}
.portfolio h1{margin:0; padding:50px 0 20px 30px;}

/*.adresse{margin:40px 0 0 10px;}
.adresse li{margin-bottom:30px;}*/

.portfolio-text{width:600px; padding:50px 10px 30px 10px;}




}

@media screen and (min-width: 1024px) and (max-width: 1199px){
body{background:#FFF;}
#wrapper{width:100%; margin:0 auto; padding:0; background:#FFF;}



.logo{margin-top:-50px; width:200px; padding-left:10px;  }

/*HORZONTALES MENÜ----------------------------------------------*/
.nav-hori ul{ margin-left:600px; width:100%;}

/*Spalten*/
.left-column{ width:200px;}
.main-column{width:750px; padding:80px 0px 30px 0;}

/*.adresse{margin:-200px 0 0 10px;}
.adresse li{margin-bottom:30px;}*/


}