/**
 * Theme Navigation Variant 1
 * 
 
 * This file contains styles for a specific navigation layout:
 * - Main menu appears on the left
 * - Submenu opens on the right with animation
 * 
 * Mobile behavior:
 * - Submenu slides in as a separate view
 * - The parent menu title appears as a heading
 * 
 * This variant builds on the base styles defined in `theme_nav.css`.
 * Only layout and animation-specific overrides or additions are included here.
 * 
 * If additional variants are needed, create separate files such as:
 * `theme_nav-variant-2.css`, `theme_nav-fade.css`, etc.
 */

.menu-col.col-menu-1 {
  --menu-width: 50%;
  /*background: linear-gradient(
    to right,
    var(--ast-global-color-2) 50%,
    var(--ast-global-color-4) 50%
  );*/
}

.menu-hauptmenu-container {
  height: 100%;
  width: var(--menu-width);
  background-color: var(--ast-global-color-2);
}

@media (min-width: 1025px) {
  #menu-hauptmenu > .menu-item {
    max-height: 100vh;
    display: flex;
    justify-content: flex-end;
  }

  #menu-wrapper ul.sub-menu {
    max-height: 0;
    transition: all 0.6s ease-in-out 0s;
    overflow: hidden;
    transition-delay: 0.5s, 0.5s;
    transition-property: transform, max-height;
    position: absolute;
    /*     left: var(--menu-width); */
    left: 55.5%;
    top: 50%;
    transform: translateY(-50%);
  }

  #menu-wrapper .imp-sub-active ul.sub-menu {
    max-height: 100%;
    transition-property: transform, max-height;
  }
}

@media (max-width: 1024px) {
  #nav-wrapper {
    bottom: 0;
    top: 0;
    background-color: var(--color-2);
  }

  #main-nav {
    height: 100vh;
  }

  .menu-col.col-menu-1 {
    --menu-width: 100%;
  }

  .menu-col.col-menu-1 {
    flex-direction: column;
  }

  #menu-hauptmenu {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -80px !important;
  }

  .menu-hauptmenu-container {
    /*height: 75%;*/
  }

  .menu-col.col-menu-1 .imp-nav-target {
    justify-content: center;
  }

  #menu-hauptmenu > .menu-item.imp-sub-active > .menu-link {
    color: white !important;
    background-color: unset;
    padding-bottom: var(--gap-l);
  }
  #menu-hauptmenu > .menu-item.imp-sub-active > .menu-link .sub-menu a {
    color: white !important;
    background-color: unset;
  }

  #menu-hauptmenu > .menu-item.imp-sub-active > .menu-link .sub-menu a {
    color: white !important;
    background-color: unset;
  }
}

/* für tablet version */
/* Zwingt den Slider, im Accordion die volle Breite zu nutzen */
.uagb-tab-accordion .uagb-slick-carousel {
  width: 100% !important;
  max-width: 90vw !important;
  opacity: 1;
  visibility: visible;
}

.uagb-tab-accordion .slick-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.uagb-tab-accordion .slick-track {
  display: flex !important;
  align-items: flex-start;
}