/* Boekhouder-landingspagina — lichte, persoonlijke opzet (Google Ads) */

:root {
    --bk-accent: #e84e7e;
    --bk-accent-dark: #d41f6b;
    --bk-ink: #1a1a2e;
    --bk-text: #3f4451;
    --bk-muted: #6b7280;
    --bk-bg: #f6f7fb;
    --bk-card: #ffffff;
    --bk-border: #e7e9f0;
    --bk-shadow: 0 10px 30px rgba(26, 26, 46, 0.07);
}

* { box-sizing: border-box; }

/* De gedeelde navbar (navbar.css) staat fixed; ankers moeten er niet achter landen. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body.bk-page {
    margin: 0;
    padding-top: 70px;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--bk-text);
    background: var(--bk-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: anywhere;
}

.bk-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

/* De gedeelde navbar uitlijnen op het smallere bk-grid. */
body.bk-page .navbar-custom > .container {
    max-width: 1080px;
    padding-left: 20px;
    padding-right: 20px;
}

/* ---- Buttons ---- */
.bk-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.bk-btn-primary {
    background: var(--bk-accent);
    color: #fff;
    box-shadow: 0 8px 22px rgba(232, 78, 126, 0.28);
}
.bk-btn-primary:hover {
    background: var(--bk-accent-dark);
    color: #fff;
    transform: translateY(-2px);
}
.bk-btn-ghost {
    background: #fff;
    color: var(--bk-ink);
    border-color: var(--bk-border);
}
.bk-btn-ghost:hover {
    border-color: var(--bk-accent);
    color: var(--bk-accent);
    transform: translateY(-2px);
}

/* ---- Hero ---- */
.bk-hero { padding: 56px 0 40px; }
.bk-hero-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    align-items: center;
}
.bk-portrait {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 24px;
    border: 4px solid #fff;
    box-shadow: var(--bk-shadow);
    animation: bk-fade-in .5s ease both;
}
.bk-portrait--product {
    max-width: 460px;
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid var(--bk-border);
}
.bk-hero-grid--product {
    grid-template-columns: 440px 1fr;
}
@keyframes bk-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bk-portrait, .bk-hero-image { animation: none; }
}
.bk-eyebrow {
    display: inline-block;
    background: rgba(232, 78, 126, 0.1);
    color: var(--bk-accent-dark);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 16px;
}
.bk-hero h1 {
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--bk-ink);
    margin: 0 0 12px;
}
.bk-hero h1 .bk-plaats { color: var(--bk-accent); }
.bk-credentials {
    font-weight: 600;
    color: var(--bk-ink);
    margin: 0 0 14px;
}
.bk-credentials .bk-dot { color: var(--bk-accent); margin: 0 6px; }
.bk-lead {
    font-size: 1.08rem;
    color: var(--bk-text);
    margin: 0 0 26px;
    max-width: 56ch;
}
.bk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.bk-cta-sub {
    margin: 12px 0 0;
    font-size: 0.92rem;
    color: var(--bk-text);
    opacity: 0.78;
}

.bk-field-error {
    margin: 4px 0 0;
    font-size: 0.84rem;
    color: #c0245a;
}

/* Anchor-offset zodat de sticky topbar de formulier-kop niet afdekt */
#contact { scroll-margin-top: 84px; }

/* ---- Pijler-kaarten ---- */
.bk-section { padding: 24px 0; }
.bk-section--cta { padding-top: 40px; }
.bk-section--cta::before {
    content: "";
    display: block;
    width: 64px;
    height: 1px;
    margin: 0 auto 40px;
    background: var(--bk-border);
}
.bk-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.bk-pillars--two { grid-template-columns: repeat(2, 1fr); }

/* Optionele praktijksecties op brancheproposities. */
.bk-hero-grid--praktijk,
.bk-praktijk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    align-items: center;
}
.bk-hero-grid--praktijk > picture { order: 2; min-width: 0; }
.bk-hero-grid--praktijk .bk-portrait--product { max-width: 100%; }
.bk-praktijk-grid { align-items: start; }
.bk-praktijk-intro { max-width: 65ch; margin: 0 0 1rem; }
.bk-praktijk-stappen { padding-left: 1.4rem; margin: 1.5rem 0 0; }
.bk-praktijk-stappen li { padding-left: 0.5rem; margin-bottom: 1rem; }
.bk-praktijk-rekening { padding: 1.75rem; }
.bk-praktijk-rekening h3 { margin: 0 0 1.5rem; }
.bk-praktijk-rekening table { width: 100%; border-collapse: collapse; }
.bk-praktijk-rekening th,
.bk-praktijk-rekening td { padding: 1rem 0; text-align: left; vertical-align: top; }
.bk-praktijk-rekening td,
.bk-praktijk-rekening thead th:last-child { text-align: right; padding-left: 1rem; white-space: nowrap; }
.bk-praktijk-rekening small { display: block; margin-top: 0.3rem; font-weight: 400; }
.bk-praktijk-noot { margin: 1.25rem 0 0; font-size: 0.8rem; }
.bk-rolverdeling { margin: 1.25rem 0 0; font-size: 0.88rem; max-width: 90ch; }
.bk-praktijk-link { display: inline-block; padding: 0.75rem 0; }
.bk-koppelstappen { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.bk-koppel-endpoint { margin: 0 0 1rem; }
.bk-koppel-endpoint code { overflow-wrap: anywhere; }
@media (max-width: 991px) {
    .bk-hero-grid--praktijk,
    .bk-praktijk-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}
@media (max-width: 480px) {
    .bk-praktijk-rekening { padding: 1.25rem; }
}
.bk-card {
    display: flex;
    flex-direction: column;
    min-width: 0;                 /* voorkomt dat brede inhoud de grid-kolom oprekt */
    background: var(--bk-card);
    border: 1px solid var(--bk-border);
    border-radius: 18px;
    padding: 26px 24px;
    box-shadow: var(--bk-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.bk-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(26, 26, 46, 0.1);
}
.bk-card h3 {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--bk-ink);
    margin: 0 0 8px;
}
.bk-card p { margin: 0; font-size: 0.96rem; color: var(--bk-text); }
.bk-card .bk-card-note {
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bk-accent-dark);
}
.bk-card .bk-card-note i { color: var(--bk-accent); font-size: 0.85rem; }

/* ---- Klikbare uitklap-kaarten — "Waar het ingewikkeld wordt" ----
   De kaarten staan in een normaal 3-koloms grid. Bij klik schuift JS het bijbehorende
   .bk-card-panel als grid-item (grid-column: 1 / -1) ná de laatste kaart van de rij, zodat
   de uitwerking over de VOLLE breedte direct onder de rij verschijnt. Op mobiel (1 kolom)
   is "de rij" één kaart, dus het paneel komt direct onder die kaart. */
.bk-card[role="button"] {
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.bk-card[role="button"]:focus-visible {
    outline: 2px solid var(--bk-accent);
    outline-offset: 2px;
}
.bk-card[aria-expanded="true"] {
    border-color: rgba(232, 78, 126, 0.45);
    box-shadow: 0 16px 36px rgba(26, 26, 46, 0.1);
}

/* Uitklap-hint: altijd onderaan de kaart, zodat hij over alle kaarten gelijk uitlijnt */
.bk-card .bk-card-note {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--bk-border);
    align-items: center;
}
.bk-card .bk-card-note i { transition: transform 0.2s ease; }
.bk-card[aria-expanded="true"] .bk-card-note i { transform: rotate(180deg); }
.bk-card-note-open { display: none; }
.bk-card[aria-expanded="true"] .bk-card-note-closed { display: none; }
.bk-card[aria-expanded="true"] .bk-card-note-open { display: inline; }

/* De uitwerking: volle-breedte paneel onder de rij */
.bk-card-panel {
    grid-column: 1 / -1;
    min-width: 0;                 /* breed kind (o.a. <pre>) mag de kolom niet oprekken */
    background: var(--bk-card);
    border: 1px solid rgba(232, 78, 126, 0.35);
    border-radius: 18px;
    box-shadow: var(--bk-shadow);
    padding: 24px 28px;
    color: var(--bk-text);
    font-size: 0.98rem;
    line-height: 1.6;
}
.bk-card-panel[hidden] { display: none; }
/* Code-blok scrollt horizontaal binnen het paneel i.p.v. de pagina open te duwen */
.bk-card-panel pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bk-ink);
    color: #f3f4f6;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0 0 14px;
}
.bk-card-panel pre code { background: none; color: inherit; padding: 0; }
.bk-card-panel p { margin: 0 0 12px; }
.bk-card-panel p:last-child { margin-bottom: 0; }
.bk-card-panel strong { color: var(--bk-ink); }
.bk-card-panel em { color: var(--bk-accent-dark); font-style: normal; font-weight: 600; }
/* Sub-koppen binnen een paneel (meerdere onderwerpen in één kaart, bv. "Praktisch") */
.bk-card-panel h4 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--bk-ink);
    margin: 22px 0 8px;
    padding-top: 18px;
    border-top: 1px solid var(--bk-border);
    scroll-margin-top: 90px;                 /* deeplink-offset onder sticky topbar */
}
.bk-card-panel h4:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.bk-card-panel .bk-spec-lijst { margin: 0 0 12px; }

/* ---- Aanspreekpunt-band ---- */
.bk-band {
    border-radius: 22px;
    padding: 36px 40px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.bk-band-text { flex: 1 1 280px; }
.bk-band-text h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 6px; }
.bk-band-text p { margin: 0; }
.bk-band-divider { border: 0; border-top: 1px solid; margin: 16px 0 14px; }
.bk-band-text .bk-band-example { font-size: 0.92rem; }

/* ---- Contactformulier ---- */
.bk-form-card {
    background: var(--bk-card);
    border: 1px solid var(--bk-border);
    border-radius: 22px;
    box-shadow: var(--bk-shadow);
    padding: 40px;
    max-width: 640px;
    margin: 0 auto;
}
.bk-form-card h2 {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--bk-ink);
    margin: 0 0 6px;
    text-align: center;
}
.bk-form-card .bk-form-sub {
    text-align: center;
    color: var(--bk-muted);
    margin: 0 0 24px;
}
.bk-form-card label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bk-ink);
    margin-bottom: 4px;
    display: block;
}
.bk-form-card .form-control {
    border-radius: 12px;
    border: 1px solid var(--bk-border);
    padding: 11px 14px;
}
.bk-form-card .form-control:focus {
    border-color: var(--bk-accent);
    box-shadow: 0 0 0 3px rgba(232, 78, 126, 0.15);
}
.bk-form-note {
    text-align: center;
    color: var(--bk-muted);
    font-size: 0.88rem;
    margin: 16px 0 0;
}

/* ---- Bedankt-state ---- */
body.bk-page-thanks { display: flex; flex-direction: column; min-height: 100vh; }
.bk-thanks-section {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    padding: 56px 0;
}
.bk-thanks-section .bk-container { width: 100%; }
.bk-page-thanks .bk-footer { flex-shrink: 0; margin-top: 0; }

.bk-thanks { text-align: center; }
.bk-thanks p { margin: 0 0 12px; color: var(--bk-text); }
.bk-thanks .bk-actions { margin-top: 24px; }
.bk-thanks-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: rgba(232, 78, 126, 0.1);
    color: var(--bk-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
}
.bk-thanks-contact {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--bk-border);
    color: var(--bk-muted);
    font-size: 0.94rem;
}
.bk-thanks-contact i { color: var(--bk-accent); margin-right: 6px; }

/* ---- Footer ---- */
.bk-footer {
    margin-top: 48px;
    background: #fff;
    border-top: 1px solid var(--bk-border);
    padding: 28px 0;
    color: var(--bk-muted);
    font-size: 0.92rem;
    text-align: center;
}
.bk-footer a { color: var(--bk-accent); text-decoration: none; }
.bk-footer a:hover { text-decoration: underline; }
.bk-footer-loc { color: var(--bk-ink); font-weight: 600; }
.bk-footer-links { margin: 0 0 10px; line-height: 1.9; }
.bk-footer-social { display: inline-block; margin: 0 0 10px; }
.bk-footer-social a { white-space: nowrap; }
.bk-footer .bk-container { display: block; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .bk-hero-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
    .bk-hero-grid > div { order: 1; }
    .bk-hero-grid > .bk-portrait { order: 2; }
    .bk-hero-grid--product > .ff-agent { order: 2; }
    .bk-portrait { max-width: 240px; margin: 0 auto; }
    .bk-portrait--product { max-width: 440px; }
    /* De hero centreert kop en eyebrow, maar de lead loopt op een telefoon op
       tot 13 regels; gecentreerd is dat aan beide zijden rafelig. */
    .bk-lead { margin-left: auto; margin-right: auto; text-align: left; }
    .bk-actions { justify-content: center; }
    .bk-pillars { grid-template-columns: 1fr; }
    /* Gecentreerde pijler-kaartjes op iPad/mobiel (alleen boekhouder-pagina) */
    .bk-pillars--center .bk-card {
        max-width: 460px;
        margin-inline: auto;
        align-items: center;
        text-align: center;
    }
}
@media (max-width: 575px) {
    .bk-hero { padding: 28px 0 24px; }
    .bk-hero-grid { gap: 22px; }
    .bk-portrait { max-width: 200px; }
    .bk-portrait--product { max-width: 100%; }
    .bk-form-card { padding: 28px 20px; }
    .bk-band { padding: 28px 24px; }

    /* Compactere knoppen op mobiel */
    .bk-btn {
        padding: 11px 18px;
        font-size: 0.92rem;
        gap: 7px;
    }

    /* Strakke, vollebreedte actie-knoppen (hero + formulier) */
    .bk-actions { gap: 10px; width: 100%; }
    .bk-actions .bk-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 12px 16px;
        line-height: 1.25;
    }

}
@media (max-width: 380px) {
    .bk-btn { font-size: 0.88rem; }
}
.bk-hero-grid--single .bk-lead {
    margin-left: auto;
    margin-right: auto;
}
.bk-hero-grid--single .bk-actions {
    justify-content: center;
}
.bk-section-sub {
    text-align: center;
    color: var(--bk-muted);
    margin: 0 auto 28px;
    max-width: 620px;
}

/* Workflow-stappen — tijdlijn met verticale verbindingslijn (zoals /service/) */
.bk-steps {
    display: grid;
    gap: 16px;
}
.bk-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
/* Stond tot 25-08-2026 als een roze verloopstreep met cirkels erop. De taal
   heeft geen icoon-cirkels en geen gradients: een haarlijn met mono-cijfers. */
.bk-step::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 22px;
    width: 1px;
    height: calc(100% - 6px);
    background: var(--ff-rule-soft, #DFE3E9);
    z-index: 0;
}
.bk-step:last-child::before { display: none; }
.bk-step-num {
    position: relative;
    z-index: 1;
    flex: 0 0 28px;
    width: 28px;
    border-radius: 0;
    background: var(--ff-sheet, #fff);
    color: var(--ff-magenta-ink, #B8305C);
    font-family: var(--ff-mono, ui-monospace, monospace);
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 1.5;
    padding-top: 0.15rem;
    display: block;
    text-align: left;
}
.bk-step-body {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--ff-sheet, #fff);
    border: 1px solid var(--ff-rule-soft, #DFE3E9);
    border-radius: 0;
    box-shadow: none;
    padding: 1.25rem 1.5rem;
}
.bk-step-body h3 {
    margin: 2px 0 6px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bk-ink);
}
.bk-step-body h3 i {
    display: none;   /* het icoon vóór de kop hoort niet in de taal */
}
.bk-step-body p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--bk-text);
}
.bk-pakket-cta .bk-btn {
    width: 100%;
    justify-content: center;
}

/* Prijs-regel onderaan een bk-card (gebruikt op de diensten-sectie)
   .bk-card p heeft margin:0 met hogere specificiteit dan een enkel-class-selector,
   dus margin-top:auto wordt anders niet toegepast — vandaar de bump naar `.bk-card p.bk-card-price`. */
.bk-card p.bk-card-price {
    margin: auto 0 0;            /* margin-top:auto pusht het blok naar de onderkant van de flex-card */
    padding-top: 14px;
    border-top: 1px dashed var(--bk-border);
    font-size: 0.95rem;
    color: var(--bk-ink);
    line-height: 1.5;
}

/* Intro-band boven de vergelijkingstabel (binnen de sectie) */
.bk-band--intro { margin-bottom: 24px; }

/* ----- Responsive: boekhoudsysteem ----- */
@media (max-width: 575px) {
    /* Mobiel: nummer BOVEN de kaart (zoals /service/allround-boekhoudsysteem/) */
    .bk-steps { gap: 24px; }
    .bk-step { flex-direction: column; gap: 0; }
    .bk-step::before { display: none; }
    .bk-step-num {
        width: 38px; height: 38px; flex-basis: 38px; font-size: 1rem;
        z-index: 2;
        margin: 0 0 -14px 16px;
        box-shadow: 0 2px 6px rgba(26, 26, 46, 0.12);
    }
    .bk-step-body { width: 100%; padding: 24px 18px 18px; }
}

/* ----- Sitelink-targets: anker-offset onder sticky topbar ----- */
html { scroll-padding-top: 84px; }

/* ----- "Meer informatie" section-head ----- */
.bk-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 24px;
}
.bk-section-head h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--bk-ink);
    line-height: 1.2;
}
.bk-section-head .bk-eyebrow { margin-bottom: 10px; }

/* De uitklap-accordion (.bk-details) staat sinds de FAQ gedeeld wordt in
   publiek-2026.css: /service/<slug>/ gebruikt hem ook en laadt dit bestand
   niet. Voeg hier geen tweede bron toe. */
/* Sub-kopje boven een opsomming in een bk-card (taakverdeling-kaart).
   `.bk-card p` heeft margin:0 met hogere specificiteit dan een enkel-class-selector,
   dus verhoog naar `.bk-card p.bk-list-label` zodat de marges wél pakken. */
.bk-card p.bk-list-label {
    margin: 16px 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bk-accent-dark);
}

/* --- Typografische patronen (offerteregel-taal, spiegel van home.css) --- */
.bk-eyebrow--type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bk-accent-dark);
}

.bk-eyebrow--type::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--bk-accent);
}

.bk-spec-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bk-spec-lijst li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--bk-border);
    font-size: 0.94rem;
    color: var(--bk-text);
}

.bk-spec-lijst li:last-child {
    border-bottom: 1px solid var(--bk-border);
}

.bk-spec-lijst li::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    background: var(--bk-accent);
    transform: translateY(-1px);
}

.bk-spec-lijst strong {
    color: var(--bk-ink);
}

ol.bk-spec-lijst {
    counter-reset: bk-spec;
}

ol.bk-spec-lijst li::before {
    counter-increment: bk-spec;
    content: counter(bk-spec);
    width: auto;
    height: auto;
    background: none;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--bk-accent-dark);
    min-width: 16px;
    transform: none;
}

.bk-module-lijst {
    margin: 0;
}

.bk-module {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 4px 32px;
    padding: 16px 0;
    border-top: 1px solid var(--bk-border);
}

.bk-module:last-child {
    border-bottom: 1px solid var(--bk-border);
}

.bk-module h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bk-ink);
    margin: 0;
}

.bk-module p {
    margin: 0;
    font-size: 0.94rem;
    color: var(--bk-text);
}

.bk-video {
    max-width: 960px;
    margin: 0 auto;
}

.bk-video video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    border: 1px solid var(--ff-rule-soft, #DFE3E9);
    box-shadow: none;
    background: #000;
}

/* Vimeo-embed (productie): zelfde kader als de self-hosted video, 16:9 */
.bk-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    border: 1px solid var(--ff-rule-soft, #DFE3E9);
    box-shadow: none;
    background: #000;
}

@media (max-width: 768px) {
    .bk-module {
        grid-template-columns: 1fr;
    }
}

/* ----- Slider-section (op boekhoudsysteem.html) ----- */
.bk-section--slider { padding-bottom: 8px; }

/* Structuur staat in slider.css (gedeeld). Hier alleen de LICHTE thema-tokens. */
.hiw-swiper {
    --slider-eyebrow: var(--bk-accent-dark);
    --slider-title: var(--bk-ink);
    --slider-text: var(--bk-text);
    --slider-accent: var(--bk-accent);
    --slider-arrow-bg: var(--bk-card);
    --slider-arrow-border: var(--bk-border);
    --slider-arrow-hover-bg: var(--bk-card);
    --slider-arrow-hover-border: var(--bk-accent);
    --slider-arrow-backdrop: none;
    --slider-img-border: 1px solid var(--bk-border);
    --slider-img-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(26, 26, 46, 0.18);
}

/* ----- Trust-strip (feitelijke vertrouwenssignalen) ----- */
.bk-trust-section {
    padding: 18px 0 4px;
}
.bk-trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
}
.bk-trust li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--bk-ink);
}
.bk-trust li i {
    color: var(--bk-accent);
    font-size: 1.05rem;
}
@media (max-width: 575px) {
    .bk-trust { gap: 10px 18px; }
    .bk-trust li { font-size: 0.85rem; }
}

@media (max-width: 768px) {
    /* Footer gecentreerd op mobiel — kolom-richting i.p.v. justify-content
       (Bootstrap's .justify-content-between is !important en zou dat overschrijven) */
    .bk-footer .bk-container { flex-direction: column; text-align: center; }
}

/* Skip-link (WCAG 2.4.1) staat in static/css/home/navbar.css */

/* Kennisbank-verwijzingen (regel-lijst, bk-spiegel van .kb-regels op de homepage) */
.bk-kb-regels {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
}

.bk-kb-regels .bk-eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
}

.bk-kb-regel {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--bk-border);
    text-decoration: none;
}

.bk-kb-regel:last-child {
    border-bottom: 1px solid var(--bk-border);
}

.bk-kb-regel-titel {
    font-weight: 600;
    font-size: 1rem;
    color: var(--bk-ink);
    transition: color 0.2s ease;
    overflow-wrap: anywhere;
}

.bk-kb-regel i {
    margin-left: auto;
    color: var(--bk-accent);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.bk-kb-regel:hover .bk-kb-regel-titel {
    color: var(--bk-accent);
}

/* Sectienavigatie (klikbaar pagina-overzicht onder de hero) */
.bk-section--nav {
    padding-top: 0;
    padding-bottom: 0;
}

.bk-sectienav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid var(--bk-border);
    border-bottom: 1px solid var(--bk-border);
}

.bk-sectienav-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bk-muted);
    margin-right: 4px;
}

.bk-sectienav-link {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--bk-border);
    border-radius: 999px;
    background: var(--bk-card);
    color: var(--bk-ink);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.bk-sectienav-link:hover {
    border-color: var(--bk-accent);
    color: var(--bk-accent);
}

/* Anchors onder de sticky navbar laten uitkomen */
#connector, #samenstellen, #kantoor-suite, #workflow, #kennisbank {
    scroll-margin-top: 84px;
}

/* Intro-alinea onder een sectiekop (Samenstellen-sectie) */
.bk-sectie-intro {
    max-width: 820px;
    margin: 0 auto 1.75rem;
    text-align: center;
    color: var(--bk-text);
}

/* Op een telefoon groeit deze intro naar 8 tot 15 regels; gecentreerd is dat aan
   beide zijden rafelig. Moet ná de regel hierboven staan - een media query
   verhoogt de specificiteit niet, dus alleen de volgorde beslist. */
@media (max-width: 991px) {
    .bk-sectie-intro {
        text-align: left;
    }
}

.bk-actions--sectie {
    justify-content: center;
    margin-top: 1.75rem;
}

/* Sub-kopje boven een opsomming buiten een bk-card. Binnen een card blijft
   `.bk-card p.bk-list-label` leidend (hogere specificiteit op de marges). */
.bk-list-label {
    margin: 1.75rem 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bk-accent-dark);
}

/* Bedrijven: de procesafbeelding en leesbare uitleg delen de bestaande leesrand. */
.bk-bedrijven-flow { margin: 0 0 28px; }
.bk-bedrijven-flow img { display: block; width: 100%; height: auto; }
.bk-bedrijven-flow figcaption { margin-top: 10px; font-size: .85rem; color: var(--ff-ink-60); }
.bk-bedrijven-stappen { list-style: none; counter-reset: bedrijfstap; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.bk-bedrijven-stappen li { counter-increment: bedrijfstap; border-top: 1px solid var(--ff-rule-soft); padding-top: 16px; }
.bk-bedrijven-stappen h3 { font-family: var(--ff-display); font-size: 1.12rem; margin: 0 0 10px; }
.bk-bedrijven-stappen h3::before { content: counter(bedrijfstap, decimal-leading-zero) "  "; color: var(--ff-magenta-ink); font-family: var(--ff-mono); font-size: .85rem; }
.bk-bedrijven-stappen p { margin: 0; line-height: 1.7; }
.bk-bedrijven .bk-card p + p { margin-top: 14px; }
.bk-bedrijven .bk-section-head p { max-width: 760px; margin: 14px 0 0; line-height: 1.7; }
.bk-bedrijven-verdieping { margin: 20px 0 0; }
@media (max-width: 768px) {
    .bk-bedrijven-stappen { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}