.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-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-pagina :focus-visible { outline: 3px solid var(--fr-tekst); outline-offset: 3px; }
.werk-pagina [hidden] { display: none !important; }
@media (max-width: 760px) {
    .werk-item { padding: .85rem .85rem .75rem 1.05rem; }
}

/* Kop, borden en kaartjes in gewone taal (v014.11.676). */
.werk-bordsvg { display: block; flex: none; }
.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; }
/* 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; }
}

/* In de kaartpagina-indeling (kaartpagina.css): de kop is .pk-kop, de zoekbalk ligt op de kaart. */
.werk-legenda-paneel > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.werk-legenda-paneel[open] > summary { margin-bottom: .2rem; }
.werk-pagina .werk-toon { margin-top: .4rem; width: 100%; font-weight: 700; 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; cursor: pointer; }