/* Bavaria Roleplay — mobile/tablet public navigation */
@media (max-width: 1024px) {
  :root { --nav-h: 68px; }

  .nav {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    height: var(--nav-h) !important;
    z-index: 1000 !important;
    background: rgba(9, 11, 15, .96) !important;
    border-bottom: 1px solid var(--border, #252a33) !important;
    backdrop-filter: blur(18px) !important;
  }

  .nav-inner {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .nav-logo { min-width: 0 !important; flex: 1 1 auto !important; }
  .nav-logo .logo-img { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }
  .nav-logo .logo-text-wrap { min-width: 0 !important; }
  .nav-logo .logo-main {
    display: block !important;
    max-width: min(48vw, 280px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .nav-links { display: none !important; }
  .nav-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
  }
  .nav-actions > .nav-btn,
  .nav-actions > .nav-user { display: none !important; }

  .nav-hamburger {
    display: inline-flex !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    border: 1px solid var(--border2, #303642) !important;
    border-radius: 9px !important;
    background: #14181f !important;
    color: #f4f6fa !important;
    cursor: pointer !important;
  }
  .nav-hamburger span { width: 21px !important; height: 2px !important; }

  .mobile-menu {
    display: flex !important;
    position: fixed !important;
    z-index: 1002 !important;
    top: var(--nav-h) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(390px, 92vw) !important;
    height: calc(100dvh - var(--nav-h)) !important;
    max-height: none !important;
    padding: 0 0 calc(18px + env(safe-area-inset-bottom)) !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow-y: auto !important;
    background: #0d1015 !important;
    border-left: 1px solid var(--border2, #2a303a) !important;
    border-bottom: 0 !important;
    box-shadow: -22px 0 55px rgba(0,0,0,.48) !important;
    opacity: 1 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(102%) !important;
    transition: transform .22s ease, visibility .22s ease !important;
  }
  .mobile-menu.open {
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }

  .mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 68px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, #252a33);
  }
  .mobile-menu__title { font-weight: 750; color: #fff; }
  .mobile-menu__subtitle { margin-top: 2px; font-size: .75rem; color: var(--muted, #8f98a8); }
  .mobile-menu__close {
    width: 40px; height: 40px; min-width: 40px; min-height: 40px;
    border: 1px solid var(--border2, #303642); border-radius: 8px;
    background: #151920; color: #fff; font-size: 1.35rem; cursor: pointer;
  }
  .mobile-menu__group { padding: 14px 12px 4px; }
  .mobile-menu__label {
    padding: 0 10px 8px; font-size: .68rem; font-weight: 750;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #7f8898);
  }
  .mm-link {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 11px 12px !important;
    margin: 2px 0 !important;
    border-radius: 8px !important;
    color: #cbd1dc !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
  }
  .mm-link::before {
    content: '';
    width: 5px; height: 5px; border-radius: 50%; background: #586170;
  }
  .mm-link:hover, .mm-link.active {
    color: #fff !important;
    background: #171c24 !important;
  }
  .mm-link.active::before { background: var(--red, #e11d48); box-shadow: 0 0 0 4px rgba(225,29,72,.12); }
  .mm-sep { margin: 10px 18px !important; }

  .mobile-menu-backdrop {
    position: fixed !important;
    z-index: 1001 !important;
    inset: var(--nav-h) 0 0 0 !important;
    background: rgba(0, 0, 0, .62) !important;
    backdrop-filter: blur(2px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .2s ease, visibility .2s ease !important;
  }
  .mobile-menu-backdrop.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.mobile-menu-open { overflow: hidden !important; }
  .page-main, .home-main { padding-top: var(--nav-h) !important; }
}

@media (max-width: 540px) {
  :root { --nav-h: 62px; }
  .nav-logo .logo-img { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
  .nav-logo .logo-main { max-width: 54vw !important; font-size: .88rem !important; }
  .nav-hamburger { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; }
  .mobile-menu { width: 100vw !important; border-left: 0 !important; }
}

/* Regelwerk: Auf kleinen Displays keine versteckten horizontalen Listen. */
@media (max-width: 700px) {
  .rw-sidebar .rw-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .rw-sidebar .rw-nav-group,
  .rw-sidebar .rw-nav-cat {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }
  .rw-sidebar .rw-nav-cat {
    min-height: 42px !important;
    padding: 8px 10px !important;
    overflow-wrap: anywhere !important;
  }
  .rw-sidebar .rw-nav-links { display: none !important; }
  .rw-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .rw-chip {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}
@media (max-width: 390px) {
  .rw-sidebar .rw-nav,
  .rw-chips { grid-template-columns: 1fr !important; }
}