hra-footer-ui {
    position: relative;
}

hra-footer-ui::before {
    display: block;
    content: "";
    background-image: url("/content/dam/f1936-2/cloud-transfer/Skyline_Kooperation_final_bereinigt2.svg");
    background-size: 520px auto;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    width: 1000px;
    height: 110px;
    position: absolute;
    left: 50%;
    top: -57px;
    margin-left: -500px;
}

@media only screen and (max-width: 959px) {
  hra-footer-ui::before {
    left: -2px;
    width: 101vw;
    right: 0;
    background-size: contain;
    margin-left: 0;
  }
}

@media only screen and (max-width: 500px) {
  hra-footer-ui::before {
    top: -80px;
  }
.footer-navigation-content {
z-index: 1;
}
}

/* ===========================================================
   1) DEFAULT-FARBE DES LABELS FESTSCHREIBEN
   -----------------------------------------------------------
   Hintergrund: Angular Material überschreibt im Hover-State
   den Text- und Icon-Farbton (.mat-primary).  Durch höhere
   Spezifität + !important wird das ausgehebelt.
   ===========================================================*/
.btn-search.mat-mdc-outlined-button.mat-primary:hover
         .mdc-button__label {
  color: white!important;            /* ändert sich nicht mehr */
}

/* ===========================================================
   2) BASISSTIL DES BUTTONS
   -----------------------------------------------------------*/
.btn-search {
  position: relative;                  /* nötig für ::after-Layer   */
  overflow: hidden;                    /* Animation bleibt “im Rahmen” */
  transition: transform .25s ease-in-out;
}

/* ===========================================================
   3) ANIMIERTER OVERLAY-LAYER
   -----------------------------------------------------------
   - semitransparenter Marken-Tint fährt von links nach rechts
   - z-Index < 0 → liegt unter dem Label, deshalb keine Farbänderung
   ===========================================================*/
.btn-search::after {
  content: "";
  position: absolute;
  inset: 0;                            /* füllt den ganzen Button   */
  background: var(--kf-brand-50,
                   rgba(0,112,203,.15)); /* dezente Corporate-Farbe */
  transform: translateX(-100%);        /* Start: komplett links draußen */
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  z-index: -1;                         /* hinter Inhalt             */
}

/* ===========================================================
   4) HOVER-STATE
   -----------------------------------------------------------*/
.btn-search:hover {
  transform: translateY(-2px);         /* subtile Erhebung          */
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}

.btn-search:hover::after {
  transform: translateX(0);            /* Overlay fährt ein         */
}

/* ===========================================================
   5) FOKUS-STATE (Accessibility)
   -----------------------------------------------------------*/
.btn-search:focus-visible {
  outline: 2px dashed var(--kf-brand-500, #0070CB);
  outline-offset: 2px;
}