/* =========================================================
   MOBILE NAV  –  max-width: 768px
   Top-Leiste + Burger-Button + Overlay-Menü
   ========================================================= */

.mobile-top-nav {
   display: none;
}

.mobile-menu-overlay {
   display: none;
}

@media (max-width: 768px) {
   .mobile-top-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      background-color: var(--color-main);
      padding: 0 16px;
      z-index: 200;
   }

   .mobile-nav-logo {
      position: relative;
      width: 46px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
   }

   .mobile-nav-logo .logo-ring {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      fill: var(--color-bg);
   }

   .mobile-nav-logo .logo-initials {
      font-size: 13px;
      font-weight: 700;
      color: var(--color-bg);
      letter-spacing: 1px;
      position: relative;
      z-index: 1;
   }

   .burger-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 5px;
   }

   .burger-line {
      display: block;
      width: 26px;
      height: 2px;
      background-color: var(--color-bg);
      border-radius: 2px;
   }

   /* ---- Overlay ---- */
   .mobile-menu-overlay {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 350px;
      background-color: var(--color-main);
      z-index: 300;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;
      transform: translateY(-100%);
      transition: transform 0.35s ease;
   }

   .mobile-menu-overlay.is-open {
      transform: translateY(0);
   }

   .mobile-menu-close {
      position: absolute;
      top: 14px;
      right: 18px;
      background: none;
      border: none;
      font-size: 34px;
      color: var(--color-bg);
      cursor: pointer;
      line-height: 1;
      padding: 4px 8px;
   }

   .mobile-menu-nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 36px;
   }

   .mobile-menu-nav a {
      font-size: 26px;
      font-weight: 400;
      color: var(--color-bg);
      text-decoration: none;
   }

   .mobile-menu-lang {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: "Roboto Mono", monospace;
      font-size: 18px;
      font-weight: 700;
      color: var(--color-bg);
      margin-top: 8px;
   }

   .mobile-menu-lang .lang {
      background: none;
      border: none;
      color: var(--color-bg);
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      cursor: pointer;
      opacity: 0.5;
      padding: 0;
   }

   .mobile-menu-lang .lang.active {
      opacity: 1;
   }

   .mobile-menu-lang > span {
      opacity: 0.5;
   }
}