body {
		font-family: Calibri,Verdana,Helvetica,sans-serif;
		font-size: 1.2em;
		display: -webkit-flex;
		display: flex;
		margin: 0;
		padding: 0;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		}
	header {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-flex: 1 100%;
		flex: 1 100%;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		}
	aside {
		border: 0px solid;
		border-color: #ffffff;	/* HTML white */
		border-radius: 0.3em;
		margin: 0px;
		padding: 5px;
		-webkit-flex: 0 0 3%;
		flex: 0 0 3%;
		}
	main {
		background-color: #ffffff;	/* HTML white */
		margin: 0px;
		margin-top: 0.5em;
		padding: 5px;
		-webkit-flex: 1 0 78%;
		flex: 1 0 78%;
		}
	nav.topmenue {
/*		topmenue kommt mit unterschiedlichen Werten bei nav, ul	und li vor	*/
		border: 0px solid;
		border-color: #ffffff;	/* HTML white */
		border-radius: 0.3em;
		margin: 5px;
		margin-bottom: 0.5em;
		-webkit-flex: 1 0 65%;
		flex: 1 0 65%;
		}
	.topmenueaktiv {
		color: #ff0000;	/* HTML red */
	}
	.gray {
		color: #808080;	/* HTML gray */
	}
	nav.breadcrumbs, footer {
		background-color: #f7f7f7;	/* HTML gray97 */
		border: 0px solid;
		border-color: #f7f7f7;	/* HTML gray97 */
		border-radius: 0.0em;
		font-size: 0.7em;
		margin-top: 0.7em;
		padding: 5px;
		padding-left: 10px;
		-webkit-flex: 1 100%;
		flex: 1 100%;
		z-index: 4;
		}
	nav.breadcrumbs {
		margin-bottom: 1em;
		}
	nav.breadcrumbs.sticky {	
/*		die Breadcrumb-Leiste wird beim Scrollen oben ohne Außenabstand (margin-top) fixiert	*/
		background-color: #ffffff;	/* HTML white */
		border: 1px solid;
		border-color: #d3d3d3;	/* HTML lightgray */	
		position: fixed;
		margin-top: 0em;
		width: 100%;
		}
	nav.breadcrumbs.sticky + nav.breadcrumbs.content {	
/*		das Hüpfen der fixierten Breadcrumb-Leiste beim Scrollen wird verhindert	*/
		padding-top: 120px;
		}
	.previousnext {
/*		previousnext wird im Element nav verwendet	*/
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		}
	footer {
		margin-bottom: 0em;
		padding-bottom: 10px;
		}
	section, form {
		margin-bottom: 15px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex: 0 0 90%;
		flex: 0 0 90%;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-justify-content: center;
		justify-content: center;
		z-index: 1;
		}
	.border {
		border: 1px solid;
		border-color:  #000000; /* HTML black */
		border-radius: 0.1em;	
		}
	.no-margin {
/*		no-margin wird u. a. in den Elementen section und form verwendet:
		unterhalb des Elements (z. B. section, form) schließt ohne vertikalen Abstand 
		unmittelbar das nächste Element an, z. B. die nächste Bilderreihe auf der Startseite	*/
		margin-bottom: 0px;
		}
	.right {
/*		die untergeordneten Objekte beginnen rechts und nehmen nur soviel Platz ein wie nötig
		(Beispiel: Calendar-Button	*/
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		}
	.left {
/*		die untergeordneten Objekte beginnen links und nehmen nur soviel Platz ein wie nötig
		(Beispiel: Artikel bei Contact und Impressum, Spalten bei Kontaktformular)	
		ergänzende Werte sind unter figure.left definiert	*/
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		}
	.left-protocols {
/*		für section auf protocol-Seiten:
		die untergeordneten Objekte (article) beginnen links,
		haben aber eine Mindestbreite, sodass Bild und Text 
		bei genügend breitem Display nebeneinander bleiben,
		die Maximalbreite der section sorgt dafür, dass der horizontale Abstand zwischen zwei nebeneinander stehenden article nicht zu groß wird	*/
		max-width: 2000px;
		flex-flow: row wrap;
/*		-webkit-flex: 1 0 90%;
		flex: 1 0 90%;	*/
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		}
	.list {
/*		die untergeordneten Objekte beginnen links und nehmen die gesamte Breite des betreffenden Objekts ein
		(Beispiel: section in biography_exhibitions.html (Ausstellungsliste), article in protocols_01.html)	*/
		flex-direction: column;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		}
/*		folgende 37 Attribute sind für die Hintergründe der sections der 36 Dekaden sowie des neutralen Hintergrunds im calendar */
	.jan-d1 {
		background-color: #ebedf5;
		}
	.jan-d2 {
		background-color: #ebeef6;
		}
	.jan-d3 {
		background-color: #ebeff6;
		}
	.feb-d1 {
		background-color: #eaf0f6;
		}
	.feb-d2 {
		background-color: #e9f0f6;
		}
	.feb-d3 {
		background-color: #eaf1f5;
		}
	.mar-d1 {
		background-color: #eaf2f4;
		}
	.mar-d2 {
		background-color: #ebf3f3;
		}
	.mar-d3 {
		background-color: #ebf3f1;
		}
	.apr-d1 {
		background-color: #eaf3f0;
		}
	.apr-d2 {
		background-color: #e9f3ee;
		}
	.apr-d3 {
		background-color: #ebf4ed;
		}
	.may-d1 {
		background-color: #eef5ec;
		}
	.may-d2 {
		background-color: #f0f6eb;
		}
	.may-d3 {
		background-color: #f2f6eb;
		}
	.jun-d1 {
		background-color: #f4f6ea;
		}
	.jun-d2 {
		background-color: #f6f6e9;
		}
	.jun-d3 {
		background-color: #f6f5e9;
		}
	.jul-d1 {
		background-color: #f6f4e9;
		}
	.jul-d2 {
		background-color: #f6f3e9;
		}
	.jul-d3 {
		background-color: #f6f2e9;
		}
	.aug-d1 {
		background-color: #f6f1e9;
		}
	.aug-d2 {
		background-color: #f6f0e9;
		}
	.aug-d3 {
		background-color: #f6f0e9;
		}
	.sep-d1 {
		background-color: #f6efe9;
		}
	.sep-d2 {
		background-color: #f6eee9;
		}
	.sep-d3 {
		background-color: #f6ece9;
		}
	.oct-d1 {
		background-color: #f6ebe9;
		}
	.oct-d2 {
		background-color: #f6e9e9;
		}
	.oct-d3 {
		background-color: #f5e9ea;
		}
	.nov-d1 {
		background-color: #f4e9ec;
		}
	.nov-d2 {
		background-color: #f3e9ee;
		}
	.nov-d3 {
		background-color: #f1eaef;
		}
	.dec-d1 {
		background-color: #eeeaf1;
		}
	.dec-d2 {
		background-color: #ebebf3;
		}
	.dec-d3 {
		background-color: #ebecf4;
		}
	.neutral { 		
		background-color: #f7f7f7;	/* HTML gray97 */
		}
	article.list {
/*		wie list allgemein (Beispiel: article in protocols_01.html), außerdem:
		42% Mindestbreite sorgen dafür, dass der Text (figcatpion)
		möglichst lange rechts neben dem Bild (img) bleibt,
		dass zwei article nebeneinander aber nicht zu weit auseinanderrücken	*/
		max-width: 630px;
		min-width: 42%;
		width: auto;
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		}
	p, form {
		padding: 5px;
		margin-top: 0px;
		margin-bottom: 15px;
		}
	.column {
/*		Objekte erhalten eine Mindestbreite und einen 10-%-igen Abstand rechts neben dem Text,
		damit sie nicht zu dicht aneinanderrücken
		(Beispiel: Artikel bei Contact und Impressum)	*/
		min-width: 10.0em;
		margin-right: 10%;
		}
	.block {
/*		Objekte erhalten eine prozentuale Mindestbreite,
		damit sie möglichst gleichzeitig umspringen
		(Beispiel: Absätze im Lebenslauf)	*/
		min-width: 60%;
		}
	.gray {
/*		graue Schriftfarbe z. B. für die unbelegten Jahreszahlen in calendar	*/		
		color: gray;	/* #bebebe	*/
		}
	article.landscape {
/*		Abwandlung zu article.list, kommt vor in articel bei protocols_01.html,
		bezweckt, dass der Raum für Bild und Text breiter ist als bei Hochformaten,
		50% Mindestbreite sorgen dafür, dass der Text (figcatpion)
		möglichst lange rechts neben dem Bild (img) bleibt,
		dass aber dennoch zwei articel in der section nebeneinander stehen können	*/
		max-width: 755px;
		min-width: 50%;
		}
	details {
		padding-right: 5px;
		padding-left: 5px;
		}
	h1 {
		border: 0px solid;
		border-color: #fafafa;	/* HTML gray98 */
		border-radius: 0.3em;
		margin: 5px;
		padding: 5px;
		font-size: 1.3em;
		font-weight: normal;
		word-spacing: 0.2em;
		-webkit-flex: 0 1 7.0em;
		flex: 0 1 7.0em;                
		}
	h2 {
		border: 0px solid;
		border-color: #fafafa;	/* HTML gray98 */
		margin: 0px;
		padding: 5px;
		padding-bottom: 0.6em;
		padding-top: 0.2em;
		font-size: 1.4em;
		font-weight: normal;
		text-align: center;
		word-spacing: 0.2em;
		-webkit-flex: 1 1 100%;
		flex: 1 1 100%;
		}
/* Die folgenden Werte für das grafisch gestaltete Kalenderblatt sind nicht mehr in Benutzung
	h2.calendar-heading {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		}
	.calendar-sheet {	
		border: 1px solid;
		border-radius: 0.0em;
		text-align: center;
		margin-top: 0.5em;
		padding: 12px;
		padding-bottom: 0.4em;
		padding-top: 0em;
		}
	.calendar-day {	
		line-height: 1.0em;
		font-size: 4.0em;
		}
	.calendar-line {	
		height: 5px;
		width: auto
		}
	.calendar-month {	
		line-height: 1.4em;
		}
	.oct-d3-line {
		background-color: #f0001f;
		}
	.nov-d1-line {
		background-color: #de0042;
		}
	.nov-d2-line {
		background-color: #cc0066;
		}
	.nov-d3-line {
		background-color: #9e0f85;
		}
	.dec-d1-line {
		background-color: #6921a8;
		}
	.dec-d2-line {
		background-color: #3333cc;
		}
	.dec-d3-line {
		background-color: #3342db;
		}
Ende der Werte für das grafisch gestaltete Kalenderblatt */
	h3 {
		border: 0px solid;
		border-color: #fafafa;	/* HTML gray98 */
		border-radius: 0.3em;
		margin: 0px;
		margin-top: 0.6em;
		padding: 5px;
		padding-bottom: 0.6em;
		padding-top: 0.6em;
		font-size: 1.3em;
		font-weight: normal;
		word-spacing: 0.2em;
		-webkit-flex: 10 0 90%;
		flex: 10 0 90%;
		}
	h3.subtitle {
/*		subtitle gibt es mit anderen Werten auch bei h4	*/
		padding: 5px;
		margin-top: 0px;
		margin-bottom: 15px;
		font-size: 100.1%;
		font-weight: normal;
		word-spacing: 0em;
		text-align: center;
		}
	h3.protocols {
/*		wie h4.figure, aber ohne die Verschiebung nach unten
		und mit abweichenden flex-Eigenschaften,
		verwendet z. B. bei protocols_01.html	*/
		border: 0px solid;
		border-color: #fafafa;	/* HTML gray98 */
		display: block;
		font-size: 1.05em;
		font-weight: normal;
		height: auto;
		line-height: 1.1;
		width: 86%;
		margin-bottom: 0.5em;
		margin-left: 18px;
		margin-right: auto;
		margin-top: 0.5em;
		overflow: hidden;
		position: relative;
		text-decoration: none;
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		}
	h4 {
		font-weight: bold;
		padding: 5px;
		}
	h4.subtitle {
/*		subtitle gibt es mit anderen Werten auch bei h3	*/
		font-weight: normal;
		padding: 5px;
		margin-top: 0px;
		margin-bottom: 15px;
		}
	h4.figure {
/*		Überschrift über Bildern, z. B. bei works.html und projects.html	*/
		border: 0px solid;
		border-color: #fafafa;	/* HTML gray98 */
		display: block;
		font-size: 1.05em;
		font-weight: normal;
		height: auto;
		line-height: 1.1;
		width: 86%;
		max-width: 500px;
		margin-bottom: -1.7em;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0.5em;
		overflow: hidden;
		position: relative;
		text-decoration: none;
		-webkit-flex: 1 1 86%;
		flex: 1 1 86%;
		}
	h4.small_landscape {
/*		small_landscape kommt mit unterschiedlichen Werten bei h4, img und figcaption vor	*/
		max-width: 200px;
		}
	h5 {
		font-size: 1.0em;
		font-weight: normal;
		font-style: italic;
		padding: 5px;
		}
	.rezension {
/*		rezension wird im Element h5 verwendet
		(Beispiel: rezensionen.html	*/
		font-weight: bold;
		font-style: normal;
		}
	h6 {
		font-size: 0.8em;
		font-weight: normal;
		padding-left: 5px;
		padding-right: 5px;
		}
	figure {
		background-color: #f7f7f7;	/* HTML gray97 */
		border: 0px solid;
		border-color: #f7f7f7;	/* HTML gray97 */
		border-radius: 0.0em;
		margin: 0px;
		width: auto;
		-webkit-flex: 1 1 550px;
		flex: 1 1 550px;
		}
	figure.large {
/*		large kommt mit unterschiedlichen Werten bei figure, img, audio und figcaption vor	*/
		-webkit-flex: 0 1 930px;
		flex: 0 1 930px;
		}
	figure.left {
/*		es gibt weitere allgemeine Definitionen zu left	*/
		-webkit-flex: 0 1 auto;
		flex: 0 1 auto;
		}
	.left-cm40 {
/*		left-cm40 kommt bei figure vor, es wird verwendet,
		damit auf protocols_watercolours.html ein Querformat 30 x 40 cm breiter angezeigt werden kann als sonst für figure vorgesehen (Verwendung zusammen mit img.cm40 und figcaption.cm40)	*/
		-webkit-flex: 0 1 675px;
		flex: 0 1 675px;
		}
	.transparent-background {
/*		transparent-background wird im Element figure verwendet, z. B. bei protocols oder calendar	*/
		background-color: transparent;
		}
	figure.small {
/*		small kommt mit unterschiedlichen Werten bei figure, img und figcaption vor	*/
		-webkit-flex: 1 1 230px;
		flex: 1 1 230px;
		}
	.protocols-row {
/*		kommt vor bei figure als Flex-Container,
		damit img und figcaption bei genügend Platz nebeneinander stehen,
		verwendet z. B. bei protocols_01.html	*/
		max-width: 780px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		-webkit-flex: 0 1 auto;
		flex: 0 1 auto;
		}
	img, video, audio {
		display: block;
		width: 86%;
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 36px;
		-webkit-flex: 1 1 86%;
		flex: 1 1 86%;
		}
	img, video {
		height: auto;
		}
	.email {
/*		zur Anzeige der E-Mail-Adresse als Bild auf contact.html, wenn Javascript deaktiviert ist	*/
		display: inline;
		width: 65%;
		margin-left: 0px;
		margin-top: 0px;
		}
	.email-text {
/*		zur Anzeige der E-Mail-Adresse als Bild auf kurs.html, wenn Javascript deaktiviert ist	*/
		display: inline;
		height: 20px;
		width: auto;
		margin-left: 0px;
		margin-top: 0px;
		}
	img.tile, video.tile, audio.tile {
/*		Objekte (img, video, audio) bilden ein Kachelmuster, horizontal nah aneinander, 
		haben vertikal einen gleichmäßigen Abstand	*/
		display: inline;
		margin-left: 18px;
		margin-top: 48px;
		}
	img.protocols-img, video.protocols-img {
/*		der Abstand links ist wie bei tile, der große Abstand nach oben entfällt,
		weil img hier selbst ein flex-item ist, sind die Werte anders als sonst bei img	und video */
		object-fit: contain;	/* damit das Bild zwar angepasst, aber nicht verzerrt wird	*/
		object-position: 0% 0%;	/* damit das Bild links oben in seiner Contentbox steht	*/
		margin-left: 18px;
		margin-top: 0px;
		margin-bottom: 24px;
		margin-right: 20px;
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
		}
	img.highsize {
/*		highsize kommt bei img und figcaption mit unterschiedlichen Werten vor	*/
		max-height: 500px;
		width: auto;
		max-width: 86%;
		}
	img.highsize.large {
/*		highsize.large kommt bei img und figcaption mit unterschiedlichen Werten vor	*/
		max-height: 800px;
		width: auto;
		max-width: 86%;
		}
	figcaption.highsize {
/*		highsize kommt bei img und figcaption mit unterschiedlichen Werten vor	*/
		max-width: 333px;
		}
	figcaption.highsize.large {
/*		highsize.large kommt bei img und figcaption mit unterschiedlichen Werten vor	*/
		max-width: 528px;
		}
	img.small, figcaption.small {
/*		small kommt mit unterschiedlichen Werten bei figure, img und figcaption vor	*/
		max-width: 150px;
		width: auto;
		}
	img.small_landscape, figcaption.small_landscape {
/*		small_landscape kommt mit unterschiedlichen Werten bei h4, img und figcaption vor	*/
		max-width: 200px;
		width: auto;
		}
	.small_square {
/*		small_square kommt bei img und figcaption mit denselben Werten vor	*/
		max-width: 170px;
		width: auto;
		}
	.square {
/*		square kommt bei img und figcaption mit denselben Werten vor	*/
		max-width: 300px;
		width: auto;
		}
	img.cm12, img.px188, figcaption.cm12, figcaption.px188 {
/*		cm12 und px188 kommen bei img und figcaption mit denselben Werten vor,
		Zweck sind proportionale Größen der Abbildungen (z. B. auf der Startseite index.html)	*/
		max-width: 188px;
		}
	img.cm17, img.px266, figcaption.cm17, figcaption.px266 {
/*		cm17 und px266 kommen bei img und figcaption mit denselben Werten vor,
		Zweck sind proportionale Größen der Abbildungen (z. B. auf der Startseite index.html)	*/
		max-width: 266px;
		}
	img.cm24, img.px375, figcaption.cm24, figcaption.px375 {
/*		cm24 und px375 kommen bei img und figcaption mit denselben Werten vor,
		Zweck sind proportionale Größen der Abbildungen (z. B. auf der Startseite index.html)	*/
		max-width: 375px;
		}
	img.cm30, img.px469, figcaption.cm30, figcaption.px469 {
/*		cm30 und px469 kommen bei img und figcaption mit denselben Werten vor,
		Zweck sind proportionale Größen der Abbildungen (z. B. auf der Startseite index.html)	*/
		max-width: 469px;
		}
	img.cm40, img.px625, figcaption.cm40, figcaption.px625 {
/*		cm40 und px625 kommen bei img und figcaption mit denselben Werten vor,
		Zweck sind proportionale Größen der Abbildungen (z. B. auf der Startseite index.html),
		damit sich die Breite auswirkt, muss figure die Klasse left-cm40 haben	*/
		max-width: 625px;
		}
	img.icon {
		padding-bottom: 1em;
		}
	img.mark {
		height: 24px;
		width: auto;
		display: inline;
		text-align: right;
		position: absolute;
		right: 1px;
		}
	img.mark2 {
		height: 24px;
		width: auto;
		display: inline;
		text-align: right;
		position: absolute;
		right: 26px;
		}
	.next-to-img {
/*		verwendet im Element article bei rezensionen.html,
		damit innerhalb des section der article initial rechts neben figure steht	*/
		margin-top: 32px;
		margin-left: 32px;
		margin-right: 120px;
		margin-bottom: 84px;
		max-width: 320px;
		font-size: 0.9em;
		}
	#videoarea {
		position: relative;
		height: 0;
		padding-bottom: 56.25%;
		}	
	.calendar-img {
		margin-top: 18px;
		margin-left: 18px;
		margin-right: 18px;
		padding-bottom: 18px;
		}
	figcaption.calendar-img {
		margin-left: 18px;
		}
	.videoexternal {
		position: absolute;
		margin-left: 7%;
		margin-right: 7%;
		margin-top: 36px;
    	width: 86%;
		max-width: 600px;
    	height: 86%;
		}
	figcaption {
		border: 0px solid;
		border-color: #fafafa;	/* HTML gray98 */
		display: block;
		font-size: 0.75em;
		height: auto;
		width: 86%;
		max-width: 500px;
		margin-bottom: 1.5em;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
		overflow: hidden;
		position: relative;
		-webkit-flex: 1 1 86%;
		flex: 1 1 86%;
		}
	.side-by-side {
/*		mehrere Elemente der Bildunterschrift werden nebeneinander angeordnet
		(z. B. mehrere Details zum Aufklappen)	*/
		display: -webkit-flex;
		display: flex;
		font-size: 0.75em;
		-webkit-flex: 0 0 90%;
		flex: 0 0 90%;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		}
	.protocols-text {
/*		kommt vor in figcaption z. B. bei protocols_01.html,
		definiert den Text neben (bzw. unter) dem Bild eines Protocols	*/
		width: 100%;
		max-width: 195px;
		font-size: 0.9em;
		margin-left: 18px;
		}
	.calendar-text {
/*		kommt vor in calendar im Element figcaption,
		definiert den Text neben (bzw. unter) dem Bild eines Kalendereintrags	*/
		width: 100%;
		max-width: 195px;
		font-size: 0.9em;
		margin-left: 18px;
		padding-top: 18px;
		}
	img.large, audio.large, figcaption.large {
/*		large kommt mit unterschiedlichen Werten bei figure, img, audio und figcaption vor	*/
		max-width: 800px;
		-webkit-flex: 1 1 100%;
		flex: 1 1 100%;
		}
	ul.topmenue {
/*		topmenue kommt mit unterschiedlichen Werten bei nav, ul	und li vor	*/
		border: 0px solid;
		border-color: #fafafa;	/* HTML gray98 */
		border-radius: 0.3em;
		margin: 0px;
		padding: 0px;
		list-style-type: none;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-justify-content: flex-end;
		justify-content:flex-end;
		}
	li.topmenue {
/*		topmenue kommt mit unterschiedlichen Werten bei nav, ul	und li vor	*/
		border: 1px solid;
		border-color: #d3d3d3;	/* HTML lightgray */	
		border-radius: 0.3em;
		margin: 0em;
		margin-top: 0.3em;
		margin-bottom: 0.1em;
		margin-left: 0.6em;
		margin-right: 0.6em;
		padding: 0.4em;
		padding-left: 0.7em;
		padding-right: 0.7em;
		font-size: 0.9em;
		font-weight: normal;
		word-spacing: 0.2em;
		float: left;
		-webkit-flex: none;
		flex: none;
		}
	button {
		background-color: #cccccc; /* HTML gray80 */
		border: 1px solid;
		border-color: #dcdcdc; /* HTML gainsboro */
		border-radius: 0.3em;
		color: #ffffff;	/* HTML white */
		cursor: pointer;
		font-size: 0.75em;
		margin: 0.2em;
		margin-left: 0.4em;
		margin-right: 0.4em;
		line-height: 1.5;
		padding: 0.4em;
		padding-left: 0.7em;
		padding-right: 0.7em;
		}
	button.main {
		font-size: 1.2em;
		}
	.scroll {
/* der Button wird zunächst nicht angezeigt, erst beim Scrollen wird er mit JS eingeblendet und dann weit unten rechts fixiert, aber oberhalb vom Next-Button z. B. auf den Protocols-Seiten
er liegt über allen anderen Elementen	*/
		display: none;
		position: fixed;
		bottom: 14%;
		right: 1.5%;
		z-index: 99;
		}
	.link {
/* z. B. auf der Seite Kurs (zur Kunst von Kirsten Kötter): der Button wird zunächst nicht angezeigt, erst beim Scrollen wird er mit JS eingeblendet und dann unten rechts fixiert,
etwas unterhalb vom Top-Button (scroll), er liegt über allen anderen Elementen außer dem Top-Button	*/
		display: none;
		position: fixed;
		bottom: 5%;
		right: 1.5%;
		z-index: 98;
		}
/*Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! */
	a, a:link, a:visited {
		color: #000000; /* HTML black */
		font-size: 100.01%;
/*		font-style: normal;	*/
		font-weight: normal;
		text-decoration: none;
		}
	a.dayandmonth, a:link.dayandmonth, a:visited.dayandmonth {
		color: #696969; /* HTML DimGray */
		}
	a:hover, a:hover.dayandmonth {
		color: #cccccc; /* HTML gray80 */
		}
	a:hover.figure/*, img:hover.hover */
/* Ein img-Element wird im Firefox beim Mouse-over durch die Eigenschaft opacity blasser, so wie auch die Schrift innerhalb des a-Elements. Bei Chromium-Browsern Chrome und Edge geschieht das bei img-Elementen nicht, sondern nur bei Schrift und Hintergründen. Daher werden die img-Elemente hier zusätzlich aufgenommen. Die img-Elemente müssen dann mit der Klasse "hover" versehen werden. Nachteil: Im Firefox wird das Bild zweifach aufgehellt. Trifft zu auf water_colours, aber nicht auf protocols. Update 2022-10-19: Der Fehler von Chrome und Edge besteht nicht mehr, img.hover wird deaktiviert und auf den Seiten sukzessive wieder entfernt */
		{
    	opacity: 0.5;
		filter: alpha(opacity=50);	/* For IE8 and earlier */
		}
	button:hover {
		background-color: #dcdcdc; /* HTML gainsboro */
		}
	a:active {
		color: #000000; /* HTML black */
		font-size: 100.01%;
/*		font-style: normal;	*/
		font-weight: normal;
		text-decoration: none;
		}
	a.figure, a.underline {
		text-decoration: underline;
		}