/* Grundlegendes Styling */
    body {
        margin: 0;
        font-family: Arial, sans-serif;
        
    }

  



  

    

    /* Hero-Bereich mit Hintergrundbild */
    .hero {
        height: 90vh;
        background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.3)) ,url('https://unser-wunschhaus.de/wp-content/uploads/2025/03/startseite.webp') no-repeat center center/cover;
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white !important;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
        padding: 1rem;
margin-top: -33px;
    } 

   /* .hero {
          position: relative;
          height: 90vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: white;
          text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
          padding: 1rem;
      }

      .hero img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          z-index: -1;
          filter: brightness(70%);
      }
*/

    .hero h1 {
        font-size: 3rem !important;
        margin: 0 !important;
color: white !important;
    }

    .hero p {
        font-size: 1.2rem !important;
        margin-top: 1rem!important;
    }


    /* Responsives Design */
    @media (max-width: 900px) {
.hero {
        height: 90vh;
}
        .hero h1 {
        font-size: 2.5rem !important;
        margin: 0 !important;
color: white !important;
    }

    .hero p {
        font-size: 1rem!important;
        margin-top: 1rem !important;
    } 
    }

    @media (max-width: 750px) {
.hero {
        height: 85vh;
}
        .hero h1 {
        font-size: 2rem !important;
        margin: 0 !important;
color: white !important;
    }

    .hero p {
        font-size: 1rem !important;
        margin-top: 1rem !important;
    } 
    }
    @media (max-width: 600px) {
.hero {
        height: 83vh;
}
        .hero h1 {
        font-size: 1.5rem !important;
        margin: 0 !important;
color: white !important;
    }

    .hero p {
        font-size: 1rem !important;
        margin-top: 1rem !important;
    } 
    }

    @media (max-width: 460px) {
    .hero {
        height:  73vh;
} 
        .hero h1 {
        font-size: 1.2rem !important;
        margin: 0 !important;
color: white !important;
    }

    .hero p {
        font-size: 0.8rem !important;
        margin-top: 1rem !important;
    } 
    }