/*
#a6cee3	hellblau
#1f78b4 dunkelblau
#b2df8a hellgrün
#33a02c dunkelgrün
*/
* {
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}
p, li, td, th {
	font-size: 1.2em;
	-webkit-hyphens: auto;
	hyphens: auto;
}
p {
	padding: 2px!important;
	margin: 2px;
}
.bio {
	list-style-type: disc!important;
	list-style-position: outside;
	padding-left: 20px;
	display: box;
}
.bio2 {
	font-size: 1em!important;
	/*list-style-type: disc!important;
	list-style-position: outside;
	padding-left: 20px;
	display: box;*/
}
/*.bio::before {
	content: "* ";
}*/
a {
	color: #1f78b4;
}
#detail h1 {
	font-size: 1.6em;
	background: #1f78b4;
	color: #fff;
	padding: 2px;
	margin: 2px;
	line-height: 2em;
}
#detail h2 {
	font-size: 1.4em;
	background: #a6cee3;
	color: #111;
	padding: 2px;
	margin: 2px;
	line-height: 1.8em;
}
#detail h3, .th3 {
	font-size: 1.2em;
	background: #1f78b4;
	color: #fff;
	padding: 2px;
	margin: 2px;
	font-style: italic;
	font-weight: bold;
	text-align: left;
	line-height: 1.5em;
}
#detail h4, .th4 {
	font-size: 1.2em;
	background: #a6cee3;
	color: #1f78b4;
	padding: 2px;
	margin: 2px;
	font-style: italic;
	/*font-weight: bold;*/
	text-align: left;
	line-height: 1.5em;
}
th {
	width: 1em;
}
td, th {
	background: #f3f3f3;
	padding: 2px;
	/*font-size: 0.8em;*/
}
table, th, td {
	border: none;
}
table {
	width: 100%;
}
.q {
	font-size: 1em!important;
	line-height: 1.3em;
}
sup {
	font-size: 0.9em!important;
}
span.q, span.q a {
	/*line-height: 0.8em;*/
	padding: 0;
	margin: 0;
	display: inline;
}
/*.q td:hoverX, */
.q2x:hover, .curs:hover {
	background: #b6def3;
}
.q td, .q th {
	padding: 1px;
}
.q td a. .q td span {
	padding: 0px;
	border-spacing: 0;
}
.hervor {
	font-weight: bold;
	color: #1f78b4;
}
span.curs, span.curs:hover {
	cursor: help;
}
span.curs:hover {
	background: #b6def3;
}
.q2 {
	line-height: 0.8em;
	font-size: 0.7em;
}
.q2 span, .q2 a {
	/*line-height: 0.8em;*/
	font-size: 1em;
}

#top {
	background-color: #33a02c; /* /später freigeben - überdeckt sonst Fehler */
	position: absolute;
	top: 0;
	height: 1.2em;
	width: 100%;
	margin: 0;
	padding: 0;
	/*text-align: right;*/
	overflow: hidden;
	vertical-align: bottom;
}
#topright {
	position: relative;
	float: right;
}
#suchen {
	display: none;
}
nav {
	background-color: #33a02c;
	position: absolute;
	/*float: right;*/
	bottom: 1.2em;
	/*left: 900px;*/
	max-width: 20%;*/
	left:0;
	top: 1.2em;
	height: Auto;
	width: 16.67%;
	/*border: 2px blue solid;*/
}
section {
	position: absolute;
	top: 1.2em;
	bottom: 1.2em;
	left: 16.67%;
	right: 16.67%;
	/*width: 700px;*/
	width: 66.66%;
	overflow: auto;
	/*overflow: auto;*/
}
section#sec100 {
	left: 0;
	right: 0;
	width: 100%;
}
aside {
	background-color: #33a02c;
	position: absolute;
	/*float: right;*/
	bottom: 1.2em;
	/*left: 900px;*/
	/*max-width: 20%;*/
	right:0;
	top: 1.2em;
	height: Auto;
	width: 16.67%;
	/*border: 2px red solid;*/
}
/*#bottom {
	background-color: #33a02c;
	position: absolute;
	bottom: 0;
	height: 1.2em;
	width: 100%;
	text-align: center;
	vertical-align: baseline;
}
#bottom a {
	color: #b2df8a;
}
#bottom a:visited {
	color: #fff;
}
#bottom a:focus, a:hover {
	background-color: #eee;
	color: #1f78b4!important;
}*/
/*#datenbilder {
	position: float;
	float: left;
	width: 75%;
	/ *border: solid blue 1px;* /
}*/
/*#daten {
	position: float;
	float: left;
	width: 50%;
	/ *border: solid cyan 2px;* /
}
#daten100 {
	position: float;
	float: left;
	width: 100%;
	/ *border: solid cyan 2px;* /
}
#bilder {
	position: float;
	float: left;
	width: 50%;
	/ *clear:both;* /
	/ *border: solid red 5px;* /
}*/
#bilder img {
	width:100%;
}
/*#quellen {
	position: float;
	float: left;
	width: 25%;
}*/
html|* > svg {
    transform-origin: 50% 50% 0px;
}

/* * {
    transform-origin: 0px 0px 0px;
}*/

.icon {
	width: 1.2em;
	height: 1.2em;
	stroke: red;
	right: 0;
	/*box-sizing: border-box;
	z-index: 10;*/
}

.icon:hover {
	stroke: yellow;
}
.srchfld {
	position: relative;
	width: 200px;
	height: 20px;
	margin-top: 2px;
	margin-left: 3px;
	box-sizing: border-box;
	vertical-align: top;
}



/*@media only screen and (max-width: 1024px) {
	#daten, #daten100, #bilder {
		position: relative;
		float: left;
		width: 100%;
	}
}*/
/*@media only screen and (max-width: 768px) {
	section {
		position: relative;
		top: Auto;
		bottom: Auto;
		left: auto;
		right:auto;
		width: 100%;
		overflow: auto;
	}
	nav, aside {
		position: relative;
		float: left;
		width: 100%;
	}
	#bottom, #top {
		position: relative;
		float: left;
		/ *bottom: Auto;* /
		height: 1.2em;
		overflow: none;
	}
}*/

/*@media only screen and (max-width: 550px) {
	nav, section, #aside {
	}
	#bottom {
		height: 2.4em;
	}
}*/

/*@media only screen and (max-width: 480px) {
	nav, section, #aside {
		top: Auto;
		bottom: Auto;
		height: Auto;
	}
	#top, #bottom {
		height: 2.4em;
	}
	#center {
		position: relative;
		top: Auto;
		bottom: Auto;
		left: 0px;
		width: 100%;
		overflow: auto;
	}
	#datenbilder, #daten, #daten100, #quellen {
		width: 100%;
	}
	#bottom, #top {
		position: relative;
		float: left;
		/*bottom: Auto;*/
		overflow: none;
	}
}*/


.ct3dash {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	/*xgrid-auto-rows: 1fr;*/
	grid-auto-flow: row dense;
	column-gap: 24px;
	row-gap: 24px;
	padding: 24px;
}
.ct3dash div {
	width: 100%;
}
.ct3dash .mdl-card__media {
	width: 100%;
	height: 150px!important;
	overflow: hidden;
	border: 0;
}
.ct3dash .mdl-card__actions {
	text-align: right;
}
.ct3dash .mdl-card__supporting-text {
	padding-top: 0;
}
.colrechts {
	grid-column: -2 / -1;
}
.zeile2 {
	grid-row: 2 / 3;
}
.shrinkcontent {
	flex-basis: content;
}
.shrinktitle {
	flex-shrink: 1;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 100%;
	/*text-decoration: none;
	color: white!important;
	text-decoration-line: none;
	text-decoration-color: white;*/
}
.shrinktitle a, .shrinktitle a:link, .shrinktitle a:visited {
	text-decoration: none;
	color: white!important;
	text-decoration-line: none;
	text-decoration-color: white;
	text-color: white!important;
}



/* Auflösugnsbeispiele von http://www.wissenstausch.com/2013/03/best-practices-bei-der-erstellung-eines-responsive-webdesign/ */

/* @section 1. Desktop Auflösung */
 
/* @section 1.1 Large screens (HD) */
/* ================================================== */
/* Note: Design for a width of 1440+px */
@media only screen and (min-width: 1440px) {
}
 
/* @section 2. Small Tablet */
/* ================================================== */
/* Note: Design for a width of 768px - 1023px */
@media only screen and (max-width: 1023px) {
}
 
/* @section 2.1 Small tablet landscape (800x600) */
/* ================================================== */
/* Note: Design for a width of 800px - 1023px */
@media only screen and (min-width: 800px) and (max-width: 1023px) and (orientation: landscape) {
}
 
/* @section 2.2 Tablet portrait (768x1024) */
/* ================================================== */
/* Note: Design for a width of 768px - 1023px */
@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
}
 
/* @section 2.3 Tablet landscape (1024x768) */
/* ================================================== */
/* Note: Design for a width of 768px - 1023px */
@media only screen and (min-width: 1023px) and (max-width: 1439px) and (orientation: landscape) {
}
 
/* @section 3. Mobile, Small Tablet (Portrait) */
/* ================================================== */
/* Note: Design for a width of 320px - 768px */
@media only screen and (max-width: 767px) {
}
 
/* @section 3.1 Mobile landscape (480x320) */
/* ================================================== */
/* Note: Design for a width of 480px - 599px */
@media only screen and (min-width: 479px) and (max-width: 599px) {
}
 
/* @section 3.2 Small tablet portrait (600x800) */
/* ================================================== */
/* Note: Design for a width of 600px - 799px */
@media only screen and (min-width: 600px) and (max-width: 799px) and (orientation: portrait) {
}


/* für mdl */
.mdl-mini-footer {
	padding: 0px 16px;
}
@media (max-width: 839px) and (min-width: 480px) {
	#daten.mitbild {
		order: 1;
	}
	#toc.mitbild {
		order: 2;
	}
	#bilder {
		order: 3;
	}
	#quellen {
		order: 4;
	}
}
.mdl-mini-footer {
	text-overflow: ellispsis;
}
.mdl-mini-footer li {
	flex-shrink: 1;
	text-overflow: ellispsis;
}
.rot90 {
	transform: rotate(90deg);
}
.rot270 {
	transform: rotate(270deg);
}
@media only print {
	.mdl-mini-footer {
		display: none;
	}
	.mdl-layout__header {
		display: none;
	}
	.svg-pan-zoom_viewport {
		transform: translate(0, 0)!important;
		transform: scale(0.5)!important;
	}
}