* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

/* Der Hauptabschnitt */

.image-text-section {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 70vh; /* optional: mindestens volle Bildschirmhöhe */
  height: auto; /* passt sich dynamisch an den Text an */
  align-items: flex-start; /* richtet Inhalt oben aus, falls Text länger ist */
  padding: 20px 30px;
  background-color: #000; /* falls du schwarz willst */
  gap: 40px;
}

/* Linkes Bild */
.image-container img {
  width: 100%;
  height: 700px;
  max-width: 100%;
  margin-top: 50px;
  align-items: flex-start; /* Bild oben ausrichten */
  object-fit: cover; /* füllt den Bereich aus, ohne Verzerrung */
  border-radius: 20px; /* runde Ecken optional */
  object-fit: cover;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Rechter Textbereich */
.image-container {
  flex: 1; /* Bild bleibt 400px breit */
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-container {
  flex: 1; /* Text nimmt gesamten übrigen Platz ein */
  padding: 40px 20px; /* Abstand oben und unten für den Text */
  max-width: none; /* entfernt mögliche Begrenzung */
}

.text-container p {
  font-family: Arial, sans-serif;
  font-weight: bolder;
  line-height: 1.6;
  max-width: 900px;
  color: white; /* damit er auf schwarzem Hintergrund lesbar ist */
}
.text-container a p:hover{
  color: #72E4D2;
}
  


.cards-section {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2vw; /* Dynamischer Abstand zwischen Karten */
  padding: 2vw; /* Gleichmäßiger Abstand zum Rand */
  min-height: 600px;
  background-color:#50566A
}

.card {
  flex: 1;
  background-color: #000000;
  border-radius: 20px;
  color: white;
  padding: 2vw; /* Innenabstand wächst mit Fenster */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;

  text-decoration: none; /* Unterstreichung entfernen */
  cursor: pointer; /* Zeigt an, dass klickbar */
  transition: all 0.3s ease; /* Sanfte Animation */
}

.card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  background-color: #3b4045;
}

/* Textgrößen skalieren mit der Fensterbreite */
.card h3 {
  font-size: clamp(1rem, 1.2vw + 0.8rem, 2rem);
  font-weight: bold;
  margin-bottom: 0.5em;
}

.card p {
  font-size: clamp(0.8rem, 0.9vw + 0.5rem, 1.2rem);
  line-height: 1.4;
  margin: 0;
}

/* Responsive Umbruch bei schmalen Displays */
@media (max-width: 800px) {
  .cards-section {
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 90%;
  }
}

/* Bild */
.hero img {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 0px; /* Platz für die Navbar */
}

/* Container für das Bild mit Text */
.hero {
  position: relative;
  text-align: center;
}

.hero-text {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  top: 50%;
  left: 65%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 50px;
  font-weight: bolder;
  text-align: center;
}

.hero-text-Klein {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  font-size: 17px;
  text-align: center;
  text-decoration: none;
}