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

.werk-kop h1 { margin: 0 0 .25rem; }
.werk-kop .werk-bron { margin: 0; font-size: .75rem; }
.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-kaartvak > p { margin: .65rem 0; font-size: .85rem; }
.werk-legenda { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8rem; }
.werk-kleur { display: inline-block; width: .85rem; height: .85rem; border: 1px solid currentColor; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
.werk-hinder-0 { background: #387d72; }.werk-hinder-1 { background: #6f8139; }.werk-hinder-2 { background: #b48a10; }
.werk-hinder-3 { background: #d66b20; }.werk-hinder-4 { background: #d04436; }.werk-hinder-5 { background: #943b83; }.werk-hinder-onbekend { background: #718096; }
.werk-lijst h2 { margin-top: 0; }
.werk-item { padding: 1.1rem; background: var(--fr-kaart); border: 1px solid var(--fr-rand); border-radius: var(--fr-hoek, 10px); margin-bottom: .8rem; overflow-wrap: anywhere; }
.werk-item h3 { font-size: 1.1rem; line-height: 1.35; margin: .4rem 0; }
.werk-item p { margin: .4rem 0; }
.werk-item summary { padding: .7rem 0; cursor: pointer; }
.werk-item dl, .werk-popup dl { margin: .6rem 0; }
.werk-item dd, .werk-popup dd { margin: 0 0 .5rem; }
.werk-kaartpopup .maplibregl-popup-content { background: var(--fr-kaart); color: var(--fr-tekst); padding: 1.3rem; border: 1px solid var(--fr-rand); max-height: 330px; overflow: auto; }
.werk-kaartpopup .maplibregl-popup-close-button { color: var(--fr-tekst); width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 50%; }
.werk-popup { font: .85rem/1.5 var(--fr-sans); overflow-wrap: anywhere; }
.werk-popup h3 { font-size: 1.1rem; padding-right: 1rem; }
.werk-popup p { margin: .4rem 0; }
.werk-popup summary { display: none; }
.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; }
.werk-legenda-paneel > summary { cursor: pointer; font-size: .85rem; }
.werk-paneel > .werk-bron { margin-bottom: 0; }
@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; }
}

#werkDetailPanel .werk-popup { color: var(--fr-tekst); min-width: 0; }
#werkDetailPanel .werk-popup dd { margin: 0 0 .6rem; }
#werkDetailPanel .werk-popup summary { display: none; }