/* Topbar */
.mmz-tabs__top{
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 1rem 0;
  flex-wrap: wrap;

  box-sizing: border-box;
  width: calc(100cqw + 2 * var(--mmz-inner-pad));  /* cqw = Content-Box, Padding wieder draufrechnen */
  margin-inline: 50% 0;
  transform: translateX(-50%);
  padding: 0 var(--mmz-inner-pad);
}

/* Back button */
.mmz-tabs__back{
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: inherit;
    font-weight: 800;
    color: var(--mmz-blue-main) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.mmz-tabs__back:hover{
  color: var(--mmz-blue-main) !important;
  border-color: rgba(0,0,0,0.18);
}

/* Tabs nav */
.mmz-tabs__nav{
  display: inline-flex;
  border-radius: 999px;
  padding: .25rem;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  gap: .25rem;
}

.mmz-tabs__tab{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;

  padding: .55rem .9rem;
  border-radius: 999px;
  font-weight: 850;
  letter-spacing: .01em;
  color: rgba(0,0,0,0.75);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.mmz-tabs__tab:hover{
  color: rgba(0,0,0,0.9);
  background-color: var(--mmz-blue-table-2);
}

.mmz-tabs__tab.is-active{
    background: linear-gradient(135deg, var(--mmz-blue-main), var(--mmz-blue-2));
    color: #fff;
    box-shadow: 0 10px 18px rgba(0,0,0,0.12);
}

/* Panels */
.mmz-tabs__panel{
    display: none;
}

.mmz-tabs__panel.is-active{
    display: block;
}

.mmz-tab-title{
    background: linear-gradient(135deg, var(--mmz-blue-main), var(--mmz-blue-2));
    box-shadow: 0 10px 18px rgba(0,0,0,0.12);
    box-sizing: border-box;
    width: calc(100cqw + 2 * var(--mmz-inner-pad));  /* cqw = Content-Box, Padding wieder draufrechnen */
    margin-inline: 50% 0;
    margin-block: 3rem 1rem;
    transform: translateX(-50%);
    padding: .55rem 1.5rem;
}

.mmz-tab-title h3 {
    color: white;
    margin-block-start: 0;
    margin-block-end: 0;
}

.mmz-tab-title p {
    color: rgb(228, 228, 228);
    margin-block-end: 0;
    font-size: small;
}

.mmz-tabs__label--short{ display: none; }

@media (max-width: 600px){
  .mmz-tabs__label--long{ display: none; }
  .mmz-tabs__label--short{ display: inline; }
}