.event_container {
    position: relative;
    width: 100%;
    height: 100%;
}

.event_container img {
    width: 100%;
    height: 100%;
    display: block; /* Verhindert unerwünschten Abstand unter dem Bild */
}

.event_hover_text {
    position: absolute;
    top: 0;
    left: 0;
    width: 79%;
    height: 85%;
    background-color: rgb(0 0 0 / 95%);
    color: #f2d390;
    display: flex;
    flex-direction: column; /* Damit Text scrollt */
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 80px;
    overflow-y: hidden; /* Scrollbar erstmal verstecken */
    
    --sb-track-color: #232E33;
    --sb-thumb-color: #484848;
    --sb-size: 10px;
}

.event_container:hover .event_hover_text {
    opacity: 1; /* Sichtbar beim Hovern */
    overflow-y: auto; /* Scrollbar nur beim Hovern aktivieren */
}

/* Scrollbar-Design */
.event_hover_text::-webkit-scrollbar {
    width: var(--sb-size);
}

.event_hover_text::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 3px;
}

.event_hover_text::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 3px;
}

@supports not selector(::-webkit-scrollbar) {
    .event_hover_text {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}

.ougc_box {
    background: #0000004a;
    width: 1157px;
    margin: 7px auto;
    padding: 20px;
    text-align: center;
}