/* Allgemeine Styles */
body {
  scroll-behavior: smooth;
}

/* Hero Section */
#hero {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
              url('Bilder/haus-am-see.jpg') center/cover no-repeat;
  height: 100vh;
  color: white;
}

/* =========================
   MOBILE ANPASSUNG
   ========================= */

/* Hero Bereich auf Handy kleiner + Text besser lesbar */
@media (max-width: 768px) {
  #hero {
    height: 70vh; /* statt volle Bildschirmhöhe */
    padding: 40px 20px;
    text-align: center;
  }

  #hero h1 {
    font-size: 2rem;
    line-height: 1.3;
  }

  #hero p {
    font-size: 1rem;
  }
}

/* Navbar Scroll Effekt */
.navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.9) !important;
  transition: background-color 0.3s ease;

}

/* Navigation: Logo kleiner, Abstand optimiert */
@media (max-width: 768px) {
  .navbar-brand img {
    max-width: 70px !important;
  }
}

/* Abstand zwischen Sektionen auf Handy verbessern */
@media (max-width: 768px) {
  section {
    padding: 60px 20px !important;
  }
}

/* Text & Bilder im "Über uns" Abschnitt übereinander anzeigen */
@media (max-width: 768px) {
  #about .row {
    text-align: center;
  }

  #about img {
    margin-bottom: 20px;
  }
}

/* Service-Karten Untereinander statt nebeneinander (Sauber!) */
@media (max-width: 768px) {
  #services .card {
    margin-bottom: 25px;
  }
}

/* Kontaktformular auf volle Breite */
@media (max-width: 576px) {
  #contact form {
    width: 100% !important; /* statt w-75 */
  }
}

/* Fußtext kleiner & besser zentriert */
@media (max-width: 576px) {
  footer p {
    font-size: 0.8rem;
    line-height: 1.4;
  }
}

/* Card Hover Effekt */
.card:hover {
  transform: translateY(-5px);
  transition: 0.3s;
}

/* Footer */
footer {
  font-size: 0.9rem;

}

.btn,
.btn,
button,
input[type="submit"] {
  background-color: #dd1a14 !important;
  border-color: #dd1a14 !important;
  color: #fff !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
  background-color: #b91410 !important;
  border-color: #b91410 !important;
}

/* === Ausnahme: Buttons / Links in der Navbar === */
.navbar .btn,
.navbar .nav-link,
.navbar .navbar-brand {
  background-color: transparent !important;
  border: none !important;
  color: #fff !important;
}

.navbar .nav-link:hover {
  color: #dd1a14 !important; /* optional: beim Hover leicht rot einfärben */
}

a {
  text-decoration: none;
  color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
}