/* ============================================================
   beheer.css — gedeelde stijlen voor het QRScan klantportaal
   Harmoniseert met qrbarcodes-info/qrbarcodes.css
   Kleurenpalet: #1a6fdb (blauw) · #1a2340 (navy) · #1558b8 (hover)
   ============================================================ */

/* ===== RESET & BASE ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: #f4f6fb;
    color: #1a2340;
    display: flex;
    min-height: 100vh;
}
a { text-decoration: none; }

/* ===== SIDEBAR ===== */
.sidebar {
    width: 230px;
    min-height: 100vh;
    background: #1a2340;
    color: #c8d0e0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
}
.sidebar-brand {
    padding: 22px 20px 18px;
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #2a3558;
    display: flex;
    align-items: center;
    gap: 10px;
}
.brand-icon { font-size: 22px; color: #1a6fdb; }
.brand-name { letter-spacing: .02em; }
.brand-name strong { color: #1a6fdb; }

.sidebar-klant {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #2a3558;
}
.klant-avatar {
    width: 36px; height: 36px;
    background: #1a6fdb;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; color: #fff;
    flex-shrink: 0;
}
.klant-naam { font-size: 13px; font-weight: 600; color: #e8ecf4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.klant-code { font-size: 11px; color: #6b7899; }

/* Pakket-badge in de sidebar */
.sidebar-pakket {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.sidebar-pakket.starter      { background: #2a3558; color: #8a9bc8; border: 1px solid #3a4878; }
.sidebar-pakket.professional { background: #1a4a6b; color: #63b8f5; border: 1px solid #1f6090; }
.sidebar-pakket.business     { background: #2d2000; color: #f5c842; border: 1px solid #5a4000; }

/* Beheerderbadge bovenin beheerder-sidebar */
.beheerder-banner {
    background: #22c55e;
    color: #0a1f0f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    padding: 7px 12px;
    border-bottom: 2px solid #16a34a;
}

.nav-list { list-style: none; padding: 12px 0; flex: 1; }
.nav-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: #8a96b3;
    text-decoration: none;
    font-size: 13.5px;
    transition: background .15s, color .15s;
    border-left: 3px solid transparent;
}
.nav-item a:hover { background: #232e50; color: #c8d0e0; }
.nav-item.active a { background: #1f2d52; color: #fff; border-left-color: #1a6fdb; font-weight: 600; }
.nav-icon { font-size: 16px; width: 20px; text-align: center; }

/* ===== NAV-GROEPEN (subnavigatie) ===== */
.nav-group { padding: 4px 0; }
.nav-group-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 6px;
    color: #5d6a8c;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}
.nav-group.active .nav-group-label { color: #a9c2fb; }
.nav-group-label .nav-icon { font-size: 13px; }
.nav-sublist { list-style: none; }
.nav-subitem a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px 9px 30px;
    color: #8a96b3;
    text-decoration: none;
    font-size: 13px;
    transition: background .15s, color .15s;
    border-left: 3px solid transparent;
}
.nav-subitem a:hover { background: #232e50; color: #c8d0e0; }
.nav-subitem.active a { background: #1f2d52; color: #fff; border-left-color: #1a6fdb; font-weight: 600; }

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid #2a3558;
}
.footer-link { font-size: 12px; color: #6b7899; text-decoration: none; }
.footer-link:hover { color: #8a96b3; }

/* ===== SIDEBAR — BEHEERDERMODUS =====
   Op pagina's speciaal voor de systeembeheerder (qrbarcodes/beheer/beheerder/) krijgt de
   sidebar een groene achtergrond i.p.v. de standaard blauw/navy — zodat in één oogopslag
   duidelijk is of je in de databasebrede beheerderspagina's zit. Klant/beheerder-pagina's op
   het hoofdniveau van beheer/ (klantweergave, ook als de ingelogde gebruiker beheerder is)
   houden de blauwe sidebar (_nav.php). Toegepast via extra class "beheerder-modus" op
   <nav class="sidebar"> in beheerder/_nav.php. */
.sidebar.beheerder-modus { background: #1a3830; }
.sidebar.beheerder-modus .sidebar-brand,
.sidebar.beheerder-modus .sidebar-klant { border-bottom-color: #1f4a3c; }
.sidebar.beheerder-modus .sidebar-footer { border-top-color: #1f4a3c; }
.sidebar.beheerder-modus .brand-icon,
.sidebar.beheerder-modus .brand-name strong { color: #22c55e; }
.sidebar.beheerder-modus .klant-avatar { background: #22c55e; }
.sidebar.beheerder-modus .nav-item a:hover,
.sidebar.beheerder-modus .nav-subitem a:hover { background: #1f4a3c; }
.sidebar.beheerder-modus .nav-item.active a,
.sidebar.beheerder-modus .nav-subitem.active a { background: #1d3f33; border-left-color: #22c55e; }
.sidebar.beheerder-modus .nav-group.active .nav-group-label { color: #8fe3b8; }

/* ===== MAIN CONTENT ===== */
.main {
    margin-left: 230px;
    flex: 1;
    padding: 28px 32px;
    min-height: 100vh;
}
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 22px; font-weight: 700; }
.page-header p { font-size: 13px; color: #8a93a6; margin-top: 4px; }

/* ===== CARDS ===== */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.card {
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    border-top: 4px solid #e0e6f0;
}
.card.blue   { border-top-color: #1a6fdb; }
.card.green  { border-top-color: #34c47c; }
.card.orange { border-top-color: #ffb84d; }
.card.red    { border-top-color: #e25858; }
.card .c-label   { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a93a6; }
.card .c-value   { font-size: 28px; font-weight: 700; margin: 6px 0 4px; }
.card .c-sub     { font-size: 12px; color: #8a93a6; }
.card .c-sub.up  { color: #34c47c; font-weight: 600; }
.card .c-sub.down{ color: #e25858; font-weight: 600; }

/* ===== PANEL ===== */
.panel {
    background: #fff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    margin-bottom: 20px;
}
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.panel-header h2 { font-size: 15px; font-weight: 700; }
.panel-header a  { font-size: 12px; color: #1a6fdb; text-decoration: none; }
.panel-header a:hover { text-decoration: underline; }

/* ===== GRID ===== */
.grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* min-width: 0 voorkomt dat Chart.js-canvas (met vaste px-breedte als HTML-attribuut)
   de grid-kolom vergrendelt bij window-resize. */
.grid2 > *, .grid3 > * { min-width: 0; }
@media (max-width: 900px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ===== TABLE ===== */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid #eef1f6; }
th { color: #1a6fdb; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
td a { color: #1a2340; text-decoration: none; font-weight: 600; }
td a:hover { color: #1a6fdb; text-decoration: underline; }

/* ===== DL INFO ===== */
dl.info div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #eef1f6; font-size: 13px; }
dl.info dt { color: #8a93a6; }
dl.info dd { margin: 0; font-weight: 600; text-align: right; max-width: 65%; word-break: break-word; }
dl.info dd a { color: #1a6fdb; text-decoration: none; }
dl.info dd a:hover { text-decoration: underline; }
dl.info dd .badge { font-weight: 600; }

/* ===== BADGES ===== */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.badge.actief    { background: #e3f8ed; color: #1f9d5a; }
.badge.inactief  { background: #fff1de; color: #c9821a; }
.badge.gepland   { background: #e8eefd; color: #1a6fdb; }
.badge.verlopen  { background: #fbe7e7; color: #c64545; }
.badge.concept   { background: #f0f0f0; color: #666; }
.badge.beheerder { background: #e8eefd; color: #1558b8; }

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background .15s;
}
.btn-primary { background: #1a6fdb; color: #fff; }
.btn-primary:hover { background: #1558b8; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary:disabled:hover { background: #1a6fdb; }
.btn-outline { background: #fff; color: #1a6fdb; border: 1.5px solid #1a6fdb; }
.btn-outline:hover { background: #f0f4ff; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-download { background: #f4f6fb; color: #1a2340; border: 1.5px solid #dde3ef; }
.btn-download:hover { background: #e8ecf6; }

/* ===== FORM ===== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 700; color: #6b7899; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #dde3ef;
    border-radius: 8px;
    font-size: 13px;
    color: #1a2340;
    font-family: inherit;
    background: #fff;
    transition: border-color .15s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { outline: none; border-color: #1a6fdb; box-shadow: 0 0 0 3px rgba(26,111,219,.12); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: 12px; color: #8a93a6; margin-top: 4px; }
.alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.alert-success { background: #e3f8ed; color: #1f9d5a; border: 1px solid #b3e8cc; }
.alert-error   { background: #fbe7e7; color: #c64545; border: 1px solid #f5bebe; }

/* ===== DOC CARDS ===== */
.doc-card {
    background: #fff;
    border: 1.5px solid #eef1f6;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.doc-card .doc-icon { font-size: 32px; }
.doc-card .doc-title { font-size: 14px; font-weight: 700; }
.doc-card .doc-desc  { font-size: 12px; color: #8a93a6; flex: 1; }
canvas { max-height: 220px; max-width: 100%; display: block; }

/* ===== SORTEERBARE TABELLEN ===== */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { background: #f0f4ff; }
th.sort-asc, th.sort-desc { color: #1558b8; }
.sort-icon { font-size: 11px; color: #c0c8d8; margin-left: 3px; }
th.sort-asc  .sort-icon::before { content: '↑'; color: #1558b8; }
th.sort-desc .sort-icon::before { content: '↓'; color: #1558b8; }
th:not(.sort-asc):not(.sort-desc) .sort-icon::before { content: '⇅'; }

/* ===== LOGIN PAGINA (standalone, geen sidebar) ===== */
body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.login-wrap { width: 100%; max-width: 420px; }
.login-brand { text-align: center; margin-bottom: 28px; }
.login-brand .brand-icon { font-size: 36px; color: #1a6fdb; }
.login-brand .brand-name { font-size: 24px; font-weight: 700; color: #1a2340; margin-top: 6px; display: block; }
.login-brand .brand-name strong { color: #1a6fdb; }
.login-brand .brand-sub { font-size: 13px; color: #8a93a6; margin-top: 4px; }
.login-box {
    background: #fff;
    border-radius: 16px;
    padding: 36px 40px;
    box-shadow: 0 4px 24px rgba(0,0,0,.09);
}
.login-box .form-group input {
    padding: 11px 14px;
    font-size: 14px;
}
.btn-login {
    width: 100%;
    padding: 13px;
    background: #1a6fdb;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    margin-top: 4px;
}
.btn-login:hover { background: #1558b8; }
.login-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: #8a93a6;
    line-height: 1.6;
}
.login-footer a { color: #1a6fdb; text-decoration: none; }
.login-footer a:hover { text-decoration: underline; }

/* ===== BEHEER UTILITY (wachtwoord instellen e.d.) ===== */
body.util-page {
    display: block;
    padding: 40px;
}
.util-box {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    max-width: 460px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.util-box h1 { font-size: 18px; margin-bottom: 20px; color: #c9821a; }
.util-box code {
    display: block;
    font-family: monospace;
    font-size: 11px;
    background: #f4f6fb;
    padding: 10px;
    border-radius: 6px;
    margin-top: 12px;
    word-break: break-all;
}
.util-warn { font-size: 12px; color: #c9821a; margin-top: 18px; }

/* ===== FAQ ===== */
.faq-lijst { display: flex; flex-direction: column; gap: 2px; }
.faq-item  { border: 1.5px solid #eef1f6; border-radius: 10px; overflow: hidden; }
.faq-vraag {
    width: 100%; background: #fff; border: none; padding: 15px 18px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-size: 14px; font-weight: 600; color: #1a2340; cursor: pointer;
    text-align: left; font-family: inherit; transition: background .15s;
}
.faq-vraag:hover { background: #f8f9fd; }
.faq-item.open .faq-vraag { background: #f0f4ff; color: #1558b8; }
.faq-icoon { font-size: 20px; font-weight: 300; color: #8a93a6; flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-icoon { transform: rotate(45deg); color: #1558b8; }
.faq-antwoord { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-item.open .faq-antwoord { max-height: 400px; }
.faq-antwoord-inner {
    padding: 14px 18px 18px;
    font-size: 13.5px; line-height: 1.7; color: #4a5568;
    border-top: 1px solid #eef1f6; background: #fafbfe;
}
.faq-antwoord-inner a  { color: #1a6fdb; }
.faq-antwoord-inner code { background: #e8edf7; padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.faq-antwoord-inner strong { color: #1a2340; }

/* ===== RESPONSIVE ===== */
@media (max-width: 700px) {
    .sidebar { width: 200px; }
    .main { margin-left: 200px; padding: 16px; }
}
@media (max-width: 500px) {
    .login-box { padding: 28px 20px; }
}

/* ── Handleiding (help.php) ───────────────────────────── */
.help-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.help-kruimel { font-size: 13px; color: #8a93a6; }
.help-kruimel a { color: #1a6fdb; text-decoration: none; }
.help-kruimel a:hover { text-decoration: underline; }
.help-kruimel span { margin: 0 8px; color: #c2c9d8; }
.help-kruimel strong { color: #1a2340; font-weight: 600; }
.help-pakket { font-size: 12px; color: #6b7899; background: #eef3fb; padding: 4px 12px; border-radius: 999px; }
.help-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.help-menu { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border: 1px solid #e3e9f4; border-radius: 14px; padding: 16px 12px; }
.help-menu-knop { display: none; width: 100%; background: none; border: 0; font: inherit; font-weight: 600; color: #1a2340; text-align: left; padding: 6px 8px; cursor: pointer; }
.help-zoek { width: 100%; box-sizing: border-box; border: 1px solid #d6deec; border-radius: 10px; padding: 9px 12px; font-size: 13.5px; margin-bottom: 10px; background: #f8fafd; }
.help-zoek:focus { outline: 2px solid #1a6fdb33; border-color: #1a6fdb; background: #fff; }
.help-groep { margin-top: 14px; }
.help-groep-titel { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a93a6; padding: 0 10px 6px; }
.help-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 14px; color: #3a4668; text-decoration: none; line-height: 1.3; }
.help-item:hover { background: #f1f5fc; }
.help-item.actief { background: #e8f0ff; color: #1457b8; font-weight: 600; }
.help-ico { width: 18px; height: 18px; flex: none; color: #7d8aa8; }
.help-item.actief .help-ico { color: #1a6fdb; }
.help-sub { margin: 2px 0 6px 21px; padding-left: 14px; border-left: 2px solid #e3e9f4; }
.help-sub a { display: block; padding: 5px 8px; font-size: 13px; color: #6b7899; text-decoration: none; border-radius: 6px; line-height: 1.35; }
.help-sub a:hover { color: #1a6fdb; }
.help-sub a.actief { color: #1a6fdb; font-weight: 600; }
.help-geen { font-size: 13px; color: #6b7899; padding: 10px; }
.help-inhoud { background: #fff; border: 1px solid #e3e9f4; border-radius: 14px; padding: 34px 44px 30px; font-size: 15.5px; line-height: 1.75; color: #3a4668; min-width: 0; max-width: 860px; }
.help-inhoud h1 { font-size: 28px; line-height: 1.25; color: #14213d; margin: 0 0 8px; letter-spacing: -.01em; }
.help-inhoud h2 { font-size: 20px; color: #14213d; margin: 38px 0 10px; padding-top: 22px; border-top: 1px solid #edf1f8; scroll-margin-top: 16px; }
.help-lead + h2, .help-inhoud h1 + h2 { border-top: 0; padding-top: 0; }
.help-inhoud h3 { font-size: 16px; color: #14213d; margin: 22px 0 6px; }
.help-inhoud p, .help-inhoud ul, .help-inhoud ol { margin: 0 0 14px; }
.help-inhoud ul { padding-left: 22px; }
.help-inhoud li { margin-bottom: 6px; }
.help-inhoud a { color: #1a6fdb; }
.help-inhoud code { background: #f1f5fc; border: 1px solid #e3e9f4; border-radius: 6px; padding: 1px 6px; font-size: .9em; color: #1a3a78; }
.help-lead { font-size: 17.5px; line-height: 1.65; color: #5a6585; margin-bottom: 26px; }
.help-inhoud ol { list-style: none; counter-reset: stap; padding: 0; }
.help-inhoud ol > li { counter-increment: stap; position: relative; padding: 4px 0 4px 46px; margin-bottom: 12px; }
.help-inhoud ol > li::before { content: counter(stap); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: #1a6fdb; color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.help-tip, .help-let-op, .help-voorbeeld { position: relative; border-radius: 12px; padding: 14px 18px 14px 52px; margin: 18px 0; font-size: 14.5px; line-height: 1.65; }
.help-tip::before, .help-let-op::before, .help-voorbeeld::before { position: absolute; left: 16px; top: 14px; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.help-tip { background: #eef5ff; border: 1px solid #cfe0fb; }
.help-tip::before { content: "i"; background: #1a6fdb; }
.help-let-op { background: #fff8e8; border: 1px solid #f3dfae; }
.help-let-op::before { content: "!"; background: #d99a1c; }
.help-voorbeeld { background: #effaf2; border: 1px solid #c6e8d1; }
.help-voorbeeld::before { content: "✓"; background: #2f9e5a; }
.help-inhoud dl { margin: 0 0 14px; }
.help-veld { border: 1px solid #e3e9f4; border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; background: #fbfcfe; scroll-margin-top: 16px; }
.help-veld dt { font-weight: 700; color: #14213d; font-size: 15.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.help-veld dd { margin: 6px 0 0; }
.help-veld p { margin: 4px 0 0; }
.help-veld .verplicht, .help-veld .optioneel { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; }
.help-veld .verplicht { background: #fdeaea; color: #b53030; }
.help-veld .optioneel { background: #eef1f7; color: #6b7899; }
.help-inhoud table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e3e9f4; border-radius: 12px; overflow: hidden; margin: 16px 0; font-size: 14.5px; }
.help-inhoud th { background: #f3f6fc; color: #14213d; text-align: left; padding: 11px 14px; border: 0 !important; border-bottom: 1px solid #e3e9f4 !important; }
.help-inhoud td { padding: 11px 14px; border: 0 !important; border-bottom: 1px solid #edf1f8 !important; vertical-align: top; }
.help-inhoud tr:last-child td { border-bottom: 0 !important; }
.help-inhoud td:first-child { width: 34%; }
.help-inhoud table { font-size: 14px; }
.help-navigatie { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; padding-top: 24px; border-top: 1px solid #edf1f8; }
.help-kaart { display: block; border: 1px solid #dbe3f2; border-radius: 12px; padding: 14px 18px; text-decoration: none !important; color: #14213d !important; transition: border-color .15s, box-shadow .15s; }
.help-kaart:hover { border-color: #1a6fdb; box-shadow: 0 2px 10px rgba(26,111,219,.12); }
.help-kaart small { display: block; color: #8a93a6; font-size: 12px; margin-bottom: 2px; }
.help-kaart strong { font-size: 15px; }
.help-kaart-volgende { text-align: right; grid-column: 2; }
.help-nog-vragen { margin-top: 20px; padding: 14px 18px; background: #f5f8fd; border-radius: 12px; font-size: 14px; color: #5a6585; }
.help-i { display: inline-block; margin-left: 6px; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: #e6efff; color: #1a6fdb !important; font-size: 12px; font-weight: 700; text-decoration: none; vertical-align: middle; }
.help-i:hover { background: #1a6fdb; color: #fff !important; }
@media (max-width: 1000px) {
  .help-wrap { grid-template-columns: 1fr; gap: 16px; }
  .help-menu { position: static; max-height: none; padding: 8px 10px; }
  .help-menu-knop { display: block; }
  .help-menu .help-menu-lijst { display: none; padding-bottom: 8px; }
  .help-menu.open .help-menu-lijst { display: block; }
  .help-inhoud { padding: 22px 18px; font-size: 15px; }
  .help-inhoud h1 { font-size: 23px; }
  .help-navigatie { grid-template-columns: 1fr; }
  .help-kaart-volgende { grid-column: auto; }
}