/* camzapper.nl (#31767): statische pagina's. Tokens en regels: design.md */
@font-face{font-family:"Bricolage";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Unbounded";src:url(/fonts/unbounded.woff2) format("woff2");font-weight:200 900;font-display:swap}
:root{--nacht:#07080A;--inkt:#111317;--lijn:#23262C;--krijt:#F3F1EA;--mist:#9A9DA3;--zap:#FF4A1C;--signaal:#3CFFA0;--onzeker:#FFC21A;--stil:#5B5F66;
  --sa-t:env(safe-area-inset-top,0px);--sa-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--nacht);color:var(--krijt)}
body{font:400 15px/1.5 "Bricolage",ui-serif,serif;-webkit-font-smoothing:antialiased;min-height:100dvh;display:flex;flex-direction:column}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--krijt);text-underline-offset:3px;text-decoration-color:var(--stil)}
a:hover{text-decoration-color:var(--krijt)}
:focus-visible{outline:2px solid var(--krijt);outline-offset:2px}
small{color:var(--mist);font-size:13px}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
pre{background:var(--inkt);border:1px solid var(--lijn);padding:12px 14px;border-radius:12px;overflow-x:auto;margin:8px 0 12px}

.pkop{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(10px + var(--sa-t)) 16px 10px;background:var(--nacht);border-bottom:1px solid var(--lijn)}
.merk{white-space:nowrap;font:700 22px/1 "Unbounded",sans-serif;letter-spacing:-.04em;text-transform:lowercase;text-decoration:none}
.merk::after{content:"";display:inline-block;width:8px;height:8px;margin-left:4px;border-radius:50%;background:var(--zap);vertical-align:2px}
.naar-kaart{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:600}

.pag{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:12px 16px 40px}
.pag>p,.camkop>p:not(.meta):not(.acties):not(.waar){max-width:62ch}
h1{font:600 28px/1.12 "Unbounded",sans-serif;letter-spacing:-.03em;margin:4px 0 8px;overflow-wrap:anywhere}
h2{font:700 19px/1.25 "Bricolage",ui-serif,serif;margin:28px 0 10px}
h2 small{font-weight:400}
.pag>p{margin-bottom:12px}
.intro{color:var(--mist);font-size:16px}
.kruimel ol{display:flex;flex-wrap:wrap;gap:0 6px;list-style:none;font-size:13px;color:var(--mist);padding:4px 0 8px}
.kruimel li+li::before{content:"/";margin-right:6px;color:var(--stil)}
.kruimel a{color:var(--mist);display:inline-block;padding:6px 0}

.status{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px}
.status::before{content:"";width:8px;height:8px;border-radius:50%}
.status.s{color:var(--signaal)}.status.s::before{background:var(--signaal)}
.status.o{color:var(--onzeker)}.status.o::before{background:var(--onzeker)}
.meta{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--mist);font-size:13px;font-variant-numeric:tabular-nums}
.waar{color:var(--mist);margin-bottom:12px}
.groot{margin:0 -16px 12px;background:var(--inkt)}
.groot img{display:block;width:100%;height:auto;max-height:70dvh;object-fit:contain;background:var(--nacht)}
.groot figcaption{padding:8px 16px;color:var(--mist);font-size:13px}
.verlegen{display:flex;flex-direction:column;gap:4px;justify-content:center;min-height:200px;padding:24px 16px;background-image:repeating-linear-gradient(135deg,var(--inkt) 0 8px,var(--nacht) 8px 16px)}
.verlegen span{color:var(--mist)}
.acties{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.knop{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:12px;font-weight:700;text-decoration:none}
.klikuit{background:var(--zap);color:var(--nacht)}
.rand{border:1px solid var(--stil);color:var(--krijt)}
.feiten{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:12px 0;font-size:14px}
.feiten dt{color:var(--mist)}
.feiten.breed{grid-template-columns:1fr}
.feiten.breed dd{margin-bottom:8px}

.raster{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 8px;margin:8px 0 16px}
.kaartje{display:block;text-decoration:none}
.beeld{display:block;aspect-ratio:4/3;background:var(--inkt);overflow:hidden;border-radius:8px}
.beeld img{display:block;width:100%;height:100%;object-fit:cover}
.leeg{display:flex;align-items:center;justify-content:center;height:100%;padding:8px;text-align:center;font-size:13px;color:var(--mist);background-image:repeating-linear-gradient(135deg,var(--inkt) 0 8px,var(--nacht) 8px 16px)}
.onder{display:block;padding-top:6px}
.onder b{display:block;font-weight:600;font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.onder small{display:block;margin-top:2px;font-size:12px}
.onder .status{font-size:12px}
.kaartje:hover b{text-decoration:underline;text-underline-offset:3px}

.linkrij{list-style:none;display:flex;flex-wrap:wrap;gap:0 16px}
.linkrij li{padding:6px 0;min-height:32px}

.pvoet{border-top:1px solid var(--lijn);padding:16px 16px calc(20px + var(--sa-b));color:var(--mist);font-size:13px}
.pvoet nav{display:flex;flex-wrap:wrap;gap:0 18px;max-width:1080px;margin:0 auto}
.pvoet a,.pvoet button{display:inline-flex;align-items:center;min-height:44px;color:var(--mist);font-size:13px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--stil)}

.cookiebalk{position:fixed;z-index:40;left:8px;right:8px;bottom:calc(8px + var(--sa-b));display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;max-width:560px;margin:0 auto;padding:12px 14px;background:var(--inkt);border:1px solid var(--stil);border-radius:14px;color:var(--krijt);font-size:14px;line-height:1.35}
.cookiebalk p{flex:1 1 240px}
.cookiebalk a{color:var(--krijt)}
.cookiebalk div{display:flex;gap:8px}
.cookiebalk button{min-width:64px;min-height:44px;padding:0 14px;border:1px solid var(--stil);border-radius:10px;font-weight:700;background:var(--inkt);color:var(--krijt)}
.cookiebalk button:hover{border-color:var(--krijt)}

@media (min-width:720px){
  h1{font-size:36px}
  .raster{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px 12px}
  .groot{margin:0 0 12px;border-radius:12px;overflow:hidden}
  .camkop{max-width:760px}
}