@font-face {
	font-family:'charter';
	src:url('charter_bold_italic-webfont.woff2') format('woff2'),url('charter_bold_italic-webfont.woff') format('woff');
	font-weight:700;
	font-style:italic;
}

@font-face {
	font-family:'charter';
	src:url('charter_bold-webfont.woff2') format('woff2'),url('charter_bold-webfont.woff') format('woff');
	font-weight:700;
	font-style:normal;
}

@font-face {
	font-family:'charter';
	src:url('charter_italic-webfont.woff2') format('woff2'),url('charter_italic-webfont.woff') format('woff');
	font-weight:400;
	font-style:italic;
}

@font-face {
	font-family:'charter';
	src:url('charter_regular-webfont.woff2') format('woff2'),url('charter_regular-webfont.woff') format('woff');
	font-weight:400;
	font-style:normal;
}

/* ab hier stehen Farben, und Angaben, die für das gesamte Dokument gelten und unabhängig vom Flow oder Layout sind. Das sind besonders Text Herforhebungen.*/
body {
	color:#303030;
	background-color:#fff;
	font-size:1em;
	font-family:charter,serif;
	text-rendering:optimizeLegibility;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

nav {
	font-weight:400;
}

a:active, a:link, a:hover, a:visited {
	color:#000;
	text-decoration:none;
	background-color:#f7f7f7;
	background-color:rgba(127,127,127,0.15);
/*	border-bottom:0.03em solid currentcolor;*/
	border-radius:.3em;
	padding:0 0.0em;
}

a:active, a:hover {
	background-color:#efefef;
	background-color:rgba(127,127,127,0.25);
}

h1 {
	font-size:1.1em;
	font-weight:700;
}

h2, h3, h4 {
	color:#000;
	font-weight:400;
}

h2 {
	font-size:1.1em;
}

h3 {
	font-size:1.05em;
}

h4 {
	font-size:1.0em;
}

em {
	color:#000;
	font-style:italic;
	font-weight:400;
}

ul {
	padding:0;
}

figure a:active {
	background-color:#fff;
	background-color:rgba(127,127,127,0);
}

figure a:link {
	background-color:#fff;
	background-color:rgba(127,127,127,0);
}

figure a:hover {
	background-color:#fff;
	background-color:rgba(127,127,127,0);
}

header a:active {
	background-color:#fff;
	background-color:rgba(127,127,127,0);
}

header a:link {
	background-color:#fff;
	background-color:rgba(127,127,127,0);
}

header a:hover {
	background-color:#fff;
	background-color:rgba(127,127,127,0);
}

/* ab hier stehen Normalisierungen und sonstige Behelfs-Definitionen.*/
ul,ol,li,dl,dt,dd {
}

/* ab hier stehen Angaben für logische Abschnitte des Dokuments, die unabhänging vom Flow oder Layout sind. */
body {
	padding:0;
	margin:4%;
}


h1, h2, h3, h4 {margin-block-start:1.1em;
margin-block-end:0.6em;
}
p, ul {margin-block-start:0.6em;
margin-block-end:0.6em;
}


figure {
	width:100%;
	margin:0;
	display:flex;
	justify-content:space-around;
}

main img {
	max-height:12em;
}

.breit {
	width:100%;
	height:auto;
}

img.ende {
	width:auto;
	height:.8em;
}

.kringel {
	width:18em;
	height:intrinsic; /* Safari/WebKit verwendet einen nicht standardisierten Namen */
}

header {
	display:flex;
	justify-content:center;
	align-items:center;
	/*margin-bottom: 2%;*/

}
nav {
	/*margin-bottom: 2%;*/
}

main ul {
	padding-left:1em;
}

nav ul {
	list-style:none;
	display:flex;
	justify-content:space-between;
}

aside ul {
	list-style:none;
}

nav li {
/*background-color: fuchsia;*/
}

aside {
	color:#000;
	font-size:.9em;
	font-style:italic;
}

footer {
	font-size:.9em;
	font-style:normal;
	text-align:center;
}

footer ul {
	list-style:none;
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
}

footer li {
	margin:0.2em;
}

/* ab hier stehen Angaben, die abhängig vom Flow oder Layout sind.*/
body {
	max-width:80em;
	line-height:1.4em;
	display:grid;
	grid-gap:.5em 1em;
	gap:.5em 1em;
	grid:
	"header" min-content
	"navi__" min-content
	"bilder" min-content
	"main__" min-content
	"aside_" min-content
	"footer" min-content
	/1fr;
}

header {
	grid-area:header;
}

nav {
	grid-area:navi__;
}

#bilder {
	grid-area:bilder;
}

main {
	grid-area:main__;
}

aside {
	grid-area:aside_;
}

footer {
	grid-area:footer;
}

article {
	grid-area:articl;
}

section {
	grid-area:sectio;
}

#leer {
	grid-area:leer__;
}

@media (min-width:24em) {
	body {
		line-height:1.4em;
	}
	
	nav a:active, nav a:link, nav a:hover, nav a:visited {
		padding:.2em 1em;
	}
h1 {
	font-size:1.2em;
}

h2 {
	font-size:1.2em;
}

h3 {
	font-size:1.1em;
}

h4 {
	font-size:1.05em;
}

	
}

@media (min-width:32em) {
body {
	grid:
	"header header"
	"navi__ navi__"
	"bilder bilder"
	"main__ aside_"
	"footer footer"
	/1fr 10em;
}

	nav a:active, nav a:link, nav a:hover, nav a:visited {
		padding:.2em 1.5em;
	}
	
}

@media (min-width:36em) {
.kringel {
	width:50%;
}
}


@media (min-width:62em) {
	body {
		grid:
		"header header header"
		"navi__ navi__ navi__"
		"bilder bilder bilder"
		"footer main__ aside_"
		/14em 1fr 10em;
	}
	footer {
		font-style:normal;
		text-align:left;
		margin-top:1em;
	}

	footer ul {
		list-style:none;
		display:block;
		justify-content: normal;
		flex-wrap: wrap;
	}
	footer a:active, footer a:link, footer a:hover, footer a:visited {
		padding:.0em .2em;
		font-weight:400;

	}


}


aside {
}

* html main {
	height:1em;
/* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
}