/* BuurtKennis-stijl voor de buurtkaart en de pagina's eromheen, naar het kwestiekaartje:
   crèmegrond, zware schreefloze koppen, Open Sans voor tekst, vlakke kleuren,
   gestippelde zwarte kaders zoals in het logo. De vier logokleuren zijn de fasekleuren B–E.
   Letters zoals op leidenbuurtkennis.org: Public Sans (zwaar voor koppen) en Coustard als schreefletter. */
:root {
  --creme: #FDFBF6; --vlak: #FFFFFF; --inkt: #1E1407; --bruin: #382202; --lijn: #1E1407; --zacht: #6B5A45;
  --fase-A: #A99A86; --fase-B: #388E62; --fase-C: #F84800; --fase-D: #FACD15; --fase-E: #328BA0; --fase-F: #382202; --fase-D-tekst: #D9A600;
  --water: #CFE6EC; --doos: #DBCB94; --doos-binnen: #85704D; --doos-lijn: #382202;
  --kop: "Public Sans", "Helvetica Neue", Arial, sans-serif; --titel: "Coustard", Georgia, serif; --tekst: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --peek: 108px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --creme: #1C1813; --vlak: #27211A; --inkt: #F3ECDF; --bruin: #EFE3CC; --lijn: #F3ECDF; --zacht: #BFAF97;
  --water: #29434D; --doos-lijn: #F3ECDF; --fase-F: #EFE3CC; color-scheme: dark } }
:root[data-theme="dark"] {
  --creme: #1C1813; --vlak: #27211A; --inkt: #F3ECDF; --bruin: #EFE3CC; --lijn: #F3ECDF; --zacht: #BFAF97;
  --water: #29434D; --doos-lijn: #F3ECDF; --fase-F: #EFE3CC; color-scheme: dark }

* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--creme); color: var(--inkt); font-family: var(--tekst); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased }
a { color: var(--bruin); text-underline-offset: 2px }
a.uit::after { content: "\00a0↗"; font-size: .85em }
:focus-visible { outline: 2px dashed var(--inkt); outline-offset: 3px }
.wrap { max-width: 72rem; margin: 0 auto; padding-inline: 16px; padding-block: 12px 40px }

/* kop: logo, titel, menu */
.bk-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px }
.bk-kop .logo img { height: 46px; width: auto; display: block }
.bk-titel { font-family: var(--kop); font-weight: 900; font-size: clamp(1.15rem, 4.6vw, 1.6rem); line-height: 1.05; letter-spacing: -0.015em; color: var(--bruin); margin: 0; flex: 1 1 auto; text-decoration: none }
.bk-nav { display: flex; gap: 6px; flex-wrap: wrap; width: 100% }
@media (min-width: 700px) { .bk-nav { width: auto } }
.bk-nav a { font-family: var(--kop); font-weight: 800; font-size: .85rem; text-decoration: none; color: var(--inkt); padding: 4px 10px; border: 2px dashed transparent }
.bk-nav a[aria-current="page"], .bk-nav a:hover { border-color: var(--inkt) }

h1 { font-family: var(--titel); font-weight: 400; font-size: clamp(1.8rem, 5.4vw, 2.6rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--bruin); margin: 20px 0 10px; text-wrap: balance }
h2 { font-family: var(--kop); font-weight: 900; font-size: 1.2rem; line-height: 1.15; color: var(--bruin); margin: 0 0 4px; letter-spacing: -0.01em }
h3 { font-family: var(--kop); font-weight: 800; font-size: .95rem; color: var(--bruin); margin: 16px 0 6px }
.intro { margin: 0 0 16px; max-width: 60ch }
/* naam boven de kaart: Coustard, in de kleur van de fase (geel iets donkerder, zodat het leesbaar blijft).
   Altijd één regel met een vaste hoogte, zodat de kaart nooit verspringt. */
.plek { font-family: var(--titel); font-weight: 400; color: var(--k, var(--bruin)); font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.2; height: 1.2em; letter-spacing: -0.01em; margin: 18px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* indeling: mobiel naam, kompas, kaart, veegkaart; desktop naam en kompas boven de kaart links, card rechts */
.hub { display: grid; gap: 4px; grid-template-areas: "naam" "kompas" "kaart" }
.hub .naam { grid-area: naam } .hub .kompas-rij { grid-area: kompas } .hub .kaart { grid-area: kaart }
@media (min-width: 900px) {
  .hub { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); grid-template-areas: "naam card" "kompas card" "kaart card"; grid-template-rows: auto auto 1fr; column-gap: 32px; align-items: start }
  .hub .card { position: sticky; top: 12px; margin-top: 64px; max-height: calc(100vh - 100px); display: flex; flex-direction: column }
  .hub .card-body { flex: 1 1 auto; min-height: 0 }
  .hub .card { grid-area: card }
}

/* kompas */
.kompas-rij { display: flex; align-items: center; gap: 10px; min-height: 64px; margin-bottom: 10px }
.kompas-rij .kompas { width: 128px; flex: none }
.fase-label { font-family: var(--kop); font-weight: 800; font-size: .95rem; color: var(--inkt); text-decoration: none; line-height: 1.2 }
.fase-label small { display: block; font-family: var(--tekst); font-weight: 400; font-size: .8rem; color: var(--zacht) }
.kompas { display: block; overflow: visible }
.kompas .boog { fill: none; stroke: color-mix(in srgb, var(--k) 35%, var(--creme)); stroke-width: 6; stroke-linecap: round; transition: stroke-width .2s, stroke .2s }
.kompas .stroom, .kompas .pijlpunt { fill: none; stroke: color-mix(in srgb, var(--fase-A) 55%, var(--creme)); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; transition: stroke-width .2s, stroke .2s }
.kompas .letter { font-family: var(--kop); font-weight: 900; font-size: 15px; letter-spacing: 0; fill: var(--zacht); text-anchor: middle; dominant-baseline: middle }
.kompas .tik { fill: none; stroke: transparent; stroke-width: 34; cursor: pointer; pointer-events: stroke }
.kompas .open { display: none } .kompas .dicht { display: inline }
.kompas:not([data-fase=""]) .open { display: inline } .kompas:not([data-fase=""]) .dicht { display: none }
.kompas[data-fase="A"] [data-fase="A"].stroom, .kompas[data-fase="A"] [data-fase="A"].pijlpunt,
.kompas[data-fase="B"] .boog[data-fase="B"], .kompas[data-fase="C"] .boog[data-fase="C"],
.kompas[data-fase="D"] .boog[data-fase="D"], .kompas[data-fase="E"] .boog[data-fase="E"],
.kompas[data-fase="F"] [data-fase="F"].stroom, .kompas[data-fase="F"] [data-fase="F"].pijlpunt { stroke: var(--k); stroke-width: 13 }
.kompas[data-fase="A"] .letter[data-fase="A"], .kompas[data-fase="B"] .letter[data-fase="B"], .kompas[data-fase="C"] .letter[data-fase="C"],
.kompas[data-fase="D"] .letter[data-fase="D"], .kompas[data-fase="E"] .letter[data-fase="E"], .kompas[data-fase="F"] .letter[data-fase="F"] { fill: var(--inkt) }
.kompas.groot { width: min(100%, 420px); margin: 8px auto }

/* kaart */
.kaart { position: relative; aspect-ratio: 1028 / 1024; width: 100%; max-height: 72vh; max-width: calc(72vh * 1028 / 1024); margin: 0 auto }
.kaart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden }
.achtergrond { fill: transparent }
/* buurten en wijken: alleen vlakken. Alle grenzen staan los in .grenzen, elke grens één keer, zodat de stippels niet dubbel liggen.
   Daarboven: .omtrek (gekleurde buurt, doorgetrokken) en .keuze (gekozen buurt, dik). Het script tekent die twee. */
.buurt { fill: var(--vlak); stroke: none; cursor: pointer }
.buurt.actief-buurt { fill: var(--t) }
.buurt:hover { filter: brightness(.94) }
.wijk { fill: none; stroke: none; pointer-events: none }
.grenzen path, .omtrek path, .keuze path { fill: none; stroke: var(--lijn); stroke-linecap: round; stroke-linejoin: round; pointer-events: none }
.grenzen .buurtgrens { stroke-width: 1.8; stroke-dasharray: 5 6; stroke-opacity: .55 }
.grenzen .wijkgrens { stroke-width: 3.5; stroke-dasharray: 10 8 }
.omtrek path { stroke-width: 3 }
.keuze path { stroke: var(--inkt); stroke-width: 6 }
.water path { fill: var(--water); stroke: none; pointer-events: none }
.waterlijn path { fill: none; stroke: var(--water); stroke-linecap: round; pointer-events: none } .waterlijn .river { stroke-width: 9 } .waterlijn .canal { stroke-width: 3 }
/* doosje: hover een stippelrand, gekozen een doorgetrokken rand, zonder overgang */
.traject { cursor: pointer }
.traject .schijf { fill: var(--vlak); stroke: var(--inkt); stroke-width: 0 }
.traject:hover .schijf, .traject:focus-visible .schijf { stroke-width: 3; stroke-dasharray: 6 4 }
.traject.gekozen .schijf { stroke-width: 3.5; stroke-dasharray: none }
.traject:focus-visible { outline: none }
.tra-kop { margin-bottom: 20px }
.kaart.iets-gekozen .traject:not(.gekozen) { opacity: .6 }

/* veegkaart (mobiel), vaste kolom (desktop) */
.card { background: var(--vlak); color: var(--inkt); min-width: 0 }
.card-kop { padding: 8px 18px 10px; touch-action: none; cursor: grab; user-select: none }
.greep { width: 44px; height: 5px; border-radius: 3px; background: var(--inkt); opacity: .25; margin: 2px auto 10px }
.card-kop .meta { margin: 6px 0 0 }
.card-body { padding: 0 18px 24px; overflow-y: auto; overscroll-behavior: contain }
.card-body p { margin: 0 0 8px }
@media (max-width: 899px) {
  .card { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; max-height: 86vh; display: flex; flex-direction: column;
    box-shadow: 0 -4px 18px rgba(30, 20, 7, .14); transform: translateY(calc(100% - var(--peek))); transition: transform .28s cubic-bezier(.2, 0, .2, 1) }
  .card[data-stand="open"] { transform: translateY(0) }
  .card.slepen { transition: none }
  .card-body { flex: 1 1 auto }
  body.met-card { padding-bottom: calc(var(--peek) + 12px) }
}
@media (min-width: 900px) { .greep { display: none } .card-kop { cursor: default; touch-action: auto; user-select: auto } }
@media (prefers-reduced-motion: reduce) { .card, .traject, .kompas .boog { transition: none } }

/* thema's: één gestippeld kader zoals in het logo, de thema's erin gescheiden door hun stip */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px }
.tags { font-family: var(--kop); font-weight: 800; font-size: .78rem; line-height: 1.2; padding: 4px 10px; border: 2px dashed var(--inkt); color: var(--inkt); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; background: var(--vlak) }
.tags .thema { display: inline-flex; align-items: center; gap: 6px }
.tags .thema::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tk); flex: none }
.sinds { font-size: .82rem; color: var(--zacht) }
.boven { font-family: var(--kop); font-weight: 800; font-size: .9rem; color: var(--zacht); margin: 0; text-transform: uppercase; letter-spacing: .04em }
.fase-pil { display: inline-flex; align-items: center; gap: 8px; font-family: var(--kop); font-weight: 800; font-size: .85rem; color: var(--inkt); text-decoration: none }
.fase-pil .f { font-weight: 900; width: 26px; height: 26px; display: grid; place-items: center; background: var(--k); color: #fff }
.fase-pil[style*="fase-D"] .f { color: var(--bruin) }

/* lijsten in de kaart en op /trajecten */
.lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.lijst a, .lijst button { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px 10px; background: var(--creme); border: 0; font: inherit; color: var(--inkt); text-decoration: none; cursor: pointer }
.lijst a:hover, .lijst button:hover { outline: 2px dashed var(--inkt); outline-offset: -2px }
.lijst .f { font-family: var(--kop); font-weight: 900; width: 28px; height: 28px; display: grid; place-items: center; background: var(--k); color: #fff; align-self: start }
.lijst [style*="fase-D"] .f { color: var(--bruin) }
.lijst small { color: var(--zacht) }
.activiteiten { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.activiteiten li { padding: 8px 12px; background: var(--creme); border-left: 4px solid var(--k, var(--bruin)) }
.activiteiten .wanneer { display: block; font-size: .82rem; color: var(--zacht) }

.melding { background: var(--vlak); padding: 14px 18px; max-width: 40rem; border: 2px dashed var(--inkt) }
.werk { border: 2px dashed var(--bruin); padding: 8px 14px; font-size: .9rem; margin-bottom: 8px }
.werk-knoppen { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 6px } .werk-knoppen a { font-family: var(--kop); font-weight: 800; font-size: .8rem; text-decoration: none; padding: 2px 8px; background: var(--vlak); border: 2px solid var(--bruin) }
.voet { font-size: .8rem; color: var(--zacht); margin-top: 36px; padding-top: 14px; border-top: 2px dashed color-mix(in srgb, var(--inkt) 25%, transparent) }
.voet p { margin: 0 0 4px }
.onder-kaart { font-size: .9rem; margin: 14px 0 0; text-align: center }
.fase-uitleg { background: var(--vlak); padding: 14px 18px; margin-top: 12px; border-top: 10px solid var(--band, var(--bruin)) }
.fasen { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px }
.fasen li { display: grid; grid-template-columns: 2em 1fr; gap: 10px; align-items: baseline }
.fasen .f { font-family: var(--kop); font-weight: 900; color: var(--k) }

/* ---------- homepagina: blokken in de kleuren van het logo, zoals leidenbuurtkennis.org ---------- */
.knop { display: inline-block; font-family: var(--kop); font-weight: 800; font-size: 1rem; color: var(--inkt); background: var(--vlak); text-decoration: none; padding: 10px 16px; border: 3px dashed var(--inkt) }
.knop:hover { background: var(--inkt); color: var(--vlak) }
.knop.groot { font-size: clamp(1.1rem, 2.6vw, 1.5rem); padding: 16px 26px; border-width: 4px; text-align: center; max-width: 16rem; line-height: 1.2; align-self: center }
.held-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0 }
.held-knoppen.midden { justify-content: center }
/* een blok loopt over de volle breedte van het scherm, de tekst blijft in de kolom */
.vol { border-image: conic-gradient(var(--bg) 0 0) fill 0 / / 0 100vmax }
/* kop over twee regels: eerst Public Sans zwaar, dan Coustard */
.tweeregel { font-family: var(--kop); font-weight: 900; font-size: clamp(2rem, 6vw, 3.3rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--bruin); margin: 0 0 14px; text-wrap: balance }
.tweeregel span { display: block; font-family: var(--titel); font-weight: 400; letter-spacing: -0.01em; margin-top: .06em }
.tweeregel.groen { color: var(--fase-B) } .tweeregel.rood { color: var(--fase-C) }
.lead { font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.45; max-width: 46ch; margin: 0 0 18px; color: var(--bruin) }
.held { padding: clamp(40px, 10vw, 110px) 0 clamp(36px, 7vw, 70px) }
.held h1.tweeregel { font-size: clamp(2.5rem, 8.5vw, 4.6rem) }
.band { --bg: var(--fase-B); color: var(--creme); padding: 36px 0; text-align: center }
.band strong { font-weight: 800 }
.band p { font-family: var(--kop); font-weight: 400; font-size: clamp(1.5rem, 4.6vw, 2.6rem); line-height: 1.15; margin: 0; text-wrap: balance }
.blok { padding: clamp(40px, 7vw, 76px) 0 }
.blok.wit { --bg: var(--vlak) }
.kop-rij { display: grid; gap: 20px; align-items: center }
@media (min-width: 760px) { .kop-rij { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) } }
.klein-kompas { display: block; max-width: 300px; width: 100%; margin: 0 auto }
.klein-kompas .kompas { width: 100% }
/* metrolijn, zoals in het methode-overzicht: per fase een lijn in de fasekleur, een bolletje per stap */
.metro { list-style: none; margin: 30px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.metro li { position: relative; padding: 40px 22px 0 0 }
.metro li::before { content: ""; position: absolute; top: 13px; left: 0; right: 0; height: 7px; background: var(--k) }
.metro li:last-child::before { right: 22px }
.metro li::after { content: ""; position: absolute; top: 4px; left: 0; width: 25px; height: 25px; border-radius: 50%; background: var(--k); box-shadow: inset 0 0 0 4px var(--inkt) }
.metro h3 { font-family: var(--kop); font-weight: 800; font-size: 1.25rem; line-height: 1.15; color: var(--kt, var(--k)); margin: 0 0 6px }
.metro p { margin: 0; font-size: .95rem }
@media (max-width: 759px) {
  .metro { grid-template-columns: 1fr }
  .metro li { padding: 0 0 26px 44px }
  .metro li::before { top: 0; bottom: 0; left: 9px; right: auto; width: 7px; height: auto }
  .metro li:last-child::before { bottom: auto; height: 22px; right: auto }
  .metro li::after { top: 0; left: 0 }
}
.blok.blauw { --bg: var(--fase-E) }
.blok.blauw .tweeregel { color: var(--creme) }
.blok.blauw .lead { color: var(--bruin) }
/* thema's als gestippelde labels boven een open doos */
.themadoos { display: grid; justify-items: center; margin: 26px 0 0 }
.themalabels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; max-width: 46rem }
.themalabels li:nth-child(odd) { transform: translateY(10px) rotate(-1.5deg) } .themalabels li:nth-child(3n) { transform: rotate(1.5deg) }
.themalabels a { display: block; font-family: var(--kop); font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.35rem); color: var(--inkt); background: var(--vlak); text-decoration: none; padding: 8px 14px; border: 4px dashed var(--inkt) }
.themalabels a:hover { background: var(--inkt); color: var(--vlak) }
.grote-doos { width: min(260px, 60vw); margin-top: 18px; --doos-lijn: var(--vlak) }
.kaart-teaser { display: grid; gap: 24px; align-items: center }
@media (min-width: 760px) { .kaart-teaser { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } }
.mini-kaart { display: block; aspect-ratio: 1028 / 1024; max-width: 380px; width: 100%; margin: 0 auto; position: relative }
.mini-kaart svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.blok.geel { --bg: var(--fase-D) }
.rollen { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) }
.rollen h3 { font-family: var(--kop); font-weight: 900; font-size: 1.3rem; margin: 0 0 4px; color: var(--bruin) }
.rollen p { margin: 0; color: var(--bruin) }
.partners { font-size: .92rem; text-align: center }
.partners ul { margin: 6px auto 14px; padding: 0; list-style: none; max-width: 44rem }
.partners li { margin: 3px 0 }
.voet-logo { height: 70px; width: auto; display: block; margin: 0 auto 14px }
.thuis .voet { display: none }

/* ---------- thema's ---------- */
.stip { width: 12px; height: 12px; border-radius: 50%; background: var(--tk); flex: none; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.12) }
.thema-index { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 22px 0 8px; font-family: var(--kop); font-weight: 800; font-size: .9rem }
.thema-index a { display: inline-flex; align-items: center; gap: 7px; color: var(--inkt); text-decoration: none; padding: 4px 0 }
.thema-index a:hover { text-decoration: underline }
.thema-blok { padding: 30px 0 8px; border-top: 2px dashed color-mix(in srgb, var(--inkt) 25%, transparent); margin-top: 26px; scroll-margin-top: 12px }
.thema-naam { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--kop); font-weight: 900; font-size: 1.05rem; color: var(--inkt) }
.thema-blok h2 { font-family: var(--titel); font-weight: 400; font-size: clamp(1.6rem, 4.4vw, 2.3rem); color: var(--bruin); line-height: 1.12; margin: 6px 0 14px; text-wrap: balance }
.thema-in { display: grid; gap: 18px }
@media (min-width: 820px) { .thema-in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px } }
.thema-tekst p { margin: 0 0 12px; max-width: 62ch }
.onderzoek { background: var(--vlak); padding: 14px 18px; border-top: 8px solid var(--tk); align-self: start }
.onderzoek h3 { margin: 0 0 8px; color: var(--inkt) }
.onderzoek ul { margin: 0; padding-left: 1.1em } .onderzoek li { margin: 4px 0 }
.lopend { font-size: .9rem; margin: 14px 0 0 }
.methode-meer { margin-top: 30px; max-width: 62ch }