@charset "UTF-8";
/* Einfache fließende Medien
   Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver-Eigenschaften für fließende Raster
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		7;
	dw-num-cols-desktop:	9;
	dw-gutter-percentage:	25;
	
	Idee durch den Artikel "Responsive Web Design" von Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	und "Golden Grid System" von Joni Korpi
	http://goldengridsystem.com/
*/

@media only screen and (min-width: 807px) {
.gridContainer {
	width: 87.4285%;
	max-width: 1287px;
	padding-left: 1.2857%;
	padding-right: 1.2857%;
	margin-right: auto;
	margin-left: auto;
	margin-top: -285px;
	display: block; 
	align: center;
}
/* /////  ABSTAND 60 PIXEL  ///// */
.LayoutDiv1 {
	clear: both;
	float: left;
	margin: 60px 0px 0px 0px;
	width: 675px;
	display: block;
}
/* /////  ABSTAND 100 PIXEL  ///// */
.LayoutDiv2 {
	clear: both;
	float: left;
	margin: 100px 0px 0px 0px;
	width: 675px;
	display: block; 
}
/* /////  ABSTAND 40 PIXEL  ///// */
.LayoutDiv3 {
	clear: both;
	float: left;
	margin: 40px 0px 0px 0px;
	width: 675px;
	display: block; 
}
/* /////  ABSTAND 80 PIXEL  ///// */
.LayoutDiv4 {
	clear: both;
	float: left;
	margin: 80px 0px 0px 0px;
	width: 675px;
	display: block; 
}
/* /////  ABSTAND 0 PIXEL  ///// */
.LayoutDiv_zurueck {
	clear: both;
	float: left;
	margin: 0px 0px 0px 0px;
	width: 675px;
	display: block; 
}

/* /////  GOOGLE-FONT  ///// */

/* font-family: 'Roboto', sans-serif;

font-family: 'Source Sans 3', sans-serif; */

.bg {
	background-color: #9e9061;
	width: 100%;
	height: 285px;
/*	position: absolute; */
	z-index: 4;
	margin-top: 30px;
	
}

/* /////  LOGO  ///// */
.bg-container {
 	float: left;
	width: auto;
	height: 285px; 
	z-index: 3;
}

.logo1{
	background: url(images/logo1.png) bottom right no-repeat;
 	float: left;
	width: 310px;
	height: 285px;
	position: absolute; 
	z-index: 1;
	margin: 0px 0px 0px -30px;
}

.logo-font{
	font-family: 'Roboto', sans-serif;
	font-size: 44px;
	font-weight: 900;
	color: #f2f2f2;
	float: left;
	height: auto;
	width: auto;
	position: absolute;
	z-index: 0;
	clear: right;
	margin-left: 305px;
	text-align: center;
	padding-top: 108px;
}


/* /////  NAVIGATION  ///// */

.nav_container {
	height: auto;
	width: auto;
	max-width: 675px;
	margin: 330px 0px 0px 0px;	
}
/* /////  HOME  ///// */
.nav-box-home {
	width: 330px;
	height: 30px;
	border-top-style: solid;
	border-top-color: #9e9061;
	border-top-width: 1px;
	padding: 5px 0px 10px;
	margin-right: 15px; /*  15 PIXEL ODER 0 PIXEL  */
	float: left;
}
/* /////  UEBER ///// */
.nav-box-ueber {
	width: 330px;
	height: 30px;
	border-top-style: solid;
	border-top-color: #9e9061;
	border-top-width: 1px;
	padding: 5px 0px 10px;
	margin-right: 0px; /*  15 PIXEL ODER 0 PIXEL  */
	float: right; /* ///// ACHTUNG ///// */
}
/* /////  LEISTUNG  ///// */
.nav-box-leistung {
	width: 330px;
	height: 30px;
	border-top-style: solid;
	border-top-color: #9e9061;
	border-top-width: 1px;
	padding: 5px 0px      10px;
	margin-right: 15px; /*  15 PIXEL ODER 0 PIXEL  */
	float: left;
}
/* /////  REFERENZEN  ///// */
.nav-box-referenzen {
	width: 330px;
	height: 30px;
	border-top-style: solid;
	border-top-color: #9e9061;
	border-top-width: 1px;
	padding: 5px 0px 10px;
	margin-right: 0px; /*  15 PIXEL ODER 0 PIXEL  */
	float: right;
}
/* /////  KONTAKT  ///// */
.nav-box-kontakt {
	width: 330px;
	height: 30px;
	border-top-style: solid;
	border-top-color: #9e9061;
	border-top-width: 1px;
	padding: 5px 0px 10px;
	margin-right: 15px; /*  15 PIXEL ODER 0 PIXEL  */
	float: left;
}
/* /////  IMPRESSUM  ///// */
.nav-box-impressum {
	width: 330px;
	height: 30px;
	border-top-style: solid;
	border-top-color: #9e9061;
	border-top-width: 1px;
	padding: 5px 0px 10px;
	margin-right: 0px; /*  15 PIXEL ODER 0 PIXEL  */
	float: right;
}

/* ///  NAVIGATION: HOME  /// */
.div-home1 {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color: #9e9061;
	font-weight: 400;
	width: auto;
	height: 30px;
	margin-top: -8px;
	float: left;
}

/* ///  NAVIGATION: LEISTUNG  /// */
.div-leistung1 {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color: #9e9061;
	font-weight: 400;
	width: auto;
	height: 30px;
	margin-top: -8px;
	float: left;
}

.div-leistung2 {
	width: 202px; /*  BREITE DES BALKEN !!!  */
	height: 21px;
	margin-top: 0px;
	margin-left: 14px; /*  ABSTAND DES BALKEN  */
	float: right;
} 

.div-leistung1:hover ~ .div-leistung2 {
    width: 202px; /*  BREITE DES BALKEN !!!  */
	background-color: #9e9061;
	margin-left: 15px; /*  ABSTAND DES BALKEN  */
}
/* ///  NAVIGATION: KONTAKT  /// */
.div-kontakt1 {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color: #9e9061;
	font-weight: 400;
	width: auto;
	height: 30px;
	margin-top: -8px;
	float: left;
}

.div-kontakt2 {
	width: 206px; /*  BREITE DES BALKEN !!!  */
	height: 21px;
	margin-top: 0px;
	margin-left: 14px; /*  ABSTAND DES BALKEN  */
	float: right;
} 

.div-kontakt1:hover ~ .div-kontakt2 {
    width: 206px; /*  BREITE DES BALKEN !!!  */
	background-color: #9e9061;
	margin-left: 15px; /*  ABSTAND DES BALKEN  */
}
/* ///  NAVIGATION: ÜBER DWORAK  /// */
.div-ueber1 {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color: #9e9061;
	font-weight: 400;
	width: auto;
	height: 30px;
	margin-top: -8px;
	float: left;
}

.div-ueber2 {
	width: 150px; /*  BREITE DES BALKEN !!!  */
	height: 21px;
	margin-top: 0px;
	margin-left: 14px; /*  ABSTAND DES BALKEN  */
	float: right;
} 

.div-ueber1:hover ~ .div-ueber2 {
    width: 150px; /*  BREITE DES BALKEN !!!  */
	background-color: #9e9061;
	margin-left: 15px; /*  ABSTAND DES BALKEN  */
}
/* ///  NAVIGATION: REFERENZEN  /// */
.div-referenzen1 {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color: #9e9061;
	font-weight: 400;
	width: auto;
	height: 30px;
	margin-top: -8px;
	float: left;
}
.div-referenzen2 {
	width: 168px; /*  BREITE DES BALKEN !!!  */
	height: 21px;
	margin-top: 0px;
	margin-left: 14px; /*  ABSTAND DES BALKEN  */
	float: right;
} 

.div-referenzen1:hover ~ .div-referenzen2 {
    width: 168px; /*  BREITE DES BALKEN !!!  */
	background-color: #9e9061;
	margin-left: 15px; /*  ABSTAND DES BALKEN  */
}
/* ///  NAVIGATION: IMPRESSUM  /// */
.div-impressum1 {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color: #9e9061;
	font-weight: 400;
	width: auto;
	height: 30px;
	margin-top: -8px;
	float: left;
}

.div-impressum2 {
	width: 177px; /*  BREITE DES BALKEN !!!  */
	height: 21px;
	margin-top: 0px;
	margin-left: 14px; /*  ABSTAND DES BALKEN  */
	float: right;
} 

.div-impressum1:hover ~ .div-impressum2 {
    width: 177px; /*  BREITE DES BALKEN !!!  */
	background-color: #9e9061;
	margin-left: 15px; /*  ABSTAND DES BALKEN  */
}

/* /////  ZURÜCK  ///// */

.zurueck-box {
	width: 100px;
	height: 30px;
	border-top-style: solid;
	border-top-color: #9e9061;
	border-top-width: 1px;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	color: #9e9061;
	padding: 1px 0px 10px 0px;
	margin: 20px 0px 20px 15px;
	float: right;
}

.div-zurueck1 {
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	color: #9e9061;
	font-weight: 400;
	width: auto;
	height: 30px;
	margin-top: -2px;
	float: left;
}

.div-zurueck2 {
	width: 28px; /*  BREITE DES BALKEN !!!  */
	height: 12px;
	margin-top: 3px;
	margin-left: 14px; /*  ABSTAND DES BALKEN  */
	float: right;
} 

.div-zurueck1:hover ~ .div-zurueck2 {
	width: 28px; /*  BREITE DES BALKEN !!!  */
	background-color: #9e9061;
	margin-left: 0px; /*  ABSTAND DES BALKEN  */
}

/* /////  LINK: NAVIGATION  ///// */
/* unvisited link */
a.navigation_link:link {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color: #9e9061;
	font-weight: 400;
}
/* visited link */
a.navigation_link:visited {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color: #9e9061;
	font-weight: 400;
}
/* mouse over link */	
a.navigation_link:hover {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color: #9e9061;
	font-weight: 400;}
/* selected link */
a.navigation_link:active {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	color: #9e9061;
	font-weight: 400;
}

/* /////  LINK: ZURÜCK  ///// */
/* unvisited link */
a.back_link:link {
	color: #9e9061;
}
/* visited link */
a.back_link:visited {
    color: #9e9061;
}
/* mouse over link */	
a.back_link:hover {
	color: #9e9061;
}
/* selected link */
a.back_link:active {
	color: #9e9061;
}

/* /////  TRENNUNG GRAU  ///// */

#top_line_1 {
	background-color: #474540;
	height: 31px;
	width: auto;
	margin: 5px 0px 0px 230px;
	clear: right;
}

#top_line_2 {
	background-color: #474540;
	height: 31px;
	width: auto;
	margin: 45px 0px 0px 230px;
	clear: right;
}


/* /////  HEADLINE | COPY-TEXT  ///// */

.subheadline_left {
	float: left;
	width: 215px;
	padding: 0px 15px 40px 0px;
	height: auto;
}

/* /////  NOT FOR MOBILE PHONES  ///// */
.subheadline_left_short {
	float: left;
	width: 180px;
	padding: 0px 15px 40px 0px;
	height: auto;
}

section {
	margin-top: 0px;	
}

/* /////  HEADLINES RECHTS  ///// */
h1 {
	font-family: 'Roboto', sans-serif;
	color: #9e9061;
	font-size: 35px;
	line-height: 40px;
	font-weight: 900;
	margin-top: 0px;
}
/* /////  HEADLINES IM TEXT mit 40px Abstand  ///// */
h5 {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 40px;
	color: #474540;
	margin-bottom: 40px;
}
/* /////  HEADLINES IM TEXT mit 20px Abstand  ///// */
h6 {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	color: #474540;
	margin-bottom: 0px;
}

p {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	color: #474540;
}

.copytext {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 15px;
	line-height: 20px;
	margin: 14px 115px 20px 230px;
	padding-left: 1px;
	padding-top:10px;
}
/* /////  BACKGROUND: DUNKLES GRAU  ///// */
.copytext_dark {
	margin: 9px 0px 20px 230px;
	background-color: #474540;
	padding-top: 16px;
}
/* /////  FONT-COLOUR: WHITE  ///// */
p.white {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	color: #f2f2f2;
	padding: 0px 0px 20px 20px;
	margin: 0px;
}


/* /////  WORTZWISCHENRAUM (z.B. Telefonnummern)  ///// */
span {
	margin-right: 0.2em;
}


/* /////  LEISTUNGEN  ///// */

/* /////  BOX FÜR DIE LEISTUNGEN  ///// */
.liste {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 15px;
	line-height: 20px;
	margin: 20px 115px 40px 230px;
}

ul {
	font-family: 'Source Sans 3', sans-serif;
	color: #474540;
	font-weight: 400;
	line-height: 20px;
	margin: 0px 0px 0px 160px;
	padding-top:5px;
	list-style-type: none;
}

/* /////  OBERBEGRIFFE  ///// */
.leistungen {
	font-family: 'Source Sans 3', sans-serif;
	font-weight: 700;
	line-height: 20px;
	color: #4c4a48;
	margin: 5px 0px 0px 0px;
	float: left;
	width: 150px;
	height: auto;
}

/* /////  IMAGES  ///// */

.image_box {
	height: auto;
	width: auto;
	float:left;
	margin: -104px 0px 0px 230px;
}

.image {
	margin: 0px 30px 20px 0px;
	width: 324px;
	height: 204px;
	float: left;
	border: 3px solid #9e9061;
}

/*  ///// IMAGE: AUSBLEND-EFFEKT  ///// */

#blend {
	float: left;
	position: relative;
	width: 324px;
	height: 204px;
	float: left;
	margin: 0px 15px 20px 0px;
	border: 3px solid #9e9061;
}

#blend img#top:hover { 
	opacity:0;
}

#blend img { 
	position: absolute;
    top: 0; 
	left: 0; 
	opacity: 1;    
    transition: opacity 2s;
}

#blend p.white { 
	position: absolute;
    top: 0; 
	left: 15; 
	margin-top: 4px;
	opacity: 0,5;    
    transition: opacity 1s;
}
<!-- Mit Browser-Präfix! -->


/* /////  IMAGE "DREIECK" KONTAKT  ///// */
#dreieck_grau {
	background: url(images/dreieck_grau.png) bottom left no-repeat;
	float: left;
	height: 30px;
	width: 30px;
	margin: 9px 0px 0px -30px;
}

.image_title {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	color: #f2f2f2;
	margin: -190px 0px 0px 15px;
}

/* /////  E-MAIL LINK  ///// */

a {
	font-family: 'Source Sans 3', sans-serif;
	color: #f2f2f2;
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	text-decoration: none;
}

/* /////  FOOTER  ///// */
/* /////  FOOTER BACKGROUND  ///// */
#footer {
	width: 100%;
	height: 115px;
	border-top-style: solid;
	border-top-color: #9e9061;
	background-color: #474540;
	border-top-width: 5px;
}

.footer_box {
	width: 80.1777%;
	max-width: 2800px;
	padding-left: 0.9111%;
	padding-right: 0.9111%;
	margin-right: auto;
	margin-left: auto;
	display: block;
	align: center;
}

.footer_links {
	width: 215px;
	font-family: 'Roboto', sans-serif;
	color: #f2f2f2;
	font-size: 15px;
	line-height: 20px;
	font-weight: 400;
	float: left;
	margin-top: 20px;
}

.footer_rechts {
	width: auto;
	font-family: 'Source Sans 3', sans-serif;
	color: #f2f2f2;
	font-size: 15px;
	line-height: 20px;
	float: left;
	margin-top: 22px;
	padding-left: 14px;
}

/* /////  E-MAIL LINK IM FOOTER  ///// */
/* unvisited link */
a.footer_link:link {
	color: #615e57;
}
/* visited link */
a:visited {
    color: #9e9061;
}
/* mouse over link */	
a.footer_link:hover {
	color: #9e9061;
}
/* selected link */
a.footer_link:active {
	color: #615e57;
}