/* ==========================================================================
   override.css — Maze Design Overrides
   Ergänzungen und Korrekturen zur originalen Webflow-CSS.
   Originale CSS-Dateien (30visu4304.css, components.css) bleiben unverändert.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile Navigation
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .navigation_background {
    height: 65px;
  }

  .logo_navbar {
    margin-top: 0;
  }

  .hero {
    margin-top: 65px;
    padding-top: 0;
  }

  .hamburger {
    width: 65px;
    height: 65px;
  }

  .menu_1 {
    top: 16px;
  }

  .menu_2 {
    top: 25px;
  }

  .menu_3 {
    top: 34px;
  }
}

/* --------------------------------------------------------------------------
   Layout — margin-left auf main & footer statt auf .hero
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
  .txt_menu {
    font-size: 1.8vw;
  }

  .div-block-footer1 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    padding-left: 20px;
    padding-right: 0;
    display: grid;
  }
}



main,
.footer-2 {
  margin-left: 200px;
}

.hero {
  margin-left: 0;
}

@media screen and (max-width: 991px) {
  main,
  .footer-2 {
    margin-left: 150px;
  }

  .hero {
    margin-left: 0;
  }
}

@media screen and (max-width: 767px) {
  main,
  .footer-2 {
    margin-left: 0;
  }

  .footer-2,
  .footer-2.hauptfarbe {
    padding-left: 20px;
    padding-right: 20px;
  }

  .div-block-footer1 {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* --------------------------------------------------------------------------
   Grid — max-width verhindert horizontalen Ueberlauf
   -------------------------------------------------------------------------- */

._3er,
._4er,
._5er {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Galerie — Masonry-Spans deaktivieren ab Tablet
   (w-node-* IDs haben grid-area: span 1/span 2 fuer 4-Spalten-Desktop-Layout,
   auf Tablet/Mobile mit 2 bzw. 1 Spalte gleichmaessig durchlaufen lassen)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
  [id^="w-node-"] {
    grid-area: auto !important;
    grid-column: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Garten-Landschaftsbau — _4er Grid Breakpoints
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
  ._3er,
  ._4er,
  ._5er {
    grid-template-columns: 1fr;
  }

  ._3er .div-block-farbig-1,
  ._4er .div-block-farbig-1,
  ._5er .div-block-farbig-1 {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
  }
}

@media screen and (max-width: 767px) {
  ._3er,
  ._4er,
  ._5er {
    grid-template-columns: 1fr;
  }

  ._3er .image-wrapper,
  ._4er .image-wrapper,
  ._5er .image-wrapper {
    width: 100%;
    height: auto;
  }

  ._3er .div-block-farbig-1,
  ._4er .div-block-farbig-1,
  ._5er .div-block-farbig-1 {
    height: auto;
  }

}


/* --------------------------------------------------------------------------
   Garten-Landschaftsbau — #Rasen: Bild vor Text ab Tablet
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
  #Rasen ._1er-grid-1 {
    display: flex !important;
    flex-direction: column;
  }

  #Rasen ._1er-grid-1 .div-block-177 {
    order: -1;
  }
}


/* --------------------------------------------------------------------------
   Leistungen — Mobile Reihenfolge: Bild vor Text bei Section #3 & #23
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  [id="3"] ._1er-grid-1,
  [id="23"] ._1er-grid-1 {
    display: flex !important;
    flex-direction: column;
  }

  [id="3"] ._1er-grid-1 .div-block-177,
  [id="23"] ._1er-grid-1 .div-block-177 {
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   Bewertungen — inhalt-text3-4 volle Breite ab 1024px
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
  .inhalt-text3-4 {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   Lange URLs umbrechen (z.B. Datenschutzseite)
   -------------------------------------------------------------------------- */

main a {
  overflow-wrap: break-word;
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   Hamburger — konsistente Linienbreite (JS setzt menu_1/3 auf 35px, hier angleichen)
   -------------------------------------------------------------------------- */

.menu_1,
.menu_3 {
  width: 35px;
}

/* --------------------------------------------------------------------------
   Navigation — semantische ul/li Liste
   -------------------------------------------------------------------------- */

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
}

/* --------------------------------------------------------------------------
   Galerie-Bilder — Umlaut-Fix (GrünSchnee → GruenSchnee)
   30visu4304.css referenziert GrünSchnee-1.webp direkt, hier überschreiben.
   -------------------------------------------------------------------------- */
.bild-section-cover-links-4 {
  background-image: linear-gradient(#ffffff52, #ffffff52), url('../images/GruenSchnee-1.webp');
}