#willkommen{
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 8vh;
    margin-bottom: 6vh;
}


#willkommenueberschrift{
    text-align: center;
    font-size: calc(1.4vw + 2.8vh);
    font-weight: 420;
    letter-spacing: 1.4px;
}

#willkommentext{
    line-height: 1.8;
    letter-spacing: 0.2px;
    font-weight: 400;
    font-size: calc(2vh);
    max-width: 800px;
}

#kontakt{
    padding-bottom: calc(4vw + 4vh);
}

#main{
    justify-content: center;
}


#programm{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width:100%;
    row-gap: 1vh;
    max-width: 1200px;
}

#programmfilter{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width:80%;
    padding-left: 10%;
    max-width: 1200px;
    gap:1vw;
}

#filtersymbol{
    display: flex;
    justify-content: center;
    align-items: center;
    width:4vh;
    height:4vh;
}
#filtersymbol svg{
    width:100%;
    height:100%;
}

.filterbutton{
    padding: 1.8vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    border-radius: 1.2vh;
    background-color: #eee;
    color: #d04628;
    font-size: 2.4vh;
    font-weight: 600;
    box-shadow: 0 0 10px #888;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    transition: 100ms all ease;
}



#programmevents, .programmevents{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    gap:calc(0vw + 2vh);
    width: 90%;
    max-width: 1200px;
    min-height:40vh;
    margin-bottom: 4vh;
}
.programmevents{
    width:100%;
}

.programmtrenndiv{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap:4vw;
    width: 100%;
    height: 8vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.programmtrennmonat{
    margin: 4vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
    display: flex;
    justify-content: start;
    align-items: center;
    height:100%;
    font-size: 3.6vh;
    font-weight: 500;
    letter-spacing: 0.2vw;
    color:#ccc;
}

.programmtrennstrich{
    height:0.2vh;
    width:80vw;
    margin-right: auto;
    background-color: #bbb;
    box-shadow: 0 0 4px #bbb;
}

.event{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width:100%;
    height:80%;
    overflow-x: hidden;
    overflow-y: hidden;
    cursor: pointer;
    transition: 200ms all ease;
    text-decoration: none;
}

.eventbox{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    height:auto;
    width:40%;
    aspect-ratio: 5 / 4;
    overflow-x: hidden;
    overflow-y: hidden;
    border: 1px solid #424242;
}
.event:hover{
    transform: none;
    box-shadow: 0 0 10px #484850;
}

.eventbild{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.eventueberschrift{
    display: flex;
    justify-content: start;
    align-items: center;
    width:88%;
    height:40%;
    font-size: calc(20px + 1.8vh);
    font-weight: 640;
    letter-spacing: 1.4px;
    line-height: 1.2;
    user-select: none;
    color:#fff;
}

.eventuntertitel{
    display: flex;
    justify-content: start;
    align-items: center;
    width:88%;
    height:40%;
    margin-top: -0.6vh;
    margin-bottom: 0.6vh;
    font-size: calc(10px + 0.9vh);
    font-weight: 500;
    letter-spacing: 1.4px;
    line-height: 1.2;
    user-select: none;
    color:#fff;
}

.eventbild img{
    max-width: 150%;
    max-height: 100%;
    object-fit: contain;
}

.eventdatum{
    position: absolute;
    bottom:0;
    left:0;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    width:100%;
    height:15%;
    gap:5%;
    padding:0;
    padding-right: 2vh;
    border-top-right-radius: 1.5vh;
    border-top-left-radius: 0;
    font-size: 1.8vh;
    font-weight: 420;
    letter-spacing: 0.5px;
    user-select: none;
    backdrop-filter: blur(6px) brightness(0.4);
}

.eventdatumdatum{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    border-top-right-radius: 1vh;
    border-top-left-radius:0;
    height:100%;
    width:auto;
    aspect-ratio: 5 / 4;
    font-size: 2.8vh;
    font-weight: 600;
    background-color:#d04628;
    filter: brightness(1.1);
}

.eventdatumuhrzeit{
    text-wrap: nowrap;
    color:#eee;
}

.eventtext{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 1;
    width:58%;
    height:96%;
    min-height: 70%;
    max-height: 90%;
    padding-top: 4%;
}

.eventbeschreibung{
    width:100%;
    padding: 1vh;
    padding-left: 3vh;
    padding-right: 3vh;
    font-size: calc(12px + 0.1vw + 0.5vh);
    font-weight: 500;
    letter-spacing: 0.8px;
    line-height: 1.4;
    color:#bbb;
    word-break: break-word;
    overflow-wrap: break-word;
    word-wrap: break-all;
}

.eventpreis{
    display: flex;
    justify-content: end;
    align-items: center;
    min-width: 200px;
    width:90%;
    padding: 2vh;
    padding-left: 3vh;
    padding-right: 3vh;
    font-size: 2.4vh;
    font-weight: 200;
    letter-spacing: 0.8px;
    line-height: 1.4;
    color:#bbb;
}

@media screen and (max-width:800px){
    .event{
        justify-content: center;
        padding:0;
    }
    .eventueberschrift{
        margin-top: 2vh;
    }
    .eventbox{
        width:38vh;
    }
    .eventtext{
        width:100%;
        row-gap: 0.5vh;
    }
    .eventpreis{
        padding: 0.5vh;
    }
}