body {margin:0; padding:0; background-color:#fff; color:#000; font-size:medium;}

h1, h2, h3, h4, h5, h6 {font-size:medium; font-weight:normal;}

a {text-decoration:none; background-color:inherit;}
a:link {color:#0645AD;}
a:visited {color:purple;}
a:hover, a:focus {text-decoration:underline;}

/* externe Links */
a[rel~="external"]::after {padding-left:0.2em; content:url(externer-link.svg);}
/* a:link[rel~="external"] {color:#3366BB;} */

/* DL */
dl dt {font-weight:bold;}
dt {margin-top:0.5em;}
dt:first-child {margin-top:0;}

/* Table */
table {
	border-collapse:collapse;
	border:1px solid #cbcbcb;
	}
td,
th {
	text-align:left;
	border-width:0 0 1px 0;
	border-bottom:1px solid #cbcbcb;
	padding:0.5em;
}
tbody > tr:last-child > td {
	border-bottom-width:0;
}


/************************************/

/* Skip-Links */

.skiplinks {
	float:right;
	border:1px solid rgba(51, 51, 51, 0.5);
	border-top:none;
	border-right:none;
	border-bottom-left-radius:5px;
	font-size:small;
	margin-bottom:0.5em;
	overflow:hidden;
	}
.skiplinks div {
	display:inline-block;
	padding-right:5px;
	}
.skiplinks div:first-child {
	border-right:1px solid rgba(51, 51, 51, 0.5);
	padding-left:5px;
	}
.skiplinks a {
	opacity:0.5;
	background-color:inherit;
	color:#333;
	}
.skiplinks a:hover, 
.skiplinks a:focus {
	opacity:1;
	}

/* Site-Header */

.site-header {
	clear:right; /* für die Skip-Links */
	overflow:hidden;
	}

.logo {
	vertical-align:bottom;
	margin-left:3%;
	max-width:100%;
	height:auto;
	}

.site-name {
	margin:0;
	padding:0.5em 3%;
	font-size:small;
	background-color:#EBF6FC;
	color:inherit;
	}

/* Container (Inhalt + Navigation) */

.container {
	margin:2em 2em;
}

/*        */
/* Inhalt */
/*        */

main {
	display:block;
	margin:0 0 2em 0;
	font-size:large;
	line-height:1.4;
	padding:0 1em 1em 1em;
	border:1px solid #000;
	border-radius:10px;
	background-color:#fafdff;
	}
main h2 {
	font-size:xx-large;
	}
main h3 {
	font-size:x-large;
	}
main h4 {
	font-size:large;
	}
main section h4 {
	font-size:larger;
	}

/* Main-Header */
.post .main-header .parent {margin-bottom:0;}
.post .main-header .main-title {margin-top:0;}


/*            */
/* Navigation */
/*            */

.site-navigation {
	margin:0;
	line-height:1.4;
	}

.site-navigation a {
	text-decoration:none;
	color:inherit;
	}
.site-navigation a:hover, 
.site-navigation a:focus, 
.site-navigation a:active {
	text-decoration:underline;
	}
.site-navigation a:focus {
	outline:none;
	}

/* Navigation: Menu */

.menu,
.menu ul {
	list-style:none;
	margin:0;
	padding:0;
	border:1px solid #000;
	border-radius:10px;
	background-color:#EBF6FC; /* von DBSV: D6ECF8; Shade von Farbe des Männchens: B9EAFF; aus CD-Manual: EBF6FC */
	} 
.menu > li {
	border-top:1px solid #000;
	}
.menu > li:first-child {
	border-top:none;
	}
.menu > li > a, 
.menu > li.active > span {
	display:block;
	padding:0.5em 0 0.5em 1em;
	}
.menu > li a:hover,
.menu > li a:focus,
.menu > li a:active,
.menu > li.active,
.menu > li.active-trail {
	background-color:#fafdff;
	}
.menu > li:first-child > a:hover,
.menu > li:first-child > a:focus,
.menu > li:first-child > a:active,
.menu > li.active:first-child {
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	}
.menu > li:last-child > a:hover,
.menu > li:last-child > a:focus,
.menu > li:last-child > a:active,
.menu > li.active:last-child,
.menu > li.active-trail:last-child {
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	}
.menu > li.active-trail:last-child > a:hover,
.menu > li.active-trail:last-child > a:focus,
.menu > li.active-trail:last-child > a:active {
	border-radius:0;
	}
.menu > li.active-trail > a:hover,
.menu > li.active-trail > a:focus,
.menu > li.active-trail > a:active {
	text-decoration:underline;
	}

/* Navigation: Menu: Untermenü */
.menu > li > ul {
	border:0;
	border-radius:0;
	list-style-type:circle;
	list-style-position:outside;
	margin:0 0 0 2.5em;
	padding:1% 0;
	background-color:#fafdff;
	}
.menu > li.active > ul, 
.menu > li.active-trail > ul {
	border-bottom-right-radius:10px;
	}
.menu > li > ul > li {
	border:0;
	padding:0;
	margin:0 0 0.5em 0;
	background-color:#fafdff;
	}
.menu > li > ul > li.active {
	padding:0;
	margin:0 0 0.5em 0;
	list-style-type:disc;
	}
.menu > li > ul > li > a, 
.menu > li > ul > li.active > span {
	display:inline;
	padding:1% 0;
	margin:0;
	}
.menu > li > ul > li a:hover,
.menu > li > ul > li a:focus,
.menu > li > ul > li a:active {
	text-decoration:underline;
	}

/* Navigation: Pagination */

.pagination {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	flex-wrap:wrap;
	}
.pagination p {margin:0;}
.pagination p a {
	display:block;
	padding:0.5em 1em;
	border:1px solid #000;
	border-radius:10px;
	background-color:#EBF6FC;
	}
.pagination p a {font-weight:bold;}
.pagination p a .title {
	font-weight:normal;
	display:block;
	overflow:hidden;
	margin:0.5em 0 0 0;
	}
.pagination .older {
	text-align:left;
	order:1;
	}
.pagination .newer {
	text-align:right;
	order:2;
	}
.pagination.newest {justify-content:flex-start;}
.pagination.oldest {justify-content:flex-end;}


.post .site-navigation {text-align:center;}
.post .back {
	text-align:center;
	display:inline-block;
	margin:3em 0 1em 0;
	padding:1em;
	font-size:larger;
	}
.post .back a {
	border:1px solid #000;
	border-radius:10px;
	background-color:#EBF6FC;
	padding:1em;
	}

/***********************************/
/*** Zwei Spalten ******************/
/***********************************/
@media (min-width:50em) {

	/* Skip-Links */

	.skiplinks {
		margin-bottom:0;
	}

	/* Site-Header */

	.logo {
		margin-left:2em;
		font-size:medium;
		}

	.site-name {
		padding:1em 2em;
		font-size:medium;
		}

	/* Container (Inhalt + Navigation) */

	.page .container {
		position:relative; 
		margin:2em 2em;
	}

	/* Inhalt */

	.page main {
		margin:0 0 0 28%;
		padding:0 2em 1em 2em;
		}
	.page main > article,
	.page main > section {
		max-width:50em;
	}

	/* Navigation */

	.page .site-navigation {
		width:25%;
		position:absolute;
		top:0;
		overflow:hidden;
		}

}

/***********************************/
/******** Globales Klassen *********/
/***********************************/

/* für figure, aside, etc. */
.box {padding:1% 3%; margin:0 0 1em 0; border:1px solid #efefef; box-shadow:0 1px 4px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 0, 0, 0.06) inset;}
.box img {display:block; margin:1em 0; max-width:100%;}
.box audio {display:block;}

/* für Related-Boxen */
.related {
	display:inline-block;
	padding:1% 3%; margin:0 0 1em 0; border:1px solid #efefef; box-shadow:0 1px 4px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 0, 0, 0.06) inset;
	}
.related .related-kategorie {
	display:inline-block;
	padding-right:1em;
	font-weight:bold;
	}

/* für Bilder-Boxen */

.media {margin:0.25em; padding:1em; display:inline-block; text-align:center;}
.media img {max-width:100%; display:inline-block;}
.media.big figcaption {max-width:700px;}
.media.medium figcaption {max-width:350px;}
.media.small figcaption	{max-width:250px;}

/***********************************/
/******** seitenspezifisch *********/
/***********************************/

/* Startseite */

.intro {margin-bottom:1.5em; font-size:x-large;}

.guide {margin-bottom:3em;}
.guide section {min-height:100px; margin-bottom:2em;}
.guide-betroffen {padding-left:150px; background-image:url(blind-sehbehindert.svg); background-repeat:no-repeat; background-position:1em center;}
.guide-helfen {padding-left:150px; background-image:url(helfen.svg); background-repeat:no-repeat; background-position:1em center;}
.guide-erfahren {padding-left:150px; background-image:url(verein.svg); background-repeat:no-repeat; background-position:1em center;}

/* Tagebuch-Übersicht */

.teaser {margin-bottom:2em; padding:1em;}
.teaser, .teaser h4, .teaser p {overflow:hidden;} /* fuer IE: _overflow:visible; zoom:1; */
.teaser img {float:left; margin:0 1em 0 0; display:block;}
.teaser h4 {margin:0; font-size:x-large;}