@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*
{
    scroll-behavior: smooth;
    /* min-height: 100vh; */
}

body
{
    background-color: rgb(255, 255, 255);
    background: radial-gradient();
    color: rgb(0, 0, 0);
    padding: 0;
    margin: 0;
    min-height: 100vh;
    font-family: "Poppins", sans-serif;
    display: flex;
    flex-direction: column;
    /* box-shadow: 0px 0px 20px black; */
    /* scroll-behavior: smooth; */

}

/* .topnav {
    
    height: 55px;
    width: 100%;
    
    border-bottom: 2px solid black;
    z-index: 1;

    }
    
.topnav a {
float: right;
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a div
{
    float: left;
    display: block;
    color: #000000;
    padding: 14px 16px;
    font-size: 17px;
    
}

.topnav a img
{
    width: 5%;
    
}
/* .active {
background-color: #a53333;
color: white;
} */

/* .topnav .icon {
display: none;
} */

/* .dropdown {
float: right;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 17px;    
border: none;
outline: none;
color: rgb(0, 0, 0);
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #a53333;
color: white;
}

.dropdown-content a:hover {
background-color: #ddd;
color: black;
}

.dropdown:hover .dropdown-content {
display: block;
position: fixed;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
}
.topnav a.icon {
    float: right;
    display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
}
.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
}
} */ 
    


section
{
    display: grid;
    place-items: center;
    align-content: center;
    /* padding-top: 14%; */
    margin-top: 15%;
    /* margin-bottom: 15%; */
    /* min-height: 10vh; */

}


.textboxes
{
    width: 400px;
    font-family: "Poppins";
    font-weight: 400;
    font-style: italic;
    line-height: 35px;
}

h1
{
    font-weight: 500;
}

.hidden
{
    opacity: 0;
    transition: all 4s;
    filter: blur(5px);
    /* width: fit-content;
    height: fit-content; */
    /* margin-right: 70vh; */
    transform: translateX(-10%);
}

.show
{
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
    
}


.container
{
    width: 100%;
    height: 700px;
    background-position: center;
    /* z-index: 3; */
    background-size: cover;
    /* background-image: url(78-2.jpg); */
    background-attachment: fixed;
    font-size: 150px;
    margin-top: 100px;
}

.title_logo
{
    font-size: 10vh;
    float: left;
}

/* .square1
{
    width: 15vh;
    height: 15vh;
    border-radius: 20px;
    rotate: 45deg;
    background-color: #a53333;
    float: right;
    margin-right: 5vh;
} */

footer {
    text-align: center;
    padding: 1em;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    margin-top: auto;
    border-top: 2px solid black;

}
footer a {
    color: #a53333;
    text-decoration: none;
}

.container_konzerte
{
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

.konzert_wrapper
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 5rem 0;
    grid-gap: 2rem;
}

.konzerte
{
    background-color: #353535;
    border-radius: 10px;
    /* border: 5px solid #292929; */
    cursor: pointer;
    margin: 50px;
    /* box-shadow: rgb(48, 48, 48) 0px 0px 20px; */
}

.konzerte.hide
{
    display: none;
}
.konzerte:hover
{
    box-shadow: rgb(46, 46, 46) 0px 0px 40px;
    /* background-color: #616161; */
    transition: 1s;
}

.konz_img img
{
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
} 

.content
{
    padding: 1rem;
}

.content .title
{
    font-size: 1rem;
    color: #ffffff;
    /* background-color: #a53333; */
    padding: 10px;
    width: fit-content;
    border-radius: 15px;
}

.content .datum
{
    color: #ffffff;
}

.content .besetzung
{
     color: #ffffff;
     margin: 0.5rem 0;
}

.bes_elem
{
    color: white;
}

.jahr_drop
{
    padding: 50px;
    /* background-color: #969696; */
    /* width: 50px;
    height: 50px; */
}

.home_img
{
    display: flex;
    justify-content: center;
    align-items: center;
    /* column-gap: ; */
    /* width: 700px; */
    /* margin: 0 auto; */
    /* margin: 10%; */

}

.home_img img
{
    width: 15%;
    margin: 4px;
    margin-top: 100px;
    
}

.arrow
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
}

.arrow-down
{
    position: absolute;
    width: 20px;
    height: 20px;
    border-top: 5px solid rgb(0, 0, 0);
    border-left: 5px solid rgb(0, 0, 0);
    rotate: -135deg;
    /* border-radius: 5px; */
    
}

.team_raster
{
    display: flex;
    max-width: 1300px;
    width: 100%;
    height: fit-content;
    min-height: 400px;
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    flex-wrap: wrap;
    justify-content: center;
    /* grid-template-columns: repeat(4, 1fr); */
    /* width: 30%; */
    /* margin: 5vh; */
    /* align-items: center;
    justify-content: center; */
}

.t_raster_elem
{
    width: 200px;
    height: 200px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
    background-color: #ffffff;
    margin: 3vh;
    overflow: hidden;
    transition: 1s;
    /* border: 2px solid #000000; */
    
    /* background-image: url(P5060163.png); */
    /* text-align: center; */
    /* justify-content: center; */
    /* align-items: center; */

}

.t_raster_elem:hover
{
    height: 230px;
    width: 230px;
    box-shadow: 0px 0px 30px rgb(131, 131, 131);
}

.profil
{
    width: 100%;
    object-fit: cover;
    /* border-radius: 5%; */
}

/* .crew_name
{
    font-size: 17px;
    font-weight: 700;
    color: #000000;
    text-align: center;
} */

/* .biogr
{
    font-size: 13px;
    color: #000000;
    text-align: justify;
    hyphens: auto;
} */

.popup .overlay
{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    z-index: 1;
    display: none;
}

.popup .pop_content
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: #fff;
    width: 450px;
    height: 600px;
    overflow: hidden;
    overflow-y: scroll;
    z-index: 2;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;

}

.popup .close-btn
{
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    background: #222;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
}

.popup.active .overlay
{
    display: block;
}

.popup.active .pop_content
{
    transition: all 300ms ease-in-out;
    transform: translate(-50%, -50%) scale(1);

}

.scroll_bg
{
    width: 100%;
    height: 1150px;
    background-color: #000000;
    background-position: center;
    /* background-size: contain; */
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("78-2.jpg");
    background-attachment: fixed;

    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

header
{
    background-color: white;
     
}

nav li
{
    list-style: none;
}

nav a
{
    color: black;
    text-decoration: none;
}

.navbar
{
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
}

.nav-menu
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

.nav-branding
{
    font-size: 1rem;
}

.nav-link
{
    transition: 0.4s ease;
}

.nav-link:hover
{
    color: #a53333;
}

.hamburger
{
    display: none;
    cursor: pointer;
}

.bar
{
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: black;
}

.phone-img
{
    display: none;
}

.head-img-phone
{
    max-width: 100%;
}

.btn-grid
{
    position: relative;
    max-width: 1350px;
    width: 100%;
    /* background-color: red; */
    margin: 50px auto;
    padding: 20px;

}

.btn-grid ul
{
    display: flex;
    align-items: center;
    gap: 15px;
    list-style: none;
}

.btn-grid ul li
{
    border-radius: 5px;
    /* border: 2px solid black; */
    padding: 10px;
    width: 50px;
    text-align: center;
    background-color: #353535;
}

.btn-grid ul li a
{
    text-decoration: none;
    color: #ffffff;
}



@media(max-width:768px)
{
    .hamburger
    {
        display: block;
    }

    .hamburger.active .bar:nth-child(2)
    {
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1)
    {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3)
    {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-menu
    {
        position: fixed;
        left: -120%;
        top: 45px;
        gap: 0;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        border-bottom: 3px solid #000000;
        z-index: 1;
    }

    .nav-item
    {
        margin: 16px 0
    }

    .nav-menu.active
    {
        left: 0;
    }

    .scroll_bg
    {
        display: none;
    }

    .phone-img
    {
        display: block;
        width: 100%;
    }

    .arrow
    {
        display: none;
    }
}