/*Design für den allgemeinen Body*/

body {

margin: 0; /* Entfernt Standard-Seitenrand */
display: flex; /*aktiviert Flexbot, Dinge können einfacher formatiert werden*/
flex-direction: column;  /*alle Sachen im Container werden untereinander formaatiert*/
justify-content: center; /* zentriert horizontal*/
align-items: center;  /*zentriert vertikal*/
min-height: 100vh;  
background-color: #FFFACD;


}


h1 {

font-size: 15vh; 
text-align: center; /*horizontale Zentrierung*/
color: black;
background-color: #E0FFFF;
width: 100%;
font-family: font-family 'Roboto', sans-serif;

}

h2 {
	
font-size: 10vh; /*verändert die Schriftgröße*/
text-align: center; /*horizontale Zentrierung*/
color: black;

}

h3 {
	
font-size: 7vh;/*verändert die Schriftgröße*/
text-align: center; /*horizontale Zentrierung*/
color: black; /*Farbe der Schrift*/

}




      

.class2 {

border: 2px solid #333; /* Rahmen um die Box */
padding: 5vh; /* Innenabstand innerhalb der Box */
background-color: #E0FFFF; /* Hintergrundfarbe der Box */
width: 92%; /* Breite der Box */
margin-top: 0; /*Kein Abstand zur Navigationsleiste*/
margin: auto; /*gleicher Abstand zu beiden Seitenrändern*/

 
 
}


p {
	
font-size: 4vh;
line-height: 7vh;  /*Abstand zwischen den Zeilen*/
color: black;

}


nav {

width: 98%;
margin: auto;
margin-top: 25vh;

}


nav ul {

list-style-type: none;  /*entfernt Aufzählungszeichen*/
display: flex;  /*ordnet die Liste waagerecht an*/
padding: 0;
margin: 0;
width: 100%; /* Damit sich die Leiste über die gesamte Breite erstreckt */
justify-content: center;  /* Menü-Elemente zentrieren */
 
}


nav ul li  {


cursor: pointer;  /*zeigt Handsymbol wenn man über die Listelemente fährt*/

font-size: 5vh;
padding: 2vh 2vh; /* Innenabstand innerhalb der Box */
width: 43vh; /*Breite*/
height: 10vh; /*Höhe*/
line-height: 10vh; /* Vertikale Zentrierung */
text-align: center; /* Horizontale Zentrierung */
color: black; /*Textfarbe*/
text-decoration: none; /*entfernt die Unterstreichung*/


background-color: #DCDCDC;  /*Hintergrundfarbe für eine Box um die Navigationsleiste*/

border: 4px solid black;  /*Design der Randlinie um die Box und die Listelemente*/
transition: background-color 0.5s, color 0.5s; /* Übergangseffekt für den Hintergrund und die Farbe */


}


nav ul li a {

text-decoration: none; /*Text wird nicht mehr unterstrichen*/
color: black; /*Textfarbe*/

}

nav ul li a:hover {

color: yellow; /*Farbe der Schrift in der Box wird gelb beim Drüberfahren*/

}


nav ul li:hover { 
	
background-color: LightSlateGray; /*Hintergrundfarbe der Box beim Darüberfahren*/ 


}


ul li {

font-size: 4vh;
 
}


img {

width: 52%;
height: auto;
margin-top: 1vh; /*setzt dass Bild ein vh nach unten*/

}


.Bildundvideo {
	
display: flex;
justify-content: space-between; 
margin: 0 auto;
width: 80%; /*Breite*/


}

.video1 {

width: 50%; 
margin-top: 3vh; /*setzt den Inhalt der Classse 3vh nach unten*/
height: 30%; /*Höhe*/


}





.bild_index {

position: fixed; 
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
text-align: center;
text-align:center;
margin-top: 0;
background-color: white;


}

.bild_index img {
	
width: 100%; /*Bild nimmt die gesamte Breite des Containers (der class) ein*/
height: 100% /*Bild nimmt die gesamte Höhe des Containers ein*/



}





.hauptüberschrift {

position: absolute;  /* Absolute Positionierung relativ zum nächsten Positionierten Element */
top: 50%;  /* Verschiebt den oberen Rand auf 50% der Höhe */
left: 50%;  /* Verschiebt den linken Rand auf 50% der Breite */
transform: translate(-50%, -50%); /* Zentriert das Element genau in der Mitte */
color: black;  /* Weißer Text für bessere Sichtbarkeit */
font-size: 6rem; /* Große Schriftgröße */
font-weight: bold; /* Fettschrift */
text-align: center; /* Zentriert den Text */
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* Leichter Schatten für bessere Lesbarkeit */
color: white;


}

footer p {

font-size: 2vh;


}


footer {
	
background-color: #4B0082; /* Sanfte Hintergrundfarbe */
padding: 10px; /* Innenabstand für den Footer */
text-align: center; /* Zentrierter Text */
width: 100%; /*Breite des Footers*/
margin-top: 10vh; /*setzt den footer 10vh nach unten*/

}

footer p {
	
margin: 0 ; /* Reduzierter Abstand zwischen den Absätzen */
color:white;

}

footer a {
	
color: white; /* Linkfarbe */

}

footer a:hover {
	
text-decoration: underline; /* Unterstreichung beim Hover */

}