/* ===================================================
   usbubble Nav – urbanstudio Pill-Button Navigation
   =================================================== */

/* --- Layout ---------------------------------------- */

.mainnav {display:flex;align-items:center;justify-content:flex-end;color:#495465;}
.mainnav > a {display:inline-flex;align-items:center;line-height:36px;font-size:18px;font-weight:400 !important;position:relative;color:var(--us-secondary-color);}
.mainnav > a + * {margin-left:32px;}
.mainnav > a.active:after {position:absolute;bottom:2px;left:0;width:100%;height:3px;background:var(--us-tertiary-color);opacity:.5;content:'';}
.mainnav > .btn {width:36px;height:36px;justify-content:center;align-items:center;line-height:36px;font-size:16px;font-weight:400 !important;margin-left:16px !important;margin-right:-10px !important;}
.mainnav > .btn i {font-size:16px !important;line-height:36px !important;}
.mainnav > .btn i + span {display:none;}

nav.mainnav.usbubble {position:relative;}

nav.mainnav.usbubble > ul {display:flex;align-items:center;justify-content:flex-end;gap:4px;list-style:none;margin:0;padding:0;color:rgb(73,84,101);}
nav.mainnav.usbubble > ul > li {position:relative;}

.main-header,
.main-navbar,
.nav-container,
nav.mainnav.usbubble {overflow:visible;}

[hidden] {display:none !important;}

/* --- Pill-Button Base ------------------------------ */

nav.mainnav.usbubble > ul > li > a {display:flex;align-items:center;gap:5px;padding:8px 14px;border-radius:var(--us-radius);font-size:16px;font-weight:400 !important;line-height:1.35;color:var(--us-secondary-color);background:transparent;cursor:pointer;text-decoration:none;white-space:nowrap;position:relative;transition:background .2s ease,color .2s ease;min-height:44px;}

nav.mainnav.usbubble > ul > li > a:hover,
nav.mainnav.usbubble > ul > li > a:focus {background:rgba(10,37,64,.04);color:var(--us-secondary-color);text-decoration:none;}
nav.mainnav.usbubble > ul > li:not(.menubtn) > a:hover{box-shadow:inset 0 0 0 1px rgba(10,37,64,.04);}

nav.mainnav.usbubble > ul > li.active > a {background:rgba(10,37,64,.04);}
nav.mainnav.usbubble > ul > li.active > a:hover {background:rgba(10,37,64,.08);}
nav.mainnav.usbubble > ul > li.active > a::after {display:none;}

/* Pill bleibt markiert solange Subnav offen */
nav.mainnav.usbubble > ul > li.has-subnav.open > a,
nav.mainnav.usbubble > ul > li.has-subnav > a[aria-expanded="true"] {background:rgba(10,37,64,.06);}

/* --- Chevron (has-subnav) -------------------------- */

nav.mainnav.usbubble > ul > li.has-subnav > a {padding-right:12px !important;}
nav.mainnav.usbubble > ul > li.has-subnav > a .menu-label::after {content:"\f078";font-family:var(--us-fontawesome);font-weight:400;display:inline-block;font-size:10px;margin-left:8px;vertical-align:1px;color:currentColor;opacity:.5;transition:transform .3s ease,opacity .2s ease;}

nav.mainnav.usbubble > ul > li.has-subnav.open > a .menu-label::after,
nav.mainnav.usbubble > ul > li.has-subnav > a[aria-expanded="true"] .menu-label::after {transform:rotate(180deg);opacity:.7;}

/* --- CTA Button (.menubtn) ------------------------- */

nav.mainnav.usbubble .menubtn {margin-left:12px;}
nav.mainnav.usbubble .menubtn > a {border:1px solid rgba(10,37,64,.33);border-radius:var(--us-radius,8px);padding:7px 18px;line-height:1.35;color:var(--us-secondary-color,#025087);background:linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.4) 100%);box-shadow:inset 0 1px rgba(255,255,255,.4);transition:background .2s ease,color .2s ease,border-color .2s ease;}
nav.mainnav.usbubble .menubtn > a:hover,
nav.mainnav.usbubble .menubtn > a:focus {color:var(--us-primary-color,#025087);border-color:var(--us-primary-color,#025087);background:linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.7) 100%);}

/* --- Nav-Button (#navbtn) -------------------------- */

nav.mainnav.usbubble #navbtn {position:relative;width:48px;height:48px;padding:0;margin:0 -14px 0 0;background:none;border:none;border-radius:0;box-shadow:none;cursor:pointer;text-shadow:none;-webkit-appearance:none;appearance:none;}
nav.mainnav.usbubble #navbtn > span:not(.nav-btn-icon) {display:none;}
nav.mainnav.usbubble #navbtn:focus-visible {outline:2px solid var(--us-primary-color,#025087);outline-offset:2px;}

/* Hamburger Icon */
.nav-btn-icon {display:block;position:relative;width:20px;height:14px;}
nav.mainnav.usbubble #navbtn .nav-btn-icon {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:14px;}
nav.mainnav.usbubble #navbtn .nav-btn-icon span {position:absolute;left:0;width:20px;height:2px;background:var(--us-primary-color,#025087);box-shadow:none;transition:background .3s ease,box-shadow .3s ease,top .2s ease,transform .2s ease;}
.nav-btn-icon span.line1 {top:0;}
.nav-btn-icon span.line2 {top:6px;}
.nav-btn-icon span.line3 {top:12px;}

/* Hamburger → X Animation */
.menu-expanded .nav-btn-icon span.line1,
.nav-btn.close .nav-btn-icon span.line1 {top:6px;transform:rotate(45deg);}
.menu-expanded .nav-btn-icon span.line2,
.nav-btn.close .nav-btn-icon span.line2 {display:none;}
.menu-expanded .nav-btn-icon span.line3,
.nav-btn.close .nav-btn-icon span.line3 {top:6px;transform:rotate(-45deg);}

/* --- Subnav Bubble --------------------------------- */

nav.mainnav.usbubble .subnav {position:absolute;left:0;top:calc(100% + 8px);min-width:260px;max-width:min(80vw,1100px);font-size:16px !important;border:1px solid var(--us-stroke-weak,#e5e8ec);box-shadow:0 6px 14px rgba(73,84,101,.08);border-radius:10px;padding:16px 24px 20px;z-index:50;max-height:0;opacity:0;pointer-events:none;transition:transform .28s ease,opacity .18s ease,max-height .28s ease;background:rgba(255,255,255,0.95);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
nav.mainnav.usbubble .subnav.right {left:auto;right:0;}

nav.mainnav.usbubble .subnav::before,
nav.mainnav.usbubble .subnav::after {content:"";position:absolute;top:-12px;left:24px;right:auto;transform:rotate(180deg);border:6px solid transparent;}

nav.mainnav.usbubble .subnav.right::before,
nav.mainnav.usbubble .subnav.right::after {left:auto;right:24px;}

nav.mainnav.usbubble .subnav::before {border-top-color:#fff;z-index:2;}
nav.mainnav.usbubble .subnav::after {top:-13.5px;transform:rotate(180deg) scale(1.2);border:6px solid transparent;border-top-color:var(--us-stroke-weak,#e5e8ec);z-index:1;}

/* Open state – !important überschreibt hover-intent */
nav.mainnav.usbubble .has-subnav.open > .subnav,
nav.mainnav.usbubble .has-subnav > a[aria-expanded="true"] + .subnav {transform:none !important;opacity:1 !important;max-height:70vh !important;pointer-events:auto !important;}

/* --- Subnav List Items ----------------------------- */

nav.mainnav.usbubble .subnav > ul {list-style:none;margin:0;padding:0;column-count:1;column-gap:32px;max-height:100%;overflow-y:auto;}
nav.mainnav.usbubble .subnav > ul:has(li:nth-child(n + 6)) {column-count:2;}
nav.mainnav.usbubble .subnav > ul:has(li:nth-child(n + 6)) > li {min-width:200px !important;}

nav.mainnav.usbubble .subnav > ul > li {break-inside:avoid;padding:0;opacity:0;transform:translateY(10px);min-width:240px;}
nav.mainnav.usbubble .has-subnav.open .subnav > ul > li {animation:subIn .36s ease both;animation-delay:calc(var(--i,0) * .033s);}

nav.mainnav.usbubble .subnav > ul > li > a {display:block;padding:6px 0;line-height:1.3;color:var(--us-text-strong,#222);text-decoration:none;border-radius:0;}

nav.mainnav.usbubble .subnav > ul > li > a:hover,
nav.mainnav.usbubble .subnav > ul > li > a:focus {color:var(--us-primary-color,#025087);text-decoration:underline;}

nav.mainnav.usbubble .subnav > ul > li.level-3 {color:var(--us-text-weak,#606a78);font-size:14px !important;break-inside:avoid;}
nav.mainnav.usbubble .subnav > ul > li.level-3 > a {display:block;padding:4px 0 4px 8px;line-height:1.3;color:inherit;text-decoration:none;}

nav.mainnav.usbubble .subnav > ul > li.level-3 > a:hover,
nav.mainnav.usbubble .subnav > ul > li.level-3 > a:focus {color:var(--us-primary-color,#025087);text-decoration:underline;}

/* --- Focus-visible --------------------------------- */

nav.mainnav.usbubble .subnav a:focus-visible,
nav.mainnav.usbubble > ul > li > a:focus-visible {outline:2px solid var(--us-primary-color,#025087);outline-offset:2px;}

/* --- Stagger indices ------------------------------- */

nav.mainnav.usbubble .subnav > ul > li:nth-child(1)  {--i:0;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(2)  {--i:1;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(3)  {--i:2;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(4)  {--i:3;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(5)  {--i:4;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(6)  {--i:5;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(7)  {--i:6;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(8)  {--i:7;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(9)  {--i:8;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(10) {--i:9;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(11) {--i:10;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(12) {--i:11;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(13) {--i:12;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(14) {--i:13;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(15) {--i:14;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(16) {--i:15;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(17) {--i:16;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(18) {--i:17;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(19) {--i:18;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(20) {--i:19;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(21) {--i:20;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(22) {--i:21;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(23) {--i:22;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(24) {--i:23;}
nav.mainnav.usbubble .subnav > ul > li:nth-child(25) {--i:24;}

@keyframes subIn {
from {opacity:0;transform:translateY(10px);}
to {opacity:1;transform:translateY(0);}
}

/* --- Hover-intent guard ---------------------------- */
/* Verhindert Hover-Open, respektiert .open + aria-expanded */

@media (hover:hover) {
nav.mainnav.usbubble .has-subnav:not(.open):hover > .subnav,
nav.mainnav.usbubble .has-subnav:not(:has(a[aria-expanded="true"])):hover > .subnav {opacity:0;transform:translateY(6px) scale(.8);max-height:0;pointer-events:none;}
}

/* ===================================================
   body.immersive-hero– Transparent Header
   =================================================== */

body.immersive-hero nav.mainnav.usbubble > ul > li > a {color:#fff;}

body.immersive-hero nav.mainnav.usbubble > ul > li > a:hover,
body.immersive-hero nav.mainnav.usbubble > ul > li > a:focus {background:rgba(10,37,64,.15);color:#fff;}

body.immersive-hero nav.mainnav.usbubble > ul > li.active > a {background:rgba(10,37,64,.10);}
body.immersive-hero nav.mainnav.usbubble > ul > li.active > a:hover {background:rgba(10,37,64,.18);}

body.immersive-hero nav.mainnav.usbubble > ul > li.has-subnav.open > a,
body.immersive-hero nav.mainnav.usbubble > ul > li.has-subnav > a[aria-expanded="true"] {background:rgba(10,37,64,.15);}

body.immersive-hero nav.mainnav.usbubble .menubtn > a {background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:var(--us-radius,8px);padding:7px 18px;line-height:1.35;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),var(--us-box-shadow);}

body.immersive-hero nav.mainnav.usbubble .menubtn > a:hover,
body.immersive-hero nav.mainnav.usbubble .menubtn > a:focus {background:rgba(10,37,64,.15);border-color:rgba(255,255,255,.6);color:#fff;}

/* #navbtn: Transparent nur ab Tablet – mobil bleibt die Leiste weiß */
@media only screen and (min-width:768px) {
body.immersive-hero nav.mainnav.usbubble #navbtn .nav-btn-icon span {background:#fff;box-shadow:var(--us-box-shadow);}
body.immersive-hero nav.mainnav.usbubble #navbtn:focus-visible {outline-color:#fff;}
}

/* ===================================================
   body.immersive-hero.scrolled – zurück zum Standard
   =================================================== */

body.immersive-hero.scrolled nav.mainnav.usbubble > ul > li > a {color:var(--us-secondary-color);}

body.immersive-hero.scrolled nav.mainnav.usbubble > ul > li > a:hover,
body.immersive-hero.scrolled nav.mainnav.usbubble > ul > li > a:focus {background:rgba(10,37,64,.06);color:var(--us-secondary-color);}

body.immersive-hero.scrolled nav.mainnav.usbubble > ul > li.active > a {background:rgba(10,37,64,.04);}
body.immersive-hero.scrolled nav.mainnav.usbubble > ul > li.active > a:hover {background:rgba(10,37,64,.08);}

body.immersive-hero.scrolled nav.mainnav.usbubble > ul > li.has-subnav.open > a,
body.immersive-hero.scrolled nav.mainnav.usbubble > ul > li.has-subnav > a[aria-expanded="true"] {background:rgba(10,37,64,.06);}

body.immersive-hero.scrolled nav.mainnav.usbubble .menubtn > a {color:var(--us-secondary-color);border:1px solid rgba(10,37,64,.33);background:linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.4) 100%);box-shadow:inset 0 1px rgba(255,255,255,.4);transition:var(--us-transition);}

body.immersive-hero.scrolled nav.mainnav.usbubble .menubtn > a:hover,
body.immersive-hero.scrolled nav.mainnav.usbubble .menubtn > a:focus {color:var(--us-primary-color);border-color:var(--us-primary-color);background:linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.7) 100%);}

body.scrolled:not(.immersive-hero) nav.mainnav.usbubble .menubtn > a {color:var(--us-secondary-color);border:1px solid rgba(10,37,64,.33);background:linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.4) 100%);box-shadow:inset 0 1px rgba(255,255,255,.4);transition:var(--us-transition);}

body.scrolled:not(.immersive-hero) nav.mainnav.usbubble .menubtn > a:hover,
body.scrolled:not(.immersive-hero) nav.mainnav.usbubble .menubtn > a:focus {color:var(--us-primary-color);border-color:var(--us-primary-color);background:linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.7) 100%);}

@media only screen and (min-width:768px) {
body.immersive-hero.scrolled nav.mainnav.usbubble #navbtn .nav-btn-icon span {background:var(--us-primary-color,#025087);box-shadow:none;}
}

/* --- Scroll-Transition ----------------------------- */

body.immersive-hero nav.mainnav.usbubble > ul > li > a,
body.immersive-hero nav.mainnav.usbubble .menubtn > a {transition:color .3s ease,background .3s ease,border-color .3s ease;}

/* ===================================================
   Responsive
   =================================================== */

/* Mobil: nur Pill-Liste ausblenden, nav-container bleibt für #navbtn */
@media only screen and (max-width:767px) {
   body #maincontent{padding-top:var(--us-header-height)!important;}
}
@media only screen and (min-width:768px)  and (max-width:1279px){
   body:not(.immersive-hero) #maincontent{padding-top:var(--us-header-height)!important;}
}
@media only screen and (max-width:800px) {
.nav-container .mainnav > ul {display:none !important;}
}

@media only screen and (min-width:801px) {
.nav-container {display:block;}
}

/* Tablet: Pill-Nav versteckt, #navbtn + Suchbutton sichtbar */
@media only screen and (max-width:1279px) {
.overnav {display:none;}
.mainnav > ul {display:none !important;}
#navbtn {display:flex !important;}
}

@media only screen and (max-width:834px) {
.mainnav > .btn.main-search-toggle {transform:translateY(-150px);}
}

/* Desktop: Pill-Nav sichtbar, #navbtn ausgeblendet */
@media only screen and (min-width:1280px) {
body:not(.immersive-hero) #maincontent{padding-top:var(--us-header-height)!important;}
.main-navbar {position:fixed;top:0;left:0;right:0;}
#navbtn {display:none !important;}
}

@media only screen and (max-height:520px) {
nav.mainnav.usbubble .subnav > ul:has(li:nth-child(n + 11)) {column-count:3 !important;}
}

@media only screen and (max-height:400px) {
nav.mainnav.usbubble .subnav > ul:has(li:nth-child(n + 20)) {column-count:4 !important;}
}

/* --- Reduced Motion -------------------------------- */

@media (prefers-reduced-motion:reduce) {
nav.mainnav.usbubble .subnav {transition:none;}
nav.mainnav.usbubble .subnav > ul > li {animation:none;opacity:1;transform:none;}
nav.mainnav.usbubble > ul > li > a {transition:none;}
nav.mainnav.usbubble > ul > li.has-subnav > a .menu-label::after {transition:none;}
}