:root { 
    --bg-color: #121212; 
    --card-bg: #1e1e1e; 
    --accent-color: #ff3333; /* Standaard fallback */
    --text-color: #e0e0e0; 
}

body { 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    font-family: sans-serif; 
    margin: 0; 
}

a { 
    color: var(--text-color); 
    text-decoration: none; 
}

header { 
    padding: 40px; 
    text-align: center; 
}

/* Grid en Items */
.grid { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 20px; 
    padding: 20px; 
}

.item { 
    background: var(--card-bg); 
    border: 2px solid transparent; 
    border-radius: 12px; 
    overflow: hidden; 
    transition: 0.3s; 
    position: relative; 
}

.item:hover { 
    border-color: var(--accent-color); 
    transform: scale(1.02); 
}

.item img { 
    width: 100%; 
    height: 250px; 
    object-fit: cover; 
    display: block; 
}

/* Titel overlay */
.title { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: rgba(0,0,0,0.8); 
    padding: 10px; 
    opacity: 0; 
    transition: 0.3s; 
    text-align: center; 
    font-size: 13px; 
}

.item:hover .title { 
    opacity: 1; 
}

/* Overige secties & koppen */
.block, h3 { 
    padding: 30px; 
    text-align: center; 
    border-top: 1px solid #333; 
    border-bottom: 1px solid #333; 
    background: #1a1a1a; 
    margin: 20px 0; 
}

.search-tags { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 10px; 
    text-align: center; 
}

.search-tags a { 
    display: inline-block; 
    padding: 8px 15px; 
    margin: 5px; 
    background: #222; 
    border: 1px solid #444; 
    color: #aaa; 
    text-decoration: none; 
    border-radius: 20px; 
}

.search-tags a:hover { 
    background: var(--accent-color); 
    color: white; 
}

.star-bar { 
    background: #111; 
    padding: 15px 0; 
    text-align: center; 
    border-bottom: 2px solid var(--accent-color); 
}

.star-link { 
    display: inline-block; 
    padding: 10px 20px; 
    margin: 0 10px; 
    font-weight: bold; 
    color: #fff; 
    text-transform: uppercase; 
    border: 1px solid #333; 
    transition: 0.3s; 
}

.star-link:hover { 
    background: var(--accent-color); 
    border-color: var(--accent-color); 
}

footer { 
    padding: 40px; 
    text-align: center; 
}

/* Stijl voor de Back knoppen */
.back-link { 
    display: inline-block; 
    margin: 20px 0; 
    color: var(--accent-color); 
    text-decoration: underline; 
    font-weight: bold; 
    transition: 0.3s; 
}

.back-link:hover { 
    color: #fff; 
}

.logo { 
    text-decoration: none; 
    color: #fff; 
    display: block; 
}

.logo-text h1 { 
    margin: 0; 
    font-size: 1.8rem; 
    line-height: 1; 
}

.logo-text .subtitle { 
    display: block; 
    font-size: 0.8rem; 
    color: #aaa; 
    margin-top: 2px; 
}

.header-inner { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 1rem; 
}

/* --- CENTRALE KLEUREN PER THEMA UIT DE BUNKER --- */
body.theme-green { --accent-color: #2ecc71 !important; }
body.theme-blue { --accent-color: #3498db !important; }
body.theme-red { --accent-color: #e74c3c !important; }
body.theme-purple { --accent-color: #9b59b6 !important; }
body.theme-pink { --accent-color: #e84393 !important; }
body.theme-orange { --accent-color: #e67e22 !important; }

/* Thema Overrides (zorgt dat borders en hovers direct meegaan) */
body.theme-green .star-bar,
body.theme-green .star-link:hover,
body.theme-green .search-tags a:hover,
body.theme-green .item:hover,
body.theme-green .page-btn:hover { 
    border-color: #2ecc71 !important; 
}

body.theme-green .star-link:hover,
body.theme-green .search-tags a:hover { 
    background-color: #2ecc71 !important; 
    color: #ffffff !important; 
}

body.theme-green .page-btn[style*="background: var(--accent-color)"],
body.theme-green .page-btn[style*="background:var(--accent-color)"] { 
    background: #2ecc71 !important; 
    border-color: #2ecc71 !important; 
    color: #000000 !important; 
}

/* Blauw thema overrides */
body.theme-blue .star-bar,
body.theme-blue .star-link:hover,
body.theme-blue .search-tags a:hover,
body.theme-blue .item:hover { 
    border-color: #3498db !important; 
}
body.theme-blue .star-link:hover,
body.theme-blue .search-tags a:hover { 
    background-color: #3498db !important; 
    color: #fff !important; 
}

/* Paars thema overrides */
body.theme-purple .star-bar,
body.theme-purple .star-link:hover,
body.theme-purple .search-tags a:hover,
body