/* ==========================================================================
   Osmo Supply — Back To Top Button
   Unveraendert uebernommen.
     [data-back-to-top="wrap"]   -> fixierter Rahmen, pointer-events: none
     [data-back-to-top="button"] -> der Knopf selbst, pointer-events: auto
   Der Rahmen ist anfangs unsichtbar, damit er beim Laden nicht aufblitzt —
   das JS blendet ihn ein.
   ========================================================================== */

.back-top__wrap {
  z-index: 100;
  pointer-events: none;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  height: 100vh;
  padding: 2em;
  display: flex;
  position: fixed;
  inset: 0%;
}

.back-top__button {
  pointer-events: auto;
  background-color: #fca5a0;
  border: min(.5em, 5px) solid #efeeec;
  border-radius: 1em;
  outline-style: none;
  width: max(5vw, 2.5rem);
  height: max(5vw, 2.5rem);
  padding: .5em;
  position: relative;
}

.back-top__arrow {
  width: 2.5em;
}

.back-top__arrow-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.back-top__arrow-row {
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

/* Hide the back-to-top wrapper on default (to prevent flash on loaded site) */
[data-back-to-top="wrap"]{ opacity: 0;}

.back-top__arrow-row{
  transition: transform 0.5s cubic-bezier(.65, 0, 0, 1);
}

.back-top__button{
  transition: border-width 0.5s cubic-bezier(.65, 0, 0, 1);
}

/* Keyboard focus state */
.back-top__button:focus-visible{
  border-width: 0.6em;
}

.back-top__button:focus-visible .back-top__arrow-row{
  transform: translate(0px, -100%);
}

/* Hover styling */
@media (hover: hover) {
  .back-top__button:hover{
    border-width: 0.6em;
  }

  .back-top__button:hover .back-top__arrow-row{
    transform: translate(0px, -100%);
  }
}

@media screen and (max-width: 991px) {
  .back-top__wrap {
    padding: 1.25em;
  }

  .back-top__button {
    border-radius: .5em;
    padding: .4em;
  }
}