/* cmsms stylesheet: Change modified: 10/19/18 14:24:45 */
/* Farb-Variablen */
/* -------------- */

 /* derzeit für Hyperlinks, Rahmen und Trennlinien */


/* Allgemeine HTML-Bereiche */
/* ------------------------ */

html {
	width: 100%;
	height: auto;					/* damit das Seitenverhältnis der Elemente gewahrt bleibt, falls sich das Bildschirm-Format ändert */
	font-family: sans-serif;
	font-size: 100%;
	line-height: 1.5;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;			/* damit Padding und evtl. Ränder mit in die %-Werte einberechnet werden */
}

body {
	width: 100%;
	height: auto;					/* damit das Seitenverhältnis der Elemente gewahrt bleibt, falls sich das Bildschirm-Format ändert */
	background: #ffffff;
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

div {
	margin: 0;
	padding: 0;
}

*,:after,:before {
	box-sizing: inherit;
}


:focus {outline:none !important;}
::-moz-focus-inner {border:0 !important;}


/* Hauptbereich der Seite */
/* ---------------------- */

main {
	/* Padding muss hier noch 0 sein, damit z.B. die Trennleisten über die volle Breite gehen */
	width: 100%;
	height: auto;
	padding: 0;
	font-family: Roboto, Verdana, Helvetica, Arial, sans-serif;
	color: #5d6376;
	font-weight: normal;
	line-height: 1.5;
	display: block;
	position: relative;
	clear: both;				/* verhindert, dass Elemente links oder rechts hiervon auftauchen */
	z-index: 0;					/* Hauptbereich liegt auf unterster Ebene der Webseite - so stehen Menüs etc. darüber */
}

article, .article-overview {
	/* belegt den kompletten Seitenbereich, aber die äußeren 3 Spalten sind leer */
	width: 100%;
	padding-left: 25%;
	padding-right: 25%;
	display: block;
	float: left;
}

aside {
	display: block;
}

section {
	display: block;
}


/* Überschriften */
/* ------------- */

h1,h2,h3,h4,h5,h6 {
	font-style: normal;
	text-rendering: optimizeLegibility;
	z-index: 2; 						/* eine Ebene höher als das Bild auf der Startseite */
}

h1 {						
	/* Slogans auf der Startseite */
	font-family: "Roboto Slab", Memphis, Clarendon, Rockwell, serif;
	text-transform: uppercase;
	font-weight: bolder;
	color: #5d6376;
	font-size: 5vw;
	text-align: center;
	line-height: 1.25;
	margin-top: 0;
	margin-bottom: 0;
}

h2 {
	/* Themen-Überschriften in der Artikelübersicht und Hauptüberschriften für Artikel */
	font-family: "Roboto Slab", Memphis, Clarendon, Rockwell, serif;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 2.5rem;
	color: #94c11a;
	text-align: left;
	line-height: 1.25;
	margin-top: 1rem;
	margin-bottom: 1rem;

}

h3 {
	/* Überschriften in der Fußzeile */
	font-family: "Roboto Slab", Memphis, Clarendon, Rockwell, serif;
	text-transform: none;
	font-weight: bold;
	font-size: 1.625rem;
	color: #ffffff;
	text-align: center;
	line-height: 1.5;		/* so wie bei den Texten darunter - bestimmt auch den Abstand nach oben und unten, dieser daher 0 */
	margin-top: 0.5rem;		/* Zusammen mit dem Zeilenabstand ergibt das 1.1rem als Abstand nach oben - der maximale Platz, der noch in die Fußzeile passt */
	margin-bottom: 0;
}

h4 {
	/* Artikel-Überschriften in der Artikelübersicht und Zwischenüberschriften in Artikeln */
    font-family: Roboto, Verdana, Helvetica, Arial, sans-serif;
	text-transform: none;
	font-weight: bolder;
	font-size: 1.25rem;
	color: #5d6376;
	text-align: left;
	line-height: 1.5;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

h5 {
	/* derzeit so formatiert wie der Weiterlesen-Link in der Artikelübersicht, aber nicht aktiv eingesetzt */
    font-family: Roboto, Verdana, Helvetica, Arial, sans-serif;
	text-transform: none;
	font-weight: bolder;
	font-size: 0.875rem;
	color: #94c11a;
	text-align: left;
	line-height: 1.5;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

h6 {
	/* Texte in der Fußzeile */
    font-family: Roboto, Verdana, Helvetica, Arial, sans-serif;
	text-transform: none;
	font-weight: bold;
	font-size: 0.75rem;
	color: #94c11a;
	text-align: center;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 0;
}


/* Schrift-Formatierungen */
/* ---------------------- */

p {
	/* Die Standardformatierung für Inhalte, die in CMSMS eingetragen werden. Sie werden automatisch mit derartigen Tags erstellt. */
	margin-bottom: 1rem;
	padding: 0;
	font-size: inherit;
	line-height: 1.5;
	z-index: 2; 						/* eine Ebene höher als das Bild auf der Startseite */
}

b,strong {
	font-weight: bolder;
	line-height: inherit;
}

em,i {
	font-style: italic;
	line-height: inherit;

}

sub {
	font-size: 75%;
	bottom: -0.25em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	font-size: 75%;
	top: -0.5em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

small {
	font-size: 80%;
	line-height: inherit;
}

pre {
	font-family: monospace,monospace;
	font-size: 1em;
	overflow: auto;
	margin: 0;
	padding: 0;
}

code, kbd, samp {
	background-color: #e6e6e6;
	font-family: Consolas,Liberation Mono,Courier,monospace;
	color: #0a0a0a;
	font-size: 1em;
	font-weight: 400;
	padding-top: 0.125rem;
	padding-right: 0.25rem;
	padding-bottom: 0.125rem;
	padding-left: 0.25rem;
	margin: 0;
}

code {
	border: 1px solid #cacaca;
}

cite {
	display: block;
	font-size: 0.8125rem;
	color: #8a8a8a;
}

cite:before {
	content: "— ";
}

blockquote {
	margin-bottom: 1rem;
	padding-top: 0.5625rem;
	padding-right: 1.25rem;
	padding-left: 1.1875rem;
	border-left: 1px solid #D2D2D0;
	color: #8a8a8a;
}

abbr {
	border-bottom: 1px dotted #0a0a0a;
	color: #0a0a0a;
	cursor: help;
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

dfn {
	font-style: italic;
}

mark {
	background-color: #ff0;
	color: #000;
}


/* Hyperlinks */
/* ---------- */

a {
	height: auto;
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
	line-height: inherit;
	text-decoration: none;
	cursor: pointer;
	color: #D2D2D0;
	transition: all 0.2s ease;
}

a:hover, a:focus, a:active, a.menuactive {
	color: #94c11a;
	outline-width: 0;
}

a img {
	border: 0;
}

a h6 {
	color: #D2D2D0;
}

a h6:hover, a h6:focus, a h6:active {
	color: #94c11a;
	outline-width: 0;
}

nav .menudepth0 a {
	/* dauerhaft sichtbare Links des Kopfzeilen-Menüs */
	font-size: 16px;
	font-weight: bolder;
	color: #5d6376;
	line-height: 1.25;
}

nav .menudepth0 a:hover, nav .menudepth0 a:focus, nav .menudepth0 a:active, nav .menudepth0 a.menuactive {
	color: #94c11a;
}

nav .menudepth1 a {
	/* Links in den Untermenüs */
	font-size: 14px;
	font-weight: bold;
	color: #5d6376;
	line-height: 1.25;
}

nav .menudepth1 a:hover, nav .menudepth1 a:focus, nav .menudepth1 a:active, nav .menudepth1 a.menuactive {
	color: #94c11a;
}

.article-menu a {
	/* der Weiterlesen-Link in der Artikelübersicht */
    font-family: Roboto, Verdana, Helvetica, Arial, sans-serif;
	text-transform: none;
	font-weight: bolder;
	font-size: 0.875rem;
	color: #94c11a;
	text-align: left;
	line-height: 1.5;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}


/* Tabellenformatierung */
/* -------------------- */

table {
	width: 100%;
	margin-bottom: 1rem;
	border-radius: 0;
}

table thead {
	color: #0a0a0a;
	background-color: #f8f8f8;
	border: 1px solid #f1f1f1;
}

table thead td, table thead th {
	margin: 0;
	padding-top: 0.5rem;
	padding-right: 0.625rem;
	padding-bottom: 0.625rem;
	padding-left: 0.625rem;
	font-weight: 700;
	text-align: left;
}

table thead tr {
	background: transparent;
}

table tbody {
	border: 1px solid #f1f1f1;
	background-color: #fefefe;
}

table tbody td, table tbody th {
	margin: 0;
	padding-top: 0.5rem;
	padding-right: 0.625rem;
	padding-bottom: 0.625rem;
	padding-left: 0.625rem;
}

table tbody tr:nth-child(even) {
	border-bottom: 0;
	background-color: #f1f1f1;
}

table tfoot {
	background-color: #f1f1f1;
	color: #0a0a0a;
}

table tfoot tr {
	background: transparent;
}

table tfoot td,table tfoot th {
	margin: 0;
	padding-top: 0.5rem;
	padding-right: 0.625rem;
	padding-bottom: 0.625rem;
	padding-left: 0.625rem;
	font-weight: 700;
	text-align: left;
}

table caption {
	padding-top: 0.5rem;
	padding-right: 0.625rem;
	padding-bottom: 0.625rem;
	padding-left: 0.625rem;
	font-weight: 700;
}


/* Medienbereiche */
/* -------------- */

img {
	border-style: none;
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
	-ms-interpolation-mode: bicubic;
}

figure {
	display: block;
	margin-left: 2.5rem;
	margin-top: 1rem;
	margin-right: 2.5rem;
	margin-bottom: 1rem;
}

figcaption {
	display: block;
}

svg:not(:root) {
	overflow: hidden;
}

audio,video {
	display: inline-block;
}

audio:not([controls]) {
	display: none;
	height: 0;
}


/* Eingabefelder und Schaltflächen */
/* ------------------------------- */

button,input,optgroup,select,textarea {
	font-family: sans-serif;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

form {
  padding-left: 1rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  margin: 0;
}

fieldset {
	border: 1px solid silver;
	margin: 0 2px;
	padding: .35em .625em .75em;
}

legend {
	box-sizing: border-box;
	display: table;
	max-width: 100%;
	padding: 0;
	color: inherit;
	white-space: normal;
	margin-bottom: .5rem;
}

input {
	overflow: visible;
	color: #cacaca;
}

input:disabled,input[readonly],textarea:disabled,textarea[readonly] {
	background-color: #e6e6e6;
	cursor: not-allowed;
}

input[type=search] {
	box-sizing: border-box;
}

textarea {
	max-width: 100%;
	min-height: 50px;
	height: auto;
	border-radius: 0;
	color: #cacaca;
	overflow: auto;
}

textarea[rows] {
	height: auto;
}

label {
	display: block;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.8;
	color: #0a0a0a;
}

button {
	overflow: visible;
	padding: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	line-height: 1;
	text-transform: none;
}

.button {
  	display: inline-block;
	vertical-align: middle;
	margin-bottom: 1rem;
	padding-top: 0.85em;
	padding-right: 1em;
	padding-bottom: 0.85em;
	padding-left: 1em;
	background-color: #1779ba;
	border: 1px solid transparent;
	border-radius: 5px;
	font-size: 0.9rem;
	color: #fefefe;
	line-height: 1;
	text-align: center;
	-webkit-appearance: none;
	-webkit-transition: background-color .25s ease-out,color .25s ease-out;
	transition: background-color .25s ease-out,color .25s ease-out;
	cursor: pointer;
}

.button:hover {
  background: #5d6376;
  color: #D2D2D0;
}

.button:focus,.button:hover {
	background-color: #14679e;
	color: #fefefe;
}

select {
	box-sizing: border-box;	
	width: 100%;
	height: 2.4375rem;
	margin-bottom: 1rem;
	padding-top: 0.5rem;
	padding-right: 1.5rem;
	padding-bottom: 0.5rem;
	padding-left: 0.5rem;
	background-color: #fefefe;
	border: 1px solid #cacaca;
	border-radius: 0;
	text-transform: none;
	font-family: inherit;
	font-size: 1rem;
	line-height: normal;
	color: #0a0a0a;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
	background-origin: content-box;
	background-position: right -1rem center;
	background-repeat: no-repeat;
	background-size: 9px 6px;
	transition: box-shadow .5s,border-color .25s ease-in-out;
	-webkit-transition: border-color .25s ease-in-out,-webkit-box-shadow .5s;
}

select:focus {
	background-color: #fefefe;
	outline: none;
	border: 1px solid #8a8a8a;
	box-shadow: 0 0 5px #cacaca;
	transition: box-shadow .5s,border-color .25s ease-in-out;
	-webkit-transition: border-color .25s ease-in-out,-webkit-box-shadow .5s;
}

select:disabled {
	background-color: #e6e6e6;
	cursor: not-allowed;
}

progress {
	display: inline-block;
	vertical-align: baseline;
}

details {
	display: block;
}

summary {
	display: list-item;
}

menu {
	display: block;
}

canvas {
	display: inline-block;
}


/* Spaltenraster */
/* ------------- */

.single_column {
	/* 1/12 einer Seite - mit 3.5 % Außenpadding schon einberechnet, da im übergeordnete Element. Erstmal ohne max-width, da sonst Logo und Fußzeilen-Spalten zu früh umgebrochen werden würden */
	min-width: 8.33333%;	
	height: 100%;			/* die volle Höhe des Elementes ausnutzen, das die Spalte enthält */
	float: left;
}

.double_column {
	/* 1/6 einer Seite - mit 3.5 % Außenpadding schon einberechnet, da im übergeordnete Element. Erstmal ohne max-width, da sonst Logo und Fußzeilen-Spalten zu früh umgebrochen werden würden */
	min-width: 16.66667%;
	height: 100%;			/* die volle Höhe des Elementes ausnutzen, das die Spalte enthält */
	float: left;
}


/* Listen- und Menü-Einträge */
/* ------------------------- */

ol {
	margin-left: 1.25rem;
	margin-bottom: 1rem;
	list-style-position: outside;
	line-height: 1.6;
}

ul {
	/* Allgemeine Menülisten ohne Bullets! Ränder sind dennoch explizit zu entfernen. */
	list-style-type: none;	
	margin: 0;
	padding: 0;
	list-style-position: outside;
	line-height: 1.6;
}

li {
	font-size: inherit;
	margin: 0;
	padding: 0;
}

nav ul {
	/* sicherstellen, dass keine Bullets im Menü vorkommen */
	list-style-type: none;	
	margin: 0;
	padding: 0;
}

nav li {
	/* Farbe, Rahmen und Padding ( in % des nav-Bereichs) für die einzelnen Einträge im Hauptmenü */
	background-color: #ffffff;
	border: 1px inset;
	border-style: solid;
	border-color: #D2D2D0;
}

dl dt {
	margin-bottom: 0.3rem;
	font-weight: 700;
}

dd {
	margin: 0;
	padding: 0;
}


/* Kopfleiste mit Logo und Übersetzungs-Buttons */
/* --------------------------------------------  */

header {
	width: 100%;
	height: 8rem;						/* erst einmal konstante Höhe unabhängig vom verwendeten Display */
	background-color: #ffffff;
	padding-left: 3.5%;
	padding-right: 3.5%;
	padding-bottom: 1.1rem;				/* wie bei der Fußzeile, wenn man dort den Zeilenabstand der h3 mit einberechnet */
	display: flex;						/* spart die Angabe der Abstände zwischen Logo, nav und Sprachauswahl */
	flex-direction: row;				/* damit die Hauptelemente der Kopfleiste immer nebeneinander stehen... */
	flex-wrap: nowrap;					/* ...und nicht umgebrochen werden */
	align-items: stretch;				/* damit jede Spalte auf den Inhalt der höchsten hochskaliert wird */
	justify-content: space-between;		/* damit ist das Logo linksbündig, das Übersetzungsmenü rechtsbündig und der Abstand zur Navigation jeweils gleich */ 
	position: sticky;					/* damit die Kopfzeile auf jedem Gerät mitkommt, egal wo man gerade hingescrollt hat */
	left: 0;
	top: 0;
	clear: both;						/* verhindert, dass Elemente links oder rechts hiervon auftauchen */
	z-index: 99;						/* damit die Kopfzeile über den Trennern liegt */
 }

#logo-container{
	display: flex;						/* zur einfacheren Anordnung des Logos */
	flex-direction: row;				/* Logo steht horizontal... */
	align-items: flex-end;				/* ...unten auf dem Padding des Headers */
	padding-right: 2.375rem;			/* dann reicht der Container bis ans Logo - hilfreich bei kleinen Bildschirmen */
}
 
.main-menu {
	/* das Hauptmenü - unabhängig davon, ob es ein Dropdown oder Drilldown ist */
	width: 100%;					/* der komplette nav-Bereich */
	height: 100%;
	display: flex;					/* für die einfachere Ausrichtung der Menüpunkte */
	flex-wrap: nowrap;				/* Menü darf nicht umgebrochen werden! */
	justify-content: flex-start;	/* Menüboxen sind linksbündig... */
	align-items: flex-end;			/* ...und liegen am Boden der Kopfleiste */
	z-index: 100;					/* hoher Wert, damit immer sichtbar */
	position: relative;				/* damit Sub-Menü von hier aus positioniert werden kann */
}

#main-logo {
	/* linksbündig mit einer Höhe von 4/5 der Kopfzeile */
	float: left;
	width: auto;
	height: 6.4rem;
}

#language-selection {
/* derzeit existiert nur ein Platzhalter-Text, aber von dieser Position soll das Menü einmal nach links aufgebaut werden */
	float: right;
	display: flex;					/* zur einfacheren Anordnung */
	flex-direction: row;			/* generell horizontale Anordnung des Menüs */
	justify-content: flex-end;		/* richtet die Inhalte rechtsbündig aus */ 
	padding-top: 0.2rem;			/* oben bündig mit dem Logo */
}



/* horizontales Dropdown-Menü für größere Bildschirme */
/* -------------------------------------------------- */

@media screen and (min-width: 1056px) {

	/* Das Hauptmenü hat auf großen Bildschirmen... */
	nav {
		width: 50%;						/* ...die Breite von 6 Spalten im Header */
 		height: 100%;					/* ...die Höhe des Headers */
		position: static;				/* Position liegt statisch im Header... */
		left: 25%;						/* ...nämlich ab der 4. Spalte von links */
		float: left;
		display: block;					/* Menü ist permanent aktiviert */
	}
	
	/* Die Checkbox, mit der das Menü auf kleinen Bildschirmen aktiviert wird, muss hier natürlich ausgeblendet werden... */	
	#menu-check {
		display: none;
	}
	
	/* ...ebenso wie der Bereich, in dem der Menü-Button steckt */
	.menu-toggle {
		display: none;
	}	

	/* Bei hohen Auflösungen ist das Menü horizontal... */
	.main-menu {
		flex-direction: row;
	}
	
	/* ... und zeigt die einzelnen Menüpunkte mit 1/6 Größe des nav-Bereiches an - hier prozentual, damit das responsive Design funktioniert */
	nav .menudepth0 {
		min-width: 16.66667%;
		max-width: 16.66667%;
		justify-content: flex-start;		/* Text im horizontalen Haupt-Menü linksbündig */
	}
	
	/* sobald auf ein Feld in der Kopfzeile gezeigt wird, das zugehörige Untermenü sichtbar machen */
	nav .menudepth0:hover .sub-menu {
		display: flex;
		flex-direction: column;			/* Sub-Menüboxen werden vertikal untereinander aufgereiht... */
		justify-content: flex-start;	/* ... und zwar von der linken Seite ab... */
		align-items: flex-start;		/* ... und sie beginnen oben */
	}

}

nav .menudepth0 {
	/* Hauptfelder des Kopfzeilen-Menüs */
	float: left;
	height: 3.75rem;
	padding: 0.5rem;					/* hier ist ein fester Wert in jeder Richtung sinnvoll */
	position: relative;					/* zwingend, damit Sub-Men+ unter diesem Block anfängt und nicht links am kompletten nav-Bereich */
	display: flex;
	flex-direction: row;
	align-items: center;				/* Text im Haupt-Menü vertikal mittig */
	z-index: 200;						/* liegt über der Kopfleiste selbst */
}

.sub-menu {
	/* der Block fürs Untermenü, der normalerweise unsichtbar ist */
	position: absolute;					/* nötig, damit das Sub-Menü beim Hauptmenü erscheint und nicht woanders */
	width: 100%;						/* so breit wie der darüber liegende Hauptmenü-Punkt */
	top: 100%;							/* damit der komplette Menüblock unter dem Hauptmenü erscheint, egal wie hoch er ist */
	left: 0;
	display: none;		
}

nav .menudepth1 {
	/* Felder für Untermenüs - die Breite nimmt dabei das volle Sub-Menü ein */
	float: left;
	min-width: 100%;
	max-width: 100%;
	height: 3rem;
	padding: 0.5rem;					/* hier ist ein fester Wert in jeder Richtung sinnvoll */
	z-index: 999;						/* damit diese über allen anderen Feldern stehen */
	display: flex;
	flex-direction: row;
	justify-content: flex-start;		/* Text im Sub-Menü linksbündig */
	align-items: center;				/* Text im Sub-Menü vertikal mittig */
	z-index: 200;						/* etwas höher als die Kopfleiste */
}


/* Menü-Button für kleine Bildschirme inkl. vertikales Drilldown-Menü */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 1056px) {

	/* Auf kleinen Bildschirmen hat der Navigationsbereich... */
	nav {
		width: 100%;					/* ...die Breite des kompletten Bildschirms */
		height: 100%;					/* ...die Höhe abhängig von den enthaltenen Menüpukten */
		position: absolute;				/* damit Positionierung direkt unter dem Menü-Button möglich ist */
		right: 0;						/* Beginn des Menüs rechtsbündig... */
		top: 6rem;						/* ...und liegt 1rem unter dem Menü-Button */
		float: right;
		padding-left: 3.5%;				/* wie im Header selbst */
		padding-right: 3.5%;			/* wie im Header selbst */
		display: none;					/* Aktivierung nur über den Checkbox Hack möglich */
	}
	
	/* Mit dieser Checkbox wird das Menü aktiviert - sie ist aber ausgeblendet, da sie nur stören würde! */	
	#menu-check {
		display: none;
	}
	
	/* der Bereich, in dem der Menü-Button steckt - 1/4 so hoch und breit wie die Kopfzeile */
	.menu-toggle {
		width: 2rem;
		height: 2rem;
		position: absolute;
		right: 3.5%;				/* Menü liegt am rechten Ende der letzten Spalte... */
		top: 3rem;					/* ... und vertikal mittig auf der Kopfzeile  */
		float: right;
		display: block;				/* muss natürlich sichtbar sein */
		cursor: pointer;			/* damit klar ist, dass der Button auch klickbar ist, wird der Mauszeiger darauf zum Handsymbol */
	}

	/* Die IcoMoon-SVG als Menüsymbol - wegen der Skalierung liegt sie leicht außerhalb des Containers und muss deswegen nochmal nachpositioniert werden */	
	#menu-check ~ .menu-toggle #menu-icon {
		transform: scale(2);		/* ... und muss deswegen nochmal auf die doppelte Größe skaliert werden */
		fill: #5d6376;			/* ... und ist normalerweise dunkelgrau */
		position: absolute;
		left: 8px;
		top: 10px;
	}

	/* Aktivierung der Navigation, wenn der Menü-Button geklickt wird! */
	#menu-check:checked ~ nav {
		display: block;
	}
	
	/* dauerne Färbung der SVG, wenn Menü aktiv ist - wie später bei den einzelnen Menüpunkten */
	#menu-check:checked ~ .menu-toggle #menu-icon {
		fill: #94c11a;
	}
	
	/* das auf kleinen Bildschirmen erscheinende Menü ist vertikal... */
	.main-menu {
		flex-direction: column;
	}
	
	/* ... mit 1 Spalte Breite - diese ist hier festgesetzt, damit sie auf kleinen Bildschirmen nicht versehentlich umbricht */
	nav .menudepth0 {
		min-width: 9.3rem;
		max-width: 9.3rem;
		justify-content: flex-end;		/* Text im horizontalen Haupt-Menü rechtsbündig */
	}

}


/* Artikel-Übersicht */
/* ----------------  */

.article-menu .menudepth0 {
	/* Zusammenfassungen in der Artikelübersicht haben zwar wie die Kopfzeile Menütiefe 0, müssen aber separat von dieser definiert werden! */
	width: 100%;
}


/* Trennbereiche */
/* ------------- */

#main-image {
	/* Das Bild auf der Startseite, welches diese komplett ausfüllt */
	width: 100%;				/* Die komplette Breite des main-Bereiches, also die komplette Seite... */
	height: auto;				/* ...wobei das Seitenverhältnis beibehalten wird */
	position: relative; 		/* das Bild würde sonst den main-Bereich nicht vergrößern, der die Fußleiste nach unten schiebt */
	z-index: 1; 				/* geringerer Wert als beim Trenntext nötig, damit die davor liegenden Schriften auftauchen */
}	

.text-on-main-image {
	text-align: center;
	line-height: 1.25;
	position: absolute;			/* Absolut im Vergleich zum main-Bereich positioniert... */
	top: 4vw;					/* vw hier zwingend, damit Text fest positioniert bleibt, wenn man die horizontale Auflösung skaliert */
	z-index: 5;					/* Muss etwas höher sein als der Z-Index des Main_Image, sonst würden die Schriften verdeckt */
}

.text-on-main-image p {
	/* Spezialformatierung, damit Text auf der Startseite zweifarbig erscheinen kann, sofern er als normaler Absatz in CMSMS eingegeben wird */
	font-family: "Roboto Slab", Memphis, Clarendon, Rockwell, serif;
	text-transform: uppercase;
	font-weight: bolder;
	color: #ffffff;
	font-size: 5vw;				/* die gleiche Einstellung wie bei h1 */
	text-align: center;
	line-height: 1.25;
	margin-top: 0;
	margin-bottom: 0;
}

.divider {
	/* die allgemeinen Container für die beiden Trenn-Grafiken */
	width: 100%;				/* damit der volle Bildschirm zur Verfügung steht */
	margin-top: 0;
	margin-bottom: 0;
}

#top-divider {
	/* Der Trenner zwischen Kopfzeile und dem eigentlichen Text */
	width: 100%;				/* damit der volle Bildschirm vom Trenner eingenommen wird... */
	height: auto;				/* ... und die Skalierung bewahrt wird */
	margin-top: 0;
	margin-bottom: 3.125rem;	/* 4.125rem minus die 1rem, die bereits in der h2 definiert sind, falls es kein Header-Bild gibt */
	z-index: 1; 				/* wie beim Bild der Startseite */
}

#bottom-divider {
	/* Der Trenner zwischen Fußzeile und dem eigentlichen Text */
	width: 100%;				/* damit der volle Bildschirm vom Trenner eingenommen wird... */
	margin-top: 4.125rem;		/* ... und die Skalierung bewahrt wird */
	margin-bottom: 0;
	z-index: 1; 				/* wie beim Bild der Startseite */
}

hr {
	/* einfache hellgraue Trennlinie */
	max-width: 100%;			/* d.h. maximal die Breite des Elternelements */
	height: 0;
	overflow: visible;
	clear: both;				/* damit nichts versehentlich neben dem Trenner steht */
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #D2D2D0;
	border-left: 0;
}

#copyright-divider {
	/* Trennlinie für den Copyright-Breich mit geringeren Abständen nach oben und unten */
	margin-top: 0.5rem;
	margin-bottom: 0;
}


/* Fußleiste */
/* --------- */

footer {
	width: 100%;
	padding-left: 3.5%;
	padding-right: 3.5%;
	margin: 0;
	background: #5d6376;
	display: flex;						/* spart die Angabe von Abständen und Umbrüchen */
	flex-wrap: wrap;					/* damit werden Navigation und Copyright-Bereich automatisch umgebrochen, da sie jeweils die vollen 100% Breite einnehmen */
	position: relative;
	clear: both;						/* verhindert, dass Elemente links oder rechts hiervon auftauchen */
	z-index: 50;						/* damit sie über eventuellen Trennern liegt, aber unter der Kopfzeile / den Menüs */
}

/* Die Fußzeile soll auf großen Bildschirmen eine feste Höhe haben, sich auf mobilen Geräten aber dem Inhalt entsprechend skalieren */
@media screen and (max-width: 768px) {
	footer {
		height: auto;
	}
}
@media screen and (min-width: 768px) {
	footer {
		height: 8rem;
	}
}

#footer-menu {
	min-width: 100%;					/* damit die Flexbox für den nachfolgenden Copyright-Bereich eine neue Zeile generiert */
	display: flex;						/* spart die Angabe der Abstände zwischen den drei Spalten */
	flex-wrap: nowrap;					/* Spalten werden nicht umgebrochen */
	align-items: stretch;				/* damit jede Spalte auf den Inhalt der höchsten hochskaliert wird */
	justify-content: space-between;		/* damit ist die linke Spalte linksbündig, die rechte Spalte rechtsbündig und der Abstand zur mittleren Spalte jeweils gleich */ 
}

/* Das Fußzeilen-Menü soll auf großen Bildschirmen horizontal verlaufen, auf kleinen vertikal */
@media screen and (max-width: 600px) {
	#footer-menu {
		flex-direction: column;
	}
}
@media screen and (min-width: 600px) {
	#footer-menu {
		flex-direction: row;
	}
}

#copyright {
	min-width: 100%;					/* damit die Flexbox diesen Bereich auf eine neue Zeile schiebt */
}

footer small {
	/* der Text im Copyright-Bereich */
	text-transform: uppercase;
	color: #D2D2D0;
	line-height: 1.5;
	text-align: center;
}