/* Stable navigation markup: CSS changes the layout, DOM nodes stay in place. */
#oben .cn-nav-drawer,
#oben .cn-nav-drawer-group,
#oben .cn-nav-brand,
#oben .cn-nav-item-head {
  display: contents;
}

#oben.cn-nav-mobile-mode > .cn-nav {
  position: static !important;
}

/* Shared navigation: visibility, controls, focus and mobile behavior. */
#oben .cn-nav-list[hidden],
#oben .cn-nav-panel[hidden],
#oben .cn-nav-panel[hidden] > ul {
  display: none !important;
}

#oben .cn-nav-list:not([hidden]) {
  opacity: 1 !important;
  visibility: visible !important;
}

#oben .cn-nav-panel:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  pointer-events: auto !important;
}

#oben .cn-nav-panel:not([hidden]) > ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#oben .cn-nav-item {
  position: relative;
}

#oben .cn-nav-item > .cn-nav-panel > ul {
  margin: 0px;
}

/* Keep submenu links in normal flow so their list items retain a height. */
#oben .cn-nav-sublist li {
  display: flow-root;
}

#oben:where(:not(.kjf-site-hemma, .kjf-site-josef)) .cn-nav-sublist li > :where(.cn-nav-item-head) > a,
#oben:where(:is(.kjf-site-hemma, .kjf-site-josef)) .cn-nav-sublist li > .cn-nav-item-head > a {
  float: none;
  display: block;
}

#oben .cn-nav-subtoggle {
  appearance: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  border: 0px;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#oben .cn-nav-subtoggle .cn-nav-arrow {
  pointer-events: none;
  display: block;
  width: 11px;
  height: 11px;
  border-width: 0px 2px 2px 0px;
  border-style: none solid solid none;
  border-color: currentcolor;
  border-image: none;
  transform: rotate(45deg);
  transition: transform 0.2s;
}

#oben .cn-nav-subtoggle .cn-nav-arrow::before,
#oben .cn-nav-subtoggle .cn-nav-arrow::after {
  content: none !important;
}

/* Mobile submenu arrows are rendered only by their disclosure buttons. */
#oben:where(:not(.kjf-site-hemma, .kjf-site-josef)).cn-nav-mobile-mode .cn-nav-list .cn-nav-item.ifsub > :where(.cn-nav-item-head) > a::after,
#oben:where(:is(.kjf-site-hemma, .kjf-site-josef)).cn-nav-mobile-mode .cn-nav-list .cn-nav-item.ifsub > .cn-nav-item-head > a::after {
  content: none !important;
  display: none !important;
}

#oben .cn-nav-subtoggle[aria-expanded="true"] .cn-nav-arrow {
  transform: rotate(225deg);
}

#oben:where(:not(.kjf-site-hemma, .kjf-site-josef)) .cn-nav-item > :where(.cn-nav-item-head) > .cn-nav-subtoggle {
  position: absolute;
  top: 55px;
  right: 0px;
  transform: translateY(-50%);
  z-index: 2;
}

#oben:where(:not(.kjf-site-hemma, .kjf-site-josef)) .cn-nav-item.ifsub > :where(.cn-nav-item-head) > a {
  padding-right: 44px;
}

#oben .cn-nav-mobile {
  appearance: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  border: 0px;
  background: transparent;
  color: inherit;
  padding: 0px;
  display: none !important;
}

#oben .cn-nav-list a:focus-visible,
#oben .cn-nav-subtoggle:focus-visible,
#oben .cn-nav-mobile:focus-visible {
  outline: currentcolor solid 3px !important;
  outline-offset: 3px !important;
}

#oben .cn-nav-list a {
  scroll-margin-top: 7rem;
}

#oben > :where(.cn-nav) > .cn-nav-drawer[hidden] {
  display: none !important;
}

/* One scrolling surface below the header, including split navigations. */
#oben.cn-nav-mobile-mode > :where(.cn-nav) > .cn-nav-drawer {
  display: block;
  position: absolute;
  top: calc(100% + var(--cn-nav-header-border-bottom, 0px));
  right: 0px;
  z-index: 20;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  max-height: var(--cn-nav-available-height, 75dvh);
  margin: 0px;
  padding: 0px;
  overflow: hidden auto;
  overscroll-behavior: contain;
  background-color: var(--cn-nav-surface, inherit);
}

#oben.cn-nav-mobile-mode .cn-nav-drawer > .cn-nav-drawer-group {
  position: static !important;
  display: flow-root !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0px !important;
  padding: 0px !important;
}

#oben.cn-nav-mobile-mode .cn-nav-drawer .cn-nav-list:not([hidden]) {
  position: static !important;
  inset: auto !important;
  display: flow-root !important;
  float: none !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0px !important;
  overflow: visible !important;
  transform: none !important;
}

@media (min-width: 768px) {
  #oben.cn-nav-mobile-mode > :where(.cn-nav) > .cn-nav-drawer {
  display: block;
    width: 700px;
  }
}

#oben.cn-nav-mobile-mode .cn-nav-list > li {
  box-sizing: border-box;
  max-width: 100%;
}

#oben.cn-nav-mobile-mode .cn-nav-list a {
  overflow-wrap: anywhere;
}

#oben .cn-nav-mobile[aria-expanded="true"] > span {
  background: transparent !important;
}

#oben .cn-nav-mobile[aria-expanded="true"] > span::before {
  transform: translateY(0px) rotate(-45deg) !important;
}

#oben .cn-nav-mobile[aria-expanded="true"] > span::after {
  transform: translateY(0px) rotate(45deg) !important;
}

#oben.cn-nav-mobile-mode .cn-nav-panel {
  position: static !important;
}

#oben.cn-nav-mobile-mode .cn-nav-panel > ul {
  position: static !important;
  max-height: none;
}

@media (prefers-reduced-motion: reduce) {
  #oben .cn-nav-list,
  #oben .cn-nav-panel,
  #oben .cn-nav-list * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}