/* 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;
}

body {
	margin:0px;
	padding:0px;
	text-align:center;
	background:#fff;
}
@font-face {
    font-family: 'barlowbold';
    src: url('bb-schriften/barlow-bold-webfont.eot');
    src: url('bb-schriften/barlow-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/barlow-bold-webfont.woff2') format('woff2'),
         url('bb-schriften/barlow-bold-webfont.woff') format('woff'),
         url('bb-schriften/barlow-bold-webfont.ttf') format('truetype'),
         url('bb-schriften/barlow-bold-webfont.svg#barlowbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'barlowmedium';
    src: url('bb-schriften/barlow-medium-webfont.eot');
    src: url('bb-schriften/barlow-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/barlow-medium-webfont.woff2') format('woff2'),
         url('bb-schriften/barlow-medium-webfont.woff') format('woff'),
         url('bb-schriften/barlow-medium-webfont.ttf') format('truetype'),
         url('bb-schriften/barlow-medium-webfont.svg#barlowmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'barlowregular';
    src: url('bb-schriften/barlow-regular-webfont.eot');
    src: url('bb-schriften/barlow-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/barlow-regular-webfont.woff2') format('woff2'),
         url('bb-schriften/barlow-regular-webfont.woff') format('woff'),
         url('bb-schriften/barlow-regular-webfont.ttf') format('truetype'),
         url('bb-schriften/barlow-regular-webfont.svg#barlowregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'barlowlight';
    src: url('bb-schriften/barlow-light-webfont.eot');
    src: url('bb-schriften/barlow-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('bb-schriften/barlow-light-webfont.woff2') format('woff2'),
         url('bb-schriften/barlow-light-webfont.woff') format('woff'),
         url('bb-schriften/barlow-light-webfont.ttf') format('truetype'),
         url('bb-schriften/barlow-light-webfont.svg#barlowlight') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* layout */

.konsole {
	position:relative;
	width:800px;
	margin-right:auto;
	margin-left:auto;
	margin-top:calc(50vh - 365px);
	display:block;
	text-align:left;
}
.spalte {
	width:50%;
	float:left;
}
.container {
	height:290px;
	width:100%;
	padding:30px 30px 35px 30px;
}
.container-1 {
	padding:26px 0px 0px 32px;
}
.container-2 {
	height:440px;
	padding:37px 30px 35px 30px;
	color:#000;
	background:rgb(243,244,238);
}
.container-3 {
	color:#fff;
	background:rgb(182,98,92);
}
.container-4 {
	height:440px;
	color:#fff;
	background:rgb(29,110,111);
}
.logo {
	width:260px;
	height:165px;
	display:block;
	background:url(bb-imgs/logo-aerztezentrum-saastal.png);
	background:url(bb-imgs/logo-aerztezentrum-saastal.svg), linear-gradient(transparent, transparent);
	background-size:100% auto;
}

/*textformate */
body {
	font:16px/24px barlowregular, sans-serif;
	letter-spacing:0.05em;
}
h1 {
	font:16px/24px barlowregular, sans-serif;
	margin-bottom:0px;
	font-weight:normal;
}
h2 {
	font:24px/32px barlowlight, sans-serif;
	margin-bottom:12px;
	font-weight:normal;
}
h3 {
	font:20px/30px barlowbold, sans-serif;
	margin-bottom:0px;
	font-weight:normal;
}
p {
	margin-bottom:24px;
}
.container-4 p {
	margin-bottom:24px;
}
p.abstand-oben {
	padding-top:3px;	
}
span.auszeichnung {
	color:rgb(182,98,92);
	padding-right:6px;
}
span.fett {
	font:20px/30px barlowbold, sans-serif;
}
.container-3 span.auszeichnung,
.container-4 span.auszeichnung {
	color:rgb(226,192,190);
}

a {
	color:#000;
	text-decoration:none;
}
.container-3 a, .container-4 a {
	color:#fff;
}


/* RESPONSIVE */
@media only screen and (max-height: 768px) and (min-width: 820px){
	.konsole {
		margin-top:20px;
	}
}
@media only screen and (max-width: 819px){
	.konsole {
		margin-top:0px;
		width:100%;
	}
	.spalte {
		float:none;
		width:100%;
	}
	.container {
		padding:35px 0px 35px 0px;
	}
	.container-1 {
		height:230px;
		padding:63px 0px 0px 0px;
	}
	.container-2 {
		height:290px;
	}
	.spalte .container .innen {
		width:280px;
		position:relative;
		margin-left:auto;
		margin-right:auto;
	}
	.spalte .container-1 .innen {
		padding:0px 0px 0px 100px;
	}
	.logo {
		width:180px;
		height:114px;
	}
}