.dc-fotomenu {
  margin: clamp(20px, 3vw, 36px) 0 28px;
  padding-top: 18px;
  border-top: 3px solid #f0ad2a;
}
.dc-fotomenu h2 {
  margin: 0 0 16px;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.12;
}
.dc-fotomenu-raster {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.dc-fotomenu .dc-fototegel {
  display: block;
  min-width: 0;
  color: #01224b;
  text-decoration: none;
  border: 1px solid #d2d2c8;
  background: #fffef9;
  border-radius: 5px;
  overflow: hidden;
}
.dc-fototegel img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
}
.dc-fototegel .dc-tegelnaam {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 9px 10px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.25;
  font-weight: 650;
}
.dc-tegelnaam > span { color: #815e0a; }
.dc-fotomenu .dc-fototegel:hover { border-color: #957121; }
.dc-fotomenu .dc-fototegel:focus-visible, .dc-detailbeeld summary:focus-visible {
  outline: 3px solid #01224b;
  outline-offset: 3px;
}
@media (max-width: 859px) {
  .dc-fotomenu-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .dc-fotomenu-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dc-fototegel .dc-tegelnaam { padding: 7px 8px; }
}
.dc-guide .dc-detailbeeld {
  max-width: 480px;
  margin: 4px 0 10px;
  padding: 0;
  border: 0;
}
.dc-guide .dc-detailbeeld summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  box-sizing: border-box;
  color: #123252;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  list-style: none;
}
.dc-detailbeeld summary::-webkit-details-marker { display: none; }
.dc-guide .dc-detailbeeld summary::before {
  content: "";
  width: 19px;
  height: 19px;
  flex: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301224b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='m15 15 6 6M7.5 10h5M10 7.5v5'/%3E%3C/svg%3E");
}
.dc-guide .dc-detailbeeld[open] summary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301224b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='m15 15 6 6M7.5 10h5'/%3E%3C/svg%3E");
}
.dc-detailbeeld summary:hover { text-decoration: underline; }
.dc-guide .dc-detailbeeld figure { margin: 0 0 14px; }
.dc-guide .dc-detailbeeld img { display: block; width: 100%; height: auto; border-radius: 4px; }
.dc-guide .dc-detailbeeld figcaption { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: #344b5e; }
.dc-guide :is(h2,h3,section,article)[id] { scroll-margin-top: 82px; }

.dc-detailbeeld:not([open]) .dc-sluit, .dc-detailbeeld[open] .dc-bekijk { display: none; }

.dc-guide .dc-detailbeeld .dc-foto-openen {
  position: relative; display: block; width: 100%; padding: 0; margin: 0;
  color: #01224b; font: inherit; background: transparent; border: 0; cursor: zoom-in;
}
.dc-foto-openen > span {
  position: absolute; top: 9px; left: 9px; display: inline-flex; align-items: center;
  padding: 5px 10px; border: 1px solid #c4c2b6; border-radius: 3px;
  background: #fbfaf3; color: #01224b; font-size: 13px; line-height: 1.3; font-weight: 650;
}
.dc-foto-openen:focus-visible, .dc-beeldvenster :focus-visible { outline: 3px solid #cca020; outline-offset: 2px; }
html.dc-beeld-open { overflow: hidden; }
dialog.dc-beeldvenster {
  box-sizing: border-box; width: min(94vw, 960px); height: min(91vh, 800px); height: min(91dvh, 800px);
  max-width: 100vw; max-height: 100dvh; margin: auto; padding: 0;
  border: 1px solid #d0cec2; border-radius: 8px; color: #01224b; background: #fbfaf3;
}
.dc-beeldvenster[open] { display: flex; flex-direction: column; overflow: hidden; }
.dc-beeldvenster::backdrop { background: rgba(5, 19, 30, .76); }
.dc-beeldvenster .dc-beeldkop, .dc-beeldvenster .dc-beeldvoet { flex: none; padding: 12px 18px; background: #fbfaf3; }
.dc-beeldvenster .dc-beeldkop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dc-beeldkop small { display: block; color: #71520e; font: 650 11px/1.1 system-ui,sans-serif; letter-spacing: .12em; }
.dc-beeldvenster h2 { margin: 4px 0 0; color: #01224b; font-size: clamp(18px, 2.1vw, 25px); line-height: 1.1; }
.dc-beeldvenster button { font: inherit; font-size: 14px; font-weight: 650; min-height: 44px; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
.dc-beeldsluit { flex-shrink: 0; color: #01224b; background: #fffef8; border: 1px solid #bab9ac; }
.dc-beeldzoom { color: #01224b; background: #f0ad2a; border: 1px solid #d49c28; }
.dc-beeldvenster .dc-beeldvlak {
  min-height: 0; flex: 1 1 0; overflow: auto; overscroll-behavior: contain; background: #151f25;
}
.dc-beeldmat { width: 100%; height: 100%; display: grid; place-items: center; }
.dc-beeldvenster .dc-beeldmat img { display: block; max-width: none; max-height: none; height: auto; cursor: zoom-in; }
.dc-ingezoomd .dc-beeldmat img { cursor: zoom-out; }
.dc-beeldvenster .dc-beeldtekst { margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
.dc-beeldacties { display: flex; gap: 10px; align-items: center; }
.dc-beeldhint { color: #46555a; font: 400 13px/1.35 system-ui,sans-serif; }
@media (max-width: 620px) {
  dialog.dc-beeldvenster { width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
  .dc-beeldvenster .dc-beeldkop, .dc-beeldvenster .dc-beeldvoet { padding: 10px 12px; }
  .dc-beeldvenster .dc-beeldvoet { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .dc-beeldzoom { flex-shrink: 0; }
}
@media (max-height: 380px) {
  .dc-beeldvenster .dc-beeldkop, .dc-beeldvenster .dc-beeldvoet { padding: 4px 10px; }
  .dc-beeldkop small, .dc-beeldhint { display: none; }
  .dc-beeldvenster .dc-beeldvoet { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
  .dc-beeldvenster .dc-beeldtekst { margin: 0; }
}

.dc-guide .dc-tiproutes { display:flex; flex-wrap:wrap; align-items:flex-start; column-gap:18px; margin:10px 0 14px; border-top:1px solid #d8d7cf; }
.dc-guide .dc-tip-terug,.dc-guide .dc-tipdelen summary { display:inline-flex; align-items:center; min-height:44px; gap:5px; color:#01224b; font:650 14px/1.4 system-ui,sans-serif; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.dc-guide details.dc-tipdelen { max-width:100%; min-width:0; padding:0; margin:0; border:0; }
.dc-tipdelen summary::-webkit-details-marker { display:none; }
.dc-guide .dc-deelvak { box-sizing:border-box; width:min(100%,340px); padding:11px; background:#f3f1e7; border-radius:4px; }
.dc-deelvak label,.dc-deelvak label span { display:block; font-size:14px; color:#01224b; }
.dc-guide .dc-deelvak input { box-sizing:border-box; width:100%; margin:4px 0; padding:6px; font:inherit; font-size:14px; color:#01224b; background:white; border:1px solid #a2aaab; }
.dc-deelacties { display:flex; flex-wrap:wrap; gap:0 12px; align-items:center; }
.dc-guide .dc-deelacties > * { display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; color:#01224b; background:transparent; text-decoration:underline; cursor:pointer; font:650 14px/1.4 system-ui,sans-serif; }
.dc-guide .dc-deelacties > [hidden] { display:none; }
.dc-deelvak [role=status] { font-size:14px; }

.dc-andere-plek{margin:.25rem 0 .75rem;font-size:.95rem;line-height:1.5}
.dc-andere-plek a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.18em}
.dc-andere-plek small{white-space:nowrap}
.dc-doeklabel{scroll-margin-top:5rem;max-width:42rem;margin:.8rem 0 1.2rem;padding:.2rem 1rem .65rem;border:1px solid #d5d6ce;border-radius:5px;background:#fbfaf3;color:#092846}
.dc-doeklabel summary{font-weight:650;cursor:pointer;padding:.75rem 0}
.dc-doeklabel p,.dc-doeklabel figure{margin:.65rem 0}
.dc-doeklabel small,.dc-doeklabel figcaption{font-size:.85rem;line-height:1.45}
.dc-labelbeeld{position:relative;width:min(100%,330px);margin-bottom:.45rem}
.dc-labelbeeld img,.dc-labelbeeld svg{width:100%;height:auto;display:block}
.dc-labelbeeld svg{position:absolute;inset:0;pointer-events:none}
.dc-tiproutes .dc-bewaartip,.dc-labelroute a{min-height:44px;display:inline-flex;align-items:center;text-underline-offset:.18em;font-size:.94rem}