/* basics //////////////////////////////////// */
:root {
    --blau: #00d;
}

/* 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 {
    overflow: hidden;
    overflow-y: scroll;
	-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;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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

}

body, td {
	font:21px/28px source_sans_prolight,sans-serif;
}

/* layout */
.konsole {
	position:relative;
	width:calc(100vw - 100px);
	max-width:1600px;
	margin-left:auto;
	margin-right:auto;
}
.inhalt {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:auto;
	z-index:1;
}
.inhalt img {
	width:100%;
	height:auto;
	padding-top:200px;
	padding-bottom:4px;
	vertical-align:bottom;
}	
	
.logo {
	position:absolute;
	top:60px;
	left:0px;
	width:100%;
	z-index:11;
	background:url(bb-imgs/logo-gesundheitszentrum.png);
	background-size:280px auto;
	background-repeat:no-repeat;
	background-position:center top;
}



h1 {
	font:70px/80px source_sans_probold, sans-serif;
	text-align:center;
	text-transform:uppercase;
	color:rgb(131,166,59);
	padding-top:180px;
}

.angebotcontainer {
	width:100%;
	display:block;
}
h2 {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	font:17px/21px source_sans_prolight, sans-serif;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:0.1em;
	color:#fff;
	background-color:rgb(61,62,60);
	width:218px;
	padding:2px 0px 2px 0px;
	z-index:11;
}
span.abstand {/* leerzeichen */
	padding-right:4px;
}

.kachelcontainer {
	position:relative;
	margin-top:-25px;	
	z-index:1;
}
.kachel {
	position:relative;
	float:left;
	width:calc(50% - 2px);
	height:330px;
	background:rgb(131,166,59);
	margin-bottom:4px;
}
.kachel-apotheke, .kachel-therapiezentrum {
	margin-right:4px;
}
.kachel a {
	text-decoration:none;
	width:100%;
	height:100%;
	display:block;
}

.kachel-apotheke {
	background-image:url(bb-imgs/logo-apotheke.png);
	background-size:400px auto;
	background-repeat:no-repeat;
	background-position:center 100px;
}
.kachel-aerztezentrum {
	background-image:url(bb-imgs/logo-aerztezentrum.png);
	background-size:400px auto;
	background-repeat:no-repeat;
	background-position:center 100px;
}
.kachel-therapiezentrum {
	background-image:url(bb-imgs/logo-therapiezentrum.png);
	background-size:400px auto;
	background-repeat:no-repeat;
	background-position:center 83px;
}
.kachel-leer {
	background:rgba(131,166,59,0.5);
}

.fusszeile {
	clear:left;
	width:100%;
	padding:90px 0px 90px 0px;
	display:block;
	color:#fff;
	background-color:rgb(61,62,60);
	background-image:url(bb-imgs/logo-berge.png);
	background-size:80px auto;
	background-repeat:no-repeat;
	background-position:center 40px;
	font:15px/19px source_sans_prolight, sans-serif;
	text-align:center;
	
}
.fusszeile-leer {
	clear:left;
	width:100%;
	height:50px;
	display:block;
	font-size:1px;
	line-height:1px;
}

.clearer {
	width:100%;
	height:1px;
	display:block;
	clear:both;
}
	

/* responsive 
//////////////////////////////////////// */

@media only screen and (max-width: 1000px) {
	.konsole {
		width:calc(100vw - 50px);
	}
	.logo {
		top:40px;
		height:400px;
		background-size:200px auto;
	}
	.inhalt img {
		padding-top:140px;
	}	
	
	h1 {
		font:50px/58px source_sans_probold, sans-serif;
		padding-top:130px;
	}
	.kachel {
		height:280px;
	}
	.kachel-apotheke, .kachel-aerztezentrum, .kachel-therapiezentrum {
		background-size:320px auto;
		background-position:center 84px;
	}
	.kachel-therapiezentrum {
		background-position:center 74px;
	}
	.fusszeile-leer {
		height:25px;
	}
}


@media only screen and (max-width: 760px) {
	.konsole {
		width:calc(100vw - 40px);
	}
	.kachel {
		height:200px;
	}

	.kachel-apotheke, .kachel-aerztezentrum, .kachel-therapiezentrum {
		background-size:240px auto;
		background-position:center 60px;
	}
	.kachel-therapiezentrum {
		background-position:center 50px;
	}
	.fusszeile-leer {
		height:20px;
	}
}

@media only screen and (max-width: 600px) {
	.logo {
		top:20px;
		background-size:160px auto;
	}
	.inhalt img {
		padding-top:100px;
	}	
	
	h1 {
		font:40px/46px source_sans_probold, sans-serif;
		padding-top:105px;
	}
	.kachel {
		float:none;
		width:100%;
	}
	.kachel-apotheke, .kachel-aerztezentrum {
		margin-right:0px;
	}
	.kachel-leer {
		display:none;
	}
	.fusszeile {
		height:200px;
		padding:90px 0px 0px 0px;
	}
}

@media only screen and (max-width: 400px) {
	.konsole {
		width:calc(100vw - 20px);
	}
	h1 {
		font:36px/40px source_sans_probold, sans-serif;
		padding-top:100px;
	}
	.fusszeile-leer {
		height:10px;
	}

}