/*Reset für invisible
.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
*/

.mod_navigation.block .invisible {
  display: none;
}

.nav_desktop {
  display:none;
}

@media (min-width: 1225px) {
  .nav--mobile, #mobile-nav-toggle {
    display: none;
  }
  .nav_desktop {
  width: 100%;
  display:block;
}
}


   @media (max-width: 1225px) {
     /* .nav--mobile {
    position: absolute;
    left: 0;
    width: 100%;
    background: #8EAA3D;
    z-index: 1000;
  } 
  */
  
   /* Burger Button Style */
  .mobile-nav-toggle {
    display: block;
    padding: 10px;
    background: #8EAA3D;
    text-align: center;
  }

  /* Aktives Menü (wird per JS hinzugefügt) */
  .nav--mobile.is-active {
    display: block;
  }
 
  /* Menüpunkte */
  .nav--mobile ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .nav--mobile li {
    border-bottom: 1px solid #eee;
  }
  
  .nav--mobile a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #333;
  }
    .nav--mobile {
        /* 1. Positionierung */
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: #ffffff;
        z-index: 999;

        /* 2. Der unsichtbare Startzustand (WICHTIG) */
        opacity: 0;
        visibility: hidden;
        pointer-events: none; /* Verhindert Klicks im unsichtbaren Zustand */
        
        /* 3. Die Animation definieren */
        transition: opacity 0.5s ease-in-out, transform 0.5s ease;
    
        
    
    transform: translateY(-20px);

    /* Präzise Steuerung: */
    transition: opacity 0.4s ease-in-out, 
                transform 0.4s ease-in-out, 
                visibility 0s linear 0.4s; /* Wartet 0.4s (Delay), bis es versteckt wird */
    }

    /* 4. Der Zielzustand (wenn Klasse per JS kommt) */
    .nav--mobile.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
        .nav--mobile.is-active {
 
    
    /* Beim Öffnen: Keine Verzögerung für Visibility */
    transition: opacity 0.4s ease-in-out, 
                transform 0.4s ease-in-out, 
                visibility 0s linear 0s; 
}

    }


.nav--mobile li {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.nav--mobile.is-active li {
    opacity: 1;
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* @end */
/* @group Navigation */

.nav_desktop ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.nav_desktop li {
  flex: 1;
  text-align: center;
}

.nav_desktop a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  color: white;
  transition: background-color 0.3s;
}

.nav_desktop a:hover {
  background-color: #2A364D;
  color: white;
}

.nav_desktop .active {
  background-color: #2A364D;
  color: #FFF;
  padding: 15px;
}

/*Anpassungen mobile Navigation*/
.mm-menu_theme-dark {
  background-color:var(--gruen);
  --mm-color-background: var(--gruen);
  --mm-color-text: #fff;
  --mm-color-text-dimmed: #fff;
}

    .dk_mobilmenu {
    margin: 20px -70px 20px 20px;
    width: 33px;
    height: 33px;
    border: 2px solid #7BB3B8;
    border-radius: 100px;
    padding: 10px;
}

.dk_mobilmenu a {
    font-size: 22px;
    fill: #7bb3b8;
}

/* bis 667px mobiles Menü eingeblendet */
@media only screen and (max-width: 667px) {
    #mainmenu-desktop {
        display: none;
    }
    
    .dk_mobilmenu {
        display: inline-block;
    }
    
    #main .inside {
        margin: 0px 10px 0px 10px;
    }
    
    .startseite #main .inside {
        margin: 0px;
    }
}

/* ab 668px mobiles Menü ausgeblendet */
@media only screen and (min-width: 668px) {
    .dk_mobilmenu {
        display: none;
    }
   
}

.mm-menu--offcanvas {
    position: absolute;
}