/* Erwin Live: donker thema, schermvullende achtergrond, gele links */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body {
    margin: 0;
    background: #000;
    color: #e6e6e6;
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.6;
}
a { color: #E1E031; }
a:hover, a:focus { color: #fff; text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* achtergrondslideshow: 4 lagen, 40 s per ronde, zwarte overlay */
.bg-slides { position: fixed; inset: 0; z-index: -1; background: #000; }
.bg-slides > div {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    animation: bgfade 40s infinite;
}
.bg-slides > div:nth-child(2) { animation-delay: 10s; }
.bg-slides > div:nth-child(3) { animation-delay: 20s; }
.bg-slides > div:nth-child(4) { animation-delay: 30s; }
.bg-slides::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
@keyframes bgfade {
    0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .bg-slides > div { animation: none; }
    .bg-slides > div:first-child { opacity: 1; }
}

.wrap { max-width: 80rem; margin: 0 auto; padding: 0 1.875rem; }

header { border-top: 12px solid #fff; padding: 2.5rem 0 1rem; }
header .wrap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.site-title { margin: 0; font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 700; line-height: .9; text-transform: uppercase; }
.site-title a { color: #E1E031; text-decoration: none; }
.site-title a:hover { color: #fff; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
nav a { color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: .2em; font-size: .9rem; padding: .4rem 0; display: inline-block; border-bottom: 2px solid transparent; }
nav a:hover, nav li.active a { color: #E1E031; border-bottom-color: #E1E031; }

.content { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem 3rem; padding-top: 2rem; padding-bottom: 3rem; min-height: 50vh; }
.col-main.full { grid-column: 1 / -1; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .8em; color: #fff; }
h1 { font-size: 2.2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.3rem; }
.col-side h2 a { color: #fff; text-decoration: none; }
.songlist { list-style: none; margin: 0; padding: 0; columns: 1; }
.songlist li { margin: 0 0 .35rem; }
.songlist li.active a { color: #fff; font-weight: 700; }
.ccm-block-youtube, .ccm-responsive-video-container { margin-bottom: 1.5rem; }
audio { width: 100%; max-width: 32rem; display: block; margin: .25rem 0 .5rem; }
.download-list .track { margin-bottom: 1.5rem; }

footer { border-top: 1px solid rgba(255, 255, 255, .25); padding: 1.5rem 0 2rem; font-size: .9rem; }
footer p { margin: 0 0 .5rem; }
footer .copy { text-align: right; color: #aaa; }

@media (max-width: 52rem) {
    .content { grid-template-columns: 1fr; }
    header .wrap { align-items: flex-start; }
}