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

/************************************************
*	Global										*
************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
	}
ol, ul {
	list-style: none;
	}
blockquote, q {
	quotes: none;
	}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
sub {vertical-align: sub;}
sup {vertical-align: super;}

div, ul, li, ol, p, table, tr, td, h1, h2, h3, input, textarea, footer, header {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

/************************************************
*	Content										*
************************************************/


body {
	background: #aba89a; width:100%; height: auto; 
	color: #000; font-size:14px; line-height:24px; font-family: Helvetica, Arial, sans-serif;
	margin: 0px; padding: 0px; overflow-x: hidden;
	}

a:link, a:visited, a:hover  {color:#000; text-decoration:underline; font-style: normal;}
p {padding-bottom: 20px;}

header {display: block; position: fixed; top:0px; left: 0px; background-color: #aba89a; width:100vw; height: 50px; padding: 0 3vw; z-index: 1000; overflow: hidden;
	font-size:16px; line-height: 50px;  text-align: center;  }

header a:link, header a:visited, header a:hover  {color:#fff; text-decoration:none; text-transform: uppercase; font-weight: bold;}
header ul, header li {display: inline-block; position: relative; width: auto; height: auto; margin: 0; padding: 0;} 
header ul {margin: 0 auto;}
header li  {float: left; margin: 0 1vw;}

footer {display: inline-block; position: relative; width: 100%; height: auto; padding: 6vh 6vw; margin: 0;}
.f_logo {display: inline-block; position: relative; width: 40%; height: auto; float: left; overflow: hidden;}
.f_logo img {width: auto; height: auto; max-width: 80%;}
.f_txt {display: inline-block; position: relative; width: 59%; height: auto; float: right; overflow: hidden;}


.content {display: block; position: relative; width: 100%; height: auto; padding:0; background-color: #fff; }
.logo_head {display: block; position: relative; width: 100%; height: auto; background-color: #aba89a; padding: 60px 6vw 3vh 6vw;}
.logo_bild {display: block; position: relative; width: 100%; text-align: center; overflow: hidden; padding-bottom: 2vh;}
.logo_bild img {width: 70%; height: auto;}
.logo_txt  {display: block; position: relative; width: 100%; text-align:right; overflow: hidden;}
.logo_txt img {width: 100%; height: auto;}
.logo_zitat {display: block; position: relative; width: 100%; height: auto; padding: 20px 0 20px 20%; text-align:right; }
.unterschrift {display: block; position: relative; width: 100%; height: auto; font-size: 12px;}

.start, .kunden, .video_block, .bio, .kontakt, .impressum {display: block; position: relative; width: 100%; height: auto; padding: 6vh 6vw; float: none;}
	.start {padding-bottom: 0;}
.start_txt, .start_bild  {display: block; position: relative; width: 100%; height: auto; text-align:left; overflow: hidden;}
.start_bild {padding-top: 20px;}
.start_bild img {width: auto; height: 300px; max-width: 100%;}


.textcols {	display: block; position: relative; width: 100%; height: auto;  column-width: 25%; column-count: 4; column-gap: 4%;}
.kunden li {text-transform: uppercase; color: #aba89a;}

.video_block { background-color: #aba89a;}
iframe {width: 100%; height: auto;}
.kunden, .bio, .impressum {padding-top: 60px; padding-bottom: 60px;}

.bio_tab, .bio_bild {display: inline-block; position: relative; width: 100%; height: auto; padding:1vh 0; float: none;}
.bio_date {display: inline-block; position: relative; width: 20%; height: auto; padding:0 0 0 10px; float:left;}
.bio_txt {display: inline-block; position: relative; width: 79%; height: auto; padding:0; float:right;}

.bio_bild {text-align: center; overflow: hidden;  padding:3vh 0;}
.bio_bild_tab, .bio_bild_tab2 {display: inline-block; position: relative; width: 100%; height: auto; float: none; text-align: center; overflow: hidden; padding:0;}
.bio_bild_tab2 {width: 49%; float: left;}
.bio_bild img {width: auto; max-width: 90%; height: auto; padding:0.5vh 0;}

.impressum { background-color: #d9dada;}

input, textarea {font-family: Helvetica, Arial, sans-serif; font-size:14px; line-height:normal; padding: 1vh 1vw; width: 100%; height: auto; border: none;}
.fradio {width: auto;}
.fradio td {width: auto; padding-right: 2vw;}

.fradio input { padding: 0; width: auto; }
#Senden {width: auto; background-color: #fff; cursor: pointer; -webkit-border-radius:5px; border-radius:5px;}
.mail_error {color: red; font-weight: bold;}
.mail_ok {color:green; font-weight: bold;}


@media only screen and (min-width: 800px) {
	body {font-size: 16px; line-height:26px;}
	header li  { margin: 0 2vw;}
	.logo_head, .logo_bild, .logo_txt, .start, .start_txt, .start_bild {display: inline-block;}
	.logo_bild {width: 40%; text-align:left; padding-bottom: 0; float: left;}
	.logo_txt  {width: 59%; float:right;}
	.unterschrift {font-size: 14px;}
	.logo_txt img {width: auto;}
	.start_txt  {width: 59%; float: left;}
	.start_bild {width: 40%; float:right; text-align: right; padding: 0px 0px 0px 3vw;}
	.bio_bild_tab {width: 49%; float: left;}
	
	.f_logo {width: 30%;}
	.f_txt {width: 69%;}
	
	input, textarea {font-size: 16px; width: 80%;}
	
}



@media only screen and (min-width: 1200px) {
	body {font-size:18px; line-height:28px;}
	header {height: 75px; font-size:20px; line-height: 75px; }
	.logo_head {padding-top: 85px;}
	.logo_bild, .start_bild  {width: 30%; }
	.logo_txt, .start_txt  {width: 69%; }
	.logo_bild img {width: auto;}
	.logo_zitat {padding-left: 30%;}

	
	.kunden, .bio, .kontakt, .impressum {padding-top: 85px; padding-bottom: 85px;}
	
	.f_logo img {max-width: 70%;}
	input, textarea {font-size: 18px; width: 60%;}
	.bio_bild {padding:5vh 0;}

}

@media only screen and (min-width: 1600px) {
	body {font-size: 20px; line-height:30px;}
	header {height: 100px; font-size:22px; line-height: 100px; padding: 0 6vw; }
	.logo_head {padding: 110px 9vw 3vh 9vw;}
	.logo_zitat {padding-left: 40%;}
	.start, .kunden, .video_block, .bio, .kontakt, .impressum {padding: 9vh 9vw;}
	.start {padding-bottom: 0;}
	
	.kunden, .bio, .kontakt, .impressum {padding-top: 110px; padding-bottom: 110px;}
	.bio_date {width: 10%;}
	.bio_txt {width: 89%;}
	footer {padding: 6vh 9vw;}
	.f_logo img {max-width: 60%;}
	
	input, textarea {font-size: 20px; width: 50%;}
	

}