@charset "utf-8";
.header {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #42413C;
}

body {
	font-family:Ebrima, Arial;
	color:#222;
}

article {
	margin:0 auto 100px auto;
}

.footer {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #42413C;
}

h1 {
	margin-bottom:0.3em;
	}

h2, h3 {
	margin-top:2em;
	margin-bottom:0;
}

.logo {
	font-size:33px;
	line-height:5rem;
	font-weight:normal;
	font-color:#000;
	margin-left:0.3em;
}


table {
	padding:3px;
}


td {
	vertical-align:top;
}

/* Schriftgrößen */

html {
	font-size:10px;
}

article {
	font-size:1.4rem;
	line-height:2rem;
}


h1 {
	font-size:3rem;
	line-height:5rem;
	font-weight:normal;
	}

h1 + .lead {
	margin-top:3rem;
}

.lead {
	font-size:2rem;
	line-height:2.6rem;
}

h2 {
	font-size:2rem;
	color:#8c8c8c;
	font-weight:normal;
}

h3 {
	font-size:1.4rem;
}

h3 + p {
	margin-top:0;
}

/* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
a:link {
	color: #787878;
	text-decoration: none; /* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */
}
a:visited {
	color: #42413C;
}
a:hover, a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
	text-decoration: none;
	color: #9D3013;
}


@media screen and (min-width:540px) {
	
	html {
		font-size:11px;	
	}
	
}

@media screen and (min-width:600px) {
	
	html {
		font-size:12px;	
	}
	
}

@media screen and (min-width:650px) {
	
	html {
		font-size:13px;	
	}
	
	article {
		max-width:900px;	
	}
	
}