/* ----------------------------------------------------------
   GLOBAL STYLES & FONTS
   ----------------------------------------------------------
*/
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Courier+Prime:wght@400;700&display=swap');

body { 
    background-color: #f3f0e6; 
    background-image: radial-gradient(#d1d1d1 1px, transparent 1px); 
    background-size: 20px 20px; 
    overflow-x: hidden;
}

/* Tape effect voor afbeeldingen */
.tape { 
    background-color: rgba(255,255,255,0.6); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
    backdrop-filter: blur(2px); 
}

/* Schuine afsnijdingen */
.clip-path-slant { 
    clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%); 
}

/* ----------------------------------------------------------
   NAADLOZE MARQUEE (Oneindige loop)
   ----------------------------------------------------------
*/
.marquee-wrapper {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 0; 
}

.marquee-content {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-width: 100%;
    gap: 0;
    /* AANGEPAST: Snelheid vertraagd van 20s naar 40s voor rustiger beeld */
    animation: scroll 40s linear infinite;
}

@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* ----------------------------------------------------------
   SPEELLIJST
   ----------------------------------------------------------
*/
.event-row { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 0.5rem; 
    align-items: center; 
    border-bottom: 1px solid #333; 
    padding: 1.5rem 1rem; 
}

@media (min-width: 768px) { 
    .event-row { 
        grid-template-columns: 140px 1fr 1.5fr 140px; 
        text-align: left; 
        gap: 2rem; 
    } 
}

/* ----------------------------------------------------------
   MODALS
   ----------------------------------------------------------
*/
.modal-overlay { 
    background: rgba(0,0,0,0.8); 
    backdrop-filter: blur(4px); 
    display: none; 
}
.modal-overlay.active { 
    display: flex; 
}

/* ----------------------------------------------------------
   UTILITIES
   ----------------------------------------------------------
*/
.shadow-hard {
    box-shadow: 6px 6px 0px 0px rgba(0,0,0,1);
}