/* * {
    outline: 1px solid rgba(255, 0, 0, 0.5); /* alle Elemente sichtbar umranden 
} 
*/


@font-face {
    font-family: Urbanist;
    src: url(./Urbanist/Urbanist-VariableFont_wght.ttf);
}

@font-face {
    font-family: Playfair;
    src: url(./Fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf);
}

:root{
    --black1: #121212;
    --black2: #1A0909;
    --black3: #1A1A1A;
    --white1: #FFE9E9;
    --white2: #FFF6F6;
    --red: #FF5454;
    --emergency-black: #862727;

    --red-gradient: repeating-linear-gradient( 135deg, var(--red) 0px, var(--red) 1px, var(--black1) 1px, var(--black1) 2px );
    --black-gradient: repeating-linear-gradient( 135deg, var(--black1) 0px, var(----black1) 1px, var(--white2) 1px, var(--white2) 2px );


    --body-margin: 200px;

    --fontsize-2: 0.578rem;
    --fontsize-1: 0.694rem;
    --fontsize0: 0.8333rem;
    --fontsize1: 1rem;
    --fontsize2: 1.2rem;
    --fontsize3: 1.44rem;
    --fontsize4: 1.73rem;
    --fontsize5: 2.07rem;
    --fontsize6: 2.48rem;
    --fontsize7: 2.98rem;
}

html{
    font-size: 26px;
    font-family: Urbanist, sans-serif;
    color: var(--white2);
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

* {
    margin: 0;
    padding: 0;
}


body{
    background-color: var(--black1);
    /* padding-top: 20px;     */
}

/* ----- TITLES ----- */
h1{
    font-size: var(--fontsize7)
}

h2{
    font-size: var(--fontsize6)
}

h3{
    font-size: var(--fontsize5)
}

h4{
    font-size: var(--fontsize4);
}

h5{
    font-size: var(--fontsize3)
}

h6{
    font-size: var(--fontsize2)
}

h1, h2, h3, h4, h5, h6{
    text-transform: uppercase;
}


/* HORIZONTAL RULER */

/* hr{
    height: 5px;
    border: none;
    background: repeating-linear-gradient( 135deg, #FF5454 0px, #FF5454 1.5px, transparent 1.5px, transparent 3px );
} */

.divider{
    height: 5px;
    border: none;
    background: repeating-linear-gradient( 135deg, #FF5454 0px, #FF5454 1.5px, transparent 1.5px, transparent 3px );
    margin: 0;
}



/* ----- HEADER ----- */
.header{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

}

#header-image{
    width: 100%;
    /* background: url(./photos/header.jpg); */
    background-size:cover;
    background-position: 0% 20%;
}

#logo{
    position: relative;
    /* margin-left: var(--body-margin); */


    width: 80%;
    max-width: 960px;
    margin: 0 auto 0 auto;
    /* padding-top: 32px;
    padding-bottom: 32px; */
    padding: 120px 0 120px 0;
}

#logo img{
    width: 260px;
}

#navbar{
    width: 100%;
    background: var(--red-gradient);
    height: var(--fontsize5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    margin: 0 0 0 0;

}



#navlist{
    width: calc(100% - (2*var(--body-margin)));
    height: 100%;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* margin: 0 auto; */
    width: 80%;
    max-width: 960px;
}

#navlist li{
    vertical-align: middle;
    padding: 0 0 0 5px;
    height: 100%;
    font-size: var(--fontsize3);

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



.active{
    /* width:fit-content; */
    height: 100%;
    background-color: var(--black1);
}


.active span{
    padding-left: 10px;
    padding-right: 5px;
    font-size: var(--fontsize6);
    /* background-color: var(--black1); */
}

.inactive{
    font-family: Urbanist, sans-serif;
    color: var(--black2);
    font-weight: 900;
    opacity: 0.4;
    cursor: pointer;
}

#navlist a{
    text-decoration: none;
    color: var(--black2);
}

.inactive a:visited{
    text-decoration: none;
}

.inactive:hover{
    opacity: 1;
    /* White Outline */
    /* -webkit-text-stroke-width: 0.6px;
    -webkit-text-stroke-color: var(--white1); */
}

/* ----- NAVIGATION SMALL SCREENS ----- */

/* .class{display: none} */

.flex{
    display: flex;
}

.hidden{
    display: none !important;
}


#navbar-smallscreen{
    width: 100%;
    padding-top: 16px;

    flex-direction: column;
    align-items: center;
    text-transform: uppercase;
    background-color: var(--black1);
}

#navlist-smallscreen{
    width: 100%;
    max-width: 960px;
    height: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    /* margin: 0 auto; */
    overflow: hidden;
}

#navlist-smallscreen li{
    vertical-align: middle;
    padding: 0 0 0 0px;
    margin: 8px 0;
    height: 100%;
    font-size: var(--fontsize6);
    background-color: var(--black1);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.navlist-smallscreen-div{
    background: var(--red-gradient);
    margin-left: 24px;
    height: var(--fontsize5);
    width: 2000px;
}

.navlist-smallscreen-div-leading{
    background: var(--red-gradient);
    margin-right: 24px;
    height: var(--fontsize5);
    width: 5vw;
}

#navlist-smallscreen .font-front-black, 
  #navlist-smallscreen .font-back-black, 
  #navlist-smallscreen .font-black {
    font-size: var(--fontsize5) !important;
   }

#menu-icon-smallscreen{
    display: none !important;
    filter: invert(1);
    opacity: 0.4;
    margin-left: auto;
}
#menu-icon-smallscreen img{
    width: 48px;
    height: 48px;
    margin: auto;
}

/* VERY SMALL SCREENS */


#navbar-very-smallscreen{
    width: 100%;
    /* margin-top: 16px; */
    display: none;
    flex-direction: column;
    align-items: center;
    text-transform: uppercase;
    background-color: var(--black1);
}

#navlist-very-smallscreen{
    width: 100%;
    max-width: 960px;
    height: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    /* margin: 0 auto; */
    overflow: hidden;
}

#navlist-very-smallscreen li{
    vertical-align: middle;
    padding: 0 0 0 0px;
    margin: 8px 0;
    height: 100%;
    font-size: var(--fontsize3);
    background-color: var(--black1);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#navlist-very-smallscreen .active{
    font-size: var(--fontsize3) !important;

}

.navlist-very-smallscreen-div{
    background: var(--red-gradient);
    margin-left: 24px;
    height: var(--fontsize3);
    width: 2000px;
}

.navlist-very-smallscreen-div-leading{
    background: var(--red-gradient);
    margin-right: 24px;
    height: var(--fontsize3);
    width: 5vw;
}



/* ---------- */


#header-stuff{
    background-color: var(--black1);

    border-bottom: 1px solid var(--white1);
    width: 100%;
    padding: 8px 0 8px 0;

    
    /* position: absolute;
    top: 0;
    right: var(--body-margin); */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 32px;
}



#social-icons{
    display: flex;
    flex-direction: row;
    gap: 8px;
}

#social-icons img{
    width: 24px;
    height: 24px;
}

#bc-icon{
    filter: invert(0.9);
}

#bandcamp-player{
    transform: scale(0.7);
    transform-origin: 50% 50%;
}

#bandcamp-player-div{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 210px;
    height: 30px;
}



#newsletter-div .button{
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: 24px;
    margin-left: 8px;
    font-size: var(--fontsize-2);
    background: var(--black1);
    color: var(--white2);
    outline: none;
    border: none;
    padding: 2px;
    text-transform: lowercase;
    
}


.arrow-right{
    width: 16px;
    height: 16px;
}

#newsletter-div input{
    background-color: var(--black1);
    font-size: var(--fontsize-2);
    margin-left: 16px;
    width: 200px;
    color: var(--white1);
    outline: none;
    border-bottom: 1px solid var(--white1);
    border-left: none;
    border-right: none;
    border-top: none;
}

#newsletter-div{
    font-size: var(--fontsize-2);
}

#newsletter-div-smallscreen{
    display: none;
}

#newsletter-div-smallscreen img{
    width: 32px;
    height: 32px;
}

input#newsletter-email{
    display: inline;
}

#newsletter-button{
    display: inline;
}

#lang-select{
    display: flex;
    flex-direction: row;
    gap: 8px;
    text-transform: lowercase;
    font-size: var(--fontsize-2);
}

.select-lang{
    font-weight: 1000;
    color: var(--red);
    /* background: var(--red-gradient); */
}

.vertical-divider{
    width: 1px;
    height: 24px;
    background: var(--white1);
}




/* ----- CONTENT ----- */
#content{
    background-color: var(--black1);
    width: 80%;
    max-width: 960px;
    margin: 32px auto;
    /* padding: 0 var(--body-margin) 0 var(--body-margin); */
}


section{
   padding-top: 16px;
   margin-bottom: 32px;
   margin-top: 0px;
   overflow:hidden;
}

section:first-child{
    margin-top: 16px;
}

p{
    font-weight: 600;
    font-size: var(--fontsize-1);
    text-transform:uppercase;
    margin-top: 16px;
}

.nocaps{
    text-transform: none !important;
    font-weight: 300 !important;
}

#bio-section p{
    font-weight: 300;
    text-transform: none;
}

.caps{
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

.quote{
    font-size: var(--fontsize0);
    text-transform: none;
    font-weight: 300;
    font-style: italic;
}
.quote::before{
    content: "«";
}
.quote::after{
    content: "»";
}

.press-desc{
    font-size: var(--fontsize-2);
}

.album-cover{
    display: inline-block;
    width: 180px;
    height: 180px;
    /* float: left; */
    border: 4px solid var(--white2);
    margin: 8px 16px 0 0;
}




.error-warning{
    color: var(--red);
}


.showAll-concert{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.showAll-group{
    display: flex;
    flex-direction: column;

    margin: 10px;
}

.showAll-title{
    font-size: 1.5rem;
}

.showAll-venue{
    font-size: 0.7rem;
}

.showAll-subtitle{
    /* margin-left: auto; */
    display: flex;
    /* justify-content: center; */
    align-items: center;
    color: var(--emergency-black);
}

.showAll-date{
    margin: 10px;
    min-width: 200px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.showAll-section a{
    text-decoration: none;
    color: var(--white2);
}


.edit-link-container {
    border: none;
    margin: 30px 0;
    background-color: var(--black3);
}

.edit-link-container legend {
}

.edit-link-group {
    border:none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.edit-link-group div{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.delete-link-button {
    height: 45px;
    padding: 8px;
}



.delete-button{
    background-color: var(--red) !important; 
}


/* Form */

.form-lib-form label{
    text-transform: none;
    font-weight: 100;
}

.form-lib-error-messages{
    color: var(--red);
    font-weight: 100;
    font-size: 0.8rem;
}

.form-radio-group{
    padding: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    border: none;
    background-color: var(--black3);
}

.form-radio-group label{
    display: inline;
    
}

.form-radio-group input[type="radio"]{
    display: inline;
    margin-right: 15px;
    accent-color: var(--red);
} 

.form-checkbox{
    display: inline;
    margin-right: 15px;
    accent-color: var(--red);
}

.form-checkbox-label{
    display: inline;
}




/* ----- MEDIA / VIDEOS / AUDIO ----- */

.soundcloud-player{
    max-width: 640px;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    margin-bottom: 12px;
}



/* --------- */
.btn-link{
    text-decoration: none;
    text-transform: uppercase;
    font-size: var(--fontsize-1);
    display: inline-block;
    color: var(--white2);
    background: var(--black1);
    border-bottom: 1px solid var(--white1);
    padding: 4px 8px;
    margin: 16px 8px 8px 0px;
}

.btn-link:hover{
    filter: invert(1);
    transition: 200ms;
}

.arrow-upright{
    height: 16px;
    width: 16px;
    margin: 0 8px 0 8px;
}



/* ----- FOOTER ----- */
#footer{
    border-top: 1px solid var(--white1);
    text-align: center;

    /* display: flex;
    flex-direction: row;
    justify-content: center; */
}

#footer-links{
    font-size: var(--fontsize-2);
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: center;
    /* width: 100%; */
    gap: 32px;
    margin: 32px;
}

#footer-links div{
    display: inline-flex;
    flex-direction: row;
}

#footer-links img{
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

#footer-links a {
    text-transform: uppercase;
    color: var(--white2);
    text-decoration: none;
    font-size: var(--fontsize-2)
}

.invert{
    filter: invert(1);
}

#footer p {
    display: block;
    text-align: center;
    margin: 32px auto;
    font-size: var(--fontsize-2);
}

#footer a{
    text-decoration: none;
    color: var(--white2)
}



#navlist-smallscreen{
    display:none;
}


@media only screen and (max-width: 1100px) {
    #newsletter-div-smallscreen{
        display: block;
    }
   
    #newsletter-div{
        display: none;
    }

    /* MENU */
    #navlist li{
        font-size: var(--fontsize2);
    }
    
}

@media only screen and (max-width: 980px){
    #navlist li{
        font-size: var(--fontsize1);
    }

}

@media only screen and (max-width: 890px){
    #navlist{
        width: 90%;
        justify-content: flex-start;
    }

    .inactive{
        display: none !important;
    }

    #navlist-smallscreen{
        display:flex;
    }

    #menu-icon-smallscreen{
        display: flex !important;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    #navbar-smallscreen.flex{
        display: flex;
    }

    #navbar-smallscreen.hidden{
        display: none !important;
    }

    #logo{
        width: 90%;
    }

    #content{
        width: 90%;
    }
}

@media only screen and (max-width: 700px){
    #bandcamp-player-div{
        display: none;
    }

    #bandcamp-player-divider{
        display: none;
    }
}


@media only screen and (max-width: 450px){
    #header-stuff{
        gap: 8px;
    }


    #navbar-very-smallscreen{
        display: block;
        position: relative;
    }



    #navbar-very-smallscreen li.active{
        font-size: var(--fontsize3) !important;
    }

    #navbar {
        display: none;
    }

    #navbar-very-smallscreen img{
        width: 32px;
        height: 32px;
        margin: auto;
        filter: invert(1);
        opacity: 0.4;
        margin-left: 32px;
        position: absolute;
        top: 14px;
        right: 12px;
    }
}