/* Noir: one compact, centered capsule. Keep phone navigation in its existing shell. */
html[data-menu=noir]{--menu-font:'Helvetica Neue',Arial,sans-serif}
@media(min-width:681px){
 html[data-menu=noir]{scroll-padding-top:96px}
 html[data-menu=noir] body .masthead,html[data-menu=noir] body.is-live .masthead{
  --menu-width:1120px;--menu-surface:#090a09;--menu-border:#ffffff24;
  --menu-text:#aeb3ad;--menu-strong:#f5f5f1;--menu-accent:#efefe8;--menu-hover:#ffffff0b;
  height:60px;top:18px;border-radius:32px;background:var(--menu-surface);
  box-shadow:0 8px 24px #0003;backdrop-filter:none;-webkit-backdrop-filter:none;
 }
 html[data-menu=noir] body .masthead .masthead-inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:100%;
  align-items:center;gap:12px;padding:0 18px;height:100%;
 }
 html[data-menu=noir] body .masthead .masthead-brand{gap:14px;min-width:0}
 html[data-menu=noir] body .masthead .wordmark{font-size:25px;line-height:1;flex:none}
 html[data-menu=noir] body .masthead .wordmark::before{display:none}
 html[data-menu=noir] body .masthead .brand-rule{height:18px;flex:none;background:#ffffff22}
 html[data-menu=noir] body .masthead .league-picker{min-width:0;margin-left:0}
 html[data-menu=noir] body .masthead .team-switch{gap:7px;padding:8px 0;min-width:0}
 html[data-menu=noir] body .masthead .team-switch-text{display:block;min-width:0}
 html[data-menu=noir] body .masthead .team-switch-name{display:block;max-width:158px;font:600 14px/1.3 var(--menu-font);color:#e6e8e2;letter-spacing:0}
 html[data-menu=noir] body .masthead .team-switch .icon{width:12px;height:12px;flex:none;color:#747c75}
 html[data-menu=noir] body .masthead :is(.team-switch-text small,.team-switch .league-logo){display:none}
 html[data-menu=noir] body .masthead .masthead-nav{height:38px;gap:3px;padding:0;border:0;background:none}
 html[data-menu=noir] body .masthead .masthead-nav::after{display:none}
 html[data-menu=noir] body .masthead .masthead-nav .main-nav-link{
  height:38px;padding:0 13px;border:0;border-radius:22px;
  font:500 14px/1 var(--menu-font);letter-spacing:-.2px;text-transform:none;
  color:var(--menu-text);background:none;
 }
 html[data-menu=noir] body .masthead .masthead-nav .main-nav-link:hover{background:#ffffff0b;color:#fff}
 html[data-menu=noir] body .masthead .masthead-nav .main-nav-link.active{background:#efefe8;color:#121510;font-weight:500}
 html[data-menu=noir] body .masthead .masthead-nav .main-nav-link.active::after{display:none}
 html[data-menu=noir] body .masthead .masthead-tools{gap:4px}
 html[data-menu=noir] body .masthead .masthead-tools .masthead-rule{display:none}
 html[data-menu=noir] body .masthead .masthead-tools :is(.tool-button,.status-key summary){width:30px;height:34px;border:0;border-radius:50%}
 html[data-menu=noir] body .masthead .masthead-tools .profile-trigger{width:34px;height:34px;margin-left:7px;border:1px solid #ffffff24;background:#20241f;color:#dbe1d4;box-shadow:none}
 html[data-menu=noir] body .masthead [data-watch-count]{background:#292e28;color:#d8dfd3;box-shadow:none;border-radius:4px;font-size:8px;min-width:15px;line-height:12px}
 html[data-menu=noir] body #workspace{padding-top:96px}
 html[data-menu=noir] body #workspace:has(#page-uebersicht:not([hidden])){padding-top:88px}
}
@media(min-width:1040px) and (max-width:1100px){
 html[data-menu=noir] body .masthead .masthead-inner{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding-inline:16px}
 html[data-menu=noir] body .masthead .masthead-brand{gap:10px}
 html[data-menu=noir] body .masthead .team-switch-name{max-width:112px;font-size:13px}
 html[data-menu=noir] body .masthead .masthead-nav .main-nav-link{padding-inline:9px;font-size:13px}
 html[data-menu=noir] body .masthead .masthead-tools{gap:2px}
}
@media(min-width:681px) and (max-width:1039px){
 html[data-menu=noir] body .masthead .masthead-inner{grid-template-columns:minmax(0,1fr) auto}
 html[data-menu=noir] body .masthead .masthead-nav{display:none}
 html[data-menu=noir] body .masthead .masthead-tools{grid-column:2}
 html[data-menu=noir] body .masthead .masthead-tools button.nav-menu{display:grid;border-radius:50%}
}

/* A quiet fill identifies keyboard focus without framing the league in white. */
html[data-menu=noir] body .masthead .league-menu .league-option{border:0;box-shadow:none}
html[data-menu=noir] body .masthead .league-menu .league-option:focus-visible{outline:none;box-shadow:none;background:#252724}
html[data-menu=noir] body .masthead .league-menu .league-option:focus-visible strong{color:#fff}

/* Match the league dropdown to the selected league in the header. */
html[data-menu=noir] body .masthead .league-menu{font-family:var(--menu-font)}
html[data-menu=noir] body .masthead .league-menu .league-option{font-family:inherit}
html[data-menu=noir] body .masthead .league-menu .league-option-text strong{font-weight:600;letter-spacing:0}

/* Aufstellungen expands the navigation capsule to include its club selector. */
@media(min-width:681px){
 html[data-menu=noir] body[data-active-page=aufstellungen] .masthead{
  height:60px;border-radius:32px 32px 0 0;border-bottom:0;box-shadow:none;transform:none;opacity:1;pointer-events:auto;
 }
 html[data-menu=noir] body[data-active-page=aufstellungen] .masthead .masthead-inner{height:60px}
 html[data-menu=noir] body[data-active-page=aufstellungen] #workspace{padding-top:139px}
 html[data-menu=noir]:has(body[data-active-page=aufstellungen]){scroll-padding-top:139px}
 html[data-menu=noir] body[data-active-page=aufstellungen] #page-aufstellungen .bl-content>nav.bl-clubs{
  position:fixed;z-index:59;top:78px;
  left:max(18px,calc((100vw - 1120px) / 2));right:max(18px,calc((100vw - 1120px) / 2));
  width:auto;max-width:none;height:51px;box-sizing:border-box;margin:0;padding:3px 18px 4px;
  gap:4px;justify-content:space-between;align-items:center;border:1px solid #ffffff24;border-top:1px solid #ffffff0b;border-radius:0 0 32px 32px;
  background:#090a09;box-shadow:0 8px 24px #0003;scrollbar-width:none;scroll-padding-inline:18px;
 }
 html[data-menu=noir] body[data-active-page=aufstellungen] #page-aufstellungen .bl-content>nav.bl-clubs::-webkit-scrollbar{display:none}
 html[data-menu=noir] body[data-active-page=aufstellungen] #page-aufstellungen .bl-club{
  flex:0 0 43px;min-width:43px;width:43px;height:43px;min-height:43px;
 }
 html[data-menu=noir] body[data-active-page=aufstellungen] #page-aufstellungen .bl-club:focus-visible{outline:2px solid #efefe8;outline-offset:1px}
}