@font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'Roboto';
 	font-style: normal;
 	font-weight: 100;
 	src: url('../fonts/roboto-v30-latin-100.woff2') format('woff2');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* roboto-100italic - latin */
 @font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'Roboto';
 	font-style: italic;
 	font-weight: 100;
 	src: url('../fonts/roboto-v30-latin-100italic.woff2') format('woff2');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* roboto-300 - latin */
 @font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'Roboto';
 	font-style: normal;
 	font-weight: 300;
 	src: url('../fonts/roboto-v30-latin-300.woff2') format('woff2');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* roboto-300italic - latin */
 @font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'Roboto';
 	font-style: italic;
 	font-weight: 300;
 	src: url('../fonts/roboto-v30-latin-300italic.woff2') format('woff2');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* roboto-regular - latin */
 @font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'Roboto';
 	font-style: normal;
 	font-weight: 400;
 	src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* roboto-italic - latin */
 @font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'Roboto';
 	font-style: italic;
 	font-weight: 400;
 	src: url('../fonts/roboto-v30-latin-italic.woff2') format('woff2');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* roboto-500 - latin */
 @font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'Roboto';
 	font-style: normal;
 	font-weight: 500;
 	src: url('../fonts/roboto-v30-latin-500.woff2') format('woff2');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* roboto-500italic - latin */
 @font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'Roboto';
 	font-style: italic;
 	font-weight: 500;
 	src: url('../fonts/roboto-v30-latin-500italic.woff2') format('woff2');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* roboto-700 - latin */
 @font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'Roboto';
 	font-style: normal;
 	font-weight: 700;
 	src: url('../fonts/roboto-v30-latin-700.woff2') format('woff2');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* roboto-700italic - latin */
 @font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'Roboto';
 	font-style: italic;
 	font-weight: 700;
 	src: url('../fonts/roboto-v30-latin-700italic.woff2') format('woff2');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* roboto-900 - latin */
 @font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'Roboto';
 	font-style: normal;
 	font-weight: 900;
 	src: url('../fonts/roboto-v30-latin-900.woff2') format('woff2');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* roboto-900italic - latin */
 @font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'Roboto';
 	font-style: italic;
 	font-weight: 900;
 	src: url('../fonts/roboto-v30-latin-900italic.woff2') format('woff2');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* dm-serif-display-regular - latin */
 @font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'DM Serif Display';
 	font-style: normal;
 	font-weight: 400;
 	src: url('../fonts/dm-serif-display-v15-latin-regular.woff2') format('woff2');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* dm-serif-display-italic - latin */
 @font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'DM Serif Display';
 	font-style: italic;
 	font-weight: 400;
 	src: url('../fonts/dm-serif-display-v15-latin-italic.woff2') format('woff2');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* audiowide-regular - latin */
 @font-face {
 	font-display: swap;
 	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
 	font-family: 'Audiowide';
 	font-style: normal;
 	font-weight: 700;
 	src: url('../fonts/Audiowide-Regular.ttf') format('truetype');
 	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }


 :root {
 	--farbe1: #1a4273;
 	--farbe3: #009FE3;
 	--farbe2: #313131;
 	/*Base Color */
 	--farbe4: #bfe2ff;
 	--frabe5: #80c6ff;
 	--frabe6: #ff8200;
 	--farbe7: #b35b00;
 	--farbe8: #ffe0bf;
 	--farbe9: #ffc180;
 	--farbebox: #DBEEE8;
 	--schrift1: "Roboto", sans-serif;
 	--schrift2: "Audiowide", sans-serif;
 	--schrift3: "Audiowide", sans-serif;
 }


 .custom-list {
 	margin-left: 40px;
 	line-height: 1.6;
 }

 .custom-list li {
 	margin-bottom: 10px;
 }

 .bp

 /*b = links neben Bild */
 	{
 	font-family: var(--schrift1);
 	font-weight: 300;
 	font-style: normal;
 	font-size: 16pt;
 	line-height: 1.3em;
 }

 .bh {
 	font-family: var(--schrift3);
 	font-weight: 700;
 	font-style: normal;
 	font-size: 24pt;
 	line-height: 1em;
 	color: var(--farbe1);
 }

 .bh4 {
 	font-family: var(--schrift2);
 	font-weight: 700;
 	font-style: normal;
 	padding-bottom: 0.3em;
 	font-size: 14pt;
 	line-height: 1em;
 	color: var(--farbe1);
 }


 .ba {
 	color: var(--farbe1);
 	font-family: var(--schrift1);
 	font-weight: normal;
 	font-size: 16pt;
 	line-height: 1.2em;
 }

 /* CSS für die Klasse Texp */
 .Texp {
 	font-family: "Roboto", sans-serif;
 	font-weight: 300;
 	font-style: normal;
 	font-size: 15pt;
 	line-height: 2em;
 	color: #000000;
 	text-align: justify;
 }

 .TexUnterT {
 	font-family: "Roboto", sans-serif;
 	font-weight: 700;
 	font-style: italic;
 	font-size: 17pt;
 	line-height: 1.3em;
 	color: var(--farbe1);
 	text-align: left;
 }

 .Texh3 {
 	font-family: "Roboto", sans-serif;
 	font-weight: 700;
 	font-style: normal;
 	font-size: 24pt;
 	line-height: 3em;
 	color: var(--farbe1);
 }

 .beweis {
 	text-align: justify;
 }

 .qed {
 	float: right;
 }

 .container1 {
 	display: flex;
 	align-items: left;
 	/* Zentriert den Inhalt horizontal */
 	justify-content: flex-start;
 	/* Ausrichtung des Inhalts am Anfang des Containers */
 }

 .header-flex-container {
 	display: flex;
 	align-items: center;
 	/* Zentriert die Items vertikal */
 	justify-content: start;
 	/* Startet die Ausrichtung am Anfang des Containers */
 }

 .bild-container img {
 	display: flex;
 	/* Aktiviert Flexbox */
 	height: auto;
 }

 .text-container {
 	padding-left: 0px;
 	/* Fügt etwas Platz zwischen Bild und Text hinzu */
 }

 .icons a {
 	margin-right: 10px;
 	/* Fügt rechts von jedem Icon etwas Abstand hinzu */
 	color: #374A1E;
 	/* Setzt die Farbe der Icons. Ändern Sie diesen Wert nach Bedarf. */
 }

 .icons a:hover {
 	color: #555;
 	/* Farbänderung beim Hover für eine visuelle Rückmeldung */
 }

 .download-title {
 	display: block;
 	/* Sorgt dafür, dass "Downloads:" über den Icons erscheint */
 	font-size: 0.7em;
 	/* Passt die Größe der Beschriftung an */
 	margin-bottom: 5px;
 	/* Fügt einen kleinen Abstand zwischen Beschriftung und Icons hinzu */
 }

 .header-flex-container {
 	display: flex;
 	align-items: center;
 	/* Zentriert die Items vertikal */
 	justify-content: start;
 	/* Startet die Ausrichtung am Anfang des Containers */
 }

 body {
 	background: #ffffff;
 }

 h3,
 h4,
 h5,
 h6,
 body,
 input,
 textarea,
 select {
 	font-family: "Roboto", sans-serif;
 	font-weight: bold;
 	font-style: normal;
 	font-size: 20pt;
 	line-height: 1em;
 	color: var(--farbe1);
 }

 h1,
 h2 {
 	font-family: var(--schrift1);
 	font-weight: bold;
 	font-style: normal;
 	font-size: 20pt;
 	line-height: 1.5em;
 	color: var(--farbe1)
 }

 h1 a,
 h2 a,
 h3 a,
 h4 a,
 h5 a,
 h6 a {
 	color: #374A1E;
 	text-decoration: none;
 }

 h3 {
 	font-family: "Roboto", sans-serif;
 	font-weight: 700;
 	font-style: normal;
 	font-size: 24pt;
 	line-height: 2em;
 	color: var(--farbe1);
 }

 p {
 	font-family: "Roboto", sans-serif;
 	font-weight: 300;
 	font-style: normal;
 	letter-spacing: 0px;
 	font-size: 16pt;
 	line-height: 1.3em;
 	color: #000000;
 	text-align: justify;
 	hyphens: auto;
 }

 strong,
 b {
 	font-weight: bold;
 	color: #374A1E;
 }

 em,
 i {
 	font-style: italic;
 }

 a {
 	color: #374A1E;
 }

 a:hover {
 	text-decoration: none;
 }

 header {
 	margin-bottom: 2em;
 }

 #header h2 {
 	font-size: 3em;
 }

 #header .byline {
 	margin: 0.5em 0 0 0;
 	padding: 0.50em 0 0.5em 0;
 }

 /*********************************************************************************/
 /* Header                                                                        */
 /*********************************************************************************/

 #header {
 	padding: 5em 0em;
 	text-align: center;
 }

 .homepage #header {
 	padding: 2em 0em 0em 0em;
 }

 /*********************************************************************************/
 /* Logo                                                                          */
 /*********************************************************************************/

 #logo {
 	margin-bottom: 1em;
 }

 #logo h1 {
 	font-family: var(--schrift3);
 	display: block;
 	letter-spacing: -2px;
 	text-decoration: none;
 	line-height: 0.5em;
 	font-size: 4em;
 	font-weight: 900;
 	color: var(--farbe1);
 }

 #logo span {
 	font-family: var(--schrift3);
 	font-style: normal;
 	line-height: 1em;
 	display: block;
 	padding-top: 0em;
 	letter-spacing: 1px;
 	font-size: 2em;
 	font-weight: 900;
 	color: var(--farbe1);
 	margin-bottom: 0.5em;
 }

 /*********************************************************************************/
 /* Nav                                                                           */
 /*********************************************************************************/

 #nav ul {
 	display: inline-block;
 	padding: 0em 0em;
 	border-radius: 0;
 	/* Keine runden Ecken benötigt */
 	border-top: 3px solid var(--farbe1);
 	/* Nur oberer Rand */
 	border-bottom: 3px solid var(--farbe1);
 	/* Nur unterer Rand */
 	margin: 0;
 	/* Entfernt den Standard-Abstand */
 	text-align: center;
 	/* Zentriert den Text */
 	width: 100%;
 	/* Volle Breite */
 }

 #nav>ul>li {
 	font-family: var(--schrift3);
 	font-weight: 400;
 	font-style: regular;
 	font-size: 15pt;
 	line-height: 1em;
 	color: var(--farbe1);
 	display: inline-block;
 }

 #nav>ul>li:last-child {
 	padding-right: 0;
 }

 #nav>ul>li>a,
 #nav>ul>li>span {
 	display: block;
 	padding: 1.3em 1.5em;
 	letter-spacing: 1px;
 	text-decoration: none;
 	text-transform: uppercase;
 	font-weight: 800;
 	font-size: 1em;
 	outline: 0;
 	color: var(--farbe1);
 }

 #nav>ul>li>a:hover {
 	color: var(--farbe3);
 }

 #nav li.active a {
 	color: #FFF;
 }

 #nav>ul>li>ul {
 	display: none;
 }

 #nav2 {
 	text-align: right;
 	/* Richtet die Navigation rechts aus */
 }

 #nav2 ul {
 	padding: 0;
 	margin: 0;
 	list-style: none;
 	/* Entfernt die Listenpunkte */
 	display: flex;
 	/* Zeigt die Listenelemente nebeneinander */
 	justify-content: flex-end;
 	/* Positioniert die Links rechts */
 }

 #nav2 ul li {
 	margin-left: 10px;
 	/* Abstand zwischen den Links */
 }

 #nav2 ul li a {
 	width: 120px;
 	/* Feste Breite für alle Links */
 	height: 30px;
 	/* Feste Höhe für alle Links */
 	padding: 5px 10px;
 	/* Polsterung um den Link */
 	border: 1px solid var(--farbe1);
 	/* Umrandung */
 	border-radius: 5px;
 	/* Abgerundete Ecken */
 	text-decoration: none;
 	/* Entfernt die Unterstreichung */
 	color: var(--farbe1);
 	/* Farbe des Texts */
 	font-weight: 800;
 	/* Schriftgewicht */
 	font-size: 12pt;
 	/* Schriftgröße */
 	display: flex;
 	/* Flexbox für zentrierten Inhalt */
 	align-items: center;
 	/* Vertikales Zentrieren des Inhalts */
 	justify-content: center;
 	/* Horizontales Zentrieren des Inhalts */
 	text-align: center;
 	/* Zentrierter Text */
 	box-sizing: border-box;
 	/* Umfasst Padding und Border in der Breite/Höhe */
 }

 #nav2 ul li a:hover {
 	background-color: #dee6cf;
 	/* Hintergrund beim Überfahren */
 	color: var(--farbe1);
 	/* Textfarbe beim Überfahren */
 }

 /*********************************************************************************/
 /* Main                                                                          */
 /*********************************************************************************/

 #main {
 	padding: 2em 0em;
 }

 .blocksatz {
 	hyphens: auto;
 }

 .divider {
 	margin: 1em 0em 1em 0em;
 }

 .ndivider {
 	margin: -1.5em 0em -1.5em 0em;
 }

 #content h2 {
 	letter-spacing: -1px;
 	font-size: 3em;
 	margin: 0;
 }

 #sidebar h2 {
 	font-size: 2em;
 	margin-top: 0px;
 	margin-bottom: 10px;
 }

 /*********************************************************************************/
 /* Footer                                                                        */
 /*********************************************************************************/

 #footer {
 	padding: 6em 0em;
 }

 p {
 	font-family: "Roboto", sans-serif;
 	font-weight: 300;
 	font-style: normal;
 	letter-spacing: 0px;
 	font-size: 16pt;
 	line-height: 1.3em;
 	color: #000000;
 	text-align: justify;
 	hyphens: auto;
 }


 .hidden {
 	opacity: 100;
 }

 .move-left-out {
 	transform: translate(-150%, -0%);
 	/* Bewegt das Element links aus dem Bildschirm */
 	animation: slideOut 2s forwards;
 }

 .move-right-in {
 	animation: fadeIn 2s;
 }

 @keyframes slideIn {
 	from {
 		transform: translate(0%, 0%);
 	}

 	to {
 		transform: translate(0%, 0%);
 	}
 }

 @keyframes slideOut {
 	from {
 		transform: translate(0%, 0%);
 	}

 	to {
 		transform: translate(-200%, 0%);
 	}
 }

 @keyframes fadeIn {
 	from {
 		opacity: 0;
 	}

 	to {
 		opacity: 1;
 	}
 }

 #cookie-banner-modal {
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background-color: rgba(0, 0, 0, 0.5);
 	/* Halbtransparent */
 	display: flex;
 	/* Setze flex, damit es standardmäßig angezeigt wird */
 	justify-content: center;
 	align-items: center;
 	z-index: 9999;
 	/* Höchste Priorität, damit es über allem liegt */
 }

 /* Inhalt des Modal-Fensters */
 #cookie-banner-content {
 	background-color: white;
 	padding: 20px;
 	border-radius: 8px;
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 	text-align: center;
 	width: 300px;
 }

 #cookie-banner-content p {
 	margin-bottom: 20px;
 }

 #cookie-banner-content button {
 	margin: 0 10px;
 	padding: 10px 20px;
 	cursor: pointer;
 	border: none;
 	background-color: var(--farbe1);
 	color: white;
 	border-radius: 4px;
 }

 #cookie-banner-content button:hover {
 	background-color: var(--farbe3);
 }

 #decline-cookies {
 	background-color: #dc3545;
 }

 #decline-cookies:hover {
 	background-color: #c82333;
 }