/* Always-mobile off-canvas: Panelbreite fest begrenzen (Olivero überschreibt sonst per calc()) */
body.is-always-mobile-nav {
  --mobile-nav-width: clamp(16rem, 34vw, 22rem);
}

/* Olivero setzt max-width per calc() auf .header-nav -> mit !important überstimmen */
body.is-always-mobile-nav .header-nav {
  max-width: var(--mobile-nav-width) !important;
  padding-inline-end: var(--sp) !important; /* Olivero addiert hier sonst große Werte */
}

/* Olivero definiert die calc()-Werte in Media Queries -> dort ebenfalls hart überstimmen */
@media (min-width: 75rem) {
  body.is-always-mobile-nav .header-nav {
    max-width: var(--mobile-nav-width) !important;
    padding-inline-end: var(--sp) !important;
  }
}
@media (min-width: 90rem) {
  body.is-always-mobile-nav .header-nav {
    max-width: var(--mobile-nav-width) !important;
    padding-inline-end: var(--sp) !important;
  }
}

/* Umbrüche in Menüeinträgen verhindern (Olivero nutzt overflow-wrap/hyphens) */
body.is-always-mobile-nav .header-nav .primary-nav__menu-link,
body.is-always-mobile-nav .header-nav .primary-nav__menu-link-inner {
  white-space: nowrap !important;
  hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Optional: lange Einträge lieber kürzen statt umbrechen */
body.is-always-mobile-nav .header-nav .primary-nav__menu-link-inner {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}