/* Grundlegende Style-Regeln für die Seite */

body {
  background-color: black;  /* Schwarzer Hintergrund */
  color: white;  /* Weißer Text */
  font-family: Arial, sans-serif;  /* Moderne, gut lesbare Schriftart */
  margin: 0;
  padding: 0;
  font-size: 1rem;  /* Standard: 16px */
  line-height: 1.5; /* Zeilenhöhe für bessere Lesbarkeit */
}

h1 {
  font-size: 2rem;  /* 32px */
}

h2 {
  font-size: 1.5rem; /* 24px */
  margin-left:30px;
}

h3 {
  font-size: 1.25rem; /* 20px */
}

h4 {
  font-size: 1.125rem; /* 18px */
}

h5 {
  font-size: 1rem;  /* 16px */
}

h6 {
  font-size: 0.875rem; /* 14px */
}


/* Header und Section Styling */
header, section {
  background-color: rgba(33, 33, 33, 0.9);  /* Dunkler, halbtransparenter Hintergrund */
  max-width: 1000px;  /* Maximale Breite für Text */
  margin: 0 auto;  /* Zentrierung */
  padding: 20px;
}


section {
   overflow: hidden; /* Passt die Höhe der Section an das Bild an */
}

.container{
	display: flex;
	align-items: flex-end; /* Text und Bild an der Unterkante ausrichten */
	gap: 20px; /* Abstand zwischen Bild und Text */
	max-width: 900px; /* Begrenzte Breite für bessere Lesbarkeit */
	
	
	background-color: rgba(255, 255, 255, 0.1);  /* Leicht transparente Boxen */
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	margin: 0 auto;  /* Zentriert den Container */
}

footer{
	max-width: 1000px; /* Begrenzte Breite für bessere Lesbarkeit */
	background-color: rgba(255, 255, 255, 0.1);  /* Leicht transparente Boxen */
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	margin: 20px auto;  /* Zentrierung */
	padding: 20px;
	text-align: center; /* Text ebenfalls zentrieren */
}

 .festbilddiv {
	overflow: hidden; /* Passt die Höhe der Section an das Bild an */
	background-color: rgba(33, 33, 33, 0.9);  /* Dunkler, halbtransparenter Hintergrund */
	max-width: 1000px;  /* Maximale Breite für Text */
	margin: 0 auto;  /* Zentrierung */
	padding: 20px;
}


.einsbild{
	width: 200px;
	height: 200px;
	object-fit: cover; /* Falls das Bild skaliert werden soll */
}
.einstext {
	flex: 1; /* Lässt den Text den restlichen Platz einnehmen */
}


.logobild {
  float: right;
  margin-left: 20px; /* Abstand zum Text */
  width: 200px; /* Optional: Größe des Bildes anpassen */
  height: auto;
}

.festbild {
 /* float: right; */
  margin-left: 10px; /* Abstand zum Text */
  width: 100px; /* Optional: Größe des Bildes anpassen */
  height: auto;
}


.mittebild {
	display: flex;
	float: none; /* Float entfernen */
	margin: 20px 10% 10px; /* Abstand unter dem Bild */
}



/* Responsive Design für kleinere Bildschirme */
@media (max-width: 600px) {
  header, section {
    max-width: 90%;  /* Maximal 90% der Bildschirmbreite auf kleinen Displays */
    padding: 15px;
  }
  
  section{
    display: flex;
    flex-direction: column; /* Stapelt das Bild über den Text */
    align-items: center; /* Zentriert das Bild */
 /*   text-align: center; /* Optional: Zentriert auch den Text */
  }
  
	.container {
		flex-direction: column; /* Stapelt Bild & Text untereinander */
		align-items: center; /* Bild zentrieren */
		text-align: center; /* Text ebenfalls zentrieren */
		
	}
	.einsbild {
		margin-bottom: 10px; /* Abstand zwischen Bild und Text */
	}
  
  .logobild {
    float: none; /* Float entfernen */
    margin: 0 0 20px 0; /* Abstand unter dem Bild */
  }
  
  .mittebild {	display: flex;
	float: none; /* Float entfernen */
	margin: 20px 0 10px; /* Abstand unter dem Bild */
	}
  
  
  
	h1 {
	  font-size: 1.5rem;  /* 32px */
	}

	h2 {
	  font-size: 1.25rem; /* 24px */
	}

	h3 {
	  font-size: 1.125rem; /* 20px */
	}

	h4 {
	  font-size: 1rem; /* 18px */
	}

}

/* Video unter Header */





.video-container {
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Falls du auch vertikal mitteln willst */
    width: 100%;
    position: relative;
 /*   padding-top: 25%; /* Passt die Höhe an */
    overflow: hidden;
}

.video-container video {
    max-width: 1000px; /* Begrenzung der Breite */
    width: 100%; /* Macht es responsive */
    height: 250px;
    object-fit: cover;
}


/* Grundlegendes Styling für Überschriften */
h1, h2, h3, h4, h5, h6 {
  color: white;
  margin-bottom: 15px;
}

/* Links hervorheben */
a {
  color: #4fc3f7;  /* Helles Blau für Links */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;  /* Unterstreichen beim Hover für bessere Sichtbarkeit */
}

/* Buttons gestalten */
button {
  background-color: #4fc3f7;
  color: #212121;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0288d1;
}

    .video2-container {
      width: 250px;
      height: 250px;
      position: relative;
      cursor: pointer;
    }
    .video2-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .video2-container video {
      width: 100%;
      height: 100%;
      display: none;
    }