:root
{
    /* Gibt die Breite der geöffneten Sidebar an */
    --sidebar-width: 75vw;
}

.hamburger
{
    /* Menue Button braucht kein Position fixed, wenn ich ihn in den Hero einsetze. Der hat position
    sticky, heißt das menue würde sich dann bereits automatisch mitbewegen.
    Alternativ kann ich fixed auch lassen und den button dann unten rechts platzieren. */

    /*position: fixed;*/
    /*bottom: 20px;*/
    /*right: 20px;*/
    /*top: 20px;*/

    margin-right: 1.5rem;
    margin-top: 0.75rem;

    /*z-index: 15;*/

    font-size: 2.6rem;

    /* Häßliche Visualisierung der Hitbox des Buttons und
    die Umrandung der Hitbox entfernen */
    background: none;
    border: none;

    cursor: pointer;

    color: var(--weiß);
    /*color: var(--blau);*/
}

.overlay
{
    position: fixed;

    /* Inset: 0 sorgt dafür, dass dieses Element vollständigt über seinen
    Parent drüber gespannt wird. Heißt das Overlay erstreckt sich über den
    gesamten Bildschirm. Lange form: top, left, right, bottom: 0 */
    inset: 0;

    /* Overlay per default verstecken */
    display: none;

    z-index: 15;

    /* Leicht durchsichtiger, schwarzer Hintergrund. Wertebereiche ersten 3: [0;255],
    letzer: [0; 1] */
    background: rgba(51, 51, 51, 0.5);
}

.overlay.show
{
    display: block;
}

/* Eine Sidebar braucht immer position: fixed */
.sidebar
{
    z-index: 20;

    position: fixed;
    right: calc(-1 * var(--sidebar-width));
    top: 0;

    /*width: 260px;*/
    width: var(--sidebar-width);
    height: 100vh;
    /*height: 80vh;*/

    background: var(--weiß);

    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);

    /* Wirkt sicht auf die left: _ Eigenschaft aus. Sobald sich left ändern, wird die Änderung
    durch die hier eingestellte Animation abgespielt */
    transition: right 0.35s ease;
}

.sidebar.open
{
    right: 0;
}

.sidebar .imageContainer
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    height: 16vh;

    /*background-color: var(--blau);*/
    background: linear-gradient(
            135deg,
            var(--blau),
            var(--blau-gradient)
    );
}

.sidebar .imageContainer .close
{
    /*margin-right: 3.7rem;*/
    margin-top: 0.5rem;
    margin-left: 3.5rem;

    font-size: 2rem;

    color: var(--weiß);

    align-self: flex-start;

    height: 95%;
}

.sidebar img
{
    width: 65%;
    height: auto;

    margin-bottom: 0.5rem;
}

.sidebar .menue
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    height: 84%;
}

.sidebar .menue .menueItem
{
    --padding: 0.9rem;

    padding-left: 1.2rem;
    padding-top: var(--padding);
    padding-bottom: var(--padding);

    font-size: 1.2rem;

    color: var(--blau);

    text-decoration: none;

    border-bottom: 1px dotted var(--schwarz);

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Die active Klasse wird über css dann an ein menueItem vergeben,
wenn die zugehörige Section gerade auf der Website sichtbar ist */
.sidebar .menue .menueItem.active
{
    color: var(--weiß);

    background-color: var(--blau-gradient);

    /*background: linear-gradient(*/
    /*        135deg,*/
    /*        var(--blau),*/
    /*        var(--blau-gradient)*/
    /*);*/
}

.sidebar .menue .menueItem:first-of-type
{
    /*border-top: 1px dotted var(--schwarz);*/

    margin-top: 0.04rem;
}

/* Das hier ist das close sidebar element am ende der Sidebar */
.sidebar .menue .menueItem:last-child
{
    /* margin-top: auto nimt bei flex den gesamten noch zur vefügung stehenden
    platz ein. Sorgt also dafür, dass dieses Element ganz unten in der Sidebar
    platziert wird */

    margin-top: auto;
    /*margin-top: 6rem;*/
    /*margin-bottom: 3rem;*/

    /*padding-bottom: 15.8rem;*/

    border-top: 1px dotted var(--schwarz);

    /*justify-self: flex-end;*/
}

/* nicht löschen, wird gebraucht ! */
.sidebar .menue .menueItem:last-child .closeSign
{
    margin-right: 1.5rem;
}

.sidebar .menue .menueItem:active,
.sidebar .menue .menueItem:hover
{
    color: var(--dunkel-grau);
}

.sidebar .menue .menueItem img
{
    display: none;

    width: 18vw;
    height: auto;

    margin-right: 1.2rem;
    margin-bottom: 0;
}

.sidebar .menue .menueItem.active img
{
    display: block;
}