/* NOIO_SECTION_NAV_STRUCTURE_V4_20260917
   Context navigation is a true separate band BELOW the hero. */
:root{
  --noio-nav-cyan:#24e5ff;
  --noio-nav-bg-top:#123548;
  --noio-nav-bg-bottom:#0c2939;
  --noio-nav-line:#31596f;
  --noio-nav-text:#f7fbfd;
}

/* Current main-navigation item. */
@media (min-width:901px){
  .noio-sub-nav-hotspots .sub2-hs{transition:background .16s ease,box-shadow .16s ease,opacity .16s ease}
  .noio-sub-nav-hotspots .sub2-hs:hover,
  .noio-sub-nav-hotspots .sub2-hs:focus-visible{
    opacity:1!important;
    background:linear-gradient(180deg,rgba(36,229,255,.045),rgba(36,229,255,.09))!important;
    box-shadow:inset 0 -3px 0 rgba(36,229,255,.55)!important;
    border-radius:0!important;
  }
  body.noio-main-active-region .noio-sub-nav-hotspots .sub2-region,
  body.noio-main-active-artikel .noio-sub-nav-hotspots .sub2-article,
  body.noio-main-active-noio-fragt .noio-sub-nav-hotspots .sub2-poll,
  body.noio-main-active-events .noio-sub-nav-hotspots .sub2-events,
  body.noio-main-active-gaming-digitales .noio-sub-nav-hotspots .sub2-gaming,
  body.noio-main-active-kultur-musik .noio-sub-nav-hotspots .sub2-culture,
  body.noio-main-active-meine-sicht .noio-sub-nav-hotspots .sub2-opinion{
    opacity:1!important;
    border-radius:0!important;
    background:linear-gradient(180deg,rgba(24,105,137,.22),rgba(11,54,75,.36))!important;
    box-shadow:inset 0 0 0 1px rgba(36,229,255,.24),inset 0 -4px 0 var(--noio-nav-cyan),0 0 20px rgba(36,229,255,.15)!important;
  }

  /* Section heroes keep the proportions of the approved mock-up. */
  body.noio-main-active-region .noio-subhero2,
  body.noio-main-active-artikel .noio-subhero2,
  body.noio-main-active-noio-fragt .noio-subhero2,
  body.noio-main-active-gaming-digitales .noio-subhero2,
  body.noio-main-active-kultur-musik .noio-subhero2,
  body.noio-main-active-meine-sicht .noio-subhero2{
    min-height:320px!important;
    height:auto!important;
    margin-bottom:0!important;
    border-bottom:0!important;
    overflow:hidden!important;
  }
  body.noio-main-active-region .noio-subhero2-inner,
  body.noio-main-active-artikel .noio-subhero2-inner,
  body.noio-main-active-noio-fragt .noio-subhero2-inner,
  body.noio-main-active-gaming-digitales .noio-subhero2-inner,
  body.noio-main-active-kultur-musik .noio-subhero2-inner,
  body.noio-main-active-meine-sicht .noio-subhero2-inner{
    padding-top:52px!important;
    padding-bottom:52px!important;
  }
}

/* This bar is outside the Cover. No image/dimming layer can darken it. */
.noio-section-nav-wrap{
  position:relative!important;
  z-index:20!important;
  box-sizing:border-box;
  display:block!important;
  clear:both!important;
  width:100%!important;
  margin:0!important;
  inset:auto!important;
  transform:none!important;
  opacity:1!important;
  filter:none!important;
  background:linear-gradient(180deg,var(--noio-nav-bg-top) 0%,var(--noio-nav-bg-bottom) 100%)!important;
  border-top:1px solid rgba(36,229,255,.78)!important;
  border-bottom:1px solid var(--noio-nav-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 9px 24px rgba(0,0,0,.16)!important;
}
.noio-section-nav{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:0;
  width:min(100% - 80px,1320px)!important;
  min-height:76px!important;
  margin:0 auto!important;
  padding:0!important;
  overflow-x:auto;
  overflow-y:hidden;
  background:transparent!important;
  scrollbar-width:thin;
  scrollbar-color:#3d7088 transparent;
}
.noio-section-nav a{
  position:relative;
  box-sizing:border-box;
  display:inline-flex;
  flex:1 0 auto;
  min-height:54px!important;
  align-items:center;
  justify-content:center;
  margin:11px 0!important;
  padding:0 28px!important;
  color:var(--noio-nav-text)!important;
  font-size:.96rem!important;
  font-weight:760!important;
  line-height:1.15;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  opacity:1!important;
  text-shadow:none!important;
  transition:background .16s ease,box-shadow .16s ease,color .16s ease;
}
.noio-section-nav a:not(:last-child)::after{
  content:"";
  position:absolute;
  top:12px;
  right:0;
  width:1px;
  height:30px;
  background:linear-gradient(180deg,transparent,#3d7088 18%,#3d7088 82%,transparent);
}
.noio-section-nav a:hover,
.noio-section-nav a:focus-visible{
  z-index:2;
  color:#fff!important;
  outline:0;
  background:rgba(36,229,255,.105)!important;
  box-shadow:inset 0 -3px 0 rgba(36,229,255,.78)!important;
}
.noio-section-nav a.is-active,
.noio-section-nav a.is-active:hover,
.noio-section-nav a.is-active:focus-visible{
  z-index:3;
  color:#03131b!important;
  background:linear-gradient(180deg,#35efff 0%,#18dff2 100%)!important;
  border-radius:8px!important;
  font-weight:850!important;
  text-shadow:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58),0 0 0 1px rgba(68,239,255,.42),0 0 26px rgba(36,229,255,.22)!important;
}
.noio-section-nav a.is-active::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  margin-right:10px;
  border-radius:50%;
  background:#03212c;
}
.noio-section-nav a.is-active::after{display:none}

/* Events keep the same hero -> navigation rhythm. */
.noio-events-intro{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:clamp(24px,4vw,46px)}
.noio-events-hero{position:relative;display:flex;min-height:320px;align-items:center;overflow:hidden;margin:0!important;border-bottom:0!important;background:linear-gradient(90deg,rgba(4,10,17,.94) 0%,rgba(4,10,17,.74) 43%,rgba(4,10,17,.23) 100%),linear-gradient(0deg,rgba(5,12,19,.35),transparent 52%),url('../images/noio-subpage-hero.jpg') center right/cover no-repeat}
.noio-events-hero-inner{box-sizing:border-box;width:min(100% - 48px,1320px);margin:0 auto;padding:52px 0}
.noio-events-hero .noio-kicker{margin:0 0 9px}
.noio-events-hero h1{max-width:900px;margin:0;color:#fff;font-size:clamp(2.6rem,5.4vw,5.2rem);font-weight:850;letter-spacing:-.03em;line-height:.98;text-shadow:0 4px 28px rgba(0,0,0,.34)}
.noio-events-hero p:last-child{max-width:780px;margin:14px 0 0;color:#c8d4dd;font-size:1rem;line-height:1.55}
.tribe-common .tribe-common-l-container{padding-top:0!important}
.tribe-events .tribe-events-header,.tribe-events .tribe-events-calendar-month,.tribe-events .tribe-events-calendar-list{border-radius:12px}

@media (max-width:900px){
  body.noio-main-active-region .noio-sub-mobile-menu2 nav a:nth-child(1),
  body.noio-main-active-artikel .noio-sub-mobile-menu2 nav a:nth-child(2),
  body.noio-main-active-noio-fragt .noio-sub-mobile-menu2 nav a:nth-child(3),
  body.noio-main-active-events .noio-sub-mobile-menu2 nav a:nth-child(4),
  body.noio-main-active-gaming-digitales .noio-sub-mobile-menu2 nav a:nth-child(5),
  body.noio-main-active-kultur-musik .noio-sub-mobile-menu2 nav a:nth-child(6),
  body.noio-main-active-meine-sicht .noio-sub-mobile-menu2 nav a:nth-child(7){color:#041018!important;background:var(--noio-nav-cyan)!important;border-radius:7px;font-weight:800}
  .noio-section-nav{width:100%!important;min-height:64px!important;padding:0 14px!important;scroll-snap-type:x proximity}
  .noio-section-nav a{flex:0 0 auto!important;min-height:44px!important;margin:10px 0!important;padding:0 18px!important;font-size:.90rem!important;scroll-snap-align:start}
  .noio-section-nav a:not(:last-child)::after{top:9px;height:26px}
  .noio-subhero2,.noio-events-hero{min-height:220px!important}
  .noio-events-hero-inner{width:100%;padding:34px 18px}
  .noio-events-hero h1{font-size:clamp(2.15rem,10vw,3.3rem)}
}