/* FITfactory v63 – verständliche und barrierearme Hauptnavigation */
@media screen {
  .site-header-v63 {
    overflow:visible;
    isolation:isolate;
  }

  .main-nav-v63 {
    overflow:visible;
  }

  .nav-list-v63,
  .nav-submenu-v63 {
    margin:0;
    padding:0;
    list-style:none;
  }

  .nav-list-v63 {
    display:flex;
    align-items:center;
    gap:6px;
  }

  .nav-group-v63 {
    position:relative;
  }

  .nav-group-toggle-v63 {
    min-height:46px;
    padding:10px 13px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid transparent;
    border-radius:10px;
    color:var(--ff-text,#fff);
    background:transparent;
    font-weight:750;
    line-height:1.2;
    white-space:nowrap;
    cursor:pointer;
    transition:color .16s ease,background-color .16s ease,border-color .16s ease;
  }

  .nav-group-toggle-v63 svg {
    flex:0 0 auto;
    transform-box:fill-box;
    transform-origin:center;
    transition:transform .16s ease;
  }

  .nav-group-toggle-v63[aria-expanded="true"] svg {
    transform:rotate(180deg);
  }

  .nav-group-toggle-v63:hover,
  .nav-group-toggle-v63[aria-expanded="true"] {
    color:#f0b9ff;
    border-color:rgba(226,165,242,.52);
    background:#3a2445;
  }

  .nav-group-v63.is-active-v63 > .nav-group-toggle-v63 {
    color:#f0b9ff;
    border-color:rgba(226,165,242,.5);
    background:#3a2445;
    box-shadow:inset 0 -2px 0 #e2a5f2;
  }

  .nav-group-toggle-v63:focus-visible,
  .nav-submenu-link-v63:focus-visible,
  .main-nav-v63 .nav-cta:focus-visible {
    outline:3px solid #f3b7ff !important;
    outline-offset:3px !important;
  }

  .nav-submenu-v63 {
    position:absolute;
    z-index:120;
    top:calc(100% + 10px);
    left:0;
    width:max-content;
    min-width:286px;
    max-width:min(340px,calc(100vw - 32px));
    padding:8px;
    border:1px solid rgba(226,165,242,.42);
    border-radius:16px;
    background:#21142a;
    box-shadow:0 22px 54px rgba(5,2,8,.55);
  }

  .nav-group-v63[data-nav-group-v63="fitfactory"] .nav-submenu-v63 {
    right:0;
    left:auto;
  }

  .nav-submenu-v63 > li + li {
    margin-top:3px;
  }

  .nav-submenu-link-v63 {
    position:relative;
    min-height:56px;
    padding:10px 12px 10px 15px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:1px solid transparent;
    border-radius:10px;
    color:#fff;
    text-decoration:none;
  }

  .nav-submenu-link-v63 span {
    font-weight:800;
    line-height:1.25;
  }

  .nav-submenu-link-v63 small {
    margin-top:3px;
    color:#cfc3d4;
    font-size:.75rem;
    line-height:1.35;
  }

  .nav-submenu-link-v63:hover,
  .nav-submenu-link-v63.is-current-v63,
  .nav-submenu-link-v63.is-section-v63 {
    color:#f0b9ff;
    border-color:rgba(226,165,242,.3);
    background:#3a2445;
  }

  .nav-submenu-link-v63.is-current-v63::before,
  .nav-submenu-link-v63.is-section-v63::before {
    content:"";
    position:absolute;
    top:12px;
    bottom:12px;
    left:4px;
    width:3px;
    border-radius:4px;
    background:#e2a5f2;
  }

  .nav-cta-item-v63 {
    margin-left:4px;
  }

  .main-nav-v63 .nav-cta {
    min-height:48px;
    width:auto;
    margin:0;
    padding:11px 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
  }

  .main-nav-v63 .nav-cta.is-current-v63,
  .main-nav-v63 .nav-cta.is-section-v63 {
    box-shadow:0 0 0 3px #fff,0 0 0 6px #9b3fbd;
  }
}

@media (min-width:1050px) {
  .site-header-v63 {
    height:88px;
    gap:22px;
    padding-inline:max(24px,calc((100vw - 1280px)/2));
  }

  .site-header-v63 .logo img {
    width:205px;
    max-height:76px;
  }

  .site-header-v63 .menu-button {
    display:none;
  }

  .main-nav-v63,
  .main-nav-v63.open {
    position:static;
    min-height:0;
    max-height:none;
    margin-left:auto;
    padding:0;
    display:flex;
    align-items:center;
    overflow:visible;
    border:0;
    background:transparent;
    box-shadow:none;
  }
}

@media (min-width:1050px) and (max-width:1199px) {
  .site-header-v63 {
    gap:14px;
    padding-inline:18px;
  }

  .site-header-v63 .logo img {
    width:178px;
  }

  .nav-list-v63 {
    gap:3px;
  }

  .nav-group-toggle-v63 {
    padding-inline:10px;
    font-size:.86rem;
  }

  .main-nav-v63 .nav-cta {
    padding-inline:13px;
    font-size:.84rem;
  }
}

@media (max-width:1049px) {
  html.nav-overlay-open-v63,
  html.nav-overlay-open-v63 body {
    overflow:hidden;
  }

  .main-nav-v63.open {
    position:fixed;
    z-index:101;
    inset:0;
    min-height:100vh;
    min-height:100dvh;
    max-height:100dvh;
    padding:92px 16px 28px;
    display:block;
    overflow-y:auto;
    overscroll-behavior:contain;
    border:0;
    background:radial-gradient(circle at 88% 7%,rgba(155,63,189,.32),transparent 28%),#160d1c;
    box-shadow:none;
  }

  .nav-list-v63 {
    width:min(620px,100%);
    margin-inline:auto;
    display:grid;
    align-items:stretch;
    gap:8px;
  }

  .nav-group-toggle-v63 {
    width:100%;
    min-height:54px;
    justify-content:space-between;
    padding:13px 15px;
    border-color:rgba(226,165,242,.3);
    background:rgba(255,255,255,.045);
    font-size:1.05rem;
  }

  .nav-submenu-v63 {
    position:static;
    width:100%;
    min-width:0;
    max-width:none;
    margin-top:6px;
    padding:6px;
    border-color:rgba(226,165,242,.28);
    border-radius:12px;
    background:#21142a;
    box-shadow:none;
  }

  .nav-submenu-link-v63 {
    min-height:54px;
  }

  .nav-cta-item-v63 {
    margin:8px 0 0;
  }

  .main-nav-v63 .nav-cta {
    width:100%;
    min-height:54px;
    font-size:1rem;
  }
}

@media (max-width:420px) {
  .main-nav-v63.open {
    padding-inline:12px;
  }

  .nav-submenu-link-v63 small {
    font-size:.72rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nav-group-toggle-v63,
  .nav-group-toggle-v63 svg {
    transition:none;
  }
}

@media (forced-colors:active) {
  .nav-group-toggle-v63,
  .nav-submenu-v63,
  .nav-submenu-link-v63 {
    border:1px solid ButtonText;
  }

  .nav-group-v63.is-active-v63 > .nav-group-toggle-v63,
  .nav-submenu-link-v63.is-current-v63,
  .nav-submenu-link-v63.is-section-v63 {
    forced-color-adjust:auto;
    outline:2px solid Highlight;
  }
}
