.shortcut {
  width: 100%;
  height: auto !important;
  justify-content: center;
  position: relative;
  display: flex;
  flex-direction: row;
  z-index: 700;
  top: auto;
  bottom: 0;
  cursor: pointer;
  gap: 0.5rem;
  bottom: 3.8rem;
}

.shortcut > a {
  color: rgb(var(--c-neutral-lightest));
  text-decoration: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  line-height: 44px;
}

.shortcut img {
  margin: 0 auto;
  max-width: 26px;
  max-height: 20px;
  border-radius: 0;
  height: revert-layer;
  width: max-content;
  cursor: pointer;
}

.shortcut.-active {
  backdrop-filter: none;
}

.shortcut .tooltip {
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  line-height: 46px;
  color: rgb(var(--c-neutral-dark));
}

.shortcuts {
  grid-column: 2;
  justify-self: end;
  display: flex;
  gap: 0;
}

.shortcut__icon::after {
  content: "\7c";
  font-family: "FaThin", sans-serif;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  color: rgb(var(--c-neutral-lightest));
  font-size: var(--f-size-l-2);
  cursor: pointer;
}

.shortcut__icon img,
.top.-scroll .shortcut__icon__color img {
  margin-bottom: 0.5rem;
  height: 20px;
  cursor: pointer;
}

.shortcut__icon {
  margin-right: 0;
}

.top.-scroll .shortcut__icon {
  display: none;
}

.shortcut__icon__color {
  display: none;
}

.top.-scroll .shortcut__icon__color {
  display: block;
}

.top.-scroll .shortcut__icon__color::after {
  content: "\7c";
  font-family: "FaThin", sans-serif;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  color: rgb(var(--c-primary));
  font-size: var(--f-size-l-2);
}

@media (hover: hover) {
  .shortcut:not(.-notooltip) .tooltip:hover:after,
  .shortcut:not(.-notooltip) .tooltip:not(.popup.-active):hover:before {
    display: block;
  }
}

.tooltip.-active + .sidebar {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tooltip.-active::after {
  display: block;
}

.gkmb__oneforall.-today .reservation {
  margin-left: 1.5rem;
}

.gkmb__oneforall.-today .subarea__title,
.gkmb__oneforall.-today .reservation__statustitle {
  font-family: var(--f-family-2);
  font-weight: var(--f-weight-sb);
}

.gkmb__oneforall.-today .subarea__titlewrap {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
}

.page fieldset {
  border: none;
  padding: 0;
}

.grid__top.-active .shortcut__icon,
.grid__top.-active .mainmenu {
  display: none;
}

.tooltip + .sidebar > .sidebar__container {
  right: -100%;
}

.tooltip.-active + .sidebar > .sidebar__container {
  right: 0;
}

.top.-scroll .sidebar__container {
  background: rgb(var(--c-neutral-lightest));
  box-shadow: 5px 5px 10px rgba(var(--c-neutral-darkest), 0.5);
}

.sidebar__container {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: rgb(var(--c-neutral-lightest), 0.8);
  padding: 8rem 2rem 3rem 5rem;
  z-index: 10;
}

.sidebar__container {
  width: 100%;
  -webkit-transition: right 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  -moz-transition: right 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: right 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sidebar__container hr {
  background: rgb(var(--c-primary));
  height: 2px;
}

.tooltip + .sidebar > .sidebar__container .sidebar__close {
  display: none;
}

.tooltip.-active + .sidebar > .sidebar__container .sidebar__close {
  color: rgb(var(--c-primary));
  display: inline-block;
  min-width: 40px;
  text-align: right;
  line-height: 100%;
  position: fixed;
  top: 3rem;
  right: 2%;
  z-index: 1250;
}

.sidebar__close::after {
  font-family: "FaRegular", sans-serif;
  content: "\f00d";
  font-size: var(--f-size-l-3);
  font-weight: var(--f-weight-n);
  position: relative;
  top: 0;
  cursor: pointer;
  color: rgb(var(--c-primary));
}

.sidebar__container h3 {
  font-size: var(--f-size-l-3);
}

/* =============================================================================
   Media Queries
   ========================================================================== */
@media (min-width: 640px) {
  .shortcut {
    bottom: 6.9rem;
    justify-content: end;
    padding: 0 10rem 0 0;
  }

  .shortcut .shortcut__button {
    padding: 0.5rem 1rem;
  }

  .shortcut img {
    max-width: 34px;
    max-height: 28px;
  }

  .top.-scroll .shortcut__icon__color::after {
    margin-right: 0.5rem;
  }

  .shortcuts {
    gap: 0.25rem;
  }

  .shortcut__icon img,
  .top.-scroll .shortcut__icon__color img {
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 800px) {
  .shortcut [data-tooltip="Mitglieder Login"] h4 {
    color: rgb(var(--c-neutral-lightest));
    font-size: var(--f-size-l-1);
    font-family: var(--f-family-2);
    display: block;
    margin-left: 0.5rem;
  }

  .tooltip::after {
    z-index: 3;
  }

  .sidebar__container {
    width: 540px;
    -webkit-transition: right 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    -moz-transition: right 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: right 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

@media (min-width: 1024px) {
  .shortcut {
    bottom: 6.4rem;
  }

  .shortcut {
    bottom: 6.9rem;
    justify-content: end;
    padding: 0 14rem 0 0;
  }
}

@media (min-width: 1280px) {
  .shortcut__wrap img {
    max-width: 34px;
    max-height: 34px;
  }

  .shortcut {
    bottom: 6rem;
  }

  .shortcut__icon img,
  .top.-scroll .shortcut__icon__color img {
    height: 24px;
  }
}

@media (min-width: 1580px) {
  .shortcut {
    bottom: 6rem;
  }
}