/* SMX Navigation – Globale CSS */
/* ====================================== */

/* Sticky Header mit flexbasiertem Layout */
.smx-header{position:fixed;display:flex;align-items:center;justify-content:space-between;z-index:1001;left:0;top:0;width:100%;padding:1.2rem 0;background:transparent;height:7rem;}
/* Alternative Hintergrundfarbe beim Scrollen */
.smx-header.hasScrolled{background:var(--color-surface);}
/* Logo links im Header */

.smx-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}


/* Logo-Bild anpassen */
.site-logo img{display:block;width: 22rem;height:auto;transition: all 0.4s ease;}

/* Logo verkleinern auf kleineren Screens */
@media(max-width:570.98px){.site-logo img{max-width:80%;}}
@media(max-width:490.98px){.site-logo img{max-width:60%;}}
.site-logo a{outline:none;}

/* Wrapper für Desktop-Navigation */
.smx-nav-desktop-wrapper{ display: none;}


.smx-nav-mobile .sub-menu.open-submenu {
  max-height: 100rem;
  opacity: 1;
  visibility: visible;
}


/* Mobiles Overlay-Menü initial */
.smx-mobile-menu{position:fixed;z-index:999;top:50%;right:0;width:50%;height:0;opacity:0;overflow-y:auto;background:var(--color-tertiary);transition:var(--transition-default);}
@media(max-width:1199.98px){.smx-mobile-menu{width:100%;}}

.smx-mobile-menu-bg{position:fixed;z-index:998;top:50%;right:0;width:50%;height:0;opacity:0;overflow-y:auto;background:var(--color-tertiary-transparent);transition: all 0.4s ease;}

/* Menü anzeigen im geöffneten Zustand */
.show-mobile-navigation .smx-mobile-menu{top:0;height:100%;opacity:1;}
.show-mobile-navigation .smx-mobile-menu-bg{top:0;width:100%;height:100%;opacity:1;}


/* Liste für mobiles Menü */
.smx-nav-mobile{display:flex;flex-direction:column;width:100%;margin:0;padding:5rem;padding-top:10rem;list-style:none;}
@media(max-width:767.98px){.smx-nav-mobile{padding-left:2rem;padding-right:2rem;}}

/* Menüpunkt mobil */
.smx-nav-mobile li{width:100%;cursor:pointer;margin-bottom:1rem;list-style:none;position:relative;}

/* Linkstil mobil */
.smx-nav-mobile li a{display:flex;justify-content:space-between;align-items:center;width:100%;padding:1.5rem;padding-left:3rem;font-size:1.5rem;font-weight:700;color:var(--color-primary);text-align:left;text-decoration:none;background:var(--color-secondary);transition: all 0.4s ease;}
.smx-nav-mobile li a:hover{background:var(--color-secondary-alt);}

/* Icon für Dropdown mobil */
.smx-nav-mobile .submenu-toggle {
  position: absolute;
  top:0.6rem;
  right: 2rem;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Material Symbols Outlined';
  font-size: 3.8rem;
  color: var(--color-primary);
  cursor: pointer;
  z-index: 10;
}

/* Plus-Symbol (Standard) */
.smx-nav-mobile .submenu-toggle::before {
  content: '\f3dd'; /* Plus */
}

/* Minus-Symbol, wenn geöffnet */
.smx-nav-mobile .menu-item-has-children.expand-menu-button .submenu-toggle::before {
  content: '\e15b'; /* Minus */
}



/* Submenü mobil initial versteckt */
.smx-nav-mobile .sub-menu{display:block;width:100%;padding-left:2rem;padding-right:2rem;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition: all 0.4s ease;}

/* Submenü geöffnet */
.smx-nav-mobile .sub-menu.open-submenu{max-height:100rem;opacity:1;visibility:visible;padding-top:2rem;padding-bottom:2rem;}

/* Submenüeintrag mobil */
.smx-nav-mobile .sub-menu li{display:block;width:100%;background:transparent;margin:0;border:0;}
.smx-nav-mobile .sub-menu li a{display:block;width:100%;font-size:1.2rem;font-weight:300;background:transparent;padding:1rem;color:#fff;border-bottom:2px solid #3a3a3a;transition: all 0.4s ease;}
.smx-nav-mobile .sub-menu li a:hover{padding-left:2rem;color:var(--color-primary);background:transparent!important;border-bottom:2px solid var(--color-primary);}
@media(max-width:767.98px){.smx-nav-mobile .sub-menu li a{font-size:1.0rem;}}
.smx-nav-mobile .sub-menu li a:hover{background:var(--color-secondary-alt);}







/* Toggle Button Wrapper (mobil sichtbar) */
.smx-toggle-wrapper{position:absolute;display:block;top:0rem;right:0rem;z-index:1000;}
/*@media(max-width:1199.98px){.smx-toggle-wrapper{display:block;}}*/

/* Burger Button */
.smx-burger-button{position:relative;width:7rem;height:7rem;border:0.0rem solid white;background:var(--color-primary);cursor:pointer;transition: background-color 0.3s ease; /* <— hier die Magie */}
.smx-burger-button:hover{background:var(--color-primary-alt2);}
.smx-burger-button::before{content: "MENU";position:absolute;left:-3rem;top:2.9rem;rotate:-90deg;color:#fff;font-size:0.8;font-weight:700;}

/* Linien des Burger Icons */
.smx-burger-icon,
.smx-burger-icon::before,
.smx-burger-icon::after {
  content: "";
  position: absolute;
  width: 4rem;
  left: calc(50% - 2rem);
  height: 3px;
  border-radius:0.1rem;
  background: #fff;
  transition: all var(--transition-fast);
}

.smx-burger-icon {
  top: 50%;
  transform: translateY(-50%);
}

.smx-burger-icon::before {
  top: -1.5rem;
}

.smx-burger-icon::after {
  top: 1.5rem;
}

.smx-burger-button.is-active .smx-burger-icon {
  background: transparent;
}

.smx-burger-button.is-active .smx-burger-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.smx-burger-button.is-active .smx-burger-icon::after {
  top: 0;
  transform: rotate(-45deg);
}