/* Menü oben: Eine weisse Pille gleitet zu dem Punkt, an dem man sich gerade befindet.
   Kontakt ist nicht mehr dauerhaft weiss, sondern nur noch, wenn man dort ist. */

.site-header .menu a.menu-link,
.site-header .menu a.menu-cta {
  transition: color .45s ease, background-color .3s ease;
}

/* Kontakt sieht im Ruhezustand aus wie die anderen Menüpunkte */
.site-header .menu a.menu-cta {
  min-height: 2.75rem;
  padding: .5rem .95rem;
  background: transparent;
  color: var(--grey-light);
  border-color: transparent;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: normal;
}
.site-header .menu a.menu-cta::after { display: none; }
.site-header .menu a.menu-cta:hover {
  color: var(--ink);
  background: #ffffff12;
}
.site-header .menu-cta-item { margin-left: 0; }

/* Desktop: eine einzige Pille hinter den Menüpunkten, die per transform wandert */
@media (width > 52rem) {
  .site-header .menu { position: relative; }
  .site-header .menu a.menu-link,
  .site-header .menu a.menu-cta {
    position: relative;
    z-index: 1;
  }
  .site-header .menu a.is-current,
  .site-header .menu a.is-current:hover {
    background: transparent;
    color: var(--navy);
  }
  .site-header .nav-pill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 0;
    height: 0;
    border-radius: var(--pill);
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 22px rgba(255, 255, 255, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .site-header .nav-pill.is-visible { opacity: 1; }
  .site-header .nav-pill.is-ready {
    transition: transform .55s var(--ease), width .55s var(--ease), height .55s var(--ease), opacity .3s ease;
  }
}

/* Handy: Vollbild-Menü mit grosser Schrift, keine Pille */
@media (width <= 52rem) {
  .site-header .nav-pill { display: none; }
  .site-header .menu a.menu-link {
    color: var(--grey-light);
  }
  .site-header .menu a.menu-link.is-current,
  .site-header .menu a.menu-link.is-current:hover {
    background: transparent;
    box-shadow: none;
    color: #fff;
    text-shadow: 0 0 26px rgba(255, 255, 255, .55);
  }
  .site-header .menu-cta-item { margin: 2rem 0 0; }
  .site-header .menu a.menu-cta {
    width: 100%;
    min-height: 3.5rem;
    padding: .75rem 1.5rem;
    justify-content: center;
    color: var(--ink);
    border: 1px solid #ffffff29;
    font-size: 1.0625rem;
    font-weight: 600;
  }
  .site-header .menu a.menu-cta.is-current,
  .site-header .menu a.menu-cta.is-current:hover {
    background: #fff;
    color: var(--navy);
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .menu a.menu-link,
  .site-header .menu a.menu-cta { transition: none; }
  .site-header .nav-pill,
  .site-header .nav-pill.is-ready { transition: none; }
}