@charset "utf-8";
@media (max-width:420px) {
  #sidenav a {
    pointer-events: none;
    cursor: default
  }

  #sidenav ul a {
    background: #a0a0a0;
    display: block;
    margin: .5rem .5rem;
    width: .8rem;
    height: .8rem;
    transition: .2s;
    border-radius: 1rem
  }

  .projekt_background>article {
    min-height: 60vh;
    position: relative
  }

  .rahmen {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 50vh;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden
  }

  .rahmen img {
    display: block;
    height: 50vh;
    object-fit: cover
  }

  .background_hover {
    height: 65%;
    width: 100%;
    position: absolute;
    transform: translateY(0);
    background: rgba(28, 28, 28, 0.9);
    bottom: -100%;
    right: auto;
    top: auto;
    opacity: 0;
    visibility: hidden;
    transition: .5s
  }

  .hover_active .background_hover {
    bottom: 0;
    right: auto;
    opacity: 1;
    visibility: visible
  }
}

@media (min-width:421px) and (max-width:800px) {
  #sidenav a {
    pointer-events: none;
    cursor: default
  }

  #sidenav ul a {
    background: #a0a0a0;
    display: block;
    margin: .5rem .5rem;
    width: .8rem;
    height: .8rem;
    transition: .2s;
    border-radius: 1rem
  }

  .projekt_background>article {
    min-height: 70vh;
    position: relative
  }

  .rahmen {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 55vh;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden
  }

  .rahmen img {
    display: block;
    height: 65vh;
    object-fit: cover
  }
}

@media (min-width:801px) and (max-width:1000px) {
  #sidenav a {
    pointer-events: none;
    cursor: default
  }

  #sidenav ul a {
    background: #a0a0a0;
    display: block;
    margin: .5rem .5rem;
    width: .8rem;
    height: .8rem;
    transition: .2s;
    border-radius: 1rem
  }

  .projekt_background>article {
    min-height: 80vh;
    position: relative
  }

  .rahmen {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden
  }

  .rahmen img {
    display: block;
    height: 100%;
    object-fit: cover
  }
}