/* ============================================================
 * Buurtpreventie.nl — thema "Buurtplein levend"
 * Gescoopt op body.site-theme-buurtpreventie zodat het geen ander thema raakt.
 * Fonts self-hosted (AVG/CSP). Laadt alleen wanneer dit thema actief is.
 * ============================================================ */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:600 800;font-display:swap;src:url("/assets/themes/buurtpreventie/fonts/fraunces-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/themes/buurtpreventie/fonts/public-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

body.site-theme-buurtpreventie{
  --bp-avond:#2b3a5c;--bp-avond-diep:#1e2a45;--bp-raamlicht:#ffd98a;
  --bp-groen:#0b4340;--bp-groen-2:#116b64;--bp-mint:#eaf4f1;--bp-lime:#c8e96a;
  --bp-inkt:#15221f;--bp-grijs:#5b6d6a;--bp-lijn:#dcebe6;
  color:var(--bp-inkt);
  font-family:"Public Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.7;
}
/* Avondlucht over de héle pagina (fixed backdrop); de witte content-kaarten drijven erop. Even
   specifiek als de generieke portal-body-bg (body.site-body[class*="site-theme-"], 0,2,1) en later
   geladen, zodat deze wint. */
body.site-body.site-theme-buurtpreventie{
  background:linear-gradient(180deg,var(--bp-avond-diep) 0%,var(--bp-avond) 58%,#38486d 100%) fixed;
}
body.site-theme-buurtpreventie h1,
body.site-theme-buurtpreventie h2,
body.site-theme-buurtpreventie h3,
body.site-theme-buurtpreventie h4,
body.site-theme-buurtpreventie h5{font-family:"Fraunces",Georgia,serif;font-weight:700;color:var(--bp-groen)}

/* ── Focus zichtbaar (a11y) ── */
body.site-theme-buurtpreventie :focus-visible{outline:3px solid var(--bp-lime);outline-offset:2px;border-radius:.4rem}

/* ── Gedeelde header restylen naar de avondlucht ── */
body.site-theme-buurtpreventie .site-header-v10{background:var(--bp-avond-diep);border-bottom:1px solid #3a4a70}
body.site-theme-buurtpreventie .site-header-v10 .site-brand-title{color:#fff;font-family:"Fraunces",Georgia,serif;font-weight:800}
body.site-theme-buurtpreventie .site-header-v10 .site-brand-mark-v1024{background:var(--bp-groen);color:#fff}
body.site-theme-buurtpreventie .site-header-v10 .site-brand-copy-v1024 small{color:#c3cde3}
body.site-theme-buurtpreventie .site-header-v10 .nav-link{color:#c3cde3;font-weight:600}
body.site-theme-buurtpreventie .site-header-v10 .nav-link:hover,
body.site-theme-buurtpreventie .site-header-v10 .nav-link:focus{color:var(--bp-lime)}
body.site-theme-buurtpreventie .site-header-v10 .site-login-v10,
body.site-theme-buurtpreventie .site-header-v10 .site-register-v10{color:#fff}
body.site-theme-buurtpreventie .site-header-v10 .site-login-v10:hover,
body.site-theme-buurtpreventie .site-header-v10 .site-register-v10:hover{color:var(--bp-lime)}
body.site-theme-buurtpreventie .portal-header-menu-btn{color:#fff}

/* ── Knoppen ── */
body.site-theme-buurtpreventie .bp-btn-groen{background:var(--bp-groen);border:none;color:#fff;min-height:44px;border-radius:2rem;font-weight:700;padding:.6rem 1.35rem}
body.site-theme-buurtpreventie .bp-btn-groen:hover,
body.site-theme-buurtpreventie .bp-btn-groen:focus{background:var(--bp-groen-2);color:#fff}
body.site-theme-buurtpreventie .bp-btn-lg{font-size:1.05rem;padding:.8rem 2rem}
body.site-theme-buurtpreventie .bp-btn-alt{background:var(--bp-groen-2)}
body.site-theme-buurtpreventie .bp-btn-alt:hover,
body.site-theme-buurtpreventie .bp-btn-alt:focus{background:var(--bp-groen)}

/* ── Eyebrows/badges ── */
body.site-theme-buurtpreventie .bp-eyebrow{display:inline-block;background:rgba(255,255,255,.12);color:var(--bp-lime);border-radius:2rem;padding:.28rem .85rem;font-size:.76rem;font-weight:700}
body.site-theme-buurtpreventie .bp-overzicht .bp-eyebrow{background:rgba(255,255,255,.12)}
body.site-theme-buurtpreventie .bp-eyebrow-dag{display:inline-block;background:var(--bp-mint);color:var(--bp-groen);border-radius:2rem;padding:.28rem .85rem;font-size:.76rem;font-weight:700}
body.site-theme-buurtpreventie .bp-demo-tag{font-size:.6rem;font-weight:700;color:var(--bp-grijs);background:var(--bp-mint);border-radius:.4rem;padding:.1rem .4rem;vertical-align:middle;margin-left:.3rem;letter-spacing:.05em}
body.site-theme-buurtpreventie .bp-demo-licht{color:#c9d3e6;background:rgba(255,255,255,.12)}

/* ── Band (avondstraat) ── */
/* Sticky avondstraat ook tegen de footer op korte pagina's: .site-main-content-v10 heeft een
   min-height van (100vh - header), dus op weinig content is main hoger dan .bp-wrap → gat onder de
   straat. Oplossing: main wordt een flex-kolom en .bp-wrap groeit mee (flex:1), waarna .bp-portal
   (flex:1) de straat naar de onderkant duwt. Zo blijft de straat tegen de footer plakken zonder de
   header-hoogte te hoeven gokken; op lange pagina's blijft het sticky-gedrag ongewijzigd. */
body.site-theme-buurtpreventie .site-main-content-v10{display:flex;flex-direction:column}
body.site-theme-buurtpreventie .bp-wrap{position:relative;display:flex;flex-direction:column;flex:1 0 auto}
/* Top-band: alleen nog de maan + sterren (transparant); de avondlucht komt nu van de body-achtergrond.
   De horizon-huizenrij is hier weg — die staat als sticky avondstraat onderaan de pagina. */
body.site-theme-buurtpreventie .bp-band{position:absolute;top:0;left:0;right:0;height:360px;background:transparent;overflow:hidden;z-index:0;pointer-events:none}
/* Maan: reist in een lage boog van links naar rechts door de avondlucht ("komt op / gaat onder")
   én verandert onderweg van vorm — volle maan aan de rand, wassende sikkel op het midden, weer vol
   naar het einde — via een bewegend SVG-masker (.bp-maan-schaduw). De reis- en fase-animatie duren
   even lang zodat de sikkel precies halverwege valt. Aan de uiteinden vervaagt hij zodat het
   terugspringen niet opvalt. Gloed komt uit het SVG-filter. */
body.site-theme-buurtpreventie .bp-maan{position:absolute;top:0;left:0;width:58px;height:58px;overflow:visible;animation:bpMaanReis 90s linear infinite;will-change:transform,opacity}
body.site-theme-buurtpreventie .bp-maan-schaduw{animation:bpMaanFase 90s ease-in-out infinite;will-change:transform}
@keyframes bpMaanFase{0%,100%{transform:translateX(0)}50%{transform:translateX(-48px)}}
@keyframes bpMaanReis{
  0%{transform:translate(3vw,74px);opacity:0}
  9%{opacity:1}
  50%{transform:translate(46vw,16px)}
  91%{opacity:1}
  100%{transform:translate(88vw,74px);opacity:0}
}
body.site-theme-buurtpreventie .bp-ster{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.6);opacity:.7;animation:bpTwinkel 3.5s ease-in-out infinite}
body.site-theme-buurtpreventie .bp-ster-1{top:10%;left:8%}
body.site-theme-buurtpreventie .bp-ster-2{top:20%;left:28%;width:4px;height:4px;animation-delay:1s}
body.site-theme-buurtpreventie .bp-ster-3{top:8%;left:55%;animation-delay:2s}
body.site-theme-buurtpreventie .bp-ster-4{top:17%;left:78%;width:2px;height:2px;animation-delay:.5s}
body.site-theme-buurtpreventie .bp-ster-5{top:13%;left:92%;animation-delay:1.5s}
body.site-theme-buurtpreventie .bp-ster-6{top:26%;left:16%;width:2px;height:2px;animation-delay:2.4s}
body.site-theme-buurtpreventie .bp-ster-7{top:6%;left:40%;width:4px;height:4px;animation-delay:.9s}
body.site-theme-buurtpreventie .bp-ster-8{top:24%;left:66%;animation-delay:3s}
@keyframes bpTwinkel{0%,100%{opacity:.22}50%{opacity:.9}}
body.site-theme-buurtpreventie .bp-straat{position:absolute;left:0;right:0;bottom:0;width:100%}
body.site-theme-buurtpreventie .bp-raam{fill:#3d4a6b;transition:fill 1.1s ease}
body.site-theme-buurtpreventie .bp-raam.aan{fill:var(--bp-raamlicht)}
/* Sticky avondstraat onderaan de pagina: plakt aan de viewport-onderkant en wijkt naar de
   footer (die na .bp-wrap komt). Pure CSS via position:sticky;bottom:0 — geen JS. */
body.site-theme-buurtpreventie .bp-straat-onder{position:sticky;bottom:0;left:0;right:0;height:190px;margin-top:28px;z-index:0;pointer-events:none;overflow:visible;background:linear-gradient(180deg,transparent 0%,rgba(43,58,92,.35) 60%,#3b4b70 100%)}
body.site-theme-buurtpreventie .bp-straat-onder .bp-straat{position:absolute;left:0;right:0;bottom:0;width:100%}
/* Op mobiel neemt de PWA-bottom-nav de onderkant over; de sticky straat zou daar botsen. */
@media (max-width:991.98px){body.site-theme-buurtpreventie .bp-straat-onder{display:none}}

/* ── Portal-grid ── */
body.site-theme-buurtpreventie .bp-portal{position:relative;z-index:1;padding:1.4rem 0 3rem;flex:1 0 auto}

/* ── Rails ── */
@media (min-width:992px){
  body.site-theme-buurtpreventie .bp-rail-sticky{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
  body.site-theme-buurtpreventie .bp-rail-sticky::-webkit-scrollbar{display:none}
}
body.site-theme-buurtpreventie .bp-rail-kaart{background:#fff;border:1.5px solid var(--bp-lijn);border-radius:1.2rem;padding:1.2rem;margin-bottom:1.1rem}
body.site-theme-buurtpreventie .bp-rail-kop{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bp-groen-2);margin-bottom:.8rem;font-family:"Public Sans",sans-serif;font-weight:700}
body.site-theme-buurtpreventie .bp-rail-links{list-style:none;padding:0;margin:0}
body.site-theme-buurtpreventie .bp-rail-links li a{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.3rem .45rem;color:var(--bp-inkt);text-decoration:none;border-radius:.7rem;font-weight:600;font-size:.92rem}
body.site-theme-buurtpreventie .bp-rail-links li a:hover,
body.site-theme-buurtpreventie .bp-rail-links li a:focus{background:var(--bp-mint);color:var(--bp-groen)}
body.site-theme-buurtpreventie .bp-pijl{color:var(--bp-groen-2);font-weight:800}
body.site-theme-buurtpreventie .bp-rail-voet{font-size:.74rem;color:var(--bp-grijs);margin:.6rem 0 0}
/* Weerkaartje: sinds v014.10.260 het centrale weerwidget (weather.css, pw-*). */
body.site-theme-buurtpreventie .bp-rail-sticky .pw-widget{margin-bottom:1.1rem}
body.site-theme-buurtpreventie .bp-p2000-item{border-left:3px solid var(--bp-lime);padding:.4rem 0 .4rem .65rem;margin-bottom:.5rem}
body.site-theme-buurtpreventie .bp-p2000-item .bp-tijd{font-size:.7rem;color:var(--bp-grijs);letter-spacing:.06em;font-weight:700}
body.site-theme-buurtpreventie .bp-p2000-item p{font-size:.85rem;margin:0;font-weight:600}

/* ── Hero ── */
body.site-theme-buurtpreventie .bp-hero{color:#fff;padding:0 0 1rem;min-height:280px;display:flex;flex-direction:column;justify-content:center}
body.site-theme-buurtpreventie .bp-hero h1{color:#fff;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1}
body.site-theme-buurtpreventie .bp-onderstreept{white-space:nowrap}
body.site-theme-buurtpreventie .bp-lead{color:#c9d3e6;max-width:36rem;font-size:1.02rem}
body.site-theme-buurtpreventie .bp-zoeker{background:#fff;border-radius:1.3rem;padding:.5rem;box-shadow:0 18px 44px rgba(10,18,36,.4);display:flex;gap:.5rem;max-width:33rem;flex-wrap:wrap}
body.site-theme-buurtpreventie .bp-zoeker input[type=text]{border:none;flex:1;min-width:160px;padding:.7rem 1rem;font-size:1rem;border-radius:1rem;min-height:44px}
body.site-theme-buurtpreventie .bp-zoeker input[type=text]:focus{outline:3px solid var(--bp-lime)}

/* ── Stats-strip ── */
body.site-theme-buurtpreventie .bp-stats-strip{background:#fff;border:1.5px solid var(--bp-lijn);border-radius:1.2rem;box-shadow:0 16px 44px rgba(10,18,36,.28);padding:1.1rem 1.4rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;margin-top:1.6rem}
body.site-theme-buurtpreventie .bp-stat{min-width:120px}
body.site-theme-buurtpreventie .bp-stat-n{font-family:"Fraunces",Georgia,serif;font-size:1.55rem;font-weight:800;color:var(--bp-groen);line-height:1.1}
body.site-theme-buurtpreventie .bp-stat-l{font-size:.78rem;color:var(--bp-grijs);font-weight:600}
body.site-theme-buurtpreventie .bp-stat-tekst .bp-stat-n{font-size:1rem;padding-top:.3rem;color:var(--bp-groen-2)}

/* ── Content-blokken ── */
body.site-theme-buurtpreventie .bp-blok{background:#fff;border:1.5px solid var(--bp-lijn);border-radius:1.4rem;overflow:hidden;margin-bottom:1.8rem;box-shadow:0 8px 26px rgba(11,67,64,.06)}
body.site-theme-buurtpreventie .bp-blok-pad{padding:1.7rem}
body.site-theme-buurtpreventie .bp-blok-kop{font-size:1.3rem}
body.site-theme-buurtpreventie .bp-sectiekop{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;color:#c9d3e6}
/* Sectiekop-titels staan direct op de avond-achtergrond → licht i.p.v. donkergroen. */
body.site-theme-buurtpreventie .bp-sectiekop h2{font-size:1.3rem;margin:0;color:#fff}
/* Uitzondering: een sectiekop bínnen een witte kaart (.bp-blok, bv. "Vandaag in de buurten") blijft donker. */
body.site-theme-buurtpreventie .bp-blok .bp-sectiekop{color:var(--bp-inkt)}
body.site-theme-buurtpreventie .bp-blok .bp-sectiekop h2{color:var(--bp-groen)}
body.site-theme-buurtpreventie .bp-hr{border:0;border-top:1px solid var(--bp-lijn);margin:1.3rem 0 1rem}

/* ── Contactpagina: het gedeelde portal-formulier in de avondsfeer. Net als de home vult de kaart
   de héle middenkolom. Geen top-marge: zo lijnt de bovenkant van de kaart uit met de zijbalken. */
body.site-theme-buurtpreventie .bp-contact-kaart{max-width:100%;margin:0}
body.site-theme-buurtpreventie .bp-contact-kaart .portal-contact-card-v1473{margin:0;max-width:100%;width:100%}

/* ── Auth- (login/registreren/wachtwoord vergeten/2FA/bericht) én cms-info-pagina's in de avondsfeer ──
   Deze gedeelde secties hebben normaal een dekkende lichte achtergrond die de avondlucht zou afdekken.
   Voor buurtpreventie maken we ze transparant, zodat dezelfde avond-gradient (body-achtergrond) doorloopt
   als op home en contact. De rails-panelen en de kaart blijven witte kaarten en sluiten zo aan op de
   overige bp-kaarten; hier trekken we alleen hun ronding gelijk met .bp-rail-kaart. Hogere specificiteit
   (body.site-body.site-theme-…) wint van de gedeelde body[class*="site-theme-"]-regels. */
body.site-body.site-theme-buurtpreventie .portal-auth-v148,
body.site-body.site-theme-buurtpreventie .portal-contact-v1473{background:transparent}
body.site-theme-buurtpreventie .portal-auth-card-v148,
body.site-theme-buurtpreventie .portal-panel-v147{border:1.5px solid var(--bp-lijn);border-radius:1.2rem;box-shadow:0 10px 30px rgba(10,18,36,.16)}

/* nieuws */
body.site-theme-buurtpreventie .bp-nieuws-item{display:flex;gap:.8rem;padding:.65rem 0;border-bottom:1px dashed var(--bp-lijn);align-items:flex-start}
body.site-theme-buurtpreventie .bp-nieuws-item:last-child{border-bottom:none}
body.site-theme-buurtpreventie .bp-ic{flex:0 0 34px;width:34px;height:34px;border-radius:.7rem;background:var(--bp-mint);display:flex;align-items:center;justify-content:center}
body.site-theme-buurtpreventie .bp-nieuws-titel{font-size:.94rem;margin:0;font-family:"Public Sans",sans-serif;font-weight:700;color:var(--bp-inkt)}
body.site-theme-buurtpreventie .bp-nieuws-meta{font-size:.8rem;color:var(--bp-grijs);margin:.05rem 0 0}
body.site-theme-buurtpreventie .bp-plaats-tag{font-size:.68rem;font-weight:700;color:var(--bp-groen-2);background:var(--bp-mint);border-radius:.35rem;padding:.06rem .4rem;margin-right:.3rem}
body.site-theme-buurtpreventie .bp-activiteit{background:var(--bp-mint);border-radius:1rem;padding:1rem 1.2rem}
body.site-theme-buurtpreventie .bp-activiteit-kop{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bp-groen-2);font-family:"Public Sans",sans-serif;font-weight:700}

/* verschil-tabs */
body.site-theme-buurtpreventie .bp-vtabs{display:flex;flex-wrap:nowrap}
body.site-theme-buurtpreventie .bp-vtabs button{flex:1 1 0;min-width:0;min-height:52px;border:none;border-radius:0;font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:.96rem;background:var(--bp-mint);color:var(--bp-grijs);border-bottom:3px solid transparent;cursor:pointer;transition:background .18s ease,color .18s ease,border-bottom-color .18s ease}
body.site-theme-buurtpreventie .bp-vtabs button:hover:not(.actief){background:#f3f8ee;color:var(--bp-groen);border-bottom-color:var(--bp-lijn)}
body.site-theme-buurtpreventie .bp-vtabs button.actief{background:#fff;color:var(--bp-groen);border-bottom-color:var(--bp-lime)}
body.site-theme-buurtpreventie .bp-flow-rij{display:flex;gap:.85rem;padding:.72rem 0;border-bottom:1px dashed var(--bp-lijn);align-items:flex-start}
body.site-theme-buurtpreventie .bp-flow-rij:last-child{border-bottom:none}
body.site-theme-buurtpreventie .bp-flow-rij .bp-stip{flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}
body.site-theme-buurtpreventie .bp-flow-rij.min .bp-stip{background:#fbe7e2;color:#b0493a}
body.site-theme-buurtpreventie .bp-flow-rij.plus .bp-stip{background:#eef7d9;color:#5c7a2e}
body.site-theme-buurtpreventie .bp-flow-rij h3{font-size:.95rem;margin:0;font-family:"Public Sans",sans-serif;font-weight:700;color:var(--bp-inkt)}
body.site-theme-buurtpreventie .bp-flow-rij p{font-size:.88rem;color:var(--bp-grijs);margin:.1rem 0 0}
body.site-theme-buurtpreventie .bp-paneel[hidden]{display:none}
body.site-theme-buurtpreventie .bp-paneel.actief{animation:bpFadein .3s ease}
@keyframes bpFadein{from{opacity:0}to{opacity:1}}

/* vergelijkingstabel */
body.site-theme-buurtpreventie .bp-vgl{width:100%;border-collapse:collapse;font-size:.92rem}
body.site-theme-buurtpreventie .bp-vgl th:first-child{width:46%}
body.site-theme-buurtpreventie .bp-vgl th{font-family:"Fraunces",Georgia,serif;font-size:.95rem;color:var(--bp-groen);text-align:left;padding:.5rem .6rem;border-bottom:2px solid var(--bp-lijn)}
body.site-theme-buurtpreventie .bp-vgl td{padding:.5rem .6rem;border-bottom:1px dashed var(--bp-lijn)}
body.site-theme-buurtpreventie .bp-vgl tr:last-child td{border-bottom:none}
body.site-theme-buurtpreventie .bp-vgl .oud{color:var(--bp-grijs);text-decoration:line-through;text-decoration-color:#c9a49a;text-decoration-thickness:1.5px}
body.site-theme-buurtpreventie .bp-vgl .nieuw{font-weight:700;color:var(--bp-groen)}
body.site-theme-buurtpreventie .bp-vgl .nieuw::before{content:"✔ ";color:#5c7a2e}

/* flow-timeline */
/* flex-wrap:nowrap + flex:1 → de twee route-knoppen blijven ook op mobiel naast elkaar (krimpen mee). */
body.site-theme-buurtpreventie .bp-rol-tabs{display:flex;gap:.6rem;flex-wrap:nowrap;margin-bottom:1.2rem}
body.site-theme-buurtpreventie .bp-rol-tabs button{flex:1 1 0;min-width:0;border:2px solid var(--bp-lijn);background:#fff;border-radius:2rem;min-height:44px;padding:.45rem 1rem;font-weight:700;font-family:"Fraunces",Georgia,serif;color:var(--bp-grijs);cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease}
body.site-theme-buurtpreventie .bp-rol-tabs button:hover:not(.actief){border-color:var(--bp-groen-2);color:var(--bp-groen);background:var(--bp-mint)}
body.site-theme-buurtpreventie .bp-rol-tabs button.actief{border-color:var(--bp-groen);color:var(--bp-groen);background:var(--bp-mint)}
body.site-theme-buurtpreventie .bp-tl{position:relative;padding-left:2.3rem}
body.site-theme-buurtpreventie .bp-tl::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--bp-lime),var(--bp-groen))}
body.site-theme-buurtpreventie .bp-tl-stap{position:relative;padding-bottom:1.3rem}
body.site-theme-buurtpreventie .bp-tl-stap:last-child{padding-bottom:0}
body.site-theme-buurtpreventie .bp-tl-stap::before{content:"";position:absolute;left:-2.3rem;top:.18rem;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--bp-groen)}
body.site-theme-buurtpreventie .bp-tl-stap::after{content:attr(data-n);position:absolute;left:calc(-2.3rem + 7px);top:.26rem;font-size:.72rem;font-weight:800;color:var(--bp-groen)}
body.site-theme-buurtpreventie .bp-tl-stap h3{font-size:1rem;margin:0 0 .12rem;color:var(--bp-groen)}
body.site-theme-buurtpreventie .bp-tl-stap p{font-size:.9rem;color:var(--bp-grijs);margin:0}
body.site-theme-buurtpreventie .bp-tag-auto{display:inline-block;background:var(--bp-lime);color:var(--bp-groen);border-radius:.4rem;font-size:.64rem;font-weight:800;padding:.08rem .4rem;letter-spacing:.05em;margin-left:.3rem;vertical-align:middle;font-family:"Public Sans",sans-serif}

/* mijn buurt */
body.site-theme-buurtpreventie .bp-mijnbuurt{background:linear-gradient(160deg,var(--bp-avond-diep),var(--bp-avond));border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 40px rgba(8,14,28,.35);border-radius:1.4rem;padding:1.8rem;color:#c9d3e6}
body.site-theme-buurtpreventie .bp-mijnbuurt h2{color:#fff;font-size:1.2rem}
body.site-theme-buurtpreventie .bp-lime-tekst{color:var(--bp-lime)}
body.site-theme-buurtpreventie .bp-mijnbuurt-lead{font-size:.94rem;margin:.3rem 0 0}
body.site-theme-buurtpreventie .bp-mb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem;margin-top:1rem}
body.site-theme-buurtpreventie .bp-mb-item{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:.9rem;padding:.85rem 1rem;font-size:.9rem;font-weight:600;color:#fff;display:flex;gap:.55rem;align-items:center;min-height:48px}
body.site-theme-buurtpreventie .bp-mb-item .bp-vink{color:var(--bp-lime)}

/* beheerders + overzicht */
body.site-theme-buurtpreventie .bp-overzicht{background:var(--bp-avond);border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 40px rgba(8,14,28,.35);color:#c9d3e6;border-radius:1.4rem;padding:1.8rem}
body.site-theme-buurtpreventie .bp-overzicht h2{color:#fff;font-size:1.2rem}
body.site-theme-buurtpreventie .bp-check-lijst{padding:0;margin:.9rem 0 0;list-style:none}
body.site-theme-buurtpreventie .bp-check-lijst li{padding:.35rem 0 .35rem 1.9rem;position:relative;font-size:.95rem}
body.site-theme-buurtpreventie .bp-check-lijst li::before{content:"✓";position:absolute;left:0;top:.35rem;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--bp-lime);color:var(--bp-groen);font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center}
body.site-theme-buurtpreventie .bp-franeker-kop{font-size:1.12rem}
body.site-theme-buurtpreventie .bp-franeker-tekst{color:var(--bp-grijs);font-size:.92rem}
body.site-theme-buurtpreventie .bp-stat-groot{font-family:"Fraunces",Georgia,serif;font-size:1.8rem;font-weight:800;color:var(--bp-groen-2)}
body.site-theme-buurtpreventie .bp-stat-label{color:var(--bp-grijs);font-size:.82rem}

/* vertrouwen */
body.site-theme-buurtpreventie .bp-badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.7rem}
body.site-theme-buurtpreventie .bp-tr-badge{background:#fff;border:1.5px solid var(--bp-lijn);border-radius:.9rem;padding:.8rem 1rem;font-size:.9rem;font-weight:600;display:flex;gap:.55rem;align-items:center;min-height:48px}
body.site-theme-buurtpreventie .bp-tr-badge .bp-vink{width:1.35rem;height:1.35rem;flex:0 0 1.35rem;border-radius:50%;background:var(--bp-lime);color:var(--bp-groen);font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center}

/* FAQ (Bootstrap accordion tokens) */
body.site-theme-buurtpreventie .bp-accordion{--bs-accordion-border-color:var(--bp-lijn);--bs-accordion-active-bg:var(--bp-mint);--bs-accordion-active-color:var(--bp-groen);--bs-accordion-btn-focus-box-shadow:0 0 0 3px rgba(200,233,106,.6);--bs-accordion-border-radius:1rem;border-radius:1rem;overflow:hidden}
body.site-theme-buurtpreventie .bp-accordion .accordion-button{font-weight:700;font-family:"Fraunces",Georgia,serif;color:var(--bp-inkt)}
/* Hover altijd in de themakleur (groen op mint), nooit het blauwe Bootstrap-accent. */
body.site-theme-buurtpreventie .bp-accordion .accordion-button:hover{background:var(--bp-mint);color:var(--bp-groen)}
body.site-theme-buurtpreventie .bp-accordion .accordion-body{color:var(--bp-grijs)}

/* Mobiel: rails stapelen niet (ze worden door theme.js verwijderd); center full width */
@media (max-width:991.98px){
  body.site-theme-buurtpreventie .bp-band{height:420px}
  body.site-theme-buurtpreventie .bp-hero{min-height:220px}
}

/* Reduced motion: geen sterren/ramen/puls/tellers-animatie */
@media (prefers-reduced-motion:reduce){
  body.site-theme-buurtpreventie .bp-ster{animation:none}
  body.site-theme-buurtpreventie .bp-maan{animation:none;transform:translate(46vw,16px);opacity:1;will-change:auto}
  body.site-theme-buurtpreventie .bp-maan-schaduw{animation:none;transform:translateX(0);will-change:auto}
  body.site-theme-buurtpreventie .bp-raam{transition:none}
  body.site-theme-buurtpreventie .bp-paneel.actief{animation:none}
  body.site-theme-buurtpreventie *{scroll-behavior:auto}
}