/* Header und Hauptnavigation */
.header {
  display:flex;
  align-items:center;
  gap:36px;
  height:58px;
  padding:0 max(24px,calc((100vw - 1440px) / 2 + 24px));
  background:var(--surface);
  border-bottom:1px solid var(--line);
  .brand {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--ink);
    text-decoration:none;
    font-size:16px;
    font-weight:700;
    white-space:nowrap;
    b {
      font-weight:inherit;
    }
  }
}
.brandmark {
  width:24px;
  height:24px;
  flex:none;
  image-rendering:pixelated;
}
.mainnav {
  display:flex;
  align-self:stretch;
  gap:24px;
  margin-right:auto;
  a {
    display:flex;
    align-items:center;
    color:var(--sub);
    text-decoration:none;
    font-weight:500;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
    &:hover {
      color:var(--ink);
    }
    &.on {
      color:var(--ink);
      border-bottom-color:var(--ink);
    }
  }
}
.authbox {
  display:flex;
  align-items:center;
  gap:12px;
  .authname {
    color:var(--sub);
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .primary,.outline {
    padding:6px 14px;
  }
}
@media(max-width:720px) {
  .header {
    height:auto;
    flex-wrap:wrap;
    gap:0 16px;
    padding:10px 16px 0;
  }
  .mainnav {
    order:3;
    width:100%;
    gap:20px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    a {
      padding:10px 0;
    }
  }
  .authbox {
    margin-left:auto;
  }
}