/* Onderweg met Gods werk: huisstijl B (papier, nachtblauw, Delfts blauw, baksteen) */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-latin-full-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --papier: #f7f4ee; --vlak: #efebe3; --kaart: #ffffff; --lijn: #ddd6c8;
  --inkt: #1e2833; --zacht: #55606b; --blauw: #2b5a8a; --blauw-d: #1d4268; --steen: #9c4a28;
  --nacht: #182230; --nacht-2: #22303f; --goud: #e9b649; --licht: #f4efe7;
  --groen: #1f6b4a; --kop: "Fraunces", Georgia, serif; --tekst: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 14px; --schaduw: 0 1px 0 rgba(30,40,51,.05), 0 10px 26px -16px rgba(30,40,51,.35);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--inkt); font-family: var(--tekst); font-size: 1.0625rem; line-height: 1.6; min-height: 100vh; }
img { max-width: 100%; height: auto; }
a { color: var(--blauw); text-underline-offset: .18em; }
a:hover { color: var(--blauw-d); }
h1, h2, h3 { font-family: var(--kop); font-weight: 600; line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 .9em; }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; border-radius: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--blauw); color: #fff; padding: .6rem 1rem; z-index: 2000; border-radius: 8px; }
.skip:focus { top: 1rem; }

/* Kop */
.kop { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .55rem max(1rem, env(safe-area-inset-left)); padding-top: max(.55rem, env(safe-area-inset-top)); background: var(--nacht); color: var(--licht); }
.merk { display: flex; align-items: center; gap: .55rem; color: var(--licht); text-decoration: none; min-height: 44px; }
.merk:hover { color: #fff; }
.merk__icoon { width: 30px; height: 30px; flex: none; }
.merk__naam { font-family: var(--kop); font-size: 1.12rem; font-weight: 600; line-height: 1.1; }
.kop__rechts { display: flex; gap: .4rem; }
.taal, .menuknop { min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: var(--licht); font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.taal:hover, .menuknop:hover { background: rgba(255,255,255,.1); }
.menuknop svg { width: 22px; height: 22px; }
.menu { position: absolute; right: .75rem; top: calc(100% + .4rem); background: var(--kaart); border-radius: var(--r); box-shadow: 0 18px 40px -12px rgba(0,0,0,.4); padding: .4rem; min-width: 16rem; display: flex; flex-direction: column; }
.menu[hidden] { display: none; }
.menu a { color: var(--inkt); text-decoration: none; padding: .7rem .9rem; border-radius: 10px; font-weight: 600; min-height: 44px; }
.menu a:hover, .menu a[aria-current="page"] { background: var(--vlak); color: var(--blauw-d); }

main { max-width: 52rem; margin: 0 auto; padding: 1rem 1rem 6rem; outline: none; overflow-wrap: break-word; }
.item > *, .tegel > *, .routekaart, .lijst > li { min-width: 0; }
main a { overflow-wrap: anywhere; }
.binnen-breed { max-width: none; }

/* Start */
.held { background: var(--nacht); color: var(--licht); border-radius: var(--r); padding: 1.6rem 1.3rem; margin: .4rem 0 1.2rem; position: relative; overflow: hidden; }
.held h1 { color: #fff; }
.held p { color: #d6d1c7; max-width: 36rem; }
.held .eyebrow { color: var(--goud); }
.held::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(233,182,73,.25); box-shadow: 0 0 0 26px rgba(233,182,73,.06), 0 0 0 54px rgba(233,182,73,.04); }
.eyebrow { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--steen); margin: 0 0 .35rem; }
.tegels { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); margin-bottom: 1.4rem; }
.tegel { display: flex; gap: .9rem; align-items: center; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r); padding: 1rem 1.1rem; text-decoration: none; color: var(--inkt); box-shadow: var(--schaduw); min-height: 4.5rem; }
.tegel:hover { border-color: var(--blauw); color: var(--inkt); }
.tegel__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--vlak); color: var(--blauw); display: grid; place-items: center; flex: none; }
.tegel__ic svg { width: 24px; height: 24px; }
.tegel strong { display: block; font-size: 1.05rem; }
.tegel span { color: var(--zacht); font-size: .94rem; line-height: 1.35; display: block; }
.tegel--hoofd { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.tegel--hoofd span { color: #e3ecf6; }
.tegel--hoofd .tegel__ic { background: rgba(255,255,255,.15); color: #fff; }
.tegel--hoofd:hover { background: var(--blauw-d); color: #fff; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .6rem 1.15rem; border-radius: 999px; border: 0; background: var(--blauw); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.knop:hover { background: var(--blauw-d); color: #fff; }
.knop--rustig { background: transparent; color: var(--inkt); border: 1px solid rgba(30,40,51,.28); }
.knop--rustig:hover { background: rgba(43,90,138,.08); color: var(--blauw-d); }
.knop--klein { min-height: 40px; padding: .4rem .9rem; font-size: .95rem; }
.knop svg { width: 20px; height: 20px; flex: none; }
.knoppen { display: flex; flex-wrap: wrap; gap: .55rem; margin: .8rem 0 1rem; }

/* Lijsten */
.lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.item { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r); padding: .8rem .9rem; text-decoration: none; color: var(--inkt); min-height: 4rem; }
.item:hover { border-color: var(--blauw); color: var(--inkt); }
.item__nr { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--nacht); color: var(--goud); font-weight: 800; font-size: .95rem; }
.item__nr--gezien { background: var(--groen); color: #fff; }
.item strong { display: block; line-height: 1.25; }
.item small { color: var(--zacht); font-size: .9rem; display: block; line-height: 1.35; }
.item__rechts { text-align: right; color: var(--zacht); font-size: .9rem; white-space: nowrap; }
.pijl { display: inline-block; width: 1.4rem; height: 1.4rem; vertical-align: middle; color: var(--blauw); }
.label { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .15rem .55rem; border-radius: 999px; background: var(--vlak); color: var(--steen); }
.groep-kop { margin: 1.4rem 0 .6rem; font-size: 1.05rem; font-family: var(--tekst); font-weight: 800; color: var(--zacht); text-transform: uppercase; letter-spacing: .06em; }

/* Route */
.routekaart { display: block; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r); padding: 1rem 1.1rem; text-decoration: none; color: var(--inkt); box-shadow: var(--schaduw); }
.routekaart:hover { border-color: var(--blauw); color: var(--inkt); }
.routekaart h2 { margin: .35rem 0 .3rem; }
.routekaart p { color: var(--zacht); margin: 0 0 .5rem; font-size: .97rem; }
.feiten { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--zacht); font-size: .93rem; margin: 0; padding: 0; list-style: none; }
.feiten li { display: inline-flex; align-items: center; gap: .3rem; }
.kaartvak { height: 52vh; min-height: 300px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--lijn); background: #dfe7ee; margin: .4rem 0 .8rem; position: relative; z-index: 1; }
.kaartvak--klein { height: 230px; min-height: 0; }
.kaartnoot { font-size: .88rem; color: var(--zacht); margin: -.4rem 0 1rem; }

/* Plek */
.plek-kop { margin: .6rem 0 1rem; }
.plek-kop .meta { color: var(--zacht); margin: 0; }
.blok { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r); padding: 1rem 1.1rem; margin: 0 0 .8rem; }
.blok h2 { font-size: 1.08rem; font-family: var(--tekst); font-weight: 800; margin-bottom: .35rem; }
.blok p:last-child { margin-bottom: 0; }
.verhaal { font-size: 1.1rem; line-height: 1.7; }
.respect { background: #f3ece0; border: 1px solid #e3d5bd; border-left: 5px solid var(--steen); }
.kindblok { background: #eaf1f8; border-color: #cfdcea; }
.kindblok h2 { color: var(--blauw-d); }
.afstand { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--blauw-d); margin: 0 0 .8rem; }
.afstand svg { width: 28px; height: 28px; transition: transform .3s; }
.gezien { display: flex; align-items: center; gap: .6rem; min-height: 46px; font-weight: 700; cursor: pointer; }
.gezien input { width: 1.4rem; height: 1.4rem; accent-color: var(--groen); }
.vorige-volgende { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.vorige-volgende a { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r); padding: .7rem .9rem; text-decoration: none; color: var(--inkt); min-height: 46px; }
.vorige-volgende a:hover { border-color: var(--blauw); }
.vorige-volgende small { display: block; color: var(--zacht); }
.vorige-volgende .volgende { text-align: right; grid-column: 2; }
details.bronnen summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
details.bronnen ul { margin: .3rem 0 0; padding-left: 1.2rem; font-size: .93rem; word-break: break-word; }
.zeker { font-size: .88rem; color: var(--zacht); }

/* Instellingen en tekstpagina's */
.schakel { display: flex; align-items: flex-start; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--lijn); cursor: pointer; }
.schakel input { width: 1.4rem; height: 1.4rem; margin-top: .15rem; accent-color: var(--blauw); flex: none; }
.schakel strong { display: block; }
.schakel span { color: var(--zacht); font-size: .95rem; }
.tekstpagina h2 { margin-top: 1.4rem; }
.tekstpagina ul { padding-left: 1.2rem; }
.leeg { color: var(--zacht); }
.melding { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--nacht); color: #fff; padding: .7rem 1.1rem; border-radius: 14px; font-weight: 600; max-width: min(26rem, calc(100% - 2rem)); text-align: center; z-index: 3000; opacity: 0; pointer-events: none; transition: opacity .25s; }
.melding.aan { opacity: 1; }

/* Kaart-markers */
.mk { width: 30px; height: 30px; border-radius: 50%; background: var(--nacht); color: var(--goud); border: 2px solid #fff; display: grid; place-items: center; font: 800 13px/1 var(--tekst); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.mk--los { width: 24px; height: 24px; background: var(--steen); }
.mk--gezien { background: var(--groen); color: #fff; }
.mk-ik { width: 18px; height: 18px; border-radius: 50%; background: var(--blauw); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(43,90,138,.25); }
.leaflet-container { font-family: var(--tekst); background: #dfe7ee; }
.leaflet-popup-content { margin: .7rem .9rem; font-size: .95rem; }
.leaflet-popup-content a { font-weight: 700; }
.kaartkeuze { position: absolute; z-index: 500; left: .5rem; bottom: .5rem; background: rgba(255,255,255,.95); border-radius: 10px; padding: .35rem .5rem; font-size: .85rem; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.kaartkeuze button { font: inherit; font-weight: 700; color: var(--blauw); background: none; border: 0; cursor: pointer; min-height: 36px; padding: 0 .3rem; text-decoration: underline; }

/* Print */
@media print {
  .kop, .knoppen, .kaartvak, .vorige-volgende, .gezien, .melding, .skip, .kaartkeuze { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  main { max-width: none; padding: 0; }
  .blok, .item { border: 0; padding: 0; box-shadow: none; break-inside: avoid; }
  .printstop { break-inside: avoid; border-top: 1px solid #999; padding-top: .6rem; margin-top: .6rem; }
  a { color: #000; }
}
.printstop h3 { margin-bottom: .2rem; }
.printstop .meta { color: var(--zacht); margin-bottom: .3rem; font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.tekstknop { font: inherit; color: var(--blauw); background: none; border: 0; padding: .5rem 0; min-height: 44px; cursor: pointer; text-decoration: underline; }
.install { border-left: 4px solid var(--blauw); }