html, body {
        height: 100%;
        overflow-x: hidden; /* Schutz vor Overflow */
      }

      body {
        background-color: #f8f9fa;
        display: flex;
        flex-direction: column;
      }

      main {
        flex: 1;
      }

      .hero {
        background-color: #0d1b2a;
        color: white;
        padding: 4rem 2rem;
        text-align: center;
      }

      .hero img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
      }

      .brand-section {
        padding: 3rem 0;
      }

      .brand-card {
        background-color: white;
        border: 1px solid #dee2e6;
        border-radius: .5rem;
        padding: 2rem;
        transition: 0.2s;
      }

      .brand-card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
      }

      .about-section {
        padding: 4rem 2rem;
        background-color: #ffffff;
        border-top: 1px solid #dee2e6;
        border-bottom: 1px solid #dee2e6;
      }

      @media (max-width: 576px) {
        .hero {
          padding: 2rem 1rem;
        }

        .about-section {
          padding: 2rem 1rem;
        }
      }