:root {
    --main-color: #FAFAFA;
    --secondary-color: #090909;
    --tertiary-color: #E64344;
    --text-title-big: 2.5em;
    --text-title-medium: 2em;
    --text-title-small: 1.5em;
}

body {
    background-color: var(--main-color);
    color: var(--secondary-color);
    font-family: Arial, sans-serif;
    margin: 0; padding: 0;
}

/* Fix voor paarse/onderstreepte links */
a, a:visited, a:hover, a:active {
    text-decoration: none !important;
    color: inherit;
}

/* Navigatie */
.navbar {
    background-color: var(--secondary-color); color: var(--main-color);
    padding: 2rem 4rem; display: flex; justify-content: space-between; align-items: center;
}

/* Knoppen */
.btn {
    background-color: var(--tertiary-color); color: var(--main-color);
    padding: 10px 20px; border-radius: 8px; font-weight: bold; border: none; cursor: pointer; transition: 0.2s; display: inline-block; text-align: center;
}
.btn:hover { opacity: 0.8; transform: translateY(-2px); }
.btn-outline { background: transparent; border: 2px solid var(--tertiary-color); color: var(--tertiary-color); }
.btn-gray { background-color: #eee; color: var(--secondary-color); }
.btn-gray:hover { background-color: #ddd; }

/* Grid Systeem (Basic en clean) */
.list__index {
    padding-top: 5em; padding-bottom: 5em; width: fit-content; margin: auto;
    display: grid; gap: 2rem; grid-template-columns: repeat(4, 1fr); justify-items: center; align-items: start;
}
.list__index > div { width: 22vw; max-width: 90vw; }

/* Nieuwe Compacte Kaarten */
.card-wrapper {
    border-radius: 12px; background-color: var(--secondary-color); color: var(--main-color);
    display: flex; justify-content: center; align-items: center; text-align: center;
    padding: 2.5rem 1.5rem; width: 100%; transition: transform 0.3s ease-in-out;
    box-sizing: border-box;
}
.card-wrapper:hover { transform: scale(1.03); cursor: pointer; }
.card-wrapper h2 { font-size: var(--text-title-small); margin: 0; }

/* Containers voor detail en beheer */
.container { max-width: 900px; margin: 4rem auto; padding: 0 2rem; }
.admin-section {
    background: white; border-radius: 15px; padding: 3rem; margin-bottom: 3rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}

/* Beheer Rijen */
.beheer-rij {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.5rem; border-bottom: 1px solid #f0f0f0; transition: background 0.2s;
}
.beheer-rij:hover { background: #fafafa; }
.beheer-rij:last-child { border-bottom: none; }

.badge-verborgen {
    background: var(--tertiary-color); color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.8em; margin-bottom: 10px; font-weight: bold; display: inline-block;
}

input[type="text"],input[type="password"], input[type="file"] {
    width: 100%; padding: 15px; margin: 10px 0 25px 0; border: 2px solid #eee; border-radius: 8px; font-size: 1em; background: #fafafa; box-sizing: border-box;
}
input:focus { border-color: var(--secondary-color); outline: none; background: white; }

/* Audio & iframe */
.audio-player { background: white; padding: 20px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); margin-bottom: 20px; }
audio { width: 100%; outline: none; margin-top: 15px; }
iframe { width: 100%; height: 75vh; border: none; border-radius: 15px; margin-top: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }

@media (max-width: 1300px){ .list__index { grid-template-columns: repeat(2, 1fr); } .list__index > div { width: 40vw; } } 
@media (max-width: 700px){ .list__index { grid-template-columns: repeat(1, 1fr); } .list__index > div { width: 90vw; } }