/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v28-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-500 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/open-sans-v28-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v28-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v28-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v28-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v28-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v28-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v28-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v28-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v28-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v28-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v28-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v28-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v28-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v28-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v28-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v28-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v28-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v28-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v28-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v28-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v28-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v28-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v28-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v28-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v28-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v28-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v28-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v28-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v28-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v28-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* Farben --------------
Logoblau: #1c355e
Logogrün: #a4c13c
Orange: #f58025
Hintergrund warmer Ton: #faefd2
Hintergrund kalter Ton: #f4f4f4
-------------- */

/* Allgemeine Angaben -------------- */
html, body { height: 101%; }
body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: .9375rem;
	line-height: 1.2;
	color: #6e6e6e;
	/*background-color: #efeef3;*/
	/*background-color: #faefd2;*/
	/*background-color: #f4f4f4;*/
	background-color: #ffffff;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;	
}
.clearfix {
	clear:both;
	height: 0;
	margin: 0;
	padding: 0;
}
img, a img { border:0; }
img {
	max-width: 100%;
	height: auto;
}
img { width: auto; /* IE8 */ }
/* abstand zum div nach unten raus */
img { vertical-align: bottom; }

/* Allgemeine Formatierung -------------- */
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.justify { text-align: justify; }
.uppercase { text-transform: uppercase; }
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
.yellow { background-color: yellow; }

/* Schriften -------------- */
h1, h2, h3 {
	font-size: 1.5rem;
	font-weight: 400;
	/*color: #a4c13c;*/
	color: black;
}
p {
	padding: 0 0 .5rem 0;
	word-break: break-word;
}
a:active,
a:focus {
	outline: none;
}
a:link,
a:visited {
	font-weight:400;
	text-decoration: none;
	color: #f58025;
	transition: all .5s;
}
a:hover,
a:active {
	text-decoration: none;
	color: #1c355e;
}
a.indexlink { border: none; }

/* Container -------------- */
#wrapper {
	margin: 0 auto;
	padding:0;
	width:70%;
}
.col {
	/*background: #ccc;*/
	padding:0;
	text-align:left;
}
/* Inhalte -------------- */
/* Header mit Logo und Adresszeile --------------*/
.header {
	padding:.5em 0;
}
.header h3 {
	font-size: 1.2rem;
	font-weight:400;
	color: #1c355e;
}
.header a:link,
.header a:visited {
	font-weight:400;
	text-decoration: none;
	color: #1c355e;
	transition: all .5s;
}
.header a:hover,
.header a:active {
	text-decoration: none;
	color: #f58025;
}
/* Backup
.headerall {
	display:inline-block;
	width:100%;
	height:45%;
	background-size: 100% auto;
	background-position: 100% 20%;
	background-repeat:no-repeat;
}
*/
.headerall {
	display:inline-block;
	width:100%;
	height:60%;
	background-size:cover;
	background-position: 50% 0%;
	background-repeat:no-repeat;
}

#buettnerhaus { background-image:url(../images/proba-gmbh-freudenstadt-promenadeplatz.jpg); }
#empfang { background-image:url(../images/proba-gmbh-empfang.jpg); }
#buecher { background-image:url(../images/proba-gmbh-buecherreihe.jpg); }
#besprechung { background-image:url(../images/proba-gmbh-besprechungsraum.jpg); }
#buettnerhaus2 { background-image:url(../images/proba-gmbh-buettnerhaus.jpg); }
#freudenstadtherbst { background-image:url(../images/proba-gmbh-freudenstadt-herbst.jpg); }
#mitarbeiter { background-image:url(../images/proba-gmbh-mitarbeiter.jpg); }

/* Navigation -------------- */
.topnav {
	overflow: hidden;
	background-color: #fff;
	margin-top:-4px;
}

.topnav a {
	float: left;
	display: block;
	color: black;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 16px;
}

.topnav a:hover {
	background-color: #f58025;
	color: white;
}

.topnav a.active {
	background-color: #f58025;
	color: white;
}
/* Icon ausblenden */
.topnav .icon {	display: none;	}

@media screen and (max-width: 600px) {
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon { float: right; display: block; }
}

@media screen and (max-width: 600px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon { position: absolute;right: 0;top: 0;	}
	.topnav.responsive a { float: none;display: block;text-align: left;	}
}

/* Content -------------- */
#content {
	margin:0.5% 0;
	display: inline-block;
	min-height: 40%;
	width: 100%;
}
span.headline {
	display:inline-block;
	font-size:2.5rem;
	font-weight:200;
	padding: 1rem 0;
	/*color: #eb5200;*/
	/*color: #a4c13c;*/
	color: black;
}
span.subheadline {
	font-size:1.2rem;
	line-height:1.4;
	font-weight:400;
	display:block;
	margin-bottom:1rem;
}
#content hr {
	width: 75px;
	border-top-width: 2px;
	border-color: #f58025;
}
#content p {
	font-size: 1.2rem;
	line-height: 1.4;
}

div.brille {
	display:inline-style;
	width: auto;
	height: 14rem;
	background-image:url("../images/brille.png");
	background-position: 0 100%;
	background-repeat: no-repeat;
}

#content ul {}
#content ul li {
	font-size: 1.2rem;
	line-height: 1.4;
	margin-left:1rem;
}

#content strong {
	font-weight: 400;
	color: black;
}

/* Über uns -------------- */
#content figure img { 
	width: 100%; 
	margin: 0 auto;
}

#content div.team {
	background: white;
	height: 900px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#content div.team figure,
#content div.team figure img { margin-bottom: 1rem; }
#content div.team figure figcaption { margin: 0 1rem; }

#content ul.vita { 
	margin: 0 auto; 
	padding: 0 1rem; 
}

#content ul.vita li { 
	font-size: 100% !important; 
	line-height: 1.2;
	list-style-type: none;
	padding: 0 0 .875rem 0;
	margin-left: 0;
}

/* Leistungen -------------- */
.boxleistungen {
	border-left: 1px solid darkgray;
	padding:0 1rem 1rem 1rem;
}

/* Impressum -------------- */
#content.impressum p {
	font-size: .875rem;
}
/* Datenschutz -------------- */
#content.datenschutz h3, 
#content.datenschutz p,
#content.datenschutz ul.dsgvo li {
	font-size: .875rem;
}
/* Karte -------------- */
#karte {
	display:inline-block;
	width:100%;
	height:40%;
	background-image:url(../images/proba-gmbh-karte.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-position: 100% 95%;
}
/* Trenner -------------- */
#trenner {
	display:inline-block;
	width:100%;
	height:120px;
	background-image:url(../images/proba-gmbh-hintergrund-orange.jpg);
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:cover;
	margin:1rem 0;
}
div.transparent {
	display:inline-block;
	width:100%;
	height:120px;
	background-color:rgba(255,255,255,0.8);
}
div.trenner-text {
	width:100%;
	height:120px;
	display: -webkit-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
}
div.trenner-text span.headline {
	font-size: 1.4rem; 
	font-weight: 400;
}
/* Footer -------------- */
#footer { margin:1% 0; }
#footer img.logo { width:80%;height:auto; }
h3.footer {
	font-size:1.2rem;
}
#footer hr {
	width:75px;
	border-top-width:2px;
	border-color:#a4c13c;
}
ul.footernavi {

}
ul.footernavi li {
	list-style-type: none;
	padding: 0;
}
ul.footernavi li a:link,
ul.footernavi li a:visited,
#footer a:link,
#footer a:visited {
	font-size: .875rem;
	color: black;
	transition: all .5s;
}
ul.footernavi li a:hover,
ul.footernavi li a:active,
#footer a:hover,
#footer a:active {
	font-size: .875rem;
	color: #f58025;
	border-bottom: 0;
}
/* Zeile Copyright -------------- */
#copyright {
	background-color:#1c355e;
	text-align: left;
}
#copyright p {
	color:white;
	line-height:1.6;
	padding: 1rem 0;
}
/* -----------------------
Responsive 
----------------------- */
@media only screen and (max-width: 1280px) {
	#wrapper { width: 96%; margin: 0 auto; }
	/*div.headerall { height:13%; }*/
	#content div.team { height: 960px; }
}
@media only screen and (max-width: 890px) {
	#content div.team { height: 1020px; }
}
@media only screen and (max-width: 860px) {
	#content div.team { height: 1050px; }
}
@media only screen and (max-width: 810px) {
	#wrapper { width: 96% !important; margin: 0 auto; }
	div.col.span_1_of_5 { width: 32.26%; }
	/*div.headerall { height:28%; }*/
	#karte { background-position: 50% 50%; }
	#content div.col.span_1_of_4 { width: 97%; }
	#content div.col.span_2_of_4 { width: 97%; }
	#content div.col:first-child { margin-left: 1.6%;  }
	#content div.col.span_1_of_2 { width: 97% }
	#content div.col.span_1_of_3 { width: 97% }
	#content.ueberuns div.col.span_1_of_4 { width: 48.2%; }
}
@media only screen and (max-width: 670px) {
	#content div.team { height: 900px; }
}
@media only screen and (max-width: 630px) {
	div#navi { display: block; }
}
@media only screen and (max-width: 480px) {
	#wrapper { width: 96%; margin: 0 auto; }
	.col { margin-left: 1%; }
	div.col.span_1_of_5 { width: 100% !important; }
	div.col.span_1_of_4 { width: 96% !important; }
	div.col.span_2_of_4 { width: 100% !important; }
	div.col.span_1_of_3 { width: 100% !important; }
	div.col.span_1_of_2 { width: 100% !important; }
	div.header img.logo, #footer img.logo { width: 50%; height: auto; margin-bottom: 2rem;  }
	#content div.team { height: 980px !important; }
	/*div.trenner-text { padding:0; }*/
	div.trenner-text span.headline { font-size: 1.1rem; font-weight: 400; }
}