/* REC APP-HEADER PACKAGE. Nicht in B0/B1/F0/F1/G0/G1 umschreiben. */

.rec-app-header-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: transparent;
}

.rec-app-header-logo,
.rec-app-header-logo-svg {
  display: block;
  position: relative;
  top: var(--ah-logo-y, 0px);
  height: 28px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  background: transparent;
  border-radius: var(--ah-logo-radius, 0);
  color: var(--ah-logo-color, inherit);
  box-sizing: border-box;
  transition: color calc(0.22s * var(--ah-anim, 1)) ease;
}

.rec-app-header-brand.is-logo-hover-color:hover .rec-app-header-logo,
.rec-app-header-brand.is-logo-hover-color:hover .rec-app-header-logo-svg {
  color: var(--ah-logo-color-hover, var(--ah-logo-color, inherit));
}

.rec-app-header-brand.is-logo-border .rec-app-header-logo,
.rec-app-header-brand.is-logo-border .rec-app-header-logo-svg {
  border: 1px solid var(--ah-logo-border);
}

.rec-app-header-brand.is-logo-shadow .rec-app-header-logo,
.rec-app-header-brand.is-logo-shadow .rec-app-header-logo-svg {
  filter: drop-shadow(0 1px 3px var(--ah-logo-shadow));
}

.rec-app-header-brand.is-logo-small .rec-app-header-logo,
.rec-app-header-brand.is-logo-small .rec-app-header-logo-svg {
  max-width: 40px;
}

.rec-service-head.is-app-header {
  --ah-anim: 1;
  justify-content: flex-start;
  overflow: visible;
}

.rec-service-head.is-app-header .rec-service-head-actions {
  margin-left: auto;
}

.rec-app-header-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  overflow: visible;
}

.rec-app-header-buttons.is-equal-width {
  flex: 0 0 auto;
}

.rec-app-header-buttons.is-equal-width .rec-app-header-btn {
  flex: 0 0 var(--ah-eq-width, auto);
  width: var(--ah-eq-width, auto);
  box-sizing: border-box;
  overflow: visible;
}

.rec-app-header-buttons.is-width-anim .rec-app-header-btn {
  transition: width 0.16s ease, flex-basis 0.16s ease;
}

.rec-app-header-buttons.is-equal-width .rec-app-header-btn-full,
.rec-app-header-buttons.is-equal-width .rec-app-header-btn-short {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.rec-app-header-buttons.is-equal-width .rec-app-header-btn.is-compact .rec-app-header-btn-full {
  display: none;
}

.rec-app-header-buttons.is-equal-width .rec-app-header-btn:not(.is-compact) .rec-app-header-btn-short {
  display: none;
}

.rec-app-header-buttons.is-equal-width .rec-app-header-btn.is-icon-only .rec-app-header-btn-full,
.rec-app-header-buttons.is-equal-width .rec-app-header-btn.is-icon-only .rec-app-header-btn-short {
  display: none;
}

.rec-app-header-buttons.is-equal-width .rec-app-header-btn.is-icon-normal .rec-app-header-btn-full,
.rec-app-header-buttons.is-equal-width .rec-app-header-btn.is-icon-normal .rec-app-header-btn-short {
  flex: 1 1 auto;
}

.rec-app-header-buttons.is-equal-width.is-measuring .rec-app-header-btn {
  flex: 0 0 auto;
  width: auto;
  transition: none;
}

.rec-service-head.is-app-header .rec-app-header-fallback-title,
.rec-service-head.is-app-header .rec-app-header-fallback-links,
.rec-service-head.is-app-header .rec-head-product-links {
  display: none !important;
}

.rec-app-header-btn {
  box-sizing: border-box;
  flex: 0 1 auto;
  min-width: 0;
  height: 26px;
  padding: 0 10px;
  transition: padding 0.16s ease;
  border: 1px solid var(--ah-border, var(--ah-color, var(--rec-head-btn-border, rgba(255, 255, 255, 0.22))));
  border-radius: var(--ah-radius, 6px);
  background: color-mix(
    in srgb,
    var(--ah-bg, var(--rec-head-btn-bg, transparent)) var(--ah-solid, 100%),
    transparent
  );
  color: var(--ah-color, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}

.rec-app-header-btn-short {
  display: none;
}

.rec-app-header-btn-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: inherit;
  vertical-align: middle;
}

.rec-app-header-btn-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.rec-app-header-btn.is-icon-normal,
.rec-app-header-btn.is-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
}

.rec-app-header-buttons.is-equal-width .rec-app-header-btn.is-icon-normal {
  min-width: 0;
}

.rec-app-header-btn.is-icon-only {
  min-width: var(--ah-icon-min, 52px);
}

.rec-app-header-buttons.is-equal-width .rec-app-header-btn.is-icon-only {
  min-width: var(--ah-icon-min, 52px);
}

.rec-app-header-btn.is-icon-normal .rec-app-header-btn-icon,
.rec-app-header-btn.is-icon-only .rec-app-header-btn-icon {
  display: inline-flex;
}

.rec-app-header-btn.is-icon-normal .rec-app-header-btn-icon {
  margin-right: 6px;
}

.rec-app-header-btn.is-compact .rec-app-header-btn-full {
  display: none;
}

.rec-app-header-btn.is-compact .rec-app-header-btn-short {
  display: inline;
}

.rec-app-header-btn.is-icon-only {
  padding-left: 6px;
  padding-right: 6px;
}

.rec-app-header-btn.is-icon-only .rec-app-header-btn-full,
.rec-app-header-btn.is-icon-only .rec-app-header-btn-short {
  display: none;
}

.rec-app-header-btn.is-icon-only .rec-app-header-btn-icon {
  margin-right: 0;
}

.rec-app-header-buttons.is-follow-mouse .rec-app-header-btn {
  --ah-follow: radial-gradient(
    circle 42px at var(--ah-mx, 50%) var(--ah-my, 50%),
    color-mix(in srgb, var(--ah-hover, var(--rec-head-btn-hover, #334155)) 62%, #000) 0%,
    color-mix(in srgb, var(--ah-hover, var(--rec-head-btn-hover, #334155)) 81%, #000) 38%,
    color-mix(in srgb, var(--ah-hover, var(--rec-head-btn-hover, #334155)) var(--ah-solid, 100%), transparent) 75%
  );
}

.rec-app-header-buttons.is-follow-mouse .rec-app-header-btn:hover:not(.is-hover-expand) {
  background:
    var(--ah-follow),
    color-mix(
      in srgb,
      var(--ah-hover, var(--rec-head-btn-hover, rgba(255, 255, 255, 0.08))) var(--ah-solid, 100%),
      transparent
    );
}

.rec-app-header-buttons.is-follow-mouse .rec-app-header-btn.is-hover-expand:hover::before {
  background:
    var(--ah-follow),
    color-mix(
      in srgb,
      var(--ah-hover, var(--rec-head-btn-hover, rgba(255, 255, 255, 0.08))) var(--ah-solid, 100%),
      transparent
    );
  transition-property: left, right, height, border-color;
}

.rec-app-header-btn:hover {
  background: color-mix(
    in srgb,
    var(--ah-hover, var(--rec-head-btn-hover, rgba(255, 255, 255, 0.08))) var(--ah-solid, 100%),
    transparent
  );
  color: var(--ah-color-hover, var(--ah-color, inherit));
  border-color: var(--ah-border-hover, var(--ah-border, var(--ah-color-hover, var(--ah-color, var(--rec-head-btn-border, rgba(255, 255, 255, 0.22))))));
}

.rec-app-header-btn.is-hover-expand {
  position: relative;
  z-index: 2;
  background: transparent;
  border-color: transparent;
}

.rec-app-header-btn.is-hover-expand:hover {
  z-index: 3;
  background: transparent;
  border-color: transparent;
}

.rec-app-header-btn.is-hover-expand::after {
  content: "";
  position: absolute;
  inset: 0 -2px -8px;
}

.rec-app-header-btn.is-hover-expand::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: calc(100% + 2px);
  box-sizing: border-box;
  background: color-mix(
    in srgb,
    var(--ah-bg, var(--rec-head-btn-bg, transparent)) var(--ah-solid, 100%),
    transparent
  );
  border: 1px solid var(--ah-border, var(--ah-color, var(--rec-head-btn-border, rgba(255, 255, 255, 0.22))));
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  transition-property: left, right, height, background, border-color;
  transition-duration: calc(0.22s * var(--ah-anim, 1));
  transition-timing-function: ease-out;
}

.rec-app-header-btn.is-hover-expand:hover::before {
  left: -3px;
  right: -3px;
  height: calc(100% + 10px);
  background: color-mix(
    in srgb,
    var(--ah-hover, var(--rec-head-btn-hover, rgba(255, 255, 255, 0.08))) var(--ah-solid, 100%),
    transparent
  );
  border-color: var(--ah-border-hover, var(--ah-border, var(--ah-color-hover, var(--ah-color, var(--rec-head-btn-border, rgba(255, 255, 255, 0.22))))));
}

.rec-service-head:is(
    .is-app-header-fade-in,
    .is-app-header-fade-in-static,
    .is-app-header-fade-in-wide,
    .is-app-header-fade-in-wide-static,
    .is-app-header-appear-in,
    .is-app-header-appear-in-static
  ):not(.is-ah-ready)
  .rec-app-header-btn,
.rec-service-head:is(
    .is-app-header-fade-in,
    .is-app-header-fade-in-static,
    .is-app-header-fade-in-wide,
    .is-app-header-fade-in-wide-static,
    .is-app-header-appear-in,
    .is-app-header-appear-in-static
  ):not(.is-ah-ready)
  .rec-app-header-logo,
.rec-service-head:is(
    .is-app-header-fade-in,
    .is-app-header-fade-in-static,
    .is-app-header-fade-in-wide,
    .is-app-header-fade-in-wide-static,
    .is-app-header-appear-in,
    .is-app-header-appear-in-static
  ):not(.is-ah-ready)
  .rec-app-header-logo-svg,
.rec-service-head:is(
    .is-app-header-fade-in-static,
    .is-app-header-fade-in-wide-static,
    .is-app-header-appear-in-static
  ):not(.is-ah-ready)
  .rec-app-header-brand {
  animation: none !important;
  opacity: 0;
}

.rec-service-head.is-ah-entered .rec-app-header-btn,
.rec-service-head.is-ah-entered .rec-app-header-logo,
.rec-service-head.is-ah-entered .rec-app-header-logo-svg,
.rec-service-head.is-ah-entered .rec-app-header-brand {
  animation: none !important;
  opacity: 1;
  translate: 0;
}

@keyframes rec-app-header-fade-in {
  from {
    opacity: 0;
    translate: 50px 0;
  }
  to {
    opacity: 1;
    translate: 0;
  }
}

@keyframes rec-app-header-fade-in-wide {
  from {
    opacity: 0;
    translate: 100px 0;
  }
  to {
    opacity: 1;
    translate: 0;
  }
}

@keyframes rec-app-header-appear-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.rec-service-head.is-app-header-fade-in .rec-app-header-logo,
.rec-service-head.is-app-header-fade-in .rec-app-header-logo-svg,
.rec-service-head.is-app-header-fade-in .rec-app-header-btn,
.rec-service-head.is-app-header-fade-in-static .rec-app-header-btn {
  animation: rec-app-header-fade-in calc(0.45s * var(--ah-anim, 1)) ease-out both;
}

.rec-service-head.is-app-header-fade-in .rec-app-header-btn,
.rec-service-head.is-app-header-fade-in-static .rec-app-header-btn {
  animation-delay: calc(var(--ah-i, 0) * 0.05s * var(--ah-anim, 1));
}

.rec-service-head.is-app-header-fade-in-wide .rec-app-header-logo,
.rec-service-head.is-app-header-fade-in-wide .rec-app-header-logo-svg,
.rec-service-head.is-app-header-fade-in-wide .rec-app-header-btn,
.rec-service-head.is-app-header-fade-in-wide-static .rec-app-header-btn {
  animation: rec-app-header-fade-in-wide calc(0.5s * var(--ah-anim, 1)) ease-out both;
}

.rec-service-head.is-app-header-fade-in-wide .rec-app-header-btn,
.rec-service-head.is-app-header-fade-in-wide-static .rec-app-header-btn {
  animation-delay: calc(var(--ah-i, 0) * 0.05s * var(--ah-anim, 1));
}

.rec-service-head.is-app-header-appear-in .rec-app-header-logo,
.rec-service-head.is-app-header-appear-in .rec-app-header-logo-svg {
  animation: rec-app-header-appear-in calc(0.4s * var(--ah-anim, 1)) ease-out both;
}

.rec-service-head.is-app-header-appear-in .rec-app-header-btn,
.rec-service-head.is-app-header-appear-in-static .rec-app-header-btn {
  animation: rec-app-header-appear-in calc(0.55s * var(--ah-anim, 1)) ease-out both;
  animation-delay: calc((0.3s + var(--ah-i, 0) * 0.18s) * var(--ah-anim, 1));
}

.rec-service-head.is-app-header-fade-in-static .rec-app-header-brand,
.rec-service-head.is-app-header-fade-in-static .rec-app-header-logo,
.rec-service-head.is-app-header-fade-in-static .rec-app-header-logo-svg {
  animation: rec-app-header-appear-in calc(0.45s * var(--ah-anim, 1)) ease-out both;
}

.rec-service-head.is-app-header-fade-in-wide-static .rec-app-header-brand,
.rec-service-head.is-app-header-fade-in-wide-static .rec-app-header-logo,
.rec-service-head.is-app-header-fade-in-wide-static .rec-app-header-logo-svg {
  animation: rec-app-header-appear-in calc(0.5s * var(--ah-anim, 1)) ease-out both;
}

.rec-service-head.is-app-header-appear-in-static .rec-app-header-brand,
.rec-service-head.is-app-header-appear-in-static .rec-app-header-logo,
.rec-service-head.is-app-header-appear-in-static .rec-app-header-logo-svg {
  animation: rec-app-header-appear-in calc(0.4s * var(--ah-anim, 1)) ease-out both;
}

.rec-service-head.is-app-header.is-mobile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: 40px;
  grid-template-areas: "brand tap actions";
  align-items: center;
  column-gap: 12px;
  height: auto;
  min-height: 40px;
  cursor: pointer;
}

.rec-service-head.is-app-header.is-mobile.is-mobile-expand-logo {
  cursor: default;
}

.rec-service-head.is-app-header.is-mobile.is-mobile-expand-logo .rec-app-header-brand {
  cursor: pointer;
}

.rec-service-head.is-app-header.is-mobile::before {
  content: "";
  grid-area: tap;
  justify-self: start;
  align-self: center;
  width: 6px;
  height: 6px;
  margin-left: 1px;
  box-sizing: border-box;
  border-right: 1px solid rgba(255, 248, 238, 0.46);
  border-bottom: 1px solid rgba(255, 248, 238, 0.46);
  transform: translateY(-1px) rotate(45deg);
  opacity: 0.7;
  pointer-events: none;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.rec-service-head.is-app-header.is-mobile.is-mobile-open::before {
  transform: translateY(1px) rotate(225deg);
  opacity: 0.38;
}

.rec-service-head.is-app-header.is-mobile.is-mobile-above::before {
  transform: translateY(1px) rotate(-135deg);
}

.rec-service-head.is-app-header.is-mobile.is-mobile-above.is-mobile-open::before {
  transform: translateY(-1px) rotate(45deg);
  opacity: 0.38;
}

.rec-service-head.is-app-header.is-mobile .rec-app-header-brand {
  grid-area: brand;
}

.rec-service-head.is-app-header.is-mobile .rec-service-head-actions {
  grid-area: actions;
  margin-left: 0;
  width: max-content;
  justify-self: end;
  justify-content: flex-end;
  min-width: 0;
}

.rec-service-head.is-mobile .rec-company-picker,
.rec-service-head.is-app-header.is-mobile .rec-company-picker {
  flex: 0 0 100px;
  width: 100px;
  max-width: 100px;
  min-width: 0;
  overflow: hidden;
}

.rec-service-head.is-mobile .rec-company-select,
.rec-service-head.is-app-header.is-mobile .rec-company-select {
  display: block;
  width: 100px !important;
  max-width: 100px !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

@media (max-width: 500px) {
  .rec-service-head .rec-company-picker {
    flex: 0 0 100px;
    width: 100px;
    max-width: 100px;
    min-width: 0;
    overflow: hidden;
  }
  .rec-service-head .rec-company-select {
    display: block;
    width: 100px !important;
    max-width: 100px !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
}

.rec-service-head.is-app-header.is-mobile.is-mobile-open {
  grid-template-rows: 40px auto;
  grid-template-areas:
    "brand tap actions"
    "nav nav nav";
}

.rec-service-head.is-app-header.is-mobile.is-mobile-above.is-mobile-open {
  grid-template-rows: auto 40px;
  grid-template-areas:
    "nav nav nav"
    "brand tap actions";
}

.rec-service-head.is-app-header.is-mobile.is-mobile-collapsed .rec-app-header-buttons {
  display: none !important;
}

.rec-service-head.is-app-header.is-mobile.is-mobile-open .rec-app-header-buttons,
.rec-service-head.is-app-header.is-mobile.is-mobile-open .rec-app-header-buttons.is-equal-width {
  display: flex;
  grid-area: nav;
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  padding: 4px 0 8px;
  box-sizing: border-box;
  justify-content: stretch;
}

.rec-service-head.is-app-header.is-mobile.is-mobile-above.is-mobile-open .rec-app-header-buttons {
  padding: 8px 0 4px;
}

.rec-service-head.is-app-header.is-mobile.is-mobile-open .rec-app-header-buttons .rec-app-header-btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}