/* Responsive */
@media (max-width: 768px) {
  .col-3, .col-4, .col-6, .col-8 {
    width: 100%;
  }

  .menu-toggle {
    display: block;
  }

  .nav-wrapper {
    display: none;
    width: 100%;
  }

  .nav-wrapper.open {
    display: block;
  }

  .nav {
    flex-direction: column;
    gap: 10px;
  }

  .hero {
    flex-direction: column;
  }

  .hero-image {
    order: -1;
  }
}

/* Zusätzliche Media Query für 900px */
@media (max-width: 900px) and (min-width: 769px) {
  #leistungen {
    display: flex;
    flex-wrap: wrap;
  }

  .leistungen-text1,
  .leistungen-text2,
  .leistungen-bild {
    padding: 0;
  }

  .leistungen-text1 {
    width: 49%;
    order: 1;
  }

  .leistungen-bild {
    width: 46%;
    order: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-self: flex-start;
  }

  .leistungen-text2 {
    width: 100%;
    order: 3;
  }

  #warum {
    display: flex;
    flex-wrap: wrap;
  }

  .warum-text1 {
    width: 50%;
    order: 1;
  }

  .warum-bild {
    width: 46%;
    order: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-self: flex-start;
  }

  .warum-text2 {
    width: 80%;
    order: 3;
  }

  #kontakt {
    display: flex;
    flex-wrap: wrap;
  }

  #kontakt .col-4 {
    width: 48%;
  }
}

/* Erweiterte mobile Ansicht */
@media (max-width: 768px) {
  .col-3, .col-4, .col-6, .col-8 {
    width: 100%;
  }

  .menu-toggle {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
  }

  .logo-area {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-left: 20px;
    padding-top: 20px;
  }

  .nav-wrapper {
    display: none;
    width: 100%;
  }

  .nav-wrapper.open {
    display: block;
  }

  .nav {
    flex-direction: column;
    gap: 10px;
  }

  .hero {
    flex-direction: column;
  }

  .hero-image {
    order: -1;
  }

  /* Alle Bilder kleiner darstellen (col-10) */
  .hero-image img,
  .section-image,
  #warum .col-4 img
  
   {
    width: 83.3333%; /* 10 von 12 */
    margin: 0 auto;
    display: block;
  }
}