/***************************************************************************
* Overlay
****************************************************************************/
.overlay {
    position: fixed;
    top: 0; left: 0; z-index: 2000;
    width: 100svw; height: 100svh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: all .5s ease;
}
.overlay.active {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}
.overlay > .overlay_inner {
    flex: 0 0 90%;
    max-width: 40rem;
    background-color: #FFFFFF;
    padding: 2rem;
    position: relative;
}
.overlay .overlay_inner .close {
    position: absolute; cursor: pointer;
    top: 0rem; right: 0rem;
    width: 3rem; height: 3rem;
    background: url(../img/SIR-2024-Icons-v1-Kreuz.svg);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

/***************************************************************************
* Sidebar
****************************************************************************/
@keyframes sidebar_fadein {
    0% {transform:translate(100%,0);}
    100% {transform:translate(0,0);}
}
.sidebar {
    position: fixed; transform:translate(0,0);
    right: 1rem; top: 5rem; width: 2em; 
    animation: sidebar_fadein 1s ease;
}
.sidebar a {
    display: block;
    line-height: 0;
    margin-bottom: 0.75rem;
}

@media screen and (min-width:64em){
    .sidebar {
        right: 2rem; top: 6rem;
        width: 2.375em;
    }
}

@media screen and (max-width:63.9375em){
    .sidebar {
        display: none;
    }
}