.plein {
  --lucht-boven: #bfe0ee; --lucht-onder: #f1efe4;
  --plein-tekst: var(--zee-donker); --plein-zacht: #33545c; --plein-accent: #a8482a;
  --sc-ver: #a9cbb8; --sc-terp: #86b578; --sc-gebouw: #f6efe2; --sc-gebouw-2: #e9dcc6; --sc-dak: #b4523b;
  --sc-raam: #7fa6b3; --sc-boom: #3f7d3a; --sc-dijk: #5e9a50; --sc-zee: #0e4a5a; --sc-golf: rgba(255, 255, 255, .45);
  --sc-zon: #f2b33d; --sc-maan: #f4ecd2; --sc-wiek: #4a3b2c; --sc-zeil: #f7f4ee; --sc-schaap: #ffffff; --sc-kop: #2b2b2b;
  --sc-romp: #b3261e; --sc-meeuw: #33545c;
  --snel-bg: rgba(255, 255, 255, .72); --snel-bg-hover: #ffffff;
  position: relative; overflow: hidden; color: var(--plein-tekst);
  background: linear-gradient(180deg, var(--lucht-boven) 0%, var(--lucht-onder) 100%);
  padding-top: 26px;
}
.plein-ochtend { --lucht-boven: #f8d7b6; --lucht-onder: #d9ecef; --sc-zon: #f5a947; }
.plein-avond {
  --lucht-boven: #24325c; --lucht-onder: #e48a5c; --plein-tekst: #ffffff; --plein-zacht: #e6e0f0; --plein-accent: var(--zon);
  --sc-ver: #6d5878; --sc-terp: #4b5d4a; --sc-gebouw: #e3b99a; --sc-gebouw-2: #cf9f83; --sc-dak: #5d2a37; --sc-raam: #f6c453;
  --sc-boom: #2f4f35; --sc-dijk: #2e5a38; --sc-zee: #233a5c; --sc-zon: #f07c45; --sc-meeuw: #2a2440; --sc-wiek: #2b2230;
  --snel-bg: rgba(255, 255, 255, .14); --snel-bg-hover: rgba(255, 255, 255, .24);
}
.plein-nacht {
  --lucht-boven: #04161d; --lucht-onder: #0e4a5a; --plein-tekst: #ffffff; --plein-zacht: #c5dde2; --plein-accent: var(--zon);
  --sc-ver: #0f3540; --sc-terp: #0d3a33; --sc-gebouw: #164652; --sc-gebouw-2: #123c47; --sc-dak: #0a2a33; --sc-raam: #f6c453;
  --sc-boom: #0b2f2a; --sc-dijk: #0c3a2c; --sc-zee: #031820; --sc-golf: rgba(255, 255, 255, .18); --sc-wiek: #08222a; --sc-zeil: #1c4f5c;
  --sc-schaap: #c9d6d9; --sc-romp: #5c1914; --sc-meeuw: transparent;
  --snel-bg: rgba(255, 255, 255, .1); --snel-bg-hover: rgba(255, 255, 255, .2);
}
.plein-in { position: relative; z-index: 1; display: grid; gap: 22px; align-items: start; }
.plein-groet { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 14px; padding: 6px 14px 6px 10px;
  border-radius: 999px; background: var(--snel-bg); font-size: .88rem; font-weight: 600; color: var(--plein-tekst); }
.plein-groet-datum { font-weight: 400; color: var(--plein-zacht); }
.plein-groet-stip, .live-stip { width: 9px; height: 9px; border-radius: 50%; background: #3fbf6a; box-shadow: 0 0 0 0 rgba(63, 191, 106, .6);
  animation: plein-puls 2.2s ease-out infinite; flex: none; display: inline-block; }
.plein-titel { font: 700 clamp(2.35rem, 8.4vw, 4.6rem)/1.02 var(--font-kop); letter-spacing: -.02em; color: var(--plein-tekst); margin: 0 0 10px;
  font-variation-settings: 'SOFT' 50, 'WONK' 1; }
.plein-titel > span { display: block; }
.plein-titel-accent { color: var(--plein-accent); font-style: italic; }
.plein-onder { font: 600 clamp(1.1rem, 2.6vw, 1.4rem)/1.3 var(--font); margin: 0 0 8px; color: var(--plein-tekst); }
.plein-intro { color: var(--plein-zacht); font-size: 1.05rem; max-width: 54ch; }
.plein-intro p { margin: 0 0 6px; }

.plein-zoek { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; max-width: 560px; background: var(--wit); border-radius: 999px;
  padding: 6px 6px 6px 16px; box-shadow: 0 8px 28px rgba(8, 49, 60, .16); border: 1.5px solid transparent; }
.plein-zoek:focus-within { border-color: var(--zee); }
.plein-zoek > .ic { width: 20px; height: 20px; color: var(--tekst-zacht); flex: none; }
.plein-zoek input { flex: 1; min-width: 0; border: 0; background: none; font: 500 1rem var(--font); color: var(--tekst); min-height: 44px; padding: 0; }
.plein-zoek input:focus { outline: none; }
.plein-zoek .knop { flex: none; }

.plein-snel { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 620px; }
.plein-snel a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--snel-bg);
  color: var(--plein-tekst); font-weight: 700; text-decoration: none; transition: background .2s, transform .2s; }
.plein-snel a:hover { background: var(--snel-bg-hover); color: var(--plein-tekst); transform: translateY(-2px); }
.plein-snel-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--zon); color: var(--zee-donker); flex: none; }
.plein-snel-ic .ic { width: 20px; height: 20px; }

.wegwijzer { position: relative; background: var(--wit); color: var(--tekst); border-radius: 20px; padding: 18px 18px 16px;
  box-shadow: 0 18px 50px rgba(8, 49, 60, .22); }
.wegwijzer-kop { display: flex; align-items: center; gap: 8px; font: 700 1.25rem var(--font-kop); color: var(--zee-donker); margin: 0 0 10px; }
.wegwijzer-kop .ic { width: 22px; height: 22px; color: var(--dijk); }
.wegwijzer .dorpkeuze fieldset + fieldset legend { font-size: .92rem; }
.wegwijzer-borden { gap: 8px 6px; }
.wegwijzer-borden .chip-radio span { border-radius: 6px; border: 0; background: var(--zee-licht); color: var(--zee-donker); padding: 8px 26px 8px 12px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); transition: background .15s, transform .15s; }
.wegwijzer-borden .chip-radio:nth-child(even) span { transform: rotate(-1deg); }
.wegwijzer-borden .chip-radio span:hover { background: #cfe3e7; }
.wegwijzer-borden .chip-radio input:checked + span { background: var(--zee); color: var(--wit); }
.wegwijzer-borden .chip-radio input:focus-visible + span { outline: 0; background: var(--zon); color: var(--zee-donker); text-decoration: underline; text-underline-offset: 3px; }
.plein-tellers { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--rand); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.plein-tellers li, .plein-tellers a { display: flex; flex-direction: column; color: var(--tekst-zacht); font-size: .8rem; line-height: 1.25; text-decoration: none; }
.plein-tellers strong { font: 700 1.7rem/1.1 var(--font-kop); color: var(--zee-donker); font-variant-numeric: tabular-nums; }
.plein-tellers a:hover strong { color: var(--zee); text-decoration: underline; }

.plein-scene { position: relative; display: block; width: 100%; height: 130px; margin-top: 10px; }
.sc-ver { fill: var(--sc-ver); }
.sc-terp { fill: var(--sc-terp); }
.sc-gebouw, .sc-stelling { fill: var(--sc-gebouw); }
.sc-gebouw-2 { fill: var(--sc-gebouw-2); }
.sc-dak { fill: var(--sc-dak); }
.sc-raam { fill: var(--sc-raam); transition: fill 1s; }
.sc-boom { fill: var(--sc-boom); }
.sc-dijk { fill: var(--sc-dijk); }
.sc-zee { fill: var(--sc-zee); }
.sc-golf { fill: none; stroke: var(--sc-golf); stroke-width: 2; }
.sc-zon { fill: var(--sc-zon); }
.sc-maan { fill: var(--sc-maan); display: none; }
.sc-sterren { fill: #ffffff; display: none; }
.sc-wieken { fill: var(--sc-wiek); }
.sc-zeil { fill: var(--sc-zeil); opacity: .85; }
.sc-schaap ellipse { fill: var(--sc-schaap); }
.sc-kop { fill: var(--sc-kop); }
.sc-romp { fill: var(--sc-romp); }
.sc-kajuit { fill: #ffffff; }
.sc-mast { fill: var(--sc-wiek); }
.sc-touw { fill: none; stroke: var(--sc-wiek); stroke-width: 1.2; }
.sc-meeuw { fill: none; stroke: var(--sc-meeuw); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plein-nacht .sc-zon { display: none; }
.plein-nacht .sc-maan, .plein-nacht .sc-sterren { display: inline; }
.plein-avond .sc-zon { transform: translateY(70px); }
.plein-avond .sc-sterren { display: inline; opacity: .55; }
.plein-avond .sc-sterren circle:nth-child(n+5) { display: none; }

.sc-wieken { transform-box: fill-box; transform-origin: center; animation: plein-draai 16s linear infinite; }
.sc-golf { animation: plein-golf 7s linear infinite; }
.sc-kotter { transform-box: fill-box; transform-origin: 50% 100%; animation: plein-dobber 4.5s ease-in-out infinite; }
.sc-meeuwen { animation: plein-vlieg 14s ease-in-out infinite alternate; }
.sc-meeuw-2 { animation: plein-klap 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sc-schaap-2 .sc-kop { animation: plein-graas 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sc-sterren circle { animation: plein-twinkel 3s ease-in-out infinite; }
.sc-sterren circle:nth-child(odd) { animation-delay: 1.4s; }

@keyframes plein-puls { 0% { box-shadow: 0 0 0 0 rgba(63, 191, 106, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(63, 191, 106, 0); } }
@keyframes plein-draai { to { transform: rotate(360deg); } }
@keyframes plein-golf { to { transform: translateX(240px); } }
@keyframes plein-dobber { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(3px) rotate(1.5deg); } }
@keyframes plein-vlieg { to { transform: translate(60px, -10px); } }
@keyframes plein-klap { 50% { transform: scaleY(.6); } }
@keyframes plein-graas { 50% { transform: translateY(3px); } }
@keyframes plein-twinkel { 50% { opacity: .3; } }

.plein-band { background: var(--zee-donker); color: var(--wit); }
.plein-band-in { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.plein-band-kop { display: flex; align-items: center; gap: 8px; margin: 0; flex: none; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--zon); }
.plein-band-venster { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%); }
.plein-band-venster::-webkit-scrollbar { display: none; }
.plein-band-lijst { list-style: none; margin: 0; padding: 0 0 0 16px; display: flex; gap: 28px; width: max-content; }
.plein-band.is-rollend .plein-band-lijst { animation: plein-band var(--band-duur, 60s) linear infinite; }
.plein-band.is-rollend .plein-band-venster:hover .plein-band-lijst,
.plein-band.is-rollend .plein-band-venster:focus-within .plein-band-lijst,
.plein-band.is-stil .plein-band-lijst { animation-play-state: paused; }
.plein-band-lijst a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--wit); text-decoration: none; white-space: nowrap; font-weight: 600; font-size: .95rem; }
.plein-band-lijst a:hover { color: var(--zon); text-decoration: underline; }
.plein-band-label { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #d8ecef; }
.plein-band-waar { font-weight: 400; color: #a9c7cd; font-size: .85rem; }
.plein-band-pauze { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: none; color: var(--wit); cursor: pointer; display: grid; place-items: center; }
.plein-band-pauze:hover { background: rgba(255, 255, 255, .1); }
.plein-band-pauze:focus-visible { outline: 3px solid var(--zon); outline-offset: 2px; }
.plein-band-pauze-ic { width: 12px; height: 12px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.plein-band-pauze[aria-pressed="true"] .plein-band-pauze-ic { border: 0; width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
@keyframes plein-band { to { transform: translateX(-50%); } }

.vandaag-plein { padding: 18px 0 6px; }
.vp-tegels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vp-tegels a { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 64px; padding: 12px; background: var(--wit); border: 1px solid var(--rand);
  border-radius: 16px; text-decoration: none; color: var(--tekst); transition: transform .2s, box-shadow .2s, border-color .2s; }
.vp-tegels a:hover { transform: translateY(-3px); box-shadow: var(--schaduw); border-color: var(--zee); color: var(--tekst); }
.vp-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--zee-licht); color: var(--zee); flex: none; }
.vp-ic .ic { width: 24px; height: 24px; }
.vp-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.vp-titel { font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .vp-tegels a { flex-direction: column; align-items: flex-start; gap: 8px; }
  .vp-ic { width: 36px; height: 36px; }
}
.vp-tekst small { font-size: .8rem; color: var(--tekst-zacht); }
.vp-groot { font: 700 1.6rem/1 var(--font-kop); color: var(--zee-donker); }
.vp-weer a { background: linear-gradient(135deg, #fff6df 0%, #ffffff 70%); border-color: #f1d9a6; }
.vp-weer .vp-ic { background: var(--zon); color: var(--zee-donker); }
.vp-getij a { background: linear-gradient(135deg, var(--zee-licht) 0%, #ffffff 70%); }

.home-kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 16px; margin-bottom: 18px; }
.home-kop h2 { grid-column: 1; margin: 0; font-size: clamp(1.6rem, 4.2vw, 2.4rem); line-height: 1.1; letter-spacing: -.01em; }
.home-kop .meer, .home-kop .meer-rij { grid-column: 1 / -1; }
.home-bovenkop { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dijk); }
.home-bovenkop::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var(--zon); }

.omroeper { padding: 20px 0; }
.omroeper-kop { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin: 0 0 12px; }
.omroeper-bel { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--zon); color: var(--zee-donker); animation: plein-bel 3.5s ease-in-out 1s 2; }
.omroeper-bel .ic { width: 20px; height: 20px; }
.omroeper .belangrijk-lijst a { transition: transform .2s, box-shadow .2s; }
.omroeper .belangrijk-lijst a:hover { transform: translateX(4px); box-shadow: var(--schaduw); }
@keyframes plein-bel { 0%, 20%, 100% { transform: rotate(0); } 4% { transform: rotate(14deg); } 8% { transform: rotate(-12deg); } 12% { transform: rotate(8deg); } 16% { transform: rotate(-4deg); } }

.home-krant { padding-top: 34px; }
.nk { transition: transform .25s, box-shadow .25s; display: flex; flex-direction: column; }
.nk:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(8, 49, 60, .14); }
.nk-foto { display: block; overflow: hidden; }
.nk-foto img { transition: transform .6s; }
.nk:hover .nk-foto img { transform: scale(1.05); }
.home-krant .nk-groot .nk-titel { font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.15; }

.prikbord { padding: 34px 0 30px; }
.prik-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: thin; }
.prik-tabs[hidden] { display: none; }
.prik-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--rand);
  background: var(--wit); color: var(--tekst); font: 600 .92rem var(--font); cursor: pointer; transition: background .15s, border-color .15s; }
.prik-tab:hover { border-color: var(--zee); }
.prik-tab:focus-visible { outline: 3px solid var(--zon); outline-offset: 2px; }
.prik-tab[aria-pressed="true"] { background: var(--zee); border-color: var(--zee); color: var(--wit); }
.prik-tal { font-size: .75rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--zee-licht); color: var(--zee-donker); }
.prik-tab[aria-pressed="true"] .prik-tal { background: rgba(255, 255, 255, .2); color: var(--wit); }
.prik-bord { position: relative; padding: 26px 16px 8px; border-radius: 18px; border: 10px solid #8a5a32;
  background-color: #c79c68;
  background-image: radial-gradient(rgba(90, 55, 20, .28) 1px, transparent 1.6px), radial-gradient(rgba(255, 240, 210, .25) 1px, transparent 1.6px);
  background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px;
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .3), 0 10px 30px rgba(8, 49, 60, .12); }
.prik { position: relative; display: inline-block; width: 100%; vertical-align: top; break-inside: avoid; padding-top: 10px; margin: 0 0 14px; transform: rotate(var(--prik-draai, -1deg)); transition: transform .25s; }
.prik[hidden] { display: none; }
.prik:nth-child(3n+2) { --prik-draai: 1.2deg; }
.prik:nth-child(3n+3) { --prik-draai: -.4deg; }
.prik:nth-child(4n+4) { --prik-draai: .7deg; }
.prik::before { content: ''; position: absolute; z-index: 2; top: 2px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a7a 0 2px, #c62f22 4px, #7e1a12 100%); box-shadow: 0 3px 4px rgba(0, 0, 0, .35); }
.prik:nth-child(4n+2)::before { background: radial-gradient(circle at 35% 35%, #8ed1ff 0 2px, #1e6fb3 4px, #0d3e66 100%); }
.prik:nth-child(4n+3)::before { background: radial-gradient(circle at 35% 35%, #ffe08a 0 2px, #d79a12 4px, #85590a 100%); }
.prik:hover, .prik:focus-within { transform: rotate(0) translateY(-3px); z-index: 3; }
.prik .bk { border: 0; border-radius: 4px; box-shadow: 0 2px 3px rgba(0, 0, 0, .18), 0 12px 22px rgba(0, 0, 0, .14); background: #fffdf7; }
.prik[data-rubriek="hulp"] .bk { background: #fff3b8; }
.prik[data-rubriek="markt"] .bk { background: #e5f3dd; }
.prik[data-rubriek="gevonden"] .bk { background: #fde3da; }
.prik[data-rubriek="klusjes"] .bk { background: #e4edfb; }
.prik .bk-voet { border-top-color: rgba(0, 0, 0, .1); }
.prik-leeg { text-align: center; color: var(--tekst-zacht); }

.ar a { transition: transform .2s, border-color .2s, box-shadow .2s; }
.ar a:hover { transform: translateX(4px); box-shadow: var(--schaduw); }
.ar-datum { flex-direction: column-reverse; justify-content: flex-end; background: var(--wit); color: var(--zee-donker); border: 1px solid var(--rand); overflow: hidden;
  box-shadow: 0 2px 0 var(--rand); }
.ar-maand { width: 100%; margin: 0 0 4px; padding: 3px 0; text-align: center; background: var(--rood); color: var(--wit); font-size: .7rem; letter-spacing: .06em; }
.ar-dag { font-size: 1.5rem; }
.praat-mee { position: relative; border-radius: 22px; padding: 20px; border: 0; background: var(--wit); box-shadow: 0 10px 30px rgba(8, 49, 60, .1); }
.praat-mee::after { content: ''; position: absolute; left: 34px; bottom: -14px; border: 14px solid transparent; border-top-color: var(--wit); border-bottom: 0; }
.praat-mee .home-bovenkop { margin-bottom: 4px; }

.home-kaart { background: linear-gradient(180deg, var(--zand) 0%, var(--zee-licht) 100%); padding: 40px 0; }
.home-kaart-tal { display: flex; align-items: baseline; gap: 8px; color: var(--tekst-zacht); }
.home-kaart-tal strong { font: 700 2.2rem/1 var(--font-kop); color: var(--zee); }

.bankje { background: var(--zee-donker); color: #e1eef0; padding: 44px 0 40px; position: relative; overflow: hidden; }
.bankje::before { content: ''; position: absolute; inset: auto -10% -60px -10%; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .04); }
.bankje .home-kop h2 { color: var(--wit); }
.bankje .home-bovenkop { color: var(--zon); }
.bankje .meer { color: var(--wit); }
.bankje .meer:hover { color: var(--zon); }
.bankje-sage { position: relative; margin: 0 0 26px; padding: 26px 22px 22px 22px; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.bankje-sage::before { content: '\201C'; position: absolute; top: -18px; left: 14px; font: 700 6rem/1 var(--font-kop); color: var(--zon); opacity: .9; }
.bankje-label { margin: 0 0 8px; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #a9c7cd; }
.bankje-sage blockquote { margin: 0; }
.bankje-sage blockquote p { font: italic 400 clamp(1.15rem, 2.6vw, 1.5rem)/1.5 var(--font-kop); color: var(--wit); margin: 0 0 14px; max-width: 62ch; }
.bankje-sage figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.bankje-titel { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--zon); min-height: 44px; text-decoration: none; }
.bankje-titel:hover { color: var(--wit); text-decoration: underline; }
.bankje-titel .ic { width: 18px; height: 18px; }
.bankje-links { font-size: .92rem; color: #a9c7cd; }
.bankje-links a { color: #d8ecef; }
.bankje-links a:hover { color: var(--wit); }
.bankje .nk { border: 0; }

.winkelstraat .org-raster { gap: 16px; }
.org-kaart { position: relative; padding-top: 34px; border-radius: 10px 10px 14px 14px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.org-kaart:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(8, 49, 60, .14); }
.org-kaart::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 18px; background: repeating-linear-gradient(90deg, var(--luifel, var(--zee)) 0 16px, #ffffff 16px 32px); }
.org-kaart::after { content: ''; position: absolute; left: 0; right: 0; top: 18px; height: 8px;
  background: radial-gradient(circle at 8px 0, var(--luifel, var(--zee)) 7.5px, transparent 8px) 0 0 / 32px 8px repeat-x,
              radial-gradient(circle at 8px 0, #ffffff 7.5px, transparent 8px) 16px 0 / 32px 8px repeat-x; }
.org-raster > li:nth-child(4n+2) .org-kaart { --luifel: var(--dijk); }
.org-raster > li:nth-child(4n+3) .org-kaart { --luifel: var(--rood); }
.org-raster > li:nth-child(4n+4) .org-kaart { --luifel: #c98a12; }

.doe-mee { padding: 10px 0 40px; }
.doe-mee-in { display: grid; gap: 18px; padding: 26px 22px; border-radius: 24px; color: var(--zee-donker);
  background: linear-gradient(135deg, #ffd977 0%, var(--zon) 55%, #eea22b 100%); box-shadow: 0 16px 40px rgba(138, 91, 0, .18); }
.doe-mee h2 { margin: 0 0 6px; font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--zee-donker); }
.doe-mee p { margin: 0; }
.doe-mee-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.doe-mee-stappen a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .55); color: var(--zee-donker); text-decoration: none; transition: background .2s, transform .2s; }
.doe-mee-stappen a:hover { background: rgba(255, 255, 255, .85); color: var(--zee-donker); transform: translateX(4px); }
.doe-mee-stappen a > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.doe-mee-nr { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--zee-donker); color: var(--zon); font: 700 1.1rem var(--font-kop); }
.doe-mee-stappen small { color: #4a3d1c; font-size: .85rem; }
.doe-mee-knop { margin: 0; }
.doe-mee-knop .knop { background: var(--zee-donker); border-color: var(--zee-donker); color: var(--wit); }
.doe-mee-knop .knop:hover { background: var(--zee); border-color: var(--zee); color: var(--wit); }

html.js-onthul [data-onthul] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
html.js-onthul [data-onthul].is-onthuld { opacity: 1; transform: none; }
html.js-onthul .org-raster li:nth-child(2) { transition-delay: .06s; }
html.js-onthul .org-raster li:nth-child(3) { transition-delay: .12s; }
html.js-onthul .org-raster li:nth-child(4) { transition-delay: .18s; }
html.js-onthul .org-raster li:nth-child(5) { transition-delay: .24s; }
html.js-onthul .org-raster li:nth-child(6) { transition-delay: .3s; }
html.js-onthul .vp-tegels li:nth-child(2) { transition-delay: .05s; }
html.js-onthul .vp-tegels li:nth-child(3) { transition-delay: .1s; }
html.js-onthul .vp-tegels li:nth-child(4) { transition-delay: .15s; }
html.js-onthul .vp-tegels li:nth-child(5) { transition-delay: .2s; }
html.js-onthul .vp-tegels li:nth-child(6) { transition-delay: .25s; }

@media (min-width: 600px) {
  .plein-scene { height: 170px; margin-top: 0; }
  .plein-snel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plein-snel a { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; min-height: 92px; }
  .vp-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prik-bord { columns: 2; column-gap: 22px; padding: 30px 22px 10px; }
  .doe-mee-in { padding: 32px; }
}

@media (min-width: 900px) {
  .plein { padding-top: 44px; }
  .plein-in { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; }
  .plein-zij { padding-top: 8px; }
  .plein-scene { height: clamp(230px, 18vw, 380px); margin-top: -30px; }
  .home-kop { grid-template-columns: minmax(0, 1fr) auto; }
  .home-kop .meer, .home-kop .meer-rij { grid-column: 2; grid-row: 2; justify-self: end; }
  .home-krant-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-krant-raster .nk-groot { grid-column: span 2; grid-row: span 2; }
  .home-krant-raster .nk-groot .nk-foto img { aspect-ratio: 4 / 3; }
  .prik-bord { columns: 3; }
  .winkelstraat .org-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bankje-sage { padding: 34px 40px 28px; }
  .doe-mee-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 28px 40px; padding: 40px 44px; }
  .doe-mee-knop { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .vp-tegels { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .winkelstraat .org-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.plein-vandaag { max-width: 600px; margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--snel-bg); font-size: .95rem; line-height: 1.5; color: var(--plein-tekst); }
.plein-vandaag-kop { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--plein-accent); }
.plein-vandaag a { color: var(--plein-tekst); font-weight: 700; }
.plein-vandaag a:hover { color: var(--plein-accent); }

.sc-wolk { fill: #ffffff; opacity: .85; }
.sc-wolk-extra { display: none; }
.plein-wolken .sc-wolk-extra:nth-child(3),
.plein:is(.plein-bewolkt, .plein-regen, .plein-onweer, .plein-sneeuw) .sc-wolk-extra { display: inline; }
.plein:is(.plein-bewolkt, .plein-regen, .plein-sneeuw) .sc-wolk { fill: #d3dadc; }
.plein-onweer .sc-wolk { fill: #8f9a9e; }
.plein-avond .sc-wolk { fill: #f3bba3; opacity: .7; }
.plein-nacht .sc-wolk { fill: #1b4550; opacity: .75; }
.sc-wolken { animation: plein-wolken 70s ease-in-out infinite alternate; }
.plein:is(.plein-bewolkt, .plein-regen, .plein-onweer, .plein-mist, .plein-sneeuw) .sc-zon { opacity: .3; }
.plein:is(.plein-ochtend, .plein-middag):is(.plein-bewolkt, .plein-regen, .plein-onweer, .plein-mist) { --lucht-boven: #b8c6cb; --lucht-onder: #e6eae6; }
.plein:is(.plein-ochtend, .plein-middag).plein-sneeuw { --lucht-boven: #cfd8dc; --lucht-onder: #f4f6f6; }

.sc-regen { fill: none; stroke: rgba(14, 74, 90, .4); stroke-width: 1.6; stroke-linecap: round; animation: plein-regen .55s linear infinite; }
.plein:is(.plein-avond, .plein-nacht) .sc-regen { stroke: rgba(255, 255, 255, .45); }
.sc-sneeuw { fill: #ffffff; animation: plein-sneeuw 9s linear infinite; }
.sc-mist rect { fill: rgba(255, 255, 255, .5); }
.plein-nacht .sc-mist rect { fill: rgba(200, 220, 225, .18); }
.sc-mist rect:nth-child(odd) { animation: plein-mist 24s ease-in-out infinite alternate; }
.sc-mist rect:nth-child(even) { animation: plein-mist 30s ease-in-out infinite alternate-reverse; }
.sc-flits { fill: #ffffff; opacity: 0; pointer-events: none; animation: plein-flits 8s linear infinite; }
.plein-wind .sc-wieken { animation-duration: 5s; }
.plein-wind .sc-boom { transform-box: fill-box; transform-origin: 50% 100%; animation: plein-wuif 2.4s ease-in-out infinite alternate; }

.sc-getij { transition: transform 2s ease; }
.plein-getij-hoog .sc-getij { transform: translateY(-5px); }
.plein-getij-laag .sc-getij { transform: translateY(5px); }
.sc-zand { fill: #e4d2a0; }
.sc-zeehond { fill: #8e8a84; }
.plein-nacht .sc-zand { fill: #5d5a48; }
.plein-nacht .sc-zeehond { fill: #3f4547; }

.sc-sneeuwkap { fill: none; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sc-bloem-0 { fill: #f2b33d; } .sc-bloem-1 { fill: #e8708f; } .sc-bloem-2 { fill: #ffffff; }
.plein-nacht .sc-bloemen { opacity: .4; }
.sc-blad { fill: #d9822b; transform-box: fill-box; transform-origin: center; animation: plein-blad 7s ease-in infinite; opacity: 0; }
.sc-blad-1 { fill: #b5542f; } .sc-blad-2 { fill: #e8b04a; }
.sc-blad:nth-child(2) { animation-delay: 1.2s; } .sc-blad:nth-child(3) { animation-delay: 2.5s; } .sc-blad:nth-child(4) { animation-delay: 3.4s; }
.sc-blad:nth-child(5) { animation-delay: 4.6s; } .sc-blad:nth-child(6) { animation-delay: 5.3s; } .sc-blad:nth-child(7) { animation-delay: .6s; } .sc-blad:nth-child(8) { animation-delay: 6.1s; }
.sc-vlag-r { fill: #ae1c28; } .sc-vlag-w { fill: #ffffff; } .sc-vlag-b { fill: #21468b; } .sc-wimpel { fill: #f39200; }
.sc-vlaggetje { fill: #f39200; } .sc-vlaggetje-2 { fill: #ffffff; }

.sc-schaap, .sc-molen, .sc-kotter, .sc-hemel, .sc-zeehond { cursor: pointer; }
.sc-molen.is-snel .sc-wieken { animation-duration: .7s; }
.sc-schaap.is-spring, .sc-zeehond.is-spring { transform-box: fill-box; transform-origin: 50% 100%; animation: plein-spring .5s ease-out; }
.sc-ballon { opacity: 0; pointer-events: none; transition: opacity .2s; }
.sc-ballon.is-zichtbaar { opacity: 1; }
.sc-ballon rect, .sc-ballon path { fill: #ffffff; stroke: var(--zee-donker); stroke-width: 1.5; }
.sc-ballon text { font: 700 14px var(--font); fill: var(--zee-donker); }

@keyframes plein-wolken { to { transform: translateX(90px); } }
@keyframes plein-regen { to { transform: translateY(80px); } }
@keyframes plein-sneeuw { to { transform: translateY(100px); } }
@keyframes plein-mist { to { transform: translateX(120px); } }
@keyframes plein-flits { 0%, 90%, 92%, 94%, 100% { opacity: 0; } 91% { opacity: .6; } 93% { opacity: .4; } }
@keyframes plein-wuif { from { transform: rotate(-2.5deg); } to { transform: rotate(3deg); } }
@keyframes plein-blad { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(34px, 46px) rotate(260deg); } }
@keyframes plein-spring { 40% { transform: translateY(-10px); } 70% { transform: translateY(0); } 85% { transform: translateY(-3px); } }

.eiland-kaart { position: relative; width: 100%; max-width: 280px; aspect-ratio: 320 / 229; margin: 0 0 6px; border-radius: 12px; overflow: hidden; }
.eiland-kaart .kaart-venster { position: absolute; inset: 0; height: auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: none; pointer-events: none; }
.eiland-kaart .wk .l-dorp, .eiland-kaart .wk .l-gehucht, .eiland-kaart .kaart-namen, .eiland-kaart .wk .l-water, .eiland-kaart .wk .l-wad,
.eiland-kaart .wk .l-bos, .eiland-kaart .wk .l-buurt, .eiland-kaart .wk .l-plek, .eiland-kaart .wk .schild { display: none; }
.eiland-dorpen { position: absolute; inset: 0; width: 100%; height: 100%; }
.eiland-kaart.geladen .eiland-schets, .eiland-kaart:not(.geladen) .kaart-bron { display: none; }
.eiland-kaart .kaart-bron { position: absolute; top: auto; bottom: .25rem; left: auto; right: .4rem; font-size: .6rem; }
.eiland-kaart.geladen .eiland-dorp text { paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; }
.eiland-kaart.vliegt .eiland-dorp { opacity: 0; }
.eiland-dorp { transition: opacity .2s; }
.eiland-terug { position: absolute; left: .4rem; top: .4rem; z-index: 3; min-height: 40px; padding: 6px 14px; border: 2px solid #2b1d0e; border-radius: 999px;
  background: #fffdf6; color: #2b1d0e; font: 700 .8rem/1.2 var(--font); cursor: pointer; }
.eiland-terug[hidden] { display: none; }
.eiland-terug:focus-visible { outline: 3px solid var(--zon); outline-offset: 2px; }
.eiland-land { fill: #b5d867; stroke: #2f6b2a; stroke-width: 1.6; stroke-linejoin: round; }
.eiland-dijken { fill: none; stroke: #2f6b2a; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.eiland-zee-lijn { fill: none; stroke: #8a8478; stroke-width: 3; stroke-dasharray: 3 4; }
.eiland-water { font: italic 400 11px var(--font-kop); fill: #5f8790; }
.eiland-dijk { font-size: 9px; text-anchor: end; }
.eiland-dorp text { font: 700 11px var(--font); fill: var(--zee-donker); }
.eiland-stip { fill: var(--wit); stroke: var(--zee); stroke-width: 3; transition: fill .2s; }
.eiland-halo { fill: var(--zon); opacity: 0; transition: opacity .2s; }
.eiland-klik .eiland-dorp { cursor: pointer; }
.eiland-klik .eiland-dorp:hover .eiland-halo { opacity: .3; }
.eiland-dorp.is-actief .eiland-stip { fill: var(--zee); }
.eiland-dorp.is-actief .eiland-halo { opacity: .5; }
.dorpkeuze:not(:has(input[name="dorp"]:checked)) .dorpkeuze-meer { display: none; }

.voor-jou { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.voor-jou a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 12px; background: var(--zee-licht); color: var(--zee-donker); font-weight: 600; text-decoration: none; }
.voor-jou a:hover { background: #cfe3e7; color: var(--zee-donker); }
.voor-jou .ic { width: 20px; height: 20px; flex: none; color: var(--zee); }
.voor-jou span { min-width: 0; overflow-wrap: anywhere; }

.in-beeld-raster { display: grid; gap: 18px; }
.beeld-kaart { margin: 0; background: var(--wit); border: 1px solid var(--rand); border-radius: 18px; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.beeld-kaart:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(8, 49, 60, .14); }
.beeld-foto { position: relative; display: block; overflow: hidden; }
.beeld-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s; }
.beeld-kaart:hover .beeld-foto img { transform: scale(1.04); }
.beeld-toen .beeld-foto img { filter: sepia(.25); }
.beeld-label { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: var(--zee-donker); color: var(--wit); font-size: .78rem; font-weight: 700; }
.beeld-toen .beeld-label { background: #6b4f2a; }
.beeld-kaart figcaption { padding: 14px 16px 16px; display: grid; gap: 4px; justify-items: start; }
.beeld-kaart figcaption > a { display: inline-flex; align-items: center; min-height: 44px; font: 700 1.15rem/1.3 var(--font-kop); color: var(--zee-donker); text-decoration: none; }
.beeld-kaart figcaption > a:hover { text-decoration: underline; }
.beeld-kaart .klein { color: var(--tekst-zacht); }

.bankje-eiland { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bankje-eiland a { display: flex; align-items: center; gap: 10px; height: 100%; min-height: 56px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12); color: var(--wit); text-decoration: none; font-weight: 700; transition: background .2s; }
.bankje-eiland a:hover { background: rgba(255, 255, 255, .12); color: var(--wit); }
.bankje-eiland .ic { width: 22px; height: 22px; color: var(--zon); flex: none; }
.bankje-eiland span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.bankje-eiland small { font-weight: 400; font-size: .8rem; color: #a9c7cd; }

@media (max-width: 599px) {
  .plein-scene { width: 620px; height: 112px; left: 50%; transform: translateX(-50%); }
}
@media (min-width: 600px) {
  .eiland-kaart { max-width: 330px; }
  .in-beeld-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .bankje-eiland { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


.paginakop.plein { padding: 24px 0 0; }
.paginakop-in { position: relative; z-index: 1; }
.paginakop.plein h1 { color: var(--plein-tekst); font-size: clamp(2rem, 6.4vw, 3.4rem); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 10px; }
.paginakop.plein .bovenkop { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--snel-bg); color: var(--plein-tekst); }
.paginakop.plein .paginakop-tekst { color: var(--plein-zacht); }
.paginakop.plein .paginakop-tekst a, .paginakop-in > a:not(.knop), .paginakop-in p a:not(.knop) { color: var(--plein-tekst); }
.paginakop.plein .plein-scene { height: 96px; margin-top: 6px; }
.plein:is(.plein-avond, .plein-nacht) .paginakop-in .knop:not(.knop-geel):not(.knop-licht),
.plein:is(.plein-avond, .plein-nacht) .plein-strook-in .knop:not(.knop-geel):not(.knop-licht) { background: var(--wit); border-color: var(--wit); color: var(--zee-donker); }

.plein-strook.plein { padding-top: 10px; }
.plein-strook-in { position: relative; z-index: 1; }
.plein-strook .plein-scene { height: 70px; margin-top: 0; }
.plein-terug { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 16px 4px 10px; border-radius: 999px; background: var(--snel-bg);
  color: var(--plein-tekst); font-weight: 700; text-decoration: none; }
.plein-terug:hover { background: var(--snel-bg-hover); color: var(--plein-tekst); }
.plein-terug .ic { width: 18px; height: 18px; }

.veld-zoek input[type="search"] { padding-left: 40px; }

.chip, .tabs a { transition: background .15s, border-color .15s, transform .15s; }
.chip:hover, .tabs a:hover { border-color: var(--zee); transform: translateY(-1px); }

.bk { border-radius: 18px; transition: transform .25s, box-shadow .25s; }
.bk:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(8, 49, 60, .12); }
.bk-foto { display: block; overflow: hidden; }
.bk-foto img { transition: transform .6s; }
.bk:hover .bk-foto img { transform: scale(1.04); }
.nk { border-radius: 18px; }
.prik .bk:hover { transform: none; box-shadow: 0 2px 3px rgba(0, 0, 0, .18), 0 12px 22px rgba(0, 0, 0, .14); }

.blok-feed .feed > .kaarten { padding: 24px 14px 10px; gap: 22px; border-radius: 18px; border: 8px solid #8a5a32;
  background-color: #c79c68;
  background-image: radial-gradient(rgba(90, 55, 20, .28) 1px, transparent 1.6px), radial-gradient(rgba(255, 240, 210, .25) 1px, transparent 1.6px);
  background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px;
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .3), 0 10px 30px rgba(8, 49, 60, .1); }
.blok-feed .feed > .kaarten > .bk { position: relative; border: 0; border-radius: 4px; background: #fffdf7; transform: rotate(var(--prik-draai, -.6deg));
  box-shadow: 0 2px 3px rgba(0, 0, 0, .18), 0 12px 22px rgba(0, 0, 0, .14); }
.blok-feed .feed > .kaarten > .bk:nth-child(3n+2) { --prik-draai: .7deg; }
.blok-feed .feed > .kaarten > .bk:nth-child(3n+3) { --prik-draai: -.2deg; }
.blok-feed .feed > .kaarten > .bk:hover, .blok-feed .feed > .kaarten > .bk:focus-within { transform: rotate(0) translateY(-3px); z-index: 2; }
.blok-feed .feed > .kaarten > .bk::before { content: ''; position: absolute; z-index: 2; top: 7px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a7a 0 2px, #c62f22 4px, #7e1a12 100%); box-shadow: 0 3px 4px rgba(0, 0, 0, .35); }
.blok-feed .feed > .kaarten > .bk:nth-child(4n+2)::before { background: radial-gradient(circle at 35% 35%, #8ed1ff 0 2px, #1e6fb3 4px, #0d3e66 100%); }
.blok-feed .feed > .kaarten > .bk:nth-child(4n+3)::before { background: radial-gradient(circle at 35% 35%, #ffe08a 0 2px, #d79a12 4px, #85590a 100%); }
.blok-feed .feed > .kaarten > .bk-hulp { background: #fff3b8; }
.blok-feed .feed > .kaarten > .bk-markt { background: #e5f3dd; }
.blok-feed .feed > .kaarten > .bk-gevonden { background: #fde3da; }
.blok-feed .feed > .kaarten > .bk-klusjes { background: #e4edfb; }
.blok-feed .feed > .kaarten > .bk-ideeen { background: #f1e9fb; }
.blok-feed .feed > .kaarten .bk-voet { border-top-color: rgba(0, 0, 0, .1); }

.bk.is-opgelost { opacity: 1; }
.bk.is-opgelost .bk-foto img { filter: grayscale(.7); opacity: .85; }

.rk-hp { left: 0; clip-path: inset(50%); white-space: nowrap; }

.peiling-optie { min-height: 44px; align-items: center; }

.blokkop:not(.blokkop-klein)::before { content: ''; flex: none; width: 22px; height: 4px; border-radius: 2px; background: var(--zon); }

.voet { position: relative; margin-top: 48px; }
.voet::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 21px; pointer-events: none;
  background: radial-gradient(ellipse 42px 22px at 40px 22px, var(--zee-donker) 98%, transparent 100%) 0 0 / 80px 22px repeat-x; }

@media (min-width: 600px) {
  .paginakop.plein .plein-scene { height: 120px; }
  .plein-strook .plein-scene { height: 84px; }
}
@media (min-width: 900px) {
  .paginakop.plein { padding-top: 40px; }
  .paginakop.plein .plein-scene { height: clamp(150px, 16vw, 320px); margin-top: 0; }
  .plein-strook .plein-scene { height: clamp(96px, 10vw, 200px); margin-top: 0; }
}

html.lg-contrast .plein { --plein-zacht: var(--plein-tekst); }
html.lg-contrast :is(.prik-bord, .blok-feed .feed > .kaarten) { background-image: none; }

@media (prefers-reduced-motion: reduce) {
  .sc-wieken, .sc-golf, .sc-kotter, .sc-meeuwen, .sc-meeuw-2, .sc-schaap-2 .sc-kop, .sc-sterren circle,
  .plein-groet-stip, .live-stip, .omroeper-bel, .plein-band.is-rollend .plein-band-lijst,
  .sc-wolken, .sc-regen, .sc-sneeuw, .sc-mist rect, .sc-flits, .plein-wind .sc-boom, .sc-blad, .sc-schaap.is-spring, .sc-zeehond.is-spring { animation: none; }
  .sc-blad { opacity: 1; }
  .prik, .nk, .nk-foto img, .bk, .bk-foto img, .chip, .tabs a, .ar a, .vp-tegels a, .plein-snel a, .org-kaart, .beeld-kaart, .beeld-foto img, .sc-getij, .doe-mee-stappen a { transition: none; }
  html.js-onthul [data-onthul] { opacity: 1; transform: none; transition: none; }
}

:root { --zb-breed: 288px; --zb-smal: 76px; }
.zijbalk { position: fixed; z-index: 70; top: 0; bottom: 0; left: 0; width: min(88vw, 330px); display: flex; flex-direction: column; gap: 10px;
  padding: 14px 12px 12px; background: linear-gradient(180deg, var(--wit) 70%, #eef5f3 100%); border-right: 1px solid var(--rand);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  transform: translateX(-102%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
html.zb-open .zijbalk { transform: none; visibility: visible; transition: transform .28s ease; box-shadow: 0 0 60px rgba(8, 49, 60, .3); }
html.zb-open { overflow: hidden; }
.zb-scherm { position: fixed; inset: 0; z-index: 65; background: rgba(8, 49, 60, .45); }
.zb-scherm[hidden] { display: none; }

.zb-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 4px; }
.zb-merk { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--zee-donker); text-decoration: none; }
.zb-merk img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.zb-merk-tekst { display: flex; flex-direction: column; min-width: 0; }
.zb-naam { font: 700 1.15rem/1.1 var(--font-kop); }
.zb-slogan { font-size: .74rem; color: var(--tekst-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb-sluit { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--zee-licht); color: var(--zee-donker); cursor: pointer; }
.zb-sluit:hover { background: #cfe3e7; }

.zb-zoek { display: flex; align-items: center; gap: 6px; padding: 0 8px 0 12px; border-radius: 12px; background: var(--zand); border: 1.5px solid var(--rand); }
.zb-zoek:focus-within { border-color: var(--zee); background: var(--wit); }
.zb-zoek > .ic { width: 18px; height: 18px; color: var(--tekst-zacht); flex: none; }
.zb-zoek input[type="search"] { flex: 1; min-width: 0; min-height: 44px; padding: 8px 4px; border: 0; background: none; outline: none; }
.zb-zoek input[type="search"]:focus { outline: none; border: 0; }
.zb-toets { flex: none; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--rand); background: var(--wit);
  font: 700 .72rem var(--font); color: var(--tekst-zacht); }
.zb-zoek:focus-within .zb-toets { display: none; }
.zb-hint { margin: -4px 4px 0; font-size: .78rem; color: var(--tekst-zacht); }
.zb-hint[hidden] { display: none; }

.zb-plaatsen { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 12px 6px 8px; border-radius: 12px; background: var(--zon); color: var(--zee-donker);
  font-weight: 800; text-decoration: none; transition: background .15s, transform .15s; }
.zb-plaatsen:hover { background: #e3a223; color: var(--zee-donker); transform: translateY(-1px); }
.zb-plaatsen .zb-ic { background: rgba(255, 255, 255, .55); color: var(--zee-donker); }

.zb-nav { display: flex; flex-direction: column; gap: 4px; flex: 1 0 auto; }
.zb-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--zand); color: var(--zee); transition: background .15s, color .15s; }
.zb-ic .ic { width: 19px; height: 19px; }
.zb-link { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 8px; border-radius: 12px; color: var(--tekst);
  text-decoration: none; transition: background .15s; }
.zb-link:hover { background: var(--zee-licht); color: var(--tekst); }
.zb-link:hover .zb-ic { background: var(--wit); }
.zb-link:focus-visible, .zb-plaatsen:focus-visible, .zb-groep summary:focus-visible, .zb-klap:focus-visible { outline: 3px solid var(--zon); outline-offset: 1px; }
.zb-link[aria-current="page"] { background: var(--zee); color: var(--wit); }
.zb-link[aria-current="page"] .zb-ic { background: rgba(255, 255, 255, .14); color: var(--zon); }
.zb-link[aria-current="page"] .zb-uitleg { color: #cfe3e7; }
.zb-link.is-eerste { box-shadow: inset 0 0 0 2px var(--zon); }
.zb-tekst { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.22; }
.zb-label { font-weight: 700; font-size: .95rem; overflow-wrap: break-word; }
.zb-uitleg { font-size: .78rem; color: var(--tekst-zacht); overflow-wrap: break-word; }
.zb-extra { margin-left: auto; flex: none; padding: 2px 8px; border-radius: 999px; background: #fff3d6; color: var(--zon-donker); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.zb-link[aria-current="page"] .zb-extra { background: rgba(255, 255, 255, .16); color: var(--zon); }

.zb-groep { border-top: 1px solid var(--rand); padding-top: 4px; }
.zb-groep summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: 12px; cursor: pointer; list-style: none;
  font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--dijk); }
.zb-groep summary::-webkit-details-marker { display: none; }
.zb-groep summary:hover { background: var(--dijk-licht); }
.zb-groep summary .zb-ic { width: 26px; height: 26px; background: var(--dijk-licht); color: var(--dijk); }
.zb-groep summary .zb-ic .ic { width: 16px; height: 16px; }
.zb-tal { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--zand); color: var(--tekst-zacht); font-size: .7rem; letter-spacing: 0; }
.zb-pijl { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; margin: 0 4px 0 2px; }
.zb-groep[open] .zb-pijl { transform: rotate(45deg); }
.zb-groep ul { list-style: none; margin: 2px 0 6px; padding: 0; display: grid; gap: 2px; }
.zb-groep[open] ul { animation: zb-uitklap .22s ease; }
.zb-groep[hidden], .zb-groep li[hidden], .zb-link[hidden] { display: none; }
.zb-geen { margin: 8px; font-size: .88rem; color: var(--tekst-zacht); }
.zb-geen[hidden] { display: none; }
@keyframes zb-uitklap { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.zb-voet { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--rand); }
.zb-ik .avatar { width: 32px; height: 32px; }
.zb-ik .zb-ic { background: none; }
.zb-klap { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 5px 8px; border: 0; border-radius: 12px; background: none; color: var(--tekst-zacht);
  font: 600 .88rem var(--font); cursor: pointer; text-align: left; }
.zb-klap:hover { background: var(--zee-licht); color: var(--zee-donker); }

.kop-pad { display: none; flex-wrap: wrap; align-items: center; gap: 2px 0; min-width: 0; font-size: .9rem; color: var(--tekst-zacht); }
.kop-pad > * + *::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 8px; border-right: 1.6px solid var(--rand-veld); border-top: 1.6px solid var(--rand-veld); transform: rotate(45deg); }
.kop-pad a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tekst-zacht); text-decoration: none; }
.kop-pad a:hover { color: var(--zee); text-decoration: underline; }
.kop-pad [aria-current] { color: var(--zee-donker); font-weight: 700; }
@media (hover: none) { .zb-toets { display: none; } }

.zb-groep li { display: flex; align-items: center; gap: 2px; }
.zb-groep li > .zb-link { flex: 1; min-width: 0; }
.zb-pin { flex: none; display: grid; place-items: center; width: 32px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--rand-veld);
  cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, background .15s; }
.zb-pin[hidden] { display: none; }
.zb-pin .ic { width: 17px; height: 17px; }
.zb-groep li:hover .zb-pin, .zb-pin:focus-visible, .zb-pin[aria-pressed="true"] { opacity: 1; }
.zb-pin:hover { color: var(--zon-donker); background: var(--zand); }
.zb-pin:focus-visible { outline: 3px solid var(--zon); outline-offset: 1px; }
.zb-pin[aria-pressed="true"] { color: #c98a12; }
.zb-pin[aria-pressed="true"] .ic, .zb-mijn-kop .ic { fill: currentColor; }
@media (hover: none) { .zb-pin { opacity: .6; } }
.zb-mijn { border-top: 1px solid var(--rand); padding-top: 4px; }
.zb-mijn[hidden] { display: none; }
.zb-mijn-kop { display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0; padding: 2px 8px; font-size: .74rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--zon-donker); }
.zb-mijn-kop .zb-ic { width: 26px; height: 26px; background: #fff3d6; color: #c98a12; }
.zb-mijn-kop .ic { width: 16px; height: 16px; }
.zb-mijn ul { list-style: none; margin: 2px 0 6px; padding: 0; display: grid; gap: 2px; }

.zb-nieuw { margin-left: auto; flex: none; padding: 2px 8px; border-radius: 999px; background: var(--rood); color: var(--wit); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.zb-nieuw + .zb-extra { margin-left: 6px; }
.zb-groep-nieuw { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; border-radius: 10px; background: var(--rood);
  color: var(--wit); font-size: .7rem; letter-spacing: 0; }
.zb-groep-nieuw + .zb-tal { margin-left: 6px; }
@media (min-width: 1100px) {
  html.zb-smal .zb-pin, html.zb-smal .zb-mijn-kop { display: none; }
  html.zb-smal .zb-nieuw { position: absolute; top: 5px; right: 12px; width: 11px; height: 11px; padding: 0; overflow: hidden; color: transparent; border: 2px solid var(--wit); }
}

.kop-zoek { display: none; position: relative; flex: 1 1 260px; max-width: 440px; align-items: center; gap: 8px; margin: 0 8px; padding: 0 14px; border-radius: 999px;
  background: var(--zand); border: 1.5px solid var(--rand); }
.kop-zoek:focus-within { border-color: var(--zee); background: var(--wit); }
.kop-zoek > .ic { width: 18px; height: 18px; flex: none; color: var(--tekst-zacht); }
.kop-zoek input[type="search"] { flex: 1; min-width: 0; min-height: 42px; padding: 6px 2px; border: 0; background: none; outline: none; }
.kop-zoek input[type="search"]:focus { outline: none; border: 0; }
.kop-zoek-uit { position: absolute; z-index: 80; top: calc(100% + 8px); left: 0; right: 0; min-width: 320px; max-height: min(70vh, 480px); overflow-y: auto; padding: 8px;
  background: var(--wit); border: 1px solid var(--rand); border-radius: 16px; box-shadow: 0 18px 40px rgba(8, 49, 60, .18); }
.kop-zoek-uit[hidden] { display: none; }
.kop-zoek-groep { margin: 8px 10px 2px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dijk); }
.kop-zoek-uit ul { list-style: none; margin: 0; padding: 0; }
.kop-zoek-item { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: 10px; color: var(--tekst); text-decoration: none; }
.kop-zoek-item:hover, .kop-zoek-item:focus { background: var(--zee-licht); color: var(--tekst); }
.kop-zoek-item:focus-visible, .kop-zoek-alles:focus-visible { outline: 3px solid var(--zon); outline-offset: -2px; }
.kop-zoek-titel { font-weight: 700; overflow-wrap: anywhere; }
.kop-zoek-sub { font-size: .8rem; color: var(--tekst-zacht); }
.kop-zoek-alles { display: block; margin-top: 6px; padding: 12px 10px; border-top: 1px solid var(--rand); color: var(--zee); font-weight: 700; text-decoration: none; }
.kop-zoek-alles:hover { text-decoration: underline; }
@media (min-width: 900px) { .kop-zoek { display: flex; } }

@media (min-width: 900px) and (max-width: 1099px) {
  .menuknop { display: inline-flex; }
}

@media (min-width: 1100px) {
  body { padding-left: var(--zb-breed); }
  .zijbalk { z-index: 45; width: var(--zb-breed); transform: none; visibility: visible; box-shadow: none; transition: width .22s ease, padding .22s ease; }
  .zb-scherm { display: none !important; }
  .zb-sluit, .menuknop, .kop .merk { display: none !important; }
  .kop-in { justify-content: space-between; }
  .kop-pad { display: flex; }
  .kop-acties { margin-left: auto; }
  .zb-klap { display: flex; }
  .plein:not(.plein-strook) > .plein-scene, .paginakop.plein .plein-scene { height: auto; aspect-ratio: 1440 / 260; }
  .voet-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voet-merk { grid-column: 1 / -1; }

  html.zb-smal body { padding-left: var(--zb-smal); }
  html.zb-smal .zijbalk { width: var(--zb-smal); padding-inline: 10px; overflow-x: hidden; }
  html.zb-smal .zijbalk :is(.zb-tekst, .zb-merk-tekst, .zb-plaatsen .zb-label, .zb-klap .zb-label) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.zb-smal .zijbalk :is(.zb-extra, .zb-hint, .zb-geen, .zb-zoek, .zb-groep summary) { display: none; }
  html.zb-smal .zb-kop { justify-content: center; }
  html.zb-smal :is(.zb-link, .zb-plaatsen, .zb-klap) { justify-content: center; padding-inline: 0; }
  html.zb-smal .zb-groep { padding-top: 6px; }
  html.zb-smal .zb-klap .zb-ic .ic { transform: scaleX(-1); }
}

@media (min-width: 1500px) {
  .voet-in { grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); }
  .voet-merk { grid-column: auto; }
}
.voet a[href^="mailto:"] { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .zijbalk, html.zb-open .zijbalk, .zb-pijl, .zb-link, .zb-plaatsen { transition: none; }
  .zb-groep[open] ul { animation: none; }
}

html.lg-avond {
  color-scheme: dark;
  --zand: #0b1f25; --wit: #12303a; --tekst: #e8f1f2; --tekst-zacht: #a9c3c8; --rand: #2b4c55; --rand-veld: #7d9ca3;
  --zee: #8fd0de; --zee-donker: #e8f1f2; --zee-licht: #1c434d; --dijk: #a5dc98; --dijk-licht: #1d3d30;
  --zon-donker: #f2c76b; --rood: #ff8f80; --rood-licht: #3e2220;
}
html.lg-avond :is(.prik .bk, .blok-feed .feed > .kaarten > .bk, .knop-geel, .zb-plaatsen, .plein-snel-ic, .doe-mee-in, .vp-weer a, .omroeper .belangrijk-lijst a, .blok-belangrijk, .nk-advertentie, .ws-item, .melding) {
  --zand: #f7f4ee; --wit: #ffffff; --tekst: #1d2a2e; --tekst-zacht: #55666b; --rand: #dcd6ca; --rand-veld: #857f73;
  --zee: #0e4a5a; --zee-donker: #08313c; --zee-licht: #e3eff1; --dijk: #3a7435; --dijk-licht: #e6f1e3; --zon-donker: #8a5b00; --rood: #b3261e;
}
html.lg-avond :is(.prik .bk, .blok-feed .feed > .kaarten > .bk, .doe-mee-in, .vp-weer a, .omroeper .belangrijk-lijst a, .blok-belangrijk, .nk-advertentie, .ws-item, .melding) { color: var(--tekst); }
html.lg-avond :is(.label-voorbeeld, .beeld-label, .doe-mee-knop .knop) { color: #ffffff; }
html.lg-avond .kaart-bereik-titel { color: var(--tekst); }
html.lg-avond .beeld-label { background: #08313c; }
html.lg-avond .beeld-toen .beeld-label { background: #6b4f2a; }
html.lg-avond :is(.chip[aria-current], .tabs a[aria-current], .prik-tab[aria-pressed="true"], .chip-radio input:checked + span) { background: #1f5566; border-color: #1f5566; color: #ffffff; }
html.lg-avond .blok-belangrijk { background: #3a2e14; border-color: #5c4a1f; }
html.lg-avond .blok-belangrijk .omroeper-kop { color: #f6e7c4; }
html.lg-avond .vp-weer a { background: #fff6df; }
html.lg-avond .vp-getij a { background: var(--zee-licht); }
html.lg-avond :is(.voet, .plein-band, .bankje) { background: #061a20; }
html.lg-avond .voet::before { background: radial-gradient(ellipse 42px 22px at 40px 22px, #061a20 98%, transparent 100%) 0 0 / 80px 22px repeat-x; }
html.lg-avond .bankje .nk { --wit: #12303a; }
html.lg-avond .zijbalk { background: linear-gradient(180deg, var(--wit) 70%, #0e2a32 100%); }
html.lg-avond .zb-link[aria-current="page"] { background: #1f5566; color: #ffffff; }
html.lg-avond .zb-link[aria-current="page"] .zb-extra { background: #0e2a32; color: #f2c76b; }
html.lg-avond .plein-band-lijst a { color: #ffffff; }
html.lg-avond .plein-band-lijst a:hover { color: var(--zon); }
html.lg-avond .vd-regen { color: #9fd0ff; }
html.lg-avond :is(.zb-nieuw, .zb-groep-nieuw) { background: #c0392b; color: #ffffff; }
html.lg-avond .zb-extra { background: #3a2e14; color: #f2c76b; }
html.lg-avond .zb-mijn-kop .zb-ic { background: #3a2e14; }
html.lg-avond img { filter: brightness(.92); }
html.lg-avond .plein {
  --lucht-boven: #04161d; --lucht-onder: #0e4a5a; --plein-tekst: #ffffff; --plein-zacht: #c5dde2; --plein-accent: var(--zon);
  --sc-ver: #0f3540; --sc-terp: #0d3a33; --sc-gebouw: #164652; --sc-gebouw-2: #123c47; --sc-dak: #0a2a33; --sc-raam: #f6c453;
  --sc-boom: #0b2f2a; --sc-dijk: #0c3a2c; --sc-zee: #031820; --sc-golf: rgba(255, 255, 255, .18); --sc-wiek: #08222a; --sc-zeil: #1c4f5c;
  --sc-schaap: #c9d6d9; --sc-romp: #5c1914; --sc-meeuw: transparent; --snel-bg: rgba(255, 255, 255, .1); --snel-bg-hover: rgba(255, 255, 255, .2);
}
html.lg-avond .plein .sc-zon { display: none; }
html.lg-avond .plein :is(.sc-maan, .sc-sterren) { display: inline; }
html.lg-avond .wegwijzer { --wit: #12303a; }

.sc-sluis { fill: var(--sc-sluis, #a3adac); }
.sc-sluis-kap { fill: var(--sc-sluis-kap, #6f7b7c); }
.sc-toren-wit { fill: var(--sc-toren-wit, #f7f4ee); }
.sc-toren-rood { fill: var(--sc-toren-rood, #b3261e); }
.sc-lamp { fill: #fff3c4; }
.sc-giek { fill: none; stroke: var(--sc-wiek); stroke-width: 2; stroke-linecap: round; }
.sc-net { fill: rgba(255, 255, 255, .25); stroke: var(--sc-wiek); stroke-width: 1; stroke-linejoin: round; }
.sc-vuurtoren { cursor: pointer; }
.plein-avond { --sc-sluis: #8a7a8c; --sc-sluis-kap: #5a4a5e; --sc-toren-wit: #e3b99a; --sc-toren-rood: #7a2a2a; }
.plein-nacht, html.lg-avond .plein { --sc-sluis: #1f4650; --sc-sluis-kap: #0f2f38; --sc-toren-wit: #2a5560; --sc-toren-rood: #4a1a18; }
.plein:is(.plein-avond, .plein-nacht) .sc-lamp, html.lg-avond .plein .sc-lamp { fill: #ffd86b; filter: drop-shadow(0 0 4px #ffd86b); animation: plein-lamp 4s ease-in-out infinite; }
.sc-vuurtoren.is-aan .sc-lamp { fill: #ffd86b; filter: drop-shadow(0 0 6px #ffd86b); }
@keyframes plein-lamp { 0%, 100% { opacity: 1; } 45% { opacity: .35; } 55% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sc-lamp { animation: none !important; } }

@media print {
  .plein-scene, .plein-strook, .plein-band, .zijbalk, .zb-scherm { display: none !important; }
  body { padding-left: 0 !important; }
  .plein { background: none !important; color: #000; padding-top: 0; }
  .paginakop.plein h1, .paginakop.plein .paginakop-tekst { color: #000; }
  .voet::before { content: none; }
}
.zb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:where(.zijbalk) svg.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }