.werk-pagina { position: relative; color: var(--fr-tekst); font-family: var(--fr-sans); min-width: 0; width: 100%; }
.werk-pagina *, .werk-pagina *::before { box-sizing: border-box; }
.werk-kop { padding-right: 3.5rem; margin-bottom: 1rem; }

.werk-kop h1 { margin: 0 0 .25rem; }
.werk-bron, .werk-uitleg, .werk-meta { font-size: .85rem; line-height: 1.5; }
.werk-bron, .werk-uitleg { color: var(--fr-stil); }
.werk-melding { padding: 1rem; border-left: 4px solid #b48a10; background: var(--fr-kaart); }
.werk-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-bottom: 1.25rem; }
.werk-filters .werk-zoek { display: grid; gap: .35rem; font-size: .85rem; flex: 1 1 15rem; min-width: 0; }
.werk-filters input[type="search"], .werk-pagina button { min-height: 44px; padding: .6rem .8rem; border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek-klein, 6px); background: var(--fr-kaart); color: var(--fr-tekst); font: inherit; max-width: 100%; }
.werk-pagina button { cursor: pointer; }
.werk-pagina :focus-visible { outline: 3px solid var(--fr-tekst); outline-offset: 3px; }
.werk-indeling { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.werk-kaartvak, .werk-lijst { min-width: 0; }
.werk-kaart { height: 540px; background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek, 10px); overflow: hidden; }
.werk-lijst h2 { margin-top: 0; }
.werk-pagina [hidden] { display: none !important; }
.werk-instellingen { margin-bottom: 1rem; }
.werk-instellingen > summary { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center; list-style: none; border: 1px solid var(--fr-rand); border-radius: 50%; background: var(--fr-kaart); cursor: pointer; }
.werk-instellingen > summary::-webkit-details-marker { display: none; }
.werk-instellingen[open] > summary { background: var(--fr-tekst); color: var(--fr-kaart); }
.werk-paneel { padding: 1rem; border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek, 10px); background: var(--fr-kaart); }
.werk-perioden { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.werk-perioden legend { padding: 0; margin-bottom: .35rem; font-size: .85rem; }
.werk-pil { position: relative; cursor: pointer; }
.werk-pil input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.werk-pil span { display: flex; align-items: center; gap: .3rem; min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--fr-rand); border-radius: 999px; font-size: .85rem; }
.werk-pil input:checked + span { background: var(--fr-tekst); color: var(--fr-kaart); border-color: var(--fr-tekst); }
.werk-pil input:focus-visible + span { outline: 3px solid var(--fr-tekst); outline-offset: 3px; }
.werk-pil small { font-size: .75rem; }
@media (max-width: 760px) {
    .werk-kop h1 { font-size: 1.4rem; line-height: 1.3; }
    .werk-indeling { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .werk-kaart { height: clamp(340px, 55svh, 520px); }
    .werk-instellingen:not([open]) { margin: 0; }
    .werk-filters .werk-zoek { flex-basis: 100%; }
    .werk-item { padding: .85rem .85rem .75rem 1.05rem; }
}

/* Kop, borden en kaartjes in gewone taal (v014.11.676). */
.werk-ondertitel { margin: 0; color: var(--fr-stil); font-size: .95rem; }
.werk-kaartmelding { margin: .6rem 0; font-size: .9rem; color: var(--fr-stil); }
.werk-bordsvg { display: block; flex: none; }
.werk-legenda-paneel { margin: .25rem 0 1rem; padding: .2rem 1rem; border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek, 10px); background: var(--fr-kaart); }
.werk-legenda-paneel > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.werk-legenda { list-style: none; padding: 0; margin: .4rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .7rem 1rem; }
.werk-legenda li { display: flex; align-items: center; gap: .6rem; font-size: .85rem; line-height: 1.3; }
.werk-legenda li span { display: grid; color: var(--fr-stil); }
.werk-legenda li strong { color: var(--fr-tekst); }
.werk-aantal { margin: 0 0 .7rem; color: var(--fr-stil); font-size: .9rem; }
.werk-item { position: relative; padding: 1rem 1rem .9rem 1.2rem; background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek, 10px); margin-bottom: .8rem; overflow: hidden; overflow-wrap: anywhere; }
.werk-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: #e0b000; }
.werk-ernst-rood::before { background: #d0021b; }
.werk-ernst-oranje::before { background: #ee7b00; }
.werk-kopregel { display: flex; align-items: center; gap: .8rem; }
.werk-inhoud h3 { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.werk-waar { margin: .15rem 0 0; color: var(--fr-stil); font-size: .9rem; }
.werk-merk { margin: .7rem 0 .5rem; font-size: 1rem; line-height: 1.45; }
.werk-feiten { margin: 0; display: grid; gap: .3rem; font-size: .9rem; line-height: 1.4; }
.werk-feiten div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem; }
.werk-feiten dt { color: var(--fr-stil); }
.werk-feiten dd { margin: 0; }
.werk-omleiding { display: flex; align-items: center; gap: .55rem; margin: .6rem 0 0; font-size: .9rem; font-weight: 600; }
.werk-meer { margin-top: .4rem; font-size: .85rem; line-height: 1.5; }
.werk-meer > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--fr-stil); }
.werk-meer p { margin: .3rem 0; }
.werk-pagina .werk-toon { margin-top: .4rem; width: 100%; font-weight: 700; }
/* Hetzelfde kaartje in het venster op de kaart en in het paneel op de telefoon. */
.werk-popup { color: #1b1f24; font: .9rem/1.45 var(--fr-sans, system-ui, sans-serif); max-width: 320px; overflow-wrap: anywhere; }
.werk-popup .werk-waar, .werk-popup .werk-feiten dt, .werk-popup .werk-meer > summary { color: #5b6470; }
/* Het Google-venster is altijd wit: de kop krijgt een vaste donkere kleur, ook als de site in de donkere stand staat. */
html body .werk-popup h3 { color: #1b1f24; }
#werkDetailPanel .werk-popup h3 { color: var(--fr-tekst); }
.werk-popup .werk-meer { display: none; }
.werk-popup .werk-merk { font-size: .95rem; }
@media (max-width: 760px) { .werk-popup { max-width: 260px; } .werk-popup .werk-bordsvg { width: 40px; height: 40px; } }
#werkDetailPanel .werk-popup { color: var(--fr-tekst); max-width: none; }
#werkDetailPanel .werk-popup .werk-waar, #werkDetailPanel .werk-popup .werk-feiten dt { color: var(--fr-stil); }
#werkDetailPanel .werk-popup .werk-meer { display: block; }
@media (max-width: 760px) {
    .werk-legenda { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .werk-legenda li { font-size: .8rem; }
}