body {
  background-color: #121212; /* Dunkler Hintergrund */
  color: #e0e0e0; /* Hellgrauer Text */
  margin-top: 80px; /* Damit der Inhalt nicht unter die Navbar rutscht */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0; /* Stellt sicher, dass das Overlay unter der Navbar bleibt */
}

.bg-image {
  background-image: url('../images/bg.png');
  background-size: cover;
  background-position: center;
  height: 100vh;
}

/* Standardgröße für größere Bildschirme */
.logo {
  width: 40%; /* Auf PCs wird das Logo 20% der Breite einnehmen */
}

#overlay-title {
  font-size: 60px;
  text-shadow: 0 5px 8px rgba(0, 0, 0, 0.8);
}

#about-us-container {
  background-color: #343A40 !important;
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

#about-us-text-container {
  line-height: 200% !important;
}

#about-us-img {
  border: 0px !important;
  padding: 0px !important;
}

.news-section {
  background-color: #252A33 !important;
  padding-top: 100px !important;
}

#news-list {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

#news-article {
  border: 0px !important;
}

#news-card {
  background-color: #191C22 !important;
}

#contact-id {
  background-color: #343A40 !important;
}

.hp-field {
  position: absolute;
  left: -9999px;
  z-index: 999999;
}

/* Platzhalterfarbe */
::placeholder {
  color: white;
  opacity: 0.7;
}

.form-control {
  border: 0px !important;
}

/* Fokus-Styling */
.form-control:focus {
  border-color: #dc3545 !important; /* Danger rot */
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* Rot transparente Umrandung */
}

/* Für kleinere Bildschirme */
@media (max-width: 576px) {  /* max-width 576px für kleine Geräte */
  .logo {
      width: 50%; /* Auf Smartphones wird das Logo 45% der Breite einnehmen */
  }

  #overlay-title {
    font-size: 45px;
    margin-top: 20px !important;
  }

  #about-us-container {
    padding: 20px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  #about-us-text-container {
    margin-left: 0px;
    margin-top: 30px;
  }

  .news-section {
    padding-top: 50px !important;
  }

  #news-list {
    margin-top: 0px !important;
  }
}

/* ==== ANIMATION ==== */
.fade-in {
  opacity: 0;
  animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
  to {
      opacity: 1;
  }
}


.slide-up {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 2s forwards;
}

@keyframes slideUp {
  to {
      opacity: 1;
      transform: translateY(0);
  }
}