:root {
    --achtergrond: #ffffff;
    --paneel: #f6f7f9;
    --rand: #dfe3e8;
    --tekst: #1c2024;
    --gedempt: #5f6b76;
    --accent: #c31251;
    --accent-zacht: #fde8ef;
    --ebg-e: #472a87;
    --ebg-b: #b5860f;
    --ebg-g: #1f8b81;
}

@media (prefers-color-scheme: dark) {
    :root {
        --achtergrond: #14171a;
        --paneel: #1c2126;
        --rand: #2c343c;
        --tekst: #e6e9ec;
        --gedempt: #9aa5b1;
        --accent: #ff6b9d;
        --accent-zacht: #3a1626;
        --ebg-e: #b09aeb;
        --ebg-b: #e8bd52;
        --ebg-g: #59c9bf;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--achtergrond);
    color: var(--tekst);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }

main {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

/* ------------------------------------------------------------------ kop -- */
.kop {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    max-width: 68rem;
    margin: 0 auto;
    padding: 1.25rem 1rem;
}

.merk {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}

.ondertitel { color: var(--gedempt); font-size: .9rem; }

.menu { display: flex; gap: 1.2rem; font-size: .95rem; }
.menu a { color: var(--gedempt); text-decoration: none; padding-bottom: .15rem; }
.menu a.aan { color: var(--tekst); font-weight: 600; border-bottom: 2px solid var(--accent); }

.voet {
    max-width: 68rem;
    margin: 0 auto;
    padding: 1rem;
    border-top: 1px solid var(--rand);
    color: var(--gedempt);
    font-size: .82rem;
}

/* --------------------------------------------------------------- filters -- */
.paneel {
    background: var(--paneel);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 1rem;
    display: grid;
    gap: 1rem;
}

.zoekbalk { display: flex; gap: .5rem; }

.zoekbalk input {
    flex: 1;
    padding: .6rem .8rem;
    font-size: 1rem;
    border: 1px solid var(--rand);
    border-radius: 7px;
    background: var(--achtergrond);
    color: var(--tekst);
}

.zoekbalk button {
    padding: .6rem 1.2rem;
    font-size: 1rem;
    border: 0;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}

.keuzes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .6rem;
}

/* min-width:0 verslaat de automatische minimumbreedte van een rastercel;
   zonder dat rekt een lange optie het keuzevak uit en schuift een buur weg */
.keuzes label { display: grid; gap: .2rem; min-width: 0; }

.keuzes span {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gedempt);
}

.keuzes select {
    padding: .45rem .5rem;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--achtergrond);
    color: var(--tekst);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
}

.keuzes select:disabled {
    color: var(--gedempt);
    cursor: not-allowed;
}

.vinkjes {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.vinkjes legend {
    float: left;
    width: 100%;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gedempt);
    padding: 0 0 .3rem;
}

.vinkje {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border: 1px solid var(--rand);
    border-radius: 999px;
    background: var(--achtergrond);
    cursor: pointer;
    font-size: .9rem;
}

.vinkje:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-zacht);
}

.vinkje.leeg { opacity: .4; cursor: not-allowed; }

/* leerwerkboeken zijn links in plaats van vinkjes */
a.vinkje { text-decoration: none; color: inherit; }
a.vinkje.aan { border-color: var(--accent); background: var(--accent-zacht); }
.vinkje em { color: var(--gedempt); font-style: normal; font-size: .8rem; }
.vinkje.ebg-E span { color: var(--ebg-e); font-weight: 700; }
.vinkje.ebg-B span { color: var(--ebg-b); font-weight: 700; }
.vinkje.ebg-G span { color: var(--ebg-g); font-weight: 700; }

/* ------------------------------------------------------------ resultaten -- */
.resultaatkop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.4rem 0 .4rem;
}

.telling { margin: 0; font-size: 1.05rem; }
.waarschuwing { color: var(--gedempt); font-size: .85rem; }
.acties { margin: 0; display: flex; gap: 1rem; font-size: .9rem; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }

.chip {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--accent-zacht);
    color: var(--accent);
    text-decoration: none;
    font-size: .85rem;
}

.niets { color: var(--gedempt); padding: 2rem 0; }

.doelen { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.doel {
    border: 1px solid var(--rand);
    border-radius: 9px;
    padding: .8rem 1rem;
}

.doelkop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .3rem;
}

.nr {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-weight: 700;
    text-decoration: none;
}

.nr.groot { font-size: 1.2rem; color: var(--gedempt); }

.badge {
    font-size: .75rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 4px;
    color: #fff;
}

.badge.ebg-E { background: var(--ebg-e); }
.badge.ebg-B { background: var(--ebg-b); }
.badge.ebg-G { background: var(--ebg-g); }
.badge.eigen { background: var(--gedempt); }

.jaar {
    font-size: .75rem;
    padding: .1rem .4rem;
    border: 1px solid var(--rand);
    border-radius: 4px;
    color: var(--gedempt);
}

.md {
    font-size: .78rem;
    color: var(--gedempt);
    margin-left: auto;
    font-family: ui-monospace, Consolas, monospace;
}

.doelzin { margin: .1rem 0 .25rem; font-size: 1.02rem; }
.pad { margin: 0; font-size: .82rem; color: var(--gedempt); }
.pad .scheider { margin: 0 .35rem; }

.codes {
    margin: .35rem 0 0;
    font-size: .8rem;
    color: var(--gedempt);
    font-family: ui-monospace, Consolas, monospace;
    display: flex;
    gap: .4rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.codes .ontbreekt { font-style: italic; font-family: inherit; }
.codes a.stil { color: inherit; text-decoration: none; margin-right: .6rem; }
.codes a.stil:hover { color: var(--accent); }

.lesdoelen { margin: .3rem 0 0; padding-left: 1.4rem; }
.lesdoelen li { margin-bottom: .2rem; }

.codelijst { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 0; }
.codelijst .chip { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.keuzes input[type=text] {
    padding: .45rem .5rem;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--achtergrond);
    color: var(--tekst);
    max-width: 100%;
}

details { margin-top: .6rem; }
summary { cursor: pointer; font-size: .87rem; color: var(--accent); }
details h4 { margin: .7rem 0 .2rem; font-size: .82rem; text-transform: uppercase; color: var(--gedempt); }

pre {
    margin: 0;
    white-space: pre-wrap;
    font: inherit;
    font-size: .93rem;
}

/* --------------------------------------------------------------- detail --- */
.terug {
    display: flex;
    justify-content: space-between;
    margin: .5rem 0 1rem;
    font-size: .9rem;
}

.buren { display: flex; gap: 1rem; }

.fiche {
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 1.2rem 1.4rem 1.6rem;
}

.fiche h1 { font-size: 1.35rem; margin: .3rem 0 .4rem; }
.fiche h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gedempt); margin: 1.6rem 0 .4rem; }

.kenmerken {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .2rem 1rem;
    margin: 1rem 0 0;
    font-size: .92rem;
}

.kenmerken dt { color: var(--gedempt); }
.kenmerken dd { margin: 0; }
.kenmerken .toelichting { color: var(--gedempt); font-size: .88rem; }

.leerlijn {
    background: var(--paneel);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: .9rem 1rem;
}

.verwijzingen { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .92rem; }
.verwijzingen li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }

.soort {
    font-size: .7rem;
    text-transform: uppercase;
    color: var(--gedempt);
    border: 1px solid var(--rand);
    border-radius: 3px;
    padding: 0 .3rem;
}

.verwijzingen .code { font-family: ui-monospace, Consolas, monospace; color: var(--gedempt); }
.verwijzingen .ontbreekt { color: var(--gedempt); font-style: italic; font-size: .85rem; }
.verwijzingen .jaren { color: var(--gedempt); font-size: .8rem; }

.eindtermen { margin-top: 1.6rem; }
.eindtermen pre { background: var(--paneel); border-radius: 8px; padding: .8rem 1rem; margin-top: .5rem; }

/* ---------------------------------------------------------------- print --- */
@media print {
    .kop, .voet, .paneel, .resultaatkop .acties, .chips, .terug { display: none; }
    .doel, .fiche { break-inside: avoid; border-color: #ccc; }
    details { display: block; }
    details > summary { display: none; }
    body { color: #000; background: #fff; }
}