:root{
--color-link-bg-soft:rgb(0 157 224/0.08);
--color-link-dark:#007fb8;
--header-h:4rem;
--nav-mega-w:52rem;
--nav-rail-awards-w:296px;
--nav-rail-what-w:289px;
--nav-rail-w:16rem;
--nav-row-h:3.25rem;
--nav-simple-w:18rem;
--z-drawer:60;
--z-header:50;
--z-overlay:45;
}

/* ========================================
   NAV DRAWER OVERLAY
   ======================================== */
body:has(#header nav[data-open]){overflow:hidden}
body::after{background:var(--color-overlay-medium);content:"";display:none;inset:0;position:fixed;z-index:var(--z-overlay)}
body:has(#header nav[data-open])::after{display:block}

/* ========================================
   HEADER
   ======================================== */
#header{align-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:var(--color-surface-overlay-95);border-bottom:1px solid var(--color-border);display:grid;grid-template-columns:1fr auto 1fr;height:var(--header-h);padding:0 1rem;position:sticky;top:0;width:100%;z-index:var(--z-header)}
.site-header__icon-btn{align-items:center;border-radius:var(--radius);display:inline-flex;justify-content:center;padding:0.5rem;transition:background-color 0.15s,color 0.15s}
.site-header__icon-btn:hover{background-color:var(--color-surface-alt)}
.site-header__icon-btn .material-symbols-outlined{color:var(--color-text-main);font-size:24px}
.site-header__icon-btn--menu{justify-self:start;margin-left:-0.5rem}
.site-header__icon-btn--fav{display:none}
.site-header__icon-btn--fav:hover .material-symbols-outlined{color:var(--color-secondary);font-variation-settings:"FILL" 1}
#header>a{align-items:center;display:flex;justify-self:center}
#header>a img{display:block;height:2.75rem;width:auto}
#header>div{align-items:center;display:flex;gap:0.125rem;justify-self:end;margin-right:-0.5rem}

#header nav h5{color:var(--color-text-main);font-family:var(--font-body);font-size:1.125rem;font-weight:700}
#header nav h6{color:var(--color-link);font-size:0.6875rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase}
#header nav .met-wie__text{display:flex;flex-direction:column;gap:0.125rem;min-width:0}
#header nav .met-wie__label{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#header .mega-rail__label{align-items:center;display:inline-flex;gap:0.5rem;min-width:0}
#header .mega-rail__icon{color:var(--color-text-muted);flex-shrink:0;font-size:20px;transition:color 0.15s}
#header .mega-rail__label-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#header .mega>ul>li>button::after{color:var(--color-text-light);content:"chevron_right";flex-shrink:0;font-family:"Material Symbols Outlined";-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-size:20px;font-style:normal;font-weight:normal;letter-spacing:normal;line-height:1;text-transform:none;transition:color 0.15s}
#header .mega>ul>li>button:hover::after{color:var(--color-link)}

/* ========================================
   DRAWER (< 1180px)
   ======================================== */
@media (max-width:1179.98px){
#header nav{background:var(--color-surface);display:none;height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));left:0;overflow:hidden;position:fixed;right:0;top:var(--header-h);width:100%;z-index:var(--z-drawer)}
#header nav[data-open]{display:block}
#header nav .panel{background:var(--color-surface);display:none;inset:0;overflow:hidden;position:absolute;width:100%}
#header nav .panel[data-state="path"]{display:block}
#header nav .panel[data-state="current"]{display:flex;flex-direction:column;overflow-y:auto}
#header nav:has(>header:not([hidden])) .panel[data-state="current"]{top:3.5rem}
#header #panel-root[data-state="current"]{padding:0.5rem 0}
#header #panel-root[data-state="path"]>li>:not(.panel[data-state]){display:none}
#header nav .panel[data-state="path"]>ul>li>:not(.panel[data-state]){display:none}
#header nav>header{align-items:center;background-color:var(--color-background);border-bottom:1px solid var(--color-border);display:grid;gap:0.5rem;grid-template-columns:auto minmax(0,1fr) auto;left:0;min-height:3.5rem;padding:0.5rem;position:absolute;right:0;top:0;z-index:1}
#header nav>header[hidden]{display:none}
#header nav>header button{align-items:center;border-radius:var(--radius);display:inline-flex;height:2.5rem;justify-content:center;transition:background-color 0.15s;width:2.5rem}
#header nav>header button:hover{background-color:var(--color-surface-alt)}
#header nav>header button .material-symbols-outlined{color:var(--color-text-main);font-size:24px}
#header nav>header h2{color:var(--color-text-main);font-family:var(--font-body);font-size:1.0625rem;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#header nav h5{padding:1rem 1rem 0.5rem}
#header nav ul{display:flex;flex-direction:column}
#header nav li > :is(a,button){align-items:center;border-bottom:1px solid var(--color-border);color:var(--color-text-main);display:flex;font-size:1rem;font-weight:600;gap:0.75rem;justify-content:space-between;min-height:var(--nav-row-h);padding:0 1rem;text-align:left;transition:background-color 0.15s,color 0.15s;width:100%}
#header nav li > :is(a,button):hover{background-color:var(--color-link-bg-soft);color:var(--color-link)}
#header nav li > :is(a,button):active{background-color:var(--color-link-bg-soft);color:var(--color-link-dark)}
#header nav li > :is(a,button)>span:not(.material-symbols-outlined){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#header .mega-rail__label{gap:0}
#header .mega-rail__icon{display:none}
#header nav li > :is(a,button)>.material-symbols-outlined{color:var(--color-text-light);flex-shrink:0;font-size:20px;transition:color 0.15s}
#header nav li > :is(a,button)>.material-symbols-outlined:first-child{color:var(--color-text-muted);font-size:22px}
#header nav li > :is(a,button):hover>.material-symbols-outlined:first-child{color:var(--color-link)}
#header nav li > :is(a,button):hover>.material-symbols-outlined:last-child{color:var(--color-link)}
#header nav li > :is(a,button):hover .mega-rail__icon{color:var(--color-link)}
#header #panel-root>li>:is(a,button){border-bottom-color:var(--color-surface-alt);font-family:var(--font-body);font-size:1.0625rem;font-weight:700}
#header #panel-root>li:last-child>:is(a,button){border-bottom:none}
#header #panel-root>li.align-end>button>.material-symbols-outlined:first-child,#header #panel-awards .mega-rail__icon{color:var(--color-accent);font-variation-settings:"FILL" 1}
#header .nav-caret{display:none}
#header .nav-next{display:inline-flex}
#header nav li small{color:var(--color-text-muted);flex-shrink:0;font-size:0.8125rem;font-weight:500}
#header nav li > :is(a,button)>.met-wie__text{flex:1;white-space:normal}
#header nav .cols{display:block}
#header nav .cols>div{padding:1rem 0 0.5rem}
#header nav h5+.cols>div:first-child{padding-top:0}
#header nav .cols>div+div{border-top:8px solid var(--color-background)}
#header nav .cols>div>h6{padding:0.25rem 1rem 0.5rem}
#header nav .cols>div>ul>li>a,#header .mega>ul>li>.panel>ul>li>a{display:block;font-weight:500;line-height:var(--nav-row-h);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ================================================================
   TABLET DRAWER (768px - 1179px)
   ================================================================ */
@media (min-width:768px) and (max-width:1179.98px){
#header nav{right:auto;width:min(28rem,100vw)}
}

/* ================================================================
   DESKTOP (>= 1180px)
   ================================================================ */
@media (min-width:1180px){
body{background-color:var(--color-background);display:block}
body:has(#header nav[data-open]){overflow:visible}
body::after,body:has(#header nav[data-open])::after{display:none}
#header{display:flex;gap:1.25rem;height:auto;justify-content:flex-start;padding:0.875rem var(--site-gutter)}
.site-header__icon-btn--menu{display:none}
.site-header__icon-btn--fav{display:inline-flex}
#header>a{justify-self:auto;margin-right:0.5rem}
#header>a img{height:3rem}
#header>div{align-items:center;display:flex;gap:0.25rem;justify-self:auto;margin-left:auto;margin-right:-0.5rem}
#header nav{align-items:center;display:flex;flex:1;justify-content:center;min-width:0}
#header #nav-favorites,#header nav>header,#header .nav-next{display:none}
#header #panel-root{align-items:center;display:flex;gap:0.25rem;min-width:0}
#header #panel-root>li{position:relative}
#header #panel-root>li::after{background:transparent;bottom:-0.5rem;content:"";height:0.5rem;left:0;position:absolute;right:0}
#header #panel-root>li>button{align-items:center;border-radius:var(--radius);color:var(--color-text-main);display:inline-flex;font-size:0.9375rem;font-weight:600;gap:0.375rem;padding:0.5rem 0.75rem;position:relative;transition:background-color 0.15s,color 0.15s}
#header #panel-root>li>button::after{background:var(--color-link);border-radius:2px;bottom:0.125rem;content:"";height:2px;left:0.75rem;opacity:0;position:absolute;right:0.75rem;transition:opacity 0.15s}
#header #panel-root>li:hover>button{background-color:var(--color-link-bg-soft);color:var(--color-link)}
#header #panel-root>li:hover>button::after{opacity:1}
#header #panel-root>li>button>.material-symbols-outlined:first-child{color:var(--color-text-muted);font-size:20px;transition:color 0.15s}
#header #panel-root>li>button>.nav-caret{color:var(--color-text-light);display:inline-flex;font-size:18px;transition:color 0.15s,transform 0.15s}
#header #panel-root>li:hover>button>.material-symbols-outlined:first-child{color:var(--color-link)}
#header #panel-root>li:hover>button>.nav-caret{color:var(--color-link);transform:rotate(180deg)}
#header #panel-root>li.align-end>button>.material-symbols-outlined:first-child{color:var(--color-accent);font-variation-settings:"FILL" 1}
#header #panel-root>li>.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-dialog);display:none;left:0;margin-top:0.375rem;position:absolute;top:100%;z-index:var(--z-overlay)}
#header #panel-root>li:hover>.panel{display:block}
#header #panel-root>li.align-end>.panel{left:auto;right:0}
#header #panel-root>li>.simple{padding:0.5rem;width:var(--nav-simple-w)}
#header #panel-root>li>.simple a{align-items:center;border-radius:var(--radius);color:var(--color-text-main);display:flex;flex-direction:row;font-size:0.9375rem;font-weight:500;gap:0.75rem;padding:0.625rem 0.75rem;transition:background-color 0.15s,color 0.15s}
#header #panel-root>li>.simple a:hover{background-color:var(--color-link-bg-soft);color:var(--color-link)}
#header #panel-root>li>.simple a>small{color:var(--color-text-muted);font-size:0.75rem;font-weight:500}
#header #panel-root>li>.simple a>.material-symbols-outlined{color:var(--color-text-muted);flex-shrink:0;font-size:24px;transition:color 0.15s}
#header #panel-root>li>.simple a:hover>.material-symbols-outlined{color:var(--color-link)}
#header #panel-root>li.align-end>.simple a>.material-symbols-outlined{color:var(--color-accent);font-variation-settings:"FILL" 1}
#header #panel-root>li>.cols-panel{padding:1.25rem 1.5rem;width:min(28rem,calc(100vw - 2rem))}
#header #panel-root>li>.cols-panel .cols,#header .mega .cols{display:grid;gap:2rem;grid-template-columns:1fr 1fr}
#header #panel-root>li>.cols-panel .cols>div>h6,#header .mega .cols>div>h6{margin-bottom:0.75rem}
#header #panel-root>li>.cols-panel ul>li>a,#header .mega ul ul>li>a{border-radius:var(--radius);color:var(--color-text-main);display:block;font-size:0.875rem;font-weight:500;margin-left:-0.5rem;padding:0.375rem 0.5rem;transition:background-color 0.15s,color 0.15s}
#header #panel-root>li>.cols-panel ul>li>a:hover,#header .mega ul ul>li>a:hover{background-color:var(--color-link-bg-soft);color:var(--color-link-dark)}
#header #panel-root>li>.mega{min-height:22rem;overflow:hidden;padding:0;width:min(var(--nav-mega-w),calc(100vw - 2rem))}
#header #panel-root>li>#panel-what{--nav-rail-w:var(--nav-rail-what-w)}
#header #panel-root>li>#panel-awards{--nav-rail-w:var(--nav-rail-awards-w);min-height:27rem;width:min(34rem,calc(100vw - 2rem))}
#header #panel-root>li:hover>.mega{display:flex}
#header .mega>ul{background:var(--color-background);border-right:1px solid var(--color-border);flex-shrink:0;max-height:calc(100vh - var(--header-h) - 1.5rem);overflow-y:auto;padding:0.75rem 0.5rem;width:var(--nav-rail-w)}
#header .mega>ul>li{margin-bottom:0.125rem;margin-right:calc(-0.5rem - 1px);padding-right:calc(0.5rem + 1px);position:static}
#header .mega>ul>li>button{align-items:center;border-left:3px solid transparent;border-radius:var(--radius);color:var(--color-text-main);display:flex;font-size:0.9375rem;font-weight:600;gap:0.5rem;justify-content:space-between;padding:0.5rem 0.625rem;text-align:left;transition:background-color 0.15s,color 0.15s,border-color 0.15s,box-shadow 0.15s;width:100%}
#header .mega>ul>li>button:hover{background-color:var(--color-surface);border-left-color:var(--color-link);box-shadow:var(--shadow-xs);color:var(--color-link-dark)}
#header .mega>ul>li>button:hover .mega-rail__icon{color:var(--color-link)}
#header .mega>ul>li>button::after{font-size:18px}
#header .mega>ul>li>.panel{bottom:0;display:none;left:calc(var(--nav-rail-w) - 1px);overflow-y:auto;padding:1.75rem 2rem;position:absolute;right:0;top:0}
#header .mega>ul>li:hover>.panel{display:block}
#header .mega>ul>li>.panel>h5{font-size:1.25rem;margin-bottom:1.25rem}
}