*, ::before, ::after { 
 	box-sizing: border-box; /*alle Elemente werden auf border-box gestellt*/
}
* { 
	padding: 0;
	margin: 0;
/* Jeder Browser verwendet ein eigenes css-stylesheet mit verschiedenen Einstellungen für Padding und margin. Mit "*" (betrifft alle Elemente) padding 0 und margin 0 wird die Seite initialisiert und kann im folgenden ungehindert eigene Definitionen verwenden. */
}
html {
	font-size: calc(12px + 6 * ((100vw - 320px) / 760));
/* legt die Bezugsgröße "1rem" für die relativen css-stylesheet-Einheiten fest. Dieser Wert muss in px absolut angegeben werden; relative Werte würden sich sonst auf die jeweilige Browsereinstellung beziehen. 1rem ist mit calc variabel gestaltet: calc(12px + (18 - 12) * (100vw - 320px) / (1080 - 320)). Bei einer viewport-Größe von 320px beträgt der font-size-Wert 12px (1 rem = 12px) und wächst kontinuierlich an, bis er bei einer viewport-Größe von 1080px 18px (1 rem = 18px) erreicht hat. Darüberhinaus wird 1rem nicht weiter vergrößert, weil er von einer media-query gekappt wird. */
	scroll-behavior: smooth; /* macht, dass durch den NachObenButton die Seite gemäßigt nach oben scrollt */
}

body {
	display: flex; /* Flex-Box, wirkt sich nur auf die direkten Kind-Elemente aus: header, nav, main und footer*/
	flex-direction: column; /*die Kind-Elemente header, nav, main und footer werden untereinander angeordnet und nehmen dabei jeweils die gesamte Seitenbreite ein*/
	margin: auto; /*body wird auf der webseite zentriert*/
	max-width: 60rem; /*relative Breite, abhängig von der voreingestellten Schriftgröße des Browsers; hier mit 18px festgelegt; 18px x 60rem = 1080px*/
	font-family: 'OpenSans';
	line-height: 1.4; /*legt die Zeilenhöhe fest, (ansonsten eine Browser-Voreinstellung, üblicherweise 1.2).*/
	background: linear-gradient(#47193d, #251327); /* dunkelvioletter Hintergrund */
}

/* SCHRIFTARTENFONTS*/
@font-face {
	font-family: 'OpenSans';
	src:
	  local('Open Sans'),
	  local('OpenSans'),
	  url('opensans-regular-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
.os {
	font-family: 'OpenSans';
	font-size: 1rem;
	color: #625e5a; /*die grundsätzliche Farbangabe für .os; sie kann mit anderen Farbklassen überschrieben werden, weil die im css-sheet weiter unten stehen. */
}
.os-rt { /* wie ph3 nur für class="readmore-target", mit em- anstatt rem-Angaben, damit font-size 0 vom Elternelement geerbet werden kann. */
	font-family: 'OpenSans';
	font-size: 1em; 
	color: #625e5a;
}
@font-face {
	font-family: 'OpenSans-light';
	src: url('opensans-light-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
.os-light {
	font-family: 'OpenSans-light';
	font-size: 1rem;
	color: #625e5a; /*legt die grundsätzliche Farbangabe fest; sie kann mit anderen Farbklassen überschrieben werden, wenn sie im css-sheet weiter unten stehen. */
}
@font-face {
	font-family: 'OpenSans-semibold';
	src: url('opensans-semibold-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
.os-halbfett {
	font-family: 'OpenSans-semibold';
	font-size: 1rem;
	color: #625e5a; /*legt die grundsätzliche Farbangabe fest; sie kann mit anderen Farbklassen überschrieben werden, wenn sie im css-sheet weiter unten stehen. */
}
.os-halbfett-rt { /* wie os-halbfett, jedoch mit em-, statt rem-Angabe, damit fontsize 0 vom Elternelement geerbt werden kann; wird meist mit <span> in einen Absatz eingebunden, um Text hervorzuheben, deswegen keine eigene Schriftfarbe. */
	font-family: 'OpenSans-semibold';
	font-size: 1em;
}
@font-face {
	font-family: 'OpenSans-bold';
	src: url('opensans-bold-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
.os-fett { /* .os-fett ist ein eigener Schriftartenfont, während .fett die leichte Verstärkung des regulären Fonts bewirkt. .fett ist zusätzlich auf .os-fett anwendbar. */
	font-family: 'OpenSans-bold';
	font-size: 1rem;
	color: #625e5a; /*die grundsätzliche Farbangabe für .os; sie kann mit anderen Farbklassen überschrieben werden, weil die im css-sheet weiter unten stehen. */
}
@font-face {
    font-family: 'Philosopher';
    src: url('philosopher-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
.ph {
	font-family: 'Philosopher';
	font-size: 1.3333rem;
}
.ph1 { /*z.B. für Vortrags-Titel <h2 class="ph1">*/
	font-family: 'Philosopher';
	font-size: 1.88rem;
	padding-bottom: 0.75rem;
}
.ph2 { /*z.B. für Votrags-Untertitel, wird mit <span class="ph2"> eingebunden in <h2>*/
	font-family: 'Philosopher';
	font-size: 1.5rem;
}
.ph3 { /*z.B. für eingerücktes Zitat; der Text wird linksbündig in einem zentrierten Block dargestellt, mit Abstand nach unten 1 rem */
	font-family: 'Philosopher';
	font-size: 1.2rem;
	line-height: 1.16;
	width: max-content;
	margin: auto;
	margin-bottom: 1.2rem;
}
.ph3-rt { /* wie ph3 nur für class="readmore-target", mit em- anstatt rem-Angaben, damit font-size 0 vom Elternelement geerbet werden kann */
	font-family: 'Philosopher';
	font-size: 1.2em;
	line-height: 1.16;
	width: max-content;
	margin: auto;
	margin-bottom: 1em;
}
.ph4 { /* ph4 wird verwendet für Zitate mit Quellenangabe. ph4 muss zusammen mit der Quellenangabe (class="os rechts lnhght2") in ein Block-Container (<div class="block">) gesetzt werden, damit der Zitat-Text linksbündig und die Quellenangabe rechtsbündig im div-Container stehen. Der Zitat-Text hat margin-bottom 0, damit die Quellenangabe keinen Abstand hat. Der Abstand der Quellenangabe wird mit .lnhght2 verwirklicht */
	font-family: 'Philosopher';
	font-size: 1.2rem;
	line-height: 1.16;
	margin-bottom: 0;
}
.ph4-rt { /* wie ph4 nur für class="readmore-target", mit em- anstatt rem-Angaben, damit font-size 0 vom Elternelement geerbet werden kann. */
	font-family: 'Philosopher';
	font-size: 1.2em;
	line-height: 1.16;
	margin-bottom: 0;
}
@font-face {
	font-family: 'BlackChancery';
	src: url('blackchancery-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
.bc {
	font-family: 'BlackChancery';
	font-size: 1.3333em; /* hier kein rem-Wert, sondern ein em-Wert, weil .bc immer relativ zu den jeweiligen Schriftgrößen von .ph ist. */
}
/* Ende SCHRIFTARTENFONTS */


/* SCHRIFTSTILE */
.kursiv {
	font-style: italic;
}
.fett { /*der Stil bold im regulären Font verstärkt die Schrift nur leicht; das entspricht auch der span-class "strong". Er unterscheidet sich damit von dem Font OpenSans-bold, der die Schrift viel fetter setzt. .fett kann zusätzlich auf .os-fett angewendet werden. */
	font-weight: bold;
}
.zentriert {
	text-align: center;
}
.rechts {
	text-align: right;
}
.padl { /* Einrückung links, z.B. in Vortraege.htm */
	padding-left: 1.666rem;
}
.block { /* bildet einen mittigen Block mit der Breite des Text-Inhalts, der Text im Block ist linksbündig */
	width: max-content;
	margin: auto;
}
.marginbottom {
	margin-bottom: 0.667rem;
}
/* Ende SCHRIFTSTILE */


/* SCHRIFTFARBEN */
.grau {
	color: #625e5a;
}
.hellrot {
	color: #cc0000;
}
.rot {
	color: #640000;
	}
.blau {
	color: #000080;
}
.gruen {
	color: #005500;
}
.violett {
	color: #550055;
}
.weiss {
	color: #ffffff;
}
.schwarz {
	color: #000000;
}
/* Ende SCHRIFTFARBEN */

/* HINTERGRUNDFARBEN */
.bg-grau {
	background: #625e5a;
}
.bg-hellrot {
	background: #cc0000;
}
.bg-rot {
	background: #640000;
	}
.bg-blau {
	background: #000080;
}
.bg-gruen {
	background: #005500;
}
.bg-violett {
	background: #550055;
}
.bg-weiss {
	background: #ffffff;
}
.bg-schwarz {
	background: #000000;
}
/* Ende SCHRIFTFARBEN */

/* ZEILENHÖHEN */
.lnhght1 {
	line-height: 1;
}
.lnhght125 {
	line-height: 1.25;
}
.lnhght15 {
	line-height: 1.5;
}
.lnhght2 {
	line-height: 2;
}
/* Ende ZEILENHÖHEN */


/* SCHRIFTGÖSSEN */
.fs050 { /* für Quellenangaben unter Bildern und Videos: verkleinert die Schriftgröße auf 75%. */
	font-size: 0.75em;
}
.fs087 { /* für Unterüberschrift: verkleinert z.B. die Schriftgröße von H3 (1.15) um 13% auf 1. */
	font-size: 0.87em;
}
.fs115 { /* vergrößert die Schrift um 15%, z.B. erste Zeile der Überschriften in Vortraege.htm */
	font-size: 1.15em;
}
/* Ende SCHRIFTGÖSSEN */

/* FARBIGER KASTEN in grid-item-Schaltflächen */
.box-rot { /*a-Link als farbiger Kasten mit Überschrift für die grid-item-Schaltflächen */
	display: block;
	margin-bottom: 0.5em;
	background: #640000;
	padding: 0.2em;
	text-align: center;
}
.box-blau { /*a-Link als farbiger Kasten mit Überschrift für die grid-item-Schaltflächen */
	display: block;
	margin-bottom: 0.5em;
	background: #000080;
	padding: 0.2em;
	text-align: center;
}
.box-gruen { /*a-Link als farbiger Kasten mit Überschrift für die grid-item-Schaltflächen */
	display: block;
	margin-bottom: 0.5em;
	background: #005500;
	padding: 0.2em;
	text-align: center;
}
.box-violett { /*a-Link als farbiger Kasten mit Überschrift für die grid-item-Schaltflächen */
	display: block;
	margin-bottom: 0.5em;
	background: #550055;
	padding: 0.2em;
	text-align: center;
}
.box-grau { /*a-Link als farbiger Kasten mit Überschrift für die grid-item-Schaltflächen */
	display: block;
	margin-bottom: 0.5em;
	background: #625e5a;
	padding: 0.2em;
	text-align: center;
}
.box-weiss { /*a-Link als farbiger Kasten mit Überschrift für die grid-item-Schaltflächen */
	display: block;
	margin-bottom: 0.5em;
	background: #ffffff;
	padding: 0.2em;
	text-align: center;
}
/* Ende FARBIGER KASTEN */

.antwort { /*Formatierung für die Quiz-Antwortmöglichkeiten, grüner Kasten mit weißer Schrift */
	font-family: 'OpenSans-bold';
	color: #ffffff;
	padding: 2em 4em;
	width: max-content;
	margin: auto;
	background: #007700;
}
.loesung { /*Formatierung für die Quiz-Lösung, blauer Kasten mit weißer Schrift, in gleicher Breite wie der grüne Antwortkasten */
	font-family: 'OpenSans-bold';
	color: #ffffff;
	padding: 2em 7em;
	width: max-content;
	margin: auto;
	background: #000080;
}
.os-i { /* gleiche Attribute wie .os; die Klasse .os-i (für Initial)ist allerdings notwendig, damit der Pseudoselektor für ein Initial 
nur für Absätze mit dieser Klasse gilt und nicht für alle Absätze. */
	font-family: 'OpenSans';
	font-size: 1em;
	color: #625e5a;
}
.os-i::first-letter { /*macht, das Absätze mit der Klasse .os-i ein Initial über zwei Zeilen in der Schriftart Philosopher bekommen. */
	font-family: 'Philosopher';
	font-size: 3.2em;
	line-height: 1;
	float: left;
/*	margin-top: 0.12em; /*diese ist eine Korrektur für den Firefox-Browser, da dieser die Höhe des Initials offensichtlich falsch berechnet */
	padding-right: 0.04em; /*bestimmt den Abstand zwischen Initale und Text */
	margin-bottom: -0.2em; /* macht, dass die dritte Zeile neben der Initiale nicht auch mit eingerückt wird. */
/*	color: red; /* man könnte dem Initial auch eine eigene Farbe geben */
/*	Bugfix für Firefox-Browser, der die Höhe der Initiale falsch berechnet [@-moz-document url-prefix() {os-i:first-letter {margin-top: 0.15em;}]. Steht am Ende des Stylesheet bei media-queries. */ 
}
header a { /* das ist der Link, der dem Namens-Schriftzug im Header-Bereich unterlegt ist */
	color: #7b7772;
	text-decoration: none; /*ohne Link-Unterstreichung*/
	display: flex; /*muss angegeben werden, damit justify-content seine Wirkung bekommt*/
	justify-content: center; /* stellt den Inhalt mittig dar*/
    align-items: center; /*mittige Ausrichtung in der Vertikalen*/
	background: linear-gradient(#ccc8c2, #f1e6d3 60%); /* ohne Angabe der Richtung ist die Richtung "to bottom" */
	font-family: 'Philosopher';
    font-weight: bold;
	font-size: 2.2222rem; /* daraus ergibt sich auch die Höhe des Name-Bereichs */
	color: #7b7772; /*Textfarbe*/
	padding: 0.1em;
	border-top: 0.1666rem solid #9e927f;
}
.keyframe { /* das ist der Container für das header-img */
	border-top: 0.1666rem solid #9e927f;
	border-bottom: 0.1666rem solid #9e927f;
	background: #f1e6d3; /* macht, dass diese Hintergrundfarbe (beige) sich in die blur-transition  hineinmischt und nicht die body-Hintergrundfarbe (dunkelviolett) */
	overflow: hidden; /* macht, dass die Unschärfe von blur nicht über den Rand des Containers hinaus sichtbar ist */
}
header img { /* bildet einen durchsichtigen Rahmen in dem die keyframe-Animation ablaufen kann. Die Werte sind auf das konkrete Bild bezogen. */
	width: 100%;
	height: auto; /* das Bild nimmt jeweils 100% der verfügbaren Breite ein; die Höhe ergibt sich proportional dazu */
	display: flex; 
/*	justify-content: center; */
	animation-name: blur; /* lässt das unscharfe header-img-Bild mit animation langsam scharf werden */
	animation-duration: 6s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1; /* für endlose Wiederholung Wert: infinite */
	animation-fill-mode: forwards;
}
@keyframes blur {
	from {filter: blur(16px);} 
	to {filter: blur(0px);}
}

a.link2:link {  /*mit diesen Pseudoklassen haben die Links Textfarbe grau, und werden blau bei hover, etc., z.B. in Vortraege.htm */
	color: #625e5a;
	padding: 0.5rem; /* vergrößert den klickbaren Bereich der Schaltfläche */
	margin: -0.5rem;}
a.link2:visited {
	color: #0000FF;}
a.link2:focus {
	color: #0000FF;}
a.link2:hover {
	color: #0000FF;}
a.link2:active {
	color: #0000FF;}

a.link3:link {  /*zusätzlich zu a.link2 steht dem Link dieser Pseudoklasse noch ein Pfeilsymbol und ein Leerzeichen voran*/
	color: #625e5a;
	padding: 0.5rem; /* vergrößert den klickbaren Bereich der Schaltfläche */
	margin: -0.5rem;}
a.link3:visited {
	color: #0000FF;}
a.link3:focus {
	color: #0000FF;}
a.link3:hover {
	color: #0000FF;}
a.link3:active {
	color: #0000FF;}
a.link3:before {
	content: '\2192\00A0';}



/* NAVIGATION */
nav {
	position: sticky;
	top: 0;
	background: linear-gradient(to top, #ccc8c2, #f1e6d3 60%);
	box-shadow: 0rem 0.1667rem 0.1888rem rgba(0, 0, 0, 0.6);
	z-index: 1; /* der z-index ist hier erforderlich, damit das hh-label vor der Transparenz der grid-items liegt */
}
/* CHECKBOX-HACK für HH-ICON mit Transition*/
#hh-checkbox {
	display: none;
}
.hh-label { 
	display: none;
	position: sticky:
	top: 0;
	background: #005500; /* unchecked ist das HH-Icon grün */
	width: 3.75rem;
	height: 2.3rem;
	margin-left: auto;
	margin-right: auto;
	border-radius: 0.2222rem; 
	cursor: pointer;
}
.hh-line { /* die Linien des Hamburger-Icons - werden einzeln animiert */
	display: block; 
	position: relative;
	left:0.6em;
	height: 0.2em;
	width: 2.5em; 
	background: #ffffff;
	border-radius: 2px;
	transition: 0.65s; /* die Transition erfolgt bei check und bei uncheck */
	transition-delay: 0s; /* die Transition startet mit (k)einer Verzögerung, damit erst das Menü erscheint und erst dann das HH-Icon sich verändert */
	transform-origin: center; 
}
.hh-line:nth-child(1) { top: 0.45rem; } 
.hh-line:nth-child(2) { top: 0.85rem; }
.hh-line:nth-child(3) { top: 1.25rem; }

#hh-checkbox:checked + .hh-label .hh-line:nth-child(1){
   transform: translateY(0.59rem) rotate(-40deg);}
#hh-checkbox:checked + .hh-label .hh-line:nth-child(2){
   opacity:0;}
#hh-checkbox:checked + .hh-label .hh-line:nth-child(3){
   transform: translateY(-0.59rem) rotate(40deg);}
#hh-checkbox:checked + .hh-label {
	background: #800000;} /* checked ist das HH-Icon rot */
#hh-checkbox:checked ~ .nav { /* die checkbox triggert, dass das Menü von der linken Seite auf das Display fährt */
	position: absloute;
	left: 3.6rem;
	transition: all 0.75s ease-out;
	z-index: 2;
}
/* Ende CHECKBOX-HACK für HH-ICON mit Transition */

.nav {
	display: block;
	position: sticky; /*scrollt .nav bis an den oberen Rand und fixiert es dann*/
	top: 0;
	z-index: 1; /* der z-index muss hinzugefügt werden, weil sonst der Transparenzeffekt der item-img durch die Navigation hindurchscheint */
}
.nav ul {
	display: flex;
	flex-flow: row; /*kein Umbruch der .nav-Leiste*/
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
	background: linear-gradient(to top, #ccc8c2, #f1e6d3 60%);
}
.nav li {
	position: relative; /*bestimmt auch die Breite des Untermenüs nach dem Inhalt (längstes Wort)*/
	display: flex;
	flex: 1 100%; /*alle li-Elemente haben die gleiche Breite (Verhältnis 1:1:1:1:1:1), wenn die Wortbreite weniger breit ist als diese anteilige Breite. Ansonsten bekommen Elemente mit längeren Wörtern mehr Breite und die restliche Breite teilt sich gleichmäßig auf die anderen Elemente auf. Sie bilden aber stets zusammen 100% der Gesamtbreite.*/
/*	display: block; /*die Schaltflächen haben alle die Breite von 16,666%*, wenn alle Texte in die Schaltflächen passen, sonst bekommen längere Texte breitere Schaltflächen, die Breiten verteilen sich dann entsprechend.*/
/*	overflow: hidden; /*macht, dass die Schrift nicht über die Schaltflächen hinausfließt, sondern abgeschnitten wird. Alle Schaltflächen behalten dann fest die gleiche Breite. Die Untermenüs klappen dann aber nicht mehr aus. */
	font-family: 'Philosopher';
	font-size: 1.3333rem; /* bestimmt die Höhe von .nav*/
}
.nav a {
	width: 100%; /* a-Element nimmt die gleiche Breite an wie das ul-Element und vererbt diese Eigenschaft an ul ul a*/
/*	display: block; /*macht, dass der gesamte li-Block Schaltfläche wird, außerdem bricht der a-Text um, wenn er über die max-Breite hinausgeht*/
	padding-left: 2.2222rem; /*a-Text Einrückung links */
	padding-left:  calc(10px + 30 * ((100vw - 320px) / 760)); /* das padding beträgt bei einer viewport-Breite von 1080px 2.2222rem (40px) und verkleinert sich auf 1rem (10px) bei einer viewport-Breite von 320px. */
/*	padding-left:  calc(18px + 162 * ((100vw - 320px) / 760));*/
	text-decoration: none; /*ohne Link-Unterstreichung*/
	cursor: pointer;
	line-height: 1.25; /*legt die Zeilenhöhe des Schalftlächentextes und damit auch der Schaltfläche fest */
	color:#7b7772; /*Textfarbe des Schaltflächentextes*/
}
.nav a:focus { 
	background: #7b7772; /*ändert Button-Farbe bei focus*/
	color: #f6efe4; /*ändert Text-Farbe bei focus*/
}
.nav a:hover { 
	background: #7b7772; /*ändert Button-Farbe bei hover*/
	color: #f6efe4; /*ändert Text-Farbe bei hover*/
}
.nav a:active {
	background: #8f8981; /*Farbänderung der Schaltfläche bei Mausclick oder Touch*/
	color: #fefdfc; /*Farbänderung des Schaltflächen-Textes bei Mausclick*/
}
.nav ul li:focus > ul { /*macht, dass das Untermenü aufklappt*/
	display: block; 
	min-width: 100%; /* macht, dass das Untermenü mindestens so breit ist, wie das Hauptmenü-li-Element */
}
.nav ul li:hover > ul { /*macht, dass das Untermenü aufklappt*/
	display: block; 
	min-width: 100%; /* macht, dass das Untermenü mindestens so breit ist, wie das Hauptmenü-li-Element */
}
.nav ul li:active > ul { /*macht, dass das Untermenü aufklappt*/
	display: block;
	min-width: 100%;
}
.nav ul ul {
	display: none; /*macht, dass die Untermenüs nicht alle auf einmal aufgeklappt sind*/
	position: absolute; top: 100%; /*das Untermenü schließt lückenlos an das Hauptenü an*/
	width: auto;
	background: #7b7772;
	opacity: 0.93; /*lässt den Hintergrund des Untermenüs ein wenig durchscheinen; das Element und alle Kindelemente zeigen die gleich Deckkraft ggü dem Hintergrund des Elternelements*/
	box-shadow: 0rem 0.1667rem 0.1888rem rgba(0, 0, 0, 0.6);
}
.nav ul ul li {
/*	float: none; /*Untermenü-Punkte stehen untereinander und nicht nebeneinander*/
/*	width: auto; /*Element wird so breit wie nötig, mindestens jedoch so breit wie ul ul*/
	font-family:  'OpenSans';
	font-size: 0.6667em;
/*	font-size: 0.75em;*/
	border: none;
}
.nav ul ul li a {
/*	display: block; /* das gesamte ul ul li-Element wird Schaltfläche; außerdem bricht der a-Text im Block um, 
	wenn er abzüglich des paddings über die Minimumbreite hinausgeht*/
/*	text-align: unset; /*wird benötigt, wenn .nav ul a auf text-align:center gesetzt sind, .nav ul ul a aber linksbündig bleiben sollen*/
	padding: 0.5555rem 1.3888rem 0.5555rem 2.65rem; /* etwas stärker eingerückt als .nav ul ul li:first-child */
	color: #f6efe4; /*Textfarbe Untermenü*/
}
.nav ul ul li:first-child a { /* spricht jeweils nur den ersten Untermenü-Link an */
/*	font-family: 'OpenSans-semibold';
/*	font-size: 0.75em;*/
	padding: 0.5555rem 1.3888rem 0.5555rem 2.2222rem; /* gleiche Einrückung wie in .nav ul li */
}
.nav ul ul a:hover {
	background: linear-gradient(to top, #ccc8c2, #f1e6d3 60%);
/*	background: linear-gradient(to top, rgba(204, 200, 194, 1.0), rgba(241, 230, 211, 1.0) 60%); ein Versuch, durch eine Background-Deckkraft von 1.0 die Transparenz vom Elternelement zu überwinden - funktioniert nicht*/
	color: #7b7772; /*macht, dass die Schriftfarbe des Untermenülistenelements die Farbe wechselt*/
	box-shadow: 0rem 0.1111rem 0.3333rem rgba(0,0,0,0.5);
}
.nav ul ul a:focus {
	background: linear-gradient(to top, #dad5cd, #f6efe4 60%);
	color: #7b7772;
}
.nav ul ul a:active {
	background: linear-gradient(to top, #dad5cd, #f6efe4 60%);
	color: #7b7772;
}
.nav ul ul li:hover > ul {
	display: block; /*macht, dass das Untermenü aufklappt*/
	min-width: 100%;
	width: initial;
}
.nav ul ul li:focus > ul {
	display: block; /*macht, dass das Untermenü aufklappt*/
	min-width: 100%;
	width: initial;
}
.nav ul ul li:active > ul {
	display: block; /*macht, dass das Untermenü aufklappt*/
	min-width: 100%;
	width: initial;
}

a.now-a { /* FMenü-ormatierung für die aktive Seite; gibt der .nav-Schaltfläche und der Schrift von der Seite, auf der man sich befindet, eine andere Farbe */
	background: #7b7772;
	color: #f6efe4;
}
a.now-ul-a, a.now-ul-a:first-child { /* Menü-Formatierung für die aktive Unter-Seite; gibt der .nav-Schaltfläche und der Schrift des Untermenüs von der Seite, auf der man sich befindet, eine andere Farbe; da first-child eine andere Formatierung bekommt, muss es als aktiver Link hier extra angesprochen werden */
	background: linear-gradient(to top, #ccc8c2, #f1e6d3 60%);
	color: #7b7772;
}
/* Ende NAVIGATION */

.error-link {
	background: #7b7772;
	color: #f6efe4;
	text-align: center;
	padding: 0.5rem; /* vergrößert den klickbaren Bereich der Schaltfläche */
	margin: -0.5rem;
}

main {
	background: linear-gradient(#f6efe4, #f5ecdf);
}
.main-1 { /*definiert ein einspaltiges Layout */
	padding-top: 0;
	padding-bottom: 0;
	padding-left:  calc(18px + 162 * ((100vw - 320px) / 760));
	padding-right: calc(18px + 162 * ((100vw - 320px) / 760)); /* Das padding wird in Abhängigkeit von der viewport-Breite berechnet. Es verringert sich nicht proportional, sondern überproportional. Bei 1080px viewport-Breite beträgt das padding 16.6667% von 1080px = 180px und verringert sich bei einer viewport-Breite von 320 bis auf 5.625% von 320px = 18px; bei viewport-Breiten über 1080px wird die Größe durch media-query gekappt. */
/*	z-index: 0;*/
}

/* GRID-ITEMS Schaltflächen mit Bild und Text, Schatten und Bildwechsel bei hover*/

.page-grid { /* definiert den grid-container z.B. für die Start-Seite*/
	display: grid; /* Grid-container, die Kindelemente <article>, <section>, <div>, sind dadurch grid-items */
	grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); /* minmax: Die Zeile wird mit sovielen grit-items aufgefüllt, wie bei der viewport-Größe hineinpassen. Die grid-items, die gebildet worden sind, teilen sich den im viewport jeweils vorhandenen Platz zu gleichen Teilen (1fr), sie variieren in ihrer Größe, wobei die Mindestbreite von 12em nicht unterschritten wird. Alle grid-items sind gleich hoch wie das höchste grid-item. */
	grid-template-rows: auto;
	grid-gap: 1em; /*sorgt für den Abstand zwischen den grid-items */
}
.item { /*definiert die grid-items, Rand, Schatten und transparentem weiß */
	position: relative; /* wird gesetzt, weil so das Link-Element seine Grenzen innerhalb der Grenzen dieses Box-Elements ausdehnen kann */
	height: auto;
	border: 0.0555rem solid #9e927f;
	box-shadow: 0.0555rem 0.1667rem 0.1888rem rgba(0, 0, 0, 0.7);
	background: rgba(255, 255, 255, 0.25);
	padding: 1em;
	z-index: auto;
}
.a-item { /* der Link innerhalb des Grid-Items */
/*	display: block;*/
	text-decoration: none;
	position: static;
}
.a-item::after { /* macht, dass die Schaltfläche des Links (a-item) auf das gesamte Grid-Item ausdehnt und klickbar wird */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.item2 { /*definiert grid-items ohne Rand, Schatten und transparentem weiß */
	position: relative; /* wird gesetzt, weil so das Link-Element seine Grenzen innerhalb der Grenzen dieses Box-Elements ausdehnen kann */
	height: auto;
	z-index: auto;
}
.item:hover, .item:focus, .item:active { /* hebt das item durch einen Schatten hervor, wenn man mit der Maus darüberfährt, wenn man ihn mit der Tab-Taste anwählt und wenn der Link angeklickt wird/ist */
	box-shadow: 0rem 0.83rem 2.22rem -0.22rem rgba(0, 0, 0, 0.75);
}
.item-img, .item-img1, .item-img2 { /* die Bilder nehmen die Breite ein, den .item zur Verfügung stellt, die Höhe ergibt sich entsprechend der Proportionen, das transparente weiß von background hellt den Bildhintergrund gegen die Umgebung auf */
	width: 100%;
	height: auto;
	background: rgba(255, 255, 255, 0.25);
	border: 0.0555rem solid #9e927f;
	margin-bottom: 0.5em;
}
.item-img { /* Das Bild wird mit einer Transparenz von 30% dargestellt, die sich bei :hover auf 10% reduziert */
	filter: opacity(0.7);
}
.item:hover > .item-img { /* Das item-img wird mit einer Transparenz von 30% dargestellt, die sich bei hover, focus und active auf 10% reduziert */
	filter: opacity(0.9);
}
.item:focus > .item-img { /* Das item-img3 wird mit einer Transparenz von 30% dargestellt, die bei hover, focus und active wegfällt */
	filter: opacity(0.9);
}
.item:active > .item-img { /* Das item-img3 wird mit einer Transparenz von 50% dargestellt, die bei hover, focus und active wegfällt */
	filter: opacity(0.9);
}

/* ITEM-IMG-SWAP */

.item-img2 {
	display: none;
}
.item:hover > .item-img1 { /* bei hover, focus oder active wird item-img1 nicht mehr angezeigt */
	display: none;
}
.item:focus > .item-img1 { /* bei hover, focus oder active wird item-img1 nicht mehr angezeigt */
	display: none;
}
.item:active > .item-img1 { /* bei hover, focus oder active wird item-img1 nicht mehr angezeigt */
	display: none;
}
.item:hover > .item-img2 { /* bei hover, focus oder active wird item-img2 angezeigt */
	display: inline-block;
}
.item:focus > .item-img2 { /* bei hover, focus oder  active wird item-img2 angezeigt */
	display: inline-block;
}
.item:active > .item-img2 { /* bei hover, focus oder  active wird item-img2 angezeigt */
	display: inline-block;
}
/* Ende ITEM-IMG-SWAP */
/* ENDE GRID-ITEMS*/

.main-2 { /* definiert den 3spaltigen grid-container für die Webseiten mit grauer Bilder-Fläche am rechten Rand */
	display: grid; /*Grid-Container, die Kind-Elemente <article>, <section>, <div>, .content, .midcolumn und aside sind dadurch grid-items*/
	grid-template-columns: 74% 1% 25%;
	grid-template-rows: auto;
}
.content { /* diese Klasse wird nur in .main-2 angewendet */
	grid-column:1 / 2; /*grid-item, erstreckt sich von der 1. zur 2. Linie, also über die linke Spalte*/
	padding-top: 0;
	padding-bottom: 0;
	padding-left:  calc(14px + 87 * ((100vw - 320px) / 760));
	padding-right: calc(11px + 79 * ((100vw - 320px) / 760)); /* der content-Bereich erstreckt sich über 74% (75% - 1% für den aside-Schatten) der main-Breite von 1080px = 799px (eigentlich 810px). Der Inhalt erstreckt sich über 1/2 dieser Breite; das padding beträgt jeweils 1/8 (12,6408% (eigentlich 12,5%), das padding-rechts beträgt 11,2640%, da 1% von der Schatten-Spalte des aside-Breichs eingenommen wird). 
Das padding wird in Abhängigkeit von der viewport-Breite berechnet. Es verringert sich nicht proportional, sondern überproportional. Bei 1080px viewport-Breite beträgt das padding links 1/8 von 810px (12,6408% von 799px) = 101px und rechts 1/8 minus 1% (11,2640% von 799px) = 90px. Es verringert sich bei einer viewport-Breite von 320px bis auf 5.907% von 237px = 14px links und 4,6414% = 11px rechts. Bei viewport-Breiten über 1080px wird die Größe durch media-query gekappt.*/ 
}
.midcolumn { /* diese Klasse wird nur in .main-2 angewendet */
	grid-column: 2 / 3; /* grid-item, erstreckt sich von der 2. zur 3. Linie, also über die mittlere Spalte, die den Schatten der rechten Spalte beinhaltet. */
	background: linear-gradient(to right, rgba(246,239,228,0) 5%, rgba(116,110,94,0.25) 50%, rgba(0,0,0,0.55) 96%); /* dieser Hintergrund imitiert den Schatten, den aside sonst haben sollte */
}
aside { /* diese Klasse wird nur in .main-2 angewendet */
	grid-column: 3 / 4; /* grid-item, erstreckt sich von der32. zur 4. Linie, also über die rechte Spalte*/
	background: linear-gradient(to right, #808686, #4d5a5a);
	border-left: 1px solid #9e927f;
}
h1 { /* oberste Seitenüberschrift */
	font-family: 'Philosopher';
	font-size: 2.6666rem;
	font-weight: normal;
    font-style: normal;
	text-align: center;
	color: #625e5a;
	margin: 0;
	padding-top: 3.2rem;
	padding-bottom: 1.6rem;
}
h2 { /* Unter-Überschrift zur obersten Seitenüberschrift */
	font-family: 'Philosopher';
	font-size: 1.6666rem;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	color: #625e5a;
	margin: 0;
	padding-bottom: 2.58rem;
}
h3 { /* Vortragsüberschriften auf der Vortragsseite */
	font-family: 'OpenSans-semibold';
	font-size: 1.15rem;
	font-weight: normal; /*erforderlioch, weil sonst die Schrift in die Breite gezogen wird */
	font-style: normal;
	line-height: 1.15; /* line-height ist auf 1.15 gesetzt, damit H3 den gleichen Abstand vom Text hat, wie die Textzeilen untereinander; ansonsten würde H3 die Standard-line-height 1.4 erben was bei einer größeren font-size (1.15) auch zu entsprechend mehr Abstand führen würde. */ 
	color: #625e5a;
	margin: 0;
}
.hr1 { /*horizontale Linie für .main-1-Absätze*/
	width: 25%;
	border: none; /*erforderlich */
	border-top: 0.1111rem solid #9e927f;
	margin: 0 auto 2.7777rem auto;
}
.hr2 { /*horizontale Linie für .main-2-Absätze im article-Bereich*/
	width: 31.25%;
	border: none;
	border-top: 0.1111rem solid #9e927f;
	margin: 0 auto 2.7777rem auto;
}
.hr3 { /*horizontale Linie für aside-Bereich*/
	width: 80%;
	border: none;
	border-top: 0.1111rem solid #9e927f;
	margin: 0 12% 2.7777rem 8%;
}
.filler1 { /* füllt im aside-Bereich den Leerraum auf, damit eine horizontale Linie (hr3) auf gleicher Höhe der horizontalen Linie (hr1) unter der zweizeiligen Seitenüberschrift steht. */
	height: 13.63rem;
	margin: 0 auto;
}
.filler2 { /* füllt im aside-Bereich den Leerraum auf, damit eine horizontale Linie (hr3) auf gleicher Höhe der horizontalen Linie (hr1) unter der einzeiligen Seitenüberschrift steht. */
	height: 9.23rem;
	margin: 0 auto;
}
.filler3{ /* füllt im aside-Bereich den Leerraum auf, damit eine horizontale Linie (hr3) auf gleicher Höhe wie der Text unter einer Überschrift (h2) steht. */
	height: 4.7rem;
	margin: 0 auto;
}
p { /* line-height ist durch body vorgegeben */
    margin: 0 0 1em 0; /* .p ist nach oben nahtlos und hat unten einen Abstand von 1 rem zum nächsten Absatz */
}

/* BILDER */
/*.header-img {
	width: 100%;
	height: auto;
}*/
.aside-img {
	width: 80%;
	height: auto;
	border: 0.0555rem solid #9e927f;
	margin: 0 12% 8% 8%;
	box-shadow: 0.0555rem 0.1667rem 0.3888rem rgba(0, 0, 0, 0.7);
	}
.article-img { /*das Bild ist zentriert und nimmt 70 % der verfügbaren Breite ein */
	width: 70%;
	height: auto;
	border: 0.0555rem solid #9e927f;
	margin: 0% 15% 5% 15%;
	background: rgba(255, 255, 255, 0.25);
	box-shadow: 0.0555rem 0.1667rem 0.3888rem rgba(0, 0, 0, 0.7);
	}
.article-img50 { /* das Bild ist zentriert und nimmt 50 % der verfügbaren Breite ein */
	width: 50%;
	height: auto;
	border: 0.0555rem solid #9e927f;
	margin: 0% 25% 5% 25%;
	background: rgba(255, 255, 255, 0.25);
	box-shadow: 0.0555rem 0.1667rem 0.3888rem rgba(0, 0, 0, 0.7);
	}
.article-img30 { /* das Bild ist zentriert und nimmt 30 % der verfügbaren Breite ein */
	width: 30%;
	height: auto;
	border: 0.0555rem solid #9e927f;
	margin: 0% 35% 5% 35%;
	background: rgba(255, 255, 255, 0.25);
	box-shadow: 0.0555rem 0.1667rem 0.3888rem rgba(0, 0, 0, 0.7);
	}
.article-imgmult { /* mehrere Bilder stehen in einer Reihe und nehmen jeweils 30 % der verfügbaren Breite ein */
	width: 30%;
	height: auto;
	border: 0.0555rem solid #9e927f;
	margin-bottom: 5%;
	margin-left: 12.5%;
	background: rgba(255, 255, 255, 0.25);
	box-shadow: 0.0555rem 0.1667rem 0.3888rem rgba(0, 0, 0, 0.7);
	}
.video70 { /* Videoplayer mit Steuerelementen, Rahmen und Schatten, Breit 70 %*/
	width: 70%;
	height: auto;
	border: 0.0555rem solid #9e927f;
	margin: 0% 15% 0% 15%;
	background: rgba(255, 255, 255, 0.25);
	box-shadow: 0.0555rem 0.1667rem 0.3888rem rgba(0, 0, 0, 0.7);
	}
.audio70 { /*Audioplayer 70% Breite */
	width: 70%;
	border: 0.0555rem solid #9e927f;
}

/* Ende BILDER */

footer {
	display: flex;
	flex: 1 100%; 
    justify-content: center; 
    align-items: center;
/*	height: 3em;*/
	background: linear-gradient(#f1e6d3 15%, #aca79f);
	font-size: 0.9rem; /*bestimmt zusammen mit padding-top und padding-bottom von footer-a die Höhe des flex-containers*/
	color: #7b7772; /*Textfarbe*/
	border-top-width: 0.0555rem;
	border-top-style: solid;
	border-color: #9e927f;
	margin-bottom: 2rem; /*lässt unterhalb des footers einen Rand vor dem Hintergrund, entspricht 40px*/
}
footer a {
	color:#7b7772;
	text-decoration: none; /*ohne Link-Unterstreichung*/
	margin: 0rem 1.1111rem; /*bestimmt den Abstand zwischen den a-Elementen*/
	padding-top: 0.5rem; /*das padding ist so gewählt, dass der footer die gleiche Höhe wie nav hat*/  
	padding-bottom: 0.5rem;
}

/* CHECKBOX-HACK für AUFKLAPPBARER TEXT */ 
/* Jede Funktion benötigt einen eigenen Identifizierer <input id="nn">, die mit der Label-id identisch sein muss <label for="nn"> 
sonst werden auf einer website mit mehreren aufklappbaren Texten alle Texte gleichzeitig aufgeklappt */

.readmore-checkbox { /* das ist die Checkbox, die angeklickt wird. Display none verbirgt die checkbox und es ist nur der clickbare label-Text sichtbar*/
	display: none;
}
.readmore-label, .readmore-label-blau, .readmore-label-violett, .readmore-label-quiz { /*der Mauszeiger wird über dem checkbox-Label zur Hand*/
	cursor: pointer;
/*	position: relative; es hieß, position: relative müsse hier für die Vergrößerung des clickbaren Bereichs mit angegeben werden, weil es sich um einen browser-bug handelt. Trifft auf Firefox nicht zu */
	padding: 0.5rem 1.5rem; /* vergrößert in Kombination mit margin: -0.5rem den klickbaren Bereich der Schaltfläche */
	margin: -0.5rem;
}
.readmore-text { /* das ist der Container für den aufklappbaren Text. So ist der aufklappbare Text nicht sichtbar und verbraucht keinen Platz. Die Elemente in diesem Container dürfen nicht mit rem-Angaben versehen sein, sondern mit em-Angaben, denn sonst können sie font-size:0 nicht erben und würden so nicht unsichtbar. */
	font-size: 0; /* eine Transition von font-size:0 zu font-size:inherit wäre hier unvorteilhaft, weil sich die Buchstaben von 0 vergrößern, was merkwürdig aussieht */
/*	opacity: 0; /* hatte im Browser keine sichtbare Auswirkung */
/*	maximum-height: 0; /* die Höhe auf 0 zu begrenzen funktioniert nur zusammen mit overflow: hidden. Hatte im Browser keine sichtbare Auswirkung */
/*	overflow: hidden;*/
/*	z-index: -5; /* hatte im Browser keine Auswirkung */
}
.readmore-img { 
	height: 2em;
	margin: 0 2em;
}
.readmore-checkbox:checked ~ .readmore-text { 
/*wenn der check-Text geklickt wurde, wird der Ziel-Text ausgeklappt und sichtbar; Der adjacent-sibling-selector "+" funktioniert hier nicht, weil das 
angesprochene Element nicht direkt auf diese Verknüpfung folgt; deswegen muss der general-sibling-combinator "~" (Tilde-Zeichen) genommen werden, weil er 
die folgenden Elemente anspricht, auch wenn sie nicht unmittelbar folgen. Befinden sich mehr als ein ausklappbarer Text auf der Webseite, bewirkt das aber, 
dass alle nachfolgenden Ziel-Texte auf einmal ausgeklappt werden (nicht jedoch die vorausgehenden). Um dieses Problem zu lösen, wird jeder ausklappbare Text 
im html-code mit einem div-tag umschlossen, weil sich der general-sibling-combinator dann nur auf Elemente innerhalb dieses div-tags auswirkt, in diesem Fall dieses eine Element.*/
/*	opacity: 1;*/
	font-size: inherit;
/*	maximum-height: /* auto; hatte im Browser keine sichtbare Auswirkung */
}
.readmore-checkbox + .readmore-label:before { /* Das ist der Text und die Formatierung des Checkbox-Labels wenn es nicht angeklickt ist */
	content: '\25bc\00A0\00A0Mehr lesen';
	color: #640000;
}
.readmore-checkbox:checked + .readmore-label:before { /* Wenn das Checkbox-Element angeklickt ist, ändert sich der Label-Text */
	content: '\25b2\00A0\00A0Weniger lesen';
	color: #640000;
}
.readmore-checkbox + .readmore-label-blau:before {  /* Das ist der Text und die Formatierung des Checkbox-Labels wenn es nicht angeklickt ist */
	content: '\25bc\00A0\00A0Mehr lesen';
	color: #000080;
}
.readmore-checkbox:checked + .readmore-label-blau:before { /* Wenn das Checkbox-Element angeklickt ist, ändert sich der Label-Text */
	content: '\25b2\00A0\00A0Weniger lesen';
	color: #000080;
}
.readmore-checkbox + .readmore-label-violett:before {  /* Das ist der Text und die Formatierung des Checkbox-Labels wenn es nicht angeklickt ist */
	content: '\25bc\00A0\00A0Mehr lesen';
	color: #550055;
}
.readmore-checkbox:checked + .readmore-label-violett:before { /* Wenn das Checkbox-Element angeklickt ist, ändert sich der Label-Text */
	content: '\25b2\00A0\00A0Weniger lesen';
	color: #550055;
}
.readmore-checkbox + .readmore-label-Quiz:before { /* Das ist der Text und die Formatierung des Checkbox-Labels wenn es nicht angeklickt ist */
	content: '\25bc\00A0\00A0L\f6sung zeigen';
	color: #000080;
}
.readmore-checkbox:checked + .readmore-label-Quiz:before { /* Wenn das Checkbox-Element angeklickt ist, ändert sich der Label-Text */
	content: '\25b2\00A0\00A0L\f6sung verbergen';
	color: #000080;
}
/* Ende CHECKBOX-HACK für AUSKLAPPBARER TEXT*/

/* NACH-OBEN-BUTTON */
#NachOben { /*NachOben-Link-Formatierung am rechten unteren Seitenrand; macht, dass die Seite nach oben springt */
 	display: inline-block;
	background-color: #7b7772;
	width: 2.5rem;
	height: 2.5rem;
	text-align: center;
	border-radius: 0.3rem;
	position: fixed;
	bottom: 5rem;	
	right: 0.5rem;
	text-decoration: none;
	cursor: pointer;
	z-index: 100; /* der NachOben-Button soll sich vor allen anderen Ebenen befinden */
}
#NachOben::after { /* formatiert den Chevron-Pfeil innerhalb des NachOben-Button */
	content: "^";
	font-family: 'Philosopher';
	font-weight: normal;
	font-style: normal;
	font-size: 3rem;
	color: #ffffff;
	line-height: 3.6rem;
}
/* Ende NACH-OBEN-BUTTON */

/* MEDIA-QUERIES */
@media only screen and (min-width: 60rem) { 
  html { /* Für viewport-Größen ab 60rem = 1080px wird die variable font-size-Größe auf 18px fix gesetzt. */ 
    font-size: 18px;
  }
  .main-1 { /* Für viewport-Größen ab 1080px werden der linke und der recht Seitenrand auf 16.6667% fix gesetzt. Für kleinere viewport-Größen nimmt dieser Wert kontinuierlich ab. */
	  padding: 0 16%;
  }
  .content { /* Für viewport-Größen ab 1080px werden der linke und der rechte Rand der linken Spalte (.content) auf feste Größen gesetzt, die sich nicht mehr weiter vergrößern. */
	  padding: 0 11.2640% 0 12.6408%;
  } 
}

@media only screen and (max-width: 23.3rem) { /* damit würde auf einem kleinen Display das normale Menü nicht angezeigt werden, sondern das Hamburger-Icon (hh-icon), mit dem das Hamburger-Menü (nav-hh) aufgerufen werden kann. */
	.hh-label { /* das HH-Icon wird angezeigt */
		display: block;
	}
	.nav {
		position: absolute; /* macht, dass .nav außerhalb des Display-Rands geschoben werden kann */
		top: 2.3rem;
		width: 13.5rem;
		left: -50%; /*mit -50% rückt das Menü links aus dem Bildschirmrand heraus; wird durch media-query in den sichtbaren Bereich geschoben */
	}
	.nav ul {
		flex-flow: column; /* .nav-Elemente untereinander*/
		padding-top: 1rem;
		padding-bottom: 1rem;
		padding-left: 1rem;
		background: #625e5a;
		box-shadow: 0.0555rem 0.1667rem 0.1888rem rgba(0, 0, 0, 0.7);
	}
	.nav li {
		font-size: 2em; /* bestimmt die Schriftgröße und die Höhe von .nav-hh */
		border-top: 1px solid #9e927f;
	}
	.nav a {
		line-height: 1.5; /*legt die Zeilenhöhe des Schalftlächentextes und damit auch der Schaltfläche fest */
		color:#f6efe4; /*Textfarbe des Schaltflächentextes*/
	}
	.nav ul li:nth-child(1) { /* Schaltfläche grau */
		background: #625e5a;}
	.nav ul li:nth-child(2) { /* Schaltfläche rot */
		background: #640000;}
	.nav ul li:nth-child(3) { /* Schaltfläche blau */
		background: #000080;}
	.nav ul li:nth-child(4) { /* Schaltfläche violett */
		background: #550055;}
	.nav ul li:nth-child(5) { /* Schaltfläche grün */
		background: #005500;}
	.nav ul li:nth-child(6) { /* Schaltfläche grau */
		background: #625e5a;}
	.nav ul li:last-child {
		border-bottom: 1px solid #9e927f;}
		
	.nav ul ul {
		top: 100%; /*das Untermenü schließt lückenlos an das Hauptenü an*/
		left: 100%; /*das Untermenü schließt links lückenlos an das Hauptenü an*/
		top: 0; /* das Untermenü schließt bündig mit der Oberkante an das li-Elements des Hauptmenüs an */
		padding: 0;
	}
	.nav ul ul li:nth-child(n) { /* da die Farben von.nav ul li vererbt werden, muss der graue Hintergrund für alle Kinderelemente .nav ul ul li neu gesetzt werden */
		background: #625e5a;
		border: none;
	}
	footer { /* kein dunkelvioletter Umrandungsbereich unterhalb der Website */
		margin-bottom: 0rem;
	}
}
@-moz-document url-prefix() { /* Bugfix für Firefox-Browser; da Firefox die Höhe der Initiale falsch berechnet, wird die Position korrigiert */
	.os-i::first-letter {
		margin-top: 0.15em;
	}
}
/* Ende MEDIA-QUERIES */


/*

Zeichen für Quartstrich "–" anstatt Bindestrich "-" &nbsp;&ndash; (mit vorangesetzem, zwingenden Leerzeichen)
Zeichen für typographische Anführungszeichen unten "„" &bdquo; 
Zeichen für typographische Anführungszeichen oben "“" &ldquo;
Zeichen für Guillemets deutsch links "»" &raquo;
Zeichen für Guillemets deutsch rechts "«" &laquo;
Zeichen für Hamburger-Icon Hex: #x2261
Zeichen für general sibling-combinator (Tilde) "~" 
*/