/*Basic page deisgn start*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    color-scheme: light;
}

body {
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

header {
    width: 100%;
}



#social-bar-box {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    padding: 1em;
    gap: 1em;

}

#RL-logo {
    grid-column: 1/5;
    grid-row: 1/2;

    img {
        width: 100%;
        display: block;
        margin-inline: auto;
    }

}

#facebook {
    grid-column: 7/8;
    grid-row: 1/2;

    img {
        width: 100%;
        display: block;
        margin-inline: auto;
    }
}

#insta {
    width: 100%;
    grid-column: 8/9;
    grid-row: 1/2;

    img {
        width: 100%;
        display: block;
        margin-inline: auto;
    }
}

#linden-rockt {
    width: 100%;
    grid-column: 15/17;
    grid-row: 1/2;

    img {
        width: 100%;
        display: block;
        margin-inline: auto;
    }
}


/*Navigation bar start*/
nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* background: oklab(26.901000000000003% -0.01548 -0.18022); */
    border-bottom: 1px solid hsl(240, 95%, 25%);
}


nav a {
    text-decoration: none;
    color: #010101;
    font-weight: 900;
    padding-inline: 2em;
    padding-block: 1em;
    transition: all .3s ease-in-out;
}

nav a:hover {
    color: oklab(50.951% 0.18218 0.10172);
    transition: all .3s ease-in-out;
}

nav a.active {
    color: oklab(50.951% 0.18218 0.10172);
}

.lang-link{
    img {
        width: 4em;
        object-fit: cover;
        object-position: center;
    }
}

/*Navigation bar end*/

/*Main design start*/
main {
    width: 100%;
    margin-block-start: .5em;
}

main .page {
    width: 100%;
    display: flex;
    flex-direction: row;
    /* grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr); */
    background: hsl(0, 0%, 100%);
}

main .page .sidebar {
    background: hsl(240, 95%, 25%);
    padding-inline: 1em;

    h1 {
        text-align: center;
        width: 100%;
        /* transform: rotate(-90deg); */
        font-weight: 900;
        color: hsl(0, 0%, 100%);
        text-transform: uppercase;
        place-items: center;
        user-select: none;
        margin-block-start: .5em;

    }
}

main .page .content {
    width: 100%;
    background: oklab(100% 0 -0.00011);
    padding-inline: 1em;
}


.main-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
}


.geschichte-img {
    width: 30%;
    /* aspect-ratio: 16/9; */
    object-fit: cover;
    object-position: center;
    margin-block: 1em;
}


/*Main design end*/

/*basic Flex design start*/
.flex-container {
    display: flex;
    gap: 1em;
    flex-direction: row;
}


/*basic Flex design end*/

/*text start*/
/*headlines*/
.main-headline {
    font-size: xx-large;
    background: hsl(240, 95%, 25%);
    padding-block: 1em;
    margin-block: 1em;
    border-radius: 0.5em;
    color: oklab(100% 0 -0.00011);
    text-align: center;
    text-transform: uppercase;

}

.main-subheading {
    font-size: x-large;
    color: oklab(50.951% 0.18218 0.10172);
    text-transform: uppercase;
    margin-block: 1em;
}

.main-subheading-2 {
    font-size: larger;
    color: oklab(0% 0 0);
}

/*paragraphs*/
p {
    margin-block: 1em;
    line-height: 1.5em;
    /* max-width: 75ch; */
    margin-block: .5em;
}


.para-col-2 {
    column-count: 2;
    column-gap: 1em;
}

.para-col-3 {
    column-count: 3;
    column-gap: 1em;
}

.para-col-4 {
    column-count: 4;
    column-gap: 1em;
}


@media (max-width: 768px) {}

/*text end*/


hr {
    width: 40%;
    height: .125em;
    border: none;
    background: oklch(26.901% 0.18088 265.09);
    border-radius: 1em;
    margin-block: 2em;
    margin-inline: auto;
}



.StreamsContainer,
.MobileContainer,
.PlayerContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1em;
    align-items: start;
}

.item {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.25em;
}




/*Basic page deisgn end*/

@counter-style rockHand {
    system: cyclic;
    symbols: 🤘;
    suffix: " ";
}

@counter-style pointerRight {
    system: cyclic;
    symbols: 👉;
    suffix: " ";
}


ul.main-list {
    padding-inline-start: 1em;
    list-style: rockHand;

}

ul ul.sub-list {
    padding-inline-start: 1em;
    list-style: pointerRight;
}


#backToTop {
    width: 100%;
    background: hsl(240, 95%, 25%);
    color: oklab(100% 0 -0.00011);
    border: none;
    padding: 0.6em 1em;
    font-size: 1rem;
    cursor: pointer;
    transition: all .3s ease-in-out;
    text-transform: uppercase;
    font-weight: normal;
    border-top: .5em solid hsl(0, 0%, 100%);
    /* border-bottom: .5em solid hsl(0, 0%, 100%); */
    padding-block: 1em;
}

#backToTop:hover {
    background: hsl(240, 65%, 45%);
}

/* #copyright {
    width: 100%;
    margin-inline: auto;
    background: oklch(26.901% 0.18088 265.09);
    color: hsl(0, 99%, 38%);
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
} */



/*breakpoints*/
@media (max-width: 1440px) {

    /*Main design start*/
    main {
        width: 100%;
        height: fit-content;
        margin-block-start: .5em;
    }

    main .page {
        flex-direction: column;
    }

}


@media (max-width: 1280px) {

    /*Navigation bar start*/
    nav {
        width: 100%;
        flex-direction: column;
    }


    nav a {
        width: 100%;
        text-align: center;
        text-decoration: none;
    }

    /****/

    #RL-logo {
        grid-column: 1/4;
        grid-row: 1/2;

        img {
            width: 100%;
            display: block;
            margin-inline: auto;
        }

    }

    #facebook {
        grid-column: 5/6;
        grid-row: 1/2;

        img {
            width: 100%;
            display: block;
            margin-inline: auto;
        }
    }

    #insta {
        width: 100%;
        grid-column: 6/7;
        grid-row: 1/2;

        img {
            width: 100%;
            display: block;
            margin-inline: auto;
        }
    }

    #linden-rockt {
        width: 100%;
        grid-column: 15/17;
        grid-row: 1/2;

        img {
            width: 100%;
            display: block;
            margin-inline: auto;
        }
    }

}


@media (max-width: 1024px) {

    #RL-logo {
        grid-column: 1/5;
        grid-row: 1/2;

        img {
            width: 100%;
            display: block;
            margin-inline: auto;
        }

    }

    #facebook {
        grid-column: 6/8;
        grid-row: 1/2;

        img {
            width: 100%;
            display: block;
            margin-inline: auto;
        }
    }

    #insta {
        width: 100%;
        grid-column: 8/10;
        grid-row: 1/2;

        img {
            width: 100%;
            display: block;
            margin-inline: auto;
        }
    }

    #linden-rockt {
        width: 100%;
        grid-column: 15/17;
        grid-row: 1/2;

        img {
            width: 100%;
            display: block;
            margin-inline: auto;
        }
    }

    /*cards design starts*/
    .geschichte-img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        object-position: center;
        margin-block: 1em;
    }
}

@media (max-width: 900px) {
    hr {
        width: 60%;
    }
    

    .StreamsContainer,
    .MobileContainer,
    .PlayerContainer {
        width: fit-content;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .item {
        flex-direction: row;
        gap: 1em;
    }
}

@media (max-width: 768px) {

    .para-col-2,
    .para-col-3,
    .para-col-4 {
        column-count: 1;
    }



    #RL-logo {
        grid-column: 1/5;
        grid-row: 1/2;

        img {
            width: 100%;
            display: block;
            margin-inline: auto;
        }

    }

    #facebook {
        grid-column: 6/8;
        grid-row: 1/2;

        img {
            width: 100%;
            display: block;
            margin-inline: auto;
        }
    }

    #insta {
        width: 100%;
        grid-column: 8/10;
        grid-row: 1/2;

        img {
            width: 100%;
            display: block;
            margin-inline: auto;
        }
    }

    #linden-rockt {
        width: 100%;
        grid-column: 15/17;
        grid-row: 1/2;

        img {
            width: 100%;
            display: block;
            margin-inline: auto;
        }
    }

}

@media (max-width: 480px) {}



/*glückwunsch, du hast es bis hierher geschafft! :)*/