main {
    background-color: var(--main-bg-color);
    overflow-x: hidden;
}
aside {
    border: rgba(var(--colA),0.8) 1px solid;
    padding: 1em;
    margin-bottom: 1em;
}
.evlist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 0.5em;
}
.evlist a {
    width: clamp(140px,calc(50% - 0.5em),300px);
    box-shadow: 3px 3px 3px #0000007F;
    background-color: rgba(var(--colN),1);
    font-size: 0.8em;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.evlist a:not([href]) {
    background-color: rgba(var(--colN),0.5);
}
.evlist a:not([href]) img {
    opacity: 0.5;
}
.evlist a > div {
    color: #FFF;
    padding: 9px;
    width: 90%;
}
.evlist a > div:not(:first-of-type) {
    padding-top: 7px;
    margin-top: 0px;
    border-top: #FFFFFF33 1px solid;
}
.evlist a.next {
    width: 100%;
    max-width: 430px;
    font-size: 1.15em;
    box-shadow: 3px 3px 3px #0000007F;
    border-radius: 5px;
}
.evlist a.next img {
    border-radius: 5px 5px 0 0;
}
.evlist a.next > div {
    width: 100%;
}
.evlist a.separator {
    margin: 2rem;
    font-size: 1em;
    box-shadow: none;
    background: none;
    max-width: auto !important;
    flex-basis: 100%;
    text-align: center; 
    border-bottom: 1px solid #000; 
    line-height: 0.1em;
    display: inline;
}
.evlist a.separator > span {
    padding:0 10px; 
    color: #444;
    background-color: var(--main-bg-color);
}


.evlist a {
    transform: scale(1) rotate(0deg);
    transition: transform 0.2s ease;
}
.evlist a[href]:not(.separator):hover {
    transform: scale(1.1) rotate(-3deg);
    z-index: 10;
}
.resdetail * {
    box-sizing: border-box;
    
}
.resdetail > a[href^="/events"] {
    display: block;
    text-decoration: none;
    padding: 0.5em 1em;
    margin-bottom: 0.5em;
}
.resdetail form {
    width: 100%;
    display: grid;
    grid-template-columns: max-content 1fr; /* linke Spalte so breit wie nötig, rechte nimmt den Rest */
    xgap: 0.5rem 1rem; /* Abstand zwischen Reihen und Spalten */
    xalign-items: center; /* Labels vertikal mittig */
    
}
.resdetail form > div {
    display: contents; /* sorgt dafür, dass div nicht stört, Label & Input landen direkt im Grid */
    margin-bottom: 0.5em;
}
.resdetail form label {
    font-weight: bold;
    margin-right: 10px;
}

.resdetail form input, .resdetail form textarea {
    width: 100%;
}
.resdetail form div.hint, .resdetail form div.alert {
    margin-top: 0.4em;
    font-style: italic;
    width: 100%;
    font-size:0.7em;
    color: #777;
}
.resdetail form div.alert {
    border: rgb(var(--colB)) 1px solid;
    padding: 0.5em;
}
.resdetail form div.f {
    display: block; /* Hauptsache, nicht "content"; */
    grid-column: 1 / -1; /* spannt über alle Spalten */
}
.resdetail form input[type="submit"] {
    width: 100%;
    padding: 0.8em 0.5em;
    width: 100%;
    border: none;
    border-radius: 3px;
    background-color: rgb(var(--colB));
    color: rgb(var(--colBfont));

}