/* roboto-100 - 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: 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+ */
  }
  
  :root {
	  --farbe1: #00794f;
	  --farbe3: #00ad70;
	  --farbe2: #019540; /*Base Color */
	  --farbe4: #bfe2ff;
	  --frabe5: #80c6ff;
	  --frabe6: #ff8200;
	  --farbe7: #b35b00;
	  --farbe8: #ffe0bf;
	  --farbe9: #ffc180;
	  --farbebox: #DBEEE8;
	  --schrift1: "Roboto", sans-serif;
	  --schrift2: "DM Serif Display", serif;
  }
  
  .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(--schrift2); 
	  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: 1.5em;
  }
  
  #logo h1 {
	  font-family: var(--schrift2);
	  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(--schrift2);
	  font-style: normal;
	  line-height: 1em;
	  display: block;
	  padding-top: 1em;
	  letter-spacing: 1px;
	  text-transform: uppercase;
	  font-size: 2em;
	  font-weight: 900;
	  color: var(--farbe3);
  }
  
  /*********************************************************************************/
  /* 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(--schrift2);
	  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: #00794f;
    color: white;
    border-radius: 4px;
  }

  #cookie-banner-content button:hover {
    background-color: #00ad70;
  }

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

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