/* Allgemeine Rücksetzung der Standardstile */
body, h1, h2, p, ul, li {
margin: 0;
padding: 0;
}

body {
    font-family: Arial, sans-serif; /* Schriftart für den Text festlegen */
}

/* Stil für den fixierten Header */
.fixed-header {
    position: fixed; /* Fixierte Position, bleibt oben auf der Seite */
    top: 0; /* Oben ausrichten */
    width: 100%; /* Volle Breite des Bildschirms */
    height: 30px; /* Höhe des Headers */
    background-color: #f0f0f0; /* Hintergrundfarbe hellgrau */
    color: #000; /* Textfarbe schwarz */
/*    border-bottom: 1px solid #ccc;   Trennlinie am unteren Rand des Headers */
}

/* Stil für das Navigationsmenü innerhalb des Headers */
nav {
    padding: 2px 5px; /* Innenabstand im Navigationsmenü */
}

/* Stil für die Navigationsliste */
ul {
    list-style: none; /* Listenpunkte entfernen */
}

/* Stil für die Navigationspunkte */
li {
    display: inline-block; /* Navigationspunkte nebeneinander ausrichten */
    margin-right: 20px; /* Abstand zwischen den Navigationspunkten */
}

/* Stil für die Navigationslinks */
a {
    text-decoration: none; /* Unterstrich entfernen */
    color: #000; /* Textfarbe schwarz */
    font-weight: bold; /* Fettschrift für die Links */
}

/* Hover-Stil für die Navigationslinks */
a:hover {
    text-decoration: underline; /* Unterstrich hinzufügen, wenn der Mauszeiger über dem Link ist */
}

/* Set media font resize respo for different screen size with div inhalt container  start*/

@media all and (min-width: 1366px) and (max-width: 1600px) { div.inhalt {font-size: 21px; }}
@media all and (min-width: 1024px) and (max-width: 1366px) { div.inhalt {font-size: 19px; }}
@media all and (min-width: 800px) and (max-width: 1024px) { div.inhalt {font-size: 18px; }}
@media all and (min-width: 640px) and (max-width: 800px) { div.inhalt {font-size: 17px; }}
@media all and (min-width: 500px) and (max-width: 640px) { div.inhalt {font-size: 16px; }}
@media all and (min-width: 400px) and (max-width: 500px)  { div.inhalt {font-size: 16px; }}
@media all and (min-width: 300px) and (max-width: 400px) { div.inhalt {font-size: 15px; }}
@media all and (min-width: 280px) and (max-width: 300px) { div.inhalt {font-size: 15px; }}

/* Set media font resize respo for different screen size with div inhalt container  end */




/* Pictures declaration start */
img {max-width:90%; height:auto; !important;} video {width: 90%  !important;   height: auto  !important;}
/* Pictures declaration end */

#footer {text-align: center; font-size: small;} 

body 

{
background-color:#f0f0f0;
color:#000000;
}



.flex-container{
  display: flex;
  flex-wrap: wrap;
  background-color: #f0f0f0;
  color: #000000;
  max-width: 1000px;
/* margin-right: 20px; */
/*margin-left: 20px;   */
   align-items: center;
  }
  

.inhalt {
align-items: center;
margin-right: 20px;
margin-left: 20px;
max-width: 1000px;

}


.sidenav {
    height: auto;
    width: 0px;
  	position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #ffd700;
    overflow-x: hidden;
    transition: 1.5s;
    padding-top: 25px;
	font-size: 10px;
	line-height: 2.4em;
}

.sidenav a {
    padding: 0px 0px 0px 0px;
    text-decoration: none;
    font-size: 20px;
    color: #000066;
    display: flex;
    transition: 0.1s;
}

.sidenav a:hover {
  
    color: #000066;
    font-size: 20px;

	font-weight: bold; 
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 2px;
    font-size: 24px;
	color: black;
    margin-left: 100px;
}

@media screen and (max-height: 800px) {
  .sidenav {padding-top: 16px;}
  .sidenav a {font-size: 18px;}
  


.video-container-wrapper {
      position: relative;
     padding-bottom: 60%;   /*  Aspect Ratio (modify as needed) */
      overflow: hidden;
    }

    .video-container {
      position: center;
      top: 0;
      left: 0;
      width: 50%;
      height: 50%;
    }