/* CSS Variables - Makkelijk aanpasbaar */
:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --accent-color: #27ae60;
    --danger-color: #e74c3c;
    --text-color: #2c3e50;
    --background-color: #f4f4f4;
    --white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Helvetica Neue', Arial, sans-serif; 
    line-height: 1.6; 
    background: var(--background-color);
    color: var(--text-color);
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Header met klikbaar logo */
header { 
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); 
    color: var(--white); 
    padding: 1rem 0; 
}
header h1 a { color: var(--white); text-decoration: none; }
header h1 a:hover { text-decoration: underline; }

nav { background: var(--primary-color); padding: 1rem 0; }
nav a { color: var(--white); text-decoration: none; margin-right: 1rem; }
nav a:hover { text-decoration: underline; }

main { padding: 2rem 0; }

/* Rest van je bestaande CSS blijft hetzelfde */
.btn { 
    display: inline-block; 
    background: var(--secondary-color); 
    color: var(--white); 
    padding: 0.5rem 1rem; 
    text-decoration: none; 
    border-radius: 3px; 
    margin-right: 1rem; 
}
.btn:hover { opacity: 0.8; }

.alert { padding: 1rem; margin: 1rem 0; border-radius: 3px; }
.alert.success { background: #d4edda; color: #155724; }
.alert.error { background: #f8d7da; color: #721c24; }

/* Voeg toe aan bestaande style.css */