/*! ------------------------------------------------
 * Header Styles
 * Ausgelagert aus main.css für einfachere Wartung
 * Header ist fixiert und bleibt beim Scrollen sichtbar
 * ------------------------------------------------*/

/* Block - Header Start */
/* ------------------------------------------------*/
.mxd-header {
  position: fixed;
  top: 0;
  left: 50%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  max-width: var(--container-max-width);
  padding: 2rem var(--container-padding-mobile);
  margin: 0 auto;
  z-index: 101;
  -webkit-transform: translateX(-50%) scaleY(1);
     -moz-transform: translateX(-50%) scaleY(1);
      -ms-transform: translateX(-50%) scaleY(1);
          transform: translateX(-50%) scaleY(1);
  opacity: 1;
  -webkit-transition: all var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: all var(--_animspeed-medium) var(--_animbezier);
  transition: all var(--_animspeed-medium) var(--_animbezier);
  /* Glassmorphism Effekt fuer helles Layout */
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
     -moz-backdrop-filter: blur(12px) saturate(180%);
          backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  -moz-border-radius: 1.6rem;
       border-radius: 1.6rem;
  -webkit-box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.06);
     -moz-box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.06);
          box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.06);
}
.mxd-header.is-hidden {
  -webkit-transform: translateX(-50%) scaleY(1.2);
     -moz-transform: translateX(-50%) scaleY(1.2);
      -ms-transform: translateX(-50%) scaleY(1.2);
          transform: translateX(-50%) scaleY(1.2);
  opacity: 0;
}
.mxd-header.menu-is-visible {
  z-index: 10;
}
@media only screen and (min-width: 768px) {
  .mxd-header {
    padding: 2.5rem var(--container-padding-tablet);
  }
}
@media only screen and (min-width: 1200px) {
  .mxd-header {
    padding: 2.5rem var(--container-padding-desktop);
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-header {
    padding: 3rem var(--container-padding-large);
  }
}

/* Menü-Container innerhalb des Headers */
.mxd-header__menu-container {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
     -moz-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  height: 100%;
}

/* Menü-Navigation innerhalb des Headers anpassen */
.mxd-header .mxd-nav__wrap {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  height: auto;
  z-index: 100;
}

.mxd-header .mxd-nav__contain {
  position: relative;
  margin-top: 0;
  padding: 0;
  height: auto;
  min-height: auto;
}

/* Kompaktes Dropdown-Menü statt Fullscreen-Overlay */
.mxd-header .mxd-nav__wrap .mxd-menu__wrapper {
  position: fixed !important;
  top: 8.4rem !important;
  right: 2rem !important;
  left: auto !important;
  bottom: auto !important;
  inset: auto !important;
  width: min(42rem, calc(100vw - 4rem)) !important;
  height: auto !important;
  z-index: 120 !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media only screen and (min-width: 768px) {
  .mxd-header .mxd-nav__wrap .mxd-menu__wrapper {
    top: 9.6rem !important;
    right: 4rem !important;
    width: min(46rem, calc(100vw - 8rem)) !important;
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-header .mxd-nav__wrap .mxd-menu__wrapper {
    right: 7rem !important;
    width: 46rem !important;
  }
}

/* Dark Mode Anpassungen nicht mehr benötigt */

.mxd-header__logo {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.mxd-header__controls {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}
@media only screen and (min-width: 768px) {
  .mxd-header__controls {
    gap: 2rem;
  }
}

/* ------------------------------------------------*/
/* Block - Header End */
/* ------------------------------------------------*/