/* basics //////////////////////////////////// */

/* browser egalisieren */
html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
html {
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}
:focus {
	outline:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
td {
	vertical-align: top;
}
sup {
	font-size:11px;
	vertical-align:top;
	padding-left:3px;
	padding-right:3px;
}
/*padding egalisieren*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
	margin:0px;
	padding:0px;
	text-align:center;
	background:#fff;
}


@font-face {
    font-family: 'manroperegular';
    src: url('bb-schriften/manrope-regular-webfont.eot');
    src: url('bb-schriften/manrope-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/manrope-regular-webfont.woff2') format('woff2'),
         url('bb-schriften/manrope-regular-webfont.woff') format('woff'),
         url('bb-schriften/manrope-regular-webfont.ttf') format('truetype'),
         url('bb-schriften/manrope-regular-webfont.svg#manroperegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'manropesemibold';
    src: url('bb-schriften/manrope-semibold-webfont.eot');
    src: url('bb-schriften/manrope-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/manrope-semibold-webfont.woff2') format('woff2'),
         url('bb-schriften/manrope-semibold-webfont.woff') format('woff'),
         url('bb-schriften/manrope-semibold-webfont.ttf') format('truetype'),
         url('bb-schriften/manrope-semibold-webfont.svg#manropesemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'manropebold';
    src: url('bb-schriften/manrope-bold-webfont.eot');
    src: url('bb-schriften/manrope-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/manrope-bold-webfont.woff2') format('woff2'),
         url('bb-schriften/manrope-bold-webfont.woff') format('woff'),
         url('bb-schriften/manrope-bold-webfont.ttf') format('truetype'),
         url('bb-schriften/manrope-bold-webfont.svg#manropebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'industrydemi';
	src: url('bb-schriften/Industry-Demi.eot');
	src: url('bb-schriften/Industry-Demi.eot?#iefix') format('embedded-opentype'),
		 url('bb-schriften/Industry-Demi.woff') format('woff'),
		 url('bb-schriften/Industry-Demi.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
/* layout */


/*zentrierter container*/
.konsole {
	position:relative;
	width:1381px;
	margin-left:auto;
	margin-right:auto;
	display:block;
	text-align:left;
	background:#c6aa76;
	background:rgb(212,191,140);
}
.logo {
	width:100%;
	height:260px;
	background-color:#fff;
	background-image:url(bb-imgs/logo-holzundbau.png);
	background-size:400px auto;
	background-repeat:no-repeat;
	background-position:center center;
}
	
.banner {
	width:100%;
	height:556px;
	display:block;
	background-image:url(bb-imgs/banner-holzundbau.jpg);
	background-size:100% auto;
	background-repeat:no-repeat;
}
	
.sektion {
	width:100%;
	display:block;
}
.clearer {
	clear:both;
	width:100%;
	height:0px;
	display:block;
}

/* 1 slogan */
.sektion-1 {
	padding:80px 140px 80px 140px;/*1101*/
	background:#fff;
}
.sektion-1 .spalte-1 {
	width:367px;
	display:block;
	float:left;
}
.sektion-1 .spalte-2 {
	width:734px;
	display:block;
	float:left;
}

	
/* 2 dienstleistungen */
.sektion-2 {
	clear:both;
	padding:80px 140px 80px 140px;
}
.sektion-2 .spalte-1 {
	width:367px;
	display:block;
	float:left;
}
.sektion-2 .spalte-2 {
	width:734px;
	display:block;
	float:left;
}

/* 3, 4, 5 dienstleistungen liste 1-3 */
.sektion-3, .sektion-4, .sektion-5 {
	clear:both;
}
.sektion-3 {
	padding:0px 140px 0px 140px;
}
.sektion-4 {
	padding:0px 140px 0px 140px;
}
.sektion-5 {
	padding:40px 140px 80px 140px;
}

.sektion-3 .spalte, .sektion-4 .spalte, .sektion-5 .spalte {
	width:367px;
	display:block;
	float:left;
}

.sektion-3 .spalte {
	padding:40px 0px 40px 0px;
	border-top:4px solid #fff;
}
.sektion-4 .spalte {
	padding:40px 0px 40px 0px;
	border-top:4px solid #fff;
}
.sektion-4 .clearer {
	border-bottom:4px solid #fff;
}


/* 6 ueber mich */
.sektion-6 {
	padding:80px 0px 80px 140px;/*1241*/
	background:#fff;
}
.sektion-6 .links {
	padding:40px 0px 0px 0px;
	width:734px;
	display:block;
	float:left;
}
.sektion-6 .links .spalte-1 {
	width:367px;
	display:block;
	float:left;
}	
.sektion-6 .links .spalte-2 {
	padding:0px 40px 0px 0px;
	width:367px;
	display:block;
	float:left;
}
.sektion-6 .links .spalte-3 {
	clear:both;
	width:100%;
	padding:40px 20px 0px 0px;
}

.sektion-6 .rechts {
	padding:0px 0px 0px 0px;
	width:507px;
	display:block;
	float:left;
}

.sektion-6 img {
	width:100%;
	height:auto;
	vertical-align:bottom;
}

/* 7 fusszeile */
.sektion-7 {
	padding:80px 140px 80px 507px;
	background:#744F28;
}
.sektion-7 .spalte {
	width:367px;
	display:block;
	float:left;
}	




/* textformate */
body {
	font:32px/46px manroperegular, sans-serif;
	color:#744f28;
}
h1 {
	font:56px/68px industrydemi, sans-serif;
	font-weight:normal;
}
h2 {
	font:20px/28px manropesemibold, sans-serif;
	font-weight:normal;
}
h3 {
	font:32px/46px manropebold, sans-serif;
	font-weight:normal;
}
h4 {
	font:18px/28px manropebold, sans-serif;
	font-weight:normal;
	text-transform:uppercase;
}

p.klein {
	font:16px/28px manropebold, sans-serif;
}
.fusszeile p {
	color:rgb(212,191,140);
}

strong, b {
	font-family: manropebold, sans-serif;
	font-weight:normal;
}

.sektion-1 h4 {
	padding-top:4px;
}
.sektion-7 p {
	font:18px/32px industrydemi, sans-serif;
}

/* links */
.sektion-7 a {
	color:#fff;
	text-decoration:none;
}
.sektion-7 a:active, .sektion-7 a:focus,
.sektion-7 a:hover {
	color:rgb(212,191,140);
}



/* R E S P O N S I V E //////////////////////////////////////// */

@media only screen and (max-width: 1400px) {

	.konsole {
		width:1141px;
	}
	.banner {
		height:460px;
	}
	.sektion-1 {
		padding:80px 20px 80px 20px;/*1101*/
	}
	.sektion-2 {
		padding:80px 20px 80px 20px;/*1101*/
	}
	.sektion-3 {
		padding:0px 20px 0px 20px;
	}
	.sektion-4 {
		padding:0px 20px 0px 20px;
	}
	.sektion-5 {
		padding:40px 20px 80px 20px;
	}

	.sektion-6 {
		padding:80px 0px 80px 20px;/*1121*/
	}
	.sektion-6 .links {
		padding:0px 0px 0px 0px;
	}
	.sektion-6 .links .spalte-3 {
		padding:35px 20px 0px 0px;
	}
	.sektion-6 .rechts {
		width:387px;
	}
	.sektion-7 {
	 	padding:80px 20px 80px 387px;
	}
}

@media only screen and (max-width: 1170px) {
	
	.konsole {
		width:774px;
	}
	.logo {
		height:160px;
		background-size:300px auto;
	}
	.banner {
		height:360px;
		background-size:cover;
		background-position:center center;
	}
	
	.sektion-1 {
		padding:60px 20px 60px 20px;/*1101*/
	}
	.sektion-2 {
		padding:60px 20px 60px 20px;/*1101*/
	}
	.sektion-3 {
		padding:0px 20px 0px 20px;
	}
	.sektion-4 {
		padding:0px 20px 0px 20px;
	}
	.sektion-5 {
		padding:40px 20px 60px 20px;
	}
	.sektion-6 {
		padding:60px 20px 60px 20px;/*734*/
	}
	.sektion-7 {
	 	padding:60px 20px 60px 20px;
	}


	.sektion-1 .spalte-1 {
		float:none;
		margin-bottom:20px;
	}
	.sektion-1 .spalte-2 {
		float:none;
	}
	
	.sektion-2 .spalte-1 {
		float:none;
		margin-bottom:20px;
	}
	.sektion-2 .spalte-2 {
		float:none;
	}
	
	.sektion-3 .spalte-3,
	.sektion-4 .spalte-3 {
		float:none;
		margin-left:367px;
	}
	
	.sektion-3 .spalte-2,
	.sektion-4 .spalte-2 {
		padding-bottom:0px;
	}
	.sektion-5 .spalte-3 {
		display:none;
	}
	
	.sektion-6 .rechts {
		float:none;
		clear:both;
		margin-left:-20px;
		width:calc(100% + 40px);
		padding-top:40px;
	}
	
	/*text*/
	.sektion-1 h4 {
		padding-top:0px;
	}

}

@media only screen and (max-width: 800px) {
	
	.konsole {
		width:460px;
	}
	.logo {
		height:120px;
		background-size:200px auto;
	}
	.banner {
		height:260px;
		background-size:cover;
		background-position:center center;
	}
	.spalte {
		float:none !important;
		width:100% !important;
		margin-left:0px !important;
	}
		
	.sektion-1 {
		padding:40px 20px 40px 20px;
	}
	.sektion-2 {
		padding:40px 20px 40px 20px;
	}
	.sektion-3 {
		padding:0px 20px 0px 20px;
	}
	.sektion-4 {
		padding:0px 20px 0px 20px;
	}
	.sektion-5 {
		padding:0px 20px 40px 20px;
	}
	.sektion-6 {
		padding:40px 20px 40px 20px;
	}
	.sektion-7 {
	 	padding:40px 20px 40px 20px;
	}
	.sektion-4 .clearer {
		border:0px;
	}
	
	.sektion-3 .spalte-1,
	.sektion-4 .spalte-1,
	.sektion-5 .spalte-1 {
		padding:20px 0px 20px 0px;
		border-top:4px solid #fff;
	}
	.sektion-3 .spalte-2,
	.sektion-4 .spalte-2,
	.sektion-5 .spalte-2 {
		padding:0px;
		border-top:0px;
	}
	.sektion-3 .spalte-3,
	.sektion-4 .spalte-3 {
		padding:0px 0px 20px 0px;
		border-top:0px;
	}
	.sektion-5 .spalte-3 {
		padding:0px 0px 40px 0px;
		border-top:0px;
	}
	.sektion-6 .links {
		width:100%;
	}
	.sektion-6 .links .spalte-1 {
		padding:0px 0px 20px 0px;
	}
	.sektion-6 .links .spalte-2 {
		padding:0px;
	}
	.sektion-6 .links .spalte-3 {
		padding:20px 0px 0px 0px;
	}

	/* textformate */
	body {
		font:24px/32px manroperegular, sans-serif;
	}
	h1 {
		font:42px/48px industrydemi, sans-serif;
	}
	h2 {
		font:20px/28px manropesemibold, sans-serif;
	}
	h3 {
		font:28px/38px manropebold, sans-serif;
	}
	h4 {
		font:18px/28px manropebold, sans-serif;
	}
	
	p.klein {
		font:16px/28px manropebold, sans-serif;
	}
	
	.sektion-7 p {
		font:18px/32px industrydemi, sans-serif;
	}
}



@media only screen and (max-width: 479px) {
	
	.konsole {
		width:100%;
	}
	.logo {
		height:100px;
		background-size:180px auto;
	}
	.banner {
		height:220px;
	}

	/* textformate */
	body {
		font:21px/28px manroperegular, sans-serif;
	}
	h1 {
		font:30px/38px industrydemi, sans-serif;
	}
	h2 {
		font:20px/28px manropesemibold, sans-serif;
	}
	h3 {
		font:24px/32px manropebold, sans-serif;
	}
	h4 {
		font:18px/28px manropebold, sans-serif;
	}
	
	p.klein {
		font:16px/24px manropebold, sans-serif;
	}
	
	.sektion-7 p {
		font:18px/32px industrydemi, sans-serif;
	}
}