/* 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.5rem 0;background:transparent;min-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: 15rem;height:auto;}

/* Logo verkleinern auf kleineren Screens */
@media(max-width:1199.98px){
  .site-logo img{width:12rem;}
}
.site-logo a{outline:none;}

/* Wrapper für Desktop-Navigation */
.smx-nav-desktop-wrapper{display:flex;justify-content:flex-end;align-items:center;}
@media (max-width: 1199.98px){.smx-nav-desktop-wrapper { display: none; }}


/* Hauptnavigation Desktop */
.smx-nav-desktop{display:flex;align-items:center;list-style:none;padding:0;margin:0;}
.smx-nav-desktop li{position:relative;display:flex;align-items:center;margin:0 0.5rem;padding-bottom:1rem;cursor:pointer;}

/* Dropdown-Pfeil für Menüpunkte mit Submenü */
.smx-nav-desktop li.menu-item-has-children::before{content:"";position:absolute;top:calc(50% - 0.7rem);right:0rem;width:0.8rem;height:0.6rem;background-image:url(img/dropdown-arrow.svg);background-size:100% auto;background-repeat:no-repeat;transition:all var(--transition-default) ease;pointer-events:none;}


/* Link-Stil Hauptnavigation */
.smx-nav-desktop li a{display:flex;align-items:center;text-decoration:none;font-size:1.1rem;color:var(--nav-link-color);background:var(--nav-bg);padding:0.8rem 1.5rem;}
/* Hover-Effekt für Navigation */
.smx-nav-desktop li a:hover{color:var(--color-primary);}

/* Dropdown-Menü */
.smx-nav-desktop .sub-menu{position:absolute;bottom:0rem;left:0;display:flex;flex-direction:column;min-width:20rem;padding:0;visibility:hidden;transform:translate(0,-2rem);transition:transform 0.2s ease-out,opacity 0.2s,z-index 0s 0.2s;
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  transition: max-height 0.5s ease, opacity 0.4s ease;}

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




/* Sub-Menüeintrag */
.smx-nav-desktop .sub-menu li{display:block;width:100%;padding:0.1rem 0;margin:0;}
/* Sub-Menülink */
.smx-nav-desktop .sub-menu li a{display:block;font-size:1rem;font-weight:500;color:var(--nav-link-color);background:var(--nav-submenu-bg);}
/* Hover-Farbe für Submenü */
.smx-nav-desktop .sub-menu li a:hover{background:var(--nav-submenu-hover);color:var(--color-white);}
/* Pfeil drehen beim Hover */
.smx-nav-desktop li.menu-item-has-children:hover::before{transform:rotate(180deg);}
/* Dropdown sichtbar machen */

.smx-nav-desktop li:hover .sub-menu{visibility:visible;transform:translate(0,0);opacity:1;z-index:0;}

/* Dropdown Animation anwenden */
.smx-nav-desktop li:hover .sub-menu li{animation:slideInLeft 0.3s ease-in-out backwards;}
/* Slide-in Animation */
@keyframes slideInLeft{from{transform:translate(-25%,0);opacity:0;}to{transform:translate(0,0);opacity:1;}}








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

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

/* Liste für mobiles Menü */
.smx-nav-mobile{display:flex;flex-direction:column;width:100%;margin:0;padding:10%;padding-top:30%;list-style:none;}

/* Menüpunkt mobil */
.smx-nav-mobile li{width:100%;cursor:pointer;background:transparent;margin-bottom:1rem;list-style:none;position:relative;border-top:0.1rem solid var(--color-primary-alt);border-bottom:0.1rem solid var(--color-primary-alt);}

/* 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;}

/* 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:1rem;padding-right:1rem;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height 0.5s ease,opacity 0.4s ease,visibility 0.4s ease;}

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

/* 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-weight:600;font-size:1.5rem;padding:1.5rem 2rem;background:var(--color-secondary);margin-bottom:1rem;color:var(--color-tertiary);border-radius:3rem;}
@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:none;top:0;right:0;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.2rem solid transparent;background:var( --color-bg);cursor:pointer;}

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

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

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

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

.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);
}