/* ============================================================================
   Publieke site (startpagina + Over ons) — bron: "Fietscontrole.dc.html"
   Marketing-look: witte achtergrond, donkere hero, mint/groen accent, Lato.
   Bouwt voort op de tokens uit backoffice.css (--bo-*).
   ============================================================================ */
body.pub { margin: 0; font-family: var(--bo-font); color: var(--bo-ink); background: #fff; -webkit-font-smoothing: antialiased; line-height: 1.5; }
.pub a { text-decoration: none; }
.pub-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.pub-container { max-width: 1200px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* ---- Nav --------------------------------------------------------------- */
.pub-nav { position: sticky; top: 0; z-index: 20; height: 72px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid #E8EDEF; display: flex; align-items: center; }
.pub-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 28px; width: 100%; display: flex; align-items: center; gap: 24px; }
/* Het logo is een SVG met een zeer brede verhouding (1698 × 196): op 30px hoogte is
   het al 260px breed. Daarom max-height én max-width, zodat het op smalle schermen
   meekrimpt in plaats van de balk uit te duwen — anders vallen de knop en de
   hamburger buiten beeld en gaat de pagina horizontaal scrollen. */
.pub-brand { line-height: 0; display: inline-flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.pub-brand img { max-height: 30px; max-width: 100%; height: auto; width: auto; display: block; }
.pub-brand .b1 { font-weight: 900; font-size: 23px; color: var(--bo-side); letter-spacing: -.4px; }
.pub-brand .b2 { font-weight: 300; font-size: 23px; color: #1B9E78; }
.pub-navlinks { display: flex; align-items: center; gap: 30px; }
.pub-navlink { font-size: 15px; font-weight: 700; color: var(--bo-muted); }
.pub-navlink:hover { color: var(--bo-ink); }
.pub-navlink.active { color: var(--bo-green); }
.pub-lang { height: 38px; border: 1px solid var(--bo-border); border-radius: 9px; background: #fff; color: var(--bo-ink); font-size: 14px; font-weight: 700; padding: 0 8px; }
.pub-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 10px; font-size: 15px; font-weight: 900; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.pub-btn--green { background: var(--bo-green); color: #fff; }
.pub-btn--green:hover { background: var(--bo-green-d); color: #fff; }
.pub-btn--mint { background: var(--bo-mint); color: #0E3A2E; height: 52px; padding: 0 26px; border-radius: 12px; font-size: 16px; }
.pub-btn--ghost { background: transparent; border-color: rgba(255,255,255,.22); color: #fff; height: 52px; padding: 0 26px; border-radius: 12px; font-size: 16px; font-weight: 700; }
.pub-btn--white { background: #fff; color: var(--bo-green); height: 54px; padding: 0 30px; border-radius: 12px; font-size: 16px; }
.pub-btn--lg { height: 54px; padding: 0 30px; border-radius: 12px; font-size: 16px; }

/* ---- Hero -------------------------------------------------------------- */
.pub-main { flex: 1; }
.pub-hero { position: relative; overflow: hidden; background: var(--bo-side); }
.pub-hero-motif { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pub-hero-motif::after { content: ""; position: absolute; right: -80px; top: -120px; width: 680px; height: 680px; background: linear-gradient(135deg,transparent 47%,rgba(81,222,184,.16) 49%,transparent 51%),linear-gradient(135deg,transparent 57%,rgba(81,222,184,.11) 59%,transparent 61%),linear-gradient(135deg,transparent 67%,rgba(81,222,184,.07) 69%,transparent 71%); }
.pub-hero-grid { position: relative; max-width: 1200px; margin: 0 auto; padding: 84px 28px 92px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.pub-eyebrow { display: inline-block; padding: 7px 14px; border-radius: 30px; background: rgba(81,222,184,.14); color: var(--bo-mint); font-size: 13px; font-weight: 900; letter-spacing: .3px; margin-bottom: 22px; }
.pub-hero h1 { font-size: 52px; line-height: 1.05; font-weight: 900; color: #fff; letter-spacing: -1.4px; }
.pub-hero h1 .accent { color: var(--bo-mint); }
.pub-hero-lead { font-size: 18px; color: #AFBEC7; margin-top: 20px; max-width: 520px; line-height: 1.6; }
.pub-hero-actions { display: flex; gap: 13px; margin-top: 32px; flex-wrap: wrap; }
/* Hero preview-kaart */
.pub-preview { background: #fff; border-radius: 20px; padding: 26px; box-shadow: 0 30px 70px rgba(0,0,0,.32); }
.pub-preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pub-preview-head .lbl { font-size: 13px; font-weight: 900; color: var(--bo-muted-2); text-transform: uppercase; letter-spacing: .5px; }
.pub-preview-stage { position: relative; border-radius: 14px; background: #F2F6F7; border: 1px solid var(--bo-border-2); height: 230px; overflow: hidden; }
.pub-preview-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pub-dot { position: absolute; transform: translate(-50%,-50%); width: 30px; height: 30px; border-radius: 50%; background: #1B9E78; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; }
.pub-preview-mail { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 13px 15px; background: #EBFAF5; border: 1px solid #CDEFE4; border-radius: 11px; }
.pub-preview-mail .ico { width: 36px; height: 36px; border-radius: 9px; background: #fff; border: 1px solid #CDEFE4; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 36px; }
.pub-preview-mail .t1 { font-size: 14px; font-weight: 900; color: #0E5E48; }
.pub-preview-mail .t2 { font-size: 12.5px; color: #3F7E6C; }

/* ---- Secties ----------------------------------------------------------- */
.pub-section { max-width: 1200px; margin: 0 auto; padding: 80px 28px; }
.pub-section-head { text-align: center; max-width: 660px; margin: 0 auto 46px; }
.pub-section-head h2 { font-size: 36px; font-weight: 900; color: var(--bo-ink); letter-spacing: -.9px; }
.pub-section-head p { font-size: 17px; color: var(--bo-muted); margin-top: 12px; }
.pub-h2c { font-size: 30px; font-weight: 900; color: var(--bo-ink); letter-spacing: -.7px; text-align: center; margin-bottom: 46px; }

/* Rollen */
.pub-roles { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.pub-role { background: #fff; border: 1px solid var(--bo-border-2); border-radius: 16px; padding: 28px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.pub-role .ico { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900; margin-bottom: 18px; }
.pub-role h3 { font-size: 20px; font-weight: 900; color: var(--bo-ink); }
.pub-role p { font-size: 15px; color: var(--bo-muted); margin-top: 8px; line-height: 1.6; }
.ico--green { background: var(--bo-green-bg); color: var(--bo-green-ink); }
.ico--blue { background: #E6EEF3; color: #3A5A70; }
.ico--orange { background: #FDECDC; color: #B5651D; }

/* Stappen */
.pub-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.pub-step .n { width: 44px; height: 44px; border-radius: 12px; background: var(--bo-side); color: var(--bo-mint); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; margin-bottom: 16px; }
.pub-step h4 { font-size: 17px; font-weight: 900; color: var(--bo-ink); }
.pub-step p { font-size: 14.5px; color: var(--bo-muted); margin-top: 6px; line-height: 1.55; }

/* Stats-band */
.pub-stats-band { background: #F4F7F8; border-top: 1px solid #E8EDEF; border-bottom: 1px solid #E8EDEF; }
.pub-stats { max-width: 1200px; margin: 0 auto; padding: 52px 28px; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.pub-stat .v { font-size: 42px; font-weight: 900; color: var(--bo-green); letter-spacing: -1.5px; }
.pub-stat .l { font-size: 14.5px; color: var(--bo-muted); font-weight: 700; margin-top: 4px; }

/* CTA */
.pub-cta { position: relative; overflow: hidden; background: var(--bo-green); border-radius: 22px; padding: 54px 56px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.pub-cta::after { content: ""; pointer-events: none; position: absolute; right: -40px; bottom: -120px; width: 420px; height: 420px; background: linear-gradient(135deg,transparent 48%,rgba(255,255,255,.10) 50%,transparent 52%),linear-gradient(135deg,transparent 58%,rgba(255,255,255,.06) 60%,transparent 62%); }
.pub-cta h2 { font-size: 30px; font-weight: 900; color: #fff; letter-spacing: -.6px; position: relative; }
.pub-cta p { font-size: 16px; color: #CFEDE3; margin-top: 8px; max-width: 460px; position: relative; }
.pub-cta .pub-btn { position: relative; z-index: 1; }

/* ---- Over ons ---------------------------------------------------------- */
.pub-hero--narrow .pub-hero-grid, .pub-over-hero-inner { position: relative; max-width: 820px; margin: 0 auto; padding: 74px 28px; }
.pub-over-hero h1 { font-size: 44px; line-height: 1.08; font-weight: 900; color: #fff; letter-spacing: -1.1px; }
.pub-over-hero p { font-size: 18px; color: #AFBEC7; margin-top: 18px; line-height: 1.6; }
.pub-prose { max-width: 820px; margin: 0 auto; padding: 60px 28px 20px; }
.pub-prose h2 { font-size: 24px; font-weight: 900; color: var(--bo-ink); letter-spacing: -.5px; margin-bottom: 10px; }
.pub-prose p { font-size: 16.5px; color: var(--bo-ink-2); line-height: 1.7; }
.pub-prose .block + .block { margin-top: 26px; }
/* Links in beheerde tekst kregen de browserkleuren (blauw, paars na bezoek); in de
   sitestijl horen ze groen. */
.pub-prose a:not(.pub-btn) { color: var(--bo-green); font-weight: 700; text-decoration: none; }
.pub-prose a:not(.pub-btn):hover { color: var(--bo-green-ink); text-decoration: underline; }
/* Rich-text (privacy-secties uit de DB) */
.pub-richtext { font-size: 16.5px; color: var(--bo-ink-2); line-height: 1.7; }
.pub-richtext p { margin: 0 0 .85rem; }
.pub-richtext ul, .pub-richtext ol { margin: 0 0 .85rem 1.25rem; }
.pub-richtext li { margin-bottom: .3rem; }
.pub-richtext a { color: var(--bo-green); font-weight: 700; }
.pub-richtext h3, .pub-richtext h4 { font-size: 18px; font-weight: 900; color: var(--bo-ink); margin: 1.1rem 0 .4rem; }
.pub-richtext strong { color: var(--bo-ink); }

.pub-timeline { position: relative; padding-left: 30px; }
.pub-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: #DCE9E5; }
.pub-tl-item { position: relative; padding-bottom: 22px; }
.pub-tl-item .dot { position: absolute; left: -30px; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; }
.pub-tl-item .jaar { font-size: 13px; font-weight: 900; color: var(--bo-green); letter-spacing: .3px; }
.pub-tl-item .titel { font-size: 17px; font-weight: 900; color: var(--bo-ink); margin-top: 1px; }
.pub-tl-item p { font-size: 15px; color: var(--bo-muted); margin-top: 4px; line-height: 1.6; max-width: 560px; }
.pub-note-italic { font-size: 13px; color: #9AA7B0; font-style: italic; margin-top: 2px; }
.pub-vias-callout { padding: 24px 26px; background: #EBFAF5; border: 1px solid #CDEFE4; border-radius: 16px; }
.pub-vias-callout h2 { font-size: 22px; font-weight: 900; color: #0E5E48; letter-spacing: -.4px; margin-bottom: 8px; }
.pub-vias-callout p { font-size: 16px; color: #1F5C4A; line-height: 1.7; }
.pub-vias-callout .brandrow { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.pub-vias-callout .brandrow img { height: 34px; width: auto; object-fit: contain; }
/* Het Vias-logo heeft ruime witruimte in het bestand; iets groter zetten laat beide
   merktekens even zwaar wegen. */
.pub-vias-callout .brandrow img.vias { height: 44px; }
.pub-vias-callout .brandrow .x { color: #8FB7AC; font-size: 18px; }
.pub-values { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 40px; }
.pub-value { background: #fff; border: 1px solid var(--bo-border-2); border-radius: 14px; padding: 22px; }
.pub-value .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--bo-green-bg); color: var(--bo-green-ink); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; margin-bottom: 14px; }
.pub-value h4 { font-size: 16.5px; font-weight: 900; color: var(--bo-ink); }
.pub-value p { font-size: 14.5px; color: var(--bo-muted); margin-top: 5px; line-height: 1.55; }
.pub-partners { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin-top: 20px; }
.pub-partner { width: 100%; height: 96px; border: 1px dashed #C4CED4; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #9AA7B0; font-size: 13px; font-weight: 700; background: var(--bo-surface-2); }
.pub-contact { margin-top: 40px; padding: 24px 26px; border: 1px solid var(--bo-border-2); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pub-contact .k { font-size: 13px; font-weight: 900; color: var(--bo-muted-2); text-transform: uppercase; letter-spacing: .5px; }
.pub-contact p { font-size: 16px; color: var(--bo-ink); margin-top: 6px; }
/* Enkel de tekstlinks (bv. het mailadres) groen kleuren. Zonder de :not() gold deze
   regel ook voor de knop in dit blok: die kreeg groene tekst op een groene achtergrond
   en werd pas leesbaar bij hover, wanneer .pub-btn--green:hover de kleur terugzette. */
.pub-contact a:not(.pub-btn) { color: var(--bo-green); font-weight: 700; }

/* ---- Footer ------------------------------------------------------------ */
.pub-footer { background: var(--bo-ink); color: #9DAAB3; margin-top: 40px; }
.pub-footer-top { max-width: 1200px; margin: 0 auto; padding: 46px 28px; display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.pub-footer .brand { line-height: 0; margin-bottom: 12px; }
/* Inverse logovariant op de donkere footer. */
.pub-footer .brand img { height: 26px; width: auto; display: block; }
.pub-footer .brand .b1 { font-weight: 900; font-size: 20px; color: #fff; }
.pub-footer .brand .b2 { font-weight: 300; font-size: 20px; color: var(--bo-mint); }
.pub-footer .intro { max-width: 320px; font-size: 14px; line-height: 1.6; }
.pub-footer-cols { display: flex; gap: 54px; flex-wrap: wrap; }
.pub-footer-col .h { font-size: 12px; font-weight: 900; color: #67757F; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.pub-footer-col .links { display: flex; flex-direction: column; gap: 9px; }
.pub-footer-col .links a { font-size: 14.5px; color: #C5D2D9; }
.pub-footer-col .links a:hover { color: #fff; }
.pub-footer-bar { border-top: 1px solid rgba(255,255,255,.08); }
.pub-footer-bar div { max-width: 1200px; margin: 0 auto; padding: 18px 28px; font-size: 13px; color: #67757F; }

/* ---- Hamburger --------------------------------------------------------- */
/* De knoppen rechts in de balk blijven op elk formaat zichtbaar en krimpen niet mee. */
.pub-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pub-burger { display: none; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .pub-hero-grid { grid-template-columns: 1fr; gap: 32px; padding: 56px 28px 64px; }
  .pub-hero h1 { font-size: 40px; }
  .pub-roles, .pub-steps, .pub-stats, .pub-values { grid-template-columns: 1fr; }
  .pub-stats { gap: 28px; }
  .pub-partners { grid-template-columns: repeat(2,1fr); }

  /* Menu-items uit de balk halen en in een uitklappaneel onder de header zetten.
     Vroeger stond hier enkel display:none, waardoor ze op mobiel onbereikbaar waren. */
  .pub-navlinks {
    position: fixed; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid #E8EDEF;
    box-shadow: 0 12px 24px rgba(43,61,74,.10);
    padding: 8px 0; z-index: 19;
    /* Buiten beeld i.p.v. display:none, zodat de overgang vloeiend blijft en de
       links niet uit de toetsenbordvolgorde springen zolang het paneel opengaat. */
    transform: translateY(-12px);
    opacity: 0; visibility: hidden;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .pub-navlinks.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

  .pub-navlinks .pub-navlink {
    display: block; padding: 14px 28px; font-size: 16px;
    border-bottom: 1px solid #F1F5F6;
  }
  .pub-navlinks .pub-navlink:last-of-type { border-bottom: 0; }
  .pub-navlinks .pub-lang { margin: 10px 28px; }

  /* Hamburgerknop: drie streepjes die bij openen een kruisje vormen. */
  .pub-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px;   /* ruim genoeg als touch-target */
    background: none; border: 0; cursor: pointer; border-radius: 8px;
  }
  .pub-burger:focus-visible { outline: 2px solid var(--bo-green); outline-offset: 2px; }
  .pub-burger span {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--bo-ink); transition: transform .16s ease, opacity .16s ease;
  }
  .pub-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .pub-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .pub-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Achtergrond niet mee laten scrollen zolang het paneel openstaat. */
  body.pub-menu-open { overflow: hidden; }
}

/* Op smalle telefoons de inlogknop compacter, zodat logo + knop + hamburger passen. */
@media (max-width: 420px) {
  .pub-nav-inner { padding: 0 16px; gap: 12px; }
  .pub-nav-actions .pub-btn { padding: 8px 14px; font-size: 14px; }
}

/* ---- Nieuwe publieke pagina's (fase 7) --------------------------------- */
.pub-h1 { font-size: 34px; font-weight: 900; letter-spacing: -.6px; color: var(--bo-ink); margin-bottom: 18px; }
.pub-h2 { font-size: 22px; font-weight: 900; color: var(--bo-ink); margin: 34px 0 12px; }
.pub-h3 { font-size: 17px; font-weight: 900; color: var(--bo-ink); margin: 22px 0 8px; }
.pub-block { margin-bottom: 30px; }

/* "Hoe werkt het": tekst met een meescrollende inhoudsopgave ernaast. De opsomming stond
   eerst als een balk bovenaan, maar las niet als links (feedback Vias). */
.pub-hwh { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 0 30px; align-items: start;
           max-width: 1180px; margin: 0 auto; padding: 0 28px; }
/* De titel loopt over beide kolommen; daaronder de tekst links en de inhoudsopgave rechts. */
.pub-hwh-kop { grid-column: 1 / -1; padding: 46px 0 0; }
.pub-hwh-body { padding: 14px 0 20px; max-width: none; margin: 0; }
.pub-hwh-nav { order: 2; position: sticky; top: 92px; margin-top: 14px; }
.pub-hwh-nav-in { background: var(--bo-surface-2); border: 1px solid var(--bo-border-2); border-radius: 14px; padding: 16px 18px; }
.pub-hwh-nav-in > summary { display: flex; align-items: center; justify-content: space-between;
                            font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px;
                            color: var(--bo-muted-2); list-style: none; cursor: default; }
.pub-hwh-nav-in > summary::-webkit-details-marker { display: none; }
.pub-hwh-nav ul { list-style: none; margin: 12px 0 0; padding: 0; }
.pub-hwh-nav li { margin-bottom: 2px; }
.pub-hwh-nav a { display: block; padding: 7px 10px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0;
                 font-size: 14px; font-weight: 700; color: var(--bo-muted); text-decoration: none; line-height: 1.35; }
.pub-hwh-nav a:hover { color: var(--bo-green); background: #fff; }
/* Actieve sectie: gezet door publiek-hwh.js. */
.pub-hwh-nav a.actief { color: var(--bo-green); background: #fff; border-left-color: var(--bo-green); }
/* De koppen mogen bij een ankersprong niet onder de vaste header verdwijnen. */
.pub-hwh-body > .pub-block { scroll-margin-top: 96px; }
/* Naast de inhoudsopgave is de tekstkolom smaller: vijf stappen naast elkaar zouden
   daar tot losse woorden per regel herleid worden. */
.pub-hwh-body .pub-steps--5 { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }

@media (max-width: 1000px) {
  .pub-hwh { grid-template-columns: 1fr; padding: 0 22px; }
  .pub-hwh-kop { order: 0; padding-top: 34px; }
  .pub-hwh-nav { order: 1; position: static; margin: 8px 0 0; }
  /* Op smal scherm klapt de lijst open en dicht; dat moet ook te zien zijn. */
  .pub-hwh-nav-in > summary { cursor: pointer; }
  .pub-hwh-nav-in > summary::after { content: ""; width: 9px; height: 9px;
                                     border-right: 2px solid var(--bo-muted-2); border-bottom: 2px solid var(--bo-muted-2);
                                     transform: rotate(45deg) translate(-2px, -2px); }
  .pub-hwh-nav-in[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .pub-hwh-body { order: 2; padding-top: 14px; }
}

/* Terug naar boven: stond in linkblauw i.p.v. de sitestijl (feedback Vias). */
.pub-toplink { font-size: 14px; font-weight: 700; color: var(--bo-green); text-decoration: none; }
.pub-toplink:hover { color: var(--bo-green-ink); text-decoration: underline; }
.pub-terug { margin-top: 14px; }

/* Controlepunten per voertuigcategorie: uitklapbaar, met de voertuigtekening als icoon. */
.pub-cpblok { border: 1px solid var(--bo-border-2); border-radius: 12px; background: #fff; margin-bottom: 10px; }
.pub-cpblok > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer;
                        font-size: 16px; font-weight: 800; color: var(--bo-ink); list-style: none; }
/* display:flex laat het standaard driehoekje verdwijnen; vandaar een eigen chevron. */
.pub-cpblok > summary::-webkit-details-marker { display: none; }
.pub-cpblok > summary .naam { flex: 1 1 auto; }
.pub-cpblok > summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px;
                               border-right: 2px solid var(--bo-muted-2); border-bottom: 2px solid var(--bo-muted-2);
                               transform: rotate(45deg) translate(-2px, -2px); }
.pub-cpblok[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--bo-green); }
.pub-cpblok[open] > summary { color: var(--bo-green); border-bottom: 1px solid var(--bo-border-2); }
.pub-cpblok > summary .ico { display: flex; align-items: center; justify-content: center; flex: 0 0 40px;
                             width: 40px; height: 40px; border-radius: 10px; background: var(--bo-green-bg); }
.pub-cpblok > summary .ico svg { width: 28px; height: 28px; }
.pub-cpblok-in { padding: 14px 16px 4px; }
.pub-cpblok-in h4 { font-size: 14px; font-weight: 800; color: var(--bo-ink); margin-bottom: 4px; }

.pub-cplijst { margin: 0 0 14px 18px; }
.pub-cplijst li { margin-bottom: 4px; }

/* FAQ: uitklapbaar met <details>, dus zonder JavaScript. */
.pub-faq { border: 1px solid var(--bo-border-2); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; background: #fff; }
.pub-faq > summary { font-weight: 800; cursor: pointer; color: var(--bo-ink); }
.pub-faq[open] > summary { color: var(--bo-green); margin-bottom: 8px; }
.pub-faq-antwoord { font-size: 15px; color: var(--bo-muted); }

/* Contactformulier */
.pub-contact-blok { margin-top: 46px; padding: 26px; border: 1px solid var(--bo-border-2); border-radius: 16px; background: #fff; }
.pub-contact-blok .k { font-size: 13px; font-weight: 900; color: var(--bo-muted-2); text-transform: uppercase; letter-spacing: .5px; }
.pub-contact-blok a:not(.pub-btn) { color: var(--bo-green); font-weight: 700; }
.pub-contactform { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.pub-formrij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pub-label { display: block; font-size: 13px; font-weight: 800; color: var(--bo-muted); margin-bottom: 5px; }

/* De publieke layout laadt bewust geen Bootstrap, dus .form-control bestaat hier niet:
   zonder eigen stijl vielen alle velden terug op de browserbreedte van ~175px. */
.pub-input,
.pub-textarea {
  /* border-box: de publieke layout laadt geen Bootstrap en dus ook geen reset. Met de
     standaard content-box telt de padding bovenop width:100% en liep "Voornaam" over
     "Naam" heen. */
  box-sizing: border-box;
  display: block; width: 100%; padding: 10px 12px;
  font: inherit; font-size: 15px; color: var(--bo-ink); background: #fff;
  border: 1px solid var(--bo-border-2); border-radius: 10px;
}
.pub-input:focus,
.pub-textarea:focus {
  outline: none; border-color: var(--bo-green);
  box-shadow: 0 0 0 3px rgba(20, 116, 82, .15);
}
.pub-textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.pub-veldfout { display: block; margin-top: 4px; font-size: 13px; color: #B42318; }
/* Zonder foutmelding mag de span geen ruimte innemen: anders staan de rijen te ver uiteen. */
.pub-veldfout:empty { display: none; }
.pub-input.invoer-fout,
.pub-textarea.invoer-fout { border-color: #B42318; }

/* Captcha: afbeelding naast het invulveld.
   flex-start in plaats van flex-end: bij een foutmelding groeit het veldblok naar onder,
   en met flex-end schoof de afbeelding — en daarmee de hele knop eronder — mee omlaag. */
.pub-captcha { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.pub-captcha .beeld { line-height: 0; padding-top: 22px; }   /* op één lijn met het invoervak */
.pub-captcha .veld { flex: 0 1 220px; }
/* Ruimte voor de foutmelding staat er altijd, zodat het formulier niet verspringt zodra
   ze verschijnt. */
.pub-captcha .veld .pub-veldfout { min-height: 40px; }   /* twee regels melding */
.pub-captcha .veld .pub-veldfout:empty { display: block; }

/* Lokvakje voor bots: uit beeld, maar niet display:none — dat slaan invullers over. */
.pub-lokvak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pub-footer-logos { margin-bottom: 8px; display: flex; gap: 18px; flex-wrap: wrap; }
.pub-footer-logos a { color: #9DAAB3; font-weight: 700; }
.pub-footer-bar a { color: #9DAAB3; text-decoration: underline; }

@media (max-width: 700px) {
  .pub-formrij { grid-template-columns: 1fr; }
  .pub-h1 { font-size: 28px; }
}
/* Vijf stappen i.p.v. vier (contentdocument); op smal scherm onder elkaar. */
.pub-steps--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .pub-steps--5 { grid-template-columns: 1fr; } }
/* Aangeleverde rol-iconen in het bestaande gekleurde vierkant. De viewBox van de SVG's is
   strak op de tekening gesneden (ze stonden met ruime witruimte in een vierkant van 450),
   zodat het icoon het vak echt vult en leesbaar blijft. */
.pub-role .ico img { width: 42px; height: 42px; object-fit: contain; }

/* ---- Ingesloten video (tekstblok met een YouTube-verwijzing) -----------
   Verhouding via aspect-ratio in plaats van vaste breedte en hoogte: op een
   telefoon moet het kader meeschalen met de kolom eromheen. Een iframe zonder
   deze regels valt terug op de browserstandaard van 300x150, en dat is precies
   wat er gebeurde toen ze in fietscontrole.css stonden: de publieke layout
   laadt dat bestand niet. */
.video-kader { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; margin: 1rem 0; }
.video-kader iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }