/* no margin top for first headline in news content elements */
.news-content.sidebar-layout .main .frame-default > :first-child {
    margin-top: 0;
}

/* back button in news */
.news-content.sidebar-layout .main .back-button-wrapper {
    margin-top: 4em;
}

/* no step header in form framework */
.frame-type-form_formframework form > h2 { 
    display: none;
}

/* Stock availability tooltip, we have more states then green and red */
.tooltip-icon[data-type="stock availability-1"]::before {
    background-color: #4C73A1;
}
.tooltip-icon[data-type="stock availability-2"]::before {
    background-color: #3B7826;
}
.tooltip-icon[data-type="stock availability-3"]::before {
    background-color: #9E7D4A;
}
.tooltip-icon[data-type="stock availability-4"]::before {
    background-color: #AA0225;
}

.hidden {
    display: none;
}

/* relative path to tile image for stage doesn't work */
.stage::before {
    background-image: url("/typo3conf/ext/accellerate/Resources/Public/Images/tile.svg") !important;
}

/* custom layout change requests */
.frame-type-header h1 {
    color: #b71d27;
}
.frame-type-aemka_textimage .intro.rte h3,
.frame-type-aemka_textimage .col.rte h3,
.frame-type-textpic h3,
.frame-type-text h3  {
    font-size: 18px;
    color: #337FA7;
}
.frame-default :where(.page-content ul) :where(li)::before {
    color: #337FA7;
}

.page-footer .mail { 
  --icon-size: 20px;
  --icon-color: var(--white-hex);
  --icon: url("/typo3conf/ext/accellerate/Resources/Public/Icons/mail.svg");
  font-size: var(--font-size-md);
  line-height: 1.2;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.page-footer .mail .label {
  position: relative;
  top: calc(var(--icon-size) * -0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-box-size);
  aspect-ratio: 1;
  border-radius: var(--border-radius-small);
  background-color: var(--primary-hex);
  font-size: 0;
}
.page-footer .mail .label::before {
  content: "";
  content: "";
  display: inline-block;
  vertical-align: text-top;
  background-color: var(--icon-color, var(--dark-teal));
  width: var(--icon-size, 1em);
  height: var(--icon-size, 1em);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask: var(--icon) no-repeat center;
  mask: var(--icon) no-repeat center;
}
@media (max-width: 1499px) and (min-width: 1000px) {
  .page-footer .mail {
    font-size: var(--font-size-sm);
  }
}