/* --- MITTE --- */

main {
    background: url("../images/Sommernachtstraum_Oberon.JPG") no-repeat center;
    background-size: cover;
    background-position: top;
    object-fit: cover;

    display: flex;
    justify-content: flex-end;

    transition: all 1.5s ease-in-out;

    /* background-color: red; */
}

.description {
    background-color: rgb(145, 0, 80, 50%);
    padding: 2rem;
    width: 100%;

    transition: all 2s ease-in-out;
}

#linkbutton__index {
    background-color: rgb(255, 255, 255, 25%);
    color: white;
    border-color: white;
}

#linkbutton__index:hover {
    background-color: rgb(0, 159, 227);
    color: white;
    /* border: 2px solid rgb(0,159,227); */
}

#headline__break {
    display: none;
}



/* --- MEDIA QUERIES --- */

/* Smartphones - Bis zu einer Breite des Viewports von 640px ... wie oben angeführt */


/* Tablet - Ab Viewportbreite von 640px bis 992px... */
@media screen and (min-width: 40rem) and (max-width: 61.99rem) {

    #headline__break {
        display: block;
    }

    #headline__all {
        display: none;
    }

    .description {
        width: 50%;
        background-color: rgb(20, 20, 20, 50%);
    }

    .description:hover {
        background-color: rgb(145, 0, 80, 95%);
        width: 60vw;
    }
}


/* Desktop - Ab Viewportbreite von 992px bis 1200px... */
@media screen and (min-width: 62rem) and (max-width: 74.99rem) {

    .description {
        width: 45%;
        background-color: rgb(20, 20, 20, 50%);
    }

    .description:hover {
        background-color: rgb(145, 0, 80, 95%);
        width: 60vw;
    }

    #headline__break {
        display: none;
    }
}

/* Widescreen - Ab einer Viewportbreite von 1200px ... */
@media screen and (min-width: 75rem) {
    .description {
        width: 45%;
        background-color: rgb(20, 20, 20, 50%);
        padding: 2rem 10rem 2rem 5rem;
    }

    .description:hover {
        background-color: rgb(145, 0, 80, 95%);
        width: 50vw;
    }

    #headline__break {
        display: none;
    }
}