@font-face {
    font-family: TypgerechtAleo;
    src: url("fonts/typgerechtaleo-regular-webfont.eot") format("eot");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: TypgerechtAleo;
    src: url("fonts/typgerechtaleo-regular-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: TypgerechtAleo;
    src: url("fonts/typgerechtaleo-italic-webfont.eot") format("eot");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: TypgerechtAleo;
    src: url("fonts/typgerechtaleo-italic-webfont.woff") format("woff");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: TypgerechtAleo;
    src: url("fonts/typgerechtaleo-bold-webfont.eot") format("eot");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: TypgerechtAleo;
    src: url("fonts/typgerechtaleo-bold-webfont.woff") format("woff");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: TypgerechtAleo;
    src: url("fonts/typgerechtaleo-bolditalic-webfont.eot") format("eot");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: TypgerechtAleo;
    src: url("fonts/typgerechtaleo-bolditalic-webfont.woff") format("woff");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: TypgerechtAleo;
    src: url("fonts/typgerechtaleo-light-webfont.eot") format("eot");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: TypgerechtAleo;
    src: url("fonts/typgerechtaleo-light-webfont.woff") format("woff");
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: TypgerechtAleo;
    src: url("fonts/typgerechtaleo-lightitalic-webfont.eot") format("eot");
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: TypgerechtAleo;
    src: url("fonts/typgerechtaleo-lightitalic-webfont.woff") format("woff");
    font-weight: 200;
    font-style: italic;
}


html, body {
	border: 0;
	font-family: inherit;
	font-family: TypgerechtAleo,sans-serif;
	font-size: 105%;
	font-style: inherit;
	font-weight: inherit;
	outline: 0;
	vertical-align: baseline;
	letter-spacing: 0.0325em;
	position:relative;
}
html {
	overflow-y:scroll;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}

h1 {
	font-size:1.6em;
	font-weight:200;
}
h2 {
	font-size:1.2em;
	font-weight:normal;
}

p,
ol,
ul {
	line-height:1.65em;
}
p {
	-moz-hyphens:auto;
	-webkit-hyphens:auto;
	hyphens:auto;
}
.vorspann {
	font-size:1.1em;
	font-weight:normal;
	line-height:1.3em;
	color:#6b89cb;
}
article {
	padding-right:10px;
	padding-left:10px;
	width:100%;
	max-width:900px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
header h1 {
	background:url(images/logoechttypgerecht600.jpg) no-repeat;
	background-size: contain;
	width:100%;
	height: 0;
    padding-bottom: 40%;
    margin-top:0;
	text-indent:-9999px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

section {
	color:#264c97;	
	padding-top:10px;
	padding-bottom:60px;
	background:url(images/streifenhg.jpg) no-repeat bottom;
	background-size: 100% 10px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
section:nth-of-type(even) {
	color:#ddd;
	background:#941179 url(images/streifenhg2.jpg) no-repeat bottom;
	background-size: 100% 10px;
}
section h1 {
	color:#941179;
	margin-bottom:5px;
	padding-bottom:0;
}
section h1.first {
	margin-top:10px;
}
section li, section b {
	color:#163476;
}
section:nth-of-type(even) h1,
section:nth-of-type(even) li,
section:nth-of-type(even) b {
	color:#fff;
}
section:nth-of-type(even) h2 {
	color:#e967fa;
}
section h2 {
	color:#163476;
	margin-top:0;
	padding-top:0;
}
.referenzen p:first-letter {
	font-size:2em;
	letter-spacing: 0.05em;
	color:#fff;
}

.referenzen p {
	padding-top:2em;
}

.referenzen i {
	color:#400030;
}

ul {
	padding-left:1em;
}
table {
	margin:0 auto;
	border-collapse:seperate;
	border-radius:5px;
}
thead {
	text-align:left;
	background:#fff;
	color:#163476;
}
tbody {
	color:#fff;
}
tr, td, th {
	border-bottom:none;
}
th, td {
	padding:0.4em;
	vertical-align:bottom;
	border-radius:5px;
}

td {
	font-weight:200;
	color:#fff;
}

tbody tr {
	background:#6b89cb;
}
tbody tr:nth-of-type(odd) {
	background:#8dabed;
}

section:nth-of-type(even) thead {
	background:#941179;
	color:#fff;
}

section:nth-of-type(even) tbody tr {
	background:#c456b4;
}
section:nth-of-type(even) tbody tr:nth-of-type(odd) {
	background:#e678d6;
}

.smalltable {
	width:100%;
}
.smalltable,
.smalltable thead,
.smalltable tbody,
.smalltable th,
.smalltable td,
.smalltable tr {
	display: block;
	margin:0;
	border-radius:5px;
}
.smalltable thead tr {
	position:absolute;
	top:-9999px;
	left:-9999px;
}
.smalltable tr {
	margin-bottom:10px;
}
.smalltable td {
	position:relative;
	padding-left:80%;
}
.smalltable td:nth-of-type(4) {
	font-weight:bold;
}
.smalltable td:before {
	position:absolute;
	left: 6px;
	width: 75%; 
	padding-right: 10px; 
	white-space: nowrap;
	content:attr(data-label);
}
.bold {
	font-weight:bold;
}






@media only screen and (min-width: 600px) {
header {
	position:relative;
}
header h1 {
	background:#941179 url(images/logoechttypgerecht.jpg) no-repeat bottom left;
	height:226px;
	padding:0;
}
nav {
	position:absolute;
	top:260px;
	left:0;
	background:rgba(255,255,255,0.8);
	padding:7px 7px 5px 0;
	border-bottom-right-radius:5px;
	border-top-right-radius:5px;
}
nav a {
	font-size:0.69em;
	line-height:1.95em;
	font-weight:200;
	text-transform:uppercase;
	text-decoration:none;
	color:#941179;
	border-bottom:1px dotted #941179;
	display:block;
	padding-left:20px;
}
nav a:nth-of-type(8),
nav a:nth-of-type(9) {
	border-bottom:none;
}
nav a:hover, nav a:focus, nav a:visited {
	font-weight:bold;
}
article {
	padding-left:230px;
	padding-right:10px;
}


ul {
	padding-left:3em;
}


.smalltable table {
	display:table;
	width:auto;
	margin:0 auto;
}
.smalltable td, .smalltable th {
	display:table-cell;
	padding:0.4em;
}
.smalltable tr {
	display:table-row;
}
.smalltable tbody {
	display:table-row-group;
}
.smalltable thead {
	display:table-header-group;
}
.smalltable thead tr {
	position:relative;
	top:0;
	left:0;
}
.smalltable td {
	position:relative;
}
.smalltable td:nth-of-type(4) {
	font-weight:normal;
}
.smalltable td:before {
	position:relative;
	left: 0px;
	width: 0%; 
	padding-right: 0px; 
	white-space: nowrap;
	content:"";
}
.smalltable,
.smalltable thead,
.smalltable tbody,
.smalltable th,
.smalltable td,
.smalltable tr {
	border-radius:0px;
	width:auto;
	margin:2px;
}



}