/* Mobile App-Bar — nur <=1024px sichtbar. Firmenfarben blau/weiss/grau (Marken-Tokens).
   z-index-Set: Bar/Lupe 9000, Backdrop 9500, Panel 9600 (ueber HFE-Sticky-Header). */

.ssg-mnav { display: none; }

@media (max-width: 1024px) {
  /* Platz fuer die fixe Bar schaffen */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

  /* HFE-Hamburger ausblenden -> nur EIN mobiles Nav-System */
  .hfe-nav-menu__toggle,
  .elementor-widget-navigation-menu .hfe-nav-menu__toggle { display: none !important; }

  .ssg-mnav { display: block; }

  /* ---------- Floating-Such-Lupe ---------- */
  .ssg-mnav__search {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    z-index: 9000;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ssg-navy); color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(8,20,45,.35);
    text-decoration: none;
  }
  .ssg-mnav__search svg { width: 22px; height: 22px; }

  /* ---------- Bottom-Bar ---------- */
  .ssg-mnav__bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    display: flex;
    background: var(--ssg-bg-page, #fff);
    border-top: 1px solid var(--ssg-border-light, #d5dde9);
    box-shadow: 0 -2px 12px rgba(8,20,45,.08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ssg-mnav__tab {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px; min-height: 56px;
    color: var(--ssg-navy, #1e3560); text-decoration: none;
    font: 600 11px/1.1 "Lato", sans-serif;
  }
  .ssg-mnav__ico { display: flex; }
  .ssg-mnav__ico svg { width: 24px; height: 24px; }
  .ssg-mnav__lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .ssg-mnav__tab.is-active { color: var(--ssg-accent-blue, #3b82c4); }
  .ssg-mnav__tab:focus-visible { outline: 2px solid var(--ssg-accent-blue, #3b82c4); outline-offset: -2px; }

  /* Anti-Elementor-Rosa fuer den Hamburger-Button (und alle Buttons hier) */
  .ssg-mnav button {
    -webkit-appearance: none; appearance: none;
    background: transparent; border: 0; box-shadow: none; cursor: pointer;
  }
  .ssg-mnav button:hover, .ssg-mnav button:focus,
  .ssg-mnav button:focus-visible, .ssg-mnav button:active {
    background: transparent; box-shadow: none; outline: none;
  }
  .ssg-mnav__more:focus-visible { outline: 2px solid var(--ssg-accent-blue, #3b82c4); outline-offset: -2px; }

  /* ---------- Backdrop + Panel ---------- */
  .ssg-mnav__backdrop {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(8,20,45,.45);
    opacity: 0; transition: opacity .2s ease;
  }
  .ssg-mnav__backdrop.is-open { opacity: 1; }

  .ssg-mnav__panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9600;
    max-height: 80vh; display: flex; flex-direction: column;
    background: var(--ssg-bg-page, #fff);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 40px rgba(8,20,45,.3);
    transform: translateY(100%); transition: transform .25s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ssg-mnav__panel.is-open { transform: translateY(0); }

  .ssg-mnav__panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--ssg-border-light, #d5dde9);
  }
  .ssg-mnav__panel-title { font: 700 18px/1 "Lato", sans-serif; color: var(--ssg-navy, #1e3560); }
  .ssg-mnav__close {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    color: var(--ssg-navy, #1e3560); border-radius: 50%;
  }
  .ssg-mnav__close svg { width: 22px; height: 22px; }

  .ssg-mnav__panel-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 16px; }
  .ssg-mnav__list { list-style: none; margin: 0; padding: 0; }
  .ssg-mnav__list .ssg-mnav__list { padding-left: 16px; } /* Untermenue eingerueckt */
  .ssg-mnav__link {
    display: block; padding: 12px 20px;
    color: var(--ssg-navy, #1e3560); text-decoration: none;
    font: 600 16px/1.2 "Lato", sans-serif;
    border-bottom: 1px solid var(--ssg-border-light, #eef2f8);
  }
  .ssg-mnav__list .ssg-mnav__list .ssg-mnav__link {
    font-weight: 500; font-size: 15px; color: var(--ssg-text-muted, #6a86a8);
  }
  .ssg-mnav__link:hover { color: var(--ssg-accent-blue, #3b82c4); }

  @media (prefers-reduced-motion: reduce) {
    .ssg-mnav__panel, .ssg-mnav__backdrop { transition: none; }
  }
}