/*Styles der Einträge*/
.divJahr {
    /*Container, welcher immer Einträge eines Jahres umrahmen*/
    width: 80%;
    max-width: 1000px;
    margin: auto;
    background-image: linear-gradient(270deg, var(--colorSecondaryLightTransparent), var(--colorPrimaryDarkTransparent));
    border-radius: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    position: relative;
    top: 50px;
    margin-top: 50px;
}

.headline+div {
    /*rückt das erste Jahr (2013) nach unten*/
    margin-top: 120px;
}

.ereignis {
    /*umrahmender Container für jeden einzelnen Eintrag*/
    display: flex;
    padding-right: 0px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background: #fff;
    margin: 15px;
}

.ereignis:hover {
    box-shadow: 0 0 5px var(--colorSecondaryLight);
}

.ereignis-links {
    /*Container für Datum*/
    height: 15px;
    width: 15%;
    position: sticky;
    top: 100px;
    padding: 0px 20px;
    padding-bottom: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ereignis-rechts {
    /*Conatiner für den Inhalt*/
    flex: 85%;
    padding-right: 10px;
    padding-bottom: 10px;
}

/*Styles der Einträge 
Ende----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------*/


/*Sonstige Styles*/
.jahr {
    /*Conatiner für Jahreszahl*/
    position: sticky;
    left: -webkit-calc(50% - 50px);
    left: -moz-calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 30px;
    padding-top: 15px;
    border-radius: 7.5px;
    border: 1px white solid;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(5px);
    background-color: var(--backgroundColorLightOpacity);
    margin-left: 0px;
    margin-right: 0px;
    z-index: 10;
    line-height: 1;
    top: max(8vh, 55px);
}

.jahr>h1 {
    /*Text Jaheszahl*/
    z-index: 1;
    text-align: center;
    font-size: 20px;
    /*fixe Schriftgröße beibehalten*/
    font-variant: small-caps;
    margin: 0px;
    line-height: 1;
}

.goToTop {
    /*Button zum Seitenanfang*/
    position: sticky;
    left: -webkit-calc(75% + 21.5px);
    left: -moz-calc(75% + 21.5px);
    left: calc(75% + 21.5px);
    bottom: 20px;
    margin-top: 125vh;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(15px);
    background-color: var(--backgroundColorLightOpacity);
    padding: 10px 21.5px 10px 21.5px;
    text-decoration: none;
    border: 1px solid white;
    border-radius: 10px;
    font-size: 20px;
    /*fixe Schriftgröße beibehalten*/
    color: var(--colorPrimaryLight);
    box-shadow: 0 0 2px var(--colorSecondaryLight);
    z-index: 99;
    transition: all 0.6s;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.goToTop:hover {
    /*Button zum Seitenanfang*/
    box-shadow: 0 0 7px var(--colorSecondaryLight);
    scale: 1.1;
}

/*Sonstiges Styles
Ende----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------*/

/*Styles für portrait mode Anfang*/
@media (orientation: portrait) {
    @media only screen and (min-width: 0px) and (max-width: 800px) {
        .divJahr {
            width: 97%;
            top: 20px;
        }

        .ereignis {
            margin: 6px;
            margin-top: 15px;
        }

        .headline+div {
            margin-top: 0px;
        }
    }

    @media only screen and (min-width: 800px) {
        .divJahr {
            /*Container, welcher immer Einträge eines Jahres umrahmen*/
            width: 80%;
        }
    }
}

/*Styles für portrait mode
Ende----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------*/


/*Styles für landscape mode Anfang*/
@media (orientation: landscape) {
    @media only screen and (min-width: 0px) and (max-width: 800px) {
        .divJahr {
            /*Container, welcher immer Einträge eines Jahres umrahmen*/
            width: 99%;
            top: 20px;
        }

        .headline+div {
            margin-top: 0px;
        }
    }

    @media only screen and (min-width: 800px) {
        .headline {
            visibility: visible;
        }
    }
}

/*Styles für landscape mode 
Ende----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------*/



@media (prefers-color-scheme: dark) {
    .ereignis {
        background-color: var(--backgroundColorDarkOpacity);
        box-shadow: 0;
        transition: all 1s;
    }

    .ereignis:hover {
        border-color: var(--colorPrimaryDark);
        box-shadow: 0 0 5px var(--colorPrimaryDark);
        transition: all 1s;
    }

    .goToTop{
        border-color: var(--colorPrimaryDark);   
    }

    .goToTop:hover{
        background-color: var(--colorPrimaryDark);
        color: white;
        box-shadow: none;
    }
}