body {
	overflow-x: hidden;
}

#smooth-wrapper {
  position: relative;
  z-index: 1;
}

/* Header z-index priority */
#main-header {
  z-index: 10000 !important;
}

/* Menu button cursor */
.open-menu {
  cursor: pointer;
}

/* Cursor for menu trigger links */
.open-impressum,
.open-datenschutz {
  cursor: pointer;
}

/* Full-screen menu styles */
#fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #2f3031;
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: 8.5vw;
  padding-top: 17vw;
  opacity: 0;
  transform: translateY(-100%);
  overflow: hidden;
  touch-action: none;
}

#fullscreen-menu nav {
  flex: 0 0 auto;
  margin-right: 8vw;
}

#fullscreen-menu nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#fullscreen-menu nav ul li {
  margin: 0;
  opacity: 0;
  transform: translateX(-50px);
}

#fullscreen-menu nav ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 3vw;
  font-weight: 300;
  font-family: 'MW-Narrow', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.3s ease;
  display: block;
}

#fullscreen-menu nav ul li a:hover {
  color: #ccc;
}

/* Menu separators */
#fullscreen-menu nav ul li.menu-separator {
  height: 0.4vw;
  background-color: #fff;
  margin: 2rem 0;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  width: 3vw;
}

#fullscreen-menu nav ul li.menu-separator:first-child {
  margin-top: 0;
}

/* Footer menu items (Impressum & Datenschutz) */
#fullscreen-menu nav ul li.menu-footer {
  margin: 0;
}

#fullscreen-menu nav ul li.menu-footer a {
  font-size: 1vw;
  font-family: 'MW-Narrow', sans-serif;
}

/* Menu content area */
#menu-content-area {
  flex: 1;
  padding-right: 8.5vw;
  max-width: 55vw;
  height: 60vh;
  overflow-y: auto;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.menu-content {
  display: none;
  color: #fff;
  font-family: 'MW-Narrow', sans-serif;
  opacity: 0;
  transform: translateX(50px);
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  pointer-events: auto;
}

.menu-content.active {
  display: block;
}

.menu-content h2 {
  font-size: 2.5vw;
  font-weight: 300;
  margin: 0 0 2rem 0;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.menu-content p {
  font-size: 1.2vw;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  color: #ccc;
}

/* Custom scrollbar for content area */
#menu-content-area::-webkit-scrollbar {
  width: 8px;
}

#menu-content-area::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

#menu-content-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  transition: background 0.3s ease;
}

#menu-content-area::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.menu-content::-webkit-scrollbar {
  width: 8px;
}

.menu-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.menu-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  transition: background 0.3s ease;
}

.menu-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Fallback for Firefox */
#menu-content-area,
.menu-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

/* Elementor Animation Classes - Only apply on frontend, not in editor */
body:not(.elementor-editor-active) .mw-fade-up {
  opacity: 0;
  transform: translateY(30px);
}

body:not(.elementor-editor-active) .mw-fade-down {
  opacity: 0;
  transform: translateY(-30px);
}

body:not(.elementor-editor-active) .mw-fade-left {
  opacity: 0;
  transform: translateX(-30px);
}

body:not(.elementor-editor-active) .mw-fade-right {
  opacity: 0;
  transform: translateX(30px);
}

body:not(.elementor-editor-active) .mw-scale-in {
  opacity: 0;
  transform: scale(0.95);
}

/* Stagger children - apply to child elements */
body:not(.elementor-editor-active) .mw-stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
}

/* Mobile responsive adjustments for fullscreen menu */
@media (max-width: 768px) {
  /* Adjust menu container padding for mobile */
  #fullscreen-menu {
    padding-left: 9vw;
    padding-top: 25vh; /* Add more top spacing to avoid header overlap */
    padding-right: 5vw;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* Adjust navigation positioning */
  #fullscreen-menu nav {
    flex: none;
    margin-right: 0;
    margin-bottom: 6vh;
    text-align: left;
    width: 100%;
  }

  /* Increase font size for mobile menu items */
  #fullscreen-menu nav ul li a {
    font-size: 8vw; /* Much larger for mobile */
    margin: 1vh 0;
    display: block;
  }

  /* Adjust menu separators for mobile */
  #fullscreen-menu nav ul li.menu-separator {
    height: 1vw;
    width: 15vw;
    margin: 3vh 0;
  }

  /* Footer menu items - larger on mobile */
  #fullscreen-menu nav ul li.menu-footer a {
    font-size: 4vw;
    margin: 0.5vh 0;
  }

  /* Mobile content area - fullscreen overlay approach */
  #menu-content-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    padding: 14vh 6vw 4vh 6vw;
    margin: 0;
    background: rgba(47, 48, 49, 0.98);
    backdrop-filter: blur(10px);
    z-index: 10000;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  /* When content is active, slide in from right */
  #menu-content-area.mobile-active {
    transform: translateX(0);
  }

  /* Mobile back button - real HTML button */
  #mobile-back-button {
    position: fixed;
    top: 12vh;
    right: 6vw;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
    z-index: 10002;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 6px;
    transition: background 0.3s ease;
    font-family: inherit;
    display: none;
  }

  #mobile-back-button:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  #mobile-back-button.active {
    display: block;
  }

  /* Mobile content styling */
  .menu-content {
    max-width: 100%;
    padding-top: 0;
    margin-top: 0;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .menu-content * {
    max-width: 100%;
    box-sizing: border-box;
  }

  .menu-content h2 {
    font-size: max(24px, 5vw);
    margin-bottom: 3vh;
    color: #ffffff;
    word-wrap: break-word;
  }

  .menu-content p, .menu-content div {
    font-size: max(16px, 3.5vw);
    line-height: 1.6;
    margin-bottom: 2vh;
    color: #ffffff;
    word-wrap: break-word;
  }

  .menu-content a {
    color: #ffffff;
    text-decoration: underline;
    word-wrap: break-word;
  }

  /* Ensure images and media don't cause horizontal scroll */
  .menu-content img, .menu-content video, .menu-content iframe {
    max-width: 100%;
    height: auto;
  }

  /* Hide menu navigation when content is active */
  #fullscreen-menu.content-active nav {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
}

/* Responsive adjustments for very small screens */
@media (max-width: 480px) {
  #fullscreen-menu {
    padding-top: 30vh; /* Even more top spacing for smaller screens */
  }
  
  #fullscreen-menu nav ul li a {
    font-size: 9vw; /* Even larger font size */
  }

  #fullscreen-menu nav ul li.menu-footer a {
    font-size: 4.5vw;
  }

  /* Extra small screens - content adjustments */
  #menu-content-area {
    padding: 16vh 4vw 4vh 4vw;
  }

  .menu-content h2 {
    font-size: max(20px, 6vw);
  }

  .menu-content p, .menu-content div {
    font-size: max(14px, 4vw);
  }

  /* Adjust back button for smaller screens */
  #mobile-back-button {
    top: 14vh;
    right: 4vw;
    font-size: 14px;
    padding: 6px 10px;
  }
}

/* Extra responsive breakpoint for very wide tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  #menu-content-area {
    max-width: 65vw;
    height: 65vh;
  }
}

/* Ultra-small screens (iPhone SE, older Android) */
@media (max-width: 320px) {
  #fullscreen-menu {
    padding-top: 25vh;
    padding-left: 6vw;
    padding-right: 6vw;
  }

  #fullscreen-menu nav ul li a {
    font-size: 10vw;
  }

  #fullscreen-menu nav ul li.menu-footer a {
    font-size: 5vw;
  }

  #menu-content-area {
    padding: 18vh 3vw 4vh 3vw;
  }

  .menu-content h2 {
    font-size: max(18px, 7vw);
  }

  .menu-content p, .menu-content div {
    font-size: max(13px, 4.5vw);
  }
}